/* Gestaltungsmarken. Einzige Quelle fuer Farbe, Abstand, Typografie. Werte werden nirgends sonst hart geschrieben. GRUNDGESTALTUNG: limou Die Anwendung ist das Produkt limou. Farben, Schrift und Bildmarke kommen aus limou/site/DESIGN.md (Stand 14.09.2026, Abschnitte 4, 5, 8, 11). Uebernommen sind nur Tokens, Schrift und Bildmarke; Layout und Aufbau der Anwendung bleiben, Website-Komponenten gehoeren nicht hierher. KUNDEN-ERSCHEINUNGSBILD Ein Kunde schaltet sein Erscheinungsbild ueber data-mandant am zu (src/core/mandant.js). Seine Werte stehen in einem eigenen Stilblatt, das NACH dieser Datei geladen wird: assets/css/mandant-vhv.css mit :root[data-mandant="vhv"]. Ohne Skript und ohne gespeicherte Einstellung traegt kein data-mandant - dann gilt, was hier steht. Alle Namen unten sind der Vertrag der Stilblaetter. Ein Mandant ueberschreibt Werte, er fuehrt keine neuen Namen ein. KONTRASTE (gerechnet mit node v24.18.0, WCAG-2-Formel, 15.09.2026; Farbpaare, kein gerendertes Bild). Grenze 4.5:1 fuer Text unter 24px, 3:1 fuer Linien, Fokus und Flaechen mit Bedeutung. Die Zahl steht an der Zeile, gegen die jeweils genannte deckende Flaeche. SIGNALGELB steht nur fuer Ueberschneidungen und Konflikte (--konflikt-*). Nie als Knopf, Fokus, Hervorhebung oder Akzent. */ /* Schrift Atkinson Hyperlegible Next (variabel, Gewicht 200-800) und Atkinson Hyperlegible Mono (400, 500), lokal aus assets/fonts (SIL Open Font License 1.1, Lizenz und Herkunft in assets/fonts/LIZENZ-Atkinson-Hyperlegible-Next.txt und LIZENZ-Atkinson-Hyperlegible-Mono.txt, Paketversion 5.3.0). Familiennamen wie im Paket. latin deckt U+0000-00FF und U+2000-206F, latin-ext wird nur geladen, wenn ein Zeichen daraus vorkommt. Kein Fremdaufruf: kein Google Fonts, kein CDN. */ @font-face { font-family: "Atkinson Hyperlegible Next Variable"; src: url("../fonts/atkinson-hyperlegible-next-latin-ext-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; 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: "Atkinson Hyperlegible Next Variable"; src: url("../fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; 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: "Atkinson Hyperlegible Mono"; src: url("../fonts/atkinson-hyperlegible-mono-latin-ext-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; 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: "Atkinson Hyperlegible Mono"; src: url("../fonts/atkinson-hyperlegible-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; 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: "Atkinson Hyperlegible Mono"; src: url("../fonts/atkinson-hyperlegible-mono-latin-ext-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; 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: "Atkinson Hyperlegible Mono"; src: url("../fonts/atkinson-hyperlegible-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; 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; } :root { color-scheme: light; /* --- Neutral, Farbton Petrol (h180-195, DESIGN.md 3.1) ------------- */ --ton-000: #ffffff; /* Papier */ --ton-025: #f6f9f9; /* abgeleitet, vertiefte Flaeche */ --ton-050: #edf3f3; /* Tafel, Seitengrund */ --ton-100: #e0e9ea; /* abgeleitet, stille Flaeche */ --ton-200: #cbdadc; /* Raster */ /* Auf der Navigation (ton-950): ton-300 8.36:1, ton-400 5.79:1, ton-500 4.14:1 (nur Zeichen, Grenze 3:1). Auf dem Hinweis (ton-900) ton-300 8.20:1. */ --ton-300: #a7bcc0; /* abgeleitet */ --ton-400: #859da2; /* abgeleitet */ --ton-500: #6c8389; /* abgeleitet */ --ton-550: #5a6d72; /* Kante, Feldrand: 5.43:1 gegen Papier */ --ton-600: #455a5f; /* Tinte leise */ /* Abgeleitet zwischen Tinte und Tinte leise, fuer Fliesstext. Auf ton-200 (deaktivierte Taste im Fahrerportal) 7.50:1. */ --ton-700: #2b4146; --ton-800: #1b3238; /* abgeleitet; ton-050 darauf 12.00:1 */ --ton-900: #102327; /* Tinte */ --ton-950: #0f2127; /* Nacht */ /* --- Akzent: Petrol (DESIGN.md 4.1) --------------------------------- */ --akzentton-300: #9cc5cc; /* Petrol hell; ton-950 darauf 8.90:1 (Auswahl) */ --akzentton-400: #2e7482; /* abgeleitet */ --akzentton-500: #0e5a68; /* Petrol, die Markenfarbe; Weiss darauf 7.83:1 */ --akzentton-600: #0a4652; /* Petrol tief; Weiss darauf 10.44:1 */ --akzentton-700: #073540; /* abgeleitet */ /* --- Produktmarke limou -------------------------------------------- Farbe der einfarbigen Kombination auf Nacht (Reinzeichnung 15.09.2026, REGELN.md 5: einfarbig auf Nacht in Nacht-Schrift). Die Marke ist das Produkt, nicht der Kunde: mandant-vhv.css ueberschreibt diesen Namen NICHT, wie die festen Markenfarben in tv.html und fahrerportal/portal.js. Gegen --flaeche-navigation, hell / dunkel: limou 13.84 / 16.07, VHV 10.15 / 14.35. */ --produktmarke-auf-nacht: #e4ecee; /* Nacht-Schrift */ /* --- Zweite Reihe: helle Petroltoene -------------------------------- Unter diesem Namen stand im Kunden-Erscheinungsbild eine zweite Markenfarbe. limou hat keine zweite Farbe; die Reihe traegt Band, Fahne, Navigationsleiste und den Knopf im Hinweis in hellem Petrol. */ --primaerton-300: #dcebee; /* Petrol-Hauch */ --primaerton-400: #bad8dd; /* abgeleitet; ton-900 darauf 10.80:1 */ --primaerton-500: #9cc5cc; /* Petrol hell; ton-900 darauf 8.73:1, gegen Nacht 8.90:1 */ --primaerton-600: #5e9aa5; /* abgeleitet */ --primaerton-700: #0e5a68; /* Petrol, als Linie auf hellem Grund */ /* Flaechen */ --flaeche-grund: var(--ton-050); --flaeche-karte: var(--ton-000); --flaeche-erhoben: var(--ton-000); --flaeche-vertieft: var(--ton-025); --flaeche-navigation: var(--ton-950); --flaeche-still: var(--ton-100); /* Schrift. Gerechnet gegen Karte / Grund / vertieft / still: stark 16.26 / 14.49 / 15.36 / 13.17 normal 10.78 / 9.60 / 10.19 / 8.74 leise 7.29 / 6.50 / 6.89 / 5.91 */ --schrift-stark: var(--ton-900); --schrift-normal: var(--ton-700); --schrift-leise: var(--ton-600); --schrift-invers: var(--ton-050); /* Verweise in Petrol: 7.83 / 6.98 / 7.40 / 6.35. */ --schrift-akzent: var(--akzentton-500); /* Linien */ --linie: var(--ton-200); --linie-stark: var(--ton-300); --linie-leise: var(--ton-100); /* Warnzaehler in der Navigation. Sitzt in BEIDEN Themen auf der dunklen Navigationsflaeche und ist deshalb nicht themenabhaengig. Tinte auf der Flaeche 9.41:1; die Flaeche gegen die Navigation 9.60:1 (hell) und 11.14:1 (dunkel). */ --marke-warnung-flaeche: #edb9af; --marke-warnung-schrift: var(--ton-900); /* Akzent / Bedienelemente. Hauptknopf Petrol mit weisser Schrift 7.83:1, Hover Petrol tief 10.44:1. Die Knopfflaeche gegen die Karte 7.83:1. */ --akzent: var(--akzentton-500); --akzent-schrift: var(--ton-000); --akzent-schwach: var(--akzentton-600); /* Fokus in Petrol: gegen Karte 7.83, Grund 6.98, vertieft 7.40, still 6.35. */ --fokus: var(--akzentton-500); /* Linie am Kartenrand: dieselben Werte wie der Fokus. */ --akzent-linie: var(--akzentton-500); /* --- Markenflaechen, in BEIDEN Themen gleich ------------------------ */ /* Band im Seitenkopf der Uebersicht, Petrol-Hauch. Titel Tinte 13.29:1, Oberzeile und Beschreibung Tinte leise 5.96:1, Fokus Petrol 6.40:1. Das Band traegt seine Aussage als Text, nicht als Flaeche (gegen den Grund nur 1.09:1). */ --band-flaeche: var(--primaerton-300); --band-schrift: var(--ton-900); --band-schrift-leise: var(--ton-600); /* primaerton-700 (Petrol) statt akzentton-500: akzentton-500 wird im dunklen Thema zu Petrol hell und mass auf dem Band dann 1.52:1. */ --band-fokus: var(--primaerton-700); /* 8 Prozent Tinte ueber dem Hauch, gemischt #ccdbde. Tinte darauf 11.42:1. */ --band-knopf-hover: rgba(16, 35, 39, 0.08); /* Fahne fuer Kategorien: Petrol-Hauch mit Tinte, 13.29:1. */ --fahne-flaeche: var(--primaerton-300); --fahne-schrift: var(--ton-900); /* Leiste des aktiven Navigationseintrags: Petrol hell gegen die Navigation 8.90:1, gegen die aktive Flaeche (15 Prozent Weiss) 5.61:1 hell und 6.84:1 dunkel. Fokus auf der Navigation in Tafel 14.77:1 - auf Nacht gibt es keinen Fokus in Petrol (2.12:1) und keinen in Gelb. */ --navigation-leiste: var(--primaerton-500); --navigation-fokus: var(--ton-050); /* Bedeutungsfarben. Je Ton eine Flaeche, eine Linie, eine Schrift. Schrift gegen eigene Flaeche / Karte / vertieft / still. */ --gut-flaeche: #e3f1e7; --gut-linie: #8ec29f; --gut-schrift: #1f6b3a; /* Erledigt: 5.59 / 6.52 / 6.16 / 5.28 */ --info-flaeche: var(--primaerton-300); --info-linie: var(--akzentton-300); --info-schrift: var(--akzentton-500); /* 6.40 / 7.83 / 7.40 / 6.35 */ /* Warnung in Braun, nicht in Gelb: Gelb ist der Ueberschneidung vorbehalten. Als Leiste gegen Karte 7.30, gegen Grund 6.51. */ --warn-flaeche: #f9eddf; --warn-linie: #d6a66e; --warn-schrift: #80490c; /* 6.33 / 7.30 / 6.90 / 5.92 */ --gefahr-flaeche: #f9e8e4; --gefahr-linie: #dfa79d; --gefahr-schrift: #9a2a1c; /* Fehler: 6.50 / 7.72 / 7.29 / 6.25 */ --neutral-flaeche: var(--ton-100); --neutral-linie: var(--ton-200); --neutral-schrift: var(--ton-600); /* 5.91 auf der eigenen Flaeche, 7.29 auf Karte */ /* Abholschild (abholung.css). Das Schild setzt kein data-thema, sondern data-schild; seine Farben stehen deshalb unter eigenen Namen. Gegen die Grundflaeche Papier: Schrift 16.26:1, leise 7.29:1, Fokus 7.83:1, Linie 1.44:1 (nur Trennung). */ --schild-grund: var(--ton-000); --schild-schrift: var(--ton-900); --schild-leise: var(--ton-600); --schild-linie: var(--ton-200); --schild-fokus: var(--akzentton-500); /* Ueberschneidung / Konflikt, EINZIGER Ort fuer Signalgelb. --konflikt-signal ist nur Band oder Schraffur, nie Text, nie Flaeche unter Text, nie Fokus. Gegen Papier misst Gelb nur 1.73:1 - es steht deshalb nie allein an einer Kante, sondern immer mit --konflikt-kante (Tinte gegen Gelb 9.40:1, gegen Karte 16.26:1). */ --konflikt-flaeche: #fcf2d2; /* Signal-Hauch */ --konflikt-linie: var(--ton-900); /* 1px Tinte um den Konfliktkasten */ --konflikt-schrift: #6b4a00; /* Signal-Tinte: 7.21 auf Hauch, 8.06 auf Karte */ --konflikt-signal: #f1be2c; /* Signal */ --konflikt-kante: var(--ton-900); /* Typografie. Mono nur fuer Zeitangaben, Kennzeichen und Daten; es sind nur die Schnitte 400 und 500 eingebunden. */ --schriftfamilie: "Atkinson Hyperlegible Next Variable", system-ui, "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif; --schriftfamilie-zahl: "Atkinson Hyperlegible Next Variable", system-ui, "Segoe UI", sans-serif; --schriftfamilie-fest: "Atkinson Hyperlegible Mono", ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace; /* Typoskala der Neugestaltung vom 21.09.2026. Vorher lag der Fliesstext bei 14px, Tabellen bei 13px und Tabellenkoepfe bei 11px - zu klein fuer eine Schrift, die fuer Lesbarkeit gewaehlt wurde, und fuer ein Tablet in der Leitstelle. Jede Stufe steigt um eine Stufe; nichts liegt unter 12px. Alle Grade bleiben unter 24px Textgrenze bis auf Seitentitel und Kennzahl - die Kontrastgrenze 4.5:1 gilt also weiter fuer allen Text. */ --grad-0: 0.75rem; /* 12px - Abzeichen, Zaehler */ --grad-1: 0.8125rem; /* 13px - Beschriftungen, Nebentext */ --grad-2: 0.875rem; /* 14px - Tabelle, Feld, Knopf */ --grad-3: 0.9375rem; /* 15px - Fliesstext */ --grad-4: 1.0625rem; /* 17px - Kartentitel, Betont */ --grad-5: 1.25rem; /* 20px - Abschnittstitel */ --grad-6: 1.625rem; /* 26px - Seitentitel */ --grad-7: 1.875rem; /* 30px - Kennzahl */ --grad-8: 2.5rem; /* 40px - grosse Kennzahl */ --fett-normal: 400; --fett-mittel: 500; --fett-halb: 600; --fett-stark: 700; /* Gewichte limou: Titel 800 (die Achse endet bei 800), Punkte 700. */ --gewicht-titel: 800; --gewicht-abschnitt: 700; --zeile-eng: 1.25; --zeile-normal: 1.5; --zeile-weit: 1.65; /* Abstaende - Vierer-Raster */ --raum-1: 0.25rem; --raum-2: 0.5rem; --raum-3: 0.75rem; --raum-4: 1rem; --raum-5: 1.25rem; --raum-6: 1.5rem; --raum-8: 2rem; --raum-10: 2.5rem; --raum-12: 3rem; --raum-16: 4rem; /* Rundungen limou (DESIGN.md 8): 4px Knopf und Feld, 6px Karte, 10px Geraeterahmen. --rund-1 bleibt fuer Kleinteile. */ --rund-1: 2px; --rund-2: 4px; --rund-3: 6px; --rund-4: 10px; --rund-voll: 999px; /* Neugestaltung 24.09.2026 (Figma 46:2): Knopf, Feld und Reiter 8px, Karte und Blatt 12px. Ein Mandant ueberschreibt die Werte, nicht die Namen (mandant-vhv.css: 4px / 6px). */ --rund-knopf: 8px; --rund-karte: 12px; /* Produktmarke auf der hellen Navigation und in der Kopfzeile: limou-Tinte, in beiden Erscheinungsbildern gleich, im dunklen Thema die Nacht-Schrift (unten). Nie eine Kundenfarbe. */ --produktmarke-auf-hell: #102327; /* Karte: leichter Schatten statt harter Linie; im dunklen Thema keiner. */ --schatten-karte: 0 1px 2px rgba(15, 33, 39, 0.05), 0 4px 12px rgba(15, 33, 39, 0.04); /* Schatten - sparsam, nur fuer schwebende Ebenen, im Ton der Nacht */ /* Kalenderfarben (schema.KALENDERFARBEN, 22.09.2026). Je Farbe: Flaeche des Blocks, Schrift darauf, Kante, und --stark als Grund des Namensschilds mit --kf-auf-stark. Gerechnet (node, WCAG) - schwaechster Wert ueber alle acht: Schrift/Flaeche 7.35, Papier auf stark 5.29, Kante gegen Papier und stille Flaeche (limou und VHV) 3.56. */ --kf-auf-stark: #ffffff; --kf-blau-flaeche: #c1d7f6; --kf-blau-schrift: #0d2d59; --kf-blau-kante: #255393; --kf-blau-stark: #214983; --kf-gruen-flaeche: #c6f1d8; --kf-gruen-schrift: #14522e; --kf-gruen-kante: #328555; --kf-gruen-stark: #2d764b; --kf-violett-flaeche: #dac6f1; --kf-violett-schrift: #311452; --kf-violett-kante: #593285; --kf-violett-stark: #4f2d76; --kf-rot-flaeche: #f4c2c9; --kf-rot-schrift: #570f19; --kf-rot-kante: #8e2937; --kf-rot-stark: #7e2531; --kf-kupfer-flaeche: #f6d4c1; --kf-kupfer-schrift: #59290d; --kf-kupfer-kante: #934d25; --kf-kupfer-stark: #834521; --kf-tuerkis-flaeche: #c2eff4; --kf-tuerkis-schrift: #0f5057; --kf-tuerkis-kante: #29848e; --kf-tuerkis-stark: #25767e; --kf-oliv-flaeche: #e2edc9; --kf-oliv-schrift: #3d4d1a; --kf-oliv-kante: #697c3c; --kf-oliv-stark: #5d6e35; --kf-grau-flaeche: #d3dee4; --kf-grau-schrift: #27373f; --kf-grau-kante: #545e63; --kf-grau-stark: #4b5458; --schatten-1: 0 1px 2px rgba(15, 33, 39, 0.07); --schatten-2: 0 2px 6px rgba(15, 33, 39, 0.09), 0 1px 2px rgba(15, 33, 39, 0.06); --schatten-3: 0 12px 32px rgba(15, 33, 39, 0.18), 0 2px 8px rgba(15, 33, 39, 0.10); /* Masse */ --navigation-breite: 244px; --kopf-hoehe: 60px; --inhalt-max: 1560px; /* Hoehe der Bedienelemente. Knopf, Feld und Auswahl stehen in einer Reihe auf gleicher Hoehe. 36px am Arbeitsplatz; klein 30px (in Tabellen und Karten), gross 44px (Beruehrungsziel am Tablet). Vorher 34 / 27 / 40. */ --steuer-hoehe: 36px; --steuer-hoehe-klein: 30px; --steuer-hoehe-gross: 44px; /* Abstaende der Seite. Zwischen zwei Bloecken einer Ansicht, und innen in Karten. Eine Stelle, damit Dichte an einer Stelle einstellbar ist. */ --abstand-block: var(--raum-6); --abstand-karte: var(--raum-5); /* Bewegung - kurz, nur auf Bedienung, nie auf Inhalt */ --dauer-schnell: 90ms; --dauer-normal: 150ms; --kurve: cubic-bezier(0.2, 0, 0.2, 1); } /* Dunkles Thema limou. Die Website kennt keines; die Anwendung braucht es fuer Arbeitsplatz und Wandportal. Aufgebaut auf Nacht #0f2127, Nacht-Schrift #e4ecee und Nacht leise #9db1b7 aus DESIGN.md 4.1. Petrol #0e5a68 ist auf Nacht verboten (2.12:1) - im dunklen Thema traegt deshalb Petrol hell die Rolle des Akzents, auch unter den Namen --akzentton-400/500, die Stilblaetter direkt verwenden. */ :root[data-thema="dunkel"] { color-scheme: dark; --produktmarke-auf-hell: #e4ecee; --schatten-karte: none; --akzentton-400: #7fb3bd; /* Balken: gegen Grund 7.97, Karte 7.17, still 5.99 */ --akzentton-500: #9cc5cc; /* Linie: gegen Grund 9.89, Karte 8.90, still 7.43 */ --flaeche-grund: #08161a; --flaeche-karte: var(--ton-950); --flaeche-erhoben: #173038; --flaeche-vertieft: #0b1b20; --flaeche-navigation: #061013; --flaeche-still: #173038; /* Gerechnet gegen Karte / Grund / vertieft / erhoben und still: stark 13.84 / 15.56 / 14.71 / 11.56 normal 10.67 / 12.00 / 11.35 / 8.92 leise 7.42 / 8.34 / 7.89 / 6.20 */ --schrift-stark: #e4ecee; --schrift-normal: #c4d2d5; --schrift-leise: #9db1b7; --schrift-invers: var(--ton-900); /* Petrol hell: 8.90 / 9.89 / 9.46 / 7.43. */ --schrift-akzent: var(--akzentton-300); --linie: #25404a; --linie-stark: #3a5963; --linie-leise: #1b3139; /* Hauptknopf Petrol hell mit Tinte 8.73:1, Hover 10.93:1. Knopfflaeche gegen Karte 8.90:1, gegen Grund 9.89:1. */ --akzent: var(--akzentton-300); --akzent-schrift: var(--ton-900); --akzent-schwach: #bcd9de; /* Fokus auf Nacht in Nacht-Schrift (DESIGN.md 3.4): gegen Karte 13.84, erhoben und still 11.56. */ --fokus: #e4ecee; --akzent-linie: var(--akzentton-300); /* Schrift gegen eigene Flaeche / Karte / vertieft / erhoben und still. */ --gut-flaeche: #11291a; --gut-linie: #2f6b45; --gut-schrift: #8fd0a4; /* 8.65 / 9.25 / 9.84 / 7.73 */ --info-flaeche: #0f2a31; --info-linie: #2a5560; --info-schrift: var(--akzentton-300); /* 8.08 / 8.90 / 9.46 / 7.43 */ --warn-flaeche: #2d1f0d; --warn-linie: #6b4a22; --warn-schrift: #eaae7b; /* 8.25 / 8.55 / 9.09 / 7.15 */ --gefahr-flaeche: #321815; --gefahr-linie: #6e3128; --gefahr-schrift: #f0a99e; /* 8.51 / 8.58 / 9.12 / 7.17 */ --neutral-flaeche: #173038; --neutral-linie: #3a5963; --neutral-schrift: var(--ton-300); /* 6.99 / 8.36 / 8.89 / 6.99 */ /* Konflikt dunkel: Schrift in Nacht-Schrift 12.89:1, Rahmen des Konfliktkastens in Nacht-Schrift gegen die Karte 13.84:1. Gelb steht auf Nacht selbst mit 9.58:1 gegen die Karte; die Kante bleibt Tinte (gegen Gelb 9.40:1), damit die Schraffur in beiden Themen gleich ist. Eine helle Kante mass gegen Gelb nur 1.44:1. Gelb wird nie Text. */ --konflikt-flaeche: #2b240c; --konflikt-linie: #e4ecee; --konflikt-schrift: #e4ecee; --konflikt-signal: #f1be2c; --konflikt-kante: var(--ton-900); /* Kalenderfarben dunkel. Schwaechster Wert: Schrift/Flaeche 7.11, Nacht auf stark 7.45, Kante gegen Karte, Grund und still (limou und VHV) 3.18. */ --kf-auf-stark: #0f2127; --kf-blau-flaeche: #1f385c; --kf-blau-schrift: #c3d9f8; --kf-blau-kante: #5489d4; --kf-blau-stark: #99b9e6; --kf-gruen-flaeche: #28533a; --kf-gruen-schrift: #c8f3da; --kf-gruen-kante: #64c48c; --kf-gruen-stark: #a3dcba; --kf-violett-flaeche: #3c2853; --kf-violett-schrift: #dcc8f3; --kf-violett-kante: #9164c4; --kf-violett-stark: #bda3dc; --kf-rot-flaeche: #592229; --kf-rot-schrift: #f7c5cc; --kf-rot-kante: #cf5969; --kf-rot-stark: #e29ca6; --kf-kupfer-flaeche: #5c351f; --kf-kupfer-schrift: #f8d7c3; --kf-kupfer-kante: #d48354; --kf-kupfer-stark: #e6b599; --kf-tuerkis-flaeche: #225359; --kf-tuerkis-schrift: #c5f2f7; --kf-tuerkis-kante: #59c3cf; --kf-tuerkis-stark: #9cdbe2; --kf-oliv-flaeche: #434d2e; --kf-oliv-schrift: #e5f0cc; --kf-oliv-kante: #a3b96e; --kf-oliv-stark: #c8d6a9; --kf-grau-flaeche: #373f43; --kf-grau-schrift: #d5e1e7; --kf-grau-kante: #8b979c; --kf-grau-stark: #bac1c4; --schatten-1: 0 1px 2px rgba(0, 0, 0, 0.4); --schatten-2: 0 2px 6px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.4); --schatten-3: 0 14px 36px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.5); } /* Abholschild dunkel (data-schild="dunkel" am ). Nacht, Nacht-Schrift und Nacht leise aus DESIGN.md 4.1 - dieselben Werte wie --flaeche-karte, --schrift-stark und --schrift-leise im dunklen Thema oben. Gegen Nacht: Schrift 13.84:1, leise 7.42:1, Fokus Petrol hell 8.90:1, Linie nur Trennung. */ :root[data-schild="dunkel"] { --schild-grund: var(--ton-950); --schild-schrift: #e4ecee; --schild-leise: #9db1b7; --schild-linie: #25404a; --schild-fokus: var(--akzentton-300); }