/* * Globale eigene Gestaltung von kein-taeter-werden.de. * * Hier stehen Regeln, die ueberall gelten. Seitenbezogenes gehoert nach * ktw-seiten.css, mit einer Body-Klasse davor. * * ------------------------------------------------------------------------------ * DIE FALLE, WENN HIER ETWAS SEITENBEZOGENES DAZUKOMMT * * WordPress setzt an Seiten die Body-Klasse `page-id-N`, an Beitraegen aber * `postid-N`. Von den 87 seitenbezogenen Regelbloecken der Site haengt rund die * Haelfte an Beitraegen. Wer ueberall `page-id-` schreibt, verliert diese Regeln * still: nichts bricht, die Seite sieht nur anders aus. * ------------------------------------------------------------------------------ * * Herkunft: zusammengelegt aus _fusion_builder_custom_css, wo dieselben Regeln * bis zum 27.08.2026 in bis zu 15 wortgleichen Kopien lagen. Der vollstaendige * Ausgangsstand liegt im Repo unter design/fusion-seiten-css.json. */ /* ------------------------------------------------------------------------ Einbettungen: Spotify Auf 17 Beitraegen, davon 15 wortgleich und 2 in einer kuerzeren Fassung ohne den :hover-Zweig. Uebernommen wird die vollstaendige: die beiden Seiten bekommen damit einen Hover-Effekt, den sie vorher nicht hatten. Das ist die einzige beabsichtigte Sichtaenderung dieses Schrittes. Stand zuvor: 17 Datensaetze in _fusion_builder_custom_css, Beitraege 140, 141, 149, 150, 151, 152, 153, 154, 155, 156, 163, 618, 2227, 2230, 2503, 2506, 2508. ------------------------------------------------------------------------ */ /* Spotify consent */ #spotify-consent{ text-align:center; padding:50px; background-color:#f9f9f9; border-radius:10px; } /* Paragraph */ #spotify-consent p{ font-family:'Interstate-Light'; } /* Button */ #spotify-consent button{ background-color:#ffffff; border-color:#17509d; border-style:solid; border-width:2px; border-radius:5px; padding:10px; color:#17509d; font-family:'Interstate-Regular'; transition: all 0.3s ease; } /* Button */ #spotify-consent button:hover{ background-color:#f3f6fa; border-color:#f3f6fa; } /* ------------------------------------------------------------------------ Einbettungen: Video Elfmal wortgleich. Der Selektor #video-consent ist eindeutig. Stand zuvor: 11 Datensaetze in _fusion_builder_custom_css, Beitraege 677, 1711, 1944, 2247, 2281, 2549, 2626, 2631, 2689, 2698, 2745. ------------------------------------------------------------------------ */ #video-consent{ text-align:center; padding:50px; background-color:#f9f9f9; border-radius:10px; } /* Paragraph */ #video-consent p{ font-family:'Interstate-Light'; } /* Button */ #video-consent button{ background-color:#ffffff; border-color:#17509d; border-style:solid; border-width:2px; border-radius:5px; padding:10px; color:#17509d; font-family:'Interstate-Regular'; } /* ------------------------------------------------------------------------ HIER STAND DIE MEDIATHEK-BLAETTERLEISTE, UND SIE STEHT WIEDER DORT, WO SIE HERKAM. Der 2333-Byte-Block auf den acht Vorlagen 1067, 1068, 1182, 1379, 1448, 1452, 2193, 2194 heisst zwar "Pagination", enthaelt aber neben den #mediathek-pagination-Regeln auch generische: .fusion-blog-shortcode article { grid-template-columns: 5% auto !important } @media (max-width:640px) { ... grid-template-columns: 10% 80% !important } Global gestellt zwingt das JEDE Beitragsliste der Site in ein Zehn-Prozent-Raster. Auf dem Telefon brach der Titel auf ein bis zwei Zeichen je Zeile um. Am 28.08.2026 passiert, gemeldet, zurueckgenommen. Der Kaskaden-Diff hat es nicht gefunden, und das ist kein Fehler des Werkzeugs: er vergleicht gewinnende Werte je Selektor, und die waren vorher wie nachher gleich. Geaendert hat sich der GELTUNGSBEREICH, und den sieht ein Vergleich von Deklarationen nicht. WER DIESEN BLOCK SPAETER DOCH ZUSAMMENLEGT, muss vorher klaeren, auf welchen Seiten die generischen .fusion-blog-shortcode-Regeln heute ueberhaupt wirken, und sie entsprechend eingrenzen. Und danach die Mediathek in DREI Breiten ansehen, nicht nur den Diff lesen. ------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------ Einbettungen: Audio Zweimal wortgleich. Steht hier neben Spotify und Video, weil es dieselbe Sache ist und man die drei sonst an drei Orten pflegt. Stand zuvor: 2 Datensaetze, Beitraege 2371, 2398. ------------------------------------------------------------------------ */ #audio-consent{ text-align:center; padding:50px; background-color:#f9f9f9; border-radius:10px; } /* Paragraph */ #audio-consent p{ font-family:'Interstate-Light'; } /* Button */ #audio-consent button{ background-color:#ffffff; border-color:#17509d; border-style:solid; border-width:2px; border-radius:5px; padding:10px; color:#17509d; font-family:'Interstate-Regular'; } /* ------------------------------------------------------------------------ Hauptmenue: der aktive Balken Die acht Eigenschaften standen bis zum 27.08.2026 als JavaScript-Objekt in Avadas Feld space_body und wurden per applyStyles() Eigenschaft fuer Eigenschaft auf das Element geschrieben. JavaScript setzt jetzt nur noch die Klasse. ------------------------------------------------------------------------ */ .background-rectangle { background-color: #17509d; height: 10px; width: 100%; border-top-left-radius: 10px; border-top-right-radius: 10px; position: absolute; bottom: 0; left: 0; } /* ------------------------------------------------------------------------ Informationsmenue: Rahmen beim Ueberfahren Ersetzt zwei addEventListener-Bloecke, die style.borderBottomColor setzten und wieder leerten. :focus-within kommt dazu: der JavaScript-Nachbau war beim Tastaturfokus stumm. ------------------------------------------------------------------------ */ #menu-informationen .fusion-column-wrapper:hover, #menu-informationen .fusion-column-wrapper:focus-within { border-bottom-color: #17509d; } /* ======================================================================== BARRIEREFREIHEIT Zwei Punkte, die unabhaengig vom Dark Mode gelten und laut Erhebung zusammen mehr wert sind als er. ======================================================================== */ /* ------------------------------------------------------------------------ Sichtbarer Tastaturfokus Avada setzt am body die Klasse .fusion-disable-outline und schaltet damit den Fokusring an Formularfeldern, Knoepfen und Absendeknoepfen ab. Das ist ein Verstoss gegen WCAG 2.4.7: wer mit der Tastatur bedient, sieht nicht, wo er steht. :focus-visible statt :focus, damit der Ring bei Mausbedienung nicht erscheint. Das war Avadas eigentliches Anliegen, nur die Umsetzung war zu grob. !important, weil Avadas Regel dieselbe Spezifitaet hat und spaeter im Dokument steht. ------------------------------------------------------------------------ */ .fusion-disable-outline a:focus-visible, .fusion-disable-outline button:focus-visible, .fusion-disable-outline input:focus-visible, .fusion-disable-outline select:focus-visible, .fusion-disable-outline textarea:focus-visible, .fusion-disable-outline summary:focus-visible, .fusion-disable-outline [tabindex]:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid #17509d !important; outline-offset: 2px !important; border-radius: 2px; } /* Auf dunklem oder blauem Grund braucht der Ring den Gegenkontrast, sonst verschwindet er im Blau des Knopfes. */ .fusion-button:focus-visible, .awb-menu__main-a_button:focus-visible, .ktw-nl__button:focus-visible { outline-color: #ffffff !important; box-shadow: 0 0 0 5px rgba(23, 80, 157, .85); } /* ------------------------------------------------------------------------ Kontrast des Fliesstextes Avadas Palette fuehrt "Copy Grey" als rgba(40,40,40,0.65). Auf Weiss ergibt das #737373 und damit 4,74:1. Das reicht knapp fuer WCAG AA und ist fuer eine Seite, die zu einem Drittel nachts auf dem Telefon gelesen wird, zu wenig. 0.78 ergibt rund #575757 und 7,3:1, also AAA. Es ist derselbe Ton, den der Newsletter-Renderer seit jeher fuer Fliesstext benutzt. Ueber die Palettenvariable und nicht ueber einzelne Selektoren: Avada setzt --awb-color6 ein, gemessen an 48 Elementen allein auf /hilfesuchende/, und alle sollen mit. :root:root statt :root, weil Avada die Variable in einem spaeteren Stilblock ebenfalls auf :root setzt. Bei gleicher Spezifitaet gewinnt der spaetere, und ein einfaches :root blieb wirkungslos. Gemessen, nicht vermutet. ------------------------------------------------------------------------ */ :root:root { --awb-color6: rgba(40, 40, 40, .78); } /* ------------------------------------------------------------------------ Kontrast, zweiter Teil: die Stellen mit fest eingetragenem Grau Die Palettenvariable oben erreicht nur, was ueber --awb-color6 laeuft. Gemessen auf /hilfesuchende/ steht der Fliesstext bei 14:1, also gut. Die 4,4:1 stecken woanders: Avada traegt in die Reiterbeschriftung .fusion-tabs .nav-tabs li .tab-link ein rgb(116,116,116) fest ein, und das ist auf dem hellen Grund #f9f9f9 zu wenig. #575757 ergibt dort 7,0:1. Derselbe Ton wie oben, damit es zusammenpasst. ------------------------------------------------------------------------ */ .fusion-tabs .nav-tabs li .tab-link, .fusion-tabs .nav-tabs li .tab-link:visited { color: #575757; } /* Der aktive Reiter bleibt in der Markenfarbe, sonst geht die Auszeichnung verloren, welcher Reiter offen ist. */ .fusion-tabs .nav-tabs li.active .tab-link, .fusion-tabs .nav-tabs li .tab-link:hover, .fusion-tabs .nav-tabs li .tab-link:focus-visible { color: #17509d; }