*, *:before, *:after {box-sizing:inherit}  
html { background:#151;margin:0;padding:0; overflow-x:hidden}

body { font-family:Arial,Verdana,sans-serif; color:#fff;width:99vw; font-size:100%;margin:0;padding:0; }  
header {position:absolute;top:0; left:0; width:99vw;background:#00f;height:30px;}
#logo {position:absolute; top:0; left:0;width:100%; float:left;background:#000;z-index:1;}
#schatten {margin:-2px 0;padding:12px;letter-spacing:.2em; color:#fff; text-shadow: -1px -1px 1px hsl(0,0%,30%), -2px -2px 1px hsl(0,0%,35%), -3px -3px 1px hsl(0,0%,40%),
                 -4px -4px 1px hsl(0,0%,50%), -5px -5px 1px hsl(0,0%,60%)}

nav {position:absolute;width:99vw; height:30px; z-index:99;}     /* Container-MENU */  
nav label{color:#fff;padding:.2rem .5rem;margin:.2rem;float:right;border-radius:2px 6px;}  /* Label Hamburger-MENU */
li{list-style-type:none;margin:2px 3px;min-width:120px; font-size:22px;border:1px dotted #f88;border-radius:2px 6px; text-align:center }
footer li{font-size:22px;border:1px solid #0ff;border:none;}
a{text-align:center;text-decoration:none;color:#aaf;font-size:100%;}
a:hover{background:rgba(30,10,30,.7)}

#menu{width:90%;display:flex;transition:all .5s;opacity:0;border-radius:2px 6px; z-index:88}
#menu ul{display:flex;flex-wrap:wrap; flex-direction:column; margin:1px; padding:1px;}
#menu li a{display:block;padding:6px 3px;background:#333;color:#fff}
#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:28px;font-weight:900;color:#fff;text-shadow:#111 2px 2px 4px}
.drehen:hover{transform:rotate(720deg)}

@media (min-width:1024px) {
nav{margin: 0 1vw 30px 48vw;padding:6px;}       /* Container-MENU */
nav label{display:none}     /*  none  Hamburger-MENU */
input[type=checkbox]:checked~#menu{margin-top:0;margin-left:0}   /* Hilfselement-MENU */    
#menu     {display:block;transition:none;visibility:visible;opacity:1;margin:0}
#menu li  {margin:0 4px;min-width:130px;}
#menu ul{width:90%;display:flex;flex-direction:row; margin:1px; padding:1px;}
}

@media screen and (max-width:980px) {
.wrapper {  padding:8rem 0 6rem 0;  position:relative; }
.row { display:flex; flex-wrap:wrap; box-sizing:border-box; }
.row > * {  box-sizing:border-box; }
}

@media screen and (max-width:1280px) { .wrapper {margin:8rem 0 2rem 0 ; } }
@media screen and (max-width:736px)  { .wrapper {padding:3rem 0 1rem 0 ; } }

footer{display:flex; flex-wrap:wrap; margin:20px; padding:10px}
footer>*{flex:1 1 280px}
footer section {border:1px solid #6a6; border-radius:2px 6px; margin:10px 0 0 20px; padding:10px}