header.main-header {
  position: sticky;
  left: 0;
  right: 0;
  top: 0;
  z-index: 999999999999;
  background-color: var(--bs-gray-100);
  -webkit-padding-before: 1rem;
          padding-block-start: 1rem;
  -webkit-padding-after: 0rem;
          padding-block-end: 0rem;
}
header.main-header .logo-container {
  width: 80%;
  max-width: 300px;
  margin-inline: auto;
}
header.main-header .burger {
  position: fixed;
  top: 1rem;
  right: 1rem;
  width: 30px;
  height: 20px;
  z-index: 100;
  overflow: hidden;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
header.main-header .burger span {
  background: var(--dark-gray);
  height: 3px;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
header.main-header .burger span:nth-of-type(2) {
  top: 50%;
  -webkit-transform: translatey(-50%);
          transform: translatey(-50%);
}
header.main-header .burger span:nth-of-type(3) {
  top: auto;
  bottom: 0;
}

header.main-header .navs {
  position: absolute;
  left: 10%;
  right: 1rem;
  background-color: var(--bs-gray-200);
  -webkit-box-shadow: -5px 10px 10px rgba(0, 0, 0, 0.1254901961);
          box-shadow: -5px 10px 10px rgba(0, 0, 0, 0.1254901961);
  border-inline: 1px solid white;
  -webkit-border-after: 1px solid white;
          border-block-end: 1px solid white;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-flow: column-reverse nowrap;
          flex-flow: column-reverse nowrap;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  opacity: 0;
  top: 0;
  pointer-events: none;
  border-radius: 2px;
}
header.main-header .navs::before {
  content: "";
  position: absolute;
  top: -10px;
  width: 20px;
  aspect-ratio: 1;
  background: var(--bs-gray-200);
  -webkit-box-shadow: -5px 10px 10px rgba(0, 0, 0, 0.3137254902);
          box-shadow: -5px 10px 10px rgba(0, 0, 0, 0.3137254902);
  right: 3px;
  z-index: -1;
  rotate: 45deg;
  opacity: 0;
  border: 1px solid white;
}
header.main-header .navs::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 30px;
  height: 1px;
  background-color: white;
}
header.main-header .navs a {
  color: var(--base-color);
  font-weight: 900;
  text-transform: uppercase;
}
header.main-header .navs svg {
  width: 20px;
}
header.main-header .navs .top-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1rem;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-padding-end: 1rem;
          padding-inline-end: 1rem;
}
header.main-header .navs .top-nav .text {
  display: none;
}
header.main-header .navs .top-nav a {
  padding: 5px;
  border: 1px solid white;
  border-radius: 2px;
}
header.main-header .navs .top-nav svg {
  fill: var(--base-color);
}
header.main-header .navs .bottom-nav {
  padding: 2rem 0;
}
header.main-header .navs .bottom-nav .nav-item:nth-of-type(1) .icon {
  display: none;
}
header.main-header .navs .bottom-nav .nav-item a {
  display: block;
  font-size: larger;
  padding: 0.2rem 0 0.2rem 10%;
  margin-block: 5px;
  border-block: 1px solid #f1f1f1;
}
header.main-header .navs .bottom-nav .nav-item .sub-nav-items {
  position: relative;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  height: 1px;
  pointer-events: none;
  overflow: hidden;
  -webkit-transition: height 0.3s;
  transition: height 0.3s;
}
header.main-header .navs .bottom-nav .nav-item .sub-nav-items > li > a {
  font-size: smaller;
  color: var(--dark-gray);
}
header.main-header .navs .bottom-nav .nav-item.nav-item-parent > a {
  position: relative;
}
header.main-header .navs .bottom-nav .nav-item.nav-item-parent > a .icon {
  position: absolute;
  right: 1rem;
  top: 0;
  bottom: 0;
  border: 1px solid white;
  padding-inline: 8px;
}
header.main-header .navs .bottom-nav .nav-item.nav-item-parent > a .icon svg {
  fill: var(--base-color);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
header.main-header .navs .bottom-nav .nav-item.nav-item-parent.open > a .icon svg {
  rotate: 180deg;
}
header.main-header .navs .bottom-nav .nav-item.nav-item-parent.open .sub-nav-items {
  grid-template-rows: 1fr;
  opacity: 1;
  height: auto;
  pointer-events: auto;
}
header nav li.nav-item.extra-nav.call-action a {
  color: white;
  background-color: var(--red);
  transition: all 0.45s;
}
li.nav-item.extra-nav.call-action a:hover {
  color: white;
  background-color: var(--orange);
}
body header.main-header .navs .bottom-nav li.nav-item.extra-nav.call-action.current > a{
  color: white !important;
  background-color: var(--orange);
}
body.open header.main-header .burger span:nth-of-type(1) {
  top: 52%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  rotate: 45deg;
}
body.open header.main-header .burger span:nth-of-type(2) {
  width: 0;
  opacity: 0;
}
body.open header.main-header .burger span:nth-of-type(3) {
  bottom: 33%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  rotate: -45deg;
}
body.open header.main-header .navs {
  top: 7rem;
  opacity: 1;
  pointer-events: all;
}
body.open header.main-header .navs::before {
  opacity: 1;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}
body.open::after {
  opacity: 1;
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
}
body::after {
  content: "";
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  z-index: 100;
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 68, 141, 0.7411764706)), to(transparent));
  background: linear-gradient(to top, rgba(0, 68, 141, 0.7411764706), transparent);
  pointer-events: none;
  opacity: 0;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.header-mid-container svg {
  height: 15px;
  fill: var(--bs-gray-500);
  display: inline-block;
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
}
.header-mid-container svg:nth-of-type(2) {
  -webkit-margin-start: 10px;
          margin-inline-start: 10px;
}
.header-mid-container .oeffnung {
  -webkit-margin-before: 1rem;
          margin-block-start: 1rem;
  text-align: center;
  display: none;
}
.header-mid-container .oeffnung .zeit {
  display: inline-block;
  width: 100px;
}
.header-mid-container .notdienst {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: var(--bs-gray-100);
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem 0;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  /*opacity: 0;*/
  display: none !important;
  pointer-events: none;
}
.header-mid-container .notdienst:nth-of-type(2){
  display: flex !important;
}
[data-emergency="true"] .header-mid-container .notdienst:not(.ersatz){
  display: flex !important;
  pointer-events: auto;
}
[data-emergency="true"] .header-mid-container .notdienst.ersatz{
  display: none !important;
  pointer-events: auto;
}
.header-mid-container .notdienst:hover {
  background-color: var(--bs-gray-200);
}
.header-mid-container .notdienst .notdienstanfart {
  position: absolute;
  inset: 0;
  z-index: 100;
}
.header-mid-container .notdienst .icon svg {
  fill: var(--red);
  height: 30px;
}
.header-mid-container .notdienst .data span {
  display: block;
  line-height: 20px;
}
.header-mid-container .notdienst .data .title {
  color: var(--red);
}
.header-mid-container .notdienst .data .title strong {
  text-transform: uppercase;
  font-weight: 900;
}
.header-mid-container .notdienst .data .time {
  font-weight: 900;
  text-align: justify;
}

@media (min-width: 768px) {
  body header.main-header, body.open header.main-header {
    -webkit-padding-after: unset;
            padding-block-end: unset;
  }
  body header.main-header .logo-container, body.open header.main-header .logo-container {
    margin-inline: unset;
    padding: 1rem 0;
  }
  body header.main-header .container, body.open header.main-header .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 1rem;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
  }
  body .header-mid-container, body.open .header-mid-container {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    -webkit-padding-start: 1rem;
            padding-inline-start: 1rem;
    -webkit-border-start: 2px #eee solid;
            border-inline-start: 2px #eee solid;
  }
  body .header-mid-container .oeffnung, body.open .header-mid-container .oeffnung {
    display: block;
    text-align: unset;
    -webkit-margin-before: unset;
            margin-block-start: unset;
    -webkit-padding-before: 0;
            padding-block-start: 0;
    line-height: 0;
    white-space: nowrap;
  }
  body .header-mid-container .notdienst, body.open .header-mid-container .notdienst {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
  }
}
@media (min-width: 1200px) {
  body header.main-header .burger, body.open header.main-header .burger {
    display: none;
  }
  body header.main-header .navs, body.open header.main-header .navs {
    position: relative;
    opacity: 1;
    pointer-events: auto;
    border: unset;
    -webkit-box-shadow: none;
            box-shadow: none;
    background: transparent;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    padding: 0;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-flow: column;
            flex-flow: column;
  }
  body header.main-header .navs::before, body.open header.main-header .navs::before {
    display: none;
  }
  body header.main-header .navs::after, body.open header.main-header .navs::after {
    display: none;
  }
  body header.main-header .navs .top-nav, body.open header.main-header .navs .top-nav {
    -webkit-padding-end: unset;
            padding-inline-end: unset;
    margin-block: unset;
    gap: 0;
    -webkit-padding-end: 1rem;
            padding-inline-end: 1rem;
  }
  body header.main-header .navs .top-nav .nav-item a, body.open header.main-header .navs .top-nav .nav-item a {
    font-size: 12px;
    padding: 5px 5px;
    border: unset;
    color: var(--bs-gray-600);
    font-weight: normal;
    display: block;
  }
  body header.main-header .navs .top-nav .nav-item a .icon, body.open header.main-header .navs .top-nav .nav-item a .icon {
    display: none;
  }
  body header.main-header .navs .top-nav .nav-item a .text, body.open header.main-header .navs .top-nav .nav-item a .text {
    display: block;
  }
  body header.main-header .navs .bottom-nav, body.open header.main-header .navs .bottom-nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 1rem;
    padding: unset;
    margin: unset;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  body header.main-header .navs .bottom-nav > .nav-item:nth-of-type(1) > a .text, body.open header.main-header .navs .bottom-nav > .nav-item:nth-of-type(1) > a .text {
    display: none;
  }
  body header.main-header .navs .bottom-nav > .nav-item:nth-of-type(1) > a .icon, body.open header.main-header .navs .bottom-nav > .nav-item:nth-of-type(1) > a .icon {
    display: block;
  }
  body header.main-header .navs .bottom-nav > .nav-item:nth-of-type(1) > a .icon svg, body.open header.main-header .navs .bottom-nav > .nav-item:nth-of-type(1) > a .icon svg {
    fill: var(--base-color);
  }
  body header.main-header .navs .bottom-nav .nav-item a, body.open header.main-header .navs .bottom-nav .nav-item a {
    padding: 1rem;
    border-block: unset;
    margin-block: unset;
    white-space: nowrap;
    font-size: 1rem;
  }
  body header.main-header .navs .bottom-nav .nav-item.nav-item-parent > a .icon, body.open header.main-header .navs .bottom-nav .nav-item.nav-item-parent > a .icon {
    border: unset;
    position: unset;
    top: unset;
    right: unset;
    padding-inline: unset;
  }
  body header.main-header .navs .bottom-nav .nav-item.nav-item-parent > a .icon svg, body.open header.main-header .navs .bottom-nav .nav-item.nav-item-parent > a .icon svg {
    height: 16px;
  }
  body header.main-header .navs .bottom-nav .nav-item.nav-item-parent.open .sub-nav-items, body.open header.main-header .navs .bottom-nav .nav-item.nav-item-parent.open .sub-nav-items {
    top: 100%;
  }
  body header.main-header .navs .bottom-nav .nav-item .sub-nav-items, body.open header.main-header .navs .bottom-nav .nav-item .sub-nav-items {
    position: absolute;
    width: 100%;
    background-color: var(--bs-gray-300);
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    opacity: 0;
    display: block;
    top: 120%;
  }
  body .navs a:hover, body.open .navs a:hover {
    background-color: var(--bs-gray-100);
  }
  body .navs a.current, body.open .navs a.current {
    background-color: var(--base-color);
    color: white;
  }
  body .navs a.current svg, body.open .navs a.current svg {
    fill: white !important;
  }
  body .navs a.current a:hover, body.open .navs a.current a:hover {
    opacity: 0.5;
    background-color: var(--cornflower-blue);
    color: white;
  }
  body .navs a.current a:hover svg, body.open .navs a.current a:hover svg {
    fill: white !important;
  }

  header.main-header li.nav-item.current > a {
    color: var(--red) !important;
  }
  header.main-header li.nav-item:has(li.nav-item.current) > a {
    color: var(--red) !important;
  }
  header.main-header li.nav-item.current > a svg{
    fill: var(--red) !important;
  }
}/*# sourceMappingURL=header.css.map */