/* =====================================================================================
   Vorlage 16 Zeitung · 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 (und --accent-auf-dunkel) ändern,
   danach pruefen.mjs (Kontrast).
   ===================================================================================== */
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/schibsted-grotesk-var.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}

:root {
  --schrift: "Schibsted Grotesk", "Segoe UI", system-ui, sans-serif;

  --bg: #ffffff;              /* Grund: reines Weiß, kein Papierton */
  --surface: #f1f3f5;         /* kühles Hellgrau für abgesetzte Flächen */
  --text: #111214;            /* Schrift, 18,9 : 1 auf Weiß */
  --muted: #50565e;           /* leiser Text, 7,4 : 1 auf Weiß, 6,6 : 1 auf --surface */
  --accent: #c8102e;          /* die eine Farbe, wie ein Zeitungskopf. Weiß darauf 5,9 : 1, auf --surface 5,3 : 1 */
  --on-accent: #ffffff;
  --accent-tief: #a00c24;     /* Knopf beim Überfahren, Weiß darauf 7,9 : 1 */
  --accent-hell: #fcebed;     /* Hauch Rot für kleine Flächen (nie Schrift darauf in Rot unter 4,5 : 1) */
  --accent-auf-dunkel: #ff8a95; /* Rubriken auf Schwarz, 8,2 : 1 auf --dunkel */
  --dunkel: #111214;          /* Schlagzeilen-Tafel, Abo-Kachel, Fuß */
  --dunkel-text: #eef0f2;     /* Schrift auf dunkel, 16,9 : 1 */
  --dunkel-leise: #a9b0b8;    /* leise auf dunkel, 8,6 : 1 */
  --border: #d9dde2;          /* Spaltenlinien, Trennlinien */
  --linie: #111214;           /* kräftige Zeitungslinie unter dem Kopf der Ausgabe */
  --error: #b42318;           /* Fehlermeldungen in einer Web-App, 6,5 : 1 auf Weiß */

  --radius: 16px;             /* Karten, Kacheln */
  --radius-gross: 28px;       /* große Bilder, Bühne, Abo-Kacheln */
  --radius-klein: 10px;       /* Felder, Rubrik-Schilder */

  --breite: 1260px;           /* Inhalt höchstens so breit, immer mittig */
  --spalte: 660px;            /* Textspalte */
  --abstand: clamp(80px, 10.5vw, 140px);   /* zwischen den Abschnitten */
  --kopf: 64px;
}