a {
  text-decoration: none;
}

.navbar {
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 51px;
  background-color: #ffffff;
}

.navbar-pretender {
  width: 100vw;
  height: 51px;
}

.navbar span {
  height: 24px;
  font-family: SuperGroteskA-RgLF;
  font-size: 21px;
  line-height: 20px;
  text-align: center;
  color: #000000;
  position: absolute;
}

.navbar-logo {
  left: 20px;
  top: 16px;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.navbar-back-arrow,
.navbar-back-arrow-mobile {
  cursor: pointer;
  /* Filter makes svg black */
  filter: brightness(0) saturate(100%) invert(0%) sepia(93%) saturate(0%)
    hue-rotate(284deg) brightness(107%) contrast(107%);
}

.navbar-back-arrow-mobile {
  display: none;
  position: absolute;
  left: 33px;
  top: 11px;
}

.navbar-mobile-logo {
  display: none;
  position: absolute;
  left: 12px;
  top: 11px;
  font-family: SuperGroteskA-RgLF;
  font-size: 18px;
  line-height: 18px;
  z-index: 2;
  color: #000000;
  cursor: default;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.navbar-mobile-navigator-opener {
  display: none;
  /* position: absolute; */
  /* top: 16px; */
  /* right: 17px; */
  font-family: SuperGroteskA-RgLF;
  font-size: 18px;
  line-height: 18px;
  z-index: 2;
  cursor: pointer;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.navbar-title {
  left: 50%;
  transform: translateX(-50%);
  top: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 50%;
}

.navbar-top-right {
  right: 17px;
  top: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.filter-opener:hover {
  cursor: pointer;
}

.filter-opener-mobile {
  display: none;
  z-index: 2;
  position: fixed;
  bottom: 10vh;
  left: 50%;
  transform: translateX(-50%);
}

.navbar-oval {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: solid 1px #000000;
  margin-left: 4px;
  position: relative;
  /* top: 2px; */
  cursor: pointer;
}

/* WERKSVERZEICHNIS UNTERSEITE NAVBAR */
#wu-navbar {
  background-color: #222121;
  color: #ffffff;
  position: fixed;
  transition: background-color 0.3s;
}

#wu-navbar.light {
  color: #222121;
  background-color: #ffffff;
}

#wu-navbar.closed {
  display: none;
}

#wu-navbar span {
  color: #ffffff;
}

#wu-navbar.light span {
  color: #222121;
}

#wu-navbar .navbar-oval {
  position: relative;
  top: -2px;
}

/* The -2 is bcs a weird inconsistency between the outer and inner navbar in werksverzeichnis-unterseite */
#wu-navbar .wu-navbar-tolight-button {
  position: relative;
  top: -2px;
}

.wu-navbar-tolight-button-mobile {
  display: none;
  position: relative;
  top: -1px;
}

#wu-navbar .navbar-oval,
.wu-slide-info .navbar-oval {
  border: solid 1px #ffffff;
  margin-left: 5px;
  background-color: #ffffff;
}

.wu-slide-info .navbar-oval {
  position: absolute;
  top: 17px;
  right: 17px;
}

.wu-navbar-back-arrow {
  /* filter: brightness(0) saturate(100%) invert(0%) sepia(88%) saturate(7477%)
    hue-rotate(40deg) brightness(99%) contrast(100%); */
  position: relative;
  /* top: 2px; */
  cursor: pointer;
}

.wu-navbar-back-arrow-mobile {
  display: none;
  position: absolute;
  left: 32px;
  top: 11px;
}

.wu-navbar-tolight-button {
  position: relative;
  /* top: -2px; */
  margin-left: 5px;
  cursor: pointer;
}

.navbar.light .wu-navbar-back-arrow {
  filter: brightness(0) saturate(100%) invert(0%) sepia(88%) saturate(7477%)
    hue-rotate(40deg) brightness(99%) contrast(100%);
}

#wu-navbar.light .navbar-oval {
  background-color: #4c4c4c;
}

/* WERKSVERZEICHNIS UNTERSEITE SLIDER NAVBAR */
#wu-slider-navbar {
  background-color: #222121;
  color: #ffffff;
  position: fixed;
  transition: background-color 0.3s;
}

#wu-slider-navbar.light {
  color: #222121;
  background-color: #ffffff;
}

#wu-slider-navbar span {
  color: #ffffff;
}

#wu-slider-navbar .navbar-mobile-logo,
#wu-navbar .navbar-mobile-logo {
  color: #ffffff;
}

body.light #wu-slider-navbar .navbar-mobile-logo,
body.light #wu-navbar .navbar-mobile-logo {
  color: #222121;
}

#wu-slider-navbar.light span {
  color: #222121;
}

#wu-slider-navbar .navbar-oval {
  border: solid 1px #ffffff;
  margin-left: 5px;
  background-color: #ffffff;
}

#wu-slider-navbar-info {
  position: relative;
  margin-left: 7px;
  cursor: pointer;
}

#wu-slider-navbar.light .navbar-oval {
  background-color: #4c4c4c;
}

@media only screen and (max-width: 768px) {
  .navbar {
    height: 38px;
  }

  .navbar-pretender {
    height: 38px;
  }

  .navbar span {
    height: 20px;
    font-size: 18px;
    line-height: 18px;
  }

  .navbar-logo,
  .navbar-oval {
    display: none;
  }

  .navbar-back-arrow {
    display: none;
  }

  .navbar-back-arrow-mobile {
    display: block;
  }

  .navbar-mobile-logo,
  .navbar-mobile-navigator-opener {
    display: initial;
  }

  .navbar-title {
    top: 11px;
    /* If you make this 100%, it will overflow some links in the navbar and thus cause problems! */
    width: 60%;
    max-width: 60%;
  }

  .navbar-top-right {
    top: 11px;
    right: 8px;
  }

  .navbar-top-right .filter-opener {
    display: none;
  }

  .filter-opener-mobile {
    display: block;
  }

  #wu-slider-navbar-info {
    display: none;
  }

  .wu-navbar-back-arrow-desktop {
    display: none;
  }

  .wu-navbar-back-arrow-mobile {
    display: initial;
  }

  .wu-navbar-tolight-button-desktop {
    display: none;
  }

  .wu-navbar-tolight-button-mobile {
    display: initial;
  }
}