/* ==========================================================================
   Verticaal ritme, één systeem voor de hele pagina.
   Laadt als laatste en overschrijft bewust de losse waarden uit caravan.css,
   caravan-2.css, style.css en occasions.css.

   Eén knop om alles te schalen: --section-space.
   Elke sectie krijgt dezelfde ruimte boven en onder, en géén marges.
   Marges waren de oorzaak van de dubbele gaten: .howto en .occasions hadden
   margin-top 96 bovenop padding 96, dus 192px, terwijl de buren er 96 hadden.
   ========================================================================== */

:root {
  --section-space: 96px;
}

@media (max-width: 1024px) {
  :root { --section-space: 72px; }
}

@media (max-width: 640px) {
  :root { --section-space: 56px; }
}

/* --- alle secties gelijk --- */
.hero,
.more,
.routes,
.routes--lead,
.howto,
.diff,
.brands,
.reviews,
.specs,
.faq,
.quote,
.occasions,
.others,
.others--secondary,
/* blokken die alleen op de koop-pagina's staan, zie koop.css */
.roi,
.vs,
.netw,
.plan,
.sw,
.broch {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: var(--section-space);
  padding-bottom: var(--section-space);
}

/* --- uitzonderingen, bewust --- */

/* De hero sluit direct aan op de donkere header, daar hoort geen dubbele lucht. */
.hero {
  padding-top: calc(var(--section-space) * 0.75);
  padding-bottom: 0;
}

/* De trustbar hoort visueel bij de hero, dus een kortere afstand. */
.trustbar {
  margin-top: calc(var(--section-space) * 0.6);
}

/* De footer heeft eigen binnenruimte, dus geen extra marge erboven. */
.footer {
  margin-top: 0;
}

/* Laatste sectie voor de footer: geen dubbele lucht tegen de donkere footer aan. */
.others--secondary {
  padding-bottom: var(--section-space);
}

/* --- mobiele actiebalk niet over de laatste content heen --- */
@media (max-width: 1024px) {
  .footer__bottom { padding-bottom: 80px; }
}