header {
  margin: 15px;
  padding-left: 15px;
  padding-right: 15px;
}
/* 1. Äußerste Ebene: ROT */
body {
    /* Dein gewünschtes Rot (z.B. Hex-Code #FF0000) */
    background-color: #FF0000; 
}
/* 2. Content-Container: WEISS, Breite und Zentrierung */
.container-header, 
.site-grid, 
.container-footer {
    /* Entfernt eventuelle Farbüberschreibungen aus dem Template */
    background-color: #FFFFFF !important; 
    
    /* Maximale Breite des weißen Bereichs (anpassen nach Bedarf) */
    max-width: 1200px; 
    
    /* Zentriert den Container horizontal und sorgt für Abstand zum Rand */
    margin-left: auto;
    margin-right: auto;
    
    /* Stellt sicher, dass das Header-Bild nicht den weißen Container überschreibt */
    background-image: none !important; 
}

/* menu */
.nav-item{
  color: #eb0512;
}

.nav-item:hover {
  background-color: #d1d1d1;
  color: #FFF;
  border-radius: 6px;
  
}
.nav-item.active {
  background-color: #eb0512;
  color: #FFF;
  border-radius: 6px;
}

.nav-item {
  padding: 5px;
}






/* Logo neben Menü (Mobile Ansicht bleibt unverändert) */
.container-header {
    display: flex;       /* Aktiviert Flexbox für den Header-Container */
    align-items: center; /* Zentriert vertikal */
    flex-wrap: wrap;     /* Erlaubt Umbruch auf kleineren Bildschirmen */
}

.container-header > .grid-child {
    width: auto !important; /* Entfernt die Standardbreite, damit die Elemente ihren Inhalt aufnehmen */
}

.container-header .mod-menu {
    flex-grow: 1; /* Lässt das Menü den verbleibenden Platz einnehmen */
}

/* Ggf. Abstand zwischen Logo und Menü anpassen */
.container-header .navbar-brand {
    margin-right: 15px; /* Fügt Abstand rechts vom Logo hinzu */
}


.footer .grid-child {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    color: #eb0512;
}

.Copyri {
  margin-top: 10px;
}