/* =====================================================================
   Aqua Protect · gemeinsame Basis für alle Seiten
   Tokens, Barrierefreiheit (BFSG / EN 301 549 / WCAG 2.1 AA) und Bewegung.
   Wird im <head> jeder Seite vor dem Inhalt geladen (siehe ap-motion.js).
   ===================================================================== */

:root {
  /* Farben aus dem Brand Book */
  --ap-navy: #122D58;
  --ap-deep: #031B40;
  --ap-sec: #0E3673;
  --ap-elec: #0F5CF4;
  --ap-blue-light: #4397F7;
  --ap-pale-blue: #A4CAF0;
  --ap-yellow: #F9D23E;
  --ap-yellow-hover: #FABB3E;
  --ap-light: #F1F2F4;
  --ap-pale: #E1E7F2;
  --ap-cool: #D5DBE6;
  --ap-text: #3A4A66;
  --ap-text-soft: #5B6B86;
  --ap-error: #B42318;
  /* Ergänzt für Barrierefreiheit: Rahmen von Formularfeldern ≥ 3:1 auf Weiß, Light und Pale */
  --ap-field-border: #74839E;
  /* Fokusring: Electric Blue auf hellen Flächen, Gelb auf dunklen (Container setzen --ap-focus um) */
  --ap-focus: #0F5CF4;
  /* Bewegung */
  --ap-ease-out: cubic-bezier(.2, .7, .2, 1);
  --ap-ease-spring: cubic-bezier(.34, 1.25, .64, 1);
  --ap-dur-fast: .15s;
  --ap-dur-base: .25s;
  --ap-dur-reveal: .7s;
}

html { scroll-behavior: smooth; }
html.ap-reduce { scroll-behavior: auto; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------------------------------------------------------------------
   Tastaturfokus (WCAG 2.4.7, 1.4.11): sichtbar auf jedem Bedienelement.
   !important, weil viele Felder inline outline:none tragen.
   --------------------------------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--ap-focus) !important;
  outline-offset: 3px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--ap-focus) !important;
  outline-offset: 1px;
}
.ap-searchbox:focus-within, .ap-dropzone:focus-within {
  outline: 3px solid var(--ap-focus);
  outline-offset: 3px;
}
.ap-searchbox input:focus-visible { outline: none !important; }

/* Sprunglink „Zum Inhalt springen“ (WCAG 2.4.1) */
.ap-skip {
  position: absolute; left: 16px; top: -120px; z-index: 1000;
  display: inline-block; background: #122D58; color: #fff;
  font: 600 15px/1 Roboto, system-ui, sans-serif; padding: 15px 20px; border-radius: 999px;
  box-shadow: 0 12px 30px rgba(3, 27, 64, .25); text-decoration: none;
  transition: top var(--ap-dur-fast) ease-out;
}
.ap-skip:focus, .ap-skip:focus-visible { top: 14px; outline-color: #F9D23E !important; }

/* Nur für Screenreader (z. B. „öffnet in neuem Tab“) */
.ap-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Hauptinhalt als Landmarke; erhält Fokus über den Sprunglink */
main#inhalt { display: block; outline: none; }

/* ---------------------------------------------------------------------
   Links im Fließtext zusätzlich unterstrichen (WCAG 1.4.1: Farbe allein
   reicht nicht). Pillen-Buttons und Karten sind ausgenommen.
   --------------------------------------------------------------------- */
p a:not([style*="border-radius"]), dd a, td a, blockquote a, figcaption a,
span > a:not([style*="border-radius"]):not([style*="display: block"]):not([style*="display:block"]) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  text-decoration-color: rgba(15, 92, 244, .55);
  transition: text-decoration-color var(--ap-dur-fast);
}
p a:hover, dd a:hover, td a:hover, blockquote a:hover, figcaption a:hover, span > a:hover { text-decoration-color: currentColor; }

/* Platzhaltertext ≥ 4,5:1 */
::placeholder { color: #5B6B86; opacity: 1; }

/* Bedienelemente */
button:not([disabled]), [role="button"], summary, label[for] { cursor: pointer; }
button[disabled], [aria-disabled="true"] { cursor: not-allowed; }

/* ---------------------------------------------------------------------
   Rückmeldung beim Drücken (HIG/MD „scale feedback“): über die separate
   scale-Eigenschaft, damit inline transform/translate unberührt bleiben.
   --------------------------------------------------------------------- */
html.ap-js:not(.ap-reduce) button:not([disabled]):active,
html.ap-js:not(.ap-reduce) a[style*="border-radius"]:active {
  scale: .97;
}

/* Sticky-Header: Schatten erst nach dem Scrollen */
header.ap-scrolled {
  box-shadow: 0 10px 30px rgba(3, 27, 64, .08);
}

/* ---------------------------------------------------------------------
   Scroll-Reveal (data-reveal / data-reveal-group), gesteuert von
   ap-motion.js. Ohne JavaScript bleibt alles sichtbar. Als Animation
   umgesetzt, damit inline transition-Angaben (Hover) nicht kollidieren.
   --------------------------------------------------------------------- */
@keyframes apRevealIn {
  from { opacity: 0; translate: 0 18px; }
  to   { opacity: 1; translate: 0 0; }
}
html.ap-js:not(.ap-reduce) [data-reveal] { opacity: 0; }
html.ap-js:not(.ap-reduce) [data-reveal].ap-in {
  opacity: 1;
  animation: apRevealIn var(--ap-dur-reveal) var(--ap-ease-out) both;
  animation-delay: var(--ap-d, 0ms);
}
html.ap-reduce [data-reveal], html.ap-reduce [data-reveal].ap-in { opacity: 1; translate: none; animation: none; }

/* Lesefortschritt für Fachbeiträge */
.ap-progress {
  position: fixed; left: 0; top: 0; width: 100%; height: 3px; z-index: 70; pointer-events: none;
}
.ap-progress > span {
  display: block; width: 100%; height: 100%; background: #0F5CF4;
  transform-origin: left center; scale: var(--ap-p, 0) 1;
}

/* Lade-/Sendezustand von Buttons */
@keyframes apSpin { to { rotate: 360deg; } }
.ap-spinner {
  display: inline-block; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: apSpin .8s linear infinite; vertical-align: -3px;
}

/* ---------------------------------------------------------------------
   Reduzierte Bewegung: Systemeinstellung ODER Schalter im Footer
   (WCAG 2.2.2 / 2.3.3). Endzustand wird sofort gezeigt.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal].ap-in { opacity: 1 !important; translate: none !important; animation: none !important; }
  .ap-skip { transition: none; }
}
html.ap-reduce *, html.ap-reduce *::before, html.ap-reduce *::after {
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01ms !important;
}
html.ap-reduce .ap-spinner { animation: none !important; border-right-color: currentColor; opacity: .5; }

@media print {
  [data-reveal], [data-reveal].ap-in { opacity: 1 !important; translate: none !important; animation: none !important; }
  .ap-skip, .ap-progress { display: none !important; }
}