/*
  Plattform, Gestaltung Fassung 3 „Klar und kompakt“ (Variante A, freigegeben 07.10.2026).
  Vorlage für src/static/plattform.css. Werte stehen nur in :root (docs/gestaltung.md §2); keine Schriftgröße in px,
  keine Hex- oder rgba-Farbe außerhalb von :root. Schrift und Icons kommen aus dem Repo (§3, §4.12).
*/

/* ================================================================== Schrift (§3) */
@font-face { font-family: "Inter"; src: url("schrift/Inter-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("schrift/Inter-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("schrift/Inter-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url("schrift/Inter-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  /* 2a. Akzent (je Praxis tauschbar) */
  --akzent: #0B6A85;
  --akzent-dunkel: #08546A;
  --akzent-hell: #E2F0F4;
  --akzent-hauch: #F2F8FA;

  /* 2b. Feste Werte */
  --auf-akzent: #FFFFFF;
  --text: #17262E;
  --grau: #55636B;
  --grau-tief: #3E4C54;
  --hg: #F4F6F8;
  --karte: #FFFFFF;
  --karte-rand: #E2E7EB;
  --kopf-hg: #FAFBFC;
  --flaeche-tief: #EEF2F4;
  --flaeche-hover: #F5F7F9;
  --linie: #EDF0F2;
  --linie-stark: #D9E0E5;
  --knopfrand: #CBD3D9;
  --feldrand: #7C8B95;
  --feldrand-hover: var(--grau);
  --feldrand-fehler: var(--fehler-voll);
  --leiste-text: #45545C;
  --hinweis-grund: #FFF1D6;
  --hinweis-rand: #F0D9A8;
  --hinweis-text: #7A4D00;
  --krise-grund: var(--fehler-grund);
  --krise-rand: var(--fehler-voll);
  --gesperrt-text: #9AA5AB;
  --gesperrt-rand: #E3E7EA;
  --gesperrt-haupt: #9FB6C4;
  --gesperrt-feld-grund: #F4F6F8;
  --schatten-karte: 0 1px 2px rgba(16, 32, 40, .04);
  --schatten-menue: 0 8px 24px rgba(16, 32, 40, .12);

  /* 2c. Bedeutungsfarben (nie tauschbar); ein Vollton trägt nie allein eine Bedeutung */
  --ruhe-text: #18663F; --ruhe-grund: #E5F4EC; --ruhe-voll: #2E9E62;
  --handeln-text: #7A4D00; --handeln-grund: #FFF1D6; --handeln-voll: #D89A16;
  --fehler-text: #A3261B; --fehler-grund: #FDE8E6; --fehler-voll: #C0392B;
  --ruht-text: #3E4C54; --ruht-grund: #EEF2F4; --ruht-voll: #B6BFC4;
  --fremd-text: #3E4C54; --fremd-grund: #F7F9FA; --fremd-voll: #9AA5AB;

  /* 2e. Maße, Rundungen */
  --leiste-breite: 14.25rem;
  --rand: 1.5rem;
  --rand-schmal: 0.875rem;
  --luecke: 0.875rem;
  --abstand: 0.625rem;
  --abstand-klein: 0.375rem;
  --abstand-gross: 1.25rem;
  --zeile-polster: 0.5rem 0.875rem;
  --fokus-breite: 2px;
  --streifen: 3px;
  --ziel-min: 2.75rem;
  --haken-groesse: 1.125rem;
  --knopf-hoehe: 2.125rem;
  --zeilenknopf-hoehe: 1.75rem;
  --inhalt-patient: 45rem;
  --formular-breite: 60rem;
  --logo-hoehe: 2rem;
  --radius-karte: 10px;
  --radius-knopf: 8px;
  --radius-feld: 8px;
  --radius-klein: 6px;
  --radius-marke: 999px;

  /* 3. Schrift */
  --schrift: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Noto Sans", Arial, sans-serif;
  --schrift-fest: Consolas, Menlo, "DejaVu Sans Mono", monospace;
  --groesse-text: 0.875rem;
  --groesse-text-patient: 0.9375rem;
  --groesse-klein: 0.8125rem;
  --groesse-mini: 0.75rem;
  --groesse-h2: 0.84375rem;
  --groesse-seitentitel: 1.25rem;
  --groesse-sache: 1.1875rem;
  --groesse-kennzahl: 1.375rem;
  --groesse-code: 1.25rem;
  --zeilenhoehe: 1.45;
  --zeilenhoehe-titel: 1.25;
}

/* ================================================================== Grund (§4.0) */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; }
body { margin: 0; font-family: var(--schrift); font-size: var(--groesse-text); line-height: var(--zeilenhoehe); color: var(--text);
  background: var(--hg); -webkit-font-smoothing: antialiased; }
html.patient body { font-size: var(--groesse-text-patient); }
/* G45 (D199): Anschriften ohne die Kursivschrift des Browsers */
address { font-style: normal; }
h1, h2, h3 { margin: 0; line-height: var(--zeilenhoehe-titel); }
h1 { font-size: var(--groesse-seitentitel); font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: var(--groesse-h2); font-weight: 600; }
h3 { font-size: var(--groesse-text); font-weight: 600; }
p { margin: 0 0 var(--abstand); }
a { color: var(--akzent); text-underline-offset: .15em; }
:focus-visible { outline: var(--fokus-breite) solid var(--akzent); outline-offset: 2px; }
.sprung { position: absolute; left: -999rem; top: 0; z-index: 20; background: var(--karte); padding: var(--abstand); }
.sprung:focus { left: var(--abstand); }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.inline { display: inline; }
.festbreite, code { font-family: var(--schrift-fest); }
.ergaenzung { color: var(--grau); font-size: var(--groesse-klein); font-weight: 400; }

/* Icons (§4.12): Lucide-Linien aus dem Sprite, Größe aus der Schrift */
.i { width: 1.125em; height: 1.125em; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round;
  stroke-linejoin: round; vertical-align: -0.2em; }
.i.klein { width: 1em; height: 1em; }
.i.ruhe { color: var(--ruhe-text); } .i.aktiv { color: var(--akzent); } .i.offen { color: var(--grau); }

/* ================================================================== Gerüst mit Leiste (§4.1) */
.app { min-height: 100vh; display: grid; grid-template-columns: var(--leiste-breite) minmax(0, 1fr); }
.leiste { background: var(--karte); border-right: 1px solid var(--karte-rand); display: flex; flex-direction: column;
  padding: 0.875rem 0.625rem; gap: 0.25rem; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.logo { display: flex; align-items: center; gap: 0.625rem; padding: 0.25rem 0.5rem 0.875rem; font-weight: 700;
  font-size: 0.9375rem; color: var(--text); text-decoration: none; }
.logo img { max-height: var(--logo-hoehe); max-width: 100%; object-fit: contain; }
.logo-zeichen { width: 1.75rem; height: 1.75rem; border-radius: 7px; background: var(--akzent); color: var(--auf-akzent);
  display: grid; place-items: center; font-size: var(--groesse-klein); font-weight: 700; flex: none; }
.bereiche ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.bereiche a { display: flex; align-items: center; gap: 0.625rem; padding: 0.4375rem 0.625rem; border-radius: 7px;
  color: var(--leiste-text); font-weight: 500; text-decoration: none; }
.bereiche a:hover { background: var(--flaeche-hover); color: var(--text); }
.bereiche a[aria-current] { background: var(--akzent-hell); color: var(--akzent-dunkel); font-weight: 600; }
.zahl { margin-left: auto; font-size: var(--groesse-mini); font-weight: 600; min-width: 1.25rem; padding: 1px 6px;
  border-radius: 10px; background: var(--akzent-hell); color: var(--akzent-dunkel); text-align: center; }
.bereiche ul ul { margin: 2px 0 6px 1.75rem; border-left: 1px solid var(--karte-rand); padding-left: 6px; }
.bereiche ul ul a { padding: 0.3125rem 0.5rem; font-weight: 400; font-size: var(--groesse-klein); }
.bereiche ul ul a[aria-current] { background: none; color: var(--akzent-dunkel); font-weight: 600; }
.konto { margin-top: auto; border-top: 1px solid var(--karte-rand); padding: 0.75rem 0.5rem 0; display: flex; align-items: center;
  gap: 0.625rem; font-size: var(--groesse-klein); }
.konto .bild, .seitenkopf .bild, details.konto-menue .bild { width: 1.875rem; height: 1.875rem; border-radius: 50%; background: var(--akzent-hell);
  color: var(--akzent-dunkel); display: grid; place-items: center; font-weight: 700; font-size: var(--groesse-mini); flex: none; }
.konto .wer { margin: 0; color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.konto > div { min-width: 0; }
.konto ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 10px; }
.konto a, .konto .verweis { color: var(--leiste-text); font-size: var(--groesse-mini); }

/* Schmaler Kopf: öffentliche Seiten, vor dem zweiten Faktor, Patientenseiten (§4.1, §4.9) */
.seitenkopf { background: var(--karte); border-bottom: 1px solid var(--karte-rand); display: flex; align-items: center;
  gap: 0.75rem; padding: 0.625rem var(--rand); position: sticky; top: 0; z-index: 5; }
.seitenkopf .logo { padding: 0; }
.seitenkopf .rechts { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }
details.konto-menue { position: relative; }
details.konto-menue > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; height: 2.125rem;
  padding: 0 10px 0 4px; border: 1px solid var(--knopfrand); border-radius: 17px; font-weight: 600; cursor: pointer; }
details.konto-menue > summary::-webkit-details-marker { display: none; }
details.konto-menue ul { position: absolute; right: 0; top: calc(100% + 4px); z-index: 10; list-style: none; margin: 0;
  padding: 4px; min-width: 14rem; background: var(--karte); border: 1px solid var(--karte-rand); border-radius: var(--radius-feld);
  box-shadow: var(--schatten-menue); }
details.konto-menue li > * { display: flex; padding: 7px 10px; border-radius: var(--radius-klein); color: var(--text); }
/* G26 (D152): das Konto-Menü der Leiste gilt nur unter 52rem; breit bleibt der Kontobereich unten in der Leiste */
.leiste > details.konto-menue { display: none; }

.inhalt { padding: 1.125rem var(--rand) 2rem; min-width: 0; }
.pfad { display: flex; align-items: center; gap: 6px; font-size: var(--groesse-klein); color: var(--grau); margin-bottom: 10px;
  flex-wrap: wrap; }
.pfad a { color: var(--grau); text-decoration: none; }
.pfad a:hover { text-decoration: underline; }
.seitentitel { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.titel-unterzeile { color: var(--grau); font-size: var(--groesse-klein); margin: 2px 0 0; }
.werkzeuge { margin-left: auto; display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.suche { display: flex; align-items: center; gap: 8px; border: 1px solid var(--feldrand); background: var(--karte);
  border-radius: var(--radius-feld); padding: 0 10px; height: var(--knopf-hoehe); color: var(--grau); width: 15rem; }
.suche input { border: 0; outline: 0; font: inherit; color: var(--text); background: transparent; width: 100%; min-height: 0;
  padding: 0; }
.suche:focus-within { outline: var(--fokus-breite) solid var(--akzent); outline-offset: 2px; }

/* ================================================================== Raster, Karten, Kennzahlen (§4.2) */
.spalten { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--luecke); align-items: start; }
.sp3 { grid-column: span 3; } .sp4 { grid-column: span 4; } .sp5 { grid-column: span 5; } .sp6 { grid-column: span 6; }
.sp7 { grid-column: span 7; } .sp8 { grid-column: span 8; } .sp12 { grid-column: span 12; }
.stapel { display: grid; gap: var(--luecke); align-content: start; }
/* G60 (D235): Karten und Raster direkt nacheinander im Inhalt (auch in ein form gefasst) bekommen die Lücke des Stapels */
.inhalt > :is(.karte, .spalten, .stapel, .zwei-spalten, form:has(> .karte))
  + :is(.karte, .spalten, .stapel, .zwei-spalten, form:has(> .karte)) { margin-top: var(--luecke); }
.karte { background: var(--karte); border: 1px solid var(--karte-rand); border-radius: var(--radius-karte);
  box-shadow: var(--schatten-karte); min-width: 0; }
.karte > header { display: flex; align-items: center; gap: 8px; padding: 0.6875rem 0.875rem; border-bottom: 1px solid var(--linie); }
/* G24 (D144): Werkzeugzeile im Kartenkopf (M2) bricht um; der Umschalter wird nie zusammengedrückt */
.karte > header { flex-wrap: wrap; row-gap: .5rem; }
.karte > header .umschalter { flex-shrink: 0; }
/* G31 (D166): Filter als Werkzeugzeile im Kartenkopf (Zugriffsprotokoll): Felder in einer Zeile, Beschriftung davor */
.filterzeile { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .5rem; font-size: var(--groesse-klein); }
.filterzeile select, .filterzeile input { width: auto; }
.karte > header :is(h1, h2) { display: flex; align-items: center; gap: 8px; }
.karte > header :is(h1, h2) .i { color: var(--akzent); }
.karte > header .anzahl { font-size: var(--groesse-mini); color: var(--grau); font-weight: 500; }
.karte > header .weiter { margin-left: auto; font-size: var(--groesse-klein); font-weight: 500; display: inline-flex;
  align-items: center; gap: 2px; text-decoration: none; }
.karte > header .weiter:hover { text-decoration: underline; }
.innen { padding: 0.875rem; }
.karte .leer, .leer { padding: 0.875rem; color: var(--grau); font-size: var(--groesse-klein); }
/* G51 (D214): Leertext in einer Karte mit Innenabstand nicht doppelt einrücken */
.innen > .leer { padding: 0; }

.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--luecke);
  margin-bottom: var(--luecke); }
.kennzahl { background: var(--karte); border: 1px solid var(--karte-rand); border-radius: var(--radius-karte);
  box-shadow: var(--schatten-karte); padding: 0.75rem 0.875rem; display: grid; grid-template-columns: auto 1fr; gap: 1px 0.75rem;
  align-items: center; color: var(--text); text-decoration: none; }
.kennzahl:hover { border-color: var(--knopfrand); }
.kennzahl .symbol { grid-row: span 3; width: 2.25rem; height: 2.25rem; border-radius: 9px; display: grid; place-items: center;
  background: var(--akzent-hell); color: var(--akzent-dunkel); }
.kennzahl .symbol .i { width: 1.125rem; height: 1.125rem; }
.kennzahl strong { font-size: var(--groesse-kennzahl); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kennzahl span { color: var(--grau); font-size: var(--groesse-klein); }
.kennzahl small { grid-column: 2; color: var(--grau); font-size: var(--groesse-mini); }
.kennzahl.handeln .symbol { background: var(--handeln-grund); color: var(--handeln-text); }
.kennzahl.fehler .symbol { background: var(--fehler-grund); color: var(--fehler-text); }

/* Listen in Karten: eine Zeile je Eintrag */
.liste { list-style: none; margin: 0; padding: 0; }
.liste > li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 0.75rem; align-items: center;
  padding: var(--zeile-polster); border-bottom: 1px solid var(--linie); }
.liste > li:last-child { border-bottom: 0; }
/* D98: Zeilen ohne Zeichen beginnen in der ersten Spalte, der Betrag steht bündig rechts */
.liste > li > .was:first-child { grid-column: 1 / span 2; }
/* D81: mehrere Handgriffe einer Listenzeile stehen zusammen rechts; unter 52rem unter dem Text */
.liste .werkzeuge { display: flex; gap: .5rem; align-items: center; }
/* D81: eine Auswahl in einer Knopfleiste (Filter) ragt nie über die Karte */
.knopfleiste select { max-width: 100%; }
.liste.punkte > li { grid-template-columns: 0.5rem minmax(0, 1fr); }
.liste.balken > li { grid-template-columns: 1fr; }
.liste .zeit { font-weight: 600; min-width: 2.875rem; font-variant-numeric: tabular-nums; }
.liste .zeit small { display: block; color: var(--grau); font-weight: 400; font-size: var(--groesse-mini); }
.liste .was a, .liste .was strong { font-weight: 600; color: var(--text); text-decoration: none; }
.liste .was a:hover { text-decoration: underline; }
.liste .meta { display: flex; gap: 2px 10px; color: var(--grau); font-size: var(--groesse-klein); flex-wrap: wrap; align-items: center; }
.liste .meta > span { display: inline-flex; align-items: center; gap: 4px; }
.liste .meta .marke { padding: 0 7px; font-size: var(--groesse-mini); }
.liste .text { color: var(--grau); font-size: var(--groesse-klein); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.liste .zeile { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.liste .wann { color: var(--grau); font-size: var(--groesse-mini); white-space: nowrap; }
.liste li.frei .zeit, .liste li.frei .was strong { color: var(--grau); font-weight: 400; }
.liste li.jetzt { background: var(--akzent-hauch); box-shadow: inset var(--streifen) 0 0 var(--akzent); }
.zeichen { width: 1.75rem; height: 1.75rem; border-radius: 7px; display: grid; place-items: center; background: var(--flaeche-tief);
  color: var(--grau); }
.zeichen.handeln { background: var(--handeln-grund); color: var(--handeln-text); }
.zeichen.fehler { background: var(--fehler-grund); color: var(--fehler-text); }
.zeichen.info { background: var(--akzent-hell); color: var(--akzent-dunkel); }
.ungelesen { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--akzent); }
.balken-zeile { display: grid; grid-template-columns: 1fr 8.75rem 3rem; gap: 10px; align-items: center; }
.spur { height: 6px; border-radius: 3px; background: var(--linie-stark); overflow: hidden; }
.spur i { display: block; height: 100%; background: var(--akzent); border-radius: 3px; }
.w0 { width: 0; } .w5 { width: 5%; } .w10 { width: 10%; } .w15 { width: 15%; } .w20 { width: 20%; } .w25 { width: 25%; }
.w30 { width: 30%; } .w35 { width: 35%; } .w40 { width: 40%; } .w45 { width: 45%; } .w50 { width: 50%; } .w55 { width: 55%; }
.w60 { width: 60%; } .w65 { width: 65%; } .w70 { width: 70%; } .w75 { width: 75%; } .w80 { width: 80%; } .w85 { width: 85%; }
.w90 { width: 90%; } .w95 { width: 95%; } .w100 { width: 100%; }

/* ================================================================== Stand als Marke (§4.7) */
.marke { display: inline-flex; align-items: center; gap: 4px; font-size: var(--groesse-mini); font-weight: 600; padding: 2px 8px;
  border-radius: var(--radius-marke); white-space: nowrap; background: var(--ruht-grund); color: var(--ruht-text); }
.marke .i { width: 0.8125rem; height: 0.8125rem; }
.marke.ruhe { background: var(--ruhe-grund); color: var(--ruhe-text); }
.marke.handeln { background: var(--handeln-grund); color: var(--handeln-text); }
.marke.fehler { background: var(--fehler-grund); color: var(--fehler-text); }
.marke.ruht { background: var(--ruht-grund); color: var(--ruht-text); }
.marke.fremd { background: var(--karte); color: var(--fremd-text); box-shadow: inset 0 0 0 1px var(--fremd-voll); }
.marke.info { background: var(--akzent-hell); color: var(--akzent-dunkel); }
.neu-marke { display: inline-flex; font-size: var(--groesse-mini); font-weight: 600; color: var(--handeln-text);
  background: var(--handeln-grund); border-radius: 4px; padding: 0 6px; margin-left: 6px; }

/* ================================================================== Tabellen (§4.5) */
.tabellenrahmen { overflow-x: auto; }
/* G48: Absolut gesetzte Texte (.unsichtbar im Tabellenkopf) bleiben im rollenden Rahmen und machen die Seite nicht breiter */
.tabellenrahmen { position: relative; }
/* G49 (D211): Tabellen mit gleiche-spalten haben feste Spaltenbreiten, damit Wert, Herkunft und Handgriff
   über mehrere Karten untereinander stehen (Allgemein) */
table.gleiche-spalten { table-layout: fixed; }
table.gleiche-spalten th:nth-child(1) { width: 50%; }
table.gleiche-spalten th:nth-child(2) { width: 20%; }
table.gleiche-spalten th:nth-child(3) { width: 18%; }
table.gleiche-spalten td { overflow-wrap: anywhere; }
/* G52 (D215): gleiche Spalten bei Tabellen, die den Wert in der Zeile setzen (Feld und Knöpfe im Handgriff) */
table.gleiche-spalten:has(td > form.inline) th:nth-child(1) { width: 36%; }
table.gleiche-spalten:has(td > form.inline) th:nth-child(2) { width: 8%; }
table.gleiche-spalten:has(td > form.inline) th:nth-child(3) { width: 10%; }
/* G58 (D231, ändert G49): fester Handgriff, die erste Spalte nimmt den Rest; Tabellen mit Feld im Handgriff (G52) ausgenommen */
table.gleiche-spalten:not(:has(td > form.inline)) th:nth-child(1) { width: auto; }
table.gleiche-spalten:not(:has(td > form.inline)) :is(th:nth-child(2), th:nth-child(3)) { width: 18%; }
table.gleiche-spalten:not(:has(td > form.inline)) th:last-child { width: 7.5rem; }
table { width: 100%; border-collapse: collapse; font-size: var(--groesse-klein); }
th { text-align: left; font-weight: 600; color: var(--grau); font-size: var(--groesse-mini); padding: 0.5rem 0.875rem;
  border-bottom: 1px solid var(--linie); background: var(--kopf-hg); white-space: nowrap; }
td, tbody th { padding: 0.5rem 0.875rem; border-bottom: 1px solid var(--linie); vertical-align: middle; }
tbody th { background: none; color: var(--text); font-size: var(--groesse-klein); font-weight: 400; white-space: normal; }
tbody tr:last-child > * { border-bottom: 0; }
tbody tr:hover { background: var(--flaeche-hover); }
tr.gewaehlt { background: var(--akzent-hell); }
th a { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }
.name a { font-weight: 600; color: var(--text); text-decoration: none; }
.name a:hover { text-decoration: underline; }
.name .unter, .name small { display: block; color: var(--grau); font-size: var(--groesse-mini); }
.name.handeln { box-shadow: inset var(--streifen) 0 0 var(--handeln-voll); }
.name.fehler { box-shadow: inset var(--streifen) 0 0 var(--fehler-voll); }
.name.ruht { box-shadow: inset var(--streifen) 0 0 var(--ruht-voll); }
.name.fremd { box-shadow: inset var(--streifen) 0 0 var(--fremd-voll); }
/* G64 (M1, Liste der Bibliothek): Zeichen der Art vor dem Namen; Module in der Akzentfarbe */
.bib-name { display: flex; align-items: center; gap: .5rem; }
.bib-name .rund { display: grid; place-items: center; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 7px;
  background: var(--flaeche-tief); color: var(--grau-tief); }
.bib-name .rund.modul { background: var(--akzent-hell); color: var(--akzent-dunkel); }
.betrag { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
th.betrag { text-align: right; }
td.leer { color: var(--grau); }
tr.gruppe-zeile td { background: var(--kopf-hg); font-weight: 600; font-size: var(--groesse-mini); color: var(--grau-tief);
  padding-top: 6px; padding-bottom: 6px; }
.zeichen-spalte { width: 1.875rem; padding-right: 0; }
/* G68 (M3a, v3-m3a-fallakte): Spuren laufender Module in der Bausteintabelle; Kopf einer Spur getönt mit Streifen,
   Bausteine eingerückt, ein Modul im Modul je Ebene eine Stufe weiter */
tr.spur-zeile td { background: var(--akzent-hauch); padding-top: 6px; padding-bottom: 6px; }
tr.spur-zeile td:first-child { box-shadow: inset var(--streifen) 0 0 var(--akzent); }
tr.spur-zeile .i { color: var(--akzent); }
tr.spur-zeile strong { font-weight: 600; }
/* G70 (D244, ändert G68): Die Unterzeile darf umbrechen; sonst schiebt sie die Spalte der Handgriffe aus der Karte */
tr.spur-zeile .unter { display: block; color: var(--grau); font-size: var(--groesse-mini); }
tr.in-spur > td:nth-child(2), tr.spur-zeile.tiefe-2 > td:nth-child(2) { padding-left: 1.75rem; }
tr.in-spur.tiefe-2 > td:nth-child(2), tr.spur-zeile.tiefe-3 > td:nth-child(2) { padding-left: 3.25rem; }
tr.in-spur.tiefe-3 > td:nth-child(2) { padding-left: 4.75rem; }
.stufen { display: flex; align-items: center; gap: 8px; font-size: var(--groesse-mini); color: var(--grau); white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.stufen .stufenbalken { display: flex; gap: 3px; }
.stufen .stufenbalken i { width: 0.875rem; height: 6px; border-radius: 3px; background: var(--linie-stark); }
.stufen .stufenbalken i.fertig { background: var(--akzent); }
.stufen .stufenbalken i.jetzt { background: var(--akzent); opacity: .45; }

/* ================================================================== Knöpfe (§4.3) */
/* Ein Knopf ohne Klasse sieht aus wie ein Zweitknopf (Vorlagen vor der Umgliederung); :where hält die Spezifität bei 0. */
.haupt, .zweit, .zeilenknopf, :where(button:not([class])) { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: var(--knopf-hoehe);
  padding: 0 0.8125rem; border-radius: var(--radius-knopf); font: inherit; font-weight: 600; font-size: var(--groesse-klein);
  border: 1px solid var(--knopfrand); background: var(--karte); color: var(--text); cursor: pointer; text-decoration: none;
  white-space: nowrap; margin: 0; }
.zweit:hover, .zeilenknopf:hover, :where(button:not([class])):hover { background: var(--flaeche-hover); }
.haupt { background: var(--akzent); border-color: var(--akzent); color: var(--auf-akzent); }
.haupt:hover { background: var(--akzent-dunkel); border-color: var(--akzent-dunkel); }
.zeilenknopf { height: var(--zeilenknopf-hoehe); padding: 0 0.625rem; font-size: var(--groesse-mini); }
.zeilenknopf.haupt { background: var(--akzent); border-color: var(--akzent); color: var(--auf-akzent); }
.voll { width: 100%; }
.haupt:disabled, .zweit:disabled, .zeilenknopf:disabled { cursor: not-allowed; color: var(--gesperrt-text); border-color: var(--gesperrt-rand);
  background: var(--karte); }
.haupt:disabled { background: var(--gesperrt-haupt); border-color: var(--gesperrt-haupt); color: var(--auf-akzent); }
.verweis { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: var(--akzent); text-decoration: underline;
  text-underline-offset: .15em; cursor: pointer; }
.knopfleiste { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: var(--abstand); }
/* G28 (D160): folgt auf eine Knopfleiste das nächste Feld, gehört es sichtbar nicht mehr zum Knopf darüber */
.knopfleiste + .feld { margin-top: var(--abstand-gross); }
.knopfleiste .links { margin-right: auto; }
.knopfleiste .ab-rechts { margin-left: auto; }
.knopfleiste.abschluss { justify-content: flex-end; padding: 0.75rem 0.875rem; margin: 0; border-top: 1px solid var(--linie);
  background: var(--kopf-hg); border-radius: 0 0 var(--radius-karte) var(--radius-karte); }
.knopfleiste .erklaerung, .erklaerung { flex-basis: 100%; color: var(--grau); font-size: var(--groesse-mini); margin: 0; }
.knopfleiste .stand { margin-right: auto; color: var(--grau); font-size: var(--groesse-mini); display: inline-flex; align-items: center; gap: 6px; }
details.mehr { position: relative; }
details.mehr > summary { list-style: none; margin-top: 0; }
details.mehr > summary::-webkit-details-marker { display: none; }
details.mehr ul { position: absolute; right: 0; top: calc(100% + 4px); z-index: 10; list-style: none; margin: 0; padding: 4px;
  min-width: 14rem; background: var(--karte); border: 1px solid var(--karte-rand); border-radius: var(--radius-feld);
  box-shadow: var(--schatten-menue); }
details.mehr li > * { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; border-radius: var(--radius-klein);
  color: var(--text); text-decoration: none; background: none; border: 0; font: inherit; cursor: pointer; }
details.mehr li > *:hover { background: var(--flaeche-hover); }

/* Umschalter: verbundene Segmente, wählt einen Wert oder eine Ansicht (§4.2) */
.umschalter { display: inline-flex; border: 1px solid var(--knopfrand); border-radius: var(--radius-knopf); overflow: hidden;
  margin: 0; padding: 0; vertical-align: middle; }
.umschalter a, .umschalter label { display: inline-flex; align-items: center; gap: 6px; padding: 0.375rem 0.75rem;
  font-size: var(--groesse-klein); font-weight: 500; color: var(--text); text-decoration: none; cursor: pointer;
  border-left: 1px solid var(--knopfrand); position: relative; }
.umschalter > :first-child, .umschalter label:first-of-type { border-left: 0; }
.umschalter input { position: absolute; opacity: 0; }
.umschalter a[aria-current], .umschalter label:has(input:checked) { background: var(--akzent-hell); color: var(--akzent-dunkel); font-weight: 600; }
.umschalter a:focus-visible,
.umschalter label:has(input:focus-visible) { outline: var(--fokus-breite) solid var(--akzent); outline-offset: -2px; }
/* G46 (D205): Umschalter als fieldset mit legend: die Beschriftung steht über den Segmenten, nicht in der Rahmenlinie;
   den Rahmen tragen dann die Segmente selbst. */
fieldset.umschalter:has(> legend) { display: flex; flex-wrap: wrap; border: 0; border-radius: 0; overflow: visible; }
fieldset.umschalter > legend { float: left; width: 100%; padding: 0; margin: 0 0 4px; font-weight: 600;
  font-size: var(--groesse-klein); color: var(--grau-tief); }
fieldset.umschalter:has(> legend) > label { border: 1px solid var(--knopfrand); border-left-width: 0; }
fieldset.umschalter > legend + label:first-of-type { border-left-width: 1px;
  border-radius: var(--radius-knopf) 0 0 var(--radius-knopf); }
fieldset.umschalter:has(> legend) > label:last-child { border-radius: 0 var(--radius-knopf) var(--radius-knopf) 0; }
fieldset.umschalter > legend + label:first-of-type:last-child { border-radius: var(--radius-knopf); }
/* G56 (D224, D228; ersetzt G55): Umschalter am Handy umbrechen statt stapeln; ein Segment trennt nie ein Wort.
   Trennlinien als innere Schatten, die am Rand vom Rahmen (overflow: hidden) abgeschnitten werden. */
@media (max-width: 30rem) {
  .umschalter:not(:has(> legend)) { display: flex; flex-wrap: wrap; max-width: 100%; }
  .umschalter:not(:has(> legend)) > :is(label, a) { flex: 1 0 auto; justify-content: center; white-space: nowrap;
    border-left: 0; margin: -1px 0 0 -1px; box-shadow: inset 1px 0 var(--knopfrand), inset 0 1px var(--knopfrand); }
}
:where(form, .innen) > fieldset.umschalter:has(> legend) { margin-bottom: .75rem; }

/* ================================================================== Seite einer benannten Sache (§4.1) */
.sachkopf { background: var(--karte); border: 1px solid var(--karte-rand); border-radius: var(--radius-karte) var(--radius-karte) 0 0;
  box-shadow: var(--schatten-karte); padding: 0.875rem 1rem; display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 6px 1rem; align-items: center; }
/* G63 (M1, Eintrag der Bibliothek): Kopf einer Sache ohne Reiter, ganz gerundet und mit Lücke darunter */
.sachkopf:not(:has(+ .reiter)) { border-radius: var(--radius-karte); margin-bottom: var(--luecke); }
.sachkopf .gesichter { display: flex; }
.sachkopf .gesichter span { width: 2.375rem; height: 2.375rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700;
  font-size: var(--groesse-klein); background: var(--akzent-hell); color: var(--akzent-dunkel); border: 2px solid var(--karte); }
.sachkopf .gesichter span + span { margin-left: -10px; background: var(--flaeche-tief); color: var(--grau-tief); }
.sachkopf h1 { font-size: var(--groesse-sache); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.angaben-zeile { display: flex; gap: 4px 16px; flex-wrap: wrap; color: var(--grau); font-size: var(--groesse-klein);
  margin-top: 3px; }
.angaben-zeile span { display: inline-flex; align-items: center; gap: 5px; }
.reiter { background: var(--karte); border: 1px solid var(--karte-rand); border-top: 0; border-radius: 0 0 var(--radius-karte) var(--radius-karte);
  padding: 0 0.625rem; margin-bottom: var(--luecke); box-shadow: var(--schatten-karte); }
.reiter ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; overflow-x: auto; }
.reiter a { display: flex; align-items: center; gap: 7px; padding: 0.6875rem 0.625rem 0.5625rem; color: var(--grau); font-weight: 500;
  border-bottom: 2px solid transparent; white-space: nowrap; text-decoration: none; }
.reiter a:hover { color: var(--text); }
.reiter a[aria-current] { color: var(--akzent-dunkel); border-bottom-color: var(--akzent); font-weight: 600; }

/* Ablauf: Stufen als Weg, Entscheidung */
.weg { list-style: none; margin: 0; padding: 0.75rem 0.875rem 0.375rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px; }
.weg li { border-top: 3px solid var(--linie-stark); padding-top: 8px; font-size: var(--groesse-klein); color: var(--grau); }
.weg li strong { display: block; color: var(--text); }
.weg li.fertig, .weg li.jetzt { border-top-color: var(--akzent); }
.weg li.jetzt strong { color: var(--akzent-dunkel); }
.entscheidung { margin: 0.75rem 0.875rem; border: 1px solid var(--akzent); border-radius: var(--radius-feld); background: var(--akzent-hauch);
  padding: 0.75rem 0.875rem; }
.entscheidung h3 { display: flex; align-items: center; gap: 8px; color: var(--akzent-dunkel); }
.entscheidung p { margin: 4px 0 10px; color: var(--grau-tief); }
.optionen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 10px; border: 0; padding: 0; }
.optionen label { display: flex; gap: 8px; align-items: flex-start; border: 1px solid var(--knopfrand); background: var(--karte);
  font-weight: 400; color: var(--text); font-size: var(--groesse-text);
  border-radius: var(--radius-feld); padding: 8px 10px; cursor: pointer; }
.optionen label small { display: block; color: var(--grau); font-size: var(--groesse-mini); }
.optionen label:has(input:checked) { border-color: var(--akzent); box-shadow: 0 0 0 1px var(--akzent); }
/* G69 (M3b, v3-m3b-einbinden): gesperrte Wahlkarte grau, der Grund steht als small darunter (B037) */
.optionen label:has(input:disabled) { color: var(--grau); background: var(--gesperrt-feld-grund); border-color: var(--gesperrt-rand);
  cursor: not-allowed; }
.optionen input, .interventionen input[type="checkbox"], .haken input { accent-color: var(--akzent); }
.vorschlag-marke { display: inline-flex; align-items: center; gap: 4px; font-size: var(--groesse-mini); font-weight: 600;
  color: var(--akzent-dunkel); background: var(--akzent-hell); border-radius: 4px; padding: 0 5px; margin-left: 4px; }

/* Sitzung: Interventionen je Modul, Verlauf */
.interventionen { list-style: none; margin: 0; padding: 0; border: 1px solid var(--linie-stark); border-radius: var(--radius-feld); }
.interventionen li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 10px; padding: 8px 10px;
  border-bottom: 1px solid var(--linie); align-items: start; }
.interventionen li:last-child { border-bottom: 0; }
.interventionen li:has(input:checked) { background: var(--akzent-hauch); }
.interventionen input[type="checkbox"] { width: 1rem; height: 1rem; margin-top: 2px; }
.interventionen label { font-weight: 600; }
.interventionen .standard { grid-column: 2; color: var(--grau); font-size: var(--groesse-mini); }
.interventionen input[type="text"] { font: inherit; border: 1px solid var(--feldrand); border-radius: var(--radius-klein);
  padding: 5px 8px; width: 100%; max-width: 22.5rem; margin-top: 2px; }
.verlauf { list-style: none; margin: 0; padding: 0.375rem 0.875rem 0.625rem; }
.verlauf li { position: relative; padding: 8px 0 8px 18px; border-left: 2px solid var(--linie-stark); margin-left: 4px; }
.verlauf li::before { content: ""; position: absolute; left: -6px; top: 13px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--karte); border: 2px solid var(--akzent); }
.verlauf .wann { color: var(--grau); font-size: var(--groesse-mini); }
.verlauf p { color: var(--grau-tief); margin: 2px 0 0; }

/* Angaben als Paare */
dl.angaben { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; padding: 0.75rem 0.875rem; }
dl.angaben dt { color: var(--grau); }
dl.angaben dd { margin: 0; font-weight: 500; }

/* ================================================================== Formulare (§4.4) */
form { margin: 0; }
label { font-weight: 600; font-size: var(--groesse-klein); color: var(--grau-tief); }
input, select, textarea { font: inherit; color: var(--text); }
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) { border: 1px solid var(--feldrand);
  border-radius: var(--radius-feld); padding: 0.4375rem 0.625rem; background: var(--karte); min-height: var(--knopf-hoehe); }
:where(input, select, textarea):hover { border-color: var(--feldrand-hover); }
:where(input, select, textarea):focus { outline: var(--fokus-breite) solid var(--akzent); outline-offset: 0; border-color: var(--akzent); }
input:disabled, select:disabled, textarea:disabled { background: var(--gesperrt-feld-grund); color: var(--gesperrt-text);
  border-color: var(--gesperrt-rand); }
textarea { display: block; width: 100%; max-width: 40rem; min-height: 9rem; line-height: var(--zeilenhoehe); resize: vertical; }
::placeholder { color: var(--grau); opacity: 1; }
.feld { display: grid; gap: 4px; margin-bottom: 0.75rem; }
.feld input:not([type="checkbox"]):not([type="radio"]), .feld select { width: 100%; max-width: 30rem; }
/* G34: gegen die Feldregel darüber durchsetzen (vorher wog .feld input:not(…):not(…) schwerer) */
.feld.kurz input:not([type="checkbox"]):not([type="radio"]) { max-width: 7rem; }
input[type="file"] { font: inherit; color: var(--grau); max-width: 100%; }
input[type="file"]::file-selector-button { font: inherit; font-weight: 600; color: var(--text); background: var(--karte);
  border: 1px solid var(--knopfrand); border-radius: var(--radius-knopf); padding: .375rem .75rem; margin-right: .75rem; cursor: pointer; }
.feld .umschalter { justify-self: start; }
.feldhinweis { display: block; color: var(--grau); font-size: var(--groesse-mini); font-weight: 400; max-width: 30rem; }
.feldfehler { display: block; color: var(--fehler-text); font-size: var(--groesse-mini); font-weight: 600; }
[aria-invalid="true"] { border-color: var(--feldrand-fehler); box-shadow: 0 0 0 1px var(--feldrand-fehler); }
.optional { color: var(--grau); font-weight: 400; }
.beschriftung { font-weight: 600; font-size: var(--groesse-klein); color: var(--grau-tief); }
fieldset { min-width: 0; }
fieldset.gruppe { border: 1px solid var(--karte-rand); border-radius: var(--radius-karte); background: var(--karte); padding: 0.875rem;
  margin: 0 0 var(--luecke); max-width: var(--formular-breite); }
fieldset.gruppe > legend { font-weight: 600; color: var(--akzent-dunkel); padding: 0 6px; }
/* G71 (M7a, Seitenfeld „Preis“): eine Feldgruppe als .feld ohne Rahmen des Browsers, die legend wie ein label */
fieldset.feld { border: 0; padding: 0; margin: 0 0 0.75rem; }
fieldset.feld > legend { padding: 0; margin: 0 0 4px; font-weight: 600; font-size: var(--groesse-klein); color: var(--grau-tief); }
/* G21: Teile, die nur bei Art „Prozent“ gelten (Rabattcode), ohne Skript ausblenden, sobald „Betrag“ gewählt ist */
form:has(input[name="art"][value="betrag"]:checked) .nur-prozent { display: none; }
/* In einer Karte trägt die Karte den Rahmen; die Gruppe ist dort nur Abschnitt (kein Rahmen im Rahmen). */
.karte fieldset.gruppe { border: 0; border-radius: 0; background: none; padding: 0; margin: 0 0 var(--abstand-gross); max-width: none; }
.karte fieldset.gruppe > legend { padding: 0; margin-bottom: var(--abstand); }
.raster { display: grid; grid-template-columns: 9rem minmax(12rem, 18rem) 9rem minmax(12rem, 18rem); gap: 0.75rem 0.75rem;
  align-items: start; }
.raster.klein { grid-template-columns: 9rem minmax(12rem, 22rem); }
.raster > label, .raster > .beschriftung { padding-top: 0.5rem; }
.haken { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; color: var(--text); margin: 0.375rem 0; }
.haken input, .haken-einzeln { width: var(--haken-groesse); height: var(--haken-groesse); flex: none; margin: 1px 0 0; }
.fehlerliste { border: 1px solid var(--fehler-voll); background: var(--fehler-grund); color: var(--fehler-text); border-radius: var(--radius-feld);
  padding: 0.75rem 0.875rem; max-width: var(--formular-breite); margin-bottom: var(--abstand-gross); }
.fehlerliste h2 { color: var(--fehler-text); margin: 0 0 .25rem; }
.fehlerliste a { color: var(--fehler-text); }
.zaehler { display: block; color: var(--grau); font-size: var(--groesse-mini); text-align: right; max-width: 40rem; }
.fester-teil { background: var(--gesperrt-feld-grund); border: 1px solid var(--gesperrt-rand); border-radius: var(--radius-feld);
  padding: 0.5rem 0.625rem; white-space: pre-wrap; max-width: 40rem; }
.vorspann { margin-bottom: var(--luecke); }
.stand-zeile { color: var(--grau); font-size: var(--groesse-klein); }
/* G25 (D154): unter einer Tabelle mit Abstand, nicht an der letzten Zeile */
.tabellenrahmen + .stand-zeile { margin-top: var(--abstand); }
.zwei-spalten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--luecke); }

/* ================================================================== Meldungen (§4.7) */
.meldung-fehler { color: var(--fehler-text); font-weight: 600; }
.meldung-ok { color: var(--ruhe-text); }
.handlungsbedarf { color: var(--fehler-text); font-weight: 600; }
.hinweisband { position: sticky; bottom: 0; z-index: 4; background: var(--hinweis-grund); border-top: 1px solid var(--hinweis-rand);
  color: var(--hinweis-text); padding: 0.5rem var(--rand); display: flex; flex-wrap: wrap; gap: 0 1rem; font-size: var(--groesse-klein); }
.krisenhinweis { background: var(--krise-grund); border: 1px solid var(--krise-rand); border-radius: var(--radius-karte); padding: 0.875rem;
  margin: 0.625rem 0; }
.krisenhinweis ul { list-style: none; padding: 0; margin: 0.5rem 0 0; display: grid; gap: 4px; }
.krisenhinweis li a { color: var(--fehler-text); font-weight: 600; display: inline-flex; align-items: center; gap: .5rem; min-height: var(--ziel-min); }
.krisenhinweis p { margin: 0; }
.krisenhinweis ul + p { margin-top: .5rem; }
.krisenhinweis li .klein-text { display: block; margin: -.375rem 0 0 1.625rem; }
/* G5: direkt unter der auslösenden Frage, vor der nächsten */
fieldset.frage + .krisenhinweis { margin: calc(.5rem - var(--abstand-gross)) 0 var(--abstand-gross); }
/* G5: nach „Zwischenspeichern“ unter der h1, fokussiert, mit Link zum Hinweis */
.meldung-krise { display: flex; gap: .5rem; align-items: flex-start; margin: .5rem 0 .75rem; padding: .625rem .75rem; background: var(--krise-grund);
  border: 1px solid var(--krise-rand); border-radius: var(--radius-karte); color: var(--fehler-text); font-weight: 600; }
.meldung-krise a { color: var(--fehler-text); }
.meldung-krise .i { margin-top: .125rem; }
/* G5: Krisensignal in der Fallansicht, erledigt mit „Gesehen, ich kümmere mich“ */
.krisenhinweis h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 .375rem; font-size: var(--groesse-text);
  color: var(--fehler-text); }
.krisenhinweis .knopfleiste { margin-top: .75rem; }
.inhalt > .krisenhinweis { margin: 0 0 var(--luecke); }
/* G4: Warnband der Abmeldung, haftend oben neben der Leiste, beim Scrollen sichtbar */
[hidden] { display: none !important; }
.abmeldeband { position: fixed; top: 0; left: var(--leiste-breite); right: 0; z-index: 20; display: flex; flex-wrap: wrap;
  align-items: center; gap: .5rem 1rem; padding: .625rem var(--rand); background: var(--hinweis-grund);
  border-bottom: 1px solid var(--hinweis-rand); box-shadow: var(--schatten-menue); color: var(--hinweis-text); font-weight: 600; }
.abmeldeband p { display: flex; align-items: center; gap: 8px; margin: 0; }
.abmeldeband form, .abmeldeband > .haupt { margin-left: auto; }
html.patient .abmeldeband { left: 0; padding-inline: max(var(--rand-schmal), calc((100% - var(--inhalt-patient)) / 2)); }
.abmeldeband:not([hidden]):not(.abgemeldet) ~ * main { padding-top: calc(1.125rem + 3.5rem); }
/* Abgemeldet: Inhalt ausgeblendet (main hidden), das Band wird zur Karte in der Inhaltsspalte */
.abmeldeband.abgemeldet { top: 6rem; left: calc(var(--leiste-breite) + var(--rand)); right: auto;
  width: min(32rem, calc(100% - var(--leiste-breite) - 2 * var(--rand))); flex-direction: column; align-items: flex-start;
  padding: var(--abstand-gross); background: var(--karte); border: 1px solid var(--karte-rand); border-radius: var(--radius-karte);
  color: var(--text); }
.abmeldeband.abgemeldet > .haupt { margin-left: 0; }
html.patient .abmeldeband.abgemeldet { left: 0; right: 0; margin-inline: auto; width: min(32rem, calc(100% - 2 * var(--rand-schmal))); }
.abmeldeband.abgemeldet ~ * nav.unten { display: none; }
.abmeldeband.abgemeldet ~ .app .leiste .zahl { display: none; }
/* D82 (WCAG 2.4.11): Was den Fokus bekommt oder angesprungen wird, rollt nie unter eine haftende Leiste.
   Werte = Höhe der Leiste + 1rem Luft; gemessen an den Regeln dieser Datei (Knopf, Polster, Rand). */
html.patient { scroll-padding-top: 4.5rem; scroll-padding-bottom: 4.5rem; }
html:has(.hinweisband) { scroll-padding-bottom: 4rem; }
html:has(.ablaufleiste:not(.im-fluss)) { scroll-padding-bottom: 5.25rem; }
html:has(.abmeldeband:not([hidden]):not(.abgemeldet)) { scroll-padding-top: 4.75rem; }
.rueckfrage { max-width: 48rem; }
.rueckfrage .frage { font-size: 0.9375rem; font-weight: 600; }
.rueckfrage .folge { color: var(--grau-tief); }

/* ================================================================== Ohne Leiste: öffentlich, vor dem zweiten Faktor (§4.1) */
.mitte { display: grid; place-items: start center; padding: 3.5rem 1rem; }
.mitte > .karte { width: 100%; max-width: 25rem; }
.mitte h1 { display: flex; align-items: center; gap: 8px; }
.mitte .titel-unterzeile { margin: 4px 0 1rem; }
/* G53 (D217): eigenständige Hüllen (400, 500, beschäftigt, …) mit Rand und Breite, ohne Kopf */
body > main:only-child { max-width: 36rem; margin: 0 auto; padding: 3.5rem 1rem; }
body > main:only-child > h1 { margin: 0 0 .5rem; }
.fussleiste { text-align: center; color: var(--grau); font-size: var(--groesse-mini); padding: 0.75rem; margin: 0; }
.fussleiste a { color: var(--grau); display: inline-flex; align-items: center; min-height: var(--ziel-min); }

/* ================================================================== Patientenseiten (§4.9) */
html.patient main { max-width: var(--inhalt-patient); margin-inline: auto; padding: 0.875rem var(--rand-schmal) 5.5rem;
  display: grid; gap: 0.75rem; }
html.patient .karte { border-radius: 12px; padding: 0.875rem; }
/* G27 (D157): Die Patientenkarte trägt den Innenabstand selbst; .innen rückt dort nicht noch einmal ein */
html.patient .karte .innen { padding: 0; }
html.patient .karte > h2 { font-size: var(--groesse-mini); color: var(--grau); font-weight: 600; display: flex; align-items: center; gap: 6px;
  margin-bottom: 8px; text-transform: uppercase; letter-spacing: .04em; }
html.patient .karte > h2 .i { color: var(--akzent); }
html.patient .karte.hervor { border-color: var(--akzent); box-shadow: 0 0 0 1px var(--akzent); }
html.patient .gross { font-size: 1rem; font-weight: 700; margin: 0; }
html.patient .klein-text { color: var(--grau); font-size: var(--groesse-klein); margin: 2px 0 0; }
html.patient .haupt, html.patient .zweit { height: var(--ziel-min); padding: 0 1rem; font-size: var(--groesse-text-patient); border-radius: 10px; }
html.patient .voll { margin-top: 0.75rem; }
/* D88: Breite nach Inhalt, dann gleichmäßig auffüllen; passt ein Knopf nicht mehr daneben, rutscht er in die nächste Zeile */
html.patient .knopfleiste > * { flex: 1 1 auto; }
nav.unten { position: fixed; left: 0; right: 0; bottom: 0; background: var(--karte); border-top: 1px solid var(--karte-rand);
  z-index: 5; padding: 4px 4px 6px; display: grid; grid-template-columns: repeat(4, 1fr); }
/* Am Rechner stehen die Bereiche unten über der Spalte, nicht über die ganze Breite verteilt. */
nav.unten { padding-inline: max(4px, calc((100% - var(--inhalt-patient)) / 2)); }
nav.unten a { display: grid; justify-items: center; gap: 2px; padding: 6px 2px; color: var(--grau); font-size: var(--groesse-mini);
  font-weight: 500; text-decoration: none; min-height: 3rem; position: relative; }
nav.unten a .i { width: 1.375rem; height: 1.375rem; }
nav.unten a[aria-current] { color: var(--akzent-dunkel); font-weight: 600; }
nav.unten a[aria-current]::before { content: ""; position: absolute; top: -5px; width: 1.75rem; height: 3px; border-radius: 2px;
  background: var(--akzent); }
nav.unten .neu { position: absolute; top: 3px; left: calc(50% + 6px); min-width: 1rem; height: 1rem; border-radius: 8px;
  background: var(--fehler-text); color: var(--auf-akzent); font-size: 0.625rem; font-weight: 700; display: grid; place-items: center;
  padding: 0 4px; }
.fortschritt { height: 6px; border-radius: 3px; background: var(--linie-stark); margin: 10px 0 4px; overflow: hidden; }
.fortschritt i { display: block; height: 100%; background: var(--akzent); }
progress { width: 100%; height: 0.5rem; accent-color: var(--akzent); }
.weg-kurz { display: flex; gap: 4px; margin-top: 10px; }
.weg-kurz i { flex: 1; height: 6px; border-radius: 3px; background: var(--linie-stark); }
.weg-kurz i.fertig { background: var(--akzent); }
.weg-kurz i.jetzt { background: var(--akzent); opacity: .45; }
/* G54 (D220): Karte „Ihr Weg“; je Schritt eine Zeile, Stand als klein-text, Abstand unter den Balken */
.weg-kurz + :is(.kartenliste, .weg-schritte) { margin-top: .75rem; }
.weg-schritte { list-style: none; margin: .375rem 0 0; padding: 0; display: grid; gap: .25rem; }
.weg-schritte li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .375rem; }
.kartenliste .z1 .klein-text { font-weight: 400; }
.terminliste { list-style: none; margin: 0; padding: 0; }
.terminliste li { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--linie); }
.terminliste li:first-child { border-top: 0; padding-top: 0; }
.terminliste .datum { width: 2.75rem; text-align: center; border-radius: var(--radius-feld); background: var(--akzent-hell);
  color: var(--akzent-dunkel); padding: 4px 0; font-size: var(--groesse-mini); font-weight: 600; line-height: 1.2; }
.terminliste .datum strong { display: block; font-size: 1rem; }
.widerruf-zeile { display: flex; justify-content: flex-end; }
fieldset.frage { border: 0; padding: 0; margin: 0 0 var(--abstand-gross); }
fieldset.frage legend { font-weight: 600; padding: 0; margin-bottom: .5rem; }
.antworten { display: grid; gap: .375rem; }
.antworten label { position: relative; display: flex; align-items: center; min-height: var(--ziel-min); margin: 0; padding: .625rem .75rem;
  border: 1px solid var(--knopfrand); border-radius: var(--radius-feld); background: var(--karte); font-weight: 400; color: var(--text);
  cursor: pointer; }
.antworten input { position: absolute; opacity: 0; }
.antworten label:has(input:checked) { background: var(--akzent-hell); border-color: var(--akzent); font-weight: 600; }
.antworten label:has(input:focus-visible) { outline: var(--fokus-breite) solid var(--akzent); outline-offset: 2px; }
/* Stufe als Zahl vor dem Wortlaut (antwortskala.texte); ohne Wortlaut steht nur die Zahl */
.antworten .wert { flex: none; display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; margin-right: .75rem;
  border: 1px solid var(--feldrand); border-radius: 50%; font-size: var(--groesse-klein); font-variant-numeric: tabular-nums; color: var(--grau-tief); }
.antworten label:has(input:checked) .wert { background: var(--akzent); border-color: var(--akzent); color: var(--auf-akzent); }
.feldgruppe { margin-bottom: 0.75rem; }
.ablaufleiste { position: sticky; bottom: 0; z-index: 2; display: flex; gap: var(--abstand); justify-content: space-between;
  background: var(--karte); border-top: 1px solid var(--karte-rand); padding: .625rem var(--rand-schmal); margin: 0 calc(var(--rand-schmal) * -1); }
.ablaufleiste .haupt { margin-left: auto; }
.ablaufleiste.im-fluss { position: static; }
.rechtstext { max-width: 40rem; }
.rechtstext h2 { margin-top: 1.25rem; }
.fassung { color: var(--grau); font-size: var(--groesse-mini); }
.zusammenfassung { margin-top: var(--abstand-gross); }
.preis { font-size: 1.25rem; font-weight: 700; }
.kartenliste { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.kartenliste > li { background: var(--karte); border: 1px solid var(--karte-rand); border-radius: var(--radius-karte); padding: .75rem .875rem; }
.kartenliste > li.handeln { box-shadow: inset var(--streifen) 0 0 var(--handeln-voll); }
.kartenliste > li.fehler { box-shadow: inset var(--streifen) 0 0 var(--fehler-voll); }
.kartenliste > li.ruht { box-shadow: inset var(--streifen) 0 0 var(--ruht-voll); }
.kartenliste > li.fremd { box-shadow: inset var(--streifen) 0 0 var(--fremd-voll); }
.kartenliste .z1 { display: flex; justify-content: space-between; gap: .75rem; font-weight: 600; }
/* G59 (D234): Titel und Marke brechen um, wenn sie nicht nebeneinander passen */
.kartenliste .z1 { flex-wrap: wrap; row-gap: .25rem; }
.kartenliste .z2 { display: flex; flex-wrap: wrap; gap: .25rem .75rem; color: var(--grau); font-size: var(--groesse-klein); margin-top: .25rem; }
.kartenliste .z3 { margin-top: .625rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.einzelaussage { max-width: 40rem; }
/* G74 (D264): ein langer Schlüssel ohne Leerzeichen bricht um, statt über den Rand zu laufen */
.code-anzeige { font-family: var(--schrift-fest); font-size: var(--groesse-code); letter-spacing: .05em; user-select: all;
  overflow-wrap: anywhere; }
.code-eingabe { font-family: var(--schrift-fest); width: 23ch; }
/* G22 (D133): gegen .feld input:not(…) { width: 100% } durchsetzen */
/* G29 (D162): 23ch fassen einen Code mit Trennzeichen (19 Zeichen) samt Innenabstand und Rand */
.feld input.code-eingabe:not([type="checkbox"]):not([type="radio"]) { width: 23ch; max-width: 100%; }

/* ================================================================== Beleg und Druck */
.zweispaltig { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--abstand-gross); }
.blatt { background: var(--karte); border: 1px solid var(--karte-rand); padding: 1.5rem; max-width: 40rem; }
.blatt .absender, .blatt .datum { color: var(--grau); font-size: var(--groesse-klein); }
.blatt .empfaenger { margin: 1rem 0; }
.blatt .erzeugt { border-top: 1px solid var(--linie); margin-top: 1.25rem; padding-top: .75rem; color: var(--grau); font-size: var(--groesse-mini); }
/* ================================================================== Konzept-Editor: Formularseiten (§4.15, G33) */
/* Aus gestaltung/neu/editor_v3.css übernommen (8a-4, 8a-5); .diagramm.hoch steht mit G32 beim Block der Fläche. */

/* Eine Bedingung als Zeile: Quelle · Vergleich · Wert · Entfernen */
.bedingung { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1.4fr) minmax(0, 1.4fr) auto; gap: .5rem .625rem;
  align-items: end; padding: .625rem 0; border-top: 1px solid var(--linie); }
.bedingung:first-child { border-top: 0; padding-top: 0; }
.bedingung .feld { margin: 0; }
.bedingung .feld input:not([type="checkbox"]):not([type="radio"]), .bedingung .feld select { max-width: none; }

/* Eingaben in Tabellenzellen füllen ihre Spalte; die Textspalte bekommt den meisten Platz.
   G35 (D173): nicht in der letzten Spalte; dort stehen in den Einstellungstabellen Eingabe und Knöpfe in einer Zeile */
.karte td:not(:last-child) :where(input:not([type="checkbox"]):not([type="radio"]), select) { width: 100%; max-width: none; min-width: 6rem; }
.karte td.breit { width: 55%; }
/* G35 (D177): Die Zelle mit ↑/↓ und „Entfernen“ bleibt eine Zeile und so schmal wie möglich */
.karte td:has(> .reihenfolge) { white-space: nowrap; width: 1%; }
/* G36 (D181): kurze Zahlenfelder in Tabellen; ↑, ↓ und der Symbolknopf „Entfernen“ gleich schmal */
.karte td.kurz :where(input:not([type="checkbox"]):not([type="radio"])) { min-width: 0; width: 4.5rem; }
.karte td:has(> .reihenfolge) .zeilenknopf { padding: 0 .375rem; }
/* G37: Preisregeln ohne Skript (wie G21): je Regel nur das Feld der gewählten Wirkung */
.regel:has(input[type="radio"][value="rabatt"]:checked) :is(.nur-anrechnung, .nur-pausenpreis),
.regel:has(input[type="radio"][value="anrechnung"]:checked) :is(.nur-rabatt, .nur-pausenpreis),
.regel:has(input[type="radio"][value="pausenpreis"]:checked) :is(.nur-rabatt, .nur-anrechnung) { display: none; }
/* G38: Preisformular ohne Skript; abhängige Felder nur bei passender Wahl, ohne Wahl verborgen (D187) */
form:has(input[name="f-zahlungszeitpunkt"][value="anzahlung_rest"]:not(:checked)) .nur-anzahlung,
form:has(input[name="f-zahlungszeitpunkt"][value="je_stufe"]:not(:checked)) .nur-je-stufe,
form:has(input[name="f-abbruch.art"][value="bis_stufe"]:not(:checked)) .nur-bis-stufe,
form:has(input[name="f-abbruch.art"][value="zeitstaffel"]:not(:checked)) .nur-zeitstaffel { display: none; }
/* G50: „Neue Markierung“ ohne Skript; Optionen nur bei „Auswahl“, Grenzen nur bei „Zahl“, ohne Wahl verborgen */
form:has(input[name="f-art"][value="auswahl"]:not(:checked)) .nur-auswahl,
form:has(input[name="f-art"][value="zahl"]:not(:checked)) .nur-zahl { display: none; }
/* G57 (8b-14): Felder des eigenen Begriffs nur bei der Wahl „Eigener Begriff“, ohne Wahl verborgen (wie G50) */
form:has(input[name="f-begriff"][value="eigen"]:not(:checked)) .nur-eigener-begriff { display: none; }
/* G67 (M2a): „Bestätigung der anderen“ nur, solange „Wie“ auf „gemeinsam“ steht (wie G50, G57) */
form:has(input[name="f-fuer_wen_wie"][value="gemeinsam"]:not(:checked)) .nur-gemeinsam { display: none; }
/* G38 (D186): Einheit hinter dem Feld in derselben Zeile */
.karte td:has(> .einheit) { white-space: nowrap; }
.karte td:has(> .einheit) :where(input) { width: 6rem; min-width: 0; }
.einheit { margin-left: .375rem; color: var(--grau); }
/* G40 (D182): Kinder eines Stapels über die ganze Breite; sp-Klassen legen dort sonst verdeckte Spalten an */
.stapel > * { grid-column: 1 / -1; }
/* G40 (D183): Die Zeilen eines Felds strecken sich nicht auf die Höhe des Nachbarfelds */
.feld { align-content: start; }
/* G40 (D184): Abstand nach einer Tabelle mit „Zeile hinzufügen“ vor dem nächsten Feld */
:where(div):has(> .knopfleiste:last-child) + .feld { margin-top: var(--abstand-gross); }
.bedingung + .knopfleiste { margin: 0 0 var(--abstand-gross); }

/* Der Zweig in Worten, wie er im Klartext steht */
.satz { margin: .75rem 0 0; padding: .5rem .75rem; border-radius: var(--radius-klein); background: var(--akzent-hauch);
  box-shadow: inset var(--streifen) 0 0 var(--akzent); color: var(--text); }
.satz strong { font-weight: 600; }
/* G66 (M2a, v3-m2-editor-fragebogen-krise): Satz in Worten als Warnung, gelb wie „Handeln“, kein Rot */
.satz.handeln { background: var(--handeln-grund); box-shadow: inset var(--streifen) 0 0 var(--handeln-voll); }
.satz.handeln > .i { color: var(--handeln-text); margin-right: .375rem; vertical-align: -.15em; }

/* Icon vor dem Namen einer Bausteinart in der Auswahl */
.optionen label .i { margin-right: .375rem; color: var(--akzent); }

/* Reihenfolge ändern ohne Skript: zwei kleine Knöpfe nebeneinander */
.reihenfolge { display: inline-flex; gap: 2px; }
.reihenfolge .zeilenknopf { padding: 0 .375rem; }

@media (max-width: 52rem) {
  .bedingung { grid-template-columns: minmax(0, 1fr); }
}

/* Eine Gruppe in einer Bedingung: eigene Verknüpfung, eingerückt; tiefer nur über die Datei */
.bedingungsgruppe { margin: .5rem 0; padding: .625rem .75rem; border: 1px solid var(--karte-rand); border-radius: var(--radius-feld);
  background: var(--kopf-hg); box-shadow: inset var(--streifen) 0 0 var(--linie-stark); }
.bedingungsgruppe .knopfleiste { margin-top: .25rem; }

/* Ablaufbild in der schmalen Spalte; Knoten sind Links auf ihren Baustein bzw. auf „Danach“ */
.diagramm a:hover rect, .diagramm a:hover polygon { stroke: var(--akzent); stroke-width: 2.5; }
.diagramm a:focus-visible { outline: none; }
.diagramm a:focus-visible rect, .diagramm a:focus-visible polygon { stroke: var(--akzent); stroke-width: 3.5; }
.diagramm .knoten.ende rect { fill: var(--flaeche-tief); stroke: var(--knopfrand); }

/* ================================================================== Konzept-Editor: Arbeitsfläche (§4.16, G32) */
/* Aus gestaltung/neu/flaeche_v3.css übernommen (Renderer engine.diagramm, Fassung Fläche, 8a-3). */
/* Aufbau: links die Arbeitsfläche, rechts das Seitenfeld des Gewählten */
.editor { display: grid; grid-template-columns: minmax(0, 1fr) 25rem; gap: var(--luecke); align-items: start; }

.flaechenkarte > header .werkzeuge { margin-left: auto; display: flex; flex-wrap: wrap; gap: .375rem; align-items: center; }
.trenner { width: 1px; align-self: stretch; margin: .125rem .25rem; background: var(--linie); }
.zoomleiste { position: absolute; right: .75rem; bottom: .75rem; display: flex; gap: .25rem; align-items: center;
  padding: .25rem; border: 1px solid var(--karte-rand); border-radius: var(--radius-knopf); background: var(--karte); box-shadow: var(--schatten-karte); }
.zoom { min-width: 3rem; text-align: center; font-size: var(--groesse-mini); color: var(--grau); font-variant-numeric: tabular-nums; }

/* Bausteinarten zum Ziehen; ein Klick fügt nach dem gewählten Baustein ein */
.palette { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .625rem .875rem; border-bottom: 1px solid var(--linie); }
.palette .beschriftung { margin-right: .25rem; font-size: var(--groesse-mini); font-weight: 600; color: var(--grau); }
.palette .erklaerung { margin-top: .125rem; }
.baustein-art { display: inline-flex; align-items: center; gap: 6px; height: var(--zeilenknopf-hoehe); padding: 0 .625rem;
  border: 1px solid var(--knopfrand); border-radius: var(--radius-knopf); background: var(--karte); color: var(--text);
  font: inherit; font-size: var(--groesse-klein); font-weight: 500; cursor: grab; }
.baustein-art .i { color: var(--akzent); }
.baustein-art:hover { border-color: var(--akzent); background: var(--akzent-hauch); }
.baustein-art.gezogen { border-style: dashed; border-color: var(--akzent); background: var(--akzent-hell); cursor: grabbing; }

/* Die Fläche: Punkteraster, Stufen als Bänder, Bausteine als Kästen */
.flaechenrahmen { position: relative; }
.flaeche { overflow: auto; max-height: 50rem; background-color: var(--hg);
  background-image: radial-gradient(var(--linie-stark) 1px, transparent 1px); background-size: 16px 16px; }
.flaeche svg { display: block; margin-inline: auto; font-family: var(--schrift); }
.flaeche .stufe rect { fill: var(--karte); stroke: var(--karte-rand); }
.flaeche .stufe-titel { fill: var(--text); font-weight: 600; }
.flaeche .stufe-anzahl { fill: var(--grau); }
.flaeche .symbol { color: var(--akzent); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.flaeche .knoten .koerper { fill: var(--karte); stroke: var(--feldrand); stroke-width: 1.5; }
.flaeche .knoten .titel { fill: var(--text); font-weight: 600; }
.flaeche .knoten .meta { fill: var(--grau); }
.flaeche a:hover .knoten .koerper, .flaeche a:hover polygon { stroke: var(--akzent); stroke-width: 2.5; }
.flaeche a:focus-visible { outline: none; }
.flaeche a:focus-visible .koerper, .flaeche a:focus-visible polygon, .flaeche a:focus-visible .etikett rect { stroke: var(--akzent); stroke-width: 3.5; }
.flaeche .knoten.gewaehlt .koerper { stroke: var(--akzent); stroke-width: 2.5; }
.flaeche .knoten .hof { fill: none; stroke: var(--akzent-hell); stroke-width: 6; }
.flaeche .anschluss { fill: var(--karte); stroke: var(--akzent); stroke-width: 2; cursor: crosshair; }
/* G42 (D192): unsichtbare Greiffläche um den Anschluss; r = 12 / Zoom setzt flaeche.js, auf dem Bildschirm 24 px (WCAG 2.5.8).
   Getroffen wird die Füllung; einen durchsichtigen Rand mit non-scaling-stroke trifft Edge nur außen. */
.flaeche .greif { fill: transparent; stroke: none; pointer-events: all; cursor: crosshair; }
.flaeche .marke-bild rect { fill: var(--handeln-grund); stroke: var(--handeln-voll); }
.flaeche .marke-bild text { fill: var(--handeln-text); font-weight: 600; }

/* Pfeile und Namen der Zweige; ein Klick auf den Namen wählt den Zweig */
.flaeche .kante { fill: none; stroke: var(--grau); stroke-width: 1.5; marker-end: url(#pfeil-f); }
.flaeche .kante.gewaehlt { stroke: var(--akzent); stroke-width: 3; marker-end: url(#pfeil-a); }
.flaeche .kante.ziel { stroke: var(--akzent); stroke-width: 3; stroke-dasharray: 6 4; marker-end: url(#pfeil-a); }
.flaeche marker.grau path { fill: var(--grau); }
.flaeche marker.akzent path { fill: var(--akzent); }
.flaeche .etikett rect { fill: var(--karte); stroke: var(--linie-stark); }
.flaeche .etikett text { fill: var(--grau-tief); font-weight: 500; }
.flaeche a:hover .etikett rect, .flaeche .etikett.gewaehlt rect { fill: var(--akzent-hell); stroke: var(--akzent); }
.flaeche .etikett.gewaehlt text { fill: var(--akzent-dunkel); font-weight: 600; }
.flaeche .entscheidung polygon { fill: var(--hinweis-grund); stroke: var(--handeln-voll); stroke-width: 1.5; }
.flaeche .entscheidung .symbol { color: var(--handeln-text); }
.flaeche .ende rect { fill: var(--flaeche-tief); stroke: var(--knopfrand); }
.flaeche .ende text { fill: var(--text); }
.flaeche .typ { fill: var(--handeln-text); font-weight: 600; }

/* Beim Ziehen: Einfügestelle, Umriss des neuen Bausteins, Hinweis zum Loslassen */
.flaeche .einfuegen circle { fill: var(--akzent); }
.flaeche .einfuegen path { stroke: var(--auf-akzent); stroke-width: 2; }
.flaeche .geist rect { fill: var(--akzent-hauch); stroke: var(--akzent); stroke-width: 1.5; stroke-dasharray: 5 4; }
.flaeche .geist text { fill: var(--akzent-dunkel); font-weight: 600; }
.flaeche .zielhinweis rect { fill: var(--text); }
.flaeche .zielhinweis text { fill: var(--karte); }
/* Ziele beim Ziehen und Verbinden, der gezogene Baustein (G39) */
.flaeche .stufe.ziel rect { fill: var(--akzent-hauch); stroke: var(--akzent); stroke-width: 2; stroke-dasharray: 6 4; }
.flaeche .knoten.ziel .koerper, .flaeche .ende.ziel rect { fill: var(--akzent-hauch); stroke: var(--akzent); stroke-width: 3; }
.flaeche .knoten.gezogen { opacity: .45; cursor: grabbing; }
/* Mit dem Finger ziehen statt schieben; die Fläche selbst bleibt schiebbar (G39) */
.baustein-art, .flaeche .anschluss, .flaeche a .knoten { touch-action: none; }
/* G61 (M1, v3-bib-*): Auswahl für die Bibliothek (Haken), der Übergang einer Abweisung */
.flaeche .knoten.markiert .koerper { fill: var(--akzent-hauch); stroke: var(--akzent); stroke-width: 2.5; }
.flaeche .haken-bild circle { fill: var(--akzent); stroke: var(--karte); stroke-width: 2; }
.flaeche .haken-bild path { fill: none; stroke: var(--auf-akzent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.flaeche .haken-bild.leer circle { fill: var(--karte); stroke: var(--feldrand); stroke-width: 1.5; }
.flaeche .kante.fehler { stroke: var(--fehler-voll); stroke-width: 3; marker-end: url(#pfeil-x); }
.flaeche marker.fehler path { fill: var(--fehler-voll); }
/* G72 (M8b, Ablaufbild nach G1, Bilder cf5ee2f2; ersetzt die vorläufige .modulblock aus G61): Module als Fläche,
   Zuschaltungspunkt „+“, Zusammenführung „∪“, Kanten zu Modulen und zurück. Fläche und Legende teilen die Regeln;
   Bild und KOMPAKT tragen ihre Farben selbst. */
:is(.flaeche, .legende) .modul rect.band { fill: var(--akzent-hell); stroke: var(--akzent); stroke-width: 1.5; }
:is(.flaeche, .legende) .modul .art { fill: var(--akzent-dunkel); font-weight: 700; letter-spacing: .08em; }
:is(.flaeche, .legende) .modul .kopf { fill: var(--text); font-weight: 700; }
:is(.flaeche, .legende) .modul .fassung { fill: var(--akzent-dunkel); }
:is(.flaeche, .legende) .modul .symbol { color: var(--akzent-dunkel); }
.flaeche .modul.gewaehlt > rect.band, .flaeche a:hover .modul > rect.band { stroke-width: 3; }
.flaeche .modul .hof { fill: none; stroke: var(--akzent); stroke-opacity: .35; stroke-width: 6; }
.flaeche .modul.innen rect.band { stroke-width: 1; }
.flaeche .modul.innen .kopf { font-weight: 600; }
/* Marken im Bild: „fest“, „bedingt · …“, „für den Fall“; begleitend grau mit Uhr */
:is(.flaeche, .legende) g.marke rect { fill: var(--karte); stroke: var(--akzent); }
:is(.flaeche, .legende) g.marke text { fill: var(--akzent-dunkel); font-weight: 600; }
:is(.flaeche, .legende) g.marke.begleitend rect { fill: var(--flaeche-tief); stroke: none; }
:is(.flaeche, .legende) g.marke.begleitend text { fill: var(--grau-tief); }
:is(.flaeche, .legende) g.marke.begleitend .symbol { color: var(--grau-tief); }
/* Zuschaltungspunkt und Zusammenführung */
:is(.flaeche, .legende) .zuschaltung circle { fill: var(--akzent-hell); stroke: var(--akzent); stroke-width: 2; }
:is(.flaeche, .legende) .zusammen circle { fill: var(--karte); stroke: var(--akzent); stroke-width: 2; }
:is(.flaeche, .legende) :is(.zuschaltung, .zusammen) text.zeichen { fill: var(--akzent-dunkel); font-weight: 700; }
.flaeche .zuschaltung.gewaehlt circle:not(.hof), .flaeche a:hover .zuschaltung circle:not(.hof) { fill: var(--akzent); stroke-width: 3; }
.flaeche :is(.zuschaltung.gewaehlt, a:hover .zuschaltung) text.zeichen { fill: var(--karte); }
.flaeche .zuschaltung .hof { fill: none; stroke: var(--akzent); stroke-opacity: .35; stroke-width: 6; }
/* Beschriftung neben „+“ und „danach“ zwischen Modulen: bloßer Text (die Pille der Zweige ist g.etikett) */
.flaeche text.etikett { fill: var(--grau-tief); }
.flaeche text.etikett.gewaehlt { fill: var(--akzent-dunkel); font-weight: 700; }
/* Kanten zu und von Modulen in der Akzentfarbe; gestrichelt nur „zurück“ */
:is(.flaeche, .legende) .kante.modul { stroke: var(--akzent); marker-end: url(#pfeil-a); }
:is(.flaeche, .legende) .kante.zurueck { stroke-dasharray: 5 4; }
/* Legende unter der Fläche, außerhalb von .flaeche; ihre kleinen Bilder ohne Pfeilspitzen */
.legende { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: .75rem 0 0; padding: 0; list-style: none;
  font-size: var(--groesse-klein); color: var(--grau-tief); }
.legende li { display: flex; align-items: center; gap: 6px; }
.legende svg { flex: none; height: 26px; overflow: visible; }
.legende .symbol { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.legende .knoten rect { fill: var(--karte); stroke: var(--feldrand); stroke-width: 1.5; }
.legende .entscheidung polygon { fill: var(--hinweis-grund); stroke: var(--handeln-voll); stroke-width: 1.5; }
.legende .kante { fill: none; stroke: var(--grau); stroke-width: 1.5; marker-end: none; }
/* Seitenfeld der Zuschaltung: Module in der Reihenfolge des Rangs */
ol.rangliste { display: grid; gap: .375rem; margin: 0 0 .5rem; padding-left: 1.25rem; }
ol.rangliste .klein-text { display: block; margin: 0; }
/* M8c: Einstellungen des Moduls im Konzept */
table.einstellungen input, table.einstellungen select { width: 100%; min-width: 9rem; }
/* Bedingung mit „über“ (mehrere Personen, C3): fünf Spalten statt vier, „Wenn“ am breitesten; im Seitenfeld über zwei
   Zeilen */
.bedingung:has(> .feld:nth-child(4)) { grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr) minmax(0, 1.1fr) minmax(0, 1.2fr) auto; }
.seitenfeld .bedingung:has(> .feld:nth-child(4)) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
.seitenfeld .bedingung:has(> .feld:nth-child(4)) > .feld:nth-child(2) { grid-column: 1 / -1; }
/* G73 (M8a, a1d38f7b): Abschnitt mit Überschrift auch außerhalb des Seitenfelds (etwa „Läuft“ im Formular eines
   Bausteins); Module einer Zuschaltung als getrennte Blöcke; Teile von „Läuft“ nur bei der passenden Wahl, ohne Skript */
.abschnitt > h3 { display: flex; align-items: center; gap: 6px; margin: 0 0 .5rem; font-size: var(--groesse-klein); }
.abschnitt > h3 .i { color: var(--akzent); }
.modulregel + .modulregel { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--linie); }
.modulregel > h3 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .5rem; font-size: var(--groesse-klein); }
.modulregel > h3 .reihenfolge { margin-left: auto; }
.abschnitt:has(input[name="laeuft"][value="begleitend"]:not(:checked)) .nur-begleitend,
.abschnitt:has(input[name="laufzeit"][value="wochen"]:not(:checked)) .nur-wochen,
.abschnitt:has(input[name="laufzeit"][value="bedingung"]:not(:checked)) .nur-bedingung { display: none; }

/* Seitenfeld: das Formular des Gewählten, mitlaufend */
.seitenfeld { position: sticky; top: var(--abstand); max-height: calc(100vh - 2 * var(--abstand)); overflow-y: auto; }
/* G41 (D190): Der Zustand „leer“ des Seitenfelds erbt nicht die Regel für leere Hinweise (.karte .leer) */
.karte.seitenfeld.leer { padding: 0; color: inherit; font-size: inherit; }
.seitenfeld > header .zeilenknopf { margin-left: auto; }
.seitenfeld .unterzeile { display: flex; align-items: center; gap: 6px; margin: 0; padding: .625rem .875rem 0; color: var(--grau); font-size: var(--groesse-klein); }
.seitenfeld .abschnitt { padding: .75rem .875rem; border-top: 1px solid var(--linie); }
.seitenfeld .abschnitt h3 { display: flex; align-items: center; gap: 6px; margin: 0 0 .5rem; font-size: var(--groesse-klein); }
.seitenfeld .abschnitt h3 .i { color: var(--akzent); }
.seitenfeld .abschnitt .liste { margin: 0 -.875rem; }
.seitenfeld .klein-text { margin: 0 0 .5rem; }
.seitenfeld .zwei-spalten { grid-template-columns: minmax(0, 1fr); }
.seitenfeld .bedingung { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
.seitenfeld .bedingung > .feld:first-child { grid-column: 1 / -1; }
.seitenfeld .knopfleiste.abschluss .stand { margin-left: .5rem; }
/* G62 (M1): Liste der gewählten Bausteine im Seitenfeld, die Abweisung darüber */
.seitenfeld .auswahl { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.seitenfeld .auswahl li { display: flex; align-items: center; gap: 8px; }
.seitenfeld .auswahl .i { color: var(--akzent); }
.seitenfeld .innen > .auswahl { margin-bottom: .75rem; }
.seitenfeld .meldung-fehler { margin: 0 0 .75rem; }
/* G65 (M1, Feinplan §7): Bausteine eines Moduls im Klartext und in „Ablauf in Worten“, eingerückt mit feiner Linie */
li.im-modul { margin-left: 1.25rem; padding-left: .5rem; border-left: 2px solid var(--akzent-hell); }
.zweigliste { display: grid; gap: .375rem; margin: 0 0 .5rem; padding: 0; list-style: none; }
.zweigliste a { display: flex; align-items: center; gap: .5rem; min-height: var(--ziel-min); padding: .25rem .5rem; border: 1px solid var(--linie);
  border-radius: var(--radius-feld); color: var(--text); font-size: var(--groesse-klein); text-decoration: none; }
.zweigliste a:hover { border-color: var(--akzent); background: var(--akzent-hauch); }
.zweigliste .etikett-text { padding: 1px 8px; border-radius: var(--radius-marke); background: var(--flaeche-tief); font-weight: 500; }
.zweigliste .ziel { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; color: var(--grau); }

@media (max-width: 52rem) {
  .editor { grid-template-columns: minmax(0, 1fr); }
  .flaechenkarte > header { flex-wrap: wrap; }
  .flaechenkarte > header .werkzeuge { margin-left: 0; flex-basis: 100%; }
  .flaeche { max-height: 70vh; }
  /* G43 (D193): Die Zoomleiste steht unter der Fläche, nicht über dem eingepassten Bild */
  .zoomleiste { position: static; justify-content: flex-end; border: 0; border-top: 1px solid var(--linie); border-radius: 0; box-shadow: none; }
  /* Das Seitenfeld liegt am Handy als Blatt über dem unteren Teil der Fläche */
  .seitenfeld { position: fixed; inset: auto 0 0 0; z-index: 7; max-height: 50vh; border-radius: var(--radius-karte) var(--radius-karte) 0 0;
    box-shadow: var(--schatten-menue); }
  .seitenfeld > header::before { content: ""; position: absolute; top: .375rem; left: 50%; width: 2.5rem; height: 4px; margin-left: -1.25rem;
    border-radius: 2px; background: var(--linie-stark); }
  .seitenfeld > header { position: relative; padding-top: 1rem; }
  /* Ohne Wahl bleibt das Seitenfeld unter der Fläche; mit Wahl unten Platz, so hoch wie das Blatt (G39) */
  .seitenfeld.leer { position: static; max-height: none; border-radius: var(--radius-karte); box-shadow: none; }
  .seitenfeld.leer > header { padding-top: .6875rem; }
  .seitenfeld.leer > header::before { content: none; }
  .editor:has(.seitenfeld:not(.leer)) { padding-bottom: 50vh; }
  .seitenfeld table { min-width: 0; }
}
/* Senkrechtes Ablaufbild in der schmalen Spalte (Aufbau als Liste, 8a-4), ohne Mindestbreite */
.diagramm.hoch svg { display: block; min-width: 0; max-width: 19rem; height: auto; margin-inline: auto; }

/* ================================================================== Kalender: Wochenansicht und Tagesliste (§4.13 N1, N2, G44) */
/* Aus gestaltung/neu/etappe8_v3.css übernommen (Feinplan 9-1). Lage und Länge nur über Klassen, nie über style.
   Die Lageklassen gelten nur in der Woche (:where hält die Gewichtung wie im Entwurf). */
.woche { display: grid; grid-template-columns: 3.5rem repeat(5, minmax(8.5rem, 1fr)); grid-template-rows: 3rem repeat(44, .875rem);
  min-width: 48rem; position: relative; }
.woche .tag { grid-row: 1; padding: .375rem .625rem; border-bottom: 1px solid var(--linie); background: var(--kopf-hg);
  font-size: var(--groesse-mini); color: var(--grau); font-weight: 500; }
.woche .tag strong { display: block; color: var(--text); font-size: var(--groesse-text); font-variant-numeric: tabular-nums; }
.woche .tag.heute, .woche .tag.heute strong { color: var(--akzent); font-weight: 600; }
.woche .stunde { grid-column: 1; font-size: var(--groesse-mini); color: var(--grau); text-align: right; padding-right: .5rem;
  transform: translateY(-.5rem); font-variant-numeric: tabular-nums; }
.woche .raster-linie { grid-column: 2 / -1; border-top: 1px solid var(--linie); }
/* Zeilen: r1 = 8:00, je Viertelstunde eine Zeile, bis 19:00 (44 Zeilen) */
:where(.woche) .r1 { grid-row-start: 2; } :where(.woche) .r2 { grid-row-start: 3; } :where(.woche) .r3 { grid-row-start: 4; } :where(.woche) .r4 { grid-row-start: 5; }
:where(.woche) .r5 { grid-row-start: 6; } :where(.woche) .r6 { grid-row-start: 7; } :where(.woche) .r7 { grid-row-start: 8; } :where(.woche) .r8 { grid-row-start: 9; }
:where(.woche) .r9 { grid-row-start: 10; } :where(.woche) .r10 { grid-row-start: 11; } :where(.woche) .r11 { grid-row-start: 12; } :where(.woche) .r12 { grid-row-start: 13; }
:where(.woche) .r13 { grid-row-start: 14; } :where(.woche) .r14 { grid-row-start: 15; } :where(.woche) .r15 { grid-row-start: 16; } :where(.woche) .r16 { grid-row-start: 17; }
:where(.woche) .r17 { grid-row-start: 18; } :where(.woche) .r18 { grid-row-start: 19; } :where(.woche) .r19 { grid-row-start: 20; } :where(.woche) .r20 { grid-row-start: 21; }
:where(.woche) .r21 { grid-row-start: 22; } :where(.woche) .r22 { grid-row-start: 23; } :where(.woche) .r23 { grid-row-start: 24; } :where(.woche) .r24 { grid-row-start: 25; }
:where(.woche) .r25 { grid-row-start: 26; } :where(.woche) .r26 { grid-row-start: 27; } :where(.woche) .r27 { grid-row-start: 28; } :where(.woche) .r28 { grid-row-start: 29; }
:where(.woche) .r29 { grid-row-start: 30; } :where(.woche) .r30 { grid-row-start: 31; } :where(.woche) .r31 { grid-row-start: 32; } :where(.woche) .r32 { grid-row-start: 33; }
:where(.woche) .r33 { grid-row-start: 34; } :where(.woche) .r34 { grid-row-start: 35; } :where(.woche) .r35 { grid-row-start: 36; } :where(.woche) .r36 { grid-row-start: 37; }
:where(.woche) .r37 { grid-row-start: 38; } :where(.woche) .r38 { grid-row-start: 39; } :where(.woche) .r39 { grid-row-start: 40; } :where(.woche) .r40 { grid-row-start: 41; }
:where(.woche) .r41 { grid-row-start: 42; } :where(.woche) .r42 { grid-row-start: 43; } :where(.woche) .r43 { grid-row-start: 44; } :where(.woche) .r44 { grid-row-start: 45; }
/* Länge in Viertelstunden: s1 = 15 Minuten bis s44 = 11 Stunden; die Vorlage rundet auf die nächste Viertelstunde auf */
:where(.woche) .s1 { grid-row-end: span 1; } :where(.woche) .s2 { grid-row-end: span 2; } :where(.woche) .s3 { grid-row-end: span 3; } :where(.woche) .s4 { grid-row-end: span 4; }
:where(.woche) .s5 { grid-row-end: span 5; } :where(.woche) .s6 { grid-row-end: span 6; } :where(.woche) .s7 { grid-row-end: span 7; } :where(.woche) .s8 { grid-row-end: span 8; }
:where(.woche) .s9 { grid-row-end: span 9; } :where(.woche) .s10 { grid-row-end: span 10; } :where(.woche) .s11 { grid-row-end: span 11; } :where(.woche) .s12 { grid-row-end: span 12; }
:where(.woche) .s13 { grid-row-end: span 13; } :where(.woche) .s14 { grid-row-end: span 14; } :where(.woche) .s15 { grid-row-end: span 15; } :where(.woche) .s16 { grid-row-end: span 16; }
:where(.woche) .s17 { grid-row-end: span 17; } :where(.woche) .s18 { grid-row-end: span 18; } :where(.woche) .s19 { grid-row-end: span 19; } :where(.woche) .s20 { grid-row-end: span 20; }
:where(.woche) .s21 { grid-row-end: span 21; } :where(.woche) .s22 { grid-row-end: span 22; } :where(.woche) .s23 { grid-row-end: span 23; } :where(.woche) .s24 { grid-row-end: span 24; }
:where(.woche) .s25 { grid-row-end: span 25; } :where(.woche) .s26 { grid-row-end: span 26; } :where(.woche) .s27 { grid-row-end: span 27; } :where(.woche) .s28 { grid-row-end: span 28; }
:where(.woche) .s29 { grid-row-end: span 29; } :where(.woche) .s30 { grid-row-end: span 30; } :where(.woche) .s31 { grid-row-end: span 31; } :where(.woche) .s32 { grid-row-end: span 32; }
:where(.woche) .s33 { grid-row-end: span 33; } :where(.woche) .s34 { grid-row-end: span 34; } :where(.woche) .s35 { grid-row-end: span 35; } :where(.woche) .s36 { grid-row-end: span 36; }
:where(.woche) .s37 { grid-row-end: span 37; } :where(.woche) .s38 { grid-row-end: span 38; } :where(.woche) .s39 { grid-row-end: span 39; } :where(.woche) .s40 { grid-row-end: span 40; }
:where(.woche) .s41 { grid-row-end: span 41; } :where(.woche) .s42 { grid-row-end: span 42; } :where(.woche) .s43 { grid-row-end: span 43; } :where(.woche) .s44 { grid-row-end: span 44; }
:where(.woche) .t1 { grid-column: 2; } :where(.woche) .t2 { grid-column: 3; } :where(.woche) .t3 { grid-column: 4; }
:where(.woche) .t4 { grid-column: 5; } :where(.woche) .t5 { grid-column: 6; }
/* Einträge: Termin (Link zur Terminseite), freier Slot, Abwesenheit; Streifen wie die Namenszelle */
.woche .eintrag { margin: 1px 3px; padding: .1875rem .5rem; border-radius: var(--radius-klein); font-size: var(--groesse-mini);
  line-height: 1.3; overflow: hidden; text-decoration: none; color: var(--text); z-index: 1; }
.woche .eintrag strong { display: block; font-weight: 600; font-size: var(--groesse-klein); }
.woche .eintrag.termin { background: var(--akzent-hell); box-shadow: inset var(--streifen) 0 0 var(--akzent); }
.woche .eintrag.termin:hover { text-decoration: underline; }
.woche .eintrag.frei { border: 1px dashed var(--feldrand); color: var(--grau); background: var(--karte); }
.woche .eintrag.handeln { background: var(--handeln-grund); box-shadow: inset var(--streifen) 0 0 var(--handeln-voll); }
.woche .eintrag.fehler { background: var(--fehler-grund); box-shadow: inset var(--streifen) 0 0 var(--fehler-voll); }
.woche .eintrag.ruht { background: var(--ruht-grund); color: var(--ruht-text); box-shadow: inset var(--streifen) 0 0 var(--ruht-voll); }
.woche .eintrag.abwesend { background: var(--ruht-grund); color: var(--ruht-text); border-radius: 0; margin: 0; z-index: 0; }
.woche .eintrag:focus-visible { outline-offset: 0; }
/* Kurze Einträge (15 Minuten): eine Zeile, Name und Zeit nebeneinander */
.woche .eintrag.s1 { margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; line-height: .875rem; white-space: nowrap;
  text-overflow: ellipsis; }
.woche .eintrag.s1 strong { display: inline; }
/* G47 (D206): kurze Einträge einzeilig, Name und Zeit mit Abstand; ein Eintrag, der nur die letzte Zeile hat, wie s1 */
.woche .eintrag.ueber-ende.r44 { margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; line-height: .875rem;
  white-space: nowrap; text-overflow: ellipsis; }
.woche .eintrag:is(.s2, .ueber-ende.r43) { white-space: nowrap; text-overflow: ellipsis; }
.woche .eintrag:is(.s1, .s2, .ueber-ende.r43, .ueber-ende.r44) strong { display: inline; margin-right: .375rem; }
/* Sonderfälle: ganztägig angelegt, über das Spaltenende, vor dem Spaltenbeginn; angeschnittene Kante gestrichelt */
.woche .eintrag.ganztags { grid-row: 2 / -1; }
.woche .eintrag.ueber-ende { grid-row-end: -1; border-bottom: 2px dashed currentColor; border-bottom-left-radius: 0;
  border-bottom-right-radius: 0; }
.woche .eintrag.vor-beginn { border-top: 2px dashed currentColor; border-top-left-radius: 0; border-top-right-radius: 0; }
.zeitraum { font-variant-numeric: tabular-nums; }

/* Tagesliste: unter 52rem statt der Woche, in derselben Karte (§4.13 N2) */
.tagesliste { display: none; padding: .75rem .875rem; }
.tagesliste h3 { margin: 0 0 .5rem; }
.tage { display: flex; gap: .25rem; list-style: none; margin: 0 0 var(--abstand); padding: 0; }
.tage a { display: flex; flex-direction: column; align-items: center; min-width: var(--ziel-min); min-height: var(--ziel-min);
  padding: .25rem .375rem; border-radius: var(--radius-feld); text-decoration: none; color: var(--text); font-size: var(--groesse-mini); }
.tage a strong { font-size: var(--groesse-text); font-variant-numeric: tabular-nums; }
.tage a[aria-current] { background: var(--akzent-hell); color: var(--akzent-dunkel); font-weight: 600; }
@media (max-width: 52rem) {
  .woche-rahmen { display: none; }
  .tagesliste { display: block; }
}

@media print {
  .leiste, .seitenkopf, .knopfleiste, details.mehr, .hinweisband, .sprung, .ablaufleiste, nav.unten { display: none; }
  .app { display: block; }
  body { background: var(--karte); }
}

/* ================================================================== Unter 52rem: Handy und schmale Fenster */
.posten .je-posten { display: none; }

@media (max-width: 52rem) {
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .leiste { position: sticky; z-index: 6; height: auto; flex-direction: row; align-items: center; padding: 0.5rem 0.75rem;
    border-right: 0; border-bottom: 1px solid var(--karte-rand); overflow: visible; }
  .leiste .logo { padding: 0 0.5rem 0 0; }
  .leiste .wort { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .bereiche { flex: 1 1 auto; min-width: 0; }
  .bereiche > ul { display: flex; flex-wrap: wrap; }
  .bereiche > ul > li > a { padding: 0.4375rem 0.5rem; }
  .bereiche ul ul { position: absolute; left: 0; right: 0; top: 100%; display: flex; gap: 0.25rem; overflow-x: auto; margin: 0;
    padding: 0.25rem var(--rand-schmal); background: var(--karte); border: 0; border-bottom: 1px solid var(--karte-rand); }
  .bereiche ul ul a { white-space: nowrap; }
  .app:has(.bereiche ul ul) .inhalt { padding-top: calc(var(--ziel-min) + 1.5rem); }
  .konto .bild, .konto .wer { display: none; }
  .konto { margin: 0 0 0 0.5rem; border: 0; padding: 0; flex: none; }
  .konto ul { flex-wrap: nowrap; }
  .konto a, .konto .verweis { display: inline-flex; align-items: center; min-height: var(--ziel-min); white-space: nowrap; }
  .inhalt { padding: 0.875rem var(--rand-schmal) 1.75rem; }
  .spalten > * { grid-column: span 12; }
  .kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kennzahl { grid-template-columns: minmax(0, 1fr); }
  .kennzahl .symbol { grid-row: auto; margin-bottom: .375rem; }
  .kennzahl small { grid-column: 1; }
  .werkzeuge { margin-left: 0; }
  /* G30 (D163): die Suche im Seitentitel bleibt; sie nimmt eine eigene Zeile, daneben passt höchstens ein Knopf */
  .seitentitel > .werkzeuge:has(.suche) { flex: 1 1 100%; }
  .seitentitel > .werkzeuge form.inline:has(.suche) { flex: 1 1 12rem; }
  .seitentitel > .werkzeuge .suche { width: 100%; }
  .sachkopf { grid-template-columns: auto minmax(0, 1fr); }
  .reiter ul { flex-wrap: wrap; overflow-x: visible; }
  .sachkopf .werkzeuge { grid-column: 1 / -1; }
  .weg { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; }
  .optionen, .zwei-spalten, .zweispaltig { grid-template-columns: minmax(0, 1fr); }
  .karte { overflow-x: auto; }
  .karte table { min-width: 32rem; }
  /* D77: Posten ohne Rollen; Menge und Einzelpreis wandern als Unterzeile in die Leistung */
  .karte table.posten { min-width: 0; }
  /* G20 (D106): nur-breit gilt für jede Tabelle; mit solchen Spalten passt sie ohne Mindestbreite */
  .nur-breit { display: none; }
  .karte table:has(.nur-breit) { min-width: 0; }
  /* G25 (D154): zwei Spalten passen ohne Mindestbreite; sonst rutscht die zweite aus dem Bild */
  .karte table:not(:has(tr > :nth-child(3))) { min-width: 0; }
  /* G26 (D152): statt Kontobereich das Konto-Menü rechts, nur die Initialen; „Konto“ (span.wort) bleibt für Screenreader */
  .leiste > .konto { display: none; }
  .leiste > details.konto-menue { display: block; margin-left: auto; flex: none; }
  .leiste > details.konto-menue > summary { padding: 0 2px; }
  /* G23 (D134): „Vertrag widerrufen“ in eigener Zeile unter dem Kopf (§4.9) */
  .seitenkopf:has(.widerruf-zeile) { flex-wrap: wrap; row-gap: .375rem; }
  .seitenkopf .rechts:has(.widerruf-zeile) { display: contents; }
  .seitenkopf .rechts:has(.widerruf-zeile) > .konto-menue { margin-left: auto; }
  .seitenkopf .widerruf-zeile { flex-basis: 100%; }
  /* G24 (D144): die Suche im Kartenkopf nimmt unter 52rem die übrige Breite */
  .karte > header form.inline:has(.suche) { flex: 1 1 12rem; }
  .karte > header .suche { width: 100%; }
  /* G31 (D166): unter 52rem die Filterzeile als Raster: Auswahl über die ganze Breite, je Datum Beschriftung und Feld */
  .karte > header:has(.filterzeile) .werkzeuge { flex: 1 1 100%; }
  .filterzeile { display: grid; grid-template-columns: auto minmax(0, 1fr); width: 100%; }
  .filterzeile select, .filterzeile input { width: 100%; }
  .filterzeile select { grid-column: 1 / -1; }
  .filterzeile button { grid-column: 1 / -1; justify-self: end; }
  .posten .je-posten { display: block; font-size: var(--groesse-mini); color: var(--grau); }
  /* D79: drei Knöpfe passen nicht in 390 px; der Hauptknopf bekommt die zweite Zeile in voller Breite */
  .liste > li:has(> .werkzeuge) { grid-template-columns: auto minmax(0, 1fr); }
  .liste .werkzeuge { grid-column: 2; flex-wrap: wrap; }
  /* D88: lange Beschriftungen („Termin kostenpflichtig absagen“) brechen um statt aus der Karte zu ragen */
  .haupt, .zweit, html.patient .haupt, html.patient .zweit { white-space: normal; height: auto;
    min-height: var(--ziel-min); padding-block: .375rem; text-align: center; }
  .ablaufleiste { flex-wrap: wrap; }
  .ablaufleiste .haupt { flex: 1 0 100%; margin-left: 0; justify-content: center; }
  /* G4 am Handy: über der oberen Leiste, Knopf in voller Breite */
  .abmeldeband { left: 0; padding-inline: var(--rand-schmal); }
  .abmeldeband form { margin-left: 0; flex-basis: 100%; }
  .abmeldeband form .haupt { width: 100%; justify-content: center; }
  .abmeldeband:not([hidden]):not(.abgemeldet) ~ * main { padding-top: calc(.875rem + 3.5rem); }
  .abmeldeband.abgemeldet { top: 5rem; left: var(--rand-schmal); right: var(--rand-schmal); width: auto; }
  /* D82 am Handy: obere Leiste bzw. Kopf haften; die Ablaufleiste hat zwei Zeilen (G11), das Warnband bis zu drei
     Zeilen Text und den Knopf in voller Breite */
  html { scroll-padding-top: 8rem; }
  html.patient { scroll-padding-top: 4.5rem; }
  html:has(.ablaufleiste:not(.im-fluss)) { scroll-padding-bottom: 8.5rem; }
  html:has(.abmeldeband:not([hidden]):not(.abgemeldet)) { scroll-padding-top: 10rem; }
  .raster, .raster.klein { grid-template-columns: minmax(0, 1fr); }
  .raster > label, .raster > .beschriftung { padding-top: 0; }
  .seitenkopf { padding: 0.625rem var(--rand-schmal); }
  .haupt, .zweit, .zeilenknopf, details.mehr li > *, .umschalter a, .umschalter label, .bereiche a { min-height: var(--ziel-min); }
  .zeilenknopf { height: auto; }
}
@media (max-height: 30rem) { .ablaufleiste, .hinweisband { position: static; } }
@media (forced-colors: active) {
  .umschalter a[aria-current], .umschalter label:has(input:checked), .bereiche a[aria-current] { forced-color-adjust: none;
    background: Highlight; color: HighlightText; }
}