/* VHD Bautechnik – Designsystem: Tokens
   Einzige Quelle für Farben, Schrift, Abstände und Bewegung. Die Website bindet diese Datei unverändert ein.
   Grundlage: Logo (Quadrat + Kreis, schwarz-weiß) und die Markenfarben Nachtblau #071C24 und Signalgelb #F2DA1A. */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-standard.woff2") format("woff2-variations"), url("../fonts/archivo-standard.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-standard-ext.woff2") format("woff2-variations"), url("../fonts/archivo-standard-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ---- Farbe ---------------------------------------------------------------- */
  --nacht: #071c24;        /* Markenfarbe: Kopf, Fuß, große Flächen */
  --nacht-2: #0d2a35;      /* Fläche auf Nachtblau (Kacheln, Leisten) */
  --nacht-3: #1d4351;      /* Linien auf Nachtblau */
  --signal: #f2da1a;       /* Markenfarbe: Hauptaktion, Fokus, Zähler. Sparsam */
  --signal-hell: #f8e872;  /* Hover auf Signal */
  --papier: #f5f6f3;       /* Seitengrund */
  --weiss: #ffffff;        /* Produktflächen, Felder */
  --beton: #e3e7e4;        /* ruhige Abschnitte, Bildgrund */
  --linie: #c9d1d0;        /* Rahmen und Trenner auf Hell */
  --grafit: #14232a;       /* Text */
  --stahl: #4f6168;        /* Nebentext auf Hell (6:1 auf Papier) */
  --nebel: #a7bac1;        /* Nebentext auf Nachtblau */
  --ok: #2b7a4b;
  --fehler: #b3261e;

  /* ---- Schrift: eine Familie, die Breite trägt den Charakter -------------- */
  --schrift: "Archivo", "Arial Nova", "Helvetica Neue", Arial, sans-serif;
  --breit: 118%;   /* Überschriften: erinnert an das breite BAUTECHNIK im Logo */
  --normal: 100%;  /* Fließtext */
  --schmal: 90%;   /* Daten: Preise, Tabellen, Merkmale */

  /* Skala: große Terz (1,25) auf 17 px */
  --t-klein: 0.8125rem;  /* 13 */
  --t-neben: 0.875rem;   /* 14 */
  --t-text: 1.0625rem;   /* 17 */
  --t-1: 1.3125rem;      /* 21 */
  --t-2: 1.625rem;       /* 26 */
  --t-3: 2.0625rem;      /* 33 */
  --t-4: 2.5625rem;      /* 41 */
  --t-5: 3.25rem;        /* 52 */
  --zeile: 1.55;
  --zeile-eng: 1.12;

  /* ---- Abstand (4er-Raster) ----------------------------------------------- */
  --a-1: 4px;
  --a-2: 8px;
  --a-3: 12px;
  --a-4: 16px;
  --a-5: 24px;
  --a-6: 32px;
  --a-7: 48px;
  --a-8: 64px;
  --a-9: 96px;
  --inhalt: 1320px;
  --rand: clamp(16px, 4vw, 40px);

  /* ---- Form: Quadrat und Kreis aus dem Logo ------------------------------- */
  --ecke: 2px;             /* Felder und Knöpfe. Flächen haben keine Rundung */
  --rahmen: 1px solid var(--linie);
  --rahmen-dunkel: 1px solid var(--nacht-3);

  /* ---- Bewegung: langsam und weich (Wunsch André: rund 1 s, sanfter Start) - */
  --dauer: 1000ms;         /* Öffnen, Einblenden, Hinzufügen */
  --dauer-kurz: 600ms;     /* Farbwechsel bei Hover */
  --kurve: cubic-bezier(0.45, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dauer: 1ms; --dauer-kurz: 1ms; }
}