/* Gekopieerd uit NorthByte Lab, effect E406 (lab/effecten/E406-particulier-of-zakelijk, 04-10-2026). */
/* ==========================================================================
   E406 · Particulier of zakelijk met meeschuivende velden
   Een schakelaar met een glijdende pil bovenaan het formulier. Kies je een
   andere stand, dan rekt de pil even mee, verdwijnen de velden die niet meer
   gelden en schuiven de nieuwe velden rustig in. Onder de motorkap gewone
   radioknoppen en fieldsets. Alleen transform en opacity bewegen.
   Instellen op .e406 met CSS-variabelen:
     --e406-accent   kleur van de pil                 (standaard #0e7490)
     --e406-baan     achtergrond van de schakelaar     (standaard #e6eef0)
     --e406-duur     duur van de pil                   (standaard 380ms)
   Markeer velden met data-e406-voor="zakelijk" (of een andere waarde van de schakelaar).
   ========================================================================== */

.e406 { display: grid; gap: 18px; }
.e406-schakel { margin: 0; padding: 0; border: 0; min-width: 0; }
.e406-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.e406-baan {
  position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  padding: 5px; border-radius: 999px; background: var(--e406-baan, #e6eef0);
}
.e406-pil {
  position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 5px;
  width: calc((100% - 10px) / var(--e406-n, 2));
  transform: translate3d(calc(var(--e406-i, 0) * 100%), 0, 0);
}
.e406-pil-vorm { display: block; width: 100%; height: 100%; border-radius: 999px; background: var(--e406-accent, #0e7490); }
.e406-baan label { position: relative; z-index: 1; display: block; cursor: pointer; }
.e406-baan input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.e406-baan label span {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 14px; border-radius: 999px;
  font-weight: 600; font-size: 16px; text-align: center;
}
.e406-baan label span svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.e406-baan input:checked + span { color: var(--e406-op-accent, #fff); }
.e406-baan input:focus-visible + span { outline: 2px solid var(--e406-accent, #0e7490); outline-offset: 4px; }
/* Zonder JavaScript zet :has() de pil op de goede plek */
html:not(.js) .e406-baan:has(label:nth-of-type(2) input:checked) .e406-pil { transform: translate3d(100%, 0, 0); }
html:not(.js) .e406-baan:has(label:nth-of-type(3) input:checked) .e406-pil { transform: translate3d(200%, 0, 0); }
@supports not selector(:has(*)) {
  html:not(.js) .e406-pil { display: none; }
  html:not(.js) .e406-baan input:checked + span { background: var(--e406-accent, #0e7490); }
}

.e406-deel { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 14px; }
.e406-deel[hidden] { display: none; }
.e406-deel > legend { padding: 0; margin-bottom: 4px; font-weight: 700; font-size: 17px; }
.e406-velden { display: grid; gap: 14px; }
@media (min-width: 600px) { .e406-velden { grid-template-columns: 1fr 1fr; } .e406-breed { grid-column: 1 / -1; } }
.e406-veld label { display: block; margin-bottom: 5px; font-size: 14px; font-weight: 600; }
.e406-veld input, .e406-veld select {
  display: block; width: 100%; min-height: 48px; padding: 10px 12px; margin: 0; border-radius: 10px;
  border: 1.5px solid var(--e406-lijn, rgba(10, 40, 48, .16)); background: #fff; color: inherit;
  font: inherit; font-size: max(16px, 1rem);
}
.e406-veld input:focus, .e406-veld select:focus { outline: 2px solid var(--e406-accent, #0e7490); outline-offset: 1px; }
.e406-veld input[aria-invalid="true"] { border-color: var(--e406-fout, #b42318); }
.e406-fout { margin: 6px 0 0; font-size: 14px; color: var(--e406-fout, #b42318); }
.e406-fout:empty { display: none; }
.e406-hint { margin: 5px 0 0; font-size: 13px; color: var(--e406-zacht, #55686c); }

.e406-knop { justify-self: start; min-height: 50px; padding: 0 26px; border: 0; border-radius: 999px; background: var(--e406-accent, #0e7490); color: #fff; font: inherit; font-weight: 700; font-size: 16px; cursor: pointer; }
.e406-knop:focus-visible { outline: 2px solid var(--e406-accent, #0e7490); outline-offset: 3px; }
.e406-status { margin: 0; line-height: 1.5; }
.e406-status:empty { display: none; }
/* Wisselende tekst (kop of knop) per stand: zonder JavaScript staat de eerste */
.js [data-e406-tekst][hidden] { display: none; }

@media (prefers-reduced-motion: no-preference) {
  html:not([data-rm]) .e406-pil { transition: transform var(--e406-duur, 380ms) cubic-bezier(.5, 0, .2, 1); }
  html:not([data-rm]) .e406-pil.e406-rek .e406-pil-vorm { animation: e406-rek var(--e406-duur, 380ms) cubic-bezier(.5, 0, .2, 1); }
  html:not([data-rm]) .e406-deel.e406-in > * { animation: e406-in .45s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 45ms + 60ms); }
  html:not([data-rm]) [data-e406-tekst].e406-in { animation: e406-tekst .35s ease both; }
}
@keyframes e406-rek { 0% { transform: scaleX(1); } 45% { transform: scaleX(1.18); } 100% { transform: scaleX(1); } }
@keyframes e406-in { from { opacity: 0; transform: translate3d(0, -8px, 0); } to { opacity: 1; transform: none; } }
@keyframes e406-tekst { from { opacity: 0; transform: translate3d(0, 6px, 0); } to { opacity: 1; transform: none; } }