@charset "UTF-8";
/* CSS Resets */
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{position:relative}figure img{width:100%}

* {
	position: relative;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

html, body{
	height: 100%;
 }

body{
	font-family: "Lato", Arial, sans;
	font-weight: normal;
	background-color: #eee;
	color: #414141;
	font-size: 16px;
}

/*a{text-decoration: none; color: #000;}*/

a{text-decoration: none; color: #414141;}
a:hover{text-decoration: underline; color: #DE002E;}

p{
	line-height: 1.6em;
	margin-top: 15px;
	margin-bottom: 10px;
}
nav ul{list-style: none;}

header{background-color: #fff; padding-top: 20px; padding-bottom: 20px; position: fixed;
z-index: 11; border-bottom: 1px solid #CCC;
width: 100%; }
header .logo{ width: 300px; float: left; padding-left: 20px; height: 60px; padding-top: 7px;}
header .logo img{max-width: 100%; height: auto;}
header nav{float: left; padding-left: 30px; padding-right:30px; }
header nav ul{position: relative; z-index: 11;}
header nav ul li{float: left;}
header nav ul li li{float: none; height: 30px; }
header nav ul li a{ line-height:60px; display: block; height: 60px; text-transform: uppercase; padding-right: 25px; color: #999;}
header nav ul li a:hover{ text-decoration: none;}
header nav ul li li a{ height: 32px; font-size: 0.9em;  line-height:30px; padding: 5px; color: #fff;}
header nav ul li li a:hover{ color: #C9C9C9; text-decoration: none;}
header nav ul ul{visibility: hidden; opacity: 0; position: absolute; margin-top: -10px; background: #de002e; z-index: 13; padding: 0px; border-radius: 4px; padding-bottom: 15px; box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.2); min-width:250px; text-aling:center; }
header nav ul li:hover ul{visibility: visible; opacity: 1;  }
header .shop{width: 160px; float: right; padding-right: 20px;}
header .shop a,  a.modal {display: block; width: auto; max-width: 150px; padding: 10px; margin-top: 7px; color: #fff; background-color: #de002e; text-align: center; border-radius: 4px;}
a.modal {max-width: none;}
#content h2{ text-align: center; margin-top: 20px; margin-bottom: 15px; font-weight: 300; font-size: 38px;}

#content .mehr {
text-decoration: none; color: #414141;
font-size: 80%;
}

#content .mehr:hover {
color: #DE002E;
}	

#content .gallery  img {
border: 0px solid #CFCFCF;
height: auto;
width: 90%;
margin-right: 10%;
}

/*#content a {
text-decoration: none; color: #414141;
}

#content a:hover {
color: #DE002E;
}*/

#slider ul{list-style: none; margin-top: 0px; margin-bottom: 0px; position: relative; padding: 20px; height: 260px; }
#slider ul li{ background: url(../src-pix/icon.png) no-repeat center center #fff; position: relative;   float: left; box-shadow: 0px 0px 10px 1px #999; width: 200px; height: 200px; border-radius: 200px; background-size: contain; margin: 7px;}
#slider a{ display: block; width: 100%; height: 100%;   position: absolute; padding-top: 30%;    text-align: center; background-color: rgba(255,255,255,0.5); border-radius: 200px; visibility: hidden; opacity: 0; }
#slider ul li:hover a {visibility: visible; opacity: 1;}

.icon{ display: block; width: 30px; height: 30px; background: #de002e; margin: 0 auto; border-radius: 30px; margin-top: 5px;}
.Pdf{ background: #de002e url(../src-pix/icon-pdf.png) no-repeat center center; background-size: 80%;  }
.Link{ background: #de002e url(../src-pix/icon-link.png) no-repeat center center;  background-size: 80%; }
.Link{ background: #de002e url(../src-pix/icon-link.png) no-repeat center center;  background-size: 80%; }
.Artikel{ background: #de002e url(../src-pix/icon-view.png) no-repeat center center;  background-size: 80%; }

footer{background-color: rgba(220,0,27,0.7); color: #fff; font-size: 0.8em; text-align: center;		padding-top: 25px;		padding-bottom: 40px;}
footer nav{ width: 300px; margin: 0 auto;}
footer nav ul li{float: left; padding: 2px;}
footer nav ul li a{color: #fff;}
footer nav ul li a:hover{color: #C9C9C9; text-decoration: underline;}

.redline{background-color: rgba(220,0,27,0.7);		padding-top: 20px;		padding-bottom: 20px;		border-top: 1px solid #fff;		border-bottom: 1px solid #fff;}
.redline{  color: #fff; text-align: center;  }
.redline p { max-width: 790px; margin:15px auto;}
.redline p.spell{ font-size: 24px; font-weight: 300; }
.frontendoutput{	position: absolute;	z-index: 10;	top: 100px;	width: 100%;}
.sudo{ background: url(../src-pix/bgall.png) no-repeat top right; background-size: cover; position: absolute; height: 100%; width: 100%; }
.clear{clear: both; height: 0; overflow: auto;}
.showmobil{display: none;}

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


.partnerlinks img {
border: 0px solid #CFCFCF;
height: auto;
/*width: 33%;*/
max-width: 33%;
margin-right: 20px;
}


.inhaltsnavigation li a {
	display: block;
	width: auto;
	padding: 5px;
	margin-top: 3px;
	color: #fff;
/*	background-color: #868686;*/
background: rgba(134,134,134,0.5);
	text-align: left;
	border-radius: 4px;
}

.inhaltsnavigation li a:hover {
	text-decoration: none;
	color: Black;
}



@media handheld, only screen and (max-width: 1024px){

	header nav{float: left; padding-left: 10px; padding-right:10px; }
	header nav ul li a{ line-height:60px; font-size: 0.9em; display: block; height: 60px; text-transform: uppercase; padding-right: 10px; color: #999;}

}

@media handheld, only screen and (max-width: 767px){	

	header nav{ width: 85%; padding: 0px; position: fixed; margin-top: -100px; background-color: #fff; box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.2); z-index: 10; padding-top: 50px; padding-bottom: 1500px; margin-bottom: -1500px;}
	header nav ul ul{ position: relative; visibility: visible; opacity: 1;}
	header nav ul li{float: none;}
	header nav ul ul li{}

	header nav ul li{ border-bottom: 1px dashed #ccc; padding-left: 10px; padding-right: 10px; }
	header nav ul li a{ height: 35px; line-height: 35px;}
	header nav ul ul li{  }
	header nav ul ul{ background-color: #fff; box-shadow: 0px 0px 0px 0px #fff;}
	header nav ul ul li{ border-bottom: 0px; }
	header nav ul ul li a{color: #ccc;}
	.shop{display: none;}
	header .logo{ text-align: center; padding-left: 0; width: 100%; float: none; margin-top: 10px;}
	header .logo img{max-width: 80%;}
	.showmobil{display: block; position: absolute; z-index: 9; top: 0px; left: 0%; height: 30px; width: 30px; background: url(../src-pix/menu.png) center center no-repeat #fff; text-indent: -9999px;  }
	.showmobil a{width: 100%; height: 100%; display: block;}
	#megaclose{ width: 100%; height: 100%; background-color:rgba(61,61,61,0.8); z-index: 10; position: fixed; top: 0; left: 0;}
}


 /*-----------------------------------*\
	Toast
	A Simple CSS Framework
	=================================
	Values you may want to change:
	- .container { max-width:; }
	- p { margin-bottom:; }
	- html { font:; }
	Remember: no framework will be as
	good as a custom built, per-
	project	one. Toast and other
	frameworks are best used for
	rapid prototyping.
	$GRID
\*-----------------------------------*/

.container {
	/* Whatever you want. They’re your oats. */
	max-width: 1140px;
	margin: 0 auto;
	padding: 40px 30px;
}

.container nav ul li{
	margin-left: 0px;
}

.container ul li {
	margin-left: 25px;
}

.container ul  {
	margin-top: 20px;
	margin-bottom: 20px;
}

.grid {
	margin-left: -3%;
	max-width: 105%;
}

.unit {
	display: inline-block;
	*display: inline;
	*zoom: 1;
	vertical-align: top;
	margin-left: 3%;
	margin-right: -.25em;
	/* Clearfix */
	overflow: hidden;
	*overflow: visible;
}

	.unit.demo {
		background-color: #fff8eb;
		height: 48px;
		height: 3rem;
		margin-bottom: 24px;
		margin-bottom: 1.5rem;
	}

.span-grid {
	width: 97%;
}

.one-of-two { width: 47%; }

.one-of-three { width: 30.36%; }
.two-of-three { width: 63.666666666%; }

.one-of-four { width: 22.05%; }
.three-of-four { width: 72%; }

.one-of-five { width: 17.07%; }
.two-of-five { width: 37%; }
.three-of-five { width: 57%; }
.four-of-five { width: 77%; }
.wpcf7-quiz-label { width:100%; display:block;}

@media screen and (max-width: 650px) {
	.grid {
		margin-left: 0;
		max-width: none;
	}

	.unit {
		width: auto;
		margin-left: 0;
		display: block;
	}
}

span.datenschutz{width: 100%; margin: 10px 0;}
span.datenschutz input{float: left; display: inline-block; margin-right: 15px; width: auto;}
span.datenschutz .wpcf7-list-item-label{ float: left; width: auto; display: inline-block; padding-top: 0px;}