/* = = = = = = = = = = = = = = = = = datei boxfenster.css = = = = = = = = = = = = = = = = = = = = = = = = = */

/* diese datei enth�lt die BOX-FENSTER mit box-fenster-�ffnen/schliessen-funktionen */

/* ############################################################ */
/* boxfenster  */
/* ############################################################ */

.schalter {
  position: relative;
}

.boxfenster {
  display: block;
  position: fixed;
  z-index: 4;
  top: 0;
  left: 0;
  box-shadow: 0 0 1px black;
  text-align: left;
  height: 100vh;
  width: 100vw;
  margin-top: -260vh;
  overflow: hidden;
  transition: opacity .5s;
  opacity: 0;
}

.boxinhalt {
  display: block;
  overflow: auto;
  position: relative;
  background: #fff;
  color: #243348;
  height: 100%;
  padding: 3.5rem 2.5rem 0rem 2.5rem;
  margin: 0;
}

/* allgemeine links  */
.boxinhalt a {
  color: #243348;
}
.boxinhalt a:hover {
  color: #243348;
}

/*  abstandshalter im boxfenster-inhalt zum unteren rand hin */
p.break {
  line-height: 15rem;
  margin: 0;
}

/* ############################################################ */
/* oeffnen-schalter style f�r box-fenster  */
/* ############################################################ */

/* siehe in der datei format.css bei MEHR LESEN-BUTTON */

/* ############################################################ */
/* schlie�en-schalter style f�r box-fenster  */
/* ############################################################ */

.schalter label.button-close {
  display: inline-block;
  position: absolute;
  z-index: 1;
  top: 1rem;
  right: 3rem;
  cursor: pointer;
  background: transparent;
}

/* icons  */
.schalter .button-close i {
  display: inline-block;
  position: fixed;
  color: slategrey;
  margin: 0rem -1rem;
  padding: 0rem;
  font-size: 3rem;
  width: 4rem;
  height: 4rem;
  line-height: 4rem;
}

/* icons hover */
.schalter .button-close i:hover {
  color: tomato;
}

/* ############################################################ */
/*  box-fenster schaltfunktion AN / AUS */
/* ############################################################ */

/* checkboxen versteckt */
.schalter input[type="checkbox"] {
  display: none;
}
.text-underline {
  text-decoration: underline;
}
input#open-lebenslauf-erhardt:checked ~ .boxfenster,
input#open-lebenslauf-wess:checked ~ .boxfenster,
input#open-lebenslauf-vela:checked ~ .boxfenster,
input#open-info-probeneinsendung:checked ~ .boxfenster,
input#open-info-histo:checked ~ .boxfenster,
input#open-info-dermahisto:checked ~ .boxfenster,
input#open-info-zyto:checked ~ .boxfenster,
input#open-info-molekular:checked ~ .boxfenster,
input#open-info-proben:checked ~ .boxfenster,
input#open-info-bearbeitung:checked ~ .boxfenster,
input#open-impressum:checked ~ .boxfenster,
input#open-datenschutz:checked ~ .boxfenster {
  margin: 0;
  background: rgba(0, 0, 0, 0.7);
  opacity: 1;
}

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

/* ==================================== ab 480 pixel ================================== */
@media (min-width: 480px) {
  .boxinhalt {
    padding: 4rem 4rem 0rem 4rem;
  }
}

/* ==================================== ab 760 pixel ================================== */
@media (min-width: 760px) {
  .schalter label.button-close {
    top: 1rem;
    right: 4rem;
  }
}

/* ==================================== ab 1100 pixel ================================== */
@media (min-width: 1100px) {
  .boxinhalt {
    width: 80rem;
    height: 86vh;
    margin: 0 auto;
    margin-top: 8vh;
    margin-bottom: 8vh;
  }
}

/* ==================================== ab 1080 pixel ================================== */
@media (min-width: 1080px) {
  .boxinhalt {
    width: 92rem;
    padding: 4rem 6rem 0rem 6rem;
  }
}

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