/* Block „RF Teaser mit Bild“ – template-parts/blocks/rf-teaser.php */

.rf-teaser {
  padding: 140px 0;
  margin-bottom: 100px;
  background-color: var(--royal);
  background-image: url(../../images/rf-waves.svg);
  background-repeat: no-repeat;
  background-position: right -2.8vw top -2.8vw;
  background-size: 52.5vw auto;
}
.rf-teaser::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -100px;
  width: 42%;
  height: 100px;
  background-color: var(--green);
}
.rf-teaser--inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 60px;
}
.rf-teaser--text {
  max-width: 580px;
}
.rf-teaser--text .rf-heading,
.rf-teaser--text p {
  color: var(--white);
}
.rf-teaser--text p {
  margin-bottom: 30px;
}
.rf-teaser--image {
  justify-self: center;
  width: 100%;
  max-width: 470px;
}
.rf-teaser--image img {
  width: 100%;
  aspect-ratio: 470 / 620;
  -o-object-fit: cover;
     object-fit: cover;
}
@media (max-width: 991px) {
  .rf-teaser {
    padding: 80px 0;
    margin-bottom: 60px;
  }
  .rf-teaser::after {
    height: 60px;
    bottom: -60px;
  }
  .rf-teaser--inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Smartphone: Bild über dem Text */
@media (max-width: 767px) {
  .rf-teaser {
    padding: 50px 0 60px;
    margin-bottom: 14vw;
    background-position: 30% 0;
    background-size: 125% auto;
  }
  .rf-teaser::after {
    width: 48%;
    height: 14vw;
    bottom: -14vw;
  }
  .rf-teaser--inner {
    gap: 30px;
  }
  .rf-teaser--image {
    -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
            order: -1;
    max-width: none;
  }
  .rf-teaser--image img {
    aspect-ratio: 324 / 304;
  }
}