/* ============================================================
   QPB GDPR Compliance – Stylesheet v2.4.0
   Quirin Privatbank Corporate Design

   DESIGN-TOKENS: Der :root-Block ist die Single Source of Truth –
   im Rest der Datei stehen KEINE Hex-/rgba-Werte mehr, nur var(...).
   Die Hex-Werte im E-Mail-Template (mailer.php, technisch bedingt
   inline) müssen mit diesen Tokens synchron bleiben.
   ============================================================ */

:root {
    /* Quirin Corporate Design */
    --qpb-primary: #E61D50;          /* Magenta – Buttons, Links, aktive Zustände */
    --qpb-primary-hover: #C41945;
    --qpb-primary-tint: #FDEBF0;     /* Hintergrund aktiver Nav-Punkt, Badges */
    --qpb-text: #1A1A2E;
    --qpb-text-muted: #6B7280;
    --qpb-bg-page: #F7F7F9;
    --qpb-bg-card: #FFFFFF;
    --qpb-border: #E5E7EB;
    --ampel-gruen: #27AE60; --ampel-gelb: #F39C12; --ampel-rot: #C0392B;
    --mandant-quirion: #00A5DC;
    --radius-card: 12px; --radius-input: 8px; --radius-pill: 999px;
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-overlay: 0 10px 40px rgba(0, 0, 0, 0.15);
    --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* Abgeleitete Akzente */
    --qpb-primary-ring: rgba(230, 29, 80, 0.18);   /* Fokus-Ring zu --qpb-primary */
    --akzent-blau: #2980B9;
    --akzent-orange: #E67E22;

    /* Statusflächen: Tint-Hintergrund / Text / Border je Signalfarbe */
    --tint-gruen-bg: #EAF7F0;  --tint-gruen-text: #1E7A46;  --tint-gruen-border: #BFE5D0;
    --tint-gelb-bg: #FEF6E7;   --tint-gelb-text: #8A5A00;   --tint-gelb-border: #F5DFB3;
    --tint-rot-bg: #FDEDEF;    --tint-rot-text: #A61638;    --tint-rot-border: #F5C2CC;
    --tint-blau-bg: #EBF3FA;   --tint-blau-text: #1F5A85;   --tint-blau-border: #C4DCEF;
    --tint-tuerkis-bg: #EAF6F6; --tint-tuerkis-text: #10666B;
    --tint-grau-bg: #F0F1F3;   --tint-grau-text: #4B5563;

    /* Statusfläche Lila (DSFA-Status "Zur Stellungnahme") */
    --tint-lila-bg: #F0EBFA;   --tint-lila-text: #5B3E96;

    /* Risikomatrix: transparente Ampel-Tints (Zellen) */
    --matrix-gruen: rgba(39, 174, 96, 0.18);
    --matrix-gelb: rgba(243, 156, 18, 0.22);
    --matrix-rot: rgba(192, 57, 43, 0.22);

    /* Schatten-Varianten */
    --shadow-sidebar: 1px 0 6px rgba(0, 0, 0, 0.05);
    --shadow-slideover: -4px 0 24px rgba(26, 26, 46, 0.15);
    --shadow-hover: 0 4px 12px rgba(26, 26, 46, 0.08);
    --shadow-schalter: 0 1px 3px rgba(0, 0, 0, 0.2);

    /* Druckansicht (bewusst hellere Ampelfarben, reines Schwarz) */
    --print-text: #000;
    --print-border: #333;
    --print-ampel-gruen: #90EE90;
    --print-ampel-gelb: #FFD700;
    --print-ampel-rot: #FF6B6B;

    /* Sonstiges */
    --weiss: #FFFFFF;                               /* Text/Flächen auf kräftigen Farben */
    --rot-dunkel: #A83226;                          /* Danger-Hover */
    --grau-schalter: #C6CCD4;                       /* Toggle "aus" */
    --overlay-bg: rgba(26, 26, 46, 0.4);            /* Modal-/Slide-Over-Hintergrund */
    --sidebar-breite: 240px;
}

* {
    box-sizing: border-box;
}

body {
    font-family: var(--font-stack);
    font-size: 15px;
    line-height: 1.6;
    color: var(--qpb-text);
    background-color: var(--qpb-bg-page);
    margin: 0;
    padding: 0;
}

/* ============================================================
   Typografie
   ============================================================ */

h1, h2, h3 {
    color: var(--qpb-text);
    margin-top: 0;
    line-height: 1.3;
}

h1 {
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 8px;
}

h2 {
    font-size: 20px;
    font-weight: 600;
    margin-top: 36px;
    margin-bottom: 16px;
}

h3 {
    font-size: 16px;
    font-weight: 600;
}

a {
    color: var(--qpb-primary);
}

a:hover {
    color: var(--qpb-primary-hover);
}

/* ============================================================
   Layout: Sidebar + Hauptbereich
   ============================================================ */

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-breite);
    background: var(--qpb-bg-card);
    box-shadow: var(--shadow-sidebar);
    display: flex;
    flex-direction: column;
    z-index: 100;
    transition: transform 0.25s ease;
}

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 20px 16px;
    border-bottom: 1px solid var(--qpb-border);
}

.logo-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    background: var(--qpb-primary);
    color: var(--weiss);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.5px;
    border-radius: 10px;
}

.sidebar-logo .logo-text {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
}

.sidebar-logo .logo-text small {
    display: block;
    font-weight: 400;
    color: var(--qpb-text-muted);
    font-size: 11px;
}

/* Mandanten-Switcher – KEIN text-transform: Mandantennamen wie "quirion AG"
   müssen exakt so gerendert werden, wie sie in der Datenbank stehen */
.mandant-switcher {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--qpb-border);
    background: var(--qpb-bg-page);
}

.mandant-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.mandant-form {
    flex: 1;
    min-width: 0;
}

.mandant-form select {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--qpb-border);
    border-radius: var(--radius-input);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    color: var(--qpb-text);
    background: var(--qpb-bg-card);
    cursor: pointer;
    text-transform: none;
}

.mandant-form select:focus {
    outline: none;
    border-color: var(--qpb-primary);
    box-shadow: 0 0 0 3px var(--qpb-primary-ring);
}

.mandant-name {
    font-size: 13px;
    font-weight: 600;
    text-transform: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mandant-badge {
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    padding: 2px 10px;
    border: 1.5px solid;
    border-radius: var(--radius-pill);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;   /* "quirion" bleibt klein geschrieben */
    background: var(--qpb-bg-card);
}

/* Kleine Mandanten-Chips (Tabellen, z.B. Benutzerverwaltung, Audit-Log) */
.mandant-chip {
    display: inline-block;
    padding: 1px 9px;
    margin-right: 4px;
    border: 1.5px solid;
    border-radius: var(--radius-pill);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;   /* "quirion" bleibt klein geschrieben */
    background: var(--qpb-bg-card);
    white-space: nowrap;
}

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 12px 0;
}

.nav-gruppe {
    padding: 16px 20px 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--qpb-text-muted);
}

.nav-gruppe.aktiv {
    color: var(--qpb-primary);
}

.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    color: var(--qpb-text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    border-left: 3px solid transparent;
    transition: background 0.15s, color 0.15s;
}

.sidebar-nav a:hover {
    background: var(--qpb-bg-page);
    color: var(--qpb-primary);
}

.sidebar-nav a.aktiv {
    background: var(--qpb-primary-tint);
    color: var(--qpb-primary);
    border-left-color: var(--qpb-primary);
}

.sidebar-nav a svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    stroke: currentColor;
}

.sidebar-trenner {
    height: 1px;
    background: var(--qpb-border);
    margin: 10px 20px;
}

.sidebar-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--qpb-border);
    font-size: 12px;
    color: var(--qpb-text-muted);
}

.sidebar-footer strong {
    display: block;
    color: var(--qpb-text);
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Hamburger (nur mobil sichtbar) */
.sidebar-toggle {
    display: none;
    position: fixed;
    top: 14px;
    left: 14px;
    z-index: 110;
    width: 42px;
    height: 42px;
    background: var(--qpb-bg-card);
    border: 1px solid var(--qpb-border);
    border-radius: var(--radius-input);
    box-shadow: var(--shadow-card);
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    color: var(--qpb-text);
}

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--overlay-bg);
    z-index: 90;
}

.hauptbereich {
    margin-left: var(--sidebar-breite);
    padding: 36px 40px;
    min-height: 100vh;
}

.seiten-kopf {
    margin-bottom: 28px;
}

.seiten-kopf .untertitel {
    color: var(--qpb-text-muted);
    font-size: 14px;
    margin: 0;
}

/* Container für eigenständige Seiten (Druck, Popup, Report) */
.container {
    max-width: 1600px;
    margin: 0 auto;
    background: var(--qpb-bg-card);
    padding: 30px;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}

/* ============================================================
   Karten
   ============================================================ */

.card {
    background: var(--qpb-bg-card);
    border: 1px solid var(--qpb-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 24px;
    margin-bottom: 20px;
}

.card h2,
.card h3 {
    margin-top: 0;
}

/* ============================================================
   Buttons
   ============================================================ */

.btn {
    display: inline-block;
    padding: 12px 24px;
    background: var(--qpb-primary);
    color: var(--weiss);
    text-decoration: none;
    border-radius: var(--radius-input);
    border: 1px solid var(--qpb-primary);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font-stack);
    line-height: 1.4;
    margin-right: 8px;
    margin-bottom: 8px;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.btn:hover {
    background: var(--qpb-primary-hover);
    border-color: var(--qpb-primary-hover);
    color: var(--weiss);
}

/* Ghost-Style für sekundäre Aktionen */
.btn-secondary,
.btn-info {
    background: var(--qpb-bg-card);
    color: var(--qpb-text);
    border: 1px solid var(--qpb-border);
}

.btn-secondary:hover,
.btn-info:hover {
    background: var(--qpb-bg-page);
    border-color: var(--qpb-text-muted);
    color: var(--qpb-text);
}

.btn-info {
    color: var(--akzent-blau);
}

.btn-info:hover {
    color: var(--akzent-blau);
}

.btn-danger {
    background: var(--qpb-bg-card);
    color: var(--ampel-rot);
    border: 1px solid var(--qpb-border);
}

.btn-danger:hover {
    background: var(--ampel-rot);
    border-color: var(--ampel-rot);
    color: var(--weiss);
}

.btn-small {
    padding: 6px 12px;
    font-size: 12.5px;
    margin-right: 4px;
    margin-bottom: 4px;
}

.btn-gruppe {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.aktionen {
    margin-bottom: 24px;
}

/* Inline-Formulare (z.B. Lösch-Buttons mit CSRF-Token in Tabellenzeilen) */
.inline-form {
    display: inline;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
}

/* ============================================================
   Jahresfilter (Pill-Buttons)
   ============================================================ */

.filter-bereich {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.filter-bereich label {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--qpb-text-muted);
}

.filter-bereich .btn {
    margin: 0;
}

.jahr-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.jahr-btn {
    padding: 8px 18px;
    background: var(--qpb-bg-card);
    color: var(--qpb-text);
    border: 1px solid var(--qpb-border);
    border-radius: var(--radius-pill);
    cursor: pointer;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.15s;
}

.jahr-btn:hover {
    border-color: var(--qpb-primary);
    color: var(--qpb-primary);
}

.jahr-btn.aktiv {
    background: var(--qpb-primary);
    border-color: var(--qpb-primary);
    color: var(--weiss);
}

/* ============================================================
   Dashboard KPIs
   ============================================================ */

.dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}

.kpi-box {
    position: relative;
    background: var(--qpb-bg-card);
    border: 1px solid var(--qpb-border);
    padding: 20px 22px;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}

.kpi-box.gruen { border-left: 4px solid var(--ampel-gruen); }
.kpi-box.gelb { border-left: 4px solid var(--ampel-gelb); }
.kpi-box.rot { border-left: 4px solid var(--ampel-rot); }
.kpi-box.orange { border-left: 4px solid var(--akzent-orange); }

.kpi-box.orange .kpi-wert {
    color: var(--akzent-orange);
}

.kpi-wert {
    font-size: 32px;
    font-weight: 700;
    color: var(--qpb-text);
    line-height: 1.2;
}

.kpi-label {
    font-size: 12px;
    color: var(--qpb-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 6px;
}

.kpi-icon {
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: 18px;
    opacity: 0.35;
}

.kpi-hinweis {
    font-size: 11px;
    color: var(--akzent-orange);
    margin-top: 6px;
}

/* ============================================================
   Ampel: Badge und Dot
   ============================================================ */

.ampel {
    display: inline-block;
    padding: 3px 12px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 600;
    color: var(--weiss);
}

.ampel.gruen { background: var(--ampel-gruen); }
.ampel.gelb { background: var(--ampel-gelb); }
.ampel.rot { background: var(--ampel-rot); }

.ampel-dot {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    vertical-align: middle;
}

.ampel-dot.gruen { background: var(--ampel-gruen); }
.ampel-dot.gelb { background: var(--ampel-gelb); }
.ampel-dot.rot { background: var(--ampel-rot); }

/* ============================================================
   Tabellen
   ============================================================ */

.tabellen-scroll {
    overflow-x: auto;
    background: var(--qpb-bg-card);
    border: 1px solid var(--qpb-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    margin-top: 16px;
}

.tabelle,
.benutzer-tabelle,
.log-tabelle,
.quartal-tabelle,
.vergleich-tabelle {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.tabelle th, .tabelle td,
.benutzer-tabelle th, .benutzer-tabelle td,
.log-tabelle th, .log-tabelle td {
    padding: 14px;
    text-align: left;
    border-bottom: 1px solid var(--qpb-border);
    vertical-align: top;
}

.tabelle thead th,
.benutzer-tabelle thead th,
.log-tabelle thead th,
.quartal-tabelle thead th,
.vergleich-tabelle thead th {
    background: var(--qpb-bg-card);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--qpb-text-muted);
    white-space: nowrap;
    border-bottom: 2px solid var(--qpb-border);
}

.tabelle tbody tr:last-child td,
.benutzer-tabelle tbody tr:last-child td,
.log-tabelle tbody tr:last-child td {
    border-bottom: none;
}

.tabelle tbody tr:hover,
.benutzer-tabelle tbody tr:hover,
.log-tabelle tbody tr:hover,
.vergleich-tabelle tbody tr:hover {
    background: var(--qpb-bg-page);
}

.tabelle th a {
    color: var(--qpb-text-muted);
    text-decoration: none;
    display: block;
}

.tabelle th a:hover {
    color: var(--qpb-primary);
}

.tabelle th.sortierbar {
    cursor: pointer;
}

.tabelle .aktionen-zelle,
.aktionen-cell {
    white-space: nowrap;
}

.tabelle .meldender-zelle {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Quartals- und Vergleichstabellen (zentrierte Zahlen) */
.quartal-tabelle,
.vergleich-tabelle {
    background: var(--qpb-bg-card);
    border: 1px solid var(--qpb-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    margin-bottom: 30px;
}

.quartal-tabelle th, .quartal-tabelle td,
.vergleich-tabelle th, .vergleich-tabelle td {
    padding: 14px;
    text-align: center;
    border-bottom: 1px solid var(--qpb-border);
}

.quartal-tabelle tbody tr:last-child td,
.vergleich-tabelle tbody tr:last-child td {
    border-bottom: none;
}

.vergleich-tabelle th:first-child,
.vergleich-tabelle td:first-child {
    text-align: left;
    font-weight: 600;
}

.quartal-tabelle td:first-child {
    text-align: left;
}

/* ============================================================
   Formulare
   ============================================================ */

.formular {
    max-width: 900px;
}

.schnell-form {
    max-width: 640px;
}

.schnell-form .erfolg-box {
    text-align: center;
}

.schnell-form .erfolg-box .btn-gruppe {
    justify-content: center;
}

.form-gruppe {
    margin-bottom: 20px;
}

.form-gruppe label,
.filter-gruppe label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--qpb-text);
}

.form-gruppe input[type="text"],
.form-gruppe input[type="number"],
.form-gruppe input[type="date"],
.form-gruppe input[type="email"],
.form-gruppe input[type="password"],
.form-gruppe select,
.form-gruppe textarea,
.filter-gruppe input,
.filter-gruppe select {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--qpb-border);
    border-radius: var(--radius-input);
    font-size: 15px;
    font-family: inherit;
    color: var(--qpb-text);
    background: var(--qpb-bg-card);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.form-gruppe input:focus,
.form-gruppe select:focus,
.form-gruppe textarea:focus,
.filter-gruppe input:focus,
.filter-gruppe select:focus {
    outline: none;
    border-color: var(--qpb-primary);
    box-shadow: 0 0 0 3px var(--qpb-primary-ring);
}

.form-gruppe textarea {
    min-height: 100px;
    resize: vertical;
}

.form-gruppe small {
    display: block;
    margin-top: 5px;
    color: var(--qpb-text-muted);
    font-size: 12.5px;
    text-transform: none;
    letter-spacing: 0;
}

.form-gruppe .pflicht,
.pflicht {
    color: var(--qpb-primary);
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.form-row .form-gruppe {
    margin-bottom: 0;
}

/* Formularsektionen als Cards */
fieldset {
    background: var(--qpb-bg-card);
    border: 1px solid var(--qpb-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 24px;
    margin: 0 0 20px 0;
}

legend {
    font-size: 16px;
    font-weight: 700;
    padding: 0 8px;
    color: var(--qpb-text);
}

.form-container {
    max-width: 640px;
}

.form-trenner {
    margin: 25px 0;
    border: none;
    border-top: 1px solid var(--qpb-border);
}

.form-aktionen {
    margin-top: 25px;
    margin-bottom: 0;
}

.checkbox-gruppe {
    display: flex;
    align-items: center;
    gap: 10px;
    text-transform: none;
    letter-spacing: 0;
    font-size: 14px !important;
    color: var(--qpb-text) !important;
}

.checkbox-gruppe input {
    width: auto !important;
    accent-color: var(--qpb-primary);
}

/* ============================================================
   Meldungen (Erfolg / Fehler / Hinweis / Info)
   ============================================================ */

.erfolg, .erfolg-box {
    background: var(--tint-gruen-bg);
    border: 1px solid var(--tint-gruen-border);
    color: var(--tint-gruen-text);
    padding: 14px 18px;
    border-radius: var(--radius-input);
    margin-bottom: 20px;
}

.fehler, .fehler-box {
    background: var(--tint-rot-bg);
    border: 1px solid var(--tint-rot-border);
    color: var(--tint-rot-text);
    padding: 14px 18px;
    border-radius: var(--radius-input);
    margin-bottom: 20px;
}

.fehler-box ul, .erfolg-box ul {
    margin: 0;
    padding-left: 20px;
}

.hinweis, .hinweis-box, .passwort-hinweis {
    background: var(--tint-gelb-bg);
    border: 1px solid var(--tint-gelb-border);
    color: var(--tint-gelb-text);
    padding: 14px 18px;
    border-radius: var(--radius-input);
    margin-bottom: 20px;
}

.hinweis-box h3 {
    margin: 0 0 8px 0;
    font-size: 14px;
    color: inherit;
}

.hinweis-box p {
    margin: 0;
    font-size: 13.5px;
}

.info-box {
    background: var(--tint-blau-bg);
    border: 1px solid var(--tint-blau-border);
    color: var(--tint-blau-text);
    padding: 14px 18px;
    border-radius: var(--radius-input);
    margin-bottom: 20px;
}

.erfolg-box h3 {
    color: inherit;
    margin: 0 0 10px 0;
}

.erfolg-box p {
    margin: 0 0 15px 0;
}

/* ============================================================
   Badges (Rollen, Audit-Aktionen, Status, DSFA, Secrets)

   Eine gemeinsame Basis für alle Pills: Form, Größe und Typo sind
   identisch, die Einzelklassen steuern nur noch die Farben.
   ============================================================ */

.badge,
.rolle-badge,
.aktion-badge,
.einladung-badge,
.sitzung-badge,
.dsfa-status-badge,
.secret-indikator {
    display: inline-block;
    padding: 3px 12px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    text-transform: none;
    letter-spacing: 0;
}

.rolle-badge {
    background: var(--tint-blau-bg);
    color: var(--akzent-blau);
}

.rolle-badge.rolle-admin,
.rolle-admin {
    background: var(--qpb-primary-tint);
    color: var(--qpb-primary);
}

.status-aktiv { color: var(--ampel-gruen); font-weight: 600; }
.status-inaktiv { color: var(--ampel-rot); font-weight: 600; }

/* Benutzerverwaltung: Einladungs-Status */
.einladung-badge {
    background: var(--tint-blau-bg);
    color: var(--tint-blau-text);
}

.einladung-badge.abgelaufen {
    background: var(--tint-gelb-bg);
    color: var(--tint-gelb-text);
}

/* Sitzungsverwaltung (profil.php): Markierung der aktuellen Sitzung */
.sitzung-badge {
    background: var(--tint-gruen-bg);
    color: var(--tint-gruen-text);
}

.aktion-login { background: var(--tint-gruen-bg); color: var(--tint-gruen-text); }
.aktion-logout { background: var(--tint-grau-bg); color: var(--tint-grau-text); }
.aktion-login_failed { background: var(--tint-rot-bg); color: var(--tint-rot-text); }
.aktion-mandant_switch { background: var(--tint-blau-bg); color: var(--tint-blau-text); }
.aktion-login_blocked { background: var(--tint-rot-text); color: var(--weiss); }
.aktion-csrf_failed { background: var(--tint-rot-text); color: var(--weiss); }
.aktion-session_hijack_suspected { background: var(--tint-rot-text); color: var(--weiss); }
.aktion-create { background: var(--tint-blau-bg); color: var(--tint-blau-text); }
.aktion-update { background: var(--tint-gelb-bg); color: var(--tint-gelb-text); }
.aktion-delete { background: var(--tint-rot-bg); color: var(--tint-rot-text); }
.aktion-export { background: var(--tint-tuerkis-bg); color: var(--tint-tuerkis-text); }
.aktion-view { background: var(--tint-grau-bg); color: var(--tint-grau-text); }
.aktion-password_change { background: var(--tint-gruen-bg); color: var(--tint-gruen-text); }
.aktion-mail_sent { background: var(--tint-tuerkis-bg); color: var(--tint-tuerkis-text); }
.aktion-mail_failed { background: var(--tint-rot-bg); color: var(--tint-rot-text); }
.aktion-password_reset_requested { background: var(--tint-gelb-bg); color: var(--tint-gelb-text); }
.aktion-backup_download { background: var(--tint-tuerkis-bg); color: var(--tint-tuerkis-text); }

/* ============================================================
   Audit-Log
   ============================================================ */

.filter-box {
    background: var(--qpb-bg-card);
    border: 1px solid var(--qpb-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 24px;
    margin-bottom: 24px;
}

.filter-box h3 {
    margin-top: 0;
    margin-bottom: 16px;
}

.filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px;
}

.filter-gruppe input,
.filter-gruppe select {
    padding: 9px 12px;
    font-size: 14px;
}

.filter-aktionen {
    margin-top: 18px;
}

.filter-aktionen .btn {
    margin-bottom: 0;
}

.log-tabelle {
    font-size: 13px;
}

.log-tabelle th {
    position: sticky;
    top: 0;
}

.aenderungen-box {
    max-width: 400px;
    font-size: 11.5px;
    max-height: 100px;
    overflow-y: auto;
}

.aenderungen-box .feld {
    margin-bottom: 5px;
    padding: 5px 8px;
    background: var(--qpb-bg-page);
    border-radius: 6px;
}

.aenderungen-box .feld-name {
    font-weight: 600;
    color: var(--qpb-text);
}

.aenderungen-box .alt {
    color: var(--ampel-rot);
    text-decoration: line-through;
}

.aenderungen-box .neu {
    color: var(--ampel-gruen);
}

.ip-cell {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    color: var(--qpb-text-muted);
}

/* ============================================================
   Detailansicht (Popup / Druck)
   ============================================================ */

.detail-box {
    background: var(--qpb-bg-card);
    border: 1px solid var(--qpb-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 24px;
    margin-bottom: 20px;
}

.detail-box h3 {
    margin-top: 0;
    margin-bottom: 15px;
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.detail-item {
    margin-bottom: 12px;
}

.detail-item strong {
    display: block;
    color: var(--qpb-text-muted);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 3px;
}

/* Popup-Ansicht */
.popup-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px;
}

.popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--qpb-primary);
}

.popup-header h1 {
    border: none;
    padding: 0;
    margin: 0;
    font-size: 24px;
}

.popup-aktionen {
    display: flex;
    gap: 8px;
}

/* ============================================================
   Profil
   ============================================================ */

.profil-container {
    max-width: 640px;
}

/* Sitzungs-Card: breiter wegen der Tabelle */
.profil-container-breit {
    max-width: 900px;
}

.sitzung-fussaktion {
    margin-top: 16px;
}

/* Zwei-Faktor-Authentifizierung (profil.php) */
.totp-einrichtung {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.totp-qr svg {
    display: block;
    border: 1px solid var(--qpb-border);
    border-radius: var(--radius-card);
}

.totp-secret {
    display: inline-block;
    font-size: 15px;
    letter-spacing: 1px;
    padding: 8px 12px;
    background: var(--tint-blau-bg);
    border-radius: 6px;
    user-select: all;
    word-break: break-all;
}

.recovery-codes {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 15px;
    letter-spacing: 1px;
    line-height: 1.8;
    columns: 2;
    padding: 16px 20px;
    margin: 0 0 12px;
    background: var(--tint-blau-bg);
    border-radius: 6px;
    user-select: all;
}

.profil-box {
    background: var(--qpb-bg-card);
    border: 1px solid var(--qpb-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 24px;
    margin-bottom: 20px;
}

.profil-info {
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: 10px;
    margin: 0;
}

.profil-info dt {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--qpb-text-muted);
    align-self: center;
}

.profil-info dd {
    margin: 0;
}

/* ============================================================
   Jahresvergleich (Charts, Trends, Sektionen)
   ============================================================ */

.section-header {
    margin: 36px 0 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--qpb-primary);
}

.section-header h2 {
    margin: 0;
    font-size: 20px;
}

.trend-positiv { color: var(--ampel-gruen); font-weight: 600; }
.trend-negativ { color: var(--ampel-rot); font-weight: 600; }
.trend-neutral { color: var(--qpb-text-muted); }
.trend-icon { font-size: 14px; margin-left: 5px; }

.chart-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.chart-box {
    background: var(--qpb-bg-card);
    border: 1px solid var(--qpb-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 24px;
}

.chart-box h3 {
    margin-top: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--qpb-border);
}

.bar-chart {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bar-label {
    width: 120px;
    font-size: 13px;
}

.bar-container {
    flex: 1;
    background: var(--qpb-bg-page);
    height: 24px;
    border-radius: 6px;
    overflow: hidden;
}

.bar {
    height: 100%;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 8px;
    color: var(--weiss);
    font-size: 12px;
    font-weight: 700;
    min-width: 30px;
}

.bar-gruen { background: var(--ampel-gruen); }
.bar-gelb { background: var(--ampel-gelb); }
.bar-rot { background: var(--ampel-rot); }
.bar-blau { background: var(--akzent-blau); }
.bar-primaer { background: var(--qpb-primary); }

.legende {
    display: flex;
    gap: 20px;
    margin-top: 15px;
    flex-wrap: wrap;
}

.legende-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
}

.legende-farbe {
    width: 16px;
    height: 16px;
    border-radius: 4px;
}

.chart-fussnote {
    margin-top: 15px;
    margin-bottom: 0;
    font-size: 13px;
}

/* Legende / Fußnoten-Box */
.legende-box {
    margin-top: 20px;
    padding: 20px 24px;
    background: var(--qpb-bg-card);
    border: 1px solid var(--qpb-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    font-size: 14px;
}

.legende-box hr {
    border: none;
    border-top: 1px solid var(--qpb-border);
    margin: 15px 0;
}

.stand-info {
    margin-top: 30px;
    color: var(--qpb-text-muted);
    font-size: 12.5px;
}

/* Mandantenname auf Druckansichten – kein text-transform ("quirion AG") */
.druck-mandant {
    margin: -4px 0 20px;
    font-size: 15px;
    font-weight: 600;
    color: var(--qpb-text-muted);
    text-transform: none;
}

.warn-text {
    color: var(--ampel-rot);
}

.ok-text {
    color: var(--ampel-gruen);
}

.pre-wrap {
    white-space: pre-wrap;
}

.detail-text {
    margin: 5px 0 0 0;
}

.ampel-gross {
    font-size: 15px;
    padding: 5px 16px;
}

.summen-zeile td {
    background: var(--qpb-bg-page);
    font-weight: 700;
}

body.popup-seite {
    background: var(--qpb-bg-card);
}

body.popup-seite .detail-box,
body.popup-seite .legende-box {
    box-shadow: none;
    background: var(--qpb-bg-page);
    border: 1px solid var(--qpb-border);
}

.text-muted {
    color: var(--qpb-text-muted);
}

.text-zentriert {
    text-align: center;
}

/* ============================================================
   Slide-Over-Panel (Vorfall-Details)
   ============================================================ */

.slideover-overlay {
    position: fixed;
    inset: 0;
    background: var(--overlay-bg);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease-out;
    z-index: 200;
}

.slideover-overlay.offen {
    opacity: 1;
    pointer-events: auto;
}

.slideover {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 560px;
    max-width: 100vw;
    background: var(--qpb-bg-card);
    box-shadow: var(--shadow-slideover);
    transform: translateX(100%);
    transition: transform 200ms ease-out;
    z-index: 210;
    display: flex;
    flex-direction: column;
}

.slideover.offen {
    transform: translateX(0);
}

.slideover-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid var(--qpb-border);
    flex-shrink: 0;
}

.slideover-kopf h2 {
    margin: 0;
    font-size: 18px;
}

.slideover-schliessen {
    width: 36px;
    height: 36px;
    border: 1px solid var(--qpb-border);
    border-radius: var(--radius-input);
    background: var(--qpb-bg-card);
    color: var(--qpb-text-muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.slideover-schliessen:hover {
    color: var(--qpb-primary);
    border-color: var(--qpb-primary);
}

.slideover-inhalt {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.slideover-laden {
    color: var(--qpb-text-muted);
}

/* Detail-Fragment (auch im Slide-Over) */
.detail-nummer {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
}

.vorfall-detail-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.vorfall-detail-kopf .btn {
    margin: 0;
}

.slideover .detail-box {
    box-shadow: none;
    background: var(--qpb-bg-page);
}

.slideover .detail-grid {
    grid-template-columns: 1fr;
    gap: 0;
}

/* ============================================================
   Bestätigungs-Modal (Löschen)
   ============================================================ */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--overlay-bg);
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms ease-out;
    z-index: 300;
}

.modal-overlay.offen {
    opacity: 1;
    pointer-events: auto;
}

.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    width: calc(100vw - 40px);
    max-width: 400px;
    background: var(--qpb-bg-card);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-overlay);
    padding: 24px;
    transform: translate(-50%, -50%) scale(0.96);
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms ease-out, transform 150ms ease-out;
    z-index: 310;
}

.modal.offen {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}

.modal-titel {
    margin: 0 0 8px;
    font-size: 17px;
}

.modal-text {
    margin: 0 0 20px;
    color: var(--qpb-text-muted);
    font-size: 14px;
}

.modal-aktionen {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.modal-aktionen .btn {
    margin: 0;
}

.btn-loeschen {
    background: var(--ampel-rot);
    border-color: var(--ampel-rot);
    color: var(--weiss);
}

.btn-loeschen:hover {
    background: var(--rot-dunkel);
    border-color: var(--rot-dunkel);
    color: var(--weiss);
}

/* Klickbare Vorfallszeilen */
tr[data-vorfall-id] {
    cursor: pointer;
}

/* ============================================================
   DSFA-Modul: Wizard, Vorabprüfung, Risiken, Matrix
   ============================================================ */

.versteckt {
    display: none !important;
}

.zeile-klickbar {
    cursor: pointer;
}

.zeile-archiv {
    opacity: 0.6;
}

/* Fortschrittsleiste (6 Phasen) */
.wizard-steps {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    margin-bottom: 28px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.wizard-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 90px;
    text-decoration: none;
    color: var(--qpb-text-muted);
    position: relative;
    padding-top: 4px;
}

.wizard-step:not(:first-child)::before {
    content: '';
    position: absolute;
    top: 20px;
    left: calc(-50% + 20px);
    width: calc(100% - 40px);
    height: 2px;
    background: var(--qpb-border);
}

.wizard-step.fertig:not(:first-child)::before {
    background: var(--ampel-gruen);
}

.step-kreis {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--qpb-bg-card);
    border: 2px solid var(--qpb-border);
    font-weight: 700;
    font-size: 14px;
    z-index: 1;
}

.wizard-step.aktiv .step-kreis {
    background: var(--qpb-primary);
    border-color: var(--qpb-primary);
    color: var(--weiss);
}

.wizard-step.fertig .step-kreis {
    background: var(--ampel-gruen);
    border-color: var(--ampel-gruen);
    color: var(--weiss);
}

.wizard-step.aktiv {
    color: var(--qpb-primary);
    font-weight: 600;
}

.wizard-step.gesperrt {
    opacity: 0.5;
    cursor: default;
}

.step-name {
    font-size: 12px;
    text-align: center;
}

.wizard-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.wizard-navigation .btn {
    margin: 0;
}

/* Status-Badges */
/* .dsfa-status-badge: Basis siehe Badge-Block, hier nur Status-Farben */

.status-entwurf { background: var(--tint-grau-bg); color: var(--tint-grau-text); }
.status-vorab { background: var(--tint-blau-bg); color: var(--tint-blau-text); }
.status-bearbeitung { background: var(--tint-gelb-bg); color: var(--tint-gelb-text); }
.status-stellungnahme { background: var(--tint-lila-bg); color: var(--tint-lila-text); }
.status-abgeschlossen { background: var(--tint-gruen-bg); color: var(--tint-gruen-text); }
.status-wiedervorlage { background: var(--tint-rot-bg); color: var(--tint-rot-text); }

.erforderlich-offen { background: var(--tint-grau-bg); color: var(--tint-grau-text); }
.erforderlich-ja { background: var(--qpb-primary-tint); color: var(--qpb-primary); }
.erforderlich-nein { background: var(--tint-gruen-bg); color: var(--tint-gruen-text); }

/* Vorabprüfung */
.vorab-frage {
    padding: 14px 0;
    border-bottom: 1px solid var(--qpb-border);
}

.vorab-frage:last-of-type {
    border-bottom: none;
}

.vorab-frage-kopf {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.vorab-nummer {
    flex-shrink: 0;
    font-weight: 700;
    color: var(--qpb-primary);
    min-width: 34px;
}

.vorab-text {
    flex: 1;
    font-size: 14.5px;
}

.vorab-antworten {
    display: flex;
    gap: 16px;
    flex-shrink: 0;
    padding-top: 1px;
}

.radio-label {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: var(--qpb-text) !important;
    cursor: pointer;
    margin: 0 !important;
}

.radio-label input {
    width: auto !important;
    accent-color: var(--qpb-primary);
    margin: 0;
}

.vorab-anmerkung {
    width: 100%;
    margin-top: 8px;
    padding: 7px 12px !important;
    font-size: 13px !important;
    border: 1px solid var(--qpb-border);
    border-radius: var(--radius-input);
    font-family: inherit;
    color: var(--qpb-text);
}

.vorab-anmerkung:focus {
    outline: none;
    border-color: var(--qpb-primary);
    box-shadow: 0 0 0 3px var(--qpb-primary-ring);
}

/* Info-Popover */
.vorab-info {
    position: relative;
    flex-shrink: 0;
}

.info-button {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid var(--qpb-border);
    background: var(--qpb-bg-card);
    color: var(--akzent-blau);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}

.info-button:hover {
    border-color: var(--akzent-blau);
    background: var(--tint-blau-bg);
}

.popover {
    display: none;
    position: absolute;
    top: 30px;
    right: -10px;
    width: 340px;
    max-width: 80vw;
    background: var(--qpb-bg-card);
    border: 1px solid var(--qpb-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-overlay);
    padding: 14px 16px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    z-index: 50;
    text-align: left;
}

.popover.offen {
    display: block;
}

/* Ergebnis-Banner Vorabprüfung */
.vorab-banner {
    padding: 16px 20px;
    border-radius: var(--radius-card);
    margin-bottom: 20px;
    font-size: 14.5px;
}

.vorab-banner .btn {
    margin: 0 0 0 12px;
}

.banner-ja {
    background: var(--qpb-primary-tint);
    border: 1px solid var(--qpb-primary);
    color: var(--qpb-primary-hover);
}

.banner-nein {
    background: var(--tint-gruen-bg);
    border: 1px solid var(--ampel-gruen);
    color: var(--tint-gruen-text);
}

.negativtest-form .negativtest-button {
    display: flex;
    align-items: flex-end;
}

/* Risiko-Accordion */
.risiko-item {
    background: var(--qpb-bg-card);
    border: 1px solid var(--qpb-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    margin-bottom: 12px;
    overflow: hidden;
}

.risiko-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 16px 20px;
    background: var(--qpb-bg-card);
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 15px;
    color: var(--qpb-text);
    text-align: left;
}

.risiko-kopf:hover {
    background: var(--qpb-bg-page);
}

.risiko-titel {
    font-weight: 600;
}

.risiko-titel small {
    display: block;
    font-weight: 400;
    font-size: 12px;
}

.risiko-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.risiko-pfeil {
    color: var(--qpb-text-muted);
}

.risiko-inhalt {
    display: none;
    padding: 0 20px 20px;
    border-top: 1px solid var(--qpb-border);
}

.risiko-item.offen .risiko-inhalt {
    display: block;
}

.risiko-inhalt fieldset {
    border: none;
    box-shadow: none;
    padding: 16px 0 0;
    margin: 0;
}

.risiko-abschnitt {
    margin: 20px 0 12px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--qpb-text-muted);
    border-bottom: 1px solid var(--qpb-border);
    padding-bottom: 6px;
}

.risiko-aktionen {
    margin-top: 16px;
}

.risiko-loeschen {
    margin-top: 8px;
}

.risiko-hinzufuegen {
    margin-top: 20px;
}

/* Risikomatrix (5x5, CSS-Grid) */
.matrix-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.matrix-kopf h2 {
    margin: 0;
}

.matrix-schalter.aktiv {
    background: var(--qpb-primary);
    border-color: var(--qpb-primary);
    color: var(--weiss);
}

.risiko-matrix {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    max-width: 520px;
}

.matrix-gitter {
    display: grid;
    grid-template-columns: 28px repeat(5, 1fr);
    gap: 4px;
    width: 100%;
}

.matrix-label {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--qpb-text-muted);
}

.matrix-zelle {
    aspect-ratio: 1.6;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    position: relative;
}

.zelle-gruen { background: var(--matrix-gruen); }
.zelle-gelb { background: var(--matrix-gelb); }
.zelle-rot { background: var(--matrix-rot); }

.matrix-anzahl {
    font-size: 15px;
    font-weight: 700;
}

.matrix-punkte {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 80%;
}

.matrix-punkt {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--qpb-text);
    opacity: 0.65;
}

.matrix-achse-x,
.matrix-achse-y {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--qpb-text-muted);
}

.matrix-achse-y {
    align-self: flex-start;
}

.matrix-legende {
    margin-top: 14px;
}

.matrix-legende .ampel {
    margin-left: 6px;
}

/* Katalog-Dialog */
.dsfa-dialog-overlay {
    position: fixed;
    inset: 0;
    background: var(--overlay-bg);
    z-index: 250;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.dsfa-dialog {
    background: var(--qpb-bg-card);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-overlay);
    padding: 28px;
    width: 100%;
    max-width: 720px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}

.dsfa-dialog h2 {
    margin: 0 0 8px;
}

.dsfa-dialog form {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.katalog-liste {
    overflow-y: auto;
    margin: 12px 0 20px;
    padding-right: 8px;
}

.katalog-gruppe h3 {
    margin: 16px 0 8px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--qpb-primary);
}

.katalog-eintrag {
    padding: 4px 0;
}

/* Anhang-Bereich */
.anhang-upload-form {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--qpb-border);
    margin-bottom: 16px;
}

.anhang-upload-zeile {
    display: flex;
    gap: 16px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.anhang-upload-zeile .form-gruppe {
    margin-bottom: 0;
}

.anhang-upload-zeile .anhang-datei {
    flex: 1;
    min-width: 240px;
}

.anhang-upload-button .btn {
    margin: 0;
}

input[type="file"] {
    font-size: 14px;
    font-family: inherit;
}

@media (max-width: 768px) {
    .vorab-frage-kopf {
        flex-wrap: wrap;
    }

    .vorab-antworten {
        width: 100%;
        padding-left: 46px;
    }

    .wizard-step {
        min-width: 70px;
    }
}

/* ============================================================
   Zentrales Dashboard (home.php): Modul-Karten
   ============================================================ */

.modul-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
    max-width: 1000px;
}

.modul-karte {
    display: block;
    background: var(--qpb-bg-card);
    border: 1px solid var(--qpb-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 24px;
    text-decoration: none;
    color: var(--qpb-text);
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.modul-karte:hover {
    border-color: var(--qpb-primary);
    box-shadow: var(--shadow-hover);
    transform: translateY(-1px);
    color: var(--qpb-text);
}

.modul-kopf {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.modul-kopf h2 {
    margin: 0;
    font-size: 18px;
}

.modul-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    background: var(--qpb-primary-tint);
    color: var(--qpb-primary);
    border-radius: 10px;
}

.modul-icon svg {
    width: 22px;
    height: 22px;
}

.modul-badge {
    margin-left: auto;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--qpb-bg-page);
    border: 1px solid var(--qpb-border);
    color: var(--qpb-text-muted);
    white-space: nowrap;
}

.modul-beschreibung {
    color: var(--qpb-text-muted);
    font-size: 14px;
    margin: 0 0 18px;
}

.modul-kpis {
    display: flex;
    gap: 28px;
    padding-top: 16px;
    border-top: 1px solid var(--qpb-border);
}

.modul-kpi-wert {
    display: block;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
}

.modul-kpi-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--qpb-text-muted);
    margin-top: 2px;
}

.modul-inaktiv {
    opacity: 0.65;
}

.modul-inaktiv:hover {
    border-color: var(--qpb-border);
    transform: none;
    box-shadow: var(--shadow-card);
}

.modul-inaktiv .modul-icon {
    background: var(--qpb-bg-page);
    color: var(--qpb-text-muted);
}

/* ============================================================
   Empty-State (Platzhalter-Seiten, z.B. DSFA)
   ============================================================ */

.empty-state {
    max-width: 560px;
    margin: 40px auto;
    text-align: center;
    background: var(--qpb-bg-card);
    border: 1px solid var(--qpb-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 48px 40px;
}

.empty-state-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    background: var(--qpb-primary-tint);
    color: var(--qpb-primary);
    border-radius: 18px;
    margin-bottom: 20px;
}

.empty-state-icon svg {
    width: 36px;
    height: 36px;
}

.empty-state h2 {
    margin: 0 0 12px;
}

.empty-state p {
    color: var(--qpb-text-muted);
    font-size: 14.5px;
    text-align: left;
    margin-bottom: 16px;
}

.empty-state .btn {
    margin: 8px 0 0;
}

/* ============================================================
   Login-Seite
   ============================================================ */

body.login-seite {
    background: var(--qpb-bg-page);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.login-card {
    background: var(--qpb-bg-card);
    padding: 40px;
    border-radius: var(--radius-card);
    border: 1px solid var(--qpb-border);
    box-shadow: var(--shadow-hover);
    width: 100%;
    max-width: 420px;
}

.login-header {
    text-align: center;
    margin-bottom: 32px;
}

.login-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: var(--qpb-primary);
    color: var(--weiss);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 1px;
    border-radius: 14px;
    margin-bottom: 18px;
}

.login-header h1 {
    font-size: 24px;
    margin-bottom: 4px;
}

.login-header p {
    color: var(--qpb-text-muted);
    font-size: 14px;
    margin: 0;
}

.login-form button {
    width: 100%;
    padding: 12px;
    background: var(--qpb-primary);
    color: var(--weiss);
    border: none;
    border-radius: var(--radius-input);
    font-size: 15px;
    font-weight: 600;
    font-family: var(--font-stack);
    cursor: pointer;
    transition: background 0.15s;
}

.login-form button:hover {
    background: var(--qpb-primary-hover);
}

.login-footer {
    margin-top: 24px;
    text-align: center;
    font-size: 12px;
    color: var(--qpb-text-muted);
}

/* ============================================================
   Druckansicht
   ============================================================ */

@media print {
    body {
        background: var(--weiss);
        padding: 0;
    }

    .sidebar,
    .sidebar-toggle,
    .sidebar-overlay,
    .no-print {
        display: none !important;
    }

    .hauptbereich {
        margin-left: 0;
        padding: 0;
    }

    .container {
        box-shadow: none;
        border: none;
        padding: 0;
    }

    .card,
    .kpi-box,
    .detail-box,
    .chart-box,
    .tabellen-scroll,
    .quartal-tabelle,
    .vergleich-tabelle,
    .legende-box {
        box-shadow: none;
        border: 1px solid var(--qpb-border);
    }

    .tabelle th,
    .tabelle td {
        padding: 5px;
        font-size: 11px;
    }

    .ampel {
        border: 1px solid var(--print-border);
    }

    .ampel.gruen { background: var(--print-ampel-gruen); color: var(--print-text); }
    .ampel.gelb { background: var(--print-ampel-gelb); color: var(--print-text); }
    .ampel.rot { background: var(--print-ampel-rot); color: var(--print-text); }

    .ampel-dot {
        border: 1px solid var(--print-border);
    }
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1023px) {
    .sidebar {
        transform: translateX(-100%);
    }

    body.sidebar-offen .sidebar {
        transform: translateX(0);
    }

    body.sidebar-offen .sidebar-overlay {
        display: block;
    }

    .sidebar-toggle {
        display: block;
    }

    .hauptbereich {
        margin-left: 0;
        padding: 76px 20px 32px;
    }
}

@media (max-width: 768px) {
    h1 {
        font-size: 24px;
    }

    .dashboard {
        grid-template-columns: 1fr 1fr;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .filter-bereich {
        flex-direction: column;
        align-items: flex-start;
    }

    .profil-info {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .profil-info dd {
        margin-bottom: 12px;
    }
}

/* ============================================================
   Admin-Einstellungen (v2.3.0): Tab-Layout + Toggle-Schalter
   ============================================================ */

.settings-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 24px;
    align-items: start;
}

.settings-tabs {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--qpb-bg-card);
    border: 1px solid var(--qpb-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 8px;
}

.settings-tab {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-input);
    color: var(--qpb-text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}

.settings-tab svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    flex-shrink: 0;
}

.settings-tab:hover {
    background: var(--qpb-bg-page);
    color: var(--qpb-text);
}

.settings-tab.aktiv {
    background: var(--qpb-primary-tint);
    color: var(--qpb-primary);
    font-weight: 600;
}

.settings-inhalt .card h3 {
    margin-bottom: 4px;
}

/* Toggle-Zeile für bool-Einstellungen (generisches Muster):
   [Schalter links, fixe Breite] [Label + Beschreibung rechts, gestapelt]
   Der Selektor .form-gruppe label.toggle-row überschreibt gezielt die
   generische Feld-Label-Optik (display:block, uppercase, muted). */
.toggle-row,
.form-gruppe label.toggle-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 0;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.5;
    color: var(--qpb-text);
}

/* Checkbox unsichtbar, aber fokussier-/bedienbar (Fokusring auf dem Schalter) */
.toggle-row input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-switch {
    display: inline-block;
    position: relative;
    flex: 0 0 42px;
    width: 42px;
    height: 24px;
    /* 24px Schalter mittig zur ersten Textzeile (14px × 1.5 = 21px) */
    margin-top: -1.5px;
    background: var(--grau-schalter);
    border-radius: var(--radius-pill);
    transition: background 0.2s ease;
}

.toggle-switch::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: var(--qpb-bg-card);
    border-radius: 50%;
    box-shadow: var(--shadow-schalter);
    transition: transform 0.2s ease;
}

.toggle-row input:checked + .toggle-switch {
    background: var(--qpb-primary);
}

.toggle-row input:checked + .toggle-switch::after {
    transform: translateX(18px);
}

.toggle-row input:focus-visible + .toggle-switch {
    box-shadow: 0 0 0 3px var(--qpb-primary-ring);
}

.toggle-row .toggle-text {
    display: flex;
    flex-direction: column;
}

.toggle-row .toggle-text small {
    margin-top: 2px;
    font-weight: 400;
}

/* Indikator: verschlüsselter Wert ist gespeichert (Basis siehe Badge-Block) */
.secret-indikator {
    margin-left: 8px;
    background: var(--tint-gruen-bg);
    color: var(--tint-gruen-text);
}

/* Backup-Status (Einstellungen → Backup) */
.badge.backup-ok {
    background: var(--tint-gruen-bg);
    color: var(--tint-gruen-text);
}

.badge.backup-fehler {
    background: var(--tint-rot-bg);
    color: var(--tint-rot-text);
}

/* Backup-Verwaltung: ausklappbare Restore-Anleitung */
.restore-anleitung > td {
    background: var(--tint-grau-bg);
    padding: 16px 20px;
}

.restore-schritte {
    margin: 12px 0;
    padding-left: 22px;
}

.restore-schritte li {
    margin-bottom: 12px;
}

.restore-schritte small {
    display: block;
    margin-top: 4px;
}

.befehl-zeile {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.befehl-zeile code {
    flex: 1;
    max-width: 560px;
    padding: 6px 10px;
    background: var(--qpb-text);
    color: var(--weiss);
    border-radius: var(--radius-input);
    font-size: 13px;
    overflow-x: auto;
    white-space: nowrap;
}

/* Eingabefeld mit Aktions-Knopf daneben (z.B. Token generieren) */
.feld-mit-knopf {
    display: flex;
    gap: 8px;
    align-items: center;
}

.feld-mit-knopf input {
    flex: 1;
}

.feld-mit-knopf .btn {
    margin: 0;
    flex-shrink: 0;
    white-space: nowrap;
}

/* Systemstatus-Karte auf dem Admin-Dashboard (home.php) */
.system-status {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
}

.system-status .system-status-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.system-status .btn {
    margin: 0;
    flex-shrink: 0;
}

.status-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-dot.gruen { background: var(--ampel-gruen); box-shadow: 0 0 0 4px var(--tint-gruen-bg); }
.status-dot.gelb { background: var(--ampel-gelb); box-shadow: 0 0 0 4px var(--tint-gelb-bg); }
.status-dot.rot { background: var(--ampel-rot); box-shadow: 0 0 0 4px var(--tint-rot-bg); }

@media (max-width: 900px) {
    .settings-layout {
        grid-template-columns: 1fr;
    }

    .settings-tabs {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

/* ============================================================
   GF-Report (jahresreport.php) – druckoptimierte Einzelseite
   Ehemals eigener <style>-Block der Seite, hier konsolidiert und
   auf Design-Tokens umgestellt. Alles unter .report-seite gescoped.
   ============================================================ */

body.report-seite {
    font-size: 11pt;
    line-height: 1.5;
}

/* Ersatz für den früheren *-Reset der Einzelseite */
.report-seite h1, .report-seite h2, .report-seite h3, .report-seite p {
    margin: 0;
    padding: 0;
}

.report-seite .container {
    max-width: 210mm;
    margin: 20px auto;
    background: var(--qpb-bg-card);
    padding: 25mm 20mm;
    box-shadow: var(--shadow-hover);
}

/* Kopf */
.report-seite .report-header {
    border-bottom: 3px solid var(--qpb-primary);
    padding-bottom: 20px;
    margin-bottom: 32px;
}

.report-seite .report-header h1 {
    color: var(--qpb-text);
    font-size: 24pt;
    margin-bottom: 4px;
}

.report-seite .report-header .subtitle {
    color: var(--qpb-text-muted);
    font-size: 12pt;
}

.report-seite .report-header .meta {
    margin-top: 16px;
    font-size: 10pt;
    color: var(--qpb-text-muted);
}

/* Abschnitte */
.report-seite .section {
    margin-bottom: 32px;
    page-break-inside: avoid;
}

.report-seite .section h2 {
    color: var(--qpb-text);
    font-size: 14pt;
    border-left: 4px solid var(--qpb-primary);
    padding-left: 12px;
    margin-bottom: 16px;
}

/* Management Summary */
.report-seite .summary-box {
    background: var(--qpb-bg-page);
    border: 1px solid var(--qpb-border);
    border-radius: var(--radius-input);
    padding: 20px;
    margin-bottom: 20px;
}

.report-seite .summary-box p {
    margin-bottom: 10px;
}

.report-seite .summary-box p:last-child {
    margin-bottom: 0;
}

.report-seite .highlight {
    font-weight: 700;
    color: var(--qpb-text);
}

.report-seite .highlight-gruen { color: var(--ampel-gruen); }
.report-seite .highlight-gelb { color: var(--ampel-gelb); }
.report-seite .highlight-rot { color: var(--ampel-rot); }

/* KPI-Kacheln */
.report-seite .kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.report-seite .kpi-card {
    background: var(--qpb-bg-card);
    border: 1px solid var(--qpb-border);
    border-radius: var(--radius-card);
    padding: 16px;
    text-align: center;
}

.report-seite .kpi-card.gruen { border-left: 4px solid var(--ampel-gruen); }
.report-seite .kpi-card.gelb { border-left: 4px solid var(--ampel-gelb); }
.report-seite .kpi-card.rot { border-left: 4px solid var(--ampel-rot); }

.report-seite .kpi-card .wert {
    font-size: 28pt;
    font-weight: 700;
    color: var(--qpb-text);
}

.report-seite .kpi-card .wert.gruen { color: var(--ampel-gruen); }
.report-seite .kpi-card .wert.gelb { color: var(--ampel-gelb); }
.report-seite .kpi-card .wert.rot { color: var(--ampel-rot); }

.report-seite .kpi-card .label {
    font-size: 9pt;
    color: var(--qpb-text-muted);
    margin-top: 4px;
}

.report-seite .kpi-card .vergleich {
    font-size: 9pt;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--qpb-border);
}

.report-seite .trend-up { color: var(--ampel-rot); }
.report-seite .trend-down { color: var(--ampel-gruen); }
.report-seite .trend-neutral { color: var(--qpb-text-muted); }

/* Balkendiagramme */
.report-seite .chart-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.report-seite .chart-box {
    background: var(--qpb-bg-card);
    border: 1px solid var(--qpb-border);
    border-radius: var(--radius-card);
    padding: 16px;
}

.report-seite .chart-box h3 {
    font-size: 11pt;
    color: var(--qpb-text);
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--qpb-border);
}

.report-seite .bar-chart {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.report-seite .bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.report-seite .bar-label {
    width: 100px;
    font-size: 9pt;
    text-align: right;
}

.report-seite .bar-container {
    flex: 1;
    background: var(--qpb-bg-page);
    height: 20px;
    border-radius: 4px;
    overflow: hidden;
}

.report-seite .bar {
    height: 100%;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 8px;
    color: var(--weiss);
    font-size: 9pt;
    font-weight: 700;
    min-width: 25px;
}

/* "bar-blau" heißt historisch so, trägt aber das Quirin-Magenta */
.report-seite .bar-gruen { background: var(--ampel-gruen); }
.report-seite .bar-gelb { background: var(--ampel-gelb); }
.report-seite .bar-rot { background: var(--ampel-rot); }
.report-seite .bar-blau { background: var(--qpb-primary); }
.report-seite .bar-grau { background: var(--qpb-text-muted); }

/* Quartalstabelle (Druckreport: Vollrahmen, ohne Zebra) */
.report-seite .data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 10pt;
}

.report-seite .data-table th,
.report-seite .data-table td {
    padding: 10px 12px;
    text-align: center;
    border: 1px solid var(--qpb-border);
}

.report-seite .data-table th {
    background: var(--qpb-bg-page);
    color: var(--qpb-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 9pt;
}

.report-seite .data-table td:first-child {
    text-align: left;
    font-weight: 500;
}

/* Ampel-Textfarben (Legenden-Zellen) */
.report-seite .text-gruen { color: var(--ampel-gruen); }
.report-seite .text-gelb { color: var(--ampel-gelb); }
.report-seite .text-rot { color: var(--ampel-rot); }

/* Schwerwiegende Vorfälle */
.report-seite .hinweis-klein {
    margin-bottom: 16px;
    color: var(--qpb-text-muted);
    font-size: 10pt;
}

.report-seite .vorfall-item {
    background: var(--qpb-bg-card);
    border: 1px solid var(--qpb-border);
    border-left: 4px solid var(--ampel-rot);
    border-radius: var(--radius-input);
    padding: 12px 16px;
    margin-bottom: 8px;
}

.report-seite .vorfall-item .nummer {
    font-weight: 700;
    color: var(--qpb-text);
}

.report-seite .vorfall-item .datum {
    color: var(--qpb-text-muted);
    font-size: 9pt;
}

.report-seite .vorfall-item .punkte {
    float: right;
    color: var(--ampel-rot);
    font-weight: 700;
}

.report-seite .vorfall-item .beschreibung {
    margin-top: 8px;
    font-size: 10pt;
    color: var(--qpb-text);
}

/* Fußzeile */
.report-seite .report-footer {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--qpb-border);
    font-size: 9pt;
    color: var(--qpb-text-muted);
    text-align: center;
}

.report-seite .report-footer p + p {
    margin-top: 4px;
}

/* Navigation (nicht drucken) */
.report-seite .nav-bar {
    background: var(--qpb-bg-page);
    border: 1px solid var(--qpb-border);
    padding: 16px 20px;
    margin-bottom: 20px;
    border-radius: var(--radius-input);
    display: flex;
    gap: 16px;
    align-items: center;
}

.report-seite .nav-bar a,
.report-seite .nav-bar button {
    background: var(--qpb-primary);
    color: var(--weiss);
    border: none;
    padding: 8px 16px;
    border-radius: var(--radius-input);
    cursor: pointer;
    text-decoration: none;
    font-size: 10pt;
    font-weight: 600;
    font-family: inherit;
}

.report-seite .nav-bar a:hover,
.report-seite .nav-bar button:hover {
    background: var(--qpb-primary-hover);
    color: var(--weiss);
}

.report-seite .nav-bar label {
    color: var(--qpb-text);
    margin-left: auto;
}

.report-seite .nav-bar select {
    padding: 8px 12px;
    border-radius: var(--radius-input);
    border: 1px solid var(--qpb-border);
    font-size: 10pt;
    font-family: inherit;
    background: var(--qpb-bg-card);
}

/* Druck */
@media print {
    body.report-seite {
        background: var(--weiss);
    }

    .report-seite .container {
        box-shadow: none;
        margin: 0;
        padding: 15mm;
    }

    .report-seite .no-print {
        display: none !important;
    }

    .report-seite .section {
        page-break-inside: avoid;
    }

    .report-seite .page-break {
        page-break-before: always;
    }
}

/* ============================================================
   Fehlerprotokoll (fehlerprotokoll.php) + Sidebar-Zähler
   ============================================================ */

/* Roter Zähler (Sidebar "Fehlerprotokoll", Dashboard-Karte) */
.nav-badge {
    display: inline-block;
    min-width: 20px;
    padding: 1px 7px;
    margin-left: auto;
    border-radius: var(--radius-pill);
    background: var(--ampel-rot);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.6;
    text-align: center;
}
.sidebar-nav a .nav-badge { margin-left: auto; }

/* Status-Badges (Basis-Pill kommt aus dem Badge-Block) */
.badge.fehler-status-neu { background: var(--tint-rot-bg); color: var(--tint-rot-text); }
.badge.fehler-status-gesehen { background: var(--tint-blau-bg); color: var(--tint-blau-text); }
.badge.fehler-status-ignoriert { background: var(--tint-grau-bg); color: var(--tint-grau-text); }

/* Typ-Badges */
.badge.fehler-typ-fatal,
.badge.fehler-typ-error,
.badge.fehler-typ-exception { background: var(--tint-rot-bg); color: var(--tint-rot-text); }
.badge.fehler-typ-warning { background: var(--tint-gelb-bg); color: var(--tint-gelb-text); }
.badge.fehler-typ-notice,
.badge.fehler-typ-deprecated { background: var(--tint-grau-bg); color: var(--tint-grau-text); }

/* Aufklappbare Detail-Zeile (<details>, CSP-konform ohne JS) */
.fehler-tabelle .fehler-check-spalte { width: 32px; text-align: center; }
.fehler-tabelle .fehler-anzahl { text-align: right; font-variant-numeric: tabular-nums; }
.fehler-detail-zelle { max-width: 480px; }
.fehler-detail-zelle summary {
    cursor: pointer;
    word-break: break-word;
}
.fehler-detail-zelle summary small { display: block; }
.fehler-details {
    margin-top: 8px;
    padding: 10px 12px;
    background: var(--qpb-bg-page);
    border: 1px solid var(--qpb-border);
    border-radius: var(--radius-input);
}
.fehler-details dt {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--qpb-text-muted);
    margin-top: 8px;
}
.fehler-details dt:first-child { margin-top: 0; }
.fehler-details dd { margin: 2px 0 0; word-break: break-word; }
.fehler-stacktrace {
    margin: 4px 0 0;
    padding: 8px;
    max-height: 260px;
    overflow: auto;
    background: var(--qpb-bg-card);
    border: 1px solid var(--qpb-border);
    border-radius: var(--radius-input);
    font-size: 12px;
    line-height: 1.5;
    white-space: pre-wrap;
}

/* Bulk-Aktionsleiste unter der Tabelle */
.fehler-bulk-aktionen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

/* ============================================================
   VVT-Modul (v3.0.0): Formular, Badges, dynamische Zeilen
   ============================================================ */

/* Sticky Sprungnavigation im VT-Formular */
.anker-nav {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    padding: 10px 14px;
    margin-bottom: 20px;
    background: var(--qpb-bg-card);
    border: 1px solid var(--qpb-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}

.anker-nav a {
    color: var(--qpb-text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: var(--radius-input);
}

.anker-nav a:hover {
    background: var(--qpb-primary-tint);
    color: var(--qpb-primary);
}

.anker-nav-aktionen {
    margin-left: auto;
}

/* Dynamische Abschnitts-Zeilen (A-D, E-spezifisch) */
.vt-zeile {
    border: 1px solid var(--qpb-border);
    border-radius: var(--radius-input);
    padding: 12px 14px;
    margin-bottom: 12px;
}

.vt-zeile-kopf {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.zeilen-nummer {
    font-weight: 700;
    color: var(--qpb-primary);
}

.vt-zeilen-felder {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0 16px;
}

.vt-zeilen-felder .feld-breit {
    grid-column: 1 / -1;
}

/* Abschnitt E: TOM-Auswahl */
.tom-kategorie {
    margin: 18px 0 8px;
    font-size: 15px;
}

.tom-auswahl {
    align-items: flex-start;
}

.tom-auswahl span small {
    display: block;
    color: var(--qpb-text-muted);
}

/* Rollen-Badge: V (Verantwortlicher) / AV (Auftragsverarbeiter) */
.rolle-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 700;
}

.rolle-badge.rolle-v { background: var(--tint-blau-bg); color: var(--tint-blau-text); }
.rolle-badge.rolle-av { background: var(--tint-lila-bg); color: var(--tint-lila-text); }

/* VT-Status "Entfallen" (Entwurf/Aktiv nutzen die DSFA-Statusklassen) */
.status-entfallen { background: var(--tint-rot-bg); color: var(--tint-rot-text); }

/* Hinweis "Vorschlag aus Abschnitt B" am Kopf-Schutzbedarf */
.schutzbedarf-vorschlag { color: var(--akzent-orange); }