/* ============================================================
   Design-Tokens v3: Farben, Typografie, Abstaende, Schatten
   Stand: 2026-03-04 – Anthrazit + Poppins/Nunito
   ============================================================ */

:root {
  /* === Colors (Design System v3) === */
  --color-base:         #2D3142;
  --color-base-light:   #3D4258;
  --color-accent-red:   #C41E3A;
  --color-accent-green: #2D6A4F;
  --color-bg:           #F5F5F5;
  --color-bg-section:   #FFFFFF;
  --color-text:         #1A1A2E;
  --color-text-light:   #6B7280;
  --color-text-on-dark: #FFFFFF;

  /* === Typography === */
  --font-heading: 'Poppins', sans-serif;
  --font-body:    'Nunito', sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;

  --leading-tight:   1.25;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

  /* === Spacing === */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  --spacing-section: 80px;
  --spacing-card:    24px;
  --container-max:   1200px;
  --container-pad:   1rem;

  /* === Radii === */
  --radius-card:   12px;
  --radius-button: 6px;
  --radius-badge:  4px;
  --radius-full:   9999px;

  /* === Shadows === */
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:    0 4px 12px rgba(0,0,0,0.10);
  --shadow-lg:    0 8px 24px rgba(0,0,0,0.12);

  /* === Cards (unified) === */
  --card-bg:           #FFFFFF;
  --card-border:       1px solid #E5E7EB;
  --card-shadow:       0 2px 8px rgba(0,0,0,0.08);
  --card-shadow-hover: 0 4px 16px rgba(0,0,0,0.12);
  --card-padding:      var(--spacing-card);
  --card-radius:       var(--radius-card);

  /* === Counter === */
  --color-counter-bg:     var(--color-base);
  --color-counter-number: var(--color-accent-red);
  --color-counter-label:  #FFFFFF;

  /* === Sparten Rotation === */
  --sparten-transition: 0.6s ease;

  /* === Badges === */
  --badge-radius:    4px;
  --badge-padding:   4px 10px;
  --badge-font-size: 0.75rem;
}
