/* 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-Optik (4.0.24.0, BUG-9): konsumiert Theme-Akzent ────────────── * Akzent kaskadiert ueber beide Theme-Konventionen (--c-* / --color-*) mit * Modiva-Violett als Fallback. Funktions-Klassen oben bleiben unveraendert. * Fokus-Ringe bleiben kraeftig (WCAG) — im Kontrast-Modus weiter grellgelb. */ /* ── Widget: Floating Button ─────────────────────────────────────────── */ #modiva-a11y-btn { --a11y-accent: var(--c-primary, var(--color-primary, var(--c-accent, var(--color-accent, #7c5cff)))); position: fixed; bottom: 1.5rem; left: 1.5rem; z-index: 99998; width: 3.25rem; height: 3.25rem; border-radius: 50%; border: none; background: var(--a11y-accent); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(0,0,0,.22); padding: 0; font-size: 1.4rem; line-height: 1; font-family: var(--font, system-ui, sans-serif); transition: transform .15s ease, box-shadow .2s ease; } #modiva-a11y-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.28); } #modiva-a11y-btn:active { transform: scale(.96); } #modiva-a11y-btn svg { width: 1.65rem; height: 1.65rem; display: block; } #modiva-a11y-btn:focus-visible { outline: 3px solid var(--a11y-accent); outline-offset: 3px; } /* ── Widget: Panel ───────────────────────────────────────────────────── */ #modiva-a11y-panel { --a11y-accent: var(--c-primary, var(--color-primary, var(--c-accent, var(--color-accent, #7c5cff)))); --a11y-surface: #fff; --a11y-fg: #1b1f3b; --a11y-muted: #5b6087; --a11y-border: rgba(20,22,48,.1); --a11y-accent-soft: color-mix(in srgb, var(--a11y-accent) 12%, transparent); position: fixed; bottom: 5.75rem; left: 1.5rem; z-index: 99999; width: 19rem; max-width: calc(100vw - 3rem); max-height: 80vh; overflow-y: auto; background: var(--a11y-surface); color: var(--a11y-fg); border: 1px solid var(--a11y-border); border-radius: 16px; padding: 1.1rem 1.2rem; font-family: var(--font, system-ui, -apple-system, sans-serif); font-size: 0.9rem; line-height: 1.5; box-shadow: 0 12px 40px rgba(0,0,0,.18); } #modiva-a11y-panel[hidden] { display: none; } #modiva-a11y-panel h2 { margin: 0 0 .85rem; font-size: 1.02rem; font-weight: 600; color: var(--a11y-fg); border-bottom: 1px solid var(--a11y-border); padding-bottom: .6rem; } /* ── Panel: Options (Toggle-Switches, 4.0.27.0) ──────────────────────── */ .modiva-a11y-option { padding: .35rem 0; border-bottom: 1px solid var(--a11y-border); } .modiva-a11y-option:last-child { border-bottom: none; } .modiva-a11y-toggle { display: flex; align-items: center; justify-content: space-between; gap: .75rem; cursor: pointer; padding: .25rem 0; } .modiva-a11y-toggle-text { flex: 1; font-size: .875rem; color: var(--a11y-fg); } /* Echte Checkbox: visuell versteckt, aber fokussierbar + screenreaderbar. */ .modiva-a11y-toggle-input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .modiva-a11y-switch { flex-shrink: 0; position: relative; width: 2.5rem; height: 1.4rem; border-radius: 999px; background: var(--a11y-border); transition: background .18s ease; } .modiva-a11y-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: calc(1.4rem - 4px); height: calc(1.4rem - 4px); border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .18s ease; } .modiva-a11y-toggle-input:checked + .modiva-a11y-switch { background: var(--a11y-accent); } .modiva-a11y-toggle-input:checked + .modiva-a11y-switch::after { transform: translateX(calc(2.5rem - 1.4rem)); } .modiva-a11y-toggle-input:focus-visible + .modiva-a11y-switch { outline: 2px solid var(--a11y-accent); outline-offset: 2px; } /* ── Font-size radio group ───────────────────────────────────────────── */ .modiva-a11y-font-group { display: flex; gap: .4rem; flex-wrap: wrap; padding: .55rem 0; border-bottom: 1px solid var(--a11y-border); } .modiva-a11y-font-group legend { font-size: .875rem; color: var(--a11y-fg); margin-bottom: .4rem; width: 100%; font-weight: 500; } .modiva-a11y-font-group label { display: flex; align-items: center; gap: .25rem; font-size: .8rem; cursor: pointer; padding: .25rem .6rem; border: 1px solid var(--a11y-border); border-radius: 8px; transition: border-color .15s ease, background .15s ease; } .modiva-a11y-font-group label:has(input:checked) { border-color: var(--a11y-accent); background: var(--a11y-accent-soft); } .modiva-a11y-font-group input[type=radio] { accent-color: var(--a11y-accent); } /* ── TTS button row ──────────────────────────────────────────────────── */ .modiva-a11y-tts-row { display: flex; gap: .4rem; padding: .55rem 0; } .modiva-a11y-tts-btn { flex: 1; padding: .45rem .6rem; border: 1px solid var(--a11y-accent); border-radius: 10px; background: var(--a11y-accent); color: #fff; font-size: .8rem; cursor: pointer; font-family: inherit; transition: opacity .2s ease, transform .12s ease; } .modiva-a11y-tts-btn:hover { opacity: .92; } .modiva-a11y-tts-btn:active { transform: scale(.97); } .modiva-a11y-tts-btn:focus-visible { outline: 2px solid var(--a11y-accent); outline-offset: 2px; } .modiva-a11y-tts-btn.secondary { background: transparent; color: var(--a11y-accent); } .modiva-a11y-tts-btn.secondary:hover { background: var(--a11y-accent-soft); opacity: 1; } /* ── Reset link ──────────────────────────────────────────────────────── */ .modiva-a11y-reset { display: block; width: 100%; margin-top: .75rem; padding: .45rem; border: 1px solid var(--a11y-border); border-radius: 10px; background: transparent; color: var(--a11y-muted); font-size: .8rem; cursor: pointer; font-family: inherit; text-align: center; transition: background .15s ease; } .modiva-a11y-reset:hover { background: var(--a11y-accent-soft); } .modiva-a11y-reset:focus-visible { outline: 2px solid var(--a11y-accent); outline-offset: 2px; } /* ── Dark-Mode-Panel (folgt System; Funktions-Klassen haben Vorrang) ──── */ @media (prefers-color-scheme: dark) { #modiva-a11y-panel { --a11y-surface: #16161f; --a11y-fg: #eef0fb; --a11y-muted: #b4b8d4; --a11y-border: rgba(255,255,255,.14); } } /* ── 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; }