/*
 * 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-modern-signatur-schrift: "Brush Script MT", cursive;
  --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-fehler-breite: 600px;
  --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: 72px;
  --bro-modern-logo-quadrat: 64px;
  --bro-modern-logo-quer: 50px;
  --bro-modern-logo-kopf: 88px;
  --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-fehler-breite: 600px;
    --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: 72px;
    --bro-modern-logo-quadrat: 64px;
    --bro-modern-logo-quer: 50px;
    --bro-modern-logo-kopf: 88px;
    --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-fehler-breite: 600px;
  --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: 72px;
  --bro-modern-logo-quadrat: 64px;
  --bro-modern-logo-quer: 50px;
  --bro-modern-logo-kopf: 88px;
  --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;
}

/* Kommentare und Ausschnitte eines Gesprächs (#13011): schlichte Listen,
   kleine Formulare in einer Zeile, die öffentliche Ausschnitt-Seite mittig. */
.portal-liste {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  margin: 0;
  padding-inline-start: var(--bro-abstand-16);
}

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

.portal-ausschnitt {
  max-width: 48rem;
  margin: var(--bro-abstand-24) auto;
}

.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%;
}

/* GEO · Sichtbarkeit in KI-Antworten (#13860) */

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

.portal-geo-kundenwahl,
.portal-geo-einstellung,
.portal-geo-neue-frage {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--bro-abstand-8);
}

.portal-geo-fragen,
.portal-geo-tabelle {
  width: 100%;
}

.portal-geo-sichtbarkeit {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
  list-style: none;
  padding: 0;
  font-variant-numeric: tabular-nums;
}

.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,
.portal-kundenfreigaben-liste {
  width: 100%;
}

/* Öffentliche Freigabeseite für den Kunden (#13853): schmale Lesespalte. */
.portal-kundenfreigabe {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
  max-width: 48rem;
  margin: 0 auto;
  padding: var(--bro-abstand-16);
}

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

.portal-kundenfreigabe-bilder img {
  max-width: 100%;
  max-height: 24rem;
  object-fit: contain;
  border-radius: var(--bro-radius-s);
}

.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);
}

/* Aktionspreis (#11036), wie im Alt: der normale Preis durchgestrichen und
   gedämpft, daneben der Aktionspreis in der Signalfarbe. */
.portal-buchung-preis-alt {
  color: var(--bro-tinte-3);
}

.portal-buchung-preis-aktion {
  color: var(--bro-fehler);
}

.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 Zahlung im Buchungsformular (#11151): Pflichtbetrag, freiwillige
   Anzahlung und Vorkasse als eine Gruppe; jede Wahl steht in eigener Zeile. */
.portal-buchung-zahlung {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
  margin: var(--bro-abstand-16) 0;
  padding: var(--bro-abstand-12) var(--bro-abstand-16);
  border: 1px solid var(--bro-linie);
}

/* Konnte die Zahlung nicht gestartet werden, steht das über allem anderen
   auf der Bestätigung — sie darf keine Zahlung vortäuschen (#11151). */
.portal-buchung-zahlungshinweis {
  color: var(--bro-fehler);
}

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

/* „Unter Start anheften“ im Dialog und auf der Kontoseite (#13828). */
.portal-werkstatt-start {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  padding: var(--bro-abstand-16) var(--bro-abstand-24);
  border-top: 1px solid var(--bro-linie);
}

.portal-werkstatt-startliste,
.portal-start-liste {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.portal-werkstatt-startliste > li > span:first-child,
.portal-start-angeheftet > span:first-child {
  flex: 1;
}

.portal-werkstatt-startschritt,
.portal-start-schritte,
.portal-start-schritte > form {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-4);
}

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

.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 {
  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: 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);
}

/* Das eigene Bild auf „Mein Profil“ (#11083): derselbe Avatar, doppelt so groß. */
.portal-profil-bild {
  overflow: hidden;
  width: calc(var(--bro-abstand-32) * 2);
  height: calc(var(--bro-abstand-32) * 2);
}

/* Das eigene Teams-Foto über dem Kürzel (#10472), wie in der Team-Ampel
   herangezoomt. Der Rahmen schneidet ab, damit der Punkt außen bleiben kann. */
.portal-nutzer-foto {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}

.portal-nutzer-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.45);
  transform-origin: 50% 36%;
}

/* Der eigene Teams-Status als Punkt unten rechts, Farben wie die Ampel. */
.portal-nutzer-praesenz {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 10px;
  height: 10px;
  border-radius: var(--bro-radius-rund);
  background: var(--portal-nutzer-praesenz);
  box-shadow: 0 0 0 2px var(--bro-flaeche-1);
}

.portal-nutzer-praesenz-verfuegbar {
  --portal-nutzer-praesenz: var(--bro-erfolg);
}

.portal-nutzer-praesenz-beschaeftigt {
  --portal-nutzer-praesenz: var(--bro-fehler);
}

.portal-nutzer-praesenz-abwesend {
  --portal-nutzer-praesenz: var(--bro-warnung);
}

.portal-nutzer-praesenz-offline {
  --portal-nutzer-praesenz: var(--bro-linie-stark);
}

.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;
}

/*
 * Die Zeichenfläche der gezeichneten Unterschrift (#11082) — dieselbe Bauart
 * wie am Wagenhandy (#10002): Tinte und Fläche aus den Tokens, das Skript
 * liest beide zur Laufzeit.
 */
.portal-signieren-zeichenflaeche {
  display: block;
  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;
}

/*
 * Die geführte Signierseite (#11579). Der Kopf bleibt beim Scrollen oben
 * stehen: Titel, Schritt, Fortschritt und „Zum nächsten Feld“ sind bei 41
 * Seiten sonst nach der ersten Seite verschwunden. Die Fläche deckt, was
 * darunter durchläuft.
 */
.portal-signieren-kopf {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: calc(-1 * var(--bro-abstand-8)) 0 var(--bro-abstand-12);
  padding: var(--bro-abstand-8) 0;
  background: var(--bro-flaeche-1);
  border-bottom: 1px solid var(--bro-linie);
}

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

/*
 * Ein Seitenbild mit den Feldern darauf. Die Kästen liegen in Prozent der
 * Seite über dem Bild (`feldKasten` in `seite.ts`), deshalb trägt der
 * Rahmen die Lage und das Bild füllt ihn ganz.
 */
.portal-signieren-seite {
  position: relative;
  margin-bottom: var(--bro-abstand-8);
}

.portal-signieren-seite > img {
  display: block;
  width: 100%;
  height: auto;
}

.portal-signieren-kasten {
  position: absolute;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  min-width: var(--bro-abstand-24);
  min-height: var(--bro-abstand-16);
  padding: 0 var(--bro-abstand-4);
  overflow: hidden;
  border: 2px solid var(--bro-akzent);
  border-radius: var(--bro-radius-s);
  background: var(--bro-akzent-flaeche);
  color: var(--bro-akzent-text);
  font-size: var(--bro-schrift-fein-groesse);
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
}

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

.portal-signieren-kasten > span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.portal-signieren-kasten-erledigt {
  border-color: var(--bro-erfolg);
  border-style: solid;
  color: var(--bro-tinte-1);
}

/* Datum und Name setzt der Server — der Kasten zeigt nur, wo. */
.portal-signieren-kasten-still {
  border-style: dashed;
  border-color: var(--bro-linie-stark);
  background: transparent;
  color: var(--bro-tinte-2);
}

.portal-signieren-inhalt ol {
  margin: 0;
  padding-left: var(--bro-abstand-24);
}

.portal-signieren-haken {
  color: var(--bro-erfolg);
  font-weight: var(--bro-schrift-betont-gewicht);
}

.portal-signieren-dialog {
  width: min(32rem, calc(100vw - 2 * var(--bro-abstand-16)));
  border: 1px solid var(--bro-linie);
  box-shadow: var(--bro-schatten-dialog);
}

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

/* Bei „Überweisung“ entfällt das SEPA-Mandat (#11873): Seine Kästen bleiben
   sichtbar, aber still — die Kundin sieht, dass dort nichts mehr zu tun ist. */
.portal-signieren-kasten-entfaellt {
  border-style: dashed;
  border-color: var(--bro-linie-stark);
  background: transparent;
  color: var(--bro-tinte-2);
  pointer-events: none;
}

/* Die Wahl vor dem SEPA-Mandat (#11873) — eine Gruppe am Ende des Formulars. */
.portal-signieren-zahlung {
  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-16);
}

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

.portal-signieren-sepa-felder[hidden] {
  display: none;
}

/* „Andere Möglichkeiten“: die Nebenwege unter der Hauptsache, zugeklappt. */
.portal-signieren-nebenwege {
  margin-top: var(--bro-abstand-24);
}

.portal-signieren-nebenwege > summary {
  cursor: pointer;
  color: var(--bro-tinte-2);
}

/* #11874: abgenommener Modern-Entwurf BroSignSignierseite.dc.html (28.10.2026).
   Die Maße folgen den Artboards. Farben und Schriften stammen aus den Tokens;
   der öffentliche Ablauf setzt data-design="modern" und data-theme="light". */
.portal-signieren-modern .portal-signieren-ablauf,
.portal-signieren-modern .portal-signieren-dank {
  max-width: none;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--bro-flaeche-0);
  overflow-wrap: anywhere;
}

.portal-signieren-modern .portal-signieren-kopf {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  margin: 0;
  padding: 10px var(--bro-abstand-24);
  background: var(--bro-flaeche-1);
  border-bottom: 1px solid var(--bro-linie);
}

.portal-signieren-modern .portal-signieren-marke {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  margin: 0;
  color: var(--bro-tinte-1);
  font-size: var(--bro-schrift-betont-groesse);
  font-weight: var(--bro-schrift-titel-gewicht);
}

.portal-signieren-modern .portal-signieren-logo {
  max-width: 160px;
  max-height: 30px;
}

.portal-signieren-kopftitel {
  display: flex;
  align-items: baseline;
  gap: var(--bro-abstand-8);
  min-width: 0;
  padding-left: 14px;
  border-left: 1px solid var(--bro-linie);
}

.portal-signieren-kopftitel h1 {
  min-width: 0;
  margin: 0;
  font-size: var(--bro-schrift-fliesstext-groesse);
  line-height: var(--bro-schrift-fliesstext-zeilenhoehe);
  font-weight: var(--bro-schrift-betont-gewicht);
}

.portal-signieren-kopftitel :is([data-signieren-seitenstand], [data-signieren-absender]) {
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
}

.portal-signieren-kopfaktionen {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.portal-signieren-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px var(--bro-abstand-12);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-konsole-radius-klein);
  background: var(--bro-flaeche-1);
  color: var(--bro-akzent);
  font-size: var(--bro-schrift-klein-groesse);
  line-height: var(--bro-schrift-klein-zeilenhoehe);
  text-decoration: none;
}

.portal-signieren-link.leise {
  padding-inline: var(--bro-abstand-4);
  border-color: transparent;
  color: var(--bro-tinte-2);
}

.portal-signieren-startbuehne {
  display: grid;
  place-items: center;
  min-height: calc(100dvh - 60px);
  padding: var(--bro-abstand-24);
}

.portal-signieren-start {
  width: min(560px, 100%);
  padding: var(--bro-abstand-32);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-abstand-16);
  background: var(--bro-flaeche-1);
}

.portal-signieren-start h2,
.portal-signieren-start h1 {
  margin: 0 0 6px;
  font-size: calc(var(--bro-schrift-titel-groesse) + 4px);
  line-height: var(--bro-schrift-titel-zeilenhoehe);
  font-weight: var(--bro-schrift-titel-gewicht);
}

.portal-signieren-start p {
  margin: 0 0 18px;
  color: var(--bro-tinte-2);
  line-height: 1.5;
}

.portal-signieren-start .portal-signieren-frist,
.portal-signieren-schild {
  margin: 0 0 var(--bro-abstand-8);
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-augenbraue-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
  line-height: var(--bro-schrift-augenbraue-zeilenhoehe);
  letter-spacing: var(--bro-schrift-gruppentitel-laufweite);
  text-transform: uppercase;
}

.portal-signieren-ueberblick {
  display: flex;
  gap: 10px;
  margin: 0 0 18px;
}

.portal-signieren-ueberblick > span {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: var(--bro-abstand-12);
  border-radius: var(--bro-modern-radius-navi);
  background: var(--bro-flaeche-0);
}

.portal-signieren-ueberblick strong {
  color: var(--bro-tinte-1);
  font-size: calc(var(--bro-schrift-titel-groesse) + 2px);
  line-height: var(--bro-schrift-titel-zeilenhoehe);
}

.portal-signieren-ueberblick small,
.portal-signieren-startliste small {
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-augenbraue-groesse);
  line-height: var(--bro-schrift-klein-zeilenhoehe);
}

.portal-signieren-startliste {
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-modern-radius-navi);
}

.portal-signieren-startliste > li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--bro-abstand-12);
  padding: 11px 14px;
  border-top: 1px solid var(--bro-linie);
  font-size: var(--bro-schrift-klein-groesse);
  line-height: var(--bro-schrift-klein-zeilenhoehe);
}

.portal-signieren-startliste > li:first-child {
  border-top: 0;
}

.portal-signieren-startliste small {
  flex-shrink: 0;
  text-align: right;
}

html[data-design="modern"] .portal-signieren-modern .bro-knopf {
  min-height: var(--bro-beruehrungsflaeche);
  padding: var(--bro-abstand-12) 20px;
  border-radius: var(--bro-modern-radius-navi);
  font-size: var(--bro-schrift-fliesstext-groesse);
  line-height: 20px;
  font-weight: var(--bro-schrift-betont-gewicht);
}

html[data-design="modern"] .portal-signieren-modern .bro-knopf--sekundaer {
  color: var(--bro-tinte-2);
}

.portal-signieren-start [data-signieren-start] {
  width: 100%;
  padding-block: 14px;
}

.portal-signieren-start .portal-signieren-sicher {
  margin: var(--bro-abstand-12) 0 0;
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-augenbraue-groesse);
  line-height: var(--bro-schrift-klein-zeilenhoehe);
  text-align: center;
}

.portal-signieren-arbeitsbereich {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  min-height: calc(100dvh - 60px);
}

.portal-signieren-schritte {
  position: sticky;
  top: var(--signieren-kopfhoehe, 60px);
  align-self: start;
  min-height: calc(100dvh - var(--signieren-kopfhoehe, 60px) - 72px);
  max-height: calc(100dvh - var(--signieren-kopfhoehe, 60px) - 72px);
  overflow-y: auto;
  padding: 20px var(--bro-abstand-16);
  background: var(--bro-flaeche-1);
  border-right: 1px solid var(--bro-linie);
}

.portal-signieren-schritte ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.portal-signieren-schritte li + li {
  margin-top: var(--bro-abstand-4);
}

.portal-signieren-schritt {
  display: flex;
  gap: var(--bro-abstand-12);
  align-items: flex-start;
  padding: 10px var(--bro-abstand-12);
  border-radius: var(--bro-modern-radius-navi);
  color: var(--bro-tinte-1);
  text-decoration: none;
}

.portal-signieren-schritt[aria-current="step"] {
  background: var(--bro-daten-flaeche);
}

.portal-signieren-schritt-nr {
  flex: 0 0 var(--bro-abstand-24);
  height: var(--bro-abstand-24);
  display: grid;
  place-items: center;
  border: 2px solid var(--bro-linie);
  border-radius: 50%;
  background: var(--bro-flaeche-1);
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-augenbraue-groesse);
  font-weight: var(--bro-schrift-titel-gewicht);
  line-height: 1;
}

.portal-signieren-schritt[aria-current="step"] .portal-signieren-schritt-nr {
  border-color: var(--bro-akzent);
  color: var(--bro-akzent);
}

.portal-signieren-schritt.ist-fertig .portal-signieren-schritt-nr {
  border-color: var(--bro-erfolg);
  background: var(--bro-erfolg);
  color: var(--bro-akzent-tinte);
}

.portal-signieren-schritt-text {
  min-width: 0;
}

.portal-signieren-schritt-text strong {
  display: block;
  font-size: var(--bro-schrift-klein-groesse);
  line-height: var(--bro-schrift-klein-zeilenhoehe);
}

.portal-signieren-schritt-text small {
  display: block;
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-augenbraue-groesse);
  line-height: var(--bro-schrift-augenbraue-zeilenhoehe);
}

.portal-signieren-hilfe,
.portal-signieren-ueberweisung {
  margin: 18px 0 0;
  padding: var(--bro-abstand-12);
  border-radius: var(--bro-modern-radius-navi);
  background: var(--bro-flaeche-0);
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-augenbraue-groesse);
  line-height: 1.5;
}

.portal-signieren-inhalte {
  min-width: 0;
  /* Footerfreiraum im Inhalt hält die Sticky-Schritte auch am Dokumentende fest. */
  padding: var(--bro-abstand-24) 40px calc(var(--bro-abstand-24) + 72px);
}

.portal-signieren-modern .portal-signieren-dokument {
  width: min(620px, 100%);
  min-width: 0;
  margin: 0 auto var(--bro-abstand-16);
}

.portal-signieren-dokument > h2 {
  margin-bottom: var(--bro-abstand-12);
}

.portal-signieren-js .portal-signieren-dokument > h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.portal-signieren-modern .portal-signieren-seite {
  background: var(--bro-flaeche-1);
  border-radius: 6px;
  box-shadow: var(--bro-schatten-karte);
}

.portal-signieren-modern .portal-signieren-kasten {
  justify-content: center;
  border-style: dashed;
  border-radius: var(--bro-konsole-radius-klein);
  background: color-mix(in srgb, var(--bro-akzent) 7%, var(--bro-flaeche-1));
  color: var(--bro-akzent);
  font-size: var(--bro-schrift-klein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
}

.portal-signieren-modern .portal-signieren-kasten:focus-visible,
.portal-signieren-modern .portal-signieren-kasten.ist-aktiv {
  border-style: solid;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--bro-akzent) 18%, transparent);
}

.portal-signieren-modern
  .portal-signieren-kasten.ist-aktiv[data-art="unterschrift"]:not(.portal-signieren-zahlungsfeld) {
  overflow: visible;
}

.portal-signieren-kasten.ist-aktiv[data-art="unterschrift"]:not(
    .portal-signieren-zahlungsfeld
  )::before {
  position: absolute;
  left: -112px;
  padding: 5px 10px;
  border-radius: 6px;
  background: var(--bro-akzent);
  color: var(--bro-akzent-tinte);
  font-size: var(--bro-schrift-augenbraue-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
  line-height: var(--bro-schrift-augenbraue-zeilenhoehe);
  white-space: nowrap;
  content: "Hier unterschreiben";
}

.portal-signieren-modern .portal-signieren-kasten-erledigt {
  border-color: var(--bro-erfolg);
  border-style: solid;
  background: color-mix(in srgb, var(--bro-erfolg) 10%, var(--bro-flaeche-1));
  color: var(--bro-erfolg);
}

.portal-signieren-modern .portal-signieren-kasten-still,
.portal-signieren-modern .portal-signieren-kasten-entfaellt {
  border-color: var(--bro-linie-stark);
  color: var(--bro-tinte-2);
}

.portal-signieren-modern .portal-signieren-leiste {
  position: fixed;
  inset: auto 0 0;
  z-index: 5;
  min-height: 72px;
  padding: var(--bro-abstand-12) var(--bro-abstand-24);
  padding-bottom: calc(var(--bro-abstand-12) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--bro-linie);
  background: var(--bro-flaeche-1);
  box-shadow: none;
}

.portal-signieren-leiste-inhalt {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
}

.portal-signieren-leiste-stand {
  flex: 0 0 200px;
}

.portal-signieren-leiste-stand p {
  margin: 0 0 6px;
  font-size: var(--bro-schrift-augenbraue-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
  line-height: var(--bro-schrift-augenbraue-zeilenhoehe);
}

.portal-signieren-fortschritt {
  display: block;
  width: 100%;
  height: 6px;
  overflow: hidden;
  appearance: none;
  border: 0;
  border-radius: 3px;
  background: var(--bro-linie);
  accent-color: var(--bro-akzent);
}

.portal-signieren-fortschritt::-webkit-progress-bar {
  background: var(--bro-linie);
  border-radius: 3px;
}

.portal-signieren-fortschritt::-webkit-progress-value {
  background: var(--bro-akzent);
  border-radius: 3px;
}

.portal-signieren-fortschritt::-moz-progress-bar {
  background: var(--bro-akzent);
  border-radius: 3px;
}

.portal-signieren-fortschritt.ist-fertig {
  accent-color: var(--bro-erfolg);
}

.portal-signieren-fortschritt.ist-fertig::-webkit-progress-value {
  background: var(--bro-erfolg);
}

.portal-signieren-fortschritt.ist-fertig::-moz-progress-bar {
  background: var(--bro-erfolg);
}

.portal-signieren-leiste-aktionen {
  display: flex;
  gap: 10px;
  margin-left: auto;
}

.portal-signieren-modern :is(input, button, a, summary):focus-visible {
  outline: var(--bro-fokus-breite) solid var(--bro-akzent);
  outline-offset: var(--bro-fokus-abstand);
}

.portal-signieren-modern
  :is(input, button, a, summary, fieldset, section, .portal-signieren-seite) {
  scroll-margin-block-start: calc(
    var(--signieren-kopfhoehe, 60px) + var(--signieren-schrittehoehe, 0px) + 16px
  );
  scroll-margin-block-end: 120px;
}

.portal-signieren-modern .portal-signieren-kasten-erledigt.ist-aktiv {
  box-shadow: none;
}

.portal-signieren-modern .portal-signieren-dialog {
  box-sizing: border-box;
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: var(--bro-abstand-24);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-abstand-16);
  background: var(--bro-flaeche-1);
}

.portal-signieren-modern .portal-signieren-dialog::backdrop {
  background: color-mix(in srgb, var(--bro-tinte-1) 35%, transparent);
}

.portal-signieren-dialog h2 {
  margin: 0 0 var(--bro-abstand-4);
  font-size: var(--bro-schrift-titel-groesse);
  line-height: var(--bro-schrift-titel-zeilenhoehe);
}

.portal-signieren-dialog p {
  margin: 0 0 14px;
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
  line-height: var(--bro-schrift-klein-zeilenhoehe);
}

.portal-signieren-dialog [data-signieren-dialog-fehler]:empty {
  display: none;
}

.portal-signieren-dialog-aktionen {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: var(--bro-abstand-16);
}

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

.portal-signieren-signatur > p {
  margin-bottom: 0;
}

.portal-signieren-signatur-arten {
  display: flex;
  gap: 0;
  margin: 0;
  padding: var(--bro-abstand-4);
  border: 0;
  border-radius: var(--bro-modern-radius-navi);
  background: var(--bro-flaeche-0);
}

.portal-signieren-signatur-arten legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.portal-signieren-signatur-arten label {
  flex: 1 1 0;
  position: relative;
  padding: var(--bro-abstand-8);
  border-radius: var(--bro-konsole-radius-klein);
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
  text-align: center;
  cursor: pointer;
}

.portal-signieren-signatur-arten label:has(input:checked) {
  background: var(--bro-flaeche-1);
  color: var(--bro-tinte-1);
  box-shadow: var(--bro-schatten-karte);
}

.portal-signieren-signatur-arten label:focus-within {
  outline: var(--bro-fokus-breite) solid var(--bro-akzent);
  outline-offset: var(--bro-fokus-abstand);
}

.portal-signieren-signatur-arten input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.portal-signieren-signatur-vorschau {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 120px;
  padding: var(--bro-abstand-16) 18px 22px;
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-modern-radius-navi);
  color: var(--bro-akzent);
  font-family: var(--bro-modern-signatur-schrift);
  font-size: calc(var(--bro-schrift-anzeige-groesse) + 6px);
  font-style: normal;
  line-height: var(--bro-schrift-anzeige-zeilenhoehe);
}

.portal-signieren-signatur-vorschau::after {
  position: absolute;
  right: 18px;
  bottom: 18px;
  left: 18px;
  border-bottom: 1px solid var(--bro-linie);
  content: "";
}

.portal-signieren-modern .portal-signieren-kasten-erledigt[data-art="unterschrift"] {
  font-family: var(--bro-modern-signatur-schrift);
  font-size: var(--bro-abstand-24);
  font-weight: var(--bro-schrift-fliesstext-gewicht);
}

.portal-signieren-modern .portal-signieren-kasten > span:has(> img) {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.portal-signieren-modern .portal-signieren-kasten > span > img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.portal-signieren-modern .portal-signieren-zeichenflaeche {
  height: 120px;
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-modern-radius-navi);
  background: var(--bro-flaeche-1);
  color: var(--bro-akzent);
}

.portal-signieren-modern .portal-signieren-zahlung {
  width: min(620px, 100%);
  min-width: 0;
  margin: 0 auto var(--bro-abstand-16);
  padding: var(--bro-abstand-24);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-modern-radius-feld);
  background: var(--bro-flaeche-1);
}

.portal-signieren-zahlung > legend {
  float: left;
  width: 100%;
  margin: 0 0 var(--bro-abstand-8);
  padding: 0;
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-augenbraue-groesse);
  line-height: var(--bro-schrift-augenbraue-zeilenhoehe);
  letter-spacing: var(--bro-schrift-gruppentitel-laufweite);
  text-transform: uppercase;
}

.portal-signieren-zahlungswahl {
  display: flex;
  gap: 10px;
  margin: 0 0 18px;
}

.portal-signieren-zahlungswahl > label {
  flex: 1 1 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  padding: var(--bro-abstand-12);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-modern-radius-navi);
  font-size: var(--bro-schrift-klein-groesse);
  line-height: var(--bro-schrift-klein-zeilenhoehe);
  cursor: pointer;
}

.portal-signieren-zahlungswahl > label:has(input:checked) {
  border-color: var(--bro-akzent);
  box-shadow: inset 0 0 0 1px var(--bro-akzent);
  background: var(--bro-daten-flaeche);
}

.portal-signieren-zahlungswahl input {
  flex: 0 0 auto;
  margin: 3px 0 0;
  accent-color: var(--bro-akzent);
}

.portal-signieren-zahlungswahl small {
  display: block;
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-augenbraue-groesse);
  line-height: var(--bro-schrift-augenbraue-zeilenhoehe);
}

.portal-signieren-modern .portal-signieren-sepa-felder {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--bro-abstand-12);
}

.portal-signieren-sepa-felder > :not(.portal-signieren-feldzeile) {
  grid-column: 1 / -1;
}

.portal-signieren-modern .portal-signieren-feldzeile {
  min-width: 0;
}

.portal-signieren-modern .portal-signieren-feldzeile label,
.portal-signieren-signatur > label {
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-augenbraue-groesse);
  line-height: var(--bro-schrift-augenbraue-zeilenhoehe);
}

html[data-design="modern"] .portal-signieren-modern .bro-eingabefeld {
  min-height: 0;
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-konsole-radius-klein);
  padding: 10px var(--bro-abstand-12);
  font-size: var(--bro-schrift-klein-groesse);
  line-height: var(--bro-schrift-klein-zeilenhoehe);
}

.portal-signieren-feldzeile:has([data-signieren-vorbelegt]) input {
  background: var(--bro-flaeche-0);
}

.portal-signieren-feldzeile [data-signieren-iban-hinweis] {
  margin: 0;
  color: var(--bro-erfolg);
  font-size: var(--bro-schrift-augenbraue-groesse);
}

.portal-signieren-feldzeile [data-signieren-iban-hinweis]:empty {
  display: none;
}

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

.portal-signieren-feldzeile:has(input[aria-invalid="true"]) [data-signieren-iban-hinweis] {
  color: var(--bro-fehler);
}

.portal-signieren-feldzeile input[data-signieren-iban-gueltig="ja"] {
  border-color: var(--bro-erfolg);
}

.portal-signieren-sepa-signatur {
  display: contents;
}

.portal-signieren-modern .portal-signieren-zahlungsfeld {
  position: relative;
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  margin-top: 6px;
  padding: var(--bro-abstand-12);
  border: 2px dashed var(--bro-akzent);
  border-radius: var(--bro-konsole-radius-klein);
  background: color-mix(in srgb, var(--bro-akzent) 7%, var(--bro-flaeche-1));
  color: var(--bro-akzent);
  font-size: var(--bro-schrift-klein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
  text-align: center;
  cursor: pointer;
}

.portal-signieren-modern .portal-signieren-zahlungsfeld.portal-signieren-kasten-erledigt {
  border-style: solid;
  border-color: var(--bro-erfolg);
  background: color-mix(in srgb, var(--bro-erfolg) 10%, var(--bro-flaeche-1));
  color: var(--bro-erfolg);
}

.portal-signieren-ueberweisung {
  margin-top: 0;
}

.portal-signieren-zustimmung {
  max-width: 620px;
  margin: var(--bro-abstand-16) auto;
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-augenbraue-groesse);
  line-height: var(--bro-schrift-klein-zeilenhoehe);
}

.portal-signieren-erfolg {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--bro-erfolg) 10%, var(--bro-flaeche-1));
  color: var(--bro-erfolg);
  font-size: var(--bro-schrift-anzeige-groesse);
  line-height: var(--bro-schrift-anzeige-zeilenhoehe);
}

.portal-signieren-dank .portal-signieren-start {
  text-align: center;
}

.portal-signieren-modern .portal-signieren-nebenwege {
  max-width: 620px;
  margin: var(--bro-abstand-24) auto;
  padding-inline: var(--bro-abstand-16);
}

/* Ohne JavaScript bleiben die Formularfelder im normalen Dokumentfluss. */
.portal-signieren-modern:not(.portal-signieren-js) .portal-signieren-inhalte > .portal-formular {
  width: min(620px, 100%);
  margin-inline: auto;
}

.portal-signieren-modern.portal-signieren-js .portal-signieren-inhalte > .portal-formular,
.portal-signieren-modern.portal-signieren-js .portal-signieren-formularbereich > form {
  display: contents;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.portal-signieren-mandatstext {
  width: min(620px, 100%);
  margin: var(--bro-abstand-16) auto;
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
}

.portal-signieren-mandatstext > summary {
  cursor: pointer;
  padding-block: var(--bro-abstand-8);
}

.portal-signieren-dialog .portal-signieren-dialog-zustimmung {
  margin: 10px 0 0;
  font-size: var(--bro-schrift-augenbraue-groesse);
  line-height: var(--bro-schrift-augenbraue-zeilenhoehe);
}

/* Der Dokumentablauf nutzt seinen eigenen Kopf; das Formular hat mit Skript
   keine zweite sichtbare Überschrift und keinen leeren Kartenrahmen. */
.portal-signieren-js .portal-signieren-formularbereich > h2 {
  display: none;
}

.portal-signieren-mandat-hinweis {
  grid-column: 1 / -1;
}

.portal-signieren-kurz {
  display: none;
}

html[data-design="modern"] .portal-signieren-modern [data-signieren-fertig].ist-bereit {
  border-color: var(--bro-akzent);
  background: var(--bro-akzent);
  color: var(--bro-akzent-tinte);
}

html[data-design="modern"] .portal-signieren-modern input[data-signieren-iban-gueltig="ja"] {
  border-color: var(--bro-erfolg);
}

html[data-design="modern"] .portal-signieren-modern input[aria-invalid="true"] {
  border-color: var(--bro-fehler);
}

.portal-signieren-downloads {
  display: grid;
  gap: var(--bro-abstand-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.portal-signieren-modern [hidden] {
  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) {
  .portal-signieren-kasten.ist-aktiv[data-art="unterschrift"]:not(
      .portal-signieren-zahlungsfeld
    )::before {
    display: none;
  }

  .portal-signieren-lang,
  .portal-signieren-nur-desktop,
  .portal-signieren-start .portal-signieren-sicher,
  .portal-signieren-ueberblick > span:nth-child(3) {
    display: none;
  }

  .portal-signieren-kurz {
    display: inline;
  }

  .portal-signieren-modern .portal-signieren-kopf {
    flex-wrap: wrap;
    gap: 6px;
    padding: var(--bro-abstand-12) var(--bro-abstand-16);
  }

  .portal-signieren-kopftitel {
    order: 2;
    flex: 1 1 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--bro-abstand-4);
    padding: 0;
    border: 0;
  }

  .portal-signieren-kopftitel h1,
  .portal-signieren-kopftitel :is([data-signieren-seitenstand], [data-signieren-absender]) {
    font-size: var(--bro-schrift-augenbraue-groesse);
    line-height: var(--bro-schrift-augenbraue-zeilenhoehe);
  }

  .portal-signieren-kopfaktionen {
    order: 3;
    gap: var(--bro-abstand-4);
    max-width: 100%;
  }

  .portal-signieren-modern .portal-signieren-marke {
    width: 100%;
  }

  .portal-signieren-link {
    padding: 6px var(--bro-abstand-8);
    font-size: var(--bro-schrift-augenbraue-groesse);
    line-height: var(--bro-schrift-augenbraue-zeilenhoehe);
  }

  .portal-signieren-kopfaktionen .leise {
    position: absolute;
    top: var(--bro-abstand-12);
    right: var(--bro-abstand-16);
  }

  .portal-signieren-startbuehne {
    min-height: calc(100dvh - 90px);
    align-items: start;
    padding: 14px;
  }

  .portal-signieren-start {
    padding: 20px;
  }

  .portal-signieren-start h2,
  .portal-signieren-start h1 {
    font-size: calc(var(--bro-schrift-titel-groesse) + 2px);
  }

  .portal-signieren-startliste > li {
    padding: 10px var(--bro-abstand-12);
    gap: var(--bro-abstand-8);
    font-size: var(--bro-schrift-augenbraue-groesse);
  }

  .portal-signieren-startliste small {
    flex-shrink: 1;
  }

  .portal-signieren-arbeitsbereich {
    display: block;
    min-height: calc(100dvh - 90px);
    padding-bottom: 108px;
  }

  .portal-signieren-schritte {
    position: sticky;
    top: var(--signieren-kopfhoehe, 90px);
    z-index: 3;
    min-height: 0;
    max-height: none;
    overflow-x: auto;
    padding: 10px var(--bro-abstand-16);
    border-right: 0;
    border-bottom: 1px solid var(--bro-linie);
  }

  .portal-signieren-schritte :is(.portal-signieren-schild, .portal-signieren-hilfe) {
    display: none;
  }

  .portal-signieren-schritte ol {
    display: flex;
    gap: 6px;
    width: max-content;
  }

  .portal-signieren-schritte li + li {
    margin-top: 0;
  }

  .portal-signieren-schritt {
    align-items: center;
    gap: var(--bro-abstand-4);
    padding: 6px 10px;
    border-radius: var(--bro-konsole-radius-pille);
    background: var(--bro-flaeche-0);
    color: var(--bro-tinte-2);
    white-space: nowrap;
  }

  .portal-signieren-schritt-nr {
    display: inline;
    flex-basis: auto;
    width: auto;
    height: auto;
    border: 0;
    background: transparent;
    color: inherit;
    line-height: var(--bro-schrift-augenbraue-zeilenhoehe);
  }

  .portal-signieren-schritt-text strong {
    font-size: var(--bro-schrift-augenbraue-groesse);
    line-height: var(--bro-schrift-augenbraue-zeilenhoehe);
  }

  .portal-signieren-schritt-text small {
    display: none;
  }

  .portal-signieren-schritt.ist-fertig {
    background: color-mix(in srgb, var(--bro-erfolg) 10%, var(--bro-flaeche-1));
    color: var(--bro-erfolg);
  }

  .portal-signieren-schritt[aria-current="step"] {
    background: var(--bro-akzent);
    color: var(--bro-akzent-tinte);
  }

  .portal-signieren-schritt.ist-fertig .portal-signieren-schritt-nr,
  .portal-signieren-schritt[aria-current="step"] .portal-signieren-schritt-nr {
    background: transparent;
    color: inherit;
  }

  .portal-signieren-inhalte {
    padding: 14px;
  }

  .portal-signieren-modern .portal-signieren-leiste {
    min-height: 0;
    padding: var(--bro-abstand-12) 14px;
    padding-bottom: calc(var(--bro-abstand-12) + env(safe-area-inset-bottom));
  }

  .portal-signieren-leiste-inhalt {
    flex-wrap: wrap;
    gap: var(--bro-abstand-8);
  }

  .portal-signieren-leiste-stand {
    flex: 1 1 100%;
    min-width: 0;
  }

  .portal-signieren-leiste-stand p {
    color: var(--bro-tinte-2);
    font-weight: var(--bro-schrift-klein-gewicht);
  }

  .portal-signieren-leiste-aktionen {
    width: 100%;
    margin: 0;
  }

  .portal-signieren-leiste-aktionen > * {
    flex: 1 1 0;
    padding-inline: var(--bro-abstand-8);
  }

  .portal-signieren-modern .portal-signieren-dialog {
    width: 100%;
    max-width: none;
    max-height: calc(100dvh - 60px);
    margin: auto 0 0;
    padding-bottom: calc(var(--bro-abstand-24) + env(safe-area-inset-bottom));
    border-radius: var(--bro-abstand-16) var(--bro-abstand-16) 0 0;
  }

  .portal-signieren-modern .portal-signieren-zahlung {
    padding: 18px;
  }

  .portal-signieren-zahlungswahl {
    flex-direction: column;
  }

  .portal-signieren-modern .portal-signieren-sepa-felder {
    grid-template-columns: minmax(0, 1fr);
  }

  .portal-signieren-dank .portal-signieren-startbuehne {
    align-items: start;
  }
}

/*
 * 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-signieren-modern .portal-weiterleiten {
  width: min(620px, 100%);
  margin-inline: auto;
  padding-inline: var(--bro-abstand-16);
}

/*
 * „Sie sollen dieses Dokument weitergeben“ (#13330): der Hinweiskasten oben
 * auf der Startbühne, mit dem offenen Formular darin.
 */
.portal-signieren-weitergeben {
  margin: var(--bro-abstand-16) 0;
  padding: var(--bro-abstand-16);
  border: 1px solid var(--bro-linie);
  border-left: 4px solid var(--bro-akzent);
  border-radius: var(--bro-abstand-8);
  background: var(--bro-flaeche-0);
}

.portal-signieren-weitergeben > h3 {
  margin: 0 0 var(--bro-abstand-8);
  font-size: var(--bro-schrift-titel-groesse);
  line-height: var(--bro-schrift-titel-zeilenhoehe);
  font-weight: var(--bro-schrift-titel-gewicht);
}

.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 und zeigt nur sein
   Symbol (#14152). Mit Text brauchte es bis zu 10rem Innenabstand, bei 200 %
   Zoom breiter als der ganze Viewport (WCAG 1.4.10). Der Wortlaut bleibt in
   `aria-label` und `title`, der Platzhalter nennt Emil weiter. */
@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;
    gap: 0;
    padding: var(--bro-abstand-4);
    font-size: 0;
  }

  .portal-kopfsuche:is([data-emil-suche="ab-5-zeichen"], [data-emil-suche="ab-fragezeichen"])
    .portal-kopfsuche-feld {
    padding-inline-end: calc(10px + 12px + 2 * var(--bro-abstand-4) + 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;
}

/* Der Seitentitel ist oft eine Adresse oder ein Name aus der Eingabe (#10795).
   Ein Wort, das breiter ist als die Spalte, bricht um, statt die ganze Seite
   bei 320 px oder 200 % Zoom waagerecht zu verbreitern; `min-width: 0` lässt
   das Flex-Element unter seine Wortbreite schrumpfen. */
.portal-seitenkopf-titel h1 {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.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);
}

/* Mein Bereich (#12459): der große Stempelknopf und die Tagesliste. Auf
   390 px Breite ohne waagerechtes Scrollen — alles bricht um, nichts hat eine
   feste Breite; jeder Knopf mindestens die Berührungsfläche (44 px). */
.mein-bereich {
  display: grid;
  gap: var(--bro-abstand-16);
  min-width: 0;
}

.mein-bereich-stempel {
  display: grid;
  gap: var(--bro-abstand-12);
  text-align: center;
}

/* Startseite von Mein Bereich (#12778, Vorlage Klickdemo): am PC Kennzahlen
   oben, darunter Arbeitszeit heute, Kollegen und Für Sie in drei Spalten. Am
   Handy eine Spalte, die Stempelkarte vorn, die Kennzahlen dahinter. */
.mein-bereich-start {
  display: grid;
  gap: var(--bro-abstand-16);
  min-width: 0;
}

.mein-bereich-start-spalte {
  display: grid;
  gap: var(--bro-abstand-16);
  align-content: start;
  min-width: 0;
}

.mein-bereich-start-stempeln {
  order: -1;
}

@media (min-width: 1280px) {
  .mein-bereich-start {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mein-bereich-start-kennzahlen {
    grid-column: 1 / -1;
  }

  .mein-bereich-start-stempeln {
    order: 0;
  }
}

.mein-bereich-stempel-kopf {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-8);
  align-items: center;
  justify-content: space-between;
  text-align: start;
}

.mein-bereich-kollegen,
.mein-bereich-fuer-sie {
  display: grid;
  gap: var(--bro-abstand-12);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-wrap: anywhere;
}

.mein-bereich-kollege {
  display: flex;
  gap: var(--bro-abstand-12);
  align-items: center;
}

.mein-bereich-kollege > span:last-child {
  display: grid;
}

.mein-bereich-kuerzel {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--bro-beruehrungsflaeche);
  height: var(--bro-beruehrungsflaeche);
  border-radius: 50%;
  background: var(--bro-flaeche-2);
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-fein-groesse);
}

.mein-bereich-kollege-status {
  display: inline-flex;
  align-items: center;
  gap: var(--bro-abstand-4);
  color: var(--bro-tinte-2);
}

.mein-bereich-punkt {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bro-linie-stark);
}

.mein-bereich-punkt-verfuegbar {
  background: var(--bro-erfolg);
}

.mein-bereich-punkt-beschaeftigt {
  background: var(--bro-fehler);
}

.mein-bereich-punkt-abwesend {
  background: var(--bro-warnung);
}

.mein-bereich-fuer-sie-zeile {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-8);
  align-items: center;
  justify-content: space-between;
}

.mein-bereich-fuer-sie-zeile a {
  display: inline-flex;
  align-items: center;
  min-height: var(--bro-beruehrungsflaeche);
}

/* Bescheinigung vom Kinderarzt (#13531): je offene Meldung Zeitraum, Datei und Knopf untereinander. */
.mein-bereich-kind-krank {
  display: grid;
  gap: var(--bro-abstand-12);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mein-bereich-kind-krank-form {
  display: grid;
  gap: var(--bro-abstand-8);
}

.mein-bereich-kind-krank-form label {
  display: grid;
  gap: var(--bro-abstand-8);
  overflow-wrap: anywhere;
}

.mein-bereich-laufzeit strong {
  font-size: var(--bro-schrift-titel-groesse);
}

.mein-bereich-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-8);
  justify-content: center;
}

.mein-bereich-knoepfe form,
.mein-bereich-stempel-form {
  display: grid;
  gap: var(--bro-abstand-12);
  flex: 1 1 10rem;
}

.mein-bereich-knopf {
  min-height: var(--bro-beruehrungsflaeche);
  width: 100%;
}

/* Stempeln am Handy wie die Klickdemo (#12776): Begrüßung, große laufende
   Uhr und ein großer runder Hauptknopf (Kommen bzw. Gehen) mit Symbol. Pause
   und Weiter bleiben gewöhnliche Knöpfe. Am PC bleibt alles kompakt: Der Kopf
   fällt weg, der Hauptknopf ist ein gewöhnlicher großer Knopf, und im
   Kommen-Knopf steht wieder die Uhrzeit (#12814). Nur Tokens. */
.mein-bereich-handy-kopf,
.mein-bereich-knopf-rund .bro-symbol {
  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), (min-width: 768px) and (max-width: 1279px) and (min-height: 480px) and (orientation: landscape) {
  .mein-bereich-handy-kopf {
    display: grid;
    gap: var(--bro-abstand-4);
  }

  .mein-bereich-handy-kopf p {
    margin: 0;
  }

  .mein-bereich-gruss {
    font-size: var(--bro-schrift-titel-groesse);
    font-weight: var(--bro-schrift-titel-gewicht);
  }

  .mein-bereich-grossuhr {
    font-size: var(--bro-schrift-anzeige-groesse);
    font-weight: var(--bro-schrift-anzeige-gewicht);
    line-height: var(--bro-schrift-anzeige-zeilenhoehe);
    letter-spacing: var(--bro-schrift-anzeige-laufweite);
    font-variant-numeric: tabular-nums;
  }

  .mein-bereich-knopf-uhr {
    display: none;
  }

  .mein-bereich-stempel-form:has(.mein-bereich-knopf-rund) {
    justify-items: center;
  }

  .mein-bereich-knopf-rund {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--bro-abstand-4);
    width: calc(var(--bro-beruehrungsflaeche) * 3);
    height: calc(var(--bro-beruehrungsflaeche) * 3);
    padding: 0;
    border-radius: var(--bro-radius-rund);
  }

  .mein-bereich-knopf-rund .bro-symbol {
    display: block;
    width: var(--bro-abstand-32);
    height: var(--bro-abstand-32);
  }

  .mein-bereich-knopf-kommen {
    border-color: var(--bro-erfolg);
    background: var(--bro-erfolg);
    color: var(--bro-akzent-tinte);
  }
}

.mein-bereich-orte {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-8);
  justify-content: center;
  border: 0;
  padding: 0;
  margin: 0;
}

.mein-bereich-ort {
  display: inline-flex;
  align-items: center;
  gap: var(--bro-abstand-4);
  min-height: var(--bro-beruehrungsflaeche);
}

.mein-bereich-bilanz {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: var(--bro-abstand-8);
  margin: 0;
}

.mein-bereich-bilanz dt {
  color: var(--bro-tinte-2);
}

.mein-bereich-bilanz dd {
  margin: 0;
}

.mein-bereich-tage,
.mein-bereich-liste {
  display: grid;
  gap: var(--bro-abstand-12);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-wrap: anywhere;
}

.mein-bereich-tag-kopf {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-8);
  justify-content: space-between;
}

.mein-bereich-umschalter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-8);
}

.mein-bereich-umschalter a,
.mein-bereich-tag a,
.mein-bereich-liste a {
  display: inline-flex;
  align-items: center;
  min-height: var(--bro-beruehrungsflaeche);
}

/* Meine Zeiten (#12780): Hinweis auf fehlendes Gehen, Monatskopf mit PDF und
   die Monatstabelle. Die Tabelle scrollt in ihrer Karte, nie die Seite. */
.mein-bereich-hinweis,
.mein-bereich-monatskopf {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-12);
  align-items: center;
  justify-content: space-between;
}

.mein-bereich-hinweis {
  border-color: var(--bro-warnung);
}

.mein-bereich-hinweis p,
.mein-bereich-monatskopf p {
  flex: 1 1 16rem;
  margin: 0;
}

.mein-bereich-hinweis .mein-bereich-knopf,
.mein-bereich-monatskopf .mein-bereich-knopf {
  width: auto;
}

.mein-bereich-monat th[scope="row"] {
  white-space: nowrap;
}

/* Design Modern ohne `ansicht` (#13478): Die Seite trägt den Monat für den PC
   und die Woche für das Handy; je Gerät ist genau einer sichtbar. Die Hüllen
   selbst sind keine Kästen, ihre Karten stehen im Raster von `.mein-bereich`. */
.mein-bereich-zeiten-pc {
  display: contents;
}

.mein-bereich-zeiten-handy {
  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) {
  .mein-bereich-zeiten-pc {
    display: none;
  }

  .mein-bereich-zeiten-handy {
    display: contents;
  }
}

.mein-bereich-zahl {
  text-align: end;
  font-variant-numeric: tabular-nums;
}

.mein-bereich-feld {
  display: grid;
  gap: var(--bro-abstand-4);
  margin-block-end: var(--bro-abstand-12);
}

/* Spesen (#12463): das Belegfoto passt in die Karte, Angaben als Raster. */
.spesen-beleg-bild {
  display: block;
  max-inline-size: 100%;
  max-block-size: 60vh;
  border-radius: var(--bro-radius-s);
}

/* Spesen prüfen im Design Modern (#13141): das Belegfoto klein in der Zeile. */
.spesen-beleg-zeile {
  display: block;
  inline-size: calc(var(--bro-abstand-16) + var(--bro-abstand-32));
  block-size: calc(var(--bro-abstand-16) + var(--bro-abstand-32));
  object-fit: cover;
  border-radius: var(--bro-radius-s);
}

.spesen-angaben {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--bro-abstand-4) var(--bro-abstand-12);
}

/* Die eigene Leiste unten (`meinBereichLeiste`): nur auf schmalen Geräten
   und nur in Rahmen ohne `portal-unterleiste` (Vitala, Beauty) — der
   Standard-Rahmen trägt dieselben Ziele in seiner unteren Leiste. */
.mein-bereich-leiste {
  display: none;
}

.mein-bereich-leiste-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;
}

.mein-bereich-leiste-punkt .bro-symbol {
  width: 20px;
  height: 20px;
}

.mein-bereich-leiste-punkt[aria-current="page"] {
  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) {
  body:not(:has(.portal-unterleiste)) .mein-bereich-leiste {
    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);
  }

  body:not(:has(.portal-unterleiste)) .mein-bereich {
    padding-bottom: calc(var(--bro-beruehrungsflaeche) + var(--bro-abstand-16));
  }
}

/* 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/#10471, Alt `_TeamPresenceWidget.cshtml`): Foto oder 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 Rückfallkürzels lesbar bleiben. Verfügbare Fotos
     liegen dekorativ über dem unveränderten Kürzel (#10471). */
  padding-left: 3px;
}

/* Im Kopf 32 px statt 28, damit man die Gesichter erkennt (Variante C,
   Nasri 25.10.2026); die Überlappung schrumpft dafür auf 3 px. */
.portal-team-ampel-stapel .portal-team-ampel-avatar {
  width: 32px;
  height: 32px;
  margin-left: -3px;
  font-size: var(--bro-schrift-fein-groesse);
}

/* In der aufgeklappten Liste ist Platz: 40 px. */
.portal-team-ampel-zeile .portal-team-ampel-avatar {
  width: 40px;
  height: 40px;
}

.portal-team-ampel-avatar {
  position: relative;
  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);
  /* Schneidet das herangezoomte Foto am Kreis ab; der Ring liegt außen. */
  overflow: hidden;
}

/* Teams-Fotos haben viel Rand um Kopf und Schultern. Der Zoom holt das
   Gesicht heran, der Ursprung liegt auf Augenhöhe typischer Teams-Fotos. */
.portal-team-ampel-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  transform: scale(1.45);
  transform-origin: 50% 36%;
}

.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);
}

/* Eingabe mit fester Einheit rechts im Feld, etwa die Deckenhöhe in „m“
   (#13817): Der Zusatz steht über dem rechten Innenabstand und nimmt keine
   Klicks an, damit ein Tippen darauf das Feld trifft. */
.portal-feld-mit-einheit {
  position: relative;
  display: block;
  margin-top: var(--bro-abstand-4);
}

.portal-feld-mit-einheit > .bro-eingabefeld {
  width: 100%;
  padding-right: var(--bro-abstand-32);
}

.portal-feld-einheit {
  position: absolute;
  top: 50%;
  right: var(--bro-abstand-12);
  transform: translateY(-50%);
  color: var(--bro-tinte-2);
  pointer-events: none;
}

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

/* Einladung verschicken (#11449): Der Wartezustand nach dem Klick. Er steht,
   sobald abgeschickt ist, auch während der Passkey-Bestätigung. Der Kreisel
   dreht nur, wo Bewegung erwünscht ist; sonst bleibt der Text allein. */
.portal-einladung-versand {
  flex-wrap: wrap;
  align-items: center;
}

/* In der Schublade nennt deren Kopf schon „Einladung“; die Seite darin zeigt
   ihren eigenen Seitenkopf deshalb nicht noch einmal. Vollständig geöffnet
   bleibt er stehen. */
html[data-eingebettet] .portal-inhalt:has([data-einladung-flaeche]) .portal-seitenkopf {
  display: none;
}

/* Akten in der Schublade (Wagen, Fahrer, Mitarbeiter, Fahrgast, Einrichtung):
   Der Schubladenkopf nennt die Akte schon. Seitentitel und gleichlautender
   Boxkopf entfallen deshalb, ebenso alles mit `data-nicht-im-fenster`
   (Rückweg, Flottenreiter, doppelte Aktion). Untertitel, Aktionen und die
   eigenen Reiter der Akte bleiben; vollständig geöffnet bleibt alles. */
html[data-eingebettet] .portal-inhalt:has([data-akte]) .portal-seitenkopf-kennzeile,
html[data-eingebettet] .portal-inhalt:has([data-akte]) .portal-seitenkopf-name,
html[data-eingebettet] [data-akte] > .bb-kopfleiste > .bb-kachel,
html[data-eingebettet] [data-akte] > .bb-kopfleiste > h2,
html[data-eingebettet] [data-akte] > .bb-kopfleiste:not(:has(.bb-kopfleiste-zusatz)),
html[data-eingebettet] [data-nicht-im-fenster] {
  display: none;
}

html[data-eingebettet] [data-akte] > .bb-kopfleiste:has(.bb-kopfleiste-zusatz) {
  justify-content: flex-end;
}

.portal-einladung-warten {
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-8);
  margin: 0;
  color: var(--bro-tinte-1);
  font-weight: var(--bro-schrift-betont-gewicht);
}

.portal-einladung-warten[hidden] {
  display: none;
}

.portal-einladung-kreisel {
  width: var(--bro-abstand-16);
  height: var(--bro-abstand-16);
  border: 2px solid var(--bro-linie);
  border-top-color: var(--bro-akzent);
  border-radius: var(--bro-radius-rund);
}

@media (prefers-reduced-motion: no-preference) {
  .portal-einladung-kreisel {
    animation: portal-einladung-dreht 0.8s linear infinite;
  }
}

@keyframes portal-einladung-dreht {
  to {
    transform: rotate(360deg);
  }
}

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

/* Newsletter-Arbeitsplatz: Entwürfe, Löschen mit Rückfrage, „Läuft von allein" (#11192). */
.portal-kundenbindung-entwuerfe,
.portal-kundenbindung-automatik {
  margin-top: var(--bro-abstand-12);
}

.portal-kundenbindung-entwurf-loeschen {
  margin-top: var(--bro-abstand-12);
}

.portal-kundenbindung-schalter {
  display: flex;
  align-items: flex-start;
  gap: var(--bro-abstand-8);
}

.portal-kundenbindung-schalter > span {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
}

/* 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-aktionspreis,
.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.
   Ebenso der Aktionspreis (#11036) zwischen Buchungsangaben und Bild. */
.portal-leistung-buchungsangaben,
.portal-leistung-aktionspreis,
.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-unterschriften,
.portal-dokumente-kundendokumente {
  display: grid;
  gap: var(--bro-abstand-12);
}
.portal-dokumente-angebote h2,
.portal-dokumente-vertraege h2,
.portal-dokumente-unterschriften 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 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);
}

/* #10767: Das bestehende Verzeichnisformular bleibt auch bei Zoom unterhalb
   der schmalen Geräteklasse bedienbar. Lange deutsche Wörter dürfen sowohl
   im Themenkopf als auch im Speichern-Knopf innerhalb der Region umbrechen. */
html[data-design="modern"] .portal-inhalt:has(#verarbeitungsverzeichnis) {
  overflow-wrap: anywhere;
}

html[data-design="modern"]
  #verarbeitungsverzeichnis
  :is(.portal-formular, .portal-feld, .portal-formular-aktionen, .portal-feld-eingabe) {
  min-width: 0;
  max-width: 100%;
}

html[data-design="modern"] #verarbeitungsverzeichnis .portal-formular-aktionen > .bro-knopf {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* #10767: Bei Zoom darf die Original-Markengruppe unterhalb der verfügbaren
   Inhaltsbreite umbrechen. Beide Logos bleiben vollständig statt abgeschnitten. */
html[data-design="modern"]:has(#verarbeitungsverzeichnis) .mo-fuss-marken {
  flex-wrap: wrap;
  min-width: 0;
  max-width: 100%;
}

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

/*
 * Laufzeit-Zeitstrahl im Kopf der Modern-Akte (#13770): eine geordnete Liste
 * auf einer Linie, ohne Skript lesbar. Die Farbe der Marke „Kündigen bis“
 * kommt allein aus der Statuspille; „heute“ trägt den Akzent.
 */
.portal-vertrag-laufzeit h2 {
  margin: 0 0 var(--bro-abstand-12);
}

.portal-vertrag-zeitstrahl {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--bro-abstand-12) var(--bro-abstand-24);
  margin: 0 0 var(--bro-abstand-12);
  padding: var(--bro-abstand-12) 0 0;
  border-top: 2px solid var(--bro-linie);
  list-style: none;
}

.portal-vertrag-zeitstrahl li {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
}

.portal-vertrag-zeitstrahl li[aria-current="date"] strong {
  color: var(--bro-akzent-text);
}

.portal-vertrag-laufzeit p {
  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);
}

/*
 * Positionen und Zahlweg in der Vertrags-Anlage (#11082). Die Feldgruppen
 * tragen Klassen als Locator-Anker; mit Klasse greift die Grundgestalt für
 * `fieldset:not([class])` nicht mehr, deshalb hier dieselbe Gestalt wie
 * `.portal-formular-gruppe`: Rahmen mit Titel, Felder darin gestapelt. Die
 * einzelne Position sitzt als eigener Rahmen im Positionsblock.
 */
.portal-vertrag-anlage-positionen,
.portal-vertrag-anlage-position,
.portal-vertrag-anlage-zahlweg {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  min-width: 0;
  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);
}

.portal-vertrag-anlage-positionen > legend,
.portal-vertrag-anlage-position > legend,
.portal-vertrag-anlage-zahlweg > legend {
  padding: 0 var(--bro-abstand-4);
}

.portal-vertrag-anlage-positionen > p,
.portal-vertrag-anlage-zahlweg > p {
  margin: 0;
}

/*
 * Summen, Näherungshinweis und Rechnungs-Mail in der Vertrags-Anlage (#11186).
 * Die Summen sind ein eigener Rahmen wie die Positionen; die Wertepaare stehen
 * als zweispaltiges Raster. Näherung und Rechnungs-Mail sind Locator-Anker
 * der Live-Anzeige und tragen nur Abstände.
 */
.portal-vertrag-anlage-summen {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  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-vertrag-anlage-summen dl {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--bro-abstand-4) var(--bro-abstand-16);
  margin: 0;
}

.portal-vertrag-anlage-summen dd {
  margin: 0;
  text-align: right;
}

.portal-vertrag-anlage-naeherung,
.portal-vertrag-anlage-rechnungsmail {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
}

.portal-vertrag-anlage-naeherung p,
.portal-vertrag-anlage-naeherung ul,
.portal-vertrag-anlage-rechnungsmail p {
  margin: 0;
}

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

/* Startseite „Heute“ unter Modern (#12896, Vorschau `seiteHeute`): links
   „Zu erledigen“, rechts „Heute vor Ort“ und „Morgen“; schmal untereinander. */
.portal-vermietung-heute-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: var(--bro-abstand-16);
  margin-top: var(--bro-abstand-16);
  align-items: start;
}

.portal-vermietung-heute-spalte {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-16);
  min-width: 0;
}

.portal-vermietung-zweit {
  margin: 0;
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
}

.portal-vermietung-zweit[data-warnung] {
  color: var(--bro-warnung);
}

.portal-vermietung-aufgabe {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--bro-abstand-12);
  padding: var(--bro-abstand-12) 0;
  border-bottom: 1px solid var(--bro-linie);
}

.portal-vermietung-aufgabe:last-child {
  border-bottom: 0;
}

.portal-vermietung-aufgabe-text {
  flex: 1 1 12rem;
  min-width: 0;
}

.portal-vermietung-dringlichkeit {
  flex: none;
  width: var(--bro-abstand-8);
  height: var(--bro-abstand-8);
  margin-top: var(--bro-abstand-8);
  border-radius: var(--bro-radius-rund);
  background: var(--bro-tinte-3);
}

.portal-vermietung-aufgabe[data-dringlichkeit="hoch"] .portal-vermietung-dringlichkeit {
  background: var(--bro-fehler);
}

.portal-vermietung-aufgabe[data-dringlichkeit="mittel"] .portal-vermietung-dringlichkeit {
  background: var(--bro-warnung);
}

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

.portal-vermietung-zeitpunkt {
  display: flex;
  gap: var(--bro-abstand-12);
}

.portal-vermietung-uhr {
  flex: none;
  min-width: 3.5em;
  color: var(--bro-tinte-2);
  font-variant-numeric: tabular-nums;
}

/* Die Pflege einer Unterkunft in ihrer Akte (#11210): die Formulare
   untereinander, mit Abstand zum Kopf der Akte. */
.portal-unterkunftsakte {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-16);
  margin-top: var(--bro-abstand-24);
}

.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);
}

/* Modern (#12892, Vorschau „Kalender“): Zeitraum und Belegung links, die
 * Kanalchips rechts in derselben Zeile über dem Raster. */
.portal-kalender-modern .portal-kalender-kopf {
  align-items: center;
}

.portal-kalender-modern .portal-kalender-kanalfilter {
  margin-left: auto;
}

.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);
}

/* Eine offene Anfrage (#12892, Entschieden (Nasri, 01.11.2026, #12885
 * Punkt 1)): gestrichelt in der Kanalfarbe, ohne Füllung — sie belegt nichts. */
.portal-kalender-balken--anfrage {
  border-style: dashed;
  background: var(--bro-flaeche-1);
}

/* Der Balken, dessen Buchung gerade in der Schublade offen ist (#12892). */
.portal-kalender-balken[data-fenster-gewaehlt="ja"] {
  outline: 2px solid var(--bro-akzent);
  outline-offset: 1px;
  z-index: 2;
}

/* Eine kurze Lücke (#12892): gestrichelt über den freien Nächten, unter den
 * Balken, damit eine offene Anfrage darüber lesbar bleibt. */
.portal-kalender-luecke {
  z-index: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  margin: var(--bro-abstand-4) 1px;
  overflow: hidden;
  border: 1px dashed var(--bro-akzent);
  border-radius: var(--bro-radius-s);
  background: var(--bro-akzent-flaeche);
  color: var(--bro-akzent);
  font-size: var(--bro-schrift-klein-groesse);
  white-space: nowrap;
  text-decoration: none;
}

.portal-kalender-muster.portal-kalender-luecke {
  display: inline-block;
  width: 1.375rem;
  height: 0.875rem;
  margin: 0;
}

a.portal-kalender-luecke:hover,
a.portal-kalender-luecke:focus-visible {
  filter: brightness(0.96);
}

.portal-kalender-kanalfilter .portal-kalender-muster {
  width: 0.625rem;
  height: 0.625rem;
  margin-right: var(--bro-abstand-4);
  border-radius: var(--bro-radius-s);
}

.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;
}

/*
 * Die Gesamtliste über alle Objekte (#11239): sieben Spalten, die in der
 * Tabellenkarte waagerecht rollen (`portal-tabelle-karte`). Beträge stehen
 * rechtsbündig; ein negativer Auszahlungsentwurf trägt die Fehlerfarbe aus
 * den Tokens (Alt: rot, wenn negativ, `Index.cshtml:138`).
 */
.portal-eigentuemer-gesamt td:not(:nth-child(2)) {
  text-align: right;
  white-space: nowrap;
}

.portal-eigentuemer-gesamt td[data-negativ] {
  color: var(--bro-fehler);
}

.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);
}

/*
 * Der Arbeitslink ohne Konto (#11216): im Büro der Bereich „Arbeitslink“ der
 * Aufgabe, für die Reinigungskraft eine eigene Seite ohne App-Schale wie die
 * Bewertungsseite (#2876). Nur Tokens, keine festen Werte (B14.7).
 */
.portal-reinigungsbuero-arbeitslink-bereich {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  margin-top: var(--bro-abstand-16);
}

.portal-reinigungsbuero-arbeitslink,
.portal-reinigungsbuero-arbeitslink-widerrufen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-8) var(--bro-abstand-16);
}

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

.portal-arbeitslink {
  margin: var(--bro-abstand-32) auto;
  max-width: 32rem;
}

.portal-arbeitslink-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-arbeitslink-felder dd {
  margin: 0;
}

.portal-arbeitslink-checkliste {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  padding-left: var(--bro-abstand-16);
}

.portal-arbeitslink-erledigt {
  margin-top: var(--bro-abstand-16);
}

/*
 * Abhaken, Foto und Melden im Arbeitslink (#12888): Jeder Punkt ist ein
 * eigenes Formular mit einem Knopf über die ganze Breite — am Telefon die
 * größte Tippfläche, ohne Skript.
 */
.portal-arbeitslink-haken {
  margin: 0;
}

.portal-arbeitslink-haken button {
  width: 100%;
  text-align: start;
}

.portal-arbeitslink-fotoformular,
.portal-arbeitslink-meldung {
  margin-top: var(--bro-abstand-8);
}

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

/*
 * „Foto anhängen“ im Antwortformular (#11234). Mit Klasse greift die
 * Grundgestalt für `fieldset:not([class])` nicht mehr, deshalb hier dieselbe
 * Gestalt: Rahmen mit Titel, Felder darin gestapelt.
 */
.portal-nachrichten-foto {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  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-nachrichten-foto > legend {
  padding: 0 var(--bro-abstand-4);
  font-weight: var(--bro-schrift-betont-gewicht);
}

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

/*
 * Das Projekt-Board (#11076): Spalten nach Status, nebeneinander und auf
 * schmalen Geräten waagrecht scrollbar — dieselbe Bauart wie das Kanban des
 * Vertriebs (#9034). Ohne JavaScript bleibt die Statuswahl an jeder Karte
 * die Bedienung; Ziehen und Ablegen schickt nur dasselbe Formular ab.
 */
.portal-projekt-board {
  display: flex;
  gap: var(--bro-abstand-12);
  overflow-x: auto;
  align-items: stretch;
}

.portal-projekt-board-spalte {
  display: flex;
  flex: 1 0 14rem;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  min-width: 0;
  padding: var(--bro-abstand-12);
  background: var(--bro-flaeche-0);
  border-radius: var(--bro-radius-m);
}

.portal-projekt-board-spalte h4 {
  margin: 0;
}

.portal-projekt-board-liste {
  display: grid;
  gap: var(--bro-abstand-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.portal-projekt-board-karte {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
  padding: var(--bro-abstand-8);
  background: var(--bro-flaeche-1);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
}

.portal-projekt-board-karte[draggable="true"] {
  cursor: grab;
}

.portal-projekt-board-status {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-4);
  align-items: center;
}

/* Die Zeitmessung an einer Aufgabe (#11076). */
.portal-aufgaben-zeit {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  margin-top: var(--bro-abstand-16);
}

.portal-aufgaben-zeit-laeuft {
  display: inline-flex;
  align-items: center;
  gap: var(--bro-abstand-8);
  margin: 0;
}

.portal-aufgaben-zeit-personen {
  display: grid;
  grid-template-columns: max-content max-content;
  gap: var(--bro-abstand-4) var(--bro-abstand-16);
  margin: 0;
}

.portal-aufgaben-zeit-personen dd {
  margin: 0;
}

.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);
}

/* Hinweis auf die Kontakt-Ereignisse des Einbau-Stücks (#14155). */
.portal-ziel-kontakt-hinweis {
  margin: 0;
  color: var(--bro-tinte-2);
}

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

/* Kampagnen (#11179): Liste, Anlegen, Detail und Zustand untereinander. */
.portal-kampagnen,
.portal-kampagne-detail {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-16);
}
.portal-kampagne-anlegen,
.portal-kampagne-bearbeiten,
.portal-kampagne-zustand {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
}
.portal-kampagnen-liste {
  width: 100%;
}
.portal-kampagne-beendet {
  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;
}

/* Gastgeberstimme, Antwortverhalten und Direktbucher-Abschlag (#11247). Die
   Karten bringen ihre Gestalt aus `bro-karte` mit; hier stehen nur Abstand und
   Reihung. Die Klassen sind zugleich die Anker, an denen ein Locator SEIN
   Formular greift — die Gedächtnisseite trägt je Wohnung mehrere Formulare. */

.portal-gedaechtnis-stimme,
.portal-antwortverhalten-formular,
.portal-antwortverhalten-objektwahl,
.portal-antwortverhalten-betrieb,
.portal-buchungsseiten-direktabschlag-formular {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  margin: 0;
}

.portal-antwortverhalten,
.portal-buchungsseite-direktanfragen,
.portal-buchungsseiten-direktabschlag {
  margin-bottom: var(--bro-abstand-16);
}

/* #12897: „Vorgabe übernehmen“ / „abweichend“ je Wohnung, wie die Arbeitsweise. */
.portal-antwortverhalten-einstellung,
.portal-antwortverhalten-arbeitsweise,
.portal-antwortverhalten-themen {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  margin: 0;
  padding: 0;
  border: 0;
}

.portal-antwortverhalten-modus,
.portal-antwortverhalten-thema,
.portal-gedaechtnis-emojis {
  display: flex;
  gap: var(--bro-abstand-8);
  align-items: baseline;
}

.portal-antwortverhalten-warnung {
  margin: var(--bro-abstand-8) 0;
}

.portal-entwurf-stimme {
  margin: 0 0 var(--bro-abstand-8);
}
/* 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);
}

/* Kunden-Websites (#12982): die eingebettete Website im Reiter „Website
   ansehen“. Volle Breite, Seitenverhältnis eines Bildschirms; der Rand kommt
   aus den Tokens wie bei jeder Karte. */
.portal-website-rahmen {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-s);
}

/* Das Bildschirmfoto statt des Rahmens, wenn die Website keine Einbettung
   erlaubt (#13152): nie breiter als die Karte, derselbe Rand wie der Rahmen. */
.portal-website-foto {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
}

.portal-website-foto img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-s);
}

/* Agentur-Cockpit (#13861): „Heute wichtig“ als Liste — Pille, Text und
   Sprung in einer Zeile, auf schmalen Geräten umbrechend. Die Klassen sind
   zugleich Anker für E2E-Locators (Hausregel, #1686). */
.portal-agentur-wichtig-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
}

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

.portal-agentur-wichtig > div {
  flex: 1 1 16rem;
  min-width: 0;
}

.portal-agentur-nicht-geprueft {
  margin: 0;
  padding-left: 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);
}

/* Checkliste zum Abhaken und Nachweisfoto auf der Abreisekarte (#12888). */
.portal-reinigung-checkliste {
  margin-top: var(--bro-abstand-8);
}

.portal-reinigung-checkliste ul {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  padding-left: 0;
  list-style: none;
}

.portal-reinigung-haken {
  margin: 0;
}

.portal-reinigung-haken button {
  width: 100%;
  text-align: start;
}

.portal-reinigung-nachweisfoto {
  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;
}

/* Montage im Seitenmuster (#10795): Die Hinweissätze der Reiter tragen lange
   Komposita („Wohnungsansicht“). Bei 320 px und 200 % Zoom bleiben in der Box
   rund 80 CSS-px; ohne Umbruch verbreitert ein solches Wort die ganze Seite.
   Nur direkte Absätze (seit #11794 auch die des Schrittinhalts): Tabellen
   scrollen weiter in ihrer eigenen Karte. */
[data-montage-reiter] .bb-box-inhalt > p,
[data-montage-reiter] .gf-schritt-inhalt > p {
  overflow-wrap: anywhere;
}

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

/*
 * #13444: Das feste Partnermenü steht auf jeder Partnerseite gleich. Am
 * Telefon bricht es um, statt die Seite seitlich rollen zu lassen.
 */
.portal-glasfaser-partner-menue {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-8);
  min-width: 0;
}

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

/* Im Fenster unter „Modern“ (#13501) untereinander, wie „Buchung anlegen“. */
.portal-vermietung-sperrzeit-formular[data-gestapelt] {
  display: grid;
  align-items: stretch;
  justify-items: start;
}

.portal-vermietung-sperrzeit-formular[data-gestapelt] > select,
.portal-vermietung-sperrzeit-formular[data-gestapelt] > input {
  justify-self: stretch;
}

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

/* Die Absenderfirmen des Betriebs als geblätterte Liste (#11146): je Firma
   ein Eintrag mit Name, Zustand und den Knöpfen, gestapelt ohne Aufzählungszeichen. */
.portal-absenderfirmen {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
  margin: 0;
  padding: 0;
  list-style: none;
}

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

/* Die Einzelansicht eines abgeglichenen Termins (#11076). */
.portal-kalender-termin {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--bro-abstand-4) var(--bro-abstand-16);
  margin: 0;
}

.portal-kalender-termin dt {
  color: var(--bro-tinte-2);
}

.portal-kalender-termin dd {
  margin: 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.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)
  );
}

/*
   Firmenmarke auf der Seite „Liquidität 13 Wochen“ (#14012): Farbe UND
   Kürzel, nie nur Farbe (Dach #8649). Die Farbe ist der geprüfte Akzent der
   Firma (`--portal-gruppen-farbe`, nur `#rrggbb`); ohne ihn der Rand im Token.
*/
.portal-gruppen-marke {
  display: inline-block;
  padding: 0 0.4em;
  border-left: 0.3em solid var(--portal-gruppen-farbe, var(--bro-linie));
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.portal-gruppen-liquiditaet-firma + .portal-gruppen-liquiditaet-firma {
  margin-top: 0.75rem;
}

.portal-gruppen-liquiditaet-firma > summary {
  cursor: pointer;
}

/* „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,
.portal-terminzahlung {
  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%;
}
/* #10763: Die Buchhaltungsgruppe nutzt bereits die gemeinsame Box. Die
   statischen Einstellungszellen müssen darin umbrechen statt am rechten
   Rand zu verschwinden; echte Fachlisten behalten ihre Scrollregion. */
html[data-design="modern"] .portal-einstellungen-gruppe[data-gruppe="/einstellungen/buchhaltung"] {
  padding: 0;
  border: 0;
  background: none;
}
.portal-einstellungen-gruppe[data-gruppe="/einstellungen/buchhaltung"]
  > .bb-box
  > .bb-box-inhalt:has(> .portal-tabelle-karte),
.portal-einstellungen-gruppe[data-gruppe="/einstellungen/buchhaltung"]
  > .bb-box
  > .bb-box-inhalt
  > .portal-tabelle-karte {
  padding: 0;
}
.portal-einstellungen-gruppe[data-gruppe="/einstellungen/buchhaltung"] .portal-einstellungen-liste {
  table-layout: fixed;
}
.portal-einstellungen-gruppe[data-gruppe="/einstellungen/buchhaltung"]
  .portal-einstellungen-liste
  :is(th, td) {
  white-space: normal;
  overflow-wrap: anywhere;
}
/* #10763: Nur der Buchhaltungsverbraucher lässt die vorhandene Schale bei
   vergrößertem Text intrinsisch umbrechen. Keine Aktion wird entfernt und
   keine Überbreite verdeckt. Der generische Markenfooter bleibt bei W6
   (#10786/PR10973); dieser enge Verbraucherscope gilt bis zu dessen regulärer
   Lieferung über main (Abstimmung #10763/6361554132, #10544/6361554578). */
html[data-rahmen="modern"]:has(
    .portal-einstellungen-gruppe[data-gruppe="/einstellungen/buchhaltung"]
  )
  :is(
    .mo-kopf,
    .mo-kopf-aktionen,
    .portal-inhalt > .portal-bereich,
    .portal-bereich-knopf,
    .mo-fuss-marken
  ) {
  flex-wrap: wrap;
}
html[data-rahmen="modern"]:has(
    .portal-einstellungen-gruppe[data-gruppe="/einstellungen/buchhaltung"]
  )
  :is(
    .mo-kopf-aktionen,
    .mo-kopf .portal-nutzer-menue,
    .portal-seitenkopf-aktionen,
    .portal-seitenkopf-aktionen > .bro-knopf,
    .portal-inhalt > .portal-bereich,
    .portal-bereich-menue,
    .portal-bereich-knopf,
    .portal-bereich-knopf > span,
    .mo-fuss-marken
  ) {
  min-width: 0;
  max-width: 100%;
}
html[data-rahmen="modern"]:has(
    .portal-einstellungen-gruppe[data-gruppe="/einstellungen/buchhaltung"]
  )
  .mo-kopf
  .portal-nutzer {
  max-width: min(100%, var(--bro-modern-suche-breite));
}
html[data-rahmen="modern"]:has(
    .portal-einstellungen-gruppe[data-gruppe="/einstellungen/buchhaltung"]
  )
  :is(.portal-seitenkopf-titel h1, .portal-seitenkopf h1) {
  max-width: 100%;
  overflow-wrap: anywhere;
}
html[data-rahmen="modern"]:has(
    .portal-einstellungen-gruppe[data-gruppe="/einstellungen/buchhaltung"]
  )
  :is(
    .portal-seitenkopf-aktionen > .bro-knopf,
    .portal-bereich-knopf,
    .portal-bereich-knopf > span
  ) {
  overflow-wrap: anywhere;
}
html[data-rahmen="modern"]:has(
    .portal-einstellungen-gruppe[data-gruppe="/einstellungen/buchhaltung"]
  )
  .mo-fuss-marken {
  min-inline-size: 0;
}
/* Der Bereichswechsler orientiert sein geöffnetes Menü an der tatsächlich
   verfügbaren Zeile. CSS-Textzoom ändert die Geräteklasse nicht. */
html[data-rahmen="modern"]:has(
    .portal-einstellungen-gruppe[data-gruppe="/einstellungen/buchhaltung"]
  )
  .portal-inhalt
  > .portal-bereich {
  position: relative;
}
html[data-rahmen="modern"]:has(
    .portal-einstellungen-gruppe[data-gruppe="/einstellungen/buchhaltung"]
  )
  .portal-bereich-menue {
  position: static;
}
html[data-rahmen="modern"]:has(
    .portal-einstellungen-gruppe[data-gruppe="/einstellungen/buchhaltung"]
  )
  .portal-bereich-liste {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  width: 100%;
  max-width: 100%;
}
html[data-rahmen="modern"]:has(
    .portal-einstellungen-gruppe[data-gruppe="/einstellungen/buchhaltung"]
  )
  :is(.portal-bereich-titel, .portal-bereich-gruppe, .portal-bereich-punkt) {
  overflow-wrap: anywhere;
}
.portal-einstellungen-gruppe[data-gruppe="/einstellungen/buchhaltung"],
.portal-einstellungen-gruppe[data-gruppe="/einstellungen/buchhaltung"]
  :is(.bb-box, .bb-box-inhalt, .bb-reiter) {
  min-width: 0;
  max-width: 100%;
}
.portal-einstellungen-gruppe[data-gruppe="/einstellungen/buchhaltung"]
  .portal-einstellungen-liste
  .bro-knopf {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.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;
  }
  /* #10765: Die statische Liste wird vollständig gestapelt; verbleibende
     Tabellenzeilengruppen erzwingen sonst eine anonyme, überbreite Zelle.
     Lange Beschreibungen und Abschnittstitel müssen lesbar umbrechen. */
  .portal-einstellungen-liste,
  .portal-einstellungen-liste tbody,
  .portal-einstellungen-liste tr,
  .portal-einstellungen-liste td,
  .portal-einstellungen-liste th {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  html[data-design="modern"] .portal-einstellungen-liste .portal-einstellungen-gruppenzeile th {
    height: auto;
  }
  /* #10763: Der umbrechende Gruppenhinweis braucht seine tatsächliche
     Texthöhe; die Modern-Kopfhöhe für Tabellen würde den Folgeeintrag überlagern. */
  .portal-einstellungen-gruppe[data-gruppe="/einstellungen/buchhaltung"]
    .portal-einstellungen-liste
    .portal-einstellungen-gruppenzeile
    > th {
    height: auto;
  }
  .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);
}
/* Einrichten-Checkliste (#9112, Alt `Einrichten.cshtml`): dieselbe Bauart
   wie „Startklar“, über „Bro lernt“. Nur Tokens. */
.kf-einrichten-checkliste {
  margin-bottom: var(--bro-abstand-24);
}
.kf-einrichten-checkliste > progress {
  width: 100%;
  margin: var(--bro-abstand-8) 0 var(--bro-abstand-16);
}
.kf-einrichten-schritte {
  display: grid;
  gap: var(--bro-abstand-12);
  margin: 0;
  padding: 0;
  list-style: none;
}
.kf-einrichten-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-einrichten-text > p {
  margin: 0 0 var(--bro-abstand-4);
}
.kf-einrichten-text {
  min-width: 0;
  overflow-x: auto;
}
.kf-einrichten-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-einrichten-zeichen--fertig {
  border: 0;
  color: var(--bro-erfolg);
}
.kf-einrichten-zeitfenster input[type="text"] {
  max-width: 7rem;
}
.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);
}
/* Gespeicherte Filter und „Ansicht anpassen“ (#10872). */
.kf-ls-meine-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-8) var(--bro-abstand-16);
  font-size: var(--bro-schrift-klein-groesse);
}
.kf-ls-meine-filter > .kf-ls-chips {
  margin: 0;
}
.kf-ansicht-filter {
  margin: 0;
  padding-left: var(--bro-abstand-16);
}
.kf-ansicht-filter form {
  display: inline;
  margin-left: var(--bro-abstand-8);
}
.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;
}
/* #10814: nur die eigene Modern-Fläche, ohne gemeinsame Tabellen/Formulare zu ändern. */
.kf-logik-modern {
  min-width: 0;
}
.kf-logik-modern .kf-logik-bereich {
  min-width: 0;
}
.kf-logik-rollbereich {
  max-width: 100%;
  overflow-x: auto;
}
.kf-logik-modern .kf-logik-tabelle {
  width: 100%;
  /* Vier Vergleichsspalten bleiben lesbar; schmale Ansichten rollen im
     vorhandenen fokussierbaren Bereich statt jedes Wort zu zerbrechen. */
  min-width: 40rem;
}
.kf-logik-modern .kf-logik-tabelle th,
.kf-logik-modern .kf-logik-tabelle td {
  overflow-wrap: anywhere;
  white-space: normal;
}
.kf-logik-modern .kf-logik-wahl button {
  white-space: normal;
}
.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);
}

/* Angemeldete Fahrer mit Live-Position auf der Leitstand-Karte (#11598). */
.portal-karte-fahrer-marke {
  width: 28px;
  height: 28px;
}

.portal-karte-fahrer-popup {
  background: var(--kf-farbe, var(--bro-akzent));
  border-radius: var(--bro-radius-s);
  padding: 6px 8px;
  box-shadow: var(--bro-schatten-menue);
  white-space: nowrap;
}

.portal-karte-fahrer-name,
.portal-karte-fahrer-zeile {
  margin: 0;
  font-size: var(--bro-schrift-klein-groesse);
  color: var(--bro-flaeche-1);
}

.portal-karte-fahrer-name {
  font-weight: 700;
}

.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);
}
/* Ansichten Woche, Tag und Liste (#11799), nur über Tokens. */
.gf-kal-ansichten,
.gf-kal-blaettern {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-8);
  margin-block-end: var(--bro-abstand-8);
}
.gf-kal-woche {
  display: grid;
  grid-template-columns: repeat(7, minmax(8rem, 1fr));
  gap: var(--bro-abstand-4);
  overflow-x: auto;
  list-style: none;
  padding: 0;
}
.gf-kal-wochentag {
  min-height: 10rem;
  border: 1px solid var(--bro-linie);
  padding: var(--bro-abstand-4);
}
.gf-kal-wochentag[aria-current="date"],
.gf-kal-stunde[aria-current="date"] {
  outline: 2px solid var(--bro-akzent);
  outline-offset: -2px;
}
.gf-kal-stunden {
  list-style: none;
  padding: 0;
}
.gf-kal-stunde {
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: var(--bro-abstand-8);
  min-height: 2.75rem;
  border-block-start: 1px solid var(--bro-linie);
  padding-block: var(--bro-abstand-4);
}
.gf-kal-stunde-zeit,
.gf-kal-zeit {
  color: var(--bro-tinte-2);
}
.gf-kal-ganztaegig {
  margin-block-end: var(--bro-abstand-8);
}
.gf-kal-frei {
  display: block;
  color: var(--bro-tinte-2);
}
.gf-kal-liste {
  width: 100%;
  border-collapse: collapse;
}
/* Adressvorschlag unter dem Titel eines Termins (#11799). */
.gf-kal-vorschlag {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--bro-linie);
  max-height: 16rem;
  overflow-y: auto;
}
.gf-kal-vorschlag-knopf {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: var(--bro-abstand-8);
  border: 0;
  background: none;
  text-align: start;
  cursor: pointer;
}
.gf-kal-vorschlag-knopf:hover,
.gf-kal-vorschlag-knopf:focus-visible {
  background: var(--bro-flaeche-1);
}
.gf-kal-liste td,
.gf-kal-liste th {
  text-align: start;
  border-block-end: 1px solid var(--bro-linie);
  padding: var(--bro-abstand-4);
}

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

/* Das Kennzeichen wird nie mit „…“ abgeschnitten: Die Titelzeile darf
   umbrechen, das Kennzeichen selbst bleibt am Stück (fahrer-huelle.ts,
   `kopfTitelHtml`). */
.portal-wagenhandy-kopf-text > .portal-wagenhandy-kopf-titel {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.portal-wagenhandy-kennzeichen {
  white-space: nowrap;
}

/* Die Spalte ist mindestens so breit wie das Kennzeichen; sonst schöbe
   „So funktioniert es“ sich am schmalen Handy (320 px) darüber. Die
   zweite Zeile zählt dafür nicht mit (`contain: inline-size`), sie endet
   weiter mit „…“. Wird es eng, gibt stattdessen der Hilfe-Knopf nach: Seine
   Beschriftung endet mit „…“, das Zeichen bleibt stehen, und vorgelesen
   wird weiter der ganze Text. */
.portal-wagenhandy-kopf-text:has(> .portal-wagenhandy-kopf-titel) {
  min-width: min-content;
}

.portal-wagenhandy-kopf-text:has(> .portal-wagenhandy-kopf-titel) > .portal-wagenhandy-kopf-zusatz {
  contain: inline-size;
}

.portal-wagenhandy-kopf > .bro-so-funktioniert,
.portal-wagenhandy-kopf .bro-so-funktioniert-knopf,
.portal-wagenhandy-kopf .bro-so-funktioniert-auf {
  min-width: 0;
  max-width: 100%;
}

.portal-wagenhandy-kopf .bro-so-funktioniert-auf > span {
  min-width: 0;
  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;
}

/* Fotos am Wagenhandy-Check nur bei einem Sauberkeitsmangel (#11440).
   Ohne Skript: Solange beim Punkt „Sauberkeit“ „in Ordnung“ gewählt ist, ist
   der Fotoblock aus; wählt der Fahrer dort etwas anderes, erscheint er sofort.
   Schon abgelegte Fotos bleiben sichtbar. Ohne `:has()` bleibt er einfach an. */
.portal-wagenhandy-formular:has(select[data-sauberkeit] option[value="GRUEN"]:checked)
  .portal-wagenhandy-fotos:not([data-fotos-abgelegt]) {
  display: none;
}

.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);
}

/* #11445: Wo die Touren beginnen — Hof oder kein fester Hof. */
.kf-plan-startort {
  margin: 0 0 var(--bro-abstand-12);
  padding: 0;
  border: 0;
}

.kf-plan-startort label {
  display: block;
  margin-top: var(--bro-abstand-4);
}

.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);
}

/* Eigene Folge (#10872): die gewählten Teile stehen gemeinsam in der Textspalte,
   die Aktion bleibt rechts. */
.kf-auf-eingang[data-eigene-folge] {
  grid-template-columns: minmax(0, 1fr) minmax(9rem, 12rem);
}

.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,
  .kf-auf-eingang[data-eigene-folge] {
    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);
}

/* #10820: Flottenbox und Akte konsumieren die gemeinsamen Modern-Bausteine. */
.kf-fl-box .kf-fl-raster {
  margin-bottom: 0;
}

.kf-fl-akte > .bb-box-inhalt {
  display: grid;
  gap: var(--bro-abstand-16);
  min-width: 0;
}

.kf-fl-box .kf-fl-karte,
.kf-fl-akte .kf-fl-werte dd {
  overflow-wrap: anywhere;
}

.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);
}

/* Reports #10826 und Finanzkopf #10827: vollständige Währungswerte mit Zoom. */
:is(.portal-berichte-kopf, .portal-finanz-kopf),
:is(.portal-berichte-kopf, .portal-finanz-kopf) .bb-kennzahlen > li,
:is(.portal-berichte-kopf, .portal-finanz-kopf) .bb-kennzahl,
:is(.portal-berichte-kopf, .portal-finanz-kopf) .bb-kennzahl-kopf,
:is(.portal-berichte-kopf, .portal-finanz-kopf) .bb-kennzahl-titel {
  min-width: 0;
}

:is(.portal-berichte-kopf, .portal-finanz-kopf) .bb-kennzahlen {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}

:is(.portal-berichte-kopf, .portal-finanz-kopf) .bb-kennzahl-titel,
:is(.portal-berichte-kopf, .portal-finanz-kopf) .bb-kennzahl-wert,
:is(.portal-berichte-kopf, .portal-finanz-kopf) .bb-kennzahl-unter {
  overflow-wrap: anywhere;
}

/* #10798: Die bestehende Partnerschale trägt auch die gemeinsamen Modernboxen.
   In der iframe-Schublade bleibt deren eigener Kopf der einzige Seitenkopf. */
html[data-eingebettet] .portal-glasfaser-partner-kopf {
  display: none;
}

/* #10798: Die Modernbox fügt dem Partnerfilter Innenabstand hinzu. Die eigene
   Gridspalte und die nativen Projekt-/Statusauswahlen müssen darin schrumpfen
   können, auch bei 320px mit Zoom; lange Optionen bleiben auswählbar. */
.portal-glasfaser-partner--modern .portal-glasfaser-partner-inhalt {
  grid-template-columns: minmax(0, 1fr);
}

.portal-glasfaser-partner--modern .bb-filterzeile .portal-werkzeuge,
.portal-glasfaser-partner--modern .bb-filterzeile .portal-feld {
  min-width: 0;
  max-width: 100%;
}

.portal-glasfaser-partner--modern .bb-filterzeile select {
  min-width: 0;
  max-width: 100%;
}

/* #10798: Der native 320px-Beleg mit Zoom zeigt die Mindestbreite von
   „Ausbauprojekte“ im Kopfgrid. Die eigene Spalte und der Titel müssen
   umbrechen; das Aktionsmenü bleibt auch geöffnet innerhalb dieses Kopfes. */
.portal-glasfaser-partner--modern .portal-glasfaser-partner-kopf {
  grid-template-columns: minmax(0, 1fr);
}

.portal-glasfaser-partner--modern .portal-glasfaser-partner-kopf h1 {
  overflow-wrap: anywhere;
}

.portal-glasfaser-partner--modern .portal-glasfaser-partner-kopf .bb-menue-liste {
  box-sizing: border-box;
  max-width: 100%;
}

/* #10798: Die eigene Partnerschublade muss auch bei CSS-Zoom im sichtbaren
   Fenster bleiben. Prozentwerte begrenzen die gezoomten Viewportpixel auf
   die verfügbare Größe; die gemeinsame VisualViewport-Verkleinerung bleibt.
   #10790: Dieselbe Begrenzung für die Aktenformulare der Vertragsakte; ohne
   sie lag die Schublade bei 200 % Zoom links und unten außerhalb des Fensters. */
html[data-design="modern"] .portal-glasfaser-partner--modern .portal-pdf.portal-schublade,
html[data-design="modern"]:has([data-vertragsakte]) .portal-pdf.portal-schublade {
  width: min(40rem, 100%);
  max-width: min(100%, var(--portal-schublade-sicht-breite, 100%));
  height: min(100%, var(--portal-schublade-sicht-hoehe, 100%));
  max-height: min(100%, var(--portal-schublade-sicht-hoehe, 100%));
}
/* #10764: breite Postfachdaten rollen in ihrer eigenen Tastaturregion. */
.portal-kommunikation-tabellenregion {
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
}
.portal-kommunikation-tabellenregion td {
  overflow-wrap: anywhere;
}

/* Mitarbeiter-/Fahreraktenfläche: bestehende Boxen und native Formkörper (#10818). */
.kf-ma-modern {
  min-width: 0;
}
.kf-ma-modern-aktionen,
.kf-ma-modern-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-12);
  margin-block: var(--bro-abstand-16);
}
.kf-ma-modern-tabelle {
  overflow-x: auto;
}
.kf-ma-modern-tabelle table {
  width: 100%;
  border-collapse: collapse;
}
.kf-ma-modern-tabelle th,
.kf-ma-modern-tabelle td {
  text-align: left;
  padding: var(--bro-abstand-12);
  vertical-align: top;
}
.kf-ma-modern-tabelle small {
  display: block;
}
.kf-ma-modern .kf-ma-form-detail > .kf-ma-blatt-inhalt {
  position: static;
  width: auto;
  max-width: 100%;
}
.kf-ma-modern .kf-ma-tabelle-rollen {
  overflow-x: auto;
  max-width: 100%;
}
.kf-ma-modern .kf-ma-formular {
  min-width: 0;
}

/* Zweite Begrüßung: dieselben Tokens und Bewegungsregeln wie die erste (#10251). */
.portal-begruessung-zettel {
  fill: var(--bro-flaeche-1);
  stroke: var(--bro-tinte-1);
  stroke-width: 2;
}
.portal-begruessung-einrichtung {
  background: var(--bro-akzent-flaeche);
  border-radius: var(--bro-begruessung-radius);
  padding: var(--bro-abstand-16);
  text-align: left;
}
.portal-begruessung-ring {
  width: calc(2 * var(--bro-abstand-32));
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.portal-begruessung-ring > * {
  grid-area: 1 / 1;
}
.portal-begruessung-ring svg {
  width: 100%;
  transform: rotate(-90deg);
  fill: none;
  stroke-width: 8;
}
.portal-begruessung-ring-spur {
  stroke: var(--bro-linie);
}
.portal-begruessung-ring-stand {
  stroke: var(--bro-akzent);
}
@media (prefers-reduced-motion: no-preference) {
  .portal-begruessung-zettel {
    animation: begruessung-kommen var(--bro-begruessung-bewegung) var(--bro-begruessung-kurve);
  }
}

/* Gesprächsseite mit Spieler und Zeitleiste (#13009). Nur Abstand, Linie und
   Flächen aus den Tokens (B14.7). Die Stücke einer Spur stehen per
   `left`/`width` in Prozent der Aufnahme — Lage, keine Gestaltung. */
.portal-spieler audio {
  width: 100%;
}

.portal-spieler-untertitel {
  margin: var(--bro-abstand-8) 0;
  padding: var(--bro-abstand-8) var(--bro-abstand-12);
  border-radius: var(--bro-radius-s);
  background: var(--bro-flaeche-1);
  color: var(--bro-tinte-1);
}

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

.portal-zeitleiste-zeile {
  display: grid;
  grid-template-columns: minmax(8rem, 12rem) 1fr;
  align-items: center;
  gap: var(--bro-abstand-8);
}

.portal-zeitleiste-name {
  overflow-wrap: anywhere;
}

.portal-zeitleiste-spur {
  position: relative;
  display: block;
  height: var(--bro-abstand-16);
  border-radius: var(--bro-radius-s);
  background: var(--bro-flaeche-1);
}

.portal-zeitleiste-stueck {
  position: absolute;
  top: 0;
  bottom: 0;
  min-width: 2px;
  border-radius: var(--bro-radius-s);
  background: var(--bro-akzent);
}

.portal-zeitleiste-marke {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--bro-abstand-4);
  background: var(--bro-tinte-2);
}

.portal-zeitleiste-marke:focus-visible,
.portal-zeitleiste-stueck:focus-visible {
  outline: var(--bro-fokus-breite) solid var(--bro-akzent);
  outline-offset: var(--bro-fokus-abstand);
}

.portal-zeitleiste-zeiger {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--bro-tinte-1);
  pointer-events: none;
}

.portal-zeitleiste-rueckfall {
  position: absolute;
  inset-block: 0;
  background: var(--bro-warnung);
  opacity: 0.72;
}

/* Gesprächskennzahlen (#13006): Ring und Balken ausschließlich mit Haus-Tokens. */
.portal-kennzahlen-kopf {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-16);
  align-items: center;
}

.portal-kennzahlen-ring {
  inline-size: 8rem;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-content: center;
  text-align: center;
  background: conic-gradient(var(--bro-akzent) var(--portal-kennzahl-anteil), var(--bro-linie) 0);
  box-shadow: inset 0 0 0 1.35rem var(--bro-flaeche-1);
}

.portal-kennzahlen-ring > * {
  position: relative;
}

.portal-kennzahlen-ring span {
  font-size: var(--bro-schrift-klein-groesse);
}

.portal-kennzahlen-kopf dl,
.portal-kennzahlen-personen {
  display: grid;
  gap: var(--bro-abstand-8);
  margin: 0;
}

.portal-kennzahlen-kopf dl > div,
.portal-kennzahlen-personen li {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) minmax(8rem, 2fr) auto;
  gap: var(--bro-abstand-8);
  align-items: center;
}

.portal-kennzahlen-kopf dd {
  margin: 0;
  font-weight: var(--bro-schrift-betont-gewicht);
}

.portal-kennzahlen-personen {
  list-style: none;
  padding: 0;
  margin-block-start: var(--bro-abstand-16);
}

.portal-kennzahlen-personen progress {
  inline-size: 100%;
  accent-color: var(--bro-akzent);
}

#mitschrift tr.portal-mitschrift-aktiv {
  background: var(--bro-akzent-flaeche);
}

/* ---- „Frag Bro“ (#12889): Ergebnisseite in allen Designs ---- */
.portal-fragbro {
  display: grid;
  gap: var(--bro-abstand-16);
}

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

.portal-fragbro-feld > input {
  flex: 1;
  min-width: 0;
}

.portal-fragbro-antwort {
  display: grid;
  gap: var(--bro-abstand-8);
}

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

.portal-fragbro-links {
  display: grid;
  gap: var(--bro-abstand-4);
  margin: 0;
  padding-left: var(--bro-abstand-16);
}

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

.portal-fragbro-beispiele > p {
  flex-basis: 100%;
  margin: 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);
}

/* `overflow-wrap`, weil `.bb-meldungen` ein Raster mit `auto`-Spalte ist:
   Deren Mindestbreite ist das längste Wort der Meldung, und ohne Umbruch
   verbreitert ein langes Wort bei 320 px und 200 % Zoom die Seite (#10795). */
.bb-meldung-text {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.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;
}

/* Die entpolsterte Formularkarte besitzt keinen Karteninnenrand mehr,
   aus dem die Modern-Kopfleiste herausgezogen werden könnte. Sonst
   überdeckt der nächste lange Titel die vorherige Formularaktion (#10764). */
html[data-design="modern"] .bb-formular-inhalt > .portal-formular-karte > h2:first-child,
html[data-design="modern"] .bb-formular-inhalt > .portal-formular-karte > header:first-child {
  margin: 0;
}

html[data-design="modern"] .bb-formular-inhalt > .portal-formular-karte + .portal-formular-karte {
  margin-top: var(--bro-abstand-24);
}

/* Bei Zoom oder Tastatur kann Kopf plus Fuß höher als die Hülle werden.
   Dann scrollt diese vorhandene Fachhülle vollständig; ihr Inhalt darf
   nicht auf einen für Formularaktionen unbrauchbaren Rest schrumpfen. */
html[data-design="modern"] [data-kommunikation-detail] {
  overflow: auto;
  overscroll-behavior: contain;
}

html[data-design="modern"] [data-kommunikation-detail] > .portal-schublade-inhalt {
  flex: none;
  overflow: visible;
}

html[data-design="modern"] [data-kommunikation-detail] > .portal-schublade-kopf {
  flex-wrap: nowrap;
}

html[data-design="modern"] [data-kommunikation-detail] > .portal-schublade-kopf > h2 {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
}

html[data-design="modern"]
  [data-kommunikation-detail]
  > .portal-schublade-kopf
  > [data-schublade-schliessen] {
  flex: none;
}

html[data-design="modern"] [data-kommunikation-detail] > .portal-schublade-fuss {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-12);
}

/* Tabellen behalten ihren vorhandenen horizontalen Scrollbereich;
   ihre Aktionen dürfen dabei nicht bis auf einzelne Buchstaben schrumpfen. */
html[data-design="modern"] [data-kommunikation-detail] .bro-tabelle .bro-knopf {
  white-space: nowrap;
}

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

/* Ein Menü mit Wort statt „⋯“, etwa „+ Neu“ in der Kundenakte (#11791). */
.bb-menue-knopf--text {
  gap: var(--bro-abstand-4);
  padding: 0 var(--bro-abstand-16);
}

.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;
}

a.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);
}

/* Die Schublade „… anpassen“ (#11786): Angezeigt oben, Weitere nach
   Gruppen, unten Standard und Fertig. Ohne Skript ein gewöhnliches Formular. */
.portal-anpassen {
  display: grid;
  gap: var(--bro-abstand-16);
}

.portal-anpassen-gruppe {
  display: grid;
  gap: var(--bro-abstand-8);
  margin: 0;
  padding: 0;
  border: 0;
}

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

.portal-anpassen-zeile {
  display: flex;
  align-items: center;
  gap: 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-box);
}

.portal-anpassen-zeile label {
  flex: 1;
}

.portal-anpassen-stelle {
  width: 4.5rem;
}

.portal-anpassen-knoepfe {
  display: flex;
  justify-content: flex-end;
  gap: var(--bro-abstand-8);
}

/* Die Kennzahl-Kacheln über der Kundenliste (#11789, Vorlage: Klickdemo):
   die Kennzahlleiste aus @bro/ui, jede Kachel ein Verweis, der die Liste
   filtert; die gewählte trägt einen Akzentrahmen. Farben nur über Tokens. */
.portal-kacheln {
  display: grid;
  gap: var(--bro-abstand-8);
  margin: 0 0 var(--bro-abstand-16);
}

/* Einzelne Karten mit Abstand statt einer Leiste mit Haarlinien (#12793,
   Klickdemo: `.kacheln`/`.kachel`). Die gestrichelte Karte ist „Anpassen“. */
.portal-kacheln-leiste {
  gap: var(--bro-abstand-12);
  margin: 0;
  border: 0;
  background: transparent;
}

.portal-kachel {
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-l);
}

.portal-kachel-anpassen {
  border-style: dashed;
}

.portal-kachel-ziel {
  display: flex;
  flex-direction: column;
  gap: 2px;
  height: 100%;
  padding: var(--bro-abstand-16) 20px;
  color: inherit;
  text-decoration: none;
}

.portal-kachel-ziel:hover,
.portal-kachel-ziel:focus-visible {
  background: var(--bro-flaeche-0);
}

.portal-kachel-ziel[aria-current="true"] {
  box-shadow: inset 0 0 0 2px var(--bro-akzent);
  border-radius: var(--bro-radius-l);
}

.portal-kachel-anpassen .portal-kachel-ziel {
  justify-content: center;
  color: var(--bro-tinte-2);
}

.portal-kachel-zusatz--erfolg {
  color: var(--bro-erfolg);
}

.portal-kachel-zusatz--warnung {
  color: var(--bro-warnung);
}

.portal-kachel-zusatz--fehler {
  color: var(--bro-fehler);
}

/* Die Bro-Zeile über Liste und Akte wie in der Klickdemo (#12795, `.bro`):
   Akzentfläche mit Stern; der Knopf rückt nach rechts. */
.portal-kacheln-hinweis {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-8) var(--bro-abstand-12);
  margin: 0;
  padding: var(--bro-abstand-12) var(--bro-abstand-16);
  border: 1px solid var(--bro-akzent);
  border-radius: var(--bro-konsole-radius-box);
  background: var(--bro-akzent-flaeche);
  color: var(--bro-tinte-1);
}

.portal-kacheln-hinweis::before {
  content: "✦";
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--bro-radius-m);
  background: var(--bro-akzent);
  color: var(--bro-akzent-tinte);
}

.portal-kacheln-hinweis > span {
  flex: 1 1 240px;
}

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

/* ── Arbeitsliste (#11576): Spalten Kunde, Wartet auf, Stand, Frist, Aktion */
.portal-us-leise {
  color: var(--bro-tinte-3);
}

.portal-us-fehlt {
  color: var(--bro-fehler);
  font-weight: var(--bro-schrift-betont-gewicht);
}

.portal-us-ohne-pdf .portal-us-kachel-dokument {
  background: var(--bro-fehler-flaeche);
  color: var(--bro-fehler);
}

.portal-us-alter-warnung {
  color: var(--bro-warnung);
  font-weight: var(--bro-schrift-betont-gewicht);
}

.portal-us-alter-fehler {
  color: var(--bro-fehler);
  font-weight: var(--bro-schrift-betont-gewicht);
}

.portal-us-kunde {
  color: var(--bro-tinte-1);
}

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

.portal-us-text .bro-statuspille {
  align-self: flex-start;
}

.portal-us-aktion {
  text-align: right;
  white-space: nowrap;
}

.portal-us-zeilenform {
  display: inline;
  margin: 0;
}

.portal-us-zeilenknopf {
  display: inline-flex;
  align-items: center;
  gap: var(--bro-abstand-4);
}

.portal-us-zeilenknopf .bro-symbol {
  width: 15px;
  height: 15px;
}

/* ── Fuß: Sammelaktion und Einstellungen links, die Hilfe als Klappe rechts */
.portal-us-fussleiste {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--bro-abstand-16);
}

.portal-us-fuss-links {
  display: grid;
  flex: 1 1 20rem;
  gap: var(--bro-abstand-8);
  min-width: 0;
}

.portal-us-fuss-rechts {
  flex: 0 1 28rem;
  min-width: 0;
}

.portal-us-sammel {
  margin-top: var(--bro-abstand-12);
}

.portal-us-sammel-form {
  display: grid;
  gap: var(--bro-abstand-8);
  margin-top: var(--bro-abstand-8);
}

.portal-us-sammel-liste {
  display: grid;
  gap: var(--bro-abstand-4);
  margin: 0;
  padding-left: 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-us-fuss-rechts {
    flex-basis: 100%;
  }
}

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

/* ── Seite einer Mappe (#11433, Vorschau Fassung 2 an #11432): Faktenzeile,
   Fortschritt, Kasten „Nächster Schritt“, darunter zwei Spalten (Arbeit
   links, Eckdaten und Verlauf rechts). Ab 860 px zwei Spalten, darunter
   eine. Nur Tokens. */

.portal-usm {
  display: grid;
  gap: var(--bro-abstand-16);
}

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

.portal-usm-inline {
  display: inline;
  margin: 0;
}

.portal-usm-fakten {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-4) var(--bro-abstand-16);
  margin: 0;
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
}

/* ── Menü „Mehr“: ein <details>, ohne Skript bedienbar */
.portal-usm-mehr {
  position: relative;
}

.portal-usm-mehr > summary {
  list-style: none;
}

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

.portal-usm-menue {
  position: absolute;
  z-index: 5;
  top: calc(100% + var(--bro-abstand-4));
  right: 0;
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
  min-width: 18rem;
  max-width: min(26rem, 90vw);
  padding: var(--bro-abstand-8);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
  background: var(--bro-flaeche-0);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--bro-tinte-1) 12%, transparent);
}

.portal-usm-menue hr {
  width: 100%;
  margin: var(--bro-abstand-4) 0;
  border: 0;
  border-top: 1px solid var(--bro-linie);
}

.portal-usm-menue-link,
.portal-usm-menue-punkt > summary {
  display: block;
  padding: var(--bro-abstand-8);
  border-radius: var(--bro-radius-s);
  color: var(--bro-tinte-1);
  cursor: pointer;
  text-decoration: none;
}

.portal-usm-menue-link:hover,
.portal-usm-menue-punkt > summary:hover {
  background: var(--bro-flaeche-1);
}

.portal-usm-menue-inhalt {
  display: grid;
  gap: var(--bro-abstand-8);
  padding: var(--bro-abstand-8);
}

.portal-usm-gefahr > summary,
.portal-usm-gefahr-knopf {
  color: var(--bro-fehler);
}

.portal-usm-frage {
  margin: 0;
  font-weight: var(--bro-schrift-betont-gewicht);
}

/* ── Fortschritt */
.portal-usm-schritte {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--bro-abstand-12);
  margin: 0;
  padding: var(--bro-abstand-12) var(--bro-abstand-16);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-l);
  background: var(--bro-flaeche-0);
  list-style: none;
}

.portal-usm-stufe {
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-8);
  min-width: 0;
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
}

.portal-usm-stufe small {
  display: block;
  color: var(--bro-tinte-3);
  font-size: var(--bro-schrift-fein-groesse);
}

.portal-usm-stufe-punkt {
  display: grid;
  flex: none;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 2px solid var(--bro-linie);
  border-radius: var(--bro-radius-rund);
  background: var(--bro-flaeche-0);
  font-size: var(--bro-schrift-fein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
}

.portal-usm-stufe-fertig .portal-usm-stufe-punkt {
  border-color: var(--bro-erfolg);
  background: var(--bro-erfolg);
  color: var(--bro-flaeche-0);
}

.portal-usm-stufe-offen .portal-usm-stufe-punkt {
  color: var(--bro-tinte-3);
}

.portal-usm-stufe-jetzt {
  color: var(--bro-tinte-1);
  font-weight: var(--bro-schrift-betont-gewicht);
}

.portal-usm-stufe-jetzt .portal-usm-stufe-punkt {
  border-color: var(--bro-akzent);
  color: var(--bro-akzent-text);
}

.portal-usm-stufe-stopp,
.portal-usm-stufe-stopp small {
  color: var(--bro-fehler);
  font-weight: var(--bro-schrift-betont-gewicht);
}

.portal-usm-stufe-stopp .portal-usm-stufe-punkt {
  border-color: var(--bro-fehler);
  background: var(--bro-fehler);
  color: var(--bro-flaeche-0);
}

/* ── Nächster Schritt */
.portal-usm-naechst {
  display: grid;
  gap: var(--bro-abstand-8);
  padding: var(--bro-abstand-16);
  border: 1px solid;
  border-radius: var(--bro-radius-l);
}

.portal-usm-naechst-info {
  border-color: color-mix(in srgb, var(--bro-akzent) 35%, transparent);
  background: var(--bro-akzent-flaeche);
}

.portal-usm-naechst-ok {
  border-color: color-mix(in srgb, var(--bro-erfolg) 35%, transparent);
  background: color-mix(in srgb, var(--bro-erfolg) 10%, var(--bro-flaeche-0));
}

.portal-usm-naechst-fehler {
  border-color: var(--bro-fehler-linie);
  background: var(--bro-fehler-flaeche);
}

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

.portal-usm-naechst-text {
  flex: 1 1 24rem;
  min-width: 0;
}

.portal-usm-naechst-text h2 {
  margin: 0;
  font-size: var(--bro-schrift-titel-groesse);
}

.portal-usm-naechst-text p,
.portal-usm-meldungen p {
  margin: var(--bro-abstand-4) 0 0;
  color: var(--bro-tinte-2);
}

.portal-usm-meldungen p {
  margin: 0;
  white-space: pre-line;
}

.portal-usm-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-8);
  align-items: flex-start;
}

/* ── Spalten. Ist die PDF-Leiste offen (#11439), trägt die Seite
   `.portal-usm-mit-pdf`, und Eckdaten und Verlauf laufen einspaltig unter
   die Arbeit. */
.portal-usm-spalten {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bro-abstand-16);
  align-items: start;
}

@media (width >= 860px) {
  .portal-usm-spalten {
    grid-template-columns: minmax(0, 1fr) 20rem;
  }

  .portal-usm-mit-pdf .portal-usm-spalten {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (width < 860px) {
  .portal-usm-schritte {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.portal-usm-karte {
  min-width: 0;
}

.portal-usm-spalte {
  display: grid;
  gap: var(--bro-abstand-16);
  min-width: 0;
}

.portal-usm-karte-kopf {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-8);
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--bro-abstand-8);
}

.portal-usm-karte-kopf h2 {
  margin: 0;
  font-size: var(--bro-schrift-betont-groesse);
}

.portal-usm-zusatz,
.portal-usm-leer {
  color: var(--bro-tinte-3);
  font-size: var(--bro-schrift-klein-groesse);
}

.portal-usm-leer {
  margin: 0;
}

/* ── Unterzeichner (#11435): eine Zeile je Person, Kürzel-Kreis, Spur
   darunter, Stand und Aktionen rechts; schmal rutscht die rechte Seite
   unter den Namen. */
.portal-usm-personen {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.portal-usm-person {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: var(--bro-abstand-12);
  align-items: center;
  padding: var(--bro-abstand-12) 0;
  border-top: 1px solid var(--bro-linie);
}

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

@media (width < 520px) {
  .portal-usm-person {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .portal-usm-person-rechts {
    grid-column: 2;
    align-items: flex-start;
  }
}

.portal-usm-kreis {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--bro-radius-rund);
  background: var(--bro-flaeche-1);
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
}

.portal-usm-person-text {
  min-width: 0;
}

.portal-usm-person-text p {
  margin: 0;
  overflow-wrap: anywhere;
}

.portal-usm-person-name {
  font-weight: var(--bro-schrift-betont-gewicht);
}

.portal-usm-person-name .portal-usm-zusatz {
  font-weight: var(--bro-schrift-fliesstext-gewicht);
}

.portal-usm-spur {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-4) var(--bro-abstand-12);
  margin-top: var(--bro-abstand-4);
  color: var(--bro-tinte-3);
  font-size: var(--bro-schrift-klein-groesse);
}

.portal-usm-spur-da {
  color: var(--bro-tinte-1);
}

.portal-usm-person-rechts {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  align-items: flex-end;
}

.portal-usm-person-link[open] {
  max-width: 22rem;
}

/* ── Dokument */
.portal-usm-dokumente {
  display: grid;
  gap: var(--bro-abstand-12);
  margin: 0;
  padding: 0;
  list-style: none;
}

.portal-usm-dok {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: var(--bro-abstand-12);
  align-items: center;
}

@media (width < 520px) {
  .portal-usm-dok {
    grid-template-columns: 56px minmax(0, 1fr);
  }

  .portal-usm-dok .portal-usm-knoepfe {
    grid-column: 1 / -1;
  }
}

.portal-usm-blatt {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1.414;
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-s);
  background: var(--bro-flaeche-1);
}

.portal-usm-dok-text p {
  margin: 0;
}

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

.portal-usm-aufklapp > summary {
  list-style: none;
}

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

.portal-usm-aufklapp[open] {
  flex-basis: 100%;
}

/* ── Eckdaten */
.portal-usm-eck {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--bro-abstand-8) var(--bro-abstand-12);
  margin: 0;
}

.portal-usm-eck dt {
  color: var(--bro-tinte-2);
}

.portal-usm-eck dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.portal-usm-fehlt {
  color: var(--bro-warnung);
}

/* Ein Dokument ohne Datei nach dem Versand (#11577, Polok-Fall): rot, nicht still. */
.portal-usm-pdf-fehlt {
  margin: 0 0 var(--bro-abstand-8);
  padding: var(--bro-abstand-8) var(--bro-abstand-12);
  border-radius: var(--bro-radius-m);
  background: var(--bro-fehler-flaeche);
  color: var(--bro-fehler);
}

/* Die Seiten der Felder einer Person — erst beim Aufklappen (#11577). */
.portal-usm-feld-seiten > summary {
  cursor: pointer;
  color: var(--bro-akzent);
  font-size: var(--bro-schrift-klein-groesse);
}

/* ── Verlauf */
.portal-usm-verlauf {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.portal-usm-verlauf li {
  position: relative;
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: var(--bro-abstand-8);
  padding-bottom: var(--bro-abstand-12);
  font-size: var(--bro-schrift-klein-groesse);
}

.portal-usm-verlauf li::before {
  position: absolute;
  top: 14px;
  bottom: 0;
  left: 5px;
  width: 2px;
  background: var(--bro-linie);
  content: "";
}

.portal-usm-verlauf li:last-child::before {
  display: none;
}

.portal-usm-verlauf time {
  display: block;
  color: var(--bro-tinte-3);
  font-size: var(--bro-schrift-fein-groesse);
}

.portal-usm-verlauf-punkt {
  width: 12px;
  height: 12px;
  margin-top: var(--bro-abstand-4);
  border-radius: var(--bro-radius-rund);
  background: var(--bro-linie-stark);
}

.portal-usm-verlauf-leise {
  color: var(--bro-tinte-2);
}

.portal-usm-verlauf-info .portal-usm-verlauf-punkt {
  background: var(--bro-akzent);
}

.portal-usm-verlauf-ok .portal-usm-verlauf-punkt {
  background: var(--bro-erfolg);
}

.portal-usm-verlauf-fehler .portal-usm-verlauf-punkt {
  background: var(--bro-fehler);
}

.portal-usm-verlauf-fehler {
  color: var(--bro-fehler);
}

.portal-usm-befund {
  display: block;
  color: var(--bro-tinte-3);
  font-size: var(--bro-schrift-fein-groesse);
  overflow-wrap: anywhere;
}

.portal-usm-nachweis summary {
  color: var(--bro-akzent-text);
  cursor: pointer;
}

.portal-usm-nachweis code {
  font-size: var(--bro-schrift-fein-groesse);
  overflow-wrap: anywhere;
}

/* ── Prüfliste „Bereit zum Senden?“ (#11434): Maßstab ist der Block
   „Prüfliste“ der Vorschau „Fassung 2 mit PDF-Leiste“ an #11432. Erfüllt grün,
   offen in der Warnfarbe — nur Tokens. */
.portal-us-pruefliste {
  display: grid;
  gap: var(--bro-abstand-4);
}

.portal-us-pruef-kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--bro-abstand-12);
  margin-bottom: var(--bro-abstand-12);
}

.portal-us-pruef-kopf h2 {
  margin: 0;
}

.portal-us-pruef {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.portal-us-pruef li {
  display: flex;
  gap: var(--bro-abstand-12);
  align-items: flex-start;
  padding: var(--bro-abstand-8) 0;
  border-bottom: 1px solid var(--bro-linie);
}

.portal-us-pruef li:last-child {
  border-bottom: 0;
}

.portal-us-pruef-zeichen {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: var(--bro-radius-rund);
  display: grid;
  place-items: center;
  font-size: var(--bro-schrift-fein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
}

.portal-us-pruef-zeichen[data-erfuellt="ja"] {
  background: color-mix(in srgb, var(--bro-erfolg) 14%, var(--bro-flaeche-1));
  color: var(--bro-erfolg);
}

.portal-us-pruef-zeichen[data-erfuellt="nein"] {
  background: var(--bro-warnung-flaeche);
  color: var(--bro-warnung);
}

.portal-us-pruef-wert {
  color: var(--bro-tinte-2);
}

.portal-us-pruef-formular {
  display: inline;
  margin: 0;
}

/* Ein langer Absender-Vorschlag (#12276): Der Punkt-Text ist ein Flex-Kind
   mit `min-width: auto` und wuchs mit dem Knopf „<Name>, <Firma> übernehmen“
   über die Werkzeugspalte hinaus (bei 390 px: 501 px Inhalt, die ganze Seite
   schob horizontal). Der Text darf schrumpfen und umbrechen; der Geist-Knopf
   gibt sein `white-space: nowrap` hier auf und bricht wie Text um, linksbündig
   wie die Zeile, in der er steht. Gilt im Editor und auf der Mappenseite. */
.portal-us-pruef li > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.portal-us-pruef-formular .bro-knopf {
  max-width: 100%;
  white-space: normal;
  text-align: left;
  overflow-wrap: anywhere;
}

/* Die fehlenden Punkte am Knopf „Direkt senden“ im Editor (#11434) —
   dieselben wie in der Prüfliste, in der Warnfarbe. */
.portal-us-sendesperre {
  border: 1px solid var(--bro-warnung-linie);
  background: var(--bro-warnung-flaeche);
  border-radius: var(--bro-radius-m);
  padding: var(--bro-abstand-8) var(--bro-abstand-12);
  margin-block: var(--bro-abstand-8);
}

.portal-us-sendesperre p,
.portal-us-sendesperre ul {
  margin: 0;
}

/* ── Fach „3 Versand“ des Editors (#11528, E4 aus #11524): Prüfliste oben,
   Reihenfolge als zwei Auswahlkarten, Nachricht mit Mailvorschau daneben,
   Datum und Uhrzeit nebeneinander, ein Hauptknopf. Nur Tokens. */
.portal-us-versand {
  display: grid;
  gap: var(--bro-abstand-16);
}

.portal-us-versand-formular {
  display: grid;
  gap: var(--bro-abstand-16);
}

.portal-us-versand-gruppe {
  border: 0;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--bro-abstand-8);
}

.portal-us-versand-gruppe legend {
  font-weight: var(--bro-schrift-betont-gewicht);
  margin-bottom: var(--bro-abstand-8);
}

/* Kontaktvorschläge unter „Kopie an“ (#13342): je Kontakt eine Zeile. */
.portal-us-kopie-kontakte {
  display: grid;
  gap: var(--bro-abstand-4);
}

.portal-us-wahlkarten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--bro-abstand-8);
}

.portal-us-wahlkarte {
  display: flex;
  gap: var(--bro-abstand-8);
  align-items: flex-start;
  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-us-wahlkarte:has(input:checked) {
  border-color: var(--bro-akzent);
  background: var(--bro-akzent-flaeche);
}

.portal-us-wahlkarte > span {
  display: grid;
  gap: var(--bro-abstand-4);
}

.portal-us-versand-nachricht {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--bro-abstand-12);
  align-items: start;
}

.portal-us-mailvorschau {
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
  background: var(--bro-flaeche-0);
  padding: var(--bro-abstand-12);
  font-size: var(--bro-schrift-klein-groesse);
  color: var(--bro-tinte-2);
  min-width: 0;
}

.portal-us-mailvorschau p {
  margin: 0 0 var(--bro-abstand-8);
}

.portal-us-mailvorschau-betreff {
  font-weight: var(--bro-schrift-betont-gewicht);
  color: var(--bro-tinte-1);
}

/* Die Vorschau der echten Mail braucht die volle Breite des Fachs (#11703). */
.portal-us-versand-nachricht > .portal-us-mailvorschau {
  grid-column: 1 / -1;
}

/* Die echte Mail als eigenes Dokument (#11703, `mail-vorschau.ts`). */
.portal-us-mailvorschau-rahmen {
  display: block;
  width: 100%;
  height: 46rem;
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-s);
  background: var(--bro-flaeche-1);
}

.portal-us-zeitpaar {
  display: grid;
  gap: var(--bro-abstand-4);
}

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

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

.portal-us-zeitpaar p {
  margin: 0;
}

/* Im Quelltext steht „Versanddaten speichern“ vorn (Eingabetaste speichert,
   sendet nie); angezeigt wird der Hauptknopf zuerst. */
.portal-us-versand-aktionen {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: flex-start;
  gap: var(--bro-abstand-8);
}

.portal-us-versand-bestaetigung > summary {
  list-style: none;
  cursor: pointer;
}

.portal-us-versand-bestaetigung > summary::-webkit-details-marker {
  display: none;
}

.portal-us-versand-bestaetigung[open] > div {
  margin-top: var(--bro-abstand-8);
  display: grid;
  gap: var(--bro-abstand-8);
}

/* ── PDF-Leiste (#11439). Ab 720 px steht sie rechts neben der Mappe, rund
   46 % breit, klebt am oberen Rand und ist so hoch wie das Fenster; offen,
   solange die Seite `.portal-usm-mit-pdf` trägt. Schmaler erscheint sie nur
   auf Wunsch (`.portal-usm-pdf-oben`) oben über der Mappe — kein
   Vollbild-Overlay. Maße aus der freigegebenen Vorschau am #11432. */
.portal-usm-seite {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bro-abstand-16);
  align-items: start;
}

.portal-usm-pdf {
  display: none;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-l);
  background: var(--bro-flaeche-1);
}

.portal-usm-pdf-an-knopf,
.portal-usm-pdf-aus-knopf {
  display: none;
}

@media (width >= 720px) {
  .portal-usm-mit-pdf {
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 46%);
  }

  .portal-usm-mit-pdf .portal-usm-pdf {
    display: flex;
    position: sticky;
    top: var(--bro-abstand-12);
    height: calc(100dvh - 2 * var(--bro-abstand-16));
    min-height: 30rem;
  }

  .portal-usm-mit-pdf .portal-usm-spalten {
    grid-template-columns: minmax(0, 1fr);
  }

  body:has(.portal-usm-mit-pdf) .portal-usm-aktionen .portal-usm-pdf-aus-knopf,
  body:not(:has(.portal-usm-mit-pdf)) .portal-usm-aktionen .portal-usm-pdf-an-knopf {
    display: inline-flex;
  }
}

@media (width < 720px) {
  .portal-usm-pdf-oben .portal-usm-pdf {
    display: flex;
    order: -1;
    height: 40rem;
  }

  body:has(.portal-usm-pdf-oben) .portal-usm-aktionen .portal-usm-pdf-aus-knopf,
  body:not(:has(.portal-usm-pdf-oben)) .portal-usm-aktionen .portal-usm-pdf-an-knopf {
    display: inline-flex;
  }
}

.portal-usm-pdf-wahl {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-4) var(--bro-abstand-12);
  padding: var(--bro-abstand-8) var(--bro-abstand-12) 0;
  background: var(--bro-flaeche-0);
  font-size: var(--bro-schrift-klein-groesse);
}

.portal-usm-pdf-wahl a[aria-current="true"] {
  font-weight: var(--bro-schrift-betont-gewicht);
  color: var(--bro-tinte-1);
}

.portal-usm-pdf-dok {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

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

.portal-usm-pdf-werkzeug {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-8);
  align-items: center;
  padding: var(--bro-abstand-8) var(--bro-abstand-12);
  border-bottom: 1px solid var(--bro-linie);
  background: var(--bro-flaeche-0);
}

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

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

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

.portal-usm-pdf-zahl {
  min-width: 6rem;
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.portal-usm-pdf-ik {
  display: inline-grid;
  place-items: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 var(--bro-abstand-8);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
  background: var(--bro-flaeche-0);
  color: var(--bro-tinte-1);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

.portal-usm-pdf-ik:hover {
  background: var(--bro-flaeche-1);
}

.portal-usm-pdf-felder {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-4) var(--bro-abstand-8);
  align-items: center;
  margin: 0;
  padding: var(--bro-abstand-8) var(--bro-abstand-12);
  border-bottom: 1px solid var(--bro-linie);
  background: var(--bro-flaeche-0);
  font-size: var(--bro-schrift-fein-groesse);
}

.portal-usm-pdf-feldknopf {
  display: inline-flex;
  gap: var(--bro-abstand-4);
  align-items: center;
  padding: var(--bro-abstand-4) var(--bro-abstand-8);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-rund);
  color: var(--bro-tinte-1);
  text-decoration: none;
}

.portal-usm-feld-punkt {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--bro-radius-rund);
  background: var(--usm-feld-farbe);
}

.portal-usm-pdf-blaetter {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--bro-abstand-12);
  align-items: center;
  min-height: 0;
  padding: var(--bro-abstand-16);
  overflow: auto;
}

.portal-usm-pdf-blatt {
  position: relative;
  flex: none;
  width: var(--usm-pdf-zoom, 100%);
  max-width: none;
  border: 1px solid var(--bro-linie);
  background: var(--bro-flaeche-0);
}

/*
 * Ladeanzeige: Solange ein Seitenbild unterwegs ist (live 1–5 s je Seite),
 * steht „Seite n wird geladen …“ hinter dem Bild statt einer leeren weißen
 * Fläche. Das fertige JPEG ist deckend und liegt darüber, die Feldrahmen
 * wiederum über dem Bild.
 */
.portal-usm-pdf-blatt::before {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--bro-abstand-16);
  background: var(--bro-flaeche-1);
  color: var(--bro-tinte-3);
  font-size: var(--bro-schrift-klein-groesse);
  text-align: center;
  content: attr(data-usm-laden);
}

.portal-usm-pdf-blatt img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto 1 / 1.414;
}

/*
 * Nachladen (27.10.2026): Während ein gescheitertes Seitenbild erneut
 * abgefragt wird, bleibt die Ladeanzeige sichtbar statt des kaputten Bilds.
 * Nach dem letzten Versuch steht dort ein Hinweis mit „Neu laden“.
 */
.portal-usm-pdf-blatt-wartet img,
.portal-usm-pdf-blatt-fehlt img {
  visibility: hidden;
}

.portal-usm-pdf-ladefehler {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: var(--bro-abstand-8);
  margin: 0;
  padding: var(--bro-abstand-16);
  background: var(--bro-flaeche-1);
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
  text-align: center;
}

.portal-usm-pdf-neu-laden {
  justify-self: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--bro-akzent);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.portal-usm-pdf-fehlt {
  padding: var(--bro-abstand-16);
  color: var(--bro-tinte-2);
}

.portal-usm-pdf-fehlt p {
  margin: 0 0 var(--bro-abstand-8);
}

/* Felder als Rahmen über dem Seitenbild: blau gesetzt, gelb wartet, grün
   unterschrieben, rot abgelehnt (#11439, „Fertig heißt“ 4). */
.portal-usm-feld-gesetzt {
  --usm-feld-farbe: var(--bro-akzent);
}

.portal-usm-feld-wartet {
  --usm-feld-farbe: var(--bro-warnung);
}

.portal-usm-feld-unterschrieben {
  --usm-feld-farbe: var(--bro-erfolg);
}

.portal-usm-feld-abgelehnt {
  --usm-feld-farbe: var(--bro-fehler);
}

.portal-usm-feld {
  position: absolute;
  display: flex;
  align-items: flex-end;
  min-width: 0;
  overflow: hidden;
  border: 2px dashed var(--usm-feld-farbe);
  border-radius: var(--bro-radius-s);
  background: color-mix(in srgb, var(--usm-feld-farbe) 8%, transparent);
  font-size: var(--bro-schrift-fein-groesse);
  line-height: 1.2;
  scroll-margin: var(--bro-abstand-32);
}

.portal-usm-feld.portal-usm-feld-unterschrieben {
  border-style: solid;
}

.portal-usm-feld-text {
  padding: 0 var(--bro-abstand-4);
  overflow: hidden;
  background: color-mix(in srgb, var(--bro-flaeche-0) 80%, transparent);
  color: var(--bro-tinte-1);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-usm-feld:target {
  outline: 3px solid var(--usm-feld-farbe);
}

@media (prefers-reduced-motion: no-preference) {
  .portal-usm-feld-blink {
    animation: portal-usm-feld-blink 1.2s ease 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .portal-usm-feld-blink {
    outline: 3px solid var(--usm-feld-farbe);
  }
}

@keyframes portal-usm-feld-blink {
  50% {
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--usm-feld-farbe) 35%, transparent);
  }
}

.portal-usm-feld-links {
  display: flex;
  margin: 0;
  flex-wrap: wrap;
  gap: var(--bro-abstand-4) var(--bro-abstand-12);
  font-size: var(--bro-schrift-klein-groesse);
}

.portal-usm-feld-link {
  color: var(--bro-akzent);
}

/* ── Editor „Bearbeiten & senden“ (#11525, E1 aus #11524): Kopf mit Titel
   als Inline-Feld, darunter links das PDF, rechts die Werkzeugspalte mit den
   Schritt-Reitern. Schmal stehen beide Spalten untereinander, das PDF oben. */
.portal-us-editor {
  display: grid;
  gap: var(--bro-abstand-16);
}

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

.portal-us-editor-titel {
  display: flex;
  flex: 1 1 18rem;
  align-items: flex-end;
  gap: var(--bro-abstand-8);
}

.portal-us-editor-titel label {
  display: grid;
  flex: 1 1 auto;
  gap: var(--bro-abstand-4);
}

.portal-us-editor-zustand {
  padding: var(--bro-abstand-4) var(--bro-abstand-8);
  border-radius: var(--bro-radius-rund);
  background: var(--bro-flaeche-1);
  color: var(--bro-tinte-2);
}

.portal-us-editor-spalten {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bro-abstand-16);
  align-items: start;
}

@media (width >= 860px) {
  .portal-us-editor-spalten {
    grid-template-columns: minmax(0, 1fr) 24rem;
  }

  .portal-us-editor-werkzeug {
    position: sticky;
    top: var(--bro-abstand-16);
    max-height: calc(100vh - var(--bro-abstand-32));
    overflow-y: auto;
  }
}

.portal-us-editor-pdf {
  display: grid;
  min-width: 0;
  gap: var(--bro-abstand-8);
}

.portal-us-editor-pdf-werkzeug {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--bro-abstand-4);
}

.portal-us-editor-blaetter {
  overflow-x: auto;
  padding: var(--bro-abstand-8);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
  background: var(--bro-flaeche-1);
}

.portal-us-editor-dokument {
  display: grid;
  gap: var(--bro-abstand-8);
}

.portal-us-editor-blatt {
  display: grid;
  margin: 0 0 var(--bro-abstand-16);
  gap: var(--bro-abstand-4);
}

.portal-us-editor-blatt figcaption {
  color: var(--bro-tinte-2);
}

.portal-us-editor-blatt svg {
  background: var(--bro-flaeche-0);
  box-shadow: 0 0 0 1px var(--bro-linie);
}

.portal-us-editor-werkzeug {
  display: grid;
  min-width: 0;
  gap: var(--bro-abstand-12);
}

.portal-us-editor-schritte {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--bro-abstand-4);
}

.portal-us-editor-reiter {
  padding: var(--bro-abstand-8);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
  color: var(--bro-tinte-1);
  font-size: var(--bro-schrift-klein-groesse);
  text-align: center;
  text-decoration: none;
}

.portal-us-editor-reiter[aria-current="step"] {
  border-color: var(--bro-akzent);
  background: var(--bro-akzent-flaeche);
  color: var(--bro-akzent-text);
  font-weight: var(--bro-schrift-betont-gewicht);
}

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

.portal-us-editor-haken {
  color: var(--bro-erfolg);
}

.portal-us-editor-fach {
  display: grid;
  gap: var(--bro-abstand-12);
}

/* Editor, Fach „2 Felder“ (#11527): Personen in eigener Farbe, Chips zur
   Auswahl, Feldliste und die Rahmen im PDF samt Griff zum Größe-Ändern. */
.portal-use-person-1 {
  --use-farbe: var(--bro-akzent);
}

.portal-use-person-2 {
  --use-farbe: var(--bro-modul-personal);
}

.portal-use-person-3 {
  --use-farbe: var(--bro-modul-fahrdienst);
}

.portal-use-person-4 {
  --use-farbe: var(--bro-modul-finanzen);
}

.portal-use-person-5 {
  --use-farbe: var(--bro-modul-marketing);
}

.portal-use-person-6 {
  --use-farbe: var(--bro-modul-berichte);
}

.portal-use-felder {
  display: grid;
  gap: var(--bro-abstand-16);
}

.portal-use-feld-neu {
  display: grid;
  gap: var(--bro-abstand-12);
}

.portal-use-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-8);
  margin: 0;
  padding: 0;
  border: 0;
}

.portal-use-chips legend {
  margin-bottom: var(--bro-abstand-4);
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
}

.portal-use-chip {
  display: inline-flex;
  gap: var(--bro-abstand-4);
  align-items: center;
  padding: var(--bro-abstand-4) var(--bro-abstand-12);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-rund);
  background: var(--bro-flaeche-0);
  color: var(--bro-tinte-1);
  cursor: pointer;
}

.portal-use-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.portal-use-chip:has(input:checked) {
  border-color: var(--use-farbe, var(--bro-akzent));
  background: color-mix(in srgb, var(--use-farbe, var(--bro-akzent)) 13%, var(--bro-flaeche-0));
  font-weight: var(--bro-schrift-betont-gewicht);
}

.portal-use-chip:has(input:focus-visible) {
  outline: var(--bro-fokus-breite) solid var(--bro-akzent);
  outline-offset: var(--bro-fokus-abstand);
}

.portal-use-punkt {
  width: 0.625rem;
  height: 0.625rem;
  flex: none;
  border-radius: var(--bro-radius-rund);
  background: var(--use-farbe);
}

.portal-use-hinweis {
  margin: 0;
  color: var(--bro-tinte-2);
}

.portal-use-warnung {
  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);
  color: var(--bro-tinte-1);
}

.portal-use-feldliste {
  display: grid;
  gap: var(--bro-abstand-16);
}

.portal-use-person {
  display: grid;
  gap: var(--bro-abstand-8);
}

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

.portal-use-leer {
  margin: 0;
  color: var(--bro-tinte-2);
}

.portal-use-eintraege {
  display: grid;
  gap: var(--bro-abstand-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.portal-use-eintrag {
  padding: var(--bro-abstand-8);
  border-left: 3px solid var(--use-farbe);
  border-radius: var(--bro-radius-s);
  background: var(--bro-flaeche-0);
}

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

.portal-use-eintrag-kopf form {
  margin: 0;
}

.portal-use-sprung {
  flex: 1;
  color: var(--bro-tinte-1);
}

.portal-use-schalter {
  padding: var(--bro-abstand-4) var(--bro-abstand-12);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-rund);
  background: var(--bro-flaeche-0);
  color: var(--bro-tinte-2);
  font: inherit;
  cursor: pointer;
}

.portal-use-schalter[aria-pressed="true"] {
  border-color: var(--bro-akzent);
  background: var(--bro-akzent-flaeche);
  color: var(--bro-akzent-text);
  font-weight: var(--bro-schrift-betont-gewicht);
}

.portal-use-genau summary {
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
  cursor: pointer;
}

.portal-use-genau[open] summary {
  margin-bottom: var(--bro-abstand-8);
}

.portal-use-blatt {
  position: relative;
  border: 1px solid var(--bro-linie);
  background: var(--bro-flaeche-0);
  cursor: crosshair;
  user-select: none;
}

.portal-use-blatt img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto 1 / 1.414;
}

.portal-use-feld {
  position: absolute;
  display: flex;
  align-items: flex-end;
  min-width: 0;
  overflow: hidden;
  border: 2px solid var(--use-farbe);
  border-radius: var(--bro-radius-s);
  background: color-mix(in srgb, var(--use-farbe) 12%, transparent);
  color: var(--bro-tinte-1);
  font-size: var(--bro-schrift-fein-groesse);
  line-height: 1.2;
  cursor: move;
  touch-action: none;
  scroll-margin: var(--bro-abstand-32);
}

.portal-use-feld-text {
  overflow: hidden;
  padding: 0 var(--bro-abstand-4);
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

.portal-use-griff {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0.75rem;
  height: 0.75rem;
  background: var(--use-farbe);
  cursor: nwse-resize;
}

.portal-use-feld:target,
.portal-use-feld-leuchtet {
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--use-farbe) 35%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
  .portal-use-feld-leuchtet {
    animation: portal-use-feld-leuchtet 1.2s ease 2;
  }
}

@keyframes portal-use-feld-leuchtet {
  50% {
    box-shadow: 0 0 0 10px color-mix(in srgb, var(--use-farbe) 45%, transparent);
  }
}

/* Einstellungen → Bro Sign: Betreff und Text je Mail mit Vorschau (#11703). */
.portal-us-texte {
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
  background: var(--bro-flaeche-1);
  padding: var(--bro-abstand-8) var(--bro-abstand-12);
  margin-bottom: var(--bro-abstand-8);
}

.portal-us-texte > summary {
  cursor: pointer;
}

.portal-us-texte[open] > summary {
  margin-bottom: var(--bro-abstand-8);
}

/* Editor, Fach „1 Unterzeichner“ (#11526): Zeilen wie die Unterzeichnerkarte. */
.portal-use-u {
  display: grid;
  gap: var(--bro-abstand-12);
}

.portal-use-u-personen {
  display: grid;
  gap: var(--bro-abstand-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.portal-use-u-person {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--bro-abstand-8) var(--bro-abstand-12);
  align-items: center;
  padding: var(--bro-abstand-8) 0;
  border-bottom: 1px solid var(--bro-linie);
}

.portal-use-u-kreis {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--bro-radius-rund);
  background: color-mix(in srgb, var(--use-farbe, var(--bro-akzent)) 18%, var(--bro-flaeche-0));
  color: var(--bro-tinte-1);
  border: 2px solid var(--use-farbe, var(--bro-akzent));
  font-size: var(--bro-schrift-klein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
}

.portal-use-u-text {
  min-width: 0;
}

.portal-use-u-text p,
.portal-use-u-frage,
.portal-use-u-leer {
  margin: 0;
  overflow-wrap: anywhere;
}

.portal-use-u-name,
.portal-use-u-frage {
  font-weight: var(--bro-schrift-betont-gewicht);
}

.portal-use-u-knoepfe {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-8);
  align-items: flex-start;
}

.portal-use-u-reihe {
  display: flex;
  gap: var(--bro-abstand-4);
}

.portal-use-u-aufklapp > summary {
  list-style: none;
  cursor: pointer;
}

.portal-use-u-aufklapp > summary::-webkit-details-marker {
  display: none;
}

.portal-use-u-aufklapp[open] {
  flex-basis: 100%;
}

.portal-use-u-aufklapp[open] > summary {
  margin-bottom: var(--bro-abstand-8);
}

.portal-use-u-neu > summary {
  justify-self: start;
}

.portal-use-u-haken {
  display: flex;
  gap: var(--bro-abstand-8);
  align-items: center;
}

.portal-use-u-leer {
  color: var(--bro-tinte-2);
}

.portal-use-u-weiter {
  display: flex;
  justify-content: flex-end;
  margin: 0;
}

/* „Neue Unterschrift“ (#11581): drei Wege als Karten, Kunde, Ablage für die PDF. */
.portal-us-anlegen {
  display: grid;
  gap: var(--bro-abstand-16);
}

.portal-us-wege {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--bro-abstand-8);
}

.portal-us-weg {
  display: grid;
  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);
  color: var(--bro-tinte-1);
  text-decoration: none;
}

.portal-us-weg[aria-current="page"] {
  border-color: var(--bro-akzent);
  background: var(--bro-akzent-flaeche);
}

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

.portal-us-anlegen-kunde p {
  margin: 0;
}

.portal-us-anlegen-suche {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-8);
  align-items: flex-end;
}

.portal-us-anlegen-treffer,
.portal-us-anlegen-vorlagen,
.portal-us-serie-kontakte {
  display: grid;
  gap: var(--bro-abstand-4);
  margin: var(--bro-abstand-8) 0;
  padding: 0;
  list-style: none;
}

.portal-us-anlegen-vorlagen a[aria-current="true"] {
  font-weight: var(--bro-schrift-betont-gewicht);
}

.portal-us-anlegen-weg {
  display: grid;
  gap: var(--bro-abstand-12);
}

.portal-us-anlegen-rolle,
.portal-us-serie-wahl {
  display: grid;
  gap: var(--bro-abstand-8);
  padding: var(--bro-abstand-12);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
}

.portal-us-ablage {
  display: grid;
  gap: var(--bro-abstand-8);
}

.portal-us-ablage-text {
  display: grid;
  gap: var(--bro-abstand-4);
}

/*
 * Das Dateifeld ist selbst die Ablagefläche: groß, gestrichelt, mit dem
 * gewählten Dateinamen sichtbar. Ablegen wirkt auf der ganzen Fläche — ohne Skript.
 */
.portal-us-ablage-datei {
  width: 100%;
  min-height: 6rem;
  padding: var(--bro-abstand-16);
  border: 2px dashed var(--bro-linie);
  border-radius: var(--bro-radius-m);
  background: var(--bro-flaeche-1);
  cursor: pointer;
}

.portal-us-ablage-datei:hover,
.portal-us-ablage-datei:focus-visible {
  border-color: var(--bro-akzent);
}

/* Serienversand (#11581): Prüfung im Rahmen, die gewählte PDF bleibt stehen. */
.portal-us-serie-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-8);
}

.portal-us-serie-pruefung {
  width: 100%;
  min-height: 16rem;
  margin-top: var(--bro-abstand-12);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
  background: var(--bro-flaeche-0);
}

.portal-us-serie-ergebnis {
  display: grid;
  gap: var(--bro-abstand-8);
}

/* Vertragsgenerator: Detailseite, Anlegen und Kopieren (#11674, Dach #11671).
   Kopf mit Stand und nächster Aktion, eine Hinweisleiste, ab Desktop zwei
   Spalten (Vertragstext links, klebende Eckdaten rechts), darunter
   untereinander mit den Eckdaten zuerst. Die Nebenbereiche sind Schubladen
   über `:target` — ohne Skript zu öffnen und zu schließen. Nur Tokens. */

.portal-vg {
  display: grid;
  gap: var(--bro-abstand-16);
  min-width: 0;
}

/* ── Kopf: Stand links, Aktionen rechts */
.portal-vg-kopf {
  display: grid;
  gap: var(--bro-abstand-12);
}

.portal-vg-kopfzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--bro-abstand-12);
}

.portal-vg-stand {
  display: grid;
  gap: var(--bro-abstand-4);
  min-width: 0;
}

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

.portal-vg-stand-zeile {
  margin: 0;
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
  overflow-wrap: anywhere;
}

.portal-vg-aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--bro-abstand-8);
  min-width: 0;
}

.portal-vg-aktionen > p,
.portal-vg-aktionen .vertrag-bro-sign {
  margin: 0;
}

.portal-vg-aktionen .vertrag-bro-sign-formular {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--bro-abstand-8);
}

/* ── Vertragsweg und Summen im Kopf (#13338) */
.portal-vg-schrittleiste {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--bro-abstand-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.portal-vg-vertragsschritt {
  display: grid;
  align-content: start;
  gap: var(--bro-abstand-4);
  min-width: 0;
  padding: var(--bro-abstand-8);
  border-top: 3px solid var(--bro-linie);
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
  overflow-wrap: anywhere;
}

.portal-vg-vertragsschritt-erledigt {
  border-top-color: var(--bro-erfolg);
  color: var(--bro-tinte-1);
}

.portal-vg-vertragsschritt-aktuell {
  border-top-color: var(--bro-akzent);
  color: var(--bro-tinte-1);
  font-weight: var(--bro-schrift-betont-gewicht);
}

.portal-vg-vertragsschritt-uebersprungen {
  color: var(--bro-tinte-2);
}

.portal-vg-vertragsschritt time {
  color: var(--bro-tinte-2);
  font-weight: var(--bro-schrift-klein-gewicht);
}

.portal-vg-zahlen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--bro-abstand-8);
  margin: 0;
}

.portal-vg-zahlen > div {
  display: grid;
  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-0);
}

.portal-vg-zahlen dt {
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
}

.portal-vg-zahlen dd {
  margin: 0;
  font-size: var(--bro-schrift-betont-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
  overflow-wrap: anywhere;
}

.portal-vg-unterschrift-einstiege {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-8);
  margin-block-start: 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-vg-schrittleiste {
    grid-template-columns: 1fr;
  }

  .portal-vg-vertragsschritt {
    grid-template-columns: minmax(0, 1fr) auto;
    border-top: 0;
    border-left: 3px solid var(--bro-linie);
  }

  .portal-vg-vertragsschritt-erledigt {
    border-left-color: var(--bro-erfolg);
  }

  .portal-vg-vertragsschritt-aktuell {
    border-left-color: var(--bro-akzent);
  }

  .portal-vg-zahlen {
    grid-template-columns: 1fr;
  }
}

/* Die Statuskarte des Unterschriftsstands (#11577, S7): wie der Kasten
   „Nächster Schritt“ der Mappenseite — ein Satz, daneben die Knöpfe. */
.vertrag-bro-sign-stand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-8) var(--bro-abstand-12);
  padding: var(--bro-abstand-8) var(--bro-abstand-12);
  border-left: 3px solid var(--bro-akzent);
}

.vertrag-bro-sign-stand-ok {
  border-left-color: var(--bro-erfolg);
}

.vertrag-bro-sign-stand > p {
  margin: 0;
}

.vertrag-bro-sign-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-8);
}

.vertrag-bro-sign-inline {
  display: inline;
  margin: 0;
}

/* ── Bereiche: die Schalter zu den Schubladen */
.portal-vg-bereiche {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ── Hinweisleiste unter dem Kopf */
.portal-vg-hinweise {
  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: var(--bro-schrift-klein-groesse);
}

.portal-vg-hinweise ul {
  display: grid;
  gap: var(--bro-abstand-4);
  margin: 0;
  padding-left: var(--bro-abstand-16);
}

.portal-vg-hinweise form {
  display: inline;
}

/* ── Zwei Spalten ab Desktop; darunter Eckdaten zuerst */
.portal-vg-raster {
  display: grid;
  gap: var(--bro-abstand-16);
  min-width: 0;
}

.portal-vg-inhalt,
.portal-vg-seite {
  display: grid;
  align-content: start;
  gap: var(--bro-abstand-16);
  min-width: 0;
}

@media (min-width: 1280px) {
  .portal-vg-raster {
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
    align-items: start;
  }

  .portal-vg-seite {
    position: sticky;
    top: var(--bro-abstand-16);
    grid-row: 1;
    grid-column: 2;
    max-height: calc(100dvh - var(--bro-abstand-32));
    overflow-y: auto;
  }

  .portal-vg-inhalt {
    grid-row: 1;
    grid-column: 1;
  }
}

.portal-vg-seite .bb-datenkarten {
  display: grid;
  gap: var(--bro-abstand-12);
}

.portal-vg-positionsliste {
  display: grid;
  gap: var(--bro-abstand-4);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--bro-schrift-klein-groesse);
}

.portal-vg-positionsliste li {
  display: flex;
  justify-content: space-between;
  gap: var(--bro-abstand-8);
  overflow-wrap: anywhere;
}

/* ── Vertragstext: Verzeichnis und Abschnitte */
.portal-vg-verzeichnis ol {
  display: grid;
  gap: var(--bro-abstand-4);
  margin: 0;
  padding-left: var(--bro-abstand-24);
  font-size: var(--bro-schrift-klein-groesse);
}

.portal-vg-texte {
  display: grid;
  gap: var(--bro-abstand-12);
}

.portal-vg-abschnitt {
  scroll-margin-top: var(--bro-abstand-24);
  padding: var(--bro-abstand-12);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
  background: var(--bro-flaeche-0);
}

.portal-vg-abschnitt > summary {
  display: grid;
  gap: var(--bro-abstand-4);
  cursor: pointer;
}

.portal-vg-abschnitt-titel {
  margin: 0;
  font-weight: var(--bro-schrift-betont-gewicht);
}

.portal-vg-lesetext {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.portal-vg-vorschau {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.portal-vg-abschnitt[open] .portal-vg-vorschau {
  display: none;
}

.portal-vg-abschnitt textarea {
  width: 100%;
  margin-top: var(--bro-abstand-8);
  field-sizing: content;
  resize: vertical;
}

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

.portal-vg-offen-sprung {
  font-size: var(--bro-schrift-klein-groesse);
}

/* ── Schubladen: rechts angeschlagen, ohne Skript über `:target` */
.portal-vg-schublade {
  display: none;
}

.portal-vg-schublade:target,
.portal-vg-schublade.portal-vg-schublade-offen {
  position: fixed;
  z-index: 70;
  inset: 0;
  display: block;
}

html:has(.portal-vg-schublade:target, .portal-vg-schublade.portal-vg-schublade-offen) {
  overflow: hidden;
}

.portal-vg-schublade-hintergrund {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--bro-tinte-1) 35%, transparent);
}

.portal-vg-schublade-flaeche {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(40rem, 100vw);
  border-radius: var(--bro-radius-l) 0 0 var(--bro-radius-l);
  background: var(--bro-flaeche-0);
  box-shadow: var(--bro-schatten-dialog);
}

.portal-vg-schublade-breit .portal-vg-schublade-flaeche {
  width: min(64rem, 100vw);
}

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

.portal-vg-schublade-kopf h2 {
  margin: 0;
  font-size: var(--bro-schrift-betont-groesse);
}

.portal-vg-schublade-inhalt {
  display: grid;
  align-content: start;
  gap: var(--bro-abstand-16);
  padding: var(--bro-abstand-16);
  overflow-y: auto;
}

.portal-vg-tabellenregion {
  max-width: 100%;
  overflow-x: auto;
}

@media (prefers-reduced-motion: no-preference) {
  .portal-vg-schublade:target .portal-vg-schublade-flaeche,
  .portal-vg-schublade.portal-vg-schublade-offen .portal-vg-schublade-flaeche {
    animation: portal-schublade-ein var(--bro-schublade-einfahrdauer)
      var(--bro-schublade-einfahrkurve);
  }
}

@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-vg-schublade-flaeche {
    border-radius: 0;
  }

  .portal-vg-aktionen {
    justify-content: flex-start;
  }
}

/* ── Anlegen und Kopieren: nummerierte Schritte */
.portal-vg-schritte {
  display: grid;
  gap: var(--bro-abstand-16);
  min-width: 0;
}

.portal-vg-schritt {
  display: grid;
  gap: var(--bro-abstand-12);
  min-width: 0;
  margin: 0;
  padding: var(--bro-abstand-16);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-m);
}

.portal-vg-schritt > legend {
  padding: 0 var(--bro-abstand-4);
  font-weight: var(--bro-schrift-betont-gewicht);
}

.portal-vg-felder {
  display: grid;
  gap: var(--bro-abstand-12);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.portal-vg-felder > label {
  display: grid;
  gap: var(--bro-abstand-4);
  min-width: 0;
}

.portal-vg-felder > fieldset {
  display: grid;
  grid-column: 1 / -1;
  gap: var(--bro-abstand-12);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

.portal-vg-verzeichnis {
  margin-bottom: var(--bro-abstand-12);
}

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

/* Niemand zuständig (#11791, wie die Klickdemo): gelb, daneben „festlegen“. */
.portal-akte-ohne-zustaendig {
  color: var(--bro-warnung);
  font-weight: var(--bro-schrift-betont-gewicht);
}

/* Die Kennzahlenleiste unter dem Kopf (#11791) — dieselben Kacheln wie über
   der Kundenliste (`.portal-kacheln`), mit Abstand zum Kopf. */
.portal-akte-leiste {
  margin-top: var(--bro-abstand-16);
}

.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;
}

/* Überblick zweispaltig wie die Klickdemo (#11787): links Aufgaben,
   Aktivitäten und Notizen, rechts Kontakt, Ansprechpartner und die
   eingeklappten Stammdaten. Auf schmalen Geräten untereinander (#6744). */
.portal-akte-ueberblick {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--bro-abstand-16);
  align-items: 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) {
  .portal-akte-ueberblick {
    grid-template-columns: minmax(0, 1fr);
  }
}

.portal-akte-spalte {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-16);
  min-width: 0;
}

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

.bb-datenkarte .portal-akte-karte-kopf h2 {
  padding: 0;
  border-bottom: 0;
  background: none;
}

.portal-akte-karte > p,
.portal-akte-karte > details,
.portal-akte-aktivitaeten {
  margin: 0;
  padding: var(--bro-abstand-8) var(--bro-abstand-16);
}

.portal-akte-aktivitaeten {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  list-style: none;
}

.portal-akte-aktivitaeten li {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
}

.portal-akte-notiz {
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.portal-akte-notizen-aeltere summary,
.portal-akte-stammdaten > summary {
  cursor: pointer;
}

.portal-akte-stammdaten {
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-konsole-radius-box);
}

.portal-akte-stammdaten > summary {
  padding: var(--bro-abstand-12) var(--bro-abstand-16);
  background: var(--bro-flaeche-0);
}

.portal-akte-stammdaten > summary h2 {
  display: inline;
  margin: 0;
  font-size: var(--bro-schrift-betont-groesse);
  font-weight: var(--bro-schrift-titel-gewicht);
}

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

.portal-akte-stammdaten > :not(summary) {
  margin: var(--bro-abstand-12);
}

.portal-akte-aufgaben li,
.bb-box[data-endkontakte] li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-8);
}

.portal-akte-anrufen {
  margin-left: auto;
}

/* Finanzen: drei Felder Offen · Zahlungsverhalten · Bonität (#11787). */
.portal-akte-felder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--bro-abstand-16);
}

.portal-akte-feld > :not(h2) {
  margin: 0;
  padding: var(--bro-abstand-4) var(--bro-abstand-16);
}

.portal-akte-feld > :last-child {
  padding-bottom: var(--bro-abstand-12);
}

.portal-akte-feld-wert {
  font-size: var(--bro-schrift-titel-groesse);
  font-weight: var(--bro-schrift-titel-gewicht);
}

.portal-akte-anfordern {
  margin: 0;
}

/* Kundenakte wie die Klickdemo (#12795): Kopf ohne Kartenrahmen, die
   Kennzahlleiste schließt direkt an; Reiter als eigene abgerundete Leiste,
   der Inhalt darunter ohne Rahmen. Farben nur über Tokens (B14.7). */
.portal-akte-kopf[data-akten-kopf-frei] {
  padding: 0;
  border: 0;
  background: transparent;
}

.bb-box[data-kundenakte] {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.bb-box[data-kundenakte] > .bb-reiter {
  padding: 0 var(--bro-abstand-12);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-l);
  background: var(--bro-flaeche-1);
}

.bb-box[data-kundenakte] > .bb-box-inhalt {
  padding: var(--bro-abstand-16) 0 0;
}

/* Kontakt als Symbolliste mit Links (#12795). */
.portal-akte-kontaktwege {
  display: grid;
  gap: var(--bro-abstand-8);
  margin: 0;
  padding: var(--bro-abstand-12) var(--bro-abstand-16);
  list-style: none;
}

.portal-akte-kontaktwege > li {
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-8);
  min-width: 0;
  overflow-wrap: anywhere;
}

.portal-akte-kontaktweg-symbol {
  display: inline-flex;
  flex: none;
  color: var(--bro-tinte-3);
}

.portal-akte-umsatz {
  padding-bottom: var(--bro-abstand-12);
}

.portal-akte-umsatz .portal-akte-karte-kopf {
  padding: var(--bro-abstand-12) var(--bro-abstand-16) 0;
}

.portal-akte-umsatz > .portal-umsatzlinie {
  margin: var(--bro-abstand-8) var(--bro-abstand-16) 0;
  width: calc(100% - 2 * var(--bro-abstand-16));
}

/* Finanzen: drei flache Felder (#12795) — Wert in der Farbe des Urteils. */
.portal-akte-feld-wert {
  margin: 0;
  font-size: var(--bro-schrift-betont-groesse);
  font-weight: var(--bro-schrift-titel-gewicht);
}

.portal-akte-feld-wert--erfolg {
  color: var(--bro-erfolg);
}

.portal-akte-feld-wert--warnung {
  color: var(--bro-warnung);
}

.portal-akte-feld-wert--fehler {
  color: var(--bro-fehler);
}

.portal-akte-feld-wert--neutral {
  color: var(--bro-tinte-1);
}

.portal-akte-feld-herkunft > summary {
  cursor: pointer;
}

/* Die Linie in der Umsatzkarte (dieselbe Zeichnung wie in der Vorschau,
   `kundenliste/umsatzlinie.ts`). */
.portal-akte-umsatz .portal-umsatzlinie {
  display: block;
  overflow: visible;
}

.portal-akte-umsatz .portal-umsatzlinie-linie {
  stroke: var(--bro-akzent);
  stroke-width: 2.5;
  stroke-linejoin: round;
}

.portal-akte-umsatz .portal-umsatzlinie-punkt {
  fill: var(--bro-akzent);
}

.portal-akte-betrag {
  text-align: right;
}

.portal-akte-kontakt-leer {
  margin: 0;
  padding: var(--bro-abstand-12) var(--bro-abstand-16);
}

/* Firmenlogo statt Kürzel (Nasri, 01.11.2026): helle Fläche mit Linie, das
   Bild wird eingepasst (Alt `Kunden/Detail.cshtml:29-34`). Gilt auch für Liste
   und Vorschau, die dieselbe Klasse `portal-firmenlogo` tragen. */
.portal-firmenlogo {
  border: 1px solid var(--bro-linie);
  background: var(--bro-flaeche-1);
}

.portal-firmenlogo img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  padding: var(--bro-abstand-4);
  object-fit: contain;
}

/* Kundenliste als Tabelle mit Kennzahlen (#11788, Vorlage: Klickdemo
   „Liste“). Werkzeugzeile neben der Suche, Umsatzbalken relativ zum größten
   Kunden, Ampelpunkt am letzten Kontakt. Farben nur über Tokens (B14.7). */

.portal-kundenliste-box .bb-filterband {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-12);
}

.portal-kundenliste-box .bb-filterband > .bb-suchband {
  flex: 1 1 280px;
}

.portal-kundenliste-box .bb-filterzeile {
  display: contents;
}

/* Eine Werkzeugzeile wie in der Klickdemo (#12793): Suche, Stufen,
   Zuständig, die Klappe „Filter“ und der Umschalter Liste/Zustand. Reiter,
   Schnellfilter, Merkmale und gespeicherte Ansichten liegen in der Klappe. */
.portal-kundenliste-werkzeuge,
.portal-kundenliste-zweitzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-8);
  flex-basis: 100%;
}

.portal-kundenliste-werkzeuge > .bb-suchband {
  flex: 1 1 260px;
  border: 0;
  padding: 0;
}

.portal-kundenliste-werkzeuge > .portal-kundenliste-umschalter {
  margin-left: auto;
}

.portal-kundenliste-zustaendig {
  display: inline-flex;
  align-items: center;
  gap: var(--bro-abstand-8);
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
}

.portal-kundenliste-filter {
  position: relative;
}

.portal-kundenliste-filter > summary {
  list-style: none;
  cursor: pointer;
}

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

.portal-kundenliste-filter-klappe {
  position: absolute;
  z-index: 3;
  top: calc(100% + var(--bro-abstand-4));
  right: 0;
  display: grid;
  gap: var(--bro-abstand-16);
  width: min(640px, calc(100vw - 2 * var(--bro-abstand-16)));
  max-height: 70vh;
  overflow: auto;
  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-dialog);
}

.portal-kundenliste-filter-teil {
  display: grid;
  gap: var(--bro-abstand-8);
}

.portal-kundenliste-filter-teil .portal-chips {
  flex-wrap: wrap;
}

/* Sammelaktionen erst mit einer markierten Zeile (#12793). Ohne `:has`
   bleibt die Leiste sichtbar — nichts geht verloren. */
.portal-kundenliste-sammelleiste {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--bro-abstand-12);
  margin-bottom: var(--bro-abstand-8);
  padding: var(--bro-abstand-12);
  border-radius: var(--bro-radius-m);
  background: var(--bro-akzent-flaeche);
}

.portal-kundenliste-sammelleiste form[data-sammelaktion] {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--bro-abstand-12);
}

.portal-kundenliste-box:not(:has(input[name="kunde"]:checked)) .portal-kundenliste-sammelleiste {
  display: none;
}

.portal-kundenliste-box th a {
  color: inherit;
  text-decoration: none;
}

/* Der Baustein schreibt an jeden sortierbaren Kopf `aria-sort`; hervorgehoben
   wird nur der aktive. */
.portal-kundenliste-box th[aria-sort]:not([aria-sort="none"]) a {
  color: var(--bro-tinte-1);
}

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

.portal-kundenliste-niemand {
  background: var(--bro-warnung-flaeche);
  color: var(--bro-warnung);
}

/* „Spalte wählen“ im Kopf der Kennzahl-Spalte (Nasri, 01.11.2026). */
.portal-kundenliste-spalte-waehlen {
  margin-left: var(--bro-abstand-4);
  color: var(--bro-tinte-3);
  text-decoration: none;
}

.portal-kundenliste-spalte-waehlen:hover,
.portal-kundenliste-spalte-waehlen:focus-visible {
  color: var(--bro-tinte-1);
}

.portal-kundenliste-umsatz {
  display: inline-flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
  min-width: 96px;
}

.portal-kundenliste-balken {
  display: block;
  width: var(--portal-kundenliste-anteil, 0%);
  height: 3px;
  border-radius: var(--bro-radius-rund);
  background: var(--bro-akzent);
}

.portal-kundenliste-zahl {
  text-align: right;
  white-space: nowrap;
}

.portal-kundenliste-zahl .portal-name-text {
  align-items: flex-end;
}

.portal-kundenliste-ueberfaellig {
  color: var(--bro-fehler);
}

.portal-kundenliste-ampel {
  display: inline-block;
  width: var(--bro-abstand-8);
  height: var(--bro-abstand-8);
  border-radius: var(--bro-radius-rund);
  vertical-align: middle;
}

.portal-kundenliste-ampel--gruen {
  background: var(--bro-erfolg);
}

.portal-kundenliste-ampel--gelb {
  background: var(--bro-warnung);
}

.portal-kundenliste-ampel--rot {
  background: var(--bro-fehler);
}

/* Vorschau beim Kundenklick (#11790): rechts neben der Tabelle, die dafür
   schmaler wird. Auf schmalen Geräten eine Vollbild-Schublade (unten). */
.portal-kundenliste-mit-vorschau {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bro-abstand-16);
  align-items: start;
}

/* Offen klappt die Vorschau INNERHALB der Listenkarte auf (#12794,
   Klickdemo: `.bereich.offen`, 380 px): eine gemeinsame Karte, die Vorschau
   rechts mit einer Trennlinie, die Tabelle wird schmaler. */
.portal-kundenliste-mit-vorschau.portal-kundenliste-vorschau-offen {
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 0;
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-konsole-radius-box);
  background: var(--bro-flaeche-1);
}

.portal-kundenliste-vorschau-offen > .portal-kundenliste-box {
  border: 0;
  border-radius: 0;
}

.portal-kundenliste-vorschau-offen > .portal-kundenvorschau {
  top: 0;
  border: 0;
  border-left: 1px solid var(--bro-linie);
  border-radius: 0;
}

.portal-kundenliste-box tr[data-kundenvorschau] {
  cursor: pointer;
}

.portal-kundenliste-box tr[data-kundenvorschau][aria-selected="true"] {
  background: var(--bro-akzent-flaeche);
}

.portal-kundenliste-box tr[data-kundenvorschau]:focus-visible {
  outline: var(--bro-fokus-breite) solid var(--bro-akzent);
  outline-offset: calc(-1 * var(--bro-fokus-breite));
}

.portal-kundenvorschau {
  position: sticky;
  top: var(--bro-abstand-16);
  max-height: calc(100vh - var(--bro-abstand-32));
  overflow-y: auto;
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-konsole-radius-box);
  background: var(--bro-flaeche-1);
}

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

.portal-kundenvorschau-seite {
  position: static;
  max-height: none;
  max-width: 560px;
}

.portal-kundenvorschau-laedt,
.portal-kundenvorschau > [role="alert"] {
  margin: 0;
  padding: var(--bro-abstand-16);
}

.portal-kundenvorschau-inhalt {
  display: grid;
}

.portal-kundenvorschau-zu {
  flex: none;
  line-height: 1;
}

.portal-kundenvorschau-kopf {
  display: grid;
  gap: var(--bro-abstand-8);
  padding: var(--bro-abstand-16);
  border-bottom: 1px solid var(--bro-linie);
}

.portal-kundenvorschau-titel {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--bro-abstand-8);
}

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

.portal-kundenvorschau-zeile {
  margin: 0;
  color: var(--bro-tinte-2);
}

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

/* Drei gleich breite Knöpfe wie in der Klickdemo (#12794). */
.portal-kundenvorschau-knoepfe > a {
  flex: 1 1 0;
  justify-content: center;
  min-width: 0;
}

.portal-kundenvorschau-baustein {
  display: grid;
  gap: var(--bro-abstand-8);
  padding: var(--bro-abstand-12) var(--bro-abstand-16);
  border-bottom: 1px solid var(--bro-linie);
}

.portal-kundenvorschau-baustein > h3 {
  margin: 0;
  color: var(--bro-tinte-3);
  font-weight: var(--bro-schrift-betont-gewicht);
  text-transform: uppercase;
}

.portal-kundenvorschau-baustein p {
  margin: 0;
}

.portal-kundenvorschau-bro {
  background: var(--bro-akzent-flaeche);
}

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

.portal-kundenvorschau-liste {
  display: grid;
  gap: var(--bro-abstand-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.portal-kundenvorschau-liste > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-4) var(--bro-abstand-8);
}

.portal-kundenvorschau-wege {
  flex-basis: 100%;
  font-size: var(--bro-schrift-klein-groesse);
}

.portal-kundenvorschau-daten {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--bro-abstand-4) var(--bro-abstand-12);
  margin: 0;
}

.portal-kundenvorschau-daten dt {
  color: var(--bro-tinte-2);
}

.portal-kundenvorschau-daten dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.portal-kundenvorschau-zahlen dd {
  text-align: right;
}

.portal-kundenvorschau-notiz {
  white-space: pre-line;
}

/* Die Umsatzkurve als Linie (#12794), auch in der Akte. */
.portal-umsatzlinie {
  display: block;
  overflow: visible;
}

.portal-umsatzlinie-linie {
  stroke: var(--bro-akzent);
  stroke-width: 2.5;
  stroke-linejoin: round;
}

.portal-umsatzlinie-punkt {
  fill: var(--bro-akzent);
}

.portal-kundenvorschau-fuss {
  padding: var(--bro-abstand-12) var(--bro-abstand-16);
}

/* „⚙ Vorschau anpassen“ als gestrichelter Knopf über die ganze Breite. */
.portal-kundenvorschau-fuss > a {
  display: flex;
  justify-content: center;
  width: 100%;
  border-style: dashed;
  color: var(--bro-tinte-2);
}

.portal-kundenvorschau-niemand {
  color: var(--bro-warnung);
}

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

/* Mobil: Zuständig und Letzter Kontakt fallen weg, kein waagerechtes
   Scrollen (Ticket #11788, „Fertig heißt“). */
@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-kundenliste-box .portal-kundenliste-schmal-aus {
    display: none;
  }

  .portal-kundenliste-box table {
    width: 100%;
    table-layout: auto;
  }

  .portal-kundenliste-umsatz {
    min-width: 0;
  }

  /* Enge Zellen wie in der Klickdemo (#12793): Die Tabelle passt ohne
     waagerechtes Rollen auf ein Telefon. */
  .portal-kundenliste-box th,
  .portal-kundenliste-box td {
    padding-inline: var(--bro-abstand-4);
  }

  .portal-kundenliste-zahl {
    white-space: normal;
  }

  .portal-kundenliste-filter-klappe {
    right: auto;
    left: 0;
    min-width: 0;
    max-width: calc(100vw - var(--bro-abstand-32));
  }

  /* Die Vorschau als Vollbild-Schublade (#11790, „Mobil“). */
  .portal-kundenliste-mit-vorschau.portal-kundenliste-vorschau-offen {
    grid-template-columns: minmax(0, 1fr);
    border: 0;
    background: transparent;
  }

  .portal-kundenliste-mit-vorschau > .portal-kundenvorschau {
    position: fixed;
    z-index: 30;
    inset: 0;
    max-height: none;
    border: 0;
    border-radius: 0;
  }

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

/* Ansicht „Zustand“ (#11792, Vorlage: Klickdemo, Umschalter „Liste /
   Zustand“): Umsatzverteilung über drei Spalten Läuft gut / Beobachten /
   Handeln. Farben nur über Tokens (B14.7). */
.portal-kundenliste-umschalter .bro-segment {
  border: 0;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
}

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

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

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

.portal-kundenliste-verteilung-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--bro-abstand-8);
}

.portal-kundenliste-verteilung-balken {
  display: flex;
  gap: 2px;
  height: var(--bro-abstand-12);
  overflow: hidden;
  border-radius: var(--bro-radius-rund);
}

.portal-kundenliste-verteilung-teil {
  display: block;
  min-width: 2px;
  background: var(--bro-akzent);
}

/* Die fünf größten in Abstufungen EINER Farbe wie in der Klickdemo (#12794). */
.portal-kundenliste-verteilung-teil--1 {
  opacity: 1;
}

.portal-kundenliste-verteilung-teil--2 {
  opacity: 0.85;
}

.portal-kundenliste-verteilung-teil--3 {
  opacity: 0.7;
}

.portal-kundenliste-verteilung-teil--4 {
  opacity: 0.55;
}

.portal-kundenliste-verteilung-teil--5 {
  opacity: 0.4;
}

.portal-kundenliste-verteilung-rest {
  background: var(--bro-linie);
}

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

.portal-kundenliste-verteilung-namen li + li:not(.portal-kundenliste-verteilung-weitere)::before {
  content: "· ";
}

.portal-kundenliste-verteilung-weitere {
  margin-left: auto;
}

.portal-kundenliste-zustand-spalten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--bro-abstand-12);
}

.portal-kundenliste-zustand-spalte {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  min-width: 0;
  padding: var(--bro-abstand-12);
  border: 1px solid transparent;
  border-radius: var(--bro-radius-l);
  background: var(--bro-flaeche-0);
}

/* Wie in der Klickdemo (#12794): Farbpunkt vor dem Titel, Anzahl rechts,
   nur „Handeln“ mit einem roten Rand. */
.portal-kundenliste-zustand-spalte--rot {
  border-color: var(--bro-fehler-flaeche);
}

.portal-kundenliste-zustand-titel {
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-8);
  margin: 0;
  font-size: var(--bro-schrift-klein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
}

.portal-kundenliste-zustand-spalte > .portal-kundenliste-zustand-titel::before {
  content: "";
  flex: none;
  width: var(--bro-abstand-8);
  height: var(--bro-abstand-8);
  border-radius: var(--bro-radius-rund);
}

.portal-kundenliste-zustand-spalte--gruen > .portal-kundenliste-zustand-titel::before {
  background: var(--bro-erfolg);
}

.portal-kundenliste-zustand-spalte--gelb > .portal-kundenliste-zustand-titel::before {
  background: var(--bro-warnung);
}

.portal-kundenliste-zustand-spalte--rot > .portal-kundenliste-zustand-titel::before {
  background: var(--bro-fehler);
}

.portal-kundenliste-zustand-anzahl {
  margin-left: auto;
  color: var(--bro-tinte-3);
  font-weight: normal;
}

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

.portal-kundenliste-zustand-karte {
  display: flex;
  flex-direction: column;
  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-1);
  color: var(--bro-tinte-2);
  text-decoration: none;
}

.portal-kundenliste-zustand-karte:hover {
  border-color: var(--bro-akzent);
}

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

.portal-kundenliste-zustand-name {
  color: var(--bro-tinte-1);
  font-weight: var(--bro-schrift-betont-gewicht);
}

.portal-kundenliste-zustand-mehr > summary {
  cursor: pointer;
  color: var(--bro-akzent);
  font-size: var(--bro-schrift-klein-groesse);
}

.portal-kundenliste-zustand-mehr[open] > summary {
  margin-bottom: var(--bro-abstand-8);
}

/* „Bro verteilt die n auf den Vertrieb“ (#11792): Knopf, aufgeklappt die Liste. */
.portal-kundenliste-verteilen {
  margin-top: var(--bro-abstand-12);
}

.portal-kundenliste-verteilen > summary {
  cursor: pointer;
  list-style: none;
}

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

.portal-kundenliste-verteilen > form {
  display: grid;
  gap: var(--bro-abstand-8);
  margin-top: var(--bro-abstand-8);
}

.portal-kundenliste-verteilen-liste {
  display: grid;
  gap: var(--bro-abstand-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.portal-kundenliste-verteilen-liste label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-8);
}

.portal-kundenliste-verteilen-kunde {
  color: var(--bro-tinte-1);
  font-weight: var(--bro-schrift-betont-gewicht);
}

/* Mobil: die Spalten untereinander, kein waagerechtes Scrollen. */
@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-kundenliste-zustand-spalten {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Logo oder Kürzel vor dem Namen (Nasri, 01.11.2026; Alt `Kunden/Index.cshtml:486-500`):
   feste Fläche, das Logo wird eingepasst, damit ein breites Logo die Zeile nicht bricht. */
.portal-kundenliste-firma,
.portal-kundenvorschau-name {
  display: inline-flex;
  align-items: center;
  gap: var(--bro-abstand-12);
  min-width: 0;
}

.portal-kundenliste-zeichen,
.portal-kundenvorschau-zeichen {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  overflow: hidden;
  border-radius: var(--bro-radius-m);
  background: var(--bro-akzent-flaeche);
  color: var(--bro-akzent);
  font-size: var(--bro-schrift-klein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
}

.portal-kundenvorschau-zeichen {
  width: 44px;
  height: 44px;
}

.portal-kundenliste-zeichen--person,
.portal-kundenvorschau-zeichen--person {
  border-radius: var(--bro-radius-rund);
}

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

/* ---- Widget „Mein Tag“ auf dem Dashboard (#10240, Teil B) ----------------
   Dieselben Zeilen, derselbe Ring wie auf der Seite; im Widget untereinander
   statt im Raster der Seite. */
.mt-zt.mt-zt-widget {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
}

.mt-zt-widget .mt-zt-ring {
  width: 64px;
  height: 64px;
}

.mt-zt-widget-hinweis {
  padding: 2px var(--bro-abstand-8);
  border-radius: var(--bro-konsole-radius-pille);
  color: var(--bro-tinte-1);
  font-weight: var(--bro-schrift-betont-gewicht);
  text-decoration: none;
}

.mt-zt-widget-hinweis-warnend {
  background: var(--bro-warnung-flaeche);
  color: var(--bro-warnung);
}

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

/* #10772: Original KundenKopf, vorhandene Konto- und zusätzliche Fachspalte.
   Breiten aus den gemeinsamen Konto-/Detailtokens; schmal nur die Fachspalte. */
html[data-design="modern"] [data-portal-schubladen-dialog]:has([data-stoerungen-schublade]) {
  width: min(100vw, calc(var(--bro-modern-konto-breite) + var(--bro-modern-konto-fehler-breite)));
  max-width: var(--portal-schublade-sicht-breite, 100vw);
  container-type: inline-size;
  container-name: konto-fehler;
}

html[data-design="modern"] .portal-konto-fehler-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-konto-fehler-spalte {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow-wrap: anywhere;
  border-inline-end: 1px solid var(--bro-linie);
  grid-column: 1;
  grid-row: 1;
}

/* Die Standpille bekommt in der schmalen Fachspalte eine eigene Zeile.
   So bleibt der Titel neben dem Symbol frei von der Breite des Statuswortlauts. */
html[data-design="modern"] .portal-konto-fehler-spalte .portal-stoerung-kopf {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
}

html[data-design="modern"] .portal-konto-fehler-spalte .portal-stoerung-kopf > div {
  min-width: 0;
}

html[data-design="modern"] .portal-konto-fehler-spalte .portal-stoerung-kopf > .bro-statuspille {
  grid-column: 1 / -1;
  justify-self: start;
  max-width: 100%;
  white-space: normal;
}

html[data-design="modern"] .portal-konto-fehler-spalte > .portal-schublade-inhalt {
  overflow: auto;
  min-height: 0;
}

html[data-design="modern"] .portal-konto-fehler-spalte input,
html[data-design="modern"] .portal-konto-fehler-spalte textarea,
html[data-design="modern"] .portal-konto-fehler-spalte select {
  max-width: 100%;
  min-width: 0;
}

html[data-design="modern"] .portal-konto-fehler-spalten > .portal-konto-schublade {
  grid-column: 2;
  grid-row: 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) {
  html[data-design="modern"] .portal-konto-fehler-spalten {
    grid-template-columns: minmax(0, 1fr);
  }

  html[data-design="modern"] .portal-konto-fehler-spalte {
    grid-column: 1;
  }

  html[data-design="modern"] .portal-konto-fehler-spalten > .portal-konto-schublade {
    display: none;
  }
}

/* Die gemeinsame VisualViewport-Hülle kann durch Pinch-Zoom schmaler als
   die Geräteklasse werden; dieselbe Fachspalte bleibt dann allein sichtbar. */
@container konto-fehler (max-width: 60rem) {
  html[data-design="modern"] .portal-konto-fehler-spalten {
    grid-template-columns: minmax(0, 1fr);
  }
  html[data-design="modern"] .portal-konto-fehler-spalte {
    grid-column: 1;
  }
  html[data-design="modern"] .portal-konto-fehler-spalten > .portal-konto-schublade {
    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);
  }
}

/* Online buchbare Zeitfenster (#11163): eine ruhige Fläche HINTER den
   Terminen und Sperren. Sie fängt keinen Klick — die Klickflächen zum
   Anlegen bleiben darunter erreichbar. Kein Text: Was sie heißt, sagt die
   Legende („kein garantierter freier Termin“). */
.portal-kal-online {
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: var(--termin-oben);
  height: var(--termin-hoehe);
  box-sizing: border-box;
  border-left: 3px solid var(--bro-akzent);
  background: var(--bro-akzent-flaeche);
  pointer-events: none;
}

.portal-kal-legende-online {
  border-left-width: 3px;
  background: var(--bro-akzent-flaeche);
}

/* Das Ziehen (#11163): der gezogene Block blass, die Zielspalte umrandet. */
.portal-kal-block[data-ziehbar] {
  cursor: grab;
}

.portal-kal-block-zieht {
  opacity: 0.5;
}

.portal-kal-ziel {
  outline: 2px dashed var(--bro-akzent);
  outline-offset: -2px;
}

.portal-kal-zieh-meldung {
  margin: 0;
  padding: var(--bro-abstand-8) var(--bro-abstand-16);
  font-size: var(--bro-schrift-fein-groesse);
  background: var(--bro-hinweis-flaeche);
}

.portal-kal-zieh-meldung[data-art="fehler"] {
  background: var(--bro-fehler-flaeche);
}

.portal-kal-zieh-meldung[data-art="warnung"] {
  background: var(--bro-warnung-flaeche);
}

.portal-kal-zieh-meldung button {
  margin-left: var(--bro-abstand-8);
}

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

/* 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 {
  /* #11794: Bezugsrahmen für die unsichtbaren Spaltentitel (`bb-unsichtbar`,
     absolut positioniert) — sonst ragen sie aus dem Rollbereich und die
     ganze Seite scrollt am Handy (390 px) seitlich. */
  position: relative;
  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);
}

/* #10804: nur die Werkzeug-Innenflächen; breite Fachinformationen bleiben
   innerhalb der Box erreichbar, ohne den Portalrahmen zu verbreitern. */
.gf-werkzeug-seite,
.gf-werkzeug-box,
.gf-werkzeug-box .bb-box-inhalt,
.gf-werkzeug-box .bb-formular-inhalt {
  min-width: 0;
  max-width: 100%;
}

.gf-werkzeug-box .bb-formular-inhalt > .bro-karte {
  margin-block: var(--bro-abstand-12);
}

/* Import-Schrittkarten enthalten Erklärungen und eine Dateiaktion statt
   kurzer Aktenwerte: volle Zeilenbreite auch bei schmalem Bildschirm. */
.gf-werkzeug-box .bb-datenzeile {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bro-abstand-4);
}

.gf-werkzeug-box table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

/* Die stillen Feldbeschriftungen sind absolut positioniert. Ihr Bezug
   bleibt in der Zuordnungszelle und damit innerhalb der Tabellenrolle. */
.gf-werkzeug-box form[action="/glasfaser/import/vorschau"] td,
.gf-werkzeug-box td:has(> input[form="begehungsimport-uebernehmen"]) {
  position: relative;
}

.gf-werkzeug-box form:not(.bb-suchband),
.gf-werkzeug-box label {
  min-width: 0;
  max-width: 100%;
}

.gf-werkzeug-box input:not([type="checkbox"]):not([type="radio"]),
.gf-werkzeug-box select {
  max-width: 100%;
  min-width: 0;
}

.gf-werkzeug-box input[type="file"] {
  width: 100%;
}

.gf-werkzeug-box p,
.gf-werkzeug-box h2,
.gf-werkzeug-box code,
.gf-werkzeug-box td {
  overflow-wrap: anywhere;
}

.gf-werkzeug-box .portal-formular-aktionen {
  flex-wrap: wrap;
}

/* #10797 (Befund B1 der Bildsicht): Auf 320 px bricht die Kopf-Aktionszeile
   der Ausbauprojekte unter den Titel und steht links; das rechtsbündig am
   „⋯“ verankerte Menü ragte dann links aus dem Fenster. Die Zeile nimmt hier
   die freie Breite und richtet sich rechts aus — breit unverändert rechts
   neben dem Titel, schmal steht das Menü am rechten Rand und öffnet nach
   innen. Nur diese Seite (eigene Box `data-projekte-modern`). */
body:has([data-projekte-modern]) .portal-seitenkopf-aktionen {
  flex: 1 1 auto;
  justify-content: flex-end;
}

/* Die Warnung muss als Griditem in der schmalen Forminnenfläche schrumpfen;
   lange Fachtexte bleiben vollständig lesbar (#10796). */
html[data-design="modern"] .bb-formular-inhalt [data-tafelwarnung] {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* #10801: Kalender konsumiert gemeinsame Box/Form-/Datenbausteine ohne
   gestapelte Innenabstände; 42 Rastertage bleiben innen horizontal erreichbar. */
.gf-kalender-box .gf-kal-raster {
  min-width: 42rem;
}

@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) {
  .gf-kalender-box .bb-datenzeile {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--bro-abstand-4);
  }
}

/* Wohnungsansicht der Montage bei 200 % Zoom am Handy (#14031, WCAG 1.4.10):
   Forminnenfläche, Fotokarte und Fotokachel liegen hier ineinander, jede mit
   eigenem Innenrand. Bei 160 CSS-px blieben dem Fotofeld 2 px, die Knöpfe
   ragten bis 198 px hinaus, „Deckendurchbrüche“ bis 195 px. Am schmalen Gerät
   rücken die Innenränder enger, Knöpfe werden nicht breiter als ihre Spalte,
   und lange Wörter brechen um. */
[data-montage-wohnungsansicht] > * {
  min-width: 0;
  max-width: 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) {
  [data-montage-wohnungsansicht] {
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  html[data-design="modern"] [data-montage-wohnungsansicht] :is(.bb-formular-inhalt, .bro-karte) {
    padding: var(--bro-abstand-8);
  }

  [data-montage-wohnungsansicht] .gf-fotofeld {
    padding: var(--bro-abstand-8);
  }

  [data-montage-wohnungsansicht] .bro-knopf {
    min-width: 0;
    max-width: 100%;
  }
}

/* Begehung in sieben Schritten (#11796): Wohnungen als Nummernfeld zum
   Antippen. Darunter steht auf jedem Gerät die Wohnungstabelle zum direkten
   Eintragen; am Handy als Karten (#13812, unten). Nur Tokens (B14.7). */
.gf-wohnungsraster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-8);
  margin: 0 0 var(--bro-abstand-12);
  padding: 0;
  list-style: none;
}

.gf-wohnungsraster .gf-wohnung-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--bro-beruehrungsflaeche);
  min-height: var(--bro-beruehrungsflaeche);
  padding: 0 var(--bro-abstand-8);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-s);
  color: var(--bro-tinte-1);
  text-decoration: none;
}

.gf-wohnungsraster .gf-wohnung-knopf[aria-current="true"] {
  border-color: var(--bro-akzent);
  font-weight: var(--bro-schrift-betont-gewicht);
}

.gf-pflichtfotos {
  margin: 0 0 var(--bro-abstand-12);
  padding-left: var(--bro-abstand-16);
}

/* Fotofelder der Montage (#13321): je Ordner eine Kachel mit „Aufnehmen“ und
   „Galerie“, Pflicht sichtbar, Häkchen sobald ein Bild da ist. Nur Tokens. */
.gf-fotofeld-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: var(--bro-abstand-12);
  margin: 0 0 var(--bro-abstand-16);
  padding: 0;
  list-style: none;
}

.gf-fotofeld {
  min-width: 0;
  padding: var(--bro-abstand-12);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-s);
  background: var(--bro-flaeche-1);
}

.gf-fotofeld[data-foto-art="pflicht"]:not([data-foto-da]) {
  border-color: var(--bro-warnung);
  background: color-mix(in oklab, var(--bro-warnung) 9%, var(--bro-flaeche-1));
}

.gf-fotofeld[data-foto-da] {
  border-color: var(--bro-erfolg);
  background: color-mix(in oklab, var(--bro-erfolg) 9%, var(--bro-flaeche-1));
}

/* Ohne Empfang aufgenommen (#13400): Das Foto wartet auf dem Gerät und gilt
   erst als da, wenn der Server es bestätigt hat — orange, nicht grün. */
.gf-fotofeld[data-foto-wartet]:not([data-foto-da]) {
  border-color: var(--bro-warnung);
  border-style: dashed;
}

.gf-fotofeld [data-foto-stand][data-art="wartet"] {
  color: var(--bro-warnung);
}

.gf-fotofeld [data-foto-stand][data-art="fehler"],
form[data-zusatz-foto-formular] [data-foto-stand][data-art="fehler"] {
  color: var(--bro-fehler);
}

form[data-zusatz-foto-formular] [data-foto-stand][data-art="wartet"],
form[data-haus-foto-formular] [data-foto-stand][data-art="wartet"] {
  color: var(--bro-warnung);
}

form[data-haus-foto-formular] [data-foto-stand][data-art="fehler"] {
  color: var(--bro-fehler);
}

/* Begehung ohne Empfang (#13438): Unterschrift, Strangschema und Handlung
   warten auf dem Gerät — orange, bis der Server bestätigt; ein Grund rot. */
form[data-offline-eingabe] [data-offline-stand][data-art="wartet"],
[data-begehung-unterschriften] [data-offline-stand],
[data-begehung-handlungen] [data-offline-stand] {
  color: var(--bro-warnung);
}

form[data-offline-eingabe] [data-offline-stand][data-art="fehler"] {
  color: var(--bro-fehler);
}

.gf-fotofeld-kopf {
  margin: 0 0 var(--bro-abstand-8);
}

.gf-fotofeld-zeichen {
  display: inline-block;
  min-width: 1.25em;
  font-weight: var(--bro-schrift-betont-gewicht);
}

.gf-fotofeld[data-foto-da] .gf-fotofeld-zeichen {
  color: var(--bro-erfolg);
}

.gf-fotofeld[data-foto-art="pflicht"]:not([data-foto-da]) .gf-fotofeld-zeichen {
  color: var(--bro-warnung);
}

.gf-fotofeld-knoepfe label {
  min-height: var(--bro-beruehrungsflaeche);
  cursor: pointer;
}

/* Das Dateifeld selbst bleibt bedienbar (Fokus, Vorlesen), aber unsichtbar;
   die Beschriftung davor ist der Knopf. */
.gf-fotofeld-datei {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.gf-fotofeld-knoepfe label:has(+ .gf-fotofeld-datei:focus-visible) {
  outline: 2px solid var(--bro-akzent);
  outline-offset: 2px;
}

/* Wohnungstabelle der Begehung am Handy (#13812, Kundenwunsch aus #13795
   B23/B24): Bis #13812 war sie hier ausgeblendet, Kiri will die Wohnungen
   aber auch am Handy direkt eintragen. Dasselbe Markup wird zur Karte je
   Wohnung, jedes Feld steht unter seiner Beschriftung (`data-label`), ohne
   Querscrollen. Das Speichern beim Verlassen eines Feldes bleibt. */
@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) {
  .gf-wohnungsliste .portal-tabelle-karte {
    padding: 0;
    overflow-x: visible;
  }

  .gf-wohnungsliste table,
  .gf-wohnungsliste caption,
  .gf-wohnungsliste tbody,
  .gf-wohnungsliste tr,
  .gf-wohnungsliste th,
  .gf-wohnungsliste td {
    display: block;
  }

  .gf-wohnungsliste caption {
    margin-bottom: var(--bro-abstand-12);
    text-align: left;
  }

  .gf-wohnungsliste thead {
    display: none;
  }

  .gf-wohnungsliste tbody tr {
    margin: 0 0 var(--bro-abstand-12);
    padding: var(--bro-abstand-12);
    border: 1px solid var(--bro-linie);
    border-radius: var(--bro-radius-m);
  }

  .gf-wohnungsliste tbody th,
  .gf-wohnungsliste tbody td {
    padding: var(--bro-abstand-4) 0;
    border-bottom: 0;
    white-space: normal;
  }

  .gf-wohnungsliste tbody [data-label]::before {
    content: attr(data-label);
    display: block;
    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);
  }

  .gf-wohnungsliste tbody input,
  .gf-wohnungsliste tbody select {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
}

/* Wohnungstabelle der Begehung am Desktop und Tablet quer: jede Wohnung auf
   zwei Zeilen (#14097, Entschieden (Nasri), 04.11.2026, Möglichkeit 1;
   Kundenwunsch aus #13795 B17). Einzeilig mit elf Spalten (#13844) passte die
   Tabelle zwar ohne Querscrollen, schnitt bei 1280 und 1440 px aber Namen,
   Lage, Variante und SKA ab. Es bleibt eine `<tr>` je Wohnung (das Handy macht
   daraus seine Karte, #13812), am Desktop als Raster aus 48 gleichen Teilen.
   Zeile 1: Nummer (2), Eigentümer (13), Bewohner (13), Notiz (7), Fotos (5),
   Aktionen (8). Zeile 2 über die ganze Breite: Etage (7, „0 (EG)“), Lage (12,
   „Rechts Hinten“), Dibkom (7, „000-000“), Variante (13, „3 · Kaminsteiger“),
   SKA (9, „keine Info“). Bemessen am engsten Fall, Tablet quer mit 552 px
   Tabelle (1 Teil = 11,5 px); bei 1280 und 1440 px ist die Tabelle rund
   740–775 px breit. Auswahllisten verzichten auf das rechte Polster, dort
   steht schon der Pfeil.
   Im Markup (`wohnungs-tabelle.ts`) folgen auf Eigentümer, Bewohner und Notiz
   gleich die Felder der Zeile 2, Fotos und Aktionen stehen am Ende: So
   springen Tab und Weiter-Taste (#13862) vom letzten Feld der Zeile 1 auf
   Etage derselben Wohnung, und die Handy-Karte endet weiter mit den Aktionen.
   Die Kopfzeile nutzt dasselbe Raster. Die Linie trägt die Wohnung, nicht die
   Zelle. */
@media (min-width: 1280px), (min-width: 768px) and (max-width: 1279px) and (min-height: 480px) and (orientation: landscape) {
  .gf-wohnungsliste .portal-tabelle-karte {
    padding-right: 0;
    padding-left: 0;
  }

  .gf-wohnungstabelle {
    table-layout: fixed;
  }

  table.gf-wohnungstabelle tr {
    display: grid;
    grid-template-columns: repeat(48, minmax(0, 1fr));
    align-items: center;
    border-bottom: 1px solid var(--bro-linie);
  }

  table.gf-wohnungstabelle tbody tr:last-child {
    border-bottom: 0;
  }

  table.gf-wohnungstabelle th,
  table.gf-wohnungstabelle td {
    padding: var(--bro-abstand-8) var(--bro-abstand-4);
    border-bottom: 0;
    white-space: normal;
    overflow-wrap: break-word;
    hyphens: auto;
  }

  /* Die Kopfzeile bekommt ihre Fläche je Feld; die Zelle füllt ihr Rasterfeld. */
  table.gf-wohnungstabelle thead th {
    align-self: stretch;
    height: auto;
  }

  /* Zeile 1: #, Eigentümer, Bewohner, Notiz */
  .gf-wohnungstabelle tr > :nth-child(1) {
    grid-row: 1;
    grid-column: 1 / span 2;
  }

  .gf-wohnungstabelle tr > :nth-child(2) {
    grid-row: 1;
    grid-column: 3 / span 13;
  }

  .gf-wohnungstabelle tr > :nth-child(3) {
    grid-row: 1;
    grid-column: 16 / span 13;
  }

  .gf-wohnungstabelle tr > :nth-child(4) {
    grid-row: 1;
    grid-column: 29 / span 7;
  }

  /* Zeile 2: Etage, Lage, Dibkom, Variante, SKA */
  .gf-wohnungstabelle tr > :nth-child(5) {
    grid-row: 2;
    grid-column: 1 / span 7;
  }

  .gf-wohnungstabelle tr > :nth-child(6) {
    grid-row: 2;
    grid-column: 8 / span 12;
  }

  .gf-wohnungstabelle tr > :nth-child(7) {
    grid-row: 2;
    grid-column: 20 / span 7;
  }

  .gf-wohnungstabelle tr > :nth-child(8) {
    grid-row: 2;
    grid-column: 27 / span 13;
  }

  .gf-wohnungstabelle tr > :nth-child(9) {
    grid-row: 2;
    grid-column: 40 / span 9;
  }

  /* Zeile 1 rechts: Fotos, Aktionen — im Markup zuletzt, also auch zuletzt im Tab */
  .gf-wohnungstabelle tr > :nth-child(10) {
    grid-row: 1;
    grid-column: 36 / span 5;
  }

  .gf-wohnungstabelle tr > :nth-child(11) {
    grid-row: 1;
    grid-column: 41 / span 8;
  }

  /* `html … td` überbietet `html[data-design="modern"] .bro-eingabefeld`
     (design-modern.css, Polster 12px 14px). */
  html .gf-wohnungstabelle td .bro-eingabefeld {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding: var(--bro-abstand-8) var(--bro-abstand-4);
  }

  html .gf-wohnungstabelle td select.bro-eingabefeld {
    padding-right: 0;
  }
}

/* Ab Tablet (#13651): die Tabelle der Partner-Startseite; am Handy stehen
   dort stattdessen die Tageskarten (`.gf-nur-handy`). Die Begehung nutzt die
   Klasse seit #13812 nicht mehr. */
@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) {
  .gf-ab-tablet {
    display: none;
  }
}

/* Nur am Handy (#13651): die Tageskarten der Partner-Startseite. Ab Tablet
   bleibt die Tabelle — das Gegenstück zu `.gf-ab-tablet`. */
.gf-nur-handy {
  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) {
  .gf-nur-handy {
    display: block;
  }
}

.gf-tageskarten > * + * {
  margin-top: var(--bro-abstand-12);
}

/* ---- Glasfaser einfacher 1 (#11794) ------------------------------------ */

/* Volle Breite: Glasfaser-Seiten nutzen die ganze Fensterbreite, damit die
   breiten Tabellen bei 1440 und 1180 px nicht seitlich gescrollt werden
   müssen (Nasri, 26.10.2026, #11794). `data-bereich` setzt jeder Rahmen
   (`seiten.ts`); der Fahrdienst hat dieselbe Ausnahme in `portal.css`. */
html[data-rahmen][data-bereich="glasfaser"] main.portal-inhalt {
  max-width: none;
}

/* Schrittleiste: oben auf Handy und Tablet hoch, links ab Tablet quer. Die
   Leiste scrollt in sich, die Seite nicht. */
.gf-schrittfolge {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bro-abstand-16);
}

.gf-schrittleiste {
  min-width: 0;
  overflow-x: auto;
}

.gf-schrittleiste ol {
  display: flex;
  gap: var(--bro-abstand-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.gf-schritt {
  display: 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-feld);
  color: var(--bro-tinte-2);
  text-decoration: none;
  white-space: nowrap;
}

.gf-schritt[aria-current="step"] {
  border-color: var(--bro-akzent);
  background: var(--bro-akzent-flaeche);
  color: var(--bro-tinte-1);
  font-weight: var(--bro-schrift-betont-gewicht);
}

.gf-schritt-nr {
  display: inline-grid;
  place-items: center;
  min-width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--bro-flaeche-1);
  font-size: var(--bro-schrift-klein-groesse);
}

.gf-schritt[aria-current="step"] .gf-schritt-nr {
  background: var(--bro-akzent);
  color: var(--bro-flaeche-0);
}

.gf-schritt-zahl {
  color: var(--bro-tinte-3);
  font-size: var(--bro-schrift-klein-groesse);
}

.gf-schritt-inhalt {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
  min-width: 0;
}

.gf-schritt-stand {
  margin: 0;
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
}

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

/* Lange Schrittnamen („Zusatzpositionen“) brechen statt die Seite bei
   200 % Schriftzoom am Handy zu verbreitern. */
.gf-schritt-fuss a {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* #11797: „Zeile 1 auf alle übernehmen“ bricht im Aufmaß-Reiter um, statt die
   Seite bei 200 % Zoom am Handy (160 CSS-px, #10795) zu verbreitern. Ebenso
   „Wohnung hinzufügen“ und „Werte wie Wohnung n übernehmen“ (#13445). */
:is(
    [data-montage-aufmass-uebernehmen],
    [data-montage-wohnung-hinzufuegen],
    [data-montage-vorige-uebernehmen]
  )
  > .bro-knopf {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.gf-schritt-weiter {
  margin-left: auto;
  font-weight: var(--bro-schrift-betont-gewicht);
}

@media (min-width: 1280px), (min-width: 768px) and (max-width: 1279px) and (min-height: 480px) and (orientation: landscape) {
  .gf-schrittfolge {
    grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr);
    align-items: start;
  }

  .gf-schrittleiste {
    overflow: visible;
  }

  .gf-schrittleiste ol {
    flex-direction: column;
  }

  .gf-schritt {
    white-space: normal;
  }
}

/* #13981: Unter 1440 px (90rem bei Grundschrift) wird die Schrittleiste der
   Begehung neben dem Inhalt eine schmale Spalte nur mit den Nummern, damit
   die Wohnungstabelle Platz hat. Der Name bleibt für Vorleser im Link
   (sichtbar versteckt) und steht als `title` darüber (`schrittfolge.ts`).
   Ab 1440 px und am Handy bzw. Tablet hoch bleibt die Leiste wie oben. */
@media (min-width: 1280px) and (width < 90rem), (min-width: 768px) and (max-width: 1279px) and (min-height: 480px) and (orientation: landscape) {
  .gf-schrittfolge[data-schrittfolge="begehung"] {
    grid-template-columns: 4rem minmax(0, 1fr);
  }

  [data-schrittfolge="begehung"] .gf-schritt {
    position: relative;
    justify-content: center;
    padding: var(--bro-abstand-8) 0;
  }

  [data-schrittfolge="begehung"] .gf-schritt-titel {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  [data-schrittfolge="begehung"] .gf-schritt-zahl {
    display: none;
  }
}

/* Speichern ohne Knopf: der Stand am Formular. */
.gf-autospeichern-stand {
  margin: 0;
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
}

.gf-autospeichern-stand[data-art="fehler"] {
  color: var(--bro-fehler);
}

.gf-autospeichern-stand[data-art="wartet"] {
  color: var(--bro-warnung);
}

/* Empfangsleiste: grün online, orange ohne Empfang, blau beim Übertragen. */
.gf-empfang {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-8) var(--bro-abstand-12);
  margin: 0 0 var(--bro-abstand-12);
  padding: var(--bro-abstand-8) var(--bro-abstand-12);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-konsole-radius-feld);
  background: var(--bro-flaeche-0);
  color: var(--bro-tinte-1);
}

.gf-empfang-punkt {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--bro-tinte-3);
}

.gf-empfang-text {
  flex: 1 1 12rem;
  min-width: 0;
}

/* Das Portal hat keine eigene Erfolgsfläche; gemischt aus `erfolg` wie
   andere Flächen (`geschenk`, design-tokens). */
.gf-empfang[data-empfang="online"] {
  border-color: color-mix(in oklab, var(--bro-erfolg) 35%, var(--bro-flaeche-0));
  background: color-mix(in oklab, var(--bro-erfolg) 10%, var(--bro-flaeche-0));
}

.gf-empfang[data-empfang="online"] .gf-empfang-punkt {
  background: var(--bro-erfolg);
}

.gf-empfang[data-empfang="offline"] {
  border-color: var(--bro-warnung-linie);
  background: var(--bro-warnung-flaeche);
}

.gf-empfang[data-empfang="offline"] .gf-empfang-punkt {
  background: var(--bro-warnung);
}

.gf-empfang[data-empfang="uebertraegt"] {
  border-color: var(--bro-hinweis-linie);
  background: var(--bro-hinweis-flaeche);
}

.gf-empfang[data-empfang="uebertraegt"] .gf-empfang-punkt {
  background: var(--bro-akzent);
}

/* Meine Aufträge: Karten, die auf dem Handy untereinander und breit im
   Raster stehen. */
.gf-auftraege {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: var(--bro-abstand-12);
  margin: 0;
  padding: 0;
  list-style: none;
}

.gf-auftrag {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  min-width: 0;
  padding: var(--bro-abstand-12);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-konsole-radius-feld);
  background: var(--bro-flaeche-0);
}

.gf-auftrag-ziel {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
  color: inherit;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.gf-auftrag-zeit {
  font-weight: var(--bro-schrift-betont-gewicht);
}

.gf-auftrag-daten,
.gf-auftrag-fortschritt {
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
}

.gf-auftrag-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-8);
}

.gf-zeichenfeld {
  max-width: 100%;
  border: 1px solid currentcolor;
  touch-action: none;
}

/* Vorhandene Fotos ohne Empfang (#9110): Bilder vom Gerät, im Raster wie die
   Aufträge; ein Bild wird nie breiter als seine Spalte. */
.gf-offline-fotos {
  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;
}

.gf-offline-fotos figure {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
  margin: 0;
}

.gf-offline-fotos img {
  max-width: 100%;
  height: auto;
  border-radius: var(--bro-konsole-radius-feld);
}

.gf-offline-fotos figcaption {
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
  overflow-wrap: anywhere;
}

/* Aushang fällig (#11804) — gelb ab Frist, rot unter 14 Tagen bis zum Start. */
.gf-aushang-hinweis {
  background: var(--bro-warnung-flaeche);
  border: 1px solid var(--bro-warnung-linie);
  border-radius: var(--bro-radius-s);
  padding: var(--bro-abstand-12);
  margin-bottom: var(--bro-abstand-12);
}

.gf-aushang-hinweis--spaet {
  background: var(--bro-fehler-flaeche);
  border-color: var(--bro-fehler-linie);
}

.gf-aushang-titel {
  margin: 0 0 var(--bro-abstand-4);
  color: var(--bro-warnung);
}

.gf-aushang-hinweis--spaet .gf-aushang-titel {
  color: var(--bro-fehler);
}

.gf-aushang-zeile,
.gf-aushang-knoepfe {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--bro-abstand-8);
}

.gf-aushang-knoepfe form {
  margin: 0;
}

/* Die Klick-Vorschau bleibt in Originalgröße: Der Bildknopf meldet die Stelle in Bildpunkten. */
.gf-aushang-vorschau {
  overflow: auto;
  max-width: 100%;
  border: 1px solid var(--bro-linie);
}

.gf-aushang-vorschau input[type="image"] {
  max-width: none;
  cursor: crosshair;
}
.portal-glasfaser-auftrag-mit-verdienst {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 28rem);
  align-items: start;
  gap: var(--bro-abstand-24);
}

.portal-glasfaser-auftrag-mit-verdienst > main {
  display: grid;
  gap: var(--bro-abstand-24);
  min-width: 0;
}

.portal-glasfaser-verdienst-rand {
  position: sticky;
  top: var(--bro-abstand-16);
  display: grid;
  gap: var(--bro-abstand-8);
  min-width: 0;
}

[data-verdienst-randleiste] {
  overflow-x: auto;
}

[data-verdienst-randleiste] > summary {
  cursor: pointer;
  font-weight: var(--bro-schrift-betont-gewicht);
}

[data-verdienst-randleiste] tr[data-aktuell="true"] {
  background: var(--bro-akzent-flaeche);
}

@media (max-width: 63.99rem) {
  .portal-glasfaser-auftrag-mit-verdienst {
    grid-template-columns: minmax(0, 1fr);
  }

  .portal-glasfaser-verdienst-rand {
    position: static;
    grid-row: 1;
  }
}

/* ---- Plantafel: Prüfen und Nacharbeit (#12513) ------------------------ */
.gf-tafel-pruefen {
  display: grid;
  gap: var(--bro-abstand-4);
  padding-top: var(--bro-abstand-4);
  border-top: 1px solid var(--bro-linie);
}

.gf-tafel-luecken {
  margin: 0;
  padding-left: var(--bro-abstand-12);
  font-size: var(--bro-schrift-klein-groesse);
}

.gf-tafel-nacharbeit-fenster[open] {
  padding: var(--bro-abstand-8);
  border: 1px solid var(--bro-fehler);
  border-radius: var(--bro-radius-s);
}

.gf-auftrag--nacharbeit {
  border-color: var(--bro-fehler);
}

/* Hinweis „Nacharbeit: …“ über der Schrittfolge und im Partnerportal (#12580). */
.gf-nacharbeit-hinweis {
  margin-block: var(--bro-abstand-8);
  padding: var(--bro-abstand-8);
  border: 1px solid var(--bro-fehler);
  border-radius: var(--bro-radius-s);
}

/* ---- Plantafel des Büros (#11798) ------------------------------------- */
/* Fünf Spalten nebeneinander; auf schmalen Geräten untereinander. */
.gf-tafel {
  display: grid;
  grid-template-columns: repeat(5, minmax(12rem, 1fr));
  gap: var(--bro-abstand-12);
  overflow-x: auto;
}

.gf-tafel-spalte {
  min-width: 0;
  padding: var(--bro-abstand-8);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-s);
  background: var(--bro-flaeche-1);
}

.gf-tafel-anzahl {
  color: var(--bro-tinte-2);
}

.gf-tafel-liste {
  display: grid;
  gap: var(--bro-abstand-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.gf-tafel-karte {
  display: grid;
  gap: var(--bro-abstand-4);
  padding: var(--bro-abstand-8);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-s);
  background: var(--bro-flaeche-0);
}

.gf-tafel-karte--nacharbeit {
  border-color: var(--bro-fehler);
}

.gf-tafel-zeile,
.gf-tafel-stand {
  font-size: var(--bro-schrift-klein-groesse);
}

.gf-tafel-stand {
  color: var(--bro-tinte-2);
}

.gf-tafel-nacharbeit {
  color: var(--bro-fehler);
  font-size: var(--bro-schrift-klein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
}

/* Einplanen von der Tafel (#12512): Haken, Bro-Vorschlag, Sammel-Formular. */
.gf-tafel-haken {
  display: flex;
  gap: var(--bro-abstand-4);
  align-items: center;
  font-size: var(--bro-schrift-klein-groesse);
}

.gf-tafel-vorschlag {
  display: grid;
  gap: var(--bro-abstand-8);
  margin-bottom: var(--bro-abstand-8);
  padding: var(--bro-abstand-8);
  border: 1px solid var(--bro-akzent);
  border-radius: var(--bro-radius-s);
  background: var(--bro-flaeche-0);
}

.gf-tafel-herkunft {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--bro-abstand-4) var(--bro-abstand-8);
  margin: 0;
  font-size: var(--bro-schrift-klein-groesse);
}

.gf-tafel-herkunft dt {
  color: var(--bro-tinte-2);
}

.gf-tafel-herkunft dd {
  margin: 0;
}

.gf-tafel-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-8);
}

.gf-tafel-einplanen {
  margin-top: 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) {
  .gf-tafel {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Dibkom-Maske 000-000 (#13819): „altes Format“ und der Fehlertext am Feld. */
.gf-dibkom-hinweis {
  display: block;
  margin: 0;
  color: var(--bro-warnung);
  font-size: var(--bro-schrift-klein-groesse);
}

.gf-dibkom-hinweis[data-art="fehler"] {
  color: var(--bro-fehler);
}

/* Fotokachel (#13847): ✎ und 🗑 sitzen in der Ecke des Fotos, darunter steht
   nur die Beschriftung. Die Symbole sind die Köpfe zweier `<details>`; ihr
   Inhalt (Änderungsformular, Rückfrage) klappt erst beim Tippen auf. Die
   Tippfläche ist die Berührungsfläche der Tokens (44 px). Nur Tokens. */
.gf-foto-kachel {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 var(--bro-abstand-12);
}

.gf-foto-kachel img {
  display: block;
  max-width: 100%;
  height: auto;
}

.gf-foto-kachel figcaption {
  margin-top: var(--bro-abstand-4);
  overflow-wrap: anywhere;
}

.gf-foto-kachel details {
  margin: 0;
}

.gf-foto-symbol {
  position: absolute;
  top: var(--bro-abstand-4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--bro-beruehrungsflaeche);
  min-height: var(--bro-beruehrungsflaeche);
  padding: 0 var(--bro-abstand-8);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-s);
  background: var(--bro-flaeche-1);
  color: var(--bro-tinte-1);
  list-style: none;
  cursor: pointer;
}

.gf-foto-symbol::-webkit-details-marker {
  display: none;
}

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

.gf-foto-loeschen > .gf-foto-symbol {
  right: var(--bro-abstand-4);
}

.gf-foto-aendern > .gf-foto-symbol {
  right: calc(var(--bro-abstand-4) * 2 + var(--bro-beruehrungsflaeche));
}

/* Offen heißt das Papierkorb-Symbol „Abbrechen“; das Stift-Symbol tritt so
   lange zurück, damit sich die beiden nicht überdecken. */
.gf-foto-symbol-offen,
.gf-foto-loeschen[open] .gf-foto-symbol-zu {
  display: none;
}

.gf-foto-loeschen[open] .gf-foto-symbol-offen {
  display: inline;
}

/* Der Name des geschlossenen Papierkorb-Symbols wird nur vorgelesen (#13969);
   sichtbar bleibt 🗑. */
.gf-foto-symbol-name {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.gf-foto-kachel:has(.gf-foto-loeschen[open]) .gf-foto-aendern > .gf-foto-symbol {
  visibility: hidden;
}

/* Die Rückfrage liegt über dem Bild, direkt unter „Abbrechen“; die Kachel
   wird dadurch nicht höher. */
.gf-foto-rueckfrage {
  position: absolute;
  top: calc(var(--bro-abstand-4) * 2 + var(--bro-beruehrungsflaeche));
  right: var(--bro-abstand-4);
  left: var(--bro-abstand-4);
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-8);
  padding: var(--bro-abstand-8);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-radius-s);
  background: var(--bro-flaeche-1);
  box-shadow: var(--bro-schatten-menue);
}

.gf-foto-rueckfrage p {
  margin: 0;
}

.gf-foto-aendern[open] {
  margin-top: var(--bro-abstand-8);
}

/* ---- Kästchen und Auswahlkreise rechts neben dem Text (#13814) ---------- */

/* `.portal-feld` stellt seine Kinder als Spalte (`portal.css`); bei einem
   Häkchen oder Auswahlkreis stand das Kästchen damit über dem Text. Im
   Glasfaser-Bereich steht der Text links, das Kästchen direkt rechts daneben
   auf einer Zeile; langer Text bricht um, das Kästchen bleibt rechts
   (Kundenwunsch #13795, B3/B6). `order` statt `row-reverse`, damit mehrteilige
   Beschriftungen ihre Reihenfolge behalten. Nur hier: der Rahmen
   (`data-bereich`), die Bestätigungsseite des Eigentümers und die
   Offline-Hülle — andere Bereiche bleiben unverändert. */
:is([data-bereich="glasfaser"], main[data-bestaetigungslink-seite], main.gf-auf-dem-handy)
  .portal-feld:has(> input:is([type="checkbox"], [type="radio"])) {
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: var(--bro-abstand-8);
}

:is([data-bereich="glasfaser"], main[data-bestaetigungslink-seite], main.gf-auf-dem-handy)
  .portal-feld
  > input:is([type="checkbox"], [type="radio"]) {
  flex-shrink: 0;
  order: 1;
}

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

/* ── Standort beim Stempeln (#12458) ─────────────────────────────────────
   Hinweis an der Stempeluhr, Frage nach dem Grund, Lageplan ohne Karte. */

.zt-ortung,
.zt-ortung-grund {
  flex-basis: 100%;
  display: grid;
  gap: var(--bro-abstand-4);
}

.zt-ortung p,
.zt-ortung-grund p {
  margin: 0;
}

.zt-ortung-liste {
  margin: 0;
  padding-left: var(--bro-abstand-16);
  color: var(--bro-tinte-2);
}

.zt-ortung-tag,
.zt-ortung-bereich {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--bro-abstand-8);
  margin-bottom: var(--bro-abstand-12);
}

.zt-ortung-wahl {
  display: block;
}

.zt-plan {
  margin: 0 0 var(--bro-abstand-12);
}

.zt-plan svg {
  width: 100%;
  max-width: 640px;
  height: auto;
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-konsole-radius-box);
  background: var(--bro-flaeche-1);
}

.zt-plan-bereich circle {
  fill: color-mix(in oklab, var(--bro-datenreihe-5) 12%, transparent);
  stroke: var(--bro-datenreihe-5);
}

.zt-plan-bereich text,
.zt-plan-massstab text {
  fill: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
}

.zt-plan-massstab line {
  stroke: var(--bro-tinte-2);
  stroke-width: 2;
}

.zt-plan-punkt {
  stroke: var(--bro-flaeche-1);
  stroke-width: 2;
}

.zt-plan-punkt--im-bereich {
  fill: var(--bro-erfolg);
}

.zt-plan-punkt--ausserhalb {
  fill: var(--bro-warnung);
}

/* Straßenkarte auf „Team heute“ (#12708): dieselben Farben wie der Lageplan. */
.zt-strassenkarte {
  width: 100%;
  max-width: 640px;
  aspect-ratio: 640 / 360;
  margin: 0 0 var(--bro-abstand-12);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-konsole-radius-box);
  background: var(--bro-flaeche-1);
}

.zt-strassenkarte[hidden],
.zt-plan[hidden] {
  display: none;
}

.zt-karte-bereich {
  fill: color-mix(in oklab, var(--bro-datenreihe-5) 12%, transparent);
  stroke: var(--bro-datenreihe-5);
}

.zt-karte-punkt {
  fill: var(--bro-tinte-2);
  fill-opacity: 1;
  stroke: var(--bro-flaeche-1);
}

.zt-karte-punkt--im-bereich {
  fill: var(--bro-erfolg);
}

.zt-karte-punkt--ausserhalb {
  fill: var(--bro-warnung);
}

/* „Monat abschließen“ (#13456): die Zahlen je Stand in einer Zeile. */
.zt-abschluss-zahlen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-12);
  margin: 0 0 var(--bro-abstand-12);
  padding: 0;
  list-style: none;
}

/* Teamkalender /personal/teamkalender (#11079, Teil 9355): Monatsraster mit
   einer Farbe je Abwesenheitsart, wie die Legende des Alt
   (`Pages/Hr/Kalender.cshtml`). Nur Tokens; jede Art trägt zusätzlich ihren
   Namen, die Farbe ist nie das einzige Merkmal. */
.portal-teamkalender {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.portal-teamkalender caption {
  margin-bottom: var(--bro-abstand-8);
  color: var(--bro-tinte-1);
  font-size: var(--bro-schrift-betont-groesse);
  font-weight: var(--bro-schrift-titel-gewicht);
  text-align: left;
}

.portal-teamkalender th,
.portal-teamkalender td {
  padding: var(--bro-abstand-4);
  border: 1px solid var(--bro-linie);
  vertical-align: top;
}

.portal-teamkalender td {
  height: calc(var(--bro-abstand-24) * 4);
}

.portal-teamkalender td[aria-current="date"] {
  border-color: var(--bro-akzent);
}

.portal-teamkalender-fremd {
  color: var(--bro-tinte-3);
  background: var(--bro-flaeche-0);
}

.portal-teamkalender-tag {
  display: block;
  font-size: var(--bro-schrift-klein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
}

.portal-teamkalender ul,
.portal-teamkalender-legende {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.portal-teamkalender ul {
  flex-direction: column;
}

.portal-teamkalender-legende {
  margin-bottom: var(--bro-abstand-12);
}

.portal-teamkalender-eintrag {
  --portal-teamkalender-art: var(--bro-linie-stark);
  overflow: hidden;
  padding: 0 var(--bro-abstand-4);
  border-left: 3px solid var(--portal-teamkalender-art);
  background: var(--bro-flaeche-0);
  font-size: var(--bro-schrift-klein-groesse);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-teamkalender-eintrag--urlaub {
  --portal-teamkalender-art: var(--bro-akzent);
}

.portal-teamkalender-eintrag--krankheit {
  --portal-teamkalender-art: var(--bro-fehler);
}

.portal-teamkalender-eintrag--homeoffice {
  --portal-teamkalender-art: var(--bro-erfolg);
}

.portal-teamkalender-eintrag--fortbildung {
  --portal-teamkalender-art: var(--bro-modul-personal);
}

.portal-teamkalender-eintrag--dienstreise {
  --portal-teamkalender-art: var(--bro-warnung);
}

.portal-teamkalender-eintrag--sonstiges {
  --portal-teamkalender-art: var(--bro-modul-stammdaten);
}

.portal-teamkalender-eintrag--unbezahlt {
  --portal-teamkalender-art: var(--bro-modul-aufgaben);
}

/* #13460: Arzttermin, Berufsschule und Sonderurlaub. */
.portal-teamkalender-eintrag--arzttermin {
  --portal-teamkalender-art: var(--bro-modul-meldungen);
}

.portal-teamkalender-eintrag--berufsschule {
  --portal-teamkalender-art: var(--bro-modul-katalog);
}

.portal-teamkalender-eintrag--sonderurlaub {
  --portal-teamkalender-art: var(--bro-modul-marketing);
}

.portal-teamkalender-eintrag--abwesend {
  --portal-teamkalender-art: var(--bro-tinte-3);
}

[data-teamkalender-auswahl] fieldset {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-8) var(--bro-abstand-16);
  margin: 0 0 var(--bro-abstand-8);
  border: 0;
  padding: 0;
}

/* Organigramm /personal/organigramm (#12468): eingerückte Ebenen mit
   Personenkarten. Nur Tokens. */
.portal-organigramm-ebene {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.portal-organigramm-ebene .portal-organigramm-ebene {
  margin: var(--bro-abstand-8) 0 0 var(--bro-abstand-24);
  padding-left: var(--bro-abstand-12);
  border-left: 1px solid var(--bro-linie);
}

.portal-organigramm-person {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-4) var(--bro-abstand-8);
  align-items: center;
  padding: var(--bro-abstand-8);
  border: 1px solid var(--bro-linie);
  background: var(--bro-flaeche-0);
  color: var(--bro-tinte-1);
  text-decoration: none;
}

.portal-organigramm-person summary {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-4) var(--bro-abstand-8);
  align-items: center;
  cursor: pointer;
}

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

.portal-organigramm-foto {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--bro-abstand-32);
  height: var(--bro-abstand-32);
  overflow: hidden;
  border-radius: 50%;
  background: var(--bro-akzent-flaeche);
  color: var(--bro-akzent-text);
  font-size: var(--bro-schrift-klein-groesse);
}

.portal-organigramm-foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.portal-organigramm-spitze {
  gap: var(--bro-abstand-16);
}

/* Teamraster auf „Urlaub & Abwesenheit“ /personal/abwesenheiten (#12782):
   eine Zeile je Person, eine Spalte je Tag des Monats, wie „Verwaltung im
   November“ der Klickdemo. Die Farbe je Art kommt von
   `.portal-teamkalender-eintrag--<art>`; jedes Feld trägt seinen Namen als
   Beschriftung, die Farbe ist nie das einzige Merkmal. Nur Tokens. */
.portal-teamraster-rahmen {
  overflow-x: auto;
}

.portal-teamraster {
  border-collapse: collapse;
  font-size: var(--bro-schrift-klein-groesse);
}

.portal-teamraster th,
.portal-teamraster td {
  min-width: var(--bro-abstand-24);
  padding: var(--bro-abstand-4) 0;
  text-align: center;
}

.portal-teamraster thead th {
  color: var(--bro-tinte-2);
  font-weight: var(--bro-schrift-klein-gewicht);
}

.portal-teamraster tbody th {
  padding-right: var(--bro-abstand-12);
  color: var(--bro-tinte-1);
  font-weight: var(--bro-schrift-betont-gewicht);
  text-align: left;
  white-space: nowrap;
}

.portal-teamraster .portal-teamraster-wochenende {
  color: var(--bro-tinte-3);
}

.portal-teamraster-feld {
  display: inline-block;
  width: var(--bro-abstand-16);
  height: var(--bro-abstand-16);
  border-radius: var(--bro-radius-s);
  /* Die Farbe setzt die Art-Klasse; ohne sie die starke Linie. */
  background: var(--portal-teamkalender-art, var(--bro-linie-stark));
  vertical-align: middle;
}

/* Abwesenheiten im Design Modern (#13140): Kalender oben, darunter die Reiter. */
.portal-abwesenheiten {
  display: grid;
  gap: var(--bro-abstand-16);
}

/* Zeitstrahl der Leitung auf /personal/teamkalender (#13480): dasselbe Raster
   wie das Teamraster, die Felder eines Eintrags laufen aber als Balken
   durch. Jedes Feld trägt seinen Namen als Beschriftung. Nur Tokens. */
.portal-zeitstrahl td {
  padding-right: 0;
  padding-left: 0;
}

.portal-zeitstrahl th[aria-current="date"] {
  color: var(--bro-akzent);
}

.portal-zeitstrahl-balken {
  width: 100%;
  border-radius: 0;
}

.portal-zeitstrahl caption {
  margin-bottom: var(--bro-abstand-8);
  text-align: left;
}

/*
 * 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);
  /* Oben ein Hauch der Hausfarbe des Betriebs, nach unten neutral
     (Nasri, 22.10.2026, Variante E). Gilt hell und dunkel. */
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--bro-akzent) 12%, var(--bro-flaeche-1)) 0,
    color-mix(in srgb, var(--bro-akzent) 4%, var(--bro-flaeche-1)) 150px,
    var(--bro-flaeche-1) 320px
  );
}

/* 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.
   Das Logo steht mittig im Logokopf, auf dem Verlauf der Hausfarbe. */
html[data-rahmen="modern"] .mo-leiste .mo-marke {
  flex-wrap: wrap;
  justify-content: center;
  min-height: var(--bro-modern-logo-kopf);
  margin: calc(-1 * var(--bro-abstand-24)) calc(-1 * var(--bro-abstand-12)) 0;
  padding: var(--bro-abstand-8) var(--bro-abstand-16);
}

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));
}

/* #13824: Die Gruppen der Modern-Leiste sind die sieben Dächer; ihre Kennfarbe
   setzt `rahmen-modern.ts` als Token-Verweis am Dach (`--mo-punkt`, `daecher.ts`).
   Die Farben je alter Leistengruppe (#10184) entfallen, weil Modern sie nicht
   mehr zeichnet. */

/* #13826: Kopfkarte des Arbeitsbereichs (Vorlage `.demo-ab-kopf`): Kennfarbe
   und Name des Dachs über „Zurück zu BroDesk“. Nur im geöffneten
   Arbeitsbereich; das Merkmal setzt `leisten-start.ts` vor dem Zeichnen. */
html[data-rahmen="modern"] .mo-arbeitsbereich-kopf {
  display: none;
}

html[data-rahmen="modern"][data-arbeitsbereich] .mo-arbeitsbereich-kopf {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--bro-abstand-8);
  margin: var(--bro-abstand-4) var(--bro-abstand-12) var(--bro-abstand-8);
  padding: var(--bro-abstand-8) var(--bro-abstand-12);
  border-radius: var(--bro-radius-m);
  background: var(--bro-flaeche-1);
  box-shadow: inset 0 0 0 1px var(--bro-linie);
}

html[data-rahmen="modern"] .mo-arbeitsbereich-kachel {
  background: var(--mo-punkt, var(--bro-modul-neutral));
  color: var(--bro-flaeche-1);
}

html[data-rahmen="modern"] .mo-arbeitsbereich-name {
  display: flex;
  flex-direction: column;
  min-width: 0;
  color: var(--bro-tinte-1);
}

html[data-rahmen="modern"] .mo-arbeitsbereich-name > span {
  color: var(--bro-tinte-3);
  font-size: var(--bro-schrift-fein-groesse);
}

/* Der Öffner im Seitenkopf (#13826) schrumpft und bricht um, auch das lange
   Wort „Arbeitsbereich“: Auf dem Handy und bei 200 % Zoom darf er die Seite
   nicht verbreitern. */
html[data-rahmen="modern"] .mo-arbeitsbereich-oeffnen {
  min-width: 0;
  max-width: 100%;
}

html[data-rahmen="modern"] .mo-arbeitsbereich-oeffnen > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

html[data-rahmen="modern"] .mo-arbeitsbereich-oeffnen > .bro-symbol {
  flex: none;
}

/* Eingeklappt bleibt nur die Kachel. */
html[data-rahmen="modern"][data-leiste="schmal"] .mo-arbeitsbereich-name {
  display: none;
}

/* #13397: „Aus der Gruppe“ — angeheftete Punkte anderer Gruppenbetriebe.
   Die Gruppe neutral; der Punkt am Ende trägt den Akzent des Zielbetriebs,
   den der Router nur in der Form #rrggbb als Variable setzt. */
html[data-rahmen="modern"] [data-nav-gruppe="aus-der-gruppe"] {
  --mo-punkt: var(--bro-modul-neutral);
}

html[data-rahmen="modern"] .mo-gruppe-farbpunkt {
  flex: none;
  width: var(--bro-modern-gruppenpunkt);
  height: var(--bro-modern-gruppenpunkt);
  margin-inline-start: auto;
  border-radius: var(--bro-radius-rund);
  background: var(--mo-gruppe-farbe, var(--bro-modul-neutral));
}

/* Die schmale Rückleiste im Zielbetrieb nach einem Wechsel (#13397). */
html[data-rahmen="modern"] .mo-rueckleiste {
  padding: var(--bro-abstand-4) var(--bro-abstand-16);
  border-bottom: var(--bro-modern-haarlinie) solid var(--bro-linie);
  background: var(--bro-flaeche-1);
  font-size: var(--bro-schrift-fein-groesse);
}

html[data-rahmen="modern"] .mo-rueckleiste-link {
  display: inline-flex;
  align-items: center;
  gap: var(--bro-abstand-8);
  color: var(--bro-akzent-text);
}

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-flaeche-1);
  color: var(--bro-akzent-text);
  font-weight: var(--bro-schrift-betont-gewicht);
  box-shadow:
    inset 3px 0 0 var(--bro-akzent),
    0 1px 3px color-mix(in srgb, var(--bro-akzent) 18%, transparent);
}

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,
  html[data-rahmen="modern"][data-leiste="schmal"] .mo-leiste .mo-firmenlogo-link {
    justify-content: center;
  }

  html[data-rahmen="modern"][data-leiste="schmal"] .mo-leiste .mo-marke {
    margin-inline: calc(-1 * var(--bro-abstand-8));
  }

  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 {
  /* Sitzt an der Unterkante des Logokopfs. */
  top: calc(var(--bro-modern-logo-kopf) - var(--bro-modern-leiste-knopf) / 2);
  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);
}

/* „Frag Bro“ (#12889) neben der Suche: dieselbe Feldform, schmaler; das
   Formular selbst kommt aus `frag-bro/feld.ts`. */
html[data-rahmen="modern"] .mo-fragbro {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--bro-abstand-4);
  max-width: var(--bro-modern-suche-breite);
  min-width: 0;
  margin: 0;
}

html[data-rahmen="modern"] .mo-fragbro > input {
  flex: 1;
  min-width: 0;
  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);
}

/* Schmal bricht der Tastenhinweis in eine eigene Zeile um, statt über den
   Menürand zu laufen (#14130, WCAG 1.4.10). Umbruch statt Ausblenden:
   `--bro-geraet-schmal` trifft auch ein Desktopfenster bei 200 % Zoom, und
   dort gibt es eine Tastatur. */
@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="modern"] .mo-brodesk-punkt {
    flex-wrap: wrap;
  }

  html[data-rahmen="modern"] .mo-brodesk-taste {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

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

  /* „Frag Bro“ bekommt auf dem Handy eine eigene Zeile unter der Suche. */
  html[data-rahmen="modern"] .mo-kopf > .mo-fragbro {
    grid-column: 1 / -1;
    width: 100%;
    max-width: none;
  }

  /* Umbruch statt Überlauf nach links: Bei 320 px und 200 % Zoom (160
     CSS-px) passen die Knöpfe nicht in eine Zeile (#14152, WCAG 1.4.10). */
  html[data-rahmen="modern"] .mo-kopf-aktionen {
    grid-column: 1 / -1;
    flex-wrap: wrap;
    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);
  }

  html[data-rahmen="modern"] .mo-leiste .mo-marke {
    margin-top: calc(-1 * 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);
}

/* #10786: Die vorhandenen Marken bleiben bei starkem Zoom vollständig erreichbar. */
html[data-rahmen="modern"] .mo-fuss-marken {
  flex-wrap: wrap;
  max-width: 100%;
}

html[data-rahmen="modern"] .mo-fuss-marke {
  gap: var(--bro-abstand-8);
}

/* Die unveränderten Originalmarken dürfen bei Zoom untereinander stehen. */
html[data-rahmen="modern"] .mo-fuss-marken {
  flex-wrap: wrap;
  max-width: 100%;
}

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 {
  max-width: 100%;
  overflow-wrap: anywhere;
  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;
  }
}

/* ---- Handy: untere Reiter in Mein Bereich (#13137) ---- */

/* Vorlage `HRModern.dc.html`, Rolle „Mitarbeiter“ (`.hk-tabs`): sechs Reiter
   unten wie in einer App. Am PC und auf dem Tablet quer stehen die Ziele in
   der Leiste; die Reiter erscheinen nur auf schmalen Geräten. Jeder Reiter
   hat mindestens die Berührungsfläche; die Seite wird nie waagerecht
   verschiebbar. */
html[data-rahmen="modern"] .mo-handy-reiter {
  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) {
  html[data-rahmen="modern"] .mo-handy-reiter {
    position: fixed;
    inset: auto 0 0;
    z-index: 30;
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    padding: var(--bro-abstand-4) 0 calc(var(--bro-abstand-4) + env(safe-area-inset-bottom));
    border-top: 1px solid var(--bro-linie);
    background: var(--bro-flaeche-1);
  }

  html[data-rahmen="modern"] .mo-handy-reiter-punkt {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    min-height: var(--bro-beruehrungsflaeche);
    padding: var(--bro-abstand-4) 0;
    border-radius: var(--bro-radius-m);
    color: var(--bro-tinte-2);
    /* Klein wie die Vorlage (`.hk-tab`): „Dokumente“ passt bei 390 px ganz. */
    font-size: var(--bro-schrift-gruppentitel-groesse);
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
  }

  /* Ein Wort bricht nicht in der Mitte; reicht der Platz nicht (sehr kleine
     Schrift-Einstellung), wird es abgeschnitten statt die Zeile zu sprengen. */
  html[data-rahmen="modern"] .mo-handy-reiter-punkt > span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html[data-rahmen="modern"] .mo-handy-reiter-punkt .bro-symbol {
    width: 22px;
    height: 22px;
    flex: none;
  }

  html[data-rahmen="modern"] .mo-handy-reiter-punkt[aria-current="page"] {
    color: var(--bro-akzent-text);
    font-weight: 600;
  }

  html[data-rahmen="modern"] .mo-handy-reiter-punkt:focus-visible {
    outline: 2px solid var(--bro-akzent);
    outline-offset: -2px;
  }

  /* Platz unter dem Inhalt, damit der Fuß nicht unter den Reitern liegt. */
  html[data-rahmen="modern"] .portal-schale:has(.mo-handy-reiter) .portal-hauptspalte {
    padding-bottom: calc(
      var(--bro-beruehrungsflaeche) + var(--bro-abstand-16) + env(safe-area-inset-bottom)
    );
  }

  /* Nie zwei Leisten: Die alte Drei-Punkte-Leiste von Mein Bereich
     (`meinBereichLeiste`) weicht den Reitern. */
  html[data-rahmen="modern"] body:has(.mo-handy-reiter) .mein-bereich-leiste {
    display: none;
  }
}

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

/* Zeiterfassung: Gruppe Team, derselbe Farbtoken wie im Bereichskopf (#10173). */
html[data-design="modern"]
  :is(.portal-widget, .portal-widget-karte)[data-widget-modul="zeiterfassung"] {
  --widget-farbe: var(--bro-datenreihe-5);
}

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);
}

/* #12887: Posteingang und Bewertungen der Kurzzeitvermietung im Design Modern.
   Nur die Zweispaltigkeit und die Gesprächseinträge; Boxen, Pillen und Knöpfe
   kommen aus den Bausteinen. Auf schmalen Bildschirmen untereinander. */
html[data-design="modern"] [data-vermietung-zweispaltig] {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--bro-abstand-16);
  align-items: start;
  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"] [data-vermietung-zweispaltig] {
    grid-template-columns: minmax(0, 1fr);
  }
}

html[data-design="modern"] [data-posteingang-liste] {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-konsole-radius-box);
  overflow: hidden;
}

html[data-design="modern"] [data-posteingang-eintrag] {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
  min-width: 0;
  padding: var(--bro-abstand-12);
  border-bottom: 1px solid var(--bro-linie);
  color: var(--bro-tinte-1);
  text-decoration: none;
}

html[data-design="modern"] [data-posteingang-eintrag]:last-child {
  border-bottom: 0;
}

html[data-design="modern"] [data-posteingang-eintrag][aria-current="true"] {
  background: var(--bro-flaeche-0);
}

html[data-design="modern"] [data-posteingang-eintrag-kopf] {
  display: flex;
  align-items: baseline;
  gap: var(--bro-abstand-8);
  min-width: 0;
}

html[data-design="modern"] [data-posteingang-eintrag-kopf] > :last-child {
  margin-left: auto;
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
}

html[data-design="modern"] [data-posteingang-vorschau] {
  overflow: hidden;
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-design="modern"] :is([data-posteingang-pillen], [data-posteingang-knoepfe]) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-8);
}

html[data-design="modern"] :is([data-posteingang-faden], [data-bewertung-gewaehlt]) {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
  min-width: 0;
}

html[data-design="modern"] [data-posteingang-entwurf] {
  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-konsole-radius-box);
}

/* #12894: Preise je Nacht der Kurzzeitvermietung im Design Modern.
   Nur das Tagesraster; Boxen, Plaketten und Knöpfe kommen aus den Bausteinen.
   Belegte Nächte grau, Wochenende und Lücken hervorgehoben. */
html[data-design="modern"] [data-preisraster] {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--bro-abstand-8);
  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"] [data-preisraster] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

html[data-design="modern"] [data-preistag] {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
  min-width: 0;
  padding: var(--bro-abstand-8);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-konsole-radius-box);
  color: var(--bro-tinte-1);
  font-size: var(--bro-schrift-klein-groesse);
}

html[data-design="modern"] [data-preistag][data-wochenende] {
  background: var(--bro-flaeche-0);
}

html[data-design="modern"] [data-preistag][data-belegt] {
  background: var(--bro-flaeche-1);
  color: var(--bro-tinte-2);
}

html[data-design="modern"] [data-preistag][data-luecke] {
  border-style: dashed;
  border-color: var(--bro-akzent);
}

/* #12897: „Alles einrichten“ der Kurzzeitvermietung — die Karten zu den
   Einstellungsseiten im Raster. Gilt in allen Designs (dieselben Karten);
   Karte, Kachel und Schrift kommen aus den Bausteinen, hier nur das Raster
   und die Anordnung in der Karte. Nur Tokens, keine festen Werte. */
[data-einrichtung-karten] {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--bro-abstand-12);
  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) {
  [data-einrichtung-karten] {
    grid-template-columns: minmax(0, 1fr);
  }
}

[data-einrichtung-karte] {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

[data-einrichtung-kopf] {
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-8);
}

[data-einrichtung-oeffnen] {
  margin-top: auto;
  color: var(--bro-akzent-text);
  font-weight: var(--bro-schrift-betont-gewicht);
}

/* #13143: „Umfang und Module“ im Design Modern. Die drei Vorlagen stehen als
   Karten nebeneinander (Vorlage `SEITEN.module` in
   docs/design-canvas/HRModern.dc.html), auf schmalen Geräten untereinander.
   Karte, Schrift und Knöpfe kommen aus den Bausteinen; hier nur Raster und
   Anordnung. Nur Tokens, keine festen Werte. */
[data-hr-umfang-modern] {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
  min-width: 0;
}

[data-hr-vorlagen] {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--bro-abstand-12);
  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) {
  [data-hr-vorlagen] {
    grid-template-columns: minmax(0, 1fr);
  }
}

[data-hr-vorlagen] > [data-hr-vorlage] {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  min-width: 0;
}

[data-hr-vorlage-kopf] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bro-abstand-8);
}

[data-hr-vorlage-knopf] {
  margin-top: auto;
}

[data-hr-schalter-zelle] {
  width: 1%;
  white-space: nowrap;
}

/* #13139: Mitarbeiterliste und Ein- und Austritte im Design Modern. Foto
   und Name in einer Zeile, die beiden Abläufe nebeneinander, auf schmalen
   Geräten untereinander. Nur Tokens, keine festen Werte. */
.portal-mitarbeiter-person {
  display: inline-flex;
  align-items: center;
  gap: var(--bro-abstand-8);
  min-width: 0;
}

.portal-ein-austritte {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--bro-abstand-12);
  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-ein-austritte {
    grid-template-columns: minmax(0, 1fr);
  }
}

.portal-ein-austritte {
  align-items: start;
}

.portal-ein-austritte > .bb-box {
  margin: 0;
}

/* Ein- und Austritte (#13474): je Person eine Karte mit Kopf, Plan und
   Aufgaben, untereinander in ihrer Box. Die Aufgabentabellen brauchen die
   volle Breite, deshalb stehen Eintritte und Austritte untereinander; was auf
   schmalen Geräten nicht passt, rollt in der Karte. Nur Tokens. */
.portal-ein-austritte:has(.portal-ein-austritt-karte) {
  grid-template-columns: minmax(0, 1fr);
}

.portal-ein-austritt-karte {
  overflow-x: auto;
}

.portal-ein-austritt-karte + .portal-ein-austritt-karte {
  margin-top: var(--bro-abstand-16);
  padding-top: var(--bro-abstand-16);
  border-top: 1px solid var(--bro-linie);
}

.portal-ein-austritt-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--bro-abstand-8);
}

.portal-ein-austritt-kopf h3 {
  margin: 0;
}

/* #13476: Bewerbungen nach Stand als Tafel (Vorlage `SEITEN.bewerbung`,
   `.hk-kanban` in docs/design-canvas/HRModern.dc.html). Vier Spalten, auf
   schmalen Geräten untereinander. Karte, Schrift und Knöpfe kommen aus den
   Bausteinen; hier nur Raster und Anordnung. Nur Tokens. */
.hk-kanban {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--bro-abstand-12);
  min-width: 0;
  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) {
  .hk-kanban {
    grid-template-columns: minmax(0, 1fr);
  }
}

.hk-spalte {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  min-width: 0;
  padding: var(--bro-abstand-12);
  border-radius: var(--bro-radius-m);
  background: var(--bro-flaeche-1);
}

.hk-spalte > h3 {
  margin: 0;
}

.hk-spalte-karten {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hk-bewerbung {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--bro-abstand-4);
  min-width: 0;
}

.hk-bewerbung-wechsel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bro-abstand-4);
  margin-top: var(--bro-abstand-4);
}

/* #13481: „Anträge“ im Design Modern. Links die Liste, daneben das Detail
   des gewählten Antrags (Vorlage `SEITEN.antraege`, `hk-zwei`); auf
   schmalen Geräten das Detail unter der Liste. Nur Tokens. */
[data-antraege-zwei] {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--bro-abstand-12);
  align-items: start;
  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) {
  [data-antraege-zwei] {
    grid-template-columns: minmax(0, 1fr);
  }
}

[data-antraege-liste] {
  min-width: 0;
  overflow-x: auto;
}

[data-antrag-gewaehlt] a {
  font-weight: var(--bro-schrift-betont-gewicht);
}

[data-antrag-detail] {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  min-width: 0;
}

[data-antrag-detail] > h2,
[data-antrag-detail] > p {
  margin: 0;
}

[data-antrag-angaben] {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--bro-abstand-4) var(--bro-abstand-12);
  margin: 0;
}

[data-antrag-angaben] dt {
  color: var(--bro-tinte-2);
}

[data-antrag-angaben] dd {
  margin: 0;
  overflow-wrap: anywhere;
}

[data-antrag-beleg] img {
  max-width: 100%;
  max-height: 16rem;
  object-fit: contain;
  border-radius: var(--bro-radius-s);
}

/* #13470: Branchenprofil unten auf „Umfang und Module“. Die fünf Zeilen
   als Raster Bezeichnung und Wert (Vorlage `branchenKarte()` in
   docs/design-canvas/HRModern.dc.html), auf schmalen Geräten untereinander.
   Nur Tokens, keine festen Werte. */
[data-hr-branchenprofil] {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
  min-width: 0;
}

[data-hr-branchen-zeilen] {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--bro-abstand-8) var(--bro-abstand-12);
  margin: 0;
}

[data-hr-branchen-zeilen] > dd {
  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) {
  [data-hr-branchen-zeilen] {
    grid-template-columns: minmax(0, 1fr);
  }
}

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

/* #10824, abgestimmt an #10544/#10562: In der nativen Datensatzhülle
   bricht der Vollansichtslink innerhalb seiner Fläche um. Eine zusätzliche
   Zeile nur für Schließen würde dem iframe bei starkem Zoom die Höhe nehmen. */
html:is([data-design="modern"], [data-rahmen="modern"])
  .portal-pdf.portal-schublade[data-datensatz-fenster-dialog]
  > .portal-pdf-kopf
  > .portal-pdf-leiste {
  flex-wrap: nowrap;
}

html:is([data-design="modern"], [data-rahmen="modern"])
  .portal-pdf.portal-schublade[data-datensatz-fenster-dialog]
  > .portal-pdf-kopf
  > .portal-pdf-leiste
  > .portal-datensatz-ganz {
  flex: 1 1 0;
}

html:is([data-design="modern"], [data-rahmen="modern"])
  .portal-pdf.portal-schublade[data-datensatz-fenster-dialog]
  > .portal-pdf-kopf
  > .portal-pdf-leiste
  > .portal-pdf-knopf {
  flex: 0 0 var(--bro-beruehrungsflaeche);
}

/* #10787: Nur die eigene Komposition. Lange Titel und Formularaktionen
   fließen auch in schmalen Vollseiten und bei Zoom ohne Abschneiden um. */
.portal-belege-zahlungen {
  min-inline-size: 0;
  max-inline-size: 100%;
  overflow-wrap: anywhere;
}

html[data-design="modern"]
  .portal-inhalt:has(.portal-belege-zahlungen)
  :is(.portal-seitenkopf, .portal-seitenkopf-aktionen, .portal-seitenkopf-zurueck) {
  min-inline-size: 0;
  max-inline-size: 100%;
  overflow-wrap: anywhere;
}

.portal-inhalt:has(.portal-belege-zahlungen) .portal-seitenkopf :is(h1, a, button),
.portal-belege-zahlungen :is(h2, h3, form, .bro-knopf) {
  min-inline-size: 0;
  max-inline-size: 100%;
  overflow-wrap: anywhere;
}

.portal-inhalt:has(.portal-belege-zahlungen) .portal-seitenkopf :is(a, button),
.portal-belege-zahlungen .bro-knopf {
  box-sizing: border-box;
  white-space: normal;
}

/* Der gemeinsame Kennzahlgrundwert ist 200px. In dieser Komposition darf
   eine einzelne Kachel bei Zoom auch kleiner als dieser Grundwert werden. */
.portal-belege-zahlungen .bb-kennzahlen {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}

/* Kurze Fachwerte und Aktionen dürfen die Langtextspalten nicht auf
   Buchstabenbreite zusammendrücken. Der vorhandene Tabellenrahmen scrollt
   auf schmalen Geräten; lange Nummern, Namen und Zwecke bleiben umbrechbar. */
.portal-belege-zahlungen
  :is([data-belege-posteingang], [data-belege-zahlungsauftraege], [data-belege-postfaecher]) {
  /* Nur der vorhandene Elternrahmen scrollt. Die mobile Blocktabelle
     erzeugte zusätzlich einen inneren Scrollrand an der letzten Aktion. */
  display: table;
  overflow: visible;
}

.portal-belege-zahlungen :is([data-belege-posteingang], [data-belege-zahlungsauftraege]) {
  min-inline-size: 56rem;
}

.portal-belege-zahlungen [data-belege-postfaecher] {
  min-inline-size: 40rem;
}

/* Der gemeinsame schmale Modern-Stil lässt lange Statusmeldungen umbrechen.
   Diese Spalte enthält ausschließlich die kurzen Werte „Aktiv“ und „Aus“. */
.portal-belege-zahlungen [data-belege-postfaecher] td:nth-child(3) > .bro-statuspille {
  white-space: nowrap;
  overflow-wrap: normal;
}

.portal-belege-zahlungen
  :is([data-belege-posteingang], [data-belege-zahlungsauftraege], [data-belege-postfaecher])
  :is(td:last-child > a, td:last-child > details > summary, td .bro-knopf) {
  white-space: nowrap;
  overflow-wrap: normal;
}

.portal-belege-zahlungen
  [data-belege-posteingang]
  :is(td:first-child, td:nth-child(4), td:nth-child(5)),
.portal-belege-zahlungen [data-belege-zahlungsauftraege] td:nth-child(4),
.portal-belege-zahlungen [data-belege-postfaecher] td:nth-child(3) {
  white-space: nowrap;
}

.portal-belege-zahlungen [data-belege-posteingang] td:nth-child(2),
.portal-belege-zahlungen [data-belege-zahlungsauftraege] td:nth-child(2),
.portal-belege-zahlungen [data-belege-postfaecher] td:first-child {
  min-inline-size: 12rem;
}

.portal-belege-zahlungen [data-belege-posteingang] td:nth-child(3),
.portal-belege-zahlungen [data-belege-posteingang] td:nth-child(6),
.portal-belege-zahlungen
  [data-belege-zahlungsauftraege]
  :is(td:first-child, td:nth-child(3), td:nth-child(5)) {
  min-inline-size: 9rem;
}

.portal-belege-zahlungen [data-belege-zahlungsauftraege] td:nth-child(6) {
  min-inline-size: 7rem;
  white-space: nowrap;
}

.portal-belege-zahlungen [data-belege-zahlungsauftraege] td:nth-child(6) > span {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Die unveränderten Marken passen nebeneinander nicht mehr in die bei 200%
   Zoom verbleibende Fußbreite. Nur eigene Seiten lassen diese Zeile umbrechen. */
html[data-rahmen="modern"] body:has(.portal-belege-zahlungen) .mo-fuss-marken {
  flex-wrap: wrap;
  min-inline-size: 0;
  max-inline-size: 100%;
}

/* Rechnungsbereich im BroDesk-Stil (Chat 30.10.2026): Zahlungsstand und Satz
   (Kurzansicht und volle Seite), die Kurzansicht in der Schublade
   (`rechnungKurzansichtSeite`) und die volle Rechnungsseite
   (`rechnungDetailSeite`). Nur über Tokens. */

.portal-rechnung-kurz {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-16);
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

.portal-rechnung-kurz-kopf {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
}

.portal-rechnung-kurz-kopf p {
  margin: 0;
}

.portal-rechnung-kurz-kopf p:last-child {
  color: var(--bro-tinte-2);
}

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

/* Betrag · bezahlt · offen, darunter der Balken über die volle Breite. */
.portal-rechnung-stand {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-konsole-radius-box);
  background: var(--bro-flaeche-1);
}

.portal-rechnung-stand > div {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
  min-inline-size: 0;
  padding: var(--bro-abstand-12);
  border-inline-end: 1px solid var(--bro-linie);
}

.portal-rechnung-stand > div:nth-child(3) {
  border-inline-end: 0;
}

.portal-rechnung-stand dt {
  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);
  text-transform: uppercase;
}

.portal-rechnung-stand dd {
  margin: 0;
  font-size: var(--bro-schrift-titel-groesse);
  font-weight: var(--bro-schrift-titel-gewicht);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.portal-rechnung-stand dd[data-ton="fehler"] {
  color: var(--bro-fehler);
}

.portal-rechnung-balken {
  grid-column: 1 / -1;
  display: block;
  inline-size: 100%;
  block-size: 5px;
  border: 0;
  appearance: none;
  background: var(--bro-flaeche-0);
}

.portal-rechnung-balken::-webkit-progress-bar {
  background: var(--bro-flaeche-0);
}

.portal-rechnung-balken::-webkit-progress-value {
  background: var(--bro-erfolg);
}

.portal-rechnung-balken::-moz-progress-bar {
  background: var(--bro-erfolg);
}

/* Ein Satz zum Stand, im Ton des Stands. */
.portal-rechnung-satz {
  margin: 0;
  padding: var(--bro-abstand-8) var(--bro-abstand-12);
  border-radius: var(--bro-konsole-radius-box);
  background: var(--bro-akzent-flaeche);
  color: var(--bro-akzent-text);
  font-size: var(--bro-schrift-klein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
}

.portal-rechnung-satz[data-ton="ueberfaellig"] {
  background: var(--bro-fehler-flaeche);
  color: var(--bro-fehler);
}

.portal-rechnung-satz[data-ton="teilbezahlt"] {
  background: var(--bro-warnung-flaeche);
  color: var(--bro-warnung);
}

.portal-rechnung-satz[data-ton="bezahlt"] {
  background: color-mix(in oklab, var(--bro-erfolg) 10%, var(--bro-flaeche-1));
  color: var(--bro-erfolg);
}

.portal-rechnung-satz[data-ton="storniert"] {
  background: var(--bro-flaeche-0);
  color: var(--bro-tinte-2);
}

/* Handlungen: zugeklappt ein Knopf, aufgeklappt das Formular darunter. */
.portal-rechnung-kurz-handlungen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bro-abstand-8);
}

.portal-rechnung-kurz-handlung > summary {
  list-style: none;
  cursor: pointer;
}

.portal-rechnung-kurz-handlung > summary::-webkit-details-marker {
  display: none;
}

.portal-rechnung-kurz-handlung[open] {
  flex-basis: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
  padding: var(--bro-abstand-12);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-konsole-radius-box);
}

.portal-rechnung-kurz-handlung[open] > summary {
  align-self: flex-start;
}

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

.portal-rechnung-kurz-formular p {
  margin: 0;
}

/* Abschnitte: zugeklappt Titel und Kurzfassung in einer Zeile. */
.portal-rechnung-kurz-abschnitt {
  overflow: hidden;
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-konsole-radius-box);
  background: var(--bro-flaeche-1);
}

.portal-rechnung-kurz-abschnitt > summary {
  display: flex;
  align-items: center;
  gap: var(--bro-abstand-12);
  padding: var(--bro-abstand-12);
  list-style: none;
  cursor: pointer;
}

.portal-rechnung-kurz-abschnitt > summary::-webkit-details-marker {
  display: none;
}

.portal-rechnung-kurz-abschnitt > summary > :last-child {
  margin-inline-start: auto;
  color: var(--bro-tinte-2);
  font-variant-numeric: tabular-nums;
  text-align: end;
}

.portal-rechnung-kurz-abschnitt > summary::after {
  content: "";
  flex: none;
  inline-size: 7px;
  block-size: 7px;
  border-inline-end: 2px solid var(--bro-tinte-3);
  border-block-end: 2px solid var(--bro-tinte-3);
  transform: rotate(45deg);
}

.portal-rechnung-kurz-abschnitt[open] > summary::after {
  transform: rotate(-135deg);
}

.portal-rechnung-kurz-abschnitt > summary:hover {
  background: var(--bro-flaeche-0);
}

.portal-rechnung-kurz-abschnitt > :not(summary) {
  margin: 0;
  padding: var(--bro-abstand-8) var(--bro-abstand-12) var(--bro-abstand-12);
  border-block-start: 1px solid var(--bro-linie);
}

.portal-rechnung-kurz-liste {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-4);
  font-size: var(--bro-schrift-klein-groesse);
}

.portal-rechnung-kurz-liste > div {
  display: flex;
  justify-content: space-between;
  gap: var(--bro-abstand-12);
}

.portal-rechnung-kurz-liste dt {
  min-inline-size: 0;
  color: var(--bro-tinte-2);
}

.portal-rechnung-kurz-liste dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.portal-rechnung-kurz-liste > [data-stark] {
  padding-block-start: var(--bro-abstand-4);
  border-block-start: 1px solid var(--bro-linie);
  font-weight: var(--bro-schrift-betont-gewicht);
}

.portal-rechnung-kurz-ganz {
  margin: 0;
}

/* Volle Rechnungsseite: links der Arbeitsbereich, rechts Angaben, Kette
   und PDF; auf schmalen Geräten untereinander (#6744). */
.portal-rechnung-akte {
  max-width: none;
}

.portal-rechnung-akte .portal-beleg-kopf {
  flex-wrap: wrap;
}

.portal-rechnung-akte-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
  gap: var(--bro-abstand-24);
  align-items: 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) {
  .portal-rechnung-akte-raster {
    grid-template-columns: minmax(0, 1fr);
  }
}

.portal-rechnung-akte-haupt,
.portal-rechnung-akte-seite,
.portal-rechnung-akte-weitere {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-16);
  min-inline-size: 0;
}

.portal-rechnung-akte-seite .portal-beleg-daten {
  grid-template-columns: minmax(0, 1fr);
  padding: var(--bro-abstand-16);
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-konsole-radius-box);
  background: var(--bro-flaeche-0);
}

.portal-rechnung-abschnitt {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-12);
  min-inline-size: 0;
}

.portal-rechnung-abschnitt > h3,
.portal-rechnung-akte-weitere > h3 {
  margin: 0;
}

/* Die Tabelle scrollt in ihrem Abschnitt, nicht die Seite. */
.portal-rechnung-abschnitt:has(> table),
.portal-rechnung-abschnitt > table {
  overflow-x: auto;
}

.portal-rechnung-gruppe {
  overflow: hidden;
  border: 1px solid var(--bro-linie);
  border-radius: var(--bro-konsole-radius-box);
  background: var(--bro-flaeche-1);
}

.portal-rechnung-gruppe > summary {
  padding: var(--bro-abstand-12) var(--bro-abstand-16);
  cursor: pointer;
}

.portal-rechnung-gruppe > summary:hover {
  background: var(--bro-flaeche-0);
}

.portal-rechnung-gruppe-inhalt {
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-16);
  padding: var(--bro-abstand-12) var(--bro-abstand-16) var(--bro-abstand-16);
  border-block-start: 1px solid var(--bro-linie);
}

/* Der Betriebs-Umschalter oben (#13399, `betriebswechsel/umschalter.ts`).
   Nur Tokens (B14.7). Er klappt im Kopf nach unten auf wie der
   Firmen-Umschalter der Gruppe; auf schmalen Geräten steht nur das Symbol,
   die Liste nimmt dann die volle Breite. */
.portal-betriebswahl {
  position: relative;
}

.portal-betriebswahl-knopf {
  display: inline-flex;
  align-items: center;
  gap: var(--bro-abstand-8);
  width: auto;
  max-width: 16rem;
  padding: 0 var(--bro-abstand-8);
  list-style: none;
  cursor: pointer;
}

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

.portal-betriebswahl-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--bro-schrift-klein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
}

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

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

.portal-betriebswahl-feld {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 31;
  display: flex;
  flex-direction: column;
  gap: var(--bro-abstand-8);
  width: 22rem;
  max-width: calc(100vw - 2 * var(--bro-abstand-8));
  max-height: 70vh;
  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-betriebswahl-feld [hidden] {
  display: none !important;
}

.portal-betriebswahl-suche {
  width: 100%;
}

.portal-betriebswahl-liste {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
}

.portal-betriebswahl-abschnitt {
  margin: var(--bro-abstand-8) 0 0;
  padding: 0 10px;
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
  font-weight: var(--bro-schrift-betont-gewicht);
}

.portal-betriebswahl-punkt {
  display: flex;
  flex-direction: column;
  padding: var(--bro-abstand-8) 10px;
  color: var(--bro-tinte-1);
  border-radius: var(--bro-radius-m);
  text-decoration: none;
}

.portal-betriebswahl-punkt:hover,
.portal-betriebswahl-punkt[aria-selected="true"] {
  background: var(--bro-flaeche-0);
  box-shadow: inset 2px 0 0 var(--bro-akzent);
}

.portal-betriebswahl-punkt-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--bro-schrift-fliesstext-groesse);
}

.portal-betriebswahl-punkt-zeile,
.portal-betriebswahl-hinweis,
.portal-betriebswahl-start,
.portal-betriebswahl-marke {
  color: var(--bro-tinte-2);
  font-size: var(--bro-schrift-klein-groesse);
  line-height: var(--bro-schrift-klein-zeilenhoehe);
}

.portal-betriebswahl-start {
  align-self: flex-end;
  margin-top: calc(-1 * var(--bro-abstand-8));
  padding: 0 10px var(--bro-abstand-8);
}

.portal-betriebswahl-hinweis {
  margin: 0;
  padding: 0 10px;
}

.portal-betriebswahl-alle {
  padding: var(--bro-abstand-8) 10px 0;
  border-top: 1px solid var(--bro-linie);
  color: var(--bro-tinte-1);
  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) {
  .portal-betriebswahl-name {
    display: none;
  }

  .portal-betriebswahl-feld {
    position: fixed;
    top: 60px;
    left: var(--bro-abstand-8);
    right: var(--bro-abstand-8);
    width: auto;
  }
}

/* „Seitenleiste anpassen“ (#13398) auf der Seite „Betrieb wechseln“. */
.portal-leiste-anpassen-liste {
  display: grid;
  gap: var(--bro-abstand-8);
  padding: 0;
  list-style: none;
}

.portal-leiste-anpassen-punkt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--bro-abstand-8);
  padding: var(--bro-abstand-8) 0;
  border-bottom: 1px solid var(--bro-linie);
}

.portal-leiste-anpassen-knoepfe,
.portal-leiste-anpassen-form,
.portal-leiste-anpassen-name {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--bro-abstand-8);
}