/* ============================================================================= aria.css — Barrierefreie Kontrastmodi (WCAG 2.2 AAA) Wird via JavaScript auf und gesetzt: $('html, body').addClass('contrast-mode') → Schwarz/Weiß (S/W) $('html, body').addClass('contrast-mode-inv') → Weiß/Schwarz (W/S) ============================================================================= */ /* ============================================================================= TAB-NAVIGATION & FOCUS-STYLES (WCAG 2.2 AA/AAA) ============================================================================= */ /* Basis-Fokusfarbe für alle Modi */ .tabkey, .contrast-mode, .contrast-mode-inv { --focus-color: #DB00FF; --skip-link-bg: rgba(255, 255, 255, 1); } .contrast-mode { --skip-link-bg: rgba(0, 0, 0, 1); } /* Allgemeiner Link-Fokus */ a:focus-visible { text-decoration: underline; text-decoration-color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; } /* Tab-Modus: sichtbare Fokus-Rahmen für alle interaktiven Elemente */ .tabkey { & *:focus-visible, & input[type="checkbox"]:focus-visible + label, & input[type="radio"]:focus-visible + label { outline: 2px solid var(--focus-color); outline-offset: 0px; border-radius: 2px; } & nav a:focus-visible { outline-offset: -2px; } /*& .mobile-navigation a:focus-visible {*/ /* outline: 2px solid var(--focus-color);*/ /* outline-offset: -2px;*/ /* border-radius: 2px;*/ /*}*/ & :is(input, select, button, textarea, label) { border-color: var(--font-color) !important; } & .skip-links { left: 10px; top: 10px; } } /* ARIA-Button (z.B. für Kontrastmodus-Umschalter) */ .ariabtn, .ariabtn:hover { background: none; border: none; padding: 0; margin: 0; cursor: pointer; } /* Skip-Links (Sprungnavigation) */ .skip-links { position: absolute; top: 0; left: -9999px; z-index: 9999; padding: 8px 16px; display: flex; gap: 20px; border: 1px solid var(--font-color); } .skip-links a { color: #000; text-decoration: underline; font-weight: bold; font-size: 1.6rem; padding: 4px 8px; border-radius: 3px; } .skip-links a:focus { outline: 3px solid var(--focus-color, #DB00FF); outline-offset: 2px; } /* ============================================================================= KONTRASTMODUS 1: S/W — Dunkler Hintergrund, helle Schrift ============================================================================= */ .contrast-mode { --font-color: #ffffff; --bg-color: #000000; --border-color: #ffffff; --focus-color: #00ff00; --font-highlight: #ffff00; --font-highlight-hover: #ffffff; --error-color: #ff6666; --hint-color: #ffcc00; background-color: var(--bg-color) !important; color: var(--font-color) !important; /* --- Globale Elemente --- */ & html, & body { background-color: var(--bg-color) !important; color: var(--font-color) !important; } & .page { background: var(--bg-color) !important; color: var(--font-color) !important; } /* --- Header & Footer --- */ & header, & footer { background: var(--bg-color) !important; color: var(--font-color) !important; border-bottom: 1px solid var(--border-color) !important; } /* --- Überschriften --- */ & h1 { color: var(--font-color) !important; } & h2, & h3, & h4, & h5, & h6 { color: var(--font-color) !important; } /* --- Links --- */ & a { color: var(--font-highlight) !important; text-decoration: underline !important; } & a:hover, & a:focus { color: var(--font-highlight-hover) !important; text-decoration: underline !important; } & .platocontent a, & .platomargin a { color: var(--font-highlight) !important; text-decoration: underline !important; } & .platocontent a:hover, & .platomargin a:hover { color: var(--font-highlight-hover) !important; } /* --- Fließtext-Inhalte --- */ & .platocontent, & .platomargin, & .content-wrapper, & .cms_content_content, & section, & article, & .sectiondiv, & .main-content { background-color: transparent !important; color: var(--font-color) !important; } /* --- Zitat / cite --- */ & cite { border-left-color: var(--border-color) !important; color: var(--font-color) !important; } /* --- Formular-Elemente --- */ & input, & textarea, & select { background-color: var(--bg-color) !important; color: var(--font-color) !important; border: 1px solid var(--border-color) !important; } & .p-dd { background-color: var(--bg-color) !important; color: var(--font-color) !important; border-color: var(--border-color) !important; } & .p-ta:focus, & .p-ti:focus, & .p-dd:focus { border-color: var(--focus-color) !important; outline: 3px solid var(--focus-color) !important; } & button, & .p-sb, & a.p-sb { background: var(--bg-color) !important; color: var(--font-color) !important; /*border: 2px solid var(--border-color) !important;*/ } & .p-sb:not(.was_clicked):hover, & a.p-sb:not(.was_clicked):hover { background: #222222 !important; color: var(--font-color) !important; } & button:active, & .p-sb:not(.was_clicked):active, & a.p-sb:not(.was_clicked):active { background: #333333 !important; } /* Custom Radio / Checkbox */ & .p-ra + label:before, & .p-cx + label:before { background: var(--bg-color) !important; border-color: var(--border-color) !important; } & .p-ra:checked + label:after, & .p-cx:checked + label:after { background: var(--font-color) !important; } & .p-cx:disabled + label:before, & .p-ra:disabled + label:before { background: #333333 !important; } /* --- Fehler & Hinweise --- */ & .val-err, & .error, & .val-desc-err, & .val-man-flag { color: var(--error-color) !important; } & .p-ti-error, & .p-ta-error, & .p-dd-error { border-color: var(--error-color) !important; } & .p-ra-error + label:before, & .p-cx-error + label:before { border-color: var(--error-color) !important; } & .man-err-field { border-color: var(--error-color) !important; background: var(--bg-color) !important; } & .mand-hint { border-color: var(--hint-color) !important; background: var(--bg-color) !important; } & .pwd_invalid { color: var(--error-color) !important; border-color: var(--border-color) !important; } & .pwd_valid { color: #00ff88 !important; } /* --- Paging --- */ & ul.paging li a, & ul.paging li div { color: var(--font-color) !important; border-color: var(--border-color) !important; background: var(--bg-color) !important; } & ul.paging li a:hover, & ul.paging li div:hover { background: #222222 !important; } /* --- Top-Linkbox --- */ & .top-linkbox { background-color: #000000 !important; color: var(--font-color) !important; border: 1px solid var(--border-color) !important; } & .top-linkbox a { color: var(--font-color) !important; } /* --- Bubble --- */ & .bubble { background-color: var(--bg-color) !important; color: var(--font-color) !important; border: 2px solid var(--border-color) !important; } /* --- Fullwidth-Blöcke --- */ & .fullwidth-bg .article-div:after { background: transparent !important; border-bottom: 1px solid var(--border-color) !important; } & .fullwidth-bg.dark-blue .article-div:after { background: transparent !important; } & .fullwidth-div { background: var(--bg-color) !important; border-bottom: 1px solid var(--border-color) !important; } /* --- Holiday-Box --- */ & .hod-2.holiday > div { background: var(--bg-color) !important; color: var(--font-color) !important; border-left: 2px solid var(--border-color) !important; } & .hod-2.holiday > div:after { background: var(--bg-color) !important; } /* --- FAQ --- */ & .faq-style-default div.faq-q, & .faq-style-default button.faq-q { background-color: var(--bg-color) !important; color: var(--font-color) !important; background-image: none !important; /*border-left: 4px solid var(--border-color) !important;*/ border: 1px solid var(--border-color) !important; } & .faq-style-default div.faq-box.active div.faq-q, & .faq-style-default div.faq-box.active button.faq-q { /*border-left-color: var(--font-highlight) !important;*/ } & .fullwidth-bg .article-div:after { z-index: 1; } /* --- Checkmark-Listen --- */ & .platocontent ul.cl li.minus, & .platomargin ul.cl li.minus { color: var(--font-color) !important; } /* --- Val-View (Formular-Vorschau) --- */ & .val-view { border-color: var(--border-color) !important; background: transparent !important; color: var(--font-color) !important; } & .val-view-cx, & .val-view-r { border-color: var(--border-color) !important; } & .val-view-cx:before, & .val-view-r:before { background: var(--border-color) !important; } /* --- Content-Block (Grid) --- */ & .subpage.page-grid .article-div > section > .sectiondiv > .content-block { background: rgba(255, 255, 255, 0.05) !important; } /* --- SVG Icons (icons_black → invertieren für dunklen Hintergrund) --- */ & img[src*="/layout/icons_black"] { filter: invert(1) !important; background-color: transparent !important; } & img[src*="/layout/icons/"] { /*filter: invert(1) brightness(2) !important;*/ } /* --- Alle Bilder: leichten Kontrast-Boost --- */ & img:not([src*="/layout/icons_white"]):not([src*="/layout/icons_black"]):not([src*="/layout/icons/"]) { filter: brightness(0.9) contrast(1.1) !important; } & .cd-top { display: none; } /* --- Focus-States (WCAG AAA) --- */ & a:focus, & a:focus-visible, & button:focus, & button:focus-visible, & input:focus, & input:focus-visible, & select:focus, & select:focus-visible, & textarea:focus, & textarea:focus-visible, & [tabindex]:focus, & [tabindex]:focus-visible { outline: 3px solid var(--focus-color) !important; outline-offset: 2px !important; box-shadow: 0 0 0 5px rgba(0, 255, 0, 0.3) !important; } } /* ============================================================================= KONTRASTMODUS 2: W/S — Heller Hintergrund, dunkle Schrift ============================================================================= */ .contrast-mode-inv { --font-color: #000000; --bg-color: #ffffff; --border-color: #000000; --focus-color: #cc0000; --font-highlight: #0000cc; --font-highlight-hover: #000000; --error-color: #cc0000; --hint-color: #996600; background-color: var(--bg-color) !important; color: var(--font-color) !important; /* --- Button-Label für S/W-Umschalter --- */ /*& #aria_bw:before {*/ /* content: "W/S";*/ /*}*/ /* --- Globale Elemente --- */ & html, & body { background-color: var(--bg-color) !important; color: var(--font-color) !important; } & .page { background: var(--bg-color) !important; color: var(--font-color) !important; } /* --- Header & Footer --- */ & header, & footer { background: var(--bg-color) !important; color: var(--font-color) !important; border-bottom: 1px solid var(--border-color) !important; } /* --- Überschriften --- */ & h1 { color: var(--font-color) !important; } & h2, & h3, & h4, & h5, & h6 { color: var(--font-color) !important; } & .cd-top { display: none; } /* --- Links --- */ & a { color: var(--font-highlight) !important; text-decoration: underline !important; } & a:hover, & a:focus { color: var(--font-highlight-hover) !important; text-decoration: underline !important; } & .platocontent a, & .platomargin a { color: var(--font-highlight) !important; text-decoration: underline !important; } & .platocontent a:hover, & .platomargin a:hover { color: var(--font-highlight-hover) !important; } /* --- Fließtext-Inhalte --- */ & .platocontent, & .platomargin, & .content-wrapper, & .cms_content_content, & section, & article, & .sectiondiv, & .main-content { /*background-color: var(--bg-color) !important;*/ color: var(--font-color) !important; } /* --- Zitat / cite --- */ & cite { border-left-color: var(--border-color) !important; color: var(--font-color) !important; } /* --- Formular-Elemente --- */ & input, & textarea, & select { background-color: var(--bg-color) !important; color: var(--font-color) !important; border: 1px solid var(--border-color) !important; } & .p-dd { background-color: var(--bg-color) !important; color: var(--font-color) !important; border-color: var(--border-color) !important; } & .p-ta:focus, & .p-ti:focus, & .p-dd:focus { border-color: var(--focus-color) !important; outline: 3px solid var(--focus-color) !important; } & button, & .p-sb, & a.p-sb { background: var(--bg-color) !important; color: var(--font-color) !important; /*border: 2px solid var(--border-color) !important;*/ } & .p-sb:not(.was_clicked):hover, & a.p-sb:not(.was_clicked):hover { background: #eeeeee !important; color: var(--font-color) !important; } & button:active, & .p-sb:not(.was_clicked):active, & a.p-sb:not(.was_clicked):active { background: #dddddd !important; } /* Custom Radio / Checkbox */ & .p-ra + label:before, & .p-cx + label:before { background: var(--bg-color) !important; border-color: var(--border-color) !important; } & .p-ra:checked + label:after, & .p-cx:checked + label:after { background: var(--font-color) !important; } & .p-cx:disabled + label:before, & .p-ra:disabled + label:before { background: #cccccc !important; } /* --- Fehler & Hinweise --- */ & .val-err, & .error, & .val-desc-err, & .val-man-flag { color: var(--error-color) !important; } & .p-ti-error, & .p-ta-error, & .p-dd-error { border-color: var(--error-color) !important; } & .p-ra-error + label:before, & .p-cx-error + label:before { border-color: var(--error-color) !important; } & .man-err-field { border-color: var(--error-color) !important; background: var(--bg-color) !important; } & .mand-hint { border-color: var(--hint-color) !important; background: var(--bg-color) !important; } & .pwd_invalid { color: var(--error-color) !important; border-color: var(--border-color) !important; } & .pwd_valid { color: #006600 !important; } /* --- Paging --- */ & ul.paging li a, & ul.paging li div { color: var(--font-color) !important; border-color: var(--border-color) !important; background: var(--bg-color) !important; } & ul.paging li a:hover, & ul.paging li div:hover { background: #eeeeee !important; } /* --- Top-Linkbox --- */ & .top-linkbox { background-color: var(--bg-color) !important; color: var(--font-color) !important; border: 2px solid var(--border-color) !important; } & .top-linkbox a { color: var(--font-color) !important; } /* --- Bubble --- */ & .bubble { background-color: var(--bg-color) !important; color: var(--font-color) !important; border: 2px solid var(--border-color) !important; } /* --- Fullwidth-Blöcke --- */ & .fullwidth-bg .article-div:after { background: #eeeeee !important; background: transparent !important; border-bottom: 1px solid var(--border-color) !important; z-index: 1; } & .fullwidth-bg.dark-blue .article-div:after { background: #dddddd !important; background: transparent !important; } & .fullwidth-div { background: #eeeeee !important; background: transparent !important; } & .faq-style-default div.faq-q, & .faq-style-default button.faq-q { border : 2px solid var(--border-color) !important; } /* --- Holiday-Box --- */ & .hod-2.holiday > div { background: var(--bg-color) !important; color: var(--font-color) !important; border-left: 2px solid var(--border-color) !important; } & .hod-2.holiday > div:after { background: var(--bg-color) !important; } /* --- Checkmark-Listen --- */ & .platocontent ul.cl li.minus, & .platomargin ul.cl li.minus { color: #555555 !important; } /* --- Val-View (Formular-Vorschau) --- */ & .val-view { border-color: var(--border-color) !important; background: transparent !important; color: var(--font-color) !important; } & .val-view-cx, & .val-view-r { border-color: var(--border-color) !important; } & .val-view-cx:before, & .val-view-r:before { background: var(--border-color) !important; } /* --- Content-Block (Grid) --- */ & .subpage.page-grid .article-div > section > .sectiondiv > .content-block { background: rgba(0, 0, 0, 0.05) !important; } /* --- SVG Icons (icons_black → unverändert für hellen Hintergrund) --- */ & img[src*="/layout/icons_black"] { filter: none !important; background-color: var(--bg-color) !important; } & img[src*="/layout/icons/"] { filter: none !important; } /* --- Alle Bilder: leichten Kontrast-Boost --- */ & img:not([src*="/layout/icons_white"]):not([src*="/layout/icons/"]) { filter: brightness(1.05) contrast(1.1) !important; } & .logo > img#logoimg { filter:invert(1) !important; } & img#contr_icon { filter:invert(1) !important; } & .notification-alert.no-al-1 .inner-div > div { background: #fff; border: 5px solid #000 } & .notification-alert.no-al-1 .inner-div > * { color: var(--font-color) !important; } & .noti-close img[src*="/layout/icons/"] { filter:invert(1) !important; } & .parter-foot * { color: var(--font-color) !important; } & .ct-0-stdtxt * { color: var(--font-color) !important; } & .rinfo * { color: var(--font-color); } & .rinfo img { filter:invert(1) !important; } /* --- Focus-States (WCAG AAA) --- */ & a:focus, & a:focus-visible, & button:focus, & button:focus-visible, & input:focus, & input:focus-visible, & select:focus, & select:focus-visible, & textarea:focus, & textarea:focus-visible, & [tabindex]:focus, & [tabindex]:focus-visible { outline: 3px solid var(--focus-color) !important; outline-offset: 2px !important; box-shadow: 0 0 0 5px rgba(204, 0, 0, 0.2) !important; } }