/* ==========================================

   LICHT & WASSERWELT

   JTL SHOP 5.8 - NOVA CHILD

   DESKTOP HEADER - AUS ORIGINAL-NOVA UEBERNOMMEN

   - Logo und Lichtwelt buendig

   - Suche 400px mittig

   - Icons wieder weiter links

   - Warenkorbbetrag ausgeblendet

   - Kategorie-Balken 40px

   - Hintergrund dunkelgrau

   - Kategorieschrift weiss

   - NOVA-Megamenue mit voller Breite

   - Nur Desktop ab 992px

========================================== */

@media (min-width: 992px) {

  /* =====================================

     1. GRUNDEINSTELLUNGEN

  ===================================== */

  #jtl-nav-wrapper {

    --lw-start:

      max(20px, calc((100vw - 1160px) / 2));

    --lw-grau: #292e33;

    --lw-link-padding: 16px;

    /* Optionaler optischer Logo-Ausgleich */

    --lw-logo-korrektur: 0px;

    position: relative !important;

    z-index: 1030 !important;

    border: none !important;

    box-shadow: none !important;

    overflow: visible !important;

  }

  /* =====================================

     2. HEADER-CONTAINER

  ===================================== */

  #jtl-nav-wrapper .hide-navbar,

  #jtl-nav-wrapper .hide-navbar + div {

    position: relative !important;

    width: 100vw !important;

    max-width: none !important;

    margin-left:

      calc(50% - 50vw) !important;

    margin-right: 0 !important;

    padding: 0 !important;

    box-sizing: border-box !important;

    overflow: visible !important;

  }

  /* =====================================

     3. OBERER HEADER

  ===================================== */

  #jtl-nav-wrapper .hide-navbar {

    z-index: 20 !important;

    background: #ffffff !important;

  }

  #jtl-nav-wrapper

  .hide-navbar > nav.navbar {

    position: relative !important;

    z-index: 21 !important;

    display: grid !important;

    grid-template-columns:

      minmax(0, 1fr)

      400px

      minmax(0, 1fr) !important;

    grid-template-rows: auto !important;

    align-items: center !important;

    width: 100% !important;

    max-width: none !important;

    height: auto !important;

    min-height: 132px !important;

    margin: 0 !important;

    padding: 12px 0 !important;

    box-sizing: border-box !important;

    background: #ffffff !important;

    overflow: visible !important;

  }

  /* =====================================

     4. LOGO BÜNDIG ZU LICHTWELT

     Dieselbe Startposition wie

     die erste Kategorie.

     Optischer Ausgleich: -27px wie bisher.

  ===================================== */

  #jtl-nav-wrapper

  .hide-navbar .nav-logo-wrapper {

    grid-column: 1 !important;

    grid-row: 1 !important;

    position: relative !important;

    justify-self: start !important;

    align-self: center !important;

    width: auto !important;

    max-width: 100% !important;

    margin-left:

      calc(

        var(--lw-start) +

        var(--lw-logo-korrektur)

      ) !important;

    margin-top: 0 !important;

    margin-right: 0 !important;

    margin-bottom: 0 !important;

    padding: 0 !important;

    left: auto !important;

    top: auto !important;

    transform: translateX(-27px) !important;

  }

  /* Zusaetzliche Logo-Abstaende entfernen */

  #jtl-nav-wrapper

  .hide-navbar .toggler-logo-wrapper,

  #jtl-nav-wrapper

  .hide-navbar #logo,

  #jtl-nav-wrapper

  .hide-navbar #logo .navbar-brand {

    margin: 0 !important;

    padding: 0 !important;

  }

  #jtl-nav-wrapper

  .hide-navbar #logo {

    position: relative !important;

    left: auto !important;

    top: auto !important;

    transform: none !important;

  }

  #jtl-nav-wrapper

  .hide-navbar #shop-logo {

    display: block;

    margin: 0 !important;

  }

  /* =====================================

     5. SUCHLEISTE 400PX MITTIG

  ===================================== */

  #jtl-nav-wrapper

  .hide-navbar .main-search-wrapper {

    grid-column: 2 !important;

    grid-row: 1 !important;

    position: relative !important;

    justify-self: center !important;

    align-self: center !important;

    width: 400px !important;

    min-width: 0 !important;

    max-width: 400px !important;

    margin: 0 !important;

    padding: 0 !important;

    left: auto !important;

    top: auto !important;

    transform: none !important;

  }

  #jtl-nav-wrapper

  .main-search-wrapper form,

  #jtl-nav-wrapper

  .main-search-wrapper #search,

  #jtl-nav-wrapper

  .main-search-wrapper .search-wrapper {

    width: 100% !important;

    max-width: 100% !important;

  }

  /* =====================================

     6. ICONS WIEDER NACH LINKS

     Wie bei der vorherigen Version:

     ca. 60px weiter links.

  ===================================== */

  #jtl-nav-wrapper

  .hide-navbar .nav-icons-wrapper {

    grid-column: 3 !important;

    grid-row: 1 !important;

    position: relative !important;

    z-index: 30 !important;

    justify-self: end !important;

    align-self: center !important;

    width: auto !important;

    margin: 0 !important;

    padding: 0 !important;

    transform:

      translateX(-60px) !important;

    overflow: visible !important;

  }

  #jtl-nav-wrapper #shop-nav {

    display: flex !important;

    flex-direction: row !important;

    align-items: center !important;

    justify-content: flex-end !important;

    flex-wrap: nowrap !important;

    gap: 8px !important;

    margin: 0 !important;

    padding: 0 !important;

    overflow: visible !important;

  }

  /* =====================================

     7. ICONS + TEXTE ZENTRIEREN

  ===================================== */

  #jtl-nav-wrapper

  #shop-nav .account-icon-dropdown

  > a.nav-link,

  #jtl-nav-wrapper

  #shop-nav #shop-nav-wish

  > a.nav-link,

  #jtl-nav-wrapper

  #shop-nav .cart-icon-dropdown

  > a.nav-link {

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    justify-content: center !important;

    width: 86px !important;

    min-width: 86px !important;

    min-height: 65px !important;

    margin: 0 !important;

    padding: 6px 4px !important;

    gap: 6px !important;

    text-align: center !important;

    color: #111111 !important;

    line-height: 1.2 !important;

    white-space: nowrap !important;

  }

  /* Symbolgroessen */

  #jtl-nav-wrapper

  #shop-nav .account-icon-dropdown

  > a.nav-link > .fas,

  #jtl-nav-wrapper

  #shop-nav #shop-nav-wish

  > a.nav-link > .fas,

  #jtl-nav-wrapper

  #shop-nav .cart-icon-dropdown

  > a.nav-link > .fas {

    display: block !important;

    order: 1 !important;

    font-size: 23px !important;

    line-height: 26px !important;

    margin: 0 auto !important;

    color: #111111 !important;

  }

  /* Beschriftungsdesign */

  #jtl-nav-wrapper

  #shop-nav .account-icon-dropdown

  > a.nav-link::after,

  #jtl-nav-wrapper

  #shop-nav #shop-nav-wish

  > a.nav-link::after,

  #jtl-nav-wrapper

  #shop-nav .cart-icon-dropdown

  > a.nav-link::after {

    display: block !important;

    order: 2 !important;

    width: auto !important;

    height: auto !important;

    margin: 0 !important;

    padding: 0 !important;

    border: none !important;

    font-size: 12px !important;

    font-weight: 400 !important;

    line-height: 16px !important;

    color: #111111 !important;

    text-align: center !important;

    white-space: nowrap !important;

  }

  /* Kundenkonto */

  #jtl-nav-wrapper

  #shop-nav .account-icon-dropdown

  > a.nav-link::after {

    content: "Anmelden" !important;

  }

  /* Wunschliste */

  #jtl-nav-wrapper

  #shop-nav #shop-nav-wish

  > a.nav-link::after {

    content: "Wunschliste" !important;

  }

  /* Warenkorb */

  #jtl-nav-wrapper

  #shop-nav .cart-icon-dropdown

  > a.nav-link::after {

    content: "Warenkorb" !important;

  }

  /* Warenkorbbetrag entfernen */

  #jtl-nav-wrapper

  #shop-nav .cart-icon-dropdown-price {

    display: none !important;

  }

  /* =====================================

     8. KONTO / WARENKORB DROPDOWNS

     IM VORDERGRUND

  ===================================== */

  #jtl-nav-wrapper

  #shop-nav > li {

    position: relative !important;

    overflow: visible !important;

  }

  #jtl-nav-wrapper

  #shop-nav .dropdown-menu {

    z-index: 2000 !important;

  }

  /* =====================================

     9. KATEGORIEBALKEN

     40PX HOCH

     DUNKELGRAU

     VOLLE BREITE

  ===================================== */

  #jtl-nav-wrapper

  .hide-navbar + div {

    z-index: 1 !important;

    height: 40px !important;

    min-height: 40px !important;

    max-height: 40px !important;

    margin-bottom: 0 !important;

    background:

      var(--lw-grau) !important;

    border: none !important;

    box-shadow: none !important;

  }

  /* Alte Hintergrundebenen entfernen */

  #jtl-nav-wrapper

  .hide-navbar + div::before,

  #jtl-nav-wrapper

  .hide-navbar + div::after {

    content: none !important;

    display: none !important;

  }

  /* =====================================

     10. KATEGORIENAVIGATION

     Volle Breite fuer das Megamenue.

  ===================================== */

  #jtl-nav-wrapper

  .hide-navbar + div > nav.navbar {

    position: relative !important;

    display: flex !important;

    align-items: center !important;

    width: 100% !important;

    max-width: none !important;

    height: 40px !important;

    min-height: 40px !important;

    max-height: 40px !important;

    margin: 0 !important;

    padding: 0 !important;

    box-sizing: border-box !important;

    background: transparent !important;

    border: none !important;

    overflow: visible !important;

  }

  /* =====================================

     11. NAVIGATIONSCONTAINER

     Keine eigenen engen Breiten fuer

     das NOVA-Megamenue.

  ===================================== */

  #jtl-nav-wrapper

  #mainNavigation,

  #jtl-nav-wrapper

  #mainNavigation > .nav-mobile-body {

    display: flex !important;

    align-items: center !important;

    width: 100% !important;

    max-width: none !important;

    height: 40px !important;

    min-height: 40px !important;

    max-height: 40px !important;

    margin: 0 !important;

    padding: 0 !important;

    background: transparent !important;

    overflow: visible !important;

  }

  /* =====================================

     12. KATEGORIEN BÜNDIG ZUM LOGO

     Gleicher Startpunkt:

     --lw-start

     16px Innenabstand ausgleichen.

  ===================================== */

  #jtl-nav-wrapper

  #mainNavigation

  > .nav-mobile-body

  > .nav-scrollbar-inner {

    position: static !important;

    display: flex !important;

    flex-direction: row !important;

    flex-wrap: nowrap !important;

    align-items: center !important;

    flex: 1 1 auto !important;

    width: auto !important;

    max-width: none !important;

    height: 40px !important;

    min-height: 40px !important;

    margin:

      0 0 0 calc(

        var(--lw-start) -

        var(--lw-link-padding)

      ) !important;

    padding: 0 !important;

    transform: none !important;

    background: transparent !important;

    overflow: visible !important;

    list-style: none !important;

  }

  /* =====================================

     13. HAUPTKATEGORIEN

     WICHTIG:

     Dropdown-Full darf NICHT relativ

     zur kleinen Kategorie positioniert

     werden.

     Das NOVA-Megamenue nutzt wieder

     die volle Navbar als Bezugspunkt.

  ===================================== */

  #jtl-nav-wrapper

  #mainNavigation

  > .nav-mobile-body

  > .nav-scrollbar-inner

  > li.nav-item {

    position: static !important;

    flex: 0 0 auto !important;

    height: 40px !important;

    min-height: 40px !important;

    margin: 0 !important;

    padding: 0 !important;

    background: transparent !important;

  }

  /* =====================================

     14. KATEGORIELINKS AUCH BEI HOVER / FOKUS WEISS

  ===================================== */

  #jtl-nav-wrapper

  #mainNavigation

  > .nav-mobile-body

  > .nav-scrollbar-inner

  > li.nav-item

  > a.nav-link {

    position: relative !important;

    display: flex !important;

    align-items: center !important;

    height: 40px !important;

    margin: 0 !important;

    padding:

      0 var(--lw-link-padding)

      !important;

    color: #ffffff !important;

    background: transparent !important;

    font-size: 16px !important;

    font-weight: 500 !important;

    text-decoration: none !important;

    white-space: nowrap !important;

  }

  /* Hauptkategorien bleiben auch beim Hover / Fokus und auf Unterseiten weiss. */

  #jtl-nav-wrapper

  #mainNavigation

  > .nav-mobile-body

  > .nav-scrollbar-inner

  > li.nav-item

  > a.nav-link > span {

    color: #ffffff !important;

    -webkit-text-fill-color:

      #ffffff !important;

    background: transparent !important;

    box-shadow: none !important;

  }

  /* Hover und Tastaturfokus: Schrift weiss, unterer Balken Midnight-Blau. */

  #jtl-nav-wrapper

  #mainNavigation

  > .nav-mobile-body

  > .nav-scrollbar-inner

  > li.nav-item

  > a.nav-link:hover,

  #jtl-nav-wrapper

  #mainNavigation

  > .nav-mobile-body

  > .nav-scrollbar-inner

  > li.nav-item

  > a.nav-link:focus {

    background:

      rgba(255,255,255,.12) !important;

    color: #ffffff !important;

    border-bottom-color: #1973D3 !important;

  }

  /* Eigener 4px-Balken innerhalb des Hauptlinks; Schrift und Dropdown-Pfeil bleiben weiss.
     li bleibt position: static, damit das Megamenue seine volle Breite behaelt. */
  #jtl-nav-wrapper #mainNavigation
  > .nav-mobile-body > .nav-scrollbar-inner
  > li.nav-item:hover > a.nav-link::before,
  #jtl-nav-wrapper #mainNavigation
  > .nav-mobile-body > .nav-scrollbar-inner
  > li.nav-item > a.nav-link:focus::before,
  #jtl-nav-wrapper #mainNavigation
  > .nav-mobile-body > .nav-scrollbar-inner
  > li.nav-item > a.nav-link[aria-expanded="true"]::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: auto 0 0 !important;
    width: auto !important;
    height: 4px !important;
    margin: 0 !important;
    background: #1973D3 !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none;
    z-index: 2;
  }

  /* Dropdown-Pfeile */

  #jtl-nav-wrapper

  #mainNavigation

  > .nav-mobile-body

  > .nav-scrollbar-inner

  > li.nav-item

  > a.dropdown-toggle::after {

    border-top-color: #ffffff !important;

  }

  /* =====================================

     15. ORIGINAL NOVA MEGAMENUE

     Keine eigenen Vorgaben fuer:

     - Dropdown-Breiten

     - Kategorie-Bilder

     - Unterkategorie-Spalten

     - Unterkategorie-Schriftgroessen und Abstaende

     Diese Elemente bleiben im

     originalen NOVA-Layout. Nur die Hover-Farbe

     der Kategorienamen wird unten angepasst.

  ===================================== */

  /* Bekannte HTML-Links: Megamenue-Namen und Kontakt.
     Ein gemeinsamer Farbblock fuer Hover und sichtbaren Tastaturfokus.
     span gezielt mitfaerben, damit feste Theme-Textfarben nicht stehen bleiben.
     Der href-Selektor identifiziert den Kontakt-Link; er laedt keine Ressource. */

  #jtl-nav-wrapper #mainNavigation .dropdown-menu
  a.categories-recursive-link:is(:hover, :focus-visible),

  #jtl-nav-wrapper #mainNavigation .dropdown-menu
  a.categories-recursive-link:is(:hover, :focus-visible) > span.text-truncate,

  a.nav-link[href="https://lichtundwasserwelt.de/Kontakt_2"]:is(:hover, :focus-visible) {
    color: #1973D3 !important;
    -webkit-text-fill-color: currentColor !important;
  }

  /* =====================================

     16. SCROLL-PFEILE AUSBLENDEN

  ===================================== */

  #jtl-nav-wrapper

  #mainNavigation .nav-scrollbar-arrow {

    display: none !important;

  }

}

/* ==========================================

   17. KLEINERE DESKTOPS

   LG: 992 - 1199.98PX

========================================== */

@media (min-width: 992px)

       and (max-width: 1199.98px) {

  /* Kompaktere Icon-Bereiche */

  #jtl-nav-wrapper

  #shop-nav .account-icon-dropdown

  > a.nav-link,

  #jtl-nav-wrapper

  #shop-nav #shop-nav-wish

  > a.nav-link,

  #jtl-nav-wrapper

  #shop-nav .cart-icon-dropdown

  > a.nav-link {

    width: 70px !important;

    min-width: 70px !important;

  }

  /* Auf schmalen Desktops Icons

     etwas weniger verschieben */

  #jtl-nav-wrapper

  .hide-navbar .nav-icons-wrapper {

    transform:

      translateX(-35px) !important;

  }

}

/* =====================================

   18. SYMBOLE NACH LINKS VERSCHIEBEN

   Desktop ab 1200px

   Abstand passt sich automatisch

   an die Bildschirmbreite an.

===================================== */

@media (min-width: 1200px) {

  #jtl-nav-wrapper

  .hide-navbar .nav-icons-wrapper {

    transform:

      translateX(

        calc(

          -60px -

          clamp(

            0px,

            calc(25vw - 300px),

            175px

          )

        )

      ) !important;

  }

}

/* ==========================================

   ENDE DESKTOP HEADER

   MOBILE XS / SM / MD UNVERAENDERT

========================================== */


/* =========================================================
   NOVA CHILD – Hover-Farbe fuer Header-Icons + Beschriftungen
   Stellt den Midnight-Hover trotz fester schwarzer Farben
   in den vorherigen Desktop-Regeln wieder her.
   Beruecksichtigt auch die via ::after erzeugten Texte.
   ========================================================= */

@media (min-width: 992px) {
  #jtl-nav-wrapper #shop-nav
  :is(.account-icon-dropdown, #shop-nav-wish, .cart-icon-dropdown)
  > a.nav-link:is(:hover, :focus-visible),

  #jtl-nav-wrapper #shop-nav
  :is(.account-icon-dropdown, #shop-nav-wish, .cart-icon-dropdown):hover
  > a.nav-link,

  #jtl-nav-wrapper #shop-nav
  :is(.account-icon-dropdown, #shop-nav-wish, .cart-icon-dropdown)
  > a.nav-link:is(:hover, :focus-visible) > .fas,

  #jtl-nav-wrapper #shop-nav
  :is(.account-icon-dropdown, #shop-nav-wish, .cart-icon-dropdown):hover
  > a.nav-link > .fas,

  #jtl-nav-wrapper #shop-nav
  :is(.account-icon-dropdown, #shop-nav-wish, .cart-icon-dropdown)
  > a.nav-link:is(:hover, :focus-visible)::after,

  #jtl-nav-wrapper #shop-nav
  :is(.account-icon-dropdown, #shop-nav-wish, .cart-icon-dropdown):hover
  > a.nav-link::after {
    color: #1973D3 !important;
  }
}