#menu-header-wrapper{ will-change: transform;position: fixed;top: 0;right: 0;width: 100%;height: 100vh;background: #fff;transform: translateX(-100%); -webkit-transform: translateX(-100%);transition: transform .3s ease;-webkit-transition: transform .3s ease;z-index: 998;padding-top: 2.5rem;}
#menu-header-wrapper.active {transform: translateX(0);-webkit-transform: translateX(0);}
#menu-header-wrapper .menu {list-style: none;margin-bottom: 0;padding-top: 1rem;padding-left: 30px;padding-right: 30px;width:90%;    height: 80vh;overflow-y: auto;}
#menu-header-wrapper .menu a {padding:.5rem;color:#222;display:block;position: relative;cursor: pointer;}
#menu-header-wrapper .menu>li{position: relative;}
#menu-header-wrapper .menu>li>a{text-transform: uppercase;}


.sub-menu{ max-height: 0; padding: 0;transition: max-height 0.3s ease-in-out;overflow: hidden;display:block;padding-left:1rem;list-style: none;}
.sub-menu.active{max-height: 500px;transition: max-height 0.3s ease-in-out;}

.has-child>a>.arrow {z-index: 1;cursor: pointer;padding-left: 0.5em;position: absolute;right: 0;font-size: 1.2rem;height: 100%;top: 0;display: flex;align-items: center;width: 52px;justify-content: center;}
.has-child>a>.arrow:before{content: "+";}
.has-child>a>.arrow.active:before{content: "-";}
/* Button */
.close-btn{right: 1rem;position: fixed;z-index: 999;top: 1rem;}
.menu-btn {position: relative;}

@media (min-width: 960px) {
  #menu-header-wrapper .menu{height: unset;overflow-y:unset}
  .sub-menu{ display:block;}

  #menu-header-wrapper {padding-top: 0;padding-left: 0;position: relative;width: auto;height: auto;background: transparent;transform: none;z-index: 999;}
  #menu-header-wrapper .menu {display: flex;padding:0;justify-content: flex-end;width:100%}
  #menu-header-wrapper .menu>li>a{padding:2.2rem .5rem;font-size:.9rem;}
  .has-child>a>.arrow{display:none;}
  .has-child .sub-menu{position: absolute;display:none;max-height: unset;padding: 1rem;list-style: none;}
  .has-child:hover .sub-menu{display:grid;grid-template-columns: repeat(1, 1fr);top: 100%;left: 0;background: #fff;min-width: 200px;z-index: 999;}
  .dropdown-right .sub-menu{left: auto !important;right: 0;}
  .main-header-inner.uk-sticky-below .has-child:hover .sub-menu{background: var(--lightgray);}
  .mega.has-child ul.sub-menu{width: 750px;right: 0;left: auto !important;column-count: 3; }
  .mega.has-child:hover .sub-menu{display: grid;grid-template-columns: 1fr 1fr 1fr;}
  .mega.has-child>ul.sub-menu>li{height:fit-content;margin-bottom:1rem;}
  .mega.has-child>ul.sub-menu>li.has-child{display: inline-block;}

  .mega.has-child ul.sub-menu li a{padding:0;}
  .mega.has-child ul.sub-menu .sub-menu{display:block;position: relative;top: unset;font-size: .8rem;padding: 0;width: max-content;column-count: 1;}
}
@media (min-width: 1200px) {
  .has-child:hover .sub-menu{grid-template-columns: repeat(1, 1fr);}
    #menu-header-wrapper .menu>li>a{padding:2.2rem 1rem;font-size:1rem;}

}


@media (max-width: 959.98px) {
.mobile-reverse{margin-top:0 !important}
.mobile-reverse>div{display:grid;}
.mobile-reverse>div .uk-flex-last {margin-top: 15px;}
.current-menu-item>a{font-weight: bold;}
}
/* Theme 1.3.4 – Tastatur (nur bei Tastaturfokus sichtbar, Maus und Touch wie bisher) */
@media (min-width: 960px) {
  .has-child:has(:focus-visible) .sub-menu{display:grid;grid-template-columns: repeat(1, 1fr);top: 100%;left: 0;background: #fff;min-width: 200px;z-index: 999;}
  .main-header-inner.uk-sticky-below .has-child:has(:focus-visible) .sub-menu{background: var(--lightgray);}
  .mega.has-child:has(:focus-visible) .sub-menu{grid-template-columns: 1fr 1fr 1fr;}
  .mega.has-child:has(:focus-visible) ul.sub-menu .sub-menu{display:block;}
}
@media (max-width: 959.98px) {
  /* Geschlossenes Menü und zugeklappte Untermenüs aus der Tab-Reihenfolge nehmen (erst nach der Animation). */
  #menu-header-wrapper:not(.active){visibility: hidden;transition: transform .3s ease, visibility 0s .3s;}
  #menu-header-wrapper.active{visibility: visible;}
  .sub-menu:not(.active){visibility: hidden;transition: max-height 0.3s ease-in-out, visibility 0s .3s;}
  /* Mit der Tastatur auf einem Hauptpunkt: Untermenü aufklappen, damit die Unterpunkte erreichbar sind. */
  .has-child:has(> a:focus-visible) > .sub-menu,
  .sub-menu:has(:focus-visible){max-height: 500px;visibility: visible;}
}

/* Theme 1.3.7 – Handy-Menü Variante A „Salon-Karte“ (Anjas Wahl 27.10.2026). Desktop unverändert. */
@media (min-width: 960px) {
  .eh-menu-foot{display:none;}
}
@media (max-width: 959.98px) {
  /* 1.3.8: box-sizing, sonst rechnet das Panel Innenabstand auf 100 % drauf (Pfeile rechts abgeschnitten, Fuß unter dem Bildschirmrand). dvh = sichtbare Höhe auf iPhone/iPad. */
  #menu-header-wrapper{box-sizing:border-box;height:100vh;height:100dvh;background:var(--lightgray, #f5ece1);display:flex;flex-direction:column;padding-top:4rem;}
  #menu-header-wrapper .menu{box-sizing:border-box;flex:1 1 auto;height:auto;min-height:0;width:100%;padding:0 24px;overflow-y:auto;overscroll-behavior:contain;}
  #menu-header-wrapper .menu>li{border-bottom:1px solid rgba(77,11,3,.14);}
  #menu-header-wrapper .menu>li>a{font-family:'EB Garamond', Georgia, serif;text-transform:none;font-weight:400;font-size:1.5rem;line-height:1.2;color:var(--tertiary, #4d0b03);padding:.7rem 3.5rem .7rem 0;}
  #menu-header-wrapper .menu>li.current-menu-item>a .link::after{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--primary, #ddbaae);margin-left:.6rem;vertical-align:middle;}
  .current-menu-item>a{font-weight:400;}
  /* Pfeil statt „+“ */
  .has-child>a>.arrow:before,.has-child>a>.arrow.active:before{content:"";width:9px;height:9px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .25s;margin-top:-4px;}
  .has-child>a>.arrow.active:before{transform:rotate(-135deg);margin-top:4px;}
  #menu-header-wrapper .sub-menu{padding-left:0;}
  #menu-header-wrapper .sub-menu.active{padding-bottom:.6rem;}
  #menu-header-wrapper .sub-menu a{font-family:'Outfit', sans-serif;font-size:.95rem;text-transform:none;color:#5e3a33;padding:.3rem 0;}
  #menu-header-wrapper .sub-menu .current-menu-item>a{color:var(--tertiary, #4d0b03);font-weight:500;}
  /* Fuß: Termin, Schnellkontakt, Öffnungszeiten */
  .eh-menu-foot{flex:none;display:grid;gap:12px;padding:16px 24px calc(20px + env(safe-area-inset-bottom, 0px));background:var(--lightgray, #f5ece1);}
  .eh-menu-cta{display:block;text-align:center;background:var(--tertiary, #4d0b03);color:var(--lightgray, #f5ece1) !important;border-radius:0;padding:12px;font-weight:500;text-decoration:none !important;}
  .eh-menu-quick{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
  .eh-menu-quick a{text-align:center;font-size:.8rem;border:1px solid rgba(77,11,3,.25);border-radius:0;padding:7px 0;color:var(--tertiary, #4d0b03);text-decoration:none;}
  .eh-menu-hours{margin:0;font-size:.78rem;text-align:center;color:#6d4b44;}
  .close-btn{color:var(--tertiary, #4d0b03);}
}
@media (max-width: 959.98px) and (prefers-reduced-motion: reduce) {
  #menu-header-wrapper{transition:none;}
  .has-child>a>.arrow:before{transition:none;}
}