/* Grundlagen: Reset mit leichter Hand, Typografie, Grundverhalten. */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kopf-hoehe) + var(--ab-2));
}

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

body {
  margin: 0;
  background: var(--farbe-grund);
  color: var(--farbe-text);
  font-family: var(--schrift-text);
  font-size: var(--gr-text);
  line-height: var(--zeile-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--schrift-titel);
  font-weight: var(--fett-stark);
  line-height: var(--zeile-titel);
  letter-spacing: var(--sperr-eng);
  text-wrap: balance;
  /* "Datenschutzerklaerung" ist breiter als ein Handybildschirm. Ohne
     Trennung schiebt so ein Wort die ganze Seite zur Seite. */
  overflow-wrap: break-word;
  hyphens: auto;
}

/* In Karten sind die Spalten schmal, aber die Titel kurz genug - dort
   sah die Trennung ("Fortgeschrit-tene") nach Notloesung aus. Die
   Silbentrennung bleibt den langen Seitentiteln vorbehalten. */
.karte h3,
.leistung h3,
.person__name,
.vergleich__titel { hyphens: manual; }

h1 { font-size: var(--gr-riesig); }
h2 { font-size: var(--gr-gross); }
h3 { font-size: var(--gr-mittel); }
h4 { font-size: var(--gr-text); }

p { margin: 0; text-wrap: pretty; }

/* Safari nimmt einer Liste mit list-style: none die Listenrolle - dann
   entfaellt beim Vorlesen die Ansage "Liste mit N Eintraegen". Wo die
   Anzahl zaehlt (Vergleich, Faecher, Leistungen), holt role="list" sie
   zurueck; die Optik bleibt weg. */
ul, ol { margin: 0; padding: 0; list-style: none; }

a {
  color: var(--farbe-marke-tief);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dauer-kurz) var(--kurve);
}
a:hover { color: var(--farbe-text); }

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

button, input, textarea, select {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; }

:focus-visible {
  /* Zwei Toene, weil die Seite sieben verschiedene Flaechen hat und kein
     einzelner Ton auf allen 3:1 erreicht: das Marken-Orange als Ring kam
     auf dem Markenband auf 1,97:1 und im dunklen Fuss auf 2,86:1.
     Dunkler Kern traegt auf hellen Flaechen (13,9:1 auf Creme, 5,6:1 auf
     Orange), heller Saum auf dunklen (14,8:1). Einer greift immer. */
  outline: 3px solid var(--farbe-tief);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--farbe-text-hell);
}

::selection {
  background: var(--farbe-marke);
  color: var(--farbe-auf-marke);
}

/* Nur fuer Screenreader */
.nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Sprungmarke zum Inhalt */
.sprungmarke {
  position: absolute;
  top: var(--ab-1);
  left: var(--ab-1);
  z-index: calc(var(--ebene-kopf) + 1);
  padding: var(--ab-1) var(--ab-2);
  border-radius: var(--radius);
  background: var(--farbe-text);
  color: var(--farbe-text-hell);
  text-decoration: none;
  transform: translateY(-200%);
}
.sprungmarke:focus-visible {
  transform: translateY(0);
  color: var(--farbe-text-hell);
}