/* ============================================================ Barrierefreiheits-Werkzeuge (opt-in). Greift nur, wenn das a11y.js die Klassen auf setzt. Der Standard bleibt unberührt. ============================================================ */ /* ---- Auslöser-Button + Panel (immer sichtbar, position:fixed, außerhalb des Layouts) ---- */ .a11y-fab{ position:fixed; left:18px; bottom:18px; z-index:2000; width:52px; height:52px; border-radius:50%; background:#E85D04; color:#1a0d05; border:2px solid #0A0806; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.5); } .a11y-fab:hover{ background:#F2A23C; } .a11y-fab svg{ width:30px; height:30px; } .a11y-panel{ position:fixed; left:18px; bottom:80px; z-index:2001; width:300px; max-width:calc(100vw - 36px); background:#1A1109; color:#ECDFC4; border:1px solid #3a2616; border-radius:12px; padding:18px 18px 14px; box-shadow:0 10px 34px rgba(0,0,0,.6); font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif; font-size:15px; line-height:1.5; } .a11y-panel[hidden]{ display:none; } .a11y-panel h2{ font-size:1.05rem; margin:0 0 4px; color:#ECDFC4; font-family:inherit; text-transform:none; letter-spacing:normal; } .a11y-panel .a11y-sub{ color:#b7a888; font-size:.82rem; margin:0 0 14px; } .a11y-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid #3a2616; } .a11y-row:last-of-type{ border-bottom:0; } .a11y-row .lbl{ flex:1; } /* Schalter (role=switch) */ .a11y-switch{ flex:0 0 auto; width:46px; height:26px; border-radius:999px; background:#0A0806; border:1px solid #b7a888; position:relative; cursor:pointer; padding:0; } .a11y-switch::after{ content:""; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:#b7a888; transition:left .15s, background .15s; } .a11y-switch[aria-checked="true"]{ background:#E85D04; border-color:#E85D04; } .a11y-switch[aria-checked="true"]::after{ left:22px; background:#1a0d05; } /* Schrift-Stepper */ .a11y-step{ display:flex; align-items:center; gap:8px; } .a11y-step button{ width:34px; height:34px; border-radius:8px; border:1px solid #b7a888; background:#0A0806; color:#ECDFC4; font-size:16px; cursor:pointer; line-height:1; } .a11y-step button:disabled{ opacity:.4; cursor:default; } .a11y-step .val{ min-width:46px; text-align:center; color:#b7a888; font-variant-numeric:tabular-nums; } .a11y-reset{ margin-top:12px; width:100%; padding:9px; border-radius:8px; border:1px solid #b7a888; background:transparent; color:#ECDFC4; cursor:pointer; } .a11y-reset:hover{ border-color:#E85D04; } /* Sichtbarer Fokus im Panel/Button (auch wenn die Seite Fokus anders behandelt) */ .a11y-fab:focus-visible, .a11y-panel :focus-visible{ outline:3px solid #ffffff; outline-offset:2px; } /* ============================================================ Verbesserungs-Ebenen — wirken NUR mit gesetzter Klasse auf . Alle frei kombinierbar (eigene, stapelbare Klassen). ============================================================ */ /* (1) Hoher Kontrast — überschreibt die Farb-Variablen (höhere Spezifität als :root) */ html.a11y-contrast{ --ink:#000000; --bark:#0a0604; --forest:#0c0a06; --sand:#ffffff; --sand-dim:#efe6d2; --ember:#ff8a3d; --gold:#ffc06a; --flame:#ff6a4a; --line:#7a5d38; } html.a11y-contrast a{ text-decoration:underline; } html.a11y-contrast .btn-ghost{ border-color:#ffffff; } html.a11y-contrast body::before{ display:none; } /* Körnung aus, mehr Klarheit */ /* (2) Größere Schrift — skaliert die rem-Basis; body folgt der Skalierung statt fixer 18px */ html.a11y-fs-115{ font-size:115%; } html.a11y-fs-130{ font-size:130%; } html.a11y-fs-150{ font-size:150%; } html.a11y-fs-115 body, html.a11y-fs-130 body, html.a11y-fs-150 body{ font-size:1.125rem; } /* (3) Bewegung reduzieren — Animationen/Transitions/Smooth-Scroll aus */ html.a11y-motion-off{ scroll-behavior:auto; } html.a11y-motion-off *, html.a11y-motion-off *::before, html.a11y-motion-off *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } html.a11y-motion-off .reveal{ opacity:1 !important; transform:none !important; } /* (4) Lesehilfen — mehr Abstand, unterstrichene Links, gut lesbare Schrift */ html.a11y-reading body{ line-height:1.85; letter-spacing:.02em; word-spacing:.08em; } html.a11y-reading p, html.a11y-reading li{ line-height:1.95; } html.a11y-reading a{ text-decoration:underline; } html.a11y-reading body, html.a11y-reading input, html.a11y-reading select, html.a11y-reading textarea, html.a11y-reading button{ font-family:"Atkinson Hyperlegible","Verdana",system-ui,-apple-system,Arial,sans-serif; }