/* =====================================================================================
   Vorlage 20 Elektrofirma · 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.
   Die eine Akzentfarbe ist Leuchtgelb. Sie steht NIE als Schrift auf Weiß (zu wenig Kontrast),
   sondern als Fläche mit dunkler Schrift (Knöpfe, Wallbox-Kachel) oder als Leuchtlinie auf dunkel.
   Umfärben: --accent und --accent-tief ändern, danach pruefen.mjs (Kontrast).
   ===================================================================================== */
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-var.woff2") format("woff2");
  font-weight: 100 700;
  font-display: swap;
}

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

  --bg: #ffffff;            /* Grund */
  --surface: #f2f4f7;       /* abgesetzte Abschnitte und Kacheln, kühles Hellgrau */
  --text: #0b1220;          /* Schrift, Nachtblau fast schwarz, 18,7 : 1 auf Weiß */
  --muted: #475467;         /* leiser Text, 7,7 : 1 auf Weiß, 7,0 : 1 auf --surface */
  --accent: #facc15;        /* die eine Farbe: Leuchtgelb. Nachtblau darauf 12,2 : 1, als Leuchtschrift auf --dunkel ebenso 12,2 : 1 */
  --on-accent: #0b1220;
  --accent-tief: #eab308;   /* Knopf beim Überfahren, Nachtblau darauf 9,8 : 1 */
  --border: #dfe3ea;        /* Zierlinien */
  --error: #b42318;         /* Fehlermeldungen in einer Web-App, 6,6 : 1 auf Weiß */

  --dunkel: #0b1220;        /* dunkle Abschnitte: Leitungsweg, Stromnetz, Fuß */
  --dunkel-2: #141d31;      /* Karten auf dunkel */
  --dunkel-text: #eef2f7;   /* Schrift auf dunkel, 16,7 : 1 */
  --dunkel-leise: #a3b0c4;  /* leise auf dunkel, 8,5 : 1 auf --dunkel, 7,7 : 1 auf --dunkel-2 */
  --stahl: #7f92b0;         /* Linien der Anlage im Leitungsweg (Inhalt, keine Schrift) */
  --land: #111a2e;          /* Hügel und Silhouetten im Stromnetz */
  --fensterlicht: #fb923c;  /* warmes Licht in den Häusern des Stromnetzes (Inhalt, keine Schrift) */

  --radius: 24px;           /* Karten, Kacheln */
  --radius-gross: 40px;     /* große Bilder, Bühnen */
  --radius-klein: 12px;     /* Felder, Knöpfe, Wahlknöpfe */

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