/* Local Fonts	*/

/* open-sans-300 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/open-sans-v34-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/open-sans-v34-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v34-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v34-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v34-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v34-latin-300.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v34-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/open-sans-v34-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v34-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v34-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v34-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v34-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-500 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/open-sans-v34-latin-500.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/open-sans-v34-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v34-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v34-latin-500.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v34-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v34-latin-500.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-600 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/open-sans-v34-latin-600.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/open-sans-v34-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v34-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v34-latin-600.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v34-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v34-latin-600.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-700 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/open-sans-v34-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/open-sans-v34-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v34-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v34-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v34-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v34-latin-700.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-800 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/open-sans-v34-latin-800.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/open-sans-v34-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v34-latin-800.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v34-latin-800.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v34-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v34-latin-800.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-300italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/open-sans-v34-latin-300italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/open-sans-v34-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v34-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v34-latin-300italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v34-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v34-latin-300italic.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/open-sans-v34-latin-italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/open-sans-v34-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v34-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v34-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v34-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v34-latin-italic.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-500italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/open-sans-v34-latin-500italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/open-sans-v34-latin-500italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v34-latin-500italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v34-latin-500italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v34-latin-500italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v34-latin-500italic.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-600italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/open-sans-v34-latin-600italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/open-sans-v34-latin-600italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v34-latin-600italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v34-latin-600italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v34-latin-600italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v34-latin-600italic.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-700italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/open-sans-v34-latin-700italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/open-sans-v34-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v34-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v34-latin-700italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v34-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v34-latin-700italic.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-800italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 800;
  src: url('../fonts/open-sans-v34-latin-800italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/open-sans-v34-latin-800italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v34-latin-800italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v34-latin-800italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v34-latin-800italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v34-latin-800italic.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* Reset CSS */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}

/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}body{line-height:1;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-collapse:collapse;border-spacing:0;}

/* LESS Variablen und Klassen */

/* Bestimmung der Variablen für die Farben */

/* Primärfarbe & Abstufungen */
@color:#00a5aa;
@light-color: (@color + #111);
@lighter-color: (@color + #222);
@dark-color: (@color - #111);
@darker-color: (@color - #222);

/* Schriftfarbe Brottext & Abstufungen */
@font-color: #2f2715;
@font-light-color: (@font-color + #111);
@font-lighter-color: (@font-color + #333);
@font-dark-color: (@font-color - #111);
@font-darker-color: (@font-color - #333);

/* Schriftfarbe Navigationselemente, Buttons etc. */
@nav-color: #fff;

/* Hintegrundfarbe */
@background-color: #fff;


/* Klasse für abgerundete Ecken */
.rounded-corners (@radius: 4px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -ms-border-radius: @radius;
  -o-border-radius: @radius;
  border-radius: @radius;
}

/* Klasse für Spaltenlayout */
.columns (@count: 2) {
  -webkit-column-count: @count;
  -moz-column-count: @count;
  -ms-column-count: @count;
  -o-column-count: @count;
  column-count: @count;
  -webkit-column-gap:20px;
  -moz-column-gap:20px;
  -ms-column-gap:20px;
  -o-column-gap:20px;
  column-gap:20px;
}

/* Klasse für Headlines */
.headline{
	color:@darker-color;
	padding-bottom:10px;
	margin-bottom:20px;
	border-bottom: 1px dotted ;
	border-bottom-color:@lighter-color + #222;
	line-height:normal;
	font-weight:300;
}

/* Klasse für Schlagschatten hart nach unten */
.drop-shadow(@x-axis: 0, @y-axis: 1px, @blur: 2px, @alpha: 0.4) {
    -webkit-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
    -moz-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
    box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
}

/* Klasse für Schlagschatten weich */
.box-shadow{
	-moz-box-shadow: 0 0 5px #ccc;
	-webkit-box-shadow: 0 0 5px #ccc;
	box-shadow: 0 0 5px #ccc;
}

/* Klasse für sanften Übergang beim Hover */
.transition-duration(@duration: 0.3s) {
    -moz-transition-duration: @duration;
    -webkit-transition-duration: @duration;
    -o-transition-duration: @duration;
    transition-duration: @duration;
}

/* Klasse für Farbverläufe */
.gradient{
    background: @color;
    background: -webkit-gradient(linear, left bottom, left top, color-stop(0, @darker-color), color-stop(1, @color));
    background: -ms-linear-gradient(bottom, @darker-color, @color);
    background: -moz-linear-gradient(center bottom, @darker-color 0%, @color 100%);
    background: -o-linear-gradient(@dark-color, @color);
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@darker-color,@color));
}

path{
	fill:@color;	
}


/* CSS REGELN */

html{
	height:100%;
}

body{
	background:@background-color;
	font-family: 'Open Sans', sans-serif; /* hier kann die Schriftart eingestellt werden */
	font-size:16px;
	line-height:24px;
	color:@font-color;
	height:100%;
}

/* Header */
body > header {
  background:@font-color;
  margin-bottom:10px;
  .drop-shadow;
}

/* fixe Breite für die Hauptelemente und Zentrierung im Browser */
#container,
#header-container,
nav ul{
	width:1280px;
	margin:0 auto;
	overflow:auto;
}

#container{
	min-height:calc(~"100% - 300px");
	min-height:-webkit-calc(~"100% - 300px");
}

/* Logo*/
#logo{
	float:left;
	width:calc(~"50% - 20px");
	width:-webkit-calc(~"50% - 20px");
	max-height:150px;
	margin:10px;
	padding:10px 0;	
	
	img{
	max-width:100%; height:auto;
	max-height:150px; width:auto;
}
}

/* Suche */
#search{
	float:right;
	width:calc(~"50% - 20px");
	width:-webkit-calc(~"50% - 20px");
	margin:10px;
	padding:10px 0;
	overflow:auto;
	
	input{
	border:1px solid #ddd;
	color:@font-lighter-color;
	font-style:italic;
	height:18px;
	padding:5px;
	margin:0px;
	float:left;
	width:calc(~"100% - 70px");
	width:-webkit-calc(~"100% - 70px");
	.rounded-corners;
	
	}
	
	button{
	background:@lighter-color;
	border:none;
	float:right;
	height:30px;
	width:50px;
	.rounded-corners;
	.drop-shadow;
	cursor:pointer;
	}
	
	#search button:hover{
	background:@dark-color;
	.transition-duration;
	}
}

/* Social Media */
#social-nav{
	float:right;
	margin-top:35px;
	
	li{
	display: inline;
	padding:0;
	}
	
	a {
	display:block;
	float:left;
	padding:5px 20px;
	border-right:1px solid @font-lighter-color;
	text-transform:uppercase;
	color:@font-lighter-color + #333;
	text-decoration:none;
	font-weight:700;
	letter-spacing:1px;
	}
	
	a:hover{
	color:@font-lighter-color;
	.transition-duration;
	}
}

/* ---- Main Navigation --- */

nav{
	background:#00a5aa;
}

nav > ul{
	border-left:1px solid #00bbc1;
	border-right:1px solid #008286;
	width:1260px;
}

nav ul li:hover ul{
	display:block;
}

.top-menu-item {
	display:block;
	float:left;
	width:calc(~"25% - 2px");
	width:-webkit-calc(~"25% - 2px");
	text-align:center;
	margin:0px;
	border-left:1px solid #008286;
	border-right:1px solid #00bbc1;
	
	a{
	display:block;
	padding:10px 20px;
	color:@darker-color - #222;
	text-shadow:0 1px 1px rgba(255, 255, 255, 0.3);
	text-transform:uppercase;
	font-size:22px;
	font-weight:700;
	text-decoration:none;
	
		> i{
		font-size:20px;
		padding-right:5px;
		}
	}
}
#mainnav.x5 .top-menu-item {
	width:calc(~"20% - 2px");
	width:-webkit-calc(~"20% - 2px");
}

.top-menu-item:hover{
	background:#fff;
	border-left:1px solid #fff;
	border-right:1px solid #fff;
}

.top-menu-item a:hover, .top-menu-item:hover > a{
	color:@color;
	text-shadow:none;
}

/*Dropdown-Box*/
.linkstack{
	display:none;
	background:#fff;
	position:absolute;
	width:295px;
	margin-left:-1px;

	padding:20px 10px;
	z-index:10000;
	box-shadow:0 1px 1px rgba(0, 0, 0, 0.2);
	
	a{
		font-size:16px;
		display:block;
		float:none;
		width:100%;
		padding:0 0 5px 0;
		text-align:left;
		margin:0 0 5px 0;
		background:none;
		color:#444;

		font-weight:300;
		text-decoration:none;
		border-radius:0;
		border-bottom:1px dashed #ddd;
		text-shadow:none;
	}
	
	li.group{
		display:block;
		margin:0 10px;
		float:left;
		
		.sub-menu{
			width:100%;
			
			a{
				font-weight:300;
				margin:0 0 0 0;
				border:0;
				font-size:16px;
				width:calc(~"100% - 15px");
				width:-webkit-calc(~"100% - 15px");
				text-transform:none;
				padding:5px 0px 5px 15px; 
			
				
				> i{
					color:@color;
					margin-left:-15px;
				}
			}
		}
	}
}

/* ---- Main Navigation --- */

/* ---- Content --- */
section{
	float:left;
	width:960px;
}

aside{
	float:right;
	width:320px;	
}

/* Gestaltung der Boxen */
.box{
	margin:10px;
	padding:20px;
	background:#fff;
	float:left;
}

.free{
	margin:10px;
	padding:0;
	border:1px solid rgba(255, 255, 255, 0);
	float:left;
}


/* verschiedene Größen */
.xl{
	width:1220px;
}

.l{
	width:920px;
}

.m{
	width:580px;
}

.s{
	width:260px;
}

/* Spaltenlayout */
.col-4 {
	> div {.columns(4); margin-bottom:20px;}
}

.col-3 {
	> div {
		.columns(3); 
		margin-bottom:20px;
		h4{
		display:inline-block;
			}
	 img{
		width:290px;
		height:auto;
		}
	ul{
		
		li{
		padding-left:12px;
		padding-bottom:8px;
		
	}
	li:before{
		content:'> ';
		
		margin-left:-12px;
	}
	}
	}
}

.col-2 {
	div {.columns}
}

.inline-block{
	display:inline-block;
	width:260px;
	min-height:168px;
	
	b{
		font-weight:700;	
	}
	
	a{
		color:@dark-color;
	}
	
	a:hover{
		color:@light-color;
	}
}

/* Wraps (Boxen ohne padding) */
.wrap{
	margin:10px;
	width:1260px;
}

.wrap-s{
	background:#fff;
	margin:10px;
	width:300px;
	float:left;
}

.flex{
	border:none;
	padding:0;
	width:300px;
	.box-shadow;
}

/* Textelemente */
h1{
	font-size:36px;
	.headline;
}

h2{
	font-size:24px;
	.headline;
}

h3{
	font-size:20px;
	.headline;
}

h4{
	font-size:18px;
	.headline;
	color:@dark-color;
	
	> a{
		text-decoration:none;
		color:@dark-color;
		text-decoration:none;
	}
	
	> a:hover{
		text-decoration:underline;
	}
}

p{
	padding-bottom:20px;
	
	a{
		color:@dark-color;
	}
	
	a:hover{
		color:@light-color;
	}
	
	i{
		font-style:italic;
	}
	
	b{
		font-weight:700;
		color:@font-lighter-color;
	}
}

/* SLIDER */
.slider{
	width:100%;
	height:450px;
	overflow:hidden;
	background-size:contain;
	background-repeat:no-repeat;
	
	.sld-hover{
	width:100;
	height:450px;
	background-size:contain;
	z-index:1;
	position:relative;
	.transition-duration (1s);
	}
		.sld-hover:hover{
		opacity:0;
		.transition-duration (1s);
	}
	
	.slide-text{
		width:30%;
		padding:80px 20px 0;
		margin:0 60px;
		opacity:0.9;
		position:relative;
		z-index:2;
		
		> h2{
			font-size:32px;
			line-height:normal;
			font-weight:300;
			color:@nav-color;
			border:none;
		}
		
		.slide-btn{ 
			a{
				display:block;

				padding: 10px 0;
				color:@nav-color;
				font-size:18px;
				text-decoration:none;
				font-weight:300;
				border-bottom:dotted 1px #fff;
			
				span{
					position:relative;
					top:-10px;
				}
			}
			
			a:hover{
				color:@darker-color;	
			}
			

		}

	}

	
}

/* Hintergrundbilder einzelner Slides */
#slide-1{
	background-image:url(../img/slides/slide-1.jpg);
		
	.sld-hover{
		background-image:url(../img/slides/slide-1-bw.jpg);
	}
}

#slide-2{
	background-image:url(../img/slides/slide-2.jpg);
	
	.sld-hover{
		background-image:url(../img/slides/slide-2-bw.jpg);
	}
}


#slide-3{
	background-image:url(../img/slides/slide-3.jpg);
		.sld-hover{
		background-image:url(../img/slides/slide-3-bw.jpg);
	}
}

#slide-4{
	background-image:url(../img/slides/slide-4.jpg);
		.sld-hover{
		background-image:url(../img/slides/slide-4-bw.jpg);
	}
}



/* ausrichtungsstyles */
.right{
	float:right;
}

.left{
	float:left;
}

.centered{
	text-align:center;
}

/* Visitenkarte */	
.v-card-slide{
	position:relative;
	padding-bottom:108px;
	height:390px;
	
	.v-card-img{
		width:300px;
		max-height:400px;
		overflow:hidden;
		
		img{
			width:100%;
			height:auto;
		}
	}
	
	.v-card-text{
		background:@color;
		padding:10px 30px;
		position:absolute;
		width:240px;
		left:0px;
		bottom:0px;
		
		h2{
			text-align:center;
			color:@nav-color;
			font-size:20px;
			
			a{
				color:@nav-color;
			}
		}
		
		p{
			text-align:center;
			color:@lighter-color + #222;
			font-size:18px;
			font-style:italic;
		}
	}
	
	.v-card-info{
		width:260px;
		max-height:360px;
		padding:20px;
		
		ul {
			li{
				padding-bottom:5px;
				margin-bottom:5px;
				border-bottom:1px dotted #ddd;
				padding-left:20px;
				
				i{
					float:left;
					padding-top:5px;
					margin-left:-20px;
					color:@lighter-color;
				}
			}
		}
		
		a{
			color:#444;
		}
		
		a:hover{
			color:@color;
		}
	}
}
	
.sidebar-nav{
	background:@font-lighter-color + #111;
	
	ul{
		margin-left:-20px;
		li{
			font-size:18px;
			a{
				display:block;	
				width:260px;
				padding:5px 20px;
				font-weight:700;
				color:@nav-color;
				text-decoration:none;
				text-transform:uppercase;
				i{
					margin-right:10px;
				}
			}
			
			a:hover,
			a.active{
				background:@font-lighter-color;
				color:@font-darker-color;
			}
		}
	}
}
	
		
		.sidewidget {
			background:@light-color;
			color:@nav-color;
			h3{
				color:@nav-color;
				font-weight:700;
				border-color:@nav-color;
				i{
					float:right;
				}
			}
			
			ul{
			li{
				padding-bottom:5px;
				margin-bottom:5px;
			
				b{font-weight:700;}
				em{font-style:italic; font-size:20px; font-weight:300; line-height:24px;}
				

			}
		}
		
		a{
			color:@nav-color;
		}
		
		a:hover{
			color:@color;
		}
		}

/* Widget für Auszeichnungen*/
.bewertung{
	img{
		max-width:100%;
		margin:10px 0;
	}
}


.halfpager{
	width:calc(~"50% - 20px");
				width:-webkit-calc(~"50% - 20px");
}

.post{
	width:calc(~"33.333% - 22px");
	width:-webkit-calc(~"33.333% - 22px");
	margin-bottom:20px;
	min-height:780px;
	h2{
		font-weight:bold;
		span{
			font-weight:normal;
			font-size:16px;
		}
	}
	
	p{
		img{
			width:100%;
			height:auto;
		}
	}
}

.normal-height{
	min-height:760px;
}


/* Vergleichswidgets*/
.flex{
	
	.vrg-img{
		 a{
			display:block;
			width:100%;
			height:300px;
			background-size:100%;
			background-position:center center;
			background-repeat:no-repeat;
			.transition-duration (1s);
		 }
		 
		 a:hover{
			opacity:0.5;
			.transition-duration (1s);
		}
	}
	
	.vrg-text{
		padding: 10px 20px;
		background-color:@color;
		
		
		h3{
			height:50px;
			font-weight:300;
			font-size:16px;
			background-size: 30px;
			background-position: left center;
			background-repeat: no-repeat;
			border:none;
			color:@nav-color;
			margin:0;
			padding-bottom:5px;
			
			span{
				font-size:20px;
				font-weight:700;
			}
		}
		
		p{
			color:@nav-color;
			border-top:1px dotted @nav-color;
			padding-top:10px;
			margin-top:10px;
			min-height:312px;
		}
	}
	
	.hell{
		background:@nav-color;
		h3,
		p{color:@font-color;}
		p{border-color:@font-color;}
	}
	.vrg-btn{
		 a{
			display:block;
			width:100%;
			padding:10px 0;
			text-align:center;
			font-size:18px;
			text-transform:uppercase;
			background:@lighter-color;
			border-top:1px solid @color;
			color:@nav-color;
			text-decoration:none;
			text-shadow:0 1px 1px rgba(0, 0, 0, 0.4);
			.transition-duration (1s);
		}
		
		a:hover{
			background:@darker-color;
			.transition-duration;
		}
	}
}

.green{background:#6DB181;}
.blue{background:#5B7FBD;}
.dark-blue{background:#3C4293;}
.orange{background:#D58152;}
.red{background:#C53139}
.purple{background:#8A2582;}
.yellow{background:#F4E73F;}

/* Bilder und Icons für Vergleichswidgets*/

#wollborn .vrg-img a{background-image:url(../img/s_wollborn.jpg);}
#sinram .vrg-img a{background-image:url(../img/g_sinram.jpg);}
#ewers .vrg-img a{background-image:url(../img/n_ewers.jpg);}
#butendeich .vrg-img a{background-image:url(../img/s_butendeich.jpg);}
#kempe .vrg-img a{background-image:url(../img/c_kempe.jpg);}
#engelmann .vrg-img a{background-image:url(../img/c_engelmann.jpg);}

/* Termine-Widget*/
.articles{
	width:940px;
	
	h2{
		margin:0 10px 20px;
		
		i{
			float:right;
		}
	}
	
	.article-short{
	width:calc(~"33.333% - 20px");
	width:-webkit-calc(~"33.333% - 20px");
		float:left;
		margin:0 10px 20px;
		
		a{
			color:@darker-color;
			text-decoration:none;
		}
		
		a:hover{
			text-decoration:underline;
		}
	}
}


	
	.article-short-sb{
		padding-bottom:20px;
		
		h4{
			padding-bottom:0;
			border-bottom:none;
			margin-bottom:10px;
		}

		
		a{
			color:@nav-color;
			text-decoration:none;
		}
		
		a:hover{
			text-decoration:underline;
			color:@nav-color;
		}
	}


#map_canvas{
	height:600px;
}

#d-karte{
    display: block;
	width:100%;
	a{
				img{
			width:60%;
			margin:0 20%;
		}
	}
	a:hover{
		opacity:0.8;
	}
}


#d-karte img {
    width: 60%;
    margin: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

div.infoBox {
	background-color:@nav-color;
	padding:20px;
	.box-shadow;
	width:260px;
	max-width:260px;
	margin-left:-150px;
	margin-top:5px;
	
	p{
	font-size:16px;
	color:@font-color;
	font-family: 'Open Sans', sans-serif;
	margin-bottom:0;
	padding-bottom:0;
	
	a{
		font-size:16px;


		font-family: 'Open Sans', sans-serif;	
	}
	}
}

/* ---- Content --- */

/* ---- Footer --- */

footer{
	margin-top:10px;
	overflow:auto;
		nav{
			padding:10px 0;
			background:@color;
			ul{
				border-left:none;
				border-right:none;
			
			li{
				display:inline;
			a{
				display:inline-block;
				margin:0 5px;
				font-size:16px;
				color:#fff;
				text-decoration:none;
				padding:5px 10px;
				/*text-shadow:0 1px 1px rgba(0, 0, 0, 0.4);*/
			}
			
			a:hover{
				background:@darker-color;
				/*.rounded-corners;*/
			}
			}
			}
		}
		
}

/* ---- Footer --- */

/* --- CSS für Geräte mit 1024px breite --- */
@media only screen  
and (max-width: 1280px) {
	
	#container,
	#header-container,
	footer #footer-nav{
		width:960px;
	}
	nav ul{
		width:940px;
	}
	.wrap{
		width:940px;
	}
	
	#social-nav a{
		padding:5px 15px;
	}
	
	.linkstack{
		width:215px;

	}
	
	
	.slider{
		height:336px;
		
		.sld-hover{
			height:336px;
		}
			
			.slide-text {
		width:30%;
		
		>h2{
			font-size:24px;
		}
	}
	}
	

	
	section{
		width:640px;
	}
	
	.xl{
		width:898px;
	}

	.l{
		width:610px;
	}

	.m{
		width:258px;
	}
	
	.flex{
		.vrg-img{
			a{
				height:250px;	
			}
		}
		.vrg-text{
			 h3{
		font-size:16px;	
		}
		}
	}


	.col-4 {
		div {.columns(3)}
	}

	.col-3 {
		div {.columns(1);}
		
		
	}
	
	.col-2 {
	div {.columns(1)}
	}
	
	.articles{
		width:630px;
	}
	
	.articles .article-short{
				width:calc(~"100% - 20px");
		width:-webkit-calc(~"100% - 20px");
	}
	
	#map_canvas{
	height:315px;
}

.post{
	width:calc(~"50% - 22px");
	width:-webkit-calc(~"50% - 22px");
	min-height:760px;
}

.normal-height{
	min-height:0px;
}
}

/* --- CSS für Geräte mit 768px breite --- */
@media only screen and (max-width: 1023px) {
	
	#container,
	#header-container,
	footer #footer-nav{
		width:640px;
	}
	
	.wrap, nav ul{
		width:620px;
	}
	
	.linkstack{
		width:200px;
		top:179px;

	}
	
	.linkstack li.group .sub-menu a{
		font-size:16px;
		i{
			font-size:14px;
		}
	}

	
	.top-menu-item > a{
		font-size:20px;
		text-transform:none;
	}
	
	
	
	#logo{
		max-height:100px;
	}
	
	#logo img{
		max-height:100px;
	}
	
	#social-nav a{
	font-size:10px;
	padding:2px 8px;	
	}

	
	.slider{
		height:221px;
		
		.sld-hover{
			height:221px;
		}
		
		.slide-text{
			width:30%;
			h2{
				font-size:16px;
				padding-bottom:5px;
				margin-bottom:5px;
			}
			p{
				font-size:12px;
				line-height:16px;
				margin-bottom:10px;
			}
			div.slide-btn{
				a{
					font-size:12px;
					span{
						position:inherit;
					}
				}
			
			}
		}
	}
	

	


	
	section{
		width:640px;
	}
	
	aside{
	width:640px;	
	}
	
	.xl{
		width:578px;
	}
	


	.l{
		width:620px;
	}

	.m{
		width:258px;
	}


	.col-4 {
		div {.columns(2)}
	}


	
	.col-2 {
	p {.columns(1)}
	}
	
	.sidewidget{
	width:calc(~"100% - 60px");
	width:-webkit-calc(~"100% - 60px");
	}
	
	.sidebar-nav{
	width:calc(~"100% - 60px");
	width:-webkit-calc(~"100% - 60px");
		ul{li{a{
		width:calc(~"100% - 20px");
		width:-webkit-calc(~"100% - 20px");
		}}}
	}
}

/* --- CSS für Geräte mit 480px breite --- */
@media only screen and (max-width: 767px) {
	
	#container,
	#header-container,
	footer #footer-nav{
		width:320px;
	}
	
	.wrap,nav ul,{
		width:300px;
		border-left:none;
		border-right:none;
	}
	
	header > nav{
		background:none;
	}
	
	#logo{
	float:none;
	width:calc(~"100% - 20px");
	width:-webkit-calc(~"100% - 20px");
	padding:0 0 0 0;
	text-align:center;
	
	img{
	max-width:80%; 
	max-height:100px; 
}
}
	
	#search{
		text-align:center;
		overflow:inherit;
		padding:5px 0;
			width:calc(~"100% - 20px");
	width:-webkit-calc(~"100% - 20px");
		form{
			overflow:auto;
		}
	}
	
		#social-nav{
		position:inherit;
		margin:0 auto ;
		float:none;
		a{
		border-right:none;	
		font-size:14px;
		}
		
	}
	
	.linkstack{
		width:280px;
		position:inherit;
		margin:0 0;
	}
	
	.linkstack li.group{
		width:260px;
		min-height:0;
		margin-bottom:20px;
	}
	
	#social-nav a {
		padding: 2px 6px;	
	}
	
	.top-menu-item {
	display:block;
	float:none;
	width:100%;
	text-align:center;
	margin:5px 0;
	background:@color;
	
}
	
	#bxwrap{
		display:none;
	}
	
	section{
		width:320px;
	}
	
	aside{
	width:320px;	
	}
	
	.xl{
		width:258px;
	}

	.l{
		width:300px;
	}
	
	.flex{
	width:calc(~"100% - 20px");
	width:-webkit-calc(~"100% - 20px");
	
	.vrg-text{p{
		min-height:0;
	}}
	}

	.m{
		width:258px;
	}

	h1{
		font-size:24px;
	}
	
	.col-4 {
		div {.columns(1)}
	}

	.col-3 {
		div{.columns(1)}
	}
	
	.col-2 {
	p {.columns(1)}
	}
	
	.articles{
		width:320px;

	}
	
#map_canvas{
	display:none;
}

#d-karte{
	display:block !important;
		a{
				img{
			width:100%;
			margin:0;
		}
		}
}
	
	footer nav ul li a{
	font-size:16px;
	padding:3px 3px;
}

.post{
	width:calc(~"100% - 22px");
	width:-webkit-calc(~"100% - 22px");
	min-height:0px;
}

}

div.flex-column-box div.vrg-img img {
	max-width: 100%;
}
div.flex-column-content {
	border-top: 1px dotted #2f2715;
	margin-bottom: 20px;
	margin-top: 10px;
	min-height: 312px;
	padding-top: 10px;
}


.fullwide {
	float: none;
	margin: 10px;
	width: auto;
}
#mainnav .linkstack li.group {
	float: none;
}
@media only screen and (max-width: 767px)
{
	#mainnav {
		width: 300px;
	}
	#mainnav .top-menu-item,
	#mainnav.x5 .top-menu-item {
		width: initial;
	}
}


h2.normal {
	border-bottom: 0 none;
	margin-bottom: 0;
}

table.userlist {
	margin-bottom: 2em;
}
table.userlist th,
table.userlist td {
	padding-right: 1em;
}
table.userlist th:last-child,
table.userlist td:last-child {
	padding-right: 0;
}
table.userlist thead th {
	font-weight: bold;
	text-align: left;
}
table.userlist tfoot tr:first-child td {
	padding-top: 1ex;
}
button.size-m {
	padding: 0.6ex 0;
	width: 174px;
}

ol.stacked p.meta {
	padding: 0;
}
ol.stacked header + img {
	float: left;
	margin-bottom: 1em;
	margin-right: 1em;
	max-width: 285px;
}
ol.stacked article::after {
	clear: both;
	content: '';
	display: block;
}
ol.stacked > li + li {
	margin-top: 2em;
}

ul.iconned a {
	color: inherit;
	text-decoration: none;
}
ul.iconned a:hover {
	border-bottom: 1px solid;
}
ul.iconned a i.fa:last-child {
	color: #00bbc1;
	margin-left: 4px;
}