@charset "utf-8";

/* Reset / Box-Sizing */
* { box-sizing: border-box; }

/* Farben/Typo/Grundlayout */
:root{
  --primary:#2563eb; --primary-dark:#1d4ed8;
  --bg:#f4f6fb; --text:#1e293b;
  --muted:#64748b; --danger:#dc2626;
}

/* Root-Hintergrund angleichen, damit keine hellen Flächen durchscheinen */
html {
  scroll-behavior: smooth;
  background: var(--bg);
}

/* Desktop: Scrollbar immer reservieren/zeigen → kein Versatz, kein weißer Rand rechts */
@media (hover: hover) and (pointer: fine) {
  html { overflow-y: scroll; }       /* klassisch: Scrollbar ist immer da */
  /* Kein scrollbar-gutter nötig/gewünscht */
}

/* Body-Grundlayout */
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Layout-Container */
header, main, footer {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center; /* Inhalte mittig */
}

/* Einheitliches Seitenpadding am main (nicht an den Kindern) */
main { padding: 0 16px; }

/* Abstand nach dem Header überall gleich */
header + main { margin-top: 30px; }

/* Direkte Kinder von header/main/footer: zentriert, ohne Extra-Padding */
header > *:not(style),
main  > *:not(style),
footer > *:not(style) {
  width: 100%;
  max-width: 960px;
  padding: 0;
  margin: 0 auto;
}

/* Typografie */
h1 { margin: 0 0 6px; font-size: 26px; letter-spacing: .2px; }
h2 { margin: 0 0 12px; font-size: 20px; }

/* Responsive Baseline */
@media (max-width: 820px){
  main { padding: 0 14px; }
}
@media (max-width: 600px){
  h1 { font-size: 24px; }
}

/* =========================
   A11y Utilities (global)
   ========================= */

/* Screenreader-only (unsichtbar, aber zugänglich) */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Variante: im Normalfall versteckt, aber beim Fokussieren sichtbar (z. B. Skiplinks) */
.sr-only.sr-only-focusable:focus,
.sr-only.sr-only-focusable:active {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
}

/* Reduced Motion: respektiere Systempräferenz (keine visuelle Änderung für andere) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}