:root { --bg-primary: #0a0e17; --bg-secondary: #111827; --bg-card: #1a2233; --bg-card-hover: #1f2a3f; --border: #2a3654; --text-primary: #e8edf5; --text-secondary: #8899b4; --text-muted: #556685; --accent: #3b82f6; --accent-glow: rgba(59,130,246,0.15); --green: #10b981; --green-bg: rgba(16,185,129,0.12); --red: #ef4444; --red-bg: rgba(239,68,68,0.12); --yellow: #f59e0b; --yellow-bg: rgba(245,158,11,0.12); --orange: #f97316; --purple: #8b5cf6; --radius: 12px; --shadow: 0 4px 24px rgba(0,0,0,0.3); } html.light { --bg-primary: #f0f2f5; --bg-secondary: #ffffff; --bg-card: #ffffff; --bg-card-hover: #f5f7fa; --border: #e0e4ea; --text-primary: #1a202c; --text-secondary: #4a5568; --text-muted: #8895a7; --accent: #3b82f6; --accent-glow: rgba(59,130,246,0.12); --green: #059669; --green-bg: rgba(5,150,105,0.1); --red: #dc2626; --red-bg: rgba(220,38,38,0.1); --yellow: #d97706; --yellow-bg: rgba(217,119,6,0.1); --orange: #ea580c; --purple: #7c3aed; --shadow: 0 4px 24px rgba(0,0,0,0.08); } * { margin:0; padding:0; box-sizing:border-box; } body { font-family: 'DM Sans', sans-serif; background: var(--bg-primary); color: var(--text-primary); min-height: 100vh; overflow-x: hidden; } .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: 260px; background: var(--bg-secondary); border-right: 1px solid var(--border); z-index: 100; display: flex; flex-direction: column; transition: transform 0.3s; } .sidebar-header { padding: 24px 20px; border-bottom: 1px solid var(--border); } .sidebar-logo { display: flex; align-items: center; gap: 12px; } .logo-icon { width: 40px; height: 40px; background: linear-gradient(135deg, var(--accent), #60a5fa); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; color: white; box-shadow: 0 4px 16px rgba(59,130,246,0.3); } .logo-text { font-size: 16px; font-weight: 700; letter-spacing: -0.3px; } .logo-sub { font-size: 11px; color: var(--text-muted); font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase; } .sidebar-nav { flex: 1; padding: 16px 12px; overflow-y: auto; } .nav-section { margin-bottom: 24px; } .nav-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-muted); padding: 0 8px; margin-bottom: 8px; font-weight: 600; } .nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; cursor: pointer; color: var(--text-secondary); font-size: 14px; font-weight: 500; transition: all 0.2s; margin-bottom: 2px; } .nav-item:hover { background: var(--bg-card); color: var(--text-primary); } .nav-item.active { background: var(--accent-glow); color: var(--accent); } /* Anklickbare Zeilen in der Fahrtenliste (zeigen die Strecke auf der Karte) */ #routeTable tbody tr.fahrt-zeile:hover { background: var(--bg-hover); } #routeTable tbody tr.fahrt-zeile.aktiv { background: rgba(59,130,246,0.18); } #routeTable tbody tr.fahrt-zeile.aktiv td:first-child { box-shadow: inset 3px 0 0 var(--accent); } /* Aufklappbare Menügruppe (Tachograph) */ .nav-group-btn .nav-caret { margin-left: auto; font-size: 11px; transition: transform .15s; } .nav-group-btn.offen .nav-caret { transform: rotate(180deg); } .nav-sub { display: none; margin: 2px 0 6px 0; border-left: 2px solid var(--border); padding-left: 8px; } .nav-sub.offen { display: block; } .nav-sub-item { flex-direction: column; align-items: flex-start; gap: 1px; padding-top: 7px; padding-bottom: 7px; } .nav-sub-desc { font-size: 10px; color: var(--text-muted); line-height: 1.3; } .nav-item svg { width: 18px; height: 18px; flex-shrink: 0; } .nav-badge { margin-left: auto; background: var(--accent); color: white; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; } .main { margin-left: 260px; min-height: 100vh; transition: margin-left 0.3s ease; } /* Höhe ist auf einem Laptop das knappe Gut, nicht Breite: Ein 13"-MacBook-Air hat nach Menü-, Tab- und Adressleiste rund 785px übrig. Kopfzeile, Kennzahlen und die Köpfe von Karte und Liste kosteten davon 238px, bevor der erste Fahrzeugeintrag zu sehen war. Die Abstände sind deshalb durchweg knapper gesetzt (Thomas, 27.07.2026: „hier können wir einiges an platz sparen"). */ .topbar { position: sticky; top: 0; z-index: 50; background: rgba(10,14,23,0.85); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); padding: 6px 20px; display: flex; align-items: center; justify-content: space-between; } /* `min-width: 0` und die Kürzung sind auf schmalen Schirmen entscheidend: Ein einwortiger Titel wie „Benutzerverwaltung" kann nicht umbrechen und erzwingt sonst die volle Breite. Weil `.topbar-right` nicht schrumpft (`flex-shrink: 0`), werden dann die Symbole rechts aus der Kopfzeile gedrückt — gemessen am 26.07.2026: 30px Überstand bei 390px Bildschirmbreite, Glocke praktisch unsichtbar. Als Folge blähte der Browser sogar den Viewport in der Höhe auf, wodurch im Benutzerdialog die Knöpfe unter den Bildschirmrand rutschten. */ /* Das `min-width: 0` muss am **Wrapper** stehen, nicht nur am Titel: Der Titel ist Kind eines Flex-Kastens, und dieser Kasten behielt seine Inhalts- Mindestbreite — die Kürzung am Titel kam deshalb nie zum Tragen. Gemessen am 27.07.2026: Benutzerverwaltung blähte den Viewport bei 390px auf 425px auf, Flotteneffizienz auf 394px, Gebietsaufenthalt auf 413px. */ .topbar-left { min-width: 0; } .topbar-title { font-size: 17px; font-weight: 700; letter-spacing: -0.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .topbar-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; overflow: visible; } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; border: none; cursor: pointer; transition: all 0.2s; font-family: inherit; } .btn-primary { background: var(--accent); color: white; } .btn-primary:hover { background: #2563eb; } .btn-ghost { background: transparent; color: var(--text-secondary); border: 1px solid var(--border); } .btn-ghost:hover { background: var(--bg-card); color: var(--text-primary); } .refresh-spin { animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } @keyframes pulse-follow { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:0.4; transform:scale(1.5); } } .content { padding: 14px 20px; } /* Kennzahlen: eine Zeile, kompakt. Vorher vier Spalten mit 20 px Innenabstand und 36-px-Ziffern — mit der Archiv-Kachel brach die Reihe um und ein Viertel des Bildschirms ging für fünf Zahlen drauf. Jetzt stehen Zahl und Beschriftung nebeneinander statt untereinander. */ .stats-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; } .stat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 12px; transition: all 0.2s; /* Die **flex-basis** entscheidet über den Umbruch, nicht `min-width`: Bei `flex-wrap: wrap` füllt der Browser die Zeile nach der Basisgröße und schrumpft erst *innerhalb* der Zeile. Mit 145px brach die Reihe auf dem Tesla-Browser (788px Inhalt) seit der Favoriten-Kachel vom 28.07.2026 in zwei Zeilen um und kostete 55px Höhe — auf einem 780px hohen Schirm das knappste Gut. 118px: 6 × 118 + 5 × 8 Abstand = 748 ≤ 788. */ position: relative; overflow: hidden; flex: 1 1 118px; min-width: 108px; display: flex; align-items: baseline; gap: 9px; } .stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; } .stat-card.moving::before { background: var(--green); } .stat-card.standing::before { background: var(--yellow); } .stat-card.nodata::before { background: var(--red); } .stat-card.total::before { background: var(--accent); } .stat-card.fav::before { background: #fbbf24; } .stat-card:hover { border-color: var(--text-muted); box-shadow: var(--shadow); } .stat-value { font-size: 19px; font-weight: 700; letter-spacing: -.5px; line-height: 1.1; order: 1; } .stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); font-weight: 600; order: 2; } /* Die dritte Zeile („Registrierte Einheiten" …) sagt dasselbe wie die Beschriftung darüber — als Tooltip genügt sie. */ .stat-sub { display: none; } .stat-card.moving .stat-value { color: var(--green); } .stat-card.standing .stat-value { color: var(--yellow); } .stat-card.nodata .stat-value { color: var(--red); } .stat-card.total .stat-value { color: var(--accent); } .stat-card.fav .stat-value { color: #fbbf24; } @media (max-width: 640px) { .stat-card { flex: 1 1 calc(50% - 10px); } } .layout-grid { display: grid; grid-template-columns: 1fr 420px; gap: 20px; margin-bottom: 24px; } .map-container { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } /* `flex-wrap` ist auf schmalen Schirmen entscheidend: Ohne es blieb die Reihe der vier Filterknöpfe neben dem Titel stehen, der dadurch zweizeilig umbrach — Knöpfe und zweite Titelzeile lagen dann gedrängt nebeneinander. Mit Umbruch rutschen die Knöpfe sauber in eine eigene Zeile darunter. */ .map-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 9px 16px; border-bottom: 1px solid var(--border); } .map-title { font-size: 14px; font-weight: 600; } #map { height: 720px; background: var(--bg-primary); } .vehicle-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); display: flex; flex-direction: column; max-height: 790px; } /* Dashboard füllt die Fensterhöhe. Die 720px Kartenhöhe waren für einen großen Schirm gedacht; auf einem Laptop ergaben sie zusammen mit Kopfzeile und Kennzahlen 989px Seitenhöhe. Ein 13"-MacBook-Air hat nach Menü-, Tab- und Adressleiste rund 785px übrig — die unteren 204px, also der Fuß der Fahrzeugliste, lagen außerhalb des Bildes. Die tatsächliche Höhe setzt `dashboardHoeheAnpassen()` (gemessen, nicht geschätzt); hier steht nur, dass sich die Kinder mitdehnen dürfen. ACHTUNG, hier lag der Fehler vom 27.07.2026: Die Grenze stand auf 769px, das Grid stapelte aber schon unter 1201px. Im Bereich dazwischen teilten sich Karte und Liste eine feste Grid-Höhe in zwei Zeilen — mit `height:auto` und `min-height:0` fiel die Karte dabei auf **0 px** zusammen, während die Liste (`max-height:none`) den ganzen Platz nahm. Gemessen im Browser bei 1088/1000/900 px: Kartenhöhe jeweils 0. Betroffen war ausgerechnet der Tesla-Browser (1088 px), gemeldet von Thomas am 28.07.2026. Die Grenze muss deshalb **dieselbe** sein wie die des Grids (1024px), und `seitenHoeheAnpassen()` liest zusätzlich am errechneten Layout ab, ob wirklich zwei Spalten stehen, statt es aus der Fensterbreite zu schließen. */ @media (min-width: 1024px) { #page-dashboard .layout-grid { margin-bottom: 0; } #page-dashboard .map-container { display: flex; flex-direction: column; min-height: 0; } #page-dashboard #map { flex: 1 1 auto; height: auto; min-height: 0; } #page-dashboard .vehicle-panel { max-height: none; min-height: 0; } } .panel-header { display: flex; align-items: center; justify-content: space-between; padding: 9px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .panel-title { font-size: 14px; font-weight: 600; } .search-input { background: var(--bg-primary); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px 8px 36px; color: var(--text-primary); font-size: 13px; font-family: inherit; width: 100%; outline: none; transition: border-color 0.2s; } .search-input:focus { border-color: var(--accent); } .search-wrap { position: relative; padding: 8px 14px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .search-wrap svg { position: absolute; left: 26px; top: 50%; transform: translateY(-50%); color: var(--text-muted); width: 16px; height: 16px; } .filter-tabs { display: flex; gap: 4px; padding: 6px 14px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .filter-tab { padding: 5px 12px; font-size: 12px; font-weight: 600; border-radius: 6px; cursor: pointer; color: var(--text-muted); background: transparent; border: none; font-family: inherit; transition: all 0.2s; } .filter-tab:hover { color: var(--text-secondary); background: var(--bg-primary); } .filter-tab.active { color: var(--accent); background: var(--accent-glow); } /* Unten mehr Luft als oben: Der Stand-Vermerk schwebt (`position: fixed`) unten rechts genau über dieser Liste und verdeckte sonst die letzte Zeile. */ .vehicle-list { flex: 1; overflow-y: auto; padding: 8px 8px 26px; } .vehicle-list::-webkit-scrollbar { width: 6px; } .vehicle-list::-webkit-scrollbar-track { background: transparent; } .vehicle-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } /* Je Eintrag stehen bis zu vier Zeilen untereinander (Kennzeichen, Zustand und Modell, Adresse, Zündung/Spannung/Fahrer). Mit 10px Innenabstand kam er auf 72px — bei 545px Listenhöhe waren das sieben Fahrzeuge. Gekürzt wird nur der Abstand, keine Angabe: 7px ergeben 59px und damit neun sichtbare Fahrzeuge. */ .vehicle-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; cursor: pointer; transition: all 0.15s; margin-bottom: 1px; } .vehicle-item:hover { background: var(--bg-card-hover); } .vehicle-item.selected { background: var(--accent-glow); border: 1px solid rgba(59,130,246,0.3); } .vehicle-status { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .vehicle-status.moving { background: var(--green); box-shadow: 0 0 8px rgba(16,185,129,0.5); } .vehicle-status.standing { background: var(--yellow); box-shadow: 0 0 8px rgba(245,158,11,0.4); } .vehicle-status.stopped { background: var(--orange); } .vehicle-status.nodata { background: var(--text-muted); } .vehicle-info { flex: 1; min-width: 0; } .vehicle-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vehicle-detail { font-size: 11px; color: var(--text-muted); margin-top: 1px; } .vehicle-speed { font-size: 13px; font-weight: 600; font-family: 'JetBrains Mono', monospace; text-align: right; flex-shrink: 0; } .vehicle-speed.has-speed { color: var(--green); } .vehicle-speed.no-speed { color: var(--text-muted); } /* `overflow-x: auto` galt bis zum 28.07.2026 nur im Handy-Block (≤768px). Auf dem Tesla-Schirm (1088px) blähte die breite Tabelle der Kraftstoff-Seite die Seite deshalb auf 1385px auf — dieselbe Falle wie beim Dashboard-Grid: eine Regel hing an einer Breite, die das Zielgerät nicht trifft. Ein Rollbereich schadet auf breiten Schirmen nicht; passt der Inhalt, rollt nichts. */ .route-section { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 24px; overflow-x: auto; } /* Die letzte Spalte (Zielort) lief aus dem Container und war in jeder Zeile abgeschnitten. Lange Adressen brechen jetzt um, statt die Tabelle zu sprengen; wirklich breite Tabellen lassen sich weiterhin schieben. */ .table-wrap { overflow-x: auto; } .table-wrap table { width: 100%; } .table-wrap td { word-break: break-word; } #routeTable th:nth-child(9), #routeTable th:nth-child(10), #routeTable td:nth-child(9), #routeTable td:nth-child(10) { min-width: 190px; max-width: 300px; white-space: normal; overflow-wrap: anywhere; word-break: break-word; vertical-align: top; } /* Dasselbe für die Start-/Zielort-Spalten im Fahrtenbuch. Dort standen nur `max-width:190px` ohne Umbruch — zusammen mit dem globalen `white-space: nowrap` für Zellen lief der Text über die Zellgrenze und überlagerte die Nachbarspalte, auf dem Handy bis zur Unlesbarkeit (gemeldet 26.07.2026). */ /* Klasse statt ID: Im Sammelmodus steht je Fahrzeug eine eigene Tabelle auf der Seite — eine ID darf es nur einmal geben (10.08.2026). */ .logbook-table th:nth-child(5), .logbook-table th:nth-child(6), .logbook-table td:nth-child(5), .logbook-table td:nth-child(6) { min-width: 150px; max-width: 260px; white-space: normal; overflow-wrap: anywhere; word-break: break-word; vertical-align: top; } table { width: 100%; border-collapse: collapse; } th { text-align: left; padding: 12px 16px; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); font-weight: 600; border-bottom: 1px solid var(--border); white-space: nowrap; } th.sortable { color: var(--text); transition: color 0.2s; } th.sortable:hover { color: var(--accent); } th.sortable.active { color: var(--accent); background: rgba(59, 130, 246, 0.1); } td { padding: 12px 16px; font-size: 13px; border-bottom: 1px solid rgba(42,54,84,0.5); white-space: nowrap; } tr:last-child td { border-bottom: none; } tr:hover td { background: var(--bg-card-hover); } .mono { font-family: 'JetBrains Mono', monospace; font-size: 12px; } .plate-badge { display:inline-block; background:#1a56db; color:#fff; font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:700; padding:2px 8px; border-radius:4px; letter-spacing:0.5px; border-left:3px solid #2563eb; } .badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 6px; font-size: 11px; font-weight: 600; } .badge.moving { background: var(--green-bg); color: var(--green); } .badge.standing { background: var(--yellow-bg); color: var(--yellow); } .badge.stopped { background: rgba(249,115,22,0.12); color: var(--orange); } .badge.nodata { background: rgba(85,102,133,0.15); color: var(--text-muted); } .alert-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 12px; } .alert-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; display: flex; align-items: flex-start; gap: 14px; transition: all 0.2s; } .alert-item:hover { border-color: var(--text-muted); } .alert-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 18px; } .alert-icon.speed { background: var(--red-bg); } .alert-icon.geofence { background: var(--yellow-bg); } .alert-icon.fuel { background: var(--green-bg); } .alert-text { font-size: 13px; font-weight: 500; margin-bottom: 4px; } .alert-meta { font-size: 11px; color: var(--text-muted); } .loading-overlay { position: fixed; inset: 0; background: var(--bg-primary); z-index: 1000; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 24px; transition: opacity 0.5s; } .loading-overlay.hidden { opacity: 0; pointer-events: none; } .loader { width: 48px; height: 48px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; } .loading-text { font-size: 14px; color: var(--text-secondary); font-weight: 500; } .modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); z-index: 500; display: none; align-items: center; justify-content: center; /* Lange Dialoge liefen unten aus dem Bild und liessen sich nicht scrollen — der Hintergrund zentrierte sie starr. Jetzt darf der Inhalt rollen. */ padding: 24px 0; overflow-y: auto; } .modal-backdrop.open { display: flex; } .modal { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 16px; padding: 32px; width: 480px; max-width: 90vw; box-shadow: 0 24px 64px rgba(0,0,0,0.5); /* Hoehe begrenzen und scrollbar machen, sonst laufen lange Dialoge wie die Benutzerverwaltung unten aus dem Bild. */ max-height: calc(100vh - 48px); overflow-y: auto; } /* Die Knopfleiste klebt am unteren Rand des Dialogs, damit Speichern und Abbrechen auch bei langem Inhalt erreichbar bleiben. */ .modal .modal-actions { position: sticky; bottom: -32px; background: var(--bg-secondary); padding: 14px 0 0; margin-top: 8px; border-top: 1px solid var(--border); } .modal h2 { font-size: 20px; font-weight: 700; margin-bottom: 8px; } .modal p { font-size: 13px; color: var(--text-muted); margin-bottom: 24px; } .form-group { margin-bottom: 16px; } .form-label { display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; } .form-input { width: 100%; padding: 10px 14px; background: var(--bg-primary); border: 1px solid var(--border); border-radius: 8px; color: var(--text-primary); font-size: 14px; font-family: 'JetBrains Mono', monospace; outline: none; transition: border-color 0.2s; } .form-input:focus { border-color: var(--accent); } input[type="date"]::-webkit-calendar-picker-indicator, input[type="week"]::-webkit-calendar-picker-indicator, input[type="month"]::-webkit-calendar-picker-indicator { filter: invert(0.8); cursor: pointer; } html.light input[type="date"]::-webkit-calendar-picker-indicator, html.light input[type="week"]::-webkit-calendar-picker-indicator, html.light input[type="month"]::-webkit-calendar-picker-indicator { filter: none; } .modal-actions { display: flex; gap: 12px; margin-top: 24px; } .modal-actions .btn { flex: 1; justify-content: center; padding: 10px; } .detail-panel { position: fixed; right: -500px; top: 0; bottom: 0; width: 440px; background: var(--bg-secondary); border-left: 1px solid var(--border); z-index: 150; transition: right 0.35s cubic-bezier(0.4,0,0.2,1); overflow-y: auto; box-shadow: -8px 0 32px rgba(0,0,0,0.3); } .detail-panel.open { right: 0; } .detail-header { padding: 20px 24px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; background: var(--bg-secondary); z-index: 10; } .detail-close { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 4px; border-radius: 6px; transition: all 0.2s; } .detail-close:hover { color: var(--text-primary); background: var(--bg-card); } .detail-body { padding: 20px 24px; } .detail-field { margin-bottom: 16px; } .detail-field-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); font-weight: 600; margin-bottom: 4px; } .detail-field-value { font-size: 14px; font-weight: 500; } .page { display: none; } .page.active { display: block; } .config-bar { background: rgba(59,130,246,0.08); border: 1px solid rgba(59,130,246,0.2); border-radius: 10px; padding: 12px 20px; margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between; } .config-bar-text { font-size: 13px; color: var(--accent); font-weight: 500; } /* Zwischen Laptop- und Tabletbreite bleibt es zweispaltig, nur mit schmalerem Panel — sonst bliebe der Karte zu wenig Breite. Betrifft direkt den Tesla-Browser (1088 px breit, 780 px hoch): Dort ist die Höhe knapp und die Breite reichlich, Karte und Liste nebeneinander sind also genau richtig. Unter 1024 px wird gestapelt; die Höhenlogik weiter oben ist an dieselbe Grenze gebunden. */ @media (min-width: 1024px) and (max-width: 1200px) { .layout-grid { grid-template-columns: minmax(0, 1fr) 320px; } } @media (max-width: 1023px) { .layout-grid { grid-template-columns: 1fr; } } /* Gestapelt, aber mit Desktop-Menü (769–1023 px): feste, maßvolle Höhen. Die 720px der Grundregel ergäben hier wieder eine Seite, die weit aus dem Fenster läuft. */ @media (min-width: 769px) and (max-width: 1023px) { #map { height: 400px; } .vehicle-panel { max-height: 480px; } } @media (max-width: 768px) { .sidebar { transform: translateX(-100%); z-index: 200; } .sidebar.open { transform: translateX(0); } .main { margin-left: 0; } .content { padding: 12px; } .stat-card { padding: 8px 12px; } .stat-value { font-size: 20px; } .stat-label { font-size: 10px; } .stat-sub { font-size: 10px; } .layout-grid { grid-template-columns: 1fr; gap: 12px; } #map { height: 350px; } .vehicle-panel { max-height: 400px; } .topbar { padding: 10px 16px; } .topbar-title { font-size: 16px; } .alert-grid { grid-template-columns: 1fr; } #page-stats > div:last-child { grid-template-columns: 1fr !important; } #page-reports > div:nth-child(2) { grid-template-columns: 1fr !important; } #page-geofence > div:nth-child(2) { grid-template-columns: 1fr !important; } #page-geofence > div:nth-child(2) > div:first-child > div:last-child { height: 300px !important; } #page-maintenance > div:nth-child(3) { grid-template-columns: 1fr !important; } #page-fuel > div:nth-child(2) { grid-template-columns: 1fr !important; } #page-groups > div:nth-child(3) { grid-template-columns: 1fr !important; } #page-logbook > div:nth-child(2) { grid-template-columns: 1fr !important; } /* Der wichtigste Handgriff für die Handyansicht: Grid-Kinder brauchen `min-width: 0`. Ohne das behalten sie ihre **Inhalts**-Mindestbreite (CSS-Vorgabe `min-width: auto`) — eine breite Tabelle drückt dann nicht nur sich selbst, sondern den **gesamten Layout-Viewport** auf. Gemessen am 26.07.2026: Im Fahrtenbuch wuchs `window.innerWidth` von 390 auf 1203 px, weshalb dort auch Knöpfe und Eingabefelder rechts abgeschnitten waren, nicht nur die Tabelle. Im Kraftstoff-Kalkulator dasselbe mit 651 px — schon durch die *leere* Platzhaltertabelle. Mit `min-width: 0` bleibt die Seite bei 390 px und die Tabelle wird innerhalb ihres Rahmens scrollbar, wie vorgesehen. */ #page-logbook > div:nth-child(2) > div, #page-fuel > div:nth-child(2) > div, #page-stats > div:last-child > div, #page-reports > div:nth-child(2) > div, #page-geofence > div:nth-child(2) > div, #page-maintenance > div:nth-child(3) > div, #page-groups > div:nth-child(3) > div, .layout-grid > div { min-width: 0; } #notifPanel { width: calc(100vw - 32px) !important; max-width: 360px !important; right: 16px !important; } .modal { width: 95vw; padding: 20px; } .detail-panel { width: 100%; right: -100%; } .detail-panel.open { right: 0; } .config-bar { padding: 10px 14px; } .config-bar-text { font-size: 12px; } /* Mobile hamburger */ .mobile-menu-btn { display: flex !important; } /* Mobile overlay when sidebar open */ .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 199; } .sidebar-overlay.open { display: block; } /* Tabellen: Auf dem Handy passen zwölf Spalten nicht nebeneinander. Statt alles zusammenzuquetschen bleiben die wichtigen Spalten stehen, die technischen (Zündung, Spannung, Temperatur, Tank) verschwinden — sie sind im Fahrzeug-Detailpanel weiterhin abrufbar. Ohne das waren neun von zwölf Spalten nur per Wischen erreichbar. */ #page-vehicles th:nth-child(9), #page-vehicles td:nth-child(9), #page-vehicles th:nth-child(10), #page-vehicles td:nth-child(10), #page-vehicles th:nth-child(11), #page-vehicles td:nth-child(11), #page-vehicles th:nth-child(12), #page-vehicles td:nth-child(12) { display: none; } /* Hinweis, dass eine Tabelle seitlich weitergeht — sonst sieht man den abgeschnittenen Teil schlicht nicht. Der Schatten liegt am rechten Rand des Rollbereichs und verschwindet, sobald man ans Ende gewischt hat. */ /* Zwei Tabellen im Admin-Bereich (Fahrzeuge, Benutzer) liegen direkt in der Sektion, ohne den sonst üblichen `.table-wrap`. Ohne eigenen Rollbereich wurden sie schlicht abgeschnitten — die rechten Spalten waren auf dem Handy gar nicht erreichbar, und der Hinweisschatten unten log. */ .route-section { overflow-x: auto; } .table-wrap, .route-section { position: relative; } .table-wrap::after, .route-section::after { content: ''; position: absolute; top: 0; right: 0; width: 24px; height: 100%; pointer-events: none; background: linear-gradient(to right, rgba(0,0,0,0), var(--bg-card)); } /* Werkzeugzeile im Gebietsaufenthalt: Ohne Umbruch quetschten sich Label, drei Knöpfe und die Zonenauswahl auf eine Zeile — das Auswahlfeld schrumpfte auf 75px und schnitt seinen eigenen Text ab. Beim Geofencing bricht dieselbe Art Zeile bereits sauber um; hier fehlte es nur. */ #page-area-report .config-bar, #page-area-report .config-bar > div { flex-wrap: wrap; gap: 8px; } /* Klickflächen: Auf Touch-Bildschirmen sind Ziele unter etwa 40px schwer zu treffen. Betrifft vor allem die Kopfzeile, über die die ganze Navigation läuft. */ .mobile-menu-btn, #themeToggle, #notifBell, .topbar-actions button, .topbar-actions select { min-width: 40px; min-height: 40px; } /* Nur die **Höhe** anheben, nicht die Breite: Abmelden, Sprachwahl und das Schließen-Kreuz waren 28px hoch. Eine Mindestbreite hätte die Kopfzeile wieder über den Bildschirmrand geschoben (sie ist bei 390px auf 227px ausgereizt), die Höhe kostet dagegen nichts. */ .topbar-right .btn, .topbar-right select, .detail-close { min-height: 40px; } .map-header .btn-sm { padding: 9px 12px; min-height: 38px; } /* Table scroll */ .table-wrap { font-size: 12px; } th, td { padding: 8px 10px; } /* Route/Fuel inputs */ .content .form-input { max-width: 100% !important; } #page-routes > div:nth-child(2), #page-fuel > div:nth-child(2), #page-stats > div:nth-child(2) { flex-direction: column; } /* Area Report: Karte kleiner auf Mobile */ #page-area-report #arMap { height: 300px !important; } /* Efficiency: Grid 1-spaltig */ #efficiencyContent { grid-template-columns: 1fr !important; } /* Messages: Vertikal statt nebeneinander */ #page-messages > div:nth-child(2) { flex-direction: column !important; height: auto !important; min-height: 0 !important; } #page-messages > div:nth-child(2) > div:first-child { width: 100% !important; min-width: 0 !important; border-right: none !important; border-bottom: 1px solid var(--border); max-height: 200px; } /* User-Modal: Form-Grid 1-spaltig */ #userModal .modal > div:nth-of-type(1) { grid-template-columns: 1fr !important; } /* Config-Bar: Text-Overflow verhindern */ .config-bar-text { word-break: break-word; min-width: 0; } /* Werkzeugzeile im Gebietsaufenthalt: „Gebiet", drei Knöpfe und die Zonenauswahl standen zwangsweise in einer Reihe. Der Auswahl blieben davon 190px (ihr inline gesetztes `max-width`), in denen „– gespeicherte Zone –" mitten im Wort abschnitt. Auf dem Handy darf die Reihe umbrechen, und die Auswahl bekommt eine eigene Zeile. Das `!important` ist nötig, weil das `max-width` im HTML-Attribut steht und sonst gewinnt. */ #page-area-report .ar-gebiet-kopf, #page-area-report .ar-zonenzeile { flex-wrap: wrap; } #page-area-report .ar-zonenzeile { flex: 1 1 100%; } #page-area-report #arZoneWahl { max-width: 100% !important; flex: 1 1 100%; } /* Fuel Summary: 4-spaltig zu 2-spaltig */ #fuelCalcSummary { grid-template-columns: 1fr 1fr !important; } } @media (max-width: 420px) { .stats-grid { gap: 6px; } .stat-card { padding: 7px 10px; } .stat-value { font-size: 24px; } .stat-label { font-size: 9px; letter-spacing: 0.5px; } .stat-sub { display: none; } .topbar-title { font-size: 14px; } .topbar-right .btn { padding: 6px 10px; font-size: 11px; } .topbar-right .btn svg { width: 14px; height: 14px; } .map-header { padding: 10px 14px; } .panel-header { padding: 10px 14px; } .vehicle-item { padding: 8px 10px; } .vehicle-name { font-size: 12px; } .vehicle-speed { font-size: 11px; } #map { height: 280px; } .alert-item { padding: 12px; } /* Area Report Karte noch kleiner */ #page-area-report #arMap { height: 250px !important; } /* Fuel Summary 1-spaltig */ #fuelCalcSummary { grid-template-columns: 1fr !important; } /* Messages Konversationsliste kürzer */ #page-messages > div:nth-child(2) > div:first-child { max-height: 150px; } } @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .stat-card { animation: fadeIn 0.4s ease backwards; } .stat-card:nth-child(2) { animation-delay: 0.05s; } .stat-card:nth-child(3) { animation-delay: 0.1s; } .stat-card:nth-child(4) { animation-delay: 0.15s; } .mobile-menu-btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--text-primary); cursor: pointer; flex-shrink: 0; transition: background 0.2s; } .mobile-menu-btn:hover { background: var(--bg-card); } .sidebar-overlay { display: none; } /* Menüleiste auf breiten Screens manuell ein-/ausklappen (Zustand gemerkt). Nur >768px — bei ≤768px gilt weiter das Overlay-Verhalten der Media Query. */ @media (min-width: 769px) { body.nav-collapsed .sidebar { transform: translateX(-100%); } body.nav-collapsed .main { margin-left: 0; } /* Auto-Hide (Mac-Dock-Stil): Leiste verborgen, fährt am linken Rand aus */ body.nav-autohide .sidebar { transform: translateX(-100%); box-shadow: none; } body.nav-autohide .sidebar.peek { transform: translateX(0); box-shadow: 0 12px 40px rgba(0,0,0,0.55); } body.nav-autohide .main { margin-left: 0; } body.nav-autohide #navHotzone { display: block; } } /* Trigger-Streifen am linken Rand — nur im Auto-Hide-Modus sichtbar/aktiv. z-index unter der Leiste (100), damit die ausgefahrene Leiste Klicks bekommt. */ #navHotzone { display: none; position: fixed; left: 0; top: 0; bottom: 0; width: 14px; z-index: 90; cursor: pointer; } .leaflet-container { z-index: 1 !important; } .leaflet-tile-pane { z-index: 200 !important; } .leaflet-overlay-pane { z-index: 400 !important; } .leaflet-marker-pane { z-index: 600 !important; } .leaflet-top, .leaflet-bottom { z-index: 1000 !important; } .custom-marker { background: none; border: none; } .marker-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 18px; color: white; border: 2px solid white; box-shadow: 0 2px 8px rgba(0,0,0,0.4); position: relative; transition: transform 0.3s; } .marker-icon.moving { background: var(--green); } .marker-icon.standing { background: var(--yellow); } .marker-icon.stopped { background: var(--orange); } .marker-icon.nodata { background: var(--text-muted); } .marker-icon svg { display: block; } /* Fahrtrichtung: dreht sich um den Marker-Mittelpunkt, die Silhouette bleibt aufrecht. */ .marker-heading { position: absolute; inset: 0; pointer-events: none; } .marker-heading::before { content: ''; position: absolute; top: -9px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 9px solid #fff; filter: drop-shadow(0 0 1.5px rgba(0,0,0,0.85)); } /* Die Foto-Marker (echte Tesla-Bilder) sind am 26.07.2026 auf Wunsch von Thomas wieder entfernt worden — alle Fahrzeuge tragen die Silhouette. Das Vorhaben wird später komplett neu angegangen; die Bilder liegen weiterhin unter static/img/. Wer es erneut versucht, sollte zwei Dinge wissen: Leaflet bringt `.leaflet-container .leaflet-marker-pane img { width: auto; }` mit und schlägt damit jede einfache Klassenregel (die Breite muss also als inline-style oder mit höherer Spezifität kommen), und die Bild-URLs brauchen bei jedem Tausch ein neues `?v=N`. Details in der CLAUDE.md. */ .marker-label { position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.8); color: white; padding: 2px 6px; border-radius: 4px; font-size: 10px; font-family: 'DM Sans', sans-serif; white-space: nowrap; font-weight: 600; } .leaflet-popup-content-wrapper { background: var(--bg-card) !important; color: var(--text-primary) !important; border: 1px solid var(--border) !important; border-radius: 10px !important; box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important; } .leaflet-popup-tip { background: var(--bg-card) !important; } .leaflet-popup-content { margin: 12px 16px !important; font-family: 'DM Sans', sans-serif !important; } .leaflet-control-layers { background: var(--bg-card) !important; border: 1px solid var(--border) !important; border-radius: 8px !important; color: var(--text-primary) !important; box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important; } .leaflet-control-layers-toggle { width: 32px !important; height: 32px !important; } .leaflet-control-layers label { color: var(--text-primary) !important; font-family: 'DM Sans', sans-serif !important; font-size: 13px !important; padding: 3px 0 !important; } .leaflet-control-layers-separator { border-color: var(--border) !important; } .leaflet-control-layers-expanded { padding: 8px 12px !important; } html.light .leaflet-control-layers { background: #fff !important; border-color: #e0e4ea !important; color: #1a202c !important; box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important; } html.light .leaflet-control-layers label { color: #1a202c !important; } html.light .leaflet-popup-content-wrapper { background: #fff !important; color: #1a202c !important; border-color: #e0e4ea !important; box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important; } html.light .leaflet-popup-tip { background: #fff !important; } html.light .marker-label { background: rgba(255,255,255,0.9); color: #1a202c; } html.light .search-input { background: #f0f2f5; border-color: #e0e4ea; color: #1a202c; } html.light .form-input { background: #f0f2f5; border-color: #e0e4ea; color: #1a202c; } html.light .topbar { background: rgba(255,255,255,0.9); border-bottom-color: #e0e4ea; } html.light .loading-overlay { background: #f0f2f5; } html.light .logo-icon { box-shadow: 0 4px 16px rgba(59,130,246,0.2); } html.light .modal { background: #fff; border-color: #e0e4ea; } html.light .modal-backdrop { background: rgba(0,0,0,0.3); } html.light .detail-panel { background: #fff; border-left-color: #e0e4ea; } html.light .detail-header { background: #fff; } html.light .btn-ghost { border-color: #e0e4ea; color: #4a5568; } html.light .btn-ghost:hover { background: #f5f7fa; } html.light .nav-item { color: #4a5568; } html.light .nav-item:hover { background: #f5f7fa; color: #1a202c; } html.light .nav-item.active { background: rgba(59,130,246,0.08); color: #3b82f6; } .compare-panel { position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:90%;max-width:900px;background:var(--bg-card);border:1px solid var(--border);border-radius:12px 12px 0 0;box-shadow:0 -8px 30px rgba(0,0,0,0.4);z-index:500;padding:20px;display:none; } .compare-panel.open { display:block; } .kbd-hint { position:fixed;bottom:8px;right:8px;font-size:10px;color:var(--text-muted);opacity:0.4;z-index:50; } .kbd-hint a { color:inherit;text-decoration:none; } .kbd-hint a:hover { opacity:0.8;text-decoration:underline; } /* Auf dem Handy nicht schweben: fest unten rechts lag der Vermerk **über** dem Inhalt und verdeckte im Fahrtenbuch die letzte Textzeile. Die Regel steht bewusst hier und nicht im großen Mobil-Block weiter oben — der liegt vor `.kbd-hint`, und bei gleicher Spezifität gewinnt die spätere Regel. */ @media (max-width: 768px) { .kbd-hint { position: static; display: block; text-align: center; padding: 14px 12px 20px; } } .idle-badge { background:#f59e0b;color:#000;padding:2px 6px;border-radius:4px;font-size:10px;font-weight:600; } .night-badge { background:#7c3aed;color:#fff;padding:2px 6px;border-radius:4px;font-size:10px;font-weight:600; } /* Multi-Select Vehicle Picker */ .ms-picker { position:relative;display:inline-block;min-width:250px; } .ms-picker-btn { display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;font-size:13px;color:var(--text-primary);font-family:'DM Sans',sans-serif;min-height:38px;user-select:none; } .ms-picker-btn:hover { border-color:var(--accent); } .ms-picker-btn .ms-arrow { font-size:10px;opacity:0.5;transition:transform 0.2s; } .ms-picker.open .ms-arrow { transform:rotate(180deg); } .ms-picker-dd { display:none;position:absolute;top:100%;left:0;right:0;margin-top:4px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 8px 24px rgba(0,0,0,0.3);z-index:100;max-height:300px;overflow:hidden; } .ms-picker.open .ms-picker-dd { display:block; } .ms-picker-search { width:100%;padding:8px 12px;border:none;border-bottom:1px solid var(--border);background:var(--bg-secondary);color:var(--text-primary);font-size:12px;font-family:'DM Sans',sans-serif;outline:none; } .ms-picker-list { max-height:240px;overflow-y:auto; } .ms-picker-item { display:flex;align-items:center;gap:8px;padding:6px 12px;cursor:pointer;font-size:12px;color:var(--text-primary);transition:background 0.1s; } .ms-picker-item:hover { background:var(--bg-secondary); } .ms-picker-item input[type=checkbox] { accent-color:var(--accent);width:14px;height:14px;cursor:pointer; } .ms-picker-item.ms-all { border-bottom:1px solid var(--border);font-weight:600; } /* Favoriten-Stern in der Fahrzeugtabelle: blass, solange er nicht gesetzt ist — sonst wäre eine Spalte voller Sterne das Auffälligste an der Tabelle. */ .stern { cursor:pointer;margin-right:6px;font-size:13px;opacity:.3;transition:opacity .15s;user-select:none; } .stern:hover, .stern.aktiv { opacity:1; } /* „Nur Favoriten" ist ein