/* Base menu styles - shared across all themes */

.menu-handler,
.header-helper {
    display: none;
}

.main-menu>div {
    margin-right: calc(2 * var(--einheit));
    margin-top: var(--einheit);
    margin-bottom: var(--einheit);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: calc(100% - (2 * var(--einheit)));
    align-items: flex-end;
}

/* Mobile menu handler */
@media (max-width: 768px) {

    .menu-handler {
        position: fixed;
        top: var(--einheit);
        right: var(--einheit);
        background: var(--blue);
        width: 35px;
        height: 35px;
        z-index: 999;
        display: block;
        border-radius: var(--borderradius);
        border: 2px solid var(--blue);
    }
    
    .menu-handler span {
        position: absolute;
        transition: 0.2s;
        top: 16px;
        left: 4px;
        height: 3px;
        width: 27px;
        border-radius: 10px;
        background: white;
    }

    .menu-handler span:first-child {
        top: 7px;
    }
    
    .menu-handler span:last-child {
        top: 25px;
    }

    body.menu-layer-active .menu-handler span:first-child {
        transform: rotate(45deg);
        top: 16px;
    }

    body.menu-layer-active .menu-handler span:nth-child(2) {
        opacity: 0;
    }

    body.menu-layer-active .menu-handler span:last-child {
        transform: rotate(-45deg);
        top: 16px;
    }

    .main-menu {
        position: fixed;
        z-index: 911;
        width: 100%;
        background: var(--blue);
        display: none;
    }

    body.menu-layer-active .main-menu {
        display: flex;
    }

    body.menu-layer-active .dialog-off-canvas-main-canvas > header .logo {
        position: fixed;
        z-index: 998;
    }

    .main-menu>div {
        margin: calc(var(--einheit) * 10) auto calc(var(--einheit) * 2) auto;
        width: calc(100% - var(--einheit) * 2);
        height: auto;
        align-items: flex-start;
        display: flex;
        flex-direction: column;
    }
}