/* ==================================================================
   V3 — Datenströme als Grafik
   Ersetzt Knotenreihe + Protokollliste durch ein kompaktes Modul:
   drei Bahnen, echte Datenobjekte, sichtbare Umwandlung an der
   KI-Station. Ziel: unter 300px hoch statt ~700px.
   ================================================================== */
html, body{ overflow-x:clip !important; }
#ainx-landing > div[style*="overflow-x"]{ overflow-x:clip !important; }

#ainx-landing{ --cy:#2CE6F5; --bl:#1183E3; --ez:cubic-bezier(.16,1,.3,1); }

/* alte Bausteine des Moduls ausblenden */
#ainx-landing .ainx-g-flow{ display:none !important; }

/* ---------- Rahmen ------------------------------------------------ */
.sv{ text-align:left; }
.sv-head{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.sv-ttl{ font-family:var(--font-mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:#8FA1B6; }
.sv-live{ margin-left:auto; display:flex; align-items:center; gap:7px;
  font-family:var(--font-mono); font-size:11px; color:var(--cy); }
.sv-live i{ width:7px; height:7px; border-radius:50%; background:var(--cy);
  box-shadow:0 0 10px var(--cy); animation:svPulse 2s ease-in-out infinite; }
@keyframes svPulse{ 0%,100%{opacity:1} 50%{opacity:.3} }

/* ---------- Bühne: Bahnen + Station ------------------------------ */
.sv-stage{ position:relative; }
/* Die Bahn ist nur noch die Huelle der Drehung; das Raster sitzt auf den
   beiden Seiten (.sv-face) - siehe weiter unten. */
.sv-src{ font-family:var(--font-mono); font-size:10.5px; color:#7F91A6;
  text-align:right; white-space:nowrap;
  /* Absicherung: gemessen ragte "DMS · Leistungsv." 29px in die Bahn hinein.
     Lieber abschneiden als in die Laufstrecke bluten. */
  overflow:hidden; text-overflow:ellipsis; }
.sv-track{ position:relative; height:2px; border-radius:2px;
  background:rgba(255,255,255,.09); }
/* Richtungsspur */
.sv-track::before{ content:""; position:absolute; inset:0; border-radius:inherit;
  background:repeating-linear-gradient(90deg,
    rgba(44,230,245,.26) 0 6px, transparent 6px 14px); }
.sv-out{ font-family:var(--font-mono); font-size:10.5px; color:#4E5F75;
  white-space:nowrap; transition:color .4s var(--ez); }
.sv-out.hit{ color:#4ADE80; }

/* Datenobjekt, das durch die Bahn läuft */
.sv-chip{ position:absolute; top:50%; left:0; transform:translate(0,-50%);
  display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
  font-family:var(--font-mono); font-size:10.5px; line-height:1;
  padding:5px 9px; border-radius:7px; color:#DCE7F2;
  background:rgba(18,38,66,.96); border:1px solid rgba(44,230,245,.34);
  box-shadow:0 6px 18px -8px rgba(0,0,0,.9), 0 0 16px -6px rgba(44,230,245,.5);
  will-change:left, transform, opacity; }
.sv-chip.done{ border-color:rgba(74,222,128,.5); color:#CFF3DC;
  box-shadow:0 6px 18px -8px rgba(0,0,0,.9), 0 0 18px -6px rgba(74,222,128,.6); }
.sv-chip b{ font-weight:400; color:var(--cy); }
.sv-chip.done b{ color:#4ADE80; }

/* KI-Station in der Mitte, über alle Bahnen */
.sv-hub{ position:absolute; left:50%; top:0; bottom:0; width:96px;
  transform:translateX(-50%); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:6px; pointer-events:none; }
.sv-hub-box{ width:60px; height:60px; border-radius:17px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(150deg, rgba(44,230,245,.22), rgba(17,131,227,.10));
  border:1px solid rgba(44,230,245,.42);
  box-shadow:0 0 0 6px rgba(6,16,34,.92), 0 12px 30px -12px rgba(0,0,0,.95);
  transition:box-shadow .35s var(--ez), transform .35s var(--ez); }
.sv-hub-box svg{ width:26px; height:26px; color:var(--cy); }
.sv-hub-box.hot{ transform:scale(1.07);
  box-shadow:0 0 0 6px rgba(6,16,34,.92), 0 0 34px 4px rgba(44,230,245,.75); }
.sv-hub-lbl{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.1em;
  text-transform:uppercase; color:#8FA1B6; white-space:nowrap; }

/* Statuszeile statt Protokollliste */
.sv-foot{ margin-top:13px; padding-top:11px;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  font-family:var(--font-mono); font-size:11px; color:#7F91A6; }
.sv-foot .sv-now{ color:#C6D2E0; min-width:0; }
.sv-foot .sv-cnt{ margin-left:auto; white-space:nowrap; }
.sv-foot b{ color:#DCE7F2; font-weight:400; }

@media (max-width:900px){
  .sv-lane{ height:42px; }
  .sv-src, .sv-out{ font-size:9px; }
  .sv-chip{ font-size:9px; padding:4px 7px; gap:4px; }
  .sv-hub{ width:64px; }
  .sv-hub-box{ width:46px; height:46px; border-radius:14px; }
  .sv-hub-box svg{ width:20px; height:20px; }
  .sv-hub-lbl{ font-size:8.5px; }
  .sv-foot{ font-size:10px; gap:9px; }
  .sv-ttl{ font-size:9.5px; }
}
@media (max-width:420px){

  .sv-chip{ font-size:8.5px; }
}

@media (prefers-reduced-motion: reduce){
  .sv-live i{ animation:none; }
  .sv-chip{ transition:none !important; }
}

/* ===== uebernommen aus V2: B Ablauf · C Dokument · D ROI ===== */

/* position:sticky stirbt, sobald ein Vorfahre overflow != visible hat.
   overflow-x:clip begrenzt genauso, erzeugt aber keinen Scroll-Container. */
html, body{ overflow-x:clip !important; }
#ainx-landing > div[style*="overflow-x"]{ overflow-x:clip !important; }

/* ================================================================
   TESTSEITE — vier Signature-Momente auf Basis von Richtung B
   A Hero-Konsole · B Ablauf-Kette · C Dokument-Reise · D ROI-Fluss
   Alles additiv: ohne JS oder bei reduzierter Bewegung bleibt die
   Seite exakt wie vorher.
   ================================================================ */
#ainx-landing{ --cy:#2CE6F5; --ez:cubic-bezier(.16,1,.3,1); }

/* ---------- B · Ablauf-Kette ------------------------------------- */
#ainx-landing .ax-step{ position:relative; padding-left:22px; padding-right:14px; }
#ainx-landing .ax-step::before{ content:""; position:absolute; left:0; top:4px; bottom:4px;
  width:2px; border-radius:2px; background:rgba(255,255,255,.10); }
#ainx-landing .ax-step::after{ content:""; position:absolute; left:0; top:4px; width:2px;
  height:0; border-radius:2px; background:linear-gradient(180deg,var(--cy),#1183E3);
  box-shadow:0 0 14px rgba(44,230,245,.7); transition:height .9s var(--ez); }

#ainx-landing .ax-step.on::after{ height:calc(100% - 8px); }

/* ---------- C · Dokument-Reise ----------------------------------- */
.ax-doc-band{ position:relative; }
.ax-doc-sticky{ position:sticky; top:120px; }
.ax-doc-grid{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
              gap:40px; align-items:center; }
.ax-paper{ position:relative; aspect-ratio:1/1.32; border-radius:12px; overflow:hidden;
  background:#101F38; border:1px solid rgba(255,255,255,.14);
  box-shadow:0 40px 80px -34px rgba(0,0,0,.95); padding:22px 20px; }
.ax-row{ height:7px; border-radius:3px; background:rgba(255,255,255,.10); margin-bottom:11px;
         transition:background .45s var(--ez), box-shadow .45s var(--ez); }
.ax-row.w1{ width:88% } .ax-row.w2{ width:64% } .ax-row.w3{ width:76% } .ax-row.w4{ width:52% }
.ax-row.hot{ background:linear-gradient(90deg,var(--cy),#1183E3);
             box-shadow:0 0 16px rgba(44,230,245,.65); }
.ax-scan{ position:absolute; left:0; right:0; height:2px; background:var(--cy);
  box-shadow:0 0 20px 4px rgba(44,230,245,.85); opacity:0; transition:opacity .3s; }
.ax-scan.on{ opacity:1; }
.ax-out{ display:flex; flex-direction:column; gap:9px; }
.ax-out-row{ display:grid; grid-template-columns:56px minmax(0,1fr) 78px; gap:12px;
  align-items:center; padding:11px 14px; border-radius:10px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09);
  font-family:var(--font-mono); font-size:12px; color:#C6D2E0;
  opacity:.26; transform:none;
  transition:opacity .5s var(--ez), transform .5s var(--ez); }
.ax-out-row.on{ opacity:1; border-color:rgba(44,230,245,.34); background:rgba(44,230,245,.07); }
.ax-oz{ color:var(--cy) } .ax-om{ text-align:right; color:#9FB0C4 }
.ax-sum{ margin-top:14px; font-family:var(--font-mono); font-size:12px; color:#4ADE80;
         opacity:0; transition:opacity .5s var(--ez); }
.ax-sum.on{ opacity:1 }


/* ---------- D · ROI-Fluss ---------------------------------------- */
.ax-flow{ margin-top:20px; }
.ax-flow-bar{ position:relative; height:34px; border-radius:9px; overflow:hidden;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09);
  display:flex; align-items:center; }
.ax-flow-fill{ position:absolute; left:0; top:0; bottom:0;
  background:linear-gradient(90deg,rgba(44,230,245,.34),rgba(17,131,227,.5));
  transition:width .55s var(--ez); }
.ax-flow-lab{ position:relative; display:flex; justify-content:space-between; width:100%;
  padding:0 12px; font-family:var(--font-mono); font-size:11px; color:#C6D2E0; }
.ax-dots{ position:relative; height:22px; margin:7px 0; }
.ax-dot{ position:absolute; top:8px; width:5px; height:5px; border-radius:50%;
  background:var(--cy); box-shadow:0 0 9px rgba(44,230,245,.9); }

/* ---------- Karten (aus B) --------------------------------------- */
#ainx-landing .ax-card{ position:relative; overflow:hidden;
  transition:transform .4s var(--ez), border-color .4s, box-shadow .4s; }
#ainx-landing .ax-card::after{ content:""; position:absolute; top:0; bottom:0; left:-60%;
  width:45%; background:linear-gradient(100deg,transparent,rgba(44,230,245,.12),transparent);
  transform:skewX(-14deg); opacity:0; pointer-events:none; }
#ainx-landing .ax-card:hover{ transform:translateY(-5px);
  border-color:rgba(44,230,245,.38) !important;
  box-shadow:0 26px 52px -24px rgba(0,0,0,.85), 0 0 40px -18px rgba(44,230,245,.5); }
#ainx-landing .ax-card:hover::after{ opacity:1; animation:axSweep .9s ease-out; }
@keyframes axSweep{ from{ left:-60% } to{ left:120% } }

/* Randabstand der Schritt-Kacheln (fiel in Variante A auf) */
#ainx-landing .ax-step{ padding-right:14px; }

@media (prefers-reduced-motion: reduce){
  .ax-ln{ animation:none } .ax-live{ animation:none }
  #ainx-landing .ax-step{ opacity:1 !important; filter:none !important }
  .ax-sum{ opacity:1 !important; transform:none !important }
  .ax-scan{ display:none }
}

/* Ring, der beim aktiven Knoten einmal aufzieht */
.ax-node-ico{ position:relative; }
.ax-node-ico::after{
  content:""; position:absolute; inset:-10px; border-radius:20px;
  border:1.5px solid rgba(44,230,245,.85); opacity:0; pointer-events:none; }
.ax-node-ico.hot::after{ animation:axRing .95s cubic-bezier(.2,.8,.3,1) both; }
@keyframes axRing{ 0%{ transform:scale(.72); opacity:0 } 25%{ opacity:.9 }
                   100%{ transform:scale(1.35); opacity:0 } }



/* ================= Mobil: gleiche Momente, andere Proportionen ===== */
@media (max-width:900px){

  /* --- Dokument-Reise laeuft auch auf dem Handy -------------------- */
  /* sticky funktioniert auf Mobilgeraeten einwandfrei; vorher war es
     abgeschaltet, das Band blieb aber hoch -> viel Scrollen, kein Effekt */
  .ax-doc-grid{ grid-template-columns:minmax(0,1fr); gap:18px; align-items:start; }
  .ax-doc-sticky{ position:sticky; top:88px; }
  .ax-paper{ width:min(188px,48vw); margin:0 auto; padding:16px 14px; }
  .ax-row{ height:5px; margin-bottom:8px; }
  .ax-out{ gap:7px; }
  .ax-out-row{ grid-template-columns:52px minmax(0,1fr) 66px; gap:9px;
    padding:9px 11px; font-size:11px; }
  .ax-sum{ font-size:11px; margin-top:10px; text-align:center; }




}

@media (max-width:420px){
  .ax-paper{ width:min(160px,44vw); }
  .ax-out-row{ grid-template-columns:46px minmax(0,1fr) 58px; font-size:10.5px; }

}

/* ============ Handhabung auf dem Handy ============================ */



@media (max-width:900px){
  /* B · Tippziele: 21px hohe Links sind auf dem Finger nicht treffbar.
     WCAG 2.5.8 verlangt 24px, die Plattformen empfehlen 44px. */
  #ainx-landing footer a{ display:inline-block; padding:11px 0; line-height:1.25; }
  #ainx-landing a[href^="/referenzen/"],
  #ainx-landing a[href^="/leistungen/"],
  #ainx-landing a[href*="datenschutz"]{ padding-top:9px; padding-bottom:9px; }

  /* C · iOS zoomt beim Fokus, sobald die Schrift unter 16px liegt.
     Das laesst die Seite beim ersten Tippen verspringen. */
  #ainx-landing .ainx-in{ font-size:16px; }

  /* E · Das Dokument war auf Briefmarkengroesse geschrumpft */
  .ax-paper{ width:min(216px,58vw) !important; padding:18px 15px; }
  .ax-row{ height:6px; margin-bottom:9px; }

  /* F · Schieberegler griffiger machen */
  #ainx-landing input[type=range]{ height:10px; }
  #ainx-landing input[type=range]::-webkit-slider-thumb{ width:26px; height:26px; }
  #ainx-landing input[type=range]::-moz-range-thumb{ width:26px; height:26px; }
}

@media (max-width:420px){
  .ax-paper{ width:min(198px,56vw) !important; }

}

/* letzte zu kleine Tippziele: die Karten-Links ("Use Case besprechen",
   "Mehr erfahren", "Projekt ansehen") sind nur 21px hoch */
@media (max-width:900px){
  #ainx-landing .ax-card a{ display:inline-flex; align-items:center;
    min-height:44px; padding:4px 0; }
}

/* Auf schmalen Schirmen duerfen die Objekte die Bahn nicht sprengen */
@media (max-width:520px){
  .sv-chip{ max-width:100%; overflow:hidden; text-overflow:ellipsis;
            display:inline-flex; }

}

/* ============ KI-Station im Hero deutlich kennzeichnen ============= */
.sv-hub-box{ position:relative; flex-direction:column; gap:1px; }
.sv-hub-ico{ display:flex; align-items:center; justify-content:center; }
.sv-hub-ico svg{ width:19px; height:19px; color:var(--cy); }
.sv-hub-kbl{ font-family:var(--font-mono); font-weight:700; font-size:11px;
  letter-spacing:.14em; color:var(--cy); line-height:1; }
/* Ring dreht, solange verarbeitet wird - macht die Station als Rechenstelle
   erkennbar statt als weiteres Symbol */
.sv-hub-ring{ position:absolute; inset:-5px; border-radius:20px; opacity:0;
  background:conic-gradient(from 0deg, transparent 0 62%,
             rgba(44,230,245,.85) 78%, transparent 92%);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 0);
  mask:radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 0);
  transition:opacity .3s var(--ez); pointer-events:none; }
.sv-hub-box.hot .sv-hub-ring{ opacity:1; animation:svSpin 1.15s linear infinite; }
@keyframes svSpin{ to{ transform:rotate(360deg) } }

/* ============ LV: Inhalt erst nach der Analyse ===================== */
.ax-out-row{ position:relative; opacity:1 !important; }
.ax-out-row > .ax-oz, .ax-out-row > .ax-txt, .ax-out-row > .ax-om{
  opacity:0; transition:opacity .45s var(--ez); }
.ax-out-row.on > .ax-oz, .ax-out-row.on > .ax-txt, .ax-out-row.on > .ax-om{ opacity:1; }
/* Platzhalterbalken, solange die Zeile nicht analysiert ist */
.ax-skel{ position:absolute; left:14px; right:14px; top:50%; height:6px;
  transform:translateY(-50%); border-radius:3px;
  background:linear-gradient(90deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
  transition:opacity .35s var(--ez); }
.ax-out-row.on .ax-skel{ opacity:0; }
@media (max-width:900px){ .ax-skel{ left:11px; right:11px; height:5px; } }

@media (prefers-reduced-motion: reduce){
  .sv-hub-box.hot .sv-hub-ring{ animation:none }
  .ax-out-row > .ax-oz, .ax-out-row > .ax-txt, .ax-out-row > .ax-om{ opacity:1 !important }
  .ax-skel{ display:none }
}

/* ============ KI-Station: neuronales Netz, gerichteter Durchlauf ====
   Vorher: 66x52px Kasten, Netz unlesbar klein, und der Impuls lief als
   Endlosschleife weiter, waehrend der Chip schon weg war. Jetzt ein
   einzelner Impuls Eingang -> verdeckt -> Ausgang, ausgeloest genau in
   dem Augenblick, in dem der Vorgang die Station erreicht. */
.sv-hub{ width:120px; }
.sv-hub-box{ width:104px !important; height:66px !important;
  border-radius:19px !important; flex-direction:column; gap:3px;
  background:linear-gradient(163deg, rgba(44,230,245,.16), rgba(9,20,38,.94) 62%) !important;
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.sv-hub-ico svg.nn{ width:58px; height:34px; color:var(--cy); overflow:visible; }
.sv-hub-kbl{ font-size:9px; letter-spacing:.22em; opacity:.86; }

/* Ruhezustand gedimmt, damit der Impuls ueberhaupt auffaellt */
.nn-n{ opacity:.32; }
.nn-e path{ opacity:.26; }

/* Ein Durchlauf: Schicht 1, Kanten 1, Schicht 2, Kanten 2, Schicht 3.
   Die Verzoegerungen machen die Richtung sichtbar - ohne sie blinkt
   das Netz nur, statt zu rechnen. */
.sv-hub-box.hot .nn-l1{ animation:nnN .46s ease-out 0s 1 both; }
.sv-hub-box.hot .nn-e1 path{ animation:nnE .46s ease-out .07s 1 both; }
.sv-hub-box.hot .nn-l2{ animation:nnN .46s ease-out .13s 1 both; }
.sv-hub-box.hot .nn-e2 path{ animation:nnE .46s ease-out .20s 1 both; }
.sv-hub-box.hot .nn-l3{ animation:nnN .46s ease-out .26s 1 both; }
@keyframes nnN{
  0%{ opacity:.32 }
  28%{ opacity:1; filter:drop-shadow(0 0 6px rgba(44,230,245,.95)) }
  100%{ opacity:.32 } }
@keyframes nnE{
  0%{ opacity:.26; stroke-width:1.1 }
  28%{ opacity:.98; stroke-width:1.6 }
  100%{ opacity:.26; stroke-width:1.1 } }

/* Der rotierende Ring war fuer einen quadratischen Kasten gebaut: auf
   104x66px macht die Radial-Maske eine Ellipse und die Rotation verzerrt
   die Form. Stattdessen ein Impulsring - formunabhaengig und lesbar als
   "hier wurde gerade gerechnet". */
.sv-hub-ring{ inset:-2px; border-radius:21px;
  background:none !important; border:1.5px solid rgba(44,230,245,.9);
  -webkit-mask:none !important; mask:none !important;
  transition:none; }
.sv-hub-box.hot .sv-hub-ring{ animation:svBurst .62s ease-out 1 both; }
@keyframes svBurst{
  0%{ opacity:.9; transform:scale(1) }
  100%{ opacity:0; transform:scale(1.3) } }

@media (max-width:900px){
  .sv-hub{ width:96px; }
  .sv-hub-box{ width:86px !important; height:56px !important;
    border-radius:16px !important; }
  .sv-hub-ico svg.nn{ width:48px; height:28px; }
  .sv-hub-ring{ border-radius:18px; }
  .sv-hub-kbl{ font-size:8px; letter-spacing:.16em; }
}
@media (prefers-reduced-motion: reduce){
  .sv-hub-box.hot .nn-l1,.sv-hub-box.hot .nn-l2,.sv-hub-box.hot .nn-l3,
  .sv-hub-box.hot .nn-e1 path,.sv-hub-box.hot .nn-e2 path,
  .sv-hub-box.hot .sv-hub-ring{ animation:none }
  .nn-n{ opacity:.85 } .nn-e path{ opacity:.5 }
}

/* ============ KI-Station: Label raus aus den Bahnen =============== */
/* Vorher sass "KI verarbeitet" auf y=885-899 und ueberschnitt damit die
   Bahnen 2 und 3. Jetzt steht es als Stationsmarke ueber dem Stapel. */
.sv-stage{ padding-top:26px; }
.sv-hub{ justify-content:flex-start !important; }
.sv-hub-box{ margin-top:auto !important; margin-bottom:auto !important; }
.sv-hub-lbl{ order:-1; margin-bottom:0; position:relative; }
/* feine Fuehrungslinie von der Marke zum Kasten */
.sv-hub-lbl::after{ content:""; position:absolute; left:50%; top:100%;
  width:1px; height:10px; background:linear-gradient(180deg,
  rgba(44,230,245,.55), transparent); }

@media (max-width:900px){
  .sv-stage{ padding-top:22px; }
  .sv-hub-lbl::after{ height:7px; }
}

/* Zaehler zuckt genau dann, wenn ein Objekt ankommt - macht die
   Verbindung zwischen Zahl und Geschehen sichtbar */
.sv-cnt{ transition:color .25s var(--ez); }
.sv-cnt b{ display:inline-block; font-variant-numeric:tabular-nums;
  transition:transform .25s var(--ez), color .25s var(--ez); }
.sv-cnt.bump{ color:#C6D2E0; }
.sv-cnt.bump b{ color:var(--cy); transform:scale(1.28);
  text-shadow:0 0 12px rgba(44,230,245,.85); }
@media (prefers-reduced-motion: reduce){
  .sv-cnt.bump b{ transform:none; text-shadow:none }
}

/* ============ Variante C: die Buehne reisst auf ===================
   Oben die ersten beiden Pfade samt KI, unten der dritte. Beim Scrollen
   klappen sie auseinander, eine Lichtnaht faehrt durch den Spalt, und aus
   der Mitte steigt die Bilanz. Bewusst nur die Buehne, nicht das ganze
   Panel - das Kippen des Gesamtmoduls hatte die Seite unruhig gemacht. */
.sv-stage{ position:relative; perspective:1200px; perspective-origin:50% 50%; }
.sv-half{ will-change:transform;
  transition:transform .6s cubic-bezier(.3,.9,.25,1), opacity .5s var(--ez2); }
.sv-lane{ position:relative; height:46px; display:grid;
  grid-template-columns:112px minmax(0,1fr) 96px; align-items:center; gap:10px; }

.sv.is-b .sv-oben{ transform:translateY(-70px) rotateX(26deg); opacity:0; }
.sv.is-b .sv-unten{ transform:translateY(70px) rotateX(-26deg); opacity:0; }

/* Lichtnaht im Augenblick des Aufreissens */
.sv-naht{ position:absolute; left:-5%; right:-5%; top:50%; height:2px; z-index:5;
  background:linear-gradient(90deg, transparent, var(--cy), transparent);
  box-shadow:0 0 30px 6px rgba(44,230,245,.55);
  opacity:0; transform:scaleX(.15); pointer-events:none; }
.sv.is-b .sv-naht{ animation:svNaht .8s var(--ez2) 1; }
@keyframes svNaht{
  0%{ opacity:0; transform:scaleX(.15) }
  30%{ opacity:1; transform:scaleX(1) }
  100%{ opacity:0; transform:scaleX(1) } }

/* Die Bilanz steigt aus dem Spalt */
.sv-kern{ position:absolute; left:0; right:0; top:50%; z-index:4;
  display:flex; flex-direction:column; gap:6px; pointer-events:none;
  opacity:0; transform:translateY(-50%) scale(.86);
  /* startet erst, wenn die Haelften draussen sind - sonst ueberlagern sich
     beide Ebenen als Geister (genau das war im Screenshot zu sehen) */
  transition:opacity .4s var(--ez2) .42s,
             transform .5s cubic-bezier(.2,1.05,.3,1) .42s; }
.sv.is-b .sv-kern{ opacity:1; transform:translateY(-50%) scale(1); pointer-events:auto; }
.sv-kern-h{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.18em;
  text-transform:uppercase; color:#5E7086; margin-bottom:2px; }
.sv-krow{ display:grid; grid-template-columns:112px minmax(0,1fr) 96px;
  align-items:center; gap:10px; height:30px; }
.sv-src2{ font-family:var(--font-mono); font-size:10.5px; color:#9FB0C4;
  text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sv-res{ position:relative; height:22px; border-radius:6px;
  background:rgba(255,255,255,.06); display:flex; align-items:center; }
.sv-bar{ position:absolute; left:0; top:0; bottom:0; width:0%; border-radius:6px;
  background:linear-gradient(90deg, rgba(17,131,227,.9), var(--cy));
  box-shadow:0 0 16px -3px rgba(44,230,245,.8);
  transition:width .7s cubic-bezier(.2,.9,.3,1) .3s; }
.sv-n{ position:relative; z-index:2; margin-left:10px;
  font-family:var(--font-mono); font-size:14px; font-weight:700; color:#fff;
  font-variant-numeric:tabular-nums; text-shadow:0 1px 6px rgba(6,16,34,.95); }
.sv-out2{ font-family:var(--font-mono); font-size:10.5px; color:var(--cy);
  opacity:.92; white-space:nowrap; }

/* Die KI wird beim Aufreissen mitgenommen */
.sv-hub{ transition:transform .55s cubic-bezier(.3,.9,.25,1), opacity .4s var(--ez2); }
.sv.is-b .sv-hub{ transform:translateX(-50%) translateY(-52px) scale(.6); opacity:0; }
.sv.is-b .sv-chip{ display:none; }

/* Kopfzeile wechselt mit */
.sv-ttl{ position:relative; display:inline-block; }
.sv-ttl-a, .sv-ttl-b{ font-weight:inherit;
  transition:opacity .3s var(--ez2), transform .3s var(--ez2); }
.sv-ttl-b{ position:absolute; left:0; top:0; white-space:nowrap;
  opacity:0; transform:translateY(6px); }
.sv.is-b .sv-ttl-a{ opacity:0; transform:translateY(-6px); }
.sv.is-b .sv-ttl-b{ opacity:1; transform:none; transition-delay:.18s; }
/* Beide Statustexte uebereinander, damit sie ueberblendet werden koennen -
   mit display:none liesse sich das nicht an die Zeitachse haengen. */
.sv-live{ position:relative; }
.sv-live-a, .sv-live-b{ transition:opacity .3s var(--ez2); }
.sv-live-b{ position:absolute; right:0; top:0; white-space:nowrap; opacity:0; }
.sv.is-b .sv-live-a{ opacity:0; }
.sv.is-b .sv-live-b{ opacity:1; }

@media (max-width:900px){
  .sv-lane, .sv-krow{ grid-template-columns:94px minmax(0,1fr) 62px; gap:7px; }
  .sv-lane{ height:42px; } .sv-krow{ height:27px; }
  .sv-src2, .sv-out2{ font-size:9.5px; }
  .sv-n{ font-size:13px; margin-left:8px; }
  .sv-res{ height:20px; }
  .sv.is-b .sv-oben{ transform:translateY(-60px) rotateX(24deg); }
  .sv.is-b .sv-unten{ transform:translateY(60px) rotateX(-24deg); }
}
@media (max-width:420px){
  .sv-lane, .sv-krow{ grid-template-columns:80px minmax(0,1fr); gap:6px; }
  .sv-out, .sv-out2{ display:none; }
  .sv-src, .sv-src2{ font-size:9px; }
}
@media (prefers-reduced-motion: reduce){
  .sv-half, .sv-kern, .sv-hub, .sv-bar{ transition:none !important; }
  .sv.is-b .sv-oben, .sv.is-b .sv-unten{ transform:none !important; opacity:1 !important; }
  .sv.is-b .sv-kern{ opacity:0 !important; }
  .sv.is-b .sv-naht{ animation:none !important; }
  .sv.is-b .sv-hub{ transform:translateX(-50%) !important; opacity:1 !important; }
}

/* ---- Scroll-getrieben, wo der Browser es kann ----------------------
   Dann haengt das Aufreissen am Scrollweg statt an einer Laufzeit: man
   kann es nicht ueberspringen und es laeuft rueckwaerts genauso.
   Zeitachse liegt auf der Buehne, die selbst kein transform traegt. */
@supports (animation-timeline: view()){
  .sv-stage{ view-timeline:--svc block; }
  .sv-half, .sv-kern, .sv-hub, .sv-naht{ transition:none; }
  /* Reihenfolge OHNE Ueberlappung: erst faehrt der Spalt auf und die
     Haelften verschwinden ganz, dann erst steigt die Bilanz. Vorher liefen
     beide Bereiche parallel - man sah zwei Ebenen uebereinander. */
  .sv-oben{ animation:svObenS linear both; animation-timeline:--svc;
    animation-range:contain 8% contain 40%; }
  .sv-unten{ animation:svUntenS linear both; animation-timeline:--svc;
    animation-range:contain 8% contain 40%; }
  @keyframes svObenS{ from{ transform:none; opacity:1 }
    70%{ opacity:.25 }
    to{ transform:translateY(-70px) rotateX(26deg); opacity:0 } }
  @keyframes svUntenS{ from{ transform:none; opacity:1 }
    70%{ opacity:.25 }
    to{ transform:translateY(70px) rotateX(-26deg); opacity:0 } }
  .sv-naht{ animation:svNahtS linear both; animation-timeline:--svc;
    animation-range:contain 10% contain 46%; }
  @keyframes svNahtS{
    0%{ opacity:0; transform:scaleX(.15) }
    40%{ opacity:1; transform:scaleX(1) }
    100%{ opacity:0; transform:scaleX(1) } }
  .sv-kern{ animation:svKernS linear both; animation-timeline:--svc;
    animation-range:contain 42% contain 72%; }
  @keyframes svKernS{ from{ opacity:0; transform:translateY(-50%) scale(.86) }
    to{ opacity:1; transform:translateY(-50%) scale(1) } }
  .sv-hub{ animation:svHubS linear both; animation-timeline:--svc;
    animation-range:contain 8% contain 34%; }
  @keyframes svHubS{ from{ transform:translateX(-50%); opacity:1 }
    to{ transform:translateX(-50%) translateY(-60px) scale(.55); opacity:0 } }
  /* Kopfzeile und Statusanzeige an DIESELBE Zeitachse haengen. Vorher liefen
     sie ueber den JS-Zweig und schalteten zu einem anderen Zeitpunkt um -
     im Screenshot stand "Bilanz heute", waehrend die Bahnen noch da waren. */
  .sv-ttl-a{ animation:svWeg linear both; animation-timeline:--svc;
    animation-range:contain 30% contain 44%; }
  .sv-ttl-b{ animation:svHer linear both; animation-timeline:--svc;
    animation-range:contain 36% contain 50%; }
  .sv-live-a{ animation:svWeg linear both; animation-timeline:--svc;
    animation-range:contain 30% contain 44%; }
  .sv-live-b{ animation:svHer linear both; animation-timeline:--svc;
    animation-range:contain 36% contain 50%; }
  @keyframes svWeg{ from{ opacity:1; transform:translateY(0) }
    to{ opacity:0; transform:translateY(-6px) } }
  @keyframes svHer{ from{ opacity:0; transform:translateY(6px) }
    to{ opacity:1; transform:none } }
  @media (prefers-reduced-motion: reduce){
    .sv-oben,.sv-unten,.sv-kern,.sv-hub,.sv-naht{ animation:none !important; }
  }
}

/* ============ Ein Zaehler je Pfad ================================
   Vorher stand unter drei sichtbaren Pfaden EINE Summe - nicht zuordenbar. */
.sv-cnts{ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 12px;
  font-family:var(--font-mono); font-size:11px; }
.sv-cnts > em{ font-style:normal; color:#5E7086; letter-spacing:.08em;
  text-transform:uppercase; font-size:9.5px; }
.sv-cnt{ display:inline-flex; align-items:baseline; gap:5px;
  transition:color .25s var(--ez); }
.sv-cnt > i{ font-style:normal; color:#7F91A6; }
.sv-cnt > b{ font-size:14px; color:#fff; font-weight:700;
  font-variant-numeric:tabular-nums; }
.sv-cnt.bump > b{ animation:svBump .6s var(--ez) 1; }
@keyframes svBump{
  0%{ transform:none; color:#fff }
  26%{ transform:translateY(-3px) scale(1.14); color:var(--cy);
       text-shadow:0 0 14px rgba(44,230,245,.85) }
  100%{ transform:none; color:#fff } }

@media (max-width:900px){
  .sv-sum-r{ grid-template-columns:98px 1fr 34px; gap:9px; }
  .sv-sum-o{ display:none; }          /* Zielmarke faellt zuerst weg */
  .sv-sum-q{ font-size:10px; }
  .sv-sum-n{ font-size:13px; }
  .sv-cnts{ gap:3px 10px; font-size:10px; }
  .sv-cnt > b{ font-size:13px; }
}
@media (max-width:420px){
  .sv-cnts{ width:100%; }
  .sv-sum-r{ grid-template-columns:78px 1fr 30px; gap:7px; }
}
@media (prefers-reduced-motion: reduce){
  /* kein Umbau, keine Ueberblendung - die Bahnen bleiben stehen */
  .sv-stage, .sv-sum{ transition:none }
  .sv.is-b .sv-stage{ opacity:1 !important; transform:none !important;
    filter:none !important; pointer-events:auto !important }
  .sv.is-b .sv-sum{ opacity:0 !important; pointer-events:none !important }
  .sv-cnt.bump > b, .sv-sum-r.bump .sv-sum-n{ animation:none }
  .sv-sum-bar > i{ transition:none }
}

/* ============ Choreografie stillgelegt ============================
   Der Effekt lief, aber im Modul ist kein Platz dafuer: die Haelften
   reissen 140px auf und bis die Bilanz einsetzt klafft ein leerer Bereich.
   Das liest sich als kaputtes Layout statt als Uebergang. Ein Effekt dieser
   Groesse braucht eigenen Scrollraum - bis das entschieden ist, laeuft das
   Modul ruhig. Zum Reaktivieren: diesen Block loeschen. */
.sv-oben, .sv-unten, .sv-hub, .sv-kern, .sv-naht,
.sv-ttl-a, .sv-ttl-b, .sv-live-a, .sv-live-b{
  animation:none !important; transition:none !important; }
.sv-oben, .sv-unten{ transform:none !important; opacity:1 !important; }
.sv-hub{ transform:translateX(-50%) !important; opacity:1 !important; }
.sv-kern, .sv-naht{ display:none !important; }
.sv-ttl-a{ opacity:1 !important; transform:none !important; }
.sv-ttl-b{ opacity:0 !important; }
.sv-live-a{ opacity:1 !important; transform:none !important; }
.sv-live-b{ opacity:0 !important; }

/* ============ Scroll-Story in eigener Sektion =====================
   Eigener Scrollweg (260vh) mit festgehaltener Buehne. Als Geschwister der
   Hero-Sektion ist sie von deren overflow:hidden nicht betroffen - dort
   klebte nichts, und 148px Buehnenhoehe reichten fuer den Umbau nicht. */
.svx{ position:relative; background:
  radial-gradient(90% 60% at 50% 0%, rgba(17,131,227,.10), transparent 70%),
  linear-gradient(180deg, var(--ink-900,#060F1E), #081426 60%, var(--ink-900,#060F1E)); }
.svx-weg{ position:relative; height:185vh; view-timeline:--svx block; }
.svx-fest{ position:sticky; top:18vh; height:64vh; display:flex;
  flex-direction:column; align-items:center; justify-content:center; gap:34px;
  overflow:hidden; }
.svx-kopf{ text-align:center; padding:0 24px; }
.svx-kick{ display:block; font-family:var(--font-mono); font-size:11px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--cy); margin-bottom:12px; }
.svx-h{ font-size:clamp(26px,3.7vw,44px); margin:0; color:#fff; letter-spacing:-.02em; }
.svx-sub{ max-width:600px; margin:14px auto 0; font-size:15px; line-height:1.6;
  color:#9FB0C4; }

.svx-mod{ position:relative; width:min(1000px,94vw); perspective:1400px; }
.svx-lane, .svx-krow{ position:relative; height:72px; display:grid;
  grid-template-columns:148px minmax(0,1fr) 116px; align-items:center; gap:16px; }
.svx-q{ font-family:var(--font-mono); font-size:13px; color:#7F91A6;
  text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.svx-spur{ position:relative; height:2px; border-radius:2px; background:rgba(255,255,255,.09); }
.svx-spur::before{ content:""; position:absolute; inset:0; border-radius:2px;
  background:repeating-linear-gradient(90deg, rgba(44,230,245,.26) 0 6px, transparent 6px 14px); }
.svx-z{ font-family:var(--font-mono); font-size:13px; color:#4E5F75; white-space:nowrap; }
.svx-z2{ font-family:var(--font-mono); font-size:13px; color:var(--cy); white-space:nowrap; }
.svx-chip{ position:absolute; top:50%; left:0; display:inline-flex; align-items:center;
  gap:7px; white-space:nowrap; font-family:var(--font-mono); font-size:12.5px; color:#DDE7F2;
  padding:5px 10px; border-radius:9px;
  background:linear-gradient(180deg, rgba(20,44,76,.96), rgba(12,28,52,.96));
  border:1px solid rgba(44,230,245,.34);
  --svxweg:3.6;
  animation:svxFlug 5s linear infinite; animation-delay:calc(var(--i,0) * -1.6s); }
.svx-chip b{ color:var(--cy); }
@keyframes svxFlug{
  0%{ transform:translate(0,-50%); opacity:0 }
  8%{ opacity:1 } 92%{ opacity:1 }
  100%{ transform:translate(calc(100% * var(--svxweg,3.6)),-50%); opacity:0 } }

.svx-ki{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:140px; height:88px; border-radius:23px; z-index:4;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  background:linear-gradient(163deg, rgba(44,230,245,.16), rgba(9,20,38,.94) 62%);
  border:1px solid rgba(44,230,245,.42);
  box-shadow:0 0 0 8px rgba(6,16,34,.92), 0 16px 40px -14px rgba(0,0,0,.95); }
.svx-ki svg{ width:76px; height:45px; color:var(--cy); }
.svx-ki b{ font-family:var(--font-mono); font-size:10px; letter-spacing:.22em; color:var(--cy); }

.svx-naht{ position:absolute; left:-6%; right:-6%; top:50%; height:2px; z-index:5;
  background:linear-gradient(90deg, transparent, var(--cy), transparent);
  box-shadow:0 0 34px 8px rgba(44,230,245,.6); opacity:0; transform:scaleX(.12); }

.svx-kern{ position:absolute; left:0; right:0; top:50%; z-index:3;
  display:flex; flex-direction:column; gap:6px;
  opacity:0; transform:translateY(-50%) scale(.88); }
.svx-kern-h{ font-family:var(--font-mono); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:#5E7086; margin-bottom:4px; }
.svx-res{ position:relative; height:34px; border-radius:10px;
  background:rgba(255,255,255,.06); display:flex; align-items:center; }
.svx-res > i{ position:absolute; left:0; top:0; bottom:0; border-radius:8px;
  background:linear-gradient(90deg, rgba(17,131,227,.9), var(--cy));
  box-shadow:0 0 20px -3px rgba(44,230,245,.85); }
.svx-res > b{ position:relative; z-index:2; margin-left:15px;
  font-family:var(--font-mono); font-size:22px; font-weight:700; color:#fff;
  font-variant-numeric:tabular-nums; text-shadow:0 1px 8px rgba(6,16,34,.95); }
.svx-sum{ margin-top:10px; font-family:var(--font-mono); font-size:11px; color:#5E7086;
  text-align:center; }

@media (max-width:900px){
  .svx-weg{ height:165vh; }
  .svx-fest{ gap:24px; }
  .svx-lane, .svx-krow{ grid-template-columns:104px minmax(0,1fr) 80px;
    height:60px; gap:10px; }
  .svx-q, .svx-z, .svx-z2{ font-size:11px; }
  .svx-ki{ width:110px; height:70px; }
  .svx-ki svg{ width:60px; height:36px; }
  .svx-res > b{ font-size:18px; }
}
@media (max-width:520px){
  .svx-lane, .svx-krow{ grid-template-columns:84px minmax(0,1fr); gap:8px; }
  .svx-z, .svx-z2{ display:none; }
  .svx-chip{ font-size:9.5px; padding:4px 8px; }
}

/* ---- Der Umbau, am Scrollweg der Sektion ------------------------- */
@supports (animation-timeline: view()){
  .svx-oben{ animation:svxOben linear both; animation-timeline:--svx;
    animation-range:cover 34% cover 51%; }
  .svx-unten{ animation:svxUnten linear both; animation-timeline:--svx;
    animation-range:cover 34% cover 51%; }
  @keyframes svxOben{ from{ transform:none; opacity:1 }
    to{ transform:translateY(-150px) rotateX(26deg); opacity:0 } }
  @keyframes svxUnten{ from{ transform:none; opacity:1 }
    to{ transform:translateY(150px) rotateX(-26deg); opacity:0 } }
  .svx-ki{ animation:svxKi linear both; animation-timeline:--svx;
    animation-range:cover 34% cover 49%; }
  @keyframes svxKi{ from{ transform:translate(-50%,-50%) scale(1); opacity:1 }
    to{ transform:translate(-50%,-50%) scale(.4); opacity:0 } }
  .svx-naht{ animation:svxNaht linear both; animation-timeline:--svx;
    animation-range:cover 35% cover 56%; }
  @keyframes svxNaht{ 0%{ opacity:0; transform:scaleX(.12) }
    40%{ opacity:1; transform:scaleX(1) } 100%{ opacity:0; transform:scaleX(1) } }
  .svx-kern{ animation:svxKern linear both; animation-timeline:--svx;
    animation-range:cover 52% cover 68%; }
  @keyframes svxKern{ from{ opacity:0; transform:translateY(-50%) scale(.88) }
    to{ opacity:1; transform:translateY(-50%) scale(1) } }
}
/* Ohne scroll-getriebene Animationen: Bilanz einfach zeigen, nichts bewegt sich */
@supports not (animation-timeline: view()){
  .svx-weg{ height:auto; }
  .svx-fest{ position:static; height:auto; padding:80px 0; }
  .svx-kern{ position:static; opacity:1; transform:none; margin-top:26px; }
  .svx-naht{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .svx-chip{ animation:none !important; }
  .svx-oben,.svx-unten,.svx-ki,.svx-naht,.svx-kern{ animation:none !important; }
  .svx-kern{ opacity:0 !important; }
}

/* ============ LV wandert von der Mitte nach links ==================
   Das Blatt steht zuerst mittig ueber der vollen Breite und raeumt dann
   den Platz fuer die Ergebnisse. Der Weg wird in JS gemessen (axMessen),
   weil er von der Rasterbreite abhaengt. */
/* Ohne scroll-getriebene Animationen passiert GAR NICHTS: das Blatt steht an
   seinem Platz, die Ergebnisse sind sichtbar. Schlimmster Fall ist damit
   "kein Effekt" - nie "unsichtbarer Inhalt". */
@supports (animation-timeline: view()){
  @media (min-width:901px){
    .ax-doc-band{ view-timeline:--axt block; }
    /* Bereich RECHNERISCH bestimmt, nicht geschaetzt: das Band ist 170vh
       hoch, der Inhalt klebt bei top:120px. Der cover-Bereich umfasst
       innerHeight + Bandhoehe = 2,7 Bildschirmhoehen. Sichtbar festgehalten
       ist das Modul erst ab (1 - 0,12)/2,7 = 33% und bis (1 + 0,7)/2,7 = 63%.
       Die alten Werte 10-40% lagen fast komplett DAVOR - die Wanderung lief
       unterhalb des Bildrands ab und war oben schon vorbei. */
    .ax-paper{ will-change:transform;
      animation:axWander linear both; animation-timeline:--axt;
      animation-range:cover 35% cover 52%; }
    /* 71% der Blattbreite = Mitte des Rasters. Hergeleitet aus .85fr/1.15fr
       mit 40px Abstand; ueber Breiten von 900 bis 1600px schwankt der Wert
       nur zwischen 70,0% und 70,9%. Der gemessene Pixelwert hat Vorrang,
       ist aber nicht mehr noetig - vorher stand er auf 0 und nichts bewegte
       sich. */
    @keyframes axWander{
      from{ transform:translateX(var(--axweg,71%)) }
      to{   transform:none } }
    .ax-doc-grid > div:last-child{
      animation:axErgebnis linear both; animation-timeline:--axt;
      animation-range:cover 42% cover 58%; }
    @keyframes axErgebnis{ from{ opacity:0 } to{ opacity:1 } }
  }
}
@media (prefers-reduced-motion: reduce){
  .ax-paper{ animation:none !important; transform:none !important; }
  .ax-doc-grid > div:last-child{ animation:none !important; opacity:1 !important; }
}

/* ============ Altes Modul im Hero ausgeblendet =====================
   Die eigene Sektion darunter uebernimmt die Geschichte. Der Hero behaelt
   Ueberschrift, Buttons und die Kennzahlen-Kacheln. Rueckgaengig: diesen
   Block entfernen. */
.sv{ display:none !important; }

/* ============ Mobil-Korrekturen (gemessen bei 375px) ===============
   Der Chipweg steht in translateX-Prozent und bezieht sich damit auf die
   CHIPBREITE, nicht auf die Bahn. Auf schmalen Schirmen ist die Bahn kurz,
   der Chip fast gleich breit - gemessen flog er 32px ueber den Rand. */
@media (max-width:900px){
  .svx-chip{ --svxweg:2.0; }
  .svx-q{ font-size:11px; }
}
@media (max-width:520px){
  .svx-chip{ --svxweg:1.25; }
  .svx-q{ font-size:11px; }
  .svx-kick{ font-size:10px; }
  .svx-h{ font-size:clamp(20px,5.4vw,28px); }
  .svx-sub{ font-size:13.5px; margin-top:10px; }
  .svx-sum{ font-size:10px; }
}

/* Die ROI-Regler waren 10px hoch - fuer den Finger zu flach (Richtwert 24px).
   Polsterung vergroessert die Trefferflaeche, background-clip haelt die
   sichtbare Spur schmal. */
#ainx-landing input[type=range]{
  padding:9px 0; height:auto; background-clip:content-box; }

/* ============ Mobil: stabile Viewport-Hoehe =======================
   'vh' aendert sich auf dem Handy, sobald die Adressleiste ein- oder
   ausfaehrt. Bei festgehaltenen Sektionen aendert sich damit MITTEN IM
   SCROLLEN die Kastenhoehe, die Laenge des Scrollwegs und die Bezugsgroesse
   der Zeitachse - die Animation springt. 'svh' ist die kleine Viewport-Hoehe
   und bleibt konstant. */
@supports (height: 100svh){
  .svx-weg{ height:185svh; }
  .svx-fest{ top:18svh; height:64svh; }
  @media (max-width:900px){ .svx-weg{ height:165svh; } }
}

/* ============ Mobil: Rechenaufwand senken ========================= */
@media (max-width:900px){
  /* 3D kostet eine eigene Ebene und bringt bei kleiner Buehne kaum Wirkung.
     Ohne perspective bleibt die Bewegung, die Tiefe faellt weg. */
  .svx-mod{ perspective:none; }
  /* Grosse Weichzeichnungen sind teuer zu zeichnen */
  .svx-ki{ box-shadow:0 0 0 6px rgba(6,16,34,.92), 0 8px 18px -10px rgba(0,0,0,.9); }
  .svx-naht{ box-shadow:0 0 16px 3px rgba(44,230,245,.5); }
  .svx-res > i{ box-shadow:none; }
  /* Malbereich begrenzen: was ausserhalb liegt, muss nicht mitgezeichnet werden */
  .svx-fest{ contain:paint; }
}

/* Die endlos laufenden Chips pausieren, solange die Sektion nicht im Bild ist -
   sonst rechnet der Kompositor die ganze Seite lang mit.
   WICHTIG herum: laufen ist der Normalfall, pausiert wird nur auf
   ausdrueckliche Ansage. Andersherum waeren die Chips dauerhaft eingefroren,
   falls der Sichtbarkeits-Beobachter nicht feuert - schlimmster Fall ist so
   "laeuft immer", nie "steht fuer immer". */
.svx.ausserhalb .svx-chip{ animation-play-state:paused; }

/* ============ Mobil: Zeichenaufwand der Sektion senken ============
   Nur unter 900px - der Desktop bleibt unveraendert. */
@media (max-width:900px){
  /* 1. Verlaeufe nicht ueber 1790px Sektionshoehe, sondern nur auf der
        festgehaltenen Buehne. Der Malbereich ist dort ohnehin begrenzt. */
  .svx{ background:#060F1E; }
  .svx-fest{ background:
    radial-gradient(120% 70% at 50% 0%, rgba(17,131,227,.13), transparent 72%); }

  /* 2. Die bewegten Teile vorher ankuendigen, damit der Browser sie nicht
        erst beim ersten Frame auf eine eigene Ebene hebt. */
  .svx-oben, .svx-unten, .svx-kern, .svx-ki{ will-change:transform, opacity; }

  /* 3. Skalieren mit weichem Schein zwingt zum Neurastern - Linie ohne
        Schein reicht auf dem kleinen Schirm voellig. */
  .svx-naht{ box-shadow:none; }

  /* Der Kartenverlauf im Kern wird beim Einblenden mitskaliert - flach ist
     billiger und auf 375px kaum zu unterscheiden. */
  .svx-res{ background:rgba(255,255,255,.07); }
}

/* ============ Luecke zur naechsten Sektion ========================
   Gemessen waren 131px zwischen dem Ende der Sektion und der Ueberschrift
   "Vier Hebel ...", dazu der leere untere Teil der festgehaltenen Buehne.
   Zusammen ein leerer Block von rund 360px. */
.svx{ margin-bottom:-72px; }
@media (max-width:900px){ .svx{ margin-bottom:-48px; } }