/* /Pages/Admin/Dashboard.razor.rz.scp.css */
.connection-dot[b-typtconxe0] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.connection-dot.connected[b-typtconxe0] {
    background: var(--tg-success, #4CAF50);
    box-shadow: 0 0 6px rgba(76, 175, 80, 0.6);
}

.connection-dot.disconnected[b-typtconxe0] {
    background: var(--tg-error, #D9534F);
    box-shadow: 0 0 6px rgba(217, 83, 79, 0.6);
}
/* /Pages/Admin/Statistics.razor.rz.scp.css */
[b-va26jlazz3] .mud-card-content > .mud-typography-h6 {
  overflow-wrap: anywhere;
}
/* /Pages/Home.razor.rz.scp.css */
/* Phase 21 Wave 1 (D-02): Home-Quicklinks -- reduzierte Variante.
   Hover zeigt nur einen subtilen Border-Wechsel, damit die Karten
   ruhiger wirken und der Exception-Feed oben die Aufmerksamkeit behaelt.
   Der aggressive Translate-Hover aus dem Bestand wurde entfernt. */

[b-vjyqgzcqei] .tg-quicklink-card {
    border: 1px solid var(--tg-border);
    background: var(--tg-surface1);
    transition: border-color 0.15s ease;
    height: 100%;
}

[b-vjyqgzcqei] .tg-quicklink-card:hover {
    border-color: var(--tg-surface3);
}

/* Exception-Feed-Karte oben auf der Landing */
[b-vjyqgzcqei] .tg-exception-feed {
    border: 1px solid var(--tg-border);
}
/* /Pages/Infoscreen/Infoscreen.razor.rz.scp.css */
/* === Infoscreen Root === */
.infoscreen-root[b-dl15roc3zc] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--tg-bg, #0F1720);
    color: var(--tg-text, #F3F6F8);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* === Phase 187 Plan 05 (UX187-C / B-3): Fehler-Hinweisbox in der Ecke ===
   Erscheint bei LoadDataAsync-Fehler. Nicht-blockierend, blendet sich beim
   naechsten erfolgreichen Daten-Refresh wieder aus. */
.infoscreen-load-error[b-dl15roc3zc] {
    position: fixed;
    bottom: 16px;
    left: 16px;
    z-index: 1500;
    max-width: 440px;
    padding: 10px 14px;
    border-radius: 8px;
    background: rgba(217, 83, 79, 0.92); /* danger-high mit Transparenz */
    color: #ffffff;
    font-size: 0.9rem;
    line-height: 1.35;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.15);
    pointer-events: none;
}

/* === Main Grid === */
.infoscreen-grid[b-dl15roc3zc] {
    display: grid;
    grid-template-columns: 60% 40%;
    flex: 1;
    overflow: hidden;
}

/* === Map Section === */
.infoscreen-map-section[b-dl15roc3zc] {
    position: relative;
    overflow: hidden;
}

.infoscreen-map[b-dl15roc3zc] {
    width: 100%;
    height: 100%;
    min-height: 400px;
}

/* === Status Section ===
   Phase 282 C (Option B "Sicherer Cap"): overflow-y von auto auf hidden — auf dem
   Wandmonitor/Laptop darf NIE ein Scrollbalken erscheinen. Die seitenweise Rotation
   (InfoscreenPager, _rotationTimer) zeigt alle Meldungen ueber die Zeit; nichts geht
   verloren. Damit die konservativ niedrigen Seitengroessen (Traffic 3 / Allgemeine 2 /
   Bahn 2 / Blitzer 2) auf einer Laptop-Hoehe (~760 px Spalte) sicher passen, ist das
   vertikale Polster (gap/padding/title-margin) zusaetzlich gestrafft. */
.infoscreen-status-section[b-dl15roc3zc] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    overflow: hidden;
}

/* === Panels === */
.infoscreen-panel[b-dl15roc3zc] {
    background: var(--tg-surface2, #1A2430);
    border-radius: 12px;
    padding: 10px 14px;
    border: 1px solid var(--tg-border, #2B3947);
    /* Phase 282 C: Panel selbst clippt — Sicherheitsnetz gegen Rest-Pixel-Ueberlauf
       einer ungewoehnlich hohen Meldung, ohne dass die ganze Spalte scrollt. */
    overflow: hidden;
}

.panel-title[b-dl15roc3zc] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--tg-text-muted, #8B98A5);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

/* === Phase 283-4: Responsiver Fallback fuer schmale Schirme (Handy) ===
   Der Infoscreen ist primaer ein Wand-Monitor (festes 60/40-Grid, kein Scroll —
   Rotation zeigt alles ueber die Zeit). Auf einem schmalen Geraet quetscht dieses
   Grid beide Spalten ineinander ("alles ueberlappt"). Unter 820px Breite daher:
   vertikal stapeln (Karte oben, Panels darunter), Scroll erlauben, Clips aufheben.
   Greift NICHT auf dem Wandmonitor (>820px) — dort bleibt alles unveraendert. */
@media (max-width: 820px) {
    .infoscreen-root[b-dl15roc3zc] {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .infoscreen-grid[b-dl15roc3zc] {
        display: flex;
        flex-direction: column;
        overflow: visible;
    }
    .infoscreen-map-section[b-dl15roc3zc] {
        height: 48vh;
        flex: 0 0 auto;
    }
    .infoscreen-map[b-dl15roc3zc] {
        min-height: 0;
    }
    .infoscreen-status-section[b-dl15roc3zc] {
        overflow: visible;
    }
    .infoscreen-panel[b-dl15roc3zc] {
        overflow: visible;
    }
    /* Top-Lage-Banner darf auf dem Handy umbrechen statt zu klippen. */
    .toplage-text[b-dl15roc3zc] {
        -webkit-line-clamp: 4;
        line-clamp: 4;
    }
}

/* === Clock === */
.clock-panel[b-dl15roc3zc] {
    text-align: center;
    padding: 20px;
}

.clock-time[b-dl15roc3zc] {
    font-size: 3.5rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--tg-text, #F3F6F8);
    line-height: 1;
}

.clock-date[b-dl15roc3zc] {
    font-size: 1.1rem;
    color: var(--tg-text-muted, #8B98A5);
    margin-top: 8px;
}

/* Phase 283 (Problem 5): Globaler Daten-Stand unter der Uhr — dezent, gedaempft,
   klar abgesetzt von der Live-Uhrzeit. */
.infoscreen-data-stand[b-dl15roc3zc] {
    text-align: center;
    font-size: 0.95rem;
    color: var(--tg-text-muted, #8B98A5);
    margin: 2px 0 10px;
    letter-spacing: 0.02em;
}

/* PHASE-201.7.5 Plan 05 D-08: Stats- und Update-Klassen komplett entfernt.
   stats-panel + update-panel sind nicht mehr im Markup; Blitzer-Liste loest die
   Update-Anzeige ab (User-Direktive PAIN-POINTS Cluster E). */

/* PHASE-201.7.5 Plan 05 D-08: Connection-Badge oben rechts im infoscreen-root.
   Position absolute -> liegt ueber dem Grid; Memory project_traffig3_admins_nicht_technikversiert
   verlangt mindestens Size.Medium fuer Icons (im Razor gesetzt). */
.infoscreen-connection-badge[b-dl15roc3zc] {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 100;
    padding: 6px 8px;
    border-radius: 50%;
    background: rgba(15, 23, 32, 0.85);
}

/* PHASE-201.7.5 Plan 05 D-08: Blitzer-Liste mittig in rechter Spalte (analog incidents-panel). */
.infoscreen-blitzer-list[b-dl15roc3zc] {
    padding: 10px 12px; /* Phase 282 C: gestrafft (war 12px) */
    background: rgba(15, 23, 32, 0.6);
    border-radius: 8px;
}

.infoscreen-blitzer-list .infoscreen-panel-title[b-dl15roc3zc] {
    color: var(--tg-text, #f5f5f5);
    margin: 0 0 8px 0;
    font-size: 1.1rem;
}

/* === Dangers Panel === */
.danger-title[b-dl15roc3zc] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--tg-error, #D9534F);
}

.danger-item[b-dl15roc3zc] {
    background: var(--tg-bg, #0F1720);
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 8px;
    border-left: 4px solid var(--tg-text-muted, #8B98A5);
}

.danger-item:last-child[b-dl15roc3zc] {
    margin-bottom: 0;
}

.danger-level-1[b-dl15roc3zc] {
    border-left-color: var(--tg-error, #D9534F);
    background: rgba(217, 83, 79, 0.1);
}

.danger-level-2[b-dl15roc3zc] {
    border-left-color: var(--tg-warning, #D6A43A);
    background: rgba(214, 164, 58, 0.1);
}

.danger-level-3[b-dl15roc3zc] {
    border-left-color: var(--tg-warning-yellow, #eab308);
    background: rgba(234, 179, 8, 0.1);
}

.danger-item-header[b-dl15roc3zc] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.danger-badge-1[b-dl15roc3zc], .danger-badge-2[b-dl15roc3zc], .danger-badge-3[b-dl15roc3zc] {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}

.danger-badge-1[b-dl15roc3zc] { background: var(--tg-error, #D9534F); color: white; }
.danger-badge-2[b-dl15roc3zc] { background: var(--tg-warning, #D6A43A); color: var(--tg-bg, #0F1720); }
.danger-badge-3[b-dl15roc3zc] { background: var(--tg-warning-yellow, #eab308); color: var(--tg-bg, #0F1720); }

.danger-item-keyword[b-dl15roc3zc] {
    font-weight: 600;
    color: var(--tg-text, #F3F6F8);
    font-size: 0.95rem;
}

.danger-item-road[b-dl15roc3zc] {
    color: var(--tg-text-muted, #8B98A5);
    font-size: 0.85rem;
    /* Layout-Break-Guard (SC-3): volle Verortung kann laenger werden — umbrechen
       statt die kompakte Card horizontal aufzublaehen. */
    overflow-wrap: break-word;
}

.danger-item-time[b-dl15roc3zc] {
    color: var(--tg-text-muted, #8B98A5);
    font-size: 0.8rem;
    margin-top: 2px;
}

/* === Phase 201.4.1-I: Aktuelle-Meldungen-Liste (rechte Spalte) === */
.incidents-panel[b-dl15roc3zc] {
    background: var(--tg-surface1, #141D27);
    border: 1px solid var(--tg-border, #2B3947);
    border-radius: 12px;
    padding: 12px;
}

.incidents-panel .panel-title[b-dl15roc3zc] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--tg-text-secondary, #B7C1C9);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.incident-row[b-dl15roc3zc] {
    display: flex;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--tg-surface2, #1A2430);
    align-items: baseline;
}

.incident-row:last-of-type[b-dl15roc3zc] {
    border-bottom: none;
}

.incident-road[b-dl15roc3zc] {
    font-weight: 700;
    color: var(--tg-info, #4C8DDA);
    flex-shrink: 0;
}

.incident-direction[b-dl15roc3zc] {
    color: var(--tg-text-muted, #8B98A5);
    flex-shrink: 0;
    font-size: 0.85rem;
}

.incident-reason[b-dl15roc3zc] {
    color: var(--tg-text-secondary, #B7C1C9);
    /* Phase 213 INFO-03: Multi-Line-Ellipsis statt single-line nowrap.
       line-clamp kappt nach 2 Zeilen; overflow:hidden + text-overflow:
       ellipsis bleiben aktiv. flex-grow:1 erlaubt der Reason-Spalte,
       den freien Platz neben Road/Direction zu fuellen. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1;
}

/* Phase 218 INFO-04 (D-02): Spalten-Gruppe um den Verkehr-Card-Inhalt.
   GENAU ZWEI Kinder vertikal gestapelt: (a) die horizontale Titel-Zeile
   .incident-title-row, (b) die .incident-location-Block-Zeile darunter.
   Stapelt NICHT die drei Titel-Spans flach untereinander. */
.incident-title-group[b-dl15roc3zc] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex-grow: 1;
}

/* Phase 218 INFO-04: horizontale Titel-Zeile — traegt road/direction/reason
   weiterhin auf EINER Zeile (wie heute .incident-row, baseline-aligned).
   min-width:0 ist der Shrink-Guard, damit reason umbrechen statt die Zeile
   breiter druecken kann. road/direction behalten flex-shrink:0, reason
   flex-grow:1 (Werte sitzen bereits auf den Span-Klassen). */
.incident-title-row[b-dl15roc3zc] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

/* Phase 218 INFO-04 (D-02/D-03/D-04): einheitliche gedaempfte Orts-Zeile.
   Vorlage: .danger-item-road. Block-Sibling UNTER der Titel-Zeile.
   KEIN -webkit-line-clamp, KEIN overflow:hidden — die Orts-Zeile wird
   nie gekappt (D-03); bei Laenge bricht sie um. Nur das eine Farb-Token
   --tg-text-muted (UI-SPEC Hard-Color-Rule). */
.incident-location[b-dl15roc3zc] {
    font-size: 0.85rem;
    font-weight: 400;
    line-height: 1.3;
    color: var(--tg-text-muted, #8B98A5);
    margin-top: 4px;
    overflow-wrap: break-word;
    min-width: 0;
}

/* Phase 278 INFB-02: Inline-Danger-Marker-Zeile im incident-row (vor incident-title-group).
   Flex-Row mit Icon + Stufen-Badge; kleiner unterer Abstand zum Titel-Block.
   Farben via --tg-*-Tokens; danger-level-N + danger-badge-N werden WIEDERverwendet (nicht dupliziert). */
.incident-danger-marker[b-dl15roc3zc] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    flex-shrink: 0;
    align-self: flex-start;
}

/* Phase 278 INFB-02: Icon-Farbe folgt der Danger-Stufe via danger-marker-icon-N-Klassen.
   Level-Konvention: 1=Kritisch (stärkste/rot), 3=Mittel (schwächste/gelb). */
.danger-marker-icon-1[b-dl15roc3zc] { color: var(--tg-error, #D9534F); }
.danger-marker-icon-2[b-dl15roc3zc] { color: var(--tg-warning, #D6A43A); }
.danger-marker-icon-3[b-dl15roc3zc] { color: var(--tg-warning-yellow, #eab308); }

/* Phase 278 INFB-04: Zusatz-Detailzeile (Short / Detail) unterhalb von incident-location.
   Stil: --tg-text-muted, 0.85rem, line-height 1.3 (analog .danger-item-road).
   Wandschrift-Boost (.incidents-panel .incident-detail-line) für Lesbarkeit aus Distanz. */
.incident-detail-line[b-dl15roc3zc] {
    font-size: 0.85rem;
    color: var(--tg-text-muted, #8B98A5);
    line-height: 1.3;
    margin-top: 3px;
    overflow-wrap: break-word;
    min-width: 0;
}

/* Phase 242 INFO-05 wall-font-boost für incident-detail-line analog incident-location. */
.incidents-panel .incident-detail-line[b-dl15roc3zc] {
    font-size: 1rem;
}

/* Phase 278 INFB-02: incident-row und bahn-row mit danger-level-N erhalten left-border
   via bestehende danger-level-N-Klassen; zusätzlich padding-left für den Rand-Abstand
   zum Content. Alle drei Panels (Verkehr/Allgemeine/Bahn) erhalten identischen Streifen.
   Nur wenn danger-level-N vorhanden — kein Padding auf normalen incident-rows/bahn-rows. */
.incident-row.danger-level-1[b-dl15roc3zc],
.incident-row.danger-level-2[b-dl15roc3zc],
.incident-row.danger-level-3[b-dl15roc3zc],
.bahn-row.danger-level-1[b-dl15roc3zc],
.bahn-row.danger-level-2[b-dl15roc3zc],
.bahn-row.danger-level-3[b-dl15roc3zc] {
    padding-left: 10px;
    border-left-width: 4px;
    border-left-style: solid;
    border-radius: 4px;
    flex-direction: column;
    align-items: flex-start;
}

.incident-more[b-dl15roc3zc] {
    font-size: 0.85rem;
    color: var(--tg-text-muted, #8B98A5);
    padding-top: 6px;
    font-style: italic;
}

/* Phase 242 INFO-05 (D-02): Wand-Anzeige aus Distanz lesbar — die rotierenden
   Listen-Eintraege (Verkehr/Bahn) bekommen groessere Schrift. Die fixen Elemente
   (Uhr/Status/Gefahren) bleiben unangetastet; nur die drei rotierenden Panels
   werden angehoben. Overflow-/Clamp-Guards der Bestandsregeln bleiben aktiv. */
.incidents-panel .incident-road[b-dl15roc3zc] {
    font-size: 1.25rem;
}

.incidents-panel .incident-reason[b-dl15roc3zc] {
    font-size: 1.15rem;
}

.incidents-panel .incident-direction[b-dl15roc3zc] {
    font-size: 1.05rem;
}

.incidents-panel .incident-location[b-dl15roc3zc] {
    font-size: 1rem;
}

.bahn-panel .bahn-text[b-dl15roc3zc] {
    font-size: 1.15rem !important;
}

.infoscreen-blitzer-list .mud-typography-h6[b-dl15roc3zc] {
    font-size: 1.3rem !important;
}

/* Phase 263 D-04 S12: Globaler Seiten-Indikator am Ende der rechten Spalte.
   Dezent, gedaempft — nur sichtbar wenn PageCount > 1 (Render-Gate im Razor).
   font-size: 1.5em damit er aus Distanz lesbar ist (S12-Anforderung). */
/* Phase 283 (Problem 2): EIN ruhiger Punkt-Indikator fuer den gesamten Rotations-Zyklus.
   Ersetzt die frueheren Text-Zaehler (.infoscreen-global-page-indicator + .panel-page-indicator).
   Dezent, mittig, nur sichtbar wenn rotationPages > 1 (Render-Gate im Razor). */
.infoscreen-rotation-dots[b-dl15roc3zc] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 12px 0 6px;
}

.rotation-dot[b-dl15roc3zc] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tg-text-muted, #8B98A5);
    opacity: 0.35;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.rotation-dot-active[b-dl15roc3zc] {
    opacity: 1;
    transform: scale(1.35);
    background: var(--tg-info, #4C8DDA);
}

/* === Phase 283 (Problem 3): Top-Lage-Banner über der Karte === */
.infoscreen-toplage[b-dl15roc3zc] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 26px;
    margin: 0 0 14px;
    border-radius: 10px;
    color: #fff;
    min-width: 0;
}

.toplage-icon[b-dl15roc3zc] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.toplage-icon[b-dl15roc3zc]  svg,
.toplage-icon svg[b-dl15roc3zc] {
    width: 2.4rem;
    height: 2.4rem;
    color: #fff;
}

.toplage-label[b-dl15roc3zc] {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    flex-shrink: 0;
    opacity: 0.95;
}

.toplage-road[b-dl15roc3zc] {
    font-size: 1.6rem;
    font-weight: 800;
    flex-shrink: 0;
}

.toplage-text[b-dl15roc3zc] {
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.2;
    min-width: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Stufe 2 (Hoch, z.B. Vollsperrung): ruhiges, sattes Rot. */
.toplage-level-2[b-dl15roc3zc] {
    background: #B3261E;
    box-shadow: 0 2px 14px rgba(179, 38, 30, 0.45);
}

/* Stufe 1 (Kritisch, z.B. Geisterfahrer): Rot→Pink-Verlauf + ruhig pulsierender Schein,
   dazu ein langsam blinkendes Warn-Icon. Bewusst RUHIG (kein Strobe) — Studio/Foyer. */
.toplage-level-1[b-dl15roc3zc] {
    background: linear-gradient(90deg, #C1121F 0%, #D6336C 100%);
    animation: toplage-pulse-b-dl15roc3zc 1.8s ease-in-out infinite;
}

.toplage-level-1 .toplage-icon[b-dl15roc3zc] {
    animation: toplage-blink-b-dl15roc3zc 1.2s steps(1, end) infinite;
}

@keyframes toplage-pulse-b-dl15roc3zc {
    0%, 100% { box-shadow: 0 0 0 rgba(214, 51, 108, 0.0); }
    50%      { box-shadow: 0 0 26px rgba(214, 51, 108, 0.65); }
}

@keyframes toplage-blink-b-dl15roc3zc {
    0%, 60%   { opacity: 1; }
    61%, 100% { opacity: 0.2; }
}

/* Reduced-Motion-Respekt: Animationen abschalten, Farbe/Verlauf bleiben. */
@media (prefers-reduced-motion: reduce) {
    .toplage-level-1[b-dl15roc3zc],
    .toplage-level-1 .toplage-icon[b-dl15roc3zc] {
        animation: none;
    }
}

/* Phase 242 INFO-06 (D-04b): Blitzer.de-Partner-Attribution im Blitzer-Panel —
   lesbarer Text + responsives Logo (~48px Hoehe), nicht dominierend. Nur Infoscreen. */
.blitzer-partner-attribution[b-dl15roc3zc] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--tg-surface2, #1A2430);
}

.blitzer-partner-text[b-dl15roc3zc] {
    font-size: 1rem;
    color: var(--tg-text-secondary, #B7C1C9);
}

.blitzer-partner-logo[b-dl15roc3zc] {
    max-height: 48px;
    width: auto;
    object-fit: contain;
}

/* PHASE-201.7.5 Plan 05 D-08: connection-panel + connection-status + connection-dot
   entfernt -- ersetzt durch .infoscreen-connection-badge oben (Top-Level im infoscreen-root). */

/* === Ticker === */
.infoscreen-ticker[b-dl15roc3zc] {
    background: var(--tg-surface1, #141D27);
    border-top: 1px solid var(--tg-border, #2B3947);
    padding: 10px 0;
    overflow: hidden;
    white-space: nowrap;
    height: 44px;
    flex-shrink: 0;
}

/* M-U11: Ticker-Dauer wird dynamisch per inline-style gesetzt (animation-duration via Razor) */
/* Phase 201.4.1-J: Defense-in-Depth fuer Marquee-Animation. Live-Probe 2026-05-09 hat bestaetigt
   dass die Animation aktiv laeuft (animation-play-state=running, transform-translate aktiv) — der
   urspruengliche Smoke-09-Befund war veraltet. animation-fill-mode: both haelt den Start-/End-
   State auch dann, wenn Re-Render via StateHasChanged die Animation kurz neu startet, sodass kein
   "eingefrorener nullter Frame" sichtbar wird. @keyframes ticker-scroll bleibt unangetastet. */
.ticker-content[b-dl15roc3zc] {
    display: inline-block;
    animation: ticker-scroll-b-dl15roc3zc linear infinite;
    animation-fill-mode: both;
    padding-left: 100%;
}

.ticker-item[b-dl15roc3zc] {
    display: inline;
    padding: 0 8px;
}

.ticker-road[b-dl15roc3zc] {
    font-weight: 700;
    color: var(--tg-info, #4C8DDA);
}

.ticker-direction[b-dl15roc3zc] {
    color: var(--tg-text-muted, #8B98A5);
    margin: 0 4px;
}

.ticker-desc[b-dl15roc3zc] {
    color: var(--tg-text-secondary, #B7C1C9);
}

.ticker-separator[b-dl15roc3zc] {
    color: var(--tg-border, #2B3947);
    margin: 0 12px;
    font-weight: 700;
}

@keyframes ticker-scroll-b-dl15roc3zc {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

/* === Danger Alert Overlay === */
.danger-overlay[b-dl15roc3zc] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    animation: danger-pulse-b-dl15roc3zc 1s ease-in-out infinite;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

@keyframes danger-pulse-b-dl15roc3zc {
    0%, 100% { background-color: rgba(220, 38, 38, 0.9); }
    50% { background-color: rgba(220, 38, 38, 0.6); }
}

.danger-content[b-dl15roc3zc] {
    text-align: center;
    max-width: 800px;
    padding: 40px;
}

.danger-icon[b-dl15roc3zc] {
    margin-bottom: 20px;
    animation: danger-icon-bounce-b-dl15roc3zc 0.6s ease-in-out infinite alternate;
}

@keyframes danger-icon-bounce-b-dl15roc3zc {
    from { transform: scale(1); }
    to { transform: scale(1.15); }
}

.danger-level[b-dl15roc3zc] {
    font-size: 1.5rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 12px;
}

.danger-keyword[b-dl15roc3zc] {
    font-size: 3.5rem;
    font-weight: 800;
    color: white;
    text-transform: uppercase;
    line-height: 1.1;
    margin-bottom: 16px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.danger-road[b-dl15roc3zc] {
    font-size: 2rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 12px;
}

.danger-description[b-dl15roc3zc] {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.7);
    max-width: 600px;
    margin: 0 auto;
}

.danger-acknowledge-btn[b-dl15roc3zc] {
    font-size: 1.2rem !important;
    padding: 12px 48px !important;
    border-radius: 12px !important;
}

/* M-U12: Reduzierte Animationen fuer Barrierefreiheit */
@media (prefers-reduced-motion: reduce) {
    .danger-overlay[b-dl15roc3zc] {
        animation: none;
        background-color: rgba(220, 38, 38, 0.9);
    }

    .danger-icon[b-dl15roc3zc] {
        animation: none;
    }

    .ticker-content[b-dl15roc3zc] {
        animation: none;
        padding-left: 0;
    }
}

/* === M-U14: Audio Activation Overlay === */
.audio-activation-overlay[b-dl15roc3zc] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9998;
    background: rgba(15, 23, 32, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(4px);
}

.audio-activation-content[b-dl15roc3zc] {
    text-align: center;
    padding: 40px;
}

.audio-activation-text[b-dl15roc3zc] {
    font-size: 1.5rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-top: 16px;
}

.audio-activation-subtext[b-dl15roc3zc] {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 8px;
}

/* === Responsive === */
@media (max-width: 1024px) {
    .infoscreen-grid[b-dl15roc3zc] {
        grid-template-columns: 1fr;
        grid-template-rows: 50% 50%;
    }

    .clock-time[b-dl15roc3zc] {
        font-size: 2.5rem;
    }

    /* PHASE-201.7.5 Plan 05 D-08: Connection-Badge bleibt sichtbar oben rechts auch im Mobile-Layout. */
    .infoscreen-connection-badge[b-dl15roc3zc] {
        top: 8px;
        right: 8px;
    }

    .danger-keyword[b-dl15roc3zc] {
        font-size: 2.5rem;
    }

    .danger-road[b-dl15roc3zc] {
        font-size: 1.5rem;
    }
}
/* /Pages/ReadMode/ReadMode.razor.rz.scp.css */
.read-mode-container[b-z77xxmwpme] {
    background: var(--tg-bg, #0F1720);
    min-height: 100vh;
    width: 100%;

    /* Phase 201.5 Plan 05 (D-08, P-8):
     * --traffig-read-font-scale wird vom Toolbar-S/M/L-Button per inline-Style
     * neu gesetzt (1.0 / 1.2 / 1.4). Default 1.2 = Medium.
     * Naming-Schema konsistent mit den existierenden --traffig-read-text-Vars
     * (siehe ReadMode.razor inline styles). */
    --traffig-read-font-scale: 1.2;
}

/* Phase 201.5 Plan 05 (D-08): Schriftgröße-Multiplikator wirkt auf alle
 * Cards, Card-Texte und Item-Bezeichner innerhalb des Lesemodus.
 * `calc()` mit Fallback (1.2) garantiert, dass die Anzeige auch bei
 * fehlender CSS-Variable nicht kollabiert.
 * Wir wirken bewusst auf die typografisch tragenden MudText-Slots in den
 * Cards (h6, body1, body2) — nicht auf den fixen Header oder die Toolbar
 * (sticky-Layout darf nicht "atmen"). */
.read-mode-container .mud-card .mud-typography-h6[b-z77xxmwpme] {
    font-size: calc(1.3rem * var(--traffig-read-font-scale, 1.2));
    line-height: calc(1.3 * var(--traffig-read-font-scale, 1.2));
}
.read-mode-container .mud-card .mud-typography-body1[b-z77xxmwpme] {
    font-size: calc(1.1rem * var(--traffig-read-font-scale, 1.2));
    line-height: calc(1.4 * var(--traffig-read-font-scale, 1.2));
}
.read-mode-container .mud-card .mud-typography-body2[b-z77xxmwpme] {
    font-size: calc(0.95rem * var(--traffig-read-font-scale, 1.2));
    line-height: calc(1.4 * var(--traffig-read-font-scale, 1.2));
}

.read-mode-header[b-z77xxmwpme] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--tg-surface1, #141D27);
    border-bottom: 1px solid var(--tg-border, #2B3947);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.read-mode-card[b-z77xxmwpme] {
    background: var(--tg-surface2, #1A2430) !important;
    border-radius: 12px !important;
    border: 1px solid var(--tg-border, #2B3947);
    transition: opacity 0.3s ease;
}

.read-mode-hidden[b-z77xxmwpme] {
    opacity: 0.3;
}

.read-mode-new[b-z77xxmwpme] {
    border-left: 4px solid var(--tg-warning, #D6A43A) !important;
}

[b-z77xxmwpme] .mud-card {
    background: var(--tg-surface2, #1A2430);
    color: var(--tg-text, #F3F6F8);
}

/* ============================================================
 * Phase 180: Lesemodus Freeze + Eingangskorb
 * ============================================================
 * Sticky-Block direkt unter .read-mode-header (D-01).
 * Wiederverwendung bestehender Tokens (--tg-warning, --tg-surface*).
 * Keyframe-Definition "pulse" lebt global in wwwroot/css/app.css:28-32 —
 * hier nur Modifier-Class mit iteration-count 1 fuer Einmal-Puls (D-03).
 */

.read-mode-queue-block[b-z77xxmwpme] {
    position: sticky;
    top: 72px;                                          /* direkt unter .read-mode-header */
    z-index: 99;                                        /* eins unter Header (dessen z-index: 100) */
    background: var(--tg-surface1, #141D27);
    border-bottom: 2px solid var(--tg-warning, #D6A43A);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    padding: 12px 16px;
    margin-bottom: 8px;
}

.read-mode-queue-item[b-z77xxmwpme] {
    background: var(--tg-surface2, #1A2430) !important;
    border-left: 4px solid var(--tg-warning, #D6A43A);
    border-radius: 8px;
    transition: opacity 0.3s ease;
}

.read-mode-queue-item-deferred[b-z77xxmwpme] {
    opacity: 0.5;                                       /* D-04: Richtwert 0.5, Buttons bleiben klickbar */
}

.read-mode-queue-item-changed[b-z77xxmwpme] {
    border-left-color: var(--tg-info, #6BB6FF);         /* "geaendert" visuell vs. "neu" */
}

.read-mode-queue-badge-pulse[b-z77xxmwpme] {
    animation: pulse 1s ease-in-out 1;                  /* D-03: EINMALIG (iteration-count: 1), kein Dauer-Puls */
}

/* ============================================================
 * Phase 201.4.1-H (User-Decision D2): Lesemodus-Blitzer-Block
 * ============================================================
 * Visuelle Unterscheidung zwischen Verkehrsmeldungs-Cards und Blitzer-Cards
 * via gelbem Akzent-Border (analog Verkehrsfunk-Konvention). Kein eigener
 * Hintergrund-Token, weil --tg-surface2 bereits den Card-Look traegt.
 * Padding kompakter als Verkehrsmeldungs-Cards, weil Blitzer-Items nur
 * eine Textzeile haben. */
.readmode-blitzer-card[b-z77xxmwpme] {
    background: var(--tg-surface2, #1A2430) !important;
    border-left: 3px solid var(--traffig-blitzer-accent, #fbbf24);
    border-radius: 8px;
}
.readmode-blitzer-card .mud-card-content[b-z77xxmwpme] {
    padding: 8px 16px;
}
/* /Pages/ReadMode/ReadModeQuickPinPopover.razor.rz.scp.css */
/* Phase 189-06 (READPIN189-A, D-28..D-32):
   Scoped CSS fuer ReadModeQuickPinPopover. */

.tg-readmode-quickpin-wrapper[b-n6fxves5ze] {
    /* MudPopover-Pitfall (Phase-190-Plan-04 Pitfall 4): position:relative-Wrapper noetig,
       sonst rendert MudPopover am Document-Body statt relativ zum Anker.
       Der Inline-style auf dem Element setzt das auch — diese Datei haelt
       das CSS zusammen + erlaubt zukuenftige Erweiterungen ohne Inline-Style-Drift. */
    min-width: 260px;
}
/* /Pages/Redaktion/BlitzerEditor.razor.rz.scp.css */
.edit-form[b-skrxc91hwx] {
    padding: 4px;
}

.edit-readonly-info[b-skrxc91hwx] {
    display: flex;
    align-items: center;
    font-size: 0.85rem;
    color: var(--tg-text-secondary, #B7C1C9);
    padding: 4px 0;
}
/* /Pages/Redaktion/BroadcastPanel.razor.rz.scp.css */
.readmode-layout[b-82jweipu9g] {
    background: var(--tg-bg, #0F1720);
    min-height: calc(100vh - 64px - 57px);
    width: 100%;
}

[b-82jweipu9g] .broadcast-card {
    background: var(--tg-surface2, #1A2430) !important;
    border-radius: 12px !important;
    border: 1px solid var(--tg-border, #2B3947);
    transition: opacity 0.3s ease;
}

[b-82jweipu9g] .broadcast-hidden {
    opacity: 0.3;
}

[b-82jweipu9g] .broadcast-new {
    border-right: 4px solid var(--tg-warning, #D6A43A) !important;
}

/* ============================================================
 * Phase 181 Plan 05: Redaktion Broadcast-Eingangskorb
 * ============================================================
 * Port aus Pages/ReadMode/ReadMode.razor.css (Phase 180),
 * Klassen-Prefix broadcast-queue-* (RESEARCH Korrektur 2 —
 * semantisch passend zur Live-Redaktion, NICHT der Lesemodus-Prefix).
 * CSS-Tokens (--tg-warning, --tg-info, --tg-surface*) aus
 * wwwroot/css/app.css wiederverwendet.
 * Keyframe-Definition "pulse" lebt global in wwwroot/css/app.css —
 * hier nur Modifier-Class mit iteration-count 1 fuer Einmal-Puls (D-03).
 * top: 72px uebernimmt ReadMode-Wert; Visual-Polish ist Phase-185-Kandidat.
 */

.broadcast-queue-block[b-82jweipu9g] {
    position: sticky;
    top: 72px;
    z-index: 99;
    background: var(--tg-surface1, #141D27);
    border-bottom: 2px solid var(--tg-warning, #D6A43A);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    padding: 12px 16px;
    margin-bottom: 8px;
}

.broadcast-queue-item[b-82jweipu9g] {
    background: var(--tg-surface2, #1A2430) !important;
    border-left: 4px solid var(--tg-warning, #D6A43A);
    border-radius: 8px;
    transition: opacity 0.3s ease;
}

.broadcast-queue-item-deferred[b-82jweipu9g] {
    opacity: 0.5;
}

.broadcast-queue-item-changed[b-82jweipu9g] {
    border-left-color: var(--tg-info, #6BB6FF);
}

.broadcast-queue-badge-pulse[b-82jweipu9g] {
    animation: pulse 1s ease-in-out 1;
}
/* /Pages/Redaktion/BulkActionBar.razor.rz.scp.css */
.bulk-action-bar[b-lqjfgox3xz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 20px;
    background: var(--tg-surface1, #141D27);
    border-bottom: 1px solid var(--tg-border, #333);
    position: sticky;
    top: 0;
    z-index: 199;
}

@media (max-width: 960px) {
    .bulk-action-bar[b-lqjfgox3xz] {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* /Pages/Redaktion/MeldungsEditor.razor.rz.scp.css */
.edit-form[b-rs35xpewds] {
    padding: 4px;
}

.edit-coords[b-rs35xpewds] {
    display: flex;
    align-items: center;
    font-size: 0.82rem;
    color: var(--tg-text-muted, #8B98A5);
    background: var(--tg-surface1, #141D27);
    padding: 6px 10px;
    border-radius: 12px;
}
/* /Pages/Redaktion/MeldungsKarte.razor.rz.scp.css */
.editor-map-panel[b-6q53h6y4sd] {
    position: relative;
    height: 100%;
    border-right: 1px solid var(--tg-border, #2B3947);
}

.redaktion-map[b-6q53h6y4sd] {
    width: 100%;
    height: 100%;
}

/* Phase 201.7.6a D-05 Pflicht 2 (UI-Attribution Map-View, defensiv):
   Footer-Zeile mit Quellen-Namensnennung -- dezent, am unteren Karten-Rand */
.redaktion-map-attribution[b-6q53h6y4sd] {
    position: absolute;
    bottom: 4px;
    right: 8px;
    z-index: 500;
    background: rgba(255, 255, 255, 0.75);
    color: var(--tg-text, #1A1A1A);
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 3px;
    pointer-events: none;
}
/* /Pages/Redaktion/MeldungsListe.razor.rz.scp.css */
.item-card[b-rzilsco6zw] {
    background: var(--tg-surface3, #222E3B);
    border: 1px solid var(--tg-border, #2B3947);
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.item-card:hover[b-rzilsco6zw] {
    background: rgba(141, 187, 63, 0.08);
    border-color: var(--tg-primary, #8DBB3F);
    box-shadow: 0 1px 4px rgba(141, 187, 63, 0.15);
}

.item-card.item-inactive[b-rzilsco6zw] {
    opacity: 0.5;
    border-left: 3px solid var(--tg-text-muted, #8B98A5);
}

.item-card.item-blitzer[b-rzilsco6zw] {
    border-left: 3px solid var(--tg-info, #4C8DDA);
}

.item-card.item-editing[b-rzilsco6zw] {
    border-color: var(--tg-primary, #8DBB3F);
    box-shadow: 0 0 0 2px rgba(141, 187, 63, 0.2);
}

.item-card.item-selected[b-rzilsco6zw] {
    background: rgba(141, 187, 63, 0.08);
    border-color: var(--tg-primary, #8DBB3F);
}

.item-card-header[b-rzilsco6zw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.item-card-title[b-rzilsco6zw] {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    color: var(--tg-text, #F3F6F8);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.item-direction[b-rzilsco6zw] {
    color: var(--tg-text-muted, #8B98A5);
    margin-left: 6px;
    font-weight: 400;
    font-size: 0.85rem;
}

.item-card-actions[b-rzilsco6zw] {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.item-card-desc[b-rzilsco6zw] {
    color: var(--tg-text-secondary, #B7C1C9);
    font-size: 0.82rem;
    margin-top: 4px;
    line-height: 1.4;
}
/* /Pages/Redaktion/Redaktion.razor.rz.scp.css */
/* ===== Phase 188: REDAKTION-LAYOUT (40/60) =====
   Plan 05 ersetzt das alte Editor-Layout (60/40) durch das neue Redaktions-Layout (40/60).
   Liste links 40% / Detail-Panel rechts 60% — UI-SPEC §"Layout-Kontrakt".
*/

.redaktion-layout[b-uyptv1z423] {
    display: grid;
    grid-template-columns: 40% 60%;
    height: calc(100vh - 64px);   /* viewport minus appbar */
    overflow: hidden;
}

/* Phase 201.4.1-G: Wenn nichts selektiert ist, Liste auf Vollbreite + Detail-Panel verborgen.
   Pattern-Vorbild: Mobile-Breakpoint Z. 127-128 (gleiche 1fr-Logik). */
.redaktion-layout-empty[b-uyptv1z423] {
    display: grid;
    grid-template-columns: 1fr;
    height: calc(100vh - 64px);
    overflow: hidden;
}

.redaktion-layout-empty .redaktion-detail-panel[b-uyptv1z423] {
    display: none;
}

/* Phase 193-06 (UI-SPEC §3): Wrapper-Spalte fuer Toolbar + Liste in der 40%-Grid-Spalte.
   Innen vertikales Stack-Layout (Toolbar fixed-Hoehe, Liste flex-1 mit Overflow). */
.redaktion-list-column[b-uyptv1z423] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-right: 1px solid var(--tg-border);
}

.redaktion-list-column > .redaktion-toolbar[b-uyptv1z423] {
    flex: 0 0 auto;
}

.redaktion-list-column > .redaktion-list[b-uyptv1z423] {
    flex: 1 1 auto;
    border-right: none; /* Border ist jetzt am Wrapper, nicht an der Liste */
}

.redaktion-list[b-uyptv1z423] {
    overflow-y: auto;
    border-right: 1px solid var(--tg-border);
}

.redaktion-detail-panel[b-uyptv1z423] {
    overflow-y: auto;
    background: var(--tg-surface2);
}

[b-uyptv1z423] .redaktion-sektion-header {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--tg-bg);
    padding: 12px 16px 8px 16px;
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--tg-text);
    border-bottom: 1px solid var(--tg-border);
}

[b-uyptv1z423] .sektion-counter {
    font-weight: 400;
    color: var(--tg-text-muted);
    font-size: 0.875rem;
    margin-left: 4px;
}

[b-uyptv1z423] .redaktion-zeile {
    border-bottom: 1px solid var(--tg-border);
    transition: background-color 0.15s ease;
}

[b-uyptv1z423] .redaktion-zeile:hover {
    background: var(--tg-surface2);
}

[b-uyptv1z423] .redaktion-zeile-selected {
    background: var(--tg-surface2);
    border-left: 3px solid var(--tg-primary);
}

/* ===== Phase 193-06 (UI-SPEC §4, D-05): Reduced-Opacity-Render fuer ausgeblendete
   Zeilen bei Toggle "KI-Entscheidungen anzeigen" ON. Etabliertes Pattern aus
   MeldungsListe.razor.css .item-inactive (opacity: 0.5). Kein Hoehen-Kollaps —
   Phase-188-44px-Vertrag bleibt erhalten. ===== */

[b-uyptv1z423] .redaktion-zeile-ki-hidden {
    opacity: 0.5;
    font-style: italic;
    border-left: 3px solid var(--tg-info);
    background: var(--tg-surface2);
}

[b-uyptv1z423] .redaktion-zeile-ki-hidden::after {
    content: " (KI: ausgeblendet)";
    color: var(--tg-text-muted);
    font-size: 0.75rem;
    font-style: normal;
    margin-left: 8px;
    flex-shrink: 0;
}

/* ===== Phase 193-06 (UI-SPEC §3): Toolbar-Block oben in der 40%-Spalte mit
   MudSwitch "KI-Entscheidungen anzeigen". Border-bottom trennt Toolbar von Liste. ===== */

[b-uyptv1z423] .redaktion-toolbar {
    padding: 8px 16px;
    border-bottom: 1px solid var(--tg-border);
}

/* ==================== PANEL (preserved from legacy CSS — used by RedaktionsDetailPanel-internal markup) ==================== */

[b-uyptv1z423] .panel-header {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: var(--tg-surface1, #141D27);
    border-bottom: 1px solid var(--tg-border, #2B3947);
    min-height: 52px;
}

[b-uyptv1z423] .panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}

/* ==================== RESPONSIVE ==================== */

@media (max-width: 960px) {
    .redaktion-layout[b-uyptv1z423] {
        grid-template-columns: 1fr;
        grid-template-rows: 40vh 1fr;
    }
}
/* /Pages/Redaktion/RedaktionToolbar.razor.rz.scp.css */
.redaktion-toolbar[b-21s61ylugz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 20px;
    background: var(--tg-surface1, #141D27);
    border-bottom: 1px solid var(--tg-border, #2B3947);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    position: sticky;
    top: 0;
    z-index: 200;
}

@media (max-width: 960px) {
    .redaktion-toolbar[b-21s61ylugz] {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* /Shared/LicenseBadge.razor.rz.scp.css */
/* Phase 189-05 (LIC189-A, D-22..D-26) — License-Info AppBar-Badge styles.

   - .tg-license-dot: 10px-Status-Punkt vor dem Kundennamen.
     - Gelb (warning) bei Warning-Level (DaysRemaining < 30 vor Ablauf).
     - Rot (lockdown) bei Lockdown/Expired.
     - Grun gibt es bewusst NICHT (D-25 — Header bleibt clean bei OK/Grace).
   - .tg-license-badge: kompakter AppBar-Slot, kein TextTransform/LetterSpacing.
   - Mobile-Layout (Discretion): unter 600px nur Status-Punkt ohne Text. */

.tg-license-badge[b-ebjhdiruk6] {
    text-transform: none;
    letter-spacing: 0;
    min-width: 0;
    padding: 4px 12px;
}

.tg-license-dot[b-ebjhdiruk6] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.tg-license-dot.warning[b-ebjhdiruk6] {
    background-color: var(--mud-palette-warning, #ffb300);
}

.tg-license-dot.lockdown[b-ebjhdiruk6] {
    background-color: var(--mud-palette-error, #d32f2f);
}

.tg-license-text[b-ebjhdiruk6] {
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

@media (max-width: 600px) {
    .tg-license-text[b-ebjhdiruk6] {
        display: none;
    }

    .tg-license-dot[b-ebjhdiruk6] {
        margin-right: 0;
    }
}
/* /Shared/MapPicker.razor.rz.scp.css */
.map-picker-container[b-3mm1crvrk2] {
    position: relative;
    width: 100%;
    height: 400px;
    border: 1px solid var(--tg-border, #2B3947);
    border-radius: 12px;
    overflow: hidden;
}

.map-picker-map[b-3mm1crvrk2] {
    width: 100%;
    height: 100%;
}

.map-picker-coords[b-3mm1crvrk2] {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(20, 29, 39, 0.95);
    color: var(--tg-text, #F3F6F8);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    display: flex;
    gap: 16px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    z-index: 1000;
}