/* ==========================================================================
   felker-media.de · site.css · Richtung B „Kobalt-Vitrine“
   Gemeinsames Stylesheet aller Seiten. Seiten-spezifisches steht unten in
   eigenen Blöcken (START …). Muster jeder Komponente: .impeccable/bau/bausteine.html

   KOMPONENTEN (Klassen, kurz)
   --------------------------------------------------------------------------
   Gerüst
     .kopf / .nav …            Kopfzeile (fest oben, wird beim Scrollen zur weißen Pille: .kompakt)
     .nav-blatt                Menü-Blatt mobil (Knopf .nav-menue mit aria-expanded)
     .panel                    abgerundete Fläche mit 16 px Rand zum Fenster
       .panel--hell            Grund #EEF0F2
       .panel--weiss           Weiß mit feiner Linie
       .panel--nacht           dunkle Bühne #111213 (setzt Text hell; Klasse .dunkel am Abschnitt für Fokusring)
       .panel--kobalt          Kobalt-Licht auf Hell (Hauptbutton darauf: .knopf--nacht)
     .licht + .licht--wolke|--horizont|--strahl|--tief   Kobalt als Licht (nur Fläche, nie Text/Button)
     .korn                     feines Filmkorn über einem .licht
     .innen                    Inhaltsbreite (max 1240 px), .innen--schmal (880 px)
     .abschnitt                senkrechter Abstand für Abschnitte ohne Panel
     .seitenkopf               Einstieg der Unterseiten (Panel mit Kobalt-Licht, H1, Text, Buttons, Fakten)
   Typo
     h1/h2/h3                  Barlow Semi Condensed 800/700, Versalien; .h-gross (Monument)
     .lead                     größerer Einleitungstext   .leise  gedämpfter Text (kontrastgeprüft)
     .mono                     IBM Plex Mono, nur für echte Messwerte/Daten
     .fakten                   Faktenzeile mit Punkt-Trennern
     .metadaten                kleine Randzeile (Ort)
   Handlung
     .knopf + --kobalt (primär) | --nacht (primär auf Kobalt-Licht) | --weiss (sekundär)
            | --linie (Kontur auf Hell) | --linie-hell (Kontur auf Dunkel) ; .knopf--klein
     .knopfreihe               Reihe von Buttons
     .textlink                 Link mit Pfeil
   Inhalt
     .artefakt                 schwebendes weißes UI-Stück; Tiefe über --d (0…1.5), Parallaxe via .bew
     .karte                    Karte mit Bild oben (.karte-bild) und Text (.karte-text)
     .haken-liste              Liste mit Haken-Icons
     .faq                      <details>-Liste, animiert (.plus-Symbol)
     .feld …                   Formularfeld: .feld-label, .feld-eingabe, .feld-hinweis, .feld-fehler;
                               Fehlerzustand: .feld--fehler + aria-invalid="true"; .wahlfeld (Checkbox/Radio)
     .schrittfolge             nummerierte Fortschritts-Schritte (Zeitleiste) ; .stufenleiste (Schritt x von y)
     .geraet .geraet--handy|--monitor   Gerätebild + .geraet-schirm (Bildschirmfläche nach geraete-geometrie.json)
     .vergleich                Vorher/Nachher mit gemeinsamem Regler (input[type=range], Wert = Anteil neue Seite in %),
                               Ebenen: .vergleich-ebene (alte Seite, unten) + .vergleich-ebene.vergleich-oben (neue Seite), Logik in main.js
     .check                    Website-Check-Werkzeug, Logik in check.js
     .hinweisbox               ruhige Infozeile (z. B. Vorschau-Hinweis)
   Zustände
     .bew                      auf <html>, wenn Bewegung erlaubt und JS läuft (sonst alles im Endzustand)
     .gepinnt / .ist-pin       gepinnte Szene (Höhe --hoehe), Fortschritt als --p (0…1) vom Scroll-Motor
   ========================================================================== */

/* ---------- Schriften (selbst gehostet, Fontsource 5.3.0, OFL) ---------- */
@font-face{font-family:"Barlow Semi Condensed";font-style:normal;font-weight:800;font-display:swap;src:url("/assets/fonts/barlow-semi-condensed-latin-800-normal.woff2") format("woff2")}
@font-face{font-family:"Barlow Semi Condensed";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/barlow-semi-condensed-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/barlow-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/barlow-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/barlow-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2")}

/* ---------- Variablen ---------- */
:root{
  /* Farben (Marke, abgenommen) */
  --nacht:#111213; --nacht-2:#191B1D; --nacht-3:#202326; --linie:#26292C; --linie-2:#454A50;
  --hell:#EEF0F2; --weiss:#FFFFFF; --silber:#D9DCE0; --silber-2:#C9CCD0;
  --leise:#A3A8AE;            /* nur auf --nacht / --nacht-2 */
  --leise-hell:#4A5056;       /* gedämpfter Text auf Hell (7,6:1 auf #EEF0F2) */
  --tinte:#111213; --tinte-2:#25292E;
  --kobalt:#2F5BF0; --kobalt-hover:#2550E0; --kobalt-tief:#1D3DB8; --kobalt-hauch:#DCE3FB;
  --gruen:#1E9E52; --gruen-tief:#16733D; --rot:#B42318; --rot-hauch:#FDECEA;

  /* Raster und Formen */
  --rand:16px; --radius:28px; --radius-klein:16px; --radius-knopf:12px;
  --nav-h:76px; --innen-max:1240px; --innen-pad:32px;
  --abschnitt-y:clamp(88px,12vh,140px);

  /* Schrift */
  --kopf:"Barlow Semi Condensed","Arial Narrow",sans-serif;
  --text:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"Cascadia Mono",monospace;
  --text-groesse:17px;
  --h1-groesse:clamp(2.4rem,4.4vw,4.25rem);
  --h2-groesse:clamp(2.2rem,4.2vw,4rem);
  --h3-groesse:1.5rem;

  /* Einstieg (Startseite) – zum Verschieben im Regler-Panel */
  --einstieg-oben:clamp(28px,6vh,64px);
  --einstieg-text-abstand:20px;
  --einstieg-knopf-abstand:26px;
  --geraet-hoehe:min(calc(100svh - 160px),730px);
  --geraet-start:56%;          /* wo das Handy vor dem Scrollen sitzt (oberer Rand, % der Bühne) */
  --artefakt-abstand:470px;    /* seitlicher Abstand der Stations-Artefakte zur Mitte */
  --geraet-versatz:54vh;       /* wie tief das Handy vor dem Scrollen steht */
  --parallaxe:140px;           /* Weg der Artefakte über die ganze Szene */

  /* Bewegung und Tiefe */
  --aus:cubic-bezier(.16,1,.3,1);
  --schatten-weich:0 24px 48px -20px rgba(17,18,19,.30),0 4px 10px -4px rgba(17,18,19,.10);
  --schatten-tief:0 50px 80px -30px rgba(0,0,0,.6),0 10px 24px -12px rgba(0,0,0,.35);

  interpolate-size:allow-keywords;
  color-scheme:light;
  scrollbar-color:#9AA0A6 var(--hell);
}

/* ---------- Grundlagen ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--weiss);color:var(--tinte);font-family:var(--text);font-size:var(--text-groesse);line-height:1.6;font-weight:400;overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--kobalt);color:#fff}
:focus-visible{outline:2px solid var(--kobalt);outline-offset:3px;border-radius:6px}
.dunkel :focus-visible,.panel--nacht :focus-visible,.paket--pro :focus-visible{outline-color:#EEF0F2}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--hell)}
::-webkit-scrollbar-thumb{background:#9AA0A6;border-radius:8px;border:3px solid var(--hell)}
[id]{scroll-margin-top:calc(var(--nav-h) + 12px)}
[hidden]{display:none !important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.springen{position:fixed;left:var(--rand);top:-60px;z-index:100;background:var(--nacht);color:#fff;padding:12px 18px;border-radius:10px;font-weight:600;text-decoration:none;transition:top .2s var(--aus)}
.springen:focus{top:12px}

h1,h2,h3{font-family:var(--kopf);text-transform:uppercase;font-weight:800;letter-spacing:-.005em;line-height:.95;text-wrap:balance}
h1{font-size:var(--h1-groesse)}
h2{font-size:var(--h2-groesse)}
h3{font-weight:700;font-size:var(--h3-groesse);line-height:1.02;letter-spacing:0}
.h-gross{font-size:clamp(2.8rem,7vw,6rem)}
p{text-wrap:pretty}
.lead{font-size:1.15rem;line-height:1.55;font-weight:500;max-width:60ch}
.leise{color:var(--leise-hell)}
.dunkel .leise,.panel--nacht .leise{color:var(--leise)}
.zahl,.mono{font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono);font-weight:500;letter-spacing:0}
.ico{width:1.1em;height:1.1em;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Buttons (flach) ---------- */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:50px;padding:0 22px;border-radius:var(--radius-knopf);border:1px solid transparent;font-family:var(--text);font-weight:600;font-size:1rem;line-height:1.1;text-decoration:none;cursor:pointer;text-align:center;transition:background-color .25s var(--aus),color .25s var(--aus),border-color .25s var(--aus),transform .25s var(--aus)}
.knopf:active{transform:translateY(1px)}
.knopf .ico{transition:transform .3s var(--aus)}
.knopf:hover .ico--pfeil{transform:translateX(3px)}
.knopf[disabled],.knopf[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.knopf--kobalt{background:var(--kobalt);color:#fff}
.knopf--kobalt:hover{background:var(--kobalt-hover)}
.knopf--nacht{background:var(--nacht);color:#fff}
.knopf--nacht:hover{background:#2A2E33}
.knopf--weiss{background:#fff;color:var(--kobalt-tief)}
.knopf--weiss:hover{background:var(--kobalt-hauch)}
.knopf--linie{border-color:var(--tinte);color:var(--tinte);background:transparent}
.knopf--linie:hover{background:var(--tinte);color:#fff}
.knopf--linie-hell{border-color:var(--linie-2);color:#EEF0F2;background:transparent}
.knopf--linie-hell:hover{border-color:#EEF0F2;background:rgba(238,240,242,.06)}
.knopf--klein{min-height:42px;padding:0 16px;font-size:.95rem;border-radius:10px}
.knopfreihe{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.textlink{display:inline-flex;align-items:center;gap:8px;color:var(--kobalt-tief);font-weight:600;text-decoration:underline;text-decoration-color:rgba(29,61,184,.35)}
.textlink:hover{text-decoration-color:currentColor}
.textlink .ico{transition:transform .3s var(--aus)}
.textlink:hover .ico{transform:translateX(3px)}
.panel--nacht .textlink,.dunkel .textlink{color:#EEF0F2;text-decoration-color:rgba(238,240,242,.4)}

/* ---------- Kopfzeile ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;height:var(--nav-h);display:flex;align-items:center;justify-content:center;padding:0 var(--rand);pointer-events:none}
.nav-innen{pointer-events:auto;width:100%;max-width:1408px;height:56px;display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:0 8px 0 12px;border-radius:16px;background:rgba(255,255,255,0);box-shadow:0 0 0 rgba(0,0,0,0);transition:max-width .6s var(--aus),background-color .4s var(--aus),box-shadow .4s var(--aus)}
.nav.kompakt .nav-innen,.nav.offen .nav-innen{max-width:1200px;background:#fff;box-shadow:0 14px 32px -16px rgba(17,18,19,.35),0 2px 6px -2px rgba(17,18,19,.08)}
.nav-logo{display:inline-flex;align-items:center;justify-self:start;border-radius:8px}
.nav-logo img{height:24px;width:auto}
.nav-links{display:flex;justify-content:center;gap:2px}
.nav-links a{font-weight:500;font-size:.97rem;text-decoration:none;padding:8px 12px;border-radius:10px;white-space:nowrap;transition:background-color .2s}
.nav-links a:hover{background:var(--hell)}
.nav-links a[aria-current="page"]{background:var(--hell);font-weight:600}
.nav-rechts{justify-self:end;display:flex;gap:8px;align-items:center}
.nav-menue{display:none;width:44px;height:44px;border-radius:10px;border:1px solid var(--silber);background:#fff;align-items:center;justify-content:center;cursor:pointer}
.nav-menue .ico{width:20px;height:20px}
.nav-menue .ico--zu{display:none}
.nav-menue[aria-expanded="true"] .ico--auf{display:none}
.nav-menue[aria-expanded="true"] .ico--zu{display:block}
.nav-blatt{position:fixed;left:var(--rand);right:var(--rand);top:calc(var(--nav-h) - 4px);z-index:49;background:#fff;border-radius:18px;padding:10px 12px 14px;box-shadow:0 24px 48px -20px rgba(17,18,19,.4),0 2px 6px -2px rgba(17,18,19,.1)}
.nav-blatt a:not(.knopf){display:block;padding:13px 10px;font-weight:600;text-decoration:none;border-bottom:1px solid var(--hell)}
.nav-blatt a[aria-current="page"]{color:var(--kobalt-tief)}
.nav-blatt .knopf{margin-top:12px;width:100%}

/* ---------- Panels, Licht ---------- */
.panel{position:relative;margin:0 var(--rand);border-radius:var(--radius);overflow:hidden;overflow:clip;isolation:isolate}
.panel--hell{background:var(--hell)}
.panel--weiss{background:#fff;border:1px solid var(--silber)}
.panel--nacht{background:var(--nacht);color:#EEF0F2}
.panel--kobalt{background:var(--hell)}
.licht{position:absolute;inset:0;z-index:-1;pointer-events:none}
.licht--wolke{background:radial-gradient(ellipse 58% 66% at 50% 74%,#2F5BF0 0%,#3A63F1 12%,#5B7FF2 28%,#8FA6F2 46%,#C3CEF0 64%,#E2E6F0 80%,#EEF0F2 94%)}
.licht--horizont{background:radial-gradient(ellipse 70% 42% at 50% 112%,rgba(47,91,240,.55) 0%,rgba(47,91,240,.18) 45%,rgba(47,91,240,0) 72%)}
.licht--strahl{background:radial-gradient(ellipse 18% 70% at 72% -8%,rgba(47,91,240,.55),rgba(47,91,240,0) 70%),radial-gradient(ellipse 40% 30% at 72% 100%,rgba(47,91,240,.22),rgba(47,91,240,0) 70%)}
.licht--tief{background:radial-gradient(ellipse 50% 85% at 50% 112%,#2F5BF0 0%,#4A71F2 18%,#7F99F2 38%,#B7C5F0 58%,#DCE2F0 78%,#EEF0F2 92%)}
.licht--seite{background:radial-gradient(ellipse 60% 90% at 88% 60%,#2F5BF0 0%,#4A71F2 16%,#7F99F2 36%,#B7C5F0 56%,#DCE2F0 76%,#EEF0F2 92%)}
.korn::after{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");mix-blend-mode:soft-light;opacity:.22}
.innen{max-width:var(--innen-max);margin:0 auto;padding:0 var(--innen-pad)}
.innen--schmal{max-width:880px}
.abschnitt{padding:var(--abschnitt-y) 0}
.abstand-oben{margin-top:var(--rand)}

/* Szenen-Gerüst (Scroll-Motor in main.js) */
.szene{position:relative}
.buehne{position:relative}
.bew .gepinnt{height:var(--hoehe,300vh)}
.bew .gepinnt > .buehne{position:sticky;top:0;height:100vh;height:100svh}
.bew .gepinnt > .buehne > .panel{position:absolute;inset:var(--nav-h) var(--rand) var(--rand);margin:0}

/* ---------- Fakten, Metadaten ---------- */
.fakten{display:flex;flex-wrap:wrap;gap:4px 0;font-weight:600;font-size:.98rem;color:#0E1012}
.fakten li{display:flex;align-items:center}
.fakten li+li::before{content:"";width:4px;height:4px;border-radius:50%;background:currentColor;margin:0 12px;opacity:.7}
.panel--nacht .fakten{color:#EEF0F2}
.metadaten{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;font-size:.92rem;font-weight:500;color:#1E2125}
.metadaten .mono{font-size:.8rem;color:#3A3F45}
.panel--nacht .metadaten{color:var(--leise)}
.panel--nacht .metadaten .mono{color:var(--leise)}

/* ---------- Unterseiten-Einstieg ---------- */
.seitenkopf{padding-top:var(--nav-h)}
.seitenkopf .panel{padding:clamp(56px,10vh,110px) 0 clamp(48px,8vh,88px)}
.seitenkopf h1{max-width:20ch}
.seitenkopf .lead{margin-top:20px;color:#16181B}
.seitenkopf .knopfreihe{margin-top:28px}
.seitenkopf .fakten{margin-top:20px}

/* ---------- Artefakt ---------- */
.artefakt{position:relative;background:#fff;border-radius:18px;padding:16px 18px;color:var(--tinte);font-size:.95rem;line-height:1.35;--d:.6;--sy:calc(8px + var(--d) * 16px);box-shadow:0 var(--sy) calc(22px + var(--d) * 30px) -10px rgba(17,18,19,.32),0 2px 6px -2px rgba(17,18,19,.10)}
.artefakt strong{font-weight:600}
.panel--nacht .artefakt{box-shadow:0 var(--sy) calc(26px + var(--d) * 34px) -10px rgba(0,0,0,.6),0 2px 6px -2px rgba(0,0,0,.3)}
.artefakt-kopf{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:.82rem;font-weight:600;color:var(--leise-hell)}
.pille{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--kobalt-hauch);color:var(--kobalt-tief);white-space:nowrap}
.pille--dunkel{background:var(--nacht);color:#fff}
.pille--hell{background:var(--hell);color:var(--tinte-2)}
.live{display:inline-flex;align-items:center;gap:6px;color:var(--gruen-tief)}
.live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gruen)}
.status{display:inline-flex;align-items:center;gap:7px;font-weight:600}
.status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gruen)}
.klein{font-size:.82rem;color:var(--leise-hell);line-height:1.35}
.ladezeit-wert{font-family:var(--mono);font-weight:500;font-size:2.1rem;line-height:1;letter-spacing:-.02em;margin:6px 0;font-variant-numeric:tabular-nums}

/* ---------- Karte ---------- */
.karte{position:relative;display:flex;flex-direction:column;border-radius:24px;overflow:hidden;background:#fff;border:1px solid rgba(17,18,19,.08);box-shadow:0 30px 60px -28px rgba(17,18,19,.35),0 8px 18px -10px rgba(17,18,19,.14)}
.karte-bild{position:relative;aspect-ratio:16/10;background:var(--hell);overflow:hidden}
.karte-bild img{width:100%;height:100%;object-fit:cover;object-position:top}
.karte-bild > img[data-ersatz]{position:absolute;inset:0;z-index:2}
.karte-text{padding:24px 28px 28px}
.karte-text h3{font-size:1.6rem}
.karte-text p{margin-top:10px;color:#2E3237;font-size:1rem;line-height:1.55;max-width:46ch}

/* ---------- Haken-Liste ---------- */
.haken-liste{display:grid;gap:12px}
.haken-liste li{display:flex;gap:12px;align-items:flex-start}
.haken-liste .ico{margin-top:4px;color:var(--kobalt-tief)}
.panel--nacht .haken-liste .ico,.paket--pro .haken-liste .ico{color:#fff}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--silber-2)}
.faq details{border-bottom:1px solid var(--silber-2)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 4px;font-weight:600;font-size:1.15rem;line-height:1.35;border-radius:8px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover .plus{background:#fff;border-color:var(--tinte)}
.plus{width:36px;height:36px;border-radius:50%;border:1px solid var(--silber-2);display:grid;place-items:center;flex:none;transition:transform .45s var(--aus),background-color .2s,border-color .2s}
.plus .ico{width:16px;height:16px}
.faq details[open] .plus{transform:rotate(45deg)}
.faq details > div{padding:0 64px 24px 4px;color:#2E3237;max-width:72ch}
.faq details::details-content{block-size:0;overflow:clip;transition:block-size .5s var(--aus),content-visibility .5s allow-discrete}
.faq details[open]::details-content{block-size:auto}
.panel--nacht .faq,.panel--nacht .faq details{border-color:var(--linie-2)}
.panel--nacht .faq details > div{color:#C9CDD2}
.panel--nacht .plus{border-color:var(--linie-2)}
.panel--nacht .faq summary:hover .plus{background:var(--nacht-3);border-color:#EEF0F2}

/* ---------- Formularfelder ---------- */
.feld{display:grid;gap:6px}
.feld + .feld{margin-top:18px}
.feld-label{font-weight:600;font-size:.95rem;color:var(--tinte)}
.feld-label .optional{font-weight:500;color:var(--leise-hell)}
.feld-eingabe{width:100%;min-height:52px;border-radius:12px;border:1px solid #BFC4CA;background:#fff;padding:12px 16px;font-size:1rem;color:var(--tinte);caret-color:var(--kobalt);transition:border-color .2s,box-shadow .2s}
textarea.feld-eingabe{min-height:120px;resize:vertical;line-height:1.5}
.feld-eingabe::placeholder{color:#6B7178;opacity:1}
.feld-eingabe:hover{border-color:#8E949B}
.feld-eingabe:focus{outline:2px solid var(--kobalt);outline-offset:1px;border-color:var(--kobalt)}
.feld-hinweis{font-size:.88rem;color:var(--leise-hell)}
.feld-fehler{display:none;align-items:flex-start;gap:8px;font-size:.92rem;font-weight:600;color:var(--rot)}
.feld-fehler .ico{margin-top:2px}
.feld--fehler .feld-eingabe,.feld-eingabe[aria-invalid="true"]{border-color:var(--rot);border-width:1.5px;background:#FFFBFA}
.feld--fehler .feld-fehler{display:flex}
.wahlfeld{display:flex;gap:12px;align-items:flex-start;cursor:pointer;font-size:.95rem;line-height:1.45}
.wahlfeld input{appearance:none;flex:none;width:22px;height:22px;margin:1px 0 0;border:1.5px solid #8E949B;border-radius:6px;background:#fff;display:grid;place-items:center;cursor:pointer;transition:background-color .2s,border-color .2s}
.wahlfeld input[type="radio"]{border-radius:50%}
.wahlfeld input::after{content:"";width:11px;height:6px;border:2px solid #fff;border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg) scale(0);transition:transform .2s var(--aus)}
.wahlfeld input:checked{background:var(--kobalt);border-color:var(--kobalt)}
.wahlfeld input:checked::after{transform:translateY(-1px) rotate(-45deg) scale(1)}
.wahlfeld input:focus-visible{outline:2px solid var(--kobalt);outline-offset:2px}
.wahlfeld input[aria-invalid="true"]{border-color:var(--rot)}
.honig{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden}

/* ---------- Hinweisbox ---------- */
.hinweisbox{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:14px;background:#fff;border:1px solid var(--silber);font-size:.95rem;line-height:1.45}
.hinweisbox .ico{margin-top:2px;color:var(--kobalt-tief)}
.hinweisbox--vorschau{background:#FFF7E0;border-color:#E9C46A;color:#4A3A0A}
.hinweisbox--vorschau .ico{color:#8A6100}
.hinweisbox--fehler{background:var(--rot-hauch);border-color:#F2B8B5;color:#5C140E}
.hinweisbox--fehler .ico{color:var(--rot)}
.hinweisbox--ok{background:#E8F5EC;border-color:#A9D8B8;color:#0F4D29}
.hinweisbox--ok .ico{color:var(--gruen-tief)}

/* ---------- Schrittfolge (Zeitleiste) ---------- */
.schrittfolge{position:relative;display:grid;gap:4px;padding-left:22px;counter-reset:schritt}
.schrittfolge::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px;background:var(--silber-2)}
.schrittfolge::after{content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px;background:var(--tinte);transform-origin:0 0;transform:scaleY(var(--fuell,1))}
.schritt{display:grid;grid-template-columns:34px 1fr;gap:0 8px;padding:9px 0;transition:color .4s var(--aus)}
.schritt .mono{font-size:.85rem;padding-top:3px}
.schritt h3{font-size:1.18rem;color:inherit}
.schritt p{grid-column:2;margin-top:4px;font-size:.95rem;line-height:1.5;max-width:52ch}
.panel--nacht .schrittfolge::before{background:var(--linie-2)}
.panel--nacht .schrittfolge::after{background:#EEF0F2}
.stufenleiste{display:flex;gap:4px}
.stufenleiste i{flex:1;height:4px;border-radius:2px;background:#E1E4E8;transition:background-color .4s}
.stufenleiste i.an{background:var(--kobalt)}

/* ---------- Gerät mit Bildschirm (Maße: assets/img/geraete-geometrie.json) ---------- */
.geraet{position:relative;flex:none}
.geraet--handy{aspect-ratio:760/1562;height:var(--h,560px)}
.geraet--monitor{aspect-ratio:1600/1206;width:var(--w,100%)}
.geraet > .geraet-bild{width:100%;height:100%}
.geraet-schirm{position:absolute;overflow:hidden;background:#fff;container-type:inline-size}
.geraet--handy .geraet-schirm{left:5.236%;top:1.921%;width:89.528%;height:96.032%;border-radius:6.7%/3.04%}
.geraet--monitor .geraet-schirm{left:1.157%;top:1.662%;width:97.59%;height:71.739%}
.geraet-schirm > img{position:absolute;left:0;top:0;width:100%;height:auto}
.geraet--handy::before{content:"";position:absolute;left:4%;right:-6%;bottom:-3%;height:9%;border-radius:50%;background:radial-gradient(closest-side,rgba(10,12,16,.55),rgba(10,12,16,0));filter:blur(6px);z-index:-1}

/* ---------- Vorher/Nachher-Vergleich (main.js) ---------- */
.vergleich-oben{clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0)}
.vergleich-linie{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(17,18,19,.25);z-index:3;pointer-events:none}
.vergleich-marke{position:absolute;top:3%;z-index:2;font-family:var(--kopf);font-weight:800;text-transform:uppercase;font-size:clamp(.7rem,1.3cqw,1rem);letter-spacing:.02em;line-height:1;padding:.5em .8em;border-radius:99px;background:var(--nacht);color:#fff;box-shadow:0 8px 18px -8px rgba(0,0,0,.6)}
.vergleich-oben .vergleich-marke{left:2.5%;background:#fff;color:var(--nacht)}
.vergleich-ebene:not(.vergleich-oben) .vergleich-marke{right:2.5%}
.vergleich-griff{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:#fff;color:var(--tinte);display:grid;place-items:center;box-shadow:0 10px 24px -8px rgba(0,0,0,.55)}
.vergleich-griff .ico{width:20px;height:20px}
.vergleich-regler{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center}
.vergleich-regler .seite-name{font-family:var(--kopf);font-weight:800;text-transform:uppercase;font-size:1.25rem;letter-spacing:.01em;line-height:1}
.vergleich-regler input{appearance:none;-webkit-appearance:none;width:100%;height:44px;background:transparent;cursor:ew-resize;margin:0}
.vergleich-regler input::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg,#EEF0F2 0 var(--pos,50%),var(--linie-2) var(--pos,50%) 100%)}
.vergleich-regler input::-moz-range-track{height:6px;border-radius:3px;background:var(--linie-2)}
.vergleich-regler input::-moz-range-progress{height:6px;border-radius:3px;background:#EEF0F2}
.vergleich-regler input::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;margin-top:-12px;border-radius:50%;background:#fff;border:0;box-shadow:0 6px 16px -4px rgba(0,0,0,.6);transition:transform .25s var(--aus)}
.vergleich-regler input::-moz-range-thumb{width:30px;height:30px;border-radius:50%;background:#fff;border:0;box-shadow:0 6px 16px -4px rgba(0,0,0,.6)}
.vergleich-regler input:hover::-webkit-slider-thumb{transform:scale(1.08)}
.vergleich-regler input:focus-visible{outline:none}
.vergleich-regler input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--nacht),0 0 0 5px #EEF0F2}
.vergleich-regler input:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px var(--nacht),0 0 0 5px #EEF0F2}

/* ---------- Fußzeile ---------- */
.seitenfuss{margin:var(--rand) var(--rand) var(--rand)}
.abschluss + .seitenfuss{margin-top:0}
.abschluss + .seitenfuss .panel{border-top-left-radius:0;border-top-right-radius:0}
.abschluss:has(+ .seitenfuss) .panel{border-bottom-left-radius:0;border-bottom-right-radius:0}
.seitenfuss .panel{margin:0}
.fuss{border-top:1px solid var(--linie);padding:56px 48px 36px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,3fr);gap:40px;font-size:.95rem;color:var(--leise)}
.fuss img{height:24px;width:auto;margin-bottom:18px}
.fuss strong{color:#EEF0F2;font-weight:600;display:block}
.fuss p{margin-top:8px;max-width:44ch}
.fuss nav ul{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px}
.fuss a{color:#EEF0F2;text-decoration:none}
.fuss a:hover{text-decoration:underline}
.fuss a[aria-current="page"]{text-decoration:underline}
.fuss-unten{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;padding-top:28px;border-top:1px solid var(--linie);font-size:.88rem}
.fuss-unten .rechtliches{display:flex;gap:20px}
.messung{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.messung .mono{white-space:nowrap;color:#EEF0F2}
.seitenfuss--allein .fuss{border-top:0}

/* ---------- Abschluss (alle Seiten) ---------- */
.abschluss{margin-top:var(--rand)}
.abschluss-buehne{position:relative;padding:clamp(110px,16vh,180px) 32px 120px;text-align:center;isolation:isolate}
.licht--abschluss{background:radial-gradient(ellipse 60% 55% at 50% 100%,rgba(47,91,240,.7) 0%,rgba(47,91,240,.32) 38%,rgba(47,91,240,0) 72%);transform-origin:50% 100%}
.bew .licht--abschluss{transform:scaleY(calc(.6 + var(--p, .6) * .6))}
.abschluss h2{font-size:clamp(2.8rem,7vw,6rem);color:#EEF0F2;max-width:17ch;margin:0 auto}
.abschluss-buehne p{margin:24px auto 0;max-width:54ch;font-size:1.15rem;color:#C9CDD2}
.abschluss-buehne .knopfreihe{justify-content:center;margin-top:32px}

/* ==========================================================================
   WEBSITE-CHECK (check.js) · Startseite kompakt, /website-check/ groß
   ========================================================================== */
.check{position:relative;--check-schatten:0 40px 80px -36px rgba(17,18,19,.42),0 10px 24px -14px rgba(17,18,19,.25)}
.check-form{position:relative;background:#fff;border-radius:24px;padding:26px;box-shadow:var(--check-schatten)}
.check-zeile{display:flex;gap:10px;margin-top:8px}
.check-zeile .feld-eingabe{flex:1;min-width:0;min-height:58px;font-size:1.08rem;font-weight:500}
.check-zeile .knopf{min-height:58px;padding:0 24px}
.check-klein{margin-top:14px;font-size:.86rem;line-height:1.45;color:var(--leise-hell);max-width:60ch}
.check-klein a{color:var(--tinte-2)}
.check-pruefung{margin-top:16px;border-top:1px solid var(--hell);padding-top:16px}
.check-pruefung > p{font-weight:600;display:flex;align-items:center;gap:10px}
.check-schritte{margin-top:12px;display:grid;gap:8px}
.check-schritte li{display:flex;align-items:center;gap:12px;color:var(--leise-hell);font-weight:500;transition:color .3s}
.check-schritte .kreis{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--silber-2);display:grid;place-items:center;flex:none;position:relative;transition:background-color .3s,border-color .3s}
.check-schritte .kreis .ico{width:14px;height:14px;color:#fff;stroke-width:2.4;opacity:0;transform:scale(.6);transition:opacity .25s,transform .35s var(--aus)}
.check-schritte li.laeuft{color:var(--tinte)}
.check-schritte li.laeuft .kreis{border-color:var(--kobalt);border-top-color:transparent;animation:drehen .8s linear infinite}
.check-schritte li.fertig{color:var(--tinte)}
.check-schritte li.fertig .kreis{background:var(--kobalt);border-color:var(--kobalt);animation:none}
.check-schritte li.fertig .kreis .ico{opacity:1;transform:none}
@keyframes drehen{to{transform:rotate(360deg)}}
.punkt-puls{position:relative;width:8px;height:8px;border-radius:50%;background:var(--kobalt)}
.punkt-puls::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1.5px solid var(--kobalt);animation:puls 1.2s var(--aus) infinite}
@keyframes puls{from{transform:scale(1);opacity:.8}to{transform:scale(2.6);opacity:0}}
.check-meldung{margin-top:14px}

.check-ergebnis{margin-top:28px;display:grid;gap:20px}
.check-ergebnis:focus{outline:none}
.check-kopf{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:20px;align-items:stretch}
.check-score{position:relative;background:var(--nacht);color:#EEF0F2;border-radius:24px;padding:28px 30px;overflow:hidden;isolation:isolate;box-shadow:var(--check-schatten)}
.check-score .licht{background:radial-gradient(ellipse 80% 70% at 100% 110%,rgba(47,91,240,.7),rgba(47,91,240,0) 70%)}
.check-score h3{font-size:clamp(1.6rem,2.4vw,2.2rem);display:flex;flex-wrap:wrap;align-items:baseline;gap:.2em .35em}
.check-score h3 b{font-size:clamp(4rem,8vw,6.5rem);line-height:.8;font-variant-numeric:tabular-nums;letter-spacing:-.01em;display:inline-block;min-width:2ch}
.check-domain{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;font-size:.92rem;color:var(--leise)}
.check-domain .mono{color:#EEF0F2}
.check-skala{position:relative;margin-top:22px;height:10px;border-radius:5px;background:var(--linie)}
.check-skala i{position:absolute;inset:0 auto 0 0;width:calc(var(--wert,0) * 1%);border-radius:5px;background:#EEF0F2;transition:width 1.4s var(--aus)}
.check-skala-text{margin-top:8px;display:flex;justify-content:space-between;font-size:.8rem;color:var(--leise)}
.check-bereiche{background:#fff;border-radius:24px;padding:24px 26px;display:grid;gap:16px;align-content:center;box-shadow:var(--check-schatten)}
.check-bereich{display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:baseline}
.check-bereich span{font-weight:600}
.check-bereich .mono{font-size:.9rem;color:var(--tinte-2)}
.check-balken{grid-column:1/-1;height:8px;border-radius:4px;background:var(--hell);overflow:hidden}
.check-balken i{display:block;height:100%;width:calc(var(--wert,0) * 1%);border-radius:4px;background:var(--kobalt);transition:width 1.2s var(--aus) var(--verz,0s)}
.check-teil h4{font-family:var(--kopf);font-weight:800;text-transform:uppercase;font-size:1.5rem;line-height:1;margin:0 0 14px;color:var(--tinte)}
/* Funde als Artefakte in gestaffelter Tiefe: zwei versetzte Spalten, nach Bereich gruppiert, Karten überlappen leicht */
.check-funde{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;align-items:start}
.check-spalte{display:grid;gap:26px}
.check-gruppe h5{margin:0 0 10px;font-family:var(--kopf);font-weight:700;text-transform:uppercase;font-size:1.05rem;letter-spacing:.01em;line-height:1;color:var(--tinte)}
.check-gruppe ul{display:grid}
.check-spalte:nth-child(2){margin-top:64px}
.check-fund{position:relative;z-index:var(--z,1);margin-left:var(--x,0px);margin-right:calc(28px - var(--x,0px));background:#fff;border-radius:18px;padding:16px 20px 26px;--d:.7;--sy:calc(10px + var(--d) * 18px);box-shadow:0 var(--sy) calc(26px + var(--d) * 26px) -14px rgba(17,18,19,.42),0 2px 6px -2px rgba(17,18,19,.1);display:grid;gap:6px;align-content:start}
.check-fund + .check-fund{margin-top:-12px}
.check-fund-kopf{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.check-fund-kopf .mono{font-size:.78rem;color:var(--leise-hell);white-space:nowrap}
.check-fund strong{font-weight:600;font-size:1.02rem;line-height:1.3}
.check-fund p{font-size:.93rem;line-height:1.45;color:#2E3237}
.check-fund--hinweis{background:#F7F8F9;box-shadow:none;border:1px dashed var(--silber-2)}
.check-gut{display:flex;flex-wrap:wrap;gap:8px}
.check-gut li{display:inline-flex;align-items:center;gap:8px;background:#fff;border-radius:999px;padding:7px 14px 7px 10px;font-weight:500;font-size:.93rem;box-shadow:0 8px 20px -14px rgba(17,18,19,.4)}
.check-gut .ico{color:var(--gruen-tief);stroke-width:2.2}
.check-messwerte{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.88rem;color:var(--leise-hell)}
.check-messwerte .mono{color:var(--tinte)}
.check-aktionen{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.check-block{border-radius:24px;padding:26px;background:#fff;box-shadow:var(--check-schatten)}
.check-block h3{font-size:1.6rem}
.check-block > p{margin-top:10px;color:#2E3237}
.check-block form{margin-top:16px;display:grid;gap:14px}
.check-block--entwurf{background:var(--nacht);color:#EEF0F2;position:relative;overflow:hidden;isolation:isolate}
.check-block--entwurf .licht{background:radial-gradient(ellipse 70% 80% at 0% 120%,rgba(47,91,240,.65),rgba(47,91,240,0) 70%)}
.check-block--entwurf > p{color:#C9CDD2}
.check-block--entwurf .knopf{margin-top:20px}
.check-mail-zeile{display:flex;gap:10px}
.check-mail-zeile .feld-eingabe{flex:1;min-width:0}
/* Funde legen sich aus (Signatur): Start an der Score-Fläche, Ziel im Raster */
.bew .check-fund.fliegt{transform:translate3d(var(--vx,0px),var(--vy,0px),0) scale(.55) rotate(var(--rot,0deg));opacity:0}
.bew .check-fund.liegt{transition:transform .9s var(--aus) var(--verz,0s),opacity .35s linear var(--verz,0s)}
.check-vorschau{display:flex}

/* ==========================================================================
   START (index.html)
   ========================================================================== */

/* ---- 1 Einstieg ---- */
.szene--einstieg{--hoehe:420vh;z-index:1;padding-top:var(--nav-h)}
.bew .szene--einstieg{padding-top:0}
.szene--einstieg .panel{border:1px solid rgba(17,18,19,.06);min-height:calc(100svh - var(--nav-h) - var(--rand));display:flex;flex-direction:column}
.licht--hero{transform-origin:50% 74%}
.ist-pin .licht--hero{transform:scale(calc(1 + var(--p) * .3))}
.hero-kopf{position:relative;z-index:5;text-align:center;padding:var(--einstieg-oben) 24px 0;display:flex;flex-direction:column;align-items:center}
.hero-kopf h1{color:var(--nacht)}
.hero-kopf h1 span{display:block}
.hero-text{margin-top:var(--einstieg-text-abstand);max-width:60ch;font-size:1.12rem;line-height:1.55;color:#16181B;font-weight:500}
.hero-kopf .knopfreihe{margin-top:var(--einstieg-knopf-abstand);justify-content:center}
.hero-kopf .fakten{margin-top:18px;justify-content:center}
.ist-pin .hero-kopf{position:absolute;inset:0 0 auto 0;--weg:clamp(0, var(--p) * 9, 1);opacity:calc(1 - clamp(0, var(--p) * 15, 1));transform:translate3d(0,calc(var(--weg) * -80px),0) scale(calc(1 - var(--weg) * .04))}
.hero-fuss{position:relative;z-index:6;margin-top:auto;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:10px 24px;padding:20px 24px 22px}
.hero-fuss .kette-text{font-size:.92rem;font-weight:500;color:#101214;max-width:34ch;text-align:right}
.ist-pin .hero-fuss{position:absolute;inset:auto 0 0 0}
.ist-pin .hero-fuss .kette-text{opacity:clamp(0, (var(--p) - .1) * 8, 1)}

.vitrine{position:relative;height:640px;margin-top:20px}
.ist-pin .vitrine{position:absolute;inset:0;height:auto;margin:0}
.kette-geraet{position:absolute;left:50%;top:30px;--h:640px;transform:translateX(-50%) perspective(1800px) rotateY(-12deg) rotateX(4deg);z-index:3}
/* Objekt in der Vitrine: steht geneigt, dreht sich beim Aufsteigen zum Betrachter, wiegt danach leicht mit */
.ist-pin .kette-geraet{--auf:clamp(0, var(--p) / .13, 1);--neig:calc(1 - var(--auf));--h:var(--geraet-hoehe);top:50%;transform:translate3d(-50%,calc(-50% + var(--neig) * var(--neig) * var(--geraet-versatz)),0) perspective(1800px) rotateY(calc(var(--neig) * -14deg + (var(--p) - .45) * 8deg)) rotateX(calc(var(--neig) * 6deg + 1.5deg))}
.kette-geraet::before{left:6%;right:-14%;bottom:-4.5%;height:7%;transform:translate(6%,0);background:radial-gradient(closest-side,rgba(10,14,40,.5),rgba(10,14,40,0));filter:blur(8px)}
.kette-geraet .geraet-schirm::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;border-radius:inherit;background:linear-gradient(118deg,rgba(255,255,255,0) 34%,rgba(255,255,255,.2) 44%,rgba(255,255,255,.05) 52%,rgba(255,255,255,0) 60%),linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,0) 14%);background-size:260% 100%,100% 100%;background-position:calc(20% + var(--p,.3) * 70%) 0,0 0;mix-blend-mode:screen}
.geraet-licht{position:absolute;inset:0;z-index:7;pointer-events:none;border-radius:13.5% / 6.6%;background:linear-gradient(98deg,rgba(150,178,255,0) 89%,rgba(150,178,255,.5) 96.5%,rgba(150,178,255,0) 100%),linear-gradient(180deg,rgba(150,178,255,0) 70%,rgba(150,178,255,.22) 99%);mix-blend-mode:screen}

/* Bildschirm-Stationen */
.station{position:absolute;inset:0;font-size:4.5cqw;line-height:1.35;color:#1B1D20;background:#fff;visibility:hidden;clip-path:inset(100% 0 0 0);transition:clip-path .7s var(--aus),visibility 0s linear .7s}
.station.an{visibility:visible;clip-path:inset(0 0 0 0);transition:clip-path .7s var(--aus),visibility 0s}
.station.war{visibility:visible;clip-path:inset(0 0 0 0);transition:visibility 0s linear .7s;z-index:0}
.station.an{z-index:1}
.statusleiste{display:flex;justify-content:space-between;align-items:center;padding:4.2cqw 7cqw 2cqw;font-weight:600;font-size:3.6cqw;font-variant-numeric:tabular-nums}
.statusleiste span:last-child{display:flex;gap:1.6cqw;align-items:center}
.statusleiste i{display:block;width:4.4cqw;height:2.6cqw;border-radius:.6cqw;background:currentColor}
.statusleiste i:first-child{width:3.4cqw;clip-path:polygon(0 100%,100% 0,100% 100%)}
/* (a) Suche */
.st-suche{background:#fff}
.suche-feld{margin:2cqw 5cqw 0;display:flex;align-items:center;gap:2.6cqw;padding:3.2cqw 4.2cqw;border-radius:99px;background:#F1F3F5;border:1px solid #E1E4E8;font-weight:500;font-size:4.4cqw}
.suche-feld .ico{width:4.8cqw;height:4.8cqw;color:#5D636A}
.suche-feld .tippen{display:inline-block;white-space:nowrap;clip-path:inset(0 100% 0 0);transition:clip-path .9s steps(11,end) .35s}
.station.an .tippen{clip-path:inset(0 0 0 0)}
.suche-tabs{display:flex;gap:5cqw;padding:3.6cqw 7cqw 0;font-size:3.5cqw;font-weight:600;color:#6B7178;border-bottom:1px solid #EBEDF0}
.suche-tabs span{padding-bottom:2.4cqw}
.suche-tabs span:first-child{color:#1B1D20;box-shadow:inset 0 -2px 0 #1B1D20}
.treffer{margin:4cqw 4cqw 0;padding:4cqw;border-radius:4cqw;position:relative;transition:background-color .5s var(--aus) 1.4s,border-color .5s var(--aus) 1.4s}
.treffer{border:1.5px solid transparent}
.station.an .treffer--muster{background:#F3F6FF;border-color:rgba(47,91,240,.45)}
.treffer-quelle{display:flex;align-items:center;gap:2.4cqw;font-size:3.3cqw;color:#4F555C;line-height:1.25}
.treffer-quelle b{display:block;color:#1B1D20;font-weight:600}
.favicon{width:6.6cqw;height:6.6cqw;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:700;font-size:3.4cqw;color:#fff;background:#B5532E}
.treffer p{font-size:3.6cqw;color:#3C4147;line-height:1.4}
.treffer .treffer-titel{margin:2.2cqw 0 1.2cqw;font-weight:600;font-size:4.5cqw;line-height:1.25;color:#1A3FB5}
.unterlinks{display:flex;flex-wrap:wrap;gap:1.6cqw;margin-top:2.6cqw}
.treffer .unterlinks span{padding:1.2cqw 2.6cqw;border-radius:99px;border:1px solid #D5DBEA;background:#fff;color:#1A3FB5;font-size:3.2cqw;font-weight:600}
.suche-karte{margin:3.6cqw 4cqw 0;border-radius:4cqw;overflow:hidden;border:1px solid #E1E4E8;background:#fff}
.suche-karte svg{width:100%;height:24cqw}
.suche-karte p{padding:2.6cqw 3.6cqw;font-size:3.3cqw;line-height:1.3;color:#4F555C}
.suche-karte b{display:block;color:#1B1D20;font-size:3.8cqw}
.fragen-liste{margin:4.4cqw 4cqw 0}
.fragen-titel{font-weight:700;font-size:4cqw;margin-bottom:1.4cqw}
.fragen-liste p:not(.fragen-titel){display:flex;justify-content:space-between;align-items:center;gap:3cqw;padding:2.8cqw 1cqw;border-top:1px solid #EBEDF0;font-size:3.5cqw;font-weight:500;color:#25292E}
.fragen-liste i{flex:none;width:2.2cqw;height:2.2cqw;border-right:1.5px solid #6B7178;border-bottom:1.5px solid #6B7178;transform:rotate(45deg) translateY(-.6cqw)}
.tipp{position:absolute;width:12cqw;height:12cqw;border-radius:50%;left:var(--tx,50%);top:var(--ty,50%);margin:-6cqw 0 0 -6cqw;background:rgba(17,18,19,.18);border:1.5px solid rgba(17,18,19,.35);opacity:0;transform:scale(.4);pointer-events:none;z-index:4}
.station.an .tipp{animation:tippen 1.1s var(--aus) var(--tv,1.6s) both}
@keyframes tippen{0%{opacity:0;transform:scale(1.4)}35%{opacity:1;transform:scale(.8)}60%{opacity:1;transform:scale(.9)}100%{opacity:0;transform:scale(1.6)}}
/* (b) KI-Assistent */
.st-ki{background:#FAFAFB;display:flex;flex-direction:column}
.ki-kopf{display:flex;align-items:center;gap:2.6cqw;padding:2cqw 6cqw 3.4cqw;font-weight:600;font-size:4cqw;border-bottom:1px solid #EBEDF0}
.ki-zeichen{width:7.4cqw;height:7.4cqw;border-radius:2.2cqw;background:var(--nacht);display:grid;place-items:center;color:#fff}
.ki-zeichen .ico{width:4.6cqw;height:4.6cqw;stroke-width:1.6}
.ki-verlauf{flex:1;padding:5cqw;display:flex;flex-direction:column;gap:4cqw}
.blase{max-width:84%;padding:3.4cqw 4.2cqw;border-radius:4.6cqw;font-size:4cqw;line-height:1.4}
.blase--frage{align-self:flex-end;background:var(--nacht);color:#fff;border-bottom-right-radius:1.4cqw;opacity:0;transform:translateY(3cqw);transition:opacity .4s .3s,transform .6s var(--aus) .3s}
.blase--antwort{align-self:flex-start;background:#fff;border:1px solid #E6E8EB;border-bottom-left-radius:1.4cqw;max-width:92%}
.station.an .blase--frage{opacity:1;transform:none}
.antwort-text{display:block;opacity:0;transform:translateY(2cqw);transition:opacity .4s .3s,transform .6s var(--aus) .3s}
.station.an .antwort-text{opacity:1;transform:none}
.quelle-karte{display:flex;gap:2.6cqw;align-items:center;margin-top:3cqw;padding:2cqw;border-radius:3.4cqw;background:#F4F5F7;border:1px solid #E6E8EB;opacity:0;transition:opacity .4s .6s}
.station.an .quelle-karte{opacity:1}
.quelle-karte img{width:13cqw;height:16cqw;flex:none;border-radius:2cqw;object-fit:cover;object-position:top}
.quelle-karte b{display:block;font-size:3.3cqw;line-height:1.25}
.quelle-karte small{display:flex;align-items:center;gap:1.4cqw;margin-top:1.2cqw;font-size:2.9cqw;color:#5D636A}
.quelle-karte .favicon{width:4cqw;height:4cqw;font-size:2.2cqw}
.folgefragen{display:flex;flex-direction:column;align-items:flex-start;gap:2cqw;opacity:0;transition:opacity .4s .85s}
.station.an .folgefragen{opacity:1}
.folgefragen span{padding:2cqw 3.4cqw;border-radius:99px;border:1px solid #D5D9DE;background:#fff;font-size:3.3cqw;font-weight:500;color:#25292E}
.quelle{display:inline-flex;align-items:center;gap:1.6cqw;margin-top:2.6cqw;padding:1.4cqw 2.6cqw;border-radius:99px;background:#F1F3F5;font-size:3.2cqw;font-weight:600;color:#3C4147}
.quelle .favicon{width:4.4cqw;height:4.4cqw;font-size:2.4cqw}
.ki-eingabe{margin:0 5cqw 6cqw;padding:3.2cqw 4.4cqw;border-radius:99px;border:1px solid #E1E4E8;background:#fff;color:#6B7178;font-size:3.6cqw;display:flex;justify-content:space-between;align-items:center}
.ki-eingabe i{width:6.4cqw;height:6.4cqw;border-radius:50%;background:#D5D9DE;display:block}
/* (c) Handy-Startseite des Musterbetriebs (Screenshot der Musterseite) */
.st-anruf{background:#F3F4EF}
.muster-bild-handy{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.anruf-banner{position:absolute;left:4cqw;right:4cqw;top:3cqw;z-index:5;display:flex;align-items:center;gap:3cqw;padding:3.2cqw 3.8cqw;border-radius:5cqw;background:var(--nacht);color:#fff;font-size:3.4cqw;line-height:1.25;box-shadow:0 4cqw 8cqw -3cqw rgba(0,0,0,.5);transform:translateY(-140%);transition:transform .7s var(--aus) 2.5s}
.anruf-banner b{display:block;font-size:3.9cqw}
.anruf-banner span{color:#B9BEC4}
.anruf-banner .kreis{width:8cqw;height:8cqw;border-radius:50%;background:var(--gruen);display:grid;place-items:center;flex:none}
.anruf-banner .ico{width:4.4cqw;height:4.4cqw}
.station.an .anruf-banner{transform:none}
/* (d) Benachrichtigung */
.st-anfrage{background:radial-gradient(ellipse 120% 70% at 50% 110%,#2F5BF0 0%,#4A71F2 30%,#8FA6F2 60%,#C9D3F2 85%);color:#fff}
.sperr-zeit{text-align:center;margin-top:12cqw;font-family:var(--kopf);font-weight:700;font-size:21cqw;line-height:.9;letter-spacing:-.01em;color:#0E1A4A;font-variant-numeric:tabular-nums}
.mitteilung{margin:22cqw 4.4cqw 0;padding:3.8cqw 4.2cqw;border-radius:5.4cqw;background:#fff;color:#1B1D20;box-shadow:0 5cqw 10cqw -4cqw rgba(17,18,19,.5);opacity:0;transform:translateY(-6cqw) scale(.96);transition:opacity .35s .5s,transform .8s var(--aus) .5s}
.station.an .mitteilung{opacity:1;transform:none}
.mitteilung-kopf{display:flex;align-items:center;gap:2.4cqw;font-size:3.2cqw;color:#5D636A;font-weight:600}
.mitteilung-kopf .app{width:5.6cqw;height:5.6cqw;border-radius:1.6cqw;background:#B5532E;display:grid;place-items:center;color:#fff}
.mitteilung-kopf .app .ico{width:3.6cqw;height:3.6cqw;stroke-width:2}
.mitteilung-kopf span:last-child{margin-left:auto;font-weight:500}
.mitteilung b{display:block;margin-top:2.2cqw;font-size:4cqw;line-height:1.3}
.mitteilung p{margin-top:1cqw;font-size:3.8cqw;color:#3C4147;line-height:1.35}
.mitteilung--zwei{margin-top:2.6cqw;opacity:0;transition-delay:.9s}
.station.an .mitteilung--zwei{opacity:1}
.mitteilung--zwei{background:#F3F5FA}
.sperr-knoepfe{position:absolute;left:8cqw;right:8cqw;bottom:9cqw;display:flex;justify-content:space-between}
.sperr-knoepfe i{width:11cqw;height:11cqw;border-radius:50%;background:rgba(14,26,74,.28)}
.st-anfrage::after{content:"";position:absolute;left:35%;right:35%;bottom:2.4cqw;height:1.4cqw;border-radius:1cqw;background:#0E1A4A;opacity:.55}

/* Stations-Artefakte */
.stationen{position:absolute;inset:0;z-index:4;pointer-events:none}
.station-knopf{position:absolute;pointer-events:auto;display:flex;align-items:center;gap:14px;width:236px;text-align:left;border:0;cursor:pointer;padding:14px 18px 14px 14px;transition:transform .9s var(--aus),opacity .45s var(--aus),box-shadow .4s var(--aus)}
.station-knopf .zeichen{width:42px;height:42px;border-radius:12px;background:var(--hell);color:var(--tinte-2);display:grid;place-items:center;flex:none;transition:background-color .4s var(--aus),color .4s var(--aus)}
.station-knopf .zeichen .ico{width:20px;height:20px}
.station-knopf b{display:block;font-family:var(--kopf);font-weight:800;text-transform:uppercase;font-size:1.35rem;line-height:1;letter-spacing:.01em}
.station-knopf small{display:block;margin-top:4px;font-size:.84rem;color:var(--leise-hell);line-height:1.3}
.station-knopf[aria-pressed="true"] .zeichen{background:var(--kobalt);color:#fff}
.station-knopf.erledigt .zeichen{background:var(--nacht);color:#fff}
.station-knopf:hover .zeichen{background:var(--kobalt-hauch);color:var(--kobalt-tief)}
.station-knopf[aria-pressed="true"]:hover .zeichen{background:var(--kobalt-hover);color:#fff}
.sk-1{left:calc(50% - var(--artefakt-abstand) - 20px);top:15%;--d:.7}
.sk-2{left:calc(50% + var(--artefakt-abstand) - 236px + 30px);top:30%;--d:1.15}
.sk-3{left:calc(50% - var(--artefakt-abstand) + 10px);top:52%;--d:1.35}
.sk-4{left:calc(50% + var(--artefakt-abstand) - 236px);top:66%;--d:.85}
.art-ladezeit{position:absolute;pointer-events:auto;left:calc(50% - var(--artefakt-abstand) + 30px);top:76%;width:220px;--d:.45}
/* Ohne Pin (mobil ohne Bewegung, kein JS): Artefakte als Reihe unter dem Gerät */
.szene--einstieg:not(.ist-pin) .stationen{position:relative;inset:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:560px;margin:24px auto 0;padding:0 16px}
.szene--einstieg:not(.ist-pin) .station-knopf,.szene--einstieg:not(.ist-pin) .art-ladezeit{position:relative;left:auto;top:auto;width:auto}
/* Zwei-Spalten-Raster auf dem Handy: Stationswörter wie „Angefragt“ passen sonst nicht in die halbe Breite */
.szene--einstieg:not(.ist-pin) .station-knopf{gap:10px;padding:12px 12px 12px 10px}
.szene--einstieg:not(.ist-pin) .station-knopf .zeichen{width:36px;height:36px}
.szene--einstieg:not(.ist-pin) .station-knopf b{font-size:min(1.35rem,4.6vw)}
@media (max-width:359px){.szene--einstieg:not(.ist-pin) .station-knopf{gap:8px;padding:10px 10px 10px 8px}.szene--einstieg:not(.ist-pin) .station-knopf .zeichen{width:30px;height:30px}}
.szene--einstieg:not(.ist-pin) .art-ladezeit{display:none}
.szene--einstieg:not(.ist-pin) .vitrine{height:auto;display:flex;flex-direction:column;align-items:center;padding-top:16px}
.szene--einstieg:not(.ist-pin) .kette-geraet{position:relative;left:auto;top:auto;transform:perspective(1800px) rotateY(-9deg) rotateX(3deg)}
/* Gepinnt: Artefakte erscheinen ganz (Klasse .da), Parallaxe über --p, nie halbtransparent im Stand */
.ist-pin .station-knopf,.ist-pin .art-ladezeit{opacity:0;visibility:hidden;--y:calc(var(--p) * var(--d) * var(--parallaxe) * -1);transform:translate3d(0,calc(var(--d) * var(--einlauf,90px) + var(--y)),0) scale(.92);transition:transform .9s var(--aus),opacity .4s linear,visibility 0s linear .4s}
.ist-pin .station-knopf.da,.ist-pin .art-ladezeit.da{opacity:1;visibility:visible;transform:translate3d(0,var(--y),0);transition:transform .9s var(--aus),opacity .4s linear,visibility 0s}
.ist-pin.ruhig .station-knopf.da,.ist-pin.ruhig .art-ladezeit.da{transition:opacity .4s linear,visibility 0s}

/* ---- 2 Nutzen ---- */
.szene--nutzen{position:relative;z-index:2}
.bew .szene--nutzen{margin-top:-60vh}
.szene--nutzen .panel{padding:clamp(80px,11vh,128px) 0 clamp(72px,10vh,112px);margin-top:var(--rand)}
.nutzen-kopf{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;align-items:end}
.nutzen-kopf h2{max-width:13ch}
.nutzen-kopf p{font-size:1.15rem;color:#C9CDD2;max-width:40ch;justify-self:end}
.nutzen-raster{margin-top:56px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px}
.nutzen{position:relative;border-radius:24px;background:var(--nacht-2);border:1px solid var(--linie);overflow:hidden;display:flex;flex-direction:column;isolation:isolate}
.nutzen:nth-child(1){grid-column:span 7}
.nutzen:nth-child(2){grid-column:span 5}
.nutzen:nth-child(3){grid-column:span 5}
.nutzen:nth-child(4){grid-column:span 7}
.nutzen-szene{position:relative;height:300px;overflow:hidden;background:radial-gradient(ellipse 70% 90% at 50% 120%,rgba(47,91,240,.55),rgba(47,91,240,0) 70%);border-bottom:1px solid var(--linie)}
.nutzen-text{padding:26px 30px 30px}
.nutzen-text h3{font-size:clamp(1.5rem,2vw,1.9rem);color:#EEF0F2}
.nutzen-text p{margin-top:12px;color:#C9CDD2;max-width:58ch}
.nutzen-fuss{margin-top:40px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center;padding-top:28px;border-top:1px solid var(--linie)}
.nutzen-fuss p{color:var(--leise);max-width:72ch}
.ns{position:absolute;color:var(--tinte)}
.bew .ns{transform:translate3d(0,calc((.5 - var(--p,.5)) * var(--tiefe,0px)),0)}
/* Szene Google */
.ns-browser{left:7%;right:24%;top:34px;background:#fff;border-radius:16px;box-shadow:0 30px 50px -24px rgba(0,0,0,.7);overflow:hidden;--tiefe:24px}
.ns-tab{display:flex;align-items:center;gap:8px;padding:10px 14px;background:#F1F3F5;font-size:.82rem;font-weight:600;color:#3C4147}
.ns-tab i{width:14px;height:14px;border-radius:4px;background:#B5532E;flex:none}
.ns-tab span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ns-seite{padding:18px 20px 22px}
.ns-seite b{display:block;font-family:var(--kopf);font-weight:800;text-transform:uppercase;font-size:1.5rem;line-height:1}
.ns-seite p{margin-top:8px;font-size:.9rem;color:#3C4147;line-height:1.45}
.ns-seite mark{background:var(--kobalt-hauch);color:var(--kobalt-tief);border-radius:4px;padding:0 3px;font-weight:600}
.ns-zeilen{margin-top:14px;display:grid;gap:7px}
.ns-zeilen i{display:block;height:7px;border-radius:4px;background:#ECEEF1}
.ns-zeilen i:nth-child(2){width:86%}.ns-zeilen i:nth-child(3){width:70%}
.ns-marke{position:absolute;display:inline-flex;align-items:center;gap:8px;background:#fff;border-radius:12px;padding:8px 12px;font-size:.84rem;font-weight:600;box-shadow:0 18px 30px -14px rgba(0,0,0,.7)}
.ns-marke .mono{font-size:.76rem;color:var(--kobalt-tief)}
.ns-marke--1{right:6%;top:46px;--tiefe:60px}
.ns-marke--2{right:9%;top:126px;--tiefe:90px}
.ns-marke--3{right:4%;top:206px;--tiefe:46px}
/* Szene KI */
.ns-chat{left:8%;right:8%;top:30px;display:grid;gap:12px;--tiefe:30px}
.ns-blase{padding:12px 16px;border-radius:16px;font-size:.92rem;line-height:1.4;box-shadow:0 20px 34px -18px rgba(0,0,0,.7)}
.ns-blase--frage{justify-self:end;background:#EEF0F2;color:var(--tinte);border-bottom-right-radius:5px;max-width:80%}
.ns-blase--antwort{background:#fff;border-bottom-left-radius:5px;max-width:92%}
.ns-blase--antwort .quelle{font-size:.76rem;padding:4px 10px;gap:6px;margin-top:8px}
.ns-blase--antwort .quelle .favicon{width:16px;height:16px;font-size:.6rem}
.ns-daten{position:absolute;right:6%;bottom:22px;background:#0B0C0D;color:#C9CDD2;border:1px solid var(--linie-2);border-radius:14px;padding:12px 14px;font-size:.76rem;line-height:1.6;--tiefe:70px;box-shadow:0 24px 40px -20px rgba(0,0,0,.8)}
.ns-daten .mono{font-size:.76rem}
.ns-daten b{color:#EEF0F2;font-weight:500}
/* Szene Handy */
.ns-handy{left:34%;top:28px;width:150px;margin-left:-75px;height:300px;border-radius:26px;background:#0B0C0D;border:5px solid #2A2E33;box-shadow:0 30px 50px -20px rgba(0,0,0,.8);padding:10px 8px;--tiefe:20px}
.ns-handy .innen-schirm{height:100%;border-radius:18px;background:#fff;overflow:hidden;position:relative;padding:14px 10px}
.ns-handy .innen-schirm b{display:block;font-family:var(--kopf);font-weight:800;font-size:1rem;text-transform:uppercase;line-height:1}
.ns-handy .innen-schirm i{display:block;height:5px;border-radius:3px;background:#E6E8EB;margin-top:6px}
.ns-handy .tel{margin-top:14px;display:flex;align-items:center;justify-content:center;gap:6px;padding:9px;border-radius:10px;background:var(--kobalt);color:#fff;font-size:.78rem;font-weight:600;position:relative}
.ns-handy .tel .ico{width:14px;height:14px}
.ns-handy .tel::after{content:"";position:absolute;inset:-6px;border-radius:14px;border:1.5px solid var(--kobalt);animation:tipp-ring 2.4s var(--aus) infinite}
@keyframes tipp-ring{from{transform:scale(.9);opacity:.8}to{transform:scale(1.25);opacity:0}}
.ns-daumen{position:absolute;left:calc(34% - 150px);top:150px;width:300px;height:220px;border-radius:50%;border:1.5px dashed rgba(238,240,242,.35);--tiefe:-20px}
.ns-tempo{position:absolute;right:6%;top:150px;--tiefe:70px}
.ns-tempo .mono{display:block;font-size:1.5rem;color:var(--tinte)}
.ns-tempo .klein{white-space:nowrap}
/* Szene Anfrage */
.ns-formular{left:7%;top:30px;width:min(300px,52%);background:#fff;border-radius:16px;padding:16px;box-shadow:0 30px 50px -24px rgba(0,0,0,.7);display:grid;gap:9px;--tiefe:24px}
.ns-formular b{font-family:var(--kopf);font-weight:800;text-transform:uppercase;font-size:1.1rem;line-height:1}
.ns-feld{height:30px;border-radius:8px;border:1px solid #D5D9DE;background:#F7F8F9;font-size:.78rem;color:#4F555C;display:flex;align-items:center;padding:0 10px}
.ns-senden{height:34px;border-radius:9px;background:var(--nacht);color:#fff;font-size:.8rem;font-weight:600;display:grid;place-items:center}
.ns-wege{position:absolute;right:7%;top:46px;display:grid;gap:12px;--tiefe:70px}
.ns-weg{display:flex;align-items:center;gap:10px;background:#fff;border-radius:14px;padding:10px 14px 10px 10px;font-weight:600;font-size:.88rem;box-shadow:0 18px 30px -14px rgba(0,0,0,.7)}
.ns-weg span{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--kobalt)}
.ns-weg span .ico{width:16px;height:16px}
.ns-weg--wa span{background:var(--gruen)}

/* ---- 3 Probleme ---- */
.szene--probleme{--hoehe:440vh;z-index:3}
.szene--probleme > .buehne > .panel{padding:96px 0;margin-top:var(--rand);border:1px solid rgba(17,18,19,.05)}
.ist-pin.szene--probleme > .buehne > .panel{padding:0;display:flex;align-items:center}
.probleme-raster{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center;width:100%;max-width:1320px;margin:0 auto;padding:0 48px}
.probleme-links h2{max-width:14ch}
.probleme-links p{margin-top:22px;font-size:1.15rem;color:var(--leise-hell);max-width:40ch}
.zaehler{display:flex;gap:6px;margin-top:40px;max-width:260px}
.zaehler i{flex:1;height:3px;border-radius:2px;background:var(--silber-2);position:relative;overflow:hidden}
.zaehler i::after{content:"";position:absolute;inset:0;background:var(--nacht);transform-origin:0 50%;transform:scaleX(var(--z,1))}
.stapel{position:relative;display:grid;gap:24px}
.stapel .karte{max-width:540px;background:linear-gradient(180deg,#FFFFFF,#F5F6F8)}
.stapel .karte-bild{aspect-ratio:16/9.2;background:linear-gradient(180deg,#E6E9ED,#D9DDE2)}
.ist-pin .stapel{display:block;height:min(620px,calc(100svh - 150px))}
.ist-pin .stapel .karte{position:absolute;left:calc(50% - min(520px,40vw) / 2);top:50%;width:min(520px,40vw);z-index:var(--i);transform-origin:50% 0;--bb:min(var(--b), 3);transform:translate3d(0,calc(-50% + (1 - var(--a)) * 105vh - var(--bb) * 26px),0) scale(calc(1 - var(--bb) * .045));will-change:transform}
.ist-pin .stapel .karte.tief{visibility:hidden}
.ist-pin .stapel .karte.weg{visibility:hidden}
.ist-pin .stapel .karte .karte-bild{aspect-ratio:auto;height:min(290px,calc(100svh - 470px))}
.karte-schatten{position:absolute;inset:0;background:var(--nacht);opacity:calc(min(var(--b,0), 3) * .06);pointer-events:none;z-index:5}
/* Mini-Ansichten (gezeichnet, neutral) */
.mini{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--text)}
.mini-handy{width:30%;height:88%;margin-top:12%;align-self:start;border-radius:16px;background:#0B0C0D;padding:6px 5px;box-shadow:0 18px 30px -14px rgba(17,18,19,.45)}
.mini-handy > div{height:100%;border-radius:11px;background:#fff;overflow:hidden;padding:10px 7px;position:relative}
.mini-winzig{display:grid;gap:3px}
.mini-winzig i{display:block;height:3px;border-radius:2px;background:#C9CCD0}
.mini-winzig i:nth-child(3n){width:70%}.mini-winzig i:nth-child(4n){width:86%}
.mini-nummer{margin-top:8px;font-size:7px;color:#6B7178;white-space:nowrap}
.mini-lupe{position:absolute;right:-34px;top:38%;width:62px;height:62px;border-radius:50%;background:#fff;border:3px solid var(--tinte);display:grid;place-items:center;font-size:.62rem;font-weight:600;box-shadow:0 12px 24px -10px rgba(17,18,19,.5)}
.mini-lupe::after{content:"";position:absolute;right:-14px;bottom:-12px;width:20px;height:5px;border-radius:3px;background:var(--tinte);transform:rotate(45deg)}
.mini-anmerkung{position:absolute;display:inline-flex;align-items:center;gap:6px;background:#fff;border-radius:10px;padding:6px 10px;font-size:.78rem;font-weight:600;box-shadow:0 12px 24px -12px rgba(17,18,19,.45);white-space:nowrap}
.mini-anmerkung .ico{width:14px;height:14px;color:var(--rot);stroke-width:2.2}
.mini-browser{width:84%;height:78%;border-radius:12px;background:#fff;box-shadow:0 18px 30px -14px rgba(17,18,19,.4);overflow:hidden;display:flex;flex-direction:column}
.mini-leiste{display:flex;align-items:center;gap:5px;padding:7px 10px;background:#F1F3F5;font-size:.66rem;color:#6B7178}
.mini-leiste i{width:7px;height:7px;border-radius:50%;background:#D5D9DE;flex:none}
.mini-leiste span{margin-left:8px;flex:1;background:#fff;border-radius:6px;padding:2px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-slogan{flex:1;display:grid;place-items:center;background:linear-gradient(135deg,#3F4A55,#56626E);color:#fff;font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:clamp(1rem,1.6vw,1.35rem);text-align:center;padding:12px}
.mini-formular{width:56%;background:#fff;border-radius:12px;padding:12px 12px 10px;box-shadow:0 18px 30px -14px rgba(17,18,19,.4);display:grid;grid-template-columns:1fr 1fr;gap:5px}
.mini-formular i{display:block;height:13px;border-radius:4px;border:1px solid #D5D9DE;background:#F7F8F9;position:relative}
.mini-formular i::after{content:"*";position:absolute;right:3px;top:-3px;font-size:9px;font-style:normal;color:var(--rot)}
.mini-formular i.breit{grid-column:span 2}
.mini-formular em{grid-column:span 2;height:16px;border-radius:4px;background:#C9CCD0;margin-top:3px}
.mini-alt{width:80%;height:80%;border:1px solid #9AA0A6;background:repeating-linear-gradient(45deg,#E9E4D6 0 6px,#E2DCCB 6px 12px);display:grid;grid-template-columns:24% 1fr;font-family:"Times New Roman",serif;color:#1B1B6B;box-shadow:0 18px 30px -14px rgba(17,18,19,.4)}
.mini-alt nav{background:#2B2B7E;color:#FFFF99;font-size:.62rem;padding:8px 6px;display:grid;align-content:start;gap:6px;text-decoration:underline}
.mini-alt div{padding:10px;text-align:center;font-size:.72rem;display:grid;align-content:start;gap:8px}
.mini-alt b{font-size:.95rem;color:#8B0000}
.mini-alt i{display:block;height:34%;border:2px ridge #999;background:#C8C3B5}
.mini-alt small{font-size:.58rem;color:#555}
.mini-suche{width:82%;background:#fff;border-radius:12px;padding:12px 14px;box-shadow:0 18px 30px -14px rgba(17,18,19,.4);display:grid;gap:10px;font-size:.78rem}
.mini-suche .suchzeile{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:99px;background:#F1F3F5;font-weight:600}
.mini-suche .suchzeile .ico{width:13px;height:13px;color:#5D636A}
.mini-suche .eintrag{display:grid;gap:2px;padding:6px 8px;border-radius:8px}
.mini-suche .eintrag b{color:#1A3FB5;font-weight:600}
.mini-suche .eintrag span{color:#5D636A}
.mini-suche .eintrag--ihr{background:#FDF0EE;box-shadow:inset 0 0 0 1px #F2B8B5}

/* ---- 4 Website-Check (Startseite) ---- */
.szene--check{margin-top:var(--rand);position:relative;z-index:3}
.szene--check .panel{padding:clamp(80px,11vh,128px) 0}
.licht--check{background:radial-gradient(ellipse 55% 75% at 78% 40%,#2F5BF0 0%,#4A71F2 18%,#7F99F2 38%,#B7C5F0 58%,#DCE2F0 76%,#EEF0F2 92%)}
.check-raster{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center}
.check-raster h2{max-width:11ch;color:var(--nacht)}
.check-raster .lead{margin-top:20px;color:#16181B;max-width:44ch}
.check-raster .check{grid-column:2}
.check-raster .check-ergebnis{grid-column:1/-1}

/* ---- 5 Für wen ---- */
.fuer-wen h2{max-width:16ch}
.kacheln{margin-top:56px;display:grid;grid-template-columns:1.15fr 1fr;grid-template-rows:auto auto;gap:20px}
.kachel{position:relative;border-radius:var(--radius);padding:36px;background:var(--hell);display:flex;flex-direction:column;overflow:hidden}
.kachel--gross{grid-row:span 2;background:var(--kobalt-hauch);padding:44px;justify-content:space-between;min-height:560px}
.kachel svg.zeichnung{width:150px;height:auto;stroke:var(--tinte);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round;margin-bottom:28px}
.kachel--gross svg.zeichnung{width:min(300px,70%);stroke:var(--kobalt-tief)}
.kachel h3{font-size:clamp(1.6rem,2.3vw,2.2rem)}
.kachel--gross h3{font-size:clamp(2rem,3.4vw,3.2rem);max-width:12ch}
.kachel p{margin-top:12px;color:var(--leise-hell);max-width:48ch}
.kachel--gross p{color:#1F2A4F;font-size:1.1rem}
.kachel .textlink{margin-top:24px}
.bew .fuer-wen .kachel{transform:translate3d(0,calc((.5 - var(--p, .5)) * var(--tiefe, 0px)),0)}
.shop-hinweis{margin-top:28px;display:flex;gap:14px;align-items:flex-start;padding-top:24px;border-top:1px solid var(--silber);color:var(--leise-hell);max-width:80ch}
.shop-hinweis .ico{width:22px;height:22px;color:var(--tinte);margin-top:2px}

/* ---- 6 Pakete ---- */
.pakete{padding-top:40px}
.pakete-kopf{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end}
.pakete-kopf p{color:var(--leise-hell);font-size:1.12rem;max-width:44ch;justify-self:end}
.paket-raster{margin-top:56px;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.paket{position:relative;border-radius:var(--radius);padding:44px;display:flex;flex-direction:column;overflow:hidden;isolation:isolate}
.paket--start{background:#fff;border:1px solid var(--silber)}
.paket--pro{color:#fff;background:#1F43C9}
.paket--pro .licht{background:radial-gradient(ellipse 90% 70% at 72% 0%,#3D66F2 0%,#2F5BF0 32%,#2448C9 62%,#1A2F86 100%)}
.paket-name{font-size:clamp(1.8rem,2.6vw,2.4rem)}
.paket-umfang{margin-top:10px;font-size:1rem;font-weight:600}
.paket--start .paket-umfang{color:var(--leise-hell)}
.preis{margin-top:30px;display:flex;align-items:baseline;gap:10px;font-family:var(--kopf);font-weight:800;line-height:.9}
.preis b{font-size:clamp(4rem,7vw,6rem);font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.preis span{font-family:var(--text);font-weight:600;font-size:1.1rem}
.paket .haken-liste{margin-top:30px;flex:1}
.paket .knopf{margin-top:36px;align-self:flex-start}
.zusatz{margin-top:20px;border-radius:var(--radius);background:var(--hell);padding:8px 44px}
.zusatz-zeile{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr) minmax(0,3fr);gap:32px;padding:32px 0;align-items:start}
.zusatz-zeile+.zusatz-zeile{border-top:1px solid var(--silber-2)}
.zusatz-zeile h3{font-size:1.5rem}
.zusatz-zeile .klein{margin-top:10px;font-size:.92rem}
.zusatz-zeile ul{display:flex;flex-wrap:wrap;gap:8px}
.zusatz-zeile li{background:#fff;border:1px solid var(--silber);border-radius:999px;padding:5px 13px;font-size:.92rem}
.zusatz-preis{text-align:right;font-weight:600}
.zusatz-preis b{display:block;font-family:var(--kopf);font-size:2.2rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.zusatz-preis span{font-size:.9rem;color:var(--leise-hell);display:block;margin-top:6px}
.pakete-fuss{margin-top:32px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:center}
.pakete-fuss p{color:var(--leise-hell);max-width:70ch}

/* ---- 7 Ablauf ---- */
.szene--ablauf{--hoehe:500vh;z-index:4}
.szene--ablauf .panel{padding:96px 0}
.ist-pin.szene--ablauf .panel{padding:0;display:flex;align-items:center;transform:scale(calc(.94 + .06 * var(--ein, 1)));transform-origin:50% 0}
.ablauf-raster{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px;align-items:center;width:100%;max-width:1320px;margin:0 auto;padding:0 48px}
.ablauf-links h2{color:#EEF0F2}
.ablauf-links > p{margin-top:16px;color:var(--leise);max-width:46ch}
.ablauf-links .schrittfolge{margin-top:28px}
.ablauf-links .schritt{color:var(--leise)}
.ablauf-links .schritt.aktiv{color:#EEF0F2}
.fenster{position:relative;border-radius:22px;background:#fff;color:var(--tinte);box-shadow:0 50px 80px -30px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.06);overflow:hidden;height:500px}
.ist-pin .fenster{transform:translate3d(0,calc((.5 - var(--p)) * 40px),0)}
.fenster-leiste{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid #E6E8EB;font-size:.88rem;font-weight:600}
.fenster-leiste .stufenleiste{flex:1;max-width:180px}
.stufe{position:absolute;inset:57px 0 0 0;padding:26px 28px;opacity:0;visibility:hidden;transform:translate3d(0,14px,0);transition:opacity .5s var(--aus),transform .6s var(--aus),visibility 0s linear .5s;pointer-events:none}
.stufe.an{opacity:1;visibility:visible;transform:none;transition:opacity .5s var(--aus),transform .6s var(--aus),visibility 0s}
.stufe .stufe-titel{margin:0 0 4px;font-family:var(--kopf);font-weight:800;text-transform:uppercase;font-size:1.55rem;line-height:1}
.demo-feld{margin-top:14px}
.demo-feld .etikett{display:block;font-size:.82rem;font-weight:600;color:var(--leise-hell);margin-bottom:6px}
.demo-feld .eingabe{min-height:44px;border-radius:10px;border:1px solid #D5D9DE;background:#F7F8F9;display:flex;align-items:center;padding:10px 14px;font-weight:500}
.demo-feld .eingabe span{display:inline-block;white-space:nowrap;clip-path:inset(0 calc((1 - clamp(0, (var(--f, 1) - var(--k)) * 3.2, 1)) * 100%) 0 0)}
.wahl{display:flex;gap:8px;flex-wrap:wrap}
.wahl span{padding:9px 14px;border-radius:10px;border:1px solid #D5D9DE;font-weight:500;font-size:.92rem}
.wahl span.gewaehlt{border-color:var(--nacht);background:var(--nacht);color:#fff}
.vorschau{margin-top:14px;border-radius:14px;border:1px solid #E1E4E8;overflow:hidden;background:#F7F8F9}
.vorschau-kopf{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:#fff;border-bottom:1px solid #E1E4E8}
.vorschau-kopf i{display:block;height:6px;border-radius:3px;background:#D5D9DE}
.vorschau-buehne{padding:18px 16px;background:linear-gradient(115deg,#E9DDCB 0 50%,#D7C3A6 50%);color:#1F1A16}
.vorschau-buehne b{display:block;font-family:var(--kopf);font-size:1.25rem;text-transform:uppercase;line-height:1}
.vorschau-buehne i{display:block;height:6px;border-radius:3px;background:rgba(31,26,22,.35);margin-top:8px;width:70%}
.vorschau-buehne em{display:inline-block;margin-top:12px;height:20px;width:84px;border-radius:6px;background:#1F6B3A}
.vorschau-raster{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px}
.vorschau-raster i{height:46px;border-radius:8px;background:#E1E4E8}
.link-knopf{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:.85rem;font-weight:600;background:var(--nacht);color:#fff;padding:8px 12px;border-radius:9px}
.link-knopf .ico{width:14px;height:14px}
.tabelle{margin-top:16px;border-top:1px solid #E6E8EB}
.tabelle div{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid #E6E8EB;font-size:.98rem}
.tabelle dt{color:var(--leise-hell)}
.tabelle dd{margin:0;font-weight:600;text-align:right}
.liste-check{margin-top:16px;display:grid;gap:10px}
.liste-check li{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid #E6E8EB;border-radius:12px;font-weight:500}
.liste-check .kreis{width:24px;height:24px;border-radius:50%;border:1.5px solid #C9CCD0;display:grid;place-items:center;flex:none;transition:background-color .3s,border-color .3s}
.liste-check .kreis .ico{width:14px;height:14px;color:#fff;stroke-width:2.4;opacity:0;transition:opacity .3s}
.liste-check li.fertig .kreis{background:var(--kobalt);border-color:var(--kobalt)}
.liste-check li.fertig .kreis .ico{opacity:1}
.adresszeile{margin-top:16px;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;background:#F2F4F6;font-size:.9rem;color:var(--leise-hell)}
.adresszeile .ico{width:15px;height:15px}
.adresszeile i{flex:1;height:7px;border-radius:4px;background:#DADDE1}

/* ---- 8 Erst sehen (Beispiel-Entwürfe) ---- */
.szene--sehen .panel{padding:clamp(80px,12vh,136px) 0 clamp(80px,11vh,120px)}
.sehen-kopf{text-align:center}
.sehen-kopf h2{font-size:clamp(2.6rem,6vw,5.4rem);max-width:14ch;margin:0 auto;color:var(--nacht)}
.sehen-kopf p{margin:22px auto 0;max-width:52ch;font-size:1.15rem;font-weight:500;color:#16181B}
.sehen-zeile{margin-top:48px;text-align:center;font-weight:600;color:#16181B}
.beispiele{margin-top:24px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start}
.beispiel{--d:.6;text-decoration:none;color:inherit}
.beispiel:nth-child(2){margin-top:48px}
.bew .beispiel{transform:translate3d(0,calc((.5 - var(--p,.5)) * var(--tiefe,0px)),0)}
.beispiel .karte-bild{aspect-ratio:16/10.5;border-bottom:1px solid #E6E8EB}
.beispiel .karte-text{padding:20px 22px 22px}
.beispiel h3{font-size:1.45rem}
.beispiel .ort{margin-top:6px;color:var(--leise-hell);font-size:.95rem}
.beispiel .pille{position:absolute;left:12px;top:12px;z-index:3;background:#fff;color:var(--tinte);box-shadow:0 6px 16px -8px rgba(17,18,19,.5)}
.beispiel .textlink{margin-top:14px}
.beispiel:hover .karte{transform:translateY(-4px)}
.beispiel .karte{transition:transform .5s var(--aus),box-shadow .5s var(--aus)}
.beispiel:hover .karte{box-shadow:0 40px 70px -28px rgba(17,18,19,.45),0 8px 18px -10px rgba(17,18,19,.14)}
.beispiel:focus-visible{outline:none}
.beispiel:focus-visible .karte{outline:2px solid var(--kobalt);outline-offset:4px}
.sehen-fuss{margin-top:44px;display:flex;justify-content:center}
/* ---- 9 Referenz ---- */
.szene--referenz{margin-top:var(--rand);position:relative;z-index:5}
.szene--referenz .panel{background:#0B0C0D;padding:clamp(80px,11vh,120px) 0 clamp(64px,9vh,96px)}
.licht--ref{background:radial-gradient(ellipse 55% 50% at 50% 46%,rgba(47,91,240,.42),rgba(47,91,240,0) 72%)}
.ref-kopf{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;align-items:end}
.ref-kopf h2{color:#EEF0F2;max-width:16ch;font-size:clamp(2.2rem,4vw,3.8rem)}
.ref-kopf p{color:#C9CDD2;font-size:1.12rem;max-width:44ch;justify-self:end}
.ref-buehne{position:relative;margin:52px auto 0;max-width:1120px;padding-right:9%}
.ref-buehne .geraet--monitor{--w:100%}
.ref-buehne .geraet--handy{position:absolute;right:0;bottom:-4%;--h:min(64%,520px);height:auto;width:23%;z-index:4}
.ref-buehne .geraet--handy .vergleich-ebene img{transform:translate3d(0,calc(var(--p,0) * -22%),0)}
.vergleich-ebene{position:absolute;inset:0}
.vergleich-ebene img{position:absolute;left:0;top:0;width:100%;height:auto}
.geraet--monitor .vergleich-ebene img{height:100%;object-fit:cover;object-position:top}
.vergleich-ebene.vergleich-oben{z-index:2}
.ref-buehne .geraet-schirm{cursor:ew-resize;touch-action:pan-y}
.ref-artefakt{position:absolute;z-index:6;width:250px}
.ref-artefakt--pro{left:-4%;top:46%;--d:.9}
.ref-artefakt--tage{left:3%;bottom:2%;--d:1.2}
.bew .ref-artefakt{transform:translate3d(0,calc((.5 - var(--p,.5)) * var(--d) * 90px),0)}
.tage{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin:10px 0 8px}
.tage i{height:6px;border-radius:3px;background:var(--kobalt)}
.ref-regler{margin:44px auto 0;max-width:820px}
.ref-regler .vergleich-regler .seite-name{color:#EEF0F2}
.ref-regler .ref-unterschrift{margin-top:6px;text-align:center;font-size:.92rem;color:var(--leise)}
.ref-texte{margin:44px auto 0;max-width:1040px;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.ref-text{border-radius:22px;padding:26px 28px;background:var(--nacht-2);border:1px solid var(--linie);transition:border-color .4s var(--aus),background-color .4s var(--aus)}
.ref-text h3{color:#EEF0F2;font-size:1.5rem;display:flex;align-items:center;gap:10px}
.ref-text h3::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--linie-2);transition:background-color .4s}
.ref-text p{margin-top:12px;color:#C9CDD2}
.ref-text.vorne{border-color:#5C6168;background:#1E2124}
.ref-text.vorne h3::before{background:#EEF0F2}
.ref-knoepfe{margin-top:36px;justify-content:center}

/* ---- 10 Kurz gesagt ---- */

/* ---- 11 Über mich ---- */
.ueber-raster{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:center}
.marke-flaeche{position:relative;aspect-ratio:1/1;border-radius:var(--radius);background:var(--nacht);overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:32px;color:var(--leise);isolation:isolate}
.marke-flaeche .licht{background:radial-gradient(ellipse 80% 50% at 30% 110%,rgba(47,91,240,.5),rgba(47,91,240,0) 70%)}
.marke-flaeche img{width:46%;height:auto;margin:auto}
.bew .marke-flaeche img{transform:translate3d(0,calc((.5 - var(--p, .5)) * 30px),0)}
.marke-flaeche .mono,.marke-flaeche .marke-zeile{font-size:.82rem;display:flex;justify-content:space-between;gap:12px}
.marke-flaeche .marke-zeile{font-size:.95rem;font-weight:600;color:#C9CDD2}
.ueber-text p{margin-top:22px;font-size:1.12rem;max-width:62ch;color:#25292E}
.ueber-text .knopf{margin-top:30px}

/* ---- 12 Fragen ---- */
.fragen .panel{padding:120px 0}
.fragen-raster{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:64px;align-items:start}
.fragen-raster h2{position:sticky;top:120px}

/* ==========================================================================
   Breakpoints
   ========================================================================== */
@media (max-width:1180px){
  :root{--artefakt-abstand:430px}
  .nav-links a{padding:8px 8px;font-size:.92rem}
  .station-knopf{width:212px}
  .sk-2,.sk-4{left:calc(50% + var(--artefakt-abstand) - 212px)}
  .art-ladezeit{width:200px}
}
@media (max-width:1080px){
  .nav-links{display:none}
  .nav-menue{display:inline-flex}
  .nav-innen{grid-template-columns:1fr auto}
  :root{--artefakt-abstand:350px}
  .station-knopf{width:190px;gap:10px;padding:12px 14px 12px 12px}
  .station-knopf small{display:none}
  .sk-2,.sk-4{left:calc(50% + var(--artefakt-abstand) - 190px)}
  .sk-1,.sk-3{left:calc(50% - var(--artefakt-abstand))}
  .art-ladezeit{display:none}
  .ist-pin .hero-fuss .metadaten{display:none}
  .ist-pin .hero-fuss{justify-content:center}
  .ist-pin .hero-fuss .kette-text{text-align:center}
  :root{--geraet-hoehe:min(calc(100svh - 230px),660px)}
  .check-raster{grid-template-columns:1fr;gap:32px}
  .check-raster .check{grid-column:auto}
  .check-raster h2{max-width:none}
  .ref-artefakt{width:210px}
}
@media (max-width:900px){
  .ref-artefakt{position:relative;left:auto;top:auto;bottom:auto;width:auto;display:inline-block;margin:0}
  .bew .ref-artefakt{transform:none}
  .ref-fakten{display:flex;flex-wrap:wrap;gap:10px;margin-top:calc(28px + 9%);padding-right:0}
  .bew .gepinnt:not(.gepinnt-mobil){height:auto}
  .bew .gepinnt:not(.gepinnt-mobil) > .buehne{position:relative;height:auto}
  .bew .gepinnt:not(.gepinnt-mobil) > .buehne > .panel{position:relative;inset:auto;margin:var(--rand) var(--rand) 0}
  .probleme-raster,.ablauf-raster{grid-template-columns:1fr;gap:32px;padding:0 var(--innen-pad)}
  .stapel .karte{margin:0 auto;width:100%}
  .szene--probleme > .buehne > .panel{padding:64px 0}
  .stapel{gap:16px}
  .bew .szene--probleme:not(.ist-pin) .stapel .karte{position:sticky;top:calc(80px + var(--i) * 10px)}
  .szene--ablauf .panel{padding:64px 0}
  .ablauf-raster{gap:0}
  .ablauf-links{display:contents}
  .ablauf-links h2{order:1}
  .ablauf-links > p{order:2}
  .ablauf-rechts{order:3;margin-top:24px}
  .ablauf-links .schrittfolge{order:4}
  .bew .szene--ablauf:not(.ist-pin) .ablauf-rechts{position:sticky;top:72px;z-index:3}
  .nutzen-raster{grid-template-columns:1fr}
  .nutzen:nth-child(n){grid-column:auto}
  .nutzen-kopf{grid-template-columns:1fr;gap:20px}
  .nutzen-kopf p{justify-self:start}
  .beispiele{grid-template-columns:1fr;max-width:520px;margin-left:auto;margin-right:auto}
  .beispiel:nth-child(2){margin-top:0}
  .bew .beispiel{transform:none}
  .check-kopf,.check-aktionen{grid-template-columns:1fr}
  .ref-kopf{grid-template-columns:1fr;gap:20px}
  .ref-kopf p{justify-self:start}
}
@media (max-width:760px){
  :root{--rand:10px;--radius:22px;--nav-h:68px;--text-groesse:16px;--innen-pad:20px;--h1-groesse:clamp(2.1rem,10.2vw,2.8rem);--geraet-hoehe:min(calc(100svh - 300px),520px)}
  .nav-innen{height:52px;padding:0 6px 0 12px}
  .nav-logo img{height:20px}
  .nav-rechts .knopf--kobalt{display:none}
  .fuss{grid-template-columns:1fr;padding:44px 22px 30px}
  .abschluss-buehne{padding:96px 22px 90px}
  .knopfreihe{flex-direction:column;align-items:stretch}
  .knopfreihe .knopf{width:100%}
  .faq summary{font-size:1.04rem;gap:16px}
  .faq details > div{padding-right:8px}
  .vergleich-regler{gap:10px}
  .vergleich-regler .seite-name{font-size:1rem}

  /* nicht gepinnt auf dem Handy (außer .gepinnt-mobil) */

  .ueber-raster,.fragen-raster{grid-template-columns:1fr;gap:32px;padding:0 20px}
  /* Einstieg */
  .hero-kopf{padding-top:30px}
  .hero-text{font-size:1.02rem}
  .hero-kopf .knopfreihe{width:100%}
  .hero-kopf .fakten{flex-direction:column;align-items:center;font-size:.95rem}
  .hero-kopf .fakten li+li::before{display:none}
  .licht--wolke{background:radial-gradient(ellipse 120% 52% at 50% 70%,#2F5BF0 0%,#3A63F1 12%,#5B7FF2 28%,#8FA6F2 46%,#C3CEF0 64%,#E2E6F0 80%,#EEF0F2 94%)}
  .hero-fuss{justify-content:center;text-align:center;padding:18px 16px 18px}
  .hero-fuss .kette-text{text-align:center;font-size:.86rem}
  .hero-fuss .metadaten{justify-content:center;font-size:.84rem}
  .ist-pin .kette-geraet{top:calc(50% - 22px)}
  .ist-pin .hero-fuss{padding:12px 16px 14px}
  .ist-pin .hero-fuss .kette-text{font-size:.82rem;max-width:32ch;margin:0 auto}
  .szene--einstieg{--geraet-versatz:72vh;--parallaxe:0px;--einlauf:0px;--geraet-hoehe:min(calc(100svh - 390px),480px)}
  .ist-pin .stationen{inset:0}
  .ist-pin .station-knopf{width:auto;padding:8px 12px 8px 8px;gap:8px;border-radius:14px}
  .ist-pin .station-knopf .zeichen{width:30px;height:30px;border-radius:9px}
  .ist-pin .station-knopf .zeichen .ico{width:16px;height:16px}
  .ist-pin .station-knopf b{font-size:1rem}
  .ist-pin .sk-1{left:10px;top:12px}
  .ist-pin .sk-2{left:auto;right:10px;top:12px}
  .ist-pin .sk-3{left:10px;top:auto;bottom:112px}
  .ist-pin .sk-4{left:auto;right:10px;top:auto;bottom:112px}
  .ist-pin .station-knopf{min-width:44%}
  .szene--einstieg:not(.ist-pin) .kette-geraet{--h:460px}
  .szene--einstieg:not(.ist-pin) .station-knopf small{display:none}

  .szene--nutzen .panel{padding:72px 0 64px}
  .nutzen-raster{margin-top:36px;gap:14px}
  .nutzen-szene{height:250px}
  .nutzen-text{padding:22px 22px 26px}
  .nutzen-fuss{grid-template-columns:1fr}
  .ns-browser{left:5%;right:5%}
  .ns-marke--1{right:4%;top:150px}.ns-marke--2{right:auto;left:6%;top:196px}.ns-marke--3{display:none}
  .ns-chat{left:5%;right:5%}
  .ns-daten{display:none}
  .ns-tempo{right:4%}
  .ns-formular{left:5%;width:56%}
  .ns-wege{right:4%}

  .karte-text{padding:20px 20px 24px}
  .karte-text h3{font-size:1.35rem}
  .mini-lupe{right:-24px;width:52px;height:52px}

  .check-form{padding:18px}
  .check-zeile{flex-direction:column}
  .check-zeile .knopf{width:100%}
  .check-score{padding:24px 22px}
  .check-bereiche,.check-block{padding:20px}
  .check-mail-zeile{flex-direction:column}
  .check-funde{display:flex;flex-direction:column;gap:26px}
  .check-spalte{display:contents}
  .check-fund{margin-left:calc(var(--x,0px) / 2);margin-right:calc(14px - var(--x,0px) / 2)}

  .kacheln{grid-template-columns:1fr;margin-top:36px}
  .kachel--gross{grid-row:auto;min-height:0;padding:30px}
  .kachel{padding:28px}
  .bew .fuer-wen .kachel{transform:none}
  .pakete-kopf,.paket-raster,.pakete-fuss{grid-template-columns:1fr}
  .pakete-kopf p{justify-self:start}
  .paket{padding:30px 24px}
  .paket .knopf{align-self:stretch}
  .zusatz{padding:4px 22px}
  .zusatz-zeile{grid-template-columns:1fr;gap:16px}
  .zusatz-preis{text-align:left}

  .fenster{height:368px}
  .stufe{inset:52px 0 0 0;padding:16px 18px}
  .stufe .stufe-titel{font-size:1.3rem}
  .demo-feld{margin-top:10px}
  .demo-feld .eingabe{min-height:38px;padding:7px 12px}
  .tabelle div{padding:10px 0;font-size:.92rem}
  .liste-check{gap:7px}.liste-check li{padding:9px 12px}
  .vorschau-raster i{height:30px}

  .sehen-zeile{margin-top:36px}
  .ref-buehne{margin-top:36px;padding-right:12%}
  .ref-buehne .geraet--handy{width:30%;bottom:-8%}
  .ref-texte{grid-template-columns:1fr;margin-top:28px}
  .ref-regler{margin-top:56px}
  .fragen .panel{padding:72px 0}
  .fragen-raster h2{position:static}
}
@media (min-width:901px){
  .ref-fakten{display:contents}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;transition-delay:0s !important}
}

/* ---- Score-Vorschau im Check-Abschnitt (Startseite) ---- */
.score-vorschau{margin-top:34px;width:min(380px,100%);padding:20px 22px 22px}
.bew .score-vorschau{transform:translate3d(0,calc((.5 - var(--p,.5)) * 50px),0) rotate(-1.5deg)}
.sv-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.sv-zahl{display:flex;align-items:baseline;gap:8px;font-family:var(--kopf);text-transform:uppercase;font-weight:700;color:var(--leise-hell)}
.sv-zahl b{font-size:3.4rem;line-height:.8;font-weight:800;color:var(--tinte)}
.score-vorschau ul{margin-top:16px;display:grid;gap:11px}
.score-vorschau li{display:grid;grid-template-columns:1fr auto;gap:5px 10px;font-size:.9rem;font-weight:500}
.score-vorschau li .mono{font-size:.8rem;color:var(--leise-hell)}
.score-vorschau li i{grid-column:1/-1;height:6px;border-radius:3px;background:var(--hell);position:relative;overflow:hidden}
.score-vorschau li i::after{content:"";position:absolute;inset:0;border-radius:3px;background:#9FB2F0;transform-origin:0 50%;transform:scaleX(var(--w,.5))}

/* ---- Ablauf ohne Bewegung (reduzierte Bewegung, kein JS): alle Stufen im Endzustand ---- */
html:not(.bew) .szene--ablauf .fenster{height:auto}
html:not(.bew) .szene--ablauf .stufe{position:relative;inset:auto;opacity:1;visibility:visible;transform:none;padding:18px 26px 20px}
html:not(.bew) .szene--ablauf .stufe + .stufe{border-top:1px solid #E6E8EB}
html:not(.bew) .szene--ablauf .stufe .stufe-titel{font-size:1.25rem}
html:not(.bew) .szene--ablauf .stufenleiste i{background:var(--kobalt)}
html:not(.bew) .szene--ablauf .liste-check .kreis{background:var(--kobalt);border-color:var(--kobalt)}
html:not(.bew) .szene--ablauf .liste-check .kreis .ico{opacity:1}
html:not(.bew) .szene--ablauf .ablauf-links .schritt{color:#EEF0F2}
html:not(.bew) .szene--ablauf .schrittfolge::after{transform:none}

/* Ablauf ohne Bewegung: Felder zeigen die fertigen Werte, nichts abgeschnitten */
html:not(.bew) .szene--ablauf .demo-feld .eingabe{min-height:0;height:auto}
html:not(.bew) .szene--ablauf .demo-feld .eingabe span{clip-path:none;white-space:normal}
html:not(.bew) .szene--ablauf .wahl span.gewaehlt{background:var(--nacht);color:#fff}