@media (max-width: 1199.98px) {
    .custom-navbar {
        height: 100px;
    }
}

@media (min-width: 992px) {
    /* Setzt das Dropdown exakt bündig an die Unterkante des Headers */
    .custom-navbar .dropdown-menu {
        top: 100%; 
        margin-top: 0;
        
        /* Vorbereitung für die CSS-Transition */
        display: block;
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        transition: opacity var(--fwww-nav-transition-speed) ease-in-out,
                    transform var(--fwww-nav-transition-speed) ease-in-out,
                    visibility var(--fwww-nav-transition-speed) ease-in-out;
    }

    /* Blendet das Dropdown bei Hover fließend ein */
    .custom-navbar .navbar-nav .dropdown:hover .dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}

@media (max-width: 991.98px) {
    .custom-navbar .navbar-collapse {
        background-color: var(--fwww-nav-bg-initial);
        position: absolute;
        
        /* Absolut bündig an die 85px hohe Tablet-Headerleiste angedockt */
        top: 85px; 
        left: 0;
        width: 100%;
        padding: 20px;
        box-shadow: 0 10px 15px rgba(0,0,0,0.05);
        border-top: 1px solid rgba(0,0,0,0.05);
    }
    
    .custom-navbar.scrolled .navbar-collapse {
        background-color: var(--fwww-nav-bg-scrolled);
        border-top: 1px solid rgba(255,255,255,0.05);
    }

    /* Mobile Untermenüs (Dropdowns) innerhalb der mobilen Leiste clean untereinander */
    .custom-navbar .dropdown-menu {
        display: none;
        border: none;
        background-color: transparent !important;
        padding-left: 15px;
    }
    /* Öffnet das Untermenü im mobilen Zustand per Klick nativ über Bootstrap */
    .custom-navbar .dropdown-menu.show {
        display: block;
    }
	
	.custom-navbar #menu-hauptnavigation-mobil {
		background: var(--fwww-nav-bg-initial);
	}
	.custom-navbar.scrolled #menu-hauptnavigation-mobil {
		background: var(--fwww-nav-bg-scrolled);
	}
}

@media (max-width: 575.98px) {
    .custom-navbar {
        height: 70px;
    }
    .custom-navbar .navbar-collapse {
        top: 70px;
    }
}

@media (max-width: 768px) {
    #cmplz-manage-consent .cmplz-manage-consent {
        bottom: 0 !important; /* Auf Mobilgeräten nicht verstecken */
        opacity: 0.9 !important;
        transform: scale(0.8); /* Macht den Button auf dem Handy etwas kleiner */
    }
}