/* ===========================================================================
   Workshop-Dokumentation — Aufbau und Gestaltung wie das Energyology-Modell
   (energyology-research: forschung/dokumentation/vorlage/doku.css), auf Ricos
   Auftrag vom 21.10.2026 «wende das design an wie bei energyology».
   Kopfzeile mit Marke, Reitern, Suche · Seitenleiste links · Inhalt · „Auf dieser Seite“ rechts.
   Übernommen sind nur die Grundfarben und das Gerüst, nicht die Farben der Leitzeichen.
   =========================================================================== */

:root {
  --bg: #f6f5f1; --paper: #ffffff; --ink: #1d232b; --muted: #5d6672; --line: #cfd3d8; --line-strong: #8d96a1;
  --link: #2f6f9f; --hover: #eceae4; --aktiv-bg: #e4edf5;
  --gruen: #3d7a34; --gruen-soft: #e1efdc;
  --unruhe-line: #c9781e; --unruhe-ink: #7a4510; --warn-bg: #fdf1e1;
  --shadow: 0 1px 2px rgba(20,25,35,.06), 0 2px 8px rgba(20,25,35,.04);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14171b; --paper: #1b1f24; --ink: #e6e8eb; --muted: #a2aab4; --line: #343b44; --line-strong: #5b6571;
    --link: #8db8dc; --hover: #20252b; --aktiv-bg: #1d2a3a;
    --gruen: #97cc8c; --gruen-soft: #1d2c1a;
    --unruhe-line: #e3a457; --unruhe-ink: #f0c98f; --warn-bg: #33261a;
    --shadow: none; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #14171b; --paper: #1b1f24; --ink: #e6e8eb; --muted: #a2aab4; --line: #343b44; --line-strong: #5b6571;
  --link: #8db8dc; --hover: #20252b; --aktiv-bg: #1d2a3a;
  --gruen: #97cc8c; --gruen-soft: #1d2c1a;
  --unruhe-line: #e3a457; --unruhe-ink: #f0c98f; --warn-bg: #33261a;
  --shadow: none; color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f6f5f1; --paper: #ffffff; --ink: #1d232b; --muted: #5d6672; --line: #cfd3d8; --line-strong: #8d96a1;
  --link: #2f6f9f; --hover: #eceae4; --aktiv-bg: #e4edf5;
  --gruen: #3d7a34; --gruen-soft: #e1efdc;
  --unruhe-line: #c9781e; --unruhe-ink: #7a4510; --warn-bg: #fdf1e1;
  --shadow: 0 1px 2px rgba(20,25,35,.06), 0 2px 8px rgba(20,25,35,.04);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.65 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: var(--link); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

/* ---------- Kopfzeile ---------- */
.kopf { position: sticky; top: 0; z-index: 30; background: var(--bg); border-bottom: 1px solid var(--line); }
.kopf-innen { display: flex; align-items: center; gap: 16px; height: 60px; padding: 0 16px; max-width: 1480px; margin: 0 auto; }
.marke { display: flex; align-items: baseline; gap: 8px; color: var(--ink); text-decoration: none; white-space: nowrap; font-weight: 600; }
.suche { position: relative; flex: 1 1 auto; max-width: 420px; margin-left: auto; }
.suche input { width: 100%; font: inherit; font-size: 14px; padding: 8px 12px 8px 34px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); }
.suche .lupe { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; font-size: 14px; }
.suche kbd { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); font: 12px Inter, sans-serif; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; }
.suche input:focus + kbd { display: none; }
.treffer { position: absolute; top: calc(100% + 6px); left: 0; right: 0; max-height: 70vh; overflow-y: auto; background: var(--paper); border: 1px solid var(--line-strong); border-radius: 8px; box-shadow: var(--shadow); z-index: 40; }
.treffer[hidden] { display: none; }
.treffer a { display: block; padding: 10px 14px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.treffer a:last-child { border-bottom: 0; }
.treffer a:hover, .treffer a.auf { background: var(--aktiv-bg); }
.treffer b { display: block; font-weight: 600; font-size: 14px; }
.treffer small { display: block; color: var(--muted); font-size: 13px; }
.treffer .leer { padding: 12px 14px; color: var(--muted); font-size: 14px; margin: 0; }
.umschalter, .leistenknopf { font: 500 13px/1 Inter, system-ui, sans-serif; padding: 9px 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink); cursor: pointer; white-space: nowrap; }
.leistenknopf { display: none; }
@media (hover: hover) { .umschalter:hover, .leistenknopf:hover { border-color: var(--ink); } }

/* Reiter der Bereiche (wie die Bereiche bei GitBook) */
.reiterleiste { display: flex; gap: 4px; margin-left: 12px; overflow-x: auto; }
.reiter { padding: 8px 12px; border-radius: 8px; color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 500; white-space: nowrap; }
.reiter:hover { background: var(--hover); color: var(--ink); }
.reiter.aktiv { color: var(--ink); background: var(--aktiv-bg); }
@media (max-width: 760px) { .kopf-innen { flex-wrap: wrap; height: auto; padding: 8px 12px; } .reiterleiste { order: 5; width: 100%; margin: 0; } .suche { order: 4; } }

/* ---------- Gerüst ---------- */
.schale { display: grid; grid-template-columns: 280px minmax(0, 1fr) 220px; max-width: 1480px; margin: 0 auto; }
@media (max-width: 1240px) { .schale { grid-template-columns: 280px minmax(0, 1fr); } .verzeichnis { display: none; } }

/* ---------- Seitenleiste ---------- */
.leiste { position: sticky; top: 60px; height: calc(100vh - 60px); overflow-y: auto; padding: 24px 16px 48px; border-right: 1px solid var(--line); font-size: 14px; }
.leiste details { margin-bottom: 4px; }
.leiste summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 8px 8px; border-radius: 6px; font-weight: 600; color: var(--ink); }
.leiste summary::-webkit-details-marker { display: none; }
.leiste summary::after { content: "›"; color: var(--muted); transition: transform .15s ease; font-weight: 400; }
.leiste details[open] > summary::after { transform: rotate(90deg); }
.leiste summary:hover { background: var(--hover); }
.leiste ul { list-style: none; margin: 2px 0 8px; padding: 0 0 0 10px; border-left: 1px solid var(--line); margin-left: 14px; }
.leiste li a { display: block; padding: 5px 10px; border-radius: 6px; color: var(--muted); text-decoration: none; line-height: 1.4; }
.leiste li a:hover { background: var(--hover); color: var(--ink); }
.leiste li a[aria-current="page"] { background: var(--aktiv-bg); color: var(--link); font-weight: 600; }
@media (max-width: 960px) {
  .schale { grid-template-columns: minmax(0, 1fr); }
  .leistenknopf { display: inline-block; }
  .leiste { position: fixed; top: 60px; left: 0; bottom: 0; height: auto; width: min(320px, 88vw); z-index: 25; background: var(--bg); transform: translateX(-102%); transition: transform .2s ease; box-shadow: var(--shadow); }
  body.leiste-auf .leiste { transform: none; }
}

/* ---------- Inhalt ---------- */
.inhalt { min-width: 0; padding: 32px 40px 80px; }
@media (max-width: 640px) { .inhalt { padding: 24px 16px 64px; } }
.bahn { max-width: 780px; }
.krume { font-size: 13px; color: var(--muted); margin: 0 0 12px; }
h1, h2, h3 { font-family: "Source Serif 4", Georgia, serif; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
h1 { font-size: clamp(1.8rem, 3.4vw, 2.4rem); margin: 0 0 12px; }
h2 { font-size: 1.45rem; margin: 44px 0 12px; padding-top: 20px; border-top: 1px solid var(--line); }
h3 { font-size: 1.15rem; margin: 28px 0 8px; }
.inhalt p, .inhalt li { max-width: 72ch; }
.inhalt p { margin: 0 0 14px; }
.inhalt ul, .inhalt ol { margin: 0 0 14px; padding-left: 22px; }
.inhalt li { margin: 4px 0; }
.lede { font-size: 1.12rem; color: var(--muted); margin-bottom: 18px !important; }
.status { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
/* Freigabe der Seite (FREIGABE.md): Stand, Version, Datum; nur im Ordner Entwurf sichtbar */
.freigabe { font: 600 12px/1 Inter, sans-serif; letter-spacing: .03em; padding: 6px 10px; border-radius: 999px; border: 1.5px solid; display: inline-block; white-space: nowrap; }
.fg-entwurf { color: var(--unruhe-ink); background: var(--warn-bg); border-color: var(--unruhe-line); }
.fg-bereit { color: var(--gruen); background: var(--gruen-soft); border-color: var(--gruen); }
code { font: 0.9em ui-monospace, Consolas, monospace; background: var(--hover); padding: 1px 5px; border-radius: 4px; }

/* Kurz gesagt */
.kurz { background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--gruen); border-radius: 8px; padding: 14px 18px; margin: 0 0 24px; box-shadow: var(--shadow); }
.kurz .titel, .frage .titel, .uebung .titel, .hinweis .titel { font: 600 12px Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 4px; }
.kurz > :last-child, .frage > :last-child, .uebung > :last-child, .hinweis > :last-child { margin-bottom: 0; }

/* Ricos Wortlaut */
.wortlaut { margin: 16px 0 20px; padding: 14px 18px; background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--unruhe-line); border-radius: 8px; }
.wortlaut .titel { font: 600 12px Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--unruhe-ink); margin: 0 0 6px; }
.wortlaut p { font-family: "Source Serif 4", Georgia, serif; font-size: 1.08rem; line-height: 1.55; }
.wortlaut p:last-of-type { margin-bottom: 6px; }
.wortlaut cite { display: block; font: normal 13px Inter, sans-serif; color: var(--muted); }
.kenn { font-size: 13px; color: var(--muted); }

/* Vielleicht fragst du dich (wie «Einordnung» im Energyology-Modell), Zum Ausprobieren, Gut zu wissen */
.frage { margin: 16px 0 20px; padding: 14px 18px; border: 1px dashed var(--line-strong); border-radius: 8px; }
.uebung { margin: 16px 0 20px; padding: 14px 18px; background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--link); border-radius: 8px; box-shadow: var(--shadow); }
.hinweis { margin: 16px 0 20px; padding: 12px 16px; border-radius: 8px; background: var(--warn-bg); border: 1px solid var(--line); }

/* Tabellen */
.tabelle { overflow-x: auto; margin: 8px 0 20px; }
.inhalt table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
.inhalt th, .inhalt td { border-bottom: 1px solid var(--line); padding: 9px 12px 9px 0; text-align: left; vertical-align: top; }
.inhalt thead th { border-bottom: 1.5px solid var(--line-strong); font-weight: 600; }

/* Vor und zurück */
.blaettern { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 48px; }
.blaettern a { display: block; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; text-decoration: none; color: var(--ink); background: var(--paper); }
.blaettern a:hover { border-color: var(--link); }
.blaettern small { display: block; color: var(--muted); font-size: 12px; }
.blaettern .nach { text-align: right; grid-column: 2; }
@media (max-width: 640px) { .blaettern { grid-template-columns: 1fr; } .blaettern .nach { grid-column: 1; } }
.fuss { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.fuss p { margin: 0 0 8px; }

/* „Auf dieser Seite“ */
.verzeichnis { position: sticky; top: 60px; height: calc(100vh - 60px); overflow-y: auto; padding: 32px 16px; font-size: 13px; }
.verzeichnis p { font-weight: 600; margin: 0 0 8px; }
.verzeichnis ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.verzeichnis a { display: block; padding: 4px 0 4px 12px; color: var(--muted); text-decoration: none; margin-left: -1px; border-left: 2px solid transparent; }
.verzeichnis a:hover { color: var(--ink); }
.verzeichnis a.auf { color: var(--link); border-left-color: var(--link); }

@media print { .kopf, .leiste, .verzeichnis, .blaettern { display: none; } .schale { display: block; } }
.offen { border-left: 4px solid var(--unruhe-line); }


/* ---------- Ausbau 23.10.2026: Farben und Bausteine wie in der Dokumentation Fernbehandlung ---------- */
:root { --e3: #6a4f94; --e3-soft: #efe9f7; --e2: #13808a; --unruhe: #fbe9d0; --ruhe: #eef3f6; --ruhe-ink: #2c4a60; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --e3: #b9a3dc; --e3-soft: #2a2238; --e2: #6fcfd6; --unruhe: #3a2a16; --ruhe: #1c2329; --ruhe-ink: #c4d6e4; } }
:root[data-theme="dark"] { --e3: #b9a3dc; --e3-soft: #2a2238; --e2: #6fcfd6; --unruhe: #3a2a16; --ruhe: #1c2329; --ruhe-ink: #c4d6e4; }
:root[data-theme="light"] { --e3: #6a4f94; --e3-soft: #efe9f7; --e2: #13808a; --unruhe: #fbe9d0; --ruhe: #eef3f6; --ruhe-ink: #2c4a60; }
.grafik text { display: inline; }
.klein { font-size: 14px; color: var(--muted); }
.zitat { margin: 16px 0 20px; padding: 14px 18px; background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--unruhe-line); border-radius: 8px; }
.zitat p { font-family: "Source Serif 4", Georgia, serif; font-size: 1.08rem; line-height: 1.55; margin: 0 0 6px; }
.zitat .wer { font: normal 13px Inter, sans-serif; color: var(--muted); margin: 0; }
.kasten { margin: 16px 0 20px; padding: 12px 16px; border-radius: 8px; border: 1px dashed var(--line-strong); }
.kasten.offen { background: var(--warn-bg); border: 1px solid var(--line); }
.kasten.merke { background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--gruen); }
.kasten h3 { font: 600 12px Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.kasten p { margin: 0; }
.faq dt { font-weight: 600; margin-top: 18px; }
.faq dd { margin: 4px 0 0; }
.faq .verweis { color: var(--muted); font-size: 14px; }
.grafik { display: block; width: 100%; height: auto; margin: 12px 0 8px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.g-linie { stroke: var(--ink); fill: none; stroke-width: 2; } .g-akzent { stroke: var(--link); fill: none; stroke-width: 3; }
.g-fein { stroke: var(--line); fill: none; stroke-width: 1; } .g-gestrichelt { stroke: var(--muted); fill: none; stroke-width: 1.5; stroke-dasharray: 6 6; }
.g-flaeche { fill: var(--link); opacity: .24; } .g-voll { fill: var(--link); } .g-voll2 { fill: var(--e2); opacity: .6; }
.g-text { fill: var(--ink); font-family: Inter, sans-serif; font-size: 15px; }
.g-text-s { fill: var(--muted); font-family: Inter, sans-serif; font-size: 13px; }
.g-text-a { fill: var(--link); font-family: Inter, sans-serif; font-size: 15px; font-weight: 600; }
/* ---------- Die vier Teile: Bausteine für Einstieg und Teilseiten (Ausbau 23.10.2026) ---------- */
:root { --t1: var(--link); --t2: var(--e3); --t3: var(--unruhe-line); --t4: var(--gruen);
        --t1-soft: var(--aktiv-bg); --t2-soft: var(--e3-soft); --t3-soft: var(--unruhe); --t4-soft: var(--gruen-soft); }
.f1 { --farbe: var(--t1); --farbe-soft: var(--t1-soft); } .f2 { --farbe: var(--t2); --farbe-soft: var(--t2-soft); }
.f3 { --farbe: var(--t3); --farbe-soft: var(--t3-soft); } .f4 { --farbe: var(--t4); --farbe-soft: var(--t4-soft); }
.held { position: relative; overflow: hidden; margin: 8px 0 30px; padding: 26px 26px 22px; border: 1px solid var(--line);
        border-radius: 16px; background: linear-gradient(140deg, var(--paper) 35%, var(--farbe-soft, var(--aktiv-bg))); box-shadow: var(--shadow); }
.held .ueber { font: 600 12px Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--farbe, var(--muted)); margin: 0 0 10px; }
.held .gross { position: relative; font-family: "Source Serif 4", Georgia, serif; font-size: clamp(1.3rem, 2.6vw, 1.7rem); line-height: 1.32; margin: 0 0 14px; max-width: 32ch; }
.held p { position: relative; }
.held p:last-child { margin-bottom: 0; }
.held .feldbild { position: absolute; right: -60px; top: -50px; width: 300px; height: 300px; opacity: .55; pointer-events: none; }
@media (max-width: 640px) { .held { padding: 20px 18px 16px; } .held .feldbild { width: 200px; height: 200px; right: -70px; top: -60px; opacity: .3; } }
.feldbild circle { fill: none; stroke: var(--farbe, var(--link)); stroke-width: 1.2; }
.feldbild circle.k { fill: var(--farbe, var(--link)); stroke: none; }
.zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 14px 0 28px; }
.zahl { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.zahl b { display: block; font-family: "Source Serif 4", Georgia, serif; font-weight: 600; font-size: 1.6rem; line-height: 1.15; margin-bottom: 4px; }
.zahl span { display: block; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.teile { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin: 14px 0 28px; }
.teil { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--farbe); border-radius: 12px; padding: 16px 18px; box-shadow: var(--shadow); }
.teil .art { font: 600 11.5px Inter, sans-serif; letter-spacing: .07em; text-transform: uppercase; color: var(--farbe); margin: 0 0 4px; }
.teil h3 { margin: 0 0 8px; font-size: 1.18rem; }
.teil h3 a { text-decoration: none; color: inherit; }
.teil p { font-size: 14.5px; margin: 0 0 10px; }
.teil .mehr { margin-top: auto; font-size: 14px; font-weight: 500; }
.teilmarke { display: inline-flex; gap: 6px; align-items: center; font: 600 12px Inter, sans-serif; letter-spacing: .05em; color: var(--farbe); margin: 0 0 10px; }
.teilmarke i { display: inline-block; width: 22px; height: 6px; border-radius: 3px; background: var(--line); }
.teilmarke i.an { background: var(--farbe); }
.band { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 14px 0 26px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; counter-reset: schritt; background: var(--paper); }
.band > div { position: relative; padding: 14px 16px 16px; border-right: 1px solid var(--line); counter-increment: schritt; }
.band > div:last-child { border-right: 0; }
.band > div::before { content: counter(schritt); display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
                      background: var(--farbe, var(--link)); color: var(--paper); font: 600 13px Inter, sans-serif; margin-bottom: 8px; }
.band.ohne-zahl > div::before { content: none; }
.band b { display: block; margin-bottom: 4px; font-weight: 600; }
.band span { display: block; font-size: 14px; line-height: 1.5; color: var(--muted); }
@media (max-width: 640px) { .band > div { border-right: 0; border-bottom: 1px solid var(--line); } .band > div:last-child { border-bottom: 0; } }
.gegenueber { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 14px 0 26px; }
@media (max-width: 640px) { .gegenueber { grid-template-columns: 1fr; } }
.gegenueber > div { background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--line-strong); border-radius: 12px; padding: 14px 16px; }
.gegenueber > div.betont { border-top-color: var(--farbe, var(--link)); }
.gegenueber h3 { font-size: 1.04rem; margin: 0 0 8px; }
.gegenueber p, .gegenueber li { font-size: 14.5px; }
.gegenueber ul { margin: 0; padding-left: 18px; }
.ebenen { margin: 14px 0 26px; display: grid; gap: 10px; }
.ebene { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; align-items: start; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.ebene .nr { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--farbe-soft, var(--aktiv-bg)); color: var(--farbe, var(--link)); font: 600 1.1rem "Source Serif 4", Georgia, serif; }
.ebene h3 { margin: 0 0 2px; font-size: 1.06rem; }
.ebene .frage { font-size: 13.5px; color: var(--muted); margin: 0 0 6px; }
.ebene p { font-size: 14.5px; margin: 0 0 6px; }
.ebene p:last-child { margin: 0; }
.abb { margin: 16px 0 26px; }
.abb .grafik { margin: 0 0 6px; }
@media (max-width: 640px) { .abb { overflow-x: auto; -webkit-overflow-scrolling: touch; } .abb .grafik { min-width: 620px; } .abb .grafik text { display: inline; } }
.abb figcaption { font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.kuchenreihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 10px 0 8px; }
.kuchen { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 14px 12px; text-align: center; }
.kuchen .scheibe { width: 112px; height: 112px; border-radius: 50%; margin: 2px auto 10px; border: 2px solid var(--paper); box-shadow: 0 0 0 1px var(--line);
                   background: conic-gradient(var(--t3) 0 calc(var(--druck) * 1%), var(--t1) 0 100%); }
.kuchen b { display: block; font-size: 14px; margin-bottom: 2px; }
.kuchen span { display: block; font-size: 13px; color: var(--muted); line-height: 1.45; }
.legende-farbe { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; color: var(--muted); margin: 6px 0 4px; }
.legende-farbe i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.spielraum { display: grid; grid-template-columns: 1fr 1.2fr 1fr; margin: 14px 0 8px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.spielraum > div { padding: 14px 14px 16px; font-size: 14px; line-height: 1.5; }
.spielraum b { display: block; font-size: 14.5px; margin-bottom: 4px; }
.spielraum .zuviel { background: var(--unruhe); color: var(--unruhe-ink); }
.spielraum .passt { background: var(--gruen-soft); color: var(--ink); border-left: 2px solid var(--gruen); border-right: 2px solid var(--gruen); }
.spielraum .zuwenig { background: var(--ruhe); color: var(--ruhe-ink); }
@media (max-width: 640px) { .spielraum { grid-template-columns: 1fr; } .spielraum .passt { border: 0; border-top: 2px solid var(--gruen); border-bottom: 2px solid var(--gruen); } }
.kette { list-style: none; margin: 14px 0 26px; padding: 0; counter-reset: k; }
.kette li { position: relative; counter-increment: k; padding: 0 0 14px 44px; margin: 0; max-width: none; }
.kette li::before { content: counter(k); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
                    background: var(--paper); border: 1.5px solid var(--farbe, var(--line-strong)); color: var(--farbe, var(--ink)); font: 600 13px Inter, sans-serif; }
.kette li::after { content: ""; position: absolute; left: 14px; top: 30px; bottom: 2px; width: 1.5px; background: var(--line); }
.kette li:last-child::after { content: none; }
.kette b { display: block; }
.steckbrief { margin: 14px 0 26px; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.steckbrief > div { background: var(--farbe-soft, var(--paper)); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.steckbrief dt, .steckbrief .k { font: 600 11.5px Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 4px; }
.steckbrief p { margin: 0; font-size: 14.5px; }
.zitat.gross { border-left-color: var(--farbe, var(--unruhe-line)); padding: 18px 22px; }
.zitat.gross p { font-size: 1.22rem; line-height: 1.5; }
.g-t1 { stroke: var(--t1); } .g-t2 { stroke: var(--t2); } .g-t3 { stroke: var(--t3); } .g-t4 { stroke: var(--t4); }
.g-f1 { fill: var(--t1-soft); stroke: var(--t1); stroke-width: 2; } .g-f2 { fill: var(--t2-soft); stroke: var(--t2); stroke-width: 2; }
.g-f3 { fill: var(--t3-soft); stroke: var(--t3); stroke-width: 2; } .g-f4 { fill: var(--t4-soft); stroke: var(--t4); stroke-width: 2; }
.g-box { fill: var(--paper); stroke: var(--line-strong); stroke-width: 1.5; }
.g-pfeil { stroke: var(--line-strong); stroke-width: 2; fill: none; }
.g-spitze { fill: var(--line-strong); }
.g-titel { fill: var(--ink); font-family: "Source Serif 4", Georgia, serif; font-size: 19px; font-weight: 600; }
.g-punkt { fill: var(--line-strong); } .g-punkt-an { fill: var(--t2); }
.g-zelle { fill: var(--paper); stroke: var(--line); stroke-width: 1; }
.g-druck { fill: var(--t3); } .g-ursache { fill: var(--t1); }
.g-strich { stroke: var(--muted); stroke-width: 2; stroke-dasharray: 5 6; fill: none; }
@media (min-width: 641px) { .blaettern { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.blaettern a { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }