/* =====================================================================================
   Ziegelrot Dachdeckerei und Spenglerei · 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.
   Drei Farbwelten, von oben nach unten wie das Haus: Himmel (Grund), Ziegelrot (der eine Akzent),
   Zink-Grau (First, Rinne, Sockel). Umfärben: --accent, --accent-text, --accent-tief, --ziegel.
   Eine Schriftfamilie: Sora (variabel 100 bis 800), Überschriften 700, Text 400, Zahlen 600 mit Tabellenziffern.
   ===================================================================================== */
@font-face {
  font-family: "Sora";
  src: url("../fonts/sora-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}

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

  /* Himmel: der Grund der Seite */
  --bg: #e9f0f5;            /* heller Himmel */
  --bg-tief: #d6e3ec;       /* Himmel am Horizont */
  --surface: #ffffff;       /* Karten */
  --text: #1a2024;          /* 15,6 : 1 auf --bg */
  --muted: #4b575f;         /* 6,9 : 1 auf --bg, 6,2 : 1 auf --wand */
  --border: #cfd9e0;

  /* Ziegelrot: der eine Akzent */
  --accent: #b7402b;        /* Knöpfe. Weiß darauf 5,6 : 1 */
  --accent-tief: #973320;   /* Knopf gedrückt, Blechkante */
  --accent-text: #9b3421;   /* Akzent als Schrift auf hellem Grund, 6,1 : 1 auf --wand */
  --accent-hell: #f6e3dd;   /* Hauch Rot für Flächen, nie Schrift */
  --accent-licht: #f08a72;  /* Akzent als Schrift auf dunklem Grund, 5,3 : 1 auf --sockel */
  --on-accent: #ffffff;
  --error: #b42318;

  /* Zink-Grau: First (Kopf), Rinne, Sockel, Fuß */
  --first: #1f292f;         /* Kopfleiste */
  --dach: #27323a;          /* erster Bildschirm, Dachfläche im Schatten */
  --dach-2: #1e272e;
  --dach-text: #f4f6f8;     /* 15 : 1 auf --dach */
  --dach-leise: #c3ccd2;    /* 8,6 : 1 auf --dach */
  --zink: #5b686f;          /* Rinne, Grund */
  --zink-hell: #7d8a91;     /* Rinne, Glanzkante */
  --zink-licht: #e3e8eb;    /* Blech-Knopf, Sprossen */
  --zink-text: #ffffff;     /* 6 : 1 auf --zink */
  --sockel: #2a3338;        /* Preise */
  --sockel-2: #333d43;      /* Zeilen auf dem Sockel */
  --sockel-text: #eef2f4;   /* 12 : 1 */
  --sockel-leise: #b4bfc6;  /* 6,6 : 1 */

  /* Fassade: die helle Wand zwischen Rinne und Sockel */
  --wand: #f3efe8;          /* Putz, warm */
  --wand-2: #e9e3d9;        /* abgesetzte Felder auf der Wand */
  --fenster: #e4edf3;       /* Glas im Dachcheck-Fenster */

  /* Boden: Kontakt und Fuß */
  --boden: #1c1a17;
  --boden-2: #2a2622;
  --boden-text: #ece7df;    /* 14 : 1 */
  --boden-leise: #b9b1a6;   /* 7,6 : 1 */
  --erde: #121110;          /* Fuß, ganz unten */

  /* Zeichnungen (Dach und Schnitt) */
  --ziegel: #c4583f;        /* Tondachziegel */
  --ziegel-tief: #8e3a28;   /* Fuge, Schatten unter dem Ziegel */
  --first-ziegel: #a9452f;
  --holz: #d9b47f;          /* Lattung */
  --holz-tief: #b58d57;     /* Konterlattung, Sparren */
  --bahn: #8a9bab;          /* Unterspannbahn */
  --bahn-tief: #6f8191;
  --daemmung: #e8d59b;      /* Dämmung */
  --daemmung-tief: #cdb773;
  --blech: #aeb8be;         /* Rinne, Fallrohr, Einfassung */
  --blech-tief: #7c878d;
  --blech-licht: #d8dfe3;
  --wasser: #2f86c9;        /* der Tropfen */
  --wasser-hell: #8ec4ea;
  --putz: #f1ebe1;          /* Wand im Schnitt */
  --putz-tief: #d9d0c2;
  --kies: #b7ab98;

  --radius: 6px;            /* eckig, wie Blech geschnitten */
  --radius-klein: 3px;
  --kante: 0 3px 0 0;       /* die eine Kante der Knöpfe */

  --breite: 1240px;
  --abstand: clamp(80px, 10vw, 136px);
  --kopf: 64px;
  --leiter: 72px;           /* Platz rechts für die Leiter am PC */
}