/* ==========================================================================
   1. GLOBALE EINSTELLUNGEN & HEADER (Weißer Hintergrund)
   ========================================================================= */
body .header, body header.header, .site-grid .header {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    box-shadow: none !important;
    border-bottom: 1px solid #f0f0f0;
}
.navbar-brand a { color: #000000 !important; }

/* ==========================================================================
   2. DESKTOP-ANSICHT (Ab 992px) - DIE ABSOLUTE HOVER-GARANTIE
   ========================================================================= */
@media (min-width: 992px) {
    .header {
        display: flex !important;
        justify-content: center !important; 
        align-items: center !important;           
        padding-left: 2rem !important;            
        padding-right: 2rem !important;           
    }
    .header .grid-child, .header .container-nav { display: contents !important; }
    .header .navbar-brand {
        margin: 0 !important;
        margin-right: 4rem !important; /* Schiebt das Menü um 4 Einheiten nach rechts weg vom Logo */
        flex-shrink: 0 !important;
    }

    /* Hauptmenü nebeneinander */
    .header .mod-menu, .header .navbar-nav {
        display: flex !important;
        flex-direction: row !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        text-transform: uppercase !important; 
    }

    /* Alle Listenpunkte (Ebene 1 und Ebene 2) */
    .header .mod-menu li, .header .navbar-nav li {
        position: relative !important;
        margin-left: 0rem !important;  
        margin-right: 0rem !important;
        vertical-align: top !important;
    }

    /* Die Hauptlinks styling */
    .header .mod-menu li a, .header .navbar-nav li a,
    .header .mod-menu li span, .header .navbar-nav li span {
        color: #1a365d !important; 
        font-weight: 500 !important;
        font-size: 0.95rem !important;
        text-decoration: none !important; 
        padding: 0.6rem 0.5rem !important;
        display: block !important;
        background: transparent !important;
    }

    /* Hover & Aktiv-Farben */
    .header .mod-menu li:hover > a, .header .navbar-nav li:hover > a { color: #f39c12 !important; }
    .header .mod-menu .active > a, .header .navbar-nav .active a { color: #f39c12 !important; }

    /* --- DIE UNTERMENÜS (Egal ob .dropdown-menu oder normales ul) --- */
    .header .mod-menu li ul, .header .navbar-nav li ul,
    .header .mod-menu .dropdown-menu, .header .navbar-nav .dropdown-menu {
        display: none !important; /* Standardmäßig unsichtbar */
        position: absolute !important;
        top: 100% !important; 
        left: 0 !important;
        background-color: #ffffff !important;
        min-width: 220px !important;
        box-shadow: 0px 8px 16px rgba(0,0,0,0.1) !important;
        padding: 10px 0 !important;
        margin: 0 !important;
        list-style: none !important;
        z-index: 9999 !important;
        border: 1px solid #f0f0f0 !important;
    }

    /* DER ZWINGENDE HOVER-BEFEHL für ALLE verschachtelten Listen */
    .header .mod-menu li:hover > ul, .header .navbar-nav li:hover > ul,
    .header .mod-menu li:hover > .dropdown-menu, .header .navbar-nav li:hover > .dropdown-menu {
        display: block !important;
    }

    /* Styling der inneren Links im Untermenü */
    .header .mod-menu li ul li a, .header .navbar-nav li ul li a,
    .header .mod-menu .dropdown-menu li a, .header .navbar-nav .dropdown-menu li a {
        padding: 8px 20px !important;
        font-size: 0.9rem !important;
        text-transform: none !important; 
        color: #1a365d !important;
        width: 100% !important;
    }

    .header .mod-menu li ul li a:hover, .header .navbar-nav li ul li a:hover {
        background-color: #f9f9f9 !important;
        color: #f39c12 !important;
    }

    .header .dropdown-toggle::after { display: none !important; }
}

/* ==========================================================================
   3. MOBILE ANSICHT (Bis 991.98px) - KATASTROPHEN-SCHUTZ
   ========================================================================= */
@media (max-width: 991.98px) {
    .header {
        display: flex !important;
        flex-wrap: wrap !important; 
        justify-content: space-between !important;
        align-items: center !important;
        padding: 10px 20px !important;
        background-color: #ffffff !important;
    }
    .header .container-nav { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
    .header .navbar-brand { max-width: 180px !important; margin: 0 !important; }

    /* Hamburger-Kästchen */
    .header .navbar-toggler {
        display: block !important; border: 2px solid #1a365d !important; background-color: transparent !important;
        padding: 8px !important; cursor: pointer !important; position: relative !important; width: 44px !important; height: 38px !important; 
    }
    .header .navbar-toggler-icon { display: none !important; }
    .header .navbar-toggler::before {
        content: "" !important; display: block !important; position: absolute !important; top: 9px !important; left: 10px !important;
        width: 20px !important; height: 2px !important; background-color: #1a365d !important; 
        box-shadow: 0 6px 0 #1a365d, 0 12px 0 #1a365d !important; 
    }

    /* Aufklappbox mobil */
    .header .navbar-collapse { display: none !important; width: 100% !important; flex-basis: 100% !important; order: 3 !important; background-color: #ffffff !important; padding: 15px 10px !important; }
    .header .navbar-collapse.show, .header .collapsing { display: block !important; }

    .header .navbar-collapse .mod-menu, .header .navbar-collapse .navbar-nav {
        display: flex !important; flex-direction: column !important; width: 100% !important; padding: 0 !important; margin: 0 !important; list-style: none !important;
    }
    .header .navbar-collapse .mod-menu li, .header .navbar-collapse .navbar-nav li { display: block !important; width: 100% !important; position: relative !important; }
    
    .header .navbar-collapse .mod-menu > li > a, .header .navbar-collapse .navbar-nav > li > a { border-bottom: 1px solid #f0f0f0 !important; }

    .header .navbar-collapse .mod-menu a, .header .navbar-collapse .navbar-nav a {
        display: block !important; color: #1a365d !important; padding: 12px 5px !important; font-size: 1rem !important; text-transform: uppercase !important; text-decoration: none !important;
    }
    .header .navbar-collapse .mod-menu .active > a { color: #f39c12 !important; }

    /* Mobile Untermenüs permanent ausgeklappt anzeigen, um Skriptfehler zu umgehen */
    .header .navbar-collapse .mod-menu li ul, .header .navbar-collapse .navbar-nav li ul,
    .header .navbar-collapse .mod-menu .dropdown-menu, .header .navbar-collapse .navbar-nav .dropdown-menu {
        display: block !important; /* IMMER OFFEN auf dem Smartphone, damit man rankommt */
        position: static !important; 
        width: 100% !important;
        background-color: #f9f9f9 !important; 
        padding-left: 20px !important; 
        border: none !important;
        box-shadow: none !important;
        margin: 0 !important;
    }
    .header .navbar-collapse .mod-menu li ul li a, .header .navbar-collapse .navbar-nav li ul li a {
        font-size: 0.9rem !important; padding: 10px 5px !important; text-transform: none !important;
    }
}
/* ==========================================================================
   4. INHALTSBEREICH (Breite begrenzen & Hintergrundfarbe anpassen)
   ========================================================================== */

/* 1. Den Hintergrund für die gesamte Seite unterhalb des Headers färben */
body {
    background-color: #ffeda8 !important; /* Das warme Pastell-Gelb */
}

/* 2. Beschränkt die maximale Breite des Inhalts auf einen eleganten Block */
body .site-grid,
body .container-component,
body main {
    max-width: 1200px !important; 
    margin-left: auto !important;  
    margin-right: auto !important; 
    width: 100% !important;
    background-color: #ffeda8 !important; /* Garantiert die Farbe auch im Inhaltsraster */
}

/* 3. WICHTIGER SCHUTZ: Das Menü oben MUSS weiß bleiben */
body .header, 
body header.header,
.site-grid .header {
    background-color: #ffffff !important; /* Hält den Header strahlend weiß */
}
/* Phoca Gallery Backlink/Footer unsichtbar machen */
#phocagallery div[style*="text-align:right"],
#phocagallery div[style*="text-align: center"],
.pg-box-c + div,
a[href*="phoca.cz"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}
/* Die gesamte Pagination am Ende der Galerie ausblenden */
#phocagallery .pagination {
    display: none !important;
}
/* Der finale Brecher für das Dropdown-Menü auf dem PC */
@media (min-width: 992px) {
    
    /* Wir zwingen JEDE Liste im Dropdown, sich relativ zu verhalten */
    html body ul.dropdown-menu li,
    html body div.dropdown-menu li {
        position: relative !important;
    }

    /* Wir zwingen das verschachtelte Dropdown knallhart nach rechts */
    html body ul.dropdown-menu ul.dropdown-menu,
    html body div.dropdown-menu div.dropdown-menu,
    html body .dropdown-menu [data-bs-popper] {
        position: absolute !important;
        top: 0 !important;
        left: 100% !important; /* Verschiebung nach rechts */
        right: auto !important;
        
        /* Wir löschen JEDE Animation, Drehung oder Verschiebung von Bootstrap */
        transform: translate(0, 0) !important;
        transform: translate3d(0, 0, 0) !important;
        transform: none !important;
        
        /* Wir setzen alle Abstände zurück */
        margin: 0 !important;
    }
}