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

#infofenster{display:block;
z-index:1;
width :100%;
position:absolute;
top:0%;left:0%;
height:100vh;
margin-top:-200vh;
background:#222528;
padding: 4rem 4rem 2rem 3rem;
text-align:left;
box-shadow: 0 0 3px black;
transition:all 2s ease-out;
overflow:auto;
}


/* - - - - - TOGGLE-FUNKTION (INFOFENSTER AN UND AUS) MIT CHECKBOX-HACK - - - - - */

/* - - -  infofenster-öffnen-schalter  formatierung - - - */

label.button-open   {
position: fixed;
z-index:2;
display:block;
cursor:pointer;
right:.5rem;top:.5rem;
color:#000;
background:#F7F7F7;
padding:.3rem 1rem;
border:solid 1px black;
border-radius:4rem;
transition:all .6s ease-out;
}

label.button-open .fas {display:inline-block;
text-align:center;
color:red;
margin-right:.5rem;
}

/* hover */
label.button-open:hover  {
background:#CFCFCF;
}

/* hover icon */
label.button-open:hover .fas {
color:black;
}

/*  home-button auf den unterseiten  */

.home a {display:block;position:fixed;
top:.5rem; right:.5rem;
padding:.2rem;
color:#fff;
background:firebrick;
}

.home a:hover {
background:#9f9f9f;
}



/* - - - infofenster-schließen-schalter  formatierung - - - */

label.button-close   {
position: fixed;
z-index:2;
display:inline-block;
cursor:pointer;
right:.5rem;top:.5rem;
text-transform:uppercase;
color:#fff;
background:firebrick;
padding:.3rem 1rem;
border:solid 1px black;
border-radius:4rem;
}

label.button-close .fas {display:inline-block;
text-align:center;
color:white;
margin-right:.5rem;
}

/* hover */
label.button-close:hover  {
background:firebrick;
}

/* hover icon */
label.button-close:hover .fas {
color:yellow;
}

/* - - - toggle-funkton - - - */

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

/* schaltet infofenster ein/aus */
input#open:checked ~ #infofenster  {
margin-top:0;position:fixed;transition:all 1s ;
}

/* wechselt zw. infofenster-öffnen-button und infofenster-schließen-button */
input#open:checked ~  label.button-open  {
right:-20rem
}


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



/* ==================================== ab 640 pixel ================================== */
@media (min-width: 640px) {

#infofenster {width :50%; }

}


/* ==================================== ab 1280 pixel ================================== */
@media (min-width: 1280px) {

#infofenster {width :38%; }

}


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