html.auftakt::after { content: ""; position: fixed; inset: 0; z-index: 1000; background-color: var(--gelb); pointer-events: none; animation: auftakt-notaus .6s 4.5s var(--weich) forwards; }
@keyframes auftakt-notaus { to { opacity: 0; visibility: hidden; } }
.auftakt-buehne { position: fixed; inset: 0; z-index: 1001; display: flex; align-items: center; justify-content: center; background-color: var(--gelb); cursor: pointer; transition: transform .95s var(--weich); }
.auftakt-buehne video, .auftakt-buehne img { width: 100%; height: 100%; object-fit: cover; }
@media (orientation: portrait) { .auftakt-buehne video, .auftakt-buehne img { object-fit: contain; } }
.auftakt-buehne img { position: absolute; inset: 0; }
.auftakt-buehne.geht { transform: translateY(-100%); }
.auftakt-buehne.geht-schnell { transition-duration: .55s; }

html.auftakt .held__innen > *, html.auftakt .held__medien picture { animation-play-state: paused; }

.held--kino .held__medien { height: max(560px, calc(100svh - var(--kopfhoehe))); max-height: none; }
.film--kino { position: absolute; inset: 0; margin: 0; }
.film--kino .schleife, .film--kino .film__video { position: absolute; inset: 0; width: 100%; height: 100%; }
.film--kino .film__video { object-fit: contain; background-color: var(--tinte); }
.film--kino .film__start { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: flex-end; padding-right: clamp(32px, 10vw, 180px); border: 0; background: transparent; cursor: pointer; }
.film--kino .film__kreis { width: clamp(88px, 8vw, 124px); height: clamp(88px, 8vw, 124px); }
.film--kino .schleife__pause { z-index: 3; }
.film--kino.laeuft .schleife, .film--kino.laeuft .film__start { display: none; }
.held--kino:has(.film--kino.laeuft) .held__text { margin-top: 0; transition: margin-top .8s var(--weich); }
@media (prefers-reduced-motion: no-preference) {
  html.hat-js .held--kino .held__innen > * { animation-delay: .9s; animation-duration: 1.3s; }
  html.hat-js .held--kino .held__innen > *:nth-child(2) { animation-delay: 1s; }
  html.hat-js .held--kino .held__innen > *:nth-child(3) { animation-delay: 1.1s; }
  html.hat-js .held--kino .held__innen > *:nth-child(n+4) { animation-delay: 1.2s; }
  html.hat-js .held--kino .held__text { animation: kino-flaeche 1.2s .7s var(--weich) both; }
}
@keyframes kino-flaeche { from { transform: translateY(40px); opacity: 0.01; } to { transform: none; opacity: 1; } }
html.auftakt .held--kino .held__text { animation-play-state: paused; }
@media (max-width: 899px) {
  .held--kino .held__medien { height: min(72svh, 620px); }
  .film--kino .film__start { justify-content: center; padding-right: 0; }
}

main[data-weg] { position: relative; }

.weg-spur { position: absolute; z-index: 4; top: 0; bottom: 0; left: calc(max(var(--rand), (100vw - var(--breite)) / 2) / 2); width: 2px; margin-left: -1px; background-color: var(--gelb); pointer-events: none; }
.weg-spur i { display: none; }

html.weg-rand .weg-spur { position: fixed; top: var(--kopfhoehe); bottom: 0; background-color: var(--linie); }
html.weg-rand .weg-spur i { display: block; position: absolute; inset: 0; background-color: var(--gelb); transform: scaleY(var(--weg, 0)); transform-origin: top; }

html.weg-pfad .weg-spur { display: none; }
.weg-pfad-svg { position: absolute; z-index: 4; left: 0; top: 0; width: 100%; overflow: visible; pointer-events: none; }
.weg-pfad-svg .weg-grund { fill: none; stroke: var(--linie); stroke-width: 1.5; }
.weg-pfad-svg .weg-linie { fill: none; stroke: var(--gelb); stroke-width: 3; stroke-linecap: round; }
.weg-pfad-svg .weg-marke { fill: var(--weiss); stroke: var(--tinte); stroke-width: 1.5; transition: fill .5s var(--weich); }
.weg-pfad-svg .weg-marke.ist-erreicht { fill: var(--gelb); }

html.weg-pfad .geschichte__linie { display: none; }

.riesenwort { position: relative; overflow: hidden; overflow: clip; background-color: var(--gelb); color: var(--tinte); padding-top: clamp(20px, 3vw, 44px); }
.riesenwort__text { display: block; padding-left: max(var(--rand), calc((100vw - var(--breite)) / 2)); font-family: var(--font-marke); font-style: italic; font-weight: var(--marke-gewicht); font-stretch: var(--marke-breite); letter-spacing: var(--marke-laufweite); font-size: min(15vw, calc(86vw / (var(--lw, 10) * 0.5))); line-height: 0.98; white-space: nowrap; padding-bottom: 0.06em; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    html.hat-js .riesenwort__text { animation: riesenwort-gleiten linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  }
  html.hat-js .riesenwort__text.gleitet { transform: translateX(var(--wort-x, 0)); }
}
@keyframes riesenwort-gleiten { from { transform: translateX(6vw); } to { transform: translateX(-4vw); } }

@media (max-height: 859px) { html.hat-js .bildband--wort { position: relative; } }
.bildband--wort .bildband__rahmen { height: min(max(56vh, 40vw), 760px); }
@media (max-width: 899px) { .bildband--wort .bildband__rahmen { height: min(56svh, 480px); } }

.geschichte__titel { font-size: clamp(2.8rem, 1.4rem + 4.6vw, 5.75rem); line-height: 0.92; }

@media (prefers-reduced-motion: reduce) {
  .auftakt-buehne { display: none; }
  html.auftakt::after { display: none; }
}
.ist-buehne .geschichte__buehne { cursor: pointer; }
.ist-buehne .geschichte__buehne:hover img { transform: scale(1.02); transition: transform 1.2s var(--weich); }