/* MDT – Mobile Data Terminal (stratos-core.de/mdt)
 *
 * Eigenständiges Stylesheet im Stil des Retro-Roleplay-Panels: Rajdhani,
 * fast schwarzer Grund mit feinem Scanline-Raster, violetter Akzent, Karten aus
 * halbdurchsichtigem Dunkelviolett mit hauchdünnem Rahmen, Beschriftungen in
 * Großbuchstaben mit weiter Laufweite.
 *
 * Bewusst ohne style.css: das Dashboard folgt dem MEE6-Bauplan, das MDT nicht.
 * Darum stehen hier auch die Grundbauteile (Schaltflächen, Felder, Tabellen,
 * Fenster, Meldungen) noch einmal – sonst gäbe es zwei Baupläne in einer Datei.
 *
 * Schriften, Font Awesome und die Bilder liegen unter /mdt/ im Projekt; die
 * Seite lädt nichts von fremden Servern nach.
 */

/* ---------- Schrift ---------- */
@font-face {
    font-family: 'Rajdhani';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/mdt-assets/fonts/rajdhani-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Rajdhani';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/mdt-assets/fonts/rajdhani-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Rajdhani';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/mdt-assets/fonts/rajdhani-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Rajdhani';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/mdt-assets/fonts/rajdhani-700.woff2') format('woff2');
}

/* ---------- Farben und Maße ---------- */
:root {
    --bg: #0a0a0c;
    --surface: #141418;
    --card: rgba(12, 10, 22, 0.45);
    --card-solid: #121019;
    --card-hi: rgba(12, 10, 22, 0.72);
    --line: rgba(255, 255, 255, 0.05);
    --line-hi: rgba(255, 255, 255, 0.09);
    --line-strong: rgba(255, 255, 255, 0.14);

    --text: #e4e4e7;
    --text-sec: #a1a1aa;
    --text-muted: #71717a;
    --text-faint: #52525b;

    --purple: #a78bfa;
    --purple-lt: #c4b5fd;
    --purple-dk: #7c3aed;
    --green: #22c55e;
    --green-lt: #4ade80;
    --blue: #38bdf8;
    --red: #f87171;
    --amber: #fbbf24;
    --discord: #5865f2;

    /* Der Hausverlauf: von Violett über Rosa nach Bernstein. Er trägt die
       Signaturflächen – Akzentstrich unter der Überschrift, Oberkante der Karten
       und Fenster, aktiver Reiter, aktiver Eintrag in der Schiene.
       Drei Richtungen, damit er auf schmalen und auf quadratischen Flächen passt. */
    --grad: linear-gradient(90deg, #7c3aed 0%, #8b5cf6 16%, #a78bfa 32%, #c084fc 46%,
        #de9fd0 60%, #f0a894 75%, #f9b872 88%, #fbbf24 100%);
    --grad-v: linear-gradient(180deg, #7c3aed 0%, #a78bfa 32%, #de9fd0 60%, #f9b872 85%, #fbbf24 100%);
    --grad-d: linear-gradient(135deg, #7c3aed 0%, #a78bfa 38%, #de9fd0 68%, #fbbf24 100%);

    --p1: var(--red);
    --p2: var(--amber);
    --p3: var(--blue);

    --font: 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
    --mono: ui-monospace, 'Cascadia Mono', Consolas, 'Courier New', monospace;

    --rail-w: 288px;
    --bar-h: 68px;
    --radius: 14px;
    --radius-sm: 8px;

    color-scheme: dark;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body.mdt-body {
    font-family: var(--font);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.45;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Feines Raster und ein Schimmer von oben – links violett, rechts bernstein,
   damit auch der Grund die beiden Enden des Hausverlaufs aufnimmt */
body.mdt-body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255, 255, 255, 0.008) 2px, rgba(255, 255, 255, 0.008) 4px),
        radial-gradient(ellipse 80% 55% at 18% 0%, rgba(124, 58, 237, 0.07) 0%, transparent 60%),
        radial-gradient(ellipse 70% 45% at 88% 0%, rgba(251, 191, 36, 0.035) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

h1, h2, h3, h4, h5 { font-weight: 700; letter-spacing: 0.4px; }
a { color: var(--purple); text-decoration: none; }
a:hover { color: var(--purple-lt); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
button:disabled { cursor: not-allowed; opacity: 0.5; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background: linear-gradient(180deg, rgba(124, 58, 237, 0.45), rgba(222, 159, 208, 0.4) 60%, rgba(251, 191, 36, 0.4));
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(124, 58, 237, 0.8), rgba(222, 159, 208, 0.7) 60%, rgba(251, 191, 36, 0.7));
}
* { scrollbar-width: thin; scrollbar-color: rgba(167, 139, 250, 0.22) transparent; }

/* ---------- Kleine Helfer ---------- */
.hidden { display: none !important; }
.muted { color: var(--text-sec); }
.hint { font-size: 0.78rem; color: var(--text-muted); font-weight: 500; }
.small { font-size: 0.8rem; }
.nowrap { white-space: nowrap; }
.spacer { flex: 1; }
.sep { height: 1px; background: var(--line); margin: 16px 0; }
.mono { font-family: var(--mono); font-size: 0.92em; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.text-success { color: var(--green-lt); }
.text-danger { color: var(--red); }
.text-violet { color: var(--purple); }
.page-tools { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

/* Funkcodes (10-8, 10-23, 10-99 …): sie müssen im Vorbeigehen zu lesen sein.
   Darum eigene Fläche, feste Ziffernbreite und die Farbe des Status – nicht
   als blasse Beschriftung am Rand. */
.code-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 6px;
    border: 1px solid var(--line-hi);
    background: rgba(255, 255, 255, 0.07);
    color: var(--text);
    font-family: var(--mono);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex-shrink: 0;
}
.code-tag.sm { padding: 1px 5px; font-size: 0.68rem; }
/* Zeile aus Code und Beschriftung („10-8 Einsatzbereit") */
.dd-code { display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.code-tag.grey { color: var(--text-sec); }
.code-tag.green { color: var(--green-lt); background: rgba(34, 197, 94, 0.14); border-color: rgba(34, 197, 94, 0.38); }
.code-tag.amber { color: var(--amber); background: rgba(251, 191, 36, 0.14); border-color: rgba(251, 191, 36, 0.38); }
.code-tag.brand { color: var(--blue); background: rgba(56, 189, 248, 0.14); border-color: rgba(56, 189, 248, 0.38); }
.code-tag.violet { color: var(--purple-lt); background: rgba(167, 139, 250, 0.16); border-color: rgba(167, 139, 250, 0.4); }
.code-tag.red { color: #fecaca; background: rgba(248, 113, 113, 0.22); border-color: rgba(248, 113, 113, 0.55); }

/* Kennzeichen und Seriennummern: Schilderoptik */
.plate {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 4px;
    background: #e9e7ef;
    color: #141019;
    font-family: var(--mono);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    border: 1px solid rgba(0, 0, 0, 0.35);
    white-space: nowrap;
}
.plate.sm { padding: 1px 6px; font-size: 0.68rem; }

kbd {
    font-family: var(--mono);
    padding: 2px 6px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--line-hi);
    font-size: 0.66rem;
    color: var(--text-muted);
    line-height: 16px;
}

/* ---------- Schaltflächen ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 40px;
    padding: 8px 18px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background 0.18s, border-color 0.18s, color 0.18s, box-shadow 0.18s, transform 0.18s;
    position: relative;
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn i { font-size: 0.9em; }

/* Die Hauptschaltfläche nimmt den Hausverlauf gedämpft auf: violett links,
   bernstein rechts. Voll gesättigt wäre er für eine Fläche dieser Größe zu laut. */
.btn-brand {
    background: linear-gradient(110deg, rgba(124, 58, 237, 0.3), rgba(167, 139, 250, 0.2) 40%,
        rgba(222, 159, 208, 0.16) 70%, rgba(251, 191, 36, 0.16));
    border-color: rgba(167, 139, 250, 0.32);
    color: var(--purple-lt);
}
.btn-brand:hover:not(:disabled) {
    border-color: rgba(192, 132, 252, 0.6);
    color: #fff;
    box-shadow: 0 0 22px rgba(167, 139, 250, 0.16);
}
.btn-ghost {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--line-hi);
    color: var(--text-sec);
}
.btn-ghost:hover:not(:disabled) { border-color: var(--line-strong); color: var(--text); background: rgba(255, 255, 255, 0.06); }
.btn-success { background: rgba(34, 197, 94, 0.08); border-color: rgba(34, 197, 94, 0.25); color: var(--green-lt); }
.btn-success:hover:not(:disabled) { border-color: rgba(34, 197, 94, 0.5); box-shadow: 0 0 20px rgba(34, 197, 94, 0.12); }
.btn-danger-ghost { background: rgba(248, 113, 113, 0.06); border-color: rgba(248, 113, 113, 0.22); color: var(--red); }
.btn-danger-ghost:hover:not(:disabled) { border-color: rgba(248, 113, 113, 0.5); box-shadow: 0 0 20px rgba(248, 113, 113, 0.12); }
.btn-discord { background: rgba(88, 101, 242, 0.14); border-color: rgba(88, 101, 242, 0.4); color: #c3c9ff; }
.btn-discord:hover:not(:disabled) { background: rgba(88, 101, 242, 0.24); border-color: rgba(88, 101, 242, 0.7); color: #fff; }

.btn-sm { min-height: 32px; padding: 4px 12px; font-size: 0.74rem; letter-spacing: 0.8px; border-radius: 6px; }
.btn-lg { min-height: 52px; padding: 14px 28px; font-size: 0.95rem; }
.btn-full { width: 100%; }

.btn.is-loading { pointer-events: none; }
.btn.is-loading > * { opacity: 0.12; }
.btn > .btn-inner { display: inline-flex; align-items: center; gap: 9px; }
.btn.is-loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: mdt-spin 0.7s linear infinite;
}
@keyframes mdt-spin { to { transform: rotate(360deg); } }

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--line-hi);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-sec);
    font-size: 0.85rem;
    flex-shrink: 0;
    transition: 0.16s;
}
.icon-btn:hover { color: var(--text); border-color: var(--line-strong); background: rgba(255, 255, 255, 0.06); }
.icon-btn.danger { color: var(--red); border-color: rgba(248, 113, 113, 0.2); background: rgba(248, 113, 113, 0.05); }
.icon-btn.danger:hover { border-color: rgba(248, 113, 113, 0.5); }

.header-link {
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    transition: color 0.15s;
}
.header-link:hover { color: var(--purple); }

/* ---------- Formulare ---------- */
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; min-width: 0; }
.field > span {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--text-sec);
}
/* Nur das Beschriftungsfeld bekommt den Stern – nicht auch die Hülle darum */
.field.required > span::after { content: ' *'; color: var(--red); }
.field-hint { font-size: 0.76rem; font-weight: 500; color: var(--text-muted); letter-spacing: 0; text-transform: none; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.input, .select, .textarea {
    width: 100%;
    min-height: 42px;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid var(--line-hi);
    background: rgba(0, 0, 0, 0.3);
    color: var(--text);
    font-size: 0.95rem;
    font-weight: 500;
    transition: border-color 0.16s, box-shadow 0.16s, background 0.16s;
}
.input::placeholder, .textarea::placeholder { color: var(--text-faint); }
.input:hover:not(:disabled), .select:hover:not(:disabled), .textarea:hover:not(:disabled) { border-color: var(--line-strong); }
.input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: rgba(167, 139, 250, 0.55);
    box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.12);
    background: rgba(0, 0, 0, 0.45);
}
.input:disabled, .select:disabled, .textarea:disabled { opacity: 0.45; cursor: not-allowed; }
.textarea { min-height: 96px; resize: vertical; padding: 11px 14px; line-height: 1.55; }
.select {
    appearance: none;
    padding-right: 36px;
    background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
    background-position: calc(100% - 17px) 18px, calc(100% - 12px) 18px;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}
.select option { background: var(--card-solid); color: var(--text); }
.input[type='search']::-webkit-search-cancel-button { display: none; }

.check { display: flex; align-items: center; gap: 10px; font-size: 0.88rem; font-weight: 600; cursor: pointer; margin-bottom: 12px; }
.check input[type='checkbox'] { width: 17px; height: 17px; accent-color: var(--purple); cursor: pointer; }

.switch { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--line-hi);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
.switch .slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    top: 3px;
    border-radius: 50%;
    background: var(--text-sec);
    transition: transform 0.2s, background 0.2s;
}
.switch input:checked + .slider { background: var(--grad); border-color: rgba(192, 132, 252, 0.55); }
.switch input:checked + .slider::before { transform: translateX(20px); background: #fff; }
.switch input:focus-visible + .slider { outline: 2px solid var(--purple); outline-offset: 2px; }

.search { position: relative; min-width: 0; }
.search > i {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-faint);
    font-size: 0.8rem;
    pointer-events: none;
}
.search .input { padding-left: 38px; }

.form-error {
    padding: 11px 14px;
    margin-bottom: 16px;
    border-radius: 8px;
    background: rgba(248, 113, 113, 0.08);
    border: 1px solid rgba(248, 113, 113, 0.3);
    color: var(--red);
    font-size: 0.86rem;
    font-weight: 600;
}

.inline-form { display: flex; gap: 9px; align-items: flex-start; }
.inline-form .input, .inline-form .textarea { flex: 1; }

/* ---------- Marken, Abzeichen, Chips ---------- */
.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 5px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--line-hi);
    color: var(--text-sec);
    white-space: nowrap;
}
.badge.tone-grey { background: rgba(255, 255, 255, 0.06); color: var(--text-sec); }
.badge.tone-green { background: rgba(34, 197, 94, 0.1); border-color: rgba(34, 197, 94, 0.28); color: var(--green-lt); }
.badge.tone-amber { background: rgba(251, 191, 36, 0.1); border-color: rgba(251, 191, 36, 0.28); color: var(--amber); }
.badge.tone-red { background: rgba(248, 113, 113, 0.1); border-color: rgba(248, 113, 113, 0.3); color: var(--red); }
.badge.tone-brand { background: rgba(167, 139, 250, 0.1); border-color: rgba(167, 139, 250, 0.3); color: var(--purple); }
.badge.tone-violet { background: rgba(192, 132, 252, 0.1); border-color: rgba(192, 132, 252, 0.3); color: var(--purple-lt); }

.chiprow { display: flex; flex-wrap: wrap; gap: 7px; }
.chip-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: 7px;
    border: 1px solid var(--line-hi);
    background: rgba(255, 255, 255, 0.025);
    color: var(--text-sec);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: 0.16s;
}
.chip-toggle:hover { border-color: var(--line-strong); color: var(--text); }
.chip-toggle.on {
    background: rgba(167, 139, 250, 0.12);
    border-color: rgba(167, 139, 250, 0.45);
    color: var(--purple-lt);
}
.chip-toggle.on.red { background: rgba(248, 113, 113, 0.12); border-color: rgba(248, 113, 113, 0.45); color: var(--red); }

.lang-switch {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--line);
    flex-shrink: 0;
}
.lang-switch button {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--text-muted);
    transition: 0.15s;
}
.lang-switch button:hover { color: var(--text); }
.lang-switch button[aria-pressed='true'] { background: rgba(167, 139, 250, 0.16); color: var(--purple-lt); }

.notice {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 16px;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 600;
    border: 1px solid var(--line-hi);
    background: rgba(255, 255, 255, 0.025);
    color: var(--text-sec);
}
.notice.warn { background: rgba(251, 191, 36, 0.07); border-color: rgba(251, 191, 36, 0.28); color: var(--amber); }
.notice.danger { background: rgba(248, 113, 113, 0.07); border-color: rgba(248, 113, 113, 0.3); color: var(--red); }
.notice.success { background: rgba(34, 197, 94, 0.07); border-color: rgba(34, 197, 94, 0.28); color: var(--green-lt); }
.notice i { margin-top: 3px; }

/* Pulsierender Punkt – zeigt, dass die Ansicht von selbst nachlädt */
.live {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--text-muted);
}
.live::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--grad-d);
    animation: mdt-pulse 2.2s ease-in-out infinite;
}
@keyframes mdt-pulse {
    0%, 100% { box-shadow: 0 0 4px rgba(167, 139, 250, 0.4); transform: scale(1); }
    50% { box-shadow: 0 0 12px rgba(167, 139, 250, 0.75), 0 0 20px rgba(167, 139, 250, 0.25); transform: scale(1.2); }
}

/* ---------- Tabellen ---------- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th {
    text-align: left;
    padding: 10px 10px;
    border-bottom: 1px solid var(--line-hi);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
}
td {
    padding: 12px 10px;
    border-bottom: 1px solid var(--line);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-sec);
    vertical-align: middle;
}
td strong { color: var(--text); font-weight: 700; }
tbody tr { transition: background 0.14s; }
tbody tr:hover { background: rgba(255, 255, 255, 0.02); }
tbody tr:last-child td { border-bottom: none; }
tfoot td { border-top: 1px solid var(--line-hi); border-bottom: none; color: var(--text); }
td.actions { text-align: right; white-space: nowrap; }
td.actions > * + * { margin-left: 6px; }

.empty {
    padding: 48px 18px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 600;
}
.empty i { display: block; font-size: 1.9rem; margin-bottom: 12px; color: rgba(167, 139, 250, 0.2); }

.skel {
    height: 58px;
    border-radius: var(--radius);
    background: linear-gradient(90deg, rgba(12, 10, 22, 0.45) 25%, rgba(167, 139, 250, 0.05) 37%, rgba(12, 10, 22, 0.45) 63%);
    background-size: 400% 100%;
    animation: mdt-shimmer 1.4s linear infinite;
}
@keyframes mdt-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.skel + .skel { margin-top: 12px; }

/* ---------- Anmeldung, Gemeindewahl, Einrichtung ---------- */
.mdt-center {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
}
/* Vinewood-Skyline, stark abgedunkelt – der Hintergrund der Zugangsseiten */
.mdt-center::before {
    content: '';
    position: fixed;
    inset: 0;
    background: url('/mdt-assets/img/skyline.jpg') center / cover no-repeat;
    opacity: 0.16;
    filter: saturate(0.5) contrast(1.1);
    pointer-events: none;
    z-index: -1;
}
.mdt-center::after {
    content: '';
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at 50% 40%, transparent 0%, rgba(10, 10, 12, 0.85) 60%, var(--bg) 100%);
    pointer-events: none;
    z-index: -1;
}

.auth-card {
    width: 100%;
    max-width: 460px;
    padding: 34px;
    border-radius: 20px;
    background: rgba(12, 10, 22, 0.82);
    border: 1px solid var(--line-hi);
    box-shadow: 0 32px 90px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    position: relative;
    overflow: hidden;
}
.auth-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--grad);
}
.auth-card.wide { max-width: 640px; }
.auth-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 26px; }
.auth-top-right { display: flex; align-items: center; gap: 8px; }

/* Das HUD-Fadenkreuz liegt hinter dem Wappen */
.auth-shield, .boot-shield {
    width: 62px;
    height: 62px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    color: var(--purple-lt);
    background: url('/mdt-assets/img/hud.jpg') center / 150% no-repeat, rgba(167, 139, 250, 0.08);
    border: 1px solid rgba(167, 139, 250, 0.28);
    box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.6), 0 0 26px rgba(167, 139, 250, 0.12);
    position: relative;
    overflow: hidden;
}
.auth-shield > i, .boot-shield > i { position: relative; z-index: 1; text-shadow: 0 0 12px rgba(0, 0, 0, 0.8); }
.auth-shield.danger { color: var(--red); border-color: rgba(248, 113, 113, 0.35); box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.6), 0 0 26px rgba(248, 113, 113, 0.14); }

/* Ring aus dem Hausverlauf um die Wappen. Zwei Flächen übereinander, von denen
   die Maske die innere ausstanzt – bleibt nur der Rahmen. Kann ein Browser das
   nicht, zeigt er einfach keinen Ring statt eines Farbklecks. */
@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
    .auth-shield::after, .boot-shield::after, .cmd-shield::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 1px;
        background: var(--grad-d);
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        mask-composite: exclude;
        pointer-events: none;
    }
    .auth-shield, .boot-shield, .cmd-shield { border-color: transparent; }
    .auth-shield.danger::after { background: linear-gradient(135deg, #f87171, #fbbf24); }
}

.auth-kicker {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--purple);
    margin-bottom: 9px;
}
.auth-card h1 { font-size: 1.95rem; line-height: 1.15; letter-spacing: 1px; margin-bottom: 12px; }
.auth-card > p { color: var(--text-sec); font-size: 0.95rem; line-height: 1.6; margin-bottom: 24px; font-weight: 500; }
.auth-foot { margin-top: 20px; text-align: center; font-size: 0.82rem; color: var(--text-muted); }
.auth-foot span { margin: 0 8px; }

.pick-list { display: flex; flex-direction: column; gap: 9px; }
.pick-item {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--line-hi);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
    text-align: left;
    transition: 0.2s;
}
.pick-item:hover {
    border-color: rgba(167, 139, 250, 0.4);
    background: rgba(167, 139, 250, 0.05);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.pick-icon {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    overflow: hidden;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    background: rgba(167, 139, 250, 0.08);
    border: 1px solid rgba(167, 139, 250, 0.16);
    color: var(--purple);
}
.pick-icon img { width: 100%; height: 100%; object-fit: cover; }
.pick-text { flex: 1; min-width: 0; }
.pick-text strong { display: block; font-size: 1.02rem; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-text small { font-size: 0.78rem; color: var(--text-muted); font-weight: 600; letter-spacing: 0.3px; }

/* ---------- Ladebildschirm ---------- */
.boot { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.boot strong { font-size: 1.3rem; font-weight: 700; letter-spacing: 8px; color: var(--text-sec); }
.boot small { font-size: 0.8rem; color: var(--text-muted); letter-spacing: 1px; }
.boot-bar { display: block; width: 190px; height: 2px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.boot-bar i { display: block; width: 40%; height: 100%; background: var(--grad); box-shadow: 0 0 10px rgba(167, 139, 250, 0.6); animation: mdt-slide 1.1s ease-in-out infinite; }
@keyframes mdt-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }

/* ---------- Gerüst ---------- */
.mdt-shell {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: var(--rail-w) minmax(0, 1fr);
    grid-template-rows: var(--bar-h) minmax(0, 1fr);
    grid-template-areas: 'bar bar' 'rail main';
    height: 100vh;
}

/* ---------- Kommandoleiste ---------- */
.cmdbar {
    grid-area: bar;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 0 24px;
    background: rgba(10, 10, 12, 0.95);
    border-bottom: 1px solid var(--line);
    position: relative;
    z-index: 30;
}
.cmd-brand { display: flex; align-items: center; gap: 13px; min-width: 0; flex-shrink: 0; }
.cmd-shield {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    font-size: 1rem;
    color: var(--purple-lt);
    background: url('/mdt-assets/img/hud.jpg') center / 160% no-repeat, rgba(167, 139, 250, 0.1);
    border: 1px solid rgba(167, 139, 250, 0.25);
    box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.65);
}
.cmd-shield > i { position: relative; z-index: 1; text-shadow: 0 0 10px rgba(0, 0, 0, 0.9); }
.cmd-brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.cmd-brand-text strong {
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 210px;
}

/* Serverwechsel in der Kopfleiste */
.guild-pill {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 40px;
    min-width: 0;
    padding: 4px 12px 4px 6px;
    border: 1px solid var(--line-hi);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.025);
    color: var(--text);
    flex-shrink: 0;
    transition: 0.18s;
}
.guild-pill:hover, .guild-pill[aria-expanded='true'] { border-color: var(--line-strong); background: rgba(255, 255, 255, 0.05); }
.guild-pill > i { font-size: 0.6rem; color: var(--text-faint); }
.guild-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    font-size: 0.75rem;
    background: rgba(167, 139, 250, 0.08);
    border: 1px solid rgba(167, 139, 250, 0.16);
    color: var(--purple);
}
.guild-icon img { width: 100%; height: 100%; object-fit: cover; }
.guild-name {
    font-size: 0.84rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 170px;
}
.guild-menu {
    position: absolute;
    top: calc(var(--bar-h) - 8px);
    left: 24px;
    width: 290px;
    max-width: calc(100vw - 28px);
    max-height: min(70vh, 460px);
    overflow-y: auto;
    padding: 8px;
    background: rgba(18, 16, 26, 0.96);
    border: 1px solid var(--line-strong);
    border-radius: 14px;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    z-index: 40;
    animation: mdt-drop 0.16s ease-out;
}
.guild-menu-head {
    display: block;
    padding: 5px 9px 8px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-muted);
}
.guild-menu hr { border: none; border-top: 1px solid var(--line); margin: 7px 4px; }
.guild-opt {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 7px 9px;
    border-radius: 8px;
    color: var(--text-sec);
    transition: 0.14s;
}
.guild-opt:hover { background: rgba(255, 255, 255, 0.05); color: var(--text); }
.guild-opt.active { background: rgba(167, 139, 250, 0.12); color: var(--purple-lt); }
.guild-opt > i { margin-left: auto; font-size: 0.75rem; }
.guild-opt-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.guild-opt-text strong { font-size: 0.88rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.guild-opt-text small { font-size: 0.72rem; font-weight: 600; color: var(--text-muted); }

.cmd-search { position: relative; flex: 1; max-width: 520px; min-width: 0; }
.cmd-search > i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-faint); font-size: 0.8rem; pointer-events: none; }
.cmd-search .input { min-height: 40px; padding: 7px 50px 7px 38px; background: rgba(0, 0, 0, 0.42); border-radius: 10px; font-size: 0.9rem; }
.cmd-search kbd { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); pointer-events: none; }

.cmd-right { display: flex; align-items: center; gap: 11px; margin-left: auto; flex-shrink: 0; }
.cmd-clock { text-align: right; line-height: 1.15; padding-right: 4px; }
.cmd-clock strong { display: block; font-family: var(--mono); font-size: 0.95rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.cmd-clock small { font-size: 0.68rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); }

.duty-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 4px 14px;
    border: 1px solid var(--line-hi);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.025);
    color: var(--text);
    transition: 0.18s;
}
.duty-pill:hover { border-color: var(--line-strong); background: rgba(255, 255, 255, 0.05); }
.duty-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); flex-shrink: 0; }
.duty-pill .duty-text { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
/* Der eigene Funkstatus steht in der Kopfleiste – der Code gehört dort zum
   Lesen, nicht zum Erraten: größer, heller, feste Ziffernbreite. */
.duty-pill .duty-text strong {
    font-family: var(--mono);
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}
.duty-pill .duty-text small { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.5px; color: var(--text-sec); white-space: nowrap; }
.duty-pill > i { font-size: 0.6rem; color: var(--text-faint); }
.duty-pill[data-tone='green'] .dot { background: var(--green); box-shadow: 0 0 9px rgba(34, 197, 94, 0.7); }
.duty-pill[data-tone='amber'] .dot { background: var(--amber); box-shadow: 0 0 9px rgba(251, 191, 36, 0.6); }
.duty-pill[data-tone='brand'] .dot { background: var(--blue); box-shadow: 0 0 9px rgba(56, 189, 248, 0.6); }
.duty-pill[data-tone='violet'] .dot { background: var(--purple); box-shadow: 0 0 9px rgba(167, 139, 250, 0.6); }
.duty-pill[data-tone='red'] { border-color: rgba(248, 113, 113, 0.45); }
.duty-pill[data-tone='red'] .dot { background: var(--red); animation: mdt-blink 1s steps(2) infinite; }
@keyframes mdt-blink { 50% { opacity: 0.2; } }

.duty-menu {
    position: absolute;
    top: calc(var(--bar-h) - 8px);
    right: 24px;
    width: 274px;
    padding: 8px;
    background: rgba(18, 16, 26, 0.96);
    border: 1px solid var(--line-strong);
    border-radius: 14px;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    z-index: 40;
    animation: mdt-drop 0.16s ease-out;
}
@keyframes mdt-drop { from { opacity: 0; transform: translateY(-8px) scale(0.98); } }
.duty-opt {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 9px 11px;
    border-radius: 8px;
    color: var(--text-sec);
    font-size: 0.88rem;
    font-weight: 600;
    text-align: left;
    transition: 0.14s;
}
.duty-opt:hover { background: rgba(255, 255, 255, 0.05); color: var(--text); }
.duty-opt .dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.duty-opt .code-tag { margin-left: auto; }
.duty-opt.active { background: rgba(167, 139, 250, 0.12); color: var(--purple-lt); }
/* Entwarnung nach einem Notruf – steht oben im Menü und soll auffallen */
.duty-opt.clear-panic { background: rgba(248, 113, 113, 0.1); border: 1px solid rgba(248, 113, 113, 0.4); color: var(--red); }
.duty-opt.clear-panic:hover { background: rgba(248, 113, 113, 0.2); color: #fff; }
.duty-menu hr { border: none; border-top: 1px solid var(--line); margin: 7px 4px; }
.duty-menu .duty-note { padding: 4px 4px 6px; }
.duty-menu .duty-note .input { min-height: 36px; font-size: 0.85rem; }

.btn-panic {
    background: rgba(248, 113, 113, 0.12);
    border-color: rgba(248, 113, 113, 0.4);
    color: var(--red);
    min-height: 40px;
    padding: 6px 15px;
}
.btn-panic:hover:not(:disabled) {
    background: rgba(248, 113, 113, 0.22);
    border-color: var(--red);
    color: #fff;
    box-shadow: 0 0 24px rgba(248, 113, 113, 0.28);
}

/* Entwarnung: steht an derselben Stelle wie der Notruf-Knopf, solange der
   eigene Notruf läuft – damit man ihn nicht suchen muss. */
.btn-panic-off {
    background: rgba(34, 197, 94, 0.14);
    border-color: rgba(34, 197, 94, 0.45);
    color: var(--green-lt);
    min-height: 40px;
    padding: 6px 15px;
    animation: mdt-pulse-soft 1.6s ease-in-out infinite;
}
.btn-panic-off:hover:not(:disabled) {
    background: rgba(34, 197, 94, 0.26);
    border-color: var(--green);
    color: #fff;
    box-shadow: 0 0 24px rgba(34, 197, 94, 0.28);
}
@keyframes mdt-pulse-soft { 50% { box-shadow: 0 0 20px rgba(34, 197, 94, 0.35); } }

/* ---------- Schiene ---------- */
.rail {
    grid-area: rail;
    background: rgba(10, 10, 12, 0.5);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    min-height: 0;
    z-index: 20;
}
.rail-nav { flex: 1; overflow-y: auto; padding: 18px 14px 22px; display: flex; flex-direction: column; gap: 2px; }
.rail-group {
    padding: 18px 10px 8px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--text-faint);
}
.rail-group:first-child { padding-top: 4px; }
.rail-link {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 11px 14px;
    border-radius: 8px;
    color: var(--text-sec);
    font-size: 0.97rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: background 0.15s, color 0.15s;
    position: relative;
}
.rail-link > i:first-child { width: 20px; text-align: center; font-size: 0.92rem; color: var(--text-faint); transition: color 0.15s; }
.rail-link > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-link:hover { background: rgba(255, 255, 255, 0.04); color: var(--text); }
.rail-link:hover > i:first-child { color: var(--text-sec); }
.rail-link.active { background: rgba(167, 139, 250, 0.08); color: var(--purple-lt); }
.rail-link.active > i:first-child { color: var(--purple); }
.rail-link.active::before {
    content: '';
    position: absolute;
    left: -14px;
    top: 9px;
    bottom: 9px;
    width: 2px;
    background: var(--grad-v);
    box-shadow: 0 0 8px rgba(167, 139, 250, 0.7);
}
.rail-count {
    font-style: normal;
    font-family: var(--mono);
    font-size: 0.66rem;
    font-weight: 700;
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 5px;
    text-align: center;
    background: rgba(248, 113, 113, 0.18);
    border: 1px solid rgba(248, 113, 113, 0.35);
    color: var(--red);
}
.rail-count.quiet { background: rgba(255, 255, 255, 0.06); border-color: var(--line-hi); color: var(--text-muted); }

.rail-foot { border-top: 1px solid var(--line); padding: 14px; display: flex; flex-direction: column; gap: 13px; }
.rail-user { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rail-user img { width: 38px; height: 38px; border-radius: 50%; border: 2px solid rgba(167, 139, 250, 0.3); flex-shrink: 0; }
.rail-user .row-ico { width: 38px; height: 38px; border-radius: 50%; }
.rail-user-text { min-width: 0; line-height: 1.3; }
.rail-user-text strong { display: block; font-size: 0.92rem; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-user-text small {
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--purple);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Behördenwechsel: unter welchem Dienstausweis gearbeitet wird. Steht nur da,
   wo es etwas zu wechseln gibt – wer einen Ausweis hat, sieht ihn gar nicht. */
.agency-switch { display: flex; flex-direction: column; gap: 5px; }
.ag-chip {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 7px 10px;
    border-radius: 8px;
    border: 1px solid var(--line-hi);
    background: rgba(255, 255, 255, 0.025);
    color: var(--text-sec);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-align: left;
    transition: 0.15s;
}
.ag-chip span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-chip:hover { border-color: var(--line-strong); color: var(--text); background: rgba(255, 255, 255, 0.06); }
.ag-chip.on {
    background: rgba(167, 139, 250, 0.14);
    border-color: rgba(167, 139, 250, 0.45);
    color: var(--purple-lt);
}
/* Behörde ohne eigenen Ausweis – die Serverleitung kann sich einen anlegen */
.ag-chip.add { color: var(--text-muted); border-style: dashed; }
.ag-chip.add:hover { color: var(--text); }
.ag-chip .ag-plus { font-size: 0.6rem; opacity: 0.7; }

.rail-actions { display: flex; gap: 8px; }
.rail-actions > * { flex: 1; display: grid; place-items: center; }
.rail-backdrop { display: none; }

/* ---------- Inhalt ---------- */
.mdt-main { grid-area: main; overflow-y: auto; min-width: 0; }
.mdt-view { padding: 26px 32px 64px; max-width: 1520px; margin: 0 auto; }

.page-head { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; margin-bottom: 26px; }
.page-head-text { min-width: 0; flex: 1; }
.page-head h1 { font-size: 2.1rem; font-weight: 700; letter-spacing: 1.4px; line-height: 1.1; }
/* Akzentstrich unter der Überschrift – die auffälligste Stelle des Hausverlaufs */
.page-head-text::after {
    content: '';
    display: block;
    width: 72px;
    height: 3px;
    border-radius: 2px;
    background: var(--grad);
    margin: 10px 0 8px;
    box-shadow: 0 0 14px rgba(167, 139, 250, 0.35);
}
.page-head p { color: var(--text-muted); font-size: 0.92rem; line-height: 1.6; max-width: 780px; font-weight: 500; }

/* Lagebild: Titelbild der Behörde, unter deren Dienstausweis gearbeitet wird.
   Welche das ist, schreibt renderShell als data-agency an das Gerüst. Links liegt
   ein dunkler Verlauf über dem Bild, damit die Überschrift lesbar bleibt. */
.mdt-shell[data-agency='police'] { --agency-img: url('/mdt-assets/img/agency-police.jpg'); --agency-pos: 50% 10%; }
.mdt-shell[data-agency='ems'] { --agency-img: url('/mdt-assets/img/agency-ems.webp'); --agency-pos: 50% 46%; }
/* Das Bild der Justiz ist quadratisch: flächenfüllend bliebe nur ein Streifen
   ohne Kopf. Es steht darum rechts und läuft links in den dunklen Verlauf aus. */
.mdt-shell[data-agency='doj'] { --agency-img: url('/mdt-assets/img/agency-doj.jpg'); --agency-pos: 100% 14%; --agency-size: 75% auto; }
.home-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 250px;
    padding: 26px 28px 22px;
    margin-bottom: 20px;
    border: 1px solid var(--line-hi);
    border-radius: var(--radius);
    background: var(--card-solid);
}
.home-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    background: var(--agency-img) var(--agency-pos, center) / var(--agency-size, cover) no-repeat;
}
.home-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(10, 10, 12, 0.95) 0%, rgba(10, 10, 12, 0.8) 32%, rgba(10, 10, 12, 0.3) 66%, rgba(10, 10, 12, 0.12) 100%),
        linear-gradient(0deg, rgba(10, 10, 12, 0.75) 0%, transparent 60%);
    border-top: 2px solid transparent;
    border-image: var(--grad) 1;
}
.home-hero .page-head { margin-bottom: 0; }
.home-hero .page-head p { color: var(--text-sec); }
.home-hero-tag {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: auto;
    padding: 5px 12px;
    border: 1px solid rgba(167, 139, 250, 0.3);
    border-radius: 999px;
    background: rgba(10, 10, 12, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--purple-lt);
}
.crumbs { display: flex; align-items: center; gap: 9px; font-size: 0.72rem; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-faint); margin-bottom: 12px; }
.crumbs a { color: var(--text-muted); }
.crumbs a:hover { color: var(--purple); }

.cols { display: grid; gap: 14px; align-items: start; }
.cols-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.cols-main { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); }
.stack { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    min-width: 0;
    overflow: hidden;
    transition: border-color 0.25s, box-shadow 0.25s;
}
.card:hover { border-color: rgba(167, 139, 250, 0.12); box-shadow: 0 0 28px rgba(167, 139, 250, 0.03); }
.card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
}
.card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.86rem;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--text);
}
.card-title > i { color: var(--purple); font-size: 0.82rem; }
.card-body { padding: 20px; }
.card-body.flush { padding: 0; }
.card-body.tight { padding: 10px; }
.card-foot { padding: 14px 20px; border-top: 1px solid var(--line); display: flex; gap: 9px; justify-content: flex-end; flex-wrap: wrap; }
.card-sub { font-size: 0.88rem; color: var(--text-sec); font-weight: 500; }

/* ---------- Kennzahlen ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 12px; margin-bottom: 20px; }
.kpi {
    position: relative;
    overflow: hidden;
    background: rgba(12, 10, 22, 0.5);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 16px 16px 18px;
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
    transition: 0.25s;
}
/* Die Linie unten trägt den Hausverlauf; Kacheln mit eigener Bedeutung
   (grün, gelb, rot) überschreiben ihn weiter unten mit ihrer Farbe. */
.kpi::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: var(--grad); opacity: 0.4; }
a.kpi:hover { border-color: rgba(167, 139, 250, 0.2); box-shadow: 0 0 24px rgba(167, 139, 250, 0.05); transform: translateY(-2px); }
a.kpi:hover::after { opacity: 1; }
.kpi-ico { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-size: 0.95rem; flex-shrink: 0; position: relative; z-index: 1; }
.kpi-ico.brand { background: rgba(167, 139, 250, 0.1); color: var(--purple); }
.kpi-ico.green { background: rgba(34, 197, 94, 0.1); color: var(--green-lt); }
.kpi-ico.amber { background: rgba(251, 191, 36, 0.1); color: var(--amber); }
.kpi-ico.red { background: rgba(248, 113, 113, 0.1); color: var(--red); }
.kpi-ico.violet { background: rgba(192, 132, 252, 0.1); color: var(--purple-lt); }
.kpi:has(.kpi-ico.green)::after { background: var(--green); }
.kpi:has(.kpi-ico.amber)::after { background: var(--amber); }
.kpi:has(.kpi-ico.red)::after { background: var(--red); }
.kpi-text { min-width: 0; position: relative; z-index: 1; }
.kpi-val { display: block; font-size: 1.75rem; line-height: 1.1; font-weight: 700; letter-spacing: -0.5px; color: #fff; font-variant-numeric: tabular-nums; }
/* Deutsche Beschriftungen sind lang („Offene Geldstrafen") – lieber zwei Zeilen
   als abgeschnitten. Mehr als zwei Zeilen sprengen die Kachel. */
.kpi-lab {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
    margin-top: 3px;
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ---------- Einsatzkarte ---------- */
/* Die Karte ist ein Fenster, kein Bild: .map ist der feste Ausschnitt, darin
   liegt .map-canvas mit dem Satellitenbild in seiner natürlichen Größe und wird
   verschoben und vergrößert. Weil die Pins im selben Kasten liegen, bleiben sie
   beim Zoomen auf ihrer Stelle; ihre Lage ist weiterhin ein Anteil von Breite
   und Höhe in Prozent. Das Seitenverhältnis muss nirgends gepflegt werden – die
   Steuerung in mdt.js rechnet es aus der natürlichen Größe des Bildes aus.
   --map-h gibt die Höhe des Ausschnitts vor. */
.map {
    position: relative;
    /* Der Rahmen folgt dem Seitenverhältnis der Karte (--map-ar setzt mdt.js,
       sobald es feststeht) und lässt ringsum etwas Meer stehen. Ohne das stünde
       eine hochkante Karte in einer breiten Kachel zwischen zwei leeren
       Dritteln. Auf schmalen Schirmen begrenzt min() auf die volle Breite. */
    --map-ar: 0.68;
    --map-luft: 1.3;
    width: min(100%, calc(var(--map-h, 460px) * var(--map-ar) * var(--map-luft)));
    height: var(--map-h, 460px);
    margin: 0 auto;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--line);
    /* Das Meer: Tiefenverlauf mit dem feinen Seekarten-Raster darüber. Der Rand
       des Kartenbildes ist durchsichtig, hier liegt also wirklich Wasser. */
    background:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 48px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 48px),
        radial-gradient(118% 86% at 50% 44%, #0e1727 0%, #090c14 58%, #06070c 100%);
    /* Startwert; mdt.js schaltet auf none, sobald hineingezoomt ist */
    touch-action: pan-y;
    user-select: none;
    cursor: grab;
}
.map:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.map.dragging { cursor: grabbing; }
/* Ein Hauch Tiefe am Rand, damit der Ausschnitt nicht wie ein Loch wirkt */
.map::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    box-shadow: inset 0 0 70px rgba(0, 0, 0, 0.6);
    z-index: 4;
}

.map-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--map-nat-w, 1109px);
    height: var(--map-nat-h, 1418px);
    transform-origin: 0 0;
    will-change: transform;
}
.map-img {
    display: block;
    width: 100%;
    height: 100%;
    -webkit-user-drag: none;
    user-select: none;
}
.map-pins { position: absolute; inset: 0; }
.map.placing { cursor: crosshair; border-color: rgba(167, 139, 250, 0.45); box-shadow: inset 0 0 50px rgba(167, 139, 250, 0.08); }
.map.placing .map-pin { pointer-events: none; }

/* ---------- Kartenbedienung ---------- */
/* Zoomknöpfe oben rechts, Maßstab unten links – beide über dem Bild und außerhalb
   von .map-canvas, damit sie nicht mitskaliert werden. */
.map-ctl {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 6;
}
.map-ctl button {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    border: 1px solid var(--line-hi);
    background: rgba(7, 9, 16, 0.84);
    backdrop-filter: blur(6px);
    color: var(--text-sec);
    font-size: 0.78rem;
    cursor: pointer;
    transition: color 0.14s, border-color 0.14s, background 0.14s;
}
.map-ctl button:hover:not(:disabled) {
    color: #fff;
    border-color: rgba(167, 139, 250, 0.5);
    background: rgba(167, 139, 250, 0.16);
}
.map-ctl button:disabled { opacity: 0.4; cursor: default; }

.map-info {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(7, 9, 16, 0.82);
    backdrop-filter: blur(6px);
    font-family: var(--mono);
    font-size: 0.6rem;
    letter-spacing: 0.5px;
    color: var(--text-faint);
    pointer-events: none;
}
.map-info i { font-size: 0.58rem; }
.map.zoomed .map-info { color: var(--purple-lt); }

/* --inv ist der Kehrwert des Maßstabs (siehe mdt.js). Weil .map-canvas skaliert
   wird, würde ein Pin sonst mitwachsen und beim Herauszoomen verschwinden; so
   bleibt er auf dem Schirm immer gleich groß – er markiert eine Stelle, er ist
   kein Gebäude. */
/* Der Pin ist genau so groß wie sein Punkt – dadurch liegt der Punkt selbst auf
   der gemeldeten Stelle. Das Schild hängt außerhalb des Flusses darunter, sonst
   säße die Stelle zwischen Punkt und Schild. */
.map-pin {
    position: absolute;
    width: 22px;
    height: 22px;
    transform: translate(-50%, -50%) scale(var(--inv, 1));
    display: block;
    text-decoration: none;
    z-index: 2;
}
.map-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--mono);
    font-size: 0.6rem;
    font-weight: 700;
    color: #0b0a11;
    border: 2px solid rgba(0, 0, 0, 0.55);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
    transition: transform 0.16s;
}
.map-tag {
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    display: block;
    font-family: var(--mono);
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(7, 9, 16, 0.85);
    border: 1px solid var(--line-hi);
    color: var(--text-sec);
    white-space: nowrap;
    max-width: 92px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.map-pin:hover { z-index: 5; }
.map-pin:hover .map-dot { transform: scale(1.25); }
.map-pin:hover .map-tag { color: #fff; border-color: var(--line-strong); }
.map-pin.pin-call.p1 .map-dot { background: var(--red); }
.map-pin.pin-call.p2 .map-dot { background: var(--amber); }
.map-pin.pin-call.p3 .map-dot { background: var(--blue); }
.map-pin.pin-unit .map-dot { background: var(--text-muted); color: #0b0a11; font-size: 0.55rem; }
.map-pin.pin-unit.green .map-dot { background: var(--green); }
.map-pin.pin-unit.amber .map-dot { background: var(--amber); }
.map-pin.pin-unit.brand .map-dot { background: var(--blue); }
.map-pin.pin-unit.violet .map-dot { background: var(--purple); }
.map-pin.pin-unit.red .map-dot { background: var(--red); }

/* Der Ring, der von einem dringenden Einsatz ausgeht */
.map-ping {
    position: absolute;
    top: 11px;
    left: 50%;
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    border-radius: 50%;
    border: 2px solid var(--red);
    animation: map-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
    pointer-events: none;
}
.map-pin.p2 .map-ping { border-color: var(--amber); animation-duration: 3s; }
.map-pin.p3 .map-ping { display: none; }
@keyframes map-ping {
    0% { transform: scale(1); opacity: 0.8; }
    70%, 100% { transform: scale(3.2); opacity: 0; }
}

/* Markierung im Formular, solange der Einsatz noch nicht angelegt ist */
.map-marker {
    position: absolute;
    width: 16px;
    height: 16px;
    transform: translate(-50%, -50%) scale(var(--inv, 1));
    border-radius: 50%;
    background: var(--purple);
    border: 2px solid #fff;
    box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.25), 0 2px 10px rgba(0, 0, 0, 0.6);
    /* Eigene Kurve statt mdt-pop-in: die Markierung muss ihre Verschiebung um die
       halbe eigene Größe behalten, sonst springt sie während der Einblendung. */
    animation: map-marker-in 0.22s ease-out;
}
@keyframes mdt-pop-in { from { transform: scale(0.2); opacity: 0; } }
@keyframes map-marker-in {
    from { transform: translate(-50%, -50%) scale(calc(var(--inv, 1) * 0.2)); opacity: 0; }
}

.map-hint {
    position: absolute;
    left: 50%;
    top: 14px;
    z-index: 6;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 15px;
    border-radius: 999px;
    background: rgba(7, 9, 16, 0.92);
    border: 1px solid rgba(167, 139, 250, 0.45);
    color: var(--purple-lt);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    white-space: nowrap;
    animation: mdt-pop-in 0.2s ease-out;
    pointer-events: none;
}
.map-wrap { display: flex; flex-direction: column; }
.map-legend {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 11px 18px;
    border-top: 1px solid var(--line);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-muted);
}
.map-legend span { display: inline-flex; align-items: center; gap: 6px; }
.map-key { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.map-key.p1 { background: var(--red); }
.map-key.p2 { background: var(--amber); }
.map-key.p3 { background: var(--blue); }
.map-key.unit { background: var(--green); }
.map-count { margin-left: auto; color: var(--text-faint); letter-spacing: 0.5px; }

/* ---------- Aktivität ---------- */
.chart { display: flex; flex-direction: column; gap: 10px; }
.chart-scale {
    display: flex;
    justify-content: space-between;
    font-family: var(--mono);
    font-size: 0.62rem;
    color: var(--text-faint);
}
.chart-bars {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
    align-items: end;
    height: 118px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--line-hi);
    position: relative;
}
.chart-col { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.chart-bar {
    display: block;
    width: 100%;
    min-height: 3px;
    border-radius: 4px 4px 0 0;
    /* #8b5cf6: derselbe Schritt wie im Hausverlauf, gegen den Kartengrund geprüft */
    background: #8b5cf6;
    transition: background 0.16s;
    animation: chart-grow 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}
.chart-col:nth-child(1) .chart-bar { animation-delay: 0.02s; }
.chart-col:nth-child(2) .chart-bar { animation-delay: 0.06s; }
.chart-col:nth-child(3) .chart-bar { animation-delay: 0.1s; }
.chart-col:nth-child(4) .chart-bar { animation-delay: 0.14s; }
.chart-col:nth-child(5) .chart-bar { animation-delay: 0.18s; }
.chart-col:nth-child(6) .chart-bar { animation-delay: 0.22s; }
.chart-col:nth-child(7) .chart-bar { animation-delay: 0.26s; }
@keyframes chart-grow { from { transform: scaleY(0); transform-origin: bottom; } }
.chart-col.today .chart-bar { background: var(--purple-lt); }
.chart-col:hover .chart-bar { background: var(--purple-lt); }
.chart-day {
    position: absolute;
    bottom: -19px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--text-faint);
}
.chart-col.today .chart-day { color: var(--purple-lt); }
/* Wert erscheint beim Überfahren – nicht an jedem Balken eine Zahl */
.chart-tip {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%) translateY(3px);
    font-family: var(--mono);
    font-size: 0.66rem;
    font-weight: 700;
    color: #fff;
    background: rgba(7, 9, 16, 0.95);
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    padding: 2px 7px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.14s, transform 0.14s;
    white-space: nowrap;
}
.chart-col:hover .chart-tip { opacity: 1; transform: translateX(-50%) translateY(0); }
.chart-sum {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 600;
}
.chart-sum b { color: var(--text); font-size: 0.95rem; font-weight: 700; }

/* ---------- Bestenliste & Dienstzahlen ---------- */
.rank-pos {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    font-family: var(--mono);
    font-size: 0.72rem;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
}
.rank-pos.first { background: var(--grad-d); color: #0b0a11; }
.rank-time {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--mono);
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--text-sec);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.rank-time i { font-size: 0.7rem; color: var(--text-faint); }
.stats-row { margin-top: 5px; color: var(--text-faint); font-size: 0.74rem; }
.stats-row i { margin-right: 4px; opacity: 0.7; }
.dl-head {
    display: block;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 8px;
}

/* ---------- Einsätze ---------- */
.calls { display: flex; flex-direction: column; }
.call {
    display: flex;
    gap: 13px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    width: 100%;
    transition: background 0.15s;
    position: relative;
    color: inherit;
}
.call:last-child { border-bottom: none; }
.call:hover { background: rgba(255, 255, 255, 0.025); }
.call::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; }
.call.p1::before { background: var(--p1); box-shadow: 0 0 10px var(--p1); }
.call.p2::before { background: var(--p2); }
.call.p3::before { background: var(--p3); }
.call.closed { opacity: 0.5; }
.call-prio {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    font-family: var(--mono);
    font-weight: 700;
    font-size: 0.76rem;
    flex-shrink: 0;
}
.call.p1 .call-prio { background: rgba(248, 113, 113, 0.12); color: var(--red); }
.call.p2 .call-prio { background: rgba(251, 191, 36, 0.12); color: var(--amber); }
.call.p3 .call-prio { background: rgba(56, 189, 248, 0.12); color: var(--blue); }
.call-main { flex: 1; min-width: 0; }
.call-title { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.call-title strong { color: var(--text); font-size: 1rem; font-weight: 700; }
.call-code { font-family: var(--mono); font-size: 0.7rem; font-weight: 700; color: var(--purple); }
.call-meta { display: flex; flex-wrap: wrap; gap: 3px 14px; margin-top: 4px; font-size: 0.8rem; font-weight: 500; color: var(--text-muted); }
.call-meta i { margin-right: 5px; font-size: 0.68rem; }
.call-units { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.unit-tag {
    font-family: var(--mono);
    font-size: 0.66rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-sec);
    border: 1px solid var(--line-hi);
}
.unit-tag.primary { background: rgba(167, 139, 250, 0.12); color: var(--purple-lt); border-color: rgba(167, 139, 250, 0.3); }
.call-side { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; flex-shrink: 0; }
.call-age { font-family: var(--mono); font-size: 0.72rem; color: var(--text-muted); }

/* ---------- Einheiten ---------- */
.units { display: flex; flex-direction: column; }
.unit { display: flex; align-items: center; gap: 12px; padding: 11px 18px; border-bottom: 1px solid var(--line); }
.unit:last-child { border-bottom: none; }
.unit-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--text-faint); }
.unit-dot.grey { background: var(--text-faint); }
.unit-dot.green { background: var(--green); box-shadow: 0 0 8px rgba(34, 197, 94, 0.6); }
.unit-dot.amber { background: var(--amber); }
.unit-dot.brand { background: var(--blue); }
.unit-dot.violet { background: var(--purple); }
.unit-dot.red { background: var(--red); animation: mdt-blink 1s steps(2) infinite; }
.unit-cs { font-family: var(--mono); font-size: 0.76rem; font-weight: 700; color: var(--text); min-width: 68px; }
.unit-name { flex: 1; min-width: 0; font-size: 0.9rem; font-weight: 600; color: var(--text-sec); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.unit-name small { display: block; font-size: 0.7rem; font-weight: 500; color: var(--text-faint); }
.unit-state { flex-shrink: 0; }

/* ---------- Listenzeilen ---------- */
.rows { display: flex; flex-direction: column; }
.row-item {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 18px;
    border-bottom: 1px solid var(--line);
    width: 100%;
    text-align: left;
    transition: background 0.15s;
    color: inherit;
}
.row-item:last-child { border-bottom: none; }
.row-item:hover { background: rgba(255, 255, 255, 0.025); }
.row-ico {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-muted);
    font-size: 0.88rem;
    overflow: hidden;
}
.row-ico img { width: 100%; height: 100%; object-fit: cover; }
.row-ico.red { background: rgba(248, 113, 113, 0.12); color: var(--red); }
.row-ico.amber { background: rgba(251, 191, 36, 0.12); color: var(--amber); }
.row-ico.green { background: rgba(34, 197, 94, 0.12); color: var(--green-lt); }
.row-ico.brand { background: rgba(167, 139, 250, 0.12); color: var(--purple); }
.row-main { flex: 1; min-width: 0; }
.row-main strong { display: block; font-size: 0.98rem; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-sub { display: flex; flex-wrap: wrap; gap: 2px 13px; margin-top: 2px; font-size: 0.8rem; font-weight: 500; color: var(--text-muted); }
.row-side { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* ---------- Reiter & Filter ---------- */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 18px; overflow-x: auto; }
.tab {
    padding: 11px 16px;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    white-space: nowrap;
    transition: 0.16s;
}
.tab:hover { color: var(--text); }
/* border-image malt nur dort, wo eine Rahmenbreite gesetzt ist – hier unten */
.tab.active { color: var(--purple-lt); border-bottom-color: transparent; border-image: var(--grad) 1; }
.tab i { margin-right: 7px; font-size: 0.8rem; }
.tab .n { font-family: var(--mono); font-size: 0.68rem; margin-left: 7px; opacity: 0.65; letter-spacing: 0; }

.filterbar { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.filterbar .search { flex: 1; min-width: 220px; }
.filterbar .select { max-width: 220px; }
.filterbar .check { margin-bottom: 0; }

/* ---------- Warnbanner ---------- */
.alert-band {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    border-radius: 12px;
    margin-bottom: 16px;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    background:
        repeating-linear-gradient(135deg, rgba(248, 113, 113, 0.1) 0 14px, rgba(248, 113, 113, 0.04) 14px 28px);
    border: 1px solid rgba(248, 113, 113, 0.35);
    color: #ffd0d7;
}
.alert-band > i { font-size: 1.2rem; color: var(--red); }
.alert-band small { display: block; margin-top: 2px; font-weight: 500; font-size: 0.78rem; color: #ffa8b4; letter-spacing: 0.3px; text-transform: none; }

/* ---------- Personenakte ---------- */
.cit { display: flex; gap: 22px; padding: 22px; flex-wrap: wrap; }
.cit-photo {
    width: 134px;
    height: 164px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--line-hi);
    display: grid;
    place-items: center;
    overflow: hidden;
    flex-shrink: 0;
    color: var(--text-faint);
    font-size: 2.1rem;
    position: relative;
}
.cit-photo img { width: 100%; height: 100%; object-fit: cover; }
.cit-photo-tag {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.75);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-align: center;
    padding: 4px;
    color: var(--purple-lt);
}
.cit-ident { flex: 1; min-width: 240px; }
.cit-name { font-size: 2.1rem; line-height: 1.1; font-weight: 700; letter-spacing: 1px; }
.cit-sub { display: flex; flex-wrap: wrap; gap: 5px 16px; margin-top: 9px; font-size: 0.88rem; font-weight: 500; color: var(--text-muted); }
.cit-sub .mono { color: var(--text-sec); }
.flagbar { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 15px; }
.flag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 11px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--line-hi);
    color: var(--text-sec);
}
.flag.red { background: rgba(248, 113, 113, 0.1); border-color: rgba(248, 113, 113, 0.3); color: var(--red); }
.flag.amber { background: rgba(251, 191, 36, 0.1); border-color: rgba(251, 191, 36, 0.3); color: var(--amber); }
.flag.violet { background: rgba(192, 132, 252, 0.1); border-color: rgba(192, 132, 252, 0.3); color: var(--purple-lt); }
.flag.brand { background: rgba(167, 139, 250, 0.1); border-color: rgba(167, 139, 250, 0.3); color: var(--purple); }

.dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px 20px; }
.dl > div { min-width: 0; }
.dl dt { font-size: 0.62rem; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--text-faint); margin-bottom: 4px; }
.dl dd { font-size: 0.95rem; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.dl dd.empty-val, .empty-val { color: var(--text-faint); font-weight: 500; }

/* 240px, damit „Führerschein PKW" neben dem Zustand noch ganz dasteht –
   in der schmalen Spalte der Akte wird daraus eine Spalte statt zwei. */
.lic-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; }
.lic {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 13px;
    border-radius: 9px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--line);
    font-size: 0.85rem;
}
.lic-name { flex: 1; min-width: 0; font-weight: 600; color: var(--text-sec); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lic > i { font-size: 0.78rem; }
.lic.valid > i { color: var(--green-lt); }
.lic.expired > i { color: var(--amber); }
.lic.suspended > i { color: var(--red); }
.lic.none > i { color: var(--text-faint); }
.lic.none .lic-name { color: var(--text-faint); }

/* ---------- Vorstrafen ---------- */
.rap-sum {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
    gap: 1px;
    background: var(--line);
    border-top: 2px solid transparent;
    border-image: var(--grad) 1;
}
.sum { background: rgba(12, 10, 22, 0.6); padding: 15px 16px; }
.sum-val { display: block; font-size: 1.6rem; line-height: 1.1; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.sum-val.red { color: var(--red); }
.sum-val.amber { color: var(--amber); }
.sum-lab { display: block; margin-top: 3px; font-size: 0.62rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-faint); }

.cat-dot { display: inline-block; width: 7px; height: 7px; border-radius: 2px; margin-right: 8px; vertical-align: middle; }
.cat-dot.felony { background: var(--red); }
.cat-dot.misdemeanor { background: var(--amber); }
.cat-dot.infraction { background: var(--blue); }
.cat-dot.traffic { background: var(--purple); }

/* ---------- Deliktauswahl im Bericht ---------- */
.charge-box { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 14px; }
.charge-list { max-height: 340px; overflow-y: auto; border: 1px solid var(--line-hi); border-radius: 10px; background: rgba(0, 0, 0, 0.28); }
.charge-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 13px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    color: var(--text-sec);
    transition: 0.14s;
}
.charge-item:last-child { border-bottom: none; }
.charge-item:hover { background: rgba(167, 139, 250, 0.07); color: var(--text); }
.charge-item code { font-family: var(--mono); font-size: 0.68rem; color: var(--text-faint); min-width: 58px; }
.ci-title { flex: 1; min-width: 0; font-size: 0.88rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-cost { font-family: var(--mono); font-size: 0.68rem; color: var(--text-muted); white-space: nowrap; }

.cart { border: 1px solid var(--line-hi); border-radius: 10px; background: rgba(0, 0, 0, 0.28); display: flex; flex-direction: column; }
.cart-rows { flex: 1; max-height: 254px; overflow-y: auto; }
.cart-row { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-bottom: 1px solid var(--line); }
.cart-row:last-child { border-bottom: none; }
.cr-main { flex: 1; min-width: 0; }
.cr-main strong { display: block; font-size: 0.82rem; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-main small { font-family: var(--mono); font-size: 0.64rem; color: var(--text-faint); }
.cart-row .input { width: 52px; min-height: 30px; padding: 2px 6px; font-size: 0.82rem; text-align: center; }
.cart-total { padding: 12px 13px; border-top: 1px solid var(--line-hi); background: rgba(167, 139, 250, 0.04); }
.cart-total div { display: flex; justify-content: space-between; padding: 2px 0; font-size: 0.7rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); }
.cart-total div strong { font-family: var(--mono); font-size: 0.86rem; color: #fff; letter-spacing: 0; }

/* ---------- Zeitstrahl, Funkverkehr, Sachverhalt ---------- */
.tl { display: flex; flex-direction: column; }
.tl-item { display: flex; gap: 13px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 0.9rem; }
.tl-item:last-child { border-bottom: none; }
.tl-time { font-family: var(--mono); font-size: 0.72rem; color: var(--text-faint); flex-shrink: 0; min-width: 48px; }
.tl-text { flex: 1; min-width: 0; color: var(--text-sec); font-weight: 500; overflow-wrap: anywhere; }
.tl-text b { color: var(--text); font-weight: 700; }
.tl-who { font-family: var(--mono); font-size: 0.7rem; color: var(--purple); flex-shrink: 0; }

.narrative {
    position: relative;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: 0.97rem;
    line-height: 1.7;
    font-weight: 500;
    color: var(--text-sec);
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 17px 19px 17px 21px;
}
/* Die Kante links läuft im Hausverlauf von oben nach unten */
.narrative::before {
    content: '';
    position: absolute;
    left: -1px;
    top: -1px;
    bottom: -1px;
    width: 2px;
    border-radius: 10px 0 0 10px;
    background: var(--grad-v);
}

/* ---------- Suche (Overlay) ---------- */
.palette {
    position: fixed;
    inset: 0;
    z-index: 900;
    background: rgba(5, 5, 7, 0.78);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    padding: 10vh 16px 16px;
}
.palette-card {
    max-width: 680px;
    margin: 0 auto;
    background: rgba(18, 16, 26, 0.96);
    border: 1px solid var(--line-strong);
    border-radius: 18px;
    box-shadow: 0 32px 90px rgba(0, 0, 0, 0.7);
    overflow: hidden;
    animation: mdt-pop 0.18s ease-out;
    position: relative;
}
.palette-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--grad);
}
@keyframes mdt-pop { from { opacity: 0; transform: translateY(-12px) scale(0.98); } }
.palette-top { display: flex; align-items: center; gap: 13px; padding: 15px 19px; border-bottom: 1px solid var(--line); }
.palette-top > i { color: var(--purple); }
.palette-top .input { border: none; background: none; padding: 0; min-height: 28px; font-size: 1.05rem; }
.palette-top .input:focus { box-shadow: none; background: none; }
.palette-results { max-height: min(56vh, 460px); overflow-y: auto; }
.pal-group { padding: 12px 19px 5px; font-size: 0.62rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--text-faint); }
.pal-item { display: flex; align-items: center; gap: 13px; width: 100%; padding: 10px 19px; text-align: left; color: inherit; }
.pal-item:hover, .pal-item.sel { background: rgba(167, 139, 250, 0.1); }
.pal-item .row-main strong { font-size: 0.92rem; }
.pal-hint { padding: 28px 19px; text-align: center; color: var(--text-faint); font-size: 0.88rem; font-weight: 600; }

/* Trefferliste der Personensuche in Formularen */
.pp-results {
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    background: rgba(18, 16, 26, 0.98);
    max-height: 234px;
    overflow-y: auto;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6);
}
.pp-results .row-item { padding: 9px 13px; }

/* ---------- Fenster ---------- */
.modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(5, 5, 7, 0.84);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    animation: mdt-fade 0.18s ease;
}
@keyframes mdt-fade { from { opacity: 0; } }
.modal-card {
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
    background: rgba(18, 16, 26, 0.98);
    border: 1px solid var(--line-strong);
    border-radius: 18px;
    box-shadow: 0 32px 90px rgba(0, 0, 0, 0.7);
    overflow: hidden;
    animation: mdt-pop 0.2s ease-out;
    position: relative;
}
.modal-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--grad);
}
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 19px 22px 15px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.modal-head h3 { font-size: 1.1rem; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.modal-body { padding: 22px; overflow-y: auto; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 15px 22px; border-top: 1px solid var(--line); flex-shrink: 0; }

/* ---------- Meldungen ---------- */
.toasts { position: fixed; bottom: 22px; right: 22px; z-index: 2000; display: flex; flex-direction: column; gap: 11px; max-width: calc(100vw - 44px); }
.toast {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 16px;
    min-width: 280px;
    border-radius: 12px;
    background: rgba(18, 16, 26, 0.97);
    border: 1px solid var(--line-strong);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.6);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
    animation: mdt-toast-in 0.22s ease-out;
}
@keyframes mdt-toast-in { from { opacity: 0; transform: translateX(24px); } }
.toast.leaving { animation: mdt-toast-out 0.2s ease-in forwards; }
@keyframes mdt-toast-out { to { opacity: 0; transform: translateX(24px); } }
.toast > i:first-child { font-size: 1rem; margin-top: 2px; flex-shrink: 0; color: var(--text-muted); }
.toast > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.toast.info > i:first-child { color: var(--purple); }
.toast.success { border-color: rgba(34, 197, 94, 0.35); }
.toast.success > i:first-child { color: var(--green-lt); }
.toast.error { border-color: rgba(248, 113, 113, 0.4); }
.toast.error > i:first-child { color: var(--red); }
.toast.warn { border-color: rgba(251, 191, 36, 0.35); }
.toast.warn > i:first-child { color: var(--amber); }
.toast-close { color: var(--text-faint); padding: 0 2px; flex-shrink: 0; font-size: 0.8rem; transition: color 0.15s; }
.toast-close:hover { color: var(--text); }

/* ---------- Bewegung ---------- */
/* Eine neu gezeichnete Ansicht läuft von unten ein, Block für Block kurz
   versetzt. Mehr als sechs Stufen wäre Zappeln, darum hört die Staffelung dort auf. */
.view-enter > * { animation: view-in 0.34s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
.view-enter > *:nth-child(1) { animation-delay: 0.02s; }
.view-enter > *:nth-child(2) { animation-delay: 0.06s; }
.view-enter > *:nth-child(3) { animation-delay: 0.1s; }
.view-enter > *:nth-child(4) { animation-delay: 0.14s; }
.view-enter > *:nth-child(5) { animation-delay: 0.18s; }
.view-enter > *:nth-child(n + 6) { animation-delay: 0.22s; }
@keyframes view-in { from { opacity: 0; transform: translateY(10px); } }

/* Kacheln kommen innerhalb ihrer Reihe noch einmal versetzt */
.view-enter .kpis > * { animation: view-in 0.34s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
.view-enter .kpis > *:nth-child(1) { animation-delay: 0.06s; }
.view-enter .kpis > *:nth-child(2) { animation-delay: 0.1s; }
.view-enter .kpis > *:nth-child(3) { animation-delay: 0.14s; }
.view-enter .kpis > *:nth-child(4) { animation-delay: 0.18s; }
.view-enter .kpis > *:nth-child(5) { animation-delay: 0.22s; }
.view-enter .kpis > *:nth-child(6) { animation-delay: 0.26s; }

/* ---------- Bürgerportal (/portal) ---------- */
/* Dieselben Bauteile wie im Terminal, nur ohne Schiene: oben die Leiste mit den
   Bereichen, darunter eine Spalte. Alles andere (Karten, Zeilen, Felder, Kacheln)
   kommt unverändert von oben. */
.portal-shell {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: var(--bar-h) auto minmax(0, 1fr);
    grid-template-areas: 'bar' 'tabs' 'main';
    min-height: 100vh;
}
.portal-main { grid-area: main; overflow-y: auto; min-width: 0; }
.portal-view { padding: 26px 32px 64px; max-width: 1180px; margin: 0 auto; }
.portal-bar-right { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-shrink: 0; }
.portal-user { display: flex; align-items: center; gap: 9px; font-size: 0.8rem; color: var(--text-sec); min-width: 0; }
.portal-user img { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); }
.portal-tabs {
    grid-area: tabs;
    padding: 0 32px;
    background: rgba(10, 10, 12, 0.6);
    border-bottom: 1px solid var(--line);
}

/* Fahndungen: Lichtbild links, Sache rechts */
.wanted-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 13px; }
.wanted-card {
    display: flex;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.015);
}
.wanted-photo {
    width: 74px;
    height: 92px;
    flex-shrink: 0;
    border-radius: 9px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.04);
    object-fit: cover;
    display: grid;
    place-items: center;
    color: var(--text-faint);
    font-size: 1.3rem;
}
.wanted-body { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.wanted-body strong { font-size: 0.98rem; }
.wanted-body p { font-size: 0.84rem; color: var(--text-sec); overflow-wrap: anywhere; }

/* Fragebogen einer Bewerbung */
.q-list { display: grid; gap: 15px; }
.q-list .field { gap: 6px; }

/* Eigene Fahrzeuge: Papiere und Abmelden rutschen unter die Zeile, sobald neben
   Kennzeichen und Modell kein Platz mehr ist – statt aus der Karte zu laufen */
.vehicle-row { flex-wrap: wrap; row-gap: 10px; }
.vehicle-row .row-main { min-width: 160px; }
.vehicle-row .row-side { flex-wrap: wrap; justify-content: flex-end; margin-left: auto; flex-shrink: 1; max-width: 100%; }
/* Kennzeichen tippt man klein, gespeichert wird groß – der Hinweis bleibt, wie er ist */
.plate-input { text-transform: uppercase; }
.plate-input::placeholder { text-transform: none; }

@media (max-width: 900px) {
    .portal-view { padding: 18px 14px 56px; }
    .portal-tabs { padding: 0 14px; }
}

/* Ein Einsatz der höchsten Dringlichkeit soll ins Auge fallen */
.call.p1:not(.closed)::before { animation: call-alarm 1.6s ease-in-out infinite; }
@keyframes call-alarm {
    0%, 100% { box-shadow: 0 0 10px var(--p1); opacity: 1; }
    50% { box-shadow: 0 0 22px var(--p1); opacity: 0.55; }
}

/* Zeilen heben sich beim Überfahren leicht an */
.row-item, .call { transition: background 0.15s, transform 0.15s; }
a.row-item:hover, a.call:hover { transform: translateX(2px); }

/* Der Notrufknopf atmet, damit man ihn im Ernstfall sofort trifft */
.btn-panic { animation: panic-breathe 3.4s ease-in-out infinite; }
@keyframes panic-breathe {
    0%, 100% { box-shadow: 0 0 0 0 rgba(248, 113, 113, 0); }
    50% { box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.09); }
}

.mdt-mobile { display: none; }

/* Wer weniger Bewegung eingestellt hat, bekommt sie auch nicht */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    .view-enter > *, .view-enter .kpis > * { animation: none; }
}

/* ---------- Schmale Fenster ---------- */
@media (max-width: 1180px) {
    .cols-2, .cols-main { grid-template-columns: minmax(0, 1fr); }
    .charge-box { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
    :root { --rail-w: 0px; --bar-h: 60px; }
    .mdt-shell { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'bar' 'main'; }
    .cmdbar { padding: 0 14px; gap: 12px; }
    .rail {
        position: fixed;
        top: var(--bar-h);
        bottom: 0;
        left: 0;
        width: min(86vw, 320px);
        background: #0d0c11;
        transform: translateX(-104%);
        transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
        z-index: 80;
        box-shadow: 24px 0 60px rgba(0, 0, 0, 0.55);
    }
    .rail.open { transform: none; }
    .rail-backdrop {
        display: block;
        position: fixed;
        inset: var(--bar-h) 0 0;
        background: rgba(4, 4, 6, 0.65);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s;
        z-index: 70;
    }
    .rail-backdrop.open { opacity: 1; pointer-events: auto; }
    .mdt-mobile { display: inline-flex; }
    .cmd-search, .cmd-clock, .guild-name { display: none; }
    .guild-pill { padding-right: 9px; }
    .mdt-wide-only { display: none; }
    .mdt-view { padding: 18px 14px 56px; }
    .cit-photo { width: 100px; height: 124px; font-size: 1.6rem; }
    .cit-name { font-size: 1.6rem; }
    .page-head h1 { font-size: 1.6rem; }
    .home-hero { min-height: 200px; padding: 18px 16px 16px; }
    .mdt-shell[data-agency='doj'] { --agency-pos: 50% 16%; --agency-size: cover; }
    .duty-menu { right: 14px; }
}
@media (max-width: 560px) {
    .duty-pill .duty-text small { display: none; }
    .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .kpi { padding: 13px; }
    .kpi-val { font-size: 1.4rem; }
    .field-row { grid-template-columns: minmax(0, 1fr); }
    .toasts { left: 14px; right: 14px; bottom: 14px; }
    .toast { min-width: 0; }
}

/* ---------- Druck: eine Akte soll auf Papier lesbar sein ---------- */
@media print {
    body.mdt-body::before, .cmdbar, .rail, .palette, .modal, .toasts, .page-tools, .tabs, .filterbar, .card-foot { display: none !important; }
    .mdt-shell { display: block; height: auto; }
    .mdt-view { padding: 0; max-width: none; }
    .home-hero { min-height: 0; padding: 0; border: none; background: none; }
    .home-hero::before, .home-hero::after, .home-hero-tag { display: none; }
    body.mdt-body { background: #fff; color: #000; }
    .card, .narrative, .kpi { border-color: #999; background: #fff; break-inside: avoid; }
    .card-title, .cit-name, .dl dd, .sum-val, .row-main strong, .kpi-val, .page-head h1 { color: #000 !important; }
    .dl dt, .card-sub, .row-sub, .kpi-lab { color: #444 !important; }
    /* Funkcodes auf Papier: Rahmen statt Farbfläche */
    .code-tag { background: none !important; border-color: #999 !important; color: #000 !important; }
    a { color: #000; }
}