/* = = = = = = = = = = = = = = = = = datei menue.css = = = = = = = = = = = = = = = = = = = = = = = = = */

/* ############################################################ */
/* diese datei enth�lt das hauptmen� */
/* alle anderen men�s sowie auch allgemeine links im text bzw. eventuelle "weiter-Links" */
/* sind in der datei "format.css" direkt beim jeweiligen abschnitt definiert */
/* ############################################################ */

/* ############################################################ */
/* men�-button mit checkbox-hack (f�r checkboxen) */
/* schaltet das responsive-men� an/aus */
/* ############################################################ */

/* - - - - - men�-schalter formatierung - - - - - */
label.button-open {
	display:table;
	z-index:2;
	position:absolute;
	top:0;right:0;
	background:#000;
	cursor:pointer;
	height:4rem;
	line-height:4rem;
	width:4rem;
	box-shadow:0 0 3px black;
	margin:0 auto;
	transition:all 3s;
}

label .fa {
	font-size:3rem;
	display:table-cell;
	text-align:center;
	color:#EAEAEA;
	line-height:4rem;
	height:4rem;
	vertical-align:middle;
}

label.button-close {
	display:table;
	z-index:2;
	position:absolute;
	top:0;right:0;
	background:#fff;
	cursor:pointer;
	height:4rem;
	line-height:4rem;
	width:4rem;
	box-shadow:0 0 3px black;
}

label.button-close .fa {
	color:#000;
}

/* - - - - - - toggle-funktion f�r men�-button- - - - - - */

/* checkbox versteckt */
input[type=checkbox]{
	display: none;
}

/* schaltet menu an/aus */
input[type=checkbox]:checked ~ #nav {
	right:0;
}

/* schaltet zwischen 'menu-�ffen-button' und 'menu-schliessen-button' */
input#menuschalter:checked ~ .button-open {
	right:-4rem
}

/* ############################################################ */
/* responsive aufklapp-men� mit checkbox-hack (f�r radio-buttons) */
/* schaltet die sublevel-links an/aus */
/* damit funktioniert es auch ohne javascript auf mobilen ger�ten, die ja nicht 'on-mouseover-f�hig' sind, sondern nur 'touch' k�nnen. */
/* ############################################################ */

/* - - - - - akkordion-men� - - - - - */

#nav {
	position:relative;
	height:100%;right:-120%;
	transition:all 1s;
	text-transform:uppercase;
}


.akkordeon {
	position:absolute;
	z-index:1;
	right:0;top:0rem;
	width: 100%;height:100%;
	background:#2D2E39;
	text-align:center;
	padding: 0;
	box-shadow:0 0 5px #000;
}

.akkordeon .bereich {
	display:inline-block;
	margin:0rem -.22rem 0rem -.22rem ;/* ausgleich ( minus-margin) f�r INLINE-BLOCK-WHITESPACE-BUG*/
	padding: 0;
	width:100%;
}

/* - - - - - - top-level - - - - - - */

.akkordeon label ,
.akkordeon label b ,
.akkordeon label a {
	display:inline-block;
	width:100%;
	background:#2D2E39;
	color:#fff;
	text-shadow:0 0 1px #3F3F3F;
	text-align:center;
	vertical-align:middle;
	letter-spacing:.2rem;
	font-size:1.5rem;
	/*line-height:1.9rem;*/
	height: 3rem;
	line-height: 3rem;
	cursor: pointer;
	margin: 0;
	padding:0;
	text-decoration:none;
	font-weight:normal;
}

.akkordeon label:hover ,
.akkordeon label b:hover ,
.akkordeon label a:hover {
	background: #525469;
	color: white;
}

.akkordeon b:before {
	display:inline-block;
	vertical-align:top;
	font-family:'FontAwesome';
	content:"\f0d7";
	padding-right:8px;
	color:#fff ;
	font-size:14px;
}

/* - - - - - - sub-level - - - - - - */

.akkordeon ul {
	display:block;
	width:100%;
	margin:0 auto;
	padding:0rem ;
}

.akkordeon li {
	list-style-type : none;
	margin:0;
	padding:0;
	
	text-align:center;
	text-decoration : none;
	color:#fff;
	font-size:1rem;
	line-height:1.9rem;
	letter-spacing:.2rem;

/*	text-align:left;
	text-decoration : none;
	color:#f00;
	font-size:1.5rem;
	line-height:1.9rem;
	letter-spacing:.2rem;
	padding:.4rem 1rem ;
	margin: 0;*/
}

.akkordeon li a {
	display:block;
	background: transparent;
	color:#fff;

	text-align:center;
	text-decoration : none;
	font-size:1.5rem;
	line-height:1.9rem;
	letter-spacing:.2rem;
	padding:.4rem 1rem ;
	margin: 0;
}

.akkordeon li a:hover {
	background: #CACBD0;
	color:#3D3F50;
}

/* - - - - - - sub-sub-level - - - - - - */

.akkordeon ul li ul {
	display:block;
	width:100%;
	margin:0 auto;
	padding:0rem ;
}

.akkordeon ul li li {
	list-style-type : none;
	margin:0;
	padding:0;
}

.akkordeon ul li li a {
	display:block;
	background: transparent;
	color:#fff;

	text-align:center;
	text-decoration : none;
	font-size:1.5rem;
	line-height:1.9rem;
	letter-spacing:.2rem;
	padding:.4rem 1rem ;
	margin: 0;
}

.akkordeon ul li li a:hover {
	background: #35342F;
	color:#D3D08F;
}


/* - - - - - - toggle-funktion - - - - - - */

.akkordeon input{
	display: none;
}

.akkordeon input[type=radio]:checked + label,
.akkordeon input[type=radio]:checked + label b,
.akkordeon input[type=radio]:checked + label:hover {
	background: #525469;
}

.akkordeon span {
	display:block;
	overflow: hidden;
	background:#797B97;
	text-align:left;
	height: 0;
	margin: 0;
	transition: all 1s ease-in-out;
}

.akkordeon input[type=radio]:checked ~ span {
	height: 18rem;
}

.fusframe {
	overflow: hidden;
}

/* ############################################################ */
/* M E D I A  Q U E R I E S - RESPONSIVE-BILDSCHIRMABFRAGEN*/
/* ############################################################ */

/* ===================================== ab 640 pixel ================================= */

@media (min-width: 640px) {

	.akkordeon {
		width: 42%;
	}
}

/* ===================================== ab 1024 pixel ================================= */

@media (min-width: 1024px) {

	label.button-open,
	label.button-close {
		display:none;
	}

	#nav {
		right:0;
	}

	.akkordeon {
		width: 100%;
		background:transparent;
	}

	.akkordeon .bereich {
		width:25%;
	}

	/*Hover ausblendung inhalt bei nicht-aufklapp-links */
	.akkordeon .bereich:hover span.no-drop {
		opacity:0;
	}

	/* Hover einblenden inhalt bei aufklapp-links*/
	.akkordeon .bereich:hover span {
		opacity:1;
	}

	/* - - - - - - top-level - - - - - - */

	.akkordeon label ,
	.akkordeon label b,
	.akkordeon label a {
		box-shadow:0px 0px 1px #000;
		margin:0;
		background: linear-gradient(to bottom, #5E6079,#000 );
		border-bottom:solid 4px #788696;
		height:4rem;
		line-height:4rem;
		font-size:1.1rem;
	}

	.akkordeon label:hover ,
	.akkordeon label b:hover ,
	.akkordeon label a:hover
	{
		background:#525469;
		border-bottom:solid 4px #C5CBD1;
	}

	/* - - - - - - sub-level - - - - - - */

	.akkordeon li a {
		text-align:left;
		font-size:1.2rem;
		line-height:1.5rem;
	}

	/* - - - - - - toggle-funktion- - - - - - */

	.akkordeon span {
		height: 18rem;
		opacity:0;
		box-shadow:0 0 5px rgba(0,0,0,.5);
	}

	.akkordeon input[type=radio]:checked ~ span {
		opacity:1;
	}
}

/* = = = = = = = = = = = = = = = = = = = = = Code Ende = = = = = = = = = = = = = = = = = = = = = */