div#header{
  top: -4vw;
  width: 100%;
  height: 0px;
  position: relative;
  overflow-y: visible;
}

div#logocontainer{
  text-align: center;
  height: 25vw;
  position: relative;
  overflow-x: hidden;
}

a.logoLink{
  position: absolute;
  height: 11.5vw;
  right: 1vw;
  top: 4vw;
  width: 16.5vw;
  z-index: 1002;
}

img.logoheaderRand{
  position: absolute;
  display: block;
  height: 18vw;
  right: -10vw;
  z-index: 1000;
}

img.logoheaderMitte{
  position: absolute;
  display: block;
  height: 18vw;
  left: -9999px;
  right: -9999px;
  margin: auto;
  margin-top: 0.3vw;
  z-index: 1000;
}

div.textfeld {
  position: absolute;
  font-style: italic;
  color: #000000;
  font-family: var(--SeitentitelFont);
  font-weight: 700;
  font-size: calc(14pt + 1vw);
  text-align: center;
  width: 85vw;
  top: calc(9vw - 7px);
  z-index: 1001;
}

div.textfeld.noMountains {
  top: 6.5vw;
}

div.textfeld a:link {
  margin-left: 1vw;
  margin-right: 2vw;
}
div.textfeld a:hover {
  text-shadow: 1px 1px 2.5px rgb(92,66,0,1);
  text-decoration: none;
}

img.icons{
  width: 3vw;
  min-width: 28px;
  height: auto;
  margin-bottom: 1vw;
  margin-right: 4px;
  vertical-align: middle;
}
img.hover{
  display: none;
}
img.nohover{
  display: inline-block;
}

a#map:hover > img.hover{display: inline-block;}
a#map:hover > img.nohover{display: none;}
a#ber:hover > img.hover{display: inline-block;}
a#ber:hover > img.nohover{display: none;}
a#stat:hover > img.hover{display: inline-block;}
a#stat:hover > img.nohover{display: none;}
a#ausr:hover > img.hover{display: inline-block;}
a#ausr:hover > img.nohover{display: none;}
a#faq:hover > img.hover{display: inline-block;}
a#faq:hover > img.nohover{display: none;}

/* =========  Zweiradler-Tour ============== */

a.zweiradlerLink{
  display: block;
  position: absolute;
  top: 0px;
  left: 5px;
  z-index: 10000;
  font-size: 14pt;
  font-style: italic;
  font-family: var(--NonSerifFont);
  font-weight: 200;
  color: #996D00;
  text-shadow: 0 0 4px #F4B413, 0 0 4px #F4B413, 0 0 4px #F4B413, 0 0 4px #F4B413, 0 0 4px #F4B413, 0 0 4px #F4B413;
  /*text-shadow: 0 0 2px var(--TourColor), 0 0 2px var(--TourColor), 0 0 2px var(--TourColor), 0 0 2px var(--TourColor), 0 0 2px var(--TourColor), 0 0 2px var(--TourColor);*/
  /*text-shadow: 2px 0 0 var(--TourColor), -2px 0 0 var(--TourColor), 0 2px 0 var(--TourColor), 0 -2px 0 var(--TourColor), 1px 1px var(--TourColor), -1px -1px 0 var(--TourColor), 1px -1px 0 var(--TourColor), -1px 1px 0 var(--TourColor);*/
}
a.zweiradlerLink img{
  height: 20px;
  vertical-align: middle;
  background-color: #F4B413;
  -webkit-box-shadow: 0px 0px 2px 2px #F4B413;
  -moz-box-shadow: 0px 0px 2px 2px #F4B413;
  box-shadow: 0px 0px 2px 2px #F4B413;
}
a.zweiradlerLink:hover{
  text-decoration: none;
  color: #715000;
}

/* ===============  Language Buttons  ============== */

/* Wrapper of each button */
a.langButtonWrapper{
  display: block;
  position: absolute;
  right: 0px;
  height: 1.5vw;
  width: 5vw;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 10001;
}

/* Positions */
a.langButtonWrapper1{top: 17vw;}
a.langButtonWrapper2{top: 18.5vw;}

/* Positions on home page */
a.langButtonWrapper1Home{top: 12vw;}
a.langButtonWrapper2Home{top: 13.5vw;}

/* Positions on Zweiradler-Home page */
a.langButtonWrapper1Zweiradler{top: 20px;}
a.langButtonWrapper2Zweiradler{top: calc(20px + 1.5vw);}

a.langActive{
  background-image: url('../graphics/navigation/lang/board-active.svg');
  font-weight: 700;
}

a.langInActive{
  background-image: url('../graphics/navigation/lang/board-inactive.svg');
  font-weight: 400;
}

a.langInActive:hover{
  background-image: url('../graphics/navigation/lang/board-active.svg');
}

/* Text ("DE" or "EN") */
p.lang{
  font-family: var(--SerifFont);
  display: block;
  position: absolute;
  height: 1.0vw;
  top: 0.1vw;
  font-size: 1.1vw;
  left: 2.9vw;
}

/* Flagge */
img.langFlag{
  display: block;
  position: absolute;
  left: 1.0vw;
  top: 0.25vw;
  height: 1.0vw;
}

/* ================  Small Screens  ================ */

/* Constant size for logo */
@media only screen and (max-width: 925px) {
  div.textfeld{width: calc(100vw - 172px); top: 76px; font-size: 3vw;}
  div.textfeld.noMountains {top: 63px; font-size: 3vw;}
  div#header{top: -36px;}
  div#logocontainer{height: 250px;/*height: 165px;*/}
  img.logoheaderMitte{margin-top: 3px; height: 165px;}
  img.logoheaderRand{height: 165px; right: -90px;}
  img.icons{margin-bottom: 8px; margin-right: 2px;}
  a.logoLink{height: 105px; right: 0px; top: 36px; width: 160px;}
  /* Language Buttons */
  a.langButtonWrapper{height: 15px; width: 50px;}
  a.langButtonWrapper1{top: 150px;}
  a.langButtonWrapper2{top: 165px;}
  a.langButtonWrapper1Home{top: 110px;}
  a.langButtonWrapper2Home{top: 125px;}
  a.langButtonWrapper1Zweiradler{top: 20px;}
  a.langButtonWrapper2Zweiradler{top: 35px;}
  img.langFlag{height: 10px; left: 9px; top: 2.5px;}
  p.lang{font-size: 8pt; height: 10px; top: 2px; left: 30px;}
  a.zweiradlerLink{font-size: 10pt;}
  a.zweiradlerLink img{height: 12px;}
}
/* Text disappear, icons get larger */
@media only screen and (max-width: 680px) {
  div.textfeld{width: calc(100vw - 170px); top: calc(72px - 2vw); font-size: 0pt; text-align: center;}
  div.textfeld.noMountains {top: calc(60px - 0vw); font-size: 14pt;}
  img.icons{margin: 0px; width: calc(30px + 1.5vw);}
  div.textfeld a:link {margin: calc(3vw - 5px);}
  div.textfeld.noMountains a:link {margin: calc(2vw - 5px);}
}
/* Menu on side for veeery small screens */
@media only screen and (max-width: 420px) {
  div.textfeld{width: 100vw; text-align: left;}
  div.textfeld.noMountains {font-size: 0pt;}
  div.textfeld.noMountains img{margin-left: 5vw;}
  img.icons{width: calc(5px + 7vw);}
}