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

/* ############################################################ */
/* Infofenster Grund-Layout (ALLE erstmal unsichtbar) */
#infofenster,
#infofenster-2,
#infofenster-3,
#infofenster-4 {
  display: none;
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  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: 0;
  border: solid 1px #DFDFDF;
  opacity: 0;
  transition: opacity 0.5s;
}

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

/* Infofenster Titel */
#infofenster h2, #infofenster-2 h2, #infofenster-3 h2, #infofenster-4 h2,
#infofenster h3, #infofenster-2 h3, #infofenster-3 h3, #infofenster-4 h3 {
  text-shadow: none;
  text-align: left;
}

/* Infofenster Überschrift-Design */
#infofenster span,
#infofenster-3 span,
#infofenster-4 span {
  display: inline-block;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: steelblue;
  font-weight: bold;
}

@keyframes drehen {
  0%   { transform: rotate(0deg);}
  100% { transform: rotate(360deg);}
}

label.button-open .fas,
label.button-open-2 .fas,
label.button-open-3 .fas,
label.button-open-4 .fas {
  transition: transform 0.5s;
}

/* Dreh-Effekt beim Hover auf Button */
label.button-open:hover .fas,
label.button-open-2:hover .fas,
label.button-open-3:hover .fas,
label.button-open-4:hover .fas {
  animation: drehen 0.5s linear;
}


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

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

/* Hover für Button */
label.button-open:hover,
label.button-open-2:hover,
label.button-open-3:hover,
label.button-open-4:hover {
  background: #EFEFEF;
  color: #000;
}

label.button-open:hover .fas,
label.button-open-2:hover .fas,
label.button-open-3:hover .fas,
label.button-open-4:hover .fas {
  color: steelblue;
}

/* Schließen-Button */
label.button-close,
label.button-close-2,
label.button-close-3,
label.button-close-4 {
  position: absolute;
  top: -2rem;
  right: -1rem;
  z-index: 20;
  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;
  color: #fff;
}
label.button-close:hover,
label.button-close-2:hover,
label.button-close-3:hover,
label.button-close-4:hover {
  background: orange;
}

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

/* ========================== */
/*    TOGGLE-VISIBILITY!!     */
/* ========================== */
input#open:checked ~ #infofenster {
  display: block;
  opacity: 1;
}
input#open-2:checked ~ #infofenster-2 {
  display: block;
  opacity: 1;
}
input#open-3:checked ~ #infofenster-3 {
  display: block;
  opacity: 1;
}
input#open-4:checked ~ #infofenster-4 {
  display: block;
  opacity: 1;
}

/* ========================== */
/* Responsive Anpassungen     */
/* ========================== */

@media (min-width: 480px) {
  #infofenster, #infofenster-2, #infofenster-3, #infofenster-4 {
    height: 92vh;
    width: 94vw;
    margin-top: 4vh;
    margin-bottom: 4vh;
    margin-left: 3vw;
    margin-right: 3vw;
  }
}
@media (min-width: 600px) {
  #infofenster, #infofenster-2, #infofenster-3, #infofenster-4 {
    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, label.button-open-3, label.button-open-4 {
    margin: 0 .5rem 0 0;
  }
  label.button-close, label.button-close-2, label.button-close-3, label.button-close-4 {
    top: -2rem; right: -2rem;
  }
}
@media (min-width: 640px) {
  #infofenster, #infofenster-2, #infofenster-3, #infofenster-4 {
    height: 84vh;
    width: 90vw;
    margin-top: 8vh;
    margin-bottom: 8vh;
    margin-left: 5vw;
    margin-right: 5vw;
    padding: 1rem 2rem;
  }
}

/* Animationen (optional) */
@keyframes puff-in {
  0% { opacity: 0; transform: scale(0.5);}
  80% { opacity: 1; transform: scale(1.05);}
  100% { opacity: 1; transform: scale(1);}
}
@keyframes drehen {
  0% { transform: rotate(0deg);}
  100% { transform: rotate(360deg);}
}