/* =====================================================================================
   Elektro · Farben, Schrift, Ecken, Abstände
   Brücke zur Web-App: --bg --surface --text --muted --accent --on-accent --border --radius --schrift
   heißen wie in 00_Projektstart/starter-webapp/styles.css.
   Die eine Akzentfarbe ist Leuchtgelb. Sie steht NIE als Schrift auf Hell (zu wenig Kontrast), sondern als
   Fläche mit dunkler Schrift (Knöpfe) oder als Licht auf Dunkel (Linie im Weg des Stroms, Messgerät).
   Umfärben: --accent und --accent-tief; die Linie und die Messkurve lesen --accent.
   ===================================================================================== */
@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: #f4f5f7;            /* kühles Wandweiß */
  --surface: #ffffff;       /* Karten */
  --surface-2: #e8ebf0;     /* abgesetzte Flächen */
  --text: #0d1626;          /* 16,6 : 1 auf --bg */
  --muted: #4a5466;         /* 7,0 : 1 auf --bg, 6,4 : 1 auf --surface-2 */
  --accent: #facc15;        /* Leuchtgelb. --text darauf 11,8 : 1 */
  --on-accent: #0d1626;
  --accent-tief: #eab308;   /* Knopf beim Überfahren, --text darauf 9,4 : 1 */
  --border: #d9dee6;
  --fokus: #0d1626;         /* Fokusrahmen auf Hell; auf Dunkel gilt --accent */
  --error: #b42318;

  --dunkel: #0e1828;        /* Weg des Stroms, Kontakt, Fuß */
  --dunkel-2: #16233a;      /* Karten auf Dunkel */
  --dunkel-text: #eef2f7;   /* 15,8 : 1 auf --dunkel */
  --dunkel-leise: #a6b3c6;  /* 8,4 : 1 auf --dunkel, 7,4 : 1 auf --dunkel-2 */
  --stahl: #6e819e;         /* Linien im Hausschnitt, keine Schrift */

  --radius: 14px;           /* Karten */
  --radius-gross: 22px;     /* Bühnen */
  --radius-klein: 8px;      /* Knöpfe, Felder: eckiger als bei den anderen Vorlagen, technischer */

  --breite: 1240px;
  --abstand: clamp(84px, 10vw, 140px);
  --kopf: 64px;
}