/* BildMitTextBeiMouseover */
.textimage.-hover {
  height: 100%;

  & > a {
    height: 100%;
    width: 100%;
    grid-template-rows: 1fr max-content;
    display: grid
  }

  & .textimage__hovericon.font__fas {
    font-size: 55px;
    color: rgb(var(--c-neutral-darker));
  }

  & .textimage__hovericon {
    height: 55px;
    line-height: 55px;
    margin: 0 auto 20px auto;

    & > img {
      max-height: 55px;
    }
  }

  & .textimage__container {
    position: relative;
  }

  & .textimage__container > img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    max-width: inherit;
  }

  & .textimage__hover {
    width: 100%;
    height: 100%;
    color: rgb(var(--c-neutral-dark));
    background-color: rgba(var(--c-neutral-lightest), .8);
    text-align: center;
    padding: 5em 2.5em;
    position: relative;
    display: block;
    opacity: 0;
    transition: opacity ease 0.3s;
  }

  & .textimage__hoverbodytext {
    font-style: italic;
  }
}

@media (hover: hover) {
  .textimage.-hover:hover {
    & .textimage__hover {
      opacity: 1;
    }
  }
}

/* BildMitTextDarunter */
.grid__col.-w100 > .frame-type-dce_dceuid3 {
  height: auto;
}

.textimage.-imageabove {
  height: 100%;

  & .textimage__image {
    grid-column: 1;
  }

  & .textimage__image img {
    transition: transform ease 0.3s;
  }

  & > a {
    color: rgb(var(--c-neutral-dark));
    height: 100%;
    display: grid;
    grid-template-rows: max-content 1fr max-content;
  }

  & .textimage__textwrap {
    padding: 1.5em 1em 1.2em 1em;

    & h3 {
      font-family: var(--f-family-2);
    }
  }

}

.textimage__link {
  border-bottom: 2px solid rgb(var(--c-neutral-dark));
  position: relative;
  padding: 0 1em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;

  & .textimage__linktext {
    font-size: var(--f-size-l-1);
    font-family: var(--f-family-3);
    font-weight: var(--f-weight-t);
    color: rgb(var(--c-neutral-dark));
    text-transform: uppercase;
  }

  & .arrow {
    font-size: var(--f-size-s-1);
  }

  &::before {
    content: "\f061";
    color: rgb(var(--c-primary));
    transform: translateY(-120%);
  }

  &::after {
    content: "\f061";
    color: rgb(var(--c-neutral-dark));
    transform: translateY(0);
  }

  &::before,
  &::after {
    position: absolute;
    right: 0;
    font-family: "FaLight", sans-serif;
    font-size: var(--f-size-s-2);
    transition: transform 0.3s ease;
  }
}

@media (hover: hover) {
  .textimage.-imageabove:hover {
    & .textimage__image img {
      transform: scale(1.2);
    }
  }

  .textimage:hover {
    & .textimage__link::after {
      transform: translateY(120%);
    }
    & .textimage__link::before {
      transform: translateY(0);
    }
  }

  .textimage:hover .textimage__link > div {
    color: rgb(var(--c-primary));
  }
}

.frame-type-dce_dceuid4,
.frame-type-dce_dceuid3 {
  height: 100%;
}

.grid__col.-w100 > .frame-type-dce_dceuid4 {
  height: auto;

  & .textimage__container {
    min-height: 20vw;
  }
}

/* Highlightbox */
.highlightbox {
  background: rgb(var(--c-neutral-lighter));
  padding: 1.5em;
  text-align: center;
}

.highlightbox__container {
  padding: 3em 1.5em;
  border: 2px solid rgb(var(--c-neutral-lightest));
}

.frame-bg-grey {
  & .highlightbox {
    background: rgb(var(--c-neutral-lightest));
  }

  & .highlightbox__container {
    border: 2px solid rgb(var(--c-neutral-lighter));
  }
}

.highlightbox__div {
  width: 45px;
  height: 2px;
  background: rgb(var(--c-neutral-dark));
  margin: 1.1em auto 1.4em auto;
}

.highlightbox__owl {
  width: 55px;
  height: 55px;
  background: url(../../Images/logo.svg) no-repeat 0 -16px;
  background-size: 55px 84px;
  margin: 0 auto 20px auto;
}

/* Opening */
.content .opening__subtitle {
  text-transform: uppercase;
}

.opening__logo img {
  width: 60px;
  margin-bottom: 1rem;
}

.opening .headline::after {
  content: '';
  display: block;
  width: 60px;
  height: 2px;
  background: rgb(var(--c-neutral-darker));
  margin: 1rem auto 0 auto;
}

.content .opening__text {
  font-style: italic;
  font-size: var(--f-size-l-1);
  max-width: 1000px;
  margin: 0 auto;

  & a {
    font-style: italic;
  }
}