/* ==== basis.css ==== */
/* =====================================================================
   YOUR SOLUTION · Stylesheet
   Kinematisch-editorial (Umbau 10.09.2026 nach der 21st.dev-Referenz):
   kühl getönte Neutrals, keine Akzentfarbe als Fläche, weiße Pillen als
   Knöpfe, Mono-Kicker mit Punkt, leichte große Überschriften mit grauem
   Nachsatz, Karten mit Stimmungsbild. Zwei Farbschemata (dunkel ist
   Grundzustand, hell folgt System oder Wahl). Bewegung nur über
   transform/opacity.
   ===================================================================== */

@font-face{font-family:"Geist";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/geist-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/geist-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/geist-mono-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/geist-mono-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- Paletten ---------- */
:root{
  --d-bg:#0a0b0e; --d-bg2:#101216; --d-bg3:#161920; --d-fg:#ededef; --d-fg2:#a3a7b0; --d-fg3:#7d828c;
  --d-linie:rgba(255,255,255,.08); --d-linie2:rgba(255,255,255,.17); --d-akzent:#9dbcff; --d-akzent-fuell:#ededef; --d-akzent-fg:#0a0b0e;
  --d-glas:rgba(10,11,14,.74); --d-schatten:0 1px 2px rgba(0,0,0,.5),0 30px 70px -24px rgba(0,0,0,.8);
  --h-bg:#eef0f3; --h-bg2:#ffffff; --h-bg3:#e2e5ea; --h-fg:#16181d; --h-fg2:#5b606b; --h-fg3:#6b707a;
  --h-linie:rgba(20,22,30,.09); --h-linie2:rgba(20,22,30,.18); --h-akzent:#1f5fd6; --h-akzent-fuell:#16181d; --h-akzent-fg:#ffffff;
  --h-glas:rgba(238,240,243,.78); --h-schatten:0 1px 2px rgba(20,22,30,.06),0 30px 70px -28px rgba(20,22,30,.3);

  --ease-out:cubic-bezier(.23,1,.32,1); --ease-io:cubic-bezier(.77,0,.175,1); --ease-ios:cubic-bezier(.32,.72,0,1);
  --font:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --wrap:1180px; --kopf-h:56px; --radius:14px; --radius-s:10px;
  --sek:clamp(5rem,11vw,9.5rem);
}
/* Dunkel ist Grundzustand */
:root{color-scheme:dark;
  --bg:var(--d-bg);--bg2:var(--d-bg2);--bg3:var(--d-bg3);--fg:var(--d-fg);--fg2:var(--d-fg2);--fg3:var(--d-fg3);
  --linie:var(--d-linie);--linie2:var(--d-linie2);--akzent:var(--d-akzent);--akzent-fuell:var(--d-akzent-fuell);--akzent-fg:var(--d-akzent-fg);--glas:var(--d-glas);--schatten:var(--d-schatten)}
/* Hell: ausdrücklich gewählt */
:root[data-schema="hell"]{color-scheme:light;
  --bg:var(--h-bg);--bg2:var(--h-bg2);--bg3:var(--h-bg3);--fg:var(--h-fg);--fg2:var(--h-fg2);--fg3:var(--h-fg3);
  --linie:var(--h-linie);--linie2:var(--h-linie2);--akzent:var(--h-akzent);--akzent-fuell:var(--h-akzent-fuell);--akzent-fg:var(--h-akzent-fg);--glas:var(--h-glas);--schatten:var(--h-schatten)}
/* Hell: vom System, solange nicht ausdrücklich dunkel gewählt */
@media (prefers-color-scheme:light){
  :root:not([data-schema="dunkel"]){color-scheme:light;
    --bg:var(--h-bg);--bg2:var(--h-bg2);--bg3:var(--h-bg3);--fg:var(--h-fg);--fg2:var(--h-fg2);--fg3:var(--h-fg3);
    --linie:var(--h-linie);--linie2:var(--h-linie2);--akzent:var(--h-akzent);--akzent-fuell:var(--h-akzent-fuell);--akzent-fg:var(--h-akzent-fg);--glas:var(--h-glas);--schatten:var(--h-schatten)}
}

/* ---------- Grundgerüst ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--kopf-h) + 1rem)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);font-size:1.0625rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"ss01","cv11";overflow-x:clip}
img,svg,video,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
/* Leichte Gewichte, enge Laufweite; der graue Nachsatz (em) ist das Erkennungszeichen der Referenz */
h1,h2,h3,h4{margin:0;font-weight:450;letter-spacing:-.03em;line-height:1.08;text-wrap:balance;hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:10 4 4}
h1{font-size:clamp(2.5rem,5.6vw,4.9rem);letter-spacing:-.035em;line-height:1.02;hyphenate-limit-chars:8 4 4}
h2{font-size:clamp(1.9rem,3.8vw,3.15rem);letter-spacing:-.03em;line-height:1.1}
h3{font-size:clamp(1.25rem,2vw,1.6rem);letter-spacing:-.02em;line-height:1.2;font-weight:500}
h1 em,h2 em,h3 em,.worte em{font-style:normal;color:var(--fg3)}
h1 em{color:var(--fg2)}
p{margin:0}
.lead{font-size:clamp(1.08rem,1.5vw,1.25rem);line-height:1.5;letter-spacing:-.01em;color:var(--fg2);text-wrap:pretty;max-width:44ch}
/* Kicker: Mono, kleiner Punkt davor, keine Versalien, grau statt Akzent */
.kick{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--mono);font-size:.76rem;letter-spacing:.01em;color:var(--fg2);margin-bottom:1.2rem}
.kick::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.8}
.mono{font-family:var(--mono)}
.wrap{width:min(var(--wrap),100% - 2.5rem);margin-inline:auto}
.wrap--schmal{width:min(760px,100% - 2.5rem);margin-inline:auto}
.wrap--breit{width:min(1400px,100% - 2.5rem);margin-inline:auto}
.skip{position:absolute;left:-999px;top:0;background:var(--fg);color:var(--bg);padding:.6rem 1rem;z-index:100;border-radius:0 0 12px 0}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--akzent);outline-offset:3px;border-radius:6px}
::selection{background:var(--fg);color:var(--bg)}
main{position:relative;z-index:1}

/* ---------- Sektionen ---------- */
/* Sektionen sind durchsichtig, die Atmosphäre liegt dahinter und wird mit dem Scrollen ruhig.
   Die frühere Hell/Dunkel-Umkehr ist abgeschafft: die Referenz bleibt durchgehend in einem
   Ton, sek--invers ist nur noch ein leicht abgesetztes Band. */
.sek{position:relative;padding-block:var(--sek);background:transparent;color:var(--fg)}
.sek--invers{background:color-mix(in srgb,var(--bg2) 55%,transparent);border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.sek--invers+.sek--invers{border-top:0}
.sek--durchsichtig{background:transparent}
.sek--eng{padding-block:calc(var(--sek) * .6)}
.sek--rand{border-top:1px solid var(--linie)}
.sek__kopf{max-width:720px;margin-bottom:clamp(2.5rem,6vw,4.5rem)}
.sek__kopf .lead{margin-top:1.1rem}
.sek__kopf--mitte{margin-inline:auto;text-align:center}
.sek__kopf--mitte .lead{margin-inline:auto}
/* Kopfzeile mit Kicker links und Überschrift rechts, wie die Abschnittsköpfe der Referenz */
.sek__zeile{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:1.5rem 3rem;align-items:start;margin-bottom:clamp(2.5rem,6vw,4.5rem)}
.sek__zeile .kick{margin:0;padding-top:.5rem}
.sek__zeile .lead{margin-top:1rem}
@media (max-width:820px){.sek__zeile{grid-template-columns:1fr;gap:.6rem}}

/* ---------- Knöpfe (Mono, Versalien, Pille) ---------- */
.knopf{--h:46px;display:inline-flex;align-items:center;gap:.6rem;height:var(--h);padding:0 1.35rem;border-radius:999px;font-family:var(--mono);font-weight:500;font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;cursor:pointer;
  transition:transform 160ms var(--ease-out),background-color 200ms ease,border-color 200ms ease,color 200ms ease,box-shadow 200ms ease}
.knopf:active{transform:scale(.97)}
.knopf svg{width:15px;height:15px;flex:none}
.knopf--voll{background:var(--fg);color:var(--bg)}
.knopf--fg{background:var(--fg);color:var(--bg)}
.knopf--leise{border:1px solid var(--linie2);color:var(--fg);background:transparent}
.knopf--klein{--h:36px;padding:0 1rem;font-size:.7rem}
.knopf--gross{--h:52px;padding:0 1.6rem;font-size:.8rem}
@media (hover:hover) and (pointer:fine){
  .knopf--voll:hover,.knopf--fg:hover{box-shadow:0 10px 30px -10px color-mix(in srgb,var(--fg) 45%,transparent)}
  .knopf--leise:hover{border-color:var(--fg);background:color-mix(in srgb,var(--fg) 6%,transparent)}
}
.textlink{display:inline-flex;align-items:center;gap:.45rem;color:var(--fg);font-family:var(--mono);font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;font-weight:500}
.textlink svg{width:14px;height:14px;transition:transform 200ms var(--ease-out)}
@media (hover:hover){.textlink:hover svg{transform:translateX(3px)}}
.aktionen{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}

/* ---------- Kopf ---------- */
.kopf{position:fixed;inset:0 0 auto 0;height:var(--kopf-h);z-index:50;view-transition-name:kopf;
  background:transparent;color:var(--fg);border-bottom:1px solid transparent;transition:border-color 300ms ease,background-color 300ms ease}
.kopf.ist-fest{background:var(--glas);backdrop-filter:saturate(160%) blur(18px);-webkit-backdrop-filter:saturate(160%) blur(18px);border-bottom-color:var(--linie)}
.kopf__innen{height:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.marke{display:inline-flex;align-items:center;gap:.55rem;font-weight:500;letter-spacing:-.02em;font-size:1rem}
.marke__zeichen{width:20px;height:20px;flex:none}
.hauptnav{display:flex;align-items:center;gap:1.6rem}
.hauptnav a{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fg2);transition:color 160ms ease}
.hauptnav a[aria-current="page"],.hauptnav a:hover{color:var(--fg)}
.kopf__rechts{display:flex;align-items:center;gap:.6rem}
.schema{width:36px;height:36px;border-radius:999px;display:grid;place-items:center;border:1px solid var(--linie2);transition:background-color 160ms ease}
.schema svg{width:17px;height:17px;display:none}
.schema[data-zustand="auto"] .ico-auto,.schema[data-zustand="hell"] .ico-hell,.schema[data-zustand="dunkel"] .ico-dunkel{display:block}
@media (hover:hover){.schema:hover{background:color-mix(in srgb,currentColor 8%,transparent)}}
.burger{display:none;width:40px;height:40px;place-items:center;border-radius:999px}
.burger svg{width:22px;height:22px}
@media (max-width:860px){
  .hauptnav,.kopf .knopf{display:none}
  .burger{display:grid}
}
/* Mobil-Blatt */
.blatt{position:fixed;inset:0;z-index:60;background:var(--bg);color:var(--fg);display:none;flex-direction:column;padding:calc(var(--kopf-h) + 1.5rem) 1.5rem 2rem;
  opacity:0;transform:translateY(-8px);transition:opacity 260ms var(--ease-out),transform 320ms var(--ease-out)}
.blatt.ist-da{display:flex}.blatt.ist-offen{opacity:1;transform:none}
.blatt a:not(.knopf){font-size:clamp(1.9rem,8vw,2.6rem);font-weight:450;letter-spacing:-.035em;padding:.35rem 0;border-bottom:1px solid var(--linie)}
.blatt .knopf{margin-top:1.75rem;align-self:stretch;justify-content:center;--h:56px;padding:0 1.5rem;font-size:.8rem;border:0}
.blatt__x{position:absolute;top:8px;right:1rem;width:40px;height:40px;display:grid;place-items:center;border-radius:999px}
.blatt__x svg{width:22px;height:22px}
.blatt__meta{margin-top:auto;padding-top:1.5rem;color:var(--fg2);font-size:.8rem;font-family:var(--mono);hyphens:manual;overflow-wrap:anywhere}
body.ist-gesperrt{overflow:hidden}

/* ---------- Hintergrund: Atmosphäre und 3D ---------- */
#bg3d{position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--bg)}
#bg3d canvas{width:100%;height:100%}
/* Ohne WebGL oder im Datensparmodus: gerendertes Standbild derselben Kulisse */
.no-webgl #bg3d{background:var(--bg) url("../img/atmo-kopf.webp") center top/cover no-repeat}
.no-webgl #bg3d::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,transparent 40vh,var(--bg) 100vh)}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100svh;display:grid;align-content:end;padding:calc(var(--kopf-h) + 4rem) 0 clamp(2.5rem,7vh,4.5rem);background:transparent;color:var(--fg)}
.hero__c{position:relative;max-width:640px}
.hero h1{margin-bottom:1.1rem}
.hero .lead{max-width:46ch}
.hero .aktionen{margin-top:1.8rem}
/* Unterer Rand: Namen der Kunden, wie die Namensleiste der Referenz */
.hero__namen{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.6rem;margin-top:clamp(2.5rem,7vh,4rem);padding-top:1.2rem;border-top:1px solid var(--linie);font-family:var(--mono);font-size:.72rem;letter-spacing:.02em;color:var(--fg3)}
.hero__namen b{font-weight:500;color:var(--fg2)}
.hero__namen span{display:inline-flex;align-items:center;gap:1.6rem}
.hero__namen span::before{content:"";width:1px;height:12px;background:var(--linie2)}
.hero__namen span:first-of-type::before{display:none}
/* Lesbarkeit: unten links legt sich die Seitenfarbe unter den Text; die Kulisse bleibt rechts
   oben offen, dort steht die Form. Auf dem Handy liegt das 3D oben, deshalb der Verlauf von unten. */
.hero__vignette{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to top,color-mix(in srgb,var(--bg) 96%,transparent) 0%,color-mix(in srgb,var(--bg) 70%,transparent) 30%,transparent 62%),
             linear-gradient(to right,color-mix(in srgb,var(--bg) 60%,transparent) 0%,transparent 55%)}
/* Handy: der Kopf ist höher als das Fenster, das 3D steht ganz oben; darunter deckt die Seitenfarbe den Text */
@media (max-width:820px){.hero__vignette{background:linear-gradient(to top,var(--bg) 0%,var(--bg) 42%,color-mix(in srgb,var(--bg) 80%,transparent) 64%,color-mix(in srgb,var(--bg) 35%,transparent) 80%,transparent 94%)}}
/* Handy: der Text beginnt tiefer, damit oben eine Bühne für die Formen frei bleibt (10.09.2026) */
@media (max-width:640px){.hero--3d{padding-top:calc(var(--kopf-h) + 11.5rem)}}
.hero--klein{min-height:0;padding-top:calc(var(--kopf-h) + clamp(5rem,12vw,9rem));padding-bottom:clamp(2.5rem,6vw,4rem)}
.hero--klein::before,.fall-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to top,color-mix(in srgb,var(--bg) 92%,transparent) 0%,color-mix(in srgb,var(--bg) 55%,transparent) 50%,transparent 100%),
             linear-gradient(to right,color-mix(in srgb,var(--bg) 70%,transparent) 0%,transparent 60%)}
@media (max-width:820px){.hero--klein{padding-top:calc(var(--kopf-h) + 9.5rem)}.fall-hero{padding-top:calc(var(--kopf-h) + 9.5rem)}.hero--klein::before,.fall-hero::before{background:linear-gradient(to top,var(--bg) 0%,color-mix(in srgb,var(--bg) 85%,transparent) 60%,color-mix(in srgb,var(--bg) 40%,transparent) 85%,transparent 100%)}}
.hero--klein h1{font-size:clamp(2.3rem,5vw,4.2rem);max-width:16ch}
.fall-hero h1{max-width:17ch}
.hero--klein .lead,.fall-hero .lead{max-width:50ch}
.hero--klein .lead{margin-top:1.25rem}
.scrollhinweis{position:absolute;right:0;bottom:1.25rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg3);display:flex;align-items:center;gap:.5rem}
.scrollhinweis i{display:block;width:1px;height:36px;background:currentColor;transform-origin:top;animation:scrollzeig 1.8s var(--ease-io) infinite}
@keyframes scrollzeig{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (prefers-reduced-motion:reduce){.scrollhinweis i{animation:none}}
@media (max-width:640px){.hero--3d .scrollhinweis{display:none}.hero--3d{padding-bottom:2.5rem}.hero .lead{font-size:1rem}.hero__namen{gap:.5rem 1rem;font-size:.68rem}.hero__namen span{gap:1rem}}

/* ---------- Reveal ---------- */
.has-motion [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity 700ms var(--ease-out),transform 900ms var(--ease-out)}
.has-motion [data-reveal].in{opacity:1;transform:none}

/* ---------- Gepinnte Bühnen (Scroll-Scrub) ---------- */
.pin{position:relative;height:calc(var(--laenge,3) * 100vh);--p:0}
.pin__buehne{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr);align-items:center}
.pin--kurz{--laenge:2.2}
.no-motion .pin{height:auto}
.no-motion .pin__buehne{position:relative;height:auto;padding-block:var(--sek)}

/* Wort für Wort */
.worte{font-size:clamp(1.8rem,4.2vw,3.5rem);font-weight:450;letter-spacing:-.03em;line-height:1.15;max-width:1000px;text-wrap:pretty}
.worte span{display:inline;opacity:clamp(.2,calc(var(--p) * var(--n) - var(--i)),1);transition:opacity 80ms linear}
.worte span.ist-akzent{color:var(--fg3)}
.no-motion .worte span{opacity:1}
@media (max-width:640px){.pin[data-effekt="worte"] .pin__buehne{align-items:end;padding-bottom:14vh}}

/* Kartenstapel (Referenzen auf der Startseite) */
.stapel{position:relative;width:min(var(--wrap),100% - 2.5rem);margin-inline:auto;height:min(72vh,720px);display:grid}
.stapel__karte{grid-area:1/1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center;will-change:transform,opacity}
.stapel__karte .geraet{box-shadow:var(--schatten)}
.stapel__text{max-width:38ch}
.stapel__text .kick{margin-bottom:.8rem}
.stapel__text h3{font-size:clamp(1.6rem,3.2vw,2.6rem);margin-bottom:.9rem;font-weight:450;letter-spacing:-.03em}
.stapel__text p{color:var(--fg2);font-size:1rem}
.stapel__text .textlink{margin-top:1.2rem}
.stapel__zaehler{position:absolute;right:0;top:0;font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;color:var(--fg3)}
/* Reiter über dem Stapel: zeigen die Karte an und springen beim Klick dorthin (Referenz: Reiterzeile über den Anwendungsfällen) */
.stapel__reiter{position:absolute;left:0;top:0;display:flex;gap:.2rem;max-width:calc(100% - 120px);overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--linie)}
.stapel__reiter::-webkit-scrollbar{display:none}
.stapel__reiter button{font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;color:var(--fg3);padding:.5rem .8rem .7rem;white-space:nowrap;border-bottom:1px solid transparent;margin-bottom:-1px;transition:color 160ms ease,border-color 160ms ease}
.stapel__reiter button[aria-selected="true"]{color:var(--fg);border-bottom-color:var(--fg)}
@media (hover:hover){.stapel__reiter button:hover{color:var(--fg)}}
.stapel__punkte{position:absolute;left:0;bottom:-2.5rem;display:flex;gap:.45rem}
.stapel__punkte i{display:block;width:26px;height:2px;border-radius:2px;background:var(--linie2);transform-origin:left;overflow:hidden;position:relative}
.stapel__punkte i::after{content:"";position:absolute;inset:0;background:var(--fg);transform:scaleX(var(--f,0));transform-origin:left}
.no-motion .stapel{height:auto;display:grid;gap:3rem}
.no-motion .stapel__karte{grid-area:auto;transform:none!important;opacity:1!important}
.no-motion .stapel__punkte,.no-motion .stapel__zaehler,.no-motion .stapel__reiter{display:none}
@media (max-width:820px){
  .stapel{height:min(78vh,700px)}
  .stapel__karte{grid-template-columns:1fr;gap:1.2rem;align-content:center}
  .stapel__text h3{font-size:1.5rem}
  .stapel__text p{font-size:.98rem}
  .stapel__zaehler{display:none}
  .stapel__reiter{max-width:100%}
}

/* Horizontale Schiene (Vorgehen) */
.schiene{display:flex;gap:1rem;padding-inline:max(1.25rem,(100vw - var(--wrap)) / 2);will-change:transform}
.schiene__karte{flex:0 0 clamp(260px,28vw,360px);aspect-ratio:1/1.08;border-radius:var(--radius);background:var(--bg2);border:1px solid var(--linie);padding:1.5rem;display:flex;flex-direction:column;justify-content:space-between}
.schiene__karte b{font-family:var(--mono);font-weight:500;font-size:.74rem;letter-spacing:.04em;color:var(--fg3)}
.schiene__karte h3{font-size:clamp(1.3rem,1.9vw,1.6rem);margin:.4rem 0 .5rem}
.schiene__karte p{color:var(--fg2);font-size:.96rem}
.schiene__karte svg{width:30px;height:30px;color:var(--fg2)}
.no-motion .schiene{overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:1rem}
.no-motion .schiene__karte{scroll-snap-align:start}

/* ---------- Karten mit Stimmungsbild (Lösungen) ---------- */
.karten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.karte{position:relative;display:flex;flex-direction:column;border-radius:var(--radius);overflow:hidden;background:var(--bg2);border:1px solid var(--linie);isolation:isolate;
  transition:border-color 220ms ease,box-shadow 300ms var(--ease-out),transform 400ms var(--ease-out)}
.karte__bild{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--bg3)}
.karte__bild>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 900ms var(--ease-out)}
.karte__bild .geraet{position:absolute;left:10%;right:-6%;bottom:-16%;border-radius:10px;box-shadow:0 30px 60px -20px rgba(0,0,0,.9);transition:transform 600ms var(--ease-out)}
.karte__bild .geraet img{aspect-ratio:1400/875}
.karte__bild::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--bg2) 0%,transparent 45%);pointer-events:none}
.karte__text{padding:1.3rem 1.4rem 1.5rem;display:grid;gap:.5rem}
.karte__text h3{font-family:var(--mono);font-weight:500;font-size:.98rem;letter-spacing:0;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.karte__text h3 svg{width:16px;height:16px;flex:none;color:var(--fg3);transition:transform 220ms var(--ease-out),color 200ms ease}
.karte__text p{color:var(--fg2);font-size:.95rem;max-width:40ch}
@media (hover:hover) and (pointer:fine){
  .karte:hover{border-color:var(--linie2);box-shadow:var(--schatten)}
  .karte:hover .karte__bild>img{transform:scale(1.04)}
  .karte:hover .karte__bild .geraet{transform:translateY(-8px)}
  .karte:hover h3 svg{transform:translate(2px,-2px);color:var(--fg)}
}
@media (max-width:900px){.karten{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.karten{grid-template-columns:1fr}}
/* Die übrigen Bereiche als ruhige Zeilen unter den drei Karten */
.zeilen--kompakt{margin-top:1rem;border-top:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;border:0}
/* Pfeilspalte fest: mit auto quetschte das Raster den Pfeil auf 0 bis 8 px (gemessen 10.09.2026) */
.zeilen--kompakt .zeile{grid-template-columns:auto minmax(0,1fr) 18px;padding:1.1rem 1.2rem;border:1px solid var(--linie);border-radius:var(--radius);background:var(--bg2);gap:.9rem}
.zeilen--kompakt .zeile h3{font-family:var(--mono);font-weight:500;font-size:.92rem;letter-spacing:0;margin:0}
.zeilen--kompakt .zeile p{font-size:.86rem}
@media (max-width:900px){.zeilen--kompakt{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.zeilen--kompakt{grid-template-columns:1fr}}

/* ---------- Bento (Lösungsseite) ---------- */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:.9rem}
.kachel{position:relative;grid-column:span 4;min-height:280px;border-radius:var(--radius);background:var(--bg2);border:1px solid var(--linie);padding:1.6rem;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;isolation:isolate;
  transition:border-color 220ms ease,box-shadow 300ms var(--ease-out)}
.kachel--gross{grid-column:span 8;min-height:420px}
.kachel--hoch{grid-row:span 2}
.kachel--halb{grid-column:span 6}
.kachel--akzent{background:var(--fg);color:var(--bg);border-color:transparent}
.kachel--akzent .kachel__nr,.kachel--akzent p{color:color-mix(in srgb,var(--bg) 70%,var(--fg))}
.kachel h3{font-size:clamp(1.25rem,1.8vw,1.6rem);margin-bottom:.45rem}
.kachel--gross h3{font-size:clamp(1.7rem,2.8vw,2.5rem);font-weight:450}
.kachel p{color:var(--fg2);font-size:.98rem;max-width:36ch}
.kachel__nr{font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;color:var(--fg3)}
.kachel__pfeil{position:absolute;right:1.2rem;top:1.2rem;width:34px;height:34px;border-radius:999px;border:1px solid var(--linie2);display:grid;place-items:center;transition:transform 220ms var(--ease-out),background-color 200ms ease}
.kachel__pfeil svg{width:16px;height:16px}
.kachel__bild{position:absolute;right:-6%;bottom:-8%;width:62%;border-radius:12px 0 0 0;overflow:hidden;box-shadow:var(--schatten);transition:transform 600ms var(--ease-out);z-index:-1;opacity:.92}
.kachel--gross .kachel__bild{width:54%;right:-2%;bottom:-14%}
.kachel__bild img{width:100%;height:auto}
.kachel__ico{width:36px;height:36px;color:var(--fg2);margin-bottom:auto}
.kachel--akzent .kachel__ico{color:inherit}
@media (hover:hover) and (pointer:fine){
  .kachel:hover{border-color:var(--linie2);box-shadow:var(--schatten)}
  .kachel:hover .kachel__pfeil{transform:translate(2px,-2px);background:var(--fg);color:var(--bg);border-color:var(--fg)}
  .kachel--akzent:hover .kachel__pfeil{background:var(--bg);color:var(--fg)}
  .kachel:hover .kachel__bild{transform:translate(-8px,-8px)}
}
@media (max-width:980px){.kachel,.kachel--gross,.kachel--halb{grid-column:span 6}.kachel--gross{min-height:380px}}
@media (max-width:640px){.kachel,.kachel--gross,.kachel--halb{grid-column:span 12;min-height:240px}
  .kachel__bild,.kachel--gross .kachel__bild{position:relative;right:auto;bottom:auto;width:100%;margin-top:1.25rem;z-index:auto;opacity:1;border-radius:12px;transform:none}
  .kachel:hover .kachel__bild{transform:none}}

/* ---------- Geräte-Rahmen ---------- */
.geraet{border-radius:12px;background:var(--bg3);border:1px solid var(--linie);overflow:hidden;box-shadow:var(--schatten)}
.geraet__leiste{height:26px;display:flex;align-items:center;gap:6px;padding:0 12px;border-bottom:1px solid var(--linie);background:var(--bg2)}
.geraet__leiste i{width:8px;height:8px;border-radius:50%;background:var(--linie2)}
.geraet__leiste span{margin-left:auto;margin-right:auto;font-family:var(--mono);font-size:.64rem;color:var(--fg3);letter-spacing:.02em}
.geraet img{width:100%;height:auto;aspect-ratio:1400/875;object-fit:cover;object-position:top}
.handy{width:min(190px,42%);border-radius:24px;border:1px solid var(--linie2);background:var(--bg3);padding:6px;box-shadow:var(--schatten)}
.handy img{width:100%;height:auto;aspect-ratio:560/1214;object-fit:cover;object-position:top;border-radius:18px}

/* ---------- Zahlenband ---------- */
.zahlen{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;border-top:1px solid var(--linie);padding-top:2rem}
.zahl{display:flex;flex-direction:column;gap:.5rem}
.zahl b{font-size:clamp(2.4rem,5.5vw,4.6rem);font-weight:300;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.zahl b small{font-size:.5em;color:var(--fg2);font-weight:400;letter-spacing:-.02em;margin-left:.15em}
.zahl span{color:var(--fg2);font-size:.92rem;font-family:var(--mono);letter-spacing:.01em}
@media (max-width:760px){.zahlen{grid-template-columns:1fr 1fr;gap:2rem 1rem}}

/* ---------- Zweispalter / Prinzipien ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,6vw,6rem);align-items:center}
.split--umgekehrt>:first-child{order:2}
.split h2{margin-bottom:1rem}
.split .lead{margin-bottom:1.5rem}
.split ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.split li{display:flex;gap:.8rem;align-items:flex-start;color:var(--fg2);font-size:1rem}
.split li::before{content:"";flex:none;width:16px;height:16px;margin-top:.3rem;background-color:var(--fg);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/16px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/16px no-repeat}
@media (max-width:820px){.split{grid-template-columns:1fr}.split--umgekehrt>:first-child{order:0}}

.prinzipien{display:grid;gap:0}
.prinzip{display:grid;grid-template-columns:120px minmax(0,1fr);gap:1.5rem;padding:2.5rem 0;border-top:1px solid var(--linie);align-items:start}
.prinzip:last-child{border-bottom:1px solid var(--linie)}
.prinzip__nr{font-size:clamp(2.4rem,5.5vw,4rem);font-weight:300;letter-spacing:-.05em;line-height:.9;color:var(--fg3);font-variant-numeric:tabular-nums}
.prinzip h3{margin-bottom:.6rem}
.prinzip p{color:var(--fg2);max-width:62ch}
@media (max-width:640px){.prinzip{grid-template-columns:1fr;gap:.6rem}}

/* ---------- Zeilenliste ---------- */
.zeilen{display:grid;border-top:1px solid var(--linie)}
.zeile{display:grid;grid-template-columns:70px minmax(0,1fr) auto;gap:1.5rem;align-items:center;padding:1.4rem 0;border-bottom:1px solid var(--linie);transition:background-color 200ms ease,border-color 200ms ease}
.zeile__nr{font-family:var(--mono);font-size:.74rem;color:var(--fg3);letter-spacing:.04em}
.zeile h3{font-size:1.2rem;margin-bottom:.15rem}
.zeile p{color:var(--fg2);font-size:.96rem;max-width:64ch}
.zeile svg{width:18px;min-width:18px;height:18px;color:var(--fg3);transition:transform 200ms var(--ease-out),color 200ms ease}
@media (hover:hover) and (pointer:fine){a.zeile:hover svg{transform:translateX(4px);color:var(--fg)}a.zeile:hover{border-color:var(--linie2)}}
@media (max-width:600px){.zeile{grid-template-columns:1fr auto;gap:.5rem 1rem}.zeile__nr{grid-column:1/-1}}

/* ---------- Reiter-Explorer (Lösungen) ---------- */
.explorer{display:grid;grid-template-columns:280px minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem);align-items:start}
.reiter{position:sticky;top:calc(var(--kopf-h) + 1.5rem);display:flex;flex-direction:column;gap:.15rem;border-left:1px solid var(--linie)}
.reiter button{text-align:left;padding:.7rem 1rem;margin-left:-1px;border-left:1px solid transparent;color:var(--fg2);font-weight:450;font-size:1rem;transition:color 160ms ease,border-color 160ms ease}
.reiter button[aria-selected="true"]{color:var(--fg);border-left-color:var(--fg)}
@media (hover:hover){.reiter button:hover{color:var(--fg)}}
.reiter small{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;color:var(--fg3);margin-bottom:.2rem}
.panel{display:none}
.panel.ist-aktiv{display:block;animation:panel-ein 320ms var(--ease-out)}
@keyframes panel-ein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.panel.ist-aktiv{animation:none}}
.panel h2{font-size:clamp(1.8rem,3.4vw,2.8rem);margin-bottom:1rem}
.panel .lead{margin-bottom:2rem}
.panel__raster{display:grid;grid-template-columns:1fr 1fr;gap:2rem 3rem;margin-top:2rem}
.panel__raster h3{font-family:var(--mono);font-weight:500;font-size:.74rem;letter-spacing:.04em;text-transform:none;color:var(--fg3);margin-bottom:.8rem}
.panel__raster ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.panel__raster li{padding-left:1.1rem;position:relative;color:var(--fg2);font-size:.98rem}
.panel__raster li::before{content:"";position:absolute;left:0;top:.65em;width:5px;height:5px;border-radius:50%;background:var(--fg3)}
.panel__beispiele{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem}
.chip{display:inline-flex;align-items:center;gap:.4rem;height:34px;padding:0 .9rem;border-radius:999px;border:1px solid var(--linie2);font-family:var(--mono);font-size:.74rem;letter-spacing:.02em;color:var(--fg);transition:background-color 160ms ease,border-color 160ms ease,color 160ms ease}
a.chip:hover{border-color:var(--fg)}
.chip--an,.chip[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.panel__geraet{margin-top:2.5rem}
@media (max-width:860px){
  .explorer{grid-template-columns:1fr}
  .reiter{position:static;flex-direction:row;overflow-x:auto;border-left:0;border-bottom:1px solid var(--linie);gap:0;scrollbar-width:none;margin-inline:-1.25rem;padding-inline:1.25rem}
  .reiter::-webkit-scrollbar{display:none}
  .reiter small{display:none}
  .reiter button{white-space:nowrap;border-left:0;border-bottom:1px solid transparent;margin:0 0 -1px}
  .reiter button[aria-selected="true"]{border-bottom-color:var(--fg)}
  .panel__raster{grid-template-columns:1fr}
}

/* ---------- Katalog (Alles ist möglich) ---------- */
.katalog{columns:3;column-gap:2.5rem}
.katalog__gruppe{break-inside:avoid;margin-bottom:2rem}
.katalog__gruppe h3{font-size:.8rem;font-family:var(--mono);font-weight:500;letter-spacing:.04em;text-transform:none;color:var(--fg3);margin-bottom:.7rem}
.katalog__gruppe ul{list-style:none;margin:0;padding:0}
.katalog__gruppe li{padding:.45rem 0;border-top:1px solid var(--linie);font-size:1rem}
@media (max-width:900px){.katalog{columns:2}}
@media (max-width:560px){.katalog{columns:1}}

/* ---------- Modelle ---------- */
.modelle{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;align-items:stretch}
.modell{border-radius:var(--radius);border:1px solid var(--linie);background:var(--bg2);padding:2rem;display:flex;flex-direction:column;gap:1rem}
.modell--haupt{background:var(--fg);color:var(--bg);border-color:transparent;transform:translateY(-10px)}
.modell--haupt .modell__ab,.modell--haupt li,.modell--haupt p{color:color-mix(in srgb,var(--bg) 70%,var(--fg))}
.modell h3{font-size:1.4rem}
.modell p{color:var(--fg2);font-size:.98rem}
.modell__ab{font-family:var(--mono);font-size:.8rem;letter-spacing:.02em;color:var(--fg3)}
.modell ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem;flex:1}
.modell li{color:var(--fg2);font-size:.95rem;padding-left:1rem;position:relative}
.modell li::before{content:"";position:absolute;left:0;top:.7em;width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.6}
.modell .knopf{align-self:flex-start;margin-top:.5rem}
.modell--haupt .knopf{background:var(--bg);color:var(--fg)}
@media (max-width:900px){.modelle{grid-template-columns:1fr}.modell--haupt{transform:none}}

/* ---------- Referenzen (Arbeiten) ---------- */
.filter{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2.5rem}
.arbeiten{display:grid;grid-template-columns:repeat(12,1fr);gap:1rem}
.arbeit{grid-column:span 6;border-radius:var(--radius);border:1px solid var(--linie);background:var(--bg2);overflow:hidden;display:flex;flex-direction:column;transition:border-color 220ms ease,box-shadow 300ms var(--ease-out),opacity 300ms ease,transform 400ms var(--ease-out)}
.arbeit--breit{grid-column:span 12}
.arbeit.ist-weg{display:none}
.arbeit__buehne{position:relative;padding:clamp(1.2rem,3vw,2.5rem) clamp(1.2rem,3vw,2.5rem) 0;background:var(--bg3);display:grid}
.arbeit__buehne .geraet{border-radius:10px 10px 0 0;border-bottom:0}
.arbeit__buehne .handy{position:absolute;right:clamp(.8rem,2.5vw,2.5rem);bottom:0;width:min(120px,26%);transform:translateY(18%);z-index:2}
.arbeit--breit .arbeit__buehne{grid-template-columns:minmax(0,1fr) 260px;gap:2rem;align-items:end}
.arbeit--breit .arbeit__buehne .handy{position:static;width:100%;max-width:210px;transform:none;justify-self:end;margin-bottom:0}
.arbeit__text{padding:1.5rem clamp(1.2rem,3vw,2rem) 1.6rem;display:grid;gap:.4rem}
.arbeit__text .kick{margin-bottom:.2rem}
.arbeit__text h3{font-size:1.35rem}
.arbeit__text p{color:var(--fg2);font-size:.96rem;max-width:60ch}
.arbeit__fakten{display:flex;flex-wrap:wrap;gap:.4rem .9rem;margin-top:.6rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.02em;color:var(--fg3)}
.arbeit__fakten b{color:var(--fg);font-weight:500}
@media (hover:hover) and (pointer:fine){.arbeit:hover{border-color:var(--linie2);box-shadow:var(--schatten)}}
@media (max-width:900px){.arbeit{grid-column:span 12}.arbeit--breit .arbeit__buehne{grid-template-columns:1fr}.arbeit--breit .arbeit__buehne .handy{position:absolute;right:1.2rem;bottom:0;width:min(120px,26%);transform:translateY(18%)}}

/* Vergleich (Vorher/Nachher) */
.vergleich{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--linie);aspect-ratio:1400/875;background:var(--bg3);user-select:none;touch-action:pan-y}
.vergleich img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.vergleich__nach{clip-path:inset(0 0 0 var(--x,50%))}
.vergleich__griff{position:absolute;top:0;bottom:0;left:var(--x,50%);width:2px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.2);transform:translateX(-1px)}
.vergleich__griff::after{content:"";position:absolute;top:50%;left:50%;width:44px;height:44px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);box-shadow:0 4px 20px rgba(0,0,0,.3);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d1d1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 7l-5 5 5 5M16 7l5 5-5 5'/%3E%3C/svg%3E");background-size:20px;background-position:center;background-repeat:no-repeat}
.vergleich{cursor:ew-resize}
/* Spezifität bewusst hoch: die allgemeine Regel input[type="range"] im Konfigurator-Teil
   setzte hier sonst height:32px, und nur ein Streifen oben reagierte (Fehler vom 05.09.2026). */
.vergleich input[type="range"].vergleich__regler{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;background:transparent}
.vergleich input[type="range"].vergleich__regler::-webkit-slider-runnable-track{height:100%;background:transparent}
.vergleich input[type="range"].vergleich__regler::-webkit-slider-thumb{width:44px;height:100%;margin-top:0;border-radius:0;box-shadow:none;border:0}
.vergleich input[type="range"].vergleich__regler::-moz-range-track{height:100%;background:transparent}
.vergleich input[type="range"].vergleich__regler::-moz-range-thumb{width:44px;height:100%;border-radius:0;border:0}
.vergleich input[type="range"].vergleich__regler:focus-visible{opacity:0}
.vergleich:has(input:focus-visible){outline:2px solid var(--akzent);outline-offset:3px}
.vergleich__label{position:absolute;top:.8rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;padding:.3rem .6rem;border-radius:999px;background:rgba(10,11,14,.7);color:#fff;pointer-events:none}
.vergleich__label--l{left:.8rem}.vergleich__label--r{right:.8rem}

/* ---------- Vorgehen ---------- */
.stationen{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;counter-reset:st}
.station{position:relative;padding:1.75rem 1.5rem;border-radius:var(--radius);background:var(--bg2);border:1px solid var(--linie);display:flex;flex-direction:column;gap:.6rem;min-height:260px}
.station b{font-size:clamp(2.2rem,4vw,3.2rem);font-weight:300;letter-spacing:-.05em;line-height:1;color:var(--fg3)}
.station h3{font-size:1.25rem}
.station p{color:var(--fg2);font-size:.96rem}
.station small{margin-top:auto;font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;color:var(--fg3)}
@media (max-width:900px){.stationen{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.stationen{grid-template-columns:1fr}}

.faq{border-top:1px solid var(--linie)}
.faq details{border-bottom:1px solid var(--linie)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.3rem 0;font-weight:450;font-size:1.12rem;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{width:20px;height:20px;flex:none;color:var(--fg3);transition:transform 260ms var(--ease-out)}
.faq details[open] summary svg{transform:rotate(45deg)}
.faq .faq__a{padding:0 0 1.4rem;color:var(--fg2);max-width:70ch}
.faq details[open] .faq__a{animation:panel-ein 260ms var(--ease-out)}

.werkzeuge{display:flex;flex-wrap:wrap;gap:.5rem}

/* ---------- Konfigurator ---------- */
.konfig{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(320px,.9fr);gap:clamp(1.5rem,4vw,4rem);align-items:start}
.konfig__schritt{padding:2rem 0;border-top:1px solid var(--linie)}
.konfig__schritt:first-child{border-top:0;padding-top:0}
.konfig__schritt h2{font-size:1.4rem;margin-bottom:.3rem}
.konfig__schritt>p{color:var(--fg2);margin-bottom:1.25rem;font-size:.98rem}
.wahl{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem}
.wahl label{position:relative;display:flex;flex-direction:column;gap:.35rem;padding:1.1rem;border-radius:var(--radius-s);border:1px solid var(--linie2);cursor:pointer;min-height:110px;
  transition:border-color 160ms ease,background-color 160ms ease,transform 160ms var(--ease-out)}
.wahl label:active{transform:scale(.985)}
.wahl input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.wahl label:has(input:checked){border-color:var(--fg);background:color-mix(in srgb,var(--fg) 8%,transparent);box-shadow:inset 0 0 0 1px var(--fg)}
.wahl label:has(input:focus-visible){outline:2px solid var(--akzent);outline-offset:3px}
.wahl svg{width:24px;height:24px;color:var(--fg2)}
.wahl b{font-weight:500;font-size:.98rem;letter-spacing:-.01em}
.wahl small{color:var(--fg2);font-size:.84rem;line-height:1.35}
.wahl--zwei{grid-template-columns:repeat(2,1fr)}
.wahl--chips{display:flex;flex-wrap:wrap}
.wahl--chips label{min-height:0;flex-direction:row;align-items:center;gap:.5rem;padding:.6rem .95rem;border-radius:999px;font-family:var(--mono);font-size:.8rem}
.wahl--chips small{display:none}
@media (max-width:640px){.wahl{grid-template-columns:1fr 1fr}}
.regler{display:grid;gap:.6rem}
.regler__wert{display:flex;justify-content:space-between;align-items:baseline}
.regler__wert b{font-size:2.2rem;font-weight:300;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.regler__wert span{color:var(--fg2);font-size:.9rem}
input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:32px;background:transparent;margin:0;cursor:pointer}
input[type="range"]::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:linear-gradient(to right,var(--fg) var(--f,0%),var(--linie2) var(--f,0%))}
input[type="range"]::-moz-range-track{height:3px;border-radius:2px;background:var(--linie2)}
input[type="range"]::-moz-range-progress{height:3px;border-radius:2px;background:var(--fg)}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:#fff;border:1px solid rgba(0,0,0,.15);box-shadow:0 2px 10px rgba(0,0,0,.3);margin-top:-10.5px;transition:transform 140ms var(--ease-out)}
input[type="range"]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;border:1px solid rgba(0,0,0,.15);box-shadow:0 2px 10px rgba(0,0,0,.3)}
input[type="range"]:active::-webkit-slider-thumb{transform:scale(1.12)}
.regler__skala{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;color:var(--fg3)}

.ergebnis{position:sticky;top:calc(var(--kopf-h) + 1.25rem);border-radius:var(--radius);background:var(--fg);color:var(--bg);padding:1.75rem;display:grid;gap:1.25rem}
.ergebnis .kick{color:color-mix(in srgb,var(--bg) 70%,var(--fg))}
.ergebnis__titel{font-size:1.4rem;font-weight:450;letter-spacing:-.025em;line-height:1.15}
.ergebnis__zahlen{display:grid;grid-template-columns:1fr 1fr;gap:1rem;padding:1rem 0;border-top:1px solid color-mix(in srgb,var(--bg) 20%,transparent);border-bottom:1px solid color-mix(in srgb,var(--bg) 20%,transparent)}
.ergebnis__zahlen b{display:block;font-size:clamp(1.2rem,4.2vw,1.8rem);font-weight:450;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.1}
.ergebnis__zahlen span{font-size:.8rem;color:color-mix(in srgb,var(--bg) 72%,var(--fg));font-family:var(--mono)}
.fahrplan{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.fahrplan li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.8rem;align-items:baseline;font-size:.95rem}
.fahrplan li i{font-family:var(--mono);font-style:normal;font-size:.7rem;letter-spacing:.04em;color:color-mix(in srgb,var(--bg) 70%,var(--fg))}
.fahrplan li em{font-style:normal;font-family:var(--mono);font-size:.76rem;color:color-mix(in srgb,var(--bg) 72%,var(--fg));white-space:nowrap}
.ergebnis .knopf{justify-content:center;background:var(--bg);color:var(--fg)}
.ergebnis__hinweis{font-size:.8rem;color:color-mix(in srgb,var(--bg) 70%,var(--fg));line-height:1.45}
.ergebnis__kopie{display:flex;gap:.5rem}
.ergebnis__kopie .knopf{flex:1;background:transparent;color:inherit;border:1px solid color-mix(in srgb,var(--bg) 30%,transparent)}
@media (max-width:900px){.konfig{grid-template-columns:1fr}.ergebnis{position:static}}

/* ---------- Kontakt ---------- */
.kontakt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,6vw,6rem)}
.feld{display:grid;gap:.4rem;margin-bottom:1.1rem}
.feld label{font-size:.8rem;font-family:var(--mono);color:var(--fg2)}
.feld input,.feld textarea,.feld select{font:inherit;color:var(--fg);background:var(--bg2);border:1px solid var(--linie2);border-radius:var(--radius-s);padding:.85rem 1rem;width:100%;transition:border-color 160ms ease,box-shadow 160ms ease}
.feld input:focus,.feld textarea:focus,.feld select:focus{outline:0;border-color:var(--fg);box-shadow:0 0 0 3px color-mix(in srgb,var(--fg) 12%,transparent)}
.feld textarea{min-height:150px;resize:vertical}
.feld small{color:var(--fg3);font-size:.8rem}
.kontakt__daten{display:grid;gap:1.5rem;align-content:start}
.kontakt__daten div{padding-top:1rem;border-top:1px solid var(--linie)}
.kontakt__daten b{display:block;font-family:var(--mono);font-weight:500;font-size:.7rem;letter-spacing:.04em;text-transform:none;color:var(--fg3);margin-bottom:.4rem}
.kontakt__daten a{color:var(--fg);font-size:1.1rem;font-weight:450;letter-spacing:-.01em}
@media (max-width:820px){.kontakt{grid-template-columns:1fr}}

/* ---------- Abschluss-Band ---------- */
.band{text-align:center;padding-block:clamp(6rem,14vw,11rem)}
.band h2{font-size:clamp(2.2rem,5.6vw,4.6rem);max-width:20ch;margin-inline:auto;font-weight:400}
.band .kick{justify-content:center}
.band .lead{margin:1.25rem auto 2rem}
.band .aktionen{justify-content:center}

/* ---------- Fuß ---------- */
.fuss{position:relative;z-index:1;border-top:1px solid var(--linie);padding:3.5rem 0 2.5rem;background:var(--bg);color:var(--fg)}
.fuss__oben{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2rem;margin-bottom:3rem}
.fuss__titel{font-family:var(--mono);font-weight:500;font-size:.7rem;letter-spacing:.04em;text-transform:none;color:var(--fg3);margin:0 0 .9rem}
.fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.fuss a{color:var(--fg2);font-size:.95rem;transition:color 160ms ease}
.fuss a:hover{color:var(--fg)}
.fuss__claim{max-width:34ch;color:var(--fg2);margin-top:.9rem;font-size:.96rem}
.fuss__unten{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;padding-top:1.5rem;border-top:1px solid var(--linie);font-size:.74rem;color:var(--fg3);font-family:var(--mono)}
@media (max-width:760px){.fuss__oben{grid-template-columns:1fr 1fr}}

/* ---------- Rechtstexte ---------- */
.recht{padding-top:calc(var(--kopf-h) + clamp(4rem,10vw,7rem))}
.recht h1{font-size:clamp(2.2rem,5vw,3.4rem);margin-bottom:1.5rem}
.recht h2{font-size:1.35rem;margin:2.5rem 0 .8rem}
.recht p,.recht li{color:var(--fg2);max-width:70ch}
.recht p+p{margin-top:.8rem}
.hinweis{border:1px solid var(--linie2);border-radius:var(--radius-s);padding:1rem 1.2rem;background:var(--bg2);color:var(--fg);font-size:.95rem;margin-bottom:2rem}

/* ---------- Seitenwechsel ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-aus 220ms var(--ease-out) both}
::view-transition-new(root){animation:vt-ein 360ms var(--ease-out) both}
@keyframes vt-aus{to{opacity:0}}
@keyframes vt-ein{from{opacity:0;transform:translateY(10px)}}
::view-transition-old(kopf),::view-transition-new(kopf){animation:none;mix-blend-mode:normal}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}

/* ---------- Hilfen ---------- */
.nur-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ist-magnet{will-change:transform;transition:transform 240ms var(--ease-out)}
.abstand-oben{margin-top:2.5rem}
.zentriert{text-align:center}

/* ---------- Ersatz für Inline-Stile (CSP ohne unsafe-inline) ---------- */
.sek--dicht{padding-top:2.5rem}
.handy--mittel{width:min(240px,45%)}
.panel__handys{display:flex;gap:1.5rem;align-items:flex-start}
.ergebnis__hinweis--frei{margin-top:1rem;color:var(--fg3)}
.abstand-klein{margin-top:.7rem}
.abstand-unten{margin-bottom:2.5rem}
.abstand-sek{margin-top:var(--sek)}
.kick--eng{margin-bottom:.5rem}
.schiene__karte--voll{background:var(--fg);color:var(--bg);border-color:transparent}
.schiene__karte--voll svg{color:inherit}
.schiene__karte--voll b{color:inherit;opacity:.6}
.schiene__karte--voll p{color:inherit;opacity:.75}

/* ---------- Vorher / Nachher ---------- */
.vergleiche{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem 1rem}
.vergleiche figure{margin:0;display:grid;gap:.7rem}
.vergleiche figcaption{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;font-size:.95rem;color:var(--fg2)}
.vergleiche figcaption b{color:var(--fg);font-weight:500}
.vergleiche figcaption span{font-family:var(--mono);font-size:.7rem;letter-spacing:.02em;color:var(--fg3)}
.vergleich--gross{grid-column:1/-1}
@media (max-width:820px){.vergleiche{grid-template-columns:1fr}}

/* ---------- Fallstudie ---------- */
.fall-hero{padding-top:calc(var(--kopf-h) + clamp(5rem,11vw,8rem));padding-bottom:0;background:transparent;color:var(--fg)}
.fall-hero .wrap{display:grid;gap:2rem}
.fall-hero h1{font-size:clamp(2.4rem,5.6vw,4.6rem)}
.fall-hero .lead{max-width:52ch}
.fall-hero__buehne{position:relative;margin-top:clamp(2rem,5vw,4rem);padding:clamp(1.5rem,4vw,3.5rem) clamp(1.5rem,4vw,3.5rem) 0;border-radius:var(--radius) var(--radius) 0 0;background:var(--bg3);border:1px solid var(--linie);border-bottom:0}
.fall-hero__buehne .geraet{border-radius:10px 10px 0 0;border-bottom:0;box-shadow:none}
.fall-hero__buehne .handy{position:absolute;right:clamp(1rem,4vw,3.5rem);bottom:0;width:min(200px,24%);transform:translateY(22%);z-index:2}
.fakten{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;padding:2rem 0;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.fakten div b{display:block;font-size:clamp(1.6rem,3vw,2.4rem);font-weight:300;letter-spacing:-.04em;line-height:1.1}
.fakten div span{color:var(--fg2);font-size:.86rem;font-family:var(--mono)}
@media (max-width:760px){.fakten{grid-template-columns:1fr 1fr}}
.kapitel{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.kapitel--umgekehrt>:first-child{order:2}
.kapitel__text{position:sticky;top:calc(var(--kopf-h) + 2rem)}
.kapitel__text .kick{margin-bottom:.8rem}
.kapitel__text h2{font-size:clamp(1.8rem,3.4vw,2.8rem);margin-bottom:1rem}
.kapitel__text p{color:var(--fg2);max-width:48ch}
.kapitel__text p+p{margin-top:.9rem}
.kapitel__bilder{display:grid;gap:1.5rem}
.kapitel__bilder .geraet{box-shadow:var(--schatten)}
.kapitel__paar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.5rem;align-items:end}
.kapitel__paar .handy{width:min(180px,30vw)}
@media (max-width:820px){.kapitel{grid-template-columns:1fr}.kapitel--umgekehrt>:first-child{order:0}.kapitel__text{position:static}}
.ergebnisse{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.ergebnisse div{padding:1.5rem;border-radius:var(--radius);background:var(--bg2);border:1px solid var(--linie)}
.ergebnisse b{display:block;font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:300;letter-spacing:-.04em;line-height:1.1;margin-bottom:.4rem;color:var(--fg)}
.ergebnisse p{color:var(--fg2);font-size:.95rem}
@media (max-width:760px){.ergebnisse{grid-template-columns:1fr}}
.weitere{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.weitere a{display:grid;gap:.6rem;padding:1.25rem;border-radius:var(--radius);background:var(--bg2);border:1px solid var(--linie);transition:border-color 200ms ease,box-shadow 300ms var(--ease-out)}
.weitere a img{border-radius:8px;aspect-ratio:1400/875;object-fit:cover;object-position:top;width:100%;height:auto}
.weitere a b{font-weight:500;font-size:1rem;font-family:var(--mono)}
.weitere a span{color:var(--fg2);font-size:.9rem}
@media (hover:hover) and (pointer:fine){.weitere a:hover{border-color:var(--linie2);box-shadow:var(--schatten)}}
@media (max-width:760px){.weitere{grid-template-columns:1fr}}

/* ---------- Lösungs-Detailseite ---------- */
.fuerwen{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.fuerwen div{padding:1.5rem;border-radius:var(--radius);border:1px solid var(--linie);background:var(--bg2)}
.fuerwen h3{font-size:1.15rem;margin-bottom:.5rem}
.fuerwen p{color:var(--fg2);font-size:.95rem}
@media (max-width:760px){.fuerwen{grid-template-columns:1fr}}
.leistungsliste{display:grid;grid-template-columns:1fr 1fr;gap:1rem 3rem}
.leistungsliste li{list-style:none;padding:1rem 0;border-top:1px solid var(--linie);display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start}
.leistungsliste ul{margin:0;padding:0}
.leistungsliste i{font-family:var(--mono);font-style:normal;font-size:.7rem;letter-spacing:.04em;color:var(--fg3);padding-top:.35rem}
.leistungsliste b{display:block;font-weight:500;margin-bottom:.15rem}
.leistungsliste span{color:var(--fg2);font-size:.95rem}
@media (max-width:760px){.leistungsliste{grid-template-columns:1fr}}
.brotkrumen{display:flex;gap:.5rem;align-items:center;font-family:var(--mono);font-size:.72rem;letter-spacing:.02em;color:var(--fg3);margin-bottom:1.2rem}
.brotkrumen a{color:var(--fg2)}
.brotkrumen a:hover{color:var(--fg)}

/* ---------- Über ---------- */
.ueber-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.ueber-grid .lead{max-width:none}
.ueber-grid p+p{margin-top:1rem}
.ueber-grid p{color:var(--fg2)}
.ueber-fakten{display:grid;gap:0;border-top:1px solid var(--linie)}
.ueber-fakten div{display:grid;grid-template-columns:140px 1fr;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--linie)}
.ueber-fakten b{font-family:var(--mono);font-weight:500;font-size:.7rem;letter-spacing:.04em;text-transform:none;color:var(--fg3);padding-top:.3rem}
.ueber-fakten span{color:var(--fg)}
@media (max-width:820px){.ueber-grid{grid-template-columns:1fr}}

/* ---------- Galerie (Großansicht) ---------- */
.arbeit__lupe{position:absolute;top:.8rem;right:.8rem;z-index:3;width:40px;height:40px;border-radius:999px;display:grid;place-items:center;background:var(--glas);color:var(--fg);border:1px solid var(--linie2);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);opacity:0;transition:opacity 200ms ease,transform 160ms var(--ease-out)}
.arbeit__lupe svg{width:18px;height:18px}
.arbeit__lupe:active{transform:scale(.94)}
.arbeit:hover .arbeit__lupe,.arbeit__lupe:focus-visible{opacity:1}
@media (hover:none){.arbeit__lupe{opacity:1}}
.galerie{border:0;padding:0;margin:0;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;background:var(--d-bg);color:var(--d-fg);color-scheme:dark;--bg:var(--d-bg);--bg2:var(--d-bg2);--bg3:var(--d-bg3);--fg:var(--d-fg);--fg2:var(--d-fg2);--fg3:var(--d-fg3);--linie:var(--d-linie);--linie2:var(--d-linie2);--schatten:var(--d-schatten);display:none;grid-template-rows:auto 1fr auto;gap:1rem;padding:1rem clamp(1rem,4vw,3rem) 1.25rem}
.galerie[open]{display:grid;animation:panel-ein 260ms var(--ease-out)}
.galerie::backdrop{background:rgba(6,7,10,.7);backdrop-filter:blur(8px)}
.galerie__kopf{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.galerie__titel{display:grid;gap:.1rem}
.galerie__titel .kick{margin:0}
.galerie__titel b{font-size:1.2rem;font-weight:450;letter-spacing:-.02em}
.galerie__knoepfe{display:flex;gap:.5rem}
.galerie__nav,.galerie__x{width:44px;height:44px;border-radius:999px;border:1px solid var(--linie2);display:grid;place-items:center;transition:background-color 160ms ease,transform 160ms var(--ease-out)}
.galerie__nav svg,.galerie__x svg{width:20px;height:20px}
.galerie__nav:active,.galerie__x:active{transform:scale(.94)}
@media (hover:hover){.galerie__nav:hover,.galerie__x:hover{background:color-mix(in srgb,var(--fg) 8%,transparent)}}
.galerie__buehne{position:relative;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.5rem;align-items:end;max-width:1400px;width:100%;margin-inline:auto}
.galerie__buehne .geraet{min-height:0;display:grid;grid-template-rows:auto 1fr}
.galerie__buehne .geraet img{aspect-ratio:auto;height:100%;max-height:calc(100dvh - 190px);object-fit:contain;object-position:top;background:var(--bg3)}
.galerie__buehne .handy{width:min(220px,22vw)}
.galerie__buehne .handy img{max-height:calc(100dvh - 190px);object-fit:cover;object-position:top}
.galerie__hinweis{text-align:center;font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;color:var(--fg3)}
@media (max-width:760px){.galerie__buehne{grid-template-columns:1fr}.galerie__buehne .handy{display:none}.galerie__hinweis{display:none}}

/* ---------- Flächen über der Atmosphäre ----------
   Halbdurchsichtig mit leichter Unschärfe, damit der Nebel weich durchscheint; kein
   helles Kantenlicht mehr, die Referenz arbeitet mit tiefen, ruhigen Flächen. */
:root{--glas-flaeche:rgba(255,255,255,.035);--glas-flaeche2:rgba(255,255,255,.06);--glas-rand:rgba(255,255,255,.09);--glas-blur:16px}
:root[data-schema="hell"]{--glas-flaeche:rgba(255,255,255,.5);--glas-flaeche2:rgba(255,255,255,.7);--glas-rand:rgba(20,22,30,.1)}
@media (prefers-color-scheme:light){
  :root:not([data-schema="dunkel"]){--glas-flaeche:rgba(255,255,255,.5);--glas-flaeche2:rgba(255,255,255,.7);--glas-rand:rgba(20,22,30,.1)}
}
.kachel:not(.kachel--akzent),.station,.modell:not(.modell--haupt),.arbeit,.schiene__karte:not(.schiene__karte--voll),.wahl label,.fuerwen div,.ergebnisse div,.weitere a,.zeilen--kompakt .zeile,.karte,.geraet,.handy,.hinweis,.galerie__nav,.galerie__x,.schema,.arbeit__lupe{
  background:var(--glas-flaeche);border-color:var(--glas-rand);
  backdrop-filter:blur(var(--glas-blur)) saturate(130%);-webkit-backdrop-filter:blur(var(--glas-blur)) saturate(130%)}
.knopf--leise{background:var(--glas-flaeche);border-color:var(--linie2);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.chip{background:var(--glas-flaeche);border-color:var(--glas-rand);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.chip--an,.chip[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.geraet__leiste{background:var(--glas-flaeche2);border-bottom-color:var(--glas-rand)}
.geraet img{background:var(--bg3)}
.arbeit__buehne{background:var(--glas-flaeche)}
.karte__bild{background:var(--bg3)}
.blatt{background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(28px) saturate(160%);-webkit-backdrop-filter:blur(28px) saturate(160%)}
.galerie{background:rgba(10,11,14,.74);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px)}
@media (hover:hover) and (pointer:fine){
  .kachel:not(.kachel--akzent):hover,.arbeit:hover,.weitere a:hover,.karte:hover{background:var(--glas-flaeche2);border-color:var(--linie2)}
}
@media (max-width:820px){:root{--glas-blur:12px}}
@media (prefers-reduced-transparency:reduce){.kachel,.station,.modell,.arbeit,.wahl label,.fuerwen div,.ergebnisse div,.weitere a,.karte,.geraet,.knopf--leise,.chip{background:var(--bg2);backdrop-filter:none;-webkit-backdrop-filter:none}}

/* ---------- Ablauf (Vorgehen): Kopf links stehend, Schritte als Liste ---------- */
.ablauf{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.ablauf__kopf{position:sticky;top:calc(var(--kopf-h) + 2.5rem)}
.ablauf__kopf h2{margin-bottom:1rem}
.ablauf__kopf .lead{margin-bottom:1.6rem}
.ablauf__liste{list-style:none;margin:0;padding:0;border-top:1px solid var(--linie)}
.ablauf__schritt{display:grid;grid-template-columns:clamp(3.6rem,6vw,5.2rem) minmax(0,1fr);gap:clamp(1rem,2.5vw,2rem);padding:clamp(1.8rem,3.5vw,2.6rem) 0;border-bottom:1px solid var(--linie)}
.ablauf__nr{font-size:clamp(2.4rem,4.4vw,3.5rem);font-weight:300;line-height:.85;letter-spacing:-.05em;color:var(--fg3);font-variant-numeric:tabular-nums;transition:color 300ms ease}
.ablauf__schritt h3{font-size:clamp(1.35rem,2vw,1.7rem);margin:0 0 .6rem}
.ablauf__schritt p{color:var(--fg2);max-width:58ch}
.ablauf__schritt .ablauf__ergebnis{display:flex;flex-wrap:wrap;align-items:baseline;gap:.45rem 1rem;margin-top:1.1rem;color:var(--fg);font-size:.95rem}
.ablauf__ergebnis b{flex-basis:100%;font-family:var(--mono);font-weight:500;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fg3)}
.ablauf__zeit{font-family:var(--mono);font-size:.7rem;letter-spacing:.02em;color:var(--fg2);border:1px solid var(--linie2);border-radius:999px;padding:.18rem .6rem;white-space:nowrap}
@media (hover:hover) and (pointer:fine){.ablauf__schritt:hover .ablauf__nr{color:var(--fg)}}
@media (max-width:900px){.ablauf{grid-template-columns:1fr}.ablauf__kopf{position:static}}

/* Konfigurator: Auswahl ohne Richtwert über die volle Breite */
.wahl .wahl__breit{grid-column:1/-1;min-height:0}
.nowrap{white-space:nowrap}

/* ==== 00-szene.css ==== */
/* 3D-Szene flow.js: Fläche, Ersatzbild ohne WebGL */
#bg3d canvas{display:block}
.kein-webgl #bg3d{background:radial-gradient(60% 50% at 72% 45%,rgba(76,141,255,.14),transparent 70%),var(--bg)}
.kein-webgl .tor-marke{display:none}

/* Bühnen: freie Abschnitte, in denen der 3D-Strom groß und hell zurückkommt (flow.js, data-flow-buehne).
   Genau eine Bildschirmhöhe, damit Objekt und Text zusammen im Bild stehen; Text im normalen Seitenraster. */
.flow-buehne{position:relative;z-index:1;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;padding:calc(4rem + 6vh) 0 11vh;pointer-events:none}
.flow-buehne__text{max-width:34rem;pointer-events:auto}
.flow-buehne__text h2{margin:.6rem 0 1rem}
.flow-buehne__text p{color:var(--fg2);max-width:30rem}
@media (max-width:759px){
  .flow-buehne{padding-bottom:max(2.5rem,7svh)}
  .flow-buehne__text h2{margin:.5rem 0 .75rem}
}

/* ==== arbeiten.css ==== */
/* =====================================================================
   Arbeiten und Fallstudien (Umbau v3, 17.10.2026)
   Präfix ar-. Nutzt die Bausteine aus basis.css und ergänzt: Statusplakette,
   Lösungskarten mit Bildstapel, Filter, kompakte Webprojekte, Fallstudien-
   Bühne ohne Handy, Ausgangslage, Kette, Stufen, Datenkreis, Prüfzahlen.
   Bewegung nur über transform/opacity.
   ===================================================================== */
:root{--ar-gruen:#7fd8a6;--ar-gelb:#f2c46d;--ar-blau:#9dbcff;--ar-violett:#c3adff;--ar-grau:#a3a7b0}

/* ---------- Statusplakette ---------- */
.ar-kopfzeile{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem .9rem;margin-bottom:1.1rem}
.ar-kopfzeile .kick{margin:0}
.ar-status{--c:var(--ar-grau);display:inline-flex;align-items:center;gap:.5rem;height:26px;padding:0 .7rem 0 .6rem;border-radius:999px;font-family:var(--mono);font-size:.7rem;letter-spacing:.03em;color:var(--c);
  background:color-mix(in srgb,var(--c) 10%,transparent);border:1px solid color-mix(in srgb,var(--c) 32%,transparent);white-space:nowrap;width:max-content}
.ar-status::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 22%,transparent)}
.ar-status--einsatz{--c:var(--ar-gruen)}
.ar-status--einsatz::before{animation:ar-puls 2.4s var(--ease-out) infinite}
.ar-status--prototyp{--c:var(--ar-gelb)}
.ar-status--muster{--c:var(--ar-blau)}
.ar-status--vorschau{--c:var(--ar-violett)}
.ar-status--web{--c:var(--ar-grau)}
@keyframes ar-puls{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c) 55%,transparent)}70%,100%{box-shadow:0 0 0 7px color-mix(in srgb,var(--c) 0%,transparent)}}
@media (prefers-reduced-motion:reduce){.ar-status--einsatz::before{animation:none}}

/* ---------- Arbeiten: Kopf und Filter ---------- */
.ar-kopf h1{max-width:18ch}
.ar-filter{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2.2rem}
.ar-filter .chip{height:38px;padding:0 1rem}
@media (hover:hover) and (pointer:fine){.ar-filter .chip:not([aria-pressed="true"]):hover{border-color:var(--fg)}}
.ist-ar-weg{display:none!important}
.ar-ein{animation:ar-ein 520ms var(--ease-out) both}
@keyframes ar-ein{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ar-ein{animation:none}}

/* ---------- Lösungskarten ---------- */
.ar-loesungen{display:grid;gap:clamp(1rem,2.4vw,1.6rem)}
.ar-loesung{position:relative;display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);border-radius:calc(var(--radius) + 4px);overflow:hidden;
  background:var(--glas-flaeche);border:1px solid var(--glas-rand);backdrop-filter:blur(var(--glas-blur)) saturate(130%);-webkit-backdrop-filter:blur(var(--glas-blur)) saturate(130%);
  transition:border-color 240ms ease,box-shadow 400ms var(--ease-out)}
.ar-loesung--umgekehrt{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)}
.ar-loesung--umgekehrt .ar-loesung__buehne{order:2}
.ar-loesung__buehne{--ar-p:0;position:relative;min-height:clamp(320px,34vw,470px);overflow:hidden;isolation:isolate;
  background:radial-gradient(120% 90% at 30% 10%,color-mix(in srgb,var(--fg) 7%,transparent),transparent 60%),color-mix(in srgb,var(--bg3) 70%,transparent);border-right:1px solid var(--linie)}
.ar-loesung--umgekehrt .ar-loesung__buehne{border-right:0;border-left:1px solid var(--linie)}
.ar-loesung__bild{position:absolute;width:76%;border-radius:10px;box-shadow:0 30px 70px -24px rgba(0,0,0,.85),0 1px 2px rgba(0,0,0,.5);
  transition:transform 900ms var(--ease-out);will-change:transform}
.ar-loesung__bild img{aspect-ratio:1400/875}
/* Gestapelte Rahmen dürfen nicht durchscheinen: feste Fläche statt Glas */
.ar-loesung .ar-loesung__bild,.ar-hero .geraet{background:var(--bg3);backdrop-filter:none;-webkit-backdrop-filter:none}
.ar-loesung .ar-loesung__bild .geraet__leiste,.ar-hero .geraet__leiste{background:var(--bg2)}
/* Drei Bilder als gestaffelter Stapel; die Tiefe steuert, wie stark jedes mit dem Scrollen wandert */
.ar-loesung__bild--1{left:6%;top:30%;z-index:3;transform:translate3d(0,calc(var(--ar-p) * -18px),0)}
.ar-loesung__bild--2{right:5%;top:16%;z-index:2;filter:brightness(.82);transform:translate3d(0,calc(var(--ar-p) * -38px),0) scale(.94);transform-origin:top right}
.ar-loesung__bild--3{right:13%;top:5%;z-index:1;transform:translate3d(0,calc(var(--ar-p) * -58px),0) scale(.86);transform-origin:top right;filter:brightness(.62)}
.ar-loesung--1 .ar-loesung__bild--1{left:8%;right:8%;width:84%;top:50%;transform:translate3d(0,calc(-50% + var(--ar-p) * -20px),0)}
.ar-loesung--2 .ar-loesung__bild--1{top:34%;width:74%}
.ar-loesung--2 .ar-loesung__bild--2{top:10%}
@media (hover:hover) and (pointer:fine){
  .ar-loesung:hover{border-color:var(--linie2);box-shadow:var(--schatten)}
  .ar-loesung:hover .ar-loesung__bild--1{transform:translate3d(-10px,calc(var(--ar-p) * -18px + 8px),0)}
  .ar-loesung:hover .ar-loesung__bild--2{transform:translate3d(14px,calc(var(--ar-p) * -38px - 10px),0) scale(.94)}
  .ar-loesung:hover .ar-loesung__bild--3{transform:translate3d(26px,calc(var(--ar-p) * -58px - 20px),0) scale(.86)}
  .ar-loesung--1:hover .ar-loesung__bild--1{transform:translate3d(0,calc(-50% + var(--ar-p) * -20px - 6px),0) scale(1.015)}
}
.ar-loesung__lupe{position:absolute;right:.9rem;bottom:.9rem;z-index:5;display:inline-flex;align-items:center;gap:.45rem;height:36px;padding:0 .85rem;border-radius:999px;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;color:var(--fg);background:var(--glas);border:1px solid var(--linie2);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:transform 160ms var(--ease-out),background-color 200ms ease}
.ar-loesung__lupe svg{width:15px;height:15px}
.ar-loesung__lupe:active{transform:scale(.96)}
@media (hover:hover){.ar-loesung__lupe:hover{background:color-mix(in srgb,var(--fg) 14%,var(--bg))}}
.ar-loesung__text{padding:clamp(1.6rem,3.4vw,3rem);display:flex;flex-direction:column;justify-content:center;gap:1rem}
.ar-loesung__text .ar-kopfzeile{margin:0}
.ar-loesung__text h3{font-size:clamp(1.9rem,3.2vw,2.8rem);font-weight:450;letter-spacing:-.035em;line-height:1.05}
.ar-loesung__text h3 a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size 400ms var(--ease-out)}
@media (hover:hover){.ar-loesung__text h3 a:hover{background-size:100% 1px}}
.ar-loesung__text p{color:var(--fg2);font-size:1rem;max-width:52ch}
.ar-loesung__fakten{list-style:none;margin:.3rem 0 0;padding:1rem 0 0;border-top:1px solid var(--linie);display:flex;flex-wrap:wrap;gap:.9rem 1.8rem}
.ar-loesung__fakten li{display:grid;gap:.1rem}
.ar-loesung__fakten b{font-size:1.5rem;font-weight:350;letter-spacing:-.04em;line-height:1.1;font-variant-numeric:tabular-nums}
.ar-loesung__fakten span{font-family:var(--mono);font-size:.68rem;letter-spacing:.02em;color:var(--fg3)}
.ar-loesung__aktionen{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.4rem;margin-top:.4rem}
.ar-textlink--leise{color:var(--fg2)}
@media (max-width:900px){
  .ar-loesung,.ar-loesung--umgekehrt{grid-template-columns:1fr}
  .ar-loesung--umgekehrt .ar-loesung__buehne{order:0}
  .ar-loesung__buehne,.ar-loesung--umgekehrt .ar-loesung__buehne{min-height:0;aspect-ratio:16/11;border:0;border-bottom:1px solid var(--linie)}
}
@media (max-width:560px){
  .ar-loesung__buehne{aspect-ratio:5/4}
  .ar-loesung__bild{width:82%}
  .ar-loesung__bild--1{left:5%;top:32%}
  .ar-loesung__bild--3{display:none}
  .ar-loesung__bild--2{right:4%;top:12%}
  .ar-loesung--1 .ar-loesung__bild--1{left:5%;width:90%}
  .ar-loesung__fakten{gap:.8rem 1.3rem}
  .ar-loesung__fakten b{font-size:1.3rem}
}

/* ---------- Zahlenleiste ---------- */
.ar-zahlen{border-top:0;padding-top:0}
.ar-zahlen .zahl b{font-size:clamp(2.2rem,4.6vw,3.8rem)}
.ar-zahlen .zahl span{max-width:24ch}

/* ---------- Webprojekte kompakt ---------- */
.ar-web{gap:1rem}
.ar-web .arbeit{grid-column:span 4}
.ar-web .arbeit__buehne{padding:1rem 1rem 0}
.ar-web .arbeit__buehne .handy{width:min(78px,22%);right:.9rem;border-radius:16px;padding:4px}
.ar-web .arbeit__buehne .handy img{border-radius:12px}
.ar-web .arbeit__text{padding:1.15rem 1.2rem 1.3rem;gap:.35rem}
.ar-web .arbeit__text h3{font-size:1.15rem}
.ar-web .arbeit__text h3 a{text-decoration:underline;text-decoration-color:var(--linie2);text-underline-offset:4px}
.ar-web .arbeit__text p{font-size:.9rem;line-height:1.5}
.ar-web .arbeit__text .kick{font-size:.68rem}
.ar-web .arbeit__fakten{margin-top:.35rem}
.ar-web .arbeit__text .textlink{margin-top:.4rem}
/* Das Projekt mit Fallstudie steht breit vorn, die übrigen zwölf füllen drei Spalten glatt */
.ar-web .ar-web__haupt{grid-column:span 12;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:stretch}
.ar-web .ar-web__haupt .arbeit__buehne{grid-template-columns:minmax(0,1fr) 150px;gap:1.2rem;align-items:end;padding:1.6rem 1.6rem 0}
.ar-web .ar-web__haupt .arbeit__buehne .handy{position:static;width:100%;max-width:150px;transform:none;border-radius:22px;padding:5px}
.ar-web .ar-web__haupt .arbeit__text{align-content:center;padding:2rem}
.ar-web .ar-web__haupt .arbeit__text h3{font-size:clamp(1.5rem,2.4vw,2rem)}
.ar-web .ar-web__haupt .arbeit__text p{font-size:.98rem}
@media (max-width:1100px){.ar-web .arbeit{grid-column:span 6}.ar-web .ar-web__haupt{grid-column:span 12}}
@media (max-width:820px){.ar-web .ar-web__haupt{grid-template-columns:1fr}.ar-web .ar-web__haupt .arbeit__buehne{grid-template-columns:minmax(0,1fr) 96px;padding:1rem 1rem 0}.ar-web .ar-web__haupt .arbeit__text{padding:1.15rem 1.2rem 1.3rem}}
@media (max-width:680px){.ar-web .arbeit{grid-column:span 12}}

/* ---------- Galerie im Bildmodus (ohne Handy) ---------- */
.galerie.ar-modus .galerie__buehne{grid-template-columns:minmax(0,1fr);max-width:1280px}
.galerie.ar-modus .handy{display:none}
.galerie.ar-modus .geraet img{transition:opacity 220ms ease}
.galerie.ar-modus .geraet img.ar-laedt{opacity:.25}

/* ---------- Fallstudie: Kopf und Bühne ---------- */
.ar-fall-hero .wrap>div:first-child{max-width:900px}
.ar-fall-hero h1{max-width:21ch;font-size:clamp(2.2rem,4.4vw,3.9rem);line-height:1.04}
.ar-fall-hero:has(.ar-hero){padding-bottom:clamp(1rem,3vw,2rem)}
.ar-hero{--ar-p:0;display:grid;gap:clamp(.8rem,1.6vw,1.25rem);padding:clamp(1rem,3vw,2.5rem);border-bottom:1px solid var(--linie);border-radius:calc(var(--radius) + 4px);
  background:radial-gradient(100% 120% at 20% 0%,color-mix(in srgb,var(--fg) 6%,transparent),transparent 60%),color-mix(in srgb,var(--bg3) 72%,transparent);overflow:hidden}
.ar-hero .geraet{border-radius:10px;border-bottom:1px solid var(--glas-rand);box-shadow:var(--schatten)}
.ar-hero--2{grid-template-columns:minmax(0,1fr) minmax(0,.42fr);grid-template-rows:1fr 1fr;align-items:center}
.ar-hero--2 .ar-hero__haupt{grid-row:1/3}
.ar-hero--1{grid-template-columns:minmax(0,1fr) minmax(0,.46fr);align-items:center}
.ar-hero__neben{will-change:transform}
.ar-hero__neben[data-ar-tiefe="1"]{transform:translate3d(0,calc(var(--ar-p) * -26px),0)}
.ar-hero__neben[data-ar-tiefe="2"]{transform:translate3d(0,calc(var(--ar-p) * -48px),0)}
.ar-hero__haupt{transform:translate3d(0,calc(var(--ar-p) * -8px),0)}
.ar-hero__neben .geraet__leiste{height:20px}
.ar-hero__neben .geraet__leiste span{display:none}
@media (max-width:820px){
  .ar-hero--2,.ar-hero--1{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .ar-hero--2 .ar-hero__haupt,.ar-hero--1 .ar-hero__haupt{grid-row:auto;grid-column:1/-1}
  .ar-hero--1 .ar-hero__neben{grid-column:1/-1}
  .ar-hero__neben[data-ar-tiefe]{transform:none}
}

/* Großansicht-Knopf auf Bildern */
.geraet[data-ar-zoom]{position:relative;cursor:zoom-in}
.ar-zoom{position:absolute;top:34px;right:.6rem;z-index:3;width:38px;height:38px;border-radius:999px;display:grid;place-items:center;color:var(--fg);
  background:var(--glas);border:1px solid var(--linie2);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);opacity:0;transition:opacity 200ms ease,transform 160ms var(--ease-out)}
.ar-zoom svg{width:17px;height:17px}
.ar-zoom:active{transform:scale(.94)}
.geraet[data-ar-zoom]:hover .ar-zoom,.ar-zoom:focus-visible{opacity:1}
@media (hover:none){.ar-zoom{opacity:1}}
.ar-hero__neben .ar-zoom{display:none}
.ar-bild{margin:0;display:grid;gap:.7rem}
.ar-bild figcaption{font-family:var(--mono);font-size:.72rem;letter-spacing:.02em;color:var(--fg3);display:flex;align-items:center;gap:.6rem}
.ar-bild figcaption::before{content:"";width:18px;height:1px;background:var(--linie2)}

/* Fakten der Fallstudie: Text darf zwei Zeilen haben */
.ar-fakten{padding:clamp(1.4rem,2.6vw,2rem) clamp(1.2rem,2.6vw,2.2rem);border:1px solid var(--glas-rand);border-radius:calc(var(--radius) + 4px);background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:blur(var(--glas-blur));-webkit-backdrop-filter:blur(var(--glas-blur))}
.ar-fakten div span{display:block;max-width:26ch;margin-top:.3rem;line-height:1.4}

/* ---------- Ausgangslage ---------- */
.ar-vorher{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.ar-vorher--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ar-vorher__karte{position:relative;display:flex;flex-direction:column;gap:.6rem;padding:clamp(1.3rem,2.4vw,1.8rem);border-radius:var(--radius);
  background:var(--glas-flaeche);border:1px solid var(--glas-rand);backdrop-filter:blur(var(--glas-blur));-webkit-backdrop-filter:blur(var(--glas-blur))}
.ar-vorher__nr{font-family:var(--mono);font-size:.72rem;color:var(--fg3);letter-spacing:.04em}
.ar-vorher__karte h3{font-size:clamp(1.2rem,1.7vw,1.45rem)}
.ar-vorher__karte>p:not(.ar-vorher__jetzt){color:var(--fg2);font-size:.96rem;transition:color 700ms ease 500ms}
.ar-vorher__jetzt{margin-top:auto;padding-top:1rem;border-top:1px solid var(--linie);display:flex;gap:.8rem;align-items:baseline;font-size:.96rem;color:var(--fg)}
.ar-vorher__jetzt b{flex:none;font-family:var(--mono);font-weight:500;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--bg);background:var(--ar-gruen);padding:.2rem .5rem;border-radius:999px;transform:translateY(-1px)}
/* Erst steht das Problem da, dann schiebt sich die Antwort darunter */
.has-motion .ar-vorher__karte .ar-vorher__jetzt{opacity:0;transform:translateY(10px);transition:opacity 600ms var(--ease-out) 450ms,transform 700ms var(--ease-out) 450ms}
.has-motion .ar-vorher__karte.in .ar-vorher__jetzt{opacity:1;transform:none}
@media (max-width:980px){.ar-vorher--3{grid-template-columns:1fr}}
@media (max-width:720px){.ar-vorher{grid-template-columns:1fr}}

/* ---------- Kette (Agenten) ---------- */
.ar-kette{--ar-f:0;position:relative}
.ar-kette__liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1rem;position:relative;z-index:1}
.ar-kette__liste li{display:flex;flex-direction:column;gap:.45rem}
.ar-kette__liste i{font-style:normal;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-size:.8rem;color:var(--fg);
  background:var(--bg2);border:1px solid var(--linie2);margin-bottom:.6rem;transition:background-color 300ms ease,color 300ms ease,border-color 300ms ease}
.ar-kette__liste li.ist-erreicht i{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.ar-kette__liste b{font-weight:500;font-size:1rem;letter-spacing:-.01em;line-height:1.25}
.ar-kette__liste span{color:var(--fg2);font-size:.88rem;line-height:1.45}
.ar-kette__linie{position:absolute;left:22px;right:calc((100% - 6rem) / 7 - 22px);top:21px;height:2px;background:var(--linie2);border-radius:2px;overflow:hidden}
.ar-kette__linie i{position:absolute;inset:0;background:var(--fg);transform-origin:left;transform:scaleX(var(--ar-f))}
.no-motion .ar-kette__linie i{transform:none}
@media (max-width:980px){
  .ar-kette__liste{grid-template-columns:1fr;gap:1.2rem}
  .ar-kette__liste li{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:1rem;align-items:start}
  .ar-kette__liste li i{grid-row:1/3;margin:0}
  .ar-kette__liste li b{padding-top:.2rem}
  .ar-kette__linie{left:21px;right:auto;top:22px;bottom:22px;width:2px;height:auto}
  .ar-kette__linie i{transform-origin:top;transform:scaleY(var(--ar-f))}
}

/* ---------- Stufen ---------- */
.ar-stufen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.ar-stufe{display:flex;flex-direction:column;gap:.55rem;padding:1.6rem;border-radius:var(--radius);background:var(--glas-flaeche);border:1px solid var(--glas-rand);
  backdrop-filter:blur(var(--glas-blur));-webkit-backdrop-filter:blur(var(--glas-blur))}
.ar-stufe__nr{font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:var(--fg3)}
.ar-stufe h3{font-size:1.35rem}
.ar-stufe p{color:var(--fg2);font-size:.95rem}
.ar-stufe em{margin-top:auto;padding-top:.8rem;font-style:normal;font-family:var(--mono);font-size:.7rem;letter-spacing:.03em;color:var(--ar-gelb)}
.ar-stufe.ist-aktiv{border-color:color-mix(in srgb,var(--ar-gelb) 45%,transparent);background:color-mix(in srgb,var(--ar-gelb) 6%,var(--glas-flaeche))}
.ar-stufe:not(.ist-aktiv){opacity:.82}
.ar-stufen__fest{margin-top:1rem;display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.2rem;padding:1.1rem 1.4rem;border-radius:var(--radius);border:1px dashed color-mix(in srgb,var(--fg) 35%,transparent);background:color-mix(in srgb,var(--bg2) 60%,transparent)}
.ar-stufen__fest b{font-family:var(--mono);font-weight:500;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase}
.ar-stufen__fest b::before{content:"";display:inline-block;width:10px;height:10px;margin-right:.6rem;border-radius:2px;background:var(--fg);vertical-align:-1px}
.ar-stufen__fest span{color:var(--fg2)}
@media (max-width:860px){.ar-stufen{grid-template-columns:1fr}}

/* ---------- Datenkreis ---------- */
.ar-kreis-wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.ar-kreis-wrap .sek__kopf{margin-bottom:0}
.ar-kreis{position:relative;width:min(100%,540px);aspect-ratio:1;margin-inline:auto;container-type:inline-size}
.ar-kreis__ring{position:absolute;inset:11%;width:78%;height:78%;overflow:visible}
.ar-kreis__ring circle{fill:none;stroke:var(--linie2);stroke-width:.6}
.ar-kreis__ring .ar-kreis__lauf{stroke:var(--fg);stroke-width:1.4;stroke-linecap:round;stroke-dasharray:22 506;transform-origin:100px 100px;animation:ar-kreisen 16s linear infinite}
@keyframes ar-kreisen{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.ar-kreis__ring .ar-kreis__lauf{animation:none}}
.ar-kreis__mitte{position:absolute;inset:34%;display:grid;place-content:center;text-align:center;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--fg) 8%,transparent),transparent 70%)}
.ar-kreis__mitte b{font-size:clamp(2rem,4vw,3rem);font-weight:300;letter-spacing:-.05em;line-height:1}
.ar-kreis__mitte span{font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;color:var(--fg2);margin-top:.4rem;max-width:14ch}
.ar-kreis__liste{list-style:none;margin:0;padding:0}
.ar-kreis__knoten{--w:0deg;position:absolute;left:50%;top:50%;width:0;height:0}
.ar-kreis__knoten>*{position:absolute}
.ar-kreis__knoten b,.ar-kreis__knoten span{left:0;top:0;white-space:nowrap}
/* Position auf dem Kreis über eigene Variablen je Knoten (kein style-Attribut) */
.ar-kreis__knoten{transform:rotate(var(--w)) translateY(-39cqw) rotate(calc(var(--w) * -1))}
.ar-kreis__knoten:nth-child(1){--w:0deg}.ar-kreis__knoten:nth-child(2){--w:36deg}.ar-kreis__knoten:nth-child(3){--w:72deg}.ar-kreis__knoten:nth-child(4){--w:108deg}.ar-kreis__knoten:nth-child(5){--w:144deg}
.ar-kreis__knoten:nth-child(6){--w:180deg}.ar-kreis__knoten:nth-child(7){--w:216deg}.ar-kreis__knoten:nth-child(8){--w:252deg}.ar-kreis__knoten:nth-child(9){--w:288deg}.ar-kreis__knoten:nth-child(10){--w:324deg}
.ar-kreis__knoten b{transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-weight:500;font-size:.7rem;
  background:var(--bg2);border:1px solid var(--linie2);color:var(--fg2);transition:background-color 400ms ease,color 400ms ease,border-color 400ms ease,transform 500ms var(--ease-out)}
.ar-kreis__knoten span{transform:translate(-50%,24px);font-size:.76rem;color:var(--fg2);letter-spacing:-.01em;padding:.1rem .45rem;border-radius:6px;background:color-mix(in srgb,var(--bg) 70%,transparent);transition:color 400ms ease}
.ar-kreis__knoten:nth-child(n+4):nth-child(-n+8) span{transform:translate(-50%,24px)}
.ar-kreis__knoten.ist-an b{background:var(--fg);color:var(--bg);border-color:var(--fg);transform:translate(-50%,-50%) scale(1.12)}
.ar-kreis__knoten.ist-an span{color:var(--fg)}
@media (max-width:980px){.ar-kreis-wrap{grid-template-columns:1fr}}
@media (max-width:620px){
  .ar-kreis{width:100%;aspect-ratio:auto}
  .ar-kreis__ring,.ar-kreis__mitte{display:none}
  .ar-kreis__liste{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
  .ar-kreis__knoten,.ar-kreis__knoten:nth-child(n){position:static;width:auto;height:auto;transform:none;display:flex;align-items:center;gap:.6rem;padding:.55rem .6rem;border:1px solid var(--linie);border-radius:var(--radius-s);background:var(--glas-flaeche)}
  .ar-kreis__knoten>*,.ar-kreis__knoten b,.ar-kreis__knoten span,.ar-kreis__knoten:nth-child(n) span{position:static;transform:none;background:none;padding:0}
  .ar-kreis__knoten b{width:30px;height:30px;flex:none;background:var(--bg2)}
  .ar-kreis__knoten.ist-an b{transform:none}
  .ar-kreis__knoten span{white-space:normal;font-size:.82rem;line-height:1.25}
}

/* ---------- Prüfzahlen ---------- */
.ar-pz{list-style:none;margin:0;padding:0;border-top:1px solid var(--linie)}
.ar-pz li{display:grid;grid-template-columns:2.6rem minmax(0,1.2fr) minmax(0,1fr) 9.5rem;gap:1.2rem;align-items:center;padding:1rem 0;border-bottom:1px solid var(--linie)}
.ar-pz__nr{font-family:var(--mono);font-size:.74rem;color:var(--fg3)}
.ar-pz__name b{display:block;font-weight:500;font-size:1.05rem;letter-spacing:-.01em}
.ar-pz__name span{color:var(--fg2);font-size:.88rem}
.ar-pz__balken{position:relative;height:8px;border-radius:8px;background:var(--linie);overflow:hidden}
.ar-pz__balken i{position:absolute;inset:0;border-radius:8px;background:linear-gradient(90deg,color-mix(in srgb,var(--fg) 55%,transparent),var(--fg));transform-origin:left;transform:scaleX(var(--ar-a,1));transition:transform 1200ms var(--ease-out) 150ms}
.has-motion .ar-pz li:not(.in) .ar-pz__balken i{transform:scaleX(0)}
.ar-pz__balken--leer{background:repeating-linear-gradient(90deg,var(--linie) 0 6px,transparent 6px 12px)}
.ar-pz__zahl{text-align:right;font-size:1.6rem;font-weight:350;letter-spacing:-.04em;font-variant-numeric:tabular-nums;white-space:nowrap}
.ar-pz__zahl small{font-family:var(--mono);font-size:.66rem;letter-spacing:.02em;color:var(--fg3);font-weight:400}
.ar-pz__zahl--text small{font-size:.74rem;color:var(--fg2)}
.ar-pz__summe{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1.2rem;margin-top:1.8rem}
.ar-pz__summe b{font-size:clamp(2.6rem,6vw,4.6rem);font-weight:300;letter-spacing:-.05em;line-height:1}
.ar-pz__summe span{color:var(--fg2);font-family:var(--mono);font-size:.82rem}
@media (max-width:760px){
  .ar-pz li{grid-template-columns:2rem minmax(0,1fr) auto;gap:.5rem .8rem}
  .ar-pz__balken{grid-column:2/-1;grid-row:2}
  .ar-pz__zahl{grid-column:3;grid-row:1;font-size:1.3rem}
}

/* ---------- Hinweis (Vorführung) ---------- */
.ar-hinweis{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1.5rem 2rem;align-items:center;padding:clamp(1.5rem,3.5vw,2.6rem);border-radius:calc(var(--radius) + 4px);
  background:radial-gradient(90% 140% at 0% 0%,color-mix(in srgb,var(--ar-gruen) 12%,transparent),transparent 60%),var(--glas-flaeche);border:1px solid var(--glas-rand);backdrop-filter:blur(var(--glas-blur));-webkit-backdrop-filter:blur(var(--glas-blur))}
.ar-hinweis__ico{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;background:color-mix(in srgb,var(--ar-gruen) 14%,transparent);color:var(--ar-gruen);border:1px solid color-mix(in srgb,var(--ar-gruen) 30%,transparent)}
.ar-hinweis__ico svg{width:28px;height:28px}
.ar-hinweis h2{font-size:clamp(1.6rem,3vw,2.4rem);margin-bottom:.6rem}
.ar-hinweis .kick{margin-bottom:.7rem}
.ar-hinweis p{color:var(--fg2);max-width:58ch}
@media (max-width:860px){.ar-hinweis{grid-template-columns:1fr}.ar-hinweis .knopf{justify-self:start}}

/* ---------- Schnipsel: Paket, Regeln, Zustand ---------- */
.ar-paket,.ar-regeln,.ar-zustand{border-radius:var(--radius);padding:clamp(1.2rem,2.6vw,1.8rem);background:var(--glas-flaeche);border:1px solid var(--glas-rand);
  backdrop-filter:blur(var(--glas-blur));-webkit-backdrop-filter:blur(var(--glas-blur));box-shadow:var(--schatten)}
.ar-paket__kopf{display:flex;align-items:center;gap:.7rem;padding-bottom:1rem;border-bottom:1px solid var(--linie)}
.ar-paket__kopf svg{width:22px;height:22px;color:var(--ar-blau)}
.ar-paket__kopf b{font-weight:500}
.ar-paket__kopf span{margin-left:auto;font-family:var(--mono);font-size:.7rem;color:var(--fg3)}
.ar-paket ul,.ar-regeln ul{list-style:none;margin:0;padding:0}
.ar-paket li{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:.8rem;align-items:center;padding:.85rem 0;border-bottom:1px solid var(--linie);font-size:.95rem}
.ar-paket li svg{width:18px;height:18px;color:var(--fg3)}
.ar-paket li em{font-style:normal;font-family:var(--mono);font-size:.68rem;color:var(--ar-gruen);white-space:nowrap}
.ar-paket__fuss,.ar-regeln__fuss,.ar-zustand__fuss{margin-top:1rem;color:var(--fg3);font-size:.86rem;line-height:1.5}
.has-motion .ar-paket li{opacity:0;transform:translateX(-8px);transition:opacity 500ms var(--ease-out),transform 600ms var(--ease-out)}
.has-motion .ar-paket.in li{opacity:1;transform:none}
.ar-paket.in li:nth-child(2){transition-delay:120ms}.ar-paket.in li:nth-child(3){transition-delay:240ms}.ar-paket.in li:nth-child(4){transition-delay:360ms}.ar-paket.in li:nth-child(5){transition-delay:480ms}
.ar-regeln__titel,.ar-zustand__titel{font-family:var(--mono);font-size:.72rem;letter-spacing:.03em;color:var(--fg3);margin-bottom:.9rem}
.ar-regeln li{display:grid;grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr);gap:.8rem;align-items:center;padding:.75rem 0;border-top:1px solid var(--linie)}
.ar-regeln code{font-family:var(--mono);font-size:.82rem;color:var(--fg);background:var(--bg2);border:1px solid var(--linie);border-radius:8px;padding:.45rem .6rem;overflow-wrap:anywhere}
.ar-regeln li>i{height:1px;background:var(--linie2);position:relative}
.ar-regeln li>i::after{content:"";position:absolute;right:-1px;top:-3px;border:3.5px solid transparent;border-left:5px solid var(--linie2)}
.ar-regeln li>span{display:flex;align-items:center;gap:.5rem;font-size:.9rem}
.ar-regeln li>span svg{width:18px;height:18px;flex:none}
.ar-regeln .ist-ok>span{color:var(--ar-gruen)}
.ar-regeln .ist-frage>span{color:var(--ar-gelb)}
.ar-regeln .ist-frage code{border-style:dashed}
.ar-zustand ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.4rem;position:relative}
.ar-zustand li{display:grid;gap:.35rem;padding:.8rem .6rem;border-radius:10px;border:1px solid var(--linie);background:var(--bg2);text-align:center}
.ar-zustand li b{font-family:var(--mono);font-weight:500;font-size:.66rem;color:var(--fg3)}
.ar-zustand li span{font-size:.86rem;line-height:1.25}
.has-motion .ar-zustand.in li{animation:ar-takt 5s var(--ease-io) infinite}
.ar-zustand.in li:nth-child(2){animation-delay:1s}.ar-zustand.in li:nth-child(3){animation-delay:2s}.ar-zustand.in li:nth-child(4){animation-delay:3s}.ar-zustand.in li:nth-child(5){animation-delay:4s}
@keyframes ar-takt{0%,18%,100%{transform:none;border-color:var(--linie)}6%,12%{transform:translateY(-4px);border-color:var(--fg)}}
.ar-zustand__stoer{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.8rem}
.ar-zustand__stoer span{font-family:var(--mono);font-size:.68rem;padding:.3rem .6rem;border-radius:999px;color:var(--ar-gelb);border:1px solid color-mix(in srgb,var(--ar-gelb) 35%,transparent)}
@media (max-width:560px){.ar-zustand ol{grid-template-columns:1fr 1fr}.ar-regeln li{grid-template-columns:1fr;gap:.4rem}.ar-regeln li>i{display:none}}

/* ---------- Weitere Fallstudien ---------- */
.ar-weitere a{align-content:start}
.ar-weitere__bild{display:block;border-radius:8px;overflow:hidden;margin-bottom:.3rem}
.ar-weitere__bild img{transition:transform 700ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.ar-weitere a:hover .ar-weitere__bild img{transform:scale(1.035)}}
.ar-weitere .ar-status{height:22px;font-size:.64rem;color:var(--c)}

/* ==== kunden.css ==== */
/* ---------- Kundenbereich: Downloads (kunden.html) ---------- */
.kd-leiste{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.5rem;
  padding-bottom:1rem;border-bottom:1px solid var(--linie)}
.kd-wer{margin:0;font-family:var(--mono);font-size:.8rem;color:var(--fg2)}
.kd-wer b{color:var(--fg);font-weight:500}
.kd-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:1rem}
.kd-laden,.kd-leer{margin:0;padding:1.4rem;border-radius:var(--radius);border:1px dashed var(--linie2);color:var(--fg2)}
.kd-karte{display:flex;flex-direction:column;gap:.9rem;padding:clamp(1.2rem,3vw,1.75rem);border-radius:calc(var(--radius) + 4px);
  background:var(--glas-flaeche2,rgba(255,255,255,.06));border:1px solid var(--glas-rand,var(--linie2));
  backdrop-filter:blur(var(--glas-blur,16px)) saturate(140%);-webkit-backdrop-filter:blur(var(--glas-blur,16px)) saturate(140%)}
.kd-karte__kopf{display:flex;align-items:baseline;gap:.4rem .8rem;flex-wrap:wrap}
.kd-karte h2{margin:0;font-size:clamp(1.25rem,2.4vw,1.55rem);line-height:1.15}
.kd-version{font-family:var(--mono);font-size:.74rem;color:var(--fg3)}
.kd-version--aus{color:#e5a84d}
.kd-text{margin:0;color:var(--fg2);line-height:1.55}
.kd-hinweis{margin:0;padding:.7rem .9rem;border-radius:var(--radius-s);background:color-mix(in srgb,var(--fg) 6%,transparent);font-size:.88rem;color:var(--fg2)}
.kd-knoepfe{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:auto;padding-top:.3rem}
.kd-laden-knopf{display:inline-flex;align-items:center;gap:.6rem;min-height:48px}
.kd-laden-knopf svg{width:18px;height:18px;flex:none}
.kd-laden-knopf span{display:flex;flex-direction:column;line-height:1.15;text-align:left}
.kd-laden-knopf small{font-family:var(--mono);font-size:.7rem;opacity:.7}
.kd-folgt{margin:0;font-size:.9rem;color:var(--fg3)}
.kd-hilfe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:2.5rem}
.kd-hilfe div{padding:1.1rem 1.2rem;border-radius:var(--radius);border:1px solid var(--linie)}
.kd-hilfe b{display:block;font-family:var(--mono);font-weight:500;font-size:.76rem;color:var(--fg3);margin-bottom:.4rem}
.kd-hilfe p{margin:0;color:var(--fg2);font-size:.9rem;line-height:1.55}
.kd-hilfe a{color:var(--fg);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
@media (max-width:820px){.kd-hilfe{grid-template-columns:1fr}}
@media (max-width:520px){
  .kd-knoepfe{flex-direction:column}
  .kd-laden-knopf{width:100%;justify-content:flex-start}
}
@media (prefers-reduced-transparency:reduce){.kd-karte{background:var(--bg2);backdrop-filter:none;-webkit-backdrop-filter:none}}

/* ==== loesungen.css ==== */
/* =====================================================================
   Lösungen (Umbau v3, 17.10.2026): Übersicht loesungen.html und die neun
   Detailseiten loesung-*.html. Präfix lsg-. Bewegung nur über transform und
   opacity, Ausgangszustände nur unter .has-motion, damit ohne Skript und bei
   reduzierter Bewegung alles sichtbar ist.
   ===================================================================== */
:root{--lsg-warn:#e6a294;--lsg-gut:#9dbcff;--lsg-feder:cubic-bezier(.34,1.45,.64,1)}
.lsg-ico{width:20px;height:20px;flex:none}
.lsg-textlink{color:var(--fg);border-bottom:1px solid var(--linie2);white-space:nowrap;transition:border-color 160ms ease}
@media (hover:hover){.lsg-textlink:hover{border-bottom-color:var(--fg)}}

/* ---------- Kopf: Nutzen-Leiste ---------- */
.lsg-nutzen{list-style:none;margin:2.6rem 0 0;padding:1.3rem 0 0;border-top:1px solid var(--linie);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem 2rem;max-width:880px}
.lsg-nutzen--vier{grid-template-columns:repeat(4,minmax(0,1fr));max-width:none}
.lsg-nutzen li{display:grid;gap:.3rem;align-content:start}
.lsg-nutzen b{display:flex;align-items:center;gap:.55rem;font-family:var(--mono);font-weight:500;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fg)}
.lsg-nutzen b::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lsg-gut);box-shadow:0 0 0 4px color-mix(in srgb,var(--lsg-gut) 16%,transparent)}
.lsg-nutzen span{color:var(--fg2);font-size:.95rem;line-height:1.4}
.has-motion .lsg-nutzen li{opacity:0;transform:translateY(10px);animation:lsg-ein 700ms var(--ease-out) forwards}
.has-motion .lsg-nutzen li:nth-child(2){animation-delay:90ms}
.has-motion .lsg-nutzen li:nth-child(3){animation-delay:180ms}
.has-motion .lsg-nutzen li:nth-child(4){animation-delay:270ms}
@keyframes lsg-ein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (max-width:820px){.lsg-nutzen--vier{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.lsg-nutzen{grid-template-columns:1fr;gap:.9rem}.lsg-nutzen--vier{grid-template-columns:1fr 1fr}}

/* ---------- Für wen ---------- */
.lsg-fuerwen div{display:flex;flex-direction:column}
.lsg-fuerwen__nr{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;color:var(--fg3);margin-bottom:1.8rem}

/* ---------- So läuft es ab: zwei Schrittketten ---------- */
.lsg-ablauf__raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem;align-items:start}
.lsg-kette{position:relative;border-radius:var(--radius);border:1px solid var(--glas-rand);background:var(--glas-flaeche);padding:1.4rem 1.5rem 1.1rem;
  backdrop-filter:blur(var(--glas-blur)) saturate(130%);-webkit-backdrop-filter:blur(var(--glas-blur)) saturate(130%)}
.lsg-kette--nachher{background:var(--glas-flaeche2);border-color:color-mix(in srgb,var(--lsg-gut) 28%,transparent);box-shadow:0 30px 80px -40px color-mix(in srgb,var(--lsg-gut) 35%,transparent)}
.lsg-kette__kopf{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:.4rem 1rem;padding-bottom:1rem;margin-bottom:.4rem;border-bottom:1px solid var(--linie)}
.lsg-kette__titel{font-size:1.3rem;font-weight:500;letter-spacing:-.02em}
.lsg-kette--vorher .lsg-kette__titel{color:var(--fg2)}
.lsg-kette__bilanz{font-family:var(--mono);font-size:.7rem;letter-spacing:.02em;color:var(--fg3)}
.lsg-kette__liste{position:relative;list-style:none;margin:0;padding:0}
/* Verbindungslinie durch die Punkte; vorher gestrichelt, nachher durchgehend mit Fluss */
.lsg-kette__liste::before{content:"";position:absolute;left:17.5px;top:1.6rem;bottom:1.6rem;width:1px;transform-origin:top;
  background:linear-gradient(to bottom,var(--fg2) 0,var(--fg2) 100%)}
.lsg-kette--vorher .lsg-kette__liste::before{background:repeating-linear-gradient(to bottom,var(--linie2) 0 5px,transparent 5px 10px)}
.lsg-kette--nachher .lsg-kette__liste::before{background:color-mix(in srgb,var(--lsg-gut) 45%,transparent)}
.lsg-kette--nachher .lsg-kette__liste::after{content:"";position:absolute;left:17px;top:1.6rem;bottom:1.6rem;width:2px;border-radius:2px;transform-origin:top;opacity:0;
  background:linear-gradient(to bottom,transparent,var(--lsg-gut) 80%,#fff)}
.lsg-schritt{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:.9rem;align-items:center;padding:.6rem 0}
.lsg-schritt__punkt{position:relative;z-index:1;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--linie2);background:var(--bg2);color:var(--fg2)}
.lsg-schritt__punkt svg{width:17px;height:17px}
.lsg-schritt__text{font-size:.98rem;line-height:1.35}
.lsg-kette--vorher .lsg-schritt__text{color:var(--fg2)}
.lsg-schritt__tag{font-family:var(--mono);font-size:.64rem;letter-spacing:.04em;padding:.22rem .55rem;border-radius:999px;border:1px solid var(--linie2);color:var(--fg3);white-space:nowrap}
.lsg-schritt--risiko .lsg-schritt__punkt{color:var(--lsg-warn);border-color:color-mix(in srgb,var(--lsg-warn) 45%,transparent)}
.lsg-schritt--risiko .lsg-schritt__tag{color:var(--lsg-warn);border-color:color-mix(in srgb,var(--lsg-warn) 35%,transparent)}
.lsg-schritt--auto .lsg-schritt__punkt{color:var(--fg);border-color:color-mix(in srgb,var(--lsg-gut) 35%,transparent)}
.lsg-schritt--pruef .lsg-schritt__punkt{color:var(--lsg-gut);border-color:color-mix(in srgb,var(--lsg-gut) 55%,transparent)}
.lsg-schritt--pruef .lsg-schritt__tag{color:var(--lsg-gut);border-color:color-mix(in srgb,var(--lsg-gut) 35%,transparent)}
.lsg-schritt--mensch .lsg-schritt__punkt{background:var(--fg);color:var(--bg);border-color:var(--fg);box-shadow:0 0 0 6px color-mix(in srgb,var(--fg) 9%,transparent)}
.lsg-schritt--mensch .lsg-schritt__tag{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.lsg-schritt--mensch .lsg-schritt__text{font-weight:500}
/* Bewegung: Linie zieht sich, Schritte kommen nacheinander, rechts mit Verzögerung */
.has-motion .lsg-kette .lsg-kette__liste::before{transform:scaleY(0);transition:transform 1300ms var(--ease-out) 250ms}
.has-motion .lsg-kette.in .lsg-kette__liste::before{transform:scaleY(1)}
.has-motion .lsg-kette .lsg-schritt{opacity:0;transform:translateX(-12px);transition:opacity 500ms var(--ease-out),transform 650ms var(--ease-out)}
.has-motion .lsg-kette.in .lsg-schritt{opacity:1;transform:none}
.has-motion .lsg-kette .lsg-schritt__punkt{transform:scale(.6);transition:transform 600ms var(--lsg-feder)}
.has-motion .lsg-kette.in .lsg-schritt__punkt{transform:none}
.lsg-kette .lsg-schritt:nth-child(1),.lsg-kette .lsg-schritt:nth-child(1) .lsg-schritt__punkt{transition-delay:200ms}
.lsg-kette .lsg-schritt:nth-child(2),.lsg-kette .lsg-schritt:nth-child(2) .lsg-schritt__punkt{transition-delay:320ms}
.lsg-kette .lsg-schritt:nth-child(3),.lsg-kette .lsg-schritt:nth-child(3) .lsg-schritt__punkt{transition-delay:440ms}
.lsg-kette .lsg-schritt:nth-child(4),.lsg-kette .lsg-schritt:nth-child(4) .lsg-schritt__punkt{transition-delay:560ms}
.lsg-kette .lsg-schritt:nth-child(5),.lsg-kette .lsg-schritt:nth-child(5) .lsg-schritt__punkt{transition-delay:680ms}
.lsg-kette .lsg-schritt:nth-child(6),.lsg-kette .lsg-schritt:nth-child(6) .lsg-schritt__punkt{transition-delay:800ms}
.lsg-kette .lsg-schritt:nth-child(7),.lsg-kette .lsg-schritt:nth-child(7) .lsg-schritt__punkt{transition-delay:920ms}
.lsg-kette--nachher .lsg-schritt:nth-child(1),.lsg-kette--nachher .lsg-schritt:nth-child(1) .lsg-schritt__punkt{transition-delay:650ms}
.lsg-kette--nachher .lsg-schritt:nth-child(2),.lsg-kette--nachher .lsg-schritt:nth-child(2) .lsg-schritt__punkt{transition-delay:760ms}
.lsg-kette--nachher .lsg-schritt:nth-child(3),.lsg-kette--nachher .lsg-schritt:nth-child(3) .lsg-schritt__punkt{transition-delay:870ms}
.lsg-kette--nachher .lsg-schritt:nth-child(4),.lsg-kette--nachher .lsg-schritt:nth-child(4) .lsg-schritt__punkt{transition-delay:980ms}
.lsg-kette--nachher .lsg-schritt:nth-child(5),.lsg-kette--nachher .lsg-schritt:nth-child(5) .lsg-schritt__punkt{transition-delay:1090ms}
.lsg-kette--nachher .lsg-schritt:nth-child(6),.lsg-kette--nachher .lsg-schritt:nth-child(6) .lsg-schritt__punkt{transition-delay:1200ms}
.lsg-kette--nachher .lsg-schritt:nth-child(7),.lsg-kette--nachher .lsg-schritt:nth-child(7) .lsg-schritt__punkt{transition-delay:1310ms}
.has-motion .lsg-kette--nachher.in .lsg-kette__liste::after{animation:lsg-fluss 2.8s var(--ease-io) 2s infinite}
@keyframes lsg-fluss{0%{transform:scaleY(0);opacity:.9}62%{transform:scaleY(1);opacity:.9}100%{transform:scaleY(1);opacity:0}}
@media (max-width:860px){.lsg-ablauf__raster{grid-template-columns:1fr}}
@media (max-width:520px){
  .lsg-kette{padding:1.2rem 1.1rem 1rem}
  .lsg-schritt{grid-template-columns:36px minmax(0,1fr);gap:.2rem .85rem}
  .lsg-schritt__punkt{grid-row:span 2}
  .lsg-schritt__tag{grid-column:2;justify-self:start}
}

/* ---------- Wo Fehler verschwinden ---------- */
.lsg-fehler{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.lsg-fehler__karte{display:flex;flex-direction:column;gap:1rem;padding:1.6rem 1.5rem 1.7rem;border-radius:var(--radius);border:1px solid var(--glas-rand);background:var(--glas-flaeche);
  backdrop-filter:blur(var(--glas-blur)) saturate(130%);-webkit-backdrop-filter:blur(var(--glas-blur)) saturate(130%)}
.lsg-fehler__nr{font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;color:var(--lsg-warn)}
.lsg-fehler__quelle{font-size:clamp(1.25rem,1.8vw,1.5rem);font-weight:450;letter-spacing:-.02em;color:var(--fg2);min-height:2.4em}
.lsg-fehler__quelle span{text-decoration:line-through;text-decoration-thickness:1.5px;text-decoration-color:color-mix(in srgb,var(--lsg-warn) 65%,transparent)}
.lsg-fehler__trenner{display:flex;align-items:center;gap:.6rem;padding-top:1rem;border-top:1px dashed var(--linie2);font-family:var(--mono);font-size:.7rem;letter-spacing:.03em;color:var(--lsg-gut)}
.lsg-fehler__schild{width:22px;height:22px}
.lsg-fehler__karte p{color:var(--fg);font-size:.98rem;line-height:1.55}
.has-motion .lsg-fehler__karte .lsg-fehler__quelle{color:var(--fg);transition:color 600ms ease 700ms}
.has-motion .lsg-fehler__karte .lsg-fehler__quelle span{text-decoration-color:transparent;transition:text-decoration-color 500ms ease 700ms}
.has-motion .lsg-fehler__karte.in .lsg-fehler__quelle{color:var(--fg2)}
.has-motion .lsg-fehler__karte.in .lsg-fehler__quelle span{text-decoration-color:color-mix(in srgb,var(--lsg-warn) 65%,transparent)}
.has-motion .lsg-fehler__karte .lsg-fehler__schild{transform:scale(.3);opacity:0;transition:transform 600ms var(--lsg-feder) 1100ms,opacity 300ms ease 1100ms}
.has-motion .lsg-fehler__karte.in .lsg-fehler__schild{transform:none;opacity:1}
@media (max-width:900px){.lsg-fehler{grid-template-columns:1fr}.lsg-fehler__quelle{min-height:0}}

/* ---------- Bild bei den Leistungen ---------- */
.lsg-bild img{background:var(--bg3)}

/* ---------- Stellung im Ablauf ---------- */
.lsg-stationen{list-style:none;margin:0 0 2.5rem;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 1rem;border-top:1px solid var(--linie)}
.lsg-stationen li{position:relative;display:grid;gap:.3rem;align-content:start;padding:1.1rem 0 .4rem;opacity:.4}
.lsg-stationen li::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--lsg-gut);transform:scaleX(0);transform-origin:left}
.lsg-stationen li.ist-an{opacity:1}
.lsg-stationen li.ist-an::before{transform:scaleX(1)}
.lsg-stationen i{font-family:var(--mono);font-style:normal;font-size:.66rem;color:var(--fg3)}
.lsg-stationen b{font-weight:500;font-size:1.05rem;letter-spacing:-.01em}
.lsg-stationen span{color:var(--fg2);font-size:.9rem;line-height:1.4}
.has-motion .lsg-stationen li::before{transition:transform 900ms var(--ease-out) 300ms}
.has-motion .lsg-stationen:not(.in) li.ist-an::before{transform:scaleX(0)}
@media (max-width:760px){
  .lsg-stationen{grid-template-columns:1fr;border-top:0}
  .lsg-stationen li{grid-template-columns:2rem 6.5rem minmax(0,1fr);align-items:baseline;gap:.6rem;padding:.75rem 0;border-bottom:1px solid var(--linie)}
  .lsg-stationen li::before{top:auto;bottom:-1px}
  .lsg-stationen li:not(.ist-an) span{display:none}
}

/* ---------- Die anderen Bausteine ---------- */
.lsg-andere{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem}
.lsg-andere__link{display:flex;gap:.9rem;align-items:flex-start;padding:1.1rem 1.15rem 1.2rem;border-radius:var(--radius);border:1px solid var(--glas-rand);background:var(--glas-flaeche);
  backdrop-filter:blur(var(--glas-blur)) saturate(130%);-webkit-backdrop-filter:blur(var(--glas-blur)) saturate(130%);transition:border-color 200ms ease,background-color 200ms ease}
.lsg-andere__link .lsg-ico{color:var(--fg2);margin-top:.1rem;transition:transform 260ms var(--ease-out),color 200ms ease}
.lsg-andere__link span{display:grid;gap:.2rem}
.lsg-andere__link i{font-family:var(--mono);font-style:normal;font-size:.64rem;color:var(--fg3)}
.lsg-andere__link b{font-weight:500;font-size:.98rem;letter-spacing:-.01em;line-height:1.25}
.lsg-andere__link small{color:var(--fg2);font-size:.85rem;line-height:1.4}
@media (hover:hover) and (pointer:fine){
  .lsg-andere__link:hover{border-color:var(--linie2);background:var(--glas-flaeche2)}
  .lsg-andere__link:hover .lsg-ico{transform:translateY(-2px);color:var(--fg)}
}
@media (max-width:1000px){.lsg-andere{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.lsg-andere{grid-template-columns:1fr}.lsg-andere__link small{display:none}.lsg-andere__link{align-items:center;padding:.9rem 1rem}}

/* ---------- Übersicht: Reiter-Explorer ---------- */
.lsg-explorer{grid-template-columns:300px minmax(0,1fr)}
.lsg-explorer .reiter button{display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:.75rem;font-size:.97rem;line-height:1.3;padding:.62rem 1rem}
.lsg-explorer .reiter button .lsg-ico{width:18px;height:18px;color:var(--fg3);transition:color 160ms ease,transform 260ms var(--ease-out)}
.lsg-explorer .reiter button i{font-style:normal;font-family:var(--mono);font-size:.64rem;color:var(--fg3)}
.lsg-explorer .reiter button[aria-selected="true"] .lsg-ico{color:var(--lsg-gut);transform:scale(1.1)}
.lsg-reiter__kurz{display:none}
.lsg-panel h2{max-width:20ch}
.lsg-panel .lead{margin-bottom:1.6rem}
.lsg-panel__bilanz{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;padding:.85rem 1.1rem;border-radius:var(--radius-s);border:1px solid var(--glas-rand);background:var(--glas-flaeche);font-family:var(--mono);font-size:.72rem;letter-spacing:.01em;color:var(--fg2)}
.lsg-panel__bilanz b{font-weight:500;color:var(--fg);margin-right:.6rem}
.lsg-panel__bilanz span:first-child b{color:var(--lsg-warn)}
.lsg-panel__bilanz span:last-child b{color:var(--lsg-gut)}
.lsg-panel__bilanz svg{width:16px;height:16px;color:var(--fg3)}
.lsg-panel__fuss{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.25rem;margin-top:2rem}
.lsg-panel__fuss .panel__beispiele{margin-top:0}
/* Tafel-Inhalt kommt gestaffelt herein */
.has-motion .lsg-panel.ist-aktiv>*{animation:lsg-ein 520ms var(--ease-out) both}
.has-motion .lsg-panel.ist-aktiv>:nth-child(2){animation-delay:40ms}
.has-motion .lsg-panel.ist-aktiv>:nth-child(3){animation-delay:80ms}
.has-motion .lsg-panel.ist-aktiv>:nth-child(4){animation-delay:120ms}
.has-motion .lsg-panel.ist-aktiv>:nth-child(5){animation-delay:160ms}
.has-motion .lsg-panel.ist-aktiv>:nth-child(6){animation-delay:200ms}
.has-motion .lsg-panel.ist-aktiv>:nth-child(7){animation-delay:240ms}
.lsg-panel.ist-aktiv{animation:none}
@media (max-width:860px){
  .lsg-explorer{grid-template-columns:1fr}
  .lsg-explorer .reiter{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.45rem;overflow:visible;border:0;margin-inline:0;padding-inline:0}
  .lsg-explorer .reiter button{grid-template-columns:1fr;justify-items:center;text-align:center;gap:.4rem;padding:.8rem .3rem .7rem;margin:0;border:1px solid var(--glas-rand);border-radius:var(--radius-s);background:var(--glas-flaeche);font-size:.8rem;white-space:normal}
  .lsg-explorer .reiter button[aria-selected="true"]{border-color:var(--fg);background:var(--glas-flaeche2);color:var(--fg)}
  .lsg-explorer .reiter button i,.lsg-reiter__lang{display:none}
  .lsg-reiter__kurz{display:block}
  .lsg-explorer .reiter button .lsg-ico{width:20px;height:20px}
}

/* ---------- Übersicht: Zusammenspiel ---------- */
.lsg-zs{--zs-i:0;border-radius:calc(var(--radius) + 6px);border:1px solid var(--glas-rand);background:color-mix(in srgb,var(--bg) 62%,transparent);padding:clamp(1.1rem,3vw,2.5rem);
  backdrop-filter:blur(18px) saturate(130%);-webkit-backdrop-filter:blur(18px) saturate(130%)}
.lsg-zs__svg{width:100%;height:auto;overflow:visible}
.lsg-zs__svg--breit{--zs-abstand:200px}
.lsg-zs__svg--schmal{--zs-abstand:72px;display:none}
@media (max-width:700px){.lsg-zs__svg--breit{display:none}.lsg-zs__svg--schmal{display:block}}
.lsg-zs__grund{stroke:var(--linie2);stroke-width:1.5;stroke-dasharray:3 7;vector-effect:non-scaling-stroke}
.lsg-zs__fuell{stroke:var(--lsg-gut);stroke-width:2;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:0 50%;transform:scaleX(calc(var(--zs-i) / 4));transition:transform 900ms var(--ease-io)}
.lsg-zs__ring{fill:var(--bg2);stroke:var(--linie2);stroke-width:1.5;vector-effect:non-scaling-stroke;transition:fill 300ms ease,stroke 300ms ease}
.lsg-zs__halo{fill:var(--lsg-gut);opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.6);transition:opacity 400ms ease,transform 700ms var(--ease-out)}
.lsg-zs__sym{fill:none;stroke:var(--fg3);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;transition:stroke 300ms ease}
.lsg-zs__knoten.ist-durch .lsg-zs__ring{stroke:color-mix(in srgb,var(--lsg-gut) 55%,transparent)}
.lsg-zs__knoten.ist-durch .lsg-zs__sym{stroke:var(--fg2)}
.lsg-zs__knoten.ist-an .lsg-zs__ring{fill:var(--bg3);stroke:var(--lsg-gut)}
.lsg-zs__knoten.ist-an .lsg-zs__sym{stroke:var(--fg)}
.lsg-zs__knoten.ist-an .lsg-zs__halo{opacity:.18;transform:none}
.lsg-zs.laeuft .lsg-zs__knoten.ist-an .lsg-zs__halo{animation:lsg-halo 1.8s var(--ease-io) infinite alternate}
@keyframes lsg-halo{from{opacity:.2;transform:scale(.92)}to{opacity:.07;transform:scale(1.12)}}
.lsg-zs__teil{fill:var(--lsg-gut);opacity:0}
.lsg-zs.laeuft .lsg-zs__teil{animation:lsg-teil 3.6s linear infinite}
.lsg-zs.laeuft .lsg-zs__teil:nth-child(2){animation-delay:-1.2s}
.lsg-zs.laeuft .lsg-zs__teil:nth-child(3){animation-delay:-2.4s}
@keyframes lsg-teil{0%{transform:translateX(0);opacity:0}8%{opacity:.85}88%{opacity:.85}100%{transform:translateX(calc(var(--zs-abstand) * 4));opacity:0}}
.lsg-zs__vorgang{transform:translateX(calc(var(--zs-i) * var(--zs-abstand)));transition:transform 900ms var(--ease-io),opacity 300ms ease}
.lsg-zs.ist-neu .lsg-zs__vorgang{transition:none;opacity:0}
.lsg-zs__blatt{fill:var(--fg)}
.lsg-zs__zeilen{fill:none;stroke:var(--bg);stroke-width:1.8;stroke-linecap:round}
.lsg-zs__stationen{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin-top:.3rem}
.lsg-zs__station{display:grid;justify-items:center;gap:.15rem;padding:.45rem .2rem;border-radius:var(--radius-s);color:var(--fg3);transition:color 200ms ease,background-color 200ms ease}
.lsg-zs__station i{font-family:var(--mono);font-style:normal;font-size:.64rem;letter-spacing:.04em}
.lsg-zs__station span{font-weight:500;font-size:1rem;letter-spacing:-.01em}
.lsg-zs__station.ist-durch{color:var(--fg2)}
.lsg-zs__station[aria-selected="true"]{color:var(--fg)}
@media (hover:hover){.lsg-zs__station:hover{color:var(--fg);background:color-mix(in srgb,var(--fg) 5%,transparent)}}
.lsg-zs__detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(1.5rem,4vw,3.5rem);margin-top:1.6rem;padding-top:1.8rem;border-top:1px solid var(--linie)}
.lsg-zs__kopf{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.lsg-zs__kopf .kick{margin:0}
.lsg-zs__kopf .kick b{font-weight:500;color:var(--fg)}
.lsg-zs__steuer{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--fg2);border:1px solid var(--linie2);border-radius:999px;padding:.4rem .85rem;transition:color 160ms ease,border-color 160ms ease}
@media (hover:hover){.lsg-zs__steuer:hover{color:var(--fg);border-color:var(--fg)}}
.lsg-zs__steuer-weiter,.lsg-zs__steuer[aria-pressed="true"] .lsg-zs__steuer-pause{display:none}
.lsg-zs__steuer[aria-pressed="true"] .lsg-zs__steuer-weiter{display:inline}
.no-motion .lsg-zs__steuer{display:none}
.lsg-zs__text h3{font-size:clamp(1.7rem,2.8vw,2.3rem);font-weight:450;letter-spacing:-.03em;margin:1.1rem 0 .7rem}
.lsg-zs__text p{color:var(--fg2);max-width:46ch;min-height:4.8em}
.lsg-zs__rollen{list-style:none;margin:1.3rem 0 0;padding:0;border-top:1px solid var(--linie);min-height:calc(4 * 2.75rem)}
.lsg-zs__rollen li{display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:1rem;padding:.65rem 0;border-bottom:1px solid var(--linie);font-size:.93rem}
.lsg-zs__rollen b{font-family:var(--mono);font-weight:500;font-size:.74rem;color:var(--lsg-gut);padding-top:.15rem}
.lsg-zs__rollen span{color:var(--fg2)}
.has-motion .lsg-zs__rollen li{animation:lsg-ein 420ms var(--ease-out) both}
.has-motion .lsg-zs__rollen li:nth-child(2){animation-delay:60ms}
.has-motion .lsg-zs__rollen li:nth-child(3){animation-delay:120ms}
.has-motion .lsg-zs__rollen li:nth-child(4){animation-delay:180ms}
.lsg-zs__bereiche{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
.lsg-zs__bereich{position:relative;display:grid;gap:.55rem;padding:.9rem .95rem;border-radius:var(--radius-s);border:1px solid var(--linie);opacity:.42;
  transition:opacity 400ms ease,border-color 400ms ease,background-color 400ms ease,transform 500ms var(--ease-out)}
.lsg-zs__bereich .lsg-ico{color:var(--fg2);transition:color 300ms ease}
.lsg-zs__bereich b{font-weight:500;font-size:.92rem;letter-spacing:-.01em}
.lsg-zs__bereich i{position:absolute;top:.75rem;right:.8rem;font-family:var(--mono);font-style:normal;font-size:.6rem;color:var(--fg3)}
.lsg-zs__bereich.ist-an{opacity:1;transform:translateY(-3px);border-color:color-mix(in srgb,var(--lsg-gut) 55%,transparent);background:color-mix(in srgb,var(--lsg-gut) 9%,transparent)}
.lsg-zs__bereich.ist-an .lsg-ico{color:var(--lsg-gut)}
@media (hover:hover) and (pointer:fine){.lsg-zs__bereich:hover{opacity:1;border-color:var(--linie2)}}
.lsg-zs__protokollkasten{margin-top:.9rem;padding:1rem 1.1rem;border-radius:var(--radius-s);border:1px solid var(--linie);background:color-mix(in srgb,var(--bg) 60%,transparent);font-family:var(--mono);font-size:.7rem;letter-spacing:.01em}
.lsg-zs__ptitel{display:block;color:var(--fg3);margin-bottom:.6rem}
.lsg-zs__protokoll{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.lsg-zs__protokoll li{display:grid;grid-template-columns:1.9rem minmax(0,1fr);color:var(--fg2);opacity:.16;transition:opacity 400ms ease,color 300ms ease}
.lsg-zs__protokoll li i{font-style:normal;color:var(--fg3)}
.lsg-zs__protokoll li.ist-da{opacity:1}
.lsg-zs__protokoll li.ist-jetzt{color:var(--fg)}
@media (max-width:900px){.lsg-zs__detail{grid-template-columns:1fr}}
@media (max-width:700px){
  .lsg-zs__station span{font-size:.72rem}
  .lsg-zs__station i{font-size:.58rem}
  .lsg-zs__station{padding:.35rem 0}
  .lsg-zs__text p{min-height:6.4em}
  .lsg-zs__rollen li{grid-template-columns:7rem minmax(0,1fr);gap:.7rem;font-size:.88rem}
  .lsg-zs__bereich{padding:.7rem .6rem;gap:.4rem}
  .lsg-zs__bereich b{font-size:.76rem}
  .lsg-zs__bereich i{display:none}
}
@media (prefers-reduced-motion:reduce){
  .lsg-zs__vorgang,.lsg-zs__fuell,.lsg-zs__bereich,.lsg-zs__halo{transition:none}
  .lsg-zs__teil,.lsg-zs__halo{animation:none!important}
}

/* ---------- Übersicht: Wo anfangen ---------- */
.lsg-start{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 2.5rem;border-top:1px solid var(--linie)}
.lsg-start__zeile{display:grid;grid-template-columns:minmax(0,1fr) auto 18px;gap:1rem;align-items:center;padding:1.1rem 0;border-bottom:1px solid var(--linie)}
.lsg-start__wenn{color:var(--fg2);font-size:1rem;line-height:1.4;transition:color 200ms ease}
.lsg-start__dann{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .75rem;border-radius:999px;border:1px solid var(--glas-rand);background:var(--glas-flaeche);font-family:var(--mono);font-size:.7rem;letter-spacing:.01em;color:var(--fg);white-space:nowrap}
.lsg-start__dann .lsg-ico{width:15px;height:15px;color:var(--lsg-gut)}
.lsg-start__dann b{font-weight:500}
.lsg-start__pfeil{width:18px;height:18px;color:var(--fg3);transition:transform 220ms var(--ease-out),color 200ms ease}
@media (hover:hover) and (pointer:fine){
  .lsg-start__zeile:hover .lsg-start__wenn{color:var(--fg)}
  .lsg-start__zeile:hover .lsg-start__pfeil{transform:translateX(4px);color:var(--fg)}
}
@media (max-width:900px){.lsg-start{grid-template-columns:1fr}}
@media (max-width:560px){
  .lsg-start__zeile{grid-template-columns:minmax(0,1fr) 18px;gap:.6rem 1rem}
  .lsg-start__dann{grid-row:2;justify-self:start}
  .lsg-start__pfeil{grid-row:1/span 2;grid-column:2}
}

/* Ruhiger Grund für Abschnitte mit viel Text über der 3D-Szene */
.lsg-ruhig{background:color-mix(in srgb,var(--bg) 80%,transparent)}

/* ==== login.css ==== */
/* ---------- Kundenbereich: Anmeldung (login.html) ---------- */
.login{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.login__form{position:relative;padding:clamp(1.5rem,3vw,2.25rem);border-radius:calc(var(--radius) + 6px);
  background:var(--glas-flaeche2,rgba(255,255,255,.06));border:1px solid var(--glas-rand,var(--linie2));
  backdrop-filter:blur(var(--glas-blur,16px)) saturate(140%);-webkit-backdrop-filter:blur(var(--glas-blur,16px)) saturate(140%);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.06)}
.login__kopf{display:flex;align-items:center;gap:.9rem;margin-bottom:1.6rem}
.login__zeichen{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:13px;background:var(--fg);color:var(--bg)}
.login__zeichen svg{width:24px;height:24px}
.login__titel{font-size:1.4rem;line-height:1.1;margin:0}
.login__unter{margin:.2rem 0 0;font-family:var(--mono);font-size:.74rem;color:var(--fg3)}
.login__form .feld input{background:color-mix(in srgb,var(--bg) 60%,transparent)}
.login__form .feld input[aria-invalid="true"]{border-color:#e5484d}
.login__knopf{width:100%;justify-content:center;margin-top:.3rem}
.login__knopf[disabled]{opacity:.6;cursor:progress}
.login__fehler{margin:0 0 1rem;padding:.75rem 1rem;border-radius:var(--radius-s);border:1px solid color-mix(in srgb,#e5484d 55%,transparent);
  background:color-mix(in srgb,#e5484d 12%,transparent);color:var(--fg);font-size:.9rem;line-height:1.45}
.login__fehler.ist-neu{animation:login-ruetteln 380ms var(--ease-out)}
@keyframes login-ruetteln{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.login__aktiv{margin:1rem 0 0;font-size:.9rem;color:var(--fg2)}
.login__aktiv a{color:var(--fg);text-decoration:underline;text-underline-offset:3px}
.login__hinweis{margin:1.1rem 0 0;padding-top:1rem;border-top:1px solid var(--linie);font-size:.82rem;line-height:1.5;color:var(--fg3)}

.login__seite{display:grid;gap:1rem}
.login__klein{margin:0;font-family:var(--mono);font-size:.76rem;color:var(--fg2)}
.login__zugaenge{display:grid;gap:.8rem}
.login__zugang{display:grid;gap:.35rem;text-align:left;font:inherit;color:var(--fg);cursor:pointer;padding:1.1rem 1.2rem;border-radius:var(--radius);
  background:var(--glas-flaeche,rgba(255,255,255,.035));border:1px solid var(--glas-rand,var(--linie));
  backdrop-filter:blur(var(--glas-blur,16px));-webkit-backdrop-filter:blur(var(--glas-blur,16px));
  transition:border-color 200ms ease,background-color 200ms ease,transform 160ms var(--ease-out)}
.login__zugang:active{transform:scale(.985)}
.login__zugang b{font-family:var(--mono);font-weight:500;font-size:.92rem}
.login__zugang span{color:var(--fg2);font-size:.9rem;line-height:1.45}
.login__zugang .login__daten{color:var(--fg)}
.login__zugang code{font-family:var(--mono);font-size:.82rem;padding:.12rem .45rem;border-radius:6px;background:color-mix(in srgb,var(--fg) 9%,transparent)}
.login__zugang i{font-style:normal;color:var(--fg3)}
.login__zugang.ist-gewaehlt{border-color:var(--fg)}
@media (hover:hover){.login__zugang:hover{background:var(--glas-flaeche2,rgba(255,255,255,.06));border-color:var(--linie2)}}
.login__ehrlich{padding:1.1rem 1.2rem;border-radius:var(--radius);border:1px dashed var(--linie2)}
.login__ehrlich b{display:block;font-family:var(--mono);font-weight:500;font-size:.74rem;color:var(--fg3);margin-bottom:.45rem}
.login__ehrlich p{margin:0;color:var(--fg2);font-size:.9rem;line-height:1.55}

.login__schritte{display:grid;gap:.6rem}
.login__schritte div{display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:start;padding:1rem 1.1rem;border-radius:var(--radius);
  background:var(--glas-flaeche,rgba(255,255,255,.035));border:1px solid var(--glas-rand,var(--linie))}
.login__schritte b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;font-family:var(--mono);font-weight:500;font-size:.8rem;
  background:color-mix(in srgb,var(--fg) 10%,transparent);color:var(--fg)}
.login__schritte p{margin:.2rem 0 0;color:var(--fg2);font-size:.92rem;line-height:1.5}
.login__ehrlich a{color:var(--fg);text-decoration:underline;text-underline-offset:3px}

@media (max-width:820px){.login{grid-template-columns:1fr;gap:1.5rem}}
@media (max-width:520px){
  .login__form{padding:1.25rem 1.1rem;border-radius:var(--radius)}
  .login__kopf{margin-bottom:1.2rem}
  .login__form .feld input{font-size:16px}   /* verhindert das Hineinzoomen auf dem iPhone */
  .login__schritte div{padding:.85rem .95rem}
}
@media (prefers-reduced-motion:reduce){.login__fehler.ist-neu{animation:none}.login__zugang{transition:none}}
@media (prefers-reduced-transparency:reduce){.login__form,.login__zugang{background:var(--bg2);backdrop-filter:none;-webkit-backdrop-filter:none}}

/* ==== rechner.css ==== */
/* =====================================================================
   Rechner-Bereich: Prozessrechner, Lösungs-Konfigurator, Prozess-Check.
   Präfix rech-. Farben der Fehler und der Automatik folgen der 3D-Szene
   (flow.js): Fehlerpunkte orange, korrigierte Punkte in Markenblau.
   ===================================================================== */
:root{--rech-fehler:#ff7a45;--rech-auto:#5ee6ff;--rech-auto2:#4c8dff;--rech-flaeche:color-mix(in srgb,var(--bg2) 82%,transparent)}

/* ---------- Grundraster ---------- */
.rech{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr);gap:clamp(1.5rem,4vw,4rem);align-items:start}
@media (max-width:960px){.rech{grid-template-columns:1fr}}

/* ---------- Vorlagen ---------- */
.rech-vorlagen{padding-bottom:1.75rem}
.rech-vorlagen__kopf{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem 1rem;margin-bottom:.9rem}
.rech-vorlagen__kopf .kick{margin:0}
.rech-annahme{font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;color:var(--rech-fehler);border:1px solid color-mix(in srgb,var(--rech-fehler) 45%,transparent);border-radius:999px;padding:.2rem .65rem;white-space:nowrap}
.rech-vorlagen__knoepfe{display:flex;flex-wrap:wrap;gap:.45rem}
.rech-vorlagen__knoepfe .chip{cursor:pointer;transition:background-color 160ms ease,border-color 160ms ease,color 160ms ease,transform 160ms var(--ease-out)}
.rech-vorlagen__knoepfe .chip:active{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){.rech-vorlagen__knoepfe .chip:not([aria-pressed="true"]):hover{border-color:var(--fg)}}
.rech-vorlagen__text{margin-top:.9rem;color:var(--fg2);font-size:.92rem;max-width:60ch;min-height:2.9em}

/* ---------- Eingabefelder: Zahl plus Regler ---------- */
.rech-feld{padding:1.35rem 0 1.25rem;border-top:1px solid var(--linie)}
.rech-feld__kopf{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.35rem}
.rech-feld__kopf--unter{margin-top:.9rem}
.rech-feld__kopf label,.rech-feld__titel{font-weight:500;font-size:1.02rem;letter-spacing:-.01em}
.rech-feld__zahl{display:inline-flex;align-items:baseline;gap:.45rem;flex:none}
.rech-feld__zahl input{font:inherit;font-family:var(--mono);font-size:1.35rem;font-weight:450;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--fg);
  width:6.2ch;text-align:right;background:var(--glas-flaeche,rgba(255,255,255,.04));border:1px solid var(--linie2);border-radius:var(--radius-s);padding:.3rem .55rem;
  -moz-appearance:textfield;appearance:textfield;transition:border-color 160ms ease,box-shadow 160ms ease}
.rech-feld__zahl input::-webkit-outer-spin-button,.rech-feld__zahl input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.rech-feld__zahl input:focus{outline:0;border-color:var(--fg);box-shadow:0 0 0 3px color-mix(in srgb,var(--fg) 14%,transparent)}
.rech-feld__zahl i{font-style:normal;font-family:var(--mono);font-size:.74rem;color:var(--fg3);min-width:4.6em}
.rech-feld small{display:block;color:var(--fg3);font-size:.84rem;line-height:1.45;margin-top:.35rem;max-width:62ch}
.rech-feld__skala{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.64rem;letter-spacing:.04em;color:var(--fg3);margin-top:-.15rem}
/* Regler: größere Griffzone, dickere Spur, Fokus sichtbar */
.rech-regler{height:36px}
.rech-regler::-webkit-slider-runnable-track{height:4px}
.rech-regler::-webkit-slider-thumb{margin-top:-10px}
.rech-regler:focus-visible{outline:0}
.rech-regler:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px color-mix(in srgb,var(--akzent) 55%,transparent),0 2px 10px rgba(0,0,0,.3)}
.rech-regler:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px color-mix(in srgb,var(--akzent) 55%,transparent)}
@media (hover:hover) and (pointer:fine){.rech-regler:hover::-webkit-slider-thumb{transform:scale(1.08)}}

/* Umschalter Minuten oder Euro */
.rech-schalter{display:inline-flex;padding:3px;border-radius:999px;border:1px solid var(--linie2);background:var(--glas-flaeche,rgba(255,255,255,.04));flex:none}
.rech-schalter label{position:relative;cursor:pointer}
.rech-schalter input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.rech-schalter span{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.03em;padding:.42rem .8rem;border-radius:999px;color:var(--fg2);white-space:nowrap;transition:background-color 180ms ease,color 180ms ease}
.rech-schalter input:checked+span{background:var(--fg);color:var(--bg)}
.rech-schalter label:has(input:focus-visible){outline:2px solid var(--akzent);outline-offset:2px;border-radius:999px}
@media (max-width:520px){.rech-feld--fehler>.rech-feld__kopf{flex-direction:column;align-items:flex-start}}

/* ---------- Ergebniskarte ---------- */
.rech-erg{position:sticky;top:calc(var(--kopf-h) + 1.25rem);border-radius:calc(var(--radius) + 4px);padding:clamp(1.4rem,2.6vw,2rem);display:grid;gap:1.3rem;
  background:linear-gradient(160deg,color-mix(in srgb,var(--rech-auto2) 16%,transparent),transparent 55%),var(--rech-flaeche);
  border:1px solid var(--linie2);box-shadow:var(--schatten);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);isolation:isolate;overflow:hidden}
.rech-erg::before{content:"";position:absolute;inset:-40% -30% auto auto;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--rech-auto) 22%,transparent),transparent);z-index:-1;pointer-events:none;animation:rech-atmen 9s var(--ease-io) infinite alternate}
@keyframes rech-atmen{from{transform:translate3d(0,0,0) scale(1);opacity:.7}to{transform:translate3d(-12%,10%,0) scale(1.15);opacity:1}}
.rech-erg__kopf{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.3rem 1rem}
.rech-erg__kopf .kick{margin:0}
.rech-erg__vorlage{font-family:var(--mono);font-size:.7rem;color:var(--fg3);text-align:right}
.rech-erg__haupt b{display:block;font-size:clamp(3.4rem,7vw,5.4rem);font-weight:300;letter-spacing:-.05em;line-height:.95;font-variant-numeric:tabular-nums;white-space:nowrap}
.rech-erg__haupt b small{font-size:.38em;letter-spacing:-.02em;color:var(--fg2);font-weight:400}
.rech-erg__haupt>span{display:block;margin-top:.55rem;color:var(--fg2);font-size:.95rem}
.rech-erg__raster{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:.6rem;padding-top:1.1rem;border-top:1px solid var(--linie)}
.rech-erg__raster b{display:block;font-size:clamp(1.25rem,2.1vw,1.6rem);font-weight:450;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.15;white-space:nowrap}
.rech-erg__raster span{font-family:var(--mono);font-size:.68rem;letter-spacing:.02em;color:var(--fg3)}
.rech-erg__raster div:nth-child(2) b{color:color-mix(in srgb,var(--rech-auto) 80%,var(--fg))}
.rech-erg__satz{color:var(--fg2);font-size:.92rem;line-height:1.45}
.rech-erg__aktionen{display:grid;gap:.55rem}
.rech-erg__aktionen .knopf{justify-content:center;min-width:0;white-space:normal;text-align:center}
.rech-erg__hinweis{font-size:.8rem;line-height:1.45;color:var(--fg3);padding-top:1rem;border-top:1px solid var(--linie)}
@media (max-width:960px){.rech-erg{position:relative;top:auto}}
@media (max-width:420px){.rech-erg__raster{grid-template-columns:1fr 1fr}.rech-erg__raster div:first-child{grid-column:1/-1}}
@media (prefers-reduced-motion:reduce){.rech-erg::before{animation:none}}

/* ---------- Mobile Ergebnisleiste ---------- */
.rech-leiste{display:none}
@media (max-width:960px){
  .rech-leiste{position:fixed;left:.75rem;right:.75rem;bottom:calc(.75rem + env(safe-area-inset-bottom));z-index:40;display:grid;grid-template-columns:auto auto 1fr;gap:1rem;align-items:center;
    padding:.6rem .6rem .6rem 1rem;border-radius:18px;background:color-mix(in srgb,var(--bg2) 88%,transparent);border:1px solid var(--linie2);box-shadow:var(--schatten);
    backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
    transform:translate3d(0,140%,0);opacity:0;pointer-events:none;transition:transform 420ms var(--ease-ios),opacity 260ms ease}
  .rech-leiste.ist-da{transform:none;opacity:1;pointer-events:auto}
  .rech-leiste b{display:block;font-size:1.05rem;font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1;white-space:nowrap}
  .rech-leiste span{font-family:var(--mono);font-size:.62rem;color:var(--fg3);white-space:nowrap}
  .rech-leiste .knopf{justify-self:end}
}
@media (max-width:360px){.rech-leiste{grid-template-columns:auto 1fr}.rech-leiste>div:nth-child(2){display:none}}

/* ---------- Balkendiagramm ---------- */
.rech-dia{margin:0;padding:clamp(1.25rem,3vw,2.25rem);border-radius:calc(var(--radius) + 4px);border:1px solid var(--glas-rand,var(--linie));background:var(--rech-flaeche);
  backdrop-filter:blur(16px) saturate(130%);-webkit-backdrop-filter:blur(16px) saturate(130%)}
.rech-dia__flaeche{width:100%;min-height:120px}
.rech-svg{display:block;width:100%;height:auto;overflow:visible}
.rech-svg text{font-family:var(--mono);font-size:12px;fill:var(--fg3)}
.rech-svg__name{font-family:var(--font)!important;font-size:15px!important;fill:var(--fg)!important;font-weight:500}
.rech-svg__summe{font-size:14px!important;fill:var(--fg)!important;font-variant-numeric:tabular-nums}
.rech-svg__raster line{stroke:var(--linie);stroke-width:1;shape-rendering:crispEdges}
.rech-svg__bahn{fill:color-mix(in srgb,var(--fg) 4%,transparent)}
.rech-svg__seg{transform-origin:0 0;transform-box:view-box;transition:transform 900ms var(--ease-out)}
.rech-svg__seg--hand{fill:color-mix(in srgb,var(--fg) 58%,var(--bg))}
.rech-svg__seg--fehler{fill:var(--rech-fehler)}
.rech-svg__seg--frei{fill:var(--rech-auto2)}
.rech-svg__frei{pointer-events:none}
.rech-svg__luecke{fill:color-mix(in srgb,var(--rech-auto) 12%,transparent);stroke:color-mix(in srgb,var(--rech-auto) 70%,transparent);stroke-width:1.2;stroke-dasharray:4 4;
  transform-origin:0 0;transform-box:view-box;transition:transform 900ms var(--ease-out);vector-effect:non-scaling-stroke}
.rech-svg__freitext{font-size:13px!important;fill:var(--rech-auto)!important;font-weight:500;transition:opacity 300ms ease}
.rech-svg__freitext.ist-weg{opacity:0}
.rech-dia__legende,.rech-punkte__legende{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin-top:1.25rem;font-family:var(--mono);font-size:.7rem;color:var(--fg2)}
.rech-dia__legende span,.rech-punkte__legende span{display:inline-flex;align-items:center;gap:.5rem}
.rech-l{display:inline-block;width:10px;height:10px;border-radius:3px;flex:none}
.rech-l--hand{background:color-mix(in srgb,var(--fg) 58%,var(--bg))}
.rech-l--fehler{background:var(--rech-fehler)}
.rech-l--frei{background:var(--rech-auto2)}
.rech-l--auto{background:color-mix(in srgb,var(--rech-auto) 70%,transparent)}
@media (prefers-reduced-motion:reduce){.rech-svg__seg,.rech-svg__luecke{transition:none}}

/* ---------- Punktfelder ---------- */
.rech-punkte{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:1.5rem 2rem;align-items:center;margin-top:1rem;padding:clamp(1.25rem,3vw,2.25rem);
  border-radius:calc(var(--radius) + 4px);border:1px solid var(--glas-rand,var(--linie));background:var(--rech-flaeche);backdrop-filter:blur(16px) saturate(130%);-webkit-backdrop-filter:blur(16px) saturate(130%)}
.rech-punkte__kopf{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:.9rem}
.rech-punkte__kopf b{font-weight:500;font-size:1.05rem}
.rech-punkte__kopf span{font-family:var(--mono);font-size:.7rem;color:var(--fg2);text-align:right}
.rech-punkte__pfeil{width:40px;height:40px;border-radius:50%;border:1px solid var(--linie2);display:grid;place-items:center;color:var(--fg2)}
.rech-punkte__pfeil svg{width:18px;height:18px}
.rech-punkte__legende{grid-column:1/-1;margin-top:0}
.rech-matrix{display:grid;grid-template-columns:repeat(20,minmax(0,1fr));gap:clamp(3px,.5vw,6px)}
.rech-zelle{position:relative;aspect-ratio:1;border-radius:28%;background:color-mix(in srgb,var(--fg) 30%,transparent)}
.rech-zelle i,.rech-zelle b{position:absolute;inset:0;border-radius:inherit;opacity:0;transform:scale(.3);
  transition:opacity 420ms var(--ease-out),transform 520ms var(--ease-out);transition-delay:calc(var(--i,0) * 18ms)}
.rech-zelle i{background:var(--rech-fehler);box-shadow:0 0 12px color-mix(in srgb,var(--rech-fehler) 60%,transparent)}
.rech-zelle b{background:color-mix(in srgb,var(--rech-auto) 70%,var(--bg))}
.rech-zelle.ist-fehler i{opacity:1;transform:none}
.rech-zelle.ist-auto b{opacity:1;transform:none}
/* Fehler, die wegfallen: kurzer Ring an der Stelle, an der der Punkt verschwindet */
.rech-zelle.war-fehler::after{content:"";position:absolute;inset:-3px;border-radius:34%;border:1.5px solid var(--rech-auto);opacity:0;animation:rech-ring 1.4s var(--ease-out) .4s both}
@keyframes rech-ring{0%{opacity:0;transform:scale(.6)}30%{opacity:1}100%{opacity:0;transform:scale(1.6)}}
@media (max-width:760px){.rech-matrix{grid-template-columns:repeat(10,minmax(0,1fr))}.rech-punkte{grid-template-columns:1fr}.rech-punkte__pfeil{transform:rotate(90deg);justify-self:center}}
@media (prefers-reduced-motion:reduce){.rech-zelle i,.rech-zelle b{transition:none}.rech-zelle.war-fehler::after{animation:none}}

/* ---------- Offene Formel ---------- */
.rech-formel{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.rech-formel__kopf{position:sticky;top:calc(var(--kopf-h) + 2rem)}
.rech-formel__kopf h2{margin-bottom:1rem}
@media (max-width:900px){.rech-formel{grid-template-columns:1fr}.rech-formel__kopf{position:static}}
.rech-rechnung{list-style:none;margin:0;padding:0;border-top:1px solid var(--linie);font-variant-numeric:tabular-nums}
.rech-rechnung li{display:grid;grid-template-columns:minmax(0,11rem) minmax(0,1fr) auto;gap:.4rem 1.25rem;align-items:baseline;padding:.85rem 0;border-bottom:1px solid var(--linie)}
.rech-rechnung__was{color:var(--fg2);font-size:.95rem}
.rech-rechnung__wie{font-family:var(--mono);font-size:.8rem;color:var(--fg3);overflow-wrap:anywhere}
.rech-rechnung__wie small{display:block;font-size:.7rem;margin-top:.15rem;color:var(--fg3);opacity:.8}
.rech-rechnung b{font-weight:500;font-size:1.05rem;text-align:right;white-space:nowrap}
.rech-rechnung li.ist-summe b{font-size:1.3rem;color:var(--fg)}
.rech-rechnung li.ist-summe .rech-rechnung__was{color:var(--fg);font-weight:500}
@media (max-width:560px){.rech-rechnung li{grid-template-columns:minmax(0,1fr) auto}.rech-rechnung__wie{grid-column:1/-1;grid-row:2}}
.rech-annahmen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:2rem}
.rech-annahmen div{padding:1.1rem 1.15rem;border-radius:var(--radius);border:1px solid var(--glas-rand,var(--linie));background:var(--glas-flaeche,transparent)}
.rech-annahmen b{display:block;font-weight:500;font-size:.95rem;margin-bottom:.4rem}
.rech-annahmen p{color:var(--fg2);font-size:.86rem;line-height:1.45}
@media (max-width:760px){.rech-annahmen{grid-template-columns:1fr}}

/* =====================================================================
   Konfigurator
   ===================================================================== */
.rech-schritt{border:0;margin:0;min-width:0;padding-inline:0}
.rech-schritt legend{display:flex;align-items:baseline;gap:.8rem;padding:0;font-size:1.4rem;font-weight:450;letter-spacing:-.03em;line-height:1.2;margin-bottom:.5rem;float:left;width:100%}
.rech-schritt legend+*{clear:both}
.rech-schritt__nr{font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;color:var(--fg3);font-weight:500}
.rech-schritt>p{color:var(--fg2);margin-bottom:1.25rem;font-size:.98rem}
.rech-schritt>p.rech-schritt__fuss{margin:.6rem 0 0;font-family:var(--mono);font-size:.7rem;color:var(--fg3)}
.rech-bereiche{grid-template-columns:repeat(3,minmax(0,1fr))}
.rech-bereiche label{min-height:140px}
.rech-bereiche label::after{content:"";position:absolute;top:.85rem;right:.85rem;width:18px;height:18px;border-radius:6px;border:1px solid var(--linie2);transition:background-color 160ms ease,border-color 160ms ease}
.rech-bereiche label:has(input:checked)::after{background:var(--fg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0b0e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/12px no-repeat;border-color:var(--fg)}
.rech-bereiche label:has(input:checked) svg{color:var(--fg)}
@media (max-width:1100px){.rech-bereiche{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.rech-bereiche{grid-template-columns:1fr}.rech-bereiche label{min-height:0}}
.rech-chips label{min-height:0}
.rech-dringend label{min-height:96px}
@media (max-width:420px){.rech-dringend{grid-template-columns:1fr}}

/* Fahrplan in der Ergebniskarte */
.rech-plan{list-style:none;margin:0;padding:0;display:grid;gap:0;position:relative}
.rech-plan::before{content:"";position:absolute;left:.62rem;top:.9rem;bottom:.9rem;width:1px;background:color-mix(in srgb,var(--bg) 25%,transparent)}
.rech-plan li{position:relative;display:grid;grid-template-columns:1.3rem minmax(0,1fr) auto;gap:.85rem;align-items:start;padding:.55rem 0;animation:rech-ein 460ms var(--ease-out) both;animation-delay:calc(var(--i,0) * 60ms)}
.rech-plan li i{position:relative;z-index:1;display:grid;place-items:center;width:1.3rem;height:1.3rem;border-radius:50%;background:var(--fg);border:1px solid color-mix(in srgb,var(--bg) 40%,transparent);
  font-style:normal;font-family:var(--mono);font-size:.56rem;color:color-mix(in srgb,var(--bg) 75%,var(--fg))}
.rech-plan li:first-child i{background:var(--bg);color:var(--fg);border-color:var(--bg)}
.rech-plan li b{display:block;font-weight:500;font-size:.98rem;line-height:1.25}
.rech-plan li span{display:block;font-size:.82rem;line-height:1.35;color:color-mix(in srgb,var(--bg) 70%,var(--fg))}
.rech-plan li em{font-style:normal;font-family:var(--mono);font-size:.72rem;white-space:nowrap;color:var(--bg);padding:.12rem .5rem;border-radius:999px;border:1px solid color-mix(in srgb,var(--bg) 30%,transparent)}
.rech-plan.ist-leer li{opacity:.55}
@keyframes rech-ein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.rech-plan.ist-leer li{animation:none}
@media (prefers-reduced-motion:reduce){.rech-plan li{animation:none}}
.rech-fahrplan__rat{display:grid;gap:.45rem;font-size:.86rem;line-height:1.45;color:color-mix(in srgb,var(--bg) 78%,var(--fg))}
.rech-fahrplan__rat:empty{display:none}
.rech-fahrplan__rat span{padding-left:.9rem;position:relative}
.rech-fahrplan__rat span::before{content:"";position:absolute;left:0;top:.6em;width:4px;height:4px;border-radius:50%;background:currentColor}
.rech-belege{padding-top:1rem;border-top:1px solid color-mix(in srgb,var(--bg) 20%,transparent)}
.rech-belege .kick{color:color-mix(in srgb,var(--bg) 70%,var(--fg))}
.rech-belege ul{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.rech-belege li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.1rem .8rem}
.rech-belege li b{font-weight:500;font-size:.92rem}
.rech-belege li span{grid-column:1;font-size:.8rem;line-height:1.35;color:color-mix(in srgb,var(--bg) 70%,var(--fg))}
.rech-belege li em{grid-column:2;grid-row:1;font-style:normal;font-family:var(--mono);font-size:.62rem;letter-spacing:.03em;white-space:nowrap;padding:.12rem .45rem;border-radius:999px;background:color-mix(in srgb,var(--bg) 10%,transparent);align-self:start}
.rech-fahrplan .knopf.ist-still{opacity:.45;pointer-events:none}
.rech-fahrplan{gap:1.1rem}

/* =====================================================================
   Kontakt: Prozess-Check
   ===================================================================== */
.rech-kontakt{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:start}
.rech-formular{padding:clamp(1.25rem,3vw,2.25rem);border-radius:calc(var(--radius) + 4px);border:1px solid var(--linie2);background:var(--rech-flaeche);box-shadow:var(--schatten);
  backdrop-filter:blur(16px) saturate(130%);-webkit-backdrop-filter:blur(16px) saturate(130%)}
.rech-formular__paar{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
@media (max-width:560px){.rech-formular__paar{grid-template-columns:1fr}}
.rech-formular .feld input,.rech-formular .feld textarea{background:color-mix(in srgb,var(--bg) 60%,transparent)}
.rech-formular .feld textarea{min-height:170px}
.rech-formular .feld [aria-invalid="true"]{border-color:var(--rech-fehler)}
.rech-frei{color:var(--fg3);margin-left:.35rem}
.rech-programme{border:0;padding:0;margin:0 0 1.1rem;min-width:0}
.rech-programme legend{font-size:.8rem;font-family:var(--mono);color:var(--fg2);padding:0;margin-bottom:.5rem}
.rech-programme .wahl--chips{gap:.45rem}
.rech-uebernahme{display:flex;align-items:center;gap:.7rem;margin-bottom:1.4rem;padding:.75rem 1rem;border-radius:var(--radius-s);border:1px solid color-mix(in srgb,var(--rech-auto) 45%,transparent);background:color-mix(in srgb,var(--rech-auto) 9%,transparent);font-size:.9rem;animation:rech-ein 500ms var(--ease-out) both}
.rech-uebernahme svg{width:18px;height:18px;flex:none;color:var(--rech-auto)}
.rech-uebernahme span{flex:1}
.rech-uebernahme a{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--fg);border-bottom:1px solid var(--linie2)}
.rech-uebernahme[hidden],.rech-gesendet[hidden],.rech-fehler-text[hidden]{display:none}
.rech-fehler-text{margin:0 0 1rem;color:var(--rech-fehler);font-size:.9rem}
.rech-gesendet{margin-top:1.25rem;padding:1rem 1.1rem;border-radius:var(--radius-s);border:1px solid var(--linie2);display:grid;gap:.8rem;justify-items:start;font-size:.9rem;color:var(--fg2);animation:rech-ein 400ms var(--ease-out) both}
.rech-gesendet b{color:var(--fg);font-weight:500}
.rech-formular>.knopf{width:100%;justify-content:center}
.rech-check{display:grid;gap:2rem;align-content:start;padding-top:.5rem}
.rech-check .kick{margin:0}
.rech-check__liste{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--linie)}
.rech-check__liste li{display:grid;grid-template-columns:2.6rem minmax(0,1fr);gap:1rem;padding:1.3rem 0;border-bottom:1px solid var(--linie)}
.rech-check__liste i{font-style:normal;font-size:1.9rem;font-weight:300;letter-spacing:-.05em;line-height:1;color:var(--fg3);font-variant-numeric:tabular-nums}
.rech-check__liste b{display:block;font-weight:500;font-size:1.08rem;margin-bottom:.3rem;letter-spacing:-.01em}
.rech-check__liste p{color:var(--fg2);font-size:.94rem;line-height:1.5}
.rech-check__danach p{color:var(--fg2);font-size:.92rem;margin-top:.8rem;max-width:46ch}
.rech-check__schritte{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem}
.rech-check__schritte span{font-family:var(--mono);font-size:.74rem;padding:.35rem .75rem;border-radius:999px;border:1px solid var(--linie2);background:var(--glas-flaeche,transparent)}
.rech-check__schritte{gap:.4rem 1.1rem}.rech-check__schritte span{position:relative}
.rech-check__schritte span+span::before{content:"";position:absolute;left:-1rem;top:50%;width:.9rem;height:1px;background:var(--fg3)}
.rech-check__daten{gap:1rem}
@media (max-width:900px){.rech-kontakt{grid-template-columns:1fr}}
@media (max-width:520px){
  .rech-plan li{grid-template-columns:1.3rem minmax(0,1fr)}
  .rech-plan li em{grid-column:2;justify-self:start;margin-top:.15rem}
  .rech-check__schritte{gap:.4rem}
  .rech-check__schritte span+span::before{display:none}
}

/* ==== seiten.css ==== */
/* =====================================================================
   Bereich „seiten": Branchen, Sicherheit, Vorgehen, Über, 404, Recht.
   Präfix se-. Nur transform/opacity werden bewegt, Hover hinter (hover:hover).
   ===================================================================== */
:root{--se-warn:#e3aa5a;--se-warn-flaeche:rgba(227,170,90,.1);--se-ok:#ededef}

/* ---------- Gemeinsam ---------- */
/* Ruhiger Grund für textreiche Abschnitte über der 3D-Szene */
.se-ruhig{background:color-mix(in srgb,var(--bg) 82%,transparent)}
.se-status{display:inline-flex;align-items:center;gap:.4rem;align-self:flex-start;justify-self:start;height:22px;padding:0 .6rem;border-radius:999px;border:1px solid var(--linie2);font-family:var(--mono);font-size:.66rem;letter-spacing:.04em;color:var(--fg2);white-space:nowrap}
.se-status::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.8}
.se-zwischen{font-family:var(--mono);font-weight:500;font-size:.74rem;letter-spacing:.04em;color:var(--fg3);margin:0 0 .9rem;line-height:1.4}
.se-zwischen--abstand{margin-top:2.6rem}
.se-glas,.se-fluss,.se-beispiel,.se-zweit,.se-vier>div,.se-schranke__beleg,.se-schranke__pruefung,.se-ehrlich,.se-bild,.se-wahl__kachel,.se-modus{
  background:var(--glas-flaeche);border:1px solid var(--glas-rand);
  -webkit-backdrop-filter:blur(var(--glas-blur)) saturate(130%);backdrop-filter:blur(var(--glas-blur)) saturate(130%)}
@media (prefers-reduced-transparency:reduce){.se-fluss,.se-beispiel,.se-zweit,.se-vier>div,.se-schranke__beleg,.se-schranke__pruefung,.se-ehrlich,.se-bild,.se-wahl__kachel,.se-modus{background:var(--bg2);-webkit-backdrop-filter:none;backdrop-filter:none}}
@keyframes se-ein{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- Branchen: Auswahlkacheln ---------- */
.se-wahl{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.6rem}
.se-wahl__kachel{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:.35rem;min-height:178px;padding:1.15rem 1.15rem 1.25rem;border-radius:var(--radius);text-align:left;overflow:hidden;
  transition:transform 260ms var(--ease-out),border-color 220ms ease,background-color 220ms ease}
.se-wahl__kachel:active{transform:scale(.985)}
.se-wahl__nr{position:absolute;top:1.1rem;right:1.15rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;color:var(--fg3)}
.se-wahl__ico{width:28px;height:28px;color:var(--fg3);margin-bottom:auto;transition:color 220ms ease,transform 400ms var(--ease-out)}
.se-wahl__kachel b{font-weight:500;font-size:1rem;line-height:1.25;letter-spacing:-.01em;margin-top:1.4rem;hyphens:auto;-webkit-hyphens:auto}
.se-wahl__kachel small{font-family:var(--mono);font-size:.68rem;letter-spacing:.02em;color:var(--fg3)}
.se-wahl__balken{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--fg);transform:scaleX(0);transform-origin:left;transition:transform 600ms var(--ease-out)}
.se-wahl__kachel[aria-selected="true"]{border-color:color-mix(in srgb,var(--fg) 34%,transparent);background:var(--glas-flaeche2)}
.se-wahl__kachel[aria-selected="true"] .se-wahl__ico{color:var(--fg);transform:translateY(-2px)}
.se-wahl__kachel[aria-selected="true"] .se-wahl__balken{transform:scaleX(1)}
.se-wahl__kachel[aria-selected="true"] small{color:var(--fg2)}
@media (hover:hover) and (pointer:fine){
  .se-wahl__kachel:hover{transform:translateY(-3px);border-color:var(--linie2)}
  .se-wahl__kachel:hover .se-wahl__ico{color:var(--fg2)}
  .se-wahl__kachel[aria-selected="true"]:hover .se-wahl__ico{color:var(--fg)}
}

/* Umschalter Heute / Mit Software */
.se-modus{display:inline-flex;align-items:center;gap:.2rem;margin-top:1.4rem;padding:4px 4px 4px 1rem;border-radius:999px}
.se-modus__titel{font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;color:var(--fg3);margin-right:.6rem}
.se-modus__knopf{height:34px;padding:0 1rem;border-radius:999px;font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--fg2);transition:background-color 240ms var(--ease-out),color 200ms ease}
.se-modus__knopf[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
.se-modus__knopf:active{transform:scale(.97)}
@media (hover:hover){.se-modus__knopf:not([aria-pressed="true"]):hover{color:var(--fg)}}

/* ---------- Branchen: Inhalt ---------- */
.se-panels{margin-top:2.2rem}
.se-branche[hidden]{display:none}
.se-branche:focus{outline:0}
.se-branche:focus-visible{outline:2px solid var(--akzent);outline-offset:8px;border-radius:var(--radius)}
.has-motion .se-branche.ist-aktiv>*{animation:se-ein 640ms var(--ease-out) both}
.has-motion .se-branche.ist-aktiv>:nth-child(2){animation-delay:80ms}
.has-motion .se-branche.ist-aktiv>:nth-child(3){animation-delay:160ms}
.se-branche__kopf{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:1.5rem clamp(2rem,5vw,4.5rem);align-items:end}
.se-branche__kopf .kick{margin-bottom:.9rem}
.se-branche__kopf h2{font-size:clamp(1.8rem,3.4vw,2.8rem)}
.se-branche__kopf .lead{font-size:1.04rem;max-width:none}

.se-fluss{margin-top:2.4rem;padding:1.4rem clamp(1.1rem,2.4vw,1.8rem) 1.6rem;border-radius:var(--radius)}
.se-fluss__leiste{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 1.5rem;margin-bottom:1.5rem}
.se-fluss__titel{display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:var(--fg2)}
.se-fluss__titel--abstand{margin-top:1.6rem}
.se-fluss__legende{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.68rem;color:var(--fg3)}
.se-fluss__legende i{width:8px;height:8px;border-radius:50%;background:var(--se-warn);box-shadow:0 0 0 3px var(--se-warn-flaeche)}
[data-modus="nachher"] .se-fluss__legende i{background:var(--fg);box-shadow:0 0 0 3px rgba(255,255,255,.08)}
.se-fluss__schritte{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1rem}
.se-fluss__schritte::before,.se-fluss__schritte::after{content:"";position:absolute;left:6px;right:6px;top:5px;height:1px;background:var(--linie2)}
.se-fluss__schritte::after{background:linear-gradient(to right,transparent,var(--fg) 12%,var(--fg) 88%,transparent);transform:scaleX(0);transform-origin:left;transition:transform 1100ms var(--ease-out)}
[data-modus="nachher"] .se-fluss__schritte::after{transform:scaleX(1)}
.se-schritt{position:relative;display:grid;grid-template-areas:"nr" "name" "text";align-content:start;gap:.15rem;padding-top:1.5rem}
.se-schritt__punkt{position:absolute;top:0;left:0;width:11px;height:11px;border-radius:50%;background:var(--bg);border:1px solid var(--fg3);transition:background-color 300ms ease,border-color 300ms ease,box-shadow 300ms ease}
.se-schritt--fehler .se-schritt__punkt{border-color:var(--se-warn);background:var(--se-warn);box-shadow:0 0 0 4px var(--se-warn-flaeche)}
.se-schritt__nr{grid-area:nr;font-family:var(--mono);font-size:.64rem;letter-spacing:.04em;color:var(--fg3)}
.se-schritt b{grid-area:name;font-weight:500;font-size:.96rem;line-height:1.3;letter-spacing:-.01em;hyphens:auto;-webkit-hyphens:auto}
.se-schritt__vor,.se-schritt__nach{grid-area:text;font-size:.86rem;line-height:1.4;color:var(--fg2);margin-top:.25rem;transition:opacity 320ms var(--ease-out),transform 420ms var(--ease-out)}
.se-schritt--fehler .se-schritt__vor{color:var(--se-warn)}
.se-schritt__nach{opacity:0;transform:translateY(6px);color:var(--fg)}
[data-modus="nachher"] .se-schritt__vor{opacity:0;transform:translateY(-6px)}
[data-modus="nachher"] .se-schritt__nach{opacity:1;transform:none}
[data-modus="nachher"] .se-schritt__punkt{background:var(--fg);border-color:var(--fg);box-shadow:0 0 0 4px rgba(255,255,255,.07)}
.se-fluss__schritte .se-schritt:nth-child(2) *{transition-delay:60ms}
.se-fluss__schritte .se-schritt:nth-child(3) *{transition-delay:120ms}
.se-fluss__schritte .se-schritt:nth-child(4) *{transition-delay:180ms}
.se-fluss__schritte .se-schritt:nth-child(5) *{transition-delay:240ms}
.se-fluss__schritte .se-schritt:nth-child(6) *{transition-delay:300ms}
.has-motion .se-branche.ist-aktiv .se-schritt{animation:se-ein 560ms var(--ease-out) both}
.has-motion .se-branche.ist-aktiv .se-schritt:nth-child(1){animation-delay:220ms}
.has-motion .se-branche.ist-aktiv .se-schritt:nth-child(2){animation-delay:280ms}
.has-motion .se-branche.ist-aktiv .se-schritt:nth-child(3){animation-delay:340ms}
.has-motion .se-branche.ist-aktiv .se-schritt:nth-child(4){animation-delay:400ms}
.has-motion .se-branche.ist-aktiv .se-schritt:nth-child(5){animation-delay:460ms}
.has-motion .se-branche.ist-aktiv .se-schritt:nth-child(6){animation-delay:520ms}

.se-branche__raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2.5rem clamp(2rem,5vw,4.5rem);margin-top:3rem;align-items:start}
.se-stellen{list-style:none;margin:0;padding:0;counter-reset:se-st;border-bottom:1px solid var(--linie)}
.se-stellen li{position:relative;counter-increment:se-st;padding:1.05rem 0 1.1rem 2.6rem;border-top:1px solid var(--linie);display:grid;gap:.2rem}
.se-stellen li::before{content:counter(se-st,decimal-leading-zero);position:absolute;left:0;top:1.2rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;color:var(--se-warn)}
.se-stellen b{font-weight:500;font-size:1.04rem;letter-spacing:-.01em}
.se-stellen span{color:var(--fg2);font-size:.95rem;max-width:52ch}

.se-hilft{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--linie)}
.se-hilft a{display:grid;grid-template-columns:minmax(0,1fr) 18px;gap:.15rem 1rem;align-items:center;padding:.8rem 0;border-top:1px solid var(--linie)}
.se-hilft b{font-family:var(--mono);font-weight:500;font-size:.88rem;letter-spacing:0}
.se-hilft span{grid-column:1;color:var(--fg2);font-size:.88rem}
.se-hilft svg{grid-column:2;grid-row:1/3;width:16px;height:16px;color:var(--fg3);transition:transform 220ms var(--ease-out),color 200ms ease}
@media (hover:hover) and (pointer:fine){.se-hilft a:hover svg{transform:translateX(4px);color:var(--fg)}.se-hilft a:hover b{color:var(--fg)}}

.se-belege{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(0,1fr);gap:1rem;align-items:stretch}
.se-beispiel{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);border-radius:var(--radius);overflow:hidden;transition:border-color 220ms ease,box-shadow 300ms var(--ease-out)}
.se-beispiel__bild{display:block;position:relative;min-height:260px;overflow:hidden;background:var(--bg3)}
.se-beispiel__bild img{position:absolute;inset:0}
.se-beispiel__bild img{width:100%;height:100%;object-fit:cover;object-position:top left;transition:transform 900ms var(--ease-out)}
.se-beispiel__bild::after{content:"";position:absolute;inset:0;background:linear-gradient(to left,rgba(10,11,14,.5),transparent 40%);pointer-events:none}
.se-beispiel__text{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;padding:1.3rem 1.4rem 1.4rem}
.se-beispiel__text b{font-weight:500;font-size:1.08rem;letter-spacing:-.015em;line-height:1.3}
.se-beispiel__text>span:not(.se-status):not(.textlink){color:var(--fg2);font-size:.93rem}
.se-beispiel__text small{font-family:var(--mono);font-size:.7rem;letter-spacing:.02em;color:var(--fg3)}
.se-beispiel .textlink{margin-top:.35rem}
.se-zweit{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:.45rem;padding:1.05rem 3rem 1.15rem 1.25rem;border-radius:var(--radius);transition:border-color 220ms ease}
.se-zweit b{font-weight:500;font-size:.98rem;letter-spacing:-.01em}
.se-zweit>span:not(.se-status){color:var(--fg2);font-size:.9rem}
.se-zweit svg{position:absolute;top:1.05rem;right:1.1rem;width:16px;height:16px;color:var(--fg3);transition:transform 220ms var(--ease-out),color 200ms ease}
@media (hover:hover) and (pointer:fine){
  .se-beispiel:hover{border-color:var(--linie2);box-shadow:var(--schatten)}
  .se-beispiel:hover img{transform:scale(1.035)}
  .se-beispiel:hover .textlink svg{transform:translateX(3px)}
  a.se-zweit:hover{border-color:var(--linie2)}
  a.se-zweit:hover svg{transform:translate(2px,-2px);color:var(--fg)}
}

.se-vier{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.se-vier>div{display:flex;flex-direction:column;gap:.55rem;padding:1.5rem;border-radius:var(--radius)}
.se-vier__nr{font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;color:var(--fg3)}
.se-vier h3{font-size:1.35rem;margin-top:2.4rem}
.se-vier p{color:var(--fg2);font-size:.95rem}
.se-fehlt{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.2rem;margin-top:2.6rem;color:var(--fg2)}

@media (max-width:1080px){
  .se-wahl{grid-template-columns:repeat(3,minmax(0,1fr))}
  .se-wahl__kachel{min-height:150px}
  .se-vier{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .se-fluss__schritte{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:1.6rem}
  .se-fluss__schritte::before,.se-fluss__schritte::after{display:none}
  .se-branche__kopf,.se-branche__raster,.se-belege,.se-beispiel{grid-template-columns:1fr}
  .se-beispiel__bild{min-height:0;aspect-ratio:16/9}
  .se-beispiel__bild::after{background:linear-gradient(to top,rgba(10,11,14,.5),transparent 40%)}
}
@media (max-width:640px){
  .se-wahl{grid-template-columns:1fr 1fr;gap:.5rem}
  .se-wahl__kachel{min-height:0;padding:.85rem .9rem .95rem;gap:.2rem}
  .se-wahl__kachel:last-child{grid-column:1/-1}
  .se-wahl__ico{width:22px;height:22px}
  .se-wahl__nr{top:.85rem;right:.9rem}
  .se-wahl__kachel b{font-size:.9rem;margin-top:.7rem}
  .se-wahl__kachel small{display:none}
  .se-modus{width:100%;justify-content:space-between}
  .se-modus__titel{margin-right:0}
  .se-fluss__schritte{grid-template-columns:1fr;gap:0}
  .se-fluss__schritte::before,.se-fluss__schritte::after{display:block;left:5px;right:auto;top:8px;bottom:8px;width:1px;height:auto}
  .se-fluss__schritte::after{background:linear-gradient(to bottom,transparent,var(--fg) 10%,var(--fg) 90%,transparent);transform:scaleY(0);transform-origin:top}
  [data-modus="nachher"] .se-fluss__schritte::after{transform:scaleY(1)}
  .se-schritt{grid-template-areas:"nr name" "nr text";grid-template-columns:2rem minmax(0,1fr);padding:.55rem 0 .55rem 1.6rem;column-gap:.2rem}
  .se-schritt__punkt{top:.8rem}
  .se-schritt__nr{padding-top:.2rem}
  .se-schritt__vor,.se-schritt__nach{margin-top:.05rem}
  .se-vier{grid-template-columns:1fr}
  .se-vier>div{min-height:0}
  .se-vier h3{margin-top:.8rem}
}

/* ---------- Sicherheit: Schichtenmodell ---------- */
.se-schichten{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,6vw,6rem)}
.se-schichten__buehne{position:sticky;top:calc(var(--kopf-h) + 1rem);align-self:start;height:calc(100svh - var(--kopf-h) - 2rem);display:flex;flex-direction:column;justify-content:center;align-items:center}
.se-stapel{width:100%;max-width:560px;height:auto;overflow:visible}
.se-platte{opacity:0;transform:translateY(-40px);transition:opacity 520ms var(--ease-out),transform 760ms var(--ease-out)}
.se-platte.ist-da{opacity:1;transform:none}
.se-platte__oben{fill:#15181e;stroke:rgba(255,255,255,.26);stroke-width:1.1;stroke-linejoin:round;transition:fill 400ms ease,stroke 400ms ease}
.se-platte__seite{fill:#0e1014;stroke:rgba(255,255,255,.14);stroke-width:1;stroke-linejoin:round}
.se-platte__seite--r{fill:#121419}
.se-platte__nr{font-family:var(--mono);font-size:12px;letter-spacing:.06em;fill:var(--fg3);text-anchor:middle;transition:fill 300ms ease}
.se-platte__name{font-family:var(--mono);font-size:14px;fill:var(--fg3);transition:fill 300ms ease}
.se-platte__linie{stroke:var(--linie2);stroke-width:1;transition:stroke 300ms ease}
.se-platte.ist-aktiv .se-platte__oben{fill:#1b2331;stroke:var(--akzent)}
.se-platte.ist-aktiv .se-platte__nr,.se-platte.ist-aktiv .se-platte__name{fill:var(--fg)}
.se-platte.ist-aktiv .se-platte__linie{stroke:var(--fg2)}
.se-mensch{fill:none;stroke:var(--fg3);stroke-width:1.4;stroke-linecap:round;opacity:.35;transition:opacity 500ms ease,stroke 500ms ease}
.se-schichten.ist-voll .se-mensch{opacity:1;stroke:var(--fg)}
.se-schichten__stand{margin-top:1.4rem;font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;color:var(--fg3);text-align:center;min-height:1.2em}
.se-schichten__zahl{color:var(--fg)}
.se-schichten__name{color:var(--fg2)}
.se-schichten__liste{list-style:none;margin:0;padding:0}
.se-schicht{min-height:68svh;display:flex;flex-direction:column;justify-content:center;padding:2rem 0;opacity:.28;transition:opacity 500ms var(--ease-out)}
.se-schicht:first-child{min-height:56svh}
.se-schicht.ist-aktiv{opacity:1}
.no-motion .se-schicht{opacity:1;min-height:0;padding:1.8rem 0;border-top:1px solid var(--linie)}
.se-schicht__nr{font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;color:var(--fg3)}
.se-schicht h3{font-size:clamp(1.55rem,2.6vw,2.15rem);font-weight:450;letter-spacing:-.03em;margin:.7rem 0 .9rem;max-width:20ch}
.se-schicht p{color:var(--fg2);max-width:46ch}
@media (max-width:820px){
  .se-schichten{grid-template-columns:1fr;gap:0}
  .se-schichten__buehne{top:var(--kopf-h);z-index:2;height:auto;margin-inline:-1.25rem;padding:.6rem 1.25rem .9rem;
    background:color-mix(in srgb,var(--bg) 86%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--linie)}
  .se-stapel{width:auto;max-width:100%;height:min(30svh,250px)}
  .se-platte__name,.se-platte__linie{display:none}
  .se-platte__nr{font-size:20px}
  .se-schichten__stand{margin-top:.5rem}
  .se-schicht{min-height:52svh;padding:1.5rem 0}
  .se-schicht:first-child{min-height:44svh}
  .no-motion .se-schichten__buehne{position:relative;top:auto}
}

/* ---------- Sicherheit: Prüfschranke ---------- */
.se-schranke{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:1rem;align-items:stretch}
.se-schranke__beleg,.se-schranke__pruefung{border-radius:var(--radius);padding:clamp(1.25rem,2.6vw,1.9rem)}
.se-schranke__kopf{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.6rem 1rem}
.se-schranke__nummer{font-family:var(--mono);font-weight:500;font-size:.9rem;letter-spacing:.02em}
.se-schranke.ist-fest .se-schranke__status{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.se-schranke.ist-storno .se-schranke__status{background:transparent;color:var(--se-warn);border-color:var(--se-warn)}
.se-felder{margin:1.3rem 0 1.5rem;border-bottom:1px solid var(--linie)}
.se-felder>div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:1rem;padding:.7rem .5rem;margin-inline:-.5rem;border-top:1px solid var(--linie);border-radius:6px;transition:background-color 300ms ease}
.se-felder dt{font-family:var(--mono);font-size:.7rem;letter-spacing:.03em;color:var(--fg3);padding-top:.2rem}
.se-felder dd{margin:0;color:var(--fg);font-size:.98rem}
.se-leitweg{color:var(--se-warn);font-family:var(--mono);font-size:.86rem;border-bottom:1px dashed currentColor}
.se-felder__leitweg.ist-gefuellt .se-leitweg{color:var(--fg);border-bottom-color:transparent}
.se-felder__leitweg.ist-fehler{background:var(--se-warn-flaeche)}
.has-motion .se-felder__leitweg.ist-fehler dd{animation:se-ruck 420ms var(--ease-out)}
.has-motion .se-felder__leitweg.ist-gefuellt dd{animation:se-ein 420ms var(--ease-out)}
@keyframes se-ruck{0%,100%{transform:none}20%{transform:translateX(-6px)}45%{transform:translateX(5px)}70%{transform:translateX(-3px)}}
.se-schranke__knoepfe .knopf[disabled]{opacity:.4;cursor:default;transform:none}
.se-schranke__knoepfe [hidden]{display:none}
.se-checks{list-style:none;margin:.9rem 0 0;padding:0;border-bottom:1px solid var(--linie)}
.se-checks li{display:flex;align-items:center;gap:.75rem;padding:.62rem 0;border-top:1px solid var(--linie);font-size:.95rem;color:var(--fg2);transition:color 200ms ease}
.se-checks i{position:relative;flex:none;width:18px;height:18px;border-radius:50%;border:1px solid var(--linie2);transition:background-color 220ms ease,border-color 220ms ease,transform 300ms var(--ease-out)}
.se-checks i::after{content:"";position:absolute;inset:0;background:currentColor;opacity:0;transform:scale(.6);transition:opacity 200ms ease,transform 300ms var(--ease-out)}
.se-checks li[data-zustand="laeuft"] i{border-color:var(--fg2);animation:se-puls 700ms ease-in-out infinite alternate}
.se-checks li[data-zustand="ok"]{color:var(--fg)}
.se-checks li[data-zustand="ok"] i{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.se-checks li[data-zustand="fehler"]{color:var(--se-warn)}
.se-checks li[data-zustand="fehler"] i{background:var(--se-warn);border-color:var(--se-warn);color:var(--bg)}
.se-checks li[data-zustand="ok"] i::after{opacity:1;transform:none;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat}
.se-checks li[data-zustand="fehler"] i::after{opacity:1;transform:none;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M8 8l8 8M16 8l-8 8'/%3E%3C/svg%3E") center/11px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M8 8l8 8M16 8l-8 8'/%3E%3C/svg%3E") center/11px no-repeat}
@keyframes se-puls{from{transform:scale(.85);opacity:.5}to{transform:scale(1.05);opacity:1}}
@media (prefers-reduced-motion:reduce){.se-checks li[data-zustand="laeuft"] i{animation:none}}
.se-schranke__meldung{margin-top:1.1rem;padding:.9rem 1rem;border-radius:var(--radius-s);border:1px solid var(--linie);font-size:.94rem;color:var(--fg2);line-height:1.5;transition:border-color 260ms ease,background-color 260ms ease,color 260ms ease}
.se-schranke__meldung.ist-fehler{border-color:color-mix(in srgb,var(--se-warn) 60%,transparent);background:var(--se-warn-flaeche);color:var(--fg)}
.se-schranke__meldung.ist-ok{border-color:color-mix(in srgb,var(--fg) 45%,transparent);background:rgba(255,255,255,.04);color:var(--fg)}
.se-protokoll{list-style:none;margin:.6rem 0 0;padding:0;font-family:var(--mono);font-size:.72rem;letter-spacing:.01em}
.se-protokoll li{display:grid;grid-template-columns:5.2rem minmax(0,1fr);gap:.8rem;padding:.42rem 0;border-top:1px solid var(--linie);color:var(--fg2)}
.se-protokoll time{color:var(--fg3)}
.has-motion .se-protokoll li.ist-neu{animation:se-ein 420ms var(--ease-out)}
.se-fussnote{margin-top:1.1rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.02em;color:var(--fg3)}
.se-fussnote a{color:var(--fg2);border-bottom:1px solid var(--linie2)}
@media (max-width:860px){.se-schranke{grid-template-columns:1fr}}
@media (max-width:520px){.se-felder>div{grid-template-columns:1fr;gap:.15rem}.se-schranke__knoepfe .knopf{flex:1 1 auto;justify-content:center}}

/* ---------- Sicherheit: Sprachmodelle, Datenschutz, Ehrlichkeit ---------- */
.se-zwei{display:grid;grid-template-columns:1fr 1fr;gap:3rem clamp(2rem,6vw,6rem)}
.se-zwei h2{font-size:clamp(1.8rem,3.2vw,2.6rem);margin-bottom:1.2rem}
.se-zwei p{color:var(--fg2);max-width:52ch}
.se-zwei p+p{margin-top:.9rem}
@media (max-width:820px){.se-zwei{grid-template-columns:1fr}}
.se-ehrlich{border-radius:var(--radius);padding:clamp(1.5rem,4vw,2.8rem)}
.se-ehrlich h2{font-size:clamp(1.8rem,3.2vw,2.6rem);margin-bottom:1.2rem}
.se-ehrlich p{color:var(--fg2)}
.se-ehrlich p+p{margin-top:.9rem}

/* ---------- Vorgehen: Ablaufbild ---------- */
.se-bild{margin:0;border-radius:var(--radius);padding:clamp(1.4rem,3vw,2.2rem) clamp(1.2rem,3vw,2.2rem) 1.4rem}
.se-bild__liste{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:.8rem}
.se-bild__liste::before{content:"";position:absolute;left:6px;right:6px;top:6px;height:1px;background:var(--linie2);transform-origin:left}
.se-bild__knoten{position:relative;display:grid;gap:.15rem;align-content:start;padding-top:1.7rem}
.se-bild__knoten i{position:absolute;top:0;left:0;width:13px;height:13px;border-radius:50%;background:var(--bg);border:1px solid var(--fg2)}
.se-bild__knoten--fehler i{background:var(--se-warn);border-color:var(--se-warn);box-shadow:0 0 0 5px var(--se-warn-flaeche)}
.se-bild__nr{font-family:var(--mono);font-size:.64rem;color:var(--fg3)}
.se-bild__knoten b{font-weight:500;font-size:.92rem;line-height:1.3;letter-spacing:-.01em;hyphens:auto;-webkit-hyphens:auto}
.se-bild__wer{font-family:var(--mono);font-size:.68rem;color:var(--fg3)}
.se-bild__knoten--fehler .se-bild__wer{color:var(--se-warn)}
.se-bild__summe{display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem 2rem;margin-top:1.8rem;padding-top:1.2rem;border-top:1px solid var(--linie);font-family:var(--mono);font-size:.74rem;color:var(--fg2)}
.se-bild__summe b{font-family:var(--font);font-size:2rem;font-weight:300;letter-spacing:-.04em;color:var(--fg);margin-right:.3rem;font-variant-numeric:tabular-nums}
.se-bild__hinweis{margin-left:auto;color:var(--fg3)}
.has-motion .se-bild .se-bild__liste::before{transform:scaleX(0);transition:transform 1300ms var(--ease-out) 200ms}
.has-motion .se-bild.in .se-bild__liste::before{transform:scaleX(1)}
.has-motion .se-bild .se-bild__knoten{opacity:0;transform:translateY(10px);transition:opacity 500ms var(--ease-out),transform 600ms var(--ease-out)}
.has-motion .se-bild .se-bild__knoten i{transform:scale(0);transition:transform 500ms var(--ease-ios)}
.has-motion .se-bild.in .se-bild__knoten{opacity:1;transform:none}
.has-motion .se-bild.in .se-bild__knoten i{transform:none}
.se-bild__knoten:nth-child(2),.se-bild__knoten:nth-child(2) i{transition-delay:120ms}
.se-bild__knoten:nth-child(3),.se-bild__knoten:nth-child(3) i{transition-delay:240ms}
.se-bild__knoten:nth-child(4),.se-bild__knoten:nth-child(4) i{transition-delay:360ms}
.se-bild__knoten:nth-child(5),.se-bild__knoten:nth-child(5) i{transition-delay:480ms}
.se-bild__knoten:nth-child(6),.se-bild__knoten:nth-child(6) i{transition-delay:600ms}
.se-bild__knoten:nth-child(7),.se-bild__knoten:nth-child(7) i{transition-delay:720ms}
.se-bild__knoten:nth-child(8),.se-bild__knoten:nth-child(8) i{transition-delay:840ms}
@media (max-width:980px){.se-bild__liste{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:1.6rem}.se-bild__liste::before{display:none}}
@media (max-width:560px){
  .se-bild__liste{grid-template-columns:1fr;gap:0}
  .se-bild__liste::before{display:block;left:6px;right:auto;top:10px;bottom:10px;width:1px;height:auto;transform-origin:top}
  .has-motion .se-bild .se-bild__liste::before{transform:scaleY(0)}
  .has-motion .se-bild.in .se-bild__liste::before{transform:scaleY(1)}
  .se-bild__knoten{grid-template-columns:2rem minmax(0,1fr);column-gap:.2rem;padding:.5rem 0 .5rem 1.7rem}
  .se-bild__knoten i{top:.75rem}
  .se-bild__nr{grid-row:1/3;padding-top:.2rem}
  .se-bild__hinweis{margin-left:0;flex-basis:100%}
}

/* ---------- 404 ---------- */
.se-404 h1{max-width:18ch}
.se-404__wege{margin-top:2.5rem}
.se-404__wege .zeile{padding-inline:.25rem}
.se-fluss__nach,[data-modus="nachher"] .se-fluss__vor{display:none}
[data-modus="nachher"] .se-fluss__nach{display:inline}

/* ==== start.css ==== */
/* =====================================================================
   START · Startseite v3 (17.10.2026)
   Alle Klassen mit Präfix st-. Bewegung nur transform/opacity,
   Reduced Motion statisch, Hover nur hinter (hover:hover).
   ===================================================================== */
:root{--st-warn:#ff9a4d;--st-gut:#9dbcff;--st-gruen:#7ee2a8;--st-gelb:#ffc46b}

/* ---------- Hero ---------- */
.st-hero .hero__c{max-width:600px}
.st-hero h1{font-size:clamp(2.5rem,5.2vw,4.6rem);max-width:13ch}
.st-kennzahlen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem 2.5rem;margin:clamp(2.5rem,7vh,4rem) 0 0;padding-top:1.3rem;border-top:1px solid var(--linie);max-width:820px}
.st-kennzahlen dd{margin:0;display:grid;gap:.45rem}
.st-kennzahlen b{font-size:clamp(1.9rem,3.2vw,2.7rem);font-weight:300;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums;color:var(--fg)}
.st-kennzahlen b small{font-size:.55em;margin-left:.08em;color:var(--fg2);font-weight:400}
.st-kennzahlen dd>span{font-family:var(--mono);font-size:.72rem;line-height:1.45;letter-spacing:.01em;color:var(--fg2);max-width:30ch}
@media (max-width:640px){
  .st-hero h1{font-size:clamp(2.2rem,10vw,2.9rem)}
  .st-kennzahlen{grid-template-columns:1fr;gap:.9rem;margin-top:2rem}
  .st-kennzahlen dd{grid-template-columns:4.6rem minmax(0,1fr);align-items:center;gap:1rem}
  .st-kennzahlen b{font-size:1.7rem}
}

/* Tor-Marken: flow.js setzt transform selbst, hier also keins */
.tor-marke{position:fixed;left:0;top:0;z-index:2;pointer-events:none;font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#bfe9ff;padding:6px 10px 6px 9px;border:1px solid rgba(191,233,255,.18);border-radius:999px;background:rgba(7,9,13,.55);white-space:nowrap;opacity:0;transition:opacity .4s var(--ease-out);will-change:transform;display:inline-flex;align-items:center;gap:7px}
.tor-marke::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
.tor-marke[data-tor="1"]{color:#ffd2b0;border-color:rgba(255,154,77,.25)}
.tor-marke.ist-sichtbar{opacity:1}
@media (max-width:759px){.tor-marke{display:none}}

/* ---------- Problem (Wort für Wort) ---------- */
.st-problem .kick{margin-bottom:1.6rem}
.st-brueche{list-style:none;margin:2.4rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.st-brueche li{display:inline-flex;align-items:center;gap:.5rem;height:32px;padding:0 .85rem;border-radius:999px;border:1px solid rgba(255,154,77,.28);background:rgba(255,154,77,.06);font-family:var(--mono);font-size:.72rem;color:#ffd2b0}
.st-brueche li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--st-warn)}
.has-motion .st-brueche li{opacity:clamp(0,calc(var(--p) * 9 - var(--j) * .9 - 3.6),1);transform:translate3d(0,calc((1 - clamp(0,calc(var(--p) * 9 - var(--j) * .9 - 3.6),1)) * 10px),0)}
.st-brueche li:nth-child(1){--j:0}.st-brueche li:nth-child(2){--j:1}.st-brueche li:nth-child(3){--j:2}.st-brueche li:nth-child(4){--j:3}.st-brueche li:nth-child(5){--j:4}
@media (max-width:640px){.st-brueche{margin-top:1.6rem}.st-brueche li{height:28px;font-size:.66rem;padding:0 .7rem}}

/* ---------- Vier Säulen: Reiter mit Schaubild ---------- */
.st-reiter{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--linie);margin-bottom:clamp(2rem,5vw,3.5rem)}
.st-reiter button{position:relative;text-align:left;padding:0 0 1.1rem;font-size:clamp(1.15rem,2.2vw,1.9rem);font-weight:450;letter-spacing:-.03em;line-height:1.1;color:var(--fg3);transition:color 200ms ease}
.st-reiter button small{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;color:var(--fg3);margin-bottom:.5rem;font-weight:400}
.st-reiter button[aria-selected="true"]{color:var(--fg)}
@media (hover:hover){.st-reiter button:hover{color:var(--fg)}}
.st-reiter__lauf{position:absolute;left:0;right:1rem;bottom:-1px;height:1px;background:var(--fg);transform:scaleX(0);transform-origin:left}
.st-reiter button[aria-selected="true"] .st-reiter__lauf{transform:scaleX(1)}
.has-motion .st-tafeln.st-auto .st-reiter button[aria-selected="true"] .st-reiter__lauf{animation:st-lauf 8s linear forwards}
.st-tafeln.st-pause .st-reiter__lauf{animation-play-state:paused!important}
@keyframes st-lauf{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.st-tafel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.st-tafel+.st-tafel{margin-top:4rem}
.st-tafeln.ist-js .st-tafel{display:none;margin-top:0}
.st-tafeln.ist-js .st-tafel.ist-aktiv{display:grid;animation:st-ein 480ms var(--ease-out)}
@keyframes st-ein{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}}
.st-tafel__text h3{font-size:clamp(1.6rem,2.8vw,2.3rem);font-weight:450;letter-spacing:-.03em;margin-bottom:1rem}
.st-tafel__text>p{color:var(--fg2);max-width:46ch}
.st-tafel__text ul{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:0;border-top:1px solid var(--linie)}
.st-tafel__text li{padding:.75rem 0 .75rem 1.6rem;border-bottom:1px solid var(--linie);position:relative;font-size:.97rem;color:var(--fg)}
.st-tafel__text li::before{content:"";position:absolute;left:0;top:1.05rem;width:10px;height:6px;border-left:1.5px solid var(--st-gut);border-bottom:1.5px solid var(--st-gut);transform:rotate(-45deg)}
@media (max-width:860px){
  .st-reiter{grid-template-columns:repeat(4,auto);overflow-x:auto;scrollbar-width:none;gap:1.4rem;margin-inline:-1.25rem;padding-inline:1.25rem}
  .st-reiter::-webkit-scrollbar{display:none}
  .st-reiter button{white-space:nowrap;font-size:1.15rem;padding-bottom:.8rem}
  .st-reiter__lauf{right:0}
  .st-tafel,.st-tafeln.ist-js .st-tafel.ist-aktiv{grid-template-columns:1fr}
  .st-tafel .st-bild{order:-1}
}

/* Schaubilder */
.st-bild{margin:0;border-radius:var(--radius);border:1px solid var(--glas-rand);background:radial-gradient(120% 90% at 50% 0%,rgba(157,188,255,.07),transparent 60%),var(--glas-flaeche);padding:clamp(1rem,3vw,2rem) clamp(1rem,3vw,2rem) 1.1rem;position:relative;overflow:hidden}
.st-bild svg{width:100%;height:auto;overflow:visible}
.st-bild figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.4rem 1rem;margin-top:.9rem;padding-top:.8rem;border-top:1px solid var(--linie);font-family:var(--mono);font-size:.72rem;color:var(--fg3)}
.st-hell{color:var(--fg)}
.st-warn-t{color:var(--st-warn)}
.st-l{fill:none;stroke:var(--linie2);stroke-width:1.5}
.st-l--punkt{stroke-dasharray:3 5}
.st-t{font-family:var(--mono);font-size:11.5px;fill:var(--fg2)}
.st-t--hell{fill:var(--fg)}
.st-k{fill:var(--bg2);stroke:var(--linie2);stroke-width:1.5}
.st-i{fill:none;stroke:var(--fg);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.st-ring{fill:none;stroke:var(--st-gut);stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center}
.st-strom{fill:var(--st-gut);opacity:0}
.st-token rect{fill:var(--fg);stroke:none}
.st-token path{stroke:var(--bg);stroke-width:1.6;stroke-linecap:round}
.st-tor{fill:rgba(157,188,255,.06);stroke:var(--st-gut);stroke-width:1.5}
.st-strahl{stroke:var(--st-gut);stroke-width:2;stroke-linecap:round;opacity:.5}
.st-ablage{fill:rgba(255,154,77,.07);stroke:rgba(255,154,77,.45);stroke-width:1.3}
.st-grau{fill:var(--fg3)}
.st-gut{fill:var(--st-gut);opacity:0}
.st-warn{fill:var(--st-warn);opacity:0}
.st-stueck{opacity:0}
.st-fenster rect{fill:var(--bg2);stroke:var(--linie2);stroke-width:1.3}
.st-fenster path{stroke:var(--linie2);stroke-width:1.3}
.st-f1{--dx:140px;--dy:89px}.st-f2{--dx:0px;--dy:105px}.st-f3{--dx:-140px;--dy:89px}.st-f4{--dx:108px;--dy:-77px}.st-f5{--dx:-108px;--dy:-77px}
.st-fenster{transform-box:fill-box;transform-origin:center}
.st-gross>rect{fill:var(--bg2);stroke:var(--fg2);stroke-width:1.4}
.st-gross>path{stroke:var(--linie2);stroke-width:1.3}
.st-gross{transform-box:fill-box;transform-origin:center}
.st-box{fill:none;stroke:var(--fg3);stroke-width:1.3}
.st-haken{fill:none;stroke:var(--st-gut);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Ruhezustand ohne Bewegung: Endbild zeigen */
.no-motion .st-stueck--1,.st-tafeln:not(.st-laeuft) .st-stueck--1{opacity:1;transform:translate3d(340px,0,0)}
.no-motion .st-stueck--1 .st-gut,.st-tafeln:not(.st-laeuft) .st-stueck--1 .st-gut{opacity:1}
.no-motion .st-stueck--2,.st-tafeln:not(.st-laeuft) .st-stueck--2{opacity:1;transform:translate3d(172px,110px,0)}
.no-motion .st-stueck--2 .st-warn,.st-tafeln:not(.st-laeuft) .st-stueck--2 .st-warn{opacity:1}
.no-motion .st-token{transform:translate3d(300px,0,0)}
.no-motion .st-fenster,.st-tafeln:not(.st-laeuft) .st-fenster{opacity:0}
.no-motion .st-strom{opacity:0}

/* Bewegung nur, wenn die Tafel sichtbar ist (st-laeuft) */
.has-motion .st-laeuft .ist-aktiv .st-token{animation:st-token 6s var(--ease-io) infinite}
@keyframes st-token{0%{transform:translate3d(0,0,0);opacity:0}4%{opacity:1}10%{transform:translate3d(0,0,0)}25%,35%{transform:translate3d(100px,0,0)}50%,60%{transform:translate3d(200px,0,0)}75%,90%{transform:translate3d(300px,0,0);opacity:1}97%,100%{transform:translate3d(300px,0,0);opacity:0}}
.has-motion .st-laeuft .ist-aktiv .st-ring{animation:st-ring 6s var(--ease-out) infinite}
.st-ring--2{animation-delay:1.5s!important}.st-ring--3{animation-delay:3s!important}.st-ring--4{animation-delay:4.5s!important}
@keyframes st-ring{0%{opacity:0;transform:scale(.9)}3%{opacity:.9}20%{opacity:0;transform:scale(1.7)}100%{opacity:0;transform:scale(1.7)}}
.has-motion .st-laeuft .ist-aktiv .st-strom{animation:st-strom 3s linear infinite}
.st-strom--2{animation-delay:1s!important}.st-strom--3{animation-delay:2s!important}
@keyframes st-strom{0%{transform:translate3d(0,0,0);opacity:0}10%{opacity:.9}90%{opacity:.9}100%{transform:translate3d(300px,0,0);opacity:0}}

.has-motion .st-laeuft .ist-aktiv .st-strahl{animation:st-strahl 2s ease-in-out infinite}
@keyframes st-strahl{0%,100%{opacity:.25}50%{opacity:.95}}
.has-motion .st-laeuft .ist-aktiv .st-stueck{animation:st-gut-weg 6s var(--ease-io) infinite;opacity:0}
.has-motion .st-laeuft .ist-aktiv .st-stueck--2{animation-name:st-unklar-weg;animation-delay:2s}
.has-motion .st-laeuft .ist-aktiv .st-stueck--3{animation-delay:4s}
.has-motion .st-laeuft .ist-aktiv .st-stueck .st-gut{animation:st-faerben 6s linear infinite}
.has-motion .st-laeuft .ist-aktiv .st-stueck--3 .st-gut{animation-delay:4s}
.has-motion .st-laeuft .ist-aktiv .st-stueck--2 .st-warn{animation:st-faerben 6s linear 2s infinite}
@keyframes st-gut-weg{0%{transform:translate3d(0,0,0);opacity:0}4%{opacity:1}30%,42%{transform:translate3d(172px,0,0)}75%{transform:translate3d(340px,0,0);opacity:1}84%,100%{transform:translate3d(340px,0,0);opacity:0}}
@keyframes st-unklar-weg{0%{transform:translate3d(0,0,0);opacity:0}4%{opacity:1}30%,42%{transform:translate3d(172px,0,0)}62%{transform:translate3d(172px,110px,0);opacity:1}84%{transform:translate3d(172px,110px,0);opacity:1}92%,100%{transform:translate3d(172px,110px,0);opacity:0}}
@keyframes st-faerben{0%,36%{opacity:0}42%,100%{opacity:1}}

.has-motion .st-laeuft .ist-aktiv .st-fenster{animation:st-fenster 7s var(--ease-io) infinite}
@keyframes st-fenster{0%{opacity:0;transform:none}6%,22%{opacity:1;transform:none}42%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.4)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.4)}}
.has-motion .st-laeuft .ist-aktiv .st-gross{animation:st-gross 7s var(--ease-out) infinite}
@keyframes st-gross{0%,34%{opacity:0;transform:scale(.86)}46%,92%{opacity:1;transform:none}100%{opacity:0;transform:scale(.97)}}
.has-motion .st-laeuft .ist-aktiv .st-haken{animation:st-haken 7s var(--ease-out) infinite;opacity:0}
.has-motion .st-laeuft .ist-aktiv .st-zeile--2 .st-haken{animation-delay:.5s}
.has-motion .st-laeuft .ist-aktiv .st-zeile--3 .st-haken{animation-delay:1s}
@keyframes st-haken{0%,55%{opacity:0;transform:translate3d(0,2px,0)}62%,92%{opacity:1;transform:none}100%{opacity:0}}

/* Protokoll (HTML-Schaubild) */
.st-log{font-family:var(--mono);font-size:.78rem;border-radius:10px;border:1px solid var(--linie);background:rgba(7,9,13,.55);overflow:hidden}
.st-log__kopf{display:flex;justify-content:space-between;gap:1rem;padding:.7rem .9rem;border-bottom:1px solid var(--linie);color:var(--fg3);font-size:.7rem}
.st-log__kopf b{color:var(--st-gut);font-weight:500}
.st-log ol{list-style:none;margin:0;padding:.5rem 0;min-height:13.4rem}
.st-log li{display:grid;grid-template-columns:3.4rem minmax(0,1fr);gap:.6rem;padding:.48rem .9rem;color:var(--fg2);line-height:1.4}
.st-log time{color:var(--fg3)}
.st-log__warn{color:#ffd2b0!important;background:rgba(255,154,77,.07);box-shadow:inset 2px 0 var(--st-warn)}
.st-log__ok{color:var(--fg)!important;box-shadow:inset 2px 0 var(--st-gut)}
.has-motion .st-laeuft .ist-aktiv .st-log li{animation:st-zeile 8s var(--ease-out) infinite;opacity:0}
.st-log li:nth-child(2){animation-delay:.6s!important}.st-log li:nth-child(3){animation-delay:1.2s!important}.st-log li:nth-child(4){animation-delay:1.9s!important}.st-log li:nth-child(5){animation-delay:3.2s!important}
@keyframes st-zeile{0%{opacity:0;transform:translate3d(-8px,0,0)}5%,88%{opacity:1;transform:none}96%,100%{opacity:0}}

/* ---------- Vorher / Nachher ---------- */
.st-vn{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.st-vn__seite{position:sticky;top:calc(var(--kopf-h) + 2rem);display:grid;gap:2rem}
.st-schalter{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:999px;border:1px solid var(--linie2);background:var(--glas-flaeche);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);max-width:400px}
.st-schalter button{position:relative;z-index:1;height:44px;border-radius:999px;font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--fg2);transition:color 300ms ease}
.st-schalter button[aria-pressed="true"]{color:var(--bg)}
.st-schalter__pille{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:var(--fg);transition:transform 520ms var(--ease-ios)}
.st-vn[data-zustand="nachher"] .st-schalter__pille{transform:translate3d(100%,0,0)}
.st-vn__zahlen{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.st-vn__zahlen div{display:grid;gap:.5rem;align-content:start}
.st-vn__zahlen b{font-size:clamp(3rem,6vw,5rem);font-weight:300;letter-spacing:-.05em;line-height:.9;font-variant-numeric:tabular-nums}
.st-vn__zahlen span{font-family:var(--mono);font-size:.72rem;line-height:1.4;color:var(--fg2);min-height:2.8em}
.st-vn__balken{display:block;height:3px;border-radius:3px;background:var(--linie);overflow:hidden}
.st-vn__balken>i{display:block;height:100%;background:var(--fg);transform-origin:left;transition:transform 700ms var(--ease-out)}
.st-vn__balken--warn>i{background:var(--st-warn)}
.st-vn__hinweis{font-family:var(--mono);font-size:.7rem;line-height:1.5;color:var(--fg3);max-width:44ch}
.st-vn__fluss{list-style:none;margin:0;padding:0;position:relative;display:grid;gap:.6rem;align-content:start}
.st-vn__fluss::before{content:"";position:absolute;left:19px;top:1.6rem;bottom:1.6rem;width:1px;background:linear-gradient(to bottom,var(--linie2),var(--linie2) 85%,transparent)}
.st-schritt{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:.9rem;align-items:center;padding:.85rem 1rem .85rem 0;border-radius:12px;transition:opacity 220ms ease}
.st-schritt__punkt{width:11px;height:11px;border-radius:50%;justify-self:center;background:var(--bg);border:1.5px solid var(--fg3);position:relative;z-index:1;transition:border-color 300ms ease,background-color 300ms ease}
.st-schritt[data-f="1"] .st-schritt__punkt{border-color:var(--st-warn)}
.st-vn[data-zustand="nachher"] .st-schritt .st-schritt__punkt{border-color:var(--st-gut);background:var(--st-gut)}
.st-schritt__text b{display:block;font-weight:500;font-size:1.02rem;letter-spacing:-.01em;line-height:1.3}
.st-schritt__text span{display:block;color:var(--fg2);font-size:.9rem;margin-top:.15rem}
.st-marke{font-style:normal;font-family:var(--mono);font-size:.66rem;letter-spacing:.04em;padding:.28rem .6rem;border-radius:999px;white-space:nowrap;border:1px solid var(--linie2);color:var(--fg2)}
.st-marke--fehler{border-color:rgba(255,154,77,.4);color:#ffd2b0;background:rgba(255,154,77,.07)}
.st-marke--auto{border-color:rgba(157,188,255,.35);color:#cfe0ff;background:rgba(157,188,255,.07)}
.st-marke--mensch{border-color:var(--fg2);color:var(--fg)}
.st-vn[data-zustand="heute"] .st-nur-nachher,.st-vn[data-zustand="nachher"] .st-nur-heute,.st-vn[data-zustand="nachher"] .st-schritt--weg{display:none}
.st-schritt.st-raus{opacity:0}
.has-motion .st-vn.st-gewechselt .st-schritt__text,.has-motion .st-vn.st-gewechselt .st-marke{animation:st-ein 420ms var(--ease-out)}
.st-entfaellt{position:relative;z-index:1;background:var(--bg2);display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin-top:1rem;padding:1rem 1.1rem;border-radius:12px;border:1px dashed var(--linie2)}
.st-entfaellt b{flex-basis:100%;font-family:var(--mono);font-weight:500;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--fg3);margin-bottom:.2rem}
.st-entfaellt span{font-size:.86rem;color:var(--fg3);text-decoration:line-through;text-decoration-color:rgba(255,154,77,.7);padding:.2rem .6rem;border-radius:999px;background:var(--glas-flaeche)}
.st-vn[data-zustand="nachher"] .st-entfaellt{display:flex}
@media (max-width:860px){
  .st-vn{grid-template-columns:1fr;gap:2rem}
  .st-vn__seite{position:sticky;top:calc(var(--kopf-h) + .5rem);z-index:2;gap:1rem;padding:.9rem;margin-inline:-.4rem;border-radius:16px;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--linie)}
  .st-schalter{max-width:none}
  .st-vn__zahlen{gap:1rem}
  .st-vn__zahlen b{font-size:2.4rem}
  .st-vn__zahlen span{font-size:.64rem;min-height:0}
  .st-vn__hinweis{font-size:.62rem}
  .st-vn__mehr{display:none}
  .st-schritt{grid-template-columns:28px minmax(0,1fr);padding:.6rem 0}
  .st-schritt .st-marke{grid-column:2;justify-self:start;margin-top:-.2rem}
  .st-vn__fluss::before{left:13px}
}

/* ---------- Lösungsbereiche: Zeilenliste mit Vorschau ---------- */
.st-liste{border-top:1px solid var(--linie)}
.st-liste__zeile{display:grid;grid-template-columns:3.2rem minmax(0,1.1fr) minmax(0,1fr) 22px;gap:1.5rem;align-items:center;padding:1.35rem 0;border-bottom:1px solid var(--linie);transition:opacity 300ms ease}
.st-liste__nr{font-family:var(--mono);font-size:.74rem;color:var(--fg3)}
.st-liste__titel{font-size:clamp(1.25rem,2.4vw,2rem);font-weight:450;letter-spacing:-.03em;line-height:1.1;transition:transform 450ms var(--ease-out)}
.st-liste__text{color:var(--fg2);font-size:.94rem;line-height:1.45}
.st-liste__zeile svg{width:20px;height:20px;color:var(--fg3);transition:transform 300ms var(--ease-out),color 200ms ease}
@media (hover:hover) and (pointer:fine){
  .st-liste:hover .st-liste__zeile{opacity:.4}
  .st-liste .st-liste__zeile:hover{opacity:1}
  .st-liste__zeile:hover .st-liste__titel{transform:translate3d(.6rem,0,0)}
  .st-liste__zeile:hover svg{transform:translate(3px,-3px);color:var(--fg)}
}
.st-liste__zeile:focus-visible{opacity:1}
@media (max-width:860px){
  .st-liste__zeile{grid-template-columns:2.2rem minmax(0,1fr) 18px;gap:.4rem 1rem;padding:1.1rem 0}
  .st-liste__text{grid-column:2;grid-row:2;font-size:.9rem}
  .st-liste__zeile svg{grid-column:3;grid-row:1}
  .st-liste__titel{font-size:1.2rem}
}
.st-vorschau{position:fixed;left:0;top:0;z-index:5;width:340px;pointer-events:none;opacity:0;transition:opacity 260ms var(--ease-out);will-change:transform}
.st-vorschau.ist-an{opacity:1}
.st-vorschau__rahmen{position:relative;aspect-ratio:1400/875;border-radius:12px;overflow:hidden;border:1px solid var(--linie2);background:var(--bg3);box-shadow:0 30px 80px -20px rgba(0,0,0,.9);transform:scale(.92);transition:transform 400ms var(--ease-out)}
.st-vorschau.ist-an .st-vorschau__rahmen{transform:none}
.st-vorschau img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transition:opacity 260ms ease}
.st-vorschau img.ist-an{opacity:1}
@media (hover:none),(pointer:coarse),(max-width:860px){.st-vorschau{display:none}}
.no-motion .st-vorschau{display:none}

/* ---------- Gebaut: Stapel-Ergänzungen ---------- */
.st-gebaut-kopf{padding-bottom:0}
.st-gebaut .stapel__text h3 em{display:block;font-size:.55em;letter-spacing:-.01em;margin-top:.35rem;color:var(--fg3)}
.st-status{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;padding:.3rem .7rem;border-radius:999px;border:1px solid var(--linie2);margin-bottom:1rem;color:var(--fg)}
.st-status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.st-status--einsatz{color:var(--st-gruen);border-color:rgba(126,226,168,.35)}
.st-status--prototyp{color:var(--st-gelb);border-color:rgba(255,196,107,.35)}
.st-status--muster{color:var(--st-gut);border-color:rgba(157,188,255,.35)}
.st-status--vorschau{color:var(--fg2)}
.st-chips{list-style:none;margin:1.1rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.st-chips li{font-family:var(--mono);font-size:.68rem;letter-spacing:.02em;color:var(--fg2);padding:.3rem .65rem;border-radius:999px;border:1px solid var(--linie);background:var(--glas-flaeche)}
.st-gebaut .geraet img{aspect-ratio:1400/875}
@media (max-width:820px){
  .st-gebaut .stapel__text p{font-size:.92rem;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
  .st-gebaut .st-chips li:nth-child(n+3){display:none}
  .st-gebaut .st-status{margin-bottom:.6rem}
  .st-gebaut .stapel__text h3{font-size:1.4rem;margin-bottom:.6rem}
  .st-gebaut .stapel__karte{gap:1rem}
  .st-gebaut .stapel{margin-top:3.2rem;height:min(80vh,700px)}
}
.no-motion .st-gebaut .stapel__text p{-webkit-line-clamp:unset}

/* ---------- Der Mensch entscheidet ---------- */
.st-mensch .split{align-items:start}
.st-pruefliste{list-style:none;margin:1.5rem 0 0;padding:0;display:grid!important;gap:0!important;border-top:1px solid var(--linie)}
.st-pruefliste li{display:grid!important;grid-template-columns:9.5rem minmax(0,1fr);gap:1rem!important;padding:.9rem 0;border-bottom:1px solid var(--linie)}
.st-pruefliste li::before{display:none}
.st-pruefliste b{font-family:var(--mono);font-weight:500;font-size:.74rem;letter-spacing:.03em;color:var(--fg);padding-top:.2rem}
.st-pruefliste span{font-size:.95rem;color:var(--fg2)}
@media (max-width:640px){.st-pruefliste li{grid-template-columns:1fr;gap:.3rem!important}}
.st-korb{border-radius:18px;border:1px solid var(--glas-rand);background:var(--glas-flaeche);backdrop-filter:blur(var(--glas-blur));-webkit-backdrop-filter:blur(var(--glas-blur));padding:1.2rem;box-shadow:var(--schatten);position:sticky;top:calc(var(--kopf-h) + 2rem)}
.st-korb__kopf{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;padding:.2rem .3rem 1rem}
.st-korb__kopf b{font-weight:500;font-size:1.05rem}
.st-korb__offen{font-family:var(--mono);font-size:.7rem;padding:.2rem .55rem;border-radius:999px;background:rgba(255,154,77,.12);color:#ffd2b0}
.st-beispiel{margin-left:auto;font-family:var(--mono);font-size:.66rem;color:var(--fg3)}
.st-korb__liste{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.st-korb .st-korb__eintrag[hidden]{display:none}
.st-korb .st-korb__eintrag{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem;align-items:center;padding:1rem;border-radius:12px;border:1px solid var(--linie);background:rgba(7,9,13,.35);transition:opacity 260ms ease,transform 360ms var(--ease-out)}
.st-korb__eintrag b{display:block;font-weight:500;font-size:.98rem}
.st-korb__eintrag span{display:block;font-size:.86rem;color:var(--fg2);margin-top:.2rem;line-height:1.4}
.st-korb__eintrag--fest{border-color:rgba(255,154,77,.3)}
.st-korb__eintrag.st-erledigt{opacity:0;transform:translate3d(24px,0,0) scale(.98)}
.st-sicher{display:inline-flex;align-items:center;gap:.4rem;margin-top:.5rem;font-style:normal;font-family:var(--mono);font-size:.66rem;letter-spacing:.03em}
.st-sicher::before{content:"";width:28px;height:3px;border-radius:2px;background:linear-gradient(to right,currentColor var(--s,100%),var(--linie2) var(--s,100%))}
.st-sicher--hoch{color:var(--st-gruen);--s:92%}
.st-sicher--mittel{color:var(--st-gelb);--s:55%}
.st-sicher--fest{color:var(--st-warn);--s:0%}
.st-korb__fertig{display:grid;gap:.2rem;justify-items:start;padding:1.2rem;border-radius:12px;border:1px dashed var(--linie2)}
.st-korb__fertig[hidden]{display:none}
.st-korb__fertig span{color:var(--fg2);font-size:.92rem}
.st-korb__fertig .textlink{margin-top:.6rem}
.st-protokoll{margin-top:1rem;padding:1rem .3rem 0;border-top:1px solid var(--linie)}
.st-protokoll>b{font-family:var(--mono);font-weight:500;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--fg3)}
.st-protokoll ol{list-style:none;margin:.6rem 0 0;padding:0;display:grid;gap:.35rem;font-family:var(--mono);font-size:.74rem;color:var(--fg2)}
.st-korb .st-protokoll li{font-size:inherit;color:inherit;display:grid;grid-template-columns:3rem minmax(0,1fr);gap:.5rem}
.st-protokoll li.st-neu{color:var(--fg);animation:st-ein 420ms var(--ease-out)}
.st-protokoll time{color:var(--fg3)}
@media (max-width:820px){.st-korb{position:static;margin-top:1rem}}
@media (max-width:480px){.st-korb .st-korb__eintrag{grid-template-columns:1fr;gap:.8rem}.st-korb__eintrag .knopf{justify-self:start}.st-beispiel{margin-left:0;flex-basis:100%}}

.st-korb li::before{content:none!important;display:none!important}

/* ---------- Anbindungen ---------- */
.st-anbindung{overflow:hidden;padding-bottom:calc(var(--sek) * .8)}
.st-riesig{font-size:clamp(2.6rem,7.6vw,7rem);font-weight:400;letter-spacing:-.045em;line-height:1;max-width:none}
.st-riesig span,.st-riesig em{display:block;will-change:transform}
.st-riesig em{text-align:right}
.has-motion .st-riesig span{transform:translate3d(calc(max(0,.6 - var(--sp,.6)) * -22vw),0,0)}
.has-motion .st-riesig em{transform:translate3d(calc(max(0,.6 - var(--sp,.6)) * 22vw),0,0)}
.st-anbindung__lead{margin:2rem 0 0 auto;text-align:left}
.st-band{margin-top:clamp(3rem,7vw,5rem);display:grid;gap:.8rem;-webkit-mask:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)}
.st-band__spur{list-style:none;margin:0;padding:0;display:flex;gap:.8rem;width:max-content}
.st-band__spur li{display:grid;gap:.15rem;padding:1rem 1.4rem;border-radius:14px;border:1px solid var(--glas-rand);background:var(--glas-flaeche);min-width:200px}
.st-band__spur b{font-weight:450;font-size:1.3rem;letter-spacing:-.02em}
.st-band__spur span{font-family:var(--mono);font-size:.7rem;color:var(--fg3)}
.has-motion .st-anbindung.st-laeuft .st-band__spur{animation:st-band 38s linear infinite}
.has-motion .st-anbindung.st-laeuft .st-band__spur--rueck{animation-direction:reverse;animation-duration:44s}
@keyframes st-band{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-50% - .4rem),0,0)}}
@media (hover:hover){.st-band:hover .st-band__spur{animation-play-state:paused}}
.no-motion .st-band{-webkit-mask:none;mask:none;width:min(var(--wrap),100% - 2.5rem);margin-inline:auto}
.no-motion .st-band__spur{width:auto;flex-wrap:wrap}
.no-motion .st-band__spur li[aria-hidden]{display:none}
@media (max-width:640px){.st-band__spur li{min-width:160px;padding:.8rem 1.1rem}.st-band__spur b{font-size:1.1rem}.st-riesig{font-size:clamp(2.3rem,11vw,3.2rem)}.st-riesig em{text-align:left}}

/* ---------- Mini-Rechner ---------- */
.st-rechner{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(1.5rem,4vw,3rem);padding:clamp(1.4rem,4vw,3rem);border-radius:22px;border:1px solid var(--glas-rand);background:var(--glas-flaeche);backdrop-filter:blur(var(--glas-blur));-webkit-backdrop-filter:blur(var(--glas-blur))}
.st-rechner h2{margin-bottom:2rem;font-size:clamp(1.8rem,3.4vw,2.8rem)}
.st-rechner__regler{display:grid;gap:1.6rem}
.st-rechner .regler__wert label{color:var(--fg2);font-size:.95rem}
.st-rechner .regler__wert b{font-size:1.9rem}
.st-rechner .regler__wert output{font:inherit}
.st-rechner__ergebnis{border-radius:16px;background:var(--fg);color:var(--bg);padding:clamp(1.4rem,3vw,2rem);display:grid;gap:1rem;align-content:start}
.st-rechner__ergebnis .kick{color:color-mix(in srgb,var(--bg) 65%,var(--fg));margin:0}
.st-rechner__zahl b{display:block;font-size:clamp(3.4rem,8vw,6rem);font-weight:300;letter-spacing:-.06em;line-height:.9;font-variant-numeric:tabular-nums}
.st-rechner__zahl span{display:block;margin-top:.6rem;font-size:.95rem;color:color-mix(in srgb,var(--bg) 70%,var(--fg))}
.st-rechner__wochen{font-size:1rem}
.st-rechner__balken{display:grid;gap:.55rem;padding:1rem 0;border-top:1px solid color-mix(in srgb,var(--bg) 18%,transparent);border-bottom:1px solid color-mix(in srgb,var(--bg) 18%,transparent)}
.st-rechner__balken div{display:grid;grid-template-columns:4.2rem minmax(0,1fr) 4.6rem;gap:.7rem;align-items:center;font-family:var(--mono);font-size:.72rem}
.st-rechner__balken div>i{display:block;height:8px;border-radius:4px;background:color-mix(in srgb,var(--bg) 12%,transparent);overflow:hidden}
.st-rechner__balken div>i>i{display:block;height:100%;border-radius:4px;background:var(--bg);transform-origin:left;transition:transform 500ms var(--ease-out)}
.st-rechner__balken em{font-style:normal;text-align:right;font-variant-numeric:tabular-nums}
.st-rechner__annahmen{font-size:.78rem;line-height:1.45;color:color-mix(in srgb,var(--bg) 65%,var(--fg))}
.st-rechner__ergebnis .knopf{background:var(--bg);color:var(--fg);justify-self:start}
@media (max-width:860px){.st-rechner{grid-template-columns:1fr}}

/* ---------- Vier Schritte ---------- */
.st-schritte{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem;position:relative}
.st-schritte::before,.st-schritte::after{content:"";position:absolute;left:0;right:0;top:1.35rem;height:1px;background:var(--linie2)}
.st-schritte::after{background:var(--fg);transform-origin:left;transform:scaleX(var(--sp,1))}
.no-motion .st-schritte::after{transform:none}
.st-schritte li{position:relative;padding-top:2.6rem;display:grid;gap:.6rem;align-content:start}
.st-schritte li::before{content:"";position:absolute;left:0;top:calc(1.35rem - 5px);width:11px;height:11px;border-radius:50%;background:var(--bg);border:1.5px solid var(--fg);z-index:1}
.st-schritte__nr{font-family:var(--mono);font-size:.74rem;color:var(--fg3);line-height:1}
.st-schritte h3{font-size:1.3rem}
.st-schritte p{color:var(--fg2);font-size:.95rem}
.st-schritte .st-schritte__ergebnis{margin-top:.4rem;padding-top:.8rem;border-top:1px solid var(--linie);color:var(--fg);font-size:.9rem}
.st-schritte__ergebnis b{display:block;font-family:var(--mono);font-weight:500;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fg3);margin-bottom:.3rem}
@media (max-width:900px){
  .st-schritte{grid-template-columns:1fr;gap:2.2rem;padding-left:2rem}
  .st-schritte::before,.st-schritte::after{left:5px;right:auto;top:.5rem;bottom:.5rem;width:1px;height:auto}
  .st-schritte::after{transform:scaleY(var(--sp,1));transform-origin:top}
  .st-schritte li{padding-top:0}
  .st-schritte li::before{left:-2rem;top:.35rem}
}

/* ---------- FAQ ---------- */
.st-fragen__raster{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.st-fragen__kopf{position:sticky;top:calc(var(--kopf-h) + 2rem)}
.st-fragen__kopf h2{margin-bottom:1rem}
.st-fragen .faq{background:color-mix(in srgb,var(--bg) 55%,transparent);border-radius:16px;padding:0 1.4rem;border:1px solid var(--linie)}
.st-fragen .faq details:last-child{border-bottom:0}
@media (max-width:860px){.st-fragen__raster{grid-template-columns:1fr}.st-fragen__kopf{position:static}.st-fragen .faq{padding:0 1rem}.st-fragen .faq summary{font-size:1.02rem}}

/* ---------- Schluss ---------- */
.st-schluss h2{max-width:22ch}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion:reduce){
  .st-reiter__lauf{animation:none!important}
  .st-schalter__pille,.st-vn__balken>i,.st-rechner__balken div>i>i{transition:none}
}