/* ============================================================
 * Accessibility — WCAG-AA-Konformität (BFSG 2025)
 * ------------------------------------------------------------
 * Skip-Link, Focus-Visible-Ringe, Reduced-Motion-Override.
 * Aria-Markup ist im jeweiligen Template/Snippet inline.
 * ============================================================ */

/* ============================================================
 * 1) Skip-Link — "Zum Inhalt springen"
 * Versteckt bis Tab-Focus, dann oben links als sage-Pill sichtbar.
 * ============================================================ */
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100000; /* über allem inkl. Cookie-Banner */
  display: inline-flex;
  align-items: center;
  padding: 12px 20px;
  background: #9DBC76;
  color: #FFFFFF;
  font-family: 'Onest', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(17, 45, 29, 0.24);
  /* Visuell verstecken bis Focus */
  transform: translateY(-150%);
  transition: transform 220ms ease-out;
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 3px solid #FFFFFF;
  outline-offset: 2px;
}

.skip-link:hover {
  background: #7A9858;
}

/* ============================================================
 * 2) Global Focus-Visible-Ring
 * Tastatur-User sehen klaren Sage-Ring auf allen Inputs/Buttons/Links.
 * `:focus-visible` (statt `:focus`) bedeutet: nur bei Tastatur-Navigation,
 * NICHT bei Maus-Klicks (= bessere UX).
 * ============================================================ */
*:focus-visible {
  outline: 2px solid #9DBC76;
  outline-offset: 2px;
}

/* Spezial-Cases: Buttons/Links die ihren eigenen Border-Radius haben */
.nv-btn:focus-visible,
button.nv-btn:focus-visible,
a.nv-btn:focus-visible {
  outline: 2px solid #9DBC76;
  outline-offset: 3px;
  border-radius: 6px; /* matched .nv-btn radius */
}

/* Inputs: 1px Border in Primary-Green, kein extra Outline/Shadow */
.nv-input:focus-visible,
.nv-textarea:focus-visible,
.nv-select:focus-visible {
  outline: none;
  border-color: #9DBC76;
}

/* Verhindere Browser-Default-Outline auf MAUS-Klicks (nur Keyboard zeigen) */
*:focus:not(:focus-visible) {
  outline: none;
}

/* ============================================================
 * 3) Reduced-Motion — globale Übersteuerung
 * Für User mit "Bewegung minimieren" System-Setting (Vestibular-
 * Erkrankungen, Migräne, ADHS-Trigger etc.) alle Animationen
 * praktisch deaktivieren.
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
 * 4) Screen-Reader-Only Text
 * Visuell versteckt, von Screen-Readern aber gelesen.
 * Für Context-Texte zu Icon-Buttons etc.
 * ============================================================ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}