/* ══════════════════════════════════════════════ IgelWerk Bedienungshilfe (Accessibility) ══════════════════════════════════════════════ */ /* ── Panel UI ── */ .a11y-overlay { position: fixed; inset: 0; z-index: 9998; background: rgba(0, 0, 0, 0.3); } .a11y-panel { position: fixed; bottom: 60px; left: 16px; z-index: 9999; width: 320px; max-height: calc(100vh - 120px); overflow-y: auto; background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); border: 1px solid var(--mud-palette-lines-default); border-radius: var(--radius-lg, 12px); padding: 16px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18); animation: a11y-slide-in 0.15s ease-out; } @keyframes a11y-slide-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .a11y-section { padding: 8px 0; } .a11y-toggle { display: flex; align-items: center; justify-content: space-between; padding: 4px 0; } @media (max-width: 480px) { .a11y-panel { left: 8px; right: 8px; width: auto; } } /* ══════════════════════════════════════════════ Accessibility Overrides (auf angewendet) ══════════════════════════════════════════════ */ /* ── Schriftgröße ── */ html.a11y-font--2 { font-size: 12px !important; } html.a11y-font--1 { font-size: 14px !important; } /* Standard: 16px (keine Klasse) */ html.a11y-font-1 { font-size: 18px !important; } html.a11y-font-2 { font-size: 20px !important; } html.a11y-font-3 { font-size: 22px !important; } html.a11y-font-4 { font-size: 24px !important; } /* ── Hoher Kontrast ── */ html.a11y-high-contrast { filter: contrast(1.4) !important; } html.a11y-high-contrast .mud-paper, html.a11y-high-contrast .mud-card { border: 2px solid currentColor !important; } html.a11y-high-contrast .mud-button-root { border: 2px solid currentColor !important; font-weight: 700 !important; } html.a11y-high-contrast .mud-input-outlined .mud-input-outlined-border { border-width: 2px !important; } /* ── Abstände erhöhen ── */ html.a11y-spacing body { letter-spacing: 0.08em !important; word-spacing: 0.16em !important; } html.a11y-spacing p, html.a11y-spacing .mud-typography, html.a11y-spacing .mud-text-field, html.a11y-spacing .mud-table-cell { line-height: 1.8 !important; } html.a11y-spacing .mud-table-cell { padding-top: 12px !important; padding-bottom: 12px !important; } /* ── Links hervorheben ── */ html.a11y-links a, html.a11y-links .mud-link { text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 3px !important; } html.a11y-links a:hover, html.a11y-links .mud-link:hover { outline: 2px solid currentColor !important; outline-offset: 2px !important; } /* ── Großer Cursor ── */ html.a11y-cursor, html.a11y-cursor * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M5 2l20 14-9 2 5 10-4 2-5-10-7 7z' fill='%23000' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E") 4 2, auto !important; } /* ── Graustufen ── */ html.a11y-grayscale { filter: grayscale(1) !important; } /* Kombination: Kontrast + Graustufen */ html.a11y-high-contrast.a11y-grayscale { filter: grayscale(1) contrast(1.4) !important; }