/* Container & Layout */
#menu_wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Calibri, sans-serif;
    background-color: transparent;
    padding-top: 0rem;
    padding-left: 0.75rem;   /* Abstand zum Browserrand links */
    padding-right: 0.75rem;  /* Abstand zum Browserrand rechts */
    padding-bottom: 0.5rem;
    position: relative;
    z-index: 10;         /* höher als Header / Bild */
    max-width: 800px;  /* auf großen Bildschirmen max. 800px */
    width: 100%;       /* immer volle Breite auf kleinen Bildschirmen */
    height: auto;      /* Höhe automatisch */
    margin: 0 auto;
    background-color: white;
}

/* Graue Linien links und rechts */
#menu_wrapper::before,
#menu_wrapper::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: #CCCCCC;
    display: block;
    margin: 0 0rem;
}

/* Top-Level Menü */
.menu-item {
    position: relative;
    margin: 0 0.25rem;
}

.menu-item > a {
    display: block;
    padding: 0.25rem 0.5rem;
    background-color: #74B637;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    font-size: clamp(14px, 2vw, 20px);
}

.menu-item > a:hover {
    background-color: #FF6A00;
}


/* Auf kleinen Bildschirmen öffnet Kontakt nach links und verhindert so seitliches Scrollen */
@media (max-width: 600px) {
    .menu-item:last-child .submenu {
        left: auto;
        right: 0;
        max-width: 100vw; /* Sicherheit, damit nichts über den Bildschirm ragt */
    }
}



/* =========================
   2. Ebene (per Klick)
   ========================= */

/* Wrapper für Höhe im Fluss */
.submenu-wrapper {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.4s ease;
    opacity: 0;
    pointer-events: none;  /* verhindert, dass ausgeblendete Menüs Klicks blockieren */
}

/* Submenu selbst bleibt absolut */
.submenu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #74B637;
    min-width: 100%;
    width: max-content;
}

.submenu-wrapper.open {
    opacity: 1;
    max-height: 1000px; /* ausreichend groß */
    pointer-events: auto;  /* wieder aktivieren */
}

.submenu-item > a {
    display: block;
    padding: 0.25rem 1rem;
    color: #fff;
    text-decoration: none;
    font-size: clamp(14px, 2vw, 18px);
width: 100%;
}

.submenu-item > a:hover {
    background-color: #FF6A00;
}

/* =========================
   3. Ebene (nur per Klick)
   ========================= */
.subsubmenu {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    background-color: #5a8e2c;
    padding-left: 1rem;
    transition: max-height 0.8s ease, opacity 0.8s ease;
}

.subsubmenu.open {
    max-height: 1000px;
    opacity: 1;
    white-space: nowrap;   
}

.subsubmenu a {
    display: block;
    padding: 0.25rem 0rem;
padding-right: 1rem;
    color: #fff;
    text-decoration: none;
    font-size: clamp(13px, 2vw, 16px);
}

.subsubmenu a:hover {
    background-color: #FF6A00;
}