*,::after,::before{box-sizing:border-box}
html {background:#555}
body{margin:0;font-family:Roboto,Arial,sans-serif;text-align:left; font-size:100%;font-weight:400;color:#000;line-height:1.5}
article{background-image:url(bg_betonieren.jpg);background-repeat:repeat-y;background-position:top;background-size:100%}
p{margin-top:0;margin-bottom:.4rem}
ul{margin-top:0;margin-bottom:1rem}                                    
b{font-weight:bolder}

a, a:focus, a:hover{text-decoration:none}
a {color:#69f;}
a:hover {color:#bfb;}

header{background-color:#000; padding:4px 0 4px 30px;}
header span{color:#eff;font-weight:800;font-size:22px;color:#fe7}
.firma{color:#fff;font-weight:800;font-size:28px;text-shadow:1px 5px .3em #e42, 2px 2px .1em #fd2;font-stretch:extra-condensed;display:inline-block}
header a { color:#eef;padding:6px}

img{vertical-align:middle;border-style:none;}
.img_klein {float:left; margin-right:10px; width:100px; height:100px;}

h1,h2,h4,h5{margin:.2rem;font-weight:500;line-height:1.2}
h1{font-size:1.5rem}
h2 {background:#fa0;text-align:center;width:98%; margin:auto; padding:2px 8px;margin-top:2px;}
h4{font-size:1.2rem}
h5{font-size:1.5rem;margin:0;padding:0 5px}

.row{display:flex;flex-wrap:wrap;margin-right:auto;margin-left:auto;align-items:center}

.drehen { transition:all .5s; display:inline-block; text-rendering:auto; font-size:28px; font-weight:900; color:#fff; text-shadow:#111 2px 2px 4px;}
.drehen:hover {transform:rotate(720deg);}

li, ul{margin:0;padding:0;list-style:none}
nav {min-height:50px; text-align:right;margin-top:-50px;margin-right:20px; z-index:99;border-bottom:1px solid #fa3}
label { display:inline-block;color:#fff; background:#a81; padding:.2rem .8rem; margin:.2rem .2rem 1rem 0;border-radius:20%}
/* menu unsichtbar */
#menu {text-align:right; visibility:hidden; transition:all 1s;opacity:0;margin-top:-220px}
#menu li {min-width:100px;max-width:220px;list-style-type:none;height:45px; margin:.1rem; padding:0;background:linear-gradient(to bottom, rgba(225,165,25,.6) 0%, rgba(232,255,240,1) 50%, rgba(200,140,10,1) 100%);border:1px solid #f81;border-radius:5px 2px;}
#menu ul li {display:block;text-align:center}
#menu ul li a{line-height:44px;font-weight:600;color:#222;text-decoration:none;font-size:120%;}
#menu li:hover { background:rgba(10,180,10,.8)}
#menu a:hover{color:#fff}

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

a.info:hover div {
display:block;
position:absolute;
top:20px;
width:96%;
left:5px;
border:4px solid #eee;
background-color:#eb2;
color:#000;
text-align: center;
padding:20px;
}


@media (min-width: 768px) { .col-md-6{flex:0 0 50%;max-width:50%} }

.detail-box{background:rgba(22,22,22,.5);color:#fd5;padding:10px;margin-top:-180px;max-width:94%}
.detail-box h1{font-weight:700;margin-bottom:5px;color:#fd5}
.img-box img{width:70%;padding-left:50px}

.bau{transform:translateY(-180%)}
.bau {display:flex; max-width:90%; margin-left:auto; margin-right:auto;}
.box{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;width:92%;margin:5px;padding:5px;
      background:rgba(22,22,22,.4); color:#fff; transition:all .9s} 
.box:hover{background-color:#333;color:#fff}
      
.box .img-box{width:50px;height:50px;color:#eb2}
.box .name{margin-top:5px;margin-bottom:0}
.offerte{position:absolute;bottom:0;width:100%;font-size:16;background:#d91;position:fixed;text-align:center}

@media (max-width: 992px) {
.bau .box{padding:5px}
.bau .box .img-box{width:75px}
.bau{transform:none;padding:10px 0}
}
@media (max-width: 767px) {
.slider_section .detail-box{padding-bottom:45px}
.bau {flex-direction:column}
.bau .box{padding:5px}
.bau .box:not(:nth-last-child(1)){margin-bottom:15px}
}
@media (min-width:1024px) and (orientation: landscape) {     /*  - - - - = ab 1024 pixel  - - - -  */
#menu {transition:none;visibility:visible;opacity:1;margin-top:0;margin-left:0;}
#menu li {margin:0;height:38px;}
#menu li a {width:100%;height:45px; padding:4px 12px;}
#menu ul li { display: inline-block;text-align:center}
label{display:none;}
nav{padding:1rem}
input[type=checkbox]:checked ~ #menu {margin-top:2rem; margin-left:0;}
.container{max-width:97vw}
.box {width:40%;}
.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:85%;
  text-align:center;  
  border:1px solid #000;
  z-index:999;
}
.top a {color:#66f;text-decoration:none}
a.info:hover div {

    top:-250px;    

    margin-right:auto;
    margin-left:auto;  
    border: 1px solid #0f0;
    background-color: #fb4;
    color: #000;
    text-align: center;
    padding:25px;
}
}

img{max-width:100%;height:auto;margin-left:auto;margin-right:auto}
.offerte{position:absolute;bottom:0;width:100%;font-size:16;background:#d91;position:fixed;text-align:center}
/*  .container{width:95%;padding:0 15px;margin-right:auto;margin-left:auto} */
.container{display:flex;flex-wrap:wrap}
.container>*{flex:1 1 280px}
.spalte_l, .spalte_r{padding:18px;margin:15px 0 0 15px;min-height:120px;color:#fff}
.spalte_l{background:#550}
.spalte_r{background:#055}  
a.info {z-index:2;padding:2px;color:#0fe}  
a.info:hover{background-color:#cf3;}    
a.info div{position:absolute;top:100px;width:200px;min-height:min-content}
a.info div {display:none; }