Ergänze am Textelement die Helfer-Klasse u-text--on-dark. Sie stellt die Schriftfarbe auf einen hellen Ton um.
Warum das passiert
Alle Textklassen gehen von einem hellen Hintergrund aus — der Normalfall. Legst du eine Sektion oder Karte auf eine dunkle Fläche, bleibt die Schrift dunkel und verschwindet.
Die Lösung
Die Textklasse bleibt, die Helfer-Klasse kommt dazu — getrennt durch ein Leerzeichen:
| Vorher | Nachher |
|---|---|
t-heading--l |
t-heading--l u-text--on-dark |
t-text--m |
t-text--m u-text--on-dark |
t-label--s |
t-label--s u-text--on-dark |
Das funktioniert bei jeder Textklasse — Überschriften, Fließtext und Labels gleichermaßen.
Bei mehreren Elementen
Liegen Überschrift, Text und Button gemeinsam auf der dunklen Fläche, braucht jedes Textelement die Klasse einzeln. Sie wird nicht vom Container an die Kinder weitergegeben.
Buttons auf dunklem Grund
c-btn--primary funktioniert auf dunklem Hintergrund unverändert — er ist gefüllt und bringt seinen eigenen Kontrast mit.
c-btn--secondary ist weiß mit farbigem Rahmen und wirkt auf dunklem Grund oft wie ein Fehler. Nimm dort besser c-btn--primary, oder melde dich — falls du die Variante häufiger brauchst, ergänzen wir eine passende Version im System.
t-label--xs-light findest: diese Klasse gibt es nicht. Sie war ein Fehler in einer frühen Dokumentfassung. Richtig ist u-text--on-dark.Bild als Hintergrund
Auf Fotos ist die Lesbarkeit heikel, weil der Hintergrund stellenweise hell und stellenweise dunkel ist. u-text--on-dark allein reicht dann oft nicht. Setze zusätzlich eine abdunkelnde Überlagerung — in Elementor beim Container unter Stil → Hintergrund-Overlay mit etwa 40–60 % Deckkraft. Das ist eine erlaubte Ausnahme, weil es die Fläche betrifft und nicht die Schrift.