/* ============================================================ Barrierefreiheit-Widget + Nach-oben-Button · Drop-in-Styles ------------------------------------------------------------ Framework-frei, kein Build. Die Farben/Radien lesen – wenn vorhanden – die Design-Tokens des Projekts (--accent, --ink …) und fallen sonst auf sinnvolle Standardwerte zurück. So passt sich das Widget automatisch ans Projekt an, funktioniert aber auch ganz ohne Tokens. Zum Anpassen an ein Projekt genügt es meist, die Token unten im Projekt-CSS zu definieren – hier muss nichts geändert werden. ============================================================ */ :root { /* Nur als Fallback gesetzt; projekt­eigene Werte gewinnen, weil sie später in der Kaskade / mit gleicher Spezifität stehen. Wer eigene Tokens hat, kann diesen Block ignorieren. */ --a11y-accent: var(--accent, #166e4b); --a11y-accent-dark: var(--accent-dark, #0f5237); --a11y-accent-soft: var(--accent-soft, #dcebe2); --a11y-ink: var(--ink, #16201b); --a11y-ink-soft: var(--ink-soft, #45514a); --a11y-bg: var(--bg, #fafcfa); --a11y-surface: #ffffff; --a11y-line: var(--line, #d9e3dc); --a11y-focus: var(--focus, var(--accent, #166e4b)); --a11y-radius: var(--r-lg, 1rem); --a11y-radius-sm: var(--r-sm, 0.5rem); --a11y-font: var(--font-body, system-ui, -apple-system, "Segoe UI", sans-serif); --a11y-font-display: var(--font-display, var(--font-body, system-ui, sans-serif)); } /* ============================================================ 1 · Zustandsklassen (wirken auf die ganze Seite, hängen an ) ============================================================ */ /* Hoher Kontrast: legt die Farb-Tokens auf harte Werte um. Wirkt am besten, wenn das Projekt seine Farben über CSS-Variablen bezieht – dann erben alle Elemente automatisch. Zusätzlich werden Links und Bedienelemente kräftiger umrandet. */ html.a11y-contrast { --accent: #00522f; --accent-dark: #00381f; --accent-soft: #cfe9db; --ink: #000000; --ink-soft: #1a1a1a; --bg: #ffffff; --line: #000000; --a11y-accent: #00522f; --a11y-ink: #000000; --a11y-ink-soft: #1a1a1a; --a11y-bg: #ffffff; --a11y-line: #000000; } html.a11y-contrast a:not(.btn):not([class*="button"]) { text-decoration: underline; } /* Leseschrift: gut lesbare Standardschrift + mehr Luft. */ html.a11y-readable { --font-body: Arial, "Segoe UI", Tahoma, sans-serif; --font-display: Arial, "Segoe UI", Tahoma, sans-serif; --a11y-font: Arial, "Segoe UI", Tahoma, sans-serif; --a11y-font-display: Arial, "Segoe UI", Tahoma, sans-serif; } html.a11y-readable body { font-family: Arial, "Segoe UI", Tahoma, sans-serif; letter-spacing: 0.03em; word-spacing: 0.08em; line-height: 1.9; } html.a11y-readable h1, html.a11y-readable h2, html.a11y-readable h3 { line-height: 1.35; } /* Links hervorheben. */ html.a11y-links a:not(.btn):not([class*="button"]) { text-decoration: underline; text-underline-offset: 0.15em; font-weight: 600; } html.a11y-links a:not(.btn):not([class*="button"]):hover, html.a11y-links a:not(.btn):not([class*="button"]):focus { outline: 2px solid var(--a11y-focus); outline-offset: 2px; } /* Animationen stoppen: alles sofort statt bewegt. !important, weil viele Projektregeln eigene Transitions/Animationen mitbringen. JS-gesteuerte Effekte kann das CSS nicht anhalten – dafür feuert das Widget das Event "a11y:motion" (siehe barrierefreiheit.js), auf das Projekte hören können. */ html.a11y-no-anim *, html.a11y-no-anim *::before, html.a11y-no-anim *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* ============================================================ 2 · Schwebende Knöpfe (Nach-oben + Barrierefreiheit) ============================================================ */ /* Gemeinsame Basis */ .a11y-fab, .a11y-to-top { position: fixed; right: clamp(1rem, 3vw, 2rem); z-index: 1200; width: 3rem; height: 3rem; border-radius: 50%; cursor: pointer; display: grid; place-items: center; box-shadow: 0 10px 24px -8px rgba(20, 40, 30, 0.45); transition: opacity .2s ease, transform .16s ease, background-color .2s ease, color .2s ease; } /* Nach-oben-Knopf: erscheint erst nach etwas Scrollen. */ .a11y-to-top { bottom: clamp(1rem, 3vw, 2rem); border: none; background: var(--a11y-accent); color: #fff; opacity: 0; transform: translateY(14px); pointer-events: none; } .a11y-to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; } .a11y-to-top:active { transform: scale(0.92); } .a11y-to-top svg { width: 1.5rem; height: 1.5rem; fill: currentColor; } @media (hover: hover) and (pointer: fine) { .a11y-to-top:hover { background: var(--a11y-accent-dark); } } /* Barrierefreiheit-Knopf: immer sichtbar, sitzt über dem Nach-oben-Knopf. Wird der Nach-oben-Knopf weggelassen (Option), rutscht dieser Wert per .a11y-fab--low nach ganz unten. */ .a11y-fab { bottom: calc(clamp(1rem, 3vw, 2rem) + 3.75rem); border: 1px solid var(--a11y-line); background: var(--a11y-surface); color: var(--a11y-accent); } .a11y-fab--low { bottom: clamp(1rem, 3vw, 2rem); } .a11y-fab svg { width: 1.6rem; height: 1.6rem; fill: currentColor; } .a11y-fab:active { transform: scale(0.92); } .a11y-fab[aria-expanded="true"] { background: var(--a11y-accent); color: #fff; } @media (hover: hover) and (pointer: fine) { .a11y-fab:hover { background: var(--a11y-accent); color: #fff; } } /* ============================================================ 3 · Das Panel ============================================================ */ .a11y-panel { position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: calc(clamp(1rem, 3vw, 2rem) + 7rem); z-index: 1210; width: min(20rem, calc(100vw - 2rem)); background: var(--a11y-surface); border: 1px solid var(--a11y-line); border-radius: var(--a11y-radius); box-shadow: 0 24px 60px -20px rgba(20, 40, 30, 0.45); padding: 1.5rem; font-family: var(--a11y-font); color: var(--a11y-ink); opacity: 0; transform: translateY(12px) scale(0.98); transform-origin: bottom right; pointer-events: none; transition: opacity .2s ease, transform .2s ease; } .a11y-panel[data-open] { opacity: 1; transform: none; pointer-events: auto; } .a11y-panel-title { font-family: var(--a11y-font-display); font-size: 1.0625rem; font-weight: 700; margin: 0 0 1rem; color: var(--a11y-ink); } .a11y-group { margin-bottom: 1rem; } .a11y-group:last-child { margin-bottom: 0; } .a11y-group-label { display: block; font-size: 0.9375rem; font-weight: 600; color: var(--a11y-ink-soft); margin-bottom: 0.5rem; } .a11y-fontsize { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.5rem; } .a11y-fontsize button, .a11y-toggle, .a11y-reset { font-family: var(--a11y-font); font-size: 0.9375rem; border: 1px solid var(--a11y-line); border-radius: var(--a11y-radius-sm); background: var(--a11y-bg); color: var(--a11y-ink); cursor: pointer; padding: 0.75rem; transition: background-color .2s ease, border-color .2s ease, color .2s ease; } .a11y-fontsize button { display: grid; place-items: center; min-height: 2.75rem; } .a11y-fontsize button svg { width: 1.1rem; height: 1.1rem; fill: currentColor; } .a11y-toggle { display: flex; align-items: center; gap: 0.75rem; width: 100%; text-align: left; margin-bottom: 0.5rem; } .a11y-toggle:last-child { margin-bottom: 0; } .a11y-toggle-icon { flex: 0 0 auto; width: 1.75rem; height: 1.75rem; display: grid; place-items: center; } .a11y-toggle-icon svg { width: 1.25rem; height: 1.25rem; fill: currentColor; } .a11y-toggle-label { flex: 1 1 auto; } .a11y-toggle-state { flex: 0 0 auto; font-size: 0.8125rem; font-weight: 700; color: var(--a11y-ink-soft); text-transform: uppercase; letter-spacing: 0.04em; } .a11y-toggle[aria-pressed="true"] { background: var(--a11y-accent-soft); border-color: var(--a11y-accent); color: var(--a11y-accent-dark); } .a11y-toggle[aria-pressed="true"] .a11y-toggle-state { color: var(--a11y-accent-dark); } .a11y-reset { width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 1.5rem; font-weight: 600; } .a11y-reset svg { width: 1.05rem; height: 1.05rem; fill: currentColor; } @media (hover: hover) and (pointer: fine) { .a11y-fontsize button:hover, .a11y-toggle:hover, .a11y-reset:hover { border-color: var(--a11y-accent); color: var(--a11y-accent-dark); } } .a11y-fab:focus-visible, .a11y-to-top:focus-visible, .a11y-panel button:focus-visible { outline: 3px solid var(--a11y-focus); outline-offset: 2px; } /* Weniger Bewegung respektieren */ @media (prefers-reduced-motion: reduce) { .a11y-fab, .a11y-to-top, .a11y-panel { transition: opacity .2s ease; } .a11y-fab:active, .a11y-to-top:active { transform: none; } }