/* Barrierefreiheits-Widget (BFSG) — Styling für DIESE Site. Bewusst NICHT aus der Base übernommen: deren CSS ist für ein helles Design gebaut (--ink:#000, body{background:#fff}) und würde das Cinematic-Dark-Layout hier zerreißen. Stattdessen verstärkt der Kontrast-Modus unten das bestehende Schema, statt es umzudrehen. Verhalten steckt in /js/a11y.js (unverändert aus Base 3.53). WICHTIG: Solange niemand das Widget benutzt, ändert diese Datei am Seitendesign nichts — sie stylt nur den Bedien-Button und das Panel. Die drei Modi greifen ausschließlich über die Klassen a11y-font / a11y-contrast / a11y-noanim auf . */ /* ---- Bedien-Button ------------------------------------------------------- */ /* Weißer Chip mit Markenblau — dasselbe Prinzip wie beim Logo und den Partner-Chips. */ .a11y-btn{ position:fixed; left:16px; bottom:16px; z-index:74; width:48px; height:48px; border-radius:50%; background:#fff; color:var(--brand,#00508B); border:2px solid var(--brand,#00508B); display:grid; place-items:center; cursor:pointer; box-shadow:0 6px 20px -6px rgba(0,0,0,.55); transition:box-shadow .25s ease, transform .25s ease; } .a11y-btn:hover{ box-shadow:0 10px 26px -6px rgba(0,0,0,.7); transform:translateY(-1px) } .a11y-btn:focus-visible{ outline:3px solid var(--flood,#F0A24A); outline-offset:3px } /* ---- Panel -------------------------------------------------------------- */ .a11y-panel{ position:fixed; left:16px; bottom:76px; z-index:74; background:#fff; color:var(--ink,#04223B); border-radius:6px; border-top:5px solid var(--flood,#F0A24A); box-shadow:0 16px 40px -10px rgba(0,0,0,.6); padding:14px 16px; min-width:15rem; max-width:calc(100vw - 32px); } .a11y-title{ margin:.1rem 0 .6rem; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--steel,#7E90A0); font-weight:800; } .a11y-opt{ display:flex; align-items:center; gap:.7rem; width:100%; background:none; border:0; padding:.5rem 0; font:inherit; font-weight:700; color:var(--ink,#04223B); cursor:pointer; text-align:left; } .a11y-opt:focus-visible{ outline:3px solid var(--flood,#F0A24A); outline-offset:2px } .a11y-ic{ display:grid; place-items:center; flex:0 0 auto; width:2rem; height:2rem; border-radius:50%; background:var(--ice-tint,#DCE7EE); color:var(--brand,#00508B); font-weight:800; font-size:.8rem; } .a11y-opt[aria-pressed="true"] .a11y-ic{ background:var(--flood,#F0A24A); color:#241305 } /* Mobil (<900px) blendet die Seite den Sticky-CTA über die volle Breite unten ein. Solange der sichtbar ist, rückt der Button darüber, damit sich beide nicht überlagern. Ohne :has()-Unterstützung bleibt die normale Position — dann überlappt es im ungünstigsten Fall, kaputt geht nichts. */ @media (max-width:900px){ body:has(.sticky-cta.show) .a11y-btn{ bottom:78px } body:has(.sticky-cta.show) .a11y-panel{ bottom:138px } } /* ---- Modus 1: Schrift größer -------------------------------------------- */ .a11y-font{ font-size:115% } /* ---- Modus 2: Hoher Kontrast -------------------------------------------- */ /* Die Seite lebt vom Wechsel heller und dunkler Bänder. Deshalb wird hier NICHT auf Weiß umgestellt, sondern jeder Ton an sein Extrem gezogen: dunkle Flächen werden schwarz, helle weiß, gedämpfte Schriftfarben voll deckend. Der Rhythmus bleibt, der Kontrast steigt. */ .a11y-contrast{ --ink:#000; --ink-2:#000; --deep:#000; --glacier:#fff; --ice-tint:#fff; --frost:#fff; --frost-soft:#fff; --steel:#fff; --steel-2:#fff; --deep-line:#fff; --card-line:#000; --soft:#000; --flood:#F5A623; --flood-deep:#D97706; } .a11y-contrast a{ text-decoration:underline } .a11y-contrast .a11y-panel a{ text-decoration:none } /* Panel und Button bleiben lesbar, auch wenn oben Tokens umdefiniert wurden. */ .a11y-contrast .a11y-panel{ color:#000; border-top-color:#000 } .a11y-contrast .a11y-title{ color:#000 } .a11y-contrast .a11y-opt{ color:#000 } .a11y-contrast .a11y-ic{ background:#e6e6e6; color:#000 } /* ---- Modus 3: Animationen aus ------------------------------------------- */ /* .rv startet mit opacity:0 und wird per IntersectionObserver eingeblendet. Ohne die zweite Regel wären bei abgeschalteten Transitions ganze Abschnitte UNSICHTBAR. */ .a11y-noanim *, .a11y-noanim *::before, .a11y-noanim *::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } .a11y-noanim .rv{ opacity:1 !important; transform:none !important } .a11y-noanim .pmarquee-track{ animation:none !important }