@charset "utf-8";
/* CSS Document */


:root {
    --color-primary: #1259a7;
    --color-primary-dark: #0b3d75;
    --color-menulink: #666666;
    --color-menulink-hover: #111;
    --menulink-aktiv: rgba(0,0,0,0.075);
}

.navi {position: absolute; left: 120px; bottom: 15px;}
.navi ul {list-style: none; margin: 0; padding: 0;}
.navi ul li {float: left; margin-right: 4px; letter-spacing: 0.1em; text-transform: uppercase; font-size: 16px; line-height: 16px; display: table; cursor: pointer; color: var(--color-menulink)!important; box-sizing: border-box; padding: 8px 10px 5px 10px;}
.navi ul li a {text-decoration: none; color: var(--color-menulink);} 

.navi .mod-menu__toggle-sub {
    color: var(--color-menulink);
    font-family: inherit;
    font-size: 16px;
    line-height: 16px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
}

.navi .mod-menu__toggle-sub:hover,
.navi .mod-menu__toggle-sub:focus,
.navi ul li a:hover {color: var(--color-menulink-hover);}

.navi ul li.active {background-color: var(--menulink-aktiv);}

.navi .icon-chevron-down {font-size: 10px; margin: -4px 0 0 4px;}

/* Untermenüs auf Desktop per Hover öffnen */
@media (hover: hover) and (pointer: fine) {

    .navi .mod-menu > .parent {
        position: relative;
    }

    .navi .mod-menu__sub {
        display: none !important;
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1000;

        min-width: 260px;
        padding: 15px 0;
        background: #fff;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    }

    /* Per Maus und Tastatur öffnen */
    .navi .parent:hover > .mod-menu__sub,
    .navi .parent:focus-within > .mod-menu__sub {
        display: block !important;
    }

    /* Einträge im Untermenü untereinander */
    .navi .mod-menu__sub > li {
        float: none;
        position: relative;
        width: 100%;
        margin: 0;
    }

    .navi .mod-menu__sub > li > a,
    .navi .mod-menu__sub > li > span {
        display: block;
        width: 100%;
        padding: 10px 20px;
        box-sizing: border-box;
        white-space: nowrap;
    }

    /* Untermenü der zweiten Ebene */
    .navi .mod-menu__sub .mod-menu__sub {
        top: 0;
        left: 100%;
    }
}