/* ==========================================================================
   A11y Baseline – globale Grundregeln für WCAG 2.2 AA
   Farben/Werte kommen aus den Design-Tokens (Elementor-Variablen). Defaults hier
   sind nur Fallbacks. Änderungen → docs/decisions.md
   ========================================================================== */

:root {
  --a11y-focus-color: #1d1d1b;          /* Token ink; auf dunklen Flächen (buehne-tinte, Footer) per Klasse lime */
  --a11y-focus-ring: #ffffff;           /* Token paper; auf dunklen Flächen ink */
  --a11y-focus-width: 3px;
  --a11y-focus-offset: 3px;
  --a11y-sticky-offset: 0px;            /* wird per JS aus Sticky-/Fixed-Elementen berechnet */
  --a11y-sticky-offset-bottom: 0px;
}

/* 2.4.11 Focus Not Obscured: Sprungziele und per Tab fokussierte Elemente nicht unter Sticky-Header */
html {
  scroll-padding-top: calc(var(--a11y-sticky-offset) + 16px);
  scroll-padding-bottom: calc(var(--a11y-sticky-offset-bottom) + 16px);
}

/* 2.4.7 Focus Visible + 1.4.11: zweifarbiger Fokusring, unabhängig vom Hintergrund erkennbar */
html body :focus-visible {
  outline: var(--a11y-focus-width) solid var(--a11y-focus-color);
  outline-offset: var(--a11y-focus-offset);
  box-shadow: 0 0 0 calc(var(--a11y-focus-offset) + var(--a11y-focus-width) + 2px) var(--a11y-focus-ring);
}
html body :focus:not(:focus-visible) { outline: none; }

@media (forced-colors: active) {
  html body :focus-visible { outline-color: Highlight; box-shadow: none; }
}

/* 2.4.1 Sprunglink (Hello-Theme liefert .skip-link) – sichtbar bei Fokus */
.skip-link:focus,
.skip-link:focus-visible {
  position: fixed !important;
  inset-block-start: 8px; inset-inline-start: 8px;
  z-index: 100000;
  clip: auto !important; clip-path: none !important;
  width: auto !important; height: auto !important;
  padding: 12px 20px;
  background: var(--a11y-focus-ring); color: var(--a11y-focus-color);
  font-weight: 700; text-decoration: underline;
}

/* 1.4.1 Use of Color: Links im Fließtext zusätzlich zur Farbe unterstreichen */
:where(main) :where(p, li, dd, td, figcaption, blockquote) a:not([class*="button"]):not([role="button"]) {
  text-decoration-line: underline;
  text-decoration-thickness: 2px;   /* 2.0: wie link-text */
  text-underline-offset: 4px;
}

/* Hilfsklasse für nur-Screenreader-Text (zusätzlich zu Elementors .elementor-screen-only) */
.sr-only:not(:focus):not(:active) {
  position: absolute !important; width: 1px !important; height: 1px !important;
  margin: -1px !important; padding: 0 !important; overflow: hidden !important;
  clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important;
}

/* 2.5.8 Target Size: Hilfsklasse für Icon-Links/-Buttons (als globale Klasse nutzbar) */
.a11y-target { min-width: 24px; min-height: 24px; display: inline-flex; align-items: center; justify-content: center; }

/* 2.2.2 / 2.3.3: Bewegung reduzieren, wenn vom System gewünscht */
@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;
  }
  .elementor-invisible { visibility: visible !important; opacity: 1 !important; }
}

/* 1.3.1: Anschrift als <address> (siehe a11y-baseline.php), ohne kursive Browser-Vorgabe */
address { font-style: normal; }

/* Atomic-Formulare (e-form, a11y-baseline.js) – Werte aus docs/design-tokens.json */
/* 2.4.7/1.4.11: Elementor setzt `.elementor .e-form-input-base:focus { outline-style: none }` (0,3,0) → hier 0,3,3 ([data-id] nur für die Spezifität) */
html body [data-element_type="e-form"][data-id] :is(input, textarea, select, button):focus-visible {
  outline: var(--a11y-focus-width) solid var(--a11y-focus-color);
  outline-offset: var(--a11y-focus-offset);
  border-color: var(--farbe-tinte, #1d1d1b);
}
/* Atomic-Formularelemente erben die Schrift nicht (Browser-Default für input/textarea/button) */
[data-element_type="e-form"] { font-family: var(--schriftfamilie-titillium, "Titillium Web", sans-serif); }
[data-element_type="e-form"] :is(label, input, textarea, select, button, p) { font-family: inherit; }

/* Honeypot (3.3.8) außerhalb des Viewports */
.a11y-hp { position: absolute !important; left: -10000px !important; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Fehler: Text + dekoratives Icon (1.4.1, 3.3.1); Icon per ::before mit leerem Alternativtext */
.a11y-feldfehler, .a11y-fehlerliste-titel {
  color: var(--farbe-fehler, #b3261e); font-size: 1.0625rem; font-weight: 600; line-height: 1.4; margin: 0;
}
.a11y-feldfehler::before, .a11y-fehlerliste-titel::before,
[data-e-type="e-form-error-message"] > :first-child::before {
  content: "⚠\FE0E\00A0" / ""; color: var(--farbe-fehler, #b3261e);
}
html body [data-element_type="e-form"] [aria-invalid="true"],
html body [data-element_type="e-form"][data-id] [aria-invalid="true"]:focus-visible { border-color: var(--farbe-fehler, #b3261e); }
.a11y-fehlerliste {
  color: var(--farbe-tinte, #1d1d1b); font-size: 1.0625rem; line-height: 1.5;
  background: var(--farbe-papier, #fff); border-inline-start: 4px solid var(--farbe-fehler, #b3261e);
  padding: var(--abstand-s, 16px) 20px; margin-block-end: var(--abstand-l, 32px);
}
.a11y-fehlerliste[hidden] { display: none; }
.a11y-fehlerliste ul { margin: var(--abstand-xs, 8px) 0 0; padding: 0; list-style: none; }
.a11y-fehlerliste li + li { margin-block-start: var(--abstand-2xs, 4px); }
.a11y-fehlerliste a { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; }
@media (forced-colors: active) {
  [data-element_type="e-form"] [aria-invalid="true"] { border-color: Mark; }
  html body [data-element_type="e-form"][data-id] :is(input, textarea, select, button):focus-visible { outline-color: Highlight; }
}

/* Bewegung (2.0): Klasse `bewegung-einblenden` ist in Elementor nur ein Marker. Reines CSS, kein JS.
   Alles (inkl. Keyframes) liegt in diesem Block; ohne Unterstützung oder bei reduce bleibt der Inhalt statisch.
   Nie auf H1, Fokussierbarem oder im ersten Viewport; max. 2 je Seite (docs/design-direction.md). */
@media screen and (prefers-reduced-motion: no-preference) {   /* screen: im Druck nie unsichtbar */
  @supports (animation-timeline: view()) {
    @keyframes bewegung-einblenden {
      from { opacity: 0; translate: 0 var(--bewegung-distanz, 24px); }
      to   { opacity: 1; translate: 0 0; }
    }
    .bewegung-einblenden {
      --bewegung-distanz: 24px;
      animation-name: bewegung-einblenden;
      animation-fill-mode: both;
      animation-timing-function: cubic-bezier(0.2, 0.6, 0.2, 1);
      animation-timeline: view();
      animation-range: entry 0% entry 75%;
    }
    @media (max-width: 767px) {
      .bewegung-einblenden { --bewegung-distanz: 16px; }
    }
  }
}