/* ==========================================================
   CLiXX Menu Enhancer – Divi Mobile (vereinheitlicht)
   ========================================================== */

/* ==========================================================
   QUICK EDIT – Menü Styles (nur hier anfassen)

   Schriftgrößen immer in VW:
   Desktop: (>=981px) | Tablet: (768–980px) | Handy: (<=767px)
   ========================================================== */

/* Schriftgrößen (VW) */
@media (min-width: 981px){
  .et_mobile_menu a{ font-size: 1vw; }
}
@media (min-width: 768px) and (max-width: 980px){
  .et_mobile_menu a{ font-size: 2.2vw; }
}
@media (max-width: 767px){
  .et_mobile_menu a{ font-size: 3.8vw; }
}

/* Menü-Hintergründe */
.et_mobile_menu{
  background: rgba(0,0,0,.92) !important;  /* Hauptmenü */
}
ul.et_mobile_menu ul.clixx-sub{
  background: rgba(0,0,0,.55) !important; /* aufgeklapptes Submenü */
}

/* Link-Farben */
.et_mobile_menu a{
  color: #fff !important;
}
.et_mobile_menu a:hover{
  opacity: .9;
}

/* Toggle-Icon (Plus/Minus) */
.et_mobile_menu .mobile-toggle{
  background: rgba(255,255,255,.10) !important; /* Icon-Hintergrund */
  border-radius: 10px;
}
.et_mobile_menu .toggle-icon,
.et_mobile_menu .toggle-icon::before{
  background: #dec29f; /* Icon-Farbe */
}
.et_mobile_menu .toggle-icon{
  width: 18px;  /* Icon-Breite */
  height: 2px;  /* Icon-Stärke */
}
.et_mobile_menu .toggle-icon::before{
  width: 18px;  /* Icon-Breite */
  height: 2px;  /* Icon-Stärke */
}

/* Trefferfläche (Fingerfreundlich)
   Tipp: Wenn dir das Icon minimal zu hoch/tief sitzt:
   ändere unten die Zeile "top: calc(50% + 0px);" z. B. auf +20px */


@media (max-width: 980px) {
  .et_pb_menu .et_mobile_menu,
  .et_pb_menu .et_mobile_menu ul {
    list-style: none !important;
    text-align: left;
    width: 80vw;
    margin-left: -40vw;
  }
}

.et_mobile_menu .mobile-toggle {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  position: absolute;
  right: 0;
  top: calc(50% + 0px);
  transform: translateY(-50%);
  z-index: 999;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;   /* << Trefferfläche rechts */
  height: 56px;  /* << Trefferfläche Höhe  */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

ul.et_mobile_menu li.menu-item-has-children,
ul.et_mobile_menu li.page_item_has_children {
  position: relative;
}

/* Wichtig: Toggle sitzt am Parent-Link – damit er NICHT nach unten wandert,
   wenn das Submenü aufgeklappt wird (LI wird höher). */
.et_mobile_menu li.menu-item-has-children > a,
.et_mobile_menu li.page_item_has_children > a{
  position: relative;
  display: block;
}

.et_mobile_menu .menu-item-has-children > a:after,
.et_mobile_menu .page_item_has_children > a:after {
  display: none !important;
}

.toggle-icon {
  position: relative;
  display: block;
  transition: transform .25s ease;
}
.toggle-icon::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  transform: rotate(90deg);
  transition: transform .25s ease;
}
li.dt-open .mobile-toggle .toggle-icon { transform: rotate(45deg); }
li.dt-open .mobile-toggle .toggle-icon::before { transform: rotate(-45deg); }

.et_mobile_menu > li > a,
.et_mobile_menu .menu-item-has-children > a,
.et_mobile_menu .page_item_has_children > a {
  padding-right: 86px; /* Platz für die große Trefferfläche */
}

ul.et_mobile_menu li {
  position: relative;
  overflow: visible;
}

ul.et_mobile_menu ul.clixx-sub {
  margin: 0;
  padding: 0 0 0 16px;
  list-style: none;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-5px);
  transition: max-height .35s ease, opacity .35s ease, transform .35s ease;
  visibility: hidden;
}

ul.et_mobile_menu ul.clixx-sub.visible {
  max-height: 2000px;
  overflow: visible;
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

ul.et_mobile_menu ul.clixx-sub li {
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity .35s ease, transform .35s ease;
}
ul.et_mobile_menu ul.clixx-sub.visible li {
  opacity: 1;
  transform: translateX(0);
}

@media (min-width: 981px) {
  .et_mobile_menu .mobile-toggle { display: none; }
}


ul.et_mobile_menu ul.clixx-sub {
  margin: 0;
  padding: 0 0 0 16px;
  list-style: none;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-5px);
  transition: max-height .45s cubic-bezier(.22,1,.36,1), opacity .3s ease, transform .35s ease;
  visibility: hidden;
}

ul.et_mobile_menu ul.clixx-sub.visible {
  max-height: 30em;
  overflow: visible;
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}