/* ══════════════════════════════════════════════════════════════════════════ Fleetman — Markenschicht Brandline 2.0.0, freigegeben 30.08.2026. Quelle: brandline/tokens/ Die einzige Stelle, an der die Farben der Oberfläche stehen. Werte hier ändern, und die ganze Anwendung folgt. ── Was fest ist und was nicht ──────────────────────────────────────────── **Die Verwaltungsoberfläche ist Fleetman und sieht überall gleich aus.** Farben, Abstände, Formen sind Produkt, nicht Kundenwunsch. Ein Werkzeug, das bei jedem Kunden anders aussieht, kann man weder zeigen noch supporten — und kein Screenshot in der Anleitung passt dann irgendwo. **Anpassbar ist genau eine Sache: das Fahrerportal am Handy.** Das sehen die Mitarbeiter des Kunden, oft mehrmals täglich, und dort gehören die Farben der Firma hin — je Gesellschaft, über `Company.color_primary`. **Dokumente behalten das Logo des Kunden** — Berichte gehen nach aussen und tragen dessen Briefkopf, nicht unseren. ── Ausgenommen ─────────────────────────────────────────────────────────── Zwei Bereiche bleiben aussen vor, weil dort keine CSS-Variablen greifen: · PDF-Vorlagen (pdf_*.html, monthly_report_pdf.html) · E-Mail-Inhalte (password_reset_email.html, HTML in email_utils.py) ══════════════════════════════════════════════════════════════════════════ */ :root { /* ── Brandline 2.0: die freigegebenen Werte, unverändert ────────────── Diese neun Werte sind die Marke. Alles darunter leitet sich daraus ab. */ --fleetman-ink: #0B1324; /* Text, dunkle Flächen */ --fleetman-app-navy: #021053; /* Feld des App-Symbols, edle Dunkelflächen */ --fleetman-motion-blue: #3B5BFF; /* Bewegung, Betonung */ --fleetman-live-mint: #10D7A0; /* positiv, live, aktuell */ --fleetman-signal-mint: #29F5B5; /* Punkt im Symbol, Familienmerkmal */ --fleetman-cloud: #F5F7FB; /* heller Markenuntergrund */ --fleetman-mist: #E7ECF3; /* Linien, Paneele */ --fleetman-slate: #667085; /* Sekundärtext */ --fleetman-white: #FFFFFF; /* ── Markenfarben in der Oberfläche ─────────────────────────────────── Grosse dunkle Flächen tragen Ink, nicht App Navy: Die Marke soll „ruhig" wirken, und ein ganzer Seitenbalken in der Symbolfarbe wirkt laut. App Navy bleibt die zweite Ebene — damit ist die Verwandtschaft zum Symbol sichtbar, ohne zu dominieren. */ --fm-chrome: var(--fleetman-ink); /* Die Seitenleiste. Bis 31.08.2026 trug sie Ink — seit der Aufmacher im Inhalt App Navy traegt, standen zwei fremde Dunkeltoene nebeneinander. Jetzt dieselbe Familie: App Navy, fuer die grosse Flaeche abgedunkelt (das Brandbook nennt die reine Symbolfarbe fuer ganze Balken „laut"). Der Aufmacher bleibt heller und hebt sich dadurch ab. */ --fm-leiste: #040D33; --fm-chrome-hell: var(--fleetman-app-navy); --fm-chrome-tief: #1B2740; /* Trennlinien auf Dunkel */ --fm-chrome-schwarz:#060B16; /* tiefste Ebene */ --fm-primaer: var(--fleetman-motion-blue); /* ── Bedeutungsfarben ───────────────────────────────────────────────── Bewusst getrennt von der Marke: „überfällig" muss rot bleiben, auch wenn ein Kunde seine Marke auf Rot stellt. Zum Mint: Live Mint auf Weiss ergibt rund 1,9:1 — als Text oder Symbol auf hellem Grund unlesbar. Das Brandbook sagt es selbst („Kontrast im Produktkontext prüfen", „Mint nicht als grosse Fläche"). Deshalb führt „Erfolg" auf hellem Grund einen abgedunkelten Mintton derselben Farbfamilie; das reine Mint bleibt Akzent auf dunklem Grund. */ --fm-erfolg: #067A5B; /* Mint-Familie, 5,4:1 auf Weiss */ --fm-erfolg-2: #0A8F6C; --fm-erfolg-3: #056348; --fm-erfolg-tief: #045440; --fm-erfolg-flaeche:#E4F8F1; --fm-gefahr: #C0342B; /* überfällig, Fehler, Löschen */ --fm-warnung: #9A5D00; /* wird fällig — 5,1:1 auf Weiss */ --fm-warnung-2: #D98B0A; --fm-warnung-3: #8F5600; --fm-warnung-flaeche:#FDF3E2; --fm-info: #1B6E8C; --fm-akzent: var(--fleetman-motion-blue); --fm-akzent-2: #2E49D6; --fm-akzent-3: #5B75FF; /* ── Live-Akzent ────────────────────────────────────────────────────── Sparsam einsetzen: aktiv, laufend, aktuell — und nur auf dunklem Grund. Nie als Fläche. */ --fm-live: var(--fleetman-live-mint); --fm-signal: var(--fleetman-signal-mint); /* ── Neutrale Töne ────────────────────────────────────────────────────*/ --fm-gedaempft: var(--fleetman-slate); --fm-grau: #8A93A6; --fm-grau-2: var(--fleetman-slate); --fm-grau-3: #B7C0D0; /* ── Flächen ────────────────────────────────────────────────────────── Die Staffelung des Brandbooks: Cloud ist der Untergrund, Weiss trägt den Inhalt, Mist zieht die Linien dazwischen. */ --fm-flaeche: var(--fleetman-cloud); --fm-flaeche-2: var(--fleetman-mist); --fm-flaeche-3: #DDE3EC; --fm-weiss: var(--fleetman-white); /* ── Altlasten aus custom.css ───────────────────────────────────────── Diese Namen standen bis 31.08.2026 in einem eigenen `:root`-Block in custom.css — mit der Farbwelt des Vorgängers: `--fm-accent: #1e2633` (ein dunkles Schiefergrau, nicht Ink), `--bg-body: #f5f3f0` (ein Beige). Weil custom.css NACH marke.css steht, gewann dieser Block: Die Marke lag zwar oben im , unten wurde sie überschrieben. Die Namen bleiben — sie stehen an über neunzig Stellen — aber sie zeigen jetzt auf die Brandline. */ --fm-brown-30: rgba(11, 19, 36, .3); --fm-brown-hover: var(--fm-chrome-hell); --fm-accent-soft: rgba(11, 19, 36, .07); --text-light: var(--fleetman-white); --text-dark: var(--fleetman-ink); --text-muted: var(--fleetman-slate); --bg-body: var(--fleetman-cloud); --bg-card: var(--fleetman-white); --border-light: var(--fleetman-mist); /* Ruhige Kanten statt Schlagschatten (Brandline §5). */ --shadow-xs: none; --shadow-sm: none; --shadow-md: 0 4px 16px rgba(11, 19, 36, .07); --shadow-lg: 0 8px 32px rgba(11, 19, 36, .10); /* ── Kanten ─────────────────────────────────────────────────────────── Kantig, nicht rund. Das App-Symbol ist laut Brandbook „ein eigenständiges kantiges F" — weiche 10- bis 14-px-Ecken widersprechen dem und lassen ein Werkzeug wie eine Handy-App aussehen. 3 px ist genug, damit nichts scharf sticht, und wenig genug, dass die Form gerade bleibt (Entscheidung 31.08.2026). */ --radius-sm: 3px; --radius-md: 3px; --radius-lg: 4px; --transition: all .18s ease; /* ── Bootstrap trägt jetzt unsere Farben ────────────────────────────── Bootstrap bringt eine vollständige eigene Palette mit: #0d6efd für jeden Link und jeden „primary"-Knopf, #198754 grün, #dc3545 rot, #0dcaf0 türkis, #212529 für Text, #dee2e6 für Linien. Diese Werte standen unverändert im Produkt — und weil in 165 Vorlagen `btn-primary`, `badge bg-success`, `alert-info` und `text-primary` stehen, war das die Farbwelt, die man tatsächlich sah. Die Brandline lag darüber wie ein Anstrich, der nur die Ränder erwischt hat. Deshalb hier: Bootstraps eigene Variablen zeigen auf unsere Werte. Kein Markup muss dafür angefasst werden. Die `-rgb`-Fassungen braucht Bootstrap für die `bg-*`-Klassen — die rechnen mit `rgba(var(--bs-success-rgb), var(--bs-bg-opacity))`. Ohne sie bleibt das Abzeichen in der alten Farbe. */ --bs-primary: var(--fleetman-motion-blue); --bs-primary-rgb: 59, 91, 255; --bs-secondary: var(--fleetman-slate); --bs-secondary-rgb: 102, 112, 133; --bs-success: #067A5B; --bs-success-rgb: 6, 122, 91; --bs-danger: #C0342B; --bs-danger-rgb: 192, 52, 43; --bs-warning: #D98B0A; --bs-warning-rgb: 217, 139, 10; --bs-info: #1B6E8C; --bs-info-rgb: 27, 110, 140; --bs-dark: var(--fleetman-ink); --bs-dark-rgb: 11, 19, 36; --bs-light: var(--fleetman-cloud); --bs-light-rgb: 245, 247, 251; --bs-body-color: var(--fleetman-ink); --bs-body-color-rgb: 11, 19, 36; --bs-body-bg: var(--fleetman-white); --bs-border-color: var(--fleetman-mist); --bs-secondary-color: var(--fleetman-slate); --bs-link-color: var(--fleetman-motion-blue); --bs-link-color-rgb: 59, 91, 255; --bs-link-hover-color: #2E49D6; --bs-emphasis-color: var(--fleetman-ink); --bs-font-sans-serif: var(--fm-schrift); --bs-border-radius: 3px; --bs-border-radius-sm: 2px; --bs-border-radius-lg: 4px; --bs-border-radius-xl: 4px; --bs-border-radius-xxl: 6px; /* Auch die Pillen werden eckig — sonst stehen runde Abzeichen in kantigen Karten und es sieht nach zwei Entwürfen aus. */ --bs-border-radius-pill: 3px; /* ── Linien und leiser Text ─────────────────────────────────────────── Nachgetragen am 31.08.2026: geruest.css benutzte beide Namen, ohne dass sie irgendwo standen. Ein `var()` ohne Wert macht die GANZE Eigenschaft ungültig — aus `border: 1px solid var(--fm-linie)` wird damit `border-style: none`. Jede Karte stand ohne Rand da, und im Browser war keine Fehlermeldung zu sehen. */ --fm-linie: var(--fleetman-mist); --fm-linie-2: #DDE3EC; --fm-text: var(--fleetman-ink); --fm-text-leise: var(--fleetman-slate); /* ── Schrift ────────────────────────────────────────────────────────── Brandline: Inter Display für Marke und grosse Überschriften, Inter für Oberfläche und Fliesstext. ⚠️ „Inter Display" ist KEINE eigene Schriftfamilie. Es ist Inter bei optischer Grösse 32 — engere Buchstabenabstände, feinere Strichenden. Hier stand früher `font-family: "Inter Display"`; das trifft auf nichts zu und fiel still auf Inter zurück. Die Regel des Brandbooks war damit nie in Kraft, und man sah es nicht. Gesteuert wird die Achse über `font-variation-settings` (siehe unten). Die ausgelieferten Dateien tragen beide Achsen: Gewicht und opsz. Ausgeliefert wird selbst — bewusst nicht über einen fremden Schriftdienst, weil das die IP-Adresse jedes Nutzers an Dritte schickt. Fehlen die Dateien, greift die Systemschrift; dann sieht die Anwendung anders aus, aber nicht kaputt. */ --fm-schrift: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --fm-schrift-titel: var(--fm-schrift); /* Optische Grössen der Brandline. 14 ist die Vorgabe der Schrift, 32 ihr Display-Ende. Dazwischen wird nicht willkürlich gewählt. */ --fm-opsz-text: 14; --fm-opsz-titel: 32; /* ── Geometrie ──────────────────────────────────────────────────────── Der Vorwärtsschnitt aus dem Symbol, als Winkel verfügbar für Trennelemente. Sparsam — nicht am Symbol selbst herumbauen. */ --fm-vorwaertsschnitt: 52deg; /* ── Altnamen ───────────────────────────────────────────────────────── Der Bestand verwendet diese Namen an vielen Stellen. Sie zeigen auf die Marke, statt eigene Werte zu führen. */ --fm-brown: var(--fm-chrome); --fm-brown-light: var(--fm-chrome-hell); --fm-accent: var(--fm-chrome); } /* ── Schriftdateien ─────────────────────────────────────────────────────── Inter als variable Schrift, selbst ausgeliefert. Bezogen über npm (@fontsource-variable/inter, SIL Open Font License), abgelegt von vendor_sync.js unter static/fonts/inter/. Je Schnitt zwei Dateien: "latin" deckt Deutsch ab, "latin-ext" die ost- und mitteleuropäischen Zeichen. Letzteres ist kein Luxus — die Anwendung verarbeitet Belege aus Ungarn und Tschechien, und Fahrernamen tragen entsprechende Buchstaben. Ohne den zweiten Bereich fiele mitten im Wort der Ersatzzeichensatz ein. Der Browser lädt über unicode-range nur, was die Seite wirklich braucht: für rein deutschen Text sind das 47 kB, nicht 130 kB. */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter/InterVariable-latin.4b73e2ff3024.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter/InterVariable-latin-ext.084b211fc382.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Inter"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("../fonts/inter/InterVariable-latin-italic.59036e902b79.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("../fonts/inter/InterVariable-latin-ext-italic.af57dae033bf.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ── Grundeinstellung ───────────────────────────────────────────────────── Nur Schrift und Textfarbe. Aufbau, Abstände und Bauteile bleiben unangetastet — so steht es im Handoff. */ body { font-family: var(--fm-schrift); font-variation-settings: "opsz" var(--fm-opsz-text); color: var(--fleetman-ink); } /* Überschriften laufen auf der Display-Seite der Achse — das ist „Inter Display" im Sinne des Brandbooks. Sichtbar wird es vor allem in grossen Graden: engere Abstände, ruhigeres Schriftbild. */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--fm-schrift-titel); font-variation-settings: "opsz" var(--fm-opsz-titel); letter-spacing: -0.011em; } /* Die Wortmarke ist der grösste Grad auf jeder Seite und gehört ebenfalls auf die Display-Seite. */ .brand-name, .brand-text, .marken-wortmarke { font-variation-settings: "opsz" var(--fm-opsz-titel); } /* Der Signalpunkt als Zustandsmerkmal: laufend, aktiv, aktuell. Klein halten — nie als Fläche. */ .fm-signalpunkt { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--fm-live); flex: none; } .fm-signalpunkt--stark { background: var(--fm-signal); } /* ══════════════════════════════════════════════════════════════════════════ Bootstrap-Bauteile: die Farben, die es NICHT über Variablen bezieht Für Flächen (`bg-success`) und Links reicht es, `--bs-success-rgb` und `--bs-link-color` oben zu setzen — die Klassen rechnen damit. Knöpfe, Meldungen und Tabellenzeilen tragen ihre Werte dagegen fest einkompiliert im ausgelieferten CSS (`--bs-btn-bg: #0d6efd`). Die müssen hier einzeln nachgezogen werden, sonst bleibt jeder Knopf im Bootstrap-Blau. Die Bedeutungsfarben stehen bewusst neben der Marke: „überfällig" muss rot bleiben, auch wenn ein Wiederverkäufer seine Marke auf Rot stellt. ══════════════════════════════════════════════════════════════════════════ */ /* ── Knöpfe, gefüllt ──────────────────────────────────────────────────── */ .btn-primary { --bs-btn-bg: var(--fm-primaer); --bs-btn-border-color: var(--fm-primaer); --bs-btn-hover-bg: var(--fm-akzent-2); --bs-btn-hover-border-color: var(--fm-akzent-2); --bs-btn-active-bg: var(--fm-akzent-2); --bs-btn-active-border-color: var(--fm-akzent-2); --bs-btn-disabled-bg: var(--fm-akzent-3); --bs-btn-disabled-border-color: var(--fm-akzent-3); } .btn-secondary { --bs-btn-bg: var(--fm-chrome); --bs-btn-border-color: var(--fm-chrome); --bs-btn-hover-bg: var(--fm-chrome-hell); --bs-btn-hover-border-color: var(--fm-chrome-hell); --bs-btn-active-bg: var(--fm-chrome-hell); --bs-btn-active-border-color: var(--fm-chrome-hell); --bs-btn-disabled-bg: var(--fm-gedaempft); --bs-btn-disabled-border-color: var(--fm-gedaempft); } .btn-success { --bs-btn-bg: var(--fm-erfolg); --bs-btn-border-color: var(--fm-erfolg); --bs-btn-hover-bg: var(--fm-erfolg-3); --bs-btn-hover-border-color: var(--fm-erfolg-3); --bs-btn-active-bg: var(--fm-erfolg-tief); --bs-btn-active-border-color: var(--fm-erfolg-tief); } .btn-danger { --bs-btn-bg: var(--fm-gefahr); --bs-btn-border-color: var(--fm-gefahr); --bs-btn-hover-bg: #A32B23; --bs-btn-hover-border-color: #A32B23; --bs-btn-active-bg: #8C241D; --bs-btn-active-border-color: #8C241D; } /* Amber trägt dunkle Schrift — Weiss darauf ist nicht lesbar. */ .btn-warning { --bs-btn-bg: var(--fm-warnung-2); --bs-btn-border-color: var(--fm-warnung-2); --bs-btn-color: var(--fm-chrome); --bs-btn-hover-bg: var(--fm-warnung-3); --bs-btn-hover-border-color: var(--fm-warnung-3); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--fm-warnung-3); --bs-btn-active-color: #fff; } .btn-info { --bs-btn-bg: var(--fm-info); --bs-btn-border-color: var(--fm-info); --bs-btn-color: #fff; --bs-btn-hover-bg: #165A73; --bs-btn-hover-border-color: #165A73; --bs-btn-hover-color: #fff; --bs-btn-active-bg: #165A73; --bs-btn-active-color: #fff; } .btn-dark { --bs-btn-bg: var(--fm-chrome); --bs-btn-border-color: var(--fm-chrome); --bs-btn-hover-bg: var(--fm-chrome-hell); --bs-btn-hover-border-color: var(--fm-chrome-hell); } /* ── Knöpfe, Umriss ────────────────────────────────────────────────────── Der häufigste Knopf im Produkt ist `btn-outline-secondary` (140×). Er war Bootstrap-grau; jetzt trägt er Ink. */ .btn-outline-primary { --bs-btn-color: var(--fm-primaer); --bs-btn-border-color: var(--fm-primaer); --bs-btn-hover-bg: var(--fm-primaer); --bs-btn-hover-border-color: var(--fm-primaer); --bs-btn-active-bg: var(--fm-akzent-2); --bs-btn-active-border-color: var(--fm-akzent-2); } .btn-outline-secondary { --bs-btn-color: var(--fm-chrome); --bs-btn-border-color: var(--fm-linie-2); --bs-btn-hover-bg: var(--fm-chrome); --bs-btn-hover-border-color: var(--fm-chrome); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--fm-chrome); --bs-btn-active-border-color: var(--fm-chrome); } .btn-outline-success { --bs-btn-color: var(--fm-erfolg); --bs-btn-border-color: var(--fm-erfolg); --bs-btn-hover-bg: var(--fm-erfolg); --bs-btn-hover-border-color: var(--fm-erfolg); } .btn-outline-danger { --bs-btn-color: var(--fm-gefahr); --bs-btn-border-color: var(--fm-gefahr); --bs-btn-hover-bg: var(--fm-gefahr); --bs-btn-hover-border-color: var(--fm-gefahr); } .btn-outline-info { --bs-btn-color: var(--fm-info); --bs-btn-border-color: var(--fm-info); --bs-btn-hover-bg: var(--fm-info); --bs-btn-hover-border-color: var(--fm-info); --bs-btn-hover-color: #fff; } .btn-outline-warning { --bs-btn-color: var(--fm-warnung); --bs-btn-border-color: var(--fm-warnung-2); --bs-btn-hover-bg: var(--fm-warnung-2); --bs-btn-hover-border-color: var(--fm-warnung-2); --bs-btn-hover-color: var(--fm-chrome); } .btn-outline-dark { --bs-btn-color: var(--fm-chrome); --bs-btn-border-color: var(--fm-chrome); --bs-btn-hover-bg: var(--fm-chrome); --bs-btn-hover-border-color: var(--fm-chrome); } /* ── Meldungen ─────────────────────────────────────────────────────────── Ruhige Fläche, farbige Schrift. Bootstraps Pastelltöne (#cff4fc türkis, #d1e7dd mint) gehören zu einer anderen Marke. */ .alert-primary { --bs-alert-color: var(--fm-akzent-2); --bs-alert-bg: #EEF1FF; --bs-alert-border-color: #D6DDFF; } .alert-success { --bs-alert-color: var(--fm-erfolg-tief); --bs-alert-bg: var(--fm-erfolg-flaeche); --bs-alert-border-color: #BFEADC; } .alert-danger { --bs-alert-color: #8C241D; --bs-alert-bg: #FBECEB; --bs-alert-border-color: #F3CFCC; } .alert-warning { --bs-alert-color: var(--fm-warnung-3); --bs-alert-bg: var(--fm-warnung-flaeche); --bs-alert-border-color: #F2DDB8; } .alert-info { --bs-alert-color: #14566E; --bs-alert-bg: #E8F1F5; --bs-alert-border-color: #C7DDE6; } .alert-secondary { --bs-alert-color: var(--fm-chrome); --bs-alert-bg: var(--fm-flaeche); --bs-alert-border-color: var(--fm-linie); } /* ── Tabellenzeilen mit Bedeutung ────────────────────────────────────── */ /* Zeilenfarben — ausschliesslich ueber Token, nie als fester Hexwert. `--fm-*-flaeche` und die zugehoerigen Textfarben haben Dunkelvarianten, feste Werte haben keine. Gemessen am 02.09.2026 im Dunkelmodus: `.table-danger` trug ein fest eingebautes #FBECEB und blieb damit hell, waehrend der Text der dunklen Oberflaeche folgte — hell auf hell. Auf /maintenance/ waren das zehn unlesbare Zellen, genau die ueberfaelligen: die wichtigsten der ganzen Liste. `.table-info` hatte dasselbe Problem. Auch die Textfarbe muss ein Token sein: `--bs-table-color` gewinnt sonst nicht gegen die Farbe, die die Tabelle im Dunkelmodus ohnehin setzt. */ .table-danger { --bs-table-bg: var(--fm-gefahr-flaeche); --bs-table-color: var(--fm-gefahr); } .table-warning { --bs-table-bg: var(--fm-warnung-flaeche); --bs-table-color: var(--fm-warnung); } .table-success { --bs-table-bg: var(--fm-erfolg-flaeche); --bs-table-color: var(--fm-erfolg); } .table-info { --bs-table-bg: var(--fm-info-flaeche); --bs-table-color: var(--fm-info); } .table-light { --bs-table-bg: var(--fm-flaeche); --bs-table-color: var(--fm-text); } /* „Weiss" heisst im Dunkelmodus nicht weiss. `bg-white` steht in 14 Vorlagen, meist an Kartenkoepfen. Bootstrap setzt dafuer hart #fff — im Dunkelmodus wurde daraus eine weisse Flaeche mit hellem Text: unlesbar, gemessen am 02.09.2026 auf /administration/bp/, /damages/add/ und weiteren Seiten. `--fm-karte` ist im Hellen weiss und im Dunkeln dunkel. Damit bedeutet `bg-white` das, was der Schreibende gemeint hat: „die Farbe einer Karte", nicht „der Farbwert Weiss". Die Vorlagen bleiben unveraendert. */ .bg-white { background-color: var(--fm-karte) !important; } /* ── Textfarben ────────────────────────────────────────────────────────── `text-muted` steht 817 Mal im Produkt — die häufigste Farbklasse überhaupt. Sie trägt jetzt Slate. */ .text-muted { color: var(--fm-text-leise) !important; } .text-primary { color: var(--fm-primaer) !important; } .text-success { color: var(--fm-erfolg) !important; } .text-danger { color: var(--fm-gefahr) !important; } .text-warning { color: var(--fm-warnung) !important; } .text-info { color: var(--fm-info) !important; } .text-secondary { color: var(--fm-text-leise) !important; } .text-dark { color: var(--fm-chrome) !important; } /* ── Formulare ─────────────────────────────────────────────────────────── Der Fokusring war Bootstrap-Blau. Motion Blue steht laut Brandline für „Bewegung, Betonung" — genau das ist ein Fokus. */ .form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--fm-primaer); box-shadow: 0 0 0 .2rem rgba(59, 91, 255, .18); } .form-check-input:checked { background-color: var(--fm-primaer); border-color: var(--fm-primaer); } /* ── Fortschritt und Ladeanzeige ─────────────────────────────────────── */ .progress-bar { background-color: var(--fm-primaer); } .spinner-border, .spinner-grow { color: var(--fm-primaer); } /* ══════════════════════════════════════════════════════════════════════════ Dunkelmodus Die Webseite kann ihn seit dem ersten Tag, die Anwendung nicht — daneben sah sie alt aus. Möglich wurde er erst, als die Farben an EINER Stelle standen: Vorher hätten drei Paletten in zwei Fassungen gepflegt werden müssen. Drei Zustände, nicht zwei. Wer nichts einstellt, bekommt keine Kennung am -Element — dann entscheidet allein `prefers-color-scheme`. Deshalb: :root die vollständige helle Palette @media (prefers-color-scheme) dunkel, aber nur ohne ausdrückliches Hell :root[data-theme="dark"] damit der Schalter auch andersherum gewinnt Regeln, die daraus folgen und die man leicht verletzt: · Eine Farbe wird NIE nur in einem dieser Blöcke definiert. Sonst gilt sie im nicht gekennzeichneten Zustand gar nicht, und die Seite zeigt die Schrift des einen Modus auf dem Grund des anderen. · Die Seitenleiste bleibt in beiden Fassungen Ink. Sie ist ohnehin dunkel; hell wäre sie eine zweite Marke. · Das Kennzeichen bleibt weiss. Ein Nummernschild ist in echt weiss — das ist kein Farbwert, das ist ein Gegenstand. ══════════════════════════════════════════════════════════════════════════ */ :root { /* Helle Fassung — die Werte von oben, hier unter ihren Rollennamen. */ --fm-karte: var(--fleetman-white); --fm-gefahr-flaeche: #FBEAE8; --fm-info-flaeche: #E8F1F5; --fm-primaer-flaeche: #EEF1FF; --fm-schleier: rgba(11, 19, 36, .45); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --fm-flaeche: #070D18; /* Seitengrund */ --fm-flaeche-2: #17233A; /* Symbolfelder, Überfahren */ --fm-flaeche-3: #1E2B42; --fm-karte: #101A2C; /* was Inhalt trägt */ --fm-linie: #1E2B42; --fm-linie-2: #2A3A56; --fm-text: #EAEEF5; --fm-text-leise: #94A0B5; --fm-gedaempft: #94A0B5; --fm-grau: #8494AD; --fm-grau-3: #55637C; /* Bedeutungsfarben werden heller: Der abgedunkelte Mintton und das kräftige Rot der hellen Fassung sind auf #070D18 nicht mehr lesbar. */ --fm-erfolg: #3FD3A6; --fm-erfolg-2: #56E0B6; --fm-erfolg-3: #2FBF93; --fm-erfolg-tief: #A7EFD8; --fm-erfolg-flaeche: #0E2A24; --fm-gefahr: #F08A7E; --fm-gefahr-flaeche: #2B1512; --fm-warnung: #E0A64B; --fm-warnung-2: #E8B564; --fm-warnung-3: #F0C989; --fm-warnung-flaeche: #2B2010; --fm-info: #6BB6D0; --fm-info-flaeche: #10242C; --fm-primaer: #6E86FF; --fm-akzent: #6E86FF; --fm-akzent-2: #93A5FF; --fm-akzent-3: #5B75FF; --fm-primaer-flaeche: #131C3D; --fm-schleier: rgba(0, 0, 0, .6); --text-dark: #EAEEF5; --text-muted: #94A0B5; --bg-body: #070D18; --bg-card: #101A2C; --border-light: #1E2B42; --fm-accent-soft: rgba(255, 255, 255, .07); --fm-brown-30: rgba(255, 255, 255, .3); --bs-body-color: #EAEEF5; --bs-body-color-rgb: 234, 238, 245; --bs-body-bg: #101A2C; --bs-border-color: #1E2B42; --bs-secondary-color: #94A0B5; --bs-emphasis-color: #FFFFFF; --bs-primary: #6E86FF; --bs-primary-rgb: 110, 134, 255; --bs-link-color: #93A5FF; --bs-link-color-rgb: 147, 165, 255; --bs-link-hover-color:#B7C3FF; --bs-success: #3FD3A6; --bs-success-rgb: 63, 211, 166; --bs-danger: #F08A7E; --bs-danger-rgb: 240, 138, 126; --bs-warning: #E0A64B; --bs-warning-rgb: 224, 166, 75; --bs-info: #6BB6D0; --bs-info-rgb: 107, 182, 208; --bs-secondary: #94A0B5; --bs-secondary-rgb: 148, 160, 181; --bs-light: #17233A; --bs-light-rgb: 23, 35, 58; } } :root[data-theme="dark"] { --fm-flaeche: #070D18; --fm-flaeche-2: #17233A; --fm-flaeche-3: #1E2B42; --fm-karte: #101A2C; --fm-linie: #1E2B42; --fm-linie-2: #2A3A56; --fm-text: #EAEEF5; --fm-text-leise: #94A0B5; --fm-gedaempft: #94A0B5; --fm-grau: #8494AD; --fm-grau-3: #55637C; --fm-erfolg: #3FD3A6; --fm-erfolg-2: #56E0B6; --fm-erfolg-3: #2FBF93; --fm-erfolg-tief: #A7EFD8; --fm-erfolg-flaeche: #0E2A24; --fm-gefahr: #F08A7E; --fm-gefahr-flaeche: #2B1512; --fm-warnung: #E0A64B; --fm-warnung-2: #E8B564; --fm-warnung-3: #F0C989; --fm-warnung-flaeche: #2B2010; --fm-info: #6BB6D0; --fm-info-flaeche: #10242C; --fm-primaer: #6E86FF; --fm-akzent: #6E86FF; --fm-akzent-2: #93A5FF; --fm-akzent-3: #5B75FF; --fm-primaer-flaeche: #131C3D; --fm-schleier: rgba(0, 0, 0, .6); --text-dark: #EAEEF5; --text-muted: #94A0B5; --bg-body: #070D18; --bg-card: #101A2C; --border-light: #1E2B42; --fm-accent-soft: rgba(255, 255, 255, .07); --fm-brown-30: rgba(255, 255, 255, .3); --bs-body-color: #EAEEF5; --bs-body-color-rgb: 234, 238, 245; --bs-body-bg: #101A2C; --bs-border-color: #1E2B42; --bs-secondary-color: #94A0B5; --bs-emphasis-color: #FFFFFF; --bs-primary: #6E86FF; --bs-primary-rgb: 110, 134, 255; --bs-link-color: #93A5FF; --bs-link-color-rgb: 147, 165, 255; --bs-link-hover-color:#B7C3FF; --bs-success: #3FD3A6; --bs-success-rgb: 63, 211, 166; --bs-danger: #F08A7E; --bs-danger-rgb: 240, 138, 126; --bs-warning: #E0A64B; --bs-warning-rgb: 224, 166, 75; --bs-info: #6BB6D0; --bs-info-rgb: 107, 182, 208; --bs-secondary: #94A0B5; --bs-secondary-rgb: 148, 160, 181; --bs-light: #17233A; --bs-light-rgb: 23, 35, 58; } /* ── Was im Dunkeln sonst noch nachzieht ────────────────────────────────── Zusammengefasst, damit es nur einmal geschrieben werden muss. Die Regeln greifen ueber die Kennung ODER ueber die Systemeinstellung. */ :root[data-theme="dark"] body, :root[data-theme="dark"] .table, :root[data-theme="dark"] .form-control, :root[data-theme="dark"] .form-select { color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body { color-scheme: dark; } } /* Select2 — die Auswahllisten mit Suche. Es bringt eigenes CSS mit und weiss nichts von unseren Token: Das geschlossene Feld blieb weiss, der Text folgte dem Dunkelmodus. Weiss auf Hell = unlesbar, gemessen am 02.09.2026 auf /damages/add/, /drivers/add/ und /documents/add/ — und damit auf jedem Formular mit Auswahlliste. Mitgenommen wird alles, was Select2 aufspannt: das Feld, die aufgeklappte Liste, das Suchfeld darin und die Zeile unter dem Zeiger. Die Liste haengt im Uebrigen am , nicht am Formular — eine Regel nur fuer das Feld haette die Haelfte uebersehen. */ :root[data-theme="dark"] .select2-selection, :root[data-theme="dark"] .select2-dropdown, :root[data-theme="dark"] .select2-search__field, :root:not([data-theme="light"]) .select2-selection, :root:not([data-theme="light"]) .select2-dropdown, :root:not([data-theme="light"]) .select2-search__field { background-color: #0C1626 !important; border-color: var(--fm-linie) !important; color: var(--fm-text) !important; } :root[data-theme="dark"] .select2-selection__rendered, :root:not([data-theme="light"]) .select2-selection__rendered { color: var(--fm-text) !important; } :root[data-theme="dark"] .select2-selection__placeholder, :root:not([data-theme="light"]) .select2-selection__placeholder { color: var(--fm-text-leise) !important; } :root[data-theme="dark"] .select2-results__option, :root:not([data-theme="light"]) .select2-results__option { background-color: #0C1626; color: var(--fm-text); } :root[data-theme="dark"] .select2-results__option--highlighted, :root:not([data-theme="light"]) .select2-results__option--highlighted { background-color: var(--fm-primaer) !important; color: #fff !important; } :root[data-theme="dark"] .select2-selection__arrow b, :root:not([data-theme="light"]) .select2-selection__arrow b { border-top-color: var(--fm-text-leise) !important; } /* Eingabefelder: Bootstrap setzt hier #fff fest, nicht ueber eine Variable. */ :root[data-theme="dark"] .form-control, :root[data-theme="dark"] .form-select, :root[data-theme="dark"] .input-group-text { background-color: #0C1626; border-color: var(--fm-linie); color: var(--fm-text); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .form-control, :root:not([data-theme="light"]) .form-select, :root:not([data-theme="light"]) .input-group-text { background-color: #0C1626; border-color: var(--fm-linie); color: var(--fm-text); } } /* Tabellenzeilen beim Ueberfahren — der helle Grauschleier verschwindet. */ :root[data-theme="dark"] .table-hover tbody tr:hover { background-color: rgba(255, 255, 255, .045) !important; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .table-hover tbody tr:hover { background-color: rgba(255, 255, 255, .045) !important; } } /* Der Schalter selbst. Zeigt an, wohin er fuehrt, nicht wo man ist. */ .modus-schalter { display: flex; align-items: center; gap: .5rem; } .modus-schalter .modus-dunkel { display: inline; } .modus-schalter .modus-hell { display: none; } :root[data-theme="dark"] .modus-schalter .modus-dunkel { display: none; } :root[data-theme="dark"] .modus-schalter .modus-hell { display: inline; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .modus-schalter .modus-dunkel { display: none; } :root:not([data-theme="light"]) .modus-schalter .modus-hell { display: inline; } }