body,form,figure{margin:0;padding:0}img{border:0}header,footer,nav,section,aside,article,figure,figcaption{display:block}body{font-size:100.01%}select,input,textarea{font-size:99%}#container,.inside{position:relative}#main,#left,#right{float:left;position:relative}#main{width:100%}#left{margin-left:-100%}#right{margin-right:-100%}#footer{clear:both}#main .inside{min-height:1px}.ce_gallery>ul,.content-gallery>ul{margin:0;padding:0;overflow:hidden;list-style:none}.ce_gallery>ul li,.content-gallery>ul li{float:left}.ce_gallery>ul li.col_first,.content-gallery>ul li.col_first{clear:left}.float_left,.media--left>figure{float:left}.float_right,.media--right>figure{float:right}.block{overflow:hidden}.media{display:flow-root}.clear,#clear{height:.1px;font-size:.1px;line-height:.1px;clear:both}.invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.custom{display:block}#container:after,.custom:after{content:"";display:table;clear:both}
@media (max-width:767px){#wrapper{margin:0;width:auto}#container{padding-left:0;padding-right:0}#main,#left,#right{float:none;width:auto}#left{right:0;margin-left:0}#right{margin-right:0}}img{max-width:100%;height:auto}.audio_container audio{max-width:100%}.video_container video{max-width:100%;height:auto}.aspect,.responsive{position:relative;height:0}.aspect iframe,.responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%}.aspect--16\:9,.responsive.ratio-169{padding-bottom:56.25%}.aspect--16\:10,.responsive.ratio-1610{padding-bottom:62.5%}.aspect--21\:9,.responsive.ratio-219{padding-bottom:42.8571%}.aspect--4\:3,.responsive.ratio-43{padding-bottom:75%}.aspect--3\:2,.responsive.ratio-32{padding-bottom:66.6666%}.aspect--9\:16,.responsive.ratio-916{padding-bottom:177.7777%}.aspect--1\:1,.responsive.ratio-11{padding-bottom:100%}
/* =========================================================
   CONTAO 5.7 – HEADER
   ========================================================= */

#header {
    background: #f8f3ea;
    border-bottom: 1px solid rgba(120, 91, 60, 0.18);
}

#header .inside {
    max-width: 1200px;
    min-height: 100px;
    margin: 0 auto;
    padding: 18px 32px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}


/* Schriftzug / Brand */

.cp-brand {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    line-height: 1;
    white-space: nowrap;
}

.cp-brand-name {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2rem;
    font-weight: 400;
    color: #5c1726;
}

.cp-brand-subtitle {
    margin-top: 9px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: #9b7a4a;
}


/* Contao Navigation */

#header .mod_navigation {
    margin-left: auto;
}

#header .mod_navigation ul {
    display: flex;
    align-items: center;
    gap: 30px;

    margin: 0;
    padding: 0;

    list-style: none;
}

#header .mod_navigation li {
    margin: 0;
    padding: 0;
}

#header .mod_navigation a,
#header .mod_navigation strong {
    position: relative;

    display: block;
    padding: 10px 0;

    color: #3d3230;
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
}

#header .mod_navigation a {
    transition: color 0.2s ease;
}

#header .mod_navigation a:hover {
    color: #7a2033;
}


/* Aktive Seite */

#header .mod_navigation strong {
    color: #7a2033;
    font-weight: 600;
}

#header .mod_navigation strong::after,
#header .mod_navigation a:hover::after {
    content: "";

    position: absolute;
    left: 0;
    right: 0;
    bottom: 3px;

    height: 1px;
    background: #b5965d;
}

/* =========================================================
   MOBILE NAVIGATION
   ========================================================= */

.mobile-menu-module {
    display: none;
}

.menu-toggle {
    width: 44px;
    height: 44px;
    padding: 10px;

    border: 0;
    background: transparent;
    cursor: pointer;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.menu-toggle__line {
    display: block;
    width: 24px;
    height: 2px;

    background: #742b3d;

    transition:
        transform 0.25s ease,
        opacity 0.25s ease;
}


/* ---------------------------------------------------------
   Smartphone / Tablet
   --------------------------------------------------------- */

@media (max-width: 900px) {

    #header .inside {
        position: relative;

        min-height: 82px;
        padding: 0 22px;

        flex-wrap: wrap;
        gap: 0;
    }

    .site-brand__name {
        font-size: 1.45rem;
    }

    .site-brand__subtitle {
        font-size: 0.61rem;
    }


    /* Hamburger anzeigen */

    .mobile-menu-module {
        display: block;
        margin-left: auto;
    }


    /* Navigation zunächst geschlossen */

    .main-navigation {
        width: 100%;
        margin: 0;

        display: none;
    }


    /* Geöffnete Navigation */

    .main-navigation.is-open {
        display: block;
    }


    .main-navigation ul {
        display: block;

        padding: 12px 0 22px;

        border-top: 1px solid rgba(111, 38, 51, 0.12);
    }


    .main-navigation li {
        display: block;
    }


    .main-navigation a,
    .main-navigation strong.active {
        display: block;

        padding: 13px 4px;

        font-size: 0.95rem;
        line-height: 1.3;
    }


    /* Desktop-Unterstreichung mobil entfernen */

    .main-navigation a::after,
    .main-navigation strong.active::after {
        display: none;
    }


    /* Aktiver Menüpunkt */

    .main-navigation strong.active {
        color: #742b3d;
    }


    /* Hamburger wird bei geöffnetem Menü zum X */

    .menu-toggle.is-active .menu-toggle__line:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .menu-toggle.is-active .menu-toggle__line:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle.is-active .menu-toggle__line:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }
}
3. JavaScript

Jetzt brauchen wir die Funktion hinter dem Button. Öffne die bereits hochgeladene

files/christina-pfeifer/js/navigation.js

und ersetze ihren Inhalt sicherheitshalber komplett durch:

document.addEventListener("DOMContentLoaded", function () {

    const button = document.querySelector(".menu-toggle");
    const navigation = document.querySelector(".main-navigation");

    if (!button || !navigation) {
        return;
    }

    button.addEventListener("click", function () {

        const isOpen = navigation.classList.toggle("is-open");

        button.classList.toggle("is-active", isOpen);
        button.setAttribute("aria-expanded", isOpen ? "true" : "false");
        button.setAttribute(
            "aria-label",
            isOpen ? "Navigation schließen" : "Navigation öffnen"
        );
    });


    /* Menü nach Auswahl eines Links schließen */

    navigation.querySelectorAll("a").forEach(function (link) {

        link.addEventListener("click", function () {

            navigation.classList.remove("is-open");
            button.classList.remove("is-active");

            button.setAttribute("aria-expanded", "false");
            button.setAttribute("aria-label", "Navigation öffnen");
        });

    });

});