/* * High-Contrast-Modus (behindertengerecht, WCAG AA) * * Aktivierung über (Toggle im Header, * Persistenz via localStorage "mws-highcontrast"). Überschreibt die pro * Client kompilierten Theme-Farben, daher durchgehend !important. */ /* Flächen: Weiß, Text: Schwarz */ html.high-contrast body, html.high-contrast .body, html.high-contrast .main, html.high-contrast .bgcol_page, html.high-contrast .bgcol_akzent, html.high-contrast .bgcol_filter, html.high-contrast .bgcol_footer, html.high-contrast .bgcol_suche:not(hr), html.high-contrast #header .header-body, html.high-contrast .header-nav-bar, html.high-contrast #footer, html.high-contrast .footer, html.high-contrast .card, html.high-contrast .card-body, html.high-contrast .product { background-color: #fff !important; background-image: none !important; color: #000 !important; } /* Textfarben */ html.high-contrast .textcol_h1, html.high-contrast .textcol_h2, html.high-contrast .textcol_h3, html.high-contrast .textcol_text, html.high-contrast .textcol_infotext, html.high-contrast .textcol_akzent, html.high-contrast .textcol_footer, html.high-contrast .textcol_footer_headline, html.high-contrast .text-muted, html.high-contrast .text-color-dark, html.high-contrast h1, html.high-contrast h2, html.high-contrast h3, html.high-contrast h4, html.high-contrast h5, html.high-contrast h6, html.high-contrast p, html.high-contrast li, html.high-contrast label { color: #000 !important; } /* Trennlinien sichtbar halten (hr nutzt background-color als Linienfarbe) */ html.high-contrast hr, html.high-contrast hr.bgcol_suche { background-color: #000 !important; opacity: 1 !important; } /* Links: Schwarz und unterstrichen. text-underline-offset/-thickness fest setzen, damit die Unterstreichung in allen Browsern gleich sitzt und nicht in die Zeile darunter ragt. */ html.high-contrast a:not(.btn) { color: #000 !important; text-decoration: underline !important; text-decoration-thickness: 1px !important; text-underline-offset: 0.15em !important; } /* * Buttons: Schwarz auf Weiß mit klarem Rahmen, invertiert bei Hover/Fokus. * * WICHTIG: border-width NICHT verändern. Bootstrap-Buttons haben 1px Rahmen; * ein 2px-Rahmen würde jeden Button um 2px in Breite und Höhe wachsen lassen * und damit das Layout gegenüber dem Normalmodus verschieben. Die optische * Rahmenstärke kommt deshalb aus einem inneren box-shadow, der keinen Platz * einnimmt (1px Rahmen + 1px Shadow = 2px sichtbare Linie). */ html.high-contrast .btn-primary, html.high-contrast .btn-secondary, html.high-contrast .btn-modern, html.high-contrast input[type="submit"] { background-color: #000 !important; background-image: none !important; border-color: #000 !important; border-style: solid !important; box-shadow: inset 0 0 0 1px #000 !important; color: #fff !important; } /* Zustände einzeln aufführen: das Theme setzt für html body .btn:focus/:active box-shadow: none !important, sonst verschwindet der Rahmen beim Klick. */ html.high-contrast .btn-primary:hover, html.high-contrast .btn-primary:focus, html.high-contrast .btn-primary:active, html.high-contrast .btn-secondary:hover, html.high-contrast .btn-secondary:focus, html.high-contrast .btn-secondary:active, html.high-contrast .btn-modern:hover, html.high-contrast .btn-modern:focus, html.high-contrast .btn-modern:active, html.high-contrast input[type="submit"]:hover, html.high-contrast input[type="submit"]:focus, html.high-contrast input[type="submit"]:active { background-color: #fff !important; border-color: #000 !important; box-shadow: inset 0 0 0 1px #000 !important; color: #000 !important; } /* Formularfelder: gleiche Regel wie bei den Buttons, die Rahmenbreite bleibt unangetastet. Sonst wächst jedes Feld um 2px in der Höhe, was sich über ein Formular hinweg zu einem sichtbaren Versatz aller Labels und Texte addiert. */ html.high-contrast .form-control, html.high-contrast .form-select, html.high-contrast select, html.high-contrast textarea { background-color: #fff !important; color: #000 !important; border-color: #000 !important; border-style: solid !important; box-shadow: inset 0 0 0 1px #000 !important; } /* Das Theme überschreibt den box-shadow von .form-control im Fokus */ html.high-contrast .form-control:focus, html.high-contrast .form-select:focus, html.high-contrast select:focus, html.high-contrast textarea:focus { border-color: #000 !important; box-shadow: inset 0 0 0 1px #000 !important; } html.high-contrast ::placeholder { color: #333 !important; opacity: 1 !important; } /* Warenkorb-Badge u. ä. */ html.high-contrast .cart-info, html.high-contrast .cart-qty, html.high-contrast .badge { background-color: #000 !important; color: #fff !important; } /* Deutlicher Fokus-Indikator */ html.high-contrast *:focus { outline: 3px solid #000 !important; outline-offset: 2px !important; } /* Checkout-Fortschritt: im Kontrastmodus sind alle Texte schwarz, der aktive Schritt muss deshalb über Schriftstärke und einen durchgezogenen Balken erkennbar bleiben. Die abgeschwächte Deckkraft der offenen Schritte wird zurückgenommen, damit auch sie den Kontrastvorgaben entsprechen; die generische Link-Unterstreichung entfällt beim aktiven Schritt, damit dort nur eine Linie steht. Layout-neutral: der 2px-Rahmen ist auf allen Schritten reserviert (transparent) und wird hier nur eingefärbt. */ html.high-contrast .breadcrumb-checkout .checkout-step.is-todo { opacity: 1 !important; } html.high-contrast .breadcrumb-checkout .checkout-step.is-active > a, html.high-contrast .breadcrumb-checkout .checkout-step.is-active > span { font-weight: 700 !important; border-bottom-color: #000 !important; } html.high-contrast .breadcrumb-checkout .checkout-step.is-active > a { text-decoration: none !important; }