/* ===========================================================================
   SCROLL-EFFEKTE
   Reine CSS-Scroll-Animationen (animation-timeline). Sie laufen auf dem Compositor,
   ohne JavaScript-Schleife. Bewegt werden nur transform/translate/scale/opacity.
   Ohne Browser-Unterstützung oder mit "Bewegung reduzieren" fällt alles auf normale
   Seiten ohne Effekte zurück (Kategorien werden dann zur wischbaren Reihe).
   =========================================================================== */

/* ---------- Basis (gilt immer) ---------- */
.nav { transition: transform .4s var(--ease), background-color var(--t) var(--ease), box-shadow var(--t); }
.nav.away { transform: translate3d(0, -100%, 0); }
.progress { position: fixed; z-index: 80; top: 0; left: 0; right: 0; height: 3px; background: var(--sunset); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }

.statement { padding-block: clamp(80px, 16vw, 200px) clamp(40px, 8vw, 100px); }
.statement .big { margin-top: var(--s4); max-width: 22ch; font: 800 clamp(2rem, 6.4vw, 5.6rem)/1.04 var(--font-display); letter-spacing: -.035em; text-transform: uppercase; }
.statement .w { display: inline-block; color: #fff; }

.marq { overflow: hidden; padding-block: var(--s4); display: grid; gap: 0; user-select: none; }
.marq span { display: block; white-space: nowrap; font: 900 clamp(4rem, 13vw, 11rem)/1 var(--font-display); letter-spacing: -.04em; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .22); }
.marq .m2 { -webkit-text-stroke-color: rgba(160, 130, 255, .5); }

/* Kategorien: ohne Pinning als wischbare Reihe */
.hpin { padding-block: var(--s8); }
.hhead { margin-bottom: var(--s5); }
.htrack { display: flex; gap: var(--s4); overflow-x: auto; padding: 0 var(--gutter) var(--s4); scroll-snap-type: x proximity; scrollbar-width: thin; }
.hcat { flex: none; width: min(82vw, 520px); height: min(62vh, 520px); min-height: 360px; scroll-snap-align: start; padding: var(--s6); }
.hcat h3 { font-size: clamp(1.8rem, 4vw, 3rem); letter-spacing: -.03em; }
.hcat p { font-size: 1rem; max-width: 32ch; }
.hcat .ico { width: 84px; height: 84px; }
.hcat .num { position: absolute; left: var(--s6); top: var(--s5); font: 900 clamp(3rem, 8vw, 6rem)/1 var(--font-display); letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .28); }
.hcat .arrow { width: 28px; height: 28px; }

/* ---------- Scroll-getriebene Animationen ---------- */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {

    /* Fortschrittsbalken */
    .progress { animation: prog linear both; animation-timeline: scroll(root); }
    @keyframes prog { to { transform: scaleX(1); } }

    /* Hero: Bild driftet und zoomt, Text zieht nach oben weg */
    .hero-media, .hero .sky, .hero .skyline { animation: hero-bg linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
    @keyframes hero-bg { to { transform: translate3d(0, 14vh, 0); } }
    .hero-grid { animation: hero-out linear both; animation-timeline: scroll(root); animation-range: 0 62vh; }
    @keyframes hero-out { to { opacity: 0; translate: 0 -90px; scale: .96; } }
    .hero .scrollhint { animation: hint linear both; animation-timeline: scroll(root); animation-range: 0 20vh; }
    @keyframes hint { to { opacity: 0; } }

    /* Statement: Wort für Wort aufleuchten */
    .statement .w { animation: word linear both; animation-timeline: view(); animation-range: entry calc(var(--a) * 1%) entry calc(var(--a) * 1% + 38%); }
    @keyframes word { from { color: rgba(255, 255, 255, .13); translate: 0 .18em; } to { color: #fff; translate: 0 0; } }

    /* Laufschrift, gegenläufig, vom Scrollen bewegt */
    .marq span { animation: mq linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    .marq .m1 { --from: 6%; --to: -42%; }
    .marq .m2 { --from: -42%; --to: 6%; }
    @keyframes mq { from { translate: var(--from) 0; } to { translate: var(--to) 0; } }

    /* Überschriften und Karten fahren beim Eintreten ein */
    .sec-head, .page-top { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; }
    @keyframes rise { from { opacity: 0; translate: 0 50px; } to { opacity: 1; translate: 0 0; } }
    .card.rv, .tier.rv, .trust.rv, .banner.rv { opacity: 1; transform: none; transition: none; transition-delay: 0s; }
    .card, .tier { animation: pop linear both; animation-timeline: view(); animation-range: entry 0% entry 62%; }
    @keyframes pop { from { opacity: 0; translate: 0 90px; scale: .92; } to { opacity: 1; translate: 0 0; scale: 1; } }
    .banner { animation: banner linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; }
    @keyframes banner { from { opacity: .3; scale: .9; translate: 0 60px; } to { opacity: 1; scale: 1; translate: 0 0; } }
    .trust > div { animation: pop linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    .foot { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }

    /* Kategorien: Seite bleibt stehen, die Kacheln fahren seitlich durch */
    .hpin { --pin: calc(var(--n) * 38vh + 100vh); height: var(--pin); padding: 0; view-timeline: --hpin block; }
    .hsticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: var(--s5); }
    .hhead { margin: 0 auto; }
    .htrack { overflow: visible; width: max-content; padding: 0 var(--gutter); scroll-snap-type: none; animation: slide linear both; animation-timeline: --hpin; animation-range: contain 0% contain 100%; }
    @keyframes slide { to { translate: min(0px, calc(100vw - 100%)) 0; } }
    .hcat { animation: tilt linear both; animation-timeline: view(inline); animation-range: entry 0% cover 45%; }
    @keyframes tilt { from { opacity: .35; scale: .9; } to { opacity: 1; scale: 1; } }
  }
}

@media (max-width: 560px) { .hcat { min-height: 320px; } .marq span { font-size: 22vw; } }

/* ---------- Zeigergesteuert (nur mit Maus, siehe fx.js) ---------- */
.fx-pointer .card::before, .fx-pointer .tier::after, .fx-pointer .cat::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .3s var(--ease); background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 150, 210, .20), rgba(255, 122, 184, .08) 40%, transparent 70%); }
.fx-pointer .card:hover::before, .fx-pointer .tier:hover::after, .fx-pointer .cat:hover::after { opacity: 1; }
.fx-pointer .card { transform-style: preserve-3d; }
.fx-pointer .card:hover { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translate3d(0, -4px, 0); transition: transform .12s linear, box-shadow var(--t) var(--ease); }
.fx-pointer .btn-primary, .fx-pointer .btn-gold { translate: var(--tx, 0) var(--ty, 0); transition: translate .25s var(--ease), transform var(--t-fast) var(--ease), background-color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.fx-pointer .hero.has-media::after { display: block; content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(520px circle at var(--hx, 70%) var(--hy, 40%), rgba(255, 200, 235, .16), transparent 62%); }


/* =========================================================================
   KAMERAFAHRT IM HERO
   Das Bild ist in zwei Ebenen zerlegt (Himmel + Vordergrund mit Palmen/Häusern).
   Beim Scrollen bleibt der Hero stehen, der Vordergrund fliegt auf die Kamera zu,
   der Himmel zoomt langsamer. Reine CSS-Scroll-Animation, nur transform/opacity.
   ========================================================================= */
.fly-stage { display: contents; }
.fly-sky, .fly-fg, .fly-glow, .fly-line { display: none; }

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 900px) and (hover: hover) {
    .hero:has(.fly-sky) { display: block; height: 300vh; padding: 0; min-height: 0; overflow: visible; }
    .hero:has(.fly-sky) .fly-stage { display: flex; align-items: flex-end; position: sticky; top: 0; height: 100svh; overflow: hidden; padding: calc(var(--nav-h) + 40px) 0 var(--s8); isolation: isolate; }
    .hero:has(.fly-sky) .hero-media { display: none; }
    .hero:has(.fly-sky) .fly-sky, .hero:has(.fly-sky) .fly-fg { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: 53% 42%; }
    .fly-sky { z-index: -4; animation: fly-sky linear both; animation-timeline: scroll(root); animation-range: 0 200vh; }
    .fly-fg { z-index: -3; animation: fly-fg cubic-bezier(.55, 0, .85, .55) both; animation-timeline: scroll(root); animation-range: 0 200vh; }
    @keyframes fly-sky { to { transform: scale3d(1.25, 1.25, 1); } }
    @keyframes fly-fg { to { transform: scale3d(2.8, 2.8, 1); } }
    .hero:has(.fly-sky) .hero-media, .hero:has(.fly-sky) .hero-shade { animation: none; }
    .hero:has(.fly-sky) .hero-shade { z-index: -2; }
    .hero:has(.fly-sky) .grain { z-index: -1; }
    .hero:has(.fly-sky)::after { display: none; }

    /* Etappe 1: Überschrift fliegt auf uns zu und verschwindet */
    .hero:has(.fly-sky) .hero-grid { animation: t1 ease-in both; animation-timeline: scroll(root); animation-range: 0 50vh; }
    @keyframes t1 { to { opacity: 0; scale: 1.35; translate: 0 -40px; } }
    .hero:has(.fly-sky) .scrollhint { animation: hint linear both; animation-timeline: scroll(root); animation-range: 0 25vh; }

    /* Lichtblendung beim Flug in die Sonne */
    .fly-glow { display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; background: radial-gradient(60% 70% at 53% 42%, rgba(255, 244, 252, .95), rgba(255, 150, 210, .55) 38%, transparent 75%); animation: glow linear both; animation-timeline: scroll(root); animation-range: 90vh 200vh; }
    @keyframes glow { 0% { opacity: 0; } 55% { opacity: .35; } 100% { opacity: 1; } }

    /* Etappe 2 und 3: große Zeilen */
    .fly-line { display: grid; position: absolute; left: 0; right: 0; top: 50%; z-index: 1; justify-items: center; gap: var(--s5); text-align: center; font: 900 clamp(2.6rem, 10vw, 9rem)/.9 var(--font-display); letter-spacing: -.045em; text-transform: uppercase; color: #fff; pointer-events: none; opacity: 0; filter: drop-shadow(0 10px 50px rgba(0, 0, 0, .55)); }
    .fl2 { animation: l2 linear both; animation-timeline: scroll(root); animation-range: 40vh 130vh; }
    @keyframes l2 { 0% { opacity: 0; scale: .55; translate: 0 -30%; } 30% { opacity: 1; scale: 1; translate: 0 -50%; } 65% { opacity: 1; scale: 1.15; translate: 0 -50%; } 100% { opacity: 0; scale: 2.4; translate: 0 -50%; } }
    .fl3 { animation: l3 linear both; animation-timeline: scroll(root); animation-range: 140vh 195vh; }
    .fl3 span { background: var(--sunset); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding: .05em .1em; }
    .fl3 .btn { pointer-events: auto; font-size: .9rem; letter-spacing: .08em; }
    @keyframes l3 { 0% { opacity: 0; scale: .6; translate: 0 -30%; } 60% { opacity: 1; scale: 1; translate: 0 -50%; } 100% { opacity: 1; scale: 1; translate: 0 -50%; } }
    .hero:has(.fly-sky) .fl3 { filter: drop-shadow(0 8px 40px rgba(10, 12, 40, .6)); }
  }
}
@media (max-width: 560px) { .fly-line { font-size: 15vw; } }