/* ========================================================= Mama.Sekunde – Farbpaletten zum Vergleich Datei: assets/_ms-palettes.css Jede Palette überschreibt die Farb-Tokens aus `_ms-variables.css`. Umgeschaltet wird über `data-ms-palette` am -Element — gesetzt von `snippets/ms-palette-switcher.liquid` und `assets/ms-palette-switcher.js`. Muss NACH `_ms-variables.css` geladen werden. Der Selektor `:root[data-ms-palette]` ist zusätzlich spezifischer als das dortige `:root`, damit die Reihenfolge nicht allein trägt. Nur Farben, keine Schriftgrößen und keine Abstände: Die Entscheidung, die hier ansteht, ist eine Farbentscheidung. --------------------------------------------------------- Drei Flächen, nicht dreizehn --------------------------------------------------------- Jede Palette definiert genau drei Sektionsflächen. Welche Sektion welche bekommt, steht weiter unten im Abschnitt „Flächen-Rhythmus" — nicht in der Palette. • --ms-surface-page Weiß. Die Grundfläche, trägt die meisten Sektionen. • --ms-surface-soft Helle Sekundärfläche. Trennt Blöcke voneinander, ohne aufzufallen. • --ms-surface-accent Farbfläche für die zwei Sektionen, die auffallen sollen (Hörprobe und Abschluss-CTA) — die Rolle, die bisher das Blau der Hörprobe hatte. --------------------------------------------------------- Rollen der übrigen Tokens — bei neuen Paletten einhalten --------------------------------------------------------- • white Kartenfläche • creme helle Fläche innerhalb von Sektionen • beige kräftigere Fläche, Ränder, Platzhalter • toffee Primary-CTA (weiße Schrift darauf!) und Akzent • green Secondary-Button (dunkle Schrift darauf) • green-dark Punkte, Icons, kleine Akzente • blue Altlast: Fläche der Hörproben-Sektion. Läuft über `--ms-surface-accent`, hier nur noch als Fallback gepflegt. • yellow Hinweis-Button, Markierungen • text Überschriften, text-soft Fließtext ========================================================= */ /* ---------- Ist-Zustand (Referenz) ---------- Die Werte, die die Gründerinnen kritisiert haben. Steht hier nur zum Umschalten daneben. Bekannte Schwäche, deshalb überhaupt zur Diskussion: Weiß auf dem Toffee des Primary-Buttons erreicht 2,6:1 und fällt damit durch die WCAG-Mindestanforderung von 4,5:1. */ :root[data-ms-palette="aktuell"] { --ms-surface-page: #ffffff; --ms-surface-soft: #f6f1e7; --ms-surface-accent: #dcecf7; --ms-color-white: #ffffff; --ms-color-creme: #f6f1e7; --ms-color-beige: #e9dab9; --ms-color-gray: #e1e3e6; --ms-color-blue: #dcecf7; --ms-color-yellow: #f9f5bf; --ms-color-toffee: #b89b7b; --ms-color-green: #cfd9c9; --ms-color-green-dark: #8b9b84; --ms-color-text: #3f2a20; --ms-color-text-soft: #554034; } /* ---------- Waldlicht ---------- Moosgrün statt Braun. Bleibt warm und natürlich, nimmt aber das Beige aus den Flächen: Die Sekundärfläche ist ein warmes Off-White, die Akzentfläche ein gedämpftes Salbeigrün. Weiß auf dem CTA: 6,8:1. */ :root[data-ms-palette="waldlicht"] { --ms-surface-page: #ffffff; --ms-surface-soft: #f4f2ec; --ms-surface-accent: #dde7dd; --ms-color-white: #ffffff; --ms-color-creme: #f4f2ec; --ms-color-beige: #e2e6dc; --ms-color-gray: #e4e6e1; --ms-color-blue: #dde7e4; --ms-color-yellow: #f2eec4; --ms-color-toffee: #46614a; --ms-color-green: #cfe0cd; --ms-color-green-dark: #5c7a5e; --ms-color-text: #232a22; --ms-color-text-soft: #4a5347; } /* ---------- Klar & Ruhig ---------- Kein Braun, kein Beige: fast weiße Flächen, ein einziger kräftiger Akzent in Petrol. Wirkt aufgeräumter und moderner, dafür weniger „handgemacht". Weiß auf dem CTA: 7,2:1. */ :root[data-ms-palette="klar"] { --ms-surface-page: #ffffff; --ms-surface-soft: #f7f8f8; --ms-surface-accent: #e2eff3; --ms-color-white: #ffffff; --ms-color-creme: #f7f8f8; --ms-color-beige: #e6ecee; --ms-color-gray: #e3e6e8; --ms-color-blue: #e2eff3; --ms-color-yellow: #f6f0cd; --ms-color-toffee: #1f5f6b; --ms-color-green: #cbe1e3; --ms-color-green-dark: #2c7481; --ms-color-text: #16262b; --ms-color-text-soft: #3c4d53; } /* ---------- Tinte & Papier ---------- Der sachlichste Weg: Papierweiß, Graphit, ein kühler Blaugrau-Akzent. Keine Wärme, keine Erdtöne — die Farbe tritt zurück, Foto und Text tragen die Seite. Wirkt erwachsen und ruhig, kann kühl wirken. Weiß auf dem CTA: 12,2:1. */ :root[data-ms-palette="tinte"] { --ms-surface-page: #ffffff; --ms-surface-soft: #f2f2f0; --ms-surface-accent: #e6e9ec; --ms-color-white: #ffffff; --ms-color-creme: #f2f2f0; --ms-color-beige: #e8e8e6; --ms-color-gray: #e4e5e7; --ms-color-blue: #e6e9ec; --ms-color-yellow: #f2edd2; --ms-color-toffee: #2f3640; --ms-color-green: #dfe3e2; --ms-color-green-dark: #5a6b6a; --ms-color-text: #1b1f24; --ms-color-text-soft: #414852; } /* ---------- Rosé & Stein ---------- Weich und feminin, ohne Braun: gedeckte Beere als Akzent auf warmem Steingrau. Am nächsten am bisherigen Gefühl der Seite, ohne die Beige-Kritik zu wiederholen. Von den drei neuen die farbigste, bleibt aber gedämpft. Weiß auf dem CTA: 6,4:1. */ :root[data-ms-palette="rose"] { --ms-surface-page: #ffffff; --ms-surface-soft: #f5f1ef; --ms-surface-accent: #f0e2e2; --ms-color-white: #ffffff; --ms-color-creme: #f5f1ef; --ms-color-beige: #ece3e0; --ms-color-gray: #e6e3e2; --ms-color-blue: #e8eaed; --ms-color-yellow: #f4ecd6; --ms-color-toffee: #8f4a55; --ms-color-green: #eddad9; --ms-color-green-dark: #9c5f68; --ms-color-text: #2a2224; --ms-color-text-soft: #4c4044; } /* ---------- Aubergine & Nebel ---------- Kühler Gegenentwurf zu Rosé: dieselbe Weichheit, aber ins Violette gedreht und entsättigt. Wirkt hochwertiger und etwas erwachsener, verliert dafür an Kinderfreundlichkeit. Weiß auf dem CTA: 9,6:1. */ :root[data-ms-palette="nebel"] { --ms-surface-page: #ffffff; --ms-surface-soft: #f4f4f6; --ms-surface-accent: #e9e7f0; --ms-color-white: #ffffff; --ms-color-creme: #f4f4f6; --ms-color-beige: #e7e6ec; --ms-color-gray: #e5e5e9; --ms-color-blue: #e9e7f0; --ms-color-yellow: #f1efd6; --ms-color-toffee: #4c3f5e; --ms-color-green: #dedbe8; --ms-color-green-dark: #6a5b80; --ms-color-text: #1f1b26; --ms-color-text-soft: #443d52; } /* ---------- Rosa & Salbei ---------- Die einzige Palette, in der Rosa wirklich sichtbar ist: als Akzentfläche, nicht nur als Anflug. Damit es nicht kippt, steht als Gegengewicht ein Salbeigrün auf den Secondary-Buttons und den kleinen Akzenten — Rosa allein würde die Seite in Richtung Puppenstube ziehen. Bewusst zu bedenken: Von allen Paletten liest sich diese am stärksten „für Mädchen". Das Produkt ist es nicht. Weiß auf dem CTA: 6,1:1. */ :root[data-ms-palette="rosa"] { --ms-surface-page: #ffffff; --ms-surface-soft: #fbf6f5; --ms-surface-accent: #f8e2e6; --ms-color-white: #ffffff; --ms-color-creme: #fbf6f5; --ms-color-beige: #f2e3e4; --ms-color-gray: #e7e4e4; --ms-color-blue: #f8e2e6; --ms-color-yellow: #f7efd3; --ms-color-toffee: #a53f5c; --ms-color-green: #d3e2d5; --ms-color-green-dark: #5f7f68; --ms-color-text: #2b1f24; --ms-color-text-soft: #4f3f45; } /* ---------- Blütenrosa & Kalk ---------- Die einzige Palette, in der das Rosa kein Pastell ist: `#f19ea3` ist ein warmes, offen rosa Blütenrosa in mittlerer Helligkeit — eine echte Farbe statt eines Anflugs. Hörprobe und Abschluss-CTA werden damit zu den zwei sichtbaren Blöcken der Seite. Damit das trägt, ist alles andere entfärbt: Der Secondary-Button und die kleinen Akzente laufen über ein warmes Kalkgrau, nicht über eine zweite Farbe. Rosa und Salbei beziehungsweise Rosa und Mint bringen jeweils einen Gegenspieler mit — hier steht Rosa allein, und alles andere hält still. Das ist der Unterschied zu den beiden anderen rosa Paletten, nicht nur die Sättigung. `#f19ea3` ist hier der Marken-Akzent selbst: Buttons, Eyebrow und die hervorgehobene Zeile der Überschrift laufen darüber, nicht über eine abgedunkelte Variante. Zwei Folgen, die den Rest der Palette bestimmen: 1. Der Button trägt DUNKLE Schrift. Weiß auf `#f19ea3` erreicht 2,3:1 und wäre damit schlechter als die Palette, die überhaupt zur Debatte steht. Läuft über `--ms-color-cta-text`, siehe `_ms-buttons.css`. 2. Die Akzentfläche musste heller werden. Sie hatte bisher denselben Ton — der Button wäre in Hörprobe und Abschluss-CTA darin verschwunden. Bekannte Schwäche, bewusst in Kauf genommen: Als Schriftfarbe auf Weiß erreicht `#f19ea3` nur 2,1:1. Für die großen Akzentzeilen der Überschriften ist das unter den 3:1, die WCAG für große Schrift verlangt. Fällt das auf, braucht der Text eine dunklere Variante des Tons, während Flächen und Buttons bei `#f19ea3` bleiben. Bewusst zu bedenken: Der Ton ist ein deutliches Signal Richtung „für Mädchen". Bei Rosa & Salbei ist das noch ein Unterton, hier ist es eine Ansage. Dunkle Schrift auf dem CTA: 7,6:1. */ :root[data-ms-palette="bluetenrosa"] { --ms-surface-page: #ffffff; --ms-surface-soft: #fdf3f4; --ms-surface-accent: #fbe2e4; --ms-color-white: #ffffff; --ms-color-creme: #fdf3f4; --ms-color-beige: #f8dcde; --ms-color-gray: #e8e3e2; --ms-color-blue: #fbe2e4; --ms-color-yellow: #f7ecd2; --ms-color-toffee: #f19ea3; --ms-color-cta-text: #2c2223; --ms-color-green: #e2ddd6; --ms-color-green-dark: #7c6d68; --ms-color-text: #2c2223; --ms-color-text-soft: #4e4344; } /* ---------- Blütenrosa & Moos ---------- Identischer Ton wie Blütenrosa & Kalk — `#f19ea3` an Buttons, Eyebrow und Überschriften-Akzent, Zeichen für Zeichen derselbe Wert. Unterschied ist der Gegenspieler: Statt eines stillen Kalkgraus steht hier ein Moosgrün, und die Akzentfläche ist grün statt rosa. Wirkung: Das Rosa wird zur Signalfarbe. Auf der grünen Fläche knallt der Button deutlich stärker als auf einer rosa Fläche, und die Seite liest sich weniger „durchgehend rosa" — Rosa passiert punktuell, nicht flächig. Zieht das Ganze Richtung Garten statt Kinderzimmer. Dunkle Schrift auf dem CTA: 8,1:1. */ :root[data-ms-palette="bluetenrosa-moos"] { --ms-surface-page: #ffffff; --ms-surface-soft: #f5f5f0; --ms-surface-accent: #dde7dd; --ms-color-white: #ffffff; --ms-color-creme: #f5f5f0; --ms-color-beige: #e2e6dc; --ms-color-gray: #e4e6e1; --ms-color-blue: #dde7dd; --ms-color-yellow: #f2eec4; --ms-color-toffee: #f19ea3; --ms-color-cta-text: #23291f; --ms-color-green: #cfe0cd; --ms-color-green-dark: #5c7a5e; --ms-color-text: #232a22; --ms-color-text-soft: #4a5347; } /* ---------- Blütenrosa & Graphit ---------- Dritte Variante mit demselben `#f19ea3`, diesmal auf kühlem Grund: Papierweiß, Blaugrau als Akzentfläche, Graphit als Schrift. Keine zweite warme Farbe im Set. Wirkung: der größte Kontrast der drei. Das Rosa ist das einzige Warme auf der Seite und wirkt dadurch bewusst gesetzt statt dekorativ. Am modernsten von den drei, am wenigsten verspielt — und die Variante, bei der Rosa am wenigsten nach „für Mädchen" klingt. Dunkle Schrift auf dem CTA: 8,4:1. */ :root[data-ms-palette="bluetenrosa-graphit"] { --ms-surface-page: #ffffff; --ms-surface-soft: #f3f3f4; --ms-surface-accent: #eceef1; --ms-color-white: #ffffff; --ms-color-creme: #f3f3f4; --ms-color-beige: #e7e8ea; --ms-color-gray: #e4e5e7; --ms-color-blue: #eceef1; --ms-color-yellow: #f2edd2; --ms-color-toffee: #f19ea3; --ms-color-cta-text: #1b1f24; --ms-color-green: #e2e5e8; --ms-color-green-dark: #5a6b6a; --ms-color-text: #1b1f24; --ms-color-text-soft: #414852; } /* ========================================================= Dieselbe Tonlage, andere Farbe `#f19ea3` ist in HSL `hsl(356, 75%, 78%)`. Die drei folgenden Paletten drehen nur den Farbwinkel und lassen Sättigung und Helligkeit exakt stehen. Dadurch haben alle vier denselben Charakter — gleich hell, gleich kräftig, gleich weich — und unterscheiden sich ausschließlich in der Farbe. Der Aufbau ist ebenfalls identisch: Farbe an Buttons, Eyebrow und Überschriften-Akzent, dunkle Schrift auf dem Button, eine hellere Tönung derselben Farbe als Akzentfläche, ein stiller Neutralton als Gegenspieler. Wer eine weitere Farbe ergänzen will: Farbwinkel wählen, `hsl(, 75%, 78%)` in Hex umrechnen, die Flächen als sehr helle Tönungen derselben Farbe ableiten. Nicht die Helligkeit verändern — sonst fällt die Variante aus der Reihe und der Vergleich ist keiner mehr. ========================================================= */ /* ---------- Himmelblau & Kalk ---------- `hsl(200, 75%, 78%)`. Wirkt am ruhigsten der vier und am wenigsten geschlechtlich zugeordnet, verliert dafür etwas Wärme. Dunkle Schrift auf dem CTA: 8,9:1. */ :root[data-ms-palette="himmelblau"] { --ms-surface-page: #ffffff; --ms-surface-soft: #f3f9fd; --ms-surface-accent: #ddeffa; --ms-color-white: #ffffff; --ms-color-creme: #f3f9fd; --ms-color-beige: #d3e9f6; --ms-color-gray: #e2e6e9; --ms-color-blue: #ddeffa; --ms-color-yellow: #f6efd6; --ms-color-toffee: #9dd5f1; --ms-color-cta-text: #1b262b; --ms-color-green: #dfe6ea; --ms-color-green-dark: #3f7f9c; --ms-color-text: #1b262b; --ms-color-text-soft: #3d4d55; } /* ---------- Mintgrün & Kalk ---------- `hsl(145, 75%, 78%)`. Frisch und unverbraucht, kippt aber leichter ins Klinische als die anderen drei — Grün in dieser Helligkeit liest sich schnell nach Apotheke. Dunkle Schrift auf dem CTA: 9,6:1. */ :root[data-ms-palette="mintgruen"] { --ms-surface-page: #ffffff; --ms-surface-soft: #f3fdf7; --ms-surface-accent: #ddf7e6; --ms-color-white: #ffffff; --ms-color-creme: #f3fdf7; --ms-color-beige: #d0eedc; --ms-color-gray: #e3e8e4; --ms-color-blue: #ddf7e6; --ms-color-yellow: #f6f2d6; --ms-color-toffee: #9df1c0; --ms-color-cta-text: #1f2a23; --ms-color-green: #e0e7e1; --ms-color-green-dark: #3f8f63; --ms-color-text: #1f2a23; --ms-color-text-soft: #40544a; } /* ---------- Lavendel & Kalk ---------- `hsl(265, 75%, 78%)`. Von den vier die einzige Farbe, die nicht nach Natur klingt — wirkt eher verspielt und ein wenig märchenhaft, was zur Audio-Story passt. Dunkle Schrift auf dem CTA: 8,3:1. */ :root[data-ms-palette="lavendel"] { --ms-surface-page: #ffffff; --ms-surface-soft: #f8f4fd; --ms-surface-accent: #eae0fa; --ms-color-white: #ffffff; --ms-color-creme: #f8f4fd; --ms-color-beige: #e2d6f6; --ms-color-gray: #e5e3e9; --ms-color-blue: #eae0fa; --ms-color-yellow: #f6efd6; --ms-color-toffee: #c09df1; --ms-color-cta-text: #241f2b; --ms-color-green: #e4e0ea; --ms-color-green-dark: #6b4f9c; --ms-color-text: #241f2b; --ms-color-text-soft: #473d55; } /* ---------- Lisas Vorschlag ---------- Lisas Liste, Wert für Wert und Rolle für Rolle. Keine Farbe ergänzt, keine weggelassen, keine in eine fremde Rolle geschoben — auch die Punkte nicht, bei denen sie selbst noch unsicher war (Gelb, Rosa, Grünton). #fffdf8 Warm Off-White Karten, helle Flächen #f7f3ea Helles Creme Seiten-Hintergrund #6bbc98 Foto-Grün Hauptakzent #3f8b69 Grün dunkel Text/Icons auf hellem Grund #e5a3a0 Rosa Nebenrolle, nur kleine Akzente #dcecf7 Himmelblau zarter Zweitakzent #f9f5bf Sanftes Gelb zarter Zweitakzent #1a1a1a Schwarz Fließtext, Logo #e1e3e6 Hellgrau neutrale Flächen GENAU ZWEI GRÜNS, so wie Lisa sie aufteilt, und keine Zwischentöne dazwischen: • `#6bbc98` ist ausschließlich Fläche — Primary-Button, Schrittnummern, die runden Icon-Flächen, die Kontur des Secondary-Buttons. • `#3f8b69` ist ausschließlich Schrift und Icon. Es steht in `--ms-color-toffee`, weil dieses Token im Theme fast überall Text einfärbt: Eyebrows, Häkchen, Trenner, Header-Hover, den Akzent der Hero-Überschrift, die Sterne der Bewertungen. Das Mint darf keine Schrift tragen: auf dem Creme sind es 2,1:1. Umgekehrt ist das dunkle Grün als große Fläche zu schwer. Die Trennung ist also nicht nur Lisas Vorgabe, sie ist auch die einzige Aufteilung, die funktioniert. Keine dritte Grünstufe. Das Theme mischt an einigen Stellen Zwischentöne — der Kreis hinter den Benefit-Icons war ein Mint zu 74 Prozent auf Weiß, die Button-Hover ein aufgehelltes Mint. Die stehen unten auf einem der beiden Werte. Unterschieden wird dabei zwischen Mischung und Transparenz: Ein Mint bei 22 Prozent Deckkraft auf einem Verlauf ist dasselbe Grün, nur schwächer — das bleibt. Ein Mint, das mit Weiß zu einem neuen Ton verrechnet wird, ist ein drittes Grün — das fliegt raus. Die drei Farben, die vorher untergegangen sind, haben jetzt feste Plätze auf der Startseite: • GELB ist die Fläche der Abschluss-Sektion. Lisa nennt Gelb und Himmelblau beide „zarter Zweitakzent" — und die Seite hat genau zwei Sektionen, die herausstechen sollen. Also Hörprobe in Himmelblau, Abschluss-CTA in Gelb. • ROSA sitzt an vier kleinen Stellen, verteilt über die Seite. Es färbt nirgends Text: auf dem Creme sind es 1,8:1. • HELLGRAU trägt Ränder und Platzhalter. Weiter: • Ein einziger Seiten-Hintergrund. Lisa nennt eine Grundfläche, nicht zwei, deshalb liegen `page` und `soft` auf demselben Creme. Die Karten in Off-White heben sich dadurch überall gleich ab. Folge: Die Wellenübergänge zwischen zwei Creme-Sektionen sind unsichtbar — die Seite läuft dort nahtlos durch. Sichtbar bleiben sie an der Himmelblau- und der Gelb-Sektion. • `text` und `text-soft` sind beide `#1a1a1a`. Lisa nennt eine Schriftfarbe, also tragen Überschrift und Fließtext dieselbe. • Der Secondary-Button kann keine Mint-Fläche sein, sonst wäre er vom Primary nicht zu unterscheiden. Er wird unten eine helle Karte mit Mint-Kontur. Kontraste: • Schwarz auf dem Mint: 7,7:1. Weiß darauf wären 2,3:1, deshalb `--ms-color-cta-text`. • Schwarz auf dem Creme: 15,7:1, auf dem Gelb: 16,0:1. • `#3f8b69` auf dem Creme: 3,7:1. Für Icons und große Überschriften reicht das, für kleine Schrift nicht — die kleinen Buttons und Ghost-Links liegen damit knapp darunter. Bewusst so, weil Lisa dem dunklen Grün genau diese Rolle gibt. • Mint als Schrift auf dem Creme wären 2,1:1 — kommt in dieser Palette deshalb nicht vor. */ :root[data-ms-palette="lisa"] { --ms-surface-page: #f7f3ea; --ms-surface-soft: #f7f3ea; --ms-surface-accent: #dcecf7; --ms-surface-accent-2: #f9f5bf; --ms-color-white: #fffdf8; --ms-color-creme: #f7f3ea; --ms-color-beige: #e1e3e6; --ms-color-gray: #e1e3e6; --ms-color-blue: #dcecf7; --ms-color-yellow: #f9f5bf; --ms-color-toffee: #3f8b69; --ms-color-cta-text: #1a1a1a; --ms-color-green: #6bbc98; --ms-color-green-dark: #3f8b69; --ms-color-rose: #e5a3a0; --ms-color-heading: #3f8b69; --ms-color-text: #1a1a1a; --ms-color-text-soft: #1a1a1a; } /* 4. Die gepunkteten Linien im Fuß der Inspirationssektion. */ :root[data-ms-palette="lisa"] .ms-inspiration__footer > span:first-child, :root[data-ms-palette="lisa"] .ms-inspiration__footer > span:last-child { border-top-color: var(--ms-color-rose); } /* ========================================================= Drei aufgeräumte Sets aus derselben Liste Die Grundvariante oben bleibt bewusst, wie sie ist: Sie zeigt das Problem. Neun Farben, aber keine neun Aufgaben. Rosa taucht als ein Punkt und ein Aufklapp-Kreis auf, Gelb an einer einzigen Sektion. Eine Farbe, die zweimal auf einer Seite vorkommt, ist kein System, sondern Rauschen — man kann diese Elemente genauso gut in einer Farbe einfärben, die ohnehin ständig vorkommt, und die Farbe streichen. Die folgenden drei Sets sind deshalb keine Subtraktion, sondern Aufbauten. Vier Regeln liegen ihnen zugrunde: 1. 60/30/10. Eine Fläche trägt die Seite (hier das Creme), eine zweite gliedert (das Off-White der Karten), und rund ein Zehntel bleibt für die Akzentfarbe. Alles, was darüber hinaus Farbe will, konkurriert mit dem CTA. 2. Höchstens zwei Buntfarben. Mehr kann ein Betrachter nicht als Bedeutung lesen, ab der dritten wird es Dekoration. Zwei Helligkeiten derselben Farbe zählen dabei als eine — Lisas `#6bbc98` und `#3f8b69` sind ein Farbton in zwei Werten, kein Farbpaar. Genau diese Trennung braucht man: hell für Flächen, dunkel für Schrift. 3. Jede Farbe braucht eine wiederkehrende Aufgabe. Nicht „hier sieht es hübsch aus", sondern „überall, wo X passiert". Kommt die Aufgabe auf der Seite nur einmal vor, braucht sie keine eigene Farbe. 4. Helligkeit entscheidet über die Rolle, nicht Geschmack. Aus Lisas Liste können nur `#dcecf7` und `#f9f5bf` große Flächen tragen — sie sind hell genug, dass schwarze Schrift darauf steht. `#6bbc98` und `#e5a3a0` liegen in mittlerer Helligkeit: Sie können Buttons und kleine Flächen füllen, aber weder Sektionen noch Schrift. `#3f8b69` ist dunkel genug für Schrift, aber zu schwer für Flächen. Regel 4 ist der eigentliche Befund an Lisas Liste: Von den fünf Buntfarben sind zwei Flächenfarben, zwei Füllfarben und eine Schriftfarbe. Sie sind nicht austauschbar, und deshalb ergeben nicht alle Kombinationen ein Set. Alle drei erben das CSS der Lisa-Familie weiter unten über den Namenspräfix `lisa`. ========================================================= */ /* ---------- Set 1: Ein Akzent — 6 Werte ---------- #f7f3ea Creme · #fffdf8 Off-White · #e1e3e6 Hellgrau #1a1a1a Schwarz · #6bbc98 Mint · #3f8b69 Grün dunkel Das Lehrbuch-Minimum und die Messlatte für die anderen zwei: drei Neutrale, ein Farbton in zwei Werten, sonst nichts. Grün ist damit die einzige Farbe der Seite und heißt überall dasselbe — „hier kannst du handeln". Buttons, Schrittnummern, Icon-Kreise, Hero-Punkt, Anführungszeichen, FAQ-Kreise: alles läuft über denselben Ton. Wo bisher Rosa saß, steht jetzt das Mint, denn diese Stellen brauchen keine eigene Farbe, sondern nur eine wiedererkennbare. Die zwei Akzentsektionen laufen über das Hellgrau. Ein Neutral als Sektionsfläche ist kein Verlegenheitsgriff: Es gliedert, ohne dem CTA Aufmerksamkeit wegzunehmen. Was man hier prüfen sollte: Ist die Seite zu ruhig? Wenn ja, weiß man danach genau, wie viel die Zweitfarben leisten. Wenn nein, ist die Diskussion über die anderen vier Farben beendet. */ :root[data-ms-palette="lisa-ein-akzent"] { --ms-surface-page: #f7f3ea; --ms-surface-soft: #f7f3ea; --ms-surface-accent: #e1e3e6; --ms-surface-accent-2: #e1e3e6; --ms-color-white: #fffdf8; --ms-color-creme: #f7f3ea; --ms-color-beige: #e1e3e6; --ms-color-gray: #e1e3e6; --ms-color-blue: #e1e3e6; --ms-color-yellow: #e1e3e6; --ms-color-toffee: #3f8b69; --ms-color-cta-text: #1a1a1a; --ms-color-green: #6bbc98; --ms-color-green-dark: #3f8b69; --ms-color-rose: #6bbc98; --ms-color-heading: #3f8b69; --ms-color-text: #1a1a1a; --ms-color-text-soft: #1a1a1a; } /* ---------- Set 2: Akzent und Fläche — 7 Werte ---------- Set 1 plus #dcecf7 Himmelblau Die klassische Arbeitsteilung: eine Farbe für alles, was angeklickt wird, eine für die Flächen, die eine Sektion herausheben. Sie kommen sich nie in die Quere, weil die eine immer klein und kräftig ist und die andere immer groß und blass. Himmelblau trägt beide Akzentsektionen — Hörprobe und Abschluss. Warum Blau und nicht Gelb: Ein kühler, blasser Ton tritt zurück und lässt den grünen Button darauf stehen. Gelb drängt sich vor und würde am Abschluss mit genau der Aufmerksamkeit konkurrieren, die dort der Button braucht. Zur Wirkung: Blau ist die Farbe, die am zuverlässigsten als ruhig und vertrauenswürdig gelesen wird — bei einem Produkt, das Eltern eine Sorge abnehmen soll, ist das kein Zufall, sondern die naheliegende Wahl. Zusammen mit dem Grün ergibt das ein kühles, sachliches Paar. Rosa und Gelb bleiben draußen, weil in diesem Aufbau keine Aufgabe für sie übrig ist. */ :root[data-ms-palette="lisa-flaeche"] { --ms-surface-page: #f7f3ea; --ms-surface-soft: #f7f3ea; --ms-surface-accent: #dcecf7; --ms-surface-accent-2: #dcecf7; --ms-color-white: #fffdf8; --ms-color-creme: #f7f3ea; --ms-color-beige: #e1e3e6; --ms-color-gray: #e1e3e6; --ms-color-blue: #dcecf7; --ms-color-yellow: #e1e3e6; --ms-color-toffee: #3f8b69; --ms-color-cta-text: #1a1a1a; --ms-color-green: #6bbc98; --ms-color-green-dark: #3f8b69; --ms-color-rose: #6bbc98; --ms-color-heading: #3f8b69; --ms-color-text: #1a1a1a; --ms-color-text-soft: #1a1a1a; } /* ---------- Set 3: Warm und Kühl — 6 Werte ---------- #f7f3ea Creme · #fffdf8 Off-White · #e1e3e6 Hellgrau #1a1a1a Schwarz · #e5a3a0 Rosa · #dcecf7 Himmelblau Derselbe Aufbau wie Set 2, aber mit vertauschten Temperaturen: ein warmer Akzent auf kühler Fläche statt eines kühlen auf kühler. Das ist das stabilste Paar der Farbenlehre — Warm kommt auf den Betrachter zu, Kühl weicht zurück, und genau so sollen sich Button und Sektionsfläche verhalten. Rosa steht hier nicht mehr als Streuung herum, sondern hat die Aufgabe des Grüns übernommen: Es füllt Buttons, Schrittnummern und Icon-Kreise. Damit kommt es oft genug vor, um als Absicht gelesen zu werden. Zur Wirkung: Rosa liest sich weicher und persönlicher als Grün, was zu einer Stimme passt, die vorgelesen wird. Der Preis ist eine Zuordnung Richtung „für Mädchen", die das Produkt nicht hat. Das kühle Blau der Flächen dämpft das spürbar — Rosa auf Blau wirkt anders als Rosa auf Rosa. Die Grenze dieses Sets steht in der Liste selbst: Zu Rosa gibt es keine dunkle Stufe, wie Grün sie mit `#3f8b69` hat. Alles, was Schrift oder Icon ist, läuft deshalb über Schwarz. Wirkt die Seite dadurch zu hart, ist das kein Fehler der Umsetzung, sondern der fehlende zehnte Wert — ein dunkles Rosa. */ :root[data-ms-palette="lisa-warm"] { --ms-surface-page: #f7f3ea; --ms-surface-soft: #f7f3ea; --ms-surface-accent: #dcecf7; --ms-surface-accent-2: #dcecf7; --ms-color-white: #fffdf8; --ms-color-creme: #f7f3ea; --ms-color-beige: #e1e3e6; --ms-color-gray: #e1e3e6; --ms-color-blue: #dcecf7; --ms-color-yellow: #e1e3e6; --ms-color-toffee: #1a1a1a; --ms-color-cta-text: #1a1a1a; --ms-color-green: #e5a3a0; --ms-color-green-dark: #1a1a1a; --ms-color-rose: #e5a3a0; --ms-color-heading: #1a1a1a; --ms-color-text: #1a1a1a; --ms-color-text-soft: #1a1a1a; } /* ---------- Set 4: Flächen mit Funktion — 8 Werte ---------- Set 2 plus #f9f5bf Gelb Die aufgeräumte Fassung der Grundvariante: Sie ist Lisas Liste ohne die eine Farbe, für die keine Aufgabe übrig war. Rosa fällt weg, alles andere bleibt — und die beiden Flächenfarben bekommen dafür je eine feste Bedeutung statt einer Reihenfolge. Himmelblau trägt die Hörprobe, Gelb den Abschluss. Das ist nicht Dekoration, sondern eine Ansage über den Zustand: Blau ist die ruhige Farbe zum Zuhören, Gelb die aufmerksame zum Handeln. Wer die Seite herunterscrollt, sieht am Farbwechsel, dass jetzt etwas anderes dran ist. Der Preis, den Set 2 nicht zahlt: Gelb und der grüne Button stehen am Abschluss nebeneinander und ziehen beide Aufmerksamkeit. Ob das trägt oder sich beißt, ist genau die Frage, die dieses Set stellt. Damit hat jede der acht Farben eine wiederkehrende Aufgabe — und das ist der Unterschied zur Grundvariante, nicht die Anzahl. */ :root[data-ms-palette="lisa-funktion"] { --ms-surface-page: #f7f3ea; --ms-surface-soft: #f7f3ea; --ms-surface-accent: #dcecf7; --ms-surface-accent-2: #f9f5bf; --ms-color-white: #fffdf8; --ms-color-creme: #f7f3ea; --ms-color-beige: #e1e3e6; --ms-color-gray: #e1e3e6; --ms-color-blue: #dcecf7; --ms-color-yellow: #f9f5bf; --ms-color-toffee: #3f8b69; --ms-color-cta-text: #1a1a1a; --ms-color-green: #6bbc98; --ms-color-green-dark: #3f8b69; --ms-color-rose: #6bbc98; --ms-color-heading: #3f8b69; --ms-color-text: #1a1a1a; --ms-color-text-soft: #1a1a1a; } /* ---------- Set 5: Dunkler Abschluss — 6 Werte ---------- #f7f3ea Creme · #fffdf8 Off-White · #e1e3e6 Hellgrau #1a1a1a Schwarz · #6bbc98 Mint · #3f8b69 Grün dunkel Dieselben sechs Werte wie Set 1, aber einer davon wechselt die Rolle: Schwarz ist hier nicht nur Schrift, sondern auch eine Fläche. Der Abschluss-CTA steht auf Schwarz. Das ist der stärkste Kontrast, den die Liste hergibt, und er kostet keine zusätzliche Farbe. Eine helle Seite, die ganz unten in eine dunkle Fläche kippt, markiert das Ende deutlich — und der mintgrüne Button darauf ist das Hellste weit und breit. Erreicht 7,7:1 gegen den schwarzen Grund. Was man in Kauf nimmt: Der Bruch ist hart. Wirkt die Seite bis dahin weich und warm, kann eine schwarze Fläche kühl und technisch wirken. Deshalb bleibt die Hörprobe auf dem Hellgrau — zweimal dunkel wäre zu viel. Innerhalb der schwarzen Sektion drehen sich die Schriftfarben um. Das steht unten als eigene Regel. */ :root[data-ms-palette="lisa-nacht"] { --ms-surface-page: #f7f3ea; --ms-surface-soft: #f7f3ea; --ms-surface-accent: #e1e3e6; --ms-surface-accent-2: #1a1a1a; --ms-color-white: #fffdf8; --ms-color-creme: #f7f3ea; --ms-color-beige: #e1e3e6; --ms-color-gray: #e1e3e6; --ms-color-blue: #e1e3e6; --ms-color-yellow: #e1e3e6; --ms-color-toffee: #3f8b69; --ms-color-cta-text: #1a1a1a; --ms-color-green: #6bbc98; --ms-color-green-dark: #3f8b69; --ms-color-rose: #6bbc98; --ms-color-heading: #3f8b69; --ms-color-text: #1a1a1a; --ms-color-text-soft: #1a1a1a; } /* ---------- Set 6: Grün als Fläche — 6 Werte ---------- #f7f3ea Creme · #fffdf8 Off-White · #e1e3e6 Hellgrau #1a1a1a Schwarz · #6bbc98 Mint · #3f8b69 Grün dunkel Wieder dieselben sechs Werte wie Set 1 und 5 — und trotzdem die am deutlichsten andere Seite. Das Mint wandert vom Button auf die Sektionsfläche: Hörprobe und Abschluss sind ganz grün. Damit steht die Frage im Raum, die keines der anderen Sets stellt: Muss die Markenfarbe klein und kräftig sein, oder darf sie groß sein? Die 60/30/10-Regel sagt klein. Marken, die eine Farbe wirklich besetzen wollen, machen es trotzdem groß. `#6bbc98` ist dafür der Grenzfall — hell genug, dass schwarze Schrift darauf steht (7,7:1), aber kräftig genug, dass eine ganze Sektion damit auffällt. Innerhalb dieser Sektionen drehen die Buttons auf Off-White, sonst verschwänden sie im Grund: Ein mintgrüner Button auf mintgrüner Fläche hat 1:1. Auch das steht unten als eigene Regel. Zwei Dinge, die man erwarten sollte: Die Seite wirkt deutlich markanter und weniger zurückhaltend. Und das dunkle Grün verliert an Bedeutung — es färbt weiter die Überschriften, hat aber neben der großen Fläche weniger zu sagen. */ :root[data-ms-palette="lisa-gruenflaeche"] { --ms-surface-page: #f7f3ea; --ms-surface-soft: #f7f3ea; --ms-surface-accent: #6bbc98; --ms-surface-accent-2: #6bbc98; --ms-color-white: #fffdf8; --ms-color-creme: #f7f3ea; --ms-color-beige: #e1e3e6; --ms-color-gray: #e1e3e6; --ms-color-blue: #6bbc98; --ms-color-yellow: #e1e3e6; --ms-color-toffee: #3f8b69; --ms-color-cta-text: #1a1a1a; --ms-color-green: #6bbc98; --ms-color-green-dark: #3f8b69; --ms-color-rose: #6bbc98; --ms-color-heading: #3f8b69; --ms-color-text: #1a1a1a; --ms-color-text-soft: #1a1a1a; } /* ========================================================= Flächen-Rhythmus Gilt für alle Paletten. Weiß trägt die Seite, die Sekundärfläche trennt, die Akzentfläche hebt zwei Sektionen heraus: Hero weiß Problem sekundär Schritte weiß Hörprobe AKZENT Boxen weiß Trust sekundär So funktioniert weiß Reviews sekundär Geschichte weiß Begleiter/FAQ sekundär Abschluss-CTA AKZENT Inspiration weiß Warum `!important`: Die Sektionen setzen ihre Hintergrundfarbe als Custom Property im `style`-Attribut (aus dem Theme-Editor). Eine Inline-Deklaration schlägt jede normale Regel aus dem Stylesheet — nur `!important` kommt dagegen an. Überschrieben wird bewusst die Variable und nicht `background`: Sektionen wie Reviews und Geschichte legen über die Fläche noch einen Verlauf, der sonst verloren ginge. Folge, die man kennen muss: Solange eine Palette aktiv ist, wirkt die Hintergrundfarbe im Theme-Editor bei diesen Sektionen nicht mehr. Sie steht weiter in `templates/index.json` und gilt wieder, sobald der Farbtest abgeschaltet ist. ========================================================= */ :root[data-ms-palette] .ms-home-hero { --ms-home-hero-background: var(--ms-surface-page) !important; } :root[data-ms-palette] .ms-home-problem { --ms-home-problem-background: var(--ms-surface-soft) !important; } :root[data-ms-palette] .ms-home-steps { --ms-home-steps-background: var(--ms-surface-page) !important; } :root[data-ms-palette] .ms-home-audio { --ms-home-audio-background: var(--ms-surface-accent) !important; } :root[data-ms-palette] .ms-home-boxes { --ms-home-boxes-background: var(--ms-surface-page) !important; } :root[data-ms-palette] .ms-home-trust { --ms-home-trust-background: var(--ms-surface-soft) !important; } :root[data-ms-palette] .how-3 { --how-3-background: var(--ms-surface-page) !important; } :root[data-ms-palette] .ms-reviews { --ms-reviews-background: var(--ms-surface-soft) !important; } :root[data-ms-palette] .ms-brand-story { --ms-brand-story-background: var(--ms-surface-page) !important; } :root[data-ms-palette] .ms-companion-faq { --ms-companion-faq-background: var(--ms-surface-soft) !important; } :root[data-ms-palette] .ms-final-cta { --ms-final-cta-background: var(--ms-surface-soft) !important; } :root[data-ms-palette] .ms-inspiration { --ms-inspiration-background: var(--ms-surface-page) !important; } /* Der Trenner setzt seine Fläche direkt, ohne Variable. */ :root[data-ms-palette] .ms-divider { background: var(--ms-surface-page); } /* ---------- Wellenübergänge ---------- Ein Übergang trägt oben die Fläche der Sektion darüber und schneidet unten mit der Welle die Fläche der Sektion darunter ein. Beide Farben stehen im Theme-Editor und müssen dem Rhythmus folgen, sonst blitzt an jeder Kante die alte Farbe auf. Deshalb hier über die Nachbarschaft im DOM statt über die Einstellung: `+` greift die Sektion darüber, `:has(+ …)` die darunter. Erst der Standardfall (weiß), danach die Ausnahmen — bei gleicher Spezifität gewinnt die letzte Regel. Der Übergang unter der Slideshow bleibt außen vor: Dort ist „Fläche darüber transparent" gesetzt, weil oben ein Bild liegt. `transparent` ist der richtige Wert und wird von der ersten Regel bewusst nicht angefasst — sie zielt nur auf Übergänge mit einer Sektion darüber, die eine Fläche hat. */ :root[data-ms-palette] .section-ms-home-steps + .section-ms-transition .ms-section-transition, :root[data-ms-palette] .section-ms-home-boxes + .section-ms-transition .ms-section-transition, :root[data-ms-palette] .how-3-section + .section-ms-transition .ms-section-transition, :root[data-ms-palette] .section-ms-brand-story + .section-ms-transition .ms-section-transition { --ms-transition-top: var(--ms-surface-page) !important; } :root[data-ms-palette] .section-ms-home-problem + .section-ms-transition .ms-section-transition, :root[data-ms-palette] .section-ms-home-trust + .section-ms-transition .ms-section-transition, :root[data-ms-palette] .section-ms-reviews + .section-ms-transition .ms-section-transition, :root[data-ms-palette] .section-ms-companion-faq + .section-ms-transition .ms-section-transition, :root[data-ms-palette] .section-ms-final-cta + .section-ms-transition .ms-section-transition { --ms-transition-top: var(--ms-surface-soft) !important; } :root[data-ms-palette] .section-ms-home-audio + .section-ms-transition .ms-section-transition { --ms-transition-top: var(--ms-surface-accent) !important; } /* Die Welle bekommt ihre Farbe als Inline-`color` am SVG, deshalb auch hier `!important`. */ :root[data-ms-palette] .ms-section-transition .ms-wave-edge { color: var(--ms-surface-page) !important; } :root[data-ms-palette] .section-ms-transition:has(+ .section-ms-home-problem) .ms-wave-edge, :root[data-ms-palette] .section-ms-transition:has(+ .section-ms-home-trust) .ms-wave-edge, :root[data-ms-palette] .section-ms-transition:has(+ .section-ms-reviews) .ms-wave-edge, :root[data-ms-palette] .section-ms-transition:has(+ .section-ms-companion-faq) .ms-wave-edge, :root[data-ms-palette] .section-ms-transition:has(+ .section-ms-final-cta) .ms-wave-edge { color: var(--ms-surface-soft) !important; } :root[data-ms-palette] .section-ms-transition:has(+ .section-ms-home-audio) .ms-wave-edge, :root[data-ms-palette] .section-ms-transition:has(+ .section-ms-boxes-faq) .ms-wave-edge { color: var(--ms-surface-accent) !important; } /* ========================================================= Die Lisa-Familie — die Stellen, die eine Werteliste nicht abdeckt Gilt für alle vier Lisa-Varianten. Der Selektor greift über `^="lisa"`, also über den Namenspräfix — eine neue Variante braucht nur einen Token-Block, kein eigenes CSS. Deshalb steht hier auch kein einziger Hex-Wert mehr: Alles läuft über die Tokens, und welche Farbe eine Variante an die Stelle setzt, entscheidet allein ihr Block weiter oben. Steht bewusst NACH dem Flächen-Rhythmus: Die Regel für die Abschluss-Sektion hat dieselbe Spezifität wie die dortige und muss sie schlagen. Bei gleicher Spezifität gewinnt die spätere. ========================================================= */ /* ---------- Farbige Überschriften ---------- Fließtext bleibt in allen Varianten schwarz. Farbig darf nur werden, was groß genug ist: Ab 24 Pixel verlangt die WCAG 3:1 statt 4,5:1, und erst damit ist eine Akzentfarbe als Schrift überhaupt zulässig. `#3f8b69` erreicht auf dem Creme 3,7:1 — als Überschrift also in Ordnung, als Fließtext nicht. Gefärbt werden H1 und H2 — die Überschrift der Seite und die Überschriften der Sektionen. Das ist eine wiederkehrende Aufgabe: Jede Sektion beginnt gleich, die Farbe wird zur Gliederung statt zur Dekoration. Beide zusammen, nicht nur eine von beiden: Nur die H2 zu färben würde die Hierarchie umdrehen — zehn farbige Sektionsüberschriften über einer schwarzen Hauptüberschrift. Und nur die H1 zu färben hieße, dass die Farbe genau einmal auf der Seite vorkommt, also wieder Dekoration statt System. H3 und kleiner bleiben schwarz: Das sind Zwischenüberschriften im Fließtext, keine Landmarken. Und ihre Größe fällt auf Mobilgeräten unter die Grenze, ab der 3:1 genügt. Eine Folge, die man kennen muss: Die H1 im Hero hat eine hervorgehobene zweite Zeile (`.ms-home-hero__accent`), die ohnehin über die Akzentfarbe läuft. Jetzt ist die ganze Überschrift in dieser Farbe, die Hervorhebung geht in ihr auf. Soll die zweite Zeile weiter herausstechen, braucht sie einen eigenen Wert — Schwarz wäre der einzige aus der Liste, der dafür genug absticht. Ausgenommen ist `.banner__heading` — die Überschrift der Slideshow steht über einem Bild, dort gilt keine der hier gerechneten Kontrastzahlen. */ :root[data-ms-palette^="lisa"] h1:not(.banner__heading), :root[data-ms-palette^="lisa"] h2:not(.banner__heading) { color: var(--ms-color-heading); } /* ---------- Der Hauptakzent als Fläche ---------- Die Stellen, an denen die Akzentfarbe wirklich eine Fläche füllt statt Text einzufärben. Sie laufen über `--ms-color-green` — in der Grundvariante das Mint, in der Rosa-Variante das Rosa. Das `:not()` ist wichtig: `.button` allein würde auch den Hinweis-Button, die Outline- und die Ghost-Variante einfärben. Gemeint sind nur Buttons ohne eigene Variante, die laufen über die Grundregel und sind Primary. `.ms-home-steps__number` bekommt die Schriftfarbe mit: Es greift nicht auf `--ms-color-cta-text` zu, sondern setzt Weiß fest — das wären auf dem Mint 2,3:1. */ :root[data-ms-palette^="lisa"] .button--primary, :root[data-ms-palette^="lisa"] .button:not([class*="button--"]), :root[data-ms-palette^="lisa"] .ms-home-steps__number, :root[data-ms-palette^="lisa"] .benefits__icon { color: var(--ms-color-cta-text); background: var(--ms-color-green); } /* Der Hover bleibt bei derselben Farbe. Im Theme hellt er sonst die CTA-Farbe mit Weiß auf — das wäre ein weiterer Farbton, der in keiner Liste steht. Die Rückmeldung trägt hier allein das `translateY` aus `_ms-buttons.css`. */ :root[data-ms-palette^="lisa"] .button--primary:hover { background: var(--ms-color-green); } /* Secondary: helle Karte mit Kontur im Hauptakzent. Die Kontur läuft über `box-shadow` statt `border`, damit der Button dieselbe Größe behält wie der Primary daneben. Der Hover geht auf das Creme und nicht auf eine angemischte Zwischenfarbe. */ :root[data-ms-palette^="lisa"] .button--secondary { color: var(--ms-color-cta-text); background: var(--ms-color-white); box-shadow: inset 0 0 0 1px var(--ms-color-green); } :root[data-ms-palette^="lisa"] .button--secondary:hover { background: var(--ms-color-creme); } /* Drei Stellen in der Inspirationssektion färben Schrift und Icons über das Flächen-Token ein. Das ist die einzige Farbe, die dort nicht stehen darf — auf dem Creme wären es 2,1:1. Deshalb die Schrift-Variante. */ :root[data-ms-palette^="lisa"] .ms-inspiration__kicker, :root[data-ms-palette^="lisa"] .ms-inspiration__icon, :root[data-ms-palette^="lisa"] .ms-inspiration__footer > span:nth-child(2) { color: var(--ms-color-green-dark); } /* ---------- Abschluss-Sektion ---------- Der CTA sitzt jetzt als weiße Karte auf derselben Fläche wie Begleiter & FAQ direkt davor (`--ms-surface-soft`) — beide gehen nahtlos ineinander über, ohne eigenen Wellen-Übergang dazwischen. Die Sektion und die Welle danach müssen denselben Wert tragen, sonst blitzt an der Kante die Farbe des Rhythmus auf. */ :root[data-ms-palette^="lisa"] .ms-final-cta { --ms-final-cta-background: var(--ms-surface-soft) !important; --ms-final-cta-text: var(--ms-color-text) !important; } :root[data-ms-palette^="lisa"] .section-ms-final-cta + .section-ms-transition .ms-section-transition { --ms-transition-top: var(--ms-surface-soft) !important; } :root[data-ms-palette^="lisa"] .section-ms-transition:has(+ .section-ms-final-cta) .ms-wave-edge { color: var(--ms-surface-soft) !important; } /* ---------- Die Nebenrolle ---------- Vier kleine Stellen, oben, zweimal in der Mitte und unten — jede für sich klein, aber über die Seite verteilt, damit die Farbe überhaupt vorkommt. Alle vier sind Flächen oder Dekor, keine färbt Text: In der Grundvariante steht hier Rosa, und Rosa erreicht auf dem Creme nur 1,8:1. Varianten ohne Rosa setzen `--ms-color-rose` auf ihre eigene Akzentfarbe — die vier Stellen verschwinden also nicht, sondern wechseln mit. */ /* 1. Der Punkt vor den Badges unter der Hero-Überschrift. */ :root[data-ms-palette^="lisa"] .ms-home-hero__badge::before { background: var(--ms-color-rose); } /* 2. Die großen Anführungszeichen in den Bewertungen. Sie laufen sonst über eine Sektionseinstellung; hier wird die Eigenschaft direkt gesetzt, nicht die Variable überschrieben — dann bleibt die Einstellung für alle anderen Paletten unangetastet. */ :root[data-ms-palette^="lisa"] .ms-reviews__quote::before, :root[data-ms-palette^="lisa"] .ms-reviews__quote::after { color: var(--ms-color-rose); } /* 3. Der Kreis am Aufklapper der FAQ, fünfmal untereinander. Das Plus darin muss mit: Weiß auf Rosa wären 1,9:1, Schwarz 8,9:1. */ :root[data-ms-palette^="lisa"] .ms-companion-faq__toggle { background: var(--ms-color-rose); } :root[data-ms-palette^="lisa"] .ms-companion-faq__toggle::before, :root[data-ms-palette^="lisa"] .ms-companion-faq__toggle::after { background: var(--ms-color-text); } /* 4. Die gepunkteten Linien im Fuß der Inspirationssektion. */ :root[data-ms-palette^="lisa"] .ms-inspiration__footer > span:first-child, :root[data-ms-palette^="lisa"] .ms-inspiration__footer > span:last-child { border-top-color: var(--ms-color-rose); } /* ========================================================= Zwei Sets drehen eine Fläche um Set 5 und Set 6 legen eine Sektion auf eine mitteldunkle oder dunkle Fläche. Dort stimmen die Schriftfarben der Palette nicht mehr — sie sind für hellen Grund gerechnet. Gelöst über lokale Token statt über einzelne Regeln: Die Sektion definiert `--ms-color-text` und Verwandte für sich neu, und alles darin erbt die neuen Werte. Deshalb braucht es keine Liste von Selektoren für Überschrift, Fließtext, Eyebrow und Icons. ========================================================= */ /* Set 5: In der schwarzen Abschluss-Sektion dreht die Schrift auf Off-White (15,7:1) und der Akzent auf das Mint (7,7:1). Das dunkle Grün käme dort nur auf 2,6:1. `--ms-color-cta-text` bleibt bewusst schwarz: Es färbt die Schrift AUF dem mintgrünen Button, nicht die Schrift auf der Sektion. */ :root[data-ms-palette="lisa-nacht"] .ms-final-cta { --ms-color-text: #fffdf8; --ms-color-text-soft: #fffdf8; --ms-color-heading: #fffdf8; --ms-color-toffee: #6bbc98; --ms-color-green-dark: #6bbc98; } /* Set 6: Auf der mintgrünen Fläche trägt Schwarz (7,7:1). Das dunkle Grün käme auf 1,8:1 und fällt damit auch als Überschrift aus. */ :root[data-ms-palette="lisa-gruenflaeche"] .ms-home-audio, :root[data-ms-palette="lisa-gruenflaeche"] .ms-final-cta { --ms-color-heading: #1a1a1a; --ms-color-toffee: #1a1a1a; --ms-color-green-dark: #1a1a1a; } /* Und der Button dreht dort auf Off-White — mintgrün auf mintgrün wäre 1:1, der Button verschwände in der Fläche. Die Kontur hält ihn zusätzlich zusammen. */ :root[data-ms-palette="lisa-gruenflaeche"] .ms-home-audio .button--primary, :root[data-ms-palette="lisa-gruenflaeche"] .ms-final-cta .button--primary { background: var(--ms-color-white); box-shadow: inset 0 0 0 1px var(--ms-color-text); } /* ========================================================= Der Switcher selbst Bewusst ohne die Farb-Tokens der Palette gebaut: Das Panel muss in jeder Palette gleich aussehen, sonst bewertet man es mit. Deshalb feste Werte statt `var(--ms-color-…)`. ========================================================= */ .ms-palette-switcher { position: fixed; right: 1.6rem; bottom: 1.6rem; z-index: 100; display: flex; flex-direction: column; gap: 0.8rem; width: max-content; max-width: calc(100vw - 3.2rem); /* Mit über zehn Paletten wird die Liste höher als kleine Fenster. Dann scrollt sie in sich, statt oben aus dem Bild zu laufen. */ max-height: calc(100vh - 3.2rem); overflow-y: auto; padding: 1.2rem; font-family: system-ui, sans-serif; color: #1c1c1c; background: rgb(255 255 255 / 96%); border: 1px solid #d8d8d8; border-radius: 1.2rem; box-shadow: 0 0.6rem 2.4rem rgb(0 0 0 / 18%); } .ms-palette-switcher[hidden] { display: none; } .ms-palette-switcher__head { display: flex; gap: 1.2rem; align-items: center; justify-content: space-between; } .ms-palette-switcher__title { margin: 0; font-size: 1.15rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #6b6b6b; } .ms-palette-switcher__toggle { flex: 0 0 auto; padding: 0.4rem 0.8rem; font: inherit; font-size: 1.15rem; color: #6b6b6b; cursor: pointer; background: #f1f1f1; border: 1px solid #dcdcdc; border-radius: 0.6rem; } .ms-palette-switcher__toggle:hover { color: #1c1c1c; border-color: #9a9a9a; } /* ========================================================= Eingeklappt Der Zustand hängt am -Element, gesetzt schon im (siehe Snippet). Nur so steht das Panel beim Laden gleich klein da, statt einmal offen aufzublitzen. ========================================================= */ .ms-palette-switcher__toggle-label--open { display: none; } html.ms-palette-collapsed .ms-palette-switcher__title, html.ms-palette-collapsed .ms-palette-switcher__list, html.ms-palette-collapsed .ms-palette-switcher__note, html.ms-palette-collapsed .ms-palette-switcher__toggle-label--close { display: none; } html.ms-palette-collapsed .ms-palette-switcher__toggle-label--open { display: inline; } html.ms-palette-collapsed .ms-palette-switcher { padding: 0.6rem; } .ms-palette-switcher__list { display: flex; flex-direction: column; gap: 0.5rem; margin: 0; padding: 0; list-style: none; } .ms-palette-switcher__button { display: flex; gap: 0.9rem; align-items: center; width: 100%; padding: 0.6rem 0.9rem; font: inherit; font-size: 1.3rem; text-align: left; cursor: pointer; background: #ffffff; border: 1px solid #dcdcdc; border-radius: 0.8rem; } .ms-palette-switcher__button:hover { border-color: #9a9a9a; } /* Die aktive Palette wird über `aria-pressed` markiert — ein Zustand, den auch der Screenreader ausgibt. */ .ms-palette-switcher__button[aria-pressed="true"] { font-weight: 600; background: #f1f1f1; border-color: #1c1c1c; } /* Drei Punkte in Sekundärfläche, Akzentfläche und CTA der jeweiligen Palette: Die Vorschau muss die Farben zeigen, um die es geht, auch wenn gerade eine andere Palette aktiv ist. Deshalb stehen die Werte als Hex am Button, gesetzt im Snippet. */ .ms-palette-switcher__swatch { display: flex; flex: 0 0 auto; gap: 0.2rem; } .ms-palette-switcher__dot { width: 1.1rem; height: 1.1rem; border: 1px solid rgb(0 0 0 / 12%); border-radius: 50%; } .ms-palette-switcher__note { max-width: 22rem; margin: 0; font-size: 1.05rem; line-height: 1.4; color: #6b6b6b; } /* Im Screenshot-Modus (`?ms_screenshot=1`) nicht mitfotografieren. Die Palette selbst bleibt aktiv, damit sich jede Variante aufnehmen lässt. */ html.ms-screenshot-mode .ms-palette-switcher { display: none; }