/**
 * Covers multiple variations of the page header
 * Changes on the layout should be applied here
 *
 * Note: please use global css vars wherever it makes sense
 *
 * @author: Darius Mozgiel | mozgiel.de
 */
/* Breakpoints
-------------------------------------------------- */
.moz-header {
  background: var(--moz-header-bg);
  align-items: center;
}
@media (min-width: 992px) {
  .moz-header {
    display: flex;
  }
}
.moz-header > * {
  flex-basis: 100%;
}
.moz-header__skyline {
  display: block;
  font-weight: bold;
  color: var(--moz-header-skyline-color);
  font-size: var(--moz-header-skyline-size);
}
@media (max-width: 992px) {
  .moz-header__skyline {
    font-size: var(--moz-header-skyline-size--mobile);
  }
}
.moz-header__title p {
  margin-bottom: 0;
}
@media (max-width: 992px) {
  .moz-header__title {
    font-size: var(--moz-header-headline-size--mobile);
  }
}
.moz-header__content {
  padding: 2rem 1rem;
}
@media (min-width: 992px) {
  .moz-header__content {
    padding: 2rem;
  }
}
@media (max-width: 992px) {
  .moz-header__content br {
    display: none;
  }
}
.moz-header__share {
  display: flex;
  gap: 0.5rem;
  margin-top: 10px;
  font-size: 2rem;
}
.moz-header__share .icon__wrapper {
  color: var(--moz-header--fullwidth-color);
}
@media (min-width: 992px) {
  .moz-header__share {
    min-width: 300px;
  }
}
.moz-header.moz-header--has-image {
  padding: 0;
  border-bottom-left-radius: var(--moz-header-border-radius) !important;
  overflow: hidden !important;
}
.moz-header.moz-header--has-image.moz-header--halfwidth.moz-header__title, .moz-header.moz-header--has-image.moz-header__title.moz-header--halfwidth-rounded {
  max-width: var(--moz-header-content-maxwidth);
}
@media (min-width: 992px) {
  .moz-header.moz-header--has-image.moz-header--halfwidth .moz-header__img, .moz-header.moz-header--has-image.moz-header--halfwidth-rounded .moz-header__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 48%;
    height: 100%;
  }
}
.moz-header.moz-header--has-image .moz-header__img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  margin-bottom: 0;
  border-radius: 0 !important;
}
.moz-header.moz-header--has-image.moz-header--halfwidth-rounded {
  border-bottom-left-radius: var(--moz-header-border-radius);
  overflow: hidden;
}
.moz-header.moz-header--has-image.moz-header--img-only, .moz-header.moz-header--has-image.moz-header--fullwidth {
  background: none !important;
  height: var(--moz-header-height--mobile);
  border-bottom-left-radius: var(--moz-header-border-radius);
  position: relative;
  overflow: hidden;
}
@media (min-width: 992px) {
  .moz-header.moz-header--has-image.moz-header--img-only, .moz-header.moz-header--has-image.moz-header--fullwidth {
    height: var(--moz-header-height);
  }
}
.moz-header.moz-header--has-image.moz-header--img-only .moz-header__img-wrapper, .moz-header.moz-header--has-image.moz-header--fullwidth .moz-header__img-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.moz-header.moz-header--has-image.moz-header--img-only .moz-header__content, .moz-header.moz-header--has-image.moz-header--fullwidth .moz-header__content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  padding: 2rem;
  background: var(--primary--transparent);
  color: var(--moz-header--fullwidth-color);
}
.moz-header.moz-header--has-image.moz-header--img-only .moz-header__content .moz-header__skyline,
.moz-header.moz-header--has-image.moz-header--img-only .moz-header__content .moz-header__title, .moz-header.moz-header--has-image.moz-header--fullwidth .moz-header__content .moz-header__skyline,
.moz-header.moz-header--has-image.moz-header--fullwidth .moz-header__content .moz-header__title {
  color: var(--moz-header--fullwidth-color);
  margin-bottom: 0 !important;
}
.moz-header.moz-header--has-image.moz-header--img-only .moz-header__content .moz-header__share, .moz-header.moz-header--has-image.moz-header--fullwidth .moz-header__content .moz-header__share {
  display: flex;
  justify-content: end;
}
.moz-header.moz-header--has-image.moz-header--img-only .moz-header__content .moz-header__share .moz-icon__wrapper, .moz-header.moz-header--has-image.moz-header--fullwidth .moz-header__content .moz-header__share .moz-icon__wrapper {
  font-size: 1rem;
  padding: 1rem;
  background: var(--link__icon--bg);
  color: var(--link__icon--color);
  text-decoration: none !important;
}
@media (min-width: 992px) {
  .moz-header.moz-header--has-image.moz-header--img-only .moz-header__content .moz-header__share .moz-icon__wrapper, .moz-header.moz-header--has-image.moz-header--fullwidth .moz-header__content .moz-header__share .moz-icon__wrapper {
    font-size: 1.5rem;
    padding: 1.15rem;
  }
}
@media (min-width: 992px) {
  .moz-header.moz-header--has-image.moz-header--img-only .moz-header__content .moz-header__share, .moz-header.moz-header--has-image.moz-header--fullwidth .moz-header__content .moz-header__share {
    margin-top: 0;
  }
}
@media (min-width: 992px) {
  .moz-header.moz-header--has-image.moz-header--img-only .moz-header__content, .moz-header.moz-header--has-image.moz-header--fullwidth .moz-header__content {
    display: flex;
    justify-content: space-between;
    align-items: start;
  }
}
.moz-header.moz-header--has-image.moz-header--img-only {
  height: auto !important;
}
.moz-header.moz-header--has-image.moz-header--img-only .moz-header__img-wrapper {
  position: relative;
}
.moz-header.moz-header--has-image.moz-header--img-only .moz-header__content {
  display: none;
}
@media (min-width: 992px) {
  .moz-header.moz-header--has-image.moz-header--fullwidth .moz-header__content.has-skyline .moz-header__share {
    margin-top: 35px;
  }
}
.moz-header.moz-header--without-image {
  border-bottom-left-radius: var(--moz-header-border-radius);
}
.moz-header.carousel .carousel-item {
  height: var(--moz-header-height--mobile);
}
@media (min-width: 992px) {
  .moz-header.carousel .carousel-item {
    height: var(--moz-header-height);
  }
}
.moz-header.carousel .carousel-item .moz-header__img-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.moz-header.carousel .carousel-item .moz-header__img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.moz-header.carousel .carousel-item .moz-header__content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  padding: 2rem;
  background: var(--primary--transparent);
  color: var(--moz-header--fullwidth-color);
}
.moz-header.carousel .carousel-item .moz-header__content .moz-header__skyline,
.moz-header.carousel .carousel-item .moz-header__content .moz-header__title {
  color: var(--moz-header--fullwidth-color);
  margin-bottom: 0 !important;
}
@media (min-width: 992px) {
  .moz-header.carousel .carousel-item .moz-header__content {
    display: flex;
    justify-content: space-between;
    align-items: start;
  }
}
.moz-header.carousel .carousel-control-prev,
.moz-header.carousel .carousel-control-next {
  width: 5%;
  opacity: 0.7;
}
.moz-header.carousel .carousel-control-prev:hover,
.moz-header.carousel .carousel-control-next:hover {
  opacity: 1;
}
.moz-header.carousel .carousel-control-prev-icon,
.moz-header.carousel .carousel-control-next-icon {
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
}