/* Kontakt hero picture: preserve all original dimensions, typography and spacing. */
.page-contact .contact-page-intro {
  background-color: #f5f1eb;
  background-image: linear-gradient(90deg, rgba(247,243,236,.89) 0%, rgba(247,243,236,.84) 34%, rgba(247,243,236,.67) 53%, rgba(247,243,236,.07) 73%, rgba(247,243,236,0) 100%), url("kontakt-hero-terrasse.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
@media (max-width: 700px) {
  .page-contact .contact-page-intro {
    background-image: linear-gradient(180deg, rgba(249,246,241,.92) 0%, rgba(249,246,241,.87) 58%, rgba(249,246,241,.65) 100%), url("kontakt-hero-terrasse.png");
    background-position: 70% center;
  }
}

/* Compact Kontakt hero: matching the restrained height of service-page banners.
   Preserve the photograph, text, and responsive image crop. */
@media (min-width: 701px) {
  .page-contact .contact-page-intro {
    padding-top: 46px;
    padding-bottom: 46px;
  }
}
@media (max-width: 700px) {
  .page-contact .contact-page-intro {
    padding-top: 24px;
    padding-bottom: 22px;
  }
}

/* Kontakt page: remove the whole hero at desktop widths only.
   The mobile/tablet hero and original image/typography are unchanged. */
@media (min-width: 981px) {
  .page-contact .contact-page-intro {
    display: none !important;
  }
  .page-contact .contact-section {
    padding-top: 42px;
  }
}