@charset "UTF-8"; 

@media (max-width:1100px) {
body {
width:100%;
}
}


@media (max-width:960px) {
.map {
width: 60%;
}
}

@media (max-width:895px) {
.adresse {
text-align:center;
font-size:0.9rem;
padding:0 0.5em;
}

.logos img {
width:105px;
}

}



@media (max-width:800px) {
nav{
background:rgba(255,255,255,0.5);
}


.adresse {
display:none;
}

.anschrift, .kontaktdaten{
width:40%;
}

.buerozeiten{
width:20%;
}

.links{
width:100%;
text-align: right;
padding: 0 4em 0 0;
}

.mit-icons>img {
width: 150px;
}

.icon-streifen {
height: 80px;
top: 100px;
}
}

@media (max-width:780px) {

.popup {
width: 90%;
height:90%;
}

h3{
margin: 1em 0 0.5em 0;
}

aside h3{
font-size:1.15rem;
}

.mit-icons>img {
width: 137px;
}

.icon-streifen {
height: 50px;
}

.map {
width: 100%;
}
}

@media (min-width:620px) and (max-width:780px) {
dt {
width: 100%;
padding: 2em 0 0 0;
}

dd {
width: 100%;
}
}

@media (max-width:720px) {
.adresse, nav, main, footer {
padding: 0 1.2em;
}

article {
width: 68%;
}

aside{
width: 32%;
padding: 0 1em 0 0;
}

.logos img {
width: 80px;
}

}

@media (max-width:620px) {


aside{
width:100%;
position:relative;
padding:0;
margin: 0 0 2em 0;
}

article{
width:100%;
float:left;
}

h1{
width:70%;
font-size:1.5rem;
float:right;
}

aside.mit-icons{
width:30%;
height: 40px;
}

.mit-icons > img {
width: 60%;
}

.icon-streifen, aside.mit-icons hr {
display:none;
}


aside ul li {
margin: 0 0 0.3em 0;
width: 47%;
float: left;
}

aside ul li:nth-child(1), aside ul li:nth-child(3){
margin:0 6% 0.3em 0;
}

aside h4 {
margin: 0 0 0.5em 0;
padding: 0.2em 0.3em 0.1em 0;
}

.subnavi{
border-bottom: 1px solid #aaa;
background: rgba(0,0,0,0.03);
padding: 0 0.3em 1em .4em;
}

.subnavi h4{
border-bottom: 0;
padding-top: 1em;
}

h1, h2 {
letter-spacing: 0;
text-align:right;
}

h3, h4, h5, h6 {
letter-spacing: 0.03em;
}

a:link{
hyphens:none;
}

}




@media (max-width:570px) {
header,.head-kontakt,.head-company,.head-zertifikate,.head-impressum,.head-beton,.head-risse,.head-balkon,.head-keller, .head-gewoelbe {
background-image:none;
padding:0;
}
/*mobiles Menü*/


.offen,.zu {
    display: block;
/*background: #fff;
    width: 100%*/
  }
  a.offen,
  a.zu {
margin: 2em 2em 0 0;
position: relative;
float: right;
z-index: 3;
  }
  .offen::after {
    content: "\0020 \2630";
    font-size: 2rem;
    font-weight: bold;
  }
  .zu::after {
    content: "\0020 \2573";
    font-size: 1.3rem;
font-weight: bold;
  }
nav {
border-top:0;
border-bottom:0;
top:-5em;
padding: 0;
background:transparent;
width:100%;
z-index:3;
height: 1px;
}

  nav > ul {
    background: rgba(255,255,255,0.97);
    width: 100%;
    padding: 2% 4em 2% 2%;
    left: -570px;
    position: absolute;
    top: -5px;
    transition: all 1s ease;
z-index:2;
  }

  nav ul li {
    margin: 0.5em;
    float: none;
  }
  nav ul li ul {
display: block;
position: relative;
background: #e9eef4;
padding:0;
}

nav ul li ul li {
margin:0;
padding: 0 0 0 0.7em;
font-size: 0.95em;
line-height: 2.2em;
}

nav > .zu, a#nav:target {
display: none;
}

  a:target ~ ul,
  a:target ~ .zu {
    display: inline-block;
  }
  a:target ~ ul {
    left: 0;
  }

.logo {
width: 50%;
float: left;
margin: 1em 0 0 2em;
}

.logos img {
width: 60px;
}

}


@media (max-width:520px) {
aside.mit-icons {
height: 30px;
}

dt {
width: 100%;
padding: 2em 0 0 0;
}

dd {
width: 100%;
}

.spalten {
column-count: 1;
margin: 0 0 2em 10%;
}

.popup {
width: 100%;
height:100%;
margin:0;
}

.anschrift, .kontaktdaten, .buerozeiten, .links{
width:50%;
}

.links{
padding:0;
text-align:left;
}

}


@media (max-width:420px) {
aside.mit-icons {
margin: 0.8rem 0 0 0;
}

nav > ul {
top:0;
}


.spalten {
margin: 0 0 2em 0;
}

.anschrift, .kontaktdaten, .buerozeiten, .links{
width:100%;
}

.logos img {
width: 50px;
}

aside ul li {
    margin: 0 0 0.3em 0;
    width: 100%;}
aside ul li:nth-child(1), aside ul li:nth-child(3){
margin:0 0 0.3em 0;}

}