* {
  --primary-color: #3c7028;
  --primary-color-rgb: 60, 112, 40;
  --secondary-color: #8ec33c;
  --cta-color: #3c7028;
  --cta-color-hover: #2f5d20;
  --cta-color-focus: #4d8436;
  --primary-gradient: 45deg, var(--primary-color), var(--secondary-color);
  /* Dunkelgrüne DW360-Markenfläche (zentral – nicht in Komponenten duplizieren) */
  --bg-dark-1: #123511;
  --bg-dark-2: #1a4a18;
  --bg-dark-3: #225f1e;
  --bg-dark-1-rgb: 18, 53, 17;
  /* Wiederverwendbarer Verlauf für alle dunkelgrünen Inhaltsbereiche */
  --dark-section-bg: linear-gradient(110deg, var(--bg-dark-1) 0%, var(--bg-dark-2) 58%, var(--bg-dark-3) 100%);
  /* Lichtgrün für großflächige Verläufe: kühler als das Akzentgrün,
     damit es auf warm eingestellten Bildschirmen nicht ins Gelbe kippt */
  --glow-rgb: 104, 196, 88;
  --glow-soft-rgb: 88, 172, 84;
  /* Einheitliche Hero-Lichtstimmung aller Seitenköpfe */
  --hero-glow: radial-gradient(circle at 19% 38%, rgba(var(--glow-rgb), .16) 0%, rgba(var(--glow-rgb), .05) 24%, transparent 44%), radial-gradient(circle at 82% 32%, rgba(var(--glow-rgb), .2) 0%, rgba(var(--glow-soft-rgb), .08) 26%, transparent 50%);
}

/* Zentrale Klasse für dunkelgrüne Sektionen (Heros, CTAs, Vorteilsbereiche).
   Dezente Akzente (z.B. radiale Lichtflächen) gezielt pro Komponente ergänzen. */
.dw-dark-section {
  background: var(--dark-section-bg);
}