/* =====================================================================================
   Vorlage 44 Photovoltaik und Wärmepumpe · Sonnwerk Energietechnik, Wels
   Farben, Schrift, Ecken, Abstände. Bautyp Leitstand: dunkle Grundfläche wie eine Energie-App, dazwischen
   helle Abschnitte (Wechsel Dunkel und Hell). Vier Farben aus dem Material der Branche:
     Nachtblau   Grundfläche, Kacheln
     Solargelb   Erzeugung, Hauptknopf, Dach
     Stromgrün   Speicher, Eigenverbrauch, „läuft“
     Kupfer      Wärme, Wärmepumpe
   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.
   Kontraste (WCAG) stehen neben den Textfarben; Gelb, Grün und Kupfer als Schrift nur auf Dunkel.
   ===================================================================================== */
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

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

  /* Dunkel: Leitstand */
  --bg: #070d18;              /* Seite, tiefstes Nachtblau */
  --nacht: #0a1322;           /* Abschnitte */
  --surface: #0f1a2d;         /* Kacheln */
  --surface-2: #142238;       /* gehobene Kacheln, Felder */
  --surface-3: #1b2c47;       /* Regler-Bahn, Trenner kräftig */
  --text: #eef3fa;            /* 17,2 : 1 auf --surface */
  --muted: #9fb0c6;           /* 7,9 : 1 auf --surface */
  --leise: #8396ae;           /* 5,9 : 1 auf --surface, nur kleine Hilfstexte */
  --border: rgba(160, 186, 222, .13);
  --border-stark: rgba(160, 186, 222, .24);

  /* Hell: Abschnitte wie Papier unter Tageslicht */
  --hell: #eef1f5;            /* Abschnittsgrund */
  --hell-karte: #ffffff;
  --tinte: #0b1424;           /* 17,4 : 1 auf --hell */
  --tinte-leise: #46536a;     /* 7,4 : 1 auf --hell */
  --hell-linie: #d6dce5;

  /* Die vier Farben */
  --sonne: #f7c548;           /* Solargelb, 11,9 : 1 auf --surface */
  --sonne-tief: #8a5d00;      /* Gelb als Schrift auf Hell, 5,6 : 1 auf --hell */
  --strom: #3fd69b;           /* Stromgrün, 10,1 : 1 auf --surface */
  --strom-tief: #0b6e48;      /* Grün als Schrift auf Hell, 5,9 : 1 auf --hell */
  --kupfer: #ea8d55;          /* Wärme-Kupfer, 7,5 : 1 auf --surface */
  --kupfer-tief: #9a4515;     /* Kupfer als Schrift auf Hell, 6,1 : 1 auf --hell */
  --netz: #9cb9e6;            /* Netz, kühles Blaugrau, 8,9 : 1 auf --surface */
  --haus: #f3f6fb;            /* Hausverbrauch */

  --accent: var(--sonne);
  --on-accent: #0b1424;       /* Schrift auf Gelb, 11,6 : 1 */
  --error: #ff8a7a;

  --radius: 22px;             /* Kacheln */
  --radius-gross: 30px;
  --radius-klein: 12px;
  --pille: 999px;

  --weich: cubic-bezier(.2, .7, .1, 1);
  --breite: 1280px;
  --rand: clamp(16px, 3.2vw, 40px);
  --abstand: clamp(84px, 10vw, 140px);
  --kopf: 64px;
}