/* Modiva A11y Widget — Accessibility Settings Panel * ADR-0076 — Saule 1, BFSG-Paket * No external fonts, no CDN. First-party only. */ /* ── CSS-Klassen auf ──────────────────────────────────────────── */ html.a11y-font-115 { font-size: 115%; } html.a11y-font-130 { font-size: 130%; } html.a11y-contrast { filter: contrast(1.5); background: #000 !important; color: #fff !important; } html.a11y-contrast * { background-color: #000 !important; color: #fff !important; border-color: #fff !important; } html.a11y-grayscale { filter: grayscale(1); } html.a11y-no-motion *, html.a11y-no-motion *::before, html.a11y-no-motion *::after { animation: none !important; transition: none !important; } html.a11y-readable-font, html.a11y-readable-font * { font-family: Arial, Helvetica, sans-serif !important; font-style: normal !important; letter-spacing: 0.05em !important; word-spacing: 0.1em !important; line-height: 1.6 !important; } html.a11y-links a { text-decoration: underline !important; outline: 2px solid currentColor !important; outline-offset: 2px !important; } /* ── Widget: Floating Button ─────────────────────────────────────────── */ #modiva-a11y-btn { position: fixed; bottom: 1.5rem; left: 1.5rem; z-index: 99998; width: 3rem; height: 3rem; border-radius: 50%; border: 2px solid #005fcc; background: #005fcc; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,.35); padding: 0; font-size: 1.4rem; line-height: 1; font-family: system-ui, sans-serif; transition: background .2s; } #modiva-a11y-btn:hover, #modiva-a11y-btn:focus-visible { background: #004aa3; outline: 3px solid #ffdd00; outline-offset: 3px; } /* ── Widget: Panel ───────────────────────────────────────────────────── */ #modiva-a11y-panel { position: fixed; bottom: 5.5rem; left: 1.5rem; z-index: 99999; width: 18rem; max-height: 80vh; overflow-y: auto; background: #fff; color: #111; border: 2px solid #005fcc; border-radius: 8px; padding: 1rem; font-family: system-ui, -apple-system, sans-serif; font-size: 0.9rem; line-height: 1.5; box-shadow: 0 4px 20px rgba(0,0,0,.25); } #modiva-a11y-panel[hidden] { display: none; } #modiva-a11y-panel h2 { margin: 0 0 .75rem; font-size: 1rem; font-weight: 700; color: #111; border-bottom: 1px solid #ddd; padding-bottom: .5rem; } /* ── Panel: Options ──────────────────────────────────────────────────── */ .modiva-a11y-option { display: flex; align-items: center; justify-content: space-between; padding: .35rem 0; border-bottom: 1px solid #f0f0f0; } .modiva-a11y-option:last-child { border-bottom: none; } .modiva-a11y-option label { cursor: pointer; font-size: .875rem; color: #222; flex: 1; padding-right: .5rem; } .modiva-a11y-option input[type=checkbox] { width: 1.25rem; height: 1.25rem; cursor: pointer; accent-color: #005fcc; flex-shrink: 0; } /* ── Font-size radio group ───────────────────────────────────────────── */ .modiva-a11y-font-group { display: flex; gap: .4rem; flex-wrap: wrap; padding: .35rem 0; border-bottom: 1px solid #f0f0f0; } .modiva-a11y-font-group legend { font-size: .875rem; color: #222; margin-bottom: .3rem; width: 100%; font-weight: 600; } .modiva-a11y-font-group label { display: flex; align-items: center; gap: .25rem; font-size: .8rem; cursor: pointer; padding: .15rem .4rem; border: 1px solid #ccc; border-radius: 4px; } .modiva-a11y-font-group label:has(input:checked) { border-color: #005fcc; background: #e8f0fe; } .modiva-a11y-font-group input[type=radio] { accent-color: #005fcc; } /* ── TTS button row ──────────────────────────────────────────────────── */ .modiva-a11y-tts-row { display: flex; gap: .4rem; padding: .35rem 0; } .modiva-a11y-tts-btn { flex: 1; padding: .35rem .6rem; border: 1px solid #005fcc; border-radius: 4px; background: #005fcc; color: #fff; font-size: .8rem; cursor: pointer; font-family: inherit; } .modiva-a11y-tts-btn:hover, .modiva-a11y-tts-btn:focus-visible { background: #004aa3; outline: 2px solid #ffdd00; outline-offset: 2px; } .modiva-a11y-tts-btn.secondary { background: #fff; color: #005fcc; } .modiva-a11y-tts-btn.secondary:hover, .modiva-a11y-tts-btn.secondary:focus-visible { background: #e8f0fe; } /* ── Reset link ──────────────────────────────────────────────────────── */ .modiva-a11y-reset { display: block; width: 100%; margin-top: .6rem; padding: .35rem; border: 1px solid #ccc; border-radius: 4px; background: #fff; color: #555; font-size: .8rem; cursor: pointer; font-family: inherit; text-align: center; } .modiva-a11y-reset:hover, .modiva-a11y-reset:focus-visible { background: #f5f5f5; outline: 2px solid #005fcc; outline-offset: 2px; } /* ── High contrast override for the panel itself ─────────────────────── */ html.a11y-contrast #modiva-a11y-panel, html.a11y-contrast #modiva-a11y-panel * { background-color: #000 !important; color: #fff !important; border-color: #fff !important; } html.a11y-contrast #modiva-a11y-btn { background: #ffdd00 !important; color: #000 !important; border-color: #ffdd00 !important; }