*,:after,:before{box-sizing:border-box}
@font-face{font-family:opensans;src:url(opensans.woff) format("truetype")}
body,html{height:100%;width:100%;font-family:opensans,Verdana,sans-serif;font-size:100%}
body,header,html{margin:0;padding:0;overflow-x:hidden;background: linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%);}
header{max-width:100%;background:#d91;border-color:rgba(150,131,231,.5);box-shadow:0 0 30px rgba(0,0,0,.2);min-height:50px;padding:6px 0 0 0;}
article{margin:0;padding:0;background:linear-gradient(to right,rgba(185,188,189,.4) 0,rgba(232,238,240,.4) 50%,rgba(185,188,189,.4) 100%)}
img{max-width:100%;height:auto;margin-left:auto;margin-right:auto}
a{color:#9df;text-shadow:#111 2px 2px 4px;text-decoration:none}
h1{margin-top:5px;font-size:110%}
h2,h3{margin:2px;font-size:105%}
button{font-size:80%}
nav{text-align:right;width:74vw;float:right;margin-top:.4rem;position:relative;z-index:91}
.drehen{transition:all .3s;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:#900;padding:.2rem .5rem;margin:.2rem;float:right}
#menu{width:100%;text-align:right;margin-top:-14rem;margin-left:-10rem;display:hidden;transition:all 1s;opacity:0}
#menu ul{display:block;background:rgba(255,255,255,.4);margin-left:-60px;padding:5px;width:80%}
li{list-style-type:none;margin:.2rem;padding:0}
#menu li a{display:block;text-align:left;text-decoration:none;padding:5px;background:#800;color:#fff;border-radius:6px}
#menu li a:hover{background:rgba(30,200,30,.7)}
input[type=checkbox]{display:none;float:left}
input[type=checkbox]:checked~#menu{visibility:visible;opacity:1;margin:0}
.logo{float:left;max-width:30%;height:5rem;margin-left:20px;font-size:140%}

.schatten{margin:0;padding:0;line-height:30px;color:#900;text-shadow:-1px -1px 1px #191919,-3px -3px 1px #4c4c4c}
.kontakt{ display:flex;padding-right:20px; font-size:100%; color:#fff; text-shadow: #111 1px 1px 2px; flex-direction:row;
    flex-wrap: wrap; justify-content: flex-end;}
.breit99{max-width:100%;padding:1rem;text-align:center}

.haus{position:relative;font-size:220%;color:#fff;text-align:center;display:inline-block;width:100vw;height:70vh;padding:0;background:url(../img/intro-bg.jpg) center center no-repeat;background-color:#e5e5e5;background-size:cover}
.offerte{position:absolute;bottom:0;width:100%;font-size:16;background:#d91;position:fixed;text-align:center}
.container{display:flex;flex-wrap:wrap;padding-right:15px}
.container>*{flex:1 1 280px}
.spalte_l, .spalte_r{padding:18px;margin:15px 0 0 15px;min-height:120px}
.spalte_l{background:#550;color:#fff}
.spalte_r{background:#055;color:#fff}
@media (min-width:576px) {
#menu li a{width:100%;padding:4px}
}
@media (min-width:1024px) {
#menu{display:block;background:0 0;transition:none;visibility:visible;opacity:1;margin-left:30px;margin-top:-1rem}
#menu ul{background:0 0;margin:10px 0 0 50px}
#menu li{display:inline-block;margin:0}
#menu li a{width:100%;padding:4px 12px}
nav{padding:1rem}
label{display:none}
input[type=checkbox]:checked~#menu{margin-top:0;margin-left:0}
.schatten{line-height:40px}
.kontakt{float:right;font-size:115%;margin:10px 100px 0 0;color:red;text-shadow:#111 2px 2px 4px}
}

.top {
  text-decoration: none;
  padding:0 4px 4px 4px;
  font-size:22px;
  color: #33f;
  background: #f33;
  border-radius: 100px;
  position: sticky;
  bottom: 20px; 
  --offset: 100px;
  margin-top: calc(100vh + var(--offset));
  margin-left:91%;
  text-align:center;  
  border:2px solid #000;
}
.top a {color:#66f;text-decoration:none}