/* == Schrift: Barlow (selbst ausgeliefert) =================================
   Die Schriftdateien liegen unter public/assets/fonts/ — bewusst NICHT von
   einem Font-CDN: ein solcher Abruf trüge die Adresse jedes Besuchers, auch
   die des anonymen Melders, an einen Dritten (und die CSP default-src 'self'
   blockiert ihn ohnehin). Herkunft und Lizenz: public/assets/fonts/HERKUNFT.md.
   `font-display: swap` zeigt sofort die Systemschrift und tauscht später —
   die Seite ist nie wegen einer Schrift leer. */
@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/barlow-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/barlow-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/barlow-500-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/barlow-500-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/barlow-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/barlow-600-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/barlow-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/barlow-700-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* == CIRS Design-Tokens ====================================================
   Farbschema in Anlehnung an das Referenz-Set (Petrol/Grün, helle Blaufläche,
   4px/8px-Kanten, weiche Schatten in Markenfarbe).

   Die Farbtokens dieses Blocks sind der AUSLIEFERUNGSZUSTAND. Stellt die
   Verwaltung unter „Erscheinungsbild“ (/admin/design) eigene Grundfarben ein,
   liefert /theme.css denselben Tokensatz mit den eingestellten Werten aus; die
   Layouts binden diese Datei NACH app.css ein, gleiche Spezifität, also gewinnt
   sie. Wer hier ein Token ergänzt, ergänzt es auch in Cirs\Domain\Theme
   (verankert in tests/Unit/AppCssThemeTokensTest.php).

   Kontraste nach WCAG 2.1 AA (Prüfbericht UX-B3; nachgerechnet in
   tests/Unit/Domain/ThemeTest.php und tests/Unit/AppCssContrastTest.php):
   Weiß auf --accent 5,1:1 · --muted auf Karte 5,4:1, auf --paper 4,9:1,
   auf --brand-soft 4,7:1 · --line-strong (Rahmen von Eingabefeldern) auf
   Karte 3,5:1, auf --paper 3,1:1 · --amber auf --amber-bg 5,1:1, Weiß auf
   --amber (mark) 5,6:1 · --danger auf --danger-bg 4,9:1 · --green auf
   --green-bg 4,6:1. --line bleibt zart: Es trennt nur Flächen.

   Nicht einstellbar sind die Bedeutungsfarben (rot/gelb/grün): sie tragen im
   CIRS eine Aussage — Risikozonen, Fehler, Erledigtes — und dürfen nicht zur
   Geschmacksfrage werden. */
:root {
    /* -- einstellbar über /theme.css -- */
    --brand: #005f73;
    --brand-rgb: 0, 95, 115;
    --brand-dark: #004453;
    --brand-light: #388292;
    --brand-soft: #e6eff1;
    --brand-tint-1: #d1e2e6;
    --brand-tint-2: #9ec2ca;
    --brand-tint-3: #4e7d86;
    --on-brand: #ffffff;
    --bar: #005f73;
    --on-bar: #ffffff;
    --accent: #2e7d32;
    --accent-dark: #246227;
    --accent-soft: #e6efe6;
    --on-accent: #ffffff;
    --paper: #e8f4f8;
    --card: #ffffff;
    --line: #c7dce0;
    --line-strong: #6d8f96;
    --ink: #37474f;
    --muted: #636b6f;
    --shadow: 0 2px 4px rgba(0, 95, 115, 0.08);
    --shadow-md: 0 4px 16px rgba(0, 95, 115, 0.12);
    --shadow-lg: 0 8px 32px rgba(0, 95, 115, 0.16);

    /* -- fest: Bedeutungsfarben -- */
    --danger: #c62828;
    --danger-bg: #ffebee;
    --amber: #b93f00;
    --amber-bg: #fff3e0;
    --green: #2e7d32;
    --green-bg: #e8f5e9;

    /* -- fest: Schrift, Kanten, Abstände --
       Barlow wie im Referenz-Set, aber aus dem eigenen Verzeichnis (siehe
       @font-face oben). Die Systemschriften dahinter tragen die Seite, solange
       die Schrift lädt oder falls sie fehlt. */
    --sans: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --display: var(--sans);
    --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    --radius: 4px;
    --radius-lg: 8px;
}

/* == Dunkelmodus (Prüfbericht UX-B18) ======================================
   Folgt der Einstellung des Betriebssystems. Die Tokens dieses Blocks sind
   die dunkle Vorgabe aus Cirs\Domain\Theme::darkTokens(); /theme.css liefert
   denselben Block mit den eingestellten Farben (steht nach app.css und
   überschreibt sonst die dunklen Vorgaben — verankert in
   tests/Unit/AppCssThemeTokensTest.php). Kontraste nach WCAG 2.1 AA wie im
   hellen Satz (tests/Unit/Domain/ThemeTest.php, AppCssContrastTest.php).
   Nur für den Bildschirm: gedruckt wird immer hell. */
@media screen and (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --brand: #6da3af;
        --brand-rgb: 109, 163, 175;
        --brand-dark: #a7c8cf;
        --brand-light: #8ab5bf;
        --brand-soft: #0d3741;
        --brand-tint-1: #0c3a45;
        --brand-tint-2: #074857;
        --brand-tint-3: #65919b;
        --on-brand: #10242e;
        --bar: #004351;
        --on-bar: #ffffff;
        --accent: #2e7d32;
        --accent-dark: #246227;
        --accent-soft: #193c2e;
        --on-accent: #ffffff;
        --paper: #0b1b1f;
        --card: #12262c;
        --line: #264249;
        --line-strong: #56757c;
        --ink: #e4ecee;
        --muted: #a5b1b4;
        --shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
        --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
        --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.55);

        /* Bedeutungsfarben, dunkel (fest): Schrift auf ihrer Fläche ≥ 4,5:1. */
        --danger: #ff8a80;
        --danger-bg: #3b1614;
        --amber: #ffb74d;
        --amber-bg: #3a2605;
        --green: #81c784;
        --green-bg: #12301a;
    }
}

/* == Basis ================================================================= */
*, *::before, *::after { box-sizing: border-box; }
body {
    margin: 0;
    font-family: var(--sans);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ink);
    background: var(--paper);
}
/* Überschriften wie im Referenz-Set: Barlow in der Primärfarbe. Sie sind damit
   auch das erste, was eine eingestellte Primärfarbe sichtbar macht. Kästen mit
   eigener Bedeutung (Anonymitäts-Check, Demo-Hinweis) setzen ihre Farbe weiter
   unten selbst und bleiben davon unberührt. */
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.25; color: var(--brand); }
h1 { font-size: 1.75rem; margin: 0 0 1rem; font-weight: 700; letter-spacing: 0.01em; }
h2 { font-size: 1.2rem; margin: 0 0 0.75rem; }
a { color: var(--brand); }
a:hover { color: var(--brand-dark); }
code { font-family: var(--mono); }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 2px; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

.skip-link {
    position: absolute; left: -999px; top: 0; background: var(--card);
    padding: 0.5rem 1rem; z-index: 10;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

/* == App-Shell =============================================================
   Kopfleiste in der Primärfarbe (Referenz-Design). Schrift und Rahmen darauf
   kommen aus --on-brand, nicht aus einem festen Weiß: bei einer hellen
   Primärfarbe kippt die Schrift dadurch automatisch auf Dunkel, statt
   unlesbar zu werden. `color-mix` blendet sie für die Ruhezustände zurück —
   Browser ohne Unterstützung zeigen schlicht den vollen Kontrast. */
.topbar {
    background: var(--bar);
    color: var(--on-bar);
    padding: 0 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 1.25rem;
    box-shadow: var(--shadow-md);
}
.topbar .brand {
    font-family: var(--display);
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--on-bar);
    text-decoration: none;
    padding: 0.55rem 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
/* Weißes Feld hinter der Bildmarke: ein hochgeladenes Logo ist meist für
   hellen Grund gezeichnet und würde auf der farbigen Leiste verschwinden. */
.brand-logo {
    height: 2rem; width: auto; max-width: 8rem;
    background: #fff; border-radius: var(--radius); padding: 0.2rem 0.3rem;
}
.topbar { position: relative; }
.topbar nav { display: flex; flex-wrap: wrap; gap: 0.125rem; }
.topbar .nav-bar { flex: 1; min-width: 0; }
.topbar nav a {
    /* UX-B3: 90 % statt 82 % — auf der Vorgabe-Primärfarbe 6,9:1 statt 5,6:1. */
    color: color-mix(in srgb, var(--on-bar) 90%, var(--bar));
    text-decoration: none;
    padding: 0.75rem 0.6rem;
    border-bottom: 3px solid transparent;
    font-size: 0.95rem;
    font-weight: 500;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.topbar nav a:hover { color: var(--on-bar); }
.topbar nav a[aria-current="page"] { color: var(--on-bar); border-bottom-color: var(--on-bar); }
/* Mobiles Menü (UX-M2): auf dem Desktop unsichtbar, dort steht die Leiste. */
.nav-menu { display: none; }
.topbar summary { list-style: none; cursor: pointer; }
.topbar summary::-webkit-details-marker { display: none; }
/* Benutzermenü (UX-D1): Klarname als Knopf, darunter Profil und Abmelden. */
.user-menu { margin-left: auto; position: relative; }
.user-menu > summary, .nav-menu > summary {
    display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.5rem;
    color: var(--on-bar); font-size: 0.9rem; font-weight: 600;
    padding: 0.25rem 0.7rem; border-radius: var(--radius);
    border: 2px solid color-mix(in srgb, var(--on-bar) 55%, var(--bar));
}
.user-menu > summary::after { content: '▾'; font-size: 0.75rem; }
.nav-menu > summary::before { content: '☰'; }
.user-menu > summary:hover, .user-menu[open] > summary, .nav-menu[open] > summary {
    background: var(--on-bar); color: var(--bar); border-color: var(--on-bar);
}
.user-name { max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu-panel {
    position: absolute; right: 0; top: calc(100% + 0.35rem); z-index: 30; min-width: 14rem;
    background: var(--card); color: var(--ink); border: 1px solid var(--line);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 0.5rem;
}
.user-menu-org { margin: 0.1rem 0.5rem 0.4rem; font-size: 0.8rem; color: var(--muted); }
.user-menu-panel a { display: block; padding: 0.5rem; border-radius: var(--radius); color: var(--brand); text-decoration: none; font-weight: 600; }
.user-menu-panel a:hover, .user-menu-panel a[aria-current="page"] { background: var(--brand-soft); }
.user-menu-panel form { margin: 0; }
.user-menu-panel button { width: 100%; margin: 0.25rem 0 0; }

.container { max-width: 68rem; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
/* Fallakte und Arbeitslisten (Prüfbericht UX-D2): mehr Breite für Seitenspalte
   bzw. Spalten „Im Schritt seit“ und „Nächster Schritt“. */
.container-wide { max-width: 86rem; }
.container-narrow { max-width: 34rem; margin: 0 auto; padding: 2rem 1rem 3rem; }
/* Öffentliche Seiten bei 320 px ohne seitliches Scrollen (WCAG 1.4.10):
   lange Komposita und Adressen in den Rechtstexten umbrechen. */
.container-narrow { overflow-wrap: break-word; hyphens: auto; }

.site-footer {
    text-align: center; color: var(--muted); font-size: 0.8rem; padding: 1rem;
}
.site-footer p { margin: 0.25rem 0 0; }
/* Rechtsseiten im Footer (Prüfbericht F-B8, UX-B11): Abstand als Tippfläche. */
.footer-links a { display: inline-block; padding: 0.35rem 0.25rem; color: inherit; }

/* == Karten (Sektionen) ==================================================== */
/* `.case-main > .case-section`: seit dem Spaltenlayout der Fallakte (Plan 17)
   liegen die Abschnitte nicht mehr direkt unter `main`, sondern eine Ebene
   tiefer. Ohne diesen Selektor verlieren sie Hintergrund, Rahmen und Abstand
   und die Akte zerfällt ab "Der Fall" zu losem Text. Aus demselben Grund stehen
   `.library-main > section` und `.library-side-box` hier: die Fallbibliothek hat
   mit dem Lernkarten-Layout dieselbe Verschachtelung bekommen.
   Die Selektorliste muss einzeilig bleiben (siehe AppCssCaseSectionTest). */
main > section, main > form, main > .case-section, .case-main > .case-section, .library-main > section, .library-side-box, .card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}

/* == Werkbank-Abschnitte (Fallakte, Plan 15) ================================
   Abschnitte der Fallakte als aufklappbare <details> statt permanenter
   <section>-Anzeige — Sichtbarkeit je Rolle bleibt unverändert (unbekannte
   Abschnitte werden weiterhin gar nicht gerendert), nur die Anzeige der
   sichtbaren Abschnitte wird ein-/ausklappbar. */
.case-section > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0;
}
.case-section > summary::-webkit-details-marker { display: none; }
.case-section > summary::before {
    content: '▸';
    color: var(--muted);
    font-size: 0.85em;
    flex: none;
    transition: transform 0.15s ease;
}
.case-section[open] > summary::before { transform: rotate(90deg); }
.case-section > summary h2 { margin: 0; }
.case-section > summary:hover h2 { color: var(--brand-dark); }
.case-section[open] > summary { margin-bottom: 0.75rem; }
.case-section > summary:focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; }

/* Diskussionsstränge (Migration 032): Beiträge erster Ebene als Liste,
   Antworten eingerückt mit Strangmarkierung am linken Rand. */
.comment-threads { list-style: none; padding-left: 0; }
.comment-threads > li { margin-bottom: 1rem; }
.comment-replies {
    list-style: none;
    margin: 0.5rem 0 0;
    padding-left: 1rem;
    border-left: 3px solid var(--line);
}
.comment-replies > li { margin: 0.5rem 0; }
details.comment-reply { margin-top: 0.25rem; }
details.comment-reply > summary {
    cursor: pointer;
    color: var(--brand-dark);
    font-size: 0.875rem;
    width: fit-content;
}
details.comment-reply form { margin: 0.25rem 0 0 1rem; max-width: 40rem; }

/* == Formulare ============================================================= */
label { display: block; margin: 0.75rem 0; font-weight: 600; font-size: 0.925rem; }
input[type="text"], input[type="password"], input[type="email"], input[type="search"],
input[type="number"], input[type="date"], input[type="tel"], input[type="url"], textarea, select {
    display: block; width: 100%; margin-top: 0.3rem;
    padding: 0.55rem 0.7rem;
    font: inherit; font-weight: 400; color: var(--ink);
    /* --line-strong: Rahmen von Eingabefeldern mindestens 3:1 (UX-B3, WCAG 1.4.11). */
    border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--card);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
textarea { resize: vertical; }
input:focus, textarea:focus, select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.15);
}
label:has(> input[type="checkbox"]) { font-weight: 400; }
/* Checkboxen und Optionsfelder (UX-M9): 1.25rem statt Browser-Standard, in
   der Aktionsfarbe; der Rahmen des nicht angekreuzten Felds zeichnet der
   Browser selbst kontrastreich. */
input[type="checkbox"], input[type="radio"] {
    width: 1.25rem; height: 1.25rem; display: inline-block; vertical-align: -0.2rem;
    margin: 0 0.5rem 0 0; accent-color: var(--accent);
}
label em { font-weight: 400; color: var(--muted); }

/* Nur für Screenreader: visuell verborgen, bleibt im Accessibility-Tree. */
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Hauptknopf in der Aktionsfarbe (Referenz-Design): die Primärfarbe trägt
   bereits Kopfleiste und Navigation — würden auch alle Knöpfe darin stehen,
   wäre auf einer Seite nicht mehr erkennbar, was Fläche und was Aktion ist. */
button {
    font: inherit; font-weight: 600; cursor: pointer;
    background: var(--accent); color: var(--on-accent);
    border: 2px solid var(--accent); border-radius: var(--radius);
    padding: 0.5rem 1.1rem; margin-top: 0.5rem;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
button:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
button.quiet, form button[value="remove"], form button[value="reject"], form button[value="rejected"] {
    background: var(--card); color: var(--brand); border-color: var(--brand);
}
button.quiet:hover,
form button[value="remove"]:hover, form button[value="reject"]:hover, form button[value="rejected"]:hover {
    background: var(--danger-bg); color: var(--danger); border-color: var(--danger);
}

/* Formulare, die IN einer Zeile oder Tabellenzelle stehen (Zuständigkeit im
   Fallkopf, Status-Auswahl je Maßnahme, "erledigt"-Knopf je Stellungnahme).
   Nimmt die globale "display: block; width: 100%"-Regel zurück, die sonst das
   Auswahlfeld die volle Breite einnehmen lässt — im Fallkopf zerreißt das die
   Zeile, in einer Tabellenzelle zwingt es die Spalte breit und die Tabelle
   steht seitlich über. Muss NACH der globalen Regel stehen: die Selektoren
   dort (input[type="text"] …) haben dieselbe Spezifität, es entscheidet die
   Reihenfolge. */
.form-inline { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0; }
.form-inline input, .form-inline select, .form-inline button, .form-inline textarea {
    display: inline-block; width: auto; margin: 0; max-width: 100%;
}
.form-inline select, .form-inline input { padding: 0.35rem 0.5rem; font-size: 0.9rem; }
.form-inline button { padding: 0.35rem 0.8rem; font-size: 0.9rem; }

/* Breite Tabellen scrollen in sich, statt ihren Abschnitt zu sprengen.
   Die letzte Spalte trägt die Aktionen (Status setzen) — sie bleibt beim
   seitlichen Scrollen stehen, sonst schiebt genau das Scrollen die
   Bedienelemente aus dem Bild, die man erreichen will. Der Schatten an der
   linken Kante zeigt, dass darunter weiter gescrollt wird. */
.table-scroll { overflow-x: auto; }
.table-scroll table { min-width: 100%; }
.table-scroll th:last-child, .table-scroll td:last-child {
    position: sticky; right: 0; z-index: 1;
    background: var(--card);
    box-shadow: -6px 0 6px -6px rgba(var(--brand-rgb), 0.25);
}
/* Der mitlaufende Spaltenkopf behält die Kopfzeilen-Fläche — sonst steht in
   der Kopfzeile eine weiße Lücke über der letzten Spalte. */
.table-scroll th:last-child { background: var(--brand-soft); }
.table-scroll tbody tr:hover td:last-child { background: var(--paper); }

/* == Tabellen ============================================================== */
table { width: 100%; border-collapse: collapse; font-size: 0.925rem; }
th, td { text-align: left; padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th {
    background: var(--brand-soft); color: var(--brand-dark);
    font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em;
    border-bottom-width: 2px;
}
tbody tr:hover { background: var(--paper); }

/* == Meldungen (Fehler, Hinweise, Flash) ===================================
   Farbfläche mit kräftiger Kante links (Referenz-Design) statt Vollrahmen. */
.error, .notice, .flash {
    padding: 0.7rem 1rem; border-radius: var(--radius); margin: 0 0 1rem;
    border: 0; border-left: 4px solid; font-size: 0.925rem; font-weight: 500;
}
.error, .flash-error { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }
.notice, .flash-success { background: var(--green-bg); color: var(--green); border-color: var(--green); }
.flash-info { background: var(--brand-soft); color: var(--brand-dark); border-color: var(--brand); }

/* == Badges ================================================================ */
.badge {
    display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px;
    font-size: 0.75rem; font-weight: 600; white-space: nowrap;
    background: var(--paper); color: var(--muted); border: 1px solid var(--line);
}
.badge-new, .badge-review { background: var(--brand-soft); color: var(--brand-dark); border-color: var(--brand); }
.badge-discussion, .badge-measures, .badge-approval { background: var(--amber-bg); color: var(--amber); border-color: var(--amber); }
.badge-published, .badge-closed, .badge-done { background: var(--green-bg); color: var(--green); border-color: var(--green); }
.badge-rejected, .badge-danger { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }
.badge-featured { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.badge-zone-1 { background: var(--green-bg); color: var(--green); border-color: var(--green); }
.badge-zone-2 { background: var(--amber-bg); color: var(--amber); border-color: var(--amber); }
.badge-zone-3 { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }

/* == Anonymer Bereich ====================================================== */
.public-header { text-align: center; padding: 1.5rem 1rem 0; }
.public-header .brand {
    font-family: var(--display); font-size: 1.6rem; font-weight: 700;
    color: var(--brand-dark); text-decoration: none; letter-spacing: 0.05em;
}
/* Logo (Prüfbericht UX-M7): Das Logo lädt die Verwaltung hoch, seine Maße
   sind unbekannt. Eine feste Höhe reserviert den Platz, bevor das Bild
   geladen ist (kein Layoutsprung), object-fit hält das Seitenverhältnis,
   max-width begrenzt breite Logos. Mobil kleiner, damit das erste Feld der
   Meldung früher im Bild ist. */
.public-logo { display: block; margin: 0 auto; height: 6.5rem; width: auto; max-width: min(20rem, 80vw); object-fit: contain; }
/* Mini-Navigation der Meldestrecke (UX-B10) */
.public-nav { margin: 0.75rem 0 0; font-size: 0.95rem; }
.public-nav a { display: inline-block; padding: 0.35rem 0.4rem; font-weight: 600; }
.public-nav a[aria-current="page"] { color: var(--ink); text-decoration: none; border-bottom: 3px solid var(--accent); }
/* Anmeldeseiten (UX-B4): neutraler Hinweis statt des Anonym-Bands. */
.account-note {
    max-width: 34rem; margin: 0.75rem auto 0; padding: 0.4rem 1rem;
    color: var(--ink); font-size: 0.875rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
/* Hilfetext direkt unter einem Feld (aria-describedby) */
.field-hint { margin: -0.4rem 0 0.75rem; font-size: 0.875rem; font-weight: 400; }
label .field-hint { margin: 0.2rem 0 0; }
/* Großer Hauptknopf als Link (Einstiegsseite) */
.button-primary {
    display: inline-block; background: var(--accent); color: var(--on-accent);
    border: 2px solid var(--accent); border-radius: var(--radius);
    padding: 0.8rem 1.6rem; font-size: 1.15rem; font-weight: 700; text-decoration: none;
}
.button-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: var(--on-accent); }
.landing { text-align: center; }
.landing .button-primary { min-width: 16rem; }
.landing-mailbox { font-size: 1.05rem; font-weight: 600; }
.landing-links { padding-left: 1.1rem; }
.landing-links li { margin-bottom: 0.4rem; }
.landing-login { text-align: center; font-size: 0.875rem; }
@media (max-width: 640px) {
    .public-header { padding-top: 1rem; }
    .public-logo { height: 4rem; max-width: 10rem; }
    .landing .button-primary { display: block; min-width: 0; }
}
.anon-banner {
    max-width: 34rem; margin: 0.75rem auto 0;
    border: 1.5px dashed var(--brand);
    border-radius: var(--radius);
    background: var(--brand-soft); color: var(--brand-dark);
    padding: 0.5rem 1rem; font-size: 0.875rem; text-align: center;
}

/* == Anonymitäts-Check: Bestätigungskasten (Plan 14) ======================= */
.anon-check-box {
    margin: 1.25rem 0; padding: 1rem 1.25rem;
    border: 1.5px solid var(--amber); border-radius: var(--radius);
    background: var(--amber-bg);
}
.anon-check-box h2 { margin-top: 0; font-size: 1.05rem; color: var(--amber); }
.anon-findings { list-style: none; margin: 0 0 1rem; padding: 0; }
.anon-findings > li {
    margin: 0 0 0.75rem; padding: 0.6rem 0.75rem;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
}
.anon-findings > li:last-child { margin-bottom: 0; }
.anon-finding-field { margin: 0 0 0.35rem; font-weight: 700; font-size: 0.875rem; }
.anon-excerpt { margin: 0 0 0.35rem; font-size: 0.925rem; }
.anon-excerpt mark { background: var(--amber); color: #fff; padding: 0 0.2rem; border-radius: 2px; }
.anon-hints { margin: 0; padding: 0 0 0 1.1rem; color: var(--muted); font-size: 0.85rem; }

/* == Bemerkungen aus der Fallbibliothek ==================================== */
/* Formular unter dem veröffentlichten Fall (Leserseite) … */
.remark-form fieldset.remark-contact {
    margin: 1rem 0; padding: 0.85rem 1rem;
    border: 1px solid var(--line); border-radius: var(--radius);
}
.remark-contact legend { padding: 0 0.35rem; font-weight: 700; font-size: 0.875rem; }
.remark-contact .filter-check { padding-bottom: 0.35rem; }
.remark-contact .case-meta { margin-bottom: 0; }

/* … und die Karten im Team-Eingang bzw. in der Fallakte. */
.remark-card {
    margin: 0 0 1rem; padding: 0.85rem 1.1rem;
    border: 1px solid var(--line); border-left: 3px solid var(--brand);
    border-radius: var(--radius); background: var(--card);
}
.remark-card.remark-done { border-left-color: var(--line); background: var(--paper); }
.remark-card > .case-meta:first-child { margin-top: 0; }
.remark-contact-line { margin: 0.5rem 0 0; font-size: 0.925rem; }

/* == KI-Anonymisierungsvorschlag für die Arbeitsfassung ==================== */
/* Der Vorschlag ist deutlich als solcher zu erkennen: gestrichelter Rahmen,
   eigener Kasten, Übernahme erst durch einen zweiten Klick. */
.anon-suggest-bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem;
    margin: 0 0 1rem;
}
.anon-suggest-bar .case-meta { margin: 0; }
.anon-suggestion {
    margin: 0 0 1.25rem; padding: 1rem 1.25rem;
    border: 1.5px dashed var(--brand); border-radius: var(--radius);
    background: var(--brand-soft);
}
.anon-suggestion h3 { margin-top: 0; font-size: 1.05rem; color: var(--brand-dark); }
.anon-suggestion form { margin-top: 0.75rem; }

/* == KI-Transparenzhinweis (Plan 14, Task 4) =============================== */
.ai-transparency-box {
    margin: 1.25rem 0; padding: 0.75rem 1rem;
    border: 1.5px dashed var(--brand); border-radius: var(--radius);
    background: var(--brand-soft); color: var(--brand-dark); font-size: 0.875rem;
}
.ai-transparency-box p { margin: 0 0 0.5rem; }
.ai-transparency-box label { display: flex; align-items: center; gap: 0.4rem; font-weight: 600; }

/* == Signature: Fallcode-Ticket ============================================ */
.ticket {
    margin: 1.25rem 0; background: var(--card);
    border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow); overflow: hidden;
    padding: 0;
}
.ticket-top { padding: 1rem 1.25rem 1.25rem; text-align: center; }
.ticket-top .label {
    font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--muted); margin: 0;
}
.ticket-code {
    font-family: var(--mono); font-size: clamp(1.3rem, 5vw, 2rem);
    font-weight: 700; letter-spacing: 0.08em; color: var(--brand-dark);
    margin: 0.5rem 0 0; user-select: all;
}
.ticket-bottom {
    border-top: 2px dashed var(--line);
    background: var(--paper);
    padding: 0.7rem 1.25rem; font-size: 0.85rem; color: var(--muted); text-align: center;
}
/* „Nur einmal angezeigt“ (Prüfbericht UX-B14): Amber-Box, normaler Kontrast. */
.ticket-bottom.ticket-warning {
    background: var(--amber-bg); color: var(--ink); border-top-color: var(--amber);
    font-size: 0.95rem;
}
.ticket-warning strong { color: var(--amber); }

/* == Meldeformular (Prüfbericht UX-B5, UX-B12, UX-M7) ====================== */
.report-intro > p:first-of-type { margin-top: 0; }
.intro-more { margin: 0.5rem 0; }
.intro-more > summary { cursor: pointer; font-weight: 600; color: var(--brand); padding: 0.35rem 0; }
.intro-more[open] > summary { margin-bottom: 0.25rem; }
.form-required-note { margin: 0 0 1rem; font-weight: 500; }
.field-finding {
    margin: 0 0 0.3rem; padding: 0.3rem 0.6rem; font-size: 0.875rem; font-weight: 600;
    color: var(--ink); background: var(--amber-bg); border-left: 3px solid var(--amber); border-radius: var(--radius);
}
textarea[aria-invalid="true"], select[aria-invalid="true"], input[aria-invalid="true"] { border: 2px solid var(--amber); }
.anon-check-summary {
    margin: 0 0 1rem; padding: 0.7rem 1rem;
    background: var(--amber-bg); color: var(--ink); border-left: 4px solid var(--amber); border-radius: var(--radius);
}
.anon-check-summary p, .error p { margin: 0.2rem 0; }
.check-label { font-weight: 400; }
.optional-block {
    margin: 1.25rem 0 0.5rem; padding: 0.5rem 1rem; border: 1px solid var(--line); border-radius: var(--radius);
}
.optional-block > summary { cursor: pointer; font-weight: 700; color: var(--brand); padding: 0.4rem 0; }
.optional-block[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 0.5rem; }
/* Warnkasten (Lesezeichen, geteilte Geräte) */
.warn-box {
    padding: 0.6rem 0.9rem; background: var(--amber-bg); color: var(--ink);
    border-left: 4px solid var(--amber); border-radius: var(--radius); font-size: 0.925rem;
}
/* Feld zum Kopieren (Briefkasten-Link, Melde-Adresse) */
.copy-field { font-family: var(--mono); font-size: 0.875rem; }
.print-only { display: none; }

/* == Briefkasten (Prüfbericht UX-B13) ======================================
   Nachrichten als getrennte Karten: das Team links mit Markenfläche, die
   eigenen Antworten eingerückt mit Kante in der Aktionsfarbe. */
.message-list { list-style: none; margin: 0; padding: 0; }
.message {
    margin: 0 0 0.75rem; padding: 0.7rem 0.9rem;
    border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: var(--radius);
    background: var(--brand-soft);
}
.message-reporter { margin-left: 1.5rem; background: var(--card); border-left-color: var(--accent); }
.message-meta { margin: 0 0 0.3rem; font-size: 0.875rem; }
.message-body { overflow-wrap: anywhere; }
.mailbox-head .flash { margin: 0.75rem 0 0; }
.mailbox-close p { margin: 0.25rem 0; }
@media (max-width: 640px) { .message-reporter { margin-left: 0.5rem; } }

/* == Fallakte / Aktionen =================================================== */
details.action-group { border: 1px solid var(--line); border-radius: var(--radius); margin: 0.75rem 0; background: var(--card); }
details.action-group > summary {
    cursor: pointer; padding: 0.7rem 1rem; font-weight: 600; list-style: none;
}
details.action-group > summary::before { content: '▸ '; color: var(--brand); }
details.action-group[open] > summary::before { content: '▾ '; }
details.action-group > *:not(summary) { padding: 0 1rem 1rem; }
.case-meta { color: var(--muted); font-size: 0.925rem; }

/* == Dashboard-Balken (ohne JS) ============================================ */
.bar { display: flex; align-items: center; gap: 0.6rem; }
.bar .track { flex: 1; background: var(--paper); border-radius: 999px; height: 0.7rem; overflow: hidden; }
.bar .fill { background: var(--brand); height: 100%; border-radius: 999px; }

/* == Auswertung: Reiter (Plan 15, Task 5) ===================================
   Schlichte Flex-Zeile; aktiver Zustand über Farbe + Unterstrich (border-
   bottom auf --brand), keine eigene Kartenoptik. */
.tabs {
    display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem;
    margin: 1rem 0 1.25rem; border-bottom: 1px solid var(--line);
}
.tabs .tab {
    display: inline-block; padding: 0.5rem 0.1rem; margin-bottom: -1px;
    color: var(--muted); text-decoration: none; font-weight: 600; font-size: 0.925rem;
    border-bottom: 2px solid transparent;
}
.tabs .tab:hover { color: var(--brand-dark); }
.tabs .tab.is-active { color: var(--brand-dark); border-bottom-color: var(--brand); }

/* == Auswertung: Filterleiste (Entwurf A, 2026-07-28) ========================
   Ersetzt die Vorgängerversion (Plan 15, Task 5): elf gleich prominente
   Felder in einer umbrechenden Zeile — vier davon <select multiple size="4">
   auf 7rem Höhe neben 2.5rem hohen Einzelfeldern — waren nicht mehr lesbar.
   Jetzt: eine immer sichtbare Zeile (Jahr, Vergleichsjahr, Gruppe, Filtern,
   Zurücksetzen) in einheitlicher Control-Höhe, alle übrigen Dimensionen hinter
   <details class="filterbar-more"> als Checkbox-Gruppen bzw. Select-Zeile. */
.filterbar { --control-h: 2.5rem; }
.filterbar-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem 0.9rem; }
.filterbar-row label { display: flex; flex-direction: column; gap: 0.25rem; margin: 0;
    font-size: 0.8125rem; font-weight: 600; color: var(--muted); flex: 0 1 auto; }
.filterbar select { width: auto; min-width: 9rem; height: var(--control-h); margin: 0;
    appearance: none; -webkit-appearance: none; padding-right: 2.1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23636B6F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 0.75rem center; }
.filterbar-row button { height: var(--control-h); margin: 0; }
.filterbar-more { margin-top: 0.9rem; border-top: 1px solid var(--line); padding-top: 0.75rem; }
.filterbar-more > summary { cursor: pointer; font-weight: 600; font-size: 0.9rem;
    color: var(--brand-dark); list-style: none; }
.filterbar-more > summary::-webkit-details-marker { display: none; }
.filterbar-more > summary::before { content: "▸ "; }
.filterbar-more[open] > summary::before { content: "▾ "; }
.filterbar-count { font-weight: 400; color: var(--muted); }
.filterbar-grid { display: grid; grid-template-columns: 9rem 1fr; gap: 0.7rem 1rem;
    margin-top: 0.85rem; align-items: start; }
.filterbar-key { font-size: 0.8125rem; font-weight: 600; color: var(--muted); padding-top: 0.35rem; }
.filterbar-checks { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; }
.filterbar-checks label { display: inline-flex; align-items: center; gap: 0.35rem;
    font-weight: 400; font-size: 0.9rem; color: var(--ink); margin: 0; }
.filterbar-checks input { margin: 0; }
.filterbar-inline { display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* == Formatierte Texte ===================================================== */
.prose p { margin: 0 0 0.6rem; }
.prose p:last-child { margin-bottom: 0; }
.prose ul { margin: 0 0 0.6rem 1.25rem; padding: 0; }
.prose li { margin-bottom: 0.2rem; }

/* == WYSIWYG-Editor ======================================================== */
.editor { margin-top: 0.3rem; }
.editor-toolbar {
    display: flex; gap: 0.25rem;
    border: 1px solid var(--line); border-bottom: none;
    border-radius: var(--radius) var(--radius) 0 0;
    background: var(--paper); padding: 0.3rem;
}
.editor-toolbar button {
    margin: 0; padding: 0.25rem 0.7rem; font-size: 0.85rem;
    background: var(--card); color: var(--ink); border: 1px solid var(--line-strong);
}
.editor-toolbar button:hover { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
/* Prüfbericht UX-B19: aktive Formatierung an der Schreibmarke (aria-pressed). */
.editor-toolbar button[aria-pressed="true"] { background: var(--brand-soft); color: var(--brand-dark); border-color: var(--brand); }
.editor-area[aria-invalid="true"] { border: 2px solid var(--danger); }
.editor .form-error { margin: 0.4rem 0 0; }
.editor-area {
    min-height: 8rem; padding: 0.55rem 0.7rem;
    border: 1px solid var(--line-strong); border-radius: 0 0 var(--radius) var(--radius);
    background: var(--card); font-weight: 400;
}
.editor-area:focus { outline: none; border-color: var(--brand); }
.editor-area p { margin: 0 0 0.6rem; }
.editor-area ul { margin: 0 0 0.6rem 1.25rem; padding: 0; }

/* == Prozessleiste ========================================================= */
.process-steps {
    list-style: none; margin: 0 0 1.25rem; padding: 1rem 1.25rem;
    display: flex; flex-wrap: wrap; gap: 0.5rem 0;
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow);
}
.process-steps .step {
    display: flex; align-items: center; gap: 0.45rem;
    flex: 1 1 auto; min-width: 0; font-size: 0.825rem; color: var(--muted);
}
.process-steps .step + .step::before {
    content: ''; flex: 0 0 1.25rem; height: 2px; background: var(--line); margin-right: 0.45rem;
}
.process-steps .step-done + .step::before,
.process-steps .step-current::before { background: var(--brand) !important; }
.step-marker {
    flex: 0 0 auto; width: 1.5rem; height: 1.5rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.75rem; font-weight: 700;
    background: var(--paper); color: var(--muted); border: 2px solid var(--line);
}
.step-done .step-marker { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.step-current .step-marker { background: var(--card); border-color: var(--brand); color: var(--brand-dark); }
.step-current { color: var(--ink); font-weight: 600; }
.process-steps.is-rejected .step-current .step-marker { border-color: var(--danger); color: var(--danger); }
.process-steps.is-rejected .step-current { color: var(--danger); }
.step-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Prüfbericht UX-M4: mobil nur visuell ausgeblendet (wie .visually-hidden),
   Screenreader lesen alle Schrittnamen; der aktuelle trägt aria-current. */
@media (max-width: 640px) {
    .process-steps .step-todo .step-label,
    .process-steps .step-done .step-label {
        position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
    }
}

/* == Kompakte Fortschrittsanzeige (Listen, Bibliothek) ===================== */
.status-chevrons {
    display: inline-flex; vertical-align: middle;
}
.status-chevrons .chevron {
    display: inline-block; width: 0.8rem; height: 0.75rem;
    background: var(--line);
    clip-path: polygon(0 0, 65% 0, 100% 50%, 65% 100%, 0 100%, 30% 50%);
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.status-chevrons .chevron + .chevron { margin-left: -0.28rem; }
.status-chevrons .chevron.is-done { background: var(--green); }
.status-chevrons .chevron.is-current { background: var(--brand); }

/* Honeypot der Meldestrecke (Prüfbericht F-1): außerhalb des sichtbaren
   Bereichs statt display:none, damit einfache Skripte das Feld weiter
   ausfüllen. Für Screenreader über aria-hidden im Template ausgeblendet. */
.hp-field {
    position: absolute !important;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Für Screenreader/Textbrowser sichtbar, visuell ausgeblendet. */
.visually-hidden {
    position: absolute !important; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* == Verlauf =============================================================== */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
    position: relative; padding: 0.25rem 0 0.25rem 1.25rem;
    border-left: 2px solid var(--line); margin-left: 0.4rem;
}
.timeline li::before {
    content: ''; position: absolute; left: -6px; top: 0.7rem;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--brand); border: 2px solid var(--card);
}

/* == Risiko-Heatmap ======================================================== */
.heatmap {
    display: grid;
    /* minmax(0, 1fr): die Spalten dürfen unter die Breite der Achsenbeschriftung
       schrumpfen (Jahresbericht bei 390 px sonst 417 px breit, UX-M1). */
    grid-template-columns: minmax(4.5rem, auto) repeat(4, minmax(0, 1fr));
    gap: 0.35rem;
    max-width: 40rem;
}
.heatmap-axis {
    font-size: 0.75rem; color: var(--muted); font-weight: 600; overflow-wrap: anywhere; hyphens: auto;
    display: flex; align-items: center; justify-content: center; text-align: center;
}
.heatmap-axis-y { justify-content: flex-end; padding-right: 0.4rem; }
.heatmap-cell {
    display: flex; align-items: center; justify-content: center;
    min-height: 3rem; border-radius: var(--radius);
    font-weight: 700; font-size: 0.95rem;
    border: 1px solid var(--line);
}
.heat-0 { background: var(--paper); color: var(--muted); font-weight: 400; }
.heat-1 { background: var(--brand-tint-1); color: var(--brand-dark); }
.heat-2 { background: var(--brand-tint-2); color: var(--brand-dark); }
.heat-3 { background: var(--brand-tint-3); color: var(--on-brand); }

/* == Risikomatrix (Einstufung Fallakte/Bibliothek) ========================= */
.risk-matrix {
    display: grid;
    grid-template-columns: minmax(6rem, auto) repeat(4, 1fr);
    gap: 0.35rem;
    max-width: 32rem;
    margin-bottom: 0.35rem;
}
.risk-matrix-axis {
    font-size: 0.75rem; color: var(--muted); font-weight: 600;
    display: flex; align-items: center; justify-content: center; text-align: center;
}
.risk-matrix-axis-y { justify-content: flex-end; padding-right: 0.4rem; }
.risk-matrix-cell {
    display: flex; align-items: center; justify-content: center;
    min-height: 2.5rem; border-radius: var(--radius);
    color: #fff; font-size: 1.1rem; line-height: 1;
    border: 1px solid var(--line);
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.risk-matrix-cell.zone-1 { background: var(--green); }
.risk-matrix-cell.zone-2 { background: var(--amber); }
.risk-matrix-cell.zone-3 { background: var(--danger); }
.risk-matrix-cell.is-current { outline: 3px solid var(--ink); outline-offset: -3px; }
.heat-4 { background: var(--brand-dark); color: var(--on-brand); }
.heat-critical { border: 2px solid var(--danger); }

/* == Risiko-Heatmap nach Kategorie (Dashboard/Jahresbericht, Plan 12) ====== */
.heatmap-table td.zone-1, .heatmap-table td.zone-2, .heatmap-table td.zone-3 {
    text-align: center; font-weight: 700;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.is-future td { color: var(--muted); }
.heatmap-legend { margin: 0.5rem 0 0; font-size: 0.85rem; }
.heatmap-table td.zone-1 { background: var(--green-bg); color: var(--green); }
.heatmap-table td.zone-2 { background: var(--amber-bg); color: var(--amber); }
.heatmap-table td.zone-3 { background: var(--danger-bg); color: var(--danger); }

/* == Aufgaben-Zähler ======================================================= */
.stat-grid { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.stat {
    flex: 1 1 9rem; min-width: 9rem;
    display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 0.9rem 0.75rem; text-decoration: none; color: var(--ink); text-align: center;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
/* Prüfbericht UX-B22: Nur verlinkte Kacheln reagieren auf Hover — die
   Kennzahlen der Auswertung sind reine Anzeige (<span class="stat">). */
a.stat:hover { border-color: var(--brand); box-shadow: var(--shadow-md); }
.stat-number { font-family: var(--display); font-size: 1.9rem; font-weight: 700; color: var(--brand-dark); line-height: 1.1; }
.stat-label { font-size: 0.825rem; color: var(--muted); }
.stat-active { border-color: var(--brand); background: var(--brand-soft); }
.stat-danger .stat-number { color: var(--danger); }
a.stat-danger:hover { border-color: var(--danger); }
.stat-amber .stat-number { color: var(--amber); }
a.stat-amber:hover { border-color: var(--amber); }

/* == Filter-Toolbar =========================================================
   Einheitliches Filter-Idiom für alle vier Listen (cases_list.php,
   measures_list.php, library_list.php, admin/users.php): eine einzeilige
   Toolbar (Suche + 1 Primärfilter + "Filtern"), deren Labels nur für
   Screenreader existieren (.sr-only) — das Suchfeld erklärt sich über den
   Placeholder, das Primär-Select über seine erste Option ("Status: alle").
   Seltene Filter hinter "Weitere Filter" (natives <details> mit sichtbaren
   Labels, serverseitig "open" bei aktivem Sekundärfilter), aktive Filter als
   entfernbare Chips darunter, Treffer-Anzahl und CSV-Export in der Ergebnis-
   Kopfzeile (.results-bar) über der Tabelle. Die Karten-Optik der Toolbar
   kommt über die bestehende "main > form"-Regel — hier nur Layout. */
.filter-toolbar { --control-h: 2.5rem; }
.toolbar-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem;
}
.filter-toolbar .filter-field { margin: 0; }
.toolbar-search { flex: 3 1 16rem; }
.toolbar-primary { flex: 1 1 11rem; }

/* Einheitliche Control-Höhe: Suche, Selects und Button sitzen auf einer
   Mittelachse und sind exakt gleich hoch (Checkboxen bleiben unberührt). */
.filter-toolbar input[type="search"],
.filter-toolbar input[type="number"],
.filter-toolbar select {
    height: var(--control-h); margin: 0; padding-top: 0; padding-bottom: 0;
}
/* Native Select-Optik neutralisieren: eigener Chevron, damit Selects und
   Inputs in jedem Browser dieselbe Höhe und Anmutung haben. */
.filter-toolbar select {
    appearance: none; -webkit-appearance: none;
    padding-right: 2.1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23636B6F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 0.75rem center;
}
/* "Filtern" ist Infrastruktur, keine Hauptaktion: Sekundär-Stil mit
   neutralem Hover (bewusst nicht der Lösch-Hover von button.quiet). */
.toolbar-row button {
    height: var(--control-h); flex: 0 0 auto;
    margin: 0; padding-top: 0; padding-bottom: 0;
    background: var(--card); color: var(--ink); border-color: var(--line-strong);
}
.toolbar-row button:hover {
    background: var(--card); color: var(--brand-dark); border-color: var(--brand);
}

/* "Weitere Filter": leise zweite Zeile in der Karte, nur durch Abstand
   abgesetzt; der Zähler aktiver Sekundärfilter ist eine kleine Pille. */
.filter-more { margin-top: 0.85rem; }
.filter-more > summary {
    display: inline-flex; align-items: center; gap: 0.4rem;
    cursor: pointer; list-style: none;
    color: var(--brand); font-weight: 600; font-size: 0.875rem;
}
.filter-more > summary::-webkit-details-marker { display: none; }
.filter-more > summary::before { content: '▸'; color: var(--muted); font-size: 0.75rem; }
.filter-more[open] > summary::before { content: '▾'; }
.filter-more > summary:hover { color: var(--brand-dark); }
.filter-more-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.25rem; height: 1.25rem; padding: 0 0.3rem;
    border-radius: 999px; background: var(--brand-soft); color: var(--brand-dark);
    font-size: 0.75rem; font-weight: 700; line-height: 1;
}
.filter-more-grid {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem 1.25rem;
    margin-top: 0.85rem;
}
.filter-more-grid .filter-field {
    display: flex; flex-direction: column; gap: 0.3rem; flex: 1 1 10rem;
}
.filter-toolbar .filter-check input { margin: 0; }
.filter-toolbar .filter-check {
    display: flex; align-items: center; gap: 0.4rem;
    flex: 0 0 auto; margin: 0; padding-bottom: 0.55rem;
}
/* Zeitraumfilter (von/bis): zwei gewöhnliche .filter-field-Labels, damit sie
   exakt wie Kategorie und Tag aussehen. Nur die Control-Höhe muss ergänzt
   werden — die Regel darüber listet die Feldtypen einzeln auf und kennt "date"
   noch nicht. */
.filter-toolbar input[type="date"] {
    height: var(--control-h); margin: 0; padding-top: 0; padding-bottom: 0;
    /* Ohne min-width schrumpft das Feld in WebKit auf die Breite des Textes und
       schneidet den Kalender-Knopf ab. */
    min-width: 8.5rem;
}

/* Aktive Filter als entfernbare Chips (kleine Pills unter der Toolbar-Karte). */
.filter-chips {
    list-style: none; display: flex; flex-wrap: wrap; align-items: center;
    gap: 0.5rem; margin: 0.9rem 0 0; padding: 0;
}
.filter-chips .chip {
    display: inline-flex; align-items: center; gap: 0.35rem;
    background: var(--brand-soft); color: var(--brand-dark); border: 1px solid var(--brand);
    border-radius: 999px; padding: 0.25rem 0.4rem 0.25rem 0.75rem; font-size: 0.825rem;
}
.filter-chips .chip a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.15rem; height: 1.15rem; border-radius: 50%;
    color: var(--brand-dark); text-decoration: none; font-weight: 700; line-height: 1;
}
.filter-chips .chip a:hover, .filter-chips .chip a:focus-visible {
    background: var(--brand); color: var(--on-brand);
}
/* "Alle Filter entfernen": neutraler Outline-Chip, der ganze Chip ist Link. */
.filter-chips .chip-reset {
    background: var(--card); border-color: var(--line); padding: 0;
}
.filter-chips .chip-reset a {
    width: auto; height: auto; gap: 0.35rem;
    border-radius: 999px; padding: 0.25rem 0.75rem;
    color: var(--muted); font-weight: 400;
}
.filter-chips .chip-reset a:hover, .filter-chips .chip-reset a:focus-visible {
    background: var(--paper); color: var(--ink);
}

/* Ergebnis-Kopfzeile zwischen Filterbereich und Tabelle: links die
   Treffer-Anzahl, rechts (wo vorhanden) der CSV-Export. */
.results-bar {
    display: flex; flex-wrap: wrap; align-items: baseline;
    justify-content: space-between; gap: 0.5rem 1rem;
    margin: 0.9rem 0 0.5rem; font-size: 0.875rem;
}
.results-count { font-weight: 600; color: var(--ink); }
.results-export { color: var(--muted); }

/* Seitenweise Anzeige (Protokoll der Verwaltung, Prüfbericht F-B11). */
.pagination {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1rem;
    margin: 1rem 0; font-size: 0.875rem;
}

/* == Bibliothek ============================================================ */
.case-card { transition: box-shadow 0.2s ease; }
.case-card:hover { box-shadow: var(--shadow-md); }
.case-card h2 { margin-bottom: 0.25rem; }
.case-card .case-meta { margin-bottom: 0.5rem; }
.case-card.featured { border-left: 4px solid var(--accent); }
/* Kernaussage als Anriss: hebt sich als Zitat vom Textausschnitt ab, den die
   Karte zeigt, wenn keine Kernaussage gepflegt ist. */
.case-card-lesson {
    margin: 0; padding-left: 0.85rem; border-left: 3px solid var(--brand);
    font-family: var(--display); font-size: 1.05rem; line-height: 1.45; color: var(--ink);
}

/* Detailansicht: Kopf, Kernaussage über volle Breite, darunter Text + Infospalte. */
.library-head { margin-bottom: 1rem; }
.library-head h1 { margin-bottom: 0.35rem; }
.library-head .case-meta { margin: 0; }

.key-message {
    background: var(--brand-soft); border: 1px solid var(--brand);
    border-left: 5px solid var(--brand); border-radius: var(--radius);
    padding: 1rem 1.25rem; margin-bottom: 1.25rem;
}
.key-message-label {
    margin: 0 0 0.3rem; font-size: 0.75rem; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-dark);
}
.key-message-text {
    margin: 0; font-family: var(--display); font-size: 1.2rem; line-height: 1.4; color: var(--ink);
}

.library-layout { display: grid; grid-template-columns: 1fr 17rem; gap: 1.25rem; align-items: start; }
.library-main { min-width: 0; }
.library-side-box { padding: 1rem; }
.library-side-box h2 { font-size: 1rem; margin-bottom: 0.6rem; }
.library-side-box .case-meta { margin: 0; }
/* In der schmalen Infospalte muss die Matrix schrumpfen dürfen: `1fr` ist
   `minmax(auto, 1fr)` und hielte die Spalten auf der Breite der längsten
   Achsenbeschriftung fest — die Grafik ragte dann aus ihrer Karte heraus.
   Mit `minmax(0, 1fr)` geben die Spalten nach, die Beschriftungen brechen um. */
.library-side-box .risk-matrix { gap: 0.2rem; margin-bottom: 0.4rem; grid-template-columns: minmax(2.6rem, auto) repeat(4, minmax(0, 1fr)); }
.library-side-box .risk-matrix-cell { min-height: 1.4rem; font-size: 0.75rem; }
.library-side-box .risk-matrix-axis { font-size: 0.65rem; line-height: 1.15; hyphens: auto; overflow-wrap: break-word; }
.library-side-box .risk-matrix-axis-y { padding-right: 0.2rem; }

/* Chips ohne Entfernen-Link (Faktoren, Gruppen) — ruhiger als die Filter-Chips. */
.chip-list { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; }
.chip-list .chip {
    background: var(--paper); color: var(--ink); border: 1px solid var(--line);
    border-radius: 999px; padding: 0.2rem 0.7rem; font-size: 0.825rem;
}
.link-list { list-style: none; margin: 0; padding: 0; }
.link-list li + li { margin-top: 0.4rem; }

.measure-list { list-style: none; margin: 0; padding: 0; }
.measure-item {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem;
    padding: 0.6rem 0; border-top: 1px solid var(--line);
}
.measure-item:first-child { border-top: 0; padding-top: 0; }
.measure-number { font-family: var(--mono); font-size: 0.8rem; color: var(--muted); }
.measure-text { flex: 1 1 12rem; }

/* Freigabe der Maßnahmen für den Fallbericht: eine Zeile je Maßnahme, damit
   Haken, Nummer, Text und Status auf einen Blick zusammengehören. */
.measure-release { border: 1px solid var(--line); border-radius: var(--radius); padding: 0.9rem 1rem; margin: 0 0 1rem; }
.measure-release legend { font-weight: 600; padding: 0 0.4rem; }
.measure-release-item {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem;
    padding: 0.5rem 0; border-top: 1px solid var(--line); margin: 0;
}
.measure-release-item:first-of-type { border-top: 0; }

/* == Meldekanal ============================================================ */
.channel-url { font-size: 1.05rem; overflow-wrap: anywhere; }
input.channel-url { margin-bottom: 0.5rem; }
.channel-qr svg { width: 12rem; height: 12rem; display: block; }
/* QR-Code der Zwei-Faktor-Einrichtung: weißer Rand, damit der Code auch auf
   getöntem Untergrund zuverlässig scannt. */
.totp-qr {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 0.6rem; margin: 0.6rem 0; width: fit-content;
}
.totp-qr svg { width: 11rem; height: 11rem; display: block; }
.totp-manual summary { cursor: pointer; color: var(--brand); font-size: 0.9rem; }
.totp-manual p { margin: 0.5rem 0; }
.totp-secret { font-size: 1.05rem; letter-spacing: 0.08em; word-break: break-all; }
.poster { text-align: center; }
.poster-qr svg { width: 16rem; height: 16rem; display: inline-block; }
.poster-top { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem 2rem; }
.poster-top-text { flex: 1 1 18rem; max-width: 30rem; text-align: left; }
.poster-url { font-size: 1.5rem; overflow-wrap: anywhere; margin: 0; }
.poster-url-direct { margin: 0.25rem 0 0; color: var(--muted); overflow-wrap: anywhere; }
.poster-mailbox { margin: 1rem 0; overflow-wrap: anywhere; }
.poster-emergency { margin: 1rem 0 0; padding: 0.5rem 0.75rem; border: 2px solid var(--danger); color: var(--danger); border-radius: var(--radius); }
.poster-steps { text-align: left; max-width: 34rem; margin: 0 auto 1rem; }
.poster h2 { margin-top: 1.5rem; }
.poster-promise { max-width: 34rem; margin-left: auto; margin-right: auto; text-align: left; }

/* == Berichtslayout ======================================================== */
.report-header {
    text-align: center;
    padding: 2rem 1rem 0.5rem;
    border-bottom: 3px double var(--line);
    margin-bottom: 1rem;
}
.report-brand {
    font-family: var(--display); font-weight: 700; letter-spacing: 0.08em;
    color: var(--brand-dark); text-transform: uppercase; font-size: 0.9rem; margin: 0;
}
.report-logo { max-width: 18rem; height: auto; margin-bottom: 0.5rem; }
.report-screen-hint {
    background: var(--brand-soft); color: var(--brand-dark);
    padding: 0.5rem 1rem; margin: 0; text-align: center; font-size: 0.875rem;
}

/* Benannte Druckseite des Aushangs (UX-B23), siehe .poster-page im Druckblock. */
@page poster { size: A4; margin: 12mm; }

/* == Druckansicht ========================================================== */
@media print {
    @page { margin: 15mm; }
    .print-only { display: block; }
    /* Bestätigungsseite (UX-B14): Ticket, QR und Hinweise nicht zerteilen. */
    .ticket, .access-link, .warn-box { break-inside: avoid; }
    .print-confidential { font-weight: 700; text-align: center; margin: 0.5rem 0 1rem; }
    .copy-field { display: none !important; }
    .topbar, .filter-toolbar, .filter-chips, .results-export, .skip-link, .flash,
    form, button, noscript, .report-screen-hint,
    .public-header, .no-print { display: none !important; }
    /* Fallakte (Plan 17, Minor 6): Ausnahme NUR für den Schrittfilter-
       Leerhinweis (case_view.php) - Spec §6 verlangt, dass der Ausdruck zeigt,
       was angezeigt wird; eine leere gefilterte Ansicht ohne diesen Hinweis
       druckte sonst Kopf und Schrittkarte ohne jede Erklärung. Schwächt die
       allgemeine .flash-Regel oben NICHT ab - die gilt für alle anderen
       Meldungen unverändert weiter. */
    .case-filter-hint { display: block !important; }
    /* In der App-Ansicht stören Kacheln beim Druck nicht im Bericht */
    body:not(.report) .stat-grid, body:not(.report) .site-footer { display: none !important; }
    body { background: #fff; }
    /* Fallakte (Plan 17): Seitenspalte und Aktionsleiste gehören nicht in den
       Ausdruck, das Spaltenlayout weicht einer einzigen Spalte. */
    .case-layout { display: block; }
    .case-nav, .step-card-actions { display: none !important; }
    /* Fallbibliothek: die Infospalte gehört im Ausdruck unter den Lerntext. */
    .library-layout { display: block; }
    main > section, .card, .process-steps, .heatmap-cell, .case-section {
        box-shadow: none; border-color: #999;
        break-inside: avoid;
    }
    /* Fallcode-Ticket auf der öffentlichen Bestätigungsseite: kräftiger Rahmen im Druck */
    .ticket { box-shadow: none; border: 1px solid #000; }
    .container { max-width: none; padding: 0; }
    a { color: inherit; text-decoration: none; }
    a[href]::after { content: ""; } /* keine URL-Anhänge im Druck */
    /* Anzeige-Sektionen mit eingebetteten Formularen: Inhalte bleiben sichtbar */
    section form { display: none !important; }
    /* Werkbank-Abschnitte (Plan 15): zugeklappte <details> im Druck vollständig
       anzeigen — überschreibt die UA-Vorgabe "details:not([open]) > * { display:
       none }" sowie ::details-content mit content-visibility. "revert" statt
       "block", damit jedes Element seinen natürlichen Display-Wert behält
       (<table> bliebe mit "block" kein table-Layout mehr). Formulare bleiben
       trotzdem verborgen (siehe "form" oben), diese Regel steht bewusst danach,
       damit sie bei gleicher Spezifität gewinnt. */
    .case-section > summary::before { display: none; }
    .case-section > summary { margin-bottom: 0.75rem; }
    .case-section::details-content { content-visibility: visible !important; }
    .case-section > *:not(summary) { display: revert !important; }
    .case-section form { display: none !important; }
    /* Aushang im Druck (Prüfbericht UX-B23): eine A4-Seite mit 12 mm Rand, große
       Schrift für den Blick im Vorbeigehen, QR-Code 9 cm, ohne Footer. Eigene
       benannte Seite, damit der Rand der übrigen Ausdrucke unberührt bleibt. */

    .poster-page { page: poster; }
    .poster-page .site-footer { display: none !important; }
    .poster-page .report-header { padding: 0 0 3mm; margin-bottom: 4mm; }
    .poster-page .report-logo { max-height: 15mm; width: auto; margin-bottom: 1mm; }
    .poster-page h1 { font-size: 32pt; line-height: 1.12; margin: 0; }
    .poster-page h2 { font-size: 16pt; margin: 4mm 0 1.5mm; }
    .poster-top { flex-wrap: nowrap; gap: 6mm; }
    .poster-qr svg { width: 9cm; height: 9cm; }
    .poster-top-text { flex: 1 1 auto; max-width: none; }
    .poster-url { font-size: 19pt; overflow-wrap: normal; }
    .poster-url-direct { font-size: 12pt; color: #000; }
    .poster-mailbox { font-size: 13pt; margin: 4mm 0; }
    .poster-emergency { font-size: 13pt; color: #000; border-color: #000; }
    .poster-steps { font-size: 16pt; line-height: 1.35; max-width: none; margin-bottom: 0; }
    .poster-promise { font-size: 12pt; line-height: 1.4; max-width: none; margin: 0; }
    .poster-top, .poster-steps, .poster-promise { break-inside: avoid; }
}

/* == Responsive ============================================================ */
@media (max-width: 640px) {
    .topbar { padding-bottom: 0.25rem; }
    .container { padding: 1rem 0.75rem 2rem; }
    main > section, main > form, main > .case-section, .case-main > .case-section, .library-main > section, .card { padding: 1rem; }
    table { font-size: 0.85rem; }
    th, td { padding: 0.45rem 0.4rem; }
    /* Filter-Toolbar: auf schmalen Bildschirmen bricht jedes Toolbar-Feld
       sauber auf volle Breite um statt eng nebeneinander zu quetschen. */
    .toolbar-search, .toolbar-primary { flex-basis: 100%; }
    .filter-more-grid { flex-direction: column; align-items: stretch; }
}

/* == Sortierbare Tabellen (Plan 16, Task 2) ================================ */
/* Spaltenkopf-Links erben die ruhige th-Optik; die aktive Spalte ist markiert
   und trägt zusätzlich aria-sort für Screenreader. */
th a.sort-link { color: inherit; text-decoration: none; }
th a.sort-link:hover, th a.sort-link:focus { color: var(--brand); text-decoration: underline; }
th.sort-active a.sort-link { color: var(--brand-dark); }
/* Sortier-Leiste der Fallbibliothek (Karten statt Tabelle) */
.sort-links { color: var(--muted); font-size: 0.875rem; margin: 0 0 0.75rem; }
.sort-links a.sort-link { color: var(--brand); text-decoration: none; }
.sort-links a.sort-link:hover, .sort-links a.sort-link:focus { text-decoration: underline; }
.sort-links a.sort-active { color: var(--brand-dark); font-weight: 600; }

/* == Verwaltung: Bereichs-Navigation & Unterseiten ========================= */
/* Einheitliche Navigationslogik (2026-07-24): Bereichs-Nav auf allen
   Verwaltungs-Übersichtsseiten (aktuelle Seite markiert, kein Link),
   Aktionszeile getrennt darunter, Rück-Link auf Unterseiten. */
/* Gruppiert (Zugänge · Fallbearbeitung · Auftritt · Kontrolle): Desktop als
   Leiste, eine Gruppe je Spalte mit kleiner Überschrift; bricht die Leiste um,
   dann nur zwischen ganzen Gruppen. Mobil ersetzt ein aufklappbares Menü die
   Leiste (siehe Abschnitt „Mobil“). */
.subnav { margin: 0 0 1rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--line); font-size: 0.925rem; }
.subnav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.1rem 0.9rem; }
.subnav-bar { display: flex; flex-wrap: wrap; gap: 0.6rem 2.25rem; }
.subnav-group-label {
    display: block; margin-bottom: 0.1rem;
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}
.subnav a { color: var(--brand); text-decoration: none; }
.subnav a:hover, .subnav a:focus { color: var(--brand-dark); text-decoration: underline; }
.subnav-current { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent); }
.subnav-menu { display: none; }
.page-actions { margin: 0 0 1rem; }
.backlink { color: var(--muted); font-size: 0.925rem; margin: 0 0 1rem; }
.backlink a { color: var(--brand); text-decoration: none; }
.backlink a:hover, .backlink a:focus { color: var(--brand-dark); text-decoration: underline; }

/* == Balken-/Spaltenbreiten (CSP-konform, ohne Inline-Styles, Finding #6) ==== */
/* Utility-Klassen statt style="width:…%": die strikte CSP (default-src 'self')
   blockiert Inline-style-Attribute. Breiten in 5%-Schritten (bar_width_class()). */
.fill.w-0 { width: 0; }
.fill.w-5 { width: 5%; }
.fill.w-10 { width: 10%; }
.fill.w-15 { width: 15%; }
.fill.w-20 { width: 20%; }
.fill.w-25 { width: 25%; }
.fill.w-30 { width: 30%; }
.fill.w-35 { width: 35%; }
.fill.w-40 { width: 40%; }
.fill.w-45 { width: 45%; }
.fill.w-50 { width: 50%; }
.fill.w-55 { width: 55%; }
.fill.w-60 { width: 60%; }
.fill.w-65 { width: 65%; }
.fill.w-70 { width: 70%; }
.fill.w-75 { width: 75%; }
.fill.w-80 { width: 80%; }
.fill.w-85 { width: 85%; }
.fill.w-90 { width: 90%; }
.fill.w-95 { width: 95%; }
.fill.w-100 { width: 100%; }
/* Feste Spaltenbreiten der Verlaufs-/Anteils-Tabellen. */
.col-w-45 { width: 45%; }
.col-w-55 { width: 55%; }

.access-qr svg { width: 160px; height: 160px; }

kbd {
    font-family: var(--mono); font-size: 0.85em;
    background: var(--card); border: 1px solid var(--line); border-bottom-width: 2px;
    border-radius: 4px; padding: 0.05rem 0.4rem; white-space: nowrap;
}

/* == Fallakte: Kopfbereich ================================================ */
/* Fakten links, Risikomatrix rechts: die Matrix stand vorher unter den
   Metazeilen und schob die eigentliche Arbeitsfläche aus dem ersten Bildschirm.
   Nebeneinander füllt sie den ohnehin freien Raum rechts. */
.case-head-body {
    display: flex; flex-wrap: wrap; gap: 0.75rem 2rem;
    align-items: flex-start; justify-content: space-between;
}
.case-head-facts { flex: 1 1 22rem; min-width: 0; }
.case-head-facts .case-meta { margin: 0.15rem 0; }
.case-head-risk { flex: 0 1 auto; max-width: 24rem; }
.case-head-risk .case-meta { font-size: 0.8rem; margin: 0.2rem 0 0; }
/* Im Kopf kompakter als in der Vollansicht — hier ist sie Beiwerk, nicht Thema. */
.case-head-risk .risk-matrix { max-width: 19rem; gap: 0.2rem; margin-bottom: 0.25rem; }
.case-head-risk .risk-matrix-cell { min-height: 1.5rem; font-size: 0.8rem; }
.case-head-risk .risk-matrix-axis { font-size: 0.7rem; }
.case-head-risk .risk-matrix { grid-template-columns: minmax(4.5rem, auto) repeat(4, 1fr); }

.case-assignee { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.case-assignee-label { flex: none; }
/* Ohne feste Breite richtet sich das Auswahlfeld nach dem längsten Namen der
   Liste ("Simon Krause (Krankenhaus Musterstadt)") und drängt die Beschriftung
   in eine eigene Zeile. `width` statt `max-width`, damit die Inhaltsbreite die
   Zeile nicht mehr bestimmt; der Selektor ist bewusst zweistufig, um die
   `width: auto`-Regel von `.form-inline` eindeutig zu schlagen. */
.case-assignee .form-inline select { width: 12rem; max-width: 100%; }

/* == Fallakte: Spaltenlayout (Plan 17) ==================================== */
/* Prüfbericht UX-M1: minmax(0, 1fr) statt 1fr. `1fr` ist `minmax(auto, 1fr)`
   und wächst mit dem breitesten Inhalt (die nicht umbrechende Chip-Leiste der
   Schritte) — die Akte war bei 390 px bis zu 1354 px breit. Verankert in
   tests/Unit/AppCssMobileTest.php. */
/* Sprungziel der Schrittnavigation (_seitenspalte.php): etwas Luft nach oben;
   mobil zusätzlich unter der klebenden Kontextzeile (.case-sticky-bar). */
#fallansicht { scroll-margin-top: 1rem; }
.case-layout { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 1.25rem; align-items: start; }
/* I1 (Reviewer-Fund): Auf Zugriffsstufe "measure" entfällt die Seitenspalte
   (siehe case_view.php) und `.case-main` bleibt einziges Grid-Kind. Ohne
   diesen Modifier platziert die Grid-Autoplatzierung `.case-main` in die
   14rem-Spalte und lässt die 1fr-Spalte leer — auf schmalen Fenstern
   unsichtbar (der Breakpoint unten kollabiert ohnehin auf 1fr), auf breiten
   sichtbar als schmaler Streifen. */
.case-layout.is-single { grid-template-columns: minmax(0, 1fr); }
.case-main { min-width: 0; }

.case-nav {
    position: sticky; top: 1rem; min-width: 0;
    max-height: calc(100vh - 2rem); overflow-y: auto;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 0.85rem; font-size: 0.9rem;
}
.case-nav-label {
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.09em;
    color: var(--muted); font-weight: 700; margin: 0.9rem 0 0.35rem;
}
.case-nav a { display: block; text-decoration: none; color: var(--ink); padding: 0.3rem 0.5rem; border-radius: 4px; }
.case-nav a:hover { background: var(--paper); }
.case-nav-all { border: 1px solid var(--line); background: var(--paper); font-weight: 600; text-align: center; }
.case-nav-all.is-active, .case-nav-step.is-active { background: var(--brand-tint-1); color: var(--brand-dark); font-weight: 700; }
.case-nav-steps { list-style: none; margin: 0; padding: 0; }
.case-nav-step { display: flex; justify-content: space-between; gap: 0.4rem; border-left: 3px solid transparent; }
.case-nav-step.is-done .case-nav-step-name::after { content: " ✓"; color: var(--green); }
.case-nav-step.is-current { border-left-color: var(--brand); font-weight: 600; }
.case-nav-step.is-future { color: var(--muted); }
.case-nav-badge { font-size: 0.75rem; color: var(--muted); white-space: nowrap; }
.case-nav-badge.is-urgent { color: var(--danger); font-weight: 700; }
/* Sprungmarken und „Alle aufklappen“ (Prüfbericht UX-D2) */
.case-nav-sections ul { list-style: none; margin: 0; padding: 0; }
.case-nav-sections li a { padding: 0.2rem 0.5rem; font-size: 0.85rem; }
.case-nav .case-nav-toggle {
    margin: 0 0 0.35rem; border: 1px solid var(--line); text-align: center;
    color: var(--brand); font-weight: 600; font-size: 0.85rem;
}

/* Falldaten im Kopf (Prüfbericht UX-M3): offen gerendert; app.js klappt sie
   auf schmalen Bildschirmen zu. Auf dem Desktop trägt der offene Kasten
   keine Zusammenfassung. */
.case-facts { margin: 0 0 1rem; }
.case-facts > summary {
    cursor: pointer; font-weight: 600; color: var(--brand); padding: 0.4rem 0;
}
.case-facts-summary { font-weight: 400; color: var(--muted); font-size: 0.9rem; }
.case-facts[open] > summary .case-facts-summary { display: none; }
@media (min-width: 640.02px) { .case-facts[open] > summary { display: none; } }

/* == Fallakte: Schrittkarte =============================================== */
.step-card {
    background: var(--card); border: 2px solid var(--brand); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 1.15rem 1.25rem; margin-bottom: 1.25rem;
}
.step-card-eyebrow {
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.11em;
    color: var(--brand); font-weight: 700; margin: 0;
}
.step-card h2 { margin: 0.15rem 0 0.3rem; }
.step-card-hint { color: var(--muted); margin: 0 0 0.75rem; }
.step-card-checklist { border-top: 1px solid var(--line); padding-top: 0.7rem; margin-bottom: 0.85rem; }
.step-card-checklist ul { list-style: none; margin: 0.3rem 0 0; padding: 0; }
.check { display: flex; gap: 0.5rem; align-items: baseline; margin: 0.2rem 0; }
.check-mark { font-weight: 700; width: 1rem; flex: none; text-align: center; }
.check-done .check-mark { color: var(--green); }
.check-open .check-mark { color: var(--muted); }
.check-urgent .check-mark { color: var(--danger); }
.check-urgent .check-text { font-weight: 600; }
.check-hint .check-mark { color: var(--brand); }
.check-link { font-size: 0.85rem; }
.step-card-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: flex-start; }
.step-card-actions form { margin: 0; }
/* Sekundäre Aktion neben dem Hauptknopf: gleiche Höhe (2px-Rahmen, gleiche
   Polsterung wie <button>), aber als Umriss in der Primärfarbe. */
.button-link {
    display: inline-block; background: var(--card); color: var(--brand); border: 2px solid var(--brand);
    border-radius: var(--radius); padding: 0.5rem 1.1rem; text-decoration: none; font-weight: 600;
    margin-top: 0.5rem;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.button-link:hover { background: var(--brand); color: var(--on-brand); }
.step-card-final { border-color: var(--line); }
.step-card-final .step-card-eyebrow { color: var(--muted); }
.step-card-final.is-rejected { border-color: var(--danger); }
.step-card-final.is-rejected .step-card-eyebrow { color: var(--danger); }

/* == Fallakte: Abschnittsgruppen ========================================== */
.case-group {
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.11em;
    color: var(--muted); font-weight: 700;
    margin: 1.5rem 0 0.5rem; padding-bottom: 0.25rem; border-bottom: 1px solid var(--line);
}
.case-main > .case-group:first-child { margin-top: 0; }
.case-section-summary { font-family: var(--sans); font-size: 0.8rem; font-weight: 400; color: var(--muted); }

@media (max-width: 60rem) {
    .case-layout { grid-template-columns: minmax(0, 1fr); }
    .case-nav { position: static; order: 2; max-height: none; }
    .case-main { order: 1; }
    /* Fallbibliothek: Infospalte rutscht unter den Lerntext, statt ihn zu quetschen. */
    .library-layout { grid-template-columns: 1fr; }
    .key-message-text { font-size: 1.1rem; }
    /* Auswertung: Filterfelder der immer sichtbaren Zeile je volle Zeile statt
       gequetschter Spalten. */
    .filterbar-row label { flex: 1 1 100%; }
    /* Weitere Filter: die 9rem-Randspalte wird zur schmalen Bildschirmbreite
       eine reine Überschrift über der zugehörigen Checkbox-Gruppe bzw.
       Select-Zeile statt einer eigenen Spalte. */
    .filterbar-grid { grid-template-columns: 1fr; }
    .filterbar-key { padding-top: 0; }
}

/* == Demo-Modus =========================================================== */
/* Muss auffallen: Wer eine Demo-Installation für eine echte hält, gibt darin
   möglicherweise eine echte Meldung ab. Deshalb warnfarbig, auf jeder Seite,
   und im Ausdruck ebenfalls sichtbar. */
.demo-banner {
    margin: 0;
    padding: 0.5rem 1rem;
    background: var(--amber-bg);
    border-bottom: 2px solid var(--amber);
    color: var(--amber);
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
}
.demo-skip { border-color: var(--amber) !important; }
.demo-skip h2 { color: var(--amber); font-size: 1rem; }

/* == Verwaltung: Erscheinungsbild ==========================================
   Vorschau und Farbwähler der Seite /admin/design. Der Farbwähler ist ein
   natives <input type="color"> — ohne JavaScript bedienbar, und in Browsern
   ohne Unterstützung fällt er auf ein Textfeld zurück, in das der Hexwert
   direkt eingetragen werden kann. */
.logo-preview {
    max-width: min(22rem, 100%); max-height: 5rem; height: auto;
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 0.5rem;
}
.color-grid { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; margin: 0 0 1rem; }
.color-field { flex: 1 1 13rem; min-width: 11rem; }
.color-field label { margin: 0 0 0.25rem; }
.color-field code { margin-left: 0.4rem; font-size: 0.9rem; color: var(--muted); }
.color-field .case-meta { font-size: 0.8rem; margin: 0.25rem 0 0; }
.color-input {
    width: 4rem; height: 2.25rem; padding: 0.15rem; margin: 0;
    vertical-align: middle;
    border: 1px solid var(--line-strong); border-radius: var(--radius);
    background: var(--card); cursor: pointer;
}
input[type="file"] { display: block; margin-top: 0.3rem; font: inherit; max-width: 100%; }
/* UX-M9: Datei-Feld auf /admin/design lief mobil über den Rand. */
.logo-actions form { max-width: 100%; }
.logo-actions label { margin: 0; min-width: 0; max-width: 100%; }
.logo-actions input[type="file"] { width: 100%; min-width: 0; }

/* == Profil: SMS-Bestätigungscode ==========================================
   Sechs Ziffern, groß und gesperrt gesetzt, damit die Eingabe von einem
   Telefon-Display abgelesen leicht zu kontrollieren ist. */
.code-input {
    max-width: 12rem; text-align: center;
    font-family: var(--mono); font-size: 1.6rem; letter-spacing: 0.4em;
}

/* == Verwaltung: E-Mail-Vorlagen ===========================================
   Editor (links) und Platzhalter-Liste (rechts) nebeneinander; auf schmalen
   Bildschirmen untereinander. Die Platzhalter stehen ohne JavaScript als
   <code> zum Abtippen da; app.js ersetzt sie durch Einfüge-Schaltflächen
   (.placeholder-chip), die im Ruhezustand wie der Code-Text aussehen. */
/* Übersicht: jede Gruppe ist eine eigene Tabelle — feste Spaltenanteile
   (<colgroup> mit Klassen), damit alle Boxen gleich aufgeteilt sind. */
.mail-templates { table-layout: fixed; width: 100%; }
.mail-col-template { width: 44%; }
.mail-col-recipients { width: 34%; }
.mail-col-status { width: 11%; }
.mail-col-actions { width: 11%; }
.mail-templates td, .mail-templates th { overflow-wrap: anywhere; }
.mail-templates .mail-template-label { display: block; font-weight: 600; color: var(--brand); text-decoration: none; }
.mail-templates .mail-template-label:hover, .mail-templates .mail-template-label:focus { color: var(--brand-dark); text-decoration: underline; }
.mail-templates td .case-meta { display: block; font-size: 0.85rem; font-weight: 400; margin-top: 0.15rem; }
.mail-editor { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start; }
.mail-editor-form { flex: 3 1 24rem; min-width: 0; }
.mail-editor-form label { margin-top: 0; }
.mail-editor-side { flex: 1 1 16rem; min-width: 14rem; }
.mail-editor-side section { margin: 0; }
.mail-editor-side h2 { font-size: 1rem; margin-top: 0; }
.mail-body { min-height: 16rem; resize: vertical; }
.placeholder-list { margin: 0.5rem 0 0; }
.placeholder-list dt { margin-top: 0.6rem; }
.placeholder-list dt code, .placeholder-chip {
    display: inline-block; padding: 0.1rem 0.45rem;
    font-family: var(--mono); font-size: 0.85rem; font-weight: 500;
    color: var(--brand-dark); background: var(--brand-soft);
    border: 1px solid var(--brand-tint-2); border-radius: var(--radius);
}
.placeholder-chip { margin: 0; cursor: pointer; line-height: 1.5; }
.placeholder-chip:hover, .placeholder-chip:focus { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.placeholder-list dd { margin: 0.15rem 0 0; font-size: 0.9rem; }
.placeholder-sample { display: block; color: var(--muted); font-size: 0.8rem; word-break: break-all; }
.mail-preview-subject { margin: 0 0 0.5rem; }
.mail-preview-body {
    margin: 0; padding: 0.75rem 1rem; white-space: pre-wrap; word-break: break-word;
    font-family: var(--mono); font-size: 0.875rem; line-height: 1.5;
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
}
details.action-group .mail-preview-body { margin-top: 0.5rem; }

/* == Aktionen einer Tabellenzeile / eines Abschnitts =======================
   Jede Aktion ist ein eigenes <form> (ein POST je Aktion, CSRF-geschützt).
   Als Blockelement belegt jedes davon eine eigene Zeile — die Aktionsspalte
   in Kategorien, Faktoren, Tags, Gruppen und Benutzern wurde dadurch unnötig
   hoch, obwohl die Knöpfe nebeneinander passen. Der Wrapper legt sie in eine
   umbrechende Reihe und nimmt für die Felder darin die globale Regel
   „Formularfeld = display:block; width:100%“ zurück (dieselbe Aufgabe wie
   .form-inline, hier für mehrere Formulare nebeneinander). */
.row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.5rem; }
.row-actions form { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0; }
.row-actions input[type="text"], .row-actions input[type="email"], .row-actions select {
    display: inline-block; width: auto; max-width: 12rem; margin: 0;
    padding: 0.35rem 0.5rem; font-size: 0.9rem;
}
.row-actions button { margin: 0; padding: 0.35rem 0.8rem; font-size: 0.9rem; }
/* Auf schmalen Bildschirmen ist die Reihe kontraproduktiv: die Aktionsspalte
   würde die Tabelle über den Rand ihrer Karte schieben. Dort bleibt es beim
   Untereinander, dann aber über die volle Breite. */
@media (max-width: 640px) {
    .row-actions { flex-direction: column; align-items: stretch; }
    .row-actions form { width: 100%; }
    .row-actions input[type="text"], .row-actions input[type="email"] { flex: 1 1 6rem; max-width: none; }
}

/* Rechtsseiten (Prüfbericht F-B8): Zwischenüberschriften im gepflegten Text,
   Hinweis auf den unveränderten Mustertext, Warnkasten in der Verwaltung. */
.legal-page .prose h2 { font-size: 1.15rem; margin: 1.5rem 0 0.5rem; }
.legal-page .prose h3 { font-size: 1rem; margin: 1rem 0 0.25rem; }
.legal-page .prose a { overflow-wrap: anywhere; }
.legal-sample-note { border-left: 3px solid var(--line); padding-left: 0.75rem; }
.legal-editor textarea { width: 100%; min-height: 24rem; font-family: inherit; }
/* Fehlende Angabe zum Betreiber: öffentlich gut sichtbar, auch ohne Farbe
   erkennbar (Text „[Angabe fehlt: …]“ plus Rahmen). */
mark.legal-missing {
    background: var(--danger-bg); color: var(--danger);
    border: 1px dashed var(--danger); border-radius: 3px; padding: 0 0.2rem; font-weight: 600;
}
/* Angaben zum Betreiber: Formular in Abschnitten, kurze Felder nebeneinander
   (umbrechend ohne Media-Query), Kasten auf der Übersicht, Freigabe-Karte. */
.legal-settings fieldset {
    margin: 1.25rem 0; padding: 0.5rem 1rem 1rem;
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--card);
}
.legal-settings legend { padding: 0 0.4rem; font-weight: 700; }
.legal-settings fieldset.legal-settings-choice { margin: 0.75rem 0; padding: 0.25rem 0.75rem 0.5rem; background: transparent; }
.legal-settings fieldset.legal-settings-choice legend { font-weight: 600; font-size: 0.925rem; }
.legal-settings-choice label { font-weight: 400; margin: 0.4rem 0; }
.legal-settings h3 { font-size: 1rem; margin: 1.25rem 0 0.25rem; }
.legal-settings-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0 1rem; }
.legal-settings-row label { margin: 0.5rem 0; }
.legal-settings-check { margin: 1rem 0; }
.legal-settings .field-hint { display: block; margin: 0.15rem 0 0; }
.legal-settings-check .field-hint { margin-left: 1.75rem; }
.legal-settings .form-error { display: block; margin-top: 0.3rem; }
.legal-settings-card { border-left: 4px solid var(--brand); }
.legal-settings-card h2 { margin-top: 0; }
.legal-approval form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.legal-approval form label { margin: 0; }

/* Bearbeitungsseiten der Verwaltungslisten (Ablehnungsgründe, Wegweiser):
   Formular in voller Inhaltsbreite mit großzügigen Textfeldern statt eines
   aufgeklappten Formulars in der schmalen Aktionsspalte. */
.reference-editor textarea { width: 100%; min-height: 8rem; resize: vertical; font-family: inherit; }
.reference-editor .row-actions { margin-top: 1rem; align-items: center; }
.reference-editor .row-actions .button-link { margin-top: 0; }

/* Wegweiser „Ist CIRS der richtige Kanal?“ (Prüfbericht F-2) */
.guide-list { margin: 0; }
.guide-list dt { font-weight: 600; margin-top: 1rem; }
.guide-list dt:first-child { margin-top: 0; }
.guide-list dd { margin: 0.25rem 0 0; padding-left: 0.75rem; border-left: 3px solid var(--line); }
.guide-list dd p { margin: 0.25rem 0; overflow-wrap: anywhere; }

/* Checkliste der Erstprüfung (Prüfbericht F-B9) */
.triage-checklist { margin: 0 0 0.75rem; }
.triage-question { margin: 0.4rem 0; }
.triage-question-text { margin: 0 0 0.2rem; font-weight: 600; }
.triage-question .filter-check { display: inline-flex; margin-right: 1rem; }
.reject-group { margin-top: 0.75rem; }
/* Ablehnung, Schritt 2: Bestätigungsseite und Anzeige in der Akte */
.reject-confirm-facts { margin: 0; }
.reject-confirm-facts dt { font-weight: 600; margin-top: 0.35rem; }
.reject-confirm-facts dd { margin: 0; }
@media (min-width: 641px) {
    .reject-confirm-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.35rem 1rem; }
    .reject-confirm-facts dt { margin-top: 0; }
}
.reject-confirm-guide { margin: 1rem 0; padding: 0.75rem 1rem; border-left: 3px solid var(--line); background: var(--brand-soft); border-radius: var(--radius); }
.reject-confirm-guide h2 { font-size: 1rem; margin: 0 0 0.35rem; }
.reject-confirm-guide p { margin: 0.25rem 0 0; }
.reject-confirm .confirm-action { margin-top: 0.75rem; }
.rejection-text { margin: 0.25rem 0 0.75rem; padding: 0.5rem 0.75rem; border-left: 3px solid var(--danger); background: var(--card); }

/* Bestätigung einer folgenreichen Aktion (Prüfbericht F-10) */
button.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
button.danger:hover { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }
.danger-group > summary { color: var(--danger); }

/* Rückfrage und Umbenennen in Tabellenzeilen (Prüfbericht UX-B2, UX-M5):
   zugeklappt ein Knopf, aufgeklappt Erklärung plus Bestätigungsknopf. */
.confirm-action:not(.action-group), .rename-action { display: inline-block; max-width: 100%; }
.confirm-action:not(.action-group) > summary, .rename-action > summary {
    list-style: none; cursor: pointer; display: inline-flex; align-items: center; min-height: 2.25rem;
    padding: 0.3rem 0.8rem; border: 2px solid var(--brand); border-radius: var(--radius);
    background: var(--card); color: var(--brand); font-weight: 600; font-size: 0.9rem;
}
.confirm-action > summary::-webkit-details-marker, .rename-action > summary::-webkit-details-marker { display: none; }
.confirm-action.danger-group:not(.action-group) > summary { border-color: var(--danger); color: var(--danger); }
.confirm-action:not(.action-group)[open], .rename-action[open] { display: block; flex-basis: 100%; }
.confirm-action-form, .rename-action-form { margin-top: 0.5rem; }
.confirm-action-form .case-meta { margin: 0 0 0.25rem; flex-basis: 100%; }
/* Rollen-Auswahl im Benutzerformular (UX-B20: Klasse statt Inline-style). */
.role-option { margin: 0.5rem 0; }
/* Gruppe und Rollen im Benutzerformular: Die Gruppenkonto-Option steht als
   eigener Rahmen innerhalb der Leser-Rolle, die Gruppe hat einen Rahmen wie
   Zugangsart und Rollen. */
.role-option > label { display: block; }
.role-suboption {
    margin: 0.75rem 0 0 1.75rem; padding: 0.6rem 0.8rem;
    border: 1px solid var(--line-strong); border-radius: var(--radius);
    background: var(--paper);
}
.role-suboption > label { display: block; }
.role-suboption .case-meta { margin: 0.35rem 0 0; }
.group-choice select { max-width: 100%; }
.group-choice .case-meta { margin: 0 0 0.5rem; }

/* Maßnahmenstärke (Prüfbericht F-12) */
.badge-strength-weak { background: var(--paper); color: var(--ink); border-color: var(--line); }
.badge-strength-none { background: transparent; color: var(--muted); border-color: var(--line); }
.strength-help { margin: 0.25rem 0 0.75rem; }

/* Hilfreich-Zähler der Fallbibliothek (Prüfbericht F-16) */
.helpful p { margin: 0.25rem 0; }

/* == Arbeitslisten (Prüfbericht UX-B8, UX-D3, UX-M6) =======================
   Datumsangaben brechen nicht um; Badge-Spalten brechen zwischen den Badges
   und notfalls im Badge um, statt abgeschnitten zu werden. */
.nowrap { white-space: nowrap; }
.col-badges .badge { margin: 0 0.2rem 0.2rem 0; }
td.col-badges { min-width: 8.5rem; }

/* == Prozessseite (/prozess) ===============================================
   Drei Fassungen und eine Zeitleiste. Die Farben der Kreise „nur CIRS-Team“ →
   „beteiligte Bereiche“ → „alle Angemeldeten“ werden mit dem Kreis dunkler
   und stehen gleich in Fassungen und Zeitleiste. Text darauf: --brand-dark auf
   --brand-tint-1/-2 bzw. --on-brand auf --brand, in beiden Farbschemata ≥ 4,5:1.
   Die Zeitleiste zeichnet ihre Linie je Schritt (::before als Grid-Element),
   damit sie genau von Kreis zu Kreis läuft, egal wie hoch ein Schritt ist. */
.flow-lead { font-size: 1.1rem; }
.versions { list-style: none; margin: 1rem 0 1.5rem; padding: 0; display: grid; gap: 1.25rem; }
.version {
    position: relative; margin: 0; padding: 0.75rem 1rem;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.version + .version::before {
    content: ""; position: absolute; left: 1.5rem; top: calc(-1.25rem - 1px);
    width: 2px; height: 1.25rem; background: var(--line-strong);
}
.version h3 { margin: 0 0 0.2rem; font-size: 1.05rem; }
.version p { margin: 0 0 0.5rem; }
.version .version-audience {
    width: 40%; min-width: fit-content; max-width: 100%; margin: 0;
    padding: 0.2rem 0.6rem; border-radius: var(--radius);
    font-size: 0.875rem; font-weight: 600;
}
.version[data-audience="groups"] .version-audience { width: 70%; }
.version[data-audience="all"] .version-audience { width: 100%; }
.version[data-audience="team"] .version-audience, .flow-step[data-audience="team"] .flow-phase { background: var(--brand-tint-1); color: var(--brand-dark); }
.version[data-audience="groups"] .version-audience, .flow-step[data-audience="groups"] .flow-phase { background: var(--brand-tint-2); color: var(--brand-dark); }
.version[data-audience="all"] .version-audience, .flow-step[data-audience="all"] .flow-phase { background: var(--brand); color: var(--on-brand); }
.guarantees-title { font-size: 1.05rem; }
.guarantees { list-style: none; margin: 0; padding: 0; }
.guarantees li { position: relative; margin: 0 0 0.6rem; padding-left: 1.6rem; }
.guarantees li::before {
    content: ""; position: absolute; left: 0.2rem; top: 0.35rem;
    width: 0.45rem; height: 0.8rem; border: solid var(--accent); border-width: 0 3px 3px 0; transform: rotate(45deg);
}

.flow-steps { list-style: none; margin: 1rem 0 0; padding: 0; }
.flow-step {
    display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: 0.9rem;
    grid-template-areas: "node body";
}
.flow-step-phase { grid-template-areas: ". phase" "node body"; }
.flow-step::before {
    content: ""; grid-column: 1; grid-row: 1 / -1; justify-self: center;
    width: 2px; background: var(--line-strong);
}
.flow-step:first-child::before { grid-row: 2 / -1; margin-top: 1.125rem; }
.flow-step:last-child::before { grid-area: node; align-self: start; height: 1.125rem; }
.flow-phase {
    grid-area: phase; justify-self: start; margin: 0 0 0.6rem;
    padding: 0.2rem 0.6rem; border-radius: var(--radius); font-size: 0.875rem;
}
.flow-step-phase:not(:first-child) .flow-phase { margin-top: 0.25rem; }
.flow-node {
    grid-area: node; position: relative; z-index: 1;
    width: 2.25rem; height: 2.25rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--brand); color: var(--on-brand); border: 2px solid var(--brand);
    font-weight: 700;
}
.flow-body { grid-area: body; padding-bottom: 1.5rem; min-width: 0; }
.flow-step:last-child .flow-body { padding-bottom: 0; }
.flow-body > p { margin: 0 0 0.4rem; }
h3.flow-step-title { margin: 0.35rem 0 0.35rem; font-size: 1.1rem; }
.flow-note { padding-left: 0.6rem; border-left: 3px solid var(--line); font-size: 0.925rem; }
.flow-mailbox { font-size: 0.875rem; color: var(--muted); }
.flow-branch {
    position: relative; margin: 0.9rem 0 0.25rem; padding: 0.6rem 0.8rem;
    border: 1.5px dashed var(--line-strong); border-radius: var(--radius); background: var(--paper);
}
.flow-branch::before {
    content: ""; position: absolute; top: 1.1rem; left: calc(-2.025rem - 1.5px);
    width: 2.025rem; border-top: 2px dashed var(--line-strong);
}
.flow-branch p { margin: 0 0 0.35rem; }
.flow-branch p:last-child { margin-bottom: 0; }
.flow-branch-title { font-weight: 700; }
.flow-example { padding: 0.6rem 0.8rem; background: var(--brand-soft); border-radius: var(--radius); margin: 0 0 1rem; }
.flow-example p { margin: 0; }
.flow-example .flow-example-label { font-size: 0.875rem; color: var(--ink); margin-bottom: 0.25rem; }
.flow-actions { text-align: center; margin: 1.5rem 0 0; }
@media (max-width: 640px) {
    .flow-actions .button-primary { display: block; }
}

/* Scroll-Animation der Zeitleiste: reines CSS (scrollgebundene Animationen),
   nur wo der Browser sie kann und niemand reduzierte Bewegung wünscht. Die
   Linie füllt sich, wenn die Bildschirmmitte einen Schritt passiert, und der
   Kreis wird dabei ausgefüllt. Ohne Unterstützung ist alles sofort sichtbar
   und ausgefüllt; gedruckt wird ohnehin statisch. */
@supports (animation-timeline: view()) {
    @media screen and (prefers-reduced-motion: no-preference) {
        .flow-step::before {
            background: linear-gradient(var(--brand), var(--brand)) top / 100% 0% no-repeat, var(--line);
            animation: flow-rail-fill linear both;
            animation-timeline: view(block 50% 50%);
            animation-range: cover 0% cover 100%;
        }
        .flow-node {
            animation: flow-node-reach linear both;
            animation-timeline: view(block 50% 50%);
            animation-range: cover 0% cover 100%;
        }
        .flow-body, .flow-phase {
            animation: flow-rise linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 80%;
        }
        @keyframes flow-rail-fill {
            to { background-size: 100% 100%, auto; }
        }
        @keyframes flow-node-reach {
            from { background: var(--card); color: var(--brand); }
            to { background: var(--brand); color: var(--on-brand); }
        }
        @keyframes flow-rise {
            from { opacity: 0.35; transform: translateY(0.75rem); }
            to { opacity: 1; transform: none; }
        }
    }
}

/* == Fehlerseiten (Cirs\Http\ErrorPage, ErrorHandler) =====================
   Eine Karte: Fehlernummer klein darüber, Erklärung, ggf. der konkrete Grund
   des Controllers abgesetzt, darunter der Weg zurück. */
.error-page .error-code { margin: 0 0 0.25rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.error-page .error-detail { padding: 0.5rem 0.75rem; border-left: 3px solid var(--brand); background: var(--brand-soft); border-radius: var(--radius); }
.error-page .error-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin: 1.25rem 0 0; }

/* == Mobil: Bedienung auf Smartphones (≤ 640px) ============================
   Alle Regeln dieses Blocks greifen NUR unter 640px Breite und stehen bewusst
   am Ende der Datei, damit sie die Desktop-Regeln gleicher Spezifität
   überschreiben, ohne sie zu verändern. Vier Anliegen:

   1. Touch-Ziele und iOS-Zoom: Felder unter 16px lassen iOS Safari beim Fokus
      in die Seite zoomen; Knöpfe unter ~44px sind mit dem Daumen schwer zu
      treffen. Deshalb 1rem für alle Eingaben, 2.75rem Mindesthöhe für alles
      Klickbare, und Aktionsreihen stapeln über die volle Breite.
   2. Kopfleiste: statt drei Zeilen umbrechender Links eine einzeilige,
      seitlich scrollbare Navigation; Markenname und Benutzername entfallen,
      Bildmarke und Abmelden bleiben.
   3. Listen: Tabellen mit sechs, sieben Spalten werden zu Karten
      (.table-cards, Beschriftung aus data-label je Zelle). Die Sortier-Links
      aus dem Tabellenkopf bleiben als Chip-Zeile erhalten; Spalten mit
      .col-secondary entfallen mobil. Übrige Tabellen scrollen in sich.
   4. Fallakte: Schrittnavigation als Chip-Leiste OBEN statt am Seitenende,
      knappe Kontextzeile (Fallnummer, Status) bleibt beim Scrollen stehen,
      Risikomatrix im Kopf weicht ihrer Textzeile. */
@media (max-width: 640px) {
    /* -- 1. Touch & Zoom ---------------------------------------------------- */
    input[type="text"], input[type="password"], input[type="email"], input[type="search"],
    input[type="number"], input[type="date"], input[type="tel"], input[type="url"], textarea, select,
    .form-inline input, .form-inline select, .row-actions input, .row-actions select,
    .filter-toolbar select, .filterbar select { font-size: 1rem; }
    button, .button-link, .toolbar-row button, .form-inline button, .row-actions button,
    .filterbar-row button { min-height: 2.75rem; font-size: 1rem; }
    .form-inline { flex-direction: column; align-items: stretch; }
    .form-inline input, .form-inline select { width: 100%; }
    .case-assignee .form-inline select { width: 100%; }
    .step-card-actions { flex-direction: column; align-items: stretch; }
    .step-card-actions form, .step-card-actions button, .step-card-actions .button-link { width: 100%; text-align: center; }
    label:has(> input[type="checkbox"]) { padding: 0.35rem 0; }
    /* UX-M9: die aktuelle Seite (Text, kein Link) mit derselben Höhe, sonst sitzt sie versetzt. */
    .case-nav a, .subnav a, .subnav-current, .tabs .tab { min-height: 2.75rem; display: inline-flex; align-items: center; }
    /* Verwaltung: Leiste weicht dem aufklappbaren Menü mit der aktuellen Seite im Kopf. */
    .subnav { border-bottom: 0; padding-bottom: 0; }
    .subnav-bar { display: none; }
    .subnav-menu { display: block; background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius); }
    .subnav-menu > summary {
        display: flex; align-items: center; gap: 0.35rem;
        min-height: 2.75rem; padding: 0.4rem 0.8rem; cursor: pointer; list-style: none; color: var(--ink);
    }
    .subnav-menu > summary::-webkit-details-marker { display: none; }
    .subnav-menu > summary::after { content: '▾'; margin-left: auto; color: var(--brand); }
    .subnav-menu[open] > summary { border-bottom: 1px solid var(--line); }
    .subnav-menu[open] > summary::after { content: '▴'; }
    .subnav-menu-groups { padding: 0.4rem 0.8rem 0.6rem; }
    .subnav-menu .subnav-group { padding: 0.4rem 0 0; }
    .subnav-menu .subnav-group + .subnav-group { border-top: 1px solid var(--line); margin-top: 0.3rem; }
    .subnav-menu ul { display: block; }
    .subnav-menu li a, .subnav-menu li .subnav-current { display: flex; width: 100%; }
    .subnav-menu .subnav-current { box-shadow: inset 3px 0 0 var(--accent); padding-left: 0.6rem; }
    /* WYSIWYG-Toolbar: daumengroße Knöpfe, und sie bleibt beim Scrollen im
       langen Text am oberen Rand stehen. */
    .editor-toolbar { position: sticky; top: 0; z-index: 2; flex-wrap: wrap; }
    .editor-toolbar button { min-height: 2.5rem; min-width: 2.5rem; padding: 0.25rem 0.6rem; }
    /* In der Fallakte sitzt darüber die Kontextzeile — die Toolbar rückt darunter. */
    body:has(.case-sticky-bar) .editor-toolbar { top: 2.75rem; }

    /* -- 2. Kopfleiste ------------------------------------------------------ */
    /* Prüfbericht UX-M2: statt einer seitlich scrollenden Leiste, die nur 2–3
       von 8 Einträgen zeigte, ein Menü (<details>) mit allen Einträgen. */
    .topbar { flex-wrap: nowrap; gap: 0.5rem; padding: 0.35rem 0.75rem; }
    .topbar .brand { flex: 0 0 auto; padding: 0.2rem 0; }
    .topbar .brand-name { display: none; }
    .topbar .nav-bar { display: none; }
    .nav-menu { display: block; }
    .nav-menu > summary, .user-menu > summary { min-height: 2.75rem; }
    .nav-menu > nav {
        position: absolute; left: 0; right: 0; top: 100%; z-index: 30;
        flex-direction: column; flex-wrap: nowrap; gap: 0;
        background: var(--bar); padding: 0.25rem 0.75rem 0.75rem; box-shadow: var(--shadow-lg);
    }
    .nav-menu > nav a { min-height: 2.75rem; display: flex; align-items: center; border-bottom: 1px solid color-mix(in srgb, var(--on-bar) 25%, var(--bar)); }
    .nav-menu > nav a[aria-current="page"] { border-bottom-color: color-mix(in srgb, var(--on-bar) 25%, var(--bar)); border-left: 4px solid var(--on-bar); padding-left: 0.6rem; }
    .user-name { max-width: 9rem; }
    .user-menu-panel { position: fixed; left: 0.75rem; right: 0.75rem; top: 3.75rem; min-width: 0; }

    /* -- 3. Listen ---------------------------------------------------------- */
    .table-cards, .table-cards tbody, .table-cards tr { display: block; width: 100%; }
    .table-cards thead { display: block; }
    /* Ohne sortierbare Spalte gibt es nichts zu sortieren — kein „Sortieren:“. */
    .table-cards thead:not(:has(a.sort-link)) { display: none; }
    .table-cards thead tr { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.75rem; }
    .table-cards thead tr::before {
        content: 'Sortieren:'; align-self: center;
        font-size: 0.75rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
    }
    /* Nur sortierbare Spaltenköpfe bleiben — als Chips; reine Beschriftungen
       ("Aktionen", "Maßnahme") stehen ohnehin an jeder Karte. */
    .table-cards th { display: none; }
    .table-cards th:has(a.sort-link) {
        display: inline-flex; align-items: center; min-height: 2.25rem;
        padding: 0.2rem 0.7rem; border: 1px solid var(--line); border-radius: 999px;
        background: var(--card); text-transform: none; letter-spacing: 0; font-size: 0.85rem;
    }
    .table-cards th.sort-active { border-color: var(--brand); background: var(--brand-soft); }
    .table-cards tbody tr {
        border: 1px solid var(--line); border-radius: var(--radius);
        background: var(--card); padding: 0.6rem 0.8rem; margin-bottom: 0.75rem;
    }
    .table-cards tbody tr:hover { background: var(--card); }
    .table-cards td {
        display: flex; gap: 0.6rem; align-items: baseline;
        padding: 0.2rem 0; border: 0; font-size: 0.925rem;
    }
    .table-cards td::before {
        content: attr(data-label); flex: 0 0 6.5rem;
        font-size: 0.72rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
    }
    .table-cards td.col-primary { display: block; font-size: 1.05rem; font-weight: 600; padding-bottom: 0.4rem; }
    .table-cards td.col-primary::before { display: none; }
    .table-cards td.col-secondary { display: none; }
    .table-cards td .row-actions, .table-cards td .form-inline { flex: 1 1 auto; }
    /* Kein Scroll-Container, keine feststehende Spalte mehr — die Karte trägt alles. */
    .table-scroll .table-cards td:last-child, .table-scroll .table-cards th:last-child {
        position: static; box-shadow: none;
    }
    /* Auswertung u. a.: übrige Tabellen scrollen in sich statt die Karte zu sprengen. */
    main > section > table:not(.table-cards), main > section > .table-scroll { display: block; overflow-x: auto; max-width: 100%; }

    /* Leere Kartenfelder entfallen (UX-M6); die Zelle trägt serverseitig .is-empty. */
    .table-cards td.is-empty { display: none; }
    .table-cards td.col-badges { flex-wrap: wrap; min-width: 0; }
    .table-cards .badge { white-space: normal; }
    /* Statuskacheln der Fallliste als Chip-Leiste statt rund 500 px Kacheln (UX-M6). */
    .stat-chips { gap: 0.35rem; }
    .stat-chips .stat {
        flex: 0 0 auto; min-width: 0; flex-direction: row; align-items: baseline; gap: 0.35rem;
        padding: 0.3rem 0.7rem; border-radius: 999px; min-height: 2.75rem; align-items: center;
    }
    .stat-chips .stat-number { font-size: 1rem; }
    .stat-chips .stat-label { font-size: 0.85rem; color: var(--ink); }

    /* -- 4. Fallakte -------------------------------------------------------- */
    #fallansicht { scroll-margin-top: 4.25rem; }
    .case-sticky-bar {
        display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
        position: sticky; top: 0; z-index: 3;
        margin: -1rem -0.75rem 0.75rem; padding: 0.45rem 0.75rem;
        background: var(--card); border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
        font-size: 0.875rem; font-weight: 600;
    }
    .case-layout { gap: 0.75rem; }
    /* position: relative hält die visuell verborgenen Zusätze der Chips
       („(erledigt)“) im Scroll-Container — absolut positioniert zählten sie
       sonst zur Seitenbreite (Prüfbericht UX-M1). */
    .case-nav { order: 0; padding: 0.5rem 0.75rem; position: relative; }
    .case-nav-steps { position: relative; }
    .case-main { order: 1; }
    .case-nav-label { display: none; }
    .case-nav-all { display: inline-flex; margin-right: 0.35rem; }
    .case-nav-steps {
        display: flex; flex-wrap: nowrap; gap: 0.35rem; overflow-x: auto;
        margin-top: 0.4rem; padding-bottom: 0.2rem; scrollbar-width: none;
    }
    .case-nav-steps::-webkit-scrollbar { display: none; }
    .case-nav-steps li { flex: 0 0 auto; }
    .case-nav-step {
        border: 1px solid var(--line); border-left-width: 1px; border-radius: 999px;
        padding: 0.2rem 0.7rem; white-space: nowrap; gap: 0.3rem;
    }
    .case-nav-step.is-current { border-color: var(--brand); }
    .case-nav-step.is-active { border-color: var(--brand-dark); }
    .case-head-risk .risk-matrix { display: none; }
    /* UX-M3: Die Schritt-Chips der Fallnavigation ersetzen mobil die Prozessleiste. */
    .process-steps.has-step-nav { display: none; }
    .case-nav-sections ul, .case-nav-sections .case-nav-label { display: none; }
    .case-nav .case-nav-toggle { display: inline-flex; margin: 0.4rem 0 0; }
    .case-head-risk { max-width: none; }
}
/* Kontextzeile der Fallakte existiert nur mobil; Desktop hat den Kopf im Blick. */
@media (min-width: 640.02px) { .case-sticky-bar { display: none; } }


/* Öffentliche Formulare mobil (Prüfbericht UX-M9): Absenden in voller Breite. */
@media (max-width: 640px) {
    .public-form button[type="submit"], #meldung button[type="submit"] { width: 100%; }
}

/* == Dunkelmodus: feste Farben außerhalb der Tokens (Prüfbericht UX-B18) ====
   Weiße Schrift auf den Bedeutungsfarben trägt nur auf den dunklen Tönen des
   hellen Satzes; im Dunkelmodus sind die Flächen hell, die Schrift wird dunkel.
   Hochgeladene Logos sind meist für hellen Grund gezeichnet. */
@media screen and (prefers-color-scheme: dark) {
    button.danger, .risk-matrix-cell, .anon-excerpt mark { color: #10242e; }
    button.danger:hover { color: var(--danger); }
    .public-logo, .report-logo, .logo-preview { background: #fff; border-radius: var(--radius); padding: 0.25rem; }
    .filter-toolbar select, .filterbar select {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23A5B1B4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }
    .risk-matrix-cell.is-current { outline-color: var(--ink); }
}

@media (max-width: 40rem) {
    .role-suboption { margin-left: 0; }
}