/* Johle Theme 1.26.0 – Navigation komplett bereinigt und neu aufgebaut */

.header-nav-row{
  width:100%;
  background:#fffaf8;
  border-top:1px solid rgba(123,24,34,.12);
  border-bottom:1px solid rgba(123,24,34,.12);
}
.header-nav-row .nav-inner{
  width:min(100% - 2rem,var(--container));
  margin-inline:auto;
}
.primary-nav{
  width:100%;
}
.primary-nav ul{
  list-style:none;
  margin:0;
  padding:0;
}
.primary-nav a{
  text-decoration:none;
  color:var(--johle-wine,var(--primary));
}

/* Desktop */
@media (min-width:981px){
  .menu-toggle{display:none!important}

  .header-nav-row{
    display:block!important;
    position:relative;
    z-index:100;
  }
  .header-nav-row .nav-inner{
    min-height:58px;
    display:flex;
    align-items:center;
  }
  .primary-nav{
    display:block!important;
    position:static!important;
    overflow:visible!important;
  }
  .primary-nav > ul,
  .primary-nav > div > ul{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:.15rem .35rem;
  }
  .primary-nav li{position:relative;margin:0}
  .primary-nav a{
    display:flex;
    align-items:center;
    min-height:46px;
    padding:.55rem .75rem;
    border-radius:10px;
    font-size:var(--menu-font-size);
    font-weight:750;
    line-height:1.2;
    white-space:nowrap;
  }
  .primary-nav a:hover,
  .primary-nav a:focus-visible,
  .primary-nav .current-menu-item > a,
  .primary-nav .current_page_item > a,
  .primary-nav .current-menu-ancestor > a{
    background:rgba(123,24,34,.08);
    color:var(--primary-dark);
  }

  .primary-nav .sub-menu,
  .primary-nav .children{
    position:absolute;
    z-index:150;
    top:100%;
    left:0;
    display:none;
    min-width:230px;
    max-width:340px;
    flex-direction:column;
    align-items:stretch;
    gap:.15rem;
    padding:.55rem .45rem .45rem;
    margin:0;
    background:#fffaf8;
    border:1px solid var(--border);
    border-radius:0 0 12px 12px;
    box-shadow:var(--shadow);
  }
  .primary-nav .sub-menu .sub-menu,
  .primary-nav .children .children{
    top:0;
    left:100%;
    border-radius:12px;
  }
  .primary-nav li:hover > .sub-menu,
  .primary-nav li:focus-within > .sub-menu,
  .primary-nav li:hover > .children,
  .primary-nav li:focus-within > .children{
    display:flex;
  }
  .primary-nav .sub-menu a,
  .primary-nav .children a{
    min-height:40px;
    padding:.5rem .65rem;
    white-space:normal;
  }
  .primary-nav .menu-item-has-children > a::after{
    content:"▾";
    margin-left:.4rem;
    font-size:.72em;
  }
  .primary-nav .sub-menu .menu-item-has-children > a::after{
    content:"›";
    margin-left:auto;
  }
  .submenu-toggle{display:none!important}
}

/* Mobil / Tablet:
   Kein Drawer, kein Overlay, kein fixed/absolute, kein eigener Scrollbereich.
   Das Menü klappt direkt unter dem Header-/Bildbereich im normalen Seitenfluss auf. */
@media (max-width:980px){
  .site-header{
    overflow:visible!important;
  }

  .menu-toggle{
    display:inline-flex!important;
    align-items:center;
    justify-content:center;
    gap:.55rem;
    margin-left:auto;
    min-height:46px;
    padding:.65rem .85rem;
    border:1px solid var(--border);
    border-radius:999px;
    background:rgba(255,250,247,.96);
    color:var(--primary);
    font:inherit;
    font-weight:800;
    cursor:pointer;
    touch-action:manipulation;
  }
  .menu-icon{
    font-size:1.2rem;
    line-height:1;
  }

  .header-nav-row{
    display:none!important;
    position:static!important;
    inset:auto!important;
    z-index:auto!important;
    width:100%!important;
    height:auto!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
    transform:none!important;
    filter:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    box-shadow:0 8px 20px rgba(35,20,24,.07);
  }
  .header-nav-row.is-open{
    display:block!important;
  }

  .header-nav-row .nav-inner{
    display:block!important;
    width:min(100% - 1.25rem,var(--container))!important;
    min-height:0!important;
    height:auto!important;
    margin-inline:auto!important;
    padding:10px 0 12px!important;
    overflow:visible!important;
  }

  .primary-nav{
    display:none!important;
    position:static!important;
    inset:auto!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    height:auto!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
    overscroll-behavior:auto!important;
    touch-action:auto!important;
    transform:none!important;
    opacity:1!important;
    filter:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
  }
  .primary-nav.is-open{
    display:block!important;
  }

  .primary-nav > ul,
  .primary-nav > div > ul{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:7px!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
  }

  .primary-nav li{
    position:relative!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
  }

  .primary-nav a{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    width:100%!important;
    min-height:54px!important;
    padding:12px 54px 12px 15px!important;
    border:1px solid rgba(104,19,28,.10)!important;
    border-radius:13px!important;
    background:#fff!important;
    color:var(--johle-wine,#68131c)!important;
    font-size:1rem!important;
    font-weight:800!important;
    line-height:1.22!important;
    white-space:normal!important;
    box-sizing:border-box!important;
  }

  .primary-nav a:hover,
  .primary-nav a:focus-visible,
  .primary-nav .current-menu-item > a,
  .primary-nav .current_page_item > a,
  .primary-nav .current-menu-ancestor > a{
    background:#f4e7e4!important;
    border-color:rgba(168,56,71,.20)!important;
    color:#68131c!important;
  }

  .primary-nav .sub-menu,
  .primary-nav .children{
    display:none!important;
    position:static!important;
    inset:auto!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    margin:5px 4px 2px 14px!important;
    padding:3px 0 3px 10px!important;
    border:0!important;
    border-left:2px solid rgba(168,56,71,.20)!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }

  .primary-nav li.submenu-open > .sub-menu,
  .primary-nav li.submenu-open > .children{
    display:flex!important;
    flex-direction:column!important;
    gap:5px!important;
  }

  .primary-nav .sub-menu a,
  .primary-nav .children a{
    min-height:48px!important;
    padding:10px 12px!important;
    background:#fffdfc!important;
    font-size:.95rem!important;
  }

  .primary-nav .menu-item-has-children > a::after{
    content:none!important;
    display:none!important;
  }

  .submenu-toggle{
    position:absolute!important;
    top:6px!important;
    right:6px!important;
    z-index:2!important;
    display:grid!important;
    place-items:center!important;
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    min-height:42px!important;
    margin:0!important;
    padding:0!important;
    border:1px solid rgba(104,19,28,.13)!important;
    border-radius:11px!important;
    background:#f7ebe8!important;
    color:#8d202d!important;
    cursor:pointer!important;
  }
  .submenu-toggle[aria-expanded="true"]{
    background:#ead5d2!important;
  }
  .submenu-toggle .submenu-icon{
    display:block!important;
    font-size:23px!important;
    line-height:1!important;
    transition:transform .18s ease;
  }
  .submenu-toggle[aria-expanded="true"] .submenu-icon{
    transform:rotate(180deg);
  }
}

@media(max-width:520px){
  .header-nav-row .nav-inner{
    width:calc(100% - 12px)!important;
  }
  .primary-nav a{
    min-height:52px!important;
    padding-left:13px!important;
  }
}


/* =========================================================
   1.26.3 – mobiler Menübutton wieder oben rechts im Headerbild
   Das aufgeklappte Menü bleibt weiterhin im normalen Seitenfluss
   direkt UNTER dem Headerbild.
   ========================================================= */
@media (max-width:980px){
  .header-brand-row,
  .header-brand-inner{
    position:relative!important;
  }

  .menu-toggle{
    position:absolute!important;
    top:18px!important;
    right:18px!important;
    left:auto!important;
    bottom:auto!important;
    z-index:20!important;

    margin:0!important;
    min-height:52px!important;
    padding:12px 18px!important;
    border:1px solid rgba(104,19,28,.16)!important;
    border-radius:999px!important;
    background:rgba(255,250,247,.96)!important;
    color:var(--primary,#A83847)!important;
    box-shadow:0 6px 18px rgba(35,20,24,.14)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }

  .menu-toggle .menu-icon{
    display:inline-block!important;
    font-size:1.25rem!important;
    line-height:1!important;
  }
}

@media (max-width:520px){
  .menu-toggle{
    top:14px!important;
    right:14px!important;
    min-height:48px!important;
    padding:10px 15px!important;
  }
}