:root header {
    --mobile-menu-text-color: var(--color-white);
    --mobile-menu-text-color-active: var(--color-white);
    --mobile-menu-background: var(--color-darker-red);
    --mobile-menu-background-active: var(--color-red);
    --mobile-menu-head-background: var(--color-white);
    --mobile-menu-head-text-color: var(--color-red);
}

@media (min-width: 63.01rem) {

    #menu-button { display: none; }

    #main-menu { display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; margin: .75rem 0; }
    #main-menu :is(ul, li) { margin: 0; list-style-type: none; }
    #main-menu li { position: relative; }


    #main-menu .mainmenu { display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; margin: 0; gap: 2rem; }
    #main-menu .mainmenu > li > a:hover { color: var(--color-red); }
    #main-menu .mainmenu > li > a { position: relative; display: block; text-decoration: none; text-transform: none; color: var(--color-text); padding: .25rem .5rem; font-size: 1.25rem; font-weight: normal; }
    #main-menu .mainmenu > li > a:after { content: ''; position: absolute; display: block; width: 0; transition: width .3s ease; left: .5rem; bottom: 0; height: .125rem; background: var(--color-red); }
    #main-menu .mainmenu > li.selected > a:after, #main-menu .mainmenu > li > a:hover:after { width: calc(100% - 1rem); }

    #main-menu .submenu .selected > a { font-weight: bold; }

    #main-menu .submenu { position: absolute; display: block; flex-flow: column nowrap; justify-content: center; align-items: stretch; visibility: hidden; overflow: visible; opacity: 0; top: 100%; left: -.5rem; z-index: 1; min-width: calc(100% + 1rem); box-sizing: border-box; padding: 1.75rem 1rem 1rem 1rem; color: var(--color-white); font-size: 1rem; transition: visibility .3s, opacity .3s ease; filter: drop-shadow(0 0 1rem rgba(0, 0, 0, .125)); }
    #main-menu .submenu:before { content: ''; position: absolute; left: 0; top: .75rem; width: 100%; height: calc(100% - .75rem); background: var(--color-white); z-index: 0; }
    #main-menu li:hover > .submenu, #main-menu li:focus-within > .submenu { visibility: visible; opacity: 1; }
    #main-menu .submenu .submenu { left: calc(100% ); top: -1rem; }
    #main-menu .submenu > li { line-height: 1.1; word-wrap: break-word; overflow-wrap: break-word; white-space: nowrap; }
    #main-menu .submenu > li:not(:last-child) { margin-bottom: .75em; }
    #main-menu .submenu > li:has(.submenu) { padding-right: 1.5em; }
    #main-menu .submenu > li:has(.submenu):after { content: ''; position: absolute; width: 1em; height: 1em; background-image: url("../files/design/pfeil-schwarz.svg"); background-position: center right; background-size: contain; background-repeat: no-repeat; right: 0; }
    #main-menu .submenu > li > a { color: var(--color-text); text-decoration: none; word-wrap: break-word; overflow-wrap: break-word; }
    #main-menu .submenu > li > a:hover { color: var(--color-red); }
}

@media (max-width: 63rem) {

    #menu-button {
        flex: 0 0 auto;
        position: relative;
        display: block;
        width: 3.125rem;
        height: 3.125rem;
        cursor: pointer;
        text-align: center;
        color: var(--color-link);
        background: var(--color-white, #FFFFFF);
        border: 0;
        border-radius: .125rem;
        margin: 0;
        padding: 0;
        z-index: 99;
    }
    #menu-button .text {
        position: absolute;
        overflow: hidden;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        clip: rect(0, 0, 0, 0);
    }
    #menu-button .bar {
        position: absolute;
        display: block;
        width: 80%;
        height: 10%;
        top: 50%;
        margin-top: -5%;
        margin-left: 10%;
        border-radius: 1px;
        background: var(--color-red);
        transition: all .3s ease-in-out 0s;
        transform: rotate(0deg);
    }
    #menu-button .bar:nth-child(2) { margin-top: -25%; }
    #menu-button .bar:nth-child(4) { margin-top: 15%; width: 60%; }
    #menu-button:hover .bar:nth-child(3) { margin-left: 15%; }
    #menu-button.opened .bar:nth-child(2) { margin-top: -5%; transform: rotate(-45deg); }
    #menu-button.opened .bar:nth-child(3) { opacity: 0; }
    #menu-button.opened .bar:nth-child(4) { margin-top: -5%; transform: rotate(45deg); width: 80%; }

}