/** * Farbschemata - der Grundton der Seite, unabhaengig vom Design. * * Ausgewaehlt in kunde.json: "farbschema": "beige" * hell weisse Seite (Standard, hier steht dafuer nichts - siehe stil.css) * beige warmer Cafe-Ton: cremefarbene Seite, dunkelbraune Schrift * dunkel Anthrazit: dunkle Seite, helle Schrift * schwarz Fast-Schwarz: dunkelste Stufe, sehr hoher Kontrast * stein kuehles Hellgrau, sachlich (Gegenstueck zu beige) * hochkontrast Weiss/Schwarz, kraeftige Linien, Text mind. 7 : 1 (WCAG AAA) * marine tiefes Nachtblau (hochwertigeres Gegenstueck zu dunkel) * espresso dunkles Warmbraun (Gegenstueck zu beige) * * base.njk setzt und laedt diese Datei NUR, wenn das * Schema nicht "hell" ist. Sie kommt NACH stil.css und VOR der Design-Linie. * * Die Kundenfarben (akzent, dunkel, primaer) bleiben erhalten: * beige aendert Flaechen und Schrift, Marke bleibt (primaer, dunkel, akzent) * dunkel / schwarz / marine / espresso drehen zusaetzlich Ueberschriften und dunkle Baender um; * nur der Akzent bleibt die Farbe des Kunden * * BARRIEREFREIHEIT - alle Werte sind nachgerechnet (WCAG 2.2 AA): * Fliesstext und Ueberschriften mind. 4,5 : 1 (real: 6,9 bis 20 : 1) * Rand von Eingabefeldern mind. 3 : 1 * Wer hier einen Wert aendert, muss es neu nachrechnen: * npm run pruefen * Hier stehen bewusst feste Farben: Sie sind neutral (Braun, Grau) und haben * garantierten Kontrast - das ist der Sinn eines Schemas. Die Marke des Kunden * steht weiter nur in kunde.json. */ /* ============================================================== Beige (Cafe) */ [data-schema="beige"] { color-scheme: light; --seite: #F4EBDD; /* Seitenhintergrund */ --flaeche: #FFFBF4; /* Karten, Formulare, Kopfzeile: heller als die Seite */ --flaeche-tief: #EBDFCC; /* abgesetzte Abschnitte */ --text: #2B2118; /* 13,3 : 1 auf --seite */ --text-leise: #5A4D40; /* 6,9 : 1 auf --seite */ --linie: rgba(43, 33, 24, .14); --linie-stark: rgba(43, 33, 24, .28); --linie-feld: #8A837B; /* 3,2 : 1 gegen Karte und Seite */ --gut: #1E6B49; --fehler: #9C2B22; } /* ================================================================== Dunkel */ [data-schema="dunkel"] { color-scheme: dark; --seite: #14171C; --flaeche: #1D2229; /* Karten, Formulare, Kopfzeile: heller als die Seite */ --flaeche-tief: #0F1216; --dunkel: #0B0D10; /* dunkle Baender und Fuss: noch dunkler als die Seite */ --primaer: #F4F6F9; /* Ueberschriften */ --text: #E8ECF1; /* 15,1 : 1 auf --seite */ --text-leise: #AEB7C3; /* 8,9 : 1 auf --seite */ --text-auf-dunkel: #E8ECF1; --text-auf-dunkel-leise: #AEB7C3; --linie: rgba(255, 255, 255, .12); --linie-stark: rgba(255, 255, 255, .24); --linie-dunkel: rgba(255, 255, 255, .12); --linie-feld: #999C9F; /* 5,8 : 1 */ --gut: #5CCB9C; --fehler: #FF9385; /* Akzent als Schrift: auf dunklem Grund die aufgehellte Fassung */ --akzent-text: var(--akzent-auf-dunkel); } /* ================================================================= Schwarz */ [data-schema="schwarz"] { color-scheme: dark; --seite: #0A0A0A; --flaeche: #141414; --flaeche-tief: #050505; --dunkel: #000000; --primaer: #FFFFFF; --text: #F2F2F2; /* 17,7 : 1 auf --seite */ --text-leise: #B3B3B3; /* 9,4 : 1 auf --seite */ --text-auf-dunkel: #F2F2F2; --text-auf-dunkel-leise: #B3B3B3; --linie: rgba(255, 255, 255, .14); --linie-stark: rgba(255, 255, 255, .26); --linie-dunkel: rgba(255, 255, 255, .14); --linie-feld: #959595; /* 6,2 : 1 */ --gut: #5CCB9C; --fehler: #FF9385; --akzent-text: var(--akzent-auf-dunkel); } /* =================================================================== Stein Kuehles Hellgrau: das sachliche Gegenstueck zu Beige. Nur Flaechen, Schrift und Linien sind fest - Ueberschriften (primaer), dunkle Baender (dunkel) und Akzent kommen vom Kunden. */ [data-schema="stein"] { color-scheme: light; --seite: #EDF0F3; /* Seitenhintergrund */ --flaeche: #FBFCFD; /* Karten, Formulare, Kopfzeile: heller als die Seite */ --flaeche-tief: #DFE4EA; /* abgesetzte Abschnitte */ --text: #1B2430; /* 13,7 : 1 auf --seite */ --text-leise: #4A5666; /* 6,5 : 1 auf --seite, 5,8 : 1 auf --flaeche-tief */ --linie: rgba(27, 36, 48, .14); --linie-stark: rgba(27, 36, 48, .28); --linie-feld: #6E7886; /* 3,9 : 1 gegen Seite, 4,4 : 1 gegen Karte */ --gut: #1E6B49; --fehler: #9C2B22; } /* ============================================================= Hochkontrast Hoher Kontrast fuer Kunden mit aelterem Publikum (Praxis, Pflege, Behoerden): weisser Grund, reines Schwarz als Schrift, kraeftige Linien, dickerer Tastatur-Rahmen. Text, Zusatztext, Ueberschriften und dunkle Baender erreichen mindestens 7 : 1 (WCAG AAA); Schrift auf Akzent-Knoepfen und einzelne feste Grautoene mancher Designs bleiben bei AA. Ueberschriften und dunkle Baender sind hier FEST (fast schwarz), damit der Kontrast nicht von der Kundenfarbe abhaengt. Nur der Akzent bleibt beim Kunden. */ [data-schema="hochkontrast"] { color-scheme: light; --seite: #FFFFFF; --flaeche: #FFFFFF; --flaeche-tief: #EFEFEF; /* abgesetzte Abschnitte */ --dunkel: #101216; /* dunkle Baender und Fuss */ --primaer: #0A0A0A; /* Ueberschriften */ --text: #000000; /* 21 : 1 */ --text-leise: #404040; /* 10,4 : 1 auf Seite, 9,0 : 1 auf --flaeche-tief */ --linie: rgba(0, 0, 0, .30); --linie-stark: rgba(0, 0, 0, .60); --linie-feld: #595959; /* 7,0 : 1 */ /* Schrift auf den dunklen Baendern (Fuss, Kopfbereiche): ebenfalls mind. 7 : 1 */ --text-auf-dunkel: #FFFFFF; --text-auf-dunkel-leise: #D9D9D9; --linie-dunkel: rgba(255, 255, 255, .35); --gut: #0E5A36; --fehler: #8A1F17; } /* Akzent als Schrift strenger rechnen als sonst (stil.css: 0,44 / 0,72), damit auch er 7 : 1 erreicht. Schrift AUF einer Akzent-Flaeche (Knoepfe) haengt von der Kundenfarbe ab und bleibt bei AA (4,5 : 1). */ @supports (color: oklch(from red l c h)) { [data-schema="hochkontrast"] { --akzent-text: oklch(from var(--akzent) min(l, 0.38) c h); --akzent-auf-dunkel: oklch(from var(--akzent) max(l, 0.80) c h); } } [data-schema="hochkontrast"] :focus-visible { outline-width: 4px; } [data-schema="hochkontrast"] a { text-decoration-thickness: 2px; } /* =================================================================== Marine Tiefes Nachtblau: das hochwertigere Gegenstueck zu Anthrazit. Gut mit warmen Akzenten (Orange, Gelb, Kupfer). */ [data-schema="marine"] { color-scheme: dark; --seite: #0E1726; --flaeche: #16223A; /* Karten, Formulare, Kopfzeile: heller als die Seite */ --flaeche-tief: #0A1120; --dunkel: #070C16; /* dunkle Baender und Fuss: noch dunkler als die Seite */ --primaer: #F3F6FB; /* Ueberschriften */ --text: #E6ECF5; /* 15,1 : 1 auf --seite */ --text-leise: #AAB6C8; /* 8,8 : 1 auf --seite, 7,7 : 1 auf --flaeche */ --text-auf-dunkel: #E6ECF5; --text-auf-dunkel-leise: #AAB6C8; --linie: rgba(190, 210, 255, .14); --linie-stark: rgba(190, 210, 255, .26); --linie-dunkel: rgba(190, 210, 255, .14); --linie-feld: #8391A8; /* 5,6 : 1 gegen Seite, 5,0 : 1 gegen Karte */ --gut: #5CCB9C; --fehler: #FF9385; --akzent-text: var(--akzent-auf-dunkel); } /* ================================================================ Espresso Dunkles Warmbraun: das dunkle Gegenstueck zu Beige, fuer Holz, Farbe, Innenausbau. Cremefarbene Schrift. */ [data-schema="espresso"] { color-scheme: dark; --seite: #1B1410; --flaeche: #261C16; /* Karten, Formulare, Kopfzeile: heller als die Seite */ --flaeche-tief: #140E0B; --dunkel: #0F0A07; /* dunkle Baender und Fuss: noch dunkler als die Seite */ --primaer: #FBF4EA; /* Ueberschriften */ --text: #F0E6D8; /* 14,7 : 1 auf --seite */ --text-leise: #BFAF9C; /* 8,5 : 1 auf --seite, 7,8 : 1 auf --flaeche */ --text-auf-dunkel: #F0E6D8; --text-auf-dunkel-leise: #BFAF9C; --linie: rgba(255, 235, 210, .14); --linie-stark: rgba(255, 235, 210, .26); --linie-dunkel: rgba(255, 235, 210, .14); --linie-feld: #9A8B7A; /* 5,5 : 1 gegen Seite, 5,0 : 1 gegen Karte */ --gut: #5CCB9C; --fehler: #FF9385; --akzent-text: var(--akzent-auf-dunkel); } /* ============================================== Gemeinsam fuer alle Schemata */ [data-schema] body { background: var(--seite); } /* Kopf der Unterseiten: stil.css blendet dort einen HELLEN Ton ein */ [data-schema] .held { background: linear-gradient(to bottom, var(--flaeche-tief), var(--seite)); } /* Rueckmeldungen im Formular: auf dunklem Grund die helle Fassung */ [data-schema="dunkel"] .meldung-erfolg, [data-schema="schwarz"] .meldung-erfolg, [data-schema="marine"] .meldung-erfolg, [data-schema="espresso"] .meldung-erfolg { background: color-mix(in srgb, var(--gut) 14%, var(--flaeche)); color: var(--gut); }