/* =====================================================================================
   Vorlage 19 Bäckerei · 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).
   Bewusst ohne Braun, Karamell, Beige und Creme: Weiß, kühles Hellgrau, ein Kornblumenblau.
   ===================================================================================== */
@font-face {
  font-family: "Epilogue";
  src: url("../fonts/epilogue-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

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

  --bg: #ffffff;            /* Grund */
  --surface: #f3f5f8;       /* abgesetzte Abschnitte, kühles Hellgrau */
  --text: #15192a;          /* Schrift, 17,4 : 1 auf Weiß, 16,0 : 1 auf --surface */
  --muted: #586174;         /* leiser Text, 6,2 : 1 auf Weiß, 5,7 : 1 auf --surface, 5,3 : 1 auf --accent-hell */
  --accent: #3550e0;        /* die eine Farbe, Kornblumenblau: Knöpfe, Links, Uhrzeiten. Weiß darauf 6,2 : 1 */
  --on-accent: #ffffff;
  --accent-tief: #2639b8;   /* Knopf beim Überfahren, Weiß darauf 8,9 : 1; Schrift auf --accent-hell 7,6 : 1 */
  --accent-hell: #e8ecfd;   /* Hauch Kornblume: Kacheln, Bildrahmen, Marken (Fläche) */
  --nacht: #141a35;         /* der eine Dunkelton: Backstube um 2 Uhr, „Heute im Ofen", Fuß */
  --nacht-text: #e9ecf6;    /* Schrift auf Nacht, 14,5 : 1 */
  --nacht-leise: #aab2cc;   /* leise auf Nacht, 8,1 : 1 */
  --nacht-akzent: #b9c5ff;  /* Kornblume auf Nacht (Uhrzeiten, Marken), 10,2 : 1 */
  --border: #dde2ea;        /* Zierlinien */
  --error: #b42318;         /* Fehlermeldungen in einer Web-App, 6,5 : 1 auf Weiß */

  /* Backtag-Bild: Inhaltsfarben, kein Schmuck */
  --licht: #ffe9a6;         /* erleuchtete Fenster in der Nacht */
  --dampf: #e3e8f6;         /* Dampf über dem Brot */

  --radius: 24px;           /* Karten, Kacheln */
  --radius-gross: 40px;     /* große Bilder, Bühne, dunkle Kachel */
  --radius-klein: 14px;     /* Felder, Marken */

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