/* datadanny.de — gemeinsames Grundgeruest aller Projektseiten.
 *
 * Dieses Blatt enthaelt Struktur, Typoskala-Anwendung und Abstaende — alles,
 * was auf jeder Seite gleich aussehen soll. Es enthaelt KEINE Farben und KEINE
 * Schriftnamen; beides liefert die Seite selbst ueber Token in ihrem
 * <style>-Block:
 *
 *   --ground --surface --surface-2 --ink --ink-2 --ink-3 --line --line-soft
 *   --akzent --akzent-fill --akzent-line   (der Leitton der Seite)
 *   --warn --shadow
 *   --s--1 --s-0 --s-1 --s-2 --s-3 --s-4 --s-5   Typoskala
 *   --measure --pad
 *   --schrift-display --schrift-text --schrift-mono
 *
 * Damit behaelt jede Seite ihr eigenes Farbsystem und ihre eigenen Schriften,
 * waehrend Aufbau und Abstaende verbindlich gleich bleiben.
 *
 * Wer hier etwas aendert, aendert es auf allen eingebundenen Seiten
 * gleichzeitig. Vorher pruefen: werkzeug/stil-pruefen.py
 */

*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--schrift-text);font-size:var(--s-0);line-height:1.68;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--schrift-display);font-weight:600;line-height:1.14;
  letter-spacing:-.022em;text-wrap:balance;margin:0}
p{margin:0}
a{color:var(--akzent)}
:focus-visible{outline:2px solid var(--akzent);outline-offset:3px;border-radius:3px}
sub,sup{font-size:.68em;line-height:0;position:relative;vertical-align:baseline}
sup{top:-.55em} sub{bottom:-.22em}
.mono{font-family:var(--schrift-mono)}
.eyebrow{font-family:var(--schrift-mono);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-2);margin:0 0 .5rem}
.wrap{width:min(1120px,100% - 2*var(--pad));margin-inline:auto}
.lead{max-width:var(--measure)}

.sitebar{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  width:min(1120px,100% - 2*var(--pad));margin-inline:auto;padding:1.1rem 0 .9rem;
  font-family:var(--schrift-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.sitebar a{color:var(--ink-2);text-decoration:none}.sitebar a:hover{color:var(--akzent)}
.sitebar span{color:var(--ink-3)}
.sitefoot{border-top:1px solid var(--line-soft)}
.sitefoot__inner{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 1.5rem;
  padding:1.3rem 0 2.6rem;font-family:var(--schrift-mono);font-size:.72rem;color:var(--ink-3)}
.sitefoot a{color:inherit;text-decoration:none}.sitefoot a:hover{color:var(--akzent)}

#progress{position:fixed;inset:0 auto auto 0;height:2px;width:0;background:var(--akzent);z-index:60;transition:width .1s linear}
.chapternav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--ground) 88%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line-soft)}
.chapternav__inner{display:flex;gap:.15rem;align-items:center;overflow-x:auto;scrollbar-width:none;padding:.5rem 0}
.chapternav__inner::-webkit-scrollbar{display:none}
.chapternav a{flex:none;font-family:var(--schrift-mono);font-size:.72rem;color:var(--ink-3);
  text-decoration:none;padding:.34rem .6rem;border-radius:999px;white-space:nowrap;border:1px solid transparent}
.chapternav a:hover{color:var(--ink)}
.chapternav a[aria-current="true"]{color:var(--akzent);border-color:var(--akzent-line);background:var(--akzent-fill)}

.hero{padding:clamp(2.6rem,8vw,5.5rem) 0 clamp(2rem,5vw,3rem)}
.hero h1{font-size:var(--s-5);letter-spacing:-.032em}
.hero h1 em{font-style:normal;color:var(--akzent)}
.hero__lead{margin-top:1.4rem;max-width:57ch;font-size:var(--s-1);color:var(--ink-2)}
.tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.6rem}
.tag{font-family:var(--schrift-mono);font-size:.72rem;border:1px solid var(--line);
  border-radius:999px;padding:.26rem .66rem;color:var(--ink-2);background:var(--surface)}

section[id]{scroll-margin-top:4.2rem}
.block{padding:clamp(2.4rem,6vw,4.2rem) 0}
.block--tint{background:var(--surface);border-block:1px solid var(--line-soft)}
.block:not(.block--tint)+.block:not(.block--tint){border-top:1px solid var(--line-soft)}
.blockhead{margin-bottom:1rem}
.blockhead .eyebrow{color:var(--akzent)}
.blockhead h2{font-size:var(--s-3)}
.body>*+*{margin-top:1.05rem}
.body.prose{max-width:var(--measure)}
.body h3{font-size:var(--s-1);margin-top:1.8rem}

.formel{font-family:var(--schrift-text);font-size:var(--s-1);text-align:center;line-height:2;
  padding:1.05rem 1.1rem;background:var(--surface-2);border:1px solid var(--line-soft);
  border-radius:10px;overflow-x:auto}




pre{margin:0;padding:1rem 1.1rem;background:var(--surface-2);border:1px solid var(--line-soft);
  border-radius:10px;overflow-x:auto;font-family:var(--schrift-mono);
  font-size:.82rem;line-height:1.62;color:var(--ink-2)}
pre b{color:var(--ink);font-weight:500}
pre .c{color:var(--ink-3);font-style:italic}
code{font-family:var(--schrift-mono);font-size:.88em;background:var(--akzent-fill);
  padding:.08em .34em;border-radius:4px;color:var(--ink)}
.codehead{font-family:var(--schrift-mono);font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:.4rem}

.claim{font-family:var(--schrift-display);font-weight:600;font-size:var(--s-2);
  line-height:1.3;letter-spacing:-.02em;max-width:45ch;color:var(--ink);
  border-left:2px solid var(--akzent);padding-left:1.1rem}
.satz{border:1px solid var(--akzent-line);border-left-width:3px;border-radius:10px;
  background:var(--akzent-fill);padding:1rem 1.2rem;max-width:var(--measure)}
.satz .kicker{font-family:var(--schrift-mono);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--akzent);margin-bottom:.4rem}
.cards{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-top:1.4rem}
.card{background:var(--surface-2);border:1px solid var(--line-soft);border-radius:12px;
  padding:1.1rem;box-shadow:var(--shadow)}
.card .kicker{font-family:var(--schrift-mono);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:.4rem}
.card h3{font-size:var(--s-1);margin:0 0 .35rem}
.card p{font-size:var(--s--1);color:var(--ink-2);line-height:1.6}
.card--b{border-color:var(--akzent2-line)} .card--b .kicker{color:var(--akzent2)}
.card--f{border-color:var(--akzent-line)}     .card--f .kicker{color:var(--akzent)}

.dia{margin-top:1.6rem}
.dia__head{font-family:var(--schrift-mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
.dia__sub{margin:.25rem 0 .9rem;color:var(--ink-2);font-size:var(--s--1);max-width:62ch}
.dia figcaption{margin-top:.8rem;font-size:var(--s--1);color:var(--ink-2);max-width:66ch}
.dia figcaption b{color:var(--ink);font-weight:600}
.scrollx{overflow-x:auto}
.scrollx>svg{display:block;min-width:620px;width:100%;height:auto}



.controls{display:flex;flex-wrap:wrap;gap:.45rem;margin:0 0 .9rem}
button.btn{font-family:var(--schrift-mono);font-size:.75rem;cursor:pointer;
  padding:.4rem .8rem;border-radius:999px;border:1px solid var(--line);
  background:var(--surface-2);color:var(--ink-2)}
button.btn:hover{color:var(--ink);border-color:var(--ink-3)}
button.btn[aria-pressed="true"]{color:var(--akzent);border-color:var(--akzent-line);background:var(--akzent-fill)}


input[type=range]{flex:1;accent-color:var(--akzent);max-width:22rem}

.panel{margin-top:.9rem;padding:.9rem 1rem;border:1px solid var(--line-soft);
  border-radius:10px;background:var(--surface);font-size:var(--s--1);color:var(--ink-2)}
.panel h4{font-size:var(--s-0);margin-bottom:.35rem;color:var(--ink)}

svg text{font-family:var(--schrift-text)}
svg .mn{font-family:var(--schrift-mono);fill:var(--ink);font-size:12px}
svg .lbl-s{fill:var(--ink-3);font-family:var(--schrift-mono);font-size:11px}
svg .lbl-b{fill:var(--akzent2);font-family:var(--schrift-mono);font-size:11px}
svg .lbl-f{fill:var(--akzent);font-family:var(--schrift-mono);font-size:11px}

.table-holder{overflow-x:auto;margin-top:1.2rem}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:var(--s--1)}
th,td{text-align:left;padding:.55rem .8rem;border-bottom:1px solid var(--line-soft);vertical-align:top}
thead th{font-family:var(--schrift-mono);font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);font-weight:400}
tbody tr:last-child td{border-bottom:0}
td.term{font-family:var(--schrift-mono);color:var(--ink);white-space:nowrap}
td.num{font-family:var(--schrift-mono);font-variant-numeric:tabular-nums;white-space:nowrap}

.caveat{margin-top:1.6rem;padding:1rem 1.1rem;border:1px dashed var(--line);border-radius:10px;max-width:var(--measure)}
.caveat h4{font-family:var(--schrift-mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--warn);font-weight:400;margin-bottom:.45rem}
.caveat p{font-size:var(--s--1);color:var(--ink-2)}
.caveat p+p{margin-top:.6rem}

/* ─── Weiterlesen ───────────────────────────────────────── */
.weiter{padding:clamp(2.2rem,5vw,3.4rem) 0;border-top:1px solid var(--line-soft)}
.weiter__head{font-family:var(--schrift-mono);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:1.1rem}
.weiter__grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.weiter a{display:block;text-decoration:none;color:inherit;background:var(--surface-2);
  border:1px solid var(--line-soft);border-radius:12px;padding:1.1rem 1.2rem}
.weiter a:hover{border-color:var(--akzent-line)}
.weiter .nr{font-family:var(--schrift-mono);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--akzent);display:block;margin-bottom:.4rem}
.weiter .tt{font-size:var(--s-1);font-weight:600;display:block;margin-bottom:.35rem;line-height:1.25}
.weiter .ms{font-size:var(--s--1);color:var(--ink-2);line-height:1.55}
.weiter .go{font-family:var(--schrift-mono);font-size:.72rem;color:var(--ink-3);display:block;margin-top:.7rem}
.weiter a:hover .go{color:var(--akzent)}

footer{padding:2.6rem 0 1.6rem;border-top:1px solid var(--line-soft)}
footer p{max-width:var(--measure);font-size:var(--s--1);color:var(--ink-3)}
footer p+p{margin-top:.7rem}
footer a{color:var(--ink-2)}

@media (prefers-reduced-motion:reduce){*{transition-duration:.001ms!important;animation-duration:.001ms!important}}
html{scroll-behavior:smooth}