/*
 * Platz für eigene Änderungen direkt als CSS
 * Die hier gemachten Änderungen überschreiben ggfs. andere Styles, da diese Datei als letzte geladen wird.
 */
/* Header-Leiste: Hintergrund über volle Fensterbreite */
.hide-navbar.container {
    position: relative;
}

.hide-navbar.container::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: #363636;   /* gewünschte Farbe / Verlauf / Bild */
    z-index: -1;
    pointer-events: none;
}

/* verhindert horizontalen Scrollbalken durch 100vw (Scrollbar-Breite) */
#jtl-nav-wrapper {
    overflow-x: clip;
}

@media (min-width: 992px) {
  header .navbar-brand img {
    height: 107px;
    margin: 0px 0px -9px 0px;
  }
}

/* Logo in der mobilen Ansicht (< 992px) 80px hoch */
@media (max-width: 991.98px) {
    #logo .navbar-brand {
        padding-top: 0;
        padding-bottom: 0;
        margin-right: 0;
    }

    #logo #shop-logo {
        height: 80px;
        max-height: 80px;   /* NOVA begrenzt die Logo-Höhe sonst */
        width: auto;        /* Seitenverhältnis aus width/height-Attribut aufheben */
        max-width: none;
    }

    /* falls NOVA der Navbar mobil eine feste Höhe gibt */
    #jtl-nav-wrapper .navbar {
        height: auto;
        min-height: 0px;
    }
}

/* Megamenü → klassisches Pulldown (nur Desktop ab 992px) */
@media (min-width: 992px) {

    /* 1. Kein Abschneiden durch die Navigations-Wrapper */
    #mainNavigation,
    #mainNavigation .nav-mobile-body,
    #mainNavigation .nav-scrollbar-inner {
        overflow: visible !important;
    }

    /* 2. Dropdown am Menüpunkt ausrichten */
    #mainNavigation li.dropdown-full {
        position: relative !important;
    }

    #mainNavigation li.dropdown-full > .dropdown-menu {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: auto !important;
        width: auto !important;
        min-width: 240px !important;
        max-width: 320px;
        margin: 0 !important;
        padding: .5rem 0 !important;
        transform: none !important;
        border-radius: 0 0 4px 4px;
        box-shadow: 0 6px 16px rgba(0, 0, 0, .15);
		
    }

    #mainNavigation li.dropdown-full:last-child > .dropdown-menu {
        left: auto !important;
        right: 0 !important;
		
    }

    #mainNavigation li.dropdown-full .dropdown-body,
    #mainNavigation li.dropdown-full .subcategory-wrapper {
        width: auto !important;
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
	
    }

    /* 3. Spaltenraster auflösen → Einträge untereinander */
    #mainNavigation li.dropdown-full .subcategory-wrapper .row {
        display: block !important;
        margin: 0 !important;
		
    }

    #mainNavigation li.dropdown-full .subcategory-wrapper .row > [class*="col"] {
        display: block;
        flex: none !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
			color: red !important;
    }

    /* Eintrag "… anzeigen" ist mobil-only, bleibt auf Desktop aus */
    #mainNavigation li.dropdown-full .subcategory-wrapper .row > .d-lg-none {
        display: none !important;
			color: red !important;
    }

    /* Überschriften-Optik → normale Links */
    #mainNavigation li.dropdown-full .submenu-headline,
    #mainNavigation li.dropdown-full .categories-recursive-link {
        display: block !important;
        padding: .5rem 1.25rem !important;
        margin: 0 !important;
        border: 0 !important;
       // font-weight: 400 !important;
        white-space: nowrap;
			color: gray !important;
		//	  font-weight: normal;
    }

    #mainNavigation li.dropdown-full .submenu-headline:hover,
    #mainNavigation li.dropdown-full .categories-recursive-link:hover {
        background: lightgray;
        color: #940000;
        text-decoration: none;
			color: rgb(148, 0, 0) !important;
    }

    /* Kategoriebilder und 2. Unterebene ausblenden */
    #mainNavigation li.dropdown-full .subcategory-wrapper img,
    #mainNavigation li.dropdown-full .categories-recursive-dropdown {
        display: none !important;
    }
}

/* Pull Down Menü Schriftart */
@media (min-width: 992px) {
  header .submenu-headline-toplevel {
    font-family: "Open Sans",sans-serif;
    font-size: 1rem;
  }
}

/* Entfernt den dunklen Hintergrund beim Öffnen des Dropdown-Menüs */
.modal-backdrop.fade.show {
    opacity: 0 !important;
    pointer-events: none;
}
header .navbar-nav > .nav-item .nav {
    flex-wrap: wrap;
    background: #f5f7fa;
    margin-top: -24px;
   // box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
    border: none; /* Optional: Entfernt den Standard-Rahmen für eine modernere Optik */
}