/* PromptSite – Barrierefreiheit-Widget (Bundle-CSS). Zwei Teile: (1) UI (Button + Panel), thematisiert über --ps-w-*. (2) WIRKUNGS-Klassen am – je Funktion NUR die zugehörige Eigenschaft, mit !important, damit sie die Site-Styles überschreiben (eng begrenzt, kein DOM-Umbau). Namensraum: ps-a11y- (Kollisionsschutz). */ /* ---- (1) Bedienknopf ---- */ .ps-a11y-btn { position: fixed; z-index: 2147483200; width: 48px; height: 48px; font-size: 24px; line-height: 1; cursor: pointer; border: 0; border-radius: 999px; background: var(--ps-w-primary, #4f46e5); color: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.28); display: flex; align-items: center; justify-content: center; } .ps-a11y-btn[data-pos="unten-rechts"] { right: 16px; bottom: 16px; } .ps-a11y-btn[data-pos="unten-links"] { left: 16px; bottom: 16px; } .ps-a11y-btn[data-pos="oben-rechts"] { right: 16px; top: 16px; } .ps-a11y-btn[data-pos="oben-links"] { left: 16px; top: 16px; } .ps-a11y-btn:focus-visible { outline: var(--ps-w-focus, 2px solid #4f46e5); outline-offset: 2px; } /* ---- (1) Panel ---- */ .ps-a11y-panel { position: fixed; z-index: 2147483201; width: calc(100vw - 32px); max-width: 300px; background: var(--ps-w-surface, #fff); color: var(--ps-w-text, #18181b); font-family: var(--ps-w-font, system-ui, sans-serif); font-size: 14px; line-height: 1.5; border: 1px solid rgba(120,120,120,.28); border-radius: var(--ps-w-radius-surface, 12px); box-shadow: 0 10px 40px rgba(0,0,0,.24); padding: 16px 16px 14px; } .ps-a11y-panel[data-pos="unten-rechts"] { right: 16px; bottom: 74px; } .ps-a11y-panel[data-pos="unten-links"] { left: 16px; bottom: 74px; } .ps-a11y-panel[data-pos="oben-rechts"] { right: 16px; top: 74px; } .ps-a11y-panel[data-pos="oben-links"] { left: 16px; top: 74px; } .ps-a11y-title { margin: 0 0 10px; font-size: 15px; font-weight: 700; } .ps-a11y-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid rgba(120,120,120,.16); } .ps-a11y-row:first-of-type { border-top: 0; } .ps-a11y-lbl { font-size: 13.5px; } .ps-a11y-toggle { cursor: pointer; } .ps-a11y-cb { width: 18px; height: 18px; flex: none; accent-color: var(--ps-w-primary, #4f46e5); } .ps-a11y-step { display: flex; align-items: center; gap: 6px; } .ps-a11y-lvl { font-size: 12px; opacity: .7; min-width: 26px; text-align: center; } .ps-a11y-stepbtn { font: inherit; cursor: pointer; min-width: 38px; min-height: 32px; padding: 0 8px; font-weight: 700; border: 1px solid var(--ps-w-primary, #4f46e5); background: transparent; color: var(--ps-w-text, #18181b); border-radius: var(--ps-w-radius-control, 8px); } .ps-a11y-reset { font: inherit; cursor: pointer; margin-top: 12px; width: 100%; min-height: 38px; border: 1px solid var(--ps-w-primary, #4f46e5); background: var(--ps-w-primary, #4f46e5); color: #fff; border-radius: var(--ps-w-radius-control, 8px); } .ps-a11y-note { margin: 10px 0 0; font-size: 11.5px; opacity: .72; line-height: 1.4; } .ps-a11y-stepbtn:focus-visible, .ps-a11y-reset:focus-visible, .ps-a11y-cb:focus-visible { outline: var(--ps-w-focus, 2px solid #4f46e5); outline-offset: 2px; } /* ---- (2) Wirkungs-Klassen am (je Funktion nur die zugehörige Eigenschaft) ---- */ /* Größerer Text: Wurzel-Schriftgröße in Stufen (rem-basierte Layouts skalieren mit). */ html.ps-a11y-text-1 { font-size: 112.5% !important; } html.ps-a11y-text-2 { font-size: 125% !important; } html.ps-a11y-text-3 { font-size: 140% !important; } /* Zeilenabstand */ html.ps-a11y-lh * { line-height: 1.9 !important; } /* Lesbare Schrift (system-ui-Fallback) */ html.ps-a11y-font * { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important; } /* Kontrast / Graustufen (kombinierbar über den Kombi-Selektor) */ html.ps-a11y-contrast { filter: contrast(1.35) !important; } html.ps-a11y-grayscale { filter: grayscale(1) !important; } html.ps-a11y-contrast.ps-a11y-grayscale { filter: grayscale(1) contrast(1.35) !important; } /* Links hervorheben */ html.ps-a11y-links a { text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 2px !important; } /* Bilder ausblenden */ html.ps-a11y-noimg img, html.ps-a11y-noimg picture, html.ps-a11y-noimg svg, html.ps-a11y-noimg video { visibility: hidden !important; } html.ps-a11y-noimg * { background-image: none !important; } /* Animationen anhalten (prefers-reduced-motion nachbilden) */ html.ps-a11y-nomotion *, html.ps-a11y-nomotion *::before, html.ps-a11y-nomotion *::after { animation-play-state: paused !important; animation-duration: 0.001s !important; transition-duration: 0.001s !important; scroll-behavior: auto !important; }