/* CSS Document */

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,cite,code,del,dfn,em,img,ins,q,small,strong,sub,sup,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;margin:0;padding:0}article,aside,figure,figure img,figcaption,hgroup,footer,header,nav,section,video,object{display:block}a img{border:0}figure,figure img{padding: 0; margin: 0;}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Bold.eot');
    src: url('../fonts/Roboto-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Roboto-Bold.woff2') format('woff2'),
        url('../fonts/Roboto-Bold.woff') format('woff'),
        url('../fonts/Roboto-Bold.ttf') format('truetype'),
        url('../fonts/Roboto-Bold.svg#Roboto-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Medium.eot');
    src: url('../fonts/Roboto-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Roboto-Medium.woff2') format('woff2'),
        url('../fonts/Roboto-Medium.woff') format('woff'),
        url('../fonts/Roboto-Medium.ttf') format('truetype'),
        url('../fonts/Roboto-Medium.svg#Roboto-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Regular.eot');
    src: url('../fonts/Roboto-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Roboto-Regular.woff2') format('woff2'),
        url('../fonts/Roboto-Regular.woff') format('woff'),
        url('../fonts/Roboto-Regular.ttf') format('truetype'),
        url('../fonts/Roboto-Regular.svg#Roboto-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'pt_serifbold';
    src: url('../fonts/pt_serif-web-bold.eot');
    src: url('../fonts/pt_serif-web-bold.eot?#iefix') format('embedded-opentype'),
         url('../fonts/pt_serif-web-bold.woff2') format('woff2'),
         url('../fonts/pt_serif-web-bold.woff') format('woff'),
         url('../fonts/pt_serif-web-bold.ttf') format('truetype'),
         url('../fonts/pt_serif-web-bold.svg#pt_serifbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'pt_serifregular';
    src: url('../fonts/pt_serif-web-regular.eot');
    src: url('../fonts/pt_serif-web-regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/pt_serif-web-regular.woff2') format('woff2'),
         url('../fonts/pt_serif-web-regular.woff') format('woff'),
         url('../fonts/pt_serif-web-regular.ttf') format('truetype'),
         url('../fonts/pt_serif-web-regular.svg#pt_serifregular') format('svg');
    font-weight: normal;
    font-style: normal;
}




html{width: 100%;  overflow-x: hidden !important;height: auto;}
body{font-family: 'Roboto'; font-weight: normal; font-size:15px; color: #3b3b3b;  width: 100%;  background: #fff;font-variant-ligatures: none;}

*{box-sizing: border-box;}
.text-center{text-align: center;}
.text-right{text-align: left;}
.text-left{text-align: left;}
.display{display: none;}
.mobil{display: inherit;}
.clear{clear: both;}
strong{font-family: 'Roboto'; font-weight: bold;}
p{margin-bottom: 15px;}

header, main, footer{width: 100%; position: relative; margin: 0; padding: 0; display: inline-block;}

header{background:url(../../bilder/header/startseite-gruendach2.jpg) no-repeat left top; background-size: cover; min-height: 300px;}
header::after{content: ""; position: absolute; background: url(../images/dach-blau.svg) no-repeat; background-size: cover;  left: 0; right: 0; width: 100%; min-height: 50px; display: block;bottom: 0;}

header .nav-wrap{width: 100%; display: inline-block; position: relative; background:rgba(255,255,255,0.80);   border-bottom: 7px solid #b02930;}
header .nav-wrap .logo{display: none;}
header .nav-wrap .mobilelogo{display: inline-block; float: right; text-align: right; padding: 10px;}
header .nav-wrap .main-nav{display: none;}

.menu{width: 20px; height: 20px; display: block; background: url(../images/menue.png) no-repeat center center;}
.menu-close{width: 20px; height: 20px; display: block; background: url(../images/menue-close.png) no-repeat center center;}
.plus-more{width: 20px; height: 20px; display: block; background: url(../images/submenu.png) no-repeat center center;}

.mobile_menu_button{background:0px;	padding:24px 0 0 15px;	border:0; float:left;	display:block;}
.navigation {float:right;}
.navi {height: 100%; width: 0; position: fixed; top: 0; left: 0; background-color: #1f2f80; overflow-x: hidden; transition: 0.5s;	z-index:1001;}
.navi_bg {content:''; top: 0; width:0%; left: 0%; position: fixed; height: 100%; background:rgba(0,0,0,0.8); z-index:1000;}

nav.mobil-nav ul {list-style:none; padding:0px 0px 20px 0; margin:0px;	}
nav.mobil-nav ul li {padding:12px 23px; text-align: left; position: relative; border-bottom:1px solid #fff;}
nav.mobil-nav ul li:hover {background: #b02930;}
nav.mobil-nav ul li a {color:#fff; text-decoration: none; display: block;}
nav.mobil-nav ul li a.active{color:#fff;	text-decoration: none; background: #474747;}

.navi .closebtn {position: absolute;top: 15px;right: 15px;margin-left: 50px;cursor:pointer;	font-size:22px;}
.logomobile {text-align:left;	padding:10px 0;	border-bottom:1px solid #fff;min-width:217px;position:relative;background: #fff;}
.logomobile a {width:120px;	display: inline-block;}
nav.mobil-nav ul li.submenu .plus {color:#fff; padding:10px 20px; position: absolute; right:0px; top:13px; font-size:12px; cursor:pointer;}
nav.mobil-nav ul li.submenu > ul {display: none;	background:rgba(210,210,210,0.2); margin:10px -23px -12px -23px; padding:0px;}
nav.mobil-nav ul ul li {border-bottom:1px solid #fff;}
nav.mobil-nav ul ul li:last-child {	border-bottom: none;}

header .slogan{font-size: 1.6em;font-family: 'Roboto'; font-weight: bold;text-shadow: 4px 4px 4px rgba(0,0,0,0.96); width: 100%; display: inline-block; padding: 20px 10px; margin-top: 75px;}
header .slogan span.uppercase{color: #fff; text-transform: uppercase; font-size: 1.2em;}
header .slogan span.normal-line{color: #fff; position: relative; padding-left: 75px; font-weight: normal;}
header .slogan span.normal-line::before{content: ""; width: 60px; height: 10px; display: block; background: #b02930; position: absolute; left: 0; top: 10px;-webkit-box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.96); -moz-box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.96);box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.96);}

body.startseite .site-arrow{display: none;}

main .row{padding: 0 10px;}
main h1{color: #1f2f80; font-family: 'pt_serifbold'; font-weight: normal; font-size: 1.8em; border-left: 8px solid #b02930; padding-left: 10px; line-height: 0.9em; display: inline-block; margin: 20px 0 30px 0;}
main h1 span{color: #3b3b3b; font-size: 0.7em;}
main h2{color: #1f2f80; font-family: 'pt_serifbold'; font-weight: normal; font-size: 1.3em; border-left: 8px solid #b02930; padding-left: 10px;margin: 20px 0 10px 0;}
main h4{position: relative; font-weight: 500; font-size: 1.1em; margin: 20px 0 10px 0; padding-bottom: 10px; display: inline-block;}
main h4::after{height: 2px; width: 25%; display: block; background: #b02930; content: ""; position: absolute; bottom: 0; left: 0;}
main a{color: #b02930; text-decoration: none; -ms-hyphens:auto; word-wrap: break-word;}
main ul{margin: 0 0 15px 15px;}
main p.contact span{width: 70px; height: auto; display: inline-block; float: left; margin-right: 5px;}

main .box{height: auto; display: inline-block; text-align: center; padding: 10px 10px; float: left; margin: 0 5px 5px 0; border: 1px solid #b02930; color: #b02930; width: 100%;}

main .news-box{width: 100%; height: auto; display: inline-block; padding: 10px 0; border-bottom: 2px solid #c2c2c2; margin-bottom: 20px;}
main .news-box .full-image figure{width: 100%; height: auto; display: inline-block;}
main .news-box .full-image figure img{width: 100%; height: auto;}
main .news-box .news-gallery figure{display: inline-block; margin: 0 5px 5px 0; float: left;}
main .news-box .news-gallery figure img{opacity: 0.8;}
main .news-box .news-gallery figure img:hover{opacity: 1;transition: all 0.5s ease-out;}

main .gallery{width: 100%; display: inline-block; clear: both; margin: 30px 0 0 0;}
main .gallery [class*='col-']{width: 100%; display: inline-block; float: left; margin-bottom: 5px;}
main .gallery [class*='col-'] figure{height: 150px; width: 100%; display: block;position: relative;}
main .gallery [class*='row-']{width: 100%; display: inline-block; float: left;}
main .gallery .row-50{width: 49%;}
main .gallery .row-50.first{width: 49%; margin-right: 2%;}
main .gallery [class*='col-'] [class*='row-'] figure{height: 150px; width: 100%; display: block;}
main .gallery [class*='col-'] figure > a {	position: absolute;	top: 0;	left: 0;	bottom: 0; width: 100%;	height: 100%;	z-index: 1000;	text-indent: 200%;	white-space: nowrap;	font-size: 0;	opacity: 0;}
main .gallery .row-20.ref-banner{display: inline-block; margin: 5px 0 0px 0;}
main .gallery .row-20.ref-banner a{background: #b02930; color: #fff; text-align: center; display: inline-block; width: 100%; padding: 10px 0; font-family: 'pt_serifbold'; font-weight: normal;}

main .referenzen .ref-box, main .referenzen .ref-box.full{width: 100%; display: inline-block; float: none; clear: both; margin-bottom: 20px;}
main .referenzen .ref-box figure{width: 120px; height: 120px; display: block; float: left; margin: 0 5px 5px 0; position:relative;}
main .referenzen .ref-box figure > a {	position: absolute;	top: 0;	left: 0;	bottom: 0; width: 100%;	height: 100%;	z-index: 1000;	text-indent: 200%;	white-space: nowrap;	font-size: 0;	opacity: 0;}

footer{background: #1f2f80; color: #fff; padding: 50px 10px 20px 10px; margin-top: 30px;width: 100%; display: inline-block;}
footer::after{content: ""; position: absolute; background: url(../images/dach-footer.svg) no-repeat; background-size: cover;  left: 0; right: 0; width: 100%; min-height: 40px; display: block;bottom: 0;}
footer .col-25{width: 100%; position: relative; border-left: 1px solid #fff; padding: 0px 10px 10px 10px; margin-bottom: 10px; display: inline-block;}
footer .col-25::before{content: ""; width: 7px; height: 20px; display: block; background: #c2c2c2; position: absolute; top: 0; left: -3px;}
footer .col-25.numbers{border-left: none; padding: 10px 10px 10px 0;}
footer .col-25.numbers::before{display: none;}
footer .col-25.numbers p{margin-bottom: 5px; display: inline-block; width: 100%; height: 43px; line-height: 43px; font-size: 1.1em;}
footer .col-25.numbers p span.icon{width: 43px; height: 43px; display: block; float: left; margin-right: 10px;}

footer .col-25 nav ul{list-style: none;}
footer .col-25 nav ul li{display: inline-block; width: 100%;}
footer .col-25 nav ul li a{color: #fff; text-decoration: none; padding: 7px 0; display: inline-block;}

footer .col-25 h3{font-family: 'pt_serifbold'; font-weight: normal; width: 100%; margin-bottom: 10px;}

/* FORMULAR */
.formular{padding: 30px 0px; width: 100%;  display: inline-block; color: #1f2f80 !important; margin-bottom: 30px;}
.formular .daten{float: left;width: 99%; margin-bottom: 40px; text-align: left !important;}
.formular .mitteilung{float: left;width: 100%; text-align: left !important;}
form label {	line-height:1.4;	vertical-align:top;	width:100%;	clear: both; font-size: 1.0em; font-weight:300; margin-top: 10px;}
input, select {	border:1px solid rgba(230,230,230,0.9);	 width: 100%;color: #1f2f80; height: 30px;	clear: both;font-family: 'Roboto'; font-weight:400;  font-size: 0.9em; }
input[type="submit"]{background: #1f2f80;  width: 200px; text-align: center; text-transform:uppercase; float: left; font-weight: 400; margin-top: 10px; height: 50px; line-height:50px; color: #fff; }
textarea{border:1px solid rgba(238,238,238,0.9);width: 100%; height: 300px;font-family: 'Roboto'; font-size: 0.9em; font-weight: 400;}
input:focus {	color: #1f2f80;	border: 2px solid #1f2f80;}
textarea:focus {	color: #1f2f80;	border: 2px solid #1f2f80;}

.formular a{color: #1f2f80 !important;}

form fieldset fieldset label {	display:block;	width:auto;}
.error input {    color: red;}

@media screen and (min-width: 400px){
main .referenzen .ref-box figure{width: 150px; height: 150px; display: block; float: left; margin: 0 5px 5px 0; position:relative;}
main .box{height: auto; display: inline-block; text-align: center; padding: 10px 10px; float: left; margin: 0 5px 5px 0; border: 1px solid #b02930; color: #b02930; width: auto; min-width: 47%;}
}

@media screen and (min-width: 450px){
header{min-height: 400px;}
main .gallery [class*='col-'] figure{height: 200px;}
main .gallery [class*='col-'] [class*='row-'] figure{height: 200px; width: 100%; display: block;}
header .slogan{width: auto; margin-top: 150px; float: right;}
header .slogan span.uppercase{color: #fff; text-transform: uppercase; font-size: 1.2em;}

}

@media screen and (min-width: 515px){
main .news-box .full-image figure img{width: auto; height: auto;}
header .slogan{width: auto; margin-top: 150px; float: right; font-size: 1.9em;}
header .slogan span.uppercase{font-size: 1.2em;}
footer{padding: 50px 10px 40px 10px;}
footer::after{min-height: 60px;}
}

@media screen and (min-width: 600px){
header{min-height: 500px;}
header::after{min-height: 90px;}
header .slogan{width: auto; margin-top: 200px; float: right; font-size: 2.1em;}
header .slogan span.uppercase{font-size: 1.2em;}
footer .col-25{width: 50%; float: left; min-height: 200px;}

body.startseite main .referenzen .ref-box{width: 48%; display: inline-block; float: left; clear: none; margin: 0 20px 2% 0;}
main .box{height: auto; display: inline-block; text-align: center; padding: 10px 10px; float: left; margin: 0 5px 5px 0; border: 1px solid #b02930; color: #b02930; width: auto; min-width: auto;}
}
@media screen and (min-width: 700px){
main .gallery .col-20{width: 40%;}
main .gallery .col-20 .row-50{width: 98%; margin-right: 2%;}
main .gallery .col-20 .row-50.first{margin-bottom: 5px;}
main .gallery .col-40.first{width: 60%;}

main .gallery .col-40 .row-80 figure{height: 350px;}
}
@media screen and (min-width: 750px){
body.startseite header{min-height: 650px;}
body.startseite header .slogan{width: auto; margin-top: 300px; float: right; font-size: 2.3em;}
body.startseite header .slogan span.uppercase{font-size: 1.2em;}
}

/* @media screen and (min-width: 810px){ */
@media screen and (min-width: 880px){
header .nav-wrap{width: 100%; display: inline-block; position: relative; background:url(../images/dach-rot.svg) no-repeat top left -100px; background-size: cover;   border-bottom: none; min-height: 100px;}
header .nav-wrap .logo{display: inherit; width:40%; padding-top: 20px;}
header .nav-wrap .logo img{width: 55%; height: auto; float: right;}
header .nav-wrap .mobilelogo{display: none;}

header .nav-wrap .main-nav{display: inherit;}

header .nav-wrap .main-nav {float:right; padding-top: 33px;}
header .nav-wrap .main-nav ul li.submenu .plus {display:none;}
.navi {float:left;		width:auto !important;	}
.navi_bg{float:left;		width:auto !important;}
.mobile {display:none;	}
.mobile_menu_button {display: none;}
header .nav-wrap .main-nav ul {display:inline-block;list-style:none;padding:0px;margin:0px; }
header .nav-wrap .main-nav ul li {float:left; display: inline-block; position: relative;}
header .nav-wrap .main-nav ul li > a {color:#1f2f80; text-decoration: none; display: inline-block;padding:15px 20px 20px 0px; text-align: left;	font-family: 'pt_serifregular'; font-weight: normal; font-size: 1.1em;}
header .nav-wrap .main-nav ul li:hover > a {text-decoration: none; background:url(../images/menu-active.png) no-repeat top left;	}

body.startseite .site-arrow{display: inline-block; position: relative;top: -60px; left: 105px;}
body.startseite .site-arrow a{display: inline-block;}

main{padding-top: 30px;}
main .col-50{width: 48%; margin-right: 2%; float: left;}
main .col-60{width: 58%; margin-right: 2%; float: left;}
main .col-40{width: 38%; margin-right: 2%; float: left;}
main [class*='col-'].last{margin-right: 0; margin-left: 2%;}

main .gallery .col-20{width: 40%; margin-right: 0;}
main .gallery .col-20 .row-50{width: 98%; margin-right: 2%;}
main .gallery .col-20 .row-50.first{margin-bottom: 5px;}
main .gallery .col-40.first{width: 60%; margin-right: 0;}

main .gallery .col-40 .row-80 figure{height: 360px;}

main .news-box .full-image figure img{width: 100%; height: auto;}
main .news-box .col-50{width: 100%; float: none; margin-right: 0;}

footer::after{ min-height: 80px;}

.formular .daten{float: left;width: 49%; margin-bottom: 40px; text-align: left !important; margin-left: 1%}
}
@media screen and (min-width: 925px){
body.startseite .site-arrow{left: 109px;}
main .referenzen .ref-box{width: 48%; display: inline-block; float: left; clear: none; margin: 0 20px 2% 0;}
}
@media screen and (min-width: 970px){
body.startseite header{min-height: 700px;}
body.startseite header .slogan{margin-top: 300px; font-size: 2.7em; margin-right: 100px;}
body.startseite .site-arrow{left: 112px;}
}
@media screen and (min-width: 1010px){
header .nav-wrap{width: 100%; display: inline-block; position: relative; background:url(../images/dach-rot.svg) no-repeat top left 20%; background-size: cover;   border-bottom: none; min-height: 100px;}
header .nav-wrap .logo{display: inherit; width:45%; padding-top: 20px;}
header .nav-wrap .logo img{width: 250px; height: auto; float: left; margin-left: 45%;}

header .nav-wrap .main-nav ul li > a {padding:15px 25px 20px 0px;}

body.startseite .site-arrow{left: 120px;}

main .gallery [class*='col-']{clear: none; float: left; margin-right: 0;}
main .gallery .col-20{width: 20%; margin-right: 0;}
main .gallery .col-40.first{width: 39%; margin-right: 1%;}
main .gallery .col-20 .row-50{width: 97%; margin-right: 3%;}
main .gallery .col-40.last{width: 40%; margin-left: 0;}
main .gallery .col-40.last figure{height: 405px;}

footer .col-25{width: 25%; position: relative; border-left: 1px solid #fff; padding: 0px 10px 10px 10px; margin-bottom: 10px; display: inline-block;}

footer{padding: 50px 10px 80px 10px;}
footer::after{min-height: 110px;}
}
@media screen and (min-width: 1025px){
body.startseite .site-arrow{left: 12%;}
}
@media screen and (min-width: 1200px){
.row{width: 1190px; margin: 0 auto; clear: both;}
header .nav-wrap .main-nav ul li > a {padding:15px 45px 20px 0px; 	}
header::after{min-height: 110px;}
main .news-box .col-50{width: 48%; float: left; margin-right: 2%;}
main .news-box .col-50.news-gallery{margin-right: 0; width: 50%; float: left;}
main .news-box .news-gallery figure{width: 100px; height: auto; display: inline-block;}
main .news-box .news-gallery figure img{width: 100%; height: auto;}
}
@media screen and (min-width: 1240px){
header{background:url(../../bilder/header/startseite-gruendach3.jpg) no-repeat left top; background-size: cover; min-height: 580px;}

header .nav-wrap{min-height: 120px;}
header .nav-wrap .logo img{width: auto; height: auto;}
header .nav-wrap .main-nav ul li > a {padding:15px 35px 20px 0px;}
header .slogan{margin-top: 250px; font-size: 2.7em; margin-right: 100px;}
}
@media screen and (min-width: 1310px){
body.startseite .site-arrow{top: -60px; left: 12.5%;}
}
@media screen and (min-width: 1430px){
header{min-height: 700px;}
header::after{min-height: 140px;}
header .nav-wrap .main-nav ul li > a {padding:15px 55px 20px 0px; 	}
header .slogan{margin-top: 300px; font-size: 2.7em; margin-right: 100px;}
body.startseite .site-arrow{top: -80px; left: 12.5%;}
}

@media screen and (min-width: 1520px){
body.startseite header{min-height: 800px;}
body.startseite header .slogan{margin-top: 350px; font-size: 3em; margin-right: 100px;}

}
@media screen and (min-width: 1600px){
header .nav-wrap{min-height: 150px;}
body.startseite .site-arrow{left: 13%;}
}

@media screen and (min-width: 1750px){
body.startseite header{min-height: 900px;}
body.startseite header::after{min-height: 160px;}
}