/* ============================================================================
   rd-a11y.css — seitenspezifisch: barrierefreiheit-statt-overlay.php (NEU 29.10.2026)
   Laedt nach rd-base.css und rd-standard.css ($page_css = ['standard','a11y']).
   Nutzt nur Tokens aus tokens.css. Groessen in rem, damit Browser-Schriftgroesse
   und Zoom greifen. Kontraste geprueft (Text >= 4,5:1).
   ============================================================================ */

/* --- Links im Fliesstext: immer unterstrichen (nicht nur Farbe) ----------- */
.a11y-link{color:var(--sd-ink);text-decoration:underline;text-decoration-color:var(--sd-accent-deep);text-decoration-thickness:2px;text-underline-offset:3px;transition:text-decoration-color .2s ease}
.a11y-link:hover{text-decoration-color:var(--sd-ink)}
.a11y-crumb{color:inherit;text-decoration:underline;text-decoration-color:rgba(14,14,12,.25);text-underline-offset:3px}
.a11y-crumb:hover{color:var(--sd-ink)}

/* --- Fussnoten --------------------------------------------------------------
   Inline-Links im Satz sind von WCAG 2.5.8 (Zielgröße) ausgenommen; trotzdem
   mit Fläche, damit sie gut zu treffen sind. */
.fn{font-size:.68em;line-height:0;vertical-align:super;margin-left:.12em}
.fn a{display:inline-block;min-width:1.25rem;min-height:1.25rem;padding:0 .2rem;text-align:center;line-height:1.25rem;font-weight:600;color:var(--sd-ink);text-decoration:none;border-radius:.4rem;background:rgba(var(--sd-accent-rgb),.55);transform:translateY(-.15em)}
.fn a:hover{background:var(--sd-accent)}
.a11y-stats .fn a{color:var(--sd-accent-ink);background:var(--sd-accent)}

/* --- Hero-Raster ---------------------------------------------------------- */
.a11y-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem, 5vw, 5rem);align-items:start}

/* --- Übersicht der fünf Einwände (Sprungnavigation im Einstieg) ----------- */
.a11y-index{background:var(--sd-white);border:1px solid var(--sd-line);border-radius:1rem;padding:1.3rem 1.5rem 1rem;max-width:34rem}
.a11y-index-h{font-size:.72rem;text-transform:uppercase;letter-spacing:.22em;color:#6E6E67;margin:0 0 .5rem}
.a11y-index ol{list-style:none;margin:0;padding:0}
.a11y-index li{border-top:1px solid var(--sd-line-soft)}
.a11y-index li:first-child{border-top:0}
.a11y-index a{display:flex;gap:1rem;align-items:baseline;padding:.6rem 0;font-size:.95rem;line-height:1.45;color:var(--sd-ink);text-decoration:none}
.a11y-index a span{font-family:var(--sd-font-display);font-size:.75rem;color:#6E6E67;min-width:1.4rem}
.a11y-index a:hover{text-decoration:underline;text-decoration-color:var(--sd-accent-deep);text-decoration-thickness:2px;text-underline-offset:3px}
.a11y-index-ar{margin-left:auto;flex:none;align-self:center;color:#6E6E67;transition:transform .2s ease,color .2s ease}
.a11y-index a:hover .a11y-index-ar,.a11y-index a:focus-visible .a11y-index-ar{color:var(--sd-ink);transform:translateY(2px)}
@media (prefers-reduced-motion:reduce){.a11y-index a:hover .a11y-index-ar{transform:none}}

/* --- Abbildung: Seite + Overlay --------------------------------------------
   Rein illustrativ (aria-hidden); die Aussage steht in der figcaption. */
.a11y-fig{margin:0}
.a11y-fig-stage{position:relative;padding:0 0 4.5rem}
.a11y-fig-page{background:var(--sd-white);border:1px solid var(--sd-line-strong);border-radius:1rem;overflow:hidden;box-shadow:0 30px 60px -30px rgba(14,14,12,.25)}
.a11y-fig-bar{display:flex;align-items:center;gap:.35rem;padding:.7rem .9rem;border-bottom:1px solid var(--sd-line);background:var(--sd-paper)}
.a11y-fig-bar span{width:.55rem;height:.55rem;border-radius:50%;background:rgba(14,14,12,.14)}
.a11y-fig-bar em{font-style:normal;font-size:.72rem;color:#6E6E67;margin-left:.6rem;font-family:var(--sd-font-mono)}
.a11y-fig-code{padding:1.1rem 1.1rem 1.3rem}
.a11y-fig-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.35rem .8rem;padding:.6rem 0;border-top:1px dashed var(--sd-line)}
.a11y-fig-row:first-child{border-top:0}
.a11y-fig-row code{font-family:var(--sd-font-mono);font-size:.78rem;color:var(--sd-ink);white-space:nowrap}
.a11y-fig-flag{display:inline-flex;align-items:center;gap:.35rem;font-size:.72rem;line-height:1.3;color:#9A2B1E;background:#FBEDEA;border-radius:999px;padding:.22rem .6rem;white-space:nowrap}
.a11y-fig-flag::before{content:"";width:.45rem;height:.45rem;border-radius:50%;background:#C2412F}

/* Das Overlay: Glas-Material, verdeckt die Seite teilweise. */
.a11y-fig-overlay{position:absolute;right:-.5rem;bottom:0;width:min(15rem, 62%);padding:1rem 1.1rem .7rem;border-radius:1rem;background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);border:1px solid rgba(255,255,255,.7);box-shadow:0 24px 48px -18px rgba(14,14,12,.35),inset 0 1px 0 rgba(255,255,255,.8)}
.a11y-fig-ov-h{display:flex;align-items:center;gap:.55rem;font-size:.85rem;font-weight:600;color:var(--sd-ink);margin:0 0 .5rem}
.a11y-fig-ov-ic{width:1.5rem;height:1.5rem;border-radius:50%;background:#1F5FD6;position:relative;flex:none}
.a11y-fig-ov-ic::before{content:"";position:absolute;left:50%;top:.28rem;width:.32rem;height:.32rem;margin-left:-.16rem;border-radius:50%;background:#fff}
.a11y-fig-ov-ic::after{content:"";position:absolute;left:.38rem;right:.38rem;top:.7rem;height:.5rem;border-top:2px solid #fff;border-radius:0}
.a11y-fig-opt{display:flex;align-items:center;justify-content:space-between;font-size:.8rem;color:var(--sd-ink-muted);margin:0;padding:.42rem 0;border-top:1px solid rgba(14,14,12,.08)}
.a11y-fig-opt i{width:1.8rem;height:1rem;border-radius:999px;background:rgba(14,14,12,.18);position:relative}
.a11y-fig-opt i::after{content:"";position:absolute;top:.12rem;left:.12rem;width:.76rem;height:.76rem;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.a11y-fig-opt i.on{background:#1F5FD6}
.a11y-fig-opt i.on::after{left:auto;right:.12rem}
.a11y-fig figcaption{font-size:.9rem;line-height:1.55;color:var(--sd-ink-muted);margin:1rem 0 0;max-width:40ch}

/* --- Vergleichstabelle ------------------------------------------------------ */
.a11y-vs{width:100%;border-collapse:collapse;font-size:.95rem;line-height:1.6}
.a11y-vs caption{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.22em;color:#6E6E67;padding:0 0 1rem}
.a11y-vs thead th{text-align:left;font-weight:500;font-size:.82rem;color:var(--sd-ink);padding:0 1rem .7rem 0;border-bottom:1px solid var(--sd-line-strong)}
.a11y-vs tbody th,.a11y-vs td{text-align:left;vertical-align:top;padding:1rem 1rem 1rem 0;border-bottom:1px solid rgba(14,14,12,.12)}
.a11y-vs tbody th{font-weight:500;color:var(--sd-ink);width:40%}
.a11y-vs td{color:var(--sd-ink-muted)}

/* --- Kennzahlen ------------------------------------------------------------- */
.a11y-stat-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(2rem, 4vw, 3.5rem)}
.a11y-stat-grid li{border-top:1px solid rgba(255,255,255,.2);padding-top:1.4rem}
.a11y-stat-num{font-family:var(--sd-font-display);font-size:clamp(2.6rem, 4.6vw, 4.2rem);line-height:1;letter-spacing:-.035em;color:var(--sd-accent);margin:0 0 1rem;font-variant-numeric:tabular-nums}
.a11y-stat-txt{font-size:.95rem;line-height:1.65;color:rgba(255,255,255,.78);margin:0;max-width:34ch}

/* --- Liste „Was wir stattdessen tun" ----------------------------------------- */
.a11y-points{list-style:none;margin:0;padding:0}
.a11y-points li{padding:1.2rem 0;border-top:1px solid rgba(14,14,12,.12)}
.a11y-points strong{font-weight:500;display:block;margin-bottom:.3rem;color:var(--sd-ink)}
.a11y-points p{font-size:.92rem;line-height:1.65;color:var(--sd-ink-muted);margin:0}

/* --- Quellen ---------------------------------------------------------------- */
.a11y-sources{margin:0;padding:0 0 0 1.6rem;font-size:.9rem;line-height:1.65;color:var(--sd-ink-muted)}
.a11y-sources li{padding:.45rem 0 .45rem .3rem;scroll-margin-top:110px}
.a11y-sources li::marker{font-family:var(--sd-font-display);color:var(--sd-ink)}
.a11y-sources li:target{background:rgba(var(--sd-accent-rgb),.45);border-radius:.4rem}
.a11y-stand{font-size:.82rem;line-height:1.6;color:#6E6E67;margin:1.6rem 0 0;max-width:66ch}

/* FAQ-Kopf nicht sticky (kurze Liste) */
.a11y-page .faq-head{position:static}

/* --- Responsiv -------------------------------------------------------------- */
@media (max-width:900px){
  .a11y-hero-grid{grid-template-columns:1fr}
  .a11y-stat-grid{grid-template-columns:1fr}
  .a11y-fig{max-width:34rem}
}
@media (max-width:560px){
  .a11y-vs thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .a11y-vs,.a11y-vs tbody,.a11y-vs tr,.a11y-vs th,.a11y-vs td{display:block;width:auto}
  .a11y-vs caption{display:block;width:auto}
  .a11y-vs tbody th{padding:1rem 0 .3rem;border-bottom:0;width:auto}
  .a11y-vs td{padding:0 0 1rem}
  .a11y-fig-overlay{right:0;width:72%}
  .a11y-fig-row code{white-space:normal;word-break:break-all}
}

/* --- Nutzer-Einstellungen respektieren ------------------------------------- */
@media (prefers-reduced-transparency:reduce){
  .a11y-fig-overlay{background:var(--sd-white);-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (prefers-contrast:more){
  .a11y-index,.a11y-fig-page,.a11y-fig-overlay{border-color:var(--sd-ink)}
  .a11y-vs tbody th,.a11y-vs td,.a11y-points li{border-color:var(--sd-ink)}
  .a11y-fig-overlay{background:var(--sd-white)}
}
@media (forced-colors:active){
  .a11y-fig-flag::before{forced-color-adjust:none;background:CanvasText}
}