/* * accessibility.css – Barrierefreiheit Heiligenwald * WCAG 2.1 AA · Button in Navbar (kein floating Panel mehr) */ /* ══════════════════════════════════════════════════════════ 1. SCHRIFTGRÖSSEN-STUFEN (data-fs auf ) ══════════════════════════════════════════════════════════ */ html[data-fs="1"] { font-size: 100%; } html[data-fs="2"] { font-size: 115%; } html[data-fs="3"] { font-size: 130%; } html[data-fs="4"] { font-size: 150%; } /* ══════════════════════════════════════════════════════════ 2. FOCUS-INDIKATOREN (WCAG 2.4.7) ══════════════════════════════════════════════════════════ */ *:focus-visible { outline: 3px solid #e67e22 !important; outline-offset: 3px !important; border-radius: 3px; } *:focus:not(:focus-visible) { outline: none; } .navbar .nav-link:focus-visible, .navbar .btn:focus-visible { outline: 3px solid #fff !important; outline-offset: 2px !important; } /* ══════════════════════════════════════════════════════════ 3. SKIP-TO-CONTENT (WCAG 2.4.1) ══════════════════════════════════════════════════════════ */ .skip-link { position: absolute; top: -60px; left: 1rem; z-index: 10000; background: #000; color: #fff; padding: 0.5rem 1rem; border-radius: 0 0 6px 6px; font-weight: 700; text-decoration: none; transition: top 0.15s; } .skip-link:focus { top: 0; } /* ══════════════════════════════════════════════════════════ 4. A11Y-DROPDOWN (Navbar-integriert) ══════════════════════════════════════════════════════════ */ /* Dropdown-Menü selbst */ .a11y-dropdown { background: #fff; border: 1px solid rgba(0,0,0,.12); border-radius: 10px; } /* Gruppen-Beschriftung */ .a11y-group-label { font-size: 0.72rem; letter-spacing: 0.06em; color: #666; margin-bottom: 0.5rem; } /* Buttons innerhalb des Dropdowns */ .a11y-btn { background: #f0f0f0; color: #222; border: 1px solid #ccc; border-radius: 6px; padding: 0.3rem 0.7rem; font-size: 0.88rem; cursor: pointer; line-height: 1.4; transition: background 0.15s, border-color 0.15s, color 0.15s; white-space: nowrap; } .a11y-btn:hover { background: #ddd; border-color: #aaa; } /* Aktiver Zustand – orange Akzent */ .a11y-btn.active { background: #2d6a4f; border-color: #2d6a4f; color: #fff; font-weight: 700; } .a11y-btn:focus-visible { outline: 3px solid #e67e22 !important; outline-offset: 2px !important; } /* Schriftgröße-Buttons wachsen sichtbar */ .a11y-btn[data-fs="2"] { font-size: 0.95rem; } .a11y-btn[data-fs="3"] { font-size: 1.05rem; } .a11y-btn[data-fs="4"] { font-size: 1.15rem; } /* 5. ÜBERSCHRIFTEN – h1 sitzt jetzt in .card-header, braucht keine separate Hinterlage mehr. */ /* ══════════════════════════════════════════════════════════ 6. HOHER KONTRAST (data-contrast="hk") Schwarz/Weiß + gelbe Akzente WCAG AAA ══════════════════════════════════════════════════════════ */ html[data-contrast="hk"] body { background-color: #fff !important; color: #000 !important; } html[data-contrast="hk"] .navbar, html[data-contrast="hk"] .bg-village { background-color: #000 !important; border-bottom: 3px solid #ffcc00 !important; } html[data-contrast="hk"] .nav-link, html[data-contrast="hk"] .navbar-brand { color: #fff !important; } html[data-contrast="hk"] .nav-link.active, html[data-contrast="hk"] .nav-link:hover { background-color: #ffcc00 !important; color: #000 !important; } html[data-contrast="hk"] .card { background: #fff !important; border: 2px solid #000 !important; box-shadow: none !important; } html[data-contrast="hk"] .btn-primary, html[data-contrast="hk"] .btn-success { background: #000 !important; border-color: #000 !important; color: #ffcc00 !important; font-weight: 700; } html[data-contrast="hk"] a { color: #00008b !important; text-decoration: underline !important; } html[data-contrast="hk"] .text-muted { color: #444 !important; } html[data-contrast="hk"] .hero-section { background: #000 !important; border: 3px solid #ffcc00 !important; color: #fff !important; } html[data-contrast="hk"] .section-title { color: #000 !important; border-left-color: #000 !important; } html[data-contrast="hk"] .event-date-badge { background: #000 !important; color: #ffcc00 !important; } html[data-contrast="hk"] .footer-village { background: #000 !important; border-top: 3px solid #ffcc00 !important; } html[data-contrast="hk"] .footer-village a { color: #ffcc00 !important; } html[data-contrast="hk"] .card-header.bg-village { background: #000 !important; border-bottom: 2px solid #ffcc00 !important; } html[data-contrast="hk"] .a11y-dropdown { background: #000; border-color: #ffcc00; } html[data-contrast="hk"] .a11y-btn { background: #000; color: #fff; border-color: #ffcc00; } html[data-contrast="hk"] .a11y-btn.active { background: #ffcc00; color: #000; } /* ══════════════════════════════════════════════════════════ 7. DUNKEL-MODUS (data-contrast="dk") ══════════════════════════════════════════════════════════ */ html[data-contrast="dk"] body { background-color: #121212 !important; color: #e8e8e8 !important; } html[data-contrast="dk"] .navbar, html[data-contrast="dk"] .bg-village { background-color: #0d0d0d !important; } html[data-contrast="dk"] .card { background: #1e1e1e !important; border-color: #333 !important; box-shadow: 0 2px 8px rgba(0,0,0,.5) !important; } html[data-contrast="dk"] .card-body, html[data-contrast="dk"] .card-title, html[data-contrast="dk"] p, html[data-contrast="dk"] li, html[data-contrast="dk"] td, html[data-contrast="dk"] th, html[data-contrast="dk"] label, html[data-contrast="dk"] h1, html[data-contrast="dk"] h2, html[data-contrast="dk"] h3, html[data-contrast="dk"] h4, html[data-contrast="dk"] h5 { color: #e8e8e8 !important; } html[data-contrast="dk"] .text-muted { color: #aaa !important; } html[data-contrast="dk"] .section-title { color: #52b788 !important; } html[data-contrast="dk"] a { color: #7ec8e3 !important; } html[data-contrast="dk"] .form-control, html[data-contrast="dk"] .form-select { background: #2a2a2a !important; border-color: #444 !important; color: #e8e8e8 !important; } html[data-contrast="dk"] .list-group-item { background: #1e1e1e !important; border-color: #333 !important; color: #e8e8e8 !important; } html[data-contrast="dk"] .footer-village { background: #0d0d0d !important; } html[data-contrast="dk"] .hero-section { background: linear-gradient(135deg, #1a3d2e 0%, #2d6a4f 100%) !important; } html[data-contrast="dk"] .table { color: #e8e8e8 !important; } html[data-contrast="dk"] .table-light { background: #2a2a2a !important; color: #e8e8e8 !important; } html[data-contrast="dk"] .card-header.bg-village { background: #1a3d2e !important; } html[data-contrast="dk"] .a11y-dropdown { background: #1e1e1e; border-color: #444; color: #e8e8e8; } html[data-contrast="dk"] .a11y-dropdown .a11y-group-label { color: #aaa; } html[data-contrast="dk"] .a11y-dropdown hr { border-color: #444; } html[data-contrast="dk"] .a11y-btn { background: #2a2a2a; color: #e8e8e8; border-color: #444; } html[data-contrast="dk"] .a11y-btn.active { background: #52b788; color: #000; border-color: #52b788; } html[data-contrast="dk"] #a11y-reset { color: #aaa; border-color: #555; } html[data-contrast="dk"] #a11y-reset:hover { color: #e8e8e8; border-color: #888; } html[data-contrast="dk"] .news-card-placeholder { background-color: #2a2a2a !important; } html[data-contrast="dk"] .alert-success { background:#1a3a2a!important; color:#7ec8a0!important; border-color:#2d6a4f!important; } html[data-contrast="dk"] .alert-danger { background:#3a1a1a!important; color:#f89898!important; border-color:#8b2222!important; } /* ══════════════════════════════════════════════════════════ 8. BEWEGUNGSREDUZIERUNG (prefers-reduced-motion) ══════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .gallery-item:hover { transform: none !important; } } /* ══════════════════════════════════════════════════════════ 9. WCAG-KONTRAST-KORREKTUREN (Standard) ══════════════════════════════════════════════════════════ */ .text-muted { color: #595959 !important; } input::placeholder, textarea::placeholder { color: #767676 !important; opacity: 1; } .form-label { margin-bottom: 0.35rem; font-weight: 500; } main a:not(.btn):not(.nav-link):not(.navbar-brand) { text-decoration: underline; } .req { color: #b91c1c; margin-left: 0.2rem; font-weight: 700; } /* 10. Container – Standard Bootstrap container */ /* ══════════════════════════════════════════════════════════ 11. MOBILE ANPASSUNGEN ══════════════════════════════════════════════════════════ */ @media (max-width: 575px) { .a11y-btn { font-size: 0.8rem; padding: 0.2rem 0.45rem; } }