/* ============================================================
   a11y.css — Barrierefreiheit (WCAG 2.2 AA Zielkonformität)
   Fokus-Führung, Skip-Link, reduced-motion, 2D-Umschalter.
   Die flache Ansicht ist IMMER der gleichwertige, erreichbare Pfad.
   ============================================================ */

/* Skip-Link */
.skip-link {
  position: absolute; left: 0.5rem; top: -3rem; z-index: 100;
  background: var(--accent); color: #04122b; font-weight: 700;
  padding: 0.6rem 1rem; border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  text-decoration: none; transition: top 0.15s ease;
}
.skip-link:focus { top: 0; }

/* Sichtbarer, kontraststarker Fokus überall */
:focus-visible {
  outline: 3px solid var(--accent-bright);
  outline-offset: 2px;
  border-radius: 4px;
}
a:focus-visible, .btn:focus-visible, summary:focus-visible, button:focus-visible {
  outline: 3px solid var(--accent-bright);
  outline-offset: 3px;
}

/* ------------------------------------------------------------
   2D-/barrierefreie Ansicht ↔ 3D-Welt Umschalter
   Immer sichtbar (unten rechts), ein Klick genügt.
   ------------------------------------------------------------ */
.view-toggle {
  position: fixed; z-index: 60; right: 1rem; bottom: 1rem;
  display: flex; gap: 0.4rem; align-items: center;
  background: var(--bg-panel-solid); border: 1px solid var(--line);
  border-radius: 99px; padding: 0.35rem; box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}
.view-toggle button {
  font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer;
  color: var(--ink-soft); background: transparent; border: 0;
  padding: 0.45rem 0.85rem; border-radius: 99px; display: inline-flex; align-items: center; gap: 0.4rem;
}
.view-toggle button[aria-pressed="true"] {
  color: #04122b; background: linear-gradient(180deg, var(--accent-bright), var(--accent));
}
.view-toggle button:hover { color: #fff; }
.view-toggle button[aria-pressed="true"]:hover { color: #04122b; }

/* Standard = flache Ansicht sichtbar, Welt-Overlay versteckt */
#world { display: none; }

/* Wenn die Welt aktiv ist: Overlay zeigen, Dokument-Scroll sperren */
body.world-active { overflow: hidden; }
body.world-active #world { display: block; }
body.world-active .flat-view { display: none; }

/* Hinweis, wenn JS fehlt: der Welt-Button ist ausgeblendet,
   die flache Ansicht bleibt die einzige (vollständige) Realität. */
.no-js .enter-world { display: none; }

/* ------------------------------------------------------------
   prefers-reduced-motion: reduziert dekorative Animationen.
   Die 3D-Welt bleibt per Klick nutzbar (Opt-in) — die flache
   Ansicht ist der Standard und der gleichwertige Pfad.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Reduced-transparency / forced-colors Rücksicht */
@media (forced-colors: active) {
  .btn, .view-toggle, .answer-box, table { border: 1px solid CanvasText; }
}