/* ============================================================
   weg.css — „Der Weg" (Kino-Scroll, Berg → Wald)
   Warm-natürlicher Look: die Natur behält ihre Farben, Navy/Gold
   liegt nur als dezenter Rahmen (Flor unten + Vignette) für den
   Textkontrast darüber. Kopf-Vermittler auf dunkel (nach base.css
   geladen). Motion: kinoScrub() in motion.js.
   ============================================================ */

:root{
  --bg:#0A1A33;
  --line-dunkel:rgba(196,154,59,.22);
  --line-soft-dunkel:rgba(147,161,184,.18);
  --fokus:var(--gold);
  /* --font-display kommt zentral aus base.css */
  --kopf-bg:rgba(10,26,51,.82);
  --kopf-ink:#E8EEF9;
  --kopf-tag:var(--gold-bright);
  --kopf-line:var(--line-dunkel);
  --kopf-toggle:#E8EEF9;
  --logo-gold:var(--gold-bright);
}

html{background:#0A1A33}
body{background:#0A1A33;color:#eaf0fa}

/* ---------- Bühne ---------- */
.weg{position:relative}
.weg-buehne{position:relative;height:100vh;overflow:hidden;background:#0b1626}
.weg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
/* Warm-natürlicher Flor: oben/Mitte fast klar (Natur sichtbar), unten navy für Text */
.weg-flor{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(66% 52% at 50% 6%, rgba(196,154,59,.12), transparent 56%),
    linear-gradient(180deg, rgba(6,13,24,.14) 0%, transparent 26%, rgba(10,26,51,.08) 52%, rgba(10,26,51,.74) 100%);
}
.weg-vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(126% 122% at 50% 42%, transparent 56%, rgba(4,9,18,.58) 100%)}

/* ---------- Szenen-Texte (faden per Scroll, motion.js) ---------- */
.weg-szene{
  position:absolute;left:0;right:0;bottom:14%;
  padding:0 8vw;text-align:center;
  opacity:0;will-change:opacity,transform;pointer-events:none;z-index:2;
}
.weg-szene h2{
  font-family:var(--font-display);
  font-size:clamp(2.1rem,5.6vw,4.6rem);line-height:1.03;letter-spacing:-.015em;
  color:#fff;text-shadow:0 2px 40px rgba(0,0,0,.6);margin:0;
}
.weg-szene h3{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.7rem,4vw,3rem);line-height:1.06;letter-spacing:-.01em;
  color:#fff;text-shadow:0 2px 34px rgba(0,0,0,.58);margin:0;
}
.weg-eyebrow,.weg-kennung{
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.32em;
  text-transform:uppercase;color:var(--gold-bright);margin:0 0 16px;
  text-shadow:0 1px 12px rgba(0,0,0,.5);
}
.weg-sub{margin:16px auto 0;max-width:46ch;color:#e6ecf6;font-size:clamp(1rem,1.55vw,1.16rem);line-height:1.55;text-shadow:0 1px 20px rgba(0,0,0,.6)}

/* Scroll-Hinweis (nur am Anfang) */
.weg-hinweis{
  position:absolute;left:50%;bottom:34px;transform:translateX(-50%);
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(234,240,250,.66);margin:0;z-index:2;
}
.weg-hinweis::after{content:"";display:block;width:1px;height:22px;margin:10px auto 0;background:linear-gradient(rgba(196,154,59,.9),transparent);animation:wegPfeil 1.9s var(--ease-premium) infinite}
@keyframes wegPfeil{0%{opacity:0;transform:translateY(-6px)}40%{opacity:1}100%{opacity:0;transform:translateY(8px)}}

/* KI-Transparenz (Art. 50 KI-VO): Film ist Naturaufnahmen-Montage + 1 KI-Übergang.
   Deutlich erkennbar → Chip mit Kontrast statt Mini-Text auf hellem Bild. */
.weg-kennz{position:absolute;left:14px;bottom:11px;z-index:3;margin:0;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.86);background:rgba(6,13,24,.6);padding:5px 9px;border-radius:5px}

/* Fortschritts-Faden */
.weg-fortschritt{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.10);z-index:3}
.weg-fortschritt span{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--gold),var(--gold-bright))}

/* ---------- Ankunft / CTA (über dem Waldbild) ---------- */
.weg-cta{position:relative;overflow:hidden;text-align:center;padding-block:clamp(72px,11vw,132px);z-index:1;isolation:isolate}
.weg-cta-bild{position:absolute;inset:0;z-index:0;background:url(img/weg-poster.webp) center/cover no-repeat}
.weg-cta-bild::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,26,51,.82),rgba(10,26,51,.9)),radial-gradient(60% 60% at 50% 40%,rgba(196,154,59,.10),transparent 70%)}
.weg-cta-inhalt{position:relative;z-index:1}
.weg-cta .eyebrow{color:var(--gold-bright)}
.weg-cta h2{max-width:18ch;margin:12px auto 16px;color:#fff}
.weg-cta .lead{color:#d7e0ef;max-width:56ch;margin:0 auto 32px}
.weg-cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.weg-cta-proof{margin:22px auto 0;max-width:54ch;color:#aebbd0;font-size:.9rem;line-height:1.55}

/* ============================================================
   Fallback: prefers-reduced-motion ODER kein JS/GSAP.
   motion.js setzt .weg--fallback → Film weg, Szenen gestapelt lesbar.
   ============================================================ */
.weg--fallback .weg-buehne{height:auto;overflow:visible;display:flex;flex-direction:column;background:transparent}
.weg--fallback .weg-video,
.weg--fallback .weg-flor,
.weg--fallback .weg-vignette,
.weg--fallback .weg-hinweis,
.weg--fallback .weg-kennz,
.weg--fallback .weg-fortschritt{display:none}
.weg--fallback .weg-szene{
  position:relative;left:auto;right:auto;bottom:auto;
  opacity:1;transform:none;pointer-events:auto;
  padding:clamp(48px,9vh,96px) 8vw;border-bottom:1px solid var(--line-soft-dunkel);
}
.weg--fallback .weg-szene h2,.weg--fallback .weg-szene h3{text-shadow:none}
.weg--fallback .weg-sub{text-shadow:none}
/* Ohne JS sind die Szenen sonst unsichtbar (opacity:0) — hier sichtbar machen */
.no-js .weg-szene{position:relative;left:auto;right:auto;bottom:auto;opacity:1;transform:none;padding:clamp(48px,9vh,96px) 8vw}
.no-js .weg-video,.no-js .weg-hinweis,.no-js .weg-kennz,.no-js .weg-fortschritt{display:none}
.no-js .weg-buehne{height:auto;overflow:visible;display:flex;flex-direction:column;background:transparent}
.no-js .weg-flor,.no-js .weg-vignette{display:none}
.no-js .weg-szene{border-bottom:1px solid var(--line-soft-dunkel)}

/* ---------- Responsive ---------- */
@media (max-width:640px){
  .weg-szene{bottom:12%}
  .weg-szene h2{font-size:clamp(1.8rem,7.5vw,2.6rem)}
  .weg-szene h3{font-size:clamp(1.45rem,6vw,2rem)}
}