/* ===========================================================================
   BASE - Grundverhalten, das jede Seite braucht.
   Alles hier beruht auf Fehlern, die in diesem System wirklich vorgekommen
   sind. Die Kommentare sagen jeweils, welcher.
   =========================================================================== */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* Wer Bewegung ausgeschaltet hat, bekommt keine - ABER die Inhalte bleiben.
   Fehler aus der Praxis: reduzierte Bewegung hat ganze Szenen abgeschaltet,
   sodass leere Flaechen zurueckblieben. Ein leeres Bild ist kein Ersatz. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift);
  font-size: var(--fs-basis);
  line-height: var(--zeilenhoehe);
  /* Ohne das erbt die Seite bei durchsichtigem Body die Farbe der Umgebung. */
  min-height: 100svh;
  -webkit-font-smoothing: antialiased;
}

/* Bilder: nie breiter als ihr Platz, und die Hoehe folgt dem Seitenverhaeltnis.
   Fehlt height:auto, verzerrt ein gesetztes height-Attribut das Bild. */
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }

/* Fliesstext soll umbrechen duerfen - sonst sprengen lange Woerter das Layout. */
p, h1, h2, h3, li { overflow-wrap: break-word; }

h1, h2, h3 { line-height: var(--zeilenhoehe-titel); margin: 0 0 var(--a4); text-wrap: balance; }
h1 { font-size: var(--fs-h1); letter-spacing: -.02em; }
h2 { font-size: var(--fs-h2); letter-spacing: -.01em; }
h3 { font-size: var(--fs-h3); }
p  { margin: 0 0 var(--a4); }

/* ---------------------------------------------------------------- Fokus --
   Der haeufigste Barrierefreiheitsfehler ueberhaupt ist `outline: none` ohne
   Ersatz. Dann sieht man bei Tastaturbedienung nicht mehr, wo man ist.
   :focus-visible zeigt den Rahmen nur bei Tastatur, nicht bei Mausklick. */
:focus-visible {
  outline: 3px solid var(--akzent-hell);
  outline-offset: 2px;
  border-radius: var(--rundung-klein);
}

/* ---------------------------------------------------------- Sprungmarke --
   Liegt im Quelltext ganz oben, ist unsichtbar und erscheint erst bei
   Tastaturfokus. clip-path statt display:none - Letzteres nimmt sie auch
   der Tastatur weg. */
.sprungmarke {
  position: absolute;
  z-index: 100;
  top: var(--a2); left: var(--a2);
  padding: var(--a3) var(--a4);
  background: var(--flaeche-hoch);
  color: var(--text);
  border-radius: var(--rundung-klein);
  text-decoration: none;
  clip-path: inset(50%);
}
.sprungmarke:focus { clip-path: none; }

/* ------------------------------------------------------------- Aufbau --- */
.kopf, main, .fuss {
  max-width: var(--breite-max);
  margin-inline: auto;
  padding-inline: var(--a5);
}
.kopf {
  display: flex; flex-wrap: wrap; gap: var(--a5);
  align-items: center; justify-content: space-between;
  padding-block: var(--a5);
}
/* Beruehrflaechen mindestens 44x44 px - darunter trifft man auf dem Handy
   kaum. Der Innenabstand vergroessert die Flaeche, ohne die Schrift zu
   vergroessern. Von der eigenen Pruefung gefunden (24.08.). */
.marke {
  display: inline-flex; align-items: center; min-height: 44px;
  padding-inline: var(--a2); margin-inline-start: calc(var(--a2) * -1);
  font-weight: 700; color: var(--text); text-decoration: none;
}
.navigation ul {
  display: flex; flex-wrap: wrap; gap: var(--a3);
  margin: 0; padding: 0; list-style: none;
}
.navigation a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding-inline: var(--a3);
  color: var(--text-leise); text-decoration: none;
}
.navigation a:hover { color: var(--text); }
.fuss a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 0; }

section { padding-block: var(--a8); }
section + section { border-top: 1px solid var(--linie); }

.held { padding-block: var(--a9) var(--a8); }
.vorzeile {
  margin: 0 0 var(--a3);
  color: var(--akzent-hell);
  font-size: var(--fs-klein);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.einleitung { max-width: var(--zeilenbreite); font-size: var(--fs-gross); color: var(--text-leise); }
.fliesstext { max-width: var(--zeilenbreite); color: var(--text-leise); }

/* --------------------------------------------------------------- Karten -- */
.karten {
  display: grid; gap: var(--a5); margin: 0; padding: 0; list-style: none;
  /* auto-fit + minmax: passt sich ohne einen einzigen Sprungpunkt an. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.karte {
  padding: var(--a5);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
}
.karte h3 { margin-bottom: var(--a2); }
.karte p { margin: 0; color: var(--text-leise); }

/* --------------------------------------------------------------- Knopf --- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  /* Mindestens 44 px hoch - darunter wird es auf dem Handy fummelig. */
  min-height: 44px;
  padding: var(--a3) var(--a5);
  background: var(--akzent);
  color: var(--akzent-text);
  border: 0; border-radius: var(--rundung-klein);
  font: inherit; font-weight: 600; text-decoration: none;
  cursor: pointer;
  transition: background var(--dauer) var(--kurve);
}
.knopf:hover { background: var(--akzent-hover); }

/* ---------------------------------------------------------------- Fuss --- */
.fuss {
  padding-block: var(--a6) var(--a7);
  border-top: 1px solid var(--linie);
  color: var(--text-leise);
  font-size: var(--fs-klein);
}
.fuss a { color: var(--text-leise); }

code { font-family: var(--schrift-fest); font-size: .92em; }
a { color: var(--akzent-hell); }