:root{
  --LogoPadding:  7.5%;
  --MenuPadding:  4.4vw;
  --LogoWidthToHeightRatio: 1;
  --menuContHeight:  calc(100vh - var(--headerHeight));
  /* nur oberen Variablen ändern */
  --LogoWidth:  calc(var(--headerHeight)*var(--LogoSizeToHeader)*var(-LogoWidthToHeightRatio));
  --LogoHeight: calc(var(--headerHeight)*var(--LogoSizeToHeader));
  --LogoPaddingTop: calc((var(--headerHeight) - var(--LogoHeight))/2);

}

.HeaderBox {
  height: var(--headerHeight);
  top: 0vw;
  width: var(--ContWidth);
  background: none;
  position: absolute;
  z-index: 20;
}
.MenuBox{
  float: right;
  position: absolute;
  display:block;
  z-index: 20;
  right: var(--MenuPadding);
  top: calc(var(--MenuPadding)/2);
  height: 4vw;
  width: 3.8vw;
  background-image: url("../content/menuIcon1_ws.png");
  backface-visibility: hidden;
  background-size: cover;
  background-repeat: no-repeat;
}
.HeaderContBox1 {
  visibility: var(--show-Menu);
  width: var(--ContWidth);
  height: var(--menuContHeight);
  top: var(--headerHeight);
  position: fixed;
  z-index: 25;
  background-color: var(--color-black);
  opacity: 0.6;

}
.HeaderContBox2 {
  visibility: var(--show-Menu);
  position: fixed;
  z-index: 26;
  top: var(--headerHeight);
  margin-top: 10vh;
  width: 100%;
  height: var(--menuContHeight);
  text-align: center;
  font-size: 4.4vw;
  background-color: none;
  opacity: 1;
}
#menuA_Tag{
  color: var(--color-white);
  text-decoration: none;
  font-weight: 600;
  font-size: 4.5vw;
}
#menuA_Tag:hover{
  color: var(--color-blue);
  text-shadow: 4px 4px var(--color-softGray);
}
#logoSize{
  left: 5%;
  height: var(--LogoHeight);
  width: var(--LogoWidth);

}
#menubutton{
  background-color: none;
  background: none;
  width: 100%;
  height: 100%;
  opacity: 0.8;
  border: none;
  outline: none;
}
#logoPosition{
  background-color: none;
  border: none;
  outline: none;
  background: none;
  position: absolute;
  top: var(--LogoPaddingTop);
  left: var(--LogoPadding);
}

/* Mobile Devices*/

@media all and (min-width: 600px) and (max-width: 900px) and (-webkit-max-device-pixel-ratio: 1) {
  #menuA_Tag{font-size: 5.8vw;}
}
@media all and (max-width: 599px) and (-webkit-max-device-pixel-ratio: 1) {
  .HeaderBox {height: 15vw;}
  .MenuBox {top: 4.2vw; right: 5%; height: 6vw; width: 6vw;}
  .HeaderContBox1{top: 15vw;}
  .HeaderContBox2{top: 15vw; font-size: 8.4vw;}
  #logoSize{height: 12vw; width: 54vw;}
  #logoPosition{top: 2vw; left: 3%;}
  #menuA_Tag{font-size: 7.8vw;}
}

@media all and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
  /*Mobile Landscape up to iPad */
  #menuA_Tag{font-size: 5.8vw;}
}

@media all and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
  /*Mobile Portait up to iPad */
  .HeaderBox {height: 15vw;}
  .MenuBox {top: 4.2vw; right: 5%; height: 6vw; width: 6vw;}
  .HeaderContBox1{top: 15vw;}
  .HeaderContBox2{top: 15vw; font-size: 8.4vw;}
  #logoSize{height: 12vw; width: 54vw;}
  #logoPosition{top: 2vw; left: 3%;}
  #menuA_Tag{font-size: 7.8vw;}
}