/* =========================================================
   Vertretio Design Tokens
   Redesign 2026-07 im editorialen Stil (Serif plus Sans)
   Einzige Quelle fuer Farben, Typografie, Abstaende, Radien
   ========================================================= */

:root{

  /* --- Grundflaechen: zarte Toenung wie der Loginverlauf der App --- */
  --bg:#F6FAF9;             /* Seitenhintergrund, Hauch Gruen Blau */
  --bg-verlauf:linear-gradient(160deg,#F2FAF6 0%,#EFF5FC 46%,#FBF9F2 100%);
                            /* Mint zu Himmelblau zu warmem Creme, sehr hell */
  --bg-deep:rgba(18,74,96,.045);  /* alternierende Sektionen, laesst den Verlauf durch */
  --card:#FFFFFF;           /* Karten und Formulare, klares Weiss als Kontrast */
  --nav-glas:rgba(242,250,246,.85);  /* Kopfzeile im Scrollzustand, Ton des Verlaufsanfangs */

  /* --- Text: warmes Anthrazit, kein reines Schwarz --- */
  --ink:#1A1A18;            /* Headlines, starke Texte */
  --ink-soft:#4C4C46;       /* Fliesstext */
  --ink-mute:#7C7C72;       /* Labels, Captions, Nebentexte */

  /* --- Linien --- */
  --line:rgba(0,0,0,.08);
  --line-soft:rgba(0,0,0,.05);

  /* --- Der eine Akzent: Vertretio Markengruen --- */
  --green:#1AAE6F;
  --green-dark:#13935C;
  --green-deep:#0F7A4C;
  --green-soft:#E3F1E9;     /* Tint auf Cremegrund */

  /* --- Schweizer Kreuz im Footer --- */
  --red-ch:#DA291C;

  /* --- Typografie --- */
  --font-display:"Source Serif 4","Tiempos Text",Cambria,Georgia,serif;
  --font-ui:"Plus Jakarta Sans",Arial,sans-serif;

  --text-hero:clamp(2.5rem, 2.9vw + 1.6rem, 3.5rem);   /* 40 bis 56px */
  --text-h2:clamp(1.85rem, 1.8vw + 1.2rem, 2.5rem);    /* 30 bis 40px */
  --text-h3:1.2rem;
  --text-lead:clamp(1.1rem, .4vw + 1rem, 1.25rem);     /* 18 bis 20px */
  --text-body:1.0625rem;                                /* 17px */
  --text-sm:.9rem;
  --text-label:.8rem;                                   /* Eyebrows, Labels */

  /* --- Layout --- */
  --max:1200px;
  --max-text:65ch;
  --space-section:clamp(6rem, 5vw + 4rem, 10rem);       /* 120 bis 160px Desktop */
  --space-block:clamp(2.5rem, 4vw, 4rem);

  /* --- Radien und Schatten: dezent --- */
  --radius-sm:8px;
  --radius:12px;
  --radius-pill:980px;
  --shadow-card:0 1px 3px rgba(0,0,0,.06);
  --shadow-lift:0 14px 28px rgba(26,26,24,.12), 0 3px 8px rgba(26,26,24,.06);

  /* --- Bewegung --- */
  --ease:cubic-bezier(.25,.6,.3,1);
  --dur:250ms;
  --reveal-shift:20px;
  --reveal-dur:600ms;

  /* --- Kompatibilitaets Aliasse (bestehende Seiten und Inline Styles) --- */
  --dark:var(--ink);
  --text:var(--ink-soft);
  --gray:var(--ink-soft);
  --gray-2:var(--ink-mute);
  --light:var(--ink-mute);
  --border:var(--line);
  --border-soft:var(--line-soft);
  --subtle:var(--bg-deep);
  --subtle-2:var(--bg);
  --white:var(--card);
  --green-darker:var(--green-deep);
  --green-tint:var(--green-soft);
  --green-bg:var(--green-soft);
  --shadow-sm:var(--shadow-card);
  --shadow-md:var(--shadow-card);
  --shadow-lg:var(--shadow-lift);
  --shadow-phone:0 24px 48px rgba(26,26,24,.18);
  --max-narrow:780px;

  /* --- Fachfarben Masterplan: gedeckt, wenig Saettigung --- */
  --fach-ma-bg:#E9EEF5; --fach-ma-ink:#3B5375;
  --fach-de-bg:#F2ECE0; --fach-de-ink:#77582A;
  --fach-nmg-bg:#E4F0E7; --fach-nmg-ink:#2E6B44;
  --fach-en-bg:#EDE9F3; --fach-en-ink:#59487A;
  --fach-fr-bg:#F4E9E6; --fach-fr-ink:#8A4A3B;
  --fach-sp-bg:#E7F0F0; --fach-sp-ink:#2F6866;
  --fach-mu-bg:#F3EAF0; --fach-mu-ink:#7A4468;
  --fach-bg-bg:#EFEFE3; --fach-bg-ink:#6B6B2E;
  --fach-ttg-bg:#EDEDEA; --fach-ttg-ink:#57574F;
}