/*
 * Afwerkingslaag, v8.11.0. Uitsluitend styling-consistentie: een spacing-schaal,
 * een vaste mobiele goot, uniforme rondingen en verticale ritmiek. Additief; deze
 * laag herschrijft geen enkele bestaande regel maar harmoniseert de afwerking.
 * Alles onder .lpl-app.lpl-v3 zodat de reikwijdte de landing blijft.
 */
.lpl-app.lpl-v3 {
  --lpl-s-1: 4px;
  --lpl-s-2: 8px;
  --lpl-s-3: 12px;
  --lpl-s-4: 16px;
  --lpl-s-5: 24px;
  --lpl-s-6: 32px;
  --lpl-s-7: 48px;
  --lpl-r-card: 16px;
}

/* Een vaste, rustige goot op mobiel: overal exact dezelfde marge links/rechts. */
@media (max-width: 700px) {
  .lpl-app.lpl-v3 { --gutter: 20px; }
  .lpl-app.lpl-v3 .lpl-container { padding-left: var(--gutter); padding-right: var(--gutter); }
  /* Secties krijgen een consistent, wat compacter verticaal ritme op mobiel. */
  .lpl-app.lpl-v3 .lpl-section { padding-top: clamp(48px, 11vw, 72px); padding-bottom: clamp(48px, 11vw, 72px); }
}

/* Kaarten: uniforme ronding en een consistente binnenmarge, ongeacht het blok. */
.lpl-app.lpl-v3 .lpl-pc-kaart,
.lpl-app.lpl-v3 .lpl-oo-vel,
.lpl-app.lpl-v3 .lpl-zb-details,
.lpl-app.lpl-v3 .lpl-card { border-radius: var(--lpl-r-card); }

/* Knoppen: gelijke hoogte-beleving door consistente verticale padding en
 * een minimale raakvlakhoogte voor mobiel (comfortabel tikken). */
.lpl-app.lpl-v3 .lpl-btn {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 700px) {
  /* Knoppen die alleen op mobiel vol in de breedte horen, netjes uitvullen. */
  .lpl-app.lpl-v3 .lpl-hero-doelgroepen,
  .lpl-app.lpl-v3 .lpl-cta-actions { gap: var(--lpl-s-3); }
  .lpl-app.lpl-v3 .lpl-hero-doelgroepen .lpl-btn { flex: 1 1 auto; }
}

/* Verticale ritmiek: kop-naar-tekst en tekst-naar-knop overal gelijk. */
.lpl-app.lpl-v3 .lpl-section > .lpl-container > h2,
.lpl-app.lpl-v3 .lpl-section > .lpl-container > .lpl-h2 { margin-bottom: var(--lpl-s-4); }

/* Rust bij het laden: reserveer beeldverhoudingen zodat niets verspringt. */
.lpl-app.lpl-v3 img { height: auto; }
.lpl-app.lpl-v3 img[width][height] { aspect-ratio: attr(width) / attr(height); }

/* Focus-zichtbaarheid uniform (toegankelijkheid en afwerking). */
.lpl-app.lpl-v3 a:focus-visible,
.lpl-app.lpl-v3 button:focus-visible,
.lpl-app.lpl-v3 .lpl-btn:focus-visible {
  outline: 2px solid var(--accent, #2796EB);
  outline-offset: 2px;
}

/* Zeer kleine schermen (iPhone SE, 320-360px): tekst en knoppen niet laten knellen. */
@media (max-width: 380px) {
  .lpl-app.lpl-v3 { --gutter: 16px; }
  .lpl-app.lpl-v3 .lpl-btn { width: 100%; }
  .lpl-app.lpl-v3 .lpl-hero-doelgroepen { flex-direction: column; }
}