/* Bijrijder. Colours and type come from the brand guide (Studio SMART, October 2026).
   Layout follows hi-fi round 2 in Figma: aubergine top, white cards, the road and the two dots. */
@font-face { font-family: "Gabarito"; src: url("/assets/fonts/gabarito-latin.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("/assets/fonts/atkinson-next-latin.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }

:root {
  --room: #F6EFE4; --wit: #FFFFFF; --klei: #E9B8A6; --aub: #2E2235; --abri: #EE8A4F; --abd: #A94C1B;
  --sub: #5A4D5F; --ph: #7A6F7E; --lijn: #E6DACB; --weg: #E7DCCB; --eiland: #DCE5D3; --rood: #B3261E;
  --kop: "Gabarito", system-ui, sans-serif; --tekst: "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px; --s9: 112px;
  --rand: 20px; --max: 1200px; --r-kaart: 24px; --r-veld: 14px;
  --schaduw: 0 18px 40px -18px rgba(46, 34, 53, .28);
  --zacht: cubic-bezier(.3, .7, .2, 1);
}
@media (min-width: 720px) { :root { --rand: 40px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body { margin: 0; background: var(--room); color: var(--aub); font: 400 17px/1.55 var(--tekst); overflow-x: clip; }
@media (min-width: 720px) { body { font-size: 18px; } }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--kop); line-height: 1.05; margin: 0; letter-spacing: -0.015em; text-wrap: balance; }
h1 { font-size: clamp(48px, 6.4vw + 12px, 112px); font-weight: 700; letter-spacing: -0.025em; line-height: .98; }
h2 { font-size: clamp(32px, 2.6vw + 20px, 56px); font-weight: 700; }
h3 { font-size: 21px; font-weight: 600; }
p { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--abri); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--s4); top: -60px; z-index: 30; background: var(--abri); color: var(--aub); padding: var(--s3) var(--s4); border-radius: 10px; font-weight: 600; }
.skip:focus { top: var(--s4); }
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--rand)); margin: 0 auto; padding: 0 var(--rand); }
.smal { max-width: calc(820px + 2 * var(--rand)); }
.intro { font-size: 19px; line-height: 1.6; color: var(--sub); max-width: 600px; }
@media (min-width: 720px) { .intro { font-size: 21px; } }
.klein { font-size: 15px; color: var(--sub); }
.kicker { font: 600 14px/1.2 var(--tekst); letter-spacing: .08em; text-transform: uppercase; color: var(--abd); }

/* buttons and links */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 52px; padding: 12px 28px; border-radius: 999px; border: 2px solid var(--abri); background: var(--abri); color: var(--aub); font: 600 17px/1.2 var(--tekst); text-decoration: none; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s, transform .2s var(--zacht); }
.knop:hover { background: #F29C69; border-color: #F29C69; }
.knop:active { transform: translateY(1px); }
.knop--lijn { background: transparent; border-color: var(--aub); }
.knop--lijn:hover { background: rgba(46, 34, 53, .07); border-color: var(--aub); }
.knop--licht { background: transparent; border-color: var(--room); color: var(--room); }
.knop--licht:hover { background: rgba(246, 239, 228, .1); border-color: var(--room); }
.knop--donker { background: var(--aub); border-color: var(--aub); color: var(--room); }
.knop--donker:hover { background: #45354F; border-color: #45354F; }
.knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.link { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; padding: 0; border: 0; background: none; color: var(--abd); font: 600 17px/1.3 var(--tekst); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; cursor: pointer; }
.link:hover { text-decoration-thickness: 2px; }
.link:hover .pijl { transform: translateX(3px); }
.pijl { text-decoration: none; display: inline-block; transition: transform .2s var(--zacht); }

/* concept bar */
.conceptbalk { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 var(--s3); padding: var(--s2) var(--rand); background: var(--klei); color: var(--aub); font-size: 14px; line-height: 1.4; text-align: center; }
.conceptbalk__meer { display: none; }
@media (min-width: 720px) { .conceptbalk__meer { display: inline; } }
.conceptbalk__knop { min-height: 32px; padding: 0 2px; border: 0; background: none; color: var(--aub); font: 700 14px var(--tekst); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* header: aubergine on every page */
.kop { position: sticky; top: 0; z-index: 20; background: var(--aub); color: var(--room); }
.kop__in { display: flex; align-items: center; gap: var(--s3); max-width: calc(var(--max) + 2 * var(--rand)); margin: 0 auto; padding: var(--s3) var(--rand); }
.kop__logo { display: block; flex: none; width: 100px; margin-right: auto; }
@media (min-width: 360px) { .kop__logo { width: 112px; } }
@media (min-width: 720px) { .kop__in { gap: var(--s4); } .kop__logo { width: 140px; } }
.kop__links { list-style: none; margin: 0; padding: 0; display: none; }
.kop__links a { display: block; padding: var(--s3) 0; font-weight: 500; text-decoration: none; text-underline-offset: 8px; text-decoration-thickness: 2px; }
.kop__links a:hover { text-decoration: underline; text-decoration-color: var(--klei); }
.kop__links a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--abri); }
.knop--kop { min-height: 48px; padding: 10px 18px; font-size: 16px; }
@media (min-width: 720px) { .knop--kop { padding-inline: 22px; } }
.knop--kop .lang { display: none; }
.knop--kop[aria-current="page"] { background: transparent; color: var(--room); }
.kop__menu { min-height: 44px; padding: 0 var(--s2); border: 0; background: none; color: var(--room); font: 600 16px var(--tekst); cursor: pointer; }
.kop.is-open .kop__links { display: block; position: absolute; left: 0; right: 0; top: 100%; padding: var(--s3) var(--rand) var(--s6); background: var(--aub); border-top: 1px solid rgba(233, 184, 166, .25); box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .5); }
.kop.is-open .kop__links a { font: 600 28px/1.2 var(--kop); padding: var(--s3) 0; }
html:not(.js) .kop__in { flex-wrap: wrap; }
html:not(.js) .kop__menu { display: none; }
html:not(.js) .kop__links { display: flex; flex-wrap: wrap; gap: 0 var(--s4); order: 3; width: 100%; }
@media (min-width: 960px) {
  .kop__in { padding-block: var(--s4); }
  .kop__nav { margin-left: auto; }
  .kop__logo { margin-right: 0; }
  .kop__links, html:not(.js) .kop__links { display: flex; gap: var(--s6); order: 0; width: auto; margin-right: var(--s4); }
  .kop__menu { display: none; }
  .knop--kop .lang { display: inline; } .knop--kop .kort { display: none; }
}

/* home hero: the two dots, you and your instructor */
.held { position: relative; overflow: clip; background: var(--aub); color: var(--room); padding: var(--s4) 0 calc(var(--s7) + 40px); }
.held__rij { display: flex; flex-direction: column; }
.held__tekst { order: 2; position: relative; }
.held__plaats { display: none; color: var(--klei); font-weight: 600; font-size: 15px; margin-bottom: var(--s3); }
@media (min-width: 560px) { .held__plaats { display: block; } }
.held h1 span { display: block; }
.held .intro { color: var(--klei); margin: var(--s4) 0 var(--s5); }
.held .knoppen .knop { flex: 1 1 100%; }
.duo { order: 1; position: relative; display: flex; align-items: center; margin: 0 calc(-1 * var(--rand)) var(--s4) 0; padding-left: 22%; }
.duo span { display: grid; place-items: center; flex: none; width: 136px; height: 136px; border-radius: 50%; font: 600 17px/1.1 var(--kop); text-align: center; }
@media (min-width: 560px) and (max-width: 959px) {
  .duo { justify-content: flex-end; padding-left: 0; margin: 0 calc(-1 * var(--rand) - 64px) var(--s5) 0; }
  .duo span { width: 230px; height: 230px; }
  .duo .duo__jij { font-size: 28px; }
  .duo .duo__ander { margin-left: 2px; padding-left: var(--s5); font-size: 18px; }
}
/* on short phones the price goes before the decoration */
@media (max-width: 559px) and (max-height: 720px) { .duo { display: none; } }
.duo .duo__jij { z-index: 1; background: var(--abri); color: var(--aub); font-size: 24px; }
.duo .duo__ander { justify-items: start; margin-left: -28px; padding: 0 0 0 44px; background: var(--room); color: var(--aub); }
@media (min-width: 560px) { .held .knoppen .knop { flex: 0 0 auto; } }
@media (min-width: 960px) {
  .held { padding: var(--s8) 0 calc(var(--s9) + 60px); }
  .held__rij { flex-direction: row; align-items: center; gap: var(--s6); min-height: 520px; }
  .held__tekst { order: 1; flex: 0 0 54%; }
  .held__plaats { font-size: 17px; margin-bottom: var(--s4); }
  .held .intro { margin: var(--s5) 0 var(--s6); max-width: 560px; }
  /* the instructor dot is cut off by the window edge, but always shows 190 px, so its label stays whole */
  .duo { --d: clamp(240px, 40vw - 150px, 480px); order: 2; flex: 1; justify-content: flex-end; height: auto; padding: 0; margin: 0 calc(190px - var(--d) - max(var(--rand), (100vw - var(--max)) / 2)) 0 0; }
  .duo span { width: var(--d); height: var(--d); }
  .duo .duo__jij { font-size: 32px; }
  .duo .duo__ander { margin-left: 2px; padding-left: var(--s5); font-size: 20px; }
}
/* the dots slide together once when the page opens; motion only, never hidden, so a stalled animation can't lose them */
@media (prefers-reduced-motion: no-preference) {
  .js .duo__jij { animation: binnen-jij .9s var(--zacht); }
  .js .duo__ander { animation: binnen-ander 1.1s var(--zacht); }
}
@keyframes binnen-jij { from { transform: translateX(-20px) scale(.94); } }
@keyframes binnen-ander { from { transform: translateX(48px); } }

/* subpage hero */
.subkop { position: relative; overflow: clip; background: var(--aub); color: var(--room); padding: var(--s7) 0 var(--s8); }
.subkop .wrap { position: relative; z-index: 1; }
.subkop h1 { font-size: clamp(44px, 4.4vw + 16px, 88px); max-width: 13ch; }
.subkop .intro { color: var(--klei); margin-top: var(--s4); }
.subkop .knoppen { margin-top: var(--s5); }
.subkop__stip { position: absolute; display: none; right: -120px; top: 50%; width: 420px; height: 420px; margin-top: -210px; border-radius: 50%; background: var(--abri); }
.subkop__stip::after { content: ""; position: absolute; left: -84px; bottom: 36px; width: 64px; height: 64px; border-radius: 50%; background: var(--room); }
@media (min-width: 1040px) { .subkop { padding: var(--s8) 0 var(--s9); } .subkop__stip { display: block; } }

/* quick answers: white cards that overlap the dark hero */
.snel { position: relative; z-index: 2; margin-top: -48px; }
.snel__rij { display: grid; gap: var(--s3); }
.snel__kaart { display: flex; align-items: flex-start; gap: var(--s4); padding: var(--s4) var(--s5); border-radius: var(--r-kaart); background: var(--wit); box-shadow: var(--schaduw); }
.snel__kaart .badge { width: 44px; height: 44px; }
.snel__kaart .badge .icoon { width: 26px; height: 26px; }
.snel__vraag { font-size: 15px; color: var(--sub); }
.snel__antwoord { font: 600 18px/1.35 var(--kop); margin-top: 2px; }
@media (min-width: 720px) {
  .snel__rij { grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
  .snel__kaart { flex-direction: column; gap: var(--s3); padding: var(--s5); }
  .snel__kaart .badge { width: 52px; height: 52px; }
}
@media (min-width: 960px) { .snel { margin-top: -88px; } }
@media (min-width: 1024px) {
  .snel__rij { gap: var(--s5); }
  .snel__kaart { flex-direction: row; gap: var(--s4); padding: var(--s5) var(--s5) var(--s6); }
  .snel__antwoord { font-size: 20px; }
}

/* the route from above, with your car */
.route { padding: var(--s8) 0 var(--s8); }
.route__kop { margin-bottom: var(--s6); }
.route__kop .intro { margin-top: var(--s3); }
.route__weg { display: none; }
.route__haltes { position: relative; list-style: none; margin: 0; padding: 72px 0 var(--s5) 84px; display: grid; gap: var(--s4); }
.route__haltes::before { content: ""; position: absolute; left: 12px; top: -12px; bottom: 0; width: 56px; border-radius: 28px; background: var(--weg); }
/* centre line, with the part you have driven in apricot (--gereden is set by js/main.js) */
.route__haltes::after { content: ""; position: absolute; left: 37px; top: 12px; bottom: 20px; width: 6px; background: linear-gradient(var(--abri), var(--abri)) 0 0 / 6px var(--gereden, 0px) no-repeat, linear-gradient(var(--wit) 55%, transparent 0) 1.5px 0 / 3px 22px repeat-y; }
.route__halte { position: relative; padding: var(--s5); border-radius: var(--r-kaart); background: var(--wit); box-shadow: var(--schaduw); transition: transform .5s var(--zacht), box-shadow .5s; }
.route__halte h3 { margin-bottom: var(--s1); }
.route__halte p { color: var(--sub); font-size: 16px; }
.route__n { position: absolute; z-index: 1; left: -68px; top: 22px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--aub); color: var(--room); font: 700 18px var(--kop); transition: background-color .4s, color .4s, transform .4s var(--zacht); }
.route__halte.is-bereikt .route__n { background: var(--abri); color: var(--aub); transform: scale(1.08); }
.route__wegje { position: absolute; z-index: 2; left: 23px; top: 4px; width: 34px; pointer-events: none; will-change: transform; }
.route__wegje svg { width: 34px; height: auto; }
html:not(.js) .route__wegje { display: none; }
@media (min-width: 720px) and (max-width: 1099px) { .route__haltes { max-width: 760px; } }
@media (min-width: 1100px) {
  .route { padding: var(--s9) 0 calc(var(--s9) + 40px); }
  .route__kaart { position: relative; aspect-ratio: 1200 / 1300; }
  .route__kop { position: absolute; left: 0; top: 0; width: 42%; margin: 0; }
  .route__weg { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .route__haltes { position: absolute; inset: 0; padding: 0; display: block; }
  .route__haltes::before, .route__haltes::after, .route__wegje, .route__n { display: none; }
  .route__halte { position: absolute; width: clamp(260px, 26%, 330px); padding: var(--s5) var(--s5) var(--s6); }
  .route__halte--1 { left: 75.5%; top: 0; }
  .route__halte--2 { left: 25.5%; top: 31%; }
  .route__halte--3 { left: 49%; top: 63.5%; }
  .route__halte--4 { left: 38%; top: 93%; }
  .route__halte.is-bereikt { transform: translateY(-4px); box-shadow: 0 26px 48px -20px rgba(46, 34, 53, .4); }
}
.weg { fill: none; stroke: var(--weg); stroke-width: 96; stroke-linecap: round; }
.weg__streep { fill: none; stroke: var(--wit); stroke-width: 4; stroke-dasharray: 22 18; stroke-linecap: round; }
.weg__spoor { fill: none; stroke: var(--abri); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.halte circle { fill: var(--aub); transition: fill .4s; }
.halte text { fill: var(--room); font: 700 24px var(--kop); text-anchor: middle; transition: fill .4s; }
.halte.is-bereikt circle { fill: var(--abri); }
.halte.is-bereikt text { fill: var(--aub); }
.auto__lijf { fill: var(--abri); }
.auto__ruit { fill: #F6C4A5; }
.auto__jij { fill: var(--aub); }
.auto__ander { fill: var(--room); }
.auto--ander .auto__lijf { fill: var(--aub); }
.auto--ander .auto__ruit { fill: #5B4A66; }

/* price and calculator */
.prijsblok { padding: var(--s8) 0; background: var(--wit); }
.prijsblok__rij { display: grid; gap: var(--s7); }
.prijsblok__bedrag { font: 700 clamp(112px, 12vw, 176px)/.9 var(--kop); letter-spacing: -0.04em; margin: var(--s5) 0 var(--s3) -6px; }
.prijsblok__per { color: var(--sub); font-size: 19px; }
.prijsblok__tekst { color: var(--sub); margin: var(--s4) 0 var(--s5); max-width: 440px; }
@media (min-width: 960px) { .prijsblok { padding: var(--s9) 0; } .prijsblok__rij { grid-template-columns: 1fr 1.15fr; gap: var(--s8); align-items: center; } }
.reken { padding: var(--s5); border-radius: var(--r-kaart); background: var(--room); }
@media (min-width: 720px) { .reken { padding: var(--s6) var(--s6) var(--s5); } }
.reken__vraag { display: block; margin: var(--s2) 0 var(--s3); font: 600 22px/1.2 var(--kop); }
.reken__schuif { --p: 48.72%; -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; }
.reken__schuif::-webkit-slider-runnable-track { height: 8px; border-radius: 8px; background: linear-gradient(to right, var(--abri) var(--p), var(--weg) var(--p)); }
.reken__schuif::-webkit-slider-thumb { -webkit-appearance: none; width: 32px; height: 32px; margin-top: -12px; border: 0; border-radius: 50%; background: var(--aub); box-shadow: 0 0 0 4px var(--room); transition: transform .2s var(--zacht); }
.reken__schuif:active::-webkit-slider-thumb { transform: scale(1.12); }
.reken__schuif::-moz-range-track { height: 8px; border-radius: 8px; background: var(--weg); }
.reken__schuif::-moz-range-progress { height: 8px; border-radius: 8px; background: var(--abri); }
.reken__schuif::-moz-range-thumb { width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--aub); box-shadow: 0 0 0 4px var(--room); }
.reken__schuif:focus-visible { outline-offset: 6px; }
.reken__n { display: block; text-align: center; font-weight: 700; font-size: 16px; margin-top: var(--s1); }
.reken__stippen { display: grid; grid-template-columns: repeat(10, 1fr); gap: 10px 0; justify-items: center; margin: var(--s5) 0; }
.reken__stippen i { width: 16px; height: 16px; border-radius: 50%; border: 3px solid var(--aub); transition: background-color .25s, border-color .25s, transform .25s var(--zacht); }
.reken__stippen i.vol { background: var(--abri); border-color: var(--abri); transform: scale(1.06); }
@media (min-width: 480px) { .reken__stippen { grid-template-columns: repeat(20, 1fr); } }
.reken__label { font-size: 15px; color: var(--sub); }
.reken__totaal { display: block; font: 700 clamp(44px, 4vw + 16px, 60px)/1 var(--kop); letter-spacing: -0.02em; margin: var(--s1) 0 var(--s3); font-variant-numeric: tabular-nums; }
.reken__klein { font-size: 15px; color: var(--sub); }

/* instructors */
.mensenblok { padding: var(--s8) 0; }
.mensenblok > .wrap > .intro { margin: var(--s3) 0 var(--s6); }
.mensenblok .link { margin-top: var(--s5); }
.twee, .drie { display: grid; gap: var(--s4); }
@media (min-width: 720px) { .twee { grid-template-columns: repeat(2, 1fr); gap: var(--s5); } .drie { grid-template-columns: repeat(3, 1fr); gap: var(--s6); } }
@media (min-width: 960px) { .mensenblok { padding: var(--s9) 0; } }
.mens { display: flex; flex-direction: column; padding: var(--s5); border-radius: var(--r-kaart); background: var(--wit); box-shadow: var(--schaduw); }
@media (min-width: 720px) { .mens { padding: var(--s7) var(--s6) var(--s6); } }
.mens__kop { display: flex; align-items: center; gap: var(--s5); }
.mens__letter { display: grid; place-items: center; flex: none; width: 76px; height: 76px; border-radius: 50%; font: 700 36px/1 var(--kop); }
.mens__letter--abri { background: var(--abri); color: var(--aub); }
.mens__letter--aub { background: var(--aub); color: var(--room); }
@media (min-width: 720px) { .mens__letter { width: 96px; height: 96px; font-size: 46px; } }
@media (min-width: 1100px) { .mens__letter { width: 132px; height: 132px; font-size: 64px; } }
.mens h3 { font-size: 28px; }
@media (min-width: 720px) { .mens h3 { font-size: 34px; } }
.mens__rol { color: var(--sub); font-size: 15px; margin-top: var(--s1); }
.mens blockquote { margin: var(--s5) 0 var(--s3); }
.mens blockquote p { font: 600 22px/1.3 var(--kop); }
@media (min-width: 720px) { .mens blockquote { margin-top: var(--s6); } .mens blockquote p { font-size: 27px; } }
.mens__tekst { margin-top: auto; color: var(--sub); font-size: 16px; }

/* traffic scenes */
.verkeer { padding: var(--s8) 0; background: var(--aub); color: var(--room); }
.verkeer__rij { display: grid; gap: var(--s6); }
.verkeer .intro { color: var(--klei); margin: var(--s3) 0 var(--s5); }
.tabs { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s4); }
.tab { min-height: 48px; padding: 8px 20px; border: 2px solid var(--room); border-radius: 999px; background: transparent; color: var(--room); font: 600 16px var(--tekst); cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; }
.tab:hover { background: rgba(246, 239, 228, .1); }
.tab[aria-selected="true"] { background: var(--abri); border-color: var(--abri); color: var(--aub); }
.speel { width: 16px; height: 16px; fill: currentColor; }
.verkeer__beeld { max-width: 520px; }
.verkeer__beeld svg { width: 100%; border-radius: var(--r-kaart); }
.scene__tekst { margin-top: var(--s4); font: 600 21px/1.35 var(--kop); color: var(--room); max-width: 520px; }
html:not(.js) .verkeer__speel { display: none; }
/* phones and tablets: the scene first, the choices right under it, so you see what you tap */
@media (max-width: 959px) {
  .verkeer__rij { gap: 0; }
  .verkeer__tekst { display: contents; }
  .verkeer h2 { order: 1; }
  .verkeer .intro { order: 2; }
  .verkeer__beeld { order: 3; margin-bottom: var(--s5); }
  .tabs { order: 4; }
  .verkeer__speel { order: 5; justify-self: start; }
}
@media (min-width: 960px) {
  .verkeer { padding: var(--s9) 0; }
  .verkeer__rij { grid-template-columns: 1fr 1.05fr; gap: var(--s8); align-items: start; }
  .verkeer__tekst { padding-top: var(--s5); }
  .verkeer__beeld { max-width: none; }
  .verkeer .intro { margin-bottom: var(--s6); }
  .tabs { margin-bottom: var(--s6); }
  .scene__tekst { font-size: 24px; }
}
@media (prefers-reduced-motion: no-preference) { .scene.is-aan { animation: scene-in .45s var(--zacht); } }
@keyframes scene-in { from { opacity: .4; transform: translateY(8px); } }
.grond { fill: var(--room); }
.wegen { fill: var(--weg); }
.eiland { fill: var(--eiland); }
.parkeer { fill: #EFE5D6; }
.streep { fill: none; stroke: var(--wit); stroke-width: 3; stroke-dasharray: 16 14; }
.streep--blok { stroke-width: 4; stroke-dasharray: 6 8; }
.spoorlijn { fill: none; stroke: var(--aub); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 0 11; opacity: .85; }

/* questions */
.vragenblok { padding: var(--s8) 0; }
.vragenblok__rij { display: grid; gap: var(--s6); }
.vragenblok .intro { margin: var(--s3) 0 var(--s5); }
.vragenblok .link { margin-top: var(--s3); }
@media (min-width: 960px) { .vragenblok { padding: var(--s9) 0; } .vragenblok__rij { grid-template-columns: .8fr 1.2fr; gap: var(--s8); align-items: start; } }
.vragen { border-top: 1px solid var(--lijn); }
.vraag { border-bottom: 1px solid var(--lijn); }
.vraag summary { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); min-height: 72px; padding: var(--s3) 0; font: 600 20px/1.3 var(--kop); cursor: pointer; list-style: none; }
.vraag summary::-webkit-details-marker { display: none; }
.vraag summary:hover span:first-child { text-decoration: underline; text-decoration-color: var(--abri); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.vraag__teken { position: relative; flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--wit); transition: background-color .2s; }
.vraag__teken::before, .vraag__teken::after { content: ""; position: absolute; width: 14px; height: 2.5px; border-radius: 2px; background: var(--abd); transition: transform .25s var(--zacht); }
.vraag__teken::after { transform: rotate(90deg); }
.vraag[open] .vraag__teken { background: var(--abri); }
.vraag[open] .vraag__teken::before, .vraag[open] .vraag__teken::after { background: var(--aub); }
.vraag[open] .vraag__teken::after { transform: rotate(0deg); }
.vraag p { padding: 0 var(--s7) var(--s5) 0; color: var(--sub); max-width: 640px; }

/* closing band: apricot, the pupil drives on alone */
.afsluiter { overflow: clip; padding: var(--s8) 0; background: var(--abri); color: var(--aub); }
.afsluiter__rij { display: grid; gap: var(--s6); align-items: center; }
.afsluiter h2 { font-size: clamp(40px, 4vw + 20px, 80px); letter-spacing: -0.025em; }
.afsluiter p { margin: var(--s4) 0 var(--s5); max-width: 560px; font-size: 19px; }
.afsluiter .knop--lijn:hover { background: rgba(46, 34, 53, .1); }
.afsluiter .knoppen .knop { flex: 1 1 100%; }
.alleen { width: 100%; max-width: 300px; overflow: visible; }
@media (min-width: 960px) { .alleen { max-width: 420px; } }
.alleen__ring { fill: none; stroke: var(--aub); stroke-width: 7; }
.alleen__ander { fill: var(--room); }
.alleen__spoor { fill: none; stroke: var(--aub); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 0 15; }
.alleen__masker { fill: none; stroke: #fff; stroke-width: 24; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.alleen__jij { fill: var(--aub); }
.alleen__pad { fill: none; }
@media (min-width: 560px) { .afsluiter .knoppen .knop { flex: 0 0 auto; } }
@media (min-width: 960px) { .afsluiter { padding: var(--s9) 0; } .afsluiter__rij { grid-template-columns: 1.3fr 1fr; gap: var(--s8); } .alleen { justify-self: end; } }

/* generic sections */
.blok { padding: var(--s8) 0; }
.blok--wit { background: var(--wit); }
.blok h2 { margin-bottom: var(--s6); }
@media (min-width: 960px) { .blok { padding: var(--s9) 0; } }
.reden { padding: var(--s5); border-radius: var(--r-kaart); background: var(--room); }
.reden h3 { margin: var(--s4) 0 var(--s2); }
.reden p { color: var(--sub); }
.reden a { color: var(--abd); font-weight: 600; }
.badge { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--klei); }
.badge .icoon { width: 32px; height: 32px; }
.lijst { margin: 0; max-width: 820px; }
.lijst div { display: grid; gap: var(--s1); padding: var(--s5) 0; border-bottom: 1px solid var(--lijn); }
.lijst div:first-child { border-top: 1px solid var(--lijn); }
.lijst dt { font: 600 21px var(--kop); }
.lijst dd { margin: 0; color: var(--sub); }
@media (min-width: 720px) { .lijst div { grid-template-columns: 240px 1fr; gap: var(--s5); } }
.beeldrij { display: grid; gap: var(--s6); align-items: center; }
.beeldrij .beeld img { border-radius: var(--r-kaart); width: 100%; height: auto; }
.beeldrij h2 { margin-bottom: var(--s5); }
@media (min-width: 960px) { .beeldrij { grid-template-columns: 1.2fr 1fr; gap: var(--s8); } }
.vinkjes { list-style: none; padding: 0; margin: 0; }
.vinkjes li { position: relative; padding: var(--s4) 0 var(--s4) 40px; border-bottom: 1px solid var(--lijn); font-weight: 500; }
.vinkjes li::before { content: ""; position: absolute; left: 0; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: var(--abri); }
.vinkjes li:has(> .link) { padding-block: var(--s1); }
.tekst h2 { font-size: 28px; margin: var(--s6) 0 var(--s3); }
.tekst h2:first-child { margin-top: 0; }
.tekst p { color: var(--sub); }
.tekst a { color: var(--abd); font-weight: 600; }

/* trial lesson: four steps */
.aanvraagblok { padding: var(--s7) 0 var(--s8); }
.aanvraag { display: grid; gap: var(--s6); }
@media (min-width: 960px) { .aanvraagblok { padding: var(--s8) 0 var(--s9); } .aanvraag { grid-template-columns: 1.35fr 1fr; gap: var(--s7); align-items: start; } }
.stappen-form { display: grid; gap: var(--s5); padding: var(--s5); border-radius: var(--r-kaart); background: var(--wit); box-shadow: var(--schaduw); }
@media (min-width: 720px) { .stappen-form { padding: var(--s7) var(--s7) var(--s6); } }
.voortgang { display: none; align-items: center; gap: 10px; font-size: 14px; color: var(--sub); }
.js .voortgang { display: flex; }
.voortgang i { width: 16px; height: 16px; border-radius: 50%; border: 3px solid var(--aub); transition: background-color .3s, border-color .3s; }
.voortgang i.vol { background: var(--abri); border-color: var(--abri); }
.voortgang span { margin-left: var(--s2); }
.stap { display: grid; gap: var(--s4); margin: 0; padding: 0; border: 0; min-width: 0; }
.stap:focus { outline: none; }
.stap legend { float: left; width: 100%; padding: 0; font: 700 clamp(28px, 2vw + 18px, 38px)/1.1 var(--kop); letter-spacing: -0.015em; }
.stap__hulp { clear: both; color: var(--sub); }
html:not(.js) .stap[data-stap="3"] { display: none; }
html:not(.js) .stap + .stap { padding-top: var(--s5); border-top: 1px solid var(--lijn); }
@media (prefers-reduced-motion: no-preference) { .js .stap.is-nieuw { animation: stap-in .4s var(--zacht); } }
@keyframes stap-in { from { opacity: .4; transform: translateX(16px); } }
.keuzes { display: grid; gap: var(--s3); }
.keuzes--twee { grid-template-columns: 1fr 1fr; }
.keuze { position: relative; }
.keuze input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.keuze span { display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 10px 18px; border: 2px solid var(--aub); border-radius: 999px; background: var(--wit); font: 600 17px var(--tekst); text-align: center; transition: background-color .2s, color .2s; }
.keuze:hover span { background: var(--room); }
.keuze input:checked + span { background: var(--aub); color: var(--room); }
.keuze input:focus-visible + span { outline: 3px solid var(--abri); outline-offset: 3px; }
.veld { display: grid; gap: var(--s2); }
.veld label { font: 600 16px var(--tekst); }
.veld input[type="text"] { width: 100%; min-height: 56px; padding: 14px 18px; border: 2px solid var(--aub); border-radius: var(--r-veld); background: var(--wit); color: var(--aub); font: 400 17px var(--tekst); }
.veld ::placeholder { color: var(--ph); opacity: 1; }
.veld [aria-invalid="true"] { border-color: var(--rood); }
.fout { color: var(--rood); font-size: 15px; font-weight: 600; }
.samen { margin: 0; padding: var(--s4) var(--s5); border-radius: var(--r-veld); background: var(--room); }
.samen div { display: grid; gap: 2px; padding: var(--s3) 0; }
@media (min-width: 420px) { .samen div { grid-template-columns: 96px 1fr; gap: var(--s3); } }
.samen div + div { border-top: 1px solid var(--lijn); }
.samen dt { color: var(--sub); font-size: 15px; }
.samen dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.stappen-form__knoppen { display: flex; gap: var(--s3); padding-top: var(--s2); }
@media (max-width: 479px) { .stappen-form__knoppen .knop { padding-inline: 14px; font-size: 16px; } }
.stappen-form__knoppen [data-volgende], .stappen-form__knoppen [data-verstuur] { flex: 1; }
@media (min-width: 720px) { .stappen-form__knoppen [data-volgende], .stappen-form__knoppen [data-verstuur] { flex: 0 1 auto; min-width: 220px; } }
.aanvraag__zij { display: grid; gap: var(--s4); }
.kaart { padding: var(--s5) var(--s5) var(--s6); border-radius: var(--r-kaart); background: var(--wit); }
.kaart h2 { font-size: 24px; margin-bottom: var(--s3); }
.kaart--donker { background: var(--aub); color: var(--room); }
.kaart ol { margin: 0; padding-left: 22px; }
.kaart--donker ol { color: var(--klei); }
.kaart li + li { margin-top: var(--s2); }
.aanvraag__beeld img { border-radius: var(--r-kaart); width: 100%; }

/* footer */
.voet { background: var(--aub); color: var(--room); padding: var(--s8) 0 var(--s6); }
.voet__rij { display: grid; gap: var(--s6); }
@media (min-width: 720px) { .voet__rij { grid-template-columns: 1.4fr 1fr 1fr; } }
.logo--voet { width: 150px; margin-bottom: var(--s4); }
.voet p { color: var(--klei); max-width: 320px; }
.voet__kop { font: 600 16px var(--kop); margin-bottom: var(--s3); }
.voet ul { list-style: none; margin: 0; padding: 0; }
.voet li a, .voet li button { display: inline-flex; align-items: center; min-height: 40px; padding: 0; border: 0; background: none; color: var(--klei); font: 400 16px var(--tekst); text-decoration: none; cursor: pointer; }
.voet li a:hover, .voet li button:hover { color: var(--room); text-decoration: underline; }
.voet__onder { margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid rgba(233, 184, 166, .3); font-size: 14px; }
.voet__onder p { max-width: none; }
.voet__onder a { color: var(--room); }
.voet__beeld { margin-top: var(--s3); color: var(--klei); }
.voet__beeld summary { cursor: pointer; min-height: 32px; }
.voet__beeld li { margin-top: var(--s1); }

/* concept dialog */
.concept { width: min(560px, calc(100% - 2 * var(--rand))); padding: var(--s6); border: 0; border-radius: var(--r-kaart); background: var(--room); color: var(--aub); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .5); }
.concept::backdrop { background: rgba(46, 34, 53, .6); }
.concept h2 { font-size: 32px; margin: var(--s2) 0 var(--s4); }
.concept p + p { margin-top: var(--s3); }
.concept p { color: var(--sub); }
.concept__knoppen { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }
@media (prefers-reduced-motion: no-preference) { .concept[open] { animation: venster-in .35s var(--zacht); } }
@keyframes venster-in { from { opacity: .4; transform: translateY(16px) scale(.98); } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }