/* * contrast-mode.css * Hochkontrast-Stile werden aktiv, sobald die Klasse „high-contrast" trägt. * Der Modus schaltet die gesamte Seite auf Schwarz-Weiß mit hohem Kontrast um. * Objekte, die nur im HC Modus erscheinen sollen, können mit der Klasse .hc-object versehen werden. */ /* ── Sanfter Übergang beim Umschalten ───────────────────────────────────────── */ body { transition: background-color 0.2s ease, color 0.2s ease; } /* ════════════════════════════════════════════════════════════════════════════ HOCHKONTRAST-MODUS Alle Regeln nur aktiv wenn ════════════════════════════════════════════════════════════════════════════ */ /* ── Globales Reset auf Schwarz-Weiß ────────────────────────────────────────── */ body.high-contrast, body.high-contrast *, body.high-contrast *::before, body.high-contrast *::after { background-color: #000000 !important; color: #ffffff !important; border-color: #ffffff !important; box-shadow: none !important; text-shadow: none !important; /* Alle CSS-Custom-Properties auf SW überschreiben */ --color-background: #000000 !important; --color-foreground: #ffffff !important; --wp--preset--color--base: #000000 !important; --wp--preset--color--contrast: #ffffff !important; /*modified */ background-image: none !important; } /* ── Bilder und Medien in Graustufen ────────────────────────────────────────── */ body.high-contrast img, body.high-contrast video, body.high-contrast canvas, body.high-contrast iframe, body.high-contrast svg { filter: grayscale(100%) contrast(1.1) !important; } /* ── Hintergründe mit Bildern entfernen ─────────────────────────────────────── */ body.high-contrast [style*="background-image"], body.high-contrast [style*="background:"] { background-image: none !important; } /* ── Links: klar sichtbar und unterstrichen ─────────────────────────────────── */ body.high-contrast a, body.high-contrast a:visited { color: #ffffff !important; text-decoration: underline !important; text-underline-offset: 3px !important; } body.high-contrast a:hover, body.high-contrast a:focus { color: #000000 !important; background-color: #ffffff !important; outline: 2px solid #ffffff !important; outline-offset: 2px !important; } /* ── Formularelemente ───────────────────────────────────────────────────────── */ body.high-contrast input, body.high-contrast textarea, body.high-contrast select, body.high-contrast button:not(.hc-toggle) { background-color: #000000 !important; color: #ffffff !important; border: 2px solid #ffffff !important; } body.high-contrast input:focus, body.high-contrast textarea:focus, body.high-contrast select:focus, body.high-contrast button:not(.hc-toggle):focus { outline: 3px solid #ffffff !important; outline-offset: 2px !important; } body.high-contrast input::placeholder, body.high-contrast textarea::placeholder { color: #fff !important; } /* ── Buttons (allgemein) ─────────────────────────────────────────────────────── */ body.high-contrast button:not(.hc-toggle), body.high-contrast [role="button"]:not(.hc-toggle), body.high-contrast .wp-block-button__link, body.high-contrast .button, body.high-contrast .btn { background-color: #000000 !important; color: #ffffff !important; border: 2px solid #ffffff !important; } body.high-contrast button:not(.hc-toggle):hover, body.high-contrast [role="button"]:not(.hc-toggle):hover, body.high-contrast .wp-block-button__link:hover { background-color: #ffffff !important; color: #000000 !important; } /* ── Trennlinien / Rahmen ────────────────────────────────────────────────────── */ body.high-contrast hr { border-color: #ffffff !important; border-width: 1px !important; } /* ── Tabellen ────────────────────────────────────────────────────────────────── */ body.high-contrast table, body.high-contrast th, body.high-contrast td { border: 1px solid #ffffff !important; } body.high-contrast th { background-color: #222222 !important; } /* ── Fokus-Styles (Barrierefreiheit) ─────────────────────────────────────────── */ body.high-contrast :focus-visible { outline: 3px solid #ffffff !important; */ outline-offset: 2px !important; } /* ── Navigation ──────────────────────────────────────────────────────────────── */ body.high-contrast nav, body.high-contrast .wp-block-navigation, body.high-contrast .menu, body.high-contrast .navigation { background-color: #ffffff !important; /* border-bottom: 0px solid #ffffff !important; */ border: 0px !important; } /* ── Gutenberg-spezifische Blöcke ────────────────────────────────────────────── */ body.high-contrast .wp-block-cover, body.high-contrast .wp-block-media-text, body.high-contrast .wp-block-group { background-color: #000000 !important; } body.high-contrast .wp-block-separator { border-color: #ffffff !important; } /* ════════════════════════════════════════════════════════════════════════════ TOGGLE-BUTTON STYLING Unabhängig vom Hochkontrast-Modus – wird immer angezeigt. Passe Farben und Größe nach Bedarf an. ════════════════════════════════════════════════════════════════════════════ */ .hc-toggle { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.5em 1em; /*background-color: #1a1a1a; color: #ffffff; border: 2px solid #ffffff; */ border-radius: 4px; cursor: pointer; font-size: 0.95rem; font-family: inherit; line-height: 1; transition: background-color 0.15s ease, color 0.15s ease; /* Kein box-shadow für hohe Sichtbarkeit */ } .hc-toggle:hover, .hc-toggle:focus-visible { /*background-color: #ffffff; color: #000000; outline: 3px solid #000000; outline-offset: 2px;*/ } .hc-toggle__icon { font-size: 1.2em; line-height: 1; } /* Button-Zustand wenn Hochkontrast aktiv ist */ body.high-contrast .hc-toggle { background-color: #000000 !important; */ color: #000000 !important; /* border: 2px solid #000000 !important; */ } body.high-contrast .hc-toggle:hover, body.high-contrast .hc-toggle:focus-visible { background-color: #000000 !important; color: #ffffff !important; /* outline: 3px solid #ffffff !important; */ } /* ── DIVI-spezifische Blöcke ────────────────────────────────────────────── */ /* body.high-contrast .et_pb_section, body.high-contrast .et_pb_section_regular, .et-l--footer>.et_builder_inner_content .et_pb_section.et_pb_section_0_tb_footer, { background-color: #000000 !important; background-image: none; } */ body.high-contrast h1, body.high-contrast h2, body.high-contrast h3, body.high-contrast h4, body.high-contrast h5, body.high-contrast h6 { font-family: Verdana, Geneva, Tahoma, sans-serif !important; font-weight: bold; line-height: 1.1em; } body.high-contrast h1 {font-size: 1.5rem !important;} body.high-contrast h2 {font-size: 1.4rem !important;} body.high-contrast h3 {font-size: 1.3rem !important;} body.high-contrast h4, body.high-contrast h5, body.high-contrast h6 {font-size: 1.2rem !important;} @media screen and (min-width: 768px) { /* Ihr CSS-Code für Mobilgeräte hier */ body.high-contrast #main-header, body.high-contrast #main-header * { background-color: white !important; color: #000 !important; } } @media screen and (max-width: 768px) { /* Ihr CSS-Code für Mobilgeräte hier */ body.high-contrast #main-content { margin-top: 128px; } } .hc-object { display: none !important; } body.high-contrast .hc-object { display: block !important; }