/* =====================================================================================
   Vorlage 46 Architekturbüro · Lichtmaß Architekten, Innsbruck · Farben, Schrift, Maße
   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.
   Bild: ein heller Arbeitstisch mit weißem Kartonmodell. Viel Weiß und Betongrau, dazu drei
   kräftige Farben aus der Landschaft und dem Material des Hauses:
     Bergblau   Knöpfe, Links, aktive Leiste, Höhenlinien und Maßketten im Modell
     Lärche     die Sonne, der Sonnenbogen, Hinweise, die Jobs
     Grasgrün   „in der Sonne“, Zahlen, die gut sind
   Kontraste (WCAG): Text auf Papier 16 : 1, gedämpfter Text 6,6 : 1, Weiß auf Bergblau 8,9 : 1,
   Weiß auf Lärche 4,9 : 1 (nur große Flächen und Knöpfe), Lärche-Text auf Papier 6,0 : 1.
   ===================================================================================== */
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-var.woff2") format("woff2");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --schrift: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* Papier und Beton */
  --papier: #f5f4f0;          /* Seite, wie Zeichenkarton */
  --weiss: #ffffff;           /* Planblätter */
  --beton-1: #ebe9e4;         /* abgesetzte Flächen */
  --beton-2: #d6d3cc;         /* Haarlinien */
  --beton-3: #a9a59d;         /* kräftigere Linien */
  --beton-4: #24282c;         /* dunkles Band (Sichtbeton im Schatten) */
  --tinte: #15181b;           /* Text, 16 : 1 auf Papier */
  --leise: #565a5e;           /* gedämpfter Text, 6,6 : 1 auf Papier, 7,0 : 1 auf Weiß */

  /* Die drei Farben */
  --bergblau: #1f4e79;
  --bergblau-tief: #163a5c;
  --bergblau-hell: #e3eaf1;
  --laerche: #b4561a;         /* Flächen und Sonne */
  --laerche-text: #994612;    /* Lärche als Schrift auf Papier */
  --laerche-hell: #f5e7da;
  --gras: #3f7a3a;
  --gras-hell: #e3eedf;

  /* Nacht (Abend im Modell, Kontakt, Fuß) */
  --nacht: #111a24;
  --nacht-2: #1a2531;
  --nacht-text: #e9edf0;
  --nacht-leise: #aab4bd;     /* 8,3 : 1 auf --nacht */

  --bg: var(--papier);
  --surface: var(--weiss);
  --text: var(--tinte);
  --muted: var(--leise);
  --accent: var(--bergblau);
  --on-accent: #ffffff;
  --border: var(--beton-2);
  --error: #b42318;

  --radius: 3px;              /* Knöpfe und Felder: fast eckig, wie geschnittener Karton */
  --radius-blatt: 2px;

  --breite: 1320px;
  --kopf: 64px;
  --rand: clamp(16px, 4vw, 48px);
  --abstand: clamp(88px, 11vw, 160px);
  --weich: cubic-bezier(.2, .7, .1, 1);
}

@media (max-width: 1099px) {
  :root { --kopf: 56px; }
}