/* ===== ZENTRALE TYPOGRAFIE =====
Einheitliche Schrift-Skala mit wenigen semantischen Stufen.
- --fs-scale: EIN Regler für die Gesamtgröße aller Texte
- Semantische Stufen (caption…huge) definieren die echte Größe
- Die numerischen Aliasse (--fs-10…--fs-48) mappen auf diese Stufen,
damit bestehende Templates unverändert funktionieren.
Zum Anpassen also nur die 8 semantischen Stufen ändern. */
:root {
--fs-scale: 1; /* ← Gesamtgröße aller Texte (1 = scharfe Ganzzahl-Pixel).
WICHTIG: nur ganzzahlige Vielfache nutzen (1, 1.25, 1.5),
sonst entstehen krumme px-Werte → unscharfe Schrift. */
/* Semantische Stufen — ganzzahlige px (≈ vorheriger 1.12-Skala, aber crisp).
calc bleibt für künftige Ganzzahl-Skalierung erhalten. */
--fs-caption: calc(14px * var(--fs-scale)); /* Meta, Labels, Hinweise */
--fs-small: calc(15px * var(--fs-scale)); /* sekundärer Text */
--fs-body: calc(17px * var(--fs-scale)); /* Standard-Fließtext */
--fs-medium: calc(19px * var(--fs-scale)); /* Hervorhebung, kleine Überschrift */
--fs-large: calc(23px * var(--fs-scale)); /* Abschnitts-Überschrift */
--fs-xl: calc(28px * var(--fs-scale)); /* Karten-Titel */
--fs-display: calc(34px * var(--fs-scale)); /* Seitentitel */
--fs-huge: calc(46px * var(--fs-scale)); /* große Kennzahlen */
/* Numerische Aliasse → auf semantische Stufen gemappt (Vereinheitlichung) */
--fs-10: var(--fs-caption);
--fs-11: var(--fs-caption);
--fs-12: var(--fs-caption);
--fs-13: var(--fs-small);
--fs-14: var(--fs-body);
--fs-15: var(--fs-body);
--fs-16: var(--fs-medium);
--fs-17: var(--fs-medium);
--fs-18: var(--fs-medium);
--topbar-h: 74px;
--fs-20: var(--fs-large);
--fs-22: var(--fs-large);
--fs-24: var(--fs-xl);
--fs-26: var(--fs-xl);
--fs-28: var(--fs-xl);
--fs-32: var(--fs-display);
--fs-48: var(--fs-huge);
/* ===== ZENTRALE SCHRIFTDICKE ===== 3 Stufen, hier (und nur hier) ändern.
normal = Fließtext, medium = Labels/Buttons/Badges, bold = Überschriften/Werte/Tabellenköpfe. */
--fw-normal: 400;
--fw-medium: 600;
--fw-bold: 700;
/* ===== ZENTRALE FARBPALETTE =====
Semantische Farben — werden in CSS-Regeln und Templates per var(--c-…) genutzt.
Hier (und NUR hier) Hex-Werte ändern, um die ganze App umzufärben. */
/* Marke / Akzente — Marineblau, bewusst gedeckt (seriöser Behörden-/Firmenlook) */
--c-primary: #1e3a8a; /* dunkelblau — Headings, aktive Tabs, Save-Btn */
--c-primary-hover: #172a6b;
--c-accent: #2f5fb3; /* gedecktes Marineblau — Highlights, Charts */
/* Aktions-Buttons — EIN konstantes, gedämpftes Stahlblau über alle Themes
(weißer Text immer lesbar, nicht grell). Alle positiven Aktionen gleich. */
--c-action: #3b5b8c;
--c-action-hover: #314c75;
/* Text */
--c-text: #1e293b; /* Body */
--c-text-strong: #0f172a; /* Kennzahlen */
--c-text-muted: #475569; /* sekundär */
--c-text-soft: #64748b; /* tertiär */
--c-text-faint: #94a3b8; /* quartär */
/* Flächen / Linien — kühler Grundton mit leichtem Blaustich */
--c-bg: #eef1f6; /* Seitenhintergrund */
--c-surface: #ffffff; /* Karten, Modals, Inputs */
--c-surface-alt: #f6f8fb; /* Tabellen-Header, Hover, helle Inputs */
--c-bg-soft: #f6f8fb; /* Alias (Kompatibilität) → surface-alt */
--c-bg-mute: #eff2f7; /* neutrale Badges, hover */
--c-border: #dde4ee;
--c-border-strong: #c3cedd;
/* Status-Chips: gedeckte, entsättigte Tints mit dunklem Text statt
Bonbon-Pastell — wirkt ruhiger und seriöser, Semantik bleibt gleich. */
/* Status — Erfolg / Lädt */
--c-success: #1d9a6c;
--c-success-strong: #157a55;
--c-success-hover: #116649;
--c-success-text: #1c5c40;
--c-success-bg: #e2eee7;
--c-success-border: #c2dbcd;
/* Status — Gefahr / Verwaist / Offline */
--c-danger: #c22f2f;
--c-danger-light: #d64545;
--c-danger-hover: #a32424;
--c-danger-strong: #8c1f1f;
--c-danger-bg: #f5e2e2;
--c-danger-bg-soft: #faf1f1;
/* Status — Warnung / Pausiert (Auto) */
--c-warning: #b97a10;
--c-warning-hover: #9c650c;
--c-warning-text: #77500e;
--c-warning-bg: #f4edda;
--c-warning-border: #e3d2a5;
--c-warning-strong: #d97706;
/* Status — Info / Angesteckt */
--c-info: #2b5c8a;
--c-info-deep: #34689a;
--c-info-bg: #e4ebf4;
--c-info-bg-soft: #f1f5fa;
/* Status — Abschluss */
--c-purple-text: #55418a;
--c-purple-bg: #eae7f3;
/* Transparente Akzent-Tints — funktionieren auf hellen UND dunklen Flächen.
Für Icon-Chips, aktive Sidebar-Einträge, Status-Pills (Mockup-Look). */
--tint-accent: rgba(30,58,138,.08);
--tint-accent-border: rgba(30,58,138,.22);
--tint-success: rgba(29,154,108,.12);
--tint-warning: rgba(185,122,16,.13);
--tint-danger: rgba(194,47,47,.12);
--tint-info: rgba(43,92,138,.12);
/* Schatten — auf dunklen Themes kräftiger, sonst unsichtbar */
--shadow-card: 0 4px 6px -1px rgba(0,0,0,0.05);
--shadow-pop: 0 24px 60px rgba(0,0,0,0.25);
}
/* ===== FARBSCHEMAS ===== Auswahl per bzw. Theme-Switcher.
6 Themes im Blau-Spektrum, dunkel → hell. Hintergrund, Karten (--c-surface),
Text und Akzente wechseln mit. Default in :root = "marineblau" (hell) — braucht
keinen eigenen Block. Status-Farben (success/warning/danger) bleiben semantisch;
auf dunklen Themes werden sie über den gemeinsamen Block unten gedimmt. */
html[data-theme="tiefsee"] {
--c-bg: #0b1120;
--c-surface: #0f172a;
--c-surface-alt: #1e293b;
--c-bg-soft: #1e293b;
--c-bg-mute: #1e293b;
--c-text: #f1f5f9;
--c-text-strong: #f8fafc;
--c-text-muted: #cbd5e1;
--c-text-soft: #94a3b8;
--c-text-faint: #64748b;
--c-border: #1e293b;
--c-border-strong: #334155;
--c-primary: #60a5fa;
--c-primary-hover: #93c5fd;
--c-accent: #93c5fd;
}
html[data-theme="mitternacht"] {
--c-bg: #0f172a;
--c-surface: #1e293b;
--c-surface-alt: #334155;
--c-bg-soft: #334155;
--c-bg-mute: #334155;
--c-text: #f8fafc;
--c-text-strong: #ffffff;
--c-text-muted: #e2e8f0;
--c-text-soft: #cbd5e1;
--c-text-faint: #94a3b8;
--c-border: #334155;
--c-border-strong: #475569;
--c-primary: #7dd3fc;
--c-primary-hover: #bae6fd;
--c-accent: #bae6fd;
}
html[data-theme="stahlblau"] {
--c-bg: #1e293b;
--c-surface: #334155;
--c-surface-alt: #475569;
--c-bg-soft: #475569;
--c-bg-mute: #475569;
--c-text: #f1f5f9;
--c-text-strong: #f8fafc;
--c-text-muted: #e2e8f0;
--c-text-soft: #cbd5e1;
--c-text-faint: #94a3b8;
--c-border: #475569;
--c-border-strong: #64748b;
--c-primary: #bfdbfe;
--c-primary-hover: #dbeafe;
--c-accent: #dbeafe;
}
html[data-theme="himmel"] {
--c-bg: #eff6ff;
--c-surface: #ffffff;
--c-surface-alt: #dbeafe;
--c-bg-soft: #dbeafe;
--c-bg-mute: #dbeafe;
--c-text: #1e293b;
--c-text-strong: #0f172a;
--c-text-muted: #1e3a8a;
--c-text-soft: #475569;
--c-text-faint: #64748b;
--c-border: #bfdbfe;
--c-border-strong: #93c5fd;
--c-primary: #1d4ed8;
--c-primary-hover: #1e40af;
--c-accent: #2563eb;
}
/* Gemeinsame Overrides für alle DUNKLEN Themes:
- Status-Chips als dunkle Variante (gleiche Semantik, kein Grellen auf dunkel)
- kräftigere Schatten (helle Schatten sind auf dunklem BG unsichtbar) */
html[data-theme="tiefsee"],
html[data-theme="mitternacht"], html[data-theme="stahlblau"] {
/* Status-Flächen als transparente Tints (Mockup-Look) statt Vollfarben —
leuchtende Textfarbe + dezenter Hintergrund auf dunklen Karten. */
--c-success-bg: rgba(16,185,129,.14);
--c-success-text: #6ee7b7;
--c-success-border: rgba(16,185,129,.28);
--c-warning-bg: rgba(245,158,11,.14);
--c-warning-text: #fcd34d;
--c-warning-border: rgba(245,158,11,.30);
--c-warning-strong: #f59e0b;
--c-danger-bg: rgba(239,68,68,.14);
--c-danger-strong: #fca5a5;
--c-info: #93c5fd;
--c-info-bg: rgba(96,165,250,.14);
--c-purple-text: #d8b4fe;
--c-purple-bg: rgba(168,85,247,.16);
--tint-accent: rgba(96,165,250,.14);
--tint-accent-border: rgba(96,165,250,.28);
--shadow-card: 0 6px 16px -2px rgba(0,0,0,0.45);
--shadow-pop: 0 24px 60px rgba(0,0,0,0.6);
}
* { box-sizing: border-box; }
html { height: 100%; background: var(--c-bg); }
body { min-height: 100%; }
body { font-family: 'Segoe UI', Tahoma, Arial, sans-serif; background: var(--c-bg); color: var(--c-text); margin: 0; transition: background 0.15s, color 0.15s; }
h1 { color: var(--c-text-strong); margin: 0; font-size:var(--fs-22); display: flex; align-items: center; gap: 10px; letter-spacing: -0.3px; }
h2 { color: var(--c-text); margin-top: 0; font-size:var(--fs-17); margin-bottom: 16px; display: flex; align-items: center; gap: 9px; }
h2 .icon, h1 .icon { color: var(--c-accent); }
/* ===== APP-SHELL ===== Sidebar links, Topbar + scrollender Inhalt rechts.
→ Sidebar (Navigation) + .main-area (Topbar/Content). */
/* Natürliches Fenster-Scrollen: der Inhalt läuft unbegrenzt nach unten (kein
fixes 100vh + innerer Scroll mehr). Sidebar bleibt per sticky am Bildschirm. */
.app-shell { display: flex; min-height: 100vh; }
/* Sidebar fest fixiert (scrollt NICHT mit) — funktioniert auch bei CSS-Zoom,
anders als position:sticky (das mit Zoom mitscrollt). .main-area gleicht die
Breite per margin-left wieder aus. */
/* translateZ(0): eigene Compositing-Ebene → Chrome glättet die Schrift in
Graustufen statt ClearType-Subpixel. Verhindert die rot/blauen Farbsäume,
die helle Schrift auf dunklem Grund „schwammig" wirken lassen. */
.sidebar { width: 240px; flex: none; background: var(--c-surface); border-right: 1px solid var(--c-border); padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 3px; position: fixed; top: 0; bottom: 0; left: 0; overflow-y: auto; z-index: 50; transform: translateZ(0); }
.brand { display: flex; align-items: center; gap: 11px; padding: 4px 8px 14px; }
.brand-logo { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, var(--c-accent), var(--c-primary)); display: inline-flex; align-items: center; justify-content: center; color: var(--c-bg); font-size: var(--fs-18); flex: none; }
/* Markentitel bewusst etwas kleiner als die fs-Variablen (min. 14px), damit
„Ladestationen-Zentrale" einzeilig passt; Untertitel klar untergeordnet. */
.brand-name { font-size: 11px; font-weight: var(--fw-bold); line-height: 1.25; color: var(--c-text); white-space: nowrap; letter-spacing: -0.2px; }
.brand-name small { display: block; color: var(--c-text-muted); font-weight: var(--fw-medium); font-size: 10px; letter-spacing: 0; margin-top: 2px; white-space: nowrap; }
.wb-nav { display: flex; align-items: center; gap: 10px; padding: 8px 12px; white-space: nowrap; border-radius: 10px; font-size: var(--fs-14); font-weight: var(--fw-medium); cursor: pointer; transition: background .15s, color .15s; background: transparent; color: var(--c-text-soft); border: none; width: 100%; text-align: left; font-family: inherit; }
.wb-nav:hover { background: var(--c-bg-mute); color: var(--c-text-muted); }
.wb-nav.active { background: var(--tint-accent); color: var(--c-primary); box-shadow: inset 0 0 0 1px var(--tint-accent-border); }
/* Handlungsbedarf-Marker im Auswahlmenü: kleines Ausrufezeichen rechts im
Button, Farbe = höchste offene Priorität (siehe hbNavMarker in app.js). */
.nav-alert { margin-left: auto; flex: none; width: 16px; height: 16px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: var(--fw-bold); line-height: 1; color: #fff; background: var(--c-info); box-shadow: 0 0 0 2px var(--c-surface); }
.nav-alert.mittel { background: var(--c-warning-text); }
.nav-alert.hoch { background: var(--c-danger); animation: nav-alert-puls 1.6s ease-in-out infinite; }
@keyframes nav-alert-puls { 0%, 100% { box-shadow: 0 0 0 2px var(--c-surface); } 50% { box-shadow: 0 0 0 2px var(--c-surface), 0 0 0 5px rgba(239,68,68,.25); } }
html.preload .nav-alert.hoch { animation: none; }
.sidebar-foot { margin-top: auto; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: 10px; padding: 10px 12px; }
.sidebar-foot .row1 { display: flex; align-items: center; gap: 7px; font-size: var(--fs-12); color: var(--c-text-muted); font-weight: var(--fw-medium); }
.sidebar-foot .row2 { font-size: var(--fs-11); color: var(--c-text-soft); margin-top: 5px; }
/* Info-Zeilen (Angemeldet / Berechtigung / Rev.): kleinste Schrift, und es wird
IMMER alles angezeigt — lange Namen brechen um, statt abgeschnitten zu werden. */
.sidebar-foot .row3 { font-size: var(--fs-10); color: var(--c-text-faint); margin-top: 2px;
overflow-wrap: anywhere; line-height: 1.45; }
.led { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c-text-faint); flex: none; }
.led.on { background: #34d399; box-shadow: 0 0 0 3px rgba(52,211,153,.2); }
.led.off { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.2); }
.led.wait{ background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.2); }
.main-area { flex: 1; min-width: 0; margin-left: 240px; }
.main-area::-webkit-scrollbar { width: 10px; }
.main-area::-webkit-scrollbar-thumb { background: var(--c-border-strong); border-radius: 6px; border: 2px solid var(--c-bg); }
/* Globale, theme-gerechte Scrollleisten — sonst rendern dunkle Themes die
nativen Leisten weiß/hell (z. B. Backup-Liste, Karten-Auswahl, Tabellen).
Firefox: scrollbar-width/-color werden von html vererbt; Webkit über
::-webkit-scrollbar. .main-area behält durch höhere Spezifität sein Styling. */
html { scrollbar-width: thin; scrollbar-color: var(--c-border-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--c-border-strong); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--c-text-faint); }
.topbar { position: sticky; top: 0; z-index: 100; background: var(--c-bg); border-bottom: 1px solid var(--c-border); padding: 15px 30px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: nowrap; }
@supports (background: color-mix(in srgb, red 50%, transparent)) {
.topbar { background: color-mix(in srgb, var(--c-bg) 88%, transparent); backdrop-filter: blur(8px); }
}
/* Der Titelblock darf schrumpfen, der Untertitel bricht dann um (09.09.2026). Ohne das ist
der Block so breit wie sein laengstes Kind — bei einem langen Untertitel (Reiter
Kilometerstaende) verdraengte er die Knopfgruppe in eine zweite Zeile, bei kurzem nicht.
Die Anordnung sah je Reiter anders aus. min-width:0 hebt die Flex-Mindestbreite auf. */
Basis 0 ist dabei entscheidend: mit `auto` bleibt die Inhaltsbreite die Basis, und ob eine
Flex-Zeile umbricht, wird VOR dem Schrumpfen entschieden — der lange Untertitel schob die
Knöpfe also weiterhin in die zweite Zeile. min-width haelt den Titel lesbar; erst darunter
(Handy) bricht die Leiste bewusst um. */
.topbar-titel { flex: 1 1 0; min-width: 240px; }
.topbar-sub { font-size: var(--fs-13); color: var(--c-text-soft); margin-top: 2px; }
.topbar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: 0 0 auto; }
.content { padding: 24px 30px 40px; }
/* Sprungleiste am Kopf eines langen Reiters (Einstellungen). Die Karten tragen
scroll-margin-top, sonst schiebt die sticky Topbar die Ueberschrift aus dem Bild. */
/* Bleibt beim Scrollen stehen, direkt unter der Topbar (die ist sticky, top:0, z-index 100).
--topbar-h ist deren Höhe. Der Wert hier ist nur der Startwert: app.js MISST die Topbar
und setzt die Variable nach. Geraten ging schief — stimmte die Zahl nicht auf den Pixel,
sprang die Leiste beim Kleben um die Differenz nach oben und stand schief zwischen den Linien.
Voller Inhaltsbreite (negative Ränder), damit durchgescrollter Inhalt nicht seitlich vorbeiläuft. */
.abschnittsnav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
position: sticky; top: var(--topbar-h); z-index: 90;
/* Oben und unten gleich viel Luft: der Aussenabstand lag frueher nur oben (22 px)
und gehoerte nicht zum farbigen Balken — die Knoepfe sassen sichtbar zu hoch. */
margin: -24px -30px 0; padding: 12px 30px;
background: var(--c-bg); border-bottom: 1px solid var(--c-border); }
.abschnittsnav-lbl { font-size: var(--fs-11); color: var(--c-text-soft); font-weight: var(--fw-medium);
text-transform: uppercase; letter-spacing: .04em; margin-right: 2px; }
.abschnittsnav button { background: var(--c-surface); color: var(--c-text-muted); border: 1px solid var(--c-border);
border-radius: 9px; padding: 7px 13px; font-size: var(--fs-13); cursor: pointer; }
.abschnittsnav button:hover { background: var(--c-bg-mute); color: var(--c-text); }
.abschnittsnav button.aktiv { background: var(--tint-accent); color: var(--c-primary); border-color: var(--tint-accent-border); }
.abschnittsnav button.nachOben { margin-left: auto; }
/* Topbar + Sprungleiste zusammen — sonst landet die Überschrift dahinter. */
.abschnitt { scroll-margin-top: calc(var(--topbar-h) + 78px); }
/* Topbar-Buttons (Aktualisieren / Farbschema) */
.top-btn { background: var(--c-surface); color: var(--c-text-muted); border: 1px solid var(--c-border); border-radius: 9px; padding: 9px 14px; font-size: var(--fs-13); font-weight: var(--fw-medium); cursor: pointer; display: inline-flex; align-items: center; gap: 7px; font-family: inherit; }
.top-btn:hover { background: var(--c-bg-mute); color: var(--c-text); }
.top-btn.accent { background: var(--tint-accent); color: var(--c-primary); border-color: var(--tint-accent-border); }
/* Zoom-Knopf: Vorschlags-Menü mit festen Größen beim Überfahren.
Der äußere #zoomMenu ist transparent und beginnt direkt am Knopf (kein
Hover-Loch auf dem Weg nach unten); die Karte selbst ist der innere Kern. */
.zoom-waehler { position: relative; }
#zoomMenu { display: none; position: absolute; top: 100%; right: 0; z-index: 700; padding-top: 6px; }
.zoom-waehler:hover #zoomMenu { display: block; }
#zoomMenu .zoom-menu-kern { background: var(--c-surface); border: 1px solid var(--c-border-strong);
border-radius: 10px; box-shadow: var(--shadow-pop); padding: 6px; min-width: 210px; }
#zoomMenu button { display: block; width: 100%; text-align: left; background: none; border: none;
color: var(--c-text); font-size: var(--fs-12); padding: 6px 10px; border-radius: 7px;
cursor: pointer; font-family: inherit; white-space: nowrap; }
#zoomMenu button:hover { background: var(--c-bg-mute); }
#zoomMenu button.aktiv { background: var(--tint-accent); color: var(--c-primary); font-weight: var(--fw-medium); }
/* Hilfe-Knopf im eingeschalteten Zustand: deutlich grün (grün = an) + EIN-Marke */
#helpBtn.accent { background: var(--c-success-bg); color: var(--c-success-text);
border-color: var(--c-success); font-weight: var(--fw-bold); }
#helpBtn .ein-marke { background: var(--c-success); color: #fff; border-radius: 7px;
padding: 1px 7px; font-size: var(--fs-10); font-weight: var(--fw-bold);
letter-spacing: .04em; line-height: 1.5; }
/* Icon-Chip — kleines, rundes Icon-Quadrat (KPI-Karten, Karten-Titel) */
.icon-chip { width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.icon-chip.lg { width: 36px; height: 36px; border-radius: 9px; }
.icon-chip.xl { width: 42px; height: 42px; border-radius: 11px; }
.chip-accent { background: var(--tint-accent); color: var(--c-accent); }
.chip-success { background: var(--tint-success); color: var(--c-success); }
.chip-warning { background: var(--tint-warning); color: var(--c-warning); }
.chip-danger { background: var(--tint-danger); color: var(--c-danger-light); }
.chip-info { background: var(--tint-info); color: var(--c-info); }
/* Inter rendert fett (700/800) auf dunklem Grund schnell „dick & weich".
Bold-Texte daher auf 600 (Semibold) → bleibt klar fett, aber scharf. */
b, strong { font-weight: var(--fw-medium); }
/* ===== ICONS ===== Inline-SVG (Feather/Lucide-Stil), erben Größe (1em) und
Farbe (currentColor) vom umgebenden Text → automatisch theme-konform.
Verwendung: */
.icon { width: 1em; height: 1em; display: inline-block; flex: none; vertical-align: -0.14em;
stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.i-lead { margin-right: 0.45em; }
.tab button .icon { stroke-width: 2; }
/* STATUS GRID — im neuen Layout ein vertikaler Stapel in der linken
Dashboard-Spalte (Mockup: „Ladestationen"-Liste). */
/* Stationen als Hero-Reihe oben: nebeneinander, umbrechend (statt gestapelt). */
/* 255 px, nicht 230 (09.09.2026): darunter passte „Ladestation 3" nicht mehr neben ein
langes Abzeichen wie „Wallbox pausiert" — seit die Kopfzeile nicht mehr umbricht,
verlor der Name dann seine Nummer. Lieber eine Karte weniger je Reihe. */
.status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 12px; align-items: start; }
/* tabular-nums: gleichbreite Ziffern, damit Werte wie "5.1" → "10.5" nicht das Layout verschieben.
contain: layout style → interne Aenderungen propagieren nicht nach aussen.
align-items: start (statt stretch) — Kompaktkarten sollen nicht auf die Hoehe
einer aufgeklappten Nachbarkarte gedehnt werden. */
.status-card { min-width: 0; padding: 8px 12px; border-radius: 12px; background: var(--c-surface); border: 1px solid var(--c-border); border-left: 4px solid var(--c-border-strong); font-variant-numeric: tabular-nums; contain: layout style; overflow-wrap: break-word; }
/* Kompaktkarte v2: genau zwei Zeilen je Karte.
Zeile 1 (.sc-kopf): Name + Zustands-Badge.
Zeile 2 ( von .sc-mehr): links Ladeinfo ohne eigenen Kasten,
rechts "Details" — die ganze Zeile klappt die Einzelheiten auf.
Ergebnis: alle Karten gleich hoch, nichts bricht um, nichts wird abgeschnitten
(lange Namen enden in einer Ellipse, der Rest steht im Tooltip/Details). */
/* KEIN Umbruch (09.09.2026): rutschte das Zustands-Abzeichen in eine zweite Zeile,
war genau diese Karte hoeher als alle anderen — im Raster faellt das sofort auf.
Jetzt gibt der Name nach und endet in einer Ellipse; die vollstaendige Kennung
steht im Aufklapper darunter, es geht also nichts verloren. */
.sc-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px 10px;
flex-wrap: nowrap; min-width: 0; }
.sc-kopf > .cp-ident { min-width: 0; overflow: hidden; }
.sc-kopf-badges { display: inline-flex; align-items: center; gap: 6px; flex: none; white-space: nowrap; }
.sc-kopf-badges .badge-pill { font-size: var(--fs-10); padding: 1px 7px; }
/* Zeile 2: Info in voller Breite. min-height haelt alle Karten gleich hoch,
auch wenn eine Saeule frei ist (leere Zeile). */
.sc-info { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: var(--fs-10);
margin-top: 4px; min-height: 15px; overflow: hidden; white-space: nowrap; }
/* Zeile 3: Ladewerte links, "Details" rechts — beides in der Aufklapp-Zeile */
.sc-mehr { margin-top: 2px; }
.sc-mehr > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px;
cursor: pointer; list-style: none; user-select: none; min-height: 16px; }
.sc-mehr > summary::-webkit-details-marker { display: none; }
.sc-fuss { display: flex; align-items: center; gap: 7px; min-width: 0; flex: 1; font-size: var(--fs-10); }
.sc-aktiv { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.sc-a-name { color: var(--c-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* Kennzeichen: kurz und identifizierend — wird NIE gekuerzt. Wird der Platz
knapp, geben stattdessen die kWh-Werte nach (Ellipse); Details/Tooltip
tragen ohnehin alles. */
.sc-a-fest { color: var(--c-text-muted); white-space: nowrap; flex: none; }
.sc-a-werte { white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 0.92em; }
.sc-warte { color: var(--c-warning-text, var(--c-warning)); font-size: var(--fs-10); white-space: nowrap;
overflow: hidden; text-overflow: ellipsis; }
.sc-mehr-tag { flex: none; font-size: var(--fs-10); color: var(--c-text-faint); }
.sc-mehr-tag::after { content: "\203A"; margin-left: 4px; display: inline-block; transition: transform .15s; }
.sc-mehr[open] .sc-mehr-tag::after { transform: rotate(90deg); }
.sc-mehr > summary:hover .sc-mehr-tag { color: var(--c-text-muted); }
/* Aufgeklappte Einzelheiten: nichts abschneiden, keine Scrollleiste. Vorher stand
hier nowrap + overflow-x:auto — zu lange Zeilen ("Verbunden seit: …") liefen aus
der Karte heraus und waren nur ueber einen Balken erreichbar. Jetzt umbricht die
Zeile; Beschriftung und Wert bleiben dabei je fuer sich zusammen, damit kein
Datum mitten in der Zahl auseinanderfaellt. */
.sc-mehr-inhalt { margin-top: 5px; font-size: var(--fs-11); color: var(--c-text-muted); line-height: 1.65;
white-space: normal; overflow: visible; overflow-wrap: break-word; }
.sc-mehr-inhalt b { white-space: nowrap; }
/* Zeitstempel und IP nicht mitten in der Zahl trennen: auf schmalen Schirmen
brach sonst "2026-09-01 13:44" in zwei Zeilen. Namen duerfen weiter umbrechen —
ein langer Fahrername muss sich sonst aus der Karte schieben. */
.sc-mehr-inhalt [data-bind-text$=".conn_since"],
.sc-mehr-inhalt [data-bind-text$=".last_hb"],
.sc-mehr-inhalt [data-bind-text$=".ip"] { white-space: nowrap; }
/* Karte mit aufgeklappter Kennung ueber die Nachbarn heben: contain:layout macht
jede Karte zum eigenen Stapelkontext, sonst laege das Kennungs-Overlay unter
der naechsten Karte. z-index wirkt hier direkt, weil die Karten Grid-Kinder sind. */
.status-card:has(.cp-ident[open]) { z-index: 50; }
.status-online { border-left-color: #34d399; }
.status-offline { border-left-color: #ef4444; opacity: .85; }
/* Ladesäulen-Karte: Anzeigename aufklappbar. Darunter steht die vollständige OCPP-Kennung,
also das, was die Box tatsächlich sendet (konfigurierter Pfad + eigene Kennung). Wird bei
der Fehlersuche gebraucht — der Anzeigename allein sagt nichts über die echte Kennung. */
.cp-ident { margin: 0; position: relative; }
/* Der Anzeigename bleibt einzeilig — er ist die Ueberschrift der Karte und muss
auf einen Blick lesbar sein. Die vollstaendige Kennung steht ohnehin im Aufklapper. */
.cp-ident > summary { display: flex; align-items: center; gap: 6px; cursor: pointer;
font-size: var(--fs-12); font-weight: var(--fw-bold); list-style: none;
white-space: nowrap; word-break: normal; overflow-wrap: normal;
min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cp-ident > summary::-webkit-details-marker { display: none; }
.cp-ident > summary::after { content: "\203A"; display: inline-block; font-weight: var(--fw-normal);
color: var(--c-text-muted); transition: transform .15s ease; }
.cp-ident[open] > summary::after { transform: rotate(90deg); }
.cp-ident > summary:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; border-radius: 4px; }
/* Die volle Kennung schwebt als Overlay ÜBER dem Karteninhalt (position:absolute
unter dem Namen), statt ihn nach unten zu schieben — die Karte behält beim
Aufklappen ihre Höhe, im Raster verrutscht nichts. Der Schatten hebt das Feld
vom Inhalt darunter ab. */
.cp-ident .cp-ident-voll { display: block; position: absolute; top: 100%; left: 0; z-index: 40;
margin-top: 4px; padding: 6px 9px; border-radius: 6px; min-width: 230px; max-width: 340px;
background: var(--c-surface); border: 1px solid var(--c-border-strong); color: var(--c-text-soft);
font-size: var(--fs-12); font-family: ui-monospace, Consolas, monospace;
user-select: all; word-break: break-all; box-shadow: var(--shadow-pop); }
@media (prefers-reduced-motion: reduce) { .cp-ident > summary::after { transition: none; } }
/* Dashboard-Hauptraster: links Ladestationen, rechts letzte Ladevorgänge */
/* Stationen oben, Tabelle darunter — beide über die volle Breite gestapelt. */
.dash-grid { display: grid; grid-template-columns: 1fr; gap: 22px; align-items: start; }
/* Grid-/Flex-Elemente dürfen schrumpfen, damit breite Tabellen/Karten darin
in den Bildschirm passen statt das Layout aus dem Bild zu schieben
(min-width:auto-Falle). Gilt für Dashboard- und Benutzer-Layout. */
.dash-grid > * { min-width: 0; }
.user-layout > * { min-width: 0; }
/* Abschnitts-Titel über Listen (Icon + Titel + Meta) */
.sec-title { display: flex; align-items: center; gap: 9px; margin: 0 0 13px; font-size: var(--fs-15); font-weight: var(--fw-bold); color: var(--c-text); }
.sec-title .icon { color: var(--c-accent); font-size: var(--fs-18); }
.sec-title .meta { font-size: var(--fs-12); color: var(--c-text-soft); font-weight: var(--fw-normal); }
/* Auch in Tabellen Tabellen-Ziffern verwenden, damit kWh/EUR-Spalten nicht wackeln */
table { font-variant-numeric: tabular-nums; }
/* TABS — Inhalte werden weiter per openTab() geschaltet; die Navigation
selbst sitzt jetzt als .wb-nav-Buttons in der Sidebar. */
/* Während des (Neu-)Ladens keine Übergänge/Animationen — verhindert das Einblende-
Flackern (Nav-Markierung, Tab-Fade) bei jedem Reload. Nach 'load' wieder aktiv. */
html.preload *, html.preload *::before, html.preload *::after { transition: none !important; animation: none !important; }
.tabcontent { display: none; animation: fadeEffect 0.3s; }
@keyframes fadeEffect { from {opacity: 0; transform: translateY(5px);} to {opacity: 1; transform: translateY(0);} }
/* FILTER BAR — kompakte Chips in der Topbar (Mockup) */
.filter-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0; }
.filter-group { display: inline-flex; align-items: center; gap: 8px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 9px; padding: 4px 6px 4px 13px; }
.filter-group label { font-size: var(--fs-13); font-weight: var(--fw-normal); color: var(--c-text-soft); display: inline-flex; align-items: center; white-space: nowrap; }
.filter-group label .icon { color: var(--c-accent); }
.filter-group select { padding: 6px 4px; font-size: var(--fs-13); border-radius: 6px; border: none; background: transparent; cursor: pointer; font-weight: var(--fw-medium); color: var(--c-text-muted); max-width: 190px; font-family: inherit; }
.filter-group select:hover { color: var(--c-text); }
.filter-group select:focus { outline: none; }
.filter-group select option { background: var(--c-surface); color: var(--c-text); }
/* Globale Filterleiste im Inhaltsbereich (aus der Topbar verschoben).
Karten-Look passend zum übrigen Dashboard; die Filter-Pills sitzen darin. */
.filterbar-card { position: relative; z-index: 20; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 12px; box-shadow: var(--shadow-card); padding: 12px 16px; margin-bottom: 18px; }
.filterbar-inline { position: relative; z-index: 20; }
/* Eigenes Dropdown (ersetzt natives