/* ══════════════════════════════════════════════════════════════════════════ 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 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); }