/* =========================================================
Accessibility-Toolbar
========================================================= */
/* ---- Widget (Button + Panel) ---- */
.a11y {
position: fixed;
top: 50%;
right: 0;
transform: translateY(-50%);
z-index: 1080;
font-family: inherit;
}
.a11y__toggle {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.15rem;
width: 72px;
padding: 0.6rem 0.4rem;
border: 0;
border-radius: 0.6rem 0 0 0.6rem;
background: var(--secondary, #f14d31);
color: #fff;
line-height: 1;
cursor: pointer;
box-shadow: -2px 2px 12px rgba(0, 0, 0, 0.3);
}
.a11y__toggle:hover,
.a11y__toggle:focus-visible {
background: var(--primary, #1e3853);
outline: 2px solid #fff;
outline-offset: -4px;
}
.a11y__toggle__label {
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.01em;
text-transform: uppercase;
text-align: center;
hyphens: auto;
}
.a11y__icon {
fill: currentColor;
display: block;
}
/* Einmaliger Aufmerksamkeits-Puls beim Laden – nur ohne Reduce-Motion */
@media (prefers-reduced-motion: no-preference) {
.a11y__toggle::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow: 0 0 0 0 rgba(241, 77, 49, 0.55);
animation: a11yPulse 2.4s ease-out 3;
pointer-events: none;
}
@keyframes a11yPulse {
0% { box-shadow: 0 0 0 0 rgba(241, 77, 49, 0.55); }
70% { box-shadow: 0 0 0 16px rgba(241, 77, 49, 0); }
100% { box-shadow: 0 0 0 0 rgba(241, 77, 49, 0); }
}
}
.a11y__panel {
position: absolute;
top: 50%;
right: 80px;
transform: translateY(-50%);
width: 240px;
padding: 1rem;
background: #fff;
color: #1a1a1a;
border: 1px solid #cfd4da;
border-radius: 0.75rem;
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}
.a11y__panel[hidden] {
display: none;
}
.a11y__title {
margin: 0 0 0.75rem;
font-size: 1rem;
font-weight: 700;
}
.a11y__group {
margin-bottom: 0.75rem;
}
.a11y__group:last-child {
margin-bottom: 0;
}
.a11y__label {
display: block;
margin-bottom: 0.35rem;
font-size: 0.85rem;
font-weight: 600;
}
.a11y__btns {
display: flex;
gap: 0.35rem;
flex-wrap: wrap;
}
.a11y__btn {
flex: 1 1 auto;
min-width: 2.5rem;
padding: 0.45rem 0.5rem;
border: 1px solid #cfd4da;
border-radius: 0.4rem;
background: #f4f5f6;
color: #1a1a1a;
font-size: 0.9rem;
cursor: pointer;
}
.a11y__btn--wide {
width: 100%;
text-align: left;
}
.a11y__btn--reset {
width: 100%;
background: transparent;
text-decoration: underline;
border-color: transparent;
}
.a11y__btn:hover,
.a11y__btn:focus-visible {
outline: 2px solid var(--primary, #1e3853);
outline-offset: 1px;
}
.a11y__btn[aria-pressed="true"] {
background: var(--primary, #1e3853);
border-color: var(--primary, #1e3853);
color: #fff;
}
/* =========================================================
Wirk-Klassen auf
========================================================= */
/* ---- Schriftgröße (rem-basiert) ---- */
html.a11y-font-1 { font-size: 112.5%; }
html.a11y-font-2 { font-size: 125%; }
html.a11y-font-3 { font-size: 140%; }
/* ---- Bilder ausblenden ----
Echte ![]()
werden per JS durch einen Platzhalter mit Alt-Text ersetzt
(siehe a11y-toolbar.js). Hier: Hintergrundbilder neutralisieren + Platzhalter-Stil. */
/* ![]()
sofort verstecken (verhindert Flackern); Platzhalter ergänzt das JS */
html.a11y-hide-images img:not(.a11y *) {
display: none !important;
}
html.a11y-hide-images .hero,
html.a11y-hide-images header.hero,
html.a11y-hide-images [style*="background-image"] {
background-image: none !important;
}
/* Hero ohne Bild lesbar halten */
html.a11y-hide-images .hero,
html.a11y-hide-images header.hero {
background-color: var(--primary, #1e3853) !important;
}
.a11y-img-placeholder {
display: inline-flex;
align-items: center;
gap: 0.4rem;
max-width: 100%;
padding: 0.4rem 0.7rem;
border: 1px dashed #6c757d;
border-radius: 0.4rem;
background: #f4f5f6;
color: #333;
font-size: 0.85rem;
line-height: 1.3;
text-align: left;
word-break: break-word;
}
.a11y-img-placeholder::before {
content: "🖼";
font-size: 1rem;
flex: 0 0 auto;
}
/* =========================================================
Hoher Kontrast (schwarz/weiß)
Aggressiv: alle Hintergründe weiß, Text schwarz, Verläufe/Schatten weg.
Die Toolbar (.a11y) wird danach gezielt wieder eingefärbt.
========================================================= */
html.a11y-contrast {
--primary: #000;
--secondary: #000;
--blue-gray: #fff;
--orange-gray: #fff;
--gray: #fff;
}
html.a11y-contrast,
html.a11y-contrast body {
background: #fff !important;
color: #000 !important;
}
/* Alles außerhalb der Toolbar auf Schwarz/Weiß zwingen.
Der Hero ist ausgenommen (:not(.hero):not(.hero *)) – er behält seinen
farbigen Verlauf als Akzent, statt weiß übermalt zu werden. */
html.a11y-contrast *:not(.a11y):not(.a11y *):not(.hero):not(.hero *) {
background-color: #fff !important;
background-image: none !important;
color: #000 !important;
border-color: #000 !important;
box-shadow: none !important;
text-shadow: none !important;
fill: #000 !important;
}
/* Links klar erkennbar */
html.a11y-contrast a:not(.a11y *),
html.a11y-contrast a:not(.a11y *) * {
color: #000 !important;
text-decoration: underline !important;
}
/* Pseudo-Elemente (Akzent-Unterstreichungen, Text-Swap-Duplikate) erfasst der
*-Selektor nicht – hier explizit auf Schwarz ziehen.
Hinweis: KEIN border-color erzwingen – sonst werden CSS-Dreiecke
(transparente Borders, z. B. Dropdown-Pfeile) zu schwarzen Quadraten. */
html.a11y-contrast *:not(.a11y):not(.a11y *):not(.hero):not(.hero *)::before,
html.a11y-contrast *:not(.a11y):not(.a11y *):not(.hero):not(.hero *)::after {
color: #000 !important;
}
/* Dropdown-Pfeil (CSS-Dreieck) im Kontrastmodus ausblenden */
html.a11y-contrast .topbar__menu__sub::before,
html.a11y-contrast .topbar__menu__sub::after {
display: none !important;
}
/* Menü-Hover-Animation (data-replace) im Kontrastmodus abschalten:
Text bleibt an Ort und Stelle sichtbar, kein orangefarbener Balken,
kein heller Doppeltext. */
html.a11y-contrast .topbar__menu a span,
html.a11y-contrast .footer-menu a span {
transform: none !important;
opacity: 1 !important;
}
html.a11y-contrast .topbar__menu a::before,
html.a11y-contrast .topbar__menu a::after,
html.a11y-contrast .footer-menu a::before,
html.a11y-contrast .footer-menu a::after {
display: none !important;
}
/* Aktiven Menüpunkt klar markieren (Ersatz für den entfernten Akzentbalken) */
html.a11y-contrast .topbar__menu a.active span {
text-decoration: underline !important;
text-underline-offset: 4px;
font-weight: 700 !important;
}
/* Buttons/Links bei Hover & Fokus invertieren (schwarze Fläche, weiße Schrift) */
html.a11y-contrast a:not(.a11y *):hover,
html.a11y-contrast a:not(.a11y *):hover *,
html.a11y-contrast a:not(.a11y *):focus,
html.a11y-contrast a:not(.a11y *):focus *,
html.a11y-contrast .btn:not(.a11y *):hover,
html.a11y-contrast .btn:not(.a11y *):hover *,
html.a11y-contrast button:not(.a11y *):hover {
background-color: #000 !important;
color: #fff !important;
fill: #fff !important;
}
/* Buttons grundsätzlich mit klarer Umrandung */
html.a11y-contrast .btn:not(.a11y *),
html.a11y-contrast button:not(.a11y *) {
border: 2px solid #000 !important;
}
/* Deutlich sichtbarer Fokusrahmen */
html.a11y-contrast a:not(.a11y *):focus-visible,
html.a11y-contrast button:not(.a11y *):focus-visible {
outline: 3px solid #000 !important;
outline-offset: 2px;
}
/* Hamburger-Button (mobiles Menü): Die „Balken" sind geschwungene Pfade mit
fill:none, von denen nur das gerade Mittelstück (stroke-dasharray) sichtbar ist.
Die globale Kontrast-Regel erzwingt fill:#000 → die offenen Pfade werden schwarz
ausgefüllt (Blobs statt Balken/X). Daher hier fill:none halten und die Striche
schwarz färben → saubere schwarze Balken bzw. X auf weißem Kreis. */
html.a11y-contrast #hamburger .line {
fill: none !important;
stroke: #000 !important;
}
/* Die globale Regel setzt auch dem (quadratischen) SVG background:#fff – das weiße
Quadrat überdeckt den runden Button-Rand und lässt nur 4 Eck-Bögen stehen.
Daher SVG-Hintergrund transparent halten → voller Kreis, keine Lücken. */
html.a11y-contrast #hamburger svg {
background: transparent !important;
}
/* Toolbar im Kontrastmodus klar erkennbar halten */
html.a11y-contrast .a11y__toggle {
background: #000;
color: #fff;
}
html.a11y-contrast .a11y__toggle::after {
display: none;
}
html.a11y-contrast .a11y__panel {
border: 2px solid #000;
}
html.a11y-contrast .a11y__btn[aria-pressed="true"] {
background: #000;
color: #fff;
border-color: #000;
}