/* REACH Wow (Branch v1plus-wow): Startseite und Production, DE/EN.
   Alles hier greift nur unter html.wow (setzt assets/js/wow.js bei erlaubter Bewegung und geladenen Bibliotheken).
   Ohne Skript und bei prefers-reduced-motion bleibt die V1+-Seite unverändert, statisch und vollständig.
   Animiert wird nur transform, opacity und clip-path. Markenwinkel 10,5 Grad (tan = 0,1853). */

/* ---------- Intro: Speed-Lines, Wortmarke aus Linien, Wischer im Markenwinkel ---------- */
html.intro-an .intro { background: transparent; }
.intro__baender { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; }
.intro__baender i { display: block; flex: 1 1 0; margin: -1px -32vw; background: var(--blau); transform: skewX(-10.5deg); will-change: transform; }
.intro__strahlen { position: absolute; inset: -25% -10%; transform: rotate(-10.5deg); pointer-events: none; }
.intro__strahlen i { position: absolute; left: 0; display: block; border-radius: 0 999px 999px 0; background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 85%); will-change: transform; transform: translate3d(-120vw, 0, 0); }
.intro__strahlen i.is-hell { background: linear-gradient(90deg, rgba(91, 151, 240, 0), #5B97F0 85%); }
.intro__mark { position: absolute; inset: 0; display: grid; place-items: center; padding-bottom: 6vh; width: auto; opacity: 0; }
.home-fx .intro__mark { opacity: 1; }
.intro__mark .intro__svg { width: min(74vw, 112vh); }
.intro__glanz {
  position: absolute; left: 0; top: -15%; height: 130%; width: 3px; pointer-events: none; opacity: 0;
  background: linear-gradient(transparent, #fff 30%, #fff 70%, transparent);
  box-shadow: 0 0 28px 6px rgba(255, 255, 255, 0.55); transform: translate3d(-10vw, 0, 0) rotate(10.5deg);
}
@media (max-width: 47.99rem) { .intro__mark .intro__svg { width: 86vw; } }

/* ---------- Zeichen-Teilung (kinetische Überschriften) ---------- */
.kz { display: block; }
.kz__w { position: relative; display: inline-block; white-space: nowrap; will-change: transform; }
.kz__m { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.08em 0.14em 0.12em 0.02em; margin: -0.08em -0.14em -0.12em -0.02em; }
.kz__z { display: inline-block; will-change: transform; transform-origin: 0 100%; }
/* Spur hinter einem Wort: drei Speed-Lines (Stärken wie in der Wortmarke), wachsen beim Herausziehen nach links */
.kz__spur { position: absolute; right: 100%; top: 18%; bottom: 22%; width: 60vw; transform: scaleX(0); transform-origin: 100% 50%; pointer-events: none; }
.kz__spur i { position: absolute; left: 0; right: 0.15em; background: linear-gradient(90deg, rgba(91, 151, 240, 0), rgba(91, 151, 240, 0.9) 70%, #fff); }
.kz__spur i:nth-child(1) { top: 8%; height: 5%; }
.kz__spur i:nth-child(2) { top: 36%; height: 8%; }
.kz__spur i:nth-child(3) { top: 66%; height: 13%; }

/* Blitz: Speed-Lines, die einmal unter einer Überschrift durchschießen */
.blitz { position: absolute; left: 0; right: 0; height: 0.32em; overflow: hidden; pointer-events: none; }
.blitz i { position: absolute; left: 0; width: 100%; background: linear-gradient(90deg, rgba(6, 94, 221, 0), var(--blau) 55%, #fff 98%); transform: translate3d(-101%, 0, 0); }
.blitz i:nth-child(1) { top: 0; height: 6%; }
.blitz i:nth-child(2) { top: 26%; height: 10%; }
.blitz i:nth-child(3) { top: 52%; height: 16%; }
.blitz i:nth-child(4) { top: 78%; height: 22%; }
.wow .sh__titel, .wow .hero--voll h1, .wow .finale__titel, .wow .cta-band h2, .wow .eins__titel { position: relative; }

/* ---------- Production-Hero: Bild zoomt beim Scrollen ---------- */
.wow .hero--voll { overflow: hidden; }
.wow .hero--voll .hero__media .bild img { transform-origin: 50% 40%; will-change: transform; }

/* ---------- Laufband Production: Neigung nach Scrolltempo ---------- */
.wow .promise-bar .ticker-mask { will-change: transform; }

/* ---------- Angepinnte Bildfolge "Photo · Social · Video · Live" ---------- */
.story-an { padding: 0 !important; background: var(--nacht) !important; position: relative; }
.story-an > .wrap { max-width: none; padding: 0; position: relative; height: 100vh; height: 100svh; overflow: hidden; }
.story-an .section-head {
  position: absolute; z-index: 5; left: var(--gutter); top: calc(var(--kopf-gesamt, 5rem) + 0.5rem); margin: 0; pointer-events: none;
}
.story-an .section-head h2 { font: 600 0.8rem/1 var(--font-titel); letter-spacing: 0.3em; text-transform: uppercase; color: #fff; margin: 0; max-width: none; }
.story-an .tiles--4 { position: absolute; inset: 0; display: block; gap: 0; margin: 0; }
.story-an .tile { position: absolute; inset: 0; padding: 0; border: 0; background: transparent !important; display: block; gap: 0; }
.story-an .tile .bild { position: absolute; inset: 0; margin: 0; aspect-ratio: auto; border: 0; width: 100%; height: 100%; will-change: clip-path; }
.story-an .tile .bild img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.story-an .tile .bild::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0.15) 100%), linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 45%);
}
.story-an .tile h3 {
  position: absolute; z-index: 2; left: var(--gutter); top: 50%; margin: 0; transform: translateY(-50%);
  font: 600 italic clamp(5.5rem, 1rem + 19vw, 21rem)/0.82 var(--font-titel); letter-spacing: -0.035em; color: #fff;
  white-space: nowrap; pointer-events: none;
}
.story-an .tile p {
  position: absolute; z-index: 2; left: var(--gutter); bottom: calc(clamp(3.5rem, 9vh, 6rem)); margin: 0; max-width: 34ch;
  font-size: clamp(1.1rem, 0.95rem + 0.55vw, 1.5rem); line-height: 1.45; color: #fff;
}
.story__linien { position: absolute; z-index: 1; left: 0; right: 0; top: 50%; height: clamp(3rem, 9vw, 9rem); margin-top: calc(clamp(3rem, 9vw, 9rem) * -0.15); overflow: hidden; pointer-events: none; }
.story__linien i { position: absolute; left: 0; width: 100%; background: linear-gradient(90deg, rgba(6, 94, 221, 0), var(--blau) 60%, rgba(255, 255, 255, 0.95)); transform: translate3d(-101%, 0, 0); }
.story__linien i:nth-child(1) { top: 10%; height: 4%; }
.story__linien i:nth-child(2) { top: 34%; height: 6%; }
.story__linien i:nth-child(3) { top: 58%; height: 10%; }
.story__linien i:nth-child(4) { top: 80%; height: 16%; }
.story__fortschritt {
  position: absolute; z-index: 5; right: var(--gutter); bottom: clamp(1.5rem, 4vh, 2.5rem); display: flex; gap: 0.4rem; align-items: center;
  font: 600 0.72rem/1 var(--font-titel); letter-spacing: 0.24em; color: rgba(255, 255, 255, 0.75); pointer-events: none;
}
.story__fortschritt span { display: block; width: clamp(1.75rem, 4vw, 3.5rem); height: 3px; background: rgba(255, 255, 255, 0.22); overflow: hidden; }
.story__fortschritt b { display: block; height: 100%; background: #fff; transform: scaleX(0); transform-origin: 0 50%; }
.story__fortschritt em { font-style: normal; margin-right: 0.6rem; min-width: 3.2em; }
@media (max-width: 47.99rem) {
  .story-an .tile h3 { top: 40%; font-size: clamp(4.2rem, 24vw, 7rem); }
  .story-an .tile p { bottom: 5.5rem; right: var(--gutter); }
  .story-an .tile .bild::after { background: linear-gradient(0deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.3) 55%, rgba(0, 0, 0, 0.45) 100%); }
  .story__linien { top: 40%; }
  .story__fortschritt { left: var(--gutter); right: auto; }
}

/* ---------- Gepinnter Zeitverlauf "Während es passiert" (Tag -> Abend -> Nacht, nur Deckkraft der Ebenen) ---------- */
.tempo-an { position: relative; padding: 0 !important; }
.tempo-an > .wrap { position: relative; z-index: 1; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-block: calc(var(--kopf-gesamt, 5rem) + 1rem) 4rem; }
.tempo__himmel { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.tempo__himmel i { position: absolute; inset: 0; }
.tempo__himmel i:nth-child(1) { background: linear-gradient(180deg, #0b3a8c 0%, #062a68 45%, #04163A 100%); }
.tempo__himmel i:nth-child(2) { background: linear-gradient(180deg, #04163A 0%, #071a3d 55%, #0b0f1f 100%); opacity: 0; }
.tempo__himmel i:nth-child(3) { background: linear-gradient(180deg, #000 0%, #020409 60%, #050a16 100%); opacity: 0; }
.tempo-an .bignum { position: relative; margin: 0 0 0.08em; color: #fff; font-size: clamp(2.5rem, 0.1rem + 9.4vw, 10.5rem); line-height: 0.95; will-change: transform, opacity; }
.tempo-an .bignum .kz__spur i { background: linear-gradient(90deg, rgba(91, 151, 240, 0), rgba(91, 151, 240, 0.85) 75%, #fff); }
.tempo__spur { position: relative; height: 2px; margin: clamp(1.5rem, 4vh, 3rem) 0 0; background: rgba(255, 255, 255, 0.18); }
.tempo__spur b { position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: 0 50%; }
.tempo__spur i { position: absolute; top: -5px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--nacht); border: 2px solid rgba(255, 255, 255, 0.5); }
.tempo__spur i:nth-of-type(1) { left: 0; } .tempo__spur i:nth-of-type(2) { left: 50%; } .tempo__spur i:nth-of-type(3) { left: 100%; }
.tempo__spur i.is-an { border-color: #fff; background: #fff; }

/* ---------- Bildmomente: Masken im Markenwinkel, Ken Burns ---------- */
.wow [data-perspektive] .bild, .wow .galerie .bezel__kern { will-change: clip-path; }
.wow [data-perspektive] .bild img, .wow .galerie__pic img { will-change: transform; }

/* ---------- Riesen-Wortmarke im Fuß ---------- */
.fuss-marke__buehne { position: relative; }
.fuss-marke__svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: #fff; overflow: visible; }
.wow-fuss .fuss-marke__wort { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .intro__strahlen, .intro__glanz, .blitz, .kz__spur, .story__linien { display: none !important; }
}

/* ---------- Mobile First (05.10.2026) ----------
   Handys: keine Dauer-Ebene je Zeichen/Wort (will-change auf jedem Buchstaben = Ebenenflut, GPU-Speicher).
   GSAP hebt die Elemente nur während der Bewegung auf eine eigene Ebene (force3D "auto"); Endzustand identisch. */
@media (max-width: 47.99rem) {
  .kz__w, .kz__z { will-change: auto; }
}
/* Safe Area unten (Home-Balken im Querformat): Fortschritt und Satz der Bildfolge bleiben frei */
.story__fortschritt { margin-bottom: env(safe-area-inset-bottom, 0px); }
.story-an .tile p { margin-bottom: env(safe-area-inset-bottom, 0px); }

/* Bühnen auf Touch-Geräten: sticky statt JavaScript-Pin (wow.js W.buehne); die Hülle .klebe trägt die Scrollstrecke */
.klebe { position: relative; }
html.wow .klebt { position: sticky !important; top: 0; }