:root {
  --menu-spalte-width: 33%; /* Breite des Untermenüs (Ebene 2) für die Desktop-Ansicht */
  --menu-bg-min-height: 33vh; /* Min. Höhe der Menü-Bretter */
  --max-menu-list-height: 50vh; /* Max. Höhe der Menü-Bretter. wird in menu.js berechnet */
  --header-height: 66px;
  --drupal-displace-offset-top: 0px;
}

header.nav-wrap {
  position: sticky;
  z-index: 1030;
  background-color   : white;
  max-width: 100vw;
}

body.is-scrolled .nav-wrap {
  box-shadow         : 0 0 10px 0 rgba(0, 0, 0, 0.2);
}

/* Angabe der Höhe, damit Transition funktioniert */
@media (min-width: 992px) {
  header.nav-wrap {
    transition : height 0.3s cubic-bezier(0.05, 0.5, 0.3, 1);
    height : 118px;
  }
  body.is-scrolled header.nav-wrap {
    height : 66px;
  }
}

.navbar {
  --bs-navbar-color: var(--rot);
  --bs-navbar-hover-color: var(--rot-m);
  --bs-nav-link-color: var(--rot);
  --bs-nav-link-hover-color: var(--rot-m);
  padding: 1rem;
}
body.is-scrolled .navbar {
  padding: 0.5rem 1rem;
}

/* Animation beim Aufklappen von Menübereichen anpassen */
.navbar .collapse,
.navbar .collapsing {
  transition: none;
}

/* Menü-Bretter definieren */
.mobile-mode .menu-tile,
.desktop-mode #mainmenu .submenu,
.desktop-mode #search-menu.menu-tile {
  /*outline: 2px solid lightblue;*/
  position: fixed;
  top: calc(var(--header-height, 0px) + var(--drupal-displace-offset-top, 0px));
  left: 0;
  width: 100%;
  max-height: calc(100% - 7rem);
  background-color: white;
  overflow-y: auto;
  scrollbar-width: thin;
  z-index: 2;
}

.menu-tile > .container,
.menu-tile > div > .container {
  align-items: start;
  margin: auto;
}

.menu-tile .container.navbar-nav {
  display: flex;
  width: auto;
  margin-right: 0;
  padding-right: 0;
}

.mobile-mode .menu-tile > .container {
  margin-bottom: 1rem;
  padding-left: 1rem;
  display: block;
  margin-right : auto;
  /*padding-right: auto;*/
}


/* Buttons im Kopfbereich */
button.nav-link-top {
  color: var(--rot);
  border: none;
  line-height: 1;
  border-radius: 50%;
  background: none;
}
.mobile-mode button.nav-link-top {
  padding: 0.5rem;
}
.contrast-mode button.nav-link-top {
  color: black;
}
button.nav-link-top:hover, button.nav-link-top:focus,
button.nav-link-top:not(.collapsed) {
  background-color: var(--lichtgrau);
  color: var(--dunkelrot);
}
button.navbar-toggler .control-close {
  display : inherit;
}
button.navbar-toggler .control-open {
  display : none;
}
button.navbar-toggler.collapsed .control-close {
  display : none;
}
button.navbar-toggler.collapsed .control-open {
  display : inherit;
}
.mobile-mode button.nav-link-top {
  margin-left : 1rem;
}


.desktop-mode #mainmenu .submenu {
  min-height : max(var(--menu-bg-min-height), var(--max-menu-list-height));
  padding-top: 1rem;
}

.navbar.container div.submenu > .container {
  position : relative;
  min-height : max(var(--menu-bg-min-height), var(--max-menu-list-height));
  display: block;
  margin-bottom: 1rem;
}

/* Overlay nach der Menüfläche */
.navbar.mobile-mode .menu-tile:after,
.navbar.desktop-mode div.submenu:after,
.navbar.desktop-mode div.searchbar:after {
  content: "";
  position: fixed;
  display: block;
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  background-color: rgba(0,0,0,0.7);
}


.desktop-mode.navbar-expand-lg .nav-link-top {
  position: relative;
}
.desktop-mode.navbar-expand-lg .nav-link-top:not(.search-toggler) {
  margin-right: 1rem;
  padding: 0;
  font-weight: bold;
}
.desktop-mode .nav-link-top:after {
  content          : "";
  position         : absolute;
  bottom           : 0;
  left             : 0;
  height           : 1px;
  width            : 0;
  background-color : var(--rot);
  transition       : width 0.25s cubic-bezier(0.05, 0.5, 0.3, 1);
  pointer-events   : none;
}
.contrast-mode .desktop-mode .nav-link-top:after {
  background-color: black;
}
.contrast-mode .mobile-mode li.nav-item .nav-link-top::after {
  color : black
}
.desktop-mode .nav-link-top:hover::after,
.desktop-mode .nav-link-top:focus::after,
.desktop-mode .nav-link-top:not(.collapsed)::after {
  width              : 100%;
  transition         : width 0.5s cubic-bezier(0.05, 0.5, 0.3, 1)
}


.submenu .has-children > .nav-link:not(.collapsed) {
  color: var(--rot);
}

.navbar.desktop-mode div.submenu ul.submenu-list {
  width: var(--menu-spalte-width);
}

.submenu .submenu-wrap.has-children > .nav-link:after,
.mobile-mode li.nav-item .nav-link-top:after {
  font-family: 'bielefeld-ui', sans-serif;
  content: "\e900"; /* bielefeld-ui-arrow_r */
  font-size: 0.6rem;
  color: var(--rot);
  padding-top: 0.5rem;
  float: right;
}
.mobile-mode li.is-open > .nav-link-second:after {
  padding-right: 0.6rem;
}
.contrast-mode .submenu .submenu-wrap.has-children > .nav-link::after,
.contrast-mode .mobile-mode li.nav-item .nav-link-top:after {
  color: black;
}

.mobile-mode li.is-open > .nav-link::after {
  transform: rotate(-90deg);
}

.submenu .nav-link {
  color: black;
  width: 100%;
}
.navbar-nav .nav-link-second:hover,
.navbar-nav .nav-link-second:focus {
  color: var(--rot);
}
.navbar-nav .nav-link.active-trail {
  color: var(--dunkelrot);
}
.submenu .nav-link.is-active {
  color: var(--rot);
}
.navbar-nav .nav-link-deepmenu:hover,
.navbar-nav .nav-link-deepmenu:focus,
.navbar-nav .deepmenu-title .nav-link:hover,
.navbar-nav .deepmenu-title .nav-link:focus {
  text-decoration : underline;
}

.nav-link-top {
  font-size   : 1.25rem;
  font-weight : bold;
  padding: 0.2em;
}
.mobile-mode .navbar-nav .nav-link-top {
  font-size  : 1.5rem;
  padding-right: 1rem;
}

/* Zweite Ebene */
.navbar-nav .submenu .nav-link-second {
  font-size  : 1.25rem;
  padding     : 0.15rem 0;
  width       : 100%;
  font-weight : bold;
}
/* MP aus zweiter Ebene als Überschrift in der dritten Ebene */
.navbar.desktop-mode .deepmenu-title {
  padding-left: 0.4rem;
}

.nav-link-deepmenu {
  padding: 0.15em;
}


.navbar.desktop-mode .deepmenu {
  position: absolute;
  top: 0;
  width: calc(100% - var(--menu-spalte-width) - 5%);
  margin-left: calc(var(--menu-spalte-width) + 5%);
  overflow-y: auto;
  scrollbar-width: thin;
}

.navbar.mobile-mode .deepmenu {
  padding-left : 1rem;
}


/* Suche im Menü */
.navbar .block-search-form-block {
  margin-top: 2rem;
  margin-bottom: 2rem;
}


.navbar div.searchbar-inner {
  max-width: 48em;
  margin-left: auto;
  margin-right: 0.3rem;
  position: relative;
}
.navbar div.searchbar-inner input {
  background-color: var(--lichtgrau);
  border: none;
}


/* "zurück"-Link ist erstmal nicht sichtbar */
.navbar .menulevelup-wrapper {
  display: none;
}
/* im mobilen Menü ist weggeblendet */
.navbar.mobile-mode .menulevelup-wrapper {
  display: inherit;
  visibility: hidden;
}
/* "zurück"-Link ist im mobilen Menü sichtbar, wenn etwas aufgeklappt ist */
.navbar.mobile-mode ul.is-open-parent > li.menulevelup-wrapper {
  visibility: visible;
}

.navbar .menulevelup-wrapper a {
  display: block;
  font-size: 1.2rem;
  padding: 0.7rem 0;
  border-bottom: 2px solid var(--hellgrau);
  margin-bottom: 0.5rem;
}
.navbar .menulevelup-wrapper a > i {
  display: inline-block;
  margin-right: 0.5rem;
  vertical-align: text-bottom;
}


/* im mobilen Menü, die Geschwister-Menüpunkte ausblenden, wenn etwas aufgeklappt ist */
.navbar.mobile-mode ul.is-open-parent > li:not(.is-open,.menulevelup-wrapper) {
  display: none;
}



/* Service-Links oben im Header (bzw. in der mobilen Version unter dem Hauptmenue */
html {
  --headerservicelinks-width: auto;  /* Standard. Wird per JS angepasst */
}
@media (min-width: 992px) {

  .headerservicelinks-wrapper.collapse {
    display: block;
  }

  .headerservicelinks-wrapper {
    background-color : var(--lichtgrau);
    border-radius    : 2rem;
    height           : 1.9rem;
    margin-left      : 1rem;
    padding          : 0.1rem 0.5rem 0 0.5rem;
    /*z-index          : 100;*/
    overflow         : hidden;
    width            : var(--headerservicelinks-width, 2rem);
  }
  .navbar .headerservicelinks-wrapper.collapse {
    transition : width 0.6s ease;
  }

  #headerservicelinks {
    display     : inline-block;
    font-size   : 0.75rem;
    white-space : nowrap;
    width: auto;
    padding: 0;
  }

  .headerservicelinks-wrapper {
    display : inherit;
  }

  #headerservicelinks li {
    margin-right : 1rem;
    display      : inline-block;
  }

  #headerservicelinks li:last-child {
    margin-right : 0;
  }

  #headerservicelinks a {
    display         : inline-block;
    padding         : 0.1rem 0;
    /*color: white;*/
    border-bottom   : 1px solid transparent;
    text-decoration : inherit;
    max-width       : inherit;
  }

  #headerservicelinks a i {
    font-size      : 1rem;
    vertical-align : bottom;
  }

  body.is-scrolled .headerservicelinks-wrapper {
    width: 1.9rem;
    margin-left: 0.5rem;
  }
  body.is-scrolled .headerservicelinks-wrapper:hover,
  body.is-scrolled .headerservicelinks-wrapper:focus-within {
    width: var(--headerservicelinks-width);
  }

  body.is-scrolled #headerservicelinks a i {
    margin-right: 0.5em;
  }
  body.is-scrolled .headerservicelinks-wrapper:hover #headerservicelinks a i,
  body.is-scrolled .headerservicelinks-wrapper:focus-within #headerservicelinks a i {
    margin-right: inherit;
  }

}
@media (min-width: 992px) and (max-width: 1440px) {
  .headerservicelinks-wrapper {
    position : absolute;
    right    : 1rem;
    top      : 0.25rem;
    /*outline: 2px solid orange;*/
  }
  body.is-scrolled .headerservicelinks-wrapper {
    top: inherit;
  }

  body.is-scrolled .navbar {
    padding-right: 3rem;
  }
}


.mobile-mode #headerservicelinks {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.mobile-mode #headerservicelinks li {
  display: block;
}
.mobile-mode #headerservicelinks a {
  margin-bottom: 1rem;
  display: block;
  font-size: 1.2rem;
}
.mobile-mode #headerservicelinks a i {
  margin-right : 1rem;
}
#headerservicelinks a:hover, #headerservicelinks a:focus {
  border-bottom-color: inherit;
}