/* ============================================================================ * Barrierefreiheits-Werkzeugleiste — Light-DOM-Styles zu . * * Zwei klar getrennte Teile: * TEIL A Die Leiste selbst (.pl-a11y*) — Position, Knopf, Panel, Schalter. * TEIL B Die Darstellungs-Modi (html.a11y-*) — das, was die Schalter bewirken. * * Zuständigkeiten: * Komponente (JS): nur Verhalten (Öffnen/Schließen, Fokus, Speichern) und das * Setzen der Zustandsklassen bzw. der Skalierungs-Variablen * am . KEIN Eingriff in die Semantik der Seite. * DIESE Datei: Aussehen der Leiste + Wirkung der Modi. * Theme: NUR die --pl-a11y-*-Slots überschreiben. * * Es gibt hier bewusst KEINE Sektions-Breite, kein Sektions-Padding und keinen * Sektions-Hintergrund — das Element ist fixiert und liegt außerhalb des * Frame-Systems (harte Workspace-Regel). * * Zur Stapelebene: Standard ist 1020, also UNTER dem fixierten Header (1030). * Nur solange das Panel offen ist, hebt sich die Leiste selbst auf 1040 — der * Header behält seine Ebene, es wird nichts am Header verschoben. Geschlossen * ist die Leiste exakt so groß wie ihr Knopf; es gibt keine unsichtbare Fläche, * die Klicks abfangen könnte. * ========================================================================== */ /* Ohne JavaScript bliebe ein toter Knopf stehen — dann lieber nichts zeigen. */ atomic-a11y-toolbar:not(:defined) { display: none; } /* ========================================================================== * TEIL A — die Leiste * ====================================================================== */ atomic-a11y-toolbar.pl-a11y { position: fixed; top: var(--pl-a11y-top, 50%); transform: translateY(-50%); z-index: var(--pl-a11y-z-index, 1020); display: flex; align-items: center; gap: var(--pl-a11y-gap, .5rem); /* Nur Optik-Defaults; alles Konfigurierbare kommt aus dem FlexForm. */ --pl-a11y-surface: var(--pl-a11y-trigger-bg, var(--bs-primary, #1f4f3f)); --pl-a11y-on-surface: var(--pl-a11y-trigger-color, var(--bs-white, #fff)); } atomic-a11y-toolbar.pl-a11y--left { left: 0; flex-direction: row; } atomic-a11y-toolbar.pl-a11y--right { right: 0; flex-direction: row-reverse; } /* BEWUSST KEINE Anhebung der Stapelebene beim Öffnen. Gemessen 28.08.2026: mit einer höheren Ebene lag das offene Panel über einem aufgeklappten Mega-Menü-Panel — ein Eintrag darunter war per Klick nicht mehr erreichbar (elementFromPoint lieferte das Panel, keine Navigation). Die Navigation gewinnt deshalb immer: die Leiste bleibt unter der Header-Ebene. Umgekehrt ist der Fall harmlos — das Mega-Menü klappt nur auf, solange der Zeiger in der Navigation steht, also gerade nicht im Panel. */ /* --- Auslöser ------------------------------------------------------------- */ .pl-a11y .pl-a11y__trigger { display: inline-flex; align-items: center; gap: .5rem; flex: 0 0 auto; margin: 0; padding: var(--pl-a11y-trigger-padding, .625rem); border: 0; background: var(--pl-a11y-surface); color: var(--pl-a11y-on-surface); cursor: pointer; line-height: 1; font: inherit; } .pl-a11y--left .pl-a11y__trigger { border-start-end-radius: var(--pl-a11y-radius, 0); border-end-end-radius: var(--pl-a11y-radius, 0); } .pl-a11y--right .pl-a11y__trigger { border-start-start-radius: var(--pl-a11y-radius, 0); border-end-start-radius: var(--pl-a11y-radius, 0); } .pl-a11y .pl-a11y__icon { display: inline-flex; flex: 0 0 auto; width: var(--pl-a11y-icon-size, 24px); height: var(--pl-a11y-icon-size, 24px); } .pl-a11y .pl-a11y__icon svg { width: 100%; height: 100%; display: block; } .pl-a11y .pl-a11y__trigger-label { font-size: var(--pl-a11y-trigger-label-size, .875rem); white-space: nowrap; } /* --- Panel --------------------------------------------------------------- */ .pl-a11y .pl-a11y__panel { flex: 0 1 auto; width: var(--pl-a11y-panel-width, min(19rem, calc(100vw - 5rem))); /* Die Leiste ist um ihren Ankerpunkt (Default: 50 % der Höhe) ZENTRIERT — das Panel wächst also nach oben und unten gleichmäßig. Damit seine Oberkante nicht unter einem fixierten Seitenkopf verschwindet, wird die Höhe zusätzlich auf `100vh − 2 × Sicherheitsabstand` gedeckelt. Ein Theme setzt `--pl-a11y-safe-top` auf seine Kopfhöhe. Ohne den Deckel rutscht der Panel-Kopf (Titel + Schließen) bei großer Schriftskalierung hinter den Seitenkopf — gemessen 28.08.2026 bei 160 %. */ max-height: min( var(--pl-a11y-panel-max-height, calc(100vh - 3rem)), calc(100vh - 2 * var(--pl-a11y-safe-top, 1.5rem)) ); overflow-y: auto; overscroll-behavior: contain; padding: var(--pl-a11y-panel-padding, 1rem 1.125rem 1.125rem); background: var(--pl-a11y-panel-bg, var(--bs-white, #fff)); color: var(--pl-a11y-panel-color, var(--bs-body-color, #222)); border: var(--pl-a11y-panel-border, 1px solid rgba(0, 0, 0, .14)); border-radius: var(--pl-a11y-panel-radius, var(--pl-a11y-radius, 0)); box-shadow: var(--pl-a11y-panel-shadow, 0 18px 44px -20px rgba(0, 0, 0, .4)); } .pl-a11y .pl-a11y__panel[hidden] { display: none; } .pl-a11y .pl-a11y__head { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; margin-bottom: .75rem; } /* Der Panel-Titel ist bewusst KEIN `h*` (die Leiste soll die Dokument-Gliederung nicht verändern) — damit kollidiert seine Größe auch nicht mit den Überschriften-Slots `hN-font-size` aus plate_bootstrap. Hier steht eine UI-Stufe, für die es keinen Slot gibt (Skill css, 2d). */ .pl-a11y .pl-a11y__title { display: block; margin: 0; font-size: var(--pl-a11y-title-size, 1rem); font-weight: 700; line-height: 1.25; } .pl-a11y .pl-a11y__close { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; margin: -.25rem -.25rem 0 0; padding: 0; border: 0; border-radius: var(--pl-a11y-radius, 0); background: transparent; color: inherit; cursor: pointer; } .pl-a11y .pl-a11y__group + .pl-a11y__group { margin-top: 1rem; } .pl-a11y .pl-a11y__group-title { display: block; margin-bottom: .375rem; font-size: var(--pl-a11y-group-title-size, .75rem); text-transform: uppercase; letter-spacing: .04em; opacity: .7; } /* --- Schriftgröße -------------------------------------------------------- */ .pl-a11y .pl-a11y__fontrow { display: flex; align-items: center; flex-wrap: wrap; gap: .375rem; } .pl-a11y .pl-a11y__stepper { display: inline-flex; align-items: center; justify-content: center; /* 2.5rem = komfortable Zielgröße auch bei Touch. */ min-width: 2.5rem; min-height: 2.5rem; padding: 0 .5rem; border: 1px solid var(--pl-a11y-line, rgba(0, 0, 0, .2)); border-radius: var(--pl-a11y-radius, 0); background: transparent; color: inherit; font: inherit; font-weight: 600; cursor: pointer; } .pl-a11y .pl-a11y__stepper[disabled] { opacity: .4; cursor: default; } .pl-a11y .pl-a11y__fontvalue { min-width: 3.5rem; text-align: center; font-variant-numeric: tabular-nums; font-size: .875rem; } .pl-a11y .pl-a11y__link-button { /* Eigene Zeile unter den Steppern — sonst rutscht der Text je nach Beschriftungslänge mal neben, mal unter die Knöpfe. */ flex: 1 0 100%; text-align: start; padding: .25rem 0; border: 0; background: none; color: inherit; font: inherit; font-size: .8125rem; text-decoration: underline; cursor: pointer; } /* --- Schalter ------------------------------------------------------------ */ .pl-a11y .pl-a11y__list { margin: 0; padding: 0; list-style: none; } .pl-a11y .pl-a11y__item + .pl-a11y__item { margin-top: .125rem; } .pl-a11y .pl-a11y__switch { display: flex; align-items: center; gap: .625rem; width: 100%; min-height: 2.5rem; padding: .25rem 0; border: 0; background: none; color: inherit; font: inherit; font-size: .875rem; text-align: start; cursor: pointer; } .pl-a11y .pl-a11y__switch-track { position: relative; flex: 0 0 auto; width: 2.25rem; height: 1.25rem; border: 1px solid var(--pl-a11y-line, rgba(0, 0, 0, .2)); border-radius: 1rem; background: var(--pl-a11y-switch-off, rgba(0, 0, 0, .08)); transition: background-color .18s ease; } .pl-a11y .pl-a11y__switch-knob { position: absolute; top: 50%; inset-inline-start: .1875rem; width: .875rem; height: .875rem; border-radius: 50%; background: var(--pl-a11y-switch-knob, #fff); box-shadow: 0 1px 2px rgba(0, 0, 0, .35); transform: translateY(-50%); transition: inset-inline-start .18s ease; } .pl-a11y .pl-a11y__switch[aria-pressed="true"] .pl-a11y__switch-track { background: var(--pl-a11y-switch-on, var(--pl-a11y-surface)); border-color: transparent; } .pl-a11y .pl-a11y__switch[aria-pressed="true"] .pl-a11y__switch-knob { inset-inline-start: 1.125rem; } .pl-a11y .pl-a11y__reset { display: block; width: 100%; margin-top: 1rem; padding: .625rem .75rem; border: 1px solid var(--pl-a11y-line, rgba(0, 0, 0, .2)); border-radius: var(--pl-a11y-radius, 0); background: transparent; color: inherit; font: inherit; font-size: .875rem; cursor: pointer; } .pl-a11y .pl-a11y__note { margin: .75rem 0 0; font-size: .75rem; line-height: 1.4; opacity: .75; } /* --- Fokus & Bewegung ---------------------------------------------------- */ .pl-a11y :focus-visible { outline: var(--pl-a11y-focus-width, 2px) solid var(--pl-a11y-focus-color, currentColor); outline-offset: 2px; } /* Nur für Screenreader — nicht `display:none`, das nähme den Text aus dem Accessibility-Tree. */ .pl-a11y .pl-a11y__sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { .pl-a11y .pl-a11y__switch-track, .pl-a11y .pl-a11y__switch-knob { transition: none; } } /* ========================================================================== * TEIL B — die Darstellungs-Modi * * Diese Regeln greifen bewusst breit und mit `!important`: sie werden vom * Besucher ausdrücklich eingeschaltet und müssen dann auch gegen Theme- und * Block-CSS gewinnen. Sie ändern ausschließlich Darstellungs-Eigenschaften * (Farbe, Fläche, Schriftfamilie, Unterstreichung) — kein Layout, keine * Sichtbarkeit, keine Semantik. * ====================================================================== */ /* --- Schriftskalierung --------------------------------------------------- Skaliert die Wurzel-Schriftgröße; alles in rem folgt automatisch. Die Variable setzt das Skript, die Rechnung steht hier. */ html.a11y-font-scaled { font-size: calc(100% * var(--pl-a11y-font-scale, 1)); } /* --- Graustufen / Invertierung ------------------------------------------- `filter` am WURZELELEMENT ist der einzige Ort, an dem das gefahrlos geht: an (oder irgendeinem anderen Vorfahren) würde es zum Bezugsrahmen für `position: fixed` — der fixierte Header würde beim Scrollen wegwandern. Am ist das nachgemessen NICHT der Fall. */ html.a11y-grayscale { filter: grayscale(1); } html.a11y-invert { filter: invert(1) hue-rotate(180deg); } /* Beide zusammen: eine gemeinsame, spezifischere Regel — sonst gewönne nur eine der beiden filter-Deklarationen. */ html.a11y-grayscale.a11y-invert { filter: grayscale(1) invert(1) hue-rotate(180deg); } /* Fotos, Videos und eingebettete Inhalte zurückdrehen: ein invertiertes Foto ist nicht lesbarer, nur unkenntlich. Die Leiste selbst ebenfalls, damit sie in jedem Modus wie vorgesehen aussieht. */ html.a11y-invert img, html.a11y-invert video, html.a11y-invert iframe, html.a11y-invert atomic-a11y-toolbar { filter: invert(1) hue-rotate(180deg); } html.a11y-grayscale.a11y-invert img, html.a11y-grayscale.a11y-invert video, html.a11y-grayscale.a11y-invert iframe, html.a11y-grayscale.a11y-invert atomic-a11y-toolbar { filter: grayscale(1) invert(1) hue-rotate(180deg); } /* --- Hoher Kontrast ------------------------------------------------------ */ html.a11y-contrast body, html.a11y-contrast body *:not(svg):not(svg *) { background-color: #000 !important; color: #fff !important; border-color: #fff !important; } html.a11y-contrast a, html.a11y-contrast a *:not(svg):not(svg *) { color: #ffe000 !important; } /* --- Heller Hintergrund -------------------------------------------------- */ html.a11y-light-bg body, html.a11y-light-bg body *:not(svg):not(svg *) { background-color: #fff !important; color: #1b1b1b !important; border-color: rgba(0, 0, 0, .35) !important; } html.a11y-light-bg a, html.a11y-light-bg a *:not(svg):not(svg *) { color: #0b3d91 !important; } /* Maskierte SVG-Icons (`.mask-svg`, Workspace-Konvention) beziehen ihre FARBE aus `background-color` — die pauschale Flächenregel oben würde sie sonst in der Hintergrundfarbe malen, also unsichtbar machen. */ html.a11y-contrast .mask-svg, html.a11y-contrast [style*="mask-image"] { background-color: #fff !important; } html.a11y-light-bg .mask-svg, html.a11y-light-bg [style*="mask-image"] { background-color: #1b1b1b !important; } /* Die Leiste bleibt in beiden Farbmodi bedienbar: Panel und Knopf behalten eine sichtbare Kante, die Schalter behalten ihren An/Aus-Unterschied. */ html.a11y-contrast .pl-a11y .pl-a11y__panel, html.a11y-contrast .pl-a11y .pl-a11y__trigger, html.a11y-light-bg .pl-a11y .pl-a11y__panel, html.a11y-light-bg .pl-a11y .pl-a11y__trigger { border: 1px solid currentColor !important; } html.a11y-contrast .pl-a11y .pl-a11y__switch[aria-pressed="true"] .pl-a11y__switch-track, html.a11y-light-bg .pl-a11y .pl-a11y__switch[aria-pressed="true"] .pl-a11y__switch-track { background-color: currentColor !important; } html.a11y-contrast .pl-a11y .pl-a11y__switch-track, html.a11y-light-bg .pl-a11y .pl-a11y__switch-track { border: 1px solid currentColor !important; } html.a11y-contrast .pl-a11y .pl-a11y__switch[aria-pressed="true"] .pl-a11y__switch-knob { background-color: #000 !important; } html.a11y-light-bg .pl-a11y .pl-a11y__switch[aria-pressed="true"] .pl-a11y__switch-knob { background-color: #fff !important; } /* --- Links unterstreichen ------------------------------------------------ */ html.a11y-underline a[href] { text-decoration: underline !important; text-underline-offset: .15em; } /* --- Gut lesbare Schrift ------------------------------------------------- Zuerst die Token umhängen (damit alles, was ordentlich über Variablen arbeitet, automatisch folgt), dann die Familie erzwingen. */ html.a11y-readable-font { --pl-a11y-readable-stack: "Atkinson Hyperlegible", Verdana, Tahoma, "DejaVu Sans", system-ui, sans-serif; --bs-body-font-family: var(--pl-a11y-readable-stack); --bs-headings-font-family: var(--pl-a11y-readable-stack); --bs-font-sans-serif: var(--pl-a11y-readable-stack); } html.a11y-readable-font body, html.a11y-readable-font body * { font-family: var(--pl-a11y-readable-stack) !important; font-style: normal !important; }