/* frei nach https://github.com/codezero-be/responsive-nav */
:root {
	--nav-color-button:	rgb(70, 72, 36);			/* Burger-Button */
	--nav-color-text:	rgb(255,255,255);			/* Text */
	--nav-color-back: rgba(70, 72, 36, 0.8); /* Hintergrundfarbe des Mobile-Menüs */
	--nav-color-active-back: rgba(255, 255, 255, 0.3); /* Betonung des aktiven Menüpunktes */
	--nav-color-text-desktop: rgba(255, 255, 255, 0.8); /* Hintergrundfarbe des Desktop-Menüs */
	--nav-color-back-desktop: rgba(70, 72, 36, 0.2); /* Hintergrundfarbe des Desktop-Menüs */
	--nav-color-back-desktop-sub: rgba(255, 255, 255, 0.3);/* Hintergrundfarbe des Desktop-Sub-Menüs */
}
/*.nav-lock-scroll { overflow: hidden; }*/
.nav {
  right: 0; /* Mobil-Navi links (left:0) oder rechts (right:0) */
  background: var(--nav-color-back); /* Hintergrundfarbe des gesamten Menüs */
  color: var(--nav-color-text);
  display: none;
  position: absolute;
  border-radius: 0rem 0rem 0.5rem 0.5rem;
  top: 0;
  bottom: auto;
  z-index: 1;
  overflow-x: hidden;
  overflow-y: auto;
  /* box-shadow: -8px 8px 12px -3px rgba(0, 0, 0, 0.49); */

  min-width: 23rem;
  max-width: 100%;
  padding: 1rem 2rem 1rem 2rem; /* Margin der Listenpunkte, bei linker Mobil-Navi größeren Wert für links setzen */
  font-size: 1.1rem;
  font-variant: small-caps;
  letter-spacing: 0.1rem;
}
.nav ul {
  display: block;
  position: relative;
  zoom: 1;
  list-style-type: none;
  margin: 0;
  padding: 0;
  padding-top: 3rem;
}
.nav ul ul {
  padding: 0;
}

.nav a,
.nav a:hover,
.nav a:active,
.nav a:visited {
  display: block;
  position: relative;
  color: var(--nav-color-text);
  text-decoration: none;
  padding: 0.4rem;
}
/* ------------ Navi-Layout: ------------ */
.nav li {
  display: block;
  padding: 0.4rem 0rem 0.4rem 0;
  margin: 0;
  border-bottom: 1px solid #888;
  cursor: pointer;
}
.nav li:last-child {
  border-bottom: none;
}
.nav li:hover > a,
.nav li.active > a {
  color: var(--nav-color-text);
  background: var(--nav-color-active-back);
  border-radius: 0.5rem;
}
.nav .nav-submenu > ul {
  margin-left: 2rem;
}
.nav .nav-submenu > a {
  padding-right: 30px !important;
} /* Platz für den Pfeil */
.nav .nav-submenu > a:after {
  /* der Pfeil für Pull-Down */
  position: absolute;
  display: block;
  content: "";
  right: 0.5rem;
  top: 1rem;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid #fff;
}

/* ----------- Desktop-Navi ------------ */
@media only screen and (min-width: 2600px) {
  .nav-button { display: none; }
  .nav-beschreibung { display: none; }
  .nav {
    position: absolute;
    top: 0;
    color: var(--nav-color-text-desktop);
    background: var(--nav-color-back-desktop);
    border-radius: 0;
    padding: 0;
    display: block;
    overflow: visible; /* damit die Pulldown-Menues wieder sichtbar werden */
    width: 100%;
    text-align: center;
  }
  .nav li {
    position: relative;
    white-space: nowrap;
    text-align: left;
    border-bottom: none; /* hier brauchen wir keine Trennlinien zwischen den Listenpunkten */
  }
  .nav > ul > li {
    display: inline-block;
    margin: 0 0.9rem; /* der Abstand zwischen den Menüpunkten */
  }
  .nav ul {
    display: block;
    padding: 0;
  }
  .nav .nav-submenu ul {
    background: var(--nav-color-back-desktop-sub); /* Hintergrundfarbe der Pulldownmenüs */
    margin-left: 0rem;
    padding:0 1rem;
    /* box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5); */
    border-radius: 0.2rem;
  }
  .nav ul ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1;
  }
  .nav ul ul ul {
    top: 5px;
    left: 95%;
    z-index: 2;
  }
  .nav ul ul ul ul {
    z-index: 3;
  }
  .nav ul ul ul ul ul {
    z-index: 4;
  }
  .nav ul ul li.nav-left > ul {
    left: auto;
    right: 95%;
  }
  .nav-no-js .nav li:hover > ul {
    display: block;
  }
}
/* ------------ Fallback ohne Javascript: ------------ */
@media only screen and (max-width: 1999px) {
  .nav-no-js .nav-button:hover + .nav,
  .nav-no-js .nav:hover,
  .nav-no-js .nav-button:hover + .nav + .nav-close,
  .nav-no-js .nav:hover + .nav-close {
    display: block;
  }
}

/* ------------ Burger-Button: ------------ */
/* .nav-beschreibung {
  color: white;
  font-size: 1.2rem;
  position: absolute;
  top: 66.3rem;
  right: 1.85rem;
} */
.nav-button,
.nav-close {
  width: 50px;
  height: 40px;
  position: absolute;
  top: 1.2rem;
  right: 1.5rem;

  transform: rotate(0deg);
  transition: 0.5s ease-in-out;
  cursor: pointer;
  z-index: 2;
}
.nav-close {
  display: none;
}
.nav-button span {
  display: block;
  position: absolute;
  top: 0;
  left: 10%;
  height: 7px;
  width: 100%;
  background: var(--nav-color-text);
  border-radius: 4px;
  opacity: 1;
  transform: rotate(0deg);
  transition: 0.25s ease-in-out;
}
.nav-button span:nth-child(1) { top: 0px; }
.nav-button span:nth-child(2) { top: 18px; }
.nav-button span:nth-child(3) { top: 36px; }
.nav-button.open span:nth-child(1) {
  top: 1.1rem;
  transform: rotate(135deg);
}
.nav-button.open span:nth-child(2) {
  opacity: 0;
  left: -60px;
}
.nav-button.open span:nth-child(3) {
  top: 1.1rem;
  transform: rotate(-135deg);
}
@media only screen and (min-width: 1100px) {
  .nav-button, .nav-close { top: 1.8rem; }
}
/* ------------ Navi des Archivs im Footer: ------------ */
.navi-archiv {
  display: flex;
  flex-flow: row wrap;
  max-width: 16rem;
}
.navi-archiv > * {
  margin: 0;
  padding: 0.5rem 0 0.5rem 1.2rem;
  white-space: nowrap;
  font-size: 0.9rem;
}