/* CRS.Accessibility - Frontend-Widget + Barrierefreiheits-Klassen. Rein clientseitig, keine externen Assets. */ /* ==== Schwebender Button + Panel ==== */ #crs-a11y { --a11y-accent: #347468; position: fixed; bottom: 18px; z-index: 2147483600; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; filter: none !important; } #crs-a11y.crs-a11y-left { left: 18px; } #crs-a11y.crs-a11y-right { right: 18px; } #crs-a11y-btn { width: 54px; height: 54px; border-radius: 50%; background: var(--a11y-accent); color: #fff; border: 2px solid #fff; box-shadow: 0 4px 16px rgba(0,0,0,.35); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; } #crs-a11y-btn svg { width: 30px; height: 30px; fill: currentColor; } #crs-a11y-btn:hover { filter: brightness(1.08); } #crs-a11y-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } #crs-a11y-panel { position: absolute; bottom: 64px; width: 340px; max-width: calc(100vw - 24px); max-height: min(78vh, 640px); overflow-y: auto; background: #fff; color: #172238; border: 1px solid #e3e8ef; border-radius: 14px; box-shadow: 0 18px 44px rgba(0,0,0,.28); padding: 14px; display: none; } #crs-a11y.crs-a11y-left #crs-a11y-panel { left: 0; } #crs-a11y.crs-a11y-right #crs-a11y-panel { right: 0; } #crs-a11y.crs-a11y-open #crs-a11y-panel { display: block; } #crs-a11y-panel h2 { font-size: 1.02rem; margin: 0 0 2px; color: #172238; font-weight: 800; } #crs-a11y-panel .crs-a11y-sub { font-size: .74rem; color: #5b6b7b; margin: 0 0 10px; } #crs-a11y-panel .crs-a11y-group { margin: 12px 0 4px; font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--a11y-accent); } #crs-a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .crs-a11y-item { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; background: #f5f7fa; border: 1px solid #e3e8ef; border-radius: 10px; padding: 10px 6px; cursor: pointer; font-size: .78rem; color: #172238; line-height: 1.15; min-height: 64px; justify-content: center; } .crs-a11y-item svg { width: 22px; height: 22px; fill: var(--a11y-accent); } .crs-a11y-item:hover { border-color: var(--a11y-accent); } .crs-a11y-item.crs-a11y-on { background: var(--a11y-accent); color: #fff; } .crs-a11y-item.crs-a11y-on svg { fill: #fff; } .crs-a11y-item.crs-a11y-full { grid-column: 1 / -1; flex-direction: row; justify-content: center; gap: 8px; } .crs-a11y-fs-row { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; background: #f5f7fa; border: 1px solid #e3e8ef; border-radius: 10px; padding: 8px 10px; } .crs-a11y-fs-row .crs-a11y-fs-label { flex: 1; font-size: .8rem; } .crs-a11y-fs-row button { width: 34px; height: 34px; border-radius: 8px; border: 1px solid #cfd8e3; background: #fff; cursor: pointer; font-size: 1.1rem; line-height: 1; color: #172238; } .crs-a11y-fs-row .crs-a11y-fs-val { min-width: 46px; text-align: center; font-weight: 700; font-size: .82rem; } #crs-a11y-reset { grid-column: 1 / -1; margin-top: 6px; background: #fff; border: 1px solid #cfd8e3; border-radius: 10px; padding: 9px; cursor: pointer; font-weight: 700; color: #172238; } #crs-a11y-reset:hover { border-color: #f0654a; color: #f0654a; } #crs-a11y-statement { grid-column: 1 / -1; text-align: center; font-size: .74rem; margin-top: 8px; } #crs-a11y-statement a { color: var(--a11y-accent); } /* ==== Barrierefreiheits-Klassen (auf ) ==== */ /* Farb-/Sichtmodi (auf body, damit das Widget an unberuehrt bleibt) */ html.a11y-contrast body { filter: contrast(1.45) saturate(1.25) !important; } html.a11y-grayscale body { filter: grayscale(1) !important; } html.a11y-invert body { filter: invert(1) !important; } html.a11y-invert body img, html.a11y-invert body video, html.a11y-invert body picture, html.a11y-invert body iframe, html.a11y-invert body svg { filter: invert(1) !important; } html.a11y-dark body { filter: invert(1) hue-rotate(180deg) !important; } html.a11y-dark body img, html.a11y-dark body video, html.a11y-dark body picture, html.a11y-dark body iframe, html.a11y-dark body svg { filter: invert(1) hue-rotate(180deg) !important; } /* Links hervorheben */ html.a11y-links a { background: #ffee00 !important; color: #000 !important; text-decoration: underline !important; box-shadow: 0 0 0 2px #000 !important; } /* Titel/Ueberschriften hervorheben */ html.a11y-headings h1, html.a11y-headings h2, html.a11y-headings h3, html.a11y-headings h4, html.a11y-headings h5, html.a11y-headings h6 { background: rgba(52,116,104,.14) !important; outline: 1px dashed var(--a11y-accent, #347468) !important; } /* Lesbare Schrift */ html.a11y-readable body, html.a11y-readable body * { font-family: Verdana, Tahoma, Arial, sans-serif !important; } /* Abstaende */ html.a11y-spacing body * { line-height: 1.9 !important; letter-spacing: .1em !important; word-spacing: .16em !important; } /* Linksbuendig */ html.a11y-align body p, html.a11y-align body li, html.a11y-align body td, html.a11y-align body div, html.a11y-align body span { text-align: left !important; } /* Fokus hervorheben */ html.a11y-focus *:focus { outline: 3px solid #e11d48 !important; outline-offset: 2px !important; } /* Bilder ausblenden (Layout bleibt erhalten) */ html.a11y-noimg body img, html.a11y-noimg body picture, html.a11y-noimg body [style*="background-image"] { visibility: hidden !important; } /* Animationen stoppen */ html.a11y-nomotion *, html.a11y-nomotion *::before, html.a11y-nomotion *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } /* Grosser Cursor */ html.a11y-cursor, html.a11y-cursor * { cursor: url('data:image/svg+xml;utf8,') 4 2, auto !important; } /* Lesehilfe-Lineal + Lesemaske (JS-gesteuert) */ #crs-a11y-guide { position: fixed; left: 0; right: 0; height: 42px; margin-top: -21px; background: rgba(52,116,104,.10); border-top: 2px solid var(--a11y-accent, #347468); border-bottom: 2px solid var(--a11y-accent, #347468); pointer-events: none; z-index: 2147483500; display: none; } #crs-a11y-maskt, #crs-a11y-maskb { position: fixed; left: 0; right: 0; background: rgba(0,0,0,.72); pointer-events: none; z-index: 2147483500; display: none; } @media (prefers-reduced-motion: reduce) { #crs-a11y-panel { transition: none; } }