@charset "utf-8";


html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, dfn, em, img, strong, b, u, i,l, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td { margin: 0;	padding: 0;	border: 0;	vertical-align: baseline; font-style: normal; font-weight: normal; }
html {	height: 100%; }
body{  	
	width: 100%;
	font-family: 'Open Sans', Arial, sans-serif; font-style: normal; font-weight: 400;
	letter-spacing:0pt; 
	font-size: 16px; 
	line-height:23px;
	letter-spacing: 0.2pt;
	color: #2f2f2f; 
	background-color: #ebecec;
	 -webkit-hyphens:auto;-moz-hyphens: auto; -ms-hyphens:auto;hyphens: auto;
	 overflow-y: scroll;
}



h1 { font-size: 37px;  line-height: 40px; font-weight: 400; margin: 0 0 15px -3px; color: #0c6ab6;  -webkit-hyphens:none;-moz-hyphens: none; -ms-hyphens:auto;hyphens: none;} 
h2 { font-size: 20px; line-height:25px; font-weight: 400; margin: 0 0 15px 0; color: #FFF; }
a{  text-decoration: none ; color: #b7dd1e;  outline:none !important; border: none !important;  }
a:hover { color: #000; text-decoration: underline ; }
a:focus, area, area a , map, map area { outline: none; }
b, strong { font-family: 'Open Sans', Arial, sans-serif; font-style: normal; font-weight: 700; }
table {	border-collapse: collapse; border-spacing: 0; border: 0; }
td{	vertical-align:top;}
hr{ border:none; border-bottom:1px solid #000; margin:13px 0; padding:0;	}
img, img a{	border:0; }
sup { margin:0;padding:0; line-height:3px; vertical-align: middle; position: relative; top: -5px; font-size: 10px;}
.clearfloat{ clear:both; height:0px; font-size: 1px; line-height: 0px; margin:0px; padding:0px;display:block; }
.clearfix:after { content:""; display:table; clear:both; }
.rollover { cursor: pointer;}
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 { -webkit-text-size-adjust:none; } /* iPhone Schriftgrössenanpassung beim Drehen verhindern */
#headerTextBox ul{	padding:0;	margin:0;	padding-left: 11px;	margin-left: 6px;	}
#headerTextBox ul li{	list-style-image:url(../images/list.png);	padding: 0px;	margin: 0px;	padding:0;	margin:0;}




/****************************************************************************************************************************/
/*  Basics  */
/****************************************************************************************************************************/

.center { max-width: 1150px; width: 100%; margin: 0 auto; padding: 0 25px; position: relative; min-height: 100px; overflow:hidden;}

#header { width: 100%; height: 120px; margin: 0; background-color: #FFF; position: fixed; z-index: 100000; border-bottom: 3px solid #898989;	}

#logo { float: left; position: relative; margin: 10px 0 0 0; padding-right: 10px}
#logo img{ display: block; height: auto; width: 238px;  }

#naviButton { display: none; position: absolute; cursor: pointer; right: 3%; top: 15px; }

#mainnav { overflow: hidden; float:right; width: 75%;}

ul.mainNavi {  position: relative; display: block; border-bottom: 1px solid #898989; margin: 25px 0 0 0; overflow: hidden; text-align:center;}
ul.mainNavi li { list-style:none;  display:inline-block;  padding: 6px 4%; }
ul.mainNavi li a { font-size: 20px;  height: 20px; display: block; font-weight: 400; padding: 8px 5px; text-decoration: none; color: #000; }
ul.mainNavi li:hover a, ul.mainNavi li.active a { color: #0c6ab6; }
ul.mainNavi li.active a { font-weight: 700; }

ul.subNavi { position: relative; display: block; text-align:center; }
ul.subNavi li { list-style:none;  display:inline-block;   padding: 0px 3% 8px  3%; }
ul.subNavi li a { font-size: 17px;  height: 20px; display: block; font-weight: 400; text-decoration: none; padding: 8px 5px; color: #898989; }
ul.subNavi li:hover a, ul.subNavi li.active a { color: #0c6ab6; }
ul.subNavi li.active a { font-weight: 700; }

#headerImageWrap { padding-top:120px; width: 100%; height: auto; position: relative; -webkit-box-shadow: 8px  8px 20px  8px rgba(200,200,200,1);	-moz-box-shadow: 8px  8px 20px  8px rgba(200,200,200,1);	box-shadow: 8px  8px 20px  15px rgba(180,180,180,1); }
#headerImage { width: 100%; height: auto; position: relative; }
#headerImage img { width: 100%; height: auto; position: relative; display: inline;margin-bottom: -5px; }
#headerImageWrap .center { position: absolute; bottom: 0;  left: 50%; margin-left: -600px;}
#headerTextBox { max-width: 550px; padding: 50px 50px 170px 50px; background: rgba(255,255,255,0.8) url(../images/bg_gruen.png) no-repeat; background-position: bottom; background-size: 750px;  }
#headerTextBox img { width:100% !important; height:auto !important; }

#subcontent { margin: 45px 0; min-height: 50px;}
#subcontent .center { min-height: 0; }
#subcontent .center h3, #subcontent  h3 { font-size: 16px; font-weight: 700; color: #000; margin: 0 0 15px 0; }


/* Referenzbilder */
.vorschauBox { overflow:hidden; width: 101.3333%; margin-left:-1.3333%; }
.box1 { float: left; width:23.6666%; margin: 0 0 0 1.3333% ; position: relative;}

.box1 img { width: 100%; height: auto; }

/* vorher nacher */
.vorhernacherText { text-align:center;}
a .vorhernacherText { text-decoration:none; color:#000; padding:7px 0 20px ; min-height:100px;}
.box1.vorhernachher a:hover   { text-decoration:none !important; color:#666 !important;}
.box1.vorhernachher a:hover .vorhernacherText p, .box1.vorhernachher a:hover  .vorhernacherText h3 { color:#999 !important; }
.box1.vorhernachher:nth-child(6n) { margin: 0 ; }

/* homeLinkBoxen */
.homeBoxLink { position: absolute; bottom: 3px; width:100%; background-color: #0c6ab6;   margin: 0; }
.homeBoxLink p { padding: 2px 15px ;  color: #FFF; font-size: 18px; }


/* Firmenseite */
.colWrap { overflow:hidden; width: 100%; max-width: 1300px; margin: 0 auto 40px auto;}
.box2, .box3 { float: left; width:31.3%; margin: 0 3% 30px 0; background-color: #c5c6c6; color: #000; min-height: 280px; position: relative; }
.box2:nth-child(3n), .box3:nth-child(3n) {margin: 0 0 0 0; }
.box2 h2 { background-color: #b7dd1e;  padding: 0 15px;  color: #000; font-size: 18px; margin: 25px 0;}
.box2 p { margin: 15px;}
.box3 {  background-color: transparent;  min-height: auto;}
.box3 img { width: 100%; height: auto;}
.teamText { position: absolute; bottom: 15px; width: 100%;}
.box3 h2 { background-color: #0c6ab6;  padding: 0 15px ;  color: #FFF; font-size: 18px; margin: 6px 0; width: auto;}
.box3 p { padding: 0 15px ; margin:0; color: #FFF; }
.box3 a { color: #FFF; }



p.linkButton  { display: block; text-align: center; margin: 60px 0;}
p.linkButton a { display: inline-block; background-color: #0c6ab6; color: #FFF; font-size: 15px; padding: 3px 40px 4px 40px;font-weight: bold; }
p.linkButton a:hover { text-decoration: none; background-color: #5b5b5b; }


body.referenzen h3 { text-align:center;  }
body.referenzen .colWrap {  margin-bottom: 5px;}
body.referenzen .vorschauBox {  margin-bottom: 30px;}

/* Footer */ 
#footer { background-color: #5b5b5b; width: 100%; height: auto;  margin-bottom: -20px; position: relative; -webkit-box-shadow: 8px  8px 20px  8px rgba(200,200,200,1);	-moz-box-shadow: 8px  8px 20px  8px rgba(200,200,200,1);	box-shadow: 8px  8px 20px  15px rgba(180,180,180,1); }
#footer .center { padding: 50px 25px 40px 25px; background: url(../images/bg_gruen_footer.png) no-repeat; background-position: 0px bottom ; background-size: 650px; }
.footerContent { padding: 0 0 0 50px;}
#footer p, #footer a { color: #b7dd1e; text-decoration: none;}

#toplink { margin: 45px 0 0 0; cursor:pointer; }

#footer p.footerlink a { color:#FFF; }
#footer p.footerlink a:hover { color:#b7dd1e; }



/* Home */

#sliderBox { padding-top:120px; position: relative; height: auto;}
#slideBottom { position: absolute; width: 100%; z-index: 1100; bottom:0; height: 40%; background:url(../images/bg_gruen_footer.png) no-repeat; background-position: 0 bottom ; background-size: 100%; }
#sliderBox .center { position: absolute; width: 100%; z-index: 1001; bottom:0; margin: 0; position: absolute; bottom: 0;  left: 50%; margin-left:-600px }
#homeTitel {  background: rgba(255,255,255,0.8) ; width: 550px; height: 300px; margin-left: 0; }
#homeTitel h1 {  font-size: 60px; padding: 20px 50px ; line-height: 65px;}
#banner {  position: absolute; width: 200px; z-index: 1002; top:-2px; margin: 0; position: absolute;  left: 600px; }
#banner img {  width:100%; height:auto;}

#homeTeaserBox { background-color: #b7dd1e; -webkit-box-shadow: 8px  8px 20px  8px rgba(200,200,200,0.6);	-moz-box-shadow: 8px  8px 20px  8px rgba(200,200,200,0.6);	box-shadow: 8px  8px 20px  15px rgba(180,180,180,0.6); }
#homeTeaser { padding: 20px 0 40px 15px;  }
#homeTeaser p, #homeTeaser a { font-size: 16px; line-height: 22px; color: #000; }
#homeTeaser h2{ font-size: 24px; line-height: 28px; color: #000; font-weight: 700; margin: 0;}


.cookieinfo {  background:rgba(200,200,200,0.75) !important; } 
.cookieinfo span { max-width: 70%; float:left; font-size:14px;font-family: 'Open Sans', Arial, sans-serif;  }
.cookieinfo span a { text-decoration:underline !important;  }
.cookieinfo span a:hover { color:#000 !important; font-weight:normal !important; }
.cookieinfo-close { max-width:150px;  min-width:50px !important;  float:right;  margin: 0 auto 5px auto; display:inline-block !important; border-radius:0 !important;  font-size:16px; background-color:#000 !important; color:#FFF !important;}
.cookieinfo-close:hover { background-color:#ccc !important;}





/****************************************************************************************************************************/
/* #Media Queries
/****************************************************************************************************************************/


@media only screen and (max-width: 1300px) {
	
	.colWrap {  width: 94%;  margin: 0 auto 40px auto;}
}

@media only screen and (max-width: 1200px) {	

	.center { margin: 0 3%; padding: 0; width: 94%; }
	#headerImageWrap .center {  left: auto; margin-left: 3%; }
	#footer .center { padding: 50px 0px 40px 0px; }
	
	.box2 h2, .box3 h2, .homeBoxLink p { font-size:16px; }
	.box2 p, .box3 p { font-size:13px; line-height: 18px;}
	#sliderBox .center { left: 3%; margin-left:0; width: 90%; }
	
	
}

@media only screen and (max-width: 1100px) {	

	.mainnav { overflow: hidden; float:right; width: 70%;}
	#logo {margin: 20px 0 0 0;}
	#logo img{ width: 180px;  }
	
	ul.mainNavi li a { font-size: 16px;  height: 20px;   }
	ul.subNavi li a { font-size: 14px;  }
	
	#headerTextBox {  padding: 50px 50px 120px 50px; background-position: 0 100%;  }

	#homeTitel h1 {  font-size: 50px; padding: 20px 50px ; line-height: 55px;}
}


@media only screen and (max-width: 900px) {	

	body{ font-size: 13px; line-height:18px; }
	
	h1 { font-size: 32px;  line-height: 38px; } 
	h2 { font-size: 18px; line-height:22px; }

	#header {  height: 80px; 	}
	
	#logo {margin: 5px 0 0 0;}
	#logo img{ width: 160px;  }

	.center { overflow:visible;}
	
	#naviButton { display: block; position: absolute; right: 0; top: 30px; z-index: 120; } 
	#naviButton img { width: 30px; height: auto;  } 
	
	#mainnav { position: relative; display: none; z-index: 10000; clear:both; width: 100%; background-color: #FFF; margin: 30px 0 0 0; padding: 0; }

	ul.mainNavi  { text-align:left; margin:0 0 0 0}	
	ul.mainNavi li { display:block;  padding: 0 0 0 10px; }

	ul.subNavi { text-align:left; }
	ul.subNavi li { display:block;  padding: 0 0 0 10px; }
	
	#headerImageWrap { padding-top:80px; }
	#headerImageWrap .center { bottom: -1px; }
	#sliderBox { padding-top:80px;}
	
	#toplink { width: 35px ; height: auto; }
	

}


@media only screen and (max-width: 768px) {	

	.box2, .box3 { width:48%; margin: 0 3% 0 0; }	
	.box2:nth-child(3n+1), .box3:nth-child(3n+1) {margin: 0 3% 30px 0; }
	.box2:nth-child(2n+1), .box3:nth-child(2n+1) {margin: 0 0 30px 0; }
	#sliderBox .center { left: 0; margin-left:0; }
	#homeTitel {  height: 220px; margin-left: 3%; width: 60%;}
	#homeTitel h1 {  font-size: 45px; padding: 15px 20px ; line-height: 50px;}
	#headerTextBox {  padding: 50px 50px 80px 50px;  background: rgba(255,255,255,0.8) url(../images/bg_gruen_footer.png) no-repeat; background-position: bottom; background-size: 750px; }
	
	#banner {  width: 150px; z-index: 1002; top:-2px; margin: 0; position: absolute;  left: 420px; }
	
}


@media only screen and (max-width: 650px) {	

	#headerImageWrap .center { position: relative; bottom: auto;  top: 1px; left: 0; transform: translateX(0%); }
	#headerTextBox { padding: 50px 50px 120px 50px; background-position: 0 100%;  }

	.box1 { width:49%; margin: 0 1% 0 0; }
	.footerContent { padding: 0 0 0 0px;}
	
	#footer .center { padding: 50px 0 40px 45px; background-position: 0px bottom ; background-size: 100%; width: auto;}
	
	#homeTitel {  height: 180px; }
	#homeTitel h1 {  font-size: 30px; padding: 15px 0 0 20px ; line-height: 34px;}
	#homeTeaser { padding: 20px 0 40px 0px;  }
	
	#banner {   left: 350px; }
	

}


@media only screen and (max-width: 550px) {	

	#header {  height: 60px;  }
	#headerImageWrap { padding-top:60px; }
	#sliderBox { padding-top:60px;}

	#logo {margin: 3px 0 0 0;}
	#logo img{ width: 120px;  }

	#headerTextBox { width: auto; padding: 30px 3% 120px 3%; }
	
	#naviButton { right: 3%; top:20px; } 
	
	.box1 { width:49%; margin: 0 1% 0 0; }
	.footerContent { padding: 0 0 0 0px;}
	
	.center { padding: 0 3% ; margin: 0 !important; width: auto;}
	#headerImageWrap .center {padding: 0  }
	#footer .center { padding: 50px 25px 40px 25px; background-position: 0px bottom ; background-size: 100%; }
	#sliderBox .center { width: 90%; }
	
	.box2, .box3 { width:100%; margin: 0 0 30px 0; }	
	.box2:nth-child(3n+1), .box3:nth-child(3n+1) {margin: 0 0 30px 0; }
	.box2:nth-child(2n+1), .box3:nth-child(2n+1) {margin: 0 0 30px 0; }
		
	#homeTitel h1 {  font-size: 25px;  line-height: 30px;}
		
	#homeTeaser p, #homeTeaser a { font-size: 14px; line-height: 20px; color: #000; }
	#homeTeaser h2{ font-size: 20px; line-height: 23px; color: #000; font-weight: 700; margin: 0;}
	
	#banner {   left: auto; right:0px; }
	
	
}

@media only screen and (max-height: 450px) {
	#header { position: absolute; }
	
}

@media only screen and (max-width: 400px) {
	.box1 { width:100%; }
	#homeTitel h1 {  font-size: 25px; padding: 20px 20px ; line-height: 30px; width:150px;}
	#sliderBox .center {  position: relative; }
	#homeTitel {  position: relative; height: 200px; margin-left: 0; width: 100%; background-color: #FFF; }
	#sliderBox .center { left:0; transform: translateX(0%); }
	
		#banner {   left: auto; right:0px;top:2px; }
}








@media only print {

	body { width: 750px; font-size: 13px; line-height:18px; background-color: #FFF;}
		
	#mainnav { display: none; }
	
	#header {  position: relative; height: 60px;  }
	#headerImageWrap { padding:20px 0; width: 500px;}
	#sliderBox { padding-top:60px;}

	#logo {margin: 3px 0 0 0;}
	#logo img{ width: 120px;  }

	#headerTextBox {  max-width: 100%; width: auto;  padding: 20px 0;}
	
	#naviButton { display: none; } 
	
	
	.center { padding: 0 3% ; margin: 0 !important; width: auto;}
	#headerImageWrap .center { padding: 0; position: relative; left: auto; margin-left: 3%; margin-top: 20px;}
	#footer .center { padding: 0; background-position: 0px bottom ; background-size: 100%; }
		
	#homeTitel h1 {  font-size: 25px;  line-height: 30px;}
		
	#homeTeaser p, #homeTeaser a { font-size: 14px; line-height: 20px; color: #000; }
	#homeTeaser h2{ font-size: 20px; line-height: 23px; color: #000; font-weight: 700; margin: 0;}
	
	#toplink { display: none; }

	#footer, #headerImageWrap  { -webkit-box-shadow: none;	-moz-box-shadow: none;	box-shadow: none; }

	.footerContent, .center { padding: 0;}
	
	 .colWrap {page-break-after: always;}
	 


#headerTextBox, #footer .center , #slideBottom { background: none;  }
#footer { background-color: transparent; }


}