*,:after,:before{box-sizing:border-box}
@font-face{font-family:pacifico;src:url(pacifico.woff2) format("woff2")}
body,html{margin:0;padding:0;border:0;width:99%}
body{font-family:Verdana,Arial,sans-serif;font-size:90%;background:#111;color:#000;background:url(bg_holz.jpg);}
.logo{position:relative; max-width:220px; max-height:90px;margin-left:4%}
.logo_text{position:absolute;top:15px;margin-left:4%}
.logo img {max-width:80px; max-height:70px;}
.pacifico{font-family:pacifico;font-size:180%;color:#622}
.pacifico:hover{background:0 0}
  article{width:92%;margin-left:auto;margin-right:auto; line-height:1.5}
  aside,section{width:100%;border:1px solid #888;padding:4px 10px;min-height:370px}
  section{background-color:#fff; text-align:justify}
  aside  {background-color:#ddd; min-height: 320px;}
label{color:#111; background-color:#48e;margin:12px 5px 5px 5px;}
form label{background-color:unset;}
button{float:left;border:2px solid #28f;border-radius:8px;transform:skewX(-15deg)}
.servic-img {max-width:150px;}
.angebote {display: flex;flex-wrap:wrap; justify-content:space-evenly; }
.formular input,.formular textarea{font-family:Arial;padding:2px;margin:2px;width:250px;border:none;border-bottom:1px dotted #333;background:#ddd;flex-direction:column;flex-wrap:nowrap;align-items:flex-end}
.formular{display:flex;flex-wrap:wrap;justify-content:space-around}
header{min-height:80px;margin-top:20px}
.btn{max-width:70px}
h1,h2,h3,h4,h5,h6{margin:2px;}
h1{font-size:120%;color:#443;margin:8px 0;padding:0}
section h1{font-size:105%; margin-top:5px;margin-left:10%}       /* text-align:center;   */

h2{font-size:105%;padding:0;margin:10px 0 0}
h3{font-size:102%}
h4,h5,h6{margin:0;padding:0 0 5px;color:#09d}
a,a:hover{text-decoration:none;color:#0ad;font-size:110%;}
a:hover{color:#0af;background:#fff}
img{max-width:98%;border:0;margin:0;padding:0}
form{padding:0;margin:0}
input,textarea{padding:2px;width:150px;border-bottom:1px solid #eed;background:0 0}
ul{margin:2px 20px 18px 16px;padding:0}
ul li{margin:3px 0;padding:0 5px}
#menubar{width:90%;min-height:35px;margin:-60px 10px 80px 75%}
#menu{width:100%;position:relative;background:#285e8cb3;margin-top:-60rem;margin-left:-60rem;visibility:hidden;transition:all 1s;opacity:0}
#menu ul{display:inline-block;text-align:center;width:100%}
#menu li{list-style-type:none; padding:1px}
#menu li a {background:#c8000099;display:block;padding:5px;color:#fff; width:7rem;}
#content{text-align:left;max-width:92%}
#content ul{margin:2px 0 22px}
#content ul li{list-style-type:none;margin:0;padding:0 0 4px 25px;line-height:1.5em}

#footer{max-width:90%;font-size:90%;height:28px;padding:20px 0 5px;text-align:center;background:0 0;color:#efc;letter-spacing:.1em}
#footer a {color:#efc}
#footer a:hover{text-decoration:underline}

.top{font-size:26px;position:sticky;bottom:40px;--offset:100px;margin-top:calc(100vh + var(--offset));margin-left:91%}
.top a{border:0}
.drehen{transition:all .5s;display:inline-block;text-rendering:auto;font-size:40px;font-weight:900;text-shadow:#666 3px 2px 1px;color:#fff;background:#28d}
.drehen:hover{transform:rotate(900deg)}

input[type=checkbox]{display:none}
input[type=checkbox]:checked~#menu{visibility:visible;opacity:1;margin-top:.5rem;margin-left:-6rem;width:160px}

@keyframes example {
  0%   {color:#f00;}
  40%  {color:#000;}
  80%  {color:#00f;}
  100%  {color:#00f;}
  60%  {color:#000;}
  10%  {color:#f00;}
}

.offen {
  color:#000;
  animation-name: example;
  animation-duration:8s;
  animation-iteration-count:4;    /*  animation-iteration-count: infinite;  */
}

@media (min-width:480px) {
#menu li a{width:9rem}
}
@media (min-width:900px) {
section{width:82%;}
aside  {width:18%;font-size:90%}
#menubar{max-width:64%;height:45px;margin:-100px 0 0 32%}
#menu  {background:0 0;transition:none;visibility:visible;opacity:1;margin-top:50px;margin-left:0}
#menu li{display:inline-block;margin:1px;max-width:115px;border-bottom:2px solid #fff;border-radius:10px;transform:skewX(-9deg)}
#menu li a{width:100%;padding:4px 14px;border-radius:8px;transform:skewX(-9deg)}
label{display:none}
input[type=checkbox]:checked~#menu{margin-top:0;margin-left:0;width:100%}
article{width:92%; min-height:100%;margin-left:auto;margin-right:auto;display:flex}

}