/* ============================================================ BARRIEREFREIHEIT WIDGET ============================================================ */ /* --- Floating Button --- */ .a11y-btn { position: fixed; left: 0; bottom: 6rem; z-index: 800; width: 48px; height: 48px; background: var(--g700); color: #fff; border-radius: 0 var(--r) var(--r) 0; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 2px 4px 16px rgba(0,0,0,0.2); transition: all 0.25s ease; } .a11y-btn:hover, .a11y-btn:focus-visible { width: 56px; background: var(--g600); outline: 3px solid var(--g400); outline-offset: 2px; } /* --- Panel --- */ .a11y-panel { position: fixed; left: 0; bottom: 6rem; z-index: 801; width: 280px; background: #fff; border-radius: 0 var(--rlg) var(--rlg) 0; box-shadow: 4px 8px 32px rgba(0,0,0,0.18); overflow: hidden; animation: slideInLeft 0.25s ease; } @keyframes slideInLeft { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .a11y-panel[hidden] { display: none; } /* Header */ .a11y-panel__header { background: var(--g800); color: #fff; padding: 0.85rem 1rem; display: flex; justify-content: space-between; align-items: center; font-family: var(--sans); font-size: 0.9rem; font-weight: 600; } .a11y-panel__close { background: none; border: none; color: rgba(255,255,255,0.75); font-size: 1.4rem; cursor: pointer; line-height: 1; padding: 0 0.25rem; transition: color 0.2s; } .a11y-panel__close:hover { color: #fff; } .a11y-panel__close:focus-visible { outline: 2px solid #fff; border-radius: 2px; } /* Body */ .a11y-panel__body { padding: 1rem; display: flex; flex-direction: column; gap: 0.6rem; } /* Schriftgröße Row */ .a11y-row { display: flex; justify-content: space-between; align-items: center; padding: 0.6rem 0; border-bottom: 1px solid #eee; } .a11y-label { font-size: 0.85rem; color: #444; } .a11y-font-controls { display: flex; align-items: center; gap: 0.5rem; } .a11y-size-btn { width: 30px; height: 30px; border: 1.5px solid var(--g500); background: none; color: var(--g700); border-radius: 4px; font-size: 0.8rem; font-weight: 700; cursor: pointer; transition: all 0.2s; } .a11y-size-btn:hover { background: var(--g100); } .a11y-size-btn:focus-visible { outline: 2px solid var(--g400); outline-offset: 2px; } .a11y-size-val { font-size: 0.78rem; color: #666; min-width: 52px; text-align: center; } /* Toggle Buttons */ .a11y-toggle { width: 100%; display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 0.75rem; background: #f8f8f6; border: 1.5px solid #e5e5e0; border-radius: var(--r); font-family: var(--sans); font-size: 0.85rem; color: #333; cursor: pointer; text-align: left; transition: all 0.2s; } .a11y-toggle:hover { background: var(--g100); border-color: var(--g400); } .a11y-toggle:focus-visible { outline: 2px solid var(--g400); outline-offset: 2px; } .a11y-toggle[aria-pressed="true"] { background: var(--g800); border-color: var(--g800); color: #fff; } .a11y-toggle__icon { font-size: 1rem; width: 20px; text-align: center; flex-shrink: 0; } /* Reset */ .a11y-reset { width: 100%; padding: 0.6rem; background: none; border: 1px dashed #ccc; border-radius: var(--r); font-family: var(--sans); font-size: 0.78rem; color: #888; cursor: pointer; transition: all 0.2s; margin-top: 0.25rem; } .a11y-reset:hover { color: var(--g700); border-color: var(--g500); } /* ============================================================ BARRIEREFREIHEIT MODI — werden auf gesetzt ============================================================ */ /* Hoher Kontrast */ .a11y-high-contrast { filter: contrast(1.5); } .a11y-high-contrast body { background: #000 !important; color: #fff !important; } .a11y-high-contrast a { color: #ff0 !important; } .a11y-high-contrast .btn, .a11y-high-contrast button { border: 2px solid #fff !important; } /* Lesbare Schrift (OpenDyslexic oder system fallback) */ .a11y-readable-font, .a11y-readable-font body, .a11y-readable-font * { font-family: 'Arial', 'Verdana', sans-serif !important; letter-spacing: 0.05em !important; word-spacing: 0.1em !important; line-height: 1.9 !important; } /* Bewegung reduzieren */ .a11y-reduce-motion *, .a11y-reduce-motion *::before, .a11y-reduce-motion *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .a11y-reduce-motion .hero-bg { transform: none !important; } /* Links hervorheben */ .a11y-highlight-links a:not(.btn):not(.nav-cta):not(.wa-float) { text-decoration: underline !important; text-underline-offset: 3px !important; background: #fff176 !important; color: #000 !important; padding: 0 2px !important; border-radius: 2px !important; } /* Mobile */ @media (max-width: 480px) { .a11y-panel { width: calc(100vw - 1rem); } .a11y-btn { bottom: 1.5rem; } .a11y-panel { bottom: 1.5rem; } }