/* =====================================================================================
   Musterseite Installateur · 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.
   --bg muss zum Grund der gerechneten Bilder passen (HG in _werkzeug/render.html), sonst sieht man Kanten.
   ===================================================================================== */
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

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

  --bg: #f4f1ec;            /* warmes Papierweiß, gleich wie der Grund der Hausbilder */
  --surface: #ffffff;       /* Karten */
  --surface-2: #ebe6de;     /* abgesetzte Abschnitte */
  --text: #12202a;          /* 15,4 : 1 auf --bg */
  --muted: #4d5a63;         /* 6,6 : 1 auf --bg */
  --accent: #0a6a8a;        /* Knöpfe, Links. Weiß darauf 5,9 : 1 */
  --on-accent: #ffffff;
  --accent-tief: #075570;
  --accent-hell: #dcecf2;
  --border: #ddd6cb;
  --error: #b42318;

  /* Leitungsfarben, gleich wie in den gerechneten Bildern */
  --kalt: #2978e0;
  --warm: #db3338;
  --abwasser: #848c94;
  --vorlauf: #f2851f;
  --ruecklauf: #f5bd5c;
  --gas: #f2c42e;

  --nacht: #0b1822;         /* Röntgen und dunkle Abschnitte */
  --nacht-text: #e8eef1;
  --nacht-leise: #a7b6bf;

  --radius: 22px;
  --radius-gross: 32px;
  --radius-klein: 12px;

  --breite: 1240px;
  --abstand: clamp(88px, 11vw, 150px);
  --kopf: 68px;
}