/* /feder als normaler (heller) Fachbeitrag: läuft zusätzlich zur kimu.css.
   Textkörper hell (kimu.css-Prosa); heft-eigene Klassen hier ergänzt.
   Die interaktiven Diagramme/Animationen bleiben dunkle Karten – eigene
   --fd-*-Variablen, damit sie die Website-Stile nicht berühren. */
:root{
  --fd-bg2:#111118; --fd-bg3:#16161F; --fd-line:#23232E; --fd-line2:#2E2E3B;
  --fd-text:#E6E6EC; --fd-muted:#9A9AAA; --fd-faint:#6C6C7C; --fd-warm:#E0A458;
  --fd-teal:#0ABAB5; --fd-tealdim:rgba(10,186,181,.14); --fd-tealline:rgba(10,186,181,.38);
  --fd-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --fd-disp:"Abel",system-ui,sans-serif;
  --fd-tealtext:#07736F; --fd-tealdeep:#065C59;
  --fd-ink:#101418; --fd-inksoft:#4A5A5C; --fd-inkfaint:#6C7A7C;
  --fd-tint:#E7F8F7; --fd-linel:#E4EAEA;
}

/* ---------- helle Text-/Struktur-Elemente ---------- */
.prose .teil{scroll-margin-top:24px}
.prose .two{display:grid;gap:18px}
.prose b{font-weight:400;color:var(--fd-ink)}
.prose sub{font-size:.7em}
.prose .kicker{display:block;font-family:var(--fd-disp);color:var(--fd-tealtext);letter-spacing:.16em;text-transform:uppercase;font-size:.8rem;margin:2.8em 0 .3em}
.prose > .teil:first-child .kicker{margin-top:.2em}
.prose .lede{font-size:1.18rem;line-height:1.55;color:var(--fd-inksoft);margin:0 0 22px}
.prose .formula{font-family:var(--fd-mono);font-size:1.15rem;text-align:center;color:var(--fd-ink);margin:14px 0 24px}
.prose .pull{border-left:3px solid var(--fd-teal);padding:6px 0 6px 24px;margin:34px 0;font-family:var(--fd-disp);font-size:1.5rem;line-height:1.4;color:var(--fd-tealdeep)}
.prose .pull p{margin:0}
.prose .cap{font-family:var(--fd-disp);font-size:.85rem;color:var(--fd-inkfaint);letter-spacing:.03em;margin-top:10px}

/* Inhaltsverzeichnis (hell) */
.prose nav.toc{margin:30px 0;padding:22px 26px;background:var(--fd-tint);border:1px solid var(--fd-linel);border-radius:8px}
.prose nav.toc h3{font-size:.8rem;font-family:var(--fd-disp);letter-spacing:.14em;text-transform:uppercase;color:var(--fd-inkfaint);margin:0 0 12px}
.prose nav.toc ul{margin:0;padding-left:0;list-style:none;font-family:var(--fd-disp);font-size:1.06rem;line-height:1.7;display:grid;gap:4px}
.prose nav.toc li{margin:0;padding-left:0}
.prose nav.toc li::before{content:none;display:none}
.prose nav.toc a{color:var(--fd-ink)}
.prose nav.toc a:hover{color:var(--fd-tealdeep)}

/* Serie / Drei-Stufen / Kästen (hell) */
.prose .series{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:30px 0 6px}
.prose .series a,.prose .series span{border:1px solid var(--fd-linel);border-radius:8px;padding:12px 12px;color:var(--fd-ink);font-family:var(--fd-disp);font-size:.95rem;line-height:1.25;background:#fff;display:block;text-decoration:none}
.prose .series small{display:block;color:var(--fd-tealtext);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:4px}
.prose .series .now{border-color:var(--fd-teal);background:var(--fd-tint)}
.prose .series .soon,.prose .series .soon small{color:var(--fd-inkfaint)}
.prose .stufen{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:26px 0}
.prose .stufen>div{background:#fff;border:1px solid var(--fd-linel);border-radius:8px;padding:16px 14px;text-align:center}
.prose .stufen>div.hi{border-color:var(--fd-teal);background:var(--fd-tint)}
.prose .stufen .st{font-family:var(--fd-disp);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fd-inkfaint);margin:0 0 6px}
.prose .stufen .hi .st{color:var(--fd-tealtext)}
.prose .stufen h3{font-size:1.05rem;margin:0 0 6px;color:var(--fd-ink)}
.prose .stufen p{font-size:.92rem;color:var(--fd-inksoft);margin:0;line-height:1.45}
.prose .stufen .how{margin-top:10px;padding-top:8px;border-top:1px solid var(--fd-linel);font-family:var(--fd-mono);font-size:.78rem;color:var(--fd-inkfaint)}
.prose .stufen .hi .how{color:var(--fd-tealtext);border-color:var(--fd-tealline)}
.prose .box{margin:28px 0;padding:22px 26px;background:var(--fd-tint);border:1px solid var(--fd-linel);border-left:3px solid var(--fd-teal);border-radius:8px}
.prose .box .kicker{margin:0 0 6px;color:var(--fd-tealdeep)}
.prose .box h3{margin:0 0 10px}
.prose .box p{color:#1C3A38;margin:0 0 10px}
.prose .box p:last-child{margin:0}
.prose .box ul{margin:0;padding-left:20px}
.prose .box li{margin:6px 0;color:#1C3A38}
@media(max-width:560px){.prose .series{grid-template-columns:1fr 1fr}.prose .stufen{grid-template-columns:1fr}}

/* ---------- dunkle Diagramm-/Animationskarten ---------- */
.prose .demo{margin:28px 0;background:var(--fd-bg2);border:1px solid var(--fd-line);border-radius:8px;padding:22px 24px;color:var(--fd-muted);font-family:var(--fd-disp)}
.prose .demo p{color:var(--fd-muted)}
.prose .demo .label{font-family:var(--fd-disp);font-size:.72rem;color:var(--fd-faint);letter-spacing:.12em;text-transform:uppercase;margin:0 0 14px}
.prose .demo .cap{color:var(--fd-faint)}
.prose .fit{display:grid;grid-template-columns:170px 1fr;gap:18px;align-items:start}
.prose .fit.wide{grid-template-columns:230px 1fr}
.prose .demo svg{width:100%;height:auto;display:block}
.prose .fit svg{background:var(--fd-bg3);border:1px solid var(--fd-line);border-radius:4px}
.prose .vt{border-collapse:collapse;font-family:var(--fd-mono);font-size:.8rem;width:100%}
.prose .vt th{font-family:var(--fd-disp);font-weight:400;color:var(--fd-inkfaint);letter-spacing:.08em;text-align:right;padding:4px 8px;border-bottom:1px solid var(--fd-linel)}
.prose .vt td{text-align:right;padding:4px 8px;border-bottom:1px solid var(--fd-linel);color:var(--fd-inksoft)}
.prose .vt td:first-child{color:var(--fd-ink)}.prose .vt td.pred{color:var(--fd-tealtext)}
/* im dunklen Demo-Kasten hell auf dunkel */
.prose .demo .vt th{color:var(--fd-faint);border-bottom:1px solid var(--fd-line);padding:4px 6px}
.prose .demo .vt td{color:var(--fd-muted);border-bottom:1px solid var(--fd-line);padding:4px 6px}
.prose .demo .vt td:first-child{color:#fff}.prose .demo .vt td.pred{color:var(--fd-teal)}
.prose .result{margin-top:14px;font-family:var(--fd-mono);font-size:.85rem;color:var(--fd-muted);line-height:1.7}
.prose .result b{color:#fff;font-weight:400}.prose .result .on{color:var(--fd-teal)}.prose .result .off{color:var(--fd-warm)}
.prose .btns{display:flex;gap:10px;flex-wrap:wrap}
.prose button.btn{font-family:var(--fd-disp);letter-spacing:.1em;font-size:.95rem;padding:10px 18px;border:1px solid var(--fd-teal);border-radius:6px;color:var(--fd-teal);background:transparent;cursor:pointer;margin-top:14px}
.prose button.btn:hover{background:var(--fd-tealdim)}
.prose .ctl{display:grid;grid-template-columns:130px 1fr 64px;align-items:center;gap:12px;font-size:.95rem;margin-top:8px;color:var(--fd-muted)}
.prose .ctl output{font-family:var(--fd-mono);font-size:.85rem;text-align:right;color:#fff}
.prose .demo input[type=range]{width:100%;accent-color:var(--fd-teal);background:transparent}
.prose .seg{display:flex;gap:6px;margin-top:14px;flex-wrap:wrap}
.prose .seg button{font-family:var(--fd-mono);font-size:.85rem;padding:8px 14px;border:1px solid var(--fd-line2);border-radius:4px;color:var(--fd-muted);background:var(--fd-bg3);cursor:pointer}
.prose .seg button[aria-pressed=true]{border-color:var(--fd-teal);color:var(--fd-teal);background:var(--fd-tealdim)}
.prose .demo code{font-family:var(--fd-mono);background:var(--fd-bg3);color:#fff;padding:2px 6px;border-radius:3px}
/* Figuren mit SVG (Netz, Backprop, Feder-Zeichnungen) = dunkle Karten */
.prose figure.draw,.prose figure:has(svg){margin:28px 0;background:var(--fd-bg2);border:1px solid var(--fd-line);border-radius:8px;padding:18px 20px}
.prose figure.draw svg,.prose figure:has(svg) svg{width:100%;height:auto;display:block}
.prose figure figcaption{font-family:var(--fd-disp);font-size:.85rem;color:var(--fd-faint);letter-spacing:.03em;margin-top:12px}
.prose figure.draw text{font-family:"Abel",system-ui,sans-serif}
.prose .net .e{stroke:var(--fd-line2);stroke-width:1.4}
.prose .net .n{fill:var(--fd-bg3);stroke:var(--fd-line2);stroke-width:1.6}
.prose .net .n.h{fill:var(--fd-tealdim);stroke:var(--fd-teal)}
.prose .net text{font-family:var(--fd-mono);font-size:11px;fill:var(--fd-muted)}
.prose .bp .e{stroke:var(--fd-line2);stroke-width:1.6;transition:stroke .3s,stroke-width .3s}
.prose .bp .e.hot{stroke:var(--fd-warm)}
.prose .bp .n{fill:var(--fd-bg3);stroke:var(--fd-line2);stroke-width:1.6}
.prose .bp .n.h{fill:var(--fd-tealdim);stroke:var(--fd-teal)}.prose .bp .n.off{opacity:.35}
.prose .bp text{font-family:var(--fd-mono);font-size:11px;fill:var(--fd-muted)}
.prose .bp .wave{fill:none;stroke:var(--fd-warm);stroke-width:2;opacity:0}
.prose .hm rect{shape-rendering:crispEdges}
/* Token-/Attention-/Skala-Demos */
.prose .tokens{display:flex;flex-wrap:wrap;gap:6px;font-family:var(--fd-mono);font-size:.95rem;margin:4px 0 14px}
.prose .tok{padding:5px 9px;border:1px solid var(--fd-line2);border-radius:3px;background:var(--fd-bg3);color:var(--fd-muted);transition:border-color .2s,background .2s}
.prose .tok.next{border-color:var(--fd-teal);color:var(--fd-teal);animation:fd-pop .35s ease}
.prose .tok.q{border-color:#fff;color:#fff}
.prose .tok.att{background:rgba(224,164,88,var(--a,0));border-color:rgba(224,164,88,.5)}
.prose .tok.click{cursor:pointer}
@keyframes fd-pop{from{transform:scale(.8);opacity:0}}
.prose .bars{display:grid;gap:7px}
.prose .bar{display:grid;grid-template-columns:120px 1fr 52px;align-items:center;gap:10px;font-family:var(--fd-mono);font-size:.85rem;color:var(--fd-muted)}
.prose .bar .w{height:14px;background:var(--fd-bg3);border:1px solid var(--fd-line);border-radius:3px;overflow:hidden}
.prose .bar .w i{display:block;height:100%;width:0;background:var(--fd-teal);transition:width .6s cubic-bezier(.2,.8,.2,1)}
.prose .bar .p{text-align:right}.prose .bar.top span:first-child{color:#fff}
.prose .scale{display:grid;gap:10px;margin:6px 0}
.prose .sc{display:grid;grid-template-columns:190px 1fr;align-items:center;gap:12px;font-size:.95rem}
.prose .sc .l{color:var(--fd-muted);font-family:var(--fd-disp)}
.prose .sc .l b{display:block;color:#fff;font-family:var(--fd-mono);font-size:.8rem;font-weight:400}
.prose .sc .w{height:12px;background:var(--fd-teal);border-radius:2px;min-width:2px}
@media(max-width:560px){.prose .fit,.prose .fit.wide{grid-template-columns:1fr}.prose .bar{grid-template-columns:84px 1fr 46px}.prose .sc{grid-template-columns:130px 1fr}.prose .ctl{grid-template-columns:110px 1fr 54px}}
@media(prefers-reduced-motion:reduce){.prose .tok.next{animation:none}.prose .bar .w i{transition:none}}