/* hofstad rijopleiding */
@font-face { font-family: "Jakarta"; src: url("fonts/jakarta-var.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }

:root {
  --blauw: #07588D;
  --blauw-hel: #0074BC;
  --blauw-diep: #052E4A;
  --blauw-nacht: #041F33;
  --blauw-lucht: #E9F2F8;
  --geel: #F6B500;
  --inkt: #14232E;
  --grijs: #52616C;
  --grond: #FFFFFF;
  --paneel: #F4F8FB;
  --rand: #DFE9F1;
  --rand-donker: rgba(255, 255, 255, .14);
  --schaduw: 0 12px 34px rgba(5, 46, 74, .13);
  --schaduw-diep: 0 18px 50px rgba(4, 31, 51, .45);
  --rond: 16px;
  --font: "Jakarta", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; margin: 0; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
main [id], #proefles-kaart { scroll-margin-top: 86px; }
body { font-family: var(--font); color: var(--inkt); background: var(--grond); line-height: 1.65; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
a { color: var(--blauw); }
h1, h2, h3 { font-weight: 800; line-height: 1.08; letter-spacing: -.015em; text-wrap: balance; }
h2 { font-size: clamp(2.2rem, 4.3vw, 3.3rem); margin-bottom: 18px; }
h2 em { font-style: normal; color: var(--blauw-hel); }
.eyebrow { font-size: .8rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--blauw-hel); margin-bottom: 14px; text-wrap: balance; }
.eyebrow-licht { color: #8FC5E8; }

html.js .reveal { opacity: 0; transform: translateY(8px); transition: opacity .28s ease var(--d, 0s), transform .28s ease var(--d, 0s); }
html.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
}

/* knoppen */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: .5em; font-weight: 700; text-align: center; text-wrap: balance; text-decoration: none; border: 0; cursor: pointer; border-radius: 12px; padding: .95em 1.5em; font-size: 1rem; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.knop-geel { background: var(--geel); color: #241A00; box-shadow: 0 8px 22px rgba(246, 181, 0, .35); }
.knop-geel:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(246, 181, 0, .5); }
.knop-groot { font-size: 1.08rem; padding: 1.05em 1.7em; }
.knop-glas { background: rgba(255, 255, 255, .1); color: #fff; border: 1.5px solid var(--rand-donker); backdrop-filter: blur(4px); }
.knop-glas:hover { background: rgba(255, 255, 255, .18); }
.knop-lijn { background: #fff; color: var(--blauw); border: 2px solid var(--rand); }
.knop-lijn:hover { border-color: var(--blauw); }
.knop-blauw { background: var(--blauw); color: #fff; box-shadow: 0 8px 22px rgba(7, 88, 141, .3); }
.knop-blauw:hover { transform: translateY(-2px); }
.knop:focus-visible { outline: 3px solid var(--blauw-hel); outline-offset: 2px; }
.knop[disabled] { opacity: .4; cursor: default; transform: none !important; box-shadow: none; }

/* topbar en header */
.topbar { background: var(--blauw-nacht); color: #CFE3F2; font-size: .82rem; font-weight: 600; }
.topbar-in { display: flex; gap: .6em; justify-content: center; align-items: center; padding: .5em 24px; flex-wrap: wrap; }
.tb-ster { color: var(--geel); letter-spacing: .12em; font-size: .78rem; }
.tb-sep { opacity: .45; }
@media (max-width: 720px) { .tb-desk { display: none; } }
@media (max-width: 360px) { .tb-aantal { display: none; } }

.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .94); backdrop-filter: blur(8px); transition: box-shadow .2s ease; }
.site-header.scrolled { box-shadow: 0 4px 18px rgba(5, 46, 74, .1); }
.header-in { display: flex; align-items: center; gap: 24px; padding: 13px 24px; }
.brand img { width: 180px; height: auto; }
.hoofdnav { display: flex; gap: 22px; margin-left: auto; }
.hoofdnav a { text-decoration: none; color: var(--inkt); font-weight: 600; font-size: .93rem; }
.hoofdnav a:hover { color: var(--blauw-hel); }
.header-cta { padding: .7em 1.2em; font-size: .92rem; }
.menu-knop { display: none; }
.mobiel-menu { display: none; }
@media (max-width: 940px) {
  .hoofdnav { display: none; }
  .header-in { gap: 10px; padding: 11px 16px; }
  .brand img { width: 140px; }
  .header-cta { display: inline-flex; margin-left: auto; padding: .62em 1em; font-size: .84rem; white-space: nowrap; box-shadow: 0 5px 14px rgba(246, 181, 0, .3); }
  .menu-knop { display: block; position: relative; flex: none; width: 44px; height: 44px; background: none; border: 0; cursor: pointer; }
  .menu-knop span, .menu-knop::before, .menu-knop::after { content: ""; position: absolute; left: 8px; right: 8px; height: 3px; border-radius: 2px; background: var(--inkt); transition: transform .2s ease, opacity .2s ease; }
  .menu-knop::before { top: 13px; } .menu-knop span { top: 20.5px; } .menu-knop::after { top: 28px; }
  .menu-knop[aria-expanded="true"]::before { transform: translateY(7.5px) rotate(45deg); }
  .menu-knop[aria-expanded="true"] span { opacity: 0; }
  .menu-knop[aria-expanded="true"]::after { transform: translateY(-7.5px) rotate(-45deg); }
  html.js .mobiel-menu { display: flex; flex-direction: column; gap: 4px; position: absolute; top: 100%; left: 0; right: 0; padding: 14px 26px 26px; max-height: min(76dvh, calc(100dvh - 130px)); overflow-y: auto; overscroll-behavior: contain; background: #fff; border-radius: 0 0 22px 22px; box-shadow: 0 30px 60px rgba(4, 31, 51, 0), 0 0 0 100vmax rgba(4, 31, 51, 0); z-index: 3; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: transform .22s ease, opacity .22s ease, box-shadow .25s ease, visibility 0s linear .22s; }
  html.js .mobiel-menu.open { opacity: 1; visibility: visible; transform: none; box-shadow: 0 30px 60px rgba(4, 31, 51, .3), 0 0 0 100vmax rgba(4, 31, 51, .35); transition: transform .22s ease, opacity .22s ease, box-shadow .25s ease; }
  .mobiel-menu a { text-decoration: none; color: var(--inkt); font-weight: 700; font-size: 1.22rem; padding: .55em 0; border-bottom: 1px solid var(--rand); }
  .mobiel-menu .knop { margin-top: 18px; font-size: 1.02rem; }
}
@media (max-width: 720px) {
  /* de vaste balk onderaan draagt de proefles-knop al; twee keer is dubbelop */
  .header-cta { display: none; }
  .menu-knop { margin-left: auto; }
  .brand img { width: 152px; }
}
@media (max-width: 370px) {
  .brand img { width: 132px; }
}

/* hero */
.hero { position: relative; overflow: clip; color: #fff; background:
  radial-gradient(90% 80% at 12% -20%, rgba(0, 116, 188, .55), transparent 60%),
  radial-gradient(70% 60% at 95% 110%, rgba(0, 116, 188, .35), transparent 60%),
  linear-gradient(165deg, var(--blauw-diep) 0%, var(--blauw-nacht) 100%); }
.hero-decor { position: absolute; inset: 0; pointer-events: none; overflow: clip; }
/* L-plaat decor */
.l-plaat { position: absolute; display: grid; place-items: center; font-weight: 800; color: rgba(255, 255, 255, .07); background: rgba(0, 116, 188, .13); border: 2px solid rgba(255, 255, 255, .06); border-radius: 18%; transform: rotate(-8deg); }
.l-1 { width: 300px; height: 300px; font-size: 170px; left: -80px; top: 46%; }
.l-2 { width: 190px; height: 190px; font-size: 110px; right: 30%; top: -60px; transform: rotate(10deg); }
.l-3 { width: 120px; height: 120px; font-size: 68px; right: -30px; bottom: 12%; transform: rotate(-14deg); }
.l-4 { width: 240px; height: 240px; font-size: 140px; right: -60px; top: -40px; transform: rotate(9deg); }

.hero-in { position: relative; z-index: 2; display: grid; grid-template-columns: 1.06fr .94fr; gap: 56px; align-items: center; padding-top: 68px; padding-bottom: 76px; }
.hero .eyebrow { color: #8FC5E8; }
.hero h1 { font-size: clamp(2.5rem, 5.5vw, 4.4rem); margin-bottom: 20px; }
.hero h1 em { font-style: normal; color: var(--geel); }
.hero-sub { font-size: 1.12rem; color: #C3D8E8; max-width: 32em; margin-bottom: 28px; }
.cta-rij { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-stats { display: grid; grid-template-columns: repeat(4, auto); gap: 12px 34px; margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--rand-donker); }
.hero-stats dt { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #93BAD6; }
.hero-stats dd { margin: 2px 0 0; font-size: 1.25rem; font-weight: 800; color: #fff; white-space: nowrap; }
.hero-stats .ster { color: var(--geel); }

/* de aanvraag-kaart */
.proefles-kaart { position: relative; background: #fff; color: var(--inkt); border-radius: var(--rond); box-shadow: var(--schaduw-diep); padding: 54px 30px 26px; }
html.js .proefles-kaart { background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), rgba(0, 116, 188, .06), transparent 60%), #fff; }
.kaart-bak { position: absolute; top: -21px; left: 50%; transform: translateX(-50%) rotate(-1.2deg); display: flex; align-items: center; gap: 9px; background: var(--blauw-hel); color: #fff; border-radius: 8px; padding: 8px 16px 8px 9px; box-shadow: 0 8px 20px rgba(0, 116, 188, .45); }
.bak-l { display: grid; place-items: center; width: 26px; height: 26px; background: #fff; color: var(--blauw-hel); font-weight: 800; border-radius: 5px; font-size: 1rem; }
.bak-weg { width: 26px; height: 17px; }
.bak-naam { font-weight: 800; font-style: italic; letter-spacing: .11em; font-size: 1rem; }
.proefles-kaart h2 { font-size: 1.5rem; display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.kaart-tijd { font-size: .78rem; font-weight: 700; color: var(--blauw); background: var(--blauw-lucht); border-radius: 99px; padding: .25em .8em; }
.kaart-sub { font-size: .92rem; color: var(--grijs); margin-bottom: 18px; }
.proefles-form label, .proefles-form legend { display: block; font-size: .82rem; font-weight: 700; margin-bottom: 6px; }
.proefles-form input[type="text"], .proefles-form input[type="tel"], .proefles-form input[type="email"], .proefles-form select { width: 100%; font: inherit; font-size: 16px; padding: .7em .9em; border: 1.5px solid #C7D6E2; border-radius: 10px; margin-bottom: 15px; background: #fff; color: var(--inkt); }
.veld-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 480px) { .veld-2 { grid-template-columns: 1fr; gap: 0; } }
.pf-web { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.pf-fout { margin-top: 10px; background: #FDF0F0; border: 1px solid #E8C4C4; border-radius: 10px; padding: 10px 14px; font-size: .86rem; color: #8A3232; }
.proefles-form input:focus, .proefles-form select:focus { outline: 2px solid var(--blauw-hel); outline-offset: 1px; }
.proefles-form fieldset { border: 0; padding: 0; margin: 0 0 15px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.seg label { margin: 0; }
.seg input { position: absolute; opacity: 0; }
.seg span { display: block; text-align: center; padding: .65em; border: 1.5px solid #C7D6E2; border-radius: 10px; font-weight: 700; font-size: .95rem; cursor: pointer; transition: all .15s ease; }
.seg input:checked + span { background: var(--blauw); border-color: var(--blauw); color: #fff; }
.seg input:focus-visible + span { outline: 2px solid var(--blauw-hel); outline-offset: 1px; }
.kaart-knop { width: 100%; font-size: 1.03rem; }
.kaart-alt { text-align: center; font-size: .82rem; color: var(--grijs); margin-top: 12px; }

/* fotobaan */
.s-baan { background: var(--grond); padding: 34px 0 0; }
.baan-kop p { font-size: .95rem; color: var(--grijs); margin-bottom: 16px; }
.baan-kop strong { color: var(--inkt); }
.baan { display: flex; overflow: hidden; gap: 14px; padding-bottom: 44px; }
.baan-strook { display: flex; gap: 14px; flex: none; }
html.js .baan-strook { animation: baan 46s linear infinite; }
.baan:hover .baan-strook { animation-play-state: paused; }
@keyframes baan { from { transform: translateX(0); } to { transform: translateX(calc(-100% - 14px)); } }
.baan img { width: 230px; height: 230px; object-fit: cover; border-radius: 14px; box-shadow: var(--schaduw); }

/* calculator */
.s-calc { position: relative; overflow: clip; background: linear-gradient(180deg, #E7F1F8 0%, #DCEAF4 100%); border-top: 1px solid #CBDDEB; border-bottom: 1px solid #CBDDEB; padding: 72px 0; }
.sectie-l { position: absolute; top: -70px; left: -70px; display: grid; place-items: center; width: 260px; height: 260px; font-weight: 800; font-size: 150px; color: rgba(0, 116, 188, .05); background: rgba(0, 116, 188, .05); border: 2px solid rgba(0, 116, 188, .07); border-radius: 18%; transform: rotate(-9deg); pointer-events: none; }
.sectie-l-rechts { left: auto; right: -70px; top: auto; bottom: -70px; transform: rotate(8deg); }
.calc-in { display: grid; grid-template-columns: 1fr 1.05fr; gap: 60px; align-items: start; }
.s-calc h2 em { position: relative; white-space: nowrap; }
.s-calc h2 em::after { content: ""; position: absolute; left: 2%; right: 4%; bottom: -.07em; height: .09em; background: repeating-linear-gradient(90deg, var(--geel) 0 .55em, transparent .55em .95em); }
.calc-pill { display: inline-flex; align-items: baseline; gap: 10px; margin: 2px 0 24px; background: #fff; border: 1px solid var(--rand); border-left: 4px solid var(--geel); border-radius: 9px; padding: 10px 16px; font-size: .93rem; color: var(--grijs); box-shadow: 0 4px 14px rgba(5, 46, 74, .08); }
.calc-pill strong { font-weight: 800; font-size: 1.2rem; color: var(--blauw); white-space: nowrap; }
.calc-punten { list-style: none; padding: 0; display: grid; gap: 16px; margin-bottom: 28px; }
.calc-punten li { position: relative; padding-left: 34px; color: var(--grijs); }
.calc-punten li::before { content: "→"; position: absolute; left: 0; top: 0; color: var(--geel); font-weight: 800; font-size: 1.15rem; }

.calc-kaart { position: relative; background: #fff; border: 1px solid var(--rand); border-radius: var(--rond); box-shadow: var(--schaduw); padding: 30px 32px; }
html.js .calc-kaart { background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgba(0, 116, 188, .05), transparent 60%), #fff; }
.calc-label { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--blauw-hel); margin-bottom: 14px; }
.calc-voortgang { display: flex; gap: 8px; margin-bottom: 22px; }
.cv-stap { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--paneel); border: 1.5px solid var(--rand); font-weight: 700; font-size: .88rem; color: var(--grijs); transition: all .2s ease; }
.cv-stap.actief { background: var(--blauw); border-color: var(--blauw); color: #fff; }
.cv-stap.gedaan { background: var(--blauw-lucht); border-color: var(--blauw-hel); color: var(--blauw); }

.calc-vraag { display: none; border: 0; padding: 0; margin: 0 0 22px; }
.calc-vraag.actief { display: grid; gap: 9px; }
.calc-vraag legend { font-size: 1.12rem; font-weight: 800; margin-bottom: 12px; }
.calc-vraag legend small { display: block; font-weight: 600; font-size: .8rem; color: var(--grijs); margin-top: 2px; }
.calc-vraag label { position: relative; display: block; }
.calc-vraag input { position: absolute; opacity: 0; }
.calc-vraag span { display: block; padding: .8em 1.1em; border: 1.5px solid #C7D6E2; border-radius: 11px; font-weight: 600; font-size: .97rem; cursor: pointer; transition: all .15s ease; }
.calc-vraag span small { display: block; font-weight: 400; font-size: .8rem; color: var(--grijs); }
.calc-vraag input:checked + span { background: var(--blauw); border-color: var(--blauw); color: #fff; }
.calc-vraag input:checked + span small { color: #B9D6EA; }
.calc-vraag input:focus-visible + span { outline: 2px solid var(--blauw-hel); outline-offset: 1px; }
.calc-knoppen { display: flex; justify-content: space-between; gap: 12px; }
.calc-knoppen .knop { padding: .75em 1.4em; font-size: .95rem; }

.calc-resultaat { text-align: center; }
.cr-label { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--blauw-hel); }
.cr-getal { font-size: clamp(2.3rem, 5vw, 3.2rem); font-weight: 800; line-height: 1.1; margin: 6px 0 2px; }
.cr-getal strong { color: var(--blauw-hel); }
.cr-marge { color: var(--grijs); font-size: .95rem; margin-bottom: 18px; }
.cr-advies { background: var(--paneel); border: 1px solid var(--rand); border-left: 4px solid var(--geel); border-radius: 12px; padding: 16px 18px; text-align: left; font-size: .95rem; margin-bottom: 14px; }
.cr-advies strong { color: var(--blauw); }
.cr-faalangst { background: var(--blauw-lucht); border-radius: 12px; padding: 12px 16px; text-align: left; font-size: .88rem; color: var(--blauw-diep); margin-bottom: 14px; }
.cr-opnieuw { background: none; border: 0; cursor: pointer; font: inherit; font-size: .85rem; font-weight: 600; color: var(--grijs); text-decoration: underline; margin-top: 12px; }
.cr-noot { font-size: .8rem; color: var(--grijs); margin-top: 10px; }

/* pakketten */
.s-pakketten { padding: 72px 0; background: #fff; }
.pakket-rij { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 34px; align-items: stretch; }
.pakket { position: relative; background: #fff; border: 1.5px solid var(--rand); border-radius: var(--rond); padding: 28px 26px; display: flex; flex-direction: column; gap: 6px; }
.pakket .knop { margin-top: auto; }
.pk-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--geel); color: #241A00; font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; border-radius: 99px; padding: .35em 1.1em; white-space: nowrap; }
.pakket h3 { font-size: 1.02rem; color: var(--grijs); font-weight: 700; }
.pk-lessen { font-size: 1.5rem; font-weight: 800; }
.pk-ref { display: flex; align-items: center; gap: 10px; font-size: .95rem; margin-top: 2px; }
.pk-ref s { color: var(--grijs); font-weight: 700; text-decoration-thickness: 2px; text-decoration-color: rgba(20, 35, 46, .55); }
.pk-populair .pk-ref s { color: #9CC4E4; text-decoration-color: rgba(255, 255, 255, .6); }
.pk-bespaar { background: var(--blauw-lucht); color: var(--blauw); font-size: .74rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; border-radius: 99px; padding: .3em .85em; white-space: nowrap; }
.pk-populair .pk-bespaar { background: var(--geel); color: #241A00; }
.pk-refnoot { font-size: .8rem; color: var(--grijs); margin-top: 2px; }
.pk-populair .pk-refnoot { color: #B9D6EA; }
.pakket li.pk-min::before { content: "\2013"; color: #A5B2BC; }
.pk-populair li.pk-min::before { color: #7E9DB8; }
.pk-prijs { font-size: 2rem; font-weight: 800; color: var(--blauw-hel); width: fit-content; position: relative; padding-bottom: 7px; margin-bottom: 2px; }
.pk-prijs::after { content: ""; position: absolute; left: 2%; right: 4%; bottom: 0; height: 5px; background: repeating-linear-gradient(90deg, var(--geel) 0 14px, transparent 14px 25px); border-radius: 2px; }
.pakket ul { list-style: none; padding: 10px 0 16px; display: grid; gap: 8px; }
.pakket li { position: relative; padding-left: 24px; font-size: .9rem; color: var(--grijs); }
.pakket li::before { content: "✓"; position: absolute; left: 0; color: var(--blauw-hel); font-weight: 800; }
.pakket .knop { width: 100%; font-size: .93rem; padding: .8em 1em; }
.pk-populair { background: linear-gradient(170deg, #0A4066 0%, var(--blauw-diep) 100%); border-color: var(--blauw-diep); color: #fff; transform: translateY(-10px); box-shadow: 0 22px 50px rgba(6, 58, 92, .4), 0 0 0 5px rgba(246, 181, 0, .18); }
.pk-populair h3 { color: #9CC4E4; }
.pk-populair .pk-lessen { color: #fff; }
.pk-populair .pk-prijs { color: var(--geel); }
.pk-populair li { color: #C7DCEC; }
.pk-populair li::before { color: var(--geel); }
.pakket-voet { margin-top: 26px; font-size: .88rem; color: var(--grijs); }
.pakket-voet span:not(:last-child)::after { content: " · "; }

/* lesfabriek vs hofstad */
.s-waarom { padding: 72px 0 84px; background: linear-gradient(180deg, #E7F1F8 0%, #DCEAF4 100%); border-top: 1px solid #CBDDEB; }
.s-waarom h2 em.streep { color: var(--grijs); position: relative; white-space: nowrap; }
.s-waarom h2 em.streep::after { content: ""; position: absolute; left: -2%; right: -2%; top: 54%; height: .09em; background: var(--geel); transform: rotate(-2.5deg); border-radius: 2px; }
.vs-intro { color: var(--grijs); max-width: 40em; margin-bottom: 40px; }
.vs-in { position: relative; display: grid; grid-template-columns: .92fr 1.08fr; gap: 26px; align-items: stretch; }
.vs-paneel { border-radius: 20px; padding: 34px 36px; }
.vs-paneel h3 { font-size: 1.05rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 16px; }
.vs-paneel ul { list-style: none; padding: 0; display: grid; gap: 10px; font-size: .93rem; }
.vs-paneel li { position: relative; padding-left: 24px; }
.vs-fabriek { display: flex; flex-direction: column; justify-content: flex-start; background: #ECEFF2; color: #5A6771; border: 1px solid #DDE3E8; }
.vs-fabriek h3 { color: #5A6771; }
.vs-fabriek li { text-decoration: line-through; text-decoration-color: rgba(74, 85, 94, .6); text-decoration-thickness: 1.5px; }
.vs-fabriek li::before { content: "\2715"; position: absolute; left: 0; font-weight: 800; text-decoration: none; }
.vs-badge { position: absolute; left: calc((100% - 26px) * .46 + 13px); top: 50%; transform: translate(-50%, -50%) rotate(-6deg); z-index: 2; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--geel); color: #241A00; font-weight: 800; font-size: 1.1rem; box-shadow: 0 10px 26px rgba(246, 181, 0, .5); border: 3px solid #fff; }
.vs-hofstad { position: relative; overflow: clip; color: #DCE9F3; box-shadow: 0 24px 60px rgba(4, 31, 51, .4), 0 0 0 5px rgba(246, 181, 0, .16); transform: translateY(-6px); background:
  radial-gradient(80% 90% at 88% -20%, rgba(0, 116, 188, .5), transparent 60%),
  linear-gradient(165deg, #0A4066 0%, var(--blauw-nacht) 100%); }
html.js .vs-hofstad { background:
  radial-gradient(380px circle at var(--mx, 70%) var(--my, 0%), rgba(0, 116, 188, .28), transparent 60%),
  radial-gradient(80% 90% at 88% -20%, rgba(0, 116, 188, .5), transparent 60%),
  linear-gradient(165deg, #0A4066 0%, var(--blauw-nacht) 100%); }
.vs-hofstad h3 { color: var(--geel); }
.vs-hofstad li { color: #DCE9F3; }
.vs-hofstad li::before { content: "\2713"; position: absolute; left: 0; color: var(--geel); font-weight: 800; }
.vs-bewijs { margin: 20px 0 18px; padding: 14px 18px 12px; background: rgba(255, 255, 255, .07); border-left: 3px solid var(--geel); border-radius: 0 12px 12px 0; }
.vs-bewijs blockquote { font-size: .9rem; font-style: italic; color: #EAF2F8; line-height: 1.55; }
.vs-bewijs figcaption { margin-top: 6px; font-size: .76rem; font-weight: 700; color: #8FC5E8; }
.vs-hofstad .knop { width: 100%; }
.vs-bewijs-grijs { background: rgba(255, 255, 255, .8); border-left: 3px solid #B9C3CB; }
.vs-bewijs-grijs blockquote { color: #6B7883; }
.vs-bewijs-grijs figcaption { color: #9AA6AF; }


/* reviews */
.s-reviews { padding: 72px 0; background: var(--grond); }
.reviews-in { display: grid; grid-template-columns: .95fr 1.05fr; gap: 52px; align-items: center; }
.reviews-tekst > p { color: var(--grijs); max-width: 30em; }
.score-kaart { display: inline-grid; justify-items: start; gap: 2px; margin-top: 24px; background: var(--paneel); border: 1px solid var(--rand); border-radius: 14px; padding: 20px 28px; box-shadow: var(--schaduw); }
.score-getal { font-weight: 800; font-size: 2.9rem; line-height: 1; }
.score-sterren { color: var(--geel); letter-spacing: .18em; font-size: 1rem; }
.score-sub { font-size: .82rem; font-weight: 600; color: var(--grijs); }
.meldingen { display: grid; gap: 16px; }
.melding { margin: 0; background: #fff; border: 1px solid var(--rand); border-radius: 16px; padding: 16px 20px 14px; box-shadow: 0 10px 28px rgba(5, 46, 74, .12); }
.melding:nth-child(2) { transform: rotate(.6deg) translateX(14px); }
.melding:nth-child(3) { transform: rotate(-.5deg); }
.m-kop { display: flex; align-items: center; gap: 9px; font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--grijs); margin-bottom: 9px; }
.m-icoon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--geel); color: #241A00; font-size: .85rem; }
.melding blockquote { font-size: .95rem; font-style: italic; line-height: 1.6; }
.melding figcaption { margin-top: 8px; font-size: .82rem; font-weight: 700; color: var(--blauw-hel); }
.melding-groot { background: linear-gradient(170deg, #0A4066 0%, var(--blauw-diep) 100%); border-color: var(--blauw-diep); box-shadow: 0 18px 44px rgba(6, 58, 92, .4); transform: rotate(-.8deg) translateX(-10px); }
.melding-groot .m-kop { color: #9CC4E4; }
.melding-groot blockquote { color: #fff; font-size: 1.08rem; }
.melding-groot figcaption { color: var(--geel); }

/* slot */
.s-slot { position: relative; overflow: clip; color: #fff; padding: 68px 0; text-align: center; background:
  radial-gradient(70% 90% at 50% 130%, rgba(0, 116, 188, .5), transparent 65%),
  linear-gradient(180deg, var(--blauw-diep) 0%, var(--blauw-nacht) 100%); }
.s-slot h2 { color: #fff; font-size: clamp(2.1rem, 4.4vw, 3.2rem); }
.s-slot h2 em { color: var(--geel); }
.slot-in { position: relative; z-index: 2; display: grid; justify-items: center; gap: 22px; }
.slot-noot { color: #AECAE0; font-size: .92rem; }
:root { --chip-y: .35em; --chip-x: .95em; }
.plaatsen { list-style: none; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 720px; }
.plaatsen li { background: rgba(255, 255, 255, .08); border: 1px solid var(--rand-donker); color: #D7E7F3; font-size: .8rem; font-weight: 600; border-radius: 99px; padding: 0; }
.plaatsen li > a, .plaatsen li > span { display: block; padding: var(--chip-y) var(--chip-x); color: inherit; text-decoration: none; }
.plaatsen li > a:hover { color: #fff; }

.kanaal-rij { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; width: 100%; max-width: 920px; text-align: left; }
.kanaal { display: block; background: rgba(255, 255, 255, .07); border: 1px solid var(--rand-donker); border-radius: 16px; padding: 20px; text-decoration: none; color: #fff; transition: transform .15s ease, background .15s ease; }
.kanaal:hover { transform: translateY(-3px); background: rgba(255, 255, 255, .12); }
.ck-icoon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--blauw-hel); color: #fff; margin-bottom: 12px; }
.ck-wa { background: #25D366; }
.kanaal strong { display: block; font-weight: 800; font-size: 1.05rem; margin-bottom: 3px; }
.kanaal p { font-size: .84rem; color: #C3D8E8; line-height: 1.5; }

/* footer */
.site-footer { background: var(--blauw-nacht); border-top: 1px solid rgba(255, 255, 255, .08); color: #9DBDD4; padding: 44px 0 28px; }
.foot-in { text-align: center; }
.foot-kolommen { display: grid; grid-template-columns: 1.2fr .8fr 1fr; gap: 40px; text-align: left; padding-bottom: 26px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.foot-merk { font-weight: 800; font-style: italic; letter-spacing: .06em; font-size: 1.3rem; color: #fff; margin-bottom: 8px; }
.foot-merk span { display: block; font-style: normal; font-weight: 600; font-size: .68rem; letter-spacing: .3em; text-transform: uppercase; color: #8FC5E8; }
.foot-kolommen p { font-size: .9rem; }
.foot-kop { font-weight: 700; color: #fff; margin-bottom: 8px; }
.foot-kolommen nav a { display: block; color: #9DBDD4; text-decoration: none; font-size: .9rem; padding: 2px 0; }
.foot-kolommen nav a:hover { color: #fff; }
.site-footer a { color: #fff; }
.foot-klein { font-size: .8rem; color: #8FA9BC; margin-top: 18px; }

/* op een telefoon moet je alles met een duim kunnen raken: minstens 44px hoog.
   Een link midden in een zin valt hier bewust buiten (WCAG 2.2 zondert die uit);
   het gaat om knoppen en om links die in hun eentje ergens staan. */
@media (max-width: 720px) {
  :root { --chip-y: 12px; --chip-x: 16px; }
  .brand { display: flex; align-items: center; min-height: 44px; }
  .foot-kolommen nav a { padding: 10px 0; }
  .foot-kolommen p a, .foot-onder a { display: inline-block; padding: 9px 0; }
  .faq-meer a, .lt-meer a, .score-link a, .los-linkje > a { display: inline-block; padding: 11px 0; }
  .score-link, .jur-terug { display: inline-flex; align-items: center; min-height: 44px; }
  .kaart-alt { font-size: .88rem; }
  .kaart-alt a { display: inline-block; padding: 7px 0; }
  /* op een telefoon zou 4:5 over de volle breedte bijna 500px leeg vak worden */
  .portret-plek { max-height: 420px; }
  /* de titel van een routestap is een link: laat de hele kaart het tikdoel zijn */
  .route-stap { position: relative; }
  .route-stap h3 a::after { content: ""; position: absolute; inset: 0; }
  .route-stap h3 a { display: block; padding: 10px 0; margin: -10px 0; }
}
/* chat */
.chatbox { position: fixed; right: 16px; bottom: 16px; z-index: 70; }
.cb-knop { position: relative; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--blauw-hel); color: #fff; border: 0; cursor: pointer; box-shadow: 0 10px 28px rgba(4, 31, 51, .38); transition: transform .15s ease, background .15s ease; }
.cb-knop:hover { transform: translateY(-2px); background: var(--blauw); }
.cb-knop:focus-visible { outline: 3px solid var(--geel); outline-offset: 2px; }
.cb-knop .cb-icoon-dicht { display: none; }
.cb-knop[aria-expanded="true"] .cb-icoon-open { display: none; }
.cb-knop[aria-expanded="true"] .cb-icoon-dicht { display: block; }
.cb-paneel { position: fixed; right: 16px; bottom: 88px; z-index: 71; display: flex; flex-direction: column; width: min(392px, calc(100vw - 32px)); height: min(560px, calc(100dvh - 120px)); background: #fff; border: 1px solid var(--rand); border-radius: 18px; overflow: hidden; box-shadow: 0 30px 80px rgba(4, 31, 51, .45); }
.cb-paneel[hidden] { display: none; }
.cb-top { display: flex; align-items: center; gap: 11px; padding: 13px 14px; color: #fff; background: linear-gradient(150deg, #0A4066 0%, var(--blauw-nacht) 100%); }
.cb-l { display: grid; place-items: center; width: 34px; height: 34px; flex: none; background: var(--geel); color: #241A00; font-weight: 800; font-size: 1.05rem; border-radius: 9px; transform: rotate(-4deg); }
.cb-naam strong { display: block; font-size: .95rem; line-height: 1.25; }
.cb-naam span { display: block; font-size: .74rem; color: #9CC4E4; }
.cb-dicht { margin-left: auto; display: grid; place-items: center; width: 34px; height: 34px; flex: none; background: rgba(255, 255, 255, .1); color: #fff; border: 0; border-radius: 9px; cursor: pointer; }
.cb-dicht:hover { background: rgba(255, 255, 255, .2); }
.cb-berichten { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 9px; padding: 14px 14px 8px; background: #F4F8FB; }
.cb-bericht { max-width: 88%; padding: 9px 13px; border-radius: 13px; font-size: .9rem; line-height: 1.55; }
.van-bot { align-self: flex-start; background: #fff; border: 1px solid var(--rand); border-bottom-left-radius: 4px; color: var(--inkt); }
.van-jou { align-self: flex-end; background: var(--blauw); color: #fff; border-bottom-right-radius: 4px; }
.van-bot a { color: var(--blauw-hel); font-weight: 600; }
.cb-actie { display: block; width: fit-content; margin-top: 8px; padding: .5em 1em; border-radius: 9px; background: var(--geel); color: #241A00 !important; font-weight: 700; font-size: .86rem; text-decoration: none; }
.cb-actie + .cb-actie { margin-top: 6px; }
.cb-actie.cb-wa { background: #25D366; color: #06301A !important; }
.cb-typing { display: flex; gap: 5px; padding: 13px 15px; }
.cb-typing span { width: 7px; height: 7px; border-radius: 50%; background: #9DB4C6; animation: cbtyp 1s ease-in-out infinite; }
.cb-typing span:nth-child(2) { animation-delay: .16s; }
.cb-typing span:nth-child(3) { animation-delay: .32s; }
@keyframes cbtyp { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.cb-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 14px 8px; background: #F4F8FB; }
.cb-chip { border: 1.5px solid #BCD4E6; background: #fff; color: var(--blauw); font: inherit; font-size: .8rem; font-weight: 700; border-radius: 99px; padding: .38em .9em; cursor: pointer; transition: all .15s ease; }
.cb-chip:hover { border-color: var(--blauw-hel); background: var(--blauw-lucht); }
.cb-form { display: flex; gap: 8px; padding: 10px 12px 6px; border-top: 1px solid var(--rand); background: #fff; }
.cb-invoer { flex: 1; font: inherit; font-size: 16px; padding: .55em .9em; border: 1.5px solid #C7D6E2; border-radius: 11px; background: #fff; color: var(--inkt); }
.cb-invoer:focus { outline: 2px solid var(--blauw-hel); outline-offset: 1px; }
.cb-verstuur { display: grid; place-items: center; width: 46px; flex: none; border: 0; border-radius: 11px; background: var(--geel); color: #241A00; cursor: pointer; transition: transform .15s ease; }
.cb-verstuur:hover { transform: translateY(-1px); }
.cb-noot { padding: 4px 14px 10px; background: #fff; font-size: .7rem; color: var(--grijs); text-align: center; }
.cb-noot a { color: var(--blauw-hel); }
@media (max-width: 600px) {
  .chatbox { right: 12px; bottom: 12px; }
  .cb-paneel { right: 10px; left: 10px; bottom: 82px; width: auto; height: min(600px, calc(100dvh - 98px)); }
}
@media (prefers-reduced-motion: reduce) {
  .cb-typing span { animation: none; }
}

/* mobiel */
@media (max-width: 940px) {
  .hero-in { grid-template-columns: 1fr; gap: 38px; padding-top: 40px; padding-bottom: 52px; }
  .hero h1 { font-size: clamp(2.25rem, 9vw, 3rem); }
  .hero-sub { font-size: 1.02rem; margin-bottom: 24px; }
  .cta-rij { gap: 10px; }
  .cta-rij .knop { flex: 1 1 100%; }
  .hero-stats { grid-template-columns: 1fr 1fr; gap: 16px 20px; margin-top: 28px; padding-top: 22px; }
  .l-1 { width: 190px; height: 190px; font-size: 110px; left: -70px; top: 30%; }
  .l-2 { right: -40px; top: -50px; }
  .l-3 { display: none; }
  .proefles-kaart { padding: 50px 20px 22px; }
  .baan img { width: 168px; height: 168px; }

  /* kaart voor de losse knop (display:contents) */
  .calc-in { grid-template-columns: 1fr; gap: 0; }
  .calc-tekst { display: contents; }
  .calc-tekst .knop-blauw { order: 2; width: 100%; margin-top: 22px; text-wrap: balance; }
  .calc-punten { margin-bottom: 26px; }
  .calc-kaart { order: 1; padding: 24px 18px; }

  .pakket-rij { grid-template-columns: 1fr; gap: 26px; }
  .pk-populair { transform: none; order: -1; }
  .pakket-voet { display: flex; flex-wrap: wrap; gap: 7px; }
  .pakket-voet span { background: var(--paneel); border: 1px solid var(--rand); border-radius: 99px; padding: .3em .85em; font-size: .8rem; }
  .pakket-voet span:not(:last-child)::after { content: none; }
  .sectie-l { width: 170px; height: 170px; font-size: 96px; top: -50px; left: -50px; }
  .sectie-l-rechts { left: auto; right: -50px; top: auto; bottom: -50px; }

  /* Eén DOM, twee weergaven (Sean 3 sept: "naast elkaar, ook op telefoon, zoals het eerst
     was"; Doorga: de tekst niet twee keer in de DOM). Op een smal scherm vallen de twee
     panelen uiteen tot rijen: de panelen en hun lijsten worden display:contents, de losse
     items vallen kolom voor kolom in één raster, dus links ✕ en rechts ✓ op dezelfde regel.
     Rij 1 = de twee koppen, rij 2-7 = de zes paren, rij 8 = het citaat, rij 9 = de knop.
     Verandert het aantal punten, dan hier de rijen mee veranderen (de poort bewaakt dat de
     paren op één lijn liggen). */
  .vs-in { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(9, auto); grid-auto-flow: column; column-gap: 12px; row-gap: 0; align-items: start; }
  .vs-paneel, .vs-paneel ul { display: contents; }
  .vs-paneel h3 { margin: 0 0 4px; font-size: .78rem; letter-spacing: .05em; }
  .vs-hofstad h3 { color: var(--blauw-hel); }
  .vs-paneel li { font-size: .86rem; line-height: 1.45; padding: 11px 0 11px 19px; border-top: 1px solid #C6D9E7; }
  .vs-paneel li::before { top: 11px; }
  .vs-hofstad li { color: var(--inkt); font-weight: 600; }
  .vs-hofstad li::before { color: var(--blauw-hel); }
  .vs-hofstad .vs-bewijs { grid-column: 1 / -1; grid-row: 8; background: #fff; border-left: 3px solid var(--geel); margin: 16px 0; }
  .vs-hofstad .vs-bewijs blockquote { color: var(--inkt); }
  .vs-hofstad .vs-bewijs figcaption { color: var(--blauw-hel); }
  .vs-hofstad .knop { grid-column: 1 / -1; grid-row: 9; width: 100%; }
  .vs-bewijs-grijs, .vs-badge { display: none; }

  .reviews-in { grid-template-columns: 1fr; gap: 36px; }
  .melding:nth-child(2) { transform: none; }
  .melding-groot { transform: none; }

  .kanaal-rij { grid-template-columns: 1fr; gap: 12px; }
  .kanaal { display: grid; grid-template-columns: 42px 1fr; gap: 2px 16px; align-items: center; padding: 16px 18px; }
  .ck-icoon { grid-row: 1 / 3; margin-bottom: 0; }
  .kanaal strong, .kanaal p { grid-column: 2; }

  .agenda { transform: rotate(-1deg); }
  .foot-kolommen { grid-template-columns: 1fr; gap: 26px; }
  .s-calc, .s-pakketten, .s-waarom, .s-reviews { padding: 60px 0; }
  .s-slot { padding: 58px 0; }
}
@media (max-width: 480px) {
  .hero-stats dd { font-size: 1.1rem; }
  .knop-groot { font-size: 1.02rem; }
  h2 { font-size: clamp(2rem, 8.4vw, 2.6rem); }
}
@media (max-width: 340px) {
  .hero-stats { gap: 12px; }
  .hero-stats dd { font-size: 1rem; }
  .hero-stats dt { letter-spacing: .06em; }
}

/* subpagina's */
.hoofdnav a[aria-current="page"] { color: var(--blauw-hel); position: relative; }
.hoofdnav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 3px; border-radius: 2px; background: var(--geel); }
.mobiel-menu a[aria-current="page"] { color: var(--blauw-hel); }

.page-hero { position: relative; overflow: clip; color: #fff; background:
  radial-gradient(80% 100% at 85% -30%, rgba(0, 116, 188, .5), transparent 60%),
  linear-gradient(165deg, var(--blauw-diep) 0%, var(--blauw-nacht) 100%); }
.page-hero .hero-decor { position: absolute; inset: 0; pointer-events: none; overflow: clip; }
.page-hero::after { content: "L"; position: absolute; left: -55px; bottom: -60px; z-index: 1; display: grid; place-items: center; width: 210px; height: 210px; font-size: 120px; font-weight: 800; color: rgba(255, 255, 255, .07); background: rgba(0, 116, 188, .13); border: 2px solid rgba(255, 255, 255, .06); border-radius: 18%; transform: rotate(8deg); pointer-events: none; }
.page-hero::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 5px; background: repeating-linear-gradient(90deg, var(--geel) 0 26px, transparent 26px 48px); opacity: .85; }
.page-hero-in { position: relative; z-index: 2; padding-top: 58px; padding-bottom: 54px; max-width: 720px; }
.page-hero .eyebrow { color: #8FC5E8; }
.page-hero h1 { font-size: clamp(2.3rem, 4.6vw, 3.6rem); margin-bottom: 16px; }
.page-hero h1 em { font-style: normal; color: var(--geel); }
.page-sub { font-size: 1.1rem; color: #C3D8E8; max-width: 36em; }
.page-hero .cta-rij { margin-top: 26px; }

/* stappenroute */
.s-route { position: relative; overflow: clip; padding: 72px 0; background: #fff; }
.route-rij { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 38px; }
.route-weg { position: absolute; left: -28px; right: -28px; top: 26px; height: 34px; border-radius: 99px; background: linear-gradient(180deg, #26313A 0%, #2E3A44 100%); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .35); }
.route-weg::after { content: ""; position: absolute; left: 22px; right: 22px; top: 15px; height: 4px; background: repeating-linear-gradient(90deg, var(--geel) 0 18px, transparent 18px 34px); border-radius: 2px; opacity: .95; }
.route-stap { position: relative; background: var(--paneel); border: 1px solid var(--rand); border-radius: var(--rond); margin-top: 80px; padding: 40px 22px 22px; }
.route-nr { position: absolute; top: -66px; left: 50%; transform: translateX(-50%); display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--blauw-hel); color: #fff; font-weight: 800; font-size: 1.35rem; border: 4px solid #fff; box-shadow: 0 8px 20px rgba(4, 31, 51, .35); }
.route-nr::after { content: ""; position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%); width: 3px; height: 16px; border-radius: 2px; background: var(--geel); }
.route-stap h3 { font-size: 1.08rem; margin-bottom: 8px; }
.route-stap p { font-size: .9rem; color: var(--grijs); }
.route-stap:last-child .route-nr { background: var(--geel); color: #241A00; }

.s-duo { position: relative; overflow: clip; padding: 72px 0; background: linear-gradient(180deg, #E7F1F8 0%, #DCEAF4 100%); border-top: 1px solid #CBDDEB; }
.s-duo > .wrap, .s-route > .wrap { position: relative; z-index: 2; }
.duo-in { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.duo-in > figure { margin: 0; position: relative; }
.duo-in img { width: 100%; border-radius: var(--rond); box-shadow: var(--schaduw-diep); }
.duo-fotochip { position: absolute; left: 14px; bottom: 14px; background: var(--geel); color: #241A00; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; border-radius: 99px; padding: .4em 1em; }
.duo-punten { list-style: none; padding: 0; display: grid; gap: 12px; margin-top: 22px; }
.duo-punten li { position: relative; padding-left: 26px; color: var(--grijs); }
.duo-punten li strong { color: var(--inkt); }
.duo-punten li::before { content: "\2713"; position: absolute; left: 0; color: var(--blauw-hel); font-weight: 800; }

/* infoband */
.s-band { position: relative; overflow: clip; color: #fff; padding: 64px 0; background:
  radial-gradient(80% 90% at 90% -20%, rgba(0, 116, 188, .5), transparent 60%),
  linear-gradient(160deg, var(--blauw-diep) 0%, var(--blauw-nacht) 100%); }
.band-in { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.s-band h2 { color: #fff; }
.s-band h2 em { color: var(--geel); }
.s-band p { color: #C3D8E8; max-width: 36em; }
.band-kaart { background: #fff; color: var(--inkt); border-radius: 18px; box-shadow: 0 24px 60px rgba(2, 20, 34, .5); padding: 26px 28px; transform: rotate(-1.2deg); }
.band-kaart h3 { font-size: 1.05rem; margin-bottom: 12px; }
.band-kaart ul { list-style: none; padding: 0; display: grid; gap: 10px; font-size: .92rem; color: var(--grijs); }
.band-kaart li { position: relative; padding-left: 24px; }
.band-kaart li::before { content: "\2713"; position: absolute; left: 0; color: var(--geel); font-weight: 800; }

/* losse tarieven */
/* Hier stond een streepjesbalk op de bovenrand (::before, top: 0). Die had exact hetzelfde
   patroon als de onderstreping onder de prijs, dus elke kaart had twee identieke streepjes-
   lijnen, en de bovenste lag half over de afgeronde hoek — dat las als een fout in plaats van
   als versiering. De pakketkaarten hebben alleen de onderstreping; nu deze ook. */

/* mini-tickets */
.ticket-rij { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 30px; }
.ticket-mini { position: relative; background: var(--paneel); border: 1px solid var(--rand); border-radius: 14px; padding: 20px 20px 18px 34px; overflow: hidden; }
.ticket-mini::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 14px; background: repeating-linear-gradient(45deg, var(--geel) 0 10px, #EBAD00 10px 20px); }
.ticket-mini::after { content: ""; position: absolute; left: 19px; top: 6px; bottom: 6px; width: 0; border-left: 2px dashed #C9D8E4; }
.ticket-mini strong { display: block; font-size: 1.02rem; margin-bottom: 3px; }
.ticket-mini small { font-size: .85rem; color: var(--grijs); }

/* reviews-grid */
.s-reviewgrid { padding: 72px 0; background: var(--grond); }
.reviews-kolommen { columns: 2; column-gap: 18px; margin-top: 34px; }
.reviews-kolommen .melding { break-inside: avoid; margin: 0 0 18px; transform: none; }
.reviews-kolommen .melding blockquote { font-size: .93rem; }
.m-titel { font-weight: 800; font-size: 1rem; margin-bottom: 6px; }
.melding-groot .m-titel { color: #fff; }

/* cta-band */
.cta-band { position: relative; overflow: clip; color: #fff; padding: 60px 0; text-align: center; background:
  radial-gradient(70% 90% at 50% 130%, rgba(0, 116, 188, .5), transparent 65%),
  linear-gradient(180deg, var(--blauw-diep) 0%, var(--blauw-nacht) 100%); }
.s-band + .cta-band { border-top: 1px solid rgba(255, 255, 255, .14); }
.cta-band h2 { color: #fff; }
.cta-band h2 em { color: var(--geel); }
.cta-band-in { position: relative; z-index: 2; display: grid; justify-items: center; gap: 10px; }
.cta-band .cta-rij { justify-content: center; margin-top: 14px; }
.cta-band p { color: #AECAE0; max-width: 38em; }

/* contact */
.s-kanalen { padding: 72px 0; background: #fff; }
.kanaal-rij-licht { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 30px; }
.kanaal-licht { display: block; background: var(--paneel); border: 1.5px solid var(--rand); border-radius: 16px; padding: 22px; text-decoration: none; color: var(--inkt); transition: transform .15s ease, border-color .15s ease; }
.kanaal-licht:hover { transform: translateY(-3px); border-color: var(--blauw-hel); }
.kanaal-licht strong { display: block; font-weight: 800; font-size: 1.05rem; margin-bottom: 3px; }
.kanaal-licht p { font-size: .86rem; color: var(--grijs); line-height: 1.5; }
.kanaal-noot { margin-top: 18px; background: var(--blauw-lucht); border-radius: 12px; padding: 14px 18px; font-size: .92rem; color: var(--blauw-diep); }
.s-contactvorm { padding: 72px 0; background: linear-gradient(180deg, #E7F1F8 0%, #DCEAF4 100%); border-top: 1px solid #CBDDEB; }
.contactvorm-in { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: start; }
.plaatsen-licht { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.plaatsen-licht li { background: #fff; border: 1px solid var(--rand); color: var(--grijs); font-size: .8rem; font-weight: 600; border-radius: 99px; padding: 0; }
.plaatsen-licht li > a, .plaatsen-licht li > span { display: block; padding: var(--chip-y) var(--chip-x); color: inherit; text-decoration: none; }
.plaatsen-licht li > a:hover { color: var(--blauw-hel); }

@media (max-width: 940px) {
  .page-hero-in { padding-top: 42px; padding-bottom: 44px; }
  .page-hero::after { width: 150px; height: 150px; font-size: 86px; left: -45px; bottom: -45px; }

  .route-rij { grid-template-columns: 1fr; gap: 14px; margin-top: 30px; padding-left: 56px; }
  .route-weg { left: 10px; right: auto; top: -4px; bottom: -4px; width: 34px; height: auto; border-radius: 99px; }
  .route-weg::after { left: 15px; right: auto; top: 20px; bottom: 20px; width: 4px; height: auto; background: repeating-linear-gradient(180deg, var(--geel) 0 18px, transparent 18px 34px); }
  .route-stap { margin-top: 0; padding: 20px 20px 18px; }
  .route-nr { top: 20px; left: -53px; transform: none; width: 48px; height: 48px; font-size: 1.15rem; }
  .route-nr::after { top: 50%; left: calc(100% + 3px); transform: translateY(-50%); width: 12px; height: 3px; }

  .duo-in, .band-in, .contactvorm-in { grid-template-columns: 1fr; gap: 34px; }
  .ticket-rij { grid-template-columns: 1fr; gap: 12px; }
  .reviews-kolommen { columns: 1; }
  .kanaal-rij-licht { grid-template-columns: 1fr; gap: 12px; }
  .s-route, .s-duo, .s-reviewgrid, .s-kanalen, .s-contactvorm { padding: 56px 0; }
  .s-band, .cta-band { padding: 52px 0; }
  .band-kaart { transform: rotate(-1deg); }
}
@media (max-width: 480px) {
}

/* juridisch */
.jur-terug { margin-left: auto; text-decoration: none; font-weight: 700; font-size: .92rem; }
.jur { padding: 56px 0 80px; }
.jur .wrap { max-width: 760px; }
.jur h1 { font-size: clamp(2rem, 5vw, 2.8rem); margin-bottom: 12px; }
.jur h2 { font-size: 1.25rem; margin: 26px 0 8px; }
.jur .jur-art { font-weight: 800; font-size: .78rem; letter-spacing: .07em; text-transform: uppercase; color: var(--blauw-hel); margin: 14px 0 6px; }
.jur p strong { color: var(--inkt); margin-right: .35em; }
.jur p { color: var(--grijs); }
.jur-intro { font-size: 1.05rem; margin-bottom: 8px; }
.jur-lijst { list-style: none; padding: 0; display: grid; gap: 10px; margin-top: 18px; }
.jur-lijst li { position: relative; padding: 12px 16px 12px 34px; background: #fff; border: 1px solid var(--rand); border-left: 4px solid var(--geel); border-radius: 10px; color: var(--grijs); }
.jur-lijst li::before { content: "\2713"; position: absolute; left: 12px; font-weight: 800; color: var(--blauw-hel); }

/* contactstap in de calculator */
.calc-vraag input[type="text"], .calc-vraag input[type="tel"], .calc-vraag input[type="email"] { position: static; opacity: 1; width: 100%; font: inherit; font-size: 16px; padding: .7em .9em; border: 1.5px solid #C7D6E2; border-radius: 10px; background: #fff; color: var(--inkt); }
.calc-vraag input[type="text"]:focus, .calc-vraag input[type="tel"]:focus, .calc-vraag input[type="email"]:focus { outline: 2px solid var(--blauw-hel); outline-offset: 1px; }
.cv-veldlabel { font-size: .82rem; font-weight: 700; }
.cv-sub { font-size: .9rem; color: var(--grijs); font-weight: 400; }
.cv-noot { font-size: .8rem; color: var(--grijs); }
.cr-ontvangen { background: #EDF7EE; border: 1px solid #C6E5C9; border-radius: 12px; padding: 10px 14px; text-align: left; font-size: .88rem; color: #1F5B28; margin-bottom: 14px; }

/* losse tarieven als tabelletje */
.los-tabel { margin-top: 30px; background: var(--paneel); border: 1px solid var(--rand); border-radius: var(--rond); padding: 22px 26px 18px; max-width: 640px; }
.los-tabel h3 { font-size: 1.02rem; margin-bottom: 2px; }
.lt-noot { font-size: .85rem; color: var(--grijs); margin-bottom: 12px; }
.los-tabel table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.los-tabel th { text-align: left; font-weight: 600; color: var(--grijs); padding: .5em 0; }
.los-tabel td { text-align: right; font-weight: 800; color: var(--blauw); padding: .5em 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.los-tabel tr + tr th, .los-tabel tr + tr td { border-top: 1px solid var(--rand); }
.lt-meer { margin-top: 12px; font-size: .86rem; }
/* homepage en plaatspagina's: de losse tarieven staan alleen op /tarieven (Sean 3 sept), onder de kaarten alleen nog een verwijzing */
.pk-los { margin-top: 28px; text-align: center; color: var(--grijs); }

/* pakketten vergelijken op een smal scherm */
.pk-tabel { display: none; }
.pk-tabelwrap { background: #fff; border: 1.5px solid var(--rand); border-radius: var(--rond); overflow: hidden; }
.pk-tabel table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.pk-tabel thead th, .pk-tabel thead td { background: var(--blauw-diep); color: #fff; font-weight: 800; padding: .7em .5em; text-align: center; font-size: .82rem; }
.pk-tabel thead th span { display: block; font-size: .6rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--geel); }
.pk-tabel tbody th { text-align: left; font-weight: 600; color: var(--grijs); padding: .65em .6em; border-top: 1px solid var(--rand); }
.pk-tabel tbody td { text-align: center; font-weight: 800; color: var(--inkt); padding: .65em .35em; border-top: 1px solid var(--rand); font-variant-numeric: tabular-nums; }
.pk-tabel tbody td:nth-child(3) { background: #EAF3FA; }
.pk-tabel thead th:nth-child(3) { background: var(--blauw-hel); }
.pk-tabel .pk-t-bespaar td { color: var(--blauw-hel); }
.pk-tabelnoot { font-size: .8rem; color: var(--grijs); margin-top: 12px; }
.pk-tabel .knop { width: 100%; margin-top: 14px; }
@media (max-width: 940px) {
  .pakket-rij { display: none; }
  .pk-tabel { display: block; margin-top: 30px; }
}

/* lesfabriek op een smal scherm: dezelfde twee panelen, gestapeld (één keer in de DOM,
   want de aparte rijen-variant verdubbelde de tekst die Google leest) */

/* veelgestelde vragen */
.s-faq { padding: 72px 0; text-align: center; background: linear-gradient(180deg, #E7F1F8 0%, #DCEAF4 100%); border-top: 1px solid #CBDDEB; }
.faq-lijst { max-width: 780px; margin: 26px auto 0; display: grid; gap: 10px; text-align: left; }
.faq-item { background: #fff; border: 1px solid var(--rand); border-radius: 12px; }
.faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 12px; justify-content: space-between; padding: 14px 18px; font-weight: 700; font-size: .97rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; flex: none; font-weight: 800; color: var(--blauw-hel); font-size: 1.25rem; line-height: 1; transition: transform .15s ease; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:focus-visible { outline: 2px solid var(--blauw-hel); outline-offset: -2px; border-radius: 12px; }
.faq-a { padding: 0 34px 14px 18px; color: var(--grijs); font-size: .92rem; }
@media (prefers-reduced-motion: reduce) { .faq-item summary::after { transition: none; } }

/* bedanktpagina */
.bd-stappen { list-style: none; padding: 0; display: grid; gap: 12px; margin: 24px auto 8px; counter-reset: bd; max-width: 560px; text-align: left; }
.bd-stappen li { position: relative; counter-increment: bd; background: #fff; border: 1px solid var(--rand); border-radius: 12px; padding: 13px 16px 13px 58px; color: var(--grijs); font-size: .94rem; }
.bd-stappen li::before { content: counter(bd); position: absolute; left: 14px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--blauw-hel); color: #fff; font-weight: 800; font-size: .95rem; }
.bd-stappen strong { color: var(--inkt); }

/* fotobaan: geen gezichten half afgesneden */
.baan { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%); }
@media (max-width: 720px) {
  html.js .baan-strook { animation: none; }
  .baan { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; -webkit-mask-image: none; mask-image: none; padding-left: 24px; padding-right: 24px; }
  .baan img { scroll-snap-align: center; }
  .baan-strook[aria-hidden="true"] { display: none; }
}

/* volgorde op een smal scherm: eerst kunnen doen, dan lezen */
@media (max-width: 940px) {
  .hero-in { gap: 0; }
  .hero-tekst { display: contents; }
  .hero-in > .proefles-kaart { order: 1; margin-top: 28px; }
  .hero-stats { order: 2; margin-top: 26px; }
  /* de voetnoot hoort direct onder de cijferbalk te blijven. Zonder eigen order zou hij
     bij .hero-tekst { display: contents } vooraan in de hero belanden, ver van het
     sterretje waar hij bij hoort. */
  .hero-noot { order: 3; }
  .calc-pill { order: 0; }
  .calc-punten { order: 2; margin: 24px 0 0; }
  .calc-tekst .knop-blauw { order: 3; margin-top: 16px; }
}

/* het slotformulier op de homepage */
.slot-in .proefles-kaart { width: 100%; max-width: 560px; text-align: left; margin-top: 16px; }

/* vaste knoppenbalk op een telefoon; de chat verhuist mee de balk in */
.actiebalk { display: none; }
@media (max-width: 720px) {
  body.heeft-balk { padding-bottom: 78px; }
  .actiebalk { position: fixed; left: 0; right: 0; bottom: 0; z-index: 65; display: flex; gap: 8px; align-items: stretch; padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px); border-top: 1px solid var(--rand); box-shadow: 0 -10px 30px rgba(4, 31, 51, .14); }
  .ab-proefles { flex: 1; font-size: .95rem; padding: .8em .6em; }
  .ab-wa { flex: none; display: inline-flex; align-items: center; gap: .45em; background: #25D366; color: #06301A; font-size: .95rem; padding: .8em .95em; }
  .ab-chat { flex: none; display: grid; place-items: center; width: 50px; background: var(--blauw-hel); color: #fff; border: 0; border-radius: 12px; cursor: pointer; }
  .ab-chat:focus-visible { outline: 3px solid var(--blauw-hel); outline-offset: 2px; }
  .chatbox .cb-knop { display: none; }
  .cb-paneel { bottom: calc(80px + env(safe-area-inset-bottom)); height: min(560px, calc(100dvh - 96px - env(safe-area-inset-bottom))); }
}

/* kleine correcties op het bovenstaande */
.s-faq { position: relative; overflow: clip; }
.s-faq .wrap { position: relative; z-index: 2; }
.slot-in .proefles-kaart { padding-top: 26px; }
@media (max-width: 720px) {
  /* de vaste balk onderaan heeft dezelfde twee knoppen al */
  .hero .cta-rij { display: none; }
  .hero-in > .proefles-kaart { margin-top: 24px; }
}

/* intro boven de vouw: puur CSS, zodat de eerste weergave nooit op een script wacht */
@keyframes intro-op { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.intro { animation: intro-op .35s ease backwards; }
.intro + .intro { animation-delay: .07s; }
.intro + .intro + .intro { animation-delay: .14s; }
@media (prefers-reduced-motion: reduce) { .intro { animation: none; } }

/* de slotkaart erft anders de witte sectiekop */
.s-slot .proefles-kaart h2 { color: var(--inkt); font-size: 1.5rem; }

/* vergelijkingstabel faalangstexamen */
.fx-tabel { max-width: 720px; margin-top: 30px; overflow-x: auto; }
.fx-tabel table { width: 100%; border-collapse: collapse; font-size: .92rem; box-shadow: 0 0 0 1.5px var(--rand); border-radius: var(--rond); overflow: hidden; }
.fx-tabel thead th, .fx-tabel thead td { background: var(--blauw-diep); color: #fff; padding: .7em .9em; text-align: left; font-size: .85rem; }
.fx-tabel thead th:last-child { background: var(--blauw-hel); }
.fx-tabel tbody th { text-align: left; font-weight: 600; color: var(--grijs); padding: .65em .9em; border-top: 1px solid var(--rand); background: #fff; }
.fx-tabel tbody td { padding: .65em .9em; border-top: 1px solid var(--rand); background: #fff; font-weight: 700; }
.fx-noot { font-size: .82rem; color: var(--grijs); margin-top: 12px; }
@media (max-width: 480px) { .fx-tabel table { font-size: .84rem; } }

/* doorverwijzing onder een vragenlijst */
.faq-meer { margin-top: 18px; font-size: .9rem; }
.s-faq .faq-meer { text-align: center; }

/* footer met vier kolommen */
.foot-kolommen { grid-template-columns: 1.2fr .7fr .7fr 1fr; }
@media (max-width: 940px) { .foot-kolommen { grid-template-columns: 1fr; } }

/* faalangsttabel op een smal scherm: compacter, geen woorden over drie regels */
@media (max-width: 600px) {
  .fx-tabel table { font-size: .78rem; }
  .fx-tabel thead th, .fx-tabel thead td { padding: .55em .5em; font-size: .74rem; }
  .fx-tabel tbody th, .fx-tabel tbody td { padding: .55em .5em; }
  .fx-tabel tbody th { font-size: .76rem; }
}

/* het verhaal van de instructeur, in zijn eigen woorden */
.verhaal { max-width: 44em; margin-top: 26px; padding: 26px 30px; background: #fff; border: 1px solid var(--rand); border-left: 4px solid var(--geel); border-radius: var(--rond); box-shadow: var(--schaduw); }
.verhaal p { color: var(--grijs); font-size: 1.02rem; line-height: 1.75; }
.verhaal p + p { margin-top: 14px; }
.verhaal-naam { margin-top: 18px; font-size: .84rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--blauw-hel) !important; }
@media (max-width: 480px) { .verhaal { padding: 22px 20px; } .verhaal p { font-size: .97rem; } }

/* links op een donkere band moeten leesbaar blijven */
.s-band p a, .cta-band p a { color: var(--geel); }

/* uitklapmenu in de hoofdnav */
.hoofdnav { align-items: center; gap: 20px; }
.nav-groep { position: relative; }
.nav-knop { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-weight: 600; font-size: .93rem; color: var(--inkt); background: none; border: 0; padding: 0; cursor: pointer; }
.nav-knop:hover, .nav-knop[aria-expanded="true"] { color: var(--blauw-hel); }
.nav-knop:focus-visible { outline: 2px solid var(--blauw-hel); outline-offset: 4px; border-radius: 4px; }
.nav-pijl { transition: transform .15s ease; }
.nav-knop[aria-expanded="true"] .nav-pijl { transform: rotate(180deg); }
.nav-knop.nav-hier { color: var(--blauw-hel); position: relative; }
.nav-knop.nav-hier::after { content: ""; position: absolute; left: 0; right: 16px; bottom: -6px; height: 3px; border-radius: 2px; background: var(--geel); }
.nav-uit { position: absolute; top: calc(100% + 12px); left: -14px; z-index: 60; display: none; min-width: 234px; padding: 8px; background: #fff; border: 1px solid var(--rand); border-radius: 14px; box-shadow: 0 18px 44px rgba(5, 46, 74, .18); }
.nav-uit::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav-groep[data-open] .nav-uit { display: grid; }
.nav-uit a { display: block; padding: .5em .75em; border-radius: 9px; font-size: .9rem; font-weight: 600; color: var(--inkt); text-decoration: none; }
.nav-uit a:hover { background: var(--blauw-lucht); color: var(--blauw); }
.nav-uit a[aria-current="page"] { color: var(--blauw-hel); background: var(--blauw-lucht); }
@media (prefers-reduced-motion: reduce) { .nav-pijl { transition: none; } }

/* mobiel menu met kopjes en subitems */
.mm-kop { font-size: .72rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--blauw-hel); margin: 14px 0 2px; }
.mm-kop:first-child { margin-top: 0; }
@media (max-width: 940px) {
  html.js .mobiel-menu { -webkit-overflow-scrolling: touch; }
  .mobiel-menu a.mm-sub { font-size: 1.02rem; padding: 12px 0; }
  .mobiel-menu a[aria-current="page"] { color: var(--blauw-hel); }
  .mobiel-menu .knop { margin-top: 20px; }
}
@media (max-width: 400px) {
  .mobiel-menu a.mm-sub { font-size: .96rem; padding: 11px 0; }
}

/* knoppen in het slot van de homepage, in plaats van een tweede formulier */
.slot-cta { justify-content: center; margin-top: 8px; }

/* het uitgeklapte mobiele menu: eerste kopje vrij van de kop, laatste knop vrij van de balk */
@media (max-width: 940px) {
  html.js .mobiel-menu { padding: 14px 26px calc(26px + env(safe-area-inset-bottom)); }
}
@media (max-width: 720px) {
  html.js body.heeft-balk .mobiel-menu { padding-bottom: calc(26px + env(safe-area-inset-bottom)); }
}

/* staat de vaste balk er al, dan is dezelfde knop in het menu dubbelop */
@media (max-width: 720px) {
  html.js body.heeft-balk .mobiel-menu .knop { display: none; }
  html.js body.heeft-balk .mobiel-menu { padding-bottom: calc(26px + env(safe-area-inset-bottom)); }
}

/* een kop die tegelijk een link is, blijft een kop */
.route-stap h3 a { color: inherit; text-decoration: none; }
.route-stap h3 a:hover { color: var(--blauw-hel); text-decoration: underline; }
.calc-los { margin-top: 12px; font-size: .88rem; color: var(--grijs); }

/* ============ eigen elementen per pagina ============ */

/* tijdbalk: momenten op een asfaltstrook (proefles-uur, leeftijden) */
.s-tijd { position: relative; overflow: clip; padding: 72px 0; background: #fff; }
.tijdbalk { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 46px; }
.tijdbalk::before { content: ""; position: absolute; left: -28px; right: -28px; top: 14px; height: 30px; border-radius: 99px; background: linear-gradient(180deg, #26313A 0%, #2E3A44 100%); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .35); }
.tijdbalk::after { content: ""; position: absolute; left: 20px; right: 20px; top: 27px; height: 4px; background: repeating-linear-gradient(90deg, var(--geel) 0 18px, transparent 18px 34px); border-radius: 2px; }
.tijdbalk-drie { grid-template-columns: repeat(3, 1fr); }
.tijd-punt { position: relative; padding-top: 66px; text-align: center; }
.tijd-klok { position: absolute; top: 0; left: 50%; transform: translateX(-50%); display: grid; place-items: center; min-width: 62px; height: 58px; padding: 0 12px; border-radius: 14px; background: var(--blauw-hel); color: #fff; font-weight: 800; font-size: .95rem; border: 4px solid #fff; box-shadow: 0 8px 20px rgba(4, 31, 51, .3); white-space: nowrap; }
.tijd-punt:last-child .tijd-klok { background: var(--geel); color: #241A00; }
.tijd-punt h3 { font-size: 1rem; margin-bottom: 5px; }
.tijd-punt p { font-size: .89rem; color: var(--grijs); }
@media (max-width: 780px) {
  .tijdbalk, .tijdbalk-drie { grid-template-columns: 1fr; gap: 18px; margin-top: 26px; padding-left: 62px; }
  .tijdbalk::before { left: 8px; right: auto; top: -6px; bottom: -6px; width: 30px; height: auto; }
  .tijdbalk::after { left: 21px; right: auto; top: 16px; bottom: 16px; width: 4px; height: auto; background: repeating-linear-gradient(180deg, var(--geel) 0 18px, transparent 18px 34px); }
  .tijd-punt { padding: 0; text-align: left; }
  /* de pil boven de kop: zo kan het label zo breed worden als het wil */
  .tijd-klok { position: static; transform: none; display: inline-grid; min-width: 0; height: auto; padding: .3em .8em; margin-bottom: 8px; font-size: .85rem; border-width: 3px; }
}

/* foto met bijschrift, herbruikbaar */
.beeld { position: relative; margin: 0; }
.beeld img { display: block; width: 100%; height: auto; border-radius: var(--rond); box-shadow: var(--schaduw-diep); }
.beeld figcaption { position: absolute; left: 14px; bottom: 14px; background: var(--geel); color: #241A00; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; border-radius: 99px; padding: .4em 1em; }
.beeld-licht figcaption { background: #fff; color: var(--blauw); box-shadow: var(--schaduw); }

/* twee examen-kaarten naast elkaar (rustiger dan een tabel) */
.ex-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 30px; max-width: 780px; }
.ex-kaart { background: #fff; border: 1.5px solid var(--rand); border-radius: var(--rond); padding: 24px 24px 20px; }
.ex-kaart h3 { font-size: 1.02rem; color: var(--grijs); font-weight: 700; margin-bottom: 4px; }
.ex-tijd { font-size: 1.6rem; font-weight: 800; color: var(--inkt); margin-bottom: 14px; }
.ex-kaart ul { list-style: none; padding: 0; display: grid; gap: 9px; font-size: .89rem; color: var(--grijs); }
.ex-kaart li { position: relative; padding-left: 24px; }
.ex-kaart li::before { content: "\2013"; position: absolute; left: 0; color: #A5B2BC; font-weight: 800; }
.ex-kaart li.ex-ja::before { content: "\2713"; color: var(--blauw-hel); }
.ex-prijs { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rand); font-size: .89rem; color: var(--grijs); }
.ex-prijs strong { color: var(--inkt); font-size: 1.05rem; }
.ex-uitgelicht { background: var(--blauw-lucht); border-color: #BCD9EE; }
.ex-uitgelicht .ex-tijd { color: var(--blauw); }
@media (max-width: 700px) { .ex-duo { grid-template-columns: 1fr; } }

/* overstap-strook: van de ene weg naar de andere */
.wissel { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: center; margin-top: 32px; }
.wissel-kant { background: #ECEFF2; border: 1px solid #DDE3E8; border-radius: var(--rond); padding: 22px 24px; color: #5A6771; }
.wissel-kant h3 { font-size: .95rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #5A6771; margin-bottom: 10px; }
.wissel-kant p { font-size: .9rem; }
.wissel-pijl { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--geel); color: #241A00; box-shadow: 0 10px 26px rgba(246, 181, 0, .45); border: 3px solid #fff; }
.wissel-hier { background: linear-gradient(165deg, #0A4066 0%, var(--blauw-nacht) 100%); border-color: var(--blauw-diep); color: #DCE9F3; box-shadow: 0 20px 46px rgba(4, 31, 51, .35); }
.wissel-hier h3 { color: var(--geel); }
@media (max-width: 700px) {
  .wissel { grid-template-columns: 1fr; gap: 10px; }
  .wissel-pijl { transform: rotate(90deg); justify-self: center; }
}

/* springchips naar blokken op een lange vragenpagina */
.spring { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.spring a { background: #fff; border: 1.5px solid var(--rand); border-radius: 99px; padding: .5em 1.1em; font-size: .88rem; font-weight: 700; color: var(--blauw); text-decoration: none; }
.spring a:hover { border-color: var(--blauw-hel); background: var(--blauw-lucht); }

/* straatnaam- en plaatsborden */
.bord-rij { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.bord { position: relative; background: #fff; border: 3px solid var(--blauw); border-radius: 8px; padding: .55em 1.1em; font-weight: 800; font-size: .95rem; color: var(--blauw); box-shadow: 0 6px 16px rgba(5, 46, 74, .12); }
.bord-blauw { background: var(--blauw); color: #fff; border-color: var(--blauw-diep); }
.bord-noot { margin-top: 16px; font-size: .86rem; color: var(--grijs); }
.bord-verder { margin-top: 10px; }

/* cijferbalk op een lichte sectie */
.cijfers { display: grid; grid-template-columns: repeat(4, auto); gap: 14px 40px; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--rand); width: fit-content; }
.cijfers dt { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--grijs); }
.cijfers dd { margin: 2px 0 0; font-size: 1.5rem; font-weight: 800; color: var(--blauw); }
.cijfers .ster { color: var(--geel); }
@media (max-width: 700px) { .cijfers { grid-template-columns: 1fr 1fr; gap: 16px 24px; } .cijfers dd { font-size: 1.25rem; } }

/* de tijdklok moet zijn eigen tekst kunnen dragen */
.tijd-klok { min-width: 80px; height: 52px; padding: 0 15px; font-size: .92rem; letter-spacing: -.01em; }
@media (max-width: 780px) { .tijd-klok { min-width: 72px; height: 44px; font-size: .86rem; padding: 0 12px; } }

/* drie stappen naast elkaar op een brede sectie */
.bd-drie { max-width: none; margin: 30px 0 0; }
@media (min-width: 781px) { .bd-drie { grid-template-columns: repeat(3, 1fr); } }
.ex-duo { max-width: 880px; }

/* de klok hoort op de weg te liggen, niet eronder */
.tijd-punt { z-index: 1; }
.tijd-klok { z-index: 2; }

/* de reviewkaart toont nu een aantal, geen score */
.score-kaart .score-getal { line-height: 1; }
.score-link { margin-top: 8px; font-size: .86rem; font-weight: 700; color: var(--blauw-hel); }
.tb-sep { opacity: .45; }

/* picture mag de opmaak van de img niet in de weg zitten */
picture { display: contents; }

/* zonder script wordt de kopie-strook nooit gevuld, dus tonen we hem dan ook niet */
html:not(.js) .s-baan { display: none; }

/* op een smal scherm breekt de balk over twee regels; een los scheidingsteken
   aan het regeleinde oogt dan als een fout */
@media (max-width: 600px) {
  .topbar .tb-sep { display: none; }
  .topbar-in { gap: .2em 1.1em; }
}

/* het verhaal met een portret ernaast */
.verhaal-in { display: grid; grid-template-columns: 1.15fr .85fr; gap: 46px; align-items: start; margin-top: 26px; }
.verhaal-in .verhaal { margin-top: 0; }
.verhaal-in .cijfers { width: 100%; }
.portret { margin: 0; }
.portret-plek { display: grid; place-items: center; gap: 12px; aspect-ratio: 4 / 5; border: 2px dashed #BCD4E6; border-radius: var(--rond); background: #fff; color: var(--blauw-hel); text-align: center; }
.portret-plek p { color: var(--grijs); font-size: .92rem; line-height: 1.5; }
.portret-plek strong { display: block; color: var(--inkt); }
.portret-plek span { display: block; font-size: .84rem; }
.portret img { display: block; width: 100%; height: auto; border-radius: var(--rond); box-shadow: var(--schaduw-diep); }
.portret-naam { margin-top: 12px; font-size: .84rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--blauw-hel); text-align: center; }
@media (max-width: 860px) {
  .verhaal-in { grid-template-columns: 1fr; gap: 26px; }
  .portret { max-width: 340px; margin: 0 auto; }
}

/* de plaatshouder als één gecentreerd blok, niet uit elkaar getrokken */
.portret-plek { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; aspect-ratio: 3 / 4; }
.portret-plek p { max-width: 20ch; }

/* ============ over-ons: portret met verhaal ============ */
.s-portret { position: relative; overflow: clip; padding: 76px 0; background: linear-gradient(180deg, #E7F1F8 0%, #DCEAF4 100%); border-top: 1px solid #CBDDEB; }
.s-portret > .wrap { position: relative; z-index: 2; }
.portret-in { display: grid; grid-template-columns: .8fr 1.2fr; gap: 54px; align-items: center; }

/* het portret met een gele plaat erachter, zoals de L-borden elders */
.portret { position: relative; margin: 0; }
.portret::before { content: ""; position: absolute; left: -18px; top: -18px; right: 26px; bottom: 26px; border-radius: var(--rond); background: var(--geel); opacity: .9; }
.portret-plek { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; aspect-ratio: 4 / 5; border: 0; border-radius: var(--rond); background: #fff; color: var(--blauw-hel); text-align: center; box-shadow: var(--schaduw-diep); }
.portret-plek p { max-width: 20ch; color: var(--grijs); font-size: .92rem; line-height: 1.5; }
.portret-plek strong { display: block; color: var(--inkt); }
.portret-plek span { display: block; font-size: .84rem; }
.portret img { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--rond); box-shadow: var(--schaduw-diep); }
.portret-kaartje { position: relative; display: inline-flex; flex-direction: column; margin: -26px 0 0 22px; padding: 12px 20px; background: var(--blauw-diep); color: #fff; border-radius: 12px; box-shadow: 0 14px 34px rgba(4, 31, 51, .35); }
.pk-naam { font-weight: 800; font-size: 1.1rem; letter-spacing: -.01em; }
.pk-rol { font-size: .78rem; color: #9CC4E4; }

/* het citaat als citaat, met een echt aanhalingsteken */
.groot-citaat { position: relative; margin: 20px 0 0; padding-left: 34px; }
.groot-citaat::before { content: "\201C"; position: absolute; left: -6px; top: -18px; font-size: 5rem; line-height: 1; font-weight: 800; color: var(--geel); }
.groot-citaat p { color: var(--grijs); font-size: 1.06rem; line-height: 1.75; }
.groot-citaat p + p { margin-top: 14px; }

/* de cijfers als kaartjes in plaats van een dorre rij */
.feit-rij { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 30px; }
.feit { background: #fff; border: 1px solid var(--rand); border-radius: 14px; padding: 16px 16px 14px; box-shadow: 0 6px 18px rgba(5, 46, 74, .07); }
.feit strong { display: block; font-size: 1.5rem; font-weight: 800; color: var(--blauw); line-height: 1.1; }
.feit span { display: block; margin-top: 3px; font-size: .8rem; color: var(--grijs); }
.feit .ster { color: var(--geel); }
.feit-geel { border-color: #F1D48A; background: linear-gradient(180deg, #FFFDF6 0%, #FFF8E6 100%); }

@media (max-width: 940px) {
  .s-portret { padding: 58px 0; }
  .portret-in { grid-template-columns: 1fr; gap: 34px; }
  .portret { max-width: 340px; }
  .feit-rij { grid-template-columns: 1fr 1fr; }
  .groot-citaat p { font-size: 1rem; }
}
@media (max-width: 420px) {
  .feit-rij { grid-template-columns: 1fr 1fr; gap: 10px; }
  .feit strong { font-size: 1.3rem; }
}

/* de ster hoort naast het cijfer, niet eronder */
.feit strong .ster { display: inline; font-size: 1.1rem; }

/* de drie voordelen als genummerde kaarten */
.voordeel-rij { list-style: none; padding: 0; display: grid; gap: 12px; margin-top: 24px; counter-reset: vd; }
.voordeel { position: relative; counter-increment: vd; background: #fff; border: 1px solid var(--rand); border-radius: 14px; padding: 16px 18px 15px 62px; box-shadow: 0 6px 18px rgba(5, 46, 74, .07); }
.voordeel::before { content: counter(vd); position: absolute; left: 18px; top: 16px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--blauw-hel); color: #fff; font-weight: 800; font-size: .92rem; }
.voordeel h3 { font-size: 1rem; margin-bottom: 3px; }
.voordeel p { font-size: .9rem; color: var(--grijs); }

/* de kop kreeg maar 720 px en brak daardoor over drie regels, met een lege helft
   ernaast. Breder kader en iets kleinere kop: twee regels, minder loze hoogte. */
.page-hero-in { max-width: 900px; padding-top: 52px; padding-bottom: 50px; }
.page-hero h1 { font-size: clamp(2.2rem, 4vw, 3.15rem); }
.page-sub { max-width: 44em; }
@media (max-width: 940px) {
  .page-hero-in { padding-top: 38px; padding-bottom: 40px; }
  .page-hero h1 { font-size: clamp(2rem, 7.6vw, 2.6rem); }
}

/* koppen in een tweekolomssectie zijn kleiner dan een paginakop, anders breken ze */
.band-in h2, .duo-in h2, .contactvorm-in h2, .portret-tekst h2 { font-size: clamp(1.85rem, 3vw, 2.5rem); }

/* afwisselen: bij .gedraaid staat het beeld links en de tekst rechts, zodat niet elke
   sectie op een pagina hetzelfde ritme heeft */
.duo-in.gedraaid > *:first-child, .band-in.gedraaid > *:first-child, .contactvorm-in.gedraaid > *:first-child { order: 2; }
.duo-in.gedraaid > *:last-child, .band-in.gedraaid > *:last-child, .contactvorm-in.gedraaid > *:last-child { order: 1; }
.band-in.gedraaid { grid-template-columns: .9fr 1.1fr; }
.duo-in.gedraaid { grid-template-columns: .95fr 1.05fr; }
.contactvorm-in.gedraaid { grid-template-columns: 1.05fr 1fr; }
@media (max-width: 940px) {
  /* op een telefoon staat alles onder elkaar en houdt de tekst de leiding */
  .duo-in.gedraaid > *:first-child, .band-in.gedraaid > *:first-child, .contactvorm-in.gedraaid > *:first-child { order: 1; }
  .duo-in.gedraaid > *:last-child, .band-in.gedraaid > *:last-child, .contactvorm-in.gedraaid > *:last-child { order: 2; }
  .band-in.gedraaid, .duo-in.gedraaid, .contactvorm-in.gedraaid { grid-template-columns: 1fr; }
}

/* staat de korte tekst rechts naast een lang formulier, dan oogt centreren rustiger */
@media (min-width: 941px) { .contactvorm-in.gedraaid { align-items: center; } }


/* cookiemelding als gecentreerde pop-up met verduisterde achtergrond. Je kunt er
   niet langs scrollen en niet omheen klikken: er wordt dus altijd een keuze gemaakt.
   Wie al gekozen heeft ziet hem nooit — het script in de <head> zet het attribuut
   vóór de eerste weergave, dus geen flits en geen layoutsprong. */
.toestemming { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgba(4, 31, 51, .62); backdrop-filter: blur(3px); }
html[data-toestemming] .toestemming { display: none; }
.toestemming-in { width: min(460px, 100%); max-height: calc(100dvh - 40px); overflow-y: auto; padding: 28px 30px; background: #fff; color: var(--grijs); border-radius: 18px; border-top: 4px solid var(--geel); box-shadow: 0 30px 80px rgba(4, 31, 51, .5); }
.toestemming-kop { font-family: inherit; font-weight: 800; color: var(--inkt); font-size: 1.18rem; line-height: 1.25; margin-bottom: 10px; }
.toestemming p { font-size: .92rem; line-height: 1.6; margin: 0; }
.toestemming a { color: var(--blauw-hel); }
.toestemming-knoppen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
/* gelijkwaardig: weigeren is even groot, even zwaar en even bereikbaar als accepteren */
.toestemming .knop { width: 100%; min-height: 48px; padding: .75em 1em; font-size: .95rem; justify-content: center; }
.knop-lijn-donker { background: #fff; color: var(--inkt); border: 2px solid var(--rand); }
.knop-lijn-donker:hover { border-color: var(--blauw-hel); color: var(--blauw-hel); }
/* de pagina staat stil zolang de keuze open staat */
body.toestemming-open { overflow: hidden; }
@media (max-width: 480px) {
  .toestemming { padding: 16px; }
  .toestemming-in { padding: 22px 20px; }
  .toestemming-kop { font-size: 1.08rem; }
  .toestemming p { font-size: .88rem; }
  .toestemming-knoppen { grid-template-columns: 1fr; gap: 8px; }
}


/* actiebadge. De ruimte staat er altijd, ook als er geen actie loopt: een badge die
   na het laden verschijnt zou de kaart laten verspringen. Zonder actie is hij leeg
   en onzichtbaar, maar hij houdt wel zijn regel. */
.pk-actiebadge { min-height: 26px; margin-bottom: 6px; }
.pk-actiebadge:empty { visibility: hidden; }
/* De ruimte wordt gereserveerd zodat de prijzen op alle drie de kaarten op dezelfde
   hoogte blijven als er op één kaart een actie loopt. Loopt er in de héle rij geen
   actie, dan is er niets om uit te lijnen en is het een gat van 32px voor niets.
   Browsers zonder :has() slaan deze regel over en houden de oude, veilige reservering. */
.pakket-rij:not(:has(.pk-actiebadge:not(:empty))) .pk-actiebadge:empty {
  min-height: 0; height: 0; margin-bottom: 0; overflow: hidden;
}
.pk-actiebadge span { display: inline-block; background: var(--geel); color: #241A00; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; border-radius: 99px; padding: .3em .9em; }
.pk-actiebadge .pk-actietot { display: block; margin-top: 4px; font-size: .74rem; font-weight: 600; color: var(--grijs); text-transform: none; letter-spacing: 0; }

/* naam bij de geslaagden (Emrah, 01-09). Een voornaam maakt een foto van een geslaagde
   een persoon in plaats van een plaatje. Het bordje ligt in de hoek en dekt geen gezicht. */
.baan-foto { position: relative; margin: 0; flex: none; }
.baan-foto figcaption { position: absolute; left: 10px; bottom: 10px; background: rgba(255, 255, 255, .94); color: var(--inkt); font-size: .78rem; font-weight: 800; border-radius: 99px; padding: .3em .85em; box-shadow: 0 3px 10px rgba(4, 31, 51, .18); }

/* de pakketprijs is de regel waar het om draait; die mag eruit springen (Emrah, 31-08) */
.pk-tabel tr.pk-rij-prijs { background: #EAF3FA; }
.pk-tabel tr.pk-rij-prijs th, .pk-tabel tr.pk-rij-prijs td { color: var(--blauw); font-weight: 800; }

/* sterretje bij "gratis" in de cijferbalk, met de voorwaarde eronder. Een sterretje
   zonder voetnoot zou een claim zonder onderbouwing zijn. */
.stat-ster { font-size: .7em; vertical-align: super; color: var(--geel); margin-left: 1px; }
.hero-noot { margin-top: 10px; font-size: .78rem; color: #93BAD6; }

/* "Ook los te boeken". Stond eerder als zes grote kaarten in een eigen sectie eronder;
   dat maakte de pagina lang en druk (Sean, 3 sept). Nu compacte gegroepeerde lijstjes
   binnen de pakketsectie, zodat alles over geld bij elkaar staat.
   dl en dd krijgen expliciet margin 0: de site heeft geen globale reset, en de
   browsermarge van 40px op dd zou de prijskolom uit de rechterkant duwen. */
.tarief-los { margin-top: 46px; }
.tarief-los h3 { font-size: 1.16rem; font-weight: 800; margin-bottom: 16px; }
.tarief-groepen { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; align-items: start; }
.tarief-groep { background: var(--paneel); border: 1px solid var(--rand); border-radius: var(--rond); padding: 16px 20px 10px; box-shadow: 0 6px 18px rgba(5, 46, 74, .07); }
.tarief-groep h4 { font-size: .72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--blauw-hel); margin: 0 0 2px; }
.tarief-groep dl { margin: 0; }
.tarief-regel { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 11px 0; border-top: 1px solid var(--rand); }
.tarief-groep dl > .tarief-regel:first-child { border-top: 0; }
.tarief-regel dt { font-size: .92rem; font-weight: 700; }
.tarief-regel dt small { display: block; margin-top: 2px; font-size: .78rem; font-weight: 400; line-height: 1.45; color: var(--grijs); }
.tarief-regel dd { margin: 0; font-size: 1rem; font-weight: 800; color: var(--blauw-hel); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 940px) { .tarief-groepen { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .tarief-groepen { grid-template-columns: 1fr; } }

/* Het contactblok stond in twee kolommen: links een bovenkopje, een kop en één alinea,
   rechts het formulier. Op vrijwel elke pagina droeg die linkerkolom drie regels tekst en
   verder een halve schermbreedte wit (Sean, 3 sept). Nu één gecentreerde kolom: de tekst
   boven het formulier, het formulier breder en in het midden.
   700px is bewust de bovengrens — breder wordt een formulier juist slechter leesbaar,
   want dan lopen label en invoerveld te ver uit elkaar. */
.contactvorm-in,
.contactvorm-in.gedraaid {
  grid-template-columns: minmax(0, 1000px);
  justify-content: center;
  gap: 30px;
  text-align: center;
}
/* .gedraaid zette het formulier links; in één kolom betekent dat alleen nog "formulier
   boven de tekst", en dat is nooit de bedoeling geweest. Alleen hier uitzetten:
   .duo-in en .band-in gebruiken dezelfde vlag wél nog. */
.contactvorm-in.gedraaid > *:first-child { order: 1; }
.contactvorm-in.gedraaid > *:last-child { order: 2; }
/* De tekst blijft smaller dan het formulier: een regellengte van ~40em leest prettig,
   en de smallere tekstkolom boven de bredere kaart geeft het blok een punt. */
.contactvorm-in > :not(.proefles-kaart) { max-width: 40em; margin-inline: auto; }
.contactvorm-in h2 { text-wrap: balance; }
/* Alleen de intro is gecentreerd. In het formulier zelf blijft alles links uitgelijnd,
   anders moet het oog per veld opnieuw de beginpositie zoeken. */
.contactvorm-in .proefles-kaart { text-align: left; }
@media (max-width: 940px) { .contactvorm-in, .contactvorm-in.gedraaid { gap: 26px; } }


/* Bij een kaart van 700px bleef 51% van het scherm leeg: 370px aan élke kant. De kaart
   is nu 1000px, en dán moeten de velden per twee — een voornaamveld van 900px breed is
   erger dan het gat dat we oplossen.
   Alleen in dit blok: het formulier in de hero van de homepage is half zo breed en
   moet één kolom blijven. */
@media (min-width: 721px) {
  .s-contactvorm .proefles-kaart { padding-left: 40px; padding-right: 40px; }
  .s-contactvorm .proefles-form { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; align-items: start; }
  /* de bestaande .veld-2-paren worden broers in hetzelfde raster, zodat álle velden in
     één stroom per twee vallen — in dezelfde volgorde als de tabvolgorde */
  .s-contactvorm .proefles-form > .veld-2 { display: contents; }
  .s-contactvorm .proefles-form > .kaart-knop,
  .s-contactvorm .proefles-form > .pf-fout,
  .s-contactvorm .proefles-form > .kaart-alt { grid-column: 1 / -1; }
  /* Oneven aantallen: laat het laatste veld de rij afmaken in plaats van een half gat.
     Zonder opmerkingenveld (10 pagina's) is "Wanneer kun je het best?" de laatste;
     op /voor-ouders, met een veld extra, is het opmerkingenveld dat. */
  .s-contactvorm .proefles-form:not(:has(#pf-opm)) .veld-2 > div:has(#pf-dag) { grid-column: 1 / -1; }
  .s-contactvorm .proefles-form:has(#pf-voorwie) > .veld:has(#pf-opm) { grid-column: 1 / -1; }
}

/* /tarieven: het formulier staat in de hero (boven de vouw, Doorga 3 sept); de kop is
   langer dan op de homepage en mag dus iets kleiner */
.hero-tarieven h1, .hero-proefles h1, .hero-regio h1 { font-size: clamp(2.2rem, 4.2vw, 3.3rem); }
.hero-noot a { color: #C3D8E8; text-decoration: underline; text-underline-offset: 3px; }
.hero-noot a:hover { color: #fff; }
.contactvorm-in .cta-rij { justify-content: center; }

/* plaatspagina's (3 sept): het plaatsgebonden blok in de stijl van de donkere band van home
   en tarieven — tekst en punten links, de wegen en de CBR-route in een kaart rechts */
.band-punten { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; font-size: .95rem; }
.band-punten li { position: relative; padding-left: 24px; color: #DCE9F3; }
.band-punten li strong { color: #fff; }
.band-punten li::before { content: "\2713"; position: absolute; left: 0; color: var(--geel); font-weight: 800; }
.band-verder { margin-top: 18px; font-size: .92rem; }
.s-band-plaats .band-kaart { transform: none; }
.s-band-plaats .band-kaart li strong { color: var(--inkt); }
.s-band-plaats .band-kaart p { color: var(--grijs); margin-top: 14px; font-size: .88rem; }

/* homepage-hero (4 sept): "Vandaag aanmelden, morgen starten." — letterlijk, op besluit van Sean
   (4 sept, na Emrahs herhaalde verzoek); zijn voorwaarden 1.6 regelen ziekte/uitval */
.hero-snel { display: inline-block; margin: -8px 0 22px; padding: .5em 1.05em; border-radius: 99px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); color: #fff; font-weight: 700; font-size: .95rem; line-height: 1.35; }
.hero-snel span { color: var(--geel); text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; margin-right: .5em; }
@media (max-width: 940px) { .hero-snel { margin: -6px 0 18px; font-size: .9rem; } }

/* plaatspagina's (4 sept, Doorga): per plaats het ophaalgebied, twee of drie oefenwegen en de
   route naar het CBR — drie kaarten in de stijl van de tariefgroepen op /tarieven */
.s-lokaal { padding: 72px 0; background: #fff; text-align: center; }
.lokaal-rij { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 30px; text-align: left; align-items: start; }
.lokaal-kaart { background: var(--paneel); border: 1px solid var(--rand); border-radius: var(--rond); padding: 24px 24px 20px; box-shadow: 0 6px 18px rgba(5, 46, 74, .07); }
.lokaal-kaart h3 { font-size: .74rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--blauw-hel); margin: 0 0 10px; }
.lokaal-kaart p { color: var(--grijs); font-size: .94rem; }
.lokaal-kaart ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.lokaal-kaart li { position: relative; padding-left: 22px; color: var(--grijs); font-size: .92rem; }
.lokaal-kaart li::before { content: "\2713"; position: absolute; left: 0; color: var(--blauw-hel); font-weight: 800; }
.lokaal-kaart li strong { color: var(--inkt); }
@media (max-width: 940px) {
  .s-lokaal { padding: 56px 0; }
  .lokaal-rij { grid-template-columns: 1fr; gap: 12px; }
}