/* ==========================================================================
   Digital Finance Advisory · AI im Controlling: Framework-Seite und Hybride Controlling-Organisation
   Ergänzt beratung.css nur für diese beiden Seiten. Regeln wie dort:
   - Farben ausschließlich über die Variablen aus beratung.css, keine eigenen Farbwerte.
   - Teal = Steuerung, feste Rechenregeln, Kontrolle. Kupfer (--warm) = Sprachmodell und Agent.
   - Je Schrift nur der Schnitt 400: keine fetten oder kursiven Auszeichnungen.
   - Ohne JavaScript ist jede Grafik eine lesbare Liste oder Tabelle; die bedienbare Form gilt erst,
     wenn das Skript die Klasse .ist-aktiv gesetzt hat.
   ========================================================================== */

/* ---------- Gemeinsame Bausteine ---------- */
.fig{margin:0}
.fig-cap{font-family:var(--font-head);font-size:clamp(19px,1.6vw,23px);line-height:1.3;color:var(--text);max-width:40em}
.fig-unter{margin-top:8px;font-size:13.5px;line-height:1.55;color:var(--dim)}
.fig-cap+*{margin-top:20px}
.fig-cap+.fig-unter{margin-top:8px}
.fig-unter+*{margin-top:18px}
.g-titel{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin:0 0 8px}
.g-steuer{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-top:16px}
.g-knopf{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-body);font-size:14px;line-height:1.2;padding:10px 18px;border-radius:999px;
  cursor:pointer;color:var(--bg);background:var(--teal);border:1px solid var(--teal);transition:background-color .2s,color .2s,border-color .2s}
.g-knopf:hover{background:var(--teal-a60)}
.g-knopf-leise{color:var(--text);background:var(--text-a04);border-color:var(--text-a14)}
.g-knopf-leise:hover{background:var(--text-a08);border-color:var(--text)}
.g-knopf[disabled]{opacity:.4;cursor:default}
.g-knopf[disabled]:hover{background:var(--teal)}
.g-knopf-leise[disabled]:hover{background:var(--text-a04);border-color:var(--text-a14)}
.g-stand{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;color:var(--muted)}
.tafel-kopf{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;font-family:var(--font-head);font-size:clamp(19px,1.6vw,22px);line-height:1.3;color:var(--text)}
.chapter-body.wide>.fig{margin-top:0}
.chapter-body+.chapter-body.wide{margin-top:clamp(32px,4vw,56px)}

/* Akteurszeichen der Vertiefung: Kreis = Modell und Agent (Kupfer), Quadrat = Harness und feste Regeln (Teal) */
.mk{display:inline-block;flex:none;width:10px;height:10px}
.mk-agent{border-radius:50%;background:var(--warm)}
.mk-regel{background:var(--teal)}
.fs-nr{font-family:var(--font-mono);font-size:12px;color:var(--dim)}
.fs-lbl{display:block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:2px}

/* ---------- Kernaussage und Abschnittsaussagen: ganze Sätze statt kurzer Titel ---------- */
.page-title.long{max-width:30ch;font-size:clamp(28px,3.4vw,50px);line-height:1.1}
.chapter-head h2{max-width:none;font-size:clamp(24px,2.2vw,32px);line-height:1.2}

/* ---------- Pyramide: drei Kernbotschaften im Kopf, wenige Belege im Abschnitt ---------- */
.botschaften{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:clamp(28px,3vw,40px)}
.botschaft{display:flex;flex-direction:column;gap:10px;padding:18px 20px 16px;border:1px solid var(--teal-a35);border-radius:12px;background:var(--teal-a08);
  transition:border-color .2s,background-color .2s}
.botschaft:hover{border-color:var(--teal)}
.b-marke{font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--teal)}
.b-text{flex:1;font-family:var(--font-head);font-size:clamp(18px,1.45vw,21px);line-height:1.3;color:var(--text)}
.botschaft .arrow{color:var(--teal)}
.belege{list-style:none;margin:0;padding:0}
.belege li{padding:18px 0 20px;border-top:1px solid var(--border)}
.belege li:last-child{border-bottom:1px solid var(--border)}
.chapter-body .belege p{font-size:15.5px;line-height:1.6;color:var(--muted)}
.chapter-body .belege .lead-in{color:var(--text)}
details.more>p{font-size:15.5px}
.fw-links-lbl{font-size:14px;color:var(--dim)}
/* Vertiefung: vier Kapitel aufklappbar, ohne JavaScript offen */
.haube .kapitel{padding:0 0 clamp(32px,4vw,48px)}
.haube .kapitel>*+*{margin-top:20px}
.haube .kapitel>p{max-width:44em}

/* ---------- G1 · Ein Fall, drei Ebenen ---------- */
/* Bahnen: Unternehmen Teal, Prozess Kupfer (dort arbeitet der Agent), Technik Grau.
   Ohne JavaScript steht der Fall als Liste; das Skript baut daraus Spalten je Schritt und Bahnen je Ebene. */
.ebf-schritte{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px}
.ebf{padding:20px 0 22px;border-top:1px solid var(--border-light)}
.ebf-kopf{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.ebf-titel{font-family:var(--font-head);font-size:clamp(18px,1.5vw,21px);line-height:1.3;color:var(--text)}
.ebf-ebenen,.ebf-wo{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ebf-text{margin-top:10px}
.ebf-text p,.ebf-tafel p:not(.tafel-kopf){font-size:15px;line-height:1.6;color:var(--muted)}
.ebf-text p+p,.ebf-tafel p+p{margin-top:8px}
.ebenen.ist-aktiv .ebf-schritte{display:none}
.ebf-matrix{display:grid;grid-template-columns:128px repeat(8,minmax(0,1fr));grid-template-rows:auto repeat(3,34px);gap:6px 8px}
.ebf-bahnen,.ebf-spalte{grid-row:1/5;display:grid;grid-template-rows:subgrid}
.ebf-bahn{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ebf-bahn::before{content:"";flex:none;width:10px;height:10px;border-radius:2px}
.bahn-u::before,.zelle-u.an{background:var(--teal)}
.bahn-p::before,.zelle-p.an{background:var(--warm)}
.bahn-t::before,.zelle-t.an{background:var(--dim)}
.ebf-spalte{border-radius:12px;transition:background-color .2s}
.ebf-spalte.ist-an{background:var(--teal-a08)}
.ebf-knopf{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:12px 12px 14px;text-align:left;cursor:pointer;font:inherit;color:var(--text);
  background:var(--card);border:1px solid var(--border);border-radius:12px;transition:border-color .2s,background-color .2s}
.ebf-knopf .ebf-titel{font-size:16px;line-height:1.25}
.ebf-knopf:hover{border-color:var(--border-light)}
.ebf-knopf[aria-pressed="true"]{border-color:var(--teal);background:var(--teal-a08)}
/* Ebenen im Knopf: in der Spaltenansicht nur für Vorlesehilfen, in der Knopfansicht sichtbar */
.ebf-wo{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ebf-zelle{align-self:center;height:10px;margin:0 6px;border-radius:3px;background:var(--text-a04);cursor:pointer}
.ebf-zelle.an{height:20px}
.ebf-tafel{margin-top:14px;padding:20px 22px;border:1px solid var(--border);border-left:3px solid var(--teal);border-radius:12px;background:var(--card-alt);min-height:200px}
.ebf-tafel .tafel-kopf{margin-bottom:12px}
.ebf-zuege{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px}
.zug{padding:16px 18px 18px;border:1px solid var(--border);border-radius:12px;background:var(--card);transition:border-color .2s,background-color .2s}
.zug-name{display:flex;align-items:center;gap:10px;font-family:var(--font-head);font-size:18px;line-height:1.3}
.zug-z{display:inline-flex;align-items:center;justify-content:center;flex:none;width:24px;height:24px;border:1px solid var(--teal-a35);border-radius:50%;font-family:var(--font-mono);font-size:13px;color:var(--teal)}
.chapter-body .zug-text{margin-top:8px;font-size:14px;line-height:1.55;color:var(--muted)}
.ebenen.ist-aktiv .zug.ist-an{border-color:var(--teal);background:var(--teal-a08)}
.chapter-body p.grenze{max-width:56em;padding:18px 22px;border:1px solid var(--border);border-left:3px solid var(--teal-a60);border-radius:12px;background:var(--card-alt);font-size:15.5px;line-height:1.6}
.grenze .page-link{margin-left:4px;white-space:nowrap}

/* ---------- Ebene Unternehmen: Freigabepunkte in ihrer Reihenfolge ---------- */
.fp{display:flex;flex-wrap:wrap;gap:10px 28px;list-style:none;margin:0;padding:0}
.fp li{position:relative;font-size:14.5px;line-height:1.3;color:var(--text);padding:8px 14px;border:1px solid var(--teal-a35);border-radius:999px;background:var(--teal-a08)}
.fp li+li::before{content:"→";position:absolute;left:-20px;top:50%;transform:translateY(-50%);font-family:var(--font-mono);font-size:12px;color:var(--dim)}

/* ---------- Ebene Technik: vier Bausteine ---------- */
.bausteine{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;list-style:none;margin:0;padding:0}
.bausteine li{padding:16px 18px 18px;border:1px solid var(--border);border-top:3px solid var(--teal-a60);border-radius:12px;background:var(--card)}
.bs-name{font-family:var(--font-head);font-size:19px;line-height:1.3}
.chapter-body .bs-text{margin-top:6px;font-size:14.5px;line-height:1.55;color:var(--muted)}

/* ---------- Tabellen der Seite ---------- */
.dtable .nie{color:var(--text)}
/* feste Breite der ersten Spalte nur in der Tabellenansicht; gestapelt (bis 640 px) gilt die Breite aus beratung.css */
@media (min-width:641px){.wege-tab th[scope="row"]{width:22%}}

/* ---------- G2 · Spielraum in drei Stufen ---------- */
.stufen-infos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px;margin-bottom:28px}
.stufe-info{padding:18px 0 4px;border-top:1px solid var(--border-light)}
.stufe-info dt{font-family:var(--font-head);font-size:clamp(18px,1.5vw,21px);line-height:1.3;color:var(--text)}
.stufe-info dd{margin-top:8px;font-size:15px;line-height:1.6;color:var(--muted)}
.stufe-info dd .fs-lbl{display:inline;margin-right:4px}
.stufen-tab td,.stufen-tab thead th{transition:background-color .2s,color .2s}
.sx{display:inline-flex;align-items:baseline;gap:8px}
.sx::before{content:"";flex:none;width:8px;height:8px;transform:translateY(-1px)}
.sx-ja::before{border-radius:50%;background:var(--teal)}
.sx-bed::before{border:1px solid var(--teal);transform:rotate(45deg) translateY(-1px)}
.sx-nein::before{width:10px;height:1px;background:var(--dim);transform:translateY(-4px)}
.sx-nie{color:var(--text)}
.sx-nie::before{width:10px;height:10px;border:1px solid var(--text);border-radius:50%;background:linear-gradient(135deg,var(--bg-a0) 45%,var(--text) 45%,var(--text) 55%,var(--bg-a0) 55%)}
.stufen-wahl{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.stufen-knopf{font-family:var(--font-body);font-size:14px;line-height:1.3;text-align:left;padding:10px 16px;border-radius:999px;cursor:pointer;
  color:var(--muted);background:var(--text-a04);border:1px solid var(--text-a14);transition:color .2s,border-color .2s,background-color .2s}
.stufen-knopf:hover{color:var(--text);border-color:var(--text)}
.stufen-knopf[aria-pressed="true"]{color:var(--bg);background:var(--teal);border-color:var(--teal)}
.stufen.ist-aktiv .stufen-infos{display:block;margin-bottom:22px}
.stufen.ist-aktiv .stufe-info{display:none;padding:18px 22px;border:1px solid var(--teal-a35);border-radius:12px;background:var(--teal-a08)}
.stufen.ist-aktiv .stufe-info.ist-an{display:block}
.stufen.ist-aktiv .stufen-tab td[data-sp],.stufen.ist-aktiv .stufen-tab thead th[data-sp]{color:var(--dim)}
.stufen.ist-aktiv .stufen-tab .sp-an{background:var(--teal-a08);color:var(--text)}
.stufen.ist-aktiv .stufen-tab thead th.sp-an{color:var(--teal)}
.stufen.ist-aktiv .stufen-tab td[data-sp]:not(.sp-an) .sx::before{opacity:.45}

/* ---------- Framework als Register ---------- */
.fw-liste{display:grid}
.fw{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:12px 40px;padding:28px 0 30px;border-top:1px solid var(--border-light)}
.fw:last-child{border-bottom:1px solid var(--border-light)}
.fw-ebene{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal)}
.fw-frage{margin-top:8px;font-family:var(--font-head);font-size:clamp(18px,1.5vw,21px);line-height:1.3;color:var(--muted)}
.fw-quer .fw-ebene{color:var(--teal)}
.fw-titel{font-family:var(--font-head);font-size:clamp(21px,1.9vw,27px);line-height:1.22;letter-spacing:-.01em;color:var(--text)}
.fw-inhalt>*+*{margin-top:12px}
.fw-inhalt p{font-size:15.5px;line-height:1.65;color:var(--muted)}
.fw-inhalt ul.bullets li{position:relative;padding:10px 0 10px 26px;border-top:1px solid var(--border);font-size:15px;color:var(--muted)}
.fw-inhalt ul.bullets li:last-child{border-bottom:1px solid var(--border)}
.fw-inhalt ul.bullets li::before{content:"";position:absolute;left:0;top:22px;width:12px;height:1px;background:var(--teal)}
.fw-links{display:flex;flex-wrap:wrap;gap:6px 24px}
.fw .tiers{margin-top:18px}

/* ---------- Vertiefung: abgesetzt wie jeder Abschnitt, gekennzeichnet über die Zeile über der Überschrift ---------- */
.chapter.tiefe{position:relative;background:var(--card-alt)}
.chapter.tiefe .eyebrow{color:var(--muted)}
.chapter.tiefe .eyebrow::before{content:"Vertiefung · ";color:var(--dim)}

/* ---------- G3 · Neun Stationen ---------- */
.kette{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,4fr) minmax(0,3fr);gap:10px}
.kz{padding:16px;border:1px solid var(--border);border-radius:14px;background:var(--card)}
.kz-modell{border-color:var(--warm-a40);background:linear-gradient(var(--warm-a06),var(--warm-a06)),var(--card)}
.kz-harness{border-color:var(--teal-a35);border-left:4px solid var(--teal);background:linear-gradient(var(--teal-a08),var(--teal-a08)),var(--card)}
.kz-name{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.kz-modell .kz-name{color:var(--warm)}
.kz-harness .kz-name{color:var(--teal)}
.kz ol{display:grid;gap:8px}
.st{padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--card-alt)}
.st-titel{font-size:14.5px;line-height:1.35;color:var(--text)}
.st-nr{display:inline-block;min-width:1.4em;font-family:var(--font-head);font-size:17px;color:var(--teal)}
.kz-modell .st-nr{color:var(--warm)}
.st-text{margin-top:6px;font-size:13.5px;line-height:1.55;color:var(--muted)}
.kz-grenze{margin-top:12px;font-family:var(--font-mono);font-size:11.5px;line-height:1.5;color:var(--muted)}
.st-knopf{display:none}
.kette-w.ist-aktiv .st{padding:0;border:0;background:none}
.kette-w.ist-aktiv .st-titel,.kette-w.ist-aktiv .st-text{display:none}
.kette-w.ist-aktiv .st-knopf{display:block;width:100%;padding:10px 12px;text-align:left;cursor:pointer;font-family:var(--font-body);font-size:14px;line-height:1.35;
  color:var(--text);background:var(--card-alt);border:1px solid var(--border);border-radius:10px;transition:border-color .2s,background-color .2s}
.kette-w.ist-aktiv .st-knopf:hover{border-color:var(--border-light)}
.kette-w.ist-aktiv .kz-sprache .st-knopf[aria-pressed="true"]{border-color:var(--text);background:var(--text-a08)}
.kette-w.ist-aktiv .kz-modell .st-knopf[aria-pressed="true"]{border-color:var(--warm);background:var(--warm-a12)}
.kette-w.ist-aktiv .kz-harness .st-knopf[aria-pressed="true"]{border-color:var(--teal);background:var(--teal-a18)}
.kette-tafel{margin-top:14px;padding:18px 22px;border:1px solid var(--border);border-left:3px solid var(--border-light);border-radius:12px;background:var(--card-alt);min-height:130px}
.kette-tafel.kz-modell{border-left-color:var(--warm)}
.kette-tafel.kz-harness{border-left-color:var(--teal)}
.kette-tafel p:not(.tafel-kopf){margin-top:10px;font-size:15px;line-height:1.6;color:var(--muted);max-width:52em}
.tafel-zone{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}

/* ---------- G4 · Tokens ---------- */
.tok{padding:clamp(18px,2.4vw,28px);border:1px solid var(--border);border-radius:16px;background:var(--card)}
.tok-satz,.tok-feld{display:block;width:100%;padding:12px 16px;font-family:var(--font-head);font-size:clamp(16px,1.5vw,19px);line-height:1.4;color:var(--text);
  background:var(--card-alt);border:1px solid var(--border-light);border-radius:10px}
.tok-feld:focus{outline:2px solid var(--teal);outline-offset:2px}
.tok-liste{display:flex;flex-wrap:wrap;gap:5px;margin-top:16px}
.tk{font-family:var(--font-mono);font-size:13px;line-height:1.4;padding:3px 7px;border-radius:4px;color:var(--text);white-space:pre}
.tk-a{background:var(--teal-a18)}
.tk-b{background:var(--text-a08);box-shadow:inset 0 0 0 1px var(--text-a14)}
.tk-leer{display:inline-block;width:7px;height:5px;margin-right:2px;border:1px solid var(--dim);border-top:0;vertical-align:baseline}
.tok-zahlen{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:16px;font-size:13.5px;color:var(--muted)}
.tok-zahlen span{display:inline-flex;align-items:baseline;gap:8px}
.tok-zahlen [data-tok]{font-family:var(--font-head);font-size:24px;color:var(--text)}
.tok-nummern{margin-top:8px;padding:10px 12px;font-family:var(--font-mono);font-size:12px;line-height:1.6;color:var(--muted);background:var(--card-alt);border:1px solid var(--border);border-radius:8px;overflow-wrap:break-word}
.wkt{display:grid;gap:8px;max-width:520px}
.wkt-zeile{display:grid;grid-template-columns:96px minmax(0,1fr) 44px;gap:12px;align-items:center;font-size:14px;color:var(--text)}
.wkt-spur{height:12px;background:var(--text-a08);border-radius:2px;overflow:hidden}
.wkt-spur span{display:block;height:100%;background:var(--warm-a40)}
.wkt-zeile:first-child .wkt-spur span{background:var(--warm)}
.wkt-pz{font-family:var(--font-mono);font-size:12px;color:var(--muted);text-align:right}
.wkt-satz{font-family:var(--font-head);font-size:18px;color:var(--text);margin-bottom:14px}

/* ---------- G5 · Die Schleife ---------- */
.code{margin:0;padding:14px 16px;font-family:var(--font-mono);font-size:12.5px;line-height:1.6;color:var(--muted);white-space:pre;overflow-x:auto;
  background:var(--bg);border:1px solid var(--border);border-radius:10px}
.code .hl{color:var(--teal)}
.code-paar{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:20px;align-items:start}
.anm{display:grid;gap:10px;counter-reset:anm}
.anm li{position:relative;padding-left:34px;font-size:14.5px;line-height:1.55;color:var(--muted);counter-increment:anm}
.anm li::before{content:counter(anm);position:absolute;left:0;top:0;width:22px;height:22px;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:11px;color:var(--teal);border:1px solid var(--teal);border-radius:50%}
.anm .term{font-family:var(--font-mono);font-size:13px}
.runden{display:grid;gap:10px}
.runde{padding:14px 16px;border:1px solid var(--border);border-radius:12px;background:var(--card)}
.runde-titel{font-family:var(--font-head);font-size:18px;line-height:1.3;color:var(--text)}
.runde-titel .fs-nr{margin-right:8px}
.runde dl{display:grid;grid-template-columns:150px minmax(0,1fr);gap:6px 16px;margin-top:10px}
.runde dt{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);padding-top:3px}
.runde dd{font-size:14.5px;line-height:1.55;color:var(--muted)}
.runde dd code{font-family:var(--font-mono);font-size:12.5px;color:var(--text);word-break:break-word}
.schleife.ist-aktiv .runde{display:none}
.schleife.ist-aktiv .runde.ist-sichtbar{display:block}
.schleife.ist-aktiv .runde.ist-neu{border-color:var(--teal-a60)}
.schleife-rahmen{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:20px;align-items:start;margin-top:16px}
.schleife-seite{padding:16px;border:1px solid var(--border);border-radius:12px;background:var(--card-alt)}
.ordner{margin-bottom:18px;font-family:var(--font-mono);font-size:13px;line-height:1.9;color:var(--muted)}
.ordner li::before{content:"▫ ";color:var(--dim)}
.ordner li.ist-neu{color:var(--teal)}
.verlauf{display:flex;gap:3px;height:16px;margin-bottom:10px}
.vl{display:block;border-radius:2px}
.vl-fest{flex:0 0 26%;background:var(--border-light)}
.vl-auftrag{flex:0 0 5%;background:var(--teal-a60)}
.vl-runde{flex:0 0 11%;background:linear-gradient(90deg,var(--warm-a40) 0 45%,var(--teal-a35) 45%)}
.verlauf-text{font-size:13px;line-height:1.55;color:var(--muted)}
.schleife-start{padding:12px 16px;border:1px solid var(--border);border-left:3px solid var(--teal);border-radius:12px;background:var(--card-alt);font-size:14.5px;color:var(--muted)}
.schleife-start .term{color:var(--text)}

/* ---------- Kontrolle an fünf Stellen ---------- */
.kp{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.kp li{padding:16px 16px 18px;border:1px solid var(--border);border-top:3px solid var(--teal);border-radius:12px;background:var(--card)}
.kp-nr{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);margin-bottom:6px}
.kp-name{font-family:var(--font-head);font-size:19px;line-height:1.3;color:var(--text)}
.kp-text{margin-top:6px;font-size:14px;line-height:1.55;color:var(--muted)}

/* ---------- Farben gegen die allgemeine Absatzfarbe der Kapitel durchsetzen ---------- */
.chapter-body .zug-name,.chapter-body .bs-name,.chapter-body .tafel-kopf,.chapter-body .st-titel,.chapter-body .kp-name,.chapter-body .runde-titel,
.chapter-body .wkt-satz,.chapter-body .tok-satz{color:var(--text)}
.chapter-body .fw-ebene{color:var(--teal)}
.chapter-body .fw-frage,.chapter-body .kz-name,.chapter-body .kz-grenze{color:var(--muted)}
.chapter-body .kz-modell .kz-name{color:var(--warm)}
.chapter-body .kz-harness .kz-name{color:var(--teal)}
.chapter-body .fig-unter,.chapter-body .g-titel{color:var(--dim)}

/* ---------- Schmale Breiten ---------- */
@media (max-width:1100px){
  .kp{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:960px){
  .botschaften{grid-template-columns:1fr}
  .ebf-schritte,.ebf-zuege{grid-template-columns:1fr}
  .ebf-matrix{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:none;gap:10px}
  .ebf-bahnen,.ebf-zelle{display:none}
  .ebf-spalte{grid-row:auto;display:block}
  .ebf-spalte.ist-an{background:none}
  .ebf-knopf{width:100%;height:100%}
  .ebf-wo{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal}
  .stufen-infos{grid-template-columns:1fr}
  .kette{grid-template-columns:1fr}
  .kz-harness{border-left-width:1px;border-top:4px solid var(--teal)}
  .fw{grid-template-columns:1fr;gap:6px}
  .code-paar,.schleife-rahmen{grid-template-columns:1fr}
  .kp{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .code{white-space:pre-wrap;overflow-wrap:break-word}
  .stufen.ist-aktiv .stufen-tab [data-sp]:not(.sp-an){display:none}
  .stufen-knopf{flex:1 1 100%}
  .runde dl{grid-template-columns:1fr;gap:2px}
  .runde dd+dt{margin-top:8px}
  .wkt-zeile{grid-template-columns:80px minmax(0,1fr) 40px;gap:8px}
  .kp{grid-template-columns:1fr}
  .tok{padding:16px}
  .ebf-matrix{grid-template-columns:1fr 1fr;gap:8px}
  .ebf-knopf{padding:10px 12px 12px}
  .ebf-knopf .ebf-titel{font-size:15px}
  .ebf-tafel{padding:16px}
  .bausteine{grid-template-columns:1fr}
  .fp{flex-direction:column;align-items:flex-start;gap:22px}
  .fp li+li::before{content:"↓";left:18px;top:-18px;transform:none}
}

/* ---------- Hybride Controlling-Organisation ---------- */
/* Längere Kernaussage: breitere Zeile, kleinerer Grad, damit die drei Kernbotschaften im ersten Bildschirm bleiben */
.page-title.long.dicht{max-width:48ch;font-size:clamp(26px,2.6vw,38px);line-height:1.15}
.page-title.dicht+.page-lede{max-width:62em}
/* G4 · Der laufende Monat aus Sicht des Teams: Bauart wie G1, Bahnen sind Rollen.
   System Grau, Agent Kupfer, Menschen Teal. */
.team .ebf-matrix{grid-template-columns:150px repeat(6,minmax(0,1fr));grid-template-rows:auto repeat(6,24px)}
.team .ebf-bahnen,.team .ebf-spalte{grid-row:1/8}
.team .ebf-bahn{line-height:1.25}
.bahn-s::before,.zelle-s.an{background:var(--dim)}
.bahn-a::before,.zelle-a.an{background:var(--warm)}
.bahn-c::before,.zelle-c.an,.bahn-z::before,.zelle-z.an,.bahn-f::before,.zelle-f.an,.bahn-o::before,.zelle-o.an{background:var(--teal)}
.team .ebf-zelle.an{height:14px}
.rollen-tab td:first-of-type{white-space:nowrap}
@media (max-width:960px){
  .team .ebf-matrix{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:none}
  .team .ebf-spalte{grid-row:auto}
}
@media (max-width:640px){
  .team .ebf-matrix{grid-template-columns:1fr 1fr}
  .rollen-tab td:first-of-type{white-space:normal}
}