body,
html {
  font-size: 1.09rem;
  line-height: 1.4;
  font-family: "Quicksand", sans-serif;
  padding: 0;
  margin: 0;
  background-color: #FBF6FF;
  overflow-y: auto;
  overflow-x: hidden;
}

sup {
  font-size: small;
}

.hideOnMobile {
  display: unset;
}

.hideOnDestop {
  display: none;
}

.divHEAD {
  width: 100vw;
  height: 120px;
  position: fixed;
  float: left;
  color: #FFF;
  background-color: #EEE;
  background-color: unset;
  box-sizing: border-box;
  z-index: 100;
}

.divHEAD_scroll {
  border-bottom: 1px solid #5c068c;
  background-color: #DADADA;
}

.divLOGO_HEAD {
  z-index: 300;
  background-image: url("/layout/otth_ag_alpha.png");
  background-position: top right;
  background-size: contain;
  background-repeat: no-repeat;
  top: 0;
  left: 35vw;
  transform: translateX(-245px);
  height: 225px;
  width: 225px;
  position: absolute;
  cursor: pointer;
}

.div180JAHRE {
  z-index: 300;
  background-image: url("/layout/otth_180jahre.webp");
  background-position: top right;
  background-size: contain;
  background-repeat: no-repeat;
  top: 0;
  left: 35vw;
  transform: translateX(19px);
  height: 82px;
  width: 82px;
  position: absolute;
  cursor: pointer;
}

@media only screen and (min-width: 150px) and (max-width: 1280px) {
  body,
html {
    font-size: 1.65rem;
    line-height: 1.35;
  }
  .hideOnMobile {
    display: none;
  }
  .hideOnDestop {
    display: unset;
  }
  .divLOGO_HEAD {
    background-size: 280px;
    left: 50vw;
    transform: translateX(-63vw);
    height: 390px;
    width: 49vw;
  }
  .div180JAHRE {
    height: 105px;
    width: 105px;
    position: absolute;
    cursor: pointer;
  }
}