.elementor-24533 .elementor-element.elementor-element-96b4e15{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-24533 .elementor-element.elementor-element-96b4e15 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-24533 .elementor-element.elementor-element-68f4b5e{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-24533 .elementor-element.elementor-element-68f4b5e > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-24533 .elementor-element.elementor-element-df354f1 .elementor-nav-menu--dropdown{background-color:#02010100;}.elementor-24533 .elementor-element.elementor-element-df354f1 .elementor-nav-menu--dropdown li:not(:last-child){border-style:none;}#elementor-popup-modal-24533 .dialog-widget-content{background-color:#FFFBF0;box-shadow:2px 8px 23px 3px rgba(0,0,0,0.2);}#elementor-popup-modal-24533{background-color:rgba(0,0,0,.8);justify-content:center;align-items:center;pointer-events:all;}#elementor-popup-modal-24533 .dialog-message{width:640px;height:100vh;align-items:flex-start;}#elementor-popup-modal-24533 .dialog-close-button{display:flex;}#elementor-popup-modal-24533 .dialog-close-button i{color:var( --e-global-color-text );}#elementor-popup-modal-24533 .dialog-close-button svg{fill:var( --e-global-color-text );}@media(max-width:767px){.elementor-24533 .elementor-element.elementor-element-a0d3378{text-align:start;}.elementor-24533 .elementor-element.elementor-element-a0d3378 img{width:30%;}.elementor-24533 .elementor-element.elementor-element-df354f1{width:var( --container-widget-width, 326px );max-width:326px;--container-widget-width:326px;--container-widget-flex-grow:0;}#elementor-popup-modal-24533{justify-content:center;align-items:center;}#elementor-popup-modal-24533 .dialog-close-button{top:4.5%;font-size:30px;}body:not(.rtl) #elementor-popup-modal-24533 .dialog-close-button{right:5%;}body.rtl #elementor-popup-modal-24533 .dialog-close-button{left:5%;}}/* Start custom CSS for nav-menu, class: .elementor-element-df354f1 *//* =========================================
   FAMletic Mobile Popup Menu
   Final CSS ohne Kreis um Dropdown-Pfeil
   ========================================= */


/* -----------------------------------------
   Popup / Drawer Grundfläche
   Klasse optional am äußeren Popup-Abschnitt:
   famletic-mobile-drawer
----------------------------------------- */

.famletic-mobile-drawer {
  background: #fffaf0 !important;
  padding: 28px 28px 36px 28px !important;
  box-sizing: border-box !important;
}

/* Elementor Popup Fläche */
.elementor-popup-modal .dialog-widget-content {
  background: #fffaf0 !important;
  border-radius: 0 !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
}

/* Scrollbarer Popup-Inhalt */
.elementor-popup-modal .dialog-message {
  max-height: 100dvh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
}


/* -----------------------------------------
   iOS / Safari Safe-Area Fix
----------------------------------------- */

.famletic-mobile-drawer {
  min-height: auto !important;
  padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important;
}

.mobile-popup-menu {
  padding-bottom: calc(120px + env(safe-area-inset-bottom)) !important;
}

/* Fallback für Browser ohne dvh */
@supports not (height: 100dvh) {
  .elementor-popup-modal .dialog-widget-content {
    max-height: 100vh !important;
  }

  .elementor-popup-modal .dialog-message {
    max-height: 100vh !important;
  }
}


/* -----------------------------------------
   Menü Wrapper
----------------------------------------- */

.mobile-popup-menu {
  width: 100% !important;
  margin-top: 28px !important;
  position: relative !important;
  z-index: 20 !important;
}

/* Grundreset */
.mobile-popup-menu nav,
.mobile-popup-menu ul,
.mobile-popup-menu li {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Elementor Menü-/Dropdown-Wrapper entschärfen */
.mobile-popup-menu .elementor-nav-menu,
.mobile-popup-menu .elementor-nav-menu--dropdown,
.mobile-popup-menu .elementor-nav-menu--dropdown .elementor-nav-menu {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  position: static !important;
  transform: none !important;
  overflow: visible !important;
}

/* Interner Elementor-Menü-Toggle im Popup ausblenden */
.mobile-popup-menu .elementor-menu-toggle {
  display: none !important;
}


/* -----------------------------------------
   Listenstruktur
----------------------------------------- */

.mobile-popup-menu li,
.mobile-popup-menu .menu-item {
  display: block !important;
  width: 100% !important;
  position: relative !important;
  float: none !important;
  clear: both !important;
  overflow: visible !important;
}

/* Hauptmenü-Liste */
.mobile-popup-menu .elementor-nav-menu {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}


/* -----------------------------------------
   Hauptmenü-Punkte
----------------------------------------- */

.mobile-popup-menu .elementor-nav-menu > li > .elementor-item {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  width: 100% !important;

  padding: 14px 16px !important;
  margin: 0 !important;

  background: transparent !important;
  border: 0 !important;
  border-radius: 18px !important;
  box-shadow: none !important;

  color: #c6538b !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
  text-decoration: none !important;

  transition: background-color 180ms ease, color 180ms ease, transform 180ms ease !important;
}

/* Hover/Fokus Hauptpunkte */
.mobile-popup-menu .elementor-nav-menu > li > .elementor-item:hover,
.mobile-popup-menu .elementor-nav-menu > li > .elementor-item:focus {
  background: rgba(198, 83, 139, 0.08) !important;
  color: #a63d72 !important;
}

/* Geöffneter Hauptpunkt */
.mobile-popup-menu .elementor-nav-menu > li > .elementor-item.highlighted,
.mobile-popup-menu .elementor-nav-menu > li > .elementor-item[aria-expanded="true"] {
  background: rgba(198, 83, 139, 0.10) !important;
  color: #a63d72 !important;
}


/* -----------------------------------------
   Dropdown-Pfeil ohne Kreis
----------------------------------------- */

.mobile-popup-menu .sub-arrow {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: auto !important;
  height: auto !important;
  min-width: 0 !important;

  margin-left: 8px !important;
  margin-right: 0 !important;
  padding: 0 !important;

  flex: 0 0 auto !important;

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  color: #c6538b !important;
  fill: #c6538b !important;

  font-size: 12px !important;
  line-height: 1 !important;
}

.mobile-popup-menu .sub-arrow i,
.mobile-popup-menu .sub-arrow svg {
  font-size: 12px !important;
  width: 12px !important;
  height: 12px !important;
  color: #c6538b !important;
  fill: #c6538b !important;
}

/* Geöffneter Punkt: kein Kreis, nur dunklere Pfeilfarbe */
.mobile-popup-menu .elementor-item.highlighted .sub-arrow,
.mobile-popup-menu .elementor-item[aria-expanded="true"] .sub-arrow {
  background: transparent !important;
  box-shadow: none !important;
  color: #a63d72 !important;
  fill: #a63d72 !important;
}


/* -----------------------------------------
   Untermenüs:
   wichtig: position static, damit sie wachsen
   und nicht andere Menüpunkte überlagern
----------------------------------------- */

.mobile-popup-menu .sub-menu,
.mobile-popup-menu ul.sub-menu,
.mobile-popup-menu .elementor-nav-menu .sub-menu,
.mobile-popup-menu .elementor-nav-menu--dropdown .sub-menu {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;

  transform: none !important;
  float: none !important;
  clear: both !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;

  overflow: visible !important;
  z-index: auto !important;

  margin: 6px 0 10px 0 !important;
  padding: 10px 0 10px 18px !important;

  background: rgba(198, 83, 139, 0.055) !important;
  border: 0 !important;
  border-radius: 20px !important;
  box-shadow: none !important;
}

/* Untermenüs standardmäßig geschlossen */
.mobile-popup-menu .menu-item-has-children > .sub-menu {
  display: none !important;
}

/* Nur aktiv geöffnete Untermenüs anzeigen */
.mobile-popup-menu .menu-item-has-children > a.highlighted + .sub-menu,
.mobile-popup-menu .menu-item-has-children > a[aria-expanded="true"] + .sub-menu {
  display: block !important;
}


/* -----------------------------------------
   Untermenü-Links
----------------------------------------- */

.mobile-popup-menu .sub-menu .elementor-sub-item {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  width: 100% !important;

  padding: 10px 14px !important;
  margin: 0 !important;

  background: transparent !important;
  border: 0 !important;
  border-radius: 14px !important;
  box-shadow: none !important;

  color: #c6538b !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  text-decoration: none !important;

  transition: background-color 180ms ease, color 180ms ease !important;
}

/* Untermenü Hover/Fokus */
.mobile-popup-menu .sub-menu .elementor-sub-item:hover,
.mobile-popup-menu .sub-menu .elementor-sub-item:focus {
  background: rgba(198, 83, 139, 0.09) !important;
  color: #9f3d70 !important;
}

/* Keine dunklen Elementor-Aktiv-Balken */
.mobile-popup-menu .elementor-item.highlighted,
.mobile-popup-menu .elementor-sub-item.highlighted,
.mobile-popup-menu .elementor-item-active,
.mobile-popup-menu .sub-menu .elementor-sub-item.elementor-item-active {
  box-shadow: none !important;
}

/* Aktive Unterpunkte weich statt dunkel */
.mobile-popup-menu .sub-menu .elementor-sub-item.highlighted,
.mobile-popup-menu .sub-menu .elementor-sub-item.elementor-item-active {
  background: rgba(198, 83, 139, 0.10) !important;
  color: #9f3d70 !important;
}


/* -----------------------------------------
   Zweite Untermenü-Ebene
----------------------------------------- */

.mobile-popup-menu .sub-menu .sub-menu {
  margin: 4px 0 8px 12px !important;
  padding: 8px 0 8px 12px !important;
  background: rgba(198, 83, 139, 0.045) !important;
  border-radius: 16px !important;
}

.mobile-popup-menu .sub-menu .sub-menu .elementor-sub-item {
  font-size: 16.5px !important;
  padding: 8px 12px !important;
}


/* -----------------------------------------
   Klickbarkeit absichern
----------------------------------------- */

.mobile-popup-menu,
.mobile-popup-menu nav,
.mobile-popup-menu ul,
.mobile-popup-menu li,
.mobile-popup-menu a {
  pointer-events: auto !important;
  cursor: pointer;
}


/* -----------------------------------------
   Optional: Login-Menüpunkt als Button
   Dafür dem Login-Menüpunkt in WordPress
   die CSS-Klasse geben:
   mobile-login-link
----------------------------------------- */

.mobile-popup-menu .mobile-login-link > a {
  margin-top: 18px !important;
  padding: 14px 18px !important;

  background: #c6538b !important;
  color: #ffffff !important;

  border-radius: 999px !important;
  font-weight: 600 !important;
  text-align: center !important;
  justify-content: center !important;

  box-shadow: 0 10px 24px rgba(198, 83, 139, 0.22) !important;
}

.mobile-popup-menu .mobile-login-link > a:hover,
.mobile-popup-menu .mobile-login-link > a:focus {
  background: #a63d72 !important;
  color: #ffffff !important;
}


/* -----------------------------------------
   Kleine Bildschirme
----------------------------------------- */

@media (max-width: 380px) {
  .famletic-mobile-drawer {
    padding: 24px 22px 32px 22px !important;
    padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important;
  }

  .mobile-popup-menu {
    margin-top: 22px !important;
    padding-bottom: calc(120px + env(safe-area-inset-bottom)) !important;
  }

  .mobile-popup-menu .elementor-nav-menu > li > .elementor-item {
    font-size: 20px !important;
    padding: 13px 14px !important;
  }

  .mobile-popup-menu .sub-menu .elementor-sub-item {
    font-size: 17px !important;
  }

  .mobile-popup-menu .sub-arrow,
  .mobile-popup-menu .sub-arrow i,
  .mobile-popup-menu .sub-arrow svg {
    font-size: 11px !important;
    width: 11px !important;
    height: 11px !important;
  }
}/* End custom CSS */