/* =============================================================
   01 · DESIGN TOKENS
   Ruhige, minimalistische Basis: eine Schrift (Manrope),
   wenige Farben, viel Weißraum. Alle Stylesheets nutzen nur
   diese Variablen.
   ============================================================= */
:root {
  /* Marke – Rot nur als Akzent (Buttons, Linien, Hover) */
  --c-red: #BE1E28;
  --c-red-dark: #9C161F;
  --c-red-soft: #F9ECEC;

  /* Neutrale Skala */
  --c-ink: #121315;
  --c-anthracite: #1D1F22;
  --c-steel: #4B4F55;
  --c-muted: #7A7E85;
  --c-line: #E6E6E2;
  --c-line-soft: #EFEFEC;
  --c-line-dark: rgba(255, 255, 255, 0.12);
  --c-bg: #F5F4F1;
  --c-tint: #F0EFEA;
  --c-surface: #FFFFFF;
  --c-text: var(--c-anthracite);
  --c-text-inverse: #F5F5F3;

  /* Schrift */
  --f-mono: "DM Mono", ui-monospace, "SF Mono", Consolas, monospace;
  --f-sans: "Manrope", "Segoe UI", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;

  /* Typo-Skala – bewusst zurückhaltend */
  --fs-xs: 0.72rem;
  --fs-sm: 0.8125rem;
  --fs-base: 0.875rem;
  --fs-lg: clamp(0.95rem, 0.9rem + 0.25vw, 1.0625rem);
  --fs-xl: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --fs-h3: clamp(1.05rem, 1rem + 0.35vw, 1.25rem);
  --fs-h2: clamp(1.6rem, 1.35rem + 0.9vw, 2rem);
  --fs-h1: clamp(1.8rem, 1.5rem + 1.1vw, 2.125rem);

  /* Raster & Abstände */
  --gutter: clamp(1.25rem, 5vw, 5.5rem);
  --container: 1240px;
  --container-narrow: 820px;
  --section: clamp(3.5rem, 7vw, 6.5rem);
  --section-sm: clamp(2.5rem, 5vw, 4rem);
  --gap: clamp(1.25rem, 2.5vw, 2.5rem);
  --header-h: 72px;

  /* Form */
  --radius: 12px;
  --radius-sm: 8px;
  --radius-pill: 999px;
  --shadow-soft: 0 24px 60px -30px rgba(18, 19, 21, 0.28);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur: 0.6s;
  --dur-fast: 0.25s;

  color-scheme: light;
}

@media (max-width: 767px) {
  :root { --header-h: 68px; }
}