/* ═══════════════════════════════════════════════════════════════════════════
   a11y.css – Barrierefreiheits-Variablen und -Regeln
   /css/ | MoAktor

   Konsumiert die CSS-Custom-Properties, die von
   js/modules/aura-preferences-bootstrap.js und
   js/modules/aura-preferences.js gesetzt werden.

   ── Werte ──────────────────────────────────────────────────────────────
   --a11y-font-scale       1.0 (0.9–1.4)
   --a11y-line-height      1.6 (1.4–2.0)
   --a11y-letter-spacing   0   (0–0.06em)
   --a11y-focus-ring       2px (2–5px)
   data-a11y-reduce-motion 'system'(default) | 'on' | 'off'

   ── Systempräferenzen ──────────────────────────────────────────────────
   prefers-reduced-motion   wird respektiert, außer der Nutzer hat
                            explizit 'off' gesetzt
   prefers-contrast: more   verstärkt den Fokus-Ring
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Defaults auf :root, falls kein JS-Bootstrap gelaufen ist ────────── */
:root {
  --a11y-font-scale: 1;
  --a11y-line-height: 1.6;
  --a11y-letter-spacing: 0em;
  --a11y-focus-ring: 2px;
  --a11y-focus-color: #d4af37;
}

/* ── Skalierung der Basis-Schriftgröße ─────────────────────────────────
   html { font-size } beeinflusst alle rem-Werte im Dokument. Das ist
   der saubere Weg – wer px-Werte nutzt, ist selbst schuld (und hat
   ohnehin schon ein Barrierefreiheits-Problem unabhängig von uns). */
html {
  font-size: calc(100% * var(--a11y-font-scale));
}

body {
  line-height: var(--a11y-line-height);
  letter-spacing: var(--a11y-letter-spacing);
}

/* ── Fokus-Ring: stärker und konsistent ──────────────────────────────── */
*:focus-visible {
  outline: var(--a11y-focus-ring) solid var(--a11y-focus-color);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── Bewegung reduzieren: Nutzer-Entscheidung 'on' ───────────────────── */
html[data-a11y-reduce-motion="on"] *,
html[data-a11y-reduce-motion="on"] *::before,
html[data-a11y-reduce-motion="on"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

/* ── Bewegung reduzieren: System-Präferenz ────────────────────────────
   Wirkt nur, wenn der Nutzer NICHT explizit 'off' gesetzt hat. */
@media (prefers-reduced-motion: reduce) {
  html:not([data-a11y-reduce-motion="off"]) *,
  html:not([data-a11y-reduce-motion="off"]) *::before,
  html:not([data-a11y-reduce-motion="off"]) *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Bewegung reduzieren: Nutzer-Entscheidung 'off' überschreibt System
   Wenn der Nutzer explizit 'off' gewählt hat, stellen wir sicher, dass
   @media (prefers-reduced-motion: reduce) NICHT greift. Die Regel oben
   schließt das schon aus (html:not([...="off"])), aber wir müssen
   sicherstellen, dass die Animationen dann tatsächlich laufen.
   Deshalb: keine Regel hier nötig, Standard-CSS gilt. */

/* ── Kontrast: System-Präferenz ───────────────────────────────────────
   v1 reagiert passiv auf prefers-contrast: more – der Fokus-Ring wird
   dicker, das ist die wichtigste Anpassung für Tastaturnutzer.
   Ein echter Kontrast-Modus (Palettenwechsel) folgt in v2. */
@media (prefers-contrast: more) {
  :root {
    --a11y-focus-ring: 4px;
    --a11y-focus-color: #ffffff;
  }
  *:focus-visible {
    outline-offset: 3px;
  }
}

/* ── Rücksicht auf hohe Zoom-Stufen ───────────────────────────────────
   Wenn die Schriftgröße sehr groß wird (1.4), können manche Layouts
   brechen. Die folgenden Regeln sind defensiv – sie greifen nur, wenn
   der Nutzer bewusst skaliert hat. */
html[style*="--a11y-font-scale: 1.3"] body,
html[style*="--a11y-font-scale: 1.4"] body {
  /* Wir erlauben Umbruch statt Overflow */
  word-break: break-word;
}