/* melucio-a11y.css — Seiten-Wirkungen des -Menues. * * Im der Seite einbinden (das Bedien-Panel selbst kommt aus * melucio-a11y.js / Shadow DOM). Diese Datei liefert die universellen Teile: * 1. die @font-face der beiden Lese-Schriften (self-hosted, DSGVO-konform), * 2. die :root[data-font] / :root[data-spacing] Variablen-Zuordnung. * * INTEGRATIONS-VERTRAG (das Projekt muss diese Variablen anwenden): * html { font-family: var(--body-font, ); } * body { line-height: var(--read-lh, ); * letter-spacing: var(--read-ls, normal); } * html { font-size: calc(px * var(--font-scale, 1)); } * Die High-Contrast-Palette (:root[data-contrast='high'] { --fg: ...; ... }) * bleibt bewusst beim Projekt — jede Marke hat ihre eigene Palette. * * SCHRIFT-DATEIEN: die sechs woff2 unter /fonts/ selbst hosten. Quelle: * npm i @fontsource/atkinson-hyperlegible @fontsource/opendyslexic * und die woff2 nach public/fonts/ kopieren. */ @font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/atkinson-hyperlegible-latin-400-normal.woff2') format('woff2'); } @font-face { font-family: 'Atkinson Hyperlegible'; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/atkinson-hyperlegible-latin-400-italic.woff2') format('woff2'); } @font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/atkinson-hyperlegible-latin-700-normal.woff2') format('woff2'); } @font-face { font-family: 'OpenDyslexic'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/opendyslexic-latin-400-normal.woff2') format('woff2'); } @font-face { font-family: 'OpenDyslexic'; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/opendyslexic-latin-400-italic.woff2') format('woff2'); } @font-face { font-family: 'OpenDyslexic'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/opendyslexic-latin-700-normal.woff2') format('woff2'); } /* Lese-Schriftart umschaltbar. Default = unset (System-Stack des Projekts). */ :root[data-font='hyper'] { --body-font: 'Atkinson Hyperlegible', system-ui, sans-serif; } :root[data-font='dyslexic'] { --body-font: 'OpenDyslexic', system-ui, sans-serif; } /* Textabstand umschaltbar (Zeilenhoehe + Buchstabenabstand). */ :root[data-spacing='loose'] { --read-lh: 1.95; --read-ls: 0.02em; } :root[data-spacing='xloose'] { --read-lh: 2.2; --read-ls: 0.045em; }