@font-face{
  font-family:"DM Sans";
  src:url("assets/dmsans-var.woff2") format("woff2");
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
}

:root{
  --paper:#FFFCF5;
  --surface:#ffffff;
  --ink:#160D00;
  --amber:#F5A623;
  --amber-deep:#BA7517;
  --amber-line:#cc8309;
  --purple:#534AB7;
  --purple-soft:#8f87e4;
  --line:#e8e0d0;
  --ink-soft:#766c5a;
  --ink-label:#665c48;
  --ink-mute:#686859;
  --ok:#247c47;
  --ok-bg:#e7f6ec;
  --warn:#b98c00;
  --err:#bc4334;
  --info-bg:#efedfa;
  --sel-bg:#f4f2fc;
  --inert:#eee5d2;
  --inert-ink:#8e8365;
  --code-bg:#f4f0e6;
  --shell:1060px;
  --gut:24px;
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scrollbar-color:var(--inert-ink) var(--code-bg);
  scroll-behavior:smooth;
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;
  font-weight:500;
  line-height:1.6;
  text-rendering:optimizeLegibility;
}

::selection{background:var(--sel-bg);color:var(--ink)}

:focus-visible{
  outline:2px solid var(--purple);
  outline-offset:3px;
  border-radius:5px;
}

::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--code-bg)}
::-webkit-scrollbar-thumb{background:var(--inert-ink);border:3px solid var(--code-bg);border-radius:99px}

h1,h2,h3{font-weight:700;letter-spacing:-.02em;line-height:1.14;margin:0}
p{margin:0}
a{color:var(--purple);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}

.shell{max-width:var(--shell);margin:0 auto;padding:0 var(--gut)}
.prose{max-width:62ch}
.num{font-variant-numeric:tabular-nums lining-nums}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:60;background:var(--surface);border:1px solid var(--purple);border-radius:9px;padding:10px 16px}

/* ---------- Kopf ---------- */

.head{
  position:sticky;top:0;z-index:20;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.head .shell{display:flex;align-items:center;gap:14px;padding-top:13px;padding-bottom:13px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit}
.brand svg{display:block;width:34px;height:34px;flex:none}
.brand .name{font-size:21px;font-weight:700;letter-spacing:-.02em}
.brand .name i{font-style:normal;color:var(--purple)}
.head nav{margin-left:auto;display:flex;align-items:center;gap:22px}
.head nav a.jump{font-size:15px;font-weight:500;color:var(--ink-label);text-decoration:none;padding-bottom:3px;border-bottom:2px solid transparent}
.head nav a.jump[aria-current]{color:var(--ink);font-weight:700;border-bottom-color:var(--purple)}
.head nav a.jump:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}

.btn{
  display:inline-block;
  background:var(--amber);
  color:var(--ink);
  font-weight:700;font-size:15px;
  padding:12px 22px;border-radius:9px;
  text-decoration:none;border:0;
  white-space:nowrap;
}
.btn:hover{background:var(--ink);color:var(--amber)}
.btn.small{padding:10px 17px;font-size:14px}

/* Unter 880 px verschwindet die Sprungnavigation aus der Kopfzeile. Diese
   Liste steht dann einmal unter der Einleitung - bei 7.700 px Seitenlaenge ist
   das der Unterschied zwischen Orientierung und blossem Scrollen. */
.jumps{display:none}

/* ---------- Abschnitte ---------- */

section{border-bottom:1px solid var(--line);scroll-margin-top:72px}
section > .shell{padding-top:74px;padding-bottom:74px}

.scale{
  display:flex;align-items:center;gap:12px;
  line-height:1.4;
  font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-label);
  margin-bottom:22px;
}
.scale .rule{flex:1;height:1px;background:var(--line);max-width:300px}

h1.display{font-size:clamp(33px,5vw,54px);letter-spacing:-.03em;line-height:1.06;max-width:17ch}
h2.display{font-size:clamp(26px,3.4vw,37px);letter-spacing:-.025em;max-width:20ch}
h3.sub{font-size:17px;color:var(--purple);margin-top:40px}
.lead{font-size:19px;color:var(--ink-soft);margin-top:18px;max-width:56ch}
.body{margin-top:16px;color:var(--ink-soft);max-width:62ch}
.body + .body{margin-top:14px}

.claims{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:26px}
.claims b{font-size:15px;font-weight:700;color:var(--purple);display:flex;align-items:center;gap:9px}
.claims b::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--inert-ink);flex:none}

.source{font-size:13px;color:var(--ink-mute);line-height:1.5;margin-top:16px;max-width:74ch}

/* ---------- Diagramme ---------- */

.figure{margin-top:36px}
.figure svg{display:block;width:100%;height:auto}
/* Zwei Fassungen je Figur. Oberhalb von 780 px die breite, darunter eine
   eigens gezeichnete schmale mit eigenem Koordinatensystem. Die breite bekam
   auf dem Telefon nur rund 0,35 Skalierung, und 286 px lagen ausserhalb des
   Ausschnitts - Schluessel als HTML darunter haben das gemildert, aber nicht
   geloest. Jetzt scrollt gar nichts mehr seitlich. */
.figure .narrow{display:none}
.scroller{overflow-x:auto;overflow-y:hidden}
.scroller > .wide > svg{min-width:720px}

@media (max-width:780px){
  .figure .wide{display:none}
  .figure .narrow{display:block}
  .scroller{overflow-x:visible}
}

.legend{display:flex;flex-wrap:wrap;gap:9px 24px;margin-top:18px;font-size:13px;color:var(--ink-soft)}
.legend span{display:flex;align-items:center;gap:8px}
.legend i{width:17px;flex:none;display:block;border-top:2.5px solid var(--ink-soft)}
.legend i.dash{border-top-width:1.5px;border-top-style:dashed}
.legend i.box{height:12px;border:0;border-radius:5px;width:18px}

/* Schluessel zur Figur als HTML. Die SVG tragen ihre Legende innen, aber auf
   schmalen Geraeten liegt die rechte Haelfte ausserhalb des Ausschnitts - dort
   traegt dieser Block die Aussage. */
.figkey{display:flex;flex-wrap:wrap;gap:9px 24px;margin-top:16px;font-size:14px;color:var(--ink)}
.figkey span{display:flex;align-items:center;gap:8px}
.figkey b{font-weight:700}

/* ---------- Zeilen mit Haarlinien ---------- */

.rows{margin-top:36px;border-top:1px solid var(--line)}
.rows > div{
  border-bottom:1px solid var(--line);padding:20px 0;
  display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr);gap:8px 30px;align-items:baseline;
}
.rows .k{font-weight:700;font-size:16px;letter-spacing:-.01em}
.rows .v{color:var(--ink-soft);font-size:16px}
.rows .v small{display:block;font-size:14px;color:var(--ink-mute);margin-top:5px}

.steps{margin:36px 0 0;padding:0;border-top:1px solid var(--line);counter-reset:s}
.steps > li{
  list-style:none;border-bottom:1px solid var(--line);padding:20px 0;
  display:grid;grid-template-columns:2.1rem minmax(0,13rem) minmax(0,1fr);gap:6px 22px;align-items:baseline;
}
.steps > li::before{
  counter-increment:s;content:counter(s);
  font-weight:700;font-size:15px;color:var(--purple);font-variant-numeric:tabular-nums;
}
.steps .k{font-weight:700;font-size:16px}
.steps .v{color:var(--ink-soft);font-size:16px}

/* ---------- Statuspunkte ---------- */

.dot{width:11px;height:11px;border-radius:50%;flex:none;display:inline-block;color:var(--ink-soft);border:2px solid currentColor}
.dot.fill{background:currentColor}
.state{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:700;white-space:nowrap}
.state.ok{color:var(--ok)}
.state.wait{color:var(--ink-label)}
.state.wait .dot{color:var(--inert-ink)}

/* ---------- Aufruf ---------- */

.cta{background:var(--code-bg);border-bottom:1px solid var(--line)}
.cta .shell{padding-top:74px;padding-bottom:74px}
.cta .row{display:flex;gap:30px;align-items:center;flex-wrap:wrap;margin-top:28px}
.cta .row .mail{font-size:16px;color:var(--ink-soft)}

.hint{
  border:1px solid var(--line);background:var(--surface);
  border-radius:11px;padding:18px 20px;margin-top:32px;
  font-size:15px;color:var(--ink-soft);max-width:64ch;
}
.hint b{color:var(--ink)}

/* ---------- Fuss ---------- */

footer .shell{padding-top:40px;padding-bottom:52px;font-size:14px;color:var(--ink-mute)}
footer .links{display:flex;gap:22px;flex-wrap:wrap;margin-bottom:14px}
footer .links a{color:var(--ink-label);display:inline-block;padding:3px 0}

/* ---------- Rechtstexte ---------- */

.legal .shell{padding-top:56px;padding-bottom:74px;max-width:780px}
.legal h1{font-size:clamp(26px,3.4vw,37px);letter-spacing:-.025em}
.legal h2{font-size:19px;margin-top:40px;color:var(--purple)}
.legal p{margin-top:12px;color:var(--ink-soft)}
.legal ul{margin-top:12px;color:var(--ink-soft);padding-left:20px}
.legal li{margin-top:6px}
.legal .todo{
  background:var(--info-bg);border:1px solid var(--purple-soft);
  border-radius:9px;padding:14px 16px;margin-top:22px;color:var(--ink);font-size:15px;
}

/* ---------- Schmal ---------- */

@media (max-width:880px){
  section > .shell,.cta .shell{padding-top:52px;padding-bottom:52px}
  .rows > div{grid-template-columns:1fr;gap:4px}
  .steps > li{grid-template-columns:2.1rem minmax(0,1fr);gap:4px 16px}
  .steps > li .v{grid-column:2}
  .head nav a.jump{display:none}
  .jumps{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
  .jumps a{font-size:15px;font-weight:700;color:var(--purple);text-decoration:none;padding:5px 0}
  .jumps a:hover{text-decoration:underline;text-underline-offset:4px}
}

@media (max-width:400px){
  .head .wide{display:none}
}

@media (max-width:560px){
  body{font-size:16px}
  :root{--gut:18px}
}

/* ---------- Bewegung: ein einziger Moment ---------- */

/* Der Ruhezustand ist SICHTBAR. Anfangs- und Endwert stehen in den Keyframes,
   nicht als Eigenschaft am Element. Vorher trug .draw selbst
   stroke-dashoffset:1 und .fade opacity:0 - laeuft die Animation dann nicht
   (gedrosselter Tab, Reduced Motion, alter Browser), bleibt die Kurve fuer
   immer unsichtbar. Eine Bewegung darf hoechstens ausfallen, niemals Inhalt
   verschlucken. Der gezeichnete Pfad traegt pathLength="1", damit das
   Strichmuster unabhaengig von der Geometrie exakt aufgeht. */

@media (prefers-reduced-motion:no-preference){
  .figure.seen .draw{animation:draw 1.9s cubic-bezier(.16,1,.3,1) both}
  .figure.seen .fade{animation:fade .9s cubic-bezier(.16,1,.3,1) 1.55s both}
}
@keyframes draw{
  from{stroke-dasharray:1;stroke-dashoffset:1}
  to{stroke-dasharray:1;stroke-dashoffset:0}
}
@keyframes fade{from{opacity:0}to{opacity:1}}