/* ============================================================
   Barrierefreiheits-Werkzeuge (opt-in). Greift nur, wenn das
   a11y.js die Klassen auf <html> setzt. Der Standard bleibt unberührt.
   ============================================================ */

/* ---- Auslöser-Button + Panel (immer sichtbar, position:fixed, außerhalb des Layouts) ---- */
.a11y-fab{
  position:fixed; left:18px; bottom:18px; z-index:2000;
  width:52px; height:52px; border-radius:50%;
  background:#df6f2c; color:#0e140f; border:2px solid #0e140f;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.45);
}
.a11y-fab:hover{ background:#e8884a; }
.a11y-fab svg{ width:30px; height:30px; }
.a11y-panel{
  position:fixed; left:18px; bottom:80px; z-index:2001;
  width:300px; max-width:calc(100vw - 36px);
  background:#18221a; color:#e9e3d4; border:1px solid rgba(233,227,212,.28);
  border-radius:12px; padding:18px 18px 14px;
  box-shadow:0 10px 34px rgba(0,0,0,.55);
  font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif; font-size:15px; line-height:1.5;
}
.a11y-panel[hidden]{ display:none; }
.a11y-panel h2{ font-size:1.05rem; margin:0 0 4px; color:#e9e3d4; }
.a11y-panel .a11y-sub{ color:#aeb39d; font-size:.82rem; margin:0 0 14px; }
.a11y-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid rgba(233,227,212,.13); }
.a11y-row:last-of-type{ border-bottom:0; }
.a11y-row .lbl{ flex:1; }
/* Schalter (role=switch) */
.a11y-switch{
  flex:0 0 auto; width:46px; height:26px; border-radius:999px;
  background:#0e140f; border:1px solid rgba(233,227,212,.4); position:relative; cursor:pointer; padding:0;
}
.a11y-switch::after{ content:""; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:#aeb39d; transition:left .15s, background .15s; }
.a11y-switch[aria-checked="true"]{ background:#df6f2c; border-color:#df6f2c; }
.a11y-switch[aria-checked="true"]::after{ left:22px; background:#0e140f; }
/* Schrift-Stepper */
.a11y-step{ display:flex; align-items:center; gap:8px; }
.a11y-step button{
  width:34px; height:34px; border-radius:8px; border:1px solid rgba(233,227,212,.4);
  background:#0e140f; color:#e9e3d4; font-size:16px; cursor:pointer; line-height:1;
}
.a11y-step button:disabled{ opacity:.4; cursor:default; }
.a11y-step .val{ min-width:46px; text-align:center; color:#aeb39d; font-variant-numeric:tabular-nums; }
.a11y-reset{ margin-top:12px; width:100%; padding:9px; border-radius:8px; border:1px solid rgba(233,227,212,.4); background:transparent; color:#e9e3d4; cursor:pointer; }
.a11y-reset:hover{ border-color:#df6f2c; }
/* Sichtbarer Fokus im Panel/Button (auch wenn die Seite Fokus anders behandelt) */
.a11y-fab:focus-visible, .a11y-panel :focus-visible{ outline:3px solid #ffffff; outline-offset:2px; }

/* ============================================================
   Verbesserungs-Ebenen — wirken NUR mit gesetzter Klasse auf <html>.
   Alle frei kombinierbar (eigene, stapelbare Klassen).
   ============================================================ */

/* (1) Hoher Kontrast — überschreibt die Farb-Variablen (höhere Spezifität als :root) */
html.a11y-contrast{
  --birch:#ffffff; --birch-dim:#f1ede1; --birch-faint:#e7e2d3;
  --orange:#ffb066; --orange-soft:#ffc488;
  --line:rgba(255,255,255,.5); --line-strong:rgba(255,255,255,.75);
  --surface:#0a0f0b; --surface-2:#0f150f;
}
html.a11y-contrast a{ text-decoration:underline; }
html.a11y-contrast .btn.ghost{ border-color:#ffffff; }

/* (2) Größere Schrift — skaliert die rem-Basis; body folgt der Skalierung statt fixer 18px */
html.a11y-fs-115{ font-size:115%; }
html.a11y-fs-130{ font-size:130%; }
html.a11y-fs-150{ font-size:150%; }
html.a11y-fs-115 body, html.a11y-fs-130 body, html.a11y-fs-150 body{ font-size:1.125rem; }

/* (3) Bewegung reduzieren — Animationen/Transitions/Smooth-Scroll aus */
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; scroll-behavior:auto !important;
}
html.a11y-motion-off .rv{ opacity:1 !important; transform:none !important; }

/* (4) Lesehilfen — mehr Abstand, unterstrichene Links, gut lesbare Schrift */
html.a11y-reading body{ line-height:1.85; letter-spacing:.02em; word-spacing:.08em; }
html.a11y-reading p, html.a11y-reading li{ line-height:1.95; }
html.a11y-reading a{ text-decoration:underline; }
html.a11y-reading body,
html.a11y-reading input, html.a11y-reading select, html.a11y-reading textarea, html.a11y-reading button{
  font-family:"Atkinson Hyperlegible","Verdana",system-ui,-apple-system,Arial,sans-serif;
}