@font-face {
  font-family: "Work Sans";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("fonts/work-sans-400.woff2") format("woff2");
}

@font-face {
  font-family: "Work Sans";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("fonts/work-sans-600.woff2") format("woff2");
}

  :root {
    /* Farben — light */
    --color-bg: #FFFFFF;
    --color-surface: #F5F7F6;
    --color-text: #253B36;
    --color-text-soft: #52655F;
    --color-heading: #152E27;
    --color-accent: #28584B;
    --color-ember: #28584B;
    --color-border: #DCE5E0;
    --color-success: #3D7A4E;
    --color-error: #B3462E;
    --color-scrim: rgba(28, 27, 25, 0.45);
    --color-badge-sale: var(--color-ember);
    --color-badge-neutral: var(--color-text);
    --color-star: #C9A227;

    /* Typografie */
    --font-heading: "Work Sans", 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    --font-heading-weight: 600;
    --font-body: "Work Sans", 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    --font-body-weight: 400;

    --text-xs: clamp(0.72rem, 0.7rem + 0.1vw, 0.78rem);
    --text-sm: clamp(0.82rem, 0.8rem + 0.15vw, 0.9rem);
    --text-base: clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
    --text-lg: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
    --text-xl: clamp(1.35rem, 1.2rem + 0.9vw, 1.75rem);
    --text-2xl: clamp(1.7rem, 1.4rem + 1.6vw, 2.4rem);
    --text-3xl: clamp(2.1rem, 1.6rem + 2.6vw, 3.4rem);
    --text-hero: clamp(2.4rem, 1.8rem + 3.4vw, 4.2rem);
    --leading-tight: 1.12;
    --leading-snug: 1.3;
    --leading-body: 1.6;
    --tracking-eyebrow: 0.14em;

    /* Raum */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --section-pad: clamp(3.5rem, 2.5rem + 4vw, 8rem);
    --section-pad-sm: clamp(2.5rem, 2rem + 2vw, 4.5rem);
    --page-width: 1360px;
    --page-gutter: clamp(1rem, 0.6rem + 2vw, 2.5rem);

    /* Form */
    --radius-sm: 3px;
    --radius-md: 6px;
    --radius-pill: 999px;
    --shadow-card: 0 1px 2px rgba(28, 27, 25, 0.06), 0 8px 24px rgba(28, 27, 25, 0.07);
    --shadow-pop: 0 4px 12px rgba(28, 27, 25, 0.12), 0 16px 48px rgba(28, 27, 25, 0.18);

    /* Bewegung */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --dur-fast: 200ms;
    --dur-slow: 450ms;

    /* Interaktion */
    --tap-min: 44px;
    --focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-ember);
  }