/* Identisches vollständiges Fahrzeugfoto auf allen Geräten. */
@font-face {
  font-family: "Barlow Angebot";
  src: url("assets/fonts/Barlow-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
.full-photo-stage {
  aspect-ratio: 4 / 3;
}
.full-photo-stage::after {
  background: linear-gradient(180deg, #0008 0%, #0003 28%, #0000 62%);
}
.full-photo-title {
  justify-content: flex-start;
  padding-top: 42px;
}
.hero-full-photo .full-photo-title .eyebrow {
  margin-bottom: 18px;
}
.hero-full-photo .full-photo-title h1 {
  font-size: clamp(48px, 4.3vw, 64px);
  max-width: 580px;
}
.hero-full-photo .full-photo-details .hero-intro {
  font-family: "Barlow Angebot", Barlow, Arial, sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #000;
  line-height: 1.5;
}
@media (max-width: 800px) {
  .full-photo-title {
    padding-top: 24px;
  }
  .hero-full-photo .full-photo-title .eyebrow {
    margin-bottom: 10px;
  }
  .hero-full-photo .full-photo-title h1 {
    font-size: clamp(32px, 8vw, 54px);
    max-width: 540px;
  }
  .hero-full-photo .full-photo-details .hero-intro {
    font-size: 20px;
  }
}
@media (max-width: 520px) {
  .full-photo-title {
    padding-top: 18px;
  }
  .hero-full-photo .full-photo-title .eyebrow {
    margin-bottom: 8px;
  }
  .hero-full-photo .full-photo-title h1 {
    font-size: 22px;
    max-width: 340px;
  }
  .hero-full-photo .full-photo-details .hero-intro {
    font-size: 18px;
  }
}

/* Vom Nutzer bereitgestelltes LKW-Foto vollständig in der Fahrzeugkarte. */
.vehicle-photo:has(.vehicle-image-real) {
  background: #f2f3f4;
}
.vehicle-photo .vehicle-image-real {
  object-fit: contain;
}
.vehicle-card:hover .vehicle-photo .vehicle-image-real {
  transform: none;
}

/* Einheitliche echte Fettschrift nur im Bereich Kontakt & Anfahrt. */
@font-face {
  font-family: "Barlow Kontakt Display";
  src: url("assets/fonts/BarlowCondensed-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
#kontakt {
  font-family: "Barlow Angebot", Barlow, Arial, sans-serif;
  font-weight: 700;
}
#kontakt.contact-section * {
  font-weight: 700;
}
#kontakt h2,
#kontakt h3,
#kontakt .contact-method strong {
  font-family: "Barlow Kontakt Display", "Barlow Condensed", "Arial Narrow", sans-serif;
}
#kontakt input,
#kontakt select,
#kontakt textarea,
#kontakt button {
  font-family: "Barlow Angebot", Barlow, Arial, sans-serif;
}
#kontakt input::placeholder,
#kontakt textarea::placeholder {
  font-weight: 700;
}

/* Saubere mobile Kontaktansicht auch mit dem fetteren Schriftschnitt. */
@media (max-width: 800px) {
  #kontakt .opening-hours {
    grid-column: 1 / -1;
  }
}
@media (max-width: 520px) {
  #kontakt .email-contact strong {
    font-size: clamp(22px, 7vw, 30px);
    letter-spacing: -0.01em;
  }
}