/* ===========================================================================
   Dokumentation der Energiefeldmechanik — Aufbau wie GitBook
   Kopfzeile mit Suche · Seitenleiste links · Inhalt · „Auf dieser Seite“ rechts
   Farben der Leitzeichen aus der bestätigten Reise der Zelle (ME02-M323).
   Die Gestaltungsregeln der Rico Brunner AG gelten hier ausdrücklich nicht.
   =========================================================================== */

:root {
  --bg: #f6f5f1; --paper: #ffffff; --ink: #1d232b; --muted: #5d6672; --line: #cfd3d8; --line-strong: #8d96a1;
  --link: #2f6f9f; --hover: #eceae4; --aktiv-bg: #e4edf5;
  --ruhe: #eef3f6; --ruhe-line: #7f9bb0; --ruhe-ink: #2c4a60;
  --unruhe: #fbe9d0; --unruhe-line: #c9781e; --unruhe-ink: #7a4510;
  --cell: #2f6f9f; --cell-fill: #dbe9f5;
  --e1: #7a828c; --e1-soft: #e9ebee;
  --e2: #13808a; --e2-soft: #d6eef0;
  --gruen: #3d7a34; --gruen-soft: #e1efdc; --boden: #6b6660; --boden-soft: #e9e6e1;
  --rot-hell: #e3262d; --rot-dunkel: #8f1d1d;
  --e3: #6a4f94; --e3-soft: #efe9f7;
  --hilfe: #b23b3b; --wasser: #3f7fb0; --wasser-soft: #d6e7f4; --grund: #7a5a35; --grund-soft: #e8dccb;
  --dm: #3a3f47; --dm-ink: #f1f2f4;
  --offen: #b23b3b; --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;
    --ruhe: #1c2329; --ruhe-line: #8fa9bd; --ruhe-ink: #c4d6e4;
    --unruhe: #3a2a16; --unruhe-line: #e3a457; --unruhe-ink: #f0c98f;
    --cell: #8db8dc; --cell-fill: #1d2a3a;
    --e1: #9aa3ad; --e1-soft: #23282e;
    --e2: #6fcfd6; --e2-soft: #15302f;
    --gruen: #97cc8c; --gruen-soft: #1d2c1a; --boden: #aaa39a; --boden-soft: #26241f;
    --rot-hell: #ff5a5f; --rot-dunkel: #d27a7a;
    --e3: #b9a3dc; --e3-soft: #2a2238;
    --hilfe: #e08080; --wasser: #8db8dc; --wasser-soft: #1d2a3a; --grund: #c9a77c; --grund-soft: #2e261c;
    --dm: #0b0d10; --dm-ink: #d5d9de;
    --offen: #e08080; --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;
  --ruhe: #1c2329; --ruhe-line: #8fa9bd; --ruhe-ink: #c4d6e4;
  --unruhe: #3a2a16; --unruhe-line: #e3a457; --unruhe-ink: #f0c98f;
  --cell: #8db8dc; --cell-fill: #1d2a3a;
  --e1: #9aa3ad; --e1-soft: #23282e;
  --e2: #6fcfd6; --e2-soft: #15302f;
    --gruen: #97cc8c; --gruen-soft: #1d2c1a; --boden: #aaa39a; --boden-soft: #26241f;
    --rot-hell: #ff5a5f; --rot-dunkel: #d27a7a;
  --e3: #b9a3dc; --e3-soft: #2a2238;
  --hilfe: #e08080; --wasser: #8db8dc; --wasser-soft: #1d2a3a; --grund: #c9a77c; --grund-soft: #2e261c;
  --dm: #0b0d10; --dm-ink: #d5d9de;
  --offen: #e08080; --warn-bg: #33261a;
  --shadow: none; color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }

/* Rollen der Leitzeichen: eine Stelle, an der jede Farbe ihre Bedeutung bekommt */
:root {
  --lz-ruhe: var(--ruhe-line); --lz-aus: var(--unruhe-line); --lz-zur: var(--cell);
  --lz-zelle: var(--gruen); --lz-zelle-soft: var(--gruen-soft);   /* K99: Zelle grün */
  --lz-schwarm: var(--e2); --lz-gruppe: var(--e3); --lz-punkt: var(--e2); /* K99: Ebene 2 türkis */
  --lz-boden: var(--boden); --lz-boden-soft: var(--boden-soft);        /* K100: Untergründe grau, nur Form */
  --lz-fremd: var(--rot-hell); --lz-sog: var(--rot-dunkel);            /* K106, K110: Rot für das Negative, Form unterscheidet */
}

* { 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; }
.marke span { font-weight: 400; color: var(--muted); }
@media (max-width: 640px) { .marke span { display: none; } }
.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; }
.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 vier 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: 1100px) { .marke span { display: none; } }
@media (max-width: 760px) { .kopf-innen { flex-wrap: wrap; height: auto; padding: 8px 12px; } .reiterleiste { order: 5; width: 100%; margin: 0; } .suche { order: 4; } }

/* Schild des Bereichs: ohne eigene Farbe, weil die Farben den Leitzeichen gehören */
.schild { font: 600 12px/1 Inter, sans-serif; letter-spacing: .04em; padding: 6px 10px; border-radius: 4px; background: var(--ink); color: var(--paper); }
.schild-praxis { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.kanon-herkunft { margin: 0 0 18px; padding: 12px 16px; border: 1.5px solid var(--ink); border-radius: 8px; }
.kanon-herkunft .titel, .bruecke .titel { font: 600 12px Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 4px; }
.kanon-herkunft p:last-child, .bruecke p:last-child { margin-bottom: 0; }
.bruecke { margin: 0 0 18px; padding: 12px 16px; border-radius: 8px; background: var(--hover); }
.kanon-felder th { width: 30%; color: var(--muted); font-weight: 600; }
.kanon-felder ul { margin: 0; padding-left: 18px; }
blockquote.zitat { margin: 16px 0 20px; padding: 10px 16px; border-left: 4px solid var(--line-strong); background: var(--paper); border-radius: 0 8px 8px 0; }
blockquote.zitat p { font-family: "Source Serif 4", Georgia, serif; }
blockquote.zitat p:last-child { margin-bottom: 0; font-family: Inter, sans-serif; font-size: 13px; color: var(--muted); }

/* ---------- 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 summary .nr { color: var(--muted); font-weight: 500; margin-right: 6px; }
.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, .leiste li span { 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; }
.leiste li span.geplant { color: var(--line-strong); font-style: italic; }
.leiste li.unter a { padding: 2px 10px 4px 26px; font-size: 13px; }  /* Unterpunkt, etwa das Blatt eines Symptoms (ME02-M410) */
.leiste li span.geplant::after { content: " · geplant"; font-size: 12px; }
.leiste .einzel > a { display: block; padding: 8px; border-radius: 6px; color: var(--ink); font-weight: 600; text-decoration: none; }
.leiste .einzel > a:hover { background: var(--hover); }
.leiste .einzel > a[aria-current="page"] { background: var(--aktiv-bg); color: var(--link); }
@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; }
.krume a { color: var(--muted); text-decoration: none; }
.krume a:hover { color: var(--link); }
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; }
.marke-st { font: 600 12px/1 Inter, sans-serif; letter-spacing: .03em; padding: 6px 10px; border-radius: 999px; border: 1.5px solid; }
.st-geprueft { color: var(--gruen); }
.st-assistenz { color: var(--muted); }
.st-offen { color: var(--offen); }
.st-vorschlag { color: var(--unruhe-ink); }
/* 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; }
.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; }
pre { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; overflow-x: auto; margin: 0 0 16px; }
pre code { background: none; padding: 0; }

/* 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 { font: 600 12px Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 4px; }
.kurz p: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); }

/* Einordnung der Assistenz */
.assistenz { margin: 16px 0 20px; padding: 14px 18px; border: 1px dashed var(--line-strong); border-radius: 8px; }
.assistenz .titel { font: 600 12px Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.assistenz p:last-child { margin-bottom: 0; }
.hinweis { margin: 16px 0 20px; padding: 12px 16px; border-radius: 8px; background: var(--warn-bg); border: 1px solid var(--line); }
.hinweis p:last-child { margin-bottom: 0; }

/* Bilder */
figure.bild { margin: 8px 0 26px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 18px; box-shadow: var(--shadow); }
figure.bild .flaeche { max-width: 640px; margin: 0 auto; }
figure.bild.breit .flaeche { max-width: none; }
figure.bild svg { display: block; width: 100%; height: auto; }
figure.bild figcaption { margin-top: 10px; font-size: 14px; color: var(--muted); }
figure.bild .zeichen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
figure.bild .zeichen a { font-size: 12px; text-decoration: none; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--muted); }
figure.bild .zeichen a:hover { color: var(--ink); border-color: var(--ink); }
a.bildlink { display: block; color: inherit; text-decoration: none; border-radius: 6px; }
a.bildlink:hover svg { opacity: .92; }
a.bildlink .mehr { display: block; text-align: right; font-size: 13px; color: var(--link); margin-top: 4px; }

/* Karten mit Bild, jede führt auf ihre Seite */
.karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin: 12px 0 28px; }
.karte { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px 14px; color: var(--ink); text-decoration: none; box-shadow: var(--shadow); transition: border-color .15s ease, transform .15s ease; }
.karte:hover { border-color: var(--link); }
@media (prefers-reduced-motion: no-preference) { .karte:hover { transform: translateY(-2px); } }
.karte svg { width: 100%; height: auto; display: block; }
.karte .k-nr { font: 600 11px Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }
.karte .k-titel { font-family: "Source Serif 4", Georgia, serif; font-weight: 600; font-size: 1.05rem; line-height: 1.3; margin-top: 2px; }
.karte .k-kurz { font-size: 13.5px; color: var(--muted); margin-top: 4px; line-height: 1.45; }

/* 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; }

/* Kennungen */
.kenn { font-size: 13px; color: var(--muted); }
a.kenn { color: var(--muted); }
a.kenn:hover { color: var(--link); }
.fundstellen { font-size: 13.5px; color: var(--muted); }

/* Glossar und Rückverweise */
.glossar h3 { margin: 22px 0 6px; color: var(--muted); font-family: Inter, sans-serif; font-size: 13px; letter-spacing: .08em; }
.glossar-zeile { margin: 0 0 8px !important; padding: 6px 0; border-bottom: 1px solid var(--line); }
.glossar-zeile a { text-decoration: none; }
.rueckverweise { columns: 2 220px; font-size: 14.5px; }
.status-beleg { align-self: center; }

/* Bildblatt der Leitzeichen */
.bildblatt { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin: 12px 0 28px; }
.lz-kachel { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px 12px; scroll-margin-top: 80px; }
.lz-kachel:target { outline: 2px solid var(--link); }
.lz-kachel svg { width: 100%; height: auto; display: block; background: var(--bg); border-radius: 6px; }
.lz-kachel.ist-offen { border-style: dashed; }
.lz-kachel.ist-geprueft { border-color: var(--gruen); }
.lz-name { font-weight: 600; margin: 8px 0 2px !important; font-size: 14.5px; }
.lz-zeichen, .lz-farbe { font-size: 13px; color: var(--muted); margin: 0 !important; line-height: 1.4; }
.lz-geprueft { font-size: 12.5px; color: var(--gruen); margin: 6px 0 0 !important; font-weight: 600; }
.lz-ungeprueft { font-size: 12.5px; color: var(--muted); margin: 6px 0 0 !important; font-style: italic; }

/* 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; }
.fuss { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }

/* „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); }

/* ---------- SVG: Texte ---------- */
svg text { font-family: Inter, system-ui, sans-serif; }
.b-sub { font-size: 13px; fill: var(--muted); }
.b-klein { font-size: 11.5px; fill: var(--muted); }
.b-lab { font-size: 14px; font-weight: 600; fill: var(--ink); }
.b-hell { fill: var(--dm-ink); }
.b-aus { fill: var(--unruhe-ink); }
.b-zur { fill: var(--lz-zur); }
.b-zelle { fill: var(--lz-zelle); }
.b-hilfe { fill: var(--lz-sog); }
.b-offen { font-size: 22px; font-weight: 600; fill: var(--offen); }
.b-offen-text { fill: var(--offen); }
.b-weiter { stroke: var(--line-strong); stroke-width: 2; fill: none; }
.b-anregen { stroke: var(--lz-zelle); stroke-width: 2; fill: none; stroke-dasharray: 6 5; }
.b-signatur { fill: none; stroke: var(--lz-zelle); stroke-width: 1.2; opacity: .55; }

/* ---------- SVG: Leitzeichen ---------- */
.lz-ruhe { fill: none; stroke: var(--lz-ruhe); stroke-width: 2.6; }
.lz-schieben { stroke: var(--lz-ruhe); stroke-width: 2; }
.lz-aus { fill: none; stroke: var(--lz-aus); stroke-width: 2.6; }
.lz-zur { fill: none; stroke: var(--lz-zur); stroke-width: 2.6; }
.lz-zelle { fill: var(--lz-zelle-soft); stroke: var(--lz-zelle); stroke-width: 2.6; }
.lz-zelle-aussen { fill: none; stroke-width: 1.6; opacity: .7; }
.lz-zelle-e3 { fill: var(--e3-soft); }
.lz-zelle-feld { fill: var(--cell-fill); }
.lz-zelle-hilfe { stroke-dasharray: 7 6; }
.lz-zelle-fest { stroke-width: 3.6; }
.lz-zelle-blass { opacity: .6; stroke-width: 1.6; }
.lz-dreh { fill: none; stroke: var(--lz-zelle); stroke-width: 2; }
.lz-raum { stroke: var(--muted); stroke-width: 1.4; fill: none; }
.lz-gestrichelt { stroke-dasharray: 4 4; }
.lz-e1 { fill: var(--e1-soft); stroke: var(--e1); stroke-width: 2; }
.lz-schwarm { fill: var(--paper); stroke: var(--lz-schwarm); stroke-width: 1.4; }
.lz-punkt { fill: var(--lz-punkt); }
.lz-gruppe { fill: none; stroke: var(--lz-gruppe); stroke-width: 1.8; stroke-dasharray: 6 4; }
.lz-neu { fill: var(--ruhe); stroke: var(--lz-ruhe); stroke-width: 1.4; stroke-dasharray: 3 3; }
.lz-hilfe { stroke: var(--lz-boden); stroke-width: 2; fill: none; }
.lz-wasser-flaeche { fill: var(--lz-boden-soft); }
.lz-wasser { fill: none; stroke: var(--lz-boden); stroke-width: 2; }
.lz-grund-flaeche { fill: var(--lz-boden-soft); }
.lz-grund { stroke: var(--lz-boden); stroke-width: 3; }
.lz-erde-strich { stroke: var(--lz-boden); stroke-width: 2; opacity: .45; }
.lz-zombie { fill: var(--paper); stroke: var(--lz-zelle); stroke-width: 2; stroke-dasharray: 5 5; opacity: .45; } /* K104: bleibt Zelle, sehr blass */
.lz-unsichtbar { opacity: .18; } /* aufgelöste Zelle (K119): so schwach, dass sie unsichtbar wird; Darstellung der Assistenz */
.lz-sog { fill: none; stroke: var(--lz-sog); stroke-width: 2.2; }
.lz-fremd { fill: var(--lz-fremd); fill-opacity: .7; stroke: var(--lz-fremd); stroke-width: 1.6; }
.lz-abgrenzung { fill: none; stroke: var(--lz-zelle); stroke-width: 1.6; }
.lz-fremd-strich { stroke: var(--line-strong); stroke-width: 1.4; }
.lz-offen { fill: none; stroke: var(--offen); stroke-width: 1.6; stroke-dasharray: 5 4; }
.lz-pixel { fill: var(--dm-ink); opacity: .08; }
.lz-spitze-aus { fill: var(--lz-aus); } .lz-spitze-zur { fill: var(--lz-zur); } .lz-spitze-ruhe { fill: var(--lz-ruhe); }
.lz-spitze-grau { fill: var(--line-strong); } .lz-spitze-hilfe { fill: var(--lz-boden); } .lz-spitze-zelle { fill: var(--lz-zelle); }
.h-nichts { fill: var(--paper); stroke: var(--line-strong); stroke-width: 1.4; stroke-dasharray: 6 5; }
.h-plasma { fill: var(--unruhe); stroke: var(--unruhe-line); stroke-width: 1.4; }
.h-blitz { fill: none; stroke: var(--unruhe-line); stroke-width: 2; }
.h-dm { fill: var(--dm); }
.h-materie { fill: var(--e1-soft); stroke: var(--e1); stroke-width: 1.4; }
.w-bereich { fill: none; stroke: var(--line-strong); stroke-width: 1.4; stroke-dasharray: 6 5; }
.w-frei { fill: none; stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 4 5; }
.w-hilfe { fill: var(--lz-boden-soft); fill-opacity: .4; stroke: var(--lz-boden); stroke-width: 1.2; stroke-dasharray: 4 3; }
.w-stab { fill: var(--lz-boden-soft); stroke: var(--lz-boden); stroke-width: 1.2; }
.w-entw { fill: var(--lz-boden-soft); stroke: var(--lz-boden); stroke-width: 1.2; }
.w-erde { fill: url(#p-erde); stroke: none; }
figure.foto img { display: block; width: 100%; height: auto; border-radius: 6px; }
.t-e2 { fill: var(--e2-soft); stroke: var(--e2); stroke-width: 1.6; }
.t-e3 { fill: var(--e3-soft); stroke: var(--e3); stroke-width: 1.6; stroke-dasharray: 6 4; }

@media print { .kopf, .leiste, .verzeichnis, .blaettern { display: none; } .schale { display: block; } }

/* Neun Positionen eines Archetyps (Ricos Auftrag ME02-M403): Schalter oben, wirkt auf die ganze Seite.
   Neutrale Farben, damit keine Leitzeichen-Farbe eine neue Bedeutung bekommt. */
.schalter { position: sticky; top: 60px; z-index: 20; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin: 18px 0 8px; box-shadow: var(--shadow); }
.schalter-kopf { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.schalter-titel { font: 600 12px/1 Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.schalter-wahl { font-weight: 600; flex: 1; }
.schalter-alle { font: 500 13px Inter, sans-serif; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink); cursor: pointer; }
.schalter-alle[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.schalter-raster { display: grid; grid-template-columns: max-content repeat(3, minmax(56px, 1fr)); gap: 6px 8px; align-items: center; }
.schalter-raster .sp { font-size: 12px; color: var(--muted); text-align: center; }
.schalter-raster .ze { font-size: 13px; color: var(--muted); padding-right: 6px; }
.schalter-raster button { font: 600 14px Inter, sans-serif; height: 34px; border-radius: 7px; border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink); cursor: pointer; }
.schalter-raster button:hover { background: var(--hover); }
.schalter-raster button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.schalter-raster button:focus-visible, .schalter-alle:focus-visible, .schalter-select:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.schalter-select { display: none; width: 100%; font: 15px Inter, sans-serif; padding: 8px; border-radius: 7px; border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink); }
.schalter-hinweis { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); }
html:not(.pos-aktiv) .schalter-raster, html:not(.pos-aktiv) .schalter-alle, html:not(.pos-aktiv) .schalter-select { display: none; }
html:not(.pos-aktiv) .schalter-hinweis::after { content: " Ohne Skript stehen alle Positionen untereinander."; }
@media (max-width: 760px) { .schalter-raster { display: none; } .pos-aktiv .schalter-select { display: block; } .schalter { position: static; } }
.pos-block { border-left: 3px solid var(--line-strong); padding: 2px 0 2px 14px; margin: 12px 0; }
.pos-marke { font: 600 12px Inter, sans-serif; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.pos-aktiv:not(.pos-alle) .pos-marke { display: none; }
.pos-aktiv:not(.pos-alle) .pos-block { border-left-color: transparent; padding-left: 0; }

/* Zwei Sichten je Abschnitt: Psychologie und Energyology (ME02-M404) */
.schalter-sicht { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; }
.sichtwahl { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 999px; overflow: hidden; background: var(--paper); }
.sichtwahl button { font: 500 13px Inter, sans-serif; padding: 5px 14px; border: 0; background: transparent; color: var(--ink); cursor: pointer; }
.sichtwahl button + button { border-left: 1px solid var(--line-strong); }
.sichtwahl button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.sichtwahl button:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; }
.sichtwahl-abschnitt { margin: -2px 0 12px; }
/* Vier Sichten auf dem Handy (Symptome, ME02-M408): die Knöpfe teilen sich die Breite und brechen um */
@media (max-width: 560px) { .sichtwahl { display: flex; flex-wrap: wrap; max-width: 100%; border-radius: 12px; } .sichtwahl button { flex: 1 1 auto; padding: 6px 10px; } }
html:not(.pos-aktiv) .sichtwahl, html:not(.pos-aktiv) .schalter-sicht { display: none; }
.teil-energyology { border-left-style: dashed; }  /* neutral: Farben gehören den Leitzeichen */
.pos-aktiv:not(.pos-alle) .teil-energyology { border-left: 3px dashed var(--line-strong); padding-left: 14px; }
.teil-energyology > .pos-marke { color: var(--ink); }
.pos-aktiv:not(.pos-alle) .teil > .pos-marke { display: block; }

/* ---------- Fernbehandlung: Bausteine der Kundendokumentation (werkzeug/gitbook.py) ---------- */
.text { max-width: 780px; }
.breit, .breit-tab { max-width: 780px; }
.lead { font-size: 1.12rem; color: var(--muted); }
.klein { font-size: 14px; color: var(--muted); }
.label { font: 600 12px Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.teil-satz { font-size: 1.05rem; color: var(--muted); margin: 0 0 20px; }
.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; }
.quelle { font-size: 12px; color: var(--muted); }
.fuer-dich { background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--gruen); border-radius: 8px; padding: 14px 18px; margin: 16px 0 24px; box-shadow: var(--shadow); }
.fuer-dich h3 { font: 600 12px Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
ul.liste { margin: 0 0 14px; padding-left: 22px; }
ul.liste li span { display: inline; }
.zwei { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin: 12px 0 24px; }
.zwei .karte { display: block; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; box-shadow: var(--shadow); transform: none; }
.zwei .karte.betont { border-color: var(--line-strong); }
.zwei .karte h3 { margin: 0 0 8px; font-size: 1.05rem; }
.zwei .karte p, .zwei .karte li { font-size: 14.5px; }
.zwei .karte h3 a { text-decoration: none; }
.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; }
.weg { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin: 12px 0 24px; }
.weg .glied { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; font-size: 14.5px; line-height: 1.5; }
.weg .glied b { display: block; font-weight: 600; margin-bottom: 4px; }
.weg .glied .nr { display: block; color: var(--muted); font-size: 12px; }
.beispiel { margin: 16px 0 20px; padding: 14px 18px; border: 1px dashed var(--line-strong); border-radius: 8px; }
.faq dt { font-weight: 600; margin-top: 18px; }
.faq dd { margin: 4px 0 0; }
.faq .verweis { color: var(--muted); font-size: 14px; }
.glossar dt { font-weight: 600; margin-top: 14px; } .glossar dd { margin: 2px 0 0; }
.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; }
.g-legende { display: none; font-size: 14px; color: var(--muted); }
@media (max-width: 640px) { .grafik text { display: none; } .g-legende { display: block; } }
.herkunft { font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 12px; margin-top: 32px; }
hr.trenner { border: 0; border-top: 1px solid var(--line); margin: 28px 0; }
.leiste .stand { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-left: 6px; vertical-align: middle; background: var(--unruhe-line); }
.leiste .stand.bereit { background: var(--gruen); }
.pruef { margin: 32px 0 0; padding: 12px 16px; border-radius: 8px; border: 1px dashed var(--unruhe-line); font-size: 14px; }
.pruef h3 { font: 600 12px Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--unruhe-ink); margin: 0 0 6px; }
.pruef p { margin: 0 0 6px; }
mark.lp { background: var(--warn-bg); color: inherit; padding: 0 2px; text-decoration: line-through; text-decoration-color: var(--unruhe-line); }
.lp-vorschlag { display: block; font: 400 14.5px/1.5 Inter, sans-serif; letter-spacing: 0; text-transform: none; margin: 6px 0 12px; padding: 8px 12px; border-left: 3px solid var(--gruen); border-radius: 6px; background: var(--gruen-soft); color: var(--ink); }
.lp-vorschlag b { color: var(--gruen); margin-right: 6px; }
.lp-grund { color: var(--muted); font-size: 13px; }
td .lp-vorschlag { font-size: 13px; }

/* ---------- 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; }
.blaettern { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .blaettern a { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }