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



/* ############################################################ */
/* diese datei enthält das hauptmenü - hier ist es das infofenster */
/* 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;
position:absolute;
top:0;
left:0;
overflow:auto;
background:#222528;
text-align:left;
font-size:1.5rem;
height:80vh;
width:94vw;
margin-top:10vh;
margin-bottom:10vh;
margin-left:3vw;
margin-right:3vw;
padding:4rem 1rem 0 1rem ;
opacity:0;
transform: scale(0);
transition:all 2s ease-out;
}


/* - - - - - TOGGLE-FUNKTION (INFOFENSTER AN UND AUS)  - - - - - */

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

label.button-open   {
position: relative;
z-index:2;
display:inline-block;
cursor:pointer;
right:.5rem;top:.5rem;
text-transform:uppercase;
color:#DFDFDF;
background:#000;
padding:.5rem 1rem;
border-radius:5rem;
transition:all 1s ease-out;
animation:fade-in-2 5s ;
}

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

label.button-open a .fas {
margin:0rem;
}

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

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



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

label.button-close   {
position: absolute;
top:0rem;right:0rem;
z-index:2;
display:inline-block;
cursor:pointer;
text-transform:uppercase;
color:#fff;
background:#ff7400;
text-align:center;
vertical-align:middle;
height:4rem;
width:4rem;
line-height:4rem;
font-size:3rem
}

label.button-close .fas {display:inline-block;
text-align:center;
color:#005d5d;
}

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

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

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

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

/* schaltet infofenster ein/aus */
input#open:checked ~ #infofenster  {
opacity:1;
transform:scale(1);
}

/* wechselt zw. infofenster-öffnen-button und infofenster-schließen-button */
input#open:checked ~  label.button-open  {
z-index:1;
}


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



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

#infofenster {
height:94vh;
width:94vw;
margin-top:3vh;
margin-bottom:3vh;
margin-left:3vw;
margin-right:3vw;
padding:1rem 1rem 0 1rem ;
}

}


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

#infofenster {
height:60vh;
width:80vw;
margin-top:20vh;
margin-bottom:20vh;
margin-left:10vw;
margin-right:10vw;
padding:2rem  2rem ;
}

}


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

#infofenster {
height:94vh;
width:94vw;
margin-top:3vh;
margin-bottom:3vh;
margin-left:3vw;
margin-right:3vw;
}

}


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

#infofenster {
height:50vh;
width:80vw;
margin-top:25vh;
margin-bottom:25vh;
margin-left:10vw;
margin-right:10vw;
}

label.button-close   {
height:5rem;
width:5rem;
line-height:5rem;
}

}


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

#infofenster {
height:70vh;
width:70vw;
margin-top:15vh;
margin-bottom:15vh;
margin-left:15vw;
margin-right:15vw;
}

}


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

#infofenster {
height:70vh;
width:60vw;
margin-top:15vh;
margin-bottom:15vh;
margin-left:20vw;
margin-right:20vw;
}

}


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