/* foodtruck.css — Food-Truck-Seiten-spezifische Blöcke
   (alles andere kommt aus base.css/sections.css/story.css-Mustern) */

/* 2 · Truck-Hero (Scrub) */
#ft-hero { margin-top: calc(-1 * var(--nav-h)); }
@media (prefers-reduced-motion: no-preference) {
  html.js #ft-hero { height: 400vh; }
}
#ft-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 4 · Einsätze (Klon des #fleisch/#werte-Containers) */
#einsaetze {
  max-width: 1200px;
  margin: 0 auto;
  padding: 6vh 24px 10vh;
  display: flex;
  flex-direction: column;
  gap: 12vh;
}
#einsaetze .section-head { padding-left: 0; padding-right: 0; }

/* 6 · Warum wir (Specs-Padding) */
#warum { padding: 10vh 0 14vh; }
#warum .display-m { margin-bottom: 3.5rem; }

/* 7 · Buchen */
#buchen { padding: 4vh 0 14vh; }
#buchen .content-narrow { text-align: center; }
#buchen .display-m { margin-bottom: 1.2rem; }
.buchen-kontakt {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2.4rem;
}
.buchen-note {
  margin-top: 1.6rem;
  color: var(--muted);
  font-weight: 500;
  font-size: 0.95rem;
}

@media (max-width: 734.98px) and (prefers-reduced-motion: no-preference) {
  html.js #ft-hero { height: 320vh; }
}