/* =====================================================================================
   Vorlage 21 Installateur · 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).
   ===================================================================================== */
@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: #ffffff;            /* Grund */
  --surface: #f2f6f8;       /* abgesetzte Abschnitte, kühles Hellgrau mit Hauch Wasser */
  --text: #0f1e26;          /* Schrift, 17,4 : 1 auf Weiß */
  --muted: #4b5a63;         /* leiser Text, 7,0 : 1 auf Weiß, 6,5 : 1 auf --surface */
  --accent: #0a6a8a;        /* die eine Farbe: Knöpfe, Links, Marken. Weiß darauf 5,9 : 1 */
  --on-accent: #ffffff;
  --accent-tief: #075570;   /* Knopf beim Überfahren, Weiß darauf 8,1 : 1 */
  --accent-hell: #e2f1f6;   /* Hauch Wasser: Kacheln, Bildrahmen, Marken */
  --minze: #e5f3ec;         /* zweiter Kachelton (Fläche, nie Schrift) */
  --waerme: #fbebe4;        /* dritter Kachelton für Heizung (Fläche, nie Schrift) */
  --dunkel: #0c1a21;        /* Abschnitt Fußbodenheizung und Fuß */
  --dunkel-text: #e8eef1;   /* Schrift auf dunkel, 15,9 : 1 */
  --dunkel-leise: #a6b5bd;  /* leise auf dunkel, 8,6 : 1 */
  --border: #d8e2e7;        /* Zierlinien */
  --error: #b42318;         /* Fehlermeldungen in einer Web-App, 6,5 : 1 auf Weiß */

  /* Rohrnetz im klebenden Abschnitt: Inhaltsfarben, kein Schmuck */
  --rohr: #9aa6b2;
  --vorlauf: #d4473a;
  --ruecklauf: #3d5a98;
  --trinkwasser: #1592b8;

  --radius: 20px;           /* Karten, Kacheln */
  --radius-gross: 32px;     /* große Bilder, Bühne */
  --radius-klein: 12px;     /* Felder, Marken */

  --breite: 1260px;         /* Inhalt höchstens so breit, immer mittig */
  --spalte: 640px;          /* Textspalte */
  --abstand: clamp(80px, 11vw, 144px);   /* zwischen den Abschnitten */
  --kopf: 68px;
}