/* Mobile corrections for the homepage only. */
@media screen and (max-width: 809px) {
  /* A shorter, calmer image stage on phones. */
  html.rc-homepage .wide-section:not(.rc-contact-divider) {
    min-height: 78svh !important;
    aspect-ratio: auto;
    padding-top: 36px;
    padding-bottom: 36px;
    border-top: 0 !important;
  }

  html.rc-homepage .hero-section + .section {
    border-bottom: 0 !important;
  }

  /* Auf kleinen Displays bleibt die Aufhellung auf den oberen Textbereich
     begrenzt; der groesste Teil des Luftbilds bleibt unverdeckt. */
  html.rc-homepage .wide-section:not(.rc-contact-divider) .wide-section-scrim {
    opacity: 1;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, .84) 0%,
      rgba(255, 255, 255, .62) 15%,
      rgba(255, 255, 255, .26) 34%,
      rgba(255, 255, 255, .12) 52%,
      rgba(255, 255, 255, .12) 100%
    );
  }

  html.rc-homepage .wide-section:not(.rc-contact-divider) .wide-section-title {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0;
    padding: 0;
    background: none;
  }

  /* Natural mobile paragraph flow despite the fixed desktop line breaks. */
  html.rc-homepage .grid-section-contents .heading---h5.long-text {
    white-space: normal;
    text-align: left;
    text-wrap: pretty;
    word-spacing: normal;
    letter-spacing: normal;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: auto;
  }

  html.rc-homepage .grid-section-contents .heading---h5.long-text span {
    word-spacing: normal;
    letter-spacing: normal;
  }

  /* Give the intro copy the same useful width as its heading. */
  html.rc-homepage .wide-section-title,
  html.rc-homepage .wide-section-subtitle {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  html.rc-homepage .wide-section-subtitle .badge-text.large {
    display: block;
    width: 100%;
    max-width: 30rem;
    white-space: normal !important;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
  }

  /* Keep the certification cards within the viewport. */
  html.rc-homepage .wide-section .icon-horizontal-group {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex-direction: column;
    align-items: stretch;
  }

  html.rc-homepage .wide-section .icon-horizontal-item {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  html.rc-homepage .wide-section .icon-horizontal-text,
  html.rc-homepage .wide-section .icon-horizontal-item .badge-text {
    min-width: 0;
    max-width: 100%;
    white-space: normal !important;
    word-break: normal;
    overflow-wrap: anywhere;
  }

  /* No fine outer framing lines around these two mobile sections. */
  html.rc-homepage .rc-quality-promise,
  html.rc-homepage .rc-realclean-faq,
  html.rc-homepage .rc-quality-promise > .main-container,
  html.rc-homepage .rc-realclean-faq > .main-container,
  html.rc-homepage .rc-quality-promise .title-top-section,
  html.rc-homepage .rc-realclean-faq .title-top-section {
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    outline: 0 !important;
  }

  /* Remove the remaining one-pixel rule on the left edge of the lists. */
  html.rc-homepage .rc-quality-promise__content,
  html.rc-homepage .rc-quality-promise__facts,
  html.rc-homepage .rc-quality-promise__facts .rc-pricing-faq__item,
  html.rc-homepage .rc-quality-promise__facts .rc-pricing-faq__trigger,
  html.rc-homepage .rc-realclean-faq__list,
  html.rc-homepage .rc-realclean-faq__list .rc-pricing-faq__item,
  html.rc-homepage .rc-realclean-faq__list .rc-pricing-faq__trigger {
    border-left: 0 !important;
    border-right: 0 !important;
  }

  html.rc-homepage .rc-quality-promise__facts.rc-pricing-faq__list,
  html.rc-homepage #realclean-faq.rc-realclean-faq .rc-pricing-faq__list {
    box-shadow: inset 0 1px 0 var(--_color---color-white-border) !important;
  }

  html.rc-homepage .rc-quality-promise__facts .rc-pricing-faq__item,
  html.rc-homepage #realclean-faq .rc-pricing-faq__item {
    box-shadow: inset 0 -1px 0 var(--_color---color-white-border) !important;
  }

  /* Match the quality facts to the FAQ question typography. */
  html.rc-homepage .rc-quality-promise__facts .rc-pricing-faq__question {
    font-size: var(--_typography---type-lead-size);
    line-height: var(--_typography---type-lead-line-height);
    hyphens: none;
    word-break: normal;
    overflow-wrap: normal;
  }

  /* Keep the form heading readable on its dark/blue background. */
  html.rc-homepage .rc-contact-divider--form .rc-book-contact__heading {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
  }

  /* Keep the "Ihre Anfrage" area in the polished mobile layout. */
  html.rc-homepage .rc-contact-section .rc-book-contact__heading,
  html.rc-homepage .rc-contact-divider--form .rc-book-contact__heading {
    font-size: clamp(34px, 9vw, 42px);
    line-height: 1.08;
    letter-spacing: -0.025em;
    text-wrap: balance;
  }

  html.rc-homepage .rc-contact-section .rc-contact-form__footer,
  html.rc-homepage .rc-contact-divider--form .rc-contact-form__footer {
    grid-template-columns: 1fr;
    gap: 12px;
    width: 100%;
  }

  html.rc-homepage .rc-contact-section .rc-contact__submit,
  html.rc-homepage .rc-contact-divider--form .rc-contact__submit {
    width: 100%;
    min-width: 0;
    min-height: 52px;
  }

  html.rc-homepage .rc-contact-section .rc-contact-form__meta,
  html.rc-homepage .rc-contact-divider--form .rc-contact-form__meta {
    width: 100%;
  }

}