/* Viewport kleiner 768px */
@media screen and (max-width: 767px) {
    .nav--mobile {
        max-height: 0;
        visibility: hidden;
        transition: max-height 0.3s, background 0.3s;
        background: transparent;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        font-size: 1.25rem;
        z-index: 1;
        padding-top: 100px;
    }

    .nav--mobile--active {
        max-height: 100%;
        transition: max-height 0s, background 0.3s;
        background: rgba(41,44,55,0.75);
        visibility: visible;
    }

    .nav--mobile--active li {
        opacity: 1;
        list-style: none;
        margin: 0;
    }

    .nav--mobile--active li a,
    .nav--mobile--active li strong {
        color: #ffffff;
        text-decoration: none;
        padding: 6px;
        display: inline-block;
    }

    .nav--mobile--active li .active,
    .nav--mobile--active li .trail {
        background: #db901a;
    }

    .nav-toggler {
        float: right;
        position: absolute;
        top: -50px;
        right: 0;
        z-index: 2;
    }

    .nav-toggler__button {
        background: #2a639a;
       /* border: 2px solid #292c37;*/
        outline: none;
        color: #fff;
        padding: 0 3rem;
        box-shadow: none;
    }
    .nav-toggler__button:hover,
    .nav-toggler__button:focus
    {
        background: #292c37;
        color: #ffffff;
        border: 2px solid #fff;
    }
}

/* Viewport ab 768px */
@media screen and (min-width: 768px) {
    .nav-toggler {
        display: none;
    }
}