html {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: none;
}

/* The one-pager is the only screen that scrolls natively. iOS works out
   what a touch may do by intersecting touch-action from the touched element
   up to the document, so the none above has to be relaxed here - a value on
   the scroll container alone would never take effect. pan-y still blocks
   pinch and double-tap zoom. */
html.one-pager {
    touch-action: pan-y;
}

body {
    margin: 0;
    padding: 0;
    background-color: rgb(255, 255, 255);
    color: #3d3d3d;
    font-family: monospace, monospace;
    font-size: 1vw;
    overflow: hidden;
 }

#settings-textarea {
    -webkit-touch-callout: default;
    -webkit-user-select: text;
    user-select: text;
}


#content {
  width: 72%;
  display: block;
  background-color: transparent;
  margin-left: auto;
  margin-right: auto;
  margin-top: 25vh;
  margin-bottom: 5vh;
  height: 75vh;
  padding-left: 5vh;
  padding-right: 5vh;
}

#video-library-content {
  width: 89%;
  display: block;
  background-color: transparent;
  margin-left: auto;
  margin-right: auto;
  margin-top: 30vh;
  margin-bottom: 5vh;
  height: 65vh;
  padding-top: 10vh;
}

.carlist {
  padding-bottom: 16vh;
}

.tile-page {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3vh 2vh;
  justify-items: center;
}

.tile-page .btn {
  margin: 0;
}

.video-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3vh 2%;
  justify-items: center;
}

.video-grid .btn {
  margin: 0;
  align-items: flex-start;
  width: 100%;
}

@font-face {
  font-family: 'Helvetica Neue';
  src: url('../assets/HelveticaNeue-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
}

.video-grid .btn .video-tile-title {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.8vh 0;
  box-sizing: border-box;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: 1.5em;
  line-height: 110%;
}

.carlist-controls {
  position: absolute;
  bottom: -2vh;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.6vh;
  padding: 0 2vh;
  box-sizing: border-box;
  z-index: 10;
  pointer-events: none;
}

.carlist .flickity-prev-next-button {
  position: static;
  transform: none;
  pointer-events: auto;
  flex-shrink: 0;
  width: 8vh;
  height: 8vh;
  border-radius: 0;
  background-color: transparent;
  background-image: url('../assets/arrow_left.svg');
  background-size: 60%;
  background-repeat: no-repeat;
  background-position: center;
}

.carlist .flickity-prev-next-button:hover,
.carlist .flickity-prev-next-button:active {
  background-color: transparent;
  background-image: url('../assets/arrow_left.svg');
  background-size: 60%;
  background-repeat: no-repeat;
  background-position: center;
}

.carlist .flickity-prev-next-button .flickity-button-icon {
  display: none;
}

.carlist .flickity-prev-next-button.next {
  transform: scaleX(-1);
}

.carlist .flickity-page-dots {
  position: static;
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.carlist .flickity-page-dots .dot {
  pointer-events: auto;
  width: 5vh;
  height: 5vh;
  margin: 0;
  background-color: transparent;
  background-image: url('../assets/dot_not_selected.svg');
  background-size: contain;
  background-repeat: no-repeat;
  border-radius: 0;
  opacity: 1;
}

.carlist .flickity-page-dots .dot.is-selected {
  background-image: url('../assets/dot_selected.svg');
}

.center {
  width: 100vw;
  height: 100vh;
  background-color: #000;
}

.center .flickity-page-dots {
  display: none;
}

 .btn {
    font-family: monospace, monospace;
    font-size: 100%;
    background: transparent;
    padding: 0;
    border: none;
    text-decoration: none;
    color: #000000;
    -webkit-tap-highlight-color: transparent;
    margin-right: .1vh;
    margin-bottom: 1vh;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    vertical-align: top;
  }

  .btn .thumb {
    display: block;
    width: auto;
    height: 22vh;
    object-fit: cover;
  }

  .video-grid .thumb {
    width: 100%;
    height: auto;
  }

  .btn span {
    display: block;
    padding: 0.8vh 1vh;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
  }

  .btn.caractive {
    
   
    background: #3068ad;
   
  }
  
  .btn:hover {
    background: #ffffff;
  }
  
  /* Slide-Modus. Im frueheren Fade-Modus lagen die Nachbarzellen auf
     opacity 0 - beim Ziehen war daher nichts vom naechsten Slide zu sehen.
     Jede Zelle fuellt jetzt den Viewport und zentriert ihren Inhalt. */
  .carousel-cell {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #start-screen {
    width: 100vw;
    height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding-left: 10vh;
    padding-bottom: 15vh;
    box-sizing: border-box;
  }

  #menu-screen {
    width: 100vw;
    height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #video-library-screen {
    width: 100vw;
    height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .menu-btn {
    padding: 0;
    background: transparent;
  }

  .menu-btn:hover {
    background: transparent;
  }

  .menu-btn img {
    display: block;
    height: 11.5vh;
    width: auto;
  }

  .menu-btn:hover img {
    filter: brightness(0.85);
  }

  .menu-corner-btn {
    position: fixed;
    top: 8vh;
    right: 8vh;
    z-index: 100;
  }

  .back-btn {
    position: fixed;
    top: 2vh;
    left: 2vh;
    z-index: 100;
    opacity: 0.7;
  }

  .back-btn:hover {
    opacity: 1;
  }

  .overlay {
    width: 100px;
    height: 100px;
    background-color: rgba(0, 0, 0, 0.0);
    position: fixed;
    top: 0;
    right: 0;
  }

  .settings-trigger-btn {
    position: fixed;
    top: 2vh;
    left: 2vh;
    z-index: 200;
    background: transparent;
    color: transparent;
    padding: 1.5vh 2vh;
    border-radius: 999px;
    font-size: 2vh;
    -webkit-tap-highlight-color: transparent;
  }

  .settings-trigger-btn:hover {
    background: transparent;
  }

  #settings-pin-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
  }

  .pin-panel {
    background: #1D1D1D;
    padding: 3vh;
    border-radius: 1vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3vh;
  }

  .pin-dots {
    display: flex;
    gap: 2vh;
  }

  .pin-dot {
    width: 2vh;
    height: 2vh;
    border-radius: 50%;
    border: 0.2vh solid #FFFFFF;
    background: transparent;
    box-sizing: border-box;
  }

  .pin-dot.filled {
    background: #FFFFFF;
  }

  .pin-pad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2vh;
  }

  .pin-key {
    width: 9vh;
    height: 9vh;
    border-radius: 50%;
    background: #3a3a3a;
    color: #FFFFFF;
    font-size: 3vh;
    align-items: center;
    justify-content: center;
  }

  .pin-key:hover {
    background: #4a4a4a;
  }

  .pin-close-btn {
    padding: 1.5vh 3vh;
    border-radius: 999px;
    background: #848484;
    color: #FFFFFF;
    font-size: 1.8vh;
  }

  @keyframes pin-shake {
    10%, 90% { transform: translateX(-0.5vh); }
    20%, 80% { transform: translateX(1vh); }
    30%, 50%, 70% { transform: translateX(-1.5vh); }
    40%, 60% { transform: translateX(1.5vh); }
  }

  .pin-shake {
    animation: pin-shake 0.4s;
  }

  #settings-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
  }

  .settings-panel {
    background: #1D1D1D;
    padding: 3vh;
    border-radius: 1vh;
    display: flex;
    flex-direction: column;
    gap: 2vh;
  }

  #settings-textarea {
    width: 80vw;
    height: 60vh;
    font-family: monospace, monospace;
    font-size: 1.6vh;
    background: #0f0f0f;
    color: #eee;
    border: none;
    border-radius: 0.5vh;
    padding: 1.5vh;
    box-sizing: border-box;
    resize: none;
  }

  .settings-btn-row {
    display: flex;
    justify-content: center;
    gap: 2vh;
  }

  .settings-btn-row .btn {
    padding: 1.5vh 3vh;
    border-radius: 999px;
    background: #848484;
    color: #FFFFFF;
    font-size: 1.8vh;
  }

  #debug-console {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 30vh;
    background: rgba(0, 0, 0, 0.85);
    color: #0f0;
    font-family: monospace, monospace;
    font-size: 1.3vh;
    line-height: 1.4;
    overflow-y: auto;
    z-index: 9999;
    padding: 0.5vh 1vh;
    box-sizing: border-box;
    pointer-events: auto;
    -webkit-overflow-scrolling: touch;
  }

  #debug-console-toggle {
    top: 8vh;
    z-index: 10000;
  }


  /* ==========================================================================
     Press-Feedback

     Auf einem Touch-Kiosk zaehlt :active, nicht :hover - iOS laesst einen
     Hover-Zustand nach dem Tap haengen, bis woanders hingetippt wird. Die
     bestehenden Hover-Regeln werden fuer reine Touch-Geraete deshalb wieder
     zurueckgenommen.
     ========================================================================== */

  .btn,
  .btn .thumb,
  .menu-btn img,
  .carlist .flickity-prev-next-button {
    transition: background-color 140ms ease-out,
                color 140ms ease-out,
                opacity 140ms ease-out,
                filter 140ms ease-out;
  }

  /* Kacheln: das Thumbnail deckt die Flaeche, die Farbaenderung wirkt also
     ueber das Bild. Der Rahmen nimmt das Blau von .caractive auf. */
  .carlist .btn:active,
  .video-grid .btn:active {
    background: #3068ad;
    color: #ffffff;
  }

  .carlist .btn:active .thumb,
  .video-grid .btn:active .thumb {
    filter: brightness(0.7);
  }

  /* Start-Screen-Buttons und der Menue-Button oben rechts */
  .menu-btn:active img {
    filter: brightness(0.7);
  }

  /* Das X, das aus Gallery bzw. Video zurueck ins Menue fuehrt. Der Button
     wird in buildVideoControls() rein inline gebaut - die Klasse existiert
     nur als Angriffspunkt fuer den Press-State. */
  .vc-close-btn img {
    transition: filter 140ms ease-out;
  }

  .vc-close-btn:active img {
    filter: brightness(0.7);
  }

  .back-btn:active {
    opacity: 1;
    color: #3068ad;
  }

  /* PIN-Pad und Settings-Panel */
  .pin-key:active {
    background: #6a6a6a;
  }

  .pin-close-btn:active,
  .settings-btn-row .btn:active {
    background: #aeaeae;
  }

  .carlist .flickity-prev-next-button:active {
    opacity: 0.45;
  }

  /* Video-Controls: color steht inline und waere von hier nur mit !important
     zu schlagen, daher brightness auf die Glyphe. */
  #vc-playpause {
    transition: filter 140ms ease-out;
  }

  #vc-playpause:active {
    filter: brightness(1.6);
  }

  /* Die unsichtbaren Admin-Trigger duerfen kein Feedback geben, sonst
     verraet ein Druck ihre Position vor Publikum. */
  .settings-trigger-btn,
  .settings-trigger-btn:active,
  .settings-trigger-btn:hover,
  #debug-console-toggle,
  #debug-console-toggle:active,
  #debug-console-toggle:hover {
    transition: none;
    transform: none;
    filter: none;
    opacity: 1;
    background: transparent;
  }

  /* Hover-Rest auf Touch-Geraeten zuruecknehmen */
  @media (hover: none) {
    .btn:hover:not(.caractive) {
      background: transparent;
    }

    .menu-btn:hover img {
      filter: none;
    }

    .back-btn:hover {
      opacity: 0.7;
    }

    .pin-key:hover {
      background: #3a3a3a;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .btn,
    .btn .thumb,
    .menu-btn img,
    .carlist .flickity-prev-next-button,
    #vc-playpause {
      transition: none;
    }
  }

  /* Shown instead of a tile image when a folder has no usable picture. */
  .thumb-missing {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 22vh;
    width: 22vh;
    padding: 0 1vh;
    box-sizing: border-box;
    background: #2a2a2a;
    color: #ffffff;
    font-size: 1.6vh;
    text-align: center;
  }