/* ===================================================================== Barrierefreiheits-Assistent — Egger Communications Webvorgabe Wiederverwendbares Modul · WCAG 2.2 AA / BFSG · keine Fremd-CDNs Alle Styles unter #a11y- / .a11y- gekapselt (px-basiert, immun gg. Font-Skalierung) ===================================================================== */ #a11y-fab{ position:fixed; left:20px; bottom:20px; z-index:100000; width:56px; height:56px; border-radius:50%; border:none; cursor:pointer; background:#996600; color:#fff; box-shadow:0 6px 18px rgba(0,0,0,.28); display:flex; align-items:center; justify-content:center; transition:transform .2s, background .2s; } #a11y-fab:hover{ background:#7c5200; transform:scale(1.06); } #a11y-fab:focus-visible{ outline:3px solid #ffcc00; outline-offset:3px; } #a11y-fab svg{ width:30px; height:30px; } #a11y-panel{ position:fixed; left:16px; top:16px; z-index:100001; width:340px; max-width:calc(100vw - 32px); max-height:calc(100vh - 32px); overflow-y:auto; background:#fff; color:#20242b; border-radius:18px; box-shadow:0 24px 70px rgba(0,0,0,.28); padding:22px 22px 18px; font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased; } #a11y-panel[hidden]{ display:none; } #a11y-panel *{ box-sizing:border-box; } .a11y-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; } .a11y-head h2{ font-size:20px; font-weight:700; margin:0; color:#20242b; letter-spacing:0; } #a11y-close{ background:none; border:none; cursor:pointer; font-size:22px; line-height:1; color:#6b7280; padding:2px 6px; border-radius:8px; } #a11y-close:hover{ background:#f1f1f1; color:#111; } .a11y-intro{ color:#6b7280; font-size:13.5px; margin:6px 0 16px; } .a11y-fontrow{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0 16px; border-bottom:1px solid #eee; margin-bottom:6px; } .a11y-fontrow .lbl{ font-weight:600; } .a11y-fontctrl{ display:flex; align-items:center; gap:10px; } .a11y-fontctrl button{ width:42px; height:40px; border:1px solid #d8dbe0; background:#fff; border-radius:10px; cursor:pointer; font-size:16px; font-weight:700; color:#20242b; } .a11y-fontctrl button:hover{ border-color:#996600; color:#7c5200; } .a11y-fontctrl .pct{ min-width:52px; text-align:center; font-weight:600; color:#374151; } .a11y-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 0; border-bottom:1px solid #f1f1f1; } .a11y-row .lbl{ font-weight:500; } /* Toggle-Switch */ .a11y-switch{ position:relative; flex:none; width:52px; height:30px; border-radius:999px; border:none; cursor:pointer; background:#d5d8dd; transition:background .2s; } .a11y-switch::after{ content:""; position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:transform .2s; } .a11y-switch[aria-pressed="true"]{ background:#996600; } .a11y-switch[aria-pressed="true"]::after{ transform:translateX(22px); } .a11y-switch:focus-visible{ outline:3px solid #ffcc00; outline-offset:2px; } .a11y-reset{ width:100%; margin:16px 0 10px; padding:13px 16px; border:none; border-radius:10px; background:#20242b; color:#fff; font-weight:700; font-size:14px; letter-spacing:.04em; text-transform:uppercase; cursor:pointer; } .a11y-reset:hover{ background:#000; } .a11y-foot{ text-align:center; font-size:12.5px; color:#8a8f98; } .a11y-foot a{ color:#7c5200; } /* ---------- Wirkungs-Klassen auf ---------- */ html.a11y-links a{ text-decoration:underline !important; text-underline-offset:2px; outline:2px solid #ffcc00; outline-offset:1px; background:rgba(255,204,0,.14); } html.a11y-readable *{ font-family:Verdana,Tahoma,"Segoe UI",sans-serif !important; letter-spacing:.02em !important; word-spacing:.06em !important; } html.a11y-lineheight *{ line-height:1.9 !important; } /* Panel bleibt immer neutral lesbar (immun gegen die Wirkungs-Klassen) */ #a11y-panel, #a11y-panel *{ font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif !important; letter-spacing:normal !important; word-spacing:normal !important; line-height:1.5 !important; } html.a11y-noanim *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } html.a11y-bigcursor, html.a11y-bigcursor *{ cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' stroke='%23fff' stroke-width='1.2' d='M6 2l14 8-6 1.5 3.5 7-3 1.3-3.4-6.9L6 18z'/%3E%3C/svg%3E") 4 2, auto !important; } /* Lesehilfe / Zeilenlineal */ #a11y-ruler{ position:fixed; left:0; width:100%; height:44px; z-index:99999; pointer-events:none; display:none; background:rgba(153,102,0,.14); border-top:2px solid rgba(153,102,0,.6); border-bottom:2px solid rgba(153,102,0,.6); } html.a11y-ruler #a11y-ruler{ display:block; } @media (max-width:520px){ #a11y-panel{ left:8px; right:8px; width:auto; } }