/* = = = = = = = = = = = = = = = = = 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;height:50rem;
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 .fas {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 .fas {
color:#000;
}


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

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

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

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


/* ############################################################ */
/* responsive aufklapp-menü mit checkbox-hack (für radio-buttons) */
/* schaltet die sublevel-links  an/aus  */
/* ############################################################ */



/* - - - - - akkordion-menü - - - - - */

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


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


.akkordeon .bereich {display:block;
margin:0 ;/* 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:#59564D;
color: #DFDEDB;
text-align:center;
vertical-align:middle;
letter-spacing:.2rem;
font-size:1.5rem;
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: #2f2f2f;
color: white;
}

.akkordeon  b:before{
display:inline-block;
vertical-align:top;
font-family:'Font Awesome 5 Free';/* - 'Font Awesome 5 Free' for Regular and Solid symbols;
                                     - 'Font Awesome 5 Brands' for Brands symbols. */
font-weight: 900;/*  Weight of the font (mandatory)
                     - 400 for Regular and Brands symbols;
                     - 900 for Solid symbols. */
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:#DFDEDB;

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: #8F8F8F;
color:#000;
}


/* - - - - - - 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: #2f2f2f;
}

.akkordeon span {display:block;
overflow: hidden;
background:#4F4F4F;
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 600 pixel ================================= */

@media (min-width: 600px) {

.akkordeon {width: 42%; }

}


/* ===================================== ab 1100 pixel ================================= */

@media (min-width: 1100px) {

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

#nav {top:0; }

.akkordeon {
width: 100%;
background:transparent;
box-shadow:xnone;
box-shadow:0 -3px 3px #000;
}

.akkordeon .bereich {display:inline-block;
margin:0 -3px 0 -3px;/* ausgleich ( minus-margin) für INLINE-BLOCK-WHITESPACE-BUG*/
padding: 0;
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:1;
}


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

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

.akkordeon label:hover ,
.akkordeon label b:hover,
.akkordeon label a:hover
 {
margin:0;
background: linear-gradient(to bottom,#5F5F5F, #8F8F8F, #5F5F5F );
height:5rem;
line-height:5rem;
font-size:1.1rem;
box-shadow: 0 0 1px #000;
}



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


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


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

.akkordeon input[type=radio]:checked + label,
.akkordeon input[type=radio]:checked + label b,
.akkordeon input[type=radio]:checked + label:hover
{
background: linear-gradient(to bottom,#5F5F5F, #8F8F8F, #5F5F5F );
}

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

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



}


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