/* Block „RF Kontaktformular“ – template-parts/blocks/rf-contact.php */

.rf-contact {
  /* Bezug für 100cqw: volle Breite ohne Scrollleiste */
  container-type: inline-size;
  display: grid;
  grid-template-columns: 56% 44%;
}
.rf-contact--form {
  background-color: var(--royal);
  padding: 80px 0 90px;
  z-index: 10;
}
/* linker Abstand fluchtet mit dem Seiten-Container */
.rf-contact--inner {
  max-width: 760px;
  padding: 0 60px 0 calc(max((100cqw - 1500px) / 2, 0px) + 50px);
}
.rf-contact .rf-heading {
  font-size: 48px;
  font-weight: 700;
  color: var(--white);
}
.rf-contact p {
  color: var(--white);
}
.rf-contact--graphic {
  position: relative;
  margin-top: 100px;
  background-color: var(--cyan);
  z-index: 9;
}
/* hochgeladene Grafik füllt die Fläche */
.rf-contact--graphic img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
/* Standardgrafik: 727 von 807 Einheiten sind Fläche, der Rest (Mund) ragt in den Footer.
   Die Höhe sorgt dafür, dass die Fläche immer genau am Footer endet:
   hohe Spalte: Spaltenhöhe × 807/727, breite Spalte: Spaltenhöhe + 80/765 der Spaltenbreite (44cqw) */
.rf-contact--graphic .rf-contact--face {
  height: max(100% * 807 / 727, 100% + 4.6cqw);
  -o-object-position: center bottom;
     object-position: center bottom;
}
/* Schmaler: Fläche behält das Seitenverhältnis der Grafik und sitzt unten, damit das Gesicht vollständig bleibt */
@media (max-width: 1399px) {
  .rf-contact--graphic {
    align-self: end;
    margin-top: 0;
    aspect-ratio: 765 / 727;
  }
}
@media (max-width: 991px) {
  .rf-contact {
    grid-template-columns: minmax(0, 1fr);
  }
  .rf-contact--inner {
    max-width: none;
    padding: 0 25px;
  }
  .rf-contact--graphic {
    display: none;
  }
}
@media (max-width: 575px) {
  .rf-contact .rf-heading {
    font-size: 34px;
  }
}

/* Unter dem Einspalter steht die Grafik unter dem Formular */
@media (max-width: 991px) {
  .rf-contact--graphic {
    display: block;
    -ms-flex-item-align: auto;
        align-self: auto;
    margin-top: 0;
    aspect-ratio: 765 / 727;
  }
}
@media (max-width: 767px) {
  .rf-contact--form {
    padding: 50px 0 60px;
  }
  .rf-contact--inner {
    padding: 0 25px;
  }
  .rf-contact .rf-form-row > p {
    gap: 20px;
  }
}