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

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


label.button-open   {
position: fixed;
z-index:2;
display:block;
cursor:pointer;
right:.5rem;top:.5rem;

color:#000;
background:#FFFFFF;
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:black;
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;
}




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

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

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

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

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

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

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

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




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

#infofenster {width :50%; }

}


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

#infofenster {width :38%; }

}


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