/* = = = = = = = = = = = = = = = = = 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;
}

.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;
}


/* - - - - - - 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;
}


/* ############################################################ */
/* 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:16.66%;
}

/*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:0;
}

/* - - - - - - 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 = = = = = = = = = = = = = = = = = = = = = */