/* basis.css: Reset, Grundtypografie, Layout-Container. Nur Tokens. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--mk-schrift-text);
  font-size: var(--mk-groesse-m);
  line-height: var(--mk-zeilenhoehe-text);
  color: var(--mk-farbe-text);
  background: var(--mk-farbe-flaeche);
}
h1, h2, h3 {
  font-family: var(--mk-schrift-titel);
  line-height: var(--mk-zeilenhoehe-eng);
  font-weight: var(--mk-gewicht-fett);
  margin: 0 0 var(--mk-abstand-4);
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
  hyphenate-limit-chars: 8 4 4; /* nur ab 8 Zeichen trennen, mind. 4 vor/nach dem
    Trennstrich (Nachbesserung nach Aufgabe 9: hyphens:auto ohne Untergrenze trennte
    kurze Woerter wie "Kühlung"/"Wasser", was typografisch falsch ist) */
}
h1 { font-size: var(--mk-groesse-2xl); }
h2 { font-size: var(--mk-groesse-xl); }
h3 { font-size: var(--mk-groesse-l); }
p  { margin: 0 0 var(--mk-abstand-4); max-width: var(--mk-breite-text); text-align: left; }
img { max-width: 100%; display: block; }
a { color: var(--mk-farbe-primaer); }

/* Zweifarbiger Fokusring: der Kupfer-Umriss allein erreicht auf einer hellen Flaeche guten
   Kontrast (Kupfer gegen Weiss 5.05:1), verschwimmt aber auf der dunklen .hero-Flaeche
   (--mk-farbe-flaeche-tief) fast mit dem Untergrund (nur 2.75:1, WCAG 2.4.11 verlangt 3:1).
   Der box-shadow-Ring sitzt naeher am Element, durch die groessere outline-offset bleibt
   dazwischen ein echter, durchsichtiger Spalt, der auf den tatsaechlichen Untergrund
   durchsieht: dadurch grenzt JEDER der beiden Ringe unabhaengig an den echten Hintergrund,
   nicht nur der aeussere. Auf hellem Untergrund traegt der aeussere Kupfer-Ring den Kontrast
   (5.05:1 gegen Weiss), auf der dunklen .hero-Flaeche der innere weisse Ring (13.89:1 gegen
   --mk-farbe-flaeche-tief), immer erreicht mindestens einer der beiden die 3:1-Grenze.
   Nur vorhandene Tokens. */
:focus-visible {
  outline: var(--mk-fokus-staerke) solid var(--mk-farbe-akzent);
  outline-offset: var(--mk-abstand-2);
  box-shadow: 0 0 0 var(--mk-fokus-staerke) var(--mk-farbe-auf-primaer);
}

.inhalt {
  width: 100%;
  max-width: var(--mk-breite-inhalt);
  margin-inline: auto;
  padding-inline: var(--mk-abstand-4);
}
.abschnitt { padding-block: var(--mk-abstand-7); }

/* Media-Queries stehen am DATEIENDE (Kaskaden-Regel Build-Methodik) */
@media (min-width: 48rem) {
  h1 { font-size: var(--mk-groesse-3xl); }
  .inhalt { padding-inline: var(--mk-abstand-6); }
  .abschnitt { padding-block: var(--mk-abstand-8); }
}