/*NAVIGATION*/

body:has(header.nav-open) {
  overflow: hidden;
}

button.nav-btn {
  background-color: transparent !important;
  border: none;
  outline: none;
  margin: 0;
  z-index: 2;
  display: flex;
  padding: 0;
  position: relative;
  padding-right: calc(var(--gap-l) - 10px);
  width: 100%;
  height: 100%;
  -webkit-appearance: none;
  appearance: none;
}

nav.navbar span.burger {
  display: block;
  float: left;
  width: 60px;
  height: 60px;
  background-image: var(--wpr-bg-bad20df4-45b3-4806-a65e-5537e02d8511);
  background-size: contain;
  background-repeat: no-repeat;
  /*margin-top: -10px;*/
  position: fixed;
  z-index: 99;
}

nav.navbar:not(.nav-open) span.navclose {
  display: none;
}

nav.navbar span.navclose {
  display: block;
  float: left;
  width: 50px;
  height: 50px;
  background: var(--wpr-bg-ae80ba46-fddb-40d2-855e-a65373c8f85c);
  background-size: contain;
  background-repeat: no-repeat;
  position: fixed;
}

nav.navbar.nav-open span.burger {
  display: none;
}

ul.navbar-nav {
  display: none;
  margin: 0;
}

header.nav-open {
  z-index: 100;
}

nav.navbar.nav-open ul#menu-hauptmenu {
  display: block;
  position: fixed;
  top: 0;
  width: 100%;
  height: 100vh;
  padding: 14vw 0 0 18.75vw;
  max-width: 100%;
  left: 0;
  margin-left: 0 !important;
  margin-right: 0 !important;
  z-index: 100;
}

nav.navbar.nav-open ul#menu-hauptmenu::after {
  content: "";
  display: block;
  height: 80%;
  width: 100%;
  background-image: var(--wpr-bg-195cf54b-0a20-4642-9069-42577019b78d);
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  z-index: -9;
  background-position: center;
  top: 10%;
  left: 0;
  opacity: 1;
}

nav.navbar.nav-open ul#menu-hauptmenu li {
  float: left;
  display: none;
  width: 100%;
  transition: all 0.5s ease-in;
}

nav.navbar.nav-open ul#menu-hauptmenu li a {
  font-weight: 900;
  color: var(--color-anthrazit);
  text-transform: uppercase;
  transition: 0.3s ease-in-out;
  text-decoration: none;
  font-family: var(--headlinefont);
  font-size: clamp(
    18px,
    calc(18px + (28 - 18) * ((100vw - 375px) / (1920 - 375))),
    28px
  );
  padding: 0.536em 0;
}

.nav > li > a:focus,
.nav > li > a:hover {
  background: none !important;
}

nav.navbar.nav-open ul#menu-hauptmenu li.current-menu-item a {
  color: white;
  background-color: var(--color-green);
  padding: 0.536em 10px;
  border-radius: 3px;
  width: fit-content;
}

nav.navbar.nav-open ul#menu-hauptmenu li a:hover,
nav.navbar.nav-open ul#menu-hauptmenu li a:focus {
  color: var(--color-green);
}

/*
nav.navbar.nav-open ul#menu-hauptmenu li.menu-item:last-child a {
  font-weight: 400;
  color: var(--color-anthrazit);
  font-family: var(--mainfont);
  font-size: clamp(
    13px,
    calc(13px + (19 - 13) * ((100vw - 375px) / (1920 - 375))),
    19px
  );
  text-transform: none;
  margin-top: 5vw;
}

nav.navbar.nav-open ul#menu-hauptmenu li.menu-item:last-child a:hover {
  color: var(--color-green);
}
  */

.nav-inner {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  left: 0;
  display: block;
  z-index: 1;
  overflow: hidden;
}

nav.navbar.nav-open .nav-inner {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.nav-grey {
  position: absolute;
  width: 50px;
  height: 50px;
  left: 0;
  background: var(--color-hell-grau);
  top: 0;
  border-radius: 50%;
  margin: 0;
  transform: scale(0);
  transition: none;
}

nav.navbar.nav-open .nav-grey {
  transform: scale(200);
  transition: all 0.5s linear;
}

nav.navbar.nav-open ul#menu-hauptmenu li {
  margin: 0 0 0.78vw 0;
}

@media all and (max-width: 1500px) {
  nav.navbar.nav-open ul#menu-hauptmenu {
    padding: 25vw 0 0 18.75vw;
  }
}

@media all and (max-width: 767px) {
  nav.navbar.nav-open ul#menu-hauptmenu {
    padding: 33vw 0 0 9vw;
  }

  header.nav-open #theme-logo {
    display: none;
  }

  nav.navbar span.burger {
    left: var(--gap-m);
  }

  nav.navbar.nav-open ul#menu-hauptmenu::after {
    width: 80vw;
    height: 80vw;
    top: 68vw;
    transform: translateX(40%);
  }

  body.single-post #content .wpb_image_grid_ul {
    flex-wrap: wrap;
  }
}

body.single-post #content .wpb_image_grid_ul {
  display: flex;
  padding-left: 0 !important;
  gap: 5px;
}

body.single-post #content .wpb_image_grid .wpb_image_grid_ul .isotope-item {
  margin: 0 !important;
  width: fit-content;
}