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

   Jeder Wert hier ist an der Vorlage gemessen worden, nicht geschaetzt:
   https://omniscompany.framer.website/
   Ausnahme ist --primary. Das ist die Farbe des Kunden, gemessen am Logo.

   Wer die Marke wechseln will, aendert --primary und --primary-dark.
   Wer die Vorlage wechseln will, laesst measure.py neu laufen und ersetzt
   diese Datei. site.css bleibt beide Male unberuehrt.
   ========================================================================== */

:root {
  /* --- Marke ------------------------------------------------------------ */
  --primary:        #13AEB5;          /* exakt die Markenfarbe: Linien, Icons, grosse Zahlen */
  --primary-fest:   #0e7d82;     /* kontrastfeste Ableitung fuer gefuellte Handlungen */
  --primary-dark:   #09676b;     /* Hover auf --primary-fest */
  --primary-kontra: #ffffff;     /* Schrift auf --primary-fest */
  --primary-text:   #0b696d;     /* die Marke als kleine Schrift auf dem Grund */

  /* --- Flaechen, aus der Vorlage ---------------------------------------- */
  --grund:          #f4f6f3;           /* warmer technischer Papiergrund */
  --grund-zwei:     #e7edeb;           /* ruhige Gegenflaeche fuer Referenzen */
  --akzent-sanft:   #d9f1f2;           /* technische Markierung ohne Signalflaeche */
  --tinte:          #08242b;              /* dunkles Blaugruen */
  --tinte-leise:    #52656a;        /* Nebentext, Labels */
  --kontrast:       #08222b;         /* die dunkle bzw. laute Gegenflaeche */
  --kontrast-tinte: #ffffff;     /* Schrift auf der Gegenflaeche */
  --flaeche:        #ffffff;          /* Karten, Eingabefelder */
  --linie:          #cbd5d3;             /* Rahmen und Trenner */

  /* --- Schrift ---------------------------------------------------------- */
  --font-display: "Manrope", system-ui, sans-serif;
  --font-text:    "Manrope", system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono:    "Manrope", system-ui, sans-serif;

  --h1: clamp(52px, 8.6vw, 132px);
  --h2: clamp(40px, 5.6vw, 82px);
  --h3: clamp(28px, 3.5vw, 50px);
  --h4: clamp(22px, 2.25vw, 32px);
  --text-l:  22px;
  --text-m:  18px;
  --text-s:  17px;
  --text-xs: 14px;

  --lh-titel: 1.14;
  --lh-text:  1.5;
  --ls-titel: -0.01em;
  --ls-label: 0.25px;

  --gewicht-titel: 300;
  --gewicht-text:  400;
  --gewicht-stark: 600;

  /* --- Raster ----------------------------------------------------------- */
  --container: 1344px;
  --rand:      24px;                      /* Aussenabstand auf kleinen Schirmen */
  --sek:       120px;               /* senkrechter Sektionsabstand */
  --sek-eng:   72px;
  --spalt:     28px;                 /* Abstand im Raster */

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;

  /* --- Form ------------------------------------------------------------- */
  --radius:       6px;
  --radius-klein: 4px;
  --radius-knopf: 40px;
  --schatten:     rgb(0, 0, 0) 0px 0px 0px 1px inset;
  --knopf-hoehe:  58px;

  /* --- Bewegung --------------------------------------------------------- */
  --dauer:  220ms;
  --kurve:  cubic-bezier(.2,.7,.3,1);
  --dauer-lang: 700ms;
}