/* beglait.de · Stylesheet
   Eine Datei, keine Bibliothek. Farben nur als Token aus dem Design-System
   (02 Produkt/design-system/tokens), Rohwerte stehen ausschließlich im
   :root-Block. Das Bild der Site: ein Messinstrument. Ink als Bühne,
   Papier zum Lesen, Weiß für Blätter und Formulare, Haarlinien als Raster,
   Mono-Etiketten als Ablesung, eine große Schrift, eine Farbe als Zeichen. */

/* ---------- Token ---------- */
:root{
  --ink:#13201C; --ink-800:#233630; --ink-950:#070D0B;
  --papier:#F4F6F2; --weiss:#FFFFFF; --sunken:#EEF1EC;
  --text:#13201C; --text-muted:#5F6B64; --text-faint:#68726D;
  --text-on-ink:#D2D9D0; --text-faint-on-ink:#77948B; --provenance-on-ink:#7FC9AE;
  /* Leiser Text auf der erhöhten Ink-Fläche (--ink-800), 5,9:1 dort, 7,5:1 auf Ink (05.10.2026 spät). */
  --text-muted-on-ink:#A2B3AB;
  --teal:#0F6E56; --teal-400:#4C9F84; --teal-700:#015440; --teal-50:#E3FCF2;
  --linie:#D2D9D0; --linie-weich:#E2E7E0; --linie-ink:#2F3B37; --linie-stark:#93A09A;
  --status-ok:#326E0B; --status-warn:#864D00; --status-risk:#A82321;
  --fokus:#0F6E56; --fokus-on-ink:#4C9F84;
  --warn-50:#FBEFD9;
  /* Markierung (Ben, 05.10.2026): Salbei auf hellem Grund, Mint auf dunklem. */
  --salbei:#4E6E5D; --salbei-50:#E6EEE9; --mint:#8FBFAE;
  /* Produkt-Theme der KI-Werkbank (Ben, 05.10.2026). Gemessen auf dem Grund:
     Text 16,93:1, leise 8,93:1, Mint 9,55:1, Kante für Eingaben 3,58:1. Die Linien
     tragen keine Aufgabe. Rollen tauscht [data-theme="produkt"], Stile in produkt.css. */
  --produkt-grund:#070D0B; --produkt-flaeche:#0D1613; --produkt-flaeche-2:#121E1A;
  --produkt-text:#E9F0EC; --produkt-leise:#A2B3AB;
  --produkt-linie:#1E2A26; --produkt-linie-2:#26352F; --produkt-linie-stark:#5C6D66;
  --produkt-netz-1:#D6E7DF; --produkt-netz-2:#A0C8B9; --produkt-netz-3:#68A58F; --produkt-netz-spitze:#ECF5F0;
  --schatten-flaeche:0 16px 32px -18px rgba(7,13,11,.4); --schatten-flaeche-ink:0 20px 40px -16px rgba(0,0,0,.55);
  --schatten-bild:0 1px 2px rgba(7,13,11,.07), 0 6px 14px -6px rgba(7,13,11,.14), 0 28px 56px -24px rgba(7,13,11,.34); --schatten-bild-ink:0 2px 4px rgba(0,0,0,.3), 0 28px 56px -20px rgba(0,0,0,.6);

  --display:'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
  --sans:'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  --mono:'IBM Plex Mono', 'Courier New', monospace;

  --fs-held:96px; --fs-h1:64px; --fs-h2:48px; --fs-h3:24px; --fs-lead:20px; --fs-body:18px;
  --fs-klein:15px; --fs-mono:13px; --fs-leitzahl:128px; --fs-zahl:72px; --fs-schluss:72px;

  --breite:1216px; --rand:48px; --rinne:32px;
  --ab:96px; --ab-innen:32px;
  --kopf-h:72px;

  --r-md:6px; --r-lg:8px;
  --d-fast:140ms; --d-base:180ms; --d-slow:220ms; --d-slower:400ms;
  --ease:cubic-bezier(.2,0,0,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --k-zeile:cubic-bezier(.25,.1,.25,1); --k-kamera:cubic-bezier(.45,0,.55,1);
}
@media (max-width:1023px){
  :root{ --fs-held:64px; --fs-h1:48px; --fs-h2:36px; --fs-h3:22px; --fs-body:17px; --fs-leitzahl:96px; --fs-zahl:56px; --fs-schluss:52px;
         --rand:32px; --rinne:24px; --ab:64px; --ab-innen:24px; }
}
@media (max-width:639px){
  :root{ --fs-held:44px; --fs-h1:36px; --fs-h2:30px; --fs-h3:20px; --fs-lead:18px; --fs-body:16px; --fs-mono:12px; --fs-leitzahl:72px; --fs-zahl:48px; --fs-schluss:36px;
         --rand:20px; --rinne:16px; --ab:48px; --ab-innen:20px; --kopf-h:64px; }
}

/* ---------- Schriften ---------- */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:200 800;font-display:swap;src:url('/assets/fonts/bricolage-grotesque-var.woff2') format('woff2-variations')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:100 700;font-display:swap;src:url('/assets/fonts/ibm-plex-sans-var.woff2') format('woff2-variations')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-500.woff2') format('woff2')}

/* ---------- Grund ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--kopf-h) + 16px)}
body{margin:0;background:var(--papier);color:var(--text);font-family:var(--sans);font-size:var(--fs-body);line-height:1.55;font-feature-settings:"tnum" 1;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
p{margin:0}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:500;letter-spacing:-0.02em;text-wrap:balance}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
strong{font-weight:600}
mark{background:none;color:inherit}
hr{border:0;border-top:1px solid var(--linie);margin:0}
:focus-visible{outline:2px solid var(--fokus);outline-offset:3px;border-radius:2px}
.ink :focus-visible,.kopf :focus-visible,.fuss :focus-visible{outline-color:var(--fokus-on-ink)}
::selection{background:var(--teal);color:var(--weiss)}

.sprung{position:absolute;left:16px;top:-64px;z-index:100;background:var(--papier);color:var(--ink);padding:12px 16px;border-radius:var(--r-md);font-weight:500}
.sprung:focus{top:16px}

/* ---------- Typografie ---------- */
.held-titel{font-size:var(--fs-held);line-height:.98;letter-spacing:-0.035em;font-weight:500;max-width:11ch}
.h1{font-size:var(--fs-h1);line-height:1.02;letter-spacing:-0.03em;max-width:14ch}
.h2{font-size:var(--fs-h2);line-height:1.08;letter-spacing:-0.025em;max-width:18ch}
.h3{font-size:var(--fs-h3);line-height:1.25;letter-spacing:-0.015em}
.lead{font-size:var(--fs-lead);line-height:1.5;max-width:34em}
.text{max-width:34em}
.text p+p{margin-top:1em}
.klein{font-size:var(--fs-klein);line-height:1.5}
.muted{color:var(--text-muted)}
.ink .muted,.kopf .muted{color:var(--text-faint-on-ink)}
.mono{font-family:var(--mono);font-size:var(--fs-mono);font-weight:500;letter-spacing:.06em;text-transform:uppercase;line-height:1.4}
.mono.klein{font-size:12px}
.mono-normal{text-transform:none;letter-spacing:.02em}
.augenbraue{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}
.ink .augenbraue{color:var(--provenance-on-ink)}
.quelle{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.04em;color:var(--text-faint);text-transform:none}
.ink .quelle{color:var(--text-faint-on-ink)}
.zahl{font-family:var(--display);font-weight:600;font-size:var(--fs-zahl);line-height:1;letter-spacing:-0.03em;font-variant-numeric:tabular-nums}
.leitzahl{font-family:var(--display);font-weight:600;font-size:var(--fs-leitzahl);line-height:.9;letter-spacing:-0.045em;font-variant-numeric:tabular-nums}
/* Das eine markierte Wort je Seite: invertiert, die Fläche wischt nach dem
   Auftritt von links ein (Aleph Alpha). Kein Verlauf, eine Fläche. */
.wort{position:relative;display:inline-block;padding:0 .12em;margin:0 -.02em;z-index:0;line-height:.95;color:var(--papier)}
.wort::before{content:"";position:absolute;inset:0;background:var(--ink);z-index:-1;transform-origin:left}
.ink .wort{color:var(--ink)}
.ink .wort::before{background:var(--papier)}
.js .wort{color:inherit;transition:color 0ms linear 700ms}
.js .wort::before{transform:scaleX(0);transition:transform 480ms var(--ease-out) 620ms}
.js .geladen .wort,.js .sichtbar .wort{color:var(--papier)}
.js .ink.geladen .wort,.js .ink .geladen .wort,.js .ink .sichtbar .wort,.js .ink.sichtbar .wort{color:var(--ink)}
.js .geladen .wort::before,.js .sichtbar .wort::before{transform:scaleX(1)}

/* ---------- Flächen, Raster ---------- */
.wrap{max-width:calc(var(--breite) + 2 * var(--rand));margin:0 auto;padding:0 var(--rand)}
.ab{padding:var(--ab) 0;position:relative}
.ab-eng{padding:calc(var(--ab) * .66) 0}
.ink{background:var(--ink);color:var(--text-on-ink)}
.ink h1,.ink h2,.ink h3,.ink .zahl,.ink .leitzahl,.ink strong{color:var(--weiss)}
.ink h1,.ink h2{color:var(--papier)}
.papier{background:var(--papier);color:var(--text)}
.weiss{background:var(--weiss);color:var(--text)}
.linie-oben{border-top:1px solid var(--linie)}
.ink.linie-oben{border-top-color:var(--linie-ink)}
.weiss.linie-oben{border-top-color:var(--linie-weich)}
.linie-unten{border-bottom:1px solid var(--linie)}
.ink.linie-unten{border-bottom-color:var(--linie-ink)}

/* Das Zellenraster: Container trägt die Linienfarbe, die Zellen die Fläche.
   So entstehen Haarlinien zwischen Zellen ohne doppelte Ränder. */
.zellen{display:grid;gap:1px;background:var(--linie);border:1px solid var(--linie)}
.ink .zellen{background:var(--linie-ink);border-color:var(--linie-ink)}
.weiss .zellen{background:var(--linie-weich);border-color:var(--linie-weich)}
.zellen>*{background:var(--papier);padding:var(--ab-innen);min-width:0}
.ink .zellen>*{background:var(--ink)}
.weiss .zellen>*{background:var(--weiss)}
.zellen-3{grid-template-columns:repeat(3,1fr)}
.zellen-2{grid-template-columns:repeat(2,1fr)}
.zellen-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1023px){.zellen-3,.zellen-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:639px){.zellen-3,.zellen-4,.zellen-2{grid-template-columns:1fr}}

.split{display:grid;grid-template-columns:5fr 7fr;gap:var(--rinne);align-items:start}
.split-gleich{grid-template-columns:1fr 1fr}
.split-umgekehrt{grid-template-columns:7fr 5fr}
@media (max-width:1023px){.split,.split-gleich,.split-umgekehrt{grid-template-columns:1fr}}
.klebt{position:sticky;top:calc(var(--kopf-h) + 32px)}
@media (max-width:1023px){.klebt{position:static}}

.ab-kopf{margin-bottom:calc(var(--ab) * .5);display:grid;grid-template-columns:5fr 7fr;gap:var(--rinne);align-items:end}
.ab-kopf .lead{margin-top:12px}
@media (max-width:1023px){.ab-kopf{grid-template-columns:1fr;gap:16px}}
.augenbraue+.h2,.augenbraue+.h1,.augenbraue+.held-titel{margin-top:20px}

/* ---------- Zeilen-Form (Mistral) ---------- */
.zeilen{border-top:1px solid var(--linie)}
.ink .zeilen{border-top-color:var(--linie-ink)}
.weiss .zeilen{border-top-color:var(--linie-weich)}
.zeile{display:grid;grid-template-columns:160px 1fr auto;gap:var(--rinne);padding:32px 0;border-bottom:1px solid var(--linie);align-items:start;transition:background-color var(--d-fast) var(--ease)}
.ink .zeile{border-bottom-color:var(--linie-ink)}
.weiss .zeile{border-bottom-color:var(--linie-weich)}
.zeile-etikett{padding-top:6px}
.zeile-kern p{margin-top:12px;max-width:34em}
.zeile-chips{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px 20px}
.zeile-handlung{padding-top:6px;white-space:nowrap}
.zeile-preis{font-family:var(--display);font-weight:600;font-size:32px;letter-spacing:-0.02em;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap;padding-top:2px}
.zeile-preis small{display:block;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin-top:8px}
.zeile-gross{grid-template-columns:160px minmax(0,1fr) minmax(240px,auto)}
@media (max-width:1023px){.zeile,.zeile-gross{grid-template-columns:minmax(0,1fr);gap:12px}.zeile-handlung{padding-top:0}.zeile-preis{padding-top:0;font-size:28px}}

/* ---------- Knöpfe, Links ---------- */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 24px;border-radius:var(--r-md);font-weight:500;font-size:16px;line-height:1;white-space:nowrap;border:1px solid transparent;transition:background-color var(--d-fast) var(--ease),color var(--d-fast) var(--ease),border-color var(--d-fast) var(--ease)}
.knopf-ink{background:var(--ink);color:var(--weiss)}
.knopf-ink:hover{background:var(--ink-800)}
.knopf-hell{background:var(--papier);color:var(--ink)}
.knopf-hell:hover{background:var(--weiss)}
.knopf-rahmen{background:transparent;border-color:var(--linie-stark);color:var(--text)}
.knopf-rahmen:hover{border-color:var(--ink)}
.ink .knopf-rahmen{border-color:var(--linie-ink);color:var(--text-on-ink)}
.ink .knopf-rahmen:hover{border-color:var(--text-on-ink);color:var(--weiss)}
.knopf-breit{width:100%}
.knopf svg{width:16px;height:16px}
.handlungen{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;margin-top:40px}
@media (max-width:639px){.handlungen{flex-direction:column;align-items:stretch;gap:16px}.handlungen .knopf{width:100%}}

.pfeil{position:relative;display:inline-flex;align-items:center;gap:8px;font-weight:500;padding-bottom:2px;transition:color var(--d-fast) var(--ease)}
.pfeil::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--d-base) var(--ease)}
.pfeil:hover::after,.pfeil:focus-visible::after{transform:scaleX(1)}
.pfeil svg{width:16px;height:16px;flex:0 0 16px}
.ink .pfeil{color:var(--weiss)}
.textlink{color:var(--teal);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:color var(--d-fast) var(--ease)}
.textlink:hover{color:var(--teal-700)}
.ink .textlink{color:var(--provenance-on-ink)}
.ink .textlink:hover{color:var(--weiss)}
.text a:not(.knopf):not(.pfeil),.klein a:not(.knopf):not(.pfeil),.zeile-kern a:not(.knopf):not(.pfeil){color:var(--teal);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.ink .text a:not(.knopf):not(.pfeil){color:var(--provenance-on-ink)}

/* ---------- Kopfzeile ---------- */
.kopf{position:sticky;top:0;z-index:50;background:var(--ink);color:var(--text-on-ink);border-bottom:1px solid transparent;transition:border-color var(--d-fast) var(--ease)}
.kopf.gescrollt{border-bottom-color:var(--linie-ink)}
.kopf-zeile{height:var(--kopf-h);display:flex;align-items:center;gap:40px}
.marke{font-family:var(--display);font-weight:600;font-size:21px;letter-spacing:.06em;color:var(--weiss);white-space:nowrap}
.marke .ai{color:var(--teal-400)}
.fuss .marke{font-size:26px}
.nav{flex:1}
.nav-liste{display:flex;gap:4px}
.nav-punkt{position:relative;display:flex;align-items:center}
.nav-punkt>a{display:inline-flex;align-items:center;height:40px;padding:0 14px;border-radius:var(--r-md);font-size:15px;font-weight:500;color:var(--text-on-ink);transition:color var(--d-fast) var(--ease),background-color var(--d-fast) var(--ease)}
.nav-punkt>a:hover,.nav-punkt.aktiv>a{color:var(--weiss)}
.nav-punkt.aktiv>a{background:var(--ink-800)}
.nav-pfeil{width:28px;height:40px;display:inline-flex;align-items:center;justify-content:center;color:var(--text-faint-on-ink);margin-left:-8px;border-radius:var(--r-md);transition:color var(--d-fast) var(--ease),transform var(--d-base) var(--ease)}
.nav-pfeil:hover{color:var(--weiss)}
.nav-klapp.geoeffnet .nav-pfeil,.nav-klapp:hover .nav-pfeil{transform:rotate(180deg);color:var(--weiss)}
.klapp{position:absolute;top:calc(100% + 6px);left:0;min-width:400px;background:var(--ink-800);border:1px solid var(--linie-ink);border-radius:var(--r-lg);padding:8px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity var(--d-base) var(--ease),transform var(--d-base) var(--ease),visibility 0s linear var(--d-base)}
.nav-klapp.geoeffnet .klapp,.nav-klapp:hover .klapp,.nav-klapp:focus-within .klapp{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.klapp{display:grid;grid-template-columns:repeat(3,236px);left:-8px;min-width:0}
.klapp-gruppe{padding:2px 4px 4px}
.klapp-gruppe+.klapp-gruppe{border-left:1px solid var(--linie-ink)}
.klapp-kopf{margin:0;padding:12px 12px 6px;font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint-on-ink)}
.klapp a{display:block;padding:12px;border-radius:var(--r-md);transition:background-color var(--d-fast) var(--ease)}
.klapp a:hover{background:var(--ink)}
.klapp-titel{display:block;font-family:var(--display);font-weight:500;font-size:17px;color:var(--weiss);letter-spacing:-0.01em}
.klapp-satz{display:block;font-size:14px;color:var(--text-faint-on-ink);margin-top:3px;line-height:1.45}
.kopf-handlung{height:44px;padding:0 20px;margin-left:auto}
.burger{display:none;width:44px;height:44px;margin-left:auto;position:relative;border-radius:var(--r-md)}
.burger span{position:absolute;left:12px;right:12px;height:2px;background:var(--weiss);transition:transform var(--d-slow) var(--ease),top var(--d-slow) var(--ease)}
.burger span:first-child{top:17px}.burger span:last-child{top:25px}
.burger[aria-expanded="true"] span:first-child{top:21px;transform:rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{top:21px;transform:rotate(-45deg)}
.menue{background:var(--ink);border-top:1px solid var(--linie-ink);position:fixed;left:0;right:0;top:var(--kopf-h);bottom:0;overflow:auto;padding:32px 0 48px}
.menue-liste>li{border-bottom:1px solid var(--linie-ink)}
.menue-liste>li>a{display:block;font-family:var(--display);font-weight:500;font-size:34px;letter-spacing:-0.02em;color:var(--weiss);padding:18px 0}
.menue-kopf{margin:8px 0 2px;font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint-on-ink)}
.menue-unter{padding:0 0 12px}
.menue-unter:last-child{padding-bottom:18px}
.menue-unter a{display:block;padding:8px 0;font-size:17px;color:var(--text-on-ink)}
.menue .knopf-breit{margin-top:32px;height:56px;font-size:18px}
.menue-fuss{margin-top:32px;color:var(--text-faint-on-ink);text-transform:none;letter-spacing:.02em}
.menue-fuss a{color:var(--text-on-ink)}
body.menue-offen{overflow:hidden}
@media (max-width:1023px){
  .nav,.kopf-handlung{display:none}
  .burger{display:block}
  .kopf-zeile{gap:16px}
}

/* ---------- Held ---------- */
.held{min-height:calc(100vh - var(--kopf-h));display:grid;align-items:center;padding:64px 0 48px}
.held-raster{display:grid;grid-template-columns:7fr 5fr;gap:calc(var(--rinne) * 2);align-items:center}
.held .lead{margin-top:28px}
.held .augenbraue{margin-bottom:0;font-size:13px;letter-spacing:.1em;color:var(--weiss)}
@media (max-width:1023px){.held{min-height:0;padding:56px 0 40px}.held-raster{grid-template-columns:1fr;gap:48px}}
@media (max-width:639px){.held{padding:40px 0 32px}}

/* Ablesezeile: Fakten als Instrumentenleiste unter dem Held */
.ablese{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--linie-ink);border-bottom:1px solid var(--linie-ink)}
.ablese>div{padding:20px var(--ab-innen) 20px 0;display:flex;align-items:baseline;gap:14px}
.ablese>div+div{border-left:1px solid var(--linie-ink);padding-left:var(--ab-innen)}
.ablese b{font-family:var(--display);font-weight:600;font-size:32px;letter-spacing:-0.02em;line-height:1;color:var(--weiss);font-variant-numeric:tabular-nums}
.ablese span{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint-on-ink);font-weight:500}
@media (max-width:1023px){.ablese{grid-template-columns:1fr}.ablese>div+div{border-left:0;border-top:1px solid var(--linie-ink);padding-left:0}}

/* ---------- Das Instrument: Skala ---------- */
.skala{border:1px solid var(--linie-ink);border-radius:var(--r-lg);padding:24px;position:relative;background:var(--ink)}
.skala-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.skala-kopf .mono{color:var(--text-faint-on-ink)}
.skala-zahl{display:flex;align-items:baseline;gap:8px}
.skala-zahl b{font-family:var(--display);font-weight:600;font-size:36px;letter-spacing:-0.03em;line-height:1;color:var(--weiss);font-variant-numeric:tabular-nums}
.skala-zahl small{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.06em;color:var(--text-faint-on-ink)}
.skala-koerper{display:flex;gap:18px;margin-top:22px;height:240px}
.skala-spur{display:flex;flex-direction:column-reverse;flex:none;width:14px;background:var(--ink-800);border-radius:7px;position:relative;overflow:hidden}
.skala-seg{border-top:1px solid var(--ink)}
.skala-seg:last-child{border-top:0}
.skala-seg:nth-child(1){flex-basis:25%}
.skala-seg:nth-child(2){flex-basis:20%}
.skala-seg:nth-child(3){flex-basis:17%}
.skala-seg:nth-child(4){flex-basis:18%}
.skala-seg:nth-child(5){flex-basis:20%}
.skala-fuellung{position:absolute;left:0;right:0;bottom:0;height:0;background:var(--teal-400);border-radius:7px}
.js .skala-fuellung{transition:height 760ms var(--ease-out)}
.stufen{display:flex;flex-direction:column-reverse;gap:0;list-style:none;padding:0;flex:1;min-width:0}
.stufe{font-size:11px;letter-spacing:.02em;color:var(--text-faint-on-ink);min-width:0;display:flex;align-items:center}
.stufe:nth-child(1){flex-basis:25%}
.stufe:nth-child(2){flex-basis:20%}
.stufe:nth-child(3){flex-basis:17%}
.stufe:nth-child(4){flex-basis:18%}
.stufe:nth-child(5){flex-basis:20%}
.stufe-name{display:block;font-family:var(--display);font-weight:500;font-size:14px;color:var(--text-on-ink);letter-spacing:-0.01em;overflow-wrap:break-word}
@media (max-width:639px){.skala-koerper{height:220px}.stufe{font-size:10px}.stufe-name{font-size:11px;letter-spacing:-0.015em}}
.stufe.ist{color:var(--teal-400)}
.stufe.ist .stufe-name{color:var(--weiss)}
.stufe[tabindex]{cursor:default}
.stufe[tabindex]:hover .stufe-name,.stufe[tabindex]:focus-visible .stufe-name{color:var(--teal-400)}
.stufe[tabindex]:focus-visible{outline-offset:2px}
.skala-satz{margin-top:14px;font-size:14px;line-height:1.45;color:var(--text-faint-on-ink);min-height:2.9em;max-width:34em}
.skala-satz b{color:var(--weiss);font-weight:500}

/* ---------- Blatt (Bilanzblatt, Berichtsseiten) ---------- */
.blatt{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r-lg);padding:40px;position:relative;color:var(--text)}
.blatt-stapel{position:relative;padding-right:10px;padding-bottom:10px}
.blatt-stapel::before{content:"";position:absolute;inset:10px 0 0 10px;border:1px solid var(--linie);border-radius:var(--r-lg);background:var(--weiss)}
.blatt-stapel .blatt{position:relative}
.blatt-kopf{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-bottom:16px;border-bottom:1px solid var(--text);color:var(--text-muted)}
.blatt-titel{margin-top:24px}
.blatt .h3{max-width:20ch}
.blatt-wert{display:grid;grid-template-columns:1fr;gap:20px;margin-top:32px}
.blatt-wert .leitzahl{color:var(--ink)}
.blatt-wert .leitzahl small{display:block;font-family:var(--mono);font-size:13px;letter-spacing:.06em;font-weight:500;color:var(--text-muted);margin-top:12px;text-transform:uppercase}
.blatt-wert p{max-width:30em}
.balken{margin-top:32px;border-top:1px solid var(--linie-weich)}
.balken-zeile{display:grid;grid-template-columns:200px 1fr 56px;gap:16px;align-items:center;padding:12px 0;border-bottom:1px solid var(--linie-weich)}
.balken-zeile .mono{color:var(--text-muted);text-transform:none;letter-spacing:.02em;font-size:14px}
.balken-spur{height:10px;background:var(--sunken);position:relative}
.balken-wert{position:absolute;left:0;top:0;bottom:0;background:var(--ink);transform-origin:left;transform:scaleX(1)}
.js .balken-wert{transform:scaleX(0);transition:transform 760ms var(--ease-out)}
.js .sichtbar .balken-wert{transform:scaleX(1)}
.balken-zeile.hebel .balken-wert{background:var(--teal)}
.balken-zahl{font-family:var(--display);font-weight:600;font-size:22px;text-align:right;font-variant-numeric:tabular-nums}
.blatt-fuss{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:24px;padding-top:16px;border-top:1px solid var(--linie-weich);color:var(--text-muted)}
.hebel-marke{display:inline-flex;align-items:center;gap:8px;color:var(--teal)}
.hebel-marke::before{content:"";width:10px;height:10px;background:var(--teal);display:inline-block}
@media (max-width:639px){.blatt{padding:24px 20px}.blatt-wert{grid-template-columns:1fr;gap:16px}.balken-zeile{grid-template-columns:1fr 48px;grid-template-areas:"a b" "c c"}.balken-zeile .mono{grid-area:a}.balken-zahl{grid-area:b}.balken-spur{grid-area:c}}

/* Befund-Zeilen im Musterbericht */
.befund{padding:24px 0;border-bottom:1px solid var(--linie-weich);display:grid;grid-template-columns:1fr 220px;gap:24px}
.befund:last-child{border-bottom:0}
.befund p{margin-top:8px;max-width:30em}
.befund .herkunft{color:var(--text-muted);font-family:var(--mono);font-size:12px;letter-spacing:.03em;line-height:1.6;padding-top:4px}
.befund .herkunft b{color:var(--teal);font-weight:500}
@media (max-width:639px){.befund{grid-template-columns:1fr;gap:8px}}

/* 90-Tage-Plan als Zeitleiste */
.plan{border-top:1px solid var(--linie-weich)}
.plan-zeile{display:grid;grid-template-columns:120px 1fr;gap:24px;padding:20px 0;border-bottom:1px solid var(--linie-weich)}
.plan-zeile .mono{color:var(--text-muted);padding-top:4px}
.plan-zeile h4{font-family:var(--display);font-weight:500;font-size:20px;letter-spacing:-0.01em}
.plan-zeile p{margin-top:6px;max-width:32em}
.plan-zeile .messgroesse{margin-top:8px;font-family:var(--mono);font-size:12px;letter-spacing:.03em;color:var(--teal);text-transform:none}
.plan-zeile.ruhe h4{color:var(--text-muted)}
@media (max-width:639px){.plan-zeile{grid-template-columns:1fr;gap:6px}}

/* ---------- Die Lücke: Matrix ---------- */
.matrix-rahmen{overflow-x:auto;position:relative;border-top:1px solid var(--linie)}
.matrix{width:100%;min-width:760px;border-collapse:collapse;font-size:var(--fs-klein);line-height:1.45}
.matrix th,.matrix td{text-align:left;vertical-align:top;padding:18px 24px 18px 0;border-bottom:1px solid var(--linie)}
.matrix thead th{font-family:var(--display);font-weight:500;font-size:18px;letter-spacing:-0.01em;line-height:1.2;padding-top:16px;padding-bottom:16px;vertical-align:bottom}
.matrix thead th small{display:block;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin-top:6px}
.matrix tbody th{font-family:var(--display);font-weight:500;font-size:18px;letter-spacing:-0.01em;line-height:1.2;white-space:nowrap;padding-right:32px}
.matrix td{color:var(--text-muted);max-width:15em}
.matrix .uns{background:var(--teal-50);color:var(--text);padding-left:20px;padding-right:20px}
.matrix thead .uns{color:var(--ink)}
.matrix .uns .ai{color:var(--teal)}
.mk{display:inline-flex;width:16px;height:16px;margin-right:10px;vertical-align:-3px;flex-shrink:0}
.mk svg{display:block;width:100%;height:100%}
.mk-ja{color:var(--teal)}
.mk-teils{color:var(--text-muted)}
.mk-nein{color:var(--linie-stark)}
@media (max-width:1023px){.matrix{min-width:720px}}
@media (max-width:639px){
  .matrix{display:grid;grid-template-columns:1fr;min-width:0}
  .matrix thead,.matrix tbody,.matrix tr{display:contents}
  .matrix thead th:first-child,.matrix tbody th{display:none}
  .matrix tr>*:nth-child(2){--c:1}.matrix tr>*:nth-child(3){--c:2}.matrix tr>*:nth-child(4){--c:3}.matrix tr>*:nth-child(5){--c:4}
  .matrix tbody tr:nth-child(1)>td{--r:1}.matrix tbody tr:nth-child(2)>td{--r:2}.matrix tbody tr:nth-child(3)>td{--r:3}.matrix tbody tr:nth-child(4)>td{--r:4}
  .matrix thead th{order:calc(var(--c) * 10);padding:28px 0 12px;border-bottom:1px solid var(--linie-stark)}
  .matrix td{order:calc(var(--c) * 10 + var(--r));display:block;max-width:none;padding:12px 0 14px;color:var(--text)}
  .matrix td::before{content:attr(data-k);display:block;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin-bottom:6px}
  .matrix .uns{padding-left:16px;padding-right:16px}
  .matrix thead th.uns{padding-top:28px}
}

/* ---------- Was wir messen: Reiter ---------- */
.reiter{display:grid;grid-template-columns:4fr 8fr;gap:var(--rinne);align-items:start}
.reiter-liste{display:flex;flex-direction:column;border-top:1px solid var(--linie-weich)}
.reiter-knopf{display:grid;grid-template-columns:40px 1fr;align-items:center;gap:12px;width:100%;text-align:left;padding:16px 0 16px 16px;border:0;border-bottom:1px solid var(--linie-weich);background:none;font-family:var(--display);font-weight:500;font-size:20px;letter-spacing:-0.01em;line-height:1.2;color:var(--text-muted);cursor:pointer;position:relative;transition:color var(--d-fast) var(--ease)}
.reiter-knopf .mono{color:var(--text-faint);transition:color var(--d-fast) var(--ease)}
.reiter-knopf::before{content:"";position:absolute;left:0;top:-1px;bottom:-1px;width:2px;background:var(--teal);transform:scaleY(0);transform-origin:top;transition:transform var(--d-base) var(--ease)}
.reiter-knopf:hover{color:var(--ink)}
.reiter-knopf[aria-selected="true"]{color:var(--ink)}
.reiter-knopf[aria-selected="true"] .mono{color:var(--teal)}
.reiter-knopf[aria-selected="true"]::before{transform:none}
.reiter-feld{border-top:1px solid var(--linie-weich)}
.reiter-feld[hidden]{display:none}
.feld-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;padding:16px 0 20px}
.feld-zeile{display:grid;grid-template-columns:160px 1fr;gap:var(--rinne);padding:20px 0;border-top:1px solid var(--linie-weich)}
.feld-zeile p{max-width:30em}
.feld-zeile .mono{padding-top:4px}
.js .reiter-feld{opacity:0;transform:translateY(6px);transition:opacity var(--d-base) var(--ease-out),transform var(--d-base) var(--ease-out)}
.js .reiter-feld.an{opacity:1;transform:none}
@media (max-width:1023px){
  .reiter{grid-template-columns:1fr}
  .reiter-liste{flex-direction:row;overflow-x:auto;border-top:0;border-bottom:1px solid var(--linie-weich)}
  .reiter-knopf{width:auto;white-space:nowrap;border-bottom:0;padding:12px 20px 12px 0;grid-template-columns:auto 1fr;gap:8px;font-size:17px}
  .reiter-knopf::before{left:0;right:0;top:auto;bottom:-1px;height:2px;width:auto;transform:scaleX(0);transform-origin:left}
}
@media (max-width:639px){.feld-zeile{grid-template-columns:1fr;gap:6px}}

/* ---------- Sätze zum Hinfahren: Bilanzblatt ---------- */
.balken-zeile[tabindex]{cursor:default}
.balken-zeile[tabindex]:hover .mono,.balken-zeile[tabindex]:focus-visible .mono{color:var(--ink)}
.blatt-satz{margin-top:16px;min-height:2.4em;color:var(--text-muted)}
.blatt-satz b{color:var(--ink);font-weight:600}

/* ---------- Preise als Stationen ----------
   Eine Haarlinie zeichnet sich (950 ms), vier Punkte erscheinen versetzt.
   Die Vertiefung steht mit gestricheltem Punkt neben der Linie. */
.stationen{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--rinne);position:relative;padding:28px 0 0;margin:0;list-style:none}
.stationen::before{content:"";position:absolute;left:0;right:0;top:8px;height:1px;background:var(--linie-stark);transform-origin:left top}
.js .stationen::before{transform:scale(0,1);transition:transform 950ms var(--ease-out)}
.js .sichtbar .stationen::before{transform:scale(1,1)}
.station{position:relative;display:flex;flex-direction:column;gap:10px}
.station .h3{margin-top:2px}
.station p{flex:1}
.station-punkt{position:absolute;left:0;top:-28px;width:16px;height:16px;border-radius:50%;background:var(--ink);border:2px solid var(--ink)}
.station:first-child .station-punkt{background:var(--weiss)}
.station-neben .station-punkt{background:var(--weiss);border-style:dashed}
.js .station-punkt{opacity:0;transition:opacity var(--d-slow) var(--ease)}
.js .sichtbar .station-punkt{opacity:1}
.js .sichtbar .station:nth-child(2) .station-punkt{transition-delay:300ms}
.js .sichtbar .station:nth-child(3) .station-punkt{transition-delay:600ms}
.js .sichtbar .station:nth-child(4) .station-punkt{transition-delay:900ms}
.station-preis{font-family:var(--display);font-weight:600;font-size:28px;letter-spacing:-0.02em;line-height:1;font-variant-numeric:tabular-nums;margin-top:8px}
.station-preis small{display:block;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin-top:8px}
@media (max-width:1023px){
  .stationen{grid-template-columns:1fr;gap:40px;padding:0 0 0 36px}
  .stationen::before{left:8px;right:auto;top:8px;bottom:0;width:1px;height:auto}
  .js .stationen::before{transform:scale(1,0)}
  .station-punkt{left:-36px;top:4px}
}

/* ---------- Bewegung: Auftritt und Erscheinen ---------- */
.js [data-auf]{opacity:0;transform:translateY(16px);transition:opacity 400ms var(--ease-out),transform 400ms var(--ease-out)}
.js [data-auf].sichtbar,.js .geladen>[data-auf],.js .geladen [data-auf]{opacity:1;transform:none}
.js [data-auf="2"]{transition-delay:60ms}
.js [data-auf="3"]{transition-delay:120ms}
.js [data-auf="4"]{transition-delay:180ms}
.js [data-auf="5"]{transition-delay:240ms}
.js [data-auf="6"]{transition-delay:300ms}
.js [data-auf="7"]{transition-delay:360ms}

/* ---------- Zitat-Zellen (Drei Sätze) ---------- */
.satz{font-family:var(--display);font-weight:500;font-size:28px;line-height:1.2;letter-spacing:-0.02em;color:var(--weiss);max-width:14ch}
.satz+p{margin-top:16px}
@media (max-width:639px){.satz{font-size:24px}}
.zahl-zelle .zahl{color:var(--weiss)}
.zahl-zelle p{margin-top:12px;max-width:24em}
.zahl-zelle .quelle{display:block;margin-top:16px}

/* ---------- Gründer ---------- */
.gruender{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--linie-ink)}
.gruender>div{background:var(--ink);padding:var(--ab-innen)}
.gruender .foto{aspect-ratio:1/1;background:var(--ink-800);margin-bottom:24px;overflow:hidden;max-width:320px}
.gruender .foto img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.gruender h3{font-size:32px;letter-spacing:-0.025em}
.gruender .rolle{margin-top:6px;color:var(--provenance-on-ink)}
.gruender p.text-kurz{margin-top:16px;max-width:30em}
.gruender .pfeil{margin-top:20px}
@media (max-width:639px){.gruender{grid-template-columns:1fr}}

/* ---------- Fragen (details) ---------- */
.fragen{border-top:1px solid var(--linie)}
.fragen details{border-bottom:1px solid var(--linie)}
.fragen summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr 24px;gap:24px;align-items:center;padding:22px 0;font-family:var(--display);font-weight:500;font-size:22px;letter-spacing:-0.015em;transition:color var(--d-fast) var(--ease)}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary:hover{color:var(--teal)}
.fragen summary svg{width:20px;height:20px;transition:transform var(--d-slow) var(--ease)}
.fragen details[open] summary svg{transform:rotate(45deg)}
.fragen .antwort-text{padding:0 0 24px;max-width:34em;color:var(--text)}
@media (max-width:639px){.fragen summary{font-size:19px}}

/* ---------- Schluss ---------- */
.schluss{padding:calc(var(--ab) * 1.25) 0}
.schluss-titel{font-size:var(--fs-schluss);line-height:1;letter-spacing:-0.035em;max-width:14ch;color:var(--papier)}
.schluss .handlungen{margin-top:48px}

/* ---------- Fußzeile ---------- */
.fuss{background:var(--ink);color:var(--text-on-ink);border-top:1px solid var(--linie-ink);padding:64px 0 32px}
.fuss-raster{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--rinne)}
.fuss-marke p{margin-top:16px;max-width:22em;color:var(--text-faint-on-ink);font-size:16px}
.fuss-titel{color:var(--text-faint-on-ink);margin-bottom:16px}
.fuss-liste li+li{margin-top:4px}
.fuss-liste a{display:inline-block;padding:4px 0;font-size:16px;line-height:1.5;transition:color var(--d-fast) var(--ease)}
.fuss-liste a:hover{color:var(--weiss)}
.fuss-zeile{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:56px;padding-top:24px;border-top:1px solid var(--linie-ink);color:var(--text-faint-on-ink);text-transform:none;letter-spacing:.02em;font-size:12px}
@media (max-width:1023px){.fuss-raster{grid-template-columns:1fr 1fr}}
@media (max-width:639px){.fuss-raster{grid-template-columns:1fr;gap:32px}}

/* ---------- Unterseiten-Band ---------- */
.band{padding:calc(var(--ab) * .9) 0 calc(var(--ab) * .7)}
.band .lead{margin-top:24px}
.band-raster{display:grid;grid-template-columns:8fr 4fr;gap:var(--rinne);align-items:end}
@media (max-width:1023px){.band-raster{grid-template-columns:1fr}}

/* ---------- Wochenplan (So arbeiten wir) ---------- */
.wochen{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linie);border:1px solid var(--linie);margin-top:32px}
.wochen>div{background:var(--weiss);padding:24px}
.wochen .mono{color:var(--teal)}
.wochen h4{font-family:var(--display);font-weight:500;font-size:20px;margin-top:12px;letter-spacing:-0.01em}
.wochen p{margin-top:8px;font-size:16px;color:var(--text-muted)}
@media (max-width:639px){.wochen{grid-template-columns:1fr}}
.chip{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.ink .chip{color:var(--text-faint-on-ink)}
.ausblick{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--salbei);border:1px solid currentColor;padding:3px 8px;border-radius:3px;margin-left:10px;vertical-align:middle}

/* ---------- Selbstcheck ---------- */
.check{max-width:820px}
.fortschritt{display:flex;gap:6px;margin-top:24px}
.fortschritt span{height:3px;flex:1;background:var(--linie-ink);transition:background-color var(--d-slow) var(--ease)}
.fortschritt span.voll{background:var(--teal-400)}
.frage{padding:var(--ab) 0}
.frage-titel{font-size:var(--fs-h2);line-height:1.1;letter-spacing:-0.025em;max-width:18ch}
.frage-hinweis{margin-top:16px;color:var(--text-muted);max-width:32em}
.antworten{margin-top:40px;border-top:1px solid var(--linie);display:grid}
.antwort{display:grid;grid-template-columns:36px 1fr;gap:20px;align-items:center;text-align:left;padding:22px 0;border-bottom:1px solid var(--linie);font-size:20px;font-family:var(--display);font-weight:500;letter-spacing:-0.01em;transition:color var(--d-fast) var(--ease),padding-left var(--d-base) var(--ease);width:100%}
.antwort:hover,.antwort:focus-visible{color:var(--teal);padding-left:8px}
.antwort .kennung{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--text-faint);border:1px solid var(--linie-stark);width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-md);transition:border-color var(--d-fast) var(--ease),color var(--d-fast) var(--ease)}
.antwort:hover .kennung{border-color:var(--teal);color:var(--teal)}
.frage-fuss{margin-top:32px;display:flex;justify-content:space-between;gap:16px;align-items:center;color:var(--text-muted)}
@media (max-width:639px){.frage-fuss{flex-direction:column;align-items:flex-start;gap:12px}.frage-fuss .textlink{white-space:nowrap}}
.js .frage-karte{transition:opacity var(--d-slow) var(--ease),transform var(--d-slow) var(--ease)}
.js .frage-karte.weg{opacity:0;transform:translateY(8px)}
@media (max-width:639px){.antwort{font-size:18px;grid-template-columns:32px 1fr;gap:14px;padding:18px 0}}
.ergebnis{padding:var(--ab) 0}
.ergebnis-raster{display:grid;grid-template-columns:6fr 6fr;gap:calc(var(--rinne) * 2);align-items:start}
.ergebnis .leitzahl{color:var(--weiss)}
.ergebnis .leitzahl small{font-family:var(--mono);font-size:13px;letter-spacing:.06em;font-weight:500;color:var(--text-faint-on-ink);margin-left:12px;text-transform:uppercase}
.ergebnis .stufe-titel{margin-top:24px;font-size:40px;color:var(--papier)}
.ergebnis .lead{margin-top:16px}
.ergebnis-details{margin-top:40px;border-top:1px solid var(--linie-ink)}
.ergebnis-details div{display:grid;grid-template-columns:1fr auto;gap:16px;padding:12px 0;border-bottom:1px solid var(--linie-ink);align-items:baseline}
.ergebnis-details b{font-family:var(--display);font-weight:600;font-size:18px;color:var(--weiss);font-variant-numeric:tabular-nums}
@media (max-width:1023px){.ergebnis-raster{grid-template-columns:1fr}}

/* ---------- Formular ---------- */
.formular{display:grid;gap:24px}
.feld{display:grid;gap:8px}
.feld label{font-weight:500;font-size:16px}
.feld small{color:var(--text-muted);font-size:14px}
.feld input,.feld textarea{font:inherit;font-size:17px;color:var(--text);background:var(--weiss);border:1px solid var(--linie-stark);border-radius:var(--r-md);padding:12px 14px;width:100%;transition:border-color var(--d-fast) var(--ease)}
.feld input:focus,.feld textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 1px var(--teal)}
.feld textarea{min-height:180px;resize:vertical}
.feld-reihe{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media (max-width:639px){.feld-reihe{grid-template-columns:1fr}}
.falle{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.formular .knopf{justify-self:start}
.kontakt-neben{display:grid;gap:32px}
.kontakt-neben .zeilen{border-top-color:var(--linie)}
.kontakt-neben .zeile{grid-template-columns:120px 1fr;padding:20px 0}
.kontakt-neben a{font-size:20px;font-family:var(--display);font-weight:500;letter-spacing:-0.01em}
.personen{display:flex;gap:24px;flex-wrap:wrap}
.personen>div{display:flex;align-items:center;gap:12px;font-weight:500}
.personen img{width:56px;height:56px;border-radius:50%;object-fit:cover;filter:grayscale(1);border:1px solid var(--linie)}

/* ---------- Rechtstexte ---------- */
.recht{max-width:40em}
.recht h2{font-size:28px;margin-top:56px;letter-spacing:-0.02em}
.recht h3{font-size:20px;margin-top:32px}
.recht p{margin-top:12px}
.recht ul{margin-top:12px;padding-left:20px;list-style:disc}
.recht li+li{margin-top:6px}
.recht dl{margin-top:16px;display:grid;grid-template-columns:200px 1fr;gap:8px 24px}
.recht dt{color:var(--text-muted);font-size:16px}
.recht dd{margin:0}
@media (max-width:639px){.recht dl{grid-template-columns:1fr;gap:2px 0}.recht dd{margin-bottom:10px}}
.offen{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--salbei);border:1px dashed var(--salbei);padding:2px 8px;border-radius:3px;white-space:nowrap}

/* ---------- Kleine Helfer ---------- */
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-20{margin-top:20px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}.mt-40{margin-top:40px}.mt-48{margin-top:48px}
.kein-oben{border-top:0}
.zeile-2{grid-template-columns:2fr 3fr}
.zeile-2 .klein{max-width:34em}
@media (max-width:1023px){.zeile-2{grid-template-columns:1fr}}
.zeile-rechnung{grid-template-columns:1fr auto;padding:18px 0;align-items:baseline}
.zeile-rechnung .zeile-preis{font-size:24px}
.zeile-rechnung.summe{font-weight:500}
.zeile-rechnung.summe .zeile-preis{font-size:32px}
.zeile-preis .textlink{font-family:var(--sans);text-transform:none;letter-spacing:0;font-size:14px;display:inline-block;padding:6px 0;margin:-6px 0}
.check-kopf{padding-bottom:24px;border-bottom:1px solid var(--linie);margin-bottom:8px}
.papier .fortschritt span{background:var(--linie)}
.papier .fortschritt span.voll{background:var(--teal)}
.ergebnis .stufe-titel{margin-top:8px}
.gruender .text-kurz+.text-kurz{margin-top:12px}
.befunde{border-top:1px solid var(--linie-weich)}
.befund h4{font-size:20px;max-width:22ch}
/* Auswahlfeld: der Pfeil kommt aus der Hülle, in der Textfarbe, ohne Bild und ohne Rohfarbe */
.auswahl{font:inherit;font-size:17px;color:var(--text);background:var(--weiss);border:1px solid var(--linie-stark);border-radius:var(--r-md);padding:12px 44px 12px 14px;width:100%;appearance:none;-webkit-appearance:none;transition:border-color var(--d-fast) var(--ease)}
.auswahl:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 1px var(--teal)}
.auswahl-huelle{position:relative;display:block;color:var(--text)}
.auswahl-huelle::after{content:"";position:absolute;right:19px;top:50%;width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-70%) rotate(45deg);pointer-events:none}
.ergebnis-mail .auswahl-huelle{color:var(--text-on-ink)}
.ergebnis-mail .auswahl{background:var(--ink-800);border-color:var(--linie-ink);color:var(--weiss)}
.ergebnis-mail .auswahl:focus{border-color:var(--teal-400);box-shadow:0 0 0 1px var(--teal-400)}
.band .handlungen{margin-top:32px}
.schluss .lead{max-width:30em}

/* ---------- Bildschirmlese-Hilfe ---------- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:0ms !important;transition-delay:0ms !important;animation-duration:0ms !important;animation-delay:0ms !important}
  .js [data-auf]{opacity:1;transform:none}
  .js .balken-wert{transform:scaleX(1)}
  .js .wort{background-size:100% 100%;color:var(--papier)}
  .js .ink .wort{color:var(--ink)}
  .js .reiter-feld{opacity:1;transform:none}
  .js .stationen::before{transform:none}
  .js .station-punkt{opacity:1}
}

/* Druck */
@media print{
  .kopf,.fuss,.sprung,.handlungen{display:none}
  .ink{background:var(--weiss);color:var(--ink-950)}
  body{background:var(--weiss)}
}


/* =====================================================================
   Nachtrag 08.09.2026 (Marcel, Cowork) · neun inhaltliche Änderungen.
   Nur Ergänzungen. Quelle je Regel steht im Änderungsprotokoll.
   ===================================================================== */

/* 2 · Drei Sätze: Prozentzahlen kleiner, dafür in Markenfarbe */
.zahl-zelle .zahl{font-size:calc(var(--fs-zahl) * .72);color:var(--teal-400)}

/* 3 · "Wer Sie BEGLAITet": AI wie in der Wortmarke */
.h2 .ai{color:var(--teal-400)}

/* 7 · Empfehlungen auf dem Bilanzblatt: kompakte Planzeilen */
.plan-kompakt .plan-zeile{grid-template-columns:118px 1fr;gap:16px;padding:12px 0}
.plan-kompakt .plan-zeile h4{font-size:16px}
.plan-kompakt .plan-zeile p{font-size:14px;margin-top:4px;color:var(--text-muted)}
.plan-kompakt .plan-zeile .mono{font-size:12px}
@media (max-width:639px){.plan-kompakt .plan-zeile{grid-template-columns:1fr;gap:4px}}

/* 9 · Musterbericht: sechs Abschnitte je Themenfeld */
.abschnitt{margin-top:28px;padding-top:16px;border-top:1px solid var(--linie-weich)}
.abschnitt:first-of-type{border-top:0}
.abschnitt-nr{color:var(--teal);font-weight:500;letter-spacing:.08em}
.abschnitt .befunde{border-top:0}
.abschnitt .plan{border-top:0}
.blatt .klein b{font-weight:600;color:var(--ink)}

/* 1 · Selbstcheck v2: Frage */
.frage-hilfe{position:relative;max-width:32em}
.frage-hilfe .frage-hinweis{max-width:none}
.frage-karte.zwischen .frage-hinweis+.frage-hinweis{margin-top:12px}
.frage-info-schluss{white-space:nowrap}
.frage-info{position:relative;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;margin:-4px 0 -4px 2px;vertical-align:middle;color:var(--text-muted);border-radius:var(--r-md);transition:color var(--d-fast) var(--ease)}
.frage-info svg{width:17px;height:17px}
.frage-info[aria-expanded="true"]{color:var(--teal)}
@media (hover:hover){.frage-info:hover{color:var(--teal)}}
@media (pointer:coarse){.frage-info::after{content:"";position:absolute;inset:-10px}}
.frage-info-text{position:absolute;z-index:5;left:0;right:0;top:calc(100% + 10px);background:var(--ink);color:var(--text-on-ink);border-radius:var(--r-lg);padding:14px 18px 16px;font-size:15px;line-height:1.55;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity var(--d-base) var(--ease),transform var(--d-base) var(--ease),visibility 0s linear var(--d-base)}
.frage-hilfe-auf .frage-info-text{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.frage-info-kopf{margin-bottom:6px;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--provenance-on-ink)}
.antwort.gewaehlt{color:var(--teal)}
.antwort.gewaehlt .kennung{border-color:var(--teal);color:var(--teal);background:var(--teal-50)}
.frage-handlungen{margin-top:28px;display:flex;gap:20px;flex-wrap:wrap;align-items:center}
.frage-karte.zwischen .frage-titel{max-width:24ch}
.frage-karte .antworten{margin-top:24px}

/* 1 · Selbstcheck v2: Ergebnis auf dunkler Fläche */
.ergebnis-tiefe{margin-top:72px;padding-top:8px;border-top:1px solid var(--linie-ink)}
.ergebnis-tiefe h3.h3{margin-top:56px;color:var(--weiss)}
.ergebnis-tiefe .dims{margin-top:20px;border-top:1px solid var(--linie-ink)}
.ergebnis-tiefe .dim{display:grid;grid-template-columns:220px 1fr 48px;gap:6px 16px;align-items:center;padding:14px 0 10px;border-bottom:1px solid var(--linie-ink)}
.ergebnis-tiefe .dim .mono{color:var(--text-on-ink);text-transform:none;letter-spacing:.02em;font-size:14px}
.ergebnis-tiefe .dim-spur{height:8px;background:var(--ink-800);position:relative;overflow:hidden}
.ergebnis-tiefe .dim-wert{position:absolute;left:0;top:0;bottom:0;background:var(--teal-400)}
.ergebnis-tiefe .dim-wert.tief{background:var(--linie-stark)}
.ergebnis-tiefe .dim-zahl{font-family:var(--display);font-weight:600;font-size:22px;text-align:right;color:var(--weiss);font-variant-numeric:tabular-nums}
.ergebnis-tiefe .dim-text{grid-column:1 / -1;font-size:15px;color:var(--text-faint-on-ink)}
.ergebnis-tiefe .hinweis{margin-top:20px;border:1px solid var(--linie-ink);border-radius:var(--r-lg);padding:16px 20px;font-size:15px;line-height:1.55;color:var(--text-on-ink);max-width:none}
.ergebnis-tiefe .hinweis b{color:var(--weiss);font-weight:600}
.ergebnis-tiefe .kacheln{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--rinne);margin-top:20px}
.ergebnis-tiefe .kachel{border:1px solid var(--linie-ink);border-radius:var(--r-lg);padding:20px}
.ergebnis-tiefe .kachel .k{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint-on-ink)}
.ergebnis-tiefe .kachel .v{font-family:var(--display);font-weight:600;font-size:30px;line-height:1.1;color:var(--weiss);margin-top:10px;letter-spacing:-0.02em}
.ergebnis-tiefe .kachel .s{margin-top:10px;font-size:15px;line-height:1.5;color:var(--text-on-ink)}
.ergebnis-tiefe .kachel.risiko{border-color:var(--status-risk)}
.ergebnis-tiefe .kachel.risiko .v{color:var(--mint)}
.ergebnis-tiefe .felder{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--rinne);margin-top:20px}
.ergebnis-tiefe .feld-karte{border:1px solid var(--linie-ink);border-radius:var(--r-lg);padding:16px 20px}
.ergebnis-tiefe .feld-karte .augenbraue{color:var(--provenance-on-ink)}
.ergebnis-tiefe .feld-karte h4{font-family:var(--display);font-weight:500;font-size:20px;line-height:1.2;color:var(--weiss);margin-top:10px}
.ergebnis-tiefe .feld-karte p{margin-top:10px;font-size:15px;line-height:1.5;color:var(--text-on-ink)}
.ergebnis-tiefe .feld-karte .erster-schritt b{color:var(--provenance-on-ink);font-weight:600}
.ergebnis-tiefe table.gegen{width:100%;border-collapse:collapse;margin-top:20px;font-size:15px}
.ergebnis-tiefe table.gegen th,.ergebnis-tiefe table.gegen td{text-align:left;padding:12px 16px 12px 0;border-bottom:1px solid var(--linie-ink);vertical-align:top;color:var(--text-on-ink);line-height:1.45}
.ergebnis-tiefe table.gegen th{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint-on-ink);font-weight:500}
.ergebnis-tiefe table.gegen td:first-child{color:var(--text-faint-on-ink);width:24%}
.ergebnis-tiefe table.gegen td:nth-child(2){width:22%}
.ergebnis-tiefe table.gegen td:last-child{color:var(--weiss)}
.ergebnis-tiefe .handlungen{margin-top:28px}
@media (max-width:1023px){.ergebnis-tiefe .kacheln,.ergebnis-tiefe .felder{grid-template-columns:1fr}}
@media (max-width:639px){
  .ergebnis-tiefe .dim{grid-template-columns:1fr 48px}
  .ergebnis-tiefe .dim-spur{grid-column:1 / -1}
  .ergebnis-tiefe table.gegen td:first-child,.ergebnis-tiefe table.gegen td:nth-child(2){width:auto}
  .ergebnis-tiefe table.gegen th,.ergebnis-tiefe table.gegen td{overflow-wrap:anywhere;hyphens:auto}
}
/* 10 · Preisseite: Vergleichstabelle „Womit Sie uns vergleichen können" (Wege als Zeilen) */
.vergleich-rahmen{overflow-x:auto;border-top:1px solid var(--linie)}
table.vergleich{width:100%;min-width:720px;border-collapse:collapse;font-size:var(--fs-klein);line-height:1.45}
table.vergleich th,table.vergleich td{text-align:left;vertical-align:top;padding:18px 24px 18px 0;border-bottom:1px solid var(--linie)}
table.vergleich thead th{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);padding-top:16px;padding-bottom:12px}
table.vergleich tbody th{font-family:var(--display);font-weight:500;font-size:18px;letter-spacing:-0.01em;line-height:1.2;width:20%;padding-right:32px;color:var(--text)}
table.vergleich td{color:var(--text-muted)}
table.vergleich td:last-child{color:var(--text);font-variant-numeric:tabular-nums;width:22%}
table.vergleich tr.uns th,table.vergleich tr.uns td{background:var(--teal-50);color:var(--text)}
table.vergleich tr.uns th{padding-left:20px}
table.vergleich tr.uns td:last-child{padding-right:20px}
table.vergleich tr.uns .ai{color:var(--teal)}
@media (max-width:767px){
  table.vergleich{min-width:0}
  table.vergleich thead{display:none}
  table.vergleich,table.vergleich tbody,table.vergleich tr,table.vergleich th,table.vergleich td{display:block;width:auto}
  table.vergleich tr{padding:20px 0;border-bottom:1px solid var(--linie)}
  table.vergleich th,table.vergleich td,table.vergleich tbody th,table.vergleich td:last-child{border:0;padding:6px 0;width:auto;max-width:none}
  table.vergleich tbody th{font-size:20px;padding-bottom:10px}
  table.vergleich td::before{content:attr(data-k);display:block;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin-bottom:4px}
  table.vergleich tr.uns{padding-left:16px;padding-right:16px;background:var(--teal-50)}
  table.vergleich tr.uns th,table.vergleich tr.uns td:last-child{border-left:0;padding-left:0;padding-right:0}
}

/* 11 · Preisseite: die drei Beispiele zugeklappt, Kopfzeile zeigt Titel und erstes Jahr */
.beispiele-liste{border-top:1px solid var(--linie)}
.beispiel{border-bottom:1px solid var(--linie)}
.beispiel summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr auto 24px;gap:32px;align-items:center;padding:28px 0}
.beispiel summary::-webkit-details-marker{display:none}
.beispiel-kopf{display:grid;gap:10px}
.beispiel-titel{font-family:var(--display);font-weight:500;font-size:26px;letter-spacing:-0.015em;line-height:1.15;color:var(--text);transition:color var(--d-fast) var(--ease)}
.beispiel summary:hover .beispiel-titel{color:var(--teal)}
.beispiel-summe{display:grid;justify-items:end;gap:6px;white-space:nowrap}
.beispiel-summe b{font-family:var(--display);font-weight:600;font-size:26px;letter-spacing:-0.02em;font-variant-numeric:tabular-nums}
.beispiel summary svg{width:20px;height:20px;transition:transform var(--d-slow) var(--ease)}
.beispiel[open] summary svg{transform:rotate(45deg)}
.beispiel-inhalt{padding:8px 0 44px}
@media (max-width:639px){
  .beispiel summary{grid-template-columns:1fr 24px;gap:16px}
  .beispiel-summe{grid-column:1 / -1;grid-auto-flow:column;justify-content:start;align-items:baseline;gap:12px}
  .beispiel-titel{font-size:22px}
  .beispiel-summe b{font-size:22px}
}

@media print{
  .ergebnis{background:var(--weiss);color:var(--ink-950)}
  .ergebnis-tiefe .hinweis,.ergebnis-tiefe .kachel,.ergebnis-tiefe .feld-karte h4,.ergebnis-tiefe .dim-zahl,.ergebnis-tiefe table.gegen td{color:var(--ink-950)}
  .ergebnis .handlungen,.ergebnis [data-nochmal],.ergebnis-mail{display:none}
}

/* Nachtrag 09.09.2026 · Listen und Preistafel auf der Preisseite, Ergebnis per E-Mail im Selbstcheck */
.enthalten{margin-top:14px;padding-left:0;list-style:none;display:grid;gap:6px;max-width:38em}
.enthalten li{position:relative;padding-left:20px;font-size:var(--fs-klein);line-height:1.5;color:var(--text)}
.enthalten li::before{content:"";position:absolute;left:1px;top:.5em;width:11px;height:9px;background:var(--teal);clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%)}
.enthalten b{font-weight:600}
.ergebnis-mail{margin-top:56px;padding-top:32px;border-top:1px solid var(--linie-ink);max-width:40em}
.ergebnis-mail h3.h3{margin-top:0}
.ergebnis-mail .mail-text{margin-top:12px;font-size:15px;line-height:1.55;color:var(--text-on-ink)}
.ergebnis-mail .formular{margin-top:24px;gap:20px}
.ergebnis-mail .feld label{color:var(--text-on-ink)}
.ergebnis-mail .feld input{background:var(--ink-800);border-color:var(--linie-ink);color:var(--weiss)}
.ergebnis-mail .feld input:focus{border-color:var(--teal-400);box-shadow:0 0 0 1px var(--teal-400)}
.ergebnis-mail .feld-haken{display:flex;gap:12px;align-items:flex-start;font-size:var(--fs-klein);line-height:1.5;color:var(--text-on-ink);cursor:pointer}
.ergebnis-mail .feld-haken input{margin:3px 0 0;width:18px;height:18px;flex:none;accent-color:var(--teal-400)}
.ergebnis-mail .klein{margin-top:16px;color:var(--text-faint-on-ink)}
.ergebnis-mail .textlink{color:var(--provenance-on-ink)}
@media (max-width:639px){.ergebnis-mail .feld-reihe{grid-template-columns:1fr}}

/* Nachtrag 09.09.2026 · Flächen aus dem Navigator, echte Screenshots vom Demo-Mandanten */
.flaeche{margin:0;background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--schatten-flaeche);color:var(--text)}
.flaeche-kopf{display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;padding:12px 20px;border-bottom:1px solid var(--linie);color:var(--text-muted)}
.flaeche img{display:block;width:100%;height:auto;background:var(--sunken)}
.flaeche figcaption{padding:14px 20px 16px;border-top:1px solid var(--linie);color:var(--text-muted)}
.ink .flaeche{box-shadow:var(--schatten-flaeche-ink)}
.flaeche-einzel{margin-top:8px}
@media (max-width:639px){.flaeche-kopf{padding:10px 14px}.flaeche figcaption{padding:12px 14px 14px}}
/* Nachtrag 09.09.2026 · Karussell mit den Flächen aus dem Navigator, rechts neben den
   drei Sichten. Eine Fläche steht im Fenster, die Spur schiebt waagerecht. Ohne
   JavaScript stehen alle drei Flächen untereinander, Leiste und Knöpfe bleiben fort. */
.split-bild{grid-template-columns:4fr 8fr}
.split-bild > *{min-width:0}
.zeile-block{grid-template-columns:1fr;gap:8px}
.zeile-block .klein{max-width:34em}
.karussell-spur{display:grid;gap:24px}
.karussell-leiste{display:none}
.karussell img{-webkit-user-drag:none;user-select:none}
.js .karussell-fenster{overflow:hidden;padding-bottom:40px;margin-bottom:-40px}
.js .karussell-spur{display:flex;gap:0;touch-action:pan-y;transition:transform var(--d-slower) var(--ease-out)}
.js .karussell-spur > .flaeche{flex:0 0 100%;min-width:0}
.js .karussell.zieht .karussell-spur{transition:none}
.js .karussell-leiste{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 24px;margin-top:24px}
.karussell-reiter{display:flex;flex:1 1 auto;flex-wrap:wrap;gap:0 24px;min-width:0}
.karussell-name{-webkit-appearance:none;appearance:none;background:none;border:0;padding:8px 0;color:var(--text-muted);cursor:pointer;transition:color var(--d-fast) var(--ease)}
.karussell-name:hover{color:var(--ink)}
.karussell-name[aria-current="true"]{color:var(--ink)}
.karussell-knoepfe{display:flex;flex:0 0 auto;gap:8px}
.karussell-knopf{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;background:none;border:1px solid var(--linie);border-radius:50%;color:var(--text-muted);cursor:pointer;transition:color var(--d-fast) var(--ease),border-color var(--d-fast) var(--ease)}
.karussell-knopf:hover{color:var(--ink);border-color:var(--linie-stark)}
.karussell-knopf svg{display:block;width:16px;height:16px}
@media (max-width:1023px){.split-bild{grid-template-columns:1fr}}
@media (max-width:639px){.karussell-reiter{gap:0 16px}.js .karussell-leiste{gap:12px 16px}}

/* ================================================================
   Fassung 3 (Marcel, 29.09. bis 01.10.2026), übernommen am 02.10.2026.
   Ink nur noch für Held, Schluss und Ergebnis; Kopf, Bänder und Fuß auf
   Papier. Nummern verweisen auf das Änderungsregister der Fassung 3.
   ================================================================ */

/* G01 · Kopfzeile hell */
.kopf{background:var(--papier);color:var(--text);border-bottom:1px solid var(--linie)}
.kopf.gescrollt{border-bottom-color:var(--linie-stark)}
.kopf :focus-visible{outline-color:var(--fokus)}
.kopf .marke{color:var(--ink)}
.kopf .marke .ai{color:var(--teal)}
.kopf .nav-punkt>a{color:var(--text)}
.kopf .nav-punkt>a:hover{color:var(--teal-700);background:var(--sunken)}
.kopf .nav-punkt.aktiv>a,.kopf .nav-punkt>a[aria-current="page"]{color:var(--teal-700);background:transparent;box-shadow:none}
.kopf .nav-pfeil{color:var(--text-muted)}
.kopf .nav-pfeil:hover,.kopf .nav-klapp:hover .nav-pfeil,.kopf .nav-klapp.geoeffnet .nav-pfeil{color:var(--ink)}
.kopf .klapp{background:var(--weiss);border-color:var(--linie);box-shadow:none}
.kopf .klapp-gruppe+.klapp-gruppe{border-left-color:var(--linie-weich)}
.kopf .klapp-kopf{color:var(--text-muted)}
.kopf .klapp a:hover,.kopf .klapp a[aria-current="page"]{background:var(--papier)}
.kopf .klapp-titel{color:var(--ink)}
.kopf .klapp-satz{color:var(--text-muted)}
.kopf .knopf-ink{background:var(--ink);color:var(--weiss)}
.kopf .kopf-tel{font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--text-muted);white-space:nowrap;margin-left:auto}
.kopf .kopf-tel+.kopf-handlung{margin-left:16px}
.burger span{background:var(--ink)}
@media (max-width:1100px){.kopf .kopf-tel{display:none}.kopf .kopf-handlung{margin-left:auto}}

/* G01 · Handy-Menü hell */
.menue{background:var(--papier);border-top-color:var(--linie)}
.menue-liste>li{border-bottom-color:var(--linie)}
.menue-liste>li>a{color:var(--ink)}
.menue-liste>li>a[aria-current="page"]{color:var(--teal-700)}
.menue-unter a{color:var(--text-muted)}
.menue-kopf{color:var(--text-muted)}
.menue-fuss{color:var(--text-muted)}
.menue-fuss a{color:var(--ink)}

/* G04 · Unterseiten-Band auf Papier, kürzer */
.band.papier{padding:calc(var(--ab) * .7) 0 calc(var(--ab) * .45);border-bottom:1px solid var(--linie)}
.band.papier .augenbraue{color:var(--teal)}
.band.papier .h1{color:var(--ink);max-width:22ch}
.band.papier .lead{color:var(--text)}
.band.kompakt{padding:calc(var(--ab) * .5) 0 calc(var(--ab) * .3)}
.band.kompakt .lead{margin-top:14px}

/* G03 · Brotkrumen */
.krumen{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);display:flex;flex-wrap:wrap;gap:6px 10px;margin-bottom:22px}
.krumen a{color:var(--text-muted);text-decoration:none}
.krumen a:hover{color:var(--teal);text-decoration:underline}
.krumen span[aria-current]{color:var(--ink)}
.krumen .trenn{color:var(--linie-stark)}

/* G05 · Fußzeile hell */
.fuss{background:var(--papier);color:var(--text);border-top:1px solid var(--linie-stark)}
.fuss :focus-visible{outline-color:var(--fokus)}
.fuss .marke{color:var(--ink)}
.fuss .marke .ai{color:var(--teal)}
.fuss-marke p,.fuss-titel,.fuss-zeile{color:var(--text-muted)}
.fuss-liste a{color:var(--text)}
.fuss-liste a:hover{color:var(--teal-700)}
.fuss-zeile{border-top-color:var(--linie)}
.fuss-raster{grid-template-columns:1.6fr 1fr 1fr 1fr 1fr}
.fuss-adresse{margin-top:16px;font-style:normal;font-size:15px;line-height:1.6;color:var(--text)}
@media (max-width:1023px){.fuss-raster{grid-template-columns:1fr 1fr}}
@media (max-width:639px){.fuss-raster{grid-template-columns:1fr}}

/* Flächen, die früher Ink waren und jetzt hell sind */
.gruender.hell{background:var(--linie-weich)}
.gruender.hell>div{background:var(--weiss);color:var(--text)}
.gruender.hell h3{color:var(--ink)}
.gruender.hell .rolle{color:var(--teal)}
.gruender.hell .text-kurz{color:var(--text)}
.gruender.hell .foto{background:var(--sunken)}
.gruender .profil{display:inline-flex;margin-top:14px;font-size:15px}

/* S04 · Bilanzblatt im Held */
.held-blatt .blatt{padding:28px 28px 22px}
.held-blatt .blatt-titel{font-size:20px;margin-top:18px}
.held-blatt .blatt-wert{margin-top:18px;gap:10px}
.held-blatt .leitzahl{font-size:88px}
.held-blatt .balken{margin-top:18px}
.held-blatt .balken-zeile{grid-template-columns:150px 1fr 40px;padding:8px 0}
.held-blatt .balken-zahl{font-size:18px}
.js .geladen .balken-wert,.js [data-geladen].geladen .balken-wert{transform:scaleX(1)}
@media (max-width:639px){.held-blatt .leitzahl{font-size:64px}.held-blatt .balken-zeile{grid-template-columns:1fr 40px}}
.held-raster-neu{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:calc(var(--rinne) * 1.5);align-items:center}
@media (max-width:1023px){.held-raster-neu{grid-template-columns:1fr}}
.held-neu{min-height:0;padding:72px 0 40px;overflow-x:clip}
.held-neu .held-titel{font-size:clamp(44px,6.4vw,88px)}

/* S05 · Belegzeile */
.belege{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--linie-ink);border-bottom:1px solid var(--linie-ink);margin-top:48px}
.belege>div{padding:18px var(--ab-innen) 18px 0;min-width:0}
.belege>div+div{border-left:1px solid var(--linie-ink);padding-left:var(--ab-innen)}
.belege b{display:block;font-family:var(--display);font-weight:600;font-size:22px;letter-spacing:-0.015em;color:var(--weiss);line-height:1.15}
.belege span{display:block;margin-top:6px;font-family:var(--mono);font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--text-faint-on-ink)}
@media (max-width:1023px){.belege{grid-template-columns:1fr 1fr}.belege>div:nth-child(3){border-left:0;padding-left:0}.belege>div:nth-child(n+3){border-top:1px solid var(--linie-ink)}}
@media (max-width:639px){.belege{grid-template-columns:1fr}.belege>div+div{border-left:0;padding-left:0;border-top:1px solid var(--linie-ink)}}

/* S06 · Zwei Wege */
.wege{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--linie);border:1px solid var(--linie)}
.wege>div{background:var(--weiss);padding:calc(var(--ab-innen) * 1.25);min-width:0;display:flex;flex-direction:column;gap:16px}
.wege .wer{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal)}
.wege .h3{font-size:clamp(22px,2vw,28px)}
.wege .formular{gap:16px;margin-top:4px}
.wege .feld-reihe{gap:16px}
.ablauf-kurz{border-top:1px solid var(--linie);font-size:16px}
.ablauf-kurz>div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px solid var(--linie-weich)}
.ablauf-kurz .mono{color:var(--text-muted);padding-top:3px}
.ablauf-kurz b{font-weight:600}
@media (max-width:1023px){.wege{grid-template-columns:1fr}}

/* S07 · Anlässe */
.weiss .satz,.papier .satz{color:var(--ink)}
.anlass a.pfeil{margin-top:14px;font-size:15px;color:var(--teal-700)}
.anlass .zahl-klein{display:block;margin-top:18px;font-family:var(--display);font-weight:600;font-size:40px;letter-spacing:-0.03em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.anlass .quelle{display:block;margin-top:8px;font-size:13px;color:var(--text-muted)}

/* S08 · Drei Schritte statt Bühne */
.schritte{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:2px solid var(--ink);counter-reset:s}
.schritte>li{list-style:none;padding:24px var(--rinne) 8px 0;min-width:0;position:relative}
.schritte>li+li{padding-left:var(--rinne);border-left:1px solid var(--linie)}
.schritte .nr{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal)}
.schritte .h3{margin-top:10px}
.schritte p{margin-top:10px;color:var(--text-muted);font-size:16px}
.schritte .eckdaten{margin-top:14px;display:flex;flex-wrap:wrap;align-items:flex-start;align-content:flex-start;gap:6px 14px;font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;color:var(--ink)}
.schritte .eckdaten span{border:1px solid var(--linie-stark);border-radius:4px;padding:3px 8px;background:var(--weiss)}
.schritte a.pfeil{margin-top:16px;font-size:15px}
.schritte-zusatz{margin-top:28px;padding-top:18px;border-top:1px solid var(--linie);display:flex;flex-wrap:wrap;gap:8px 24px;align-items:baseline;font-size:16px}
@media (max-width:1023px){.schritte{grid-template-columns:1fr}.schritte>li+li{padding-left:0;border-left:0;border-top:1px solid var(--linie)}}

/* L03 · Ablauf-Tabelle */
.tabellen-rahmen{overflow-x:auto;border:1px solid var(--linie);background:var(--weiss);margin-top:24px}
.ablauf{width:100%;min-width:720px;border-collapse:collapse;font-size:16px;line-height:1.45}
.ablauf th,.ablauf td{text-align:left;vertical-align:top;padding:14px 18px;border-bottom:1px solid var(--linie-weich)}
.ablauf thead th{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted);background:var(--papier)}
.ablauf tbody th{font-family:var(--display);font-weight:500;font-size:18px;white-space:nowrap}
.ablauf tbody tr:last-child td,.ablauf tbody tr:last-child th{border-bottom:0}
.preisbox{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linie);border:1px solid var(--linie);margin-top:24px}
.preisbox>div{background:var(--weiss);padding:20px 22px;min-width:0}
.preisbox .mono{color:var(--text-muted)}
.preisbox b{display:block;font-family:var(--display);font-weight:600;font-size:30px;letter-spacing:-0.02em;margin-top:8px;font-variant-numeric:tabular-nums}
.preisbox p{margin-top:8px;font-size:15px;color:var(--text-muted)}
@media (max-width:639px){.preisbox{grid-template-columns:1fr}}

/* P02 · Einstiegspfad auf der Preisseite */
.pfad{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linie);border:1px solid var(--linie)}
.pfad>div{background:var(--weiss);padding:24px;min-width:0;display:flex;flex-direction:column;gap:8px}
.pfad .nr{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal)}
.pfad .preis{font-family:var(--display);font-weight:600;font-size:34px;letter-spacing:-0.02em;line-height:1;font-variant-numeric:tabular-nums;margin-top:6px}
.pfad .preis small{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin-left:6px}
.pfad p{font-size:15.5px;color:var(--text-muted)}
.pfad a.pfeil{margin-top:auto;padding-top:8px;font-size:15px}
@media (max-width:1023px){.pfad{grid-template-columns:1fr}}
.status-vorb{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--salbei);background:var(--salbei-50);border-radius:4px;padding:3px 8px;white-space:nowrap}

/* K · Kontakt */
.kontakt-raster{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:calc(var(--rinne) * 1.5);align-items:start}
@media (max-width:1023px){.kontakt-raster{grid-template-columns:1fr}}
.anliegen{border:0;padding:0;margin:0;display:grid;gap:10px}
.anliegen legend{font-weight:500;font-size:16px;padding:0;margin-bottom:10px}
.anliegen .wahl{display:flex;flex-wrap:wrap;gap:8px}
.anliegen input{position:absolute;opacity:0;width:1px;height:1px}
.anliegen label{display:inline-flex;align-items:center;height:42px;padding:0 16px;border:1px solid var(--linie-stark);border-radius:var(--r-md);background:var(--weiss);font-size:15.5px;cursor:pointer;transition:background-color var(--d-fast) var(--ease),border-color var(--d-fast) var(--ease)}
.anliegen label:hover{border-color:var(--ink)}
.anliegen input:checked+label{background:var(--ink);border-color:var(--ink);color:var(--weiss)}
.anliegen input:focus-visible+label{outline:2px solid var(--fokus);outline-offset:2px}
.feld .pflicht-hinweis{font-size:13px;color:var(--text-muted);font-weight:400;margin-left:6px}
.feld textarea{min-height:128px}
.fehler-hinweis{font-size:14.5px;color:var(--status-risk)}
.feld .feld-fehler{font-size:14px;color:var(--status-risk)}
.feld [aria-invalid="true"]{border-color:var(--status-risk)}
.ergebnis-mail .feld .feld-fehler{color:var(--weiss)}
.ergebnis-mail .feld [aria-invalid="true"]{border-color:var(--weiss)}
.bestaetigung{border:1px solid var(--status-ok);background:var(--weiss);padding:24px 24px 22px;border-radius:var(--r-lg)}
.bestaetigung .h3{color:var(--ink)}
.bestaetigung p{margin-top:10px}
.bestaetigung .mono{color:var(--status-ok)}
.ink .bestaetigung{color:var(--text)}
.telefon-gross{font-family:var(--display);font-weight:500;font-size:24px;letter-spacing:-0.01em}

/* Mobile · fester Knopf unten (G06) */
.fest-unten{position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;gap:10px;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:var(--papier);border-top:1px solid var(--linie);transform:translateY(110%);transition:transform var(--d-slow) var(--ease)}
.fest-unten .knopf{flex:1;height:46px;padding:0 12px}
.fest-unten .knopf-rahmen{background:var(--weiss);color:var(--ink);border:1px solid var(--linie-stark)}
.fest-unten.zeigen{transform:none}
@media (max-width:1023px){.fest-unten{display:flex}}
@media (prefers-reduced-motion:reduce){.fest-unten{transition:none}}
.knopf-rahmen{background:transparent;color:inherit;border:1px solid currentColor}

/* ================================================================ Fassung 2 · Verkaufsargument virtueller KI-Manager (V00) */

/* S07 · Das Problem: zwei Zahlen */
.problem-zahlen{display:grid;grid-template-columns:1fr 1fr 2fr;gap:0 var(--rinne);align-items:start;border-top:2px solid var(--ink);padding-top:24px}
.problem-zahlen .zahl-gross{display:block;font-family:var(--display);font-weight:600;font-size:var(--fs-zahl);letter-spacing:-0.035em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.problem-zahlen p{margin-top:10px;font-size:16px;color:var(--text);max-width:22em}
.problem-zahlen .quelle{align-self:end;font-size:13px;color:var(--text-muted);margin:0;max-width:30em}
.folgen-titel{color:var(--teal-700)}
@media (max-width:1023px){.problem-zahlen{grid-template-columns:1fr 1fr}.problem-zahlen .quelle{grid-column:1 / -1;margin-top:16px}}
@media (max-width:639px){.problem-zahlen{grid-template-columns:1fr;gap:20px}}

/* V01 · Die Lösung */
.kennt{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--linie);border:1px solid var(--linie)}
.kennt>div{background:var(--weiss);padding:calc(var(--ab-innen) * 1.25);min-width:0}
.kennt .nr{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal)}
.kennt .h3{margin-top:10px;font-size:clamp(22px,2vw,28px)}
.kennt p:not(.nr){margin-top:12px;color:var(--text-muted);font-size:16px}
.aufgaben{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--linie)}
.aufgaben li{padding:18px var(--rinne) 18px 0;border-bottom:1px solid var(--linie);display:flex;flex-direction:column;gap:6px;min-width:0}
.aufgaben li:not(:nth-child(3n+1)){padding-left:var(--rinne);border-left:1px solid var(--linie)}
.aufgaben b{font-family:var(--display);font-weight:500;font-size:19px;letter-spacing:-0.01em;color:var(--ink)}
.aufgaben b small{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);border:1px solid var(--linie-stark);border-radius:4px;padding:1px 6px;margin-left:8px;vertical-align:2px}
.aufgaben span{font-size:15.5px;color:var(--text-muted)}
.loesung-fuss{margin-top:32px;display:flex;flex-wrap:wrap;gap:12px 32px;align-items:baseline;justify-content:space-between}
.loesung-fuss .h3{color:var(--ink)}
@media (max-width:1023px){.kennt{grid-template-columns:1fr}.aufgaben{grid-template-columns:1fr 1fr}.aufgaben li:not(:nth-child(3n+1)){padding-left:0;border-left:0}.aufgaben li:nth-child(2n){padding-left:var(--rinne);border-left:1px solid var(--linie)}}
@media (max-width:639px){.aufgaben{grid-template-columns:1fr}.aufgaben li:nth-child(2n){padding-left:0;border-left:0}}

/* S09 · Matrix mit fünf Spalten und fünf Zeilen */
.matrix-5 .matrix{min-width:980px}
@media (min-width:640px){.matrix-5 .matrix td{max-width:13em}}
@media (max-width:1023px){.matrix-5 .matrix{min-width:900px}}
@media (max-width:639px){
 .matrix-5 .matrix{min-width:0}
 .matrix-5 .matrix tr>*:nth-child(6){--c:5}
 .matrix-5 .matrix tbody tr:nth-child(5)>td{--r:5}
 .matrix-5 .matrix td{padding:9px 0 10px;border-bottom:1px solid var(--linie-weich);font-size:15px}
 .matrix-5 .matrix td::before{display:inline-block;min-width:10.5em;margin:0 8px 0 0;font-size:11px}
 .matrix-5 .matrix thead th{padding:24px 0 10px}
 .matrix-5 .matrix .uns{padding-left:14px;padding-right:14px}
}

/* V04 · Navigator: Wer macht was */
.wer-was-rahmen{overflow-x:auto;border-top:1px solid var(--linie)}
.wer-was{width:100%;min-width:820px;border-collapse:collapse;font-size:15.5px;line-height:1.45}
.wer-was th,.wer-was td{text-align:left;vertical-align:top;padding:16px 20px 16px 0;border-bottom:1px solid var(--linie)}
.wer-was thead th{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.wer-was thead th.nav{color:var(--teal-700)}
.wer-was tbody th{font-family:var(--display);font-weight:500;font-size:18px;letter-spacing:-0.01em;color:var(--ink);white-space:nowrap;padding-right:28px}
.wer-was td{color:var(--text-muted)}
.wer-was td.nav{color:var(--text);background:var(--weiss);padding-left:16px}
.wer-was .entw{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);border:1px solid var(--linie-stark);border-radius:4px;padding:0 6px;margin-left:6px}
@media (max-width:639px){
 .wer-was{min-width:0;display:block}
 .wer-was thead{display:none}
 .wer-was tbody,.wer-was tr{display:block}
 .wer-was tr{padding:16px 0;border-bottom:1px solid var(--linie)}
 .wer-was th,.wer-was td{display:block;border:0;padding:4px 0}
 .wer-was td::before{content:attr(data-k);display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-top:8px}
 .wer-was td.nav{padding:8px 12px;margin-top:6px}
}

/* V05 · Navigator: Was hineingeht */
.eingaben{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linie);border:1px solid var(--linie)}
.eingaben>div{background:var(--weiss);padding:22px var(--ab-innen);min-width:0}
.eingaben .nr{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal)}
.eingaben h3{margin-top:8px;font-size:19px}
.eingaben p{margin-top:8px;font-size:15.5px;color:var(--text-muted)}
@media (max-width:1023px){.eingaben{grid-template-columns:1fr 1fr}}
@media (max-width:639px){.eingaben{grid-template-columns:1fr}}
/* S17 · H1 mit drei Sätzen: breiter und etwas kleiner, damit sie in drei bis vier Zeilen passt */
.held-neu .held-titel-3{font-size:clamp(38px,4.9vw,72px);max-width:14ch;line-height:1.02}
@media (max-width:639px){.held-neu .held-titel-3{font-size:clamp(34px,9.6vw,44px);max-width:none}}

/* S06 · Kontakt direkt */
.direkt{margin-top:4px;padding-top:14px;border-top:1px solid var(--linie);display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;font-size:16px}
.direkt .mono{font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.direkt a,.kontakt-neben a.tel,.band a.tel,.band a[href^="mailto"]{color:var(--ink);font-weight:500;text-decoration:underline;text-decoration-color:var(--linie-stark);text-underline-offset:3px}
.direkt a:hover{text-decoration-color:var(--teal)}

/* S07 · Die Folgen: eine ruhige Zeile statt drei Karten mit Links */
.folgen{margin-top:40px;padding-top:18px;border-top:1px solid var(--linie);display:grid;grid-template-columns:minmax(0,2fr) minmax(0,10fr);gap:16px var(--rinne);align-items:baseline}
.folgen .mono{font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.folgen ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px var(--rinne)}
.folgen li{font-family:var(--display);font-weight:500;font-size:clamp(18px,1.5vw,21px);letter-spacing:-0.01em;line-height:1.3;color:var(--ink);padding-left:18px;position:relative}
.folgen li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--teal)}
@media (max-width:1023px){.folgen{grid-template-columns:1fr}.folgen ul{grid-template-columns:1fr}}

/* S08 · ein Link unter den drei Schritten statt drei */
.schritte-link{margin-top:24px}
.schritte-link a.pfeil{font-size:16px}

/* D02, D03 · Stationen und LinkedIn */
.gr-stationen{line-height:1.5;max-width:34em}
.gr-stationen .mono{display:block;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px}
.pfeil-klein{font-weight:500;color:var(--teal-700);text-decoration:underline;text-decoration-color:var(--linie-stark);text-underline-offset:3px}
.pfeil-klein::after{content:" ↗";text-decoration:none}
.pfeil-klein:hover{text-decoration-color:var(--teal)}

/* G20 · Wortmarke aus dem Logo, Farben über Tokens */
.marke-bild{display:inline-flex;align-items:center;letter-spacing:0;line-height:0}
.marke-bild .wortmarke{display:block;height:21px;width:auto}
.kopf .marke-bild{color:var(--ink)}
.kopf .marke-bild .m-ai{fill:var(--teal)}
.fuss .marke-bild{color:var(--ink)}
.fuss .marke-bild .m-ai{fill:var(--teal)}
.ink .marke-bild{color:var(--papier)}
.ink .marke-bild .m-ai{fill:var(--teal-400)}
.fuss .marke-bild .wortmarke{height:26px}
@media (max-width:639px){.marke-bild .wortmarke{height:18px}}

/* G17, G19 · rechts in der Kopfzeile: Zurück (erscheint nach einem Klick innerhalb der Website), Telefon, Kontakt */
.kopf-rechts{margin-left:auto;display:flex;align-items:center;gap:16px}
.kopf .kopf-rechts .kopf-tel,.kopf .kopf-rechts .kopf-handlung{margin-left:0}
.kopf .kopf-rechts+.burger{margin-left:4px}
.kopf-zurueck{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);text-decoration:none;border:1px solid var(--linie-stark);border-radius:6px;background:var(--weiss);white-space:nowrap}
.kopf-zurueck[hidden]{display:none}
.kopf-zurueck:hover{border-color:var(--ink)}
.kopf-zurueck:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.kopf .kopf-handlung[aria-current="page"]{background:var(--teal-700)}
@media (max-width:1023px){
 .kopf .kopf-handlung{display:inline-flex;height:40px;padding:0 14px;font-size:15px}
 .kopf-rechts{gap:8px}
}
@media (max-width:639px){
 .kopf-zurueck{width:40px;height:40px;padding:0;justify-content:center;font-size:16px}
 .kopf-zurueck-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 .kopf .kopf-handlung{padding:0 12px}
}
.held-neu .held-titel-3+.lead{margin-top:32px}
@media (max-width:639px){.held-neu .held-titel-3+.lead{margin-top:22px}}
/* K07 · Link im Hinweissatz der Seitenspalte in Textgröße (vorher 20 px aus der Regel für E-Mail und Telefon) */
.kontakt-neben p.klein a{font-size:inherit;font-family:inherit;letter-spacing:0;font-weight:500}

/* M04, S18 · Musterbericht mit Tiefe, Felder wie im Navigator */
.blatt-logo-zeile{display:inline-flex;align-items:center;gap:10px}
.blatt-logo{display:inline-flex;color:var(--ink);line-height:0}
.blatt-logo .wortmarke{height:12px;width:auto}
.blatt-logo .m-ai{fill:var(--teal)}
.kennzahlen{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--linie-weich);border-bottom:1px solid var(--linie-weich)}
.kennzahlen-2{grid-template-columns:repeat(2,1fr)}
.kennzahlen>div{padding:14px 14px 14px 0;display:flex;flex-direction:column;gap:4px;min-width:0}
.kennzahlen>div+div{padding-left:14px;border-left:1px solid var(--linie-weich)}
.kennzahlen .mono{font-size:11px;letter-spacing:.05em;color:var(--text-muted);line-height:1.4}
.kennzahlen b{font-family:var(--display);font-weight:600;font-size:30px;letter-spacing:-0.02em;line-height:1.05;color:var(--ink);font-variant-numeric:tabular-nums}
.marke-status{align-self:flex-start;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;padding:1px 7px;border-radius:999px;background:var(--teal-50);color:var(--teal-700)}
.marke-status.geschaetzt{background:var(--warn-50);color:var(--status-warn)}
@media (max-width:639px){.kennzahlen,.kennzahlen-2{grid-template-columns:1fr}.kennzahlen>div+div{padding-left:0;border-left:0;border-top:1px solid var(--linie-weich)}.kennzahlen-3{grid-template-columns:repeat(3,1fr)}.kennzahlen-3>div+div{padding-left:10px;border-left:1px solid var(--linie-weich);border-top:0}.kennzahlen-3 b{font-size:22px}}
.potenzial{margin-top:8px;display:inline-block;font-size:14.5px;line-height:1.45;padding:4px 10px;border-radius:6px;background:var(--teal-50);color:var(--ink)}
.potenzial b{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--teal-700);margin-right:6px}
.potenzial-nein{background:var(--sunken)}
.potenzial-nein b{color:var(--text-muted)}
.erkenntnis{margin-top:10px;font-size:15px;color:var(--text)}
.fall-prio{display:flex;flex-direction:column;gap:2px;padding-top:2px}
.fall-prio b{font-family:var(--display);font-weight:600;font-size:30px;letter-spacing:-0.02em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.fall.ruhe .fall-prio b{color:var(--text-muted)}
.fall-prio .mono{font-size:11px;padding-top:0}
.fall-meta{margin-top:4px;font-size:11.5px;letter-spacing:.04em;color:var(--text-muted)}
.fall-werte{margin-top:10px;display:grid;grid-template-columns:auto 1fr auto 1fr;gap:6px 10px;align-items:center;max-width:30em}
.fall-werte .mono{font-size:11.5px;color:var(--text-muted);white-space:nowrap}
.mini-spur{display:block;height:6px;border-radius:3px;background:var(--linie-weich);overflow:hidden;min-width:50px}
.mini-spur span{display:block;height:100%;background:var(--ink)}
.fall.ruhe .mini-spur span{background:var(--linie-stark)}
@media (max-width:639px){.fall-prio{flex-direction:row;align-items:baseline;gap:8px}.fall-prio b{font-size:24px}.fall-werte{grid-template-columns:auto 1fr}}
.folgen-liste{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.folgen-liste li{padding-left:14px;position:relative}
.folgen-liste li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--teal)}
.optionen{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.optionen>div{border:1px solid var(--linie-weich);border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:6px;min-width:0}
.optionen>div.empfohlen{border-color:var(--teal);background:var(--teal-50)}
.optionen .mono{font-size:11.5px;letter-spacing:.05em;color:var(--ink)}
.optionen .optionen-werte{font-size:11px;color:var(--teal-700)}
@media (max-width:1023px){.optionen{grid-template-columns:1fr}}
.fahrplan-mini{display:grid;border-top:1px solid var(--linie-weich)}
.fahrplan-mini>div{display:grid;grid-template-columns:110px 1fr;gap:12px;padding:8px 0;border-bottom:1px solid var(--linie-weich);font-size:14.5px}
.fahrplan-mini .mono{font-size:11.5px;color:var(--text-muted);padding-top:2px}
.fahrplan-mini .ziel{background:var(--teal-50);padding-left:8px;padding-right:8px}
.fahrplan-mini .ziel .mono{color:var(--teal-700)}
.meilensteine{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.meilensteine>div{border-top:2px solid var(--ink);padding-top:10px;display:flex;flex-direction:column;gap:4px;min-width:0}
.meilensteine .mono{font-size:11px;letter-spacing:.05em;color:var(--teal-700)}
.meilensteine b{font-family:var(--display);font-weight:500;font-size:16px;line-height:1.25;color:var(--ink)}
@media (max-width:639px){.meilensteine{grid-template-columns:1fr}}
.plan-zeile.ziel-zeile{background:var(--teal-50);padding-left:12px;padding-right:12px;border-radius:6px}

/* P11 · Navigator-Tafel nach Größe */
.nav-tafel{margin-top:12px}
.nav-tafel td:nth-child(3){color:var(--text-muted)}
/* P14 · Preistafeln als echte Tabelle (die Basis setzt .stufen auf grid, dadurch standen Kopf und Werte versetzt) */
table.stufen{display:table;width:100%;max-width:34em}
table.nav-tafel{max-width:26em}
.fuss-liste li{font-size:16px;line-height:1.5}

/* ================================================================
   Fassung 3 · 30.09.2026 · M05 Musterbericht in der Gestalt des Navigators
   Farben und Maße nach den Navigator-Flächen (Cockpit, Roadmap, Governance).
   ================================================================ */
.ns{margin:0;background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r-lg);overflow:hidden;color:var(--text);text-align:left}
.ns .flaeche-kopf{padding:10px 16px}
.ns-app{display:grid;grid-template-columns:228px minmax(0,1fr)}
.ns-kompakt .ns-app{grid-template-columns:minmax(0,1fr)}
/* Seitenleiste */
.ns-seite{background:var(--ink);color:var(--text-on-ink);padding:18px 12px 20px;font-size:14px}
.ns-logo{display:flex;flex-direction:column;gap:4px;padding:2px 8px 0}
.ns-wortmarke{display:inline-flex;color:var(--weiss);line-height:0}
.ns-wortmarke .wortmarke{height:15px;width:auto}
.ns-wortmarke .m-ai{fill:var(--teal-400)}
.ns-produkt{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-faint-on-ink)}
.ns-mandant{margin:16px 0 4px;border:1px solid var(--linie-ink);border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:4px}
.ns-mandant b{font-weight:500;font-size:13.5px;color:var(--weiss);line-height:1.35}
.ns-mandant span{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint-on-ink)}
.ns-gruppe{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint-on-ink);margin:18px 8px 6px}
.ns-seite ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.ns-punkt{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:6px;line-height:1.3;color:var(--text-on-ink)}
.ns-punkt svg{width:15px;height:15px;flex:none;opacity:.85}
.ns-punkt .ns-wert{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--text-faint-on-ink)}
.ns-punkt.kritisch .ns-wert{color:var(--mint)}
.ns-punkt.aktiv{background:var(--teal);color:var(--weiss)}
.ns-punkt.aktiv .ns-wert{color:var(--weiss)}
/* Hauptfläche */
.ns-haupt{min-width:0;display:flex;flex-direction:column;background:var(--papier)}
.ns-mobil{display:none;align-items:center;gap:10px;background:var(--ink);color:var(--text-on-ink);padding:10px 16px}
.ns-mobil .ns-wortmarke .wortmarke{height:12px}
.ns-mobil-titel{margin-left:auto;font-size:13px;color:var(--weiss)}
.ns-mobil.ns-immer{display:flex}
.ns-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:12px 24px;flex-wrap:wrap;background:var(--weiss);border-bottom:1px solid var(--linie);padding:18px 28px}
.ns-frage{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-700);margin:0}
.ns-titel{font-family:var(--display);font-weight:600;font-size:27px;letter-spacing:-0.015em;line-height:1.15;margin:4px 0 0;color:var(--ink)}
.ns-meta{text-align:right;font-size:14px;color:var(--ink)}
.ns-meta p{margin:0}
.ns-chip{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);border:1px solid var(--linie);border-radius:999px;padding:2px 9px;margin-right:6px;vertical-align:1px}
.ns-stand{margin-top:6px!important;font-family:var(--mono);font-size:12px;color:var(--text-muted)}
.ns-flaeche{padding:24px 28px 28px;background-color:var(--papier)}
.ns-flaeche.mit-rand{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:28px}
.ns-inhalt{min-width:0}
.ns-intro{font-size:16px;line-height:1.55;color:var(--ink);max-width:40em;margin:0 0 18px}
/* Kacheln wie im Cockpit */
.ns-kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);background:var(--weiss)}
.ns-kacheln>div{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;min-width:0;border-left:1px solid var(--linie)}
.ns-kacheln>div:first-child{border-left:0}
.ns-kacheln .mono{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);line-height:1.45}
.ns-kacheln>div>.mono:nth-of-type(2){text-transform:none;letter-spacing:.02em;font-size:11.5px}
.ns-kacheln b{font-family:var(--display);font-weight:600;font-size:34px;letter-spacing:-0.02em;line-height:1.05;color:var(--ink);font-variant-numeric:tabular-nums}
.ns-kacheln b small{font-family:var(--mono);font-weight:400;font-size:13px;letter-spacing:0;color:var(--text-muted)}
.ns-kacheln .marke-status{margin-top:2px}
.ns-kacheln-1{grid-template-columns:1fr}
/* Karten */
.ns-karte{background:var(--weiss);border:1px solid var(--linie);border-radius:10px;padding:20px 24px 22px;margin-top:20px}
.ns-karte-flach{margin-top:14px;padding:6px 18px 10px}
.ns-karte-kopf{margin-bottom:10px}
.ns-karte-titel{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:-0.01em;color:var(--ink);margin:0}
.ns-karte-titel svg{width:16px;height:16px;color:var(--teal);flex:none}
.ns-karte-unter{margin:4px 0 0;font-size:14px;line-height:1.5;color:var(--text-muted);max-width:44em}
.ns-karte .balken{margin-top:4px}
.ns-karte .balken-zeile{grid-template-columns:190px minmax(0,1fr) 48px}
.ns-karte .balken-zeile .mono{font-family:var(--sans);font-size:14.5px;letter-spacing:0;color:var(--ink)}
.ns-karte .balken-spur{height:6px;border-radius:3px;background:var(--linie-weich)}
.ns-karte .balken-wert{background:var(--ink-800);border-radius:3px}
.ns-karte .balken-zeile.hebel .balken-wert{background:var(--ink-800)}
.ns-karte .balken-zeile.kritisch .balken-wert{background:var(--mint)}
.ns-karte .balken-zahl{font-family:var(--mono);font-size:17px;font-weight:500;color:var(--ink);text-align:right}
.ns-karte .plan{margin-top:0}
.ns-karte .plan-zeile:last-child{border-bottom:0}
.ns-karte .abschnitt{margin-top:0}
.ns-karte>.klein:first-of-type{margin-top:0}
.ns-karte .meilensteine{margin-top:6px}
.ns-karte .befunde{margin-top:6px}
/* Rand rechts: Datenstand */
.ns-rand{font-size:13px;line-height:1.5;color:var(--text-muted);border-left:1px solid var(--linie);padding-left:18px}
.ns-rand .ns-gruppe{color:var(--text-muted);margin:0 0 8px}
.ns-rand .ns-gruppe+dl{margin:0 0 20px}
.ns-rand dl div{display:flex;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px solid var(--linie-weich)}
.ns-rand dt{color:var(--text-muted)}
.ns-rand dd{margin:0;font-family:var(--mono);color:var(--ink)}
.ns-rand p:last-child{margin:0}
/* Statuszeile unten */
.ns-fuss{display:flex;justify-content:space-between;gap:8px 20px;flex-wrap:wrap;background:var(--weiss);border-top:1px solid var(--linie);padding:10px 28px;font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--text-muted)}
.ns-fuss .hebel-marke{color:var(--teal-700)}
.ns-fuss a{color:var(--teal-700)}
/* Kompakt */
.ns-kompakt .ns-flaeche{padding:18px 20px 20px}
.ns-kompakt .ns-intro{font-size:15px;margin-bottom:12px}
.ns-kompakt .ns-kacheln b{font-size:30px}
.ns-kompakt .ns-karte .balken-zeile{grid-template-columns:150px minmax(0,1fr) 40px;padding:8px 0}
.ns-kompakt .ns-fuss{padding:9px 20px}
/* Musterbericht: Text über der Fläche */
.ns-abschnitt{display:block}
.ns-einleitung{max-width:760px;margin-bottom:36px}
.ns-einleitung .h2{max-width:18ch}
@media (max-width:1180px){.ns-flaeche.mit-rand{grid-template-columns:minmax(0,1fr)}.ns-rand{display:none}}
@media (max-width:900px){
 .ns-app{grid-template-columns:minmax(0,1fr)}
 .ns-seite{display:none}
 .ns-mobil{display:flex}
 .ns-kopf{padding:14px 16px;flex-direction:column}
 .ns-meta{text-align:left}
 .ns-titel{font-size:22px}
 .ns-flaeche{padding:16px}
 .ns-karte{padding:16px 16px 18px}
 .ns-kacheln{grid-template-columns:repeat(2,minmax(0,1fr))}
 .ns-kacheln>div:nth-child(odd){border-left:0}
 .ns-kacheln>div:nth-child(n+3){border-top:1px solid var(--linie)}
 .ns-kacheln-1{grid-template-columns:1fr}
 .ns-karte .balken-zeile{grid-template-columns:minmax(0,1fr) 40px}
 .ns-fuss{padding:10px 16px}
}
@media (max-width:420px){.ns-kacheln b{font-size:28px}.ns-kacheln{grid-template-columns:1fr}.ns-kacheln>div{border-left:0!important}.ns-kacheln>div+div{border-top:1px solid var(--linie)}}

/* ================================================================ Nachtrag 30.09. abends */
/* S22 · Block „Das Problem“: ein Raster wie .ab-kopf (5:7) */
.problem-raster{margin-top:8px}
.pr-zeile{display:grid;grid-template-columns:5fr 7fr;gap:var(--rinne);padding:24px 0 26px;border-top:1px solid var(--linie);align-items:start}
.pr-zeile.pr-erste{border-top:2px solid var(--ink)}
.pr-etikett .mono{font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.pr-etikett .quelle{margin-top:12px;font-size:13px;line-height:1.5;color:var(--text-muted);max-width:26em}
.pr-zahlen{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--rinne)}
.pr-zahlen .zahl-gross{display:block;font-family:var(--display);font-weight:600;font-size:var(--fs-zahl);letter-spacing:-0.035em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.pr-zahlen p{margin-top:10px;font-size:16px;color:var(--text);max-width:22em}
.pr-folgen{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.pr-folgen li{font-family:var(--display);font-weight:500;font-size:clamp(18px,1.5vw,21px);letter-spacing:-0.01em;line-height:1.3;color:var(--ink);padding-left:18px;position:relative}
.pr-folgen li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--teal)}
@media (max-width:1023px){.pr-zeile{grid-template-columns:1fr;gap:14px}}
@media (max-width:479px){.pr-zahlen{grid-template-columns:1fr;gap:20px}}
/* S20 · Aufwand in Zeilen */
.aufwand-zeilen{display:block}
.aufwand-zeilen>span{display:block}
.aufwand-zeilen>span+span{margin-top:4px}
/* S23 · Schluss ohne Fotos */
.schluss-zeile{font-size:15px;color:var(--text-on-ink);max-width:40em}
.schluss-zeile a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.schluss-zeile .tel{white-space:nowrap}
/* G23 · LinkedIn im Fuß mit vollen Namen, je Name eine Zeile */
.fuss-linkedin a,.fuss-linkedin .fuss-linkedin-titel{display:block;white-space:nowrap}
.fuss-linkedin .fuss-linkedin-titel{color:var(--text-muted)}
.fuss-list .fuss-linkedin,.fuss-linkedin{margin-top:18px!important}
.fuss-linkedin .fuss-linkedin-titel{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:2px}

/* ================================================================ Nachtrag 01.10. */
/* C08 · Selbstcheck: Preis nach Größe und Angebotsanfrage (Ergebnis liegt auf Ink) */
.preis-box{margin-top:20px;border:1px solid var(--linie-ink);border-radius:var(--r-lg);padding:18px 20px 16px;max-width:40em}
.preis-box .preis-kopf{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint-on-ink)}
.preis-liste{margin:12px 0 0;display:grid;gap:0}
.preis-liste>div{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-top:1px solid var(--linie-ink)}
.preis-liste>div:first-child{border-top:0}
.preis-liste dt{color:var(--text-on-ink);font-size:15px}
.preis-liste dd{margin:0;color:var(--weiss);font-family:var(--display);font-weight:600;font-size:17px;white-space:nowrap;font-variant-numeric:tabular-nums}
.preis-box .klein{margin-top:12px;font-size:14px;line-height:1.5;color:var(--text-faint-on-ink)}
.preis-box .klein a,.ergebnis-mail .klein a{color:var(--text-on-ink);text-decoration:underline;text-underline-offset:3px}
@media (max-width:639px){.preis-liste>div{flex-direction:column;gap:2px}.preis-liste dd{white-space:normal}}
.ergebnis-mail .mitschicken{border:1px solid var(--linie-ink);border-radius:var(--r-md,8px);padding:10px 14px;color:var(--text-on-ink);font-size:14px}
.ergebnis-mail .mitschicken summary{cursor:pointer;font-weight:500}
.ergebnis-mail .mitschicken-text{margin:10px 0 0;white-space:pre-wrap;font-family:var(--mono);font-size:12.5px;line-height:1.5;color:var(--text-faint-on-ink);max-height:280px;overflow:auto}
.ergebnis-mail .handlungen{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
.ergebnis-mail .handlungen .textlink{color:var(--text-on-ink)}

/* ================================================================ Nachtrag 01.10.: Startseite kürzer (S25) */
.ergebnis-kurz .klein{margin-top:16px}
.luecke-quelle{max-width:44em}
/* Wer macht was (Ben, 05.10.2026 spät): ersetzt die Wortreihe „Steuern · Priorisieren · …“.
   Fünf Zeilen aus der Navigator-Seite, je Aufgabe ein Satz für uns und einer für Sie. */
.aufteilung{margin-top:56px}
.aufteilung-kopf{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,5fr) minmax(0,4fr);gap:var(--rinne);margin:0;padding:0 0 12px;border-bottom:1px solid var(--ink);font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted)}
.aufteilung li{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,5fr) minmax(0,4fr);gap:var(--rinne);align-items:baseline;padding:22px 0 24px;border-bottom:1px solid var(--linie)}
.aufteilung h3{font-size:var(--fs-h3);line-height:1.25;letter-spacing:-.015em;color:var(--ink)}
.aufteilung li>p{font-size:17px;line-height:1.55;max-width:34em}
.aufteilung .sie{color:var(--text-muted)}
.aufteilung .takt{margin-top:8px;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted)}
@media (max-width:1023px){.aufteilung-kopf{display:none}.aufteilung ul{border-top:1px solid var(--ink)}.aufteilung li{grid-template-columns:minmax(0,1fr);gap:8px;padding:20px 0 22px}.aufteilung h3{margin-bottom:2px}}
@media (max-width:639px){.aufteilung{margin-top:40px}.aufteilung li>p{font-size:16px}}
.loesung-fuss{justify-content:flex-end}
@media (max-width:1023px){.loesung-fuss{justify-content:flex-start}}

/* ================================================================ Nachtrag 01.10. abends: gleiche Höhe in Spalten (G24) */
@media (min-width:1024px){
  /* Die Lösung: Etikett, Überschrift, Text je Spalte auf gemeinsamen Zeilen */
  .kennt{grid-template-rows:repeat(3,auto)}
  .kennt>div{display:grid;grid-template-rows:subgrid;grid-row:span 3;align-content:start}
  /* So läuft es: Eckdaten auf einer Linie */
  .schritte{grid-template-rows:repeat(4,auto)}
  .schritte>li{display:grid;grid-template-rows:subgrid;grid-row:span 4;align-content:start}
  /* Überschrift links neben einer Zeilenliste: auf Höhe der ersten Zeile */
  .split:has(>div>.zeilen:first-child)>div:first-child>.h3:first-child{padding-top:32px}
}
@media (min-width:640px){
  /* Gründer: Foto, Name, Rolle, Absätze, Stationen, LinkedIn je Karte auf gemeinsamen Zeilen */
  .gruender{grid-template-rows:repeat(7,auto)}
  .gruender>div{display:grid;grid-template-rows:subgrid;grid-row:span 7;align-content:start}
  /* Vergleichstabelle: Titel unten bündig auf zwei Zeilen, Unterzeile darunter auf einer Linie */
  .matrix thead th{vertical-align:top}
  .matrix thead th .m-titel{display:flex;align-items:flex-end;min-height:2.4em}
}
@media (min-width:640px){
  /* Preisbeispiele: Etiketten und Titel/Betrag im Kopf je auf einer Grundlinie */
  .beispiel summary{grid-template-rows:auto auto;row-gap:10px}
  .beispiel-kopf,.beispiel-summe{grid-template-rows:subgrid;grid-row:1 / span 2;row-gap:normal;align-items:baseline}
  .beispiel summary>svg{grid-row:1 / span 2;align-self:center}
}
@media (min-width:640px){
  /* Fuß: Leitsatz unter der Wortmarke auf Höhe der ersten Linkzeile */
  .fuss-marke>p:first-of-type{margin-top:0}
}

/* ================================================================
   Durchsicht 02.10.2026 (Ben): Scrollbalken, Bildunterschrift der
   Navigator-Ansichten, gleich große Pillen, Formular ohne Skript.
   ================================================================ */
/* Querlaufende Tabellen am Handy: Scrollbalken passend zum hellen Grund */
.matrix-rahmen,.vergleich-rahmen,.tabellen-rahmen,.wer-was-rahmen,.reiter-liste{scrollbar-width:thin;scrollbar-color:var(--linie-stark) transparent}
.ink .matrix-rahmen,.ink .vergleich-rahmen,.ink .tabellen-rahmen{scrollbar-color:var(--linie-ink) transparent}
a.tel{white-space:nowrap}
.ab-knapp{padding-top:40px}
.wahl-extra{display:contents}
.wahl-extra[hidden]{display:none}
#formular-hinweis{margin-bottom:16px}
/* Navigator-Ansichten: der Rahmen gehört der Ansicht, Herkunft und
   Demo-Marke stehen klein darunter. */
.ns{background:none;border:0;border-radius:0;overflow:visible}
.ns>.ns-app{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r-lg);overflow:hidden}
.ink .ns>.ns-app{border-color:var(--linie-ink)}
.ns-unterschrift{margin-top:10px;font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;line-height:1.5;color:var(--text-muted)}
.ink .ns-unterschrift{color:var(--text-faint-on-ink)}
/* „Beispiel“ steht in der Farbe des Satzes, ohne Rahmen und ohne eigene Farbe (Ben, 05.10.2026 spät, ersetzt Variante B). */
.demo{white-space:nowrap}
.ns-unterschrift a{color:inherit;text-decoration:underline;text-decoration-color:currentColor;text-underline-offset:3px}
/* Was noch nicht buchbar ist: Stern am Punkt, Erklärung als Fußnote */
.stern{color:var(--salbei);font-weight:600;margin-left:2px}
.ink .stern{color:var(--mint)}
.fussnote a{color:var(--teal-700);text-decoration:underline;text-underline-offset:3px}
/* Empfehlungen in der Navigator-Ansicht: gleich große Pillen */
.ns .potenzial{border-radius:999px;padding:4px 12px}
.ns .plan-zeile .potenzial{display:flex;align-items:center;width:100%;max-width:21em;min-height:30px;padding:4px 14px;border-radius:999px}
.ns-karte>.balken,.ns-karte>.plan{border-top:0}
.ns-karte>.balken>.balken-zeile:last-child,.ns-karte>.plan>.plan-zeile:last-child{border-bottom:0}
/* Preistafeln: linksbündig, Kopf als Mono-Etikett, Haarlinien */
table.stufen{border-collapse:collapse;margin-top:16px;font-size:16px}
table.stufen th,table.stufen td{text-align:left;padding:10px 24px 10px 0;border-bottom:1px solid var(--linie-weich);font-variant-numeric:tabular-nums;font-weight:400}
table.stufen thead th{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted);padding-top:0}
table.stufen tbody th{font-weight:500;white-space:nowrap}
table.stufen tbody tr:last-child>*{border-bottom:0}
.ink .klein a:not(.knopf):not(.pfeil),.ink .text a:not(.knopf):not(.pfeil),.ink .hinweis a{color:var(--provenance-on-ink)}
.ns:not(.ns-kompakt) .plan-zeile .potenzial{max-width:none}
@media (max-width:639px){table.stufen{font-size:15px}table.stufen th,table.stufen td{padding-right:12px}}
/* Navigator-Ansichten als Bild (scripts/ansichten.py): Konto unten in der
   Seitenleiste, Info-Knopf an den Kacheln, wie in der App. */
.ns-seite{display:flex;flex-direction:column}
.ns-konto{margin-top:auto;padding-top:18px}
.ns-nutzer{display:flex;gap:10px;align-items:flex-start;margin:18px 8px 0;padding-top:16px;border-top:1px solid var(--linie-ink);font-size:13px;line-height:1.35;color:var(--text-on-ink)}
.ns-nutzer svg{width:15px;height:15px;flex:none;margin-top:2px;opacity:.85}
.ns-nutzer small{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint-on-ink);margin-top:2px}
.ns-abmelden{display:block;margin:14px 8px 0;padding:8px 0;text-align:center;border:1px solid var(--linie-ink);border-radius:6px;font-size:13.5px;color:var(--weiss)}
.ns-kacheln>div>.mono:first-child::after{content:"i";display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;margin-left:6px;border:1px solid var(--linie-stark);border-radius:50%;font-size:9.5px;letter-spacing:0;text-transform:none;vertical-align:1px;color:var(--text-muted)}
/* Auf der Seite: das Bild mit Haarlinie, verkleinert wie ein Bildschirmfoto */
.ns-bild{margin:0}
.ns-bild-datei{display:block;width:100%;height:auto;border:1px solid var(--linie);border-radius:var(--r-lg);background:var(--papier);box-shadow:var(--schatten-bild)}
.ink .ns-bild-datei{border-color:var(--linie-ink);box-shadow:var(--schatten-bild-ink)}

/* Startseite oben mit lesbarem Ausschnitt aus dem Bilanzblatt (Ben, 02.10.2026): Kennzahlen und Reifegrad je Themenfeld, ohne Fensterrahmen der App. */
.held-ausschnitt{grid-template-columns:minmax(0,6fr) minmax(0,6fr)}
@media (max-width:1023px){.held-ausschnitt{grid-template-columns:minmax(0,1fr)}}

/* ---------- Bewegung (Marcel, 05.10.2026, aus dem Artefakt „BEGLAIT Website FINAL“ übernommen) ----------
   Tiefe über Perspektive, Schärfe über Unschärfe, die sich auflöst. Jede Szene läuft
   einmal und endet im Endbild, das im Markup steht. Ohne bewegung.js und bei
   reduzierter Bewegung steht das Endbild sofort. Keine Dauer über 1.000 ms.
   Unschärfe der Überschriften (C) und die Scroll-Färbung des einen Satzes sind
   benannte Ausnahmen in docs/prinzipien.md, Nachtrag 05.10.2026. */


/* ---------- C: Überschriften steigen Wort für Wort aus der Unschärfe ---------- */
/* html.bw setzt bewegung.js sofort im Kopf. Bis die Wörter geteilt sind, bleibt die Überschrift unsichtbar. */
.bw [data-zeile]:not(.zr-geteilt),.bw [data-hell]:not(.zr-geteilt){visibility:hidden}
.zr-w{display:inline-block}
.bw [data-zeile] .zr-w{opacity:0;transform:translateY(.3em);filter:blur(8px)}
.bw [data-zeile].zr-an .zr-w{opacity:1;transform:none;filter:none;transition:opacity 800ms var(--k-zeile) calc(var(--i) * 60ms),transform 1000ms var(--ease-out) calc(var(--i) * 60ms),filter 800ms var(--k-zeile) calc(var(--i) * 60ms)}
/* Ein Satz wird beim Scrollen Wort für Wort dunkel. Nur wo der Browser Scroll-Zeitachsen kann, sonst steht er fertig da. */
@supports (animation-timeline: view()){
  .bw [data-hell] .zr-w{animation:zr-hell linear both;animation-timeline:view();animation-range:entry calc(40% + var(--i) * 6%) cover calc(34% + var(--i) * 2%)}
}
/* Startfarbe mit 4,9:1 auf Weiß, damit der Satz auch vor dem Scrollen lesbar ist. */
@keyframes zr-hell{from{color:var(--text-faint)}to{color:inherit}}

/* Das Bilanzblatt im Held (.vorlage, .vl-*) ist mit Fassung 2, Entscheidung I, entfallen (11.10.2026).
   Es steht weiter im Fächer und im Musterbericht, dort mit eigenen Regeln. */
/* ---------- Filme ---------- */
/* Ein Play-Symbol mitten im Bild, sonst steht nichts um den Film (Ben, 06.10.2026: „wie bei YouTube, nur das Symbol“).
   Ohne Skript bleibt der Knopf verborgen und das Video zeigt seine eigenen Bedienelemente. */
.film{margin:0}
/* Die Bildtexte stehen für Screenreader im Video-Beschrieb (aria-describedby), sichtbar nur im Film selbst.
   Unter dem Film steht der normale Abschnittsabstand: Seit Fassung 2 folgt ein weißer Abschnitt, die Regel
   „ein Abstand statt zwei“ vom 06.10.2026 ist entfernt (Ben, 13.10.2026). */
.film-rahmen{position:relative;aspect-ratio:16/9;max-width:100%;background:var(--ink);border:1px solid var(--linie);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--schatten-bild)}
.film-rahmen video{display:block;width:100%;height:100%;background:var(--ink)}
.film-start{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:76px;height:54px;margin:-27px 0 0 -38px;border-radius:14px;background:var(--ink);color:var(--papier);transition:background-color var(--d-fast) var(--ease)}
.film-start[hidden]{display:none}
.film-start.am-ende{left:auto;top:16px;right:16px;margin:0}
.film-start:hover{background:var(--ink-800)}
.film-start:focus-visible{outline:2px solid var(--papier);outline-offset:3px}
.film-start svg{width:24px;height:24px}
@media (max-width:639px){.film-start{width:60px;height:42px;margin:-21px 0 0 -30px;border-radius:11px}.film-start.am-ende{top:10px;right:10px;margin:0}.film-start svg{width:20px;height:20px}}
.film-klein{margin-top:40px;max-width:760px}

/* ---------- D: Zeitachse mit Maßstabsprung (Startseite, So läuft es) ---------- */
/* Endbild im Markup: 386 Tage, 21 Tage Standortbestimmung, 90-Tage-Plan bis Tag 111, 12 Monate Navigator.
   bewegung.js zeigt erst 30 Tage, Tag für Tag, und zoomt dann auf 120 und auf 386 Tage. */
.za{position:relative;height:118px;margin:8px 0 36px;overflow-x:clip;font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--text-muted)}
.za > *{position:absolute}
.za-linie{left:0;right:0;top:58px;height:1px;background:var(--linie-stark)}
.za-seg{top:57px;height:3px;background:var(--ink);transform-origin:left}
.za-seg.duenn{top:57px;height:2px;background:var(--teal)}
.za-tag{top:54px;width:1px;height:9px;background:var(--ink);opacity:.3}
.za-tick{top:52px;width:1px;height:13px;background:var(--linie-stark)}
.za-tick.gross{top:44px;height:29px;background:var(--ink)}
.za-seite{top:30px;width:13px;height:17px;margin-left:5px;border:1px solid var(--ink);border-radius:1px;background:var(--weiss);transform-origin:50% 100%}
.za-seite::before,.za-seite::after{content:"";position:absolute;left:2px;right:2px;height:1px;background:var(--linie-stark)}
.za-seite::before{top:4px}.za-seite::after{top:8px}
.za-ober,.za-unter{white-space:nowrap}
.za-ober{top:20px}
.za-unter{top:78px}
.za-ober b,.za-unter b{font-weight:500;color:var(--ink)}
.za-rechts{transform:translateX(-100%)}
.za-mitte{transform:translateX(-50%)}
.za-ober.nach-seite{margin-left:24px}
/* Phasen, aufsteigend gesetzt: p1 Tage, p2 Plan, p3 Navigator, p4 Endbild. Was später kommt, wartet unsichtbar. */
.za.za-lauf [data-ab]{opacity:0;transition:opacity 380ms var(--ease-out) calc(var(--i,0) * 30ms)}
.za.za-lauf .za-seg{transform:scaleX(0)}
.za.za-p1 [data-ab="1"],.za.za-p2 [data-ab="2"],.za.za-p3 [data-ab="3"],.za.za-p4 [data-ab="4"]{opacity:1}
.za.za-p1 .za-seg[data-ab="1"],.za.za-p2 .za-seg[data-ab="2"]{transform:none;transition:transform var(--za-d,700ms) var(--ease-out)}
.za.za-p1 .za-tag{opacity:.8}
.za.za-p3 .za-tag{opacity:.3}
.za.za-lauf .za-seite{transform:rotateX(90deg)}
.za.za-seite-an .za-seite{transform:none;transition:transform 520ms var(--ease-out),opacity 200ms}
@media (max-width:767px){
  .za{height:150px}
  .za-ober.mitte{top:0}
  /* Die Beschriftung über Fahrplan und Plan ist länger als das Stück Achse darunter: am Handy links bündig */
  .za-ober.mitte.za-mitte{left:0!important;transform:none}
  .za-unter.mitte{top:100px}
  .za-tick.monat{display:none}
  .za-ober.nach-seite{margin-left:0;top:0}
  /* Am Handy liegt das Blatt im Endbild zu nah an „3 Wochen“, es geht beim Zoom wieder weg */
  .za:not(.za-lauf) .za-seite,.za.za-p3 .za-seite{opacity:0;transition:opacity 300ms var(--ease-out)}
}

/* ---------- E: Der Bericht fächert auf (Startseite, Das Ergebnis) ---------- */
.fach{margin:0}
.fach-stapel{position:relative;aspect-ratio:16/11.4;max-width:100%;perspective:1800px}
.fach-seite{position:absolute;left:0;bottom:3%;width:86%;aspect-ratio:16/10;margin:0;border:1px solid var(--linie);border-radius:var(--r-lg);background:var(--weiss);overflow:hidden;box-shadow:var(--schatten-bild);transform-origin:10% 100%;transition:transform 900ms var(--ease-out),opacity 500ms var(--ease-out)}
.js .fach-seite{cursor:pointer}
.fach-seite img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.fach-seite[data-lage="0"]{z-index:3;transform:none}
.fach-seite[data-lage="1"]{z-index:2;transform:translate(8%,-11%) rotate(2deg)}
.fach-seite[data-lage="2"]{z-index:1;transform:translate(15%,-22%) rotate(4deg)}
.fach.f-bereit .fach-seite{transform:rotateX(12deg) translateY(18px) scale(.97);transition:none}
.fach.f-bereit .fach-seite:not([data-lage="0"]){opacity:0}
.fach-reiter{display:none;flex-wrap:wrap;gap:4px 20px;margin-top:16px}
.js .fach-reiter{display:flex}
.fach-reiter button{min-height:36px;padding:6px 0;border:0;border-bottom:1px solid transparent;background:none;font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);cursor:pointer}
.fach-reiter button:hover{color:var(--ink)}
.fach-reiter button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--ink)}
.fach-reiter button:focus-visible{outline:2px solid var(--fokus);outline-offset:2px}

/* ---------- Navigator: sechs Eingaben laufen in ein Bild ---------- */
.sammeln{position:relative;height:72px;margin-top:-1px}
.sammeln svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sammeln path{fill:none;stroke:var(--linie-stark);stroke-width:1;vector-effect:non-scaling-stroke}
.sammeln-ziel{display:flex;justify-content:center}
.sammeln-ziel span{display:inline-flex;align-items:center;gap:10px;min-height:36px;padding:0 16px;border:1px solid var(--ink);border-radius:999px;background:var(--weiss);font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.sammeln-ziel span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--teal)}
.sammeln.s-bereit path{stroke-dasharray:1;stroke-dashoffset:1}
.sammeln.s-bereit + .sammeln-ziel span{opacity:0;transform:translateY(6px)}
.sammeln.s-laeuft path{stroke-dashoffset:0;transition:stroke-dashoffset 900ms var(--ease-out)}
.sammeln.s-laeuft path:nth-child(2){transition-delay:120ms}
.sammeln.s-laeuft path:nth-child(3){transition-delay:240ms}
.sammeln.s-laeuft + .sammeln-ziel span{opacity:1;transform:none;transition:opacity 400ms var(--ease-out) 900ms,transform 400ms var(--ease-out) 900ms}
@media (max-width:1023px){.sammeln path.seite{display:none}}

/* ---------- G: Standortbestimmung, Führung gegen Team ---------- */
.sichten{max-width:640px;margin:32px 0 8px}
.sichten-kopf{margin:0 0 6px}
.sichten-zeile{display:grid;grid-template-columns:76px minmax(0,1fr) 30px;gap:14px;align-items:center;padding:7px 0}
.sichten-zeile .mono{font-size:12px}
.sichten-zeile b{font-family:var(--display);font-weight:600;font-size:20px;line-height:1;text-align:right;font-variant-numeric:tabular-nums}
.sichten-spur{position:relative;height:6px;border-radius:3px;background:var(--linie-weich);overflow:hidden}
.sichten-spur i{display:block;height:6px;border-radius:3px;width:var(--w);background:var(--ink)}
.sichten-zeile.team .sichten-spur i{background:var(--text-muted)}
.sichten-abstand{position:relative;height:30px;margin:0 44px 0 90px}
.sichten-abstand i{position:absolute;top:0;left:var(--a);width:calc(var(--b) - var(--a));height:9px;border:1px solid var(--salbei);border-top:0}
.sichten-abstand span{position:absolute;top:13px;left:var(--a);font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.04em;color:var(--salbei);white-space:nowrap}
.sichten.g-bereit .sichten-spur i{width:0}
.sichten.g-laeuft .sichten-spur i{width:var(--w);transition:width 900ms var(--ease-out)}
.sichten.g-laeuft .sichten-zeile.team .sichten-spur i{transition-delay:220ms}
.sichten.g-bereit .sichten-abstand{opacity:0;transform:translateY(-4px)}
.sichten.g-laeuft .sichten-abstand{opacity:1;transform:none;transition:opacity 400ms var(--ease-out) 950ms,transform 400ms var(--ease-out) 950ms}
.feld-balken{height:4px;margin:-8px 0 14px;border-radius:2px;background:var(--linie-weich);overflow:hidden;max-width:420px}
.feld-balken i{display:block;height:4px;border-radius:2px;width:var(--w);background:var(--ink)}
.feld-balken.schwach i{background:var(--mint)}
.feld-abstand{margin:-6px 0 16px;font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.04em;color:var(--salbei)}
.js [data-reiter] .reiter-feld .feld-balken i{transition:width 760ms var(--ease-out)}
.js [data-reiter] .reiter-feld:not(.an) .feld-balken i{width:0;transition:none}

@media (prefers-reduced-motion:reduce){
  .bb *,.za *,.sammeln *,.feld-balken *,.fach *,.sichten *{transition:none!important;animation:none!important}
}

/* ---------- Übergänge zwischen Seiten ---------- */
/* Alle Seiten nehmen teil (View Transitions zwischen Dokumenten, Chrome und Edge ab 126,
   Safari ab 18.2). Ohne Unterstützung wechselt die Seite wie immer. Welche Art Übergang
   läuft, setzt site.js als Typ am Übergang:
   in-werkbank  von einer hellen Seite zur dunklen Produktseite: die Werkbank steigt von unten
                über die helle Seite, die helle tritt leicht zurück
   aus-werkbank von der Produktseite zu einer hellen Seite: die dunkle zieht sich nach oben weg
   band         Startseite zur Werkbank, wenn das Band im Bild ist: Regeln in produkt.css
   ohne Typ     zwischen zwei hellen (oder zwei dunklen) Seiten: kurzes, leises Überblenden
   Die Typen gelten nur im neuen Dokument, dort laufen die Animationen. Bei reduzierter
   Bewegung läuft kein Übergang. */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}
html{--vt-kurve:cubic-bezier(.7,0,.2,1)}
/* Ohne Typ: Überblenden in 200 ms, die Kopfzeile bleibt dabei ruhig stehen */
::view-transition-group(root),::view-transition-group(kopf){animation-duration:200ms}
/* Die Kopfzeile bekommt ihren Namen nur, solange ein Übergang läuft. Sie liegt dann über der
   Seite und wechselt für sich zwischen hell und dunkel, statt unter dem Vorhang zu stehen. */
html:active-view-transition .kopf{view-transition-name:kopf}

/* Hinein: Die dunkle Seite steigt von unten, die helle tritt zurück auf dunklen Grund */
html:active-view-transition-type(in-werkbank)::view-transition{background:var(--produkt-grund)}
html:active-view-transition-type(in-werkbank)::view-transition-group(root),
html:active-view-transition-type(in-werkbank)::view-transition-group(kopf){animation-duration:650ms;animation-timing-function:var(--vt-kurve)}
html:active-view-transition-type(in-werkbank)::view-transition-old(root){animation:vt-zurueck 650ms var(--vt-kurve) both;mix-blend-mode:normal}
html:active-view-transition-type(in-werkbank)::view-transition-new(root){animation:vt-vorhang-auf 650ms var(--vt-kurve) both;mix-blend-mode:normal}

/* Hinaus: Die dunkle Seite zieht sich nach oben weg und gibt die helle frei */
html:active-view-transition-type(aus-werkbank)::view-transition{background:var(--papier)}
html:active-view-transition-type(aus-werkbank)::view-transition-group(root),
html:active-view-transition-type(aus-werkbank)::view-transition-group(kopf){animation-duration:600ms;animation-timing-function:var(--vt-kurve)}
html:active-view-transition-type(aus-werkbank)::view-transition-old(root){z-index:2;animation:vt-vorhang-zu 600ms var(--vt-kurve) both;mix-blend-mode:normal}
html:active-view-transition-type(aus-werkbank)::view-transition-new(root){animation:vt-vor 600ms var(--vt-kurve) both;mix-blend-mode:normal}

@keyframes vt-vorhang-auf{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0)}}
@keyframes vt-vorhang-zu{from{clip-path:inset(0)}to{clip-path:inset(0 0 100% 0)}}
@keyframes vt-zurueck{to{transform:scale(.97);opacity:.55}}
@keyframes vt-vor{from{transform:scale(.98);opacity:0}}

/* Wissen: Übersicht und Artikel (06.10.2026). Lesen auf Papier, Zeilen-Form, Haarlinien. */
.art-meta{margin-top:20px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--text-muted)}
.artikel{max-width:40em}
.artikel>h2{font-family:var(--display);font-weight:500;font-size:28px;line-height:1.2;letter-spacing:-0.02em;margin-top:56px}
.artikel>h2:first-child{margin-top:0}
.artikel>h3{font-family:var(--display);font-weight:500;font-size:20px;line-height:1.3;margin-top:32px}
.artikel p,.artikel ul,.artikel ol{margin-top:14px}
.artikel ul,.artikel ol{padding-left:22px}
.artikel ul{list-style:disc}
.artikel ol{list-style:decimal}
.artikel li+li{margin-top:8px}
.artikel a{color:var(--teal);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.artikel q{quotes:"„" "“"}
.art-tabelle{min-width:600px}
.art-tabelle tbody th{white-space:normal;font-size:17px}
.art-unten{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--rinne);align-items:start}
.quellen{margin-top:16px;padding-left:20px;list-style:decimal;font-size:15px;color:var(--text-muted)}
.quellen li+li{margin-top:10px}
.quellen a{color:var(--teal);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;overflow-wrap:anywhere}
.autor{display:grid;grid-template-columns:96px minmax(0,1fr);gap:20px;padding-top:20px;border-top:1px solid var(--linie)}
.autor img{width:96px;height:120px;object-fit:cover;object-position:50% 28%;border-radius:var(--r-md)}
.autor-name{font-family:var(--display);font-weight:500;font-size:20px}
.autor .rolle{margin-top:4px;font-size:13px;color:var(--teal)}
.autor .klein{margin-top:8px}
.autor a{color:var(--teal);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.art-zeile{margin-top:10px;font-size:13px}
.zeile-kern h2 a:not(.knopf):not(.pfeil){color:inherit;text-decoration:none}
.zeile-kern h2 a:not(.knopf):not(.pfeil):hover{color:var(--teal);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
@media (max-width:1023px){.art-unten{grid-template-columns:1fr}}

/* ---------- Fassung 2 „aufgeräumt“ (Marcel/Claude, 08.10.2026) ----------
   Marcel, 07. und 08.10.2026: die Seite ruhiger und aus einem Guss, angelehnt an aiio.de,
   Inhalt unverändert, Bewegungen bleiben. Gestaltung Claude. Nur Stil, nur Token. Jeder
   Block trägt den Buchstaben seiner Entscheidung im Vorschlag. Gilt auf allen Seiten. */

/* A · Ein Grund. Leseabschnitte auf Papier, getrennt durch Luft statt durch Farbe und Linie. */
:root{--ab:112px}
@media (max-width:1023px){:root{--ab:80px}}
@media (max-width:639px){:root{--ab:56px}}
section.weiss{background:var(--papier)}
section.linie-oben:not(.ink){border-top:0}
.band.papier{border-bottom:0}
section.weiss .zellen>*{background:var(--papier)}
section.papier .h2 .ai,section.weiss .h2 .ai{color:var(--teal)}

/* B · Überschrift und Vorspann untereinander, links eine Kante, rechts Luft. */
.ab-kopf{display:block}
.ab-kopf .h2{max-width:24ch}
.ab-kopf .lead{margin-top:20px;max-width:36em}

/* D · Mono nur für Herkunft und Daten. Etiketten, Takt, Spaltenköpfe und Krümel in Plex Sans. */
main p.mono.muted:not(.herkunft),.belege span,.aufteilung-kopf,.aufteilung .takt,.pr-etikett .mono,.schritte-zusatz .mono,
.matrix thead th small,.schritte .nr,.kennt .nr,.pfad .nr,.zeile-etikett,.zeile-preis small,.pfad .preis small,
.ablauf thead th,.wer-was thead th,table.vergleich thead th,.krumen,.fuss-titel,.direkt .mono,.feld-zeile .mono,.eingaben .nr{
  font-family:var(--sans);font-size:14px;font-weight:500;letter-spacing:0;text-transform:none}
.belege span{font-weight:400;font-size:15px;color:var(--text-muted-on-ink)}
.matrix thead th small,.aufteilung .takt{font-weight:400}
.krumen{font-weight:400}

/* E · Kästen, Füllungen und Chips raus. Haarlinien nur, wo Zeilen eine Tabelle sind.
   Die eigene Spalte und Zeile im Vergleich behalten ihr Grün (Marcel, 08.10.2026). */
.kennt{background:none;border:0;column-gap:calc(var(--rinne) * 2);row-gap:0}
.kennt>div{background:none;padding:0}
.schritte{border-top:1px solid var(--linie)}
.schritte>li+li{border-left:0}
.schritte .eckdaten{font-family:var(--sans);font-size:15px;letter-spacing:0;color:var(--text-muted)}
.schritte .eckdaten span{border:0;border-radius:0;padding:0;background:none}
.schritte-zusatz{border-top:0;padding-top:0}
.belege{border-bottom:0}
.belege>div+div{border-left:0}
.pr-zeile.pr-erste{border-top:1px solid var(--linie)}
.matrix-rahmen{border-top:0}
.matrix td.uns{color:var(--text)}
.tabellen-rahmen{border:0;border-top:1px solid var(--linie);background:none}
.ablauf th:first-child,.ablauf td:first-child{padding-left:0}
.wer-was td.nav{background:none;padding-left:0}
.pfad{background:none;border:0;border-top:1px solid var(--linie);gap:0 var(--rinne)}
.pfad>div{background:none;padding:20px 0 0}
.gruender.hell{background:none;gap:calc(var(--rinne) * 2)}
.gruender.hell>div{background:none;padding:0}

/* F · Ruhigere Schrift: Überschriften eine Stufe kleiner, wie in docs/prinzipien.md vorgesehen. */
:root{--fs-h1:56px;--fs-h2:40px;--fs-lead:19px;--fs-schluss:60px}
@media (max-width:1023px){:root{--fs-h1:44px;--fs-h2:34px;--fs-schluss:48px}}
@media (max-width:639px){:root{--fs-h1:34px;--fs-h2:28px;--fs-lead:17px;--fs-schluss:34px}}
.held-neu .held-titel{font-size:clamp(42px,5.6vw,72px)}
.fragen summary{font-size:20px}
@media (max-width:639px){.fragen summary{font-size:18px}}

/* G · Held: Vorspann mit einem hellen Kernsatz, der Rest tritt zurück. */
.held-neu .lead{color:var(--text-muted-on-ink)}
.held-neu .lead .betont{color:var(--weiss)}
.held-neu .belege{margin-top:48px}

/* H · Vergleichstabellen bleiben am Handy Tabellen: seitlich wischen, die erste Spalte steht. */
.wisch{display:none}
.vergleich-rahmen,.tabellen-rahmen,.wer-was-rahmen{position:relative}
@media (max-width:767px){
  .wisch{display:block;margin:0 0 10px;font-size:14px;color:var(--text-muted)}
  .wisch::after{content:" \2192"}
  .vergleich-rahmen table.vergleich{display:table;min-width:760px;border-collapse:separate;border-spacing:0}
  .vergleich-rahmen table.vergleich thead{display:table-header-group}
  .vergleich-rahmen table.vergleich tbody{display:table-row-group}
  .vergleich-rahmen table.vergleich tr,.vergleich-rahmen table.vergleich tr.uns{display:table-row;padding:0;background:none}
  .vergleich-rahmen table.vergleich th,.vergleich-rahmen table.vergleich td,.vergleich-rahmen table.vergleich tbody th,.vergleich-rahmen table.vergleich td:last-child{display:table-cell;width:auto;padding:14px 16px 14px 0;border:0;border-bottom:1px solid var(--linie)}
  .vergleich-rahmen table.vergleich td::before{content:none}
  .vergleich-rahmen table.vergleich tbody th{font-size:16px}
  .vergleich-rahmen table.vergleich tr.uns th,.vergleich-rahmen table.vergleich tr.uns td{background:var(--teal-50);color:var(--text)}
  .vergleich-rahmen table.vergleich tr.uns th{padding-left:12px}
}
@media (max-width:639px){
  .matrix-rahmen.matrix-5 .matrix{display:table;min-width:820px;border-collapse:separate;border-spacing:0}
  .matrix-rahmen .matrix thead{display:table-header-group}
  .matrix-rahmen .matrix tbody{display:table-row-group}
  .matrix-rahmen .matrix tr{display:table-row}
  .matrix-rahmen.matrix-5 .matrix th,.matrix-rahmen.matrix-5 .matrix td,.matrix-rahmen .matrix thead th:first-child,.matrix-rahmen .matrix tbody th{display:table-cell;max-width:none;padding:12px 14px 12px 0;border-bottom:1px solid var(--linie);font-size:14px}
  .matrix-rahmen.matrix-5 .matrix thead th{font-size:16px;vertical-align:bottom}
  .matrix-rahmen.matrix-5 .matrix .uns{padding-left:12px;padding-right:12px}
  .matrix-rahmen .matrix td::before{content:none}
  .wer-was-rahmen .wer-was{display:table;min-width:760px;border-collapse:separate;border-spacing:0}
  .wer-was-rahmen .wer-was thead{display:table-header-group}
  .wer-was-rahmen .wer-was tbody{display:table-row-group}
  .wer-was-rahmen .wer-was tr{display:table-row;padding:0}
  .wer-was-rahmen .wer-was th,.wer-was-rahmen .wer-was td,.wer-was-rahmen .wer-was td.nav{display:table-cell;padding:12px 14px 12px 0;margin:0;border:0;border-bottom:1px solid var(--linie);font-size:14px}
  .wer-was-rahmen .wer-was td::before{content:none}
  .tabellen-rahmen .ablauf{border-collapse:separate;border-spacing:0}
}
@media (max-width:767px){
  .matrix-rahmen .matrix tbody th,.matrix-rahmen .matrix thead th:first-child,
  .wer-was-rahmen .wer-was tbody th,.wer-was-rahmen .wer-was thead th:first-child,
  .vergleich-rahmen table.vergleich tbody th,.vergleich-rahmen table.vergleich thead th:first-child,
  .tabellen-rahmen .ablauf tbody th,.tabellen-rahmen .ablauf thead th:first-child{
    position:sticky;left:0;z-index:1;background:var(--papier);border-right:1px solid var(--linie);padding-right:12px;white-space:normal;min-width:7em;max-width:8.5em}
}

/* I · Held der Startseite: Blick in den Navigator statt Bilanzblatt. Ein Fenster, leicht gekippt, läuft
   rechts aus dem Bild. Bewegung in bewegung.js: einmal Ankommen und Kamerafahrt, drei Ansichten, Ende
   auf dem Cockpit. Ohne Skript und bei reduzierter Bewegung steht das Cockpit. */
.held-blick{min-width:0}
.navblick{margin:0}
.nb-fenster{position:relative;width:132%;aspect-ratio:16/10;overflow:hidden;border:1px solid var(--linie-ink);border-radius:10px;background:var(--ink-800)}
.nb-bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:0 0;opacity:0;transition:opacity 900ms var(--ease)}
.nb-bild.ist-aktiv{opacity:1}
.nb-leiste{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin-top:22px;font-size:14px;color:var(--text-muted-on-ink)}
.nb-reiter{display:flex;flex-wrap:wrap;gap:4px;margin-left:-10px}
.nb-reiter[hidden]{display:none}
.nb-reiter button{padding:6px 10px;border-radius:var(--r-md);font-size:14px;color:var(--text-muted-on-ink);transition:color var(--d-fast) var(--ease),background-color var(--d-fast) var(--ease)}
.nb-reiter button:hover{color:var(--weiss)}
.nb-reiter button[aria-pressed="true"]{color:var(--weiss);background:var(--ink-800)}
.ink .nb-reiter button:focus-visible{outline-color:var(--fokus-on-ink)}
@media (max-width:1023px){.nb-fenster{width:100%}.held-blick{margin-top:8px}}
@media (prefers-reduced-motion:reduce){.nb-bild{transition:none}}

/* J · Schluss: Rückruf am Ende, mit den beiden Gründern im Bild. */
.schluss-rueckruf{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:calc(var(--rinne) * 2);margin-top:calc(var(--ab) * .75);padding-top:calc(var(--ab) * .5);border-top:1px solid var(--linie-ink);align-items:start}
.schluss-rueckruf .h3{color:var(--papier)}
.schluss-text{margin-top:16px;color:var(--text-on-ink);max-width:30em}
.schluss-rueckruf .schluss-zeile{margin-top:16px}
.schluss-gruender{display:flex;flex-wrap:wrap;gap:16px 28px;margin-top:20px}
.schluss-gruender figure{margin:0;display:flex;align-items:center;gap:12px}
.schluss-gruender img{width:56px;height:56px;border-radius:var(--r-md);object-fit:cover}
.schluss-gruender figcaption{display:flex;flex-direction:column;font-size:14px;line-height:1.35;color:var(--text-muted-on-ink)}
.schluss-gruender b{font-size:15px;font-weight:500;color:var(--weiss)}
.schluss .direkt{margin-top:24px;padding-top:0;border-top:0;color:var(--text-on-ink)}
.schluss .direkt .muted{color:var(--text-muted-on-ink)}
.schluss .direkt a{color:var(--weiss);text-decoration-color:var(--text-faint-on-ink)}
.schluss .formular{gap:16px}
.schluss .feld label{color:var(--text-on-ink)}
.schluss .feld small{color:var(--text-muted-on-ink)}
.schluss .feld input{background:var(--ink-800);border-color:var(--text-faint-on-ink);color:var(--weiss)}
.schluss .feld input:focus{border-color:var(--teal-400);box-shadow:0 0 0 1px var(--teal-400)}
.schluss .feld .feld-fehler{color:var(--weiss)}
.schluss .formular .klein{color:var(--text-muted-on-ink)}
.schluss .formular a{color:var(--provenance-on-ink)}
@media (max-width:1023px){.schluss-rueckruf{grid-template-columns:minmax(0,1fr)}}

/* K · Fußzeile: eine Zeile. Register und Gericht stehen im Impressum. */
.fuss-zeile{font-size:14px}

/* ---------- Wissen: Grafik am Anfang jedes Artikels (Marcel/Claude, 11.10.2026) ----------
   Aus wissen.css des Artefakts übernommen (BEGLAIT-28). Nur Token aus dem :root-Block, keine eigenen Farben.
   Das Blatt trägt --schatten-bild und eine leichte Drehung wie die Berichtsseiten im Fächer der Startseite
   (.fach-seite): ein Papierblatt, kein Schmuck an einer Fläche.
   Zwei Formen: .bk für Balken aus belegten Zahlen, .blatt für eine Skizze. Beide sind echtes HTML,
   damit Text am Handy lesbar bleibt und Suchmaschinen und KI-Assistenten die Werte lesen. */

.art-bild{margin:0 0 8px;max-width:40em}
.art-bild figcaption{margin-top:14px;font-size:14px;line-height:1.5;color:var(--text-muted)}
.art-bild figcaption b{color:var(--text);font-weight:500}

/* ---------- Balken (.bk) ---------- */
/* Eine Reihe, eine Farbe. Skala 0 bis 50 %, Werte in eigener Spalte rechts, damit die Bezugslinie
   für „alle“ keinen Wert kreuzt. Selektoren mit .art-bild, weil .artikel Listen und Absätze vorgibt. */
.art-bild .bk{--bk-max:50;padding:24px 0 20px;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.art-bild p{margin:0}
.art-bild .bk-titel{font-family:var(--display);font-weight:500;font-size:20px;line-height:1.3;letter-spacing:-0.01em;text-wrap:balance}
.art-bild .bk-unter{margin-top:6px;font-size:15px;color:var(--text-muted)}
.art-bild .bk-bezug{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:14px;color:var(--text-muted)}
.art-bild .bk-bezug::before{content:"";flex:none;width:2px;height:18px;background:var(--ink)}
.art-bild .bk-gruppe{margin-top:18px}
.art-bild .bk-kopf{font-size:14px;font-weight:500;color:var(--text-muted)}
.art-bild .bk-liste{list-style:none;margin:6px 0 0;padding:0}
.art-bild .bk-liste li+li{margin-top:0}
.art-bild .bk-zeile{display:grid;grid-template-columns:minmax(0,13em) minmax(0,1fr) 4.5em;align-items:center;gap:4px 16px;padding:5px 0}
.art-bild .bk-name{font-size:15px;line-height:1.35}
.art-bild .bk-spur{position:relative;display:block;height:22px}
.art-bild .bk-spur::after{content:"";position:absolute;top:-5px;bottom:-5px;left:calc(var(--bk-bezug) / var(--bk-max) * 100%);width:2px;margin-left:-1px;background:var(--ink)}
.art-bild .bk-balken{position:absolute;left:0;top:2px;width:calc(var(--w) / var(--bk-max) * 100%);height:18px;background:var(--teal);border-radius:0 4px 4px 0}
.art-bild .bk-wert{font-size:15px;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
@media (max-width:600px){
  .art-bild .bk-zeile{grid-template-columns:minmax(0,1fr) 4.5em;gap:2px 12px;padding:6px 0}
  .art-bild .bk-name{grid-column:1 / -1}
}

/* ---------- Skizze Blatt (.blatt) ---------- */
/* Ein Nachweis auf einer Seite: weißes Blatt, leicht gedreht, fünf Bausteine mit Haken.
   Alles unter .art-bild: .blatt, .blatt-kopf und .blatt-fuss gibt es auch auf Preise und Kontakt (Zeile „Blatt“ oben). */
.art-bild .blatt-buehne{padding:28px 0 20px;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.art-bild .blatt{max-width:30em;margin:0 auto;padding:26px 28px 22px;background:var(--weiss);border-radius:var(--r-md);box-shadow:var(--schatten-bild);transform:rotate(-1.2deg)}
.art-bild .blatt-kopf{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--text-muted);padding-bottom:12px;border-bottom:1px solid var(--linie)}
.art-bild .blatt-titel{margin-top:14px;font-family:var(--display);font-weight:500;font-size:20px;line-height:1.25;color:var(--ink)}
.art-bild .blatt-zeilen{list-style:none;margin:12px 0 0;padding:0}
.art-bild .blatt-zeilen li+li{margin-top:0}
.art-bild .blatt-zeilen li:last-child{border-bottom:0}
.art-bild .blatt-zeilen li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:4px 10px;align-items:start;padding:9px 0;border-bottom:1px solid var(--linie-weich)}
.art-bild .blatt-zeilen svg{width:18px;height:18px;margin-top:2px;color:var(--teal)}
.art-bild .blatt-zeilen b{font-weight:500;font-size:15px;color:var(--text)}
.art-bild .blatt-strich{grid-column:2;display:block;height:6px;border-radius:3px;background:var(--linie-weich)}
.art-bild .blatt-strich.kurz{width:62%}
.art-bild .blatt-strich.mittel{width:80%}
.art-bild .blatt-fuss{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:14px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--text-muted)}
.art-bild .blatt-fuss span:last-child{color:var(--teal)}
@media (max-width:600px){
  .art-bild .blatt{padding:20px 18px 18px;transform:rotate(-0.6deg)}
}

/* ---------- Nach der Flächenprüfung (11.10.2026, BEGLAIT-28) ----------
   Stellen, an denen B, D und die Tabellen am Handy noch nicht griffen. Nur Stil, nur Token. */

/* B · Ein Abschnittskopf, dem nichts mehr folgt, trägt keinen Abstand nach unten, sonst wächst der Abschnitt (A). */
.ab-kopf:last-child{margin-bottom:0}

/* D · Weitere Beschriftungen in Plex Sans: Kopf der Preistafeln, Kopfzeile und Blattkopf der drei Beispiele,
   Rolle und Stationen der Gründer, Führung und Team in der Gegenüberstellung der Sichten, Rolle im Autorenkasten
   und der Zustand „Warteliste offen“ im Band der KI-Werkbank. Mono bleibt für Herkunft, Zeitachse, Reiter und
   Messwerte, etwa „Abstand 16 Punkte“ und die Metazeile im Artikelkopf. */
table.stufen thead th,.beispiel-kopf .mono,.beispiel-summe .mono,.beispiel .blatt-kopf .mono,
.gruender .rolle,.gr-stationen .mono,.sichten-zeile .mono,.autor .rolle,.p-band-innen .p-etikett{
  font-family:var(--sans);font-size:14px;font-weight:500;letter-spacing:0;text-transform:none}

/* Wissen · Daten-Ampel (.art-stapel) unter 640 px gestapelt: je Stufe der Name als Kopf, darunter die beiden Spalten
   mit ihrem Namen aus data-k als Beschriftung, wie die gestapelten Tabellen vor H. Am Desktop bleibt die Tabelle.
   Bis 767 px ohne Mindestbreite, sonst wischt sie bei 640 bis 663 px ohne Hinweis um 24 px. */
@media (max-width:767px){.tabellen-rahmen .art-stapel{min-width:0}}
@media (max-width:639px){
  .tabellen-rahmen .art-stapel,.art-stapel tbody,.art-stapel tr,.tabellen-rahmen .art-stapel tbody th,.art-stapel td{display:block;min-width:0;max-width:none}
  .art-stapel thead{display:none}
  .art-stapel tbody tr{padding:16px 0;border-bottom:1px solid var(--linie)}
  .tabellen-rahmen .art-stapel tbody th,.art-stapel td{position:static;padding:4px 0;border:0;background:none}
  .art-stapel td::before{content:attr(data-k);display:block;margin-top:8px;font-size:14px;font-weight:500;color:var(--text-muted)}
}

/* ---------- Wissen: Abbildungen und Ausschnitte (Vorschlag Ben/Claude, 11.10.2026, BEGLAIT-28) ----------
   Vorgabe docs/plaene/grafiken-wissen_2026-10-11.md, Fassung 2. Echtes HTML, nur Token, kein Bild, kein Skript,
   keine Bewegung. .bk und .blatt der Leitgrafiken bleiben unverändert, der Ausschnitt nutzt eigene Klassen.
   .abb          gemeinsame Form einer Abbildung im Artikel, Maße wie .bk: Titel, Untertitel, Quelle.
   .anteil       Balken 0 bis 100 % mit Aufriss. Der zweite Balken ist so breit wie der gefüllte Teil des ersten,
                 gerechnet aus --a, sichtbar stehen nur die beiden Werte aus dem Artikel.
   .ampel-marke  Kreis vor Grün, Gelb, Rot in der Daten-Ampel. Das Wort trägt die Aussage (Verbotsliste 8).
   .ausschnitt   Leitgrafik klein in der Übersicht /wissen/, Arten balken und blatt, ab 1200 px dritte Spalte.
   Gerechnet nach WCAG auf Papier: Teal 5,70:1, Teal gegen die Spur (--linie-weich) 4,95:1, Ink 15,44:1,
   leiser Text 5,12:1, Kreise ok 5,73:1, warn 6,28:1, risk 6,60:1. Spur und Führung sind Hintergrund. */

/* Abbildung im Artikel: Haarlinie oben und unten wie .bk, Quelle darunter. */
.abb{margin:40px 0 0;max-width:40em}
.artikel .abb+p{margin-top:32px}
.abb p{margin:0}
.abb-koerper{padding:24px 0 20px;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.abb-titel{font-family:var(--display);font-weight:500;font-size:20px;line-height:1.3;letter-spacing:-0.01em;text-wrap:balance}
.abb-unter{margin-top:6px;font-size:15px;line-height:1.5;color:var(--text-muted)}
.abb-unter span{display:inline-block}
.abb figcaption{margin-top:14px;font-size:14px;line-height:1.5;color:var(--text-muted)}
.abb figcaption b{color:var(--text);font-weight:500}

/* Anteil mit Aufriss: Wert und Satz über dem ersten Balken, unter dem zweiten. Die Führung verbindet die Enden
   des gefüllten Teils mit dem zweiten Balken und liegt unter ihm, damit sie an seiner gerundeten Ecke anliegt.
   Rundung nur am Ende des Ganzen, die Füllung ist ein Teil und bleibt eckig, die Nullseite immer. */
.anteil{margin-top:20px}
.anteil .anteil-text{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:baseline;font-size:15px;line-height:1.4;text-wrap:pretty}
.anteil-wert{font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.anteil-text .zusammen{white-space:nowrap}
.anteil-spur{position:relative;height:18px;margin-top:10px;background:var(--linie-weich);border-radius:0 4px 4px 0}
.anteil-fuellung{position:absolute;top:0;bottom:0;left:0;width:calc(var(--a) * 1%);background:var(--teal)}
.anteil-fuehrung{width:calc(var(--a) * 1%);height:33px;margin-bottom:-9px;border:solid var(--text-faint);border-width:0 1px}
.anteil .anteil-teil{z-index:1;width:calc(var(--a) * 1%);margin-top:0}
.anteil-teil .anteil-fuellung{width:calc(var(--b) * 1%)}
/* Ende der Skala bei 100 %: ein Strich in --text-faint, damit „Teil vom Ganzen“ auch ohne die helle Spur lesbar ist. */
.anteil-spur:not(.anteil-teil)::after{content:"";position:absolute;top:-4px;bottom:-4px;right:0;width:1px;background:var(--text-faint)}
.anteil .anteil-teil+.anteil-text{margin-top:10px}

/* Daten-Ampel: Kreis von 10 px, mittig auf der Versalhöhe des Worts, nie allein in einer Zeile. */
.ampel-marke{display:inline-block;width:10px;height:10px;margin-right:10px;border-radius:50%;vertical-align:1px}
.art-stapel tbody th:has(>.ampel-marke){white-space:nowrap}
.ampel-ok{background:var(--status-ok)}
.ampel-warn{background:var(--status-warn)}
.ampel-risk{background:var(--status-risk)}

/* Ausschnitt in der Übersicht: unter dem Anriss, höchstens 30 em, ab 1200 px rechts in eigener Spalte.
   Kein Rahmen, keine Fläche, keine eigenen Haarlinien, die Zeile hat sie. Titel 15 px, damit er dem Titel
   der Zeile nicht Konkurrenz macht. */
.ausschnitt{margin-top:24px;max-width:30em;font-size:14px;line-height:20px;color:var(--text)}
.ausschnitt p{margin:0;max-width:none}
.ausschnitt .aus-titel{font-size:15px;font-weight:500;line-height:20px;text-wrap:balance}
.ausschnitt .aus-unter{margin-top:4px;color:var(--text-muted)}
.ausschnitt .aus-quelle{margin-top:16px;color:var(--text-muted)}
.ausschnitt .aus-unter span,.ausschnitt .aus-quelle span{display:inline-block}
.zeile-kern .ausschnitt+.art-zeile{margin-top:24px}

/* Art balken: Name über dem Balken, Wert rechts in fester Spalte, Skala wie die Leitgrafik (--max).
   Die Bezugslinie läuft über beide Balken bis zu ihrem Text, so ersetzt der Text die Zeile der Leitgrafik.
   Sie beginnt 4 px über dem ersten Balken (Name 20 px plus Abstand 6 px minus 4 px, daher top:22px) und
   steht wie die Balken auf der Breite der Spur: 100 % minus Wertspalte (3.2em) und Rinne (12 px). */
.ausschnitt .aus-plot{position:relative;margin-top:16px}
.ausschnitt .aus-name{display:block}
.ausschnitt .aus-reihe{display:grid;grid-template-columns:minmax(0,1fr) 3.2em;column-gap:12px;align-items:center;margin-top:6px}
.ausschnitt .aus-reihe+.aus-name{margin-top:10px}
.ausschnitt .aus-spur{position:relative;height:18px}
.ausschnitt .aus-balken{position:absolute;top:0;bottom:0;left:0;width:calc(var(--w) / var(--max) * 100%);background:var(--teal);border-radius:0 4px 4px 0}
.ausschnitt .aus-wert{font-weight:500;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.ausschnitt .aus-plot::after{content:"";position:absolute;top:22px;bottom:0;left:calc((100% - 3.2em - 12px) * var(--bezug) / var(--max) - 1px);width:2px;background:var(--ink)}
.ausschnitt .aus-bezug{display:block;margin:6px 0 0 calc((100% - 3.2em - 12px) * var(--bezug) / var(--max) + 1px);padding-left:8px;color:var(--text-muted)}

/* Art blatt: die Skizze flach, ohne Fläche, Drehung, Schatten, Kopf und Fuß, Zeilen in der Größe der Leitgrafik.
   Ohne Trennlinien zwischen den Zeilen, die Zeile der Übersicht hat ihre Haarlinien. Der Haken steht optisch an
   der Textkante (-3 px gleichen den Rand im SVG aus). Die Striche stehen für den Text, der in die Zeile gehört,
   auf Papier in --linie, damit sie so hell wirken wie --linie-weich auf dem weißen Blatt der Leitgrafik. */
.ausschnitt .aus-zeilen{list-style:none;margin:8px 0 0;padding:0}
.ausschnitt .aus-zeilen li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:6px 8px;align-items:start;padding:6px 0}
.ausschnitt .aus-zeilen svg{width:18px;height:18px;margin:1px 0 0 -3px;color:var(--teal)}
.ausschnitt .aus-zeile-name{font-size:15px;font-weight:500}

@media (min-width:1200px){
  .zeile-gross.mit-ausschnitt{grid-template-columns:160px minmax(0,1fr)}
  .mit-ausschnitt .zeile-kern{display:grid;grid-template-columns:minmax(0,1fr) 320px;grid-template-rows:auto auto auto auto 1fr;column-gap:var(--rinne)}
  .mit-ausschnitt .zeile-kern>*{grid-column:1}
  /* 8 px: erste Grundlinie des Ausschnitts auf der ersten Grundlinie des Zeilentitels (gemessen bei 1440 px). */
  .mit-ausschnitt .zeile-kern>.ausschnitt{grid-column:2;grid-row:1 / -1;margin-top:0;padding-top:8px}
  .zeile-kern .ausschnitt+.art-zeile{margin-top:12px}
}