nav{position:relative;left:140px;text-align:right;max-width:fit-content;height:50px;z-index:99;padding:1px 20px;
    box-shadow:1px 2px 10px #fff,-1px -2px 10px #fff; margin:60px -10px 0 -20px;}
nav label{color:#fff;background:#800;padding:.2rem .5rem;margin:.2rem;float:right;border-radius:2px 6px}
#menu{width:100%;margin-top:-110rem;margin-left:-10rem;transition:all .5s;opacity:0;border-radius:2px 6px;z-index:99}
#menu ul{display:block;background:#fff;margin-left:-140px;margin-top:60px;padding:2px;}
#menu ul ul{display:none}
#menu li a{display:block;text-align:center;text-decoration:none;padding:8px;background:#800;color:#fff;font-size:100%}
#menu li a:hover{background:#1ec81e}
input[type="checkbox"]{display:none;float:left}
input[type="checkbox"]:checked ~ #menu{visibility:visible;opacity:1;margin:0}
.drehen{transition:all .3s;display:inline-block;font-size:24px;font-weight:900;color:#fff;text-shadow:2px 2px 4px #111}
.drehen:hover{transform:rotate(720deg)}
@media (min-width: 1024px) {
nav{margin:10px 1vw 0 28vw;padding:6px;transform:skew(-10deg)}
nav label{display:none}
input[type="checkbox"]:checked ~ #menu{margin-top:0;margin-left:0}
#menu{display:flex;background:none;transition:none;visibility:visible;opacity:1;margin:0}
#menu ul{background:none;margin:2px 0 0 2px;width:100%}
#menu li{display:inline-block;margin:0 4px}
#menu li a{width:100%;padding:4px 8px}
}