/* Ergänzungen für die Dokumentation: Logo, Block «Bereiche» und Startseite.
   Farben und Schriften kommen aus der Gestaltung der Bereiche (doku.css, buch.css);
   eigene Farbwerte gibt es hier nicht. */

:root { --kopf-h: 60px; }

/* Logo oben links, an der Stelle der Marke des Modells */
.portal-logo { display: block; flex: 0 0 auto; line-height: 0; }
.portal-logo img { width: auto; display: block; }
.portal-logo .logo-weiss { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .portal-logo .logo-schwarz { display: none; }
  :root:not([data-theme="light"]) .portal-logo .logo-weiss { display: block; }
}
:root[data-theme="dark"] .portal-logo .logo-schwarz { display: none; }
:root[data-theme="dark"] .portal-logo .logo-weiss { display: block; }
.kopf .portal-logo:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }

.kopf-innen .portal-logo img { height: 22px; }
/* Ricos Vorgabe vom 21.10.2026: Das Logo steht allein über der linken Leiste, die Reiter
   beginnen über dem Inhalt. Rechnung: Leiste 280 px, Inhalt mit 40 px Rand, also Text bei
   320 px; Kopf 16 px Rand + Logo + 16 px Abstand + 12 px Reiterrand + 12 px Reiterpolster = 320 px. */
@media (min-width: 961px) { .kopf-innen .portal-logo { flex: 0 0 264px; } }
@media (max-width: 760px) { .kopf-innen .portal-logo img { height: 20px; } }

/* Gruppe «Bereiche» zuoberst in der linken Leiste: Schrift, Farben und
   Abstände aus der Leiste des Modells; nur die Trennlinie darunter kommt dazu. */
.leiste .bereiche { padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.leiste .bereiche a[aria-current="true"] { background: var(--aktiv-bg); color: var(--link); font-weight: 600; }

/* Linke Leiste einheitlich wie in der Sitzung: ohne Stand-Punkte hinter den Seiten */
.leiste .stand { display: none; }

/* Suchfeld zurückhaltender (Ricos Hinweis vom 21.10.2026: «zu dominant»); die Treffer bleiben breit */
.kopf .suche { flex: 0 1 220px; max-width: 220px; }
.kopf .suche input { font-size: 13px; padding: 6px 10px 6px 30px; }
.kopf .suche .treffer { left: auto; right: 0; width: min(420px, 90vw); }
@media (max-width: 760px) { .kopf .suche { flex: 1 1 auto; max-width: none; } }

/* Klebende Spalten folgen der Kopfhöhe; portal.js misst sie in --kopf-h. */
html { scroll-padding-top: calc(var(--kopf-h) + 16px); }
.leiste, .verzeichnis { top: var(--kopf-h); height: calc(100vh - var(--kopf-h)); }
.schalter { top: var(--kopf-h); }
@media (max-width: 960px) { .leiste { top: var(--kopf-h); height: auto; } }

/* ---------- Startseite: Aufbau und Gestaltung wie die Bereiche (gestaltung.css) ---------- */
.umschalter-rb { margin-left: auto; }
.suche + .umschalter-rb { margin-left: 0; }
.bereich-karten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 16px 0 24px; }
.bereich-karte { display: block; padding: 16px 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper);
  color: var(--ink); text-decoration: none; box-shadow: var(--shadow); }
.bereich-karte:hover { border-color: var(--link); }
.bereich-karte small { display: block; color: var(--muted); font-size: 12px; margin-bottom: 4px; }
.bereich-karte strong { display: block; font-family: "Source Serif 4", Georgia, serif; font-size: 1.15rem; font-weight: 600; color: var(--link); margin-bottom: 6px; }
.bereich-karte span { display: block; font-size: 14.5px; line-height: 1.55; }
@media (max-width: 640px) { .bereich-karten { grid-template-columns: 1fr; } }

/* Ricos Entscheid vom 21.10.2026: Auf keiner Seite der Dokumentation sind Quellen zu sehen,
   auch im Entwurf nicht. Jeder Verweis in die Quellen trägt data-beleg; er bleibt im
   Quelltext und fällt beim Veröffentlichen ganz weg (oeffentlich.py). */
[data-beleg] { display: none !important; }

/* Zitate als Ricos Stimme, ohne Etikett und ohne Fundstelle (Kundenseiten über Rico) */
.stimme { margin: 28px 0 32px; padding: 4px 0 4px 22px; border-left: 3px solid var(--unruhe-line); }
.stimme p { font-family: "Source Serif 4", Georgia, serif; font-size: 1.45rem; line-height: 1.4; font-weight: 500; margin: 0 0 8px; }
.stimme cite { font: normal 14px Inter, sans-serif; color: var(--muted); font-style: normal; }

/* Grafiken in Inhaltsseiten (Entwicklungsreise, 21.10.2026): nur Variablen, damit Hell und Dunkel stimmen */
.grafik { margin: 24px 0; }
.grafik svg { display: block; width: 100%; height: auto; max-width: 640px; }
.grafik figcaption { color: var(--muted); font-size: 14px; margin-top: 8px; }
.grafik polygon { stroke: var(--ink); stroke-width: 1.2; }
.grafik .schicht-anfang { fill: var(--line-strong); }
.grafik .schicht-mitte { fill: var(--line); }
.grafik .schicht-ende { fill: var(--paper); }
.grafik .beschrift { fill: var(--ink); font-size: 14px; }
.grafik .pfeil { fill: none; stroke: var(--link); stroke-width: 1.6; stroke-dasharray: 5 4; marker-end: url(#spitze); }
.grafik .pfeilkopf { fill: var(--link); }

/* ---------- Ausbau 23.10.2026: Bausteine wie in den Dokumentationen Fernbehandlung und Sitzung (Arbeitsweise) ---------- */
: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; }
svg.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; }
svg.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 svg.grafik { margin: 0 0 6px; }
@media (max-width: 640px) { .abb { overflow-x: auto; -webkit-overflow-scrolling: touch; } .abb svg.grafik { min-width: 620px; } .abb svg.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; }

/* ---------- Startseite (Ricos Auftrag vom 23.10.2026): Einstieg für alle, die von der Webseite kommen ---------- */
.inhalt h1 + .lede { font-size: 1.12rem; }
.start-held { padding: 34px 32px 28px; margin-top: 18px; }
.start-held .gross { font-size: clamp(1.45rem, 3.2vw, 2.1rem); line-height: 1.25; max-width: 24ch; }
.start-held p:last-child { max-width: 46ch; }
.start-held .feldbild { width: 360px; height: 360px; right: -80px; top: -70px; opacity: .6; }
@media (max-width: 640px) { .start-held { padding: 22px 18px 18px; } .start-held .feldbild { width: 220px; height: 220px; right: -80px; top: -70px; opacity: .3; } }
.start-wetter > div { border-top: 4px solid var(--farbe); }
.start-wetter b { font-family: "Source Serif 4", Georgia, serif; font-size: 1.08rem; color: var(--farbe); }
.start-fragen { list-style: none; padding: 0; margin: 12px 0 18px; display: grid; gap: 8px; }
.start-fragen li { margin: 0; max-width: none; }
.start-fragen a { display: block; padding: 12px 16px 12px 44px; position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
  color: var(--ink); text-decoration: none; font-family: "Source Serif 4", Georgia, serif; font-size: 1.08rem; line-height: 1.4; }
.start-fragen a::before { content: "?"; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; background: var(--e3-soft); color: var(--e3); font: 600 12px Inter, sans-serif; }
.start-fragen a:hover { border-color: var(--e3); }
.start-heute { border-left-color: var(--e3); }
.bereich-karte small { font: italic 500 15px/1.4 "Source Serif 4", Georgia, serif; color: var(--muted); margin-bottom: 6px; }
.bereich-karte:hover small { color: var(--ink); }

/* Sprachwahl neben Hell/Dunkel und Footer mit Impressum, AGB, Datenschutz (Ricos Auftrag vom 23.10.2026) */
.sprachwahl { display: flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--paper); }
.sprachwahl a, .sprachwahl span { font: 500 12px/1 Inter, system-ui, sans-serif; padding: 6px 9px; border-radius: 999px; color: var(--ink); text-decoration: none; }
.sprachwahl a[aria-current] { background: var(--ink); color: var(--paper); }
.sprachwahl span[aria-disabled] { color: var(--muted); opacity: .6; cursor: default; }
@media (hover: hover) { .sprachwahl a:not([aria-current]):hover { background: var(--hover); } }
.sprachwahl + .umschalter-rb { margin-left: 0; }
.sprachwahl { margin-left: auto; }
.suche + .sprachwahl { margin-left: 0; }
.portal-fuss { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--line); font: 13px/1.6 Inter, system-ui, sans-serif; color: var(--muted); }
.portal-fuss a { color: var(--muted); }
.portal-fuss a:hover { color: var(--ink); }

/* Englische Sitzungsseiten: Sitzungen nur auf Deutsch (Rico, 23.10.2026) */
.nur-deutsch { margin: 0 0 20px; padding: 12px 16px; border: 1px solid var(--line-strong); border-left: 4px solid var(--link); border-radius: 8px; background: var(--paper); font: 15px/1.5 Inter, system-ui, sans-serif; color: var(--ink); }