/* =========================================================================
   ToDo-Schule — Barrierefreiheit (a11y) + Install-Chip
   Geladen ZULETZT, damit Fokus-/Motion-Regeln greifen.
   ========================================================================= */

/* ── prefers-reduced-motion: Animationen/Übergänge deaktivieren ───────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Deutlich sichtbarer Tastatur-Fokus ───────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--ring) !important;
  border-radius: 6px;
}
/* Maus-Klicks sollen keinen Fokusring zeigen (nur Tastatur). */
:focus:not(:focus-visible) { outline: none; }

/* ── Nur für Screenreader sichtbar ────────────────────────────────────── */
.sr-only {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Skip-Link (springt zum Hauptinhalt) */
.skip-link {
  position: fixed; top: -60px; left: 12px; z-index: 99999;
  background: var(--accent); color: var(--accent-ink);
  padding: 10px 16px; border-radius: 0 0 10px 10px; font-weight: 700;
  transition: top .2s;
}
.skip-link:focus { top: 0; }

/* ── Install-Chip (PWA) ───────────────────────────────────────────────── */
.install-chip {
  position: fixed; right: 18px; bottom: 18px; z-index: 9400;
  display: none; align-items: center; gap: 9px;
  padding: 10px 12px 10px 16px; border: 1px solid var(--glass-border, var(--border));
  border-radius: 999px; cursor: pointer;
  background: var(--glass-bg-strong, var(--surface)); color: var(--text);
  font-size: 14px; font-weight: 650; font-family: inherit;
  box-shadow: var(--glass-sh-pop, var(--sh-pop));
  backdrop-filter: blur(18px) saturate(170%);
  transform: translateY(160%); transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.install-chip.show { display: inline-flex; transform: translateY(0); }
.install-ico { font-size: 16px; }
.install-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  color: var(--text-3); font-size: 16px; line-height: 1;
}
.install-x:hover { background: var(--surface-2); color: var(--coral, #ef4444); }
@media (max-width: 599px){ .install-chip{ right: 12px; bottom: 70px; } }