: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 {
  top: 0px;
  height: var(--headerHeight);
  width: var(--headerHeight);
  left: 46vw;
  background: none;
  position: absolute;
  z-index: 20;
}
.MenuBox{
  float: right;
  position: absolute;
  z-index: 20;
  right: var(--MenuPadding);
  top: calc(var(--MenuPadding)/2);
  height: 4vw;
  width: 3.8vw;
  background-image: url("../content/menuIcon1_bk.png");
  backface-visibility: visible;
  background-size: cover;
  background-repeat: no-repeat;
}
.HeaderContBox1 {
  visibility: var(--show-Menu);
  width: var(--ContWidth);
  height: var(--menuContHeight);
  top: var(--headerHeight);
  position: absolute;
  z-index: 25;
  background-color: var(--color-white);
  opacity: 0.8;
}
.HeaderContBox2 {
  visibility: var(--show-Menu);
  position: absolute;
  z-index: 26;
  top: var(--headerHeight);
  margin-top: 10vw;
  padding: 0% 0% 0% 0%;
  width: 100%;
  height: auto;
  text-align: center;
  font-size: 4.4vw;
  background-color: none;
  opacity: 1;
}
#menuA_Tag{
  color: var(--color-black);
  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{
  height: var(--LogoHeight);
  width: var(--LogoHeight);
  border: 0;

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

/* Desktop Devices*/

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

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





/*Mobile Devices*/

@media all and (min-device-width: 600px) and (-webkit-min-device-pixel-ratio: 2) and (max-device-width: 900px) {
  .HeaderBox {height: 15vw;left: 44vw;}
  .MenuBox {top: 4.2vw; right: 5%; height: 6vw; width: 6vw;}
  .HeaderContBox1 {top: 14.5vw;}
  .HeaderContBox2 {top: 14.5vw;}
  #logoSize{height: 10vw; width: 10vw;}
  #logoPosition{top: 2vw; left: 3%;}
  #menuA_Tag{font-size: 5.8vw;}
}
@media all and (max-device-width: 599px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
  .HeaderBox {height: 15vw;left: 44vw;}
  .MenuBox {top: 4.2vw; right: 5%; height: 6vw; width: 6vw;}
  .HeaderContBox1 {top: 14.2vw;}
  .HeaderContBox2 {top: 14.2vw;}
  #logoSize{height: 10vw; width: 10vw;}
  #logoPosition{top: 2vw; left: 3%;}
  #menuA_Tag{font-size: 5.8vw;}
}
@media all and (max-device-width: 599px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
  .HeaderBox {height: 15vw;left: 42vw;}
  .HeaderContBox1 {top: 22vw;}
  .HeaderContBox2 {top: 22vw; font-size: 8.4vw; margin-top: 20vh;}
  .MenuBox {top: 4.2vw; right: 5%; height: 6vw; width: 6vw;}
  #logoSize{height: 18vw; width: 18vw;}
  #logoPosition{top: 2vw; left: 3%;}
  #menuA_Tag{font-size: 7.8vw;}
}