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

:root {
  /* Farbvariablen – semantisch benannt */
  --color-primary: #E21B33;
  --color-primary-alt: #ce2035;

  --color-secondary: #F6ECEC;          
  --color-secondary-alt: #f8c9c9;    

  --color-tertiary:      #231F20;
  --color-tertiary-alt:  #000000;

  --color-text: #231F20;
  --color-white:#fff;

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

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

  /* Fonts */
  --font-primary: "Figtree", sans-serif;
/* Weight Options: 400, 600, 700, 900 */


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

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

/* 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;
}