Section-Farbklassen (boutique-tone-*)

Mit sieben CSS-Klassen lässt sich eine ganze CMS-Section (Erlebniswelt) in einer Theme-Farbe einfärben. Die Klassen erscheinen bewusst in keinem Admin-Dropdown — sie werden von Hand in das CSS-Klassen-Feld der Section eingetragen.

So trägt man sie ein

1. Im Page-Builder die gewünschte Section auswählen.
2. Zahnrad/Einstellungen → Feld „CSS-Klasse".
3. Klassennamen eintragen, z. B. boutique-tone-accent-3.

Die Klasse landet auf .cms-section und färbt die Section von links bis rechts ein (volle Breite randlos, „boxed" füllt die Box) — genau wie eine nativ gesetzte Section-Hintergrundfarbe.

Mehrere Klassen werden mit Leerzeichen getrennt, z. B. boutique-tone-primary boutique-hero-overlay.

Verfügbare Klassen

Klasse	Hintergrund (Theme-Farbe)	Schrift
boutique-tone-surface	Fläche (--surface)	dunkel (Standard)
boutique-tone-muted	Gedämpft (--muted)	dunkel (Standard)
boutique-tone-accent-1	Akzent 1 (--accent-1)	dunkel (Standard)
boutique-tone-accent-2	Akzent 2 (--accent-2)	dunkel (Standard)
boutique-tone-accent-3	Akzent 3 (--accent-3)	dunkel (Standard)
boutique-tone-primary	Primärfarbe (--primary)	hell (automatisch)
boutique-tone-secondary	Sekundärfarbe (--secondary)	hell (automatisch)

Hinweise

• Farben laufen mit der Palette mit. Die Klassen nutzen die Theme-Farben (CSS-Variablen), keinen festen Hex-Wert. Ändert man im Theme-Manager z. B. Akzent 3, ändert sich auch boutique-tone-accent-3 automatisch mit.

• Dunkler Kontext = automatisch helle Schrift. Bei boutique-tone-primary und boutique-tone-secondary (dunkler Grund) invertiert die ganze Section: Vordergrund-Tokens (--fg, --fg-soft, --neutral, --muted, Hairlines) werden hell, Flächen-Tokens (--bg, --surface) dunkel. Da alle Boutique-Komponenten auf diesen Tokens aufbauen, schalten Texte, Karten, Buttons und Badges ohne Zusatzarbeit mit um.

• Seltene Ausnahme: Elemente mit einer fixen Akzent-/Sale-Farbfläche (z. B. ein Sale-Label auf einer Produktkarte) behalten ihre Akzentfläche; deren Beschriftung kann im Einzelfall manuelles Nachjustieren brauchen. Für editoriale Text- und Karten-Inhalte ist nichts nötig.

• Keine Abstände. Die Klassen setzen keinen Innenabstand — vertikale Abstände wie gewohnt über die Section-/Block-Einstellungen steuern.

• Hintergrundbild bleibt erhalten. Es wird nur die Hintergrundfarbe gesetzt; ein zusätzlich gesetztes Section-Hintergrundbild überlagert sie weiterhin.

Kombination mit Hero-Overlay

Auf der obersten Hero-Section lassen sich Farbklasse und Hero-Overlay kombinieren — meist ist ein Overlay aber für Foto-Heros gedacht, eine dunkle Farbfläche eher für reine Text-/Akzent-Bänder.