/* Agenten bauen, richtig herum -- gemeinsames Stylesheet fuer Hauptseite und Fallseiten.
   Schriften liegen im Ordner fonts/ (self-hosted, keine externe Quelle). */
@font-face{font-family:"DM Sans";src:url("fonts/dm-sans-latin.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"DM Sans";src:url("fonts/dm-sans-italic-latin.woff2") format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("fonts/jetbrains-mono-latin.woff2") format("woff2");font-weight:100 800;font-style:normal;font-display:swap}

:root{
  --ground:#0c0e12;
  --surface:#14181f;
  --surface-2:#1a1f28;
  --line:#272d38;
  --line-strong:#3c4453;
  --text:#e9ecf2;
  --muted:#99a1b0;
  --accent:#e8a33d;
  --accent-soft:rgba(232,163,61,.13);
  --flow:#7fb0c4;
  --flow-soft:rgba(127,176,196,.12);
  --warn:#d1655a;
  --warn-soft:rgba(209,101,90,.12);
  --shadow:0 1px 0 rgba(255,255,255,.03) inset;
  --sans:"DM Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono","SFMono-Regular",Consolas,monospace;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --ground:#f6f5f2; --surface:#ffffff; --surface-2:#efece6;
    --line:#e1ddd4; --line-strong:#bcb6a9;
    --text:#15171c; --muted:#5d6371;
    --accent:#96590a; --accent-soft:rgba(150,89,10,.10);
    --flow:#2c6a81; --flow-soft:rgba(44,106,129,.10);
    --warn:#a5352a; --warn-soft:rgba(165,53,42,.09);
    --shadow:0 1px 2px rgba(20,22,28,.05);
  }
}
:root[data-theme="light"]{
  --ground:#f6f5f2; --surface:#ffffff; --surface-2:#efece6;
  --line:#e1ddd4; --line-strong:#bcb6a9;
  --text:#15171c; --muted:#5d6371;
  --accent:#96590a; --accent-soft:rgba(150,89,10,.10);
  --flow:#2c6a81; --flow-soft:rgba(44,106,129,.10);
  --warn:#a5352a; --warn-soft:rgba(165,53,42,.09);
  --shadow:0 1px 2px rgba(20,22,28,.05);
}

*{box-sizing:border-box}
body{
  background:var(--ground); color:var(--text);
  font-family:var(--sans); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:820px;margin:0 auto;padding:56px 24px 96px}
p{margin:0}
ol,ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}

/* ---------- type ---------- */
.eyebrow{font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
h1{font-family:var(--mono);font-weight:700;font-size:clamp(2rem,6vw,3.1rem);line-height:1.06;letter-spacing:-.03em;margin:0;text-wrap:balance}
h2{font-family:var(--sans);font-weight:700;font-size:clamp(1.35rem,3.4vw,1.75rem);line-height:1.2;letter-spacing:-.015em;margin:0;text-wrap:balance}
h3{font-family:var(--sans);font-weight:700;font-size:1.02rem;line-height:1.3;margin:0;letter-spacing:-.005em}
.lede{font-size:1.12rem;line-height:1.6;color:var(--muted);max-width:62ch}
.note{color:var(--muted);font-size:.95rem;line-height:1.6}
strong{font-weight:700;color:var(--text)}

/* ---------- header ---------- */
header.top{display:flex;flex-direction:column;gap:22px;padding-bottom:34px;border-bottom:1px solid var(--line)}
.rule-row{display:flex;align-items:center;gap:14px}
.rule-row .bar{height:2px;flex:1;background:var(--accent);opacity:.55}

/* ---------- kurzfassung ---------- */
.tldr{
  background:var(--surface-2);
  border-left:2px solid var(--flow);
  padding:20px 22px;
  display:flex;flex-direction:column;gap:10px;
}
.tldr .k{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--flow)}
.tldr p{font-size:1rem;line-height:1.6;max-width:64ch}

/* ---------- sections ---------- */
main{display:flex;flex-direction:column}
section{display:flex;flex-direction:column;gap:22px;padding:46px 0;border-bottom:1px solid var(--line)}
section:last-of-type{border-bottom:0}
.sec-head{display:flex;gap:18px;align-items:baseline}
.sec-num{font-family:var(--mono);font-size:.82rem;font-weight:700;color:var(--accent);letter-spacing:.05em;flex:none;width:2.4ch;padding-top:.15em}
.sec-head p{max-width:60ch}
.sec-title-block{display:flex;flex-direction:column;gap:12px}
.body-indent{padding-left:calc(2.4ch + 18px)}
.stack{display:flex;flex-direction:column;gap:16px}
@media (max-width:620px){.body-indent{padding-left:0}.sec-head{gap:12px}}

/* ---------- glossar inline ---------- */
.gl{display:inline}
.gl-t{
  font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;
  text-transform:inherit;letter-spacing:inherit;
  border-bottom:1px dotted var(--accent);
}
.gl-t::after{content:"\00a0?";font-family:var(--mono);font-size:.72em;color:var(--accent);vertical-align:.25em;letter-spacing:0}
.gl-t[aria-expanded="true"]{background:var(--accent-soft)}
.gl-d{
  /* Erklärungen lesen sich immer als normaler Fließtext, auch wenn sie
     in einer Versal-Zeile stehen */
  color:var(--text);background:var(--accent-soft);
  box-shadow:0 0 0 3px var(--accent-soft);
  font-family:var(--sans);font-size:.92rem;font-weight:400;
  text-transform:none;letter-spacing:normal;line-height:1.5;
}

/* ---------- gate ---------- */
.gate{display:flex;flex-direction:column;gap:2px;border-left:2px solid var(--accent)}
.gate-item{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;padding:16px 18px;background:var(--surface)}
.gate-item + .gate-item{border-top:1px solid var(--line)}
.gate-verdict{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;padding:.32em .6em;border:1px solid var(--line-strong);color:var(--muted);align-self:start;white-space:nowrap;grid-row:1;grid-column:1}
.gate-item.yes .gate-verdict{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.gate-item h3,.gate-item p{grid-column:2}
.gate-item p{color:var(--muted);font-size:.96rem}
@media (max-width:520px){
  .gate-item{grid-template-columns:1fr}
  .gate-item h3,.gate-item p,.gate-item .gate-verdict{grid-column:1}
  .gate-verdict{justify-self:start;margin-bottom:6px}
}

/* ---------- conditions ---------- */
.cond{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.cond li{display:grid;grid-template-columns:2.2ch 1fr;gap:14px;padding:13px 2px;border-bottom:1px solid var(--line);font-size:.99rem}
.cond .n{font-family:var(--mono);font-size:.82rem;color:var(--accent);padding-top:.2em}

/* ---------- decision helper ---------- */
.helper{border:1px solid var(--accent);background:var(--surface);display:flex;flex-direction:column}
.helper-bar{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:12px 20px;border-bottom:1px solid var(--line);background:var(--accent-soft);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);
}
.helper-body{padding:26px 22px;display:flex;flex-direction:column;gap:18px}
.q-text{font-size:1.16rem;font-weight:700;line-height:1.35;letter-spacing:-.01em;text-wrap:balance;max-width:52ch}
.q-hint{font-size:.94rem;color:var(--muted);max-width:58ch}
.q-btns{display:flex;gap:10px;flex-wrap:wrap}
.btn{
  font-family:var(--mono);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.85em 1.9em;background:var(--surface-2);color:var(--text);
  border:1px solid var(--line-strong);cursor:pointer;transition:background .12s,border-color .12s;
}
.btn:hover{border-color:var(--accent);background:var(--accent-soft)}
.btn-ghost{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  background:none;border:0;color:var(--muted);cursor:pointer;padding:.4em 0;text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:var(--line-strong);
}
.btn-ghost:hover{color:var(--text)}
.helper-foot{padding:0 22px 20px;display:flex;gap:18px}
.res{display:flex;flex-direction:column;gap:14px}
.res-tag{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  align-self:flex-start;padding:.4em .8em;border:1px solid currentColor;
}
.res.v-go .res-tag{color:var(--accent);background:var(--accent-soft)}
.res.v-alt .res-tag{color:var(--flow);background:var(--flow-soft)}
.res.v-stop .res-tag{color:var(--warn);background:var(--warn-soft)}
.res h3{font-size:1.24rem}
.res p{font-size:1rem;color:var(--muted);max-width:60ch}
.res .next{
  border-left:2px solid var(--line-strong);padding-left:14px;
  font-size:.96rem;color:var(--text);max-width:60ch;
}
.res.v-go .next{border-color:var(--accent)}
.res.v-alt .next{border-color:var(--flow)}
.res.v-stop .next{border-color:var(--warn)}
.trail{display:flex;flex-wrap:wrap;gap:6px}
.trail span{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line);padding:.3em .55em;
}

/* ---------- figures ---------- */
figure{margin:0;display:flex;flex-direction:column;gap:12px}
.fig-scroll{overflow-x:auto;padding-bottom:4px}
figure svg{display:block;max-width:100%;height:auto;min-width:560px}
figcaption{font-size:.9rem;color:var(--muted);line-height:1.55;max-width:62ch}
.dg-box{fill:var(--surface);stroke:var(--line-strong);stroke-width:1}
.dg-box-live{fill:var(--accent-soft);stroke:var(--accent);stroke-width:1.4}
.dg-box-exit{fill:none;stroke:var(--line-strong);stroke-width:1;stroke-dasharray:4 3}
.dg-label{fill:var(--text);font-family:var(--sans);font-size:14px;font-weight:500}
.dg-label-sm{fill:var(--muted);font-family:var(--mono);font-size:11px;letter-spacing:.02em}
.dg-tag{fill:var(--muted);font-family:var(--mono);font-size:11px;letter-spacing:.14em}
.dg-tag-live{fill:var(--accent);font-family:var(--mono);font-size:11px;letter-spacing:.14em}
.dg-line{stroke:var(--line-strong);stroke-width:1.4;fill:none}
.dg-line-live{stroke:var(--accent);stroke-width:1.6;fill:none}
.dg-line-flow{stroke:var(--flow);stroke-width:1.6;fill:none}
.dg-line-dash{stroke:var(--line-strong);stroke-width:1.2;fill:none;stroke-dasharray:4 3}
.mk-muted{fill:var(--line-strong)}
.mk-live{fill:var(--accent)}
.mk-flow{fill:var(--flow)}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line)}
@media (max-width:660px){.cards{grid-template-columns:1fr}}
.card{background:var(--surface);padding:22px 20px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow)}
.card ul{display:flex;flex-direction:column;gap:8px}
.card li{font-size:.95rem;line-height:1.5;color:var(--muted);padding-left:16px;position:relative}
.card li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:1px;background:var(--line-strong)}
.card .not{color:var(--warn)}
.card li.not::before{background:var(--warn)}
.card p{font-size:.95rem;line-height:1.5;color:var(--muted)}

/* ---------- steps ---------- */
.steps{display:flex;flex-direction:column;gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.steps li{background:var(--surface);display:grid;grid-template-columns:2.6ch 1fr;gap:16px;padding:14px 18px;align-items:baseline}
.steps .n{font-family:var(--mono);font-size:.8rem;color:var(--muted)}
.steps li.loop{background:var(--surface-2)}
.steps li.loop .n{color:var(--accent)}

/* ---------- fallstudien ---------- */
.faelle{display:flex;flex-direction:column;gap:24px}
.fall{border:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column}
.fall-head{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding:16px 20px;border-bottom:1px solid var(--line)}
.fall-head h3{font-size:1.1rem}
.fall.ja{border-left:2px solid var(--accent)}
.fall.nein{border-left:2px solid var(--flow)}
.befund{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;padding:.4em .75em;white-space:nowrap}
.fall.ja .befund{color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent)}
.fall.nein .befund{color:var(--flow);background:var(--flow-soft);border:1px solid var(--flow)}
.fall-body{padding:20px;display:flex;flex-direction:column;gap:18px}
.fall-row{display:grid;grid-template-columns:11ch 1fr;gap:6px 18px}
@media (max-width:560px){.fall-row{grid-template-columns:1fr;gap:4px}}
.fall-row .lab{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding-top:.35em}
.fall-row .val{font-size:.98rem;line-height:1.55}
.pruef{display:flex;flex-direction:column;gap:7px}
.pruef li{display:grid;grid-template-columns:3.6em 1fr;gap:10px;font-size:.95rem;color:var(--muted);align-items:baseline}
.pruef .mark{font-family:var(--mono);font-size:.85rem}
.pruef .ok .mark{color:var(--accent)}
.pruef .no .mark{color:var(--warn)}

/* ---------- checkliste ---------- */
.cl-bar{display:flex;align-items:center;gap:14px;padding-bottom:4px}
.cl-track{flex:1;height:3px;background:var(--line);position:relative;overflow:hidden}
.cl-fill{position:absolute;inset:0 auto 0 0;width:0;background:var(--accent);transition:width .2s}
.cl-count{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.checks{display:flex;flex-direction:column;gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.check{background:var(--surface);display:block;padding:18px 20px;cursor:pointer}
.check-in{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;align-items:start}
.check input{
  appearance:none;-webkit-appearance:none;
  width:18px;height:18px;margin:0;flex:none;
  border:1px solid var(--line-strong);background:var(--surface-2);
  cursor:pointer;position:relative;grid-row:1;margin-top:.15em;
}
.check input:checked{border-color:var(--accent);background:var(--accent-soft)}
.check input:checked::after{
  content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;
  border:solid var(--accent);border-width:0 2px 2px 0;transform:rotate(42deg);
}
.check .k{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);grid-column:2}
.check p{font-size:.98rem;color:var(--muted);max-width:62ch;grid-column:2;margin-top:5px}
.check input:checked ~ .k{color:var(--muted)}

/* ---------- bauformen ---------- */
.formen{display:flex;flex-direction:column;gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.form{background:var(--surface);padding:18px 20px;display:grid;grid-template-columns:2.6ch 1fr auto;gap:6px 16px;align-items:baseline}
.form .n{font-family:var(--mono);font-size:.8rem;color:var(--muted);grid-row:1}
.form h3{grid-column:2}
.form p{grid-column:2;font-size:.96rem;color:var(--muted);max-width:60ch;margin-top:4px}
.kosten{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.35em .6em;border:1px solid var(--line-strong);color:var(--muted);white-space:nowrap;grid-row:1;
}
.kosten.k-null{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.kosten.k-hoch{border-color:var(--warn);color:var(--warn);background:var(--warn-soft)}
@media (max-width:600px){
  .form{grid-template-columns:2.6ch 1fr}
  .kosten{grid-row:auto;grid-column:2;justify-self:start;margin-top:8px}
}

/* ---------- punkte ohne checkbox ---------- */
.pkte{display:flex;flex-direction:column;gap:24px}
.pkt{display:flex;flex-direction:column;gap:6px}
.pkt .k{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.pkt p{font-size:.98rem;color:var(--muted);max-width:64ch}

/* ---------- stationen ---------- */
.stationen{display:flex;flex-direction:column}
.station{display:grid;grid-template-columns:26px 1fr;gap:0 18px}
.st-rail{grid-column:1;display:flex;flex-direction:column;align-items:center;gap:6px}
.st-dot{
  width:26px;height:26px;flex:none;display:grid;place-items:center;
  border:1px solid var(--line-strong);background:var(--surface);
  font-family:var(--mono);font-size:.66rem;color:var(--muted);
}
.station.modell .st-dot{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.station.mensch .st-dot{border-color:var(--flow);color:var(--flow);background:var(--flow-soft)}
.st-line{flex:1;width:1px;background:var(--line);min-height:14px}
.st-main{grid-column:2;padding-bottom:26px;display:flex;flex-direction:column;gap:8px}
.station:last-child .st-main{padding-bottom:0}
.st-head{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.st-tag{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);padding:.25em .5em}
.station.modell .st-tag{color:var(--accent);border-color:var(--accent)}
.station.mensch .st-tag{color:var(--flow);border-color:var(--flow)}
.st-main p{font-size:.98rem;color:var(--muted);max-width:62ch}
.st-warum{border-left:2px solid var(--line-strong);padding-left:14px;font-size:.94rem;color:var(--text);max-width:62ch}
.station.modell .st-warum{border-color:var(--accent)}
.station.mensch .st-warum{border-color:var(--flow)}

/* ---------- legende ---------- */
.legende{display:flex;gap:20px;flex-wrap:wrap;font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.legende span{display:flex;align-items:center;gap:7px}
.legende i{width:11px;height:11px;border:1px solid var(--line-strong);background:var(--surface);display:block}
.legende i.m{border-color:var(--accent);background:var(--accent)}
.legende i.h{border-color:var(--flow);background:var(--flow)}

/* ---------- weitere diagramm-rollen ---------- */
.dg-box-warn{fill:var(--warn-soft);stroke:var(--warn);stroke-width:1.4}
.dg-box-flow{fill:var(--flow-soft);stroke:var(--flow);stroke-width:1.4}
.dg-tag-warn{fill:var(--warn);font-family:var(--mono);font-size:11px;letter-spacing:.1em}
.dg-line-warn{stroke:var(--warn);stroke-width:1.8;fill:none}
.dg-label-xs{fill:var(--text);font-family:var(--sans);font-size:12px;font-weight:500}

/* ---------- myths ---------- */
.myths{display:flex;flex-direction:column;gap:1px;background:var(--line)}
.myth{background:var(--surface);padding:18px 20px;display:flex;flex-direction:column;gap:7px}
.myth .claim{font-family:var(--mono);font-size:.92rem;color:var(--muted);text-decoration:line-through;text-decoration-color:var(--warn);text-decoration-thickness:1px}
.myth .fix{font-size:.99rem}

/* ---------- footer ---------- */
footer{margin-top:56px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* ---------- links ---------- */
a{color:var(--text);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px}
a:hover{text-decoration-color:var(--accent)}
h4{font-family:var(--sans);font-weight:700;font-size:1rem;line-height:1.3;margin:0}

/* ---------- seitenleiste oben (werkstatt-navigation) ---------- */
.site{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-bottom:22px;font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.site a{text-decoration:none;color:var(--muted)}
.site a:hover{color:var(--text)}
.site .crumbs{display:flex;gap:10px;flex-wrap:wrap}
.site .crumbs span::before{content:"/";margin-right:10px;color:var(--line-strong)}
.site .crumbs span:first-child::before{content:none}
.site .cur{color:var(--accent)}

/* ---------- inhalt (sprungmarken) ---------- */
.toc{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media (max-width:560px){.toc{grid-template-columns:1fr}}
.toc a{background:var(--surface);padding:10px 14px;display:grid;grid-template-columns:2.4ch 1fr;gap:12px;text-decoration:none;font-size:.9rem;color:var(--text)}
.toc a:hover{background:var(--surface-2)}
.toc .n{font-family:var(--mono);font-size:.72rem;color:var(--accent);padding-top:.2em}

/* ---------- aufklappbare kurzfassung ---------- */
details.fold{border:1px solid var(--line);background:var(--surface)}
details.fold summary{cursor:pointer;padding:12px 18px;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);list-style:none;display:flex;gap:10px;align-items:center}
details.fold summary::-webkit-details-marker{display:none}
details.fold summary::before{content:"+";color:var(--accent);font-weight:700;width:1ch}
details.fold[open] summary::before{content:"\2212"}
details.fold .fold-body{padding:6px 18px 18px;display:flex;flex-direction:column;gap:12px}
.baum{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.baum li{display:grid;grid-template-columns:2.2ch 1fr;gap:12px;padding:10px 2px;border-bottom:1px solid var(--line);font-size:.94rem;color:var(--muted)}
.baum .n{font-family:var(--mono);font-size:.8rem;color:var(--accent);padding-top:.2em}
.baum b{color:var(--text);font-weight:500}

/* ---------- fallkacheln (abschnitt 04, eigene faelle) ---------- */
.kacheln{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media (max-width:660px){.kacheln{grid-template-columns:1fr}}
.kachel{background:var(--surface);padding:18px 20px;display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--text)}
.kachel:hover{background:var(--surface-2)}
.kachel .kopf{display:flex;justify-content:space-between;gap:10px;align-items:baseline;flex-wrap:wrap}
.kachel h3{font-size:1rem}
.kachel p{font-size:.93rem;color:var(--muted);line-height:1.5}
.kachel .lehre{border-left:2px solid var(--accent);padding-left:12px;font-size:.9rem;color:var(--text)}
.tag{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;padding:.3em .55em;border:1px solid var(--line-strong);color:var(--muted);white-space:nowrap}
.tag.agent{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.tag.workflow{border-color:var(--flow);color:var(--flow);background:var(--flow-soft)}
.tag.prompt{border-color:var(--line-strong)}
.tag.infra{border-color:var(--warn);color:var(--warn);background:var(--warn-soft)}

/* ---------- zahlenzeile ---------- */
.zahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.zahl{background:var(--surface);padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.zahl .v{font-family:var(--mono);font-size:1.35rem;font-weight:700;letter-spacing:-.02em;color:var(--accent)}
.zahl .l{font-size:.82rem;color:var(--muted);line-height:1.4}
.zahl.warn .v{color:var(--warn)}
.zahl.flow .v{color:var(--flow)}

/* ---------- tabellen ---------- */
.tbl-scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:.93rem}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500}
td.num,th.num{text-align:right;font-family:var(--mono);font-size:.88rem;white-space:nowrap}

/* ---------- quellen ---------- */
.quellen{font-size:.86rem;color:var(--muted);display:flex;flex-direction:column;gap:6px}
.quellen code,code{font-family:var(--mono);font-size:.84em;background:var(--surface-2);padding:.1em .4em;border:1px solid var(--line)}
pre{font-family:var(--mono);font-size:.82rem;line-height:1.5;background:var(--surface-2);border:1px solid var(--line);padding:14px 16px;overflow-x:auto;white-space:pre;color:var(--text)}
pre code{background:none;border:0;padding:0;font-size:inherit}

/* ---------- hinweiskasten ---------- */
.hinweis{border-left:2px solid var(--warn);background:var(--warn-soft);padding:14px 18px;font-size:.95rem;line-height:1.55;max-width:66ch}
.hinweis .k{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--warn);display:block;margin-bottom:6px}
.merk{border-left:2px solid var(--accent);background:var(--accent-soft);padding:14px 18px;font-size:.98rem;line-height:1.55;max-width:66ch}
.merk .k{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:6px}

/* ---------- weiter / zurueck ---------- */
.weiter{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:40px;padding-top:20px;border-top:1px solid var(--line)}
.weiter a{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--muted)}
.weiter a:hover{color:var(--accent)}

/* ---------- schluss ---------- */
.schluss{display:flex;flex-direction:column;gap:14px;max-width:64ch}
.schluss p{font-size:1rem;line-height:1.6}
footer nav{display:flex;gap:16px;flex-wrap:wrap}
footer a{text-decoration:none;color:var(--muted)}
footer a:hover{color:var(--text)}

/* ---------- werkstatt-uebersicht: liste der stuecke ---------- */
.stuecke{display:flex;flex-direction:column;border-top:1px solid var(--line);margin-top:8px}
.stueck{display:flex;flex-direction:column;gap:8px;padding:28px 0;border-bottom:1px solid var(--line)}
.stueck h2{font-size:clamp(1.2rem,3vw,1.5rem)}
.stueck h2 a{color:var(--text);text-decoration:none}
.stueck h2 a:hover{color:var(--accent)}
.stueck .stueck-untertitel{color:var(--muted);font-size:1rem;line-height:1.55;max-width:60ch}
.stueck .stueck-stand{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* ---------- schrittlisten der animationen ---------- */
.anim-steps{
  list-style:none;
  margin:16px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  border-top:1px solid var(--line);
}
.anim-steps li{
  display:grid;
  grid-template-columns:2.6ch 1fr;
  gap:12px;
  padding:9px 2px;
  font-size:.92rem;
  line-height:1.5;
  color:var(--muted);
  border-bottom:1px solid var(--line);
  transition:color .15s ease, background-color .15s ease;
}
.anim-steps li .n{
  font-family:var(--mono);
  font-size:.78rem;
  color:var(--muted);
  padding-top:.15em;
}
.anim-steps li.is-active{
  color:var(--text);
  background:var(--accent-soft);
}
.anim-steps li.is-active .n{
  color:var(--accent);
}

/* ---------- druck ---------- */
@media print{
  :root{--ground:#fff;--surface:#fff;--surface-2:#f2f2f2;--line:#ccc;--line-strong:#999;--text:#111;--muted:#444;--accent:#8a4f00;--accent-soft:#f5ecd9;--flow:#1f5d72;--flow-soft:#e3eef2;--warn:#8f2f26;--warn-soft:#f3e3e0}
  body{font-size:11pt}
  .wrap{padding:0;max-width:none}
  .site,.helper,.weiter,.btn,.btn-ghost{display:none!important}
  details.fold{border:0}details.fold summary{display:none}details.fold:not([open]) .fold-body{display:flex}
  figure svg{min-width:0}
  a{text-decoration:none}
  section{break-inside:avoid-page}
}