/* =====================================================================================
   Vorlage 48 Glas und Fassade · 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.
   Vier Materialfarben aus der Branche: Glas-Türkis (die grüne Kante von Floatglas), Aluminium (Profile),
   Abendhimmel-Violett (was eine Westfassade am Abend spiegelt), Messing (eloxierte Deckleisten).
   Kontraste stehen hinter den Textfarben (gemessen auf dem jeweiligen Scheibengrund).
   ===================================================================================== */
@font-face {
  font-family: "Mona Sans";
  src: url("../fonts/mona-sans-var.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

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

  /* Seitengrund hinter allen Scheiben (fest, scrollt nicht mit) */
  --bg: #e3e8ec;
  --surface: #f3f5f7;

  /* Helle Scheibe: Aluminium hell */
  --alu-0: #f3f5f7;
  --alu-1: #e6eaee;
  --alu-2: #d5dbe1;
  --alu-3: #aab3bc;
  --alu-4: #6f7a85;
  --text: #14122a;          /* 16,9 : 1 auf --alu-0 */
  --muted: #474a5e;         /* 8,4 : 1 auf --alu-0 */

  /* Glas-Türkis */
  --tuerkis: #1fa89f;
  --tuerkis-tief: #0b6965;  /* Links und Kicker auf hell, 5,9 : 1 */
  --tuerkis-hell: #7fdcd2;  /* auf dunkel, 10 : 1 */
  --tuerkis-nacht: #0c2f33; /* dunkle türkise Scheibe */
  --kante: #8fd6c9;         /* die grüne Kante von Floatglas */

  /* Abendhimmel-Violett */
  --violett-nacht: #191433; /* dunkle Scheibe */
  --violett-tief: #241c48;
  --violett: #5a46a8;
  --violett-hell: #b8adef;  /* auf dunkel, 9,4 : 1 */
  --nacht-text: #f3f1fb;    /* 17 : 1 auf --violett-nacht */
  --nacht-leise: #bdb6dc;   /* 9,2 : 1 auf --violett-nacht */

  /* Messing */
  --messing: #d2ad5e;       /* Hauptknopf, darauf --violett-nacht 8,9 : 1 */
  --messing-hell: #e6cc92;
  --messing-tief: #7d5f1f;  /* Text auf hell, 5,2 : 1 */

  /* Licht und Wärme im Werkzeug */
  --licht: #ffd58a;
  --kupfer: #e0703f;

  --accent: var(--messing);
  --on-accent: var(--violett-nacht);
  --border: rgba(20, 18, 42, .12);
  --error: #b42318;

  --radius: 6px;            /* Glas hat kleine Ecken */
  --radius-klein: 4px;
  --radius-knopf: 999px;

  --breite: 1200px;
  --rand: clamp(10px, 1.6vw, 22px);   /* Abstand der Scheiben zum Fensterrand */
  --innen: clamp(20px, 4.4vw, 72px);  /* Innenabstand einer Scheibe */
  --abstand: clamp(72px, 9vw, 132px);
  --ueberlapp: clamp(24px, 3vw, 44px);/* so weit liegt eine Scheibe über der vorigen */
  --kopf: 74px;
  --weich: cubic-bezier(.2, .7, .1, 1);
}