/* ============================================
   VARIABLES.CSS – Zum Klonen hier ändern!
   ============================================
   Diese Datei enthält alle anpassbaren Werte.
   Für eine neue Variante: Ordner kopieren,
   diese Datei anpassen, Bilder + Texte ändern.
   ============================================ */

:root {
  /* ── Farben ── */
  --color-primary: #018959;           /* Grün – Accent, CTA-Buttons */
  --color-primary-hover: #016d47;     /* Grün dunkel – Hover-State */
  --color-primary-light: rgba(1, 137, 89, 0.1); /* Grün transparent – Badges */

  --color-brown-dark: #5A4939;        /* Braun dunkel – Überschriften */
  --color-brown-warm: #8B7D6B;        /* Braun warm – Sekundärer Text */
  --color-brown-bg: #7A6B5D;          /* Braun – Banner-Hintergründe */

  --color-navy: #0C3C60;              /* Navy – Fließtext */
  --color-navy-dark: #062134;         /* Navy dunkel – Footer */

  --color-white: #FFFFFF;
  --color-off-white: #F8F6F3;         /* Leicht warmes Weiß */
  --color-beige: #E8E2D9;             /* Beige – Formular-Hintergrund */
  --color-beige-light: #F2EDE7;       /* Helles Beige – Trust-Bar */

  --color-text-dark: #2C2C2C;         /* Fast-Schwarz für Text */
  --color-text-light: #FFFFFF;        /* Weiß für dunkle Hintergründe */
  --color-text-muted: #8B8B8B;        /* Grau – Disclaimer, Hinweise */

  --color-border: #D4CCBF;            /* Beige-Grau – Ränder, Linien */
  --color-shadow: rgba(0, 0, 0, 0.08); /* Schatten */

  /* ── Fonts ── */
  --font-heading: 'Raleway', sans-serif;
  --font-body: 'Arial', 'Helvetica Neue', 'Helvetica', sans-serif;

  /* ── Font-Größen ── */
  --fs-hero-title: clamp(1.75rem, 3vw, 2.5rem);
  --fs-section-title: clamp(1.5rem, 2.5vw, 2.25rem);
  --fs-card-title: clamp(1.125rem, 1.5vw, 1.375rem);
  --fs-body: 1rem;
  --fs-body-small: 0.875rem;
  --fs-label: 0.8125rem;
  --fs-badge: 0.75rem;

  /* ── Font-Weights ── */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ── Abstände ── */
  --spacing-xs: 0.5rem;    /* 8px */
  --spacing-sm: 1rem;      /* 16px */
  --spacing-md: 1.5rem;    /* 24px */
  --spacing-lg: 2.5rem;    /* 40px */
  --spacing-xl: 4rem;      /* 64px */
  --spacing-2xl: 6rem;     /* 96px */

  /* ── Layout ── */
  --max-width: 1200px;
  --max-width-narrow: 960px;
  --container-padding: 1.5rem;

  /* ── Border Radius ── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 50px;

  /* ── Transitions ── */
  --transition-fast: 150ms ease;
  --transition-normal: 300ms ease;
  --transition-slow: 500ms ease;

  /* ── Shadows ── */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);
  --shadow-sticky: 0 2px 8px rgba(0, 0, 0, 0.1);

  /* ── Z-Index Skala ── */
  --z-base: 1;
  --z-sticky: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-cookie: 400;
}