/* mobile-menu.css */
/* Mobile-spezifische Menü-Styles für Bildschirme bis 768px */

@media (max-width: 768px) {

  /*--------------------------------------------
    1) Submenüs zurücksetzen & verstecken
    – fixed-Position & alte Rahmen entfernen
    – immer display: block, aber per max-height ausblenden
  --------------------------------------------*/
  .main-navigation .sub-menu,
  .main-nav ul ul {
    position: static !important;
    top: auto !important;
    left: auto !important;
    z-index: auto !important;

    display: block !important;
    max-height: 0 !important;
    overflow: hidden !important;

    border: none !important;
    padding: 0 !important;
    margin: 0 !important;

    background: #fcf2e8 !important;
    transition: max-height 0.4s ease !important;
  }

  /*--------------------------------------------
    2) Eltern-Element für Submenü: Position & Abstand
  --------------------------------------------*/
  .main-navigation li.menu-item-has-children {
    position: relative;
    margin-bottom: 12px;
  }

  /*--------------------------------------------
    3) Submenü einblenden, wenn .submenu-open
    – max-height groß genug für Einträge
    – Rahmen & Padding für Lesbarkeit
  --------------------------------------------*/
  .main-navigation li.menu-item-has-children.submenu-open > .sub-menu {
    max-height: 500px !important;
    overflow: visible !important;
    padding: 6px !important;
    margin-top: 6px !important;

    border: 1px solid #f7a141 !important;
    border-radius: 6px !important;
  }

  /*--------------------------------------------
    4) Hamburger-Button: Größe, Rahmen, Hover
  --------------------------------------------*/
  .menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 5px;
    border: 2px solid #000 !important;
    border-radius: 8px;
    background: #fcf2e8 !important;
    color: #333 !important;
    font-size: 16px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    cursor: pointer;
    transition: background 0.3s, border-color 0.3s, color 0.3s;
  }

  .menu-toggle:hover {
    background: #f7a141 !important;
    border-color: #f7a141 !important;
    color: #fff !important;
  }

  .menu-toggle svg,
  .menu-toggle i,
  .menu-toggle .gp-icon {
    height: 24px !important;
    vertical-align: middle;
  }

  /*--------------------------------------------
    5) Hauptmenü-Container beim Ausklappen
  --------------------------------------------*/
  .main-navigation.toggled .main-nav {
    background: #fcf2e8 !important;
    padding: 12px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
  }
  
  
  /* Stelle sicher, dass GeneratePress sein Pfeil-Button nicht versteckt */
  .main-navigation .sub-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto; /* erlaubt Klicks */
  }

  /* Positioniere das Icon rechts im Menüpunkt */
  .main-navigation li.menu-item-has-children {
    position: relative;
  }
  .main-navigation .sub-menu-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
  }
  
}