@font-face {font-family:"tangerine"; src:url(tangerine.woff2) format("woff2"); }
html{height:100%;}
*{margin:0;padding:0;}
body{font:normal .82em 'trebuchet ms', arial, sans-serif;background:#fff url(pattern.png) fixed;color:#000; line-height:1.5}
p{line-height:1.5em;font-size:100%;padding:0 0 6px;}
h1,h3,h5{font:normal 200% 'tangerine', arial, sans-serif;color:#111;margin:0 0 15px;padding:5px 0;}
h3{font-size:150%;color:#a21;margin:0 0 9px;}
h5{margin:0;padding:0 0 5px;}
h5{font:italic 95%;padding-bottom:15px;}

a,a:hover{text-decoration:none;color:#3bf;}
a:hover{text-decoration:underline;}
.slogan {font:400% 'tangerine', arial; color:#111;font-weight:800}
ul{margin-top:-20px}
ul li{list-style-type:none;margin:0;padding:0 0 4px 5px;width:120px}
header,#logo,article,#footer{margin-left:auto;margin-right:auto;}
header{width:96%;min-height:100px;}
#logo{width:96%;display:flex;background:transparent;padding:15px 0 4px 10px;}

nav{width:94%;text-align:right;margin:0 auto;padding:0;min-height:152px;}

article{width:90%;overflow:hidden;background:#fff;border:1px solid #aaa;margin:0 auto;padding:0;font-size: 120%;}
#snow {position:absolute;top:30px;left:20px;height:120px;width:120px;}
address {position:absolute;margin:-14px 0 0 10px;font-size:110%}


li, ul{margin:0;padding:0;list-style:none}
nav {min-height:25px; text-align:right; width:90vw; margin:-25px 0 40px; z-index:99;}
label {display:inline-block;color:#fff; background:#a81; padding:.4rem 1rem; margin:.4rem;border:2px solid #17e;border-radius:8px 0;}
/* menu unsichtbar */

#menu ul li {text-align:center}
.drehen { transition:all .5s; display:inline-block; text-rendering:auto; font-size:24px; font-weight:900; text-shadow:#666 2px 1px 1px; color: #fff;}  
.drehen:hover {transform:rotate(900deg);}
label {display:inline-block;color:#000; background:#def; padding:.2rem .5rem; margin:-40px 0; z-index:2;font-weight:900;}
                                                                                                        /* menu unsichtbar */
#menu {width:100%; position:relative; margin-top:-18rem;margin-left:-20rem; visibility:hidden;transition:all 1s;opacity:0;}  
#menu ul {display:inline-block; text-align:center; margin:0; padding:2px; width:60%;}  
#menu li {display:inline-flex;list-style:none;height:45px;margin:2px 6px;padding:0;border:1px solid #5ff;border-radius:8px 0;background:linear-gradient(to bottom, rgba(255,255,255.5) 0%,  rgba(200,200,200,1) 100%);}
#menu li a {font:normal 170% 'verdana', sans-serif;text-decoration:none;color:#444;float:left;height:35px;text-align:center;padding:7px 23px 10px;}
#menu li a:hover   { color:#1b1;}

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

#sidebar{float:right;margin:20px;}
aside {background:#eee;border:1px solid #fee;margin:0 24px 15px 0;padding:0 15px 15px;}
aside h3{margin:0 1px;padding:10px 15px;}
aside h1{padding:5px 0 0;}

#content {text-align:left;min-width:70%;margin:0;padding:25px;}
#footer{clear:both;width:100%;font:normal 150% 'verdana', arial, sans-serif;height:85px;text-align:center;color:#555;background:transparent;margin-bottom:20px;padding:20px 0 5px;}
#footer a:hover{color:#28a;text-decoration:none;}
.form_settings{margin:5px 0 0;}
.form_settings span{float:left;width:170px;text-align:left;padding:5px 0;}
.form_settings input,.form_settings textarea{min-width:90%;border:1px solid #eee;background:#eee;color:#000;padding:5px 10px;}
.form_settings .submit{max-width:200px;font-size:130%;color:#28a;border:1px solid #ddd;background:#ccf;margin:0 0 0 10px;padding:5px;}
.form_settings textarea{font:100% 'trebuchet ms', arial;border:1px solid #eee;background:#eee;width:90%;overflow:auto;padding:5px 10px;}
.search{border:1px solid #eee;width:189px;color:#F14E23;margin:0;padding:10px 5px;}
.subscribe{color:#35BDF5;border:1px solid #ddd;background:#fff;float:right;cursor:pointer;font:normal 140% 'roboto', sans-serif;margin:0;padding:5px 10px;}
#footer a,#footer a:hover{color:#555;text-decoration:none;}
#footer p, .form_settings p{padding:0 0 10px;}

@media (min-width:992px) {
article {display:flex;}  
ul{margin-top:-50px}
#snow {background: url(snowman1.png) no-repeat left top;margin:-20px;padding:20px}
}

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

@media (min-width: 1024px) {
nav {min-height:25px; text-align:right; width:90vw; margin-top:8px; z-index:99;}
#logo{display:flex;background:transparent;padding:15px 0 10px 115px;}
address {margin:-20px 0 0 120px;font-size:110%}
#menu {background:transparent;transition:none;visibility:visible;opacity:1;margin-top:-28px;margin-left:0;}
#menu li {display:inline-block;margin:3px; max-width:120px;}
#menu li {display:inline-flex;margin:3px;flex-wrap:wrap;align-content:center;}
#menu li a {width:100%; padding:2px 8px;}
label{display: none;}
input[type=checkbox]:checked ~ #menu {margin-top:-40px; margin-left:0;}
#menu ul {display:inline-flex;justify-content:flex-end;}  

}