/* ══════════════════════════════════════════════════════════════════════════ 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); --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 ──────────────────────────────────────────────────────────*/ --fm-flaeche: var(--fleetman-cloud); --fm-flaeche-2: var(--fleetman-mist); --fm-flaeche-3: #DDE3EC; /* ── Schrift ────────────────────────────────────────────────────────── Brandline: Inter Display für Überschriften, Inter für Fliesstext. Ausgeliefert wird selbst (siehe unten) — bewusst nicht über einen fremden Schriftdienst, weil das die IP-Adresse jedes Nutzers an Dritte schickt. Fehlen die Dateien, greift die Systemschrift; die Anwendung sieht dann anders, aber nicht kaputt aus. */ --fm-schrift: "Inter", "Inter Display", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --fm-schrift-titel: "Inter Display", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* ── 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.260c81a4759b.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.1ad231aac0a8.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.0a81fe197e0d.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.f877664ba06a.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); color: var(--fleetman-ink); } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--fm-schrift-titel); letter-spacing: -0.011em; } /* 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); }