/* ==========================================================================
   Physiotherapie Kamp — Design-Tokens
   Hell, ruhig, klar. Die Praxisfarben (Blau, Rot) kommen aus dem Logo und
   sind die einzigen Farben; alles andere ist Papier und Tinte.
   ========================================================================== */
:root {
  /* Marke — direkt aus dem Logo abgegriffen */
  --c-blue: #0c3796;
  --c-blue-deep: #081f56;
  --c-blue-soft: #e7edf9;
  --c-blue-line: #c8d6f0;
  --c-red: #d71b33;

  /* Papier und Tinte */
  --c-paper: #f7f6f3;      /* Grundfläche */
  --c-paper-2: #eeece7;    /* zweite helle Stufe */
  --c-white: #ffffff;
  --c-ink: #14192a;        /* Fließtext und Überschriften */
  --c-muted: #5b6273;      /* Nebentext */
  --c-faint: #8a91a1;

  --line: rgba(20, 25, 42, 0.12);
  --line-strong: rgba(20, 25, 42, 0.28);
  --line-dark: rgba(255, 255, 255, 0.18);
  --on-blue: rgba(255, 255, 255, 0.82);

  /* Typografie */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-sans: "Inter", "Helvetica Neue", Arial, sans-serif;
  --t-display: clamp(2.3rem, 1.6rem + 3.2vw, 4.4rem);  --lh-display: 1.08;
  --t-h2: clamp(1.7rem, 1.4rem + 1.6vw, 2.6rem);       --lh-h2: 1.16;
  --t-h3: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);     --lh-h3: 1.3;
  --t-body: clamp(1.02rem, 0.98rem + 0.28vw, 1.125rem); --lh-body: 1.7;
  --t-small: 0.9375rem;
  --t-micro: 0.8125rem;

  /* Rhythmus */
  --sp-1: 0.5rem; --sp-2: 1rem; --sp-3: 1.5rem; --sp-4: 2rem; --sp-6: 3rem;
  --section-y: clamp(3.5rem, 2.5rem + 5vw, 7rem);
  --head-gap: clamp(2rem, 1.5rem + 3vw, 3.5rem);
  --wrap-max: 76rem;
  --wrap-x: clamp(1.25rem, 4vw, 3rem);

  /* Radius — weich, wie in einer Praxis, aber nicht verspielt */
  --radius-s: 0.4rem;
  --radius-m: 0.9rem;
  --radius-l: clamp(1.2rem, 2.5vw, 1.8rem);
  --radius-pill: 999px;

  /* Motion */
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}