/* Theme Name: Apicona Child (Barrierefreiheit) Template: apicona Version: 1.0.3 Author: DentalByte Description: Child-Theme für praxis-rodgau.de. Behebt die Befunde des Barrierefreiheits-Audits (WCAG 2.1 AA): Kontraste, sichtbarer Tastaturfokus, erkennbare Links im Fließtext, leere Landmarken. Änderungen am Eltern-Theme "Apicona" bleiben damit update-sicher. */ /* ------------------------------------------------------------------ 1. Topbar: Text rgba(0,0,0,.51) auf #e8e7e3 = 3,94:1 -> #555452 = 6,1:1 ------------------------------------------------------------------ */ .site-header .thememount-topbar.thememount-topbar-textcolor-dark, .site-header .thememount-topbar.thememount-topbar-textcolor-dark a, .site-header .thememount-topbar.thememount-topbar-textcolor-dark .top-contact li, .site-header .thememount-topbar.thememount-topbar-textcolor-dark .top-contact li i { color: #555452 !important; } .site-header .thememount-topbar.thememount-topbar-textcolor-dark a:hover, .site-header .thememount-topbar.thememount-topbar-textcolor-dark a:focus { color: #2d2d2d !important; } /* ------------------------------------------------------------------ 2. Hauptmenü (Max Mega Menu): aktiv/hover Weiß auf #a0a0ac = 2,6:1 -> Weiß auf #5f5f6e = 6,3:1. Vier IDs in der Selektorkette, damit die !important-Regeln aus dynamic-style-adv.css überstimmt werden. ------------------------------------------------------------------ */ #navbar #site-navigation #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link, #navbar #site-navigation #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link, #navbar #site-navigation #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-page-ancestor > a.mega-menu-link, #navbar #site-navigation #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link, #navbar #site-navigation #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:hover > a.mega-menu-link, #navbar #site-navigation #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:focus, #navbar #site-navigation #mega-menu-wrap-primary #mega-menu-primary ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link:hover, #navbar #site-navigation #mega-menu-wrap-primary #mega-menu-primary ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link:focus, #navbar #site-navigation #mega-menu-wrap-primary #mega-menu-primary ul.mega-sub-menu li.mega-menu-item.mega-current-menu-item > a.mega-menu-link { background-color: #5f5f6e !important; color: #fff !important; } /* ------------------------------------------------------------------ 2a. Ausnahme: Der Menüpunkt „Praxis" (Menü-ID 538) verlinkt wie „Home" auf die Startseite; WordPress markiert dort beide als aktuell. Auf der Startseite wird „Praxis" deshalb nicht hervorgehoben. Auf seinen Unterseiten (Aktuelles, Sprechzeiten, …) ist er „current-menu-ancestor" und bleibt hervorgehoben. ------------------------------------------------------------------ */ #navbar #site-navigation #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item-538.mega-current-menu-item:not(.mega-current-menu-ancestor):not(:hover):not(.mega-toggle-on) > a.mega-menu-link:not(:focus) { background-color: transparent !important; color: #282828 !important; } /* ------------------------------------------------------------------ 3. Formular-Platzhalter: #999 auf #f7f7f7 = 2,7:1 -> #6a6a6a = 5,1:1 ------------------------------------------------------------------ */ input::placeholder, textarea::placeholder, .wpcf7 input::placeholder, .wpcf7 textarea::placeholder { color: #6a6a6a !important; opacity: 1; } input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #6a6a6a !important; } /* ------------------------------------------------------------------ 4. Sichtbarer Tastaturfokus (WCAG 2.4.7). Das Eltern-Theme setzt global outline:none. Nur bei Tastaturbedienung (:focus-visible), Mausklicks bleiben unverändert. ------------------------------------------------------------------ */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid #1d1d1b !important; outline-offset: 2px !important; } /* Helle Kontur auf dunklen Flächen */ .site-footer a:focus-visible, .site-footer button:focus-visible, .tm-search-popup a:focus-visible, .tm-search-popup input:focus-visible, .thememount-topbar-bgcolor-darkgrey a:focus-visible, #mega-menu-wrap-primary a.mega-menu-link:focus-visible { outline-color: #fff !important; outline-offset: -4px !important; } /* Skip-Link beim Fokussieren einblenden */ .skip-link.screen-reader-text:focus { position: absolute !important; top: 8px; left: 8px; width: auto; height: auto; clip: auto; clip-path: none; padding: 10px 16px; background: #fff; color: #1d1d1b; font-size: 16px; line-height: 1.4; text-decoration: underline; z-index: 100000; } /* ------------------------------------------------------------------ 5. Links im Fließtext nicht nur farblich kennzeichnen (WCAG 1.4.1) ------------------------------------------------------------------ */ .entry-content .wpb_text_column a, .entry-content .wpb_text_column a:hover, .entry-content > p a, .entry-content > p a:hover { text-decoration: underline !important; text-underline-offset: 2px; } /* ------------------------------------------------------------------ 6. Leere