/* ===============================
   Design Tokens & Farbvariablen
   =============================== */

:root {
  /* Farbvariablen – semantisch benannt */
  --color-primary: #1f8f4a;
  --color-primary-alt: #145f33;
  --color-primary-highlight: #2fbf67;

  --color-secondary: #f39200;
  --color-secondary-alt: #f39200;

  --color-tertiary:      #0f2a1a;
  --color-tertiary-alt:  #0a120d;

  --color-text: #18261d;
  --color-text-alt: #4f6256;
  --color-white:#fff;
  --color-black:#000;
  --color-bg-muted: #f4f6f2;
  --color-bg-soft: #f8faf7;
  --color-bg-softer: #fbfcfa;
  --color-bg-warm-soft: #f1eee9;
  --color-surface-cream: #f7f3ea;
  --color-surface-cream-0: rgba(247, 243, 234, 0);
  --color-text-muted: #97a89b;
  --color-text-muted-strong: #777;
  --color-text-muted-mid: #555;
  --color-gray-888: #888;
  --color-gray-eee: #eee;

  --color-overlay-dark: rgba(0, 0, 0, 0.9);
  --color-overlay-dark-strong: rgba(0, 0, 0, 1);
  --color-shadow-soft: rgba(0, 0, 0, 0.22);
  --color-overlay-forest-transparent: rgba(15, 42, 26, 0);
  --color-overlay-forest-25: rgba(15, 42, 26, 0.25);
  --color-overlay-forest-strong: rgba(15, 42, 26, 1);
  --color-overlay-forest-45: rgba(20, 95, 51, 0.45);
  --color-overlay-forest-70: rgba(20, 95, 51, 0.7);
  --color-overlay-forest-82: rgba(15, 62, 35, 0.82);
  --color-overlay-forest-92: rgba(15, 62, 35, 0.92);
  --color-overlay-moss-94: rgba(10, 20, 14, 0.94);
  --color-overlay-moss-82: rgba(13, 27, 19, 0.82);
  --color-overlay-moss-46: rgba(16, 34, 24, 0.46);
  --color-forest-card-35: rgba(18, 78, 43, 0.35);
  --color-forest-card-48: rgba(18, 78, 43, 0.48);
  --color-forest-card-60: rgba(20, 95, 51, 0.6);

  --color-white-06: rgba(255, 255, 255, 0.06);
  --color-white-08: rgba(255, 255, 255, 0.08);
  --color-white-20: rgba(255, 255, 255, 0.2);
  --color-white-24: rgba(255, 255, 255, 0.24);
  --color-white-25: rgba(255, 255, 255, 0.25);
  --color-white-30: rgba(255, 255, 255, 0.3);
  --color-white-32: rgba(255, 255, 255, 0.32);
  --color-white-35: rgba(255, 255, 255, 0.35);
  --color-white-45: rgba(255, 255, 255, 0.45);
  --color-white-55: rgba(255, 255, 255, 0.55);
  --color-white-72: rgba(255, 255, 255, 0.72);
  --color-white-78: rgba(255, 255, 255, 0.78);
  --color-white-85: rgba(255, 255, 255, 0.85);

  --color-black-04: rgba(0, 0, 0, 0.04);
  --color-black-05: rgba(0, 0, 0, 0.05);
  --color-black-06: rgba(0, 0, 0, 0.06);
  --color-black-08: rgba(0, 0, 0, 0.08);
  --color-black-10: rgba(0, 0, 0, 0.1);
  --color-black-16: rgba(0, 0, 0, 0.16);
  --color-black-18: rgba(0, 0, 0, 0.18);
  --color-black-20: rgba(0, 0, 0, 0.2);
  --color-black-24: rgba(0, 0, 0, 0.24);
  --color-black-28: rgba(0, 0, 0, 0.28);
  --color-black-35: rgba(0, 0, 0, 0.35);
  --color-black-50: rgba(0, 0, 0, 0.5);
  --color-black-65: rgba(0, 0, 0, 0.65);
  --color-primary-alt-16: rgba(20, 95, 51, 0.16);
  --color-secondary-glow-18: rgba(253, 174, 62, 0.18);

  --color-upload-fill: #e30613;

  --color-table-bg: rgba(255, 255, 255, 0.96);
  --color-table-head-bg: rgba(20, 95, 51, 0.1);
  --color-table-row-alt: rgba(15, 42, 26, 0.03);
  --color-table-row-hover: rgba(191, 146, 81, 0.14);
  --color-table-border: rgba(15, 42, 26, 0.12);
  --color-table-text: rgba(24, 38, 29, 0.94);
  --color-table-head-text: rgba(15, 42, 26, 0.98);

  --color-success-bg: rgba(20, 95, 51, 0.14);
  --color-success-text: #145f33;
  --color-success-border: rgba(20, 95, 51, 0.2);
  --color-error-bg: rgba(144, 28, 28, 0.12);
  --color-error-text: #701111;
  --color-error-border: rgba(144, 28, 28, 0.18);

  --color-bg: var(--color-bg-soft);
  --color-surface: var(--color-white);

  /* Animation & Timing */
  --transition-default: 0.4s;
  --transition-fast: 0.3s;

  /* Fonts */
  --font-primary: "Inter", sans-serif;
/* Weight Options: 400, 800 */


  /* Spacing */
  --gutter: 12rem;

  /* Navigation */
  --nav-bg: var(--color-white);
  --nav-hover-bg: var(--color-bg-muted);
  --nav-link-color: var(--color-primary-alt);
  --nav-submenu-bg: var(--color-white);
  --nav-submenu-hover: var(--color-bg-muted);
}

/* Responsives Gutter über :root definieren */
@media (max-width: 1499.98px) {
  :root {
    --gutter: 8rem;
  }
}


/* Responsives Gutter über :root definieren */
@media (max-width: 1199.98px) {
  :root {
    --gutter: 4rem;
  }
}

@media (max-width: 767.98px) {
  :root {
    --gutter: 2rem;
  }
}


/* Gutenberg Theme Colors */
.has-primary-color {
  color: var(--color-primary);  
}

.has-primary-background-color {
  background-color: var(--color-primary) !important;
}

.has-primary-alt-color {
  color: var(--color-primary-alt) !important;
}

.has-primary-alt-background-color {
  background-color: var(--color-primary-alt) !important;
}

.has-secondary-color {
  color: var(--color-secondary) !important;
}

.has-secondary-background-color {
  background-color: var(--color-secondary) !important;
}

.has-secondary-alt-color {
  color: var(--color-secondary-alt) !important;
}

.has-secondary-alt-background-color {
  background-color: var(--color-secondary-alt) !important;
}

.has-tertiary-color {
  color: var(--color-tertiary) !important;
}

.has-tertiary-background-color {
  background-color: var(--color-tertiary) !important;
}

.has-tertiary-alt-color {
  color: var(--color-tertiary-alt) !important;
}

.has-tertiary-alt-background-color {
  background-color: var(--color-tertiary-alt) !important;
}

.has-white-color {
  color: var(--color-white) !important;
}

.has-white-background-color {
  background-color: var(--color-white) !important;
}