/* ==========================================================================
   Design-Tokens

   Gemessen an der Vorlage https://precept.framer.website/ (.vorlage/DESIGN.md,
   Fensterbilder in .vorlage/shots/). Ausnahme ist --primary: das Orange aus
   dem BPR-Logo; die Vorlage hat keinen Akzent.

   Wer die Marke wechseln will, aendert --primary. site.css bleibt unberuehrt.
   ========================================================================== */

@font-face { font-family: "Geist"; src: url("../fonts/Geist-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../fonts/Geist-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../fonts/Geist-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url("../fonts/SpaceMono-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Space Mono"; src: url("../fonts/SpaceMono-latin-ext.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* --- Marke ------------------------------------------------------------ */
  --primary:        #f59e21;   /* Orange der Firmenzeile im Logo; auf Weiss nur Flaeche und Grafik (2,1:1) */
  --primary-druck:  #e08a0c;   /* Kopfknopf beim Druecken */

  /* --- Flaechen, aus der Vorlage ---------------------------------------- */
  --grund:          #ffffff;   /* 81 % der Flaeche */
  --flaeche:        #f5f5f5;   /* grosse graue Felder: Kundenstimme, Abschluss */
  --karte:          #f2f2f2;   /* Kennzahlkarten */
  --karte-offen:    #2b2b2b;   /* aufgeklappte Karte */
  --knopf:          #161616;   /* Hauptknopf */
  --tinte:          #000000;
  --text:           #333333;   /* Fliesstext und Zahlen */
  --text-leise:     #6b6b6b;   /* Nebentext, 5,3:1 auf Weiss, 4,9:1 auf #f2f2f2 */
  --linie:          #e3e3e3;   /* Rasterlinien */
  --knoten:         #9a9a9a;   /* Knoten an den Kreuzungen */
  --buehne:         #262625;   /* Ablauf, Graphit */
  --weiss-leise:    rgb(255 255 255 / .72);

  /* --- Schrift ---------------------------------------------------------- */
  --font:      "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Space Mono", ui-monospace, SFMono-Regular, Consolas, monospace;

  --held-wort: clamp(80px, 13.33vw, 192px);             /* live gemessen: 192 px auf 1440, 80 px auf 390 */
  --t-64: clamp(48px, 42.1px + 1.52vw, 64px);            /* -0,06 em, lh 1 */
  --t-48: clamp(36px, 30px + 1.25vw, 48px);              /* -0,04 em, lh 1,2 (mobil 36 statt 42: Wortlaengen) */
  --t-42: clamp(36px, 29.4px + .875vw, 42px);            /* Kartenzahl, -0,06 em, 42 px ab 1440 */
  --t-32: clamp(26px, 23px + .6vw, 32px);                /* -0,04 em, lh 1,2 */
  --t-24: 24px;                                          /* -0,03 em, lh 1,3 */
  --t-16: 16px;                                          /* 400, lh 1,4, -0,04 em */
  --t-15: 15px;
  --t-mono: 12px;

  /* --- Raster ----------------------------------------------------------- */
  --rand:       clamp(40px, 4.4vw, 88px); /* Mehr Textrand, Auftrag 04.11.2026 */
  --rand-karte: clamp(16px, 1.7vw, 32px);
  --karte-innen: clamp(28px, 3vw, 56px);
  --luft:       168px;         /* ueber und unter Textabschnitten */
  --feld-rand:  10.4vw;        /* Rasterlinien bei 150 px auf 1440 */
  --kopf-h:     72px;

  /* --- Form ------------------------------------------------------------- */
  --r:        8px;
  --r-gross:  10px;
  --kurve:    cubic-bezier(.21, .84, .56, 1);      /* Vorlage: color 0,4 s */
  --kurve-p3: cubic-bezier(.215, .61, .355, 1);    /* power3.out */
  --kurve-circ: cubic-bezier(.075, .82, .165, 1);  /* circ.out */
}

@media (max-width: 900px) {
  :root { --rand: 28px; --rand-karte: 12px; --karte-innen: 24px; --luft: 104px; --feld-rand: 24px; --kopf-h: 64px; }
}