/* ===================================================================
   wb-nav.css
   Modernes Navigationsmenü als Ersatz für ddsmoothmenu (Dynamic Drive)
   Keine jQuery-Abhängigkeit. Desktop: horizontale Leiste.
   Mobil (<= 768px): Hamburger-Button klappt Liste auf/zu.
   =================================================================== */
#wb-nav {
    background-color: #416E36;               /* Fallback, falls Bild nicht lädt */
    background-image: url('https://monika-klueber-ott.de/images/bg-navi2-gruen.jpg'); /* TODO: Pfad zu deinem Bild anpassen */
    background-repeat: repeat-x;             /* Bild wiederholt sich horizontal */
    background-size: auto 100%;              /* Bildhöhe = Leistenhöhe, Breite proportional */
    width: 100%;
    box-sizing: border-box;
}
#wb-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}
#wb-nav li {
    margin: 0;
    border-right: 1px solid rgba(255,255,255,0.3);
}
#wb-nav li:last-child {
    border-right: none;
}
#wb-nav a {
    display: block;
    padding: 12px 18px;
    color: #ffffff;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    white-space: nowrap;
}
#wb-nav a:hover,
#wb-nav a:focus {
    background: #2f5f26;
}
/* ===================================================================
   Sofort-Fix: Bilder auf dem Handy nicht breiter als der Bildschirm
   (Übergangslösung, bis das Tabellen-Layout komplett modernisiert ist)
   =================================================================== */
img {
    max-width: 100%;
    height: auto;
}
@media (max-width: 768px) {
    input,
    select,
    textarea {
        max-width: 100%;
        box-sizing: border-box;
    }
}
/* Hamburger-Button: standardmäßig unsichtbar, nur auf Mobil sichtbar */
#wb-nav-toggle {
    display: none;
    background-color: #416E36;
    background-image: url('images/nav-bg.jpg');
    background-repeat: repeat-x;
    background-size: auto 100%;
    border: none;
    color: #ffffff;
    font-size: 24px;
    padding: 10px 16px;
    cursor: pointer;
    width: 100%;
    text-align: left;
}
/* ===================================================================
   Mobile Ansicht
   =================================================================== */
@media (max-width: 768px) {
    #wb-nav-toggle {
        display: block;
    }
    #wb-nav ul {
        flex-direction: column;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }
    #wb-nav.wb-nav-offen ul {
        max-height: 600px; /* ausreichend hoch für alle Menüpunkte */
    }
    #wb-nav li {
        border-right: none;
    }
    #wb-nav a {
        border-top: 1px solid rgba(255,255,255,0.25);
    }
}