nav {display:block;text-align:center;background:transparent;width:98%;margin-left:auto;margin-right:auto}
label {display:inline-block;color:#fff; background:#158; padding:2px .5rem; margin:.2rem; position:relative; z-index:2;} 
#menu {position:relative; margin-top:-40rem;margin-left:-50rem; visibility:hidden;transition:all 1s;opacity:0;} /* menu unsichtbar */ 
#menu ul {display:inline-block; text-align:center; padding:2px; width:50%;background: rgba(30,100,130,.6);}  
#menu li {list-style-type:none; margin:.2rem; padding:2px;border-radius:10px 3px;background-color:#823;border-bottom:solid #bbb;}  
#menu li a {display:block;text-align:left;text-decoration:none; margin:0; color:#fff;font-size:22px}
#menu li a:hover {background: rgba(30,100,130,.6);}

input[type=checkbox]{display:none;}                                 /* checkbox versteckt */
input[type=checkbox]:checked ~ #menu {visibility:visible;opacity:1;margin-top:2px;margin-left:30px;}      /* schaltet menu ein */

.drehen { transition:all .3s; display:inline-block; text-rendering:auto; font-size:35px; font-weight:600; text-shadow:#666 2px 1px 1px; color: #fff;}  
.drehen:hover {transform:rotate(900deg);}

@media (min-width: 480px) { #menu li a {width:30rem;} }             /* -   ab 480 pixel   - */

@media (min-width: 1024px) {
input[type=checkbox]:checked ~ #menu {margin-top:0; margin-left:0;}  /* -  ab 1024 pixel  - */
label{display:none;}
nav {padding:0;background:transparent;}
#menu {transition:none;visibility:visible;opacity:1;margin-top:0;margin-left:0;}
#menu ul {width:100%;background:transparent;} 
#menu li {display:inline-block;margin:0;}
#menu li a {width:100%; padding:2px 12px;}
}