/* 42 Takes · Webseite I «Arena vorne, Webseite G dahinter» (06.10.2026, v9): nur die Fahrt (Hero + Arena); alles danach kommt aus site.css (Webseite G).
   Grundlage Webseite H «Die Arena» (06.10.2026). Baut auf site.css auf (Schrift, Farben, Kopfleiste, Formular, Fuss, Rechtstexte).
   Neu: die eine Fahrt (Strahl, Tore, Arena, Leinwände) und ruhige Textabschnitte darunter. Alles Inhaltliche hängt am Scrollen. */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
main,footer{position:relative;z-index:2}

/* ---------- Die Fahrt ---------- */
.journey{position:relative;height:2800vh;background:var(--bg)}
.mark{position:absolute;left:0;width:1px;height:1px;pointer-events:none}
.jpin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--bg)}
.host{position:absolute;inset:0;z-index:0}
.host canvas{display:block;width:100%;height:100%}
.shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(7,8,10,.74) 0,rgba(7,8,10,0) 38%)}
.rule-top{z-index:3}
.hud{position:absolute;z-index:3;opacity:0;visibility:hidden;will-change:opacity,transform;transform:translate3d(0,var(--y,0px),0);pointer-events:none}
.hud a,.hud button{pointer-events:auto}
.ov em{font-style:normal;color:var(--lime)}
.ov .sub{font-size:clamp(16px,1.3vw,20px);line-height:1.45;color:rgba(243,243,238,.78);max-width:30em;margin-top:3vh}

/* Bild 1 · Haken */
.ov-hero{left:var(--gx);right:var(--gx);top:118px}
.lead-row{display:flex;justify-content:space-between;align-items:flex-start;gap:4vw}
.lead{font-size:clamp(52px,7.9vw,152px);line-height:.84;letter-spacing:-.065em;font-family:var(--head);font-weight:850;margin:0}
.lead-r{text-align:right}
.lead .ln{display:block}
.jcue{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(243,243,238,.6);display:flex;align-items:center;gap:12px;margin-top:7vh}
.jcue span{width:46px;height:1px;background:currentColor;display:block}

/* Bild 2 · Fahrt */
.ov-flight{left:var(--gx);right:var(--gx);bottom:11vh}
.ov-flight .kicker{color:rgba(243,243,238,.7)}
.flight-line{font-size:clamp(38px,5.6vw,98px);line-height:.9;max-width:12.5em;margin-top:2.4vh}
.take{right:var(--gx);top:30vh;text-align:right;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.take b{display:block;font-family:var(--head);font-weight:900;font-size:clamp(40px,5.4vw,86px);letter-spacing:-.05em;line-height:.9;color:var(--ink);font-variant-numeric:tabular-nums;margin-bottom:8px}

/* Bild 3 · Arena */
.ov-arena{left:var(--gx);right:var(--gx);bottom:9vh;text-align:center}
.ov-arena .kicker{justify-content:center;color:rgba(243,243,238,.7)}
.ov-arena .kicker::after{display:none}
.arena-line{font-size:clamp(44px,7.2vw,124px);line-height:.88;margin-top:2vh}
.ov-arena .sub{margin:2.4vh auto 0;max-width:36em}

/* Bild 4 · Leinwände */
.station{left:var(--gx);right:var(--gx);bottom:28px}
.st-poster{display:none}
.st-media{position:absolute;left:0;top:0;width:2px;height:2px;opacity:.01;pointer-events:none}
.st-meta{display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:end}
.st-no{font-family:var(--head);font-weight:900;font-size:clamp(64px,8vw,128px);line-height:.8;letter-spacing:-.06em;color:var(--lime)}
.st-reel{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.st-meta h3{font-size:clamp(34px,4.2vw,66px);letter-spacing:-.05em}
.st-meta h3+p{font-size:clamp(16px,1.3vw,20px);color:rgba(243,243,238,.8);margin-top:8px;max-width:30em}
.st-side{display:flex;flex-direction:column;align-items:flex-end;gap:14px}
.st-tag{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(243,243,238,.7);text-align:right;line-height:1.7}
.st-open{display:inline-flex;align-items:center;gap:10px;font-family:var(--head);font-weight:700;font-size:15px;letter-spacing:-.01em;padding:12px 18px;background:var(--lime);color:var(--bg);white-space:nowrap;transition:background .3s var(--ease)}
.st-open span{transition:transform .35s var(--ease)}
.st-open:hover{background:var(--ink)}
.st-open:hover span{transform:translateX(5px)}
.st-nav{right:var(--gx);top:118px;display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--muted);font-variant-numeric:tabular-nums}
.st-nav b{color:var(--ink);font-weight:500}
.st-nav button{width:40px;height:40px;background:rgba(7,8,10,.5);border:1px solid var(--line-l);color:var(--ink);font:inherit;font-size:16px;cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease)}
.st-nav button:hover{background:var(--lime);color:var(--bg);border-color:var(--lime)}
.rail{position:absolute;left:var(--gx);right:var(--gx);bottom:14px;height:2px;background:var(--line-l);z-index:3}
.rail i{display:block;height:100%;background:var(--lime);transform-origin:0 50%;transform:scaleX(0)}
.host canvas.pick{cursor:pointer}

/* Bild 5 · Marke */
.ov-end{left:var(--gx);right:var(--gx);top:40vh;text-align:center}
.endmark{font-size:clamp(76px,17vw,270px);line-height:.8;letter-spacing:-.07em;color:var(--ink);text-shadow:0 0 44px rgba(212,255,58,.32),0 0 120px rgba(212,255,58,.18)}
.endmark b{font-weight:900;color:var(--lime)}
.end-q{font-family:var(--head);font-weight:800;font-size:clamp(22px,3.2vw,52px);letter-spacing:-.04em;line-height:1;margin:3.4vh 0 4.4vh}
.ov-end .btn.big{pointer-events:auto}

/* ---------- Ohne WebGL oder mit reduzierter Bewegung: die Arena als ruhige Liste mit Standbildern ---------- */
.flat .journey{height:auto!important}
.flat .jpin{position:static;height:auto;overflow:visible;padding:132px var(--gx) 70px}
.flat .host,.flat .shade,.flat .take,.flat .st-nav,.flat .rail,.flat .ov-flight,.flat .ov-end,.flat .jcue,.flat .mark{display:none}
.flat .hud,.flat .ov{position:static;opacity:1!important;visibility:visible!important;transform:none!important;pointer-events:auto}
.flat .rule-top{position:static;margin-bottom:34px}
.flat .ov-hero{margin-bottom:12vh}
.flat .ov-arena{text-align:left;margin-bottom:6vh}
.flat .ov-arena .kicker{justify-content:flex-start}
.flat .ov-arena .sub{margin-left:0}
.flat #stations{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:56px 28px}
.flat .st-poster{display:block}
.flat .st-poster img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:#000;box-shadow:10px 12px 0 -2px var(--lime)}
.flat .st-media{display:none}
.flat .st-meta{margin-top:22px;grid-template-columns:auto 1fr;gap:18px}
.flat .st-side{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center}
.flat .st-no{font-size:56px}
.flat .st-meta h3{font-size:34px}

/* ---------- Handy ---------- */
@media (max-width:900px){
  .ov-hero{top:96px}
  .lead-row{flex-direction:column;gap:3vh}
  .lead{font-size:clamp(50px,15vw,88px)}
  .lead-r{text-align:right;align-self:flex-end}
  .ov .sub{font-size:16px}
  .flight-line{font-size:clamp(30px,8.6vw,56px)}
  .take{top:auto;bottom:34vh;right:var(--gx)}
  .take b{font-size:44px}
  .arena-line{font-size:clamp(40px,11vw,64px)}
  .station{bottom:20px}
  .st-meta{grid-template-columns:auto 1fr;gap:16px}
  .st-no{font-size:48px}
  .st-meta h3{font-size:30px}
  .st-side{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center;gap:12px}
  .st-tag{text-align:left}
  .st-open{font-size:13px;padding:9px 13px}
  .st-nav{top:auto;bottom:118px;right:var(--gx)}
  .ov-end{top:34vh}
  .endmark{font-size:clamp(64px,22vw,120px)}
  .end-q{font-size:22px}
}