/* ============================================================ JustBS — Barrierefreiheit. Wird NACH dem Inline-Style jeder Seite geladen und ergänzt/ überschreibt gezielt: WCAG-Kontrast-Fixes, sichtbarer Fokus, Skip-Link, reduzierte Bewegung, das Menü-Trigger-Styling — plus ein opt-in Werkzeug-Panel (greift nur bei Aktivierung). Markenfarben: Ink #0F1115 · Paper #F6F7F9 · Cyan #06B6D4. ============================================================ */ :root { --accent-ink: #0E7490; } /* dunkleres Cyan für kleinen Text auf Hell (AA: 5,0:1) */ /* (1) Kontrast-Fixes — kleine Cyan-Labels auf Hell + Mute auf der dunklen Kontaktfläche */ .hero .eyebrow, section .section-num, .service .num { color: var(--accent-ink); } .contact { --mute: #9CA3AF; } /* helleres Mute auf Ink (AA: 7,4:1) */ .contact .section-num { color: var(--accent); } /* helles Cyan auf Ink passt (7,8:1) */ /* (2) Skip-Link */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 3000; background: var(--ink); color: var(--paper); padding: 12px 18px; border-radius: 0 0 10px 0; font-family: var(--mono); font-size: 13px; text-decoration: none; } .skip-link:focus { left: 0; } /* (3) Sichtbarer Tastatur-Fokus überall */ a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; border-radius: 4px; } .contact a:focus-visible, .a11y-panel :focus-visible, .a11y-fab:focus-visible { outline-color: var(--accent); } /* (4) Menü-Trigger „produkte" als echter Button (Semantik), Optik wie zuvor */ nav.topbar .has-dropdown > .trigger { background: none; border: 0; padding: 0; margin: 0; cursor: pointer; font-family: var(--mono); font-size: inherit; color: var(--mute); transition: color 0.15s; } nav.topbar .has-dropdown > .trigger:hover, nav.topbar .has-dropdown > .trigger[aria-expanded="true"] { color: var(--ink); } nav.topbar .has-dropdown > .trigger::after { content: ' ▾'; color: var(--accent); font-size: 10px; } /* ============================================================ Reduzierte Bewegung — System-Einstellung ODER opt-in ============================================================ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } html.a11y-motion-off { scroll-behavior: auto; } html.a11y-motion-off *, html.a11y-motion-off *::before, html.a11y-motion-off *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } /* ============================================================ Opt-in-Ebenen — wirken NUR mit Klasse auf ============================================================ */ /* Hoher Kontrast */ html.a11y-contrast { --mute: #374151; --accent-ink: #155E75; --border: #9CA3AF; } html.a11y-contrast .contact { --mute: #D1D5DB; } html.a11y-contrast a { text-decoration: underline; text-underline-offset: 2px; } html.a11y-contrast nav.topbar a, html.a11y-contrast nav.topbar .trigger { text-decoration: none; } /* Größere Schrift (px-basierte Seite → via zoom, skaliert verlässlich alles) */ html.a11y-fs-112 { zoom: 1.12; } html.a11y-fs-125 { zoom: 1.25; } html.a11y-fs-145 { zoom: 1.45; } /* Lesehilfen — mehr Abstand, unterstrichene Links */ html.a11y-reading body { line-height: 1.85; letter-spacing: .01em; } html.a11y-reading p, html.a11y-reading li { line-height: 1.9; } html.a11y-reading a { text-decoration: underline; text-underline-offset: 2px; } /* ============================================================ Auslöser-Button + Panel (vom a11y.js erzeugt) ============================================================ */ .a11y-fab { position: fixed; left: 18px; bottom: 18px; z-index: 2000; width: 48px; height: 48px; border-radius: 50%; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 6px 20px rgba(15,17,21,.22); } .a11y-fab:hover { background: #1c1f26; } .a11y-fab svg { width: 26px; height: 26px; } .a11y-fab .dot { color: var(--accent); } .a11y-panel { position: fixed; left: 18px; bottom: 78px; z-index: 2001; width: 290px; max-width: calc(100vw - 36px); background: var(--paper); color: var(--ink); border: 1px solid var(--border); border-radius: 14px; padding: 18px 18px 14px; box-shadow: 0 14px 40px rgba(15,17,21,.18); font-family: var(--sans); font-size: 14px; line-height: 1.5; } .a11y-panel[hidden] { display: none; } .a11y-panel h2 { font-family: var(--sans); font-size: 15px; font-weight: 700; margin: 0 0 2px; letter-spacing: -.01em; } .a11y-panel .a11y-sub { font-family: var(--mono); color: var(--mute); font-size: 11px; margin: 0 0 12px; } .a11y-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); } .a11y-row:last-of-type { border-bottom: 0; } .a11y-row .lbl { flex: 1; } .a11y-switch { flex: 0 0 auto; width: 44px; height: 25px; border-radius: 999px; background: var(--bg-alt); border: 1px solid var(--border); position: relative; cursor: pointer; padding: 0; } .a11y-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%; background: var(--mute); transition: left .15s, background .15s; } .a11y-switch[aria-checked="true"] { background: var(--accent); border-color: var(--accent); } .a11y-switch[aria-checked="true"]::after { left: 21px; background: var(--ink); } .a11y-step { display: flex; align-items: center; gap: 8px; } .a11y-step button { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border); background: var(--paper); color: var(--ink); font-size: 16px; cursor: pointer; line-height: 1; } .a11y-step button:disabled { opacity: .4; cursor: default; } .a11y-step .val { min-width: 44px; text-align: center; font-family: var(--mono); color: var(--mute); } .a11y-reset { margin-top: 12px; width: 100%; padding: 9px; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--ink); cursor: pointer; font-family: var(--mono); font-size: 12px; } .a11y-reset:hover { border-color: var(--accent); }