nav {position:relative;left:110px;text-align:right; max-width:max-content; height:50px; margin:0 1% 1px 20%; z-index:99}           /* Container-MENU */
nav {padding:1px 20px; box-shadow:1px 2px 10px #fff, -1px -2px 10px #fff}
nav label{color:#fff;background:#800;padding:.2rem .5rem;margin:.2rem;float:right;border-radius:2px 6px;}  /* Hamburger-MENU */

#menu{width:100%;margin-top:-10rem;margin-left:-10rem;display:hidden;transition:all .5s;opacity:0;border-radius:2px 6px; z-index:99}
#menu ul{display:block;background:rgba(255,255,255,.6);margin-left:-180px;padding:2px;width:170px;}
#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:rgba(30,200,30,.7)}

input[type=checkbox]{display:none;float:left}                              /* Hilfselement-MENU */
input[type=checkbox]:checked~#menu{visibility:visible;opacity:1;margin:0}  /* sichtbar wenn kleiner Monitor */

.drehen{transition:all .3s;display:inline-block;font-size:24px;font-weight:900;color:#fff;text-shadow:#111 2px 2px 4px}
.drehen:hover{transform:rotate(720deg)}  
/*
@media (max-width:768px) {
nav {transform:skew(-20);width:40%;margin-right:-250px; text-align:right}
#menu ul{width:100%;}
}
*/
@media (min-width:1024px) {
nav{margin: 0 1vw 0 28vw;padding:6px;transform:skew(-20deg);}       /* Container-MENU */
nav label{display:none}     /* Hamburger-MENU */
input[type=checkbox]:checked~#menu{margin-top:0;margin-left:0}   /* Hilfselement-MENU */    
#menu     {display:block;background:0 0;transition:none;visibility:visible;opacity:1;margin:0}
#menu ul  {background:0 0; margin:2px 0 0 2px;width:100%}
#menu li  {display:inline-block;margin:0 4px}
#menu li a{width:100%;padding:4px 8px}
}