/* ============================================================
   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 .82rem/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; }
/* 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); }
.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 .78rem/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; }
}