/* Den Top-Bereich auf Schwarz setzen */
#topbarcontainer {
    background: #ff0000 !important;
    background-color: #ff0000 !important;
    background-image: none !important; /* Entfernt Verläufe */
    border-bottom: 1px solid #333333; /* Optional: Eine feine dunkle Trennlinie */
}

/* Menülinks und Texte im Header weiß machen */
#header a, 
#header .nav-link, 
#header .site-title {
    color: #ffffff !important;
}

/* Hover-Effekt (beim Drüberfahren mit der Maus) */
#header a:hover, 
#header .nav-link:hover {
    color: #cccccc !important; 
}

/* Alles im Header radikal auf die Bildschirmbreite begrenzen */
#header-wrapper, 
#header, 
#topbarcontainer, 
.header-area, 
#logo, 
.navbar-brand {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    display: block !important;
    overflow: hidden !important;
}

/* Das Bild innerhalb dieser Container bändigen */
#header img, 
#topbarcontainer img, 
#logo img {
    max-width: 100% !important;
    height: auto !important;
    width: auto !important;
}