@import url("reset.css");
@import url('https://fonts.googleapis.com/css?family=Maven+Pro:400,500,700');
* {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
body {font: lighter 14px/21px 'Oxygen', sans-serif; color: #192b3a;}
.cleaner {clear: both;}
#header {width: 100%; height: auto;}
.lineal {width: 100%; height: auto;}

h1 {font: bold 24px/30px 'Oxygen', sans-serif; color: #192b3a;}
h2 {font: bold 24px/30px 'Oxygen', sans-serif; color: #fff;}
h3 {font-weight: bold; margin-top: 10px;}
h4 {text-align: center; font-weight: bold; color: #192b3a;}
p {margin-top: 10px;}
#kontakt h1 {color: #fff;}
#kontakt p {color: #fff;}

a {color: #fff; text-decoration: none; font-weight: lighter; padding-top: 10px;}
#popup a {font-weight: bold;}
nav { padding-top: 15px; z-index: 1;}
nav a {text-decoration: none; color: #e94849; hyphens: none;}
ul {padding-bottom: 20px; text-align: center; margin: 0}
ul li {font-size: 18px; display: inline-block;}
ul li:hover {border-bottom: 1px solid #e94849; line-height: 21px;}

#titelbild {width: 100%; height: auto;}
.logo {position: relative; width: 40%; height: auto; left: 30%; margin-bottom: 10px; margin-top: 20px;}
.subnav {z-index: 999; position: absolute;}

#uns {margin-bottom: 60px;}
#uns .col1 {margin-right: 60%;}
#nummer {width: 25%; height:auto; position: absolute; margin-left: 50%; z-index: 9999;}
#anhaenger {width: 30%;height: auto; position: absolute; margin-left: 10%; z-index: 0;}
.hintergrund {background-color: #e94849; margin-left: 40%; width: 600px; height: 600px; border-radius: 600px; z-index: 999;}
.hintergrund .col2 {margin-left: 15%; width: 70%; margin-top: 150px;}
.box {width: 18%; height: auto;}
.box img {width: 70%; height: auto; margin-left: 14%;}

.content, .oben, .unten {display: flex;}
.col1 {width: 35%; margin-left: 12%;}
.col2 {width: 35%; margin-left: 10%; margin-right: 5%;}
.col3 {width: 100%; margin-left: 50%;}
#uns {margin-top: 100px;}
#quali p {color: #fff;}
#produkte {margin-left: 9%; margin-top: 60px; margin-bottom: 60px;}
.unten {margin-top: 30px;}
#puffer {width: 100%; height: auto;}
#kontakt {background-color: #e94849; padding-top: 40px;}




.overlay {position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); transition: opacity 500ms; visibility: hidden; opacity: 0;}
.overlay:target {visibility: visible; opacity: 1; z-index: 9999;overflow: scroll;}
.popup {margin: 70px auto; padding: 20px; background: #e94849; border-radius: 5px; width: 50%; position: relative; transition: all 2s ease-in-out;}
.popup .close {position: absolute; top: 20px; right: 30px; transition: all 200ms; font-size: 30px; font-weight: bold; text-decoration: none; color: #edf5ea;}
.popup .inhalt {max-height: 30%; overflow: auto;}
#hierhin {width: 0; height: 0; position: fixed; top: 0; left: 0;}
strong {font-size: 16px;}
.inhalt {width: 100%;}
.inhalt h1 {font-size: 32px; margin-top: 20px; margin-bottom: 20px; color: #edf5ea;}
.inhalt a {width: 10px; color: #fff;}
.inhalt p {margin-bottom: 10px;color: #fff;}
.col2 iframe {width: 100%; height: 750px;}
iframe {width: 100%; height: 350px;}


@media screen and (max-width: 2000px) {
    .impressum {display: none;}
    nav span, .navi .closebtn {display: none;}
    li {margin-right: 30px;}
    #nummer {top: 850px; width: 20%; height: auto;}
    .hintergrund {margin-left: 45%; width: 600px; height: 600px; border-radius: 500px;}
    .hintergrund .col2 {margin-left: 16%; width: 70%; margin-top: 160px;}
    #anhaenger {width: 40%;}
}


@media screen and (max-width: 1600px) {
    #nummer {top: 750px; width: 24%; height: auto;}
}


@media screen and (max-width: 1400px) {
    li {margin-right: 20px;}
   
}


@media screen and (max-width: 1250px) {
    #nummer {top: 670px; width: 30%; height: auto;}
}


@media screen and (max-width: 1080px) {
    .hintergrund {margin-left: 35%; width: 500px; height: 500px; border-radius: 500px;}
    .hintergrund .col2 {margin-left: 16%; width: 70%; margin-top: 90px;}
    #anhaenger {width: 30%;}
}


@media screen and (max-width: 900px) {
    h1 {font-size: 22px;}
    h4 {display: none;}
    #uns {margin-top: 50px;}
    .col1, .col2 {width: 80%; padding-right: 5%;}
    .col2 {padding-left: 5%; padding-right: 5%;}
    .hintergrund {margin-left: 0; border-radius: 0; width: 100%; height: auto;}
    .hintergrund .col2 {margin-left: 16%; width: 70%; margin-top: 50px; padding-bottom: 50px;}
    #nummer {width: 25%; height:auto; position: absolute; margin-left: 55%; margin-top: -200px;}
    #anhaenger {width: 25%;height: auto; position: absolute; margin-left: 55%; margin-top: -220px;}
}


@media screen and (max-width: 700px) {
    .impressum {display: inline-block; position: absolute; right: 5%; text-decoration: none; top: 16px; z-index: 999;}
    .impressum a {font-size: 12px; margin-left: 8px; color: #e94849;}
    .content {display: block;}
    .logo {padding-top: 30px; width: 50%; left: 25%;}
    .col1, .col2 {width: 80%; padding-right: 5%;}
    .col2 {padding-left: 0%; padding-right: 5%;}
    .col2 iframe {width: 100%; height: 750px; margin-left: -14%;}
    #produkte {margin-top: 80px;}
    .hintergrund {margin-left: 0; border-radius: 0; width: 100%;}
    .hintergrund .col2 {margin-left: 12%; width: 80%; padding-top: 50px; margin-bottom: -40px;}
    #nummer {display: none}
    #anhaenger {display: none}

    nav {background: none; opacity: 1; position: absolute; top: 90px;}
    nav ul li {display: block; margin-left: 40px; text-align: left;}
    nav {position: fixed; left: 15px; width: 100%; height: 90px; z-index: 100;}
    nav span {display: block; position: absolute; top: -70px; left: 0px; background: #e94849; width: 56px; height: 50px; cursor: pointer;}
    nav span img {width: 41px; height: 31px; position: absolute; top: 9px; left: 7px;}
    .navi {position: absolute; display: block; height: auto; width: 0; position: fixed; z-index: 999; top: 0; left: 0; background-color: #e94849; overflow-x: hidden; transition: 0.5s; padding-top: 15px;}
    .navi a {padding: 8px 8px 15px 1px; text-decoration: none; font-size: 14px; color: #fff; display: block; transition: 0.3s;}
    .navi .closebtn {position: absolute; top: 0;right: 25px; font-size: 36px; margin-left: 50px; display: block;}
}


@media screen and (max-width: 530px) {
    h1 {font: bold 18px/22px 'Oxygen', sans-serif;}
    h2 {font-size: 18px;}
    p {font-size: 14px; padding-top:0px;}
    #uns {margin-top: 50px;}  
    .col2 { margin-top: -70px;}
    .col2 iframe {margin-left: -35px;}
    .impressum {top: 2px;}
}