/* Block „RF Text mit Bild“ – template-parts/blocks/rf-text-image.php */

.rf-text-image--inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
  gap: 40px 110px;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
}
.rf-text-image--left .rf-text-image--inner {
  grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
}
.rf-text-image--left .rf-text-image--image {
  -webkit-box-ordinal-group: 0;
      -ms-flex-order: -1;
          order: -1;
}
.rf-text-image .rf-heading {
  font-size: 48px;
  margin-bottom: 30px;
}
.rf-text-image--text p {
  margin-bottom: 25px;
}
.rf-text-image--text a:not(.btn) {
  color: inherit;
  text-decoration: underline;
}
.rf-text-image--text .btn {
  margin-top: 30px;
}
.rf-text-image--image {
  margin: 0;
}
.rf-text-image--image img {
  display: block;
  width: 100%;
  aspect-ratio: 480 / 578;
  -o-object-fit: cover;
     object-fit: cover;
}
.rf-text-image--image figcaption {
  margin-top: 14px;
  font-size: 14px;
  color: var(--navy);
}
@media (max-width: 1199px) {
  .rf-text-image--inner,
  .rf-text-image--left .rf-text-image--inner {
    gap: 40px 50px;
  }
  .rf-text-image .rf-heading {
    font-size: 38px;
  }
}
@media (max-width: 767px) {
  .rf-text-image--inner,
  .rf-text-image--left .rf-text-image--inner {
    grid-template-columns: minmax(0, 1fr);
  }
  .rf-text-image .rf-heading {
    font-size: 30px;
  }
}

/* Tablet: schmaleres Bild, damit lange Wörter in die Textspalte passen */
@media (min-width: 768px) and (max-width: 991px) {
  .rf-text-image--inner {
    grid-template-columns: minmax(0, 1fr) 36%;
  }
  .rf-text-image--left .rf-text-image--inner {
    grid-template-columns: 36% minmax(0, 1fr);
  }
  .rf-text-image .rf-heading {
    font-size: 32px;
  }
}

/* Smartphone: Bild immer über dem Text */
@media (max-width: 767px) {
  .rf-text-image--image {
    -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
            order: -1;
  }
  .rf-text-image--image img {
    aspect-ratio: 324 / 304;
  }
  .rf-text-image--inner,
  .rf-text-image--left .rf-text-image--inner {
    gap: 25px;
  }
}