:root{
  --navy:#151F35;
  --navy-2:#1C2840;
  --navy-3:#27354F;
  --teal:#009BA8;
  --teal-2:#00B6C4;
  --teal-deep:#007E8A;
  --teal-soft:#E0F4F6;
  --teal-ink:#006670;
  --canvas:#F7F9FB;
  --surface:#FFFFFF;
  --line:#E4E9EF;
  --line-2:#EEF1F5;
  --text:#16202F;
  --muted:#677589;
  --muted-2:#97A2B2;
  --green:#1E9E63;
  --green-soft:#E1F4EA;
  --amber:#C77E00;
  --amber-soft:#FAF0DA;
  --red:#D84A4A;
  --red-soft:#FBE9E9;
  --radius:12px;
  --shadow-s:0 1px 2px rgba(21,31,53,.04);
  --shadow-m:0 4px 16px rgba(21,31,53,.06),0 1px 2px rgba(21,31,53,.04);
  --shadow-l:0 18px 44px rgba(13,20,38,.14);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface);color:var(--text);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:Poppins,Inter,sans-serif;font-weight:600;letter-spacing:-.01em;margin:0;line-height:1.2}
p{margin:0}
a{color:var(--teal-ink);text-decoration:none}
a:hover{text-decoration:underline}
ul,ol{margin:0;padding:0;list-style:none}
svg{display:block}
button{font-family:inherit}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums;text-align:right}
:focus-visible{outline:3px solid var(--teal-2);outline-offset:2px;border-radius:6px}
[id]{scroll-margin-top:88px}

/* rustige binnenkomst van blokken; wordt door JS aangezet en respecteert
   de systeeminstelling 'verminder beweging' */
.reveal{opacity:0;transform:translateY(12px)}
.reveal.in{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease}

/* aanklikbare kaarten */
.klikbaar{cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}
.klikbaar:hover{border-color:#BFD3DD;box-shadow:var(--shadow-m);transform:translateY(-2px)}
.klikbaar:hover .lees{color:var(--teal)}

/* actief menu-item tijdens het scrollen */
.nav-link.actief{color:var(--teal-ink)}

/* foutmelding per veld */
.veld.fout input,.veld.fout textarea,.veld.fout select{border-color:var(--red);background:var(--red-soft)}
.fout-tekst{font-size:13px;color:#A62F2F;margin-top:6px}

/* wat er na de melding gebeurt */
.daarna{margin-top:16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px}
.daarna h3{font-size:14.5px;margin-bottom:12px}
.daarna ol{display:grid;gap:12px;counter-reset:stap}
.daarna li{position:relative;padding-left:32px;font-size:13.5px;color:var(--muted)}
.daarna li::before{counter-increment:stap;content:counter(stap);position:absolute;left:0;top:-1px;
  width:22px;height:22px;border-radius:50%;background:var(--teal-soft);color:var(--teal-ink);
  font-family:"JetBrains Mono",monospace;font-size:11px;display:flex;align-items:center;justify-content:center}
.daarna b{color:var(--text)}
.hero-portaal{font-size:13.5px;color:var(--muted);margin-top:14px}
.skip{position:absolute;left:-9999px;top:0;background:var(--surface);padding:12px 16px;z-index:300;border-radius:0 0 12px 0}
.skip:focus{left:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{max-width:1240px;margin:0 auto;padding:0 20px}
.section{padding:44px 0}
.section-head{margin-bottom:20px}
.section h2{font-size:19px}
.section-head p{color:var(--muted);margin-top:7px;max-width:64ch;font-size:14px}
.bg-canvas{background:var(--canvas)}

/* ---------- knoppen ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 20px;
  border-radius:12px;border:1px solid transparent;font-size:15px;font-weight:600;cursor:pointer;
  transition:background .15s ease,border-color .15s ease,color .15s ease}
.btn:hover{text-decoration:none}
.btn svg{width:16px;height:16px;flex:none}
.btn-primary{background:var(--teal);color:#fff}
.btn-primary:hover{background:var(--teal-deep)}
.btn-line{background:var(--surface);border-color:var(--line);color:var(--text)}
.btn-line:hover{border-color:var(--teal);color:var(--teal-ink)}
.btn-block{width:100%}

/* ---------- kop ---------- */
.site-head{position:sticky;top:0;z-index:200;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);transition:box-shadow .25s ease,background .25s ease}
.site-head.gescrold{box-shadow:0 4px 20px rgba(21,31,53,.07);background:rgba(255,255,255,.98)}
.site-head.gescrold .head-row{min-height:66px}
.head-row{transition:min-height .25s ease}
.leesbalk{position:absolute;left:0;bottom:-1px;height:2px;background:var(--teal);width:0;transition:width .1s linear}
.head-row{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:76px}
.fwd-logo{display:block;height:auto}
.fwd-logo .cls-1{fill:#009BA8}
.fwd-logo .cls-2{fill:#151F35}
.fwd-logo .cls-3{fill:none;stroke:#009BA8;stroke-miterlimit:10;stroke-width:1.4}
.fwd-logo.on-dark .cls-2{fill:#FFFFFF}
.fwd-logo.on-dark .cls-1{fill:#19C7D6}
.head-logo{height:44px;width:auto}
.head-right{display:flex;align-items:center;gap:10px}
.head-tel{display:none;align-items:center;gap:8px;color:var(--text);font-weight:600;font-size:15px;white-space:nowrap}
.head-tel svg{width:17px;height:17px;color:var(--teal)}
.head-tel:hover{color:var(--teal-ink);text-decoration:none}
.head-cta{display:none}
.menu-btn{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border:1px solid var(--line);background:var(--surface);border-radius:12px;cursor:pointer}
.menu-btn i{position:relative;display:block;width:18px;height:2px;background:var(--text);border-radius:2px}
.menu-btn i::before,.menu-btn i::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--text);border-radius:2px}
.menu-btn i::before{top:-6px}
.menu-btn i::after{top:6px}

/* menu */
.nav{display:none;border-top:1px solid var(--line-2);padding:6px 0 18px}
.nav.open{display:block}
.nav-item{border-bottom:1px solid var(--line-2)}
.nav-link{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:13px 2px;
  background:none;border:0;color:var(--text);font-size:15px;font-weight:500;text-align:left;cursor:pointer}
.nav-link:hover{color:var(--teal-ink);text-decoration:none}
.nav-link .caret{width:12px;height:12px;color:var(--muted-2);transition:transform .2s ease}
.nav-item.open .caret{transform:rotate(180deg)}
.submenu{display:none;padding:0 0 12px 2px}
.nav-item.open .submenu{display:block}
.submenu a{display:block;padding:9px 0;font-size:14px;color:var(--muted)}
.submenu a:hover{color:var(--teal-ink)}
.nav-tel{display:flex;align-items:center;gap:8px;padding:14px 2px;font-weight:600;color:var(--text)}
.nav-tel svg{width:17px;height:17px;color:var(--teal)}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--surface);overflow:hidden}
.hero-inner{padding:34px 0 0}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-ink);margin-bottom:12px}
.hero h1{font-size:30px;max-width:15ch}
.hero h1 em{font-style:normal;color:var(--teal)}
.hero-lead{color:var(--muted);margin-top:14px;max-width:48ch}
.hero-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.hero-checks{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:20px}
.check{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text)}
.check svg{width:18px;height:18px;color:var(--teal);flex:none}
.hero-media{position:relative;margin-top:28px}
.hero-media .foto{height:300px;border-radius:var(--radius)}
.hero-media img{object-position:64% center}
.review{position:absolute;left:14px;bottom:14px;background:var(--surface);border-radius:14px;box-shadow:var(--shadow-l);
  padding:12px 14px;display:flex;align-items:center;gap:11px;max-width:250px}
.review-score{font-family:Poppins,sans-serif;font-weight:600;font-size:19px;line-height:1}
.review-sterren{color:var(--amber);font-size:13px;letter-spacing:1px}
.review-tekst{font-size:12px;color:var(--muted);margin-top:3px}
.review-merk{width:34px;height:34px;border-radius:50%;background:var(--teal-soft);color:var(--teal-ink);
  display:flex;align-items:center;justify-content:center;font-family:Poppins,sans-serif;font-weight:600;flex:none}

/* ---------- usp-balk ---------- */
.usp{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface)}
.usp-grid{display:grid;gap:0}
.usp-item{display:flex;gap:14px;padding:20px 0;border-bottom:1px solid var(--line-2)}
.usp-item:last-child{border-bottom:0}
.usp-item h3{font-size:14.5px}
.usp-item p{font-size:14px;color:var(--muted);margin-top:4px}
.ico{width:32px;height:32px;color:var(--teal-ink);display:flex;align-items:flex-start;justify-content:flex-start;flex:none}
.ico svg{width:26px;height:26px;stroke-width:1.4}

/* ---------- routes: waarvoor komt u? ---------- */
.spoedstrip{display:flex;align-items:center;gap:14px;background:var(--amber-soft);border:1px solid rgba(199,126,0,.3);
  border-radius:var(--radius);padding:14px 16px;margin-bottom:14px;text-decoration:none;color:var(--text);
  transition:transform .15s ease,box-shadow .15s ease}
.spoedstrip:hover{text-decoration:none;transform:translateY(-2px);box-shadow:var(--shadow-m)}
.spoedstrip .ico-rond{width:44px;height:44px;border-radius:50%;background:var(--amber);color:#fff;flex:none;
  display:flex;align-items:center;justify-content:center}
.spoedstrip .ico-rond svg{width:22px;height:22px}
.spoedstrip b{display:block;font-family:Poppins,sans-serif;font-weight:600;font-size:16px}
.spoedstrip span{display:block;font-size:13.5px;color:#7A4E00;margin-top:2px}
.spoedstrip .bel-nu{margin-left:auto;display:none;align-items:center;gap:8px;background:var(--amber);color:#fff;
  border-radius:10px;padding:11px 16px;font-weight:600;font-size:15px;white-space:nowrap}
.spoedstrip .bel-nu svg{width:17px;height:17px}

.routes{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.route{position:relative;background:var(--surface);border:1.5px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-s);padding:16px 14px 44px;display:flex;flex-direction:column;gap:10px;min-height:158px;
  cursor:pointer;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}
.route:hover{transform:translateY(-3px);border-color:var(--teal);box-shadow:var(--shadow-m)}
.route:active{transform:translateY(-1px) scale(.99)}
.route .ico{width:46px;height:46px;border-radius:50%;background:var(--teal-soft);color:var(--teal-ink);
  display:flex;align-items:center;justify-content:center;margin:0;transition:background .15s ease,color .15s ease}
.route .ico svg{width:23px;height:23px;stroke-width:1.6}
.route:hover .ico{background:var(--teal);color:#fff}
.route h3{font-size:15.5px;line-height:1.25}
.route .wat{font-size:13px;color:var(--muted);margin:0}
.route .pijl-hoek{position:absolute;left:14px;bottom:14px;display:flex;align-items:center;gap:6px;
  font-size:13px;font-weight:600;color:var(--teal-ink)}
.route .pijl-hoek svg{width:15px;height:15px;transition:transform .15s ease}
.route:hover .pijl-hoek svg{transform:translateX(3px)}

/* pijnpunt in doelgroepkaart */
.pijn{margin-top:12px;background:var(--canvas);border-radius:10px;padding:11px 12px;font-size:13px;color:var(--text)}
.pijn strong{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);font-weight:600;margin-bottom:4px}
.doel-list-kop{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-ink);font-weight:600;margin-top:14px}

/* ontzorgingspunten in het navy blok */
.ontzorg{display:grid;gap:14px;margin-top:18px}
.ontzorg li{display:flex;gap:11px;align-items:flex-start}
.ontzorg svg{width:19px;height:19px;color:var(--teal);flex:none;margin-top:2px}
.ontzorg b{display:block;font-family:Poppins,sans-serif;font-weight:600;font-size:14px;margin-bottom:3px}
.ontzorg span{display:block;font-size:13.5px;color:var(--muted)}

/* ---------- fotoplekken ---------- */
.foto{position:relative;background:var(--teal-soft);border-radius:var(--radius);overflow:hidden}
.foto>svg{position:absolute;inset:0;width:100%;height:100%}
.foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.foto-tip{position:absolute;left:10px;bottom:10px;z-index:2;background:rgba(255,255,255,.92);color:var(--muted);
  font-size:11px;line-height:1.3;padding:5px 9px;border-radius:8px;box-shadow:var(--shadow-s);max-width:70%}

/* infographic in doelgroepkaart */
.doel-viz{background:#EFF7F9;border-bottom:1px solid var(--line-2);padding:16px 16px 10px}
.doel-viz svg{width:100%;height:auto;display:block}

/* ---------- schades ---------- */
.schades{display:grid;gap:16px}
.schade{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-s);overflow:hidden;display:flex;flex-direction:column}
.schade .foto{aspect-ratio:16/10;border-radius:0}
.schade-body{padding:0 18px 18px;flex:1;display:flex;flex-direction:column}
.schade-kop{display:flex;align-items:center;gap:12px;padding-top:14px;margin-bottom:12px}
.schade-ico{width:46px;height:46px;border-radius:50%;background:var(--surface);border:1px solid var(--line);color:var(--teal-ink);
  display:flex;align-items:center;justify-content:center;flex:none;margin-top:-38px;position:relative;z-index:2}
.schade-ico svg{width:21px;height:21px;stroke-width:1.5}
.schade-kop h3{font-size:15px}
.schade p{font-size:14px;color:var(--muted)}
.lees{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:14px;font-weight:600;color:var(--teal-ink)}
.lees svg{width:14px;height:14px}

/* ---------- werkwijze ---------- */
.reis{display:grid;gap:14px}
.fase{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-s);padding:18px 16px}
.fase-kop{display:flex;align-items:center;gap:9px;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--line-2)}
.fase-nr{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--teal-ink);background:var(--teal-soft);padding:4px 9px;border-radius:999px}
.fase-titel{font-family:Poppins,sans-serif;font-weight:600;font-size:14px}
.fase-haltes{position:relative;display:grid;gap:18px}
.fase-haltes::before{content:"";position:absolute;left:18px;top:10px;bottom:10px;width:2px;background:var(--line-2);border-radius:2px}
.halte{position:relative;display:flex;gap:14px;align-items:flex-start}
.halte-nr{width:38px;height:38px;border-radius:50%;background:var(--surface);border:2px solid var(--line);color:var(--muted-2);
  font-family:"JetBrains Mono",monospace;font-size:12px;display:flex;align-items:center;justify-content:center;flex:none;
  transition:border-color .45s ease,background .45s ease,color .45s ease}
.fase.on .halte-nr{border-color:var(--teal);background:var(--teal);color:#fff}
.fase.on .halte:nth-child(1) .halte-nr{transition-delay:0s}
.fase.on .halte:nth-child(2) .halte-nr{transition-delay:.18s}
.fase.on .halte:nth-child(3) .halte-nr{transition-delay:.36s}
.fase{transition:border-color .4s ease}
.fase.on{border-color:#BFD3DD}
.halte h3{font-size:15px}
.halte p{font-size:13px;color:var(--muted);margin-top:4px}
.halte-tag{display:inline-block;margin-top:8px;font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  padding:3px 9px;border-radius:999px;background:var(--teal-soft);color:var(--teal-ink)}
.reis-voet{margin-top:14px;display:flex;gap:12px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-s);padding:16px;font-size:14px;color:var(--muted)}
.reis-voet svg{width:20px;height:20px;color:var(--teal);flex:none;margin-top:2px}
.reis-voet b{color:var(--text)}

/* ---------- vertrouwen ---------- */
.trust{display:grid;gap:14px}
.trust-item{display:flex;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-s);padding:18px}
.trust-item svg{width:20px;height:20px;color:var(--teal);flex:none;margin-top:2px}
.trust-item h3{font-size:14.5px}
.trust-item p{font-size:13.5px;color:var(--muted);margin-top:5px}
.trust-regel{margin-top:16px;font-size:13.5px;color:var(--muted)}
.trust-regel span{white-space:nowrap}

/* ---------- reviews ---------- */
.reviews-kop{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-bottom:22px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-s);padding:18px 20px}
.reviews-cijfer{display:flex;align-items:center;gap:12px}
.reviews-score{font-family:Poppins,sans-serif;font-weight:600;font-size:32px;line-height:1}
.sterren{color:var(--amber);letter-spacing:2px;font-size:14px}
.reviews-meta{font-size:13px;color:var(--muted);margin-top:3px}
.g-merk{width:40px;height:40px;border-radius:50%;background:var(--canvas);display:flex;align-items:center;justify-content:center;flex:none}
.g-merk svg{width:20px;height:20px}
.reviews-kop .btn{margin-left:auto}
.reviews{display:grid;gap:14px}
.review-kaart{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-s);
  padding:20px;display:flex;flex-direction:column}
.review-kaart .sterren{margin-bottom:10px}
.review-tekst{font-size:14px;color:var(--text);line-height:1.5}
.review-voet{margin-top:14px;padding-top:12px;border-top:1px solid var(--line-2);display:flex;align-items:center;gap:10px}
.review-cirkel{width:34px;height:34px;border-radius:50%;background:var(--teal-soft);color:var(--teal-ink);flex:none;
  display:flex;align-items:center;justify-content:center;font-family:Poppins,sans-serif;font-weight:600;font-size:13px}
.review-naam{font-family:Poppins,sans-serif;font-weight:600;font-size:14px}
.review-rol{font-size:12px;color:var(--muted)}
.review-datum{margin-left:auto;font-size:12px;color:var(--muted-2)}

/* ---------- veelgestelde vragen ---------- */
.faq{display:grid;gap:10px;max-width:840px}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:0 16px}
.faq details[open]{border-color:var(--teal)}
.faq summary{list-style:none;cursor:pointer;padding:15px 0;font-size:15px;font-weight:600;
  display:flex;justify-content:space-between;align-items:center;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:"JetBrains Mono",monospace;color:var(--teal);font-size:19px;line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq details p{padding:0 0 16px;font-size:14px;color:var(--muted)}

/* portaalblok */
.portaal-blok{display:grid;gap:20px;align-items:center;margin-top:26px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-s);padding:24px 20px}
.portaal-blok h2{font-size:19px;max-width:22ch}
.portaal-blok p{color:var(--muted);margin-top:9px;max-width:48ch;font-size:14px}
.dossier{background:var(--surface);color:var(--text);border-radius:var(--radius);box-shadow:var(--shadow-l);padding:18px}
.dossier-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding-bottom:13px;border-bottom:1px solid var(--line-2)}
.dossier-ref{font-size:12px;color:var(--muted)}
.dossier-adres{font-family:Poppins,sans-serif;font-weight:600;font-size:15px;margin-top:3px}
.pill{display:inline-block;padding:5px 10px;border-radius:999px;font-size:12px;font-weight:600;background:var(--teal-soft);color:var(--teal-ink);white-space:nowrap}
.dossier-rij{display:flex;justify-content:space-between;gap:12px;padding:9px 0;font-size:14px;border-bottom:1px solid var(--line-2)}
.dossier-rij span:first-child{color:var(--muted)}
.dossier-rij:last-of-type{border-bottom:0}
.mini{display:flex;align-items:center;gap:5px;margin-top:13px}
.mini i{flex:1;height:4px;border-radius:2px;background:var(--line)}
.mini i.done{background:var(--teal)}
.dossier-note{font-size:12px;color:var(--muted-2);margin-top:9px}

/* ---------- voor wie ---------- */
.doelgroepen{display:grid;gap:16px}
.doel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-s);overflow:hidden;display:grid}
.doel .foto{height:150px;border-radius:0}
.doel-body{padding:20px}
.doel-kop{display:flex;align-items:center;gap:11px}
.doel-kop h3{font-size:15px}
.doel-ico{width:40px;height:40px;border-radius:11px;background:var(--teal-soft);color:var(--teal-ink);display:flex;align-items:center;justify-content:center;flex:none}
.doel-ico svg{width:20px;height:20px}
.doel p{font-size:14px;color:var(--muted);margin-top:10px}
.doel-list{margin-top:12px;padding-top:12px;border-top:1px solid var(--line-2)}
.doel-list li{position:relative;padding-left:19px;font-size:13px;margin-bottom:6px}
.doel-list li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:var(--teal)}
.doel-list li:last-child{margin-bottom:0}

/* ---------- formulier ---------- */
.contact-grid{display:grid;gap:16px}
.form,.bel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-s);padding:22px 20px}
.veld{margin-bottom:14px}
.veld label{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
.veld input,.veld select,.veld textarea{width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;
  font-family:Inter,sans-serif;font-size:15px;color:var(--text);background:var(--surface)}
.veld textarea{min-height:110px;resize:vertical}
.veld input:focus,.veld select:focus,.veld textarea:focus{border-color:var(--teal);outline:none;box-shadow:0 0 0 3px var(--teal-soft)}
.veld .hint{font-size:13px;color:var(--muted-2);margin-top:6px}
.rij-2{display:grid;gap:14px}
.form-voet{font-size:13px;color:var(--muted);margin-top:12px}
.melding{display:none;margin-bottom:16px;padding:14px 16px;border-radius:12px;font-size:14px}
.melding.ok{display:block;background:var(--green-soft);color:#14603D}
.melding.let-op{display:block;background:var(--amber-soft);color:#7A4E00}
.bel-foto{display:block;width:calc(100% + 40px);margin:-22px -20px 18px;height:auto;aspect-ratio:16/10;
  object-fit:cover;border-radius:var(--radius) var(--radius) 0 0}
.bel h3{font-size:17px}
.bel-nummer{display:block;font-family:Poppins,sans-serif;font-weight:600;font-size:24px;color:var(--text);margin:10px 0 4px}
.bel-nummer:hover{color:var(--teal-ink);text-decoration:none}
.bel-rij{display:flex;justify-content:space-between;gap:12px;font-size:14px;padding:10px 0;border-bottom:1px solid var(--line-2)}
.bel-rij span:first-child{color:var(--muted)}
.bel-rij:last-child{border-bottom:0}
.spoed{margin-top:16px;padding:14px;border-radius:12px;background:var(--teal-soft);color:var(--teal-ink);font-size:14px}

/* ---------- intakeformulier in stappen ---------- */
.wizard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-s);padding:22px 20px}
.stappenbalk{margin-bottom:20px}
.stappen-tekst{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;color:var(--muted);margin:14px 0 8px}
.stappen-tekst b{font-family:Poppins,sans-serif;font-size:15px;color:var(--text)}
.balk{height:5px;background:var(--line-2);border-radius:3px;overflow:hidden}
.balk i{display:block;height:100%;width:20%;background:var(--teal);border-radius:3px;transition:width .4s cubic-bezier(.4,0,.2,1)}

/* klikbare stappenrij met iconen */
.stepper{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:0}
.stepper::before{content:"";position:absolute;left:10%;right:10%;top:19px;height:2px;background:var(--line-2)}
.stepper::after{content:"";position:absolute;left:10%;top:19px;height:2px;width:var(--af,0);max-width:80%;
  background:var(--teal);transition:width .4s cubic-bezier(.4,0,.2,1)}
.stap-punt{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:6px;
  background:none;border:0;padding:0;cursor:default;color:var(--muted-2)}
.stap-punt .punt{width:38px;height:38px;border-radius:50%;background:var(--surface);border:2px solid var(--line);
  display:flex;align-items:center;justify-content:center;transition:all .3s ease}
.stap-punt .punt svg{width:17px;height:17px}
.stap-punt em{font-style:normal;font-size:11px;font-weight:600;letter-spacing:.02em}
.stap-punt.af{color:var(--teal-ink);cursor:pointer}
.stap-punt.af .punt{border-color:var(--teal);background:var(--teal);color:#fff}
.stap-punt.af:hover .punt{transform:scale(1.08)}
.stap-punt.nu{color:var(--text)}
.stap-punt.nu .punt{border-color:var(--teal);background:var(--teal-soft);color:var(--teal-ink);
  box-shadow:0 0 0 4px rgba(0,155,168,.12)}

.stap{display:none}
.stap.actief{display:block;animation:instap .3s cubic-bezier(.4,0,.2,1)}
@keyframes instap{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.stap.actief{animation:none}}
.stap h3{font-size:17px;margin-bottom:6px}
.stap-uitleg{font-size:14px;color:var(--muted);margin-bottom:16px}

/* aantikbare keuzeblokken */
.keuzes{display:grid;gap:10px;margin-bottom:6px}
.keuze{position:relative;display:block;border:1px solid var(--line);border-radius:12px;padding:14px 16px;cursor:pointer;transition:border-color .15s ease,background .15s ease}
.keuze:hover{border-color:#BFD3DD}
.keuze input{position:absolute;opacity:0;width:0;height:0}
.keuze{display:flex;gap:12px;align-items:flex-start}
.keuze>.ico-rond{width:38px;height:38px;border-radius:10px;background:var(--canvas);color:var(--muted);flex:none;
  display:flex;align-items:center;justify-content:center;transition:all .2s ease}
.keuze>.ico-rond svg{width:19px;height:19px}
.keuze b{display:block;font-family:Poppins,sans-serif;font-weight:600;font-size:15px}
.keuze span{display:block;font-size:13px;color:var(--muted);margin-top:3px}
.keuze .vink{position:absolute;top:12px;right:12px;width:20px;height:20px;border-radius:50%;background:var(--teal);color:#fff;
  display:none;align-items:center;justify-content:center}
.keuze .vink svg{width:12px;height:12px}
.keuze:has(input:checked){border-color:var(--teal);background:var(--teal-soft)}
.keuze:has(input:checked) .vink{display:flex;animation:pop .25s ease}
.keuze:has(input:checked)>.ico-rond{background:var(--teal);color:#fff}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
.keuze:has(input:focus-visible){outline:3px solid var(--teal-2);outline-offset:2px}

/* chips voor het type schade */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;display:inline-flex;align-items:center;min-height:42px;padding:0 14px;border:1px solid var(--line);
  border-radius:999px;font-size:14px;cursor:pointer;transition:border-color .15s ease,background .15s ease,color .15s ease}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip svg{width:16px;height:16px;margin-right:7px;color:var(--muted-2);transition:color .2s ease}
.chip:has(input:checked){border-color:var(--teal);background:var(--teal-soft);color:var(--teal-ink);font-weight:600}
.chip:has(input:checked) svg{color:var(--teal)}
.chip:has(input:focus-visible){outline:3px solid var(--teal-2);outline-offset:2px}

/* uploaden */
.upload{display:block;border:1.5px dashed var(--line);border-radius:12px;padding:18px 16px;text-align:center;cursor:pointer;
  transition:border-color .15s ease,background .15s ease}
.upload:hover{border-color:var(--teal);background:var(--teal-soft)}
.upload input{display:none}
.upload svg{width:22px;height:22px;color:var(--teal);margin:0 auto 8px}
.upload b{display:block;font-family:Poppins,sans-serif;font-weight:600;font-size:14px}
.upload span{display:block;font-size:12.5px;color:var(--muted);margin-top:3px}
.bestanden{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.mini-foto{position:relative;width:74px;height:74px;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.mini-foto img{width:100%;height:100%;object-fit:cover}
.mini-foto button{position:absolute;top:3px;right:3px;width:20px;height:20px;border:0;border-radius:50%;background:rgba(21,31,53,.75);
  color:#fff;font-size:13px;line-height:1;cursor:pointer}
.bestand-rij{display:flex;align-items:center;gap:9px;font-size:13px;background:var(--canvas);border-radius:9px;padding:9px 11px;margin-top:10px}
.bestand-rij svg{width:16px;height:16px;color:var(--teal-ink);flex:none}
.bestand-rij button{margin-left:auto;border:0;background:none;color:var(--muted);cursor:pointer;font-size:13px}

/* spoedmelding */
.spoed-blok{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:12px;padding:14px 16px;
  margin-top:18px;cursor:pointer;transition:all .2s ease}
.spoed-blok input{position:absolute;opacity:0;width:0;height:0}
.spoed-blok .ico-rond{width:36px;height:36px;border-radius:10px;background:var(--canvas);color:var(--muted);flex:none;
  display:flex;align-items:center;justify-content:center}
.spoed-blok .ico-rond svg{width:19px;height:19px}
.spoed-blok b{display:block;font-family:Poppins,sans-serif;font-weight:600;font-size:14.5px}
.spoed-blok span{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.spoed-blok:has(input:checked){border-color:var(--amber);background:var(--amber-soft)}
.spoed-blok:has(input:checked) .ico-rond{background:var(--amber);color:#fff}

/* sleepzone bij het uploaden */
.upload.sleep{border-color:var(--teal);background:var(--teal-soft);transform:scale(1.01)}
.upload-teller{font-size:12px;color:var(--teal-ink);font-weight:600;margin-top:8px}
.mini-foto{animation:pop .25s ease}

/* dagen kiezen */
.dagen{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 10px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.dag{flex:none;width:62px;min-height:66px;border:1px solid var(--line);border-radius:12px;background:var(--surface);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;
  transition:all .18s ease;padding:8px 0}
.dag small{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.dag b{font-family:"JetBrains Mono",monospace;font-size:16px;font-weight:500}
.dag i{font-style:normal;font-size:10px;color:var(--muted-2)}
.dag:hover{border-color:#BFD3DD}
.dag.gekozen{border-color:var(--teal);background:var(--teal);color:#fff}
.dag.gekozen small,.dag.gekozen i{color:rgba(255,255,255,.85)}
.dag.vol{opacity:.4;cursor:not-allowed}

.gekozen-dag{display:flex;flex-wrap:wrap;gap:10px;align-items:center;border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;margin-bottom:10px;animation:instap .25s ease}
.gekozen-dag>b{font-family:Poppins,sans-serif;font-size:14px;min-width:112px}
.segment{display:flex;gap:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-left:auto}
.segment label{position:relative;padding:9px 12px;font-size:13px;cursor:pointer;border-right:1px solid var(--line);
  transition:background .15s ease,color .15s ease}
.segment label:last-child{border-right:0}
.segment input{position:absolute;opacity:0;width:0;height:0}
.segment label:has(input:checked){background:var(--teal);color:#fff;font-weight:600}
.gekozen-dag .weg{border:0;background:none;color:var(--muted-2);cursor:pointer;font-size:18px;line-height:1;padding:0 2px}
.geen-dag{font-size:13.5px;color:var(--muted-2);padding:10px 0}

/* beschikbaarheid */
.moment{display:grid;gap:8px;padding:12px;border:1px solid var(--line-2);border-radius:12px;margin-bottom:10px}
.moment-kop{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2)}
.moment-rij{display:grid;gap:8px}
.moment input,.moment select{min-height:46px}

/* overzicht en knoppen */
.overzicht{background:var(--canvas);border-radius:12px;padding:14px 16px;margin-bottom:16px;font-size:14px}
.overzicht div{display:flex;gap:12px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--line-2)}
.overzicht svg{width:16px;height:16px;color:var(--teal);flex:none;margin-top:2px}
.overzicht div:last-child{border-bottom:0}
.overzicht dt{color:var(--muted);min-width:120px}
.overzicht b{font-weight:600}
.wizard-knoppen{display:flex;gap:10px;margin-top:20px}
.wizard-knoppen .btn{flex:1}
.akkoord{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--muted);margin-top:14px}
.akkoord input{width:20px;height:20px;margin-top:2px;flex:none;accent-color:var(--teal)}
.klaar{text-align:center;padding:10px 0}
.klaar-cirkel{width:56px;height:56px;border-radius:50%;background:var(--green-soft);color:var(--green);
  display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.klaar-cirkel svg{width:28px;height:28px}
.klaar h3{font-size:19px}
.klaar p{font-size:14px;color:var(--muted);margin-top:8px}
.klaar .ref{display:inline-block;margin-top:14px;font-family:"JetBrains Mono",monospace;font-size:14px;
  background:var(--teal-soft);color:var(--teal-ink);padding:8px 14px;border-radius:999px}

@media (min-width:640px){
  .keuzes{grid-template-columns:1fr 1fr}
  .moment-rij{grid-template-columns:1fr 1fr}
}

.wizard{transition:box-shadow .3s ease,border-color .3s ease}
.wizard.aandacht{border-color:var(--teal);box-shadow:0 0 0 4px rgba(0,155,168,.14)}

/* hulpteksten bij het invullen */
.hint-lijst{margin:8px 0 0;padding:0;list-style:none}
.hint-lijst li{position:relative;padding-left:18px;font-size:13px;color:var(--muted);margin-bottom:4px}
.hint-lijst li::before{content:"";position:absolute;left:0;top:7px;width:5px;height:5px;border-radius:50%;background:var(--teal)}
.teller-regel{display:flex;justify-content:space-between;align-items:center;margin-top:6px;font-size:12.5px;color:var(--muted-2)}
.teller-regel.goed{color:var(--green)}
.waarom{display:flex;gap:10px;align-items:flex-start;background:var(--teal-soft);border-radius:10px;padding:11px 13px;
  margin-bottom:10px;font-size:13px;color:var(--teal-ink)}
.waarom svg{width:17px;height:17px;flex:none;margin-top:1px}
.nudge{display:none;gap:10px;align-items:flex-start;background:var(--amber-soft);border-radius:10px;padding:12px 14px;
  margin-top:12px;font-size:13.5px;color:#7A4E00}
.nudge.aan{display:flex;animation:instap .25s ease}
.nudge svg{width:17px;height:17px;flex:none;margin-top:1px}
.nudge b{display:block;margin-bottom:2px}

/* verwachting: wanneer hoort de klant iets */
.verwachting{display:flex;gap:11px;align-items:flex-start;background:var(--teal-soft);border-radius:12px;
  padding:13px 15px;margin-bottom:18px;font-size:13.5px;color:var(--teal-ink)}
.verwachting svg{width:18px;height:18px;flex:none;margin-top:1px}
.verwachting b{display:block;font-family:Poppins,sans-serif;font-weight:600;font-size:14px;margin-bottom:2px}
.verwachting span{display:block;color:var(--teal-ink);opacity:.85}
.bel-note{font-size:13px;color:var(--muted);margin-top:10px}

/* ---------- cta-balk ---------- */
.cta{background:#F1F9FA;border-top:1px solid var(--line)}
.cta-grid{display:grid;gap:18px;padding:32px 0;align-items:center}
.cta-tekst{display:flex;gap:14px;align-items:flex-start}
.cta-tekst h2{font-size:19px}
.cta-tekst p{color:var(--teal-ink);margin-top:6px;font-size:15px}
.cta-ico{width:34px;height:34px;color:var(--teal-ink);display:flex;align-items:center;justify-content:center;flex:none}
.cta-ico svg{width:28px;height:28px;stroke-width:1.4}
.cta-btns{display:flex;flex-wrap:wrap;gap:10px}
.cta-bel{display:flex;align-items:center;gap:10px;min-height:48px;padding:6px 18px;border-radius:12px;background:var(--surface);border:1px solid rgba(0,155,168,.35);color:var(--text)}
.cta-bel:hover{text-decoration:none;border-color:var(--teal)}
.cta-bel svg{width:18px;height:18px;color:var(--teal)}
.cta-bel small{display:block;font-size:12px;color:var(--muted)}
.cta-bel strong{font-family:Poppins,sans-serif;font-size:15px}
.cta-checks{display:grid;gap:8px}

/* ---------- meelopende hulp ---------- */
/* de foto beweegt subtiel: ademen, en een ring die pulseert bij nadenken */
.hulp-knop .avatar,.hulp-kop .avatar{border-radius:50%;object-fit:cover;display:block;
  border:2px solid var(--teal-2);box-shadow:0 0 0 3px rgba(0,182,196,.18)}
.hulp-knop .avatar{width:36px;height:36px;margin:3px;animation:adem 4s ease-in-out infinite}
.hulp-kop .avatar{width:34px;height:34px}
@keyframes adem{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
.hulp-knop{animation:hup 15s ease-in-out infinite}
@keyframes hup{0%,90%,100%{transform:translateY(0)}93%{transform:translateY(-6px)}95%{transform:translateY(0)}97%{transform:translateY(-3px)}}
.hulp-knop:hover{animation:none}
.hulp-knop:hover .avatar{animation:wip .7s ease-in-out}
@keyframes wip{0%,100%{transform:scale(1) rotate(0)}40%{transform:scale(1.09) rotate(-4deg)}70%{transform:scale(1.04) rotate(3deg)}}
.hulp-venster.denkt .hulp-kop .avatar{animation:pols 1.2s ease-in-out infinite}
@keyframes pols{0%,100%{box-shadow:0 0 0 3px rgba(0,182,196,.35)}50%{box-shadow:0 0 0 8px rgba(0,182,196,.10)}}
@media (prefers-reduced-motion:reduce){.hulp-knop,.hulp-knop .avatar,.hulp-kop .avatar{animation:none !important}}

.hulp-knop{position:fixed;right:18px;bottom:18px;z-index:180;display:flex;align-items:center;gap:10px;
  background:var(--navy);color:#fff;border:0;border-radius:999px;padding:8px 18px 8px 8px;cursor:pointer;
  box-shadow:0 10px 30px rgba(13,20,38,.28);transition:transform .2s ease,box-shadow .2s ease}
.hulp-knop:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(13,20,38,.34)}
.hulp-knop .avatar{flex:none}
.hulp-knop b{font-family:Poppins,sans-serif;font-weight:600;font-size:14px}
.hulp-knop .stip{position:absolute;top:6px;right:14px;width:9px;height:9px;border-radius:50%;background:var(--teal-2);
  box-shadow:0 0 0 3px rgba(0,182,196,.25)}
.hulp-knop.dicht{display:none}

.hulp-venster{position:fixed;right:18px;bottom:18px;z-index:190;width:min(370px,calc(100vw - 36px));
  max-height:min(620px,calc(100vh - 40px));background:var(--surface);border:1px solid var(--line);
  border-radius:16px;box-shadow:var(--shadow-l);display:none;flex-direction:column;overflow:hidden}
.hulp-venster.open{display:flex;animation:instap .25s ease}
.hulp-kop{display:flex;align-items:center;gap:11px;background:var(--navy);color:#fff;padding:13px 14px}
.hulp-kop .avatar{flex:none}
.hulp-kop b{display:block;font-family:Poppins,sans-serif;font-weight:600;font-size:15px}
.hulp-kop span{display:block;font-size:12px;color:#8FD9E1}
.hulp-sluit{margin-left:auto;background:none;border:0;color:#fff;cursor:pointer;font-size:20px;line-height:1;padding:4px 6px;opacity:.8}
.hulp-sluit:hover{opacity:1}
.hulp-berichten{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;background:var(--canvas)}
.bericht{max-width:88%;font-size:14px;line-height:1.5;padding:11px 13px;border-radius:14px;animation:instap .2s ease}
.bericht.hulp{background:var(--surface);border:1px solid var(--line);border-bottom-left-radius:5px;align-self:flex-start}
.bericht.mij{background:var(--teal);color:#fff;border-bottom-right-radius:5px;align-self:flex-end}
.bericht b{font-family:Poppins,sans-serif;font-weight:600}
.bericht a{color:var(--teal-ink);text-decoration:underline}
.typt{display:flex;gap:4px;align-self:flex-start;background:var(--surface);border:1px solid var(--line);
  padding:13px;border-radius:14px;border-bottom-left-radius:5px}
.typt i{width:6px;height:6px;border-radius:50%;background:var(--muted-2);animation:tik 1.1s infinite}
.typt i:nth-child(2){animation-delay:.15s}
.typt i:nth-child(3){animation-delay:.3s}
@keyframes tik{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.hulp-chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 12px;background:var(--canvas)}
.hulp-chips button{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:8px 12px;
  font-size:12.5px;cursor:pointer;color:var(--text);transition:all .15s ease}
.hulp-chips button:hover{border-color:var(--teal);color:var(--teal-ink)}
.hulp-invoer{display:flex;gap:8px;padding:11px;border-top:1px solid var(--line);background:var(--surface)}
.hulp-invoer input{flex:1;min-height:44px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:14px;font-family:Inter,sans-serif}
.hulp-invoer input:focus{border-color:var(--teal);outline:none;box-shadow:0 0 0 3px var(--teal-soft)}
.hulp-invoer button{min-width:44px;min-height:44px;border:0;border-radius:10px;background:var(--teal);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.hulp-invoer button svg{width:18px;height:18px}
.hulp-voet{font-size:11px;color:var(--muted-2);text-align:center;padding:0 12px 10px;background:var(--surface)}
@media (max-width:999px){
  .hulp-knop{bottom:94px;right:14px;padding:7px 15px 7px 7px}
  .hulp-knop .avatar{width:32px;height:32px}
  .hulp-venster{bottom:12px;right:12px;left:12px;width:auto;max-height:calc(100vh - 24px)}
}

/* ---------- vaste actiebalk op mobiel ---------- */
.mobielbalk{position:fixed;left:0;right:0;bottom:0;z-index:150;display:grid;grid-template-columns:1fr 1fr;gap:10px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px);border-top:1px solid var(--line);box-shadow:0 -6px 24px rgba(21,31,53,.08)}
.mobielbalk{transition:transform .3s cubic-bezier(.4,0,.2,1)}
.mobielbalk.weg{transform:translateY(110%)}
.mobielbalk .btn{min-height:50px}
.mobielbalk .btn svg{width:17px;height:17px}
body{padding-bottom:84px}

/* ---------- voettekst ---------- */
.site-foot{background:var(--navy);color:#B7C2D2;padding:40px 0 26px}
.foot-grid{display:grid;gap:28px}
.foot-logo{height:46px;width:auto}
.foot-claim{color:#fff;font-family:Poppins,sans-serif;font-weight:500;font-size:14px;margin-top:12px}
.foot-claim span{color:#19C7D6}
.site-foot h4{color:#fff;font-size:13px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:12px}
.site-foot p,.site-foot li{font-size:14px}
.site-foot a{color:#B7C2D2}
.site-foot a:hover{color:#fff}
.foot-links li{margin-bottom:8px}
.foot-contact li{display:flex;gap:9px;margin-bottom:9px;align-items:flex-start}
.foot-contact svg{width:16px;height:16px;color:#19C7D6;flex:none;margin-top:3px}
.socials{display:flex;gap:8px;margin-top:16px}
.socials a{width:36px;height:36px;border-radius:10px;border:1px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center}
.socials svg{width:16px;height:16px}
.foot-onder{margin-top:28px;padding-top:16px;border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;font-size:13px;color:var(--muted-2)}
.foot-onder ul{display:flex;flex-wrap:wrap;gap:8px 18px}

/* ---------- grotere schermen ---------- */
@media (min-width:640px){
  .rij-2{grid-template-columns:1fr 1fr}
  .schades{grid-template-columns:1fr 1fr}
  .spoedstrip .bel-nu{display:inline-flex}
  .usp-grid{grid-template-columns:1fr 1fr}
  .usp-item{border-bottom:0;padding:22px 20px 22px 0}
  .trust{grid-template-columns:1fr 1fr}
  .reviews{grid-template-columns:1fr 1fr}
  .hero h1{font-size:38px}
  .cta-checks{grid-template-columns:1fr 1fr}
}
@media (min-width:1000px){
  .section{padding:60px 0}
  .section h2{font-size:22px}
  .menu-btn{display:none}
  .mobielbalk{display:none}
  body{padding-bottom:0}
  .head-tel,.head-cta{display:inline-flex}
  .nav{display:block;border:0;padding:0;flex:1}
  .nav>ul{display:flex;justify-content:center;gap:4px}
  .nav-item{border:0;position:relative}
  .nav-link{padding:10px 12px;white-space:nowrap;position:relative}
  .nav-link.actief::after{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:2px;background:var(--teal);border-radius:2px}
  .submenu{display:block;position:absolute;top:calc(100% + 8px);left:0;min-width:230px;background:var(--surface);
    border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-m);padding:8px;
    opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s ease,transform .16s ease}
  .nav-item:hover .submenu,.nav-item.open .submenu,.nav-item:focus-within .submenu{opacity:1;visibility:visible;transform:none}
  .submenu a{padding:9px 12px;border-radius:9px}
  .submenu a:hover{background:var(--canvas);text-decoration:none}
  .nav-tel{display:none}

  .hero-inner{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:40px;padding:0}
  .hero-tekst{padding:56px 0 60px}
  .hero h1{font-size:44px}
  .hero-media{position:relative;min-height:470px;margin:0}
  .hero-media .foto{position:absolute;top:0;bottom:0;left:0;width:50vw;height:auto;border-radius:0 0 0 var(--radius)}
  .hero-media img{object-position:56% center;will-change:transform}

  .usp-grid{grid-template-columns:repeat(3,1fr)}
  .usp-item{border-right:1px solid var(--line-2);padding:26px 24px}
  .usp-item:first-child{padding-left:0}
  .usp-item:last-child{border-right:0}

  .routes{grid-template-columns:repeat(4,1fr);gap:16px}
  .route{padding:22px 20px 50px;min-height:200px}
  .route h3{font-size:16.5px}
  .route .wat{font-size:13.5px}
  .schades{grid-template-columns:repeat(3,1fr);gap:18px}
  .doelgroepen{grid-template-columns:repeat(3,1fr)}
  .doel-body{padding:22px 20px}
  .trust{grid-template-columns:repeat(4,1fr)}
  .reviews{grid-template-columns:repeat(3,1fr)}

  .reis{grid-template-columns:2fr 3fr 2fr}
  .fase{padding:20px}
  .fase-haltes{grid-auto-flow:column;grid-auto-columns:1fr;gap:16px}
  .fase-haltes::before{left:19px;right:19px;top:18px;bottom:auto;width:auto;height:2px}
  .halte{flex-direction:column;gap:12px}
  .halte h3{font-size:14px}
  .halte p{font-size:12.5px}

  .portaal-blok{grid-template-columns:1fr 1fr;padding:40px 38px;gap:40px}
  .contact-grid{grid-template-columns:1.3fr .7fr;gap:20px}
  .cta-grid{grid-template-columns:1.15fr auto auto;gap:30px}
  .cta-tekst h2{font-size:22px}
  .foot-grid{grid-template-columns:1.5fr 1fr 1fr 1fr 1.2fr}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .halte-nr,.submenu{transition:none}
}

/* ---------- dienstenpagina ---------- */
.kruimels{font-size:13px;color:var(--muted);padding:16px 0 0}
.kruimels a{color:var(--muted)}
.kruimels span{color:var(--muted-2);margin:0 6px}
.dienst-hero{background:var(--surface);padding:22px 0 40px}
.dienst-hero .eyebrow{margin-bottom:10px}
.dienst-hero h1{font-size:29px;max-width:17ch}
.dienst-hero h1 em{font-style:normal;color:var(--teal)}
.dienst-hero .lead{color:var(--muted);margin-top:14px;max-width:56ch}
.dienst-grid{display:grid;gap:26px;align-items:center}
.dienst-foto{border-radius:var(--radius);overflow:hidden;aspect-ratio:16/10;background:var(--teal-soft)}
.dienst-foto img{width:100%;height:100%;object-fit:cover;display:block}

/* klachtenwijzer */
.klachten{display:grid;gap:10px}
.klacht{border:1.5px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden;
  transition:border-color .18s ease,box-shadow .18s ease}
.klacht.open{border-color:var(--teal);box-shadow:var(--shadow-s)}
.klacht-knop{display:flex;align-items:center;gap:12px;width:100%;border:0;background:none;cursor:pointer;
  padding:15px 16px;text-align:left;font-size:15px;font-family:Poppins,sans-serif;font-weight:600;color:var(--text)}
.klacht-vink{width:24px;height:24px;border-radius:50%;border:2px solid var(--line);flex:none;
  display:flex;align-items:center;justify-content:center;color:transparent;transition:all .2s ease}
.klacht-vink svg{width:13px;height:13px}
.klacht.open .klacht-vink{background:var(--teal);border-color:var(--teal);color:#fff}
.klacht-knop .pijl{margin-left:auto;color:var(--muted-2);transition:transform .2s ease}
.klacht-knop .pijl svg{width:16px;height:16px}
.klacht.open .pijl{transform:rotate(180deg)}
.klacht-uitleg{display:none;padding:0 16px 16px 52px;font-size:14px;color:var(--muted);line-height:1.55}
.klacht.open .klacht-uitleg{display:block;animation:instap .22s ease}
.klachten-uitkomst{display:none;margin-top:14px;background:var(--teal-soft);border-radius:12px;padding:15px 17px;
  font-size:14px;color:var(--teal-ink)}
.klachten-uitkomst.aan{display:block;animation:instap .25s ease}
.klachten-uitkomst b{display:block;font-family:Poppins,sans-serif;font-weight:600;margin-bottom:4px}
.klachten-uitkomst .btn{margin-top:12px}

/* stappen op de dienstenpagina */
.dstappen{display:grid;gap:0;counter-reset:d}
.dstap{position:relative;display:flex;gap:16px;padding-bottom:22px}
.dstap::before{counter-increment:d;content:counter(d);position:absolute;left:0;top:0;width:34px;height:34px;
  border-radius:50%;background:var(--teal-soft);color:var(--teal-ink);font-family:"JetBrains Mono",monospace;
  font-size:12px;display:flex;align-items:center;justify-content:center}
.dstap::after{content:"";position:absolute;left:17px;top:38px;bottom:0;width:2px;background:var(--line-2)}
.dstap:last-child{padding-bottom:0}
.dstap:last-child::after{display:none}
.dstap>div{padding-left:50px}
.dstap h3{font-size:15px}
.dstap p{font-size:14px;color:var(--muted);margin-top:4px}

.kosten-blok{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-s);padding:22px 20px}
.kosten-blok h2{font-size:19px;margin-bottom:10px}
.kosten-blok p{font-size:14.5px;color:var(--muted)}
.kosten-blok .btn{margin-top:16px}

.andere{display:grid;gap:10px}
.andere a{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;padding:14px 16px;color:var(--text);font-weight:500;font-size:14.5px;transition:all .15s ease}
.andere a:hover{border-color:var(--teal);color:var(--teal-ink);text-decoration:none;transform:translateX(3px)}
.andere svg{width:18px;height:18px;color:var(--teal);flex:none}
.andere .pijl{margin-left:auto;color:var(--muted-2)}

@media (min-width:640px){
  .klachten{grid-template-columns:1fr}
  .andere{grid-template-columns:1fr 1fr}
}
@media (min-width:1000px){
  .dienst-hero{padding:26px 0 56px}
  .dienst-hero h1{font-size:38px}
  .dienst-grid{grid-template-columns:1.05fr .95fr;gap:44px}
  .andere{grid-template-columns:repeat(3,1fr)}
}


/* ---------- dienstenpagina: rustiger en strakker ---------- */

/* actieve dienst in het uitklapmenu */
.submenu a.nu{background:var(--teal-soft);color:var(--teal-ink);font-weight:600}
.submenu a.nu::after{content:"\2022";margin-left:auto;color:var(--teal)}
.submenu a{display:flex;align-items:center}

/* kruimelpad: kleiner en rustiger, met de huidige pagina erin */
.kruimels{font-size:12.5px;color:var(--muted-2);padding:18px 0 0;letter-spacing:.01em}
.kruimels a{color:var(--muted-2)}
.kruimels a:hover{color:var(--teal-ink)}
.kruimels span{margin:0 7px;opacity:.6}
.kruimels b{color:var(--muted);font-weight:500}

/* hero: meer lucht, kleinere lead */
.dienst-hero{padding:14px 0 40px}
.dienst-hero h1{font-size:28px;max-width:16ch;line-height:1.18}
.dienst-hero .lead{font-size:15px;max-width:50ch;margin-top:13px}
.dienst-hero .hero-checks{margin-top:22px;gap:9px 20px}
.dienst-hero .check{font-size:13.5px}

/* klachtenwijzer: lichter in rust, duidelijk bij openen */
.klacht{border:1px solid var(--line-2);border-radius:12px;background:var(--surface)}
.klacht:hover{border-color:var(--line)}
.klacht.open{border-color:var(--teal);box-shadow:0 1px 2px rgba(0,155,168,.08)}
.klacht-knop{padding:14px 15px;font-size:14.5px;font-weight:500;gap:11px}
.klacht.open .klacht-knop{font-weight:600}
.klacht-vink{width:21px;height:21px;border-width:1.5px}
.klacht-vink svg{width:11px;height:11px}
.klacht-uitleg{padding:0 15px 15px 47px;font-size:13.5px}
.klachten{gap:8px}

/* de uitkomst valt op zonder te schreeuwen */
.klachten-uitkomst{background:var(--surface);border:1px solid var(--teal);padding:17px 19px;color:var(--text)}
.klachten-uitkomst b{color:var(--teal-ink);font-size:14.5px}
.klachten-uitkomst .btn{min-height:44px;font-size:14px}

/* stappen: dunner en rustiger */
.dstap::before{width:30px;height:30px;font-size:11px;background:var(--surface);border:1.5px solid var(--teal);color:var(--teal-ink)}
.dstap::after{left:15px;top:34px}
.dstap>div{padding-left:44px}
.dstap{padding-bottom:20px}
.dstap h3{font-size:14.5px}
.dstap p{font-size:13.5px;margin-top:3px}

/* kostenblok krijgt lichte nadruk in plaats van een kader */
.kosten-blok{background:var(--canvas);border:0;box-shadow:none;padding:24px 22px}
.kosten-blok h2{font-size:17px}
.kosten-blok p{font-size:14px;line-height:1.55}

/* andere diensten: compacte rij in plaats van vette blokken */
.andere a{background:transparent;border:1px solid var(--line-2);padding:13px 15px;font-size:14px;font-weight:500}
.andere a:hover{background:var(--surface);border-color:var(--teal)}
.andere svg:first-child{display:none}
.andere .pijl{margin-left:auto;color:var(--line);transition:color .15s ease,transform .15s ease}
.andere a:hover .pijl{color:var(--teal);transform:translateX(2px)}

/* koppen op de dienstenpagina één maat kleiner */
.section h2{font-size:19px}
@media (min-width:1000px){
  .dienst-hero h1{font-size:36px}
  .section h2{font-size:22px}
  .dienst-hero{padding:16px 0 56px}
}


/* ====================================================================
   VLOEIENDE MAATVOERING
   Typografie, ruimte en breedte schalen mee met het scherm in plaats van
   in sprongen. Zo klopt de verhouding op een telefoon van 360px én op een
   monitor van 2560px, zonder dat er tussenmaten misgaan.
   clamp(minimum, meegroeiend, maximum)
   ==================================================================== */

:root{
  --pad:clamp(18px, 1.2vw + 14px, 40px);
  --breedte:clamp(320px, 90vw, 1180px);
}
@media (min-width:1300px){ :root{ --breedte:min(88vw, 1280px) } }
@media (min-width:1700px){ :root{ --breedte:1360px } }

.wrap{width:var(--breedte);max-width:100%;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

/* basisgrootte: nooit kleiner dan 15.5, nooit groter dan 17.5 */
body{font-size:clamp(15.5px, 0.92rem + 0.18vw, 17.5px)}

/* koppen schalen mee, met een plafond */
.hero h1{font-size:clamp(27px, 1.35rem + 2.6vw, 52px);line-height:1.14}
.dienst-hero h1{font-size:clamp(25px, 1.2rem + 2.1vw, 42px);line-height:1.16}
.section h2{font-size:clamp(19px, 0.95rem + 0.75vw, 27px)}
.section-head p{font-size:clamp(14px, 0.82rem + 0.15vw, 16px)}
.hero-lead,.dienst-hero .lead{font-size:clamp(15px, 0.88rem + 0.3vw, 18px)}

/* ruimte tussen secties groeit mee */
.section{padding:clamp(40px, 2.6vw + 26px, 88px) 0}
.section-head{margin-bottom:clamp(18px, 1vw + 12px, 32px)}

/* kaarten: gelijkmatige tussenruimte op elk formaat */
.routes,.schades,.doelgroepen,.trust,.reviews,.andere{gap:clamp(12px, .8vw + 8px, 20px)}
.doel-body,.schade-body{padding:clamp(18px, .9vw + 13px, 26px)}
.doel-top{padding:clamp(18px, .9vw + 13px, 26px)}
.doel-top{min-height:clamp(158px, 8vw + 96px, 200px)}

/* iconen groeien mee, maar met een strak plafond */
.doel-ico{width:clamp(32px, 1.1vw + 26px, 38px);height:clamp(32px, 1.1vw + 26px, 38px)}
.doel-ico svg{width:clamp(16px, .5vw + 13px, 19px);height:clamp(16px, .5vw + 13px, 19px)}
.route .ico{width:clamp(40px, 1.4vw + 32px, 50px);height:clamp(40px, 1.4vw + 32px, 50px)}
.schade-ico{width:clamp(42px, 1.2vw + 34px, 50px);height:clamp(42px, 1.2vw + 34px, 50px)}

/* tussenformaat: tablets krijgen een eigen indeling in plaats van
   de mobiele opmaak uitgerekt */
@media (min-width:760px) and (max-width:999px){
  .routes{grid-template-columns:repeat(2,1fr)}
  .schades{grid-template-columns:repeat(2,1fr)}
  .doelgroepen{grid-template-columns:repeat(2,1fr)}
  .doelgroepen>article:last-child{grid-column:1 / -1}
  .trust{grid-template-columns:repeat(2,1fr)}
  .reviews{grid-template-columns:repeat(2,1fr)}
  .andere{grid-template-columns:repeat(2,1fr)}
  .usp-grid{grid-template-columns:repeat(3,1fr)}
  .usp-item{border-right:1px solid var(--line-2);padding:22px 18px}
  .usp-item:last-child{border-right:0}
  .foot-grid{grid-template-columns:repeat(2,1fr);gap:26px}
  .cta-grid{grid-template-columns:1fr auto}
  .cta-checks{grid-column:1 / -1}
}

/* zeer brede schermen: hero blijft in verhouding */
@media (min-width:1500px){
  .hero-inner{gap:clamp(40px, 3vw, 72px)}
  .hero-media{min-height:clamp(470px, 30vw, 620px)}
  .hero-media .foto{width:calc(50vw - 0px);max-width:none}
  .hero-tekst{padding:clamp(56px, 4vw, 96px) 0}
}

/* de tekstkolom nooit te breed: leesbaarheid boven alles */
.section-head p,.hero-lead,.kosten-blok p,.faq details p,.juridisch p{max-width:68ch}


/* ---------- correcties na de controle ---------- */

/* iOS zoomt in op een veld met tekst kleiner dan 16px. Dat verspringt de hele
   pagina zodra iemand begint te typen. Op smalle schermen dus 16px. */
@media (max-width:759px){
  .veld input,.veld select,.veld textarea,.hulp-invoer input{font-size:16px}
}

/* aanraakvlakken minimaal 44px, ook de chips */
.chip{min-height:44px}
.taallijst button{min-height:44px}

/* lange samengestelde woorden mogen afbreken in plaats van uitsteken */
h1,h2,h3,.nav-link,.submenu a,.route h3,.schade h3,.doel-kop h3{overflow-wrap:break-word;hyphens:auto}

/* tabellen in de juridische pagina's schuiven mee op een telefoon */
.juridisch table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}

/* niets steekt horizontaal uit */
html,body{overflow-x:hidden}
img,svg{max-width:100%}