:root{
  /* Main Color Theme */
  --color-white:    #fefefe;
  --color-cream:    #f1f1f1;
  --color-brown:    #927450;
  --color-red:      #5e0708;
  --color-blue:     #2042bf;
  --color-black:    #020202;
  --color-softGray: #E6E6E6;
  --color-softRed:  #F78181;

  --BackColor-1:    #fefefe;
  --BackColor-2:    #927450;
  --BackColor-3:    #2042bf;
  --BackColor-4:    #020202;
  --BackColor-5:    #f1f1f1;


/* Size of Header and Logo */
  --headerHeight:              8vw;
  --footerHeight:              10.6vh;
  --LogoWidthToHeightRatio:    4.8;
  --LogoSizeToHeader:          0.8;
/* Size of Content; updated by JavaScript */
  --inner-Width:  98vw;
  --inner-Height: 98vh;

  --ContHeight:   var(--inner-Height);
  --ContWidth:    var(--inner-Width);

  /* Temp nachher löschen*/
    --footerContent-Height: 10.6vh;
}

* {
  padding: 0;
  margin: 0;
  /* height: 100%;
  width: 100%; */
}
body{
  font-family: "Avenir Next", "Verdana", "Arial", "Times";

  background-color: var(--BackColor-4);
}

/* Mobile Devices*/
@media all and (min-device-width: 600px) and (max-device-width: 900px) {
  :root{--ContWidth:   calc(var(--inner-Width) - 2.7vw);}
}
@media all and (max-device-width: 599px) and (orientation: landscape) {
  :root{--ContWidth:   calc(var(--inner-Width) - 2.7vw);}
}
@media all and (max-device-width: 599px) and (orientation: portrait) {
  :root{--ContWidth:   calc(var(--inner-Width) - 3.1vw);}
}

/* Desktop Devices*/
@media all and (min-width: 600px) and (max-width: 900px) {
  :root{--ContWidth:   calc(var(--inner-Width) - 2.7vw);}
}
@media all and (max-width: 599px) {
  :root{--ContWidth:   calc(var(--inner-Width) - 3.1vw);}
}