// ==========================================================================
// fce.scss - FCE styles
// ========================================================================== */
.fce-article-pagination {
  margin-bottom: 11.5rem;
  margin-top: 6.875rem;
  @include media-breakpoint-down(lg) {
    margin-bottom: 8rem;
    margin-top: 5rem;
  }
}

.fce-embeded-media-element {
  margin-bottom: 3rem;
  iframe {
    max-width: 100%;
  }
}

.fce-footer-partners {
  padding: 1.625rem 2rem;
  @include media-breakpoint-down(sm) {
    padding-left: 0;
    padding-right: 0;
  }
  &--with-border {
    & > .container {
      padding: 0 (1.75rem + $grid-gutter-width-base / 2);
      &:after {
        border: 2px solid mix($black, $white, 15%);
        bottom: -1.625rem;
        content: "";
        left: $grid-gutter-width-base / 2;
        position: absolute;
        right: $grid-gutter-width-base / 2;
        top: -1.625rem;
      }
    }
    .swiper-container {
      &.swiper-container-disabled {
        .swiper-wrapper {
          margin-bottom: -2.5rem;
          @include media-breakpoint-down(sm) {
            margin-bottom: -.5rem;
          }
          @include media-breakpoint-down(xs) {
            margin-bottom: -2.75rem;
          }
        }
      }
    }
  }
  &-heading {
    color: mix($black, $white, 30%);
    display: block;
    font-family: $font-family-secondary;
    font-size: $font-size-lg;
    letter-spacing: .05em;
    line-height: $headings-line-height;
    margin-bottom: 1.25rem;
    text-transform: uppercase;
  }
  .swiper-button {
    &-next,
    &-prev {
      background: $white;
      bottom: 0;
      height: auto;
      margin-top: 0;
      top: 0;
      width: 3.25rem;
      &:after {
        content: "";
        display: block;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 9px 0;
        border-color: transparent;
        margin-top: -9px;
        position: absolute;
        top: 50%;
      }
      @media (max-width: 1550px) {
        width: 1.5rem;
      }
      @include media-breakpoint-down(sm) {
        display: none;
      }
    }
    &-prev {
      left: auto;
      right: 0;
      &:after {
        border-left-width: 12px;
        border-left-color: $gray;
        right: 0;
      }
    }
    &-next {
      left: 0;
      right: auto;
      &:after {
        border-right-width: 12px;
        border-right-color: $gray;
        left: 0;
      }
    }
  }
  .swiper-container {
    margin-left: -5rem;
    margin-right: -5rem;
    padding-bottom: 0;
    padding-left: 5rem;
    padding-right: 5rem;
    &.swiper-container-disabled {
      margin-bottom: -1.625rem;
      margin-left: 0;
      margin-right: 0;
      padding-left: 0;
      padding-right: 0;
      .swiper-wrapper {
        justify-content: space-around !important;
        flex-wrap: wrap;
        transform: none !important;
      }
      .swiper-slide {
        margin-bottom: 2.5rem;
        &:last-child {
          margin-right: 0;
        }
      }
    }
    @media (max-width: 1550px) {
      margin-left: -3.25rem;
      margin-right: -3.25rem;
      padding-left: 1.5rem;
      padding-right: 1.5rem;
    }
    @include media-breakpoint-down(sm) {
      margin-left: 0;
      margin-right: 0;
      padding-left: 0;
      padding-right: 0;
    }
  }
  .swiper-wrapper {
    @include media-breakpoint-down(sm) {
      align-items: center;
      direction: initial;
      flex-wrap: wrap !important;
      justify-content: space-between;
      transform: none !important;
    }
  }
  .swiper-slide {
    width: auto;
    @include media-breakpoint-down(sm) {
      margin: .5rem .75rem !important;
      max-width: 9rem;
      &.swiper-slide-duplicate {
        display: none !important;
      }
    }
    @include media-breakpoint-down(xs) {
      margin: .75rem .5rem 2.75rem !important;
      max-width: none;
      text-align: center;
      width: 100%;
    }
  }
}

.fce-header-page {
  margin-bottom: 3.5rem;
  &-additional-info {
    bottom: 7rem;
    left: 0;
    position: absolute;
    right: 0;
    &-box {
      background: rgba($white, .9);
      font-family: $font-family-secondary;
      font-weight: bold;
      letter-spacing: .1em;
      line-height: 1.6666667;
      margin-bottom: 1.375rem;
      padding: 1rem $btn-padding-x;
      text-transform: uppercase;
      > :last-child {
        margin-bottom: 0;
      }
      @include media-breakpoint-down(xl) {
        font-size: .875rem;
      }
      @include media-breakpoint-down(lg) {
        padding-left: $grid-gutter-width-base / 2;
        padding-right: $grid-gutter-width-base / 2;
      }
      @include media-breakpoint-down(xs) {
        font-size: .75rem;
        margin-bottom: 0;
        padding-left: 0;
        padding-right: 0;
      }
    }
    @include media-breakpoint-down(md) {
      bottom: 1rem;
      padding-left: $grid-gutter-width-base / 2;
      padding-right: $grid-gutter-width-base / 2;
    }
    @include media-breakpoint-down(sm) {
      bottom: 1.875rem;
    }
    @include media-breakpoint-down(xs) {
      margin-bottom: 1rem;
      position: static;
    }
  }
  &-notes {
    background: rgba($white, .9);
    display: flex;
    flex-direction: column;
    font-family: $font-family-secondary;
    font-size: 1rem;
    justify-content: space-between;
    line-height: 1.375;
    padding: 1rem 2rem .125rem 1.5rem;
    @include media-breakpoint-down(xl) {
      font-size: .875rem;
    }
    @include media-breakpoint-down(lg) {
      padding-left: $grid-gutter-width-base / 2;
      padding-right: $grid-gutter-width-base / 2;
    }
    @include media-breakpoint-down(md) {
      flex-direction: row;
    }
    @include media-breakpoint-down(sm) {
      font-size: .75rem;
      padding-left: ($grid-gutter-width-base / 2) - .5rem;
      padding-right: ($grid-gutter-width-base / 2) - .5rem;
      padding-top: .125rem;
    }
    @include media-breakpoint-down(xs) {
      flex-direction: column;
    }
  }
  &-notes-wrapper {
    bottom: .5rem;
    left: $grid-gutter-width-base / 2;
    position: absolute;
    right: 1.875rem + $grid-gutter-width-base / 2;
    @include media-breakpoint-down(md) {
      bottom: auto;
      left: auto;
      position: relative;
      right: auto;
      top: auto;
    }
  }
  .figure-caption {
    color: $white;
    font-size: $font-size-sm;
    letter-spacing: .1em;
    margin-top: .5rem;
    text-align: right;
    @include media-breakpoint-up(xl) {
      margin-left: -50%;
    }
    @include media-breakpoint-down(md) {
      bottom: 100%;
      left: $grid-gutter-width-base / 2;
      margin-bottom: .5rem;
      position: absolute;
      right: $grid-gutter-width-base / 2;
    }
    @include media-breakpoint-down(sm) {
      letter-spacing: .05em;
      line-height: 1.2;
      margin-bottom: 1.5rem;
    }
  }
  @include media-breakpoint-down(md) {
    margin-bottom: 0;
  }
}

.fce-image-gallery {
  margin-bottom: 2rem;
  &-item {
    background: $black;
    display: block;
    margin: 0 .875rem 2rem;
    position: relative;
    @include hover-focus {
      &:before {
        opacity: 1;
        top: 50%;
      }
      img {
        opacity: .3;
      }
    }
    &:before {
      background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%20%20%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M13.72%2C9.33A5%2C5%2C0%2C1%2C1%2C15.18%2C5.8a5%2C5%2C0%2C0%2C1-1.46%2C3.52M4.95%2C12.46%2C3.54%2C11.05l.59-.58%2C1.41%2C1.41ZM2.52%2C14.88a1%2C1%2C0%2C0%2C1-1.41-1.41L3%2C11.63%2C4.37%2C13ZM14.3%2C1.7A5.8%2C5.8%2C0%2C0%2C0%2C5.81%2C9.61l-.69.69-.7-.7a.41.41%2C0%2C0%2C0-.58%2C0l-3.3%2C3.3a1.82%2C1.82%2C0%2C1%2C0%2C2.57%2C2.57l3.3-3.3a.41.41%2C0%2C0%2C0%2C0-.58l-.7-.7.69-.69A5.8%2C5.8%2C0%2C0%2C0%2C14.3%2C1.7%22%20/%3E%0A%20%20%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M12.46%2C8.06a3.2%2C3.2%2C0%2C1%2C1%2C0-4.52%2C3.2%2C3.2%2C0%2C0%2C1%2C0%2C4.52M13%2C3a4%2C4%2C0%2C1%2C0%2C0%2C5.68A4%2C4%2C0%2C0%2C0%2C13%2C3%22%20/%3E%0A%3C/svg%3E%0A");
      content: "";
      height: 2rem;
      left: 50%;
      opacity: 0;
      position: absolute;
      top: -1rem;
      transform: translate(-50%, -50%);
      transition: all .4s;
      width: 2rem;
    }
    img {
      height: auto;
      max-width: 100%;
      opacity: 1;
      transition: opacity .4s;
      @media (min-width: 456px) {
        width: 200px;
      }
      @media (max-width: 455px) {
        width: 100%;
      }
    }
  }
  &-row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -.875rem;
    margin-right: -.875rem;
  }
  &-title {
    font-size: 1.1875rem;
    font-weight: normal;
    letter-spacing: .05rem;
    text-transform: uppercase;
  }
}

.fce-link-list {
  margin-bottom: 4.375rem;
  &-item {
    color: #595959;
    font-family: $font-family-secondary;
    letter-spacing: .1em;
    margin-bottom: 1.25rem;
    padding-left: 1.375rem;
    position: relative;
    text-transform: uppercase;
    &:before {
      background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA5LjkxIDE2Ij4KICA8cG9seWdvbiBmaWxsPSIjZTMwNTEzIiBwb2ludHM9IjEuNDUgMTYgMCAxNC40NiA2LjgzIDggMCAxLjU0IDEuNDYgMCA5LjkxIDggMS40NSAxNiIvPgo8L3N2Zz4=");
      background-size: .4375rem .75rem;
      border: none;
      height: .75rem;
      left: 0;
      margin: 0;
      position: absolute;
      top: .3125rem;
      width: .43755rem;
      @include media-breakpoint-down(sm) {
        top: 0;
      }
    }
  }
  &-title {
    font-weight: bold;
    letter-spacing: .1em;
    margin-bottom: 2.75rem;
  }
}

.fce-link-list-icons {
  // Extend from .fce-sidebar-general
  &-item {
    padding-left: 2rem;
    position: relative;
    &:before {
      display: none;
    }
    &-link {
      color: $body-color;
      font-weight: bold;
    }
    .icon {
      font-size: 1.0625rem;
      left: .5rem;
      position: absolute;
      top: .1875rem;
      transform: translateX(-50%);
    }
  }
}

.fce-notice {
  margin-bottom: 3.25rem;
  &-content {
    letter-spacing: .1em;
    padding: 2.5rem ($btn-padding-x - $grid-gutter-width-base / 2 + 1rem) (2.5rem - 1.375rem);
    @include media-breakpoint-down(md) {
      padding-top: ($btn-padding-x - $grid-gutter-width-base / 2 + 1rem);
      padding-bottom: ($btn-padding-x - $grid-gutter-width-base / 2 - .375rem);
    }
    @include media-breakpoint-down(sm) {
      padding: 1rem ($btn-padding-x - $grid-gutter-width-base / 2 - .375rem) .125rem;
    }
  }
  @at-root .border--thick > & {
    &-content {
      padding-bottom: .5rem;
      padding-top: 1.75rem;
      @include media-breakpoint-down(sm) {
        padding-bottom: .125rem;
        padding-top: 1rem;
      }
    }
  }
}

.fce-share-links {
  margin-bottom: 1.375rem;
  &-item {
    background: transparent;
    border-radius: .75rem;
    color: $body-color;
    display: block;
    font-size: $font-size-base;
    height: 2.25rem;
    position: relative;
    transition: border-radius .5s, background .5s;
    width: 2.25rem;
    @include hover-focus {
      border-radius: 0;
      color: $body-color;
    }
    &--facebook {
      background: #81b9fe;
      @include hover-focus {
        background: rgba(#81b9fe, .75);
      }
    }
    &--twitter {
      background: #81e0fe;
      @include hover-focus {
        background: rgba(#81e0fe, .75);
      }
    }
    .icon {
      left: 50%;
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
}

.fce-sidebar-general,
.fce-link-list-icons {
  letter-spacing: .1em;
  line-height: 1.666667;
  margin-bottom: 1.5rem;
  &-google-map {
    margin-bottom: -.125rem;
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    &-app {
      bottom: 0;
      left: 0;
      position: absolute;
      right: 0;
      top: 0;
      &-wrapper {
        padding-bottom: 34.2713375796178%;
        position: relative;
        width: 100%;
      }
    }
  }
  &-header {
    letter-spacing: .1em;
    margin-bottom: 1rem;
    text-transform: uppercase;
  }
  &-read-more {
    bottom: 1rem;
    color: inherit;
    font-family: $font-family-secondary;
    font-size: $font-size-xs;
    position: absolute;
    right: 1rem;
    text-transform: uppercase;
  }
  &-wrapper {
    overflow: hidden;
    padding: 1.375rem 1.25rem .125rem;
    position: relative;
    @include media-breakpoint-down(sm) {
      padding-top: .875rem;
    }
  }
  a:not(.fce-sidebar-general-read-more, .btn) {
    color: inherit;
    font-weight: bold;
    @include hover-focus {
      color: $link-color;
    }
  }
  hr {
    border-top-color: #ccc;
    border-top-width: 1px;
    margin-bottom: 2rem;
    margin-top: 2rem;
  }
  .figure {
    margin-bottom: 2rem;
    @include media-breakpoint-down(xl) {
      margin-bottom: 1rem;
    }
  }
  @include media-breakpoint-down(xl) {
    font-size: .75rem;
    letter-spacing: .05em;
  }
}

.fce-sidebar-general {
  &-team {
    &-person {
      letter-spacing: .1em;
      margin-bottom: 3rem;
      &-info {
        line-height: 1.33333;
      }
      &-name {
        margin-bottom: .5rem;
        text-transform: uppercase;
      }
      &-position {
        margin-bottom: 1rem;
        text-transform: uppercase;
      }
    }
  }
}

.fce-team {
  margin-bottom: 3rem;
  &-hidden {
    display: none;
  }
  &-person {
    letter-spacing: .1em;
    margin-bottom: 3.875rem;
    &-contact {
      line-height: 1.33333;
      margin-bottom: 3.5rem;
    }
    &-motto {
      background: $gray-lightest;
      border-radius: 0 1.25rem 1.25rem;
      font-size: $font-size-sm;
      line-height: 1.6923;
      padding: 1.5rem 17.5% .5rem 1.375rem;
      position: relative;
      &:before {
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2047%2018%22%3E%0D%0A%20%20%3Cpath%20fill%3D%22%23f2f2f2%22%20d%3D%22M0%2C18V10.79C0-8.83%2C14.16%2C4.3%2C14.16%2C4.3l1.36%2C1.26C28.94%2C18%2C47%2C18%2C47%2C18Z%22%20transform%3D%22translate%280%200%29%22%2F%3E%0D%0A%3C%2Fsvg%3E");
        background-size: 100% 100%;
        bottom: 100%;
        content: "";
        height: 1.125rem;
        left: 0;
        position: absolute;
        width: 2.9375rem;
      }
      &-title {
        color: $brand-primary;
        display: block;
        font-family: $font-family-secondary;
        font-size: .875rem;
        font-weight: bold;
        letter-spacing: .1em;
        margin-bottom: .5rem;
        text-transform: uppercase;
      }
      @include media-breakpoint-only(lg) {
        line-height: 1.375;
        padding-right: 1.375rem;
      }
      @include media-breakpoint-down(sm) {
        line-height: 1.375;
        padding-right: 1.375rem;
      }
    }
    &-name {
      letter-spacing: .1em;
      margin-bottom: 1.125rem;
      text-transform: uppercase;
      @include media-breakpoint-only(lg) {
        margin-bottom: .75rem;
      }
      @include media-breakpoint-down(sm) {
        margin-bottom: .75rem;
      }
    }
    &-position {
      font-size: .875rem;
      text-transform: uppercase;
    }
    a {
      color: $body-color;
      @include hover-focus {
        color: $link-color;
      }
    }
    @include media-breakpoint-only(lg) {
      font-size: .75rem;
    }
  }
}

.fce-teaser-event {
  display: flex;
  flex-direction: column;
  margin-bottom: 2rem;
  max-width: 100%;
  &-title {
    font-size: $font-size-h3;
    text-transform: uppercase;
    @include media-breakpoint-only(xl) {
      font-size: .875rem;
    }
    @include media-breakpoint-down(md) {
      font-size: 1rem;
    }
    @include media-breakpoint-down(sm) {
      font-size: .875rem;
    }
    @include media-breakpoint-down(xs) {
      font-size: .75rem;
    }
  }
  &-read-more {
    @include media-breakpoint-down(sm) {
      font-size: .6875rem;
      padding-bottom: .5rem;
      padding-top: .5rem;
    }
  }
}

.fce-teaser-homepage-hero {
  background: $white;
  display: flex;
  flex-direction: column;
  margin-bottom: 3.5rem;
  position: relative;
  width: 100%;
  &--big {
    .fce-teaser-homepage-hero {
      &-heading {
        font-size: 1.75rem;

        $selector: #{&};
        @at-root {
          .grid-element {
            #{$selector} {
              font-weight: normal;
            }
          }
        }
        @include media-breakpoint-down(sm) {
          font-size: 1.5rem;
        }
        @include media-breakpoint-down(sm) {
          font-size: 1rem;
        }
      }
      &-read-more {
        bottom: 0;
        position: absolute;
        right: 0;

        $selector: #{&};
        @at-root {
          .grid-element {
            #{$selector} {
              @include media-breakpoint-down(md) {
                display: block;
                position: relative;
              }
            }
          }
        }
        @include media-breakpoint-down(sm) {
          position: relative;
        }
      }
      &-text-container {
        font-size: .875rem;
        line-height: 1.5714285;
        padding: 2.125rem 0 0 4.5rem;

        $selector: #{&};
        @at-root {
          .grid-element {
            #{$selector} {
              margin-right: 2.5rem;
              padding: 2rem 0 0 3rem;
              @include media-breakpoint-down(md) {
                margin-right: 0;
                padding-left: 1.5rem;
                padding-top: 1rem;
              }
              @include media-breakpoint-down(sm) {
                padding-left: 0;
                padding-top: 1.5rem;
              }
            }
          }
        }
        @include media-breakpoint-down(sm) {
          padding: 1.5rem 0 0;
        }
        @include media-breakpoint-down(xs) {
          font-size: .75rem;
        }
      }
    }
    .theme-list {
      margin-bottom: 1.5rem;
      @include media-breakpoint-down(md) {
        margin-bottom: .5rem;
      }
    }
    .theme-marker {
      @include media-breakpoint-up(lg) {
        width: .9375rem;
      }
      @include media-breakpoint-only(md) {
        width: .625rem;
      }
      @include media-breakpoint-down(sm) {
        height: .625rem;
      }
    }
  }
  &--medium {
    .fce-teaser-homepage-hero {
      &-heading {
        @include media-breakpoint-down(md) {
          font-size: 1rem;
        }
        @include media-breakpoint-down(sm) {
          font-size: .875rem;
        }
      }
      &-text-container {
        font-size: .875rem;
        line-height: 1.5714285;
        padding: 1rem 0 0;
        @include media-breakpoint-down(xs) {
          font-size: .75rem;
        }
      }
    }
    .theme-list {
      margin-bottom: .75rem;
    }
  }
  &--small {
    .fce-teaser-homepage-hero {
      &-heading {
        font-size: $font-size-h3;
        @include media-breakpoint-down(md) {
          font-size: 1rem;
        }
        @include media-breakpoint-down(sm) {
          font-size: .875rem;
        }
      }
      &-read-more {
        margin-top: auto;
        @include media-breakpoint-down(sm) {
          font-size: .6875rem;
          padding-bottom: .5rem;
          padding-top: .5rem;
        }
      }
      &-text-container {
        font-size: $font-size-xs;
        line-height: 1.666667;
        padding: 1rem 0 0;
      }
    }
    .theme-list {
      margin-bottom: .75rem;
      @include media-breakpoint-down(sm) {
        margin-bottom: .5rem;
      }
    }
  }
  &--theme-hidden {
    &.fce-teaser-homepage-hero--big {
      .fce-teaser-homepage-hero-text-container {
        padding-left: 0;
      }
    }
  }
  &--with-bg {
    &.fce-teaser-homepage-hero--big {
      .fce-teaser-homepage-hero-text-container {
        padding-bottom: 2.5rem;
        padding-right: 2rem;
      }
    }
    &.fce-teaser-homepage-hero--medium {
      .fce-teaser-homepage-hero-text-container {
        padding: 1.375rem 1.375rem 0;
        @include media-breakpoint-down(sm) {
          padding-bottom: 1.375rem;
        }
      }
    }
    &.fce-teaser-homepage-hero--small {
      .fce-teaser-homepage-hero-text-container {
        padding: 1rem 1rem 0;
      }
    }
  }
  &-heading {
    text-transform: uppercase;
  }
  &-image {
    flex: 0 0 auto;
  }
  &-read-more {
    @include media-breakpoint-down(sm) {
      display: block;
    }
  }
  &-subheading {
    font-size: $font-size-h4;
    font-weight: normal;
    text-transform: uppercase;
    @include media-breakpoint-down(md) {
      font-size: .875rem;
    }
    @include media-breakpoint-down(sm) {
      font-size: .75rem;
    }
  }
  &-text-container {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    position: relative;
  }

  @include media-breakpoint-down(sm) {
    margin-bottom: 2rem;
  }
}

.fce-teaser-image-text {
  letter-spacing: .1em;
  margin-bottom: 2.5rem;
  .figure {
    margin-bottom: 1rem;
    @media (min-width: 1600px) {
      &--left {
        margin-right: 1.375rem;
        margin-left: -6.125rem;
      }
      &--right {
        margin-left: 1.375rem;
        margin-right: -6.125rem;
        margin-top: 1.25rem;
      }
      &--top {
        margin-top: -5.5rem;
      }
    }
  }
}

.fce-teaser-magazin-article {
  margin-bottom: 6rem;
  position: relative;
  &--small {
    .fce-teaser-magazin-article-title {
      font-size: 1.25rem;
      @include media-breakpoint-down(xl) {
        font-size: 1rem;
      }
    }
  }
  &-img {
    opacity: .5;
  }
  &-img-wrapper {
    background: $black;
    display: block;
    position: relative;
  }
  &-logo {
    pointer-events: none;
    position: absolute;
    right: .8125rem;
    text-align: right;
    top: .6875rem;
    @include media-breakpoint-down(lg) {
      img {
        height: 50%;
        width: 50%;
      }
    }
  }
  &-overlay {
    bottom: 3.5rem;
    color: $white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    left: 1.75rem;
    pointer-events: none;
    position: absolute;
    right: 6rem;
    top: 1rem;
    @include media-breakpoint-down(xl) {
      top: .5rem;
    }
    @include media-breakpoint-between(md,lg) {
      color: inherit;
    }
    @include media-breakpoint-down(lg) {
      bottom: 3rem;
      pointer-events: initial;
      position: static;
      top: 1rem;
    }
    @include media-breakpoint-only(sm) {
      pointer-events: none;
      position: absolute;
      right: 4rem;
    }
    @include media-breakpoint-down(xs) {
      color: inherit;
    }
  }
  &-read-more {
    bottom: 1rem;
    left: 1.75rem;
    position: absolute;
    @include media-breakpoint-down(lg) {
      bottom: 50%;
      left: 50%;
      transform: translate(-50%, 50%);
    }
    @include media-breakpoint-only(sm) {
      bottom: 1rem;
      left: 1.75rem;
      transform: none;
    }
  }
  &-subtitle {
    font-size: 1.0625rem;
    font-weight: normal;
    letter-spacing: .05em;
    margin: auto 0;
    text-transform: uppercase;
    @include media-breakpoint-down(xl) {
      font-size: .875rem;
    }
    @include media-breakpoint-down(lg) {
      margin-bottom: 1.5rem;
    }
    @include media-breakpoint-down(sm) {
      font-size: .75rem;
    }
    @include media-breakpoint-only(sm) {
      margin-bottom: auto;
    }
  }
  &-title {
    font-size: 1.875rem;
    line-height: 1.1;
    margin: 0 0 auto;
    text-transform: uppercase;
    @include media-breakpoint-down(xl) {
      font-size: 1.375rem;
    }
    @include media-breakpoint-down(lg) {
      margin-bottom: .75rem;
    }
    @include media-breakpoint-down(sm) {
      font-size: 1rem;
    }
    @include media-breakpoint-only(sm) {
      margin-bottom: auto;
    }
  }
  .article-meta-info {
    margin: auto 0 0;
  }
}

.fce-teaser-magazin-article-hero {
  margin-bottom: 3.5rem;
  position: relative;
  z-index: 0;
  @include media-breakpoint-down(xs) {
    margin-bottom: 2rem;
  }
  &-overlay {
    color: $white;
    left: 0;
    position: absolute;
    right: 0;
    text-align: center;
    top: 56.5%;
    transform: translateY(-50%);
    z-index: 3;
    @include media-breakpoint-down(xl) {
      top: 50%;
    }
    @include media-breakpoint-down(xs) {
      position: static;
      color: inherit;
      transform: none;
    }
  }
  &-subtitle {
    font-size: 1.625rem;
    font-weight: normal;
    letter-spacing: .05em;
    margin-bottom: 2rem;
    text-transform: uppercase;
    @include media-breakpoint-down(lg) {
      margin-bottom: 1rem;
    }
    @include media-breakpoint-down(sm) {
      font-size: 1.375rem;
    }
    @include media-breakpoint-down(xs) {
      font-size: .875rem;
    }
  }
  &-text {
    font-size: 1.0625rem;
    font-style: italic;
    letter-spacing: .1em;
    margin-bottom: 0;
    strong {
      font-weight: 800;
    }
    @include media-breakpoint-down(md) {
      font-size: .9375rem;
    }
    @include media-breakpoint-down(sm) {
      font-size: .675rem;
    }
  }
  &-title {
    font-size: 2.875rem;
    line-height: 1.26;
    margin-bottom: .5rem;
    text-transform: uppercase;
    @include media-breakpoint-down(md) {
      font-size: 2.25rem;
      margin-bottom: 0;
    }
    @include media-breakpoint-down(sm) {
      font-size: 1.875rem;
    }
    @include media-breakpoint-down(xs) {
      font-size: 1rem;
    }
  }
  .article-meta-info {
    font-size: .875rem;
    margin-bottom: 2.5rem;
    @include media-breakpoint-down(lg) {
      margin-bottom: 1.5rem;
    }
    @include media-breakpoint-down(sm) {
      font-size: .675rem;
      margin-bottom: 1rem;
    }
  }
  .figure {
    &:before {
      background: $black;
      bottom: 0;
      content: "";
      left: 0;
      opacity: .32;
      position: absolute;
      right: 0;
      top: 0;
      z-index: 2;
    }
  }
  .figure-caption {
    bottom: 1.125rem;
    color: $white;
    font-size: $font-size-xs;
    letter-spacing: .1em;
    position: absolute;
    right: 1.875rem;
    z-index: 3;
  }
}

.fce-teaser-project {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  margin-bottom: 2.875rem;
  min-height: 1px;
  &-container {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    min-height: 1px;
  }
  &-figure {
    margin-bottom: 1rem;
    position: relative;
    &:before {
      background: rgba($black, .5);
      bottom: 0;
      content: "";
      left: 0;
      position: absolute;
      right: 0;
      top: 0;
      transition: background .4s ease;
      z-index: 1;
    }
    &-link-wrapper {
      @include hover-focus {
        .fce-teaser-project-figure:before {
          background: rgba($black, .25);
        }
      }
    }
    @include media-breakpoint-down(lg) {
      margin-bottom: .5rem;
    }
  }
  &-suptitle {
    color: $white;
    @include media-breakpoint-down(lg) {
      color: inherit;
    }
  }
  &-title {
    bottom: 1.5rem;
    font-size: 1.5rem;
    left: 1rem;
    line-height: 1.3333;
    margin: 0;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    right: 1rem;
    text-overflow: ellipsis;
    text-transform: uppercase;
    z-index: 2;
    @include media-breakpoint-down(lg) {
      font-size: 1.125rem;
      margin-bottom: .5rem;
      position: static;
    }
  }
}

.fce-teaser-text-on-image {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border: 3px solid $white;
  margin-bottom: 6.5rem;
  padding: 6rem 3rem 5rem;
  position: relative;
  &:before {
    background: $brand-primary;
    bottom: 0;
    content: "";
    left: 0;
    opacity: .5;
    position: absolute;
    right: 0;
    top: 0;
    @include media-breakpoint-down(sm) {
      opacity: 1;
    }
  }
  &-box {
    background: $white;
    font-size: $font-size-sm;
    line-height: 1.692307;
    margin-top: -.5rem;
    padding: 2rem 1.875rem;
    & > *:last-child {
      margin-bottom: 0;
    }
    .btn {
      @extend .btn-sm;
    }
    @include media-breakpoint-down(sm) {
      margin-top: -.25rem;
      padding: 1.25rem;
    }
    @include media-breakpoint-down(xs) {
      font-size: .75rem;
    }
  }
  &-heading {
    color: $white;
    font-size: 3.4375rem;
    letter-spacing: .25em;
    line-height: 1;
    margin: 0;
    text-align: right;
    text-transform: uppercase;
    @include media-breakpoint-down(lg) {
      font-size: 2.75rem;
      letter-spacing: .125em;
    }
    @include media-breakpoint-down(md) {
      font-size: 2.25rem;
    }
    @include media-breakpoint-down(sm) {
      font-size: 1.625rem;
      text-align: center;
    }
  }
  @each $theme in map-keys($color-scheme) {
    &--theme-#{$theme} {
      &:before {
        background: map-get($color-scheme, $theme);
      }
    }
  }
  @include media-breakpoint-down(sm) {
    margin-bottom: 4rem;
    padding-bottom: 1.75rem;
    padding-top: 1.75rem;
  }
  @include media-breakpoint-down(xs) {
    border-left: 0;
    border-right: 0;
    margin-left: -($grid-gutter-width-base / 2);
    margin-right: -($grid-gutter-width-base / 2);
    padding: 1.75rem ($grid-gutter-width-base / 2);
  }
}

.fce-teaser-text-under-image {
  margin-bottom: 4rem;
  &-btn {
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
  }
  &-suptitle {
    font-size: .6875rem;
    letter-spacing: .1em;
    margin-bottom: .75rem;
    margin-top: -.5rem;
    text-transform: uppercase;
  }
  &-title {
    @include media-breakpoint-down(sm) {
      font-size: $font-size-h3;
    }
  }
  @include media-breakpoint-down(sm) {
    margin-bottom: 2.625rem;
  }
}

.fce-teaser-theme-highlights {
  margin-bottom: 4rem;
  &-heading {
    align-items: flex-end;
    display: flex;
    flex: 0 1 auto;
    height: $font-size-section-header * $headings-line-height;
    margin-bottom: 0;
    margin-top: $font-size-section-header * $headings-line-height;
    max-width: 80%;
    min-height: 1px;
    text-transform: uppercase;
    @include media-breakpoint-down(sm) {
      margin-top: 0;
    }
  }
  &-inner-wrapper {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    margin-top: -.5rem;
    min-height: 1px;
    > .row {
      margin-left: -.4375rem;
      margin-right: -.4375rem;
      > [class^="col-"],
      > [class*=" col-"] {
        padding-left: .4375rem;
        padding-right: .4375rem;
      }
    }
    @include media-breakpoint-down(sm) {
      margin-top: -.4375rem;
    }
  }
  &-item {
    border: 1px solid rgba($gray-darker, .5);
    box-shadow: 0 0 5px 1px rgba($brand-primary, 0);
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    margin-bottom: 1.25rem;
    min-height: 1px;
    position: relative;
    transition: box-shadow .4s;
    width: 100%;
    &:after,
    &:before {
      content: "";
      height: 0;
      opacity: 0;
      position: absolute;
      transition: opacity .4s;
      width: 0;
    }
    &:after {
      border-right: 2px solid transparent;
      border-top: 2px solid transparent;
      bottom: -1px;
      right: -1px;
    }
    &:before {
      border-left: 2px solid transparent;
      border-bottom: 2px solid transparent;
      left: -1px;
      top: -1px;
    }
    @include hover-focus {
      box-shadow: 0 0 5px 1px rgba($brand-primary, .75);
      &:after,
      &:before {
        height: calc(100% + 2px);
        opacity: 1;
        width: calc(100% + 2px);
      }
      &:after {
        border-right-color: $brand-primary;
        border-top-color: $brand-primary;
        transition: height .075s .15s, width .075s .225s;
      }
      &:before {
        border-bottom-color: $brand-primary;
        border-left-color: $brand-primary;
        transition: height .075s, width .075s .075s;
      }
    }
    &-date {
      font-size: $font-size-sm;
      font-weight: 300;
      line-height: 1.3;
      margin: 0;
    }
    &-picture {
      flex: 0 0 auto;
    }
    &-read-more {
      color: $body-color;
      display: inline-block;
      font-family: $font-family-secondary;
      font-size: $font-size-xs;
      font-weight: bold;
      letter-spacing: .1em;
      position: relative;
      text-transform: uppercase;
      transition: color .4s;
      vertical-align: top;
      &:before {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: .375rem 0 .375rem .5rem;
        border-color: transparent transparent transparent currentColor;
        content: "";
        font-size: 0;
        left: -1rem;
        position: absolute;
        top: .125rem;
      }
    }
    &-text {
      font-family: $font-family-secondary;
      font-size: $font-size-xs;
      letter-spacing: .05em;
      line-height: 1.5;
      margin: 0;
      text-transform: uppercase;
    }
    &-text-container {
      display: flex;
      flex: 1 1 auto;
      flex-direction: column;
      padding: 1rem .75rem .5rem;
    }

    $selector: #{&};
    @each $theme in map-keys($color-scheme) {
      &--theme-#{$theme} {
        @include hover-focus {
          box-shadow: 0 0 5px 1px rgba(map-get($color-scheme, $theme), .75);
          &:after {
            border-right-color: map-get($color-scheme, $theme);
            border-top-color: map-get($color-scheme, $theme);
          }
          &:before {
            border-bottom-color: map-get($color-scheme, $theme);
            border-left-color: map-get($color-scheme, $theme);
          }
          #{$selector}-read-more {
            color: map-get($color-scheme, $theme);
          }
        }
      }
    }
  }
  &-read-more {
    color: $body-color;
    display: flex;
    flex: 0 1 auto;
    flex-wrap: wrap;
    font-family: $font-family-secondary;
    font-size: $font-size-sm;
    font-weight: bold;
    justify-content: flex-end;
    letter-spacing: .1em;
    min-height: 1px;
    position: relative;
    text-transform: uppercase;
    &:after {
      background: $body-color;
      bottom: 0;
      content: "";
      display: block;
      position: absolute;
      left: 101%;
      right: -1%;
      top: 0;
      transition: width .4s, left 0s .4s;
      width: 0;
      z-index: -1;
      @include media-breakpoint-down(sm) {
        display: none;
      }
    }
    &:before {
      bottom: .25rem;
      content: "";
      display: block;
      height: .625rem;
      left: 0;
      position: absolute;
      transition: height .4s;
      width: 100%;
      z-index: -1;
      @include media-breakpoint-down(sm) {
        content: none;
      }
    }
    @include hover-focus {
      &:after {
        left: 0;
        transition: width .4s, left .4s;
        width: 101%;
      }
      .fce-teaser-theme-highlights-read-more-label,
      .fce-teaser-theme-highlights-read-more-title {
        color: $white;
        transition: color .1s;
      }
    }
    &-label {
      @include media-breakpoint-up(md) {
        padding-left: 1.125rem;
      }
    }
    &-label,
    &-title {
      position: relative;
      transition: color 0s, background .3s;
      white-space: nowrap;
      @include media-breakpoint-up(md) {
        &:after {
          background: $white;
          bottom: 0;
          content: "";
          left: 0;
          position: absolute;
          right: 0;
          top: 0;
          z-index: -1;
        }
      }
    }
    &-title {
      @include media-breakpoint-up(md) {
        padding-left: .75em;
      }
    }
    @each $theme in map-keys($color-scheme) {
      &--theme-#{$theme} {
        &:after {
          background: map-get($color-scheme, $theme);
        }
        @include media-breakpoint-up(md) {
          &:before {
            background-color: map-get($color-scheme, $theme);
          }
          @include hover-focus {
            color: map-get($color-scheme, $theme);
          }
          .fce-teaser-theme-highlights-read-more-title {
            color: map-get($color-scheme, $theme);
          }
        }
        @include media-breakpoint-down(sm) {
          background: map-get($color-scheme, $theme);
          @include hover-focus {
            background: darken(map-get($color-scheme, $theme), 10%);
          }
        }
      }
    }
    @include media-breakpoint-down(sm) {
      color: $white;
      font-size: $font-size-xs;
      justify-content: center;
      padding: 1rem 1.5rem;
      transition: background .2s;
      @include hover-focus-active {
        color: $white;
      }
    }
  }
  .section-header {
    @include media-breakpoint-down(sm) {
      margin-left: .75rem;
    }
  }
  @include media-breakpoint-up(lg) {
    .col-left > & {
      margin-right: 1.75rem;
    }
    .col-right > & {
      margin-left: 1.75rem;
    }
  }

}

.fce-text {
  letter-spacing: .1em;
  margin-bottom: 3rem;
}

.fce-video {
  margin-bottom: 3rem;
}

.grid-60x40 {
  &--with-bg {
    margin-bottom: 4rem;
    padding: 3.25rem 0 2rem;
    &.bg-gray-lightest {
      background: lighten($gray-lightest, 2%);
    }
  }
}

.grid-accordion {
  margin-bottom: 2.1875rem;
  position: relative;
  &-content {
    padding: 1rem (2rem - ($grid-gutter-width-base / 2));
    .fce-text {
      letter-spacing: 0;
    }
    @include media-breakpoint-down(lg) {
      padding-left: 1rem - ($grid-gutter-width-base / 2);
      padding-right: 1rem - ($grid-gutter-width-base / 2);
    }
  }
  &-count {
    color: $gray-dark;
    display: block;
    font-family: $font-family-secondary;
    font-size: 1.25rem;
    line-height: .75;
    &-label {
      color: $gray-dark;
      font-family: $font-family-secondary;
      font-size: .6875rem;
      letter-spacing: .1em;
      text-transform: uppercase;
    }
  }
  &-heading {
    display: flex;
    min-height: 10.25rem;
    &-text-wrapper {
      flex: 1 1 auto;
      min-height: inherit;
      padding: 1rem 1rem 2rem;
      @include media-breakpoint-up(xl) {
        padding-bottom: 1rem;
        padding-left: 2rem;
      }
    }
    &-title {
      font-size: $font-size-h2;
      margin-bottom: 0;
      text-transform: uppercase;
      @include media-breakpoint-down(sm) {
        font-size: 1.125rem;
      }
      @include media-breakpoint-down(xs) {
        font-size: .875rem;
        margin-bottom: .5rem;
      }
    }
    @include media-breakpoint-down(xs) {
      flex-direction: column;
      min-height: 0;
    }
  }
  &-img-wrapper {
    flex: 0 0 auto;
    height: 164px;
    overflow: hidden;
    position: relative;
    width: 158px;
    @include media-breakpoint-up(sm) {
      height: 164px !important;
    }
    @include media-breakpoint-down(xs) {
      width: 100% !important;
    }
  }
  &-img {
    height: 100%;
    width: 100%;
    @include media-breakpoint-down(xs) {
      height: auto;
      left: 0;
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  &-read-more {
    bottom: 1rem;
    font-family: $font-family-secondary;
    font-size: $font-size-xs;
    letter-spacing: .1em;
    position: absolute;
    right: 1.5rem + $grid-gutter-width-base / 2;
    text-transform: uppercase;
    z-index: 1;
    @include media-breakpoint-down(lg) {
      bottom: .5rem;
    }
  }
}

.grid-accordion-simple {
  margin-bottom: 4.5rem;
  &-heading {
    color: $brand-primary;
    font-weight: normal;
    margin-bottom: 3.5rem;
    text-transform: uppercase;
  }
  &-item {
    background: #f5f5f5;
    border-left: .5rem solid #999;
    margin-bottom: 1.25rem;
    &--even {
      background: $white;
      border-left-color: #ccc;
    }
    &-content {
      padding: 1rem (1.75rem - $grid-gutter-width-base / 2) .125rem (2.5rem - $grid-gutter-width-base / 2);
      a:not(.btn) {
        color: inherit;
        font-weight: bold;
        @include hover-focus {
          color: $link-color;
        }
      }
      @include media-breakpoint-down(xs) {
        padding-left: 0;
        padding-right: 0;
      }
    }
    &-heading {
      color: $body-color;
      display: block;
      padding: 1rem 1.75rem 1rem 2.5rem;
      @include media-breakpoint-down(sm) {
        padding-bottom: 1.5rem;
        padding-left: .75rem;
        padding-right: .5rem;
      }
      &:hover {
        color: $link-color;
      }
      &-title {
        font-size: $font-size-h2;
        margin: 0;
        text-transform: uppercase;
        @include media-breakpoint-down(sm) {
          font-size: 1.125rem;
        }
        @include media-breakpoint-down(xs) {
          font-size: .875rem;
          margin-bottom: .5rem;
        }
      }
    }
    &-read-more {
      color: $link-color;
      font-family: $font-family-secondary;
      font-size: $font-size-xs;
      letter-spacing: .1em;
      position: absolute;
      right: $grid-gutter-width-base / 2;
      text-transform: uppercase;
      top: 50%;
      transform: translateY(-50%);
      .icon {
        font-size: 1rem;
        @include media-breakpoint-down(sm) {
          font-size: .875rem;
        }
      }
      @include media-breakpoint-down(sm) {
        font-size: .6875rem;
      }
      @include media-breakpoint-down(xs) {
        top: 0;
        transform: translateY(0);
      }
    }
  }
}

.grid-theme-highlights {
  margin-bottom: 2.5625rem;
  &.bg {
    @each $theme in map-keys($color-scheme) {
      &-theme-#{$theme} {
        .grid-theme-highlights-header {
          &:before {
            background: map-get($color-scheme, $theme);
          }
        }
        .grid-theme-highlights-body {
          background: lighten(map-get($color-scheme, $theme), 13.5%); /* Old browsers */
          &-section {
            &-title {
              color: mix(map-get($color-scheme, $theme), $white, 15%);
            }
          }
        }
      }
    }
  }
  &-body {
    overflow: hidden;
    padding-bottom: 5rem;
    padding-top: 6.625rem;
    &-section {
      position: relative;
      &-title {
        color: mix($body-color, $white, 15%);
        font-size: 7.25rem;
        left: -1.875rem;
        letter-spacing: .13em;
        line-height: 1;
        margin: -6rem 0 0;
        opacity: .1;
        position: absolute;
        text-transform: uppercase;
        top: 50%;
        transform: translateX(-50%) rotate(-90deg);
        white-space: nowrap;
      }
    }
  }
  &-footer,
  &-header {
    &-button {
      background: transparent;
      border: none;
      color: $body-color;
      height: 55px;
      margin-bottom: 3.75rem;
      margin-left: 1rem;
      margin-right: 1rem;
      padding: 27px .5rem;
      position: relative;
      text-align: center;
      width: 200px;
      .btn-label {
        display: block;
        font-weight: bold;
        letter-spacing: .1em;
        margin: auto;
        position: relative;
        text-transform: uppercase;
        transform: translateY(-50%);
        white-space: normal;
        z-index: 2;
      }
      .btn-part {
        display: block;
        height: 100%;
        position: absolute;
        top: 0;
        &.btn-part-left {
          pointer-events: none;
          right: 100%;
          width: 2px;
          .btn-path-stroke {
            stroke-width: 4px;
          }
        }
        &.btn-part-middle {
          height: 83px;
          left: 50%;
          margin-left: -21px;
          width: 42px;
          .btn-part-middle-arrow-stroke {
            stroke: rgba($body-color, .25);
          }
        }
        &.btn-part-middle-left,
        &.btn-part-middle-right {
          width: calc(50% - 21px);
        }
        &.btn-part-middle-left {
          left: 0;
        }
        &.btn-part-middle-right {
          right: 0;
        }
        &.btn-part-right {
          left: 100%;
          pointer-events: none;
          width: 2px;
          .btn-path-stroke {
            stroke-width: 4px;
          }
        }
        .btn-background {
          fill: rgba($body-color, .25);
          transition: all .4s;
        }
        .btn-path-stroke {
          stroke: transparent;
          stroke-width: 2px;
          transition: all .4s;
          &:not(.btn-background) {
            fill: none;
          }
        }
      }
      @include hover-focus-active {
        color: $body-color;
        .btn-part {
          .btn-background {
            fill: rgba($body-color, 0);
          }
          .btn-path-stroke {
            stroke: $body-color;
          }
        }
      }
    }
  }
  &-footer {
    padding: 2rem 0 0;
    text-align: center;
    &-button {
      .btn-part {
        transform: rotate(180deg);
        &.btn-part-middle {
          top: -28px;
        }
      }
    }
  }
  &-header {
    align-items: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: $white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 660px;
    padding: 1rem 0;
    position: relative;
    &:before {
      background: $body-color;
      bottom: 0;
      content: "";
      left: 0;
      opacity: .5;
      position: absolute;
      right: 0;
      top: 0;
      z-index: 0;
    }
    &-button {
      color: $white;
      .btn-part {
        &.btn-part-middle {
          .btn-part-middle-arrow-stroke {
            stroke: rgba($white, .25);
          }
        }
        .btn-background {
          fill: rgba($white, .25);
        }
      }
      @include hover-focus-active {
        color: $white;
        .btn-part {
          .btn-background {
            fill: rgba($white, 0);
          }
          .btn-path-stroke {
            stroke: $white;
          }
        }
      }
    }
    &-icon {
      border: 1px solid $white;
      border-radius: 50%;
      font-size: 2.375rem;
      height: 5rem;
      margin: 0 auto 2.75rem;
      position: relative;
      width: 5rem;
      .icon {
        left: 50%;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    }
    &-heading {
      letter-spacing: .13em;
      text-transform: uppercase;
      @include media-breakpoint-up(sm) {
        font-size: 3.125rem;
      }
    }
    &-text {
      font-size: 1rem;
      letter-spacing: .01em;
      margin-bottom: 4.5rem;
    }
    &-text-container {
      position: relative;
      z-index: 1;
    }
    @include media-breakpoint-down(md) {
      min-height: 550px;
    }
  }
  .btn-default {
    @include button-variant($white, $white, $white, $body-color, $body-color);
  }
  .btn-outline-default {
    @include button-outline-variant($white);
    @include hover-focus-active {
      color: $body-color;
    }
  }
  .bg-gray-lighter {
    .btn-default {
      @include button-variant($white, $gray-darker, $gray-darker, lighten($gray-darker, 10%), lighten($gray-darker, 10%));
    }
    .btn-outline-default {
      @include button-outline-variant($gray-darker);
    }
  }
  .fce-teaser-event {
    color: $white;
  }
  .fce-teaser-homepage-hero {
    &.fce-teaser-homepage-hero--big {
      .fce-teaser-homepage-hero-text-container {
        padding-left: 1.625rem;
      }
    }
  }
  .fce-teaser-magazin-article {
    &-overlay {
      color: $white;
    }
  }
  .fce-teaser-text-on-image {
    &-box {
      .btn-default {
        @include button-variant($white, $gray-darker, $gray-darker, lighten($gray-darker, 20%), lighten($gray-darker, 20%));
      }
      .btn-outline-default {
        @include button-outline-variant($gray-darker);
      }
    }
  }
}

.fce-playbill-desc {
  margin-bottom: 3.125rem;

  .hidden {
    display: none;
  }

  &-primary {
    margin: 0 auto 1rem;
  }

  &-secondary {
    margin: 0 auto 1rem;
    display: none;
  }

  &-btn {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
    display: flex;
    align-items: center;

    .icon-playbill-show-more {
      font-size: 2.5rem;
      margin-left: -0.438rem;
    }

    .icon-playbill-show-less {
      font-size: 1.75rem;
    }

    &-text {
      margin-left: .375rem;
    }
  }

  &-info {
    font-style: italic;
    margin-bottom: 1rem;

    p {
      margin-bottom: 0;
    }
  }

  &-list {
    margin: 0 auto;
  }
}

.fce-playbill-gallery {
  &-image {
    width: 100%;
    height: 230px;
    object-fit: cover;

    @include media-breakpoint-up(lg) {
      height: 550px;
    }
  }

  &-image--full {
    width: 100% !important;
  }

  &-slider .swiper-pagination-bullet-active, &-slider .swiper-pagination-bullet:hover {
    background-color: $black !important;
    border-color: $black !important;
  }
}

.fce-playbill-trailer {
  margin-bottom: 3.125rem;
}

.fce-playbill-credits {
  margin-bottom: 3.125rem;

  &-item {
    line-height: 1.313rem;
    margin-bottom: 1.313rem;
  }
}

.fce-playbill-biografie {
  margin-bottom: 3.125rem;

  &-text {
    margin-bottom: 1.365rem;
  }
}

.fce-playbill-logos {
  margin-bottom: 3.125rem;

  &-image {
    vertical-align: top;

    &:not(:last-child) {
      margin-bottom: 2.5rem;
    }

    @include media-breakpoint-down(sm) {
      &:nth-child(2n+1) {
        margin-right: 2.5rem;
      }
    }

    @include media-breakpoint-up(sm) {
      margin-right: 2.5rem;
    }
  }
}