/* ==========================================================================
   TOKENS — einzige Quelle für Farbe, Typo, Layout, Radien, Motion.
   Basis: master/02-global-design-master.md + styles/design-tokens.css (v3).
   Werte nur hier ändern, niemals in Seiten-CSS überschreiben.
   ========================================================================== */
:root{
  /* Flächen */
  --color-bg:#FFFFFF;
  --color-bg-soft:#F8FAF9;
  --color-green-tint:#EAF4F0;
  --color-blue-tint:#DCECF2;
  --color-sand:#F6F2EC;

  /* Text */
  --color-ink:#111716;
  --color-muted:#66716D;
  --color-line:#E1E7E4;

  /* Akzente */
  --color-accent:#167A68;
  --color-accent-dark:#0E5A4C;
  --color-accent-blue:#176B87;
  /* Tiefes Petrol für Abschlussflächen — Farbe des Marken-Signets */
  --color-deep:#0F2D28;
  --color-deep-2:#154038;

  /* Auf dunklen Flächen */
  --color-on-deep:#FFFFFF;
  --color-on-deep-muted:#BFD3CD;

  /* Typografie */
  --font-sans:'Instrument Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-serif:'Source Serif 4',Georgia,'Times New Roman',serif;
  --font-body:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;

  --step-display:clamp(34px,4.4vw,58px);
  --step-h1:clamp(30px,3.6vw,48px);
  --step-h2:clamp(26px,2.9vw,38px);
  --step-h3:clamp(17px,1.35vw,20px);
  --step-body:clamp(15px,1.05vw,17px);
  --step-small:14px;
  --step-eyebrow:11px;

  /* Layout */
  --container-max:1280px;
  --container-narrow:900px;
  --gutter:56px;
  --section-y:clamp(72px,7vw,112px);
  --section-y-sm:clamp(52px,5vw,80px);

  /* Radien */
  --radius-button:10px;
  --radius-card:16px;
  --radius-image:18px;
  --radius-banner:20px;

  /* Motion */
  --ease-standard:cubic-bezier(.4,0,.2,1);
  --duration-fast:180ms;
  --duration-medium:550ms;

  /* Linien/Flow */
  --flow-stroke:1.5px;
  --shadow-card:0 12px 34px rgba(17,23,22,.06);
  --shadow-raised:0 20px 54px rgba(17,23,22,.10);
}

@media (max-width:1099px){
  :root{--gutter:32px}
}
@media (max-width:767px){
  :root{--gutter:24px}
}