/* ============================================================
   Abby Scroll-Intro (Hero-Header) - Styles zur Engine in
   assets/js/abby-hero-scroll.js. Liegt als eigene Datei vor,
   weil die CSP der Website (style-src 'self') per JS injizierte
   Style-Tags blockiert.
   ============================================================ */
.aw-root { position: relative; background: var(--ink, #18213d); }
.aw-viewport { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; }
.aw-stage { position: absolute; inset: 0; }
.aw-scene { position: absolute; inset: 0; opacity: 0; }
.aw-scene__still,
.aw-scene__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.aw-scene__still { transition: opacity .25s ease; }
.aw-scene.has-clip .aw-scene__still { opacity: 0; }
.aw-copylayer { position: absolute; inset: 0; pointer-events: none; z-index: 30; }
.aw-copy { position: absolute; left: clamp(1.2rem, 6vw, 5.5rem); bottom: calc(clamp(2.2rem, 7vh, 5.2rem) + env(safe-area-inset-bottom, 0px)); max-width: min(34rem, 86vw); opacity: 0; }
.aw-copy .aw-copy__eyebrow { display: inline-block; font: 700 var(--text-13, .8125rem)/1 var(--font-body, "Inter", sans-serif); letter-spacing: .14em; text-transform: uppercase; color: #fff; background: color-mix(in srgb, var(--lilac, #7057df) 82%, #000); padding: .5rem .8rem; border-radius: 999px; margin-bottom: .9rem; }
.aw-copy .aw-copy__title { font-family: var(--font-head, "Poppins", sans-serif); font-weight: 800; letter-spacing: -.02em; color: #fff; font-size: clamp(1.7rem, 4.6vw, 3.3rem); line-height: 1.06; margin: 0 0 .6rem; text-shadow: 0 2px 24px rgba(24, 33, 61, .55), 0 1px 3px rgba(24, 33, 61, .6); }
.aw-copy .aw-copy__body { font-family: var(--font-body, "Inter", sans-serif); color: #fff; font-size: clamp(1rem, 1.9vw, 1.2rem); line-height: 1.5; margin: 0; max-width: 30rem; text-shadow: 0 1px 14px rgba(24, 33, 61, .65), 0 1px 2px rgba(24, 33, 61, .7); }
.aw-copy__cta { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: 1.4rem; }
.aw-copy__cta .landing-text-link { color: #fff; }
/* Die zwei festen Schriftgroessen dieser Datei nutzen seit dem 22.09.2026 die
   Skala aus brand.css. Der Rueckfallwert in var() ist hier kein Zierrat: in der
   font-Kurzschreibweise bricht ein nicht aufloesbares var() die GANZE
   Deklaration, also auch Schnitt, Zeilenhoehe und Schriftfamilie - nicht nur
   die Groesse. Ueberschrift und Fliesstext bleiben bei clamp(), sie skalieren
   mit dem Viewport. */

/* Abdunklung hinter der Copy.
   Ohne sie stand weisser Text direkt auf dem Video. Gemessen am 22.09.2026 auf
   Leg 1: hinter .aw-copy__body lagen 98,1 % der Flaeche unter 4,5:1, schlechtester
   Wert 1,06:1 - der Satz stand weiss auf hellem Pflaster. Der Titel war mit
   27 px/800 als grosse Schrift bei 3:1 noch in Ordnung (2,3 % darunter), der
   Eyebrow hat seine eigene Pille. Textschatten allein zaehlt nach WCAG 1.4.3
   nicht als Kontrastmittel, er ist nicht messbar.

   Sie haengt an .aw-copy und nicht am Copylayer, damit sie dieselbe Opacity
   erbt wie der Text: sie erscheint und verschwindet exakt mit ihm, statt als
   feste Flaeche ueber allen Szenen zu liegen.

   ── WARUM LINEAR UND UEBER DEN RAND HINAUS ─────────────────────────────────
   Der erste Versuch war ein radialer Verlauf von unten links, eng um die Copy
   gelegt. Der Kontrast stimmte, aber es gab eine sichtbare waagerechte Kante:
   ein Verlauf erreicht die Transparenz erst am Ende seines Radius, und der lag
   ausserhalb des Elementkastens - die Deckkraft brach an der Oberkante
   schlagartig ab. Eine Messung im Textbereich faellt darauf nicht herein, ein
   Blick auf die Seite schon.
   Deshalb jetzt linear und mit left/right auf -100vw sowie bottom auf -12rem:
   die einzige Kante, die im Bild liegt, ist die obere - und dort ist die
   Deckkraft 0. Alles andere schneidet .aw-viewport mit overflow:hidden weg.

   ── WARUM DIE DECKKRAFT OBEN HOEHER IST, ALS SIE AUSSIEHT ──────────────────
   Die erste Abstufung (.42 bei 26 %) bestand auf den geladenen Bildern, haette
   aber gegen ein REIN WEISSES Videobild nur 2,78:1 am Titel ergeben - knapp
   unter der Schwelle von 3. Seit Leg 3, Leg 4 und das Outro erst beim Scrollen
   geladen werden, laesst sich deren Bildinhalt nicht mehr vorab messen. Die
   Werte sind deshalb so gewaehlt, dass sie UNABHAENGIG vom Bild halten:
   im schlechtesten denkbaren Fall (weisser Text auf weissem Video) bleiben
   3,8:1 am Titel und 6,2:1 am Body.

   Auf den tatsaechlich gemessenen Bildern: 0,0 % der Flaeche unter der
   Schwelle. */
.aw-copy::before { content: ''; position: absolute; z-index: -1; pointer-events: none; left: -100vw; right: -100vw; top: -3.5rem; bottom: -12rem; background: linear-gradient(to bottom, rgba(12, 18, 38, 0) 0%, rgba(12, 18, 38, .52) 26%, rgba(12, 18, 38, .76) 52%, rgba(12, 18, 38, .88) 74%, rgba(12, 18, 38, .88) 100%); }
/* Heller Abschnitt (weisser Handyscreen als Hintergrund): dunkle Schrift, keine Schatten */
.aw-copy.aw-copy--light .aw-copy__title,
.aw-copy.aw-copy--light .aw-copy__body { color: var(--ink, #18213d); text-shadow: none; }
.aw-copy.aw-copy--light .aw-copy__cta .landing-text-link { color: var(--lilac-deep, #49329e); }
/* Dort ist der Hintergrund der weisse Handyscreen und die Schrift dunkel -
   eine Abdunklung wuerde den Kontrast dort VERSCHLECHTERN. */
.aw-copy.aw-copy--light::before { display: none; }
/* Das letzte Leg des Intros hat bewusst keine Copy (Finale pur auf dem
   weissen Handyscreen). Sein leerer Artikel steht trotzdem auf Deckkraft 1,
   und seine Abdunklung legte ein dunkles Band unten ins Schlussbild, genau
   an der Uebergabe zur Neuigkeit darunter (gefunden 08.10.2026). Ohne Text
   keine Abdunklung. */
.aw-copy:empty::before { display: none; }
.aw-hint { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(1.1rem + env(safe-area-inset-bottom, 0px)); z-index: 30; display: flex; flex-direction: column; align-items: center; gap: .45rem; color: #fff; font: 600 var(--text-12, .75rem)/1 var(--font-body, "Inter", sans-serif); letter-spacing: .16em; text-transform: uppercase; text-shadow: 0 1px 10px rgba(24, 33, 61, .7); pointer-events: none; }
.aw-hint i { width: 1px; height: 2.2rem; background: linear-gradient(#fff, transparent); display: block; animation: aw-hint 1.6s ease-in-out infinite; }
@keyframes aw-hint { 0% { transform: scaleY(.4); transform-origin: top; opacity: .4 } 55% { transform: scaleY(1); opacity: 1 } 100% { transform: scaleY(.4); opacity: .4 } }
.aw-progress { position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 40; background: rgba(255, 255, 255, .14); }
.aw-progress span { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(0); background: var(--sun, #ffcb4c); }
@media (max-width: 640px) {
  .aw-copy { left: 1.1rem; right: 1.1rem; max-width: none; }
  .aw-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .aw-hint i { animation: none; }
}