*,:after,:before{box-sizing:border-box}
body,html{padding:0;margin:0;line-height:1;font-family:arial;background:#f6ffeb;background:linear-gradient(9deg,rgba(255,226,135,0.6) 20%,rgba(45,201,253,.5) 100%)}
h1{font-size:28px;margin:10px;padding:1px}
h2{margin:4px;padding:1px;font-size:21px}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;color:#f3d463}
#logo a{text-shadow:#000 .1em .1em .2em}
#logo{display:inline-block;vertical-align:middle;font-size:30px;margin-right:75px;margin-top:20px;color:#fff}
nav{position:relative;display:inline;margin-left:10%;min-height:35px;width:60%;margin-top:8px;z-index:99}
#menu{margin-top:-250px;margin-left:190px;width:65%;max-width:90%;min-height:54px;font-size:20px;visibility:hidden;transition:all 1s;opacity:0}
#menu ul{display:flex;flex-wrap:wrap;width:200px;list-style:none;background:#a81}
#menu li{min-width:90px;height:34px;border-radius:.4rem;background:#a81}
#menu a{line-height:35px;height:33px;margin:1px;padding:2px 10px;letter-spacing:-1px;color:#fee}
#menu a:hover{background:rgba(30,200,30,.5)}
.drehen{transition:all .5s;display:inline-block;text-rendering:auto;font-size:24px;font-weight:900;color:#fff;text-shadow:#111 2px 2px 4px}
.drehen:hover{transform:rotate(720deg)}
label{display:inline-block;color:#fff;background:#a81;padding:.4rem 3.5rem}
input[type=checkbox]{display:none}
input[type=checkbox]:checked~#menu{visibility:visible;opacity:1;margin-top:0;margin-left:30px}
hr{border:solid red 1px;height:1px}
input{vertical-align:middle}
header{width:100%;background:#acc;background:url(pic01.jpg) center no-repeat;background-size:100%;height:220px}
.main{float:left;width:60%}
aside{float:right;width:30%;margin-top:-20px}
article{width:90%;margin-left:auto;margin-right:auto}
section{border-bottom:2px dotted #999;padding-bottom:6px;margin-bottom:6px}
footer{background:#AEC6CF;max-width:100%;margin:auto;clear:both;text-align:right}
footer p{padding:10px;margin-bottom:10px}
aside > div{margin:6px auto;background:#acc;min-height:90px;padding:10px}
@media screen and (max-width: 600px) {
.main{float:none;width:100%}
aside{float:none;width:100%}
}
@media (min-width:1024px) and (orientation:landscape) {
#menu{width:100%;margin-top:-50px;margin-left:10px;transition:none;visibility:visible;opacity:1}
#menu ul{width:100%;display:flex;justify-content:flex-end;align-items:center;background:transparent}
#menu li a{width:110px;height:43px;padding:6px;margin:2px;color:#333}
#menu ul li{display:inline-block;text-align:center;margin:2px 4px;background:#aadcf5}
label{display:none}
input[type=checkbox]:checked~#menu{margin-top:-12rem;margin-left:0}
article{display:flex;flex-wrap:wrap}
}