/* accessibility.css Toggle erfolgt durch Klasse auf oder : - .a11y-enabled (generelle Verbesserungen) - .a11y-high-contrast - .a11y-large-text - .a11y-dyslexic - .a11y-reduced-motion */ /* --- Basis: nur aktiviert wenn der Schalter gesetzt ist --- */ .a11y-enabled { /* vernünftige defaults */ line-height: 1.6 !important; -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; word-break: break-word !important; -ms-text-size-adjust: 100% !important; color-adjust: exact !important; } /* Skip-link (sichtbar wenn Tastatur benutzt) */ .skip-link { position: absolute; left: -999px; top: auto; width: 1px; height: 1px; overflow: hidden; } .skip-link:focus, .skip-link:active { position: fixed; left: 1rem; top: 1rem; width: auto; height: auto; padding: .5rem .75rem; background: #000; color: #fff; z-index: 9999; border-radius: 4px; text-decoration: none; box-shadow: 0 2px 6px rgba(0,0,0,.3); } /* Fokus sichtbar und groß */ .a11y-enabled :focus { outline: 3px solid #ffb000 !important; outline-offset: 2px !important; box-shadow: none !important; } /* Links: deutlich, unterstrichen, größere hitbox */ .a11y-enabled a { text-decoration-thickness: 2px !important; text-underline-offset: 2px !important; text-decoration: underline !important; padding: .05rem .1rem; } .a11y-enabled a:focus, .a11y-enabled a:hover { text-decoration-color: #005ea5 !important; } /* Tasten / Buttons: ausreichend groß, gut sichtbar */ .a11y-enabled button, .a11y-enabled input[type="button"], .a11y-enabled input[type="submit"], .a11y-enabled .btn { min-height: 44px !important; padding: .6rem 1rem !important; border-radius: 6px !important; font-weight: 600 !important; } /* Formulare: labels explizit sichtbar, fehlerzustände */ .a11y-enabled label { display: inline-block !important; margin-bottom: .25rem !important; font-weight: 600 !important; } .a11y-enabled input, .a11y-enabled textarea, .a11y-enabled select { min-height: 42px !important; padding: .5rem .6rem !important; border: 2px solid #bfc6cc !important; border-radius: 6px !important; font-size: 1rem !important; } .a11y-enabled input:focus, .a11y-enabled textarea:focus, .a11y-enabled select:focus { border-color: #005ea5 !important; box-shadow: 0 0 0 3px rgba(0,94,165,0.12) !important; } /* Kontrastmodus */ .a11y-high-contrast { background-color: #000 !important; color: #fff !important; } .a11y-high-contrast a { color: #ffd400 !important; } .a11y-high-contrast button, .a11y-high-contrast input, .a11y-high-contrast textarea, .a11y-high-contrast select { background: #000 !important; color: #fff !important; border-color: #fff !important; } /* Große Schrift */ .a11y-large-text { font-size: 1.25rem !important; /* Basis vergrößert */ } .a11y-large-text h1 { font-size: 2.0rem !important; } .a11y-large-text h2 { font-size: 1.75rem !important; } .a11y-large-text h3 { font-size: 1.4rem !important; } /* Dyslexie-freundliche Schrift (falls lokal/extern verfügbar) */ @font-face { font-family: "OpenDyslexicCustom"; /* Optional: nur hinzufügen wenn die Schriftdatei vorhanden ist */ src: local("OpenDyslexic"), local("OpenDyslexic3"); font-display: swap; } .a11y-dyslexic, .a11y-dyslexic body, .a11y-dyslexic p, .a11y-dyslexic span, .a11y-dyslexic li { font-family: "OpenDyslexicCustom", "Arial", "Helvetica", sans-serif !important; letter-spacing: .02em !important; } /* Reduziere Animationen (auch per prefers) */ .a11y-reduced-motion *, .a11y-reduced-motion *::before, .a11y-reduced-motion *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* Respect user prefers-reduced-motion */ @media (prefers-reduced-motion: reduce) { :root { scroll-behavior: auto !important; } * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } /* Lesbarer Blocktext: größere max-width und mehr Abstand */ .a11y-enabled p, .a11y-enabled li { max-width: 75ch !important; margin-bottom: .9rem !important; } /* Tabellen: sichtbare header, zebra optional */ .a11y-enabled table { border-collapse: collapse !important; width: 100% !important; } .a11y-enabled th { background: rgba(0,0,0,.06) !important; padding: .5rem .6rem !important; text-align: left !important; } .a11y-enabled td { padding: .5rem .6rem !important; border-top: 1px solid rgba(0,0,0,.06) !important; } /* Kontraste Hilfsmittel: Fokusring/Outline immer sichtbar beim Keyboard-Navigieren */ .a11y-enabled :focus:not(:focus-visible) { outline: none; } .a11y-enabled :focus-visible { outline: 3px solid #ffb000 !important; } /* Sonstiges: vermeide text-transform: uppercase (schlechter lesbar) */ .a11y-enabled * { text-transform: none !important; } /* Mobile: vergrößere hit targets */ @media (max-width: 600px) { .a11y-enabled a, .a11y-enabled button { padding: .8rem 1rem !important; min-height: 48px !important; } }