/* BytesNel, nieuwe site (demo). Huisstijl: petrol, creme, wit, mint als klein accent, alleen Inter. */
/* Inter staat op onze eigen server (SIL Open Font License, zie fonts/OFL.txt): geen verzoek naar Google. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root {
  --petrol: #0F766E;
  --petrol-diep: #0B4F4A;
  --petrol-nacht: #08302D;
  --creme: #F7F6F3;
  --creme-2: #EFEDE7;
  --wit: #FFFFFF;
  --mint: #34D399;
  --mint-zacht: #D1FAE5;
  --tekst: #111827;
  --zacht: #4B5563;
  --stil: #5F6670;
  --rand: #E5E2DA;
  --rand-2: #D6D2C7;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --breed: 1600px;
  --rand-x: clamp(20px, 4vw, 72px);
  --kop-h: 72px;
  --r: 14px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0; background: var(--creme); color: var(--tekst);
  font-family: var(--font); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.12; letter-spacing: -0.025em; font-weight: 700; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.wrap { width: 100%; max-width: var(--breed); margin: 0 auto; padding: 0 var(--rand-x); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--mint); outline-offset: 3px; border-radius: 6px; }

/* Demo strook */
.demobar { background: var(--petrol-nacht); color: #E6F4F1; font-size: 13px; text-align: center; padding: 7px 16px; }
.demobar a { color: #fff; }

/* Kop */
.kop { position: sticky; top: 0; z-index: 30; background: rgba(247, 246, 243, .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rand); }
.kop .wrap { display: flex; align-items: center; gap: 24px; height: 72px; }
.merk { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--petrol); flex: none; }
.merk svg { width: 30px; height: 30px; }
.merk b { font-size: 21px; letter-spacing: -0.03em; }
.nav { position: relative; display: flex; gap: 2px; margin-left: 16px; }
.nav a { position: relative; text-decoration: none; color: var(--zacht); font-size: 15px; font-weight: 500; padding: 10px 12px; transition: color .3s; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--tekst); }
.kop-acties { margin-left: auto; display: flex; gap: 10px; align-items: center; }

/* Knoppen */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 999px; font: 600 15.5px/1 var(--font); text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: background .15s, color .15s, border-color .15s; white-space: nowrap; }
.knop svg { width: 18px; height: 18px; flex: none; }
.knop-hoofd { background: var(--petrol); color: #fff; }
.knop-hoofd:hover { background: var(--petrol-diep); }
.knop-rand { border-color: var(--rand-2); color: var(--tekst); background: transparent; }
.knop-rand:hover { border-color: var(--petrol); color: var(--petrol); }
.knop-wit { background: #fff; color: var(--petrol-diep); }
.knop-wit:hover { background: var(--creme); }
.knop-licht { border-color: rgba(255,255,255,.35); color: #fff; }
.knop-licht:hover { background: rgba(255,255,255,.08); }
.knop-klein { min-height: 40px; padding: 0 16px; font-size: 14.5px; }

/* Hero */
.hero { padding: 72px 0 80px; }
.hero .wrap { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; }
.label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--petrol); }
.label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); }
.hero h1 { font-size: clamp(40px, 5.2vw, 80px); margin: 18px 0 22px; letter-spacing: -0.04em; }
.hero h1 em { font-style: normal; color: var(--petrol); }
.hero .intro { font-size: 19px; color: var(--zacht); max-width: 34em; }
.hero .acties { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.feiten { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 32px; color: var(--zacht); font-size: 15px; }
.feiten li { display: flex; align-items: center; gap: 8px; }
.feiten svg { width: 18px; height: 18px; color: var(--petrol); flex: none; }

.hero-kaart { background: var(--wit); border: 1px solid var(--rand); border-radius: 20px; padding: 22px; box-shadow: 0 30px 60px -30px rgba(8, 48, 45, .25); display: grid; gap: 14px; }
.hk-kop { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--stil); }
.hk-kop b { color: var(--tekst); font-size: 15px; }
.pil { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--mint-zacht); color: #047857; }
.pil-stil { background: var(--creme-2); color: var(--zacht); }
.hk-regel { display: flex; gap: 14px; align-items: flex-start; padding: 14px; border-radius: 12px; background: var(--creme); }
.hk-regel .ico { width: 36px; height: 36px; border-radius: 10px; background: var(--wit); border: 1px solid var(--rand); display: grid; place-items: center; color: var(--petrol); flex: none; }
.hk-regel .ico svg { width: 18px; height: 18px; }
.hk-regel b { display: block; font-size: 15px; }
.hk-regel span { font-size: 14px; color: var(--zacht); }
.hk-knoppen { display: flex; gap: 8px; }
.hk-knoppen .knop { flex: 1; }

/* Secties */
.sectie { padding: 96px 0; }
.sectie-wit { background: var(--wit); border-top: 1px solid var(--rand); border-bottom: 1px solid var(--rand); }
.sectie-donker { background: var(--petrol-diep); color: #fff; }
.sectie-kop { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: end; margin-bottom: 48px; }
.sectie-kop h2 { font-size: clamp(32px, 3.6vw, 54px); margin-top: 14px; }
.sectie-kop p { color: var(--zacht); font-size: 18px; max-width: 32em; }
.sectie-donker .sectie-kop p, .sectie-donker .label { color: #E6F4F1; }
.sectie-kop.enkel { grid-template-columns: 1fr; max-width: 760px; }

/* Diensten */
.diensten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.dienst { background: var(--wit); border: 1px solid var(--rand); border-radius: var(--r); padding: 26px; display: flex; flex-direction: column; gap: 12px; text-decoration: none; transition: border-color .15s, transform .15s; min-width: 0; }
a.dienst:hover { border-color: var(--petrol); transform: translateY(-2px); }
.dienst .ico { width: 44px; height: 44px; border-radius: 12px; background: var(--creme); display: grid; place-items: center; color: var(--petrol); }
.dienst .ico svg { width: 22px; height: 22px; }
.dienst h3 { font-size: 22px; }
.dienst p { color: var(--zacht); font-size: 15.5px; }
.dienst .meer { margin-top: auto; padding-top: 8px; font-size: 14.5px; font-weight: 600; color: var(--petrol); }
.dienst-extra { background: var(--petrol); color: #fff; border-color: var(--petrol); justify-content: center; }
.dienst-extra p { color: #D7EEEA; }
.dienst-extra .ico { background: rgba(255,255,255,.12); color: #fff; }

/* Producten */
.producten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.product { border-radius: var(--r); padding: 28px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.product .soort { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mint); }
.product h3 { font-size: 26px; }
.product p { color: #D7EEEA; font-size: 15.5px; }
.product ul { display: grid; gap: 6px; margin-top: 6px; font-size: 15px; color: #EAF6F4; }
.product li { display: flex; gap: 8px; }
.product li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); margin-top: 10px; }
.product .knop { margin-top: auto; align-self: flex-start; }
.product .ruimte { flex: 1; min-height: 8px; }

/* Stappen */
.stappen { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; counter-reset: stap; }
.stap { background: var(--wit); border: 1px solid var(--rand); border-radius: var(--r); padding: 22px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.stap .nr { font-size: 13px; font-weight: 700; color: var(--petrol); letter-spacing: .04em; }
.stap h3 { font-size: 19px; }
.stap p { font-size: 15px; color: var(--zacht); }
.stap .tijd { margin-top: auto; padding-top: 8px; font-size: 13px; font-weight: 600; color: var(--stil); }

/* Lova blok */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.duo h2 { font-size: clamp(32px, 4.2vw, 46px); margin: 14px 0 18px; }
.duo .tekst p { color: var(--zacht); font-size: 18px; }
.vinkjes { display: grid; gap: 12px; margin-top: 24px; }
.vinkjes li { display: flex; gap: 12px; align-items: flex-start; font-size: 16.5px; }
.vinkjes svg { width: 22px; height: 22px; color: var(--petrol); flex: none; margin-top: 2px; }

/* Afspraken */
.afspraken { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.afspraak { border-top: 2px solid var(--petrol); padding-top: 18px; display: grid; gap: 6px; min-width: 0; }
.afspraak .klein { font-size: 13px; font-weight: 600; color: var(--stil); text-transform: uppercase; letter-spacing: .06em; }
.afspraak b { font-size: 20px; letter-spacing: -0.02em; }
.afspraak p { color: var(--zacht); font-size: 15px; }

/* Voor wie */
.branches { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.branche { background: var(--wit); border: 1px solid var(--rand); border-radius: var(--r); padding: 20px; display: grid; gap: 6px; align-content: start; min-width: 0; }
.branche b { font-size: 17px; }
.branche span { font-size: 14.5px; color: var(--zacht); }

/* Prijsband */
.prijsband { background: var(--petrol); color: #fff; border-radius: 24px; padding: 48px; display: grid; grid-template-columns: auto 1fr; gap: 24px 56px; align-items: center; }
.prijsband .van { font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #E6F4F1; }
.prijsband .groot { font-size: clamp(60px, 8vw, 96px); font-weight: 800; letter-spacing: -0.05em; line-height: 1; }
.prijsband .groot small { font-size: 20px; font-weight: 500; letter-spacing: 0; opacity: .8; }
.prijsband ul { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; font-size: 16px; }
.prijsband li { display: flex; gap: 10px; }
.prijsband li svg { width: 20px; height: 20px; color: var(--mint); flex: none; margin-top: 2px; }
.prijsband .acties { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.18); }
.prijsband .fijn { margin-left: auto; font-size: 14.5px; color: #E6F4F1; }

/* Tools */
.tools { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.tool { background: var(--wit); border: 1px solid var(--rand); border-radius: var(--r); padding: 28px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tool .nr { font-size: 13px; font-weight: 700; color: var(--petrol); }
.tool h3 { font-size: 22px; }
.tool p { color: var(--zacht); font-size: 15.5px; }
.tool .knop { margin-top: auto; align-self: flex-start; }
.tool .ruimte { flex: 1; min-height: 8px; }

/* Vragen */
.vragen { display: grid; gap: 10px; max-width: 820px; }
.vraag { background: var(--wit); border: 1px solid var(--rand); border-radius: var(--r); }
.vraag summary { cursor: pointer; list-style: none; padding: 20px 56px 20px 22px; font-weight: 600; font-size: 17px; position: relative; }
.vraag summary::-webkit-details-marker { display: none; }
.vraag summary::after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-size: 24px; font-weight: 400; color: var(--petrol); }
.vraag[open] summary::after { content: "\2212"; }
.vraag p { padding: 0 22px 20px; color: var(--zacht); }

/* Contactblok */
.contact-kop { max-width: 720px; margin-bottom: 36px; }
.contact-kop h2 { font-size: clamp(32px, 4.2vw, 48px); margin: 14px 0 14px; }
.contact-kop p { color: #E6F4F1; font-size: 18px; }
.routes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.route { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); border-radius: var(--r); padding: 24px; display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: #fff; transition: background .15s, border-color .15s; min-width: 0; }
.route:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); }
.route .ico { width: 42px; height: 42px; border-radius: 12px; background: var(--mint); color: var(--petrol-nacht); display: grid; place-items: center; }
.route .ico svg { width: 20px; height: 20px; }
.route b { font-size: 19px; margin-top: 6px; }
.route span { color: #E6F4F1; font-size: 15px; overflow-wrap: anywhere; }

/* Voet */
.voet { background: var(--petrol-nacht); color: #B7D3CF; padding: 56px 0 40px; font-size: 15px; }
.voet .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.voet .merk { color: #fff; }
.voet p { margin-top: 14px; max-width: 26em; }
.voet-kop { color: #fff; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 12px; }
.voet ul { display: grid; gap: 8px; }
.voet a { text-decoration: none; }
.voet a:hover { color: #fff; }
.voet .onder { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; padding-top: 24px; margin-top: 8px; border-top: 1px solid rgba(255,255,255,.12); font-size: 14px; }

/* Paginakop (subpagina's) */
.pagina-kop { padding: 72px 0 40px; }
.pagina-kop h1 { font-size: clamp(38px, 4.6vw, 68px); margin: 16px 0 18px; letter-spacing: -0.04em; max-width: 16em; }
.pagina-kop p { font-size: 19px; color: var(--zacht); max-width: 38em; }
.pagina-kop .acties { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* Dienst detail */
.blok { display: grid; grid-template-columns: 300px 1fr; gap: 40px; padding: 48px 0; border-top: 1px solid var(--rand); }
.blok:first-child { border-top: 0; }
.blok-kop { display: grid; gap: 12px; align-content: start; }
.blok-kop .ico { width: 52px; height: 52px; border-radius: 14px; background: var(--wit); border: 1px solid var(--rand); display: grid; place-items: center; color: var(--petrol); }
.blok-kop .ico svg { width: 24px; height: 24px; }
.blok-kop h2 { font-size: 32px; }
.blok-tekst > p { font-size: 18px; color: var(--zacht); max-width: 36em; }
.lijst { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 22px; }
.lijst li { background: var(--wit); border: 1px solid var(--rand); border-radius: 12px; padding: 14px 16px; display: grid; gap: 2px; min-width: 0; }
.lijst li b { font-size: 16px; }
.lijst li span { font-size: 14.5px; color: var(--zacht); }

/* Pakketten */
.schakel { display: inline-flex; background: var(--creme-2); border-radius: 999px; padding: 4px; gap: 4px; margin-bottom: 28px; }
.schakel button { border: 0; background: transparent; font: 600 15px var(--font); padding: 10px 18px; border-radius: 999px; cursor: pointer; color: var(--zacht); min-height: 44px; }
.schakel button[aria-pressed="true"] { background: var(--wit); color: var(--tekst); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.schakel .pil { margin-left: 6px; }
.pakketten { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.pakket { background: var(--wit); border: 1px solid var(--rand); border-radius: var(--r); padding: 22px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pakket.uit { border: 2px solid var(--petrol); }
.pakket h3 { font-size: 20px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pakket .wat { font-size: 14.5px; color: var(--zacht); min-height: 3em; }
.pakket .prijs { font-size: 38px; font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; }
.pakket .prijs small { font-size: 15px; font-weight: 500; color: var(--stil); letter-spacing: 0; }
.pakket .noot { font-size: 13px; color: var(--stil); min-height: 1.4em; }
.pakket ul { display: grid; gap: 7px; font-size: 14.5px; padding-top: 12px; border-top: 1px solid var(--rand); }
.pakket li { display: flex; gap: 8px; }
.pakket li svg { width: 17px; height: 17px; color: var(--petrol); flex: none; margin-top: 3px; }
.pakket .knop { margin-top: auto; }
.pakket .ruimte { flex: 1; min-height: 6px; }

.tabel-rol { overflow-x: auto; border: 1px solid var(--rand); border-radius: var(--r); background: var(--wit); }
table { border-collapse: collapse; width: 100%; min-width: 680px; font-size: 15px; }
th, td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--rand); vertical-align: top; }
thead th { font-size: 14px; color: var(--stil); font-weight: 600; background: var(--creme); }
tbody th { font-weight: 500; }
tr.groep th { background: var(--creme); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--petrol); font-weight: 700; }
td.ja { color: var(--petrol); font-weight: 600; }
td.nee { color: #6B7280; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }

.ads { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ad { background: var(--wit); border: 1px solid var(--rand); border-radius: var(--r); padding: 22px; display: grid; gap: 6px; }
.ad b { font-size: 18px; }
.ad .prijs { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; }
.ad span { font-size: 14.5px; color: var(--zacht); }

.nietin { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.nietin li { background: var(--wit); border: 1px solid var(--rand); border-radius: 12px; padding: 16px 18px; display: grid; gap: 4px; }
.nietin b { font-size: 16px; }
.nietin span { font-size: 15px; color: var(--zacht); }

/* Over ons */
.waarden { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.waarde { background: var(--wit); border: 1px solid var(--rand); border-radius: var(--r); padding: 28px; display: grid; gap: 10px; align-content: start; }
.waarde b { font-size: 24px; letter-spacing: -0.02em; color: var(--petrol); }
.waarde p { color: var(--zacht); }
.mensen { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.mens { background: var(--wit); border: 1px solid var(--rand); border-radius: var(--r); overflow: hidden; }
.foto-plek { aspect-ratio: 4 / 3; background: repeating-linear-gradient(135deg, var(--creme) 0 14px, var(--creme-2) 14px 28px); display: grid; place-items: center; color: var(--stil); font-size: 14px; font-weight: 600; }
.foto-plek span { background: var(--wit); border: 1px dashed var(--rand-2); border-radius: 999px; padding: 6px 14px; }
.mens .tekst { padding: 20px 22px; display: grid; gap: 4px; }
.mens b { font-size: 18px; }
.mens span { color: var(--zacht); font-size: 15px; }
.scherm-plek { aspect-ratio: 16 / 10; border-radius: 12px; background: repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 14px, rgba(255,255,255,.08) 14px 28px); border: 1px dashed rgba(255,255,255,.25); display: grid; place-items: center; color: #E6F4F1; font-size: 14px; font-weight: 600; }

/* Formulieren */
.formulier { background: var(--wit); border: 1px solid var(--rand); border-radius: 20px; padding: 32px; display: grid; gap: 22px; max-width: 760px; }
.veld { display: grid; gap: 8px; }
.veld > label, .veld > legend, fieldset legend { font-weight: 600; font-size: 16px; padding: 0; }
.veld .hulp { font-size: 14px; color: var(--stil); font-weight: 400; }
fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; min-width: 0; }
input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], textarea, select {
  width: 100%; font: 16px var(--font); color: var(--tekst); background: var(--creme); border: 1.5px solid var(--rand); border-radius: 12px; padding: 13px 14px; min-height: 50px;
}
textarea { min-height: 120px; resize: vertical; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--petrol); background: #fff; }
.twee { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.keuzes { display: flex; flex-wrap: wrap; gap: 8px; }
.keuze { position: relative; }
.keuze input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.keuze span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--rand-2); font-size: 15px; font-weight: 500; background: #fff; transition: all .12s; }
.keuze input:checked + span { background: var(--petrol); border-color: var(--petrol); color: #fff; }
.keuze input:focus-visible + span { outline: 3px solid var(--mint); outline-offset: 2px; }
.upload { border: 1.5px dashed var(--rand-2); border-radius: 12px; padding: 20px; background: var(--creme); display: grid; gap: 6px; }
.upload input { font: 15px var(--font); }
.formulier .klein { font-size: 14px; color: var(--stil); }
.bevestiging { display: none; background: var(--mint-zacht); border: 1px solid #A7F3D0; color: #065F46; border-radius: 14px; padding: 20px 22px; }
.bevestiging.zichtbaar { display: block; }
.bevestiging b { display: block; font-size: 18px; margin-bottom: 4px; }

/* Tool resultaat */
.uitkomst { display: none; background: var(--petrol); color: #fff; border-radius: 16px; padding: 26px; gap: 10px; }
.uitkomst.zichtbaar { display: grid; }
.uitkomst .klein { color: #E6F4F1; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.uitkomst .groot { font-size: 34px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.uitkomst p { color: #E0F2EF; }
.uitkomst ul { display: grid; gap: 6px; color: #E0F2EF; }
.uitkomst li { display: flex; gap: 8px; }
.uitkomst li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); margin-top: 10px; flex: none; }
.uitkomst .acties { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }

/* Responsief */
@media (max-width: 1080px) {
  .stappen { grid-template-columns: repeat(3, 1fr); }
  .branches { grid-template-columns: repeat(3, 1fr); }
  .pakketten { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 960px) {
  .nav, .kop-acties .knop-rand { display: none; }
  .kop-acties { margin-left: 0; }
  .kop.open .nav { display: grid; position: absolute; top: 72px; left: 0; right: 0; background: var(--creme); border-bottom: 1px solid var(--rand); padding: 12px 16px 20px; margin: 0; gap: 2px; }
  .kop.open .nav a { padding: 14px 12px; font-size: 17px; }
  .hero .wrap, .duo, .sectie-kop { grid-template-columns: 1fr; gap: 32px; }
  .diensten, .producten, .routes { grid-template-columns: 1fr 1fr; }
  .afspraken { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
  .prijsband { grid-template-columns: 1fr; padding: 36px 28px; }
  .prijsband .fijn { margin-left: 0; }
  .voet .wrap { grid-template-columns: 1fr 1fr; }
  .blok { grid-template-columns: 1fr; gap: 20px; }
  .waarden { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  :root { --rand-x: 16px; --kop-h: 64px; }
  .kop .wrap { gap: 12px; height: 64px; }
  .kop.open .nav { top: 64px; }
  .merk b { font-size: 19px; }
  .kop-acties .knop-hoofd { min-height: 40px; padding: 0 14px; font-size: 14px; }
  .hero { padding: 48px 0 56px; }
  .hero .intro, .pagina-kop p { font-size: 17px; }
  .hero .acties .knop, .pagina-kop .acties .knop { flex: 1 1 100%; }
  .sectie { padding: 64px 0; }
  .diensten, .producten, .routes, .stappen, .tools, .lijst, .ads, .nietin, .mensen, .twee { grid-template-columns: 1fr; }
  .branches { grid-template-columns: 1fr 1fr; }
  .afspraken { grid-template-columns: 1fr; }
  .pakketten { grid-template-columns: 1fr; }
  .prijsband ul { grid-template-columns: 1fr; }
  .voet .wrap { grid-template-columns: 1fr; }
  .formulier { padding: 22px 18px; }
  .hk-knoppen { flex-direction: column; }
  .pagina-kop { padding: 48px 0 24px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* Formulieren nooit breder dan het scherm */
.formulier, .formulier > *, .veld, .twee > * { min-width: 0; }
.formulier { grid-template-columns: minmax(0, 1fr); }
input[type="file"] { max-width: 100%; font: 15px var(--font); }

/* ===== Animaties (oktober 2026) =====
   Kleine bewegingen zoals op de voorbeeldsite: woorden die opkomen, blokken die
   binnen schuiven, een draaiende kaartenstapel, een loopband, een logo dat bij
   het scrollen inzoomt en een schermvullend menu. Zonder JavaScript of met
   "minder beweging" staat alles gewoon stil in beeld. */
:root { --ease: cubic-bezier(.22, 1, .36, 1); --veer: cubic-bezier(.34, 1.56, .64, 1); }

/* Woorden die vanuit een masker omhoog komen */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.w > span { display: inline-block; }
.anim .w > span { transform: translateY(105%); transition: transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 55ms); }
.anim .zichtbaar .w > span, .anim .w.zichtbaar > span, .anim [data-woorden].zichtbaar .w > span { transform: none; }

/* Blokken die binnen schuiven */
.anim .onthul { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.anim .onthul.zichtbaar { opacity: 1; transform: none; }

/* Knop met ronde pijl die bij hover wegschiet en terugkomt */
.knop-rond { padding-right: 8px; gap: 12px; }
.rond { position: relative; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--mint); color: var(--petrol-nacht); overflow: hidden; flex: none; }
.rond svg { width: 16px; height: 16px; transition: transform .45s var(--ease); }
.rond svg + svg { position: absolute; transform: translate(-150%, 150%); }
a:hover .rond svg:first-child, button:hover .rond svg:first-child { transform: translate(150%, -150%); }
a:hover .rond svg + svg, button:hover .rond svg + svg { transform: none; }
.dienst .meer { display: inline-flex; align-items: center; gap: 10px; }
.dienst .meer .rond { width: 28px; height: 28px; background: var(--creme); color: var(--petrol); transition: background .25s; }
.dienst:hover .meer .rond { background: var(--mint); color: var(--petrol-nacht); }
.dienst .ico { transition: transform .5s var(--veer), background .25s, color .25s; }
a.dienst:hover .ico { transform: rotate(-8deg) scale(1.08); background: var(--petrol); color: #fff; }
.knop-mint { background: var(--mint); color: var(--petrol-nacht); }
.knop-mint:hover { background: #fff; }
.knop-mint svg { width: 16px; height: 16px; }
.knop-mint small { font-weight: 500; opacity: .7; font-size: 13px; }

/* Draaiende kaartenstapel in de hero */
.stapel { position: relative; min-height: 470px; }
.stapel-bol { position: absolute; width: 300px; height: 300px; border-radius: 50%; background: var(--mint); right: -40px; bottom: 10px; opacity: .9; animation: bol 9s ease-in-out infinite; }
@keyframes bol { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-24px, -18px) scale(1.06); } }
.skaart { position: absolute; left: 0; right: 0; top: 10px; background: var(--wit); border: 1px solid var(--rand); border-radius: 20px; padding: 22px; box-shadow: 0 30px 60px -30px rgba(8, 48, 45, .35); display: grid; gap: 14px; transform-origin: 50% 100%; }
.anim .skaart { transition: transform .9s var(--ease), opacity .6s var(--ease); }
.skaart[data-pos="0"] { transform: rotate(-1.5deg); z-index: 4; }
.skaart[data-pos="1"] { transform: translate(26px, -18px) rotate(3deg) scale(.96); z-index: 3; }
.skaart[data-pos="2"] { transform: translate(46px, -32px) rotate(6deg) scale(.92); z-index: 2; opacity: .85; }
.skaart[data-pos="3"] { transform: translate(60px, -42px) rotate(8deg) scale(.88); z-index: 1; opacity: 0; }
.skaart[data-pos="uit"] { transform: translate(-70px, 40px) rotate(-12deg) scale(.96); z-index: 5; opacity: 0; }
.skaart:not([data-pos]) + .skaart:not([data-pos]) { display: none; }
.skaart-mint { background: var(--mint-zacht); border-color: #A7F3D0; }
.skaart-donker { background: var(--petrol-nacht); border-color: var(--petrol-nacht); color: #fff; }
.skaart-donker .hk-kop b { color: #fff; }
.pil-wit { background: #fff; color: var(--petrol); }
.pil-donker { background: rgba(52, 211, 153, .16); color: var(--mint); }
.chat-vraag { display: flex; gap: 12px; align-items: center; background: #fff; border-radius: 14px; padding: 14px 16px; font-size: 15px; color: var(--zacht); }
.chat-vraag svg { width: 20px; height: 20px; color: var(--petrol); flex: none; }
.chat-antwoord { background: #fff; border-radius: 14px; padding: 18px; display: grid; gap: 8px; font-size: 15px; transform: rotate(1deg); box-shadow: 0 20px 40px -24px rgba(8, 48, 45, .4); }
.chat-klein { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--petrol); }
.chat-antwoord ul { display: grid; gap: 4px; color: var(--zacht); }
.chat-antwoord li { display: flex; gap: 8px; }
.chat-antwoord li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); margin-top: 9px; flex: none; }
.plan-lijst { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.plan-lijst li { display: flex; gap: 14px; align-items: center; padding: 13px 14px; border-radius: 12px; background: var(--creme); font-weight: 600; font-size: 15.5px; }
.plan-lijst span { font-size: 12.5px; font-weight: 700; color: var(--petrol); }
.plan-voet { display: flex; justify-content: space-between; align-items: baseline; padding-top: 6px; border-top: 1px solid var(--rand); color: var(--zacht); font-size: 14.5px; }
.plan-voet b { font-size: 26px; color: var(--tekst); letter-spacing: -0.03em; }
.plan-voet small { font-size: 13px; color: var(--stil); font-weight: 500; letter-spacing: 0; }
.melding { display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: 14px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); }
.melding > svg { width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: var(--mint); color: var(--petrol-nacht); flex: none; }
.melding b { display: block; font-size: 15px; }
.melding span { font-size: 13.5px; color: #B7D3CF; }
.melding em { margin-left: auto; font-style: normal; font-size: 13px; font-weight: 600; color: var(--mint); }
.anim .skaart[data-pos="0"] .melding { animation: melding .6s var(--ease) both; }
.anim .skaart[data-pos="0"] .melding:nth-child(3) { animation-delay: .25s; }
.anim .skaart[data-pos="0"] .melding:nth-child(4) { animation-delay: .5s; }
@keyframes melding { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.stapel-punten { position: absolute; left: 0; bottom: 0; display: flex; gap: 8px; }
.stapel-punten button { width: 28px; height: 28px; border: 0; padding: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.stapel-punten button::before { content: ""; width: 9px; height: 9px; border-radius: 99px; background: var(--rand-2); transition: width .4s var(--ease), background .3s; }
.stapel-punten button[aria-pressed="true"]::before { width: 26px; background: var(--petrol); }

/* Loopband */
.loopband { background: var(--petrol-nacht); color: #E6F4F1; overflow: hidden; padding: 18px 0; }
.loop { display: flex; width: max-content; }
.loop-rij { display: flex; align-items: center; gap: 28px; padding-right: 28px; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.loop-rij svg { width: 22px; height: 22px; color: var(--mint); }
.anim .loop { animation: loop 38s linear infinite; }
.loopband:hover .loop { animation-play-state: paused; }
@keyframes loop { to { transform: translateX(-50%); } }

/* Logo dat bij het scrollen inzoomt */
.zoom { position: relative; height: 230vh; background: var(--petrol-nacht); color: #fff; --k: 1; }
.zoom-plak { position: sticky; top: 0; height: 100vh; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; padding: 96px 0 40px; background: radial-gradient(ellipse 60% 50% at 50% 50%, #0E4A44, var(--petrol-nacht) 70%); }
.zoom-kop h2 { font-size: clamp(30px, 4vw, 46px); margin-top: 12px; color: #fff; }
.zoom-kop .label { color: var(--mint); }
.zoom-kop { opacity: calc(var(--k) * 1.6 - .6); transform: translateY(calc((1 - var(--k)) * 30px)); }
.zoom-beeld { position: relative; display: grid; place-items: center; }
.zoom-bol { position: absolute; width: min(42vh, 60vw); aspect-ratio: 1; border-radius: 50%; background: var(--mint); transform: scale(calc(1 + (1 - var(--k)) * 7)); }
.zoom-logo { position: relative; width: min(26vh, 38vw); height: auto; color: var(--petrol-nacht); transform: scale(calc(1 + (1 - var(--k)) * 9)) rotate(calc((1 - var(--k)) * -25deg)); overflow: visible; }
.zoom-logo .zl { transform: translateX(calc((1 - var(--k)) * -3px)); }
.zoom-logo .zr { transform: translateX(calc((1 - var(--k)) * 3px)); }
.zoom-voet { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; color: #E6F4F1; opacity: calc(var(--k) * 2 - 1); }
.zoom-bol, .zoom-logo { will-change: transform; }
html:not(.anim) .zoom { height: auto; }
html:not(.anim) .zoom-plak { position: relative; height: 80vh; min-height: 520px; }

/* Merkfilm venster */
.film { position: fixed; inset: 0; z-index: 60; background: rgba(4, 24, 22, .86); backdrop-filter: blur(8px); display: grid; place-items: center; padding: 24px; }
.film[hidden] { display: none; }
.film-kader { width: min(1100px, 100%); background: var(--petrol-nacht); border-radius: 20px; overflow: hidden; box-shadow: 0 40px 100px -30px rgba(0,0,0,.6); }
.anim .film-kader { animation: kader .6s var(--ease) both; }
@keyframes kader { from { opacity: 0; transform: translateY(30px) scale(.96); } to { opacity: 1; transform: none; } }
.film-kop { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px 12px 22px; color: #E6F4F1; font-size: 14.5px; font-weight: 600; }
.film video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }

/* Schermvullend menu */
.nav a { white-space: nowrap; }
@media (max-width: 1240px) { .kop-acties .knop-rand { display: none; } }
.menu-vol { position: fixed; inset: 0; z-index: 50; background: var(--mint); color: var(--petrol-nacht); overflow-y: auto; }
.menu-vol[hidden] { display: none; }
.anim .menu-vol { animation: menu-in .55s var(--ease) both; }
@keyframes menu-in { from { clip-path: circle(0 at calc(100% - 60px) 40px); } to { clip-path: circle(150% at calc(100% - 60px) 40px); } }
.mv-kop { height: 104px; }
.mv-sluit { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; font: 600 15px var(--font); color: inherit; cursor: pointer; min-height: 44px; padding: 0 6px; }
.mv-sluit svg { width: 20px; height: 20px; }
.mv-lijf { display: grid; grid-template-columns: 1.5fr 1fr; gap: 56px; padding: 40px 0 64px; }
.mv-links { display: grid; }
.mv-links a { display: flex; justify-content: space-between; align-items: center; text-decoration: none; font-size: clamp(30px, 4.4vw, 52px); font-weight: 500; letter-spacing: -0.035em; line-height: 1.15; padding: 6px 0; border-bottom: 1px solid rgba(8, 48, 45, .2); }
.mv-links a svg { width: 26px; height: 26px; transition: transform .35s var(--ease); }
.mv-links a:hover svg { transform: translate(4px, -4px); }
.mv-links a:hover { padding-left: 10px; transition: padding .35s var(--ease); }
.anim .menu-vol .mv-links a { animation: link-in .6s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms + 120ms); }
@keyframes link-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.mv-info { display: grid; gap: 12px; align-content: start; border-left: 1px solid rgba(8, 48, 45, .2); padding-left: 32px; font-size: 17px; }
.mv-info a { display: flex; gap: 10px; align-items: center; text-decoration: none; font-weight: 600; }
.mv-info a:hover { text-decoration: underline; }
.mv-info svg { width: 18px; height: 18px; flex: none; }
.mv-klein { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .7; margin-top: 8px; }
body.menu-open, body.film-open { overflow: hidden; }

@media (max-width: 960px) {
  .menuknop { margin-left: auto; }
  .kop-acties { margin-left: 0; }
  .stapel { min-height: 480px; margin-top: 8px; }
  .mv-lijf { grid-template-columns: 1fr; gap: 32px; }
  .mv-info { border-left: 0; padding-left: 0; }
}
@media (max-width: 640px) {
  .stapel { min-height: 500px; }
  .stapel-bol { width: 200px; height: 200px; right: -30px; }
  .skaart[data-pos="1"] { transform: translate(12px, -14px) rotate(2.5deg) scale(.96); }
  .skaart[data-pos="2"] { transform: translate(20px, -24px) rotate(4.5deg) scale(.92); }
  .zoom { height: 200vh; }
  .zoom-plak { padding: 80px 0 32px; }
  .mv-kop { height: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  .stapel-bol, .loop { animation: none !important; }
}

/* ===== Feedback ronde 2 (26 oktober 2026) =====
   Breder op grote schermen, menu als icoon, ankers die goed landen, kleine
   animaties overal, tools-overzicht, uitgebreide systemen en de intake in vier
   stappen met live voorbeeld. */

/* Ankers: elk doel landt onder de vaste kop */
[id] { scroll-margin-top: calc(var(--kop-h) + 20px); }

/* Streep die onder het menu meeschuift */
.nav-streep { position: absolute; left: 0; bottom: 3px; height: 2px; width: var(--sw, 0); border-radius: 2px; background: var(--petrol); transform: translateX(var(--sx, 0)); opacity: 0; pointer-events: none; }
.nav-streep.aan { opacity: 1; }
.anim .nav-streep.glij { transition: transform .45s var(--ease), width .45s var(--ease), opacity .25s; }
html:not(.js) .nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--petrol); }

/* Menuknop: alleen een icoon, twee lijnen die een kruis worden */
.menuknop { position: relative; display: inline-grid; place-items: center; flex: none; width: 46px; height: 46px; padding: 0; border-radius: 50%; border: 1px solid var(--rand-2); background: transparent; color: var(--tekst); cursor: pointer; transition: border-color .3s, background .3s, transform .3s var(--ease); }
.menuknop:hover { border-color: var(--tekst); }
.menuknop:active { transform: scale(.94); }
.mk-lijn { position: absolute; left: 50%; top: 50%; width: 18px; height: 2px; margin: -1px 0 0 -9px; border-radius: 2px; background: currentColor; transition: transform .5s var(--ease), width .35s var(--ease); }
.mk-lijn:first-child { transform: translateY(-4px); }
.mk-lijn + .mk-lijn { transform: translateY(4px); width: 12px; }
.menuknop:hover .mk-lijn + .mk-lijn { width: 18px; }
.menuknop[aria-expanded="true"] .mk-lijn:first-child { transform: rotate(45deg); }
.menuknop[aria-expanded="true"] .mk-lijn + .mk-lijn { transform: rotate(-45deg); width: 18px; }
body.menu-open .kop { z-index: 55; background: transparent; border-bottom-color: transparent; backdrop-filter: none; }
body.menu-open .kop .merk { color: var(--petrol-nacht); }
body.menu-open .menuknop { border-color: var(--petrol-nacht); color: var(--petrol-nacht); }
.kop .nav, .kop .kop-acties { transition: opacity .3s, visibility .3s; }
body.menu-open .kop .nav, body.menu-open .kop .kop-acties { opacity: 0; visibility: hidden; }
.anim .menu-vol.dicht { animation: menu-uit .45s var(--ease) both; }
@keyframes menu-uit { from { clip-path: circle(150% at calc(100% - 60px) 40px); } to { clip-path: circle(0 at calc(100% - 60px) 40px); } }
.anim .menu-vol.dicht .mv-links a, .anim .menu-vol.dicht .mv-info { animation: link-uit .3s var(--ease) both; }
@keyframes link-uit { to { opacity: 0; transform: translateY(-12px); } }
.anim .menu-vol .mv-info { animation: link-in .6s var(--ease) .35s both; }

/* Kleine animaties: zacht, kort en overal hetzelfde */
.knop { transition: background .25s, color .25s, border-color .25s, transform .35s var(--ease), box-shadow .35s var(--ease); }
.knop:hover { transform: translateY(-1px); }
.knop:active { transform: translateY(0) scale(.97); }
.knop-hoofd:hover { box-shadow: 0 10px 24px -12px rgba(15, 118, 110, .7); }
.knop > svg { transition: transform .35s var(--ease); }
.knop:hover > svg:last-child { transform: translateX(3px); }
.voet ul a, .mv-info a, .blok-tekst p a, .ankers a, .tool-terug { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .4s var(--ease), color .25s; padding-bottom: 1px; }
.voet ul a:hover, .mv-info a:hover, .blok-tekst p a:hover, .ankers a:hover, .tool-terug:hover { background-size: 100% 1px; text-decoration: none; }
.blok-tekst p a { color: var(--petrol); font-weight: 600; background-size: 100% 1px; }
.blok-tekst p a:hover { background-size: 0 1px; }
.product, .pakket, .branche, .stap, .waarde, .ad, .lijst li, .functie, .route { transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s, background .3s; }
.pakket:hover, .branche:hover, .stap:hover, .waarde:hover, .ad:hover, .functie:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -28px rgba(8, 48, 45, .45); }
.lijst li:hover { border-color: var(--rand-2); transform: translateX(3px); }
.product:hover { background: rgba(255, 255, 255, .1); transform: translateY(-3px); }
.route:hover { transform: translateY(-3px); }
.label::before { transition: transform .5s var(--veer); }
.sectie-kop:hover .label::before, .pagina-kop .label::before { transform: scale(1.25); }
.anim .hero .label::before, .anim .intake-kop .label::before { animation: stip 2.4s ease-in-out infinite; }
@keyframes stip { 0%, 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .5); } 50% { box-shadow: 0 0 0 6px rgba(52, 211, 153, 0); } }
input, textarea, select { transition: border-color .25s, background .25s, box-shadow .25s; }
input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 4px rgba(15, 118, 110, .12); }
.keuze span { transition: background .25s, border-color .25s, color .25s, transform .3s var(--veer); }
.keuze:hover span { border-color: var(--petrol); }
.keuze input:checked + span { animation: tik .35s var(--veer); }
@keyframes tik { 50% { transform: scale(.95); } }
.anim .vraag[open] p { animation: open .45s var(--ease) both; }
@keyframes open { from { opacity: 0; transform: translateY(-6px); } }
.vraag summary::after { transition: transform .35s var(--ease); }
.vraag[open] summary::after { transform: translateY(-50%) rotate(180deg); }
.vraag { transition: border-color .3s; }
.vraag:hover { border-color: var(--rand-2); }
.anim .uitkomst.zichtbaar { animation: rijs .6s var(--ease) both; }
@keyframes rijs { from { opacity: 0; transform: translateY(16px); } }
[data-maandprijs] { display: inline-block; transition: opacity .2s, transform .3s var(--ease); }
[data-maandprijs].wissel { opacity: 0; transform: translateY(-6px); }
.tabel-rol tbody tr { transition: background .2s; }
.tabel-rol tbody tr:not(.groep):hover { background: var(--creme); }

/* Tools: overzicht met genummerde kaarten */
.tkaarten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tkaart { position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 300px; padding: 30px; border-radius: 22px; background: var(--wit); border: 1px solid var(--rand); text-decoration: none; overflow: hidden; transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s; }
.tkaart::after { content: ""; position: absolute; width: 220px; height: 220px; right: -90px; top: -90px; border-radius: 50%; background: var(--mint-zacht); transform: scale(.4); opacity: 0; transition: transform .7s var(--ease), opacity .5s; }
.tkaart:hover { transform: translateY(-4px); border-color: var(--rand-2); box-shadow: 0 24px 50px -30px rgba(8, 48, 45, .5); }
.tkaart:hover::after { transform: none; opacity: 1; }
.tkaart > * { position: relative; z-index: 1; }
.tk-nr { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--petrol); color: var(--petrol); font-size: 14px; font-weight: 700; letter-spacing: .02em; transition: background .35s, color .35s; }
.tk-nr svg { width: 20px; height: 20px; }
.tkaart:hover .tk-nr { background: var(--petrol); color: #fff; }
.tk-soort { margin-top: 10px; font-size: 12.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--stil); }
.tkaart h3 { font-size: clamp(22px, 1.9vw, 28px); letter-spacing: -0.03em; }
.tkaart p { color: var(--zacht); font-size: 15.5px; max-width: 30em; }
.tk-meer { margin-top: auto; padding-top: 14px; display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--petrol); }
.tk-meer .rond { width: 30px; height: 30px; background: var(--creme); color: var(--petrol); transition: background .3s; }
.tkaart:hover .tk-meer .rond { background: var(--mint); color: var(--petrol-nacht); }
.tkaart-extra { background: var(--petrol); border-color: var(--petrol); color: #fff; }
.tkaart-extra::after { background: rgba(52, 211, 153, .18); }
.tkaart-extra .tk-nr { border-color: var(--mint); color: var(--mint); }
.tkaart-extra:hover .tk-nr { background: var(--mint); color: var(--petrol-nacht); }
.tkaart-extra .tk-soort { color: #E6F4F1; }
.tkaart-extra p { color: #D7EEEA; }
.tkaart-extra .tk-meer { color: #fff; }
.tkaart-extra .tk-meer .rond { background: rgba(255, 255, 255, .14); color: #fff; }
.pagina-kop-midden { text-align: center; }
.pagina-kop-midden h1, .pagina-kop-midden p { margin-left: auto; margin-right: auto; }
.tools-overzicht { padding-top: 8px; }

/* Tools: elke tool een eigen sectie */
.tool-duo { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; gap: clamp(32px, 5vw, 96px); }
.tool-tekst { position: sticky; top: calc(var(--kop-h) + 32px); }
.tool-noot { margin-top: 16px; font-size: 15.5px !important; padding: 14px 16px; border-left: 2px solid var(--mint); background: rgba(52, 211, 153, .08); border-radius: 0 10px 10px 0; }
.tool-terug { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; font-size: 14.5px; font-weight: 600; color: var(--petrol); }
.tool-terug svg { width: 16px; height: 16px; transform: rotate(-90deg); }
.tool-werk { display: grid; gap: 16px; min-width: 0; }
.tool-werk .formulier { max-width: none; }
.sectie-wit .formulier { background: var(--creme); }
.sectie-wit .formulier input:not([type="radio"]):not([type="checkbox"]):not([type="file"]), .sectie-wit .formulier textarea, .sectie-wit .formulier select { background: #fff; }
.check-groep legend { font-size: 13px !important; font-weight: 700 !important; letter-spacing: .07em; text-transform: uppercase; color: var(--petrol); }
.checks { display: grid; gap: 8px; }
.check { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 13px 14px; border: 1.5px solid var(--rand); border-radius: 12px; background: #fff; cursor: pointer; font-size: 15.5px; transition: border-color .25s, background .25s; }
.check:hover { border-color: var(--rand-2); }
.check input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.check-vak { flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 7px; border: 1.5px solid var(--rand-2); color: #fff; transition: background .25s, border-color .25s, transform .3s var(--veer); }
.check-vak svg { width: 14px; height: 14px; transform: scale(0); transition: transform .3s var(--veer); }
.check input:checked ~ .check-vak { background: var(--petrol); border-color: var(--petrol); }
.check input:checked ~ .check-vak svg { transform: none; }
.check:has(input:checked) { border-color: var(--petrol); background: rgba(15, 118, 110, .04); }
.check input:focus-visible ~ .check-vak { outline: 3px solid var(--mint); outline-offset: 2px; }
.uitkomst .groot { font-size: clamp(36px, 3.4vw, 52px); }
.uitkomst .groot small { font-size: 17px; font-weight: 500; letter-spacing: 0; opacity: .75; }
.balken { display: grid; gap: 10px; margin: 6px 0 4px; }
.balk { display: grid; grid-template-columns: 170px 1fr 34px; gap: 12px; align-items: center; font-size: 14.5px; color: #E0F2EF; }
.balk i { display: block; height: 8px; border-radius: 8px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.balk b { display: block; height: 100%; width: 0; border-radius: 8px; background: var(--mint); transition: width 1s var(--ease); }
.balk em { font-style: normal; font-weight: 700; text-align: right; }
.adviezen { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: adv; color: #E0F2EF; }
.adviezen li { counter-increment: adv; display: flex; gap: 12px; padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, .07); }
.adviezen li::before { content: counter(adv); flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--mint); color: var(--petrol-nacht); font-size: 13px; font-weight: 700; }
.adviezen li b { display: block; color: #fff; }
.uitkomst .adviezen li::before { margin-top: 0; width: 24px; height: 24px; }
.ai-vragen { background: #fff; border: 1px solid var(--rand); border-radius: 20px; padding: 26px; display: grid; gap: 14px; }
.ai-vragen[hidden] { display: none; }
.anim .ai-vragen:not([hidden]) { animation: rijs .6s var(--ease) both; }
.ai-vragen .klein { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--stil); }
.ai-vragen .klein b { color: var(--petrol); text-transform: none; letter-spacing: 0; }
.ai-vragen ol { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ai-vraag { display: grid; gap: 12px; padding: 18px; border-radius: 14px; background: var(--creme); }
.ai-vraag q { font-size: 17px; font-weight: 600; quotes: "\201C" "\201D"; }
.ai-links { display: flex; flex-wrap: wrap; gap: 8px; }
.ai-links a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px; background: #fff; border: 1px solid var(--rand-2); font-size: 14px; font-weight: 600; text-decoration: none; transition: border-color .25s, color .25s; }
.ai-links a:hover { border-color: var(--petrol); color: var(--petrol); }
.ai-links svg { width: 14px; height: 14px; }
.ai-antwoord { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 14.5px; color: var(--zacht); }
.keuzes-klein .keuze span { min-height: 38px; padding: 0 14px; font-size: 14.5px; }
.merk-vragen { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.merk-vragen li { padding: 14px 0; border-bottom: 1px solid var(--rand); }
.merk-vragen li:last-child { border-bottom: 0; }
.merk-vragen legend { display: flex; gap: 12px; font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.mv-nr { flex: none; font-size: 13px; font-weight: 700; color: var(--petrol); padding-top: 2px; }
.merk-vragen .keuzes { padding-left: 32px; }

/* Systemen en producten */
.ankers { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 26px; font-size: 15.5px; font-weight: 600; color: var(--petrol); }
.blok-product { grid-template-columns: minmax(260px, .7fr) minmax(0, 2fr); gap: clamp(32px, 4vw, 72px); }
.blok-product .blok-kop { position: sticky; top: calc(var(--kop-h) + 32px); align-self: start; }
.blok-product .blok-kop p { color: var(--zacht); font-size: 16.5px; }
.blok-knoppen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.functies { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.functie { background: var(--wit); border: 1px solid var(--rand); border-radius: 16px; padding: 22px; display: grid; gap: 12px; align-content: start; min-width: 0; }
.functie h3 { font-size: 18px; letter-spacing: -0.02em; }
.functie ul { display: grid; gap: 8px; font-size: 15px; color: var(--zacht); }
.functie li { display: flex; gap: 10px; align-items: flex-start; }
.functie li svg { width: 17px; height: 17px; color: var(--petrol); flex: none; margin-top: 3px; }
.product ul { margin: 4px 0 0; }

/* Intake: gecentreerd, vier stappen, live voorbeeld */
.intake { padding: 64px 0 96px; }
.intake-kop { text-align: center; max-width: 760px; margin: 0 auto; }
.intake-kop h1 { font-size: clamp(38px, 4.6vw, 64px); letter-spacing: -0.04em; margin: 16px 0 16px; }
.intake-kop p { color: var(--zacht); font-size: 18.5px; max-width: 36em; margin: 0 auto; }
.stapper { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); max-width: 760px; margin: 44px auto 36px; padding: 0; list-style: none; --voortgang: 0; }
.stapper::before, .stapper::after { content: ""; position: absolute; top: 17px; left: 12.5%; right: 12.5%; height: 2px; border-radius: 2px; background: var(--rand); }
.stapper::after { background: var(--petrol); right: auto; width: calc(75% * var(--voortgang)); transition: width .6s var(--ease); }
.stapper li { position: relative; z-index: 1; display: grid; justify-items: center; }
.stapper button { display: grid; justify-items: center; gap: 8px; background: none; border: 0; padding: 0; font: inherit; color: var(--stil); cursor: pointer; }
.stapper button:disabled { cursor: default; }
.sp-nr { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--creme); border: 2px solid var(--rand); font-size: 14px; font-weight: 700; transition: background .4s, border-color .4s, color .4s, transform .4s var(--veer); }
.sp-naam { font-size: 12.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; transition: color .3s; }
.stapper .klaar .sp-nr { background: var(--petrol); border-color: var(--petrol); color: #fff; }
.stapper [aria-current="step"] .sp-nr { background: #fff; border-color: var(--petrol); color: var(--petrol); transform: scale(1.12); box-shadow: 0 0 0 5px rgba(15, 118, 110, .1); }
.stapper [aria-current="step"], .stapper .klaar { color: var(--tekst); }
.intake-raam { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 40px; align-items: start; max-width: 1180px; margin: 0 auto; }
.intake-form { background: var(--wit); border: 1px solid var(--rand); border-radius: 24px; padding: clamp(22px, 3vw, 40px); min-width: 0; }
.istap { display: grid; gap: 22px; }
.js .istap:not(.actief) { display: none; }
.anim .istap.actief { animation: stap-in .55s var(--ease) both; }
.anim .istap.actief.terug { animation-name: stap-terug; }
@keyframes stap-in { from { opacity: 0; transform: translateX(24px); } }
@keyframes stap-terug { from { opacity: 0; transform: translateX(-24px); } }
.istap + .istap { margin-top: 40px; }
.js .istap + .istap { margin-top: 0; }
.istap-titel { display: grid; gap: 6px; margin-bottom: 6px; font-size: 24px; font-weight: 700; letter-spacing: -0.025em; padding: 0; }
.istap-titel span { font-size: 12.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--petrol); }
.istap-voet { display: flex; justify-content: space-between; gap: 12px; padding-top: 22px; border-top: 1px solid var(--rand); }
.tegels { display: grid; gap: 10px; }
.tegels-5 { grid-template-columns: repeat(5, 1fr); }
.tegels-4 { grid-template-columns: repeat(4, 1fr); }
.tegel { position: relative; min-width: 0; }
.tegel input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.tegel > span { display: grid; gap: 4px; height: 100%; padding: 14px; border-radius: 14px; border: 1.5px solid var(--rand); background: var(--creme); transition: border-color .25s, background .25s, transform .35s var(--ease), box-shadow .35s; }
.tegel:hover > span { border-color: var(--rand-2); transform: translateY(-2px); }
.tegel b { font-size: 16px; }
.tegel small { font-size: 13.5px; color: var(--stil); }
.tegel input:checked + span { border-color: var(--petrol); background: rgba(15, 118, 110, .06); box-shadow: inset 0 0 0 1px var(--petrol); }
.tegel input:focus-visible + span { outline: 3px solid var(--mint); outline-offset: 2px; }
.tegel-sfeer em { display: grid; gap: 5px; height: 54px; padding: 10px; margin-bottom: 8px; background: #fff; border: 1px solid var(--rand); align-content: start; }
.tegel-sfeer em i { display: block; height: 6px; border-radius: 3px; background: var(--rand); }
.tegel-sfeer em i:first-child { width: 55%; height: 8px; background: var(--petrol); }
.tegel-sfeer em i:last-child { width: 70%; }
.sf-strak { border-radius: 2px; }
.sf-strak i { border-radius: 0 !important; }
.sf-warm { border-radius: 12px; }
.sf-stoer { border-radius: 4px; background: var(--petrol-nacht) !important; border-color: var(--petrol-nacht) !important; }
.sf-stoer i:first-child { background: var(--mint) !important; }
.sf-stoer i { background: rgba(255, 255, 255, .2) !important; }
.sf-licht { border-radius: 18px; }
.sf-licht i { border-radius: 99px !important; }
.kleuren { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.kleur { position: relative; }
.kleur input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.kleur span { display: grid; gap: 8px; justify-items: center; padding: 10px 8px 9px; border-radius: 14px; border: 1.5px solid var(--rand); background: var(--creme); font-size: 13px; font-weight: 600; transition: border-color .25s, transform .35s var(--ease); }
.kleur i { display: block; width: 100%; height: 26px; border-radius: 8px; transition: transform .35s var(--veer); }
.kleur:hover span { transform: translateY(-2px); }
.kleur input:checked + span { border-color: var(--tekst); }
.kleur input:checked + span i { transform: scale(.94); }
.kleur input:focus-visible + span { outline: 3px solid var(--mint); outline-offset: 2px; }
.samenvatting { display: grid; grid-template-columns: max-content 1fr; gap: 10px 20px; margin: 0; padding: 20px; border-radius: 14px; background: var(--creme); font-size: 15.5px; }
.samenvatting dt { color: var(--stil); }
.samenvatting dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.veld.fout input, .veld.fout select { border-color: #EF4444; }
.voorbeeld { position: sticky; top: calc(var(--kop-h) + 24px); display: grid; gap: 12px; }
.voorbeeld-label { font-size: 12.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--stil); }
.voorbeeld-noot { font-size: 14px; color: var(--stil); text-align: center; }
.vb { --acc: #0F766E; --acc-zacht: rgba(15, 118, 110, .1); --vb-r: 2px; --vb-font: var(--font); background: #fff; border: 1px solid var(--rand); border-radius: 16px; overflow: hidden; box-shadow: 0 30px 60px -36px rgba(8, 48, 45, .45); font-size: 13px; }
.vb, .vb * { transition: background-color .5s var(--ease), color .5s var(--ease), border-radius .5s var(--ease), border-color .5s; }
.vb-balk { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: var(--creme); border-bottom: 1px solid var(--rand); }
.vb-stip { width: 9px; height: 9px; border-radius: 50%; background: var(--rand-2); }
.vb-adres { margin-left: 8px; flex: 1; padding: 4px 10px; border-radius: 6px; background: #fff; font-size: 12px; color: var(--stil); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vb-kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--rand); }
.vb-kop b { color: var(--acc); font-family: var(--vb-font); font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vb-kop span { display: flex; gap: 10px; font-size: 11.5px; color: var(--zacht); }
.vb-kop i { font-style: normal; }
.vb-hero { display: grid; gap: 8px; justify-items: start; padding: 26px 16px 24px; background: var(--acc-zacht); }
.vb-label { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--acc) 82%, #000); }
.vb-hero strong { font-family: var(--vb-font); font-size: 21px; line-height: 1.15; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.vb-hero p { color: var(--zacht); font-size: 12.5px; max-width: 26em; }
.vb-knop { margin-top: 6px; padding: 9px 14px; border-radius: var(--vb-r); background: var(--acc); color: #fff; font-size: 12px; font-weight: 700; }
.vb-blok { display: grid; gap: 12px; padding: 18px 16px; }
.vb-blok > b { font-family: var(--vb-font); font-size: 14.5px; }
.vb-lijst { display: grid; gap: 9px; }
.vb-lijst span { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--zacht); }
.vb-lijst i { font-style: normal; flex: none; }
.vb-lijst em { flex: 1; height: 5px; border-radius: 4px; background: var(--rand); }
.vb-lijst.vb-tegels { grid-template-columns: repeat(4, 1fr); gap: 8px; }
.vb-lijst.vb-tegels span { display: block; aspect-ratio: 1; border-radius: var(--vb-r); background: var(--acc-zacht); }
.vb-lijst.vb-tegels span i, .vb-lijst.vb-tegels span em { display: none; }
.vb-voet { padding: 12px 16px; border-top: 1px solid var(--rand); background: var(--creme); font-size: 11.5px; color: var(--stil); }
.vb[data-sfeer="warm"] { --vb-r: 10px; --vb-font: Georgia, 'Times New Roman', serif; }
.vb[data-sfeer="stoer"] { --vb-r: 4px; }
.vb[data-sfeer="stoer"] .vb-hero { background: #111318; color: #fff; }
.vb[data-sfeer="stoer"] .vb-hero p { color: #B8BCC8; }
.vb[data-sfeer="stoer"] .vb-hero strong { font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; }
.vb[data-sfeer="stoer"] .vb-label { color: #fff; opacity: .7; }
.vb[data-sfeer="licht"] { --vb-r: 999px; }
.vb[data-sfeer="licht"] .vb-hero { background: linear-gradient(160deg, var(--acc-zacht), #fff); }
.vb[data-sfeer="licht"] .vb-lijst.vb-tegels span { border-radius: 14px; }
.wissel-in { animation: rijs .45s var(--ease) both; }

/* Responsief voor de nieuwe onderdelen */
@media (max-width: 1180px) {
  .intake-raam { grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; }
  .tegels-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 960px) {
  .tkaarten { grid-template-columns: 1fr 1fr; }
  .tool-duo, .blok-product { grid-template-columns: 1fr; gap: 28px; }
  .tool-tekst, .blok-product .blok-kop { position: static; }
  .intake-raam { grid-template-columns: 1fr; }
  .voorbeeld { position: static; max-width: 460px; width: 100%; margin: 0 auto; }
  .tegels-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .tkaarten { grid-template-columns: 1fr; }
  .tkaart { min-height: 0; padding: 24px; }
  .balk { grid-template-columns: 1fr 34px; }
  .balk i { grid-column: 1 / -1; grid-row: 2; }
  .merk-vragen .keuzes { padding-left: 0; }
  .kleuren { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .kleur span { font-size: 11px; padding: 8px 4px; }
  .tegels-5 { grid-template-columns: 1fr 1fr; }
  .stapper { margin: 32px auto 24px; }
  .sp-naam { font-size: 11px; letter-spacing: .04em; }
  .intake { padding: 40px 0 64px; }
  .samenvatting { grid-template-columns: 1fr; gap: 2px; }
  .samenvatting dd { margin-bottom: 8px; }
  .voorbeeld .vb { font-size: 12px; }
  .istap-voet .knop { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .anim .hero .label::before, .anim .intake-kop .label::before { animation: none; }
}

/* Ronde 3: vragen vloeiend open en dicht, merkfilm staand op een telefoon */
.vraag { overflow: hidden; }
.vraag.sluit p { opacity: 0; transition: opacity .2s; }
.vraag.sluit summary::after { transform: translateY(-50%) rotate(0deg); }
.film.film-staand .film-kader { width: min(420px, 100%); }
.film.film-staand video { aspect-ratio: 9 / 16; max-height: calc(100dvh - 120px); object-fit: contain; }

/* Ronde 4: dienstenindex (in plaats van de loopband) en de werkwijze met pijlen */
.dindex { padding: 48px 0 56px; border-bottom: 1px solid var(--rand); }
.dindex-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 22px; }
.dindex-kop a { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--petrol); text-decoration: none; }
.dindex-kop a svg { width: 16px; height: 16px; transition: transform .35s var(--ease); }
.dindex-kop a:hover svg { transform: translateX(3px); }
.dindex-rij { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--rand-2); border-bottom: 1px solid var(--rand-2); }
.dindex-loper { position: absolute; left: 0; top: -1px; width: 20%; height: 2px; background: var(--mint); }
.anim .dindex-loper { animation: loper 12.5s cubic-bezier(.22, 1, .36, 1) infinite; }
.dindex-rij:hover .dindex-loper { animation-play-state: paused; }
@keyframes loper { 0%, 18% { transform: translateX(0); } 20%, 38% { transform: translateX(100%); } 40%, 58% { transform: translateX(200%); } 60%, 78% { transform: translateX(300%); } 80%, 98% { transform: translateX(400%); } 100% { transform: translateX(0); } }
.dindex-item { display: flex; flex-direction: column; gap: 10px; padding: 26px 24px 28px; text-decoration: none; color: var(--tekst); border-left: 1px solid var(--rand); transition: background .3s; min-width: 0; }
.dindex-item:first-of-type { border-left: 0; }
.dindex-item:hover { background: var(--wit); }
.di-nr { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 700; color: var(--petrol); }
.di-nr svg { width: 18px; height: 18px; transition: transform .35s var(--ease); }
.dindex-item:hover .di-nr svg { transform: translate(3px, -3px); }
.dindex-item b { font-size: clamp(21px, 1.8vw, 26px); letter-spacing: -0.03em; }
.dindex-item > span:last-child { font-size: 15px; line-height: 1.5; color: var(--zacht); }

.sectie-kop-midden { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; max-width: 800px; margin-left: auto; margin-right: auto; }
.sectie-kop-midden p { margin-top: 16px; }
.ww { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.ww::before, .ww::after { content: ""; position: absolute; left: 10%; right: 10%; top: 21px; height: 2px; border-radius: 2px; background: var(--rand); }
.ww::after { background: var(--petrol); transform-origin: 0 50%; }
.anim .ww::after { transform: scaleX(0); transition: transform 2.2s var(--ease) .3s; }
.anim .ww.zichtbaar::after { transform: none; }
.ww-stap { position: relative; display: flex; flex-direction: column; align-items: center; gap: 28px; min-width: 0; }
.ww-nr { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 2px solid var(--petrol); color: var(--petrol); font-size: 14px; font-weight: 700; transition: background .35s, color .35s; }
.ww-stap:hover .ww-nr { background: var(--petrol); color: #fff; }
.ww-pijl { position: absolute; z-index: 1; right: -27px; top: 13px; width: 34px; height: 18px; padding: 0 4px; background: var(--creme); color: var(--petrol); }
.sectie-wit .ww-pijl { background: #fff; }
.ww-kaart { display: flex; flex-direction: column; gap: 12px; width: 100%; height: 100%; box-sizing: border-box; background: #fff; border: 1px solid var(--rand); border-radius: 20px; padding: 18px 18px 22px; transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.ww-stap:hover .ww-kaart { transform: translateY(-4px); box-shadow: 0 24px 50px -30px rgba(8, 48, 45, .5); }
.ww-kaart h3 { font-size: 21px; letter-spacing: -0.02em; }
.ww-kaart p { font-size: 15px; line-height: 1.55; color: var(--zacht); }
.ww-tijd { align-self: flex-start; margin-top: auto; padding: 5px 11px; border-radius: 99px; background: var(--mint-zacht); color: #047857; font-size: 12.5px; font-weight: 600; }
.ww-donker .ww-kaart { background: var(--petrol-diep); border-color: var(--petrol-diep); color: #fff; }
.ww-donker .ww-kaart p { color: #E6F4F1; }
.ww-donker .ww-tijd { background: rgba(52, 211, 153, .16); color: var(--mint); }
.ww-actie { display: flex; justify-content: center; margin-top: 44px; }

.ww-ui { height: 150px; box-sizing: border-box; border-radius: 14px; background: var(--creme); padding: 14px; display: flex; flex-direction: column; gap: 8px; justify-content: center; font-size: 11.5px; overflow: hidden; }
.ww-donker .ww-ui { background: rgba(255, 255, 255, .07); justify-content: flex-start; }
.ui-label { font-size: 10.5px; font-weight: 600; color: var(--stil); }
.ui-veld { display: flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 8px; background: #fff; border: 1.5px solid var(--petrol); font-size: 12px; }
.ui-veld i { width: 1px; height: 14px; margin-left: 2px; background: var(--petrol); }
.anim .ui-veld i { animation: knipper 1s steps(1) infinite; }
@keyframes knipper { 50% { opacity: 0; } }
.ui-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ui-chips b, .ui-chips em { padding: 4px 9px; border-radius: 99px; font-size: 10.5px; font-weight: 600; font-style: normal; }
.ui-chips b { background: var(--petrol); color: #fff; }
.ui-chips em { background: #fff; border: 1px solid var(--rand-2); }
.ui-kop { display: flex; justify-content: space-between; font-weight: 700; }
.ui-kop em { font-style: normal; color: var(--petrol); }
.ui-mint { color: var(--mint); font-size: 11px; }
.ui-regel { display: flex; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 7px; background: #fff; font-size: 11px; font-weight: 600; }
.ui-regel em { font-style: normal; font-size: 10px; color: var(--petrol); }
.ui-regel-donker { background: rgba(255, 255, 255, .1); font-weight: 500; }
.ui-som { display: flex; justify-content: space-between; align-items: baseline; padding-top: 6px; border-top: 1px solid var(--rand); color: var(--zacht); font-size: 11px; }
.ui-som b { font-size: 16px; color: var(--tekst); }
.ww-stap:has(.ui-tel) .ww-ui { padding-bottom: 0; justify-content: flex-end; align-items: center; }
.ui-tel { display: flex; flex-direction: column; gap: 5px; width: 96px; height: 136px; box-sizing: border-box; padding: 10px 8px; border: 3px solid var(--tekst); border-bottom: 0; border-radius: 16px 16px 0 0; background: #fff; }
.ui-tel i { display: block; height: 4px; border-radius: 2px; background: var(--rand); }
.ui-tel i:first-child { width: 50%; height: 6px; background: var(--petrol); }
.ui-tel i:nth-child(2) { height: 34px; border-radius: 5px; background: var(--mint-zacht); }
.ui-tel i:nth-child(4) { width: 70%; }
.ui-tel b { margin-top: auto; padding: 5px 0; border-radius: 6px; background: var(--petrol); color: #fff; font-size: 9px; text-align: center; }
.ui-adres { display: flex; align-items: center; gap: 7px; padding: 8px 10px; border-radius: 8px; background: #fff; border: 1px solid var(--rand); }
.ui-adres svg { width: 13px; height: 13px; color: var(--petrol); }
.ui-live { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.ui-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px rgba(52, 211, 153, .25); }
.anim .ui-live i { animation: stip 2.4s ease-in-out infinite; }
.ui-chips-stil em { font-size: 10px; }
.ui-staven { display: flex; align-items: flex-end; gap: 6px; height: 58px; }
.ui-staven i { flex: 1; border-radius: 4px 4px 0 0; background: rgba(255, 255, 255, .25); }
.ui-staven i:nth-child(1) { height: 30%; } .ui-staven i:nth-child(2) { height: 45%; } .ui-staven i:nth-child(3) { height: 55%; }
.ui-staven i:nth-child(4) { height: 80%; background: var(--mint); }

@media (max-width: 1180px) {
  .ww-kaart { padding: 14px 14px 18px; }
  .ww-kaart h3 { font-size: 19px; }
}
@media (max-width: 960px) {
  .dindex-rij { grid-template-columns: 1fr; }
  .dindex-loper { display: none; }
  .dindex-item { border-left: 0; border-top: 1px solid var(--rand); padding: 18px 4px; display: grid; grid-template-columns: 40px 1fr; gap: 2px 14px; }
  .dindex-item:first-of-type { border-top: 0; }
  .di-nr { grid-row: span 2; align-items: flex-start; padding-top: 4px; }
  .di-nr svg { display: none; }
  .ww { grid-template-columns: 1fr; gap: 0; max-width: 460px; margin: 0 auto; }
  .ww::before, .ww::after { display: none; }
  .ww-stap { gap: 12px; padding-bottom: 56px; text-align: center; }
  .ww-stap:last-child { padding-bottom: 0; }
  .ww-kaart { align-items: center; }
  .ww-tijd { align-self: center; }
  .ww-ui { width: 100%; }
  .ww-pijl { top: auto; right: auto; bottom: 14px; left: 50%; width: 34px; margin-left: -17px; transform: rotate(90deg); background: none; }
  .ww-stap::after { content: ""; position: absolute; bottom: 44px; left: 50%; width: 2px; height: 12px; margin-left: -1px; background: var(--petrol); opacity: .35; }
  .ww-stap:last-child::after { display: none; }
}
@media (max-width: 640px) {
  .dindex { padding: 32px 0 40px; }
}
.anim .ww .ww-stap { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.anim .ww.zichtbaar .ww-stap { opacity: 1; transform: none; }
.anim .ww .ww-stap:nth-child(2) { transition-delay: .25s; } .anim .ww .ww-stap:nth-child(3) { transition-delay: .5s; }
.anim .ww .ww-stap:nth-child(4) { transition-delay: .75s; } .anim .ww .ww-stap:nth-child(5) { transition-delay: 1s; }
.anim .ww.onthul { transform: none; }
.dindex-kop a { white-space: nowrap; } @media (max-width: 640px) { .dindex-kop .label { font-size: 11.5px; } }

/* Ronde 5: klikbare onderdelen en een eigen pagina per onderdeel */
.lijst-links li { padding: 0; display: block; }
.lijst-links a { position: relative; display: grid; gap: 2px; height: 100%; box-sizing: border-box; padding: 14px 52px 14px 16px; color: var(--tekst); text-decoration: none; border-radius: 12px; }
.lijst-links a::after { content: ""; position: absolute; inset: -1px; border-radius: 12px; border: 1.5px solid var(--petrol); opacity: 0; transition: opacity .3s; pointer-events: none; }
.lijst-links li:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -26px rgba(8, 48, 45, .45); }
.lijst-links a:hover::after, .lijst-links a:focus-visible::after { opacity: 1; }
.lk-pijl { position: absolute; right: 14px; top: 50%; width: 28px; height: 28px; margin-top: -14px; display: grid; place-items: center; border-radius: 50%; background: var(--creme); color: var(--petrol); overflow: hidden; transition: background .35s var(--ease), color .35s var(--ease); }
.lijst-links li span.lk-pijl { color: var(--petrol); }
.lk-pijl svg { width: 15px; height: 15px; transition: transform .45s var(--ease); }
.lijst-links a:hover .lk-pijl { background: var(--petrol); }
.lijst-links li a:hover span.lk-pijl { color: #fff; }
.anim .lijst-links a:hover .lk-pijl svg { animation: pijl-door .55s var(--ease); }
@keyframes pijl-door { 0% { transform: none; } 45% { transform: translateX(140%); } 46% { transform: translateX(-140%); } 100% { transform: none; } }

.okop { padding-bottom: 24px; }
.okop h1 { max-width: 14em; }
.okop > .wrap > p { max-width: 38em; }
.kruimel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; font-size: 14px; font-weight: 600; color: var(--stil); }
.kruimel a { color: var(--petrol); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .4s var(--ease); }
.kruimel a:hover { background-size: 100% 1px; }
.kruimel [aria-current] { color: var(--tekst); }
.okern-sectie { padding-top: 32px; }
.okern { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr); gap: clamp(28px, 4vw, 72px); align-items: start; }
.okrijg h2 { margin-top: 12px; font-size: clamp(26px, 2.6vw, 36px); max-width: 16em; }
.opakket { position: sticky; top: calc(var(--kop-h) + 28px); display: grid; gap: 12px; background: var(--petrol-diep); color: #fff; border-radius: 20px; padding: 28px; }
.opakket .ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: rgba(255, 255, 255, .1); color: var(--mint); }
.opakket .ico svg { width: 24px; height: 24px; }
.opakket .label { color: var(--mint); }
.opakket p { font-size: 16.5px; line-height: 1.6; color: #E6F4F1; }
.opakket-links { display: grid; gap: 8px; margin-top: 6px; }
.opakket-links a { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 600; text-decoration: none; }
.opakket-links a svg { width: 16px; height: 16px; color: var(--mint); transition: transform .35s var(--ease); }
.opakket-links a:hover svg { transform: translateX(4px); }
.ostappen { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: 1080px; margin: 0 auto; }
.ostap { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 0 12px; }
.ostap .ww-nr { margin-bottom: 8px; }
.ostap .ww-pijl { right: -29px; background: #fff; }
.ostap p { color: var(--zacht); font-size: 16px; max-width: 22em; }
.ostappen::before { content: ""; position: absolute; left: 16.6%; right: 16.6%; top: 21px; height: 2px; background: var(--petrol); opacity: .25; }
.ovragen { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: clamp(24px, 4vw, 72px); }
.ovragen .sectie-kop { display: block; }
.omeer-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.omeer-kop a { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--petrol); text-decoration: none; white-space: nowrap; }
.omeer-kop a svg { width: 16px; height: 16px; transition: transform .35s var(--ease); }
.omeer-kop a:hover svg { transform: translateX(3px); }
.omeer { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.omeer li { background: var(--creme); }
.omeer .lk-pijl { background: #fff; }
@media (max-width: 960px) {
  .okern, .ovragen { grid-template-columns: 1fr; }
  .opakket { position: static; }
  .ostappen { grid-template-columns: 1fr; gap: 44px; max-width: 460px; }
  .ostappen::before { display: none; }
  .ostap .ww-pijl { top: auto; right: auto; bottom: -34px; left: 50%; margin-left: -17px; transform: rotate(90deg); background: none; }
  .omeer { grid-template-columns: 1fr; }
}

/* WhatsApp in de kop, met een bericht dat al klaarstaat */
.knop-wa svg { width: 17px; height: 17px; color: #128C7E; }
@media (max-width: 1400px) { .knop-wa span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .knop-wa { padding: 0 12px; } }

/* Werkwijze: ronde nummers (de kaart duwde ze plat) en een compactere tijdlijn */
.ww-nr { flex: none; aspect-ratio: 1; box-sizing: border-box; }
.ww { max-width: 1240px; margin-left: auto; margin-right: auto; }

/* Werkwijze: de lijn loopt per stuk tussen twee cirkels, nooit door een cirkel */
@media (min-width: 961px) {
  .ww::before, .ww::after { display: none; }
  .ww-stap:not(:last-child)::before { content: ""; position: absolute; top: 21px; left: calc(50% + 30px); width: calc(100% - 40px); height: 2px; border-radius: 2px; background: var(--petrol); transform-origin: 0 50%; }
  .anim .ww .ww-stap:not(:last-child)::before { transform: scaleX(0); transition: transform .6s var(--ease); }
  .anim .ww.zichtbaar .ww-stap::before { transform: none; }
  .anim .ww .ww-stap:nth-child(1)::before { transition-delay: .45s; } .anim .ww .ww-stap:nth-child(2)::before { transition-delay: .7s; }
  .anim .ww .ww-stap:nth-child(3)::before { transition-delay: .95s; } .anim .ww .ww-stap:nth-child(4)::before { transition-delay: 1.2s; }
  .ww-pijl { z-index: 2; }
  .anim .ww .ww-pijl { opacity: 0; transition: opacity .3s; }
  .anim .ww.zichtbaar .ww-pijl { opacity: 1; }
  .anim .ww .ww-stap:nth-child(1) .ww-pijl { transition-delay: .8s; } .anim .ww .ww-stap:nth-child(2) .ww-pijl { transition-delay: 1.05s; }
  .anim .ww .ww-stap:nth-child(3) .ww-pijl { transition-delay: 1.3s; } .anim .ww .ww-stap:nth-child(4) .ww-pijl { transition-delay: 1.55s; }
}
/* De cirkels blijven op de lijn staan: alleen de kaart schuift omhoog */
.anim .ww .ww-stap { transform: none; }
.anim .ww .ww-kaart { transform: translateY(24px); transition: transform .7s var(--ease), box-shadow .45s var(--ease); transition-delay: inherit; }
.anim .ww.zichtbaar .ww-kaart { transform: none; }
.anim .ww.zichtbaar .ww-stap:hover .ww-kaart { transform: translateY(-4px); transition-delay: 0s; }
.anim .ww .ww-nr { transform: scale(.6); transition: transform .5s var(--veer), background .35s, color .35s; transition-delay: inherit; }
.anim .ww.zichtbaar .ww-nr { transform: none; }

/* Controle 26 okt: btw, pauzeknop, kruimelpad, tabel met toetsenbord */
.prijsband .btw { margin-top: 6px; font-size: 14px; color: #E6F4F1; }
.tabel-rol:focus-visible { outline: 2px solid var(--petrol); outline-offset: 3px; }
.stapel-pauze { width: 28px; height: 28px; margin-right: 4px; border: 1px solid var(--rand-2); border-radius: 50%; background: var(--wit); color: var(--petrol); cursor: pointer; display: grid; place-items: center; padding: 0; }
.stapel-punten button.stapel-pauze::before { content: none; }
.stapel-pauze svg { width: 12px; height: 12px; }
.stapel-pauze .ico-speel, .stapel-pauze[aria-pressed="true"] .ico-pauze { display: none; }
.stapel-pauze[aria-pressed="true"] .ico-speel { display: block; }
.stapel-pauze:focus-visible { outline: 2px solid var(--petrol); outline-offset: 2px; }
.kruimel a, .kruimel [aria-current] { display: inline-flex; align-items: center; min-height: 24px; }
/* Kleine mint tekst op donker petrol: lichter mint voor genoeg contrast */
.product .soort, .melding em, .zoom-kop .label, .opakket .label, .ww-donker .ww-tijd, .ui-mint, .pil-donker { color: #6EE7B7; }

/* ===== Kop op telefoon en tablet (26 oktober 2026) =====
   Ronde knoppen voor WhatsApp en bellen, even groot als de menuknop. De intake
   staat in het menu. Open menu: de pagina erachter staat stil en de kop blijft
   mint, zodat de links er niet onderdoor schuiven. */
.kop-icoon { display: none; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--rand-2); color: var(--tekst); text-decoration: none; transition: border-color .3s, transform .3s var(--ease); }
.kop-icoon:hover { border-color: var(--tekst); }
.kop-icoon:active { transform: scale(.94); }
.kop-icoon svg { width: 20px; height: 20px; }
@media (max-width: 1240px) {
  .kop-icoon { display: inline-grid; }
  .kop-acties .knop-hoofd { display: none; }
}
@media (max-width: 960px) {
  .kop-acties { margin-left: auto; }
  .menuknop { margin-left: 0; }
  .kop .wrap { gap: 10px; }
}
@media (max-width: 359px) {
  .kop-icoon, .menuknop { width: 42px; height: 42px; }
  .merk b { font-size: 17px; }
}
/* Stilzetten op <html>, niet op <body>: overflow op body maakt van body een
   eigen scrollvak, en dan schuift de vaste kop met de pagina mee omhoog. */
html:has(body.menu-open), html:has(body.film-open) { overflow: hidden; }
@supports selector(:has(a)) { body.menu-open, body.film-open { overflow-x: clip; overflow-y: visible; } }
.menu-vol { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
body.menu-open .kop { background: var(--mint); transition: background .2s .25s; }

/* Tekstanimaties op de telefoon: korter, minder ver en een vaste bovengrens
   voor de vertraging, zodat lange koppen niet blijven nadruppelen. */
@media (max-width: 640px) {
  .anim .w > span { transition-duration: .65s; transition-delay: calc(min(var(--i, 0), 8) * 35ms); }
  .anim .onthul { transform: translateY(16px); transition-duration: .6s, .6s; transition-delay: calc(min(var(--i, 0), 4) * 50ms); }
}

/* 404: groot cijfer met het logo als nul, daarna de weg terug */
.nf { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; }
.nf-cijfer { display: flex; justify-content: center; align-items: center; gap: .04em; font-size: clamp(110px, 17vw, 260px); font-weight: 700; letter-spacing: -0.06em; line-height: 1; color: var(--petrol); }
.nf-nul { display: inline-grid; place-items: center; width: .78em; height: .78em; border-radius: 50%; background: var(--mint); color: var(--petrol-nacht); }
.nf-nul svg { width: 52%; height: 52%; }
.anim .nf-cijfer > span { animation: nf-in .9s var(--ease) both; }
.anim .nf-cijfer > span:nth-child(2) { animation: nf-in .9s var(--ease) .12s both, nf-zweef 5s ease-in-out 1.2s infinite; }
.anim .nf-cijfer > span:nth-child(3) { animation-delay: .24s; }
@keyframes nf-in { from { opacity: 0; transform: translateY(40px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes nf-zweef { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-10px) rotate(-6deg); } }
.nf-kop { font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -0.03em; }
.nf-verder { padding-top: 24px; }
@media (max-width: 960px) {
  .nf { grid-template-columns: 1fr; gap: 8px; }
  .nf-cijfer { order: -1; justify-content: flex-start; font-size: clamp(96px, 30vw, 160px); }
}

/* Verplichte velden: rode ster en een eigen melding onder het veld */
.ster { color: #B91C1C; margin-left: 3px; font-weight: 700; }
.veld.fout input, .veld.fout select, .veld.fout textarea { border-color: #EF4444; background: #FEF2F2; }
.veld-melding { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: #B91C1C; }
.veld-melding::before { content: "!"; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #EF4444; color: #fff; font-size: 11px; font-weight: 800; flex: none; }
.anim .veld-melding { animation: melding-in .35s var(--ease) both; }
@keyframes melding-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.anim .veld.fout input, .anim .veld.fout select, .anim .veld.fout textarea { animation: schud .35s ease; }
@keyframes schud { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* Velden naast elkaar: een melding in het ene veld rekt het andere veld niet op.
   Zonder align-content verdeelt het grid de extra hoogte over label en invoer. */
.veld { align-content: start; }
input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], select { height: 50px; }

/* Keuzelijst in eigen stijl (vervangt de dropdown van de browser) */
.keuzelijst { position: relative; }
.kl-echt { position: absolute; inset: auto auto 0 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.kl-knop { width: 100%; height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 14px; font: 16px var(--font); color: var(--tekst); text-align: left; background: var(--creme); border: 1.5px solid var(--rand); border-radius: 12px; cursor: pointer; transition: border-color .25s, background .25s, box-shadow .25s; }
.kl-knop:hover { border-color: var(--rand-2); }
.kl-knop:focus-visible, .keuzelijst.open .kl-knop { outline: none; border-color: var(--petrol); background: #fff; box-shadow: 0 0 0 4px rgba(15, 118, 110, .12); }
.kl-waarde { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kl-knop.kl-leeg .kl-waarde { color: var(--stil); }
.kl-pijl { width: 20px; height: 20px; flex: none; color: var(--petrol); transition: transform .3s var(--ease); }
.keuzelijst.open .kl-pijl { transform: rotate(180deg); }
.kl-lijst { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 8px); max-height: 300px; overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid var(--rand); border-radius: 14px; box-shadow: 0 24px 48px -20px rgba(8, 48, 45, .35); opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top center; transition: opacity .2s var(--ease), transform .2s var(--ease); }
.keuzelijst.omhoog .kl-lijst { top: auto; bottom: calc(100% + 8px); transform-origin: bottom center; transform: translateY(6px) scale(.98); }
.keuzelijst.open .kl-lijst { opacity: 1; transform: none; }
.kl-lijst:focus { outline: none; }
.kl-lijst [role="option"] { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 10px 12px; border-radius: 10px; font-size: 15.5px; color: var(--tekst); cursor: pointer; }
.kl-lijst [role="option"].kl-actief { background: #E6F4F1; }
.kl-lijst [role="option"][aria-selected="true"] { color: var(--petrol); font-weight: 600; }
.kl-vink { width: 18px; height: 18px; flex: none; color: var(--petrol); opacity: 0; transform: scale(.6); transition: opacity .2s, transform .25s var(--veer); }
.kl-lijst [aria-selected="true"] .kl-vink { opacity: 1; transform: none; }
.veld.fout .kl-knop { border-color: #EF4444; background: #FEF2F2; }
.anim .veld.fout .kl-knop { animation: schud .35s ease; }
.sectie-wit .formulier .kl-knop { background: #fff; }

/* Intake versturen: honeypot buiten beeld, foutmelding onder de samenvatting */
.honing { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.intake-fout { margin: 0 0 16px; padding: 14px 18px; border-radius: 12px; background: #FEF2F2; border: 1px solid #FECACA; color: #B91C1C; }
.intake-form button[aria-busy="true"] { opacity: .7; cursor: progress; }
.istap-voet[hidden] { display: none; }