/* == CIRS Design-Tokens ==================================================== */
:root {
    --ink: #1C2B36;
    --muted: #5C7280;
    --paper: #F4F7F9;
    --card: #FFFFFF;
    --line: #D7E0E5;
    --brand: #2E5F7A;
    --brand-dark: #234C63;
    --danger: #B3372E;
    --danger-bg: #F9ECEA;
    --amber: #A9761F;
    --amber-bg: #F7F0E3;
    --green: #3E7C4F;
    --green-bg: #EAF3EC;
    --serif: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
    --sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    --radius: 6px;
    --shadow: 0 1px 3px rgba(28, 43, 54, 0.08);
}

/* == 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);
}
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.25; }
h1 { font-size: 1.75rem; margin: 0 0 1rem; }
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 ============================================================= */
.topbar {
    background: var(--brand-dark);
    color: #fff;
    padding: 0 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 1.25rem;
}
.topbar .brand {
    font-family: var(--serif);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #fff;
    text-decoration: none;
    padding: 0.55rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.brand-logo {
    height: 2rem; width: 2rem;
    background: #fff; border-radius: 50%; padding: 0.15rem;
}
.topbar nav { display: flex; flex-wrap: wrap; gap: 0.125rem; flex: 1; }
.topbar nav a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    padding: 0.75rem 0.6rem;
    border-bottom: 3px solid transparent;
    font-size: 0.95rem;
}
.topbar nav a:hover { color: #fff; }
.topbar nav a[aria-current="page"] { color: #fff; border-bottom-color: #fff; }
.topbar .user { color: rgba(255, 255, 255, 0.85); font-size: 0.875rem; display: flex; align-items: center; gap: 0.5rem; }
.topbar .user form { margin: 0; }
.topbar .user button {
    background: transparent; border: 1px solid rgba(255, 255, 255, 0.4); color: #fff;
    padding: 0.25rem 0.7rem; border-radius: var(--radius); cursor: pointer; font-size: 0.85rem;
    margin: 0;
}
.topbar .user button:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.6); }

.container { max-width: 68rem; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.container-narrow { max-width: 34rem; margin: 0 auto; padding: 2rem 1rem 3rem; }

.site-footer {
    text-align: center; color: var(--muted); font-size: 0.8rem; padding: 1rem;
}

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

/* == 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"], textarea, select {
    display: block; width: 100%; margin-top: 0.3rem;
    padding: 0.55rem 0.7rem;
    font: inherit; font-weight: 400; color: var(--ink);
    border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
}
textarea { resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: var(--brand); }
label:has(> input[type="checkbox"]) { font-weight: 400; }
input[type="checkbox"] { width: auto; display: inline; margin-right: 0.4rem; }
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;
}

button {
    font: inherit; font-weight: 600; cursor: pointer;
    background: var(--brand); color: #fff;
    border: 1px solid var(--brand); border-radius: var(--radius);
    padding: 0.55rem 1.1rem; margin-top: 0.5rem;
}
button:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
button.quiet, form button[value="remove"], form button[value="reject"], form button[value="rejected"] {
    background: #fff; color: var(--ink); border-color: var(--line);
}
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(28, 43, 54, 0.25);
}
.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 { color: var(--muted); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; }
tbody tr:hover { background: var(--paper); }

/* == Meldungen (Fehler, Hinweise, Flash) =================================== */
.error, .notice, .flash {
    padding: 0.7rem 1rem; border-radius: var(--radius); margin: 0 0 1rem;
    border: 1px solid; font-size: 0.925rem;
}
.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: #EAF1F5; 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: #EAF1F5; 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: #fff; 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(--serif); font-size: 1.6rem; font-weight: 700;
    color: var(--brand-dark); text-decoration: none; letter-spacing: 0.05em;
}
.public-logo { max-width: min(20rem, 80vw); height: auto; }
.anon-banner {
    max-width: 34rem; margin: 0.75rem auto 0;
    border: 1.5px dashed var(--brand);
    border-radius: var(--radius);
    background: #EAF1F5; 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; }

/* == 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: #EAF1F5; 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: #fff;
    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;
}

/* == Fallakte / Aktionen =================================================== */
details.action-group { border: 1px solid var(--line); border-radius: var(--radius); margin: 0.75rem 0; background: #fff; }
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; }

/* == 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: #fff; color: var(--ink); border: 1px solid var(--line);
}
.editor-toolbar button:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
.editor-area {
    min-height: 8rem; padding: 0.55rem 0.7rem;
    border: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius);
    background: #fff; 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: #fff; }
.step-current .step-marker { background: #fff; 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; }
@media (max-width: 640px) {
    .process-steps .step-todo .step-label,
    .process-steps .step-done .step-label { display: none; }
}

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

/* 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;
    grid-template-columns: minmax(6rem, auto) repeat(4, 1fr);
    gap: 0.35rem;
    max-width: 40rem;
}
.heatmap-axis {
    font-size: 0.75rem; color: var(--muted); font-weight: 600;
    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: #DCE8EF; color: var(--brand-dark); }
.heat-2 { background: #B7D0DE; color: var(--brand-dark); }
.heat-3 { background: #6E9DB6; color: #fff; }

/* == 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: #fff; }
.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;
}
.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);
    padding: 0.9rem 0.75rem; text-decoration: none; color: var(--ink); text-align: center;
}
.stat:hover { border-color: var(--brand); }
.stat-number { font-family: var(--serif); 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: #EAF1F5; }
.stat-danger .stat-number { color: var(--danger); }
.stat-danger:hover { border-color: var(--danger); }
.stat-amber .stat-number { color: var(--amber); }
.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='%235C7280' 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: #fff; color: var(--ink); border-color: var(--line);
}
.toolbar-row button:hover {
    background: #fff; 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: #EAF1F5; 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 {
    display: flex; align-items: center; gap: 0.4rem;
    flex: 0 0 auto; margin: 0; padding-bottom: 0.55rem;
}

/* 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: #EAF1F5; 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: #fff;
}
/* "Alle Filter entfernen": neutraler Outline-Chip, der ganze Chip ist Link. */
.filter-chips .chip-reset {
    background: #fff; 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); }

/* == Bibliothek ============================================================ */
.case-card h2 { margin-bottom: 0.25rem; }
.case-card .case-meta { margin-bottom: 0.5rem; }
.case-card.featured { border-left: 4px solid var(--brand); }
/* 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(--serif); 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: #EAF1F5; 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(--serif); 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; word-break: break-all; }
.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: #fff; 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-url { font-size: 1.2rem; word-break: break-all; margin-top: 0.5rem; }
.poster-steps { text-align: left; max-width: 34rem; margin: 0 auto 1rem; }
.poster h2 { margin-top: 1.5rem; }
.poster > p:last-of-type { 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(--serif); 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: #EAF1F5; color: var(--brand-dark);
    padding: 0.5rem 1rem; margin: 0; text-align: center; font-size: 0.875rem;
}

/* == Druckansicht ========================================================== */
@media print {
    .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; }
}

/* == 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. */
.subnav { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0 0 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--line); font-size: 0.925rem; }
.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; }
.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; }

/* == Druck-Aufforderung auf der Meldebestätigung =========================== */
.print-cta {
    background: #EAF1F5; border: 1px solid var(--brand);
    border-radius: var(--radius); padding: 0.8rem 1rem; margin: 0 0 1.25rem;
    color: var(--brand-dark); font-size: 0.95rem;
}
kbd {
    font-family: var(--mono); font-size: 0.85em;
    background: #fff; 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) ==================================== */
.case-layout { display: grid; grid-template-columns: 14rem 1fr; gap: 1.25rem; align-items: start; }
.case-main { min-width: 0; }

.case-nav {
    position: sticky; top: 1rem;
    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: #E7EEF3; 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; }

/* == 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; }
.button-link {
    display: inline-block; background: var(--card); color: var(--brand); border: 1px solid var(--brand);
    border-radius: var(--radius); padding: 0.45rem 0.9rem; text-decoration: none; font-weight: 600;
}
.button-link:hover { background: var(--paper); }
.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: 1fr; }
    .case-nav { position: static; order: 2; }
    .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; }
}

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