@darkblue: #1b4d64;
@homedarkblue: #031d2a;
@doveblue: #7b8f9b;
@footercolor: #213945;

@fontPath: "fonts";
@imagePath: "images";

.font-size(@sizeValue) {
  @remValue: round((@sizeValue / 16),2);
  @pxValue: @sizeValue;  
  font-size: ~"@{remValue}rem";
}

.line-height(@sizeValue) {
  @remValue: round((@sizeValue / 16),2);
  @pxValue: @sizeValue;
  line-height: ~"@{pxValue}px"; 
  line-height: ~"@{remValue}rem";
}

@font-face {
    font-family: 'TTProstoSansCondensedThin';
    src: url('@{fontPath}/TTProstoSansCondensed-Thin.eot'); /* IE9 Compat Modes */
    src: url('@{fontPath}/TTProstoSansCondensed-Thin.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('@{fontPath}/TTProstoSansCondensed-Thin.woff') format('woff'), /* Modern Browsers */
         url('@{fontPath}/TTProstoSansCondensed-Thin.ttf') format('truetype'), /* Safari, Android, iOS */
         url('@{fontPath}/TTProstoSansCondensed-Thin.svg#TTProstoSansCondensed-Thin') format('svg'); /* Legacy iOS */
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

@font-face {
    font-family: 'TTProstoSansCondensedLight';
    src: url('@{fontPath}/TTProstoSansCondensed-Light.eot'); /* IE9 Compat Modes */
    src: url('@{fontPath}/TTProstoSansCondensed-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('@{fontPath}/TTProstoSansCondensed-Light.woff') format('woff'), /* Modern Browsers */
         url('@{fontPath}/TTProstoSansCondensed-Light.ttf') format('truetype'), /* Safari, Android, iOS */
         url('@{fontPath}/TTProstoSansCondensed-Light.svg#TTProstoSansCondensed-Light') format('svg'); /* Legacy iOS */
    font-style: normal;
    font-weight: bold;
    text-rendering: optimizeLegibility;
}

@font-face {
    font-family: 'TTProstoSansCondensedRegular';
    src: url('@{fontPath}/TTProstoSansCondensed-Regular.eot'); /* IE9 Compat Modes */
    src: url('@{fontPath}/TTProstoSansCondensed-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('@{fontPath}/TTProstoSansCondensed-Regular.woff') format('woff'), /* Modern Browsers */
         url('TTProstoSansCondensed-Regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('TTProstoSansCondensed-Regular.svg#TTProstoSansCondensed-Regular') format('svg'); /* Legacy iOS */
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

@thin-font-family: "TTProstoSansCondensedThin";
@light-font-family: "TTProstoSansCondensedLight";
@regular-font-family: "TTProstoSansCondensedRegular";


html {
	-webkit-font-smoothing: antialiased;
}

html, body {
	height: 100%;
	min-height: 100%;
	padding: 0;
	.standart-font;
	padding: 0;
	margin: 0;
}

body {
	background: url('@{imagePath}/bg-content.jpg') no-repeat;
  background-position: 0 0;
 	background-color: @darkblue; 
}

h1, h2, h3, h4 {
  color: white;
}

h1, h2 {
  font-family: @regular-font-family;
}


h1 {
	.font-size(24);
	.line-height(28);
	margin: 0;
	margin-bottom: 40px;
}

h2 {
	.font-size(18);
	.line-height(21);
	margin: 0;
	margin-bottom: 20px;
}

h3 {
	font-family: @thin-font-family;
	.font-size(16);
	margin-bottom: 0;
}


p {
 margin: 0;
 margin-bottom: 20px;
 padding: 0;
}

img {
 display: block;
 border: 0;
}

img.auto-size {    
  height: auto;    
  max-width: 100%;    
}

ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
	margin-bottom: 20px;
}

li {
	.standart-font;
}

.clear {
	clear: both;	
}

.standart-font {
	font-family: @thin-font-family;
	.font-size(18);
	.line-height(21);
	color: white;	
}

a:link, a:active, a:visited, a:hover {
	.standart-font;
	color: white;
	text-decoration: none;
}

a:hover {

}

/*-------------------------------LAYOUT-------------------------------------*/

#container {
	width: 100%;
	height: 100%;
	vertical-align: top;
	text-align: center; /* IE zentrieren Hack */
	margin: 0 auto;	
}

#header, #main, #footer {
	display: block;
	width: 100%;
}

#headercontent, #maincontent,
#submenuecontent {
	max-width: 940px;
	margin: auto;
}

#footercontent {
	max-width: 960px;
	margin: auto;
}

#header, #headercontent {
 position: relative; 
 text-align: left;
 z-index: 9000;
}

#headercontent {
	height: 97px;
	padding-top: 28px;
}

#main {
	min-height: 100%;
	text-align: left;	
	.clear;
	margin: 0;
	/*margin-top: 14px;*/
	padding: 0;
	border: 0;	
}

#maincontent {
	padding-top: 115px;
	
	li {
		background: url('@{imagePath}/list-marker.png') 0 7px no-repeat;
		padding-left: 15px;		
	}
}


#footer {
	display: block;
	width: 100%;
	background-color: @footercolor; 
	min-height: 140px;
  .font-size(16);
	.line-height(20);	
	padding-top: 25px;	
	padding-bottom: 50px;
	text-align: left;	
	
}

#logo {
 display: block;
 float: left; 
   
 a:link, a:active, a:visited, a:hover {
 	display: block;
 	img {
	 	width: 249px;
	 	height: 62px; 		
	}
 }
 
}

body.overlay-on { 
	overflow: hidden;	
}

.row {
	clear: both;
}

.col-left {
	float: left;
	width: 38.54%;
}

.col-right {
	margin-left: 41.15%;
}

#system-message {

	.font-size(1);
	padding: 25px 0;
	
	a.close {
		display: none;
	}
	
	h4 {
		.font-size(1);
		margin-right: 5px;
		margin-top: 0;
		margin-bottom: 10px;
		float: left;
	}
}

/*-------------------------------HEADER-------------------------------------*/
#headercontent {
 #topnav {
		text-align: right;
		float: right;
		
		#menue-icon {
			.font-size(21);
			background: url('@{imagePath}/menue-off.png') 0 no-repeat;
			background-position: right 3px;
			padding-right: 32px;
			margin-bottom: 12px;
			cursor: pointer;
		}
		#header-contact {
			a:link, a:active, a:visited, a:hover {
				.font-size(16);
				.line-height(18);
			}			
			#tel-nr {
				background: url('@{imagePath}/tel-icon.png') 0 no-repeat;
				padding-left: 15px;
			}
			#email {
				background: url('@{imagePath}/email-icon.png') 0 no-repeat;
				background-position: right 116px center;
				padding-left: 15px;
			}
		}
	}
}



/*-------------------------------NAV-------------------------------------*/

#sidenav, #mainnav, #subnav {
	display: block;
	/*width: 17.7%;*/	
	list-style-type: none;
	
	li {
		
		text-align: left;			
		
		a:link, a:active, a:visited, a:hover {
			display: block;		
			color:  white;
			padding: 0;
			margin: 0;
			margin-right: 2.6%;
			margin-bottom: 4px;
		}
		 	
		&.active a, a:hover {
			color: @doveblue;
		}
	}
}

body.overlay-on #headercontent #topnav #menue-icon { 
	background-image: url('@{imagePath}/menue-on.png');	
}

#footer #footernav {					
		li {
			width: 15%;	
			background: url('@{imagePath}/list-marker.png') 0 9px no-repeat;
			padding-left: 15px;
			margin-bottom: 25px;
			text-align: left;	
			float: left;
			
			&.kontakt-menu {
					margin-right: 49%;				
			}		
		
			a:link, a:active, a:visited, a:hover {
					width: 100%;	
					.line-height(20);				
			}	
		}
		
		li.nomargin {
			margin-right: 0;
		}
}

.nav-overlay {
		background: rgba(0, 56, 80, 0.88) repeat scroll 0 0;
    color: rgb(0, 20, 122);
    display: none;
    height: 100vh;
    position: fixed;
    top: 0;
    right: 0;   
    width: 100%;
    z-index: 8800;        
    
    .pos-center {
    	height: 100vh;
    	margin-top: 167px; 
    	
			#mainnav {
				width: 940px;
				position: relative;
				margin: 0 auto;
					
				li {
					width: 9%; 
					padding: 12px 9.6% 12px 0;
					float: left;
					border-top: 1px solid white;
					border-bottom: 1px solid white;
					
					&.menue-cut {
						width: 11.7%;
						padding-right: 0;
						margin-right: 20px;
						text-align: right;
					}
					&.menue-last {
						width: 11.7%;
						padding-right: 0;
							text-align: right;
					}					
				}
			}//end #mainav
			
			#subnav {
				width: 940px;
				margin: 0 auto;
				margin-top: 15px;
				text-align: center;
								
				.nav-child {
						width: 48.87%;
						border-bottom: 1px solid white;				
						
						li {
							display: table-cell;
							width: 35.84%;
							float: left;
							border-bottom: 1px solid #698a99;
							padding: 2% 2.22% 2% 0;
							
							&.last {
								border: 0;								
							}
							
							a:link, a:active, a:visited, a:hover {
								
								height: 40px;
								font-family: @light-font-family;
								.font-size(16);
								.line-height(16);
								vertical-align: middle;
							}
							
							&:nth-of-type(3n) {
								width: 23%;
								padding-right: 0;
								
								a:link, a:active, a:visited, a:hover {
									width: 100%;
									text-align: right;									
								}
																
							}							
							
						}												
					}// end .nav-child					
			}// end #subnav
		}//end pos-center
}// end nav-overlay

body.responsiveView {

	.nav-overlay {	
	
		overflow-y: scroll;
		
		#mainnav-overlay {	
						
				li.active {
					a:link, a:active, a:visited, a:hover {
						color: @doveblue;
					}
				
					li {
						a:link, a:active, a:visited, a:hover {
						color: white;
						}		
					}
				
					li.active {
						a:link, a:active, a:visited, a:hover {
							color: @doveblue;
						}
					}	
				}
		}	// end #mainnav-overlay
	} // end .nav-overlay
} // end body.responsiveView


/*-------------------------------HOME-------------------------------------*/

#home {
	background-image: none;
	
	#container {
		background: url('@{imagePath}/bg-home-intro.jpg') no-repeat;
		background-position: center 0;
			
		#maincontent {
			max-width: 1260px;
			
			ul {
				margin-bottom: 30px;
				li {
					background: url('@{imagePath}/list-marker.png') 0 10px no-repeat;
					margin-left: 42px;
					padding-left: 15px;
				}
			}
					
			#home-intro {
				width: 940px;
				height: auto;
				margin: 0 auto;
				padding-bottom: 409px;		
				
				#scroll-down img {
					margin: 0 auto;
					cursor: pointer;
				}		
			}
			
			#home-main {
				width: 100%;
				background-color: @homedarkblue;
				padding-top: 38px;
				padding-bottom: 38px;
				
				#home-box {
					background: url('@{imagePath}/bg-box-start.jpg') no-repeat;
					position: relative;
					width: 890px;
					font-family: @light-font-family;
					margin: 0 auto;
					padding: 25px;
				}
				
				#home-content {
					width: 940px;
					margin: 0 auto;
					
					#home-banner {
						margin-top: 9px;
						margin-bottom: 25px;
					}
				}
			}
					
		}
	}
}

/*-------------------------------AKTUELLES-------------------------------------*/

#aktuelles {
	h1 {
		font-family: @thin-font-family;
		.font-size(14);	
		padding-bottom: 10px;
		border-bottom: 1px solid white;
		margin-bottom: 0;	
	}
	
	h2 {
			font-family: @thin-font-family;
			.font-size(16);
	}
	
	.leading-aktuelles-date,.item-date {
		.font-size(14);
		.line-height(14);
		margin-bottom: 13px;
	}
	
	.row-1,.row-2,.row-3 {
		width: 300px;
			display: block;
		float: left;
	}
	
	.row-2 {
		margin-left: 20px;
	}
	
	.row-3 {
		float: right;
	}
	
	.leading-aktuelles-content {
		width: 300px;
		font-family: @thin-font-family;
		.font-size(16);
		.line-height(18);		
		padding: 20px 0;
		border-bottom: 1px solid white;
				
		&.no-margin {
			margin-right: 0;
		}
		
		a,a:link,a:active,
		a:visited, a:hover {
			font-family: @thin-font-family;
			.font-size(16);
		}
		
		.leading-aktuelles-head {		
			img {
				width: 300px;	
			  margin-bottom: 13px;		
			}			
		} //end .leading-aktuelles-head		
		
	}
	
	.row .leading-aktuelles-content {
		margin-right: 20px;
		float: left;
	}
	
	.item-page {
		margin-bottom: 80px;
		.item-image {
			margin-top: 20px;
		}
		.item-date {
			margin-top: 20px;
		}
	}
}

/*-------------------------------LEISTUNGEN-------------------------------------*/

#leistungen {
	#maincontent 
	{
		margin-bottom: 20px;		
	}
	
	h1 {
		font-family: @thin-font-family;
		.font-size(14);	
		padding-bottom: 10px;
		border-bottom: 1px solid white;
		margin-bottom: 0;	
	}
	
	.leading-item {
		padding: 20px 0;
		border-bottom: 1px solid white;
		
		.leading-item-content {
			font-family: @thin-font-family;
						
			.leading-item-introimg {
				margin-right: 20px; 
				float: left;
			}
			
			.leading-item-maintxt {	
			  height: 169px;
			 			  
				h2 {
					position: relative;
					top: -5px;
					font-family: @light-font-family;
					margin-bottom: 15px;			
				}
				p {
					margin: 0;
				}
				
				.leading-item-introtext {
					min-height: 103px;
				}
				
				.leading-item-readmore {
				 position: relative;
				 .font-size(18);
				 bottom: 0;
				 cursor: pointer;
				}	
		  }//end .leading-item-maintxt
		  .leading-item-fulltxt {
		  	padding-top: 20px;
		  	float: none;
		  }
		}// end .leading-item-content
	} // end .leading-item
} //end #leistungen

#maincontent .item-page.leistungen {
	margin-bottom: 50px; 
	h1 {
		width: 100%;
		font-family: @thin-font-family;
		font-family: @thin-font-family;
		.font-size(14);	
		padding-bottom: 10px;
		border-bottom: 1px solid white;
		margin-bottom: 20px;	
	}
	h2 {
		font-family: @light-font-family;
	}
	.item-image {
		margin-bottom: 30px;
	}
	img {
		margin-top: 20px;
		margin-bottom: 20px;
	}
	ul.numbering {
		list-style-type: none;
		li {
			background: none;
			padding-left: 0;			
		}
	}
	li {
		margin-bottom: 20px;
	}	
}


/*-------------------------------TEAM-------------------------------------*/

#team #maincontent {
	
	padding-top: 95px;
	
	.leading-item {
		display: table;
		width: 47.88%;
		float: left;
		padding: 20px 0;
		border-bottom: 1px solid white;
		margin-right: 2.12%;
		
		&.no-margin {
			margin-right: 0;
		}
		
		&.headline {
			width: 100%;
			margin-right: 0;
			
			h2 span {
				.font-size(14);
			}
			
			p {
				float: left;
				margin-right: 20px;
			}
		}
		
		.leading-item-introimg {
			float: left;
			margin-right: 20px;
			
			img {
				max-height: 138px;
			}
		}
		h2 {
			position: relative;
			top: -5px;
			font-family: @light-font-family;
			margin-bottom: 0;
		}
		.leading-item-maintxt {
			display: table-cell;
			height: 110px;
			font-family: @light-font-family;
			.font-size(11);
			.line-height(12);	
			vertical-align: bottom;
						
			p {				
				margin-bottom: 0;
			}
		}
	}
	#cat-children {
		margin-bottom: 50px; 
		
		h2 {
			font-family: @light-font-family;
			padding-bottom: 20px;
			margin-top: 50px;
			margin-bottom: 20px;
			border-bottom: 1px solid white;
		}
		
		.cat-children-item {
		
			padding-bottom: 20px;
			border-bottom: 1px solid white;
		
			.cat-children-item-introimg {
				float: left;
				margin-right: 20px;
			}
			
			h3 {
				font-family: @light-font-family;
				.font-size(14);
				.line-height(16);
				margin-bottom: 5px;	
			}		
					
			.cat-children-item-introtxt {
				font-family: @light-font-family;
				.font-size(11);
				.line-height(12);	
				
				p {				
					margin-bottom: 0;
				}
				
				.cat-children-item-readmore {
					cursor: pointer;
				}
			}
			
			.cat-children-item-fulltxt {
				font-family: @light-font-family;
			  .font-size(14);
				.line-height(16);	
				
				p {
					margin-top: 18px;
				}
			}
		}
		
	}
}

/*-------------------------------PROJEKTE-------------------------------------*/

#projekte {

 h1 {
		font-family: @thin-font-family;
		.font-size(14);	
		padding-bottom: 10px;
		border-bottom: 1px solid white;
		margin-bottom: 20px;	
		
		a, a:link, a:visited, a:active,
		a:hover {
			font-family: @thin-font-family;
			.font-size(14);
		}
 }

 #leading-projects {
	display: block;
	border-bottom: 1px solid white;
	
	.leading-project-content {
			display: block;
			width: 300px;
			margin-right: 20px;
			margin-bottom: 20px;
			float: left;			
			
			&.no-margin {
					margin-right: 0;
			}	
			
			.leading-project-introimg img {
				width: 100%;
				margin-bottom: 10px;			
			}
			
			.leading-project-txt {
				font-family: @thin-font-family;
				.font-size(12);
				.line-height(14);
				
				h2 {
					font-family: @light-font-family;
					.font-size(16);
					.line-height(18);
					margin-bottom: 5px;
				}
			}
		}
	} //end .leading-projects
	
	#project-list {
		border-bottom: 1px solid white;
		margin-top: 20px;
		margin-bottom: 20px;
		
		h2 {
		
		}
		
		.project-list-entry {
			display: block;
			width: 50%;
			font-family: @thin-font-family;
			.font-size(12);
			.line-height(14);
			margin-bottom: 20px;
			float: left;
			
			h3 {
				font-family: @light-font-family;
				.font-size(14);
				.line-height(16);
				margin-bottom: 5px;
			}
			
			&.no-margin {
					margin-left: 0;
			}
		}
	}
	
	#project-detail {
		font-family: @thin-font-family;
		.font-size(16);
		.line-height(18);
		
		h2 {
			font-family: @light-font-family;
			.font-size(18);
			.line-height(20);
		}
				
		#project-detail-gallery {
			float: left;
			margin-right: 20px;
			margin-bottom: 20px;
						
			#project-img-thumbs {
				margin-top: 10px;
				
				.thumb-entry {
					float: left;
					margin-right: 10px;
					margin-bottom: 10px;
					cursor: pointer;
				}		
			}
		}//end #project-detail-gallery
		
		#project-maintxt {
			border-top: 1px solid white;
			padding-top: 20px;
			margin-bottom: 50px;
			
			hr {
				height: 1px;
				border: none;
				background-color: white;
			}
			
			ul {
				width: 100%;
				display: block;
				clear: both;
				li {
					display: block;
					width: 45%;
					float:left;
					&.second-col {
						display: inline;
						float: right;
					}
				}
			}
		}		
	}
}

/*-------------------------------RATGEBER-------------------------------------*/

#ratgeber #maincontent {
	h1 {
		font-family: @thin-font-family;
		.font-size(14);	
		padding-bottom: 10px;
		border-bottom: 1px solid white;
		margin-bottom: 0;	
	}
	
	.category-desc img {
		margin-top: 20px;
		margin-bottom: 35px;
	}
	
	.leading-ratgeber-content {
		padding-bottom: 10px;
		border-bottom: 1px solid white;
		margin-bottom: 35px;
		
		.leading-ratgeber-head h2 {
			font-family: @thin-font-family;
			.font-size(20);	
			.line-height(24);
			cursor: pointer;
		}
	}
	
}

/*-------------------------------REFERENZEN-------------------------------------*/

#referenzen #maincontent {
	h1 {
		font-family: @thin-font-family;
		.font-size(14);	
		padding-bottom: 10px;
		border-bottom: 1px solid white;
		margin-bottom: 0;	
	}
	
	.category-desc img {
		margin-top: 20px;
		margin-bottom: 35px;
	}
	
	#referenzen-navi {
		margin-bottom: 100px;
		
		a, a:active, a:link, a:visited,
		a:hover {
			display: block;
			margin-bottom: 20px;
			cursor: pointer;
		}
	}
	
	.leading-referenzen-content {
		padding-bottom: 10px;
		border-bottom: 1px solid white;
		margin-bottom: 35px;
		
		.leading-referenzen-head h2 {
			font-family: @thin-font-family;
			.font-size(20);	
			.line-height(24);
			cursor: pointer;
		}
	}
	
	#referenzen-planer-list, #referenzen-privat-list,
	#referenzen-firmen-list {
		margin-top: 100px;
	}
	
}

/*-------------------------------KONTAKT-------------------------------------*/

#kontakt {
	h2 {
		font-family: @thin-font-family;
		.font-size(14);	
		padding-bottom: 10px;
		border-bottom: 1px solid white;
		margin-bottom: 25px;	
	}
	#kontakt-header-img {
		float: left;
		margin-right: 25px;
	}
	
	#kontakt-txt {
				
		h2 {
			.font-size(18);
			margin: 0;
			margin-bottom: 20px;
			border: 0;
		}
	}
	
	#kontakt-map {
		width: 100%;
		height: 450px;
		margin-bottom: 50px;
		
		.labels {
			color: white;
			border: 1px solid black;
			margin-top: 5px;
		}
	}
}


/*-------------------------------IMPRESSUM-------------------------------------*/

#impressum #maincontent {
	font-family: @light-font-family;
	.font-size(14);
	.line-height(16);
	margin-top: 80px;
	
	h2 {
		font-family: @light-font-family;
		font-weight: bold;
		.font-size(18);
		.line-height(20);
	}
	
	a,a:link,a:active,a:visited,a:hover {
		font-family: @light-font-family;
		.font-size(14);
		.line-height(16);
	}
}

/*-------------------------------FOOTER-------------------------------------*/

#footer {
	#footer-contact {
		width: 33%;
		float: left;		
	}
	
	#footer-tel {
		width: 33%;
		float: left;
		
		#footer-www {
			display: block;
			margin-top: 50px;
		}		
	}
	#footer-copy {
		font-family: @thin-font-family;
		.font-size(12);
		margin-top: 102px;
	}
}