@charset "utf-8";
/* CSS Document */

		:root {
			--klgruen: #18aa95;
			--hintergrund: #ffffff;
			--textschwarz:#000000;
			--weiss:#ffffff;
			--textgrau:#696969;
			--textdunkelgrau:#363636;
			--texthellgrau:#D3D3D3;
		}
/* barlow-regular - latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  src: url('../../fonts/barlow-v12-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../../fonts/barlow-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../../fonts/barlow-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../../fonts/barlow-v12-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../../fonts/barlow-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../../fonts/barlow-v12-latin-regular.svg#Barlow') format('svg'); /* Legacy iOS */
}

/* barlow-500 - latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  src: url('../../fonts/barlow-v12-latin-500.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../../fonts/barlow-v12-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../../fonts/barlow-v12-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('../../fonts/barlow-v12-latin-500.woff') format('woff'), /* Modern Browsers */
       url('../../fonts/barlow-v12-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../../fonts/barlow-v12-latin-500.svg#Barlow') format('svg'); /* Legacy iOS */
}

/* barlow-700 - latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  src: url('../../fonts/barlow-v12-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../../fonts/barlow-v12-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../../fonts/barlow-v12-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../../fonts/barlow-v12-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../../fonts/barlow-v12-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../../fonts/barlow-v12-latin-700.svg#Barlow') format('svg'); /* Legacy iOS */
}

		body {
			margin: 0px;
			background-color:  var(--hintergrund);
			width: 100%;
			height: 100%;
			font-family: 'Barlow', sans-serif;
			min-height: 82vh;			
		}
		main {
			width: 85%;
			margin: auto auto;
		}

		#headline {
			width: 100%;
			display: flex;
			border-bottom: 1px solid lightgrey;
		}
		#navline {
			width: 80%;
			padding-top: 85px;
		}
		.logo {
			margin-top: 5%;
			max-height: 100px;
		}
		#subnav {
			width: 20%;
			min-height: 82vh;
			border-right: 1px solid lightgrey;
			float: left;
		}
		#subnav ul {
			list-style-type: none;
			margin: 0px;
			padding: 0px;
		}
		#subnav ul li:first-child{
			padding-top: 15px;
			
		}		
		#subnav ul li a {
		padding-top: 10px;
		padding-bottom: 10px;			
		padding-left: 5%;
		padding-right: 5%;			
		display: inline-block;
		outline: 0;
		color: var(--textgrau);
		text-decoration: none;
			width: 90%;			
		}

 .active {
		background-color: var(--klgruen);
	 	color:var(--weiss) !important ;
			
		}

		footer {
			background-color: var(--klgruen);
			height: 35px;
			text-align: center;
			padding-top: 10px;
			text-decoration: none;
			margin-top: 3%;
}
		footer a:link, footer a:visited {
			color: var(--weiss);
			text-decoration: none;
		}
		#content {
			float: left;
			width: 73%;
			padding: 3%;
			
		}


		img {
			max-width:100%;
		}
		
		.testh1 {
 		color: var(--klgruen);
  		font-size: calc(1rem + 1.5vw);
		}
		.clear {
			clear: both;
		}

.dreieck {
width: 0px;
height: 0px;
margin-right: 8px;
-webkit-transform:rotate(360deg);
border-style: solid;
border-width: 0 0 12px 12px;
border-color: transparent transparent var(--klgruen) transparent;
	float: left;
}


/*navi*/
.nav-krelo {
  margin-bottom:  0;
}

.nav-krelo ul {
  list-style-type: none;
  margin-top: 0px;
  margin-left:10%;
  padding: 0;
  display: block;

}

.nav-krelo li {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: inline-block;
  position: relative;
	right: 0px;	
}

.nav-krelo li a {
  padding: 10px 15px;
  display: inline-block;
  outline: 0;
	color: var(--textgrau);
text-decoration: none;	

}

.nav-krelo li:hover ul.dropdown {
	display: none;
}

.nav-krelo li ul.dropdown {
  position: absolute;
  display: none;
  margin-left:0px;
  padding-top: 0;
}

.nav-krelo li ul.dropdown li {
  display: block;
  list-style-type: none;
}

.nav-krelo li ul.dropdown li a {
  padding: 15px 20px;
  color: #fff;
  display: block;
  font-weight: 400;
}

.nav-krelo li ul.dropdown li:last-child a { 
	border-bottom: none;
}

.nav-krelo li:hover a {
	color: var(--textdunkelgrau);

}

.nav-krelo li:first-child:hover a {
	border-radius: 3px 0 0 3px;
}

.nav-krelo li ul.dropdown li:hover a {
	background: rgba(0,0,0, .1);
}

.nav-krelo li ul.dropdown li:first-child:hover a {
	border-radius: 0;
}

.nav-krelo li:hover .arrow-down {
	border-top: 5px solid #fff;
}

.arrow-down {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--klgruen);
  position: relative;
  top: 12px;
  right: -8px;
  content: '';
 display: none;
}
.title-mobile {
  display: none;
}

.container1, .container2, .container3 {
	float: left;
	width: 28%;
	margin-top: 2%;
}
.container1, .container2 {
	margin-right: 7%;
}
.spanblock span{
	display: block;
}






/* Lana ab hier für Desktop-Ansicht */
	h1 {
		
		color: var(--klgruen);
		font-weight: 400;
		font-size: calc(1rem + 0.3vw);
		text-transform: uppercase;	
	}

	h2 {
 
			font-weight: 500;
			font-size: calc(1rem + 0.3vw);

	}

	h3 {
	
			font-weight: 400;
			font-size: calc(1rem + 0.3vw);

	}


	hr {

	border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 1);	
	margin-bottom: 4%;
	width: 106%;
	}


	

	#content {
		line-height: 160%;	
	}
	#content p:first-child {
	margin-top:0px;
	}
#content ul {
	padding-left: 14px;
	list-style: disc red;
}
#content li::marker {
	   color: var(--klgruen);
}


	.boxleft {
		width: 49%;
		float: left;
		padding-right: 2%;
	}
	.boxright {
		width: 49%;
		float: right;
		}

		.boxleftv2 {
		width: 58%;
		float: left;
		padding-right: 3%;
	}
	.boxrightv2 {
		width: 39%;
		float: right;	
		
		
	}

	.boxleftanfahrt {
		width: 68%;
		float: left;
		padding-right: 3%;
		
	}

	.boxrightanfahrt {
		width: 29%;
		float: right;	
	}
	



.boxleftpartner {
		width: 33%;
		float: left;
		
	}
	.boxmiddlepartner {
		width: 33%;
		float: right;	
	}
	.boxrightpartner {
		width: 33%;
		float: right;
	}





		

	.imgright {
		float: right;
		border: 2px solid var(--texthellgrau);
	}

	.imgref {
	
	width: 60%;
	margin-bottom: 5%;
}
	
	.produkt1 {
		width: 49%;
		float: left;
		padding-right: 2%;
		
	
	}

	.produkt2 {
		width: 49%;
		float: right;
		
		
	}

	.produkt3 {
		width: 49%;
		float: left;
		padding-right: 2%;
		
	}
	.produkt4 {
		width: 49%;
		float: right;
		
		
	}

	.produkt5 {
		width: 49%;
		float: left;
		padding-right: 2%;
		
	}
	.produkt6 {
		width: 49%;
		float: right;
		
		
	}
p.downloads {
	border-top: 1px dashed var(--texthellgrau);
}

.pdf {
	display: inline-block;
	padding-left: 30px;
	background-image: url("../img/pdf.png");
	background-repeat: no-repeat;
	background-position: 0 6px;
	line-height: 2.0;
	
}

a 	{ 
	color: #18aa95;
	text-decoration: none;
	cursor: pointer;}

.datenschutz {
	display:inline-block;
	margin-top: 5%;
}
.box1, .box2, .box3 {
				width: 25%;
				float: left;
				border: 1px solid var(--texthellgrau);
				padding: 1%;
			}
			.box2 {
				margin-left:3%;
				margin-right: 3%;
			}
			.box1 {
				margin-left: 6% ;
			}
			.box3 {
				margin-right:6% ;
			}
			.ueberschrift {
				color:var(--klgruen);
		font-size: calc(1rem + 0.2vw);
			}
			.mehr {
				color:var(--weiss);
				background-color: var(--klgruen);
				border:0px;
				padding: 10px 25px;
				font-size: calc(0.8rem + 0.1vw);
				cursor: pointer;
			}
/* Slider */
#bannerslider {
	margin-top: 4%;
	margin-bottom: 4%;
}
.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }
/* Bis hier zur Desktop-Ansicht*/

@media only screen and (max-width:1500px){
	#headline {
		display: block;
	}
	#navline {
		width: 100%;
		float: left;
		padding-top: 15px;
	}	
	.nav-krelo ul {
		margin-left: 0px;
	}
}
@media only screen and (max-width:1050px){
	.produkt1,.produkt2,.produkt3,.produkt4,.produkt5,.produkt6,.produkt7,.imgprodukte {
		width: 100%;
		float: none;
	}
	.container1, .container2, .container3 {
		float: none;
		margin: 0px;
		margin-top: 5%;
		width: 100%;
	}	
	.box1 ,.box2, .box3 {
		float: none;
		width: 92%;
		margin-left: 3%;
		margin-right: 3%;
		margin-top: 5%;
		padding-bottom: 5%;
	}
	main {
		width: 90%;
	}

}
@media only screen and (max-width:982px){
	.logo {
		display: none;
	}	
/* Lana ab hier für Mobil-Ansicht */

	.boxleft, .boxright,.boxleftv2,.boxrightv2,.boxleftanfahrt,.boxrightanfahrt {
		width: 100%;
		float: none;

	}
	.img {
	max-width:100%; width:100%;float:none;
		
	}
	
	.imgright {
		float: none;
	}
	.imgright {
		float: none;
	}
	
/* Bis hier zur Mobil-Ansicht*/	
	main {
		width: 100%;
	}
	#subnav {
		display: none;
	}
	#content {
		margin-top:100px;
		width: 95%;
	}

.nav-krelo li:hover ul.dropdown {
	display: block;
	} 
.nav-krelo li ul.dropdown li:first-child {
	border-top: 1px solid var(--klgruen);
	} 		
.nav-krelo li ul.dropdown li:last-child {
	border-bottom: 0px;
	} 																					

.nav-krelo li:last-child {
	border:0px;
	} 
.nav-krelo li img { padding-top: 10px;
	} 	

																					
.arrow-down { display: block;
	}

.nav-krelo {
  width: 250px;
  height: 100%;
  display: block;
  position: fixed;
  left: -250px;
  top: 0px;
  -webkit-transition: left 0.25s ease;
  -moz-transition: left 0.25s ease;
  -ms-transition: left 0.25s ease;
  -o-transition: left 0.25s ease;
  transition: left 0.25s ease;
  margin: 0;
  border: 0;
  border-radius: 0;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
	background-color: white;
z-index: 10;	
}
.title-mobile {
  position: fixed;
  display: block;
    top: 10px;
    font-size: 20px;
    left: 100px;
    right: 100px;
    text-align: center;
    color: var(--klgruen);
}
.nav-krelo.visible {
  left: 0px;
  -webkit-transition: left 0.25s ease;
  -moz-transition: left 0.25s ease;
  -ms-transition: left 0.25s ease;
  -o-transition: left 0.25s ease;
  transition: left 0.25s ease;
}

.nav-bg-krelo {
  display: inline-block;
  vertical-align: middle;
  width: 100%;
  height: 100px;
  margin: 0;
  position: fixed;
  top: 0px;
  left: 0px;
  padding: 12px 0 0 10px;
  cursor: pointer; 
  background-color:white;
	z-index: 12;
	
}

.navbar-krelo {
  display: inline-block;
  vertical-align: middle;
  height: 50px;
  cursor: pointer;
  margin: 0;
    position: absolute;
    top: 0;
    right: 13px;
    padding: 12px;
}
.navbar-krelo span {
  height: 2px;
  background:var(--klgruen);
  margin: 5px;
  display: block;
  width: 30px;
}
.navbar-krelo span:nth-child(2) {
	width: 30px;
	}
.navbar-krelo span:nth-child(3) {
	width: 30px;
	}
.nav-krelo ul {
	padding-top: 100px;
	}

.nav-krelo li {
	display: block;
border-bottom: 1px solid var(--klgruen);
}

.nav-krelo li a {
  display: block;
	
}

.nav-krelo li:first-child:hover a {
	border-radius: 0;
	}

.nav-krelo li ul.dropdown {
	position: relative;
	}

.nav-krelo li ul.dropdown li a {
border-bottom: none;
color: var(--textschwarz);	
}

.nav-krelo li:hover a {
}

.nav-krelo li ul.dropdown li:hover a {
  background: rgba(0,0,0,.1) !important;
	color: var(--textdunkelgrau);
	
}

.nav-krelo li ul.dropdown li a {
	padding: 10px 10px 10px 30px;
	color: var(--textgrau);
 }

.nav-krelo li:hover .arrow-down {
	border-top: 5px solid #fff;
	}

.arrow-down {
  border-top: 5px solid #505050;
  position: absolute;
  top: 20px;
  right: 10px;
color:var(--klgruen);	
}

.cover-bg {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
	.container1, .container2, .container3 {
		float: none;
		margin: 0px;
		margin-top: 5%;
	}

 }