/* ============================================================
   Rundgang — scroll-gesteuerter Film (/rundgang/)
   Bühne sticky, Scrollposition → video.currentTime
   ============================================================ */

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Die drei Kernregeln: Scrollstrecke / Bühne / Film ---
   Strecke geräteabhängig: Touch hat kein Momentum-Präzisionsrad,
   sonst wird es mühsam (zu viel Wischen für zu wenig Film). */
.route { position: relative; height: 3450vh; }      /* Desktop: ~33 vh/s */
@media (max-width: 1024px) { .route { height: 2600vh; } }  /* Tablet: ~25 vh/s */
@media (max-width: 767px) { .route { height: 2000vh; } }   /* Phone: ~19 vh/s */
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--ink); }
.stage video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* Abdunklung für Textlesbarkeit */
.grade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(125% 95% at 50% 45%, rgba(0, 0, 0, 0) 32%, rgba(0, 0, 0, .70) 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 20%,
                    rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, .92) 100%);
}

/* --- Textebene: Typografie trägt, keine Fläche --- */
.stations { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.st {
  position: absolute; left: 0; bottom: clamp(4rem, 12vh, 8rem);
  padding: clamp(1.1rem, 2.6vh, 1.7rem) clamp(1.4rem, 3.4vw, 2.6rem);
  margin-left: clamp(1.2rem, 5vw, 3.4rem);
  max-width: min(46rem, 72vw);
  background: linear-gradient(105deg, rgba(20, 18, 16, .42) 0%, rgba(20, 18, 16, 0) 80%);
  border-left: 2px solid var(--gold);
  opacity: 0; transform: translateY(16px);
  transition: opacity .55s ease, transform .55s ease;
  will-change: opacity, transform;
}
.st.on { opacity: 1; transform: none; }

.st .no {
  font-family: var(--font-ui); font-weight: 500; text-transform: uppercase;
  letter-spacing: .22em; font-size: .78rem; color: var(--gold);
  margin: 0 0 .9rem;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .55);
}
.st h2 {
  color: #fff; margin-bottom: .5em; font-size: clamp(2.4rem, 5vw, 4.2rem);
  text-shadow: 0 2px 22px rgba(0, 0, 0, .65), 0 1px 4px rgba(0, 0, 0, .5);
}
.st p:not(.no) {
  color: #fdfbf7; max-width: 40rem; font-weight: 400;
  text-shadow: 0 1px 16px rgba(0, 0, 0, .75), 0 1px 3px rgba(0, 0, 0, .6);
}

/* --- Hotspot-Layer: Punkt → Haarline → Glas-Chip ---
   Position kommt per JS-Transform (Tracking im Videobild,
   Cover-Mapping rechnet Frame-% auf die echte Bühne um) */
.hots { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hot { position: absolute; left: 0; top: 0; }

.hot__dot {
  position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 0 3px rgba(226, 190, 83, .22), 0 0 10px rgba(226, 190, 83, .8);
  opacity: 0; transform: scale(.4);
  transition: opacity .4s ease, transform .4s var(--ease);
}
.hot__dot::after {
  content: ""; position: absolute; inset: -8px; border-radius: 50%;
  border: 1px solid rgba(226, 190, 83, .5); opacity: 0;
}
.hot.on .hot__dot::after { animation: hot-pulse 2.2s ease-out infinite; }

.hot__line {
  position: absolute; top: 0; width: 5rem; height: 1px;
  background: var(--gold-soft);
  opacity: 0; transform: scaleX(0);
  transition: opacity .45s ease .12s, transform .5s var(--ease) .12s;
}
.hot--r .hot__line { left: 11px; transform-origin: left center; }
.hot--l .hot__line { right: 11px; transform-origin: right center; }

.hot__label {
  position: absolute; top: 0; white-space: nowrap;
  transform: translateY(-50%) translateX(4px);
  font-family: var(--font-ui); font-weight: 500; font-size: .88rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gold-soft);
  background: rgba(20, 18, 16, .62);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(226, 190, 83, .4); padding: .55em 1.05em;
  opacity: 0;
  transition: opacity .45s ease .24s, transform .45s var(--ease) .24s;
}
.hot--r .hot__label { left: calc(11px + 5rem); }
.hot--l .hot__label { right: calc(11px + 5rem); transform: translateY(-50%) translateX(-4px); }

/* Vertikale Variante: Strich nach oben, Label über dem Punkt */
.hot--u .hot__line {
  left: 0; top: -5rem; width: 1px; height: 5rem;
  transform: scaleY(0); transform-origin: bottom center;
}
.hot--u .hot__label {
  left: 50%; top: calc(-5rem - 10px);
  transform: translateX(-50%) translateY(-100%) translateY(4px);
}

/* Block-Variante: mehrzeiliger, größerer Chip (Finale) —
   jede Zeile bleibt unumbrochen, Umbrüche nur per <br> */
.hot--block .hot__label {
  white-space: nowrap;
  font-size: .95rem; line-height: 2; letter-spacing: .06em;
  text-transform: none; font-weight: 500;
  padding: .9em 1.4em; text-align: left;
}

/* Umbruch-Variante: zweizeiliger Label, bleibt kompakt am Punkt */
.hot--wrap .hot__label { white-space: normal; width: 13.5rem; line-height: 1.55; }

.hot.on .hot__dot { opacity: 1; transform: none; }
.hot.on .hot__line { opacity: 1; transform: scaleX(1); }
.hot.on .hot__label { opacity: 1; transform: translateY(-50%) translateX(0); }
.hot--u.on .hot__line { transform: scaleY(1); }
.hot--u.on .hot__label { transform: translateX(-50%) translateY(-100%); }

@keyframes hot-pulse {
  0% { transform: scale(.6); opacity: .9; }
  100% { transform: scale(2.1); opacity: 0; }
}

/* --- Stationsverzeichnis: Fortschritts-Schiene mit Stationen --- */
.index {
  position: absolute; z-index: 4;
  right: clamp(1rem, 3vw, 2.6rem); top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; justify-content: space-between;
  height: min(46vh, 26rem);
}
.index__track {
  position: absolute; top: .55em; bottom: .55em; right: 0;
  width: 1.5px; background: rgba(246, 242, 234, .18);
}
.index__fill {
  position: absolute; inset: 0;
  background: linear-gradient(var(--gold-deep), var(--gold));
  box-shadow: 0 0 8px rgba(226, 190, 83, .6);
  transform: scaleY(0); transform-origin: top center;
}
.index button {
  position: relative; display: flex; align-items: center; gap: .7rem;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-ui); font-weight: 500; font-size: .66rem;
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(246, 242, 234, .55);
  transition: color .4s var(--ease);
}
.index button .dash {
  width: 1.6rem; height: 1px; background: rgba(246, 242, 234, .35);
  transition: width .4s var(--ease), background .4s var(--ease);
}
.index button:hover, .index button:focus-visible { color: var(--cream); }
.index button.on { color: var(--gold-soft); }
.index button.on .dash { width: 2.6rem; background: var(--gold); }

/* --- Scroll-Cue --- */
.cue {
  position: absolute; z-index: 4; left: 50%; bottom: 1.6rem;
  transform: translateX(-50%);
  font-family: var(--font-ui); font-weight: 500; font-size: .68rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--gold-soft);
  transition: opacity .6s ease;
  animation: cue-float 2.4s ease-in-out infinite;
}
.cue::after {
  content: ""; display: block; margin: .55rem auto 0;
  width: 1px; height: 2.2rem;
  background: linear-gradient(var(--gold), transparent);
}
.cue.hide { opacity: 0; }
@keyframes cue-float {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(6px); }
}

/* --- Ladezustand --- */
.loading {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink);
  transition: opacity .6s ease, visibility .6s;
}
.loading p {
  font-family: var(--font-ui); font-weight: 500; font-size: .72rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--gold-soft);
}
.loading.gone { opacity: 0; visibility: hidden; }

/* --- Mobile: Verzeichnis weg, Text volle Breite, Hotspots kompakter --- */
@media (max-width: 860px) {
  .index { display: none; }
  .st { max-width: 88vw; bottom: clamp(4.5rem, 14vh, 7rem); margin-left: 0; }
  .hot__line { width: 2.2rem; }
  .hot--r .hot__label { left: calc(9px + 2.2rem); }
  .hot--l .hot__label { right: calc(9px + 2.2rem); }
  .hot__label { font-size: .68rem; letter-spacing: .1em; padding: .5em .75em; }
  /* Auf kleinen Screens nur die wichtigsten Marker — sonst wird es voll */
  .hot--mob-off { display: none; }
}

/* --- Phones (< 768 px): Hotspot-Layer komplett aus.
   Der große Stationstext nimmt hier fast die volle Breite ein —
   jeder Chip würde kollidieren. Die Fakten stehen in den Stationstexten.
   Ab 768 px (iPad) bleiben die Marker mit dem mob-off-Subset sichtbar. */
@media (max-width: 767px) {
  .hots { display: none; }
  /* Textblöcke kleiner: bedecken sonst zu viel vom Film */
  .st { padding: .9rem 1.1rem; max-width: 92vw; bottom: clamp(3.5rem, 10vh, 5rem); }
  .st .no { font-size: .64rem; letter-spacing: .18em; margin-bottom: .55rem; }
  .st h2 { font-size: clamp(1.6rem, 7.2vw, 2.1rem); margin-bottom: .35em; }
  .st p:not(.no) { font-size: .9rem; line-height: 1.6; }
}

/* --- Barrierefreiheit: Bewegungsreduktion ---
   Aus dem Rundgang wird ein normales Video mit Fließtext. */
@media (prefers-reduced-motion: reduce) {
  .route { height: auto; }
  .stage { position: relative; height: auto; }
  .stage video { position: relative; height: auto; }
  .grade { display: none; }
  .stations { position: relative; background: var(--ink); padding-block: 1rem 3rem; }
  .st {
    position: relative; opacity: 1; transform: none; bottom: auto;
    padding: 1.8rem clamp(1.2rem, 5vw, 3.4rem); transition: none; max-width: 100%;
    will-change: auto;
  }
  .index, .cue, .loading, .hots { display: none; }
  .cue { animation: none; }
}

/* --- Header über dem Film transparent halten ---
   main.js setzt beim Scrollen .is-scrolled (weiß + Blur); über der
   Film-Bühne erzwingen wir den Ausgangszustand, erst nach der Route
   (CTA/Footer) greift der Weiß-Zustand wieder. */
body.over-film .header.is-scrolled,
body.over-film .header.is-solid {
  background: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  color: var(--cream);
  box-shadow: none;
}
body.over-film .header.is-scrolled .header__logo { background: none; }
body.over-film .header.is-scrolled .header__logo img {
  visibility: visible;
  filter: brightness(0) invert(1);
}
@media (max-width: 1100px) {
  body.over-film .header.is-scrolled .burger span {
    box-shadow: 0 0 6px rgba(0, 0, 0, .5);
  }
}