/*
 * Fallback for older iPhone Safari versions that do not understand
 * Media Queries Level 4 range syntax such as (width <= 560px).
 */
@media screen and (max-width: 560px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding-left: 20px;
    padding-right: 20px;
  }

  .services,
  .services .wrap,
  .serviceGrid,
  .serviceGrid.pale {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .serviceGrid,
  .serviceGrid.pale {
    grid-template-columns: minmax(0, 1fr);
  }

  .serviceCard {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    padding: 26px;
    overflow-wrap: anywhere;
  }

  /*
   * Lange deutsche Begriffe und Kontaktangaben dürfen auf schmalen
   * Displays umbrechen, ohne rechts abgeschnitten zu werden.
   */
  h1,
  h2,
  h3,
  p,
  a,
  summary,
  .contactCards,
  .infoPanel,
  .legal {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
    -webkit-hyphens: auto;
    hyphens: auto;
  }

  .pageHero h1 {
    font-size: clamp(30px, 9vw, 36px);
  }
}

/* Malermeister-Bildmotiv: transparente Webgrafik ohne Rahmen oder Farbkasten. */
.aboutVehicle {
  padding-top: 34px;
  padding-bottom: 18px;
}

.aboutVehicleInner {
  position: relative;
  padding: 0;
  background: transparent;
}

.aboutVehicleInner::after {
  content: none;
}

.aboutVehicle img {
  position: relative;
  z-index: 1;
}

.aboutVehicle img {
  width: min(100%, 1080px);
  margin: 0 auto;
  filter: drop-shadow(0 24px 28px rgba(4, 19, 45, 0.38));
}

.masterProfile {
  grid-template-columns: minmax(0, 1fr) 360px;
}

.masterProfile .infoPanel {
  align-self: start;
}

@media screen and (max-width: 900px) {
  .aboutVehicle {
    padding-top: 24px;
    padding-bottom: 12px;
  }

  .aboutVehicleInner {
    padding: 0;
  }

  .masterProfile {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 560px) {
  .aboutVehicle {
    padding-top: 14px;
    padding-bottom: 6px;
  }

  .aboutVehicleInner {
    padding: 0;
  }

  .aboutVehicle img {
    width: 118%;
    max-width: none;
    margin: 0 0 0 -9%;
  }
}


/* Kontaktformular: Status, Spam-Feld und barrierearme Rückmeldung */
.hpField{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.formStatus{display:none;padding:12px 14px;border-radius:8px;margin-bottom:14px;font-weight:700}
.formStatus.success{display:block;background:#e7f6ec;color:#155b2d;border:1px solid #a9d8b8}
.formStatus.error{display:block;background:#fff0f0;color:#8a1f1f;border:1px solid #e6b2b2}
.form .consent a{text-decoration:underline}
