/* Design-System O.K. Haus — Quelle: artefakte/09-DESIGN-SYSTEM.md */
:root {
  /* Farben */
  --gruen-600: #749F1D;
  --gruen-700: #5C7F17;
  --gruen-800: #46610F;
  --gruen-050: #F2F7E6;
  --braun-900: #2E2A20;
  --braun-700: #4A4437;
  --neutral-900: #26241F;
  --neutral-600: #5C594F;
  --neutral-200: #E8E6E1;
  --neutral-100: #F4F3F0;
  --weiss: #FFFFFF;
  --fehler: #B3261E;
  --erfolg: #2E7D32;

  /* Typografie */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-sans: "Open Sans", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fs-h1: clamp(2.125rem, 1.4rem + 3vw, 3.625rem);
  --fs-h2: clamp(1.5rem, 1.2rem + 1.5vw, 2.375rem);
  --fs-h3: clamp(1.19rem, 1.08rem + 0.5vw, 1.5rem);
  --fs-lead: clamp(1.06rem, 1rem + 0.35vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --lh-heading: 1.2;
  --lh-body: 1.6;

  /* Spacing */
  --space-1: 4px;  --space-2: 8px;   --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px;  --space-7: 48px; --space-8: 64px; --space-9: 96px;
  --section-pad: var(--space-7);          /* 48px mobil */
  --container-max: 1200px;
  --container-text: 800px;
  --gutter: 20px;
  --radius-s: 8px; --radius-m: 12px; --radius-l: 16px; --radius-xl: 56px;
  /* Markenmotiv: Diagonal-Maske (CNC-Kante trifft Rundung) */
  --maske-diagonal: 0 var(--radius-xl) 0 var(--radius-xl);
  --maske-diagonal-klein: 0 28px 0 28px;

  /* Bewegung */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-ui: 200ms;
  --dur-reveal: 400ms;

  /* Schatten */
  --shadow-card: 0 6px 24px rgba(38, 36, 31, 0.10);
  --shadow-header: 0 2px 12px rgba(38, 36, 31, 0.08);
}

@media (min-width: 1024px) {
  :root {
    --section-pad: 80px;
    --gutter: 32px;
  }
}