/* ===========================================================================
   Marcel — marketingsite
   ---------------------------------------------------------------------------
   Herschreven op de huisstijl uit Figma (UI/UX Redesign, augustus 2026).

   De klassenamen zijn bewust dezelfde gebleven als in de vorige versie. Deze
   site heeft zeven pagina's die allemaal dit ene bestand laden; had ik de
   namen gewijzigd, dan was elke pagina behalve de homepage stuk gegaan tot ze
   stuk voor stuk herschreven waren. Nu krijgt elke pagina het nieuwe uiterlijk
   meteen, en kan de opbouw daarna per pagina bijgewerkt worden.

   Kleuren komen uit de Figma-variabelen. Twee ervan zijn aangepast: de
   statuskleuren #24b47e en #f5a623 haalden op wit 2,66:1 en 2,03:1 — te weinig
   om tekst in te zetten. Ze staan hier donkerder voor tekst, en de originele
   tint blijft voor vlakken en balkjes.
   =========================================================================== */

:root {
  /* Merk */
  --paars: #6c5ce7;
  --paars-donker: #5b49d6;
  --paars-zacht: #f0eeff;
  --paars-subtiel: #f7f6ff;
  --paars-rand: #ddd8ff;

  /* Vlakken */
  --wit: #fff;
  --vlak: #f8f8fc;
  --vlak-zacht: #f4f4f9;
  --donker: #17172a;

  /* Randen */
  --lijn: #e8e8f0;
  --lijn-sterk: #d8d8e4;

  /* Tekst */
  --tekst: #17172a;
  --kop: #29293d;
  --tekst-zacht: #626277;
  --tekst-steun: #77778b;
  /* Was #9292a5 (3,05:1 op wit) — onder WCAG AA (4,5:1) voor kleine tekst.
     #737389 haalt 4,62:1. Zelfde correctie als in het platform. */
  --tekst-zwak: #737389;

  /* Betekenis — de tekstvarianten zijn donkerder dan in Figma, zie kop */
  --groen: #0f7a55;
  --groen-vlak: #eaf9f3;
  --groen-balk: #24b47e;
  --oranje: #8a5a00;
  --oranje-vlak: #fff6e5;
  --rood: #c23b3b;
  --rood-vlak: #fdecec;
  --blauw: #1f5fd0;
  --blauw-vlak: #eaf3ff;

  /* Vorm */
  --rond-s: 10px;
  --rond: 12px;
  --rond-l: 16px;
  --rond-xl: 20px;
  --rond-pil: 999px;
  --radius: 16px; /* oude naam, blijft werken voor pagina's die hem nog gebruiken */

  --max: 1240px;
  --schaduw: 0 1px 2px rgba(23, 23, 42, .05);
  --schaduw-l: 0 14px 40px rgba(23, 23, 42, .10);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--wit);
  color: var(--tekst);
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; color: var(--kop); letter-spacing: -.025em; overflow-wrap: break-word; }
h1 { font-size: 60px; line-height: 70px; font-weight: 800; }
h2 { font-size: 40px; line-height: 50px; font-weight: 800; }
h3 { font-size: 18px; line-height: 26px; font-weight: 700; }
h4 { font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--tekst-zwak); }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 32px; }
.accent { color: var(--paars); }
.pixel { image-rendering: auto; }

section { padding: 96px 0; }
.sectie-grijs { background: var(--vlak); }
.sectie-donker { background: var(--donker); color: #e4e2f2; }
.sectie-donker h2, .sectie-donker h3, .sectie-donker strong { color: #fff; }
.sectie-donker .sectie-label { background: rgba(255, 255, 255, .12); color: #cdc6ff; }

.sectie-kop { text-align: center; max-width: 760px; margin: 0 auto 56px; }
.sectie-kop h2 { font-size: 42px; line-height: 52px; margin-top: 22px; }
.sectie-kop p { color: var(--tekst-steun); font-size: 16px; margin-top: 16px; }

.sectie-label,
.pil {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--paars-zacht);
  color: var(--paars);
  border-radius: var(--rond-pil);
  padding: 7px 16px;
  font-size: 11.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0;
}

/* ---- Knoppen ------------------------------------------------------------ */
.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--rond-s);
  font-weight: 700;
  font-size: 15px;
  padding: 15px 22px;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.knop-primair { background: var(--paars); color: #fff; }
.knop-primair:hover { background: var(--paars-donker); }
.knop-tweede { background: var(--wit); color: var(--kop); border-color: var(--lijn-sterk); }
.knop-tweede:hover { border-color: var(--paars); color: var(--paars); }
.knop-klein { padding: 10px 16px; font-size: 14px; }
.knop-breed { width: 100%; }

/* ---- Navigatie ---------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
}
.nav-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 32px;
  height: 88px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 11px;
  font-weight: 800;
  font-size: 22px;
  color: var(--paars);
  letter-spacing: -.02em;
}
.nav-logo img { width: 48px; height: 48px; border-radius: 50%; }
.nav-links {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--tekst-zacht);
}
.nav-links a:hover { color: var(--paars); }
.nav-links a.actief { color: var(--paars); }
.nav-inloggen { font-weight: 600; }

/* Hamburgerknop voor het mobiele menu. Op desktop verborgen (het menu staat
   dan gewoon uitgeklapt in de balk); verschijnt onder 720px (zie de media
   query onderaan). De knop wordt door assets/site.js in de balk gezet. */
.nav-toggle {
  display: none;
  margin-left: auto;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  background: none;
  border: 1px solid var(--lijn-sterk);
  border-radius: 10px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--kop);
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle.actief span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.actief span:nth-child(2) { opacity: 0; }
.nav-toggle.actief span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {
  .nav-toggle span { transition: none; }
}

.taalkiezer {
  border: 1px solid var(--lijn-sterk);
  border-radius: var(--rond-s);
  padding: 9px 10px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tekst-zacht);
  background: var(--wit);
  cursor: pointer;
}

/* ---- Hero --------------------------------------------------------------- */
.hero {
  background: linear-gradient(160deg, #fff 0%, #faf9ff 55%, #f4f2ff 100%);
  padding: 64px 0 96px;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 40px;
  align-items: center;
}
.hero-lead {
  color: var(--tekst-zacht);
  font-size: 16.5px;
  line-height: 27px;
  margin-top: 24px;
  max-width: 520px;
}
.hero-knoppen { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }
.hero-noot {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 22px;
  font-size: 12.5px;
  color: var(--tekst-zwak);
}
.hero-beeld { position: relative; min-height: 620px; }
.hero-beeld > img {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 380px;
  z-index: 1;
}
.hero-vlek {
  position: absolute;
  right: 40px;
  top: 60px;
  width: 330px;
  height: 440px;
  border-radius: 180px;
  background: linear-gradient(180deg, #efecff, #e6e1ff);
}
.hero-bubbel,
.zwevend {
  position: absolute;
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--rond-l);
  padding: 16px;
  box-shadow: var(--schaduw-l);
  z-index: 2;
  font-size: 13.5px;
  line-height: 20px;
  color: var(--kop);
}
.hero-bubbel { left: -10px; top: 110px; width: 250px; }
.z1 { left: -10px; top: 100px; width: 252px; }
.z2 { right: -30px; top: 300px; width: 250px; }
.z3 { left: 20px; bottom: 60px; width: 228px; }
.zwevend .klein,
.zwevend .groot { display: block; }
.zwevend .klein { font-size: 11.5px; color: var(--tekst-zwak); font-weight: 600; }
.zwevend b { display: block; font-size: 13.5px; color: var(--kop); line-height: 20px; margin-top: 5px; }
.zwevend .lnk { color: var(--paars); font-size: 12.5px; font-weight: 700; display: inline-block; margin-top: 9px; }
.zwevend .groot { font-size: 28px; font-weight: 800; color: var(--kop); margin-top: 4px; letter-spacing: -.02em; }
.zwevend .stijging { color: var(--groen); font-size: 12.5px; font-weight: 700; display: block; }
.ic-badge {
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--paars-zacht); color: var(--paars);
  display: grid; place-items: center; font-size: 14px;
}
.balkje { height: 7px; border-radius: var(--rond-pil); background: var(--vlak-zacht); margin-top: 10px; overflow: hidden; }
.balkje i { display: block; height: 100%; width: 78%; background: var(--groen-balk); border-radius: var(--rond-pil); }

/* ---- Kanalen ------------------------------------------------------------ */
.platforms {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.platform-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--rond-pil);
  padding: 12px 20px;
  font-weight: 700;
  font-size: 14px;
  color: var(--tekst-zacht);
}

/* ---- Kaarten ------------------------------------------------------------ */
.raster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.kaart {
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--rond-l);
  padding: 26px;
  box-shadow: var(--schaduw);
}
.kaart h3 { font-size: 17px; }
.kaart p { font-size: 13.5px; color: var(--tekst-steun); line-height: 21px; margin-top: 8px; }
.kaart-icoon {
  width: 44px;
  height: 44px;
  border-radius: var(--rond);
  background: var(--paars-zacht);
  color: var(--paars);
  display: grid;
  place-items: center;
  font-size: 19px;
  margin-bottom: 18px;
}

/* ---- Probleemblok ------------------------------------------------------- */
.probleem { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.pijnlijst { display: grid; gap: 14px; }
.pijn {
  display: flex;
  gap: 14px;
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  padding: 18px;
}
.pijn .x {
  width: 28px; height: 28px; border-radius: 9px;
  background: var(--rood-vlak); color: var(--rood);
  display: grid; place-items: center; font-weight: 800; flex: none;
}
.pijn b { display: block; font-size: 14.5px; color: var(--kop); }
.pijn p { font-size: 13.5px; color: var(--tekst-steun); line-height: 21px; margin-top: 4px; }

/* ---- Stappen ------------------------------------------------------------ */
.stappen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.stap {
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--rond-l);
  padding: 24px;
  box-shadow: 0 2px 10px rgba(23, 23, 42, .04);
}
.stapnr {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--paars); color: #fff;
  display: grid; place-items: center;
  font-weight: 800; font-size: 15px; margin-bottom: 20px;
}
.stap-beeld {
  height: 120px;
  border-radius: var(--rond);
  background: var(--paars-subtiel);
  margin-bottom: 20px;
  display: grid;
  place-items: center;
  font-size: 34px;
}
.stap b { display: block; font-size: 16px; color: var(--kop); }
.stap p { font-size: 13.5px; color: var(--tekst-steun); line-height: 21px; margin-top: 8px; }
.stap-streep { width: 26px; height: 3px; background: var(--paars); border-radius: 2px; margin-top: 18px; }

.metbalk {
  display: flex;
  align-items: center;
  gap: 28px;
  background: var(--paars-subtiel);
  border-radius: var(--rond-xl);
  padding: 24px 28px;
  margin-top: 28px;
  flex-wrap: wrap;
}
.metbalk img { width: 48px; height: 48px; border-radius: 50%; flex: none; }
.metbalk b { font-size: 15px; color: var(--kop); max-width: 200px; display: block; }
.metbalk-item { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--tekst-zacht); max-width: 230px; }
.metbalk-item span:first-child { color: var(--paars); font-size: 16px; }

/* ---- Schermbeeld -------------------------------------------------------- */
.schermbeeld {
  border-radius: var(--rond-xl);
  overflow: hidden;
  border: 1px solid var(--lijn);
  box-shadow: 0 30px 70px rgba(23, 23, 42, .14);
  max-width: 1100px;
  margin: 0 auto;
}
.schermbeeld img { display: block; width: 100%; }
.chips { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 36px; }
.chip {
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--rond-pil);
  padding: 10px 18px;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--tekst-zacht);
}

/* ---- Weekbrief ---------------------------------------------------------- */
.brief { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.brief-lijst { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 12px; }
.brief-lijst li { position: relative; padding-left: 30px; font-size: 15px; color: #cfcde2; }
.brief-lijst li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--groen-balk);
  font-weight: 800;
}
.brief-kaart {
  background: var(--wit);
  border-radius: var(--rond-xl);
  padding: 26px;
  color: var(--tekst);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
}
.brief-kop { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.brief-kop img { width: 52px; height: 52px; border-radius: 50%; }
.brief-kop strong { display: block; font-size: 16px; color: var(--kop); }
.brief-kop span { font-size: 12.5px; color: var(--tekst-zwak); }
.brief-regel {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 0;
  border-top: 1px solid var(--lijn);
  font-size: 13.5px;
  line-height: 21px;
  color: var(--tekst-zacht);
}
.brief-badge {
  border-radius: var(--rond-pil);
  padding: 3px 10px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .04em;
  flex: none;
}
.badge-ai { background: var(--paars-zacht); color: var(--paars); }
.badge-mens { background: var(--groen-vlak); color: var(--groen); }

/* ---- Weekplan ----------------------------------------------------------- */
.weekplan { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.plankaart {
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--rond-l);
  padding: 26px;
  box-shadow: 0 20px 50px rgba(23, 23, 42, .08);
}
.plankaart .regel { display: flex; gap: 13px; align-items: flex-start; padding: 15px 0; border-top: 1px solid var(--lijn); }
.plankaart .regel:first-of-type { border: 0; }
.plankaart .nr {
  width: 28px; height: 28px; border-radius: 9px;
  background: var(--vlak-zacht);
  display: grid; place-items: center;
  font-size: 11.5px; font-weight: 800; color: var(--tekst-steun); flex: none;
}
.plankaart .nr.klaar { background: var(--groen-vlak); color: var(--groen); }
.plankaart b { font-size: 14px; color: var(--kop); }
.plankaart .bij { font-size: 12.5px; color: var(--tekst-steun); }
.plankaart .lnk { color: var(--paars); font-size: 12.5px; font-weight: 700; }

/* ---- Prijzen ------------------------------------------------------------ */
.prijs-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; }
.prijs-kaart {
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--rond-xl);
  padding: 32px;
  position: relative;
}
.prijs-kaart.uitgelicht {
  border: 2px solid var(--paars);
  box-shadow: 0 20px 50px rgba(108, 92, 231, .16);
}
.prijs-vlag {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--paars);
  color: #fff;
  border-radius: var(--rond-pil);
  padding: 5px 16px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.prijs-naam {
  font-size: 12px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--paars);
  font-weight: 800;
  text-align: center;
}
.prijs-bedrag {
  font-size: 44px;
  font-weight: 800;
  color: var(--kop);
  text-align: center;
  margin-top: 12px;
  letter-spacing: -.03em;
}
.prijs-per { font-size: 15px; color: var(--tekst-zwak); font-weight: 600; }
/* "Prijs op aanvraag" is een zin, geen getal — op 44px (het formaat van
   "€119") zou hij twee regels breken en de kaart uit balans trekken. */
.prijs-bedrag-op-aanvraag { font-size: 24px; margin-top: 20px; }
.prijs-sub { text-align: center; color: var(--tekst-steun); font-size: 13.5px; margin-top: 8px; }
.prijs-lijst { list-style: none; padding: 0; margin: 24px 0; display: grid; gap: 11px; }
.prijs-lijst li { position: relative; padding-left: 28px; font-size: 14px; color: var(--tekst-zacht); }
.prijs-lijst li::before { content: "✓"; position: absolute; left: 0; color: var(--paars); font-weight: 800; }

/* ---- Actiebalk testfase -------------------------------------------------- */
.actie-balk {
  max-width: 620px;
  margin: 0 auto 40px;
  padding: 26px 28px 24px;
  text-align: center;
  background: var(--paars-subtiel);
  border: 1px solid var(--paars-rand);
  border-radius: var(--rond-xl);
}
.actie-balk h3 { font-size: 18px; line-height: 27px; }
.actie-balk > p { color: var(--tekst-steun); font-size: 14px; margin: 8px 0 20px; }

/* ---- Gratis plaatsen ---------------------------------------------------- */
.plaatsen { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.plaats {
  width: 84px;
  padding: 12px 0;
  border-radius: var(--rond);
  border: 1px dashed var(--lijn-sterk);
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--tekst-zwak);
}
.plaats.bezet { background: var(--paars-zacht); border-style: solid; border-color: var(--paars-rand); color: var(--paars); }
.plaats.bezet {
  border-style: solid;
  border-color: var(--paars);
  background: var(--paars-zacht);
  color: var(--paars);
}
.plaatsen-tekst { text-align: center; color: var(--tekst-steun); font-size: 14px; margin-top: 16px; }

/* ---- Verhaal / citaat --------------------------------------------------- */
.verhaal { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.verhaal-beeld { text-align: center; }
.verhaal p { color: var(--tekst-zacht); font-size: 16px; line-height: 27px; margin-top: 16px; }
.citaat {
  border-left: 3px solid var(--paars);
  padding: 6px 0 6px 22px;
  font-size: 19px;
  line-height: 30px;
  color: var(--kop);
  font-weight: 600;
  margin: 26px 0;
}


/* ---- Citaten van klanten ------------------------------------------------ */
/* auto-fit en niet twee vaste kolommen: komt er een derde citaat bij, dan
   schuift het vanzelf in de rij zonder dat hier iets aan hoeft. */
.klantcitaten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  max-width: 900px;
  margin: 0 auto;
}
.klantcitaat {
  margin: 0;
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--rond-l);
  padding: 30px;
  box-shadow: var(--schaduw);
  display: flex;
  flex-direction: column;
}
.klantcitaat blockquote {
  /* De onderruimte hoort bij het citaat en niet bij de naam eronder: die heeft
     margin-top:auto nodig om naar beneden te zakken, en auto laat geen ruimte. */
  margin: 0 0 24px;
  font-size: 15.5px;
  line-height: 26px;
  color: var(--tekst-zacht);
  /* Expliciet: sommige browsers zetten blockquote zwaarder dan lopende tekst,
     en dan leest het citaat als een kop. */
  font-weight: 400;
  /* De aanhalingstekens staan hier en niet in de tekst zelf: zo blijft de
     vertaling het citaat en niet de opmaak eromheen. */
  quotes: "\201E" "\201D";
}
.klantcitaat blockquote::before { content: open-quote; }
.klantcitaat blockquote::after { content: close-quote; }
.klantcitaat-persoon {
  display: flex;
  align-items: center;
  gap: 14px;
  /* auto duwt de naam naar de onderkant van de kaart: bij twee citaten van
     ongelijke lengte staan de foto's dan toch op één lijn. */
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--lijn);
}
.klantcitaat-persoon > span { display: flex; flex-direction: column; }
.klantcitaat-persoon b { font-size: 14.5px; color: var(--kop); }
.klantcitaat-persoon span span { font-size: 12.5px; color: var(--tekst-zwak); line-height: 19px; }
.klantcitaat-foto {
  width: 56px;
  height: 56px;
  border-radius: var(--rond-pil);
  object-fit: cover;
  flex: none;
  background: var(--vlak-zacht);
}


/* ---- Artikelpagina (over ons) ------------------------------------------- */
.artikel { max-width: 720px; margin: 0 auto; counter-reset: hoofdstuk; }
.artikel-lede {
  font-size: 19px;
  line-height: 32px;
  color: var(--tekst-zacht);
  margin: 0 0 8px;
}
.artikel h2 {
  font-size: 27px;
  line-height: 36px;
  margin-top: 60px;
  padding-top: 32px;
  border-top: 1px solid var(--lijn);
}
/* Het nummer voor elke kop komt uit een teller en niet uit de tekst: zo hoeft
   de vertaling niet mee te tellen, en klopt de nummering nog steeds als er
   later een hoofdstuk bij komt of uit gaat. */
.artikel h2::before {
  counter-increment: hoofdstuk;
  content: counter(hoofdstuk, decimal-leading-zero);
  display: block;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--paars);
}
/* De eerste kop staat al onder de titel van de pagina; daar hoort geen
   scheidingslijn en geen extra witruimte meer bij. */
.artikel h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.artikel p { color: var(--tekst-zacht); font-size: 16px; line-height: 28px; margin-top: 18px; }
.artikel .citaat { margin: 30px 0; quotes: "\201E" "\201D"; }
/* Aanhalingstekens uit de opmaak en niet uit de tekst: het citaat is een
   uitspraak, en de vertaling hoort alleen de woorden te bevatten. */
.artikel .citaat::before { content: open-quote; }
.artikel .citaat::after { content: close-quote; }
.artikel-beeld {
  margin: 44px 0 0;
  padding: 28px 0;
  display: grid;
  place-items: center;
  /* De zachte cirkel erachter is puur opmaak en staat daarom in de
     achtergrond en niet als tweede <img> in de pagina. */
  background: radial-gradient(circle at 50% 62%, var(--paars-zacht) 0 34%, transparent 62%);
}
.artikel-beeld img { width: 180px; max-width: 55%; height: auto; }
.artikel-beeld.breed {
  background: var(--paars-subtiel);
  border: 1px solid var(--paars-rand);
  border-radius: var(--rond-xl);
  padding: 30px;
}
.artikel-beeld.breed img { width: 420px; max-width: 90%; }
@media (max-width: 700px) {
  .artikel-beeld { margin-top: 32px; padding: 18px 0; }
  .artikel-beeld img { width: 150px; }
}
.artikel-knoppen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 44px; }
@media (max-width: 700px) {
  .artikel h2 { font-size: 23px; line-height: 32px; margin-top: 44px; padding-top: 26px; }
  .artikel-lede { font-size: 17px; line-height: 29px; }
}

/* ---- Wachtblok (nog in te vullen) --------------------------------------- */
.wacht {
  border: 2px dashed var(--lijn-sterk);
  border-radius: var(--rond-xl);
  padding: 44px;
  text-align: center;
  background: var(--vlak);
}
.wacht img { width: 64px; height: 64px; border-radius: 50%; margin-bottom: 16px; }
.wacht h3 { font-size: 20px; }
.wacht p { color: var(--tekst-steun); font-size: 14px; margin: 10px auto 0; max-width: 560px; line-height: 22px; }
.wacht-tag {
  display: inline-block;
  margin-top: 16px;
  background: var(--oranje-vlak);
  color: var(--oranje);
  border-radius: var(--rond-pil);
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 700;
}

/* ---- Veelgestelde vragen ------------------------------------------------ */
.faq { max-width: 820px; margin: 0 auto; }
details {
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  padding: 20px 22px;
  margin-bottom: 12px;
}
details[open] { border-color: var(--paars-rand); background: var(--paars-subtiel); }
summary {
  font-weight: 700;
  font-size: 15.5px;
  color: var(--kop);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
}
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; margin-left: auto; color: var(--paars); font-size: 20px; font-weight: 700; }
details[open] summary::after { content: "–"; }
details p { color: var(--tekst-zacht); font-size: 14px; line-height: 23px; margin-top: 14px; }

/* ---- Slot --------------------------------------------------------------- */
.slot {
  background: linear-gradient(150deg, #7b6bef, #5b49d6);
  color: #fff;
  border-radius: 28px;
  padding: 64px;
  text-align: center;
}
.slot img { width: 120px; height: 120px; object-fit: cover; border-radius: 50%; border: 4px solid rgba(255, 255, 255, .3); margin-bottom: 22px; }
/* Een volledige pose hoort niet in een rondje: dan snijd je zijn benen eraf. */
.slot img.slot-pose { width: auto; height: 220px; border-radius: 0; border: 0; }
.slot h2 { color: #fff; }
.slot p { color: #e4dfff; font-size: 16px; margin: 16px auto 30px; max-width: 520px; }
.slot .knop-primair { background: #fff; color: var(--paars); }
.slot .knop-primair:hover { background: #f2f0ff; }
.slot .knop-tweede { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); }

/* ---- Formulieren -------------------------------------------------------- */
.form-wrap {
  max-width: 520px;
  margin: 0 auto;
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--rond-xl);
  padding: 36px;
  box-shadow: var(--schaduw);
}
.form-kop { text-align: center; margin-bottom: 26px; }
.form-onder { text-align: center; margin-top: 20px; font-size: 13.5px; color: var(--tekst-steun); }
label { display: block; margin-bottom: 16px; font-size: 13px; font-weight: 700; color: var(--kop); }
input, select, textarea {
  width: 100%;
  border: 1px solid var(--lijn-sterk);
  border-radius: var(--rond-s);
  padding: 12px 14px;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--tekst);
  background: var(--wit);
  margin-top: 6px;
  font-weight: 500;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--paars);
  box-shadow: 0 0 0 3px var(--paars-zacht);
}
textarea { min-height: 110px; resize: vertical; }
.veld-hint { font-size: 12px; color: var(--tekst-zwak); margin-top: 6px; font-weight: 500; }

.melding { border-radius: var(--rond); padding: 13px 16px; font-size: 14px; margin-bottom: 18px; }
.melding-fout { background: var(--rood-vlak); color: var(--rood); }
.melding-goed { background: var(--groen-vlak); color: var(--groen); }
.melding-info { background: var(--blauw-vlak); color: var(--blauw); }

/* ---- Voettekst ---------------------------------------------------------- */
.footer { background: var(--vlak); padding: 64px 0 32px; border-top: 1px solid var(--lijn); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; }
.footer-logo {
  display: flex;
  align-items: center;
  gap: 11px;
  font-weight: 800;
  font-size: 20px;
  color: var(--paars);
}
.footer-logo img { width: 42px; height: 42px; border-radius: 50%; }
.footer-grid > div > p { color: var(--tekst-steun); font-size: 13.5px; line-height: 22px; margin-top: 14px; max-width: 320px; }
.footer-grid a { display: block; font-size: 14px; color: var(--tekst-zacht); padding: 5px 0; }
.footer-grid a:hover { color: var(--paars); }
.footer-onder {
  border-top: 1px solid var(--lijn);
  margin-top: 40px;
  padding-top: 24px;
  display: flex;
  gap: 16px;
  font-size: 12.5px;
  color: var(--tekst-zwak);
  flex-wrap: wrap;
}
.footer-onder span:last-child { margin-left: auto; }

/* ---- Smaller scherm ----------------------------------------------------- */
@media (max-width: 1100px) {
  .hero-grid, .probleem, .brief, .weekplan, .verhaal { grid-template-columns: 1fr; }
  .stappen, .raster, .prijs-raster, .footer-grid { grid-template-columns: repeat(2, 1fr); }
  h1 { font-size: 44px; line-height: 54px; }
  .nav-links { gap: 16px; }
  .hero-beeld { min-height: 540px; }
}

@media (max-width: 720px) {
  section { padding: 64px 0; }
  .wrap, .nav-inner { padding: 0 20px; }
  .stappen, .raster, .prijs-raster, .footer-grid { grid-template-columns: 1fr; }
  h1 { font-size: 34px; line-height: 44px; }
  h2, .sectie-kop h2 { font-size: 28px; line-height: 38px; }

  /* Mobiel menu: toon de hamburger, en maak van .nav-links een uitklappaneel
     onder de balk (verborgen tot .open, gezet door assets/site.js). Alle links
     staan er nu in — óók Home/Over/Prijzen/Contact, die vroeger simpelweg
     verborgen werden zonder alternatief (zie audit SITE-02). */
  .nav-toggle { display: flex; }
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 10px 20px 18px;
    background: var(--wit);
    border-bottom: 1px solid var(--lijn);
    box-shadow: 0 14px 30px rgba(23, 23, 42, .12);
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 4px; font-size: 16px; }
  .nav-links .knop { align-self: flex-start; margin-top: 6px; }
  .taalkiezer-houder { padding: 6px 4px; }

  .hero-beeld { display: none; }
  .slot { padding: 40px 24px; }
  .footer-onder span:last-child { margin-left: 0; }
}

@media (max-width: 460px) {
  /* Logo, taalkiezer, inloggen en de knop staan op deze breedte op 16 px van
     elkaar. Dat past net, maar het oogt geklemd — een kleiner logo geeft de
     rest lucht zonder dat er iets uit de balk hoeft. */
  .nav-logo { font-size: 19px; gap: 8px; }
  .nav-logo img { width: 34px; height: 34px; }
}

/* "Ga naar de inhoud"-link (toegankelijkheid): onzichtbaar tot hij focus
   krijgt met Tab — dan verschijnt hij bovenaan, zodat wie met het toetsenbord
   werkt niet eerst de hele navigatie door hoeft. */
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  background: var(--paars);
  color: #fff;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 600;
  transition: top .15s ease;
}
.skip-link:focus-visible { top: 12px; }