@font-face{font-family:Manrope;src:url(fonts/Manrope-Variable.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Space Mono";src:url(fonts/SpaceMono-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Space Mono";src:url(fonts/SpaceMono-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
:root{--bg:#131415;--sf:#1a1c1e;--sf2:#161819;--ln:#2a2c2e;--ln2:#33363a;--ln3:#3a3d41;--tx:#ece9e2;--tx2:#c8c5bd;--mu:#9a9890;--slot:#26292c;--ui:#5f656d;--d-ki-fill:oklch(0.3 0.05 200);--d-ki-stroke:oklch(0.7 0.12 200);--d-ki-text:oklch(0.93 0.06 200);--ac:oklch(0.8 0.12 200);--acx:oklch(0.8 0.12 200);--acink:#131415;--px:clamp(20px,5vw,72px);--py:clamp(36px,5vw,88px);color-scheme:dark}
@supports not (color:oklch(0 0 0)){:root{--ac:#7fd0e6;--acx:#7fd0e6;--d-ki-fill:#023538;--d-ki-stroke:#00b4bc;--d-ki-text:#b9f5f8}}
:root[data-theme="light"]{--bg:#f6f5f1;--sf:#fff;--sf2:#f0efea;--ln:#e2e0da;--ln2:#d5d2cb;--ln3:#c6c3bb;--tx:#17181a;--tx2:#45474b;--mu:#66686c;--slot:#e4e2dc;--ui:#8d8983;--d-ki-fill:oklch(0.93 0.05 200);--d-ki-stroke:oklch(0.56 0.12 200);--d-ki-text:oklch(0.3 0.08 200);--acx:oklch(0.5 0.12 200);color-scheme:light}
@supports not (color:oklch(0 0 0)){:root[data-theme="light"]{--acx:#1f6f85;--d-ki-fill:#c2f3f5;--d-ki-stroke:#008890;--d-ki-text:#00393d}}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--tx);font-family:Manrope,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--tx)}a:hover{color:var(--acx)}
button{font:inherit}
h1,h2,p{margin:0;text-wrap:pretty}
.mono{font-family:"Space Mono",ui-monospace,Menlo,monospace}
.btn{display:inline-block;background:var(--ac);color:var(--acink);text-decoration:none;font-weight:700;font-size:16px;padding:16px 24px;border-radius:6px;min-height:52px;white-space:nowrap;border:0;cursor:pointer}
.btn:hover{color:var(--acink);filter:brightness(1.06)}
.btn-ghost{display:inline-block;border:1px solid var(--ui);color:var(--tx);text-decoration:none;font-weight:700;font-size:16px;padding:15px 24px;border-radius:6px;min-height:52px;white-space:nowrap}
.link{font-size:15px;color:var(--tx2);text-decoration:underline;text-underline-offset:4px}
.nav{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px var(--px);border-bottom:1px solid var(--ln)}
.nav .brand{text-decoration:none;font-weight:800;font-size:15px;white-space:nowrap;flex:none}
@media (max-width:430px){.nav .brand span{display:none}.nav{gap:8px}.nav .right{gap:8px}}
/* Unter 360px passen Name, Umschalter und Knopf nicht in eine Zeile.
   Zweite Zeile statt Ueberlauf — alles bleibt erreichbar. */
@media (max-width:360px){.nav{flex-wrap:wrap;row-gap:10px}.nav .right{flex:1 1 100%;justify-content:space-between}}
.nav .brand span{color:var(--mu);font-weight:500}
.nav .right{display:flex;align-items:center;gap:12px;flex:none}
.nav .cta{text-decoration:none;color:var(--acink);background:var(--ac);padding:9px 14px;border-radius:5px;font-weight:700;font-size:14px;white-space:nowrap}
/* Ein runder Knopf statt zweier Woerter. So hoch wie der Knopf daneben,
   Rahmen wie bei den anderen runden Knoepfen. Sonne im dunklen Modus,
   Mond im hellen: gezeigt wird, wohin der Klick fuehrt. */
.tg{width:40px;height:40px;flex:none;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--ln3);border-radius:999px;background:transparent;color:var(--tx2);
  cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent}
.tg:hover{border-color:var(--ui);color:var(--tx)}
.tg:focus-visible{outline:2px solid var(--acx);outline-offset:2px}
.tg svg{display:block}
.tg .mond{display:none}
:root[data-theme="light"] .tg .sonne{display:none}
:root[data-theme="light"] .tg .mond{display:block}
:root[data-theme="dark"] .tg .sonne{display:block}
:root[data-theme="dark"] .tg .mond{display:none}
.hero{padding:clamp(32px,6vw,104px) var(--px) clamp(32px,5vw,80px);display:flex;flex-wrap:wrap;gap:clamp(32px,5vw,80px);align-items:center}
.hero>.copy{flex:1 1 460px;min-width:0}
.kicker{font-size:14px;font-weight:600;color:var(--acx);margin-bottom:clamp(20px,3vw,36px)}
.hero h1{font-weight:800;font-size:clamp(40px,6.5vw,96px);line-height:1;letter-spacing:-.035em;margin-bottom:clamp(20px,3vw,32px)}
.hero h1.long{font-size:clamp(34px,4.6vw,68px);line-height:1.04;margin-bottom:clamp(24px,3vw,40px)}
/* Eine Ueberschrift, die ein ganzer Satz ist, wird nicht gebruellt. */
.hero h1.lang{font-size:clamp(27px,3.3vw,44px);line-height:1.14;letter-spacing:-.025em;
  margin-bottom:clamp(22px,2.6vw,32px)}
.hero h1 span,.h-muted{color:var(--mu)}
.lead{font-size:clamp(17px,1.5vw,21px);max-width:32em;color:var(--tx2);margin-bottom:clamp(24px,3vw,40px)}
/* Zweiter Satz unter der Hero-Unterzeile. Kleiner als die Unterzeile, damit
   die Rangfolge erhalten bleibt; den unteren Abstand gibt die Unterzeile ab. */
.lead.eng{margin-bottom:14px}
.nachsatz{font-size:clamp(16px,1.3vw,18px);line-height:1.55;color:var(--tx2);max-width:34em;margin-bottom:clamp(24px,3vw,40px)}
.actions{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center}
.hero>.aside{flex:1 1 340px;min-width:0;max-width:520px}
/* Einspaltiger Hero: die Ueberschrift darf breiter laufen als der
   Fliesstext, damit sie nicht in acht Zeilen zerfaellt. */
.hero.eins>.copy{flex:1 1 100%;max-width:min(100%,900px)}
.hero.eins .lead,.hero.eins .hero-zahl{max-width:34em}
/* Die belegte Zahl direkt unter der Ueberschrift. */
.hero-zahl{display:flex;gap:16px;align-items:flex-start;max-width:34em;
  margin-bottom:clamp(20px,2.5vw,30px);padding-left:16px;border-left:2px solid var(--ac)}
.hero-zahl .kz{flex:none;margin:0;font-family:"Space Mono",ui-monospace,Menlo,monospace;
  font-size:clamp(38px,4.4vw,56px);line-height:1;letter-spacing:-.04em;word-spacing:-.42em;color:var(--acx)}
.hero-zahl .txt{font-size:16px;line-height:1.5;color:var(--tx2)}
.hero-zahl .quelle{margin-top:6px;font-size:12px;line-height:1.4;color:var(--mu)}
.sec{border-top:1px solid var(--ln);padding:var(--py) var(--px)}
.sec h2,.h2{font-weight:800;font-size:clamp(26px,3vw,40px);letter-spacing:-.025em;line-height:1.1;margin-bottom:clamp(20px,3vw,32px)}
.split{display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,64px)}
.split h2{flex:1 1 200px;margin-bottom:0}
.split .about{flex:1 1 200px}.split .about h2{margin-bottom:20px}
.split .txt{flex:3 1 420px;display:grid;gap:24px;max-width:44em}
.split p{font-size:clamp(17px,1.4vw,20px);color:var(--tx2)}
.split .txt .box{border:1px solid var(--ln2);border-radius:8px;padding:18px 20px;background:var(--sf)}
.split .txt .box p,.split .txt .hl p{font-size:clamp(16px,1.3vw,19px);color:var(--tx)}
.split .txt .hl{border:1px solid var(--ac);border-radius:8px;padding:18px 20px}.split .txt .hl p{font-weight:600}
/* Ein Satz als eigenes Band: kein Kasten, keine Ueberschrift, nur Aussage.
   Flacher als ein normaler Abschnitt, weil nur eine Zeile darin steht. */
.sec.satz{padding-top:clamp(28px,4vw,56px);padding-bottom:clamp(28px,4vw,56px)}
.sec.satz p{font-size:clamp(19px,1.9vw,26px);font-weight:600;line-height:1.35;letter-spacing:-.012em;max-width:30em}
.about .frame{width:min(100%,220px);aspect-ratio:4/5;border-radius:8px;overflow:hidden;background:var(--slot)}
.about .rund{width:120px;height:120px;border-radius:999px;overflow:hidden;background:var(--slot)}
.about .rund img{display:block;width:100%;height:100%;object-fit:cover}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:var(--ln);border:1px solid var(--ln);border-radius:10px;overflow:hidden}
.grid>div{background:var(--bg);padding:24px}
.grid .lbl{font-size:13px;font-weight:600;color:var(--mu);margin-bottom:12px}
.grid p{font-size:clamp(17px,1.4vw,20px);font-weight:500}
.grid.tight>div{padding:22px}.grid.tight .lbl{margin-bottom:10px}.grid.tight p{font-size:17px}
/* Jede Kachel beginnt mit der Sorge des Lesers, dann kommt die Antwort. */
.grid p.sorge{font-size:15px;font-weight:600;line-height:1.45;color:var(--mu);margin-bottom:12px}
@media (min-width:620px) and (max-width:1099px){.grid.vier{grid-template-columns:repeat(2,1fr)}}
/* Sechs Kacheln: auto-fit ergibt bei 1280px 4+2 und laesst zwei leere
   Zellen als graue Flaeche stehen. Drei Spalten fuellen das Raster. */
@media (min-width:880px){.grid.tight{grid-template-columns:repeat(3,1fr)}}
/* Zeitstrahl: eine Linie, vier Punkte in der Akzentfarbe. Auf dem Desktop
   waagerecht, auf dem Handy senkrecht. Flaeche und Raster wie bei den
   Diagrammen. Ein Punkt laeuft einmal ueber die Linie, wenn sie ins Bild
   kommt; bei abbestellter Bewegung gar nicht. */
.steps{--sp:clamp(20px,3vw,30px);position:relative;display:grid;gap:clamp(20px,2.5vw,30px);
  margin-top:clamp(18px,2.5vw,26px);padding:var(--sp);border-radius:12px;
  background-color:var(--sf2);
  background-image:radial-gradient(circle at 1.5px 1.5px,var(--ln2) 1.1px,transparent 1.3px);
  background-size:18px 18px}
.steps>div{position:relative}
.steps .bahn{position:absolute;background:var(--ln3);pointer-events:none}
.steps .lauf{position:absolute;width:13px;height:13px;border-radius:999px;background:var(--ac);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--ac) 28%,transparent);opacity:0;pointer-events:none}
/* Handy: senkrecht */
.steps{grid-template-columns:1fr}
.steps>div{padding-left:30px}
.steps>div::before{content:"";position:absolute;left:0;top:4px;width:15px;height:15px;border-radius:999px;
  background:var(--ac);box-shadow:0 0 0 4px var(--sf2)}
.steps .bahn{left:calc(var(--sp) + 7px);top:calc(var(--sp) + 10px);bottom:calc(var(--sp) + 10px);width:2px}
.steps.laeuft .lauf{left:calc(var(--sp) + 1px);animation:laufSenkrecht 3.4s cubic-bezier(.45,0,.25,1) forwards}
@keyframes laufSenkrecht{0%{opacity:1;top:calc(var(--sp) + 8px)}100%{opacity:1;top:calc(100% - var(--sp) - 22px)}}
@media (min-width:860px){
  .steps{grid-template-columns:repeat(4,1fr);gap:clamp(18px,2vw,28px)}
  .steps>div{padding-left:0;padding-top:34px}
  .steps>div::before{left:0;top:12px}
  .steps .bahn{left:calc(var(--sp) + 7px);right:calc(var(--sp) + 7px);top:calc(var(--sp) + 19px);bottom:auto;height:2px;width:auto}
  .steps.laeuft .lauf{top:calc(var(--sp) + 13px);animation:laufWaagerecht 3.4s cubic-bezier(.45,0,.25,1) forwards}
  @keyframes laufWaagerecht{0%{opacity:1;left:calc(var(--sp) + 2px)}100%{opacity:1;left:calc(100% - var(--sp) - 15px)}}
}
@media (prefers-reduced-motion:reduce){.steps.laeuft .lauf{animation:none;opacity:0}}
/* Der Satz ist die Ueberschrift; darunter der Text, darunter der Aufwand. */
.steps .st-titel{font-size:18px;font-weight:700;line-height:1.32;letter-spacing:-.01em;
  margin-bottom:10px;color:var(--tx)}
.steps p{font-size:15px;font-weight:400;line-height:1.55;color:var(--tx2);margin-bottom:12px}
.steps .todo{font-size:15px;line-height:1.5;color:var(--tx2)}.steps .todo b{color:var(--tx)}
.flows{border:1px solid var(--ln);border-radius:10px;overflow:hidden;background:var(--sf)}
.flows>div{display:grid;gap:4px;padding:18px 20px;border-bottom:1px solid var(--ln)}.flows>div:last-child{border-bottom:0}
.flows .a{font-weight:700;font-size:17px}.flows .b{font-size:16px;color:var(--tx2)}
.steps+.schluss{margin-top:clamp(24px,3vw,34px)}
.schluss{margin-top:20px;font-size:17px;font-weight:500;line-height:1.5;color:var(--tx);max-width:46ch}
.nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(24px,3vw,48px)}
.nums .n{font-size:clamp(48px,5vw,80px);line-height:1;color:var(--acx);margin-bottom:14px}
.nums p{font-size:16px;color:var(--tx2)}.nums .src{margin-top:10px;font-size:13px;color:var(--mu)}
.branch{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px 32px;margin:0 var(--px) var(--py);padding:clamp(22px,3vw,36px);border:1px solid var(--ac);border-radius:10px;text-decoration:none;color:var(--tx)}
.branch:hover{color:var(--tx)}
.branch>div:first-child{flex:1 1 320px}
.branch .t{font-weight:800;font-size:clamp(22px,2.4vw,32px);letter-spacing:-.02em;margin-bottom:8px}
.branch .d{font-size:16px;color:var(--tx2)}
.branch .go{font-weight:700;font-size:15px;color:var(--acx);white-space:nowrap}
.final{padding:clamp(48px,7vw,120px) var(--px)}
.final h2{font-size:clamp(38px,5.5vw,84px);line-height:1;letter-spacing:-.035em}
.final .actions{margin-bottom:clamp(28px,4vw,56px)}
.final .lead{margin-bottom:clamp(24px,3vw,40px)}
.avail{font-size:14px;color:var(--mu);line-height:1.7}
footer{border-top:1px solid var(--ln);padding:20px var(--px);display:flex;flex-wrap:wrap;gap:8px 24px;font-size:13px;color:var(--mu)}
footer a{color:var(--mu);text-decoration:none}
.check{margin:0 var(--px) var(--py);border:1px solid var(--ln2);border-radius:12px;background:var(--sf);overflow:hidden}
.check .in{padding:clamp(24px,4vw,56px) clamp(20px,4vw,56px);display:flex;flex-wrap:wrap;gap:clamp(28px,4vw,64px)}
.check .intro{flex:1 1 300px}
.check h2{font-size:clamp(30px,3.6vw,52px);line-height:1.05;letter-spacing:-.03em;margin-bottom:18px}
.check .intro p{font-size:17px;color:var(--tx2)}
.check form{flex:1 1 320px;display:grid;gap:16px;max-width:520px}
.check label{display:grid;gap:6px;font-size:14px;font-weight:600;color:var(--tx2)}
.check input[type=text],.check input[type=email]{font:inherit;font-size:17px;padding:13px 14px;border:1px solid var(--ui);border-radius:6px;background:var(--bg);color:var(--tx);min-height:50px;width:100%}
.check input::placeholder{color:var(--mu)}
.check .consent{display:flex;gap:12px;align-items:flex-start;font-weight:400;color:var(--tx2);line-height:1.45}
.check .consent input{width:22px;height:22px;flex:none;margin:1px 0 0;accent-color:var(--ac)}
.check .btn{justify-self:start}
.check .fine{font-size:14px;color:var(--mu);line-height:1.55}
@media (max-width:420px){.btn,.btn-ghost{white-space:normal;text-align:center}}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.page{padding:clamp(40px,6vw,96px) var(--px);max-width:44em}
.page h1{font-weight:800;font-size:clamp(30px,4.6vw,64px);line-height:1.04;letter-spacing:-.035em;margin-bottom:clamp(20px,3vw,32px)}
.page h1,.page h2,.hero h1,.sec h2,.final h2{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}
/* Getrennt wird nur, wo es sein muss: auf schmalen Displays. Ab 700px
   passen die Ueberschriften ohne Trennstrich, und "Du hast ei-nen
   Betrieb zu fuehren" sieht niemand mehr. Der Notbruch bleibt. */
@media (min-width:700px){.page h1,.page h2,.hero h1,.sec h2,.final h2{-webkit-hyphens:manual;hyphens:manual}}
/* Auf dem Handy eine Stufe kleiner und ohne Silbentrennung: Umbruch nur
   zwischen Woertern, damit die Ueberschrift ruhig bleibt. */
@media (max-width:480px){
  .hero h1,.hero h1.long,.hero h1.lang{font-size:30px;line-height:1.16;letter-spacing:-.02em;
    -webkit-hyphens:none;hyphens:none}
}
.page h2{font-weight:800;font-size:22px;letter-spacing:-.02em;margin:32px 0 10px}
.page p{color:var(--tx2);margin-bottom:14px}
.page .lead{margin-bottom:clamp(24px,3vw,40px)}
/* --- Ablauf-Diagramme ----------------------------------------------------
   Die SVGs verwenden 14 eigene Variablen und definieren keine davon (siehe
   design/ablaeufe/HINWEIS.md). Sie werden hier an die Tokens der Seite
   gekoppelt, damit die Diagramme in beiden Modi mitgehen. Bewusst eigene
   Quellnamen (--d-ki-*): Wuerde die Quelle genauso heissen wie das Ziel,
   entstuende mit --bg:var(--bg) ein Verweis auf sich selbst. */
.ablaeufe .reiter{display:flex;gap:6px;overflow-x:auto;padding:0 0 4px;margin-bottom:24px;
  -webkit-overflow-scrolling:touch}
.ablaeufe .reiter button{flex:none;border:1px solid var(--ui);background:transparent;color:var(--tx2);
  font-weight:700;font-size:15px;padding:10px 16px;border-radius:999px;cursor:pointer;
  white-space:nowrap;min-height:44px}
.ablaeufe .reiter button:hover{color:var(--tx)}
.ablaeufe .reiter button[aria-selected="true"]{background:var(--tx);border-color:var(--tx);color:var(--bg)}
.ab-kennz{margin-top:8px;font-family:"Space Mono",ui-monospace,Menlo,monospace;font-size:12px;
  letter-spacing:.05em;text-transform:uppercase;color:var(--acx)}
.ablaeufe h3{font-size:clamp(21px,2.4vw,26px);font-weight:700;letter-spacing:-0.015em}
.ab-unter{margin-top:8px;font-size:17px;color:var(--tx2);max-width:62ch}
.ab-zahl{margin-top:10px;font-family:"Space Mono",ui-monospace,Menlo,monospace;font-size:13px;color:var(--tx)}
.ab-rahmen:focus-visible{outline:2px solid var(--acx);outline-offset:3px}
svg.ablauf{display:block;overflow:visible}
.ab-legende{list-style:none;display:flex;flex-wrap:wrap;gap:10px 24px;margin:16px 0 0;padding:0;
  font-size:14px;color:var(--tx2)}
.ab-legende li{display:flex;align-items:center;gap:8px;white-space:nowrap}
.ab-legende .pk{width:16px;height:16px;border-radius:5px;flex:none}
.ab-legende .pk-comp{background:var(--sf);border:1px solid var(--ln3)}
.ab-legende .pk-ki{background:var(--d-ki-fill);border:1px solid var(--d-ki-stroke)}
.ab-legende .pk-frei{background:var(--ac)}
.ab-fuss{margin-top:28px;font-size:15px;color:var(--mu);max-width:62ch}

/* --- "Wo die Zeit hingeht" ------------------------------------------------
   Der Abschnitt traegt drei eigene Teile: den Einstieg mit der belegten
   Zahl, den Kasten "So laeuft es heute" und die Rechenzeile. Reiter,
   Rahmen, Legende und Kennzeichnung kommen aus den Ablauf-Regeln darueber,
   deshalb traegt der Abschnitt auch die Klasse .ablaeufe. */
.marke{font-family:"Space Mono",ui-monospace,Menlo,monospace;font-size:12px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--mu)}
.zeit-kopf{display:grid;gap:clamp(22px,3vw,32px);margin-bottom:clamp(30px,4vw,52px)}
@media (min-width:880px){.zeit-kopf{grid-template-columns:1.3fr 1fr;align-items:start;gap:clamp(32px,4vw,64px)}}
@media (min-width:880px){.zeit-kopf.einspaltig{grid-template-columns:minmax(0,62ch)}}
.zk-zahl .kz{font-family:"Space Mono",ui-monospace,Menlo,monospace;font-size:clamp(58px,9vw,112px);
  line-height:.95;letter-spacing:-.04em;word-spacing:-.42em;color:var(--acx);margin-bottom:14px}
.zk-zahl .txt{font-size:clamp(18px,1.6vw,22px);line-height:1.5;max-width:34em}
.zk-zahl .quelle{margin-top:14px;font-size:13px;line-height:1.5;color:var(--mu);max-width:52ch}
.zk-rechnung{border:1px solid var(--ln2);border-radius:10px;background:var(--sf);
  padding:clamp(18px,2vw,26px)}
.zk-rechnung .txt{font-size:16px;color:var(--tx2)}
.zk-rechnung .txt .marke{color:var(--tx)}
.zk-rechnung .klein{margin-top:14px;padding-top:14px;border-top:1px solid var(--ln);
  font-size:15px;color:var(--mu)}
.zk-rechnung .klein + .klein{border-top:0;padding-top:0;margin-top:8px}
.zk-rechnung .stark{color:var(--tx);font-weight:600}
.zk-rechnung .quelle{margin-top:12px;font-size:12px;line-height:1.5;color:var(--mu)}
.heute{margin-top:16px;border:1px solid var(--ln2);border-radius:10px;background:var(--sf);
  padding:clamp(16px,1.8vw,22px);max-width:72ch}
.heute .marke{display:block;margin-bottom:8px}
.heute p{font-size:17px;color:var(--tx2);max-width:62ch}
/* Ein Satz statt Kasten: "Heute" als Vorsatz, dann der Satz. */
.heute-kurz{margin-top:12px;font-size:17px;line-height:1.5;color:var(--tx2);max-width:68ch}
.heute-kurz .marke{margin-right:10px}
/* Rechenzeile: grosse Felder, weil sie auf dem Handy mit dem Daumen
   getroffen werden. Ohne JavaScript steht das vorbelegte Ergebnis da und
   die Felder verschwinden (siehe <noscript> in der Seite). */
.rechne{margin-top:20px}
.rechne .marke{display:block}
.rechne .felder{display:flex;flex-wrap:wrap;gap:18px 26px;margin-top:12px}
.rechne .feld{display:grid;gap:8px}
.rechne .fl{font-size:14px;font-weight:600;color:var(--tx2)}
.rechne .steuer{display:flex;align-items:center;gap:8px}
/* Runde Knoepfe im Stil der Kartenknoepfe: Rahmen wie "Ändern", beim
   Druecken die Akzentfarbe wie "Freigeben". 44px Tippflaeche. */
.rechne .rund{width:44px;height:44px;flex:none;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--ln3);border-radius:999px;background:transparent;color:var(--tx);
  font:inherit;font-size:22px;font-weight:600;line-height:1;cursor:pointer;
  -webkit-tap-highlight-color:transparent;user-select:none}
.rechne .rund:hover{border-color:var(--ui)}
.rechne .rund:active{background:var(--ac);border-color:var(--ac);color:var(--acink)}
.rechne .rund:focus-visible{outline:2px solid var(--acx);outline-offset:2px}
.rechne input{font-family:"Space Mono",ui-monospace,Menlo,monospace;font-size:19px;font-weight:700;
  text-align:center;width:4.2em;min-height:50px;padding:10px 4px;border:1px solid var(--ui);
  border-radius:8px;background:var(--bg);color:var(--tx)}
.rechne input:focus-visible{outline:2px solid var(--acx);outline-offset:2px}
.rechne .erg{margin-top:16px;font-size:clamp(19px,2vw,24px);font-weight:700;color:var(--tx)}
.rechne .erg b{font-family:"Space Mono",ui-monospace,Menlo,monospace;letter-spacing:-.03em;color:var(--acx)}
.rechne .beispiel{margin-top:8px;font-size:13px;color:var(--mu)}
/* Schmale Fassung: Felder und Ergebnis in einer Zeile. */
.rechne.schlank{margin-top:16px;display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 26px}
.rechne.schlank .felder{margin-top:0}
.rechne.schlank .erg{margin-top:0;padding-bottom:11px;font-size:clamp(18px,1.8vw,22px)}
.rechne.schlank .erg .beispiel{margin:0 0 0 10px;font-size:12px;font-weight:400;color:var(--mu)}
.danach{margin-top:22px;padding-top:16px;border-top:1px solid var(--ln);font-size:17px;
  color:var(--tx);max-width:62ch}
.danach .marke{display:block;margin-bottom:6px}

/* --- Diagramm-Rahmen -------------------------------------------------------
   Der Rahmen ist die Flaeche: abgerundet, mit Punktraster, volle
   Inhaltsbreite, so hoch wie das Diagramm. Passt das Diagramm hinein, steht
   es mittig; sonst wird es darin geschoben. Das SVG selbst bringt keinen
   Hintergrund mehr mit. */
.ab-huelle{position:relative;margin-top:18px}
.ab-rahmen{display:flex;align-items:flex-start;overflow-x:auto;overflow-y:hidden;max-width:100%;
  border-radius:12px;background-color:var(--sf2);
  background-image:radial-gradient(circle at 1.5px 1.5px,var(--ln2) 1.1px,transparent 1.3px);
  background-size:18px 18px;
  scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;
  touch-action:pan-x;overscroll-behavior-x:contain;cursor:zoom-in}
.ab-rahmen::-webkit-scrollbar{display:none}
.ab-rahmen.mittig{justify-content:center}
.ab-rahmen:focus-visible{outline:2px solid var(--acx);outline-offset:3px}
.ab-huelle.mehr .ab-rahmen,.ab-huelle.davor .ab-rahmen{cursor:grab}
.ab-huelle.zieht .ab-rahmen{cursor:grabbing;user-select:none}
/* Weicher Verlauf an den Kanten, solange dort noch Inhalt liegt. */
.ab-huelle::before,.ab-huelle::after{content:"";position:absolute;top:0;bottom:0;width:60px;
  pointer-events:none;opacity:0;transition:opacity .25s}
.ab-huelle::before{left:0;border-radius:12px 0 0 12px;
  background:linear-gradient(to left,rgba(0,0,0,0),var(--sf2))}
.ab-huelle::after{right:0;border-radius:0 12px 12px 0;
  background:linear-gradient(to right,rgba(0,0,0,0),var(--sf2))}
.ab-huelle.davor::before{opacity:1}
.ab-huelle.mehr::after{opacity:1}
.ab-wisch{position:absolute;top:-28px;right:0;margin:0;font-family:"Space Mono",ui-monospace,Menlo,monospace;
  font-size:12px;letter-spacing:.04em;color:var(--mu);opacity:0;transition:opacity .25s;pointer-events:none}
.ab-huelle.mehr .ab-wisch{opacity:1}
.ab-huelle.gewischt .ab-wisch{opacity:0}
@media (prefers-reduced-motion:reduce){.ab-huelle::before,.ab-huelle::after,.ab-wisch{transition:none}}
/* Pfeile: nur am Rechner, nur wenn in der Richtung noch Inhalt ist. */
.ab-pfeil{position:absolute;top:50%;margin-top:-22px;width:44px;height:44px;display:none;
  align-items:center;justify-content:center;border:0;border-radius:999px;background:var(--ac);
  color:var(--acink);font-size:26px;line-height:1;cursor:pointer;opacity:0;
  transition:opacity .2s;pointer-events:none;padding:0 0 3px}
.ab-links{left:10px}.ab-rechts{right:10px}
@media (min-width:700px) and (hover:hover){.ab-pfeil{display:flex}}
.ab-huelle.mehr .ab-rechts,.ab-huelle.davor .ab-links{opacity:.6;pointer-events:auto}
.ab-pfeil:hover{opacity:1}
.ab-pfeil:focus-visible{opacity:1;outline:2px solid var(--acx);outline-offset:2px;pointer-events:auto}
/* Am Endknoten kurz aufleuchten. */
.blitz{opacity:0}
.blitz.an{animation:aufleuchten .9s ease-out}
@keyframes aufleuchten{0%{opacity:0}25%{opacity:.9}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.blitz.an{animation:none}}
/* Weicher Verlauf an der rechten Kante, solange dort noch etwas steht. */
.ab-huelle::after{content:"";position:absolute;top:0;right:0;bottom:6px;width:64px;pointer-events:none;
  background:linear-gradient(to right,rgba(0,0,0,0),var(--bg));opacity:0;transition:opacity .25s}
.ab-huelle.mehr::after{opacity:1}
.ab-wisch{position:absolute;top:-30px;right:0;margin:0;font-family:"Space Mono",ui-monospace,Menlo,monospace;
  font-size:12px;letter-spacing:.04em;color:var(--mu);opacity:0;transition:opacity .25s;pointer-events:none}
.ab-huelle.mehr .ab-wisch{opacity:1}
.ab-huelle.gewischt .ab-wisch{opacity:0}
@media (prefers-reduced-motion:reduce){.ab-huelle::after,.ab-wisch{transition:none}}
/* Lupe: das Diagramm bildschirmfuellend ueber der Seite. */
/* Der ganze Block steht senkrecht mittig: Kopf, Band, Legende, Fusszeile
   dicht beieinander, der Rest bleibt Flaeche oben und unten. So klebt
   keine leere Zone zwischen Kopf und Diagramm. */
.lupe{position:fixed;inset:0;z-index:80;background:var(--bg);display:flex;flex-direction:column;
  justify-content:center;justify-content:safe center}
.lupe-kopf{display:flex;align-items:center;gap:16px;padding:12px clamp(12px,3vw,24px);
  border-bottom:1px solid var(--ln)}
.lupe-titel{margin:0;font-size:16px;font-weight:700;flex:1 1 auto;min-width:0}
.lupe-zu{width:44px;height:44px;flex:none;border:1px solid var(--ln3);border-radius:999px;
  background:transparent;color:var(--tx);font-size:26px;line-height:1;cursor:pointer}
.lupe-zu:hover{border-color:var(--ui)}
.lupe-zu:focus-visible{outline:2px solid var(--acx);outline-offset:2px}
/* Der Mittelteil legt sich an das Band an: keine leere Flaeche darueber.
   Wird beim Heranholen groesser als der Bildschirm, schrumpft er und wird
   scrollbar (flex-shrink 1, min-height 0). */
.lupe-mitte{position:relative;flex:0 1 auto;min-height:0;display:flex}
/* Fester Rand von 24 px links und rechts: auf diese Breite wird das Band
   beim Oeffnen eingepasst. */
.lupe-flaeche{flex:1 1 auto;overflow:auto;padding:10px 24px;touch-action:none;
  scrollbar-width:none;display:flex;align-items:center;align-items:safe center}
.lupe-flaeche>.lupe-inhalt{flex:none}
/* Pfeile, wenn das Band breiter ist als der Bildschirm. */
.lupe-pfeil{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;
  border:1px solid var(--ln3);border-radius:999px;background:var(--sf);color:var(--tx);
  font-size:28px;line-height:1;cursor:pointer;display:none;align-items:center;justify-content:center}
.lupe-pfeil:hover{border-color:var(--ui)}
.lupe-pfeil:focus-visible{outline:2px solid var(--acx);outline-offset:2px}
.lupe-pfeil.links{left:10px}
.lupe-pfeil.rechts{right:10px}
.lupe-mitte[data-pfeile] .lupe-pfeil{display:flex}
.lupe-flaeche::-webkit-scrollbar{display:none}
.lupe-inhalt{transform-origin:0 0;width:max-content;border-radius:12px;background-color:var(--sf2);
  background-image:radial-gradient(circle at 1.5px 1.5px,var(--ln2) 1.1px,transparent 1.3px);
  background-size:18px 18px}
.lupe-fuss{margin:0;padding:10px clamp(12px,3vw,24px) 14px;border-top:1px solid var(--ln);
  font-size:13px;color:var(--mu)}
@media (min-width:700px){.lupe-fuss{text-align:center}}

/* Die Lupe zeigt eine Kopie desselben SVG und braucht dieselben Variablen. */
.ab-rahmen,.lupe-inhalt,.ka-bild{
  --acc:var(--ac);--acc-ink:var(--acink);
  --bg:var(--sf2);--surface:var(--sf);--fg:var(--tx);--muted:var(--mu);
  --line:var(--ui);--grid:var(--ln2);
  --comp-fill:var(--sf);--comp-stroke:var(--ln3);
  --ki-fill:var(--d-ki-fill);--ki-stroke:var(--d-ki-stroke);--ki-text:var(--d-ki-text);
  --dot:block;
}
/* Wer Bewegung abbestellt, bekommt den Punkt gar nicht: Ohne laufende
   Animation saesse er in der linken oberen Ecke und saehe nach Fehler aus. */
@media (prefers-reduced-motion:reduce){.ab-rahmen,.lupe-inhalt,.ka-bild{--dot:none}}

@media (prefers-reduced-motion:no-preference){body,.nav,.card,.check,.flows,.grid>div{transition:background-color .2s,color .2s,border-color .2s}}
:focus-visible{outline:2px solid var(--acx);outline-offset:2px}
/* --- Häufige Fragen -------------------------------------------------------
   details/summary, damit Auf- und Zuklappen ohne Skript funktioniert und
   die Tastatur von allein mitmacht. */
.faq .faq-liste{max-width:76ch;border-top:1px solid var(--ln)}
.faq details{border-bottom:1px solid var(--ln)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:17px 2px;min-height:44px;cursor:pointer;list-style:none;
  font-size:clamp(17px,1.4vw,19px);font-weight:700;line-height:1.4;color:var(--tx)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--acx)}
.faq summary:focus-visible{outline:2px solid var(--acx);outline-offset:2px;border-radius:5px}
.faq summary::after{content:"";flex:none;width:10px;height:10px;margin-right:8px;
  border-right:2px solid var(--mu);border-bottom:2px solid var(--mu);
  transform:translateY(-3px) rotate(45deg);transition:transform .2s}
.faq details[open] summary{color:var(--tx)}
.faq details[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.faq details p{margin:0 0 20px;padding-right:30px;font-size:17px;line-height:1.6;
  color:var(--tx2);max-width:68ch}
@media (prefers-reduced-motion:reduce){.faq summary::after{transition:none}}

/* --- Einblenden beim Scrollen ---------------------------------------------
   Die Klasse setzt erst das Skript. Ohne JavaScript und bei abbestellter
   Bewegung steht alles sofort da; versteckt wird nur, was beim Laden
   ohnehin unterhalb des Bildschirms liegt. */
.auf{opacity:0;transform:translateY(14px)}
.auf.da{opacity:1;transform:none;
  transition:opacity .35s cubic-bezier(.22,.61,.36,1),transform .35s cubic-bezier(.22,.61,.36,1)}

/* --- Balken am unteren Rand (nur Handy) -----------------------------------
   Erscheint, sobald der Hero weg ist, und verschwindet ueber dem Formular
   und dem Kontaktblock: Dort steht der Knopf ohnehin. */
.stange{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  padding:10px var(--px);padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));
  background:var(--sf2);border-top:1px solid var(--ln)}
.stange .btn{display:block;width:100%;text-align:center}
@media (max-width:700px){
  .stange:not([hidden]){display:block;animation:stangeRein .25s ease-out}
}
@keyframes stangeRein{from{transform:translateY(100%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.stange:not([hidden]){animation:none}}

/* --- Kachel-Raster --------------------------------------------------------
   Fuenf Kacheln: Titel, ein Satz, Miniatur. Die Miniatur ist dasselbe SVG
   wie in der Lupe, nur ohne Beschriftungen und auf Kachelgroesse gebracht.
   Ein Klick oeffnet die Lupe mit allem. */
.kacheln{display:grid;gap:clamp(14px,2vw,22px);margin-top:clamp(20px,3vw,30px);grid-auto-rows:1fr}
@media (min-width:620px){.kacheln{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.kacheln{grid-template-columns:repeat(3,1fr)}}
/* align-items ausdruecklich setzen: Safari gibt <button> per UA-Stylesheet
   align-items:center, dann streckt sich kein Kind auf die Kachelbreite und
   ein Kasten mit nur absolut positioniertem Inhalt wird 0 breit. */
.ka{display:flex;flex-direction:column;align-items:stretch;text-align:left;cursor:pointer;font:inherit;color:var(--tx);
  border:1px solid var(--ln2);border-radius:12px;background:var(--sf);padding:18px 18px 0;overflow:hidden;
  -webkit-tap-highlight-color:transparent}
.ka:hover{border-color:var(--ui)}
.ka:focus-visible{outline:2px solid var(--acx);outline-offset:2px}
/* Kachel mit Phase: kleine Marke, Titel, Pain-Zitat, ein Satz Loesung. */
.ka-phase{display:block;margin-bottom:8px;font-family:"Space Mono",ui-monospace,Menlo,monospace;
  font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--acx)}
.ka-titel{display:block;font-size:17px;font-weight:700;line-height:1.3;letter-spacing:-.01em}
.ka-pain{display:block;margin-top:10px;font-size:14px;line-height:1.5;color:var(--tx2)}
.ka-loesung{display:block;margin-top:10px;padding-top:10px;border-top:1px solid var(--ln);
  font-size:13.5px;line-height:1.5;color:var(--mu);flex:1 1 auto}
.ka-heute{display:block;margin-top:8px;font-size:14px;line-height:1.5;color:var(--tx2);flex:1 1 auto}
/* Miniatur: Linien, Kachelraender, Symbole und Punkt werden hier dicker
   gezeichnet, damit Verzweigungen und Akzentknoten klein erkennbar bleiben. */
.ka-bild{--kante:5;--strich:3.4;--rahmen:3;--pkt:9px;--pkt-hof:20px}
.ka-bild{display:block;align-self:stretch;height:170px;margin:16px -18px 0;padding:10px 12px;border-top:1px solid var(--ln);
  background-color:var(--sf2);
  background-image:radial-gradient(circle at 1.5px 1.5px,var(--ln2) 1.1px,transparent 1.3px);
  background-size:18px 18px}
.ka-bild svg{display:block;width:100%;height:100%}
.ka svg text{display:none}
@media (min-width:620px){.ka-bild{height:200px}}

/* Startseite: die Miniatur ist ein Fenster auf ein langes Band.
   Feste Fensterhoehe, volle Kachelbreite, alles andere wird abgeschnitten.
   Das Band steht mit derselben festen Hoehe darin (Breite proportional,
   rund 900 bis 1100 px) und beginnt links; sichtbar sind fuenf bis sechs
   Knoten. Der Ausschnitt zieht dem Wanderpunkt nach (site.js).
   Alles in festen Pixeln — keine Prozenthoehen, kein aspect-ratio. */
/* Etwas enger gesetzt, damit die Kachel auch in Safari unter 480 px bleibt —
   Safari bricht die Texte eine Zeile frueher um als Chrome. Gilt nur fuer die
   Startseite; die Coach-Kacheln behalten ihre Abstaende. */
.ka-fenster{padding-top:16px}
.ka-fenster .ka-phase{margin-bottom:6px}
.ka-fenster .ka-pain{margin-top:8px}
.ka-fenster .ka-loesung{margin-top:8px;padding-top:8px}
.ka-fenster .ka-bild{height:170px;margin-top:6px;padding:0;overflow:hidden;position:relative}
/* Das SVG behaelt seine eigene Groesse aus den width/height-Attributen
   (Band x 462) und wird nur skaliert. Kein width:auto, kein height:100% —
   Safari rechnet solche Groessen bei Inline-SVG nicht zuverlaessig aus und
   liess die Kachel leer. 170/462 = 0,367965, 260/462 = 0,562771. */
.ka-fenster .ka-bild svg{position:absolute;left:0;top:0;width:auto;height:auto;max-width:none;
  transform-origin:0 0;transform:scale(0.367965);will-change:transform}
/* Handy und Tablet bis 1200 px: kurze Kachel, flacheres Fenster, kein
   sichtbarer Loesungssatz. Der Satz bleibt im Quelltext und im
   Bedienbaum — er wird nur optisch weggenommen (1x1 px, abgeschnitten),
   damit Vorlesegeraete ihn weiter finden — und steht in der Lupe.
   Ab 1200 px alles wie auf dem Desktop — dort sind die Kacheln breit
   genug, dass der Text nicht mehr so oft umbricht. */
@media (max-width:1199.98px){
  .ka-fenster{position:relative}
  .ka-fenster .ka-loesung{position:absolute;width:1px;height:1px;overflow:hidden;
    margin:-1px;padding:0;border:0;white-space:nowrap;clip-path:inset(50%)}
  .ka-fenster .ka-pain{flex:1 1 auto}
}
@media (min-width:1200px){
  .ka-fenster .ka-bild{height:260px}
  .ka-fenster .ka-bild svg{transform:scale(0.562771)}
}
/* Wer Bewegung abbestellt hat, sieht das ganze Band auf Fensterbreite
   skaliert und still. */
@media (prefers-reduced-motion:reduce){
  .ka-fenster .ka-bild svg{width:100%;height:100%;transform:none}
}
/* Lupe: unter dem Diagramm Legende und Rechenzeile. */
.lupe-unten{padding:14px clamp(12px,3vw,24px);border-top:1px solid var(--ln);display:grid;gap:14px}
/* Der Loesungssatz steht nur dort, wo die Kachel ihn nicht zeigt. */
.lupe-loesung{display:none;margin:0;font-size:14px;line-height:1.5;color:var(--tx2)}
@media (max-width:1199.98px){.lupe-loesung{display:block}}
.lupe-unten .ab-legende{margin:0}
.lupe-unten .rechne{margin:0}
.lupe-kennz{margin:0;font-family:"Space Mono",ui-monospace,Menlo,monospace;font-size:12px;
  letter-spacing:.05em;text-transform:uppercase;color:var(--acx)}

/* --- Zettelstapel im Hero -------------------------------------------------
   Fuenf Haftnotizen, leicht gedreht, gestapelt. Sie schweben nacheinander
   ein und stehen danach still. Auf dem Handy drei Zettel, halbe Hoehe, und
   sie stehen unter der Zahl statt daneben. */
/* Ab 900px zwei Spalten: Text links, Zettel rechts. Die einspaltige
   Regel des Heros wird dafuer zurueckgenommen. */
@media (min-width:900px){
  .hero.zettel-hero>.copy{flex:1 1 460px;max-width:min(100%,620px)}
  .hero.zettel-hero>.aside{flex:1 1 340px;min-width:0;max-width:480px;align-self:center}
}
.zettel-feld{position:relative;height:clamp(330px,36vw,450px)}
.zettel{position:absolute;top:var(--oben);left:var(--links);width:min(80%,384px);
  padding:16px 19px;border-radius:5px;border:1px solid var(--ln3);background:var(--sf);
  box-shadow:0 10px 26px rgba(0,0,0,.20),0 2px 6px rgba(0,0,0,.12);
  transform:rotate(var(--dreh));animation:zettelRein .5s cubic-bezier(.2,.7,.3,1) backwards}
.zettel .was{display:block;font-size:16.5px;font-weight:700;line-height:1.35}
.zettel .wann{display:block;margin-top:4px;font-family:"Space Mono",ui-monospace,Menlo,monospace;
  font-size:13px;color:var(--mu)}
.zettel:nth-child(1){animation-delay:.10s}
.zettel:nth-child(2){animation-delay:.22s}
.zettel:nth-child(3){animation-delay:.34s}
.zettel:nth-child(4){animation-delay:.46s}
.zettel:nth-child(5){animation-delay:.58s}
@keyframes zettelRein{
  from{opacity:0;transform:translateY(22px) rotate(var(--dreh))}
  to{opacity:1;transform:translateY(0) rotate(var(--dreh))}
}
.zettel-fuss{margin-top:14px;font-size:14px;color:var(--mu)}
@media (prefers-reduced-motion:reduce){.zettel{animation:none}}
/* Handy: unter der Zahl, halbe Hoehe, drei Zettel. */
@media (max-width:899px){
  .zettel-hero{display:grid;grid-template-columns:1fr;gap:0}
  .zettel-hero>.copy{display:contents}
  .zettel-hero .kicker{order:1}
  .zettel-hero h1{order:2}
  .zettel-hero .hero-zahl{order:3}
  .zettel-hero>.aside{order:4;max-width:none;margin-bottom:clamp(20px,3vw,28px)}
  .zettel-hero .lead{order:5}
  .zettel-hero .actions{order:6}
  /* Kein overflow:hidden mehr: Der erste Zettel ist 3,5 Grad gedreht und
     ragte dadurch 10 px ueber die obere Feldkante — die wurde glatt
     abgeschnitten, und die Karte sah aus wie beschnitten statt wie
     hingelegt. Stattdessen bekommt das Feld oben, unten und an den Seiten
     so viel Luft, dass keine Karte an eine Kante stoesst. */
  .zettel-feld{height:clamp(268px,68vw,292px)}
  /* Versatz plus Breite bleiben zusammen unter 100 Prozent, damit nichts
     ueber den Seitenrand hinausragt. */
  .zettel{width:min(90%,330px)}
  .zettel:nth-child(n+4){display:none}
  .zettel:nth-child(1){top:4%;left:2%}
  .zettel:nth-child(2){top:33%;left:8%}
  .zettel:nth-child(3){top:62%;left:4%}
}