/* Styles für die Moskau Challenge Seiten */
:root {
  --nav-background:#B79066;
  --nav-background-tier2:#C8AE92;
  --nav-highlight:#F0D392;
  --nav-color:#282828;
}
body {  
   background-color: #B6CFF8;
   margin:0; padding:0;
}
.PageHeadline {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  background-image: url(bilder/Moskau-Verl.png);
  background-repeat: repeat-x;
  background-color: white;
  overflow:auto;
}
.PageHeadline .Backlink { 
   flex: auto;
   display:inline-block;
}
.PageHeadline h1 {
   flex: auto;
   display:inline-block;
}
.PageHeadline img {
   flex: auto;
   flex-grow: 0;
}

nav {
  background-color: var(--nav-background);
  box-shadow: 1px 10px 4px 0 rgba(0,0,0,.1);
  position: sticky;
  top:0;
  width: 100%;
  padding:0;
  margin:0;
  font-size:0; /* damit der "Leerraum" zwischen den Elementen verschwindet */
/*  z-index: 3; */
}
#logo {
  display: inline;
  padding: 10px 10px;
  margin:10px 20px;
/*  float: left; */
  font-size: 20px;
  font-style:italic;
  line-height: 60px;
  border:thin;
  border-radius:5px;
  background-color: lightblue; /* var(--nav-background); */
}
/* ----- Start Hamburger ----- */
nav .menu-icon {
  cursor: pointer;
  float: right;
  padding: 28px 18px 10px 24px;
  position: relative;
  user-select: none;
  display:block;
  background-color: var(--nav-background);
}
nav .menu-icon:hover,
nav .menu-btn:hover {
  background-color:var(--nav-highlight);
}
nav .menu-icon .icon-text {
  font-family:sans-serif;
  font-size:15px;
  display:block;
  position:relative;
  top:-10px;
  left:18px;
  padding:0px 28px 0px 10px;
}
nav .menu-icon .nav-icon {
  background: var(--nav-color);
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 18px;
}
nav .menu-icon .nav-icon:before,
nav .menu-icon .nav-icon:after {
  background: var(--nav-color);
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}
nav .menu-icon .nav-icon:before {
  top: 5px;
}
nav .menu-icon .nav-icon:after {
  top: -5px;
}
nav .menu-btn {
  display: none;
}
nav .menu-btn:checked ~ .menu {
  max-height: 100%;
}
nav .menu-btn:checked ~ .menu-icon .nav-icon {
  background: transparent;
}
nav .menu-btn:checked ~ .menu-icon .nav-icon:before {
  transform: rotate(-45deg);
  top:0;
}
nav .menu-btn:checked ~ .menu-icon .nav-icon:after {
  transform: rotate(45deg);
  top:0;
}
/* ----- Ende Hamburger ----- */
/* ----- Start Menu ----- */
nav ul input {
  display:none; 
}
nav ul label ~ a {
  display:none; 
}
nav ul {
  display:block;
  float: none;
  clear: none;
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
  max-height:0;
  overflow: hidden;
  transition: max-height .5s ease;
}
nav ul ul {
  display:block;
  float: none;
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
  max-height:0;
  overflow: hidden;
  transition: max-height .5s ease;
}
nav ul li {
  margin: 0px;
  display: block;
/*  float: left; */
  background-color: var(--nav-background);
  width: 100%;
}
nav ul li label:before {
  content: '   \2228'; /* ∨ */
  font-size:small;
  margin-right:2em;
}
nav ul li label:after {
  content: '   \2228'; /* ∨ */
  font-size:small;
  margin-left:2em;
}
nav ul input:checked ~ label:before {
  content: '   \2227'; /* ∧ */
  font-size:small;
  margin-right:2em;
}
nav ul input:checked ~ label:after {
  content: '   \2227'; /* ∧ */
  font-size:small;
  margin-left:2em;
}
nav ul ul li {
  background-color: var(--nav-background-tier2);
}
nav ul label, nav ul a {
  display: block;
  padding: 0 20px;
  font-family:sans-serif;
  font-size: 20px;
  line-height: 30px;
  color: var(--nav-color);
  text-decoration: none;
  text-align:center;
  border: none;
}
nav ul label:hover, nav ul li:hover {
  background-color: var(--nav-highlight);
}
nav input:checked ~ ul {
  max-height:400px; /* muss größer sein als alle Untermenüzeilen zusammen */
  transition: max-height 2s ease;
}

/* ca. Standard: Smartphone < 768 < Tablet < 992 < Laptop < 1200 < Desktop */
@media (min-width: 800px) {
  nav .menu-icon, nav ul label {
    display:none;
  }
  nav ul {
    display:inline;
    max-height:100%;
    position:relative;
    overflow:visible;
  }
  nav ul li {
    display: inline-block; /*block;*/
    width: auto;
    position:relative;
  }
  nav ul ul {
    position: absolute; /* absolute: der müsste schuld sein  / mit fixed funktionierts, aber nicht "sticky" */
    top: 50px;
  }
  nav ul ul li {
    width: 170px;
    float: none;
    display: list-item;
    position: relative;
    background-color: var(--nav-background);
  }
  nav ul a {
    line-height:40px;
    text-align:left;
  }
  nav ul label ~ a {
    display:block;
  }
  nav ul li:hover ul {
    max-height:400px; /* muss größer sein als alle Untermenüzeilen zusammen */
    transition: max-height 2s ease;
  }

}
/* ----- Ende Menu ----- */

.flex-container_woche {
  display: flex;
  flex-direction: row;
  flex-wrap: no-wrap;
  justify-content: space-between;
  background-color: #FF8040;
}
.flex-item_tag {
  flex: auto;
  border:solid;
  text-align:center;
}

#pageheader {
  background-image: url(bilder/Moskau-Verl.png);
  background-repeat: repeat-x;
  position:static;
  left:0px;
}
#pageheadertable {
  width: 100%;
  padding: 0; border: none; border-spacing: 0; margin: 0;
  background-color: none;
}
#pageheaderrow {
  vertical-align: top;
  padding: 0; border: none; margin: 0;
}
#pageheadercell_left {
  text-align: left;
  padding: 0; 
  background-color: none;
}
#pageheadercell_center {
  text-align: center;
  width: 99%;
  padding: 0; 
  color:black;
  background-color: none;
}
#pageheadercell_right {
  text-align: right;
  padding: 0; 
  background-color: none;
}
article {
  text-align:center;
  color:black;
}
.WenigText {
  font-family:fantasy;
  padding:0 20%;
}
#routenvideo {
  text-align:center;
  background-color:black;
}