/* * MSG Nord — Farb-Tokens * ---------------------------------------------------------------------------- * Alle 19 Paletten liegen hier nebeneinander. Umgeschaltet wird ueber das * Attribut data-palette am -Element: * * ← Hausstandard seit 29.07.2026 * * Wechseln auf drei Wegen: * 1. Dauerhaft: WP-Admin → Design → Farbpalette * 2. Zum Testen: beliebige URL + ?palette=G2 * 3. Im Code: :root unten — und MSG_NORD_PALETTE_STANDARD in * functions.php. **Beide zusammen**, sonst laufen * Datenbank und Code auseinander. * * REGEL, die nicht verhandelbar ist: * --msg-leucht gehoert AUSSCHLIESSLICH auf --msg-dunkel. * Auf hellem Grund erreicht die Leuchtfarbe nur 1,4:1 bis 2,7:1 und ist * damit unlesbar. Fuer Links und Buttons auf Weiss ist --msg-primaer da. * * Alle Kombinationen sind rechnerisch gegen WCAG 2.1 AA geprueft. * Nachrechnen nach Aenderungen: scripts/contrast-check.ps1 */ :root { /* Signalfarben — fuer alle Paletten gleich, auf allen Hintergruenden >= 5,7:1 */ --msg-erfolg: #1B6B3A; --msg-warnung: #8A5A00; --msg-fehler: #B3261E; /* Text auf dunklen Flaechen — vom Browser gemischt, immer > 8:1 */ --msg-auf-dunkel: #FFFFFF; --msg-auf-dunkel-gedaempft: color-mix(in srgb, #FFFFFF 78%, var(--msg-dunkel)); } /* =========================================================================== AKTIVE PALETTE — Standard, falls kein data-palette gesetzt ist --------------------------------------------------------------------------- Seit dem 02.08.2026 haengt :root an A2, nicht mehr an H. Vorher zeigte eine frische Installation die alte Limettenfarbe, solange niemand die Option `msg_nord_palette` gesetzt hatte — auf der Vorschauinstanz fiel das nicht auf, weil der Wert dort in der Datenbank stand. Beim Umzug auf das Zielsystem waere es niemandem rechtzeitig aufgefallen. Gegenstueck im Code: MSG_NORD_PALETTE_STANDARD in functions.php. Beides zusammen prueft `node scripts/palette-standard-pruefen.mjs`. =========================================================================== */ :root, [data-palette="A2"] { --msg-leucht: #FFFFFF; --msg-dunkel: #103A63; --msg-primaer: #1A5A96; --msg-primaer-dunkel: #103A63; --msg-akzent: #B05119; --msg-bg: #FFFFFF; --msg-bg-alt: #F4EFE4; --msg-text: #12212E; --msg-text-gedaempft: #4A5A6A; --msg-rahmen: #E1DED7; --msg-rahmen-kraeftig:#6B7A8A; } [data-palette="H"] { --msg-leucht: #A3E635; --msg-dunkel: #1F2225; --msg-primaer: #4D7C0F; --msg-primaer-dunkel: #33530A; --msg-akzent: #0369A1; --msg-bg: #FFFFFF; --msg-bg-alt: #F3F5EE; --msg-text: #1A1D18; --msg-text-gedaempft: #4F564A; --msg-rahmen: #DDE4D2; --msg-rahmen-kraeftig:#6E7663; } /* =========================================================================== KLASSISCH — heller Grund, kein Leuchtakzent Bei A-D ist --msg-leucht bewusst Weiss: diese Paletten setzen auf dunklen Baendern auf weisse Schrift, nicht auf eine Leuchtfarbe. =========================================================================== */ [data-palette="A"] { /* Nordlicht-Blau — serioes, verlaesslich, maritim */ --msg-leucht: #FFFFFF; --msg-dunkel: #103A63; --msg-primaer: #1A5A96; --msg-primaer-dunkel: #103A63; --msg-akzent: #B4531A; --msg-bg: #FFFFFF; --msg-bg-alt: #F1F5F9; --msg-text: #12212E; --msg-text-gedaempft: #4A5A6A; --msg-rahmen: #D3DCE5; --msg-rahmen-kraeftig:#6B7A8A; } /* --------------------------------------------------------------------------- A1–A3 — Nordlicht-Blau auf warmer Sektionsflaeche Wunsch des Teams vom 29.07.2026: Palette A, aber die Sektionsflaeche in #F4EFE4 statt im kuehlen #F1F5F9. Damit trifft eine warme Flaeche (Farbton 41 Grad) auf kuehle Neutrale (Rahmen und gedaempfter Text liegen bei 210 Grad). Die drei Fassungen unterscheiden sich **nur** darin, wie weit die Waerme mitgeht — Blau, Textfarbe und Dunkelband sind ueberall gleich. Der Akzent ist in allen dreien #B05119 statt #B4531A: Auf der cremefarbenen Flaeche kam der alte Ton nur noch auf 4,37:1 und verfehlte damit knapp die 4,5:1 fuer normalen Text. Der neue schafft 4,55:1, sichtbar ist der Unterschied kaum. --------------------------------------------------------------------------- */ [data-palette="A1"] { /* Warme Flaeche, kuehle Neutrale — der Auftrag im Wortlaut */ --msg-leucht: #FFFFFF; --msg-dunkel: #103A63; --msg-primaer: #1A5A96; --msg-primaer-dunkel: #103A63; --msg-akzent: #B05119; --msg-bg: #FFFFFF; --msg-bg-alt: #F4EFE4; --msg-text: #12212E; --msg-text-gedaempft: #4A5A6A; --msg-rahmen: #D3DCE5; --msg-rahmen-kraeftig:#6B7A8A; } /* A2 steht oben bei :root — es ist der Hausstandard und zugleich der Standard ohne data-palette. Ein zweiter Block hier waere eine Dublette. */ [data-palette="A3"] { /* Durchgehend warm — Blau nur noch bei Links und im Band */ --msg-leucht: #FFFFFF; --msg-dunkel: #103A63; --msg-primaer: #1A5A96; --msg-primaer-dunkel: #103A63; --msg-akzent: #B05119; --msg-bg: #FFFFFF; --msg-bg-alt: #F4EFE4; --msg-text: #12212E; --msg-text-gedaempft: #635D51; --msg-rahmen: #E1DED7; --msg-rahmen-kraeftig:#837E72; } [data-palette="B"] { /* Kreide & Kastanie — warm, humanistisch, literarisch */ --msg-leucht: #FFFFFF; --msg-dunkel: #5E2419; --msg-primaer: #8C3A2B; --msg-primaer-dunkel: #5E2419; --msg-akzent: #1F6F6B; --msg-bg: #FDFBF7; --msg-bg-alt: #F3EDE3; --msg-text: #2A211C; --msg-text-gedaempft: #5C4F47; --msg-rahmen: #E0D5C5; --msg-rahmen-kraeftig:#8A7A6A; } [data-palette="C"] { /* Waldgruen Nord — nachhaltig, MINT, erwachsen */ --msg-leucht: #FFFFFF; --msg-dunkel: #12452F; --msg-primaer: #1E6B4F; --msg-primaer-dunkel: #12452F; --msg-akzent: #9A5B00; --msg-bg: #FFFFFF; --msg-bg-alt: #EEF4F0; --msg-text: #16211C; --msg-text-gedaempft: #4B5B53; --msg-rahmen: #D2E0D8; --msg-rahmen-kraeftig:#6C7D74; } [data-palette="D"] { /* Indigo & Zitrus — jung, digital, dynamisch */ --msg-leucht: #FFFFFF; --msg-dunkel: #25275E; --msg-primaer: #3A3D8F; --msg-primaer-dunkel: #25275E; --msg-akzent: #B54400; --msg-bg: #FFFFFF; --msg-bg-alt: #F2F2F8; --msg-text: #1A1B26; --msg-text-gedaempft: #50536B; --msg-rahmen: #D8D8E6; --msg-rahmen-kraeftig:#71748A; } /* =========================================================================== DUNKELBAND — Leuchtfarbe auf dunkler Flaeche =========================================================================== */ [data-palette="E"] { /* Tuerkis auf Anthrazit — aus der Bildvorlage */ --msg-leucht: #2DD4BF; --msg-dunkel: #24292E; --msg-primaer: #0F6E63; --msg-primaer-dunkel: #0A4F47; --msg-akzent: #B45309; --msg-bg: #FFFFFF; --msg-bg-alt: #F0F5F4; --msg-text: #16201E; --msg-text-gedaempft: #4C5B58; --msg-rahmen: #D6E3E0; --msg-rahmen-kraeftig:#6B7C78; } [data-palette="E1"] { /* Tuerkis auf Tiefsee — geschlossener, weniger technisch */ --msg-leucht: #2DD4BF; --msg-dunkel: #0C2B33; --msg-primaer: #0E6A62; --msg-primaer-dunkel: #093F3A; --msg-akzent: #B45309; --msg-bg: #FFFFFF; --msg-bg-alt: #EFF5F5; --msg-text: #14201F; --msg-text-gedaempft: #4A5A59; --msg-rahmen: #D5E4E3; --msg-rahmen-kraeftig:#6A7B7A; } [data-palette="E2"] { /* Aqua & Sand — warmer heller Bereich */ --msg-leucht: #5EEAD4; --msg-dunkel: #1F2A2E; --msg-primaer: #0F6E63; --msg-primaer-dunkel: #0A4F47; --msg-akzent: #9A5B2B; --msg-bg: #FDFBF6; --msg-bg-alt: #F4EFE4; --msg-text: #211E18; --msg-text-gedaempft: #56503F; --msg-rahmen: #E3DACA; --msg-rahmen-kraeftig:#7D766A; } [data-palette="F"] { /* Mint & Marine — frisch, institutionell verankert */ --msg-leucht: #34D399; --msg-dunkel: #0F2A4A; --msg-primaer: #123E6B; --msg-primaer-dunkel: #0B2947; --msg-akzent: #0E7C66; --msg-bg: #FFFFFF; --msg-bg-alt: #EFF4F8; --msg-text: #101C2B; --msg-text-gedaempft: #4A5A6E; --msg-rahmen: #D3DFE9; --msg-rahmen-kraeftig:#6A7A8C; } [data-palette="G"] { /* Koralle auf Schiefer — warm, einladend */ --msg-leucht: #FF7A66; --msg-dunkel: #2A2F36; --msg-primaer: #B03A28; --msg-primaer-dunkel: #7C2618; --msg-akzent: #1F6F6B; --msg-bg: #FFFFFF; --msg-bg-alt: #F5F2F0; --msg-text: #1F1A18; --msg-text-gedaempft: #574E4A; --msg-rahmen: #E4DBD7; --msg-rahmen-kraeftig:#7D726C; } [data-palette="G1"] { /* Koralle auf Bordeaux — literarischer */ --msg-leucht: #FF7A66; --msg-dunkel: #331A1B; --msg-primaer: #A83A28; --msg-primaer-dunkel: #75261A; --msg-akzent: #1F6F6B; --msg-bg: #FFFFFF; --msg-bg-alt: #F7F1EF; --msg-text: #201A18; --msg-text-gedaempft: #574B48; --msg-rahmen: #E8DAD5; --msg-rahmen-kraeftig:#7D6F6C; } [data-palette="G2"] { /* Apricot & Petrol — freundlich statt alarmierend */ --msg-leucht: #FFAE73; --msg-dunkel: #1E3238; --msg-primaer: #A64F26; /* korrigiert von #B0552A — fiel auf BG-alt mit 4,46:1 durch */ --msg-primaer-dunkel: #7C3A1B; --msg-akzent: #0E6E70; --msg-bg: #FFFFFF; --msg-bg-alt: #F3F1EE; --msg-text: #1C1F20; --msg-text-gedaempft: #4F5658; --msg-rahmen: #DFDAD5; --msg-rahmen-kraeftig:#6E7678; } [data-palette="H1"] { /* Limette auf Waldnacht — organisch statt industriell */ --msg-leucht: #A3E635; --msg-dunkel: #14251A; --msg-primaer: #45700D; /* mehr Reserve als H: 5,87:1 statt 4,99:1 */ --msg-primaer-dunkel: #2E4C08; --msg-akzent: #0369A1; --msg-bg: #FFFFFF; --msg-bg-alt: #F1F5EC; --msg-text: #17201A; --msg-text-gedaempft: #4B564C; --msg-rahmen: #DAE4CE; --msg-rahmen-kraeftig:#6A766B; } [data-palette="H2"] { /* Cyan & Graphit — digital ohne Textmarker-Charakter */ --msg-leucht: #22D3EE; --msg-dunkel: #1B2023; --msg-primaer: #0E7490; --msg-primaer-dunkel: #0A5568; --msg-akzent: #B45309; --msg-bg: #FFFFFF; --msg-bg-alt: #EEF5F7; --msg-text: #161D20; --msg-text-gedaempft: #4A585D; --msg-rahmen: #D2E2E7; --msg-rahmen-kraeftig:#69777C; } [data-palette="I"] { /* Lavendel & Tinte — kreativ, kuenstlerisch-musisch */ --msg-leucht: #A78BFA; --msg-dunkel: #1E1B36; --msg-primaer: #5B4BC4; --msg-primaer-dunkel: #3A2E8A; --msg-akzent: #C2410C; --msg-bg: #FFFFFF; --msg-bg-alt: #F3F2FA; --msg-text: #1A1826; --msg-text-gedaempft: #524E6B; --msg-rahmen: #DBD8EA; --msg-rahmen-kraeftig:#6F6A8C; } [data-palette="J"] { /* Bernstein & Nachtblau — souveraen, traditionsbewusst */ --msg-leucht: #FBBF24; --msg-dunkel: #16233D; --msg-primaer: #1D3A6E; --msg-primaer-dunkel: #12264A; --msg-akzent: #A85A00; --msg-bg: #FFFFFF; --msg-bg-alt: #F2F4F8; --msg-text: #131A26; --msg-text-gedaempft: #4C5768; --msg-rahmen: #D5DCE6; --msg-rahmen-kraeftig:#6C7686; } /* =========================================================================== Anwendung =========================================================================== */ body { background-color: var(--msg-bg); color: var(--msg-text); } /* Dunkles Vollbreiten-Band: Hero, Footer, Zwischensektionen. Nur hier darf die Leuchtfarbe stehen. */ .msg-band-dunkel { background-color: var(--msg-dunkel); color: var(--msg-auf-dunkel); } .msg-band-dunkel .msg-leucht { color: var(--msg-leucht); } .msg-band-dunkel a:not(.wp-element-button) { color: var(--msg-leucht); } .msg-band-dunkel .msg-gedaempft { color: var(--msg-auf-dunkel-gedaempft); } .msg-sektion-alt { background-color: var(--msg-bg-alt); } /* WICHTIG: Schaltflaechen ausnehmen. Ein Knopf ist ein mit der Klasse .wp-element-button. WordPress faerbt ihn ueber :root :where(.wp-element-button:hover, .wp-block-button__link:hover) — das ist Spezifitaet (0,1,0), weil :where() nichts beitraegt. Ein nacktes a:hover hat (0,1,1) und gewinnt damit. Folge waere: Schriftfarbe und Hintergrund beide --msg-primaer-dunkel, der Knopftext verschwindet beim Ueberfahren. Genau dieselbe Ausnahme steht oben in .msg-band-dunkel. */ a:not(.wp-element-button) { color: var(--msg-primaer); } a:not(.wp-element-button):hover { color: var(--msg-primaer-dunkel); } .msg-kicker { color: var(--msg-primaer); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } hr, .msg-trennlinie { border-color: var(--msg-rahmen); } /* Sichtbarer Tastaturfokus — WCAG 2.4.7, nie entfernen */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--msg-primaer); outline-offset: 2px; } .msg-band-dunkel :where(a, button):focus-visible { outline-color: var(--msg-leucht); }