/* ========================================================================== KK A11y – Barrierefreiheits-Basis Branding: Dunkelgrün #1B4D3E, Orange #F39200 ========================================================================== */ :root { --kk-a11y-green: #1B4D3E; --kk-a11y-orange: #F39200; --kk-a11y-surface: #ffffff; --kk-a11y-text: #1a1a1a; --kk-a11y-border: #d4d9d7; } /* --- Skip-Link ---------------------------------------------------------- */ .kk-a11y-skip-link { position: absolute; left: -9999px; top: 0; z-index: 100001; padding: .75rem 1.25rem; background: var(--kk-a11y-green); color: #fff; font: 600 1rem/1.2 inherit; text-decoration: none; border-radius: 0 0 4px 0; } .kk-a11y-skip-link:focus { left: 0; } /* --- Sichtbarer Fokus (global) ----------------------------------------- Zwei-Ring-Indikator: Orange sichtbar auf dunklem Grund, dunkelgrüner Ring (box-shadow) sichtbar auf hellem Grund. Gegen das reale LE.O-Theme – v. a. den dunkelgrünen Header – bitte gegenprüfen. ------------------------------------------------------------------------- */ :focus-visible { outline: 3px solid var(--kk-a11y-orange); outline-offset: 2px; box-shadow: 0 0 0 2px var(--kk-a11y-green); border-radius: 2px; } /* Fallback für Browser ohne :focus-visible-Unterstützung nicht nötig (WordPress-Zielbrowser unterstützen es durchgängig). */ /* --- Bewegungsreduktion ------------------------------------------------- Respektiert die System-Einstellung UND den manuellen Schalter. ------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } html.kk-a11y-reduce-motion *, html.kk-a11y-reduce-motion *::before, html.kk-a11y-reduce-motion *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } /* --- Hoher Kontrast ----------------------------------------------------- Zusatz-Komfort, KEIN Ersatz für konforme Theme-Farben (WCAG 1.4.3). Wichtig: Hintergrund UND Vordergrund werden als Paar erzwungen, sonst landet weißer Text auf hellen Gutenberg-Sektionen (Hintergründe werden pro Block gesetzt, nicht auf ). Die Container-Liste ggf. an die realen LE.O-Templates anpassen. Dekorative Hintergrundbilder entfallen im Kontrastmodus bewusst. ------------------------------------------------------------------------- */ html.kk-a11y-high-contrast, html.kk-a11y-high-contrast body { background: #000 !important; color: #fff !important; } /* Struktur-Container zwingend schwarz – deckt Sektions-Hintergründe. Listen und Navigations-Submenüs bewusst enthalten, sonst behalten aufklappende Untermenüs ihren hellen Theme-Hintergrund. */ html.kk-a11y-high-contrast :is(header, main, footer, section, article, aside, nav, div, ul, ol, li, .wp-block-group, .wp-block-columns, .wp-block-column, .wp-block-cover, .wp-block-cover__inner-container, .wp-block-navigation__submenu-container, .sub-menu, .menu) { background-color: #000 !important; background-image: none !important; } /* Aufklappende Untermenüs vom Hintergrund abheben. */ html.kk-a11y-high-contrast :is(.wp-block-navigation__submenu-container, .sub-menu) { border: 1px solid #fff !important; } html.kk-a11y-high-contrast :is(p, li, span, h1, h2, h3, h4, h5, h6, td, th, dd, dt, figcaption, label, blockquote, strong, em, small, time) { color: #fff !important; } html.kk-a11y-high-contrast a, html.kk-a11y-high-contrast a * { color: #ffff00 !important; text-decoration: underline !important; } /* Transparente Logos/Icons auf weißem Feld sichtbar halten. */ html.kk-a11y-high-contrast img { background: #fff !important; } html.kk-a11y-high-contrast :is(button, input, select, textarea) { background: #000 !important; color: #fff !important; border: 1px solid #fff !important; } html.kk-a11y-high-contrast :focus-visible { outline-color: #ffff00 !important; box-shadow: none !important; } /* --- Screenreader-only -------------------------------------------------- */ .kk-a11y__sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ========================================================================== Widget ========================================================================== */ .kk-a11y { position: fixed; z-index: 100000; font-family: Arial, Helvetica, sans-serif; line-height: 1.4; } /* Position */ .kk-a11y--bottom-left { left: 1rem; bottom: 1rem; } .kk-a11y--bottom-right { right: 1rem; bottom: 1rem; } .kk-a11y--top-left { left: 1rem; top: 1rem; } .kk-a11y--top-right { right: 1rem; top: 1rem; } /* Auslöser */ .kk-a11y__toggle { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem .9rem; background: var(--kk-a11y-green); color: #fff; border: 2px solid var(--kk-a11y-green); border-radius: 999px; font: 600 .95rem/1 Arial, sans-serif; cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, .25); } .kk-a11y__toggle:hover { background: #163f33; } .kk-a11y--icon-only .kk-a11y__toggle { padding: .7rem; border-radius: 50%; } .kk-a11y__icon { display: inline-flex; } .kk-a11y__icon svg { display: block; } /* Panel */ .kk-a11y__panel { position: absolute; bottom: calc(100% + .5rem); left: 0; width: 18rem; max-width: calc(100vw - 2rem); padding: 1rem; background: var(--kk-a11y-surface); color: var(--kk-a11y-text); border: 1px solid var(--kk-a11y-border); border-radius: 10px; box-shadow: 0 8px 30px rgba(0, 0, 0, .22); } .kk-a11y__panel[hidden] { display: none; } /* Panel öffnet je nach Position nach oben/unten und links/rechts. */ .kk-a11y--top-left .kk-a11y__panel, .kk-a11y--top-right .kk-a11y__panel { bottom: auto; top: calc(100% + .5rem); } .kk-a11y--bottom-right .kk-a11y__panel, .kk-a11y--top-right .kk-a11y__panel { left: auto; right: 0; } .kk-a11y__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; padding-bottom: .5rem; border-bottom: 1px solid var(--kk-a11y-border); } .kk-a11y__title { font-size: 1rem; font-weight: 700; color: var(--kk-a11y-green); } .kk-a11y__close { background: none; border: 0; font-size: 1.5rem; line-height: 1; color: var(--kk-a11y-text); cursor: pointer; padding: .1rem .35rem; border-radius: 4px; } .kk-a11y__row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .5rem 0; } .kk-a11y__label { font-size: .95rem; } /* Schriftgröße-Steuerung */ .kk-a11y__controls { display: inline-flex; align-items: center; gap: .4rem; } .kk-a11y__step { min-width: 2.25rem; height: 2.25rem; padding: 0 .5rem; background: #fff; color: var(--kk-a11y-green); border: 2px solid var(--kk-a11y-green); border-radius: 6px; font: 700 1rem/1 Arial, sans-serif; cursor: pointer; } .kk-a11y__step:disabled { opacity: .4; cursor: not-allowed; } .kk-a11y__value { min-width: 3rem; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; } /* Schalter */ .kk-a11y__switch { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: .75rem; padding: 0; background: none; border: 0; cursor: pointer; color: inherit; } .kk-a11y__track { position: relative; flex: 0 0 auto; width: 2.75rem; height: 1.5rem; background: #b9c2bf; border-radius: 999px; transition: background .15s ease; } .kk-a11y__thumb { position: absolute; top: 2px; left: 2px; width: 1.25rem; height: 1.25rem; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .15s ease; } .kk-a11y__switch[aria-checked="true"] .kk-a11y__track { background: var(--kk-a11y-orange); } .kk-a11y__switch[aria-checked="true"] .kk-a11y__thumb { transform: translateX(1.25rem); } /* Zurücksetzen */ .kk-a11y__reset { width: 100%; margin-top: .75rem; padding: .6rem; background: #fff; color: var(--kk-a11y-green); border: 2px solid var(--kk-a11y-green); border-radius: 6px; font: 600 .95rem/1 Arial, sans-serif; cursor: pointer; } .kk-a11y__reset:hover { background: #f2f5f4; } /* Widget im Kontrastmodus bedienbar halten (setzt die groben globalen Overrides gezielt zurück – höhere Spezifität gewinnt bei gleichem !important). */ html.kk-a11y-high-contrast .kk-a11y__toggle, html.kk-a11y-high-contrast .kk-a11y__step, html.kk-a11y-high-contrast .kk-a11y__reset { background: var(--kk-a11y-green) !important; color: #fff !important; border-color: #fff !important; } html.kk-a11y-high-contrast .kk-a11y__panel { background: #000 !important; border-color: #fff !important; } html.kk-a11y-high-contrast .kk-a11y__title, html.kk-a11y-high-contrast .kk-a11y__value, html.kk-a11y-high-contrast .kk-a11y__label, html.kk-a11y-high-contrast .kk-a11y__close { color: #fff !important; }