/* ============================================================
MONTI PLAN — Design System Foundation
Version 1.0 · 05.05.2026
Reihenfolge im HTML:
1. Google Fonts (im )
2. design-system.css ← diese Datei
3. app.css
============================================================ */
/* ============================================================
GOOGLE FONTS — Plus Jakarta Sans
Im einbinden:
============================================================ */
/* ============================================================
1. COLOR TOKENS — Light Mode (Default)
============================================================ */
:root {
/* ── MONTI Brand ── */
--monti-blue: #008CC4; /* HKS 47 — Primärfarbe */
--monti-blue-dark: #006a96; /* Hover / Aktiv */
--monti-blue-light: #33aad4; /* Akzent / Highlight */
--monti-blue-subtle: #e6f6fc; /* Hintergrund-Tint */
/* ── Neutrals ── */
--color-navy: #0f2235; /* Tiefes Navy für Header */
--color-navy-mid: #1a3a5c; /* Mid Navy */
--color-navy-light: #2a527a; /* Helles Navy */
/* ── Surface & Background ── */
--bg: #f0f4f8;
--bg-subtle: #e8eef4;
--surface: #ffffff;
--surface-raised: #ffffff;
--surface-overlay: rgba(255,255,255,0.95);
/* ── Text ── */
--text: #0f1e2d;
--text-secondary: #3d5166;
--text-tertiary: #5a6a7a;
--text-disabled: #9aaabb;
--text-inverse: #ffffff;
--muted: #5a6a7a; /* Alias für Legacy */
/* ── Border ── */
--border: #dde3ea;
--border-strong: #b0bec8;
--border-focus: var(--monti-blue);
/* ── Semantic Colors ── */
--ok: #1d9e75;
--ok-bg: #e1f5ee;
--ok-border: #a7e3cf;
--warn: #c07a00;
--warn-bg: #fef3d0;
--warn-border: #f5d87a;
--danger: #c0392b;
--danger-bg: #fdecea;
--danger-border: #f5b7b1;
--info: #0077a8;
--info-bg: #e6f4fb;
--info-border: #90d0ea;
/* ── Interactive ── */
--blue: var(--monti-blue); /* Legacy alias */
--blue-lt: var(--monti-blue-light);
/* ── Layout ── */
--sidebar-w: 220px;
--header-h: 52px;
--navy: var(--color-navy-mid); /* Legacy alias */
--navy-lt: var(--color-navy-light);
/* ── Shadows ── */
--shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
--shadow-md: 0 4px 12px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.06);
--shadow-lg: 0 12px 32px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.06);
--shadow-nav: 0 1px 8px rgba(0,0,0,0.20);
/* ── Radius ── */
--radius-sm: 6px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-full: 9999px;
/* ── Transitions ── */
--transition-fast: 0.12s ease;
--transition-base: 0.18s ease;
--transition-slow: 0.28s ease;
}
/* ============================================================
2. COLOR TOKENS — Dark Mode
============================================================ */
[data-theme="dark"] {
/* ── MONTI Brand ── */
--monti-blue: #33aad4;
--monti-blue-dark: #008CC4;
--monti-blue-light: #66c4e2;
--monti-blue-subtle: #0a2535;
/* ── Surface & Background ── */
--bg: #0d1b2a;
--bg-subtle: #111e2e;
--surface: #162235;
--surface-raised: #1d2f44;
--surface-overlay: rgba(13,27,42,0.95);
/* ── Text ── */
--text: #e8f0f8;
--text-secondary: #a0b4c8;
--text-tertiary: #6a8099;
--text-disabled: #3d5166;
--text-inverse: #0f1e2d;
--muted: #6a8099;
/* ── Border ── */
--border: #1e3448;
--border-strong: #2d4a62;
--border-focus: var(--monti-blue);
/* ── Semantic Colors ── */
--ok: #2dd4a0;
--ok-bg: #0a2520;
--ok-border: #1a5a48;
--warn: #f0a020;
--warn-bg: #251800;
--warn-border: #5a3800;
--danger: #e05444;
--danger-bg: #250a08;
--danger-border: #5a1a14;
--info: #33aad4;
--info-bg: #0a2535;
--info-border: #0d4060;
/* ── Neutrals ── */
--color-navy: #0a1520;
--color-navy-mid: #0d1b2a;
--color-navy-light: #162235;
--navy: #0a1520;
--navy-lt: #162235;
--blue: var(--monti-blue);
--blue-lt: var(--monti-blue-light);
/* ── Shadows ── */
--shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
--shadow-md: 0 4px 12px rgba(0,0,0,0.4);
--shadow-lg: 0 12px 32px rgba(0,0,0,0.5);
--shadow-nav: 0 1px 12px rgba(0,0,0,0.5);
}
/* Auto-Mode: folgt OS-Einstellung wenn kein manuelles Override */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]):not([data-theme="dark"]) {
--monti-blue: #33aad4;
--monti-blue-dark: #008CC4;
--monti-blue-light: #66c4e2;
--monti-blue-subtle: #0a2535;
--bg: #0d1b2a;
--bg-subtle: #111e2e;
--surface: #162235;
--surface-raised: #1d2f44;
--surface-overlay: rgba(13,27,42,0.95);
--text: #e8f0f8;
--text-secondary: #a0b4c8;
--text-tertiary: #6a8099;
--text-disabled: #3d5166;
--text-inverse: #0f1e2d;
--muted: #6a8099;
--border: #1e3448;
--border-strong: #2d4a62;
--ok: #2dd4a0;
--ok-bg: #0a2520;
--warn: #f0a020;
--warn-bg: #251800;
--danger: #e05444;
--danger-bg: #250a08;
--info: #33aad4;
--info-bg: #0a2535;
--color-navy: #0a1520;
--color-navy-mid: #0d1b2a;
--navy: #0a1520;
--navy-lt: #162235;
--blue: var(--monti-blue);
--shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
--shadow-md: 0 4px 12px rgba(0,0,0,0.4);
--shadow-lg: 0 12px 32px rgba(0,0,0,0.5);
--shadow-nav: 0 1px 12px rgba(0,0,0,0.5);
}
}
/* ============================================================
3. SPACING TOKENS
============================================================ */
:root {
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
}
/* ============================================================
4. TYPOGRAFIE TOKENS
============================================================ */
:root {
/* Schriftfamilie */
--font-base: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
/* Größen-Skala */
--text-xs: 11px;
--text-sm: 12px;
--text-base: 14px;
--text-md: 15px;
--text-lg: 16px;
--text-xl: 18px;
--text-2xl: 20px;
--text-3xl: 24px;
--text-4xl: 28px;
--text-5xl: 32px;
/* Font Weights */
--weight-normal: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
--weight-extrabold:800;
/* Line Heights */
--leading-tight: 1.25;
--leading-snug: 1.375;
--leading-normal: 1.5;
--leading-relaxed:1.625;
/* Letter Spacing */
--tracking-tight: -0.02em;
--tracking-normal: 0;
--tracking-wide: 0.04em;
--tracking-wider: 0.06em;
--tracking-widest: 0.10em;
}
/* ============================================================
5. SEMANTISCHE TYPOGRAFIE-ROLLEN
============================================================ */
/* Global font reset */
*, *::before, *::after {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font-family: var(--font-base);
font-size: var(--text-base);
font-weight: var(--weight-normal);
line-height: var(--leading-normal);
color: var(--text);
background: var(--bg);
}
/* heading.page — H1 Seitentitel */
.text-heading-page,
.page-header h2 {
font-size: var(--text-4xl);
font-weight: var(--weight-bold);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
color: var(--text);
}
/* heading.section — Kartenüberschriften, Abschnitte */
.text-heading-section,
.card-title {
font-size: var(--text-base);
font-weight: var(--weight-semibold);
line-height: var(--leading-snug);
color: var(--text);
}
/* text.body — Fließtext */
.text-body {
font-size: var(--text-base);
font-weight: var(--weight-normal);
line-height: var(--leading-normal);
color: var(--text);
}
/* text.caption — Kleine Beschriftungen */
.text-caption,
.form-group label {
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
line-height: var(--leading-normal);
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
}
/* label.button — Button-Text */
.text-label-button {
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-wide);
}
/* Mono für Wagon-Nummern etc */
.mono, code {
font-family: var(--font-mono);
font-size: 0.9em;
}
/* ============================================================
6. THEME TOGGLE BUTTON
============================================================ */
.theme-toggle {
display: flex;
align-items: center;
gap: var(--space-2);
background: rgba(255,255,255,0.10);
border: 1px solid rgba(255,255,255,0.15);
border-radius: var(--radius-full);
padding: 4px 10px;
cursor: pointer;
font-size: var(--text-xs);
color: rgba(255,255,255,0.8);
transition: background var(--transition-base);
white-space: nowrap;
}
.theme-toggle:hover {
background: rgba(255,255,255,0.18);
color: #fff;
}
.theme-toggle-icon {
font-size: 13px;
line-height: 1;
transition: transform var(--transition-slow);
}
[data-theme="dark"] .theme-toggle-icon { transform: rotate(180deg); }
/* ============================================================
7. DARK MODE OVERRIDES — Komponenten
============================================================ */
/* Nav */
[data-theme="dark"] #topnav {
background: var(--color-navy);
border-bottom: 1px solid var(--border);
}
/* Cards */
[data-theme="dark"] .card,
[data-theme="dark"] .gleis-card,
[data-theme="dark"] .metric,
[data-theme="dark"] .standort-card,
[data-theme="dark"] .dispo-card {
background: var(--surface);
border-color: var(--border);
}
/* Inputs */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
background: var(--bg);
color: var(--text);
border-color: var(--border);
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
color: var(--text-tertiary);
}
/* Tables */
[data-theme="dark"] table th { background: var(--surface-raised); }
[data-theme="dark"] table tr:hover td { background: var(--surface-raised); }
/* Buttons */
[data-theme="dark"] .btn-secondary {
background: var(--surface);
border-color: var(--border);
color: var(--text);
}
[data-theme="dark"] .btn-secondary:hover {
background: var(--surface-raised);
}
/* Modal */
[data-theme="dark"] #modal,
[data-theme="dark"] .modal-box,
[data-theme="dark"] .login-box {
background: var(--surface);
border-color: var(--border);
}
/* Dropdown */
[data-theme="dark"] .nav-dropdown {
background: var(--surface);
border-color: var(--border);
}
[data-theme="dark"] .nav-dropdown button {
color: var(--text);
border-color: var(--border);
}
[data-theme="dark"] .nav-dropdown button:hover {
background: var(--surface-raised);
}
/* Nav Drawer */
[data-theme="dark"] .nav-drawer-inner {
background: var(--surface);
border-color: var(--border);
}
/* Badges */
[data-theme="dark"] .b-neutral {
background: var(--surface-raised);
color: var(--text-secondary);
border-color: var(--border);
}
/* Toast */
[data-theme="dark"] #toast {
background: var(--surface-raised);
border: 1px solid var(--border);
}
/* Login Background */
[data-theme="dark"] #login-screen {
background: linear-gradient(135deg, #060e16 0%, #0d1b2a 100%);
}
/* ============================================================
8. SCROLLBAR STYLING
============================================================ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: var(--border-strong);
border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }
/* ============================================================
9. FOKUS-STYLES (Accessibility)
============================================================ */
:focus-visible {
outline: 2px solid var(--monti-blue);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
/* ============================================================
10. SELECTION
============================================================ */
::selection {
background: var(--monti-blue-subtle);
color: var(--monti-blue-dark);
}
[data-theme="dark"] ::selection {
background: rgba(51, 170, 212, 0.3);
color: var(--monti-blue-light);
}
/* ============================================================
11. PRINT
============================================================ */
@media print {
:root {
--bg: #ffffff;
--surface: #ffffff;
--text: #000000;
--border: #cccccc;
}
#topnav, .nav-drawer, .theme-toggle { display: none !important; }
#main { padding: 0 !important; }
}
/* ============================================================
DARK MODE — Erweiterte Overrides
Greift auf alle Elemente die noch hardcoded Farben haben
============================================================ */
[data-theme="dark"] body {
background: var(--bg);
color: var(--text);
}
/* Hauptcontainer */
[data-theme="dark"] #main {
background: var(--bg);
}
[data-theme="dark"] #app {
background: var(--bg);
}
/* Login */
[data-theme="dark"] .login-box {
background: var(--surface);
box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
/* Alle weißen Hintergründe */
[data-theme="dark"] .card,
[data-theme="dark"] .metric,
[data-theme="dark"] .db-card,
[data-theme="dark"] .gleis-card,
[data-theme="dark"] .standort-card,
[data-theme="dark"] .dispo-card,
[data-theme="dark"] .dispo-card,
[data-theme="dark"] .tr-wagen-chip,
[data-theme="dark"] .modal-box {
background: var(--surface);
border-color: var(--border);
}
/* Grauer Hintergrund → dunkles Surface */
[data-theme="dark"] .db-chip,
[data-theme="dark"] .db-tile,
[data-theme="dark"] .standort-card,
[data-theme="dark"] .gantt-label,
[data-theme="dark"] .monat-wagen-cell,
[data-theme="dark"] .gantt-wagen-cell {
background: var(--surface-raised);
border-color: var(--border);
color: var(--text);
}
/* Tabellen */
[data-theme="dark"] table th {
background: var(--surface-raised);
color: var(--text-secondary);
border-color: var(--border);
}
[data-theme="dark"] table td {
border-color: var(--border);
color: var(--text);
}
[data-theme="dark"] table tr:hover td {
background: var(--surface-raised);
}
/* Formulare */
[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group select,
[data-theme="dark"] .form-group textarea,
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
background: var(--bg);
color: var(--text);
border-color: var(--border);
}
/* Nav Drawer */
[data-theme="dark"] .nav-drawer-inner {
background: var(--surface);
}
[data-theme="dark"] .nav-drawer-item {
color: var(--text);
}
[data-theme="dark"] .nav-drawer-item:hover {
background: var(--surface-raised);
}
[data-theme="dark"] .nav-drawer-section {
color: var(--text-tertiary);
}
[data-theme="dark"] .nav-drawer-header {
border-color: var(--border);
}
/* Dropdown */
[data-theme="dark"] .nav-dropdown {
background: var(--surface);
border-color: var(--border);
box-shadow: var(--shadow-lg);
}
[data-theme="dark"] .nav-dropdown button {
color: var(--text);
border-color: var(--border);
}
[data-theme="dark"] .nav-dropdown button:hover {
background: var(--surface-raised);
}
/* Modal */
[data-theme="dark"] #modal {
background: var(--surface);
}
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
border-color: var(--border);
}
/* Page Header */
[data-theme="dark"] .page-header h2 {
color: var(--text);
}
/* Badges neutral */
[data-theme="dark"] .b-neutral {
background: var(--surface-raised);
color: var(--text-secondary);
border-color: var(--border);
}
/* Gantt */
[data-theme="dark"] .gantt-table th,
[data-theme="dark"] .monat-table th {
background: var(--color-navy);
}
[data-theme="dark"] .gantt-table td,
[data-theme="dark"] .monat-table td {
border-color: var(--border);
}
/* Toast */
[data-theme="dark"] #toast {
background: var(--surface-raised);
border: 1px solid var(--border);
color: var(--text);
}
/* Card Title */
[data-theme="dark"] .card-title {
color: var(--text);
}
/* Error */
[data-theme="dark"] .error-msg {
background: var(--danger-bg);
color: var(--danger);
}
/* Loading */
[data-theme="dark"] .loading {
color: var(--text-tertiary);
}
/* Gleise Visual */
[data-theme="dark"] .gv-lok {
background: #1a2535;
}
/* Inline-Styles überschreiben — häufige Muster */
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background:white"],
[data-theme="dark"] [style*="background: white"],
[data-theme="dark"] [style*="background:#ffffff"],
[data-theme="dark"] [style*="background: #ffffff"] {
background: var(--surface) !important;
}
[data-theme="dark"] [style*="background:#f0f4f8"],
[data-theme="dark"] [style*="background: #f0f4f8"],
[data-theme="dark"] [style*="background:var(--bg)"] {
background: var(--bg-subtle) !important;
}
[data-theme="dark"] [style*="color:#1e2a38"],
[data-theme="dark"] [style*="color: #1e2a38"],
[data-theme="dark"] [style*="color:#0f1e2d"],
[data-theme="dark"] [style*="color:var(--text)"] {
color: var(--text) !important;
}
[data-theme="dark"] [style*="color:#5a6a7a"],
[data-theme="dark"] [style*="color: #5a6a7a"],
[data-theme="dark"] [style*="color:var(--muted)"] {
color: var(--text-tertiary) !important;
}
[data-theme="dark"] [style*="border.*#dde3ea"],
[data-theme="dark"] [style*="border-color:#dde3ea"] {
border-color: var(--border) !important;
}
/* ============================================================
DARK MODE — Dashboard spezifische Fixes
============================================================ */
/* KPI Kacheln / Metriken */
[data-theme="dark"] .metric,
[data-theme="dark"] .db-kpi-card,
[data-theme="dark"] .db-card {
background: var(--surface) !important;
border-color: var(--border) !important;
color: var(--text) !important;
}
/* Alle surface-weißen Inline-Styles in Kacheln */
[data-theme="dark"] [style*="background:var(--surface)"],
[data-theme="dark"] [style*="background: var(--surface)"] {
background: var(--surface) !important;
}
/* Zahlen / Werte in KPIs */
[data-theme="dark"] .m-value,
[data-theme="dark"] .m-label,
[data-theme="dark"] .m-sub { color: var(--text) !important; }
[data-theme="dark"] .m-label,
[data-theme="dark"] .m-sub { color: var(--text-tertiary) !important; }
/* Stanort-Cards / Gleischips */
[data-theme="dark"] .standort-card,
[data-theme="dark"] .db-chip {
background: var(--surface-raised) !important;
border-color: var(--border) !important;
}
/* Dashboard-Sektionen mit inline border-radius etc */
[data-theme="dark"] [style*="border-radius"][style*="background:#fff"],
[data-theme="dark"] [style*="border-radius"][style*="background: #fff"],
[data-theme="dark"] [style*="border-radius"][style*="background:white"] {
background: var(--surface) !important;
color: var(--text) !important;
}
/* Alle Inline-border Farben */
[data-theme="dark"] [style*="border:1px solid #dde3ea"],
[data-theme="dark"] [style*="border: 1px solid #dde3ea"],
[data-theme="dark"] [style*="border:1.5px solid #dde3ea"],
[data-theme="dark"] [style*="border: 1.5px solid var(--border)"] {
border-color: var(--border) !important;
}
/* Inline padding+background Kombos (häufig in Dashboard JS) */
[data-theme="dark"] [style*="padding"][style*="background:#f"],
[data-theme="dark"] [style*="padding"][style*="background: #f"] {
background: var(--surface) !important;
}
/* Text-Farben die in JS inline gesetzt werden */
[data-theme="dark"] [style*="color:#1a3a5c"],
[data-theme="dark"] [style*="color: #1a3a5c"],
[data-theme="dark"] [style*="color:#1e2a38"],
[data-theme="dark"] [style*="color: #1e2a38"] {
color: var(--text) !important;
}
[data-theme="dark"] [style*="color:#5a6a7a"],
[data-theme="dark"] [style*="color: #5a6a7a"] {
color: var(--text-tertiary) !important;
}
/* ============================================================
DARK MODE — Aggressive Overrides für Inline-Styles
============================================================ */
/* KPI Kacheln oben */
[data-theme="dark"] .db-kpi-card > div,
[data-theme="dark"] .db-kpi-card [style] {
background: var(--surface) !important;
color: var(--text) !important;
border-color: var(--border) !important;
}
/* System & Schnellzugriff Buttons — Text sichtbar machen */
[data-theme="dark"] .db-tile {
background: var(--surface-raised) !important;
color: var(--text) !important;
border-color: var(--border) !important;
}
[data-theme="dark"] .db-tile:hover {
background: #253d56 !important;
color: #fff !important;
}
/* Alle divs mit hardcoded weißem BG */
[data-theme="dark"] div[style*="#fff"],
[data-theme="dark"] div[style*="white"],
[data-theme="dark"] div[style*="#ffffff"],
[data-theme="dark"] div[style*="rgb(255, 255, 255)"],
[data-theme="dark"] div[style*="rgb(255,255,255)"] {
background: var(--surface) !important;
color: var(--text) !important;
}
/* Alle divs mit hellgrauem BG */
[data-theme="dark"] div[style*="#f0f4f8"],
[data-theme="dark"] div[style*="#f8fafc"],
[data-theme="dark"] div[style*="#f5f7fa"],
[data-theme="dark"] div[style*="#eef2f7"] {
background: var(--bg-subtle, #111e2e) !important;
}
/* Span + p + td mit dunkler Textfarbe */
[data-theme="dark"] span[style*="color:#1"],
[data-theme="dark"] span[style*="color: #1"],
[data-theme="dark"] p[style*="color:#1"],
[data-theme="dark"] td[style*="color:#1"],
[data-theme="dark"] div[style*="color:#1e2a38"],
[data-theme="dark"] div[style*="color:#1a3a5c"],
[data-theme="dark"] div[style*="color:#0f1e2d"] {
color: var(--text) !important;
}
/* Muted Text */
[data-theme="dark"] span[style*="color:#5"],
[data-theme="dark"] span[style*="color:#6"],
[data-theme="dark"] span[style*="color:#9"],
[data-theme="dark"] div[style*="color:#5a6a7a"],
[data-theme="dark"] div[style*="color:#666"] {
color: var(--text-tertiary, #6a8099) !important;
}
/* Buttons mit hardcoded BG */
[data-theme="dark"] button[style*="background:#f"],
[data-theme="dark"] button[style*="background: #f"],
[data-theme="dark"] button[style*="background:var(--bg)"],
[data-theme="dark"] button[style*="background: var(--bg)"] {
background: var(--surface-raised) !important;
color: var(--text) !important;
border-color: var(--border) !important;
}
/* Border-Bottom Trennlinien */
[data-theme="dark"] [style*="border-bottom"][style*="#dde"] {
border-bottom-color: var(--border) !important;
}
[data-theme="dark"] [style*="border-top"][style*="#dde"] {
border-top-color: var(--border) !important;
}
/* ============================================================
DARK MODE — Gezielte Kachel Fixes (nach dashboard.js Analyse)
============================================================ */
/* KPI Metriken */
[data-theme="dark"] .metric,
[data-theme="dark"] .db-kpi-card {
background: var(--surface) !important;
border-color: var(--border) !important;
}
[data-theme="dark"] .m-value { color: var(--text) !important; }
[data-theme="dark"] .m-label { color: var(--text-tertiary) !important; }
[data-theme="dark"] .m-sub { color: var(--text-tertiary) !important; }
/* Dashboard Cards */
[data-theme="dark"] .card,
[data-theme="dark"] .db-card {
background: var(--surface) !important;
border-color: var(--border) !important;
}
[data-theme="dark"] .card-title { color: var(--text) !important; }
/* Gleischips in Wagenverwaltung */
[data-theme="dark"] .db-chip {
background: var(--surface-raised) !important;
border-color: var(--border) !important;
color: var(--text) !important;
}
/* Schnellzugriff Tiles — Text sichtbar */
[data-theme="dark"] .db-tile {
background: var(--surface-raised) !important;
color: var(--text) !important;
border-color: var(--border) !important;
}
[data-theme="dark"] .db-tile:hover {
background: var(--border-strong) !important;
color: #fff !important;
}
[data-theme="dark"] .db-tile-grid { color: var(--text) !important; }
/* db-list-row */
[data-theme="dark"] .db-list-row {
border-color: var(--border) !important;
color: var(--text) !important;
}
[data-theme="dark"] .db-dot { color: var(--text-tertiary) !important; }
/* Standort-Cards */
[data-theme="dark"] .standort-card {
background: var(--surface-raised) !important;
border-color: var(--border) !important;
}
[data-theme="dark"] .sc-ort,
[data-theme="dark"] .sc-sub { color: var(--text-tertiary) !important; }
[data-theme="dark"] .sc-count { color: var(--text) !important; }