/* Rehasport Zentrum Suhl | Medizinisches Gerätetraining – Bildupdate 02.11.2026
   Ausschließlich für medizinisches-training-uebersicht.html.
   Die drei Teaserkarten zeigen 4:3-Fotos ohne unnötiges Abschneiden. */

/* Das neue Hero-Foto ist links bereits weich freigestellt; keine doppelte,
   starke Aufhellung über die wichtigen Trainingsgeräte legen. */
.reha-unified .reha-overview-hero--medizinisches-training .reha-overview-visual img {
  object-fit: cover;
  object-position: var(--overview-position, 50% 48%);
  filter: none;
}
.reha-unified .reha-overview-hero--medizinisches-training .reha-overview-wash {
  background: linear-gradient(90deg,
    #F5F7F3 0%,
    rgba(245,247,243,.88) 14%,
    rgba(245,247,243,.42) 28%,
    rgba(245,247,243,0) 48%);
}

/* Nur diese drei Karten: originalgetreues 4:3-Format statt der
   alten, sehr flachen und gedeckelten Bildhöhe. */
.reha-unified .reha-overview-page--medizinisches-training .reha-overview-course-image {
  position: relative;
  width: 100%;
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  flex: 0 0 auto;
  overflow: visible;
}
.reha-unified .reha-overview-page--medizinisches-training .reha-overview-course-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  object-position: center center;
}
/* Das Betreuungsfoto zeigt Teilnehmerin und Trainer im Zentrum;
   vorherige Sonderregel (50% 10%) wird bewusst überschrieben. */
.reha-unified .reha-overview-page--medizinisches-training .reha-overview-course-card:nth-child(3) .reha-overview-course-image img {
  object-position: 50% 50%;
}

@media (max-width: 899.98px) {
  .reha-unified .reha-overview-hero--medizinisches-training .reha-overview-visual img {
    object-position: var(--overview-position-mobile, 70% 50%);
  }
  /* Auf Mobilgeräten steht das Hero-Bild vor dem Text. */
  .reha-unified .reha-overview-hero--medizinisches-training .reha-overview-wash {
    display: none;
  }
}

/* Tablet: die dritte der drei Karten mittig anordnen statt links
   eine unausgeglichene zweite Zeile zu erzeugen. */
@media (min-width: 700px) and (max-width: 1099.98px) {
  .reha-unified .reha-overview-page--medizinisches-training .reha-overview-course-card:nth-child(3) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - 24px) / 2);
  }
}