body, #wrapper,header{width:100%;margin:0;padding:0;}
body{background:#fff; background:linear-gradient(to right,#aaa 0,#eee 50%,#aaa 100%);font-family:Arial,Helvetica,sans-serif;font-size:110%;color:#000}
h1,h2,h3{margin:0;padding:0;font-weight:600;color:#3a5}
h1{font-size:2em}
h2{font-size:2.4em;padding:2px 10px}
h3{font-size:1.6em}
p,ul{margin-top:0;width:100%}
li {width:140px}
a{text-decoration:none;color:#03ed}
a:hover{background:#2f2;color:#000}
#wrapper{width:95%}
#header-wrapper{height:100px;margin-bottom:10px}
header{width:100%;background:#222;overflow:hidden}
#logo{max-width:100%;min-height:80px;margin:0 auto;padding:10px 0 0; color:#3b4}
#logo h1,#logo p{display:block;margin:5px 15px 30px;padding:0}
#logo h1{letter-spacing:10px;text-align:center;font-size:32px;color:#3b4;float:left}
#logo h1 a{color:#7c4;text-shadow: 0 2px 2px #ddd;font-weight:900;}
#logo p{text-align:center;font-size:20px}
#logo a{border:none; color:#3b4}

#page{ margin:5px auto;padding:10px;opacity:.7;background:#eed}
#content{float:right;max-width:96%;padding:10px}
.weiss {color:#fee;padding:2px 10px}
.post{clear:both;padding-bottom:10px;border-bottom:1px solid #ddd}
.post .title{padding-top:10px;letter-spacing:-4px;font-size:40px;color:#3a5}
.post .title a{border:none;color:#3a5}
.post .meta{padding-bottom:10px;text-align:left;font-family:Arial,Helvetica,sans-serif;font-size:11px;font-style:italic}
#sidebar-bg{float:left;width:28%}
#sidebar{overflow:hidden;width:270px;padding:20px}
#sidebar ul{margin:0;padding:0;list-style:none}
#sidebar li{margin:0;padding:0;width:auto}
#sidebar li ul{margin:0;padding-bottom:30px}
#sidebar li li{line-height:35px}
#sidebar li li span{display:block;margin-top:-20px;padding:0;font-size:11px;font-style:italic}
#sidebar h2{height:30px;margin-bottom:38px;padding:6px 0 0;border-bottom:1px solid #faa;letter-spacing:-2px;font-size:30px;color:#3a5}
#sidebar p{margin:0;padding:10px; text-align:justify}
#sidebar a:hover{text-decoration:underline}
#footer{height:70px;background:#444;opacity:.2}
#footer p{margin:0;padding-top:18px;line-height:normal;text-align:center;font-size:16px;color:#aba}
#footer a{color:#7c7}
#splash{width:100%;margin:-5px 0}
#splash img {width:100%;height:auto}
#menu{line-height:28px;letter-spacing:-1px;text-shadow:3px 3px 2px rgba(0,0,0,.8);font-size:22px;color:#fff;
      width:40%;text-align:left;visibility:hidden;transition:all 1s;opacity:1}
@media (min-width:940px) { #menu-wrapper{display:flex} }

.submenu{position:absolute;top:60px;right:18%;z-index:0;perspective:600px}
.submenu li{opacity:1;transform:rotateY(90deg);transition:opacity .4s,transform .5s;border:1px solid #9f8;border-radius:8px;text-align:center;padding:5px 0}
.submenu ul{margin-top:20px;left:-50px}
.menu>li:focus .submenu, .menu>li:hover .submenu{max-height:2000px;z-index:10;}
.menu>li:focus .submenu li,.menu>li:hover .submenu li{opacity:1;transform:none;background:#111;padding:3px 0}
.menu .submenu li:hover a{color:#fff;background:#a11}
nav{position:relative;top:-15px;margin-left:80px}
nav{height:2rem;width:98%;float:left;margin:2px 0 0 20px; z-index:99}
.drehen{transition:all .5s;display:inline-block;font-size:24px;font-weight:900;color:#fff}
.drehen:hover{transform:rotate(900deg)}
label{display:inline-block;color:#fff;background:#871;padding:.2rem .5rem;margin:1rem;font-size:x-large}

#menu-wrapper{margin:0;padding:0;background:#2a2;height:50px;}
#menu{line-height:28px;letter-spacing:-1px;text-shadow:3px 3px 2px rgba(0,0,0,.8);font-size:20px;color:#fff;
      width:100%;text-align:left;visibility:hidden;transition:all 1s;opacity:1;margin-left:-50px}
ul{margin-top:0; width:100%}
#menu ul{display:inline-block;padding:5px;width:min-content;}
#menu li{list-style-type:none;margin:.1rem;padding:5px 0;background:linear-gradient(#333,#555);border-radius:8px;text-align:center}
#menu li a{text-align:center;padding:5px 0;color:#fff;border-radius:4px;font-size:110%}
#menu li a:hover{background:rgba(30,200,30,.7)}
input[type=checkbox]{display:none}
input[type=checkbox]:checked~#menu{visibility:visible;opacity:1}

@media (min-width:480px) { #menu li a{width:100%;padding:4px } }

@media (min-width:1024px) {
#content{float:right;max-width:62%;padding:10px}
#menu{transition:none;visibility:visible;opacity:1;margin-left:0;width:80%;margin-left:auto;margin-right:auto}
nav{width:90%; margin-left:130px; padding:1rem 0;text-align:center}
label{display:none}
.menu ul{background:0 0}
.menu li{display:inline-block;margin:0}
.menu li a{width:100%;padding:5px 0}
.submenu{right:25%}
.submenu li{opacity:0}
input[type=checkbox]:checked~#menu{margin-top:0;margin-left:0}
}
.top { font-size:26px;position:sticky;bottom:40px;--offset:100px;margin-top:calc(100vh + var(--offset));margin-left:91%;}