*,:after,:before{box-sizing:border-box}
body{margin:0;padding:0;background:#111;font-family:Arial,Helvetica,sans-serif;font-size:100%;color:#da9}
h1,h2,h3{margin:2px;color:#c85}
h1{font-size:30px}
h2{font-size:20px}
p,ul{margin-top:0;line-height:2;text-align:justify}
a{text-decoration:none;color:#fee}
a:hover{color:#eef}
#header{width:90%;margin-left:auto;margin-right:auto}
#menu{margin-top:-250px;max-width:max-content;min-height:54px;background:#311;border-radius:8px;font-size:22px;visibility:hidden;transition:all 1s;opacity:0}
#menu ul{margin:4px;padding:0;list-style:none;}
#menu li{display:block;text-align: center;margin:2px 10px;width:120px;height:45px;border:1px solid #fa3;border-radius:8px 2px;background:linear-gradient(to bottom,rgba(255,250,250,.9) 0,rgba(20,20,20,.6) 100%)}
#menu a {line-height:44px;height:44px;margin:1px;padding:2px;letter-spacing:-1px;color:#ffe;}
#menu a:hover{background:rgba(30,200,30,.5);border-radius:8px 2px}  

article { position:relative; width:90%; margin-left:auto; margin-right:auto;z-index:-1}
#schatten {position:absolute;left:1em;top:.5em;font-size:2.3em;color:#fff;text-shadow:-1px -1px 1px hsl(0deg 88% 56%),-2px -2px 1px hsl(0deg 94% 62%),-3px -3px 1px hsl(43deg 65% 56%),-4px -4px 1px hsl(0deg 0% 0%),-5px -5px 1px hsl(0deg 0% 0%);}
#sidebar{float:left;width:30%;margin:5px 10px;padding:10px 10px}
#sidebar ul{margin:0;padding:0;list-style:none}
#sidebar li{margin:0 20px}
#sidebar p{margin:0;padding:20px;line-height:1}
.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)}
nav{min-height:35px;width:90%;margin-top:20px;z-index:99;}
label{display:inline-block;color:#fff;background:#a81;padding:.4rem 1rem;margin:.4rem 0 0 80%}

input[type=checkbox]{display:none}
input[type=checkbox]:checked~#menu{visibility:visible;opacity:1;margin-top:2px;margin-left:0}
aside{margin:27px 0;padding:20px;text-align:justify}
aside h1,aside h2{margin:0;color:#c85}
aside h1{padding:2px;font-style:italic}

.post{background:url(tasse.jpg) no-repeat left bottom;padding:20px}
.post .title{border-bottom:4px dashed #500}
.post .title a {display:block;padding:0 0 10px;font-weight:700;font-size:28px;color:#adf}
.post .date {display:inline-block;margin:0;padding:0;color:#fff}
.post .entry {padding:10px 0 20px}
.post .links {height:18px;margin:0 0 4px;padding:6px 10px 5px;font-weight:700}

@media (min-width:1024px) and (orientation:landscape) {
#menu{background:0 0;transition:none;visibility:visible;opacity:1;margin-top:0;max-width:480px;margin-left:440px}
#menu ul{width:100%;background:0 0;display:flex;justify-content:flex-end;align-items:center}
#menu li{display:inline-block;text-align:center;margin:2px;width:120px;height:35px}
#menu li a{width:100%;height:30px;padding:2px;margin:2px}
#menu ul li{}
#schatten {position:absolute;left:2em;top:.5em;font-size:2.3em;letter-spacing:.3em;}
label{display:none}
input[type=checkbox]:checked~#menu{margin-top:-52rem;margin-left:0}
article{display:flex;}
article { width: 90%;  display: flex; flex-wrap: wrap;}
.post{background:url(tasse.jpg) no-repeat left bottom;min-height:86vh;padding:20px;width:70%;}
aside{max-width:30%;margin:27px 0;padding:0 0 10px;text-align:justify}
}