/* = = = = = = = = = = = = = = = = = 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 ,
#infofenster-2 {display:inline-block;
z-index:1;
top:0;
left:0;
position:absolute;
background:#efefef;
text-align:left;
font-size:1.5rem;
height:80vh;
width:92vw;
margin-top:10vh;
margin-bottom:10vh;
margin-left:4vw;
margin-right:4vw;
padding: 0rem ;
border:solid 1px #DFDFDF;
opacity:0;
transform: scale(0);
transition:all 2s ease-out;
}

.infofenster-inhalt {display:inline-block;
padding:2rem 1rem ;
height:100%;
width :100%;
overflow:auto;
}

#infofenster h2 , h3 ,
#infofenster-2 h2 , h3 {text-shadow:none;
text-align:left;
}

#infofenster span {display:inline-block;
margin:0;
text-transform:uppercase;
letter-spacing:2px;
color:steelblue;
font-weight:bold;
}





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

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

label.button-open ,
label.button-open-2  {
display:block;text-align:center;
margin:.6rem auto 0 ;
padding:1rem .2rem;
cursor:pointer;
font-size:1.5rem;
width:20rem;
text-transform:uppercase;
color:#fff;
background:#4682B4;
box-shadow:0px 0px 2px #7F7F7F;
border-radius:5rem;
font-weight:bold;
}

label.button-open .fas ,
label.button-open-2 .fas  {display:inline-block;
color:#fff;
margin-right:.5rem;
}

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

/* hover */
label.button-open:hover ,
label.button-open-2:hover  {
background:#EFEFEF;
color:#000;
box-shadow:1px 1px 3px #7F7F7F;
}

/* hover icon */
label.button-open:hover .fas ,
label.button-open-2:hover .fas{
color:steelblue;
animation:drehen .6s ease-out;
}



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

label.button-close ,
label.button-close-2 {
position: absolute;
top:-2rem;right:-1rem;
z-index:2;
opacity:1;
display:inline-block;
cursor:pointer;
text-transform:uppercase;
background:#4682B4;
text-align:center;
vertical-align:middle;
height:4rem;
width:4rem;
line-height:4rem;
font-size:3rem;
transition:all .3s ease-out;
}

label.button-close .fas ,
label.button-close-2 .fas {display:inline-block;
text-align:center;
color:#FFFFFF;
}


/* hover */
label.button-close:hover ,
label.button-close-2:hover  {
background:orange;
}

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


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

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

/* schaltet infofenster ein/aus */
input#open:checked ~ #infofenster  {
animation:puff-in 1.5s ease-out forwards;
}

/* schaltet infofenster-2 ein/aus */
input#open-2:checked ~ #infofenster-2  {
animation:puff-in 1.5s ease-out forwards;
}


/*  infofenster-öffnen-button funktion */
input#open:checked ~  label.button-open ,
input#open-2:checked ~  label.button-open-2 {
z-index:1;
}

/*   infofenster-schließen-button funktion*/
input#open:checked ~  label.button-close ,
input#open-2:checked ~  label.button-close-2 {
opacity:1;
animation:drehen 5s ease-out;
}





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




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

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


}


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

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

label.button-open ,
label.button-open-2  {
display:inline-block;
margin:0;
}

label.button-close ,
label.button-close-2 {
top:-2rem;right:-2rem;
}

}


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

#infofenster ,
#infofenster-2 {
height:84vh;
width:90vw;
margin-top:8vh;
margin-bottom:8vh;
margin-left:5vw;
margin-right:5vw;
padding:1rem  2rem ;
}

}


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

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


}


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

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

}


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

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

}


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