/* ==========================================================================
   Ljochtwei coaching (verzonnen coachpraktijk) · voorbeeld van NorthByte
   Typografie: Petrona (koppen, met cursief accent) en Onest (tekst).
   Kleuren: linnen, zand, aubergine, abrikoos en salie. Licht en rustig.
   Vormtaal: een boog als raam naar buiten, een opkomende zon, een slingerend pad.
   Beweging: alleen transform en opacity. Alles uit bij reduced motion.
   ========================================================================== */

@font-face { font-family: "Petrona"; font-style: normal; font-weight: 300 800; font-display: swap; src: url(fonts/petrona-var-latin.woff2) format("woff2"); }
@font-face { font-family: "Petrona"; font-style: italic; font-weight: 300 800; font-display: swap; src: url(fonts/petrona-var-italic-latin.woff2) format("woff2"); }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 300 800; font-display: swap; src: url(fonts/onest-var-latin.woff2) format("woff2"); }

:root {
  --linnen: #f7f2ec;
  --zand: #efe6da;
  --zand-2: #e5d8c7;
  --wit: #fffdfa;
  --inkt: #2b2233;
  --inkt-zacht: #675d6e;
  --aubergine: #3d2b4f;
  --aubergine-2: #5d4377;
  --aubergine-3: #4a365f;
  --abrikoos: #ee9a6f;
  --abrikoos-donker: #b8582c;
  --abrikoos-licht: #fbe3d4;
  --salie: #8faa89;
  --salie-donker: #4f6b4a;
  --salie-licht: #e4ece0;
  --lijn: rgba(43, 34, 51, .14);
  --lijn-licht: rgba(247, 242, 236, .18);
  --kop: "Petrona", Georgia, "Times New Roman", serif;
  --tekst: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --zacht: cubic-bezier(.22, 1, .36, 1);
  --rand: 16px;
  --kop-h: 66px;
  --vb-scroll-top: 84px;
  color-scheme: light;
}
@media (min-width: 760px) { :root { --rand: 32px; --kop-h: 78px; } }

html { background: var(--linnen); }
body { background: var(--linnen); color: var(--inkt); font: 400 17px/1.65 var(--tekst); }
::selection { background: var(--abrikoos-licht); color: var(--aubergine); }

.rand { width: 100%; max-width: 1220px; margin: 0 auto; padding: 0 var(--rand); }
.rand-smal { max-width: 900px; }

h1, h2, h3 { font-family: var(--kop); font-weight: 500; line-height: 1.06; letter-spacing: -.015em; color: var(--aubergine); }
h2 { font-size: clamp(2.3rem, 4.8vw, 3.8rem); }
h3 { font-size: 1.6rem; line-height: 1.15; }
h1 em, h2 em, h3 em { font-style: italic; font-weight: 400; color: var(--aubergine-2); background: linear-gradient(transparent 64%, rgba(238, 154, 111, .38) 64%, rgba(238, 154, 111, .38) 90%, transparent 90%); padding: 0 .04em; }

.label { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 16px; font: 600 13px/1.3 var(--tekst); letter-spacing: .14em; text-transform: uppercase; color: var(--abrikoos-donker); }
.label::before { content: ""; width: 18px; height: 9px; flex: none; border-radius: 18px 18px 0 0; background: var(--abrikoos); }

.sectie-kop { max-width: 700px; margin-bottom: 40px; }
.sectie-kop-midden { margin-inline: auto; text-align: center; }
.sectie-kop-midden .label { justify-content: center; }
.sectie-intro { margin-top: 18px; font-size: 1.1rem; color: var(--inkt-zacht); max-width: 600px; }
.sectie-kop-midden .sectie-intro { margin-inline: auto; }
.klein { font-size: 14px; color: var(--inkt-zacht); }

/* ----- Knoppen ----- */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 26px; border-radius: 999px; border: 1.5px solid var(--aubergine);
  background: var(--aubergine); color: var(--linnen); font: 500 16px/1.2 var(--tekst); text-decoration: none; text-align: center;
  transition: background-color .25s, color .25s, border-color .25s, transform .35s var(--zacht);
}
.knop:hover { background: var(--aubergine-2); border-color: var(--aubergine-2); transform: translateY(-2px); }
.knop:active { transform: none; }
.knop-lijn { background: transparent; color: var(--aubergine); }
.knop-lijn:hover { background: var(--aubergine); color: var(--linnen); border-color: var(--aubergine); }
.knop-licht { background: var(--abrikoos); border-color: var(--abrikoos); color: var(--aubergine); }
.knop-licht:hover { background: var(--abrikoos-licht); border-color: var(--abrikoos-licht); color: var(--aubergine); }
.knop-vol { width: 100%; }
.knop-klein { min-height: 44px; padding: 0 20px; font-size: 15px; }

/* ----- Kop ----- */
.kop { position: sticky; top: 0; z-index: 50; background: rgba(247, 242, 236, .97); border-bottom: 1px solid transparent; transition: border-color .3s; }
.kop.is-gescrold { border-bottom-color: var(--lijn); }
.kop-in { display: flex; align-items: center; gap: 26px; height: var(--kop-h); }
.logo { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; text-decoration: none; color: var(--aubergine); }
.logo-merk { width: 42px; height: 42px; flex: none; }
.logo-tekst { display: grid; line-height: 1; }
.logo-tekst b { font: 600 27px/1 var(--kop); letter-spacing: -.01em; }
.logo-tekst small { margin-top: 4px; font: 500 10.5px/1.2 var(--tekst); letter-spacing: .2em; text-transform: uppercase; color: var(--inkt-zacht); }
.menu { display: flex; align-items: center; gap: 28px; font-size: 15.5px; font-weight: 500; }
.menu a { position: relative; text-decoration: none; color: var(--inkt); }
.menu a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; background: var(--abrikoos); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--zacht); }
.menu a:hover::after { transform: scaleX(1); transform-origin: left; }
.menu-knop { display: none; width: 44px; height: 44px; border: 0; background: transparent; padding: 0; position: relative; }
.menu-knop i { position: absolute; left: 11px; right: 11px; height: 2px; border-radius: 2px; background: var(--aubergine); transition: transform .35s var(--zacht); }
.menu-knop i:first-of-type { top: 18px; }
.menu-knop i:last-of-type { top: 25px; }
.menu-knop[aria-expanded="true"] i:first-of-type { transform: translateY(3.5px) rotate(45deg); }
.menu-knop[aria-expanded="true"] i:last-of-type { transform: translateY(-3.5px) rotate(-45deg); }
@media (max-width: 939px) {
  .kop-in { gap: 8px; }
  .js .menu-knop { display: block; }
  .js .menu {
    position: fixed; left: 0; right: 0; top: var(--kop-h); z-index: 49;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px var(--rand) 24px; background: var(--linnen); border-bottom: 1px solid var(--lijn);
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: transform .35s var(--zacht), opacity .25s, visibility 0s linear .35s;
  }
  .js .menu.is-open { transform: none; opacity: 1; visibility: visible; transition: transform .35s var(--zacht), opacity .25s, visibility 0s; }
  .js .menu a { padding: 14px 0; border-bottom: 1px solid var(--lijn); font: 500 28px/1.2 var(--kop); color: var(--aubergine); }
  .js .menu a::after { display: none; }
  html:not(.js) .kop-in { flex-wrap: wrap; height: auto; padding: 12px 0; }
  html:not(.js) .menu { order: 3; width: 100%; flex-wrap: wrap; gap: 6px 18px; }
}
@media (max-width: 440px) { .logo-tekst small { display: none; } }

/* ----- Hero ----- */
.hero { padding: 56px 0 88px; overflow: hidden; }
.hero-in { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(2.8rem, 5.6vw, 4.9rem); line-height: 1.02; letter-spacing: -.02em; }
.hero-sub { margin-top: 22px; max-width: 540px; font-size: 1.16rem; color: var(--inkt-zacht); }
.hero-knoppen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-feiten { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 30px; font-size: 15px; color: var(--inkt-zacht); }
.hero-feiten li { display: inline-flex; align-items: center; gap: 8px; }
.hero-feiten li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--salie); }
.hero-beeld { position: relative; justify-self: center; width: min(100%, 470px); }
.zon { position: absolute; z-index: 0; width: 64%; aspect-ratio: 1; right: -14%; top: -7%; border-radius: 50%; background: radial-gradient(circle at 50% 50%, #f6b48f 0%, #f3c4a6 46%, rgba(247, 222, 204, .7) 64%, rgba(247, 242, 236, 0) 71%); }
.boog { position: relative; z-index: 1; aspect-ratio: 4 / 5; border-radius: 999px 999px 26px 26px; overflow: hidden; background: var(--zand); }
.boog img { width: 100%; height: 100%; object-fit: cover; }
.hero-plek {
  position: absolute; z-index: 2; left: -34px; bottom: 34px; display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-radius: 18px; background: var(--wit); border: 1px solid var(--lijn); color: var(--inkt); text-decoration: none;
  transition: transform .35s var(--zacht);
}
.hero-plek:hover { transform: translateY(-3px); }
.hero-plek span:last-child { display: grid; line-height: 1.3; }
.hero-plek small { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--inkt-zacht); }
.hero-plek b { font-weight: 600; font-size: 15.5px; color: var(--aubergine); }
.hero-plek-stip { position: relative; width: 12px; height: 12px; flex: none; border-radius: 50%; background: var(--salie); }
.hero-plek-stip::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--salie); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .hero-plek-stip::after { animation: puls 2.6s ease-out infinite; }
  @keyframes puls { 0% { transform: scale(.6); opacity: .9; } 80%, 100% { transform: scale(1.7); opacity: 0; } }
  .js .hero-tekst > * { animation: op 1s var(--zacht) both; }
  .js .hero-tekst > :nth-child(2) { animation-delay: .08s; }
  .js .hero-tekst > :nth-child(3) { animation-delay: .16s; }
  .js .hero-tekst > :nth-child(n+4) { animation-delay: .24s; }
  .js .boog { animation: boog-in 1.4s var(--zacht) both; }
  .js .zon { animation: zon-op 1.8s var(--zacht) .1s both; }
  .js .hero-plek { animation: op 1s var(--zacht) .6s both; }
  @keyframes op { from { opacity: 0; transform: translate3d(0, 22px, 0); } to { opacity: 1; transform: none; } }
  @keyframes boog-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
  @keyframes zon-op { from { opacity: 0; transform: translate3d(0, 40px, 0); } to { opacity: 1; transform: none; } }
}

/* ----- Herkenning (E060) ----- */
.herken { padding: 40px 0 104px; }
.herken-tekst { font: 400 clamp(1.6rem, 3.3vw, 2.55rem)/1.32 var(--kop); color: var(--aubergine); letter-spacing: -.01em; text-align: center; }
.herken-tekst em { font-style: italic; color: var(--abrikoos-donker); }
.e060-aan .e060-w { opacity: clamp(.2, calc((var(--e060-p, 0) * (var(--e060-n, 1) + 3) - var(--i, 0)) / 3), 1); }

/* ----- Check ----- */
.check { padding: 104px 0; background: var(--zand); }
.check-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 56px; align-items: start; }
.check .sectie-kop { margin-bottom: 0; position: sticky; top: calc(var(--kop-h) + 32px); }
.check-let { margin-top: 22px; padding: 14px 16px; border-left: 3px solid var(--salie); background: rgba(255, 253, 250, .55); border-radius: 0 12px 12px 0; font-size: 14.5px; color: var(--inkt-zacht); }
.quiz { position: relative; padding: 34px; border-radius: 30px; background: var(--wit); border: 1px solid var(--lijn); overflow: hidden; }
.quiz-kop { display: none; align-items: center; gap: 16px; margin-bottom: 26px; }
.js .quiz-kop { display: flex; }
.quiz-teller { flex: none; font-size: 14px; font-weight: 600; color: var(--inkt-zacht); }
.quiz-balk { position: relative; flex: 1; height: 6px; border-radius: 6px; background: var(--zand); overflow: hidden; }
.quiz-balk i { position: absolute; inset: 0; border-radius: 6px; background: var(--abrikoos); transform-origin: 0 50%; transform: scaleX(.125); transition: transform .5s var(--zacht); }
.vraag + .vraag { margin-top: 28px; }
.vraag legend { float: left; width: 100%; display: flex; gap: 14px; margin-bottom: 20px; font: 500 clamp(1.45rem, 2.6vw, 1.95rem)/1.2 var(--kop); color: var(--aubergine); letter-spacing: -.01em; }
.vraag legend + * { clear: both; }
.vraag-nr { flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; margin-top: 2px; border-radius: 50%; background: var(--abrikoos-licht); color: var(--abrikoos-donker); font: 600 15px/1 var(--tekst); }
.antwoorden { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.antwoorden label { position: relative; cursor: pointer; }
.antwoorden input { position: absolute; opacity: 0; }
.antwoorden span { display: grid; place-items: center; min-height: 58px; padding: 8px 10px; border: 1.5px solid var(--lijn); border-radius: 16px; background: var(--linnen); font-size: 15px; font-weight: 500; text-align: center; line-height: 1.25; transition: background-color .2s, border-color .2s, color .2s, transform .3s var(--zacht); }
.antwoorden label:hover span { border-color: var(--aubergine-2); }
.antwoorden input:checked + span { background: var(--aubergine); border-color: var(--aubergine); color: var(--linnen); }
.antwoorden input:focus-visible + span { outline: 3px solid var(--abrikoos); outline-offset: 2px; }
.quiz-nav { display: flex; gap: 10px; justify-content: space-between; margin-top: 30px; }
html:not(.js) .quiz-nav [data-quiz-terug], html:not(.js) .quiz-nav [data-quiz-verder], html:not(.js) .quiz-nav [data-quiz-klaar] { display: none; }
.quiz-nav [data-quiz-verder], .quiz-nav [data-quiz-klaar] { margin-left: auto; }
.quiz-nav button:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.quiz-zonder-js { margin-top: 24px; font-size: 14.5px; color: var(--inkt-zacht); }
.js .quiz-zonder-js { display: none; }
/* Met JavaScript: één vraag tegelijk (naar E401) */
.js .quiz .vraag { display: none; margin-top: 0; }
.js .quiz .vraag.is-actief { display: block; }
.js .quiz.is-klaar .vraag, .js .quiz.is-klaar .quiz-nav, .js .quiz.is-klaar .quiz-kop { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .quiz .vraag.is-actief { animation: vraag-in .45s var(--zacht) both; }
  .js .quiz .vraag.is-actief.van-links { animation-name: vraag-in-links; }
  @keyframes vraag-in { from { opacity: 0; transform: translate3d(36px, 0, 0); } to { opacity: 1; transform: none; } }
  @keyframes vraag-in-links { from { opacity: 0; transform: translate3d(-36px, 0, 0); } to { opacity: 1; transform: none; } }
  .uitkomst:not([hidden]) { animation: op .6s var(--zacht) both; }
}
.uitkomst:focus { outline: none; }
.uitkomst-label { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--abrikoos-donker); }
.uitkomst h3 { margin-top: 8px; font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.uitkomst-tekst { margin-top: 12px; color: var(--inkt-zacht); }
.meters { display: grid; gap: 16px; margin: 24px 0; padding: 20px; border-radius: 18px; background: var(--linnen); }
.meter p { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; font-size: 15px; }
.meter p span { font-weight: 600; }
.meter p b { font-weight: 500; color: var(--inkt-zacht); }
.meter-buis { position: relative; display: block; height: 12px; border-radius: 12px; background: var(--zand-2); overflow: hidden; }
.meter-buis i { position: absolute; inset: 0; border-radius: 12px; background: var(--salie); transform-origin: 0 50%; transform: scaleX(var(--w, 0)); transition: transform 1.1s var(--zacht) .2s; }
.meter + .meter .meter-buis i { background: var(--abrikoos); }
.uitkomst-advies { padding: 16px 18px; border-radius: 16px; background: var(--abrikoos-licht); font-size: 15.5px; }
.uitkomst-advies a { color: var(--aubergine); font-weight: 600; }
.uitkomst-knoppen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

/* ----- Trajecten ----- */
.trajecten { padding: 104px 0; }
.trajecten-kop { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; margin-bottom: 40px; }
.trajecten-kop .sectie-kop { margin-bottom: 0; }
.betaler { display: inline-flex; padding: 5px; border-radius: 999px; background: var(--zand); border: 1px solid var(--lijn); }
.betaler-knop { min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: transparent; font-weight: 500; font-size: 15px; color: var(--inkt); transition: background-color .25s, color .25s; }
.betaler-knop[aria-pressed="true"] { background: var(--aubergine); color: var(--linnen); }
.traject-rij { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.traject { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 30px 28px; border-radius: 26px; background: var(--wit); border: 1px solid var(--lijn); transition: transform .4s var(--zacht), border-color .3s; }
.traject:hover { transform: translateY(-4px); }
.traject-soort { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--salie-donker); }
.traject h3 { font-size: 2rem; }
.traject-zin { color: var(--inkt-zacht); }
.prijs { margin: 6px 0 4px; font-size: 14px; color: var(--inkt-zacht); }
.prijs b { display: block; font: 500 2.6rem/1.1 var(--kop); color: var(--aubergine); letter-spacing: -.02em; }
.traject-lijst { display: grid; gap: 8px; margin: 6px 0 18px; padding-top: 16px; border-top: 1px solid var(--lijn); font-size: 15.5px; }
.traject-lijst li { position: relative; padding-left: 26px; }
.traject-lijst li::before { content: ""; position: absolute; left: 0; top: .5em; width: 14px; height: 7px; border-radius: 14px 14px 0 0; background: var(--abrikoos); }
.traject .knop { margin-top: auto; }
.traject-licht { background: var(--aubergine); border-color: var(--aubergine); color: var(--linnen); }
.traject-licht h3, .traject-licht .prijs b { color: var(--linnen); }
.traject-licht .traject-zin, .traject-licht .prijs { color: rgba(247, 242, 236, .76); }
.traject-licht .traject-soort { color: var(--abrikoos); }
.traject-licht .traject-lijst { border-top-color: var(--lijn-licht); }
.traject-licht .knop { background: var(--abrikoos); border-color: var(--abrikoos); color: var(--aubergine); }
.traject-licht .knop:hover { background: var(--abrikoos-licht); border-color: var(--abrikoos-licht); }
.traject-past { position: absolute; top: -14px; left: 26px; padding: 5px 12px; border-radius: 999px; background: var(--salie-donker); color: var(--wit); font-size: 13px; font-weight: 600; }
.traject.is-advies { border-color: var(--salie-donker); border-width: 2px; }
.los-gesprek { margin-top: 26px; text-align: center; color: var(--inkt-zacht); }
.los-gesprek b { color: var(--aubergine); font-weight: 600; }
[data-prijs-btw] { white-space: nowrap; }

/* ----- Werkwijze (E357) ----- */
.werkwijze { padding: 104px 0 0; background: var(--wit); }
.e357 { --e357-cirkel: 58px; --e357-gat: 26px; --e357-stap: 600ms; display: grid; gap: var(--e357-gat); margin: 0 0 88px; padding: 0; list-style: none; counter-reset: e357; }
@media (min-width: 860px) { .e357 { grid-auto-flow: column; grid-auto-columns: 1fr; text-align: center; } }
.e357-stap { position: relative; display: grid; grid-template-columns: var(--e357-cirkel) 1fr; gap: 0 18px; align-content: start; counter-increment: e357; }
@media (min-width: 860px) { .e357-stap { grid-template-columns: 1fr; justify-items: center; gap: 18px; } }
.e357-cirkel { position: relative; z-index: 1; width: var(--e357-cirkel); height: var(--e357-cirkel); border-radius: 50%; border: 2px solid var(--aubergine); background: var(--wit); color: var(--aubergine); font: 600 22px/1 var(--kop); display: grid; place-items: center; }
.e357-cirkel::before { content: counter(e357); }
.e357-vulling { position: absolute; inset: -2px; border-radius: 50%; background: var(--aubergine); color: var(--linnen); display: grid; place-items: center; }
.e357-vulling::before { content: counter(e357); }
.e357-lijn { position: absolute; background: var(--zand-2); overflow: hidden; }
.e357-lijn::after { content: ""; position: absolute; inset: 0; background: var(--abrikoos); }
.e357-stap:last-child .e357-lijn { display: none; }
.e357-lijn { left: calc(var(--e357-cirkel) / 2 - 1px); width: 2px; top: var(--e357-cirkel); bottom: calc(var(--e357-gat) * -1); }
.e357-lijn::after { transform-origin: 50% 0; }
@media (min-width: 860px) {
  .e357-lijn { top: calc(var(--e357-cirkel) / 2 - 1px); bottom: auto; height: 2px; left: calc(50% + var(--e357-cirkel) / 2); width: calc(100% + var(--e357-gat) - var(--e357-cirkel)); }
  .e357-lijn::after { transform-origin: 0 50%; }
}
.e357-inhoud { padding-bottom: 6px; }
.e357-titel { margin: 12px 0 6px; font-size: 1.45rem; }
@media (min-width: 860px) { .e357-titel { margin-top: 0; } }
.e357-tekst { font-size: 15.5px; color: var(--inkt-zacht); max-width: 260px; }
@media (min-width: 860px) { .e357-tekst { margin-inline: auto; } }
.e357-duur { display: inline-block; margin-top: 12px; padding: 4px 12px; border-radius: 999px; background: var(--salie-licht); color: var(--salie-donker); font-size: 13px; font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
  .e357-klaar .e357-vulling { transform: scale(0); opacity: 0; }
  .e357-klaar .e357-lijn::after { transform: scaleY(0); }
  .e357-klaar .e357-inhoud { opacity: 0; transform: translate3d(0, 12px, 0); }
  @media (min-width: 860px) { .e357-klaar .e357-lijn::after { transform: scaleX(0); } }
  .e357-aan .e357-vulling { transform: none; opacity: 1; transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), opacity .2s ease; transition-delay: calc(var(--e357-i, 0) * var(--e357-stap)); }
  .e357-aan .e357-lijn::after { transform: none; transition: transform calc(var(--e357-stap) - 200ms) linear; transition-delay: calc(var(--e357-i, 0) * var(--e357-stap) + 200ms); }
  .e357-aan .e357-inhoud { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s var(--zacht); transition-delay: calc(var(--e357-i, 0) * var(--e357-stap) + 120ms); }
}
.pad-band { position: relative; margin: 0; }
.pad-band img { width: 100%; height: clamp(300px, 38vw, 520px); object-fit: cover; }
.pad-band figcaption { position: absolute; left: max(var(--rand), calc((100vw - 1220px) / 2 + var(--rand))); bottom: 36px; max-width: 470px; padding: 24px 26px; border-radius: 22px; background: var(--wit); font: 400 1.3rem/1.4 var(--kop); color: var(--aubergine); }
.pad-woord { font-style: italic; font-weight: 600; color: var(--abrikoos-donker); }
.pad-band figcaption em { font-style: italic; color: var(--aubergine-2); }

/* ----- Over mij ----- */
.over { padding: 104px 0; }
.over-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: center; }
.over-beelden { position: relative; padding-bottom: 70px; padding-right: 60px; }
.over-beeld-1 { width: 82%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 999px 999px 24px 24px; }
.over-beeld-2 { position: absolute; right: 0; bottom: 0; width: 50%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 20px; border: 8px solid var(--linnen); }
.over-tekst p:not(.label):not(.handtekening) { margin-top: 18px; color: var(--inkt-zacht); }
.over-tekst h2 { margin-bottom: 4px; }
.over-feiten { display: grid; gap: 10px; margin-top: 24px; }
.over-feiten li { position: relative; padding-left: 28px; font-weight: 500; }
.over-feiten li::before { content: ""; position: absolute; left: 0; top: .45em; width: 16px; height: 16px; border-radius: 50%; background: var(--salie-licht) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.8-5' fill='none' stroke='%234f6b4a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.handtekening { margin-top: 26px; font: italic 500 2.6rem/1 var(--kop); color: var(--abrikoos-donker); }

/* ----- Ervaringen ----- */
.ervaringen { padding: 104px 0; background: var(--salie-licht); }
.ervaring-rij { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ervaring { display: flex; flex-direction: column; gap: 18px; margin: 0; padding: 30px 28px; border-radius: 24px; background: var(--wit); }
.ervaring blockquote { margin: 0; font: 400 1.22rem/1.45 var(--kop); color: var(--aubergine); }
.ervaring blockquote::before { content: "\201C"; display: block; height: 30px; font: 600 3.4rem/1 var(--kop); color: var(--abrikoos); }
.ervaring figcaption { margin-top: auto; font-size: 14.5px; color: var(--inkt-zacht); }
.ervaring figcaption b { color: var(--aubergine); font-weight: 600; }

/* ----- Kennismaken (E403) ----- */
.kennis { padding: 104px 0; background: var(--zand); }
.kennis-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
.kennis-beeld { margin: 0; }
.kennis-beeld img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 24px; }
.afspraak { padding: 32px; border-radius: 30px; background: var(--wit); border: 1px solid var(--lijn); }
.afspraak-groep + .afspraak-groep { margin-top: 24px; }
.afspraak-kop { float: left; width: 100%; margin-bottom: 12px; font: 500 1.35rem/1.2 var(--kop); color: var(--aubergine); }
.afspraak-kop + * { clear: both; }
.dagkaarten { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; padding: 4px 2px 12px; margin: 0 -2px; scrollbar-width: thin; }
.dagkaart { position: relative; flex: none; display: grid; justify-items: center; gap: 2px; width: 78px; padding: 12px 6px 11px; border: 1.5px solid var(--lijn); border-radius: 18px; background: var(--linnen); scroll-snap-align: start; cursor: pointer; transition: transform .35s var(--zacht), background-color .2s, border-color .2s, color .2s; }
.dagkaart input { position: absolute; opacity: 0; }
.dagkaart small { font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--inkt-zacht); }
.dagkaart b { font: 500 30px/1 var(--kop); color: var(--aubergine); }
.dagkaart .dag-vrij { font-size: 12px; font-weight: 600; color: var(--salie-donker); }
.dagkaart::after { content: ""; position: absolute; left: 30%; right: 30%; bottom: -9px; height: 3px; border-radius: 3px; background: var(--abrikoos); opacity: 0; transform: scaleX(.3); transition: opacity .25s, transform .35s var(--zacht); }
.dagkaart:hover { border-color: var(--aubergine-2); }
.dagkaart:has(input:checked), .dagkaart.is-gekozen { background: var(--aubergine); border-color: var(--aubergine); transform: translateY(-3px); }
.dagkaart:has(input:checked) small, .dagkaart:has(input:checked) .dag-vrij, .dagkaart.is-gekozen small, .dagkaart.is-gekozen .dag-vrij { color: var(--abrikoos-licht); }
.dagkaart:has(input:checked) b, .dagkaart.is-gekozen b { color: var(--linnen); }
.dagkaart:has(input:checked)::after, .dagkaart.is-gekozen::after { opacity: 1; transform: none; }
.dagkaart:has(input:focus-visible) { outline: 3px solid var(--abrikoos); outline-offset: 2px; }
.dagkaart.is-vol { cursor: not-allowed; opacity: .5; }
.tijdknoppen { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.tijd-leeg { grid-column: 1 / -1; font-size: 15px; color: var(--inkt-zacht); }
.tijdknop { position: relative; cursor: pointer; }
.tijdknop input { position: absolute; opacity: 0; }
.tijdknop span { display: grid; place-items: center; min-height: 48px; border: 1.5px solid var(--lijn); border-radius: 999px; background: var(--linnen); font-weight: 600; font-size: 15.5px; transition: background-color .2s, color .2s, border-color .2s; }
.tijdknop span small { display: block; font-size: 11px; font-weight: 500; color: var(--inkt-zacht); margin-top: -4px; }
.tijdknop:hover span { border-color: var(--aubergine-2); }
.tijdknop input:checked + span { background: var(--aubergine); border-color: var(--aubergine); color: var(--linnen); }
.tijdknop input:checked + span small { color: var(--abrikoos-licht); }
.tijdknop input:focus-visible + span { outline: 3px solid var(--abrikoos); outline-offset: 2px; }
.tijdknop.is-bezet { cursor: not-allowed; }
.tijdknop.is-bezet span { background: transparent; color: rgba(43, 34, 51, .35); text-decoration: line-through; border-style: dashed; }
@media (prefers-reduced-motion: no-preference) {
  .tijdknoppen.is-nieuw .tijdknop { animation: val-in .45s var(--zacht) both; animation-delay: calc(var(--i, 0) * 40ms); }
  @keyframes val-in { from { opacity: 0; transform: translate3d(0, -10px, 0); } to { opacity: 1; transform: none; } }
}
.js .datum-los, .js .tijd-los { display: none; }
html:not(.js) .datum-los, html:not(.js) .tijd-los { max-width: 260px; }
html:not(.js) .dagkaarten, html:not(.js) .tijdknoppen { display: none; }
.waar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.waar-keuze { position: relative; cursor: pointer; }
.waar-keuze input { position: absolute; opacity: 0; }
.waar-keuze > span { display: grid; gap: 2px; height: 100%; padding: 13px 16px 13px 44px; border: 1.5px solid var(--lijn); border-radius: 16px; background: var(--linnen); transition: border-color .2s, background-color .2s; }
.waar-keuze > span::before { content: ""; position: absolute; left: 16px; top: 17px; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--inkt-zacht); background: var(--wit); }
.waar-keuze b { font-weight: 600; font-size: 15.5px; }
.waar-keuze small { font-size: 13.5px; color: var(--inkt-zacht); }
.waar-keuze input:checked + span { border-color: var(--aubergine); background: var(--abrikoos-licht); }
.waar-keuze input:checked + span::before { border-color: var(--aubergine); background: radial-gradient(circle, var(--aubergine) 0 3.5px, var(--wit) 4px); }
.waar-keuze input:focus-visible + span { outline: 3px solid var(--abrikoos); outline-offset: 2px; }
.afspraak-velden { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--lijn); }
.veld { display: grid; gap: 6px; font-size: 14px; font-weight: 600; color: var(--inkt); }
.veld input, .veld select, .veld textarea { width: 100%; min-width: 0; min-height: 50px; padding: 0 14px; border: 1.5px solid var(--lijn); border-radius: 14px; background: var(--linnen); font: 400 16px/1.3 var(--tekst); color: var(--inkt); transition: border-color .2s, background-color .2s; }
.veld textarea { padding: 12px 14px; min-height: 84px; resize: vertical; }
.veld input:focus-visible, .veld select:focus-visible, .veld textarea:focus-visible { outline: 2px solid var(--aubergine-2); outline-offset: 1px; background: var(--wit); }
.veld-breed { grid-column: 1 / -1; }
.optioneel { font-weight: 400; color: var(--inkt-zacht); }
.afspraak-fout { margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: #fbe4dc; color: #8a2f12; font-size: 15px; font-weight: 500; }
.afspraak-actie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-top: 22px; }
.afspraak-zin { font-size: 15.5px; color: var(--inkt-zacht); max-width: 380px; }
.afspraak-zin b { color: var(--aubergine); font-weight: 600; }
.afspraak-klaar { margin-top: 20px; padding: 22px; border-radius: 20px; background: var(--salie-licht); }
.afspraak-klaar:focus { outline: none; }
.afspraak-klaar-kop { font: 500 1.9rem/1.1 var(--kop); color: var(--aubergine); margin-bottom: 6px; }
.afspraak-klaar-knoppen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

/* ----- Vragen ----- */
.vragen { padding: 104px 0 110px; }
.faq { display: grid; gap: 10px; }
.faq details { border-radius: 18px; background: var(--wit); border: 1px solid var(--lijn); }
.faq summary { position: relative; list-style: none; cursor: pointer; padding: 20px 58px 20px 22px; font: 500 1.2rem/1.3 var(--kop); color: var(--aubergine); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 22px; top: 50%; width: 16px; height: 16px; margin-top: -8px; background: linear-gradient(var(--abrikoos-donker), var(--abrikoos-donker)) center / 16px 2px no-repeat, linear-gradient(var(--abrikoos-donker), var(--abrikoos-donker)) center / 2px 16px no-repeat; transition: transform .3s var(--zacht); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 22px 22px; color: var(--inkt-zacht); }

/* ----- Voet ----- */
.voet { background: var(--aubergine); color: rgba(247, 242, 236, .84); padding: 64px 0 120px; }
.voet-in { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px; }
.voet .logo { color: var(--linnen); margin: 0 0 14px; }
.voet .logo-tekst small { color: var(--abrikoos-licht); }
.voet-tekst { max-width: 320px; font-size: 15px; }
.voet-kop { font: 500 1.3rem/1.2 var(--kop); color: var(--abrikoos); margin-bottom: 10px; }
.voet a { color: var(--linnen); }
.voet-in p + p { margin-top: 8px; }
.voet .klein { color: rgba(247, 242, 236, .66); }
.voet-onder { display: grid; gap: 6px; margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--lijn-licht); font-size: 13.5px; color: rgba(247, 242, 236, .62); }

/* ----- Breakpoints ----- */
@media (max-width: 1060px) {
  .traject-rij { grid-template-columns: minmax(0, 1fr); max-width: 620px; margin-inline: auto; }
  .ervaring-rij { grid-template-columns: minmax(0, 1fr); max-width: 680px; margin-inline: auto; }
}
@media (max-width: 959px) {
  .hero { padding-top: 32px; }
  .hero-in, .check-grid, .over-grid, .kennis-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .check .sectie-kop { position: static; }
  .hero-beeld { width: min(100%, 420px); }
  .kennis-beeld { display: none; }
  .voet-in { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 759px) {
  .herken, .check, .trajecten, .over, .ervaringen, .kennis, .vragen { padding-top: 72px; padding-bottom: 72px; }
  .werkwijze { padding-top: 72px; }
  .herken { padding-top: 16px; }
  .sectie-kop { margin-bottom: 28px; }
  .hero { padding-bottom: 56px; }
  .hero h1 { font-size: clamp(2.5rem, 11vw, 3.2rem); }
  .hero-sub { font-size: 1.05rem; margin-top: 16px; }
  .hero-knoppen { margin-top: 24px; }
  .hero-knoppen .knop { width: 100%; }
  .hero-feiten { margin-top: 22px; gap: 6px 16px; font-size: 14px; }
  .hero-beeld { width: 86%; }
  .hero-plek { left: -6%; bottom: 22px; padding: 11px 14px; }
  .quiz { padding: 24px 18px; border-radius: 24px; }
  .antwoorden { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quiz-nav .knop { flex: 1; }
  .trajecten-kop { margin-bottom: 30px; }
  .betaler { width: 100%; }
  .betaler-knop { flex: 1; padding: 0 10px; }
  .traject { padding: 26px 22px; }
  .e357 { margin-bottom: 64px; }
  .pad-band figcaption { position: relative; left: auto; bottom: auto; margin: -56px var(--rand) 0; font-size: 1.15rem; padding: 20px; }
  .over-beelden { padding-right: 40px; padding-bottom: 50px; }
  .afspraak { padding: 22px 16px; border-radius: 24px; }
  .waar, .afspraak-velden { grid-template-columns: minmax(0, 1fr); }
  .afspraak-actie .knop { width: 100%; }
  .voet-in { grid-template-columns: minmax(0, 1fr); }
}