:root { caret-color: transparent; color-scheme: dark; }
[hidden] { display: none !important; }
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; background: #000; overflow: hidden; }
body { display: grid; place-items: center; font-family: system-ui, "Segoe UI", sans-serif; }
button, a { user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }

/* Bühne immer im Seitenverhältnis des Films (9:16), so groß wie möglich. */
.buehne {
  position: relative;
  width: min(100vw, calc(100vh * 9 / 16));
  width: min(100vw, calc(100dvh * 9 / 16));
  aspect-ratio: 9 / 16;
}
video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; pointer-events: none; }
video::-webkit-media-controls { display: none !important; }

/* Am Ende: Der Schriftzug NIDAHUB im Film wird zum Knopf. Lage gemessen am letzten Bild
   (Text 25–76,5 % breit, 63,5–69,5 % hoch). */
.titel-link {
  position: absolute; left: 21%; width: 58%; top: 61.6%; height: 9.6%;
  display: block; border-radius: 999px; color: transparent; font-size: 0;
  border: 2px solid rgba(62, 232, 255, 0.75);
  box-shadow: 0 0 24px rgba(62, 232, 255, 0.35), inset 0 0 24px rgba(62, 232, 255, 0.15);
  opacity: 0; transition: opacity .6s ease, box-shadow .2s ease, background-color .2s ease;
  cursor: pointer; outline: none;
}
.titel-link.da { opacity: 1; animation: puls 2.4s ease-in-out .6s infinite; }
.titel-link:hover, .titel-link:focus-visible {
  background-color: rgba(62, 232, 255, 0.08);
  box-shadow: 0 0 36px rgba(62, 232, 255, 0.6), inset 0 0 30px rgba(62, 232, 255, 0.25);
}
.titel-link:focus-visible { border-color: #fff; }
@keyframes puls {
  0%, 100% { box-shadow: 0 0 24px rgba(62, 232, 255, 0.35), inset 0 0 24px rgba(62, 232, 255, 0.15); }
  50%      { box-shadow: 0 0 44px rgba(62, 232, 255, 0.7),  inset 0 0 32px rgba(62, 232, 255, 0.3); }
}

/* Nur sichtbar, wenn der Browser den Ton beim Start blockiert hat. */
.ton {
  position: absolute; right: 4%; top: 2.5%;
  display: inline-flex; align-items: center; gap: .45em;
  padding: .5em .9em .5em .7em; border-radius: 999px;
  font: 600 13px/1 system-ui, "Segoe UI", sans-serif; letter-spacing: .08em; text-transform: uppercase;
  color: #b9e9ff; background: rgba(4, 5, 10, 0.55); border: 1px solid rgba(185, 233, 255, 0.45);
  cursor: pointer; backdrop-filter: blur(6px);
}
.ton svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ton svg path:first-child { fill: currentColor; stroke: none; }
.ton:hover { border-color: #b9e9ff; }
.ton:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Klick-Rückmeldung (zentral, siehe film.js) */
.geklickt { animation: klick .45s ease-out; }
@keyframes klick { 0% { filter: brightness(1.8); } 100% { filter: none; } }

@media (prefers-reduced-motion: reduce) {
  .titel-link.da { animation: none; }
}

/* Schmaler als 9:16 (Handy hochkant): Bühne füllt die Höhe, seitlich wird etwas beschnitten.
   Der Titel liegt bei 25–76,5 % der Breite und bleibt sichtbar. */
@media (max-aspect-ratio: 9/16) {
  .buehne {
    position: fixed; top: 0; left: 50%; transform: translateX(-50%);
    height: 100vh; height: 100dvh; width: auto;
  }
  .ton { right: calc(9% + 12px); top: calc(env(safe-area-inset-top, 0px) + 2%); }
}