@media screen and (max-width: 768px) {
    .overlay.menu-on {
        background: rgba(0, 0, 0, 0.7);
        min-height: 100vh;
        max-height: 200vh;
        width: 100%;
        position: absolute;
        z-index: 9999;
    }
    .top-bar--navigation {
        background: #fff;
        padding: 0 10px;
        margin: 0;
        height: 100vh;
    }
    .top-bar--navigation li {
        border-bottom: 1px solid #dadae5;
        font-size: 14px;
    }
    .top-bar--navigation li:first-child {
        padding: 60px 0 0 0;
    }
    #wrapper {
        position: absolute;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    label {
        cursor: pointer;
    }
    label:focus {
        outline: none;
    }
    .menu {
        position: absolute;
        top: 0;
        left: 0;
        width: 240px;
        height: 100%;
        transform: translate3d(-240px, 0, 0);
        -webkit-transform: translate3d(-240px, 0, 0);
        -moz-transform: translate3d(-240px, 0, 0);
        -ms-transform: translate3d(-240px, 0, 0);
        -o-transform: translate3d(-240px, 0, 0);
        transition: transform 0.35s;
        -webkit-transition: transform 0.35s;
        -moz-transition: transform 0.35s;
        -ms-transition: transform 0.35s;
        -o-transition: transform 0.35s;
    }
    .burger-menu {
        position: relative;
        margin: 0 0 0 10px;
        width: 100px;
        height: 40px;
        cursor: pointer;
    }
    .burger-menu > img {
        display: inline-block;
    }
    .burger-menu > span {
        display: inline-block;
        font-size: 17px;
        font-weight: bold;
        padding: 6px 0 0 7px;
        color: #522a27;
        vertical-align: top;
    }
    .menu label .burger-menu {
        position: absolute;
        right: -120px;
        width: 100px;
        margin-top: 25px;
        display: block;
    }
    .menu ul li a,
    .menu ul li label {
        display: block;
        text-align: left;
        padding: 0 20px;
        line-height: 48px;
        text-decoration: none;
        color: #522a27;
    }
    .menu ul li a:hover,
    .menu ul li label:hover {
        color: rgba(82, 42, 39, 0.8);
    }
    /* hide inputs */
    .menu-checkbox {
        display: none;
    }
    /* hide navigation icon for sublabels */
    .menu .menu label.menu-toggle {
        background: none;
    }
    /* fade in checked menu */
    .menu-checkbox:checked + .menu {
        transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
    }
    .menu-checkbox:checked + .menu label .burger-menu {
        background: linear-gradient(to bottom, #522a27 0%, #1e0f0e 100%);
        height: 50px;
        left: 0;
        margin: 0;
        padding: 7px 0 0 20px;
        right: auto;
        width: calc(100% - 20px);
    }
    .menu-checkbox:checked + .menu label .burger-menu img {
        display: none;
    }
    .menu-checkbox:checked + .menu label .burger-menu span {
        color: #fff;
        font-size: 14px;
    }
    .menu-checkbox:checked + .menu label .burger-menu span:after {
        color: #fff;
        content: ' schließen ❭';
    }
}