/* ── Accessibility-Widget (Badge + Panel) ───────────────────────────── Eigenständiges Stylesheet (nicht Teil von critical.css/main.css), damit es nicht in den zweigleisigen CSS-Build-Workflow des Projekts muss. Alle Effekt-Klassen (.a11y-*) landen auf und wirken global. */ /* ── Effekt-Klassen ────────────────────────────────────────────────── */ /* Skaliert die Typo-Tokens direkt statt html { font-size: % } zu setzen — das Projekt verwendet durchgängig px/clamp(px) statt rem, ein Root-%-Wert hätte also keine Wirkung. Basiswerte hier sind Duplikate aus tokens.css und müssen bei Änderungen dort mitgezogen werden. */ :root.a11y-large-text { --fs-2xs: calc(12px * 1.18); --fs-xs: calc(13px * 1.18); --fs-sm: calc(14px * 1.18); --fs-base: calc(16px * 1.18); --fs-md: calc(18px * 1.18); --fs-lg: calc(20px * 1.18); --fs-xl: calc(22px * 1.18); --fs-2xl: calc(24px * 1.18); --fs-lead: calc(clamp(16px, 1.1vw, 18px) * 1.18); --fs-h5: calc(clamp(18px, 1.5vw, 22px) * 1.18); --fs-h4: calc(clamp(20px, 2.2vw, 28px) * 1.18); --fs-h3: calc(clamp(24px, 2.6vw, 32px) * 1.18); --fs-h2: calc(clamp(28px, 3vw, 43px) * 1.18); --fs-h1: calc(clamp(32px, 4.2vw, 52px) * 1.18); --fs-display: calc(clamp(40px, 6vw, 80px) * 1.18); --fs-stat: calc(clamp(36px, 5vw, 60px) * 1.18); } :root.a11y-large-text-2 { --fs-2xs: calc(12px * 1.36); --fs-xs: calc(13px * 1.36); --fs-sm: calc(14px * 1.36); --fs-base: calc(16px * 1.36); --fs-md: calc(18px * 1.36); --fs-lg: calc(20px * 1.36); --fs-xl: calc(22px * 1.36); --fs-2xl: calc(24px * 1.36); --fs-lead: calc(clamp(16px, 1.1vw, 18px) * 1.36); --fs-h5: calc(clamp(18px, 1.5vw, 22px) * 1.36); --fs-h4: calc(clamp(20px, 2.2vw, 28px) * 1.36); --fs-h3: calc(clamp(24px, 2.6vw, 32px) * 1.36); --fs-h2: calc(clamp(28px, 3vw, 43px) * 1.36); --fs-h1: calc(clamp(32px, 4.2vw, 52px) * 1.36); --fs-display: calc(clamp(40px, 6vw, 80px) * 1.36); --fs-stat: calc(clamp(36px, 5vw, 60px) * 1.36); } .a11y-stop-animations *, .a11y-stop-animations *::before, .a11y-stop-animations *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .a11y-line-spacing body, .a11y-line-spacing p, .a11y-line-spacing li, .a11y-line-spacing td { line-height: 2.2 !important; } .a11y-highlight-links a { outline: 2px solid var(--c-gold, #D29F13); outline-offset: 2px; text-decoration: underline !important; } /* Hoher Kontrast: setzt konkrete Eigenschaften statt Farbvariablen zu überschreiben (fremde Variablennamen sind sonst ein stiller Bruchpunkt, sobald sich Tokens im Projekt ändern). Betrifft bewusst auch das Widget selbst, damit nichts unlesebar wird. */ .a11y-high-contrast body * { background-image: none !important; background-color: #fff !important; color: #000 !important; border-color: #000 !important; } .a11y-high-contrast body a { color: #000 !important; text-decoration: underline !important; } /* Großer Cursor: Farbe ist als JS-Konstante (CURSOR_COLOR) in a11y-widget.js definiert und dort in den Data-URI interpoliert; hier nur der Verweis auf die vom Skript gesetzte CSS-Variable. */ html.a11y-large-cursor, html.a11y-large-cursor * { cursor: var(--a11y-cursor-large, auto) !important; } /* ── Badge ─────────────────────────────────────────────────────────── */ .a11y-badge { position: fixed; left: clamp(12px, 2vw, 24px); bottom: clamp(12px, 2vw, 24px); z-index: 800; display: flex; align-items: center; gap: 8px; background: var(--c-dark, #2D2D2B); color: var(--c-white, #fff); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 999px; padding: 12px 18px 12px 14px; font-family: var(--font-sans, system-ui, sans-serif); font-size: var(--fs-sm, 14px); font-weight: 600; line-height: 1; cursor: pointer; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); transition: transform 0.15s ease; } @media (hover: hover) and (pointer: fine) { .a11y-badge:hover { transform: translateY(-2px); } } .a11y-badge__icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--gradient-gold, linear-gradient(158.2deg, #FDE298 14.29%, #D29F13 97.14%)); color: var(--c-ink, #1a1914); flex-shrink: 0; } .a11y-badge__icon svg { width: 14px; height: 14px; } /* ── Panel ─────────────────────────────────────────────────────────── */ .a11y-panel { position: fixed; left: clamp(12px, 2vw, 24px); bottom: calc(clamp(12px, 2vw, 24px) + 60px); z-index: 800; width: min(320px, calc(100vw - 2 * clamp(12px, 2vw, 24px))); max-height: 80vh; overflow-y: auto; background: var(--c-dark, #2D2D2B); color: var(--c-white, #fff); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 16px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4); font-family: var(--font-sans, system-ui, sans-serif); } .a11y-panel[hidden] { display: none; } .a11y-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .a11y-panel__title { margin: 0; font-size: var(--fs-md, 18px); font-weight: 700; } .a11y-panel__close { background: transparent; border: none; color: var(--c-white, #fff); width: 32px; height: 32px; border-radius: 50%; font-size: 18px; line-height: 1; cursor: pointer; flex-shrink: 0; } @media (hover: hover) and (pointer: fine) { .a11y-panel__close:hover { background: rgba(255, 255, 255, 0.1); } } .a11y-panel__list { list-style: none; margin: 0; padding: 8px; display: flex; flex-direction: column; gap: 4px; } .a11y-option { display: flex; align-items: center; gap: 10px; width: 100%; background: transparent; border: 1px solid transparent; border-radius: 10px; padding: 10px 12px; color: var(--c-white, #fff); font-family: inherit; font-size: var(--fs-sm, 14px); text-align: left; cursor: pointer; } .a11y-option[aria-pressed="true"] { background: rgba(210, 159, 19, 0.18); border-color: var(--c-gold, #D29F13); } @media (hover: hover) and (pointer: fine) { .a11y-option:hover { background: rgba(255, 255, 255, 0.08); } .a11y-option[aria-pressed="true"]:hover { background: rgba(210, 159, 19, 0.26); } } .a11y-option__icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex-shrink: 0; font-size: 14px; font-weight: 700; } .a11y-option__label { flex: 1 1 auto; } .a11y-option__status { font-size: var(--fs-xs, 13px); color: var(--c-gold, #D29F13); font-weight: 700; white-space: nowrap; } .a11y-panel__reset { display: block; width: calc(100% - 16px); margin: 4px 8px 12px; background: transparent; border: 1.5px solid rgba(255, 255, 255, 0.3); border-radius: 50px; padding: 10px 16px; color: var(--c-white, #fff); font-family: inherit; font-size: var(--fs-sm, 14px); font-weight: 600; cursor: pointer; } @media (hover: hover) and (pointer: fine) { .a11y-panel__reset:hover { border-color: var(--c-white, #fff); } } /* ── Fokus ─────────────────────────────────────────────────────────── */ /* Sichtbarer Ring folgt der projektweiten Regel in base.css (:where(a, button, [tabindex]):focus-visible) — hier nichts Eigenes nötig, das Widget nutzt ausschließlich