

/* = = = = = = = = = = = = = = = = = 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 .fas,
label .far {font-size:3rem;display:table-cell;text-align:center;
color:#fff;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,
label.button-close .far {
color:#000;
}


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


/* 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;
height:100%;top:-200vh;
transition:all 1s;
text-transform:uppercase;
}


.akkordeon {position:absolute;
z-index:1;
right:0;top:0rem;
width: 100%;height:100%;
background:transparent;
text-align:center;
padding: 0;
}


.akkordeon .bereich {display:block;
margin:0;/* ausgleich ( minus-margin) für INLINE-BLOCK-WHITESPACE-BUG*/
padding: 0;
width:100%;
background:#DFDFDF;
}


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

.akkordeon label ,
.akkordeon label b ,
.akkordeon label a {
display:inline-block;
width:100%;
background:transparent;
color:#000;
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: #EFEFEF;
color: #000;
}

.akkordeon  label 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:#4F4F4F ;
font-size:16px;
}



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

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

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

.akkordeon li  a {display:block;text-transform:none;
background: transparent;
color:#000;
text-align:center;
text-decoration : none;
font-size:1.5rem;
line-height:1.9rem;
letter-spacing:.2rem;
padding:.4rem .5rem ;
margin: 0;
}

.akkordeon li a:hover  {background:transparent;
color:#000;text-decoration:underline;
}


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

.akkordeon span {display:block;
overflow: hidden;
background:transparent;
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: 580px) {

.akkordeon {
width: 50%;
}


}


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

@media (min-width: 1100px) {

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

#nav {top:0; }

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

.akkordeon .bereich {display:inline-block;
margin:-3px;/* ausgleich ( minus-margin) für INLINE-BLOCK-WHITESPACE-BUG*/
padding: 0;
width:16.66%;background:transparent;
}

.akkordeon .bereich span {
transition: all 0s ease-in-out;
}

/*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 {
text-shadow:none;
margin:0;
height:4rem;
line-height:4rem;
font-size:1.1rem;
background:#f4f4f4;/*IE9*/
background:radial-gradient(circle,#FDFDFD,#F4F4F4);
border: 1px solid #fff;
box-shadow: 0px  0px  1px #6F6F6F;
border-radius: 0;
}


.akkordeon label:hover ,
.akkordeon label b:hover ,
.akkordeon label a:hover
 {
background: #FDFDFD;
background:radial-gradient(circle,#fff,#fff, #F7F7F7);
color:black;
border: 1px solid #fff;
}


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

.akkordeon li  a {
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: #FDFDFD;
background:linear-gradient(to right,#DFDFDF,#F8F8F8,#DFDFDF);
color:black;
border: 1px solid #DFDFDF;
}




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

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




}


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