/* * nt-ai Accessibility Preferences Widget (Stufe 1) + site-wide system-preference * guards. Loaded on every frontend page. * * Two parts: * 1. The widget chrome (launcher + panel) and the preference "feature layers" * that react to html[data-nt-*] attributes set by a11y-widget.js. * 2. Site-wide honouring of system preferences the theme itself does not cover * yet: prefers-reduced-motion (the jQuery-waypoint .animate-box fade-ins) and * a couple of forced-colors / focus-visibility safeguards. * * Presentation is configured in the backend (Site → Settings → Barrierefreiheit), * delivered as html[data-nt-a11y-position] / [data-nt-a11y-label] attributes. * * Design intent: no DOM rewriting. Personalisation is pure CSS driven by data * attributes, so it degrades safely and never fights the user's AT. */ /* ══════════════════════════════════════════════════════════════════════ 1a. Feature layers — applied via html[data-nt-*] ══════════════════════════════════════════════════════════════════════ */ /* Text size (page zoom, reflow-friendly per WCAG 1.4.4/1.4.10) and the composed colour filter (contrast / saturation / colour-deficiency) are applied by a11y-widget.js as inline styles on the configurable content element (Site setting ntai.a11yWidget.scaleTarget, default #maincontent) — NOT on . Rationale: zooming/filtering the root displaces the fixed launcher, sticky header and back-to-top button, and SVG url() filters (colour-deficiency) are silently ignored on the root in Blink/WebKit. The widget and the theme's fixed chrome live outside that element, so they stay unaffected. No CSS rule needed here — see scaleTarget()/applyScale()/applyFilter() in the JS. */ /* Blue-light filter: a warm fixed overlay below the widget. Opacity = strength. */ .nt-a11y-bluefilter { position: fixed; inset: 0; background: #ff8a1e; mix-blend-mode: multiply; pointer-events: none; z-index: 2147483640; opacity: 0; transition: opacity 0.2s ease; } /* Bigger mouse cursor. */ html[data-nt-cursor="big"], html[data-nt-cursor="big"] * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M8 4l30 22-13 2 8 15-6 3-8-15-11 8z' fill='%23fff' stroke='%23000' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 6 4, auto !important; } html[data-nt-cursor="big"] a, html[data-nt-cursor="big"] button, html[data-nt-cursor="big"] [role="button"], html[data-nt-cursor="big"] input, html[data-nt-cursor="big"] label, html[data-nt-cursor="big"] select { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M18 4v22l6-6 5 11 5-2-5-11h8z' fill='%23fff' stroke='%23000' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 16 4, pointer !important; } /* Focus highlight (keyboard navigation aid). */ html[data-nt-focus="on"] :focus-visible { outline: 3px solid #1c5bd8 !important; outline-offset: 2px !important; box-shadow: 0 0 0 3px rgba(28, 91, 216, 0.4) !important; } /* Dark mode is a NATIVE theme (nt-dark-theme.css in the sitepackage), toggled by this widget via html[data-nt-theme="dark"] — not a CSS filter/invert. */ /* Text spacing — WCAG 1.4.12 targets (excluding icon fonts). */ html[data-nt-spacing="on"] p, html[data-nt-spacing="on"] li, html[data-nt-spacing="on"] dd, html[data-nt-spacing="on"] dt, html[data-nt-spacing="on"] blockquote, html[data-nt-spacing="on"] figcaption, html[data-nt-spacing="on"] td { line-height: 1.6 !important; word-spacing: 0.16em !important; } html[data-nt-spacing="on"] p, html[data-nt-spacing="on"] li { letter-spacing: 0.12em !important; } html[data-nt-spacing="on"] p { margin-bottom: 2em !important; } /* Link highlighting. */ html[data-nt-links="on"] a:not(.nt-a11y-widget a) { text-decoration: underline !important; text-underline-offset: 2px; text-decoration-thickness: 2px !important; font-weight: 700; } html[data-nt-links="on"] a:not(.btn):not(.nav-link):not(.nt-a11y-widget a) { background: rgba(255, 235, 0, 0.35); box-shadow: 0 0 0 2px rgba(255, 235, 0, 0.35); } /* Hide content images. Keeps inline SVG icons, the widget, and branding/chrome (logo, navbar, hero/header, footer) so the page stays recognisable. */ html[data-nt-images="hidden"] img:not(.nt-a11y-widget img):not(.logo img):not(.navbar img):not(header img):not(.header img):not(.main-footer img):not([class*="logo"] img), html[data-nt-images="hidden"] picture:not(.nt-a11y-widget picture):not(.navbar picture):not(header picture):not(.main-footer picture) { visibility: hidden !important; } html[data-nt-images="hidden"] #maincontent [style*="background-image"]:not(.nt-a11y-widget *) { background-image: none !important; } /* Easier-to-read font. Atkinson Hyperlegible is not bundled; the stack falls back to widely available high-legibility system fonts. Icon fonts keep their own family so glyphs don't break. */ html[data-nt-font="readable"] body, html[data-nt-font="readable"] p, html[data-nt-font="readable"] li, html[data-nt-font="readable"] a, html[data-nt-font="readable"] span, html[data-nt-font="readable"] td, html[data-nt-font="readable"] label, html[data-nt-font="readable"] h1, html[data-nt-font="readable"] h2, html[data-nt-font="readable"] h3, html[data-nt-font="readable"] h4, html[data-nt-font="readable"] h5, html[data-nt-font="readable"] h6, html[data-nt-font="readable"] button:not(.nt-a11y-widget button) { font-family: "Atkinson Hyperlegible", Verdana, "Segoe UI", Tahoma, sans-serif !important; } html[data-nt-font="readable"] .fa, html[data-nt-font="readable"] .fas, html[data-nt-font="readable"] .far, html[data-nt-font="readable"] .fab, html[data-nt-font="readable"] [class*="icon-"], html[data-nt-font="readable"] [class^="icon-"] { font-family: revert !important; } /* Reading ruler — a horizontal band that follows the cursor. */ .nt-a11y-guide { position: fixed; left: 0; width: 100%; height: 40px; transform: translateY(-50%); pointer-events: none; z-index: 2147483646; background: rgba(255, 235, 0, 0.18); border-top: 2px solid rgba(0, 0, 0, 0.55); border-bottom: 2px solid rgba(0, 0, 0, 0.55); } /* ══════════════════════════════════════════════════════════════════════ 1b. Reduced motion — manual toggle (mirrors the media query below) ══════════════════════════════════════════════════════════════════════ */ html[data-nt-motion="reduce"] *, html[data-nt-motion="reduce"] *::before, html[data-nt-motion="reduce"] *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } html[data-nt-motion="reduce"] .animate-box, html[data-nt-motion="reduce"] .animated { opacity: 1 !important; } /* ══════════════════════════════════════════════════════════════════════ 2. Site-wide system-preference guards (independent of the widget) ══════════════════════════════════════════════════════════════════════ */ /* The theme's own scroll-triggered fade-ins (.animate-box → animate.css classes via jQuery Waypoints) do not honour reduced motion. Neutralise them so users who asked for no motion still see the content, without animation. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .animate-box, .animated { opacity: 1 !important; } } /* Honour a stronger-contrast system preference: make links unmistakable and focus/borders more prominent. Conservative — no colour scheme change. */ @media (prefers-contrast: more) { a:not(.btn):not(.nav-link) { text-decoration: underline !important; text-underline-offset: 2px; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid currentColor !important; outline-offset: 2px; } .btn, .card, .form-control, input, textarea, select { border-width: 2px !important; } } /* Keep focus clearly visible everywhere, also in Windows High Contrast Mode, and make sure icon-only / custom-coloured controls keep a visible boundary. */ @media (forced-colors: active) { a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid Highlight !important; outline-offset: 2px; } .btn, .card, .form-control { border: 1px solid ButtonText; } .nt-a11y-launcher, .nt-a11y-panel { border: 1px solid ButtonText; } .nt-a11y-toggle.is-on { outline: 2px solid Highlight; } } /* ══════════════════════════════════════════════════════════════════════ 3. Widget chrome (all px/em — immune to the html font-size scaling above) ══════════════════════════════════════════════════════════════════════ */ .nt-a11y-widget { position: fixed; z-index: 2147483645; right: var(--nt-a11y-offset-x, 16px); bottom: var(--nt-a11y-offset-y, 16px); font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.4; } /* Position variants (Site → Settings → Barrierefreiheit). Default = bottom-right. Offsets come fully from the backend (Abstand zum Rand / oben-unten) as CSS custom properties on , so the editor controls the exact placement. */ html[data-nt-a11y-position="bottom-left"] .nt-a11y-widget { left: var(--nt-a11y-offset-x, 16px); right: auto; bottom: var(--nt-a11y-offset-y, 16px); top: auto; } html[data-nt-a11y-position="top-right"] .nt-a11y-widget { right: var(--nt-a11y-offset-x, 16px); left: auto; top: var(--nt-a11y-offset-y, 16px); bottom: auto; } html[data-nt-a11y-position="top-left"] .nt-a11y-widget { left: var(--nt-a11y-offset-x, 16px); right: auto; top: var(--nt-a11y-offset-y, 16px); bottom: auto; } /* Dezent launcher: neutral circle with a brand-coloured icon; label optional. */ .nt-a11y-launcher { display: inline-flex; align-items: center; gap: 8px; background: #ffffff; color: #1c5bd8; border: 1px solid #cdd3df; border-radius: 999px; padding: 9px; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); } .nt-a11y-launcher:hover { background: #f4f7ff; border-color: #1c5bd8; } .nt-a11y-launcher:focus-visible { outline: 3px solid #1c5bd8; outline-offset: 2px; } .nt-a11y-launcher svg { width: var(--nt-a11y-size, 26px); height: var(--nt-a11y-size, 26px); display: block; } .nt-a11y-launcher-lbl { display: none; font-size: 14px; font-weight: 600; white-space: nowrap; padding-right: 6px; } html[data-nt-a11y-label="1"] .nt-a11y-launcher-lbl, html[data-nt-a11y-label="true"] .nt-a11y-launcher-lbl { display: inline; } html[data-nt-a11y-label="1"] .nt-a11y-launcher, html[data-nt-a11y-label="true"] .nt-a11y-launcher { padding: 8px 14px 8px 10px; } /* Explanatory tooltip — shown on hover/focus of the launcher and once on the first visit (JS adds .is-shown). Sits above the launcher (below for top positions), aligned to the widget's corner. */ .nt-a11y-tip { position: absolute; bottom: calc(100% + 12px); right: 0; left: auto; top: auto; width: 250px; max-width: 72vw; background: #111; color: #fff; border-radius: 10px; padding: 11px 13px; font-size: 13px; line-height: 1.45; text-align: left; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s; pointer-events: none; } .nt-a11y-tip-title { display: block; font-size: 14px; font-weight: 700; margin-bottom: 3px; } .nt-a11y-tip-sc { display: block; margin-top: 7px; font-size: 11px; opacity: 0.65; } .nt-a11y-tip::after { content: ""; position: absolute; top: 100%; right: 22px; border: 7px solid transparent; border-top-color: #111; } .nt-a11y-launcher:hover ~ .nt-a11y-tip, .nt-a11y-launcher:focus-visible ~ .nt-a11y-tip, .nt-a11y-tip.is-shown { opacity: 1; visibility: visible; transform: none; } .nt-a11y-launcher[aria-expanded="true"] ~ .nt-a11y-tip { opacity: 0 !important; visibility: hidden !important; } html[data-nt-a11y-position$="left"] .nt-a11y-tip { left: 0; right: auto; } html[data-nt-a11y-position$="left"] .nt-a11y-tip::after { right: auto; left: 22px; } html[data-nt-a11y-position^="top"] .nt-a11y-tip { top: calc(100% + 12px); bottom: auto; } html[data-nt-a11y-position^="top"] .nt-a11y-tip::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #111; } @media (prefers-reduced-motion: reduce) { .nt-a11y-tip { transition: none !important; transform: none !important; } } .nt-a11y-panel { position: absolute; right: 0; left: auto; bottom: calc(100% + 10px); top: auto; width: 320px; max-width: calc(100vw - 32px); /* Die Hoehe muss sich am tatsaechlich freien Platz ueber dem Knopf orientieren, nicht an einem Anteil der Fensterhoehe: Bei einem iPad quer (695 px sichtbare Hoehe) ragte das Panel mit 80vh oben aus dem Bild und nahm Ueberschrift und Schliessen-Knopf mit. Abgezogen werden der Abstand zum Rand, der Knopf, der Zwischenraum und etwas Luft. dvh statt vh, weil mobile Browser ihre Leisten ein- und ausblenden. */ --nt-a11y-panel-luft: calc(var(--nt-a11y-offset-y, 16px) + var(--nt-a11y-size, 36px) + 20px + 10px + 16px); max-height: min(calc(100vh - var(--nt-a11y-panel-luft)), 640px); max-height: min(calc(100dvh - var(--nt-a11y-panel-luft)), 640px); overflow-y: auto; overscroll-behavior: contain; background: #fff; color: #1b1b1b; border: 1px solid #d0d0d5; border-radius: 12px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.28); padding: 14px 16px 16px; font-size: 16px; } /* Panel opens towards the viewport centre depending on the launcher corner. */ html[data-nt-a11y-position^="top"] .nt-a11y-panel { top: calc(100% + 10px); bottom: auto; } html[data-nt-a11y-position$="left"] .nt-a11y-panel { left: 0; right: auto; } .nt-a11y-panel[hidden] { display: none; } .nt-a11y-head { display: flex; align-items: center; justify-content: space-between; } .nt-a11y-title { font-size: 1.15em; margin: 0; } .nt-a11y-head-actions { display: inline-flex; align-items: center; gap: 2px; } .nt-a11y-close, .nt-a11y-reset-icon { background: transparent; border: 0; font-size: 1.15em; line-height: 1; cursor: pointer; color: #444; padding: 6px; border-radius: 6px; } .nt-a11y-close:hover, .nt-a11y-reset-icon:hover { background: #eee; } .nt-a11y-reset-icon { font-size: 1.25em; } .nt-a11y-reset-icon:focus-visible, .nt-a11y-close:focus-visible, .nt-a11y-toggle:focus-visible, .nt-a11y-step:focus-visible, .nt-a11y-reset:focus-visible { outline: 3px solid #1c5bd8; outline-offset: 2px; } .nt-a11y-intro { font-size: 0.82em; color: #555; margin: 5px 0 12px; } .nt-a11y-list { display: flex; flex-direction: column; gap: 6px; } .nt-a11y-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .nt-a11y-row-lbl { font-size: 0.92em; font-weight: 500; } .nt-a11y-fontbtns { display: inline-flex; gap: 4px; } .nt-a11y-step { min-width: 38px; padding: 6px 8px; cursor: pointer; background: #f2f3f5; border: 1px solid #ccced3; border-radius: 6px; font-size: 0.9em; color: #1b1b1b; } .nt-a11y-step:hover { background: #e6e8eb; } .nt-a11y-toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; text-align: left; cursor: pointer; background: #f7f8fa; border: 1px solid #e2e3e8; border-radius: 8px; padding: 9px 11px; font-size: 0.92em; color: #1b1b1b; } .nt-a11y-toggle:hover { background: #eef0f4; } .nt-a11y-toggle.is-on { background: #e7f0ff; border-color: #1c5bd8; } .nt-a11y-toggle-state { flex-shrink: 0; font-size: 0.72em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: #777; border: 1px solid #ccc; border-radius: 999px; padding: 2px 8px; } .nt-a11y-toggle.is-on .nt-a11y-toggle-state { color: #fff; background: #1c5bd8; border-color: #1c5bd8; } /* Adjustable control: toggle + intensity slider (shown while on). */ .nt-a11y-adjust { display: flex; flex-direction: column; gap: 4px; } .nt-a11y-slider { display: flex; align-items: center; gap: 8px; padding: 2px 4px 4px 11px; } .nt-a11y-slider[hidden] { display: none; } .nt-a11y-slider-lbl { font-size: 0.78em; color: #666; white-space: nowrap; } .nt-a11y-slider input[type="range"] { flex: 1; min-width: 0; accent-color: #1c5bd8; } .nt-a11y-slider-val { font-size: 0.78em; font-variant-numeric: tabular-nums; min-width: 3.2em; text-align: right; color: #333; } .nt-a11y-cb .nt-a11y-toggle-state { text-transform: none; } /* Per-item description tooltip (shown beside the panel on hover/focus). */ .nt-a11y-item-tip { position: fixed; max-width: 230px; background: #111; color: #fff; border-radius: 8px; padding: 9px 11px; font-size: 12.5px; line-height: 1.4; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); opacity: 0; visibility: hidden; transition: opacity 0.12s ease, visibility 0.12s; pointer-events: none; z-index: 2147483647; } .nt-a11y-item-tip.is-shown { opacity: 1; visibility: visible; } @media (prefers-reduced-motion: reduce) { .nt-a11y-item-tip { transition: none !important; } } .nt-a11y-reset { margin-top: 12px; width: 100%; cursor: pointer; background: #fff; border: 1px solid #c33; color: #c33; border-radius: 8px; padding: 8px; font-size: 0.9em; font-weight: 600; } .nt-a11y-reset:hover { background: #fdecec; } .nt-a11y-hint { font-size: 0.72em; color: #777; margin: 12px 0 0; } /* The widget honours reduced motion for its own (minimal) transitions. */ @media (prefers-reduced-motion: reduce) { .nt-a11y-launcher, .nt-a11y-toggle, .nt-a11y-step, .nt-a11y-close { transition: none !important; } } /* Dark chrome for the widget when the OS is in dark mode (independent of the site's own — not yet existing — dark theme). */ @media (prefers-color-scheme: dark) { .nt-a11y-launcher { background: #23242a; color: #7aa7ff; border-color: #3a3b42; } .nt-a11y-launcher:hover { background: #2c2d34; } .nt-a11y-panel { background: #23242a; color: #f0f0f2; border-color: #3a3b42; } .nt-a11y-intro, .nt-a11y-hint { color: #b9bac0; } .nt-a11y-close { color: #ccc; } .nt-a11y-close:hover { background: #33343b; } .nt-a11y-step { background: #33343b; border-color: #4a4b52; color: #f0f0f2; } .nt-a11y-step:hover { background: #3d3e46; } .nt-a11y-toggle { background: #2c2d34; border-color: #3a3b42; color: #f0f0f2; } .nt-a11y-toggle:hover { background: #34353d; } .nt-a11y-toggle.is-on { background: #26364f; border-color: #4d84ff; } .nt-a11y-reset { background: #2c2d34; } .nt-a11y-slider-lbl { color: #b9bac0; } .nt-a11y-slider-val { color: #e6e7ea; } } /* ══════════════════════════════════════════════════════════════════════ 4. Hardening — isolate the widget from the site theme ══════════════════════════════════════════════════════════════════════ The theme has generic button:hover / a:hover rules (colour changes, ::after effects, letter-spacing) that would bleed into the widget's