/* ==========================================================================
   1. LOGO & HEADER (WEISS)
   ========================================================================== */
.header {
    background-color: #ffffff !important;
    background-image: none !important;
    padding-top: 15px;
    padding-bottom: 15px;
}

.header .navbar-brand a, 
.header .site-title {
    color: #111111 !important;
}

/* ==========================================================================
   2. MENÜ-BALKEN & DROPDOWNS (GRAU & HOVER)
   ========================================================================== */
.header .container-nav {
    background-color: #4a4a4a !important; /* Grau für das Menü */
    margin-top: 10px;
}

/* Links im Hauptmenü weiß färben */
.header .container-nav a,
.header .container-nav .mod-menu a {
    color: #ffffff !important;
}

/* Zeigt das Dropdown beim Hovern (nur auf Desktop) */
@media (min-width: 992px) {
    .header .container-nav li:hover > ul,
    .header .container-nav .dropdown:hover > .dropdown-menu {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: absolute;
        top: 100%;
        left: 0;
        background-color: #4a4a4a !important;
        z-index: 1000;
        min-width: 160px;
    }
    
    .header .container-nav .dropdown-menu a {
        padding: 8px 15px !important;
        display: block !important;
    }
    
    .header .container-nav .dropdown-menu a:hover {
        background-color: #666666 !important;
    }
}

/* ==========================================================================
   3. FOOTER (HORIZONTAL, ZENTRIERT & GRAU)
   ========================================================================== */
/* Hintergrundfarbe des gesamten Footers (inklusive Abschalten des Verlaufs) */
.footer {
    background-color: #4a4a4a !important; /* Gleiches Grau wie das Menü */
    background-image: none !important;    /* ZWINGEND NÖTIG bei Cassiopeia */
    padding-top: 20px;
    padding-bottom: 20px;
}

/* Text und Links im Footer weiß färben */
.footer, 
.footer a, 
.footer .mod-menu a {
    color: #ffffff !important;
}

.footer .grid-child,
.grid-child.container-footer {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
}

footer .mod-menu {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    list-style: none !important;
    padding: 0 !important;
    gap: 25px;
}

/* ==========================================================================
   5. EXTENSIONS & GALLERIES
   ========================================================================== */
/* Simple Image Gallery - Erweiterung */
/* Versteckt alle Vorschaubilder dieser Galerie */
.einzelbild-galerie .sigFreeContainer a {
    display: none !important;
}
/* Zeigt ausschließlich das erste Vorschaubild an */
.einzelbild-galerie .sigFreeContainer a:first-child {
    display: inline-block !important;
}

/* ==========================================================================
   6. DJ-IMAGESLIDER IN TOP-B (VOLLE BREITE ERZWINGEN)
   ========================================================================== */
/* Hebt die maximale Breitenbegrenzung für den gesamten top-b Bereich auf */
.container-top-b {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Zwingt den DJ-Slider und seine Listen-Elemente zur vollen Ausdehnung */
.container-top-b .dj-imageslider,
.container-top-b .dj-imageslider .slide {
    width: 100% !important;
    max-width: 100% !important;
}

/* Sorgt dafür, dass die Bilder im Slider proportional mitskalieren */
.container-top-b .dj-imageslider img {
    width: 100% !important;
    height: auto !important;
    display: block;
}