/* ============================================================
   LICHT & WASSERWELT | NOVAChild | Mobiler Header
   Zieldatei: templates/NOVAChild/themes/my-nova/mobile-header.css
   Vorhandenen NOVA-HTML-Selektoren bewusst beibehalten.
   Geltungsbereich: nur Bildschirmbreiten unter 992px.
   Hinweis: Schubladen-Logik und Klasse .jtl-mobile-drawer-active
   muessen durch vorhandenes JavaScript gesteuert werden.
   ============================================================ */

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

   JTL SHOP 5.8 - NOVAChild (Parent: NOVA)

   MOBILER HEADER + SLIDE-IN PANELS

   XS: 0 - 575px

   SM: 576 - 767px

   MD: 768 - 991px

   NEU:

   HAMBURGER-MENÜ MIT RUNDEN STRICHEN

   DESKTOP AB 992PX UNVERÄNDERT

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

@media (max-width: 991.98px) {

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

     1. HEADER IMMER SICHTBAR

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

  #jtl-nav-wrapper {

    position: -webkit-sticky !important;

    position: sticky !important;

    top: 0 !important;

    z-index: 1030 !important;

    width: 100% !important;

    background: #fff !important;

    box-shadow: 0 2px 6px rgba(0,0,0,.10);

  }

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

     2. ERSTE HEADERZEILE

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

  #jtl-nav-wrapper .toggler-logo-wrapper {

    display: flex !important;

    flex-direction: row !important;

    align-items: center !important;

    height: 105px !important;

    width: auto !important;

  }

  #jtl-nav-wrapper .nav-logo-wrapper {

    width: auto !important;

    max-width: none !important;

    flex: 0 0 auto !important;

  }

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

     3. NEUES HAMBURGER-MENÜ

     - 3 abgerundete Striche

     - Gleichmäßige Abstände

     - Dezenter Hover

     - Saubere Zentrierung

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

  #jtl-nav-wrapper #burger-menu {

    position: absolute !important;

    left: 12px !important;

    top: 31px !important;

    width: 44px !important;

    height: 44px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    padding: 0 !important;

    margin: 0 !important;

    background: transparent !important;

    border: none !important;

    border-radius: 10px !important;

    cursor: pointer !important;

    z-index: 10 !important;

    -webkit-tap-highlight-color: transparent;

    transition: background-color .2s ease;

  }

  /* Hover-Hintergrund */

  #jtl-nav-wrapper #burger-menu:hover {

    background-color: #f5f5f5 !important;

  }

  /* Tastaturfokus sichtbar */

  #jtl-nav-wrapper #burger-menu:focus-visible {

    outline: 2px solid #555555 !important;

    outline-offset: 2px;

  }

  /* Mittlerer Hamburger-Strich */

  #jtl-nav-wrapper

  #burger-menu .navbar-toggler-icon {

    display: block !important;

    position: relative !important;

    width: 26px !important;

    height: 3px !important;

    padding: 0 !important;

    margin: 0 auto !important;

    background: #242424 !important;

    border: none !important;

    border-radius: 999px !important;

    box-shadow: none !important;

    transform: none !important;

  }

  /* Oberer und unterer Strich */

  #jtl-nav-wrapper

  #burger-menu .navbar-toggler-icon::before,

  #jtl-nav-wrapper

  #burger-menu .navbar-toggler-icon::after {

    content: "" !important;

    position: absolute !important;

    left: 0 !important;

    display: block !important;

    width: 26px !important;

    height: 3px !important;

    background: #242424 !important;

    border: none !important;

    border-radius: 999px !important;

    box-shadow: none !important;

    transform: none !important;

  }

  /* Oberer Strich */

  #jtl-nav-wrapper

  #burger-menu .navbar-toggler-icon::before {

    top: -8px !important;

    bottom: auto !important;

  }

  /* Unterer Strich */

  #jtl-nav-wrapper

  #burger-menu .navbar-toggler-icon::after {

    top: 8px !important;

    bottom: auto !important;

  }

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

     4. LOGO MITTIG

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

  #jtl-nav-wrapper #logo {

    position: absolute !important;

    left: 50% !important;

    top: 10px !important;

    transform: translateX(-50%) !important;

    width: auto !important;

    margin: 0 !important;

    text-align: center !important;

    z-index: 2 !important;

  }

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

     5. LOGO 85 PX GROSS

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

  #jtl-nav-wrapper #shop-logo,

  #jtl-nav-wrapper #logo .navbar-brand img {

    height: 85px !important;

    width: auto !important;

    max-width: calc(100vw - 160px) !important;

    object-fit: contain !important;

  }

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

     6. NAVIGATION

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

  #jtl-nav-wrapper .navbar,

  #jtl-nav-wrapper .nav-icons-wrapper {

    position: static !important;

  }

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

     7. KONTO + WARENKORB RECHTS

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

  #jtl-nav-wrapper #shop-nav {

    position: absolute !important;

    right: 10px !important;

    top: 40px !important;

    display: flex !important;

    flex-direction: row !important;

    flex-wrap: nowrap !important;

    align-items: center !important;

    width: auto !important;

    margin: 0 !important;

    padding: 0 !important;

    z-index: 10 !important;

  }

  /* Nur Konto und Warenkorb anzeigen */

  #jtl-nav-wrapper

  #shop-nav > li:not(

    .account-icon-dropdown

  ):not(.cart-icon-dropdown) {

    display: none !important;

  }

  /* Warenkorbpreis ausblenden */

  #jtl-nav-wrapper

  .cart-icon-dropdown-price {

    display: none !important;

  }

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

     8. SUCHLEISTE UNTER DEM LOGO

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

  #jtl-nav-wrapper .main-search-wrapper {

    display: none !important;

  }

  #jtl-nav-wrapper .search-form-wrapper-fixed {

    display: block !important;

    position: relative !important;

    width: 100% !important;

    max-width: 100% !important;

    padding: 6px 12px 12px !important;

    margin: 0 !important;

    background: #fff !important;

  }

  #jtl-nav-wrapper

  .search-form-wrapper-fixed form,

  #jtl-nav-wrapper

  .search-form-wrapper-fixed .search-wrapper {

    width: 100% !important;

    max-width: 100% !important;

  }

  /* Zweite schwebende Suche ausblenden */

  .fixed-search.smoothscroll-top-search {

    display: none !important;

  }

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

     9. WARENKORB + KONTO ALS DRAWER

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

  /* Überlagerungen nicht abschneiden */

  #jtl-nav-wrapper,

  #jtl-nav-wrapper .navbar,

  #jtl-nav-wrapper #shop-nav {

    overflow: visible !important;

  }

  /* Beide Panels einheitlich gestalten */

  #jtl-nav-wrapper

  #shop-nav .account-icon-dropdown

  > .dropdown-menu,

  #jtl-nav-wrapper

  #shop-nav .cart-icon-dropdown

  > .dropdown-menu {

    display: block !important;

    position: fixed !important;

    top: 0 !important;

    right: 0 !important;

    bottom: 0 !important;

    left: auto !important;

    width: min(92vw, 420px) !important;

    min-width: 0 !important;

    max-width: 100vw !important;

    height: 100vh !important;

    height: 100dvh !important;

    max-height: 100dvh !important;

    padding: 0 16px 24px !important;

    margin: 0 !important;

    background: #fff !important;

    border: none !important;

    border-radius: 0 !important;

    box-sizing: border-box !important;

    overflow-x: hidden !important;

    overflow-y: auto !important;

    -webkit-overflow-scrolling: touch;

    box-shadow:

      -5px 0 25px rgba(0,0,0,.18) !important;

    /* Geschlossen rechts außerhalb */

    transform: translateX(105%) !important;

    visibility: hidden !important;

    pointer-events: none !important;

    transition:

      transform .3s ease,

      visibility 0s linear .3s !important;

    z-index: 1100 !important;

  }

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

     10. PANEL VON RECHTS ÖFFNEN

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

  #jtl-nav-wrapper

  #shop-nav .account-icon-dropdown

  > .dropdown-menu.show,

  #jtl-nav-wrapper

  #shop-nav .cart-icon-dropdown

  > .dropdown-menu.show {

    transform: translateX(0) !important;

    visibility: visible !important;

    pointer-events: auto !important;

    transition:

      transform .3s ease,

      visibility 0s !important;

  }

  /* Header über JTL-Hintergrund legen */

  body.jtl-mobile-drawer-active

  #jtl-nav-wrapper {

    z-index: 1060 !important;

  }

  /* Hintergrund nicht scrollen */

  html.jtl-mobile-drawer-active,

  body.jtl-mobile-drawer-active {

    overflow: hidden !important;

  }

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

     11. DRAWER-ÜBERSCHRIFT

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

  .jtl-mobile-drawer-header {

    position: sticky;

    top: 0;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    min-height: 65px;

    margin: 0 -16px 18px;

    padding: 10px 16px;

    background: #fff;

    border-bottom: 1px solid #eee;

    font-size: 19px;

    font-weight: 600;

  }

  /* X ZUM SCHLIESSEN */

  .jtl-mobile-drawer-close {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 42px;

    height: 42px;

    border: 0;

    background: transparent;

    color: #222;

    font-size: 28px;

    cursor: pointer;

  }

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

     12. WARENKORB-INHALTE SICHTBAR

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

  #jtl-nav-wrapper

  #shop-nav .cart-dropdown .table-responsive {

    max-height: none !important;

    overflow-x: auto !important;

  }

  #jtl-nav-wrapper

  #shop-nav .cart-dropdown .dropdown-body {

    max-width: 100% !important;

  }

  #jtl-nav-wrapper

  #shop-nav .cart-dropdown-buttons {

    width: 100% !important;

    margin-left: 0 !important;

    margin-right: 0 !important;

  }

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

     13. KUNDENKONTO

     REGISTRIERUNG WEISSER HINTERGRUND

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

  /* Registrierungsbereich weiß */

  /* background setzt auch die Hintergrundfarbe; kein doppelter Longhand. */

  #jtl-nav-wrapper

  .account-icon-dropdown

  .dropdown-footer {

    background: #ffffff !important;

    border: none !important;

  }

  /* Registrierungslink weiß */

  #jtl-nav-wrapper

  .account-icon-dropdown

  .dropdown-footer a {

    background: #ffffff !important;

    color: #222222 !important;

    border: none !important;

  }

  /* Auch beim Antippen weiß */

  #jtl-nav-wrapper

  .account-icon-dropdown

  .dropdown-footer a:hover,

  #jtl-nav-wrapper

  .account-icon-dropdown

  .dropdown-footer a:focus {

    background: #ffffff !important;

    color: #222222 !important;

  }

}

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

   ENDE MOBILER HEADER

   XS + SM + MD

   DESKTOP AB 992PX UNVERÄNDERT

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