/* ===================================================================== Barrierefreiheits-Modul – Familienzeit Stuttgart Portiert von tobias-wachter.de, angepasst an das Design dieser Seite. Mechanik: Klassen auf (a11y-*), Zustand in localStorage. ===================================================================== */ /* --- Hilfsklassen --- */ .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .skip-link{position:absolute;left:-9999px;top:0;z-index:10000;background:#4f46e5;color:#fff;padding:.8rem 1.2rem;border-radius:0 0 10px 0;font-weight:700;text-decoration:none} .skip-link:focus{left:0} /* --- Umschalt-Button --- */ .a11y-toggle{position:fixed;left:16px;bottom:16px;z-index:995;width:52px;height:52px;border-radius:50%;border:2px solid #fff; background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff;display:flex;align-items:center;justify-content:center; cursor:pointer;box-shadow:0 6px 20px rgba(79,70,229,.45);transition:transform .2s,box-shadow .2s} .a11y-toggle:hover{transform:scale(1.08)} @media (max-width:768px){.a11y-toggle{bottom:78px;left:12px;width:46px;height:46px}} /* --- Panel --- */ .a11y-panel{position:fixed;left:16px;bottom:80px;z-index:996;width:370px;max-width:calc(100vw - 32px);max-height:min(78vh,640px);overflow-y:auto; background:#fff;border:1px solid #e2e8f0;border-radius:16px;box-shadow:0 18px 50px rgba(15,23,42,.28);padding:1rem 1.1rem 1.2rem; font-family:inherit;color:#1e293b} .a11y-panel[hidden]{display:none} /* Mobil: als Bottom-Sheet über die volle Breite – mehr Platz, ruhigere Position */ @media (max-width:768px){ .a11y-panel{left:0;right:0;bottom:0;top:auto;width:auto;max-width:100%;max-height:82vh; border-radius:18px 18px 0 0;border-left:none;border-right:none;border-bottom:none; padding:.9rem 1rem calc(1.1rem + env(safe-area-inset-bottom)); box-shadow:0 -12px 40px rgba(15,23,42,.32)} /* Griff-Andeutung oben */ .a11y-panel::before{content:"";display:block;width:44px;height:4px;border-radius:99px;background:#cbd5e1;margin:0 auto .6rem} .a11y-panel-head{position:sticky;top:0;background:#fff;padding-bottom:.4rem;margin-top:-.2rem;z-index:1} } .a11y-panel-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.4rem} .a11y-panel-head h2{font-size:1.05rem;font-weight:800;margin:0} .a11y-close{background:none;border:none;cursor:pointer;color:#64748b;padding:.2rem;display:flex;border-radius:6px} .a11y-close:hover{color:#1e293b;background:#f1f5f9} .a11y-intro{font-size:.78rem;color:#64748b;margin:0 0 .8rem;line-height:1.5} .a11y-section{margin-bottom:.9rem} .a11y-label{display:block;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:#475569;margin-bottom:.4rem} .a11y-row{display:flex;flex-wrap:wrap;gap:.35rem} .a11y-grid2{display:grid;grid-template-columns:1fr 1fr;gap:.35rem} .a11y-btn{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;padding:.5rem .6rem;border:2px solid #e2e8f0;border-radius:9px; background:#fff;color:#334155;font-family:inherit;font-size:.8rem;font-weight:600;cursor:pointer;transition:all .15s;flex:1 1 auto;min-width:0;text-align:center} .a11y-btn:hover{border-color:#818cf8;color:#4f46e5} .a11y-btn small{font-size:.65rem;font-weight:600;opacity:.75} .a11y-btn svg{flex:0 0 auto} .a11y-btn[aria-pressed="true"]{background:#4f46e5;border-color:#4f46e5;color:#fff} .a11y-btn[aria-pressed="true"] small{opacity:.9} .a11y-select-wrap{display:flex;align-items:center;gap:.5rem;margin-top:.4rem} .a11y-select-label{font-size:.75rem;font-weight:700;color:#475569;flex:0 0 auto} .a11y-select{flex:1;min-width:0;padding:.4rem .5rem;border:2px solid #e2e8f0;border-radius:8px;font-family:inherit;font-size:.78rem;background:#fff} .a11y-status{font-size:.75rem;color:#475569;background:#f1f5f9;border-radius:8px;padding:.45rem .6rem;margin:0 0 .5rem} .a11y-reset{width:100%;padding:.6rem;border:2px solid #fecaca;background:#fef2f2;color:#b91c1c;border-radius:9px;font-family:inherit;font-size:.8rem;font-weight:700;cursor:pointer} .a11y-reset:hover{background:#fee2e2} .a11y-hint{font-size:.7rem;color:#94a3b8;margin:.5rem 0 0;line-height:1.5} .a11y-hint kbd{background:#f1f5f9;border:1px solid #cbd5e1;border-radius:4px;padding:0 .25rem;font-family:inherit;font-size:.68rem} /* ===================================================================== WIRKUNG der Einstellungen ===================================================================== */ html.a11y-font-1{font-size:112.5%} html.a11y-font-2{font-size:125%} /* Hoher Kontrast */ html.a11y-contrast{background:#000} html.a11y-contrast body{background:#000;color:#fff} html.a11y-contrast .hero,html.a11y-contrast .card,html.a11y-contrast .modal,html.a11y-contrast .filter-drawer, html.a11y-contrast .a11y-panel,html.a11y-contrast .dropdown-panel,html.a11y-contrast .bottom-nav, html.a11y-contrast #radiusPanel,html.a11y-contrast .hours-block,html.a11y-contrast .modal-section{background:#000!important;color:#fff!important;border-color:#fff!important} html.a11y-contrast .hero h1{background:none!important;-webkit-text-fill-color:#ffd54a;color:#ffd54a!important} html.a11y-contrast .card-title,html.a11y-contrast .modal-title,html.a11y-contrast h1,html.a11y-contrast h2, html.a11y-contrast h3,html.a11y-contrast h4{color:#ffd54a!important} html.a11y-contrast p,html.a11y-contrast span,html.a11y-contrast div,html.a11y-contrast label, html.a11y-contrast li,html.a11y-contrast td,html.a11y-contrast th{color:#fff} html.a11y-contrast a{color:#74c0ff!important;text-decoration:underline} html.a11y-contrast .cat-tile,html.a11y-contrast .filter-dropdown-btn,html.a11y-contrast .a11y-btn, html.a11y-contrast .sort-select,html.a11y-contrast input,html.a11y-contrast select,html.a11y-contrast textarea{background:#000!important;color:#fff!important;border-color:#fff!important} html.a11y-contrast .filter-open-btn,html.a11y-contrast .fd-apply,html.a11y-contrast .a11y-btn[aria-pressed="true"], html.a11y-contrast .filter-dropdown-btn.has-active{background:#ffd54a!important;color:#000!important;border-color:#ffd54a!important} html.a11y-contrast .badge,html.a11y-contrast .io-badge,html.a11y-contrast .tag,html.a11y-contrast .equip-tag, html.a11y-contrast .info-chip,html.a11y-contrast .filter-chip{background:#000!important;color:#ffd54a!important;border:1px solid #ffd54a!important} html.a11y-contrast .card-img,html.a11y-contrast .modal-img{filter:grayscale(1) contrast(1.4)} /* Bessere Lesbarkeit */ html.a11y-readable body{line-height:1.8;letter-spacing:.015em;word-spacing:.05em} html.a11y-readable p,html.a11y-readable li{line-height:1.85;margin-bottom:14px} /* Zeilen-/Buchstabenabstand */ html.a11y-line-height body{line-height:2} html.a11y-line-height p,html.a11y-line-height li,html.a11y-line-height .card-title{line-height:2!important;margin-bottom:16px} html.a11y-letter-spacing body{letter-spacing:.12em;word-spacing:.18em} /* Legasthenie */ html.a11y-dyslexia body,html.a11y-dyslexia button,html.a11y-dyslexia input,html.a11y-dyslexia textarea,html.a11y-dyslexia select{ font-family:"Comic Sans MS","Trebuchet MS",Verdana,Tahoma,sans-serif!important;letter-spacing:.06em;word-spacing:.16em} html.a11y-dyslexia p,html.a11y-dyslexia li{line-height:1.9!important;max-width:66ch} /* Linksbündig */ html.a11y-align-left p,html.a11y-align-left li,html.a11y-align-left h1,html.a11y-align-left h2, html.a11y-align-left h3,html.a11y-align-left .hero{text-align:left!important} /* Graustufen */ html.a11y-grayscale .grid,html.a11y-grayscale .hero,html.a11y-grayscale #mapContainer, html.a11y-grayscale footer,html.a11y-grayscale .category-tiles,html.a11y-grayscale .modal{filter:grayscale(1)} /* Links hervorheben */ html.a11y-links a:not(.btn):not(.cta-btn){text-decoration:underline!important;text-underline-offset:3px;font-weight:600; background:#fef9c3;color:#1d4ed8!important;border-radius:3px;padding:0 2px} /* Fokus verstärken */ html.a11y-focus :focus-visible{outline:4px solid #ffd54a!important;outline-offset:3px!important;border-radius:4px; box-shadow:0 0 0 7px rgba(255,213,74,.35)!important} /* Großer Mauszeiger */ html.a11y-big-cursor,html.a11y-big-cursor *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M5 2l14 9-6 1 4 8-3 1.5-4-8-5 4z' fill='white' stroke='black' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E") 4 2,auto} html.a11y-big-cursor a,html.a11y-big-cursor button,html.a11y-big-cursor [role="button"]{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M9 2v9H4l8 11 8-11h-5V2z' fill='white' stroke='black' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E") 12 2,pointer} /* Animationen reduzieren */ html.a11y-no-motion *,html.a11y-no-motion ::before,html.a11y-no-motion ::after{ animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important} /* Bilder ausblenden */ html.a11y-hide-images .card-img,html.a11y-hide-images .modal-img{background-image:none!important;background:#e2e8f0!important} html.a11y-hide-images img{visibility:hidden} html.a11y-hide-images .card-img::after{content:attr(aria-label);display:flex;align-items:center;justify-content:center; height:100%;padding:.8rem;font-size:.8rem;color:#475569;text-align:center} /* Leselineal */ .a11y-guide-bar{position:fixed;left:0;right:0;height:40px;z-index:9998;pointer-events:none;background:rgba(255,213,74,.16); border-top:2px solid rgba(255,213,74,.9);border-bottom:2px solid rgba(255,213,74,.9);box-shadow:0 0 0 100vmax rgba(0,0,0,.12)} /* Bildschirm dämpfen */ .a11y-dim-overlay{position:fixed;inset:0;z-index:990;pointer-events:none;background:#000;opacity:0;transition:opacity .3s} html.a11y-dim-1 .a11y-dim-overlay{opacity:.28} html.a11y-dim-2 .a11y-dim-overlay{opacity:.5}