/* ========================================================================== SALVIS – Barrierefreiheit: Skip-Link, Nutzer-Widget & adaptive Einstellungen Besucher passen Schriftgröße, Kontrast, Animationen, Lesbarkeit selbst an. Einstellungen werden lokal (localStorage) gespeichert – kein Drittanbieter, DSGVO-freundlich. ========================================================================== */ /* ---- Skip-Link (Tastatur: „Zum Inhalt springen") ---- */ .skip-link{ position:fixed; left:50%; top:-60px; transform:translateX(-50%); z-index:200; background:var(--c-navy-900); color:#fff; padding:.7em 1.2em; border-radius:0 0 var(--radius) var(--radius); font-weight:var(--fw-semibold); text-decoration:none; transition:top .2s ease; } .skip-link:focus{ top:0; box-shadow:var(--ring); } /* ---- Floating-Button (FAB) ---- */ .a11y-fab{ position:fixed; right:18px; bottom:18px; z-index:190; width:54px; height:54px; border-radius:50%; border:0; cursor:pointer; background:var(--c-navy-900); color:#fff; display:grid; place-items:center; box-shadow:var(--shadow-lg); transition:transform var(--transition), background var(--transition); } .a11y-fab:hover{ transform:translateY(-2px); background:var(--c-navy-700); } .a11y-fab svg{ width:30px; height:30px; fill:#fff; } /* ---- Panel ---- */ .a11y-panel{ position:fixed; right:18px; bottom:84px; z-index:191; width:min(340px,calc(100vw - 36px)); background:#fff; color:var(--c-text); border:1px solid var(--c-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:var(--sp-5); display:none; } .a11y-panel[data-open="true"]{ display:block; } .a11y-panel h2{ font-size:var(--fs-lg); margin:0 0 var(--sp-2); } .a11y-panel__intro{ font-size:var(--fs-xs); color:var(--c-text-muted); margin:0 0 var(--sp-4); } .a11y-row{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); padding:.55em 0; border-bottom:1px solid var(--c-grey-100); } .a11y-row__label{ font-size:var(--fs-sm); font-weight:var(--fw-semibold); color:var(--c-navy-900); } .a11y-steps{ display:flex; gap:.4em; align-items:center; } .a11y-btn{ border:1.5px solid var(--c-border); background:#fff; color:var(--c-navy-900); border-radius:var(--radius-sm); padding:.35em .7em; font-weight:var(--fw-semibold); cursor:pointer; font-size:var(--fs-sm); } .a11y-btn[aria-pressed="true"]{ background:var(--c-navy-900); color:#fff; border-color:var(--c-navy-900); } .a11y-toggle{ min-width:64px; text-align:center; } .a11y-reset{ margin-top:var(--sp-4); width:100%; } .a11y-panel__close{ position:absolute; top:10px; right:12px; border:0; background:none; font-size:1.4rem; line-height:1; cursor:pointer; color:var(--c-text-muted); } /* ========================================================================== Adaptive Einstellungen (am gesetzt) ========================================================================== */ /* Schriftgröße (skaliert alle rem-basierten Größen über die Wurzel) */ html[data-fontscale="90"] { font-size:90%; } html[data-fontscale="110"] { font-size:110%; } html[data-fontscale="125"] { font-size:125%; } html[data-fontscale="140"] { font-size:140%; } /* Höherer Kontrast */ html.a11y-contrast{ --c-text:#0a0a14; --c-text-muted:#2c3142; --c-border:#7c8696; --c-blue-600:#0b5a86; } html.a11y-contrast p, html.a11y-contrast li, html.a11y-contrast .u-muted{ color:#15171f; } html.a11y-contrast a:not(.btn){ text-decoration:underline; text-underline-offset:2px; } html.a11y-contrast .card, html.a11y-contrast .form-card{ border-color:#7c8696; } /* Animationen reduzieren (vom Nutzer erzwungen) */ html.a11y-noanim *, html.a11y-noanim *::before, html.a11y-noanim *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } html.a11y-noanim [data-reveal]{ opacity:1 !important; transform:none !important; } /* Bessere Lesbarkeit */ html.a11y-readable p, html.a11y-readable li{ line-height:1.9; letter-spacing:.015em; } html.a11y-readable{ word-spacing:.05em; } /* Links durchgängig unterstreichen */ html.a11y-underline a:not(.btn){ text-decoration:underline; text-underline-offset:2px; } /* Legasthenie-Schrift: gut lesbare, weit verfügbare Schrift + großzügige Abstände */ html.a11y-legible{ --font-display: Verdana, "Trebuchet MS", Tahoma, sans-serif; --font-text: Verdana, "Trebuchet MS", Tahoma, sans-serif; } html.a11y-legible p, html.a11y-legible li{ letter-spacing:.03em; word-spacing:.08em; line-height:1.9; } /* ---- Dunkelmodus (vom Nutzer wählbar) ---- */ html.a11y-dark{ --c-bg:#0b0f24; --c-bg-alt:#11173a; --c-surface:#161d40; --c-text:#eaf0ff; --c-text-muted:#aab3cf; --c-border:#2b3566; --c-heading:#f3f6ff; --c-blue-600:#6ab8e8; --c-grey-50:#11173a; --c-grey-100:#1b2247; --c-grey-300:#3a447a; } html.a11y-dark body{ background:var(--c-bg); color:var(--c-text); } /* navy-Texte in Komponenten auf Heading-Farbe heben */ html.a11y-dark .accordion__trigger, html.a11y-dark .offer-card__price, html.a11y-dark .form-label, html.a11y-dark .a11y-row__label, html.a11y-dark .card__link:hover, html.a11y-dark .info-row a, html.a11y-dark .object-tag, html.a11y-dark .chip{ color:var(--c-heading); } html.a11y-dark .object-tag, html.a11y-dark .chip{ background:var(--c-surface); border-color:var(--c-border); } /* heller Sekundär-Button auch auf hellen (jetzt dunklen) Flächen */ html.a11y-dark .btn--ghost{ --btn-fg:#eaf0ff; border-color:rgba(255,255,255,.5); } html.a11y-dark .btn--ghost:hover{ background:#fff; color:var(--c-navy-900); } /* Eingebettete Vorschau-Header bleiben dunkel (passt); Panel/FAB unverändert */