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

header {
	width:100%; 
	height:auto;
	overflow:hidden;
	position:relative;
	padding:0;
	z-index:21;
	text-align:center;
}

header.sticky {
	position:fixed;
	top:0; left:0;	
}

.logo-wrapper {
	width:100%; height:auto;
	overflow:hidden;
	position:relative;
	float:left;
	background-color:#ffffff;
	margin:0;	
}

header.sticky .logo-wrapper {
	display:none;
}

.logo {
	display:block;
	overflow:hidden;
	height:auto;
	width:100%;	
	padding:0;
	color:#000000;
	/*background-color:#ffffff; */
	margin:0;
	text-align:center;
	position:relative;
	float:left;
	z-index:2200;
	text-decoration:none;
	font-size:14px;
	transition: all 0.5s;
}

.logo:hover {
	color:#ffffff;
	background-color:transparent;	
}

.logo img {
	width:240px; height:100px;
	float:left;
	display:block;
	margin:0 0 20px 50%;
	left:-120px;	
	position:relative;
}

.logo span {
	margin-top:4px;
	float:left;	
	display:block;	
}

/* burger */
.burger {
	width:auto;
	height:auto;
	display:block; /* mobil sichtbar */
	text-align:center;
	float:left;
	padding:24px;
	margin-top:0;
	background-image:url(../common/burger-icon.svg);
	background-repeat:no-repeat;
	background-position:center;
	background-size:15px;
	background-color:#372d45; /* aubergine */
	z-index:1000;
	transition:all 0.4s;
	position:relative;	
}

.burger:hover {
	background-color:#e40038; /* knallrot */
	padding-right:80px;
}
	

/* haupt-nav */
.haupt-nav {
	width:100%; height:auto;
	overflow:hidden;	
	position:relative;
	padding:0;
	margin:0;
	float:left;
	position:relative;
}

header.sticky {
	position:fixed;
	top:0; left:0;	
}

.haupt-nav ul {
	margin:0;
	padding:0;
	background-color:#f2f2f3;
	background-color:#ffffff;
	background-color:transparent;
	z-index:200;
	position:relative;
}

.haupt-nav ul#main-nav {
	display:none; /* burger stattdessen anzeigen */
}

.haupt-nav ul li {
	width:100%;
	list-style:none;
	display:block;
	text-align:center;
	position:relative;
}

.haupt-nav ul li a {
	padding:22px 36px 20px 36px;
	width:100%;
	display:block;
	text-decoration:none;
	text-transform:uppercase;
	letter-spacing:0.1em;
	color:#372d45; /* aubergine */
	background-color:#ffffff;
	font-weight:700;
	font-size:13px;
	border-bottom:solid 1px #f2f2f3; /* warmes grau 10% */
}

.haupt-nav ul li:last-child a {
	
}

.haupt-nav ul li a:hover {
	background-color:#372d45; /* aubergine */
	color:#ffffff;
	transition:all 0.3s;
}

.haupt-nav ul li.active a {
	background-color:#372d45; /* aubergine */
	color:#ffffff;	
	font-weight:700;
}

/* sub-nav */
.haupt-nav ul .sub-nav {
	width:100%;
	height:auto;
	overflow:hidden;
	position:relative;
	margin:0 auto;
	z-index:0;	
	background-color:transparent;
}

.haupt-nav ul .sub-nav li {
	width:100%;
	display:inline-block;
	list-style:none;
	margin:0;
}

.haupt-nav ul .sub-nav li a, .haupt-nav ul li.active .sub-nav li a {
	width:100%;
	text-decoration:none;
	font-weight:300;
	padding:12px 20px;
	display:block;
	font-size:12px;
	color:#372d45; /* aubergine */
	background-color:rgba(255,255,255,0.2);
	border-bottom:solid 1px #f2f2f3; /* warmes grau 10% */
}

.haupt-nav ul .sub-nav li a:hover, .haupt-nav ul li.active .sub-nav li a:hover {
	background-color:rgba(255,255,255,1.0);
	border-bottom:solid 1px #372d45; /* aubergine */
	color:#372d45; /* aubergine */
}

.haupt-nav ul .sub-nav li.active a {
	margin-top:0;
	box-shadow:none;
	color:#fff;
	font-weight:300;
	background-color:#372d45; /* aubergine */
}

/* footer */
footer, .footer {
	color:#ffffff;
	
	margin-bottom:0;
	overflow:auto;
	float:left;
	width:100%;
	
}

footer a {
	color:#ffffff;	
}

.footer-logo {
	float:left;
	width:50%;
	text-align:center;
	margin-top:20px;
	margin-bottom:20px;
	margin-left:25%;
}

.footer-logo img {
	width:200px; height:auto;
	float:left;
	position:relative;
	display:block;
	left:50%;
	margin-left:-100px;
	margin-bottom:0;
		
}

.footer-logo span {
	width:100%; height:auto;
	float:left;
	display:block;
	opacity:0;
	font-size:13px;
	font-weight:300;
	letter-spacing:0.2em;
	text-transform:uppercase;
	transition:all 0.5s;
	margin-top:10px;
}

.footer-logo:hover {
	color:#372d45; /* aubergine */
	background-color:transparent;
		
}

.footer-logo:hover span {
	opacity:1;
}


.footer-nav {
	width:100%;
	float:left;
	overflow:auto;
}

.footer-nav ul {
	width:100%;
	overflow:auto;
	float:left;
	padding:0 0 40px 0; margin:0;
	text-align:center;
}

.footer-nav ul li {
	width:auto;
	overflow:auto;
	list-style:none;
	margin:0 10px;
	display:inline-block;
	color:#372d45; /* aubergine */
	text-decoration:none;
}

.footer-nav ul li a {
	color:#372d45; /* aubergine */
	text-decoration:none;
}

.footer-nav ul li a:hover {
	color:#372d45; /* aubergine */
	text-decoration:none;
	border-bottom:1px solid #372d45; /* aubergine */
	background-color:transparent;
}

.footer-nav ul li.active a {
	color:#372d45; /* aubergine */
	text-decoration:none;
	border-bottom:1px solid #372d45; /* aubergine */
	background-color:transparent;
}

.footer-absender {
	display:block;
	float:left;
	width:100%;
	height:auto;
	overflow:hidden;
	background-color:#ffffff;
	text-align:center;	
}

.footer-absender * {
	text-align:center;
	font-size:12px;	
}

@media screen and ( min-width:600px ) {
	
}

@media screen and ( min-width:900px ) {
	/* nav */
	.haupt-nav {
		width:50%;
		margin-top:-10px;
		z-index:-1;	
	}
	
}

@media screen and ( min-width:1200px ) {
	header {
		position:absolute;
		z-index:3000;
	}
	
	/* nav */
	/* haupt-nav */
	.burger {
		width:auto;
		margin-left:0; /* darueber wird auch die haupt-nav positioniert */
	}

	.haupt-nav {
		width:100%;
		height:300px; /* für Sub*/
		margin-left:0;
	}
	
	
	.haupt-nav ul#main-nav {
		display:block; /* burger stattdessen anzeigen */
	}
	
	.haupt-nav ul li {
		width:auto;
		display:inline-block;
		border-bottom:none;	
	}
	
	.haupt-nav ul li a {
		background-color:rgba(255,255,255,0.9);
		color:#777; /* grau */
		width:auto;
		margin:0;	
		border-bottom:none;
		padding:22px 40px 20px 40px;
	}
	
	.haupt-nav ul li.active a, .haupt-nav ul li.active a:hover {
		background-color:#eaeee8; /* lichtes gruen 50% */
		background-color:#ffffff;
		color:#372d45; /* aubergine */
		border-bottom:none;	
	}
	.haupt-nav ul li a:hover {
		background-color:rgba(55,45,69,0.9); /* aubergine */
		/*background-image:url(../common/hintergrundmuster.svg);
		background-position:bottom;*/
	}
	
	/* sub-nav */
	.haupt-nav ul .sub-nav {
		position:absolute;
		top:68px; left:0;
		z-index:2000;
		display:none;
	}
	
	/* mouse over */
	.haupt-nav ul li:hover .sub-nav {
		display:block;
	}
	
	.haupt-nav ul .sub-nav:hover {
		display:block;
	}
	
	.haupt-nav ul .sub-nav li {
		
	}
	
	.haupt-nav ul .sub-nav li a, .haupt-nav ul li.active .sub-nav li a {
		background-color:rgba(255,255,255,0.8);
	}
}

@media screen and ( min-width:1600px ) {
	
	.haupt-nav ul li a {
		padding:22px 60px 20px 60px;
	}
}

@media screen and ( min-width:1800px ) {
	.burger {
		margin-left:10%;	
	}

}

@media screen and ( min-width:2000px ) {
	
}

/* landscape mobil */
@media screen and ( max-height:380px ) {
	
}