/* DWC — gemeinsames Basisverhalten für alle Unterseiten (30.08.2026)
   ==================================================================

   Zweck: Barrierefreiheit und Bedienbarkeit auf einen gemeinsamen Stand
   bringen, ohne das Aussehen der Seiten umzubauen. Diese Datei setzt bewusst
   KEINE Farben, Schriftgrößen oder Layouts — dafür gibt es bereits zwei
   Token-Sets im Projekt (--primary/--accent und --rd-*, siehe DWC-STYLE.md).
   Ein drittes würde die vorhandene Uneinheitlichkeit nur vergrößern.

   NICHT auf index.html eingebunden. Die Startseite bringt ihre Fokuszustände
   selbst mit (16 eigene :focus-visible-Regeln) und ihr Hero-Bereich steht
   ausdrücklich unter Änderungsverbot — eine gemeinsame Datei, die dort
   mitspricht, wäre genau das Risiko, das vermieden werden soll.

   Inhalt:
     1. Sichtbarer Fokus für Tastatur (überschreibt vorhandene outline:none)
     2. Sprungmarke zum Inhalt
     3. Mindestgröße für Touch-Ziele
     4. Reduzierte Bewegung — Bewegung raus, Zustandsfeedback bleibt
     5. Kein horizontaler Überlauf
*/

/* ── 1. Fokus ──────────────────────────────────────────────────────────
   Neun Stellen im Projekt setzen outline:none, teils ohne Ersatz. Ohne
   sichtbaren Fokus ist eine Seite per Tastatur nicht bedienbar.

   :focus-visible statt :focus — der Ring erscheint bei Tastaturbedienung,
   nicht bei jedem Mausklick. Zwei Schatten: dunkle Linie plus heller Saum,
   damit der Ring auf hellem UND dunklem Grund sichtbar bleibt (die
   Unterseiten sind hell, Galerie dunkel).

   :where() hält die Spezifität bei 0 — jede Seitenregel gewinnt weiterhin,
   nur die outline gilt, wo nichts anderes definiert ist. Die Selektorliste
   ist bewusst breit; für Elemente ohne eigenen Fokusstil ist das der
   einzige Ring, den sie je bekommen. */
:where(a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 3px solid #0757F7;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Auf dunklem Grund braucht der blaue Ring einen hellen Saum, sonst
   verschwindet er im Schwarz. box-shadow statt zweiter outline, weil ein
   Element nur eine outline haben kann. */
:where([data-theme="dark"], .dwc-dark) :where(a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline-color: #7FB0FF;
  box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.55);
}

/* ── 2. Sprungmarke ────────────────────────────────────────────────────
   Erstes fokussierbares Element der Seite. Liegt außerhalb des Bildes, bis
   es den Fokus bekommt — dann fährt es sichtbar ein. Ohne sie muss sich
   jede Tastaturnutzerin auf jeder Seite erneut durch die komplette
   Navigation arbeiten. */
.dwc-skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 10000;
  padding: 12px 20px;
  border-radius: 0 0 8px 8px;
  background: #061B3A;
  color: #fff;
  font: 600 15px/1.2 'Inter', system-ui, sans-serif;
  text-decoration: none;
  transition: top 0.16s ease;
}
.dwc-skip-link:focus {
  top: 0;
}

/* ── 3. Touch-Ziele ────────────────────────────────────────────────────
   44 x 44 CSS-Pixel ist die übliche Mindestgröße für einen Finger. Nur bis
   1023px, damit sich am Desktop-Layout nichts verschiebt.

   Umgesetzt über min-height plus ein ::after, das die Trefferfläche
   unsichtbar auf 44px aufzieht, wo das Element selbst kleiner bleiben soll
   (kleine Icon-Links im Fußbereich). So wächst die Fläche, ohne dass das
   Layout auseinanderfällt.

   :where(...):not(...) schließt Elemente aus, die bewusst klein sind und
   eng gesetzt in einer Reihe stehen — dort würde ein 44px-Kasten die
   Nachbarn überlappen und Klicks abfangen. */
@media (max-width: 1023px) {
  :where(nav a, nav button, footer a, .dwc-footer__links a):not(.dwc-footer__partner-logo) {
    position: relative;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ── 4. Reduzierte Bewegung ────────────────────────────────────────────
   Wer im Betriebssystem "Bewegung reduzieren" gesetzt hat, bekommt keine
   dekorative Bewegung mehr. Bewusst NICHT `animation: none` auf alles:
   das würde auch Fokus-, Auswahl- und Fehlerzustände unsichtbar machen —
   also genau die Rückmeldungen, auf die diese Nutzergruppe am meisten
   angewiesen ist.

   Stattdessen: Dauern auf einen Wert kürzen, der nicht mehr als Bewegung
   wahrgenommen wird, aber den Zustandswechsel noch stattfinden lässt.
   Endlosschleifen (dekorative Dauerläufer) werden auf einen Durchlauf
   begrenzt. */
@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;
  }

  /* Deckkraft- und Farbwechsel dürfen bleiben: sie erzeugen keine
     Bewegung im Raum, sind aber oft das einzige Signal für "aktiv",
     "ausgewählt" oder "geöffnet". */
  :where(a, button, input, select, textarea, [role="tab"], [role="button"], summary) {
    transition-property: color, background-color, border-color, outline-color, opacity, box-shadow !important;
    transition-duration: 0.12s !important;
  }
}

/* ── 5. Kein horizontaler Überlauf ─────────────────────────────────────
   Greift bei langen, nicht umbrechbaren Wörtern (zusammengesetzte deutsche
   Begriffe, URLs) — die häufigste Ursache für seitliches Scrollen auf
   schmalen Geräten. overflow-wrap bricht nur, wenn es sonst überliefe. */
:where(h1, h2, h3, h4, p, li, dd, dt, figcaption, blockquote, td, th) {
  overflow-wrap: break-word;
}