/* ============================================================================
   Uitbouw-configurator

   Bouwt volledig op de bestaande huisstijlvariabelen: geen nieuwe kleuren,
   geen nieuwe lettertypen. Blauw (--accent) markeert een gemaakte keuze,
   oranje (--orange) is voorbehouden aan badges en de verzendknop, precies
   zoals de rest van de site die kleuren gebruikt.

   De pagina werkt zonder JavaScript. Alle :checked-styling hieronder komt
   van echte radio- en checkboxvelden, niet van een klasse die JS toevoegt.
   ========================================================================= */

.cfg-body {
  --cfg-donker:   var(--_colors---color--dark, #1f1915);
  --cfg-licht:    var(--_colors---color--light, #fffdf6);
  --cfg-vlak:     var(--_colors---color--bg-1, #fcfaf5);
  --cfg-zijvlak:  var(--_colors---color--bg-3, #eff9fe);
  --cfg-accent:   var(--_colors---color--accent, #189be9);
  --cfg-oranje:   var(--_colors---color--orange, #ff7600);
  --cfg-lijn:     var(--_colors---color--dark-16, #1f191529);
  --cfg-zacht:    var(--_colors---color--dark-64, #1f1915a3);
  --cfg-ronding:  var(--radius--16, 16px);
  --cfg-curve:    cubic-bezier(.22, .61, .36, 1);
  --cfg-zij:      340px;
  --cfg-spoor:    82px;
  background: var(--cfg-licht);
}

/* -------------------------------------------------------------- raamwerk */
.cfg {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--cfg-zij);
  align-items: stretch;
  /* Een stap hoort het scherm te vullen: anders schuift de footer mee in
     beeld en lijkt de configurator halverwege op te houden. */
  min-height: calc(100vh - var(--cfg-spoor));
}

.cfg__kolom {
  padding: clamp(28px, 4vw, 56px) clamp(20px, 4vw, 64px) calc(var(--cfg-spoor) + 40px);
  max-width: 920px;
  margin-inline: auto;
  width: 100%;
  /* Bovenaan uitlijnen, niet centreren. Centreren zag er goed uit op een
     schermhoogte van 900px, maar op een hoog scherm duwde het de vraag
     honderden pixels naar beneden — en bij elke stapwissel opnieuw. De
     vraag hoort altijd op dezelfde plek te staan. */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Eén formulier over alle stappen: de keuzes reizen zo vanzelf mee naar
   Netlify, zonder dat JS ze hoeft te verzamelen. */
.cfg-form { display: contents; }

.cfg-honeypot { position: absolute; left: -9999px; }

/* ---------------------------------------------------------------- stappen */
/* Eén stap tegelijk. Zonder JavaScript staan ze allemaal onder elkaar en
   werkt het als één lang formulier; JS zet [hidden] op alles behalve de
   huidige stap. Zo blijft de pagina bruikbaar als het script uitvalt. */
.cfg-stap {
  padding-block: clamp(32px, 4vw, 56px);
  /* Ruimte voor de navigatiebalk wanneer we een stap in beeld scrollen. */
  scroll-margin-top: 24px;
}
.cfg-stap[hidden] { display: none; }
.cfg-form:not([data-actief]) .cfg-stap + .cfg-stap {
  border-top: 1px solid var(--cfg-lijn);
}
/* De binnenkomst van een nieuwe stap: hun curve, kort gehouden. */
.cfg-form[data-actief] .cfg-stap:not([hidden]) {
  animation: cfg-in .42s var(--cfg-curve) both;
}
@keyframes cfg-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.cfg-stap__veld { border: 0; margin: 0; padding: 0; min-width: 0; }
.cfg-stap__legenda { display: block; width: 100%; padding: 0; }

.cfg-stap__nummer {
  display: block;
  font-family: var(--font--secondary, sans-serif);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cfg-accent);
  margin-bottom: 10px;
}

.cfg-stap__vraag {
  display: block;
  font-family: var(--font--main, sans-serif);
  font-size: clamp(26px, 2.6vw, 38px);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -.015em;
  color: var(--cfg-donker);
  text-wrap: balance;
  margin: 0;
}

.cfg-stap__hint {
  display: block;
  font-family: var(--font--secondary, sans-serif);
  font-size: 15px;
  line-height: 1.5;
  color: var(--cfg-zacht);
  max-width: 62ch;
  margin-top: 10px;
}

.cfg-stap__meerkeuze {
  font-family: var(--font--secondary, sans-serif);
  font-size: 12px;
  font-weight: 500;
  color: var(--cfg-accent);
  margin: 14px 0 0;
}

/* ------------------------------------------------------------ keuzekaarten */
.cfg-kaarten {
  display: grid;
  /* Vast op drie, niet auto-fill. Met auto-fill kreeg 768px vier kleine
     kaarten en 1024px er twee grote: hetzelfde raster voelde per scherm
     anders. Drie is ook het ritme van de referentie. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 18px);
  margin-top: clamp(20px, 2.4vw, 30px);
}

.cfg-kaart {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 22px;
  min-height: 168px;
  padding: 20px;
  border: 1px solid var(--cfg-lijn);
  border-radius: var(--cfg-ronding);
  background: #fff;
  cursor: pointer;
  transition: border-color .3s var(--cfg-curve),
              box-shadow .5s var(--cfg-curve),
              background-color .3s var(--cfg-curve);
}
.cfg-kaart:hover { box-shadow: 0 10px 30px -6px rgba(31, 25, 21, .12); }

/* Het echte invoerveld blijft bereikbaar voor toetsenbord en schermlezer,
   maar wordt niet getoond: de kaart zelf is de knop. */
.cfg-kaart__invoer {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}

.cfg-kaart:has(.cfg-kaart__invoer:focus-visible) {
  outline: 2px solid var(--cfg-accent);
  outline-offset: 3px;
}

.cfg-kaart:has(.cfg-kaart__invoer:checked) {
  border-color: var(--cfg-accent);
  box-shadow: 0 0 0 1px var(--cfg-accent) inset;
}

.cfg-kaart__beeld {
  width: 100%;
  max-width: 104px;
  height: auto;
  color: var(--cfg-accent);
  flex: none;
}

.cfg-kaart__label {
  font-family: var(--font--main, sans-serif);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--cfg-donker);
}
.cfg-kaart__eenheid {
  font-size: 11px;
  font-weight: 500;
  margin-left: 1px;
  color: var(--cfg-zacht);
  top: -.5em;
}

/* Badges steken half over de bovenrand, zoals in de referentie. */
.cfg-kaart__vanaf,
.cfg-kaart__badge {
  position: absolute;
  top: -10px;
  padding: 3px 9px;
  border-radius: 100vw;
  font-family: var(--font--secondary, sans-serif);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
}
.cfg-kaart__vanaf {
  right: 14px;
  background: var(--cfg-zijvlak);
  color: var(--_colors---color--blue-2, #005aa7);
  border: 1px solid #cbe8f8;
}
.cfg-kaart__badge {
  left: 14px;
  background: var(--cfg-oranje);
  color: #fff;
}

.cfg-kaart__vink {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 22px; height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--cfg-accent);
  color: #fff;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .3s var(--cfg-curve), transform .3s var(--cfg-curve);
}
.cfg-kaart__vink svg { width: 14px; height: 14px; }
.cfg-kaart:has(.cfg-kaart__invoer:checked) .cfg-kaart__vink {
  opacity: 1;
  transform: scale(1);
}

/* ------------------------------------------------------------------ intro */
.cfg-stap--intro { border: 0; padding-top: clamp(28px, 4vw, 56px); }

.cfg-intro__boven {
  font-family: var(--font--secondary, sans-serif);
  font-size: 16px;
  color: var(--cfg-zacht);
  margin: 0 0 10px;
}
.cfg-intro__kop {
  font-family: var(--font--main, sans-serif);
  font-size: clamp(40px, 5.6vw, 72px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.02em;
  color: var(--cfg-donker);
  margin: 0;
  text-wrap: balance;
}
.cfg-intro__lead {
  font-family: var(--font--secondary, sans-serif);
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.55;
  color: var(--cfg-zacht);
  max-width: 46ch;
  margin: 18px 0 0;
}
.cfg-intro__info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font--secondary, sans-serif);
  font-size: 14px;
  color: var(--cfg-zacht);
  margin: 22px 0 0;
}
.cfg-punt {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cfg-accent);
  flex: none;
}

/* --------------------------------------------------------------- knoppen */
.cfg-start, .cfg-verzend, .cfg-volgende {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 100vw;
  padding: 15px 26px;
  font-family: var(--font--secondary, sans-serif);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .3s cubic-bezier(.4, 0, .2, 1),
              color .3s cubic-bezier(.4, 0, .2, 1),
              box-shadow .5s var(--cfg-curve);
}
.cfg-start { margin-top: 30px; background: var(--cfg-donker); color: var(--cfg-licht); }
.cfg-start:hover { background: #2e251f; box-shadow: 0 10px 26px -8px rgba(31, 25, 21, .5); }
.cfg-start strong { font-weight: 600; }

.cfg-verzend { margin-top: 26px; background: var(--cfg-oranje); color: #fff; font-weight: 600; }
.cfg-verzend:hover { background: #e66a00; box-shadow: 0 10px 26px -8px rgba(255, 118, 0, .5); }
.cfg-verzend[disabled] { opacity: .55; cursor: progress; }

.cfg-volgende {
  margin-top: 26px;
  background: var(--cfg-donker);
  color: var(--cfg-licht);
}
.cfg-volgende:hover { background: #2e251f; }

/* -------------------------------------------------------------- slotstap */
.cfg-velden {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 26px;
}
.cfg-veld { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.cfg-veld--breed { grid-column: 1 / -1; margin-top: 16px; }
.cfg-veld__label {
  font-family: var(--font--secondary, sans-serif);
  font-size: 13px;
  font-weight: 500;
  color: var(--cfg-zacht);
}
.cfg-veld__label abbr { text-decoration: none; color: var(--cfg-oranje); }
.cfg-veld__invoer {
  font-family: var(--font--secondary, sans-serif);
  font-size: 16px;
  color: var(--cfg-donker);
  background: #fff;
  border: 1px solid var(--cfg-lijn);
  border-radius: var(--radius--10, 10px);
  padding: 13px 14px;
  width: 100%;
  transition: border-color .3s cubic-bezier(.4, 0, .2, 1),
              box-shadow .3s cubic-bezier(.4, 0, .2, 1);
}
.cfg-veld__invoer:focus {
  outline: 0;
  border-color: var(--cfg-accent);
  box-shadow: 0 0 0 3px #189be92e;
}
.cfg-veld__invoer:user-invalid {
  border-color: var(--_colors---color--red, #fa4149);
}
textarea.cfg-veld__invoer { resize: vertical; min-height: 84px; }

.cfg-samenvatting {
  margin-top: 26px;
  padding: 20px 22px;
  background: var(--cfg-vlak);
  border: 1px solid var(--cfg-lijn);
  border-radius: var(--cfg-ronding);
}
.cfg-samenvatting__kop {
  font-family: var(--font--main, sans-serif);
  letter-spacing: -.01em;
  font-size: 17px;
  font-weight: 600;
  color: var(--cfg-donker);
  margin: 0 0 12px;
}
.cfg-samenvatting__lijst {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 7px 18px;
  margin: 0;
  font-family: var(--font--secondary, sans-serif);
  font-size: 14px;
}
.cfg-samenvatting__lijst dt { color: var(--cfg-zacht); }
.cfg-samenvatting__lijst dd { margin: 0; color: var(--cfg-donker); font-weight: 500; }

.cfg-klein {
  font-family: var(--font--secondary, sans-serif);
  font-size: 13px;
  color: var(--cfg-zacht);
  margin: 14px 0 0;
}

/* ------------------------------------------------------------- zijkolom */
.cfg-zij {
  background: var(--cfg-zijvlak);
  align-self: stretch;
  min-height: 100%;
  padding: clamp(28px, 3vw, 44px) 28px calc(var(--cfg-spoor) + 32px);
}
.cfg-zij__binnen { position: sticky; top: 96px; }

.cfg-zij__bewijs {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font--secondary, sans-serif);
  font-size: 12px;
  color: var(--cfg-zacht);
  margin: 0 0 14px;
}
.cfg-zij__bewijs strong { color: var(--cfg-donker); font-weight: 600; }

.cfg-zij__kop {
  font-family: var(--font--main, sans-serif);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.2;
  /* De site zet -2px op koppen. Dat is bedoeld voor 64px-koppen; op 21px
     plakken de woorden aan elkaar. Hier schaalt het mee met de grootte. */
  letter-spacing: -.01em;
  color: var(--cfg-donker);
  margin: 0 0 6px;
}

.cfg-overzicht__groep { border-top: 1px solid #cfe6f4; }
.cfg-overzicht__kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 15px 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font--main, sans-serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--cfg-donker);
  text-align: left;
}
.cfg-overzicht__teken {
  position: relative;
  width: 13px; height: 13px;
  flex: none;
}
.cfg-overzicht__teken::before,
.cfg-overzicht__teken::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1.5px;
  background: var(--cfg-donker);
  transition: transform .3s var(--cfg-curve);
}
.cfg-overzicht__teken::after { transform: rotate(90deg); }
.cfg-overzicht__kop[aria-expanded="true"] .cfg-overzicht__teken::after {
  transform: rotate(0deg);
}

.cfg-overzicht__lijst { padding-bottom: 12px; }
.cfg-overzicht__lijst[hidden] { display: none; }
.cfg-overzicht__regel {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 7px 0;
  font-family: var(--font--secondary, sans-serif);
  font-size: 14px;
}
.cfg-overzicht__naam { color: var(--cfg-zacht); }
.cfg-overzicht__waarde {
  color: var(--cfg-zacht);
  text-align: right;
  transition: color .3s var(--cfg-curve);
}
.cfg-overzicht__regel[data-gevuld] .cfg-overzicht__naam { color: var(--cfg-donker); }
.cfg-overzicht__regel[data-gevuld] .cfg-overzicht__waarde {
  color: var(--cfg-donker);
  font-weight: 500;
}

/* ---------------------------------------------------------- voortgangsspoor */
.cfg-spoor {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 40;
  background: #fffdf6f2;
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--cfg-lijn);
  padding: 14px clamp(16px, 4vw, 48px);
  transform: translateY(100%);
  transition: transform .5s var(--cfg-curve);
}
.cfg-spoor[data-zichtbaar] { transform: none; }

.cfg-balk {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(12px, 2vw, 28px);
  max-width: 1180px;
  margin: 0 auto;
}

.cfg-terug {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--cfg-lijn);
  border-radius: 100vw;
  background: transparent;
  padding: 10px 17px;
  font-family: var(--font--secondary, sans-serif);
  font-size: 14px;
  font-weight: 500;
  color: var(--cfg-donker);
  cursor: pointer;
  transition: background-color .3s cubic-bezier(.4, 0, .2, 1),
              border-color .3s cubic-bezier(.4, 0, .2, 1);
}
.cfg-terug:hover { background: #fff; border-color: var(--cfg-zacht); }
.cfg-terug[hidden] { display: none; }

/* Zelfde kleur als de knop in de inhoud. Bij een lange stap staat die knop
   onder de vouw; dan moet de balk het overnemen. Twee plekken, één
   herkenbare actie. */
.cfg-verder {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 100vw;
  background: var(--cfg-oranje);
  color: #fff;
  padding: 12px 24px;
  font-family: var(--font--secondary, sans-serif);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .3s cubic-bezier(.4, 0, .2, 1),
              box-shadow .5s var(--cfg-curve), opacity .3s var(--cfg-curve);
}
.cfg-verder { font-weight: 600; }
.cfg-verder:hover { background: #e66a00; box-shadow: 0 8px 22px -8px rgba(255, 118, 0, .5); }
/* Zelfde uitgeschakelde weergave als de knop in de inhoud: een bleke
   oranje knop ziet eruit als iets dat het niet doet, grijs als iets dat nog
   niet aan de beurt is. */
.cfg-verder[disabled] {
  background: var(--cfg-lijn);
  color: var(--cfg-zacht);
  cursor: not-allowed;
  box-shadow: none;
}
.cfg-verder[hidden] { display: none; }

.cfg-spoor__lijst > li { position: relative; display: grid; place-items: center; }
/* De stippellijn loopt van cel naar cel. Op de knop zelf zou 50% de
   knopbreedte zijn (62px), niet de celbreedte, en dan valt de lijn weg. */
.cfg-spoor__lijst > li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 12px;
  left: calc(50% + 20px);
  right: calc(-50% + 20px);
  border-top: 1.5px dashed #b9d9ec;
}
.cfg-spoor__lijst > li:has([data-af])::after { border-top-color: var(--cfg-accent); }

.cfg-spoor__lijst {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: start;
  gap: 0;
  /* Geen `margin: 0 auto`: op een rasteritem betekent auto-marge
     krimpen-naar-inhoud, en dan wordt het spoor 248px in plaats van de
     volle breedte. Centreren doet .cfg-balk zelf al. */
  width: 100%;
  max-width: 980px;
  justify-self: center;
  padding: 0;
  list-style: none;
  counter-reset: knoop;
}
.cfg-spoor__knoop {
  position: relative;
  display: flex;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-align: center;
}

.cfg-spoor__bol {
  width: 25px; height: 25px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid #b9d9ec;
  background: var(--cfg-licht);
  font-family: var(--font--secondary, sans-serif);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;            /* anders zakt het cijfer met de regelhoogte uit het midden */
  box-sizing: border-box;
  color: var(--cfg-zacht);
  transition: background-color .3s var(--cfg-curve),
              border-color .3s var(--cfg-curve),
              color .3s var(--cfg-curve);
}
.cfg-spoor__knoop[data-nu] .cfg-spoor__bol,
.cfg-spoor__knoop[data-af] .cfg-spoor__bol {
  background: var(--cfg-accent);
  border-color: var(--cfg-accent);
  color: #fff;
}
.cfg-spoor__knoop[data-af] .cfg-spoor__bol { font-size: 0; }
/* Het vinkje als achtergrondbeeld, gecentreerd: een gedraaide rand-L stond
   zichtbaar linksboven uit het midden (07-09-2026). */
.cfg-spoor__knoop[data-af] .cfg-spoor__bol::after {
  content: "";
  width: 13px; height: 13px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.5l4 4 8-9'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cfg-spoor__naam {
  font-family: var(--font--secondary, sans-serif);
  font-size: 12px;
  color: var(--cfg-zacht);
}
/* Een afgeronde groep is aanklikbaar om naar terug te keren. */
.cfg-spoor__knoop[data-af] { cursor: pointer; }
.cfg-spoor__knoop[data-af]:hover .cfg-spoor__naam { color: var(--cfg-donker); }
.cfg-spoor__knoop:focus-visible { outline: 2px solid var(--cfg-accent); outline-offset: 4px; border-radius: 8px; }
.cfg-spoor__knoop[data-nu] .cfg-spoor__naam {
  color: var(--cfg-donker);
  font-weight: 500;
}

/* ------------------------------------------------------------------ melding */
.cfg-melding {
  position: fixed;
  left: 50%;
  bottom: calc(var(--cfg-spoor) + 18px);
  transform: translate(-50%, 14px);
  z-index: 60;
  max-width: min(92vw, 440px);
  padding: 13px 18px;
  border-radius: var(--radius--12, 12px);
  background: var(--cfg-donker);
  color: var(--cfg-licht);
  font-family: var(--font--secondary, sans-serif);
  font-size: 14px;
  line-height: 1.45;
  box-shadow: 0 14px 40px -10px rgba(31, 25, 21, .5);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--cfg-curve), transform .3s var(--cfg-curve);
}
.cfg-melding[data-zichtbaar] { opacity: 1; transform: translate(-50%, 0); }

/* --------------------------------------------------------------- mobiel */
@media (max-width: 991px) {
  .cfg-body { --cfg-spoor: 74px; }
  /* Twee pillen naast elkaar passen niet op een kaart van ~165px. De prijs
     zakt onder het label; de "Basisprijs"-pil blijft bovenaan staan. */
  .cfg-kaart__vanaf {
    position: static;
    align-self: flex-start;
    order: 3;
    margin-top: -14px;
    padding-inline: 0;
    background: none;
    border: 0;
    color: var(--_colors---color--blue-2, #005aa7);
  }
  .cfg-kaart { position: relative; }
  .cfg-kaart__label { order: 2; }
  .cfg-kaart__beeld { order: 1; }
  .cfg { grid-template-columns: minmax(0, 1fr); }
  /* Het overzicht hoort onder de stappen, niet ervoor: op een smal scherm
     is een lijst met louter "Geen" een slechte eerste indruk. */
  .cfg-zij { order: 2; padding-bottom: calc(var(--cfg-spoor) + 28px); }
  .cfg-zij__binnen { position: static; }
  .cfg-kaarten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Compacter dan op desktop: zes kaarten plus de doorgaan-knop moeten
     samen boven de vaste balk passen, anders staat de primaire actie bij
     de eerste aanblik half achter die balk. */
  .cfg-kaart { min-height: 126px; padding: 14px; gap: 10px; }
  .cfg-kaart__beeld { max-width: 68px; }
  .cfg-kaart__label { font-size: 15px; }
  .cfg-spoor__naam { font-size: 11px; }
  .cfg-balk { grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; }
  .cfg-terug span, .cfg-verder span { display: none; }
  .cfg-terug, .cfg-verder { padding: 11px 15px; }
}

@media (max-width: 479px) {
  .cfg-kaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cfg-deelvragen { grid-template-columns: minmax(0, 1fr); }
  /* Op een smal scherm moeten zes kaarten in drie rijen plus de knop nog
     boven de vaste balk passen. Elke rij die te hoog is kost drie keer. */
  .cfg-kaart { min-height: 118px; padding: 13px; gap: 9px; }
  .cfg-kaart__beeld { max-width: 62px; }
  .cfg-kaart__label { font-size: 14px; }
  .cfg-stap__hint { font-size: 14px; }
  .cfg-stap { padding-block: clamp(20px, 3vw, 32px); }
  .cfg-spoor__lijst > li:not(:last-child)::after { left: calc(50% + 16px); right: calc(-50% + 16px); }
}

@media (prefers-reduced-motion: reduce) {
  .cfg-kaart, .cfg-kaart__vink, .cfg-spoor, .cfg-melding,
  .cfg-start, .cfg-verzend, .cfg-volgende, .cfg-overzicht__teken::after {
    transition-duration: .01ms;
  }
  .cfg-body { scroll-behavior: auto; }
}

/* ------------------------------------------------------------ delen */
.cfg-deel { padding-top: 18px; border-top: 1px solid #cfe6f4; margin-top: 4px; }
.cfg-deel[hidden] { display: none; }
.cfg-deel__knop {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  justify-content: center;
  border: 1px solid #b9d9ec;
  border-radius: 100vw;
  background: #fff;
  padding: 11px 16px;
  font-family: var(--font--secondary, sans-serif);
  font-size: 14px;
  font-weight: 500;
  color: var(--cfg-donker);
  cursor: pointer;
  transition: background-color .3s cubic-bezier(.4, 0, .2, 1),
              border-color .3s cubic-bezier(.4, 0, .2, 1),
              box-shadow .5s var(--cfg-curve);
}
.cfg-deel__knop:hover {
  border-color: var(--cfg-accent);
  box-shadow: 0 8px 22px -8px rgba(24, 155, 233, .35);
}
.cfg-deel__uitleg {
  font-family: var(--font--secondary, sans-serif);
  font-size: 12px;
  line-height: 1.45;
  color: var(--cfg-zacht);
  margin: 10px 0 0;
}
.cfg-deel__link { margin-top: 10px; font-size: 13px; }

/* ------------------------------------------------------- na het verzenden */
.cfg-klaar { padding-block: clamp(48px, 6vw, 88px); max-width: 60ch; }
.cfg-klaar[hidden] { display: none; }
.cfg-klaar:focus { outline: none; }
.cfg-klaar__vink {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--cfg-accent);
  color: #fff;
  margin-bottom: 22px;
}
.cfg-klaar__vink svg { width: 26px; height: 26px; }
.cfg-klaar__kop {
  font-family: var(--font--main, sans-serif);
  letter-spacing: -.01em;
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 600;
  line-height: 1.1;
  color: var(--cfg-donker);
  margin: 0;
}
.cfg-klaar__tekst {
  font-family: var(--font--secondary, sans-serif);
  font-size: 16px;
  line-height: 1.55;
  color: var(--cfg-zacht);
  margin: 14px 0 0;
}
.cfg-klaar__tekst a { color: var(--cfg-donker); font-weight: 500; }
.cfg-klaar__overzicht {
  margin-top: 26px;
  padding: 20px 22px;
  background: var(--cfg-vlak);
  border: 1px solid var(--cfg-lijn);
  border-radius: var(--cfg-ronding);
}
.cfg-klaar__knoppen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
}
.cfg-klaar__knoppen .cfg-deel__knop { width: auto; }
.cfg-klaar__link {
  font-family: var(--font--secondary, sans-serif);
  font-size: 14px;
  font-weight: 500;
  color: var(--cfg-donker);
}

/* De regels in het overzicht zijn knoppen: klikken brengt je terug naar
   die vraag. Vandaar de vink, de hover en de focusring. */
.cfg-overzicht__regel {
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 8px;
  padding: 7px 6px;
  margin-inline: -6px;
  transition: background-color .3s var(--cfg-curve);
}
.cfg-overzicht__regel:hover { background: #ffffff9c; }
.cfg-overzicht__regel:focus-visible {
  outline: 2px solid var(--cfg-accent);
  outline-offset: 1px;
}
.cfg-overzicht__vink {
  display: grid;
  place-items: center;
  width: 15px; height: 15px;
  flex: none;
  border-radius: 50%;
  border: 1.4px solid #b9d9ec;
  color: transparent;
  transition: background-color .3s var(--cfg-curve),
              border-color .3s var(--cfg-curve), color .3s var(--cfg-curve);
}
.cfg-overzicht__vink svg { width: 10px; height: 10px; }
.cfg-overzicht__regel[data-gevuld] .cfg-overzicht__vink {
  background: var(--cfg-accent);
  border-color: var(--cfg-accent);
  color: #fff;
}
.cfg-overzicht__naam { flex: 1; }

/* De zwevende cookieknop staat hier in de weg: linksonder botst hij met de
   oranje doorgaan-knop, rechtsonder met de deelknop. Op deze pagina weg.
   Intrekken blijft mogelijk: de knop staat op alle andere pagina's, en de
   footer hieronder linkt naar het privacybeleid. */
.cfg-body #hrc-herroep { display: none !important; }

/* De cookiemelding staat onderaan en dekt op een telefoon de Volgende-knop
   af: een eerste bezoeker kan dan niet verder. Hij schuift hier boven de
   wizardbalk. */
.cfg-body .hrc {
  bottom: calc(var(--cfg-spoor) + 12px) !important;
}



/* Op de slotstap verhuist de primaire actie naar de vaste balk. De knop in
   het formulier blijft staan voor bezoekers zonder JavaScript; met JS is er
   er precies één zichtbare knop, en die staat altijd in beeld. */
.cfg-form[data-actief] .cfg-verzend[data-verborgen] { display: none; }
.cfg-verder--verzend { background: var(--cfg-oranje); color: #fff; font-weight: 600; }
.cfg-verder--verzend:hover { background: #e66a00; box-shadow: 0 8px 22px -8px rgba(255, 118, 0, .5); }

/* ---------------------------------------------- wat de uitbouw oplevert */
.cfg-waarde {
  margin-top: 18px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid #cfe6f4;
  border-radius: var(--radius--12, 12px);
}
.cfg-waarde[hidden] { display: none; }
.cfg-waarde__kop {
  font-family: var(--font--secondary, sans-serif);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cfg-accent);
  margin: 0 0 6px;
}
.cfg-waarde__regel {
  font-family: var(--font--secondary, sans-serif);
  font-size: 14px;
  line-height: 1.5;
  color: var(--cfg-donker);
  margin: 0;
}
.cfg-waarde__regel strong { font-weight: 600; }
.cfg-waarde__bron {
  font-family: var(--font--secondary, sans-serif);
  font-size: 11px;
  line-height: 1.45;
  color: var(--cfg-zacht);
  margin: 8px 0 0;
}
.cfg-waarde__bron a { color: var(--cfg-zacht); }

/* ------------------------------------------------------------ deelvragen */
/* Meerdere kleine keuzes onder één vraag. Keuzelijsten in plaats van
   kaarten: drie onderdelen maal acht kleuren zou 24 kaarten geven, en dan
   wordt scannen zoeken. */
.cfg-deelvragen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
  margin-top: clamp(20px, 2.4vw, 30px);
  max-width: 760px;
}
.cfg-deelvraag { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.cfg-deelvraag__keuze { cursor: pointer; }
/* Een gemaakte keuze is zichtbaar anders dan de standaardwaarde. */
.cfg-deelvraag__keuze:not(:has(option:first-child:checked)) {
  border-color: var(--cfg-accent);
  font-weight: 500;
}

/* ------------------------------------------------------- let-op-blokken */
/* Verschijnt bij een keuze die om een gesprek vraagt. De referentie doet dit
   bij een nokverhoging; hier bij een diepe uitbouw en bij een doorbraak over
   de volle gevel. Geen vergunningsregels: alleen wat wij dan doen. */
.cfg-letop {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 20px;
  padding: 15px 18px;
  max-width: 68ch;
  background: #fff8ef;
  border: 1px solid #ffd7ad;
  border-radius: var(--radius--12, 12px);
  animation: cfg-in .42s var(--cfg-curve) both;
}
.cfg-letop[hidden] { display: none; }
.cfg-letop__teken { color: var(--cfg-oranje); flex: none; margin-top: 1px; }
.cfg-letop__teken svg { width: 19px; height: 19px; display: block; }
.cfg-letop__tekst {
  font-family: var(--font--secondary, sans-serif);
  font-size: 14px;
  line-height: 1.5;
  color: var(--cfg-donker);
  margin: 0;
}
.cfg-letop__tekst strong { font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .cfg-letop { animation: none; }
}

/* ------------------------------------------------------- vanafprijs */
/* Staat boven de waardestijging: eerst wat het kost, dan wat het oplevert.
   Verschijnt pas als diepte en breedte allebei bekend zijn, want een uitbouw
   heeft twee maten. */
.cfg-prijs {
  margin-top: 18px;
  padding: 16px 18px;
  background: var(--cfg-donker);
  color: var(--cfg-licht);
  border-radius: var(--radius--12, 12px);
}
.cfg-prijs[hidden] { display: none; }
.cfg-prijs__kop {
  font-family: var(--font--secondary, sans-serif);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fffdf6a3;
  margin: 0 0 4px;
}
.cfg-prijs__bedrag {
  font-family: var(--font--main, sans-serif);
  font-size: 15px;
  color: #fffdf6a3;
  margin: 0;
}
.cfg-prijs__bedrag strong {
  display: block;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.015em;
  color: var(--cfg-licht);
}
.cfg-prijs__klein {
  font-family: var(--font--secondary, sans-serif);
  font-size: 11px;
  line-height: 1.45;
  color: #fffdf67a;
  margin: 8px 0 0;
}

/* Alleen voor schermlezers: uit beeld, maar niet display:none, want dan
   leest een schermlezer hem ook niet. */
.cfg-vwb {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------- doorgaan vanuit de inhoud */
/* De knop in de onderbalk is compact: op een telefoon is het alleen een
   pijltje, en dat nodigt niet uit. De primaire actie staat daarom in de
   inhoud zelf, direct onder de opties, in de accentkleur. */
.cfg-door {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: clamp(24px, 3vw, 34px);
  padding: 15px 30px;
  border: 0;
  border-radius: 100vw;
  background: var(--cfg-oranje);
  color: #fff;
  font-family: var(--font--secondary, sans-serif);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .3s cubic-bezier(.4, 0, .2, 1),
              box-shadow .5s var(--cfg-curve), opacity .3s var(--cfg-curve);
}
.cfg-door:hover {
  background: #e66a00;
  box-shadow: 0 10px 26px -8px rgba(255, 118, 0, .5);
}
.cfg-door:focus-visible { outline: 2px solid var(--cfg-donker); outline-offset: 3px; }
.cfg-door[disabled] {
  background: var(--cfg-lijn);
  color: var(--cfg-zacht);
  cursor: not-allowed;
  box-shadow: none;
}
.cfg-door__hint {
  font-family: var(--font--secondary, sans-serif);
  font-size: 13px;
  color: var(--cfg-zacht);
  margin: 10px 0 0;
}
.cfg-door__hint[hidden] { display: none; }

/* ------------------------------------------------- klein terugpijltje */
/* Linksboven, subtiel. De grote terugknop staat in de balk; dit is voor wie
   met de ogen linksboven zoekt, waar een terugknop hoort te zitten. */
.cfg-terugpijl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  margin-bottom: 14px;
  padding: 6px 12px 6px 8px;
  border: 0;
  border-radius: 100vw;
  background: transparent;
  color: var(--cfg-zacht);
  font-family: var(--font--secondary, sans-serif);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .3s cubic-bezier(.4, 0, .2, 1),
              color .3s cubic-bezier(.4, 0, .2, 1);
}
.cfg-terugpijl:hover { background: #1f19150f; color: var(--cfg-donker); }
.cfg-terugpijl:focus-visible { outline: 2px solid var(--cfg-accent); outline-offset: 2px; }
.cfg-terugpijl[hidden] { display: none; }

@media (max-width: 991px) {
  /* Op een telefoon over de volle breedte: dat is de duidelijkste vorm. */
  .cfg-door { display: flex; width: 100%; margin-top: 18px; padding: 14px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .cfg-door, .cfg-terugpijl { transition-duration: .01ms; }
}

/* --------------------------------------------- maatveld voor grote maten */
/* De banden dekken het gewone geval; wie tien meter wil moet dat kunnen
   zeggen. Verschijnt bij de grootste keuze, samen met het let-op-blok. */
.cfg-maat {
  margin-top: 20px;
  max-width: 320px;
}
.cfg-maat[hidden] { display: none; }
.cfg-maat__rij {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}
.cfg-maat__invoer { max-width: 130px; }
.cfg-maat__eenheid {
  font-family: var(--font--secondary, sans-serif);
  font-size: 15px;
  color: var(--cfg-zacht);
}
.cfg-maat__hint {
  font-family: var(--font--secondary, sans-serif);
  font-size: 12px;
  line-height: 1.45;
  color: var(--cfg-zacht);
  margin: 8px 0 0;
}