* {}


.display{display: block!important;}

.width_2 {float:left;width:100%;margin:0;box-sizing:border-box;}
.width_3 {float:left;width:100%;margin:0;box-sizing:border-box;}
.width_2.leftColumn {padding:0 0 10px;}
.width_2.rightColumn {padding:0 0 10px;}
.width_3.leftColumn {padding:0 0 10px;}
.width_3.middleColumn {padding:0 0 10px;}
.width_3.rightColumn {padding:0 0 10px;}

.desktopOnly {display: none;}
.mobileOnly {display: block;}
.tabletOnly {display: none;}
.smartphoneOnly {display: block;}

#main {min-height:0; overflow: hidden;}
#content {padding-bottom:40px;}
#footer {margin-top:0;}

/* MOBILE CONTENT FIX */
#content img {max-width:100%;height:auto !important;}
#content table {max-width:100%;overflow:auto;-webkit-overflow-scrolling:touch;}

#header{height: 540px;}
#header-content{max-width: 700px;}
#headerimg{margin: 0 auto;max-width: 700px;height: 500px;}
#navigation{right: 0;top: 150px;left:0;margin: 0 auto;width: 90%;}
#social{top: 25px;right:40px;}
#balkenwrap{max-width: 100%;pointer-events: none;top: 40px;}
#smallheadertext {display: none;}
#hintergrund{margin-top: 151px;width: 244px;height: 391px;display: none;}
#headerbox{width: 240px;top:80px;}
#headerbox h2{font-size: 28px;}
.headerbalken{height: 180px;}
#balken1{top:195px; margin-left: 25px;}
#balken2{top:245px;}
#balken3{top:295px;}
#balken4{top:400px; margin-right: 25px;}
#balken5{top:350px;}
#balken6{top:300px;}

/* MOBILE NAVIGATION */
#menuButton {display:block;top:108px;background: url("../../images/Menu.svg")no-repeat left;padding-left: 35px;padding-top:15px;font-family: "Avenir Next Bold";width: 85px;margin:0 auto;left: 0;}
#navigation {left:10px;display:none;background: none;padding-left: 0px;-webkit-box-shadow: 10px 10px 30px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 30px 0px rgba(0,0,0,0.75);
    box-shadow: 10px 10px 30px 0px rgba(0,0,0,0.75);height:auto;}
#navigation.opened {display:block;}
#navigation li {float:none;background:#BED958;display:block;margin:0;position:relative;width:100%;border-top: 1px solid #fff;padding: 0px;color:#fff;}
#navigation li.first{border-top: none;}
#navigation li:hover > ul {display:none;}
#navigation li.opened > ul {display:block;}
#navigation li.hasChilds > a {padding-right:24px;}
#navigation li.hasChilds > a > .mobilenavigationitem {display:block;position:absolute;top:12px;right:10px;width:20px;height:20px;background:url("../../images/arrow_white_1.svg")no-repeat center;}
#navigation li.hasChilds.opened > a > .mobilenavigationitem {background:url("../../images/arrow_white_1.svg")no-repeat center;transform: rotate(180deg);}
#navigation li ul {position:relative;top:0;left:0;padding:0;}
#navigation li ul li ul {left:0;}
#navigation li ul li.first{border-top: 1px solid #fff;}
#navigation li a{font-size: 14px;padding: 15px 0px 15px 10px;color:#7E7E80;}
#navigation li.active > a {color:#fff;padding: 15px 0px 15px 10px;background-color: #BED958;}
#navigation li:hover > a {text-decoration:none;color:#fff;padding:15px 0px 15px 10px;background-color: #BED958;border-bottom: none;}

#content{max-width: 700px; padding: 40px 20px 100px 20px;}
.content-startpage {padding: 40px 20px 100px 20px!important;}
.content-startpage .width_2{width: 100%;}
#greenstart{left: 40px;right: 0;margin: 0 auto;}
#startimg{left: 12px;margin-top: -55px;margin-bottom: 60px;}
#starttext h1{text-align: center;}




#close{background: url("../../images/x.svg")no-repeat center;height: 25px;width: 25px;background-size: contain;display: none;position: absolute;right: 10px;top:10px; display: none;}
#close:hover{cursor: pointer;}
#nextform{background: url("../../images/arrow_grau.svg")no-repeat center;height: 30px;width: 30px;background-size: contain;transform: rotate(270deg);display: none;position: relative;float:right;margin: 25px 0 15px 0;}
#nextform:hover{cursor: pointer;}
#lastform{background: url("../../images/arrow_grau.svg")no-repeat center;height: 30px;width: 30px;background-size: contain;transform: rotate(90deg);display: none;position: relative;float:left;margin: 25px 0 15px 0;}
#lastform:hover{cursor: pointer;}
#formbutton{background: #BED957;width: calc(100% - 40px);margin: 0 auto;padding: 20px;margin-bottom: 50px;}
#formbutton:hover{cursor: pointer;}
#formbutton h1{color:white!important;font-size: 22px;text-align: center;}


/*
#formularüber{}

#formularwrap{top:100px;width:calc(90% - 50px);display: block;height: 50vh;-webkit-box-shadow: 10px 10px 30px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 30px 0px rgba(0,0,0,0.75);
    box-shadow: 10px 10px 30px 0px rgba(0,0,0,0.75);
    left:0;right: 0;overflow-y: auto;}
#formularwrap h4{text-align: center;}

#radio{margin:115px auto 0 auto;width: 196px;height: 35px;}
#radio h6 {
    text-align: center;
    position: absolute;
    top: 85px;
    left: 0;
    right: 0;
}
#radio h3 {
    color: #BED957;
    text-align: center;
    margin: -5px 0 0 0;
    line-height: 20px;
    position: absolute;
    top: 70px;
}
#radio label{margin-right: 10px;display: none;float:left;}
#radio input{display: none;float:left;margin-top: 2px;}
#left{width: 100%;display: none;}
#left input{width:calc(100% - 10px);}
#left h3{text-align: center;}
#mid{position: relative;width: 100%;display: none;margin-top: -45px;}
#mid input{width:calc(100% - 10px);margin-bottom: 0px;}
#mid h4{width: 100%;margin: 18px 0 0 0;text-align: left;}
#mid .custom-select{width: 100%;}
#right{position: relative;margin-top: -25px;width: 100%;display: none;}
#right textarea{width: calc(100% - 20px);}
#right h4{width: 100%;}
#right label{margin-right: 13px;}
#go{width: 100%;}
.pfeil{width: 35px;background-size: 30px;}
.select-items{max-height: 140px;}

*/

#formularwrap h1 {margin-top: 0!important;}
#formularwrap {width: 100%; height: auto; box-sizing: border-box;}
#formbackground {width: 100%; height: auto;  box-sizing: border-box;}
#formularwrap #radio {width: 100%; float: none;}
#formularwrap #left {width: 100%; float: none;}
#formularwrap #mid {width: 100%; float: none;}
#formularwrap #right {width: 100%; float: none;}
#formularwrap .space h4 {display: none;}
#left input {width: 100%; box-sizing: border-box;}
#projectcontact.custom-select {width: 100%;}
.custom-select {width: 100%;}
#left small {display: none;}
#projektintresse {margin-right: 0px;margin-top: 20px;}
#right textarea {width: 100%; box-sizing: border-box;}
#go {width: 100%; box-sizing: border-box;}

#planungswrap{height: 650px; margin-bottom: 30px;}
#planungsüber{width: 80%;margin: 0 auto;}
#planungsüber h1{font-size: 33px;}
#planungsboxen{width: 100%;height: 415px; margin: 0 auto; margin-top: 20px; padding: 0 20px;}
#planungsboxen .slick-track{height: 415px; margin-left: 25px!important;}
.box{width: 300px;}
.box h1{margin-bottom: 20px;font-size: 20px;}
.imgbox p img{width: 100%;height: 200px!important;}
.textbox{padding: 15px;height: 140px;}
.textbox h4{width: 100%;margin-top: -15px!important;text-align: left;font-size: 14px;}
.green{width: 100%;height:390px; top: 30px;}
.textbox a{bottom: 90px;}


#projektetext{width: 90%;margin: 0 auto;float: none;margin-bottom: 25px;}
#projektetext h1,h2{text-align: center;}
#projektewrap{width: 100%;height: 645px;margin-bottom: 25px;}
.projekteslider{width: 285px;float: none;margin: 0 auto;}
.projekteslider div{margin-right: 0px;}

#upperfooter{width: 100%;}
#kontaktleft{height: 390px;width: calc(100% - 90px);}
#kontaktright{height: 290px;width: calc(100% - 90px);}
#kontaktright h1{font-size: 31px;}
#kontaktleft input{width: 45%;}
#kontaktleft textarea{width: 45%;height: 95px;}
#kontaktleft .select-selected{width: 86%;}
#kontaktleft .select-items{width: 100%;}

#senden{margin-top: 0px;}
#gmap{margin: 0 auto;position: absolute;left: 130px;right: 0;bottom:5px;width: 70%;}

#footer{margin-top: 600px;}
#square{height: 1020px;}
#footer-content{width: 100%;}
#footer-navigation{right: 0px; bottom: -25px;}
#kontaktleft .select-items{width: 174px;}
/* NEWS */
.newsContentThumbnail {float:none;width:100%;height:auto;margin:0;}
.newsContentText {float:none;width:100%;text-align: center;margin-top: 15px;}

#kontaktright h6 span {font-size: 19pt!important;}


#footerimges {
    width: 40%;
    position: absolute;
    z-index: 0;
    top: 90pX;
    right: 25px;
}

#triwrap{max-width: 700px;
    margin: 0 auto;
    top: 295px;
    position: absolute;
    left: 0;
    right: 0;
    height: 230px;z-index: 1}
#upperleft{width: 0;
    height: 0;
    border-style: solid;
    border-width: 50px 400px 0 0;
    border-color: #EEEEEE transparent transparent transparent;}
#lowerleft{width: 0;
    height: 0;
    border-style: solid;
    border-width: 40px 0 0 600px;
    border-color: transparent transparent transparent #EEEEEE;position: absolute;
    bottom: 0;}
#mobileback{    width: 100%;
    height: 300px;
    position: absolute;
    top: 300px;
    background-image: url("../../images/bordersite.png");
    background-size: contain;z-index: 5}

@media screen and (max-width: 720px) {
    #logoextansion {top: 144px; width:100%; text-align: center;}

    #headerimg{margin-top: 170px;height: 50%;}
    #header-content #logo {
        position: absolute;
        padding: 0;
        left: 0;
        margin: 0 auto;
        right: 0;
    }
    #menuButton{top:214px;}
    #social{position: absolute;top:190px;width: fit-content;width:-moz-fit-content;left: 0;right: 0;margin: 0 auto;}
    #navigation{top:265px;}
    #planungswrap{height: 600px;}
    #projektewrap{height: 600px;margin-bottom: 50px;margin-top: 100px;}
    #square{height: 1085px;}
    #planungsüber h1{font-size: 24px;}
    #planungsüber h2{font-size: 23px;}
    #nextdiv{top:380px;}
    #prevdiv{top:380px;}
    #kontaktleft h1,h4{text-align: center;}
    #kontaktleft{width: calc(100% - 50px);padding: 25px;}
    #kontaktleft input{width: calc(50% - 20px);}
    #kontaktleft .select-selected{width: calc(100% - 32px);}
    #kontaktright{width: 100%;padding: 30px 0;height: 400px;}
    #kontaktright h6 {width: 100%; text-align: center;}
    #kontaktright h1,h2,h3{text-align: center;}
    #kontaktright h2{font-size: 29px;}
    #kontaktright h1{font-size: 19px;}
    #kontaktright h3{font-size: 22px;}
    #kontaktright table{height: 100px;width: 300px;margin: 0 auto;position: relative;left: 0;}
    #footer{margin-top: 705px;}
    #greenstart{width: 95%;height: 195px;top:115px;left: -40px;right:0;max-width: 390px;}
    #kontaktright a{text-align: center;}
    #starttext h1{font-size:24px;}
    #starttext h2{font-size:28px;}
    #projektetext h1{font-size: 24px;}
    #projektetext h2{font-size: 26px;}
    #zuruckdiv{bottom: -60px; right: 80px;}
    #weiterdiv{bottom: -60px; right: 25px;}
    #interesse{left:0px; float: right;}
    #senden{width: 49%;}
    #kontaktbot{top:40px;}
    #gmap{left: 0;bottom: -50px;}
}
@media screen and (max-width: 400px) {
    #header{height: 475px;}
    #triwrap{max-width: 700px;
        margin: 0 auto;
        top: 315px;
        position: absolute;
        left: 0;
        right: 0;
        height: 185px;}
}


.CSVclass #headerimg{height: 45%!important;margin-top: 170px;}
#csv{width: 200px;}
#downloadpdf{position: absolute;left:20px;}

#virtuellbtn {
    background: #BED957;
    width: 215px;
    height: 80px;
    position: absolute;
    margin: 0 auto;
    left: 0;
    bottom: -50px;
    right: 0;
    color: white;
    font-family: Avenir Next Bold;
    text-align: center;
    z-index: 9999;
}
#virtuellbtn1 {
    background: #BED957;
    width: 215px;
    height: 80px;
    position: absolute;
    margin: 0 auto;
    left: 0;
    bottom: -150px;
    right: 0;
    color: white;
    font-family: Avenir Next Bold;
    text-align: center;
    z-index: 9999;
}
#selectbox4,#selectbox3{
    padding: 18px 30px 19px 16px;
    height: 14px;
}



#contentimg {width: 100%!important; }
.footerstyle {font-size: 20px;color: #7E7E80;width: 100%;text-align: center;display: block;}
#kontakttop {text-align: center;}
#kontaktbot {text-align: center;}


#headerimg2 {display: none;}
#content .contentbottable tr td {display: block; width: 100%!important; padding: 0!important;}
#content .contentbottable tr td img {width: 45%!important; float: left;}
#content table tr td  {width: 100%!important; float: left;}


#videocontainer {display: none;}
#headerimg3 {width: 100%;}

#kontaktleft textarea {width: 100%;height: 95px;box-sizing: border-box;}
#kontaktleft {height: 440px;}

#kontaktleft .custom-select .select-selected {width: 193px;}
#leftwrap .custom-select { width: 193px;}

#kontaktright {padding: 30px 20px; box-sizing: border-box; height: 480px;}
#kontaktright h1, h2, h3 {text-align: left;}
.footerstyle { text-align: left;width: 50%;}
#kontakttop {text-align: left;}
#kontaktbot {text-align: left;}
#footer {margin-top: 775px;}
#right h4 {display: none;}

#kontaktleft {
    height: 490px;
}

#leftwrap .g-recaptcha {transform: scale(0.6);position: relative;left: -30px; top: -8px;}
#right .g-recaptcha {left: -30px; float: left;}
#showcookie2 {padding-left: 0px; margin-left: -18px;}



#balkenwrap .headerbalken {display: none;}
#second_headerbox {left: 30px; width: 90%; top: 330px; text-align: right; background: transparent;}
#second_headerbox .icon_line {display: none;}
#second_headerbox p {display: none;}

.pagetitle {font-size: 35px; margin-top: 50px!important;}
.flexbox_flexitem {font-size: 25px;}
.linetext {font-size: 25px;}

#kontaktbot {margin-top: 30px;}