/* =====================================================================
   FELOXITY — Case Study "DEAD AIR" · Weltraum-Scrollerlebnis
   Sektionen sind transparent (das WebGL-Universum #universe liegt dahinter).
   Headings: 100% weiß, keine Eyebrows. Keine sichtbaren Grid-Container.
   Layout/Choreografie wird von GSAP (main.js) gesteuert.
   ===================================================================== */
:root{
  --bg:#0d0d1a; --bg-2:#13132166;
  --white:#fff; --ink:rgba(255,255,255,.82); --ink-dim:rgba(255,255,255,.5);
  --line:rgba(255,255,255,.14); --line-soft:rgba(255,255,255,.07);
  --orange:#ef7d00; --orange-lt:#ff9626; --grad:linear-gradient(65deg,#ff9626,#ef7d00);
  --magenta:#a84d97; --magenta-d:#702283;
  --font:"interstate","Interstate","Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.76,.04,.27,.97);
  --pad:clamp(1.25rem,5vw,3.5rem);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font);background:var(--bg);color:var(--white);line-height:1.6;
  font-size:clamp(1rem,1.05vw,1.125rem);overflow-x:clip;font-weight:400;-webkit-font-smoothing:antialiased}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}

/* ---- globales WebGL-Universum ---- */
#universe{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block}
body.no-webgl #universe{background:#070710 url("../img/site/space-bg.jpg") center/cover no-repeat;filter:brightness(.45) saturate(.8)}
.cs-main{position:relative;z-index:1}

/* ---- Typografie ---- */
.h-block{font-weight:900;text-transform:uppercase;line-height:.96;letter-spacing:.005em;color:#fff;
  font-size:clamp(2.2rem,6.2vw,5.6rem);max-width:15ch;text-wrap:balance}
.h-block.sm{font-size:clamp(1.8rem,4.6vw,3.6rem);max-width:18ch}
.body-lg{font-size:clamp(1.02rem,1.5vw,1.35rem);color:var(--ink);max-width:58ch}
.measure{width:min(92vw,1120px);margin-inline:auto;padding-inline:var(--pad)}
.measure-narrow{width:min(92vw,760px);margin-inline:auto;padding-inline:var(--pad)}
.tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* ---- Navigation (Vorgabe 1) ---- */
.cs-nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;
  padding:1.05rem var(--pad);transition:transform .5s var(--ease),opacity .45s ease;will-change:transform}
.cs-nav.hide{transform:translateY(-115%);opacity:0;pointer-events:none}
.cs-nav .brand{display:flex;align-items:center;gap:.7rem}
.cs-nav .brand img{height:clamp(28px,2.6vw,38px);width:auto}
.cs-nav .label{font-size:clamp(.62rem,.9vw,.74rem);letter-spacing:.34em;font-weight:700;text-transform:uppercase;color:rgba(255,255,255,.85)}
.cs-nav .lang{display:flex;gap:.55rem;font-size:.74rem;font-weight:700;letter-spacing:.12em}
.cs-nav .lang a{opacity:.5;transition:opacity .3s,color .3s}
.cs-nav .lang a:hover,.cs-nav .lang a.active{opacity:1;color:var(--orange)}

/* ---- Bühnen-Primitive (gepinnt via JS) ---- */
.scene{position:relative;z-index:1}
.stage{height:100svh;min-height:600px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.layer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;will-change:transform,opacity}

/* ---- Scroll-Indikator ---- */
.scroll-hint{position:fixed;left:50%;bottom:1.6rem;transform:translateX(-50%);z-index:40;
  display:flex;flex-direction:column;align-items:center;gap:.5rem;color:var(--ink-dim);
  font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;transition:opacity .5s}
.scroll-hint .dot{width:2px;height:34px;background:linear-gradient(var(--orange),transparent);position:relative;overflow:hidden}
.scroll-hint .dot::after{content:"";position:absolute;top:-10px;left:0;width:2px;height:10px;background:var(--orange);animation:run 1.7s var(--ease) infinite}
@keyframes run{0%{top:-10px}100%{top:34px}}
/* "Zurück zum Start" (ersetzt Scroll-Indikator ganz am Ende) */
.back-top{position:fixed;left:50%;bottom:1.6rem;transform:translateX(-50%);z-index:41;
  display:flex;flex-direction:column;align-items:center;gap:.45rem;background:none;border:0;cursor:pointer;
  font-size:.64rem;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-dim);
  opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s,color .3s}
.back-top.show{opacity:1;visibility:visible}
.back-top:hover{color:var(--orange)}
.back-top svg{width:20px;animation:bobup 1.8s var(--ease) infinite}
@keyframes bobup{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* ---- Disclaimer-Modal ---- */
.modal-overlay{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:var(--pad);
  background:rgba(5,5,12,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:1;transition:opacity .45s var(--ease)}
.modal-overlay.hide{opacity:0}
.modal{width:min(94vw,560px);text-align:center;padding:clamp(2rem,4vw,3.2rem);border-radius:16px;position:relative;overflow:hidden;
  background:linear-gradient(160deg,rgba(28,28,46,.94),rgba(12,12,22,.94));border:1px solid var(--line);
  box-shadow:0 40px 100px -30px rgba(0,0,0,.8)}
.modal::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:var(--grad);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;opacity:.5;pointer-events:none}
.modal-signet{width:60px;margin:0 auto 1.3rem}
.modal h2{font-size:clamp(1.5rem,3vw,2.2rem);margin-inline:auto;max-width:18ch}
.modal p{color:var(--ink);margin-top:1.1rem;font-size:clamp(.95rem,1.2vw,1.08rem);line-height:1.6}
.modal p b{color:#fff}
.modal p a{color:var(--orange);text-decoration:underline;text-underline-offset:3px}
.modal-close-btn{margin-top:2rem;background:var(--grad);color:#1a1205;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  padding:1em 2.4em;border-radius:6px;transition:transform .35s var(--ease),filter .35s}
.modal-close-btn:hover{transform:translateY(-3px);filter:brightness(1.06)}

/* ---- HERO (Beat 00) ---- */
#hero{position:relative}
.hero-canvas{position:fixed;inset:0;z-index:30;width:100%;height:100%;will-change:transform,opacity,filter}
.hero-canvas canvas{width:100%;height:100%;object-fit:cover}
/* Hero-Overlay hart aus, sobald Hero verlassen (fixt Mid-Page-Reload-Flash) */
body.hero-gone .hero-canvas,body.hero-gone .hero-vignette,body.hero-gone .hero-head{opacity:0!important;visibility:hidden!important}
.hero-vignette{position:fixed;inset:0;z-index:31;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 42%,transparent 38%,rgba(7,7,16,.6) 78%,#070710 100%)}
.hero-head{position:fixed;inset:0;z-index:32;display:flex;align-items:center;justify-content:center;pointer-events:none}
.hero-line{position:absolute;text-align:center;color:#fff;font-weight:900;text-transform:uppercase;
  font-size:clamp(2.3rem,7vw,6rem);line-height:.98;letter-spacing:.005em;width:min(92vw,16ch);will-change:transform,opacity}

/* ---- INTRO (Beat 01) ---- */
.intro-lines{display:flex;flex-direction:column;gap:.55rem;text-align:center}
.intro-line{font-size:clamp(1.5rem,3.7vw,3rem);font-weight:700;color:#fff;line-height:1.12;overflow:hidden}
.intro-line span{display:inline-block;will-change:transform,opacity}
.intro-line.accent{color:var(--orange)}

/* ---- Statischer Countdown (Beat 02, erklärend, zählt NICHT) ---- */
.static-clock{text-align:center;color:#fff}
.sc-time{font-weight:900;line-height:1;display:flex;align-items:baseline;justify-content:center;gap:.12em}
.sc-time span{display:inline-block;min-width:2ch;text-align:center;font-size:clamp(2.4rem,8.8vw,6.8rem)}
.sc-time i{font-style:normal;font-size:clamp(1.75rem,5.6vw,4.4rem);color:var(--orange);transform:translateY(-.08em)}
.sc-note{margin-top:1.1rem;font-size:clamp(.82rem,1.1vw,1.02rem);letter-spacing:.04em;color:var(--ink);max-width:32ch;margin-inline:auto}

/* ---- Kennzahl-Karten unter dem Countdown (Beat 02) ---- */
.kpi-row{display:flex;gap:clamp(.6rem,1.4vw,1.1rem);flex-wrap:wrap;justify-content:center;width:min(96vw,920px)}
.fact-chip{background:rgba(10,10,20,.55);border:1px solid var(--line);border-radius:10px;
  padding:1.05rem 1.7rem;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  will-change:transform,opacity;min-width:140px;text-align:center}
.fact-chip .k{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim);font-weight:700}
.fact-chip .v{font-size:clamp(1.35rem,2.3vw,1.95rem);font-weight:900;margin-top:.3rem}
.fact-chip .v b{color:var(--orange)}

/* ---- STÖRFÄLLE (Beat 03/04/05) — links Problem · rechts Feloxity-Lösung ---- */
.disrupt-pair{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;pointer-events:none}
.pair-grid{display:grid;grid-template-columns:1fr clamp(44px,4.5vw,56px) 1fr;align-items:stretch;
  gap:clamp(10px,1.6vw,20px);width:min(94vw,1280px)}
.pcol{display:flex;perspective:1400px;will-change:transform}
.panel{position:relative;flex:1;width:100%;display:flex;flex-direction:column;
  padding:clamp(1.4rem,2.4vw,2.4rem);border:1px solid var(--line);border-radius:14px;
  backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);overflow:hidden;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.7);pointer-events:auto;
  transform-style:preserve-3d;transition:transform .3s var(--ease),box-shadow .4s var(--ease)}
.panel.problem{background:linear-gradient(150deg,rgba(70,16,16,.8),rgba(24,8,10,.7));border-color:rgba(255,90,70,.42);--pglow:#ff6a4a}
.panel.solution{background:linear-gradient(150deg,rgba(40,20,10,.76),rgba(14,10,20,.66));border-color:rgba(239,125,0,.45);--pglow:#ef7d00}
.panel::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;
  background:conic-gradient(from var(--cardang,0deg),transparent 0 58%,var(--pglow,#a84d97) 80%,transparent 93%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  opacity:.75;pointer-events:none;animation:cardborder 8s linear infinite}
@media (prefers-reduced-motion:reduce){.panel::before{animation:none}}
.panel::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .45s;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.12),transparent 60%)}
.panel:hover::after{opacity:1}
.panel:hover{box-shadow:0 30px 80px -28px color-mix(in srgb,var(--pglow,#a84d97) 40%,#000)}
/* Kopfzeile: klar erkennbares Label (Problem = gefüllt rot, Lösung = gefüllt orange) */
.panel-head{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin-bottom:1rem}
.panel .tag{display:inline-block;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;font-weight:900;
  padding:.42rem .8rem;border-radius:4px}
.panel.problem .tag{background:#ff5a3c;color:#210503;box-shadow:0 0 18px rgba(255,90,60,.35)}
.panel.solution .tag{background:var(--grad);color:#1a1205;box-shadow:0 0 18px rgba(239,125,0,.3)}
.panel .tag-sub{font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--ink-dim)}
/* Problem-Panel: Copy links, Icon rechts (Flex ⇒ nie Text-Überlappung) */
.prob-top{display:flex;align-items:flex-start;justify-content:space-between;gap:clamp(.9rem,2vw,1.5rem)}
.prob-copy{flex:1;min-width:0}
.panel-icon{flex:0 0 auto;width:clamp(86px,8.5vw,130px);height:auto;align-self:center;pointer-events:none;opacity:.94;
  filter:drop-shadow(0 0 20px color-mix(in srgb,var(--pglow,#a84d97) 75%,transparent)) drop-shadow(0 0 5px rgba(255,255,255,.25))}
.panel h3{color:#fff;font-weight:900;text-transform:uppercase;font-size:clamp(1.25rem,2vw,1.9rem);line-height:1.04}
.panel p{color:var(--ink);margin-top:.95rem;max-width:52ch;font-size:clamp(.95rem,1.15vw,1.1rem)}
.panel p b{color:var(--orange)}
/* Auswirkungen des Problems (macht das Risiko konkret) */
.impact{list-style:none;margin-top:1.15rem;display:grid;gap:.55rem}
.impact li{position:relative;padding-left:1.1rem;color:var(--ink);font-size:clamp(.86rem,1vw,.98rem);line-height:1.45}
.impact li::before{content:"";position:absolute;left:0;top:.44em;width:7px;height:7px;background:#ff5a3c;
  transform:rotate(45deg);box-shadow:0 0 8px rgba(255,90,60,.7)}
/* Ergebnis-Zeile am Fuß des Lösungs-Panels */
.outcome{margin-top:auto;padding-top:1.1rem;display:flex;align-items:baseline;gap:.9rem;border-top:1px solid var(--line-soft)}
.panel.solution p{margin-bottom:1.2rem}
.outcome .k{font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-dim);font-weight:700;white-space:nowrap}
.outcome .v{font-weight:900;color:var(--orange);text-transform:uppercase;font-size:clamp(.95rem,1.25vw,1.2rem);letter-spacing:.02em;line-height:1.25}
/* Pfeil-Badge zwischen Problem und Lösung */
.pair-arrow{align-self:center;justify-self:center;width:clamp(42px,4vw,52px);height:clamp(42px,4vw,52px);border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--orange);
  background:rgba(10,10,20,.72);border:1px solid rgba(239,125,0,.5);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 0 26px rgba(239,125,0,.35);will-change:transform,opacity}
.pair-arrow svg{width:52%;height:52%;filter:drop-shadow(0 0 6px rgba(239,125,0,.8))}
/* Fallback (no-js / reduced-motion): Paare statisch untereinander statt gestapelt */
.no-js #stoerfaelle .stage,#stoerfaelle.static .stage{height:auto;min-height:0;display:block;overflow:visible;padding:16vh 0 10vh}
.no-js .disrupt-pair,#stoerfaelle.static .disrupt-pair{position:static;pointer-events:auto;margin-bottom:5vh}

/* Gewitter-Sturm (Hintergrund der gesamten Störfälle-Sektion, hinter allen Cards) */
.storm{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;animation:lightning 4.5s steps(1,end) infinite}
.storm i{position:absolute;left:50%;top:50%;border-radius:50%;filter:blur(64px);transform:translate(-50%,-50%)}
.storm i:nth-child(1){width:185vmin;height:185vmin;opacity:.8;animation:stormspin 26s linear infinite;
  background:conic-gradient(from 0deg,rgba(160,172,200,0) 0deg,rgba(160,172,200,.34) 60deg,rgba(95,108,145,.20) 150deg,
    rgba(160,172,200,0) 240deg,rgba(135,148,185,.30) 320deg,rgba(160,172,200,0) 360deg)}
.storm i:nth-child(2){width:130vmin;height:130vmin;opacity:.6;animation:stormspin 17s linear infinite reverse;
  background:conic-gradient(from 180deg,rgba(130,142,180,0),rgba(130,142,180,.30) 110deg,rgba(130,142,180,0) 230deg)}
@keyframes stormspin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes lightning{
  0%,26%,100%{filter:brightness(1)}
  27%{filter:brightness(1.7)}28.5%{filter:brightness(1.15)}29.5%{filter:brightness(1.55)}31%{filter:brightness(1)}
  68%{filter:brightness(1)}69%{filter:brightness(1.6)}70%{filter:brightness(1.2)}71.3%{filter:brightness(1.5)}73%{filter:brightness(1)}}
@media (prefers-reduced-motion:reduce){.storm i{animation:none}.storm{animation:none}}

/* horizontale Passage */
.htrack{position:absolute;top:0;left:0;height:100%;display:flex;will-change:transform}
.hpanel{width:100vw;height:100%;flex:0 0 100vw;display:flex;align-items:center;justify-content:center}

/* Stationen-Indikator: Ladebalken-Streifen, die beim Scrollen aufladen */
.stations{position:fixed;bottom:calc(1.5rem + 100px);left:50%;transform:translateX(-50%);z-index:39;display:flex;gap:.7rem}
.stations i{width:52px;height:4px;border-radius:2px;background:rgba(255,255,255,.16);overflow:hidden;position:relative}
.stations i b{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;border-radius:2px;
  background:linear-gradient(90deg,var(--orange-lt),var(--orange));box-shadow:0 0 8px rgba(239,125,0,.6)}

/* ---- FELOXITY-WEG Cards (Beat 06) ---- */
.weg-cards{position:absolute;left:50%;bottom:calc(9vh + 50px);transform:translateX(-50%);display:flex;gap:30px;
  justify-content:center;align-items:stretch;width:min(98vw,1340px);perspective:1500px}
.card{position:relative;flex:1 1 0;min-width:0;max-width:360px;display:flex;will-change:transform,opacity}
.card-inner{position:relative;flex:1;border-radius:14px;overflow:hidden;padding:clamp(1.6rem,2.1vw,2.1rem) clamp(1.8rem,2.6vw,2.4rem);
  background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.05));
  backdrop-filter:blur(26px) saturate(1.6) brightness(1.05);-webkit-backdrop-filter:blur(26px) saturate(1.6) brightness(1.05);
  border:1px solid rgba(255,255,255,.18);box-shadow:0 20px 50px -20px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.12);
  transform-style:preserve-3d;transition:transform .3s var(--ease),box-shadow .4s var(--ease);transform:rotateX(0) rotateY(0)}
/* langsam "schlängelnde" Gradient-Border (Linie wandert um die Card) */
@property --cardang{syntax:"<angle>";inherits:false;initial-value:0deg}
.card{--cardglow:#a84d97}            /* neutrale Cards: Lila-Ton */
.card-inner::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;
  background:conic-gradient(from var(--cardang),transparent 0 60%,var(--cardglow) 80%,transparent 93%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  opacity:.5;transition:opacity .4s;pointer-events:none;animation:cardborder 7s linear infinite}
.card:hover .card-inner::before{opacity:1}
@keyframes cardborder{to{--cardang:360deg}}
/* softer, mausreaktiver Glanz (folgt dem Zeiger) */
.card-inner::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .45s;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.14),transparent 62%)}
.card:hover .card-inner::after{opacity:1}
.card:hover .card-inner{box-shadow:0 28px 70px -20px rgba(239,125,0,.22)}
@media (prefers-reduced-motion:reduce){.card-inner::before{animation:none}}
.card .ic{width:44px;height:44px;margin-bottom:.9rem;opacity:.95;position:relative}
.card .ic img{width:100%;height:100%;object-fit:contain}
.card .n{font-size:.78rem;font-weight:900;color:var(--orange);letter-spacing:.1em;position:relative}
.card h3{color:#fff;font-weight:900;text-transform:uppercase;font-size:clamp(1rem,1.5vw,1.3rem);margin-top:.3rem;line-height:1.05;position:relative}
.card p{color:var(--ink);margin-top:.55rem;font-size:.9rem;position:relative}

/* ---- ERGEBNIS (Beat 07) ---- */
.result-stats{display:flex;flex-wrap:nowrap;gap:clamp(.8rem,2.4vw,2.4rem);justify-content:center;align-items:flex-start}
.rstat{text-align:center;flex:0 1 auto;padding-inline:.4rem}
.rstat .num{font-size:clamp(2rem,4.6vw,4.2rem);font-weight:900;line-height:1;white-space:nowrap;
  display:inline-block;min-width:6.4ch;text-align:center;font-variant-numeric:tabular-nums;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.rstat .lab{margin-top:.6rem;color:var(--ink);font-size:.92rem;max-width:22ch;margin-inline:auto}
.rstat{position:relative;z-index:1}
.constellation{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:visible}
.con-line{fill:none;stroke:#ef7d00;stroke-width:1.4;opacity:.85;filter:drop-shadow(0 0 4px rgba(239,125,0,.7))}
.con-dot{fill:#ff9626;filter:drop-shadow(0 0 5px rgba(255,150,38,.95))}
.quote-panel{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;will-change:transform,opacity}
.quote-panel .q{width:min(92vw,820px);background:rgba(8,8,16,.92);border-left:3px solid var(--orange);
  padding:clamp(1.6rem,4vw,3rem);font-size:clamp(1.4rem,2.8vw,2.2rem);font-weight:700;line-height:1.3;color:#fff}
.quote-panel cite{display:block;margin-top:1.2rem;font-size:.92rem;font-weight:400;font-style:normal;color:var(--ink-dim)}

/* ---- WARUM FELOXITY (Beat 08) ---- */
.astro{position:absolute;right:-4vw;bottom:-9vh;height:min(114vh,1040px);width:auto;
  filter:drop-shadow(0 30px 80px rgba(112,34,131,.5));will-change:transform;pointer-events:none}
.usp-list{position:absolute;left:var(--pad);top:50%;transform:translateY(-50%);max-width:min(60vw,560px)}
.usp{padding:1rem 0;border-bottom:1px solid var(--line-soft)}
.usp h3{color:#fff;font-weight:900;text-transform:uppercase;font-size:clamp(1.1rem,2vw,1.6rem);line-height:1}
.usp p{color:var(--ink);margin-top:.35rem;font-size:.98rem;max-width:34ch}

/* ---- PHÖNIX-FINALE (Beat 09) ---- */
.phoenix-canvas{position:fixed;inset:0;z-index:34;width:100%;height:100%;pointer-events:none;will-change:opacity}
.phoenix-quote{position:fixed;left:0;right:0;bottom:12vh;z-index:35;text-align:center;pointer-events:none;will-change:transform,opacity}
.phoenix-quote .pq{width:min(92vw,760px);margin-inline:auto;color:#fff;font-weight:900;text-transform:uppercase;
  font-size:clamp(1.3rem,3vw,2.4rem);line-height:1.1}
.phoenix-cta{position:fixed;left:0;right:0;bottom:14vh;z-index:36;text-align:center;pointer-events:auto;will-change:transform,opacity}
.phoenix-cta .pq{width:min(92vw,720px);margin-inline:auto;color:#fff;font-weight:900;text-transform:uppercase;
  font-size:clamp(1.4rem,3.2vw,2.6rem);line-height:1.06}
.phoenix-cta .pcta-actions{margin-top:1.6rem;display:flex;gap:1.4rem;justify-content:center;align-items:center;flex-wrap:wrap}
.phoenix-cta .pcta-tel{font-weight:700;color:#fff;font-size:1.05rem;letter-spacing:.02em;transition:color .3s}
.phoenix-cta .pcta-tel:hover{color:var(--orange)}
.phoenix-cta .pcta-legal{margin-top:1.5rem;font-size:.76rem;color:var(--ink-dim);letter-spacing:.03em}
.phoenix-cta .pcta-legal a{transition:color .3s}
.phoenix-cta .pcta-legal a:hover{color:var(--orange)}
.cta-btn{display:inline-block;background:var(--grad);color:#1a1205;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;padding:1.05em 2.2em;border-radius:6px;transition:transform .35s var(--ease),filter .35s}
.cta-btn:hover{transform:translateY(-3px);filter:brightness(1.06)}

/* ---- KONTAKT (Beat 10) ---- */
.contact{text-align:center}
.contact .signet{width:clamp(70px,8vw,110px);margin:0 auto 2rem}
.contact h2{margin-inline:auto;max-width:22ch;font-size:clamp(1.9rem,4.4vw,3.7rem)}
.contact .lines,.contact .big-links,.contact .cta-btn{max-width:640px;margin-left:auto;margin-right:auto}
.contact .lines{margin-top:1.6rem;color:var(--ink)}
.contact .big-links{margin-top:2rem;display:flex;flex-direction:column;gap:.8rem;align-items:center}
.contact .big-links a{font-size:clamp(1.4rem,3.4vw,2.4rem);font-weight:900;color:#fff;letter-spacing:.01em;transition:color .3s}
.contact .big-links a:hover{color:var(--orange)}
.contact .cta-btn{display:inline-block;margin-top:1.6rem;background:var(--grad);color:#1a1205;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;padding:1.05em 2.2em;transition:transform .35s var(--ease),filter .35s}
.contact .cta-btn:hover{transform:translateY(-3px);filter:brightness(1.06)}

/* ---- Footer ---- */
.cs-footer{position:relative;z-index:1;padding:clamp(2.5rem,5vw,4rem) var(--pad);border-top:1px solid var(--line-soft);background:rgba(7,7,16,.6)}
.cs-footer .inner{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;align-items:center}
.cs-footer img{height:36px}
.cs-footer .meta{color:var(--ink-dim);font-size:.85rem;line-height:1.8}
.cs-footer .meta a:hover{color:var(--orange)}

/* ---- Fallbacks: ohne JS / reduced-motion: alles lesbar, keine Pins ---- */
.no-js .hero-canvas,.no-js .hero-vignette,.no-js .phoenix-canvas{display:none}
@media (prefers-reduced-motion:reduce){
  .scroll-hint .dot::after{animation:none}
}

/* ---- Responsive ---- */
@media (max-width:760px){
  .astro{height:58vh;right:-30px;opacity:.5}
  .usp-list{max-width:88vw;top:auto;bottom:6vh;transform:none}
  /* Paar oben ausrichten + verdichten, damit der Stationen-Balken unten frei bleibt */
  .disrupt-pair{align-items:flex-start;padding-top:70px}
  .pair-grid{grid-template-columns:1fr;gap:8px;width:min(94vw,560px)}
  .pair-arrow{width:34px;height:34px}
  .pair-arrow svg{transform:rotate(90deg)}
  .panel{padding:1rem 1.05rem}
  .panel h3{font-size:clamp(1rem,4.4vw,1.25rem)}
  .panel p{font-size:.88rem;margin-top:.55rem}
  .panel-head{margin-bottom:.6rem}
  .panel-icon{display:none}
  .impact{margin-top:.7rem;gap:.35rem}
  .impact li{font-size:.78rem}
  .outcome{padding-top:.7rem}
  .panel.solution p{margin-bottom:.7rem}
  .weg-cards{flex-wrap:wrap;gap:18px}
  .card{flex:1 1 42%;max-width:none}
  .cs-nav .lang{display:none}
  .result-stats{flex-wrap:wrap}
  .rstat{flex:0 0 42%}
  .hud .clock{font-size:clamp(2.4rem,14vw,5rem)}
}