/*
 * Ritme en ruimte (0.4.4): een vaste spacing-schaal en een vast sectie-ritme voor het hele thema.
 * Wordt als laatste geladen. Schaal: --ruimte-1 tot --ruimte-9 = 4, 8, 12, 16, 24, 32, 48, 72, 96 px.
 * Secties: 72-96 px boven en onder op desktop, 48-56 px op de telefoon (--band). Kop tot inhoud 24-32 px,
 * tussen kaarten 16-24 px, kaartpadding 20-24 px (telefoon 16), knoppen nooit tegen elkaar (minimaal 12 px).
 */
:root {
  --ruimte-1: 4px; --ruimte-2: 8px; --ruimte-3: 12px; --ruimte-4: 16px; --ruimte-5: 24px;
  --ruimte-6: 32px; --ruimte-7: 48px; --ruimte-8: 72px; --ruimte-9: 96px;
  --band: clamp(52px, 7vw, 88px);
  --kop-inhoud: clamp(24px, 2.6vw, 32px);
  --kaart-gat: clamp(16px, 1.8vw, 24px);
  --kaart-pad: clamp(16px, 1.8vw, 24px);
}

/* Secties: overal hetzelfde ritme, ook bij de nieuwe blokken */
.band, .hulp, .over-held { padding-top: var(--band); padding-bottom: var(--band); }
.band--compact { padding-top: var(--ruimte-7); padding-bottom: var(--ruimte-7); }
.usp-strook-in, .over-feiten-in { padding-top: var(--ruimte-5); padding-bottom: var(--ruimte-5); }
.voet { padding-top: var(--ruimte-8); }
/* Twee secties met dezelfde achtergrond na elkaar: een keer de ruimte (geen dubbele), anders altijd volledig. */
.band--wit + .band--wit, .band--vel + .band--vel { padding-top: 0; }
.band--vel + .band--wit, .band--wit + .band--vel, .band--inkt + .band, .band + .band--inkt { padding-top: var(--band); }

/* Kop tot inhoud */
.sectiekop, .uitleg-kop, .hulp-kop { margin-bottom: var(--kop-inhoud); }
.sectiekop h2 + p, .uitleg-kop h2 + p, h1 + p, h2 + p { margin-top: var(--ruimte-3); }
.toep-tabs { margin-bottom: var(--ruimte-5); }

/* Kaarten en rasters */
.raster, .raster--3, .raster--4, .hulp-kaarten, .seoblok-kiezen ul, .subtegels, .tegels { gap: var(--kaart-gat); }
.hulp-kaart, .seoblok-kiezen li, .over-locatie, .over-punten li { padding: var(--kaart-pad); }

/* Knoppen nooit tegen elkaar */
.held-acties, .over-held-acties, .over-cta-knoppen, .contact-knoppen, .adviesband-acties, .wagen-acties, .koop-rij { gap: var(--ruimte-3); }
.contactknop-knoppen { gap: var(--ruimte-3); }
:where(p, div, li, form):has(> .knop + .knop) { column-gap: var(--ruimte-3); row-gap: var(--ruimte-3); }
:where(p):has(> .knop + .knop) { display: flex; flex-wrap: wrap; }

/* Leesbare lopende tekst */
.seoblok-tekst, .over-lees, .info-inhoud { line-height: 1.6; }

@media (max-width: 640px) {
  :root { --band: 52px; --kop-inhoud: 24px; }
  .band--compact { padding-top: var(--ruimte-6); padding-bottom: var(--ruimte-6); }
  .voet { padding-top: var(--ruimte-7); }
  .raster, .raster--3, .raster--4 { gap: var(--ruimte-3); }
}