/* Sun Clean – Mobile/Layout Fixes: Bilder nicht über Text, mobile Stack */

/* Content-Bilder: immer im normalen Flow, nie absolut über Text */
.content_image-wrap,
.vorteile_card-image-wrap,
.ansprechpartner-image-wrap {
  position: relative !important;
  z-index: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  aspect-ratio: 16 / 10 !important;
  background: #f2f2f2;
}

.content_image,
.content_image.size-medium,
.content_image.size-large,
.vorteile_card-image {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  aspect-ratio: auto !important;
}

/* Ausnahme: Bild bleibt im Flow der Karte, Text daneben/darunter unberührt */
.layout_content .content_image-wrap {
  position: relative !important;
}

.layout_content,
.layout_content.asset-left {
  position: relative !important;
  z-index: 0 !important;
  align-items: stretch !important;
}

.layout_content > div {
  position: relative !important;
  z-index: 1 !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

/* Schnellster-Service: ebenfalls füllen, kein Letterboxing */
.content_image-wrap.img-schnellster-service,
.content_image-wrap.img-schnellster-service .content_image {
  object-fit: cover !important;
  height: 100% !important;
}

@media (max-width: 767px) {
  .layout_content.asset-left {
    flex-direction: column !important;
  }
}

/* Footer-CTA: Bild nicht über Text legen */
.section_footer-cta .footer-cta,
.footer-cta {
  overflow: hidden !important;
}

.section_footer-cta .footer-cta_image-wrap,
.footer-cta_image-wrap {
  z-index: 0 !important;
}

.section_footer-cta .footer-cta_content,
.footer-cta_content {
  position: relative !important;
  z-index: 2 !important;
}

@media (max-width: 991px) {
  .section_footer-cta {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  .section_footer-cta .footer-cta_image-wrap,
  .footer-cta_image-wrap {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 10 !important;
    max-height: none !important;
  }

  .section_footer-cta .footer_image,
  .footer_image {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    z-index: 0 !important;
  }

  .footer-cta_content-grid {
    grid-template-columns: 1fr !important;
  }

  .footer-cta {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  .footer {
    margin-top: 0 !important;
    position: relative !important;
    z-index: 1 !important;
  }
}

/* Hero mobil: Bild oben, Text darunter – kein Overlay */
@media (max-width: 767px) {
  .section_hero {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    background: #0c0c0c !important;
    background-image: none !important;
    overflow: hidden !important;
  }

  .section_hero .hero_image-wrap,
  .section_hero .hero_image-wrap.is-general {
    position: relative !important;
    inset: auto !important;
    order: -1 !important;
    width: 100% !important;
    height: clamp(180px, 48vw, 280px) !important;
    z-index: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    background-image: url('../images/hero-reinigung.png') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }

  .section_hero .padding-global,
  .section_hero .padding-global.z-index-2,
  .section_hero .container {
    position: relative !important;
    z-index: 1 !important;
    order: 1 !important;
    background: #0c0c0c !important;
    padding-top: 1.25rem !important;
    padding-bottom: 1.75rem !important;
    margin-top: 0 !important;
  }

  .section_hero .hero_content-wrap {
    justify-content: flex-start !important;
    padding-top: 0 !important;
    min-height: 0 !important;
  }

  .section_hero .max-width-small {
    max-width: 100% !important;
    width: 100% !important;
    padding-right: 0 !important;
  }

  .section_hero .heading-style-h1.is-hero,
  .section_hero .hero_content-wrap .heading-style-h1 {
    font-size: clamp(1.35rem, 6.2vw, 1.85rem) !important;
    line-height: 1.2 !important;
    word-break: break-word !important;
  }

  .section_hero .hero_content-wrap .text-size-medium {
    font-size: 0.95rem !important;
    line-height: 1.45 !important;
  }

  .section_hero .button-group {
    width: 100% !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .section_hero .mobile-100,
  .section_hero .button_element,
  .section_hero .button_wrap {
    width: 100% !important;
  }

  .section_hero .hero_fsv-partner-row {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 0.65rem !important;
    max-width: 100% !important;
  }

  .section_hero .hero_fsv-partner-text {
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
    font-size: 0.85rem !important;
  }

  .section_hero .hero_fsv-logo-wrap {
    flex: 0 0 auto !important;
  }

  .section_hero .hero_badge-block {
    width: 100% !important;
    max-width: 100% !important;
  }

  .section_hero .hero_badge-block .rating-block {
    max-width: 100% !important;
  }

  /* Funnel mobil kompakter */
  .section_funnel {
    padding: 2.5rem 0 !important;
  }

  .section_funnel .funnel-container {
    padding: 1.5rem 1rem !important;
    min-height: 0 !important;
    border-radius: 1rem !important;
  }

  .section_funnel .funnel-steps-indicator {
    margin-bottom: 1.5rem !important;
    padding: 0 !important;
  }

  .section_funnel .step-number {
    width: 40px !important;
    height: 40px !important;
    font-size: 16px !important;
  }

  .section_funnel .funnel-options {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  .section_funnel .funnel-option {
    padding: 1rem !important;
  }

  .section_funnel .funnel-title {
    font-size: 1.2rem !important;
  }

  /* Allgemeine Abstände / Overflow */
  .padding-section-large {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  .padding-global {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .footer_grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  img {
    max-width: 100% !important;
  }
}

@media (max-width: 479px) {
  .section_hero {
    background-image: none !important;
    height: auto !important;
    padding-top: 0 !important;
  }

  .section_hero .hero_image-wrap.is-general {
    height: 200px !important;
  }
}