/* ==========================================================================
   Fokus-Design sitewide — WCAG 2.4.7, 2.4.11, 2.4.12
   ==========================================================================
   Höchste Spezifität durch !important, damit Element-eigene outline:none
   Regeln (z.B. auf Buttons, Links, Custom-Controls) sicher überschrieben werden.

   Design:
   - 3px durchgezogener blauer Ring (--blue: #164384)
   - 3px Offset zum Element
   - 6px gelber Halo dahinter (--yellow: #FBB809)
   - 4px border-radius (fällt bei bereits rundem Element automatisch weg)
   - Nur bei :focus-visible sichtbar (Tastaturbedienung), nicht bei Mausklick
     ausser bei Skip-Link (soll auch bei Klick fokussiert bleiben)
   ========================================================================== */

/* Standard-Fokus für alle fokussierbaren Elemente */
:focus-visible {
  outline: 3px solid var(--blue, #164384) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 6px var(--yellow, #FBB809) !important;
  border-radius: 4px !important;
}

/* Buttons/Links: identisch, aber runde Elemente bekommen weiter runden Ring */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--blue, #164384) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 6px var(--yellow, #FBB809) !important;
  border-radius: 4px !important;
}

/* Skip-Link soll bei :focus (auch programmatisch) sichtbar bleiben */
.skip-link:focus,
.skip-link:focus-visible,
.skip:focus,
.skip:focus-visible {
  top: 8px !important;
  left: 8px !important;
  outline: 3px solid var(--blue, #164384) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 6px var(--yellow, #FBB809) !important;
  border-radius: 4px !important;
  clip: auto !important;
  clip-path: none !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
}

/* Hauptinhalt beim Skip: kein sichtbarer Fokus-Ring am <main> selbst,
   aber trotzdem fokussierbar wegen tabindex="-1" */
main[tabindex="-1"]:focus,
main[tabindex="-1"]:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* High-Contrast-Modus (Windows) — System-Farben nutzen */
@media (forced-colors: active) {
  :focus-visible,
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  [tabindex]:focus-visible {
    outline: 3px solid CanvasText !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 6px Highlight !important;
  }
}

/* Bewegungsreduktion respektieren — Fokus-Übergänge ohne Animation */
@media (prefers-reduced-motion: reduce) {
  :focus-visible {
    transition: none !important;
  }
}