/* ============================================================= KONTRAST-UMSCHALTER – Hochkontrast-Modus Aktiviert durch: WCAG 2.1 AAA (7:1) angestrebt ============================================================= */ /* ── Toggle-Button ──────────────────────────────────────────── */ .contrast-toggle { position: relative; } .contrast-toggle:focus-visible { outline: 3px solid #F1D100; outline-offset: 2px; } /* Aktiv-Zustand: gelber Rahmen im Normalmodus */ .contrast-toggle[aria-pressed="true"] { outline: 2px solid #F1D100; outline-offset: 2px; } /* ── HOCHKONTRAST – Grundfarben ─────────────────────────────── */ html.high-contrast, html.high-contrast body { background-color: #ffffff !important; color: #000000 !important; } /* Schatten und Text-Schatten entfernen */ html.high-contrast * { box-shadow: none !important; text-shadow: none !important; } /* ── Hintergründe ───────────────────────────────────────────── */ html.high-contrast .page, html.high-contrast .main, html.high-contrast .header, html.high-contrast #headernav_b, html.high-contrast nav.navbar, html.high-contrast ul.main-nav, html.high-contrast .quicknav-bar, html.high-contrast #skdd-main-nav, html.high-contrast .dropdown-menu, html.high-contrast .dropdown-menu.mega-menu, html.high-contrast .card, html.high-contrast .card-body, html.high-contrast .card-header, html.high-contrast .card-footer, html.high-contrast .accordion-item, html.high-contrast .accordion-button, html.high-contrast .accordion-button:not(.collapsed), html.high-contrast .accordion-collapse, html.high-contrast .accordion-body, html.high-contrast nav.breadcrumb-section, html.high-contrast .modal-content, html.high-contrast footer, html.high-contrast .footer, html.high-contrast .sticky-top, html.high-contrast .mobile-only { background-color: #ffffff !important; color: #000000 !important; } /* ── Links ──────────────────────────────────────────────────── */ html.high-contrast a, html.high-contrast .nav-link, html.high-contrast .dropdown-item, html.high-contrast .mega-col-header, html.high-contrast .mega-col-link, html.high-contrast .mega-sub-list .dropdown-item, html.high-contrast div.accordion a, html.high-contrast div.footer a, html.high-contrast div.card-panel a, html.high-contrast div.downloads a, html.high-contrast div.wichtigerhinweis a, html.high-contrast div.card-panel-light div.card-body a { color: #0000cc !important; text-decoration: underline !important; } html.high-contrast a:visited { color: #551a8b !important; } html.high-contrast a:hover, html.high-contrast a:focus, html.high-contrast .nav-link:hover, html.high-contrast .nav-link:focus, html.high-contrast .dropdown-item:hover, html.high-contrast .dropdown-item:focus { color: #0000cc !important; background-color: #ffffff !important; text-decoration: underline !important; } /* ── Buttons ────────────────────────────────────────────────── */ html.high-contrast .btn, html.high-contrast .quicknav-btn { background-color: #ffffff !important; color: #000000 !important; border: 2px solid #000000 !important; opacity: 1 !important; } html.high-contrast .btn:hover, html.high-contrast .btn:focus, html.high-contrast .quicknav-btn:hover, html.high-contrast .quicknav-btn:focus { background-color: #000000 !important; color: #ffffff !important; } /* Contrast-Toggle im Hochkontrast-Modus – kein doppelter Rahmen */ html.high-contrast .contrast-toggle { outline: none !important; } html.high-contrast .contrast-toggle[aria-pressed="true"] { background-color: #000000 !important; color: #ffffff !important; } /* Notfall-Button – rot bleibt, aber kontrastreich */ html.high-contrast #emergency, html.high-contrast .quicknav-emergency { background-color: #990000 !important; color: #ffffff !important; border: 2px solid #ffffff !important; text-decoration: none !important; } html.high-contrast #emergency:hover, html.high-contrast #emergency:focus, html.high-contrast .quicknav-emergency:hover, html.high-contrast .quicknav-emergency:focus { background-color: #660000 !important; outline: 3px solid #000000 !important; outline-offset: 2px !important; } /* ── Karten ─────────────────────────────────────────────────── */ html.high-contrast .card, html.high-contrast .accordion-item, html.high-contrast .modal-content { border: 2px solid #000000 !important; } /* skdd-card: alle Seiten explizit schwarz – inkl. Unterkante */ html.high-contrast .card.skdd-card, html.high-contrast .card.skdd-card.petrol { border: 2px solid #000000 !important; } html.high-contrast .skdd-border, html.high-contrast .news-skdd-border-bottom, html.high-contrast .vcard-skdd-border { border-color: #000000 !important; } /* ── Akkordeon ──────────────────────────────────────────────── */ html.high-contrast .accordion-button:not(.collapsed) { background-color: #eeeeee !important; color: #000000 !important; border-bottom: 2px solid #000000 !important; } html.high-contrast .accordion-button:focus { outline: 3px solid #000000 !important; outline-offset: 2px !important; } /* ── Navigation / Mega-Menü ─────────────────────────────────── */ html.high-contrast #skdd-main-nav { border-top-color: #000000 !important; } html.high-contrast #skdd-main-nav .nav-item { border-bottom-color: #000000 !important; } html.high-contrast #skdd-main-nav .nav-item:hover, html.high-contrast #skdd-main-nav .nav-item:focus-within, html.high-contrast #skdd-main-nav .nav-item.active, html.high-contrast #skdd-main-nav .nav-item.mega-dropdown:has(.dropdown-toggle[aria-expanded="true"]) { border-bottom-color: #000000 !important; } html.high-contrast .mega-col-column { border-right-color: #000000 !important; } html.high-contrast .mega-menu { border-top: 3px solid #000000 !important; border-bottom: none !important; } html.high-contrast .mega-level-4 { border-left-color: #000000 !important; } html.high-contrast .mega-sub-list .dropdown-item { border-bottom-color: #000000 !important; } html.high-contrast .mega-col-header, html.high-contrast .mega-col-link { border-bottom-color: #000000 !important; } html.high-contrast #skdd-main-nav .nav-link.quicknav-item, html.high-contrast #skdd-main-nav .nav-link.quicknav-item:hover, html.high-contrast #skdd-main-nav .nav-link.quicknav-item:focus, html.high-contrast #skdd-main-nav .nav-item.active > .nav-link.quicknav-item { color: #0000cc !important; } html.high-contrast .mega-search-result-link { color: #0000cc !important; } html.high-contrast .mega-search-result-link:hover, html.high-contrast .mega-search-result-link:focus { color: #0000cc !important; } /* ── Navigation – Trennlinie statt Box-Shadow ───────────────── */ html.high-contrast #headernav_b { border-bottom: 2px solid #000000 !important; } /* ── Breadcrumb ─────────────────────────────────────────────── */ html.high-contrast nav.breadcrumb-section { background-color: #f0f0f0 !important; border-top: none !important; border-bottom: 2px solid #000000 !important; } html.high-contrast .breadcrumb-item, html.high-contrast .breadcrumb-item a, html.high-contrast .breadcrumb-item + .breadcrumb-item::before { color: #000000 !important; } /* ── Footer ─────────────────────────────────────────────────── */ html.high-contrast .khdd-yellow, html.high-contrast div.khdd-yellow, html.high-contrast footer.khdd-yellow { border-bottom-color: #000000 !important; } html.high-contrast div.footer a, html.high-contrast div.footer div.copyright a { color: #0000cc !important; text-decoration: underline !important; } /* ── Formulare ──────────────────────────────────────────────── */ html.high-contrast .form-control, html.high-contrast .form-select, html.high-contrast input[type="text"], html.high-contrast input[type="email"], html.high-contrast input[type="tel"], html.high-contrast input[type="search"], html.high-contrast input[type="password"], html.high-contrast input[type="number"], html.high-contrast input[type="date"], html.high-contrast select, html.high-contrast textarea { background-color: #ffffff !important; color: #000000 !important; border: 2px solid #000000 !important; } html.high-contrast .form-control:focus, html.high-contrast input:focus, html.high-contrast select:focus, html.high-contrast textarea:focus { border-color: #000000 !important; outline: 3px solid #000000 !important; outline-offset: 2px !important; } /* ── Hamburger-Linien ───────────────────────────────────────── */ html.high-contrast .hamburger-icon span { background-color: #000000 !important; } /* ── Badges ─────────────────────────────────────────────────── */ html.high-contrast .badge { background-color: #000000 !important; color: #ffffff !important; } /* ── Doctolib-Button ────────────────────────────────────────── */ html.high-contrast .docotlib-button { background-color: #003366 !important; border: 2px solid #ffffff !important; }