/* ==================================================================== Jahresanzeigen.de — Barrierefrei-Option (Accessibility toolbar) Self-contained. Widget chrome scoped under .ja-a11y. Global helpers are toggled by classes on . Reuses design tokens from styles.css :root (no new colors invented). ==================================================================== */ /* ---------- 0. Local fallbacks -------------------------------------- If a11y.css is ever loaded without styles.css, the widget still works. These only fill in if the token is undefined (var fallback). */ .ja-a11y { --a11y-ink: var(--ink, #050B1C); --a11y-ink-1: var(--ink-1, #08132B); --a11y-ink-2: var(--ink-2, #0B1D3A); --a11y-ink-3: var(--ink-3, #11264A); --a11y-brand: var(--brand, #00B6F0); --a11y-brand-glow: var(--brand-glow, #7FE0FF); --a11y-text: var(--text-on-dark, #E9F1FB); --a11y-text-soft: var(--text-on-dark-soft, #93AECC); --a11y-text-mute: var(--text-on-dark-mute, #5E7CA0); --a11y-rule: var(--rule-on-dark, rgba(127, 224, 255, 0.10)); --a11y-font-display: var(--font-display, 'Poppins', system-ui, sans-serif); --a11y-font-body: var(--font-body, 'Inter', system-ui, sans-serif); --a11y-font-mono: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace); --a11y-r-md: var(--r-md, 16px); --a11y-r-lg: var(--r-lg, 22px); --a11y-r-xl: var(--r-xl, 28px); --a11y-ease-spring: var(--ease-spring, cubic-bezier(0.22, 1.20, 0.36, 1)); --a11y-ease-out: var(--ease-out, cubic-bezier(0.16, 1, 0.30, 1)); --a11y-t-fast: var(--t-fast, 150ms); --a11y-t-base: var(--t-base, 280ms); } /* ---------- 1. Launcher button (bottom-LEFT) ------------------------ */ .ja-a11y__launcher { position: fixed; left: 20px; bottom: 20px; z-index: 950; /* below header (100) overlays? — high enough to sit over content, leaves room above 1000 for skip-link */ width: 52px; height: 52px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #0EC0F7 0%, #0090D6 100%); color: #001525; border: 1px solid rgba(127, 224, 255, 0.45); box-shadow: 0 8px 24px rgba(0, 182, 240, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 0 1px rgba(127, 224, 255, 0.18); cursor: pointer; transition: transform var(--a11y-t-base) var(--a11y-ease-spring), box-shadow var(--a11y-t-base) var(--a11y-ease-out); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .ja-a11y__launcher svg { width: 26px; height: 26px; display: block; pointer-events: none; } .ja-a11y__launcher:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(0, 182, 240, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 0 1px rgba(127, 224, 255, 0.35); } .ja-a11y__launcher:focus-visible { outline: 3px solid var(--a11y-brand-glow); outline-offset: 3px; } /* Hide launcher while the panel is open (panel has its own close) */ .ja-a11y.is-open .ja-a11y__launcher { opacity: 0; pointer-events: none; transform: scale(0.8); } /* ---------- 2. Backdrop (mobile bottom-sheet scrim) ----------------- */ .ja-a11y__backdrop { position: fixed; inset: 0; z-index: 951; background: rgba(5, 11, 28, 0.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity var(--a11y-t-base) var(--a11y-ease-out), visibility var(--a11y-t-base); } .ja-a11y.is-open .ja-a11y__backdrop { opacity: 1; visibility: visible; } /* ---------- 3. Panel ------------------------------------------------ */ .ja-a11y__panel { position: fixed; left: 20px; bottom: 20px; z-index: 952; width: 340px; max-width: calc(100vw - 40px); max-height: calc(100vh - 40px); overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 20px; border-radius: var(--a11y-r-xl); color: var(--a11y-text); font-family: var(--a11y-font-body); background: linear-gradient(155deg, rgba(17, 38, 74, 0.92) 0%, rgba(8, 19, 43, 0.94) 100%); border: 1px solid rgba(127, 224, 255, 0.22); -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%); box-shadow: 0 36px 96px rgba(5, 11, 28, 0.45), 0 12px 32px rgba(5, 11, 28, 0.25), 0 0 0 1px rgba(127, 224, 255, 0.10); /* Closed state */ opacity: 0; visibility: hidden; transform: translateY(12px) scale(0.98); transform-origin: bottom left; transition: opacity var(--a11y-t-base) var(--a11y-ease-out), transform var(--a11y-t-base) var(--a11y-ease-spring), visibility var(--a11y-t-base); } .ja-a11y.is-open .ja-a11y__panel { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } /* ---------- 4. Panel header ----------------------------------------- */ .ja-a11y__header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .ja-a11y__title { font-family: var(--a11y-font-display); font-weight: 600; font-size: 17px; letter-spacing: -0.015em; line-height: 1.2; margin: 0; color: var(--a11y-text); } .ja-a11y__eyebrow { display: block; font-family: var(--a11y-font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--a11y-brand-glow); margin-bottom: 3px; } .ja-a11y__close { margin-left: auto; flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: rgba(127, 224, 255, 0.06); border: 1px solid var(--a11y-rule); color: var(--a11y-text-soft); cursor: pointer; transition: background var(--a11y-t-fast), color var(--a11y-t-fast), border-color var(--a11y-t-fast); } .ja-a11y__close:hover { background: rgba(127, 224, 255, 0.12); border-color: rgba(127, 224, 255, 0.30); color: var(--a11y-text); } .ja-a11y__close:focus-visible { outline: 2px solid var(--a11y-brand-glow); outline-offset: 2px; } .ja-a11y__close svg { width: 16px; height: 16px; } /* ---------- 5. Controls --------------------------------------------- */ .ja-a11y__group { display: flex; flex-direction: column; gap: 8px; } .ja-a11y__row-label { font-family: var(--a11y-font-mono); font-size: 10.5px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--a11y-text-mute); margin: 14px 0 2px; } /* Font-size segmented control */ .ja-a11y__seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 4px; border-radius: 14px; background: rgba(127, 224, 255, 0.04); border: 1px solid var(--a11y-rule); } .ja-a11y__seg-btn { appearance: none; height: 44px; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--a11y-text-soft); font-family: var(--a11y-font-display); font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 2px; transition: background var(--a11y-t-fast), color var(--a11y-t-fast), border-color var(--a11y-t-fast); } .ja-a11y__seg-btn .a-sm { font-size: 13px; } .ja-a11y__seg-btn .a-md { font-size: 16px; } .ja-a11y__seg-btn .a-lg { font-size: 20px; } .ja-a11y__seg-btn:hover { color: var(--a11y-text); background: rgba(127, 224, 255, 0.06); } .ja-a11y__seg-btn[aria-pressed="true"] { background: linear-gradient(180deg, #0EC0F7 0%, #0090D6 100%); color: #001525; border-color: rgba(127, 224, 255, 0.45); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35); } .ja-a11y__seg-btn:focus-visible { outline: 2px solid var(--a11y-brand-glow); outline-offset: 2px; } /* Toggle buttons */ .ja-a11y__toggle { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border-radius: 14px; background: rgba(127, 224, 255, 0.04); border: 1px solid var(--a11y-rule); color: var(--a11y-text); cursor: pointer; text-align: left; transition: background var(--a11y-t-fast), border-color var(--a11y-t-fast); } .ja-a11y__toggle:hover { background: rgba(127, 224, 255, 0.07); border-color: rgba(127, 224, 255, 0.22); } .ja-a11y__toggle:focus-visible { outline: 2px solid var(--a11y-brand-glow); outline-offset: 2px; } .ja-a11y__toggle-ico { flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: rgba(127, 224, 255, 0.08); border: 1px solid rgba(127, 224, 255, 0.18); color: var(--a11y-brand-glow); } .ja-a11y__toggle-ico svg { width: 18px; height: 18px; } .ja-a11y__toggle-text { flex: 1; min-width: 0; } .ja-a11y__toggle-text b { display: block; font-weight: 600; font-size: 14.5px; letter-spacing: -0.005em; color: var(--a11y-text); } .ja-a11y__toggle-text small { display: block; font-size: 12px; color: var(--a11y-text-mute); line-height: 1.4; margin-top: 1px; } /* Switch track */ .ja-a11y__switch { flex-shrink: 0; width: 42px; height: 24px; border-radius: 999px; background: rgba(127, 224, 255, 0.12); border: 1px solid var(--a11y-rule); position: relative; transition: background var(--a11y-t-base) var(--a11y-ease-out); } .ja-a11y__switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--a11y-text-soft); transition: transform var(--a11y-t-base) var(--a11y-ease-spring), background var(--a11y-t-base); } .ja-a11y__toggle[aria-pressed="true"] .ja-a11y__switch { background: linear-gradient(180deg, #0EC0F7 0%, #0090D6 100%); border-color: rgba(127, 224, 255, 0.45); } .ja-a11y__toggle[aria-pressed="true"] .ja-a11y__switch::after { transform: translateX(18px); background: #001525; } .ja-a11y__toggle[aria-pressed="true"] .ja-a11y__toggle-ico { background: rgba(0, 182, 240, 0.20); border-color: rgba(127, 224, 255, 0.40); } /* Reset button */ .ja-a11y__reset { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 44px; margin-top: 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(127, 224, 255, 0.18); color: var(--a11y-text); font-family: var(--a11y-font-body); font-weight: 600; font-size: 14px; cursor: pointer; transition: background var(--a11y-t-fast), border-color var(--a11y-t-fast); } .ja-a11y__reset:hover { background: rgba(127, 224, 255, 0.08); border-color: rgba(127, 224, 255, 0.35); } .ja-a11y__reset:focus-visible { outline: 2px solid var(--a11y-brand-glow); outline-offset: 2px; } .ja-a11y__reset svg { width: 16px; height: 16px; } /* Footer note */ .ja-a11y__note { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--a11y-rule); font-size: 11px; line-height: 1.5; color: var(--a11y-text-mute); } /* aria-live status — visually hidden but announced */ .ja-a11y__status { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ---------- 6. Mobile bottom-sheet ---------------------------------- */ @media (max-width: 560px) { .ja-a11y__launcher { left: 16px; bottom: max(16px, env(safe-area-inset-bottom)); } .ja-a11y__panel { left: 0; right: 0; bottom: 0; width: 100%; max-width: 100%; max-height: 88vh; border-radius: var(--a11y-r-xl) var(--a11y-r-xl) 0 0; transform-origin: bottom center; transform: translateY(100%); padding-bottom: max(20px, env(safe-area-inset-bottom)); } .ja-a11y.is-open .ja-a11y__panel { transform: translateY(0); } } /* ---------- 7. Respect reduced motion ------------------------------- */ @media (prefers-reduced-motion: reduce) { .ja-a11y__launcher, .ja-a11y__panel, .ja-a11y__backdrop, .ja-a11y__switch, .ja-a11y__switch::after { transition-duration: 0.001ms !important; } } /* ==================================================================== GLOBAL HELPERS — toggled by classes on These intentionally use !important and broad selectors so they win against page styles; they are gated behind a state class, so they are inert until the user opts in. ==================================================================== */ /* --- Text size (root font-size scaling; rem/em-based type scales) --- */ html.a11y-large-text { font-size: 112.5%; } /* ~18px base */ html.a11y-xl-text { font-size: 125%; } /* ~20px base */ /* styles.css sets body { font-size: 16px } in px, which would ignore the root bump — so re-anchor body to rem when a size class is active. */ html.a11y-large-text body, html.a11y-xl-text body { font-size: 1rem !important; } /* --- Increased contrast --- Darken dark backgrounds toward pure ink, brighten text to near-white, strengthen borders. Keep brand cyan legible (do not recolor it away). */ html.a11y-contrast body { background: #000308 !important; } html.a11y-contrast .theme-dark, html.a11y-contrast .theme-deep, html.a11y-contrast .hero, html.a11y-contrast .channels, html.a11y-contrast .why, html.a11y-contrast .roles, html.a11y-contrast .how, html.a11y-contrast .sequence, html.a11y-contrast .inquiry, html.a11y-contrast .ftr { background: #000308 !important; } /* Light sections: push to pure white + ink text */ html.a11y-contrast .theme-light, html.a11y-contrast .theme-paper, html.a11y-contrast .advisor, html.a11y-contrast .faq, html.a11y-contrast .insights { background: #FFFFFF !important; } /* Brighten soft/muted text on dark to the full on-dark color */ html.a11y-contrast .theme-dark, html.a11y-contrast .theme-deep, html.a11y-contrast .hero, html.a11y-contrast .channels, html.a11y-contrast .why, html.a11y-contrast .roles, html.a11y-contrast .how, html.a11y-contrast .sequence, html.a11y-contrast .inquiry, html.a11y-contrast .ftr { color: #FFFFFF !important; } html.a11y-contrast .lead, html.a11y-contrast .hero__sub, html.a11y-contrast .step__desc, html.a11y-contrast .frame__desc, html.a11y-contrast .cb__desc, html.a11y-contrast .role__desc, html.a11y-contrast .why-card__desc, html.a11y-contrast .ftr__claim, html.a11y-contrast .ftr ul a, html.a11y-contrast .hero__trust, html.a11y-contrast .form-row label { color: #EAF4FF !important; } html.a11y-contrast .ftr__org, html.a11y-contrast .ftr__seo, html.a11y-contrast .ftr__base, html.a11y-contrast .stat__label, html.a11y-contrast .frame__num, html.a11y-contrast .hero__trust { color: #C7DCF2 !important; } /* Light-section text -> deep ink */ html.a11y-contrast .advisor__copy p, html.a11y-contrast .faq__body, html.a11y-contrast .post__excerpt, html.a11y-contrast .lead { color: #0B1D3A !important; } html.a11y-contrast .advisor, html.a11y-contrast .faq, html.a11y-contrast .insights { color: #0B1D3A !important; } /* Strengthen rules / card borders globally */ html.a11y-contrast .glass, html.a11y-contrast .form-card, html.a11y-contrast .cb, html.a11y-contrast .role, html.a11y-contrast .why-card, html.a11y-contrast .frame, html.a11y-contrast .step__num, html.a11y-contrast .faq__item, html.a11y-contrast .post, html.a11y-contrast .pill, html.a11y-contrast .btn--ghost { border-color: rgba(127, 224, 255, 0.55) !important; } html.a11y-contrast .faq__item, html.a11y-contrast .post { border-color: rgba(11, 29, 58, 0.45) !important; } /* Strengthen the a11y panel border too, for self-consistency */ html.a11y-contrast .ja-a11y__panel { border-color: rgba(127, 224, 255, 0.55) !important; } /* --- Underline all links --- */ html.a11y-underline a { text-decoration: underline !important; text-underline-offset: 2px; } /* Do not underline icon-only / structural buttons styled as links inside the toolbar */ html.a11y-underline .ja-a11y a { text-decoration: underline !important; } /* --- Pause / freeze all animation & smooth scroll --- */ html.a11y-pause-motion *, html.a11y-pause-motion *::before, html.a11y-pause-motion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } html.a11y-pause-motion { scroll-behavior: auto !important; } /* --- High-legibility readable font + looser rhythm --- */ html.a11y-readable body, html.a11y-readable body * { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif !important; } /* Keep the toolbar's monospace labels readable but consistent — allow it */ html.a11y-readable body { line-height: 1.7 !important; letter-spacing: 0.012em !important; word-spacing: 0.04em !important; } html.a11y-readable p, html.a11y-readable li, html.a11y-readable .lead, html.a11y-readable .hero__sub, html.a11y-readable .faq__body, html.a11y-readable .post__excerpt { line-height: 1.75 !important; }