/* =========================================================
   v2.8.42 — Waitlist image fills the lower part of the card
   Scope: Services/Leistungen waitlist copy card only.

   Keeps the text area white and unchanged.
   The image behaves like a lower visual panel and fills the
   empty space in the left waitlist card instead of floating
   as a small image block.
   ========================================================= */

#service-waitlist .waitlist-copy-card {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* Keep all text/content before the image visually unchanged on white. */
#service-waitlist .waitlist-copy-card > :not(.hs-waitlist-fiber-image):not(.waitlist-fiber-image) {
  position: relative;
  z-index: 1;
}

/* Fill the empty lower part of the card with the image. */
#service-waitlist .hs-waitlist-fiber-image,
#service-waitlist .waitlist-fiber-image {
  display: block !important;
  flex: 1 1 auto !important;
  width: calc(100% + clamp(60px, 6vw, 108px)) !important;
  max-width: none !important;
  min-height: clamp(300px, 32vw, 520px) !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;

  /* Pull image to the card edges below the text. */
  margin-left: calc(-1 * clamp(30px, 3vw, 54px)) !important;
  margin-right: calc(-1 * clamp(30px, 3vw, 54px)) !important;
  margin-bottom: calc(-1 * clamp(30px, 3vw, 54px)) !important;
  margin-top: clamp(34px, 4vw, 56px) !important;

  border-radius: 0 !important;
  box-shadow: none !important;
}

/* If the waitlist card is not forced to the form height by the grid,
   still avoid the old tiny-picture look. */
#service-waitlist .waitlist-copy-card:has(.hs-waitlist-fiber-image),
#service-waitlist .waitlist-copy-card:has(.waitlist-fiber-image) {
  min-height: 100% !important;
}

@media (max-width: 920px) {
  #service-waitlist .hs-waitlist-fiber-image,
  #service-waitlist .waitlist-fiber-image {
    width: calc(100% + 52px) !important;
    min-height: 260px !important;
    margin-left: -26px !important;
    margin-right: -26px !important;
    margin-bottom: -26px !important;
    margin-top: 30px !important;
  }
}

@media (max-width: 560px) {
  #service-waitlist .hs-waitlist-fiber-image,
  #service-waitlist .waitlist-fiber-image {
    min-height: 220px !important;
  }
}