/*
 * Generiert aus @bro/design-tokens (`pnpm css:generieren`) — NICHT von Hand bearbeiten.
 * Quelle der Wahrheit: Design-Canvas (Stand 28.08.2026; Farben/Radien v10, #5816) → src/tokens.ts (B17).
 * Mandanten-Branding überschreibt einzelne Variablen (z. B. --bro-akzent) — nie diese Datei.
 */

:root {
  --bro-begruessung-breite: 520px;
  --bro-begruessung-radius: 24px;
  --bro-begruessung-szene: 180px;
  --bro-begruessung-unschaerfe: 4px;
  --bro-begruessung-schleier: color-mix(in oklab, var(--bro-tinte-1) 36%, transparent);
  --bro-begruessung-geschenk: color-mix(in oklab, var(--bro-warnung) 10%, var(--bro-flaeche-1));
  --bro-begruessung-pille: 1000px;
  --bro-begruessung-knopf: 48px;
  --bro-begruessung-bewegung: 480ms;
  --bro-begruessung-kurve: cubic-bezier(0.2, 0.8, 0.2, 1);
  --bro-aufgaben-ueberfaellig-punkt: #d03b3b;
  --bro-aufgaben-ueberfaellig-flaeche: #fce9e9;
  --bro-aufgaben-ueberfaellig-tinte: #a12a2a;
  --bro-aufgaben-dringend-punkt: #ec835a;
  --bro-aufgaben-dringend-flaeche: #fff0e4;
  --bro-aufgaben-dringend-tinte: #9c431c;
  --bro-aufgaben-bald-punkt: #fab219;
  --bro-aufgaben-bald-flaeche: #fff7dc;
  --bro-aufgaben-bald-tinte: #755200;
  --bro-aufgaben-ohne-eile-punkt: #a1a1aa;
  --bro-aufgaben-ohne-eile-flaeche: #ffffff;
  --bro-aufgaben-ohne-eile-tinte: #515154;
  --bro-aufgaben-erledigt-punkt: #0ca30c;
  --bro-aufgaben-erledigt-flaeche: #f2faf2;
  --bro-aufgaben-erledigt-tinte: #1f6b1f;
  --bro-flaeche-0: #f5f5f7;
  --bro-flaeche-1: #ffffff;
  --bro-tinte-1: #1d1d1f;
  --bro-tinte-2: #6e6e73;
  --bro-tinte-3: #86868b;
  --bro-linie: #e8e8ed;
  --bro-akzent: #2574b0;
  --bro-akzent-tinte: #ffffff;
  --bro-erfolg: #2e7d4f;
  --bro-warnung: #8a5200;
  --bro-fehler: #b3372f;
  --bro-linie-stark: #d2d2d7;
  --bro-fehler-flaeche: #fbeeed;
  --bro-fehler-linie: #e6c3bf;
  --bro-hinweis-flaeche: #dfebf8;
  --bro-hinweis-linie: #cbdcee;
  --bro-warnung-flaeche: #fbf5ea;
  --bro-warnung-linie: #ecd9b8;
  --bro-datenreihe-1: #5b93c7;
  --bro-datenreihe-2: #a58ad8;
  --bro-datenreihe-3: #5fb3bd;
  --bro-datenreihe-4: #e0a064;
  --bro-datenreihe-5: #7cb87e;
  --bro-datenreihe-6: #d98aa6;
  --bro-datenreihe-7: #c9b458;
  --bro-datenreihe-8: #b8bcc4;
  --bro-daten-flaeche: #e8f1fa;
  --bro-daten-kontur: #1d1d1f;
  --bro-daten-gitter: #f0f0f2;
  --bro-transport-sitzend: #98a2b3;
  --bro-transport-rollstuhl: #2574b0;
  --bro-transport-tragestuhl: #d97b2b;
  --bro-transport-liegend: #7a5bd6;
  --bro-ausstattung-rs: #1c98a6;
  --bro-ausstattung-ts: #4f6bd8;
  --bro-ausstattung-sca: #2f9e5a;
  --bro-ausstattung-lie: #6e4bd8;
  --bro-portal-airbnb: #e31c5f;
  --bro-portal-booking: #003580;
  --bro-portal-booking-hell: #0071c2;
  --bro-portal-tinte: #ffffff;
  --bro-kanal-airbnb: #c24d6b;
  --bro-kanal-booking: #2574b0;
  --bro-kanal-direkt: #2e7d4f;
  --bro-modul-kurzzeitvermietung: #c24d6b;
  --bro-modul-neutral: #7d8590;
  --bro-modul-meldungen: #d6457a;
  --bro-modul-aufgaben: #e8900c;
  --bro-modul-stammdaten: #1c98a6;
  --bro-modul-fahrdienst: #2574b0;
  --bro-modul-auftraege: #5b5bd6;
  --bro-modul-katalog: #b7791f;
  --bro-modul-stoerungen: #d9534f;
  --bro-modul-finanzen: #2f9e5a;
  --bro-modul-vertraege: #4f6bd8;
  --bro-modul-zeiterfassung: #8c62d9;
  --bro-modul-berichte: #0f8a7e;
  --bro-modul-einrichtung: #34a0c8;
  --bro-modul-personal: #6e4bd8;
  --bro-modul-marketing: #d9622b;
  --bro-akzent-flaeche: color-mix(in oklab, var(--bro-akzent) 9%, #ffffff);
  --bro-akzent-text: color-mix(in oklab, var(--bro-akzent) 80%, #000000);
  --bro-radius-s: 0;
  --bro-radius-m: 0;
  --bro-radius-l: 0;
  --bro-radius-rund: 50%;
  --bro-radius-symbol: 22%;
  --bro-schatten-menue: 0 8px 24px rgba(0, 0, 0, 0.12);
  --bro-schatten-dialog: 0 20px 48px rgba(0, 0, 0, 0.22);
  --bro-markierung-breite: 3px;
  --bro-fokus-breite: 2px;
  --bro-fokus-abstand: 2px;
  --bro-abstand-4: 4px;
  --bro-abstand-8: 8px;
  --bro-abstand-12: 12px;
  --bro-abstand-16: 16px;
  --bro-abstand-24: 24px;
  --bro-abstand-32: 32px;
  --bro-schrift-familie: "Hanken Grotesk", system-ui, "Segoe UI", sans-serif;
  --bro-schrift-anzeige-groesse: 28px;
  --bro-schrift-anzeige-zeilenhoehe: 36px;
  --bro-schrift-anzeige-gewicht: 700;
  --bro-schrift-titel-groesse: 18px;
  --bro-schrift-titel-zeilenhoehe: 26px;
  --bro-schrift-titel-gewicht: 700;
  --bro-schrift-betont-groesse: 15px;
  --bro-schrift-betont-zeilenhoehe: 22px;
  --bro-schrift-betont-gewicht: 600;
  --bro-schrift-fliesstext-groesse: 14px;
  --bro-schrift-fliesstext-zeilenhoehe: 21px;
  --bro-schrift-fliesstext-gewicht: 400;
  --bro-schrift-klein-groesse: 13px;
  --bro-schrift-klein-zeilenhoehe: 18px;
  --bro-schrift-klein-gewicht: 400;
  --bro-schrift-fein-groesse: 12.5px;
  --bro-schrift-fein-zeilenhoehe: 17px;
  --bro-schrift-fein-gewicht: 600;
  --bro-schrift-fein-laufweite: 0.4px;
  --bro-schrift-seitentitel-groesse: 32px;
  --bro-schrift-seitentitel-zeilenhoehe: 38px;
  --bro-schrift-seitentitel-gewicht: 700;
  --bro-schrift-seitentitel-laufweite: -0.8px;
  --bro-schrift-kennzahl-groesse: 28px;
  --bro-schrift-kennzahl-zeilenhoehe: 34px;
  --bro-schrift-kennzahl-gewicht: 700;
  --bro-schrift-kennzahl-laufweite: -0.5px;
  --bro-schrift-augenbraue-groesse: 12px;
  --bro-schrift-augenbraue-zeilenhoehe: 16px;
  --bro-schrift-augenbraue-gewicht: 650;
  --bro-schrift-augenbraue-laufweite: 0.6px;
  --bro-schrift-gruppentitel-groesse: 11px;
  --bro-schrift-gruppentitel-zeilenhoehe: 16px;
  --bro-schrift-gruppentitel-gewicht: 600;
  --bro-schrift-gruppentitel-laufweite: 0.06em;
  --bro-erledigt-deckkraft: 0.5;
  --bro-erledigt-wartezeit: 10s;
  --bro-erledigt-schliessdauer: 400ms;
  --bro-melder-uebergangsdauer: 120ms;
  --bro-melder-uebergangskurve: ease;
  --bro-melder-ladedauer: 1.4s;
  --bro-melder-ladekurve: ease-in-out;
  --bro-melder-einblenddauer: 220ms;
  --bro-melder-quittung-wartezeit: 8s;
  --bro-melder-einblendkurve: ease-out;
  --bro-melder-picker-uebergangsdauer: 80ms;
  --bro-melder-picker-uebergangskurve: ease-out;
  --bro-melder-lade-deckkraft: 0.55;
  --bro-melder-lade-flaechenanteil: 70%;
  --bro-melder-picker-deckkraft: 14%;
  --bro-melder-unsichtbar-deckkraft: 0;
  --bro-melder-sichtbar-deckkraft: 1;
  --bro-melder-schleier-hell-deckkraft: 42%;
  --bro-melder-schleier-dunkel-deckkraft: 78%;
  --bro-fehlerbox-karte-uebergangsdauer: 150ms;
  --bro-fehlerbox-karte-uebergangskurve: ease;
  --bro-schublade-einfahrdauer: 220ms;
  --bro-schublade-einfahrkurve: ease-out;
  --bro-sprungmarke-handy-breite: 767px;
  --bro-sprungmarke-handy-quer-hoehe: 479px;
  --bro-sprungmarke-tablet-breite: 1279px;
  --bro-beruehrungsflaeche: 44px;
  --bro-geraet-handy-hoch: "(max-width: 767px) and (orientation: portrait)";
  --bro-geraet-handy-quer: "(max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (max-height: 479px) and (orientation: landscape)";
  --bro-geraet-tablet-hoch: "(min-width: 768px) and (max-width: 1279px) and (orientation: portrait)";
  --bro-geraet-tablet-quer: "(min-width: 768px) and (max-width: 1279px) and (min-height: 480px) and (orientation: landscape)";
  --bro-geraet-desktop: "(min-width: 1280px)";
  --bro-geraet-schmal: "(max-width: 767px) and (orientation: portrait), (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (max-height: 479px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (orientation: portrait)";
  --bro-geraet-beruehrung: "(max-width: 767px) and (orientation: portrait), (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (max-height: 479px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (orientation: portrait), (min-width: 768px) and (max-width: 1279px) and (min-height: 480px) and (orientation: landscape)";
}

:root[data-design="modern"] {
  --bro-radius-s: 12px;
  --bro-radius-m: 14px;
  --bro-radius-l: 14px;
  --bro-schrift-familie: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI Variable Text', 'Segoe UI', system-ui, 'Helvetica Neue', Arial, sans-serif;
  --bro-hinweis-flaeche: #EEF4FA;
  --bro-hinweis-linie: #CFE0F0;
  --bro-warnung-flaeche: #FDF6EC;
  --bro-warnung-linie: #F2DDBB;
  --bro-fehler-flaeche: #FDF0EF;
  --bro-fehler-linie: #F3CFCB;
  --bro-modern-meldungen-breite: 420px;
  --bro-modern-leiste-breite: 244px;
  --bro-modern-konto-breite: 480px;
  --bro-modern-konto-detail-breite: 600px;
  --bro-modern-handbuch-konto-breite: 1080px;
  --bro-modern-konto-kopf-innen: 20px 20px 14px;
  --bro-modern-konto-kopf-luecke: 14px;
  --bro-modern-konto-avatar: 48px;
  --bro-modern-konto-titel: 20px;
  --bro-modern-konto-inhalt-innen: 20px;
  --bro-modern-konto-gruppe-radius: 14px;
  --bro-modern-konto-zeile-innen: 10px 12px;
  --bro-modern-konto-zeile-hoehe: 44px;
  --bro-modern-konto-zeile-radius: 12px;
  --bro-modern-konto-symbol: 32px;
  --bro-modern-konto-symbol-radius: 9px;
  --bro-modern-konto-symbol-svg: 16px;
  --bro-modern-konto-neutral-flaeche: #F0F0F2;
  --bro-modern-konto-neutral-tinte: #515154;
  --bro-modern-konto-blau-flaeche: #E6F0F8;
  --bro-modern-konto-blau-tinte: #1F5F92;
  --bro-modern-konto-violett-flaeche: #EFEBFA;
  --bro-modern-konto-violett-tinte: #4B3AA8;
  --bro-modern-konto-orange-flaeche: #FBF1E6;
  --bro-modern-konto-orange-tinte: #9A5B1E;
  --bro-modern-leiste-schmal: 68px;
  --bro-modern-logo-hoehe: 115px;
  --bro-modern-logo-quadrat: 94px;
  --bro-modern-logo-quer: 56px;
  --bro-modern-logo-schmal: 40px;
  --bro-modern-navi-hoehe: 36px;
  --bro-modern-navi-symbol: 18px;
  --bro-modern-gruppenpunkt: 6px;
  --bro-modern-leiste-knopf: 26px;
  --bro-modern-radius-box: 14px;
  --bro-modern-radius-feld: 12px;
  --bro-modern-radius-navi: 10px;
  --bro-modern-radius-kachel: 9px;
  --bro-modern-kopfleiste: #FAFAFC;
  --bro-modern-hover: #F0F0F2;
  --bro-modern-gewaehlt: #E6F0F8;
  --bro-modern-ring: #D6E6F3;
  --bro-modern-kopf-hoehe: 64px;
  --bro-modern-kopf-knopf: 40px;
  --bro-modern-suche-hoehe: 44px;
  --bro-modern-suche-breite: 560px;
  --bro-modern-menue-breite: 17rem;
  --bro-modern-menue-abstand: 6px;
  --bro-modern-menue-innen-x: 10px;
  --bro-modern-haarlinie: 1px;
}
@media (prefers-color-scheme: dark) {
  :root[data-design="modern"]:not([data-theme="light"]) {
    --bro-modern-meldungen-breite: 420px;
    --bro-modern-leiste-breite: 244px;
    --bro-modern-konto-breite: 480px;
    --bro-modern-konto-detail-breite: 600px;
    --bro-modern-handbuch-konto-breite: 1080px;
    --bro-modern-konto-kopf-innen: 20px 20px 14px;
    --bro-modern-konto-kopf-luecke: 14px;
    --bro-modern-konto-avatar: 48px;
    --bro-modern-konto-titel: 20px;
    --bro-modern-konto-inhalt-innen: 20px;
    --bro-modern-konto-gruppe-radius: 14px;
    --bro-modern-konto-zeile-innen: 10px 12px;
    --bro-modern-konto-zeile-hoehe: 44px;
    --bro-modern-konto-zeile-radius: 12px;
    --bro-modern-konto-symbol: 32px;
    --bro-modern-konto-symbol-radius: 9px;
    --bro-modern-konto-symbol-svg: 16px;
    --bro-modern-konto-neutral-flaeche: #222227;
    --bro-modern-konto-neutral-tinte: #A1A1A3;
    --bro-modern-konto-blau-flaeche: #18232E;
    --bro-modern-konto-blau-tinte: #70AEE1;
    --bro-modern-konto-violett-flaeche: #18232E;
    --bro-modern-konto-violett-tinte: #70AEE1;
    --bro-modern-konto-orange-flaeche: #2F2617;
    --bro-modern-konto-orange-tinte: #E9B567;
    --bro-modern-leiste-schmal: 68px;
    --bro-modern-logo-hoehe: 115px;
    --bro-modern-logo-quadrat: 94px;
    --bro-modern-logo-quer: 56px;
    --bro-modern-logo-schmal: 40px;
    --bro-modern-navi-hoehe: 36px;
    --bro-modern-navi-symbol: 18px;
    --bro-modern-gruppenpunkt: 6px;
    --bro-modern-leiste-knopf: 26px;
    --bro-modern-kopfleiste: #222227;
    --bro-modern-hover: #222227;
    --bro-modern-gewaehlt: #18232E;
    --bro-modern-ring: #263340;
    --bro-modern-kopf-hoehe: 64px;
    --bro-modern-kopf-knopf: 40px;
    --bro-modern-suche-hoehe: 44px;
    --bro-modern-suche-breite: 560px;
    --bro-modern-menue-breite: 17rem;
    --bro-modern-menue-abstand: 6px;
    --bro-modern-menue-innen-x: 10px;
    --bro-modern-haarlinie: 1px;
  }
}
:root[data-design="modern"][data-theme="dark"] {
  --bro-modern-meldungen-breite: 420px;
  --bro-modern-leiste-breite: 244px;
  --bro-modern-konto-breite: 480px;
  --bro-modern-konto-detail-breite: 600px;
  --bro-modern-handbuch-konto-breite: 1080px;
  --bro-modern-konto-kopf-innen: 20px 20px 14px;
  --bro-modern-konto-kopf-luecke: 14px;
  --bro-modern-konto-avatar: 48px;
  --bro-modern-konto-titel: 20px;
  --bro-modern-konto-inhalt-innen: 20px;
  --bro-modern-konto-gruppe-radius: 14px;
  --bro-modern-konto-zeile-innen: 10px 12px;
  --bro-modern-konto-zeile-hoehe: 44px;
  --bro-modern-konto-zeile-radius: 12px;
  --bro-modern-konto-symbol: 32px;
  --bro-modern-konto-symbol-radius: 9px;
  --bro-modern-konto-symbol-svg: 16px;
  --bro-modern-konto-neutral-flaeche: #222227;
  --bro-modern-konto-neutral-tinte: #A1A1A3;
  --bro-modern-konto-blau-flaeche: #18232E;
  --bro-modern-konto-blau-tinte: #70AEE1;
  --bro-modern-konto-violett-flaeche: #18232E;
  --bro-modern-konto-violett-tinte: #70AEE1;
  --bro-modern-konto-orange-flaeche: #2F2617;
  --bro-modern-konto-orange-tinte: #E9B567;
  --bro-modern-leiste-schmal: 68px;
  --bro-modern-logo-hoehe: 115px;
  --bro-modern-logo-quadrat: 94px;
  --bro-modern-logo-quer: 56px;
  --bro-modern-logo-schmal: 40px;
  --bro-modern-navi-hoehe: 36px;
  --bro-modern-navi-symbol: 18px;
  --bro-modern-gruppenpunkt: 6px;
  --bro-modern-leiste-knopf: 26px;
  --bro-modern-kopfleiste: #222227;
  --bro-modern-hover: #222227;
  --bro-modern-gewaehlt: #18232E;
  --bro-modern-ring: #263340;
  --bro-modern-kopf-hoehe: 64px;
  --bro-modern-kopf-knopf: 40px;
  --bro-modern-suche-hoehe: 44px;
  --bro-modern-suche-breite: 560px;
  --bro-modern-menue-breite: 17rem;
  --bro-modern-menue-abstand: 6px;
  --bro-modern-menue-innen-x: 10px;
  --bro-modern-haarlinie: 1px;
}
:root[data-design="alt"] {
  --bro-flaeche-0: #F1F5F9;
  --bro-flaeche-2: #F8FAFC;
  --bro-tinte-1: #1E293B;
  --bro-tinte-titel: #0F172A;
  --bro-tinte-2: #5B6B81;
  --bro-tinte-3: #748499;
  --bro-linie: #E2E8F0;
  --bro-linie-zart: #F1F5F9;
  --bro-akzent: #2A7AB4;
  --bro-erfolg: #047857;
  --bro-warnung: #9C4F0B;
  --bro-fehler: #BE123C;
  --bro-fehler-tinte: #FFFFFF;
  --bro-linie-stark: #CBD5E1;
  --bro-fehler-flaeche: #FFF1F2;
  --bro-fehler-linie: #FECDD3;
  --bro-hinweis-flaeche: #EEF7FC;
  --bro-hinweis-linie: #D4EBF6;
  --bro-warnung-flaeche: #FFFBEB;
  --bro-warnung-linie: #FDE68A;
  --bro-daten-kontur: #1E293B;
  --bro-akzent-flaeche: color-mix(in oklab, var(--bro-akzent) 12%, #FFFFFF);
  --bro-akzent-rand: color-mix(in oklab, var(--bro-akzent) 22%, #FFFFFF);
  --bro-akzent-dunkel: color-mix(in oklab, var(--bro-akzent) 75%, #000000);
  --bro-radius-s: 8px;
  --bro-radius-m: 12px;
  --bro-radius-l: 16px;
  --bro-radius-dialog: 20px;
  --bro-radius-menuepunkt: 10px;
  --bro-radius-pille: 10rem;
  --bro-schatten-karte: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --bro-schatten-glas: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -12px rgba(15, 23, 42, 0.08);
  --bro-schatten-hover: 0 1px 2px rgba(15, 23, 42, 0.05), 0 16px 32px -16px rgba(15, 23, 42, 0.16);
  --bro-schatten-menue: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --bro-schatten-dialog: 0 1px 2px rgba(15, 23, 42, 0.06), 0 24px 48px -16px rgba(15, 23, 42, 0.24);
  --bro-glas-leiste: rgba(248, 250, 252, 0.72);
  --bro-glas-kopf: rgba(255, 255, 255, 0.7);
  --bro-glas-karte: rgba(255, 255, 255, 0.62);
  --bro-glas-dialog: rgba(255, 255, 255, 0.78);
  --bro-glas-rand: rgba(15, 23, 42, 0.06);
  --bro-glas-rand-dialog: rgba(15, 23, 42, 0.08);
  --bro-unschaerfe-leiste: 28px;
  --bro-unschaerfe-kopf: 20px;
  --bro-unschaerfe-karte: 18px;
  --bro-unschaerfe-dialog: 24px;
  --bro-bewegung-feder: cubic-bezier(0.34, 1.56, 0.64, 1);
  --bro-bewegung-schnell: 150ms;
  --bro-bewegung-mittel: 220ms;
  --bro-bewegung-ein: 240ms;
  --bro-inhaltsbreite: 80rem;
  --bro-formularbreite: 48rem;
  --bro-leiste-breite: 244px;
  --bro-leiste-schmal: 68px;
  --bro-kopf-hoehe: 56px;
  --bro-schrift-familie: "Inter Variable", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --bro-schrift-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --bro-schrift-anzeige-groesse: 30px;
  --bro-schrift-anzeige-gewicht: 600;
  --bro-schrift-anzeige-laufweite: -0.025em;
  --bro-schrift-titel-zeilenhoehe: 28px;
  --bro-schrift-titel-gewicht: 600;
  --bro-schrift-kennzahl-groesse: 24px;
  --bro-schrift-kennzahl-zeilenhoehe: 32px;
  --bro-schrift-kennzahl-gewicht: 600;
  --bro-schrift-betont-groesse: 14px;
  --bro-schrift-betont-zeilenhoehe: 20px;
  --bro-schrift-betont-gewicht: 500;
  --bro-schrift-fliesstext-zeilenhoehe: 20px;
  --bro-schrift-fein-groesse: 12px;
  --bro-schrift-fein-zeilenhoehe: 16px;
  --bro-schrift-fein-laufweite: 0.05em;
}
@media (prefers-color-scheme: dark) {
  :root[data-design="alt"]:not([data-theme="light"]) {
    --bro-flaeche-0: #020617;
    --bro-flaeche-1: #0f172a;
    --bro-flaeche-2: #162033;
    --bro-tinte-1: #e2e8f0;
    --bro-tinte-titel: #f8fafc;
    --bro-tinte-2: #94a3b8;
    --bro-tinte-3: #7c8ca3;
    --bro-linie: #1e293b;
    --bro-linie-zart: #172033;
    --bro-fehler-tinte: #0f172a;
    --bro-akzent-flaeche: #12293b;
    --bro-akzent-rand: #1f4766;
    --bro-akzent-text: #8cc4e6;
    --bro-linie-stark: #334155;
    --bro-hinweis-flaeche: #12293b;
    --bro-hinweis-linie: #1f4766;
    --bro-daten-flaeche: #12293b;
    --bro-daten-kontur: #0f172a;
    --bro-glas-leiste: rgba(2, 6, 23, 0.55);
    --bro-glas-kopf: rgba(2, 6, 23, 0.55);
    --bro-glas-karte: rgba(15, 23, 42, 0.55);
    --bro-glas-dialog: rgba(15, 23, 42, 0.78);
    --bro-glas-rand: rgba(255, 255, 255, 0.06);
    --bro-glas-rand-dialog: rgba(255, 255, 255, 0.1);
  }
}
:root[data-design="alt"][data-theme="dark"] {
  --bro-flaeche-0: #020617;
  --bro-flaeche-1: #0f172a;
  --bro-flaeche-2: #162033;
  --bro-tinte-1: #e2e8f0;
  --bro-tinte-titel: #f8fafc;
  --bro-tinte-2: #94a3b8;
  --bro-tinte-3: #7c8ca3;
  --bro-linie: #1e293b;
  --bro-linie-zart: #172033;
  --bro-fehler-tinte: #0f172a;
  --bro-akzent-flaeche: #12293b;
  --bro-akzent-rand: #1f4766;
  --bro-akzent-text: #8cc4e6;
  --bro-linie-stark: #334155;
  --bro-hinweis-flaeche: #12293b;
  --bro-hinweis-linie: #1f4766;
  --bro-daten-flaeche: #12293b;
  --bro-daten-kontur: #0f172a;
  --bro-glas-leiste: rgba(2, 6, 23, 0.55);
  --bro-glas-kopf: rgba(2, 6, 23, 0.55);
  --bro-glas-karte: rgba(15, 23, 42, 0.55);
  --bro-glas-dialog: rgba(15, 23, 42, 0.78);
  --bro-glas-rand: rgba(255, 255, 255, 0.06);
  --bro-glas-rand-dialog: rgba(255, 255, 255, 0.1);
}

:root {
  --bro-logo-blau: #449ddc;
  --bro-logo-punkt: #fa7113;
  --bro-logo-schrift: #ffffff;
  --bro-logo-fuss: #0d1b2a;
  --bro-logo-fuss-schrift: #ffffff;
  --bro-firmenlogo-unterlage: #0d1b2a;
  --bro-logo-kopf: 48px;
  --bro-logo-firma: 30px;
  --bro-logo-brodesk: 24px;
  --bro-logo-brodesk-schmal: 22px;
  --bro-logo-brodesk-allein: 40px;
  --bro-logo-strich: 26px;
  --bro-logo-abstand: 14px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bro-logo-fuss: #f2f7fb;
    --bro-logo-fuss-schrift: #0d1b2a;
    --bro-firmenlogo-unterlage: #f2f7fb;
  }
}
:root[data-theme="dark"] {
  --bro-logo-fuss: #f2f7fb;
  --bro-logo-fuss-schrift: #0d1b2a;
  --bro-firmenlogo-unterlage: #f2f7fb;
}

:root {
  --bro-konsole-radius-box: 14px;
  --bro-konsole-radius-feld: 12px;
  --bro-konsole-radius-navi: 10px;
  --bro-konsole-radius-kachel: 9px;
  --bro-konsole-radius-klein: 8px;
  --bro-konsole-radius-pille: 1000px;
}

/* Gebündelte Portal-Stile — generiert (`pnpm stile:generieren`), NICHT von Hand bearbeiten. */

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/statisch/schriften/hanken-grotesk-latin.e9201eddf1d41d0b.woff2) format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/statisch/schriften/inter-variable.3100e775e8616cd2.woff2) format('woff2');
}

/*
 * @bro/ui — Grundbausteine der Bro-Oberfläche.
 * Referenziert AUSSCHLIESSLICH Design-Tokens (var(--bro-…), Hausregeln B14.7/B17);
 * Farb-Literale sind hier verboten und werden von der Token-Wache abgewiesen.
 * Voraussetzung: @bro/design-tokens/tokens.css ist geladen.
 */

/* Typo-Stufen (aus den Schrift-Tokens) */

.bro-text-anzeige,
.bro-text-titel,
.bro-text-betont,
.bro-text-fliesstext,
.bro-text-klein,
.bro-text-fein,
.bro-text-gruppentitel {
  font-family: var(--bro-schrift-familie);
  color: var(--bro-tinte-1);
}

.bro-text-anzeige {
  font-size: var(--bro-schrift-anzeige-groesse);
  line-height: var(--bro-schrift-anzeige-zeilenhoehe);
  font-weight: var(--bro-schrift-anzeige-gewicht);
}

.bro-text-titel {
  font-size: var(--bro-schrift-titel-groesse);
  line-height: var(--bro-schrift-titel-zeilenhoehe);
  font-weight: var(--bro-schrift-titel-gewicht);
}

.bro-text-betont {
  font-size: var(--bro-schrift-betont-groesse);
  line-height: var(--bro-schrift-betont-zeilenhoehe);
  font-weight: var(--bro-schrift-betont-gewicht);
}

.bro-text-fliesstext {
  font-size: var(--bro-schrift-fliesstext-groesse);
  line-height: var(--bro-schrift-fliesstext-zeilenhoehe);
  font-weight: var(--bro-schrift-fliesstext-gewicht);
}

.bro-text-klein {
  font-size: var(--bro-schrift-klein-groesse);
  line-height: var(--bro-schrift-klein-zeilenhoehe);
  font-weight: var(--bro-schrift-klein-gewicht);
  color: var(--bro-tinte-2);
}

.bro-text-fein {
  font-size: var(--bro-schrift-fein-groesse);
  line-height: var(--bro-schrift-fein-zeilenhoehe);
  font-weight: var(--bro-schrift-fein-gewicht);
  letter-spacing: var(--bro-schrift-fein-laufweite);
  text-transform: uppercase;
  color: var(--bro-tinte-2);
}

.bro-text-gruppentitel {
  font-size: var(--bro-schrift-gruppentitel-groesse);
  line-height: var(--bro-schrift-gruppentitel-zeilenhoehe);
  font-weight: var(--bro-schrift-gruppentitel-gewicht);
  letter-spacing: var(--bro-schrift-gruppentitel-laufweite);
  text-transform: uppercase;
  color: var(--bro-tinte-2);
}

/* Typo-Stufen der Vitala-Klickdemo (Ticket 9599): Seitentitel, Kennzahl, Augenbraue */

.bro-text-seitentitel {
  font-family: var(--bro-schrift-familie);
  font-size: var(--bro-schrift-seitentitel-groesse);
  line-height: var(--bro-schrift-seitentitel-zeilenhoehe);
  font-weight: var(--bro-schrift-seitentitel-gewicht);
  letter-spacing: var(--bro-schrift-seitentitel-laufweite);
  color: var(--bro-tinte-1);
}

.bro-text-kennzahl {
  font-family: var(--bro-schrift-familie);
  font-size: var(--bro-schrift-kennzahl-groesse);
  line-height: var(--bro-schrift-kennzahl-zeilenhoehe);
  font-weight: var(--bro-schrift-kennzahl-gewicht);
  letter-spacing: var(--bro-schrift-kennzahl-laufweite);
  font-variant-numeric: tabular-nums;
  color: var(--bro-tinte-1);
}

.bro-text-augenbraue {
  font-family: var(--bro-schrift-familie);
  font-size: var(--bro-schrift-augenbraue-groesse);
  line-height: var(--bro-schrift-augenbraue-zeilenhoehe);
  font-weight: var(--bro-schrift-augenbraue-gewicht);
  letter-spacing: var(--bro-schrift-augenbraue-laufweite);
  text-transform: uppercase;
  color: var(--bro-tinte-2);
}

.bro-augenbraue {
  font-family: var(--bro-schrift-familie);
  font-size: var(--bro-schrift-augenbraue-groesse);
  line-height: var(--bro-schrift-augenbraue-zeilenhoehe);
  font-weight: var(--bro-schrift-augenbraue-gewicht);
  letter-spacing: var(--bro-schrift-augenbraue-laufweite);
  text-transform: uppercase;
  color: var(--bro-tinte-2);
}

/* Knopf (primär/sekundär) */

.bro-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bro-abstand-8);
  padding: var(--bro-abstand-8) var(--bro-abstand-16);
  border: 1px solid transparent;
  border-radius: var(--bro-radius-m);
  font-family: var(--bro-schrift-familie);
  font-size: var(--bro-schrift-betont-groesse);
  line-height: var(--bro-schrift-betont-zeilenhoehe);
  font-weight: var(--bro-schrift-betont-gewicht);
  cursor: pointer;
  text-decoration: none;
  /* Gemeinsame Bausteine (#6744, Scheibe 3b): eine einheitliche Mindesthöhe,
     damit Knopf, Eingabefeld und Filter-Chip in einer Zeile fluchten, und
     ein kurzer Übergang für Hover und Druck. */
  min-height: var(--bro-abstand-32);
  transition:
    background-color 120ms ease,
    border-color 120ms ease,
    box-shadow 120ms ease;
}

.bro-knopf:active:not(:disabled) {
  transform: translateY(1px);
}

.bro-knopf:focus-visible {
  outline: 2px solid var(--bro-akzent);
  outline-offset: 2px;
}

.bro-knopf:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.bro-knopf--primaer {
  background: var(--bro-akzent);
  color: var(--bro-akzent-tinte);
}

.bro-knopf--primaer:hover:not(:disabled) {
  background: color-mix(in oklab, var(--bro-akzent) 88%, var(--bro-tinte-1));
}

.bro-knopf--sekundaer {
  background: var(--bro-flaeche-1);
  color: var(--bro-tinte-1);
  border-color: var(--bro-linie);
}

/* Hover wie der sekundäre Knopf in v10: Fläche `--bro-flaeche-0`, Rand `--bro-tinte-2`
   (BrodeskPortalV10.dc.html:117, #6901). */
.bro-knopf--sekundaer:hover:not(:disabled) {
  background: var(--bro-flaeche-0);
  border-color: var(--bro-tinte-2);
}

/* Eingabefeld */

.bro-eingabefeld {
  display: block;
  width: 100%;
  padding: var(--bro-abstand-8) var(--bro-abstand-12);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-s);
  background: var(--bro-flaeche-1);
  color: var(--bro-tinte-1);
  font-family: var(--bro-schrift-familie);
  font-size: var(--bro-schrift-fliesstext-groesse);
  line-height: var(--bro-schrift-fliesstext-zeilenhoehe);
  font-weight: var(--bro-schrift-fliesstext-gewicht);
  min-height: var(--bro-abstand-32);
  transition: border-color 120ms ease;
}

.bro-eingabefeld:hover:not(:disabled):not(:focus-visible) {
  border-color: var(--bro-tinte-3);
}

.bro-eingabefeld:disabled {
  background: var(--bro-flaeche-0);
  color: var(--bro-tinte-2);
  cursor: not-allowed;
}

/* Ein Textbereich wächst nur in der Höhe, ein Auswahlfeld behält den
   nativen Pfeil — beide nehmen sonst dieselbe Form wie das Textfeld an. */
textarea.bro-eingabefeld {
  min-height: calc(var(--bro-abstand-32) * 3);
  resize: vertical;
}

select.bro-eingabefeld {
  cursor: pointer;
}

.bro-eingabefeld::placeholder {
  /* #5852 D (Entschieden (Imed), 26.09.2026): tinte-3 hält AA für Fließtext
     nicht (3,62:1 auf flaeche-1) — tinte-2 (5,07:1) hält. tinte-3 bleibt für
     Nicht-Text (Symbole, Ränder; dort gilt nur 3:1). */
  color: var(--bro-tinte-2);
}

.bro-eingabefeld:focus-visible {
  outline: 2px solid var(--bro-akzent);
  outline-offset: 0;
  border-color: var(--bro-akzent);
}

.bro-eingabefeld[aria-invalid="true"] {
  border-color: var(--bro-fehler);
}

/* Karte */

.bro-karte {
  background: var(--bro-flaeche-1);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-l);
  padding: var(--bro-abstand-24);
}

/* Der jetzige Schritt eines Ablaufs (`aria-current="step"`), etwa die Fahrt,
   die ein Fahrer als Nächstes fährt (#7886). Die Bedeutung trägt das
   Attribut; der Rahmen macht sie nur sichtbar. */
.bro-karte[aria-current="step"] {
  border-color: var(--bro-akzent);
}

/* Statuspille: Die Ecke kommt aus `--bro-radius-l`. In v10 ist sie eckig (Radius 0,
   #5816), das Etikett steht in Versalien; ändert sich das Token, folgt die Pille. */

.bro-statuspille {
  display: inline-flex;
  align-items: center;
  gap: var(--bro-abstand-4);
  padding: var(--bro-abstand-4) var(--bro-abstand-8);
  border-radius: var(--bro-radius-l);
  font-family: var(--bro-schrift-familie);
  font-size: var(--bro-schrift-fein-groesse);
  line-height: var(--bro-schrift-fein-zeilenhoehe);
  font-weight: var(--bro-schrift-fein-gewicht);
  letter-spacing: var(--bro-schrift-fein-laufweite);
  text-transform: uppercase;
  white-space: nowrap;
}

.bro-statuspille--erfolg {
  color: var(--bro-erfolg);
  background: color-mix(in oklab, var(--bro-erfolg) 9%, var(--bro-flaeche-1));
}

.bro-statuspille--warnung {
  color: var(--bro-warnung);
  background: color-mix(in oklab, var(--bro-warnung) 9%, var(--bro-flaeche-1));
}

.bro-statuspille--fehler {
  color: var(--bro-fehler);
  background: color-mix(in oklab, var(--bro-fehler) 9%, var(--bro-flaeche-1));
}

.bro-statuspille--neutral {
  color: var(--bro-tinte-2);
  background: var(--bro-flaeche-0);
}

/* Filter-Chip */

.bro-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--bro-abstand-8);
  padding: var(--bro-abstand-4) var(--bro-abstand-12);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-l);
  background: var(--bro-flaeche-1);
  color: var(--bro-tinte-2);
  font-family: var(--bro-schrift-familie);
  font-size: var(--bro-schrift-klein-groesse);
  line-height: var(--bro-schrift-klein-zeilenhoehe);
  font-weight: var(--bro-schrift-klein-gewicht);
  cursor: pointer;
  /* Der Chip ist oft ein Link (Reiter „Angebote (2)“) — ohne diese Zeile
     stand er unterstrichen da; als Reiter und Filter fluchtet er mit Knopf
     und Eingabefeld (#6744, Scheibe 3b). */
  min-height: var(--bro-abstand-32);
  text-decoration: none;
  transition:
    border-color 120ms ease,
    background-color 120ms ease;
}

.bro-filter-chip:hover {
  border-color: var(--bro-tinte-3);
  color: var(--bro-tinte-1);
}

.bro-filter-chip:focus-visible {
  outline: 2px solid var(--bro-akzent);
  outline-offset: 2px;
}

.bro-filter-chip--aktiv {
  border-color: var(--bro-akzent);
  background: var(--bro-akzent-flaeche);
  /* #5852 A: siehe .bro-navigationspunkt--aktiv weiter unten. */
  color: var(--bro-akzent-text);
}

/* Tabelle (Listen-Ansichten) */

.bro-tabelle {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--bro-schrift-familie);
  font-size: var(--bro-schrift-fliesstext-groesse);
  line-height: var(--bro-schrift-fliesstext-zeilenhoehe);
  color: var(--bro-tinte-1);
}

.bro-tabelle th {
  text-align: left;
  padding: var(--bro-abstand-8) var(--bro-abstand-12);
  border-bottom: 1px solid var(--bro-linie);
  white-space: nowrap;
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-fein-groesse);
  line-height: var(--bro-schrift-fein-zeilenhoehe);
  font-weight: var(--bro-schrift-fein-gewicht);
  letter-spacing: var(--bro-schrift-fein-laufweite);
  text-transform: uppercase;
}

.bro-tabelle td {
  padding: var(--bro-abstand-8) var(--bro-abstand-12);
  border-bottom: 1px solid var(--bro-linie);
  vertical-align: middle;
}

.bro-tabelle tbody tr:hover {
  background: var(--bro-flaeche-0);
}

/* Die letzte Zeile schließt ohne Linie ab — sonst liegt unter der Tabelle
   in einer Karte eine doppelte Kante (#6744, Scheibe 3b). */
.bro-tabelle tbody tr:last-child td {
  border-bottom: 0;
}

/* Abhaken-Kreis (Erledigen-Knopf in Listen) */

.bro-abhaken {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--bro-abstand-24);
  height: var(--bro-abstand-24);
  border: 1px solid var(--bro-tinte-3);
  /* Statusglyphe (#5853): bleibt rund, auch wenn v10 sonst eckig ist. */
  border-radius: var(--bro-radius-rund);
  background: var(--bro-flaeche-1);
  color: transparent;
  cursor: pointer;
  padding: 0;
}

.bro-abhaken:hover {
  border-color: var(--bro-erfolg);
  background: color-mix(in oklab, var(--bro-erfolg) 9%, var(--bro-flaeche-1));
  color: var(--bro-erfolg);
}

.bro-abhaken:focus-visible {
  outline: 2px solid var(--bro-akzent);
  outline-offset: 2px;
}

/* Initialen-Box */

.bro-initialen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--bro-abstand-32);
  height: var(--bro-abstand-32);
  /* Eckig laut Entwurf (#5853): Der Nutzer-Avatar mit Initialen
     (BrodeskPortalV10.dc.html:71, "SS") setzt border-radius:0 ausdrücklich,
     kein Kasten hinter einem Symbol — radius-l bleibt hier richtig. */
  border-radius: var(--bro-radius-l);
  background: var(--bro-akzent-flaeche);
  /* #5852 A: siehe .bro-navigationspunkt--aktiv weiter unten. */
  color: var(--bro-akzent-text);
  font-size: var(--bro-schrift-klein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
}

/* Symbol aus dem eigenen Bündel (symbole.ts, #5934): Größe folgt der Schrift,
   Farbe dem umgebenden Text (currentColor). */

.bro-symbol {
  flex: none;
  width: var(--bro-abstand-16);
  height: var(--bro-abstand-16);
}

/* Navigationspunkt */

.bro-navigationspunkt {
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-12);
  padding: var(--bro-abstand-8) var(--bro-abstand-12);
  border-radius: var(--bro-radius-m);
  color: var(--bro-tinte-2);
  font-family: var(--bro-schrift-familie);
  font-size: var(--bro-schrift-fliesstext-groesse);
  line-height: var(--bro-schrift-fliesstext-zeilenhoehe);
  font-weight: var(--bro-schrift-fliesstext-gewicht);
  text-decoration: none;
  cursor: pointer;
}

.bro-navigationspunkt:hover {
  background: var(--bro-flaeche-0);
  color: var(--bro-tinte-1);
}

.bro-navigationspunkt:focus-visible {
  outline: 2px solid var(--bro-akzent);
  outline-offset: 2px;
}

.bro-navigationspunkt--aktiv {
  background: var(--bro-akzent-flaeche);
  /* #5852 A (Entschieden (Imed), 26.09.2026): akzent-text statt akzent, weil
     Text auf akzent-flaeche mit dem reinen v10-Akzent AA nicht mehr hält
     (4,43:1) — akzent-text hält (6,38:1) und wandert mit dem
     Mandanten-Akzent mit. Dieselbe Begründung gilt für .bro-filter-chip--aktiv,
     .bro-initialen und .portal-nutzer-avatar. */
  color: var(--bro-akzent-text);
  font-weight: var(--bro-schrift-betont-gewicht);
}

/*
 * Bedienhilfe-Block (Issue #2156) — natives <details>, kein Skript.
 * Der Aufklapp-Zustand kommt vom Browser; hier wird nur gestaltet.
 */

.bro-bedienhilfe {
  font-family: var(--bro-schrift-familie);
  background: var(--bro-flaeche-1);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-l);
  margin-bottom: var(--bro-abstand-16);
}

.bro-bedienhilfe-kopf {
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-8);
  padding: var(--bro-abstand-12) var(--bro-abstand-16);
  cursor: pointer;
  color: var(--bro-tinte-1);
  font-size: var(--bro-schrift-betont-groesse);
  line-height: var(--bro-schrift-betont-zeilenhoehe);
  font-weight: var(--bro-schrift-betont-gewicht);
}

/*
 * Der Sichtbarkeits-Ring gehört auf den Kopf, weil er das bedienbare Element
 * ist: Wer mit der Tastatur ankommt, landet auf dem <summary>, nicht auf dem
 * <details>. Ohne diese Regel unterdrückt `list-style: none` in manchen
 * Browsern zugleich die Fokus-Anzeige.
 */
.bro-bedienhilfe-kopf:focus-visible {
  outline: 2px solid var(--bro-akzent);
  outline-offset: 2px;
}

.bro-bedienhilfe-rumpf {
  padding: 0 var(--bro-abstand-16) var(--bro-abstand-16);
  border-top: 1px solid var(--bro-linie);
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-fliesstext-groesse);
  line-height: var(--bro-schrift-fliesstext-zeilenhoehe);
}

.bro-bedienhilfe-einleitung {
  margin: var(--bro-abstand-12) 0 0;
}

.bro-bedienhilfe-schritte {
  margin: var(--bro-abstand-12) 0 0;
  padding-left: var(--bro-abstand-24);
}

.bro-bedienhilfe-schritte > li {
  margin-top: var(--bro-abstand-4);
}

.bro-bedienhilfe-hinweis {
  margin: var(--bro-abstand-12) 0 0;
  padding: var(--bro-abstand-8) var(--bro-abstand-12);
  background: var(--bro-akzent-flaeche);
  border-radius: var(--bro-radius-m);
  color: var(--bro-tinte-1);
}

.bro-bedienhilfe-verweis {
  display: inline-block;
  margin-top: var(--bro-abstand-12);
  color: var(--bro-akzent);
}

/*
 * „So funktioniert es“ (Issue 9258) — Knopf oben rechts im Seitenkopf, Seitenblatt
 * von rechts. Vorbild `.knopf.geist`, `.seitenblatt`, `.blatt-*` der
 * Vitala-Klickdemo (`quelltext-design.md`), Werte als Tokens. Natives
 * <details>: Offen rückt das <summary> als Kreuz in die Ecke des Blatts.
 */

.bro-so-funktioniert {
  display: inline-block;
}

.bro-so-funktioniert-knopf {
  list-style: none;
  background: transparent;
  color: var(--bro-tinte-2);
}

.bro-so-funktioniert-knopf::-webkit-details-marker {
  display: none;
}

.bro-so-funktioniert-knopf:hover {
  background: var(--bro-flaeche-0);
  color: var(--bro-tinte-1);
}

.bro-so-funktioniert-auf,
.bro-so-funktioniert-zu {
  display: inline-flex;
  align-items: center;
  gap: var(--bro-abstand-8);
}

.bro-so-funktioniert-zu,
.bro-so-funktioniert[open] .bro-so-funktioniert-auf {
  display: none;
}

.bro-so-funktioniert[open] .bro-so-funktioniert-zu {
  display: inline-flex;
}

/* Das Wort „Schließen“ nur für Vorlesehilfen; sichtbar ist das Kreuz. */
.bro-so-funktioniert-vorlese {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.bro-so-funktioniert[open] .bro-so-funktioniert-knopf {
  position: fixed;
  top: var(--bro-abstand-16);
  right: var(--bro-abstand-16);
  z-index: 59;
  padding: var(--bro-abstand-8);
}

.bro-so-funktioniert-blatt {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 58;
  width: min(calc(var(--bro-abstand-32) * 14), 100%);
  overflow-y: auto;
  padding: var(--bro-abstand-24) var(--bro-abstand-24) var(--bro-abstand-32);
  background: var(--bro-flaeche-1);
  border-left: 1px solid var(--bro-linie);
  box-shadow: var(--bro-schatten-dialog);
  font-family: var(--bro-schrift-familie);
  text-align: left;
}

.bro-so-funktioniert-augenbraue {
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-8);
  margin: 0 0 var(--bro-abstand-4);
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-gruppentitel-groesse);
  line-height: var(--bro-schrift-gruppentitel-zeilenhoehe);
  font-weight: var(--bro-schrift-gruppentitel-gewicht);
  letter-spacing: var(--bro-schrift-gruppentitel-laufweite);
  text-transform: uppercase;
}

.bro-so-funktioniert-augenbraue::before {
  content: "";
  width: var(--bro-abstand-8);
  height: var(--bro-abstand-8);
  background: var(--bro-akzent);
}

.bro-so-funktioniert-titel {
  margin: 0 0 var(--bro-abstand-16);
  /* Rechts Platz für das Kreuz, das über dem Blatt liegt. */
  padding-right: var(--bro-abstand-32);
  color: var(--bro-tinte-1);
  font-size: var(--bro-schrift-titel-groesse);
  line-height: var(--bro-schrift-titel-zeilenhoehe);
  font-weight: var(--bro-schrift-titel-gewicht);
}

.bro-so-funktioniert-schritte {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-16);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: bro-schritt;
}

.bro-so-funktioniert-schritte > li {
  display: grid;
  grid-template-columns: var(--bro-abstand-32) minmax(0, 1fr);
  gap: 2px var(--bro-abstand-12);
  counter-increment: bro-schritt;
}

.bro-so-funktioniert-schritte > li::before {
  content: counter(bro-schritt);
  grid-row: span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--bro-abstand-24) + 2px);
  height: calc(var(--bro-abstand-24) + 2px);
  border-radius: var(--bro-radius-s);
  background: var(--bro-akzent);
  color: var(--bro-akzent-tinte);
  font-size: var(--bro-schrift-klein-groesse);
  font-weight: var(--bro-schrift-titel-gewicht);
}

.bro-so-funktioniert-schritte b {
  color: var(--bro-tinte-1);
  font-size: var(--bro-schrift-betont-groesse);
  line-height: var(--bro-schrift-betont-zeilenhoehe);
  font-weight: var(--bro-schrift-betont-gewicht);
}

.bro-so-funktioniert-schritte span {
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
  line-height: var(--bro-schrift-klein-zeilenhoehe);
}

.bro-so-funktioniert-regeln {
  margin-top: var(--bro-abstand-24);
  padding-top: var(--bro-abstand-16);
  border-top: 1px solid var(--bro-linie);
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
}

.bro-so-funktioniert-regeln ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--bro-abstand-4) var(--bro-abstand-12);
  margin: var(--bro-abstand-8) 0 0;
  padding: 0;
  list-style: none;
}

.bro-so-funktioniert-regeln li {
  display: flex;
  align-items: flex-start;
  gap: var(--bro-abstand-4);
}

.bro-so-funktioniert-regeln .bro-symbol {
  flex: none;
  color: var(--bro-erfolg);
}
/* Verweise am Fuß von „So funktioniert es“ (Ticket 9782): Anleitung, Formulare,
   Einstellungen — vorher Knöpfe im Seitenkopf. */
.bro-so-funktioniert-verweise {
  display: grid;
  gap: var(--bro-abstand-4);
  margin: var(--bro-abstand-24) 0 0;
  padding: var(--bro-abstand-16) 0 0;
  border-top: 1px solid var(--bro-linie);
  list-style: none;
  font-size: var(--bro-schrift-klein-groesse);
}

/* Leerzustand einer Liste (Issue 9117, F13) nach Alt `_EmptyState.cshtml`:
   Kachel 56 px (`w-14 h-14`), Symbol 28 px (`w-7 h-7`), beides aus der
   Abstands-Skala zusammengesetzt; die Ecke folgt `--bro-radius-l` (v10). */
.bro-leerzustand {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--bro-abstand-32) var(--bro-abstand-24);
  text-align: center;
  font-family: var(--bro-schrift-familie);
}

.bro-leerzustand-kachel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--bro-abstand-32) + var(--bro-abstand-24));
  height: calc(var(--bro-abstand-32) + var(--bro-abstand-24));
  margin-bottom: var(--bro-abstand-16);
  border-radius: var(--bro-radius-l);
}

.bro-leerzustand-symbol {
  width: calc(var(--bro-abstand-24) + var(--bro-abstand-4));
  height: calc(var(--bro-abstand-24) + var(--bro-abstand-4));
}

.bro-leerzustand-kachel--akzent {
  color: var(--bro-akzent-text);
  background: var(--bro-akzent-flaeche);
}

.bro-leerzustand-kachel--erfolg {
  color: var(--bro-erfolg);
  background: color-mix(in oklab, var(--bro-erfolg) 10%, var(--bro-flaeche-1));
}

.bro-leerzustand-kachel--warnung {
  color: var(--bro-warnung);
  background: var(--bro-warnung-flaeche);
}

.bro-leerzustand-kachel--fehler {
  color: var(--bro-fehler);
  background: var(--bro-fehler-flaeche);
}

.bro-leerzustand-titel {
  margin: 0;
  color: var(--bro-tinte-1);
  font-size: var(--bro-schrift-betont-groesse);
  line-height: var(--bro-schrift-betont-zeilenhoehe);
  font-weight: var(--bro-schrift-betont-gewicht);
}

.bro-leerzustand-untertitel {
  margin: var(--bro-abstand-4) 0 0;
  max-width: calc(var(--bro-abstand-32) * 14); /* Alt `max-w-md`, 448 px */
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
  line-height: var(--bro-schrift-klein-zeilenhoehe);
}

.bro-leerzustand-knopf {
  margin-top: var(--bro-abstand-16);
}
/* Gemeinsame Diagramme und Kennzahlen (Issue 8953), nur Design-Tokens. */
.bro-kennzahl-leiste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--bro-abstand-32) * 8)), 1fr));
  gap: var(--bro-abstand-16);
  margin-bottom: var(--bro-abstand-16);
}
.bro-diagramm-raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--bro-abstand-16);
  min-width: 0;
}
.bro-diagramm,
.bro-kennzahl {
  margin: 0;
  min-width: 0;
  padding: var(--bro-abstand-16);
  background: var(--bro-flaeche-1);
  color: var(--bro-tinte-1);
  border: 1px solid var(--bro-linie-stark);
  border-radius: var(--bro-radius-m);
  font-family: var(--bro-schrift-familie);
  font-size: var(--bro-schrift-fliesstext-groesse);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.bro-diagramm figcaption,
.bro-kennzahl h3 {
  margin: 0 0 var(--bro-abstand-8);
  font-size: var(--bro-schrift-betont-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
}
.bro-kennzahl-wert {
  font-size: var(--bro-schrift-anzeige-groesse);
  font-weight: var(--bro-schrift-anzeige-gewicht);
}
.bro-kennzahl-warnung {
  color: var(--bro-warnung);
}
.bro-diagramm-svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(var(--bro-abstand-32) * 8);
  overflow: visible;
}
.bro-diagramm-svg--balken {
  height: var(--bro-abstand-24);
}
.bro-diagramm-marke {
  stroke: var(--bro-daten-kontur);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.bro-diagramm-spur {
  fill: var(--bro-daten-flaeche);
  stroke: var(--bro-tinte-2);
  vector-effect: non-scaling-stroke;
}
.bro-diagramm-achse,
.bro-diagramm-spannenstrich {
  fill: none;
  stroke: var(--bro-tinte-1);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.bro-diagramm-prognose {
  fill: var(--bro-daten-flaeche);
  stroke: var(--bro-tinte-1);
  stroke-width: 2;
  stroke-dasharray: 4 3;
  vector-effect: non-scaling-stroke;
}
.bro-datenreihe-1 {
  fill: var(--bro-datenreihe-1);
  background: var(--bro-datenreihe-1);
}
.bro-datenreihe-2 {
  fill: var(--bro-datenreihe-2);
  background: var(--bro-datenreihe-2);
}
.bro-datenreihe-3 {
  fill: var(--bro-datenreihe-3);
  background: var(--bro-datenreihe-3);
}
.bro-datenreihe-4 {
  fill: var(--bro-datenreihe-4);
  background: var(--bro-datenreihe-4);
}
.bro-datenreihe-5 {
  fill: var(--bro-datenreihe-5);
  background: var(--bro-datenreihe-5);
}
.bro-datenreihe-6 {
  fill: var(--bro-datenreihe-6);
  background: var(--bro-datenreihe-6);
}
.bro-datenreihe-7 {
  fill: var(--bro-datenreihe-7);
  background: var(--bro-datenreihe-7);
}
.bro-datenreihe-8 {
  fill: var(--bro-datenreihe-8);
  background: var(--bro-datenreihe-8);
}
.bro-diagramm-legende {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-12);
  padding: 0;
  list-style: none;
}
.bro-diagramm-schluessel {
  display: inline-block;
  width: var(--bro-abstand-12);
  height: var(--bro-abstand-12);
  margin-right: var(--bro-abstand-4);
  border: 1px solid var(--bro-daten-kontur);
}
.bro-diagramm-zeitpunkte {
  display: flex;
  padding: 0;
  margin: var(--bro-abstand-4) 0;
  list-style: none;
  font-size: var(--bro-schrift-klein-groesse);
}
.bro-diagramm-zeitpunkte li {
  flex: 1;
  min-width: 0;
  text-align: center;
}
.bro-diagramm-herkunft,
.bro-diagramm-beschreibung {
  font-size: var(--bro-schrift-klein-groesse);
  color: var(--bro-tinte-2);
}
.bro-diagramm-daten summary {
  cursor: pointer;
  padding: var(--bro-abstand-8) 0;
  min-height: var(--bro-beruehrungsflaeche);
  box-sizing: border-box;
}
.bro-diagramm-daten summary:focus-visible,
.bro-diagramm-tabelle:focus-visible {
  outline: var(--bro-fokus-breite) solid var(--bro-akzent);
  outline-offset: var(--bro-fokus-abstand);
}
.bro-diagramm-tabelle {
  overflow-x: auto;
}
.bro-diagramm-tabelle table {
  width: 100%;
  border-collapse: collapse;
}
.bro-diagramm-tabelle th,
.bro-diagramm-tabelle td {
  padding: var(--bro-abstand-8);
  text-align: left;
  /* Wörter bleiben lesbar; die native Tabelle scrollt in ihrem eigenen Rahmen. */
  overflow-wrap: normal;
  border-bottom: 1px solid var(--bro-linie-stark);
}
.bro-heatmap-zelle {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
  padding: var(--bro-abstand-12);
  background: var(--bro-daten-flaeche);
  border: 1px solid var(--bro-tinte-2);
}
.bro-heatmap-zelle[data-zustand="ueber"],
.bro-heatmap-zelle[data-zustand="unter"] {
  background: var(--bro-warnung-flaeche);
  color: var(--bro-warnung);
  border-color: var(--bro-warnung);
}
.bro-heatmap-zelle[data-zustand="fehlt"] {
  background: var(--bro-flaeche-0);
  border-style: dashed;
}
@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (max-height: 479px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (orientation: portrait) {
  .bro-kennzahl-leiste,
  .bro-diagramm-raster {
    grid-template-columns: minmax(0, 1fr);
  }
  .bro-diagramm,
  .bro-kennzahl {
    padding: var(--bro-abstand-8);
  }
  .bro-diagramm-zeitpunkte {
    flex-wrap: wrap;
    gap: var(--bro-abstand-4);
  }
  .bro-diagramm-legende {
    flex-direction: column;
  }
}

/*
 * Seitenbausteine der Vitala-Klickdemo (Ticket 9599, `seitenbausteine.ts`).
 * Maße wörtlich aus `docs/befunde/2026-10-15-krankenfahrt-nach-demo/quelltext-design.md`,
 * Farben nur über Tokens — die Akzentfarbe ist die Markenfarbe des Betriebs.
 */

/* Knopf ohne Rand und Fläche (`.knopf.geist`) */
.bro-knopf--geist {
  white-space: nowrap;
  background: transparent;
  color: var(--bro-tinte-2);
  border-color: transparent;
}

.bro-knopf--geist:hover:not(:disabled) {
  background: var(--bro-flaeche-0);
  color: var(--bro-tinte-1);
}

/* Großer Knopf für den Hauptschritt (`.knopf.gross`: 46 px hoch, 0 22 px, 15 px) */
.bro-knopf--gross {
  min-height: 46px;
  padding: 0 22px;
  font-size: var(--bro-schrift-betont-groesse);
}

/* Augenbraue (`.augenbraue`, `.abschnitt`): Abstand und Symbol */
.bro-augenbraue {
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-8);
  margin: 0 0 6px;
}

.bro-augenbraue .bro-symbol {
  width: 14px;
  height: 14px;
  flex: none;
}

/* Mit Farbquadrat vor der Kennzeile des Seitenkopfs (`.augenbraue i`, 8 × 8 px) */
.bro-augenbraue--marke::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: none;
  background: var(--bro-akzent);
}

/* Kennzahlleiste (`.kz-leiste`, `.kz`) */
.bro-kennzahlleiste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  background: var(--bro-linie);
  border: 1px solid var(--bro-linie);
}

.bro-kennzahlleiste-feld {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: var(--bro-abstand-16) 20px;
  background: var(--bro-flaeche-1);
}

.bro-kennzahlleiste-wert {
  font-family: var(--bro-schrift-familie);
  font-size: var(--bro-schrift-kennzahl-groesse);
  line-height: var(--bro-schrift-kennzahl-zeilenhoehe);
  font-weight: var(--bro-schrift-kennzahl-gewicht);
  letter-spacing: var(--bro-schrift-kennzahl-laufweite);
  font-variant-numeric: tabular-nums;
  color: var(--bro-tinte-1);
}

.bro-kennzahlleiste-wert small {
  font-size: var(--bro-schrift-betont-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
  color: var(--bro-tinte-3);
}

.bro-kennzahlleiste-wert--erfolg {
  color: var(--bro-erfolg);
}

.bro-kennzahlleiste-wert--warnung {
  color: var(--bro-warnung);
}

.bro-kennzahlleiste-wert--fehler {
  color: var(--bro-fehler);
}

.bro-kennzahlleiste-name {
  font-size: var(--bro-schrift-klein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
  color: var(--bro-tinte-1);
}

.bro-kennzahlleiste-zusatz {
  font-size: var(--bro-schrift-fein-groesse);
  line-height: var(--bro-schrift-fein-zeilenhoehe);
  color: var(--bro-tinte-2);
}

/* Reiter mit Unterstrich (`.reiter`, Zählmarke `.reiter .anz`) */
.bro-reiter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-8);
  margin: 18px 0 var(--bro-abstand-16);
  border-bottom: 1px solid var(--bro-linie);
}

.bro-reiter-punkt {
  display: inline-flex;
  align-items: center;
  gap: var(--bro-abstand-8);
  min-height: var(--bro-abstand-32);
  padding: var(--bro-abstand-8) var(--bro-abstand-12);
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  font-family: var(--bro-schrift-familie);
  font-size: var(--bro-schrift-fliesstext-groesse);
  color: var(--bro-tinte-2);
  text-decoration: none;
}

.bro-reiter-punkt:hover {
  color: var(--bro-tinte-1);
}

.bro-reiter-punkt[aria-current="page"] {
  color: var(--bro-tinte-1);
  font-weight: var(--bro-schrift-betont-gewicht);
  border-bottom-color: var(--bro-akzent);
}

.bro-reiter-punkt:focus-visible {
  outline: 2px solid var(--bro-akzent);
  outline-offset: 2px;
}

.bro-reiter-anzahl {
  padding: 0 6px;
  font-size: var(--bro-schrift-augenbraue-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
  background: var(--bro-flaeche-0);
  color: var(--bro-tinte-2);
}

/* Kleine flächige Marke (`.marke-v`) */
.bro-marke {
  display: inline-flex;
  align-items: center;
  gap: var(--bro-abstand-4);
  padding: 2px 7px;
  font-family: var(--bro-schrift-familie);
  font-size: var(--bro-schrift-augenbraue-groesse);
  line-height: var(--bro-schrift-augenbraue-zeilenhoehe);
  font-weight: var(--bro-schrift-betont-gewicht);
  white-space: nowrap;
}

.bro-marke--neutral {
  color: var(--bro-tinte-2);
  background: var(--bro-flaeche-0);
}

.bro-marke--akzent {
  color: var(--bro-akzent-text);
  background: var(--bro-akzent-flaeche);
}

.bro-marke--erfolg {
  color: var(--bro-erfolg);
  background: color-mix(in oklab, var(--bro-erfolg) 9%, var(--bro-flaeche-1));
}

.bro-marke--warnung {
  color: var(--bro-warnung);
  background: var(--bro-warnung-flaeche);
}

.bro-marke--fehler {
  color: var(--bro-fehler);
  background: var(--bro-fehler-flaeche);
}

/* Bestätigungskasten (`.okkasten`) */
.bro-okkasten {
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-8);
  margin: 0;
  padding: 9px var(--bro-abstand-12);
  font-family: var(--bro-schrift-familie);
  font-size: var(--bro-schrift-klein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
  color: var(--bro-erfolg);
  background: color-mix(in oklab, var(--bro-erfolg) 9%, var(--bro-flaeche-1));
}

.bro-okkasten .bro-symbol {
  width: 16px;
  height: 16px;
  flex: none;
}
.bro-suchauswahl {
  display: grid;
  gap: var(--bro-abstand-8);
}

.bro-suchauswahl > label {
  display: grid;
  gap: var(--bro-abstand-4);
}

.bro-suchauswahl [hidden] {
  display: none;
}

/* Mit Skript nennt das Suchfeld die Auswahl schon; die Trefferliste behält
   ihren Namen nur für Vorleser (Ticket 9789, sonst stünde er doppelt). */
.bro-suchauswahl[data-auswahl-erweitert] [data-auswahl-wertname] {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.bro-suchauswahl select[size] {
  max-block-size: calc(var(--bro-abstand-32) * 6);
  overflow-y: auto;
}

.bro-suchauswahl > button {
  justify-self: start;
}

.bro-suchauswahl [data-auswahl-blaettern] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-8);
}

/*
 * Auswertungsseiten im Layout des Prototyps „Demo-Edition“ (`auswertung.ts`,
 * Werkstatt-Cockpit 19.10.2026). Maße aus dem Prototyp über die Abstands- und
 * Schrift-Tokens; Farben nur über Tokens. Die Ecken folgen `--bro-radius-m`
 * wie alle Karten in Bro (Vitala-Fassung, Ticket 9599), nicht den 14 px des Prototyps.
 */
.bro-auswertung {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-32);
  min-width: 0;
  font-family: var(--bro-schrift-familie);
  color: var(--bro-tinte-1);
}

.bro-auswertung-steuerung {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--bro-abstand-8) var(--bro-abstand-16);
}

.bro-auswertung-auswahl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-8) var(--bro-abstand-12);
}

.bro-auswertung-auswahl label {
  font-size: var(--bro-schrift-klein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
  color: var(--bro-tinte-2);
}

.bro-auswertung-auswahl .bro-eingabefeld {
  width: auto;
}

.bro-auswertung-kontext,
.bro-auswertung-nebentext,
.bro-auswertung-fuss {
  margin: 0;
  font-size: var(--bro-schrift-klein-groesse);
  line-height: var(--bro-schrift-klein-zeilenhoehe);
  color: var(--bro-tinte-2);
}

.bro-auswertung-stapel {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  min-width: 0;
}

/* Segment-Umschalter (Monat · Quartal · Jahr) */
.bro-segmente {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: var(--bro-flaeche-0);
  border: 1px solid var(--bro-linie);
}

.bro-segment {
  display: inline-flex;
  align-items: center;
  min-height: var(--bro-abstand-32);
  padding: 0 var(--bro-abstand-12);
  font-size: var(--bro-schrift-klein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
  color: var(--bro-tinte-2);
  text-decoration: none;
}

.bro-segment:hover {
  color: var(--bro-tinte-1);
}

.bro-segment[aria-current="true"] {
  background: var(--bro-flaeche-1);
  color: var(--bro-tinte-1);
  box-shadow: 0 0 0 1px var(--bro-linie);
}

.bro-segment:focus-visible {
  outline: var(--bro-fokus-breite) solid var(--bro-akzent);
  outline-offset: var(--bro-fokus-abstand);
}

/* Kennzahlleiste mit Vergleichszeile */
.bro-auswertung-felder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(var(--bro-abstand-32) * 5), 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--bro-linie);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
  overflow: hidden;
}

.bro-auswertung-feld {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: var(--bro-abstand-16) var(--bro-abstand-16);
  background: var(--bro-flaeche-1);
}

.bro-auswertung-feld-name {
  font-size: var(--bro-schrift-klein-groesse);
  line-height: var(--bro-schrift-klein-zeilenhoehe);
  font-weight: var(--bro-schrift-betont-gewicht);
  color: var(--bro-tinte-2);
}

.bro-auswertung-feld-wert {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--bro-abstand-4) var(--bro-abstand-8);
  font-size: var(--bro-schrift-kennzahl-groesse);
  line-height: var(--bro-schrift-kennzahl-zeilenhoehe);
  font-weight: var(--bro-schrift-kennzahl-gewicht);
  letter-spacing: var(--bro-schrift-kennzahl-laufweite);
  font-variant-numeric: tabular-nums;
}

.bro-auswertung-feld--leer .bro-auswertung-feld-wert {
  color: var(--bro-tinte-3);
}

.bro-auswertung-feld-zusatz {
  font-size: var(--bro-schrift-klein-groesse);
  line-height: var(--bro-schrift-klein-zeilenhoehe);
  color: var(--bro-tinte-2);
}

.bro-auswertung-feld-zusatz--erfolg {
  color: var(--bro-erfolg);
}

.bro-auswertung-feld-zusatz--warnung {
  color: var(--bro-warnung);
}

.bro-auswertung-feld-zusatz--fehler {
  color: var(--bro-fehler);
}

/* Kleine Statusmarke neben einem Wert: dezent, Erklärung beim Zeigen. */
.bro-auswertung-marke {
  padding: 0 var(--bro-abstand-4);
  font-size: var(--bro-schrift-augenbraue-groesse);
  line-height: var(--bro-schrift-augenbraue-zeilenhoehe);
  font-weight: var(--bro-schrift-betont-gewicht);
  letter-spacing: 0;
  color: var(--bro-warnung);
  background: var(--bro-warnung-flaeche);
  border: 1px solid var(--bro-warnung-linie);
  cursor: help;
}

/* „Woher kommt diese Zahl?“ */
.bro-woher {
  margin-top: var(--bro-abstand-4);
  font-size: var(--bro-schrift-klein-groesse);
  line-height: var(--bro-schrift-klein-zeilenhoehe);
  color: var(--bro-tinte-2);
}

.bro-woher summary {
  cursor: pointer;
  width: fit-content;
  color: var(--bro-akzent-text);
  font-weight: var(--bro-schrift-betont-gewicht);
}

.bro-woher summary:focus-visible {
  outline: var(--bro-fokus-breite) solid var(--bro-akzent);
  outline-offset: var(--bro-fokus-abstand);
}

.bro-woher dl {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 2px var(--bro-abstand-8);
  margin: var(--bro-abstand-8) 0 0;
  overflow-wrap: anywhere;
}

.bro-woher dt {
  font-weight: var(--bro-schrift-betont-gewicht);
  color: var(--bro-tinte-1);
}

.bro-woher dd {
  margin: 0;
}

.bro-woher-tabelle {
  width: 100%;
  margin-top: var(--bro-abstand-8);
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.bro-woher-tabelle caption {
  text-align: left;
  font-weight: var(--bro-schrift-betont-gewicht);
  color: var(--bro-tinte-1);
}

.bro-woher-tabelle th,
.bro-woher-tabelle td {
  padding: var(--bro-abstand-4) var(--bro-abstand-8);
  text-align: left;
  border-bottom: 1px solid var(--bro-linie);
}

.bro-woher-rahmen {
  overflow-x: auto;
}

/* Abschnitt mit Kopfzeile und Karte */
.bro-auswertung-abschnitt {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  min-width: 0;
}

.bro-auswertung-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--bro-abstand-4) var(--bro-abstand-12);
}

.bro-auswertung-kopf h2 {
  margin: 0;
  font-size: var(--bro-schrift-titel-groesse);
  line-height: var(--bro-schrift-titel-zeilenhoehe);
  font-weight: var(--bro-schrift-titel-gewicht);
}

.bro-auswertung-karte {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
  min-width: 0;
  padding: var(--bro-abstand-16);
  background: var(--bro-flaeche-1);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
}

.bro-auswertung-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--bro-abstand-32) * 13)), 1fr));
  gap: var(--bro-abstand-32) var(--bro-abstand-32);
  align-items: start;
}

.bro-auswertung-grosswert {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--bro-abstand-4) var(--bro-abstand-12);
  margin: 0;
}

.bro-auswertung-grosswert strong {
  font-size: var(--bro-schrift-titel-groesse);
  line-height: var(--bro-schrift-titel-zeilenhoehe);
  font-weight: var(--bro-schrift-titel-gewicht);
  font-variant-numeric: tabular-nums;
}

/* Betriebe einer Gruppensicht als Zeilen mit Farbpunkt (Auslastung je Betrieb). */
.bro-auswertung-betriebe {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--bro-schrift-klein-groesse);
}

.bro-auswertung-betriebe li {
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-8);
}

.bro-auswertung-betriebe li > span:nth-child(2) {
  flex: 1;
  min-width: 0;
}

/* Leerzustand in einer Karte: ohne Zahl, ohne angedeutete Balken. */
.bro-auswertung-leer {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--bro-abstand-16);
  background: var(--bro-flaeche-0);
  border: 1px dashed var(--bro-linie-stark);
}

.bro-auswertung-leer-titel {
  margin: 0;
  font-weight: var(--bro-schrift-betont-gewicht);
  color: var(--bro-tinte-2);
}

.bro-auswertung-leer-grund {
  margin: 0;
  font-size: var(--bro-schrift-klein-groesse);
  line-height: var(--bro-schrift-klein-zeilenhoehe);
  color: var(--bro-tinte-2);
}

/* Säulenverlauf (12 Monate, Prognose) */
.bro-verlauf {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
  min-width: 0;
}

.bro-verlauf-flaeche,
.bro-verlauf-achse {
  display: grid;
  grid-template-columns: repeat(var(--verlauf-spalten), minmax(0, 1fr));
  gap: var(--bro-abstand-4);
}

.bro-verlauf-flaeche {
  align-items: end;
  height: calc(var(--bro-abstand-32) * 5);
  border-bottom: 1px solid var(--bro-linie-stark);
  background-image: linear-gradient(var(--bro-daten-gitter) 1px, transparent 1px);
  background-size: 100% 25%;
}

.bro-verlauf-spalte {
  position: relative;
  height: 100%;
}

.bro-verlauf-saeule,
.bro-verlauf-prognose {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 0;
  height: var(--wert-hoehe);
}

/* Teile stapeln sich von unten; 1 px Fuge wie im Prototyp. */
.bro-verlauf-saeule {
  display: flex;
  flex-direction: column-reverse;
  gap: 1px;
  overflow: hidden;
}

.bro-verlauf-teil {
  min-height: 0;
}

/* Nicht abgeschlossen: schraffiert über der Reihenfarbe. */
.bro-verlauf-saeule--vorbehalt .bro-verlauf-teil {
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0 4px,
    var(--bro-daten-flaeche) 4px 7px
  );
}

.bro-verlauf-schluessel {
  display: inline-block;
  width: var(--bro-abstand-8);
  height: var(--bro-abstand-8);
  margin-right: var(--bro-abstand-4);
}

.bro-verlauf-prognose {
  background: var(--bro-daten-flaeche);
  border: 1.5px dashed var(--bro-datenreihe-1);
  border-bottom: 0;
}

.bro-verlauf-spanne {
  position: absolute;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  bottom: var(--spanne-unten);
  height: var(--spanne-hoehe);
  background: var(--bro-akzent-text);
}

.bro-verlauf-luecke {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 0;
  height: 2px;
  background: var(--bro-linie-stark);
}

.bro-verlauf-achse {
  font-size: var(--bro-schrift-augenbraue-groesse);
  line-height: var(--bro-schrift-augenbraue-zeilenhoehe);
  color: var(--bro-tinte-2);
  text-align: center;
}

.bro-verlauf-achse span {
  min-width: 0;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

.bro-verlauf-bezug {
  color: var(--bro-tinte-1);
  font-weight: var(--bro-schrift-betont-gewicht);
}

.bro-verlauf-legende {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-4) var(--bro-abstand-16);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--bro-schrift-klein-groesse);
  color: var(--bro-tinte-2);
}

@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (max-height: 479px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (orientation: portrait) {
  .bro-auswertung {
    gap: var(--bro-abstand-24);
  }

  .bro-auswertung-felder {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bro-auswertung-feld {
    padding: var(--bro-abstand-12);
  }

  .bro-verlauf-flaeche {
    height: calc(var(--bro-abstand-32) * 4);
  }
}

/*
 * Portal-Layout (App-Schale, P1-002) — ausschließlich Token-Referenzen
 * (var(--bro-…), B14.7/B17); Farb-Literale weist die Token-Wache ab.
 * Wird zusammen mit tokens.css und @bro/ui in /stile.css gebündelt.
 */

* {
  box-sizing: border-box;
}

body.portal-boden {
  margin: 0;
  min-height: 100vh;
  background: var(--bro-flaeche-0);
  color: var(--bro-tinte-1);
  font-family: var(--bro-schrift-familie);
  font-size: var(--bro-schrift-fliesstext-groesse);
  line-height: var(--bro-schrift-fliesstext-zeilenhoehe);
}

/* Die Marke oben auf Anmelde- und Hinweiskarten: das BroDesk-Logo allein,
   ohne Firmenlogo (`PORTAL_MARKE` in `seiten.ts`), so groß wie in der
   Konsolen-Leiste; die Breite folgt dem Seitenverhältnis des Originals.
   Auch schmal bleibt es in der Karte: Die frühere Regel, die `.portal-marke`
   dort oben links an den Bildschirmrand setzte, stammte aus der Zeit, als der
   Portal-Kopf diese Klasse trug (heute `.portal-logo-kopf`), und traf zuletzt
   nur noch die Karten. */
.portal-marke {
  margin: 0;
}

.portal-marke > .bro-desk-logo {
  display: block;
  width: auto;
  height: var(--bro-logo-brodesk-allein);
}

/*
 * Grundstil (#9044) — das Auffangnetz für Elemente ohne eigene Klasse. Das alte Bro
 * bekam es über den Tailwind-Grundstil (`site.input.css:1`); hier fehlte es, und so
 * erschienen 603 Verweise in Browser-Blau mit Unterstrich, 65 Knöpfe als graue
 * Systemknöpfe und 150 Überschriften samt 93 Listen in Browser-Größe (Befunde F1,
 * F6, F7 in `docs/befunde/2026-10-13-bro-wie-alt/quer-look-and-feel.md`).
 *
 * Diese Regeln setzen ausschließlich Tokens ein und lassen das Aussehen unberührt:
 * Sie geben Elementen, die keines hatten, die Gestalt der Bausteine, die es schon
 * gibt (Zweitknopf, Eingabefeld, Tabelle). Alles steht in `:where(…)` und hat damit
 * die Spezifität null: Jede Klasse einer Seite oder eines Bausteins gewinnt, der
 * Grundstil ist nur das Netz darunter.
 */

:where(body.portal-boden a) {
  color: inherit;
  text-decoration: none;
}

/* Ein Verweis ohne Klasse (im Inhalt, auf der Anmeldung, in Hinweisen): Akzentfarbe,
   Unterstrich erst beim Überfahren (Alt `text-brand-600 hover:underline`). Der Name
   in einer Liste trägt eine Schriftklasse und bleibt Haupttext, hebt sich beim
   Überfahren in Akzent ab. */
:where(body.portal-boden a:not([class])) {
  color: var(--bro-akzent-text);
}

:where(body.portal-boden a:not([class]):hover) {
  text-decoration: underline;
}

:where(.portal-inhalt a.bro-text-betont:hover, .portal-inhalt a.bro-text-fliesstext:hover) {
  color: var(--bro-akzent-text);
}

:where(body.portal-boden a:focus-visible) {
  outline: var(--bro-fokus-breite) solid var(--bro-akzent);
  outline-offset: var(--bro-fokus-abstand);
  border-radius: var(--bro-radius-s);
}

/* Überschriften ohne Klasse: Abschnitt (h2) und Unterabschnitt (h3) in den Stufen
   `titel` und `betont`. Als Kind der Inhaltsfläche trägt deren Abstand, sonst gilt ein
   Abstand aus der Skala; die erste Überschrift einer Karte klebt oben. */
:where(.portal-inhalt h2:not([class])) {
  margin: var(--bro-abstand-16) 0 var(--bro-abstand-8);
  color: var(--bro-tinte-1);
  font-size: var(--bro-schrift-titel-groesse);
  line-height: var(--bro-schrift-titel-zeilenhoehe);
  font-weight: var(--bro-schrift-titel-gewicht);
}

:where(.portal-inhalt h3:not([class])) {
  margin: var(--bro-abstand-12) 0 var(--bro-abstand-8);
  color: var(--bro-tinte-1);
  font-size: var(--bro-schrift-betont-groesse);
  line-height: var(--bro-schrift-betont-zeilenhoehe);
  font-weight: var(--bro-schrift-betont-gewicht);
}

:where(.portal-inhalt :is(h2, h3):not([class]):first-child) {
  margin-top: 0;
}

:where(.portal-inhalt > :is(h2, h3):not([class])) {
  margin-block: 0;
}

/* Listen ohne Klasse: Punkte bleiben, Einzug und Abstände kommen aus der Skala. */
:where(.portal-inhalt :is(ul, ol):not([class])) {
  margin: 0;
  padding-left: var(--bro-abstand-24);
}

:where(.portal-inhalt :is(ul, ol):not([class]) > li + li) {
  margin-top: var(--bro-abstand-4);
}

:where(.portal-inhalt hr) {
  margin: var(--bro-abstand-16) 0;
  border: 0;
  border-top: 1px solid var(--bro-linie);
}

/* Knöpfe ohne Klasse sehen aus wie der Zweitknopf (`.bro-knopf--sekundaer`). */
:where(
  .portal-inhalt button:not([class]),
  .portal-inhalt input:is([type="submit"], [type="button"], [type="reset"]):not([class])
) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bro-abstand-8);
  min-height: var(--bro-abstand-32);
  padding: var(--bro-abstand-8) var(--bro-abstand-16);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
  background: var(--bro-flaeche-1);
  color: var(--bro-tinte-1);
  font-family: inherit;
  font-size: var(--bro-schrift-betont-groesse);
  line-height: var(--bro-schrift-betont-zeilenhoehe);
  font-weight: var(--bro-schrift-betont-gewicht);
  cursor: pointer;
  transition:
    background-color 120ms ease,
    border-color 120ms ease;
}

:where(
  .portal-inhalt button:not([class]):hover,
  .portal-inhalt input:is([type="submit"], [type="button"], [type="reset"]):not([class]):hover
) {
  background: var(--bro-flaeche-0);
  border-color: var(--bro-tinte-2);
}

:where(
  .portal-inhalt button:not([class]):active,
  .portal-inhalt input:is([type="submit"], [type="button"], [type="reset"]):not([class]):active
) {
  transform: translateY(1px);
}

:where(
  .portal-inhalt button:not([class]):disabled,
  .portal-inhalt input:is([type="submit"], [type="button"], [type="reset"]):not([class]):disabled
) {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Felder ohne Klasse bekommen Rand, Ecke und Schrift des Eingabefelds (`.bro-eingabefeld`). */
:where(
  .portal-inhalt
    :is(input, select, textarea):not([class]):not(
      [type="checkbox"],
      [type="radio"],
      [type="hidden"],
      [type="submit"],
      [type="button"],
      [type="reset"],
      [type="file"],
      [type="range"],
      [type="color"]
    )
) {
  min-height: var(--bro-abstand-32);
  padding: var(--bro-abstand-8) var(--bro-abstand-12);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-s);
  background: var(--bro-flaeche-1);
  color: var(--bro-tinte-1);
  font-family: inherit;
  font-size: var(--bro-schrift-fliesstext-groesse);
  line-height: var(--bro-schrift-fliesstext-zeilenhoehe);
}

:where(.portal-inhalt :is(input, select, textarea):not([class]):focus-visible) {
  outline: var(--bro-fokus-breite) solid var(--bro-akzent);
  outline-offset: 0;
  border-color: var(--bro-akzent);
}

/* Ankreuzfelder in der Akzentfarbe statt im Browser-Blau. */
:where(body.portal-boden input:is([type="checkbox"], [type="radio"])) {
  accent-color: var(--bro-akzent);
}

:where(.portal-inhalt fieldset:not([class])) {
  min-width: 0;
  margin: 0;
  padding: var(--bro-abstand-12) var(--bro-abstand-16);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
}

:where(.portal-inhalt fieldset:not([class]) > legend) {
  padding: 0 var(--bro-abstand-4);
  font-weight: var(--bro-schrift-betont-gewicht);
}

/* Tabellen ohne Klasse: dieselbe Gestalt wie `.bro-tabelle`. */
:where(.portal-inhalt table:not([class])) {
  width: 100%;
  border-collapse: collapse;
}

:where(.portal-inhalt table:not([class]) :is(th, td)) {
  padding: var(--bro-abstand-8) var(--bro-abstand-12);
  border-bottom: 1px solid var(--bro-linie);
  text-align: left;
}

:where(.portal-inhalt table:not([class]) th) {
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-fein-groesse);
  line-height: var(--bro-schrift-fein-zeilenhoehe);
  font-weight: var(--bro-schrift-fein-gewicht);
  letter-spacing: var(--bro-schrift-fein-laufweite);
  text-transform: uppercase;
}

/* Code und Vorformatiertes bricht um, statt die Seite zu weiten. Die Festbreitenschrift
   bleibt die des Browsers (`pre`, `code`, `kbd`): keine zweite Schrift im Bündel. */
:where(.portal-inhalt :is(code, pre, kbd)) {
  font-size: var(--bro-schrift-klein-groesse);
}

:where(.portal-inhalt pre) {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Inhaltsfläche: höchstens 80 rem breit und mittig (Alt `max-w-7xl mx-auto`,
   `Pages/Kunden/Index.cshtml:11`). Ohne Grenze zog jede Liste auf einem breiten
   Bildschirm über die ganze Breite (Befund F9). Die Breite ist ein Gestaltungsmaß,
   keine Betriebsgrenze. */
.portal-inhalt {
  width: 100%;
  max-width: 80rem;
  margin-inline: auto;
}

/*
 * Klassen, die Seiten benutzen, zu denen es bisher keine Regel gab (Befund F8):
 * Verlauf einer Rechnung, Kommentare einer Aufgabe, Wartelisten-Empfänger,
 * Einrichtungsschritte, Vorlagenergebnis und die Nutzlast eines Auftrags fielen auf
 * die Browser-Gestalt zurück. Gestaltet mit denselben Tokens wie der Rest.
 */

.portal-beleg-korrektur,
.portal-berichte-vorlagenergebnis {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
  min-width: 0;
}

/* Fortschrittsbalken der Einrichtung wie im Alt (`Einrichtung.cshtml`, #9036). */
.portal-einrichtung-fortschritt {
  display: block;
  width: 100%;
  margin: var(--bro-abstand-8) 0 var(--bro-abstand-16);
  accent-color: var(--bro-akzent);
}

.portal-kommentarliste,
.portal-empfaenger-liste,
.portal-einrichtung-liste {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
  margin: 0;
  padding: 0;
  list-style: none;
}

.portal-kommentar,
.portal-empfaenger,
.portal-einrichtung-schritt {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
  min-width: 0;
  padding: var(--bro-abstand-12) var(--bro-abstand-16);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
  background: var(--bro-flaeche-1);
}

.portal-kommentar > p,
.portal-einrichtung-schritt > p {
  margin: 0;
}

.portal-empfaenger form {
  margin-top: var(--bro-abstand-8);
}

.portal-kommentar-text,
.portal-aufgabe-beschreibung {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.portal-nutzlast {
  max-width: 100%;
  margin: 0;
  padding: var(--bro-abstand-12) var(--bro-abstand-16);
  overflow-x: auto;
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-s);
  background: var(--bro-flaeche-0);
  color: var(--bro-tinte-1);
  font-size: var(--bro-schrift-klein-groesse);
  line-height: var(--bro-schrift-klein-zeilenhoehe);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Anmelde-Seite */

.portal-anmeldung {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--bro-abstand-24);
}

.portal-anmeldung-karte {
  width: 100%;
  max-width: 24rem;
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
}

/*
 * Passkey-Bestätigung als Fenster auf derselben Seite (#9074): dieselbe Karte
 * wie auf der Anmeldeseite, über einem abgedunkelten Hintergrund.
 */
.portal-passkey-fenster {
  width: calc(100% - 2 * var(--bro-abstand-16));
  max-width: 24rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--bro-tinte-1);
}

.portal-passkey-fenster::backdrop {
  background: color-mix(in oklab, var(--bro-tinte-1) 36%, transparent);
}

.portal-passkey-fenster > .portal-anmeldung-karte {
  box-shadow: var(--bro-schatten-dialog);
}

.portal-passkey-fenster > .portal-anmeldung-karte > :where(h2, p) {
  margin: 0;
}

.portal-anmeldung-formular {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  margin: var(--bro-abstand-8) 0 0;
}

/*
 * v10 (#5936, `docs/design-canvas/PortalAnmeldung.dc.html`): In der Karte
 * trägt ihr `gap` den Abstand, nicht die Standardränder des Browsers. `:where`
 * hält die Spezifität bei null — Klassen mit eigenem Rand
 * (`.portal-anmeldung-hinweis`, `.portal-konten-hinweis`) behalten ihn. Die
 * Rechnungsseite nutzt die Karte ohne `.portal-anmeldung` und bleibt unberührt.
 */
:where(.portal-anmeldung > .portal-anmeldung-karte) > :where(h1, p),
:where(.portal-anmeldung-kopf) > * {
  margin: 0;
}

/* Überschrift und Unterzeile rücken enger zusammen als der Rest der Karte. */
.portal-anmeldung-kopf {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
}

/* Aufklappbare Ersatzwege (Einmalcode, Demo): Kopf klickbar, Text mit Abstand. */
.portal-anmeldung-hilfe > summary {
  cursor: pointer;
}

.portal-anmeldung-hilfe > p {
  margin: var(--bro-abstand-8) 0 0;
}

/* Hilfe-Link der Anmeldung (P2-006, Präzisierung 2): dezent unter dem Knopf. */
.portal-anmeldung-hilfe {
  color: var(--bro-tinte-2);
}

.portal-anmeldung-hilfe:hover {
  color: var(--bro-akzent);
}

.portal-anmeldung-hinweis {
  margin: var(--bro-abstand-8) 0 0;
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-8);
}

/* Öffentliche Umfrage */

.portal-umfrage {
  max-width: 40rem;
  margin: 0 auto;
  padding: var(--bro-abstand-24);
}

.portal-umfrage-formular {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
}

/* Öffentliches Lead-Formular (#7155) — dieselbe schmale Spalte ohne
   App-Schale wie die Umfrage darüber; Abstände nur über Tokens (B14.7). */

.portal-lead-formular {
  max-width: 40rem;
  margin: 0 auto;
  padding: var(--bro-abstand-24);
}

.portal-lead-formular form,
.portal-lead-formular-schritt {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
}

/* Lead-Einstellungen (#7156) — dieselbe Bauart wie die Umfragepflege:
   Spalten mit Abständen aus Tokens, keine eigenen Farben. */

.portal-leadgen,
.portal-leadgen-liste,
.portal-leadgen-abschnitt,
.portal-leadgen-anlegen,
.portal-leadgen-bearbeiten,
.portal-leadgen-freigabe {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
}

.portal-leadgen-liste {
  list-style: none;
  padding: 0;
}

.portal-leadgen-schalter,
.portal-leadgen-loeschen,
.portal-leadgen-schluessel-erneuern {
  display: inline-block;
  margin-right: var(--bro-abstand-8);
}

.portal-leadgen-schluessel {
  padding: var(--bro-abstand-12);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-s);
  background: var(--bro-flaeche-1);
}

.portal-leadgen-einsendungen {
  width: 100%;
  border-collapse: collapse;
}

.portal-leadgen-einsendung {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--bro-abstand-8) var(--bro-abstand-12);
}

/* Öffentlicher Willkommens-Upload (#4256).
   Dieselbe Bauart wie die öffentliche Umfrage darüber: eine schmale Spalte
   ohne App-Schale, denn der Kunde hat keine Sitzung und sieht keine
   Navigation. Farben und Abstände ausschließlich über Tokens (B14.7) — in
   dieser Datei steht kein Farbliteral. */

.portal-willkommen {
  max-width: 44rem;
  margin: 0 auto;
  padding: var(--bro-abstand-24);
}

.portal-willkommen-schritte,
.portal-willkommen-unterlagen,
.portal-willkommen-eingegangen {
  margin-top: var(--bro-abstand-24);
}

.portal-willkommen-formular {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
  margin-top: var(--bro-abstand-24);
}

/* Die Grenzen und der Verbrauch stehen VOR dem Absenden da, nicht erst in der
   Absage — deshalb ruhiger gesetzt als der Fließtext, aber lesbar. */
.portal-willkommen-grenzen,
.portal-willkommen-verbrauch,
.portal-willkommen-frist,
.portal-willkommen-fuer,
.portal-willkommen-groesse {
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
}

/* Kundenname unter dem Titel und Fußsatz wie im Alt (#9118,
   `Pages/Willkommen.cshtml:22-25`, `:118-121`). */
.portal-willkommen-fuss {
  margin-top: var(--bro-abstand-24);
  padding-top: var(--bro-abstand-12);
  border-top: 1px solid var(--bro-linie);
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
}

.portal-willkommen-fertig {
  margin-top: var(--bro-abstand-12);
  padding: var(--bro-abstand-12);
  border-radius: var(--bro-radius-s);
  background: var(--bro-flaeche-1);
}

/* Angemeldete Umfragepflege (#2913) */

.portal-umfragen,
.portal-umfrage-liste,
.portal-umfrage-anlegen,
.portal-umfrage-aendern {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
}

.portal-umfrage-liste {
  margin-top: var(--bro-abstand-24);
}

.portal-umfrage-pflege header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bro-abstand-12);
}

.portal-umfrage-aktivierung {
  margin-top: var(--bro-abstand-12);
}

/* Marketing-Inhalte (#6355): Mediathek, Beiträge, Briefings, Blog, Listen, Freigaben */

.portal-marketing {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-16);
}

/* Reiter und Filter sind seit #7404 (Scheibe 4g von #6744) gemeinsame
   `portal-chips` mit `bro-filter-chip`, die Rückmeldung ein `portal-meldung`,
   der Leerzustand `portal-leer` — hier steht nur noch die Anordnung. */

/* Kanal-Attribution, Lebenszyklus und Wirkung (#7165) */

.portal-marketing-attribution,
.portal-marketing-lebenszyklus,
.portal-marketing-wirkung,
.portal-marketing-wirkung-kanaele,
.portal-marketing-wirkung-kampagnen,
.portal-marketing-wirkung-agenten {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
}

.portal-marketing-zeitraum {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-8);
}

.portal-marketing-zeitraum [data-aktiv] {
  font-weight: var(--bro-schrift-betont-gewicht);
  color: var(--bro-akzent);
}

.portal-marketing-wirkung-summen {
  display: grid;
  grid-template-columns: max-content max-content;
  gap: var(--bro-abstand-4) var(--bro-abstand-12);
}

.portal-marketing-wirkung-kanaltabelle,
.portal-marketing-wirkung-kampagnentabelle,
.portal-marketing-wirkung-agententabelle {
  width: 100%;
}

.portal-mediathek-hochladen,
.portal-beitrag-anlegen,
.portal-briefing-anlegen,
.portal-blog-anlegen,
.portal-liste-anlegen,
.portal-liste-mitglied-aufnehmen {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
}

.portal-marketing-uebersicht,
.portal-beitraege-liste,
.portal-briefings-liste,
.portal-blog-liste,
.portal-listen-liste,
.portal-liste-mitglieder,
.portal-freigaben-liste {
  width: 100%;
}

.portal-mediathek-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: var(--bro-abstand-12);
  list-style: none;
  padding: 0;
}

.portal-mediathek-medium {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
}

.portal-mediathek-vorschau {
  max-width: 100%;
  max-height: 12rem;
  object-fit: contain;
  border-radius: var(--bro-radius-s);
}

.portal-mediathek-detail,
.portal-beitrag-detail,
.portal-briefing-detail,
.portal-blog-detail,
.portal-liste-detail,
.portal-webinar-detail,
.portal-webinar-bearbeiten {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
}

.portal-beitrag-text,
.portal-blog-text,
.portal-webinar-beschreibung {
  white-space: pre-wrap;
}

/* Jeder Handgriff ein eigenes Formular — nebeneinander wie bei den Fragerunden. */
.portal-beitrag-zustand,
.portal-briefing-zustand,
.portal-blog-zustand,
.portal-beitrag-freigabe,
.portal-briefing-freigabe,
.portal-blog-freigabe,
.portal-webinar-freigabe,
.portal-freigabe-entscheiden,
.portal-mediathek-loeschen,
.portal-beitrag-loeschen,
.portal-briefing-loeschen,
.portal-blog-loeschen,
.portal-liste-loeschen,
.portal-webinar-loeschen {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-8);
}

/* Fragerunden-Moderation (#5099) */

.portal-fragerunde-anlegen {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
}

/*
 * Die Handgriffe stehen NEBENEINANDER in der Zelle und brechen um, wenn der
 * Platz nicht reicht. Jeder ist ein eigenes Formular — ein `<form>` je Knopf
 * ist der Preis dafür, dass die Seite ohne JavaScript auskommt (ADR-0003),
 * und ohne `inline-flex` stünden sie untereinander wie eine Liste.
 */
.portal-fragerunde-handgriff {
  display: inline-flex;
  margin-right: var(--bro-abstand-8);
}

/* Öffentlicher Fragerunden-Weg (#5100) — dieselbe schmale Spalte wie die
   öffentliche Umfrage darüber: eine Ein-Aufgaben-Seite für Gäste ohne Sitzung,
   überwiegend am Telefon geöffnet, und zwar IM SAAL mit einer Hand. */

.portal-fragerunde {
  max-width: 40rem;
  margin: 0 auto;
  padding: var(--bro-abstand-24);
}

.portal-fragerunde-stellen {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
}

/* Ohne Aufzählungszeichen und ohne Einzug: Die Fragen sind Karten, keine
   Gliederung. */
.portal-fragerunde-fragen {
  list-style: none;
  margin: var(--bro-abstand-16) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
}

/*
 * Die BÜHNE hängt am Beamer, nicht am Telefon: Sie füllt die Höhe und zentriert
 * ihren Inhalt, damit die hervorgehobene Frage aus der letzten Reihe lesbar
 * bleibt. Die Schriftgröße kommt aus dem größten Token statt aus einer festen
 * Zahl (B14.7) — ein fester Pixelwert träfe weder eine Leinwand noch ein
 * Tablet.
 */
.portal-fragerunde-buehne {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--bro-abstand-24);
  padding: var(--bro-abstand-24);
  text-align: center;
}

.portal-fragerunde-einladung {
  font-size: var(--bro-schrift-anzeige-groesse);
  line-height: var(--bro-schrift-anzeige-zeilenhoehe);
  color: var(--bro-tinte-2);
}

/* Der QR-Code bekommt eine feste Kante: Ein SVG ohne Breite wüchse auf die
   volle Spaltenbreite, und ein QR-Code wird davon nicht besser lesbar, nur
   größer. 14rem ist rund die Hälfte der Lesespalte — genug, um ihn aus einem
   Meter Abstand zu scannen, und wenig genug, dass Titel und Einladung darüber
   sichtbar bleiben. Der Girocode im Beleg nutzt aus demselben Grund eine feste
   Kante (28 mm, `belegbild.ts`), nur in Druckmaß statt in Bildschirmmaß. */
.portal-fragerunde-qr {
  display: block;
  width: 14rem;
  max-width: 100%;
  height: auto;
}

/* Öffentliche Buchungsseite (#2064) — bewusst dieselbe schmale Spalte wie die
   öffentliche Umfrage: Beide sind Ein-Aufgaben-Seiten für Gäste ohne Sitzung,
   und beide werden überwiegend am Telefon geöffnet. */

.portal-buchung {
  max-width: 40rem;
  margin: 0 auto;
  padding: var(--bro-abstand-24);
}

/* Die Meldung der Buchungsseiten ist der gemeinsame `portal-meldung`-Kasten
   (`data-fehler` bei `role="alert"`, sonst `data-warnung`; #7688). Hier steht
   nur der Abstand: Die Seite reiht ihre Absätze ohne Abstandsraster, und der
   Kasten selbst trägt `margin: 0`. */
.portal-buchung .portal-meldung {
  margin: var(--bro-abstand-12) 0;
}

.portal-buchung-gewaehlt {
  margin: 0 0 var(--bro-abstand-12);
  font-weight: var(--bro-schrift-betont-gewicht);
}

.portal-buchung-bestaetigt {
  margin: var(--bro-abstand-12) 0;
  font-size: var(--bro-schrift-titel-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
}

/* Die drei Auswahllisten. Sie sind `<ol>`, weil die Reihenfolge trägt (nächste
   Tage, aufsteigende Uhrzeiten) — die Zählmarke selbst wäre dabei nur Lärm. */

.portal-buchung-leistungen,
.portal-buchung-tage,
.portal-buchung-zeiten {
  list-style: none;
  margin: var(--bro-abstand-12) 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
}

/* Die Zeiten liegen nebeneinander: An einem offenen Tag sind es leicht zwanzig,
   und untereinander wären sie eine Scrollstrecke. Genau daran ist die
   Alt-Buchungsseite gemessen worden (21.593 px Seitenhöhe, #2064). */

.portal-buchung-zeiten {
  flex-direction: row;
  flex-wrap: wrap;
}

/* Der Titel eines Tages im Überblick („3 frei“ / „wenige frei“, #2681). */

.portal-buchung-tagestitel {
  color: var(--bro-tinte-2);
}

/* Der Knappheitshinweis. Er ist eine AUSSAGE an die Kundin und wird deshalb
   betont, nicht versteckt — der Text selbst kommt wörtlich aus dem Fachkern. */

.portal-buchung-knappheit {
  margin: 0 0 var(--bro-abstand-8);
  font-weight: var(--bro-schrift-betont-gewicht);
}

/* Die Blätter-Navigation unter dem Tagesüberblick (#4532): „Vorherige Tage“ und
   „Weitere Tage“, durch ein Mittelpunkt-Trennzeichen verbunden. Sie bekommt nur
   den senkrechten Abstand der Listen darüber und sonst NICHTS — kein Rahmen,
   keine eigene Farbe, kein `display: flex`. Das ist Absicht: Die beiden Links
   und ihr Trennzeichen sind ein Fließtext-Gebilde, das der Autor der Seite so
   gebaut hat; ein Flex-Kontext machte aus dem „ · “ ein eigenes Element und
   verschöbe seinen Abstand. Die Blätterung führt die Seite nicht, sie schließt
   sie ab. */

.portal-buchung-tage-navigation {
  margin: var(--bro-abstand-12) 0;
}

.portal-buchung-dauer {
  color: var(--bro-tinte-2);
}

/* Das Bild einer Leistung in der Auswahl der Buchungsseite (#6509), wie im
   Alt: ein Foto füllt seine Fläche, ein Produkt steht freigestellt — der
   weiße Hintergrund der Datei verschwindet über `multiply`, ohne dass jemand
   das Bild bearbeiten muss. Keine Farbe, keine feste Schrift (B14.7). */
.portal-buchung-bild {
  display: block;
  inline-size: 100%;
  max-inline-size: 20rem;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--bro-radius-m);
  margin-block-end: var(--bro-abstand-8);
}

.portal-buchung-bild--produkt {
  aspect-ratio: 4 / 3;
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* Der Listenpreis einer Leistung auf der Buchungsseite (#6507). */
.portal-buchung-preis {
  font-weight: var(--bro-schrift-betont-gewicht);
}

.portal-buchung-formular {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
}

/* Der Verwalten-Link auf der Bestätigung (#7035). Er wird ausgeschrieben, damit
   die Kundin ihn ablegen kann; eine lange Adresse darf die schmale Spalte
   nicht sprengen. */
.portal-buchung-verwalten {
  margin: var(--bro-abstand-16) 0;
  overflow-wrap: anywhere;
}

/* Die Verwalten-Seite der Kundin (#7035) — dieselbe Spalte wie die Buchung.
   Absage und Verschieben sind zwei getrennte Abschnitte, damit niemand den
   falschen Knopf für den richtigen hält. */
.portal-verwalten-absage,
.portal-verwalten-verschieben {
  margin: var(--bro-abstand-24) 0;
  padding-block-start: var(--bro-abstand-16);
  border-block-start: 1px solid var(--bro-linie);
}

.portal-verwalten-absage form,
.portal-verwalten-zeiten {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
}

.portal-verwalten-frist {
  color: var(--bro-tinte-2);
}

.portal-verwalten-erledigt {
  margin: var(--bro-abstand-12) 0;
  font-size: var(--bro-schrift-titel-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
}

/* Der Erstattungsausgang nach einer Absage über den Link (#7452). */
.portal-verwalten-erstattung {
  margin: var(--bro-abstand-12) 0;
}

/* App-Rahmen wie im Alt (#9042, `_Layout.cshtml:736-1306`): links die
   Seitenleiste in voller Höhe, die klebt und in sich scrollt; rechts die
   Hauptspalte mit klebender Kopfleiste über der vollen Breite. Die Seite
   selbst scrollt im Fenster, die Leiste bleibt stehen. */

.portal-schale {
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr);
  min-height: 100vh;
}

.portal-seitenleiste {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
  /* Auf Staging steht unten die Abschlussleiste (#10066, `vorfuehr-leiste.ts`)
     und nennt ihre Höhe als `--bvl-platz`; ohne sie bleibt es bei 100vh. */
  height: calc(100vh - var(--bvl-platz, 0px));
  padding: var(--bro-abstand-16) var(--bro-abstand-12) var(--bro-abstand-12);
  background: var(--bro-flaeche-1);
  border-right: 1px solid var(--bro-linie);
}

/* Kopf aus Entwurf v10 (#8966): Firmenlogo, Strich, originale BroDesk-Marke. */
.portal-logo-kopf {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: var(--bro-logo-abstand);
  min-height: var(--bro-logo-kopf);
  min-width: 0;
}

.portal-firmenmarke {
  min-width: 0;
  overflow: hidden;
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-firmenlogo {
  display: block;
  max-width: 100%;
  width: auto;
  height: var(--bro-logo-firma);
  object-fit: contain;
}

/*
 * Das Firmenlogo passt sich Hell und Dunkel an (Wunsch Nasri, 14.10.2026).
 * Die eigentliche Anpassung macht `verhalten.js` (`app-marke/logo-verhalten.ts`):
 * Es entfernt einen weißen Hintergrund, färbt Grautöne je Modus um und tauscht
 * das Bild beim Wechsel des Farbschemas. Bleibt danach viel farbiges Dunkles
 * bzw. Helles übrig, setzt es `data-logo-anpassung` für den GERADE geltenden
 * Modus, und hier kommt eine Unterlage darunter. Ihre Farbe
 * (`--bro-firmenlogo-unterlage`) ist im Hellmodus dunkel, im Dunkelmodus hell.
 * Ohne Skript fehlt das Merkmal, und das Logo steht unverändert.
 */
.portal-firmenlogo[data-logo-anpassung^="unterlage-"] {
  padding: var(--bro-abstand-4);
  background: var(--bro-firmenlogo-unterlage);
}

.portal-logo-strich {
  flex: 0 0 1px;
  height: var(--bro-logo-strich);
  background: var(--bro-linie-stark);
}

.portal-logo-kopf > .bro-desk-logo {
  display: block;
  flex: none;
  width: auto;
  height: var(--bro-logo-brodesk);
}

/* Der Einklapp-Knopf: rund, schwebt am rechten Rand der Leiste (Alt
   `.sidebar-floating-toggle`, `site.input.css:338-360`). */
.portal-leiste-knopf {
  position: absolute;
  top: calc(var(--bro-logo-kopf) + var(--bro-abstand-16));
  right: calc(-1 * var(--bro-abstand-12));
  z-index: 31;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-rund);
  background: var(--bro-flaeche-1);
  color: var(--bro-tinte-2);
  box-shadow: var(--bro-schatten-menue);
  cursor: pointer;
}

.portal-leiste-knopf:hover {
  color: var(--bro-tinte-1);
}

.portal-leiste-knopf:focus-visible {
  outline: 2px solid var(--bro-akzent);
  outline-offset: 2px;
}

.portal-leiste-knopf .bro-symbol {
  width: 14px;
  height: 14px;
}

.portal-leiste-knopf-zu,
.portal-leiste-knopf-auf {
  display: inline-flex;
}

.portal-leiste-knopf-auf,
:root[data-leiste="schmal"] .portal-leiste-knopf-zu {
  display: none;
}

:root[data-leiste="schmal"] .portal-leiste-knopf-auf {
  display: inline-flex;
}

/* Die Navigation scrollt in sich; den Scrollstand merkt sich das Skript. */
.portal-navigation {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  min-height: 0;
  margin: 0 calc(-1 * var(--bro-abstand-4));
  padding: 0 var(--bro-abstand-4);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Eine Gruppe: natives <details>, Titel 11 px Versalien grau mit Pfeil
   (Alt `.sidebar-section`, `site.input.css:317-325`). Das Gruppen-Skript der
   Firmengruppe legt zusätzlich gewöhnliche <div class="portal-nav-gruppe">
   an; für sie gilt die Spalte darunter. */
.portal-nav-gruppe {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

details.portal-nav-gruppe {
  display: block;
}

.portal-nav-gruppentitel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bro-abstand-8);
  margin: 0;
  padding: var(--bro-abstand-4) var(--bro-abstand-8);
  color: var(--bro-tinte-3);
  font-size: var(--bro-schrift-gruppentitel-groesse);
  font-weight: var(--bro-schrift-gruppentitel-gewicht);
  letter-spacing: var(--bro-schrift-gruppentitel-laufweite);
  line-height: var(--bro-schrift-gruppentitel-zeilenhoehe);
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}

.portal-nav-gruppentitel::-webkit-details-marker {
  display: none;
}

.portal-nav-gruppentitel:hover {
  color: var(--bro-tinte-1);
}

.portal-nav-gruppentitel:focus-visible {
  outline: 2px solid var(--bro-akzent);
  outline-offset: -2px;
}

.portal-nav-pfeil {
  width: 14px;
  height: 14px;
  transform: rotate(-90deg);
  transition: transform 120ms ease;
}

.portal-nav-gruppe[open] > .portal-nav-gruppentitel .portal-nav-pfeil {
  transform: none;
}

.portal-nav-punkte {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-bottom: var(--bro-abstand-4);
}

/* Ein Punkt: Symbol im Kennfarben-Kasten und Name, 13 px halbfett (Anordnung
   nach Alt `site.input.css:285-316`). Der Kasten bleibt die Optik v10
   (#5816), bis Nasri die Frage „Bunte Menüsymbole" beantwortet (#9050). */
.portal-navigation .bro-navigationspunkt,
.portal-seitenleiste-fuss .bro-navigationspunkt {
  gap: 10px;
  padding: 7px var(--bro-abstand-8);
  border: 1px solid transparent;
  color: var(--bro-tinte-1);
  font-size: var(--bro-schrift-klein-groesse);
  line-height: var(--bro-schrift-klein-zeilenhoehe);
  font-weight: var(--bro-schrift-betont-gewicht);
}

.portal-symbolkasten {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  /* Kasten hinter einem Symbol: der einzige Radius der eckigen Formensprache
     (--bro-radius-symbol, #5816). */
  border-radius: var(--bro-radius-symbol);
  background: color-mix(in srgb, var(--portal-kachel) 13%, var(--bro-flaeche-1));
  color: var(--portal-kachel);
}

.portal-symbolkasten .bro-symbol {
  width: 14px;
  height: 14px;
}

/* Aktiver Punkt: heller Markenton mit feinem Innenrand (Alt
   `site.input.css:307-316`). */
.portal-navigation .bro-navigationspunkt[aria-current="page"] {
  border-color: color-mix(in srgb, var(--bro-akzent) 22%, transparent);
  background: var(--bro-akzent-flaeche);
  color: var(--bro-akzent-text);
}

/* Ein eingerückter Unterpunkt kommt aus der Leiste nicht mehr (#9042); die
   Regel bleibt für das Gruppen-Skript, das die Klasse noch prüft. */
.portal-navigation .bro-navigationspunkt.portal-nav-unterpunkt {
  padding-inline-start: calc(var(--bro-abstand-8) + var(--bro-abstand-24));
}

.portal-nav-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Firmengruppe (#8919): Das Gruppen-Skript (`firmengruppe/verhalten.ts`)
   legt oben „Alle Firmen“ (`.portal-gruppen-alle`) und am Ende je
   Schwesterfirma einen aufklappbaren Abschnitt in die Leiste. Im Abschnitt
   steht ein gewöhnliches `.portal-nav-gruppe`, damit die Punkte wie die
   eigenen aussehen. Der Titel sieht aus wie `.portal-nav-gruppentitel`. */
.portal-gruppen-abschnitt-titel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bro-abstand-8);
  margin: 0 0 var(--bro-abstand-4);
  padding: var(--bro-abstand-4) var(--bro-abstand-8);
  color: var(--bro-tinte-3);
  font-size: var(--bro-schrift-gruppentitel-groesse);
  font-weight: var(--bro-schrift-gruppentitel-gewicht);
  letter-spacing: var(--bro-schrift-gruppentitel-laufweite);
  line-height: var(--bro-schrift-gruppentitel-zeilenhoehe);
  text-transform: uppercase;
  overflow-wrap: anywhere;
  cursor: pointer;
  list-style: none;
}

.portal-gruppen-abschnitt-titel:hover {
  color: var(--bro-tinte-1);
}

.portal-nav-zahl {
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
  font-variant-numeric: tabular-nums;
}

/* Am Fuß „Sidebar gestalten“ unter einem Trennstrich (Alt
   `_Layout.cshtml:956-964`); auf dem Handy zusätzlich „Menü schließen“. */
.portal-seitenleiste-fuss {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: var(--bro-abstand-4);
  padding-top: var(--bro-abstand-8);
  border-top: 1px solid var(--bro-linie);
}

.portal-leiste-gestalten {
  width: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
}

.portal-leiste-gestalten .bro-symbol {
  width: 20px;
  height: 20px;
  color: var(--bro-tinte-2);
}

.portal-leiste-schliessen,
.portal-leiste-abdunklung {
  display: none;
}

/* Eingeklappt auf Symbole (Alt 68 px): Namen nur noch als Zugänglichkeitstext,
   Gruppentitel werden zu einer feinen Trennlinie, die weiter auf- und
   zuklappt. */
:root[data-leiste="schmal"] .portal-schale {
  grid-template-columns: 68px minmax(0, 1fr);
}

:root[data-leiste="schmal"] .portal-seitenleiste {
  padding-inline: var(--bro-abstand-8);
}

:root[data-leiste="schmal"] .portal-firmenmarke:has(.portal-firmenlogo) ~ .bro-desk-logo,
:root[data-leiste="schmal"] .portal-logo-strich,
:root[data-leiste="schmal"] .portal-firmenmarke:not(:has(.portal-firmenlogo)) {
  display: none;
}

:root[data-leiste="schmal"] .portal-logo-kopf > .bro-desk-logo,
:root[data-leiste="schmal"] .portal-firmenlogo {
  max-width: 44px;
  height: auto;
}

:root[data-leiste="schmal"] .portal-nav-name,
:root[data-leiste="schmal"] .portal-nav-gruppentitel > :not(.portal-nav-pfeil) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

:root[data-leiste="schmal"] .portal-nav-gruppentitel {
  justify-content: center;
  padding-block: 2px;
  border-top: 1px solid var(--bro-linie);
  font-size: 0;
}

:root[data-leiste="schmal"] .portal-nav-zahl {
  display: none;
}

:root[data-leiste="schmal"] .portal-navigation .bro-navigationspunkt,
:root[data-leiste="schmal"] .portal-seitenleiste-fuss .bro-navigationspunkt {
  justify-content: center;
  padding-inline: var(--bro-abstand-4);
}

/* Firmengruppe (#8919): Die Punkte der Schwesterfirmen tragen keine Symbole;
   in der Symbolleiste stünden dort leere Flächen. Der Weg bleibt über den
   Umschalter im Kopf. */
:root[data-leiste="schmal"] .portal-gruppen-alle,
:root[data-leiste="schmal"] .portal-gruppen-abschnitt {
  display: none;
}

/* „Sidebar gestalten“: Dialog über der Seite (Alt `_SidebarWerkstatt.cshtml`). */
.portal-werkstatt {
  width: calc(100% - 2 * var(--bro-abstand-16));
  max-width: 40rem;
  max-height: calc(100vh - 2 * var(--bro-abstand-32));
  padding: 0;
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-l);
  background: var(--bro-flaeche-1);
  color: var(--bro-tinte-1);
  box-shadow: var(--bro-schatten-dialog);
}

.portal-werkstatt::backdrop {
  background: color-mix(in oklab, var(--bro-tinte-1) 36%, transparent);
}

.portal-werkstatt-kopf,
.portal-werkstatt-fuss {
  padding: var(--bro-abstand-16) var(--bro-abstand-24);
}

.portal-werkstatt-kopf {
  border-bottom: 1px solid var(--bro-linie);
}

.portal-werkstatt-titel {
  margin: 0;
  font-size: var(--bro-schrift-titel-groesse);
  font-weight: var(--bro-schrift-titel-gewicht);
}

.portal-werkstatt-hinweis {
  margin: var(--bro-abstand-4) 0 0;
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
}

.portal-werkstatt-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: var(--bro-abstand-16);
  padding: var(--bro-abstand-16) var(--bro-abstand-24);
  overflow-y: auto;
}

.portal-werkstatt-gruppe {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
  margin: 0;
  padding: var(--bro-abstand-8) var(--bro-abstand-12);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
}

.portal-werkstatt-gruppentitel {
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-4);
  padding: 0 var(--bro-abstand-4);
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-gruppentitel-groesse);
  font-weight: var(--bro-schrift-gruppentitel-gewicht);
  letter-spacing: var(--bro-schrift-gruppentitel-laufweite);
  line-height: var(--bro-schrift-gruppentitel-zeilenhoehe);
  text-transform: uppercase;
}

.portal-werkstatt-gruppentitel > span {
  flex: 1;
}

.portal-werkstatt-schieben,
.portal-werkstatt-knopf {
  padding: var(--bro-abstand-4) var(--bro-abstand-8);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
  background: var(--bro-flaeche-1);
  color: var(--bro-tinte-1);
  font: inherit;
  font-size: var(--bro-schrift-klein-groesse);
  cursor: pointer;
}

.portal-werkstatt-schieben {
  text-transform: none;
  font-weight: var(--bro-schrift-fliesstext-gewicht);
}

.portal-werkstatt-schieben:hover,
.portal-werkstatt-knopf:hover {
  background: var(--bro-flaeche-0);
}

.portal-werkstatt-knopf--primaer {
  border-color: var(--bro-akzent);
  background: var(--bro-akzent);
  color: var(--bro-akzent-tinte);
}

.portal-werkstatt-knopf--primaer:hover {
  background: var(--bro-akzent-text);
}

.portal-werkstatt-punkt {
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-8);
  font-size: var(--bro-schrift-klein-groesse);
}

.portal-werkstatt-fuss {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--bro-abstand-8);
  border-top: 1px solid var(--bro-linie);
}

.portal-werkstatt-vorlagen,
.portal-werkstatt-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-8);
}

/* Nutzermenü oben rechts in der Kopfleiste (Alt `_Layout.cshtml:1212-1287`):
   natives <details>, das Menü klappt nach UNTEN auf, rechtsbündig. */
.portal-nutzer-menue {
  position: relative;
}

.portal-nutzer {
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-8);
  padding: var(--bro-abstand-4) var(--bro-abstand-8);
  border-radius: var(--bro-radius-m);
  cursor: pointer;
  list-style: none;
}

.portal-nutzer::-webkit-details-marker {
  display: none;
}

.portal-nutzer:hover {
  background: var(--bro-flaeche-0);
}

.portal-nutzer:focus-visible {
  outline: 2px solid var(--bro-akzent);
  outline-offset: 2px;
}

.portal-nutzer .bro-symbol {
  width: 16px;
  height: 16px;
  color: var(--bro-tinte-2);
}

.portal-nutzer-avatar {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--bro-abstand-32);
  height: var(--bro-abstand-32);
  border-radius: var(--bro-radius-rund);
  background: var(--bro-akzent-flaeche);
  /* #5852 A: siehe .bro-navigationspunkt--aktiv in packages/ui/src/styles.css. */
  color: var(--bro-akzent-text);
  font-size: var(--bro-schrift-klein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
}

.portal-nutzer-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 12rem;
}

.portal-nutzer-person,
.portal-nutzer-kopf-name,
.portal-nutzer-betrieb,
.portal-nutzer-rollen {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-nutzer-betrieb,
.portal-nutzer-rollen {
  color: var(--bro-tinte-2);
}

.portal-nutzer-menue-liste {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 41;
  display: flex;
  flex-direction: column;
  min-width: 16rem;
  padding: 6px;
  background: var(--bro-flaeche-1);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
  box-shadow: var(--bro-schatten-menue);
}

.portal-nutzer-kopf {
  display: flex;
  flex-direction: column;
  padding: var(--bro-abstand-8) 10px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--bro-linie);
}

.portal-nutzer-menue-punkt {
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-8);
  width: 100%;
  padding: var(--bro-abstand-8) 10px;
  border: 0;
  background: transparent;
  color: var(--bro-tinte-1);
  font: inherit;
  font-size: var(--bro-schrift-fliesstext-groesse);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.portal-nutzer-menue-punkt:hover {
  background: var(--bro-flaeche-0);
}

.portal-nutzer-menue-punkt .bro-symbol {
  width: 16px;
  height: 16px;
}

/* Darstellung Automatisch / Hell / Dunkel: drei Knöpfe in einer Zeile. */
/* Die eigene Wahl des Designs im Nutzermenü (#9974): eine Liste von Knöpfen
   mit Überschrift; der gedrückte trägt die Akzentfläche wie ein aktiver Punkt. */
.portal-design-wahl {
  display: flex;
  flex-direction: column;
  margin-top: 6px;
  padding: 6px 0 0;
  border-top: 1px solid var(--bro-linie);
}

.portal-design-wahl-titel {
  padding: var(--bro-abstand-4) var(--bro-abstand-12);
  color: var(--bro-tinte-2);
}

.portal-design-knopf {
  width: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.portal-design-knopf[aria-pressed="true"] {
  background: var(--bro-akzent-flaeche);
  color: var(--bro-akzent-text);
}

.portal-farbschema {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--bro-abstand-4);
  margin-top: 6px;
  padding: 6px 0 0;
  border-top: 1px solid var(--bro-linie);
}

.portal-farbschema-knopf {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--bro-abstand-4);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
  background: transparent;
  color: var(--bro-tinte-2);
  font: inherit;
  font-size: var(--bro-schrift-fein-groesse);
  cursor: pointer;
}

.portal-farbschema-knopf .bro-symbol {
  width: 16px;
  height: 16px;
}

.portal-farbschema-knopf[aria-pressed="true"] {
  border-color: var(--bro-akzent);
  background: var(--bro-akzent-flaeche);
  color: var(--bro-akzent-text);
}

/* Abmelden (P2-006) steht im Menü unter einer Trennlinie, in der Fehlerfarbe
   wie im Alt. */
.portal-abmelden {
  margin: 0;
  display: flex;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--bro-linie);
}

.portal-abmelden-knopf {
  color: var(--bro-fehler);
}

/* Konto-Schublade (#4880): die Kontenliste. Der Link dorthin steht seit
   #5934 im Nutzer-Menü, seit #8957 als „Konto wechseln" (vorher „Betrieb
   wechseln", obwohl er nur Konten desselben Betriebs wechselt). */
.portal-konten {
  gap: var(--bro-abstand-12);
}

.portal-konten-hinweis {
  margin: var(--bro-abstand-8) 0;
}

.portal-konten-name {
  color: var(--bro-tinte-1);
}

.portal-konten-liste {
  list-style: none;
  margin: var(--bro-abstand-16) 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
}

.portal-konten-eintrag {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  padding: var(--bro-abstand-12);
  border-radius: var(--bro-radius-l);
  background: var(--bro-akzent-flaeche);
}

.portal-konten-kopf {
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-8);
}

.portal-konten-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-8);
}

.portal-konten-form {
  margin: 0;
}

/*
 * Die öffentliche Bewertungsseite (#2876) — eine eigene Seite ohne App-Schale,
 * wie die Abmelde-Seite darüber. Nur Tokens, keine festen Werte (B14.7).
 */
.portal-bewertung {
  margin: var(--bro-abstand-32) auto;
  max-width: 32rem;
}

/*
 * Die Raumanzeige an der Tür `/raum/<wert>` (#10466). Ein Tablet zeigt sie
 * dauerhaft, gelesen wird sie aus drei Metern: Die Größen wachsen deshalb mit
 * der kürzeren Bildschirmseite (`vmin`) — dieselbe Rechnung trägt Hoch- und
 * Querformat. Kein Rahmen, kein Menü; Farben nur über Tokens.
 */
body.portal-raumanzeige {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  box-sizing: border-box;
  padding: var(--bro-abstand-24);
  gap: var(--bro-abstand-24);
}

.portal-raumanzeige-kopf {
  min-height: 8vmin;
}

.portal-raumanzeige-logo {
  max-height: 10vmin;
  max-width: 50vw;
  object-fit: contain;
}

.portal-raumanzeige-firma {
  margin: 0;
  font-size: 4vmin;
  font-weight: var(--bro-schrift-betont-gewicht);
  color: var(--bro-tinte-2);
}

.portal-raumanzeige-inhalt {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-16);
}

.portal-raumanzeige-name {
  margin: 0;
  font-size: 8vmin;
  line-height: 1.1;
  font-weight: var(--bro-schrift-anzeige-gewicht);
}

.portal-raumanzeige-zustand {
  margin: 0;
  padding-left: var(--bro-abstand-24);
  border-left: 2vmin solid var(--bro-warnung);
  font-size: 11vmin;
  line-height: 1.1;
  font-weight: var(--bro-schrift-anzeige-gewicht);
  color: var(--bro-warnung);
}

.portal-raumanzeige-zustand[data-zustand="frei"] {
  border-left-color: var(--bro-erfolg);
  color: var(--bro-erfolg);
}

.portal-raumanzeige-zustand[data-zustand="belegt"] {
  border-left-color: var(--bro-fehler);
  color: var(--bro-fehler);
}

/* Klein, aber nicht übersehbar: ein veralteter Abgleich oder keine Verbindung. */
.portal-raumanzeige-hinweis {
  margin: 0;
  padding: var(--bro-abstand-8) var(--bro-abstand-12);
  border: 1px solid var(--bro-warnung-linie);
  border-radius: var(--bro-radius-m);
  background: var(--bro-warnung-flaeche);
  font-size: 2.6vmin;
  align-self: flex-start;
}

.portal-raumanzeige-ueberschrift {
  margin: var(--bro-abstand-16) 0 var(--bro-abstand-8);
  font-size: 4vmin;
  font-weight: var(--bro-schrift-betont-gewicht);
  color: var(--bro-tinte-2);
}

.portal-raumanzeige-termine {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  font-size: 4.2vmin;
}

.portal-raumanzeige-termine li {
  display: flex;
  gap: var(--bro-abstand-24);
  padding: var(--bro-abstand-8) 0;
  border-bottom: 1px solid var(--bro-linie);
}

.portal-raumanzeige-termine li[data-frei-markiert] {
  color: var(--bro-tinte-3);
}

.portal-raumanzeige-zeit {
  min-width: 13ch;
  font-variant-numeric: tabular-nums;
  font-weight: var(--bro-schrift-betont-gewicht);
}

.portal-raumanzeige-betreff {
  overflow-wrap: anywhere;
}

.portal-raumanzeige-leer {
  margin: 0;
  font-size: 4.2vmin;
  color: var(--bro-tinte-2);
}

/*
 * Sofort buchen an der Tür (#10467): große Knöpfe, mit dem Finger aus dem
 * Stand zu treffen — dieselbe `vmin`-Rechnung wie der Rest der Anzeige.
 */
.portal-raumanzeige-spontan {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
}

.portal-raumanzeige-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-16);
  margin: 0;
}

.portal-raumanzeige-knoepfe form {
  margin: 0;
}

.portal-raumanzeige-knoepfe .bro-knopf {
  min-width: 20vmin;
  min-height: 10vmin;
  font-size: 4.2vmin;
}

.portal-raumanzeige-meldung {
  margin: 0;
  font-size: 3vmin;
  color: var(--bro-tinte-2);
}

.portal-raumanzeige-fuss {
  display: flex;
  justify-content: flex-end;
}

.portal-raumanzeige-fuss .bro-desk-logo {
  height: 5vmin;
  width: auto;
}

/*
 * Die Signierseite `/sign/<token>` (#4259). Dieselbe Bauart wie die
 * Bewertungsseite darüber: eine einzelne Karte in der Mitte, kein Raster —
 * sie wird aus einer Mail heraus geöffnet, meist auf einem Handy, und trägt
 * genau eine Sache. Etwas breiter als die Bewertung, weil hier ein
 * Dokumenttitel und eine Anrede stehen und nicht fünf Sterne.
 */
.portal-signieren {
  margin: var(--bro-abstand-32) auto;
  max-width: 40rem;
}

/*
 * Der Firmenname des Mandanten über dem Dokument (#5376) — nur, wenn ein
 * validiertes Branding vorliegt (`seite.ts`: `marke` bewusst optional).
 * Zurückhaltend gesetzt, damit sie neben Titel und Anrede nicht konkurriert.
 */
.portal-signieren-marke {
  margin-bottom: var(--bro-abstand-8);
  color: var(--bro-akzent);
}

/*
 * Das Logo an der Stelle des Firmennamens (#5532). Höhe aus den Abstands-
 * Tokens (zweimal der größte), damit ein hohes Logo den Dokumenttitel nicht
 * nach unten schiebt; die Breite folgt dem Seitenverhältnis.
 */
.portal-signieren-logo {
  display: block;
  max-width: 100%;
  max-height: calc(2 * var(--bro-abstand-32));
  width: auto;
  height: auto;
}

/*
 * „Nicht zuständig?" — der Weiterleit-Block (#4259, Scheibe 3).
 *
 * `<details>` statt Overlay: Der Alt öffnet ein Modal, das ohne JavaScript
 * nicht geht (ADR-0003, ADR-0005). Die Zusammenfassung trägt die
 * Knopf-Klassen, damit sie wie ein Knopf aussieht und sich wie einer anfühlt;
 * das Dreieck des Browsers wäre daneben doppelte Auskunft.
 */
.portal-weiterleiten {
  margin-top: var(--bro-abstand-24);
}

.portal-weiterleiten > summary {
  cursor: pointer;
  display: inline-block;
  list-style: none;
}

.portal-weiterleiten > summary::-webkit-details-marker {
  display: none;
}

/*
 * Die fünf Sterne als Knopfreihe. `fieldset` bringt einen Rahmen mit, den
 * diese Reihe nicht braucht — sie steht ohnehin schon in einer Karte.
 */
.portal-bewertung-sterne {
  display: flex;
  gap: var(--bro-abstand-8);
  align-items: center;
  border: none;
  padding: 0;
  margin: var(--bro-abstand-16) 0;
}

/*
 * Ein Stern ist ein Radio-Knopf mit seiner Zahl. Die Zahl bleibt sichtbar
 * neben dem Kästchen: Ein reines Sternsymbol ist für eine Vorlesehilfe keine
 * Angabe, und wer mit der Tastatur wählt, muss sehen, wo er steht.
 */
.portal-bewertung-stern {
  display: inline-flex;
  gap: var(--bro-abstand-4);
  align-items: center;
  padding: var(--bro-abstand-8) var(--bro-abstand-12);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
  cursor: pointer;
}

.portal-bewertung-stern:hover {
  background: var(--bro-akzent-flaeche);
}

/* Die Sterne als Zeichen neben der Zahl (#9040) — Schmuck für das Auge, die
   Zahl daneben bleibt die Angabe für Vorlesehilfen. */
.portal-bewertung-stern-zeichen {
  color: var(--bro-akzent);
}

.portal-bewertung-stern:has(input:checked) {
  background: var(--bro-akzent-flaeche);
  border-color: var(--bro-akzent);
}

/*
 * Reputations-Management (#9040), Anordnung wie im Alt
 * (`Reputation/Index.cshtml`): Die Verteilung belegt zwei Spalten des
 * Kachelrasters, das Anfrage-Formular zwei Drittel neben den Einstellungen.
 * Auf schmalen Geräten stehen alle Teile untereinander.
 */
.portal-reputation {
  display: grid;
  gap: var(--bro-abstand-16);
}

.portal-reputation-verteilung {
  grid-column: span 2;
}

.portal-reputation-balkenliste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--bro-abstand-4);
}

.portal-reputation-balken {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--bro-abstand-8);
  align-items: center;
  font-variant-numeric: tabular-nums;
}

.portal-reputation-balken meter {
  width: 100%;
}

.portal-reputation-raster {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--bro-abstand-16);
  align-items: start;
}

.portal-reputation-sterne {
  color: var(--bro-akzent);
  white-space: nowrap;
}

@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (max-height: 479px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (orientation: portrait) {
  .portal-reputation-verteilung {
    grid-column: auto;
  }

  .portal-reputation-raster {
    grid-template-columns: 1fr;
  }
}

/*
 * Die öffentliche Anamnese-Seite (Issue #2146) — dieselbe Breite wie die
 * Bewertungsseite darüber und aus demselben Grund: Sie steht allein auf dem
 * Bildschirm, ohne App-Schale, und ein Formular über die volle Fensterbreite
 * ist auf einem Rechner unlesbar.
 */
.portal-anamnese {
  margin: var(--bro-abstand-32) auto;
  max-width: 32rem;
}

/* Die öffentliche Vorbereiten-Seite (#3972) — dieselbe Bauart wie die
   Anamnese darüber: eine schmale, mittig stehende Karte ohne App-Schale. */
.portal-vorbereiten {
  margin: var(--bro-abstand-32) auto;
  max-width: 32rem;
}

/* Versteckte Elemente (z. B. Anmelde-Meldung vor dem ersten Fehler). */
[hidden] {
  display: none !important;
}

.portal-hauptspalte {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.portal-inhalt {
  min-width: 0;
  padding: var(--bro-abstand-24) var(--bro-abstand-32) var(--bro-abstand-32);
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-24);
}

/* Kopfleiste wie im Alt: 56 px, klebt oben (`_Layout.cshtml:975`). Deckend
   wie die Seitenleiste: Das Milchglas des Alt (`appbar-glass`) gehört zur
   Alt-Standardoptik, über die Nasri noch entscheidet (#9049, Frage 1); bis
   dahin gilt v10 (#5816). */
.portal-kopf {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-12);
  min-height: 56px;
  padding: 0 var(--bro-abstand-32);
  border-bottom: 1px solid var(--bro-linie);
  background: var(--bro-flaeche-1);
}

.portal-kopf-aktionen {
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-4);
  margin-left: auto;
}

.portal-kopf-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--bro-radius-m);
  color: var(--bro-tinte-2);
  text-decoration: none;
}

.portal-kopf-knopf:hover {
  background: var(--bro-flaeche-0);
  color: var(--bro-tinte-1);
}

.portal-kopf-knopf:focus-visible {
  outline: 2px solid var(--bro-akzent);
  outline-offset: 2px;
}

.portal-kopf-knopf .bro-symbol {
  width: 20px;
  height: 20px;
}

.portal-kopf-menue {
  display: none;
}

/* Die Suche im Kopf (Alt `_Layout.cshtml:988-1040`): ein Feld mit Symbol und
   ⌘K, darunter die Treffer beim Tippen. */
.portal-kopfsuche {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  max-width: 30rem;
  margin: 0;
}

.portal-kopfsuche-symbol {
  position: absolute;
  left: 10px;
  width: 16px;
  height: 16px;
  color: var(--bro-tinte-3);
  pointer-events: none;
}

.portal-kopfsuche-feld {
  width: 100%;
  padding-inline: 34px 44px;
}

.portal-kopfsuche-taste {
  position: absolute;
  right: 10px;
  pointer-events: none;
}

/* Emil in der Suche (#10207): Das Kennzeichen „KI antwortet mit“ steht rechts
   im Feld vor ⌘K, bleibt beim Tippen sichtbar und nimmt keine Klicks an. Lila
   ist die Violett-Stufe der Modulpalette, wie im Entwurf. Der rechte
   Innenabstand des Felds wächst mit dem Kennzeichen, damit sich Text und
   Kennzeichen nicht überlagern. */
.portal-kopfsuche-ki {
  --portal-ki-farbe: var(--bro-modul-personal);
  position: absolute;
  right: 44px;
  display: inline-flex;
  align-items: center;
  gap: var(--bro-abstand-4);
  max-width: 10rem;
  padding: 0 var(--bro-abstand-8);
  border-radius: var(--bro-radius-rund);
  font-size: var(--bro-schrift-fein-groesse);
  line-height: var(--bro-schrift-fein-zeilenhoehe);
  white-space: nowrap;
  color: var(--portal-ki-farbe);
  background: color-mix(in srgb, var(--portal-ki-farbe) 13%, var(--bro-flaeche-1));
  pointer-events: none;
}

.portal-kopfsuche-ki-symbol {
  width: 12px;
  height: 12px;
  flex: none;
}

.portal-kopfsuche:is([data-emil-suche="ab-5-zeichen"], [data-emil-suche="ab-fragezeichen"])
  .portal-kopfsuche-feld {
  padding-inline-end: calc(44px + 10rem + var(--bro-abstand-8));
}

/* Schmal fehlt ⌘K; das Kennzeichen rückt an dessen Stelle. */
@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (max-height: 479px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (orientation: portrait) {
  .portal-kopfsuche-ki {
    right: 10px;
  }

  .portal-kopfsuche:is([data-emil-suche="ab-5-zeichen"], [data-emil-suche="ab-fragezeichen"])
    .portal-kopfsuche-feld {
    padding-inline-end: calc(10px + 10rem + var(--bro-abstand-8));
  }
}

.portal-suchliste-fuss {
  margin: var(--bro-abstand-4) 0 0;
  padding: var(--bro-abstand-8) var(--bro-abstand-12) var(--bro-abstand-4);
  border-top: 1px solid var(--bro-linie);
  color: var(--bro-tinte-2);
}

.portal-taste {
  padding: 0 var(--bro-abstand-4);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-s);
  font-family: var(--bro-schrift-familie);
  font-size: var(--bro-schrift-fein-groesse);
  line-height: var(--bro-schrift-fein-zeilenhoehe);
  color: var(--bro-tinte-2);
}

.portal-suchliste {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 41;
  max-height: 60vh;
  padding: 6px;
  overflow-y: auto;
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
  background: var(--bro-flaeche-1);
  box-shadow: var(--bro-schatten-menue);
}

/* Suche: Umfang direkt über den Treffern, wie im Alt (#9115). */
.portal-suchumfang {
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-8);
  padding: var(--bro-abstand-8) var(--bro-abstand-12);
  font-size: var(--bro-schrift-klein-groesse);
  color: var(--bro-tinte-2);
  border-bottom: 1px solid var(--bro-linie);
  cursor: pointer;
}

.portal-suchliste-titel {
  margin: var(--bro-abstand-4) 0 2px;
  padding: 0 10px;
  color: var(--bro-tinte-3);
  font-size: var(--bro-schrift-fein-groesse);
  font-weight: var(--bro-schrift-fein-gewicht);
  text-transform: uppercase;
}

.portal-suchtreffer {
  display: flex;
  flex-direction: column;
  padding: 6px 10px;
  color: var(--bro-tinte-1);
  text-decoration: none;
}

.portal-suchtreffer:hover,
.portal-suchtreffer[aria-selected="true"] {
  background: var(--bro-akzent-flaeche);
  /* #5852 A: Text auf akzent-flaeche nimmt akzent-text. */
  color: var(--bro-akzent-text);
}

.portal-suchtreffer-titel {
  font-weight: var(--bro-schrift-betont-gewicht);
}

.portal-suchtreffer-zeile {
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
}

.portal-suchliste-leer {
  margin: 0;
  padding: var(--bro-abstand-8) 10px;
}

/* Die Glocke (Alt `_NotificationBell.cshtml`): roter Zähler, Aufklappfenster. */
.portal-glocke-menue {
  position: relative;
}

.portal-glocke {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--bro-radius-m);
  color: var(--bro-tinte-2);
  cursor: pointer;
  list-style: none;
}

.portal-glocke::-webkit-details-marker {
  display: none;
}

.portal-glocke:hover {
  background: var(--bro-flaeche-0);
  color: var(--bro-tinte-1);
}

.portal-glocke:focus-visible {
  outline: 2px solid var(--bro-akzent);
  outline-offset: 2px;
}

.portal-glocke .bro-symbol {
  width: 20px;
  height: 20px;
}

.portal-glocke-zahl {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: var(--bro-radius-rund);
  background: var(--bro-fehler);
  color: var(--bro-akzent-tinte);
  font-size: var(--bro-schrift-fein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
  line-height: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.portal-glocke-fenster {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 41;
  display: flex;
  flex-direction: column;
  width: min(22rem, calc(100vw - 2 * var(--bro-abstand-16)));
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
  background: var(--bro-flaeche-1);
  box-shadow: var(--bro-schatten-menue);
}

.portal-glocke-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bro-abstand-8);
  padding: 10px var(--bro-abstand-12);
  border-bottom: 1px solid var(--bro-linie);
}

.portal-glocke-form {
  margin: 0;
}

.portal-glocke-gelesen {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--bro-akzent-text);
  font: inherit;
  font-size: var(--bro-schrift-klein-groesse);
  cursor: pointer;
}

.portal-glocke-liste {
  display: flex;
  flex-direction: column;
  max-height: 22rem;
  overflow-y: auto;
}

.portal-glocke-leer {
  margin: 0;
  padding: var(--bro-abstand-12);
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
}

.portal-glocke-eintrag {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px var(--bro-abstand-12);
  border-bottom: 1px solid var(--bro-linie);
  color: var(--bro-tinte-1);
  text-decoration: none;
}

.portal-glocke-eintrag:hover {
  background: var(--bro-flaeche-0);
}

.portal-glocke-eintrag--neu .portal-glocke-eintrag-titel {
  font-weight: var(--bro-schrift-betont-gewicht);
}

.portal-glocke-eintrag-text {
  display: -webkit-box;
  overflow: hidden;
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.portal-glocke-eintrag-zeit {
  color: var(--bro-tinte-3);
  font-size: var(--bro-schrift-fein-groesse);
}

.portal-glocke-alle {
  padding: 10px var(--bro-abstand-12);
  color: var(--bro-akzent-text);
  font-size: var(--bro-schrift-klein-groesse);
  text-align: center;
  text-decoration: none;
}

.portal-glocke-alle:hover {
  background: var(--bro-flaeche-0);
}

/* Bereichswechsler über dem Inhalt (Alt `_Bereichswechsler.cshtml:11-74`). */
.portal-bereich {
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-12);
  margin: var(--bro-abstand-16) var(--bro-abstand-32) 0;
  padding: var(--bro-abstand-8) var(--bro-abstand-12);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
  background: var(--bro-flaeche-1);
}

/* #9716: Die Demo zeigt im geöffneten Arbeitsbereich keinen Bereichskopf.
   Das Merkmal steht schon vor dem Zeichnen; der Bro-Modus bleibt unverändert. */
html[data-arbeitsbereich] .portal-bereich {
  display: none;
}

.portal-bereich-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--bro-radius-m);
  background: var(--bro-akzent-flaeche);
  color: var(--bro-akzent-text);
}

.portal-bereich-symbol .bro-symbol {
  width: 18px;
  height: 18px;
}

.portal-bereich-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.portal-bereich-titel {
  color: var(--bro-tinte-3);
  font-size: var(--bro-schrift-fein-groesse);
  font-weight: var(--bro-schrift-fein-gewicht);
  letter-spacing: var(--bro-schrift-fein-laufweite);
  text-transform: uppercase;
}

.portal-bereich-aktiv {
  overflow: hidden;
  color: var(--bro-tinte-1);
  font-weight: var(--bro-schrift-betont-gewicht);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-bereich-menue {
  position: relative;
}

.portal-bereich-knopf {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
  color: var(--bro-tinte-1);
  font-size: var(--bro-schrift-klein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
  cursor: pointer;
  list-style: none;
}

.portal-bereich-knopf::-webkit-details-marker {
  display: none;
}

.portal-bereich-knopf:hover {
  background: var(--bro-flaeche-0);
}

.portal-bereich-knopf:focus-visible {
  outline: 2px solid var(--bro-akzent);
  outline-offset: 2px;
}

.portal-bereich-knopf .bro-symbol {
  width: 16px;
  height: 16px;
}

/* Der Schalter in den Arbeitsbereich (#9593) ist ein Knopf, kein <summary>. */
.portal-bereich-schalter {
  background: transparent;
  font: inherit;
  font-size: var(--bro-schrift-klein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
}

.portal-bereich-schalter[hidden],
.portal-bereich-hinweis[hidden] {
  display: none;
}

.portal-bereich-hinweis {
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
}

/* Im Arbeitsbereich trägt die Seitenleiste die Punkte des Bereichs; ein
   zweites Menü darüber wäre die zweite Leiste, die #9593 abschafft. Das
   Merkmal setzt leisten-start.ts vor dem ersten Zeichnen. */
html[data-arbeitsbereich] .portal-bereich-menue {
  display: none;
}

.portal-bereich-menue[open] .portal-bereich-pfeil {
  transform: rotate(180deg);
}

.portal-bereich-liste {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 25;
  display: grid;
  grid-template-columns: repeat(3, minmax(11rem, 1fr));
  gap: var(--bro-abstand-16);
  width: max-content;
  max-width: calc(100vw - 2 * var(--bro-abstand-32));
  padding: var(--bro-abstand-12) var(--bro-abstand-16);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
  background: var(--bro-flaeche-1);
  box-shadow: var(--bro-schatten-menue);
}

.portal-bereich-spalte {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.portal-bereich-gruppe {
  margin: 0 0 var(--bro-abstand-4);
  padding: 0 var(--bro-abstand-8);
  color: var(--bro-tinte-3);
  font-size: var(--bro-schrift-fein-groesse);
  font-weight: var(--bro-schrift-fein-gewicht);
  text-transform: uppercase;
}

/* Eine eingeklappte Gruppe im Wechsler (#9258, „Stammdaten“ des
   Fahrdienstes): natives <details>, der Titel ist der Schalter. */
.portal-bereich-eingeklappt > summary {
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-4);
  cursor: pointer;
  list-style: none;
}

.portal-bereich-eingeklappt > summary::-webkit-details-marker {
  display: none;
}

.portal-bereich-eingeklappt-pfeil {
  width: 14px;
  height: 14px;
  transform: rotate(-90deg);
}

.portal-bereich-eingeklappt[open] .portal-bereich-eingeklappt-pfeil {
  transform: none;
}

.portal-bereich-punkt {
  padding: 6px var(--bro-abstand-8);
  border-radius: var(--bro-radius-m);
  color: var(--bro-tinte-1);
  font-size: var(--bro-schrift-klein-groesse);
  text-decoration: none;
}

.portal-bereich-punkt:hover {
  background: var(--bro-flaeche-0);
}

.portal-bereich-punkt[aria-current="page"] {
  background: var(--bro-akzent-flaeche);
  color: var(--bro-akzent-text);
  font-weight: var(--bro-schrift-betont-gewicht);
}

/* Seitenkopf: Rückweg, Titel, Untertitel, Aktionen rechts. */
.portal-seitenkopf {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
}

.portal-seitenkopf-zurueck {
  display: inline-flex;
  align-items: center;
  gap: var(--bro-abstand-4);
  width: fit-content;
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
  text-decoration: none;
}

.portal-seitenkopf-zurueck:hover {
  color: var(--bro-tinte-1);
}

.portal-seitenkopf-zurueck .bro-symbol {
  width: 14px;
  height: 14px;
}

.portal-seitenkopf-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--bro-abstand-12);
}

.portal-seitenkopf-titel {
  min-width: 0;
}

.portal-seitenkopf-titel h1 {
  margin: 0;
}

.portal-seitenkopf-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-8);
}

.portal-seitenkopf-marken {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-4);
}

/* Kopf in der Form der Vitala-Demo (#9599): Augenbraue in Nebentinte mit
   Farbquadrat in der Markenfarbe (`bro-augenbraue--marke`), Abstand zum
   Inhalt wie `.kopf` (22 px). */
.portal-seitenkopf-kennzeile {
  margin: 0 0 6px;
}

.portal-seitenkopf:has(.portal-seitenkopf-kennzeile) {
  margin-bottom: 22px;
}

.portal-seitenkopf-untertitel {
  margin: 2px 0 0;
  color: var(--bro-tinte-2);
}

.portal-seitenkopf-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-8);
}

/* Untere Navigationsleiste: nur auf schmalen Geräten (unten). */
.portal-unterleiste {
  display: none;
}

.portal-unterleiste-punkt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: var(--bro-beruehrungsflaeche);
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-fein-groesse);
  text-decoration: none;
}

.portal-unterleiste-punkt .bro-symbol {
  width: 20px;
  height: 20px;
}

.portal-unterleiste-punkt[aria-current="page"] {
  color: var(--bro-akzent-text);
}

/* Gedruckt wird der Inhalt, nicht die Schale (#9042): Leiste, Kopfleiste,
   Bereichswechsler und untere Leiste fallen weg. */
@media print {
  .portal-schale {
    display: block;
  }

  .portal-seitenleiste,
  .portal-leiste-abdunklung,
  .portal-kopf,
  .portal-bereich,
  .portal-unterleiste {
    display: none;
  }
}

/* Firmengruppe (#8919): der Firmen-Umschalter im Kopf, gebaut vom
   Gruppen-Skript. Eigene Klassen statt `.portal-nutzer-menue`: Jenes steht
   am Fuß der Leiste und klappt nach OBEN auf, dieser steht im Kopf und
   klappt nach UNTEN auf, rechtsbündig unter seinem Knopf. Fläche, Rahmen,
   Radius und Schatten wie `.portal-nutzer-menue-liste`. */
.portal-gruppen-umschalter {
  position: relative;
}

.portal-gruppen-umschalter-knopf {
  display: inline-flex;
  align-items: center;
  gap: var(--bro-abstand-8);
  padding: var(--bro-abstand-4) var(--bro-abstand-12);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
  color: var(--bro-tinte-1);
  font-size: var(--bro-schrift-fliesstext-groesse);
  cursor: pointer;
  list-style: none;
}

.portal-gruppen-umschalter-knopf::-webkit-details-marker,
.portal-gruppen-abschnitt-titel::-webkit-details-marker {
  display: none;
}

/* Der Winkel hinter Knopf und Abschnittstitel: zwei gedrehte Rahmenkanten,
   kein Zeichen aus einer Schrift und kein Bild (ADR-0003). Offen zeigt er
   nach oben. */
.portal-gruppen-umschalter-knopf::after,
.portal-gruppen-abschnitt-titel::after {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.portal-gruppen-umschalter[open] > .portal-gruppen-umschalter-knopf::after,
.portal-gruppen-abschnitt[open] > .portal-gruppen-abschnitt-titel::after {
  transform: translateY(2px) rotate(225deg);
}

.portal-gruppen-umschalter-knopf:hover {
  background: var(--bro-flaeche-0);
}

.portal-gruppen-umschalter-knopf:focus-visible,
.portal-gruppen-abschnitt-titel:focus-visible {
  outline: 2px solid var(--bro-akzent);
  outline-offset: 2px;
}

.portal-gruppen-umschalter-liste {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 31;
  display: flex;
  flex-direction: column;
  min-width: 12rem;
  max-width: 20rem;
  padding: 6px;
  background: var(--bro-flaeche-1);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
  box-shadow: var(--bro-schatten-menue);
}

/* Je Firma zwei Zeilen: der Name, darunter fein, als wer dieser Browser
   dort angemeldet ist. Die zweite Zeile bleibt leer, bis die Antwort der
   Firma da ist, und nimmt bis dahin keinen Platz. */
.portal-gruppen-umschalter-punkt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--bro-abstand-8) 10px;
  color: var(--bro-tinte-1);
  font-size: var(--bro-schrift-fliesstext-groesse);
  text-decoration: none;
}

.portal-gruppen-umschalter-punkt:hover {
  background: var(--bro-flaeche-0);
}

.portal-gruppen-umschalter-punkt:focus-visible {
  outline: 2px solid var(--bro-akzent);
  outline-offset: -2px;
}

/* Die Firma dieser Seite: fett und mit Akzentkante, ohne Farbfläche — so
   bleibt die feine zweite Zeile auf jeder Fläche lesbar. */
.portal-gruppen-umschalter-punkt[aria-current] {
  box-shadow: inset 2px 0 0 var(--bro-akzent);
}

.portal-gruppen-umschalter-punkt[aria-current] .portal-gruppen-umschalter-name {
  font-weight: var(--bro-schrift-betont-gewicht);
}

/* „Alle Firmen“ steht über einer Trennlinie vor den einzelnen Firmen. */
.portal-gruppen-umschalter-alle {
  margin-bottom: 6px;
  border-bottom: 1px solid var(--bro-linie);
}

/* „Ansicht einstellen“ (#9016) schließt die Liste ab: wie „Alle Firmen“
   oben durch eine Linie von den Firmen getrennt, nur am anderen Ende. */
.portal-gruppen-umschalter-einstellungen {
  margin-top: 6px;
  border-top: 1px solid var(--bro-linie);
}

.portal-gruppen-umschalter-name,
.portal-gruppen-umschalter-person {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-gruppen-umschalter-person {
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
  line-height: var(--bro-schrift-klein-zeilenhoehe);
}

.portal-gruppen-umschalter-person:empty {
  display: none;
}

/* Team-Ampel (#7965, Alt `_TeamPresenceWidget.cshtml`): Kürzel mit Ring in
   der Teams-Farbe, übereinander geschoben; aufgeklappt „Team live“. Die
   Farben kommen nur aus den Status-Tokens — grün verfügbar, rot beschäftigt,
   gelb abwesend; ohne Status ein neutraler Ring, nie eine geratene Farbe. */
.portal-team-ampel-menue {
  position: relative;
}

.portal-team-ampel-kopf {
  display: inline-flex;
  align-items: center;
  padding: var(--bro-abstand-4) 6px;
  border-radius: var(--bro-radius-m);
  cursor: pointer;
  list-style: none;
}

.portal-team-ampel-kopf::-webkit-details-marker {
  display: none;
}

.portal-team-ampel-kopf:hover {
  background: var(--bro-flaeche-0);
}

.portal-team-ampel-leer {
  color: var(--bro-tinte-3);
}

.portal-team-ampel-stapel {
  display: inline-flex;
  align-items: center;
  /* Leicht übereinander wie im Alt (`-space-x-2.5`), aber nur so weit, dass
     beide Buchstaben jedes Kürzels lesbar bleiben — das Alt hatte dort meist
     ein Foto, hier steht immer Text. */
  padding-left: 4px;
}

.portal-team-ampel-stapel .portal-team-ampel-avatar {
  margin-left: -4px;
  font-size: var(--bro-schrift-fein-groesse);
}

.portal-team-ampel-avatar {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--bro-radius-rund);
  background: var(--bro-flaeche-1);
  color: var(--bro-tinte-1);
  font-size: var(--bro-schrift-klein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
  box-shadow: 0 0 0 2px var(--portal-team-ampel-ring);
}

.portal-team-ampel-ring-verfuegbar {
  --portal-team-ampel-ring: var(--bro-erfolg);
}

.portal-team-ampel-ring-beschaeftigt {
  --portal-team-ampel-ring: var(--bro-fehler);
}

.portal-team-ampel-ring-abwesend {
  --portal-team-ampel-ring: var(--bro-warnung);
}

.portal-team-ampel-ring-ohne,
.portal-team-ampel-mehr {
  --portal-team-ampel-ring: var(--bro-linie-stark);
}

.portal-team-ampel-mehr {
  color: var(--bro-tinte-2);
}

.portal-team-ampel-liste {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 31;
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
  width: 20rem;
  max-height: 24rem;
  overflow-y: auto;
  padding: var(--bro-abstand-8);
  background: var(--bro-flaeche-1);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
  box-shadow: var(--bro-schatten-menue);
}

.portal-team-ampel-titel {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0;
  padding: var(--bro-abstand-4) var(--bro-abstand-8) var(--bro-abstand-8);
  border-bottom: 1px solid var(--bro-linie);
}

.portal-team-ampel-zeilen {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.portal-team-ampel-zeile {
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-12);
  padding: var(--bro-abstand-8);
  border-radius: var(--bro-radius-s);
}

.portal-team-ampel-person {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.portal-team-ampel-fuss {
  padding: var(--bro-abstand-8);
  border-top: 1px solid var(--bro-linie);
}

/* Leerzustand einer Liste oder Karte (#6744, Scheibe 3b): gedämpft, mit
   Luft, in derselben Familie wie `portal-tabelle-leer` und der Leerzustand
   der Übersicht — kein Alarm, nur die Auskunft „hier ist noch nichts“. */
.portal-leer {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
  align-items: flex-start;
  margin: 0;
  padding: var(--bro-abstand-16);
  border: 1px dashed var(--bro-linie-stark); /* Leerzustand in v10, dc:1019 (#6901) */
  border-radius: var(--bro-radius-m);
  color: var(--bro-tinte-2);
}

.portal-leer p {
  margin: 0;
}

/* W29, zweite Hälfte (#5365): die zwei Formulare, mit denen eine
   vorläufige Notfalländerung bestätigt oder abgelehnt wird
   (kundenwissen/seite.ts). */
.portal-notfall-entscheidung {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
  margin-top: var(--bro-abstand-12);
}

.portal-notfall-entscheidung form {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
  align-items: flex-start;
}

/* Testphasen-Streifen (#1509): eine Zeile über dem Inhalt der Modulseite.
   Nur Tokens, keine eigenen Farben — die Wertung trägt die Statuspille. */

.portal-testphase {
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-12);
}

.portal-testphase p {
  margin: 0;
}

/* Zahlungs-Ampeln (#1745): zwei Urteile untereinander, getrennt lesbar.
   Nur Tokens — die Wertung trägt die Statuspille, nicht eine eigene Farbe. */

.portal-ampel {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
  padding: var(--bro-abstand-12) 0;
}

.portal-ampel p {
  margin: 0;
}

/* Stammdaten-Seite (P1-004) */

/* Die Werkzeugleiste bricht in JEDER Geräteklasse um, nicht nur in `schmal`
   (#7066): Der Fahrdienst stellt sechs Verweis-Knöpfe in eine Leiste, und
   4b (#7064) hat an den Kategorien gemessen, dass schon eine kürzere Leiste
   auf Tablet quer (1024 px) die Seite verbreitert. Eine Leiste, die umbricht,
   verliert nichts — eine, die überläuft, erzwingt waagerechtes Scrollen. */
.portal-werkzeuge {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-12);
}

/* Eine Leiste aus beschrifteten Feldern (`portal-feld`, Beschriftung über
   dem Feld) richtet sich an der Unterkante aus: Der Knopf ohne Beschriftung
   steht dann auf der Linie der Felder, nicht mittig neben Beschriftung und
   Feld (#7406, vorher seiteneigen als `portal-lager-filter`). */
.portal-werkzeuge:has(> .portal-feld) {
  align-items: flex-end;
}

.portal-suche {
  flex: 1;
  max-width: 26rem;
  margin: 0;
}

/* ── PDF-Vorschau: Fenster über der Seite mit Werkzeugleiste (Alt `_PdfViewer.cshtml`) ── */
.portal-pdf {
  width: min(72rem, 100vw);
  max-width: 100vw;
  height: 92dvh;
  max-height: calc(100dvh - var(--bro-abstand-32));
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--bro-radius-l);
  background: var(--bro-flaeche-1);
  color: var(--bro-tinte-1);
  box-shadow: var(--bro-schatten-dialog);
  overflow: hidden;
}

.portal-pdf[open] {
  display: flex;
  flex-direction: column;
}

.portal-pdf::backdrop {
  background: color-mix(in oklab, var(--bro-tinte-1) 60%, transparent);
}

.portal-pdf-kopf {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--bro-abstand-8);
  padding: var(--bro-abstand-8) var(--bro-abstand-16);
  border-bottom: 1px solid var(--bro-linie);
}

.portal-pdf-titel {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: var(--bro-schrift-betont-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-pdf-leiste {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--bro-abstand-4);
}

.portal-pdf-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--bro-beruehrungsflaeche);
  min-height: var(--bro-beruehrungsflaeche);
  border: 0;
  border-radius: var(--bro-radius-m);
  background: transparent;
  color: var(--bro-tinte-2);
  text-decoration: none;
  cursor: pointer;
}

.portal-pdf-knopf:hover {
  background: var(--bro-akzent-flaeche);
  color: var(--bro-tinte-1);
}

.portal-pdf-knopf:focus-visible {
  outline: var(--bro-fokus-breite) solid var(--bro-akzent);
  outline-offset: var(--bro-fokus-abstand);
}

.portal-pdf-symbol {
  width: 1.125rem;
  height: 1.125rem;
}

.portal-pdf-trenner {
  width: 1px;
  height: 1.25rem;
  margin: 0 var(--bro-abstand-4);
  background: var(--bro-linie);
}

.portal-pdf-koerper {
  position: relative;
  flex: 1;
  min-height: 0;
  background: var(--bro-flaeche-0);
}

.portal-pdf-laden {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  color: var(--bro-tinte-3);
}

.portal-pdf-laden[hidden] {
  display: none;
}

.portal-pdf-rahmen {
  position: relative;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
}

body.portal-pdf-offen {
  overflow: hidden;
}

/* Auf dem Handy randlos und voll hoch, wie im Alt. */
@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (max-height: 479px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (orientation: portrait) {
  .portal-pdf {
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }
}

/* ── Schublade von rechts (#10053): dasselbe Fenster, rechts angeschlagen und
   voll hoch; die Seite dahinter bleibt sichtbar. Termin anlegen und
   bearbeiten (`schubladenAttribute`, `datensatz-fenster.ts`). */
.portal-pdf.portal-schublade {
  width: min(40rem, 100vw);
  height: 100dvh;
  max-height: 100dvh;
  margin: 0 0 0 auto;
  border-radius: var(--bro-radius-l) 0 0 var(--bro-radius-l);
}

.portal-pdf.portal-schublade.portal-schublade-breit {
  width: min(48rem, 100vw);
}

@media (prefers-reduced-motion: no-preference) {
  .portal-pdf.portal-schublade[open] {
    animation: portal-schublade-ein var(--bro-schublade-einfahrdauer)
      var(--bro-schublade-einfahrkurve);
  }
}

@keyframes portal-schublade-ein {
  from {
    transform: translateX(100%);
  }
}

@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (max-height: 479px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (orientation: portrait) {
  .portal-pdf.portal-schublade {
    border-radius: 0;
  }
}

/* ── Datensatz im Fenster über der Liste (#9118, Alt `_EmbedViewer.cshtml`):
   dasselbe Fenster wie die PDF-Vorschau, mit „Vollständig öffnen“ als Text. */
.portal-datensatz-ganz {
  display: inline-flex;
  align-items: center;
  min-height: var(--bro-beruehrungsflaeche);
  padding: 0 var(--bro-abstand-8);
  border-radius: var(--bro-radius-m);
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
  text-decoration: none;
}

.portal-datensatz-ganz:hover {
  background: var(--bro-akzent-flaeche);
  color: var(--bro-tinte-1);
}

.portal-datensatz-ganz:focus-visible {
  outline: var(--bro-fokus-breite) solid var(--bro-akzent);
  outline-offset: var(--bro-fokus-abstand);
}

/* Die Seite IM Fenster zeigt nur ihren Inhalt: `leisten-start.js` setzt
   `data-eingebettet`, sobald sie in einem Rahmen steht. */
html[data-eingebettet] .portal-schale {
  display: block;
  min-height: 0;
}

html[data-eingebettet] .portal-seitenleiste,
html[data-eingebettet] .portal-kopf,
html[data-eingebettet] .portal-bereich,
html[data-eingebettet] .portal-bereich-knopf,
html[data-eingebettet] .portal-unterleiste,
html[data-eingebettet] .kaltakquise-screen-pop,
html[data-eingebettet] .portal-rechtsfuss {
  display: none;
}

/* ── Formular-Entwürfe (#9118, Alt `form-draft.js`): Leiste über dem Formular
   und das Fenster „Weiterbearbeiten?“. Nur Tokens, keine festen Farben. */
.portal-entwurf-leiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-8);
  padding: var(--bro-abstand-8) var(--bro-abstand-12);
  border-radius: var(--bro-radius-m);
  background: var(--bro-akzent-flaeche);
}

.portal-entwurf-status {
  flex: 1 1 auto;
  color: var(--bro-tinte-2);
}

.portal-entwurf-status[data-gespeichert] {
  color: var(--bro-erfolg);
}

.portal-entwurf-fenster {
  width: min(30rem, calc(100vw - var(--bro-abstand-32)));
  max-height: 85dvh;
  padding: var(--bro-abstand-16);
  border: 0;
  border-radius: var(--bro-radius-l);
  background: var(--bro-flaeche-1);
  color: var(--bro-tinte-1);
  box-shadow: var(--bro-schatten-dialog);
  overflow: auto;
}

.portal-entwurf-fenster::backdrop {
  background: color-mix(in oklab, var(--bro-tinte-1) 45%, transparent);
}

.portal-entwurf-fenster-titel {
  margin: 0 0 var(--bro-abstand-4);
  font-size: var(--bro-schrift-betont-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
}

.portal-entwurf-liste {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  margin-top: var(--bro-abstand-12);
}

.portal-entwurf-eintrag {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--bro-abstand-4);
  padding: var(--bro-abstand-8) var(--bro-abstand-12);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
  background: var(--bro-flaeche-0);
  color: var(--bro-tinte-1);
  text-align: left;
  cursor: pointer;
}

.portal-entwurf-eintrag:hover {
  background: var(--bro-akzent-flaeche);
}

.portal-entwurf-eintrag:focus-visible {
  outline: var(--bro-fokus-breite) solid var(--bro-akzent);
  outline-offset: var(--bro-fokus-abstand);
}

.portal-entwurf-aktionen {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--bro-abstand-8);
  margin-top: var(--bro-abstand-16);
}

/* Die Fehlerkarte im Fenster und im Tab: zentriert, mit Luft. */
.portal-pdf-fehler {
  max-width: 32rem;
  margin: var(--bro-abstand-32) auto;
}

/* Eingangsbeleg prüfen: Prüfdaten links, das Beleg-PDF rechts daneben (Alt 82 vh). */
.portal-beleg-pruefung {
  display: grid;
  gap: var(--bro-abstand-16);
}

.portal-beleg-pruefung-daten,
.portal-beleg-ansicht {
  min-width: 0;
}

@media (min-width: 1280px) {
  .portal-beleg-pruefung {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }

  .portal-beleg-ansicht {
    position: sticky;
    top: var(--bro-abstand-16);
  }
}

/* Mahnschreiben je Stufe ansehen (Rechnungsseite). */
.portal-mahnung-vorschau {
  margin-top: var(--bro-abstand-12);
}

/* Vorschau gleich auf der Seite (ein-/ausblendbar, der Schalter wird im Browser gemerkt). */
.portal-pdf-spalte {
  margin-top: var(--bro-abstand-8);
}

.portal-pdf-spalte-rahmen {
  display: block;
  width: 100%;
  height: 80dvh;
  min-height: 24rem;
  margin-top: var(--bro-abstand-8);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
  background: var(--bro-flaeche-0);
}

.portal-pdf-spalte-rahmen[hidden] {
  display: none;
}

.portal-pdf-einzelheit {
  margin: var(--bro-abstand-16) 0 0;
  color: var(--bro-tinte-3);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* Gemeinsame Bausteine der Formulare und Meldungen (#6744, Scheibe 3b).
   Die Klassen darunter standen seit dem 31.08.2026 in 40 bis 100 Dateien im
   Markup und waren im Bündel NICHT definiert (Altbestand in
   `stile.test.ts`) — Felder ohne Abstand, Meldungslisten als nackte ul-Elemente.
   Hier bekommen sie an ihrer gemeinsamen Stelle eine Gestalt; keine Seite
   wird angefasst. */

/* Ein Feld: Beschriftung über der Eingabe, mit knappem Abstand. */
.portal-feld {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
  color: var(--bro-tinte-1);
}

.portal-feld > .bro-eingabefeld,
.portal-feld > .portal-feld-eingabe {
  margin-top: var(--bro-abstand-4);
}

/* Beschriftung als eigenes Element (wo Feld und Text nicht ein Label sind). */
.portal-feld-name {
  display: block;
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
  line-height: var(--bro-schrift-klein-zeilenhoehe);
  font-weight: var(--bro-schrift-betont-gewicht);
}

/* Eingabe ohne `bro-eingabefeld` (Altbestand): dieselbe Form wie das
   Eingabefeld aus @bro/ui, damit ein Formular nicht zwei Sorten Felder zeigt. */
.portal-feld-eingabe {
  display: block;
  width: 100%;
  min-height: var(--bro-abstand-32);
  padding: var(--bro-abstand-8) var(--bro-abstand-12);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-s);
  background: var(--bro-flaeche-1);
  color: var(--bro-tinte-1);
  font: inherit;
}

.portal-feld-eingabe:focus-visible {
  outline: 2px solid var(--bro-akzent);
  outline-offset: 0;
  border-color: var(--bro-akzent);
}

/* Stille Beschriftung: für Vorlese-Software da, für das Auge nicht — etwa
   die Zuordnung je Spalte im Import, wo die Spaltenüberschrift schon steht. */
.portal-feld-still {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Ausgemustertes eigenes Feld: Wert bleibt lesbar, Eingabe gibt es keine. */
.portal-feld-ausgemustert {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
  padding: var(--bro-abstand-12);
  border: 1px dashed var(--bro-linie-stark); /* wie der Leerzustand in v10, dc:1019 (#6901) */
  border-radius: var(--bro-radius-m);
  background: var(--bro-flaeche-0);
}

.portal-feld-ausgemustert > p {
  margin: 0;
}

/* Feldgruppe (<fieldset>): ein Rahmen mit Titel, Felder darin gestapelt. */
.portal-formular-gruppe {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  margin: 0;
  padding: var(--bro-abstand-12) var(--bro-abstand-16) var(--bro-abstand-16);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
  min-width: 0;
}

.portal-formular-gruppe > legend {
  padding: 0 var(--bro-abstand-4);
}

.portal-formular-gruppe > p {
  margin: 0;
}

/* Ein Block zusammengehöriger Felder in einer Feldgruppe, gestapelt wie dort. */
.portal-feldblock {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
}

/*
 * Kunde anlegen (#9038, Alt `Kunden/Neu.cshtml:167-191`): Ein reiner Firmen-
 * bzw. Privatbetrieb sieht nur die Namensfelder seiner Art. Verborgen, nicht
 * entfernt — die Felder bleiben im Formular (`kundenart-maske.test.ts`).
 */
.portal-kunde-anlegen[data-kundenart="nur-firmen"] [data-nur-privat],
.portal-kunde-anlegen[data-kundenart="nur-privat"] [data-nur-firma] {
  display: none;
}

/* Meldungen: eine Liste von Sätzen in einem getönten Kasten, wie v10 sie
   zeichnet (#6901) — ohne farbigen Seitenbalken. Ohne Datenmerkmal ist es ein
   Hinweis (dc:1046); `data-fehler` (dc:1037) und `data-warnung` (dc:416)
   tönen Fläche und Rand, `data-hinweis` ist der ausdrückliche Hinweis. Ein
   `role="alert"` ändert die Gestalt nicht — es sagt nur der
   Vorlese-Software, dass es eilt. */
.portal-meldungen,
.portal-meldung,
.portal-fehlerliste {
  margin: 0;
  padding: var(--bro-abstand-12) var(--bro-abstand-16);
  border: 1px solid var(--bro-hinweis-linie);
  border-radius: var(--bro-radius-m);
  background: var(--bro-hinweis-flaeche);
  color: var(--bro-tinte-1);
}

.portal-meldungen,
.portal-fehlerliste {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
}

.portal-meldungen[hidden],
.portal-meldung[hidden] {
  display: none;
}

.portal-meldungen[data-fehler],
.portal-meldung[data-fehler],
.portal-fehlerliste {
  border-color: var(--bro-fehler-linie);
  background: var(--bro-fehler-flaeche);
}

.portal-meldungen[data-warnung],
.portal-meldung[data-warnung] {
  border-color: var(--bro-warnung-linie);
  background: var(--bro-warnung-flaeche);
}

/* Eine Erfolgsfassung zeigt v10 nicht, und vor #6744 hatte die Meldung keine
   Gestalt. Bis Nasri entscheidet (#6904), steht sie im neutralen Kasten aus
   v10-Werten mit grüner Schrift — kein erfundener Wert. */
.portal-meldungen[data-erfolg],
.portal-meldung[data-erfolg] {
  border-color: var(--bro-linie);
  background: var(--bro-flaeche-1);
  color: var(--bro-erfolg);
}

/* Der Rechte-Hinweis (#7063): EIN `portal-meldung`-Absatz mit
   `data-hinweis="recht"` und `role="note"` aus `bausteine.ts`
   (`rechteHinweis`) für jedes „… fehlt das Recht …“ im Portal — bis dahin
   36 Stellen als Kleintext, Status-Pille oder Fließtext. Er steht neben dem
   Inhalt, nicht vor ihm, deshalb die kleine Schriftstufe; Fläche und Rand
   kommen von `portal-meldung`. */
.portal-rechte-hinweis {
  font-size: var(--bro-schrift-klein-groesse);
  line-height: var(--bro-schrift-klein-zeilenhoehe);
}

/* Sortierbare Spaltenköpfe (#7063, `sortierbarerSpaltenkopf`): `<th
   aria-sort>` mit dem Sortier-Link der Seite. Der Link erbt Schrift und Farbe
   des Kopfes; der gerade sortierende Kopf (`aria-sort` ≠ `none`) hebt sich
   über Gewicht und Tinte ab, der Pfeil dahinter ist nur fürs Auge
   (`aria-hidden`) und trägt den Akzent. */
.portal-sortierkopf a {
  color: inherit;
  text-decoration: none;
}

.portal-sortierkopf a:hover,
.portal-sortierkopf a:focus-visible {
  text-decoration: underline;
}

.portal-sortierkopf:not([aria-sort="none"]) a {
  color: var(--bro-tinte-1);
  font-weight: var(--bro-schrift-betont-gewicht);
}

.portal-sortierkopf-pfeil {
  color: var(--bro-akzent);
}

/* Geräteklassen (#6744): Die Sprungmarken stehen NUR in @bro/design-tokens
   (`sprungmarken`, `geraeteklassen`); hier steht je Regel ein Platzhalter
   `@media (--bro-geraet-…)`, den das Stil-Bündel (`scripts/buendel.ts`,
   `setzeGeraeteklassenEin`) beim Erzeugen durch die Bedingung ersetzt. Eine
   rohe Breite in einer @media-Regel weist `stile.test.ts` ab. Was sich je
   Klasse ändert, steht in `packages/design-tokens/README.md`.

   Die Schale hat zwei Zustände (#9042, wie im Alt):
   - Desktop und Tablet quer: Seitenleiste mit Namen (244 px), auf Wunsch
     eingeklappt auf Symbole (68 px, `data-leiste="schmal"` am <html>).
   - Handy hoch, Handy quer, Tablet hoch (`schmal`): die Leiste als Schublade
     von links, Menü-Knopf im Kopf und eine untere Navigationsleiste. */

@media (min-width: 768px) and (max-width: 1279px) and (min-height: 480px) and (orientation: landscape) {
  /* Wie im Alt ab 1024 px die volle Leiste; einklappen kann jeder selbst. */
  .portal-kopf {
    padding-inline: var(--bro-abstand-24);
  }

  .portal-bereich {
    margin-inline: var(--bro-abstand-24);
  }

  .portal-inhalt {
    padding: var(--bro-abstand-24);
  }
}

@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (max-height: 479px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (orientation: portrait) {
  /* Die Leiste wird zur Schublade von links mit Abdunklung (Alt
     `_Layout.cshtml:641-692`, 260 px). Ohne Skript öffnet der Anker
     `#leiste` sie über `:target`, mit Skript das Merkmal
     `data-leiste-offen` am <html>. */
  .portal-schale,
  :root[data-leiste="schmal"] .portal-schale {
    grid-template-columns: minmax(0, 1fr);
  }

  .portal-seitenleiste,
  :root[data-leiste="schmal"] .portal-seitenleiste {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 50;
    width: min(260px, 85vw);
    height: auto;
    padding-inline: var(--bro-abstand-12);
    border-right: 1px solid var(--bro-linie);
    box-shadow: var(--bro-schatten-dialog);
    transform: translateX(-105%);
    transition: transform 160ms ease;
    visibility: hidden;
  }

  .portal-seitenleiste:target,
  :root[data-leiste-offen] .portal-seitenleiste {
    transform: none;
    visibility: visible;
  }

  .portal-seitenleiste:target ~ .portal-leiste-abdunklung,
  :root[data-leiste-offen] .portal-leiste-abdunklung {
    position: fixed;
    inset: 0;
    z-index: 49;
    display: block;
    background: color-mix(in oklab, var(--bro-tinte-1) 40%, transparent);
  }

  .portal-leiste-knopf {
    display: none;
  }

  .portal-leiste-schliessen {
    display: flex;
    align-items: center;
    gap: var(--bro-abstand-8);
    min-height: var(--bro-beruehrungsflaeche);
    padding: 0 var(--bro-abstand-8);
    color: var(--bro-tinte-2);
    text-decoration: none;
  }

  .portal-leiste-schliessen .bro-symbol {
    width: 20px;
    height: 20px;
  }

  /* In der Schublade immer mit Namen, auch wenn die Leiste am Rechner
     eingeklappt gemerkt ist. */
  :root[data-leiste="schmal"] .portal-nav-name,
  :root[data-leiste="schmal"] .portal-nav-gruppentitel > :not(.portal-nav-pfeil) {
    position: static;
    width: auto;
    height: auto;
    overflow: hidden;
    clip-path: none;
  }

  :root[data-leiste="schmal"] .portal-nav-gruppentitel {
    justify-content: space-between;
    border-top: 0;
    font-size: var(--bro-schrift-fein-groesse);
  }

  :root[data-leiste="schmal"] .portal-navigation .bro-navigationspunkt {
    justify-content: flex-start;
  }

  :root[data-leiste="schmal"] .portal-firmenmarke:not(:has(.portal-firmenlogo)),
  :root[data-leiste="schmal"] .portal-logo-kopf > .bro-desk-logo {
    display: block;
  }

  .portal-kopf {
    gap: var(--bro-abstand-4);
    padding: 0 var(--bro-abstand-8);
  }

  .portal-kopf-menue {
    display: inline-flex;
  }

  /* Aufgaben stehen unten in der Navigationsleiste; „Fehler melden“ bleibt
     über das Nutzermenü („Meine Meldungen“) erreichbar. So bleibt der Suche
     Platz in der schmalen Kopfleiste. */
  .portal-kopfsuche-taste,
  .portal-nutzer-text,
  .portal-kopf-aktionen > .portal-kopf-knopf {
    display: none;
  }

  .portal-bereich {
    margin: var(--bro-abstand-8) var(--bro-abstand-16) 0;
  }

  .portal-bereich-liste {
    position: fixed;
    top: auto;
    left: var(--bro-abstand-8);
    right: var(--bro-abstand-8);
    grid-template-columns: minmax(0, 1fr);
    width: auto;
    max-width: none;
    max-height: 60vh;
    overflow-y: auto;
  }

  .portal-bereich-knopf > span {
    display: none;
  }

  /* Der Rückweg bleibt auf dem Handy beschriftet: Er ist dort der einzige
     sichtbare Weg zurück zu Bro (#9593). */
  .portal-bereich-schalter[data-arbeitsbereich-schliessen] > span {
    display: inline;
  }

  /* Untere Navigationsleiste (Alt `_Layout.cshtml:1365-1395`). */
  .portal-unterleiste {
    position: fixed;
    inset: auto 0 0;
    z-index: 30;
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    padding-bottom: env(safe-area-inset-bottom);
    border-top: 1px solid var(--bro-linie);
    background: var(--bro-flaeche-1);
  }

  .portal-hauptspalte {
    padding-bottom: calc(var(--bro-beruehrungsflaeche) + var(--bro-abstand-16));
  }

  .portal-nutzer-menue-liste,
  .portal-glocke-fenster {
    position: fixed;
    top: 60px;
    right: var(--bro-abstand-8);
    left: auto;
  }

  /* Die Team-Ampel (#7965) erst ab mittlerer Breite, wie im Alt
     (`_TeamPresenceWidget.cshtml:11`, `hidden md:block`). */
  .portal-team-ampel {
    display: none;
  }

  /* Der Firmen-Umschalter (#8919) wie Nutzermenü und Glocke: Die Kopfleiste
     bricht nicht mehr um (#9042), die Liste liegt deshalb fest unter ihr. */
  .portal-gruppen-umschalter-liste {
    position: fixed;
    top: 60px;
    left: var(--bro-abstand-8);
    right: var(--bro-abstand-8);
    max-width: none;
  }

  .portal-inhalt {
    padding: var(--bro-abstand-16);
    gap: var(--bro-abstand-16);
  }

  /* Tabellen scrollen in ihrem EIGENEN Rahmen, nie die Seite — seit #7286
     auf allen Breiten, Regel bei `.portal-tabelle-karte` weiter unten. Auf
     schmalen Geräten scrollt die nackte Tabelle zusätzlich selbst (unten).
     Welche Spalten eine Seite stattdessen ausblendet oder als Karten zeigt,
     entscheidet sie selbst. */

  /* Der rechte Teil der Werkzeugleiste bricht hier um, statt die Seite zu
     verbreitern; `.portal-werkzeuge` selbst bricht seit #7066 in jeder
     Geräteklasse um (siehe dort). */
  .portal-werkzeuge-rechts {
    flex-wrap: wrap;
  }

  .bro-tabelle:not(.portal-tabelle-karte *) {
    display: block;
    overflow-x: auto;
  }
}

/* Wer weniger Bewegung eingestellt hat, bekommt Schublade und Gruppenpfeil
   ohne Gleiten. Steht nach der Schublade, damit die Regel sie überstimmt. */
@media (prefers-reduced-motion: reduce) {
  .portal-seitenleiste,
  :root[data-leiste="schmal"] .portal-seitenleiste,
  .portal-nav-pfeil {
    transition: none;
  }
}

@media (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (max-height: 479px) and (orientation: landscape) {
  /* Höchstens 479px hoch: Die Innenabstände schrumpfen, damit der Inhalt
     selbst noch Zeilen hat. */
  .portal-inhalt {
    padding: var(--bro-abstand-8) var(--bro-abstand-16);
    gap: var(--bro-abstand-12);
  }
}

@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (max-height: 479px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (orientation: portrait), (min-width: 768px) and (max-width: 1279px) and (min-height: 480px) and (orientation: landscape) {
  /* Tipp-Flächen in Fingergröße (`beruehrungsFlaeche`): Knöpfe, Eingaben,
     Navigationspunkte und Menüpunkte, ohne Ausnahme je Seite. */
  .bro-knopf,
  .bro-eingabefeld,
  .bro-navigationspunkt,
  .bro-filter-chip,
  .portal-nutzer-menue-punkt,
  .portal-unterleiste-punkt,
  .portal-nutzer,
  .portal-gruppen-umschalter-knopf,
  .portal-gruppen-umschalter-punkt,
  .portal-gruppen-abschnitt-titel {
    min-height: var(--bro-beruehrungsflaeche);
  }

  .bro-tabelle td,
  .bro-tabelle th {
    padding-block: var(--bro-abstand-12);
  }
}

.portal-suche-ergebnis {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-16);
}

/* #10207: Emils Antwort steht NEBEN den Treffern (Variante C); schmal darunter. */
.portal-suche-treffer {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-16);
  min-width: 0;
}

.portal-suche-mit-emil {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  align-items: start;
}

.portal-suche-mit-emil > .portal-suche {
  grid-column: 1 / -1;
}

.portal-suche-emil {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
}

@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (max-height: 479px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (orientation: portrait) {
  .portal-suche-mit-emil {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Mein Konto › Emil (#10207): drei Wahlkarten als radiogroup. */
.portal-emil-konto {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-16);
}

.portal-emil-wahlen {
  display: grid;
  gap: var(--bro-abstand-8);
  margin-bottom: var(--bro-abstand-12);
}

.portal-emil-wahl {
  display: flex;
  align-items: flex-start;
  gap: var(--bro-abstand-12);
  padding: var(--bro-abstand-12);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
  background: var(--bro-flaeche-1);
  cursor: pointer;
}

.portal-emil-wahl:has(input:checked) {
  border-color: var(--bro-akzent);
  background: var(--bro-akzent-flaeche);
}

.portal-emil-wahl-text {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
}

.portal-suchgruppe {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
}

.portal-suchtreffer-liste {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Titel über Unterzeile, nicht nebeneinander: Die Unterzeile ist bei Kunden
   „Ort · Branche" und bei Belegen „Rechnung {Empfänger}" — beides kann lang
   werden, und in einer Zeile mit dem Titel wäre es der Teil, der abgeschnitten
   wird. */
.portal-suchtreffer {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
  padding: var(--bro-abstand-8) 0;
  border-top: 1px solid var(--bro-linie);
}

.portal-suchtreffer:first-child {
  border-top: 0;
  padding-top: 0;
}

.portal-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-8);
}

.portal-tabelle-karte {
  padding: var(--bro-abstand-8) var(--bro-abstand-16) var(--bro-abstand-16);
  overflow-x: auto;
}

/*
 * Eine breite Tabelle scrollt in ihrem EIGENEN Rahmen, nie die Seite — auf
 * allen Breiten (#7286, aus #6744). Der Rahmen ist die Karte
 * (`portal-tabelle-karte`, darüber) oder, bei einer nackten `bro-tabelle`,
 * ihr Elternelement.
 *
 * Warum nicht die Tabelle selbst wie unter `schmal`: Mit `display: block`
 * schrumpft eine schmale Tabelle auf ihren Inhalt — gemessen in Chromium bei
 * 900px verfügbarer Breite auf 38px, die Zeilen enden mitten in der Karte.
 * `display: grid` oder `flex` auf der Tabelle trennen Kopf und Rumpf in zwei
 * anonyme Tabellen, die Spalten fluchten nicht mehr. Nur ein scrollender
 * Elternrahmen hält volle Breite und Spalten zugleich.
 *
 * `:where()` hält die Spezifität bei null: Jede ausdrückliche
 * `overflow`-Regel einer Seite gewinnt weiter.
 */
:where(:has(> .bro-tabelle:not(.portal-tabelle-karte *))) {
  overflow-x: auto;
}

/* Titel und Einleitung in einer Tabellenkarte bekommen denselben Rand wie
   die Tabellenzellen, damit Kopf und Spalten fluchten (#6744, Scheibe 3b). */
.portal-tabelle-karte > h2 {
  margin: var(--bro-abstand-8) var(--bro-abstand-12) 0;
}

.portal-tabelle-karte > h2 + p {
  margin: var(--bro-abstand-4) var(--bro-abstand-12) var(--bro-abstand-12);
}

/*
 * Der Papierkorb der Kundenakten (Issue #2733).
 *
 * Er ist bewusst mehr als ein Aufhänger für den Test: Der Abstand trennt
 * Überschrift, Erklärung, Tabelle und den Rückweg — dieselbe Anordnung wie
 * beim Angebots-Papierkorb (`portal-beleg`), damit sich zwei Papierkörbe nicht
 * verschieden anfühlen. Die Klasse ist zugleich der ANKER, an dem der
 * E2E-Test seinen Griff festmacht: Ein seitenweiter Locator wird durch einen
 * fremden, für sich korrekten PR mehrdeutig und bricht dann auf jedem Zweig.
 */
.portal-kunden-papierkorb {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
  align-items: flex-start;
}

/* Der Papierkorb der Verwaltung (Issue #2168) — gelöschte Zugänge und Teams.
   Abschnitts-Anker und Abstand wie beim Kunden-Papierkorb darüber; nur Tokens,
   keine festen Werte (B14, ADR-0003). Der Anker trägt zugleich den Griff, mit
   dem `papierkorb.test.ts` prüft, dass der Abschnitt keinen Schreibweg außer
   dem Zurückholen anbietet — ein seitenweiter Griff würde durch einen fremden,
   für sich korrekten PR mehrdeutig. */
.portal-verwaltung-papierkorb {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
  align-items: stretch;
}

.portal-verwaltung-papierkorb-abschnitt {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
}

/* Nutzerverwaltung in Reitern (Nasri, 14.10.2026: „alles unsortiert …
   zu überladen, fass es besser zusammen, meinetwegen in Untermenüs“). Die
   Übersicht hat die Reiter Nutzer / Neuer Nutzer / Teams, die Akte einer
   Person Stammdaten / Anmeldung / Rechte; die Rechte stehen je Bereich in
   einem aufklappbaren Abschnitt. Die Reiter selbst sind die gemeinsamen
   `portal-chips` wie in der Kundenakte. Nur Tokens (B14, ADR-0003). */
.portal-verwaltung-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--bro-abstand-8) var(--bro-abstand-16);
}

.portal-verwaltung-nebenwege {
  margin: 0;
}

/* Ein Reiter-Abschnitt hält seine Karten mit demselben Abstand wie der
   Inhaltsbereich (`.portal-inhalt`), in dem sie sonst direkt stünden. */
.portal-verwaltung-abschnitt:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-24);
}

.portal-verwaltung-akte-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--bro-abstand-12) var(--bro-abstand-24);
}

.portal-verwaltung-akte-kopf h2,
.portal-verwaltung-akte-kopf p {
  margin: 0;
}

.portal-verwaltung-aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-8);
}

.portal-verwaltung-aktionen form {
  margin: 0;
}

.portal-rechte-gruppe {
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
  margin-top: var(--bro-abstand-8);
}

.portal-rechte-gruppe > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--bro-abstand-8);
  padding: var(--bro-abstand-8) var(--bro-abstand-12);
  cursor: pointer;
  min-height: var(--bro-beruehrungsflaeche);
  align-content: center;
}

.portal-rechte-gruppe > summary::-webkit-details-marker {
  display: none;
}

/* Der Pfeil zeigt, dass der Bereich aufklappt — `display: flex` nimmt dem
   `summary` den eingebauten. */
.portal-rechte-gruppe > summary > strong::before {
  content: "\25B8" / "";
  display: inline-block;
  width: var(--bro-abstand-16);
  color: var(--bro-tinte-2);
}

.portal-rechte-gruppe[open] > summary > strong::before {
  content: "\25BE" / "";
}

.portal-rechte-gruppe[open] > summary {
  border-bottom: 1px solid var(--bro-linie);
}

.portal-rechte-gruppe > summary [data-vergeben]:not([data-vergeben="0"]) {
  color: var(--bro-akzent-text);
  font-weight: var(--bro-schrift-betont-gewicht);
}

.portal-rechte-gruppe > table {
  margin: 0;
}

.portal-rechte-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  gap: var(--bro-abstand-12) var(--bro-abstand-24);
}

.portal-rechte-abschnitt h3 {
  margin: 0 0 var(--bro-abstand-4);
}

.portal-rechte-abschnitt ul {
  margin: 0;
  padding-left: var(--bro-abstand-16);
}

.portal-modul-rollen th[scope="rowgroup"] {
  vertical-align: top;
  text-align: left;
}

/* Meldung „unvollständig“ nach einer Anonymisierung, bei der ein Beitrag
   eines Fachpakets scheiterte (#7749): Text und Wiederhol-Formular
   untereinander. Die Klasse ist zugleich der Anker der Tests. */
.portal-verwaltung-anonymisierung-unvollstaendig {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
}

/* Die Sperrliste (Issue #2170) — Abschnitts-Anker und Abstand wie beim
   Papierkorb nebenan. Nur Tokens, keine festen Werte (B14, ADR-0003). */
.portal-sperrliste {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
  align-items: flex-start;
}

/*
 * Die Gutschein-Seite (Issue #2706) — vier Karten mit gleicher Innenordnung:
 * anlegen, suchen, der Gutschein selbst, sein Beleg-Ausweis.
 *
 * Jede trägt eine eigene Klasse, und das ist nicht Kosmetik: Sie sind die
 * ANKER, an denen die E2E-Tests greifen. Vier Formulare auf einer Seite tragen
 * zusammen zweimal „Betrag (€)" und dreimal einen Knopf mit „Gutschein" im
 * Namen — ein seitenweiter Griff wäre hier nicht bloß spröde, er wäre von
 * Anfang an mehrdeutig.
 */
.portal-gutschein-anlegen,
.portal-gutschein-suche,
.portal-gutschein,
.portal-gutschein-beleg,
.portal-gutschein-sperre {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  align-items: flex-start;
  max-width: 34rem;
}

/*
 * Die eigenen Kontierungsregeln (Issue #2251) — eine Anlege-Karte, die Liste
 * und, je Zeile, ein Änderungs- und ein Umschalt-Formular.
 *
 * Auch hier sind die Klassen ANKER, nicht Kosmetik, und die Seite braucht sie
 * dringender als die meisten: Das Anlege-Formular und JEDE Zeile der Liste
 * tragen dieselben Feldnamen und dieselbe Kontierungs-Auswahl. Ein
 * seitenweiter Griff wäre bei zwei Regeln schon mehrdeutig — und die
 * Verneinung „dieser Text steht nicht mehr da" ginge ins Leere, weil derselbe
 * Text als Platzhalter im Anlege-Formular stehen bleibt (genau daran ist der
 * erste Entwurf des Seitentests umgefallen).
 */
.portal-lernregel-anlegen,
.portal-lernregel-liste,
.portal-lernregel-fehler {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  align-items: flex-start;
}

/*
 * Die beiden Formulare je Zeile stehen NEBENEINANDER, nicht untereinander:
 * Sie sitzen in einer Tabellenzelle, und eine gestapelte Zelle triebe die
 * Zeilenhöhe der ganzen Liste auseinander.
 */
.portal-lernregel-aendern {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-8);
  align-items: center;
}

.portal-lernregel-umschalten {
  display: inline-flex;
  margin-top: var(--bro-abstand-8);
}

/*
 * Kontenrahmen und Bankkonten (#6356): drei Abschnitte, je Liste, Anlege-
 * Formular und je Zeile ein eingeklapptes Änderungs-Formular (`<details>`,
 * ohne Skript). Der Abschnitt trägt die Kennung, an der ein E2E-Locator
 * hängt; die stillgelegte Zeile ist am Ton erkennbar, nicht nur an der
 * Pille. Nur Tokens (B14, ADR-0003).
 */
.portal-kontenrahmen-abschnitt {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
  align-items: flex-start;
  margin-top: var(--bro-abstand-16);
}

.portal-kontenrahmen-abschnitt h2,
.portal-kontenrahmen-abschnitt p {
  margin: 0;
}

.portal-kontenrahmen-nur-lesen {
  margin-top: var(--bro-abstand-8);
}

.portal-kontenrahmen-anlegen {
  margin-top: var(--bro-abstand-8);
}

.portal-kontenrahmen-zeile--stillgelegt td {
  color: var(--bro-tinte-2);
}

.portal-kontenrahmen-aendern summary {
  cursor: pointer;
  color: var(--bro-akzent);
}

.portal-kontenrahmen-aendern .portal-formular {
  margin-top: var(--bro-abstand-8);
  min-width: 18rem;
}

.portal-kontenrahmen-umschalten {
  display: inline-flex;
  margin-top: var(--bro-abstand-8);
}

/*
 * Kategorien (#6415): dieselbe Bauart wie der Kontenrahmen darüber; die
 * Reiter Ausgaben/Einnahmen sind Filter-Chips in der gemeinsamen Hülle
 * `.portal-chips` (#7064). Die Alt-Farbe erscheint als Text (`<code>`), nicht
 * als Farbfeld — ein Farbfeld aus einem Datenwert wäre eine feste Farbe
 * außerhalb der Tokens (B14, ADR-0003).
 */
.portal-kategorien-abschnitt {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
  align-items: flex-start;
  margin-top: var(--bro-abstand-16);
}

.portal-kategorien-abschnitt h2,
.portal-kategorien-abschnitt p {
  margin: 0;
}

.portal-kategorien-nur-lesen,
.portal-kategorien-anlegen {
  margin-top: var(--bro-abstand-8);
}

.portal-kategorien-zeile--stillgelegt td {
  color: var(--bro-tinte-2);
}

.portal-kategorien-aendern summary {
  cursor: pointer;
  color: var(--bro-akzent);
}

.portal-kategorien-aendern .portal-formular {
  margin-top: var(--bro-abstand-8);
  min-width: 18rem;
}

/*
 * Angebots-Konfigurator (#6482): Liste der Vorlagen als Karten, Bearbeiten
 * mit Gruppen und Optionen als Feldgruppen, der Assistent mit Radio,
 * Checkbox oder Mengenfeld je Gruppe. Nur Tokens (B14, ADR-0003).
 */
.portal-konfigurator-abschnitt {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
  margin-top: var(--bro-abstand-16);
}

.portal-konfigurator-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: var(--bro-abstand-12);
  margin: 0;
  padding: 0;
  list-style: none;
}

.portal-konfigurator-vorlage p,
.portal-konfigurator-abschnitt h2 {
  margin: 0;
}

.portal-konfigurator-vorlage {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
}

.portal-konfigurator-loeschen {
  display: inline;
}

.portal-konfigurator-nur-lesen,
.portal-konfigurator-anlegen,
.portal-konfigurator-speicherstand {
  margin-top: var(--bro-abstand-8);
}

.portal-konfigurator-formular,
.portal-konfigurator-assistent {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
  margin-top: var(--bro-abstand-12);
}

.portal-konfigurator-gruppe {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
}

.portal-konfigurator-option {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: var(--bro-abstand-8);
  border: 1px solid var(--bro-linie);
  padding: var(--bro-abstand-8);
}

.portal-konfigurator-wahl {
  align-items: flex-start;
}

.portal-kategorien-umschalten {
  display: inline-flex;
  margin-top: var(--bro-abstand-8);
}

.portal-kategorien-schluessel,
.portal-kategorien-farbe {
  color: var(--bro-tinte-2);
}

/*
 * Die beiden Formulare INNERHALB der Gutschein-Karte. Sie erben den
 * Karten-Abstand nicht, weil sie selbst keine Karte sind — ohne diese Regel
 * klebten Beschriftung, Feld und Knopf aneinander.
 */
.portal-gutschein-einloesen,
.portal-gutschein-sperren {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
  align-self: stretch;
}

/*
 * Der GoBD-Ausweis der Einlösung. Er steht in derselben Schrift wie der Beleg,
 * auf dem er landet — wer ihn hier liest, soll genau das sehen, was gedruckt
 * wird. Genau in dieser Zeile stand `40,5 €` statt `40,50 €` (#2476), und
 * niemand hat es gesehen, weil es keine Seite gab.
 */
.portal-gutschein-belegzeile {
  font-variant-numeric: tabular-nums;
}

.portal-name-zelle {
  display: inline-flex;
  align-items: center;
  gap: var(--bro-abstand-12);
}

.portal-tabelle-leer {
  text-align: center;
  padding: var(--bro-abstand-32) var(--bro-abstand-16);
  color: var(--bro-tinte-2);
}

/*
 * Listen per Klick auf die Spaltenüberschrift sortieren (#9032, Bro wie das
 * Alt). Das Skript (`tabellen-sortieren.ts`) macht die Überschrift zum Knopf
 * und setzt `aria-sort` an die Zelle; der Pfeil kommt aus dem Stil und nicht
 * aus dem Text — so bleibt der Text der Überschrift, was der Server schrieb.
 * Der Pfeil steht in der Zeichenfolge ohne Vorlesetext (`/ ""`), die erste
 * Angabe ist der Rückfall für Browser, die das nicht kennen.
 */
.portal-sortier-knopf {
  display: inline-flex;
  align-items: center;
  gap: var(--bro-abstand-4);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  text-transform: inherit;
  white-space: inherit;
  cursor: pointer;
}

.portal-sortier-knopf::after {
  content: "\2195";
  content: "\2195" / "";
  color: var(--bro-tinte-3);
}

th[aria-sort="ascending"] > .portal-sortier-knopf::after {
  content: "\2191";
  content: "\2191" / "";
  color: var(--bro-akzent-text);
}

th[aria-sort="descending"] > .portal-sortier-knopf::after {
  content: "\2193";
  content: "\2193" / "";
  color: var(--bro-akzent-text);
}

.portal-sortier-knopf:hover {
  color: var(--bro-tinte-1);
}

.portal-sortier-knopf:focus-visible {
  outline: 2px solid var(--bro-akzent);
  outline-offset: 2px;
  border-radius: var(--bro-radius-s);
}

th:has(> .portal-sortier-knopf) {
  cursor: pointer;
}

.portal-fuss {
  display: flex;
  justify-content: space-between;
  gap: var(--bro-abstand-12);
  flex-wrap: wrap;
  padding-top: var(--bro-abstand-12);
  border-top: 1px solid var(--bro-linie);
  color: var(--bro-tinte-2);
}

/* Aufgaben-Seite (P1-008) */

/*
 * Behandlungsfotos (Issue #1158) — die beiden Klassen entstanden dort und
 * waren NICHT definiert. Aufgefallen ist das erst durch den Klassen-Wächter
 * aus #1880, wenige Stunden später: Der Pflicht-Check war grün, und die
 * Fotoliste wäre unformatiert ausgeliefert worden.
 *
 * Deshalb stehen sie hier und nicht in der Ausnahmeliste jenes Wächters. Die
 * Liste ist ausdrücklich Altbestand — wer eine Klasse anfasst, nimmt sie
 * heraus, und für die eigenen von heute gilt das zuerst.
 */
.portal-fotoliste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: var(--bro-abstand-12);
}

.portal-foto {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
  padding: var(--bro-abstand-8);
  border: 1px solid var(--bro-linie);
}

/* Ein Behandlungsfoto bestimmt nicht die Breite der Seite. */
.portal-foto img {
  width: 100%;
  height: auto;
  display: block;
}

/* Trefferliste der Art.-15-Auskunft (#2050). */
.portal-auskunft-treffer-liste {
  list-style: none;
  margin: var(--bro-abstand-12) 0 0;
  padding: 0;
}

.portal-auskunft-treffer {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
  padding: var(--bro-abstand-12) 0;
  border-bottom: 1px solid var(--bro-linie);
}

.portal-auskunft-treffer:last-child {
  border-bottom: none;
}

/* Newsletter-Vorschau der Kundenbindung (#2147). */
.portal-kundenbindung-vorschau {
  margin-top: var(--bro-abstand-12);
}

.portal-kundenbindung-beispiele {
  list-style: none;
  margin: var(--bro-abstand-8) 0 0;
  padding: 0;
}

/* Trefferliste der Chargen-Suche (#2462). */
.portal-chargensuche-treffer-liste {
  list-style: none;
  margin: var(--bro-abstand-12) 0 0;
  padding: 0;
}

.portal-chargensuche-treffer {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
  padding: var(--bro-abstand-12) 0;
  border-bottom: 1px solid var(--bro-linie);
}

.portal-chargensuche-treffer:last-child {
  border-bottom: none;
}
.portal-aufgabenliste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.portal-aufgabe {
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-12);
  padding: var(--bro-abstand-12) var(--bro-abstand-8);
  border-bottom: 1px solid var(--bro-linie);
}

.portal-aufgabe:last-child {
  border-bottom: none;
}

.portal-aufgabe-abhaken {
  margin: 0;
  display: flex;
}

.portal-aufgabe-titel {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Erledigen-Quittung (P2-004, ADR-0005): Zeiten/Deckkraft als Tokens.
   „wartend" = Ups-Fenster (Haken sichtbar, halbtransparent);
   „schliesst" = Jalousien-Effekt beim Freigeben des Platzes. */

.portal-erledigt-wartend {
  opacity: var(--bro-erledigt-deckkraft);
}

.portal-erledigt-wartend .bro-abhaken {
  border-color: var(--bro-erfolg);
  background: color-mix(in oklab, var(--bro-erfolg) 9%, var(--bro-flaeche-1));
  color: var(--bro-erfolg);
}

.portal-erledigt-schliesst {
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
  border-bottom-width: 0;
  opacity: 0;
  transition:
    height var(--bro-erledigt-schliessdauer) ease,
    padding var(--bro-erledigt-schliessdauer) ease,
    border-bottom-width var(--bro-erledigt-schliessdauer) ease,
    opacity var(--bro-erledigt-schliessdauer) ease;
}

@media (prefers-reduced-motion: reduce) {
  .portal-erledigt-schliesst {
    transition: none;
  }
}

/* Übersicht (P1-008) */

.portal-uebersicht {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--bro-abstand-16);
  align-items: start;
}

.portal-uebersicht-karte {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
}

.portal-uebersicht-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.portal-uebersicht-kopf h2 {
  margin: 0;
}

.portal-uebersicht-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
}

.portal-uebersicht-zeile {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--bro-abstand-8);
}

/* Eine Missstandszeile trägt Titel, Erklärung und Weg. Nebeneinander wurde
 * jede dieser drei Aussagen auf breiten Bildschirmen auf wenige Wörter
 * zusammengedrückt (#4574); untereinander bleibt jede davon lesbar. */
.portal-uebersicht-zeile[data-missstand] {
  align-items: flex-start;
  flex-direction: column;
}

/* Journal-Zeile (P2-012): Zeit · Text (dehnt sich) · Kennzeichnungen. */
.portal-journal-zeile {
  align-items: center;
  gap: var(--bro-abstand-8);
}

.portal-journal-text {
  flex: 1;
}

/* Zeilen mit Erledigen-Kreis (P2-004): Kreis + Titel mittig ausrichten. */
.portal-uebersicht-zeile[data-aufgabe] {
  align-items: center;
}

.portal-uebersicht-mehr {
  color: var(--bro-akzent);
  text-decoration: none;
}

.portal-uebersicht-mehr:hover {
  text-decoration: underline;
}

/* Die Knöpfe einer Karte (Reaktivierung): zwei Formulare nebeneinander, die umbrechen dürfen (#6744). */
.portal-uebersicht-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-8);
}

.portal-uebersicht-aktion {
  margin: 0;
}

/* Berichte (P1-017) — schlichte Token-Balken, keine Chart-Bibliothek */

.portal-berichte {
  display: grid;
  /* `min(…, 100%)` (#7286): Auf dem Handy ist die Spalte schmaler als
     24rem; ohne die Klammer drückte das Raster die Seite 10px breit. */
  grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
  gap: var(--bro-abstand-16);
  align-items: start;
}

/*
 * Die Umsatz-Monate (#3225): Tabelle, Protokollzeilen und die beiden
 * Formulare stehen untereinander in EINER Karte. Der Abstand ist das Einzige,
 * was sie braucht — die Tabelle bringt ihre Gestalt aus `bro-tabelle` mit,
 * die Formulare aus `portal-formular`. Die Klasse selbst ist trotzdem nötig:
 * Sie ist der Anker, an dem ein E2E-Locator den Abschnitt greift, statt
 * seitenweit nach „Monat" zu suchen.
 */
.portal-berichte-umsatzmonate {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-16);
}

/*
 * Ein Pflegeformular je Leistung (#2554): zehn Angaben untereinander, viele
 * davon in EINER Karte gestapelt. Dieselbe Bauart wie `portal-berichte-
 * umsatzmonate` darüber — die Felder bringen ihre Gestalt aus
 * `portal-formular` mit, hier steht nur, was den Stapel lesbar hält: Abstand
 * und eine Trennlinie zum nächsten Formular. Ohne die Linie laufen zehn Felder
 * der einen Leistung optisch in die zehn der nächsten.
 *
 * Die Klasse selbst ist auch ohne diese Gestalt nötig: Sie ist der Anker, an
 * dem ein E2E-Locator SEIN Formular greift, statt seitenweit nach
 * „Behandlungsdauer" zu suchen — und auf dieser Seite steht dieselbe
 * Beschriftung so oft, wie der Katalog Artikel hat.
 */
.portal-leistung-pflege,
.portal-leistung-buchungsangaben,
.portal-leistung-bild {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  padding-block: var(--bro-abstand-16);
}

/* Die Buchungsangaben (#6507) gehören zu der Leistung darüber: kein eigener
   Abstand nach oben, damit sie nicht wie die nächste Leistung aussehen. */
.portal-leistung-buchungsangaben,
.portal-leistung-bild {
  padding-block-start: 0;
}

/* Die Linie trennt zwei Leistungen. Seit #6507 folgt auf jedes Pflegeformular
   das Formular seiner Buchungsangaben; die nächste Leistung beginnt also nach
   ihm, nicht nach dem Pflegeformular. Mit #6509 folgt darauf noch das Bild
   der Leistung (Formular oder, ohne Bildspeicher, ein Satz). */
.portal-leistung-bild + .portal-leistung-pflege {
  /* `--bro-linie` ist eine FARBE (definiert in `packages/design-tokens/
     tokens.css`), keine Rahmen-Kurzform: ohne Breite und Stil rendert
     `border-top: var(--bro-linie)` gar keine Linie. Dieselbe Schreibweise wie
     an den 29 anderen Stellen dieser Datei.

     Der Wert selbst steht hier ABSICHTLICH nicht: Diese Datei wird von
     `pnpm stile:generieren` samt Kommentaren in `stile.generiert.ts`
     eingebettet, und die Token-Wache (B14.7) liest dort jedes Farb-Literal —
     auch eines, das bloss erklaerend zitiert ist. Eine erste Fassung dieses
     Kommentars nannte den Hexwert und hat genau daran den Pflicht-Check
     rotgemacht. */
  border-top: 1px solid var(--bro-linie);
}

/*
 * Die Abweichung eines abgeschlossenen Monats (Issue #4048, Punkt D).
 *
 * Sie steht UNTER der festgeschriebenen Zahl, nicht daneben: In einer
 * Tabellenzelle nebeneinander schöbe der Satz die Spalte auf und die ganze
 * Tabelle über den Bildrand. Ein eigener Block bricht stattdessen um.
 *
 * **Keine feste Farbe** (B14.7) — die Auszeichnung trägt die kleinere Schrift
 * des Hauses, den Rest entscheidet das Token-Set. Und sie steht als Text da,
 * nicht als Farbe allein: Wer die Farbe nicht sieht, liest den Satz.
 */
.portal-berichte-monatsabweichung {
  display: block;
  font-size: var(--bro-schrift-klein-groesse);
}

/*
 * Zeitraum-Wahl (#403): steht ÜBER den Abschnitten und nimmt deshalb die
 * volle Breite des Rasters ein — sie gilt für mehrere Berichte, nicht für
 * einen.
 */
.portal-berichte-zeitraum {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--bro-abstand-16);
}

.portal-berichte-zeitraum label {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
}

.portal-berichte-zeitraum p {
  flex-basis: 100%;
  margin: 0;
  color: var(--bro-tinte-2);
}

/*
 * Die benannten Lücken der Stundenkosten-Auswertung. Sie stehen bewusst
 * NICHT klein und grau weggeräumt: Zeit ohne Satz ist der Grund, warum eine
 * Kostensumme unvollständig sein kann.
 */
.portal-berichte-luecken {
  margin: 0;
  padding-left: var(--bro-abstand-16);
}

/*
 * Eine unbrauchbar gewordene Auswertungsvorlage (#1908).
 *
 * Sie steht an ihrem Platz in der Liste, unter ihrem Namen — nicht in einem
 * Sonderblock am Ende, den man erst finden muss. Damit sie sich trotzdem von
 * den gesunden Zeilen abhebt, trägt sie den linken Rand in der Fehlerfarbe und
 * einen sehr blassen Untergrund daraus (`color-mix`, wie `packages/ui`).
 *
 * **Kein Rot auf der Schrift.** Die Zeile ist kein Fehler des Betriebs, sondern
 * eine Folge der Weiterentwicklung — sie soll auffallen und nicht alarmieren.
 * Der Grund darunter steht in `--bro-tinte-2` wie jeder andere Kleintext.
 */
.portal-berichte-vorlage-unbrauchbar {
  border-left: 3px solid var(--bro-fehler);
  background: color-mix(in oklab, var(--bro-fehler) 5%, var(--bro-flaeche-1));
}

.portal-berichte-vorlage-unbrauchbar p {
  margin: 0 0 var(--bro-abstand-8);
  color: var(--bro-tinte-2);
}

.portal-balken-liste {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
}

.portal-balken-zeile,
.portal-durchsatz-monat {
  display: grid;
  grid-template-columns: 9rem 1fr auto;
  align-items: center;
  column-gap: var(--bro-abstand-12);
  row-gap: var(--bro-abstand-4);
}

.portal-balken-spur {
  display: block;
  height: var(--bro-abstand-12);
  border-radius: var(--bro-radius-s);
  background: var(--bro-flaeche-0);
  overflow: hidden;
}

.portal-balken {
  display: block;
  height: 100%;
  border-radius: var(--bro-radius-s);
  background: var(--bro-akzent);
}

.portal-balken--erledigt {
  background: var(--bro-erfolg);
}

.portal-balken-wert {
  white-space: nowrap;
}

/* Finanzen (P1-015) */

.portal-beleg {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-16);
  max-width: 56rem;
}

.portal-beleg-kopf {
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-12);
}

.portal-beleg-kopf h2 {
  margin: 0;
}

/* Bro Sign am Angebot (#10502): der Abschnitt mit Signaturstand und dem
   Formular „Zur Unterschrift senden“. Zugleich der benannte Anker für
   E2E-Locators. Nur Tokens, keine festen Werte. */
.portal-angebot-sign {
  display: grid;
  gap: var(--bro-abstand-12);
  margin-block: var(--bro-abstand-12);
}

.portal-angebot-sign h3 {
  margin: 0;
}

/* Dokumentnachweis (#4399): Beide Abschnitte sitzen auf `karteKlassen()` und
   brauchen nur ihren eigenen Innenabstand. Sie sind zugleich die benannten
   Anker für E2E-Locators — ein seitenweiter Locator wird durch einen fremden
   PR mehrdeutig. Nur Tokens, keine festen Werte. */
.portal-dokumentnachweis-kopf {
  display: grid;
  gap: var(--bro-abstand-8);
}
.portal-dokumentnachweis-kopf h2 {
  margin: 0;
}
.portal-dokumentnachweis-pruefung {
  display: grid;
  gap: var(--bro-abstand-12);
}
.portal-dokumentnachweis-pruefung h2 {
  margin: 0;
}

/* Reiter „Dokumente" der Kundenakte (#5918): die Karten Angebote, Verträge,
   Kundendokumente. Dieselbe Bauart wie beim Dokumentnachweis oben — sie
   sitzen auf `karteKlassen()` und sind zugleich die benannten Anker für
   E2E-Locators (Hausregel: kein seitenweiter Locator). */
.portal-dokumente-angebote,
.portal-dokumente-vertraege,
.portal-dokumente-kundendokumente {
  display: grid;
  gap: var(--bro-abstand-12);
}
.portal-dokumente-angebote h2,
.portal-dokumente-vertraege h2,
.portal-dokumente-kundendokumente h2 {
  margin: 0;
}
/* Eigene Dateien am Kunden (#5919): das Upload-Formular unter der Liste und
   der Entfernen-Knopf, der in seiner Tabellenzelle keinen Rand braucht. */
.portal-dokumente-hochladen {
  display: grid;
  gap: var(--bro-abstand-8);
}
.portal-dokumente-entfernen {
  margin: 0;
}

/* Die zwei Wege zum echten Beleg-PDF (Issue #2031): Ansehen, Herunterladen. */
.portal-beleg-pdf-links {
  display: flex;
  gap: var(--bro-abstand-8);
  margin: 0;
}

/*
 * Die Anhangs-Liste am Eingangsbeleg (Issue 2375). Eine schlichte Liste ohne
 * Punkte: Sie steht in einer Tabellenzelle, und Aufzählungszeichen neben
 * Dateinamen lesen sich dort als Unordnung statt als Struktur.
 */
.portal-beleg-anhaenge {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--bro-abstand-4);
}

.portal-beleg-daten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: var(--bro-abstand-12);
  margin: 0;
}

/*
 * Die Beleg-Auslese am Eingangsbeleg (Issue #5364).
 *
 * Der Knopf „Auslesen lassen" steht in der Anhangs-Zelle der Tabelle und auf
 * der Vorschlagsseite — schmal und ohne eigenen Rand, damit er die Zeile
 * nicht sprengt.
 */
.portal-auslese-anstossen {
  display: inline-block;
  margin: 0 0 0 var(--bro-abstand-8);
}

/*
 * Eine Absage der Auslese: eigene Meldung mit Überschrift, Grund und
 * Handlung. Die linke Linie trägt die Warnfarbe, damit „Grenze erreicht"
 * nicht wie ein Erfolg aussieht — und nicht wie ein Absturz.
 */
.portal-auslese-absage {
  border-left: 3px solid var(--bro-warnung);
  padding-left: var(--bro-abstand-12);
}

.portal-auslese-absage p {
  margin: 0 0 var(--bro-abstand-4);
}

.portal-beleg-gebucht dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--bro-abstand-4) var(--bro-abstand-12);
  margin: 0;
}

.portal-beleg-gebucht dd {
  margin: 0;
}

.portal-beleg-auslese-anhaenge ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--bro-abstand-8);
}

/*
 * Der Vorschlag in drei getrennten Listen. Getrennt heißt hier auch sichtbar
 * getrennt: „nicht gefunden" und „verworfen" verlangen verschiedene
 * Handlungen und dürfen nicht wie eine Liste aussehen.
 */
.portal-beleg-vorschlag {
  display: grid;
  gap: var(--bro-abstand-12);
}

.portal-vorschlag-ausgelesen,
.portal-vorschlag-nicht-gefunden,
.portal-vorschlag-verworfen {
  border-top: 1px solid var(--bro-linie);
  padding-top: var(--bro-abstand-8);
}

/* Die Hinweise zum Vorschlag sind ein `portal-meldung`-Kasten (#7548) mit
   Überschrift und Liste; Fläche und Rand kommen von dort. */
.portal-beleg-vorschlag .portal-meldung {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
}

.portal-beleg-vorschlag .portal-meldung h3,
.portal-beleg-vorschlag .portal-meldung ul {
  margin: 0;
}

.portal-beleg-vorschlag .portal-meldung ul {
  padding-left: var(--bro-abstand-16);
}

.portal-vorschlag-verworfen {
  border-top-color: var(--bro-warnung);
}

/*
 * Übernehmen und Verwerfen am Vorschlag (Issue #5619). „Übernehmen" steht
 * schmal hinter dem ausgelesenen Wert in derselben Zeile, „Verwerfen" unter
 * den Listen. Die Absage trägt dieselbe Warnlinie wie die Absage der
 * Auslese; der Hinweis „gesperrt" ist nur ein Satz, keine Meldung.
 */
.portal-vorschlag-uebernehmen {
  display: inline-block;
  margin: 0 0 0 var(--bro-abstand-8);
}

.portal-vorschlag-verwerfen {
  margin: 0;
}

.portal-vorschlag-gesperrt {
  margin: 0;
}

.portal-vorschlag-absage {
  border-left: 3px solid var(--bro-warnung);
  padding-left: var(--bro-abstand-12);
}

.portal-vorschlag-absage p {
  margin: 0 0 var(--bro-abstand-4);
}

/*
 * Notiz, Kontierung und „außerhalb der Bank bezahlt“ an der Belegseite
 * (#8365): dieselbe Liste wie die gebuchten Felder darüber, die beiden
 * Formulare als knappes senkrechtes Raster.
 */
.portal-beleg-pflege dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--bro-abstand-4) var(--bro-abstand-12);
  margin: 0 0 var(--bro-abstand-12);
}

.portal-beleg-pflege dd {
  margin: 0;
}

.portal-beleg-pflegen,
.portal-beleg-ausserhalb-bezahlt {
  display: grid;
  gap: var(--bro-abstand-4);
  margin-top: var(--bro-abstand-12);
}

/*
 * Das Formular „Buchung lösen/umhängen" am Eingangsbeleg (Issue #4623). Es
 * steht in einer Tabellenzelle neben der bezahlenden Buchung — ein knappes
 * senkrechtes Raster, keine breite Kartenform, sonst sprengt es die Zeile.
 */
.portal-buchung-umhaengen {
  display: grid;
  gap: var(--bro-abstand-4);
  margin-top: var(--bro-abstand-4);
}

.portal-beleg-daten dd,
.portal-summen dd {
  margin: 0;
}

.portal-summen {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: end;
  column-gap: var(--bro-abstand-24);
  row-gap: var(--bro-abstand-4);
  margin: 0;
  border-top: 1px solid var(--bro-linie);
  padding-top: var(--bro-abstand-12);
}

.portal-summen dd {
  text-align: right;
}

.portal-beleg-link {
  color: var(--bro-akzent);
  text-decoration: none;
  font-weight: var(--bro-schrift-betont-gewicht);
}

.portal-beleg-link:hover {
  text-decoration: underline;
}

.portal-position-hinzufuegen {
  display: flex;
  gap: var(--bro-abstand-8);
  align-items: center;
}

.portal-position-hinzufuegen select {
  flex: 1;
}

.portal-position-hinzufuegen input {
  width: 6rem;
}

/*
 * Grenzpflege je Bestandszeile (Issue #1420) — zwei schmale Zahlenfelder und
 * ein ruhiger Knopf, damit die Eingabe in eine Tabellenzelle passt, ohne die
 * Zeile auseinanderzuziehen. Nur Tokens, keine eigenen Farbwerte (B14.7).
 */
.portal-grenzen-zeile {
  display: flex;
  gap: var(--bro-abstand-8);
  align-items: center;
}

.portal-grenzen-zeile input {
  width: 5rem;
}

/* Lagerorte führen (Issue #1608) */

/*
 * Ein Formular je Zeile, wie bei den Bestandsgrenzen daneben. Die Felder
 * dürfen umbrechen: In der Zeile stehen vier davon, und auf einem schmalen
 * Bildschirm ist ein Umbruch besser als ein waagerechter Rollbalken.
 */
.portal-ort-zeile {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-8);
  align-items: center;
}

.portal-ort-zeile input {
  width: 8rem;
}

/*
 * Ein Knopf, der genau eine Sache tut, sitzt in seinem eigenen Formular —
 * ohne Skript, wie das ganze Portal (ADR-0003). `margin: 0` verhindert, dass
 * der Formular-Abstand die Tabellenzelle auseinanderzieht.
 */
.portal-ort-aktion {
  margin: 0;
  display: inline-flex;
}

/* Vormerkungen (Issue #1127) */

/*
 * Zwei Knöpfe in einer Tabellenzeile — „Eingelöst" und „Zurückziehen" gehören
 * zum selben Formular, weil sie dieselbe Vormerkung betreffen und sich nur im
 * Zielzustand unterscheiden. Sie dürfen umbrechen: Auf einem schmalen Fenster
 * ist die Tabelle sonst breiter als der Bildschirm.
 */
.portal-zeilenformular {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-8);
}

/* Zeiterfassung (P1-011) */

.portal-werkzeuge-rechts {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-12);
}

.portal-zeit-einreichen {
  margin: 0;
  display: flex;
}

.portal-zeit-aktion {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--bro-abstand-8);
}

.portal-zeit-aktion + .portal-zeit-aktion {
  margin-top: var(--bro-abstand-8);
}

/* Anlege-Formular */

/*
 * Zeitliche Tagesansicht der Termine (#2161). Die Fachregel liefert Breite
 * und linken Abstand je Überschneidungsgruppe als CSS-Variablen. Dadurch
 * teilen nur tatsächlich parallele Termine ihre Zeile; alle anderen bleiben
 * über die volle Breite lesbar. Farben und Schrift kommen ausschließlich aus
 * den Design-Tokens.
 */
.portal-terminspuren {
  position: relative;
  min-height: 36rem;
  margin-bottom: var(--bro-abstand-16);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
  background: var(--bro-flaeche-0);
  overflow: hidden;
}

.portal-terminspur {
  position: absolute;
  box-sizing: border-box;
  left: var(--termin-links);
  top: var(--termin-oben);
  width: var(--termin-breite);
  height: max(var(--termin-hoehe), 2rem);
  padding: var(--bro-abstand-4) var(--bro-abstand-8);
  border: 1px solid var(--bro-akzent);
  border-radius: var(--bro-radius-s);
  background: var(--bro-flaeche-1);
  color: var(--bro-tinte-1);
  overflow: hidden;
}

/*
 * Die Wochenansicht (Issue #2161): sieben Tagesspalten, in jeder ein eigenes
 * Spurenraster.
 *
 * Die Spalten sind die TAGE — nicht Personen oder Räume. Wonach eine
 * Tagesspalte weiter unterteilt wird, entscheidet #919 und liegt eine Ebene
 * darüber; innerhalb einer Tagesspalte ordnet dieselbe Regel an wie in der
 * Tagesansicht (`berechneTerminplaetze`). Deshalb werden `.portal-terminspuren`
 * und `.portal-terminspur` hier unverändert wiederbenutzt: Ein zweites
 * Blockformat wäre eine zweite Wahrheit über dieselbe Anordnung.
 *
 * `minmax(0, 1fr)` und nicht `1fr`: Ohne die Null-Untergrenze wächst eine
 * Spalte mit langem Kundennamen über ihren Anteil hinaus und schiebt die
 * Woche seitlich aus dem Bild.
 */
.portal-wochenraster {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--bro-abstand-8);
  margin-bottom: var(--bro-abstand-16);
}

/* Schrift und Farbe kommen aus der Typo-Stufe im Markup
 * (`textKlassen("klein")` → `bro-text-klein`), nicht von hier: Ein eigenes
 * `font` wäre ein zweiter Ort für dieselbe Entscheidung. */
.portal-wochentag h3 {
  margin: 0 0 var(--bro-abstand-4);
}

/* Im Wochenraster trägt jede Spalte ihr eigenes Raster — schmaler als der
 * Tag, aber mit derselben Höhe, damit die Zeitachse über alle sieben Spalten
 * auf derselben Höhe liegt. */
.portal-wochentag .portal-terminspuren {
  min-height: 24rem;
  margin-bottom: 0;
}

.portal-formular-karte {
  max-width: 32rem;
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
}

.portal-formular-karte h2,
.portal-formular-karte p {
  margin: 0;
}

.portal-formular {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
}

/* Kundenwahl durchsuchen (#9118): dieselben Felder und Abstände wie im Formular. */
.portal-kundensuche {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
}

.portal-kundensuche p {
  margin: 0;
}

/*
 * Ein- oder zweispaltiges Formular (#7068, Scheibe 4f von #6744): Die Felder
 * (`formularFeld` in `bausteine.ts`, je Feld ein `portal-feld`) stehen auf
 * Desktop und Tablet quer in zwei Spalten, auf den schmalen Geräten (Handy
 * hoch und quer, Tablet hoch — die Token-Klasse `schmal`) in einer. Alles
 * andere im Formular (Fehlerkasten, Hinweis, Knopfreihe, Fieldset) nimmt
 * die ganze Breite. Als Zusatzklasse neben `portal-formular`: Wer eine
 * Spalte will, schreibt nur die Klasse dazu.
 */
.portal-formular-spalten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--bro-abstand-12) var(--bro-abstand-16);
  align-items: start;
}

.portal-formular-spalten > :not(.portal-feld) {
  grid-column: 1 / -1;
}

@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (max-height: 479px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (orientation: portrait) {
  .portal-formular-spalten {
    grid-template-columns: minmax(0, 1fr);
  }
}

.portal-feld-schalter {
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-8);
}

/*
 * Die Öffnungs-Einwilligung je Unterzeichner (#2799).
 *
 * Sie steht INNERHALB des `<li>` eines Unterzeichners, deshalb `row` statt der
 * Spalte von `.portal-formular`: Stand und Knopf gehören in dieselbe Zeile wie
 * der Name darüber, nicht in einen eigenen Block. `wrap` und `auto` am Rand,
 * damit ein langer Stand („erlaubt seit … — 12 Öffnungen, zuletzt …") auf
 * schmalen Geräten umbricht, statt den Knopf aus der Karte zu schieben.
 */
.portal-oeffnungs-einwilligung {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-8);
  margin-block-start: var(--bro-abstand-4);
  color: var(--bro-tinte-2);
}

.portal-oeffnungs-einwilligung button {
  margin-inline-start: auto;
}

/*
 * Die Unterlagen einer Unterschriftsmappe (#5574). Der Anker trägt den Griff,
 * mit dem `unterschriften/unterschriften.test.ts` prüft, dass die Karte keinen
 * Weg zum Inhalt anbietet (kein Link, keine Vorschau, kein Download) — ein
 * seitenweiter Griff würde durch einen fremden, für sich korrekten Link auf
 * derselben Seite rot oder, schlimmer, still grün. Nur Tokens (B14, ADR-0003).
 */
.portal-unterschriften-unterlagen {
  gap: var(--bro-abstand-8);
}

/*
 * Die Feld-Vorlagen am Entwurf einer Mappe (#6305). Der Anker trägt den Griff,
 * mit dem `unterschriften/vorlagen.test.ts` die Karte und ihre zwei Formulare
 * findet, statt Texte der ganzen Seite zu lesen (#1686). Nur Tokens (B14, ADR-0003).
 */
.portal-unterschriften-vorlagen {
  gap: var(--bro-abstand-8);
}

/*
 * Der Knopf „Erinnern" an einer versendeten Mappe (#6785). Der Anker trägt den
 * Griff, mit dem `unterschriften/erinnern.test.ts` die Meldung der Karte
 * findet, statt Texte der ganzen Seite zu lesen (#1686). Nur Tokens (B14, ADR-0003).
 */
.portal-unterschriften-erinnern {
  gap: var(--bro-abstand-8);
}

.portal-feld-schalter input {
  accent-color: var(--bro-akzent);
}

.portal-feld-hinweis {
  margin: 0;
}

.portal-formular-fehler {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  align-items: flex-start;
  /* Fehlerkasten wie v10 (dc:1037, #6901). */
  border: 1px solid var(--bro-fehler-linie);
  border-radius: var(--bro-radius-m);
  padding: var(--bro-abstand-12) var(--bro-abstand-16);
  background: var(--bro-fehler-flaeche);
}

.portal-formular-fehler ul {
  margin: 0;
  padding-left: var(--bro-abstand-16);
}

.portal-formular-aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-8);
  margin-top: var(--bro-abstand-8);
}

/*
 * Ein Formular, das nur einen Knopf trägt und NEBEN einem zweiten in derselben
 * Tabellenzelle steht (#7050, Prognose-Kennzahlen: „Speichern“ und
 * „Ausschalten“ je Zeile). Zwei Handgriffe, zwei Wege, zwei Formulare — ohne
 * diese Regel stünden sie untereinander wie eine Liste.
 */
.portal-formular-inline {
  display: inline-flex;
  align-items: center;
  gap: var(--bro-abstand-8);
  margin-right: var(--bro-abstand-8);
}

/*
 * Adresssuche über dem Koordinatenpaar (Issue 2990)
 *
 * Sie steht MITTEN in einem Formular (Fahrgast, Einrichtung) und darf deshalb
 * nicht wie ein eigenes aussehen: ein Rahmen, der sie als Beiwerk kennzeichnet,
 * mehr nicht. Ausgeliefert wird sie `hidden` und erst von `/verhalten.js`
 * gezeigt — ohne Skript gibt es sie nicht.
 *
 * Die Trefferliste trägt keine Aufzählungszeichen: Es sind Knöpfe, keine
 * Aufzählung, und ein Punkt davor läse sich wie Text zum Lesen statt wie etwas
 * zum Anklicken.
 */
.portal-ortssuche {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  margin-block: var(--bro-abstand-8);
  padding: var(--bro-abstand-8);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
}

/* „von Hand korrigieren“ unter der Anschrift (#9786): eingeklappt, mit Luft
   zum nächsten Feld; aufgeklappt stehen die beiden Zahlen eingerückt. */
.kf-lage-hand {
  margin-block: var(--bro-abstand-8);
}

.kf-lage-hand > label {
  margin-inline-start: var(--bro-abstand-8);
}

.portal-ortssuche ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
}

/*
 * Vorgabe für neue Fahrten im Fahrgast-Formular (#9402)
 *
 * Die Feldgruppe trägt eine Klasse, damit der Test sie gezielt findet. Mit
 * Klasse greift die Grundgestalt für `fieldset:not([class])` aber nicht mehr;
 * deshalb hier dieselbe Gestalt wie die Nachbar-Feldgruppe „Koordinaten“,
 * damit beide Rahmen im selben Formular gleich aussehen.
 */
.portal-fahrgast-vorgaben {
  min-width: 0;
  margin: 0;
  padding: var(--bro-abstand-12) var(--bro-abstand-16);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
}

.portal-fahrgast-vorgaben > legend {
  padding: 0 var(--bro-abstand-4);
  font-weight: var(--bro-schrift-betont-gewicht);
}

/*
 * Bestätigung eines späten Starts (Issue #3865)
 *
 * Der Losfahren-Knopf einer überfälligen Fahrt wird zur Rückfrage: ein Satz,
 * warum gefragt wird, ein Auswahlfeld für den Grund, dann der Knopf.
 *
 * `portal-formular-aktionen` darüber legt seine Kinder NEBENeinander — für
 * eine Reihe Knöpfe richtig, für diese Rückfrage falsch: Auf einem
 * Fahrer-Handy stünden Erklärung, Feld und Knopf in einer Zeile und wären
 * alle drei unlesbar schmal. Deshalb hier untereinander; alles andere
 * (Abstand, Farben, Schrift) erbt unverändert.
 *
 * Nur Tokens, keine eigenen Werte.
 */
.portal-spaetstart {
  flex-direction: column;
}

/*
 * Auslassen mit freiwilliger Angabe eines Grundes (Issue #2203)
 *
 * Dieselbe Lage und dieselbe Begründung wie beim späten Start darüber: Auf
 * einem Fahrer-Handy stünden Beschriftung, Feld, Hinweis und Knopf sonst in
 * einer Zeile und wären alle vier unlesbar schmal. Deshalb untereinander;
 * alles andere (Abstand, Farben, Schrift) erbt unverändert.
 *
 * Nur Tokens, keine eigenen Werte.
 */
.portal-auslassen {
  flex-direction: column;
}

/*
 * Kontakthistorie: Ändern und Löschen je Zeile (Issue 2132)
 *
 * Das Änderungsformular steckt in einem `<details>` und ist damit ohne
 * JavaScript bedienbar (ADR-0005) — zugeklappt kostet es keine Tabellenbreite,
 * aufgeklappt steht es unter seiner eigenen Zeile. Nur Tokens, keine eigenen
 * Farb- oder Schriftwerte.
 */
.portal-kontakt-aktionen {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  align-items: flex-start;
}

.portal-kontakt-aendern {
  margin-top: var(--bro-abstand-8);
  min-width: 16rem;
}

.portal-kontakt-loeschen {
  margin: 0;
}

/*
 * Verlauf der abgelösten Fassungen (Issue #3610) — steht neben der
 * „bearbeitet"-Pille, zugeklappt wie das Änderungsformular darüber. Nur
 * Tokens, keine eigenen Farb- oder Schriftwerte (ADR-0003).
 */
.portal-kontakt-verlauf {
  display: inline-block;
  margin-top: var(--bro-abstand-4);
}

.portal-kontakt-verlauf ul {
  margin: var(--bro-abstand-4) 0 0;
  padding-left: var(--bro-abstand-16);
}

.portal-kontakt-verlauf li + li {
  margin-top: var(--bro-abstand-8);
}

/*
 * „Stammdaten bearbeiten“ an der Stammdaten-Karte (Issue #5920) — ein
 * `<details>` statt eines Popups (ADR-0005). Das Formular darunter steht
 * abgesetzt von der Tabelle. Abstände aus Tokens (ADR-0003); die Breite ist
 * eine Lesebreite in `rem` wie bei den übrigen Formularen dieser Datei.
 */
.portal-stammdaten-bearbeiten {
  margin-top: var(--bro-abstand-8);
}

.portal-stammdaten-schnell {
  margin-top: var(--bro-abstand-8);
  max-width: 40rem;
}

/*
 * Umbenennen einer Kostenrolle (Issue #3235) — steht in derselben Zelle wie
 * der Stilllegen-Knopf. Die Felder stehen untereinander, weil sie in einer
 * Tabellenzelle nebeneinander zu schmal würden; nur Tokens, keine festen
 * Werte (ADR-0003).
 */
.portal-kostenrolle-umbenennen {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
  margin-top: var(--bro-abstand-8);
}

.portal-kostenrolle-umbenennen input {
  width: 100%;
}

/*
 * Abschluss-Formular der Warteliste (Issue #2457) — Termin-Kennung und die
 * zwei Absende-Knöpfe nebeneinander, in einer Tabellenzelle.
 */
.portal-warteliste-abschluss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-8);
}

.portal-warteliste-abschluss label {
  margin: 0;
}

.portal-warteliste-abschluss input {
  width: 10rem;
}

/* Gesperrte Felder (Issue #397) */

/*
 * Was nicht mehr geändert werden darf, sieht auch nicht änderbar aus: Muster
 * und Präfix eines angebrochenen Nummernkreises sind `readonly`, und der
 * Grund steht als Klartext daneben. Nur Tokens, keine eigenen Farbwerte.
 */
.portal-formular input[readonly] {
  background: var(--bro-flaeche-0);
  color: var(--bro-tinte-2);
  cursor: not-allowed;
}

/*
 * Entsperr-Seite (Issue 690) — der Weg zurück in einen ausgesperrten Betrieb.
 *
 * Nur Tokens, keine festen Farben (Hausregel B14). Die Marke am falschen Wort
 * ist der Grund, warum es hier überhaupt eigene Regeln gibt: Ein unbekanntes
 * Wort MUSS sichtbar sein, während es dasteht — wer 24 Wörter abtippt und
 * erst am Ende „falsch" hört, sucht blind.
 */
.entsperren__woerter {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: var(--bro-abstand-8);
  list-style: none;
  margin: var(--bro-abstand-12) 0 var(--bro-abstand-24);
  padding: 0;
}

.entsperren__feld {
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-4);
}

.entsperren__nummer {
  color: var(--bro-tinte-2);
  font-variant-numeric: tabular-nums;
  min-width: 2ch;
  text-align: right;
}

.entsperren__wort {
  background: var(--bro-flaeche-0);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-s);
  color: var(--bro-tinte-1);
  flex: 1;
  font-family: var(--bro-schrift-familie);
  min-width: 0;
  padding: var(--bro-abstand-4) var(--bro-abstand-8);
}

/*
 * Ein Wort, das es nicht gibt. Die Farbe steht NICHT allein: Sie kommt mit
 * einer dickeren Linie, damit die Marke auch ohne Farbsehen ankommt — und
 * `aria-invalid` sagt es der Vorlesesoftware ohnehin.
 */
.entsperren__wort--falsch {
  border-color: var(--bro-fehler);
  border-width: 2px;
}

.entsperren__label {
  color: var(--bro-tinte-2);
  display: block;
  margin-bottom: var(--bro-abstand-4);
}

/* Mail- und Namensfeld tragen seit #7688 `bro-eingabefeld`; hier steht nur
   noch der Abstand zum nächsten Abschnitt. */
.entsperren__email {
  margin-bottom: var(--bro-abstand-16);
}

.entsperren__erklaerung {
  display: grid;
  gap: var(--bro-abstand-8);
  margin: 0 0 var(--bro-abstand-24);
  padding-left: var(--bro-abstand-16);
}

.entsperren__ergebnis {
  border-top: 1px solid var(--bro-linie);
  display: grid;
  gap: var(--bro-abstand-8);
  margin-top: var(--bro-abstand-24);
  padding-top: var(--bro-abstand-16);
}

/*
 * Berechnungsbogen (Issue #2352). Der Bogen hat eine Spalte je Kalendertag —
 * bis zu 31 plus Wochensummen und die vier Preisspalten. Ohne eigenen
 * Roll-Rahmen würde die Seite selbst waagerecht scrollen, und die Navigation
 * wanderte mit aus dem Bild. Nur Tokens, keine festen Farben (B14, ADR-0003).
 */
/*
 * Der Abschnitt selbst. Er trägt einen eigenen Namen, damit ein E2E-Locator
 * seinen Abschnitt benennen kann statt die ganze Seite (Hausregel, #1686).
 */
.portal-bogen {
  display: grid;
  gap: var(--bro-abstand-8);
}

.portal-bogen-rollen {
  overflow-x: auto;
}

/*
 * Die Beispielzeilen des Glasfaser-Adressimports (Issue 2120).
 *
 * Eine fremde Liste bringt beliebig viele Spalten mit — der echte Export des
 * Auftraggebers hat mehr, als auf einen Bildschirm passen. Die Tabelle rollt
 * deshalb in sich statt die Seite breit zu machen. Eigene Klasse statt
 * `portal-bogen-rollen`: Die gehört dem Anwesenheitsbogen, und ein
 * mitbenutzter Name wird beim nächsten Umbau dort zur Falle.
 */
.portal-import-vorschau {
  overflow-x: auto;
}

/*
 * Der Scan-Upload des Begehungsprotokolls (#2226).
 *
 * Er trägt mehrere Seiten EINES Blattes, und die Reihenfolge zählt — das
 * Formular bekommt deshalb sichtbar Luft nach oben und unten, damit es nicht
 * mit der Liste darunter verschwimmt. Nur Tokens, keine festen Werte
 * (Hausregel „Design nur über Tokens").
 */
.portal-begehungsimport-upload {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  margin-top: var(--bro-abstand-16);
}

/* Die Tagesspalten sind eng und mittig — sie tragen nur „1" oder „2". */
.portal-bogen-tag {
  text-align: center;
  padding-left: var(--bro-abstand-4);
  padding-right: var(--bro-abstand-4);
}

/* Die Wochensumme schließt einen Block ab und wird deshalb abgesetzt. */
.portal-bogen-wochensumme {
  border-left: 1px solid var(--bro-linie);
  padding-left: var(--bro-abstand-8);
  white-space: nowrap;
}

/* Wähler und Preisformular: ruhiges Raster statt gestapelter Felder. */
.portal-bogen-waehler,
.portal-bogen-preise {
  display: grid;
  gap: var(--bro-abstand-8);
  margin-top: var(--bro-abstand-16);
}

/*
 * Kontrolle und Leistungsabschluss am Berechnungsbogen (#10393).
 *
 * Abschnitt und Teile tragen eigene Namen, damit ein E2E-Locator seinen
 * Abschnitt benennen kann statt die ganze Seite (Hausregel, #1686). Die
 * Formulare bekommen dasselbe ruhige Raster wie Wähler und Preise. Nur
 * Tokens, keine festen Farben (B14, ADR-0003).
 */
.portal-bogen-kontrolle,
.portal-kontrollstand,
.portal-kontrollstand-kopf,
.portal-kontrollstand-rueckmeldung {
  display: grid;
  gap: var(--bro-abstand-8);
}

.portal-bogen-hindernisse,
.portal-bogen-abschluss,
.portal-bogen-abschluesse,
.portal-bogen-berichtigung,
.portal-kontrollstand-rueckmeldung-formular {
  display: grid;
  gap: var(--bro-abstand-8);
  margin-top: var(--bro-abstand-16);
}

/* Fahrtnachweis: die Pflegefelder je Fahrt (Issue #2040).
   Nebeneinander, weil km und Preis zusammen gelesen und zusammen getippt
   werden — untereinander wäre jede Zeile der Tabelle dreimal so hoch. */
.portal-nachweis-pflege {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--bro-abstand-8);
}

/* Barkasse: der TSE-Hinweis (Issue #2015) */

/*
 * Er steht über der ganzen Seite und ist nicht wegklickbar, solange keine
 * technische Sicherheitseinrichtung angeschlossen ist — und das ist im
 * Fachkern fest verdrahtet. Deshalb bekommt er einen eigenen Rahmen statt
 * einer Meldungs-Zeile: Ein Hinweis, den man zwei Jahre lang jeden Tag sieht,
 * muss ruhig aussehen und trotzdem sofort erkennbar bleiben.
 *
 * Ausschliesslich Tokens, keine festen Farben (Hausregel, ADR).
 */
.portal-kasse-tse {
  border: 1px solid var(--bro-fehler);
  border-radius: var(--bro-radius-m);
  padding: var(--bro-abstand-12) var(--bro-abstand-16);
  margin-bottom: var(--bro-abstand-16);
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
}

.portal-kasse-tse p {
  margin: 0;
}

/* Fristen-Radar Kündigung (#2018) — steht ÜBER der Vertragsliste. */

/*
 * Er hat denselben Innenabstand wie die Tabellen-Karte, damit Radar und Liste
 * als ein Block gelesen werden: Der Radar ist eine Vorschaltung der Liste,
 * keine fremde Insel. Abgesetzt wird er nur unten, gegen die Liste.
 *
 * Farben stehen hier NICHT: Die Dringlichkeit trägt die Statuspille aus
 * @bro/ui (`bro-statuspille--fehler|warnung|neutral`). Eine eigene Farbe hier
 * wäre eine zweite Wahrheit über „wie dringend sieht dringend aus".
 */
.portal-kuendigungsradar {
  padding: var(--bro-abstand-8) var(--bro-abstand-16) var(--bro-abstand-16);
  margin-bottom: var(--bro-abstand-16);
}

/* Die Stufen-Pillen liegen in einer Zeile und dürfen umbrechen. */
.portal-kuendigungsradar p {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-8);
  margin: var(--bro-abstand-8) 0 var(--bro-abstand-16);
}

/*
* Die Erstattungsseite eines Termins (Issue 2353). Nur Abstände: Die Karten,
 * Tabellen und Pillen darin tragen ihre eigenen Klassen aus `@bro/ui`, und
 * Farben kommen ausschließlich aus Tokens (Hausregel „Design nur über Tokens").
 */
.portal-erstattung {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-16);
}

/*
 * Locator-Anker für den Übergangs-Abschnitt der Vertrags-Detailseite (Issue
 * #2437) — Hausregel B14: Ein E2E-Locator benennt sein Formular oder seinen
 * Abschnitt, nie die ganze Seite. Die eigentliche Karten-Optik kommt aus
 * `bro-karte` (@bro/ui); diese Klasse trägt keine eigene.
 */
.portal-vertrag-uebergaenge {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--bro-abstand-8);
}

.portal-vertrag-uebergaenge form {
  margin: 0;
}

/*
 * Kopf der Vertragsakte wie im Alt (`Detail.cshtml:20-110`, #9036): links
 * Nummer, Zustand, Titel und Kunde, rechts die Aktionen; darunter die
 * Kennzahlen in einer Zeile, die auf schmalen Schirmen umbricht.
 */
.portal-vertrag-kopf {
  display: block;
}

.portal-vertrag-kopf-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--bro-abstand-12) var(--bro-abstand-24);
}

.portal-vertrag-kopf-zeile h2,
.portal-vertrag-kopf-zeile p {
  margin: 0;
}

.portal-vertrag-kennzahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--bro-abstand-16);
  margin: var(--bro-abstand-16) 0 0;
}

.portal-vertrag-kennzahlen dt,
.portal-vertrag-kennzahlen dd {
  margin: 0;
}

/*
 * Karte „Abrechnungs-Status“ der Vertragsakte (#9036, Alt
 * `Detail.cshtml:177-296`): vier Schritte in einer Zeile, die auf schmalen
 * Schirmen umbricht; darunter die Vorschau der nächsten Rechnung.
 */
.portal-vertrag-abrechnung,
.portal-vertrag-vorschau {
  display: block;
}

.portal-vertrag-schritte {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-12) var(--bro-abstand-24);
  margin: 0 0 var(--bro-abstand-16);
  padding: 0;
  list-style: none;
}

.portal-vertrag-schritte li {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
}

.portal-vertrag-vorschau p {
  margin: 0 0 var(--bro-abstand-8);
}

/* Eingeklappte Formulare (Kündigen, Vertragsdaten, neue Position): der
   Knopf ist die Zusammenfassung, das Formular steht darunter. */
.portal-vertrag-kuendigen,
.portal-vertrag-bearbeiten {
  margin-top: var(--bro-abstand-12);
}

.portal-vertrag-kuendigen > summary,
.portal-vertrag-bearbeiten > summary {
  list-style: none;
  cursor: pointer;
}

.portal-vertrag-kuendigen[open] > form,
.portal-vertrag-bearbeiten[open] > form {
  margin-top: var(--bro-abstand-12);
}

/*
 * Locator-Anker für den Unterschriften-Abschnitt der Vertrags-Detailseite
 * (Issue #3407) — dieselbe Begründung wie an `.portal-vertrag-uebergaenge`
 * eine Zeile darüber: Hausregel B14, kein Text- oder Feld-Locator über die
 * ganze Seite. Die Karten-Optik kommt aus `bro-karte` (@bro/ui); diese
 * Klassen tragen keine eigene.
 */
.portal-unterschriften-mappe {
  display: block;
}

.portal-unterschriften-verlauf {
  display: block;
}

/*
 * Löschen an der Vertragsakte und gelöschte Verträge an der Liste (#6307) —
 * Locator-Anker nach Hausregel B14, dieselbe Begründung wie an
 * `.portal-vertrag-uebergaenge`. Die Karten-Optik kommt aus `bro-karte`
 * (@bro/ui), die Formulare aus `.portal-formular`; diese Klassen tragen keine
 * eigene, außer dem Abstand der Hinderniss-Liste.
 */
.portal-vertrag-loeschung,
.portal-vertrag-loeschantrag,
.portal-vertrag-loeschen,
.portal-vertrag-loeschung-beantragen,
.portal-vertrag-loeschung-genehmigen,
.portal-vertrag-loeschung-ablehnen,
.portal-vertraege-geloescht {
  display: block;
}

.portal-vertrag-loeschhindernisse {
  margin: 0;
  padding-left: var(--bro-abstand-16);
}

/*
 * Die Notiz des Kunden aus dem Willkommens-Upload auf der Vertragsseite
 * (#4256): ein Zitat, kein Formularfeld — der Mitarbeiter liest, er ändert
 * hier nichts. Der Akzentstrich sagt „das hat der Kunde geschrieben".
 */
.portal-willkommen-notiz {
  margin: var(--bro-abstand-12) 0;
  padding: var(--bro-abstand-12);
  border-left: 3px solid var(--bro-akzent);
  background: var(--bro-flaeche-0);
  white-space: pre-wrap;
}

.portal-willkommen-unterlagen {
  display: block;
}

/*
 * Das Formular „Willkommensmail senden" auf der Vertragsseite (#4256): etwas
 * Abstand zur Versandtabelle darüber, sonst klebt das Adressfeld an ihr.
 */
.portal-willkommen-versand {
  margin-top: var(--bro-abstand-12);
}

/*
 * Die Kennzahlenleiste des Lagers (Issue #2048). Ein Raster statt fester
 * Spaltenzahl: Die sechste Kachel („Zeilen ohne Artikel") erscheint nur, wenn
 * es den Fall gibt, und eine Leiste, die dann umbricht statt zu springen, ist
 * die ruhigere Lösung.
 */
.portal-kennzahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--bro-abstand-12);
}

/* Kennzahl-Kachel (#6744, Scheibe 3b): dieselbe Bauart wie „Auf einen Blick“
   auf der Übersicht — Wert groß und tabellarisch, Name gedämpft darunter.
   Rand ohne farbige Kante und ohne Schatten wie die Kennzahlen in v10
   (BrodeskPortalV10.dc.html:479–485, #6901). */
.portal-kennzahl {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: var(--bro-abstand-4);
  padding: var(--bro-abstand-12) var(--bro-abstand-16);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
  background: var(--bro-flaeche-1);
}

.portal-kennzahl-name {
  color: var(--bro-tinte-2);
}

/* Lager: Reichweite und Bestellvorschlag (Issue #9273), nach `.kz-leiste`,
   `.reichweite`, `.liste-klein` und `.raster.seite-rechts` der
   Vitala-Klickdemo (`quelltext-design.md`), nur Design-Tokens. */
.lager-reichweite-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, calc(var(--bro-abstand-32) * 10));
  gap: var(--bro-abstand-16);
  align-items: start;
  margin-bottom: var(--bro-abstand-16);
}
.lager-reichweite-raster > .bro-karte,
.lager-reichweite-rechts {
  min-width: 0;
}
/* Rechte Spalte: Bestellvorschlag, darunter die Ausgabe-Karte (#9858). */
.lager-reichweite-rechts {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-16);
}
.lager-reichweite-tabelle {
  overflow-x: auto;
}
.lager-reichweite-name {
  display: block;
  font-weight: var(--bro-schrift-betont-gewicht);
}
.lager-reichweite-einheit,
.lager-reichweite-min,
.lager-reichweite-ort {
  font-size: var(--bro-schrift-klein-groesse);
  color: var(--bro-tinte-2);
}
.lager-zahl {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.lager-reichweite-spalte {
  min-width: calc(var(--bro-abstand-32) * 6);
}
.lager-reichweite-balken {
  position: relative;
  min-height: var(--bro-abstand-24);
  background: color-mix(in srgb, var(--bro-tinte-3) 14%, var(--bro-flaeche-1));
}
.lager-reichweite-balken i {
  position: absolute;
  inset: 0 auto 0 0;
  background: color-mix(in srgb, var(--bro-erfolg) 35%, var(--bro-flaeche-1));
}
.lager-reichweite-balken[data-ampel="gelb"] i {
  background: color-mix(in srgb, var(--bro-warnung) 40%, var(--bro-flaeche-1));
}
.lager-reichweite-balken[data-ampel="rot"] i {
  background: color-mix(in srgb, var(--bro-fehler) 40%, var(--bro-flaeche-1));
}
.lager-reichweite-balken span {
  position: relative;
  display: block;
  padding-left: var(--bro-abstand-8);
  font-size: var(--bro-schrift-klein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
  line-height: var(--bro-abstand-24);
}
.lager-vorschlag-gruppe {
  margin-top: var(--bro-abstand-16);
}
.lager-vorschlag-gruppe h3 {
  margin: 0;
}
.lager-liste-klein {
  display: flex;
  flex-direction: column;
  margin: var(--bro-abstand-8) 0 var(--bro-abstand-12);
}
.lager-liste-klein > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--bro-abstand-8);
  padding: var(--bro-abstand-4) 0;
  border-top: 1px solid var(--bro-linie);
  font-size: var(--bro-schrift-klein-groesse);
}
.lager-liste-klein > div:first-child {
  border-top: 0;
}
.lager-liste-klein small {
  color: var(--bro-tinte-2);
  text-align: right;
}
.lager-vorschlag-hindernis {
  color: var(--bro-warnung);
}
/* Eine Liste wie die Demo (#9858): der Lieferant klein unter dem Artikel. */
.lager-liste-klein small.lager-vorschlag-lieferant {
  display: block;
  text-align: left;
}
.lager-vorschlag-fuss {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--bro-abstand-8);
}
.lager-vorschlag-fuss:empty {
  display: none;
}
.lager-vorschlag-fuss p {
  margin: 0;
}
/* Bestellungen aus der Fahrer-App (#9273, Teil B). */
.lager-fahrer {
  margin-top: var(--bro-abstand-16);
}
.lager-fahrer-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-8);
  margin-top: var(--bro-abstand-8);
}
.lager-fahrer-artikel {
  margin-top: var(--bro-abstand-16);
}
.lager-fahrer-artikel-liste {
  list-style: none;
  margin: var(--bro-abstand-8) 0 0;
  padding: 0;
}
.lager-fahrer-artikel-liste li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bro-abstand-8);
  padding: var(--bro-abstand-4) 0;
  border-top: 1px solid var(--bro-linie);
  font-size: var(--bro-schrift-klein-groesse);
}
.lager-fahrer-artikel-liste small {
  color: var(--bro-tinte-2);
}
@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (max-height: 479px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (orientation: portrait) {
  .lager-reichweite-raster {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Schrittanzeige eines mehrschrittigen Ablaufs (#9038, Alt `Kunden/Import.cshtml:16-30`):
   der laufende Schritt trägt `aria-current="step"` und ist betont. */
.portal-schritte {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-8) var(--bro-abstand-16);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--bro-tinte-2);
}

.portal-schritte > li {
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-8);
}

.portal-schritte > li[aria-current="step"] {
  color: var(--bro-tinte-1);
  font-weight: var(--bro-schrift-betont-gewicht);
}

.portal-schritt-nummer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  min-height: 1.75rem;
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-rund);
  font-variant-numeric: tabular-nums;
}

.portal-schritte > li[aria-current="step"] > .portal-schritt-nummer {
  border-color: var(--bro-tinte-1);
}

.portal-kennzahl-wert {
  font-size: var(--bro-schrift-anzeige-groesse);
  line-height: var(--bro-schrift-anzeige-zeilenhoehe);
  font-weight: var(--bro-schrift-anzeige-gewicht);
  font-variant-numeric: tabular-nums;
}

/*
 * Die Mehrfachauswahl beim Zuordnen (#3050). Sie führt die offenen Forderungen
 * in der Reihenfolge, in der ein Eingang auf sie verteilt wird — deshalb steht
 * die Reihenfolge-Spalte schmal und in Ziffern-Breite: Eine Liste, deren
 * Nummern unterschiedlich breit laufen, liest sich nicht mehr als Reihenfolge.
 */
.portal-zuordnung-auswahl {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
}

.portal-zuordnung-auswahl td:nth-child(2) {
  font-variant-numeric: tabular-nums;
  color: var(--bro-tinte-2);
  white-space: nowrap;
}

/*
 * Das Lösen sitzt je Teilzuordnung in einer eigenen Zeile. Ohne die feste
 * Grundlinie stünde der Knopf bei mehrzeiligen Nachbarzellen versetzt, und
 * eine verteilte Zahlung sähe aus wie mehrere unzusammenhängende Vorgänge.
 */
.portal-zuordnung-loesen {
  margin: 0;
}

/*
 * Locator-Anker für die beiden Formulare des Kontoauszugs (Issue #4125,
 * Prüfer-KI-Fund an `e6ae1d2`) — Hausregel B14: Ein E2E-Locator benennt sein
 * Formular, nie einen Feldnamen der ganzen Seite. „Datei", „IBAN des eigenen
 * Kontos", „Ansehen" und „Übernehmen" sind für sich genommen seitenweite
 * Griffe. Die Karten-Optik kommt aus `bro-karte` (@bro/ui); diese Klassen
 * tragen keine eigene.
 */
.portal-auszug-formular,
.portal-auszug-uebernehmen {
  display: block;
}

/*
 * Locator-Anker für die Arbeitsliste der Zuordnung (Issue #4125) — Hausregel
 * B14: Ein E2E-Locator benennt seinen Abschnitt, nie die ganze Seite. Ein
 * `getByRole("link", { name: "Zuordnen" })` über die Seite würde mehrdeutig,
 * sobald irgendwo sonst ein „Zuordnen" auftaucht, und `.first()` wäre derselbe
 * Fehler positionsabhängig. Die Karten-Optik kommt aus `bro-karte` (@bro/ui);
 * diese Klasse trägt keine eigene.
 */
.portal-zuordnung-liste {
  display: block;
}

/*
 * Von Hand kontieren (Issue #4125). Beschriftung, Auswahl und Knopf
 * untereinander wie bei der Mehrfachauswahl darüber: Die Auswahl führt
 * neunundzwanzig Möglichkeiten in drei Gruppen und wird breit, ein Knopf
 * daneben rutschte damit aus dem Blick. Zugleich der Anker, an dem der
 * E2E-Griff festmacht.
 */
.portal-kontierung-hand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--bro-abstand-8);
}

/*
 * Kontostand je Bankkonto (Issue #8655). Vier Spalten mit IBAN werden auf
 * dem Telefon breiter als die Karte; die Tabelle rollt dann in sich, statt
 * die Seite seitlich zu verschieben. Zugleich der Anker des E2E-Griffs.
 */
.portal-kontostaende {
  overflow-x: auto;
}

/*
 * Die Aufstellung nach dem Verteilen (#3244). Sie sagt je Fahrt, was mit ihr
 * geschieht — deshalb steht sie als eigener Abschnitt unter der Meldung und
 * nicht in ihr: Die Meldung ist die Summe, die Aufstellung der Einzelfall.
 */
.portal-verteilung-aufstellung {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
}

/*
 * Das Kennzeichen steht in Ziffern-Breite und bricht nicht um: Zugeteilte
 * Fahrten werden spaltenweise gelesen („welcher Wagen fährt was“), und ein
 * umgebrochenes Kennzeichen zerreißt genau diese Spalte.
 */
.portal-verteilung-wagen {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/*
 * Der Grund einer liegengebliebenen Fahrt ist eine Erklärung, kein Ergebnis.
 * Die schwächere Tinte trennt ihn in derselben Spalte vom Kennzeichen, ohne
 * dass die Zeile eine eigene Farbe bekommt — Farbe allein trüge die Aussage
 * sonst für alle, die sie nicht unterscheiden können.
 */
.portal-verteilung-grund {
  color: var(--bro-tinte-2);
}

/*
 * Die Aufstellung des Tourenplans (#2703) — dieselbe Bauart wie die der
 * Verteilung darüber, damit zwei Aufstellungen auf derselben Seite nicht
 * verschieden aussehen.
 */
.portal-tourplan-aufstellung {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
}

/*
 * Fahrzeit und ihre Herkunft stehen in EINER Zelle. Zwei Spalten daraus zu
 * machen hieße, die Tabelle für eine Angabe zu verbreitern, die man nur beim
 * Zweifeln liest. Ziffern-Breite an der Zelle, damit die Minuten spaltenweise
 * vergleichbar bleiben.
 */
.portal-tourplan-zeitzelle {
  font-variant-numeric: tabular-nums;
}

/*
 * Nur die HERKUNFT in schwächerer Tinte: Die Minuten sind das Ergebnis, die
 * Herkunft sagt, wie belastbar es ist. Die Klasse sass vorher am `<td>` und
 * färbte damit auch die Minuten — der Kommentar versprach etwas anderes, als
 * die Regel tat.
 */
.portal-tourplan-fahrzeit {
  color: var(--bro-tinte-2);
}

/*
 * Die Vermietungs-Ansichten (Issue #2133): die Modulkopf-Tabs, ein Raster über
 * 31 Tage und der getrennte Sortierbereich.
 *
 * Seit #7688 (Rest von #6744) sind ALLE Reiter der Kurzzeitvermietung
 * gemeinsame `portal-chips` mit `bro-filter-chip` und `aria-current="page"` —
 * auch die Tabs des Modulkopfs, die bis dahin eine seiteneigene Gestalt
 * (`portal-vermietung-reiter`: Unterstrich in der Modulfarbe) trugen. Die
 * Wohnungsliste („Alle · Aktiv · Stillgelegt“) und die Kalenderansicht
 * („31 Tage · 3 Wochen“) waren es schon seit #7067.
 *
 * Nur Abstände, Ausrichtung und Rollbarkeit — Farben und Schriften kommen
 * ausschließlich aus Tokens (Hausregel „Design nur über Tokens"). Eine
 * belegte Zelle trägt deshalb eine KLASSE und keine Farbe: Welche Farbe der
 * Belegung zusteht, entscheidet das Token-Set, nicht diese Datei.
 */

/*
 * Der Modulkopf der Kurzzeitvermietung (#5859): Unterzeile, Aktionen, Tabs.
 * Die Tabs sind seit #7688 gemeinsame Reiter (siehe oben); die Modulfarbe,
 * die bis dahin den gewählten Tab kennzeichnete, hat damit keinen Träger mehr.
 */
.portal-vermietung-kopf {
  margin-bottom: var(--bro-abstand-16);
}

.portal-vermietung-kopfzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--bro-abstand-8) var(--bro-abstand-12);
  margin-bottom: var(--bro-abstand-12);
}

.portal-vermietung-kopfzeile p {
  margin: 0;
  color: var(--bro-tinte-2);
}

.portal-vermietung-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-8);
}

.portal-vermietung-blaettern {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--bro-abstand-8);
  margin: var(--bro-abstand-8) 0 var(--bro-abstand-16);
}

.portal-vermietung-stadt {
  margin-bottom: var(--bro-abstand-24);
}

/*
 * 31 Spalten passen auf kein Handy. Das Raster rollt deshalb in seinem
 * EIGENEN Bereich; die Seite selbst rollt nie waagerecht — sonst wanderten
 * Navigation und Kopfzeile mit aus dem Bild.
 */
.portal-vermietung-raster-rollbereich {
  overflow-x: auto;
}

/*
 * Der Belegungskalender nach dem v10-Handoff (#5860): erste Spalte die
 * Unterkunft, danach zwei Halbspalten je Tag. Jede Zeile ist ein eigenes Grid
 * mit derselben Spaltenvorlage; die Zahl der Halbspalten setzt die Seite als
 * Variable (62 bei 31 Tagen, 42 bei 21). Lage und Spur eines Balkens stehen
 * als `grid-column`/`grid-row` am Balken — Geometrie, keine Farbe.
 *
 * Farben ausschließlich aus Tokens: die Kanäle aus `kanalfarben`, alles
 * andere aus den Systemfarben. Die Fläche eines Balkens ist die Kanalfarbe zu
 * 15 % auf der Kartenfläche (Handoff), als `color-mix` über die Tokens.
 */
.portal-kalender {
  --portal-kalender-spurhoehe: 3.5rem;
}

.portal-kalender-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--bro-abstand-8) var(--bro-abstand-12);
  margin-bottom: var(--bro-abstand-12);
}

.portal-kalender-kopf h2,
.portal-kalender-meta {
  margin: 0;
}

.portal-kalender-meta {
  color: var(--bro-tinte-2);
  font-variant-numeric: tabular-nums;
}

.portal-kalender-raster {
  min-width: 66rem;
  border: 1px solid var(--bro-linie);
  background: var(--bro-flaeche-1);
}

.portal-kalender-zeile {
  display: grid;
  grid-template-columns:
    minmax(13rem, 1.5fr)
    repeat(var(--portal-kalender-halbspalten), minmax(0.625rem, 1fr));
  border-bottom: 1px solid var(--bro-linie);
}

.portal-kalender-kopfzeile {
  background: var(--bro-flaeche-0);
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
  line-height: var(--bro-schrift-klein-zeilenhoehe);
  font-variant-numeric: tabular-nums;
}

.portal-kalender-zeilenkopf {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: var(--bro-abstand-8) var(--bro-abstand-16);
}

.portal-kalender-name,
.portal-kalender-unterzeile {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.portal-kalender-name {
  font-weight: var(--bro-schrift-betont-gewicht);
}

.portal-kalender-unterzeile {
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
}

.portal-kalender-tag {
  grid-row: 1;
  border-left: 1px solid var(--bro-flaeche-0);
  text-align: center;
  padding: var(--bro-abstand-4) 0;
}

.portal-kalender-kopfzeile .portal-kalender-tag abbr {
  display: block;
  text-decoration: none;
}

.portal-kalender-tag--wochenende {
  background: var(--bro-flaeche-0);
}

.portal-kalender-tag--montag {
  border-left-color: var(--bro-linie);
}

.portal-kalender-tag--heute {
  background: color-mix(in oklab, var(--bro-akzent) 10%, var(--bro-flaeche-1));
}

.portal-kalender-kopfzeile .portal-kalender-tag--heute {
  color: var(--bro-akzent);
  font-weight: var(--bro-schrift-titel-gewicht);
}

.portal-kalender-zeile--stillgelegt {
  background: var(--bro-flaeche-0);
}

.portal-kalender-balken {
  --portal-kalender-kanal: var(--bro-tinte-3);
  z-index: 1;
  align-self: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  height: 2.375rem;
  margin: 0 1px;
  padding: 0 var(--bro-abstand-8);
  overflow: hidden;
  border: 1px solid var(--portal-kalender-kanal);
  border-radius: var(--bro-radius-s);
  background: color-mix(in oklab, var(--portal-kalender-kanal) 15%, var(--bro-flaeche-1));
}

.portal-kalender-muster {
  --portal-kalender-kanal: var(--bro-tinte-3);
  display: inline-block;
  width: 1.375rem;
  height: 0.875rem;
  border: 1px solid var(--portal-kalender-kanal);
  background: color-mix(in oklab, var(--portal-kalender-kanal) 15%, var(--bro-flaeche-1));
}

a.portal-kalender-balken {
  text-decoration: none;
}

a.portal-kalender-balken:hover,
a.portal-kalender-balken:focus-visible {
  filter: brightness(0.96);
}

/* Der Aufheben-Knopf einer Handsperre (#5950) — im Platz der sonstigen
 * Zusatzzeile, deshalb kein eigener Rahmen. */
.portal-kalender-balken-aufheben {
  align-self: flex-start;
  border: none;
  background: none;
  padding: 0;
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
  text-decoration: underline;
  cursor: pointer;
}

.portal-kalender-balken-aufheben:hover,
.portal-kalender-balken-aufheben:focus-visible {
  color: var(--bro-tinte-1);
}

/* Ein freier Tag lässt sich anklicken, um eine Buchung anzulegen (#5950). */
a.portal-kalender-tag {
  cursor: pointer;
}

a.portal-kalender-tag:hover,
a.portal-kalender-tag:focus-visible {
  background: color-mix(in oklab, var(--bro-akzent) 12%, var(--bro-flaeche-1));
}

.portal-kalender-balken-titel,
.portal-kalender-balken-zusatz {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.portal-kalender-balken-titel {
  color: var(--bro-tinte-1);
  font-size: var(--bro-schrift-klein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
}

.portal-kalender-balken-zusatz {
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
}

.portal-kalender-balken--airbnb {
  --portal-kalender-kanal: var(--bro-kanal-airbnb);
}

.portal-kalender-balken--booking {
  --portal-kalender-kanal: var(--bro-kanal-booking);
}

.portal-kalender-balken--direkt {
  --portal-kalender-kanal: var(--bro-kanal-direkt);
}

/* Jede andere Herkunft (Expedia, Vrbo, Agoda …): neutral, wie im Handoff. */
.portal-kalender-balken--sonstige {
  --portal-kalender-kanal: var(--bro-tinte-3);
}

.portal-kalender-balken--sperre,
.portal-kalender-balken--verwaist {
  --portal-kalender-kanal: var(--bro-linie);
  background: repeating-linear-gradient(
    135deg,
    var(--bro-flaeche-0) 0 6px,
    var(--bro-flaeche-1) 6px 12px
  );
}

/* Eine verwaiste Buchungssperre muss ein Mensch SEHEN (Alt-Kommentar) —
 * deshalb der Warnrand statt des stillen Linientons. */
.portal-kalender-balken--verwaist {
  --portal-kalender-kanal: var(--bro-warnung);
}

.portal-kalender-balken--offen-links {
  border-left-style: none;
  margin-left: 0;
}

.portal-kalender-balken--offen-rechts {
  border-right-style: none;
  margin-right: 0;
}

.portal-kalender-legende {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-8) var(--bro-abstand-16);
  margin: var(--bro-abstand-12) 0 0;
  padding: 0;
  list-style: none;
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
}

.portal-kalender-legende li {
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-8);
}

.portal-vermietung-belegt {
  background: var(--bro-akzent-flaeche);
  text-align: center;
}

.portal-vermietung-frei {
  text-align: center;
}

/* Stillgelegte Zellen bleiben auch sichtbar unterscheidbar, wenn ihr
 * Zeilenkopf beim horizontalen Rollen aus dem Bild wandert (#4423). */
.portal-vermietung-stillgelegt {
  background: var(--bro-flaeche-0);
  border-color: var(--bro-linie);
  opacity: var(--bro-erledigt-deckkraft);
  text-align: center;
}

/*
 * „frei" und „belegt" stehen als Text in der Zelle, nicht nur als Farbe:
 * Eine Belegung, die allein an der Farbe hängt, ist für einen Screenreader
 * und für jeden mit einer Farbsehschwäche nicht da. Sichtbar ist der Text
 * nur dort, wo Platz ist — verborgen bleibt er lesbar.
 */
.portal-vermietung-nichts {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.portal-vermietung-nummer {
  font-size: var(--bro-schrift-klein-groesse);
  white-space: nowrap;
}

.portal-vermietung-sortierung {
  margin-top: var(--bro-abstand-8);
}

.portal-vermietung-sortierung ol {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  margin: var(--bro-abstand-8) 0;
}

/*
 * Die Pflege der beiden Wohnungs-Schalter (Issue #3596).
 *
 * **Ein Formular je Tabellenzeile**, denn ohne JavaScript (ADR-0005) wird
 * beim Absenden gespeichert und nicht beim Klicken. Die drei Bedienteile —
 * zwei Kästchen und ein Knopf — stehen nebeneinander, solange Platz ist, und
 * brechen auf schmalen Geräten um, statt die Tabelle breiter zu machen als
 * das Bild: Die Seite rollt nie waagerecht (dieselbe Zusage wie beim Raster
 * darüber).
 *
 * Keine festen Farben und keine festen Abstände — nur Tokens (Hausregel
 * „Design nur über Tokens", B14.7).
 */
.portal-vermietung-schalter-formular {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-8);
}

/*
 * Die Wohnung einer Buchung festlegen (Issue #5529): Beschriftung, Auswahl und
 * Knopf in einer Zeile, auf schmalen Geräten umbrechend — dieselbe Bauart wie
 * die Schalter darüber, damit die Buchungstabelle nie waagerecht rollt.
 */
.portal-vermietung-wohnung-formular {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-8);
}

/*
 * Suche und Filter der Buchungsliste (Issue #5862): ein GET-Formular,
 * dieselbe umbrechende Zeile wie die Schalter-Pflege — ohne JavaScript
 * (ADR-0005) speichert erst das Absenden, hier also das Neuladen der Liste.
 */
.portal-vermietung-suche {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--bro-abstand-8);
  margin-bottom: var(--bro-abstand-16);
}

/* Ein Betrag steht rechtsbündig mit `tabular-nums`, wie im Alt (Issue #5862). */
.portal-vermietung-betrag {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/*
 * Kästchen und Beschriftung gehören zusammen und dürfen nicht zwischen
 * beiden umbrechen: Ein Häkchen ohne sein Wort ist nicht mehr zuzuordnen.
 * Die Beschriftung steht als `<label>` am Feld, damit auch der Klick auf das
 * Wort schaltet — und ein Screenreader das Kästchen benennen kann.
 */
.portal-vermietung-schalter {
  display: inline-flex;
  align-items: center;
  gap: var(--bro-abstand-4);
  white-space: nowrap;
}

/*
 * Die Gästemappe (Issue #5887) — die acht Abschnitte ohne Änderungsrecht als
 * reiner Lesetext. Nur Abstand aus den Tokens (Hausregel „Design nur über
 * Tokens", B14.7); mit Änderungsrecht trägt `portal-formular` bereits alles
 * Nötige.
 */
.portal-gaestemappe-abschnitt {
  margin-top: var(--bro-abstand-16);
}

.portal-gaestemappe-abschnitt h3 {
  margin-bottom: var(--bro-abstand-4);
}

/*
 * Die Eigentümerabrechnung (Issue #4407): Objektwahl, gespeicherte Zeiträume,
 * die fünf Summen, die Einzelzeilen und das Entwurfsformular.
 *
 * Keine Farben und keine Schriften — nur Abstand, Ausrichtung und Rollbarkeit
 * aus den Tokens (Hausregel „Design nur über Tokens", B14.7). Die Klassen sind
 * zugleich die Anker, an denen ein Test SEINEN Abschnitt greift: „Zeitraum"
 * und „Nettoauszahlung" stehen auf dieser Seite mehrfach.
 */
.portal-eigentuemer-objekte {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  margin: var(--bro-abstand-8) 0 0;
  padding-left: var(--bro-abstand-16);
}

/*
 * Die Summen-Tabelle trägt Beträge rechtsbündig untereinander, damit sich
 * die Zeile „Nettoauszahlung" gegen die vier darüber nachrechnen lässt.
 */
.portal-eigentuemer-summen td {
  text-align: right;
  white-space: nowrap;
}

/*
 * Sieben Spalten Einzelzeilen und drei Spalten gespeicherte Abrechnungen
 * passen auf kein Telefon. Beide rollen in ihrem eigenen Kasten waagerecht,
 * statt die Seite zu verbreitern — dieselbe Zusage wie beim Belegungsraster.
 */
.portal-eigentuemer-zeilen,
.portal-eigentuemer-liste {
  display: block;
  overflow-x: auto;
}

.portal-eigentuemer-formular {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  margin-top: var(--bro-abstand-16);
}

/*
 * Die Büro-Liste „Reinigung" (#5865). Eigener Vorsatz `portal-reinigungsbuero-`,
 * weil `portal-reinigung-…` schon dem mobilen Reinigungsblatt gehört — eine
 * geteilte Klasse zöge dessen Telefon-Stile in die Büro-Tabelle.
 *
 * Die Tabelle rollt auf schmalen Geräten über die gemeinsame
 * `bro-tabelle`-Regel der Schale, der Filter ist eine `portal-werkzeuge`-Leiste
 * (#7067) — hier stehen nur noch das Einteil- und das Storno-Formular (#7326).
 */
.portal-reinigungsbuero-einteilen,
.portal-reinigungsbuero-stornieren {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--bro-abstand-8) var(--bro-abstand-16);
  margin: var(--bro-abstand-16) 0;
}

.portal-reinigungsbuero-detail,
.portal-reinigungsbuero-verlauf {
  margin-top: var(--bro-abstand-16);
}

.portal-reinigungsbuero-felder {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--bro-abstand-8) var(--bro-abstand-16);
  margin: var(--bro-abstand-16) 0;
}

.portal-reinigungsbuero-felder dd {
  margin: 0;
}

.portal-reinigungsbuero-checkliste {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  padding-left: var(--bro-abstand-16);
}

/*
 * Das Postfach „Gästenachrichten" (#5866). Die Kanalfarben sind die Tokens,
 * die `KANALCHIPS` (`@bro/vermietung/kanalanzeige.ts`) nennt: Airbnb und
 * Booking in Portalfarbe, alles andere neutral (Alt `KanalAnzeige.cs:36–41`).
 *
 * Reiter (`portal-chips`) und Suche (`portal-werkzeuge`) kommen seit #7067
 * aus den gemeinsamen Regeln. Die Tabellen-Rollregel BLEIBT, weil
 * `whatsapp/seite.ts` dieselbe Klasse in einer `portal-tabelle-karte` trägt,
 * die die gemeinsame `schmal`-Regel der Schale ausdrücklich ausnimmt — dort
 * ist sie keine Doppelregel.
 */
.portal-nachrichten-liste table {
  display: block;
  overflow-x: auto;
}

.portal-nachrichten-kanal {
  display: inline-block;
  padding: 0 var(--bro-abstand-8);
  background: var(--bro-flaeche-0);
  color: var(--bro-tinte-2);
}

.portal-nachrichten-kanal--airbnb {
  background: var(--bro-portal-airbnb);
  color: var(--bro-portal-tinte);
}

.portal-nachrichten-kanal--booking {
  background: var(--bro-portal-booking);
  color: var(--bro-portal-tinte);
}

.portal-nachrichten-kopf,
.portal-nachrichten-zustand {
  margin-bottom: var(--bro-abstand-16);
}

.portal-nachrichten-faden {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-16);
  padding-left: 0;
  list-style: none;
}

.portal-nachrichten-eintrag {
  padding-left: var(--bro-abstand-16);
  border-left: 1px solid var(--bro-linie);
}

.portal-nachrichten-eintrag--intern {
  background: var(--bro-flaeche-0);
}

/* Die Gastfotos im Faden (#5975) — dieselbe Bauart wie die Schadensfotos des Reinigungsblatts. */
.portal-nachrichten-fotos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-8);
  margin: var(--bro-abstand-8) 0 0;
}

.portal-nachrichten-fotos img {
  width: 4rem;
  height: 4rem;
  object-fit: cover;
}

/* Das Antwortformular im Faden (#5868): Feld über die volle Breite, Knopf darunter. */
.portal-nachrichten-antwort {
  margin-top: var(--bro-abstand-16);
}

.portal-nachrichten-antwortformular {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
}

.portal-nachrichten-antwortformular textarea {
  width: 100%;
}

/* Die Klärung einer unklaren Zustellung (#6041): dieselbe Bauart wie das Antwortformular. */
.portal-nachrichten-zustellung {
  margin-top: var(--bro-abstand-16);
}

.portal-nachrichten-zustellung-formular {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
}

/* Der manuelle Vorlagenversand (#5892): der Check-in-Knopf steht für sich,
   die übrigen Vorlagen im Aufklapper darunter mit etwas Luft je Eintrag. */
.portal-vorlage-checkin {
  margin-top: var(--bro-abstand-8);
}

.portal-vorlage-weitere {
  margin-top: var(--bro-abstand-8);
}

.portal-vorlage-weitere li {
  margin-bottom: var(--bro-abstand-8);
}

/* Die Buchungsseiten-Konfiguration (#5248) — dieselbe Bauart wie die Formulare darüber. */
.portal-buchungsseiten-objekte {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  margin: var(--bro-abstand-8) 0 0;
  padding-left: var(--bro-abstand-16);
}

.portal-buchungsseiten-formular {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  margin-top: var(--bro-abstand-16);
}

.portal-buchungsseiten-kennung,
.portal-buchungsseiten-schalter {
  margin-top: var(--bro-abstand-16);
}

/* Die Hinderungsgründe sind eine `portal-meldungen`-Liste (#7067); hier
   steht nur der Abstand zur Zeile „Buchungsseite eingeschaltet“. */
.portal-buchungsseiten-hinderungsgruende {
  margin: var(--bro-abstand-8) 0;
}

/* Wissensablage (Issue #3811) — nur Tokens, keine festen Farben (B14.7). */

/* #9108: Der rechtegefilterte Seitenbaum bleibt neben dem Inhalt erreichbar. */
.portal-wissen-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  gap: var(--bro-abstand-16);
  align-items: start;
}

.portal-wissen-hauptspalte,
.portal-wissen-navigation {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
  min-width: 0;
}

.portal-wissen-kacheln {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-8);
}

.portal-wissen-navigation [aria-current="page"] > a {
  font-weight: var(--bro-schrift-betont-gewicht);
  color: var(--bro-akzent-text);
}

@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (max-height: 479px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (orientation: portrait) {
  .portal-wissen-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Der Baum: verschachtelte Listen ohne Aufzählungszeichen, eingerückt je Stufe. */
.portal-wissen-baum {
  list-style: none;
  margin: 0;
  padding-left: var(--bro-abstand-16);
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
}

/* Die Wurzelliste braucht keine Einrückung — nur die Stufen darunter. */
.portal-wissen-baum:not(.portal-wissen-baum .portal-wissen-baum) {
  padding-left: 0;
}

/*
 * Der gerenderte Seiteninhalt.
 *
 * `overflow-wrap` und der scrollende Codeblock sind hier kein Schmuck: Der
 * Inhalt kommt von einem Menschen, und eine einzige lange Zeile — eine URL,
 * eine Protokollzeile — schöbe sonst die ganze Seitenbreite auf.
 */
.portal-wissen-inhalt {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  overflow-wrap: anywhere;
}

.portal-wissen-inhalt pre {
  margin: 0;
  padding: var(--bro-abstand-8);
  background: var(--bro-flaeche-1);
  border-radius: var(--bro-radius-s);
  overflow-x: auto;
}

.portal-wissen-inhalt blockquote {
  margin: 0;
  padding-left: var(--bro-abstand-12);
  border-left: 2px solid var(--bro-linie);
}

/*
 * Der AV-Vertrag auf der Seite „AV-Unterlagen“ (#7681): derselbe Lesefluss
 * wie der Wissensinhalt. `overflow-wrap`, weil die Anlage Datenbanknamen ohne
 * Trennstelle trägt.
 */
.portal-av-vertrag {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  overflow-wrap: anywhere;
}

/* Der Kommentarfaden: Antworten stehen eingerückt unter ihrem Kommentar. */
.portal-wissen-kommentare {
  list-style: none;
  margin: 0;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
}

.portal-wissen-kommentare .portal-wissen-kommentare {
  padding-left: var(--bro-abstand-16);
  border-left: 1px solid var(--bro-linie);
}

/*
 * Die Projekt-Seiten (#3835). Sie machen den Fachkern `@bro/projekte` aus
 * #2445 erreichbar; hier steht nur, wie er aussieht — jede Regel wohnt im
 * Paket. Farben und Abstände ausschliesslich über Tokens (B14.7).
 */
.portal-projekte {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-16);
}

/*
 * Die Suche steht in EINER Zeile und bricht erst um, wenn der Platz fehlt.
 * Sie ist ein GET-Formular auf dieselbe Adresse: Die gefundene Liste bleibt
 * dadurch verlinkbar, und die gewählte Sicht reist als verstecktes Feld mit,
 * statt beim Suchen verloren zu gehen.
 */
.portal-projekte-suche {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--bro-abstand-8);
}

/*
 * Beträge rechtsbündig und mit Ziffern gleicher Breite — nur so sind sie
 * spaltenweise vergleichbar. Dieselbe Regel wie bei der Fahrzeit-Zelle.
 */
.portal-projekt-budget {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.portal-projekt {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-16);
}

.portal-projekt-kopf {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  align-items: start;
}

/*
 * Kopfdaten als zweispaltiges Gitter: Bezeichnung links, Wert rechts. Bei
 * schmalem Fenster fällt die zweite Spalte weg, statt den Wert abzuschneiden.
 */
.portal-projekt-daten {
  display: grid;
  grid-template-columns: minmax(8rem, auto) 1fr;
  gap: var(--bro-abstand-4) var(--bro-abstand-12);
  margin: 0;
}

.portal-projekt-daten dt {
  color: var(--bro-tinte-2);
}

.portal-projekt-daten dd {
  margin: 0;
}

.portal-projekt-aufgaben {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
  padding: var(--bro-abstand-16);
}

.portal-projekt-aufgabenliste {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * Titel und Zustand einer Aufgabe stehen nebeneinander, nicht untereinander:
 * Die Liste ist eine Übersicht über den Stand, kein Ersatz für die
 * Aufgabenseite — wer mehr will, geht dorthin.
 */
.portal-projekt-aufgabe {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--bro-abstand-8);
  padding: var(--bro-abstand-4) 0;
  border-bottom: 1px solid var(--bro-linie);
}

.portal-projekt-fuehren {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-16);
  padding: var(--bro-abstand-16);
}

/**
 * Das Einbau-Stück der Besuchermessung (#2610) — der Textblock, den der
 * Betrieb in seine eigene Website kopiert.
 *
 * `pre` bricht von sich aus NICHT um; ohne `overflow-x` schöbe die lange
 * `script`-Zeile die ganze Einstellungsseite nach rechts. Umbrechen wäre die
 * schlechtere Wahl: Was hier steht, wird kopiert, und ein eingefügter
 * Zeilenumbruch landete mit im HTML des Kunden.
 */
.portal-einbau-stueck {
  margin: var(--bro-abstand-8) 0 0;
  padding: var(--bro-abstand-12);
  background: var(--bro-flaeche-1);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
  color: var(--bro-tinte-1);
  font-size: var(--bro-schrift-klein-groesse);
  overflow-x: auto;
}

/*
 * Die eigenen Netze der Besuchermessung (#5358) — ein eigener Abschnitt in
 * den Einstellungen, eigener Anker nach Hausregel #1686.
 */
.portal-besuchermessung-eigene-netze {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  margin-top: var(--bro-abstand-16);
}

/*
 * Ziele und Trichter der Besuchermessung (#6315) — ein Stapel aus Karten wie
 * `portal-besuchermessung`. Jeder Abschnitt hat seine eigene Klasse als
 * E2E-Grenze (Hausregel #1686); Tabellen und Karten bringen ihre Gestalt aus
 * `@bro/ui` mit, hier steht nur die Anordnung.
 */
.portal-ziele,
.portal-ziele-liste,
.portal-trichter-liste,
.portal-trichter {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-16);
}

.portal-ziele-zeitraum {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-8);
}

.portal-ziele-zeitraum p,
.portal-besuchermessung-ziele-verweis {
  flex-basis: 100%;
  margin: 0;
  color: var(--bro-tinte-2);
}

/* Der Rechte-Hinweis kommt seit #7404 aus `rechteHinweis`; die Klasse bleibt
   als Anker seines Tests (`ziele.test.ts`) und trägt nur den Außenabstand. */
.portal-ziele-ohne-recht {
  margin: 0;
}

.portal-ziel-anlegen,
.portal-trichter-anlegen {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
}

/* Eine Schrittzeile: Bezeichnung, Art und Vergleichswert nebeneinander, auf
   schmalem Bildschirm untereinander. */
.portal-trichter-schritt {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-8);
  border: 0;
  padding: 0;
  margin: 0;
}

/* Redaktionsplan (#9040): Monatsraster, auf schmalen Geräten aufklappbare Tagesliste. */
.portal-redaktionsplan {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-16);
}
.portal-redaktionsplan-kopf,
.portal-redaktionsplan-legende {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-12);
}
.portal-redaktionsplan-kopf h2 {
  margin: 0;
}
.portal-redaktionsplan-raster,
.portal-redaktionsplan-wochentage {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.portal-redaktionsplan-feld {
  min-width: 0;
  border: 1px solid var(--bro-linie);
  padding: var(--bro-abstand-8);
}
.portal-redaktionsplan-feld h3,
.portal-redaktionsplan-wochentage {
  font-size: var(--bro-schrift-fein-groesse);
}
.portal-redaktionsplan-feld h3 {
  margin: 0;
}
.portal-redaktionsplan-feld[data-heute] {
  border-color: var(--bro-akzent);
  background: var(--bro-hinweis-flaeche);
}
.portal-redaktionsplan-heute {
  color: var(--bro-akzent);
}
.portal-redaktionsplan-liste {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  padding: 0;
  list-style: none;
}
.portal-redaktionsplan-eintrag {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
  overflow-wrap: anywhere;
}
.portal-redaktionsplan-art {
  white-space: normal;
}
.portal-redaktionsplan-art[data-planart="newsletter"] {
  color: var(--bro-erfolg);
}
.portal-redaktionsplan-art[data-planart="social"] {
  background: var(--bro-akzent);
  color: var(--bro-tinte-1);
}
.portal-redaktionsplan-art[data-planart="kampagnen-start"] {
  color: var(--bro-warnung);
}
.portal-redaktionsplan-art[data-planart="kampagnen-ende"] {
  color: var(--bro-tinte-2);
}
.portal-redaktionsplan-art[data-planart="werbeausgaben"] {
  background: var(--bro-datenreihe-6);
  color: var(--bro-tinte-1);
}
.portal-redaktionsplan-art.bro-statuspille--erfolg {
  color: var(--bro-erfolg);
  background: var(--bro-flaeche-1);
}
.portal-redaktionsplan-mobil {
  display: none;
}
.portal-redaktionsplan-mehr summary,
.portal-redaktionsplan-mobiltag summary {
  cursor: pointer;
}
.portal-redaktionsplan-mobiltag {
  padding: var(--bro-abstand-12);
  border-bottom: 1px solid var(--bro-linie);
}
@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (max-height: 479px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (orientation: portrait) {
  .portal-redaktionsplan-desktop {
    display: none;
  }
  .portal-redaktionsplan-mobil {
    display: block;
  }
}

/*
 * Eine Pflegezeile INNERHALB einer Tabellenzelle (Glasfaser-Preistafel, #3620).
 *
 * Dieselben Felder wie ein gewöhnliches `portal-formular`, nur nebeneinander
 * statt untereinander: Eine Preistafel führt bis zu 22 Positionen, und
 * 22 untereinander gestapelte Formulare wären keine Tafel mehr, sondern eine
 * Seite zum Scrollen. Reine Anordnung, keine Farbe und keine Schrift — die
 * kommen weiter aus den Tokens (B14.7).
 */
.portal-formular-zeile {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
}

/*
 * Impressum und Datenschutzhinweise (#2225).
 *
 * Der Fuß hängt unter JEDER Seite (`seitenGeruest`), auch unter der
 * angemeldeten — § 5 DDG verlangt „ständig verfügbar", nicht „auf der
 * Anmeldeseite". Deshalb ist er bewusst leise: kleine Schrift, gedeckte Tinte,
 * kein Rahmen. Er soll auffindbar sein, nicht auffallen.
 */
.portal-rechtsfuss {
  display: flex;
  gap: var(--bro-abstand-16);
  justify-content: center;
  padding: var(--bro-abstand-16);
  font-size: var(--bro-schrift-klein-groesse);
  line-height: var(--bro-schrift-klein-zeilenhoehe);
}

.portal-rechtsfuss a {
  color: var(--bro-tinte-2);
}

.portal-rechtsfuss a:hover {
  color: var(--bro-akzent);
}

/*
 * Die Rechtsseiten selbst: oben ausgerichtet statt mittig, weil ein
 * Datenschutzhinweis länger ist als der Bildschirm — mittig zentriert wäre der
 * Anfang des Textes nicht sichtbar.
 */
.portal-rechtsseite {
  align-items: flex-start;
}

.portal-rechtskarte {
  width: 100%;
  max-width: 44rem;
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
}

.portal-rechtsangaben {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--bro-abstand-4) var(--bro-abstand-12);
  margin: 0;
}

.portal-rechtsangaben dt {
  color: var(--bro-tinte-2);
}

.portal-rechtsangaben dd {
  margin: 0;
}

.portal-rechtszweck {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
}

.portal-rechtsliste {
  margin: 0;
  padding-left: var(--bro-abstand-16);
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
}

.portal-rechtsfassung {
  color: var(--bro-tinte-2);
}

/*
 * Die Vorführ-Rollenwahl (#6744): Personen und Betriebe als Karten in einem
 * fließenden Raster, ein gestalteter Vorführ-Hinweis, ein Leerzustand.
 *
 * Bewusst OHNE Sprungmarke: Die Raster laufen über `auto-fill` und
 * `minmax(min(100%, …), 1fr)` von einer Spalte auf dem Handy bis zu dreien
 * am Desktop. Die festen Sprungmarken je Geräteklasse kommen als Tokens mit
 * Scheibe 3 von #6744 — eine hier frei gewählte Zahl wäre die zweite Zahl
 * neben ihnen (Hausregel „Design nur über Tokens").
 *
 * Nur Anordnung und Token-Verweise (B14.7); die Farben kommen aus den Tokens
 * und damit auch aus deren Dunkelfassung, die diese Seite als einzige einbindet
 * (`vorfuehrSeitenGeruest`).
 */

/* Die Bühne der Rollenwahl steht oben, nicht mittig: Sie ist länger als der Bildschirm. */
.portal-rollenwahl {
  align-items: flex-start;
}

.portal-rollenwahl-buehne {
  width: 100%;
  max-width: 72rem;
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-24);
}

.portal-rollenwahl-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--bro-abstand-12);
}

.portal-rollenwahl-titel {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
}

.portal-rollenwahl-titel h1,
.portal-rollenwahl-titel p {
  margin: 0;
}

.portal-rollenwahl-betriebszeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-8);
  color: var(--bro-tinte-2);
}

.portal-rollenwahl-betriebszeile strong {
  color: var(--bro-tinte-1);
  font-weight: var(--bro-schrift-betont-gewicht);
}

/* Der Vorführ-Hinweis: eine Leiste, nicht Fließtext — in der Warnfläche von
   v10 (BrodeskPortalV10.dc.html:416), ohne Balken und Schatten (#6901). */
.portal-rollenwahl-hinweis {
  display: flex;
  gap: var(--bro-abstand-12);
  padding: var(--bro-abstand-16);
  background: var(--bro-warnung-flaeche);
  border: 1px solid var(--bro-warnung-linie);
}

.portal-rollenwahl-hinweis > .bro-symbol {
  flex: none;
  width: var(--bro-abstand-24);
  height: var(--bro-abstand-24);
  color: var(--bro-warnung);
}

.portal-rollenwahl-hinweis-text {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
}

.portal-rollenwahl-hinweis-text p {
  margin: 0;
}

.portal-rollenwahl-warnung {
  color: var(--bro-warnung);
  font-weight: var(--bro-schrift-betont-gewicht);
}

/* Fehlerkasten wie v10 (dc:1037, #6901). */
.portal-rollenwahl-meldung {
  margin: 0;
  padding: var(--bro-abstand-12) var(--bro-abstand-16);
  border: 1px solid var(--bro-fehler-linie);
  color: var(--bro-fehler);
  background: var(--bro-fehler-flaeche);
}

.portal-rollenwahl-abschnitt {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
}

.portal-rollenwahl-abschnittkopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--bro-abstand-12);
}

.portal-rollenwahl-abschnittkopf h2,
.portal-rollenwahl-abschnittkopf p {
  margin: 0;
}

/* Personen: Karten im fließenden Raster, der Knopf am Fuß jeder Karte. */
.portal-rollenwahl-personen {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--bro-abstand-16);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
}

/* Karte wie v10 (dc:395): Rand, kein farbiger Balken (#6901). */
.portal-rollenwahl-person {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
}

.portal-rollenwahl-person-kopf {
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-12);
}

.portal-rollenwahl-person-titel {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
  min-width: 0;
}

.portal-rollenwahl-person-titel h3 {
  margin: 0;
  overflow-wrap: anywhere;
}

.portal-rollenwahl-rollen {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-4);
}

.portal-rollenwahl-modulrolle {
  color: var(--bro-akzent-text);
  background: var(--bro-akzent-flaeche);
}

.portal-rollenwahl-sicht,
.portal-rollenwahl-rollensatz,
.portal-rollenwahl-adresse {
  margin: 0;
}

.portal-rollenwahl-adresse {
  color: var(--bro-tinte-3);
  overflow-wrap: anywhere;
}

.portal-rollenwahl-person > .bro-knopf {
  margin-top: auto;
  width: 100%;
  min-height: var(--bro-abstand-32);
  padding-top: var(--bro-abstand-12);
  padding-bottom: var(--bro-abstand-12);
}

/* Leerzustand und „Nicht angeboten": gestrichelt, damit es nicht wie eine Karte aussieht. */
.portal-rollenwahl-leer {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  padding: var(--bro-abstand-24);
  background: var(--bro-flaeche-1);
  border: 1px dashed var(--bro-linie-stark); /* v10 dc:1019 (#6901) */
}

.portal-rollenwahl-leer h2,
.portal-rollenwahl-leer p {
  margin: 0;
}

.portal-rollenwahl-zurueckgehalten {
  margin: 0;
  padding-left: var(--bro-abstand-16);
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
}

/* Andere Betriebe: kompakte Kacheln, der eigene mit Akzentkante und ohne Link. */
.portal-rollenwahl-betriebe {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--bro-abstand-8);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
}

.portal-rollenwahl-betrieb > a,
.portal-rollenwahl-betrieb-aktuell {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
  height: 100%;
  padding: var(--bro-abstand-12) var(--bro-abstand-16);
  background: var(--bro-flaeche-1);
  border: 1px solid var(--bro-linie);
  color: var(--bro-tinte-1);
  text-decoration: none;
}

/* Hover und Fokus wie v10 (#6901): Fläche `--bro-flaeche-0` beim Überfahren, der
   Umriss aus dc:21 beim Fokus — kein Ring als Schatten. */
.portal-rollenwahl-betrieb > a:hover {
  background: var(--bro-flaeche-0);
}

.portal-rollenwahl-betrieb > a:focus-visible {
  outline: var(--bro-fokus-breite) solid var(--bro-akzent);
  outline-offset: var(--bro-fokus-abstand);
}

/* Der eigene Betrieb ist „gewählt“: Markierung und helle Akzentfläche wie die
   aktive Zeile in v10 (dc:2331), statt eines verbreiterten Rands. */
.portal-rollenwahl-betrieb-aktuell {
  background: var(--bro-akzent-flaeche);
  box-shadow: inset var(--bro-markierung-breite) 0 0 var(--bro-akzent);
}

.portal-rollenwahl-betrieb-name {
  font-weight: var(--bro-schrift-betont-gewicht);
  overflow-wrap: anywhere;
}

.portal-rollenwahl-betrieb-branche {
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
  line-height: var(--bro-schrift-klein-zeilenhoehe);
}

.portal-rollenwahl-betrieb-kennung {
  color: var(--bro-tinte-3);
  font-size: var(--bro-schrift-fein-groesse);
  line-height: var(--bro-schrift-fein-zeilenhoehe);
  letter-spacing: var(--bro-schrift-fein-laufweite);
  overflow-wrap: anywhere;
}

/* Der Weg zur Übersicht ohne Wechsel — ein Link in Akzent-Tinte, hell wie dunkel lesbar. */
.portal-rollenwahl-weiter {
  color: var(--bro-akzent-text);
}

/* Die Suche über die Betriebe — verborgen, bis das Skript sie freigibt. */
.portal-rollenwahl-suche {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
  width: min(100%, 20rem);
}

.portal-rollenwahl-suche p {
  margin: 0;
}

.portal-rollenwahl-suchfeld {
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-8);
  min-height: var(--bro-abstand-32);
  padding: 0 var(--bro-abstand-12);
  background: var(--bro-flaeche-1);
  border: 1px solid var(--bro-linie-stark); /* Suchfeld in v10, dc:39 (#6901) */
  color: var(--bro-tinte-2);
}

/* Das Feld darin hat keinen eigenen Umriss; der Kasten trägt den von v10 (dc:21). */
.portal-rollenwahl-suchfeld:focus-within {
  outline: var(--bro-fokus-breite) solid var(--bro-akzent);
  outline-offset: var(--bro-fokus-abstand);
}

.portal-rollenwahl-suchfeld > .bro-symbol {
  flex: none;
  width: var(--bro-abstand-16);
  height: var(--bro-abstand-16);
}

.portal-rollenwahl-suchfeld > input {
  flex: 1;
  min-width: 0;
  padding: var(--bro-abstand-8) 0;
  border: 0;
  background: transparent;
  color: var(--bro-tinte-1);
  font: inherit;
}

.portal-rollenwahl-suchfeld > input:focus {
  outline: none;
}

/*
 * Die Übersicht als Startseite (#6744, Scheibe 2): Tageszeile, die Leiste
 * „Auf einen Blick", eine Reihe Hinweise, darunter die Karten — das Journal in
 * voller Breite. Alles hier ist Anordnung über Tokens; die Karten selbst
 * bleiben `.portal-uebersicht-karte`, die Zeilen `.portal-uebersicht-zeile`
 * (beide auch von „Mein Tag" und den Unterlagen benutzt — deshalb jede
 * Regel hier unter `.portal-startseite` und nie an der geteilten Klasse).
 *
 * Ohne Sprungmarke, wie die Rollenwahl: fließende Raster bis zu den
 * Sprungmarken-Tokens aus Scheibe 3.
 */

.portal-startseite {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-24);
}

/* „Auf einen Blick": große Zahl, Name darunter, Symbol links. Der Zustand färbt
   nur das Symbol — v10 zeigt Kennzahlen ohne farbige Kante und ohne Schatten
   (BrodeskPortalV10.dc.html:479–485, #6901). */
.portal-startseite-kennzahlen {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--bro-abstand-12);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr));
}

.portal-startseite-kennzahl {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "symbol wert"
    "symbol name"
    "symbol zusatz";
  column-gap: var(--bro-abstand-12);
  align-items: start;
  height: 100%;
  padding: var(--bro-abstand-16);
  background: var(--bro-flaeche-1);
  border: 1px solid var(--bro-linie);
  color: var(--bro-tinte-1);
  text-decoration: none;
}

/* Hover und Fokus wie v10 (#6901): Fläche beim Überfahren, Umriss (dc:21) beim Fokus. */
.portal-startseite-kennzahl:hover {
  background: var(--bro-flaeche-0);
}

.portal-startseite-kennzahl:focus-visible {
  outline: var(--bro-fokus-breite) solid var(--bro-akzent);
  outline-offset: var(--bro-fokus-abstand);
}

.portal-startseite-kennzahl > .bro-symbol {
  grid-area: symbol;
  width: var(--bro-abstand-24);
  height: var(--bro-abstand-24);
  margin-top: var(--bro-abstand-8);
  color: var(--bro-tinte-2);
}

.portal-startseite-kennzahl[data-zustand="warnung"] > .bro-symbol {
  color: var(--bro-warnung);
}

.portal-startseite-kennzahl[data-zustand="erfolg"] > .bro-symbol {
  color: var(--bro-erfolg);
}

.portal-startseite-kennzahl-wert {
  grid-area: wert;
  font-size: var(--bro-schrift-anzeige-groesse);
  line-height: var(--bro-schrift-anzeige-zeilenhoehe);
  font-weight: var(--bro-schrift-anzeige-gewicht);
  font-variant-numeric: tabular-nums;
}

.portal-startseite-kennzahl-name {
  grid-area: name;
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
  line-height: var(--bro-schrift-klein-zeilenhoehe);
}

.portal-startseite-kennzahl-zusatz {
  grid-area: zusatz;
  color: var(--bro-tinte-3);
  font-size: var(--bro-schrift-fein-groesse);
  line-height: var(--bro-schrift-fein-zeilenhoehe);
}

/* Die Hinweise (Meldungen, Mitlese-Anfragen, Reaktivierung): eine Reihe schmaler Karten in der Warnfläche. */
.portal-startseite-hinweise {
  display: grid;
  gap: var(--bro-abstand-12);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

/* Ein Hinweis ist eine Zeile, keine Kachel: Titel und Pille, der Satz, der Weg — nebeneinander, solange Platz ist. */
.portal-startseite-hinweis {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-12) var(--bro-abstand-24);
  /* Warnfläche von v10 (dc:416) statt farbiger Kante (#6901). */
  background: var(--bro-warnung-flaeche);
  border-color: var(--bro-warnung-linie);
}

.portal-startseite-hinweis > .portal-uebersicht-kopf {
  gap: var(--bro-abstand-8);
}

.portal-startseite-hinweis > p {
  flex: 1 1 16rem;
  margin: 0;
}

.portal-startseite-hinweis > .portal-uebersicht-aktionen {
  flex-basis: 100%;
}

/* „Dashboard anpassen“ (#9035): klein unter der Begrüßung, die Kästchen
   nebeneinander, solange Platz ist. */
.portal-dashboard-anpassen {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
}

.portal-dashboard-anpassen-liste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-8) var(--bro-abstand-16);
}

.portal-dashboard-anpassen > button {
  align-self: flex-start;
}

/* Seit #9035 stehen die Hinweise in EINER Karte, je Hinweis eine Zeile —
   die Karte selbst stapelt Kopf und Liste untereinander. */
.portal-startseite-hinweis-karte {
  flex-direction: column;
  align-items: stretch;
}

.portal-startseite-hinweis-zeile {
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-8) var(--bro-abstand-12);
}

.portal-startseite-hinweis-zeile > .portal-uebersicht-aktionen {
  flex-basis: 100%;
}

/* „Heute in Kürze" steht allein über den Karten, mit der Markierung von v10
   (inset 3px, dc:2331) statt einer verbreiterten Kante (#6901). */
.portal-startseite > [data-tageskurzfassung] {
  box-shadow: inset var(--bro-markierung-breite) 0 0 var(--bro-akzent);
}

/* Die Karten: breitere Spalten als das geteilte Raster, das Journal über alle. */
.portal-startseite-karten {
  gap: var(--bro-abstand-16);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

/* „Heute" und das Journal über die ganze Breite: der Tag mit seinen Kacheln in einer Reihe, das Journal als Zeilen. */
.portal-startseite-heute,
.portal-startseite-journal {
  grid-column: 1 / -1;
}

.portal-startseite-termin {
  justify-content: flex-start;
  gap: var(--bro-abstand-16);
}

.portal-startseite-karten .portal-uebersicht-kopf {
  padding-bottom: var(--bro-abstand-8);
  border-bottom: 1px solid var(--bro-linie);
}

/* Zeilen mit Trennlinie statt Luft — die Liste wird lesbar wie eine Tabelle. */
.portal-startseite-karten .portal-uebersicht-liste {
  gap: 0;
}

.portal-startseite-karten .portal-uebersicht-zeile {
  padding: var(--bro-abstand-8) 0;
}

.portal-startseite-karten .portal-uebersicht-zeile + .portal-uebersicht-zeile {
  border-top: 1px solid var(--bro-linie);
}

.portal-startseite .portal-startseite-zeit {
  flex: none;
  min-width: 3.5rem;
  font-variant-numeric: tabular-nums;
}

/* Leerzustände: Symbol links, zwei Zeilen rechts — grün, wenn nichts anliegt. */
.portal-startseite-leer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--bro-abstand-12);
  align-items: start;
  padding: var(--bro-abstand-16) 0;
}

.portal-startseite-leer > .bro-symbol {
  grid-row: 1 / span 2;
  width: var(--bro-abstand-24);
  height: var(--bro-abstand-24);
  color: var(--bro-tinte-3);
}

.portal-startseite-leer[data-zustand="erfolg"] > .bro-symbol {
  color: var(--bro-erfolg);
}

/* Die Kacheln der Karte „Heute" in zwei bis drei Spalten statt untereinander. */
.portal-startseite-heute .portal-kennzahlen {
  gap: var(--bro-abstand-8);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5rem), 1fr));
}

.portal-startseite-heute .portal-kennzahl-wert {
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* Umzüge (Issue #4085): Listen-Link, Status-Workflow-Reihe. Die Kopfzahlen
   sind gemeinsame `portal-kennzahl`-Kacheln (#7548). */

.portal-umzug-liste-link {
  color: var(--bro-akzent);
  text-decoration: none;
  font-weight: var(--bro-schrift-betont-gewicht);
}

.portal-umzug-liste-link:hover {
  text-decoration: underline;
}

/* Ein stornierter Auftrag bleibt in der Liste sichtbar, tritt aber zurück
   (Alt: `opacity-60`, `Index.cshtml:55`) — derselbe Token wie bei einer
   erledigten Aufgabe. */
.portal-umzug-storniert {
  opacity: var(--bro-erledigt-deckkraft);
}

.portal-umzug-status-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-8);
}

.portal-umzug-status-knopf {
  display: inline-flex;
}

/* Ein bereits durchlaufener Status-Schritt (Alt: grün hinterlegt,
   `Detail.cshtml:41`) — dieselbe Erfolgsfarbe wie die Statuspille. */
.portal-umzug-status-erledigt {
  border-color: var(--bro-erfolg);
  color: var(--bro-erfolg);
}

/*
 * Der Abmahn-Check der Kaltakquise (#6732, Alt `ColdCall/AbmahnCheck.cshtml`).
 * Drei Kacheln oben (Risiko, Gesprächswert, Befunde), darunter der Leitfaden
 * als Fließtext; schmal untereinander.
 */
.portal-abmahn {
  display: grid;
  gap: var(--bro-abstand-16);
}

.portal-abmahn-lage {
  border-left: var(--bro-abstand-4) solid var(--bro-fehler);
  padding: var(--bro-abstand-12) var(--bro-abstand-16);
}

.portal-abmahn-formular {
  max-width: 40rem;
}

.portal-abmahn-ergebnis,
.portal-abmahn-leitfaden,
.portal-abmahn-letzte,
.portal-abmahn-liste {
  display: grid;
  gap: var(--bro-abstand-12);
  padding: var(--bro-abstand-16);
}

.portal-abmahn-kacheln {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--bro-abstand-16);
}

@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (max-height: 479px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (orientation: portrait) {
  .portal-abmahn-kacheln {
    grid-template-columns: 1fr;
  }
}

.portal-abmahn-link {
  color: var(--bro-akzent);
  font-weight: var(--bro-schrift-betont-gewicht);
  text-decoration: none;
}

.portal-abmahn-link:hover {
  text-decoration: underline;
}

.portal-abmahn-punkte,
.portal-abmahn-einwaende {
  display: grid;
  gap: var(--bro-abstand-12);
  margin: 0;
  padding-left: var(--bro-abstand-24);
}

.portal-abmahn-punkt dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--bro-abstand-4) var(--bro-abstand-12);
  margin: var(--bro-abstand-8) 0 0;
}

.portal-abmahn-punkt dt {
  color: var(--bro-tinte-2);
}

.portal-abmahn-punkt dd {
  margin: 0;
}

/* Was man NICHT sagt — bewusst sichtbar abgesetzt, nicht als Fußnote
   (Alt: roter Rand links, `AbmahnCheck.cshtml:236`). */
.portal-abmahn-grenzen {
  border-left: var(--bro-abstand-4) solid var(--bro-fehler);
  padding-left: var(--bro-abstand-12);
}

.portal-abmahn-protokoll summary {
  cursor: pointer;
  font-weight: var(--bro-schrift-betont-gewicht);
}

.portal-abmahn-vorlage {
  width: 100%;
  font-family: var(--bro-schrift-familie);
}

/*
 * Der Wortlaut einer Aufnahme (Issue #2223). Umbrechend statt scrollend: Ein
 * Transkript ist Fließtext mit eigenen Zeilenenden, keine Tabelle und kein
 * Quelltext — eine waagerechte Bildlaufleiste macht es unlesbar. Die Höhe ist
 * begrenzt, damit ein langes Gespräch die Detailseite nicht zur Endlosrolle
 * macht; darin wird gescrollt.
 */
.portal-transkript {
  margin: 0;
  max-height: 24rem;
  overflow-y: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: inherit;
  padding: var(--bro-abstand-8);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-s);
  background: var(--bro-flaeche-0);
}

/* Gespräche: ein nur VERMUTETER Sprechername (#7171) — grau und kursiv wie im
   Alt („Grau und kursiv heißt: nur vermutet“). Farbe nur aus dem Token
   (B14.7); die Herkunft steht als Text daneben, die Farbe ist nicht die
   einzige Auskunft. */
.portal-sprecher-vermutung {
  color: var(--bro-tinte-3);
  font-style: italic;
}

/* Bewertungsantworten (#3808). Die Klassen tragen keine Farben und keine
   Schriften — nur Abstand und Trennlinie aus den Tokens (B14.7). Sie sind
   zugleich die Anker, an denen die E2E ihren Abschnitt benennt, statt einen
   Text der ganzen Seite zu suchen. */
.portal-bewertung-karte {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
}

.portal-bewertung-gasttext {
  padding: var(--bro-abstand-12);
  border-left: 3px solid var(--bro-linie);
  border-radius: var(--bro-radius-s);
  background: var(--bro-flaeche-0);
}

.portal-bewertung-vorgang {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  padding-top: var(--bro-abstand-12);
  border-top: 1px solid var(--bro-linie);
}

/* Die beiden Formulare sind der Kern der Zusage aus #2483: Entwerfen und
   Veröffentlichen sind zwei Handlungen, nie ein Klick. Der sichtbare Abstand
   dazwischen ist deshalb kein Schmuck. */
.portal-bewertung-entwurf,
.portal-bewertung-veroeffentlichen {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
}

.portal-bewertung-veroeffentlichen {
  padding: var(--bro-abstand-12);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
}

/*
 * Der Impressums-Hinweis in den Firmendaten (#2225). Eine eigene Klasse, damit
 * ein Test ihn ansprechen kann, ohne über `role` zu greifen — die Karte trägt
 * genau EINEN `alert` (die Rechnungs-Lücken), und das soll so bleiben.
 */
.portal-impressum-hinweis {
  margin: 0;
}

/*
 * Der Protokoll-Versand an der Glasfaser-Detailseite (Issue 2228).
 *
 * Das Formular ist breiter begrenzt als ein gewöhnliches Eingabeformular,
 * weil die Vorschau darin einen ganzen Mailtext zeigt: Auf 32rem bräche jede
 * Zeile zweimal um, und der Mensch sähe nicht mehr, was der Empfänger sieht.
 */
.portal-protokoll-versand {
  max-width: 48rem;
}

/*
 * Der Vorschau-Block hebt sich von den Eingabefeldern ab, weil er etwas
 * ANDERES ist: kein Feld, das man ausfüllt, sondern das Ergebnis. Ohne die
 * Absetzung liest er sich wie ein weiteres, seltsam unbeschriftetes Feld.
 */
.portal-protokoll-vorschau {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
  padding: var(--bro-abstand-12);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
  background: var(--bro-flaeche-1);
}

.portal-protokoll-vorschau h3,
.portal-protokoll-vorschau p {
  margin: 0;
}

/*
 * Der Mailtext selbst. Umbrechend statt scrollend, aus demselben Grund wie
 * beim Transkript (`.portal-transkript`): Es ist Fließtext mit eigenen
 * Zeilenenden, und eine waagerechte Bildlaufleiste macht ihn unlesbar. Die
 * Schriftfamilie wird geerbt, damit die Vorschau aussieht wie eine Mail und
 * nicht wie Quelltext — `pre` trägt sonst eine Festbreitenschrift.
 */
.portal-protokoll-vorschau-text {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: inherit;
  color: var(--bro-tinte-2);
}

/*
 * Die Entwurfsansicht einer Gastnachricht (Issue #4478).
 *
 * Keine festen Farben und keine festen Größen — alles über Tokens
 * (Hausregel „Design nur über Tokens"). Und keine Fremd-Ressource: Was hier
 * steht, kommt aus dem eigenen Bündel (ADR-0003).
 */
.portal-entwurf {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
}

/*
 * Der Sendeteil (#5835) ist durch eine Linie von den KI-Knöpfen getrennt:
 * Die KI-Knöpfe legen nur Text ins Feld, dieser Knopf schickt ihn zum Gast.
 */
.portal-entwurf-senden {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  padding-top: var(--bro-abstand-12);
  border-top: 1px solid var(--bro-linie);
}

/* Gast, Buchung, Betreff als zweispaltige Liste — sie ordnet, sie rechnet nicht. */
.portal-entwurf-kopf {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--bro-abstand-4) var(--bro-abstand-12);
  margin: 0;
}

.portal-entwurf-kopf dt {
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
  line-height: var(--bro-schrift-klein-zeilenhoehe);
}

.portal-entwurf-kopf dd {
  margin: 0;
}

/*
 * Die letzte Nachricht des Gasts. Sie ist abgesetzt, damit niemand sie mit
 * dem eigenen Entwurf verwechselt — der eine Text geht hinaus, der andere
 * kam herein.
 */
.portal-entwurf-gastnachricht blockquote {
  margin: 0;
  padding: var(--bro-abstand-8) var(--bro-abstand-12);
  border-inline-start: 2px solid var(--bro-linie);
  border-radius: var(--bro-radius-s);
  background: var(--bro-flaeche-1);
}

/*
 * Die Bedienregel aus #4493 steht AM Feld und nicht erst in der
 * Fehlermeldung — sonst erfährt der Mitarbeiter sie erst, wenn er gegen sie
 * gelaufen ist. Sie ist deshalb sichtbar, aber ruhig: klein und in der
 * zweiten Tinte, wie jeder andere Hinweis am Formular.
 */
.portal-entwurf-bedienregel,
.portal-entwurf-schutz {
  margin: 0;
  color: var(--bro-tinte-2);
}

.portal-entwurf textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--bro-schrift-familie);
  font-size: var(--bro-schrift-fliesstext-groesse);
  line-height: var(--bro-schrift-fliesstext-zeilenhoehe);
  padding: var(--bro-abstand-8);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-s);
  background: var(--bro-flaeche-0);
  color: var(--bro-tinte-1);
}

/* Das Gedächtnis der Wohnungen (#2165). Je Wohnung eine Karte mit Tabelle und
   zwei Formularen; die Karte bringt ihre Gestalt aus `bro-karte` mit, hier
   steht nur der Abstand. Die Klassen selbst sind auch ohne Gestalt nötig: Sie
   sind die Anker, an denen ein E2E-Locator SEIN Formular greift — auf dieser
   Seite steht „Diesen Satz löschen“ so oft, wie das Gedächtnis Sätze hat. */

.portal-gedaechtnis-wohnung {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
}

.portal-gedaechtnis-loeschen,
.portal-gedaechtnis-leeren,
.portal-gedaechtnis-pflege {
  margin: 0;
}
/* Die Zuordnung der Portal-Inserate (#2295). Die Karte bringt ihre Gestalt aus
   `bro-karte` mit; hier stehen nur der Abstand und die waagerechte Rolle der
   Tabelle. Die Klassen sind auch ohne eigene Gestalt nötig: Sie sind die Anker,
   an denen ein E2E-Locator SEIN Formular greift — auf dieser Seite steht
   „Zuordnen“ so oft, wie das Portal Inserate gemeldet hat. */

.portal-kanal-zuordnung {
  margin-bottom: var(--bro-abstand-16);
}

/* Fünf Spalten samt Zuordnen-Formular passen auch auf einem Tablet quer
   (1024 px) nicht in die Karte — gemessen an #7067: ohne diesen Rahmen rollte
   die SEITE (1085 px). Die gemeinsame `schmal`-Regel der Schale greift erst
   darunter, deshalb bleibt der eigene Rollrahmen zu jeder Breite, wie beim
   Belegungsplan des Reinigungsblatts; die Tabelle selbst ist seit #7067 eine
   `bro-tabelle`. */
.portal-kanal-tabelle {
  overflow-x: auto;
}

.portal-kanal-stand {
  margin: var(--bro-abstand-8) 0;
}

.portal-kanal-zuordnen {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--bro-abstand-8);
}

/* #2250: Tabellen der Nebenkostenabrechnung bleiben auch mobil lesbar. */
[data-nebenkosten-detail] {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-24);
  min-width: 0;
  overflow-wrap: anywhere;
}

[data-nebenkosten-detail] > section,
[data-nebenkosten-detail] fieldset,
.nebenkosten-position,
.nebenkosten-beleg {
  min-width: 0;
}

/* Die Tabellen der Nebenkosten rollen in ihrem eigenen Rahmen (der umhüllende
   `div role="region"`, gemeinsame Regel aus #7286); sie brechen ihren Text
   aber nicht an jeder Stelle um wie der übrige Detailbereich (#7406, vorher
   seiteneigen als `nebenkosten-tabelle`/`hausverwaltung-tabelle`). */
[data-nebenkosten-detail] .bro-tabelle {
  overflow-wrap: normal;
}

/* Hausverwaltung: Zählerformulare und ein vollständig zuordenbarer Ausdruck. */
.hausverwaltung-uebergabe-oeffnen,
[class^="hausverwaltung-zaehler-"] form,
.hausverwaltung-ablesung-erfassen form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--bro-abstand-12);
}

.hausverwaltung-uebergabe-kontext {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--bro-abstand-8) var(--bro-abstand-16);
}

.hausverwaltung-uebergabe-kontext dd {
  margin: 0;
  overflow-wrap: anywhere;
}

/* Kaltakquise-Anrufseite (#7040): Formulare untereinander, Leisten und Leitfäden als Akkordeon. */
.kaltakquise-ergebnis-form .portal-formular-gruppe,
.kaltakquise-felder-form,
.kaltakquise-zuruecksetzen-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--bro-abstand-12);
}

.kaltakquise-anrufen-form,
.kaltakquise-wieder-oeffnen-form {
  display: inline-block;
  margin-inline-start: var(--bro-abstand-8);
}

.kaltakquise-seitenleiste,
.kaltakquise-leitfaden,
.kaltakquise-einwand,
.kaltakquise-felder,
.kaltakquise-zuruecksetzen {
  border-top: 1px solid var(--bro-linie);
  padding-block: var(--bro-abstand-8);
}

.kaltakquise-seitenleiste > summary,
.kaltakquise-leitfaden > summary,
.kaltakquise-einwand > summary,
.kaltakquise-felder > summary,
.kaltakquise-zuruecksetzen > summary {
  cursor: pointer;
  font-weight: var(--bro-schrift-betont-gewicht);
}

.kaltakquise-seitenleiste li {
  padding-block: var(--bro-abstand-4);
  overflow-wrap: anywhere;
}

/* Kaltakquise-Screen-Pop (#7047): schwebt unten rechts über jeder Seite, nur für Berechtigte. */
.kaltakquise-screen-pop {
  position: fixed;
  inset-block-end: var(--bro-abstand-16);
  inset-inline-end: var(--bro-abstand-16);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
  width: min(24rem, calc(100vw - 2 * var(--bro-abstand-16)));
  max-height: calc(100vh - 2 * var(--bro-abstand-16));
  overflow-y: auto;
}

.kaltakquise-screen-pop[hidden] {
  display: none;
}

.kaltakquise-pop-anruf {
  background: var(--bro-flaeche-1);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-l);
  box-shadow: var(--bro-schatten-menue);
  padding: var(--bro-abstand-16);
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
}

.kaltakquise-pop-anrufer {
  margin: 0;
  overflow-wrap: anywhere;
}

.kaltakquise-pop-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--bro-abstand-8);
}

.kaltakquise-pop-form label {
  display: flex;
  flex-direction: column;
  flex: 1 1 10rem;
}

.kaltakquise-pop-hinweis {
  margin: 0;
  flex-basis: 100%;
}

@media print {
  @page hausverwaltung-uebergabe {
    margin: 16mm;
  }

  body.portal-boden:has(.hausverwaltung-uebergabe) {
    page: hausverwaltung-uebergabe;
    min-height: 0;
    background: var(--bro-flaeche-1);
  }

  .portal-schale:has(.hausverwaltung-uebergabe),
  .portal-inhalt:has(> .hausverwaltung-uebergabe) {
    display: block;
    min-height: 0;
    padding: 0;
  }

  .portal-schale:has(.hausverwaltung-uebergabe) > .portal-seitenleiste,
  .portal-inhalt:has(> .hausverwaltung-uebergabe) > :not(.hausverwaltung-uebergabe),
  .hausverwaltung-uebergabe-druckhinweis,
  body:has(.hausverwaltung-uebergabe) > .portal-rechtsfuss {
    display: none;
  }

  .hausverwaltung-uebergabe {
    border: 0;
    box-shadow: none;
    padding: 0;
    overflow: visible;
  }

  .hausverwaltung-uebergabe .bro-statuspille {
    white-space: normal;
    color: var(--bro-tinte-1);
  }

  .hausverwaltung-uebergabe h2,
  .hausverwaltung-uebergabe h3 {
    break-after: avoid;
  }

  .hausverwaltung-uebergabe tr,
  .hausverwaltung-uebergabe li {
    break-inside: avoid;
  }
}

/*
 * Besucher-Auswertung (#2613) — Anzeigeseite zum Sammelpunkt aus #2610.
 *
 * Die Klassen sind vor allem ANKER: Jeder Abschnitt trägt einen eigenen, damit
 * ein E2E-Locator ihn greifen kann, statt seitenweit nach einem Wort zu suchen
 * (Hausregel, #1686). Gestalt bringen die Karten und Tabellen aus `@bro/ui`
 * schon mit; hier steht nur, was den Stapel lesbar hält.
 */

.portal-besuchermessung {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-16);
}

/* Die Zeitraumwahl steht als Zeile über allem — dieselbe Bauart wie
   `portal-berichte-zeitraum`, und aus demselben Grund: Was gerechnet wurde,
   soll am Kopf der Seite ablesbar sein. */
.portal-besuchermessung-zeitraum {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--bro-abstand-16);
}

.portal-besuchermessung-zeitraum label {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
}

.portal-besuchermessung-zeitraum p {
  flex-basis: 100%;
  margin: 0;
  color: var(--bro-tinte-2);
}

/* Kopfzahlen und Trichter: viele kleine Zahlen nebeneinander, die auf einem
   schmalen Bildschirm umbrechen dürfen. */
.portal-besuchermessung-kopfzahlen dl,
.portal-besuchermessung-trichter dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: var(--bro-abstand-16);
  margin: 0;
}

.portal-besuchermessung-kopfzahlen dd,
.portal-besuchermessung-trichter dd {
  margin: 0;
}

.portal-besuchermessung-trichter p {
  margin: var(--bro-abstand-16) 0 0;
}

/* Die Erläuterungen gedämpft; der Hinweis „nicht gemessen“ ist ein
   `portal-meldung`-Kasten (#7404) und behält dessen Schriftfarbe. */
.portal-besuchermessung-trichter p:not(.portal-meldung) {
  color: var(--bro-tinte-2);
}

/* Die ausgeschlossenen eigenen Sitzungen (#5358) — ein Satz unter den Kopfzahlen. */
.portal-besuchermessung-eigene-ausgeschlossen {
  margin: var(--bro-abstand-8) 0 0;
  color: var(--bro-tinte-2);
}

/* Die Ranglisten: ein Raster aus Karten, das sich der Breite anpasst. */
.portal-besuchermessung-listen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: var(--bro-abstand-16);
  align-items: start;
}

.portal-besuchermessung-sitzungen table {
  width: 100%;
}

/*
 * Jede Rangliste trägt ihren eigenen Anker (Hausregel #1686): „Kampagnen"
 * steht auf dieser Seite dreimal, ein seitenweiter Locator träfe alle drei.
 * Gestalt haben sie alle dieselbe — die Klassen stehen hier einzeln, weil der
 * Stil-Wächter jeden benutzten Namen im Bündel wiederfinden muss und ein
 * Sammelselektor wie `[class^=…]` ihn nicht trägt.
 */
.portal-besuchermessung-liste-seiten,
.portal-besuchermessung-liste-einstieg,
.portal-besuchermessung-liste-ausstieg,
.portal-besuchermessung-liste-kanaele,
.portal-besuchermessung-liste-verweisquellen,
.portal-besuchermessung-liste-kampagnen,
.portal-besuchermessung-liste-kampagnen-medium,
.portal-besuchermessung-liste-suchbegriffe,
.portal-besuchermessung-liste-kampagnen-inhalt,
.portal-besuchermessung-liste-browser,
.portal-besuchermessung-liste-betriebssysteme,
.portal-besuchermessung-liste-geraete,
.portal-besuchermessung-liste-laender,
.portal-besuchermessung-liste-staedte,
.portal-besuchermessung-liste-klickziele,
.portal-besuchermessung-liste-ausgehend,
.portal-besuchermessung-liste-herunterladbar,
.portal-besuchermessung-liste-frust,
.portal-besuchermessung-liste-verweilzeit,
.portal-besuchermessung-liste-tagesverlauf {
  display: block;
}

/* Der Hinweis unter einem gekürzten Tagesverlauf. */
.portal-besuchermessung-gekuerzt {
  display: block;
}

/*
 * Der Seitentitel in „Häufigste Seiten" (#5356): eine eigene Zeile über dem
 * Pfad, der klein darunter stehen bleibt — der Titel ersetzt ihn nicht.
 */
.portal-besuchermessung-seitentitel {
  display: block;
}

/*
 * Das Reinigungsblatt unter `/m/vermietung/reinigung` (Issue #5157).
 *
 * Die Seite ist für ein Telefon in der Hand einer Reinigungskraft gebaut und
 * trägt deshalb eine eigene, schmale Schale ohne Portal-Seitenleiste — die
 * Begründung steht bei `reinigungsblattSeite`. Hier stehen nur Abstände,
 * Ausrichtung und Rollbarkeit; Farben und Schriften kommen ausschließlich aus
 * Tokens (Hausregel „Design nur über Tokens").
 */
.portal-reinigung {
  padding: var(--bro-abstand-16);
}

.portal-reinigung-kopf-leiste {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--bro-abstand-8);
}

.portal-reinigung-abmelden {
  margin-left: auto;
}

.portal-reinigung-liste {
  display: grid;
  gap: var(--bro-abstand-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.portal-reinigung-eintrag {
  display: grid;
  gap: var(--bro-abstand-4);
}

.portal-reinigung-kopf {
  font-weight: var(--bro-schrift-betont-gewicht);
}

.portal-reinigung-naechste {
  margin: 0;
}

.portal-reinigung-spaeter {
  margin-top: var(--bro-abstand-16);
}

.portal-reinigung-abschluss {
  display: grid;
  gap: var(--bro-abstand-8);
  margin-top: var(--bro-abstand-8);
}

/*
 * Sieben Spalten passen auf ein Handy, sechs Wochen Höhe nicht immer — das
 * Raster rollt deshalb in seinem EIGENEN Bereich, damit die Seite selbst nie
 * waagerecht rollt. Dieselbe Entscheidung wie beim Belegungsraster oben.
 */
.portal-reinigung-kalender {
  overflow-x: auto;
}

.portal-reinigung-blaettern {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-8);
  margin-bottom: var(--bro-abstand-8);
}

.portal-reinigung-immonat {
  font-weight: var(--bro-schrift-betont-gewicht);
}

/*
 * Die blassen Randtage: Sie gehören zum Raster, aber nicht zum Monat. Die
 * Abstufung kommt aus einem Token — eine feste Farbe stünde hier gegen B17.
 */
.portal-reinigung-rand {
  color: var(--bro-tinte-2);
}

.portal-reinigung-heute {
  border: 1px solid var(--bro-akzent);
}

.portal-reinigung-zahlen {
  white-space: nowrap;
}

.portal-reinigung-tagesliste {
  margin-top: var(--bro-abstand-16);
}

/*
 * Der Belegungsplan im Kalender-Reiter (#5161).
 *
 * Anders als das Monatsraster rollt NICHT der ganze Abschnitt, sondern nur die
 * Tabelle in ihrem eigenen Behälter: Die Wohnungsspalte soll beim Rollen
 * stehen bleiben (Alt: „scrollbar anbieten", ohne dass die Wohnungsspalte
 * mitläuft), und ein `position: sticky` klebt immer am NÄCHSTEN rollenden
 * Vorfahren. Deshalb trägt der Plan-Abschnitt `.portal-reinigung-plan` und
 * NICHT `.portal-reinigung-kalender`: Dessen `overflow-x: auto` machte den
 * Abschnitt zum rollenden Vorfahren, und die Spalte klebte am falschen.
 *
 * `position: relative`, damit der Rahmen auch der Bezug der absolut gesetzten
 * Vorlese-Beschriftungen (`.portal-reinigung-plan-vorlesen`) ist: Ohne ihn
 * liegen sie am Dokument und schieben die SEITE auf 1281 px, obwohl die
 * Tabelle im Rahmen rollt — gemessen an #7067 auf jedem der fünf Geräte.
 */
.portal-reinigung-plan-tabelle {
  position: relative;
  overflow-x: auto;
}

/*
 * Die gemeinsame `schmal`-Regel der Schale macht jede `bro-tabelle` selbst zum
 * Rollrahmen (`display: block; overflow-x: auto`). HIER darf sie das nicht:
 * Dann rollt die Tabelle statt des Behälters, die Wohnungsspalte klebt am
 * falschen Vorfahren, und die `<caption>` einer Block-Tabelle fällt aus dem
 * Rollrahmen heraus — gemessen an #7067: die SEITE rollte auf jedem Gerät
 * (scrollWidth 1281 bei 390 px). Der Behälter darüber ist der Rollrahmen.
 */
.portal-reinigung-plan-tabelle .bro-tabelle {
  display: table;
  overflow: visible;
}

/*
 * Die Kalendersteuerung steht auf dem Telefon in EINER Zeile (Alt). Deshalb
 * hier `nowrap` statt des `wrap` von `.portal-reinigung-blaettern`, das diese
 * Leiste sonst erbt — und `overflow-x: auto`, damit die Zeile bei sehr
 * schmalen Geräten rollt, statt die Seite breit zu machen.
 */
.portal-reinigung-plan-steuerung {
  flex-wrap: nowrap;
  align-items: center;
  overflow-x: auto;
}

/*
 * Die Wohnungsspalte bleibt beim Rollen stehen. Sie braucht einen eigenen
 * Hintergrund, weil sonst die Zellen darunter durchscheinen, und ein
 * `z-index`, damit sie über ihnen liegt.
 */
.portal-reinigung-plan-objekt {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--bro-flaeche-1);
  text-align: left;
  white-space: nowrap;
}

/*
 * Die TAGESZELLEN — die Wohnungsspalte ist ausgenommen, sie bleibt linksbündig
 * und so breit, wie ihr Name braucht. Ohne das `:not()` gewänne diese Regel
 * über die Spezifität gegen `.portal-reinigung-plan-objekt` und zentrierte die
 * Kopfzelle „Wohnung".
 */
.portal-reinigung-plan-tabelle td,
.portal-reinigung-plan-tabelle thead th:not(.portal-reinigung-plan-objekt) {
  min-width: var(--bro-abstand-24);
  text-align: center;
  white-space: nowrap;
}

/*
 * Die Beschriftung des Zustands für Vorleseprogramme — sichtbar trägt die
 * Zelle nur ein kurzes Zeichen. Dieselbe Technik wie bei
 * `.portal-vermietung-nichts` im Belegungsbalken: Eine Belegung, die allein an
 * der Farbe hängt, ist für einen Screenreader und für jeden mit einer
 * Farbsehschwäche nicht da.
 */
.portal-reinigung-plan-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/*
 * Die fünf Zustände aus #5158. Die Farben kommen aus Tokens und werden über
 * `color-mix` abgestuft (B17) — eine feste Farbe stünde hier gegen die
 * Hausregel, und ein Mandanten-Branding, das `--bro-akzent` überschreibt, soll
 * den Plan mitfärben.
 */
.portal-reinigung-plan-frei {
  background: var(--bro-flaeche-1);
}

.portal-reinigung-plan-belegt {
  background: color-mix(in oklab, var(--bro-tinte-3) 25%, var(--bro-flaeche-1));
}

.portal-reinigung-plan-anreise {
  background: color-mix(in oklab, var(--bro-akzent) 18%, var(--bro-flaeche-1));
}

/* Abreise und Wechsel sind die Arbeitstage der Reinigung — sie stechen hervor. */
.portal-reinigung-plan-abreise {
  background: color-mix(in oklab, var(--bro-warnung) 22%, var(--bro-flaeche-1));
}

.portal-reinigung-plan-wechsel {
  background: color-mix(in oklab, var(--bro-warnung) 45%, var(--bro-flaeche-1));
  font-weight: var(--bro-schrift-betont-gewicht);
}

/* Der Fotos-Reiter: Formular der Schadensmeldung (#5163). */
.portal-reinigung-schaden {
  margin-bottom: var(--bro-abstand-16);
}

.portal-reinigung-schaden-formular {
  display: grid;
  gap: var(--bro-abstand-8);
  margin-top: var(--bro-abstand-8);
}

.portal-reinigung-schaden-fotos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-8);
  margin: var(--bro-abstand-8) 0 0;
}

.portal-reinigung-schaden-fotos img {
  width: 4rem;
  height: 4rem;
  object-fit: cover;
}

/*
 * Das Glasfaser-Partnerportal (Issue #5116, Scheibe 3b/4 aus #5059).
 *
 * Drei Seiten mit zwei verschiedenen Schalen: `/glasfaser/projekte` läuft im
 * gewöhnlichen `appRahmen` mit Portal-Seitenleiste, `/glasfaser/partner` und
 * die Auftragsseite darunter in einer eigenen, schmalen Schale OHNE Menü — ein
 * Partner ist ein fremder Betrieb und sieht die Module dieses Hauses nicht
 * (Begründung ausgeschrieben bei `partnerSchale`).
 *
 * Hier stehen nur Abstände, Ausrichtung und Anordnung; Farben und Schriften
 * kommen ausschließlich aus Tokens (Hausregel „Design nur über Tokens", B17).
 */
.portal-glasfaser-partner {
  padding: var(--bro-abstand-16);
}

.portal-glasfaser-partner-kopf {
  display: grid;
  gap: var(--bro-abstand-4);
  margin-bottom: var(--bro-abstand-24);
}

/*
 * Der Abmelde-Knopf rutscht nach rechts oben, bleibt aber im Fluss: Auf einem
 * Telefon steht er sonst unter dem Titel und wird beim Rollen übersehen.
 */
.portal-glasfaser-partner-abmelden {
  justify-self: end;
  margin-top: var(--bro-abstand-8);
}

.portal-glasfaser-partner-inhalt {
  display: grid;
  gap: var(--bro-abstand-24);
}

/* Kacheln (`portal-kennzahlen`) und Filterleiste (`portal-werkzeuge`) kommen
   seit #7405 (Scheibe 4h von #6744) aus den gemeinsamen Regeln. */

.portal-glasfaser-partner-liste {
  display: grid;
  gap: var(--bro-abstand-16);
}

.portal-glasfaser-partner-blaettern {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-16);
}

/* „Neue Adresse melden" und die eigenen Meldungen des Subs (#9225). */
.portal-glasfaser-adresse-melden,
.portal-glasfaser-meldungen > li {
  display: grid;
  gap: var(--bro-abstand-8);
}

.portal-glasfaser-meldungen {
  display: grid;
  gap: var(--bro-abstand-8);
  padding-left: 0;
  list-style: none;
}

.portal-glasfaser-auftrag-kopf {
  display: grid;
  gap: var(--bro-abstand-4);
}

/*
 * Generalübersicht und SKA-Quote auf der Glasfaser-Startseite (Issue #5117).
 * Die Kacheln sind seit #7405 gemeinsame `portal-kennzahl`-Kacheln; hier
 * steht nur der Abstand zwischen den Teilen der Karte. Die Gebäude-Tabelle
 * steht im Aufklapper direkt hinter der Legende und rollt in ihrem eigenen
 * Rahmen (`div`, gemeinsame Regel aus #7286).
 */
.portal-glasfaser-uebersicht-hilfe,
.portal-glasfaser-quote-hilfe,
.portal-glasfaser-quote-hilfe + details,
.portal-glasfaser-quote-upload {
  margin-block-start: var(--bro-abstand-12);
}

.portal-glasfaser-auftrag-schritt,
.portal-glasfaser-auftrag-planung,
.portal-glasfaser-auftrag-dokumentation,
.portal-glasfaser-auftrag-verlauf {
  display: grid;
  gap: var(--bro-abstand-8);
}

/*
 * Die Verlaufsspur ist eine Liste ohne Aufzählungszeichen: Jeder Eintrag
 * trägt seinen Zeitstempel und seinen Autor, und ein Punkt davor stünde nur
 * im Weg.
 */
.portal-glasfaser-auftrag-spur {
  display: grid;
  gap: var(--bro-abstand-12);
  margin: 0;
  padding: 0;
  list-style: none;
}

.portal-glasfaser-projekte,
.portal-glasfaser-projekt-zugaenge,
.portal-glasfaser-projekt-zuweisen {
  display: grid;
  gap: var(--bro-abstand-12);
  margin-bottom: var(--bro-abstand-24);
}

.portal-glasfaser-projekt-neu,
.portal-glasfaser-projekt-adresssuche {
  display: grid;
  gap: var(--bro-abstand-8);
  margin-top: var(--bro-abstand-16);
}

/*
 * Die öffentliche Buchungsseite einer Ferienwohnung (#2265). Dieselbe Bauart
 * wie die Bewertungsseite: eine einzelne Spalte in der Mitte, kein Raster —
 * sie wird aus einer fremden Nachricht heraus geöffnet, meist auf einem Handy.
 */
.portal-buchungsseite {
  margin: var(--bro-abstand-32) auto;
  max-width: 34rem;
  padding: 0 var(--bro-abstand-16);
}

/* Der Ort steht unter dem Namen und ist bewusst die GENAUESTE Ortsangabe der
   Seite — Straße, Hausnummer und Postleitzahl kommen hier nie vor. */
.portal-buchungsanfrage {
  display: grid;
  gap: var(--bro-abstand-16);
  margin-block: var(--bro-abstand-24);
}

.portal-buchungsseite-ort {
  color: var(--bro-tinte-2);
  margin-top: calc(var(--bro-abstand-4) * -1);
}

.portal-buchungsseite-belegung {
  color: var(--bro-tinte-2);
}

.portal-buchungsseite-rechtstexte {
  margin-top: var(--bro-abstand-24);
  color: var(--bro-tinte-2);
}

/*
 * KI-Freigaben (#4847): je Persona ein Abschnitt, je wartendem Aufruf eine
 * Karte mit Herkunft, lesbaren Argumenten und den zwei Formularen.
 * Ausschließlich Tokens — keine festen Farben, Abstände oder Schriften.
 */
.portal-ki-freigaben {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-16);
}

.portal-ki-persona {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
  border-top: 1px solid var(--bro-linie);
  padding-top: var(--bro-abstand-16);
}

.portal-ki-liste {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
  margin: 0;
  padding: 0;
  list-style: none;
}

.portal-ki-freigabe {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
  padding: var(--bro-abstand-12);
  background: var(--bro-flaeche-1);
}

.portal-ki-freigabe h4,
.portal-ki-freigabe p {
  margin: 0;
}

.portal-ki-herkunft,
.portal-ki-argumente {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--bro-abstand-4) var(--bro-abstand-12);
  margin: 0;
}

.portal-ki-herkunft dt,
.portal-ki-argumente dt {
  color: var(--bro-tinte-2);
}

.portal-ki-herkunft dd,
.portal-ki-argumente dd {
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.portal-ki-argumente-roh {
  margin: 0;
  overflow-x: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.portal-ki-handlungen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-12);
  align-items: flex-start;
}

.portal-ki-freigeben {
  margin: 0;
}

.portal-ki-ablehnen {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
  flex: 1 1 auto;
}

.portal-ki-ablehnen label {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
}

.portal-ki-sammel {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-8);
  align-items: center;
}

.portal-ki-auskunft {
  border: 1px solid var(--bro-erfolg);
  border-radius: var(--bro-radius-m);
  padding: var(--bro-abstand-12);
  margin: 0;
}

/* „Sperrzeit eintragen“ (#5861): Formular in einer Zeile, bricht schmal um. */
.portal-vermietung-sperrzeit {
  display: grid;
  gap: var(--bro-abstand-8);
}

.portal-vermietung-sperrzeit-formular {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-8);
}

/* „Buchung anlegen“ (#5863): Abschnitte untereinander, Felder schmal gestapelt. */
.portal-vermietung-handbuchung {
  display: grid;
  gap: var(--bro-abstand-8);
}

.portal-vermietung-handbuchung-formular {
  display: grid;
  gap: var(--bro-abstand-8);
}

/* „Zeitraum ändern“ im Buchungsdetail (#6897): Hinweis, zwei Daten, Knopf untereinander. */
.portal-vermietung-zeitraum {
  display: grid;
  gap: var(--bro-abstand-8);
}

/*
 * „Buchungen umziehen“ unter dem Belegungskalender (#6897, ohne Skript #7392):
 * je Buchung eine Auswahl. Lange Objektnamen brechen um, statt die Seite zu
 * verbreitern.
 */
.portal-kalender-umzugsplan {
  margin: var(--bro-abstand-12) 0 0;
}

.portal-kalender-umzugsplan-formular {
  display: grid;
  gap: var(--bro-abstand-8);
}

.portal-kalender-umzugsplan-liste {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  margin: 0;
}

.portal-kalender-umzugsplan-liste li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-8);
  align-items: center;
}

.portal-kalender-umzugsplan-liste select {
  max-width: 100%;
}

/* ── Tickets des Kundendiensts (#6300) ─────────────────────────────────── */

.portal-tickets,
.portal-ticket,
.portal-ticket-auswertung {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-16);
}

.portal-ticket-sammelformular {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
}

.portal-ticket-sammel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-8);
  padding: var(--bro-abstand-12);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
}

.portal-ticket-tafel {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: var(--bro-abstand-12);
}

.portal-ticket-spalte {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  padding: var(--bro-abstand-12);
  background: var(--bro-flaeche-1);
  border-radius: var(--bro-radius-m);
}

.portal-ticket-tafelliste,
.portal-ticket-nachrichten {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.portal-ticket-tafelkarte {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
  padding: var(--bro-abstand-8);
  background: var(--bro-flaeche-0);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-s);
}

.portal-ticket-kopf,
.portal-ticket-verlauf,
.portal-ticket-antwort,
.portal-ticket-bearbeiten,
.portal-ticket-verteilung {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
  padding: var(--bro-abstand-16);
}

.portal-ticket-daten {
  display: grid;
  grid-template-columns: minmax(8rem, auto) 1fr;
  gap: var(--bro-abstand-4) var(--bro-abstand-12);
  margin: 0;
}

.portal-ticket-daten dt {
  color: var(--bro-tinte-2);
}

.portal-ticket-daten dd {
  margin: 0;
}

.portal-ticket-nachricht {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
  padding: var(--bro-abstand-12);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-s);
}

/* Eine interne Notiz sieht nie aus wie eine Antwort an den Kunden. */
.portal-ticket-nachricht--intern {
  border-left: 3px solid var(--bro-warnung);
  background: var(--bro-flaeche-1);
}

.portal-ticket-baustein {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-8);
}

/* Sammelansicht der Mails ohne bestandene Absenderprüfung (#6730). */
.portal-ungepruefte-mails,
.portal-ungepruefte-liste {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
}

.portal-ungepruefte-liste {
  margin: 0;
  padding: 0;
  list-style: none;
}

.portal-ungepruefte-mail {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  padding: var(--bro-abstand-16);
  border-left: 3px solid var(--bro-warnung);
}

/* Das Kennzeichen bricht nicht mitten im Wort um, auch in einer schmalen Spalte. */
.portal-absender-ungeprueft {
  white-space: nowrap;
}

/* Filter „Standort“ über der Ticket-Liste (#6525). */
.portal-ticket-standortfilter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-8);
  margin-block-end: var(--bro-abstand-12);
}

.portal-ticket-schalter {
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-8);
}

/*
 * „Mein Tag“ `/mein-tag` (#6575): Kopf mit Datum, Wege, dann die Kacheln im
 * Raster der Übersicht (`.portal-uebersicht`). Nur die Angabe neben dem
 * Titel (Uhrzeit oder Fälligkeitstag) braucht eine eigene Klasse, damit sie
 * nicht umbricht.
 */
.portal-mein-tag {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
}

.portal-mein-tag-nebenbei {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

/*
 * `/gruppe` (#9974): Die Nebenangabe einer Rechnung („1.438,08 € · fällig …
 * · überfällig“) ist länger als eine Uhrzeit und lief auf dem Handy (390 px)
 * 17 px aus der Kachel. Auf der Gruppenseite darf die Zeile deshalb
 * umbrechen, und beide Hälften dürfen schrumpfen und in sich umbrechen.
 */
.portal-mein-tag[data-gruppe-seite] .portal-uebersicht-zeile {
  flex-wrap: wrap;
}

.portal-mein-tag[data-gruppe-seite] .portal-uebersicht-zeile > * {
  min-width: 0;
  overflow-wrap: anywhere;
}

.portal-mein-tag[data-gruppe-seite] .portal-mein-tag-nebenbei {
  flex-shrink: 1;
}

/*
 * Der persönliche Kalender `/kalender` und `/kalender/teilen` (#6348).
 *
 * Die Woche benutzt `.portal-wochenraster` des Terminkalenders mit; der Monat
 * braucht dasselbe Sieben-Spalten-Raster mit Kopfzeile und leeren Feldern vor
 * dem Ersten. Jede Ebene trägt ihre Farbe aus einem Modul-Token — Aufgaben
 * die der Aufgaben, Abwesenheiten die des Personals, Aktivitäten die der
 * Stammdaten (dort wohnt die Kontakthistorie), Termine den Akzent.
 */
.portal-kalenderseite {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
}

/* Monats-/Wochentitel und Filterbeschriftung stehen auf Höhe der Knöpfe.
   Die vorhandene Chip-Leiste darf auf schmalen Bildschirmen weiter umbrechen. */
.portal-kalender-blaettern,
.portal-kalender-filter {
  align-items: center;
}

/* Die farbige Kalenderkarte kennzeichnet den Eintrag bereits. Der Titel bleibt
   dort Haupttext statt eines allgemeinen blauen Fließtextverweises; der
   globale Tastaturfokus und das Unterstreichen beim Überfahren bleiben. */
.portal-kalenderseite .portal-kalendereintrag a {
  color: inherit;
  text-decoration: none;
}

.portal-kalenderseite .portal-kalendereintrag a:hover {
  text-decoration: underline;
}

.portal-monatsraster {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--bro-abstand-4);
}

.portal-kalendertag-kopf {
  padding: var(--bro-abstand-4);
  text-align: center;
}

.portal-kalendertag {
  min-height: 6rem;
  min-width: 0;
  padding: var(--bro-abstand-4);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-s);
  background: var(--bro-flaeche-1);
}

.portal-kalendertag--heute {
  border-color: var(--bro-akzent);
  background: var(--bro-akzent-flaeche);
}

/* Der Erste des Monats rückt an seinen Wochentag; davor stehen keine Platzhalterfelder. */
.portal-kalendertag[data-spalte="2"] {
  grid-column-start: 2;
}
.portal-kalendertag[data-spalte="3"] {
  grid-column-start: 3;
}
.portal-kalendertag[data-spalte="4"] {
  grid-column-start: 4;
}
.portal-kalendertag[data-spalte="5"] {
  grid-column-start: 5;
}
.portal-kalendertag[data-spalte="6"] {
  grid-column-start: 6;
}
.portal-kalendertag[data-spalte="7"] {
  grid-column-start: 7;
}

.portal-kalendertag h3 {
  margin: 0 0 var(--bro-abstand-4);
}

.portal-kalendereintraege {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: var(--bro-abstand-4) 0 0;
  padding: 0;
  list-style: none;
}

.portal-kalendereintrag {
  --portal-kalender-ebene: var(--bro-modul-neutral);
  min-width: 0;
  padding: 1px var(--bro-abstand-4);
  overflow: hidden;
  border-left: 3px solid var(--portal-kalender-ebene);
  border-radius: var(--bro-radius-s);
  background: color-mix(in oklab, var(--portal-kalender-ebene) 15%, var(--bro-flaeche-1));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-kalendereintrag--fahrdienst {
  --portal-kalender-ebene: var(--bro-modul-fahrdienst);
}

.portal-kalendereintrag--termine {
  --portal-kalender-ebene: var(--bro-akzent);
}

.portal-kalendereintrag--aufgaben {
  --portal-kalender-ebene: var(--bro-modul-aufgaben);
}

.portal-kalendereintrag--abwesenheiten {
  --portal-kalender-ebene: var(--bro-modul-personal);
}

.portal-kalendereintrag--aktivitaeten {
  --portal-kalender-ebene: var(--bro-modul-stammdaten);
}

.portal-kalendereintrag-zeit {
  font-variant-numeric: tabular-nums;
}

/* Wem der Eintrag gehört — kleiner und zurückgenommen hinter dem Titel. */
.portal-kalendereintrag-besitzer {
  color: var(--bro-tinte-2);
}

/*
   Ein Eintrag aus einer Schwesterfirma (#9026), eingesetzt von `/gruppe.js`.
   Die Farbe ist der Akzent der Quellfirma (`--portal-gruppen-farbe`, vom
   Skript nur in der geprüften Form `#rrggbb` gesetzt); ohne sie bleibt die
   Ebenen-Farbe. Der gestrichelte Rand sagt „aus einer anderen Firma“ auch
   ohne Farbe, das Kürzel dahinter sagt, aus welcher.
*/
.portal-kalendereintrag--gruppe {
  border-left-style: dashed;
  border-left-color: var(--portal-gruppen-farbe, var(--portal-kalender-ebene));
  background: color-mix(
    in oklab,
    var(--portal-gruppen-farbe, var(--portal-kalender-ebene)) 12%,
    var(--bro-flaeche-1)
  );
}

/* „auch in …“: derselbe Termin steht in einer weiteren Firma der Gruppe. */
.portal-kalendereintrag-auch {
  color: var(--bro-tinte-2);
}

/* Die Farbmarke im Ebenen-Schalter: dieselbe Ebenen-Farbe als Punkt. */
.portal-kalender-ebenenmarke {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--bro-radius-rund);
  background: var(--portal-kalender-ebene);
}

.portal-kalender-teilen-liste {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.portal-kalender-teilen-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--bro-abstand-8);
  padding-bottom: var(--bro-abstand-8);
  border-bottom: 1px solid var(--bro-linie);
}

/*
 * Das Praxisprofil (#6320): Veröffentlichung, Formular in Abschnitten und die
 * Koordinaten von Hand. Die Anker (`portal-praxisprofil-…`) benennen je
 * Formular und Abschnitt, woran Tests und E2E greifen (Hausregel #1686).
 * Nur Tokens (B14, ADR-0003).
 */
.portal-praxisprofil {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-16);
  max-width: 48rem;
}

.portal-praxisprofil-karte {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  margin: 0;
}

.portal-praxisprofil-karte h1,
.portal-praxisprofil-karte h2,
.portal-praxisprofil-karte p {
  margin: 0;
}

.portal-praxisprofil .portal-meldung {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
}

.portal-praxisprofil .portal-meldung ul {
  margin: 0;
  padding-left: var(--bro-abstand-16);
}

.portal-praxisprofil-stand,
.portal-praxisprofil-speichern,
.portal-praxisprofil-koordinaten {
  gap: var(--bro-abstand-12);
}

.portal-praxisprofil-sperren,
.portal-praxisprofil-veroeffentlichen,
.portal-praxisprofil-verorten,
.portal-praxisprofil-widerrufen {
  margin: 0;
}

.portal-praxisprofil-barrierefreiheit {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: var(--bro-abstand-8);
  border: 0;
  margin: 0;
  padding: 0;
}

.portal-praxisprofil-sprechzeiten table {
  width: 100%;
}

/*
 * Die öffentliche Praxisseite `/praxis` (#6322): dieselbe schlichte Hülle wie
 * `/buchen`, die Abschnitte nur mit Abstand. Die Anker benennen den Abschnitt
 * (Hausregel #1686). Nur Tokens (B14, ADR-0003), keine fremde Schrift.
 */
.portal-praxisseite {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-24);
}

.portal-praxisseite-kopf,
.portal-praxisseite-termine,
.portal-praxisseite-kontakt,
.portal-praxisseite-sprechzeiten,
.portal-praxisseite-wissen {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
}

.portal-praxisseite-fach {
  color: var(--bro-tinte-2);
}

.portal-praxisseite-aufnahme {
  font-weight: var(--bro-schrift-betont-gewicht);
}

/*
 * Die Termintypen `/termintypen` (#6324): Liste, Maske und die Sonderzeiten
 * eines gespeicherten Typs. Die Anker (`portal-termintyp-…`) benennen je
 * Abschnitt oder Formular, damit ein Test oder ein E2E-Locator sein Formular
 * nennen kann (Hausregel #1686). Nur Tokens (B14.7), keine festen Farben.
 */
.portal-termintypen,
.portal-termintyp {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-16);
  margin: 0;
}

.portal-termintypen .portal-meldung,
.portal-termintyp .portal-meldung {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
}

/* Ein Fieldset hat von Haus aus `min-width: min-content`: Die Tabelle der
   Wochenzeiten weitete es auf Handy hoch über den Bildschirm (#7065). Mit
   `min-width: 0` scrollt die Tabelle in ihrem eigenen Rahmen. */
.portal-termintyp fieldset {
  min-width: 0;
}

.portal-termintypen .portal-meldung ul,
.portal-termintyp .portal-meldung ul {
  margin: 0;
  padding-left: var(--bro-abstand-16);
}

.portal-termintyp-stand,
.portal-termintyp-speichern,
.portal-termintyp-ausnahmen {
  gap: var(--bro-abstand-12);
}

.portal-termintyp-stand p,
.portal-termintyp-ausnahmen h2,
.portal-termintyp-ausnahmen p {
  margin: 0;
}

.portal-termintyp-entfernen,
.portal-termintyp-ausnahme-neu {
  margin: 0;
}

.portal-termintyp-rotation,
.portal-termintyp-gruppen {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: var(--bro-abstand-8);
  border: 0;
  margin: 0;
  padding: 0;
}

.portal-termintyp-rotation legend,
.portal-termintyp-rotation p,
.portal-termintyp-gruppen legend,
.portal-termintyp-gruppen p {
  grid-column: 1 / -1;
}

/*
 * Die Merkmale der Leistungsgruppen `/termintypen/leistungsgruppen` (#6325):
 * je Gruppe eine Zeile mit eigenem Formular, darunter die verwaisten
 * Merkmale. Dieselben Anker-Regeln und Tokens wie bei den Termintypen.
 */
.portal-leistungsgruppen {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-16);
  margin: 0;
}

.portal-leistungsgruppen table {
  width: 100%;
}

.portal-leistungsgruppe-speichern {
  gap: var(--bro-abstand-8);
  margin: 0;
}

.portal-leistungsgruppe-zuruecksetzen {
  margin: var(--bro-abstand-8) 0 0;
}

.portal-leistungsgruppen-verwaist {
  gap: var(--bro-abstand-12);
}

.portal-leistungsgruppen-verwaist h2,
.portal-leistungsgruppen-verwaist p {
  margin: 0;
}

/*
 * Die Aufklärungsbögen `/termintypen/aufklaerungsboegen` (#6503): Liste,
 * darunter EIN Formular. Dieselben Abstände wie bei den Leistungsgruppen;
 * die Meldung wie bei den Termintypen.
 */
.portal-aufklaerungsboegen {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-16);
  margin: 0;
}

.portal-aufklaerungsboegen table {
  width: 100%;
}

.portal-aufklaerungsbogen-formular {
  gap: var(--bro-abstand-8);
  margin: 0;
}

.portal-aufklaerungsbogen-aktiv,
.portal-aufklaerungsbogen-entfernen {
  margin: var(--bro-abstand-8) 0 0;
}

.portal-aufklaerungsbogen-meldung {
  margin: 0;
}

/* Der Preis in der Liste der buchbaren Leistungen (#6507) — Beträge stehen
   rechtsbündig und in gleich breiten Ziffern, damit „ab" sie nicht verschiebt. */
.portal-leistung-preis {
  text-align: end;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/*
 * KI-Agenten (#6294): Übersicht mit Karten, Formulare, Prompt-Versionen,
 * Lauf mit Verlauf und Werkzeug-Aufrufen, Werkzeug-Freigaben.
 * Ausschließlich Tokens — keine festen Farben, Abstände oder Schriften.
 */
.portal-agenten,
.portal-agenten-neu,
.portal-agenten-bearbeiten,
.portal-agenten-prompts,
.portal-agenten-lauf,
.portal-agenten-werkzeug-freigaben,
.portal-agenten-formular,
.portal-agenten-feldgruppe,
.portal-agenten-ungelesen,
.portal-agenten-ergebnis,
.portal-agenten-fehler,
.portal-agenten-verlauf,
.portal-agenten-aufrufe,
.portal-agenten-freigaben-agent,
.portal-agenten-prompt-aktiv,
.portal-agenten-prompt-offen,
.portal-agenten-prompt-verworfen,
.portal-agenten-prompt-neu,
.portal-agenten-prompt-aktivieren,
.portal-agenten-prompt-ablehnen,
.portal-agenten-start,
.portal-agenten-ablehnen,
.portal-agenten-gelesen {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
}

.portal-agenten-feldgruppe {
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
  padding: var(--bro-abstand-12);
  margin: 0;
}

.portal-agenten-karten,
.portal-agenten-kategorien,
.portal-agenten-ungelesen-liste,
.portal-agenten-verlauf-liste {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
  margin: 0;
  padding: 0;
  list-style: none;
}

.portal-agenten-karte,
.portal-agenten-aufruf,
.portal-agenten-freigabe,
.portal-agenten-prompt-vorschlag,
.portal-agenten-ungelesen-eintrag {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
  padding: var(--bro-abstand-12);
  background: var(--bro-flaeche-1);
  list-style: none;
}

.portal-agenten-karte h3,
.portal-agenten-karte p,
.portal-agenten-aufruf p,
.portal-agenten-freigabe p {
  margin: 0;
}

.portal-agenten-kopf,
.portal-agenten-handlungen,
.portal-agenten-entscheiden {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-12);
  align-items: flex-start;
  margin: 0;
}

.portal-agenten-pause,
.portal-agenten-abbrechen,
.portal-agenten-wiederholen,
.portal-agenten-freigeben,
.portal-agenten-sammel-freigabe {
  margin: 0;
}

/* Mail-Freigaben (#8450) — dieselbe Bauart wie die Werkzeug-Freigaben. */
.portal-agenten-mail-freigaben,
.portal-mail-entwurf-freigeben,
.portal-mail-entwurf-ablehnen form,
.portal-mail-sammelfreigabe,
.portal-mail-entschieden {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
}

.portal-mail-entwuerfe,
.portal-mail-entschieden ul {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
  margin: 0;
  padding: 0;
  list-style: none;
}

.portal-mail-entwurf {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
  padding: var(--bro-abstand-12);
  background: var(--bro-flaeche-1);
  list-style: none;
}

.portal-mail-entwurf p,
.portal-mail-filter,
.portal-mail-sammelfreigabe p {
  margin: 0;
}

.portal-mail-entwurf-original pre {
  white-space: pre-wrap;
  margin: var(--bro-abstand-8) 0 0;
}

.portal-agenten-zahlen {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--bro-abstand-4) var(--bro-abstand-12);
  margin: 0;
}

.portal-agenten-zahlen dt {
  color: var(--bro-tinte-2);
}

.portal-agenten-zahlen dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.portal-agenten-prompt,
.portal-agenten-ergebnistext,
.portal-agenten-fehlertext,
.portal-agenten-nachricht {
  margin: 0;
  overflow-x: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--bro-flaeche-1);
  border-radius: var(--bro-radius-m);
  padding: var(--bro-abstand-8);
}

.portal-agenten-auskunft {
  margin: 0;
  color: var(--bro-tinte-2);
}

/*
 * Tägliches Briefing (#6295, Scheibe 3): Wahl der Tageszeit, Kacheln wie im
 * Alt, Text als sicher gezeichnetes Markdown, frühere Briefings aufklappbar.
 * Ausschließlich Tokens — keine festen Farben, Abstände oder Schriften.
 */
.portal-briefing,
.portal-briefing-erstellen,
.portal-briefing-aktuell,
.portal-briefing-historie,
.portal-briefing-frueher {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
}

.portal-briefing-erstellen,
.portal-briefing-aktuell h3,
.portal-briefing-aktuell p {
  margin: 0;
}

.portal-briefing-kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr));
  gap: var(--bro-abstand-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.portal-briefing-kachel {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
  padding: var(--bro-abstand-8);
  background: var(--bro-flaeche-1);
  overflow-wrap: anywhere;
}

.portal-briefing-kachel-hervorgehoben {
  border-color: var(--bro-warnung);
}

.portal-briefing-text {
  overflow-wrap: anywhere;
}

.portal-briefing-frueher {
  border-top: 1px solid var(--bro-linie);
  padding-top: var(--bro-abstand-8);
}

.portal-briefing-frueher summary {
  cursor: pointer;
}

/* Seiten der Historie (#6835, Punkt 3: alle, seitenweise). */
.portal-briefing-blaettern {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-8);
}

/*
 * Werkbank (#6295): Übersicht der Ansichten, Ansicht als Raster aus Kacheln
 * (Breite in Dritteln wie im Alt), Pflege mit zweistufigem Kachel-Formular.
 * Ausschließlich Tokens — keine festen Farben, Abstände oder Schriften.
 */
.portal-werkbank,
.portal-werkbank-ansicht,
.portal-werkbank-bearbeiten,
.portal-werkbank-neu form,
.portal-werkbank-stammdaten form,
.portal-werkbank-wahl,
.portal-werkbank-kachel-neu,
.portal-werkbank-kachel-anlage,
.portal-werkbank-geheimnis,
.portal-werkbank-geheimnis form,
.portal-werkbank-ki,
.portal-werkbank-ki form,
.portal-werkbank-filter {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
}

.portal-werkbank-neu,
.portal-werkbank-stammdaten,
.portal-werkbank-hilfe,
.portal-werkbank-kachel-anlage {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
}

.portal-werkbank-ki-hinweise {
  margin: 0;
  padding-left: var(--bro-abstand-16);
}

.portal-werkbank-filter {
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
  padding: var(--bro-abstand-12);
  margin: 0;
}

.portal-werkbank-karten,
.portal-werkbank-kachel-liste,
.portal-werkbank-balken {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.portal-werkbank-karte,
.portal-werkbank-kachel {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  list-style: none;
  min-width: 0;
}

.portal-werkbank-karte h3,
.portal-werkbank-karte p,
.portal-werkbank-kachel p {
  margin: 0;
}

.portal-werkbank-handlungen,
.portal-werkbank-kachel-zeile {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-8);
  align-items: center;
  margin: 0;
}

.portal-werkbank-loeschen,
.portal-werkbank-kachel-zeile form {
  margin: 0;
}

.portal-werkbank-raster {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--bro-abstand-16);
  margin: 0;
  padding: 0;
  list-style: none;
}

.portal-werkbank-breite-1 {
  grid-column: span 1;
}

.portal-werkbank-breite-2 {
  grid-column: span 2;
}

.portal-werkbank-breite-3 {
  grid-column: span 3;
}

@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (max-height: 479px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (orientation: portrait) {
  .portal-werkbank-breite-1,
  .portal-werkbank-breite-2,
  .portal-werkbank-breite-3 {
    grid-column: 1 / -1;
  }
}

.portal-werkbank-kachel-kopf {
  display: flex;
  justify-content: space-between;
  gap: var(--bro-abstand-8);
}

.portal-werkbank-kennzahl {
  font-size: var(--bro-schrift-titel-groesse);
  line-height: var(--bro-schrift-titel-zeilenhoehe);
  font-weight: var(--bro-schrift-betont-gewicht);
}

.portal-werkbank-balken li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) max-content;
  gap: var(--bro-abstand-8);
  align-items: center;
}

.portal-werkbank-balken meter {
  width: 100%;
}

.portal-werkbank-tabelle-rahmen {
  overflow-x: auto;
}

.portal-werkbank-tabelle {
  width: 100%;
  border-collapse: collapse;
}

.portal-werkbank-tabelle th,
.portal-werkbank-tabelle td {
  text-align: left;
  padding: var(--bro-abstand-4) var(--bro-abstand-8);
  border-bottom: 1px solid var(--bro-linie);
}

.portal-werkbank-leer,
.portal-werkbank-auskunft,
.portal-werkbank-kachel-fehler {
  margin: 0;
  color: var(--bro-tinte-2);
}

/* Werkbank-Automationen (#6295, Scheibe 2): Liste, Formular, Stand. Nur Tokens. */
.portal-werkbank-automationen,
.portal-werkbank-automation-formular {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
}

.portal-werkbank-automation {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  list-style: none;
  min-width: 0;
}

.portal-werkbank-automation p {
  margin: 0;
}

.portal-werkbank-hinweis {
  margin: 0;
  padding: var(--bro-abstand-8) var(--bro-abstand-12);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
  background: var(--bro-flaeche-1);
}

.portal-werkbank-stand {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--bro-abstand-4) var(--bro-abstand-12);
  margin: 0;
}

.portal-werkbank-stand dt {
  color: var(--bro-tinte-2);
}

.portal-werkbank-stand dd {
  margin: 0;
  overflow-wrap: anywhere;
}

/*
 * Freie Positionen im Angebots-Formular (#6636): eine Tabellenzeile, deren
 * Zellen Felder statt eingefrorener Werte tragen. Der Anker
 * (`portal-freie-position`) benennt die Zeile, damit ein Test oder ein
 * E2E-Locator sie nennen kann (Hausregel #1686). Nur Tokens (B14.7).
 */
.portal-freie-position td {
  vertical-align: top;
}

.portal-freie-position td > input,
.portal-freie-position td > select,
.portal-freie-position td > textarea {
  display: block;
  width: 100%;
  margin-bottom: var(--bro-abstand-4);
}

/*
 * Verbrauch je Kundenbudget (#7247): Balken und Text wie im Alt
 * (`Kunden/Detail.cshtml:1176–1186` @ `1cbce924`) — grün, ab 80 % gelb,
 * überschritten rot und der Text fett. Die Stufe trägt `data-stufe`, die Breite
 * der Füllung steht am Element. Nur Tokens (B14.7).
 */
.portal-budget-verbrauch {
  --portal-budget-farbe: var(--bro-erfolg);
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-8);
  min-width: calc(var(--bro-abstand-32) * 6);
}

.portal-budget-verbrauch[data-stufe="warnung"] {
  --portal-budget-farbe: var(--bro-warnung);
}

.portal-budget-verbrauch[data-stufe="fehler"] {
  --portal-budget-farbe: var(--bro-fehler);
}

/* Spur und Füllung sind die Balken der Berichte (`.portal-balken-spur`). */
.portal-budget-verbrauch .portal-balken-spur {
  flex: 1;
}

.portal-budget-verbrauch .portal-balken {
  background: var(--portal-budget-farbe);
}

.portal-budget-verbrauch-text {
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-fein-groesse);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.portal-budget-verbrauch[data-stufe="fehler"] .portal-budget-verbrauch-text {
  color: var(--bro-fehler);
  font-weight: var(--bro-schrift-betont-gewicht);
}

/* Fehlerbox (Auftrag Nasri, 14.10.2026): Board nach Bearbeitungsstand,
   Karten mit Art-Symbol, Detailseite mit Entscheidungskasten. Vorbild ist
   die Alt-Fehlerbox (`Fehlerbox/Index.cshtml:101-186`). */
.portal-fehlerbox {
  min-width: 0;
}

.portal-fehlerbox-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--bro-abstand-12);
}

.portal-fehlerbox-unter {
  margin: var(--bro-abstand-4) 0 0;
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
}

.portal-fehlerbox-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-12);
  margin: var(--bro-abstand-16) 0;
}

.portal-fehlerbox-chips,
.portal-fehlerbox-ansicht {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-8);
}

.portal-fehlerbox-suche {
  flex: 1 1 calc(var(--bro-abstand-32) * 6);
}

.portal-fehlerbox-suche input {
  width: 100%;
}

.portal-fehlerbox-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(var(--bro-abstand-32) * 7), 1fr));
  gap: var(--bro-abstand-16);
  align-items: start;
}

.portal-fehlerbox-spalte {
  padding: var(--bro-abstand-12);
  background: var(--bro-flaeche-1);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-l);
}

.portal-fehlerbox-spalte h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 var(--bro-abstand-12);
  font-size: var(--bro-schrift-klein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
  color: var(--bro-tinte-2);
}

.portal-fehlerbox-anzahl {
  min-width: var(--bro-abstand-24);
  padding: 0 var(--bro-abstand-8);
  text-align: center;
  background: var(--bro-flaeche-0);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-rund);
}

.portal-fehlerbox-spalte ul,
.portal-fehlerbox-liste {
  display: grid;
  gap: var(--bro-abstand-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.portal-fehlerbox-karte {
  display: grid;
  gap: var(--bro-abstand-8);
  padding: var(--bro-abstand-12);
  color: var(--bro-tinte-1);
  text-decoration: none;
  background: var(--bro-flaeche-0);
  border: 1px solid var(--bro-linie);
  border-left: var(--bro-abstand-4) solid var(--bro-linie-stark);
  border-radius: var(--bro-radius-m);
  transition:
    border-color var(--bro-fehlerbox-karte-uebergangsdauer)
      var(--bro-fehlerbox-karte-uebergangskurve),
    box-shadow var(--bro-fehlerbox-karte-uebergangsdauer) var(--bro-fehlerbox-karte-uebergangskurve);
}

.portal-fehlerbox-karte:hover,
.portal-fehlerbox-karte:focus-visible {
  border-color: var(--bro-akzent);
  box-shadow: var(--bro-schatten-menue);
}

.portal-fehlerbox-karte[data-dringlichkeit="kritisch"],
.portal-fehlerbox-karte[data-dringlichkeit="hoch"] {
  border-left-color: var(--bro-fehler);
}

.portal-fehlerbox-karte-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-8);
}

.portal-fehlerbox-karte-kopf .bro-statuspille {
  margin-left: auto;
}

/* Im Board sagt die Spalte den Stand schon; die Pille stünde doppelt. */
.portal-fehlerbox-spalte .portal-fehlerbox-karte-kopf .bro-statuspille {
  display: none;
}

.portal-fehlerbox-art {
  display: inline-grid;
  place-items: center;
  width: var(--bro-abstand-24);
  height: var(--bro-abstand-24);
  color: var(--bro-akzent-text);
  background: var(--bro-akzent-flaeche);
  border-radius: var(--bro-radius-s);
}

.portal-fehlerbox-karte[data-art="fehler"] .portal-fehlerbox-art,
.portal-fehlerbox-art[data-art="fehler"] {
  color: var(--bro-fehler);
  background: var(--bro-fehler-flaeche);
}

.portal-fehlerbox-karte[data-art="verbesserung"] .portal-fehlerbox-art,
.portal-fehlerbox-art[data-art="verbesserung"] {
  color: var(--bro-warnung);
  background: var(--bro-warnung-flaeche);
}

.portal-fehlerbox-art .bro-symbol {
  width: var(--bro-abstand-16);
  height: var(--bro-abstand-16);
}

.portal-fehlerbox-merkmal {
  padding: 0 var(--bro-abstand-4);
  font-size: var(--bro-schrift-fein-groesse);
  color: var(--bro-tinte-2);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-s);
}

.portal-fehlerbox-text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}

.portal-fehlerbox-fuss,
.portal-fehlerbox-leer,
.portal-fehlerbox-mehr {
  margin: 0;
  font-size: var(--bro-schrift-fein-groesse);
  color: var(--bro-tinte-2);
}

.portal-stoerung-detail {
  display: grid;
  gap: var(--bro-abstand-16);
  max-width: calc(var(--bro-abstand-32) * 30);
}

.portal-stoerung-zurueck {
  margin: 0;
  font-size: var(--bro-schrift-klein-groesse);
}

.portal-stoerung-kopf {
  display: flex;
  align-items: flex-start;
  gap: var(--bro-abstand-12);
}

.portal-stoerung-kopf > div {
  flex: 1;
}

.portal-stoerung-kopf h2 {
  margin: 0;
}

.portal-stoerung-kopf .portal-fehlerbox-art {
  width: var(--bro-abstand-32);
  height: var(--bro-abstand-32);
}

.portal-stoerung-stand {
  margin: 0;
  padding: var(--bro-abstand-12);
  background: var(--bro-akzent-flaeche);
  border-radius: var(--bro-radius-m);
}

.portal-stoerung-beschreibung p {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.portal-stoerung-ki,
.portal-stoerung-entscheidung {
  padding: var(--bro-abstand-16);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-l);
}

.portal-stoerung-ki {
  background: var(--bro-akzent-flaeche);
  border-color: var(--bro-akzent);
}

.portal-stoerung-ki h3,
.portal-stoerung-entscheidung h3,
.portal-stoerung-verlauf h3 {
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-8);
  margin: 0 0 var(--bro-abstand-8);
}

.portal-stoerung-ki h4 {
  margin: var(--bro-abstand-12) 0 var(--bro-abstand-4);
  font-size: var(--bro-schrift-klein-groesse);
}

.portal-stoerung-ki small {
  font-weight: var(--bro-schrift-fein-gewicht);
  color: var(--bro-tinte-2);
}

.portal-stoerung-herkunft,
.portal-stoerung-zustaendig {
  margin: 0 0 var(--bro-abstand-8);
  font-size: var(--bro-schrift-fein-groesse);
  color: var(--bro-tinte-2);
}

.portal-stoerung-knopfreihe,
.portal-stoerung-freigabe {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--bro-abstand-8);
}

.portal-stoerung-freigabe > p {
  flex-basis: 100%;
  margin: 0;
}

.portal-stoerung-ablehnen > summary {
  list-style: none;
  cursor: pointer;
}

.portal-stoerung-ablehnen > summary::-webkit-details-marker {
  display: none;
}

.portal-stoerung-ablehnen[open] {
  flex-basis: 100%;
}

.portal-stoerung-ablehnen > form {
  display: grid;
  gap: var(--bro-abstand-8);
  justify-items: start;
  margin-top: var(--bro-abstand-12);
}

.portal-stoerung-ablehnen label {
  display: grid;
  gap: var(--bro-abstand-4);
  width: 100%;
}

.portal-stoerung-einstufen p {
  margin: 0 0 var(--bro-abstand-8);
}

.portal-stoerung-einstufen button,
.portal-stoerung-entscheidung button {
  display: inline-flex;
  align-items: center;
  gap: var(--bro-abstand-4);
}

.portal-stoerung-weiteres {
  margin-top: var(--bro-abstand-12);
}

.portal-stoerung-weiteres > summary {
  cursor: pointer;
  color: var(--bro-akzent-text);
}

.portal-stoerung-weiteres form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--bro-abstand-8);
  margin-top: var(--bro-abstand-8);
}

.portal-stoerung-technik dl {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--bro-abstand-4) var(--bro-abstand-16);
  margin: var(--bro-abstand-8) 0 0;
  font-size: var(--bro-schrift-klein-groesse);
}

.portal-stoerung-technik dt {
  color: var(--bro-tinte-2);
}

.portal-stoerung-technik dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.portal-stoerung-verlauf ol {
  display: grid;
  gap: var(--bro-abstand-8);
  margin: 0 0 var(--bro-abstand-12);
  padding: 0;
  list-style: none;
}

.portal-stoerung-beitrag {
  display: grid;
  gap: var(--bro-abstand-4);
  padding: var(--bro-abstand-8) var(--bro-abstand-12);
  background: var(--bro-flaeche-1);
  border-radius: var(--bro-radius-m);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.portal-stoerung-beitrag--intern {
  background: var(--bro-warnung-flaeche);
}

.portal-stoerung-beitrag-kopf {
  font-size: var(--bro-schrift-fein-groesse);
  color: var(--bro-tinte-2);
}

.portal-stoerung-antwort {
  display: grid;
  gap: var(--bro-abstand-8);
}

.portal-stoerung-antwort .portal-stoerung-knopfreihe {
  justify-content: flex-end;
}

.portal-stoerung-intern {
  margin-right: auto;
  font-size: var(--bro-schrift-klein-groesse);
}

/* Screenshot einer Störungsmeldung samt Markierungen (#8010). Die
   Markierungen liegen NICHT im Bild, sondern relativ (0 bis 1) daneben und
   werden in Prozent darübergelegt — wie die Alt-Detailseite
   (`Detail.cshtml:117-150` @ `1cbce924`). */
.portal-stoerung-screenshot-abschnitt {
  margin-top: var(--bro-abstand-16);
}

.portal-stoerung-screenshot {
  position: relative;
  display: block;
  max-width: 100%;
}

.portal-stoerung-screenshot img {
  display: block;
  width: 100%;
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
}

.portal-stoerung-markierung {
  position: absolute;
  pointer-events: none;
}

.portal-stoerung-markierung--rahmen {
  border: 2px solid var(--bro-fehler);
  border-radius: var(--bro-radius-s);
  box-shadow: 0 0 0 1px var(--bro-flaeche-0);
}

.portal-stoerung-markierung--text {
  transform: translateY(-50%);
  padding: 0 var(--bro-abstand-4);
  color: var(--bro-fehler);
  background: var(--bro-flaeche-0);
  border-radius: var(--bro-radius-s);
  font-size: var(--bro-schrift-fein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
}

.portal-stoerung-markierung--pfeil {
  inset: 0;
  width: 100%;
  height: 100%;
  stroke: var(--bro-fehler);
  stroke-width: 2px;
  stroke-linecap: round;
}

.portal-stoerung-markierung--spitze {
  width: var(--bro-abstand-12);
  height: var(--bro-abstand-12);
  transform: translate(-50%, -50%);
  background: var(--bro-fehler);
  border: 2px solid var(--bro-flaeche-0);
  border-radius: 50%;
}

.portal-stoerung-markierungen {
  margin-top: var(--bro-abstand-8);
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-fein-groesse);
}

/* Anhänge einer Störungsmeldung (#8305): ein Raster wie die Alt-Detailseite
   (`Detail.cshtml:169`), Bilder als Vorschau. */
.portal-stoerung-anhang-abschnitt {
  margin-top: var(--bro-abstand-16);
}

.portal-stoerung-anhaenge {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--bro-abstand-16) * 10), 1fr));
  gap: var(--bro-abstand-12);
  padding: 0;
  list-style: none;
  font-size: var(--bro-schrift-fein-groesse);
  color: var(--bro-tinte-2);
}

.portal-stoerung-anhaenge a {
  display: block;
  overflow-wrap: anywhere;
}

.portal-agenten-lernen {
  display: grid;
  gap: var(--bro-abstand-12);
}

.portal-buchung-mitarbeiterwahl {
  margin-top: var(--bro-abstand-16);
}

.portal-stoerung-anhaenge img {
  display: block;
  width: 100%;
  height: calc(var(--bro-abstand-16) * 8);
  object-fit: cover;
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
}

.portal-behandlungspakete,
.portal-pakete-einstellung,
.portal-terminzahlungsregel {
  display: grid;
  gap: var(--bro-abstand-12);
}

/*
 * DATEV-Verbindung (#8743, Teil 1): Status, Bestand und der maskierte
 * DATEV-Fehler auf einer Karte. Die Karte trägt die Kennung, an der ein
 * E2E-Locator hängt; Bestand und Fehler sind Begriffslisten wie beim
 * gebuchten Beleg, der Fehler steht im Fehlerkasten wie im Formular.
 * Nur Tokens (B14, ADR-0003).
 */
.portal-datev-verbindung {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
  align-items: flex-start;
}

.portal-datev-verbindung p {
  margin: 0;
}

.portal-datev-bestand,
.portal-datev-fehler dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--bro-abstand-4) var(--bro-abstand-12);
  margin: 0;
}

.portal-datev-bestand dd,
.portal-datev-fehler dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.portal-datev-fehler {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  border: 1px solid var(--bro-fehler-linie);
  border-radius: var(--bro-radius-m);
  padding: var(--bro-abstand-12) var(--bro-abstand-16);
  background: var(--bro-fehler-flaeche);
}

.portal-datev-nur-lesen {
  margin-top: var(--bro-abstand-8);
}

/*
 * DATEV-Verbindung (#8743, Teil 2): Je Bestand ein Bestätigungsformular und
 * der Kasten für offene Widerrufe. Dieselben Abstände wie die Karte darüber.
 */
.portal-datev-auswahl,
.portal-datev-bereinigung {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  align-items: flex-start;
  width: 100%;
  border-top: 1px solid var(--bro-linie);
  padding-top: var(--bro-abstand-12);
}

.portal-datev-auswahl fieldset {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
  margin: 0;
  border: 0;
  padding: 0;
}

/* Arbeitsbereich ergänzt die bestehenden Leistenbausteine (#9115). */
.portal-leiste-knopf-zurueck {
  margin: var(--bro-abstand-8);
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.portal-bereich-start {
  margin: 0;
  color: var(--bro-tinte-1);
  font-weight: var(--bro-schrift-betont-gewicht);
}

/* Fahrdienst-Rahmen nach der Vitala-Demo (#9599, Scheibe c). Die Regeln hängen
   an zwei Merkmalen: `html[data-bereich="krankenfahrt"]` gibt es nur auf den
   Fahrdienst-Seiten (`seiten.ts`); `nav[data-bereich-aktiv]` setzt
   `leiste-verhalten.ts` in JEDEM geöffneten Arbeitsbereich, nicht nur im
   Fahrdienst — die Leistenregeln darunter gelten also für jedes Modul im
   Arbeitsbereich. Die Bro-Leiste und die übrigen Seiten bleiben v10; ihr
   Rahmen ist laut Ticket erst nach dem Fahrdienst dran.
   Vorlage: `docs/befunde/2026-10-15-krankenfahrt-nach-demo/quelltext-design.md`
   (`.inhalt`, `.nav-punkt .zahl`, `.powered`). */

/* Inhalt: Demo `.inhalt { padding: 28px 36px 110px; max-width: 1560px }` —
   nur am Desktop; Handy und Tablett behalten ihre schmaleren Ränder. */
@media (min-width: 1280px) {
  html[data-bereich="krankenfahrt"] .portal-inhalt {
    max-width: 1560px;
    padding: 28px 36px 110px;
  }
}

/* Symbolkasten im Arbeitsbereich voll in der Modulfarbe, Symbol in der
   Fläche (Demo `kachel()`); in der Bro-Leiste bleibt die Tönung (#9050). */
.portal-navigation[data-bereich-aktiv] .portal-symbolkasten {
  background: var(--portal-kachel);
  color: var(--bro-flaeche-1);
}

/* Gruppentitel: Luft davor wie FAHRDIENST/TEAM/BETRIEB in der Demo. Der
   Pfeil bleibt: Die Gruppen sind einklappbar und merken sich den Zustand. */
.portal-navigation[data-bereich-aktiv] .portal-nav-gruppe + .portal-nav-gruppe {
  margin-top: var(--bro-abstand-12);
}

/* Zahl am Punkt als Marke (Demo `.nav-punkt .zahl.blau`): Akzentfläche,
   halbfett, Ziffern gleich breit. Offene Entscheidungen am Leitstand rot
   (Demo `NAV`: „Leitstand rot mit offenen Entscheidungen“, #9264). */
.portal-navigation[data-bereich-aktiv] .portal-nav-zahl {
  flex: none;
  min-width: 20px;
  padding: 0 6px;
  border-radius: var(--bro-radius-s);
  background: var(--bro-akzent-flaeche);
  color: var(--bro-akzent-text);
  font-size: var(--bro-schrift-fein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
  line-height: 20px;
  text-align: center;
}

.portal-navigation[data-bereich-aktiv]
  .portal-nav-zahl[data-bereich-zaehler="krankenfahrt-leitstand-offen"] {
  background: var(--bro-fehler);
  color: var(--bro-flaeche-1);
}

/* „läuft auf BroDesk“ unten in der Leiste, nur im Arbeitsbereich (Demo
   `.powered`). Ohne Skript gibt es keinen Arbeitsbereich, also auch keinen
   Hinweis; deshalb kein `hidden`, sondern die Wurzel-Markierung. */
.portal-leiste-laeuft-auf {
  display: none;
}

html[data-arbeitsbereich] .portal-leiste-laeuft-auf,
html:is([data-rahmen="fahrdienst"], [data-rahmen="vitala"]) .portal-leiste-laeuft-auf {
  display: flex;
  flex: none;
  order: 10;
  align-items: center;
  gap: var(--bro-abstand-8);
  margin: 0;
  padding: 0 var(--bro-abstand-8);
  color: var(--bro-tinte-3);
  font-size: var(--bro-schrift-fein-groesse);
}

.portal-leiste-laeuft-auf > .bro-desk-logo {
  width: auto;
  height: 18px;
}

:root[data-leiste="schmal"] .portal-leiste-laeuft-auf > span {
  display: none;
}

/* Fahrdienst-Rahmen als Standard (#9779): Die Leiste der Demo kommt vom
   Server (`fahrdienst-rahmen.ts`), `html[data-rahmen="fahrdienst"]` trägt
   jede Seite eines Betriebs, der nur den Fahrdienst nutzt. Keine Kopfleiste:
   Die Hauptspalte beginnt oben mit dem Seitenkopf. Vorlage Demo `.leiste`
   (256 px, volle Höhe), `.leisten-knopf`, `.nav-titel`, `.thema-knopf`,
   `.nutzer` in `quelltext-kern.md`. Der Rahmen des Designs „Vitala“ (#9974,
   `rahmen-vitala.ts`, `html[data-rahmen="vitala"]`) ist dieselbe Leiste für
   jeden Betrieb und teilt sich diese Regeln; Eigenes in `design-vitala.css`. */
html:is([data-rahmen="fahrdienst"], [data-rahmen="vitala"]) .portal-schale {
  grid-template-columns: 256px minmax(0, 1fr);
}

:is(.portal-fahrdienst-leiste, .portal-vitala-leiste) {
  gap: var(--bro-abstand-8);
}

:is(.portal-fahrdienst-leiste, .portal-vitala-leiste) > .portal-logo-kopf {
  justify-content: flex-start;
  padding: 0 var(--bro-abstand-8) var(--bro-abstand-8);
}

/* „Suchen ⌘K“ oben in der Leiste: dasselbe Suchfeld wie sonst im Kopf; die
   Treffer klappen über den Inhalt hinaus auf. */
:is(.portal-fahrdienst-leiste, .portal-vitala-leiste) > .portal-kopfsuche {
  flex: none;
  max-width: none;
}

:is(.portal-fahrdienst-leiste, .portal-vitala-leiste) .portal-suchliste {
  right: auto;
  width: 26rem;
  max-width: calc(100vw - 2 * var(--bro-abstand-16));
}

/* Dichte wie in der Demo (am Bild gemessen: 38 px je Punkt, 47 px vom
   letzten Punkt bis zum nächsten Gruppentitel). */
:is(.portal-fahrdienst-leiste, .portal-vitala-leiste) .portal-navigation .bro-navigationspunkt {
  padding-block: 6px;
}

:is(.portal-fahrdienst-leiste, .portal-vitala-leiste)
  .portal-navigation[data-bereich-aktiv]
  .portal-nav-gruppe
  + .portal-nav-gruppe {
  margin-top: var(--bro-abstand-4);
}

/* Aktiver Punkt nur als Fläche, ohne Innenrand (am Demo-Bild gemessen). */
:is(.portal-fahrdienst-leiste, .portal-vitala-leiste)
  .portal-navigation
  .bro-navigationspunkt[aria-current="page"] {
  border-color: transparent;
}

/* Gruppentitel ohne Aufklapp-Pfeil (Demo `.nav-titel`): nur Beschriftung. */
:is(.portal-fahrdienst-leiste, .portal-vitala-leiste) p.portal-nav-gruppentitel {
  cursor: default;
}

:is(.portal-fahrdienst-leiste, .portal-vitala-leiste) p.portal-nav-gruppentitel:hover {
  color: var(--bro-tinte-3);
}

/* Fuß: „Dunkle Ansicht“ wie Demo `.thema-knopf`, darunter die Person. */
.portal-fuss-knopf {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px var(--bro-abstand-8);
  border: 0;
  background: transparent;
  color: var(--bro-tinte-2);
  font: inherit;
  font-size: var(--bro-schrift-klein-groesse);
  text-align: left;
  cursor: pointer;
}

.portal-fuss-knopf:hover {
  color: var(--bro-tinte-1);
}

.portal-fuss-knopf:focus-visible {
  outline: 2px solid var(--bro-akzent);
  outline-offset: -2px;
}

.portal-fuss-knopf .bro-symbol {
  width: 16px;
  height: 16px;
}

.portal-fuss-knopf > span[data-farbschema-symbol] {
  display: inline-flex;
}

/* „Rundgang starten“ (#9714) sieht im Fuß aus wie „Dunkle Ansicht“ (Demo
   `.thema-knopf`), nicht wie ein Menüpunkt. */
:is(.portal-fahrdienst-leiste, .portal-vitala-leiste) [data-rundgang-start] {
  gap: 10px;
  width: 100%;
  padding: 7px var(--bro-abstand-8);
  border: 0;
  background: transparent;
  color: var(--bro-tinte-2);
  font: inherit;
  font-size: var(--bro-schrift-klein-groesse);
  font-weight: inherit;
  text-align: left;
  cursor: pointer;
}

:is(.portal-fahrdienst-leiste, .portal-vitala-leiste) [data-rundgang-start] .bro-symbol {
  width: 16px;
  height: 16px;
}

/* Die Person am Fuß klappt ihr Menü nach OBEN auf. */
.portal-nutzer-menue--fuss .portal-nutzer-menue-liste {
  top: auto;
  right: auto;
  bottom: calc(100% + 6px);
  left: 0;
}

.portal-nutzer-menue--fuss .portal-nutzer-text {
  max-width: none;
}

/* Kürzel auf voller Akzentfläche (Demo `.nutzer-bild`). */
.portal-nutzer-menue--fuss .portal-nutzer-avatar {
  background: var(--bro-akzent);
  color: var(--bro-flaeche-1);
}

/* Der Kopf nur auf dem Handy (Demo `.mobil-kopf`): Menü und Marke. */
:is(.portal-fahrdienst-mobilkopf, .portal-vitala-mobilkopf) {
  display: none;
}

@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (max-height: 479px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (orientation: portrait) {
  :is(.portal-fahrdienst-mobilkopf, .portal-vitala-mobilkopf) {
    display: flex;
  }

  /* Wie jede Schale: auf dem Handy wird die Leiste zur Schublade. */
  html:is([data-rahmen="fahrdienst"], [data-rahmen="vitala"]) .portal-schale {
    grid-template-columns: minmax(0, 1fr);
  }

  html:is([data-rahmen="fahrdienst"], [data-rahmen="vitala"]) .portal-hauptspalte {
    padding-bottom: 0;
  }
}

/* „Bro fragen“ (#9853): Knopf unter „Suchen“ (Demo `.leisten-knopf.bro`) und
   Seitenfenster von rechts (Demo `.bro-panel`, `.bro-blase`,
   `.bro-vorschlaege`, `.bro-eingabe` in `quelltext-kern.md`). Aussehen im
   heutigen Staging-Look: dasselbe Blatt wie „So funktioniert es“
   (`.bro-so-funktioniert-blatt` in `@bro/ui`), Werte nur als Tokens. */
.portal-bro-fragen-knopf {
  font-weight: var(--bro-schrift-betont-gewicht);
  color: var(--bro-akzent);
}

.portal-bro-fragen-knopf:hover {
  color: var(--bro-akzent);
  background: var(--bro-akzent-flaeche);
}

.portal-bro-fragen-mobil {
  margin-left: auto;
}

.portal-bro-fenster {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 58;
  display: flex;
  flex-direction: column;
  width: min(calc(var(--bro-abstand-32) * 13), 100%);
  background: var(--bro-flaeche-1);
  border-left: 1px solid var(--bro-linie);
  box-shadow: var(--bro-schatten-dialog);
  font-family: var(--bro-schrift-familie);
}

.portal-bro-fenster[hidden] {
  display: none;
}

.portal-bro-kopf {
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-12);
  padding: var(--bro-abstand-16);
  border-bottom: 1px solid var(--bro-linie);
}

.portal-bro-kachel {
  --portal-kachel: var(--bro-akzent);
}

.portal-bro-kopf-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  color: var(--bro-tinte-1);
}

.portal-bro-kopf-text > span {
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
}

.portal-bro-verlauf {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  overflow-y: auto;
  padding: var(--bro-abstand-16);
}

.portal-bro-blase {
  max-width: 88%;
  margin: 0;
  padding: var(--bro-abstand-8) var(--bro-abstand-12);
  border-radius: var(--bro-radius-m);
  background: var(--bro-flaeche-0);
  color: var(--bro-tinte-1);
  font-size: var(--bro-schrift-klein-groesse);
  line-height: var(--bro-schrift-klein-zeilenhoehe);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.portal-bro-blase--ich {
  align-self: flex-end;
  background: var(--bro-akzent);
  color: var(--bro-akzent-tinte);
}

.portal-bro-blase--fehler {
  background: var(--bro-fehler-flaeche);
  color: var(--bro-fehler);
}

/* „Bro schreibt“: drei Punkte (Demo `.bro-blase.tippt`). */
.portal-bro-blase--tippt {
  display: inline-flex;
  gap: var(--bro-abstand-4);
  align-self: flex-start;
}

.portal-bro-blase--tippt > span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bro-tinte-3);
  animation: portal-bro-tippt 1s infinite ease-in-out;
}

.portal-bro-blase--tippt > span:nth-child(2) {
  animation-delay: 0.15s;
}

.portal-bro-blase--tippt > span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes portal-bro-tippt {
  0%,
  80%,
  100% {
    opacity: 0.3;
  }

  40% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .portal-bro-blase--tippt > span {
    animation: none;
  }
}

.portal-bro-vorschlaege {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-8);
  padding: var(--bro-abstand-8) var(--bro-abstand-16);
  border-top: 1px solid var(--bro-linie);
}

.portal-bro-vorschlag {
  padding: var(--bro-abstand-4) var(--bro-abstand-12);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
  background: transparent;
  color: var(--bro-tinte-2);
  font: inherit;
  font-size: var(--bro-schrift-klein-groesse);
  text-align: left;
  cursor: pointer;
}

.portal-bro-vorschlag:hover {
  border-color: var(--bro-akzent);
  color: var(--bro-tinte-1);
}

.portal-bro-eingabe {
  display: flex;
  gap: var(--bro-abstand-8);
  padding: var(--bro-abstand-12) var(--bro-abstand-16) var(--bro-abstand-16);
}

.portal-bro-eingabe > input {
  flex: 1;
  min-width: 0;
}

.portal-bro-eingabe[aria-busy="true"] > button {
  opacity: 0.5;
  pointer-events: none;
}

.portal-bro-vorlese {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Angebotspunkte öffnen ihren Hinweis statt einer gesperrten Modulseite. */
.portal-nav-angebot > summary {
  color: var(--bro-tinte-2);
  cursor: pointer;
  list-style: none;
}
.portal-nav-angebot > summary .portal-symbolkasten {
  color: var(--bro-tinte-2);
  background: var(--bro-flaeche-1);
}
.portal-nav-angebot-hinweis {
  margin: 0;
  padding: var(--bro-abstand-8) var(--bro-abstand-12);
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
}

/* Vertrieb (#9034): Kanban-Spalten bleiben nebeneinander und scrollen auf
   schmalen Geräten. Das Aussehen folgt ausschließlich den v10-Tokens. */
.pipeline-board {
  display: flex;
  gap: var(--bro-abstand-16);
  overflow-x: auto;
  align-items: stretch;
  padding-block: var(--bro-abstand-16);
}

.pipeline-spalte {
  flex: 0 0 18rem;
  min-width: 0;
  background: var(--bro-flaeche-0);
  border-radius: var(--bro-radius-m);
  padding: var(--bro-abstand-12);
}

.pipeline-spalte > h3 {
  font-size: var(--bro-schrift-betont-groesse);
}

.pipeline-karten {
  display: grid;
  gap: var(--bro-abstand-12);
  list-style: none;
  padding: 0;
  margin: 0;
}

.pipeline-karte[draggable="true"] {
  cursor: grab;
}

.pipeline-karte p {
  margin-block: var(--bro-abstand-8);
}

.pipeline-gesundheit {
  display: inline-block;
  width: var(--bro-abstand-8);
  height: var(--bro-abstand-8);
  border-radius: 50%;
  margin-right: var(--bro-abstand-4);
}

.pipeline-gesundheit-erfolg {
  background: var(--bro-erfolg);
}

.pipeline-gesundheit-warnung {
  background: var(--bro-warnung);
}

.pipeline-gesundheit-fehler {
  background: var(--bro-fehler);
}

.pipeline-reiter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-8);
  border-bottom: 1px solid var(--bro-linie);
}

.pipeline-reiter a {
  padding: var(--bro-abstand-12) var(--bro-abstand-16);
  border-bottom: 1px solid transparent;
}

.pipeline-reiter a[aria-current="page"] {
  color: var(--bro-akzent-text);
  border-bottom-color: var(--bro-akzent);
  font-weight: var(--bro-schrift-betont-gewicht);
}

.pipeline-filter,
.pipeline-sammel-aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--bro-abstand-12);
  margin-block: var(--bro-abstand-16);
}

.pipeline-sammel-aktionen[hidden] {
  display: none;
}

/* Tagessteuerung /termine (#9039): auf Desktop nebeneinander, bei wenig
   Platz umbrechend. Die globale Formularspalte bleibt für andere Seiten. */
.portal-termine-tagesleiste {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
}

.portal-termine-tag {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  min-width: 0;
}

.portal-termine-tag .bro-eingabefeld {
  width: auto;
  max-width: 100%;
}

.portal-termine-anlage > summary {
  cursor: pointer;
}

.portal-termine-anlage-inhalt {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  margin-top: var(--bro-abstand-12);
}

/* Zeitraster /termine (#9039) wie im Alt (Kalender.cshtml:695-860): Stunden-
   achse links, eine Spalte je Behandler, Raum oder Betrieb nebeneinander. Die
   Zeilenhöhe je Viertelstunde folgt dem Alt (22 px ≈ 1.375rem, :665). Breite
   Tage scrollen seitlich statt die Spalten zu quetschen. */
.portal-tagesraster-karte {
  overflow-x: auto;
}

.portal-tagesraster {
  display: grid;
  grid-template-columns: 3.5rem repeat(var(--raster-spalten), minmax(9rem, 1fr));
  grid-template-rows: auto calc(var(--raster-zeilen) * 1.375rem);
  min-width: 100%;
}

.portal-tagesraster-spaltenkopf {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--bro-abstand-8);
  border-left: 1px solid var(--bro-linie);
  border-bottom: 1px solid var(--bro-linie);
  text-align: center;
  min-width: 0;
}

.portal-tagesraster-spaltenkopf strong {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-tagesraster-ecke {
  border-bottom: 1px solid var(--bro-linie);
}

.portal-tagesraster-achse,
.portal-tagesraster-spalte {
  position: relative;
}

.portal-tagesraster-stunde {
  position: absolute;
  top: var(--raster-oben);
  right: var(--bro-abstand-8);
  transform: translateY(-50%);
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-fein-groesse);
}

.portal-tagesraster-stunde:first-child {
  transform: none;
}

.portal-tagesraster-spalte {
  border-left: 1px solid var(--bro-linie);
  background: var(--bro-flaeche-0);
}

.portal-tagesraster-zelle {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--raster-oben);
  height: var(--raster-hoehe);
  box-sizing: border-box;
  border-top: 1px dashed var(--bro-linie);
}

.portal-tagesraster-zelle-stunde {
  border-top-style: solid;
}

.portal-tagesraster-zelle:hover,
.portal-tagesraster-zelle:focus-visible {
  background: var(--bro-akzent-flaeche);
}

.portal-tagesraster-zelle:focus-visible {
  outline: var(--bro-fokus-breite) solid var(--bro-akzent);
  outline-offset: -2px;
}

.portal-tagesraster-termin {
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: max(var(--termin-hoehe), 1.375rem);
  text-decoration: none;
  font-size: var(--bro-schrift-fein-groesse);
}

.portal-tagesraster-termin strong,
.portal-tagesraster-termin span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-tagesraster-termin[data-zustand="angefragt"] {
  border-style: dashed;
}

.portal-tagesraster-termin[data-zustand="stattgefunden"] {
  border-color: var(--bro-erfolg);
}

.portal-tagesraster-termin[data-zustand="nicht-erschienen"] {
  border-color: var(--bro-warnung);
}

.portal-tagesraster-termin[data-zustand="abgesagt"] {
  border-color: var(--bro-tinte-3);
  color: var(--bro-tinte-2);
  text-decoration: line-through;
}

/* Kundensuche der Terminanlage (#9039), Alt Kalender.cshtml:501-550. */
.portal-termin-kundensuche {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
}

.portal-termin-kundensuche-treffer {
  margin: 0;
  padding: var(--bro-abstand-4) 0;
  list-style: none;
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
  background: var(--bro-flaeche-1);
  box-shadow: var(--bro-schatten-menue);
}

.portal-termin-kundensuche-treffer button {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-4);
  width: 100%;
  padding: var(--bro-abstand-8) var(--bro-abstand-12);
  border: 0;
  background: none;
  color: var(--bro-tinte-1);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.portal-termin-kundensuche-treffer button span {
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
}

.portal-termin-kundensuche-treffer button:hover,
.portal-termin-kundensuche-treffer button:focus-visible {
  background: var(--bro-akzent-flaeche);
}

.portal-termine-kopfzeile {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-12);
}

/* Umfragen wie im Alt (#9040): semantische Skala, Kennzahlen und Rückmeldung. */
.portal-umfrage-kennzahlen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-24);
}

.portal-umfrage-kennzahlen dd {
  margin: 0;
  font-weight: var(--bro-schrift-betont-gewicht);
}

.portal-umfrage-werte,
.portal-umfrage-skalenenden {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-8);
  justify-content: space-between;
}

.portal-umfrage-skala,
.portal-umfrage-rueckmeldung {
  padding: var(--bro-abstand-12);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
}

.portal-umfrage-rueckmeldung[role="alert"] {
  color: var(--bro-fehler);
  background: var(--bro-fehler-flaeche);
}

.portal-umfrage-rueckmeldung[role="status"] {
  color: var(--bro-erfolg);
  background: var(--bro-flaeche-1);
}

.portal-umfrage-wert {
  cursor: pointer;
  padding: var(--bro-abstand-8);
}

.portal-umfrage-wert:has(input:checked) {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.portal-umfrage-skalenenden {
  margin-top: var(--bro-abstand-8);
  font-size: var(--bro-schrift-fein-groesse);
}

/* Themenübersicht statt Formularstapel (#9036), Farben und Abstände aus v10. */
.portal-einstellungen-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr));
  gap: var(--bro-abstand-24);
}
/* Einstellungen mit Untermenü (Nasri, 14.10.2026: „zu überladen, fass es
   besser zusammen, meinetwegen in Untermenüs“): links die Gruppen, rechts die
   Einträge der gewählten. Auf schmalen Schirmen steht das Menü als
   umbrechende Leiste über dem Inhalt. Nur Tokens (B14, ADR-0003). */
.portal-einstellungen-kopf .portal-suche {
  max-width: 32rem;
}

.portal-einstellungen-aufbau {
  display: grid;
  grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr);
  gap: var(--bro-abstand-24);
  align-items: start;
}

.portal-einstellungen-menue {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
  position: sticky;
  top: var(--bro-abstand-16);
}

.portal-einstellungen-menue a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--bro-abstand-8);
  min-height: var(--bro-beruehrungsflaeche);
  padding: var(--bro-abstand-8) var(--bro-abstand-12);
  border-radius: var(--bro-radius-m);
  color: var(--bro-tinte-1);
  text-decoration: none;
}

.portal-einstellungen-menue a:hover {
  background: var(--bro-flaeche-1);
}

.portal-einstellungen-menue a[aria-current="page"] {
  background: var(--bro-akzent-flaeche);
  color: var(--bro-akzent-text);
  font-weight: var(--bro-schrift-betont-gewicht);
}

.portal-einstellungen-inhalt {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-24);
  min-width: 0;
}

@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (max-height: 479px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (orientation: portrait) {
  .portal-einstellungen-aufbau {
    grid-template-columns: minmax(0, 1fr);
  }

  .portal-einstellungen-menue {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
  }
}

.portal-einstellungen-ziele {
  list-style: none;
  padding: 0;
  margin: 0;
}
.portal-einstellungen-ziele a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--bro-abstand-8);
  padding-block: var(--bro-abstand-12);
  text-decoration: none;
}
.portal-einstellungen-ziele a span:nth-child(2) {
  grid-column: 1;
}
.portal-einstellungen-ziele a span:last-child {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
}

/* Gruppenseite der Einstellungen (#10285): Reiter, Liste „Einstellung · Stand
   · Ändern“, Gruppenzeilen. Farbe neutral, nur Tokens (B14, ADR-0003). Auf
   schmalen Schirmen stehen die drei Zellen einer Zeile untereinander. */
.portal-einstellungen-gruppe {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-16);
}
.portal-einstellungen-liste {
  width: 100%;
}
.portal-einstellungen-liste .portal-einstellungen-gruppenzeile th {
  padding-top: var(--bro-abstand-16);
  border-bottom: 1px solid var(--bro-linie-stark);
  text-align: start;
}
.portal-einstellungen-gruppenzeile th span + span {
  color: var(--bro-tinte-2);
}
.portal-einstellungen-name,
.portal-einstellungen-stand {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
}
.portal-einstellungen-name > span:last-child {
  color: var(--bro-tinte-2);
}
.portal-einstellungen-leise {
  color: var(--bro-tinte-3);
}
.portal-einstellungen-handlung {
  text-align: end;
  white-space: nowrap;
}
.portal-einstellungen-unsichtbar {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.portal-einstellungen-meldungen {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
}
.portal-einstellungen-mehr {
  position: relative;
}
.portal-einstellungen-mehr > summary {
  list-style: none;
}
.portal-einstellungen-mehr > summary::-webkit-details-marker {
  display: none;
}
.portal-einstellungen-mehr-liste {
  position: absolute;
  inset-inline-end: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  min-width: min(20rem, 80vw);
  margin-top: var(--bro-abstand-4);
  padding: var(--bro-abstand-4);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
  background: var(--bro-flaeche-0);
}
.portal-einstellungen-mehr-eintrag {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
  min-height: var(--bro-beruehrungsflaeche);
  padding: var(--bro-abstand-8) var(--bro-abstand-12);
  border-radius: var(--bro-radius-m);
  color: var(--bro-tinte-1);
  text-decoration: none;
}
.portal-einstellungen-mehr-eintrag:hover {
  background: var(--bro-flaeche-1);
}
.portal-einstellungen-mehr-eintrag > span:last-child {
  color: var(--bro-tinte-2);
}

@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (max-height: 479px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (orientation: portrait) {
  .portal-einstellungen-liste thead {
    display: none;
  }
  .portal-einstellungen-liste tr,
  .portal-einstellungen-liste td,
  .portal-einstellungen-liste th {
    display: block;
  }
  .portal-einstellungen-handlung {
    text-align: start;
  }
}

/* #10288: Übersicht der Einstellungen als Tabelle der Gruppen (Leinwand Df197). */
.portal-einstellungen-gruppen {
  width: 100%;
}
.portal-einstellungen-gruppen .portal-einstellungen-zahl,
.portal-einstellungen-gruppen th:last-child {
  text-align: end;
  font-variant-numeric: tabular-nums;
}
.portal-einstellungen-firmendaten-hinweis {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
}
@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (max-height: 479px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (orientation: portrait) {
  .portal-einstellungen-gruppen thead {
    display: none;
  }
  .portal-einstellungen-gruppen tr,
  .portal-einstellungen-gruppen td {
    display: block;
  }
  .portal-einstellungen-gruppen .portal-einstellungen-zahl {
    text-align: start;
  }
}

/* #9034: Filter und Gespräch wie im Alt räumlich gruppieren; v10-Tokens beibehalten. */
.kaltakquise-filter,
.leads-filter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--bro-abstand-12);
  align-items: end;
}
.kaltakquise-filter label,
.leads-filter label {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
}
/* #9034 Leads: ein Häkchen steht neben seiner Beschriftung, nicht darüber. */
.leads-filter label:has(> input[type="checkbox"]) {
  flex-direction: row;
  align-items: center;
}
.kaltakquise-ueberfaellig {
  color: var(--bro-fehler);
}
p.kaltakquise-ueberfaellig {
  padding: var(--bro-abstand-12);
  border: 1px solid var(--bro-fehler-linie);
  background: var(--bro-fehler-flaeche);
}
.kaltakquise-cockpit {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--bro-abstand-16);
  align-items: start;
}
.kaltakquise-gespraech,
.kaltakquise-gespraechshilfe {
  display: grid;
  gap: var(--bro-abstand-16);
  min-width: 0;
}
@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (max-height: 479px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (orientation: portrait) {
  .kaltakquise-cockpit {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Folgepatch zu #9034: Chancen-Details mit Hauptspalte und Details rechts. */
.chance-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr);
  gap: var(--bro-abstand-24);
  align-items: start;
}

.chance-hauptspalte,
.chance-seitenleiste {
  display: grid;
  gap: var(--bro-abstand-16);
  min-width: 0;
}

.chance-daten {
  display: grid;
  gap: var(--bro-abstand-8);
}

.chance-daten dd {
  margin: 0 0 var(--bro-abstand-8);
}

.chance-beschreibung {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (max-height: 479px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (orientation: portrait) {
  .chance-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* #9034 Leads: Detail mit Hauptspalte und Umwandeln/Verwerfen rechts (Alt
   `Leads/Detail.cshtml:187–238`), auf schmalen Geräten untereinander. */
.lead-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr);
  gap: var(--bro-abstand-24);
  align-items: start;
}

.lead-hauptspalte,
.lead-seitenleiste {
  display: grid;
  gap: var(--bro-abstand-16);
  min-width: 0;
}

.lead-messegespraech-daten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--bro-abstand-8);
}

.lead-messegespraech-daten dd {
  margin: 0;
}

/* #9034 Messekontakte (Alt `Leads/Messe/Index.cshtml`): Karten untereinander,
   Kopf mit Name links und Bewertung rechts; fälliges Nachfassen hervorgehoben. */
.messekontakte-liste {
  display: grid;
  gap: var(--bro-abstand-12);
}

.messekontakt-kopf {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--bro-abstand-16);
}

.messekontakt-faellig {
  font-weight: var(--bro-schrift-betont-gewicht);
  color: var(--bro-warnung);
}

.messekontakt-notiz,
.messekontakt-kommentare {
  padding: var(--bro-abstand-8) var(--bro-abstand-12);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
}

.messekontakte-grenze {
  padding: var(--bro-abstand-12);
  border: 1px solid var(--bro-fehler-linie);
  background: var(--bro-fehler-flaeche);
}

.lead-notiz-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.lead-daten dd {
  overflow-wrap: anywhere;
}

@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (max-height: 479px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (orientation: portrait) {
  .lead-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

.chance-provisionen-kennzahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--bro-abstand-16);
}

.chance-provisionen-kennzahlen dd {
  margin: 0;
  font-size: var(--bro-schrift-titel-groesse);
}

.chance-position-pflege {
  margin-top: var(--bro-abstand-16);
}

.chance-position-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--bro-abstand-12);
  padding-block: var(--bro-abstand-16);
}

/* #9111: vorhandene v10-Karten als fließendes Raster, ohne neue Farbpalette. */
.portal-vermietung-uebersicht {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--bro-abstand-16);
}

/* #9108: Im Vollbild bleibt der Editor auf derselben Token-Fläche lesbar. */
[data-wissen-editor]:fullscreen {
  background: var(--bro-flaeche-1);
  color: var(--bro-tinte-1);
  padding: var(--bro-abstand-16);
  overflow: auto;
}
[data-wissen-editor]:fullscreen textarea {
  min-height: 60vh;
}

/* #9108: Bestehende v10-Karten, nebeneinander statt einer Zahlen-Textliste. */
.portal-berichte-kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--bro-abstand-12);
  padding: 0;
  list-style: none;
}

/* #9110: Arbeitsfluss und Werkzeuge, v10-Tokens; auf schmalen Schirmen gestapelt. */
.portal-glasfaser-arbeitsfluss {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bro-abstand-16);
}
.portal-glasfaser-arbeitsfluss ol {
  display: grid;
  gap: var(--bro-abstand-16);
  padding-inline-start: var(--bro-abstand-24);
}
@media (min-width: 1280px) {
  .portal-glasfaser-arbeitsfluss {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    align-items: start;
  }
}
/* Übergabe nach Vitala-Demo, #9270; Look and Feel #9599 (quelltext-design.md:
   .gruppe-titel, .ug-punkt, .ug-haken, .ug-neu, .liste-klein, .warum).
   Die Kennzahlen kommen aus `kennzahlLeiste` (@bro/ui). Farben/Schrift
   ausschließlich Haus-Tokens. */

.kf-ug-fehlt {
  margin-block: var(--bro-abstand-16);
  color: var(--bro-tinte-2);
}
/* Erledigte über den jüngsten hinaus, aufklappbar (#9784). */
.kf-ug-weitere {
  border-top: 1px solid var(--bro-linie);
}
.kf-ug-weitere > summary {
  padding: var(--bro-abstand-8) var(--bro-abstand-16);
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
  cursor: pointer;
}
.kf-ug-raster {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--bro-abstand-16);
  margin-top: var(--bro-abstand-16);
}
.kf-ug-stapel {
  display: grid;
  align-content: start;
  gap: var(--bro-abstand-16);
}
.kf-ug-zusammenfassung {
  display: flex;
  gap: var(--bro-abstand-8);
  padding: var(--bro-abstand-12) var(--bro-abstand-16);
  background: var(--bro-akzent-flaeche);
  border: 1px solid var(--bro-linie);
  font-size: var(--bro-schrift-klein-groesse);
}
.kf-ug-zusammenfassung > svg {
  flex: none;
  margin-top: var(--bro-abstand-4);
  color: var(--bro-akzent);
}
.kf-ug-zusammenfassung p {
  margin: 0;
}
.kf-ug-gruppe {
  padding: 0;
  overflow: hidden;
}
.kf-ug-gruppenkopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bro-abstand-8);
  padding: var(--bro-abstand-12) var(--bro-abstand-16);
  background: var(--bro-flaeche-0);
  border-bottom: 1px solid var(--bro-linie);
}
.kf-ug-gruppenkopf .bro-augenbraue {
  margin: 0;
}
.kf-ug-gruppenkopf small {
  font-size: var(--bro-schrift-fein-groesse);
  color: var(--bro-tinte-2);
  white-space: nowrap;
}
.kf-ug-punkte {
  list-style: none;
  padding: 0;
  margin: 0;
}
.kf-ug-punkte li {
  display: flex;
  align-items: flex-start;
  gap: var(--bro-abstand-12);
  padding: var(--bro-abstand-12) var(--bro-abstand-16);
  border-top: 1px solid var(--bro-linie);
}
.kf-ug-punkte li:first-child {
  border-top: 0;
}
.kf-ug-gruppe .portal-leer {
  margin: 0;
  padding: var(--bro-abstand-12) var(--bro-abstand-16);
}
.kf-ug-punkte form {
  display: contents;
}
.kf-ug-haken {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--bro-abstand-24);
  height: var(--bro-abstand-24);
  padding: 0;
  border: 1px solid var(--bro-linie-stark);
  border-radius: var(--bro-radius-s);
  background: var(--bro-flaeche-1);
  color: var(--bro-akzent-tinte);
  cursor: pointer;
}
/* Fokus wie `.bro-knopf:focus-visible` — der Haken trägt keine Knopf-Klassen mehr. */
.kf-ug-haken:focus-visible {
  outline: 2px solid var(--bro-akzent);
  outline-offset: 2px;
}
.kf-ug-haken-erledigt {
  border-color: var(--bro-erfolg);
  background: var(--bro-erfolg);
}
.kf-ug-punkte p {
  margin: 0;
}
.kf-ug-metadaten {
  display: block;
  margin-top: var(--bro-abstand-4);
  text-transform: none;
  letter-spacing: normal;
  color: var(--bro-tinte-2);
}
.kf-ug-punkte .fertig p {
  text-decoration: line-through;
  color: var(--bro-tinte-3);
}
.kf-ug-neu {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr) auto;
  gap: var(--bro-abstand-8);
  margin-top: var(--bro-abstand-8);
  align-items: center;
}
.kf-ug-erklaerung {
  margin: var(--bro-abstand-4) 0 var(--bro-abstand-12);
  color: var(--bro-tinte-2);
}
.kf-ug-verlauf {
  list-style: none;
  margin: var(--bro-abstand-8) 0 0;
  padding: 0;
}
.kf-ug-verlauf li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--bro-abstand-8);
  padding-block: var(--bro-abstand-8);
  border-top: 1px solid var(--bro-linie);
  font-size: var(--bro-schrift-klein-groesse);
}
.kf-ug-verlauf li:first-child {
  border-top: 0;
}
.kf-ug-verlauf small {
  font-size: var(--bro-schrift-fein-groesse);
  color: var(--bro-tinte-2);
  text-align: right;
}
@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (max-height: 479px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (orientation: portrait) {
  .kf-ug-raster,
  .kf-ug-neu {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* #9264: Leitstand nach der Vitala-Klickdemo (quelltext-design.md: .ent-karte,
   .wahl, .auto-liste, .naechste, .tafel, .tz, .raster.leit, .live-punkt).
   Werte aus den Haus-Tokens; Farben der Transportart über --kf-farbe. */
.kf-ls {
  min-width: 0;
}
.kf-ls-live-punkt {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--bro-radius-rund);
  background: var(--bro-erfolg);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--bro-erfolg) 25%, transparent);
  animation: kf-ls-live 1.8s infinite;
}
/* In der Unterzeile vor der Uhrzeit wie `.kopf-unter .live-punkt` der Demo
   (Ticket 9782). */
.portal-seitenkopf-untertitel .kf-ls-live-punkt {
  margin-right: var(--bro-abstand-8);
  vertical-align: middle;
}
/* Der Live-Punkt pulsiert wie in der Demo (`.live-punkt`, `@keyframes live`,
   #9540); wer weniger Bewegung eingestellt hat, behält den stillen Ring. */
@keyframes kf-ls-live {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--bro-erfolg) 55%, transparent);
  }
  70% {
    box-shadow: 0 0 0 8px transparent;
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}
@media (prefers-reduced-motion: reduce) {
  .kf-ls-live-punkt {
    animation: none;
  }
}
.kf-ls-meldung {
  margin: 0 0 var(--bro-abstand-16);
  padding: var(--bro-abstand-12) var(--bro-abstand-16);
  border: 1px solid var(--bro-hinweis-linie);
  background: var(--bro-hinweis-flaeche);
}
.kf-ls-meldung--fehler {
  border-color: var(--bro-fehler-linie);
  background: var(--bro-fehler-flaeche);
}
/* #9888: der Behälter des Anruf-Bands aus der Telefonanlage; leer, solange
   keiner klingelt. Die Zeile selbst ist `.kf-ls-anruf` (#9867, unten). */
.kf-ls-anrufband:empty {
  display: none;
}
/* „Startklar“ eines neuen Betriebs (#9788): über den Entscheidungen, bis
   alle Schritte stehen. Nur Tokens, Gestaltung aus Karte, Marke und Knopf. */
.kf-ls-startklar {
  margin-bottom: var(--bro-abstand-24);
}
.kf-ls-startklar--zu > summary {
  cursor: pointer;
}
.kf-ls-startklar--zu[open] > summary {
  margin-bottom: var(--bro-abstand-12);
}
.kf-ls-startklar-balken {
  width: 100%;
  margin: var(--bro-abstand-8) 0 var(--bro-abstand-16);
}
.kf-ls-startklar-schritte {
  display: grid;
  gap: var(--bro-abstand-12);
  margin: 0;
  padding: 0;
  list-style: none;
}
.kf-ls-startklar-schritt {
  display: grid;
  grid-template-columns: var(--bro-abstand-24) minmax(0, 1fr);
  gap: var(--bro-abstand-12);
  align-items: start;
  padding-top: var(--bro-abstand-12);
  border-top: 1px solid var(--bro-linie);
}
.kf-ls-startklar-text > p {
  margin: 0 0 var(--bro-abstand-4);
}
.kf-ls-startklar-zeichen {
  display: inline-block;
  width: var(--bro-abstand-24);
  height: var(--bro-abstand-24);
  border: 2px solid var(--bro-linie-stark);
  border-radius: var(--bro-radius-rund);
}
.kf-ls-startklar-zeichen--fertig {
  border: 0;
  color: var(--bro-erfolg);
}
.kf-ls-startklar-hof {
  max-width: 36rem;
  margin-top: var(--bro-abstand-8);
}
.kf-ls-startklar-zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--bro-abstand-12);
}
.kf-ls-raster {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--bro-abstand-24);
  align-items: start;
  margin-bottom: var(--bro-abstand-24);
}
.kf-ls-stapel {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-16);
  min-width: 0;
}
/* #10267: Leitstand im Seitenmuster (Leinwand „Demo Fahrdienst“, Df125).
   Kennzahlen in der Farbe der Gruppe „Kundenlösungen“ (Datenreihe 6, rosa,
   wie in der Modern-Leiste), Box mit Reitern, Plakette am Titel. */
.kf-ls-live {
  display: inline-flex;
  align-items: center;
  gap: var(--bro-abstand-8);
  padding: 2px var(--bro-abstand-8);
  border-radius: var(--bro-radius-rund);
  background: var(--bro-flaeche-2);
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
}
.kf-ls-live:not(.kf-ls-live--an) .kf-ls-live-punkt {
  background: var(--bro-tinte-3);
  box-shadow: none;
  animation: none;
}
.kf-ls-live--an {
  background: color-mix(in srgb, var(--bro-erfolg) 12%, var(--bro-flaeche-1));
  color: var(--bro-erfolg);
}
.kf-ls-erledigt > summary {
  cursor: pointer;
}
.kf-ls-erledigt[open] > summary {
  margin-bottom: var(--bro-abstand-8);
}
.kf-ls-kz {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--bro-abstand-12);
  margin: var(--bro-abstand-16) 0;
  padding: 0;
  list-style: none;
}
.kf-ls-kz-kachel {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
  height: 100%;
  padding: var(--bro-abstand-16);
  border: 1px solid color-mix(in srgb, var(--bro-datenreihe-6) 40%, var(--bro-linie));
  border-radius: var(--bro-radius-m);
  background: color-mix(in srgb, var(--bro-datenreihe-6) 10%, var(--bro-flaeche-1));
  color: var(--bro-tinte-1);
  text-decoration: none;
}
.kf-ls-kz-kachel:hover {
  border-color: var(--bro-datenreihe-6);
}
.kf-ls-kz-name {
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
}
.kf-ls-kz-wert {
  font-size: var(--bro-schrift-anzeige-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
  font-variant-numeric: tabular-nums;
}
.kf-ls-kz-wert--erfolg {
  color: var(--bro-erfolg);
}
.kf-ls-kz-wert--warnung {
  color: var(--bro-warnung);
}
.kf-ls-kz-wert--fehler {
  color: var(--bro-fehler);
}
.kf-ls-kz-zusatz {
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-fein-groesse);
}
.kf-ls-box {
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
  background: var(--bro-flaeche-1);
}
.kf-ls-box-kopf {
  padding: 0 var(--bro-abstand-16);
  border-bottom: 1px solid var(--bro-linie);
}
/* Einzeilig und schiebbar (Regel 3 und 11 der Leinwand). */
.kf-ls-box-kopf .bro-reiter {
  flex-wrap: nowrap;
  overflow-x: auto;
}
.kf-ls-reiterflaeche {
  padding: var(--bro-abstand-16);
}
.kf-ls-reiterflaeche[hidden] {
  display: none;
}
.kf-ls-tabelle {
  /* Bezugspunkt für absolut gesetzte Vorlesetexte in Kopfzellen: Ohne ihn
     ragte .kf-ls-unsichtbar bei 390 px über den Seitenrand (#10533). */
  position: relative;
  overflow-x: auto;
}
.kf-ls-wagen-tabelle,
.kf-ls-fahrten-tabelle {
  width: 100%;
  border-collapse: collapse;
}
.kf-ls-wagen-tabelle th,
.kf-ls-wagen-tabelle td,
.kf-ls-fahrten-tabelle th,
.kf-ls-fahrten-tabelle td {
  padding: var(--bro-abstand-8);
  border-bottom: 1px solid var(--bro-linie);
  text-align: left;
  vertical-align: top;
}
.kf-ls-zahl {
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.kf-ls-unter {
  display: block;
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-fein-groesse);
}
.kf-ls-unsichtbar {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.kf-ls-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-8);
  margin: var(--bro-abstand-12) 0;
}
.kf-ls-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--bro-abstand-4);
  padding: 2px var(--bro-abstand-12);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-rund);
  color: var(--bro-tinte-1);
  font-size: var(--bro-schrift-klein-groesse);
  text-decoration: none;
}
.kf-ls-chip > span {
  color: var(--bro-tinte-2);
  font-variant-numeric: tabular-nums;
}
.kf-ls-chip[aria-current] {
  border-color: var(--bro-akzent);
  background: color-mix(in srgb, var(--bro-akzent) 10%, var(--bro-flaeche-1));
  font-weight: var(--bro-schrift-betont-gewicht);
}
.kf-ls-hinweise {
  margin: var(--bro-abstand-12) 0;
  padding: var(--bro-abstand-12) var(--bro-abstand-16);
  border-left: 3px solid var(--bro-warnung);
  background: color-mix(in srgb, var(--bro-warnung) 8%, var(--bro-flaeche-1));
}
.kf-ls-hinweise ul {
  margin: 0;
  padding-left: var(--bro-abstand-16);
}
/* #10533: zusammengefasste Hinweisgruppen — eine Zeile mit Zahl und Verweis,
   die Einzelfälle erst nach dem Aufklappen. */
.kf-ls-hinweis-gruppe > details > summary {
  cursor: pointer;
  font-size: var(--bro-schrift-klein-groesse);
}
.kf-ls-hinweis-gruppe > details > ul {
  margin-top: var(--bro-abstand-4);
  max-height: 40vh;
  overflow: auto;
}
.kf-ls-vorspann {
  margin: var(--bro-abstand-12) 0;
}
.kf-ls-vorspann > summary {
  cursor: pointer;
  font-weight: var(--bro-schrift-betont-gewicht);
}
.kf-ls-aktion {
  white-space: nowrap;
}
.kf-ls-mehr {
  display: inline-block;
  position: relative;
}
.kf-ls-mehr > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  border-radius: var(--bro-radius-m);
  cursor: pointer;
  list-style: none;
}
.kf-ls-mehr > summary::-webkit-details-marker {
  display: none;
}
.kf-ls-mehr-liste {
  position: absolute;
  right: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
  min-width: 200px;
  padding: var(--bro-abstand-8);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
  background: var(--bro-flaeche-1);
  white-space: normal;
}
.kf-ls-nachladen {
  margin: 0;
}
/* Tag im Überblick: die Balken nach Stand (#10267, Ausgestaltung); die
   Transportart bleibt im Titel des Balkens. Die Farbe kommt über
   `--kf-farbe`, die die Grundregel `.kf-ls-tz-spur > .kf-ls-fahrt` weiter
   unten als Hintergrund und Rahmen liest; das Markup setzt sie nicht mehr. */
.kf-ls-tz-spur > .kf-ls-fahrt--geplant {
  --kf-farbe: var(--bro-linie-stark);
}
.kf-ls-tz-spur > .kf-ls-fahrt--laeuft {
  --kf-farbe: var(--bro-akzent);
}
.kf-ls-tz-spur > .kf-ls-fahrt--erledigt {
  --kf-farbe: var(--bro-erfolg);
}
@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (max-height: 479px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (orientation: portrait) {
  .kf-ls-kz {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.kf-ls-stapel--eng {
  gap: var(--bro-abstand-8);
}
/* Kleine graue Zeile in normaler Schreibung wie `.fein` der Demo
   (quelltext-leitstand.md:310/:314) — keine Versalien (#9599, Abnahme). */
.kf-ls-fein {
  margin: 0;
  font-size: var(--bro-schrift-fein-groesse);
  font-weight: var(--bro-schrift-fein-gewicht);
  letter-spacing: var(--bro-schrift-fein-laufweite);
  color: var(--bro-tinte-2);
}
.kf-ls-flaeche {
  padding: var(--bro-abstand-16);
  border: 1px solid var(--bro-linie);
  background: var(--bro-flaeche-1);
}
.kf-ls-flaeche--ohne-rand {
  padding: 0;
  overflow: hidden;
  /* Eigener Stapel: Der Kartenumschalter (z-index 500) bleibt unter der
     Handy-Leiste am Fuß. */
  isolation: isolate;
}
.kf-ls-ohne-ort {
  margin: 0;
  padding: 0 var(--bro-abstand-16) var(--bro-abstand-12);
  color: var(--bro-tinte-2);
}
.kf-ls-karte {
  padding: var(--bro-abstand-16);
  border: 1px solid var(--bro-linie);
  border-left: 3px solid var(--bro-warnung);
  background: var(--bro-flaeche-1);
}
.kf-ls-karte--verspaetung {
  border-left-color: var(--bro-fehler);
}
.kf-ls-karte--neu {
  border-left-color: var(--bro-akzent);
}
.kf-ls-karte--fertig {
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-12);
  padding-block: var(--bro-abstand-12);
  border-left-color: var(--bro-erfolg);
  color: var(--bro-tinte-2);
}
.kf-ls-karte--fertig > .bro-symbol {
  flex: none;
  color: var(--bro-erfolg);
}
.kf-ls-karte--fertig b {
  display: block;
  color: var(--bro-tinte-1);
}
.kf-ls-karte--fertig span {
  font-size: var(--bro-schrift-klein-groesse);
}
.kf-ls-karte-kopf {
  display: flex;
  align-items: flex-start;
  gap: var(--bro-abstand-12);
}
.kf-ls-karte-kopf > .bro-symbol {
  flex: none;
  margin-top: 1px;
  color: var(--bro-warnung);
}
.kf-ls-karte--verspaetung .kf-ls-karte-kopf > .bro-symbol {
  color: var(--bro-fehler);
}
.kf-ls-karte--neu .kf-ls-karte-kopf > .bro-symbol {
  color: var(--bro-akzent);
}
.kf-ls-karte-kopf div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.kf-ls-karte-kopf b {
  font-size: var(--bro-schrift-betont-groesse);
}
.kf-ls-karte-kopf span {
  font-size: var(--bro-schrift-klein-groesse);
  color: var(--bro-tinte-2);
}
.kf-ls-karte-kopf small {
  font-size: var(--bro-schrift-fein-groesse);
  color: var(--bro-tinte-3);
}
.kf-ls-wahlen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-8);
  margin: var(--bro-abstand-12) 0 0 var(--bro-abstand-32);
}
.kf-ls-wahlen form {
  margin: 0;
}
.kf-ls-wahl {
  display: inline-flex;
  align-items: center;
  gap: var(--bro-abstand-8);
  min-width: 0;
  min-height: var(--bro-beruehrungsflaeche);
  padding: var(--bro-abstand-8) var(--bro-abstand-12);
  border: 1px solid var(--bro-linie-stark);
  background: var(--bro-flaeche-1);
  color: var(--bro-tinte-1);
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.kf-ls-wahl:hover {
  border-color: var(--bro-akzent);
}
.kf-ls-wahl > span:not(.kf-ls-wagen) {
  display: flex;
  flex-direction: column;
}
.kf-ls-wahl b {
  font-size: var(--bro-schrift-klein-groesse);
}
.kf-ls-wahl small {
  font-size: var(--bro-schrift-fein-groesse);
  color: var(--bro-tinte-2);
}
.kf-ls-wahl--empfohlen {
  border-color: var(--bro-akzent);
  background: var(--bro-akzent-flaeche);
  box-shadow: inset 0 0 0 1px var(--bro-akzent);
}
.kf-ls-hinweis {
  font-style: normal;
  font-size: var(--bro-schrift-fein-groesse);
  color: var(--bro-warnung);
}
/* Die Lern-Frage „Warum nicht Nr. 1?“ (#9617): zugeklappt, freiwillig. */
.kf-lern-frage {
  margin-top: var(--bro-abstand-4);
  font-size: var(--bro-schrift-fein-groesse);
  color: var(--bro-tinte-2);
}
.kf-lern-frage summary {
  cursor: pointer;
}
.kf-lern-frage[open] {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
}
/* „Bro-Logik und Ihre Logik“ (#9617, Scheibe 3): zwei Spalten je Punkt,
   ein Unterschied in der Akzentfläche wie der `.warum`-Kasten der Demo. */
.kf-logik-stand {
  margin: var(--bro-abstand-8) 0;
}
.kf-logik-bereich {
  margin-top: var(--bro-abstand-12);
  border-top: 1px solid var(--bro-linie);
  padding-top: var(--bro-abstand-8);
}
.kf-logik-bereich summary {
  cursor: pointer;
  font-weight: var(--bro-schrift-betont-gewicht);
}
.kf-logik-tabelle {
  margin-top: var(--bro-abstand-8);
}
.kf-logik-tabelle th[scope="row"] {
  font-weight: var(--bro-schrift-betont-gewicht);
  text-align: left;
}
.kf-logik-bro {
  color: var(--bro-tinte-2);
}
.kf-logik-zeile--anders {
  background: var(--bro-akzent-flaeche);
}
.kf-logik-zeile--anders .kf-logik-ihre {
  font-weight: var(--bro-schrift-betont-gewicht);
  color: var(--bro-tinte-1);
}
.kf-logik-marke {
  display: inline-block;
  margin-left: var(--bro-abstand-4);
  padding: 0 var(--bro-abstand-4);
  border: 1px solid var(--bro-akzent);
  border-radius: var(--bro-radius-s);
  font-size: var(--bro-schrift-fein-groesse);
  font-weight: var(--bro-schrift-fein-gewicht);
  color: var(--bro-akzent-text);
}
.kf-logik-wahl form {
  margin: 0;
}
.kf-lern-schalter,
.kf-lern-grund-neu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-8);
  margin-top: var(--bro-abstand-8);
}
.kf-ls-nein,
.kf-ls-weiter {
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-4);
  margin: var(--bro-abstand-8) 0 0 var(--bro-abstand-32);
  font-size: var(--bro-schrift-fein-groesse);
  color: var(--bro-tinte-3);
}
.kf-ls-nein .bro-symbol {
  flex: none;
  width: 14px;
  height: 14px;
}
.kf-ls-leer {
  margin: 0;
  color: var(--bro-tinte-2);
}
/* „Wartet auf Abruf“ (#9994): Rückfahrten ohne Zeit unter den Entscheidungen. */
.kf-ls-abrufe:empty {
  display: none;
}
.kf-ls-abrufe {
  margin-top: var(--bro-abstand-12);
}
.kf-ls-abruf-liste {
  display: flex;
  flex-direction: column;
  margin: var(--bro-abstand-8) 0 0;
  padding: 0;
  list-style: none;
}
.kf-ls-abruf-liste > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--bro-abstand-8);
  padding-block: var(--bro-abstand-8);
  border-top: 1px solid var(--bro-linie);
  font-size: var(--bro-schrift-klein-groesse);
}
.kf-ls-abruf-liste > li:first-child {
  border-top: 0;
}
.kf-ls-auto {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  margin: var(--bro-abstand-8) 0 0;
  padding: 0;
  list-style: none;
}
.kf-ls-auto li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: var(--bro-abstand-8);
  font-size: var(--bro-schrift-klein-groesse);
  color: var(--bro-tinte-2);
}
.kf-ls-auto li.kf-ls-auto-leer {
  display: block;
}
.kf-ls-auto .bro-symbol {
  width: 14px;
  height: 14px;
  margin-top: 3px;
  color: var(--bro-erfolg);
}
/* #9594: „In eigenem Fenster öffnen“ neben dem Abschnittstitel; im Fenster
   selbst fehlt der Knopf. Die Schale blendet `html[data-eingebettet]` aus. */
.kf-ls-kopfzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--bro-abstand-8);
  margin: 0 0 var(--bro-abstand-8);
}
/* Die Augenbraue (#9609) bringt unten Abstand mit; neben dem Knopf sitzt sie bündig. */
.kf-ls-kopfzeile .bro-augenbraue {
  margin: 0;
}
.kf-ls-kopfzeile--karte {
  justify-content: flex-end;
  margin: 0;
  padding: var(--bro-abstand-8) var(--bro-abstand-16) 0;
}
/* Im Kartenfenster füllt die Karte die Fensterhöhe — auf einem zweiten
   Monitor ist sie der ganze Inhalt. Abgezogen wird der Seitenkopf darüber und
   die Legende darunter; die Übersicht behält ihr Seitenverhältnis. */
.kf-ls-fenster--karte .portal-stadtkarte,
.kf-ls-fenster--karte .portal-echtkarte {
  height: calc(100dvh - 10rem);
  min-height: 320px;
  max-height: none;
  aspect-ratio: auto;
}
/* Rechts und links der Übersicht dieselbe Fläche wie das Land darin. */
.kf-ls-fenster--karte .portal-stadtkarte {
  background: var(--bro-flaeche-0);
}
/* Kleiner Symbolknopf im Kartenkopf (#9782), Form wie `.knopf.geist.klein`
   der Demo ohne Text. */
.kf-ls-fenster-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--bro-abstand-4);
  border-radius: var(--bro-radius-s);
  color: var(--bro-tinte-2);
  text-decoration: none;
}
.kf-ls-fenster-knopf:hover {
  background: var(--bro-flaeche-0);
  color: var(--bro-tinte-1);
}
.kf-ls-fenster-knopf:focus-visible {
  outline: var(--bro-fokus-breite) solid var(--bro-akzent);
  outline-offset: var(--bro-fokus-abstand);
}
.kf-ls-fenster-knopf svg {
  width: 1em;
  height: 1em;
}
.kf-ls-karte-live .portal-karten-legende,
.kf-ls-karte-live .portal-karte-leer {
  padding: 0 var(--bro-abstand-16) var(--bro-abstand-12);
}
.kf-ls-naechste {
  display: flex;
  flex-direction: column;
  margin-top: var(--bro-abstand-8);
}
.kf-ls-naechste > div {
  display: grid;
  grid-template-columns: 44px 76px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--bro-abstand-8);
  padding-block: 7px;
  border-top: 1px solid var(--bro-linie);
  font-size: var(--bro-schrift-klein-groesse);
}
.kf-ls-naechste > div:first-child {
  border-top: 0;
}
.kf-ls-t {
  font-weight: var(--bro-schrift-betont-gewicht);
  font-variant-numeric: tabular-nums;
}
.kf-ls-n {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.kf-ls-n small {
  overflow: hidden;
  font-size: var(--bro-schrift-fein-groesse);
  color: var(--bro-tinte-2);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.kf-ls-marke {
  padding: 2px 7px;
  font-size: var(--bro-schrift-fein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
  white-space: nowrap;
}
.kf-ls-marke--gut {
  color: var(--bro-erfolg);
  background: color-mix(in srgb, var(--bro-erfolg) 12%, var(--bro-flaeche-1));
}
.kf-ls-marke--rot {
  color: var(--bro-fehler);
  background: var(--bro-fehler-flaeche);
}
.kf-ls-wagen {
  display: inline-flex;
  height: 24px;
  border: 1px solid color-mix(in srgb, var(--bro-modul-fahrdienst) 40%, var(--bro-flaeche-1));
  font-size: var(--bro-schrift-klein-groesse);
  line-height: 24px;
  white-space: nowrap;
}
.kf-ls-wagen b {
  padding: 0 7px;
  background: var(--bro-modul-fahrdienst);
  color: var(--bro-flaeche-1);
}
.kf-ls-naechste .kf-ls-wagen,
.kf-ls-tz-wagen .kf-ls-wagen {
  justify-self: start;
}
.kf-ls-wagen--klein {
  height: 20px;
  font-size: var(--bro-schrift-fein-groesse);
  line-height: 20px;
}
.kf-ls-wagen--klein b {
  padding: 0 5px;
}
/* Das Kürzel der Ausstattungsklasse im Wagenschild (#9432, Demo `fzChip`:
   `.fz i` mit `font-weight: 650` und 9 % Tönung, `quelltext-design.md:1619`).
   Gewicht und Tönung kommen aus vorhandenen Tokens wie bei der Nachbarregel
   `.kf-ls-marke`; nur der Farbton JE KLASSE fehlt, dafür gibt es keine
   `--bro-ausstattung-*`-Tokens (#9432).
   `text-decoration: none` ist Pflicht, nicht Geschmack: Browser unterstreichen
   `abbr[title]` von sich aus gepunktet, und das zerschnitte das Schild.
   `cursor: inherit` aus demselben Grund — im Wahlknopf setzen manche Browser
   für `abbr[title]` sonst `help` statt des `pointer` des Knopfes. */
.kf-ls-wagen-klasse {
  padding: 0 6px;
  font-weight: var(--bro-schrift-betont-gewicht);
  color: var(--bro-modul-fahrdienst);
  background: color-mix(in srgb, var(--bro-modul-fahrdienst) 9%, var(--bro-flaeche-1));
  text-decoration: none;
  cursor: inherit;
}
.kf-ls-wagen--klein .kf-ls-wagen-klasse {
  padding: 0 4px;
}
.kf-ls-tafel {
  /* Eigener Scrollbereich hält den Sticky-Kopf auch bei langen Wagenlisten sichtbar. */
  max-height: 100dvh;
  overflow: auto;
  border: 1px solid var(--bro-linie);
  background: var(--bro-flaeche-1);
}
/* Leerfall der Tafel: der Satz bekommt den Innenrand der Zeilen (#9599). */
.kf-ls-tafel-leer {
  margin: 0;
  padding: var(--bro-abstand-16);
}
.kf-ls-tz {
  /* Demo quelltext-design.md, Z. 793–794. */
  animation: kf-ls-einblenden 280ms ease both;
  animation-delay: calc(var(--i, 0) * 18ms);
  display: grid;
  grid-template-columns: 118px 84px minmax(240px, 1fr) 62px 86px;
  align-items: center;
  gap: var(--bro-abstand-12);
  min-height: 44px;
  padding: 6px var(--bro-abstand-16);
  border-bottom: 1px solid var(--bro-linie);
}
.kf-ls-tz--kopf {
  position: sticky;
  top: 0;
  z-index: 2;
  animation: none;
  min-height: 34px;
  background: var(--bro-flaeche-0);
  font-size: var(--bro-schrift-fein-groesse);
  font-weight: var(--bro-schrift-gruppentitel-gewicht);
  text-transform: uppercase;
  color: var(--bro-tinte-2);
}
.kf-ls-tz-zeit {
  display: flex;
  flex-direction: column;
  font-variant-numeric: tabular-nums;
}
.kf-ls-tz-zeit span {
  font-size: var(--bro-schrift-fein-groesse);
  color: var(--bro-tinte-2);
}
.kf-ls-text--rot {
  color: var(--bro-fehler);
}
.kf-ls-text--gut {
  color: var(--bro-erfolg);
}
.kf-ls-tz-spur {
  /* Demoachse 05:00–19:30: ein Rasterstrich pro Stunde. */
  background: repeating-linear-gradient(
    90deg,
    var(--bro-linie) 0 1px,
    transparent 1px calc(100% / 14.5)
  );
  position: relative;
  height: 22px;
}
.kf-ls-tz-spur > i {
  position: absolute;
  top: 0;
  bottom: 0;
}
.kf-ls-achse {
  background: none;
  height: 16px;
  text-transform: none;
}
.kf-ls-achse > i {
  font-style: normal;
  transform: translateX(-50%);
}
.kf-ls-tz-spur > .kf-ls-dienst {
  top: 6px;
  bottom: 6px;
  background: color-mix(in srgb, var(--bro-tinte-3) 18%, transparent);
}
.kf-ls-tz-spur > .kf-ls-werkstatt {
  background: repeating-linear-gradient(
    45deg,
    color-mix(in srgb, var(--bro-warnung) 40%, transparent) 0 3px,
    transparent 3px 7px
  );
  border: 1px solid color-mix(in srgb, var(--bro-warnung) 50%, transparent);
}
.kf-ls-tz-spur > .kf-ls-fahrt {
  top: 2px;
  bottom: 2px;
  min-width: 3px;
  background: var(--kf-farbe, var(--bro-akzent));
}
.kf-ls-tz-spur > .kf-ls-fahrt--erledigt {
  opacity: 0.32;
}
.kf-ls-tz-spur > .kf-ls-fahrt--laeuft {
  box-shadow:
    0 0 0 2px var(--bro-flaeche-1),
    0 0 0 3.5px var(--kf-farbe, var(--bro-akzent));
}
.kf-ls-tz-spur > .kf-ls-fahrt--zuspaet {
  /* Demo quelltext-design.md, Z. 911. */
  animation: kf-ls-puls 1.2s infinite;
  box-shadow:
    0 0 0 2px var(--bro-flaeche-1),
    0 0 0 3.5px var(--bro-fehler);
}
.kf-ls-tz-spur > .kf-ls-jetzt {
  top: -8px;
  bottom: -8px;
  z-index: 1;
  width: 2px;
  background: var(--bro-fehler);
}
.kf-ls-achse > .kf-ls-jetzt-kopf {
  z-index: 1;
  padding: 0 4px;
  background: var(--bro-fehler);
  color: var(--bro-flaeche-1);
  font-weight: var(--bro-schrift-betont-gewicht);
}
.kf-ls-tz-zahl {
  display: flex;
  flex-direction: column;
  font-weight: var(--bro-schrift-betont-gewicht);
  font-variant-numeric: tabular-nums;
}
.kf-ls-tz-zahl small {
  font-weight: var(--bro-schrift-fliesstext-gewicht);
  color: var(--bro-tinte-2);
}
.kf-ls-tz-leute {
  display: flex;
}
.kf-ls-person + .kf-ls-person {
  margin-left: -6px;
}
.kf-ls-person {
  box-shadow: 0 0 0 2px var(--bro-flaeche-1);
}
[data-bereich-zaehler="krankenfahrt-leitstand-offen"] {
  color: var(--bro-fehler);
  font-weight: var(--bro-schrift-betont-gewicht);
}
/* Bewegungsbild: Live-Demo styles.css, @keyframes puls/einblenden (16.10.2026). */
@keyframes kf-ls-einblenden {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes kf-ls-puls {
  0%,
  100% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .kf-ls-tz,
  .kf-ls-tz-spur > .kf-ls-fahrt--zuspaet {
    animation: none;
  }
}

@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (max-height: 479px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (orientation: portrait) {
  .kf-ls-raster {
    grid-template-columns: minmax(0, 1fr);
  }
  .kf-ls-wahlen,
  .kf-ls-nein,
  .kf-ls-weiter {
    margin-left: 0;
  }
}
/* #10444: Die Tagesleiste des Leitstands — Tag mit „Heute“, Vortag und
   Folgetag, darunter die Reiter Überblick, Fahrten, Wagen. Der aktive Reiter
   trägt neben der Farbe einen Unterstrich und `aria-current`. */
.kf-tl {
  display: grid;
  gap: var(--bro-abstand-8);
  margin: 0 0 var(--bro-abstand-16);
}
.kf-tl-tag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-8);
}
.kf-tl-datum {
  font-size: var(--bro-schrift-betont-groesse);
}
.kf-tl-plakette {
  padding: 2px var(--bro-abstand-8);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-rund);
  font-size: var(--bro-schrift-fein-groesse);
  color: var(--bro-tinte-2);
}
.kf-tl-plakette--heute {
  border-color: var(--bro-modul-fahrdienst);
  color: var(--bro-modul-fahrdienst);
  font-weight: var(--bro-schrift-betont-gewicht);
}
.kf-tl-wahl {
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-4);
}
.kf-tl-feld input {
  min-height: var(--bro-beruehrungsflaeche);
}
.kf-tl-knopf {
  min-height: var(--bro-beruehrungsflaeche);
}
.kf-tl-unsichtbar {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.kf-tl-reiterleiste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-4);
  border-bottom: 1px solid var(--bro-linie);
}
.kf-tl-reiter {
  display: inline-flex;
  align-items: center;
  min-height: var(--bro-beruehrungsflaeche);
  padding: 0 var(--bro-abstand-12);
  border-bottom: 3px solid transparent;
  color: var(--bro-tinte-2);
  text-decoration: none;
}
.kf-tl-reiter:hover {
  color: var(--bro-tinte-1);
}
.kf-tl-reiter:focus-visible {
  outline: var(--bro-fokus-breite) solid var(--bro-akzent);
  outline-offset: var(--bro-fokus-abstand);
}
.kf-tl-reiter--aktiv {
  border-bottom-color: var(--bro-modul-fahrdienst);
  color: var(--bro-tinte-1);
  font-weight: var(--bro-schrift-betont-gewicht);
}
/* #10444: Der Reiter „Wagen“ — je Wagen eine Karte. Geplant und bestätigt
   stehen in zwei beschrifteten Spalten, auf dem Handy untereinander. */
.kf-wt-oben {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--bro-abstand-8);
  margin-bottom: var(--bro-abstand-12);
}
.kf-wt-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-4);
}
.kf-wt-liste {
  display: grid;
  gap: var(--bro-abstand-12);
  margin-bottom: var(--bro-abstand-16);
}
.kf-wt-wagen {
  display: grid;
  gap: var(--bro-abstand-8);
  padding: var(--bro-abstand-12) var(--bro-abstand-16);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
  background: var(--bro-flaeche-1);
}
.kf-wt-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-8);
}
.kf-wt-titel {
  margin: 0;
  font-size: inherit;
}
.kf-wt-jetzt,
.kf-wt-naechste,
.kf-wt-werkstatt {
  margin: 0;
  font-size: var(--bro-schrift-klein-groesse);
}
.kf-wt-werkstatt {
  color: var(--bro-fehler);
}
.kf-wt-neben {
  font-size: var(--bro-schrift-klein-groesse);
  color: var(--bro-tinte-2);
}
.kf-wt-unbekannt {
  color: var(--bro-warnung);
}
.kf-wt-besatzung {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--bro-abstand-12);
}
.kf-wt-spalte {
  padding: var(--bro-abstand-8) var(--bro-abstand-12);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-s);
  background: var(--bro-flaeche-0);
}
.kf-wt-spaltentitel {
  margin: 0 0 var(--bro-abstand-4);
  font-size: var(--bro-schrift-klein-groesse);
}
.kf-wt-schicht + .kf-wt-schicht,
.kf-wt-jetzt-schicht + .kf-wt-schicht,
.kf-wt-schicht + .kf-wt-jetzt-schicht {
  margin-top: var(--bro-abstand-8);
}
.kf-wt-jetzt-schicht {
  padding-left: var(--bro-abstand-8);
  border-left: 3px solid var(--bro-modul-fahrdienst);
}
.kf-wt-personen {
  margin: var(--bro-abstand-4) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--bro-schrift-klein-groesse);
}
.kf-wt-rolle {
  display: inline-block;
  min-width: 5.5em;
  color: var(--bro-tinte-2);
}
.kf-wt-leer {
  color: var(--bro-tinte-3);
}
.kf-wt-luecken {
  margin: 0;
  padding: var(--bro-abstand-8) var(--bro-abstand-12) var(--bro-abstand-8) var(--bro-abstand-24);
  border: 1px solid var(--bro-warnung-linie);
  border-radius: var(--bro-radius-s);
  background: var(--bro-warnung-flaeche);
  font-size: var(--bro-schrift-klein-groesse);
}
.kf-wt-details {
  overflow-x: auto;
}
.kf-wt-details summary {
  min-height: var(--bro-beruehrungsflaeche);
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: var(--bro-schrift-klein-groesse);
}
.kf-wt-fahrten {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--bro-schrift-klein-groesse);
}
.kf-wt-fahrten th,
.kf-wt-fahrten td {
  padding: var(--bro-abstand-4) var(--bro-abstand-8);
  border-bottom: 1px solid var(--bro-linie);
  text-align: left;
}
.kf-wt-leer-satz {
  padding: var(--bro-abstand-16);
  border: 1px dashed var(--bro-linie-stark);
  border-radius: var(--bro-radius-m);
}
@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (max-height: 479px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (orientation: portrait) {
  .kf-wt-besatzung {
    grid-template-columns: minmax(0, 1fr);
  }
  .kf-wt-wagen {
    padding: var(--bro-abstand-12);
  }
}
/* #9867: Das Fenster „Fahrt annehmen“ über dem Leitstand, nach der echten
   Demo (`docs/befunde/2026-10-17-demo-echt/demo.css`: `.dialog.breit`,
   `.dialog-kopf`, `.an-raster`, `.an-form`, `.an-neu`, `.an-wagen`,
   `.reiter-mini`, `.anruf-band`). Maße der Demo, wo das Haus kein Token hat
   (Spaltenbreite 330px, Fensterbreite 980px), sonst Haus-Tokens. */
.kf-af-dialog {
  width: min(980px, calc(100% - 2 * var(--bro-abstand-16)));
  max-height: calc(100% - 2 * var(--bro-abstand-24));
  padding: 0;
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
  background: var(--bro-flaeche-1);
  color: var(--bro-tinte-1);
  box-shadow: var(--bro-schatten-dialog);
}
.kf-af-dialog::backdrop {
  background: color-mix(in oklab, var(--bro-tinte-1) 38%, transparent);
}
.kf-af-kopf {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-12);
  padding: var(--bro-abstand-16) 20px;
  border-bottom: 1px solid var(--bro-linie);
  background: var(--bro-flaeche-1);
}
.kf-af-kopf > div {
  margin-right: auto;
  min-width: 0;
}
.kf-af-kopf h2 {
  margin: 0;
  font-size: var(--bro-schrift-titel-groesse);
  line-height: var(--bro-schrift-titel-zeilenhoehe);
  font-weight: var(--bro-schrift-titel-gewicht);
}
.kf-af-kopf p {
  margin: 0;
  font-size: var(--bro-schrift-fein-groesse);
  color: var(--bro-tinte-2);
}
.kf-af-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 0;
  background: none;
  color: var(--bro-tinte-3);
  cursor: pointer;
}
.kf-af-meldung {
  margin: var(--bro-abstand-16) 20px 0;
}
.kf-af-rumpf {
  display: grid;
  grid-template-columns: minmax(0, 330px) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  padding: 20px;
}
.kf-af-form {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
  min-width: 0;
}
.kf-af-form label,
.kf-af-zeit,
.kf-af-adresse {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--bro-schrift-klein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
  color: var(--bro-tinte-2);
}
.kf-af-label b {
  font-size: var(--bro-schrift-betont-groesse);
  color: var(--bro-tinte-1);
}
.kf-af-zeit > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.kf-af-regler {
  width: 100%;
  margin: 2px 0 6px;
  accent-color: var(--bro-akzent);
}
/* Die Meldung am Feld „Abholung um“ (#10422): Wort und Farbe, am Feld
   zusätzlich `aria-invalid` mit roter Linie. */
.kf-af-zeit-fehler {
  margin: 0;
  color: var(--bro-fehler);
}
.kf-af-suchfeld {
  position: relative;
  display: block;
}
.kf-af-suchfeld > .kf-af-sym {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--bro-tinte-3);
}
.kf-af-suchfeld > input {
  width: 100%;
  padding-left: 30px;
}
.kf-af-sym {
  width: 14px;
  height: 14px;
  flex: none;
}
.kf-af-sym-gross {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--bro-tinte-3);
}
/* Vorschlagsliste der Adresssuche wie eine Kartensuche (#10320): schwebt
   direkt unter dem Suchfeld, je Zeile Ortsmarker, fett die Hauptzeile, grau
   die Nebenzeile, dünne Trennlinien. Aktiv ist die Zeile unter der Maus oder
   die per Pfeiltaste gewählte (`aria-selected`). */
.kf-af-suche {
  position: relative;
}
.kf-af-vorschlaege,
.kf-af-vorschlag-meldung {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  max-height: 22rem;
  overflow-y: auto;
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
  background: var(--bro-flaeche-1);
  box-shadow: var(--bro-schatten-menue);
}
.kf-af-vorschlaege:empty,
.kf-af-vorschlag-meldung:empty {
  display: none;
}
.kf-af-vorschlag-meldung {
  margin: 0;
  padding: 10px var(--bro-abstand-12);
}
.kf-af-vorschlaege button,
.kf-an-ortstreffer button {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  min-height: 0;
  padding: 8px var(--bro-abstand-12);
  border: 0;
  border-top: 1px solid var(--bro-linie);
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  color: var(--bro-tinte-1);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.kf-af-vorschlaege button:first-child {
  border-top: 0;
}
.kf-af-vorschlaege button:hover,
.kf-af-vorschlaege button[aria-selected="true"],
.kf-an-ortstreffer button:hover,
.kf-an-ortstreffer button[aria-selected="true"] {
  background: var(--bro-akzent-flaeche);
}
.kf-af-vorschlaege button:focus-visible,
.kf-an-ortstreffer button:focus-visible {
  outline: 2px solid var(--bro-akzent);
  outline-offset: -2px;
}
.kf-af-vorschlag-sym {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 1px;
  color: var(--bro-tinte-3);
}
.kf-af-vorschlaege button[aria-selected="true"] .kf-af-vorschlag-sym,
.kf-an-ortstreffer button[aria-selected="true"] .kf-af-vorschlag-sym {
  color: var(--bro-akzent);
}
.kf-af-vorschlag-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.kf-af-vorschlag-haupt {
  font-size: var(--bro-schrift-klein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
  color: var(--bro-tinte-1);
  overflow-wrap: anywhere;
}
.kf-af-vorschlag-neben {
  font-size: var(--bro-schrift-fein-groesse);
  font-weight: var(--bro-schrift-fliesstext-gewicht);
  color: var(--bro-tinte-2);
  overflow-wrap: anywhere;
}
.kf-af-neu {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--bro-abstand-12);
  border: 1px dashed var(--bro-akzent);
  background: var(--bro-akzent-flaeche);
}
.kf-af-zwei {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.kf-af-dezent {
  margin: 0;
  font-size: var(--bro-schrift-fein-groesse);
  font-weight: var(--bro-schrift-fliesstext-gewicht);
  color: var(--bro-tinte-2);
}
.kf-af-hinweis {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  margin: -4px 0 0;
  padding: var(--bro-abstand-8) 10px;
  background: var(--bro-warnung-flaeche);
  font-size: var(--bro-schrift-fein-groesse);
  color: var(--bro-tinte-1);
}
.kf-af-klein {
  min-height: 30px;
  padding: 5px 11px;
  font-size: var(--bro-schrift-fein-groesse);
}
.kf-af-kopf-wagen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.kf-af-reiter {
  display: inline-flex;
  border: 1px solid var(--bro-linie-stark);
}
.kf-af-reiter button {
  padding: 5px 11px;
  border: 0;
  background: var(--bro-flaeche-1);
  color: var(--bro-tinte-2);
  font: inherit;
  font-size: var(--bro-schrift-fein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
  cursor: pointer;
}
.kf-af-reiter button[aria-pressed="true"] {
  background: var(--bro-akzent);
  color: var(--bro-flaeche-1);
}
.kf-af-stapel {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
}
.kf-af-wagen {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "fz leute knopf" "fz werte knopf" "warum warum warum";
  gap: var(--bro-abstand-4) var(--bro-abstand-12);
  align-items: center;
  padding: 10px var(--bro-abstand-12);
  border: 1px solid var(--bro-linie);
  background: var(--bro-flaeche-1);
}
.kf-af-wagen > .kf-ls-wagen {
  grid-area: fz;
}
.kf-af-leute {
  grid-area: leute;
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-4);
  min-width: 0;
  font-size: 13.5px;
  font-weight: 650;
}
.kf-af-leute span:last-child {
  margin-left: var(--bro-abstand-4);
}
.kf-af-werte {
  grid-area: werte;
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-4) var(--bro-abstand-12);
  font-size: var(--bro-schrift-fein-groesse);
  font-weight: var(--bro-schrift-fliesstext-gewicht);
  color: var(--bro-tinte-2);
}
.kf-af-werte b {
  color: var(--bro-tinte-1);
}
.kf-af-spaet b {
  color: var(--bro-warnung);
}
.kf-af-wagen > button {
  grid-area: knopf;
}
.kf-af-warum {
  grid-area: warum;
  display: flex;
  gap: 6px;
  margin: var(--bro-abstand-4) 0 0;
  font-size: var(--bro-schrift-fein-groesse);
  color: var(--bro-akzent);
}
.kf-af-wagen--empfohlen {
  border-color: var(--bro-akzent);
  box-shadow: inset 0 0 0 1px var(--bro-akzent);
  background: var(--bro-akzent-flaeche);
}
.kf-af-fein {
  margin: 14px 0 0;
  font-size: var(--bro-schrift-fein-groesse);
  font-weight: var(--bro-schrift-fein-gewicht);
  letter-spacing: var(--bro-schrift-fein-laufweite);
  color: var(--bro-tinte-2);
}
.kf-af-nein {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
  margin-top: 6px;
}
.kf-af-nein > div {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--bro-schrift-fein-groesse);
  color: var(--bro-tinte-2);
  opacity: 0.85;
}
.kf-af-leer {
  display: flex;
  gap: var(--bro-abstand-12);
  align-items: flex-start;
  padding: var(--bro-abstand-16);
  border: 1px dashed var(--bro-linie-stark);
}
.kf-af-leer p {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  font-size: var(--bro-schrift-klein-groesse);
  color: var(--bro-tinte-2);
}
.kf-af-leer b {
  color: var(--bro-tinte-1);
}
.kf-af-band,
.kf-ls-anruf {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 var(--bro-abstand-16);
  padding: 11px 14px;
  background: var(--bro-akzent-flaeche);
  border: 1px solid color-mix(in srgb, var(--bro-akzent) 25%, var(--bro-linie));
  font-size: 13.5px;
}
.kf-af-band > svg {
  color: var(--bro-akzent);
}
.kf-ls-anruf {
  border-color: color-mix(in srgb, var(--bro-erfolg) 45%, var(--bro-linie));
  background: color-mix(in srgb, var(--bro-erfolg) 9%, var(--bro-flaeche-1));
}
.kf-ls-anruf > svg {
  flex: none;
  color: var(--bro-erfolg);
  animation: kf-ls-puls 1.8s infinite;
}
.kf-ls-anruf > a {
  margin-left: auto;
}
.kf-af-fuss {
  display: flex;
  justify-content: flex-end;
  gap: var(--bro-abstand-8);
  padding: 14px 20px;
  border-top: 1px solid var(--bro-linie);
}
@media (prefers-reduced-motion: reduce) {
  .kf-ls-anruf > svg {
    animation: none;
  }
}
@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (max-height: 479px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (orientation: portrait) {
  .kf-af-rumpf {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* #9456/#9598: Fahrt annehmen nach der Vitala-Demo — eine Spalte: die Karte
   „Telefon“ in der Bauart der Eingangskarte (`kf-auf-…`), darunter die
   Wagenwahl in der Bauart der Leitstandkarte (`kf-ls-…`). Nur Haus-Tokens. */
.kf-an {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-16);
  min-width: 0;
}
.kf-an-formular {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-16);
}
.kf-an-gruppe,
.kf-an-neu {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.kf-an-gruppe > legend,
.kf-an-neu > legend {
  margin-bottom: var(--bro-abstand-4);
  font-weight: var(--bro-schrift-betont-gewicht);
}
.kf-an-neu {
  padding: var(--bro-abstand-12);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
  background: var(--bro-flaeche-0);
}
.kf-an-neu[hidden],
.kf-an-frei[hidden],
.kf-an-klinik[hidden],
.kf-an [data-annahme-ohne-skript][hidden] {
  display: none;
}
.kf-an-frei,
.kf-an-mehr {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
}
.kf-an-mehr > summary {
  cursor: pointer;
  font-size: var(--bro-schrift-klein-groesse);
  color: var(--bro-tinte-2);
}
.kf-an-suche,
.kf-an-reihe,
.kf-an-schnell {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--bro-abstand-8);
}
.kf-an-suche > label,
.kf-an-reihe > label {
  flex: 1 1 12rem;
  min-width: 0;
}
.kf-an-gruppe > button {
  align-self: flex-start;
}
.kf-an-haken {
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-8);
}
.kf-an-treffer {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.kf-an-treffer button {
  width: 100%;
  min-height: var(--bro-beruehrungsflaeche);
  padding: var(--bro-abstand-8);
  border: 1px solid var(--bro-linie);
  background: var(--bro-flaeche-1);
  color: var(--bro-tinte-1);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.kf-an-treffer:empty {
  display: none;
}
.kf-an-treffer b,
.kf-an-treffer small {
  display: block;
}
.kf-an-treffer small,
.kf-an-treffer-leer {
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
}
/* Treffer der Adresssuche auf der Annahme-Seite: dieselbe Zeile wie die
   Vorschlagsliste im Fenster (#10320), als Feld unter dem Suchknopf. */
.kf-an-ortstreffer {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
  background: var(--bro-flaeche-1);
  box-shadow: var(--bro-schatten-menue);
  overflow: hidden;
}
.kf-an-ortstreffer[hidden],
.kf-an-ortstreffer:empty {
  display: none;
}
.kf-an-ortstreffer > li:first-child > button {
  border-top: 0;
}
/* #9780: Die Karte „Telefon“ — der gewählte Fahrgast als eine Zeile, der Tag
   als Knopfgruppe „heute · morgen · übermorgen“, daneben Zeit und Rückfahrt. */
.kf-an-gast {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--bro-abstand-8);
}
.kf-an-gast b,
.kf-an-gast small {
  display: block;
}
.kf-an-gast small {
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
}
.kf-an-wann,
.kf-an-rueck {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--bro-abstand-12);
}
.kf-an-tage {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.kf-an-tage > legend {
  margin-bottom: var(--bro-abstand-4);
}
.kf-an-tag {
  position: relative;
  display: flex;
}
.kf-an-tag input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.kf-an-tag span {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--bro-beruehrungsflaeche);
  padding: 0 var(--bro-abstand-12);
  border: 1px solid var(--bro-linie);
  margin-left: -1px;
  background: var(--bro-flaeche-1);
  color: var(--bro-tinte-1);
  cursor: pointer;
}
.kf-an-tag span small {
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
}
.kf-an-tag input:checked + span {
  background: var(--bro-akzent-flaeche);
  border-color: var(--bro-akzent);
  color: var(--bro-akzent-text);
  position: relative;
}
.kf-an-tag input:focus-visible + span {
  outline: var(--bro-fokus-breite) solid var(--bro-akzent);
  outline-offset: var(--bro-fokus-abstand);
}
.kf-an-anders {
  margin-left: var(--bro-abstand-8);
}
.kf-an-anders[hidden] {
  display: none;
}
.kf-an-verordnung {
  margin: var(--bro-abstand-4) 0 0;
}
.kf-an-verordnung[data-warnung] {
  color: var(--bro-warnung);
}
.kf-auf-warum .kf-auf-warum-knopf,
.kf-auf-warum button {
  margin-top: var(--bro-abstand-8);
}
.kf-an-grund {
  display: flex;
  align-items: flex-start;
  gap: var(--bro-abstand-8);
  font-size: var(--bro-schrift-klein-groesse);
  color: var(--bro-tinte-2);
}
.kf-an-grund .bro-symbol {
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--bro-akzent);
}
.kf-an-weitere > summary,
.kf-an-kartenwahl > summary {
  cursor: pointer;
  font-size: var(--bro-schrift-klein-groesse);
}
.kf-an-weitere > .kf-ls-wahlen {
  margin-left: 0;
}
.kf-an-hinweis {
  margin: var(--bro-abstand-12) 0 0 var(--bro-abstand-32);
}
@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (max-height: 479px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (orientation: portrait) {
  .kf-an-hinweis {
    margin-left: 0;
  }
}
/* #9274: Vitala-Abrechnung; Werte/Abstände aus den gemeinsamen Haus-Tokens. */
.kf-abrechnung {
  min-width: 0;
}
.kf-abrechnung-kopf,
.kf-abrechnung-aktionen,
.kf-abrechnung-filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--bro-abstand-16);
}
.kf-abrechnung-kopf {
  margin-bottom: var(--bro-abstand-24);
}
.kf-abrechnung-kopf h1 {
  margin: var(--bro-abstand-4) 0;
  font-size: var(--bro-schrift-anzeige-groesse);
}
.kf-abrechnung-kopf p {
  margin: 0;
  color: var(--bro-tinte-2);
}
.kf-abrechnung-filter {
  justify-content: flex-start;
  align-items: end;
  margin-bottom: var(--bro-abstand-24);
}
.kf-abrechnung-filter label,
.kf-abrechnung form label {
  display: grid;
  gap: var(--bro-abstand-8);
}
.kf-abrechnung .bro-kennzahlleiste {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.kf-abrechnung-raster {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--bro-abstand-24);
  align-items: start;
}
.kf-abrechnung .bro-karte {
  min-width: 0;
  padding: var(--bro-abstand-24);
}
.kf-abrechnung-tabelle {
  overflow-x: auto;
}
.kf-abrechnung-tabelle td {
  vertical-align: top;
}
.kf-abrechnung-tabelle strong,
.kf-abrechnung-tabelle td > span {
  display: block;
}
.kf-abrechnung-tabelle p {
  margin-top: 0;
}
.kf-abrechnung-tabelle details {
  margin-top: var(--bro-abstand-8);
}
.kf-abrechnung-tabelle summary {
  cursor: pointer;
  color: var(--bro-akzent);
}
.kf-abrechnung-tabelle form {
  display: grid;
  gap: var(--bro-abstand-12);
  min-width: 0;
}
.kf-abrechnung-neben {
  display: grid;
  gap: var(--bro-abstand-24);
}
.kf-abrechnung-regeln {
  display: grid;
  gap: var(--bro-abstand-24);
}
.kf-abrechnung-regeln > div {
  display: grid;
  gap: var(--bro-abstand-8);
}
.kf-abrechnung-regeln progress {
  width: 100%;
  height: var(--bro-abstand-8);
  accent-color: var(--bro-erfolg);
}
.kf-abrechnung-regeln small {
  color: var(--bro-tinte-2);
}
/*
 * „Eigenanteil gekürzt“ als Zeitleiste je Fall (#9897). Vorbild: `.ablauf`
 * der Vitala-Klickdemo (`quelltext-design.md`): links das Datum, daneben ein
 * Quadrat in der Farbe des Stands und eine senkrechte Linie zum nächsten
 * Schritt. Farben und Abstände nur über Tokens.
 */
.kf-eigenanteil-verlauf {
  list-style: none;
  margin: var(--bro-abstand-12) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.kf-eigenanteil-verlauf + .kf-eigenanteil-verlauf {
  border-top: 1px solid var(--bro-linie);
  padding-top: var(--bro-abstand-12);
}
.kf-eigenanteil-verlauf li {
  --kf-stand: var(--bro-tinte-3);
  position: relative;
  display: grid;
  grid-template-columns: calc(var(--bro-abstand-32) + var(--bro-abstand-16)) minmax(0, 1fr);
  gap: var(--bro-abstand-12);
  padding: var(--bro-abstand-8) 0;
}
.kf-eigenanteil-verlauf li[data-stand="fertig"] {
  --kf-stand: var(--bro-erfolg);
}
.kf-eigenanteil-verlauf li[data-stand="laeuft"] {
  --kf-stand: var(--bro-akzent);
}
.kf-eigenanteil-verlauf li::before {
  content: "";
  position: absolute;
  left: calc(calc(var(--bro-abstand-32) + var(--bro-abstand-16)) + var(--bro-abstand-8));
  top: calc(var(--bro-abstand-8) + var(--bro-abstand-4));
  width: var(--bro-abstand-8);
  height: var(--bro-abstand-8);
  background: var(--kf-stand);
}
.kf-eigenanteil-verlauf li::after {
  content: "";
  position: absolute;
  left: calc(calc(var(--bro-abstand-32) + var(--bro-abstand-16)) + var(--bro-abstand-12) - 1px);
  top: calc(var(--bro-abstand-16) + var(--bro-abstand-8));
  bottom: calc(-1 * var(--bro-abstand-4));
  width: 1px;
  background: var(--bro-linie-stark);
}
.kf-eigenanteil-verlauf li:last-child::after {
  display: none;
}
.kf-eigenanteil-verlauf li > div {
  display: flex;
  flex-direction: column;
  padding-left: var(--bro-abstand-16);
  min-width: 0;
}
.kf-eigenanteil-datum {
  font-weight: var(--bro-schrift-betont-gewicht);
  font-variant-numeric: tabular-nums;
  font-size: var(--bro-schrift-klein-groesse);
}
.kf-eigenanteil-verlauf strong {
  font-size: var(--bro-schrift-klein-groesse);
  overflow-wrap: anywhere;
}
.kf-eigenanteil-verlauf small {
  font-size: var(--bro-schrift-fein-groesse);
  color: var(--bro-tinte-2);
}
@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (max-height: 479px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (orientation: portrait) {
  .kf-abrechnung-raster {
    grid-template-columns: minmax(0, 1fr);
  }
  .kf-abrechnung .bro-kennzahlleiste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .kf-abrechnung .bro-karte {
    padding: var(--bro-abstand-16);
  }
  .kf-abrechnung-tabelle table,
  .kf-abrechnung-tabelle tbody,
  .kf-abrechnung-tabelle tr,
  .kf-abrechnung-tabelle td {
    display: block;
    width: auto;
  }
  .kf-abrechnung-tabelle thead {
    display: none;
  }
  .kf-abrechnung-tabelle td {
    border: 0;
    padding: var(--bro-abstand-8) 0;
    overflow-wrap: anywhere;
  }
  .kf-abrechnung-tabelle tr + tr {
    border-top: 1px solid var(--bro-linie-stark);
    padding-top: var(--bro-abstand-16);
  }
}

.kf-abrechnung-links {
  display: grid;
  gap: var(--bro-abstand-16);
  min-width: 0;
}
.kf-abrechnung-zeitraum {
  margin-bottom: var(--bro-abstand-16);
  font-size: var(--bro-schrift-klein-groesse);
  color: var(--bro-tinte-2);
}
.kf-abrechnung-regeln > div {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
  align-items: center;
  font-size: var(--bro-schrift-klein-groesse);
}
.kf-abrechnung-regeln small {
  white-space: nowrap;
}
@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (max-height: 479px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (orientation: portrait) {
  .kf-abrechnung-regeln > div {
    grid-template-columns: minmax(0, 1fr);
  }
}

.kf-eigenanteil-form {
  display: grid;
  gap: var(--bro-abstand-12);
  margin-top: var(--bro-abstand-16);
}
.kf-eigenanteil-form select {
  max-width: 100%;
}

/*
 * Kartenbaustein des Fahrdienstes (#9259) — Umschalter „Übersicht |
 * Straßenkarte“, schematische Übersicht und Straßenkarte. Vorbild:
 * Vitala-Klickdemo, `quelltext-design.md`, „Kartenumschalter und
 * Straßenkarte“ und `.stadtkarte` (Entschieden (Nasri) 15.10.2026, #9256).
 * Farben nur über Tokens; die Farbe eines Haltepunkts kommt als
 * `--kf-farbe` (ein Token-Verweis) aus dem Markup.
 */
.portal-kartenwahl {
  position: relative;
  display: grid;
  gap: var(--bro-abstand-8);
}

.portal-karten-schalter {
  position: absolute;
  top: var(--bro-abstand-8);
  right: var(--bro-abstand-8);
  z-index: 500;
  display: inline-flex;
  border: 1px solid var(--bro-linie-stark);
  background: var(--bro-flaeche-1);
  box-shadow: var(--bro-schatten-menue);
}

.portal-karten-schalter[hidden] {
  display: none;
}

.portal-karten-schalter button {
  border: 0;
  background: transparent;
  color: var(--bro-tinte-2);
  font: inherit;
  font-size: var(--bro-schrift-klein-groesse);
  font-weight: 600;
  padding: var(--bro-abstand-4) var(--bro-abstand-12);
  cursor: pointer;
}

.portal-karten-schalter button[aria-pressed="true"] {
  background: var(--bro-akzent);
  color: var(--bro-akzent-tinte);
}

.portal-karten-schalter button[aria-disabled="true"] {
  color: var(--bro-tinte-3);
  cursor: not-allowed;
}

.portal-karten-koerper[hidden],
.portal-echtkarte[hidden] {
  display: none;
}

.portal-stadtkarte {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--bro-linie);
}

.portal-stadtkarte-land {
  fill: var(--bro-flaeche-0);
}

.portal-stadtkarte-viertel {
  fill: color-mix(in srgb, var(--bro-tinte-2) 9%, var(--bro-flaeche-0));
}

.portal-stadtkarte-viertel-name {
  fill: var(--bro-tinte-2);
  font-weight: 600;
  text-anchor: middle;
}

.portal-stadtkarte-route {
  fill: none;
  stroke: var(--bro-akzent);
  stroke-width: 2.4;
  stroke-linejoin: round;
  opacity: 0.75;
  stroke-dasharray: 6 4;
}

/* Eine schon berechnete Straßenroute (#10644): durchgezogen, nie wie eine Luftlinie. */
.portal-stadtkarte-strassenroute {
  stroke-dasharray: none;
  opacity: 0.9;
}

.portal-stadtkarte-hof rect {
  fill: var(--bro-akzent);
}

.portal-stadtkarte-hof text {
  fill: var(--bro-akzent);
  font-weight: 700;
  text-anchor: middle;
}

.portal-stadtkarte-halt circle {
  fill: var(--kf-farbe, var(--bro-akzent));
  stroke: var(--bro-flaeche-1);
  stroke-width: 2.5;
}

.portal-stadtkarte-halt text {
  fill: var(--bro-flaeche-1);
  font-weight: 700;
  text-anchor: middle;
}

.portal-echtkarte {
  width: 100%;
  aspect-ratio: 600 / 735;
  max-height: 520px;
  min-height: 320px;
  border: 1px solid var(--bro-linie);
  background: var(--bro-flaeche-0);
  font-family: inherit;
}

.portal-echtkarte .leaflet-tile-pane {
  filter: saturate(0.55) brightness(1.03);
}

/* Dunkle Ansicht: die Kacheln abgedunkelt, wie in der Demo — beide Wege des Portals (#9044). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .portal-echtkarte .leaflet-tile-pane {
    filter: invert(1) hue-rotate(180deg) brightness(0.9) saturate(0.4);
  }
}

:root[data-theme="dark"] .portal-echtkarte .leaflet-tile-pane {
  filter: invert(1) hue-rotate(180deg) brightness(0.9) saturate(0.4);
}

.portal-karte-halt-marke span,
.portal-karte-hof-marke span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  font-size: var(--bro-schrift-klein-groesse);
  font-weight: 700;
  color: var(--bro-flaeche-1);
  box-shadow: var(--bro-schatten-menue);
}

.portal-karte-halt-marke span {
  border-radius: var(--bro-radius-rund);
  border: 2.5px solid var(--bro-flaeche-1);
  background: var(--kf-farbe, var(--bro-akzent));
}

.portal-karte-hof-marke span {
  background: var(--bro-akzent);
  color: var(--bro-akzent-tinte);
}

.portal-echtkarte .portal-karte-luftlinie {
  stroke: var(--bro-akzent);
  stroke-opacity: 0.6;
  fill: none;
}

.portal-echtkarte .portal-karte-strassenroute {
  stroke: var(--bro-akzent);
  stroke-opacity: 0.85;
  fill: none;
}

.portal-karten-routeninfo {
  margin: 0;
  color: var(--bro-tinte-2);
}

.portal-karten-routeninfo:empty {
  display: none;
}

.portal-karten-legende {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-12);
  color: var(--bro-tinte-2);
}

.portal-karten-legende i {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: var(--bro-abstand-4);
  border-radius: var(--bro-radius-rund);
  background: var(--kf-farbe);
}

.portal-karte-leer {
  color: var(--bro-tinte-2);
}

/* Ohne Koordinaten gibt es nichts zu überdecken: Der Umschalter steht dann in
   einer eigenen Zeile über dem Hinweis, statt den Satz zu verdecken (#9540). */
.portal-kartenwahl:has(.portal-karte-leer) .portal-karten-schalter {
  position: static;
  justify-self: end;
}

/* Am Tageszettel neben der Tabelle: so breit wie die Karte im Tour-Detail der Demo. */
.krankenfahrt-tageszettel-karte .portal-kartenwahl {
  max-width: 30rem;
  margin-top: var(--bro-abstand-8);
}

.krankenfahrt-tageszettel-karte summary {
  cursor: pointer;
  color: var(--bro-akzent-text);
  font-weight: 600;
}

/*
 * Leaflets eigene Bedienteile in den Farben des Portals (#9259): Leaflets Stil
 * bringt feste Farben mit (`leaflet.generiert.ts`, von der Token-Wache
 * ausgenommen); was davon sichtbar wird, steht hier über Tokens — auch dunkel.
 */
.portal-echtkarte.leaflet-container {
  background: var(--bro-flaeche-0);
  font-family: inherit;
}

.portal-echtkarte .leaflet-bar {
  box-shadow: var(--bro-schatten-menue);
  border-radius: var(--bro-radius-s);
}

.portal-echtkarte .leaflet-bar a,
.portal-echtkarte .leaflet-bar a:hover,
.portal-echtkarte .leaflet-bar a:focus {
  background-color: var(--bro-flaeche-1);
  border-bottom-color: var(--bro-linie);
  color: var(--bro-tinte-1);
  border-radius: var(--bro-radius-s);
}

.portal-echtkarte .leaflet-bar a.leaflet-disabled {
  background-color: var(--bro-flaeche-0);
  color: var(--bro-tinte-3);
}

.portal-echtkarte .leaflet-control-attribution {
  background: var(--bro-flaeche-1);
  color: var(--bro-tinte-2);
}

/*
 * Zeiten und Lohn im Fahrdienst (#9267). Vorbild: die Vitala-Klickdemo,
 * `docs/befunde/2026-10-15-krankenfahrt-nach-demo/quelltext-design.md`
 * (`.kz-leiste`, `.sim-zone`, `.sim-skala`, `.sim-ergebnis`, `.formel`,
 * `.zr-leiste`), mit den Tokens des Portals statt der Demo-Werte. Die Reiter
 * kommen aus `reiterLeiste` in `@bro/ui` (#9599).
 */
.kf-zl-ansicht {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-16);
}

/* #10819: gemeinsame Box bleibt auch mit breiten Lohntabellen im Seitenraster. */
.kf-zl-modern-box {
  min-width: 0;
}

.kf-zl-modern-box > .bb-box-inhalt {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--bro-abstand-16);
}

.kf-zl-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--bro-abstand-12);
}

.kf-zl-filter label {
  display: grid;
  gap: var(--bro-abstand-4);
  min-width: 0;
}

.kf-zl-dezent {
  color: var(--bro-tinte-2);
}

.kf-zl-raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--bro-abstand-16);
}

@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (max-height: 479px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (orientation: portrait) {
  .kf-zl-raster {
    grid-template-columns: minmax(0, 1fr);
  }
}

.kf-zl-karte {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
}

.kf-zl-karten-titel {
  margin: var(--bro-abstand-4) 0 2px;
  font-size: var(--bro-schrift-betont-groesse);
  line-height: var(--bro-schrift-betont-zeilenhoehe);
}

.kf-zl-zonen {
  position: relative;
  display: flex;
  height: var(--bro-abstand-32);
  margin-top: var(--bro-abstand-12);
  font-size: var(--bro-schrift-fein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
}

.kf-zl-zone {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  white-space: nowrap;
}

.kf-zl-zone--rot {
  background: var(--bro-fehler-flaeche);
  color: var(--bro-fehler);
}

.kf-zl-zone--blau {
  background: var(--bro-akzent-flaeche);
  color: var(--bro-akzent-text);
}

.kf-zl-zone--grau {
  background: var(--bro-flaeche-0);
  color: var(--bro-tinte-2);
}

.kf-zl-zone--lila {
  background: color-mix(in srgb, var(--bro-modul-personal) 16%, var(--bro-flaeche-1));
  color: var(--bro-modul-personal);
}

.kf-zl-zonen i {
  position: absolute;
  top: calc(-1 * var(--bro-abstand-4));
  bottom: calc(-1 * var(--bro-abstand-4));
  width: 3px;
  margin-left: -1.5px;
  background: var(--bro-tinte-1);
}

.kf-zl-skala {
  position: relative;
  height: var(--bro-abstand-16);
  margin-top: var(--bro-abstand-4);
  font-size: var(--bro-schrift-fein-groesse);
  color: var(--bro-tinte-2);
}

.kf-zl-skala span {
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
}

.kf-zl-skala span:first-child {
  transform: none;
}

.kf-zl-skala span:last-child {
  transform: translateX(-100%);
}

.kf-zl-regler {
  width: 100%;
  margin: var(--bro-abstand-12) 0 var(--bro-abstand-4);
  accent-color: var(--bro-akzent);
}

.kf-zl-wert {
  font-variant-numeric: tabular-nums;
  color: var(--bro-tinte-2);
}

.kf-zl-ergebnis {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 4rem;
  padding: var(--bro-abstand-12) var(--bro-abstand-16);
  background: var(--bro-flaeche-0);
}

.kf-zl-ergebnis b {
  font-size: var(--bro-schrift-titel-groesse);
  line-height: var(--bro-schrift-titel-zeilenhoehe);
}

.kf-zl-ergebnis span,
.kf-zl-formel-ergebnis span {
  color: var(--bro-tinte-2);
}

.kf-zl-rot {
  color: var(--bro-fehler);
}

.kf-zl-warn {
  color: var(--bro-warnung);
}

.kf-zl-formel {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--bro-abstand-12);
  margin-top: var(--bro-abstand-12);
}

.kf-zl-feldgruppe {
  display: flex;
  flex-direction: column;
  width: 9rem;
}

.kf-zl-op {
  padding-bottom: var(--bro-abstand-8);
  color: var(--bro-tinte-2);
  font-weight: var(--bro-schrift-titel-gewicht);
}

.kf-zl-formel-ergebnis {
  display: flex;
  flex-direction: column;
  padding: var(--bro-abstand-4) var(--bro-abstand-12);
  background: var(--bro-akzent-flaeche);
}

.kf-zl-formel-ergebnis b {
  font-size: var(--bro-schrift-titel-groesse);
  color: var(--bro-akzent-text);
}

.kf-zl-leiste {
  display: grid;
  gap: 2px;
  margin-top: var(--bro-abstand-12);
}

.kf-zl-tag {
  height: var(--bro-abstand-24);
  background: var(--bro-flaeche-0);
}

.kf-zl-tag--vorbei {
  background: color-mix(in srgb, var(--bro-modul-personal) 45%, var(--bro-flaeche-1));
}

.kf-zl-tag--heute {
  background: var(--bro-modul-personal);
}

.kf-zl-tag--sonntag {
  opacity: 0.5;
}

.kf-zl-ausprobieren-knopf {
  margin-top: var(--bro-abstand-12);
}

.kf-zl-regelform {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--bro-abstand-12);
  align-items: end;
  margin-top: var(--bro-abstand-12);
}

.kf-zl-regelform label,
.kf-zl-stufe label {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
}

.kf-zl-ist-eintrag {
  margin-top: var(--bro-abstand-12);
  padding-top: var(--bro-abstand-12);
  border-top: 1px solid var(--bro-linie);
}

.kf-zl-ist-kopf {
  margin: 0;
}

.kf-zl-stufen {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  margin: 0;
  padding: var(--bro-abstand-12);
  border: 1px solid var(--bro-linie);
}

.kf-zl-stufe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--bro-abstand-12);
}

.kf-zl-recht {
  margin-top: var(--bro-abstand-12);
  padding: var(--bro-abstand-12);
  background: var(--bro-hinweis-flaeche);
}

.kf-zl-tabellenkarte {
  overflow-x: auto;
  padding: 0;
}

.kf-zl-rechts {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.kf-zl-fett {
  font-weight: var(--bro-schrift-betont-gewicht);
}

.kf-zl-zeile {
  display: inline-flex;
  align-items: center;
  gap: var(--bro-abstand-8);
}

.kf-zl-bild {
  flex: none;
}

.kf-zl-echt {
  color: var(--bro-tinte-3);
}

.kf-zl-hinweis {
  display: block;
  color: var(--bro-warnung);
}

.kf-zl-monat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-16);
}

.kf-zl-fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--bro-abstand-12);
}

.kf-zl-csv {
  overflow-x: auto;
  margin: var(--bro-abstand-8) 0;
  padding: var(--bro-abstand-12);
  background: var(--bro-flaeche-0);
  font-size: var(--bro-schrift-fein-groesse);
  white-space: pre;
}

.kf-zl-abwesenheit {
  display: inline-block;
  padding: 2px var(--bro-abstand-8);
  border-left: 3px solid var(--bro-linie-stark);
  background: var(--bro-flaeche-0);
  font-size: var(--bro-schrift-klein-groesse);
}

.kf-zl-abwesenheit--krank {
  border-left-color: var(--bro-fehler);
}

.kf-zl-abwesenheit--urlaub {
  border-left-color: var(--bro-akzent);
}

.kf-zl-abwesenheit--unbezahlt {
  border-left-color: var(--bro-warnung);
}

.kf-zl-nur-vorlese {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/*
 * Der gemeinsame Bild-Helfer des Fahrdienstes (#9268, `person-bild.ts`):
 * Foto oder Initialen im Kreis, der Name als Schild beim Darauffahren.
 * Vorbild `.ma-bild` der Vitala-Klickdemo (`quelltext-design.md`, „Fahrerfotos
 * und Name beim Darauffahren“), Farben aus den Tokens.
 */
.kf-person-bild {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--bro-abstand-32);
  height: var(--bro-abstand-32);
  border-radius: var(--bro-radius-rund);
  background: color-mix(in srgb, var(--bro-modul-personal) 15%, var(--bro-flaeche-1));
  color: var(--bro-modul-personal);
  font-size: var(--bro-schrift-fein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
  vertical-align: middle;
}
.kf-person-bild--klein {
  width: var(--bro-abstand-24);
  height: var(--bro-abstand-24);
}
.kf-person-bild--gross {
  width: calc(var(--bro-abstand-32) + var(--bro-abstand-24));
  height: calc(var(--bro-abstand-32) + var(--bro-abstand-24));
  font-size: var(--bro-schrift-titel-groesse);
}
.kf-person-bild--foto {
  background: var(--bro-flaeche-0);
}
.kf-person-bild img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--bro-radius-rund);
  object-fit: cover;
}
.kf-person-bild[data-name]:hover::after {
  content: attr(data-name);
  position: absolute;
  bottom: calc(100% + var(--bro-abstand-8));
  left: 50%;
  z-index: 900;
  padding: var(--bro-abstand-4) var(--bro-abstand-8);
  transform: translateX(-50%);
  background: var(--bro-tinte-1);
  color: var(--bro-flaeche-1);
  box-shadow: var(--bro-schatten-menue);
  font-size: var(--bro-schrift-klein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
  white-space: nowrap;
  pointer-events: none;
}
.kf-person-bilder {
  display: inline-flex;
  vertical-align: middle;
}
.kf-person-bilder .kf-person-bild + .kf-person-bild {
  margin-left: calc(-1 * var(--bro-abstand-8));
  box-shadow: 0 0 0 2px var(--bro-flaeche-1);
}

/*
 * Die Seite „Mitarbeiter“ (#9268) nach `SEITEN.team` der Demo: Reiter, Kartei
 * mit Liste links und Inhalt rechts, Wochenansicht der Abwesenheit und die
 * Dienstanweisungen mit Lesestand.
 */
.kf-ma-reiter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-8);
  margin-bottom: var(--bro-abstand-16);
  border-bottom: 1px solid var(--bro-linie);
}
.kf-ma-reiter a {
  padding: var(--bro-abstand-12) var(--bro-abstand-16);
  border-bottom: 2px solid transparent;
  color: var(--bro-tinte-2);
  text-decoration: none;
}
.kf-ma-reiter a[aria-current="page"] {
  border-bottom-color: var(--bro-akzent);
  color: var(--bro-tinte-1);
  font-weight: var(--bro-schrift-betont-gewicht);
}
.kf-ma-kartei {
  display: grid;
  grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
  min-height: 36rem;
  border: 1px solid var(--bro-linie);
  background: var(--bro-flaeche-1);
}
.kf-ma-liste {
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-height: 48rem;
  padding: var(--bro-abstand-8);
  overflow-y: auto;
  border-right: 1px solid var(--bro-linie);
}
.kf-ma-liste a {
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-8);
  padding: var(--bro-abstand-8) var(--bro-abstand-12);
  color: var(--bro-tinte-1);
  text-decoration: none;
}
.kf-ma-liste a:hover {
  background: var(--bro-flaeche-0);
}
.kf-ma-liste a[aria-current="true"] {
  background: var(--bro-akzent-flaeche);
}
.kf-ma-liste span:not(.kf-person-bild) {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}
.kf-ma-liste b {
  font-weight: var(--bro-schrift-betont-gewicht);
}
.kf-ma-liste small,
.kf-ma-dezent {
  color: var(--bro-tinte-2);
}
.kf-ma-liste-titel {
  margin: var(--bro-abstand-12) var(--bro-abstand-12) var(--bro-abstand-4);
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-fein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
}
.kf-ma-eigene {
  margin-bottom: var(--bro-abstand-16);
}
.kf-ma-frist {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--bro-abstand-16);
  height: var(--bro-abstand-16);
  border-radius: var(--bro-radius-rund);
  color: var(--bro-flaeche-1);
  font-size: var(--bro-schrift-fein-groesse);
  font-style: normal;
  font-weight: var(--bro-schrift-betont-gewicht);
}
.kf-ma-frist--warnung {
  background: var(--bro-warnung);
}
.kf-ma-frist--fehler {
  background: var(--bro-fehler);
}
.kf-ma-inhalt {
  min-width: 0;
  padding: var(--bro-abstand-24);
}
.kf-ma-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-16);
  margin-bottom: var(--bro-abstand-16);
}
.kf-ma-kopf > div {
  flex: 1;
  min-width: 0;
}
.kf-ma-kennzahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 1px;
  margin-bottom: var(--bro-abstand-24);
  border: 1px solid var(--bro-linie);
  background: var(--bro-linie);
}
.kf-ma-kennzahl {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: var(--bro-abstand-16) var(--bro-abstand-24);
  background: var(--bro-flaeche-1);
}
.kf-ma-kennzahl b {
  font-size: var(--bro-schrift-anzeige-groesse);
  line-height: var(--bro-schrift-anzeige-zeilenhoehe);
  font-weight: var(--bro-schrift-anzeige-gewicht);
  font-variant-numeric: tabular-nums;
}
.kf-ma-kennzahl span {
  font-weight: var(--bro-schrift-betont-gewicht);
}
.kf-ma-kennzahl small {
  color: var(--bro-tinte-2);
}
.kf-ma-raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--bro-abstand-24);
}
.kf-ma-werte {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--bro-abstand-8) var(--bro-abstand-16);
  margin: var(--bro-abstand-8) 0 0;
  font-size: var(--bro-schrift-klein-groesse);
}
.kf-ma-werte dt {
  color: var(--bro-tinte-2);
}
.kf-ma-werte dd {
  margin: 0;
}
.kf-ma-warum {
  margin-top: var(--bro-abstand-16);
  padding: var(--bro-abstand-12) var(--bro-abstand-16);
  border-left: 3px solid var(--bro-akzent);
  background: var(--bro-akzent-flaeche);
}
.kf-ma-feld + .kf-ma-feld,
.kf-ma-raster + .kf-ma-feld,
.kf-ma-warum + .kf-ma-feld {
  margin-top: var(--bro-abstand-16);
}
.kf-ma-abw-liste,
.kf-ma-abw-eintraege,
.kf-ma-leser {
  margin: var(--bro-abstand-8) 0;
  padding: 0;
  list-style: none;
}
.kf-ma-abw-eintraege > li + li {
  margin-top: var(--bro-abstand-16);
  padding-top: var(--bro-abstand-16);
  border-top: 1px solid var(--bro-linie);
}
.kf-ma-abw {
  display: inline-flex;
  padding: 2px var(--bro-abstand-8);
  border-left: 3px solid var(--bro-linie-stark);
  background: var(--bro-flaeche-0);
  font-size: var(--bro-schrift-klein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
}
.kf-ma-abw--krank {
  border-left-color: var(--bro-fehler);
  color: var(--bro-fehler);
}
.kf-ma-abw--urlaub {
  border-left-color: var(--bro-akzent);
  color: var(--bro-akzent-text);
}
.kf-ma-abw--schulung {
  /* Demo --abw-schulung: semantischer Warnfarb-Token für beide Farbschemen. */
  border-left-color: var(--bro-warnung);
  color: var(--bro-warnung);
}
.kf-ma-abw--unbezahlt {
  border-left-color: var(--bro-warnung);
}
/* Urlaubsantrag (#9860, Demo `abwesenheitHTML`); Person und Liste stehen bei
   „Offene Anträge“ (#9859) weiter unten.
   Demo `.warum`: Symbol links neben der ersten Zeile, Text daneben. */
.kf-ma-warum--symbol {
  display: flex;
  align-items: flex-start;
  gap: var(--bro-abstand-8);
}
.kf-ma-warum--symbol > .bro-symbol {
  flex: none;
  margin-top: 0.15em;
  color: var(--bro-akzent-text);
}
.kf-ma-warum--symbol > p {
  margin: 0;
}
.kf-ma-antrag-knoepfe {
  display: flex;
  gap: var(--bro-abstand-8);
  margin-top: var(--bro-abstand-12);
}
.kf-ma-antrag-knoepfe .bro-knopf {
  display: inline-flex;
  align-items: center;
  gap: var(--bro-abstand-4);
}
.kf-ma-seite-rechts {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
  align-items: start;
  gap: var(--bro-abstand-16);
}
.kf-ma-stapel {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-16);
  min-width: 0;
}
.kf-ma-tabelle-rollen {
  overflow-x: auto;
}
.kf-ma-woche {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--bro-schrift-klein-groesse);
}
.kf-ma-woche th,
.kf-ma-woche td {
  padding: var(--bro-abstand-8);
  border-bottom: 1px solid var(--bro-linie);
  text-align: center;
  white-space: nowrap;
}
.kf-ma-woche th:first-child,
.kf-ma-woche td:first-child {
  text-align: left;
}
.kf-ma-woche .kf-ma-heute {
  background: var(--bro-akzent-flaeche);
}
/* Die Wochenwahl klein im Kopf der ersten Spalte (#9859): ‹ Woche 42 ›. */
.kf-ma-woche-nav {
  display: inline-flex;
  align-items: center;
  gap: var(--bro-abstand-4);
}
.kf-ma-woche-nav a {
  padding: 0 var(--bro-abstand-4);
  color: var(--bro-tinte-2);
  text-decoration: none;
}
.kf-ma-woche-nav a:hover {
  color: var(--bro-tinte-1);
}
/* Ein Eintrag der Tafel ist ein Link: Klick öffnet rechts „Abwesenheit ändern“. */
a.kf-ma-abw {
  text-decoration: none;
}
a.kf-ma-abw:hover,
a.kf-ma-abw[aria-current="true"] {
  outline: var(--bro-fokus-breite) solid var(--bro-akzent);
  outline-offset: var(--bro-fokus-abstand);
}
.kf-ma-wirkung {
  margin: var(--bro-abstand-12) 0 0;
}
.kf-ma-antraege {
  margin: var(--bro-abstand-8) 0 var(--bro-abstand-16);
  padding: 0;
  list-style: none;
}
.kf-ma-antrag + .kf-ma-antrag {
  margin-top: var(--bro-abstand-16);
  padding-top: var(--bro-abstand-16);
  border-top: 1px solid var(--bro-linie);
}
.kf-ma-antrag-person {
  margin: var(--bro-abstand-8) 0 var(--bro-abstand-12);
}
.kf-ma-antrag-knoepfe {
  justify-content: flex-end;
}
/* „Abwesenheit eintragen“: eingeklappt ein Knopf, offen das Formular darunter. */
.kf-ma-eintragen > summary {
  list-style: none;
}
.kf-ma-eintragen > summary::-webkit-details-marker {
  display: none;
}
.kf-ma-eintragen[open] > summary {
  margin-bottom: var(--bro-abstand-12);
}
.kf-ma-klein {
  font-size: var(--bro-schrift-klein-groesse);
}
.kf-ma-klein .bro-knopf {
  padding: var(--bro-abstand-4) var(--bro-abstand-8);
  font-size: var(--bro-schrift-klein-groesse);
}
.kf-ma-text-auf {
  margin-right: auto;
}
.kf-ma-text-auf summary {
  color: var(--bro-tinte-2);
  cursor: pointer;
}
.kf-ma-symbolknopf {
  padding: var(--bro-abstand-8);
  color: var(--bro-tinte-2);
}
.kf-ma-leiste {
  display: flex;
  justify-content: flex-end;
}
/*
 * Seitenblatt „Neue Anweisung“ (#9859), dieselbe Bauart wie „So funktioniert
 * es“ in `@bro/ui`: natives <details>, offen rückt das <summary> als Kreuz in
 * die Ecke des Blatts.
 */
.kf-ma-blatt-knopf {
  list-style: none;
}
.kf-ma-blatt-knopf::-webkit-details-marker {
  display: none;
}
.kf-ma-blatt-auf,
.kf-ma-blatt-zu {
  display: inline-flex;
  align-items: center;
  gap: var(--bro-abstand-8);
}
.kf-ma-blatt-zu,
.kf-ma-blatt[open] .kf-ma-blatt-auf {
  display: none;
}
.kf-ma-blatt[open] .kf-ma-blatt-zu {
  display: inline-flex;
}
.kf-ma-vorlese {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.kf-ma-blatt[open] .kf-ma-blatt-knopf {
  position: fixed;
  top: var(--bro-abstand-16);
  right: var(--bro-abstand-16);
  z-index: 59;
  padding: var(--bro-abstand-8);
  background: transparent;
  color: var(--bro-tinte-2);
  border-color: transparent;
}
.kf-ma-blatt-inhalt {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 58;
  width: min(calc(var(--bro-abstand-32) * 14), 100%);
  overflow-y: auto;
  padding: var(--bro-abstand-24) var(--bro-abstand-24) var(--bro-abstand-32);
  background: var(--bro-flaeche-1);
  border-left: 1px solid var(--bro-linie);
  box-shadow: var(--bro-schatten-dialog);
  text-align: left;
}
.kf-ma-blatt-inhalt h2 {
  margin: 0 0 var(--bro-abstand-16);
  padding-right: var(--bro-abstand-32);
}
.kf-ma-zeile {
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-8);
}
.kf-ma-rechts {
  margin-left: auto;
}
.kf-ma-formular {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
}
.kf-ma-formular label {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
}
.kf-ma-aendern {
  margin-top: var(--bro-abstand-8);
}
.kf-ma-aendern form + form {
  margin-top: var(--bro-abstand-8);
}
.kf-ma-fortschritt {
  display: block;
  width: 100%;
  height: var(--bro-abstand-8);
  margin: var(--bro-abstand-12) 0 var(--bro-abstand-4);
  border: 0;
  background: var(--bro-flaeche-0);
  appearance: none;
}
.kf-ma-fortschritt::-webkit-progress-bar {
  background: var(--bro-flaeche-0);
}
.kf-ma-fortschritt::-webkit-progress-value {
  background: var(--bro-erfolg);
}
.kf-ma-fortschritt::-moz-progress-bar {
  background: var(--bro-erfolg);
}
.kf-ma-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-8);
  margin-top: var(--bro-abstand-12);
}
.kf-ma-text {
  white-space: pre-line;
}
.kf-ma-wahlen {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: var(--bro-abstand-4);
  margin-top: var(--bro-abstand-8);
}
.kf-ma-wahl {
  flex-direction: row;
  align-items: center;
}
.kf-ma-app-anweisung {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  margin-bottom: var(--bro-abstand-16);
  border-left: 3px solid var(--bro-warnung);
}
.kf-ma-app-marke {
  color: var(--bro-warnung);
  font-size: var(--bro-schrift-klein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
}

@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (max-height: 479px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (orientation: portrait) {
  .kf-ma-kartei,
  .kf-ma-raster,
  .kf-ma-seite-rechts {
    grid-template-columns: minmax(0, 1fr);
  }
  .kf-ma-liste {
    max-height: 14rem;
    border-right: 0;
    border-bottom: 1px solid var(--bro-linie);
  }
  .kf-ma-inhalt {
    padding: var(--bro-abstand-16);
  }
}

/*
 * Planung nach Regeln (#9260). Die fünf Planungsangaben einer Fahrt stehen in
 * der Annahme und auf der Fahrt-Seite in derselben Feldgruppe: nebeneinander,
 * solange Platz ist, am Handy untereinander.
 */
.portal-planungsangaben {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--bro-abstand-8) var(--bro-abstand-16);
  min-width: 0;
  margin: 0 0 var(--bro-abstand-12);
  padding: var(--bro-abstand-12) var(--bro-abstand-16) var(--bro-abstand-16);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
}

.portal-planungsangaben > legend {
  padding: 0 var(--bro-abstand-4);
  font-weight: var(--bro-schrift-betont-gewicht);
}

.portal-planungsangaben > label {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
}

/* „Es gilt: …“ — was die Planung aus Eintrag und Vorgaben gerade rechnet. */
.portal-planungsangaben-geltend {
  margin: var(--bro-abstand-8) 0 var(--bro-abstand-12);
  padding: var(--bro-abstand-8) var(--bro-abstand-12);
  border-left: 3px solid var(--bro-akzent);
  border-radius: var(--bro-radius-s);
  background: var(--bro-flaeche-1);
}

/* Ausstattungskatalog: je Transportart ein Ankreuzfeld, mittig unter dem Kopf. */
.portal-planungsregeln-katalog :is(td, thead th:not(:first-child)) {
  text-align: center;
}

/* Ganzseitiger erlaubter Team-Bestand (#9358), unabhängig vom Stapel im Kopf. */
.portal-team-presence-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  gap: var(--bro-abstand-16);
}
.portal-team-presence-karte {
  padding: var(--bro-abstand-16);
  overflow-wrap: anywhere;
}
.portal-team-presence-person {
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-12);
}

/* #9360: Sieben Tage auf großen Flächen, Karten stapeln sich auf schmalen. */
.portal-schichtwoche {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--bro-abstand-8);
  margin-block: var(--bro-abstand-16);
}
.portal-schichtwoche > section {
  min-width: 0;
  overflow-wrap: anywhere;
}
@media (min-width: 768px) and (max-width: 1279px) and (min-height: 480px) and (orientation: landscape) {
  .portal-schichtwoche {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (max-height: 479px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (orientation: portrait) {
  .portal-schichtwoche {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* #9224: Sechs Kalenderwochen, funktionale Farben aus den v10-Tokens. */
#kalender-monat nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--bro-abstand-8);
}
.gf-kal-scroll {
  overflow-x: auto;
}
.gf-kal-raster {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}
.gf-kal-raster td {
  vertical-align: top;
  height: 7rem;
  border: 1px solid var(--bro-linie);
  padding: var(--bro-abstand-4);
}
.gf-kal-raster th {
  text-align: center;
}
.gf-kal-raster [aria-current="date"] {
  outline: 2px solid var(--bro-akzent);
  outline-offset: -2px;
}
.gf-kal-rand {
  background: var(--bro-flaeche-1);
}
.gf-kal-termin {
  display: block;
  overflow-wrap: anywhere;
  border-inline-start: 3px solid currentColor;
  margin-block: var(--bro-abstand-4);
  padding: var(--bro-abstand-4);
  touch-action: none;
  user-select: none;
}
.gf-kal-erfolg {
  color: var(--bro-erfolg);
}
.gf-kal-akzent {
  color: var(--bro-akzent);
}
.gf-kal-warnung {
  color: var(--bro-warnung);
}
.gf-kal-neutral {
  color: var(--bro-tinte-2);
}

/*
 * Privatfahrt nach der Vitala-Klickdemo (#9271, Dach #9256): `.raster.seite-rechts`,
 * `.pf-felder`, `.pf-summe`, `.pf-pos`, `.pf-knoepfe` aus `quelltext-design.md`.
 * Farben, Schrift, Abstände und Umbrüche ausschließlich über Haus-Tokens; die
 * rechte Spalte mit 320px ist der Wert der Demo (Gestalt, keine Farbe). Die
 * Demo bricht bei 1280px und 760px um; hier die Gerätegruppen des Hauses.
 */
.kf-pf-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--bro-abstand-16);
  align-items: start;
}
.kf-pf-felder {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--bro-abstand-12) var(--bro-abstand-16);
}
.kf-pf-felder label {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
  font-size: var(--bro-schrift-klein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
  color: var(--bro-tinte-2);
  min-width: 0;
}
.kf-pf-felder .kf-pf-breit {
  grid-column: 1 / -1;
}
.kf-pf-felder .kf-pf-haken {
  flex-direction: row;
  align-items: center;
  gap: var(--bro-abstand-8);
  color: var(--bro-tinte-1);
}
.kf-pf-haken input {
  width: var(--bro-abstand-16);
  height: var(--bro-abstand-16);
  accent-color: var(--bro-akzent);
}
.kf-pf-regler {
  width: 100%;
  margin: var(--bro-abstand-4) 0 0;
  accent-color: var(--bro-akzent);
}
/* Die Spur der Schieberegler kommt aus den Tokens, nicht vom Browser: Mit
   `accent-color` allein bleibt der ungefüllte Teil im Dunkeln fast weiß und
   fällt aus der Fläche (Abnahme gegen die Klickdemo, #9599). Die Füllung bis
   zum Griff fehlt dann in Chromium; der Wert steht ohnehin daneben. */
.kf-zl-regler,
.kf-pf-regler {
  appearance: none;
  height: var(--bro-abstand-4);
  border-radius: var(--bro-abstand-4);
  background: var(--bro-linie);
}
.kf-zl-regler::-webkit-slider-thumb,
.kf-pf-regler::-webkit-slider-thumb {
  appearance: none;
  width: var(--bro-abstand-16);
  height: var(--bro-abstand-16);
  border: 0;
  border-radius: 50%;
  background: var(--bro-akzent);
}
.kf-zl-regler::-moz-range-thumb,
.kf-pf-regler::-moz-range-thumb {
  width: var(--bro-abstand-16);
  height: var(--bro-abstand-16);
  border: 0;
  border-radius: 50%;
  background: var(--bro-akzent);
}
.kf-zl-regler::-moz-range-progress,
.kf-pf-regler::-moz-range-progress {
  height: var(--bro-abstand-4);
  border-radius: var(--bro-abstand-4);
  background: var(--bro-akzent);
}
.kf-pf-ergebnis .kf-pf-summe {
  font-size: var(--bro-schrift-anzeige-groesse);
  line-height: var(--bro-schrift-anzeige-zeilenhoehe);
  font-weight: var(--bro-schrift-anzeige-gewicht);
  font-variant-numeric: tabular-nums;
  margin: var(--bro-abstand-4) 0 var(--bro-abstand-4);
  color: var(--bro-tinte-1);
}
.kf-pf-hinweis {
  color: var(--bro-tinte-2);
}
.kf-pf-pos {
  margin-top: var(--bro-abstand-12);
  font-size: var(--bro-schrift-klein-groesse);
}
.kf-pf-betrag {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.kf-pf-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-8);
  margin-top: var(--bro-abstand-16);
  align-items: center;
}

/* Die Karte zur gerechneten Fahrt (#10644): unter Preis und Knöpfen, volle Breite. */
.kf-pf-karte {
  display: grid;
  gap: var(--bro-abstand-8);
  margin-top: var(--bro-abstand-16);
  min-width: 0;
}
/* #10817: derselbe echte Rechner in der nativen Modern-Formularschublade.
   Lange Namen und Berechnungen bleiben innerhalb der schmalen Innenfläche. */
html[data-design="modern"] .kf-pf-detail {
  min-width: 0;
  overflow-wrap: anywhere;
}
html[data-design="modern"] .kf-pf-detail .kf-pf-raster > * {
  min-width: 0;
}
.kf-pf-stapel {
  display: grid;
  align-content: start;
  gap: var(--bro-abstand-16);
}
.kf-pf-mail {
  display: grid;
  gap: var(--bro-abstand-8);
}
.kf-pf-regeln {
  display: grid;
  gap: var(--bro-abstand-16);
}
@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (max-height: 479px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (orientation: portrait), (min-width: 768px) and (max-width: 1279px) and (min-height: 480px) and (orientation: landscape) {
  .kf-pf-raster {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (max-height: 479px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (orientation: portrait) {
  .kf-pf-felder {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------------------------------------------------------------------------
 * Wagenhandy (#9396): Koppeln, „Wer fährt?“, PIN. Vorbild ist die
 * Vitala-Klickdemo (quelltext-app.md `appRumpf` Bildschirm `start`,
 * Maße aus quelltext-design.md `.app-*`), umgesetzt mit Tokens. Handy zuerst:
 * eine schmale Spalte, große Kacheln und Knöpfe.
 * ------------------------------------------------------------------------- */
/* Seit #10273 nach der Leinwand „Demo Fahrdienst“, Baustein `FahrerHandy`:
 * Kopf oben angeheftet, Rumpf als eigene Spalte, Reiter unten. Am Handy über
 * die ganze Breite, am Rechner dieselbe Spalte mittig. */
.portal-wagenhandy {
  min-height: 100vh;
  display: flex;
  justify-content: center;
}

.portal-wagenhandy-buehne {
  width: 100%;
  max-width: 26rem;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bro-flaeche-0);
}

.portal-wagenhandy-kopf {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-12);
  padding: var(--bro-abstand-12) var(--bro-abstand-16);
  border-bottom: 1px solid var(--bro-linie);
  background: var(--bro-flaeche-1);
}

.portal-wagenhandy-kopf-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.portal-wagenhandy-kopf-text > * {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-wagenhandy-kopf-zusatz {
  color: var(--bro-tinte-2);
}

.portal-wagenhandy-logo {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--bro-abstand-32);
  height: var(--bro-abstand-32);
  border-radius: var(--bro-radius-m);
  background: var(--bro-akzent-flaeche);
  color: var(--bro-akzent-text);
}

.portal-wagenhandy-rumpf {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
  padding: var(--bro-abstand-16);
}

.portal-wagenhandy-titel {
  text-align: center;
  font-size: var(--bro-schrift-titel-groesse);
  font-weight: var(--bro-schrift-titel-gewicht);
  margin: var(--bro-abstand-12) 0 var(--bro-abstand-4);
}

.portal-wagenhandy-wer {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--bro-abstand-8);
}

.portal-wagenhandy-person {
  width: 100%;
  min-height: var(--bro-beruehrungsflaeche);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--bro-abstand-4);
  padding: var(--bro-abstand-16) var(--bro-abstand-8);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
  background: var(--bro-flaeche-1);
  color: var(--bro-tinte-1);
  font: inherit;
  cursor: pointer;
}

.portal-wagenhandy-person:hover,
.portal-wagenhandy-person:focus-visible {
  border-color: var(--bro-akzent);
  background: var(--bro-akzent-flaeche);
}

.portal-wagenhandy-person:focus-visible {
  outline: var(--bro-fokus-breite) solid var(--bro-akzent);
  outline-offset: var(--bro-fokus-abstand);
}

.portal-wagenhandy-person small {
  display: inline-flex;
  align-items: center;
  gap: var(--bro-abstand-4);
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
}

.portal-wagenhandy-person--gesperrt {
  cursor: not-allowed;
  border-style: dashed;
  color: var(--bro-tinte-3);
}

.portal-wagenhandy-person--gesperrt:hover {
  border-color: var(--bro-linie);
  background: var(--bro-flaeche-1);
}

.portal-wagenhandy-bild {
  width: var(--bro-abstand-32);
  height: var(--bro-abstand-32);
  border-radius: var(--bro-radius-rund);
  padding: var(--bro-abstand-8);
  box-sizing: content-box;
}

.portal-wagenhandy-bild--gross {
  padding: var(--bro-abstand-12);
}

.portal-wagenhandy-hinweis {
  text-align: center;
  color: var(--bro-tinte-2);
  padding: 0 var(--bro-abstand-8);
}

.portal-wagenhandy-leer {
  text-align: center;
  padding: var(--bro-abstand-24) var(--bro-abstand-16);
  border: 1px dashed var(--bro-linie-stark);
  border-radius: var(--bro-radius-m);
}

/* #9265: umgeplant, aber über dieses Handy noch eingestempelt — nur „Gehen“. */
.portal-wagenhandy-noch {
  display: grid;
  gap: var(--bro-abstand-8);
  text-align: center;
}

.portal-wagenhandy-karte {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
}

.portal-wagenhandy-mitte {
  align-items: center;
  text-align: center;
}

.portal-wagenhandy-karte.portal-wagenhandy-angemeldet {
  flex-direction: row;
  align-items: center;
  gap: var(--bro-abstand-12);
}

.portal-wagenhandy-angemeldet-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.portal-wagenhandy-angemeldet b,
.portal-wagenhandy-voll {
  display: inline-flex;
  align-items: center;
  gap: var(--bro-abstand-8);
}

/* „Lager bestellen“ am Wagenhandy (#9273): `.app-artikel` und `.okkasten`
   der Demo (quelltext-design.md). */
.portal-wagenhandy-artikel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bro-abstand-8);
  padding: var(--bro-abstand-8) 0;
  border-top: 1px solid var(--bro-linie);
  font-size: var(--bro-schrift-klein-groesse);
}
.portal-wagenhandy-artikel input {
  width: 5em;
  text-align: right;
}
.portal-wagenhandy-bestellung + .portal-wagenhandy-bestellung {
  margin-top: var(--bro-abstand-12);
}
.portal-wagenhandy-okkasten {
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-8);
  margin: var(--bro-abstand-8) 0 0;
  padding: var(--bro-abstand-8) var(--bro-abstand-12);
  border-radius: var(--bro-radius-s);
  background: var(--bro-flaeche-1);
}
.portal-wagenhandy-bestellung[data-zustand="ausgegeben"] .portal-wagenhandy-okkasten,
.portal-wagenhandy-bestellung[data-zustand="genehmigt"] .portal-wagenhandy-okkasten {
  color: var(--bro-erfolg);
}
.portal-wagenhandy-bestellung[data-zustand="abgelehnt"] .portal-wagenhandy-okkasten {
  color: var(--bro-warnung);
}

.portal-wagenhandy-formular {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
}

.portal-wagenhandy-feld {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
  text-align: left;
}

/* Ein Prüfpunkt des Fahrzeugchecks als eigene Gruppe: `min-width: 0` hält
 * das Fieldset in der Handybreite, sonst weitet es sich auf seinen Inhalt. */
.portal-wagenhandy-punkt {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  min-width: 0;
  margin: 0;
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
  padding: var(--bro-abstand-12);
  text-align: left;
}

.portal-wagenhandy-pin {
  font-size: var(--bro-schrift-titel-groesse);
  letter-spacing: var(--bro-abstand-4);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.portal-wagenhandy-voll {
  width: 100%;
  justify-content: center;
  min-height: var(--bro-beruehrungsflaeche);
}

.portal-wagenhandy-meldung {
  text-align: center;
}

/* Unterschrift des Fahrgasts (#10002): die Fläche nimmt den Finger, nicht
 * das Scrollen. Schrift- und Grundfarbe liest das Skript aus diesen Tokens
 * und malt den Grund mit ins Bild. */
.portal-wagenhandy-unterschrift-flaeche {
  width: 100%;
  height: calc(var(--bro-beruehrungsflaeche) * 4);
  border: 1px solid var(--bro-linie-stark);
  border-radius: var(--bro-radius-m);
  background: var(--bro-flaeche-0);
  color: var(--bro-tinte-1);
  touch-action: none;
}

[data-unterschrift-hinweis]:empty {
  display: none;
}

/* Warteschlange im Funkloch (#9909): die Zeile steht nur, wenn sie etwas sagt. */
[data-warteschlange-hinweis]:empty {
  display: none;
}

/* Ortung im Dienst (#9278): ein ruhiger Satz unter der Stempel-Karte. */
.portal-wagenhandy-ortung p {
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-8);
  margin: 0;
}

.portal-wagenhandy-ortung p:empty {
  display: none;
}

/* Die Seite der Disposition: Code und Start-PIN, genau einmal angezeigt. */
.portal-wagenhandy-einmal {
  border-left: 3px solid var(--bro-akzent);
}

.portal-wagenhandy-einmal-wert {
  font-size: var(--bro-schrift-anzeige-groesse);
  font-weight: var(--bro-schrift-titel-gewicht);
  letter-spacing: var(--bro-abstand-4);
  font-variant-numeric: tabular-nums;
}

.portal-wagenhandy-aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-8);
}

/* Neues Handy koppeln (#9883): QR-Code neben dem Code, schmal untereinander. */
.portal-wagenhandy-koppeln {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-16);
}

.portal-wagenhandy-qr {
  width: 12rem;
  height: 12rem;
  flex: none;
}

/* Stempeln und Feierabend am Wagenhandy (#9265). Vorbild quelltext-app.md
 * `appRumpf` (Bildschirme `start`, `heute`, `ende`), Maße aus
 * quelltext-design.md `.app-stempel`, `.app-uhr`, `.app-dienst`,
 * `.app-karte .wertepaar` — mit Tokens. */
.portal-wagenhandy-uhr {
  /* Demo `.app-uhr`: 46 px, die größte Zahl der App — das 1,6-Fache der
   * Anzeige-Schrift (28 px) statt einer festen Größe. */
  font-size: calc(var(--bro-schrift-anzeige-groesse) * 1.6);
  font-weight: var(--bro-schrift-anzeige-gewicht);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.portal-wagenhandy-stempel--gesperrt .portal-wagenhandy-uhr {
  color: var(--bro-tinte-3);
}

.portal-wagenhandy-stempel button[disabled] {
  cursor: not-allowed;
}

.portal-wagenhandy-dienst {
  border-left: 3px solid var(--bro-erfolg);
}

.portal-wagenhandy-offen {
  border-left: 3px solid var(--bro-warnung);
}

.portal-wagenhandy-karte > b {
  display: inline-flex;
  align-items: center;
  gap: var(--bro-abstand-8);
}

.portal-wagenhandy-ok {
  color: var(--bro-erfolg);
}

.portal-wagenhandy-wertepaar {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
  gap: var(--bro-abstand-4) var(--bro-abstand-12);
  margin: var(--bro-abstand-8) 0 0;
  text-align: left;
}

.portal-wagenhandy-wertepaar dt {
  color: var(--bro-tinte-2);
}

.portal-wagenhandy-wertepaar dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.portal-wagenhandy-wertepaar dd:last-child {
  font-weight: var(--bro-schrift-betont-gewicht);
}

/* Die Reiter unten (`.app-tabs`): erst ab zwei Wegen, am Handy unten
 * angeheftet, im Büro unter dem Rumpf. */
.portal-fahrer-reiter {
  position: sticky;
  bottom: 0;
  z-index: 5;
  padding-bottom: env(safe-area-inset-bottom);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  border-top: 1px solid var(--bro-linie);
  background: var(--bro-flaeche-1);
}

.portal-fahrer-reiter-punkt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--bro-abstand-4);
  min-height: var(--bro-beruehrungsflaeche);
  padding: var(--bro-abstand-8) 0;
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
  text-decoration: none;
}

.portal-fahrer-reiter-punkt[aria-current="page"] {
  color: var(--bro-akzent);
  font-weight: var(--bro-schrift-betont-gewicht);
}

.portal-fahrer-reiter-punkt:focus-visible {
  outline: var(--bro-fokus-breite) solid var(--bro-akzent);
  outline-offset: calc(-1 * var(--bro-fokus-breite));
}

/* Planung morgen: Vitala quelltext-planung.md / quelltext-design.md (#9262).
   Gemeinsame Kennzahlen, Karten und Tokens bleiben die Darstellungsquelle. */
.kf-planung {
  display: grid;
  gap: var(--bro-abstand-32);
}
.kf-planung h2 {
  font-size: var(--bro-schrift-titel-groesse);
  margin-bottom: var(--bro-abstand-16);
}
/* Kartenkopf als kleine graue Zeile wie `.fein` der Demo (quelltext-planung.md:167–186);
   die Überschriftenebene bleibt für Vorlese-Software erhalten (#9599). */
.kf-planung .kf-plan-fein {
  margin: 0 0 var(--bro-abstand-12);
  font-size: var(--bro-schrift-fein-groesse);
  line-height: var(--bro-schrift-fein-zeilenhoehe);
  font-weight: var(--bro-schrift-fein-gewicht);
  letter-spacing: var(--bro-schrift-fein-laufweite);
  color: var(--bro-tinte-2);
}
.kf-plan-drei {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--bro-abstand-24);
}
.kf-plan-zwei {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--bro-abstand-24);
}
.kf-plan-diagramm {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--bro-abstand-8);
  margin-top: var(--bro-abstand-32);
}
.kf-plan-kurve {
  position: relative;
  min-width: 0;
}
.kf-plan-bedarf svg {
  display: block;
  width: 100%;
  height: auto;
}
.kf-plan-yachse {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--bro-tinte-3);
  font-size: var(--bro-schrift-klein-groesse);
  line-height: var(--bro-schrift-klein-zeilenhoehe);
}
.kf-plan-spitze {
  position: absolute;
  left: calc(var(--kf-plan-spitze-x) * 1%);
  transform: translateX(calc(var(--kf-plan-spitze-x) * -1%));
  width: max-content;
  max-width: 100%;
  margin: 0 0 var(--bro-abstand-8);
  color: var(--bro-tinte-1);
  font-size: var(--bro-schrift-klein-groesse);
  line-height: var(--bro-schrift-klein-zeilenhoehe);
}
.kf-plan-gipfel {
  fill: var(--bro-tinte-1);
}
.kf-plan-flaeche[data-transportart="sitzend"] {
  fill: var(--bro-transport-sitzend);
}
.kf-plan-flaeche[data-transportart="rollstuhl"] {
  fill: var(--bro-transport-rollstuhl);
}
.kf-plan-flaeche[data-transportart="tragestuhl"] {
  fill: var(--bro-transport-tragestuhl);
}
.kf-plan-flaeche[data-transportart="liegend"] {
  fill: var(--bro-transport-liegend);
}
.kf-plan-wagenlinie {
  fill: none;
  stroke: var(--bro-tinte-1);
  stroke-width: 2;
  stroke-dasharray: 6 3;
}
.kf-plan-achse,
.kf-plan-legende {
  display: flex;
  justify-content: space-between;
  gap: var(--bro-abstand-12);
  margin-top: var(--bro-abstand-12);
  font-size: var(--bro-schrift-klein-groesse);
  color: var(--bro-tinte-3);
  flex-wrap: wrap;
}
/* Legende links gruppiert, je Art ein Farbquadrat wie `.legende` der Demo
   (quelltext-design.md:428–453, #9599). Nur die Bedarfskarte; die Legende
   der Besetzung (`.kf-bes-legende`) zeichnet ihre Marken selbst. */
.kf-plan-bedarf .kf-plan-legende {
  justify-content: flex-start;
  gap: var(--bro-abstand-4) var(--bro-abstand-16);
}
.kf-plan-bedarf .kf-plan-legende span {
  display: inline-flex;
  align-items: center;
  gap: var(--bro-abstand-8);
}
.kf-plan-bedarf .kf-plan-legende span[data-transportart]::before,
.kf-plan-bedarf .kf-plan-legende span[data-teil="wagen"]::before {
  content: "";
  display: inline-block;
  width: var(--bro-abstand-12);
  height: 10px;
}
.kf-plan-bedarf .kf-plan-legende span[data-transportart="sitzend"]::before {
  background: var(--bro-transport-sitzend);
}
.kf-plan-bedarf .kf-plan-legende span[data-transportart="rollstuhl"]::before {
  background: var(--bro-transport-rollstuhl);
}
.kf-plan-bedarf .kf-plan-legende span[data-transportart="tragestuhl"]::before {
  background: var(--bro-transport-tragestuhl);
}
.kf-plan-bedarf .kf-plan-legende span[data-transportart="liegend"]::before {
  background: var(--bro-transport-liegend);
}
.kf-plan-bedarf .kf-plan-legende span[data-teil="wagen"]::before {
  height: 0;
  border-top: 2px dashed var(--bro-tinte-1);
}
.kf-plan-herkunft {
  display: grid;
  gap: var(--bro-abstand-16);
}
.kf-plan-herkunft > div {
  display: grid;
  grid-template-columns: 1fr 2fr auto;
  gap: var(--bro-abstand-12);
  align-items: center;
}
.kf-plan-herkunft meter {
  width: 100%;
  accent-color: var(--bro-akzent);
}
.kf-plan-herkunft meter::-webkit-meter-bar {
  background: var(--bro-flaeche-0);
  border: none;
  border-radius: 0;
}
.kf-plan-herkunft meter::-webkit-meter-optimum-value {
  background: var(--bro-akzent);
}
.kf-plan-herkunft meter::-moz-meter-bar {
  background: var(--bro-akzent);
}
.kf-plan-aufruf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--bro-abstand-24);
  border-color: var(--bro-akzent);
  background: var(--bro-akzent-flaeche);
}
.kf-plan-aufruf > div {
  flex: 1;
  min-width: 0;
}
.kf-plan-aufruf p {
  color: var(--bro-tinte-2);
}

/* Touren als Zeitleiste Wagen × Stunde (#9807), Demo `tourenHTML`
   (quelltext-planung.md:210–245): Kopfzeile Wagen | Dienst | Achse | Fahrten |
   Besetzung; jede Zeile ist das <summary> ihres Seitenblatts. */
.kf-plan-tz {
  display: grid;
  grid-template-columns:
    calc(var(--bro-abstand-32) * 4) calc(var(--bro-abstand-32) * 2.5) minmax(0, 1fr)
    calc(var(--bro-abstand-32) * 2) calc(var(--bro-abstand-32) * 3);
  gap: var(--bro-abstand-16);
  align-items: center;
  padding: var(--bro-abstand-8) var(--bro-abstand-12);
}
.kf-plan-tz-kopf {
  color: var(--bro-tinte-3);
  font-size: var(--bro-schrift-fein-groesse);
  text-transform: uppercase;
  border-bottom: 1px solid var(--bro-linie);
}
.kf-plan-tour {
  border-bottom: 1px solid var(--bro-linie);
}
.kf-plan-tour > summary {
  cursor: pointer;
  list-style: none;
}
.kf-plan-tour > summary::-webkit-details-marker {
  display: none;
}
.kf-plan-tour > summary:hover,
.kf-plan-tour[open] > summary {
  background: var(--bro-flaeche-0);
}
.kf-plan-tz-wagen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-4);
  min-width: 0;
}
.kf-plan-tz-wagen em {
  font-style: normal;
  font-size: var(--bro-schrift-fein-groesse);
  color: var(--bro-tinte-2);
}
.kf-plan-tz-zeit,
.kf-plan-tz-zahl {
  display: flex;
  flex-direction: column;
  font-variant-numeric: tabular-nums;
}
.kf-plan-tz-zeit span,
.kf-plan-tz-zahl small,
.kf-plan-tz-leute small {
  font-size: var(--bro-schrift-fein-groesse);
  color: var(--bro-tinte-3);
}
.kf-plan-tz-zahl {
  font-weight: 600;
}
.kf-plan-tz-leute {
  display: flex;
  gap: var(--bro-abstand-4);
  min-width: 0;
}
/* Das Seitenblatt von rechts, Bauart „Neue Anweisung“ (#9859): offen rückt
   das Kreuz aus der Zeile in die Ecke des Blatts. */
.kf-plan-tour-zu {
  display: none;
}
.kf-plan-tour[open] .kf-plan-tour-zu {
  display: inline-flex;
  position: fixed;
  top: var(--bro-abstand-16);
  right: var(--bro-abstand-16);
  z-index: 59;
  padding: var(--bro-abstand-8);
  color: var(--bro-tinte-2);
}
.kf-plan-vorlese {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.kf-plan-tour-inhalt {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 58;
  width: min(calc(var(--bro-abstand-32) * 30), 100%);
  overflow-y: auto;
  display: grid;
  align-content: start;
  gap: var(--bro-abstand-16);
  padding: var(--bro-abstand-24) var(--bro-abstand-24) var(--bro-abstand-32);
  background: var(--bro-flaeche-1);
  border-left: 1px solid var(--bro-linie);
  box-shadow: var(--bro-schatten-dialog);
}
.kf-plan-tour-rumpf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--bro-abstand-24);
  align-items: start;
}
.kf-plan-tour-stapel {
  display: grid;
  gap: var(--bro-abstand-16);
  min-width: 0;
}
.kf-plan-tour-rumpf .kf-plan-ablauf {
  margin: 0;
}
.kf-plan-tour-inhalt h2 {
  margin: 0;
  padding-right: var(--bro-abstand-32);
}
.kf-plan-warum {
  display: flex;
  gap: var(--bro-abstand-8);
  margin: 0;
  padding: var(--bro-abstand-12);
  background: var(--bro-akzent-flaeche);
  border-radius: var(--bro-radius-m);
}
.kf-plan-warum svg {
  flex: none;
  color: var(--bro-akzent);
}
.kf-plan-anruf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-8);
  margin: var(--bro-abstand-8) 0 0 var(--bro-abstand-32);
  font-size: var(--bro-schrift-klein-groesse);
  color: var(--bro-tinte-2);
}
.kf-plan-ablauf {
  margin: var(--bro-abstand-16) 0;
  display: grid;
  gap: var(--bro-abstand-24);
}
.kf-plan-ablauf small {
  color: var(--bro-tinte-3);
}
/* Entscheidungskarten (#9783): die Karte des Leitstands (`.kf-ls-karte`,
   `.kf-ls-wahl`), gleiche Gründe gebündelt (Demo `entscheidungHTML`). */
.kf-plan-entscheidungen {
  display: grid;
  gap: var(--bro-abstand-12);
}
.kf-plan-entscheidung .kf-ls-weiter,
.kf-plan-buendel {
  margin: var(--bro-abstand-8) 0 0 var(--bro-abstand-32);
  font-size: var(--bro-schrift-klein-groesse);
}
a.kf-ls-wahl {
  text-decoration: none;
}
.kf-plan-buendel summary {
  cursor: pointer;
  color: var(--bro-akzent);
}
.kf-plan-buendel ul {
  margin: var(--bro-abstand-8) 0 0;
  padding: 0;
  list-style: none;
}
.kf-plan-buendel li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--bro-abstand-8);
  padding: var(--bro-abstand-8) 0;
  border-top: 1px solid var(--bro-linie);
}
.kf-plan-buendel li > span {
  color: var(--bro-tinte-2);
}
.kf-plan-buendel .kf-ls-wahlen {
  flex-basis: 100%;
  margin: 0;
}
.kf-plan-einstellfelder {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--bro-abstand-16);
  margin: var(--bro-abstand-24) 0;
}
.kf-plan-einstellungen summary,
.kf-plan-rechenschritte summary {
  cursor: pointer;
  font-weight: var(--bro-schrift-betont-gewicht);
}
.kf-plan-einstellungen label {
  display: grid;
  gap: var(--bro-abstand-8);
}
/* #9894: die sieben Rechenschritte in der Bauart des Demo-Laufs (`.lauf`,
   quelltext-design.md:554–605) — erledigt mit Haken, Ergebnissatz darunter.
   Direkt nach „Plan erstellen“ erscheinen sie nacheinander, ohne Skript;
   wer weniger Bewegung wünscht, sieht sie sofort. */
.kf-plan-schritte {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
  margin: var(--bro-abstand-12) 0 0;
  padding: 0;
  list-style: none;
}
.kf-plan-schritte li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--bro-abstand-12);
  align-items: start;
  padding: var(--bro-abstand-4) 0;
}
.kf-plan-schritte li div {
  display: flex;
  flex-direction: column;
}
.kf-plan-schritte li div span {
  font-size: var(--bro-schrift-klein-groesse);
  color: var(--bro-tinte-2);
}
.kf-plan-schritt-ring {
  display: inline-flex;
  color: var(--bro-erfolg);
}
.kf-plan-lauf .kf-plan-fein {
  display: flex;
  gap: var(--bro-abstand-8);
  align-items: center;
}
.kf-plan-lauf .kf-plan-schritte li {
  animation: kf-ls-einblenden 260ms ease both;
}
.kf-plan-lauf .kf-plan-schritte li:nth-child(2) {
  animation-delay: 430ms;
}
.kf-plan-lauf .kf-plan-schritte li:nth-child(3) {
  animation-delay: 860ms;
}
.kf-plan-lauf .kf-plan-schritte li:nth-child(4) {
  animation-delay: 1560ms;
}
.kf-plan-lauf .kf-plan-schritte li:nth-child(5) {
  animation-delay: 1990ms;
}
.kf-plan-lauf .kf-plan-schritte li:nth-child(6) {
  animation-delay: 2420ms;
}
.kf-plan-lauf .kf-plan-schritte li:nth-child(7) {
  animation-delay: 2850ms;
}
@media (prefers-reduced-motion: reduce) {
  .kf-plan-lauf .kf-plan-schritte li {
    animation: none;
  }
}
@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (max-height: 479px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (orientation: portrait) {
  .kf-plan-drei,
  .kf-plan-zwei {
    grid-template-columns: 1fr;
  }
  .kf-plan-einstellfelder {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Schmal: Wagen, Dienst und Fahrten in einer Zeile, die Spur darunter. */
  .kf-plan-tz {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: var(--bro-abstand-4) var(--bro-abstand-12);
  }
  .kf-plan-tz .kf-plan-tourspur,
  .kf-plan-tz .kf-plan-tourachse {
    grid-column: 1 / -1;
    order: 1;
  }
  .kf-plan-tz-leute,
  .kf-plan-tz-kopf > span:not(.kf-plan-tourachse) {
    display: none;
  }
  .kf-plan-tour-inhalt {
    padding: var(--bro-abstand-16);
  }
  .kf-plan-tour-rumpf {
    grid-template-columns: 1fr;
  }
  .kf-plan-zwei {
    overflow-x: auto;
  }
}

/* Besetzung nach Regeln (#9263): quelltext-design.md „Besetzung“ (Z. 954),
   „Prüfung und Vergleich“ (Z. 1122), `.wahlliste` (Z. 1336), „Veröffentlichen“.
   Werte als Tokens; die Demo-Pixel sind auf die nächste Stufe gerundet. */
.kf-bes-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--bro-abstand-24);
  align-items: start;
}
.kf-bes-stapel {
  display: grid;
  gap: var(--bro-abstand-16);
  min-width: 0;
}
.kf-bes-aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-12);
}
.kf-bes-gruppe {
  padding: 0;
  overflow: hidden;
}
.kf-bes-gruppe-titel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  padding: var(--bro-abstand-12) var(--bro-abstand-16);
  background: var(--bro-flaeche-0);
  border-bottom: 1px solid var(--bro-linie);
  font-size: var(--bro-schrift-gruppentitel-groesse);
  font-weight: var(--bro-schrift-gruppentitel-gewicht);
  letter-spacing: var(--bro-schrift-gruppentitel-laufweite);
  text-transform: uppercase;
  color: var(--bro-tinte-2);
}
.kf-bes-gruppe-titel span {
  text-transform: none;
  letter-spacing: 0;
  font-weight: var(--bro-schrift-fliesstext-gewicht);
}
.kf-bes-zeile {
  display: grid;
  grid-template-columns: 70px 108px minmax(0, 1fr);
  gap: var(--bro-abstand-12);
  align-items: center;
  padding: var(--bro-abstand-8) var(--bro-abstand-16);
  border-bottom: 1px solid var(--bro-linie);
}
.kf-bes-zeile:last-child {
  border-bottom: 0;
}
.kf-bes-zeit,
.kf-bes-wagen {
  display: flex;
  flex-direction: column;
  font-variant-numeric: tabular-nums;
}
.kf-bes-zeit span,
.kf-bes-wagen em {
  font-size: var(--bro-schrift-klein-groesse);
  font-style: normal;
  color: var(--bro-tinte-2);
}
.kf-bes-leute {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--bro-abstand-8);
}
.kf-bes-person {
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-8);
  min-width: 0;
  padding: var(--bro-abstand-4) var(--bro-abstand-8);
  border: 1px solid transparent;
  color: var(--bro-tinte-1);
  text-decoration: none;
}
a.kf-bes-person:hover,
a.kf-bes-person:focus-visible {
  border-color: var(--bro-linie-stark);
  background: var(--bro-flaeche-0);
}
.kf-bes-person > span:not(.kf-bes-bild):not(.kf-bes-tausch) {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.kf-bes-person small {
  font-size: var(--bro-schrift-klein-groesse);
  color: var(--bro-tinte-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kf-bes-person[data-luecke] {
  color: var(--bro-fehler);
}
.kf-bes-person[data-luecke] small {
  color: var(--bro-fehler);
}
.kf-bes-bild {
  flex: none;
}
.kf-bes-bild[data-klein] {
  width: var(--bro-abstand-24);
  height: var(--bro-abstand-24);
  font-size: var(--bro-schrift-fein-groesse);
}
.kf-bes-tausch {
  color: var(--bro-tinte-3);
  opacity: 0;
}
a.kf-bes-person:hover .kf-bes-tausch,
a.kf-bes-person:focus-visible .kf-bes-tausch {
  opacity: 1;
}
.kf-bes-hinweis {
  align-self: flex-start;
  margin-top: var(--bro-abstand-4);
}
.kf-bes-liste {
  display: flex;
  flex-direction: column;
  margin: var(--bro-abstand-8) 0 0;
  padding: 0;
  list-style: none;
}
.kf-bes-liste > * {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--bro-abstand-8);
  padding: var(--bro-abstand-4) 0;
  border-top: 1px solid var(--bro-linie);
}
.kf-bes-liste > :first-child {
  border-top: 0;
}
.kf-bes-liste small {
  font-size: var(--bro-schrift-klein-groesse);
  color: var(--bro-tinte-2);
  text-align: right;
}
.kf-bes-erklaerung {
  margin: var(--bro-abstand-4) 0 var(--bro-abstand-12);
}
.kf-bes-fair {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
}
.kf-bes-fair div {
  position: relative;
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: var(--bro-abstand-8);
  align-items: center;
  font-size: var(--bro-schrift-klein-groesse);
}
.kf-bes-fair i {
  position: relative;
  height: var(--bro-abstand-8);
  background: var(--bro-flaeche-0);
}
.kf-bes-fair i::before,
.kf-bes-fair i::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--bro-modul-personal);
}
.kf-bes-fair i::before {
  left: 0;
  width: var(--kf-bes-a);
}
.kf-bes-fair i::after {
  left: var(--kf-bes-a);
  width: var(--kf-bes-b);
  opacity: 0.35;
}
/* Soll bis heute: 80 % der Balkenbreite (Demo: Soll × 1,25 = voller Balken). */
.kf-bes-fair div::after {
  content: "";
  position: absolute;
  top: calc(var(--bro-abstand-4) * -0.5);
  bottom: calc(var(--bro-abstand-4) * -0.5);
  left: calc(70px + var(--bro-abstand-8) + (100% - 70px - var(--bro-abstand-8)) * 0.8);
  width: 2px;
  background: var(--bro-tinte-1);
}
.kf-bes-legende span::before {
  content: "";
  display: inline-block;
  width: var(--bro-abstand-8);
  height: var(--bro-abstand-8);
  margin-inline-end: var(--bro-abstand-4);
  background: var(--bro-modul-personal);
}
.kf-bes-legende span[data-teil="morgen"]::before {
  opacity: 0.35;
}
.kf-bes-legende span[data-teil="soll"]::before {
  width: 2px;
  background: var(--bro-tinte-1);
}
/* Offen über der Seite wie der Demo-Dialog, ohne Skript: ein festes
   `<dialog open>`, geschlossen wird über den Rücksprung-Link. */
.kf-bes-dialog {
  position: fixed;
  inset: var(--bro-abstand-24) var(--bro-abstand-16) auto;
  z-index: 50;
  display: grid;
  gap: var(--bro-abstand-16);
  width: min(560px, calc(100% - 2 * var(--bro-abstand-16)));
  max-height: calc(100vh - 2 * var(--bro-abstand-24));
  overflow-y: auto;
  margin: 0 auto;
  padding: var(--bro-abstand-24);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
  background: var(--bro-flaeche-1);
  color: var(--bro-tinte-1);
  box-shadow: var(--bro-schatten-dialog);
}
.kf-bes-dialog h2 {
  margin: 0;
}
.kf-bes-schliessen {
  position: absolute;
  top: var(--bro-abstand-16);
  right: var(--bro-abstand-16);
  color: var(--bro-tinte-2);
  text-decoration: none;
  font-size: var(--bro-schrift-titel-groesse);
}
.kf-bes-warum {
  padding: var(--bro-abstand-12);
  background: var(--bro-akzent-flaeche);
  border-radius: var(--bro-radius-s);
}
.kf-bes-wahl {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
  margin-top: var(--bro-abstand-8);
}
.kf-bes-wahl button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--bro-abstand-8);
  width: 100%;
  padding: var(--bro-abstand-8) var(--bro-abstand-12);
  border: 1px solid var(--bro-linie);
  background: var(--bro-flaeche-1);
  color: var(--bro-tinte-1);
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.kf-bes-wahl button:hover,
.kf-bes-wahl button:focus-visible {
  border-color: var(--bro-akzent);
  background: var(--bro-akzent-flaeche);
}
.kf-bes-wahl button > span:last-child {
  display: flex;
  flex-direction: column;
}
.kf-bes-wahl small {
  font-size: var(--bro-schrift-klein-groesse);
  color: var(--bro-tinte-2);
}
.kf-bes-pruefliste {
  display: flex;
  flex-direction: column;
  margin: var(--bro-abstand-8) 0 0;
  padding: 0;
  list-style: none;
}
.kf-bes-pruefliste li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--bro-abstand-12);
  align-items: start;
  padding: var(--bro-abstand-8) 0;
  border-top: 1px solid var(--bro-linie);
}
.kf-bes-pruefliste li:first-child {
  border-top: 0;
}
.kf-bes-pruefliste li div {
  display: flex;
  flex-direction: column;
}
.kf-bes-pruefliste li div span {
  font-size: var(--bro-schrift-klein-groesse);
  color: var(--bro-tinte-2);
}
.kf-bes-veroeff {
  display: grid;
  gap: var(--bro-abstand-16);
}
.kf-bes-veroeff-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--bro-abstand-24);
  align-items: start;
}
.kf-bes-punkt {
  display: flex;
  flex-direction: column;
  padding-inline-start: var(--bro-abstand-12);
  border-inline-start: 3px solid var(--bro-akzent);
}
.kf-bes-punkt span {
  color: var(--bro-tinte-2);
}
.kf-bes-push {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
  padding: var(--bro-abstand-16);
  border-radius: var(--bro-radius-l);
  background: var(--bro-flaeche-0);
  box-shadow: var(--bro-schatten-menue);
}
.kf-bes-empfaenger {
  width: 100%;
}
.kf-bes-ergebnis {
  border-inline-start: 3px solid var(--bro-erfolg);
}
.kf-bes-band a {
  margin-inline-start: var(--bro-abstand-8);
}
@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (max-height: 479px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (orientation: portrait) {
  .kf-bes-raster,
  .kf-bes-veroeff-raster {
    grid-template-columns: 1fr;
  }
  .kf-bes-zeile {
    grid-template-columns: 56px minmax(0, 1fr);
  }
  .kf-bes-leute {
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
  }
  .kf-bes-empfaenger {
    display: block;
    overflow-x: auto;
  }
}
.kf-plan-personen {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--bro-abstand-8);
}
.kf-plan-personen li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--bro-abstand-8);
}
.kf-plan-personen small {
  color: var(--bro-tinte-3);
}

/* Planungsregeln (#9599): ein Zahlenfeld je Zeile, Einheit bleibt am Feld. */
.kf-plan-zahl {
  display: block;
  margin-bottom: var(--bro-abstand-12);
}

.kf-plan-zahl-feld {
  display: inline-flex;
  align-items: center;
  gap: var(--bro-abstand-4);
  white-space: nowrap;
}

/* Fahrdienst › Aufträge (#9269) — Vorbild `.eingang`, `.quelle`, `.ein-text`,
   `.warum` und `.ein-aktion` in `quelltext-design.md` der Vitala-Klickdemo;
   die Reiter kommen aus `reiterLeiste` in `@bro/ui` (#9599). Werte nur über
   Tokens (B14.7): die drei Spalten der Eingangskarte, der Funken-Kasten auf
   der Akzentfläche, am Handy einspaltig. */

.kf-auf-ansicht,
.kf-auf-stapel {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
}

.kf-auf-eingang {
  display: grid;
  grid-template-columns: minmax(6rem, 7rem) minmax(0, 1fr) minmax(9rem, 12rem);
  gap: var(--bro-abstand-16);
  align-items: start;
  padding: var(--bro-abstand-16);
  background: var(--bro-flaeche-1);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
}

.kf-auf-fertig {
  opacity: var(--bro-erledigt-deckkraft);
}

.kf-auf-quelle {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
}

.kf-auf-quelle .bro-symbol {
  color: var(--bro-akzent);
}

.kf-auf-quelle small {
  color: var(--bro-tinte-2);
}

.kf-auf-text {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  min-width: 0;
  overflow-wrap: anywhere;
}

.kf-auf-text p {
  margin: 0;
}

.kf-auf-warum {
  display: flex;
  gap: var(--bro-abstand-8);
  padding: var(--bro-abstand-12);
  background: var(--bro-akzent-flaeche);
  border-radius: var(--bro-radius-s);
  font-size: var(--bro-schrift-klein-groesse);
}

.kf-auf-warum .bro-symbol {
  flex: none;
  color: var(--bro-akzent);
}

/* Demo `.ein-aktion { justify-content: flex-end }`: EIN Knopf rechts oben,
   nicht über die ganze Spalte gezogen (#9780). */
.kf-auf-aktion {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--bro-abstand-8);
}

.kf-auf-uebernehmen,
.kf-auf-anruf-form,
.kf-auf-unterbrechen form,
.kf-auf-zuordnen {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
}

.kf-auf-anruf {
  padding: var(--bro-abstand-12) var(--bro-abstand-16);
  background: var(--bro-flaeche-1);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
}

.kf-auf-anruf summary {
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-8);
  cursor: pointer;
}

.kf-auf-anruf-form {
  margin-top: var(--bro-abstand-12);
}

.kf-auf-fuss {
  color: var(--bro-tinte-2);
}

.kf-auf-tabelle {
  overflow-x: auto;
}

.kf-auf-rechts {
  text-align: end;
}

.kf-auf-unterbrechen summary,
.kf-auf-menue > summary {
  list-style: none;
  cursor: pointer;
}

.kf-auf-menue > summary::-webkit-details-marker {
  display: none;
}

.kf-auf-unterbrechen[open] form {
  margin-top: var(--bro-abstand-8);
  text-align: start;
}

/* Das Nebenmenü „…“ der Eingangskarte (#9780): Zuordnen und Ablegen. */
.kf-auf-menue {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.kf-auf-menue-inhalt {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
  margin-top: var(--bro-abstand-8);
  padding: var(--bro-abstand-12);
  background: var(--bro-flaeche-1);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
  text-align: start;
}

.kf-auf-suche {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-8);
}

.kf-auf-suche label {
  display: flex;
  flex: 1 1 16rem;
  align-items: center;
  gap: var(--bro-abstand-8);
}

/* Blätterleiste der Fahrgastsuche (#9729): Zurück, Seitenzahl, Weiter. */
.kf-blaettern {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-12);
  margin-top: var(--bro-abstand-12);
}

/* Das öffentliche Formular „Fahrt bestellen“ (#9269) — dieselbe schmale
   Spalte ohne App-Schale wie das Lead-Formular. */

.kf-bestellen {
  max-width: 40rem;
  margin: 0 auto;
  padding: var(--bro-abstand-24);
}

.kf-bestellen-form,
.kf-bestellen-form fieldset {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
}

.kf-bestellen-form fieldset {
  margin: 0;
  padding: var(--bro-abstand-16);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
}

.kf-bestellen-feld {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
}

.kf-bestellen-feld small {
  color: var(--bro-tinte-2);
}

/* Das Pflicht-Häkchen „Datenschutzhinweise gelesen“ (#9434): Kästchen links, Satz daneben. */
.kf-bestellen-zustimmung {
  display: flex;
  align-items: flex-start;
  gap: var(--bro-abstand-8);
}

.kf-bestellen-zustimmung input {
  margin-top: var(--bro-abstand-4);
}

@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (max-height: 479px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (orientation: portrait) {
  .kf-auf-eingang {
    grid-template-columns: minmax(0, 1fr);
  }

  .kf-auf-quelle {
    flex-direction: row;
    align-items: center;
  }

  .kf-bestellen {
    padding: var(--bro-abstand-16);
  }
}

/* #9272: Flotte nach der Vitala-Klickdemo (`quelltext-design.md`: `.kz-leiste`,
 * `.flotte`, `.fz-karte`, `.fz`, `.punkt`, `.fz-tuev`, `.hinweisband`,
 * `.warum`); Farben, Abstände und Schrift ausschließlich Haus-Tokens. */
.kf-fl-kennzahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 1px;
  margin-bottom: var(--bro-abstand-16);
  background: var(--bro-linie);
  border: 1px solid var(--bro-linie);
}

.kf-fl-kennzahl {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: var(--bro-abstand-16) var(--bro-abstand-24);
  background: var(--bro-flaeche-1);
}

.kf-fl-kennzahl b {
  font-size: var(--bro-schrift-anzeige-groesse);
  line-height: var(--bro-schrift-anzeige-zeilenhoehe);
  font-weight: var(--bro-schrift-anzeige-gewicht);
  font-variant-numeric: tabular-nums;
}

.kf-fl-kennzahl b[data-warn] {
  color: var(--bro-warnung);
}

.kf-fl-kennzahl span {
  font-weight: var(--bro-schrift-betont-gewicht);
}

.kf-fl-kennzahl small {
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
}

.kf-fl-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
  gap: var(--bro-abstand-12);
  margin-bottom: var(--bro-abstand-16);
}

.kf-fl-karte {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  min-width: 0;
  padding: var(--bro-abstand-16);
  background: var(--bro-flaeche-1);
  border: 1px solid var(--bro-linie);
  color: var(--bro-tinte-1);
  text-decoration: none;
}

.kf-fl-karte:hover,
.kf-fl-karte:focus-visible {
  border-color: var(--bro-tinte-3);
  box-shadow: var(--bro-schatten-menue);
}

.kf-fl-kopf {
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-8);
}

.kf-fl-chip {
  --kf-fl-klasse: var(--bro-tinte-3);
  display: inline-flex;
  align-items: stretch;
  line-height: 1.6;
  white-space: nowrap;
  font-size: var(--bro-schrift-klein-groesse);
  border: 1px solid color-mix(in srgb, var(--kf-fl-klasse) 40%, var(--bro-flaeche-1));
}

.kf-fl-chip[data-klasse="rs"] {
  --kf-fl-klasse: var(--bro-ausstattung-rs);
}

.kf-fl-chip[data-klasse="ts"] {
  --kf-fl-klasse: var(--bro-ausstattung-ts);
}

.kf-fl-chip[data-klasse="sca"] {
  --kf-fl-klasse: var(--bro-ausstattung-sca);
}

.kf-fl-chip[data-klasse="lie"] {
  --kf-fl-klasse: var(--bro-ausstattung-lie);
}

.kf-fl-chip b {
  padding: 0 var(--bro-abstand-8);
  background: var(--kf-fl-klasse);
  color: var(--bro-akzent-tinte);
  font-weight: var(--bro-schrift-anzeige-gewicht);
}

.kf-fl-chip i {
  padding: 0 var(--bro-abstand-4);
  font-style: normal;
  font-weight: var(--bro-schrift-betont-gewicht);
  color: var(--kf-fl-klasse);
  background: color-mix(in srgb, var(--kf-fl-klasse) 9%, var(--bro-flaeche-1));
}

.kf-fl-punkt {
  width: 9px;
  height: 9px;
  margin-left: auto;
  border-radius: var(--bro-radius-rund);
  background: var(--bro-tinte-3);
}

.kf-fl-punkt[data-zustand="gut"] {
  background: var(--bro-erfolg);
}

.kf-fl-punkt[data-zustand="warn"] {
  background: var(--bro-warnung);
}

.kf-fl-typ {
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
}

/* Demo .fz-plan: feine Trennlinie und vorhandene Portal-Tokens (#9709). */
.kf-fl-plan {
  font-size: var(--bro-schrift-klein-groesse);
  color: var(--bro-tinte-2);
  padding-top: var(--bro-abstand-8);
  border-top: 1px solid var(--bro-linie);
}

.kf-fl-tuev {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  align-items: center;
  gap: var(--bro-abstand-8);
  font-size: var(--bro-schrift-klein-groesse);
}

.kf-fl-tuev i {
  position: relative;
  height: 6px;
  background: var(--bro-linie);
}

.kf-fl-tuev i::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--kf-fl-tuev-breite, 4%);
  background: var(--bro-erfolg);
}

.kf-fl-tuev i[data-warn]::after {
  background: var(--bro-warnung);
}

.kf-fl-info {
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-8);
  font-size: var(--bro-schrift-klein-groesse);
}

.kf-fl-info-symbol {
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--bro-tinte-3);
}

.kf-fl-neu {
  margin-bottom: var(--bro-abstand-16);
}

.kf-fl-neu > summary {
  display: inline-flex;
  margin-bottom: var(--bro-abstand-12);
  cursor: pointer;
  list-style: none;
}

/*
 * Das Seltene einer Anlegemaske, eingeklappt (#9788): Wagen, Fahrer und
 * Fahrgast zeigen nur die Angaben, die jeder Eintrag braucht; der Rest steht
 * hier. Ohne Skript, ein schlichtes <details>.
 */
.kf-maske-mehr {
  padding: var(--bro-abstand-8) var(--bro-abstand-12);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
}

.kf-maske-mehr > summary {
  cursor: pointer;
}

.kf-maske-mehr[open] > summary {
  margin-bottom: var(--bro-abstand-8);
}

.kf-fl-hinweisband,
.kf-fl-warum {
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-12);
  margin-bottom: var(--bro-abstand-16);
  padding: var(--bro-abstand-12) var(--bro-abstand-16);
  background: var(--bro-akzent-flaeche);
  border: 1px solid color-mix(in srgb, var(--bro-akzent) 25%, var(--bro-linie));
}

.kf-fl-hinweisband > svg,
.kf-fl-warum > svg {
  flex: none;
  color: var(--bro-akzent);
}

.kf-fl-warum p {
  margin: 0;
}

.kf-fl-zwei {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--bro-abstand-24);
}

.kf-fl-werte {
  display: grid;
  grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
  gap: var(--bro-abstand-8) var(--bro-abstand-12);
  margin: 0;
  font-size: var(--bro-schrift-klein-groesse);
}

.kf-fl-werte dt {
  color: var(--bro-tinte-2);
}

.kf-fl-werte dd {
  margin: 0;
}

.kf-fl-schaden {
  margin-bottom: var(--bro-abstand-12);
}

.kf-fl-fotos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  gap: var(--bro-abstand-8);
  margin: var(--bro-abstand-12) 0;
  padding: 0;
  list-style: none;
}

.kf-fl-fotos li {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
}

.kf-fl-fotos img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--bro-linie);
  background: var(--bro-flaeche-0);
}

.kf-fl-upload {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--bro-abstand-12);
}

.kf-fl-historie {
  margin: 0;
  padding-left: var(--bro-abstand-16);
  font-size: var(--bro-schrift-klein-groesse);
}

@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (max-height: 479px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (orientation: portrait) {
  .kf-fl-zwei {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* #9712: eigene Skizze nach der Demo; dieselben Tokens in Eingabe und Akte. */
.kf-schadenskizze {
  margin: var(--bro-abstand-8) 0;
  max-width: 100%;
}
.kf-schadenskizze svg {
  display: block;
  max-width: 100%;
  height: auto;
}
.kf-schadenskizze-wahl svg {
  display: block;
  width: 100%;
  height: auto;
}
.kf-schadenskizze svg rect,
.kf-schadenskizze svg path,
.kf-schadenskizze-wahl svg rect,
.kf-schadenskizze-wahl svg path {
  fill: var(--bro-flaeche-0);
  stroke: var(--bro-tinte-3);
  stroke-width: 1.5;
}
.kf-schadenskizze svg circle,
.kf-schadenskizze-wahl svg circle {
  fill: var(--bro-tinte-2);
}
.kf-schadenskizze svg .kf-schadenskizze-fenster,
.kf-schadenskizze-wahl svg .kf-schadenskizze-fenster {
  fill: color-mix(in srgb, var(--bro-akzent) 18%, var(--bro-flaeche-1));
}
.kf-schadenskizze svg .kf-schadenskizze-treffer,
.kf-schadenskizze-wahl svg .kf-schadenskizze-treffer {
  fill: color-mix(in srgb, var(--bro-fehler) 30%, transparent);
  stroke: var(--bro-fehler);
  stroke-width: 2;
}
.kf-schadenskizze-wahl {
  display: block;
  width: 100%;
  cursor: crosshair;
}
.kf-schadenskizze-wahl[hidden],
.kf-schadenskizze-wahl [hidden] {
  display: none;
}

/* #9599, Helfer B — Mitarbeiter: die Kartei der Demo, je Person eine Zeile mit Personenkreis. */
.kf-kartei-liste {
  margin: 0;
  padding: 0;
  list-style: none;
}

.kf-kartei-zeile {
  display: grid;
  grid-template-columns: auto minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--bro-abstand-12);
  padding: var(--bro-abstand-8) 0;
  border-bottom: 1px solid var(--bro-linie);
}

.kf-kartei-zeile:last-child {
  border-bottom: 0;
}

.kf-kartei-zeile--still {
  color: var(--bro-tinte-3);
}

.kf-kartei-kreis {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--bro-radius-rund);
  background: var(--bro-akzent-flaeche);
  color: var(--bro-akzent-text);
  font-size: var(--bro-schrift-fein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
}

.kf-kartei-name {
  display: flex;
  flex-direction: column;
  font-weight: var(--bro-schrift-betont-gewicht);
}

.kf-kartei-name small,
.kf-kartei-telefon,
.kf-kartei-konto {
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
  font-weight: normal;
}

@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (max-height: 479px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (orientation: portrait) {
  .kf-kartei-zeile {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .kf-kartei-telefon,
  .kf-kartei-konto {
    grid-column: 2;
  }
}

/* Tourzeilen und Ablauf: ENTSCHIEDEN Demo tourenHTML/tourDialog (#9627). */
.kf-plan-tourachse {
  position: relative;
  display: block;
  height: var(--bro-abstand-16);
  color: var(--bro-tinte-3);
  font-size: var(--bro-schrift-klein-groesse);
}
.kf-plan-tourachse > span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
}
.kf-plan-tourspur {
  position: relative;
  height: var(--bro-abstand-32);
  min-width: 0;
}
.kf-plan-tourspur > span {
  position: absolute;
  top: var(--bro-abstand-8);
  height: var(--bro-abstand-16);
  border-radius: var(--bro-abstand-4);
}
.kf-plan-tourspur [data-teil="dienst"] {
  top: var(--bro-abstand-4);
  height: var(--bro-abstand-24);
  background: var(--bro-flaeche-1);
  border: 1px solid var(--bro-linie);
}
.kf-plan-tourspur [data-teil="anfahrt"],
.kf-plan-tourlegende [data-teil="anfahrt"]::before {
  background: repeating-linear-gradient(90deg, var(--bro-tinte-3) 0 2px, transparent 2px 5px);
}
.kf-plan-tourspur [data-teil="pause"],
.kf-plan-tourlegende [data-teil="pause"]::before {
  background: var(--bro-flaeche-1);
  border: 1px dashed var(--bro-tinte-2);
}
.kf-plan-tourspur [data-teil="werkstatt"],
.kf-plan-tourlegende [data-teil="werkstatt"]::before {
  background: repeating-linear-gradient(
    135deg,
    var(--bro-tinte-3) 0 1px,
    var(--bro-flaeche-1) 1px 5px
  );
}
.kf-plan-tourspur [data-teil="werkstatt"] {
  top: 0;
  height: var(--bro-abstand-32);
}
.kf-plan-tourspur [data-transportart="sitzend"],
.kf-plan-tourlegende [data-transportart="sitzend"]::before {
  background: var(--bro-transport-sitzend);
}
.kf-plan-tourspur [data-transportart="rollstuhl"],
.kf-plan-tourlegende [data-transportart="rollstuhl"]::before {
  background: var(--bro-transport-rollstuhl);
}
.kf-plan-tourspur [data-transportart="tragestuhl"],
.kf-plan-tourlegende [data-transportart="tragestuhl"]::before {
  background: var(--bro-transport-tragestuhl);
}
.kf-plan-tourspur [data-transportart="liegend"],
.kf-plan-tourlegende [data-transportart="liegend"]::before {
  background: var(--bro-transport-liegend);
}
.kf-plan-tourlegende {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-12);
  margin-top: var(--bro-abstand-16);
  font-size: var(--bro-schrift-klein-groesse);
}
.kf-plan-tourlegende span {
  display: inline-flex;
  align-items: center;
  gap: var(--bro-abstand-4);
}
.kf-plan-tourlegende span::before {
  content: "";
  width: var(--bro-abstand-16);
  height: var(--bro-abstand-12);
}
.kf-plan-tourbesatzung ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-16);
  list-style: none;
  padding: 0;
}
.kf-plan-tourbesatzung li {
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-8);
}
.kf-plan-tourbesatzung small {
  display: block;
  color: var(--bro-tinte-2);
}
/* #9714: dieselbe Rundgangsteuerung für alle Modul-Kataloge. */
.portal-rundgang:not([hidden]) {
  position: fixed;
  z-index: 41;
  inset-inline: var(--bro-abstand-16);
  bottom: calc(var(--bro-beruehrungsflaeche) + var(--bro-abstand-16));
  padding: var(--bro-abstand-16);
  background: var(--bro-flaeche-1);
  color: var(--bro-tinte-1);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
  box-shadow: var(--bro-schatten-dialog);
  max-height: calc(100dvh - var(--bro-beruehrungsflaeche) - 2 * var(--bro-abstand-16));
  overflow: auto;
}
.portal-rundgang-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-8);
}

/* Notfall aus der Fahrer-App (#9998): rot im Leitstand und am Wagenhandy. */
.kf-ls-karte--notfall {
  border-color: var(--bro-fehler-linie);
  border-left-color: var(--bro-fehler);
  background: var(--bro-fehler-flaeche);
}
.kf-ls-karte--notfall .kf-ls-karte-kopf > .bro-symbol {
  color: var(--bro-fehler);
}
.kf-ls-notfall-schliessen {
  display: grid;
  gap: var(--bro-abstand-8);
  margin-top: var(--bro-abstand-12);
}
.kf-ls-notfall-schliessen label {
  display: grid;
  gap: var(--bro-abstand-4);
}
.portal-wagenhandy-notfall {
  border-color: var(--bro-fehler);
  color: var(--bro-fehler);
}
.portal-wagenhandy-notfall.bro-knopf--primaer {
  background: var(--bro-fehler);
  color: var(--bro-flaeche-1);
}
.portal-wagenhandy-notfall-karte {
  border-color: var(--bro-fehler-linie);
  background: var(--bro-fehler-flaeche);
}

/*
 * Designs „Altes Bro“, „Vitala“ und „Bro-Look v10“ auf jeder Portalseite
 * (#9974, Durchsicht 18.10.2026, Bilder `docs/assets/9974-designs-durchsicht/`).
 * Nur unter diesen drei Designs wirksam; „Modern“ hat sein eigenes Fenster.
 * Die Brüche sind gemessen, nicht geschätzt — je Regel steht der Fund.
 */

/* Verweise in Akzentfarbe: Im Dunkeln bleibt `--bro-akzent` das Hellwert-Blau
   (es trägt die weiße Knopfschrift) und kam auf der dunklen Karte nur auf
   3,4:1, auf der Hinweisfläche der Übersicht auf 2,98:1. `akzent-text` ist das
   Token für Akzent-Schrift und wird im Dunkeln aufgehellt (7:1). */
html:is([data-design="alt"], [data-design="vitala"], [data-design="v10"])
  :is(.portal-uebersicht-mehr, .portal-beleg-link, .bro-bedienhilfe-verweis) {
  color: var(--bro-akzent-text);
}

/* Zahl an der Glocke: weiße Schrift auf dem aufgehellten Dunkel-Rot kam auf
   2,93:1; die Seitenfläche als Schrift trägt in Hell und Dunkel. */
html:is([data-design="alt"], [data-design="vitala"], [data-design="v10"]) .portal-glocke-zahl {
  color: var(--bro-flaeche-0);
}

/* „Rundgang starten“ im Fuß der Standard-Leiste ist ein <button>: Ohne
   eigene Fläche zeigte er im Dunkeln die graue Systemfläche des Browsers. */
html:is([data-design="alt"], [data-design="vitala"], [data-design="v10"])
  .portal-seitenleiste-fuss
  [data-rundgang-start] {
  width: 100%;
  font-family: inherit;
  text-align: left;
}

html:is([data-design="alt"], [data-design="vitala"], [data-design="v10"])
  .portal-seitenleiste-fuss
  [data-rundgang-start]:not(:hover) {
  background: transparent;
}

/* Suchfeld einer Werkzeugleiste: `flex: 1` hieß Grundbreite 0, und neben den
   Knöpfen blieb auf dem Handy ein Feld von 48 px („S“). Mit eigener
   Grundbreite rutscht es in eine eigene Zeile, wenn der Platz fehlt. */
html:is([data-design="alt"], [data-design="vitala"], [data-design="v10"]) .portal-suche {
  flex: 1 1 16rem;
}

/* Aufgabenliste auf dem Handy: Etiketten in derselben Zeile quetschten den
   Titel auf ~100 px und schnitten „Überfällig · 17.10.2026“ ab. Der Titel
   nimmt die Zeile, die Etiketten brechen darunter um. */
@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (max-height: 479px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (orientation: portrait) {
  html:is([data-design="alt"], [data-design="vitala"], [data-design="v10"]) .portal-aufgabe {
    flex-wrap: wrap;
  }

  html:is([data-design="alt"], [data-design="vitala"], [data-design="v10"]) .portal-aufgabe-titel {
    flex-basis: calc(100% - var(--bro-abstand-32) - var(--bro-abstand-12));
    min-width: 0;
  }
}

/* Berichte → Top-Kunden: In der Zelle „Anteil netto“ stand das ganze Diagramm
   samt Überschrift, Beschreibung und „Daten als Tabelle“; die Spalte wurde auf
   ~40 px gequetscht, jede Zeile ~550 px hoch. In der Tabelle bleibt der Balken
   mit Wert; Überschrift und Beschreibung bleiben für Vorleser, die zweite
   Tabelle in der Tabelle entfällt (die Zeile IST schon die Tabelle). */
html:is([data-design="alt"], [data-design="vitala"], [data-design="v10"])
  [data-top-kunden-rang]
  .bro-diagramm {
  /* Bezug der versteckten Texte unten: Ohne ihn hingen sie am Seitenrand und
     verbreiterten die Seite auf dem Handy, obwohl die Tabelle scrollt. */
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

html:is([data-design="alt"], [data-design="vitala"], [data-design="v10"])
  [data-top-kunden-rang]
  .bro-diagramm
  > :is(figcaption, .bro-diagramm-beschreibung, .bro-diagramm-herkunft) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

html:is([data-design="alt"], [data-design="vitala"], [data-design="v10"])
  [data-top-kunden-rang]
  .bro-diagramm-daten {
  display: none;
}

/* Eingabefelder im Dunkeln (Vitala, v10): Feldfläche gleich Kartenfläche,
   Rand 1,1:1 — die Felder waren auf der Karte unsichtbar. Rand in
   `tinte-3` (5:1) und die Seitenfläche als Feldgrund. Altes Bro hat eigene
   Feldfarben und ist hier nicht betroffen. */
@media (prefers-color-scheme: dark) {
  html:is([data-design="vitala"], [data-design="v10"]):not([data-theme="light"]) .bro-eingabefeld {
    border-color: var(--bro-tinte-3);
    background: var(--bro-flaeche-0);
  }
}

html:is([data-design="vitala"], [data-design="v10"])[data-theme="dark"] .bro-eingabefeld {
  border-color: var(--bro-tinte-3);
  background: var(--bro-flaeche-0);
}

/* Aufgaben #10182: Farben benennen Dringlichkeit, Symbol benennt Art. */
[data-faelligkeitsfehler] {
  --aufgaben-punkt: var(--bro-tinte-3);
  --aufgaben-flaeche: var(--bro-flaeche-1);
  --aufgaben-tinte: var(--bro-tinte-1);
}
[data-dringlichkeit="ueberfaellig"] {
  --aufgaben-punkt: var(--bro-aufgaben-ueberfaellig-punkt);
  --aufgaben-flaeche: var(--bro-aufgaben-ueberfaellig-flaeche);
  --aufgaben-tinte: var(--bro-aufgaben-ueberfaellig-tinte);
}
[data-dringlichkeit="dringend"] {
  --aufgaben-punkt: var(--bro-aufgaben-dringend-punkt);
  --aufgaben-flaeche: var(--bro-aufgaben-dringend-flaeche);
  --aufgaben-tinte: var(--bro-aufgaben-dringend-tinte);
}
[data-dringlichkeit="bald"] {
  --aufgaben-punkt: var(--bro-aufgaben-bald-punkt);
  --aufgaben-flaeche: var(--bro-aufgaben-bald-flaeche);
  --aufgaben-tinte: var(--bro-aufgaben-bald-tinte);
}
[data-dringlichkeit="ohne-eile"] {
  --aufgaben-punkt: var(--bro-aufgaben-ohne-eile-punkt);
  --aufgaben-flaeche: var(--bro-aufgaben-ohne-eile-flaeche);
  --aufgaben-tinte: var(--bro-aufgaben-ohne-eile-tinte);
}
[data-dringlichkeit="erledigt"] {
  --aufgaben-punkt: var(--bro-aufgaben-erledigt-punkt);
  --aufgaben-flaeche: var(--bro-aufgaben-erledigt-flaeche);
  --aufgaben-tinte: var(--bro-aufgaben-erledigt-tinte);
}

.portal-aufgaben-dringlichkeitsfilter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-8);
}
.portal-aufgaben-filter {
  display: inline-flex;
  align-items: center;
  gap: var(--bro-abstand-4);
  color: var(--bro-tinte-1);
  cursor: pointer;
}
.portal-aufgaben-punkt {
  display: inline-block;
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--aufgaben-punkt);
}
.portal-aufgaben-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(248px, 100%), 1fr));
  gap: var(--bro-abstand-16);
  padding: var(--bro-abstand-24);
  margin: 0;
  list-style: none;
}
.portal-aufgaben-raster > .portal-aufgaben-kachel {
  margin: 0;
}
.portal-aufgaben-kachel {
  position: relative;
  display: grid;
  grid-template-rows: 40px 44px 20px 28px;
  gap: var(--bro-abstand-8);
  height: 196px;
  box-sizing: border-box;
  padding: var(--bro-abstand-16);
  border: 1px solid color-mix(in srgb, var(--aufgaben-punkt) 38%, var(--bro-linie));
  border-radius: var(--bro-radius-l);
  background: var(--aufgaben-flaeche);
  color: var(--aufgaben-tinte);
}
.portal-aufgaben-kachel-kopf {
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-8);
  font-size: var(--bro-schrift-klein-groesse);
}
.portal-aufgaben-kachel-kopf small {
  display: block;
}
.portal-aufgaben-art-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--bro-radius-m);
  background: color-mix(in srgb, var(--aufgaben-punkt) 12%, var(--aufgaben-flaeche));
  color: var(--aufgaben-tinte);
}
.portal-aufgaben-kachel-kopf form {
  position: relative;
  z-index: 2;
  margin-left: auto;
}
.portal-aufgaben-kachel-kopf button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--aufgaben-tinte);
  border-radius: 50%;
  background: var(--aufgaben-flaeche);
  color: var(--aufgaben-tinte);
  cursor: pointer;
}
.portal-aufgaben-kachel-titel {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--bro-schrift-betont-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
  line-height: 22px;
  color: var(--aufgaben-tinte);
  text-decoration: none;
}
.portal-aufgaben-kachel-titel::after {
  content: "";
  position: absolute;
  inset: 0;
}
.portal-aufgaben-bezug {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--bro-schrift-klein-groesse);
}
.portal-aufgaben-kachel-fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bro-abstand-4);
  min-width: 0;
}
.portal-aufgaben-pille {
  display: inline-flex;
  align-items: center;
  gap: var(--bro-abstand-4);
  padding: var(--bro-abstand-4) var(--bro-abstand-8);
  border-radius: var(--bro-radius-m);
  background: color-mix(in srgb, var(--aufgaben-punkt) 10%, var(--aufgaben-flaeche));
  color: var(--aufgaben-tinte);
  font-size: var(--bro-schrift-fein-groesse);
  white-space: nowrap;
}
.portal-aufgaben-kuerzel {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--bro-schrift-fein-groesse);
}
.portal-aufgaben-detail-kopf {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--bro-abstand-16);
}
.portal-aufgaben-detail-kopf > .portal-aufgaben-art-symbol {
  width: 56px;
  height: 56px;
}
.portal-aufgaben-ueberblick {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--bro-abstand-24);
  padding: var(--bro-abstand-24);
}
.portal-aufgaben-detail-inhalt {
  padding: var(--bro-abstand-24);
}
@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (max-height: 479px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (orientation: portrait) {
  .portal-aufgaben-ueberblick {
    grid-template-columns: minmax(0, 1fr);
  }
}

.portal-aufgaben-formular {
  max-width: 640px;
  margin-inline: auto;
}
.portal-aufgaben-formular [aria-invalid="true"] {
  border-color: var(--bro-fehler);
}
.portal-aufgaben-prioritaet,
.portal-aufgaben-zustaendigkeit,
.portal-aufgaben-formular [data-weitere-zustaendige] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-8);
}
.portal-aufgaben-zustaendigkeit {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}
.portal-aufgaben-person-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--bro-abstand-4);
  padding: var(--bro-abstand-8);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
}
.portal-aufgaben-person-chip:has(:checked) {
  background: var(--bro-hinweis-flaeche);
}
.portal-aufgaben-person-chip[hidden] {
  display: none;
}
.portal-aufgaben-formular [data-art-erweitert] {
  position: relative;
}
.portal-aufgaben-formular [data-art-oeffnen] {
  justify-content: flex-start;
  text-align: left;
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-8);
  padding: var(--bro-abstand-12);
  background: var(--bro-flaeche-1);
  color: var(--bro-tinte-1);
  border: 1px solid var(--bro-linie-stark);
  border-radius: var(--bro-radius-m);
}
.portal-aufgaben-formular [role="listbox"] {
  position: absolute;
  z-index: 3;
  inset-inline: 0;
  top: 100%;
  padding: var(--bro-abstand-8);
  background: var(--bro-flaeche-1);
  border: 1px solid var(--bro-linie-stark);
  border-radius: var(--bro-radius-m);
  box-shadow: var(--bro-schatten-menue);
}
.portal-aufgaben-formular [role="option"] {
  width: 100%;
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: var(--bro-abstand-4) var(--bro-abstand-8);
  padding: var(--bro-abstand-8);
  text-align: left;
  border: 0;
  background: var(--bro-flaeche-1);
  color: var(--bro-tinte-1);
  cursor: pointer;
}
.portal-aufgaben-formular [role="option"] small {
  grid-column: 2;
}
.portal-aufgaben-formular [role="option"]:focus,
.portal-aufgaben-formular [role="option"][aria-selected="true"] {
  background: var(--bro-hinweis-flaeche);
}
.portal-aufgaben-formular [data-datum-schnellwahl] button {
  margin: var(--bro-abstand-4);
  padding: var(--bro-abstand-4) var(--bro-abstand-8);
  border: 1px solid var(--bro-linie);
  background: var(--bro-flaeche-1);
  color: var(--bro-tinte-1);
}

.portal-aufgabe[data-dringlichkeit] {
  background: var(--aufgaben-flaeche);
  border-color: var(--aufgaben-punkt);
  color: var(--aufgaben-tinte);
}

/* In der Aufgaben-Schublade ist der Modern-Mobilkopf kein zweiter Rahmen. */
html[data-eingebettet][data-rahmen="modern"] .mo-kopf {
  display: none;
}

/* Widget-Gerüst #10172: 4/2 Spalten aus dem Auftrag, Inhalte bleiben Fachmodule. */
.portal-widget-layout {
  display: flex;
  align-items: flex-start;
  gap: var(--bro-abstand-16);
}
.portal-widget-raster {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-flow: row dense;
  gap: var(--bro-abstand-4);
  flex: 3;
  min-width: 0;
}
.portal-widget[data-widget-groesse="mittel"],
.portal-widget[data-widget-groesse="gross"] {
  grid-column: span 2;
}
.portal-widget[data-widget-groesse="gross"] {
  grid-row: span 2;
}
.portal-widget {
  min-width: 0;
  overflow-wrap: anywhere;
}
.portal-widget-werkzeuge {
  display: flex;
  gap: var(--bro-abstand-12);
  align-items: center;
}
.portal-widget-galerie {
  flex: 1;
}
.portal-widget-aktion {
  display: inline-block;
  margin: var(--bro-abstand-4);
}
.portal-widget [data-widget-menue] {
  position: relative;
}
.portal-widget [data-widget-menue][open] {
  background: var(--bro-flaeche-1);
}
.portal-widget-ablage {
  grid-column: 1 / -1;
  border: var(--bro-fokus-breite) dashed var(--bro-akzent);
  padding: var(--bro-abstand-4);
}
[data-widget-drop-ziel] {
  outline: var(--bro-fokus-breite) solid var(--bro-datenreihe-1);
  outline-offset: var(--bro-abstand-4);
}
@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (max-height: 479px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (orientation: portrait) {
  .portal-widget-raster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .portal-widget-layout {
    flex-direction: column;
  }
}
@media (prefers-reduced-motion: no-preference) {
  [data-widget-drop-ziel] {
    transition: outline-color var(--bro-melder-uebergangsdauer);
  }
}

.portal-widget-layout > [data-widget-galerie-platz] {
  flex: 1;
  min-width: 0;
}

[data-widget-drop-ziel]::before {
  content: "";
  display: block;
  border-top: var(--bro-markierung-breite) solid var(--bro-datenreihe-1);
}

/* Emil (#10178): bestehende Schubladenmaße und ausschließlich Design-Tokens. */
.portal-emil-schublade {
  overflow: auto;
  padding: var(--bro-abstand-16);
}
.portal-emil-schublade > header,
.portal-emil-aktionen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bro-abstand-8);
}
.portal-emil-bereich {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  gap: var(--bro-abstand-24);
}
.portal-emil-bereich nav {
  min-width: 0;
}
[data-emil-verlauf] {
  display: grid;
  gap: var(--bro-abstand-16);
}
[data-emil-vorschau]:not(:empty) {
  padding: var(--bro-abstand-12);
  background: var(--bro-flaeche-1);
}
@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (max-height: 479px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (orientation: portrait) {
  .portal-emil-bereich {
    grid-template-columns: minmax(0, 1fr);
  }
}
.portal-emil-bereich nav ul {
  padding: 0;
  list-style: none;
}
.portal-emil-bereich nav a {
  overflow-wrap: anywhere;
}
/* Persönliche Begrüßung #10196. Derselbe Inhalt ist ohne Skript eine Karte. */
.portal-begruessung-dialog {
  width: calc(100% - var(--bro-abstand-32));
  max-width: var(--bro-begruessung-breite);
  padding: 0;
  border: 0;
  border-radius: var(--bro-begruessung-radius);
  color: var(--bro-tinte-1);
  background: var(--bro-flaeche-1);
  box-shadow: var(--bro-schatten-dialog);
}
.portal-begruessung-dialog::backdrop {
  background: var(--bro-begruessung-schleier);
  backdrop-filter: blur(var(--bro-begruessung-unschaerfe));
}
.portal-begruessung {
  position: relative;
  max-width: var(--bro-begruessung-breite);
  margin: 0 auto var(--bro-abstand-24);
  padding: var(--bro-abstand-32);
  border-radius: var(--bro-begruessung-radius);
  color: var(--bro-tinte-1);
  background: var(--bro-flaeche-1);
  text-align: center;
}
.portal-begruessung-dialog .portal-begruessung {
  margin-bottom: 0;
  border: 0;
}
.portal-begruessung-schliessen {
  position: absolute;
  right: var(--bro-abstand-12);
  top: var(--bro-abstand-12);
  border: 0;
  background: transparent;
}
.portal-begruessung-szene {
  width: var(--bro-begruessung-szene);
  max-width: 100%;
  height: auto;
}
.portal-begruessung-paket {
  fill: var(--bro-akzent-flaeche);
  stroke: var(--bro-akzent);
}
.portal-begruessung-bonbon {
  fill: var(--bro-akzent);
  stroke: var(--bro-tinte-1);
}
.portal-begruessung-funken {
  fill: var(--bro-warnung);
}
.portal-begruessung-geschenk {
  background: var(--bro-begruessung-geschenk);
  border-radius: var(--bro-begruessung-radius);
  padding: var(--bro-abstand-16);
  margin: var(--bro-abstand-24) 0;
  text-align: left;
}
.portal-begruessung-los {
  min-height: var(--bro-begruessung-knopf);
  width: 100%;
  border-radius: var(--bro-begruessung-pille);
  margin-top: var(--bro-abstand-16);
}
html[data-eingebettet] .portal-begruessung {
  display: none;
}
@media print {
  .portal-begruessung,
  .portal-begruessung-dialog {
    display: none;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .portal-begruessung-dialog[open] {
    animation: begruessung-kommen var(--bro-begruessung-bewegung) var(--bro-begruessung-kurve);
  }
  .portal-begruessung-bonbon,
  .portal-begruessung-funken {
    animation: begruessung-kommen var(--bro-begruessung-bewegung) var(--bro-begruessung-kurve);
  }
}
@keyframes begruessung-kommen {
  from {
    opacity: 0;
    transform: translateY(var(--bro-abstand-16));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* #10168: Information zur Gerätefähigkeit, keine Aussage über gespeicherte Passkeys. */
[data-keine-plattform]:not([hidden]) {
  color: var(--bro-tinte-1);
  background: var(--bro-hinweis-flaeche);
  outline: var(--bro-fokus-breite) solid var(--bro-hinweis-linie);
  padding: var(--bro-abstand-8);
}

/* Kundenliste im Seitenmuster (#10228): Box mit Reitern oben, Suchband mit
   Schnellfiltern, Tabelle und Blättern im Fuß; Menü „⋯“ im Kopf. */
.portal-chip-zahl {
  color: var(--bro-tinte-2);
}
.portal-name-text {
  display: inline-flex;
  flex-direction: column;
}
.portal-name-zusatz {
  color: var(--bro-tinte-2);
}
/* Aufklappbare Abschnitte im Formular „Kunde anlegen“ (#10228). */
.portal-formular-abschnitt > summary {
  cursor: pointer;
  padding-block: var(--bro-abstand-8);
}
.portal-formular-abschnitt[open] > summary {
  margin-bottom: var(--bro-abstand-8);
}

/* #10198: Die Mitarbeiter-Zustandskarten folgen dem gebauten Vorbild #9643.
 * Alle neuen Gestaltungsregeln sind Modern-spezifisch. Die gemeinsamen
 * portal-anmeldung-Klassen tragen weiterhin die drei übrigen Designs.
 * 520 px Kartenbreite und 72 px Leiste stammen aus dem Ticket-Vorbild. */
.portal-zustandskachel,
.portal-konten-kuerzel {
  display: none;
}

.portal-zustandsfuss {
  display: contents;
}

:where(html[data-design="modern"]) .portal-zustandsseite {
  position: relative;
  box-sizing: border-box;
  min-height: calc(100svh - 4rem);
  padding: calc(var(--bro-abstand-32) * 3) var(--bro-abstand-24) var(--bro-abstand-32);
  background:
    radial-gradient(ellipse at top, var(--bro-akzent-flaeche), transparent), var(--bro-flaeche-0);
}

:where(html[data-design="modern"]) .portal-zustandskarte {
  max-width: 32.5rem;
  min-width: 0;
  gap: var(--bro-abstand-16);
  padding: var(--bro-abstand-32);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-konsole-radius-box);
  background: var(--bro-flaeche-1);
  box-shadow: var(--bro-schatten-dialog);
  overflow-wrap: anywhere;
}

/* Die vorhandene Marke wandert in die Leiste. Nur ein Logo im DOM, weder
 * Betriebsprofil noch zweites Formular für eine andere Designwahl nötig. */
:where(html[data-design="modern"]) .portal-zustandskarte > .portal-marke {
  position: absolute;
  inset: 0 0 auto;
  height: 4.5rem;
  margin: 0;
  padding: 0 var(--bro-abstand-32);
  display: flex;
  align-items: center;
  background: var(--bro-flaeche-1);
  border-bottom: 1px solid var(--bro-linie);
}

:where(html[data-design="modern"]) .portal-zustandskachel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--bro-abstand-32) + var(--bro-abstand-16));
  height: calc(var(--bro-abstand-32) + var(--bro-abstand-16));
  border-radius: var(--bro-konsole-radius-klein);
  flex: none;
}

:where(html[data-design="modern"]) .portal-zustandskachel.ton-info {
  background: var(--bro-hinweis-flaeche);
  color: var(--bro-akzent);
}
:where(html[data-design="modern"]) .portal-zustandskachel.ton-warnung {
  background: var(--bro-warnung-flaeche);
  color: var(--bro-warnung);
}
:where(html[data-design="modern"]) .portal-zustandskachel.ton-fehler {
  background: var(--bro-fehler-flaeche);
  color: var(--bro-fehler);
}
:where(html[data-design="modern"]) .portal-zustandskachel.ton-neutral {
  background: var(--bro-modern-hover);
  color: var(--bro-tinte-2);
}

:where(html[data-design="modern"]) .portal-zustandskarte h1 {
  margin: 0;
  font-size: var(--bro-schrift-anzeige-groesse);
  font-weight: var(--bro-schrift-anzeige-gewicht);
  line-height: var(--bro-schrift-anzeige-zeilenhoehe);
}

html[data-design="modern"]
  :is(.portal-zustandskarte, .portal-passkey-fenster)
  :is(button, a.bro-knopf) {
  min-height: calc(var(--bro-abstand-32) + var(--bro-abstand-16));
  border-radius: var(--bro-konsole-radius-pille);
  white-space: normal;
  text-align: center;
}

:where(html[data-design="modern"]) .portal-zustandskarte .portal-formular-aktionen > p {
  margin: 0;
}
:where(html[data-design="modern"]) .portal-zustandskarte .portal-formular-aktionen > p > a,
:where(html[data-design="modern"]) .portal-zustandskarte .portal-formular-aktionen > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: calc(var(--bro-abstand-32) + var(--bro-abstand-16));
  padding: var(--bro-abstand-8) var(--bro-abstand-16);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-konsole-radius-pille);
  text-decoration: none;
  color: var(--bro-tinte-1);
}

:where(html[data-design="modern"]) .portal-zustandskarte :is(a, button):focus-visible {
  outline: var(--bro-fokus-breite) solid var(--bro-akzent);
  outline-offset: var(--bro-fokus-abstand);
}

:where(html[data-design="modern"]) .portal-zustandsfuss {
  display: block;
  border-top: 1px solid var(--bro-linie);
  padding-top: var(--bro-abstand-16);
}
:where(html[data-design="modern"]) .portal-zustandsantwort > strong {
  display: block;
  color: var(--bro-tinte-1);
  margin-bottom: var(--bro-abstand-4);
}
:where(html[data-design="modern"]) .portal-zustandshinweis {
  padding: var(--bro-abstand-12);
  background: var(--bro-hinweis-flaeche);
  border-radius: var(--bro-konsole-radius-klein);
}
:where(html[data-design="modern"]) .portal-konten-kuerzel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: calc(var(--bro-abstand-32) + var(--bro-abstand-8));
  height: calc(var(--bro-abstand-32) + var(--bro-abstand-8));
  border-radius: var(--bro-konsole-radius-pille);
  background: var(--bro-flaeche-1);
  color: var(--bro-akzent);
  font-weight: var(--bro-schrift-betont-gewicht);
}
:where(html[data-design="modern"]) .portal-zustandskarte .portal-konten-eintrag {
  border: 1px solid var(--bro-linie);
  background: var(--bro-flaeche-1);
}
:where(html[data-design="modern"]) .portal-zustandskarte .portal-konten-kopf {
  flex-wrap: wrap;
}
@media (min-width: 1280px) {
  :where(html[data-design="modern"]) .portal-zustandskarte .portal-konten-eintrag {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/*
 * Die Tagestafel (#10499): eine Spalte je Tagesstufe, nebeneinander, auf
 * schmalen Geräten untereinander.
 */
.portal-tagestafel {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--bro-abstand-16);
}

.portal-tagestafel-liste {
  display: grid;
  gap: var(--bro-abstand-12);
  margin: 0;
  padding: 0;
  list-style: none;
}

.portal-tagestafel-liste li {
  display: grid;
  gap: var(--bro-abstand-4);
}

.portal-tagestafel-liste form {
  margin: 0;
}

@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (max-height: 479px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (orientation: portrait) {
  .portal-tagestafel {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Reports #10746: ein gemeinsamer Kasten, nur der gewählte Server-Reiter.
   Die Fachtafeln behalten Diagramme, unabhängige Pager und eigene Formulare. */
.portal-berichte-modern {
  grid-template-columns: minmax(0, 1fr);
}

.portal-berichte-box > .bro-reiter {
  margin: 0;
}

.portal-berichte-box > .bb-box-inhalt {
  display: grid;
  gap: var(--bro-abstand-24);
}

.portal-berichte-box .portal-uebersicht-karte {
  min-width: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
}

/* Die vorhandene Modern-Kopfleiste zieht sich sonst um den entfernten
   Karteninnenabstand nach außen und wird im Abschnitt abgeschnitten. */
.portal-berichte-box .portal-uebersicht-karte > .portal-uebersicht-kopf:first-child {
  margin: 0;
}

.portal-berichte-box .portal-uebersicht-karte + .portal-uebersicht-karte {
  padding-top: var(--bro-abstand-24);
  border-top: 1px solid var(--bro-linie);
}

.portal-berichte-box section {
  min-width: 0;
  overflow-x: auto;
}

.portal-berichte-box .portal-formular,
.portal-berichte-box form {
  min-width: 0;
  overflow-wrap: anywhere;
}

.portal-berichte-box input,
.portal-berichte-box select {
  max-width: 100%;
}

.portal-berichte-box nav[aria-label^="Blättern"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-8);
  padding: var(--bro-abstand-12) var(--bro-abstand-16);
  border-top: 1px solid var(--bro-linie);
  background: var(--bro-flaeche-0);
}

/* Fehler-Melder: Formular, Dialog, Bildfläche, Markieren, Anhänge, Quittung.
   Das Formular kommt vom Server (`seite.ts`), das Verhalten aus
   `melder-verhalten.ts`. Nur Tokens (B14.7/B17); hell und dunkel schalten die
   Tokens selbst. Gerätklassen nur über die Platzhalter `@media (--bro-geraet-…)`. */

/* Schleier hinter Dialog und Elementwahl: im Hellen die Tinte, im Dunkeln die
   dunkelste Fläche — so dunkelt er in beiden Fassungen ab, statt aufzuhellen. */
:root {
  --portal-melder-schleier: color-mix(
    in oklab,
    var(--bro-tinte-1) var(--bro-melder-schleier-hell-deckkraft),
    transparent
  );
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --portal-melder-schleier: color-mix(
      in oklab,
      var(--bro-flaeche-0) var(--bro-melder-schleier-dunkel-deckkraft),
      transparent
    );
  }
}

:root[data-theme="dark"] {
  --portal-melder-schleier: color-mix(
    in oklab,
    var(--bro-flaeche-0) var(--bro-melder-schleier-dunkel-deckkraft),
    transparent
  );
}

/* ---- Formular ---- */

.portal-melder {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-16);
  min-width: 0;
}

.portal-melder label {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
  font-size: var(--bro-schrift-klein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
  color: var(--bro-tinte-1);
}

.portal-melder textarea {
  min-height: 7.5rem;
  padding: var(--bro-abstand-8) var(--bro-abstand-12);
  border: 1px solid var(--bro-linie-stark);
  border-radius: var(--bro-radius-s);
  background: var(--bro-flaeche-1);
  color: var(--bro-tinte-1);
  font: inherit;
  font-size: var(--bro-schrift-fliesstext-groesse);
  font-weight: var(--bro-schrift-fliesstext-gewicht);
  line-height: var(--bro-schrift-fliesstext-zeilenhoehe);
  resize: vertical;
}

.portal-melder textarea::placeholder {
  color: var(--bro-tinte-3);
}

.portal-melder textarea:focus-visible,
.portal-melder select:focus-visible {
  outline: var(--bro-fokus-breite) solid var(--bro-akzent);
  outline-offset: var(--bro-fokus-abstand);
}

/* ---- Art der Meldung: drei Kacheln ---- */

.portal-melder-arten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--bro-abstand-12);
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.portal-melder-arten > legend {
  margin-bottom: var(--bro-abstand-8);
  padding: 0;
  font-size: var(--bro-schrift-klein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
}

.portal-melder .portal-melder-art {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--bro-abstand-8);
  padding: var(--bro-abstand-12) var(--bro-abstand-16);
  border: 1px solid var(--bro-linie-stark);
  border-radius: var(--bro-radius-m);
  background: var(--bro-flaeche-1);
  color: var(--bro-tinte-1);
  cursor: pointer;
  transition:
    border-color var(--bro-melder-uebergangsdauer) var(--bro-melder-uebergangskurve),
    background-color var(--bro-melder-uebergangsdauer) var(--bro-melder-uebergangskurve),
    box-shadow var(--bro-melder-uebergangsdauer) var(--bro-melder-uebergangskurve);
}

.portal-melder-art:hover {
  border-color: var(--bro-tinte-3);
  background: var(--bro-flaeche-0);
}

/* Das Auswahlfeld bleibt bedienbar und vorlesbar, ist nur unsichtbar. */
.portal-melder-art input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: var(--bro-melder-unsichtbar-deckkraft);
  pointer-events: none;
}

.portal-melder-art svg {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--bro-tinte-2);
}

.portal-melder-art > span {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
  min-width: 0;
}

.portal-melder-art strong {
  font-size: var(--bro-schrift-betont-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
  line-height: var(--bro-schrift-betont-zeilenhoehe);
}

.portal-melder-art small {
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-fein-groesse);
  font-weight: var(--bro-schrift-fliesstext-gewicht);
  line-height: var(--bro-schrift-fein-zeilenhoehe);
}

.portal-melder-art:has(input:checked),
.portal-melder-art[data-gewaehlt="ja"] {
  border-color: var(--bro-akzent);
  background: var(--bro-akzent-flaeche);
  box-shadow: inset 0 0 0 1px var(--bro-akzent);
}

.portal-melder-art:has(input:checked) svg,
.portal-melder-art[data-gewaehlt="ja"] svg {
  color: var(--bro-akzent-text);
}

.portal-melder-art:has(input:focus-visible) {
  outline: var(--bro-fokus-breite) solid var(--bro-akzent);
  outline-offset: var(--bro-fokus-abstand);
}

/* ---- Bildschirmfoto ---- */

.portal-melder-bild {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
}

.portal-melder-bildflaeche {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 8rem;
  padding: var(--bro-abstand-12);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
  background: var(--bro-flaeche-0);
  overflow: hidden;
}

.portal-melder-bildflaeche[data-zustand="bild"] {
  min-height: 0;
  padding: 0;
  background: var(--bro-flaeche-1);
}

.portal-melder-bildflaeche [data-melder-bild-hinweis] {
  margin: 0;
  max-width: 32rem;
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
  text-align: center;
}

.portal-melder-bildflaeche[data-zustand="laedt"] {
  animation: portal-melder-puls var(--bro-melder-ladedauer) var(--bro-melder-ladekurve) infinite;
}

@keyframes portal-melder-puls {
  0%,
  100% {
    background: var(--bro-flaeche-0);
  }
  50% {
    background: color-mix(
      in oklab,
      var(--bro-flaeche-0) var(--bro-melder-lade-flaechenanteil),
      var(--bro-linie)
    );
  }
}

/* Ein Bild zum Hineinziehen: deutlich, wohin es fällt. */
.portal-melder-bild[data-zieht="ja"] .portal-melder-bildflaeche {
  border-style: dashed;
  border-color: var(--bro-akzent);
  background: var(--bro-akzent-flaeche);
}

/* Die Bühne ist genau so groß wie das gezeigte Bild — sonst lägen die
   Markierungen neben dem Bild statt darauf. */
.portal-melder-buehne {
  position: relative;
  min-width: 0;
  max-width: 100%;
  line-height: 0;
}

.portal-melder-vorschau {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 22rem;
  user-select: none;
}

/* Die Zeichenfläche liegt genau über dem Bild. */
.portal-melder-zeichnung {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none;
}

.portal-melder-notizfeld {
  position: absolute;
  z-index: 1;
  width: 14rem;
  max-width: 60%;
  padding: var(--bro-abstand-4) var(--bro-abstand-8);
  border: 2px solid var(--bro-fehler);
  border-radius: var(--bro-radius-s);
  background: var(--bro-flaeche-1);
  color: var(--bro-tinte-1);
  font: inherit;
  font-size: var(--bro-schrift-klein-groesse);
  line-height: var(--bro-schrift-klein-zeilenhoehe);
  box-shadow: var(--bro-schatten-menue);
  transform: translateY(-50%);
}

/* ---- Werkzeuge: eine Segmentgruppe ---- */

.portal-melder-werkzeuge:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-8);
}

.portal-melder-werkzeuge button,
.portal-melder-bildaktionen button,
.portal-melder-schliessen,
.portal-melder-anhang-weg,
.portal-melder-quittung-schliessen {
  font: inherit;
  cursor: pointer;
}

.portal-melder-werkzeuge button {
  min-height: var(--bro-abstand-32);
  padding: var(--bro-abstand-4) var(--bro-abstand-12);
  border: 1px solid var(--bro-linie-stark);
  border-radius: var(--bro-radius-s);
  background: var(--bro-flaeche-1);
  color: var(--bro-tinte-1);
  font-size: var(--bro-schrift-klein-groesse);
}

.portal-melder-werkzeuge button:hover {
  background: var(--bro-flaeche-0);
}

/* Die drei Werkzeuge rücken zu einer Gruppe zusammen. */
.portal-melder-werkzeuge [data-markier-werkzeug] + [data-markier-werkzeug] {
  margin-left: calc(-1 * var(--bro-abstand-8) - 1px);
}

.portal-melder-werkzeuge [data-markier-werkzeug][aria-pressed="true"] {
  position: relative;
  z-index: 1;
  border-color: var(--bro-akzent);
  background: var(--bro-akzent);
  color: var(--bro-akzent-tinte);
}

.portal-melder-werkzeuge [data-markier-zurueck] {
  margin-left: var(--bro-abstand-8);
}

.portal-melder-werkzeuge [data-markier-zaehler] {
  margin-left: auto;
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-fein-groesse);
}

.portal-melder-werkzeuge button:focus-visible,
.portal-melder-bildaktionen button:focus-visible,
.portal-melder-schliessen:focus-visible,
.portal-melder-anhang-weg:focus-visible,
.portal-melder-quittung-schliessen:focus-visible {
  outline: var(--bro-fokus-breite) solid var(--bro-akzent);
  outline-offset: var(--bro-fokus-abstand);
}

.portal-melder-bildaktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-8) var(--bro-abstand-16);
}

.portal-melder-bildaktionen label {
  flex-direction: row;
  align-items: center;
  font-weight: var(--bro-schrift-fliesstext-gewicht);
}

.portal-melder-bildaktionen button {
  padding: var(--bro-abstand-4) 0;
  border: 0;
  background: none;
  color: var(--bro-akzent-text);
  font-size: var(--bro-schrift-klein-groesse);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.portal-melder-bildaktionen [data-melder-bild-entfernen] {
  color: var(--bro-fehler);
}

/* ---- Anhänge: Ablagefläche und Liste ---- */

.portal-melder-anhaenge {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  padding: var(--bro-abstand-12) var(--bro-abstand-16);
  border: 1px dashed var(--bro-linie-stark);
  border-radius: var(--bro-radius-m);
  background: var(--bro-flaeche-1);
  transition:
    border-color var(--bro-melder-uebergangsdauer) var(--bro-melder-uebergangskurve),
    background-color var(--bro-melder-uebergangsdauer) var(--bro-melder-uebergangskurve);
}

.portal-melder-anhaenge:hover {
  border-color: var(--bro-tinte-3);
}

.portal-melder-anhaenge[data-zieht="ja"] {
  border-color: var(--bro-akzent);
  background: var(--bro-akzent-flaeche);
}

.portal-melder-ablage-hinweis,
.portal-melder-anhang-hinweis {
  margin: 0;
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-fein-groesse);
}

.portal-melder-anhang-hinweis {
  color: var(--bro-fehler);
}

.portal-melder-anhaenge ul {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.portal-melder-anhang {
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-8);
  padding: var(--bro-abstand-4) var(--bro-abstand-4) var(--bro-abstand-4) var(--bro-abstand-12);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-s);
  background: var(--bro-flaeche-0);
  font-size: var(--bro-schrift-klein-groesse);
}

.portal-melder-anhang-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-melder-anhang-groesse {
  flex: none;
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-fein-groesse);
  font-variant-numeric: tabular-nums;
}

.portal-melder-anhang-weg,
.portal-melder-schliessen,
.portal-melder-quittung-schliessen {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--bro-abstand-32);
  height: var(--bro-abstand-32);
  padding: 0;
  border: 0;
  border-radius: var(--bro-radius-s);
  background: none;
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-titel-groesse);
  line-height: 1;
}

.portal-melder-anhang-weg:hover,
.portal-melder-schliessen:hover,
.portal-melder-quittung-schliessen:hover {
  background: var(--bro-flaeche-0);
  color: var(--bro-tinte-1);
}

.portal-melder-anhang-weg:hover {
  color: var(--bro-fehler);
}

/* ---- Mehr Angaben, Umgebung, Fehler, Fuß ---- */

.portal-melder-mehr {
  border-top: 1px solid var(--bro-linie);
  padding-top: var(--bro-abstand-12);
}

.portal-melder-mehr > summary {
  width: fit-content;
  color: var(--bro-akzent-text);
  font-size: var(--bro-schrift-klein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
  cursor: pointer;
}

.portal-melder-mehr select {
  padding: var(--bro-abstand-8) var(--bro-abstand-12);
  border: 1px solid var(--bro-linie-stark);
  border-radius: var(--bro-radius-s);
  background: var(--bro-flaeche-1);
  color: var(--bro-tinte-1);
  font: inherit;
  font-weight: var(--bro-schrift-fliesstext-gewicht);
}

.portal-melder-mehr[open] > summary {
  margin-bottom: var(--bro-abstand-12);
}

.portal-melder-mehr label {
  max-width: 24rem;
}

.portal-melder-mehr label + label {
  margin-top: var(--bro-abstand-12);
}

.portal-melder-umgebung {
  margin: 0;
  color: var(--bro-tinte-3);
  font-size: var(--bro-schrift-fein-groesse);
  line-height: var(--bro-schrift-fein-zeilenhoehe);
  overflow-wrap: anywhere;
}

.portal-melder [data-melder-fehler]:not([hidden]) {
  margin: 0;
  padding: var(--bro-abstand-8) var(--bro-abstand-12);
  border: 1px solid var(--bro-fehler-linie);
  border-radius: var(--bro-radius-s);
  background: var(--bro-fehler-flaeche);
  color: var(--bro-fehler);
  font-size: var(--bro-schrift-klein-groesse);
}

.portal-melder-fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--bro-abstand-12);
}

.portal-melder-fuss [data-melder-abbrechen] {
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
}

.portal-melder[aria-busy="true"] .portal-melder-fuss button[type="submit"] {
  cursor: progress;
}

/* ---- Dialog ---- */

.portal-melder-dialog {
  width: calc(100% - 2 * var(--bro-abstand-16));
  max-width: 44rem;
  max-height: 90vh;
  margin: auto;
  padding: 0;
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-l);
  background: var(--bro-flaeche-1);
  color: var(--bro-tinte-1);
  box-shadow: var(--bro-schatten-dialog);
  overflow: hidden;
}

.portal-melder-dialog[open] {
  display: flex;
  flex-direction: column;
}

.portal-melder-dialog::backdrop {
  background: var(--portal-melder-schleier);
  backdrop-filter: blur(3px);
}

.portal-melder-dialog-kopf {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--bro-abstand-12);
  padding: var(--bro-abstand-12) var(--bro-abstand-16) var(--bro-abstand-12) var(--bro-abstand-24);
  border-bottom: 1px solid var(--bro-linie);
}

.portal-melder-dialog-titel {
  margin: 0;
  font-size: var(--bro-schrift-titel-groesse);
  font-weight: var(--bro-schrift-titel-gewicht);
  line-height: var(--bro-schrift-titel-zeilenhoehe);
}

.portal-melder-dialog-inhalt {
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--bro-abstand-16) var(--bro-abstand-24) 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Die Knöpfe bleiben beim Rollen sichtbar. */
.portal-melder-dialog .portal-melder-fuss {
  position: sticky;
  bottom: 0;
  margin: 0 calc(-1 * var(--bro-abstand-24));
  padding: var(--bro-abstand-12) var(--bro-abstand-24);
  border-top: 1px solid var(--bro-linie);
  background: var(--bro-flaeche-1);
}

.portal-melder-laedt {
  margin: 0;
  padding: var(--bro-abstand-32) 0;
  color: var(--bro-tinte-2);
  text-align: center;
  animation: portal-melder-blinken var(--bro-melder-ladedauer) var(--bro-melder-ladekurve) infinite;
}

@keyframes portal-melder-blinken {
  0%,
  100% {
    opacity: var(--bro-melder-sichtbar-deckkraft);
  }
  50% {
    opacity: var(--bro-melder-lade-deckkraft);
  }
}

/* ---- Quittung unten rechts ---- */

.portal-melder-quittung {
  position: fixed;
  right: var(--bro-abstand-24);
  bottom: var(--bro-abstand-24);
  z-index: 2147483000;
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-12);
  max-width: min(26rem, calc(100vw - 2 * var(--bro-abstand-16)));
  padding: var(--bro-abstand-12) var(--bro-abstand-8) var(--bro-abstand-12) var(--bro-abstand-16);
  border: 1px solid var(--bro-linie);
  border-left: 4px solid var(--bro-erfolg);
  border-radius: var(--bro-radius-m);
  background: var(--bro-flaeche-1);
  color: var(--bro-tinte-1);
  box-shadow: var(--bro-schatten-dialog);
  animation: portal-melder-einblenden var(--bro-melder-einblenddauer)
    var(--bro-melder-einblendkurve);
}

.portal-melder-quittung-text {
  flex: 1;
  margin: 0;
  font-size: var(--bro-schrift-klein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
}

.portal-melder-quittung-link {
  flex: none;
  color: var(--bro-akzent-text);
  font-size: var(--bro-schrift-klein-groesse);
  white-space: nowrap;
}

@keyframes portal-melder-einblenden {
  from {
    opacity: var(--bro-melder-unsichtbar-deckkraft);
    transform: translateY(var(--bro-abstand-12));
  }
  to {
    opacity: var(--bro-melder-sichtbar-deckkraft);
    transform: none;
  }
}

/* ---- Element auf der Seite zeigen ---- */

:root[data-melder-picker-aktiv],
:root[data-melder-picker-aktiv] * {
  cursor: crosshair !important;
}

.portal-melder-picker-rahmen {
  position: fixed;
  z-index: 2147483646;
  border: 3px solid var(--bro-akzent);
  border-radius: var(--bro-radius-s);
  background: color-mix(
    in oklab,
    var(--bro-akzent) var(--bro-melder-picker-deckkraft),
    transparent
  );
  box-shadow: 0 0 0 100vmax var(--portal-melder-schleier);
  pointer-events: none;
  transition:
    left var(--bro-melder-picker-uebergangsdauer) var(--bro-melder-picker-uebergangskurve),
    top var(--bro-melder-picker-uebergangsdauer) var(--bro-melder-picker-uebergangskurve),
    width var(--bro-melder-picker-uebergangsdauer) var(--bro-melder-picker-uebergangskurve),
    height var(--bro-melder-picker-uebergangsdauer) var(--bro-melder-picker-uebergangskurve);
}

.portal-melder-picker-hinweis {
  position: fixed;
  top: var(--bro-abstand-16);
  left: 50%;
  z-index: 2147483647;
  max-width: calc(100vw - 2 * var(--bro-abstand-16));
  padding: var(--bro-abstand-8) var(--bro-abstand-24);
  border-radius: var(--bro-radius-m);
  background: var(--bro-tinte-1);
  color: var(--bro-flaeche-1);
  box-shadow: var(--bro-schatten-dialog);
  font-size: var(--bro-schrift-klein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
  text-align: center;
  pointer-events: none;
  transform: translateX(-50%);
}

/* ---- Schmale Schirme ---- */

@media (max-width: 767px) and (orientation: portrait) {
  .portal-melder-arten {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--bro-abstand-8);
  }

  .portal-melder .portal-melder-art {
    flex-direction: row;
    align-items: center;
    padding: var(--bro-abstand-8) var(--bro-abstand-12);
  }
}

@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (max-height: 479px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (orientation: portrait) {
  /* Auf dem Handy volle Breite, unten angedockt. */
  .portal-melder-dialog {
    width: 100%;
    max-width: none;
    max-height: 92dvh;
    margin: auto 0 0;
    border-width: 1px 0 0;
    border-radius: var(--bro-radius-l) var(--bro-radius-l) 0 0;
  }

  .portal-melder-dialog-kopf {
    padding-left: var(--bro-abstand-16);
  }

  .portal-melder-dialog-inhalt {
    padding: var(--bro-abstand-12) var(--bro-abstand-16) 0;
  }

  .portal-melder-dialog .portal-melder-fuss {
    margin: 0 calc(-1 * var(--bro-abstand-16));
    padding: var(--bro-abstand-12) var(--bro-abstand-16);
  }

  .portal-melder-quittung {
    right: var(--bro-abstand-16);
    bottom: var(--bro-abstand-16);
    left: var(--bro-abstand-16);
    max-width: none;
  }

  .portal-melder-vorschau {
    max-height: 16rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .portal-melder-bildflaeche[data-zustand="laedt"],
  .portal-melder-laedt,
  .portal-melder-quittung {
    animation: none;
  }

  .portal-melder-art,
  .portal-melder-anhaenge,
  .portal-melder-picker-rahmen {
    transition: none;
  }
}

/* Die Dateiwahl wie ein ruhiger Knopf statt des nackten Browser-Felds. */
.portal-melder input[type="file"] {
  max-width: 100%;
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
}

.portal-melder input[type="file"]::file-selector-button {
  margin-right: var(--bro-abstand-8);
  padding: var(--bro-abstand-4) var(--bro-abstand-12);
  font: inherit;
  color: var(--bro-tinte-1);
  cursor: pointer;
  background: var(--bro-flaeche-1);
  border: 1px solid var(--bro-linie-stark);
  border-radius: var(--bro-radius-s);
}

.portal-melder input[type="file"]::file-selector-button:hover {
  background: var(--bro-flaeche-0);
}

/*
 * Fahrer-App auf „Meine Fahrten“ (#9266) — Vorbild
 * docs/befunde/2026-10-15-krankenfahrt-nach-demo/quelltext-design.md
 * (.app-fahrt, .app-route, .app-status, .checkpunkt). Werte nur aus den
 * Haus-Tokens; eigene Datei, damit portal.css für die Nachbar-Tickets frei
 * bleibt. Gebündelt über scripts/buendel.ts.
 */
.kf-nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Tour des Tages (Demo: .app-fahrt) */
.kf-app-tourliste {
  list-style: none;
  margin: 0;
  padding: 0;
}
.kf-app-tourliste > li + li {
  border-top: 1px solid var(--bro-linie);
}
.kf-app-tourliste > li[data-erledigt="true"] {
  opacity: var(--bro-erledigt-deckkraft);
}
.kf-app-fahrt {
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-12);
  min-height: var(--bro-beruehrungsflaeche);
  padding: var(--bro-abstand-8) 0;
  color: inherit;
  text-decoration: none;
}
.kf-app-fahrt-zeit {
  font-weight: var(--bro-schrift-betont-gewicht);
  font-variant-numeric: tabular-nums;
}
.kf-app-fahrt-mitte {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.kf-app-fahrt-mitte small {
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kf-app-fahrt-art {
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
}

/* Navigation (Demo: Knopf „Navigation“ in .app-karte) */
.kf-app-navigation {
  display: inline-flex;
  align-items: center;
  gap: var(--bro-abstand-8);
  text-decoration: none;
}

/* „Navigation“ und „Disposition“ in einer Zeile (Demo: .zeile, #9784) */
.kf-app-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-8);
}

/* Transportschein (Demo: Karte „Transportschein“, .checkpunkt) */
.kf-app-schein {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  padding: var(--bro-abstand-12);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
  background: var(--bro-flaeche-0);
}
.kf-app-schein p {
  margin: 0;
}
.kf-app-checkpunkt {
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-8);
  width: 100%;
  min-height: var(--bro-beruehrungsflaeche);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.kf-app-checkpunkt[aria-pressed="true"] .bro-abhaken {
  border-color: var(--bro-erfolg);
  background: var(--bro-erfolg);
  color: var(--bro-akzent-tinte);
}
.kf-app-checkpunkt[aria-pressed="false"] .bro-abhaken .bro-symbol {
  visibility: hidden;
}
[data-schein="fotografiert"] [data-schein-zustand],
[data-schein="liegt-vor"] [data-schein-zustand] {
  color: var(--bro-erfolg);
}

/* „Bro hat gelesen“ (#9891, Demo: .app-scan) */
.kf-app-schein-lesung {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  padding: var(--bro-abstand-12);
  border-radius: var(--bro-radius-m);
  background: var(--bro-flaeche-1);
}
.kf-app-schein-werte {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--bro-abstand-4) var(--bro-abstand-12);
  margin: 0;
}
.kf-app-schein-werte dt {
  color: var(--bro-tinte-2);
}
.kf-app-schein-werte dd {
  margin: 0;
  overflow-wrap: anywhere;
}

/* Die fünf Status (Demo: .app-status) */
.kf-app-status {
  display: flex;
  gap: var(--bro-abstand-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.kf-app-status > li {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: var(--bro-abstand-4);
  min-width: 0;
  text-align: center;
}
.kf-app-status-marke {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--bro-abstand-24);
  background: var(--bro-flaeche-1);
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
}
.kf-app-status > li[data-stand="erledigt"] .kf-app-status-marke {
  background: var(--bro-erfolg);
  color: var(--bro-akzent-tinte);
}
.kf-app-status > li[data-stand="dran"] .kf-app-status-marke {
  background: var(--bro-akzent);
  color: var(--bro-akzent-tinte);
}
.kf-app-status-name {
  width: 100%;
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-fein-groesse);
  line-height: var(--bro-schrift-fein-zeilenhoehe);
  /* Silbentrennung nach `lang="de"` statt Bruch mitten im Wort. */
  hyphens: auto;
  overflow-wrap: break-word;
}
.kf-app-status > li[data-stand="dran"] .kf-app-status-name {
  width: 100%;
  color: var(--bro-tinte-1);
  font-weight: var(--bro-schrift-betont-gewicht);
}
.kf-app-symbol {
  width: var(--bro-abstand-16);
  height: var(--bro-abstand-16);
}

/* Der nächste Schritt über die ganze Breite (Demo: knopf „primaer voll“).
   Schrift und Grundgröße kommen seit #9599 aus `.bro-knopf--gross`; hier nur
   die volle Breite und die Handschuh-Höhe. */
.kf-app-knopf-gross {
  width: 100%;
  min-height: calc(var(--bro-beruehrungsflaeche) + var(--bro-abstand-8));
}

/* Fahrer-App der Disposition (#9784) — Demo `SEITEN.app`, `appHandy`
   (quelltext-design.md: .app-seite, .handy, .app-schritt). Links das Handy,
   rechts die Schritte und „Diese Tour“; schmal untereinander. */
/* Reiter „Geräte“ / „Ansicht des Fahrers“ (#9883). */
.kf-fa-reiter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-8);
  margin-bottom: var(--bro-abstand-16);
}
.kf-fa-seite {
  display: grid;
  grid-template-columns: 24.5rem minmax(0, 1fr);
  gap: calc(var(--bro-abstand-24) + var(--bro-abstand-4));
  align-items: start;
}
.kf-fa-stapel {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-16);
}
/* „Wagen wählen“ (#9944): Auswahl und Knopf in einer Zeile, schmal untereinander. */
.kf-fa-wahl {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--bro-abstand-8);
}
.kf-fa-wahl label {
  display: flex;
  flex: 1 1 14rem;
  flex-direction: column;
  gap: var(--bro-abstand-4);
}
.kf-fa-handy {
  margin: 0;
  display: flex;
  justify-content: center;
}
/* Demo `.handy`: 350 × 740 px, Rand 11 px, Ecken 46 px. */
.kf-fa-geraet {
  width: 21.875rem;
  height: 46.25rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 0.6875rem solid var(--bro-tinte-1);
  border-radius: 2.875rem;
  background: var(--bro-flaeche-0);
  box-shadow: var(--bro-schatten-dialog);
}
.kf-fa-statusleiste {
  display: flex;
  justify-content: space-between;
  padding: var(--bro-abstand-12) var(--bro-abstand-24) var(--bro-abstand-4);
  font-size: var(--bro-schrift-klein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
  font-variant-numeric: tabular-nums;
}
/* Im Gerät der Vorschau scrollt die Bühne selbst; Kopf und Reiter bleiben
   wie am Handy oben und unten stehen (#10273). */
.kf-fa-geraet .portal-wagenhandy-buehne {
  flex: 1;
  min-height: 0;
  max-width: none;
  overflow-y: auto;
}
/* Kartenköpfe wie die Demo `.fein`: kleine graue Zeile, normale Schreibung. */
.kf-fa-kopf {
  margin: 0;
  color: var(--bro-tinte-2);
}
.kf-fa-schritte {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  margin: var(--bro-abstand-12) 0 0;
  padding: 0;
  list-style: none;
}
.kf-fa-schritt {
  display: flex;
  align-items: flex-start;
  gap: var(--bro-abstand-12);
  padding: var(--bro-abstand-12);
  border: 1px solid var(--bro-linie);
  background: var(--bro-flaeche-1);
  color: var(--bro-tinte-1);
  text-decoration: none;
}
.kf-fa-schritt:hover {
  border-color: var(--bro-tinte-3);
}
.kf-fa-schritt[aria-current="step"] {
  border-color: var(--bro-akzent);
  background: var(--bro-akzent-flaeche);
}
.kf-fa-schritt small {
  display: block;
  margin-top: var(--bro-abstand-4);
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
}
.kf-fa-nr {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--bro-abstand-24);
  height: var(--bro-abstand-24);
  background: var(--bro-flaeche-1);
  border: 1px solid var(--bro-linie);
  font-size: var(--bro-schrift-klein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
}
.kf-fa-schritt[aria-current="step"] .kf-fa-nr {
  border-color: var(--bro-akzent);
  background: var(--bro-akzent);
  color: var(--bro-akzent-text);
}
.kf-fa-wertepaar {
  display: grid;
  grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
  gap: var(--bro-abstand-8) var(--bro-abstand-12);
  margin: var(--bro-abstand-12) 0;
}
.kf-fa-wertepaar dt {
  color: var(--bro-tinte-2);
}
.kf-fa-wertepaar dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.kf-fa-karte {
  align-self: flex-start;
}
@media (max-width: 1100px) {
  .kf-fa-seite {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 420px) {
  .kf-fa-geraet {
    width: 100%;
  }
}

/* „Mein Dienstplan“: Datum links, eigener Dienst rechts wie Bildschirm „mehr“.
   Eigenständige Ausrichtung, ohne die Summenzeilen der Stempelkarte zu ändern. */
[data-personen-dienstplan] .portal-wagenhandy-wertepaar {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 var(--bro-abstand-12);
}
[data-personen-dienstplan] dt,
[data-personen-dienstplan] dd {
  padding-block: var(--bro-abstand-8);
  border-bottom: 1px solid var(--bro-linie);
}
[data-personen-dienstplan] dd {
  text-align: right;
  font-weight: var(--bro-schrift-betont-gewicht);
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------------
 * Ein Aussehen für Wagenhandy und Fahrer-Konto (#10273) — Leinwand „Demo
 * Fahrdienst“, Baustein `FahrerHandy`: Knopf rechts im Kopf, Hinweise oben,
 * vier Kacheln auf „Heute“, Fahrtkarte mit Abholung und Ziel. Nur Tokens;
 * Bewegung nur, wo niemand sie abbestellt hat.
 * ------------------------------------------------------------------------- */
.portal-wagenhandy-kopf-knopf {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--bro-abstand-4);
  min-height: var(--bro-beruehrungsflaeche);
  border-radius: var(--bro-radius-rund);
  text-decoration: none;
}

.portal-wagenhandy-hinweiskarte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--bro-abstand-8);
  padding: var(--bro-abstand-12) var(--bro-abstand-16);
  border: 1px solid var(--bro-warnung-linie);
  border-radius: var(--bro-radius-l);
  background: var(--bro-warnung-flaeche);
  color: var(--bro-tinte-1);
}

.portal-wagenhandy-hinweiskarte > b {
  display: inline-flex;
  align-items: center;
  gap: var(--bro-abstand-8);
}

.portal-wagenhandy-kacheln {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--bro-abstand-8);
}

.portal-wagenhandy-kacheln > form {
  display: flex;
}

.portal-wagenhandy-kachel {
  width: 100%;
  min-height: calc(var(--bro-beruehrungsflaeche) * 2);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--bro-abstand-8);
  padding: var(--bro-abstand-12);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-l);
  background: var(--bro-flaeche-1);
  color: var(--bro-tinte-1);
  font: inherit;
  font-weight: var(--bro-schrift-betont-gewicht);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}

.portal-wagenhandy-kachel:hover {
  border-color: var(--bro-tinte-3);
}

.portal-wagenhandy-kachel:focus-visible {
  outline: var(--bro-fokus-breite) solid var(--bro-akzent);
  outline-offset: var(--bro-fokus-abstand);
}

.portal-wagenhandy-kachel--warnend {
  border-color: var(--bro-fehler-linie);
  color: var(--bro-fehler);
}

@media (prefers-reduced-motion: no-preference) {
  .portal-wagenhandy-kachel {
    transition: border-color 160ms ease;
  }
}

/* Fahrtkarte: Kopfzeile mit Marke, Name groß, Abholung und Ziel als Paar. */
.kf-app-karte-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bro-abstand-8);
}

.kf-app-karte-name {
  margin: 0;
  font-size: var(--bro-schrift-titel-groesse);
  line-height: var(--bro-schrift-titel-zeilenhoehe);
  font-weight: var(--bro-schrift-titel-gewicht);
}

.kf-app-orte {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  margin: 0;
}

.kf-app-orte dt {
  color: var(--bro-akzent-text);
  font-size: var(--bro-schrift-klein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
}

.kf-app-orte dd {
  margin: 0;
  font-weight: var(--bro-schrift-betont-gewicht);
  overflow-wrap: anywhere;
}

.kf-app-stand {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
  padding-top: var(--bro-abstand-12);
  border-top: 1px solid var(--bro-linie);
}

/* Tourliste: rechts der Stand je Fahrt (erledigt · jetzt dran · geplant). */
.kf-app-fahrt > .bro-marke {
  flex: none;
}

/* „Meine Fahrten“: der Tag mit ‹ › (#10273). */
.kf-app-tag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bro-abstand-8);
  padding: var(--bro-abstand-4);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-l);
  background: var(--bro-flaeche-1);
}

.kf-app-tag-pfeil {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--bro-beruehrungsflaeche);
  min-height: var(--bro-beruehrungsflaeche);
  border-radius: var(--bro-radius-m);
  color: var(--bro-tinte-1);
  font-size: var(--bro-schrift-titel-groesse);
  text-decoration: none;
}

.kf-app-tag-pfeil:focus-visible {
  outline: var(--bro-fokus-breite) solid var(--bro-akzent);
  outline-offset: calc(-1 * var(--bro-fokus-breite));
}

/* Nachrichten zu einer Fahrt (#10398): ein Verlauf je Fahrt, schmal und ohne Skript. */
.kf-nachrichten {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.kf-nachricht {
  padding: var(--bro-abstand-8) var(--bro-abstand-12);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
  background: var(--bro-flaeche-1);
  color: var(--bro-tinte-1);
}

.kf-nachricht-eigen {
  margin-left: var(--bro-abstand-24);
  background: var(--bro-flaeche-0);
}

.kf-nachricht p {
  margin: 0;
}

.kf-nachricht-text {
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.kf-nachricht-formular {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  margin-top: var(--bro-abstand-12);
}

.kf-nachricht-formular textarea {
  width: 100%;
  min-height: calc(3 * var(--bro-beruehrungsflaeche));
}

/* #10811: Nur Konto-Inhalte wechseln aus dem Büro-Rumpf in die Fahrerhülle.
 * Native Feldgruppen dürfen am schmalen Handy unter ihre intrinsische Breite
 * schrumpfen; Gerätesitzungen und Büro-Checkinnenflächen bleiben unberührt. */
.portal-fahrer-konto-inhalt {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
  min-width: 0;
  overflow-wrap: anywhere;
}

.portal-fahrer-konto-inhalt fieldset {
  min-inline-size: 0;
}

.portal-fahrer-konto-inhalt :is(input, select, textarea) {
  box-sizing: border-box;
  max-width: 100%;
}

/* Wie portal.css (#7286): Der Elternrahmen scrollt, die Tabelle behält
 * native Spalten. Lange Namen brechen an Wörtern statt beliebig pro Zeichen;
 * Überschriften bestimmen die lesbare Mindestbreite ihrer Spalte. */
.portal-fahrer-konto-inhalt :has(> .bro-tabelle) {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
}

.portal-fahrer-konto-inhalt .bro-tabelle {
  display: table;
  width: 100%;
  table-layout: auto;
  overflow-wrap: normal;
}

.portal-fahrer-konto-inhalt .bro-tabelle th {
  white-space: nowrap;
}

/* #10701: eine Modern-Box, vollständige Tabellen auf Bildschirm und Papier. */
.krankenfahrt-tageszettel-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--bro-abstand-12);
}
.krankenfahrt-tageszettel-filter label {
  display: grid;
  gap: var(--bro-abstand-4);
  min-width: 0;
  max-width: 100%;
}
.krankenfahrt-tageszettel-filter select {
  max-width: 100%;
}
.krankenfahrt-tageszettel--modern .krankenfahrt-tageszettel-block {
  padding-block: var(--bro-abstand-16);
  border-bottom: 1px solid var(--bro-linie);
  min-width: 0;
  overflow-wrap: anywhere;
}
.krankenfahrt-tageszettel--modern table {
  width: 100%;
  table-layout: fixed;
  min-width: 48rem;
}
.krankenfahrt-tageszettel--modern :is(th, td) {
  white-space: normal;
  overflow-wrap: anywhere;
}
.krankenfahrt-tageszettel-tabelle {
  overflow-x: auto;
}
.krankenfahrt-tageszettel-tabelle:focus-visible {
  outline: 2px solid var(--bro-akzent);
  outline-offset: 2px;
}
@media print {
  .krankenfahrt-tageszettel-tabelle {
    overflow: visible;
  }
  .krankenfahrt-tageszettel table {
    min-width: 0;
  }
  body:has(.krankenfahrt-tageszettel) .portal-hauptspalte {
    display: block;
    min-height: 0;
  }
  body:has(.krankenfahrt-tageszettel) .portal-hauptspalte > :not(.portal-inhalt),
  body:has(.krankenfahrt-tageszettel) :is(.portal-kopf, .mo-fuss) {
    display: none;
  }
  .krankenfahrt-tageszettel-box :is(.bb-filterband, .bb-filterzeile),
  body:has(.krankenfahrt-tageszettel) :is(.portal-seitenkopf, .portal-topbar) {
    display: none;
  }
  .krankenfahrt-tageszettel-box,
  .krankenfahrt-tageszettel-box .bb-box-inhalt {
    display: block;
    overflow: visible;
    padding: 0;
    border: 0;
    box-shadow: none;
  }
  .krankenfahrt-tageszettel table {
    table-layout: fixed;
    width: 100%;
  }
  .krankenfahrt-tageszettel :is(th, td) {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .krankenfahrt-tageszettel tr {
    break-inside: avoid;
  }
}

.krankenfahrt-tageszettel--modern th:first-child {
  width: 3rem;
}
.krankenfahrt-tageszettel--modern th:nth-child(2) {
  width: 4rem;
}

/* Beauty-Rahmen und Bausteine im Konsolen-Konzept (#9987, Bündel #9986).
   Entwurf: docs/design-canvas/beauty/ (BsCal01–12, Haut-*), Regeln 1–12 in
   docs/design-canvas/KonsoleModern.md. Nur Tokens (B14.7).

   Zwei Teile:
   1. Rahmen — hängt an `html[data-rahmen="beauty"]` (`seiten.ts`,
      `beauty-rahmen.ts`); kein anderer Betrieb sieht davon etwas.
   2. Bausteine `.bb-*` (`beauty-bausteine.ts`) — ohne Rahmen-Bindung, weil
      Termin-Detail und Buchungen-Liste jeder Betrieb sieht. */

/* ---- 1. Rahmen ---------------------------------------------------------- */

/* Keine Kopfleiste: Die Hauptspalte beginnt oben mit dem Seitenkopf
   (Bauart des Fahrdienst-Rahmens, #9779). */
html[data-rahmen="beauty"] .portal-schale {
  grid-template-columns: 248px minmax(0, 1fr);
}

/* In der Schublade (#10053) zeigt die Seite nur ihren Inhalt: keine Spalte
   für die Leiste, keine Brotkrumen, kein Fuß. Leiste und Kopf blendet schon
   `html[data-eingebettet]` in `portal.css` aus. */
html[data-eingebettet][data-rahmen="beauty"] .portal-schale {
  display: block;
}

html[data-eingebettet] .bb-brotkrumen,
html[data-eingebettet] .bb-fuss {
  display: none;
}

/* Den Rechtsfuß unter der Schale ersetzt die Fußzeile im Inhalt
   (`beautyFussHtml`), die dieselben zwei Wege trägt. */
html[data-rahmen="beauty"] body > .portal-rechtsfuss {
  display: none;
}

.bb-leiste {
  gap: var(--bro-abstand-16);
  border-right: 1px solid var(--bro-linie);
  background: var(--bro-flaeche-1);
}

/* Oben das Logo des Studios, mittig, ohne BroDesk-Marke (E3). */
.bb-logo-kopf {
  justify-content: center;
  padding: var(--bro-abstand-4) var(--bro-abstand-8) 0;
}

.bb-logo-kopf .portal-firmenlogo {
  width: auto;
  max-width: 160px;
  height: auto;
  max-height: 96px;
}

/* „Suchen ⌘K“ oben in der Leiste; die Treffer klappen über den Inhalt auf. */
.bb-leiste > .portal-kopfsuche {
  flex: none;
  max-width: none;
}

.bb-leiste .portal-suchliste {
  right: auto;
  width: 26rem;
  max-width: calc(100vw - 2 * var(--bro-abstand-16));
}

/* Gruppentitel ohne Pfeil, mit Farbpunkt (Entwurf BsCal01). */
.bb-leiste p.portal-nav-gruppentitel {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--bro-abstand-8);
  letter-spacing: normal;
  text-transform: none;
  margin: 0;
  padding: 0 10px var(--bro-abstand-4);
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-fein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
  cursor: default;
}

.bb-gruppenpunkt {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: var(--bro-konsole-radius-pille);
  background: var(--bb-punkt);
}

.bb-leiste .portal-nav-gruppe + .portal-nav-gruppe {
  margin-top: var(--bro-abstand-12);
}

/* Punkte 36 px hoch, einfarbiges Symbol; der aktive getönt (Regel der Leiste). */
.bb-leiste .portal-navigation .bro-navigationspunkt {
  min-height: 36px;
  padding-block: 6px;
  border-radius: var(--bro-konsole-radius-navi);
}

.bb-leiste .portal-navigation .bro-navigationspunkt[aria-current="page"] {
  border-color: transparent;
  background: var(--bro-akzent-flaeche);
  font-weight: var(--bro-schrift-betont-gewicht);
}

.bb-leiste-symbol {
  display: inline-flex;
  flex: none;
  color: var(--bro-tinte-3);
}

.bb-leiste-symbol .bro-symbol {
  width: 18px;
  height: 18px;
}

.bb-leiste .bro-navigationspunkt[aria-current="page"] .bb-leiste-symbol {
  color: var(--bro-akzent);
}

/* Der Kopf nur auf dem Handy (Entwurf BsCal11). */
.bb-mobilkopf {
  display: none;
}

.bb-mobilkopf .bb-logo-kopf {
  padding: 0;
}

.bb-mobilkopf .portal-firmenlogo {
  max-height: 40px;
}

@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (max-height: 479px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (orientation: portrait) {
  .bb-mobilkopf {
    display: flex;
  }

  /* Wie jede Schale: auf dem Handy wird die Leiste zur Schublade. */
  html[data-rahmen="beauty"] .portal-schale {
    grid-template-columns: minmax(0, 1fr);
  }

  html[data-rahmen="beauty"] .portal-hauptspalte {
    padding-bottom: 0;
  }
}

/* Seitenkopf: Brotkrumen (Regel 2) und Satz unter der Überschrift (Regel 1). */
.bb-brotkrumen li {
  display: inline-flex;
  align-items: center;
}

.bb-brotkrumen ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 var(--bro-abstand-8);
  padding: 0;
  list-style: none;
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
  line-height: var(--bro-schrift-klein-zeilenhoehe);
}

.bb-brotkrumen a {
  color: var(--bro-akzent-text);
  text-decoration: none;
}

.bb-brotkrumen a:hover {
  text-decoration: underline;
}

.bb-brotkrumen [aria-current="page"] {
  color: var(--bro-tinte-1);
}

.bb-brotkrume-trenner {
  color: var(--bro-tinte-3);
}

.portal-seitenkopf-satz {
  margin: var(--bro-abstand-4) 0 0;
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-fliesstext-groesse);
  line-height: var(--bro-schrift-fliesstext-zeilenhoehe);
}

/* Die ruhige Fußzeile am Ende des Inhalts (Regel 6, Kurzform F7). */
.bb-fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-12) var(--bro-abstand-24);
  margin-top: var(--bro-abstand-32);
  padding-top: var(--bro-abstand-16);
  border-top: 1px solid var(--bro-linie);
  color: var(--bro-tinte-3);
  font-size: var(--bro-schrift-fein-groesse);
}

.bb-fuss-wege {
  display: flex;
  gap: var(--bro-abstand-16);
}

.bb-fuss-wege a {
  color: var(--bro-tinte-2);
}

.bb-fuss-marke {
  display: inline-flex;
  align-items: center;
  gap: var(--bro-abstand-8);
  margin-left: auto;
}

.bb-fuss-marke > .bro-desk-logo {
  width: auto;
  height: 16px;
}

/* ---- 2. Bausteine ------------------------------------------------------- */

.bb-unsichtbar {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}

/* Meldungsblock oben (Regeln 7 und 8): jede Meldung mit ×. */
.bb-meldungen {
  display: grid;
  gap: var(--bro-abstand-8);
  margin: var(--bro-abstand-16) 0;
}

.bb-meldung {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: var(--bro-abstand-12) 14px;
  border: 1px solid var(--bro-hinweis-linie);
  border-radius: var(--bro-konsole-radius-feld);
  background: var(--bro-hinweis-flaeche);
  color: var(--bro-tinte-1);
}

.bb-meldung > .bro-symbol {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--bro-akzent);
}

.bb-meldung.bb-art-erfolg {
  border-color: var(--bro-linie);
  background: var(--bro-flaeche-1);
}

.bb-meldung.bb-art-erfolg > .bro-symbol {
  color: var(--bro-erfolg);
}

.bb-meldung.bb-art-warnung {
  border-color: var(--bro-warnung-linie);
  background: var(--bro-warnung-flaeche);
}

.bb-meldung.bb-art-warnung > .bro-symbol {
  color: var(--bro-warnung);
}

.bb-meldung.bb-art-fehler {
  border-color: var(--bro-fehler-linie);
  background: var(--bro-fehler-flaeche);
}

.bb-meldung.bb-art-fehler > .bro-symbol {
  color: var(--bro-fehler);
}

.bb-meldung-text {
  flex: 1;
  min-width: 0;
}

.bb-weg {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: -4px -4px -4px auto;
  border-radius: var(--bro-konsole-radius-klein);
  color: var(--bro-tinte-2);
  cursor: pointer;
}

.bb-weg:hover {
  color: var(--bro-tinte-1);
}

.bb-weg:has(input:focus-visible) {
  outline: var(--bro-fokus-breite) solid var(--bro-akzent);
}

.bb-weg .bro-symbol {
  width: 14px;
  height: 14px;
}

.bb-meldung:has(.bb-weg input:checked) {
  display: none;
}

/* Box mit grauer Kopfleiste und Symbolkachel (Regel 3). */
.bb-box,
.portal-kunden-box,
.portal-aufgaben-box {
  min-width: 0;
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-konsole-radius-box);
  background: var(--bro-flaeche-1);
}

/* Eine Inhaltskomposition für Fachlisten und Details (#10584). Die Reiter
   kommen je nach bestehendem Aufrufer aus @bro/ui oder reiterLinksHtml. */
.bb-box > .bro-reiter {
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-inline: var(--bro-abstand-24);
}

.bb-box .bro-reiter-punkt {
  flex: none;
  white-space: nowrap;
}

.bb-filterband {
  padding: var(--bro-abstand-16) var(--bro-abstand-24);
  border-bottom: 1px solid var(--bro-linie);
}

.bb-filterband > .bb-suchband {
  padding: 0;
  border: 0;
}

.bb-filterzeile,
.bb-filterzeile nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-8);
}

.bb-filterzeile {
  margin-top: var(--bro-abstand-16);
}

.bb-box + .bb-box {
  margin-top: var(--bro-abstand-16);
}

/* Bestehende Karten behalten ihre Designmerkmale (etwa Alt-Schatten). Nur
   die Innenkomposition mit bündigen Reitern/Listen nimmt den Abstand zurück. */
.bb-box.bro-karte {
  border-radius: var(--bro-radius-l);
  padding: 0;
  overflow: hidden;
}

.bb-kopfleiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-12);
  padding: 14px var(--bro-abstand-24);
  border-bottom: 1px solid var(--bro-linie);
  border-radius: var(--bro-konsole-radius-box) var(--bro-konsole-radius-box) 0 0;
  background: var(--bro-flaeche-0);
}

.bb-kopfleiste h2 {
  margin: 0;
  color: var(--bro-tinte-1);
  font-size: var(--bro-schrift-betont-groesse);
  font-weight: var(--bro-schrift-titel-gewicht);
  line-height: var(--bro-schrift-betont-zeilenhoehe);
}

.bb-kachel {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--bro-konsole-radius-kachel);
  background: var(--bro-flaeche-1);
  box-shadow: inset 0 0 0 1px var(--bro-hinweis-linie);
  color: var(--bro-akzent);
}

.bb-kachel .bro-symbol {
  width: 16px;
  height: 16px;
}

.bb-zahl {
  margin-left: 6px;
  color: var(--bro-tinte-3);
  font-weight: var(--bro-schrift-betont-gewicht);
}

.bb-kopfleiste-zusatz {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-8);
  margin-left: auto;
}

.bb-box-inhalt {
  min-width: 0;
  padding: var(--bro-abstand-24);
}

.bb-box-inhalt.bb-buendig {
  padding: 0;
}

.bb-box-fuss {
  padding: var(--bro-abstand-12) var(--bro-abstand-24);
  border-top: 1px solid var(--bro-linie);
  border-radius: 0 0 var(--bro-konsole-radius-box) var(--bro-konsole-radius-box);
  background: var(--bro-flaeche-0);
}

/* Reiter in der Box, einzeilig (Regel 11). */
.bb-reiter {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--bro-abstand-4);
  overflow-x: auto;
  padding: 0 var(--bro-abstand-16);
  border-bottom: 1px solid var(--bro-linie);
}

.bb-reiter-knopf {
  flex: none;
  padding: var(--bro-abstand-12) 10px;
  border-bottom: 2px solid transparent;
  color: var(--bro-tinte-2);
  text-decoration: none;
  white-space: nowrap;
}

.bb-reiter-knopf:hover {
  color: var(--bro-tinte-1);
}

.bb-reiter-knopf[aria-current="true"] {
  border-bottom-color: var(--bro-akzent);
  color: var(--bro-tinte-1);
  font-weight: var(--bro-schrift-betont-gewicht);
}

/* Suchband oben in der Box (Regel 10). */
.bb-suchband {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-12);
  padding: var(--bro-abstand-16) var(--bro-abstand-24);
  border-bottom: 1px solid var(--bro-linie);
}

.bb-suchfeld {
  display: flex;
  flex: 1 1 280px;
  align-items: center;
  gap: var(--bro-abstand-8);
  max-width: 560px;
  min-width: 0;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--bro-linie-stark);
  border-radius: var(--bro-konsole-radius-pille);
  background: var(--bro-flaeche-1);
  color: var(--bro-tinte-3);
}

.bb-suchfeld:focus-within {
  outline: var(--bro-fokus-breite) solid var(--bro-akzent);
  outline-offset: var(--bro-fokus-abstand);
}

.bb-suchfeld input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--bro-tinte-1);
  font: inherit;
}

.bb-suchband-rechts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-12);
  margin-left: auto;
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
}

/* Begriffskarten teilen Kopf, Zeilen und Leerwerte in Akten und Details. */
.bb-datenkarten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: var(--bro-abstand-16);
  min-width: 0;
}

.bb-datenkarte {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-konsole-radius-box);
}

.bb-datenkarte h2 {
  margin: 0;
  padding: var(--bro-abstand-12) var(--bro-abstand-16);
  border-bottom: 1px solid var(--bro-linie);
  background: var(--bro-flaeche-0);
  font-size: var(--bro-schrift-betont-groesse);
  font-weight: var(--bro-schrift-titel-gewicht);
}

.bb-datenkarte dl {
  margin: 0;
  padding: var(--bro-abstand-4) var(--bro-abstand-16) var(--bro-abstand-8);
}

.bb-datenzeile {
  display: grid;
  grid-template-columns: minmax(0, 150px) minmax(0, 1fr);
  gap: var(--bro-abstand-12);
  padding: var(--bro-abstand-8) 0;
  border-bottom: 1px solid var(--bro-linie);
}

.bb-datenzeile:last-child {
  border-bottom: 0;
}

.bb-datenzeile dt {
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
}

.bb-datenzeile dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.bb-datenwert-leer {
  color: var(--bro-tinte-3);
}

/* Die Forminnenfläche gehört zum Inhalt, nicht zum Fenster, das ihn zeigt.
   Neue Formsprache nur bei der gewählten Modern-Darstellung. */
.bb-formular-inhalt {
  min-width: 0;
}

html[data-design="modern"] .bb-formular-inhalt {
  padding: var(--bro-abstand-24);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-konsole-radius-box);
  background: var(--bro-flaeche-1);
}

html[data-design="modern"] .bb-formular-inhalt > .portal-formular-karte {
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

html[data-design="modern"] .bb-formular-inhalt .portal-formular-aktionen {
  padding-top: var(--bro-abstand-16);
  border-top: 1px solid var(--bro-linie);
}

html[data-design="modern"] .bb-formular-inhalt fieldset {
  margin-inline: 0;
  padding: var(--bro-abstand-12) var(--bro-abstand-16);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-konsole-radius-box);
}

html[data-design="modern"] .bb-formular-inhalt legend {
  font-weight: var(--bro-schrift-betont-gewicht);
}

html[data-design="modern"] .bb-formular-inhalt :is(input, select, textarea, fieldset),
html[data-design="modern"] .bb-formular-inhalt > * {
  min-width: 0;
  max-width: 100%;
}

html[data-design="modern"] .bb-formular-inhalt .portal-aufgaben-formular {
  max-width: none;
  margin-inline: 0;
}

/* Blättern im Fuß der Box (Regel 12). */
.bb-blaettern {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--bro-abstand-12);
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
}

.bb-blaettern-wege {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-4);
}

.bb-blaettern-knopf {
  padding: var(--bro-abstand-4) var(--bro-abstand-8);
  border-radius: var(--bro-konsole-radius-klein);
  color: var(--bro-akzent-text);
  text-decoration: none;
}

.bb-blaettern-knopf[aria-current="page"] {
  background: var(--bro-akzent-flaeche);
  font-weight: var(--bro-schrift-betont-gewicht);
}

.bb-blaettern-knopf[aria-disabled="true"] {
  color: var(--bro-tinte-3);
}

/* Plakette, etwa „online gebucht“. */
.bb-plakette {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--bro-abstand-8);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-konsole-radius-pille);
  background: var(--bro-flaeche-0);
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-fein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
  white-space: nowrap;
}

.bb-plakette-akzent {
  border-color: transparent;
  background: var(--bro-akzent-flaeche);
  color: var(--bro-akzent-text);
}

.bb-plakette-erfolg {
  color: var(--bro-erfolg);
}

.bb-plakette-warnung {
  border-color: var(--bro-warnung-linie);
  background: var(--bro-warnung-flaeche);
  color: var(--bro-warnung);
}

/* Wahlkarten: gewählt getönt mit Ring. */
.bb-feld-name {
  display: block;
  margin-bottom: 6px;
  font-weight: var(--bro-schrift-betont-gewicht);
}

.bb-wahlkarten {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--bro-abstand-8);
}

.bb-wahl {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: var(--bro-abstand-12);
  border: 1px solid var(--bro-linie-stark);
  border-radius: var(--bro-konsole-radius-feld);
  background: var(--bro-flaeche-1);
  cursor: pointer;
}

.bb-wahl:has(input:checked) {
  border-color: var(--bro-akzent);
  background: var(--bro-akzent-flaeche);
  box-shadow: 0 0 0 1px var(--bro-akzent);
}

.bb-wahl:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.6;
}

.bb-wahl-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bb-wahl-titel {
  font-weight: var(--bro-schrift-betont-gewicht);
}

.bb-wahl-unter {
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
}

/* Das Menü „⋯“ (#10252, #10229): ein <details>, Einträge als Links oder
   POST-Formulare. EIN Baustein für jedes „⋯“ im Portal (`menueHtml`). */
.bb-menue {
  position: relative;
  display: inline-block;
}

.bb-menue-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  border: 1px solid var(--bro-linie-stark);
  border-radius: var(--bro-konsole-radius-feld);
  background: var(--bro-flaeche-1);
  color: var(--bro-tinte-1);
  cursor: pointer;
  list-style: none;
}

.bb-menue-knopf::-webkit-details-marker {
  display: none;
}

.bb-menue-knopf:focus-visible {
  outline: var(--bro-fokus-breite) solid var(--bro-akzent);
  outline-offset: var(--bro-fokus-abstand);
}

.bb-menue-liste {
  position: absolute;
  z-index: 20;
  top: calc(100% + var(--bro-abstand-4));
  right: 0;
  width: min(340px, calc(100vw - 32px));
  padding: var(--bro-abstand-8);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-konsole-radius-box);
  background: var(--bro-flaeche-1);
  box-shadow: var(--bro-schatten-menue);
}

.bb-menue-liste ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bb-menue-liste form {
  margin: 0;
}

.bb-menue-eintrag {
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-sizing: border-box;
  width: 100%;
  padding: var(--bro-abstand-8) var(--bro-abstand-12);
  border: 0;
  border-radius: var(--bro-konsole-radius-klein);
  background: transparent;
  color: var(--bro-tinte-1);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.bb-menue-eintrag:hover,
.bb-menue-eintrag:focus-visible {
  background: var(--bro-flaeche-0);
}

.bb-menue-eintrag--gefahr .bb-menue-titel {
  color: var(--bro-fehler);
}

.bb-menue-titel {
  font-weight: var(--bro-schrift-betont-gewicht);
}

.bb-menue-satz {
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
}

.bb-menue-zusatz {
  margin-top: var(--bro-abstand-8);
  padding: var(--bro-abstand-8) var(--bro-abstand-12) var(--bro-abstand-4);
  border-top: 1px solid var(--bro-linie);
}

/* Kennzahl-Karten oben auf einer Seite (#10252, Leinwand `Df071`): Fläche
   und Symbol in der Gruppenfarbe, die der Aufrufer als `--bb-gruppe` setzt
   (ein Token, etwa `--bro-modul-finanzen`). Die ganze Karte ist ein Link. */
.bb-kennzahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--bro-abstand-12);
  margin: 0 0 var(--bro-abstand-16);
  padding: 0;
  list-style: none;
}

.bb-kennzahl {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
  height: 100%;
  padding: var(--bro-abstand-16);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-konsole-radius-box);
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--bb-gruppe, var(--bro-akzent)) 7%, var(--bro-flaeche-1)) 0%,
    var(--bro-flaeche-1) 70%
  );
  color: var(--bro-tinte-1);
  text-decoration: none;
}

.bb-kennzahl:hover {
  border-color: var(--bb-gruppe, var(--bro-akzent));
}

.bb-kennzahl:focus-visible {
  outline: var(--bro-fokus-breite) solid var(--bro-akzent);
  outline-offset: var(--bro-fokus-abstand);
}

.bb-kennzahl-kopf {
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-8);
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
}

.bb-kennzahl-kachel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--bro-konsole-radius-kachel);
  background: color-mix(in oklab, var(--bb-gruppe, var(--bro-akzent)) 12%, var(--bro-flaeche-1));
  color: var(--bb-gruppe, var(--bro-akzent));
}

.bb-kennzahl-kachel .bro-symbol {
  width: 16px;
  height: 16px;
}

.bb-kennzahl-wert {
  font-size: var(--bro-schrift-titel-groesse);
  font-weight: var(--bro-schrift-titel-gewicht);
  font-variant-numeric: tabular-nums;
}

.bb-kennzahl-wert-fehler {
  color: var(--bro-fehler);
}

.bb-kennzahl-unter {
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
}

/* Unterschriften im Seitenmuster (#10254, Leinwand „Demo Fahrdienst“, Reihe
   „Unterschriften“): Tabelle mit Symbol je Art, Mappe in der Schublade,
   Dokument links daneben. Nur Tokens; die Mappe trägt das Token ihrer
   Navigationsgruppe „Finanzen & Verträge“ (`--bro-modul-finanzen`, grün —
   entschieden von der Koordination am 19.10.2026 an PR #10263; die Leinwand
   zeigt Lila, das Produkt bekommt keine neue Farbe), das Dokument blau wie der
   Akzent. */

.portal-us {
  --portal-us-mappe: var(--bro-modul-finanzen);
  --portal-us-mappe-flaeche: color-mix(in srgb, var(--portal-us-mappe) 13%, var(--bro-flaeche-1));
  --portal-us-dokument: var(--bro-akzent-text);
  --portal-us-dokument-flaeche: var(--bro-akzent-flaeche);

  display: grid;
  gap: var(--bro-abstand-16);
}

.portal-us-schublade,
.portal-us-formular {
  --portal-us-mappe: var(--bro-modul-finanzen);
  --portal-us-mappe-flaeche: color-mix(in srgb, var(--portal-us-mappe) 13%, var(--bro-flaeche-1));
  --portal-us-dokument: var(--bro-akzent-text);
  --portal-us-dokument-flaeche: var(--bro-akzent-flaeche);
}

.portal-us-kopfknopf {
  display: inline-flex;
  align-items: center;
  gap: var(--bro-abstand-8);
}

.portal-us-kopfknopf .bro-symbol {
  width: 16px;
  height: 16px;
}

/* ── Kachel mit dem Symbol der Art */
.portal-us-kachel {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--bro-radius-m);
}

.portal-us-kachel .bro-symbol {
  width: 18px;
  height: 18px;
}

.portal-us-kachel-klein {
  width: 30px;
  height: 30px;
}

.portal-us-kachel-mappe {
  background: var(--portal-us-mappe-flaeche);
  color: var(--portal-us-mappe);
}

.portal-us-kachel-dokument {
  background: var(--portal-us-dokument-flaeche);
  color: var(--portal-us-dokument);
}

/* ── Box: Reiter, Suchband, Chips */
.portal-us-box {
  min-width: 0;
}

.portal-us-suchband .bb-suchfeld {
  flex-basis: 320px;
}

.portal-us-chip-mappen .bro-symbol {
  color: var(--portal-us-mappe);
}

.portal-us-chip-dokumente .bro-symbol {
  color: var(--portal-us-dokument);
}

.portal-us-chip[aria-current="true"] .bro-symbol {
  color: currentColor;
}

.portal-us-reiter {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--bro-abstand-4);
}

.portal-us-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-8);
}

.portal-us-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--bro-abstand-8);
  text-decoration: none;
}

.portal-us-chip .bro-symbol {
  width: 15px;
  height: 15px;
}

.portal-us-chip-zahl {
  font-weight: var(--bro-schrift-betont-gewicht);
  opacity: 0.7;
}

/* ── Tabelle */
.portal-us-tabelle {
  overflow-x: auto;
}

.portal-us-tabelle table {
  width: 100%;
}

.portal-us-name {
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-12);
  min-width: 16rem;
}

.portal-us-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.portal-us-link {
  color: var(--bro-tinte-1);
  font-weight: var(--bro-schrift-betont-gewicht);
  text-decoration: none;
}

.portal-us-link:hover {
  text-decoration: underline;
}

.portal-us-link:focus-visible {
  outline: var(--bro-fokus-breite) solid var(--bro-akzent);
  outline-offset: var(--bro-fokus-abstand);
}

.portal-us-unter {
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
}

.portal-us-unter .bro-statuspille {
  margin-left: var(--bro-abstand-4);
}

.portal-us-eingerueckt td:first-child {
  padding-left: calc(var(--bro-abstand-24) + 36px);
}

.portal-us-eingerueckt {
  background: var(--bro-flaeche-0);
}

.portal-us-zeile-mappe td {
  border-top: 1px solid var(--bro-linie);
}

.portal-us-zeile-dokument .portal-us-link {
  font-weight: var(--bro-schrift-fliesstext-gewicht);
}

.portal-us-zeile:hover {
  background: var(--bro-flaeche-0);
}

.portal-us-leer {
  display: grid;
  justify-items: center;
  gap: var(--bro-abstand-8);
  padding: var(--bro-abstand-32) var(--bro-abstand-24);
  color: var(--bro-tinte-2);
  text-align: center;
}

.portal-us-leer p {
  margin: 0;
}

.portal-us-leer-titel {
  color: var(--bro-tinte-1);
  font-weight: var(--bro-schrift-betont-gewicht);
}

.portal-us-hinweis {
  margin: 0;
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
}

/* ── Formular „Mappe anlegen“ */
.portal-us-formular-titel {
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-12);
  margin: 0;
}

.portal-us-formular-fuss {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--bro-abstand-8);
}

/* ── Die geöffnete Mappe: rechts die Mappe, links das Dokument */
.portal-us-schublade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bro-abstand-16);
}

.portal-us-schublade[data-schublade-breit] {
  grid-template-columns: minmax(0, 1fr) minmax(0, 28rem);
  align-items: start;
}

.portal-us-mappen-spalte,
.portal-us-dokument-spalte {
  display: grid;
  gap: var(--bro-abstand-16);
  min-width: 0;
}

.portal-us-dokument-spalte {
  padding-right: var(--bro-abstand-16);
  border-right: 1px solid var(--bro-linie);
}

.portal-us-spaltenkopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-12);
}

.portal-us-spaltenkopf h2 {
  margin: 0;
  color: var(--bro-tinte-1);
  font-size: var(--bro-schrift-betont-groesse);
  font-weight: var(--bro-schrift-titel-gewicht);
}

.portal-us-spaltenkopf .portal-us-text {
  flex: 1 1 12rem;
}

.portal-us-zu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--bro-beruehrungsflaeche);
  height: var(--bro-beruehrungsflaeche);
  border-radius: var(--bro-radius-m);
  color: var(--bro-tinte-2);
}

.portal-us-zu:hover {
  background: var(--bro-flaeche-0);
  color: var(--bro-tinte-1);
}

.portal-us-zu .bro-symbol {
  width: 18px;
  height: 18px;
}

.portal-us-pillen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-8);
}

.portal-us-abschnitt {
  display: grid;
  gap: var(--bro-abstand-8);
}

.portal-us-abschnitt h3,
.portal-us-protokoll h3 {
  margin: 0;
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
}

.portal-us-dokument-zeile {
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-12);
  min-height: var(--bro-beruehrungsflaeche);
  padding: var(--bro-abstand-8) var(--bro-abstand-12);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
  color: var(--bro-tinte-1);
  text-decoration: none;
}

.portal-us-dokument-zeile:hover,
.portal-us-dokument-zeile[aria-current="true"] {
  background: var(--bro-flaeche-0);
}

.portal-us-dokument-zeile:focus-visible {
  outline: var(--bro-fokus-breite) solid var(--bro-akzent);
  outline-offset: var(--bro-fokus-abstand);
}

.portal-us-pfeil {
  width: 16px;
  height: 16px;
  color: var(--bro-tinte-3);
}

.portal-us-titel {
  font-weight: var(--bro-schrift-betont-gewicht);
}

.portal-us-personen {
  display: grid;
  gap: var(--bro-abstand-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.portal-us-person {
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-12);
}

.portal-us-person .portal-us-text {
  flex: 1 1 auto;
}

.portal-us-kuerzel {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--bro-radius-rund);
  background: var(--bro-flaeche-0);
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-fein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
}

.portal-us-person-unterschrieben .portal-us-kuerzel,
.portal-us-person-unterschrieben .portal-us-person-stand {
  color: var(--bro-erfolg);
}

.portal-us-person-offen .portal-us-person-stand {
  color: var(--bro-tinte-2);
}

.portal-us-person-gesehen .portal-us-kuerzel,
.portal-us-person-gesehen .portal-us-person-stand {
  color: var(--bro-warnung);
}

.portal-us-person-abgelehnt .portal-us-person-stand {
  color: var(--bro-fehler);
}

.portal-us-person-stand {
  font-size: var(--bro-schrift-klein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
  white-space: nowrap;
}

.portal-us-aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--bro-abstand-8);
  padding-top: var(--bro-abstand-12);
  border-top: 1px solid var(--bro-linie);
}

.portal-us-aktion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-8);
}

.portal-us-neuer-link {
  display: block;
  flex: 1 1 100%;
}

.portal-us-neuer-link form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-8);
  margin-top: var(--bro-abstand-8);
}

.portal-us-gefahr .bro-knopf {
  color: var(--bro-fehler);
}

.portal-us-einzelheiten {
  margin: 0;
  font-size: var(--bro-schrift-klein-groesse);
}

.portal-us-meldungen p {
  margin: 0;
}

/* ── Das Dokument: Seitenbilder mit Feldern, darunter das Protokoll */
.portal-us-dokument-inhalt {
  display: grid;
  gap: var(--bro-abstand-16);
}

.portal-us-seite {
  margin: 0;
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
  background: var(--bro-flaeche-1);
  overflow: hidden;
}

.portal-us-seite svg {
  display: block;
  width: 100%;
  height: auto;
}

.portal-us-seite figcaption {
  padding: var(--bro-abstand-4) var(--bro-abstand-12);
  border-top: 1px solid var(--bro-linie);
  color: var(--bro-tinte-3);
  font-size: var(--bro-schrift-fein-groesse);
}

.portal-us-feld rect {
  stroke-width: 3;
}

.portal-us-feld text {
  font-size: 22px;
}

.portal-us-feld-offen rect {
  fill: var(--bro-warnung-flaeche);
  stroke: var(--bro-warnung-linie);
}

.portal-us-feld-offen text {
  fill: var(--bro-warnung);
}

.portal-us-feld-fertig rect {
  fill: var(--bro-akzent-flaeche);
  stroke: var(--bro-erfolg);
}

.portal-us-feld-fertig text {
  fill: var(--bro-erfolg);
}

.portal-us-feld-entwurf rect {
  fill: var(--bro-flaeche-0);
  stroke: var(--bro-linie-stark);
}

.portal-us-feld-entwurf text {
  fill: var(--bro-tinte-3);
}

.portal-us-protokoll ol {
  display: grid;
  gap: var(--bro-abstand-8);
  margin: var(--bro-abstand-8) 0 0;
  padding: 0;
  list-style: none;
}

.portal-us-protokoll-zeile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--bro-abstand-12);
  font-size: var(--bro-schrift-klein-groesse);
}

.portal-us-protokoll-zeile time,
.portal-us-protokoll-zeile > span:last-child {
  color: var(--bro-tinte-3);
  white-space: nowrap;
}

.portal-us-protokoll-was {
  display: flex;
  flex-direction: column;
}

.portal-us-punkt {
  width: 10px;
  height: 10px;
  margin-top: 4px;
  border-radius: var(--bro-radius-rund);
  background: var(--bro-tinte-3);
}

.portal-us-punkt-versendet {
  background: var(--bro-akzent);
}

.portal-us-punkt-geoeffnet {
  background: var(--bro-warnung);
}

.portal-us-punkt-unterschrieben,
.portal-us-punkt-abgeschlossen {
  background: var(--bro-erfolg);
}

.portal-us-punkt-fehler {
  background: var(--bro-fehler);
}

.portal-us-protokoll-wartet .portal-us-protokoll-was > span:first-child {
  color: var(--bro-tinte-2);
}

.portal-us-punkt-wartet {
  background: var(--bro-linie-stark);
}

/* ── Die Schublade selbst (`datensatz-fenster.ts`): schmal wie „Mein Konto“,
   breit, sobald das Dokument links daneben offen ist. */
.portal-pdf.portal-schublade.portal-schublade-schmal {
  width: min(30rem, 100vw);
}

.portal-pdf.portal-schublade.portal-schublade-dokument {
  width: min(75rem, 100vw);
}

/* Schmal (390 px): Die Schublade füllt den Schirm, die Dokumentspalte legt
   sich über die Mappe. */
@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (max-height: 479px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (orientation: portrait) {
  .portal-us-schublade[data-schublade-breit] {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
  }

  .portal-us-schublade[data-schublade-breit] .portal-us-dokument-spalte {
    position: absolute;
    z-index: 1;
    inset: 0 0 auto;
    min-height: 100%;
    padding-right: 0;
    border-right: 0;
    background: var(--bro-flaeche-1);
  }

  .portal-us-name {
    min-width: 12rem;
  }
}

/* Akten im Seitenmuster (#10229): Kopfkarte mit Menü „⋯“, Stammdaten in
   Karten, Abschnitte mit grauer Kopfleiste. Box und Reiter kommen aus
   `beauty.css` (`.bb-box`, `.bb-reiter`, Datenkarten und Forminnenfläche).
   Hier bleiben die aktenbezogene Kopfkarte und Inhaltsreihenfolge. */

.portal-akte-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-16) var(--bro-abstand-24);
  padding: var(--bro-abstand-24);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-konsole-radius-box);
  background: var(--bro-flaeche-1);
}

.portal-akte-kuerzel {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--bro-konsole-radius-box);
  background: var(--bro-akzent-flaeche);
  color: var(--bro-akzent-text);
  font-size: var(--bro-schrift-titel-groesse);
  font-weight: var(--bro-schrift-titel-gewicht);
}

.portal-akte-kuerzel--person {
  border-radius: var(--bro-radius-rund);
}

.portal-akte-kopf-text {
  display: flex;
  flex: 1 1 360px;
  flex-direction: column;
  gap: var(--bro-abstand-4);
  min-width: 0;
}

.portal-akte-kopf-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-8) var(--bro-abstand-12);
}

.portal-akte-kopf-name h1 {
  margin: 0;
  overflow-wrap: anywhere;
}

.portal-akte-kennzahlen {
  margin: 0;
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
}

.portal-akte-kopf-aktionen,
.portal-akte-schnellzugriffe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-8);
}

/* Inhalt der Box: Abschnitte untereinander. */
.bb-box[data-akte-box] > .bb-box-inhalt,
.portal-akte-formular {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-16);
}

.portal-akte-formular-satz {
  margin: 0;
}

/* „Mein Tag“ `/mein-tag` (#9993, Bündel #9986).
   Entwurf: docs/design-canvas/beauty/BsCal10MeinTag.dc.html (breit) und
   BsCal11MeinTagHandy.dc.html (Handy). Nur Tokens (B14.7).

   Die Klassen `.mt-*` hängen NICHT am Beauty-Rahmen: `/mein-tag` sieht jeder
   Betrieb, und die Bausteine darunter (`.bb-box`, `.bb-meldung`,
   `.bb-plakette` aus `beauty.css`) sind ebenso rahmenfrei gebaut. */

/* Zwei Spalten, die auf schmaler Fläche untereinander rutschen: links die
   Karte und die Tagesliste, rechts Aufgaben, Projekte und das Monatsblatt. */
.mt-raster {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--bro-abstand-16);
}

.mt-haupt {
  display: flex;
  flex: 999 1 520px;
  flex-direction: column;
  gap: var(--bro-abstand-16);
  min-width: 0;
}

.mt-spalte {
  display: flex;
  flex: 1 1 320px;
  flex-direction: column;
  gap: var(--bro-abstand-16);
  min-width: 0;
}

/* Der Abstand kommt hier aus `gap`, nicht aus dem Nachbarn-Abstand der Box. */
.mt-haupt > .bb-box + .bb-box,
.mt-spalte > .bb-box + .bb-box {
  margin-top: 0;
}

/* Die Kopfleisten-Wege „Kalender ›“, „Alle ›“. */
.mt-kopf-weg {
  color: var(--bro-akzent-text);
  font-size: var(--bro-schrift-klein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
  text-decoration: none;
  white-space: nowrap;
}

.mt-kopf-weg:hover {
  text-decoration: underline;
}

/* Karte „Jetzt“ bzw. „Als Nächstes“: ruhig getönte Fläche im Erfolgston. */
.mt-jetzt {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
  padding: var(--bro-abstand-16) var(--bro-abstand-24);
  border: 1px solid color-mix(in srgb, var(--bro-erfolg) 28%, var(--bro-flaeche-1));
  border-radius: var(--bro-konsole-radius-box);
  background: color-mix(in srgb, var(--bro-erfolg) 6%, var(--bro-flaeche-1));
}

.mt-jetzt-marke {
  color: var(--bro-erfolg);
  font-size: var(--bro-schrift-fein-groesse);
  font-weight: var(--bro-schrift-titel-gewicht);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.mt-jetzt-titel {
  color: var(--bro-tinte-1);
  font-size: var(--bro-schrift-titel-groesse);
  font-weight: var(--bro-schrift-titel-gewicht);
  line-height: var(--bro-schrift-titel-zeilenhoehe);
}

.mt-jetzt-unter {
  color: var(--bro-tinte-2);
}

.mt-jetzt-stand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-8);
}

.mt-jetzt-hinweis {
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
}

.mt-jetzt-wege {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-8);
}

.mt-knopf {
  display: inline-flex;
  align-items: center;
  gap: var(--bro-abstand-8);
  border-radius: var(--bro-konsole-radius-feld);
}

.mt-knopf .bro-symbol {
  flex: none;
  width: 16px;
  height: 16px;
}

/* Die Tagesliste: Uhrzeit links, was und mit wem in der Mitte, Stand rechts. */
.mt-agenda {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mt-zeile {
  display: flex;
  align-items: flex-start;
  gap: var(--bro-abstand-12);
  padding: var(--bro-abstand-12) var(--bro-abstand-24);
}

.mt-zeile + .mt-zeile {
  border-top: 1px solid var(--bro-linie);
}

.mt-zeit {
  display: flex;
  flex: none;
  flex-direction: column;
  width: 92px;
  font-variant-numeric: tabular-nums;
}

.mt-bis {
  color: var(--bro-tinte-3);
  font-size: var(--bro-schrift-fein-groesse);
}

.mt-was {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  padding-left: 10px;
  border-left: 3px solid var(--bro-akzent);
}

.mt-zeile[aria-current] .mt-was {
  border-left-color: var(--bro-erfolg);
}

.mt-zeile-kalender .mt-was {
  border-left-color: var(--bro-linie-stark);
}

.mt-wer {
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
}

/* Gesperrte Zeit: leise, ohne Randstrich — keine Behandlung, nur belegte Zeit. */
.mt-zeile-sperre {
  color: var(--bro-tinte-3);
  font-size: var(--bro-schrift-klein-groesse);
}

.mt-was-still {
  flex: 1;
  min-width: 0;
}

.mt-stand {
  flex: none;
  font-size: var(--bro-schrift-fein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
}

.mt-stand-erfolg {
  color: var(--bro-erfolg);
}

.mt-stand-akzent {
  color: var(--bro-akzent-text);
}

.mt-stand-warnung {
  color: var(--bro-warnung);
}

.mt-stand-neutral {
  color: var(--bro-tinte-3);
}

.mt-leer {
  margin: 0;
  padding: var(--bro-abstand-16) var(--bro-abstand-24);
  color: var(--bro-tinte-2);
}

/* Aufgaben und Projekte: Plakette, Titel, rechts Uhrzeit oder Datum. */
.mt-aufgaben {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mt-aufgabe {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--bro-abstand-12) var(--bro-abstand-24);
}

.mt-aufgabe + .mt-aufgabe {
  border-top: 1px solid var(--bro-linie);
}

.mt-aufgabe > a {
  flex: 1;
  min-width: 0;
  color: var(--bro-tinte-1);
  text-decoration: none;
}

.mt-aufgabe > a:hover {
  text-decoration: underline;
}

.mt-nebenbei {
  flex: none;
  color: var(--bro-tinte-3);
  font-size: var(--bro-schrift-fein-groesse);
  font-variant-numeric: tabular-nums;
}

.mt-weitere {
  color: var(--bro-tinte-3);
  font-size: var(--bro-schrift-fein-groesse);
}

/* Das Monatsblatt: heute gefüllt, ein Punkt an jedem Tag mit Einteilung. */
.mt-monat {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
}

.mt-wochentag {
  color: var(--bro-tinte-3);
  font-size: var(--bro-schrift-fein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
  text-align: center;
}

.mt-monatstag {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  border-radius: var(--bro-konsole-radius-klein);
  color: var(--bro-tinte-1);
  font-size: var(--bro-schrift-fein-groesse);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

a.mt-monatstag:hover {
  background: var(--bro-akzent-flaeche);
}

.mt-monatstag[aria-current="date"] {
  background: var(--bro-akzent);
  color: var(--bro-akzent-tinte);
  font-weight: var(--bro-schrift-titel-gewicht);
}

.mt-punkt {
  position: absolute;
  bottom: 3px;
  left: 50%;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: var(--bro-konsole-radius-pille);
  background: var(--bro-akzent);
}

.mt-monatstag[aria-current="date"] .mt-punkt {
  background: var(--bro-akzent-tinte);
}

/* Nur für Vorlesehilfen: „, eigene Termine“ am Tag mit Punkt. */
.mt-vorleser {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Handy (Entwurf BsCal11): eine Spalte, kein Monatsblatt, der Hinweis kurz. */
@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (max-height: 479px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (orientation: portrait) {
  [data-mein-tag="monat"],
  .mt-breit {
    display: none;
  }

  .mt-jetzt {
    padding: var(--bro-abstand-16);
  }

  .mt-zeile,
  .mt-aufgabe,
  .mt-leer {
    padding-inline: var(--bro-abstand-16);
  }

  .mt-zeit {
    width: 64px;
  }

  .mt-zeile-sperre .mt-zeit {
    width: auto;
  }
}

/* ---- Nach Zeit geordnet (#10240): Überfällig · Heute · Morgen ------------
   Leinwand „Demo Fahrdienst“, Baustein MeinTagInhalt. Gilt in jedem Rahmen
   außer dem Beauty-Rahmen (der behält BsCal10/BsCal11 oben).

   Gruppenfarben = die Gruppenfarben der Leiste (KundenNavi: „Gruppenfarben =
   Datenreihen-Tokens 1–6, Schnellzugriff neutral“). Eine Karte oder Zeile
   trägt `data-gruppe`; Fläche, Verlauf und Symbolfarbe leiten sich aus der
   einen Gruppenfarbe ab, damit die Dunkelfassung der Datenreihen mitgeht. */
.mt-zt [data-gruppe] {
  --mt-gruppe: var(--bro-tinte-2);
  --mt-gruppe-symbol: color-mix(in srgb, var(--mt-gruppe) 70%, var(--bro-tinte-1));
  --mt-gruppe-flaeche: color-mix(in srgb, var(--mt-gruppe) 14%, var(--bro-flaeche-1));
  --mt-gruppe-verlauf: color-mix(in srgb, var(--mt-gruppe) 8%, var(--bro-flaeche-1));
}

.mt-zt [data-gruppe="petrol"] {
  --mt-gruppe: var(--bro-datenreihe-3);
}

.mt-zt [data-gruppe="rosa"] {
  --mt-gruppe: var(--bro-datenreihe-6);
}

.mt-zt [data-gruppe="achtung"] {
  --mt-gruppe: var(--bro-warnung);
  --mt-gruppe-symbol: var(--bro-warnung);
}

/* Breit: links die Karten, rechts Stand und Kalender. Schmal: Stand oben,
   dann die Karten, der Kalender unten (Entwurf „Mein Tag · Handy“). */
.mt-zt {
  display: grid;
  grid-template-areas:
    "karten stand"
    "karten seite";
  grid-template-rows: auto 1fr;
  grid-template-columns: minmax(0, 1fr) 360px;
  align-items: start;
  gap: var(--bro-abstand-16) var(--bro-abstand-24);
}

.mt-zt-karten {
  display: flex;
  grid-area: karten;
  flex-direction: column;
  gap: var(--bro-abstand-16);
  min-width: 0;
}

.mt-zt-stand {
  grid-area: stand;
}

.mt-zt-seite {
  display: flex;
  grid-area: seite;
  flex-direction: column;
  gap: var(--bro-abstand-16);
  min-width: 0;
}

/* Die Karte im Widget-Muster: Kopf mit Symbol in Gruppenfarbe, Plakette,
   sanfter Verlauf von oben. */
.mt-zt-karte {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  min-width: 0;
  padding: var(--bro-abstand-12) var(--bro-abstand-16) var(--bro-abstand-16);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-konsole-radius-box);
  background: linear-gradient(180deg, var(--mt-gruppe-verlauf) 0%, var(--bro-flaeche-1) 58%);
}

.mt-zt-kopf {
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-8);
  min-width: 0;
}

.mt-zt-kopf-symbol,
.mt-zt-symbol {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: var(--bro-konsole-radius-kachel);
  background: var(--mt-gruppe-flaeche);
  color: var(--mt-gruppe-symbol);
}

.mt-zt-kopf-symbol {
  width: 26px;
  height: 26px;
}

.mt-zt-symbol {
  width: 30px;
  height: 30px;
}

.mt-zt-kopf-symbol .bro-symbol {
  width: 15px;
  height: 15px;
}

.mt-zt-symbol .bro-symbol {
  width: 16px;
  height: 16px;
}

.mt-zt-kopf-titel {
  flex: 1;
  min-width: 0;
  margin: 0;
  color: var(--bro-tinte-1);
  font-size: var(--bro-schrift-klein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
  line-height: var(--bro-schrift-klein-zeilenhoehe);
}

.mt-zt-plakette {
  display: inline-flex;
  flex: none;
  align-items: center;
  padding: 2px var(--bro-abstand-8);
  border-radius: var(--bro-konsole-radius-pille);
  background: var(--bro-flaeche-0);
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-fein-groesse);
  font-weight: var(--bro-schrift-titel-gewicht);
  font-variant-numeric: tabular-nums;
}

.mt-zt-plakette-warnend {
  background: var(--bro-warnung-flaeche);
  color: var(--bro-warnung);
}

.mt-zt-liste {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 calc(-1 * var(--bro-abstand-8));
  padding: 0;
  list-style: none;
}

/* Eine Zeile: Haken (oder sein Platz), Gruppensymbol, Titel und Unterzeile,
   rechts die Frist-Pille oder ein Verweis. */
.mt-zt-eintrag {
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-12);
  min-width: 0;
  padding: var(--bro-abstand-8);
  border-radius: var(--bro-konsole-radius-feld);
}

.mt-zt-eintrag[aria-current] {
  background: var(--mt-gruppe-verlauf);
}

.mt-zt-haken {
  display: inline-flex;
  flex: none;
  margin: 0;
}

.mt-zt-ohne-haken {
  flex: none;
  width: 22px;
}

.mt-zt-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.mt-zt-titel {
  overflow: hidden;
  color: var(--bro-tinte-1);
  font-weight: var(--bro-schrift-betont-gewicht);
  text-overflow: ellipsis;
}

.mt-zt-titel a {
  color: inherit;
  text-decoration: none;
}

.mt-zt-titel a:hover {
  text-decoration: underline;
}

.mt-zt-eintrag-hinweis .mt-zt-titel {
  color: var(--bro-tinte-2);
  font-weight: var(--bro-schrift-fliesstext-gewicht);
}

.mt-zt-unter {
  overflow: hidden;
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-fein-groesse);
  text-overflow: ellipsis;
}

.mt-zt-pille {
  display: inline-flex;
  flex: none;
  align-items: center;
  padding: 2px var(--bro-abstand-8);
  border-radius: var(--bro-konsole-radius-klein);
  font-size: var(--bro-schrift-fein-groesse);
  font-weight: var(--bro-schrift-titel-gewicht);
}

.mt-zt-pille-kritisch {
  background: var(--bro-fehler-flaeche);
  color: var(--bro-fehler);
}

.mt-zt-pille-grau {
  background: var(--bro-flaeche-0);
  color: var(--bro-tinte-2);
}

.mt-zt-pille-akzent {
  background: var(--bro-akzent-flaeche);
  color: var(--bro-akzent-text);
}

.mt-zt-pille-erfolg {
  background: color-mix(in srgb, var(--bro-erfolg) 12%, var(--bro-flaeche-1));
  color: var(--bro-erfolg);
}

.mt-zt-verweis {
  display: inline-flex;
  flex: none;
  align-items: center;
  padding: 2px var(--bro-abstand-12);
  border-radius: var(--bro-konsole-radius-pille);
  box-shadow: inset 0 0 0 1px var(--bro-linie-stark);
  color: var(--bro-akzent-text);
  font-size: var(--bro-schrift-fein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
  text-decoration: none;
}

.mt-zt-weitere,
.mt-zt-leer {
  margin: 0;
  padding: var(--bro-abstand-4) var(--bro-abstand-8);
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
}

.mt-zt-leer {
  padding-inline: 0;
}

/* „Stand“: Ring über die offenen Aufgaben, je Abschnitt ein Bogen. */
.mt-zt-stand-zeile {
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-16);
}

.mt-zt-ring {
  display: block;
  flex: none;
  width: 88px;
  height: 88px;
}

.mt-zt-ring-grund,
.mt-zt-ring-bogen {
  fill: none;
  stroke-width: 10;
}

.mt-zt-ring-grund {
  stroke: var(--bro-flaeche-0);
}

.mt-zt-ring-zahl {
  fill: var(--bro-tinte-1);
  font-size: var(--bro-schrift-kennzahl-groesse);
  font-weight: var(--bro-schrift-titel-gewicht);
}

.mt-zt-ring-wort {
  fill: var(--bro-tinte-2);
  font-size: var(--bro-schrift-gruppentitel-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
}

.mt-zt-ring-ueberfaellig {
  --mt-bogen: var(--bro-warnung);
}

.mt-zt-ring-heute {
  --mt-bogen: var(--bro-datenreihe-3);
}

.mt-zt-ring-morgen {
  --mt-bogen: var(--bro-tinte-3);
}

.mt-zt-ring-bogen {
  stroke: var(--mt-bogen);
}

.mt-zt-kennzahlen {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--bro-abstand-8);
  min-width: 0;
  margin: 0;
}

.mt-zt-kennzahl {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: var(--bro-abstand-8);
  border-radius: var(--bro-konsole-radius-feld);
  box-shadow: inset 0 0 0 1px var(--bro-linie);
}

.mt-zt-kennzahl dt {
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-4);
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-fein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
  white-space: nowrap;
}

.mt-zt-kennzahl dd {
  margin: 0;
  color: var(--bro-tinte-1);
  font-size: var(--bro-schrift-titel-groesse);
  font-weight: var(--bro-schrift-titel-gewicht);
  font-variant-numeric: tabular-nums;
}

.mt-zt-punkt {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: var(--bro-konsole-radius-pille);
  background: var(--mt-bogen);
}

/* „Kalender“ im Stil des Widgets: Tageszahl groß, darunter das Monatsblatt. */
.mt-zt-heute {
  display: flex;
  align-items: baseline;
  gap: var(--bro-abstand-12);
  margin: 0;
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
}

.mt-zt-heute-zahl {
  color: var(--bro-tinte-1);
  font-size: var(--bro-schrift-seitentitel-groesse);
  font-weight: var(--bro-schrift-titel-gewicht);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.mt-zt-zum-kalender {
  align-self: flex-start;
}

@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (max-height: 479px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (orientation: portrait) {
  .mt-zt {
    grid-template-areas:
      "stand"
      "karten"
      "seite";
    grid-template-rows: none;
    grid-template-columns: minmax(0, 1fr);
  }

  /* Anders als im Studio-Tag bleibt der Kalender auf dem Handy, unten. */
  .mt-zt [data-mein-tag="monat"] {
    display: flex;
  }

  .mt-zt-ring {
    width: 64px;
    height: 64px;
  }

  .mt-zt-titel,
  .mt-zt-unter {
    overflow: visible;
    white-space: normal;
  }
}

/* Termin anlegen als eigene Seite (#9989, Bündel #9986, Paket B3).
   Entwurf: docs/design-canvas/beauty/BsCal08TerminAnlegen.dc.html. Nur Tokens
   (B14.7). Ohne Bindung an den Beauty-Rahmen: Die Seite ist Funktion, und
   jeder Betrieb legt hier Termine an (`termin-anlegen-seite.ts`). Box,
   Kopfleiste, Wahlkarten und Meldungen kommen aus `beauty.css` (B0). */

/* Zwei Spalten wie im Entwurf: links das Formular, rechts „Neuer Termin“.
   Reicht der Platz nicht, rutscht die rechte Spalte darunter. */
.portal-terminanlage-raster {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--bro-abstand-16);
}

.portal-terminanlage-haupt {
  flex: 999 1 560px;
  min-width: 0;
}

.portal-terminanlage-seite {
  position: sticky;
  top: var(--bro-abstand-16);
  flex: 1 1 300px;
  min-width: 0;
}

/* Die Abschnitte der Box „Termin“: Haarlinie dazwischen, Zwischenüberschrift. */
.portal-terminanlage-abschnitt {
  display: grid;
  gap: var(--bro-abstand-12);
  padding: var(--bro-abstand-24);
}

.portal-terminanlage-abschnitt + .portal-terminanlage-abschnitt {
  border-top: 1px solid var(--bro-linie);
}

.portal-terminanlage-titel {
  margin: 0;
  color: var(--bro-tinte-1);
  font-size: var(--bro-schrift-fliesstext-groesse);
  font-weight: var(--bro-schrift-titel-gewicht);
  line-height: var(--bro-schrift-fliesstext-zeilenhoehe);
}

.portal-terminanlage-felder {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--bro-abstand-12);
}

.portal-terminanlage-felder-drei {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.portal-terminanlage-feld {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
}

.portal-terminanlage-feldname {
  color: var(--bro-tinte-1);
  font-size: var(--bro-schrift-klein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
  line-height: var(--bro-schrift-klein-zeilenhoehe);
}

.portal-terminanlage-pflicht {
  color: var(--bro-fehler);
}

.portal-terminanlage-hinweis {
  margin: 0;
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-fein-groesse);
  line-height: var(--bro-schrift-fein-zeilenhoehe);
}

/* „Behandlung“ trägt die Zwischenüberschrift schon; der Name der Gruppe
   bleibt für Vorleser (`aria-labelledby` der Wahlkarten), ist aber nicht zu
   sehen. */
.portal-terminanlage-behandlungen .bb-feld-name {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* „Bei wem“: dieselben Wahlkarten als Pillen in einer Zeile (Entwurf: Chips). */
.portal-terminanlage-personen .bb-wahlkarten {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.portal-terminanlage-personen .bb-wahl {
  align-items: center;
  gap: 6px;
  padding: var(--bro-abstand-4) var(--bro-abstand-12);
  border-radius: var(--bro-konsole-radius-pille);
  font-size: var(--bro-schrift-klein-groesse);
}

.portal-terminanlage-wiederholung {
  display: grid;
  gap: var(--bro-abstand-12);
  min-width: 0;
}

/* Die Anzahl zählt nur, wenn wiederholt wird; ohne Takt tritt sie zurück.
   Ohne `:has()` bleibt sie einfach stehen — der Server liest sie ohne Takt
   ohnehin nicht. */
.portal-terminanlage-wiederholung:has(select[name="takt"] option[value=""]:checked)
  .portal-terminanlage-anzahl {
  display: none;
}

/* Rechts: „Neuer Termin“. */
.portal-terminanlage-zusammenfassung {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: var(--bro-abstand-8) var(--bro-abstand-12);
  margin: 0 0 var(--bro-abstand-16);
  font-size: var(--bro-schrift-klein-groesse);
}

.portal-terminanlage-zusammenfassung[hidden] {
  display: none;
}

.portal-terminanlage-zusammenfassung dt {
  color: var(--bro-tinte-2);
}

.portal-terminanlage-zusammenfassung dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.portal-terminanlage-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-8);
  margin-bottom: var(--bro-abstand-12);
}

.portal-terminanlage-aktionen .bro-symbol {
  width: 16px;
  height: 16px;
}

@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (max-height: 479px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (orientation: portrait) {
  .portal-terminanlage-seite {
    position: static;
  }

  .portal-terminanlage-felder,
  .portal-terminanlage-felder-drei {
    grid-template-columns: minmax(0, 1fr);
  }

  .portal-terminanlage-abschnitt {
    padding: var(--bro-abstand-16);
  }
}

/* Die Buchungen-Liste (#9991, Paket B2 aus #9986), `buchungen-seite.ts`.
   Entwurf: docs/design-canvas/beauty/BsCal02HeuteBuchungen.dc.html.
   Nur Tokens (B14.7). Ohne Rahmen-Bindung wie die Bausteine `.bb-*`: Die
   Liste sieht jeder Betrieb. */

.bb-buchungen-tag {
  margin: 0;
  padding: var(--bro-abstand-8) var(--bro-abstand-24);
  border-bottom: 1px solid var(--bro-linie);
  background: var(--bro-flaeche-0);
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
}

/* Eine Zeile: Zeit · was und mit wem · wer behandelt · Knöpfe. Auf schmalen
   Geräten fallen die Spalten untereinander. */
.bb-buchung {
  display: grid;
  grid-template-columns: minmax(120px, 160px) minmax(0, 1fr) minmax(140px, 200px) auto;
  align-items: start;
  gap: var(--bro-abstand-12) var(--bro-abstand-16);
  padding: var(--bro-abstand-16) var(--bro-abstand-24);
  border-bottom: 1px solid var(--bro-linie);
}

.bb-buchung:last-child {
  border-bottom: 0;
}

@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (max-height: 479px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (orientation: portrait) {
  .bb-buchung {
    grid-template-columns: minmax(0, 1fr);
  }
}

.bb-buchung-zeit,
.bb-buchung-was {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
  min-width: 0;
}

.bb-buchung-zeit strong,
.bb-buchung-titel strong {
  color: var(--bro-tinte-1);
  font-weight: var(--bro-schrift-betont-gewicht);
}

.bb-buchung-titel {
  color: var(--bro-tinte-2);
}

.bb-buchung-unter {
  color: var(--bro-tinte-3);
  font-size: var(--bro-schrift-klein-groesse);
}

.bb-buchung-plaketten {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-4);
}

.bb-buchung-wer {
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-8);
  min-width: 0;
  color: var(--bro-tinte-1);
}

.bb-buchung-wer-leer {
  color: var(--bro-tinte-3);
}

.bb-kuerzel {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--bro-konsole-radius-pille);
  background: var(--bro-akzent-flaeche);
  color: var(--bro-akzent-text);
  font-size: var(--bro-schrift-fein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
}

.bb-buchung-knoepfe {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-end;
  gap: var(--bro-abstand-8);
}

@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (max-height: 479px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (orientation: portrait) {
  .bb-buchung-knoepfe {
    justify-content: flex-start;
  }
}

.bb-buchung-formular {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-8);
  margin: 0;
}

.bb-buchung-ziel {
  align-self: center;
  color: var(--bro-akzent-text);
  font-size: var(--bro-schrift-klein-groesse);
  text-decoration: none;
  white-space: nowrap;
}

.bb-buchung-ziel:hover {
  text-decoration: underline;
}

.bb-buchungen-leer {
  margin: 0;
  padding: var(--bro-abstand-24);
  color: var(--bro-tinte-2);
}

/* „Kalender teilen“ unter Einstellungen › Termine & Kalender und der
   persönliche Kalender `/kalender` (#9997, Bündel #9986).
   Entwurf: docs/design-canvas/beauty/BsCal07KalenderTeilen.dc.html und
   BsCal06HeuteKalenderMonat.dc.html. Nur Tokens (B14.7).

   Die Klassen `.kt-*` (Kalender teilen) und `.mk-*` (Mein Kalender) hängen
   NICHT am Beauty-Rahmen: Beide Seiten sieht jeder Betrieb, und die
   Bausteine darunter (`.bb-box`, `.bb-meldung`, `.bb-plakette`, `.bb-reiter`
   aus `beauty.css`) sind ebenso rahmenfrei gebaut. Das Raster selbst behält
   seine Klassen aus `portal.css` (`.portal-monatsraster` …): Das Skript der
   Firmengruppe setzt seine Einträge genau dort hinein (#9026). */

/* ---- Mein Kalender ------------------------------------------------------ */

/* Die Kopfleisten-Wege „Kalender teilen ›“. */
.mk-kopf-weg {
  color: var(--bro-akzent-text);
  font-size: var(--bro-schrift-klein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
  text-decoration: none;
  white-space: nowrap;
}

.mk-kopf-weg:hover {
  text-decoration: underline;
}

/* Über dem Raster: links Blättern und Zeitraum, rechts die Auswahl. */
.mk-werkzeug {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--bro-abstand-12) var(--bro-abstand-24);
  margin-bottom: var(--bro-abstand-16);
}

.mk-blaettern {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-12);
}

.mk-wege {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-4);
}

.mk-zeitraum {
  color: var(--bro-tinte-1);
  font-size: var(--bro-schrift-betont-groesse);
  font-weight: var(--bro-schrift-titel-gewicht);
  line-height: var(--bro-schrift-betont-zeilenhoehe);
  white-space: nowrap;
}

.mk-filter {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  min-width: 0;
}

.mk-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.mk-chips-name {
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
}

.mk-studio {
  color: var(--bro-akzent-text);
  font-size: var(--bro-schrift-klein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
  text-decoration: none;
  white-space: nowrap;
}

.mk-studio:hover {
  text-decoration: underline;
}

/* Das Raster in der Box: ruhige Felder, die Wochentage als Kopf. */
.mk-kalender .portal-kalendertag {
  border-radius: var(--bro-konsole-radius-klein);
}

.mk-kalender .portal-kalendertag-kopf {
  color: var(--bro-tinte-2);
  font-weight: var(--bro-schrift-betont-gewicht);
}

.mk-kalender .portal-wochenraster {
  margin-bottom: 0;
}

/* ---- Kalender teilen ---------------------------------------------------- */

/* Zwei Spalten, die auf schmaler Fläche untereinander rutschen (Entwurf:
   links die Freigaben, rechts die verbundenen Kalender). */
.kt-raster {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--bro-abstand-16);
}

.kt-haupt {
  display: flex;
  flex: 999 1 520px;
  flex-direction: column;
  gap: var(--bro-abstand-16);
  min-width: 0;
}

.kt-spalte {
  display: flex;
  flex: 1 1 340px;
  flex-direction: column;
  gap: var(--bro-abstand-16);
  min-width: 0;
}

/* Der Abstand kommt hier aus `gap`, nicht aus dem Nachbarn-Abstand der Box. */
.kt-haupt > .bb-box + .bb-box,
.kt-spalte > .bb-box + .bb-box {
  margin-top: 0;
}

.kt-liste {
  margin: 0;
  padding: 0;
  list-style: none;
}

.kt-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-12) var(--bro-abstand-24);
  padding: 14px var(--bro-abstand-24);
}

.kt-zeile + .kt-zeile,
.kt-anbieter + .kt-anbieter {
  border-top: 1px solid var(--bro-linie);
}

.kt-person {
  display: inline-flex;
  flex: 1 1 220px;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.kt-kuerzel {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--bro-konsole-radius-pille);
  background: var(--bro-akzent-flaeche);
  color: var(--bro-akzent-text);
  font-size: var(--bro-schrift-fein-groesse);
  font-weight: var(--bro-schrift-titel-gewicht);
}

/* Der Umschalter der drei Stufen: die gültige weiß und erhaben. */
.kt-stufen {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0;
  padding: 3px;
  border-radius: var(--bro-konsole-radius-feld);
  background: var(--bro-flaeche-0);
  box-shadow: inset 0 0 0 1px var(--bro-linie);
}

.kt-stufe {
  min-height: 32px;
  padding: 0 var(--bro-abstand-12);
  border: 0;
  border-radius: var(--bro-konsole-radius-klein);
  background: transparent;
  color: var(--bro-tinte-2);
  font: inherit;
  font-size: var(--bro-schrift-klein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
  white-space: nowrap;
  cursor: pointer;
}

.kt-stufe:hover {
  color: var(--bro-tinte-1);
}

.kt-stufe:focus-visible {
  outline: var(--bro-fokus-breite) solid var(--bro-akzent);
  outline-offset: var(--bro-fokus-abstand);
}

.kt-stufe[aria-pressed="true"] {
  background: var(--bro-flaeche-1);
  box-shadow: 0 0 0 1px var(--bro-linie-stark);
  color: var(--bro-tinte-1);
  cursor: default;
}

.kt-leer {
  margin: 0;
  padding: 18px var(--bro-abstand-24);
  color: var(--bro-tinte-2);
}

.kt-fuss {
  margin: 0;
  padding: var(--bro-abstand-12) var(--bro-abstand-24);
  border-top: 1px solid var(--bro-linie);
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
}

/* Google und Microsoft 365: Kachel, Name mit Satz, rechts „Einrichten“. */
.kt-anbieter {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px var(--bro-abstand-24);
}

.kt-anbieter-kachel {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--bro-konsole-radius-feld);
  background: var(--bro-flaeche-0);
  color: var(--bro-tinte-2);
}

.kt-anbieter-kachel .bro-symbol {
  width: 18px;
  height: 18px;
}

.kt-anbieter-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.kt-anbieter-text > span {
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
}

/* Die Kalender, die der Betrieb dieser Person zugeordnet hat. */
.kt-eigene {
  padding: var(--bro-abstand-16) var(--bro-abstand-24);
  border-top: 1px solid var(--bro-linie);
}

.kt-eigene-titel {
  margin: 0 0 6px;
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
}

.kt-eigene-liste {
  display: grid;
  gap: var(--bro-abstand-4);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-wrap: anywhere;
}

.kt-eigene .kt-leer,
.kt-eigene .kt-fuss {
  padding: 0;
  border-top: 0;
}

.kt-eigene .kt-fuss {
  margin-top: var(--bro-abstand-8);
}

.portal-passkeys {
  min-width: 0;
  overflow-wrap: anywhere;
}

.portal-passkeys-liste {
  display: grid;
  gap: var(--bro-abstand-24);
  list-style: none;
  padding: 0;
  margin: 0;
}

.portal-passkeys-liste li {
  display: grid;
  gap: var(--bro-abstand-12);
  min-width: 0;
}

.portal-passkeys-liste dl {
  margin: 0;
}

.portal-passkeys-liste dd {
  margin-inline-start: var(--bro-abstand-16);
}

/* #10547: Original KundenKontoSchublade.dc.html, gemessen 21.10.2026.
   Ausschließlich Modern. Lange Namen und Reiter dürfen den Bildschirm
   nicht verbreitern. Die gemeinsame Modalhülle bleibt im Drawerbaustein. */
html[data-design="modern"] .portal-konto-ausloeser {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
}

html[data-design="modern"] [data-portal-schubladen-dialog]:has([data-konto-schublade]) {
  width: var(--bro-modern-konto-breite);
  max-width: 100vw;
  border-radius: 0;
}

html[data-design="modern"] [data-portal-schubladen-dialog]:has([data-konto-schublade])::backdrop {
  background: color-mix(in oklab, var(--bro-tinte-1) 18%, transparent);
}

html[data-design="modern"] .portal-konto-schublade {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 100%;
  background: var(--bro-flaeche-1);
  color: var(--bro-tinte-1);
}

html[data-design="modern"] .portal-konto-schublade [hidden] {
  display: none !important;
}

html[data-design="modern"] dialog .portal-konto-schublade {
  height: 100%;
}

html[data-design="modern"] .portal-konto-schublade > .portal-schublade-kopf.portal-konto-kopf {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--bro-modern-konto-kopf-luecke);
  padding: var(--bro-modern-konto-kopf-innen);
  border-bottom: 0;
}

html[data-design="modern"] .portal-konto-kopf > .portal-nutzer-avatar {
  width: var(--bro-modern-konto-avatar);
  height: var(--bro-modern-konto-avatar);
  flex: none;
}

html[data-design="modern"] .portal-konto-kopf > div {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

html[data-design="modern"] .portal-konto-kopf h2 {
  margin: 0;
  font-size: var(--bro-modern-konto-titel);
  line-height: var(--bro-schrift-titel-zeilenhoehe);
  font-weight: var(--bro-schrift-titel-gewicht);
}

html[data-design="modern"] .portal-konto-kopf p {
  margin: 0;
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
}

html[data-design="modern"] .portal-konto-reiter {
  display: flex;
  flex: none;
  gap: var(--bro-abstand-8);
  padding: 0 var(--bro-abstand-16);
  overflow-x: auto;
  border-bottom: 1px solid var(--bro-linie);
}

html[data-design="modern"] .portal-konto-reiter a {
  flex: none;
  padding: var(--bro-abstand-12) var(--bro-abstand-8);
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
  text-decoration: none;
  border-bottom: var(--bro-markierung-breite) solid transparent;
}

html[data-design="modern"] .portal-konto-reiter a[aria-current="page"] {
  color: var(--bro-akzent);
  border-bottom-color: var(--bro-akzent);
  font-weight: var(--bro-schrift-betont-gewicht);
}

html[data-design="modern"] .portal-schublade-inhalt.portal-konto-inhalt {
  flex: 1;
  min-height: 0;
  padding: var(--bro-modern-konto-inhalt-innen);
  overflow-y: auto;
  overflow-wrap: anywhere;
  overscroll-behavior: contain;
}

html[data-design="modern"] .portal-konto-inhalt h2,
html[data-design="modern"] .portal-konto-inhalt h3 {
  margin: var(--bro-abstand-16) 0 var(--bro-abstand-8);
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
}

html[data-design="modern"] .portal-konto-inhalt h2:first-child {
  margin-top: 0;
}

html[data-design="modern"] .portal-konto-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bro-abstand-12);
  width: 100%;
  min-height: var(--bro-modern-konto-zeile-hoehe);
  padding: var(--bro-modern-konto-zeile-innen);
  border: 0;
  border-radius: var(--bro-modern-konto-zeile-radius);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

html[data-design="modern"] .portal-konto-zeile:hover {
  background: var(--bro-modern-hover);
}

html[data-design="modern"] .portal-konto-zeile small {
  display: block;
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
}

html[data-design="modern"] .portal-konto-zeile > .bro-symbol {
  flex: none;
}

html[data-design="modern"] .portal-konto-aktive-person {
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-12);
  padding: var(--bro-abstand-12);
  border: 0;
}

html[data-design="modern"] .portal-konto-aktiv {
  margin-left: auto;
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
}

html[data-design="modern"] .portal-konto-wahlen,
html[data-design="modern"] .portal-konto-schema {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-8);
}

html[data-design="modern"]
  :is(.portal-konto-wahlen, .portal-konto-schema)
  button[aria-pressed="true"] {
  border-color: var(--bro-akzent);
  background: var(--bro-modern-gewaehlt);
  color: var(--bro-akzent);
}

html[data-design="modern"] .portal-schublade-fuss.portal-konto-fuss {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--bro-abstand-16);
  padding: var(--bro-abstand-16) var(--bro-abstand-24);
  border-top: 1px solid var(--bro-linie);
}

html[data-design="modern"] .portal-konto-abmelden {
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-8);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--bro-fehler);
  font: inherit;
  cursor: pointer;
}

/* Gerahmte Gruppen und Symbolkacheln: Original Konto, Zeilen 268–328. */
html[data-design="modern"] .portal-konto-gruppe {
  padding: var(--bro-abstand-4);
  margin-bottom: var(--bro-abstand-8);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-modern-konto-gruppe-radius);
}

html[data-design="modern"] .portal-konto-zeilentext {
  flex: 1;
  min-width: 0;
  font-weight: var(--bro-schrift-betont-gewicht);
}

html[data-design="modern"] .portal-konto-zeilentext small {
  font-weight: var(--bro-schrift-fliesstext-gewicht);
}

html[data-design="modern"] .portal-konto-symbol {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--bro-modern-konto-symbol);
  height: var(--bro-modern-konto-symbol);
  border-radius: var(--bro-modern-konto-symbol-radius);
}

html[data-design="modern"] .portal-konto-symbol > .bro-symbol {
  width: var(--bro-modern-konto-symbol-svg);
  height: var(--bro-modern-konto-symbol-svg);
}

html[data-design="modern"] .portal-konto-symbol-neutral {
  background: var(--bro-modern-konto-neutral-flaeche);
  color: var(--bro-modern-konto-neutral-tinte);
}

html[data-design="modern"] .portal-konto-symbol-blau {
  background: var(--bro-modern-konto-blau-flaeche);
  color: var(--bro-modern-konto-blau-tinte);
}

html[data-design="modern"] .portal-konto-symbol-violett {
  background: var(--bro-modern-konto-violett-flaeche);
  color: var(--bro-modern-konto-violett-tinte);
}

html[data-design="modern"] .portal-konto-symbol-orange {
  background: var(--bro-modern-konto-orange-flaeche);
  color: var(--bro-modern-konto-orange-tinte);
}

/* #10771: vorhandene Modalhülle, Bereichsauswahl und zusätzliche Fachspalte.
   Die Originalbreiten werden aus dem gemeinsamen Kontomaß abgeleitet. */
html[data-design="modern"]
  dialog[data-portal-schubladen-dialog]:has([data-einrichtungs-schublade]) {
  width: calc(var(--bro-modern-konto-breite) * 2);
  max-width: var(--portal-schublade-sicht-breite, 100vw);
  /* Wie beim vorhandenen Konto-Termindetail: Die 1px-Rahmenlinie darf die
     Contentbox nicht unter die zwei gemeinsamen Kontobreiten verkleinern. */
  border-left: 0;
  container: einrichtung-konto / inline-size;
}

html[data-design="modern"] .portal-einrichtung-schublade {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow-wrap: anywhere;
}

html[data-design="modern"] .portal-einrichtung-schublade > .portal-schublade-inhalt {
  overflow-y: auto;
  min-height: 0;
}

html[data-design="modern"] .portal-einrichtung-spalten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  align-items: start;
  gap: var(--bro-abstand-16);
}

html[data-design="modern"] .portal-einrichtung-spalten > * {
  min-width: 0;
  max-width: 100%;
}

/* Die Fachspalte bleibt auch bei breitem Viewport schmal. */
html[data-design="modern"] [data-einrichtungs-bereich] .bb-zeiten-textzeile {
  grid-template-columns: minmax(0, 1fr);
}

html[data-design="modern"] .portal-einrichtung-schublade .portal-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-12);
}

html[data-design="modern"] dialog[data-portal-schubladen-dialog]:has([data-einrichtungs-formular]) {
  width: calc(var(--bro-modern-konto-breite) * 3);
}

html[data-design="modern"] .portal-einrichtung-konto-spalten {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--bro-modern-konto-breite));
  height: 100%;
  min-height: 0;
}

html[data-design="modern"] .portal-einrichtung-konto {
  order: 2;
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  border-right: 1px solid var(--bro-linie);
}

html[data-design="modern"] .portal-einrichtung-konto-spalten > .portal-einrichtung-schublade {
  order: 1;
  min-width: 0;
}

@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (max-height: 479px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (orientation: portrait) {
  html[data-design="modern"] .portal-einrichtung-konto-spalten {
    grid-template-columns: minmax(0, 1fr);
  }
  html[data-design="modern"] .portal-einrichtung-konto {
    display: none;
  }
}

/* Zwei gemeinsame Kontobreiten brauchen 480px + 480px. Die tatsächliche
   Hülle kann durch Pinch-Zoom schmaler als die Geräteklasse werden. */
@container einrichtung-konto (width < 960px) {
  html[data-design="modern"] .portal-einrichtung-konto-spalten {
    grid-template-columns: minmax(0, 1fr);
  }
  html[data-design="modern"] .portal-einrichtung-konto {
    display: none;
  }
}

/* #10754: Original KundenHandbuchSchublade: Handbuch links, Konto rechts.
   Unterhalb der gemeinsamen Tabletgrenze bleibt dieselbe innere Fläche mit
   einem echten Zurück-Link erreichbar; keine zweite Dialogimplementierung. */
html[data-design="modern"] [data-portal-schubladen-dialog]:has(.portal-handbuch-konto) {
  width: var(--bro-modern-handbuch-konto-breite);
  container: portal-handbuch / inline-size;
}

.portal-handbuch-konto {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--bro-modern-konto-breite, 1fr));
  height: 100%;
  min-height: 0;
}

.portal-handbuch-spalte {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--bro-flaeche-1);
  color: var(--bro-tinte-1);
}

.portal-handbuch-spalte > .portal-schublade-inhalt {
  overflow: auto;
  overflow-wrap: anywhere;
  overscroll-behavior: contain;
  min-height: 0;
  padding: var(--bro-abstand-24);
}

.portal-handbuch-spalte form {
  display: grid;
  gap: var(--bro-abstand-12);
}

.portal-handbuch-spalte input,
.portal-handbuch-spalte select {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.portal-handbuch-spalte details {
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
  padding: var(--bro-abstand-12);
  margin-block: var(--bro-abstand-8);
}

.portal-handbuch-spalte li {
  margin-block: var(--bro-abstand-12);
}

@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (max-height: 479px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (orientation: portrait) {
  .portal-handbuch-konto {
    grid-template-columns: minmax(0, 1fr);
  }

  html[data-design="modern"] .portal-handbuch-konto > .portal-konto-schublade {
    display: none;
  }
}

/* Pinch-Zoom verkleinert den VisualViewport unabhängig von der Geräteklasse.
   Die bestehende Hülle folgt diesem Bereich (#10562); ihre echte Innenbreite
   entscheidet deshalb ebenfalls, ob zwei Spalten noch zugänglich sind. */
@container portal-handbuch (max-width: 48rem) {
  .portal-handbuch-konto {
    grid-template-columns: minmax(0, 1fr);
  }

  html[data-design="modern"] .portal-handbuch-konto > .portal-konto-schublade {
    display: none;
  }
}

/* #10755, KundenKopf: Konto 480px rechts, vorhandene Fachinnenfläche 600px
   links. Ein Dialog; bei wenig Platz ersetzt das Detail die Kontospalte. */
html[data-design="modern"] dialog[data-portal-schubladen-dialog]:has([data-konto-spalten]) {
  width: calc(var(--bro-modern-konto-breite) + var(--bro-modern-konto-detail-breite));
  max-width: var(--portal-schublade-sicht-breite, 100vw);
  /* Die gemeinsame linke 1px-Rahmenlinie würde die Contentbox auf 1079px
     verkleinern und die 1080px-Spaltenabfrage auch am Desktop auslösen. */
  border-left: 0;
  container-type: inline-size;
  container-name: konto-termine;
}

html[data-design="modern"] .portal-konto-spalten {
  display: flex;
  height: 100%;
  min-height: 0;
  min-width: 0;
}

html[data-design="modern"] .portal-konto-spalten > [data-konto-detail] {
  flex: 1;
  min-width: 0;
}

html[data-design="modern"] .portal-konto-nebenspalte {
  flex: 0 0 var(--bro-modern-konto-breite);
  min-width: 0;
  border-left: 1px solid var(--bro-linie);
}

/* Der gespeicherte Stand enthält ein eigenes Entfernen-Formular vor der
   Bearbeitung. Nur deren Layoutbox entfällt: Sonst begrenzt ihr später Beginn
   die Sticky-Aktionen nach dem Speichern auf den Bereich hinter dem Fuß.
   Die echten Formularzuordnungen und getrennten POSTs bleiben im DOM erhalten. */
html[data-design="modern"] [data-konto-detail] .portal-termintyp-speichern {
  display: contents;
}

html[data-design="modern"] [data-konto-detail] .portal-formular-aktionen {
  position: sticky;
  /* Den Innenabstand des Scrollbereichs auch vor dem festen Fuß freihalten. */
  bottom: var(--bro-modern-konto-inhalt-innen);
  z-index: 1;
  padding: var(--bro-abstand-12) 0;
  background: var(--bro-flaeche-1);
}

html[data-design="modern"] [data-konto-detail] details > summary {
  padding: var(--bro-abstand-12);
  cursor: pointer;
  overflow-wrap: anywhere;
}

html[data-design="modern"] [data-konto-detail] details > summary small {
  display: block;
  color: var(--bro-tinte-2);
}

@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (max-height: 479px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (orientation: portrait), (min-width: 768px) and (max-width: 1279px) and (orientation: portrait), (min-width: 768px) and (max-width: 1279px) and (min-height: 480px) and (orientation: landscape) {
  html[data-design="modern"] .portal-konto-nebenspalte {
    display: none;
  }
}

/* Die Originalspalten brauchen zusammen 600px + 480px. Pinch-Zoom kann
   die tatsächliche Hülle darunter begrenzen, ohne die Geräteklasse zu ändern. */
@container konto-termine (width < 1080px) {
  html[data-design="modern"] .portal-konto-nebenspalte {
    display: none;
  }
}

/* Die öffentliche Online-Buchung im Rahmen der Studio-Webseite (#9988, Paket B7
   aus #9986): `studio-webseite.ts`, `buchung-oeffentlich.ts`,
   `praxisseite-oeffentlich.ts`. Entwurf: docs/design-canvas/beauty/
   BsCal03OnlineBuchung, BsCal04OnlineBuchungAngaben, BsCal12OnlineBuchungHandy.
   Nur Tokens (B14.7), keine Fremd-Ressource (ADR-0003), kein Skript: Das
   Handy-Menü ist ein `<details>`. Die Seiten sieht jeder Betrieb, deshalb hängt
   nichts an einem Rahmen-Attribut. */

/* Kopf, Inhalt und Fuß untereinander; der Fuß steht auch bei kurzer Seite unten. */
.portal-studioseite {
  display: flex;
  flex-direction: column;
}

.portal-studioseite > main {
  flex: 1 0 auto;
  width: 100%;
  box-sizing: border-box;
}

/* ---------------------------------------------------------------- Kopf --- */

.portal-studioseite-kopf {
  background: var(--bro-flaeche-1);
  border-bottom: 1px solid var(--bro-linie);
}

.portal-studioseite-kopf-innen {
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-32);
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--bro-abstand-12) var(--bro-abstand-24);
}

.portal-studioseite-marke {
  display: inline-flex;
  align-items: center;
  min-height: var(--bro-beruehrungsflaeche);
  color: var(--bro-tinte-1);
  text-decoration: none;
}

.portal-studioseite-name {
  font-size: var(--bro-schrift-titel-groesse);
  line-height: var(--bro-schrift-titel-zeilenhoehe);
  font-weight: var(--bro-schrift-titel-gewicht);
}

.portal-studioseite-logo {
  display: block;
  width: auto;
  max-width: 12rem;
  height: var(--bro-logo-kopf);
}

.portal-studioseite-navigation,
.portal-studioseite-menue-liste {
  display: flex;
  gap: var(--bro-abstand-24);
}

.portal-studioseite-navigation a,
.portal-studioseite-menue-liste a {
  color: var(--bro-tinte-1);
  font-weight: var(--bro-schrift-betont-gewicht);
  text-decoration: none;
}

.portal-studioseite-navigation a[aria-current],
.portal-studioseite-menue-liste a[aria-current] {
  color: var(--bro-akzent-text);
}

.portal-studioseite-aktionen {
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-16);
  margin-left: auto;
}

.portal-studioseite-telefon {
  display: inline-flex;
  align-items: center;
  gap: var(--bro-abstand-8);
  color: var(--bro-tinte-1);
  font-weight: var(--bro-schrift-betont-gewicht);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

.portal-studioseite-telefon .bro-symbol {
  color: var(--bro-tinte-2);
}

.portal-studioseite-buchen {
  display: inline-flex;
  align-items: center;
  min-height: var(--bro-beruehrungsflaeche);
  padding: 0 var(--bro-abstand-16);
  border-radius: var(--bro-radius-rund);
  background: var(--bro-akzent);
  color: var(--bro-akzent-tinte);
  font-weight: var(--bro-schrift-betont-gewicht);
  text-decoration: none;
  white-space: nowrap;
}

.portal-studioseite-menue {
  display: none;
  position: relative;
}

.portal-studioseite-menue > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--bro-beruehrungsflaeche);
  height: var(--bro-beruehrungsflaeche);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
  background: var(--bro-flaeche-1);
  cursor: pointer;
  list-style: none;
}

.portal-studioseite-menue > summary::-webkit-details-marker {
  display: none;
}

.portal-studioseite-menue-liste {
  position: absolute;
  right: 0;
  top: calc(100% + var(--bro-abstand-8));
  z-index: 2;
  flex-direction: column;
  gap: var(--bro-abstand-12);
  min-width: 12rem;
  padding: var(--bro-abstand-16);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
  background: var(--bro-flaeche-1);
  box-shadow: var(--bro-schatten-menue);
}

/* ------------------------------------------------------- Inhaltsfläche --- */

/* Die Buchung ist breiter als die schmale Spalte der Verwalten-Seite, die
   `.portal-buchung` weiter trägt (`portal.css`). */
.portal-studioseite-inhalt {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-24);
  max-width: 72rem;
}

.portal-buchung-einleitung {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
}

.portal-buchung-einleitung h1 {
  margin: 0;
  font-size: var(--bro-schrift-anzeige-groesse);
  line-height: var(--bro-schrift-anzeige-zeilenhoehe);
  font-weight: var(--bro-schrift-anzeige-gewicht);
}

.portal-buchung-satz {
  margin: 0;
  color: var(--bro-tinte-2);
}

.portal-studioseite-brotkrumen ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-8);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
}

.portal-studioseite-brotkrumen li + li::before {
  content: "›";
  margin-right: var(--bro-abstand-8);
  color: var(--bro-tinte-3);
}

.portal-studioseite-brotkrumen li[aria-current] {
  color: var(--bro-tinte-1);
  font-weight: var(--bro-schrift-betont-gewicht);
}

/* -------------------------------------------------------- Schrittleiste --- */

.portal-buchung-schritte {
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-12);
  margin: 0;
  padding: 0;
  list-style: none;
}

.portal-buchung-schritte li {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--bro-abstand-8);
  color: var(--bro-tinte-3);
  font-weight: var(--bro-schrift-betont-gewicht);
}

.portal-buchung-schritte li:last-child {
  flex: none;
}

/* Die Verbindungslinie zum nächsten Schritt — grün, sobald er erledigt ist. */
.portal-buchung-schritte li:not(:last-child)::after {
  content: "";
  flex: 1;
  min-width: var(--bro-abstand-24);
  height: 2px;
  border-radius: var(--bro-radius-rund);
  background: var(--bro-linie);
}

.portal-buchung-schritte li[data-zustand="erledigt"]::after {
  background: var(--bro-erfolg);
}

.portal-buchung-schritte li[data-zustand="erledigt"] {
  color: var(--bro-tinte-1);
}

.portal-buchung-schritte li[data-zustand="aktuell"] {
  color: var(--bro-tinte-1);
}

.portal-buchung-schritt-marke {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--bro-abstand-24);
  height: var(--bro-abstand-24);
  border: 1px solid var(--bro-linie-stark);
  border-radius: var(--bro-radius-rund);
  font-size: var(--bro-schrift-klein-groesse);
}

li[data-zustand="erledigt"] > .portal-buchung-schritt-marke {
  border-color: var(--bro-erfolg);
  color: var(--bro-erfolg);
}

li[data-zustand="aktuell"] > .portal-buchung-schritt-marke {
  border-color: var(--bro-akzent);
  background: var(--bro-akzent);
  color: var(--bro-akzent-tinte);
}

.portal-buchung-schritt-name {
  white-space: nowrap;
}

.portal-buchung-schritt-zaehler {
  display: none;
  color: var(--bro-tinte-2);
  font-weight: var(--bro-schrift-fliesstext-gewicht);
}

/* ---------------------------------------------------------- Bucherkarte --- */

.portal-buchung-karte {
  display: grid;
  grid-template-columns: minmax(16rem, 21rem) minmax(0, 1fr) minmax(12rem, 15rem);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-l);
  background: var(--bro-flaeche-1);
  box-shadow: var(--bro-schatten-menue);
}

.portal-buchung-karte[data-schritt="behandlung"],
.portal-buchung-karte[data-schritt="bestaetigt"] {
  grid-template-columns: minmax(0, 1fr);
}

.portal-buchung-karte[data-schritt="angaben"] {
  grid-template-columns: minmax(16rem, 21rem) minmax(0, 1fr);
}

.portal-buchung-karte > * {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
  min-width: 0;
  padding: var(--bro-abstand-24);
}

.portal-buchung-karte > * + * {
  border-left: 1px solid var(--bro-linie);
}

.portal-buchung-karte h2,
.portal-buchung-karte h3,
.portal-buchung-karte p {
  margin: 0;
}

/* Die Spalten der Karte: Auswahl der Behandlung, Tage, Zeiten, Angaben und das
   Ergebnis. Ihre Abstände setzt `.portal-buchung-karte > *`; hier steht nur,
   was eine Spalte von der anderen unterscheidet. */
.portal-buchung-karte-auswahl,
.portal-buchung-karte-ergebnis {
  gap: var(--bro-abstand-16);
}

.portal-buchung-karte-tage {
  gap: var(--bro-abstand-8);
}

.portal-buchung-karte-zeiten {
  gap: var(--bro-abstand-8);
  background: var(--bro-flaeche-1);
}

.portal-buchung-karte-angaben {
  gap: var(--bro-abstand-16);
}

.portal-buchung-karte-kennung {
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
}

.portal-buchung-karte .portal-buchung-gewaehlt {
  font-size: var(--bro-schrift-titel-groesse);
  line-height: var(--bro-schrift-titel-zeilenhoehe);
}

.portal-buchung-beschreibung {
  color: var(--bro-tinte-2);
}

.portal-buchung-eckdaten {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.portal-buchung-eckdaten li {
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-8);
}

.portal-buchung-eckdaten .bro-symbol {
  color: var(--bro-tinte-2);
}

.portal-buchung-karte .portal-buchung-mitarbeiterwahl {
  margin-top: 0;
}

.portal-buchung-mitarbeiterwahl h3 {
  margin: 0 0 var(--bro-abstand-8);
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
}

.portal-buchung-mitarbeiterwahl ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.portal-buchung-mitarbeiterwahl a {
  display: inline-flex;
  align-items: center;
  min-height: var(--bro-abstand-32);
  padding: 0 var(--bro-abstand-12);
  border: 1px solid var(--bro-linie-stark);
  border-radius: var(--bro-radius-rund);
  color: var(--bro-tinte-1);
  text-decoration: none;
}

.portal-buchung-mitarbeiterwahl a[aria-current] {
  border-color: var(--bro-akzent);
  background: var(--bro-akzent-flaeche);
  font-weight: var(--bro-schrift-betont-gewicht);
}

/* Die Behandlungen als Kacheln: Bild, Name, Dauer, Preis. */
.portal-buchung-karte .portal-buchung-leistungen {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--bro-abstand-12);
  margin: 0;
}

.portal-buchung-karte .portal-buchung-leistungen li {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
  padding: var(--bro-abstand-16);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
}

.portal-buchung-karte .portal-buchung-leistungen a {
  font-weight: var(--bro-schrift-betont-gewicht);
}

/* Das Monatsraster der Tage. Jeder Tag steht an seinem Wochentag; die Portion
   bleibt die geladene (F9), das Raster ordnet sie nur an. */
.portal-buchung-monat {
  font-size: var(--bro-schrift-betont-groesse);
}

.portal-buchung-wochentage,
.portal-buchung-karte .portal-buchung-tage {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--bro-abstand-4);
}

.portal-buchung-wochentage {
  color: var(--bro-tinte-3);
  font-size: var(--bro-schrift-fein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
  text-align: center;
}

.portal-buchung-karte .portal-buchung-tage {
  margin: 0;
}

.portal-buchung-tage [data-wochentag="1"] {
  grid-column: 1;
}

.portal-buchung-tage [data-wochentag="2"] {
  grid-column: 2;
}

.portal-buchung-tage [data-wochentag="3"] {
  grid-column: 3;
}

.portal-buchung-tage [data-wochentag="4"] {
  grid-column: 4;
}

.portal-buchung-tage [data-wochentag="5"] {
  grid-column: 5;
}

.portal-buchung-tage [data-wochentag="6"] {
  grid-column: 6;
}

.portal-buchung-tage [data-wochentag="7"] {
  grid-column: 7;
}

.portal-buchung-karte .portal-buchung-tage a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: var(--bro-beruehrungsflaeche);
  padding: var(--bro-abstand-4);
  border-radius: var(--bro-radius-m);
  background: var(--bro-akzent-flaeche);
  color: var(--bro-tinte-1);
  font-weight: var(--bro-schrift-betont-gewicht);
  font-variant-numeric: tabular-nums;
  text-align: center;
  text-decoration: none;
}

.portal-buchung-karte .portal-buchung-tage [data-frei="0"] a {
  background: transparent;
  color: var(--bro-tinte-3);
  font-weight: var(--bro-schrift-fliesstext-gewicht);
}

.portal-buchung-karte .portal-buchung-tage a[aria-current] {
  background: var(--bro-akzent);
  color: var(--bro-akzent-tinte);
}

.portal-buchung-tag-zahl {
  font-size: var(--bro-schrift-betont-groesse);
  line-height: var(--bro-schrift-betont-zeilenhoehe);
}

.portal-buchung-tag-monat {
  font-size: var(--bro-schrift-fein-groesse);
  line-height: var(--bro-schrift-fein-zeilenhoehe);
  font-weight: var(--bro-schrift-fliesstext-gewicht);
}

.portal-buchung-karte .portal-buchung-tagestitel {
  color: inherit;
  font-size: var(--bro-schrift-fein-groesse);
  font-weight: var(--bro-schrift-fliesstext-gewicht);
}

.portal-buchung-karte-leer {
  color: var(--bro-tinte-2);
}

/* Die Zeiten untereinander wie im Entwurf; auf dem Handy drei nebeneinander. */
.portal-buchung-karte .portal-buchung-zeiten {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  margin: 0;
}

.portal-buchung-karte .portal-buchung-zeiten a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--bro-beruehrungsflaeche);
  border: 1px solid var(--bro-linie-stark);
  border-radius: var(--bro-radius-m);
  color: var(--bro-tinte-1);
  font-weight: var(--bro-schrift-betont-gewicht);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

.portal-buchung-karte .portal-buchung-zeiten a:hover {
  border-color: var(--bro-akzent);
  background: var(--bro-akzent-flaeche);
}

.portal-buchung-karte-links {
  padding: 0;
}

.portal-buchung-karte-links > .portal-buchung-karte-behandlung {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
  padding: var(--bro-abstand-24);
}

.portal-buchung-karte .portal-buchung-termin {
  margin: 0 var(--bro-abstand-24) var(--bro-abstand-24);
  padding: var(--bro-abstand-12) var(--bro-abstand-16);
  border-radius: var(--bro-radius-m);
  background: var(--bro-akzent-flaeche);
  color: var(--bro-akzent-text);
}

.portal-buchung-formular label {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
  font-size: var(--bro-schrift-klein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
}

.portal-buchung-formular-aktionen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bro-abstand-12);
  padding-top: var(--bro-abstand-8);
}

.portal-buchung-formular-aktionen a {
  color: var(--bro-tinte-2);
  font-weight: var(--bro-schrift-betont-gewicht);
  text-decoration: none;
}

/* ------------------------------------------------------ Vertrauenszeile --- */

.portal-buchung-vertrauen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--bro-abstand-24);
  margin: 0;
  padding: var(--bro-abstand-16) var(--bro-abstand-24);
  list-style: none;
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-l);
  background: var(--bro-flaeche-0);
}

.portal-buchung-vertrauen li {
  display: flex;
  align-items: flex-start;
  gap: var(--bro-abstand-12);
}

.portal-buchung-vertrauen-symbol {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--bro-abstand-32);
  height: var(--bro-abstand-32);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
  background: var(--bro-flaeche-1);
  color: var(--bro-akzent-text);
}

.portal-buchung-vertrauen-text {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
  min-width: 0;
}

.portal-buchung-vertrauen-text > span {
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
  line-height: var(--bro-schrift-klein-zeilenhoehe);
}

/* ---------------------------------------- Bewertungen und Anfahrt unten --- */

.portal-buchung-unten {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
  gap: var(--bro-abstand-24);
  align-items: start;
}

.portal-buchung-unten > :only-child {
  grid-column: 1 / -1;
}

.portal-buchung-bewertungen,
.portal-buchung-anfahrt {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
}

.portal-buchung-anfahrt {
  padding: var(--bro-abstand-16);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-l);
  background: var(--bro-flaeche-1);
}

.portal-buchung-bewertungen h2,
.portal-buchung-anfahrt h2,
.portal-buchung-anfahrt h3,
.portal-buchung-bewertungen p,
.portal-buchung-anfahrt p {
  margin: 0;
}

.portal-buchung-bewertungen h2,
.portal-buchung-anfahrt h2 {
  font-size: var(--bro-schrift-titel-groesse);
  line-height: var(--bro-schrift-titel-zeilenhoehe);
}

.portal-buchung-anfahrt h3 {
  font-size: var(--bro-schrift-betont-groesse);
}

.portal-buchung-bewertung-schnitt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-8);
}

.portal-buchung-sterne {
  color: var(--bro-warnung);
  letter-spacing: var(--bro-schrift-fein-laufweite);
}

.portal-buchung-bewertung-herkunft {
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
}

/* Die Karte ist eine eigene Zeichnung (ADR-0003) — Farben nur über Tokens. */
.portal-buchung-kartenbild {
  display: block;
  width: 100%;
  height: 9rem;
  border-radius: var(--bro-radius-m);
}

.portal-buchung-kartenbild-grund {
  fill: var(--bro-flaeche-0);
}

.portal-buchung-kartenbild-strasse {
  fill: none;
  stroke: var(--bro-flaeche-1);
  stroke-width: 10;
}

.portal-buchung-kartenbild-nadel {
  fill: var(--bro-akzent);
}

.portal-buchung-kartenbild-punkt {
  fill: var(--bro-akzent-tinte);
}

.portal-buchung-adresse {
  font-style: normal;
}

.portal-buchung-oeffnungszeiten {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.portal-buchung-oeffnungszeiten > div {
  display: flex;
  justify-content: space-between;
  gap: var(--bro-abstand-16);
  padding: var(--bro-abstand-4) 0;
}

.portal-buchung-oeffnungszeiten > div + div {
  border-top: 1px solid var(--bro-linie);
}

.portal-buchung-oeffnungszeiten dt {
  color: var(--bro-tinte-2);
}

.portal-buchung-oeffnungszeiten dd {
  margin: 0;
  font-weight: var(--bro-schrift-betont-gewicht);
  font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------------- Fuß --- */

.portal-studioseite-fuss {
  margin-top: var(--bro-abstand-32);
  border-top: 1px solid var(--bro-linie);
  background: var(--bro-flaeche-1);
  font-size: var(--bro-schrift-klein-groesse);
}

.portal-studioseite-fuss-innen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-32);
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--bro-abstand-24);
}

.portal-studioseite-fuss-spalte {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  min-width: 12rem;
  color: var(--bro-tinte-2);
}

.portal-studioseite-fuss-spalte strong {
  color: var(--bro-tinte-1);
}

.portal-studioseite-fuss-spalte a {
  color: var(--bro-tinte-2);
  text-decoration: none;
}

/* ------------------------------------------------------- Handy (BsCal12) --- */

@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (max-height: 479px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (orientation: portrait) {
  .portal-studioseite-kopf-innen {
    gap: var(--bro-abstand-12);
    padding: var(--bro-abstand-8) var(--bro-abstand-16);
  }

  .portal-studioseite-navigation,
  .portal-studioseite-buchen {
    display: none;
  }

  .portal-studioseite-menue {
    display: block;
  }

  /* Das Telefon wird ein Knopf: nur das Symbol, die Nummer trägt der Name. */
  .portal-studioseite-telefon {
    justify-content: center;
    width: var(--bro-beruehrungsflaeche);
    height: var(--bro-beruehrungsflaeche);
    border: 1px solid var(--bro-linie);
    border-radius: var(--bro-radius-m);
  }

  .portal-studioseite-telefon > span {
    display: none;
  }

  .portal-buchung-schritte li:not([aria-current]),
  .portal-buchung-schritte li::after {
    display: none;
  }

  .portal-buchung-schritt-zaehler {
    display: inline;
  }

  .portal-buchung-karte,
  .portal-buchung-karte[data-schritt="angaben"],
  .portal-buchung-unten {
    grid-template-columns: minmax(0, 1fr);
  }

  .portal-buchung-karte > * {
    padding: var(--bro-abstand-16);
  }

  .portal-buchung-karte > * + * {
    border-left: 0;
    border-top: 1px solid var(--bro-linie);
  }

  .portal-buchung-karte .portal-buchung-zeiten {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--bro-abstand-8);
  }

  .portal-buchung-formular-aktionen {
    flex-direction: column-reverse;
    align-items: stretch;
  }
}

/* Kalender Tag, Woche, Monat und Termin-Detailseite (#9990, Bündel #9986,
   Paket B1). Entwurf: docs/design-canvas/beauty/BsCal01HeuteKalender.dc.html,
   BsCal05HeuteKalenderWoche.dc.html, BsCal06HeuteKalenderMonat.dc.html. Nur
   Tokens (B14.7). Ohne Bindung an den Beauty-Rahmen: Der Kalender ist
   Funktion, jeder Betrieb plant hier seinen Tag. Box, Kopfleiste, Reiter,
   Plakette und Meldungen kommen aus `beauty.css` (B0); das Zeitraster selbst
   (Achse, Spalten, Klickflächen, Blöcke) aus `portal.css` (#9039). */

/* Zwei Spalten wie im Entwurf: links der Kalender, rechts Monatsblatt,
   Anfragen und Online-Buchung. Reicht der Platz nicht, rutscht die rechte
   Spalte darunter. */
.portal-kal-seite {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--bro-abstand-16);
}

.portal-kal-haupt {
  display: flex;
  flex: 999 1 640px;
  flex-direction: column;
  gap: var(--bro-abstand-16);
  min-width: 0;
}

.portal-kal-spalte {
  display: flex;
  flex: 1 1 300px;
  flex-direction: column;
  gap: var(--bro-abstand-16);
  min-width: 0;
}

.portal-kal-haupt > .bb-box + .bb-box,
.portal-kal-spalte > .bb-box + .bb-box,
.portal-kal-wurzel > .bb-box + .bb-box {
  margin-top: 0;
}

/* Die Leiste unter den Reitern: ‹ Heute ›, Titel, rechts Legende oder
   Schalter. Bricht auf schmalen Schirmen um, statt seitlich zu rollen. */
.portal-kal-leiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-12);
  padding: var(--bro-abstand-12) var(--bro-abstand-16);
  border-bottom: 1px solid var(--bro-linie);
}

.portal-kal-blaettern {
  display: inline-flex;
  gap: var(--bro-abstand-4);
}

.portal-kal-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 var(--bro-abstand-12);
  border: 1px solid var(--bro-linie-stark);
  border-radius: var(--bro-konsole-radius-feld);
  background: var(--bro-flaeche-0);
  color: var(--bro-tinte-1);
  font-size: var(--bro-schrift-klein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
  text-decoration: none;
}

.portal-kal-knopf-symbol {
  width: 32px;
  padding: 0;
}

.portal-kal-knopf:hover {
  background: var(--bro-akzent-flaeche);
}

.portal-kal-knopf .bro-symbol,
.portal-kal-kopf-weg .bro-symbol {
  width: 16px;
  height: 16px;
}

.portal-kal-titel {
  color: var(--bro-tinte-1);
  font-size: var(--bro-schrift-betont-groesse);
}

.portal-kal-rechts {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-12);
  margin-left: auto;
}

.portal-kal-rechts .portal-termine-tagesleiste {
  display: inline-flex;
  align-items: center;
  gap: var(--bro-abstand-8);
  margin: 0;
}

/* Die Legende: bestätigt voll, unbestätigt gestrichelt, gesperrt grau. */
.portal-kal-legende {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-12);
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-fein-groesse);
}

.portal-kal-legende-eintrag {
  display: inline-flex;
  align-items: center;
  gap: var(--bro-abstand-4);
}

.portal-kal-legende-marke {
  width: 12px;
  height: 12px;
  border: 1px solid var(--bro-akzent);
  border-radius: var(--bro-konsole-radius-klein);
  background: var(--bro-flaeche-1);
}

.portal-kal-legende-bestaetigt {
  border-style: solid;
}

.portal-kal-legende-offen {
  border-style: dashed;
  background: var(--bro-warnung-flaeche);
}

.portal-kal-legende-gesperrt {
  border-color: var(--bro-linie-stark);
  background: var(--bro-flaeche-1);
}

.portal-kal-tagesplan {
  min-width: 0;
}

.portal-kal-satz {
  margin: 0;
  padding: var(--bro-abstand-12) var(--bro-abstand-16) 0;
}

.portal-kal-tagesplan > .portal-termine-kopfzeile {
  margin: 0;
  padding: var(--bro-abstand-8) var(--bro-abstand-16) 0;
}

.portal-kal-leer {
  margin: 0;
  padding: var(--bro-abstand-12) var(--bro-abstand-16);
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
}

.portal-kal-tagesplan > .portal-tagesraster-karte {
  margin-top: var(--bro-abstand-12);
  border-top: 1px solid var(--bro-linie);
}

/* Der Spaltenkopf (Entwurf `BsCal01`): Kürzelkreis, Name, „3 Termine · 2:45 h“. */
.portal-kal-spaltenkopf {
  flex-direction: row;
  justify-content: flex-start;
  gap: var(--bro-abstand-8);
  text-align: left;
}

.portal-kal-kuerzel {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--bro-radius-rund);
  background: var(--bro-akzent-flaeche);
  color: var(--bro-akzent-text);
  font-size: var(--bro-schrift-fein-groesse);
  font-weight: var(--bro-schrift-titel-gewicht);
}

.portal-kal-kopf-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.portal-kal-kopf-text strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-kal-stunden {
  color: var(--bro-tinte-3);
}

.portal-kal-kopf-zeile {
  display: block;
}

/* Der Kopf einer Tagesspalte der Woche: „Mo 12“, führt in den Tag. */
.portal-kal-spaltenkopf:has(.portal-kal-tageskopf) {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.portal-kal-tageskopf {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  color: var(--bro-tinte-1);
  text-decoration: none;
}

.portal-kal-tageskopf-name {
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-fein-groesse);
}

.portal-kal-tageskopf[aria-current="date"] strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  border-radius: var(--bro-radius-rund);
  background: var(--bro-akzent);
  color: var(--bro-akzent-tinte);
}

/* Ein Terminblock: Zeit mit Plaketten, Behandlung, Kundin. Unbestätigt
   gestrichelt (`portal.css`, `data-zustand="angefragt"`) und getönt. */
.portal-kal-block {
  gap: 2px;
  outline: calc(var(--portal-kal-markiert, 0) * 2px) solid var(--bro-akzent);
  outline-offset: 1px;
  transition: outline-color 0.2s;
}

.portal-kal-block[data-zustand="angefragt"] {
  background: var(--bro-warnung-flaeche);
}

.portal-kal-block:focus-visible {
  outline: var(--bro-fokus-breite) solid var(--bro-akzent);
  outline-offset: var(--bro-fokus-abstand);
}

.portal-kal-block-zeit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-4);
  color: var(--bro-tinte-2);
}

.portal-kal-block-zeit .bb-plakette {
  font-size: var(--bro-schrift-fein-groesse);
}

.portal-kal-block-wer {
  color: var(--bro-tinte-2);
}

/* Eine Sperre als graue Fläche in der Spalte, die sie belegt. Sie fängt
   keinen Klick: Am Tresen darf in gesperrter Zeit angelegt werden, mit
   Warnung (#983, #2011) — die Klickflächen darunter bleiben erreichbar. */
.portal-kal-sperre {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: var(--termin-oben);
  height: max(var(--termin-hoehe), 1.375rem);
  box-sizing: border-box;
  padding: var(--bro-abstand-4) var(--bro-abstand-8);
  border-top: 1px solid var(--bro-linie-stark);
  border-bottom: 1px solid var(--bro-linie-stark);
  background: repeating-linear-gradient(
    -45deg,
    var(--bro-flaeche-1),
    var(--bro-flaeche-1) 6px,
    var(--bro-flaeche-0) 6px,
    var(--bro-flaeche-0) 12px
  );
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-fein-groesse);
  pointer-events: none;
  overflow: hidden;
}

.portal-kal-sperre span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Die Jetzt-Linie (Entwurf `BsCal01`): eine Linie mit Punkt am linken Rand. */
.portal-kal-jetzt {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  top: var(--raster-oben);
  border-top: 2px solid var(--bro-fehler);
  pointer-events: none;
}

.portal-kal-jetzt::before {
  content: "";
  position: absolute;
  top: -5px;
  left: -4px;
  width: 8px;
  height: 8px;
  border-radius: var(--bro-radius-rund);
  background: var(--bro-fehler);
}

/* Nur für Vorlesehilfen. */
.portal-kal-vorleser {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Das Pulsieren (README E4): Die Paarung je Termin setzt die Seite
   (`pulsStilHtml`, nur die zwei Größen); Ring und Bewegung stehen hier. Wer
   weniger Bewegung wünscht, bekommt nur den ruhigen Ring. */
@keyframes kal-puls {
  0% {
    box-shadow: 0 0 0 0 var(--bro-akzent);
    transform: scale(1);
  }

  50% {
    box-shadow: 0 0 0 9px transparent;
    transform: scale(1.025);
  }

  100% {
    box-shadow: 0 0 0 0 transparent;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .portal-kal-block {
    animation: var(--portal-kal-puls, none) 1.1s ease-in-out infinite;
  }
}

/* Die Kopfleisten-Wege „Alle ›“ und die Pfeile des Monatsblatts. */
.portal-kal-kopf-weg {
  display: inline-flex;
  align-items: center;
  gap: var(--bro-abstand-4);
  color: var(--bro-akzent-text);
  font-size: var(--bro-schrift-klein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
  text-decoration: none;
}

.portal-kal-kopf-weg:hover {
  text-decoration: underline;
}

/* Das Monatsblatt rechts: heute umrandet, der gezeigte Tag gefüllt, ein
   Punkt an jedem Tag mit Terminen. */
.portal-kal-monat {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
}

.portal-kal-wochentag {
  padding-bottom: var(--bro-abstand-4);
  color: var(--bro-tinte-3);
  font-size: var(--bro-schrift-fein-groesse);
  text-align: center;
}

.portal-kal-monatstag {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  border-radius: var(--bro-konsole-radius-klein);
  color: var(--bro-tinte-1);
  font-size: var(--bro-schrift-klein-groesse);
  text-decoration: none;
}

.portal-kal-monatstag:hover {
  background: var(--bro-akzent-flaeche);
}

.portal-kal-monatstag[data-heute] {
  box-shadow: inset 0 0 0 1px var(--bro-akzent);
}

.portal-kal-monatstag[aria-current="date"] {
  background: var(--bro-akzent);
  color: var(--bro-akzent-tinte);
  font-weight: var(--bro-schrift-titel-gewicht);
}

.portal-kal-punkt {
  position: absolute;
  bottom: 3px;
  left: 50%;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: var(--bro-radius-rund);
  background: var(--bro-akzent);
}

.portal-kal-monatstag[aria-current="date"] .portal-kal-punkt {
  background: var(--bro-akzent-tinte);
}

/* „Wartet auf Bestätigung“: Name, Behandlung und Zeit, „bei … · online
   gebucht“, rechts Bestätigen und Ablehnen. Die Hervorhebung beim Pulsieren
   setzt `--portal-kal-markiert`. */
.portal-kal-bestaetigung {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--bro-abstand-8);
  padding: var(--bro-abstand-12) var(--bro-abstand-16);
  box-shadow: inset calc(var(--portal-kal-markiert, 0) * 3px) 0 0 var(--bro-akzent);
  transition:
    background-color 0.15s,
    box-shadow 0.15s;
}

.portal-kal-bestaetigung + .portal-kal-bestaetigung {
  border-top: 1px solid var(--bro-linie);
}

.portal-kal-bestaetigung:hover {
  background: var(--bro-akzent-flaeche);
}

.portal-kal-bestaetigung-text {
  display: flex;
  flex: 1 1 160px;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
}

.portal-kal-bestaetigung-name {
  color: var(--bro-tinte-1);
  font-weight: var(--bro-schrift-titel-gewicht);
  text-decoration: none;
}

.portal-kal-bestaetigung-name:hover {
  text-decoration: underline;
}

.portal-kal-bestaetigung-unter {
  color: var(--bro-tinte-3);
  font-size: var(--bro-schrift-fein-groesse);
}

.portal-kal-bestaetigung-wege {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--bro-abstand-8);
}

.portal-kal-bestaetigung-wege form {
  margin: 0;
}

.portal-kal-online-text {
  margin: 0 0 var(--bro-abstand-8);
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
}

.portal-kal-online-adresse {
  display: block;
  margin-bottom: var(--bro-abstand-8);
  padding: var(--bro-abstand-4) var(--bro-abstand-8);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-konsole-radius-klein);
  background: var(--bro-flaeche-1);
  color: var(--bro-tinte-1);
  font-size: var(--bro-schrift-klein-groesse);
}

.portal-kal-liste {
  margin: var(--bro-abstand-8) 0 0;
  padding-left: var(--bro-abstand-16);
}

/* Filter je Person (Woche) und „Nur ich / Ganzes Studio“ (Monat): Chips. */
.portal-kal-filter,
.portal-kal-schalter {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-4);
}

.portal-kal-schalter-name {
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
}

.portal-kal-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 var(--bro-abstand-12);
  border: 1px solid var(--bro-linie-stark);
  border-radius: var(--bro-konsole-radius-pille);
  background: var(--bro-flaeche-0);
  color: var(--bro-tinte-1);
  font-size: var(--bro-schrift-klein-groesse);
  text-decoration: none;
  white-space: nowrap;
}

.portal-kal-chip[aria-current="true"] {
  border-color: var(--bro-akzent);
  background: var(--bro-akzent-flaeche);
  color: var(--bro-akzent-text);
  font-weight: var(--bro-schrift-betont-gewicht);
}

/* Der Monat: sieben Spalten, volle Wochen, Tage außerhalb des Monats leise. */
.portal-kal-monatsraster {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin-top: var(--bro-abstand-12);
  border-top: 1px solid var(--bro-linie);
}

.portal-kal-monatskopf {
  padding: var(--bro-abstand-8);
  border-bottom: 1px solid var(--bro-linie);
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-fein-groesse);
  text-align: center;
}

.portal-kal-monatszelle {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--bro-abstand-4);
  min-height: 92px;
  padding: var(--bro-abstand-8);
  border-right: 1px solid var(--bro-linie);
  border-bottom: 1px solid var(--bro-linie);
  color: var(--bro-tinte-1);
  font-size: var(--bro-schrift-klein-groesse);
  text-decoration: none;
  min-width: 0;
}

.portal-kal-monatszelle:nth-child(7n + 7) {
  border-right: 0;
}

.portal-kal-monatszelle:hover {
  background: var(--bro-akzent-flaeche);
}

.portal-kal-monatszelle-aussen {
  color: var(--bro-tinte-3);
}

.portal-kal-monatsnummer {
  font-weight: var(--bro-schrift-betont-gewicht);
}

.portal-kal-monatszelle[aria-current="date"] .portal-kal-monatsnummer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  border-radius: var(--bro-radius-rund);
  background: var(--bro-akzent);
  color: var(--bro-akzent-tinte);
}

.portal-kal-monatszahl {
  color: var(--bro-tinte-2);
}

/* Die Detailseite: Angaben als Begriff und Wert, Handgriffe in Boxen. */
.portal-kal-angaben {
  display: grid;
  gap: var(--bro-abstand-8);
  margin: 0;
}

.portal-kal-angabe {
  display: grid;
  grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr);
  gap: var(--bro-abstand-12);
  align-items: start;
}

.portal-kal-angabe dt {
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
}

.portal-kal-angabe dd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-8);
  margin: 0;
  color: var(--bro-tinte-1);
}

.portal-kal-angabe dd p {
  flex-basis: 100%;
  margin: 0;
}

.portal-kal-handgriff {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-8);
  margin: 0;
}

.portal-kal-angaben + .portal-kal-handgriff {
  margin-top: var(--bro-abstand-16);
  padding-top: var(--bro-abstand-16);
  border-top: 1px solid var(--bro-linie);
}

.portal-kal-handgriff > p {
  flex-basis: 100%;
  margin: 0;
}

.portal-kal-handgriff-felder {
  display: grid;
  align-items: start;
  justify-items: start;
}

.portal-kal-handgriff-felder > .bro-eingabefeld {
  width: 100%;
  max-width: 28rem;
}

.portal-kal-wege {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-12);
  margin: var(--bro-abstand-12) 0 0;
}

@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (max-height: 479px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (orientation: portrait) {
  .portal-kal-rechts {
    margin-left: 0;
  }

  .portal-kal-angabe {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .portal-kal-monatszelle {
    min-height: 64px;
    padding: var(--bro-abstand-4);
  }
}

/* Zeiten, Team & Räume (#9995, Paket B5 aus #9986): `verfuegbarkeit-seite.ts`
   und `sperrzeiten-seite.ts`. Entwurf:
   docs/design-canvas/beauty/BsCal09ZeitenTeamRaeume.dc.html. Nur Tokens
   (B14.7). Ohne Rahmen-Bindung wie die Bausteine `.bb-*`: Die Seiten sieht
   jeder Betrieb. Box, Kopfleiste, Reiter und Meldungen kommen aus
   `beauty.css` (B0). Kein Skript: Schalter und „+“ wirken über `:has()`. */

/* Ein Reiter: Teile untereinander, je Teil eine Haarlinie davor. Versteckte
   Felder am Anfang eines Formulars zählen nicht mit. */
.bb-zeiten-formular {
  margin: 0;
}

.bb-zeiten-tafel > :not(input) ~ :not(input),
.bb-zeiten-formular > :not(input) ~ :not(input) {
  border-top: 1px solid var(--bro-linie);
}

.bb-zeiten-teil {
  display: grid;
  gap: var(--bro-abstand-12);
  padding: var(--bro-abstand-16) var(--bro-abstand-24);
}

.bb-zeiten-titel {
  margin: 0;
  color: var(--bro-tinte-1);
  font-size: var(--bro-schrift-fliesstext-groesse);
  font-weight: var(--bro-schrift-titel-gewicht);
  line-height: var(--bro-schrift-fliesstext-zeilenhoehe);
}

.bb-zeiten-hinweis {
  max-width: 760px;
  margin: 0;
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
  line-height: var(--bro-schrift-klein-zeilenhoehe);
}

.bb-zeiten-leer {
  margin: 0;
  color: var(--bro-tinte-2);
}

/* Die graue Leiste unten im Formular, Knopf rechts (Entwurf). */
.bb-zeiten-fuss {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px var(--bro-abstand-24);
  border-radius: 0 0 var(--bro-konsole-radius-box) var(--bro-konsole-radius-box);
  background: var(--bro-flaeche-0);
}

/* „Arbeitszeiten von“: Wahlknöpfe je Person, rechts die Zeitzone. */
.bb-zeiten-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-12);
  padding: 14px var(--bro-abstand-24);
}

.bb-zeiten-band-name,
.bb-zeiten-zone {
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
}

.bb-zeiten-zone {
  margin-left: auto;
}

.bb-zeiten-personen-wahl {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

.bb-zeiten-person-knopf {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 var(--bro-abstand-12);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-konsole-radius-pille);
  background: var(--bro-flaeche-1);
  color: var(--bro-tinte-3);
  font-size: var(--bro-schrift-klein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
  text-decoration: none;
}

.bb-zeiten-person-knopf:hover {
  color: var(--bro-tinte-1);
}

.bb-zeiten-person-knopf[aria-current="true"] {
  border-color: var(--bro-hinweis-linie);
  background: var(--bro-akzent-flaeche);
  color: var(--bro-tinte-1);
}

.bb-zeiten-punkt {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: var(--bro-konsole-radius-pille);
  background: var(--bro-linie-stark);
}

.bb-zeiten-person-knopf[aria-current="true"] .bb-zeiten-punkt {
  background: var(--bro-akzent);
}

/* Ein Wochentag: Schalter · Name · Zeitspannen · „+“. */
.bb-zeiten-tag {
  display: grid;
  grid-template-columns: 52px 120px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--bro-abstand-12);
  padding: var(--bro-abstand-12) var(--bro-abstand-24);
}

.bb-zeiten-tag + .bb-zeiten-tag {
  border-top: 1px solid var(--bro-linie);
}

@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (max-height: 479px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (orientation: portrait) {
  .bb-zeiten-tag {
    grid-template-columns: 52px minmax(0, 1fr) auto;
  }

  .bb-zeiten-tag > .bb-zeiten-spannen {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

.bb-zeiten-tagname {
  color: var(--bro-tinte-1);
  font-weight: var(--bro-schrift-betont-gewicht);
}

/* Der Schalter: ein echtes Kontrollkästchen, gezeichnet als Spur mit Knopf. */
.bb-schalter {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}

.bb-schalter-spur {
  position: relative;
  display: block;
  width: 36px;
  height: 22px;
  border-radius: var(--bro-konsole-radius-pille);
  background: var(--bro-linie-stark);
  transition: background-color 0.15s;
}

.bb-schalter-spur::after {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: var(--bro-konsole-radius-pille);
  background: var(--bro-flaeche-1);
  box-shadow: 0 0 0 1px var(--bro-linie);
  content: "";
  transition: transform 0.15s;
}

.bb-schalter input:checked + .bb-schalter-spur {
  background: var(--bro-akzent);
}

.bb-schalter input:checked + .bb-schalter-spur::after {
  transform: translateX(14px);
}

.bb-schalter:has(input:focus-visible) .bb-schalter-spur {
  outline: var(--bro-fokus-breite) solid var(--bro-akzent);
  outline-offset: var(--bro-fokus-abstand);
}

@media (prefers-reduced-motion: reduce) {
  .bb-schalter-spur,
  .bb-schalter-spur::after {
    transition: none;
  }
}

.bb-zeiten-spannen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-8) var(--bro-abstand-16);
  min-width: 0;
}

.bb-zeiten-spanne {
  display: inline-flex;
  align-items: center;
  gap: var(--bro-abstand-8);
}

.bb-zeit-feld {
  width: 6em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.bb-zeiten-strich {
  color: var(--bro-tinte-2);
}

/* „+“ deckt die leere Zeitspanne auf; ausgeschaltet steht „nicht verfügbar“. */
.bb-zeiten-spanne-neu,
.bb-zeiten-aus {
  display: none;
}

.bb-zeiten-aus {
  color: var(--bro-tinte-3);
}

.bb-zeiten-tag:has(.bb-zeiten-plus input:checked) .bb-zeiten-spanne-neu {
  display: inline-flex;
}

.bb-zeiten-tag:has(.bb-schalter input:not(:checked)) .bb-zeiten-spanne {
  display: none;
}

.bb-zeiten-tag:has(.bb-schalter input:not(:checked)) .bb-zeiten-aus {
  display: inline;
}

.bb-zeiten-tag:has(.bb-schalter input:not(:checked)) .bb-zeiten-plus {
  visibility: hidden;
}

.bb-zeiten-plus {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--bro-linie-stark);
  border-radius: var(--bro-konsole-radius-klein);
  background: var(--bro-flaeche-1);
  color: var(--bro-tinte-1);
  cursor: pointer;
}

.bb-zeiten-plus:has(input:checked) {
  border-color: var(--bro-akzent);
  background: var(--bro-akzent-flaeche);
}

.bb-zeiten-plus:has(input:focus-visible) {
  outline: var(--bro-fokus-breite) solid var(--bro-akzent);
  outline-offset: var(--bro-fokus-abstand);
}

.bb-zeiten-plus .bro-symbol {
  width: 15px;
  height: 15px;
}

/* Listen wie „Gesperrte Zeiten“ im Entwurf: wann · was · wer · Knopf. */
.bb-zeiten-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-8) var(--bro-abstand-16);
  margin: 0;
  padding: var(--bro-abstand-12) var(--bro-abstand-24);
}

.bb-zeiten-zeile + .bb-zeiten-zeile {
  border-top: 1px solid var(--bro-linie);
}

.bb-zeiten-wann {
  display: flex;
  flex: 0 1 220px;
  flex-direction: column;
  gap: 2px;
  min-width: 160px;
  font-variant-numeric: tabular-nums;
}

.bb-zeiten-wann strong {
  color: var(--bro-tinte-1);
  font-weight: var(--bro-schrift-betont-gewicht);
}

.bb-zeiten-was {
  display: flex;
  flex: 1 1 200px;
  flex-direction: column;
  gap: var(--bro-abstand-4);
  min-width: 0;
  color: var(--bro-tinte-1);
}

.bb-zeiten-wer,
.bb-zeiten-unter {
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
}

.bb-zeiten-unter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.bb-zeiten-warnung {
  color: var(--bro-warnung);
  font-size: var(--bro-schrift-fein-groesse);
}

.bb-zeiten-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-8);
  margin: 0 0 0 auto;
}

.bb-zeiten-knoepfe form {
  margin: 0;
}

/* Öffnungszeiten und Zeiten je Behandlung: Tag · Textzeile · Knopf. */
.bb-zeiten-textzeile {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto;
}

@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (max-height: 479px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (orientation: portrait) {
  .bb-zeiten-textzeile {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Räume: Name und Kapazität in der Zeile ändern. */
.bb-zeiten-raum-formular {
  display: flex;
  flex: 1 1 320px;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-8);
  margin: 0;
}

.bb-zeiten-zahl-feld {
  width: 6em;
}

/* Felder einer Anlegemaske und die Auswahl per GET. */
.bb-zeiten-auswahl {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--bro-abstand-12);
  margin: 0;
}

.bb-zeiten-felder {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--bro-abstand-12);
}

.bb-zeiten-feld {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
}

.bb-zeiten-feldname {
  color: var(--bro-tinte-1);
  font-size: var(--bro-schrift-klein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
  line-height: var(--bro-schrift-klein-zeilenhoehe);
}

.bb-zeiten-haken {
  display: inline-flex;
  align-items: center;
  gap: var(--bro-abstand-8);
  color: var(--bro-tinte-1);
  cursor: pointer;
}

.bb-zeiten-haken-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--bro-abstand-8);
}

/* „Ganztägig“ angehakt: Von und Bis gelten nicht und stehen nicht da. */
.bb-zeiten-sperrfelder:has(#ganztaegig:checked) .bb-zeiten-nur-zeit {
  display: none;
}

/* „Sperre anlegen“ in der Kopfleiste. */
.bb-zeiten-anlegen {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.bb-zeiten-anlegen .bro-symbol {
  width: 15px;
  height: 15px;
}

/* Glasfaser im Seitenmuster (#10281): Adressen mit Reitern, Schubladen der
   Arbeitslisten. `adressliste-seite.ts`, `arbeitslisten-seite.ts`.
   Entwurf: Leinwand „Demo Fahrdienst“, Version 84, Reihe „Glasfaser“.
   Nur Tokens (B14.7). */

/* Werkzeugzeile einer Box: Filter, Suche, Knöpfe; bricht auf schmalen
   Geräten um. */
.gf-werkzeuge {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--bro-abstand-8) var(--bro-abstand-12);
  margin: 0 0 var(--bro-abstand-12);
}

.gf-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-4);
  margin-right: auto;
}

.gf-vorspann,
.gf-summen {
  margin: 0 0 var(--bro-abstand-12);
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
}

.gf-summen {
  font-weight: var(--bro-schrift-betont-gewicht);
}

/* PLZ, Stadt und AdressID als Unterzeile der Adresse. */
.gf-unterzeile {
  display: block;
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
}

.gf-zahl {
  text-align: right;
  white-space: nowrap;
}

/* Breite Tabellen rollen in ihrer Box statt die Seite zu verbreitern. */
.gf-tabelle {
  overflow-x: auto;
}

.gf-trefferliste {
  display: grid;
  gap: var(--bro-abstand-8);
  margin: 0 0 var(--bro-abstand-12);
  padding: 0;
  list-style: none;
}

.gf-trefferliste a {
  display: inline-flex;
  align-items: center;
  min-height: var(--bro-beruehrungsflaeche);
  font-weight: var(--bro-schrift-betont-gewicht);
}

/* ── Zeiterfassung im Seitenmuster (#10265, Leinwand Df113–Df124) ─────────
   Stempeluhr als Band, Zeitraum-Leiste mit ‹ ›, Karten im Reiter
   Abwesenheiten, Knöpfe in der Zeile. Nur Tokens; die Farbe der Gruppe
   „Team“ ist `--bro-datenreihe-5` (`ZEIT_GRUPPENFARBE` in `bereich.ts`).
   Kein Skript: Formulare sind gewöhnliche Formulare. */

.zt-seite {
  display: grid;
  gap: var(--bro-abstand-16);
}

.zt-stempel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--bro-abstand-12);
  padding: var(--bro-abstand-16);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-konsole-radius-box);
  background: var(--bro-flaeche-1);
}

.zt-stempel-laeuft {
  border-color: color-mix(in oklab, var(--bro-datenreihe-5) 45%, var(--bro-linie));
  background: color-mix(in oklab, var(--bro-datenreihe-5) 9%, var(--bro-flaeche-1));
}

.zt-stempel-titel {
  margin: 0;
  color: var(--bro-tinte-1);
  font-size: var(--bro-schrift-titel-groesse);
  font-weight: var(--bro-schrift-titel-gewicht);
  font-variant-numeric: tabular-nums;
}

.zt-stempel-text p {
  margin: 0;
}

.zt-stempel-form,
.zt-auswahl,
.zt-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--bro-abstand-8);
  margin: 0;
}

.zt-stempel-pause,
.zt-auswahl label,
.zt-inline label {
  display: grid;
  gap: var(--bro-abstand-4);
}

.zt-stempel-pause input {
  width: 7rem;
}

.zt-werkzeug {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--bro-abstand-12);
  margin-bottom: var(--bro-abstand-12);
}

.zt-zeitraum {
  display: inline-flex;
  align-items: center;
  gap: var(--bro-abstand-8);
}

.zt-zeitraum-titel {
  color: var(--bro-tinte-1);
  font-weight: var(--bro-schrift-titel-gewicht);
  font-variant-numeric: tabular-nums;
}

.zt-chips {
  margin: 0;
}

.zt-chip-zahl {
  color: var(--bro-tinte-2);
  font-variant-numeric: tabular-nums;
}

.zt-vorspann {
  margin: 0 0 var(--bro-abstand-12);
  color: var(--bro-tinte-2);
}

.zt-zahl {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.zt-negativ {
  color: var(--bro-fehler);
}

.zt-knoepfe {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: var(--bro-abstand-8);
}

.zt-karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--bro-abstand-12);
  margin-bottom: var(--bro-abstand-16);
}

.zt-karte {
  display: grid;
  align-content: start;
  gap: var(--bro-abstand-4);
  padding: var(--bro-abstand-16);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-konsole-radius-box);
  background: color-mix(in oklab, var(--bro-datenreihe-5) 6%, var(--bro-flaeche-1));
}

.zt-karte p {
  margin: 0;
}

.zt-karte-titel {
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.zt-karte-wert {
  color: var(--bro-tinte-1);
  font-size: var(--bro-schrift-titel-groesse);
  font-weight: var(--bro-schrift-titel-gewicht);
  font-variant-numeric: tabular-nums;
}

.zt-leer {
  display: grid;
  justify-items: center;
  gap: var(--bro-abstand-8);
  padding: var(--bro-abstand-24) var(--bro-abstand-16);
  text-align: center;
}

.zt-leer p {
  margin: 0;
}

.zt-mehr > summary,
.zt-historie > summary {
  color: var(--bro-akzent);
  cursor: pointer;
}

.zt-abschnitt {
  margin-top: var(--bro-abstand-16);
}

.zt-historie {
  margin-top: var(--bro-abstand-12);
}

@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (max-height: 479px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (orientation: portrait) {
  .zt-stempel,
  .zt-werkzeug {
    align-items: stretch;
  }

  .zt-stempel-form > button {
    flex: 1 1 100%;
  }
}

/*
 * Design „Altes Bro“ (#9974) — nur unter html[data-design="alt"] wirksam.
 *
 * Entschieden (Nasri), 17.10.2026, im Chat mit Claude Code: vier Designs zur
 * Wahl (Modern, Altes Bro, Vitala, Bro-Look v10), `docs/entscheidungen.md`,
 * Abschnitt „Vier Designs zur Wahl …“.
 *
 * Herkunft: Zweig `claude/bwa-aussehen-alt-optik`, Commit 18785ac81
 * („Optik des alten Bro einsetzen“, #9044), regelweise gegen seinen Vorgänger
 * gemessen (Befund `docs/befunde/2026-10-17-vier-designs/zuordnung.md`,
 * Abschnitt 2). Übernommen sind NUR die geänderten und neuen Deklarationen
 * aus `packages/ui/src/styles.css` und `apps/portal/src/portal.css`, je
 * Selektor mit `html[data-design="alt"]` davor. Die Alt-Tokens (glas-*,
 * flaeche-2, tinte-titel, Radien, Schatten, Bewegung …) definiert der
 * Design-Block in `@bro/design-tokens`.
 *
 * Diese Datei steht als LETZTES Glied im Bündel (`scripts/buendel.ts`).
 * Nicht von Hand ändern, ohne den Befund nachzuführen.
 *
 * Der Rahmen (#9974, „Jedes der vier Designs bringt seinen ganzen Rahmen
 * mit …“, 18.10.2026) steht im letzten Abschnitt unter
 * html[data-rahmen="alt"]; sein Markup baut `rahmen-alt.ts`.
 */

/* Was der Alt-Zweig weggenommen hat, ausdrücklich zurückgesetzt. */
html[data-design="alt"] .bro-statuspille {
  letter-spacing: normal;
  text-transform: none;
}

html[data-design="alt"] .portal-leer {
  display: block;
  gap: normal;
}

html[data-design="alt"] .portal-startseite-kennzahl:hover {
  background: var(--bro-flaeche-1);
}

/* ---- aus packages/ui/src/styles.css ---- */

html[data-design="alt"] .bro-text-anzeige,
html[data-design="alt"] .bro-text-titel,
html[data-design="alt"] .bro-text-kennzahl,
html[data-design="alt"] .bro-text-betont,
html[data-design="alt"] .bro-text-fliesstext,
html[data-design="alt"] .bro-text-klein,
html[data-design="alt"] .bro-text-fein {
  font-family: var(--bro-schrift-familie);
}

/* Die Textfarbe NICHT an Verweisen: Im Alt-Zweig stand diese Regel ohne
   Präfix vor portal.css und verlor gegen deren Linkfarben
   (`.portal-uebersicht-mehr` u. a.). Mit dem Präfix wäre sie stärker und
   machte „Zu den Rechnungen“ & Co. zu grauem Text (Abnahmebild
   docs/assets/9974-vier-designs/uebersicht-alt.png). */
html[data-design="alt"]
  :is(
    .bro-text-anzeige,
    .bro-text-titel,
    .bro-text-kennzahl,
    .bro-text-betont,
    .bro-text-fliesstext,
    .bro-text-klein,
    .bro-text-fein
  ):not(a) {
  color: var(--bro-tinte-1);
}

html[data-design="alt"] .bro-text-anzeige {
  letter-spacing: var(--bro-schrift-anzeige-laufweite);
  color: var(--bro-tinte-titel);
}

html[data-design="alt"] .bro-text-titel {
  color: var(--bro-tinte-titel);
}

html[data-design="alt"] .bro-text-kennzahl {
  font-size: var(--bro-schrift-kennzahl-groesse);
  line-height: var(--bro-schrift-kennzahl-zeilenhoehe);
  font-weight: var(--bro-schrift-kennzahl-gewicht);
  font-variant-numeric: tabular-nums;
}

html[data-design="alt"] .bro-knopf {
  border-radius: var(--bro-radius-s);
  transition:
    background-color var(--bro-bewegung-schnell) ease,
    border-color var(--bro-bewegung-schnell) ease,
    box-shadow var(--bro-bewegung-schnell) ease,
    transform var(--bro-bewegung-schnell) var(--bro-bewegung-feder);
}

html[data-design="alt"] .bro-knopf:active:not(:disabled) {
  transform: scale(0.97);
}

html[data-design="alt"] .bro-knopf:focus-visible {
  outline: var(--bro-fokus-breite) solid var(--bro-akzent);
  outline-offset: var(--bro-fokus-abstand);
}

html[data-design="alt"] .bro-knopf--sekundaer:hover:not(:disabled) {
  background: var(--bro-flaeche-2);
  border-color: var(--bro-linie-stark);
}

html[data-design="alt"] .bro-knopf--gefaehrlich {
  background: var(--bro-fehler);
  color: var(--bro-fehler-tinte);
}

html[data-design="alt"] .bro-knopf--gefaehrlich:hover:not(:disabled) {
  background: color-mix(in oklab, var(--bro-fehler) 88%, var(--bro-tinte-1));
}

html[data-design="alt"] .bro-eingabefeld {
  border: 1px solid var(--bro-linie-stark);
  transition:
    border-color var(--bro-bewegung-schnell) ease,
    box-shadow var(--bro-bewegung-schnell) ease;
}

html[data-design="alt"] .bro-eingabefeld:focus-visible {
  outline: var(--bro-fokus-breite) solid var(--bro-akzent);
}

html[data-design="alt"] .bro-karte {
  border-radius: var(--bro-radius-m);
  box-shadow: var(--bro-schatten-karte);
}

html[data-design="alt"] .bro-karte--glas {
  background: var(--bro-glas-karte);
  -webkit-backdrop-filter: saturate(180%) blur(var(--bro-unschaerfe-karte));
  backdrop-filter: saturate(180%) blur(var(--bro-unschaerfe-karte));
  border-color: var(--bro-glas-rand);
  border-radius: var(--bro-radius-l);
  box-shadow: var(--bro-schatten-glas);
  transition:
    transform var(--bro-bewegung-mittel) var(--bro-bewegung-feder),
    box-shadow var(--bro-bewegung-mittel) ease;
}

html[data-design="alt"] .bro-karte--glas:hover {
  transform: translateY(-2px);
  box-shadow: var(--bro-schatten-hover);
}

html[data-design="alt"] .bro-karte--kante {
  border-left: 4px solid var(--bro-akzent);
}

html[data-design="alt"] .bro-karte--kante-erfolg {
  border-left: 4px solid var(--bro-erfolg);
}

html[data-design="alt"] .bro-karte--kante-warnung {
  border-left: 4px solid var(--bro-warnung);
}

html[data-design="alt"] .bro-karte--kante-fehler {
  border-left: 4px solid var(--bro-fehler);
}

html[data-design="alt"] .bro-statuspille {
  padding: 2px var(--bro-abstand-8);
  border-radius: var(--bro-radius-pille);
  font-weight: var(--bro-schrift-betont-gewicht);
}

html[data-design="alt"] .bro-statuspille--erfolg {
  background: color-mix(in oklab, var(--bro-erfolg) 10%, var(--bro-flaeche-1));
}

html[data-design="alt"] .bro-statuspille--warnung {
  background: color-mix(in oklab, var(--bro-warnung) 10%, var(--bro-flaeche-1));
}

html[data-design="alt"] .bro-statuspille--fehler {
  background: color-mix(in oklab, var(--bro-fehler) 10%, var(--bro-flaeche-1));
}

html[data-design="alt"] .bro-filter-chip {
  border-radius: var(--bro-radius-pille);
  font-weight: var(--bro-schrift-betont-gewicht);
  transition:
    border-color var(--bro-bewegung-schnell) ease,
    background-color var(--bro-bewegung-schnell) ease,
    color var(--bro-bewegung-schnell) ease;
}

html[data-design="alt"] .bro-filter-chip:hover {
  border-color: var(--bro-linie-stark);
  background: var(--bro-flaeche-2);
}

html[data-design="alt"] .bro-filter-chip:focus-visible {
  outline: var(--bro-fokus-breite) solid var(--bro-akzent);
  outline-offset: var(--bro-fokus-abstand);
}

html[data-design="alt"] .bro-filter-chip--aktiv,
html[data-design="alt"] .bro-filter-chip--aktiv:hover {
  border-color: var(--bro-akzent);
  background: var(--bro-akzent);
  color: var(--bro-akzent-tinte);
}

html[data-design="alt"] .bro-filter-chip-zahl {
  font-variant-numeric: tabular-nums;
  font-weight: var(--bro-schrift-fliesstext-gewicht);
  opacity: 0.8;
}

html[data-design="alt"] .bro-reiter-leiste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-24);
  border-bottom: 1px solid var(--bro-linie);
}

html[data-design="alt"] .bro-filter-chip--reiter,
html[data-design="alt"] .bro-filter-chip--reiter:hover,
html[data-design="alt"] .bro-filter-chip--reiter.bro-filter-chip--aktiv {
  padding: var(--bro-abstand-8) 0;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--bro-tinte-2);
  margin-bottom: -1px;
}

html[data-design="alt"] .bro-filter-chip--reiter:hover {
  color: var(--bro-tinte-1);
  border-bottom-color: var(--bro-linie-stark);
}

html[data-design="alt"] .bro-filter-chip--reiter.bro-filter-chip--aktiv {
  color: var(--bro-akzent-text);
  border-bottom-color: var(--bro-akzent);
}

html[data-design="alt"] .bro-kartei-leiste {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-4);
  padding: var(--bro-abstand-4);
  border: 1px solid var(--bro-glas-rand);
  border-radius: var(--bro-radius-l);
  background: var(--bro-glas-karte);
  -webkit-backdrop-filter: saturate(180%) blur(var(--bro-unschaerfe-karte));
  backdrop-filter: saturate(180%) blur(var(--bro-unschaerfe-karte));
}

html[data-design="alt"] .bro-filter-chip--kartei,
html[data-design="alt"] .bro-filter-chip--kartei:hover {
  border-color: transparent;
  border-radius: var(--bro-radius-s);
  background: transparent;
}

html[data-design="alt"] .bro-filter-chip--kartei:hover {
  background: var(--bro-flaeche-2);
  color: var(--bro-tinte-1);
}

html[data-design="alt"] .bro-filter-chip--kartei.bro-filter-chip--aktiv,
html[data-design="alt"] .bro-filter-chip--kartei.bro-filter-chip--aktiv:hover {
  background: var(--bro-akzent);
  color: var(--bro-akzent-tinte);
  box-shadow: var(--bro-schatten-karte);
}

html[data-design="alt"] .bro-tabelle th {
  padding: var(--bro-abstand-12) var(--bro-abstand-16);
  background: var(--bro-flaeche-2);
}

html[data-design="alt"] .bro-tabelle td {
  padding: var(--bro-abstand-12) var(--bro-abstand-16);
  border-bottom: 1px solid var(--bro-linie-zart);
}

html[data-design="alt"] .bro-tabelle tbody tr {
  transition: background-color var(--bro-bewegung-schnell) ease;
}

html[data-design="alt"] .bro-tabelle tbody tr:hover {
  background: var(--bro-flaeche-2);
}

html[data-design="alt"] .bro-abhaken:hover {
  background: color-mix(in oklab, var(--bro-erfolg) 10%, var(--bro-flaeche-1));
}

html[data-design="alt"] .bro-abhaken:focus-visible {
  outline: var(--bro-fokus-breite) solid var(--bro-akzent);
  outline-offset: var(--bro-fokus-abstand);
}

html[data-design="alt"] .bro-initialen {
  flex: none;
  border-radius: var(--bro-radius-rund);
  background: linear-gradient(135deg, var(--bro-akzent), var(--bro-akzent-dunkel));
  color: var(--bro-akzent-tinte);
  font-size: var(--bro-schrift-fein-groesse);
  font-weight: var(--bro-schrift-fein-gewicht);
  letter-spacing: 0.02em;
}

html[data-design="alt"] .bro-navigationspunkt {
  border-radius: var(--bro-radius-menuepunkt);
  font-size: var(--bro-schrift-klein-groesse);
  line-height: var(--bro-schrift-klein-zeilenhoehe);
  font-weight: var(--bro-schrift-betont-gewicht);
  transition:
    background-color var(--bro-bewegung-schnell) ease,
    color var(--bro-bewegung-schnell) ease;
}

html[data-design="alt"] .bro-navigationspunkt:hover {
  background: color-mix(in oklab, var(--bro-tinte-1) 5%, transparent);
}

html[data-design="alt"] .bro-navigationspunkt:focus-visible {
  outline: var(--bro-fokus-breite) solid var(--bro-akzent);
  outline-offset: var(--bro-fokus-abstand);
}

html[data-design="alt"] .bro-navigationspunkt--aktiv {
  box-shadow: inset 0 0 0 1px var(--bro-akzent-rand);
}

html[data-design="alt"] .bro-navigationspunkt--aktiv:hover {
  background: var(--bro-akzent-flaeche);
  color: var(--bro-akzent-text);
}

html[data-design="alt"] .bro-leer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--bro-abstand-8);
  padding: var(--bro-abstand-32) var(--bro-abstand-16);
  text-align: center;
  color: var(--bro-tinte-2);
  font-family: var(--bro-schrift-familie);
}

html[data-design="alt"] .bro-leer-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--bro-abstand-32) * 1.75);
  height: calc(var(--bro-abstand-32) * 1.75);
  border-radius: var(--bro-radius-l);
  background: var(--bro-akzent-flaeche);
  color: var(--bro-akzent-text);
}

html[data-design="alt"] .bro-leer-symbol .bro-symbol {
  width: var(--bro-abstand-24);
  height: var(--bro-abstand-24);
}

html[data-design="alt"] .bro-leer-titel {
  margin: 0;
  color: var(--bro-tinte-titel);
  font-size: var(--bro-schrift-titel-groesse);
  line-height: var(--bro-schrift-titel-zeilenhoehe);
  font-weight: var(--bro-schrift-titel-gewicht);
}

html[data-design="alt"] .bro-leer-text {
  margin: 0;
  max-width: 28rem;
  font-size: var(--bro-schrift-fliesstext-groesse);
  line-height: var(--bro-schrift-fliesstext-zeilenhoehe);
}

html[data-design="alt"] .bro-leer .bro-knopf {
  margin-top: var(--bro-abstand-8);
}

html[data-design="alt"] .bro-bedienhilfe {
  border-radius: var(--bro-radius-m);
  box-shadow: var(--bro-schatten-karte);
}

html[data-design="alt"] .bro-bedienhilfe-kopf {
  gap: var(--bro-abstand-12);
}

html[data-design="alt"] .bro-bedienhilfe-kopf::before {
  content: "?";
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--bro-abstand-24);
  height: var(--bro-abstand-24);
  border-radius: var(--bro-radius-s);
  background: var(--bro-akzent-flaeche);
  color: var(--bro-akzent-text);
  font-size: var(--bro-schrift-klein-groesse);
  font-weight: var(--bro-schrift-titel-gewicht);
}

html[data-design="alt"] .bro-bedienhilfe-kopf:focus-visible {
  outline: var(--bro-fokus-breite) solid var(--bro-akzent);
  outline-offset: var(--bro-fokus-abstand);
  border-radius: var(--bro-radius-m);
}

html[data-design="alt"] .bro-bedienhilfe-hinweis {
  border-radius: var(--bro-radius-s);
}

html[data-design="alt"] .bro-bedienhilfe-verweis {
  color: var(--bro-akzent-text);
}

html[data-design="alt"] .bro-dialog {
  max-width: min(32rem, calc(100vw - var(--bro-abstand-32)));
  padding: var(--bro-abstand-24);
  border: 1px solid var(--bro-glas-rand-dialog);
  border-radius: var(--bro-radius-dialog);
  background: var(--bro-glas-dialog);
  -webkit-backdrop-filter: saturate(180%) blur(var(--bro-unschaerfe-dialog));
  backdrop-filter: saturate(180%) blur(var(--bro-unschaerfe-dialog));
  box-shadow: var(--bro-schatten-dialog);
  color: var(--bro-tinte-1);
  font-family: var(--bro-schrift-familie);
}

html[data-design="alt"] .bro-dialog::backdrop {
  background: color-mix(in oklab, var(--bro-tinte-titel) 40%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  html[data-design="alt"] .bro-knopf,
  html[data-design="alt"] .bro-filter-chip,
  html[data-design="alt"] .bro-karte--glas,
  html[data-design="alt"] .bro-navigationspunkt,
  html[data-design="alt"] .bro-tabelle tbody tr {
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-design="alt"] .bro-knopf:active:not(:disabled),
  html[data-design="alt"] .bro-karte--glas:hover {
    transform: none;
  }
}

html[data-design="alt"] .bro-diagramm,
html[data-design="alt"] .bro-kennzahl {
  border: 1px solid var(--bro-linie);
  box-shadow: var(--bro-schatten-karte);
}

html[data-design="alt"] .bro-diagramm figcaption {
  margin: 0 0 var(--bro-abstand-8);
  font-size: var(--bro-schrift-betont-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
}

html[data-design="alt"] .bro-kennzahl h3 {
  margin: 0 0 var(--bro-abstand-4);
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-fein-groesse);
  line-height: var(--bro-schrift-fein-zeilenhoehe);
  font-weight: var(--bro-schrift-fein-gewicht);
  letter-spacing: var(--bro-schrift-fein-laufweite);
  text-transform: uppercase;
}

html[data-design="alt"] .bro-kennzahl-wert {
  font-size: var(--bro-schrift-kennzahl-groesse);
  line-height: var(--bro-schrift-kennzahl-zeilenhoehe);
  font-weight: var(--bro-schrift-kennzahl-gewicht);
}

html[data-design="alt"] .bro-kennzahl-hinweis {
  margin: var(--bro-abstand-4) 0 0;
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-fein-groesse);
  line-height: var(--bro-schrift-fein-zeilenhoehe);
}

html[data-design="alt"] .bro-kennzahl-erfolg {
  color: var(--bro-erfolg);
}

html[data-design="alt"] .bro-kennzahl-fehler {
  color: var(--bro-fehler);
}

/* ---- aus apps/portal/src/portal.css ---- */

html[data-design="alt"] {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html[data-design="alt"] :where(.portal-inhalt h2:not([class])) {
  color: var(--bro-tinte-titel);
}

html[data-design="alt"] :where(.portal-inhalt h3:not([class])) {
  font-weight: var(--bro-schrift-titel-gewicht);
}

html[data-design="alt"]
  :where(
    .portal-inhalt button:not([class]),
    .portal-inhalt input:is([type="submit"], [type="button"], [type="reset"]):not([class])
  ) {
  border-radius: var(--bro-radius-s);
  transition:
    background-color var(--bro-bewegung-schnell) ease,
    border-color var(--bro-bewegung-schnell) ease,
    transform var(--bro-bewegung-schnell) var(--bro-bewegung-feder);
}

html[data-design="alt"]
  :where(
    .portal-inhalt button:not([class]):hover,
    .portal-inhalt input:is([type="submit"], [type="button"], [type="reset"]):not([class]):hover
  ) {
  background: var(--bro-flaeche-2);
  border-color: var(--bro-linie-stark);
}

html[data-design="alt"]
  :where(
    .portal-inhalt button:not([class]):active,
    .portal-inhalt input:is([type="submit"], [type="button"], [type="reset"]):not([class]):active
  ) {
  transform: scale(0.97);
}

html[data-design="alt"]
  :where(
    .portal-inhalt
      :is(input, select, textarea):not([class]):not(
        [type="checkbox"],
        [type="radio"],
        [type="hidden"],
        [type="submit"],
        [type="button"],
        [type="reset"],
        [type="file"],
        [type="range"],
        [type="color"]
      )
  ) {
  border: 1px solid var(--bro-linie-stark);
}

html[data-design="alt"] :where(.portal-inhalt table:not([class]) :is(th, td)) {
  padding: var(--bro-abstand-12) var(--bro-abstand-16);
  border-bottom: 1px solid var(--bro-linie-zart);
}

html[data-design="alt"] :where(.portal-inhalt table:not([class]) th) {
  border-bottom-color: var(--bro-linie);
  background: var(--bro-flaeche-2);
}

html[data-design="alt"] :where(.portal-inhalt :is(code, pre, kbd)) {
  font-family: var(--bro-schrift-mono);
}

html[data-design="alt"] .portal-inhalt {
  max-width: var(--bro-inhaltsbreite);
}

html[data-design="alt"] .portal-inhalt > * {
  animation: bro-einblenden var(--bro-bewegung-mittel) ease-out both;
}

@media (prefers-reduced-motion: reduce) {
  html[data-design="alt"] .portal-inhalt > * {
    animation: none;
  }
}

html[data-design="alt"] .portal-einrichtung-schritt[data-erledigt] {
  border-left: 4px solid var(--bro-erfolg);
}

html[data-design="alt"] .portal-nutzlast {
  background: var(--bro-flaeche-2);
  font-family: var(--bro-schrift-mono);
}

html[data-design="alt"] .portal-leer {
  text-align: center;
}

html[data-design="alt"] :is(div, section).portal-leer {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
  align-items: center;
  padding: var(--bro-abstand-32) var(--bro-abstand-16);
}

html[data-design="alt"] :is(div, section).portal-leer::before,
html[data-design="alt"] :is(div, section).portal-leer::after {
  content: "";
  flex: none;
}

html[data-design="alt"] :is(div, section).portal-leer::before {
  order: -2;
  width: calc(var(--bro-abstand-32) * 1.75);
  height: calc(var(--bro-abstand-32) * 1.75);
  border-radius: var(--bro-radius-l);
  background: var(--bro-akzent-flaeche);
}

html[data-design="alt"] :is(div, section).portal-leer::after {
  order: -1;
  width: var(--bro-abstand-24);
  height: var(--bro-abstand-24);
  margin: calc(
      -1 *
        (
          var(--bro-abstand-32) * 1.75 + var(--bro-abstand-4) -
            (var(--bro-abstand-32) * 1.75 - var(--bro-abstand-24)) / 2
        )
    )
    0 calc(var(--bro-abstand-16) + var(--bro-abstand-4));
  background: var(--bro-akzent-text);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

html[data-design="alt"] :is(div, section).portal-leer > :is(a, button, form) {
  margin-top: var(--bro-abstand-8);
}

html[data-design="alt"] .portal-meldungen[data-erfolg],
html[data-design="alt"] .portal-meldung[data-erfolg] {
  border-color: color-mix(in oklab, var(--bro-erfolg) 25%, var(--bro-flaeche-1));
  background: color-mix(in oklab, var(--bro-erfolg) 10%, var(--bro-flaeche-1));
}

@media (prefers-reduced-motion: no-preference) {
  html[data-design="alt"] .portal-meldung[data-erfolg][data-toast],
  html[data-design="alt"] .portal-meldungen[data-erfolg][data-toast] {
    position: fixed;
    right: var(--bro-abstand-24);
    bottom: var(--bro-abstand-24);
    z-index: 60;
    display: flex;
    align-items: center;
    gap: var(--bro-abstand-12);
    width: max-content;
    max-width: min(24rem, calc(100vw - var(--bro-abstand-32)));
    margin: 0;
    padding: var(--bro-abstand-12) var(--bro-abstand-16);
    border: 0;
    border-radius: var(--bro-radius-m);
    background: var(--bro-tinte-1);
    color: var(--bro-flaeche-1);
    box-shadow: var(--bro-schatten-menue);
    animation: bro-toast 4.5s ease forwards;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html[data-design="alt"] .portal-meldung[data-erfolg][data-toast]:hover,
  html[data-design="alt"] .portal-meldungen[data-erfolg][data-toast]:hover {
    animation-play-state: paused;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html[data-design="alt"] .portal-meldung[data-erfolg][data-toast]::before,
  html[data-design="alt"] .portal-meldungen[data-erfolg][data-toast]::before {
    content: "\2713";
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: var(--bro-abstand-24);
    height: var(--bro-abstand-24);
    border-radius: var(--bro-radius-rund);
    background: color-mix(in oklab, var(--bro-erfolg) 55%, var(--bro-flaeche-1));
    color: var(--bro-tinte-1);
    font-size: var(--bro-schrift-klein-groesse);
    font-weight: var(--bro-schrift-titel-gewicht);
  }
}

html[data-design="alt"] .portal-formular-karte {
  max-width: var(--bro-formularbreite);
}

html[data-design="alt"] .portal-kennzahl {
  flex-direction: column;
  justify-content: flex-start;
  padding: var(--bro-abstand-16);
  box-shadow: var(--bro-schatten-karte);
}

html[data-design="alt"] .portal-kennzahl-name {
  font-size: var(--bro-schrift-fein-groesse);
  line-height: var(--bro-schrift-fein-zeilenhoehe);
  font-weight: var(--bro-schrift-fein-gewicht);
  letter-spacing: var(--bro-schrift-fein-laufweite);
  text-transform: uppercase;
}

html[data-design="alt"] .portal-kennzahl-wert {
  font-size: var(--bro-schrift-kennzahl-groesse);
  line-height: var(--bro-schrift-kennzahl-zeilenhoehe);
  font-weight: var(--bro-schrift-kennzahl-gewicht);
}

html[data-design="alt"] .portal-startseite-kennzahl {
  border-radius: var(--bro-radius-m);
  box-shadow: var(--bro-schatten-karte);
  transition:
    box-shadow var(--bro-bewegung-mittel) ease,
    transform var(--bro-bewegung-mittel) var(--bro-bewegung-feder);
}

html[data-design="alt"] .portal-startseite-kennzahl:hover {
  box-shadow: var(--bro-schatten-hover);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  html[data-design="alt"] .portal-startseite-kennzahl {
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-design="alt"] .portal-startseite-kennzahl:hover {
    transform: none;
  }
}

html[data-design="alt"] .portal-startseite-kennzahl-wert {
  font-size: var(--bro-schrift-kennzahl-groesse);
  line-height: var(--bro-schrift-kennzahl-zeilenhoehe);
  font-weight: var(--bro-schrift-kennzahl-gewicht);
}

html[data-design="alt"] .portal-werkbank-kennzahl {
  font-size: var(--bro-schrift-kennzahl-groesse);
  line-height: var(--bro-schrift-kennzahl-zeilenhoehe);
  font-weight: var(--bro-schrift-kennzahl-gewicht);
  font-variant-numeric: tabular-nums;
}

@keyframes bro-einblenden {
  from {
    opacity: 0;
  }
}

@keyframes bro-toast {
  from {
    opacity: 0;
    transform: translateY(var(--bro-abstand-8));
  }

  8%,
  88% {
    opacity: 1;
    transform: none;
  }

  to {
    opacity: 0;
    visibility: hidden;
  }
}

/* ==== Der Rahmen „Altes Bro“ (#9974, `rahmen-alt.ts`) ====

   Vorbild: Lesekopie `hallo-bro-ai/bro-spiegel-2026-09-26` @1cbce924,
   `src/Bro.Web/Pages/Shared/_Layout.cshtml:731-1393` und die Klassen aus
   `wwwroot/css/site.input.css:275-388`. Aufbau und Verhalten (klebende
   Leiste, Schublade, Einklappen, Arbeitsbereich, Druck, eingebettet) erbt der
   Rahmen über die Ankerklassen `portal-schale`, `portal-seitenleiste`,
   `portal-hauptspalte` aus `portal.css`; hier steht, was im Alt anders
   aussah. Das Milchglas liegt auf einem `::before`: Ein `backdrop-filter`
   am Element selbst machte es zum Bezug für die festen Kinder (Rundgang,
   Glocken- und Nutzerfenster auf dem Handy) und verschöbe sie. */

/* Leiste 244 px, eingeklappt 68 px (`_Layout.cshtml:738-739`). Die
   Rahmenmaße definiert nur der Token-Block „Altes Bro“; der Rückfallwert hält
   die Schale, falls `data-design` einmal fehlt. */
html[data-rahmen="alt"] .alt-schale {
  grid-template-columns: var(--bro-leiste-breite, 244px) minmax(0, 1fr);
}

html[data-rahmen="alt"][data-leiste="schmal"] .alt-schale {
  grid-template-columns: var(--bro-leiste-schmal, 68px) minmax(0, 1fr);
}

/* `.sidebar-glass` (`site.input.css:275-284`). */
html[data-rahmen="alt"] .alt-leiste {
  gap: 0;
  padding: 0;
  border-right: 1px solid var(--bro-glas-rand);
  background: transparent;
}

html[data-rahmen="alt"] .alt-leiste::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bro-glas-leiste);
  -webkit-backdrop-filter: saturate(180%) blur(var(--bro-unschaerfe-leiste));
  backdrop-filter: saturate(180%) blur(var(--bro-unschaerfe-leiste));
}

/* Der runde Schwebeknopf am rechten Rand (`.sidebar-floating-toggle`,
   `site.input.css:338-357`): ein Pfeil, der sich beim Einklappen dreht. */
html[data-rahmen="alt"] .alt-leiste-knopf {
  position: absolute;
  top: 18px;
  right: -11px;
  z-index: 31;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--bro-glas-rand-dialog);
  border-radius: var(--bro-radius-rund);
  background: var(--bro-flaeche-1);
  color: var(--bro-tinte-2);
  box-shadow: var(--bro-schatten-karte);
  cursor: pointer;
  transition:
    transform var(--bro-bewegung-schnell) var(--bro-bewegung-feder),
    color var(--bro-bewegung-schnell) ease;
}

html[data-rahmen="alt"] .alt-leiste-knopf:hover {
  color: var(--bro-akzent);
  transform: scale(1.08);
}

html[data-rahmen="alt"] .alt-leiste-knopf:focus-visible {
  outline: var(--bro-fokus-breite) solid var(--bro-akzent);
  outline-offset: var(--bro-fokus-abstand);
}

html[data-rahmen="alt"] .alt-leiste-knopf .bro-symbol {
  width: 12px;
  height: 12px;
  transition: transform var(--bro-bewegung-mittel) ease;
}

html[data-rahmen="alt"][data-leiste="schmal"] .alt-leiste-knopf .bro-symbol {
  transform: rotate(180deg);
}

/* Logo-Zeile in Höhe der Kopfleiste (`_Layout.cshtml:754-791`, `h-14 px-4`):
   Firmenlogo bis 36 × 150 px, daneben klein die BroDesk-Marke (`h-5`).
   Ohne hochgeladenes Logo steht der Name des Betriebs. Das Alt dimmte die
   Marke (`opacity-70`); das BroDesk-Logo wird aber nicht umgestaltet, auch
   nicht in einem Design (`docs/entscheidungen.md`, „Das BroDesk-Logo steht
   nicht zur Diskussion“, 18.10.2026), es steht deshalb voll da. */
html[data-rahmen="alt"] .alt-logo-zeile {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--bro-abstand-4);
  height: var(--bro-kopf-hoehe, 56px);
  padding: 0 var(--bro-abstand-16);
}

html[data-rahmen="alt"] .alt-logo {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--bro-abstand-8);
  min-width: 0;
  color: var(--bro-tinte-titel);
  text-decoration: none;
}

html[data-rahmen="alt"] .alt-logo .portal-firmenmarke {
  color: var(--bro-tinte-titel);
  font-size: var(--bro-schrift-fliesstext-groesse);
  font-weight: var(--bro-schrift-titel-gewicht);
  letter-spacing: var(--bro-schrift-anzeige-laufweite);
}

html[data-rahmen="alt"] .alt-logo .portal-firmenlogo {
  max-width: 150px;
  height: 36px;
}

html[data-rahmen="alt"] .alt-logo-marke {
  display: inline-flex;
  flex: none;
}

html[data-rahmen="alt"] .alt-logo-marke > .bro-desk-logo {
  display: block;
  width: auto;
  height: 20px;
}

html[data-rahmen="alt"] .alt-logo:focus-visible {
  outline: var(--bro-fokus-breite) solid var(--bro-akzent);
  outline-offset: var(--bro-fokus-abstand);
  border-radius: var(--bro-radius-s);
}

/* Das X „Menü schließen“ steht nur in der Schublade (`lg:hidden`). */
html[data-rahmen="alt"] .alt-leiste-schliessen {
  display: none;
}

/* Navigation `px-2.5 pb-2` (`_Layout.cshtml:796`). */
html[data-rahmen="alt"] .alt-leiste .portal-navigation {
  gap: 0;
  margin: 0;
  padding: 0 10px var(--bro-abstand-8);
  scrollbar-width: thin;
}

/* Gruppentitel `.sidebar-section` (`site.input.css:317-324`). */
html[data-rahmen="alt"] .alt-leiste .portal-nav-gruppentitel {
  padding: 14px 12px 6px;
  border-radius: var(--bro-radius-s);
  color: var(--bro-tinte-3);
}

html[data-rahmen="alt"] .alt-leiste .portal-nav-gruppentitel:hover {
  color: var(--bro-tinte-1);
}

html[data-rahmen="alt"] .alt-leiste .portal-nav-punkte {
  gap: 2px;
  padding-bottom: 0;
}

/* Punkt `.sidebar-item` (`site.input.css:285-306`): Symbol 20 px in der
   Schriftfarbe, kein Kennfarben-Kasten; Heroicons-Strich 1,5. */
html[data-rahmen="alt"] .alt-leiste .bro-navigationspunkt {
  gap: var(--bro-abstand-12);
  padding: 7.6px var(--bro-abstand-12);
  border: 0;
  border-radius: var(--bro-radius-menuepunkt);
  color: color-mix(in oklab, var(--bro-tinte-1) 30%, var(--bro-tinte-2));
  font-size: var(--bro-schrift-klein-groesse);
  line-height: var(--bro-schrift-betont-zeilenhoehe);
  font-weight: var(--bro-schrift-betont-gewicht);
  transition:
    background-color var(--bro-bewegung-schnell) ease,
    color var(--bro-bewegung-schnell) ease;
}

html[data-rahmen="alt"] .alt-leiste .bro-navigationspunkt:hover {
  background: color-mix(in oklab, var(--bro-tinte-titel) 5%, transparent);
  color: var(--bro-tinte-titel);
}

/* Aktiv `.sidebar-item-active` (`site.input.css:307-311`): 12 % Markenblau,
   Schrift brand-700, feiner Innenrand. */
html[data-rahmen="alt"] .alt-leiste .bro-navigationspunkt[aria-current="page"] {
  background: color-mix(in oklab, var(--bro-akzent) 12%, transparent);
  color: var(--bro-akzent-text);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--bro-akzent) 22%, transparent);
}

html[data-rahmen="alt"] .alt-leiste .portal-symbolkasten {
  width: 20px;
  height: 20px;
  border-radius: 0;
  background: none;
  color: inherit;
  opacity: 0.8;
}

html[data-rahmen="alt"] .alt-leiste .bro-navigationspunkt .bro-symbol {
  width: 20px;
  height: 20px;
  stroke-width: 1.5;
}

html[data-rahmen="alt"] .alt-leiste .portal-nav-zahl {
  color: var(--bro-tinte-3);
}

/* „Sidebar gestalten“ unter einem Trennstrich (`_Layout.cshtml:944-953`),
   grau wie im Alt; der Rundgang steht darunter. */
html[data-rahmen="alt"] .alt-leiste-werkstatt {
  gap: 2px;
  margin: 0 10px;
  padding: var(--bro-abstand-8) 0 var(--bro-abstand-12);
  border-top: 1px solid color-mix(in oklab, var(--bro-linie) 60%, transparent);
}

html[data-rahmen="alt"] .alt-leiste-werkstatt .bro-navigationspunkt {
  color: var(--bro-tinte-2);
}

/* „läuft auf BroDesk“ im geöffneten Arbeitsbereich, bündig mit den Punkten. */
html[data-rahmen="alt"] .alt-leiste .portal-leiste-laeuft-auf {
  padding: 0 var(--bro-abstand-24) var(--bro-abstand-12);
}

/* Eingeklappt (68 px): nur Symbole, Logo allein ohne Marke. */
html[data-rahmen="alt"][data-leiste="schmal"] .alt-logo-zeile {
  padding: 0 var(--bro-abstand-8);
}

html[data-rahmen="alt"][data-leiste="schmal"] .alt-logo {
  justify-content: center;
}

html[data-rahmen="alt"][data-leiste="schmal"]
  .portal-firmenmarke:has(.portal-firmenlogo)
  ~ .alt-logo-marke {
  display: none;
}

html[data-rahmen="alt"][data-leiste="schmal"] .alt-logo .portal-firmenlogo {
  max-width: 44px;
  height: 20px;
}

html[data-rahmen="alt"][data-leiste="schmal"] .alt-leiste .portal-navigation {
  padding-inline: var(--bro-abstand-8);
}

/* Eingeklappt bleiben ALLE Symbole erreichbar, auch die einer zugeklappten
   Gruppe, und die Gruppentitel weichen (`site.input.css:60-67`,
   `_Layout.cshtml:854`). Wo der Browser `::details-content` nicht kennt,
   bleibt der Titel als Trennstrich mit Pfeil wie im Standard-Rahmen. */
@supports selector(::details-content) {
  html[data-rahmen="alt"][data-leiste="schmal"]
    .alt-leiste
    details.portal-nav-gruppe::details-content {
    content-visibility: visible;
  }

  html[data-rahmen="alt"][data-leiste="schmal"]
    .alt-leiste
    details.portal-nav-gruppe
    > .portal-nav-gruppentitel {
    display: none;
  }

  html[data-rahmen="alt"][data-leiste="schmal"]
    .alt-leiste
    details.portal-nav-gruppe
    + details.portal-nav-gruppe {
    margin-top: var(--bro-abstand-8);
    padding-top: var(--bro-abstand-8);
    border-top: 1px solid color-mix(in oklab, var(--bro-linie) 60%, transparent);
  }
}

html[data-rahmen="alt"][data-leiste="schmal"] .alt-leiste .portal-nav-gruppentitel {
  padding: 2px;
}

html[data-rahmen="alt"][data-leiste="schmal"] .alt-leiste .bro-navigationspunkt {
  justify-content: center;
  padding-inline: var(--bro-abstand-8);
}

html[data-rahmen="alt"][data-leiste="schmal"] .alt-leiste-werkstatt {
  margin-inline: var(--bro-abstand-8);
}

/* Kopfleiste `.appbar-glass h-14 px-5` (`_Layout.cshtml:975`,
   `site.input.css:327-336`). */
html[data-rahmen="alt"] .alt-hauptspalte > .portal-kopf {
  gap: var(--bro-abstand-12);
  height: var(--bro-kopf-hoehe, 56px);
  min-height: var(--bro-kopf-hoehe, 56px);
  padding: 0 20px;
  border-bottom: 1px solid var(--bro-glas-rand);
  background: transparent;
}

html[data-rahmen="alt"] .alt-hauptspalte > .portal-kopf::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bro-glas-kopf);
  -webkit-backdrop-filter: saturate(180%) blur(var(--bro-unschaerfe-kopf));
  backdrop-filter: saturate(180%) blur(var(--bro-unschaerfe-kopf));
}

/* Ohne Milchglas im Browser deckend, damit nichts durchscheint. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-rahmen="alt"] .alt-leiste::before {
    background: var(--bro-flaeche-2);
  }

  html[data-rahmen="alt"] .alt-hauptspalte > .portal-kopf::before {
    background: var(--bro-flaeche-1);
  }
}

/* Suche `max-w-xl`, Feld `rounded-lg bg-slate-200/60 text-[13px]`, beim
   Fokus weiß mit Rand brand-400 (`_Layout.cshtml:988-1006`). */
html[data-rahmen="alt"] .portal-kopf .portal-kopfsuche {
  max-width: 36rem;
}

html[data-rahmen="alt"] .portal-kopf .portal-kopfsuche-feld {
  min-height: 34px;
  padding-block: 6px;
  border: 1px solid transparent;
  border-radius: var(--bro-radius-s);
  background: color-mix(in oklab, var(--bro-linie) 60%, transparent);
  color: var(--bro-tinte-1);
  font-size: var(--bro-schrift-klein-groesse);
  transition:
    background-color var(--bro-bewegung-schnell) ease,
    border-color var(--bro-bewegung-schnell) ease;
}

html[data-rahmen="alt"] .portal-kopf .portal-kopfsuche-feld:hover {
  background: var(--bro-linie);
}

html[data-rahmen="alt"] .portal-kopf .portal-kopfsuche-feld:focus,
html[data-rahmen="alt"] .portal-kopf .portal-kopfsuche-feld:focus-visible {
  border-color: color-mix(in oklab, var(--bro-akzent) 70%, var(--bro-flaeche-1));
  outline: none;
  background: var(--bro-flaeche-1);
}

html[data-rahmen="alt"] .portal-kopf .portal-kopfsuche-taste {
  border-color: color-mix(in oklab, var(--bro-linie-stark) 60%, transparent);
  border-radius: 6px;
  background: color-mix(in oklab, var(--bro-flaeche-1) 70%, transparent);
  color: var(--bro-tinte-2);
  font-size: 10px;
  font-weight: var(--bro-schrift-betont-gewicht);
}

/* Symbolknöpfe `p-2 rounded-lg text-slate-500 hover:bg-slate-200/60`. */
html[data-rahmen="alt"] .portal-kopf :is(.portal-kopf-knopf, .portal-glocke) {
  border-radius: var(--bro-radius-s);
  color: var(--bro-tinte-2);
  transition: background-color var(--bro-bewegung-schnell) ease;
}

html[data-rahmen="alt"] .portal-kopf :is(.portal-kopf-knopf, .portal-glocke):hover {
  background: color-mix(in oklab, var(--bro-linie) 60%, transparent);
  color: var(--bro-tinte-1);
}

/* Glockenzahl (`_NotificationBell.cshtml:22`): runde rote Marke, 16 px. */
html[data-rahmen="alt"] .portal-kopf .portal-glocke-zahl {
  top: 4px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--bro-radius-pille);
  font-size: 10px;
  line-height: 16px;
}

/* Nutzer `rounded-full p-1 pl-1.5 pr-2.5`, Avatar 28 px rund mit Verlauf
   brand-400 → brand-600 und Ring (`_Layout.cshtml:1210-1224`,
   `.sidebar-avatar` in `site.input.css:374-388`). */
html[data-rahmen="alt"] .portal-kopf .portal-nutzer {
  gap: var(--bro-abstand-8);
  margin-left: var(--bro-abstand-4);
  padding: var(--bro-abstand-4) 10px var(--bro-abstand-4) 6px;
  border-radius: var(--bro-radius-pille);
  transition: background-color var(--bro-bewegung-schnell) ease;
}

html[data-rahmen="alt"] .portal-kopf .portal-nutzer:hover {
  background: color-mix(in oklab, var(--bro-linie) 60%, transparent);
}

html[data-rahmen="alt"] .portal-kopf .portal-nutzer-avatar {
  width: 28px;
  height: 28px;
  background: linear-gradient(
    135deg,
    color-mix(in oklab, var(--bro-akzent) 78%, var(--bro-akzent-tinte)),
    var(--bro-akzent-dunkel)
  );
  color: var(--bro-akzent-tinte);
  box-shadow: 0 0 0 2.5px var(--bro-linie);
  font-size: 11px;
  font-weight: var(--bro-schrift-titel-gewicht);
  letter-spacing: 0.02em;
}

html[data-rahmen="alt"] .portal-kopf .portal-nutzer-person {
  color: var(--bro-tinte-1);
  font-size: var(--bro-schrift-klein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
}

html[data-rahmen="alt"] .portal-kopf .portal-nutzer > .bro-symbol {
  width: 14px;
  height: 14px;
  color: var(--bro-tinte-3);
}

/* Aufgeklappt `w-64 card p-2 shadow-xl`, Punkte 13 px `rounded-md`. */
html[data-rahmen="alt"] .portal-kopf :is(.portal-nutzer-menue-liste, .portal-glocke-fenster) {
  border-radius: var(--bro-radius-m);
  box-shadow: var(--bro-schatten-menue);
}

html[data-rahmen="alt"] .portal-kopf .portal-nutzer-menue-liste {
  padding: var(--bro-abstand-8);
}

html[data-rahmen="alt"] .portal-kopf .portal-nutzer-menue-punkt {
  padding: 6px var(--bro-abstand-12);
  border-radius: 6px;
  font-size: var(--bro-schrift-klein-groesse);
}

html[data-rahmen="alt"] .portal-kopf .portal-nutzer-menue-punkt:hover {
  background: var(--bro-flaeche-0);
}

/* Bereichswechsler (`_Bereichswechsler.cshtml:10-30`): volle Breite unter
   der Kopfleiste, Inhalt bis 1280 px mittig; Symbolkachel 36 px. */
html[data-rahmen="alt"] .alt-hauptspalte > .portal-bereich {
  min-height: var(--bro-kopf-hoehe, 56px);
  margin: 0;
  padding: var(--bro-abstand-8)
    max(
      var(--bro-abstand-24),
      calc((100% - var(--bro-inhaltsbreite, 80rem)) / 2 + var(--bro-abstand-24))
    );
  border: 0;
  border-bottom: 1px solid var(--bro-linie);
  border-radius: 0;
  background: color-mix(in oklab, var(--bro-flaeche-1) 80%, transparent);
}

html[data-rahmen="alt"] .alt-hauptspalte > .portal-bereich .portal-bereich-symbol {
  width: 36px;
  height: 36px;
  border-radius: var(--bro-radius-m);
  background: color-mix(in oklab, var(--bro-akzent) 10%, transparent);
  color: var(--bro-akzent-text);
}

html[data-rahmen="alt"] .alt-hauptspalte > .portal-bereich .portal-bereich-titel {
  font-size: 11px;
  letter-spacing: 0.12em;
}

html[data-rahmen="alt"] .alt-hauptspalte > .portal-bereich .portal-bereich-aktiv {
  color: var(--bro-tinte-1);
  font-size: var(--bro-schrift-betont-groesse);
  font-weight: var(--bro-schrift-titel-gewicht);
}

html[data-rahmen="alt"] .alt-hauptspalte > .portal-bereich .portal-bereich-knopf {
  min-height: 40px;
  padding: 0 var(--bro-abstand-12);
  border-radius: var(--bro-radius-m);
  background: var(--bro-flaeche-1);
  box-shadow: var(--bro-schatten-karte);
  font-size: var(--bro-schrift-betont-groesse);
}

html[data-rahmen="alt"] .alt-hauptspalte > .portal-bereich .portal-bereich-knopf:hover {
  border-color: color-mix(in oklab, var(--bro-akzent) 40%, var(--bro-linie));
  color: var(--bro-akzent-text);
}

/* Inhalt `max-w-7xl mx-auto px-6 py-8` (z. B. `Finanzen/Rechnungen/Index.cshtml:17`). */
html[data-rahmen="alt"] .alt-hauptspalte > .portal-inhalt {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--bro-inhaltsbreite, 80rem);
  margin-inline: auto;
  padding: var(--bro-abstand-32) var(--bro-abstand-24);
}

/* Seitenkopf: „← Bereich“ 12 px grau, Titel 30 px halbfett eng, Untertitel
   grau, Knöpfe rechts (`Finanzen/Rechnungen/Index.cshtml:18-36`). */
html[data-rahmen="alt"] .alt-hauptspalte .portal-seitenkopf-zeile {
  align-items: center;
}

html[data-rahmen="alt"] .alt-hauptspalte .portal-seitenkopf-zurueck {
  font-size: var(--bro-schrift-fein-groesse);
}

html[data-rahmen="alt"] .alt-hauptspalte .portal-seitenkopf-zurueck:hover {
  color: var(--bro-tinte-1);
}

html[data-rahmen="alt"] .alt-hauptspalte .portal-seitenkopf-zurueck .bro-symbol {
  width: 12px;
  height: 12px;
}

html[data-rahmen="alt"] .alt-hauptspalte .portal-seitenkopf-untertitel,
html[data-rahmen="alt"] .alt-hauptspalte .portal-seitenkopf-satz {
  color: var(--bro-tinte-2);
}

/* Der Fuß (`_DiagnoseFooter.cshtml:20-40`): klein und grau unter dem
   Inhalt; Impressum und Datenschutz stehen darin, der Rechtsfuß unter der
   Schale entfällt dafür. */
html[data-rahmen="alt"] .alt-fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--bro-abstand-4) var(--bro-abstand-12);
  width: 100%;
  max-width: var(--bro-inhaltsbreite, 80rem);
  margin-inline: auto;
  padding: var(--bro-abstand-8) var(--bro-abstand-24) var(--bro-abstand-12);
  color: var(--bro-tinte-3);
  font-size: 11px;
  line-height: var(--bro-schrift-fein-zeilenhoehe);
}

html[data-rahmen="alt"] .alt-fuss-rechts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-4) var(--bro-abstand-12);
}

html[data-rahmen="alt"] .alt-fuss a {
  color: var(--bro-tinte-2);
  text-decoration: none;
}

html[data-rahmen="alt"] .alt-fuss a:hover {
  color: var(--bro-akzent-text);
  text-decoration: underline;
}

html[data-rahmen="alt"] .alt-fuss-betrieb b {
  font-weight: var(--bro-schrift-titel-gewicht);
}

html[data-rahmen="alt"] body > .portal-rechtsfuss {
  display: none;
}

/* Die Seite im Datensatz-Fenster zeigt nur ihren Inhalt (`leisten-start.ts`). */
html[data-rahmen="alt"][data-eingebettet] .alt-fuss {
  display: none;
}

html[data-rahmen="alt"][data-eingebettet] .alt-hauptspalte > .portal-inhalt {
  max-width: none;
  padding: var(--bro-abstand-16);
}

@media print {
  html[data-rahmen="alt"] .alt-fuss {
    display: none;
  }
}

/* Dunkel wie `.dark .sidebar-item-active` (`site.input.css:312-316`): etwas
   kräftigere Fläche und Innenrand. */
@media (prefers-color-scheme: dark) {
  html[data-rahmen="alt"]:not([data-theme="light"])
    .alt-leiste
    .bro-navigationspunkt[aria-current="page"] {
    background: color-mix(in oklab, var(--bro-akzent) 18%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--bro-akzent) 30%, transparent);
  }
}

html[data-rahmen="alt"][data-theme="dark"] .alt-leiste .bro-navigationspunkt[aria-current="page"] {
  background: color-mix(in oklab, var(--bro-akzent) 18%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--bro-akzent) 30%, transparent);
}

/* Handy und Tablet hoch: die Leiste als Schublade von links (260 px, Alt
   `_Layout.cshtml:738`), das X oben rechts, die untere Leiste
   `bg-white/95 backdrop-blur` mit 52 px hohen Punkten
   (`_Layout.cshtml:1370-1393`). Ein am Rechner eingeklappter Zustand gilt
   in der Schublade nicht. */
@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (max-height: 479px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (orientation: portrait) {
  html[data-rahmen="alt"] .alt-schale,
  html[data-rahmen="alt"][data-leiste="schmal"] .alt-schale {
    grid-template-columns: minmax(0, 1fr);
  }

  html[data-rahmen="alt"] .alt-leiste,
  html[data-rahmen="alt"][data-leiste="schmal"] .alt-leiste {
    padding: 0;
    border-right: 1px solid var(--bro-glas-rand);
  }

  html[data-rahmen="alt"] .alt-leiste-knopf {
    display: none;
  }

  html[data-rahmen="alt"] .alt-leiste-schliessen {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: var(--bro-beruehrungsflaeche);
    height: var(--bro-beruehrungsflaeche);
    border-radius: var(--bro-radius-s);
    color: var(--bro-tinte-2);
  }

  html[data-rahmen="alt"] .alt-leiste-schliessen:hover {
    background: color-mix(in oklab, var(--bro-linie) 60%, transparent);
  }

  html[data-rahmen="alt"] .alt-leiste-schliessen .bro-symbol {
    width: 18px;
    height: 18px;
  }

  html[data-rahmen="alt"][data-leiste="schmal"] .alt-logo-zeile {
    padding: 0 var(--bro-abstand-8) 0 var(--bro-abstand-16);
  }

  html[data-rahmen="alt"][data-leiste="schmal"] .alt-logo {
    justify-content: flex-start;
  }

  html[data-rahmen="alt"][data-leiste="schmal"]
    .portal-firmenmarke:has(.portal-firmenlogo)
    ~ .alt-logo-marke {
    display: inline-flex;
  }

  html[data-rahmen="alt"][data-leiste="schmal"] .alt-logo .portal-firmenlogo {
    max-width: 150px;
    height: 36px;
  }

  html[data-rahmen="alt"][data-leiste="schmal"] .alt-leiste .portal-navigation {
    padding-inline: 10px;
  }

  html[data-rahmen="alt"][data-leiste="schmal"] .alt-leiste .portal-nav-gruppentitel {
    padding: 14px 12px 6px;
  }

  @supports selector(::details-content) {
    html[data-rahmen="alt"][data-leiste="schmal"]
      .alt-leiste
      details.portal-nav-gruppe
      > .portal-nav-gruppentitel {
      display: flex;
    }

    html[data-rahmen="alt"][data-leiste="schmal"]
      .alt-leiste
      details.portal-nav-gruppe:not([open])::details-content {
      content-visibility: hidden;
    }

    html[data-rahmen="alt"][data-leiste="schmal"]
      .alt-leiste
      details.portal-nav-gruppe
      + details.portal-nav-gruppe {
      margin-top: 0;
      padding-top: 0;
      border-top: 0;
    }
  }

  html[data-rahmen="alt"][data-leiste="schmal"] .alt-leiste .bro-navigationspunkt {
    justify-content: flex-start;
    padding-inline: var(--bro-abstand-12);
  }

  html[data-rahmen="alt"][data-leiste="schmal"] .alt-leiste-werkstatt {
    margin-inline: 10px;
  }

  html[data-rahmen="alt"] .alt-hauptspalte > .portal-kopf {
    gap: var(--bro-abstand-4);
    padding: 0 var(--bro-abstand-8);
  }

  html[data-rahmen="alt"] .portal-kopf .portal-nutzer {
    margin-left: 0;
    padding: var(--bro-abstand-4);
  }

  html[data-rahmen="alt"] .alt-hauptspalte > .portal-bereich {
    margin: 0;
    padding-inline: var(--bro-abstand-16);
  }

  html[data-rahmen="alt"] .alt-hauptspalte > .portal-inhalt {
    padding: var(--bro-abstand-24) var(--bro-abstand-16);
  }

  html[data-rahmen="alt"] .alt-fuss {
    padding-inline: var(--bro-abstand-16);
  }

  html[data-rahmen="alt"] .portal-unterleiste {
    border-top-color: color-mix(in oklab, var(--bro-linie) 80%, transparent);
    background: color-mix(in oklab, var(--bro-flaeche-1) 95%, transparent);
    -webkit-backdrop-filter: blur(var(--bro-unschaerfe-kopf));
    backdrop-filter: blur(var(--bro-unschaerfe-kopf));
  }

  html[data-rahmen="alt"] .portal-unterleiste-punkt {
    min-height: 52px;
    font-size: 10px;
    font-weight: var(--bro-schrift-betont-gewicht);
  }

  html[data-rahmen="alt"] .portal-unterleiste-punkt .bro-symbol {
    width: 24px;
    height: 24px;
    stroke-width: 1.5;
  }
}

/*
 * Design „Modern“ (Imed) im Portal nach der Betreiber-Konsole
 * (`apps/control-plane/src/konsole-rahmen.ts`, `docs/design-canvas/KonsoleModern.md`,
 * `KonsoleModernMuster.md`, Artboards `Modern*.dc.html`).
 * Entschieden (Nasri), 17./18.10.2026, #9974: Modern ist eines der vier
 * wählbaren Designs und die Vorgabe. Entschieden (Auftraggeber), 18.10.2026,
 * `docs/entscheidungen.md`, „Jedes der vier Designs bringt seinen ganzen
 * Rahmen mit …“: Modern zeichnet seinen eigenen Rahmen (`rahmen-modern.ts`).
 *
 * Zwei Teile, nur Tokens (B14.7):
 * 1. Rahmen — hängt an `html[data-rahmen="modern"]`: Leiste, Marke, Handy-
 *    Kopf, Seitenkopf, Fuß. Nur der Modern-Rahmen trägt das Merkmal; die
 *    Studio-Leiste (`data-rahmen="beauty"`) und der Standard-Rahmen eines
 *    Gruppen-Mandanten unter Modern bleiben davon unberührt.
 * 2. Inhalt — hängt an `html[data-design="modern"]`: Knöpfe, Felder,
 *    Tabellen, Boxen, Kennzahlen, `kf-*`. Gilt in jedem Rahmen unter Modern.
 *
 * Die Modern-eigenen Werte (Kopfleiste, Hover, Auswahl, Ring, Radien) stehen
 * als `--bro-modern-*` im Design-Block (`packages/design-tokens/src/designs.ts`),
 * hell und dunkel; die Konsolen-Radien als `--bro-konsole-radius-*`.
 */

html[data-design="modern"] .portal-boden {
  background: var(--bro-flaeche-0);
}

/* ==== 1. Rahmen ========================================================= */

/* Seitengrund wie die Konsole (#9635): oben rechts ein Schimmer der
   Akzentfarbe, unten links ein Hauch Grün über der Bühnenfarbe. Kennt ein
   Browser `color-mix` nicht, bleibt die Bühnenfarbe von oben. */
html[data-rahmen="modern"] .portal-boden {
  background-image:
    radial-gradient(
      1100px 520px at 88% -40px,
      color-mix(in srgb, var(--bro-akzent) 8%, transparent),
      transparent 62%
    ),
    radial-gradient(
      900px 480px at 0 100%,
      color-mix(in srgb, var(--bro-modul-berichte) 5%, transparent),
      transparent 60%
    );
  background-repeat: no-repeat;
}

/* #10184: Breite aus der gewählten Leinwand (F2 am Ticket). */
html[data-rahmen="modern"] .portal-schale {
  grid-template-columns: var(--bro-modern-leiste-breite) minmax(0, 1fr);
}

/* ---- Leiste (ModernNavi) ---- */

html[data-rahmen="modern"] .mo-leiste {
  min-height: 0;
  flex-shrink: 0;
  gap: var(--bro-abstand-16);
  padding: var(--bro-abstand-24) var(--bro-abstand-12) var(--bro-abstand-16);
  border-right: 1px solid var(--bro-linie);
  background: var(--bro-flaeche-1);
}

/* Firmenmarke links, Original-BroDesk-Menü im Kopf (#10545). */
html[data-rahmen="modern"] .mo-marke {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--bro-abstand-12);
  min-width: 0;
  padding: 0 var(--bro-abstand-8);
}

/* Nur der Logobereich der Seitenleiste füllt eine eigene Zeile.
   Der Handy-Kopf verwendet dieselbe Marke und bleibt kompakt. */
html[data-rahmen="modern"] .mo-leiste .mo-marke {
  flex-wrap: wrap;
  justify-content: center;
  padding: 0 var(--bro-abstand-4);
}

html[data-rahmen="modern"] .mo-firmenlogo-link {
  display: inline-flex;
  min-width: 0;
}

/* Ohne Logo steht der Name des Betriebs da, wie „Konsole“ neben dem
   BroDesk-Logo der Konsole: höchstens zwei Zeilen, dann gekürzt. */
html[data-rahmen="modern"] .mo-marke .portal-firmenmarke {
  display: -webkit-box;
  flex: 0 1 auto;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
  overflow-wrap: anywhere;
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
  line-height: var(--bro-schrift-klein-zeilenhoehe);
  font-weight: var(--bro-schrift-betont-gewicht);
}

/* Firmenlogo ohne Beschnitt: intrinsische Maße verhindern Vergrößerung.
   Das Format kommt aus den beim Laden geprüften Bildmaßen (#10184). */
html[data-rahmen="modern"] .mo-leiste .mo-marke > .portal-firmenmarke,
html[data-rahmen="modern"] .mo-leiste .mo-firmenlogo-link {
  display: flex;
  flex: 0 0 100%;
  align-items: center;
  justify-content: center;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

html[data-rahmen="modern"] .mo-leiste .mo-firmenlogo-link .portal-firmenmarke {
  display: block;
  max-width: 100%;
}

html[data-rahmen="modern"] .mo-leiste .mo-marke .portal-firmenlogo {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: var(--bro-modern-logo-hoehe);
  object-fit: contain;
}

html[data-rahmen="modern"] .mo-leiste .mo-marke .portal-firmenlogo[data-logo-format="quadrat"] {
  max-width: var(--bro-modern-logo-quadrat);
  max-height: var(--bro-modern-logo-quadrat);
}

/* Ein Querlogo nimmt sonst die ganze Leistenbreite und wird übergroß. */
html[data-rahmen="modern"] .mo-leiste .mo-marke .portal-firmenlogo[data-logo-format="quer"] {
  max-height: var(--bro-modern-logo-quer);
}

html[data-rahmen="modern"] .mo-leiste .portal-navigation {
  gap: var(--bro-abstand-16);
}

/* Gruppentitel klein, ohne Versalien, mit Farbpunkt und Aufklapppfeil (#10549).
   Er bleibt der Griff zum Auf- und Zuklappen (`<summary>`), sieht aber aus
   wie der Titel der Konsole. */
html[data-rahmen="modern"] .mo-gruppentitel,
html[data-rahmen="modern"] .mo-gruppentitel:hover {
  justify-content: flex-start;
  gap: var(--bro-abstand-8);
  margin: 0 0 var(--bro-abstand-4);
  padding: 0 var(--bro-abstand-12);
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-fein-groesse);
  line-height: var(--bro-schrift-fein-zeilenhoehe);
  font-weight: var(--bro-schrift-fein-gewicht);
  letter-spacing: normal;
  text-transform: none;
}

html[data-rahmen="modern"] .mo-gruppenpunkt {
  flex: none;
  width: var(--bro-modern-gruppenpunkt);
  height: var(--bro-modern-gruppenpunkt);
  border-radius: var(--bro-radius-rund);
  background: var(--mo-punkt, var(--bro-modul-neutral));
}

/* #10184: Datenreihen1–6 der gewählten Leinwand, Schnellzugriff neutral. */
html[data-rahmen="modern"] [data-nav-gruppe="schnellzugriff"] {
  --mo-punkt: var(--bro-modul-neutral);
}

html[data-rahmen="modern"] [data-nav-gruppe="kunden-vertrieb"] {
  --mo-punkt: var(--bro-datenreihe-1);
}

html[data-rahmen="modern"] [data-nav-gruppe="arbeit-projekte"] {
  --mo-punkt: var(--bro-datenreihe-3);
}

html[data-rahmen="modern"] [data-nav-gruppe="finanzen-vertraege"] {
  --mo-punkt: var(--bro-datenreihe-2);
}

html[data-rahmen="modern"] [data-nav-gruppe="auswertung-wissen"] {
  --mo-punkt: var(--bro-datenreihe-4);
}

html[data-rahmen="modern"] [data-nav-gruppe="team"] {
  --mo-punkt: var(--bro-datenreihe-5);
}

html[data-rahmen="modern"] [data-nav-gruppe="kundenloesungen"] {
  --mo-punkt: var(--bro-datenreihe-6);
}

html[data-rahmen="modern"] .mo-leiste .portal-nav-punkte {
  gap: 2px;
  padding-bottom: 0;
}

/* Ein Punkt: 36 px, Strich-Symbol in Grau, Name 14 px mittel; der aktive
   hellblau hinterlegt, halbfett, Symbol in der Akzentfarbe. */
html[data-rahmen="modern"] .mo-leiste .bro-navigationspunkt {
  gap: var(--bro-abstand-12);
  min-height: var(--bro-modern-navi-hoehe);
  padding: 0 var(--bro-abstand-12);
  border: 0;
  border-radius: var(--bro-modern-radius-navi);
  color: var(--bro-tinte-1);
  font-size: var(--bro-schrift-fliesstext-groesse);
  line-height: var(--bro-schrift-fliesstext-zeilenhoehe);
  /* Mittel (500) wie `konsolenSchrift["mittel-gewicht"]`; das Portal kennt
     dafür keinen eigenen Token. */
  font-weight: 500;
}

html[data-rahmen="modern"] .mo-leiste .bro-navigationspunkt:hover {
  background: var(--bro-modern-hover);
  color: var(--bro-tinte-1);
}

html[data-rahmen="modern"] .mo-leiste .bro-navigationspunkt[aria-current="page"] {
  background: var(--bro-modern-gewaehlt);
  color: var(--bro-tinte-1);
  font-weight: var(--bro-schrift-betont-gewicht);
}

html[data-rahmen="modern"] .mo-leiste .bro-navigationspunkt.portal-nav-unterpunkt {
  padding-inline-start: calc(2 * var(--bro-abstand-12) + 18px);
}

/* Das Symbol ohne Kennfarben-Kasten: ein Strich in Grau wie in der Konsole. */
html[data-rahmen="modern"] .mo-leiste .portal-symbolkasten {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  color: var(--bro-tinte-3);
}

html[data-rahmen="modern"] .mo-leiste .portal-symbolkasten .bro-symbol {
  width: var(--bro-modern-navi-symbol);
  height: var(--bro-modern-navi-symbol);
  stroke-width: 1.9;
}

html[data-rahmen="modern"] .mo-leiste [aria-current="page"] .portal-symbolkasten {
  color: var(--bro-akzent);
}

/* Unten Rundgang, Team-Ampel und die Person, über einem Strich. */
html[data-rahmen="modern"] .mo-leiste-fuss {
  flex: none;
  gap: var(--bro-abstand-8);
  padding-top: var(--bro-abstand-12);
  border-top: 1px solid var(--bro-linie);
}

/* „Rundgang starten“ und „Sidebar gestalten“ ruhig wie Fußknöpfe. */
html[data-rahmen="modern"] .mo-leiste-fuss [data-rundgang-start],
html[data-rahmen="modern"] .mo-leiste-fuss [data-leiste-gestalten] {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--bro-tinte-2);
  font: inherit;
  font-size: var(--bro-schrift-fliesstext-groesse);
  text-align: left;
  cursor: pointer;
}

html[data-rahmen="modern"] .mo-leiste-fuss .bro-navigationspunkt > .bro-symbol {
  width: 18px;
  height: 18px;
  color: var(--bro-tinte-3);
}

html[data-rahmen="modern"] .mo-leiste-team {
  display: flex;
  padding: 0 var(--bro-abstand-8);
}

html[data-rahmen="modern"] .mo-leiste-team .portal-team-ampel-liste {
  top: auto;
  right: auto;
  bottom: calc(100% + 6px);
  left: 0;
}

/* Die Person wie `.navi-person`: Kürzel rund auf der Auswahlfläche. */
html[data-rahmen="modern"] .mo-leiste .portal-nutzer-menue--fuss .portal-nutzer-avatar {
  background: var(--bro-modern-gewaehlt);
  color: var(--bro-akzent-text);
}

/* Einklappen verändert nur Modern auf breiten Geräten; Handy bleibt Schublade. */
@media (min-width: 1280px), (min-width: 768px) and (max-width: 1279px) and (min-height: 480px) and (orientation: landscape) {
  html[data-rahmen="modern"][data-leiste="schmal"] .portal-schale {
    grid-template-columns: var(--bro-modern-leiste-schmal) minmax(0, 1fr);
  }

  html[data-rahmen="modern"][data-leiste="schmal"] .mo-marke {
    gap: var(--bro-abstand-8);
    padding: 0;
  }

  html[data-rahmen="modern"][data-leiste="schmal"] .mo-leiste .mo-marke .portal-firmenlogo {
    max-width: var(--bro-modern-logo-schmal);
    max-height: var(--bro-modern-logo-schmal);
  }

  html[data-rahmen="modern"][data-leiste="schmal"] .mo-gruppentitel {
    padding: var(--bro-abstand-4) 0;
    font-size: 0;
    border-top: 1px solid var(--bro-linie);
  }

  html[data-rahmen="modern"][data-leiste="schmal"] .mo-leiste .bro-navigationspunkt {
    position: relative;
    justify-content: center;
    padding-inline: var(--bro-abstand-4);
  }

  html[data-rahmen="modern"][data-leiste="schmal"] .mo-leiste .portal-nav-zahl {
    display: inline-flex;
    position: absolute;
    top: 0;
    right: 0;
    font-size: var(--bro-schrift-fein-groesse);
    border-radius: var(--bro-radius-rund);
    background: var(--bro-modern-gewaehlt);
  }
}

html[data-rahmen="modern"] .mo-leiste-knopf {
  width: var(--bro-modern-leiste-knopf);
  height: var(--bro-modern-leiste-knopf);
}

/* ---- Kopfleiste (KundenKopf, #10545) ----

   64 px, Linie unten, weiß wie die Leiste. Von links: Suche, dann rechts
   Aufgaben, Team-Ampel, Glocke, Haarlinie, Person, Haarlinie, BroDesk-Menü.
   Die Grundform (klebt oben, Menü-Knopf nur auf dem Handy) kommt aus
   `.portal-kopf` in `portal.css`. */
html[data-rahmen="modern"] .mo-kopf {
  min-height: var(--bro-modern-kopf-hoehe);
  gap: var(--bro-abstand-12);
  background: var(--bro-modern-kopfleiste);
  min-width: 0;
}

/* Die Suche nach Seitenregel 10: 44 px, rund, höchstens 560 px breit; die
   Treffer klappen darunter über den Inhalt auf. */
html[data-rahmen="modern"] .mo-kopf > .portal-kopfsuche {
  max-width: var(--bro-modern-suche-breite);
  min-width: 0;
}

html[data-rahmen="modern"] .mo-kopf .portal-kopfsuche-feld {
  min-height: var(--bro-modern-suche-hoehe);
  border-radius: var(--bro-modern-radius-feld);
  background: var(--bro-flaeche-0);
}

html[data-rahmen="modern"] .mo-kopf-aktionen {
  gap: var(--bro-abstand-4);
  flex-shrink: 0;
}

/* Runde Symbolknöpfe, 40 px, Ecken 12 px: Aufgaben, Glocke, BroDesk. */
html[data-rahmen="modern"] .mo-kopf-knopf,
html[data-rahmen="modern"] .mo-kopf .portal-glocke {
  width: var(--bro-modern-kopf-knopf);
  height: var(--bro-modern-kopf-knopf);
  border-radius: var(--bro-modern-radius-feld);
}

html[data-rahmen="modern"] .mo-kopf-knopf:hover,
html[data-rahmen="modern"] .mo-kopf .portal-glocke:hover,
html[data-rahmen="modern"] .mo-kopf .portal-nutzer:hover {
  background: var(--bro-modern-hover);
}

/* Die kurze senkrechte Haarlinie zwischen den Gruppen. */
html[data-rahmen="modern"] .mo-kopf-linie {
  flex: 0 0 var(--bro-modern-haarlinie);
  height: var(--bro-abstand-24);
  margin-inline: var(--bro-abstand-4);
  background: var(--bro-linie);
}

/* Die Person: Kürzel im Kreis, daneben Name und Rolle. */
html[data-rahmen="modern"] .mo-kopf .portal-nutzer {
  border-radius: var(--bro-modern-radius-feld);
  min-width: 0;
  max-width: var(--bro-modern-suche-breite);
}

html[data-rahmen="modern"] .mo-kopf .portal-nutzer-text {
  min-width: 0;
}

html[data-rahmen="modern"] .mo-kopf .portal-nutzer-avatar {
  background: var(--bro-modern-gewaehlt);
  color: var(--bro-akzent-text);
}

html[data-rahmen="modern"] .portal-nutzer-rolle {
  overflow: hidden;
  color: var(--bro-tinte-3);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Menüs als Karten mit Ecken 14 px. */
html[data-rahmen="modern"] .mo-kopf .portal-nutzer-menue-liste,
html[data-rahmen="modern"] .mo-kopf .portal-glocke-fenster,
html[data-rahmen="modern"] .mo-brodesk-liste {
  border-radius: var(--bro-modern-radius-box);
}

/* Das BroDesk-Menü: Knopf mit dem Original-Logo, nur verkleinert. */
html[data-rahmen="modern"] .mo-brodesk-menue {
  position: relative;
}

html[data-rahmen="modern"] .mo-brodesk-knopf {
  width: auto;
  padding-inline: var(--bro-abstand-8);
  cursor: pointer;
  list-style: none;
}

html[data-rahmen="modern"] .mo-brodesk-knopf::-webkit-details-marker {
  display: none;
}

html[data-rahmen="modern"] .mo-brodesk-knopf .bro-desk-logo {
  display: block;
  width: auto;
  height: var(--bro-logo-brodesk);
}

html[data-rahmen="modern"] .mo-brodesk-liste {
  position: absolute;
  top: calc(100% + var(--bro-modern-menue-abstand));
  right: 0;
  z-index: 41;
  display: flex;
  flex-direction: column;
  min-width: min(var(--bro-modern-menue-breite), calc(100vw - var(--bro-abstand-16)));
  max-width: calc(100vw - var(--bro-abstand-16));
  padding: var(--bro-modern-menue-abstand);
  border: var(--bro-modern-haarlinie) solid var(--bro-linie);
  background: var(--bro-flaeche-1);
  box-shadow: var(--bro-schatten-menue);
}

html[data-rahmen="modern"] .mo-brodesk-kopf {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--bro-modern-menue-abstand);
  padding: var(--bro-abstand-8) var(--bro-modern-menue-innen-x);
  border-bottom: var(--bro-modern-haarlinie) solid var(--bro-linie);
}

html[data-rahmen="modern"] .mo-brodesk-kopf > span {
  color: var(--bro-tinte-3);
  font-size: var(--bro-schrift-klein-groesse);
}

html[data-rahmen="modern"] .mo-brodesk-punkt {
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-8);
  padding: var(--bro-abstand-8) var(--bro-modern-menue-innen-x);
  border-radius: var(--bro-modern-radius-navi);
  color: var(--bro-tinte-1);
  text-decoration: none;
}

html[data-rahmen="modern"] .mo-brodesk-punkt:hover {
  background: var(--bro-modern-hover);
}

html[data-rahmen="modern"] .mo-brodesk-punkt:focus-visible {
  outline: var(--bro-fokus-breite) solid var(--bro-akzent);
  outline-offset: calc(-1 * var(--bro-fokus-abstand));
}

html[data-rahmen="modern"] .mo-brodesk-punkt .bro-symbol {
  width: var(--bro-abstand-16);
  height: var(--bro-abstand-16);
  color: var(--bro-tinte-3);
}

html[data-rahmen="modern"] .mo-brodesk-taste {
  margin-left: auto;
  color: var(--bro-tinte-3);
  font: inherit;
  font-size: var(--bro-schrift-fein-groesse);
}

/* ---- Handy: Kopfleiste mit Menü-Knopf, Leiste als Schublade ---- */

@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (max-height: 479px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (orientation: portrait) {
  /* Ohne untere Leiste (F5) bleiben Aufgaben erreichbar: `portal.css`
     blendet die Symbolknöpfe des Standard-Kopfs dort aus. Der Name
     schrumpft auf das Kürzel, `portal.css` blendet den Text aus. */
  html[data-rahmen="modern"] .mo-kopf {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    padding: var(--bro-abstand-8);
  }

  html[data-rahmen="modern"] .mo-kopf > .portal-kopfsuche {
    width: 100%;
    max-width: none;
  }

  html[data-rahmen="modern"] .mo-kopf-aktionen {
    grid-column: 1 / -1;
    justify-content: flex-end;
    width: 100%;
  }

  html[data-rahmen="modern"] .mo-kopf-aktionen > .portal-kopf-knopf {
    display: inline-flex;
  }

  html[data-rahmen="modern"] .mo-kopf-linie,
  html[data-rahmen="modern"] .mo-kopf .portal-nutzer > .bro-symbol {
    display: none;
  }

  html[data-rahmen="modern"] .mo-kopf,
  html[data-rahmen="modern"] .mo-kopf-aktionen {
    gap: calc(var(--bro-abstand-4) / 2);
  }

  html[data-rahmen="modern"] .mo-kopf .portal-nutzer {
    padding-inline: var(--bro-abstand-4);
  }

  html[data-rahmen="modern"] .mo-kopf .portal-kopfsuche {
    min-width: 0;
  }

  html[data-rahmen="modern"] .portal-schale {
    grid-template-columns: minmax(0, 1fr);
    background: none;
  }

  html[data-rahmen="modern"] .portal-hauptspalte {
    padding-bottom: 0;
  }

  html[data-rahmen="modern"] .mo-leiste {
    gap: var(--bro-abstand-16);
    padding-top: var(--bro-abstand-16);
  }

  /* Ein gemerkter Desktop-Zustand darf die Modern-Schublade nicht verändern.
     Die generischen Schmal-Regeln setzen Summary-Kinder auf auto zurück. */
  html[data-rahmen="modern"][data-leiste="schmal"] .mo-leiste .mo-gruppentitel {
    justify-content: flex-start;
  }

  html[data-rahmen="modern"][data-leiste="schmal"] .mo-leiste .mo-gruppenpunkt {
    width: var(--bro-modern-gruppenpunkt);
    height: var(--bro-modern-gruppenpunkt);
  }

  html[data-rahmen="modern"][data-leiste="schmal"] .mo-leiste .portal-nav-zahl {
    display: inline-flex;
  }
}

/* ---- Inhalt im Behälter wie die Konsole (70rem), Fuß klebt unten ---- */

html[data-rahmen="modern"] .portal-hauptspalte > .portal-inhalt {
  flex: 1 0 auto;
}

@media (min-width: 1280px) {
  html[data-rahmen="modern"]:not([data-bereich="krankenfahrt"]) .portal-inhalt {
    max-width: calc(70rem + 80px);
  }
}

/* Der Bereichswechsler als ruhige Zeile unter dem Seitenkopf. */
html[data-rahmen="modern"] .portal-inhalt > .portal-bereich {
  margin: 0;
  border-radius: var(--bro-konsole-radius-feld);
}

/* ---- Seitenkopf: Brotkrumen, Überschrift, Satz (Regeln 1 und 2) ---- */

html[data-rahmen="modern"] .portal-seitenkopf {
  gap: 6px;
}

html[data-rahmen="modern"] .portal-seitenkopf .bb-brotkrumen ol {
  align-items: center;
  margin: 0 0 var(--bro-abstand-4);
}

/* Der Grundstil rückt Listenpunkte untereinander ab (`li + li`); in der
   Zeile der Brotkrumen stünde der erste sonst höher als die übrigen. */
html[data-rahmen="modern"] .portal-seitenkopf .bb-brotkrumen li {
  margin: 0;
}

html[data-rahmen="modern"] .portal-seitenkopf .bb-brotkrumen a {
  color: var(--bro-akzent-text);
}

html[data-rahmen="modern"] .portal-seitenkopf .bb-brotkrumen [aria-current="page"] {
  color: var(--bro-tinte-1);
  font-weight: 500;
}

html[data-rahmen="modern"] .portal-seitenkopf-satz {
  max-width: 47.5rem;
  margin: var(--bro-abstand-4) 0 0;
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-betont-groesse);
  line-height: var(--bro-schrift-betont-zeilenhoehe);
}

/* Der Rückweg einer Seite (solange er nicht in den Brotkrumen steht) in der
   Farbe der Brotkrumen. */
html[data-rahmen="modern"] .portal-seitenkopf-zurueck {
  color: var(--bro-akzent-text);
}

/* ---- Fuß (ModernFuss, bereich="portal") ---- */

/* Der Rechtsfuß unter der Schale geht in der Fußzeile auf, die dieselben
   zwei Wege trägt (`rahmen-modern.ts`). */
html[data-rahmen="modern"] body > .portal-rechtsfuss {
  display: none;
}

html[data-rahmen="modern"] .mo-fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--bro-abstand-24);
  margin-top: auto;
  padding: var(--bro-abstand-16) var(--bro-abstand-24);
  border-top: 1px solid var(--bro-linie);
  color: var(--bro-tinte-3);
  font-size: var(--bro-schrift-fein-groesse);
  line-height: var(--bro-schrift-fein-zeilenhoehe);
}

html[data-rahmen="modern"] .mo-fuss-marken,
html[data-rahmen="modern"] .mo-fuss-marke {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--bro-abstand-16);
}

html[data-rahmen="modern"] .mo-fuss-marke {
  gap: var(--bro-abstand-8);
}

html[data-rahmen="modern"] .mo-fuss-marke .bro-desk-logo {
  display: block;
  width: var(--bro-abstand-24);
  height: var(--bro-abstand-16);
}

html[data-rahmen="modern"] .mo-fuss-logo-trenner {
  align-self: stretch;
  border-left: 1px solid var(--bro-linie);
}

html[data-rahmen="modern"] .mo-fuss .ittk-logo {
  display: block;
  flex: none;
  width: calc(var(--bro-abstand-16) * 4);
  height: auto;
  color: var(--bro-tinte-3);
}

html[data-rahmen="modern"] .mo-fuss-inhalt {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: var(--bro-abstand-24);
  border-left: 1px solid var(--bro-linie);
  padding-left: var(--bro-abstand-24);
  min-width: 0;
}

html[data-rahmen="modern"] .mo-fuss-inhalt > section,
html[data-rahmen="modern"] .mo-fuss-inhalt > nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--bro-abstand-4);
}

html[data-rahmen="modern"] .mo-fuss-eigener-betrieb {
  flex: 1 1 auto;
  overflow-wrap: anywhere;
}

html[data-rahmen="modern"] .mo-fuss strong {
  color: var(--bro-tinte-2);
  font-weight: var(--bro-schrift-betont-gewicht);
}

html[data-rahmen="modern"] .mo-fuss a {
  color: inherit;
  text-decoration: none;
}

html[data-rahmen="modern"] .mo-fuss a:hover {
  color: var(--bro-tinte-1);
  text-decoration: underline;
}

/* In der Schublade (#10053) zeigt die Seite nur ihren Inhalt. Leiste, Kopf
   und Bereichswechsler blendet schon `portal.css` aus, die Brotkrumen
   `beauty.css`. */
html[data-eingebettet] .mo-fuss {
  display: none;
}

html[data-eingebettet][data-rahmen="modern"] .portal-schale {
  background: none;
}

/* ==== 2. Inhalt ========================================================= */

/* Symbolkacheln im Inhalt rund wie die Kacheln der Konsole. */
html[data-design="modern"] .portal-symbolkasten {
  border-radius: var(--bro-modern-radius-kachel);
}

/* ---- Inhalt: Behälter wie im Entwurf (32/40/48, max. 1120 px) ---- */

/* Nur auf dem Desktop: Der Entwurf ist für breite Fenster gezeichnet. Auf
   Handy und Tablet bleiben die schmalen Abstände aus `portal.css` (16/24 px),
   sonst blieben auf 390 px nur 310 px für den Inhalt, und Tabellen,
   Knöpfe und Pillen ragten über den Rand (Aufnahme 18.10.2026,
   `docs/assets/9974-modern-alle-seiten/`). Der Fahrdienst behält seinen
   eigenen, breiteren Behälter samt Fußraum (`portal.css`,
   `html[data-bereich="krankenfahrt"] .portal-inhalt`). */
@media (min-width: 1280px) {
  html[data-design="modern"]:not([data-bereich="krankenfahrt"]) .portal-inhalt {
    padding: var(--bro-abstand-32) 40px 48px;
    gap: var(--bro-abstand-24);
  }
}

/* Überschrift 30/36, 700, Laufweite -0.6 px (ModernStart <h1>). */
html[data-design="modern"] .portal-seitenkopf-titel h1,
html[data-design="modern"] .portal-seitenkopf h1 {
  font-size: 30px;
  line-height: 36px;
  font-weight: 700;
  letter-spacing: -0.6px;
}

/* ---- Boxen mit grauer Kopfleiste (Muster „Boxen und Abschnitte“) ---- */

html[data-design="modern"] .bro-karte {
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-modern-radius-box);
  background: var(--bro-flaeche-1);
}

/* Die erste Überschrift einer Box wird zur grauen Kopfleiste über die volle
   Breite: aus dem Innenabstand der Karte herausgezogen. */
html[data-design="modern"] .bro-karte > h2:first-child,
html[data-design="modern"] .bro-karte > header:first-child {
  margin: calc(-1 * var(--bro-abstand-24)) calc(-1 * var(--bro-abstand-24)) var(--bro-abstand-16);
  padding: 14px var(--bro-abstand-24);
  border-bottom: 1px solid var(--bro-linie);
  border-radius: var(--bro-modern-radius-box) var(--bro-modern-radius-box) 0 0;
  background: var(--bro-modern-kopfleiste);
  font-size: 17px;
  line-height: 24px;
  font-weight: 700;
}

/* ---- Knöpfe (Hauptknopf 44, Radius 12; Zweitknopf weiß mit Rand) ---- */

html[data-design="modern"] .bro-knopf {
  min-height: 44px;
  padding: 10px var(--bro-abstand-16);
  border-radius: var(--bro-modern-radius-feld);
}

html[data-design="modern"] .bro-knopf--primaer {
  background: var(--bro-akzent);
  color: var(--bro-akzent-tinte);
}

html[data-design="modern"] .bro-knopf--primaer:hover:not(:disabled) {
  background: var(--bro-akzent-text);
}

html[data-design="modern"] .bro-knopf--sekundaer {
  border-color: var(--bro-linie-stark);
  background: var(--bro-flaeche-1);
}

html[data-design="modern"] .bro-knopf--sekundaer:hover:not(:disabled) {
  background: var(--bro-modern-hover);
}

/* ---- Felder (Höhe 48, Radius 12, Fokus mit Ring) ---- */

html[data-design="modern"] .bro-eingabefeld,
html[data-design="modern"] .portal-feld-eingabe {
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--bro-linie-stark);
  border-radius: var(--bro-modern-radius-feld);
}

html[data-design="modern"] .bro-eingabefeld:focus-visible,
html[data-design="modern"] .portal-feld-eingabe:focus-visible {
  border-color: var(--bro-akzent);
  outline: none;
  box-shadow: 0 0 0 3px var(--bro-modern-ring);
}

/* ---- Tabellen (Kopfzeile 36 px auf grauer Fläche) ---- */

html[data-design="modern"] .bro-tabelle th {
  height: 36px;
  background: var(--bro-modern-kopfleiste);
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--bro-schrift-klein-groesse);
  font-weight: 600;
}

html[data-design="modern"] .bro-tabelle tbody tr:hover {
  background: var(--bro-modern-hover);
}

/* ---- Meldungen oben (Banner 14/16, Radius 12) ---- */

html[data-design="modern"] .portal-meldungen {
  padding: 14px var(--bro-abstand-16);
  border-radius: var(--bro-modern-radius-feld);
}

/* ---- Ruhige Fußzeile ---- */

html[data-design="modern"] .portal-rechtsfuss {
  color: var(--bro-tinte-3);
  font-size: var(--bro-schrift-klein-groesse);
}

html[data-design="modern"] .portal-rechtsfuss a {
  color: var(--bro-tinte-3);
}

/* ---- Felder mit Symbol: Platz für das Symbol bleibt ---- */

/* Die Feldregel oben ist spezifischer als die Innenabstände der Felder mit
   eingesetztem Symbol; ohne diese Zeilen läge die Lupe über dem Text. */
html[data-design="modern"] .portal-kopfsuche-feld {
  min-height: 0;
  padding-block: 8px;
  padding-inline: 34px 44px;
}

html[data-design="modern"] .kf-af-suchfeld > input {
  padding-left: 30px;
}

/* ---- Kennzahl-Kacheln der Startseite: rund wie die Boxen ---- */

html[data-design="modern"] .portal-startseite-kennzahl {
  border-radius: var(--bro-modern-radius-box);
}

/* ---- Kennzahlleiste (Leitstand, Fahrdienst): rund wie die Boxen ---- */

/* Die Leiste zeichnet ihre Trennlinien über den 1-px-Spalt auf Linienfarbe;
   `overflow: hidden` schneidet die Ecken der Felder mit ab. */
html[data-design="modern"] .bro-kennzahlleiste {
  border-radius: var(--bro-modern-radius-box);
  overflow: hidden;
}

/* ---- Krankenfahrdienst: Flächen und Karten rund wie die Boxen ----

   Die `kf-*`-Flächen stammen aus der eckigen Fahrdienst-Demo (Vitala) und
   setzen keinen Radius. In Modern standen sie dadurch eckig zwischen runden
   Boxen: Leitstand („Hat BroDesk heute schon erledigt“, „Tag im Überblick“,
   Karte, „Nächste Stunde“), Annahme-Fenster, Mitarbeiter- und
   Fahrzeugkartei. Kleine Marken und Chips bleiben, wie sie sind. */
html[data-design="modern"] .kf-ls-flaeche,
html[data-design="modern"] .kf-ls-karte,
html[data-design="modern"] .kf-ls-tafel,
html[data-design="modern"] .kf-ls-meldung,
html[data-design="modern"] .kf-ls-anruf,
html[data-design="modern"] .kf-af-leer,
html[data-design="modern"] .kf-af-neu,
html[data-design="modern"] .kf-an-neu,
html[data-design="modern"] .kf-ug-zusammenfassung,
html[data-design="modern"] .kf-zl-abwesenheit,
html[data-design="modern"] .kf-ma-kartei,
html[data-design="modern"] .kf-ma-kennzahlen,
html[data-design="modern"] .kf-ma-warum,
html[data-design="modern"] .kf-ma-blatt-inhalt,
html[data-design="modern"] .kf-fl-kennzahlen,
html[data-design="modern"] .kf-fl-karte,
html[data-design="modern"] .kf-fl-warum,
html[data-design="modern"] .kf-plan-tour-inhalt {
  border-radius: var(--bro-modern-radius-box);
}

/* Wahlflächen und Knöpfe im Fahrdienst wie die Felder (Radius 12). */
html[data-design="modern"] .kf-ls-wahl,
html[data-design="modern"] .kf-af-wagen,
html[data-design="modern"] .kf-af-reiter button,
html[data-design="modern"] .kf-an-treffer button,
html[data-design="modern"] .kf-bes-person,
html[data-design="modern"] .kf-bes-wahl button {
  border-radius: var(--bro-modern-radius-feld);
}

/* Die Vorschlagsliste der Adresssuche (#10320) ist EIN schwebendes Feld mit
   Trennlinien; nur sie wird gerundet, nicht jede Zeile darin. */
html[data-design="modern"] .kf-af-vorschlaege,
html[data-design="modern"] .kf-af-vorschlag-meldung,
html[data-design="modern"] .kf-an-ortstreffer {
  border-radius: var(--bro-modern-radius-box);
}

/* ---- Diagramm in einer Tabellenzelle (Reports, „Top-Kunden“) ----

   `.bro-diagramm` bricht überall um (`overflow-wrap: anywhere`) und darf auf
   null schrumpfen; in einer Tabellenzelle ließ das die Spalte auf wenige
   Buchstaben zusammenfallen, die Beschriftung stand Zeichen für Zeichen
   untereinander. Mit Mindestbreite scrollt die Tabelle in ihrem Rahmen. */
html[data-design="modern"] .bro-tabelle td > .bro-diagramm {
  min-width: 14rem;
  overflow-wrap: break-word;
}

/* ---- Handy: lange Pillen umbrechen statt über den Rand ---- */

/* Handlungs-Pillen wie „1 Entwurf wartet auf Prüfung und Versand →“
   (Rechnungen) und Marken wie „KI · Mitarbeiter-KI“ (Journal) standen auf
   390 px über den Rand und machten die Seite waagrecht verschiebbar. */
@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (max-height: 479px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (orientation: portrait) {
  html[data-design="modern"] .bro-statuspille {
    max-width: 100%;
    white-space: normal;
  }
}

/* Im Druck nur der Inhalt: Brotkrumen und Fuß wiederholen sich sonst auf
   jedem Beleg (wie `.alt-fuss` in design-alt.css). */
@media print {
  html[data-rahmen="modern"] .mo-fuss,
  html[data-rahmen="modern"] .portal-seitenkopf .bb-brotkrumen {
    display: none;
  }
}

/* Fahrdienst unter Modern (#10330): die Gruppen des Fahrdienstes in der
   Leiste, Farben wie die Kacheln der Punkte darin (`arbeitsbereiche.ts`).
   Die oberste Gruppe (Leitstand, Planung morgen) hat keinen Titel. */
html[data-rahmen="modern"] [data-nav-gruppe="fahrdienst-fahrdienst"] {
  --mo-punkt: var(--bro-modul-fahrdienst);
}

html[data-rahmen="modern"] [data-nav-gruppe="fahrdienst-team"] {
  --mo-punkt: var(--bro-modul-personal);
}

html[data-rahmen="modern"] [data-nav-gruppe="fahrdienst-betrieb"] {
  --mo-punkt: var(--bro-modul-stammdaten);
}

/* Rechte Schubladen (#10546): beide bestehenden Lader teilen die ruhige
   Modern-Hülle. Die fachlichen Breitenvarianten bleiben erhalten. */
html[data-design="modern"] .portal-pdf.portal-schublade {
  box-sizing: border-box;
  max-width: 100%;
  border-left: 1px solid var(--bro-linie);
  border-radius: 0;
  background: var(--bro-flaeche-1);
  overscroll-behavior: contain;
}

html[data-design="modern"] .portal-pdf.portal-schublade::backdrop {
  background: color-mix(in oklab, var(--bro-tinte-1) 18%, transparent);
}

html[data-design="modern"] .portal-schublade > .portal-pdf-kopf,
html[data-design="modern"] .portal-schublade-kopf,
html[data-design="modern"] .portal-schublade-fuss {
  flex: none;
  padding: var(--bro-abstand-16) var(--bro-abstand-24);
  background: var(--bro-flaeche-1);
}

html[data-design="modern"] .portal-schublade-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bro-abstand-12);
  border-bottom: 1px solid var(--bro-linie);
}

html[data-design="modern"] .portal-schublade-inhalt {
  flex: 1;
  min-width: 0;
  min-height: 0;
  padding: var(--bro-abstand-24);
  overflow: auto;
  overscroll-behavior: contain;
  overflow-wrap: anywhere;
}

html[data-design="modern"] .portal-schublade-fuss {
  border-top: 1px solid var(--bro-linie);
}

html[data-design="modern"] .portal-schublade-ladestand {
  margin: 0;
  padding: var(--bro-abstand-24);
  overflow-wrap: anywhere;
}

/* Der Inhalt scrollt in der Hülle. Bestehende breite Dokumente/Formulare
   werden auf kleinen Geräten ebenso auf die verfügbare Breite begrenzt. */
@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (max-height: 479px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (orientation: portrait) {
  html[data-design="modern"] .portal-pdf.portal-schublade {
    /* Die vorhandene responsive Hülle begrenzt die Breite bereits. Eine
       zweite width-Regel würde kompakte Fachbreiten wie Konto verdrängen. */
    border-left: 0;
  }

  html[data-design="modern"] .portal-schublade > .portal-pdf-kopf,
  html[data-design="modern"] .portal-schublade-kopf,
  html[data-design="modern"] .portal-schublade-inhalt,
  html[data-design="modern"] .portal-schublade-fuss {
    padding-right: max(var(--bro-abstand-16), env(safe-area-inset-right));
    padding-left: max(var(--bro-abstand-16), env(safe-area-inset-left));
  }

  html[data-design="modern"] .portal-schublade-fuss {
    padding-bottom: max(var(--bro-abstand-16), env(safe-area-inset-bottom));
  }
}

/* #10549: Modulunterseiten innerhalb der globalen Modern-Navigation. */
html[data-rahmen="modern"] .mo-nav-modul {
  position: relative;
  min-width: 0;
}

html[data-rahmen="modern"] .mo-nav-modul > .bro-navigationspunkt,
html[data-rahmen="modern"] .mo-nav-modul-titel {
  padding-inline-end: var(--bro-modern-navi-hoehe);
}

html[data-rahmen="modern"] .mo-nav-modul-titel {
  display: flex;
  align-items: center;
  min-height: var(--bro-modern-navi-hoehe);
  padding-inline-start: var(--bro-abstand-12);
}

html[data-rahmen="modern"] .mo-nav-modul-unterpunkte > summary {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--bro-modern-navi-hoehe);
  height: var(--bro-modern-navi-hoehe);
  border-radius: var(--bro-modern-radius-navi);
  color: var(--bro-tinte-3);
  list-style: none;
  cursor: pointer;
}

html[data-rahmen="modern"] .mo-nav-modul-unterpunkte > summary::-webkit-details-marker {
  display: none;
}

html[data-rahmen="modern"] .mo-nav-modul-unterpunkte > summary:hover {
  background: var(--bro-modern-hover);
}

html[data-rahmen="modern"] .mo-nav-modul-unterpunkte > summary .bro-symbol {
  width: var(--bro-modern-navi-symbol);
  height: var(--bro-modern-navi-symbol);
  transform: rotate(-90deg);
}

html[data-rahmen="modern"] .mo-nav-modul-unterpunkte[open] > summary .bro-symbol {
  transform: none;
}

html[data-rahmen="modern"] .mo-nav-modul-inhalt {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
  padding-inline-start: var(--bro-abstand-12);
}

html[data-rahmen="modern"] .mo-nav-abschnitt > summary {
  padding: var(--bro-abstand-8) var(--bro-abstand-12);
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-fein-groesse);
  cursor: pointer;
}

@media (min-width: 1280px), (min-width: 768px) and (max-width: 1279px) and (min-height: 480px) and (orientation: landscape) {
  html[data-rahmen="modern"][data-leiste="schmal"] .mo-nav-modul > .bro-navigationspunkt {
    padding-inline-end: var(--bro-abstand-4);
  }

  html[data-rahmen="modern"][data-leiste="schmal"] .mo-nav-modul-unterpunkte > summary {
    inset-block-start: auto;
    position: relative;
    width: 100%;
    height: var(--bro-abstand-24);
  }

  html[data-rahmen="modern"][data-leiste="schmal"] .mo-nav-modul-inhalt {
    padding-inline-start: 0;
  }
}

/* Personalisierung blendet einzelne Links aus. Ein leerer Unterbereich
   bekommt keinen funktionslosen Aufklappgriff; aktive Kinder halten auch
   ihren Modulnamen sichtbar, ohne ein zweites aria-current zu erfinden. */
html[data-rahmen="modern"]
  .mo-nav-modul:not(:has(.mo-nav-modul-inhalt [data-nav-punkt]:not([hidden])))
  > .mo-nav-modul-unterpunkte {
  display: none;
}

html[data-rahmen="modern"] .mo-nav-modul:has([aria-current="page"]) > a[hidden] {
  display: flex;
}

/* #10549: Der native Gruppengriff bleibt auch optisch als solcher erkennbar.
   Offen/geschlossen und reduzierte Bewegung folgen den bestehenden Regeln. */
html[data-rahmen="modern"] .mo-gruppentitel > .portal-nav-pfeil {
  flex: none;
  margin-inline-start: auto;
}

@media (min-width: 1280px), (min-width: 768px) and (max-width: 1279px) and (min-height: 480px) and (orientation: landscape) {
  html[data-rahmen="modern"][data-leiste="schmal"] .mo-gruppentitel > .portal-nav-pfeil {
    display: none;
  }
}

/* #10813: Regelteilformulare nutzen auch in der schmalen gemeinsamen Hülle
   die verfügbare Breite; Einheit und Eingabe bleiben zusammen. */
html[data-design="modern"]
  :is([data-planungsregeln], [data-planungsregeln-formular])
  .kf-plan-zahl-feld {
  display: flex;
  min-width: 0;
  max-width: 100%;
}

html[data-design="modern"]
  :is([data-planungsregeln], [data-planungsregeln-formular])
  .kf-plan-zahl-feld
  input {
  flex: 1;
  min-width: 0;
}

html[data-design="modern"]
  :is([data-planungsregeln], [data-planungsregeln-formular])
  .kf-plan-einstellfelder {
  grid-template-columns: minmax(0, 1fr);
}

html[data-rahmen="modern"] dialog.portal-schublade:has(.mo-meldungen-schublade) {
  width: min(var(--bro-modern-meldungen-breite), 100vw);
}
/* #10548: Die eigene Modern-Meldungsliste verwendet dieselbe native Hülle. */
html[data-rahmen="modern"] .mo-meldungen-schublade {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
html[data-rahmen="modern"] .mo-meldungen-schublade .portal-schublade-kopf,
html[data-rahmen="modern"] .mo-meldungen-schublade .portal-schublade-fuss {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--bro-abstand-12);
  padding: var(--bro-abstand-16) var(--bro-abstand-24);
}
html[data-rahmen="modern"] .mo-meldungen-schublade .portal-schublade-kopf {
  border-bottom: 1px solid var(--bro-linie);
}
html[data-rahmen="modern"] .mo-meldungen-schublade .portal-schublade-fuss {
  border-top: 1px solid var(--bro-linie);
}
html[data-rahmen="modern"] .mo-meldungen-schublade .portal-schublade-inhalt {
  overflow: auto;
  min-height: 0;
  flex: 1;
  padding: var(--bro-abstand-24);
  overscroll-behavior: contain;
}
html[data-rahmen="modern"] .mo-meldungen-liste,
html[data-rahmen="modern"] .mo-meldungen-verlauf {
  list-style: none;
  padding: 0;
  margin: 0;
}
html[data-rahmen="modern"] .mo-meldungen-eintrag {
  border-bottom: 1px solid var(--bro-linie);
  padding: var(--bro-abstand-16) 0;
  overflow-wrap: anywhere;
}
html[data-rahmen="modern"] .mo-meldungen-eintrag h3,
html[data-rahmen="modern"] .mo-meldungen-detail h3 {
  font-size: var(--bro-schrift-fliesstext-groesse);
}
html[data-rahmen="modern"] .mo-meldungen-eintrag time,
html[data-rahmen="modern"] .mo-meldungen-verlauf time {
  color: var(--bro-tinte-2);
}
html[data-rahmen="modern"] .mo-meldungen-detail {
  display: grid;
  gap: var(--bro-abstand-16);
  padding-top: var(--bro-abstand-16);
  overflow-wrap: anywhere;
}
html[data-rahmen="modern"] .mo-meldungen-schublade .portal-schublade-kopf h2 {
  margin: 0;
  margin-right: auto;
}
html[data-rahmen="modern"] .mo-meldungen-schublade .portal-schublade-kopf form button {
  border: 0;
  background: transparent;
  color: var(--bro-akzent);
  padding-inline: var(--bro-abstand-4);
}
html[data-rahmen="modern"] .mo-meldungen-eintrag {
  display: flex;
  position: relative;
  align-items: flex-start;
  gap: var(--bro-abstand-12);
  padding: var(--bro-abstand-12) var(--bro-abstand-8);
}
html[data-rahmen="modern"] .mo-meldungen-eintrag[data-ungelesen] {
  background: var(--bro-modern-hover);
}
html[data-rahmen="modern"] .mo-meldungen-eintrag-inhalt {
  flex: 1;
  min-width: 0;
}
html[data-rahmen="modern"] .mo-meldungen-punkt {
  flex: none;
  width: var(--bro-abstand-8);
  height: var(--bro-abstand-8);
  border-radius: var(--bro-radius-rund);
  margin-top: var(--bro-abstand-8);
}
html[data-rahmen="modern"] [data-ungelesen] > .mo-meldungen-punkt {
  background: var(--bro-akzent);
}
html[data-rahmen="modern"] .mo-meldungen-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--bro-abstand-8);
  font-size: var(--bro-schrift-fein-groesse);
}
html[data-rahmen="modern"] .mo-meldungen-eintrag h3,
html[data-rahmen="modern"] .mo-meldungen-eintrag p {
  margin: var(--bro-abstand-4) 0 0;
}
html[data-rahmen="modern"] .mo-meldungen-eintrag h3 a {
  color: var(--bro-tinte-1);
  text-decoration: none;
}
html[data-rahmen="modern"] .mo-meldungen-eintrag form {
  flex: none;
  max-width: min-content;
}
html[data-rahmen="modern"] .mo-meldungen-eintrag form button {
  padding: var(--bro-abstand-4);
  min-width: 0;
}

html[data-rahmen="modern"] .mo-meldungen-eintrag form button {
  width: var(--bro-beruehrungsflaeche);
  min-height: var(--bro-beruehrungsflaeche);
}

/* #10856: Nur die innere Bezugshistorie; dieselbe Schublade und Listenblätterung. */
html[data-rahmen="modern"] .mo-meldungen-bezugsliste {
  list-style: none;
  padding: 0;
  margin: 0;
}
html[data-rahmen="modern"] .mo-meldungen-bezugsliste li {
  border-left: 1px solid var(--bro-linie);
  padding: var(--bro-abstand-12) var(--bro-abstand-16);
  overflow-wrap: anywhere;
}
html[data-rahmen="modern"] .mo-meldungen-bezugsliste time,
html[data-rahmen="modern"] .mo-meldungen-bezugsliste span {
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-fein-groesse);
}
html[data-rahmen="modern"] .mo-meldungen-bezugsliste p {
  margin: var(--bro-abstand-4) 0 0;
}

/* #10582: dieselben Widget-Renderer in Dashboard, Galerie und Einstellungen.
   Nur Modern; Register, Fachinhalte und andere Designs bleiben unverändert. */
html[data-design="modern"] :is(.portal-widget, .portal-widget-karte) {
  --widget-farbe: var(--bro-tinte-2);
  min-width: 0;
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-modern-radius-box);
  background: linear-gradient(
    color-mix(in srgb, var(--widget-farbe) 6%, var(--bro-flaeche-1)),
    var(--bro-flaeche-1) 60%
  );
}

html[data-design="modern"] :is(.portal-widget, .portal-widget-karte)[data-widget-modul="berichte"] {
  --widget-farbe: var(--bro-datenreihe-2);
}

html[data-design="modern"] :is(.portal-widget, .portal-widget-karte)[data-widget="was-liegt-an"],
html[data-design="modern"] .portal-widget-karte[data-widget-angebot="was-liegt-an"] {
  --widget-farbe: var(--bro-warnung);
}

html[data-design="modern"] :is(.portal-widget, .portal-widget-karte)[data-widget="kalender"],
html[data-design="modern"] .portal-widget-karte[data-widget-angebot="kalender"],
html[data-design="modern"] :is(.portal-widget, .portal-widget-karte)[data-widget="termin-umsatz"],
html[data-design="modern"] .portal-widget-karte[data-widget-angebot="termin-umsatz"] {
  --widget-farbe: var(--bro-datenreihe-3);
}

html[data-design="modern"] .portal-widget-layout {
  align-items: stretch;
}

html[data-design="modern"] .portal-widget-raster {
  /* Die gespeicherte Reihenfolge bleibt auch visuell erhalten. */
  grid-auto-flow: row;
  grid-auto-rows: minmax(calc(var(--bro-abstand-32) * 6), auto);
  gap: var(--bro-abstand-16);
  align-items: stretch;
}

html[data-design="modern"] .portal-widget {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-16);
  padding: var(--bro-abstand-16);
  min-block-size: calc(var(--bro-abstand-32) * 5);
}

html[data-design="modern"] .portal-widget-kopf {
  display: flex;
  align-items: flex-start;
  gap: var(--bro-abstand-8);
  min-width: 0;
}

/* Widgetköpfe bleiben innerhalb ihrer Karte statt der allgemeinen Boxenkopfleiste. */
html[data-design="modern"] .portal-widget > .portal-widget-kopf:first-child {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font: inherit;
}

html[data-design="modern"] .portal-widget-kopf :is(h2, h3),
html[data-design="modern"] .portal-widget-karte h4 {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: var(--bro-schrift-klein-groesse);
  line-height: var(--bro-schrift-betont-zeilenhoehe);
  font-weight: var(--bro-schrift-betont-gewicht);
}

html[data-design="modern"] [data-widget-auswahl-kopf] {
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-8);
}

html[data-design="modern"] [data-widget-auswahl-kopf] [data-widget-quelle] {
  flex: 1;
}

html[data-design="modern"] [data-widget-auswahl-kopf] .portal-widget-auswahl-groesse {
  flex: none;
  line-height: var(--bro-schrift-fliesstext-zeilenhoehe);
  font-weight: var(--bro-schrift-fliesstext-gewicht);
}

html[data-design="modern"] [data-widget-quelle] {
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-8);
  min-width: 0;
  color: var(--bro-tinte-1);
  text-decoration: none;
}

html[data-design="modern"] [data-widget-quelle]:hover .portal-widget-titel {
  text-decoration: underline;
}

html[data-design="modern"] .portal-widget-titel {
  min-width: 0;
  overflow-wrap: anywhere;
}

html[data-design="modern"] .portal-widget-symbol {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--bro-abstand-32);
  height: var(--bro-abstand-32);
  border-radius: var(--bro-modern-radius-navi);
  background: color-mix(in srgb, var(--widget-farbe) 12%, var(--bro-flaeche-1));
  color: var(--bro-tinte-2);
}

html[data-design="modern"] .portal-widget-symbol .bro-symbol {
  width: var(--bro-abstand-16);
  height: var(--bro-abstand-16);
}

html[data-design="modern"] .portal-widget [data-widget-inhalt] {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
  min-width: 0;
  flex: 1;
}

html[data-design="modern"] .portal-widget [data-widget-inhalt] p {
  margin: 0;
}

html[data-design="modern"] .portal-widget [data-widget-inhalt] > a {
  color: var(--bro-akzent-text);
}

html[data-design="modern"] .portal-widget .portal-uebersicht-liste {
  gap: 0;
}

html[data-design="modern"] .portal-widget .portal-uebersicht-zeile {
  flex-wrap: wrap;
  gap: var(--bro-abstand-8);
  padding-block: var(--bro-abstand-8);
  min-width: 0;
}

html[data-design="modern"] .portal-widget .portal-uebersicht-zeile + .portal-uebersicht-zeile {
  border-top: 1px solid var(--bro-linie);
}

html[data-design="modern"] .portal-widget .portal-uebersicht-zeile > * {
  min-width: 0;
  overflow-wrap: anywhere;
}

html[data-design="modern"] .portal-widget :is(.portal-aufgabe-titel, .portal-journal-text) {
  flex: 1 1 50%;
}

html[data-design="modern"] .portal-widget [data-widget-menue] {
  flex: none;
}

html[data-design="modern"] .portal-widget [data-widget-menue] > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--bro-beruehrungsflaeche);
  min-height: var(--bro-beruehrungsflaeche);
  border-radius: var(--bro-modern-radius-navi);
  color: var(--bro-tinte-2);
  cursor: pointer;
  list-style: none;
}

html[data-design="modern"] .portal-widget [data-widget-menue] > summary::-webkit-details-marker {
  display: none;
}

html[data-design="modern"] .portal-widget [data-widget-menue] > summary:hover {
  background: var(--bro-modern-hover);
}

html[data-design="modern"] .portal-widget-menue-inhalt {
  position: absolute;
  z-index: 10;
  inset-inline-end: 0;
  width: max-content;
  max-width: min(calc(100vw - var(--bro-abstand-32)), calc(var(--bro-abstand-32) * 10));
  padding: var(--bro-abstand-12);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-modern-radius-feld);
  background: var(--bro-flaeche-1);
  box-shadow: var(--bro-schatten-menue);
}

html[data-design="modern"] .portal-widget-aktionen {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
  min-width: 0;
}

html[data-design="modern"] [data-widget-groessen] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-4);
  min-width: 0;
  margin: 0;
  padding: var(--bro-abstand-8);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-modern-radius-feld);
}

html[data-design="modern"] [data-widget-groessen] legend {
  max-width: 100%;
  padding-inline: var(--bro-abstand-4);
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
  font-weight: inherit;
  overflow-wrap: anywhere;
}

html[data-design="modern"] [data-widget-groessen] button[aria-pressed="true"] {
  border-color: var(--bro-akzent-text);
  background: var(--bro-modern-gewaehlt);
  color: var(--bro-akzent-text);
}

html[data-design="modern"] .portal-widget-reihenfolge,
html[data-design="modern"] .portal-widget-einstellungen-wege {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-8);
}

html[data-design="modern"] .portal-widget-aktion {
  max-width: 100%;
  margin: 0;
}

html[data-design="modern"] .portal-widget-aktion button {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

html[data-design="modern"] .portal-widget-werkzeuge {
  flex-wrap: wrap;
}

html[data-design="modern"] .portal-widget-werkzeuge [data-widget-status]:empty {
  display: none;
}

html[data-design="modern"] :is(.portal-widget-galerie, [data-widget-einstellungen]) {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-24);
  min-width: 0;
}

html[data-design="modern"] .portal-widget-galerie {
  border-radius: var(--bro-modern-radius-box);
}

html[data-design="modern"] .portal-widget-galerie :is(h2, h3, p),
html[data-design="modern"] [data-widget-einstellungen] h2 {
  margin: 0;
}

html[data-design="modern"] .portal-widget-modul {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
}

html[data-design="modern"] .portal-widget-modul h3 {
  font-size: var(--bro-schrift-klein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
  color: var(--bro-tinte-2);
}

html[data-design="modern"] .portal-widget-angebote {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--bro-abstand-32) * 8)), 1fr));
  gap: var(--bro-abstand-12);
}

html[data-design="modern"] .portal-widget-karte {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
  padding: var(--bro-abstand-16);
  overflow-wrap: anywhere;
}

html[data-design="modern"] [data-widget-verfuegbarkeit] {
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
  line-height: var(--bro-schrift-klein-zeilenhoehe);
  font-weight: var(--bro-schrift-klein-gewicht);
}

html[data-design="modern"] .portal-widget-angebot-groessen,
html[data-design="modern"] .portal-widget-auswahl-groesse {
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
}

html[data-design="modern"] .portal-widget-aktiv {
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-8);
  font-size: var(--bro-schrift-klein-groesse);
}

html[data-design="modern"] .portal-widget-aktiv .bro-symbol {
  flex: none;
  width: var(--bro-abstand-16);
  height: var(--bro-abstand-16);
}

html[data-design="modern"] [data-widget-auswahl] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--bro-abstand-16);
  margin-block: var(--bro-abstand-16) 0;
  padding: 0;
  list-style-position: inside;
}

html[data-design="modern"] [data-widget-auswahl] > li + li {
  margin-top: 0;
}

html[data-design="modern"] .portal-widget-anzahl {
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
}

html[data-design="modern"] .portal-widget-leer {
  grid-column: 1 / -1;
  padding: var(--bro-abstand-24);
  border-radius: var(--bro-modern-radius-box);
}

html[data-design="modern"] [data-widget-bereich][data-bearbeiten="true"] .portal-widget-raster {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) and (max-width: 1279px) and (orientation: portrait), (min-width: 768px) and (max-width: 1279px) and (min-height: 480px) and (orientation: landscape) {
  html[data-design="modern"] .portal-widget-raster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (max-height: 479px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (orientation: portrait) {
  html[data-design="modern"] .portal-widget-layout {
    flex-direction: column;
  }

  html[data-design="modern"] [data-widget-auswahl] {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (max-height: 479px) and (orientation: landscape) {
  html[data-design="modern"] .portal-widget-raster,
  html[data-design="modern"] [data-widget-bereich][data-bearbeiten="true"] .portal-widget-raster {
    grid-template-columns: minmax(0, 1fr);
  }

  html[data-design="modern"] .portal-widget[data-widget-groesse] {
    grid-column: auto;
    grid-row: auto;
    min-block-size: 0;
  }
}

/* #10705: nur die neue Modern-Komposition, gemeinsame Bausteine bleiben global. */
/* #10860: nur die Angabeninnenfläche; lange Gründe auch im schmalen Drawer. */
html[data-design="modern"] .kf-plan-angaben :is(th, .bro-statuspille) {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
html[data-design="modern"] .kf-plan-angaben .bro-tabelle {
  min-width: 42rem;
}
html[data-design="modern"] .kf-plan-angaben :is(th, td) {
  min-width: 8rem;
}

.kf-plan-modern {
  display: grid;
  gap: var(--bro-abstand-16);
  min-width: 0;
}
.kf-plan-modern .bb-kennzahlen {
  margin: 0;
}
.kf-plan-modern-box,
.kf-plan-modern-box .bb-box-inhalt {
  min-width: 0;
}
.kf-plan-modern-box .bb-box-inhalt {
  padding: 0;
}
.kf-plan-modern-erklaerung {
  margin: 0;
  padding: var(--bro-abstand-16) var(--bro-abstand-24);
  border-bottom: 1px solid var(--bro-linie);
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-fein-groesse);
}
.kf-plan-modern-filter,
.kf-plan-modern-bes-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-8);
  padding: var(--bro-abstand-12) var(--bro-abstand-16);
}
.kf-plan-modern-filter a,
.kf-plan-modern-bes-filter a {
  display: inline-flex;
  align-items: center;
  gap: var(--bro-abstand-8);
  padding: var(--bro-abstand-8) var(--bro-abstand-12);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-konsole-radius-pille);
  color: var(--bro-tinte-1);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.kf-plan-modern-filter a[aria-current],
.kf-plan-modern-bes-filter a[aria-current] {
  border-color: var(--bro-akzent);
  background: var(--bro-akzent-flaeche);
}
.kf-plan-modern-tabellenrolle {
  max-width: 100%;
  overflow-x: auto;
}
.kf-plan-modern-tabellenrolle .bro-tabelle {
  margin: 0;
  width: 100%;
}
.kf-plan-modern-tabellenrolle th,
.kf-plan-modern-tabellenrolle td {
  vertical-align: top;
  overflow-wrap: anywhere;
}
.kf-plan-modern-tabellenrolle th small,
.kf-plan-modern-tabellenrolle td small {
  display: block;
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-fein-groesse);
  font-weight: 400;
}
.kf-plan-modern .kf-plan-tour {
  border: 0;
}
.kf-plan-modern-tour-aktion {
  display: inline-flex;
  gap: var(--bro-abstand-8);
  padding: var(--bro-abstand-8);
  color: var(--bro-akzent);
  white-space: nowrap;
}
.kf-plan-modern-entscheidung summary {
  cursor: pointer;
  color: var(--bro-akzent);
  padding-block: var(--bro-abstand-8);
}
.kf-plan-modern .kf-plan-bedarf,
.kf-plan-modern .kf-plan-abrufe {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
}
.kf-plan-modern .bb-datenkarten {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: var(--bro-abstand-16);
}
.kf-plan-modern-auslastung {
  margin: 0;
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-fein-groesse);
}
.kf-plan-modern-rechenschritte {
  padding: var(--bro-abstand-16);
  border-top: 1px solid var(--bro-linie);
}
.kf-plan-modern-rechenschritte summary {
  cursor: pointer;
}
.kf-plan-modern-bes-raster {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
  gap: var(--bro-abstand-24);
}
.kf-plan-modern-bes-raster > * {
  min-width: 0;
}
.kf-plan-modern-bes-aktionen {
  padding: var(--bro-abstand-16);
}
.kf-plan-modern-bes-gruppentitel {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--bro-abstand-8);
  margin: 0;
  padding: var(--bro-abstand-12) var(--bro-abstand-16);
  font-size: var(--bro-schrift-fein-groesse);
  background: var(--bro-flaeche-0);
}
.kf-plan-modern-bes-gruppentitel span {
  color: var(--bro-tinte-2);
  font-weight: 400;
}
.kf-plan-modern-bes-neben {
  padding: var(--bro-abstand-16);
  border-left: 1px solid var(--bro-linie);
}
.kf-plan-modern-bes-person {
  display: flex;
  gap: var(--bro-abstand-12);
  padding: var(--bro-abstand-12) var(--bro-abstand-16);
  border-bottom: 1px solid var(--bro-linie);
}
.kf-plan-modern-bes-person small {
  display: block;
  color: var(--bro-tinte-2);
}
@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (max-height: 479px) and (orientation: landscape), (min-width: 768px) and (max-width: 1279px) and (orientation: portrait) {
  .kf-plan-modern .bb-datenkarten,
  .kf-plan-modern-bes-raster {
    grid-template-columns: minmax(0, 1fr);
  }
  .kf-plan-modern-bes-neben {
    border-left: 0;
    border-top: 1px solid var(--bro-linie);
  }
}

/* #10649: Nur die Inhaltsgeometrie der Modern-Aufträge. Fachkarten und
   vollständige Annahmeformulare behalten ihre vorhandenen Klassen/Verträge. */
html[data-design="modern"] [data-kf-auftraege-modern] {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-24);
  min-width: 0;
}

html[data-design="modern"]
  [data-kf-auftraege-modern]
  :is(
    .kf-auf-ansicht,
    .kf-auf-stapel,
    .kf-auf-quelle,
    .kf-auf-aktion,
    .kf-auf-menue,
    .kf-auf-tabelle,
    .kf-auf-suche,
    .kf-auf-suche > label
  ) {
  min-width: 0;
  max-width: 100%;
}

html[data-design="modern"]
  [data-kf-auftraege-modern]
  :is(.kf-auf-eingang, .kf-auf-anruf, .kf-auf-menue-inhalt) {
  border-radius: var(--bro-konsole-radius-box);
}

html[data-design="modern"] [data-kf-auftraege-modern] .bb-formular-inhalt .kf-an-eingang {
  padding: 0;
  border: 0;
  background: transparent;
}

html[data-design="modern"] [data-kf-auftraege-modern] .kf-auf-menue-inhalt {
  width: min(100%, 22rem);
  min-width: 0;
}

html[data-design="modern"]
  [data-kf-auftraege-modern]
  :is(input, select, textarea, .kf-auf-aktion > *) {
  min-width: 0;
  max-width: 100%;
}

html[data-design="modern"]
  [data-kf-auftraege-modern]
  :is(.kf-auf-quelle, .kf-auf-anruf, .kf-auf-aktion, .kf-auf-fuss, [data-klinik-links]) {
  overflow-wrap: anywhere;
}

/* Die vollständige Tabelle rollt in ihrem vorhandenen Behälter. Der lokale
   Bezug hält auch ihre absolute stille Aktionsüberschrift im Scrollbereich
   (CI39727759950: sonst Dokumentbreite626px bei390px trotz passendem Wrapper). */
html[data-design="modern"] [data-kf-auftraege-modern] .kf-auf-tabelle {
  position: relative;
  width: 100%;
}

/* #10710: gemeinsame Inhaltsbausteine im Leitstand; Fachzustände bleiben im Bestand. */
html[data-design="modern"] .kf-ls-kpi-modern {
  display: block;
  margin: var(--bro-abstand-16) 0;
}

html[data-design="modern"] .kf-ls-box--modern {
  min-width: 0;
  border-radius: var(--bro-konsole-radius-box);
}

html[data-design="modern"] .kf-ls-box--modern > .bb-box-inhalt {
  min-width: 0;
}

html[data-design="modern"] .kf-ls-box--modern .kf-ls-reiterflaeche {
  padding: 0;
  min-width: 0;
}

html[data-design="modern"] .kf-ls-box--modern [data-ls-reiter="uebersicht"],
html[data-design="modern"] .kf-ls-box--modern [data-ls-reiter="tag"] {
  padding: var(--bro-abstand-16);
}

html[data-design="modern"] .kf-ls-box--modern .kf-ls-raster {
  gap: var(--bro-abstand-16);
  margin: 0;
}

html[data-design="modern"] .kf-ls-box--modern .kf-ls-flaeche {
  border-radius: var(--bro-konsole-radius-box);
}

html[data-design="modern"] .kf-ls-fahrten--modern > .kf-ls-chips,
html[data-design="modern"] .kf-ls-fahrten--modern > .kf-ls-tageswege,
html[data-design="modern"] .kf-ls-fahrten--modern > .kf-ls-auslastung,
html[data-design="modern"] .kf-ls-fahrten--modern > .kf-ls-vorspann,
html[data-design="modern"] .kf-ls-fahrten--modern > .kf-ls-hinweise,
html[data-design="modern"] .kf-ls-fahrten--modern > .kf-ls-eintragen,
html[data-design="modern"] .kf-ls-box--modern .kf-wt-oben,
html[data-design="modern"] .kf-ls-box--modern .kf-wt-filter,
html[data-design="modern"] .kf-ls-box--modern .kf-wt > .portal-werkzeuge {
  margin: var(--bro-abstand-12) var(--bro-abstand-16);
}

html[data-design="modern"] .kf-ls-fahrten--modern .kf-ls-fahrten-tabelle,
html[data-design="modern"] .kf-ls-box--modern .kf-ls-wagen-tabelle {
  min-width: 48rem;
}

html[data-design="modern"] .kf-ls-box--modern .kf-ls-wagen-tabelle th,
html[data-design="modern"] .kf-ls-box--modern .kf-ls-wagen-tabelle td {
  padding: var(--bro-abstand-12) var(--bro-abstand-16);
}

html[data-design="modern"] .kf-ls-box--modern .kf-ls-wagen-tabelle .kf-wt-neben,
html[data-design="modern"] .kf-ls-box--modern .kf-ls-wagen-tabelle .kf-wt-jetzt {
  margin: var(--bro-abstand-4) 0;
  overflow-wrap: anywhere;
}

html[data-design="modern"] .kf-ls-box--modern .kf-wt-einzelheiten {
  min-width: 10rem;
}

html[data-design="modern"] .kf-ls-box--modern .kf-wt-einzelheiten > summary {
  min-height: var(--bro-beruehrungsflaeche);
  cursor: pointer;
  display: flex;
  align-items: center;
}

html[data-design="modern"] .kf-ls-box--modern .kf-wt-einzelheiten[open] {
  min-width: 32rem;
}

html[data-design="modern"] .kf-ls-box--modern .kf-wt-einzelheiten .kf-wt-wagen {
  margin-top: var(--bro-abstand-8);
}

/*
 * Design „Vitala“ im Portal: der Rahmen nach der Klickdemo (#9599) für jeden
 * Betrieb (`rahmen-vitala.ts`, #9974). Nur unter `html[data-rahmen="vitala"]`
 * bzw. `html[data-design="vitala"]` wirksam, nur Tokens.
 *
 * Leiste und Handy-Kopf teilen sich die Regeln der Fahrdienst-Leiste in
 * `portal.css` (`.portal-vitala-leiste`, `.portal-vitala-mobilkopf`); hier
 * steht nur, was der Fahrdienst-Rahmen nicht hat: der Bereichswechsler über
 * dem Inhalt und die Team-Ampel im Fuß der Leiste.
 */

/* Der Bereichswechsler (`arbeitsbereiche.ts`) trägt die Unterseiten eines
   Bereichs, die in keiner Leiste stehen. Die Demo kennt keinen Bereichskopf;
   statt der Karte des Standard-Rahmens steht er deshalb als ruhige Zeile
   über dem Seitenkopf: ohne Rahmen und Fläche, das Symbol auf voller
   Akzentfläche wie die Person am Fuß der Leiste (Demo `.nutzer-bild`). */
html[data-rahmen="vitala"] .portal-bereich {
  margin-top: var(--bro-abstand-24);
  margin-bottom: calc(-1 * var(--bro-abstand-8));
  padding: 0;
  border: 0;
  background: transparent;
}

html[data-rahmen="vitala"] .portal-bereich-symbol {
  width: 28px;
  height: 28px;
  background: var(--bro-akzent);
  color: var(--bro-akzent-tinte);
}

html[data-rahmen="vitala"] .portal-bereich-symbol .bro-symbol {
  width: 16px;
  height: 16px;
}

/* „Bereiche“ wie die Knöpfe im Fuß der Leiste (Demo `.thema-knopf`): ohne
   Rahmen, erst beim Darüberfahren eine Fläche. */
html[data-rahmen="vitala"] .portal-bereich-menue > .portal-bereich-knopf {
  border-color: transparent;
  background: transparent;
  color: var(--bro-tinte-2);
}

html[data-rahmen="vitala"] .portal-bereich-menue > .portal-bereich-knopf:hover,
html[data-rahmen="vitala"] .portal-bereich-menue[open] > .portal-bereich-knopf {
  background: var(--bro-flaeche-1);
  color: var(--bro-tinte-1);
}

/* Die Team-Ampel (Modul `hr`) steht im Fuß über der Person; ihre Liste
   klappt wie das Nutzermenü am Fuß nach OBEN auf. */
.portal-vitala-team {
  padding: 0 var(--bro-abstand-8);
}

.portal-vitala-team .portal-team-ampel-liste {
  top: auto;
  right: auto;
  bottom: calc(100% + 6px);
  left: 0;
  max-width: calc(100vw - 2 * var(--bro-abstand-16));
}

/* Im Datensatz-Fenster (`html[data-eingebettet]`) nur der Inhalt. Leiste,
   Handy-Kopf und Bereichswechsler blendet `portal.css` schon über ihre
   Grundklassen aus; hier ausdrücklich auch die eigenen Teile. */
html[data-eingebettet] :is(.portal-vitala-leiste, .portal-vitala-mobilkopf, .portal-vitala-team) {
  display: none;
}

/* #10562: Die Werte sind Laufzeitgeometrie des VisualViewport. Ohne diese
   API bleibt die bestehende volle Höhe/Breite der Modern-Schublade. */
html:is([data-design="modern"], [data-rahmen="modern"]) .portal-pdf.portal-schublade {
  top: var(--portal-schublade-sicht-oben, 0px);
  right: var(--portal-schublade-sicht-rechts, 0px);
  bottom: auto;
  height: var(--portal-schublade-sicht-hoehe, 100dvh);
  max-height: var(--portal-schublade-sicht-hoehe, 100dvh);
  max-width: var(--portal-schublade-sicht-breite, 100vw);
}

/* Pinch-Zoom kann schmaler als die CSS-Geräteklasse sein. Die vorhandenen
   Kopf-/Aktionszeilen fließen deshalb intrinsisch um, statt in der nun
   kleineren, weiterhin modalen Hülle abgeschnitten zu werden. */
html:is([data-design="modern"], [data-rahmen="modern"])
  .portal-pdf.portal-schublade
  :is(.portal-schublade-kopf, .portal-pdf-kopf, .portal-pdf-leiste, .portal-schublade-fuss) {
  flex-wrap: wrap;
  min-width: 0;
  max-width: 100%;
}

html:is([data-design="modern"], [data-rahmen="modern"])
  .portal-pdf.portal-schublade
  :is(.portal-schublade-kopf, .portal-pdf-kopf, .portal-pdf-leiste, .portal-schublade-fuss)
  > * {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

html:is([data-design="modern"], [data-rahmen="modern"])
  .portal-pdf.portal-schublade
  :is(.portal-schublade-kopf, .portal-pdf-kopf, .portal-pdf-leiste, .portal-schublade-fuss)
  > :is(button, a) {
  white-space: normal;
}