.Teaser {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow: hidden;
  width: 100%;
  text-decoration: none;
  color: var(--text-color);
}

.Teaser:hover {
    color: var(--text-color);
  }

.Teaser:hover .link-more {
      color: var(--clr-primary);
    }

.Teaser:hover .link-more::after {
        background-image: url('../Images/default/arrow-right_cyan.svg');
      }

.Teaser .Headline {
    font-size: 1.5rem;
    color: var(--clr-secondary);
  }

@media screen and (min-width: 1367px) {

.Teaser .Headline {
      font-size: 2rem;
  }
    }

.Teaser .link-more {
    display: flex;
    align-items: center;
    word-break: break-all;
    transition: color 0.3s ease-in-out;
  }

.Teaser .link-more::after {
      content: '';
      display: inline-block;
      width: 17px;
      min-width: 17px;
      height: 15px;
      margin-left: 10px;
      background-image: url('../Images/default/arrow-right.svg');
      background-repeat: no-repeat;
      background-size: contain;
      transition: background-image 0.3s ease-in-out;
    }

@media screen and (min-width: 1026px) {
  .Teaser.Teaser-width--33 {
    flex-basis: calc(33.33% - var(--teaser-subtract-width));
  }

  .Teaser.Teaser-width--50 {
    flex-basis: calc(50% - var(--teaser-subtract-width));
  }
}

@media screen and (min-width: 1026px) {
    .neos-backend .TeaserList > div[\:has\(.Teaser--width-33\)] {
      width: calc(33.33% - var(--teaser-subtract-width));
    }
    .neos-backend .TeaserList > div:has(.Teaser--width-33) {
      width: calc(33.33% - var(--teaser-subtract-width));
    }

    .neos-backend .TeaserList > div[\:has\(.Teaser--width-50\)] {
      width: calc(50% - var(--teaser-subtract-width));
    }

    .neos-backend .TeaserList > div:has(.Teaser--width-50) {
      width: calc(50% - var(--teaser-subtract-width));
    }
  }

.Teaser-picture {
  position: relative;
}

.Teaser-content {
  width: 100%;
  padding: 10px 20px 30px;
}

.Teaser-content strong {
    font-weight: 700;
  }

.Teaser-picture {
  width: 100%;
  border-radius: 5px;
}

@media screen and (min-width: 1026px) {

.Teaser-picture {
    max-height: 400px;
    aspect-ratio: 400 / 270;
}

    .Teaser-picture img {
      height: 400px;
      aspect-ratio: 400 / 270;
    }
  }