/* =====================================================================================
   Vorlage 17 Blog · Farben, Schrift, Ecken, Abstände
   Brücke zur Web-App: die Namen --bg --surface --text --muted --accent --on-accent
   --border --radius --schrift sind dieselben wie in 00_Projektstart/starter-webapp/styles.css.
   Umfärben: nur --accent, --accent-tief, --accent-hell ändern, danach pruefen.mjs (Kontrast).
   ===================================================================================== */
@font-face {
  font-family: "Mona Sans";
  src: url("../fonts/mona-sans-var.woff2") format("woff2");
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  --schrift: "Mona Sans", "Segoe UI", system-ui, sans-serif;

  --bg: #ffffff;            /* Grund */
  --surface: #f1f4f5;       /* kühles Hellgrau für abgesetzte Abschnitte */
  --text: #14191c;          /* Schrift, 17,7 : 1 auf Weiß */
  --muted: #4f5a60;         /* leiser Text, 7,1 : 1 auf Weiß, 6,4 : 1 auf --surface, 6,0 : 1 auf --accent-hell */
  --accent: #1e5b47;        /* die eine Farbe, Tannengrün: Knöpfe, Links, Route. Weiß darauf 8,0 : 1 */
  --on-accent: #ffffff;
  --accent-tief: #164536;   /* Knopf beim Überfahren, Weiß darauf 10,8 : 1 */
  --accent-hell: #e4eee9;   /* Hauch Tanne: Flächen, Bildrahmen (nie Schrift); Akzent darauf 6,7 : 1 */
  --border: #dbe1e4;        /* Zierlinien */
  --error: #b42318;         /* Fehlermeldungen in einer Web-App, 6,5 : 1 auf Weiß */

  /* Karte im klebenden Abschnitt: Inhaltsfarben, kein Schmuck */
  --hoehenlinie: #c4cfcb;
  --metall: #e9edef;
  --metall-tief: #aab5bb;

  --radius: 20px;           /* Karten, Kacheln */
  --radius-gross: 32px;     /* große Bilder, Karte, Blatt */
  --radius-klein: 12px;     /* Felder, Marken */

  --breite: 1240px;         /* Inhalt höchstens so breit, immer mittig */
  --spalte: 660px;          /* Lesespalte */
  --abstand: clamp(80px, 11vw, 144px);   /* zwischen den Abschnitten */
  --kopf: 64px;
}