/** * Accessibility widget – Frontend. * * Zwei Teile: * 1) Das Widget selbst (Schaltfläche + Panel). Das Wurzelelement #pc-a11y-root * wird per JS an gehängt, damit Seiten-Filter (Invertieren/Graustufen) * es nicht beeinflussen. * 2) Seiten-Effekte als Klassen auf , die auf den -Inhalt wirken. */ /* ===== 1) Widget-UI ===================================================== */ #pc-a11y-root { --pa-accent: var(--a11y-accent, #007cba); position: fixed; z-index: var(--a11y-z, 99999); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; font-size: 15px; line-height: 1.4; color: #1f2933; } #pc-a11y-root.pos-bottom-right { right: 18px; bottom: 18px; } #pc-a11y-root.pos-bottom-left { left: 18px; bottom: 18px; } #pc-a11y-root.pos-top-right { right: 18px; top: 18px; } #pc-a11y-root.pos-top-left { left: 18px; top: 18px; } .pc-a11y-toggle { width: var(--a11y-btn, 56px); height: var(--a11y-btn, 56px); border-radius: 50%; border: none; background: var(--pa-accent); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0, 0, 0, .28); transition: transform .15s ease, box-shadow .15s ease; } .pc-a11y-toggle:hover { transform: scale(1.06); box-shadow: 0 6px 20px rgba(0, 0, 0, .34); } .pc-a11y-toggle:focus-visible { outline: 3px solid #fff; outline-offset: 3px; } /* Panel */ .pc-a11y-panel { position: absolute; width: 340px; max-width: calc(100vw - 28px); max-height: min(80vh, 640px); background: #fff; border-radius: 14px; box-shadow: 0 12px 40px rgba(0, 0, 0, .3); display: flex; flex-direction: column; overflow: hidden; } #pc-a11y-root.pos-bottom-right .pc-a11y-panel, #pc-a11y-root.pos-top-right .pc-a11y-panel { right: 0; } #pc-a11y-root.pos-bottom-left .pc-a11y-panel, #pc-a11y-root.pos-top-left .pc-a11y-panel { left: 0; } #pc-a11y-root.pos-bottom-right .pc-a11y-panel, #pc-a11y-root.pos-bottom-left .pc-a11y-panel { bottom: calc(var(--a11y-btn, 56px) + 12px); } #pc-a11y-root.pos-top-right .pc-a11y-panel, #pc-a11y-root.pos-top-left .pc-a11y-panel { top: calc(var(--a11y-btn, 56px) + 12px); } .pc-a11y-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background: var(--pa-accent); color: #fff; } .pc-a11y-title { font-weight: 700; font-size: 16px; } .pc-a11y-close { background: none; border: none; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; padding: 0 4px; } .pc-a11y-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .pc-a11y-body { padding: 12px 14px; overflow-y: auto; } .pc-a11y-body:focus { outline: none; } .pc-a11y-group { margin-bottom: 14px; } .pc-a11y-group-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #6b7280; margin: 0 0 8px; } .pc-a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .pc-a11y-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 64px; padding: 8px 6px; text-align: center; background: #f4f6f8; border: 2px solid transparent; border-radius: 10px; color: #1f2933; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: border-color .12s, background .12s; } .pc-a11y-item:hover { background: #eaeef2; } .pc-a11y-item:focus-visible { outline: 3px solid var(--pa-accent); outline-offset: 1px; } .pc-a11y-item.is-active { border-color: var(--pa-accent); background: rgba(0, 124, 186, .1); } .pc-a11y-item .pa-ico { font-size: 20px; line-height: 1; } .pc-a11y-item .pa-state { font-size: 11px; font-weight: 500; color: var(--pa-accent); min-height: 13px; } /* Stepper (Schriftgröße) */ .pc-a11y-stepper { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; } .pc-a11y-stepper .pa-label { flex: 1; font-weight: 600; font-size: 13px; } .pc-a11y-stepper button { width: 36px; height: 36px; border-radius: 8px; border: 2px solid #d4dae0; background: #fff; font-size: 18px; cursor: pointer; color: #1f2933; } .pc-a11y-stepper button:focus-visible { outline: 3px solid var(--pa-accent); outline-offset: 1px; } .pc-a11y-stepper .pa-value { min-width: 48px; text-align: center; font-weight: 700; } /* Sprachauswahl / Vorlesen */ .pc-a11y-row { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; } .pc-a11y-row select { flex: 1; padding: 8px; border-radius: 8px; border: 2px solid #d4dae0; font-size: 13px; background: #fff; color: #1f2933; } .pc-a11y-foot { padding: 12px 14px; border-top: 1px solid #e5e9ee; display: flex; flex-direction: column; gap: 8px; } .pc-a11y-reset, .pc-a11y-statement { display: block; width: 100%; padding: 9px; border-radius: 8px; text-align: center; font-weight: 600; font-size: 13px; cursor: pointer; text-decoration: none; } .pc-a11y-reset { background: #1f2933; color: #fff; border: none; } .pc-a11y-statement { background: #f4f6f8; color: var(--pa-accent); border: 1px solid #e5e9ee; } .pc-a11y-reset:focus-visible, .pc-a11y-statement:focus-visible { outline: 3px solid var(--pa-accent); outline-offset: 2px; } @media (max-width: 480px) { .pc-a11y-panel { width: calc(100vw - 28px); } } #pc-a11y-root.hide-mobile { display: none; } @media (min-width: 783px) { #pc-a11y-root.hide-mobile { display: block; } } /* Reading guide / mask (an gehängt, daher fixed über allem) */ .pc-a11y-guide { position: fixed; left: 0; width: 100%; height: 0; border-top: 4px solid rgba(0, 0, 0, .85); box-shadow: 0 0 0 2px rgba(255, 255, 0, .8); pointer-events: none; z-index: calc(var(--a11y-z, 99999) - 1); display: none; } .pc-a11y-mask-top, .pc-a11y-mask-bottom { position: fixed; left: 0; width: 100%; background: rgba(0, 0, 0, .7); pointer-events: none; z-index: calc(var(--a11y-z, 99999) - 1); display: none; } /* ===== 2) Seiten-Effekte (Klassen auf , wirken auf ) ======= */ /* Schriftskalierung (rem/em-basiert, sehr performant) */ html.a11y-fs { font-size: calc(100% * var(--a11y-font-scale, 1)) !important; } /* Kombinierbare Farbfilter (Invertieren / Sättigung / Farbenblindheit) */ html.a11y-has-filter body { filter: var(--a11y-filter, none); } /* Kontrastmodi. Hinweis: #pc-a11y-root wird per JS aus dem an gehängt; die body-scoped Regeln erfassen das Widget daher nicht. */ html.a11y-contrast-high body :not(img):not(video):not(svg):not(path):not(canvas) { background-color: #fff !important; color: #000 !important; border-color: #000 !important; text-shadow: none !important; } html.a11y-contrast-dark body :not(img):not(video):not(svg):not(path):not(canvas) { background-color: #0b0b0b !important; color: #f5f5f5 !important; border-color: #f5f5f5 !important; } html.a11y-contrast-light body :not(img):not(video):not(svg):not(path):not(canvas) { background-color: #ffffff !important; color: #1a1a1a !important; } html.a11y-contrast-high body a { color: #0033cc !important; text-decoration: underline !important; } html.a11y-contrast-dark body a { color: #ffe600 !important; text-decoration: underline !important; } /* Lesbare Schrift / Legasthenie */ html.a11y-readable-font body, html.a11y-readable-font body * { font-family: Arial, Helvetica, "Liberation Sans", sans-serif !important; } html.a11y-dyslexia-font body, html.a11y-dyslexia-font body * { font-family: "OpenDyslexic", "Comic Sans MS", "Trebuchet MS", Verdana, sans-serif !important; letter-spacing: .03em !important; } /* Abstände */ html.a11y-line-1 body * { line-height: 1.6 !important; } html.a11y-line-2 body * { line-height: 2.0 !important; } html.a11y-line-3 body * { line-height: 2.4 !important; } html.a11y-letter-1 body * { letter-spacing: .08em !important; } html.a11y-letter-2 body * { letter-spacing: .16em !important; } html.a11y-word-1 body * { word-spacing: .2em !important; } html.a11y-word-2 body * { word-spacing: .4em !important; } /* Textausrichtung */ html.a11y-align-left body p, html.a11y-align-left body li { text-align: left !important; } html.a11y-align-center body p, html.a11y-align-center body li { text-align: center !important; } html.a11y-align-right body p, html.a11y-align-right body li { text-align: right !important; } /* Links / Überschriften hervorheben */ html.a11y-links body a { text-decoration: underline !important; text-underline-offset: 2px; outline: 1px dashed currentColor; outline-offset: 2px; } html.a11y-titles body :is(h1, h2, h3, h4, h5, h6) { background: #fff8c4 !important; color: #000 !important; padding: 2px 4px !important; border-left: 4px solid var(--a11y-accent, #007cba) !important; } /* Fokus hervorheben / Tastatur */ html.a11y-focus body :focus { outline: 3px solid #e11d48 !important; outline-offset: 2px !important; } /* Animationen stoppen */ html.a11y-stop-anim body *, html.a11y-stop-anim body *::before, html.a11y-stop-anim body *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; scroll-behavior: auto !important; } /* Bilder ausblenden */ html.a11y-hide-images body img, html.a11y-hide-images body picture { visibility: hidden !important; } /* Großer Cursor */ html.a11y-big-cursor body, html.a11y-big-cursor body * { cursor: url('data:image/svg+xml;utf8,') 4 2, auto !important; } /* OpenDyslexic (optional gebündelt; sonst greift der Fallback-Stack) */ @font-face { font-family: "OpenDyslexic"; src: url("../fonts/OpenDyslexic-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }