/* =====================================================================
   BASIS – Reset, Typografie, Grundelemente
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-hoehe) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--hell);
  color: var(--text);
  font-family: var(--font-text);
  font-size: var(--fs-base);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; height: auto; }

/* ---------- Überschriften ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-headline);
  font-weight: 500;
  line-height: 1.12;
  color: var(--blau);
  margin: 0 0 0.6em;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); font-weight: 400; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-lg); font-family: var(--font-text); font-weight: 700; }

p { margin: 0 0 1.1em; max-width: var(--breite-text); overflow-wrap: break-word; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 700; }

.lead { font-size: var(--fs-lg); line-height: 1.5; }
.klein { font-size: var(--fs-sm); color: var(--text-70); }

/* ---------- Links ---------- */
a { color: var(--blau); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--blau-dunkel); }
p a, dd a, .rechtstext a { overflow-wrap: anywhere; }   /* lange URLs brechen auf dem Handy um */

/* ---------- Listen ---------- */
ul, ol { padding-left: 1.3rem; margin: 0 0 1.1em; max-width: var(--breite-text); }
li { margin-bottom: 0.35em; }
li::marker { color: var(--blau); }

/* Liste mit Punkt-Kreisen (Logo-Motiv) */
.liste-kreise { list-style: none; padding: 0; }
.liste-kreise li { position: relative; padding-left: 1.6rem; margin-bottom: 0.55em; }
.liste-kreise li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--blau);
}

/* ---------- Tabellen ---------- */
table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
th, td { text-align: left; padding: 0.7rem 0.6rem; border-bottom: 1px solid var(--blau-20); vertical-align: top; }
th { color: var(--blau); font-weight: 700; }
/* Schmale Bildschirme: Tabellenzeilen untereinander statt nebeneinander */
@media (max-width: 600px) {
  .tabelle-stapel thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabelle-stapel tr { display: block; padding: 0.8rem 0; border-bottom: 1px solid var(--blau-20); }
  .tabelle-stapel th, .tabelle-stapel td { display: block; padding: 0.1rem 0; border: 0; }
  .tabelle-stapel td[data-label]::before { content: attr(data-label) ": "; font-weight: 700; }
  .auf-blau .tabelle-stapel tr { border-color: color-mix(in srgb, var(--hell) 25%, transparent); }
}

hr { border: 0; border-top: 1px solid var(--blau-20); margin: var(--raum-md) 0; }

/* ---------- Hilfsklassen ---------- */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.zentriert { text-align: center; }
.zentriert p, .zentriert ul { margin-inline: auto; }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }

/* Alles auf blauem Grund: Text & Überschriften werden hell */
.auf-blau, .auf-blau h1, .auf-blau h2, .auf-blau h3, .auf-blau h4,
.auf-blau a { color: var(--hell); }
.auf-blau .klein { color: var(--hell-70); }
.auf-blau li::marker, .auf-blau .liste-kreise li::before { color: var(--hell); background: var(--hell); }
.auf-blau th, .auf-blau td { border-color: color-mix(in srgb, var(--hell) 25%, transparent); }
.auf-blau th { color: var(--hell); }

/* Weniger Bewegung, wenn gewünscht */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}