/*
 * Design-Tokens aus Figma (Lero_Webdesign_2025)
 * Mobil-Entwurf: 393 px breit, Desktop-Entwurf: 1600 px breit.
 * Fließende Werte skalieren linear zwischen diesen beiden Breiten:
 *   clamp(mobil, mobil + Differenz * --fluid, desktop)
 */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
}

:root {
  /* Farben */
  --color-primary: #2832a0;          /* Lero-Blau */
  --color-accent: #c2e81f;           /* Limette */
  --color-muted: #bdbdd9;            /* Lavendelgrau: Unterzeilen, Footer */
  --color-muted-50: rgb(189 189 217 / 0.5);
  --color-muted-30: rgb(189 189 217 / 0.3);
  --color-surface: rgb(189 189 217 / 0.1);  /* heller Sektionshintergrund */
  --color-text: #000;
  --color-white: #fff;
  --color-error: #c0262d;

  /* Schrift */
  --font-base: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* 0 bei 393 px Viewport, 1 bei 1600 px (für Abstände) */
  --fluid: ((100vw - 393px) / 1207);

  /*
   * Größen in drei Stufen (siehe auch die beiden Media-Queries unten):
   *   Handy 393 px  →  Laptop 1024–1280 px (kompakt)  →  Desktop 1600 px (Figma 1:1)
   * Bis 1024 px wird zwischen Handy- und Laptop-Wert interpoliert.
   */
  --to-laptop: ((100vw - 393px) / 631);  /* 0 bei 393 px, 1 bei 1024 px */

  /* Schriftgrößen                                                       Handy · Laptop · Desktop */
  --fs-hero: clamp(3.125rem, calc(3.125rem + 6 * var(--to-laptop)), 3.5rem);     /* 50 · 56 · 80 */
  --fs-h2: clamp(2.5rem, calc(2.5rem + 4 * var(--to-laptop)), 2.75rem);          /* 40 · 44 · 60 */
  --fs-number: 5rem;                                                             /* 80 · 80 · 110 */
  --fs-lead: clamp(1.5rem, calc(1.875rem - 6 * var(--to-laptop)), 1.875rem);     /* 30 · 24 · 30 */
  --fs-subline: clamp(1.375rem, calc(1.5rem - 2 * var(--to-laptop)), 1.5rem);    /* 24 · 22 · 30 */
  --fs-title: clamp(1.375rem, calc(1.5rem - 2 * var(--to-laptop)), 1.5rem);      /* 24 · 22 · 30  Kachel-, Block-, Teamtitel */
  --fs-body: 1.125rem;                                                           /* 18 · 18 · 24 */
  --fs-footer: clamp(1rem, calc(1.125rem - 2 * var(--to-laptop)), 1.125rem);     /* 18 · 16 · 20 */
  --fs-button: clamp(1.0625rem, calc(1.25rem - 3 * var(--to-laptop)), 1.25rem);  /* 20 · 17 · 20 */
  --fs-nav: 1rem;                                                                /* –  · 16 · 20  (Desktop-Menü ab 1280 px) */
  --fs-nav-mobile: 1.75rem;                                                      /* 28 */
  --fs-small: 1rem;                                                              /* 16 */

  /* Abstände und Maße                                                   Handy · Laptop · Desktop */
  --gutter: clamp(1.25rem, calc(1.25rem + 20 * var(--to-laptop)), 2.5rem);       /* 20 · 40 · 60 */
  --section-space: clamp(3rem, calc(3rem + 16 * var(--to-laptop)), 4rem);        /* 48 · 64 · 96 */
  --container-max: 100rem;                                                       /* 1600 */
  --header-height: 6.8rem;                                                       /* 109 · 109 · 130 */
  --logo-width: clamp(115px, calc(115px + 15 * var(--to-laptop)), 130px);        /* 115 · 130 · 163 */
  --btn-height: clamp(52px, calc(60px - 8 * var(--to-laptop)), 60px);            /* 60 · 52 · 60 */
  --btn-wide: 300px;                                                             /* –  · 300 · 337 */

  /* Formen */
  --radius: 5px;
  --radius-field: 8px;
  --shadow-button: 0 1px 2px rgb(0 0 0 / 0.05);

  /* Bewegung */
  --transition: 180ms ease;
}

/* Laptop (1024–1280 px): kompakte Werte, konstant */
@media (min-width: 64em) {
  :root {
    --fs-hero: 3.5rem;
    --fs-h2: 2.75rem;
    --fs-number: 5rem;
    --fs-lead: 1.5rem;
    --fs-subline: 1.375rem;
    --fs-title: 1.375rem;
    --fs-body: 1.125rem;
    --fs-footer: 1rem;
    --fs-button: 1.0625rem;
    --gutter: 2.5rem;
    --section-space: 4rem;
    --logo-width: 130px;
    --btn-height: 52px;
  }
}

/* 1280 → 1600 px: wächst bis auf Figma 1:1 */
@media (min-width: 80em) {
  :root {
    --to-desktop: ((100vw - 1280px) / 320);  /* 0 bei 1280 px, 1 bei 1600 px */

    --fs-hero: clamp(3.5rem, calc(3.5rem + 24 * var(--to-desktop)), 5rem);
    --fs-h2: clamp(2.75rem, calc(2.75rem + 16 * var(--to-desktop)), 3.75rem);
    --fs-number: clamp(5rem, calc(5rem + 30 * var(--to-desktop)), 6.875rem);
    --fs-lead: clamp(1.5rem, calc(1.5rem + 6 * var(--to-desktop)), 1.875rem);
    --fs-subline: clamp(1.375rem, calc(1.375rem + 8 * var(--to-desktop)), 1.875rem);
    --fs-title: clamp(1.375rem, calc(1.375rem + 8 * var(--to-desktop)), 1.875rem);
    --fs-body: clamp(1.125rem, calc(1.125rem + 6 * var(--to-desktop)), 1.5rem);
    --fs-footer: clamp(1rem, calc(1rem + 4 * var(--to-desktop)), 1.25rem);
    --fs-button: clamp(1.0625rem, calc(1.0625rem + 3 * var(--to-desktop)), 1.25rem);
    --fs-nav: clamp(1rem, calc(1rem + 4 * var(--to-desktop)), 1.25rem);
    --gutter: clamp(2.5rem, calc(2.5rem + 20 * var(--to-desktop)), 3.75rem);
    --section-space: clamp(4rem, calc(4rem + 32 * var(--to-desktop)), 6rem);
    --header-height: clamp(6.8rem, calc(6.8rem + 21 * var(--to-desktop)), 8.125rem);
    --logo-width: clamp(130px, calc(130px + 33 * var(--to-desktop)), 163px);
    --btn-height: clamp(52px, calc(52px + 8 * var(--to-desktop)), 60px);
    --btn-wide: clamp(300px, calc(300px + 37 * var(--to-desktop)), 337px);
  }
}