/* ===== MENÜ / HEADER-BALKEN ===== */
# .header,
# .header__container {
#  background-color: #222 !important;  /* dein Wunschwert */
}


/* Bereich, in dem die Links liegen */
.header .menu__list {
  background-color: transparent !important; /* oder #222, wenn du es getrennt willst */
}

/* ===== NUR die Menüzeile einfärben (Logo/Titel bleiben weiß) ===== */

/* Menü bekommt eine eigene farbige Zeile */
.header .menu {
  display: block;
  width: 100%;
  background-color: #222 !important;  /* <-- HIER deine Menü-Hintergrundfarbe */
  margin-top: 0.5rem;                 /* optional */
}

/* UL selbst transparent lassen, damit der Balken von .menu kommt */
.header .menu__list {
  background-color: transparent !important;
  margin: 0;
  padding: 0.25rem 0;                 /* optional */
}


/* Mobile: Menü-Button */
.header .menu__btn {
  background-color: #f7f7f7 !important;
  color: #f7f7f7 !important;
  border-color: #444 !important;
}

/* Links (optional) */
.header .menu__link {
  color: #f7f7f7 !important;
}

.header .menu__link:hover,
.header .menu__link:focus {
  background-color: #444 !important;
}
/* ===== Menüzeile (nur der Bereich mit den Links) ===== */

/* Der “Balken” */
.header .menu {
  background-color: #f7f7f7 !important;  /* <- gewünschte Menü-Hintergrundfarbe */
}

/* Falls das UL den Balken malt, ebenfalls setzen */
.header .menu__list {
  background-color: #f7f7f7 !important;
}

/* Links selbst transparent, damit der Balken sichtbar bleibt */
.header .menu__link {
  background-color: transparent !important;
  color: #222 !important;               /* Textfarbe der Menüpunkte */
}

/* Hover */
.header .menu__link:hover,
.header .menu__link:focus {
  background-color: #e6e6e6 !important;
}

/* Mobile Button (falls aktiv) */
.header .menu__btn {
  background-color: #f7f7f7 !important;
  color: #222 !important;
  border-color: #ccc !important;
}


/* ===== FOOTER Hintergrund ===== */

/* Hintergrund (ganzer Footer-Bereich) */
.footer,
.footer__container {
  background-color: #f7f7f7 !important;  /* <- HIER Footer-Hintergrund */
  color: #4a708b !important;          /* <- HIER Footer-Textfarbe #f7f7f7 */
}

/* Links im Footer */
.footer a {
  color: #00000 !important;
}

/* Optional: Hover für Footer-Links */
.footer a:hover,
.footer a:focus {
  text-decoration: underline;
}