/* * Dunkles Farbschema. * * ------------------------------------------------------------------------------ * WARUM ES DIESE DATEI GIBT * * Aus Matomo, 180 Tage: 80.204 Besuche, 69 Prozent von Smartphone oder Phablet, * 33 Prozent zwischen 20 und 6 Uhr. Die staerkste Einzelstunde des Tages ist * 23 Uhr, noch vor der Tagesspitze um 14 Uhr. Auf einer gewoehnlichen * Informationsseite faellt die Kurve nach 22 Uhr ab; hier nicht. * * Wer diese Seite liest, tut es ueberproportional haeufig nachts, allein, auf * dem Telefon. Fuer einen erheblichen Teil dieser Besucher gilt ausserdem, dass * sie nicht moechten, dass jemand im Raum sieht, was auf ihrem Bildschirm steht. * Eine weisse Seite leuchtet nachts durch ein halbes Zimmer. * * Das dunkle Schema ist hier also naeher an einer Diskretionsfunktion als an * einer Komfortfunktion. * * ------------------------------------------------------------------------------ * UEBER DIE ACHT PALETTENVARIABLEN, NICHT UEBER 173 OPTIONSVARIABLEN * * Avada fuehrt seine Farben als --awb-color1 bis --awb-color8 und setzt sie * ueberall ein. Wer stattdessen die Optionsvariablen anfasst, muss 173 Stellen * pflegen und uebersieht die 174. * * DIE DOPPELFUNKTION VON color1: gemessen auf /hilfesuchende/ steht sie 11-mal * als background-color und 15-mal als color. Beides zeigt in dieselbe Richtung, * weil im dunklen Schema auch der Akzent hell wird: die Flaeche wird dunkel, und * Text, der auf dem hellen Akzent steht, muss ebenfalls dunkel werden. * Trotzdem ist das die Stelle, an der ein Fehler zuerst auftaucht, und deshalb * gehoert nach jeder Aenderung der Kontrastlauf darueber. * * ------------------------------------------------------------------------------ * DREI ZUSTAENDE * * Automatisch nur prefers-color-scheme entscheidet * Hell html[data-ktw-schema="hell"], schlaegt die Systemeinstellung * Dunkel html[data-ktw-schema="dunkel"], schlaegt sie ebenfalls * * Die Vorgabe ist "automatisch". Deshalb steht die volle Palette unter der * Medienabfrage MIT einem Ausschluss der ausdruecklichen Hellwahl, und ein * zweites Mal unter der ausdruecklichen Dunkelwahl. */ :root:root { /* Sagt dem Browser, welche Grundfarben er fuer Formularfelder, Scrollbalken und die Standardfarben nehmen soll. Ohne das bleiben Eingabefelder weiss. */ --ktw-schema: light; } /* ------------------------------------------------------------------------ Die dunkle Palette, einmal definiert und zweimal angewandt. ------------------------------------------------------------------------ */ @media (prefers-color-scheme: dark) { :root:root:not([data-ktw-schema="hell"]) { color-scheme: dark; --awb-color1: #10161e; /* war #ffffff, Flaeche und Text auf Akzent */ --awb-color2: #171f29; /* war #f9f9f9, heller Hintergrund */ --awb-color3: rgba(127, 176, 240, .12); /* war rgba(23,80,157,0.05), Handlungsflaeche */ --awb-color4: #7fb0f0; /* war #17509d */ --awb-color5: #7fb0f0; /* war #17509d, Akzent, Links, Knoepfe */ --awb-color6: rgba(232, 238, 246, .72); /* war rgba(40,40,40,.78), Kopiergrau */ --awb-color7: #e8eef6; /* war #282828, Haupttext */ --awb-color8: #f2f6fc; /* war #141617 */ --ktw-schema: dark; --ktw-grund: #0d1219; --ktw-flaeche: #171f29; --ktw-linie: rgba(232, 238, 246, .14); --ktw-akzent: #7fb0f0; } } :root:root[data-ktw-schema="dunkel"] { color-scheme: dark; --awb-color1: #10161e; --awb-color2: #171f29; --awb-color3: rgba(127, 176, 240, .12); --awb-color4: #7fb0f0; --awb-color5: #7fb0f0; --awb-color6: rgba(232, 238, 246, .72); --awb-color7: #e8eef6; --awb-color8: #f2f6fc; --ktw-schema: dark; --ktw-grund: #0d1219; --ktw-flaeche: #171f29; --ktw-linie: rgba(232, 238, 246, .14); --ktw-akzent: #7fb0f0; } /* ------------------------------------------------------------------------ Was die Palette allein nicht erreicht. Avada malt einige Flaechen mit festen Werten statt mit der Palette. Die Regeln hier haengen an --ktw-schema und greifen deshalb NUR im dunklen Zustand, ohne die Medienabfrage ein drittes Mal zu wiederholen. ------------------------------------------------------------------------ */ @media (prefers-color-scheme: dark) { :root:not([data-ktw-schema="hell"]) body, :root:not([data-ktw-schema="hell"]) #wrapper, :root:not([data-ktw-schema="hell"]) #main, :root:not([data-ktw-schema="hell"]) .fusion-footer, :root:not([data-ktw-schema="hell"]) #boxed-wrapper, :root:not([data-ktw-schema="hell"]) .fusion-body { background-color: var(--ktw-grund); color: var(--awb-color7); } } :root[data-ktw-schema="dunkel"] body, :root[data-ktw-schema="dunkel"] #wrapper, :root[data-ktw-schema="dunkel"] #main, :root[data-ktw-schema="dunkel"] .fusion-footer, :root[data-ktw-schema="dunkel"] #boxed-wrapper, :root[data-ktw-schema="dunkel"] .fusion-body { background-color: var(--ktw-grund); color: var(--awb-color7); } /* ------------------------------------------------------------------------ Fotos bleiben Fotos. Sie werden NICHT abgedunkelt. Ein Foto ist Inhalt, kein Flaechenelement; ein filter:brightness() darauf sieht aus wie ein Fehler und nimmt Gesichtern die Zeichnung. Was sich aendert, ist nur der Rahmen darum. ------------------------------------------------------------------------ */ /* Fremdlogos, und zwar an zwei Orten unterschiedlich. IN DER FUSSZEILE: die Foerderlogos stehen auf einer WEISSEN PLATTE. Bis zum 28.08.2026 stand hier eine Negativfassung aus brightness(0) invert(1). Sie sah in der dunklen Fusszeile ruhiger aus und war ausdruecklich so gewuenscht. Sie ist trotzdem falsch. In der Kurzdokumentation "Logos mit Foerderzusatz" des Presse- und Informationsamts der Bundesregierung, die dem Zuwendungsbescheid 2518BMJ008 beilag, steht woertlich: Das Logo steht immer auf Weiss. Es verfuegt ueber eine Schutzzone, in der kein anderes Element platziert werden darf. Das ist die Gestaltungsvorgabe des Zuwendungsgebers, und der Bescheid verlangt die Anbringung ausdruecklich auch fuer Veroeffentlichungen im Internet. Eine Invertierung ist eine Veraenderung der Marke; dieselbe Kurzdokumentation verlangt sogar, technisch veraenderte Dateien unter einem anderen Namen abzulegen. Das padding IST die Schutzzone. Sie ist der Grund, warum die Platte groesser ist als das Bild. Wer sie wegnimmt, nimmt die Vorgabe weg. data-orig-src MUSS mit in den Selektor. Avadas Lazyload ersetzt den src durch einen Platzhalter und haengt die echte Adresse an data-orig-src; erst das Skript tauscht sie zurueck. Ohne die zweite Zeile bliebe das Logo bis zu diesem Tausch ohne Platte, also genau in dem Moment, in dem die Seite zum ersten Mal erscheint. IM INHALT: dort bleibt die helle Platte. SZ, NZZ, SWR, rbb, DLF, Tagesspiegel und SRF stehen in Beitraegen als Quellenangabe, nicht als Gestaltungselement; eine Negativfassung waere dort eine Aussage ueber eine fremde Marke, die wir nicht treffen wollen. NACHTRAG VOM 28.08.2026: DIE ZWEITE ZEILE FEHLTE UNTEN Der Absatz oben erklaert, warum `[data-orig-src$=".svg"]` mitmuss. Bei der Fusszeilen-Regel steht sie, bei der Inhalts-Regel darunter stand sie nicht. Die Begruendung war notiert und nicht angewandt. Gemessen auf /berichterstattung/ im dunklen Schema, vor dem Tausch durch das Lazyload-Skript: SWR (#1a171b) bei 1,02:1, SZ und NZZ ohne eigenen Farbwert, also schwarz, NDR Schleswig-Holstein (#173e7d) bei 1,75:1. Vier Logos, die bis zum Nachladen nicht da sind, waehrend Tagesspiegel und DLF daneben schon auf ihrer Platte stehen. Kein Kontrastlauf findet das: er misst Schrift gegen Flaeche. */ @media (prefers-color-scheme: dark) { :root:not([data-ktw-schema="hell"]) #foerderer img, :root:not([data-ktw-schema="hell"]) .ktw-foerder__logos img, :root:not([data-ktw-schema="hell"]) .fusion-tb-footer img[src$=".svg"], :root:not([data-ktw-schema="hell"]) .fusion-tb-footer img[data-orig-src$=".svg"], :root:not([data-ktw-schema="hell"]) .fusion-footer img[src$=".svg"], :root:not([data-ktw-schema="hell"]) .fusion-footer img[data-orig-src$=".svg"] { background-color: #ffffff; padding: 14px 18px; border-radius: 4px; } :root:not([data-ktw-schema="hell"]) .hentry .fusion-image-wrapper img[src$=".svg"], :root:not([data-ktw-schema="hell"]) .hentry .fusion-image-wrapper img[data-orig-src$=".svg"] { background: #eef1f5; padding: 12px; border-radius: 6px; } } :root[data-ktw-schema="dunkel"] #foerderer img, :root[data-ktw-schema="dunkel"] .ktw-foerder__logos img, :root[data-ktw-schema="dunkel"] .fusion-tb-footer img[src$=".svg"], :root[data-ktw-schema="dunkel"] .fusion-tb-footer img[data-orig-src$=".svg"], :root[data-ktw-schema="dunkel"] .fusion-footer img[src$=".svg"], :root[data-ktw-schema="dunkel"] .fusion-footer img[data-orig-src$=".svg"] { background-color: #ffffff; padding: 14px 18px; border-radius: 4px; } :root[data-ktw-schema="dunkel"] .hentry .fusion-image-wrapper img[src$=".svg"], :root[data-ktw-schema="dunkel"] .hentry .fusion-image-wrapper img[data-orig-src$=".svg"] { background: #eef1f5; padding: 12px; border-radius: 6px; } /* ------------------------------------------------------------------------ Avadas eigene Knopfbeschriftung .fusion-button-text traegt die Markenfarbe #17509d aus den Theme-Optionen, nicht aus der Palette. Auf dunklem Grund sind das 2,3:1. Gemessen an 41 Knoepfen allein auf /hilfesuchende/. !important ist hier noetig und nicht bequem. Auf den Newsletter-Seiten steht in einem Inline-Block die Regel #newsletter .fusion-text [class*="button"] span { color: #17509d } Sie traegt eine Id und schlaegt damit jede Regel aus dieser Datei, egal wie viele Klassen man davorsetzt: in der Spezifitaet zaehlt eine Id mehr als beliebig viele Klassen. Nachgewiesen, indem die tatsaechlich zutreffenden Regeln des Elements im Browser aufgelistet wurden. ------------------------------------------------------------------------ */ @media (prefers-color-scheme: dark) { :root:not([data-ktw-schema="hell"]) .fusion-button-text, :root:not([data-ktw-schema="hell"]) .awb-button__text, :root:not([data-ktw-schema="hell"]) .fusion-button .fusion-button-icon-divider i { color: #7fb0f0 !important; } } :root[data-ktw-schema="dunkel"] .fusion-button-text, :root[data-ktw-schema="dunkel"] .awb-button__text, :root[data-ktw-schema="dunkel"] .fusion-button .fusion-button-icon-divider i { color: #7fb0f0 !important; } /* Eine Ausnahme fuer "gefuellte" Knoepfe stand hier und war falsch geraten. Gemessen: die Klasse button-default bezeichnet bei Avada zwar die gefuellte Fassung, gefuellt wird sie aber mit --awb-color1, und die ist im dunklen Schema selbst dunkel. Beide Knopfarten haben also dunklen Grund (rgba(0,0,0,0) und rgb(16,22,30)), und dunkle Schrift darauf ergab 1,03:1. Die Lehre ist dieselbe wie beim Blaetterleisten-Block: nicht aus dem Namen einer Klasse schliessen, was sie tut, sondern nachsehen. */ /* ------------------------------------------------------------------------ Helle Flaechen aus dem Builder-Markup Avada schreibt Abschnittsfarben als style-Attribut ins Markup. Wer dort eine Variable gewaehlt hat, kippt mit; wer eine feste Farbe gewaehlt hat, nicht. Gemessen auf /mediathek/: zweimal background-color:#ffffff und einmal #f9f9f9, und darauf stand dann heller Text auf hellem Grund. Attributselektoren auf die Zeichenkette des style-Attributs sind der einzige Weg, an eine Inline-Deklaration heranzukommen, ohne das Markup anzufassen. !important ist noetig, weil ein style-Attribut sonst gewinnt. Die Schreibweisen sind gemessen, nicht geraten: Avada schreibt ohne Leerzeichen, der Builder mit. Die Werte stammen ebenfalls aus einer Abfrage und nicht aus einer Liste im Kopf: gesucht wurde ueber alle veroeffentlichten Inhalte nach background_color-Attributen und nach roher background-color-Schreibweise. Gefunden wurden #f9f9f9 (693x), #ffffff (41x), white (10x), #fafafa (8x), #f7f7f7 (7x) und #edf0f5 (1x). #f8f8f8 kam in keinem Inhalt vor, sondern entsteht zur Laufzeit: der Jugendschutz-Block auf Beitrag 1865 setzt seine Ersatzmeldung per innerHTML ein. Siehe .time-restriction-message weiter unten. ------------------------------------------------------------------------ */ @media (prefers-color-scheme: dark) { :root:not([data-ktw-schema="hell"]) [style^="background-color:#ffffff"], :root:not([data-ktw-schema="hell"]) [style*=";background-color:#ffffff"], :root:not([data-ktw-schema="hell"]) [style*="; background-color:#ffffff"], :root:not([data-ktw-schema="hell"]) [style^="background-color: #ffffff"], :root:not([data-ktw-schema="hell"]) [style*=";background-color: #ffffff"], :root:not([data-ktw-schema="hell"]) [style*="; background-color: #ffffff"], :root:not([data-ktw-schema="hell"]) [style^="background-color:#fff;"], :root:not([data-ktw-schema="hell"]) [style*=";background-color:#fff;"], :root:not([data-ktw-schema="hell"]) [style*="; background-color:#fff;"], :root:not([data-ktw-schema="hell"]) [style^="background-color:#f9f9f9"], :root:not([data-ktw-schema="hell"]) [style*=";background-color:#f9f9f9"], :root:not([data-ktw-schema="hell"]) [style*="; background-color:#f9f9f9"], :root:not([data-ktw-schema="hell"]) [style^="background-color: #f9f9f9"], :root:not([data-ktw-schema="hell"]) [style*=";background-color: #f9f9f9"], :root:not([data-ktw-schema="hell"]) [style*="; background-color: #f9f9f9"], :root:not([data-ktw-schema="hell"]) [style^="background-color:#fafafa"], :root:not([data-ktw-schema="hell"]) [style*=";background-color:#fafafa"], :root:not([data-ktw-schema="hell"]) [style*="; background-color:#fafafa"], :root:not([data-ktw-schema="hell"]) [style^="background-color:#f7f7f7"], :root:not([data-ktw-schema="hell"]) [style*=";background-color:#f7f7f7"], :root:not([data-ktw-schema="hell"]) [style*="; background-color:#f7f7f7"], :root:not([data-ktw-schema="hell"]) [style^="background-color: #f7f7f7"], :root:not([data-ktw-schema="hell"]) [style*=";background-color: #f7f7f7"], :root:not([data-ktw-schema="hell"]) [style*="; background-color: #f7f7f7"], :root:not([data-ktw-schema="hell"]) [style^="background-color:#f8f8f8"], :root:not([data-ktw-schema="hell"]) [style*=";background-color:#f8f8f8"], :root:not([data-ktw-schema="hell"]) [style*="; background-color:#f8f8f8"], :root:not([data-ktw-schema="hell"]) [style^="background-color: #f8f8f8"], :root:not([data-ktw-schema="hell"]) [style*=";background-color: #f8f8f8"], :root:not([data-ktw-schema="hell"]) [style*="; background-color: #f8f8f8"], :root:not([data-ktw-schema="hell"]) [style^="background-color:#edf0f5"], :root:not([data-ktw-schema="hell"]) [style*=";background-color:#edf0f5"], :root:not([data-ktw-schema="hell"]) [style*="; background-color:#edf0f5"], :root:not([data-ktw-schema="hell"]) [style^="background-color:white"], :root:not([data-ktw-schema="hell"]) [style*=";background-color:white"], :root:not([data-ktw-schema="hell"]) [style*="; background-color:white"], :root:not([data-ktw-schema="hell"]) [style^="background-color:#f3f6fa"], :root:not([data-ktw-schema="hell"]) [style*=";background-color:#f3f6fa"], :root:not([data-ktw-schema="hell"]) [style*="; background-color:#f3f6fa"] { background-color: var(--ktw-flaeche) !important; } } :root[data-ktw-schema="dunkel"] [style^="background-color:#ffffff"], :root[data-ktw-schema="dunkel"] [style*=";background-color:#ffffff"], :root[data-ktw-schema="dunkel"] [style*="; background-color:#ffffff"], :root[data-ktw-schema="dunkel"] [style^="background-color: #ffffff"], :root[data-ktw-schema="dunkel"] [style*=";background-color: #ffffff"], :root[data-ktw-schema="dunkel"] [style*="; background-color: #ffffff"], :root[data-ktw-schema="dunkel"] [style^="background-color:#fff;"], :root[data-ktw-schema="dunkel"] [style*=";background-color:#fff;"], :root[data-ktw-schema="dunkel"] [style*="; background-color:#fff;"], :root[data-ktw-schema="dunkel"] [style^="background-color:#f9f9f9"], :root[data-ktw-schema="dunkel"] [style*=";background-color:#f9f9f9"], :root[data-ktw-schema="dunkel"] [style*="; background-color:#f9f9f9"], :root[data-ktw-schema="dunkel"] [style^="background-color: #f9f9f9"], :root[data-ktw-schema="dunkel"] [style*=";background-color: #f9f9f9"], :root[data-ktw-schema="dunkel"] [style*="; background-color: #f9f9f9"], :root[data-ktw-schema="dunkel"] [style^="background-color:#fafafa"], :root[data-ktw-schema="dunkel"] [style*=";background-color:#fafafa"], :root[data-ktw-schema="dunkel"] [style*="; background-color:#fafafa"], :root[data-ktw-schema="dunkel"] [style^="background-color:#f7f7f7"], :root[data-ktw-schema="dunkel"] [style*=";background-color:#f7f7f7"], :root[data-ktw-schema="dunkel"] [style*="; background-color:#f7f7f7"], :root[data-ktw-schema="dunkel"] [style^="background-color: #f7f7f7"], :root[data-ktw-schema="dunkel"] [style*=";background-color: #f7f7f7"], :root[data-ktw-schema="dunkel"] [style*="; background-color: #f7f7f7"], :root[data-ktw-schema="dunkel"] [style^="background-color:#f8f8f8"], :root[data-ktw-schema="dunkel"] [style*=";background-color:#f8f8f8"], :root[data-ktw-schema="dunkel"] [style*="; background-color:#f8f8f8"], :root[data-ktw-schema="dunkel"] [style^="background-color: #f8f8f8"], :root[data-ktw-schema="dunkel"] [style*=";background-color: #f8f8f8"], :root[data-ktw-schema="dunkel"] [style*="; background-color: #f8f8f8"], :root[data-ktw-schema="dunkel"] [style^="background-color:#edf0f5"], :root[data-ktw-schema="dunkel"] [style*=";background-color:#edf0f5"], :root[data-ktw-schema="dunkel"] [style*="; background-color:#edf0f5"], :root[data-ktw-schema="dunkel"] [style^="background-color:white"], :root[data-ktw-schema="dunkel"] [style*=";background-color:white"], :root[data-ktw-schema="dunkel"] [style*="; background-color:white"], :root[data-ktw-schema="dunkel"] [style^="background-color:#f3f6fa"], :root[data-ktw-schema="dunkel"] [style*=";background-color:#f3f6fa"], :root[data-ktw-schema="dunkel"] [style*="; background-color:#f3f6fa"] { background-color: var(--ktw-flaeche) !important; } /* ------------------------------------------------------------------------ Avadas Typografie-Variablen Ueberschriften und Fliesstext beziehen ihre Farbe nicht aus der Farbpalette, sondern aus einem zweiten Satz Variablen der Typografie-Einstellungen: --h1_typography-color bis --h6_typography-color und --awb-text-color. Gemessen: die H1 stand mit rgb(40,40,40) bei 1,13:1. Das ist die zweite Haelfte dessen, was die Erhebung "die Doppelfunktion der Palette" nannte: es gibt zwei Farbsysteme, und beide muessen kippen. ------------------------------------------------------------------------ */ @media (prefers-color-scheme: dark) { :root:root:not([data-ktw-schema="hell"]) { --h1_typography-color: #e8eef6; --h2_typography-color: #e8eef6; --h3_typography-color: #e8eef6; --h4_typography-color: #e8eef6; --h5_typography-color: #e8eef6; --h6_typography-color: #e8eef6; --awb-text-color: #e8eef6; --awb-link-color: #7fb0f0; --awb-headingcolor: #e8eef6; } } :root:root[data-ktw-schema="dunkel"] { --h1_typography-color: #e8eef6; --h2_typography-color: #e8eef6; --h3_typography-color: #e8eef6; --h4_typography-color: #e8eef6; --h5_typography-color: #e8eef6; --h6_typography-color: #e8eef6; --awb-text-color: #e8eef6; --awb-link-color: #7fb0f0; --awb-headingcolor: #e8eef6; } /* Der Zurueck-nach-oben-Knopf und die Blaetterzahlen standen bei 2,1 und 3,8:1. Kleine Schrift braucht 4,5. */ @media (prefers-color-scheme: dark) { :root:not([data-ktw-schema="hell"]) .fusion-one-page-text-link, :root:not([data-ktw-schema="hell"]) #toTop, :root:not([data-ktw-schema="hell"]) .pagination .current, :root:not([data-ktw-schema="hell"]) .pagination a { color: #b9d3f6; } } :root[data-ktw-schema="dunkel"] .fusion-one-page-text-link, :root[data-ktw-schema="dunkel"] #toTop, :root[data-ktw-schema="dunkel"] .pagination .current, :root[data-ktw-schema="dunkel"] .pagination a { color: #b9d3f6; } /* ------------------------------------------------------------------------ Das dritte Farbsystem: --awb-bg-color je Spalte Avada kennt DREI Wege, eine Farbe zu setzen, und alle drei muessen kippen: 1. die Palette --awb-color1 bis --awb-color8, oben 2. die Typografie --h1_typography-color und Verwandte, oben 3. die Bausteinfarben --awb-bg-color, je Spalte INLINE am Element Der dritte ist der unangenehmste, weil er im style-Attribut steht und deshalb weder ueber :root noch ueber einen Selektor erreichbar ist. Erreichbar ist er nur ueber einen Attributselektor auf die Zeichenkette. Gemessen auf /hilfesuchende/: fuenf Spalten benutzen sinnvollerweise var(--awb-color2) und kippen von selbst mit, eine traegt #f9f9f9 fest ein und blieb hell. Darauf standen 28 Textelemente bei 1,11:1, darunter die ganze Standortliste. Das ist die Sorte Fehler, die ein Diff nie findet und ein Blick sofort. ------------------------------------------------------------------------ */ @media (prefers-color-scheme: dark) { :root:not([data-ktw-schema="hell"]) [style*="--awb-bg-color:#f9f9f9"], :root:not([data-ktw-schema="hell"]) [style*="--awb-bg-color: #f9f9f9"], :root:not([data-ktw-schema="hell"]) [style*="--awb-bg-color:#ffffff"], :root:not([data-ktw-schema="hell"]) [style*="--awb-bg-color: #ffffff"], :root:not([data-ktw-schema="hell"]) [style*="--awb-bg-color:#fff;"], :root:not([data-ktw-schema="hell"]) [style*="--awb-bg-color:#fafafa"], :root:not([data-ktw-schema="hell"]) [style*="--awb-bg-color:#f3f6fa"], :root:not([data-ktw-schema="hell"]) [style*="--awb-bg-color-hover:#f9f9f9"], :root:not([data-ktw-schema="hell"]) [style*="--awb-bg-color-hover: #f9f9f9"], :root:not([data-ktw-schema="hell"]) [style*="--awb-bg-color-hover:#ffffff"], :root:not([data-ktw-schema="hell"]) [style*="--awb-bg-color-hover: #ffffff"], :root:not([data-ktw-schema="hell"]) [style*="--awb-bg-color-hover:#fff;"], :root:not([data-ktw-schema="hell"]) [style*="--awb-bg-color-hover:#fafafa"], :root:not([data-ktw-schema="hell"]) [style*="--awb-bg-color-hover:#f3f6fa"] { /* !important ist Pflicht: eine Inline-Deklaration schlaegt jede Regel aus einem Stylesheet, auch bei benutzerdefinierten Eigenschaften. Ohne das griff der Selektor zwar, der Wert blieb aber #f9f9f9. */ --awb-bg-color: #171f29 !important; /* Die Hover-Fassung MUSS mit. Sie fehlte bis zum 28.08.2026, und dadurch sprang die ganze Standortkarte auf /hilfesuchende/ beim Ueberfahren auf #f9f9f9 zurueck, waehrend die Schrift hell blieb. Etwas heller als die Ruhefarbe, damit der Wechsel sichtbar ist. */ --awb-bg-color-hover: #1b2531 !important; } } :root[data-ktw-schema="dunkel"] [style*="--awb-bg-color:#f9f9f9"], :root[data-ktw-schema="dunkel"] [style*="--awb-bg-color: #f9f9f9"], :root[data-ktw-schema="dunkel"] [style*="--awb-bg-color:#ffffff"], :root[data-ktw-schema="dunkel"] [style*="--awb-bg-color: #ffffff"], :root[data-ktw-schema="dunkel"] [style*="--awb-bg-color:#fff;"], :root[data-ktw-schema="dunkel"] [style*="--awb-bg-color:#fafafa"], :root[data-ktw-schema="dunkel"] [style*="--awb-bg-color:#f3f6fa"], :root[data-ktw-schema="dunkel"] [style*="--awb-bg-color-hover:#f9f9f9"], :root[data-ktw-schema="dunkel"] [style*="--awb-bg-color-hover: #f9f9f9"], :root[data-ktw-schema="dunkel"] [style*="--awb-bg-color-hover:#ffffff"], :root[data-ktw-schema="dunkel"] [style*="--awb-bg-color-hover: #ffffff"], :root[data-ktw-schema="dunkel"] [style*="--awb-bg-color-hover:#fff;"], :root[data-ktw-schema="dunkel"] [style*="--awb-bg-color-hover:#fafafa"], :root[data-ktw-schema="dunkel"] [style*="--awb-bg-color-hover:#f3f6fa"] { --awb-bg-color: #171f29 !important; --awb-bg-color-hover: #1b2531 !important; } /* ------------------------------------------------------------------------ Das vierte Farbsystem: --awb-background-color am Abschnitt GEFUNDEN AM 28.08.2026 vom Kontrastlauf, nachdem der Blank-Fehler behoben war: /angehoerige/ meldete 12 und /mediathek/ 13 Textstellen bei 1,11:1, alle als #e8eef6 auf #f9f9f9. Also heller Text auf einer Flaeche, die hell geblieben war. Ursache ist eine VIERTE Schreibweise, die es bis dahin nirgends gab: Avada setzt an ganzen Abschnitten inline --awb-background-color, nicht --awb-bg-color. Und sie ist beim Beheben des Blank-Fehlers mit herausgefallen: dort wurde die Grenze auf "Deklaration am Anfang des Attributs oder hinter einem Semikolon" gezogen, damit [style*="background-color:#ffffff"] nicht mehr versehentlich --awb-background-color:#ffffff trifft. Richtig fuer background-color, und fuer die Variable heisst es: sie braucht ihre eigene, ausdrueckliche Regel. WARUM DIE REGEL AUF .fusion-fullwidth BEGRENZT IST Gezaehlt im ausgelieferten HTML von 25 Adressen, alle Vorkommen von --awb-background-color mit hellem Wert: 75x div.awb-off-canvas-wrap DARF NICHT umgefaerbt werden 3x div.fusion-fullwidth muss umgefaerbt werden Die 75 sind genau die Elemente, die am 28.08.2026 die ganze Site beim Scrollen schwarz gedeckt haben. Avada setzt sie selbst auf background-color: transparent !important; eine Regel mit hoeherer Spezifitaet macht daraus eine deckende Platte ueber dem Fenster. Ein Attributselektor allein trifft beide Gruppen. Deshalb ist die Regel an die Klasse des Abschnitts gebunden und nicht an das Attribut allein. Das ist keine Vorsichtsmassnahme, das ist die Lehre aus dem Fehler. ------------------------------------------------------------------------ */ @media (prefers-color-scheme: dark) { :root:not([data-ktw-schema="hell"]) .fusion-fullwidth[style*="--awb-background-color:#f9f9f9"], :root:not([data-ktw-schema="hell"]) .fusion-fullwidth[style*="--awb-background-color: #f9f9f9"], :root:not([data-ktw-schema="hell"]) .fusion-fullwidth[style*="--awb-background-color:#ffffff"], :root:not([data-ktw-schema="hell"]) .fusion-fullwidth[style*="--awb-background-color: #ffffff"], :root:not([data-ktw-schema="hell"]) .fusion-fullwidth[style*="--awb-background-color:#fff;"], :root:not([data-ktw-schema="hell"]) .fusion-fullwidth[style*="--awb-background-color:#fafafa"] { --awb-background-color: #171f29 !important; background-color: #171f29 !important; } } :root[data-ktw-schema="dunkel"] .fusion-fullwidth[style*="--awb-background-color:#f9f9f9"], :root[data-ktw-schema="dunkel"] .fusion-fullwidth[style*="--awb-background-color: #f9f9f9"], :root[data-ktw-schema="dunkel"] .fusion-fullwidth[style*="--awb-background-color:#ffffff"], :root[data-ktw-schema="dunkel"] .fusion-fullwidth[style*="--awb-background-color: #ffffff"], :root[data-ktw-schema="dunkel"] .fusion-fullwidth[style*="--awb-background-color:#fff;"], :root[data-ktw-schema="dunkel"] .fusion-fullwidth[style*="--awb-background-color:#fafafa"] { --awb-background-color: #171f29 !important; background-color: #171f29 !important; } /* ------------------------------------------------------------------------ Die letzten drei Stellen Nach dem dritten Variablensystem blieben je Seite noch zwei bis sieben Elemente unter AA. Alle drei Ursachen sind Kleinteile, die ihre Farbe weder aus der Palette noch aus der Typografie noch aus --awb-bg-color beziehen: der Zurueck-nach-oben-Knopf heller Text auf hellem Knopfgrund das Schliesskreuz im Off-Canvas rgb(0,0,0), fest von Avada die Statuszahlen auf der Startseite rgb(40,40,40) aus einem Fliesstext-Baustein ------------------------------------------------------------------------ */ @media (prefers-color-scheme: dark) { :root:not([data-ktw-schema="hell"]) #toTop, :root:not([data-ktw-schema="hell"]) #toTop span, :root:not([data-ktw-schema="hell"]) .fusion-one-page-text-link span { background-color: #1f2a38; color: #e8eef6; } :root:not([data-ktw-schema="hell"]) .off-canvas-close, :root:not([data-ktw-schema="hell"]) .awb-off-canvas .off-canvas-close, :root:not([data-ktw-schema="hell"]) .awb-icon-close { color: #e8eef6 !important; } /* NUR die Panele, die im hellen Schema eine helle Platte tragen. Begruendung im Nachtrag vom 28.08.2026 weiter unten. */ :root:not([data-ktw-schema="hell"]) .awb-off-canvas-wrap[style*="--awb-background-color:#ffffff"] .awb-off-canvas, :root:not([data-ktw-schema="hell"]) .awb-off-canvas-wrap[style*="--awb-background-color: #ffffff"] .awb-off-canvas, :root:not([data-ktw-schema="hell"]) .awb-off-canvas-wrap[style*="--awb-background-color:#fff;"] .awb-off-canvas, :root:not([data-ktw-schema="hell"]) .awb-off-canvas-wrap[style*="--awb-background-color:#f9f9f9"] .awb-off-canvas, :root:not([data-ktw-schema="hell"]) .awb-off-canvas-wrap[style*="--awb-background-color:#ffffff"] .awb-off-canvas__content, :root:not([data-ktw-schema="hell"]) .awb-off-canvas-wrap[style*="--awb-background-color: #ffffff"] .awb-off-canvas__content, :root:not([data-ktw-schema="hell"]) .awb-off-canvas-wrap[style*="--awb-background-color:#fff;"] .awb-off-canvas__content, :root:not([data-ktw-schema="hell"]) .awb-off-canvas-wrap[style*="--awb-background-color:#f9f9f9"] .awb-off-canvas__content { background-color: var(--ktw-flaeche); } /* Der Statuszahlen-Baustein: der Text steht als rgb(40,40,40) in einem Fliesstext-Element ohne eigene Klasse. Ueber den Elternbaustein greifbar. */ :root:not([data-ktw-schema="hell"]) .fusion-column-has-shadow .fusion-text p, :root:not([data-ktw-schema="hell"]) .fusion-column-has-shadow .fusion-text li { color: #e8eef6; } } :root[data-ktw-schema="dunkel"] #toTop, :root[data-ktw-schema="dunkel"] #toTop span, :root[data-ktw-schema="dunkel"] .fusion-one-page-text-link span { background-color: #1f2a38; color: #e8eef6; } :root[data-ktw-schema="dunkel"] .off-canvas-close, :root[data-ktw-schema="dunkel"] .awb-off-canvas .off-canvas-close, :root[data-ktw-schema="dunkel"] .awb-icon-close { color: #e8eef6 !important; } :root[data-ktw-schema="dunkel"] .awb-off-canvas-wrap[style*="--awb-background-color:#ffffff"] .awb-off-canvas, :root[data-ktw-schema="dunkel"] .awb-off-canvas-wrap[style*="--awb-background-color: #ffffff"] .awb-off-canvas, :root[data-ktw-schema="dunkel"] .awb-off-canvas-wrap[style*="--awb-background-color:#fff;"] .awb-off-canvas, :root[data-ktw-schema="dunkel"] .awb-off-canvas-wrap[style*="--awb-background-color:#f9f9f9"] .awb-off-canvas, :root[data-ktw-schema="dunkel"] .awb-off-canvas-wrap[style*="--awb-background-color:#ffffff"] .awb-off-canvas__content, :root[data-ktw-schema="dunkel"] .awb-off-canvas-wrap[style*="--awb-background-color: #ffffff"] .awb-off-canvas__content, :root[data-ktw-schema="dunkel"] .awb-off-canvas-wrap[style*="--awb-background-color:#fff;"] .awb-off-canvas__content, :root[data-ktw-schema="dunkel"] .awb-off-canvas-wrap[style*="--awb-background-color:#f9f9f9"] .awb-off-canvas__content { background-color: var(--ktw-flaeche); } :root[data-ktw-schema="dunkel"] .fusion-column-has-shadow .fusion-text p, :root[data-ktw-schema="dunkel"] .fusion-column-has-shadow .fusion-text li { color: #e8eef6; } /* Die allerletzten drei, gemessen und einzeln benannt: das Schliesskreuz im Off-Canvas, das seine Farbe als Inline-Attribut traegt die Blaetterzahl der Erfahrungsberichte die Stand-Angabe unter den Statuszahlen bei 3,96 statt 4,5 */ @media (prefers-color-scheme: dark) { :root:not([data-ktw-schema="hell"]) .awb-off-canvas [class*="close"], :root:not([data-ktw-schema="hell"]) .awb-off-canvas [class*="close"] * { color: #e8eef6 !important; } :root:not([data-ktw-schema="hell"]) .fusion-testimonials .activeSlide, :root:not([data-ktw-schema="hell"]) .testimonial-pagination span { color: #0d1219; } :root:not([data-ktw-schema="hell"]) .fusion-text p em, :root:not([data-ktw-schema="hell"]) .fusion-text p small { color: rgba(232, 238, 246, .82); } } :root[data-ktw-schema="dunkel"] .awb-off-canvas [class*="close"], :root[data-ktw-schema="dunkel"] .awb-off-canvas [class*="close"] * { color: #e8eef6 !important; } :root[data-ktw-schema="dunkel"] .fusion-testimonials .activeSlide, :root[data-ktw-schema="dunkel"] .testimonial-pagination span { color: #0d1219; } :root[data-ktw-schema="dunkel"] .fusion-text p em, :root[data-ktw-schema="dunkel"] .fusion-text p small { color: rgba(232, 238, 246, .82); } /* ------------------------------------------------------------------------ FREMDES PLUGIN: GRAVITY FORMS Diese Regeln kann ktw-dunkel-ableiten.py nicht erzeugen. Das Skript liest die eigenen Stildateien, und in keiner davon steht die Farbe eines Formularlabels: die bringt Gravity Forms in seinem eigenen Stylesheet mit. Hier stand bis zum 28.08.2026 auch ein Satz fuer wpDataTables. Das Plugin ist durch ktw-tabellen.php ersetzt, dessen Farben aus ktw-tabelle.css kommen und damit von der Ableitung erfasst werden. Die Regeln sind deshalb entfallen. Gefunden wurden sie erst, als die Kontrastmessung von drei auf 29 Seiten ausgeweitet wurde. Auf /publikationen/ und /fachkraefte/ lagen 49 Zellen bei 1,13, also praktisch unlesbar, waehrend die drei zuerst geprueften Seiten sauber waren. Die Lehre ist nicht "mehr messen", sondern: eine Stichprobe deckt nur die Bausteine ab, die auf den Stichprobenseiten vorkommen. Die Eingabefelder selbst sind bereits versorgt, sie erben ueber die Avada-Variablen. Fehlend waren nur die Teile, die Gravity Forms mit fest eingetragenen Farben ausliefert. ------------------------------------------------------------------------ */ @media (prefers-color-scheme: dark) { /* Gravity Forms: Beschriftungen (#112337) und Unterbeschriftungen (#585e6a) */ :root:not([data-ktw-schema="hell"]) .gform_wrapper .gfield_label, :root:not([data-ktw-schema="hell"]) .gform_wrapper .gform-field-label { color: #e8eef6 !important; } :root:not([data-ktw-schema="hell"]) .gform_wrapper .gform-field-label--type-sub, :root:not([data-ktw-schema="hell"]) .gform_wrapper .gfield_description, :root:not([data-ktw-schema="hell"]) .gform_wrapper .ginput_complex label, :root:not([data-ktw-schema="hell"]) .gform_wrapper strong { color: rgba(232, 238, 246, .78) !important; } /* Das Pflichtfeldzeichen stand bei 4,13 und damit knapp unter AA. */ :root:not([data-ktw-schema="hell"]) .gform_wrapper .gfield_required, :root:not([data-ktw-schema="hell"]) .gform_wrapper .gfield_required_text { color: #ff8fa3 !important; } :root:not([data-ktw-schema="hell"]) .gform_wrapper input, :root:not([data-ktw-schema="hell"]) .gform_wrapper textarea, :root:not([data-ktw-schema="hell"]) .gform_wrapper select { border-bottom-color: rgba(127, 176, 240, .28) !important; } } :root[data-ktw-schema="dunkel"] .gform_wrapper .gfield_label, :root[data-ktw-schema="dunkel"] .gform_wrapper .gform-field-label { color: #e8eef6 !important; } :root[data-ktw-schema="dunkel"] .gform_wrapper .gform-field-label--type-sub, :root[data-ktw-schema="dunkel"] .gform_wrapper .gfield_description, :root[data-ktw-schema="dunkel"] .gform_wrapper .ginput_complex label, :root[data-ktw-schema="dunkel"] .gform_wrapper strong { color: rgba(232, 238, 246, .78) !important; } :root[data-ktw-schema="dunkel"] .gform_wrapper .gfield_required, :root[data-ktw-schema="dunkel"] .gform_wrapper .gfield_required_text { color: #ff8fa3 !important; } :root[data-ktw-schema="dunkel"] .gform_wrapper input, :root[data-ktw-schema="dunkel"] .gform_wrapper textarea, :root[data-ktw-schema="dunkel"] .gform_wrapper select { border-bottom-color: rgba(127, 176, 240, .28) !important; } /* ------------------------------------------------------------------------ DAS LOGO Zwei Bilder im Markup, eines per CSS ausgeblendet. KEIN Skripttausch. WARUM NICHT JAVASCRIPT Bis zum 28.08.2026 tauschte ktw-farbschema.js das src-Attribut an DOMContentLoaded. Das ist zu spaet: das steht im Koerper und existiert zum Zeitpunkt des synchronen Kopfskripts noch gar nicht, ein Skript kann es also fruehestens nach dem Parsen anfassen. Bis dahin steht das helle Logo, und das ist dunkler Text, auf dunklem Grund. Auf der Startseite mit 194 kB ein Wimpernschlag, auf /hilfesuchende/ mit 782 kB nicht mehr. Genau das hat am 28.08.2026 zum sofortigen Abschalten des Schemas gefuehrt. Der Satz, um den es geht: CSS kann ein Element gestalten, bevor es existiert. JavaScript kann das nicht. WARUM NICHT mit media="(prefers-color-scheme: dark)" waere die Standardloesung und laedt nur eine Datei. Das media-Attribut wird aber beim Parsen ausgewertet und reagiert NICHT auf data-ktw-schema. Wer "Dunkel" waehlt, obwohl sein Geraet hell steht, bekaeme das helle Logo; der Umschalter waere fuer das Logo wirkungslos. Der Preis dieser Loesung ist eine zweite Datei im Cache, rund 3 kB gzip, einmal. Das ist der billigste Posten in dieser Liste. Umgeschaltet wird ueber die KENNUNGEN, nicht ueber die Klassen: eine Klasse verliert gegen Avadas .fusion-imageframe, siehe ktw-gestaltung.css. Beide Bilder tragen denselben Alternativtext. Das ausgeblendete wird Screenreadern nicht angesagt, es gibt also keine Doppelung, und in JEDEM Zustand hat der Verweis zur Startseite einen Namen. ------------------------------------------------------------------------ */ /* Der Grundzustand (.ktw-logo-dunkel ausgeblendet, Groesse des zweiten Bildes) steht NICHT hier, sondern in ktw-gestaltung.css. Grund: diese Datei laedt nur bei eingeschaltetem Schema. Am 28.08.2026 stand er hier, das Schema war aus, und beide Logos standen untereinander im Kopfbereich. Eine Regel, die das MARKUP in Ordnung haelt, darf nicht an einem Schalter haengen; nur die Umschaltung darf das. */ @media (prefers-color-scheme: dark) { :root:not([data-ktw-schema="hell"]) #fusion-logo { display: none; } :root:not([data-ktw-schema="hell"]) #fusion-logo-dunkel { display: inline-block; } } :root[data-ktw-schema="dunkel"] #fusion-logo { display: none; } :root[data-ktw-schema="dunkel"] #fusion-logo-dunkel { display: inline-block; } /* ------------------------------------------------------------------------ DAS KLEINE ZEICHEN AUF SCHMALEN SCHIRMEN Auf dem Telefon zeigt die Kopfzeile nicht die Wortmarke, sondern nur das Zeichen. Und zwar NICHT als , sondern als Hintergrundbild einer Spalte, ueber die Variable --awb-inner-bg-image im style-Attribut. Das ist der Grund, warum die Umschaltung darueber es nicht erwischt hat: #fusion-logo und #fusion-logo-dunkel sind zwei Bilder, von denen eines ausgeblendet wird. Ein Hintergrundbild laesst sich nicht ausblenden, es muss ausgetauscht werden. Gemeldet am 28.08.2026 mit einem Foto vom Telefon: dunkelblaues Zeichen (#17509D) auf fast schwarzem Grund (#0d1218), gerechnet 1,4:1. Kein Kontrastlauf findet das, denn er misst Schrift, und ein Hintergrundbild ist noch weniger Schrift als ein . WARUM EINE ZWEITE DATEI UND KEIN filter `filter` auf der Spalte traefe alles darin, auch das Burger-Zeichen daneben. Die zweite Datei ist derselbe Weg, den ktw-de-dunkel.svg fuer die Wortmarke schon geht, und sie kostet 2,7 kB. Die Adresse steht als Variable, nicht als background-image. Deshalb wird die VARIABLE gesetzt: Avada liest sie danach von selbst. Und sie steht ab dem Wurzelverzeichnis, nicht relativ zu dieser Datei. Eine relative Adresse INNERHALB einer Variablen loesen die Browser unterschiedlich auf, mal gegen das Stilblatt, mal gegen das Dokument. Ein Pfad mit fuehrendem Schrägstrich ist in beiden Faellen derselbe. Der Selektor nennt BEIDES, die Eigenschaft und die Datei. Der Dateiname allein waere nach der Regel in ktw-dunkel-ableiten.py ein unscharfer Attributselektor, und die Regel ist gut: ein [style*="…"] soll nicht irgendwo mitten im Attribut treffen duerfen. Mit [style*="--awb-inner-bg-image"] davor ist gesagt, WELCHE Eigenschaft gemeint ist, und der Dateiname sagt, WELCHE Spalte. ------------------------------------------------------------------------ */ @media (prefers-color-scheme: dark) { :root:not([data-ktw-schema="hell"]) [style*="--awb-inner-bg-image"][style*="ktw-de-favicon-animiert.svg"] { --awb-inner-bg-image: url("/uploads/ktw-de-favicon-dunkel.svg") !important; } } :root[data-ktw-schema="dunkel"] [style*="--awb-inner-bg-image"][style*="ktw-de-favicon-animiert.svg"] { --awb-inner-bg-image: url("/uploads/ktw-de-favicon-dunkel.svg") !important; } /* ------------------------------------------------------------------------ DIE OFF-CANVAS-PANELE .awb-off-canvas traegt die Palettenfarbe und wird dunkel, .awb-off-canvas-inner nicht: Avada setzt dessen Flaeche je Panel aus einer eigenen Option und schreibt sie als festes #ffffff in fusion-dynamic-css. Folge im dunklen Schema: helle Schrift auf weisser Flaeche, gemessen 1,17:1. Betroffen sind alle sieben Panele, darunter das Newsletter-Formular, das auf JEDER Seite haengt. WARUM DAS DIE MESSUNG UEBER 29 SEITEN NICHT GEFUNDEN HAT Ein geschlossenes Panel hat kein offsetParent, seine Elemente werden also uebersprungen. Die Lehre vom August, dass eine Stichprobe nur die Bausteine abdeckt, die auf den Stichprobenseiten vorkommen, gilt eine Ebene tiefer noch einmal: sie deckt auch nur die ZUSTAENDE ab, in denen die Bausteine gerade sind. Wer Aufklappbares hat, muss es aufklappen. ------------------------------------------------------------------------ NACHTRAG VOM 28.08.2026: DIE REGEL WAR ZU GROB Sie faerbte ALLE Panele. Gemessen sind es aber vier, und eins davon ist im hellen Schema absichtlich durchsichtig: awb-oc-2756 Newsletter-Formular hell #ffffff awb-oc-1831 Verlassen hell #ffffff awb-oc-33 Menue hell #ffffff awb-oc-1308 Videofenster hell TRANSPARENT Beim Videofenster soll man den Verlauf hinter dem Video sehen, nicht eine Platte. Im hellen Schema faellt das nicht auf, weil dort nichts gemalt wird. Im dunklen malte die Regel #171f29 darunter, und damit standen zwei Dinge im Bild, die vorher niemand sah: ein 20 Pixel hoher Streifen unter dem Video (das Panel ist 470 hoch, das Video 450) und vier eckige Ecken um ein Video mit border-radius: 10px. Beides ist NICHT durch das dunkle Schema entstanden. Der Streifen und der Radius sind auch hell da, sie sind dort nur unsichtbar, weil keine Flaeche dahinterliegt. Das dunkle Schema hat sie sichtbar gemacht, und das ist ein nuetzlicher Nebeneffekt: es zeigt, wo die helle Gestaltung sich auf Durchsichtigkeit verlaesst. Der Ausweg ist derselbe wie beim vierten Farbsystem weiter unten: NICHT die Farbe pauschal setzen, sondern die Variable ersetzen, und zwar nur dort, wo sie einen hellen Wert traegt. `transparent` ist kein heller Wert und bleibt damit von selbst stehen. ------------------------------------------------------------------------ */ @media (prefers-color-scheme: dark) { :root:not([data-ktw-schema="hell"]) .awb-off-canvas-inner[style*="--awb-background-color:#ffffff"], :root:not([data-ktw-schema="hell"]) .awb-off-canvas-inner[style*="--awb-background-color: #ffffff"], :root:not([data-ktw-schema="hell"]) .awb-off-canvas-inner[style*="--awb-background-color:#fff;"], :root:not([data-ktw-schema="hell"]) .awb-off-canvas-inner[style*="--awb-background-color:#f9f9f9"], :root:not([data-ktw-schema="hell"]) .awb-off-canvas-wrap[style*="--awb-background-color:#ffffff"] .awb-off-canvas-inner, :root:not([data-ktw-schema="hell"]) .awb-off-canvas-wrap[style*="--awb-background-color: #ffffff"] .awb-off-canvas-inner, :root:not([data-ktw-schema="hell"]) .awb-off-canvas-wrap[style*="--awb-background-color:#fff;"] .awb-off-canvas-inner, :root:not([data-ktw-schema="hell"]) .awb-off-canvas-wrap[style*="--awb-background-color:#f9f9f9"] .awb-off-canvas-inner { --awb-background-color: #171f29 !important; background-color: #171f29 !important; } :root:not([data-ktw-schema="hell"]) .awb-off-canvas .menu-text, :root:not([data-ktw-schema="hell"]) .awb-off-canvas .awb-menu__main-a, :root:not([data-ktw-schema="hell"]) .awb-off-canvas .awb-menu__sub-a { color: #e8eef6 !important; } } :root[data-ktw-schema="dunkel"] .awb-off-canvas-inner[style*="--awb-background-color:#ffffff"], :root[data-ktw-schema="dunkel"] .awb-off-canvas-inner[style*="--awb-background-color: #ffffff"], :root[data-ktw-schema="dunkel"] .awb-off-canvas-inner[style*="--awb-background-color:#fff;"], :root[data-ktw-schema="dunkel"] .awb-off-canvas-inner[style*="--awb-background-color:#f9f9f9"], :root[data-ktw-schema="dunkel"] .awb-off-canvas-wrap[style*="--awb-background-color:#ffffff"] .awb-off-canvas-inner, :root[data-ktw-schema="dunkel"] .awb-off-canvas-wrap[style*="--awb-background-color: #ffffff"] .awb-off-canvas-inner, :root[data-ktw-schema="dunkel"] .awb-off-canvas-wrap[style*="--awb-background-color:#fff;"] .awb-off-canvas-inner, :root[data-ktw-schema="dunkel"] .awb-off-canvas-wrap[style*="--awb-background-color:#f9f9f9"] .awb-off-canvas-inner { --awb-background-color: #171f29 !important; background-color: #171f29 !important; } :root[data-ktw-schema="dunkel"] .awb-off-canvas .menu-text, :root[data-ktw-schema="dunkel"] .awb-off-canvas .awb-menu__main-a, :root[data-ktw-schema="dunkel"] .awb-off-canvas .awb-menu__sub-a { color: #e8eef6 !important; } /* Die Jugendschutz-Ersatzmeldung auf Beitrag 1865. Ausserhalb von 22 bis 6 Uhr ersetzt ein Skript den ZDF-Film durch einen Hinweiskasten und schreibt dessen Farben als style-Attribut ins Markup. Der Kasten entsteht also erst zur Laufzeit und steht in keiner Datei und in keinem Seiteninhalt; die Suche nach #f8f8f8 in der Datenbank lief deshalb ins Leere. Gefunden wurde er, weil die Kontrastmessung auf 29 Seiten ausgeweitet wurde und die Seite nachts geprueft wurde. Die Klasse ist der stabile Griff daran. !important, weil die Farben inline stehen. */ @media (prefers-color-scheme: dark) { :root:not([data-ktw-schema="hell"]) .time-restriction-message { background-color: var(--ktw-flaeche) !important; color: #e8eef6 !important; border-color: rgba(232, 238, 246, .18) !important; } } :root[data-ktw-schema="dunkel"] .time-restriction-message { background-color: var(--ktw-flaeche) !important; color: #e8eef6 !important; border-color: rgba(232, 238, 246, .18) !important; } /* ------------------------------------------------------------------------ DREI BEFUNDE AUS DER MESSUNG UEBER ALLE 29 SEITEN MIT EIGENEM CSS Die erste Messung lief ueber drei Seiten und meldete null. Erst der volle Durchgang brachte diese drei, und alle drei liegen ausserhalb dessen, was die Ableitung erfassen kann. ------------------------------------------------------------------------ */ /* 1. Das Inhaltsverzeichnis-Element von Avada. .awb-toc-el traegt #fafafa aus dem Theme-Stylesheet, nicht aus dem Markup und nicht aus einer unserer Dateien. Darauf standen die hellen Linkfarben des dunklen Schemas: 2,15:1 auf drei Seiten, 26 Verweise zusammen. Die Id #toc steht mit im Selektor, und das ist der ganze Trick. Avada setzt die Farbe als `#toc { background: #fafafa }`. Eine Id schlaegt beliebig viele Klassen, eine Regel auf .awb-toc-el allein verliert also, egal wie lang man sie macht. Mit der Id davor gewinnt sie ueber die Spezifitaet, und dafuer braucht es kein !important. */ @media (prefers-color-scheme: dark) { :root:not([data-ktw-schema="hell"]) #toc, :root:not([data-ktw-schema="hell"]) .awb-toc-el { background-color: var(--ktw-flaeche); } } :root[data-ktw-schema="dunkel"] #toc, :root[data-ktw-schema="dunkel"] .awb-toc-el { background-color: var(--ktw-flaeche); } /* 2. Einfache Tabellen, also alles ausser den eigenen aus ktw-tabellen.php. Avada malt den thead mit var(--primary_color) und schreibt weissen Text hinein. Im dunklen Schema wird der Akzent hell, und damit steht Weiss auf Hellblau: 2,24:1. ES WIRD DIE FLAECHE GEAENDERT, NICHT DIE SCHRIFT, und das ist der Punkt. Der erste Versuch gab dem thead dunklen Text, unter der Annahme, Avada male jeden thead mit dem Akzent. Gemessen war das falsch: die Tabelle auf Beitrag 1752 setzt ihre Kopfzellen selbst auf #f5f5f5, was die Ableitung korrekt zu #171f29 kippt. Dunkler Text darauf ergab 1,13:1, also genau den Fehler, den die Regel verhindern sollte, nur auf einer anderen Seite. Derselbe Denkfehler wie beim Blaetterleisten-Block und beim Knopf: aus einem Standardfall auf alle Faelle geschlossen. Die Kopfflaeche auf den dunklen Akzent zu setzen ist unempfindlich dagegen. Wo Avada faerbt, passt helle Schrift wieder (6,9:1); wo eine Seite ihre Kopfzellen selbst faerbt, deckt deren eigene Flaeche diese hier zu. Die Zellen darunter tragen ihre Farbe teils aus einem Inline-