: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: drie fasen, tien haltes ---------- */
.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}
}

.juridisch{max-width:760px}
.juridisch h2{font-size:19px;margin:30px 0 10px}
.juridisch h3{font-size:15.5px;margin:20px 0 6px}
.juridisch p,.juridisch li{font-size:15px;color:var(--text);line-height:1.6}
.juridisch p{margin-bottom:12px}
.juridisch ul{margin:0 0 14px}
.juridisch li{position:relative;padding-left:20px;margin-bottom:7px}
.juridisch li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--teal)}
.juridisch .let-op{background:var(--amber-soft);border-radius:12px;padding:14px 16px;font-size:14px;color:#7A4E00;margin-bottom:22px}
.juridisch table{width:100%;border-collapse:collapse;margin-bottom:16px;font-size:14px}
.juridisch th,.juridisch td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line-2);vertical-align:top}
.juridisch th{font-family:Poppins,sans-serif;font-weight:600;color:var(--muted);font-size:13px}
/* ====================================================================
   FILMISCHE LAAG — ingetogen
   Alleen beweging die de bestaande opmaak niet aanraakt. Geen elementen
   die standaard onzichtbaar zijn, geen kantelende kaarten, geen
   clip-path. Alles gaat uit bij 'verminder beweging'.
   ==================================================================== */

/* 1. herofoto zoomt heel traag in en weer uit */
.hero-media .foto{overflow:hidden}
.hero-media img{animation:traagzoom 30s ease-in-out infinite alternate}
@keyframes traagzoom{from{transform:scale(1.03)}to{transform:scale(1.09)}}

/* 2. zacht verloop over de onderrand van de herofoto, voor diepte */
.hero-media .foto::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(to top,rgba(21,31,53,.22),rgba(21,31,53,0) 40%)}

/* 3. teal streep onder het woord Forward in de kop */
.hero h1 em{position:relative}
.hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:-.04em;height:.07em;
  background:var(--teal);border-radius:2px;transform:scaleX(0);transform-origin:left;
  animation:streep .9s cubic-bezier(.2,.7,.3,1) .5s forwards}
@keyframes streep{to{transform:scaleX(1)}}

/* 4. lijntje onder elke sectiekop dat zich uitrolt */
.section-head{position:relative}
.section-head::after{content:"";position:absolute;left:0;bottom:-10px;height:2px;width:0;
  background:linear-gradient(90deg,var(--teal),rgba(0,155,168,0));border-radius:2px}
.section-head.in::after{width:64px;transition:width .8s cubic-bezier(.2,.7,.3,1) .2s}

/* 5. glans over de teal knoppen bij hover */
.btn-primary{position:relative;overflow:hidden}
.btn-primary>*{position:relative;z-index:1}
.btn-primary::after{content:"";position:absolute;top:0;bottom:0;width:45%;left:-60%;z-index:0;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.20),transparent);transform:skewX(-18deg)}
.btn-primary:hover::after{animation:glans .75s ease}
@keyframes glans{to{left:120%}}

/* 6. korte puls bij een haltenummer dat aangaat */
.fase.on .halte-nr{animation:puls .6s ease}
@keyframes puls{0%{box-shadow:0 0 0 0 rgba(0,155,168,.35)}100%{box-shadow:0 0 0 12px rgba(0,155,168,0)}}

@media (prefers-reduced-motion:reduce){
  .hero-media img,.hero h1 em::after{animation:none !important}
  .hero h1 em::after{transform:scaleX(1)}
  .section-head::after{display:none}
  .btn-primary::after{display:none}
}




/* ====================================================================
   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}



/* ---------- voor wie ---------- */
.doelgroepen{display:grid;gap:14px;align-items:start}
.doel{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  box-shadow:var(--shadow-s);display:grid;grid-template-rows:auto 1fr;
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.doel:hover{border-color:#CBDDE4;box-shadow:var(--shadow-m);transform:translateY(-2px)}

/* bovenblok in navy: wie, en wat het probleem is */
.doel-top{background:var(--navy);padding:22px 22px 20px;display:grid;grid-template-rows:auto auto 1fr;min-height:180px}
.doel-kop{display:flex;align-items:center;gap:11px;margin-bottom:16px}
.doel-ico{width:34px;height:34px;border-radius:9px;background:rgba(0,182,196,.14);color:#19C7D6;
  display:flex;align-items:center;justify-content:center;flex:none}
.doel-ico svg{width:17px;height:17px;stroke-width:1.7}
.doel-kop h3{font-size:16px;color:#fff;letter-spacing:-.01em}
.pijn{margin:0;font-size:14px;line-height:1.55;color:#B9C6D6;background:none;padding:0;border-radius:0}
.pijn::before{display:none}
.pijn strong{display:block;font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;
  color:#6E86A3;font-weight:600;margin-bottom:7px}

/* onderblok: wat wij doen */
.doel-body{padding:20px 22px 22px}
.doel-list-kop{display:block;font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--teal);font-weight:600;margin:0 0 14px}
.doel-list-kop::after{display:none}
.doel-list{margin:0;padding:0;border:0}
.doel-list li{position:relative;padding-left:24px;font-size:14px;line-height:1.45;color:var(--text);margin-bottom:11px}
.doel-list li:last-child{margin-bottom:0}
.doel-list li::before{content:"";position:absolute;left:0;top:2.5px;width:15px;height:15px;border-radius:50%;
  background:var(--teal);-webkit-mask:var(--vink) center/8.5px no-repeat;mask:var(--vink) center/8.5px no-repeat}
:root{--vink:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E")}



/* taalkeuze met vlag */
.taalkeuze{position:relative;flex:none}
.taalknop{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 11px;border:1px solid var(--line);
  background:var(--surface);border-radius:12px;cursor:pointer;font-family:Poppins,sans-serif;font-weight:600;
  font-size:13px;color:var(--text);letter-spacing:.03em;transition:border-color .15s ease,color .15s ease}
.taalknop:hover{border-color:var(--teal);color:var(--teal-ink)}
.taalknop svg{width:21px;height:15px;flex:none;border-radius:2px}
.taalknop .caret{width:11px;height:11px;color:var(--muted-2);transition:transform .2s ease}
.taalkeuze.open .taalknop .caret{transform:rotate(180deg)}
.taallijst{position:absolute;right:0;top:calc(100% + 6px);min-width:168px;background:var(--surface);
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-m);padding:6px;z-index:210;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s ease,transform .16s ease}
.taalkeuze.open .taallijst{opacity:1;visibility:visible;transform:none}
.taallijst button{display:flex;align-items:center;gap:9px;width:100%;border:0;background:none;cursor:pointer;
  padding:10px 11px;border-radius:9px;font-size:14px;color:var(--text);text-align:left;font-family:Inter,sans-serif}
.taallijst button:hover{background:var(--canvas)}
.taallijst button svg{width:21px;height:15px;flex:none;border-radius:2px}
.taallijst button[aria-current="true"]{font-weight:600;color:var(--teal-ink)}
.taallijst button[aria-current="true"]::after{content:"\2713";margin-left:auto;color:var(--teal)}


@media (min-width:1000px){
  .doelgroepen{grid-template-columns:repeat(3,1fr);gap:16px}
  .doel-top{min-height:190px}
}

/* adrescontrole bij het schadeformulier */
.adres-status{display:none;gap:9px;align-items:flex-start;border-radius:10px;padding:11px 13px;margin-top:2px;font-size:13.5px}
.adres-status.aan{display:flex}
.adres-status svg{width:17px;height:17px;flex:none;margin-top:1px}
.adres-status.bezig{background:var(--canvas);color:var(--muted)}
.adres-status.goed{background:var(--green-soft);color:#14603D}
.adres-status.let-op{background:var(--amber-soft);color:#7A4E00}
.adres-status b{display:block;font-family:Poppins,sans-serif;font-weight:600}
.adres-status button{border:0;background:none;color:inherit;text-decoration:underline;cursor:pointer;font-size:13px;padding:0;margin-top:4px}
.draai{animation:draai 1s linear infinite}
@keyframes draai{to{transform:rotate(360deg)}}


/* ---------- schades en aanvullende diensten ---------- */
.schades{display:grid;gap:14px}
.schade{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-s);
  padding:22px 20px 20px;display:flex;flex-direction:column;overflow:visible;
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}
.schade:hover{border-color:var(--teal);transform:translateY(-2px);box-shadow:var(--shadow-m)}
.schade-ico{width:46px;height:46px;border-radius:12px;background:var(--navy);color:#19C7D6;border:0;
  display:flex;align-items:center;justify-content:center;margin:0 0 16px;box-shadow:none}
.schade-ico svg{width:23px;height:23px;stroke-width:1.7}
.schade h3{font-size:16px;padding:0;margin:0 0 7px}
.schade p{font-size:13.5px;line-height:1.5;color:var(--muted);margin:0}
.schade .lees{margin-top:auto;padding-top:14px}

.aanvullend{display:grid;gap:12px}
.av{display:block;background:var(--canvas);border:1px solid var(--line-2);border-radius:12px;padding:18px;
  color:var(--text);transition:background .18s ease,border-color .18s ease,transform .18s ease}
.av:hover{background:var(--surface);border-color:var(--teal);text-decoration:none;transform:translateY(-2px)}
.av-ico{width:34px;height:34px;border-radius:9px;background:var(--teal-soft);color:var(--teal-ink);
  display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.av-ico svg{width:17px;height:17px;stroke-width:1.7}
.av h3{font-size:14.5px;margin:0 0 5px;line-height:1.25}
.av p{font-size:12.5px;line-height:1.45;color:var(--muted-2);margin:0}

@media (min-width:640px){
  .schades{grid-template-columns:repeat(2,1fr)}
  .aanvullend{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1000px){
  .schades{grid-template-columns:repeat(4,1fr)}
  .aanvullend{grid-template-columns:repeat(4,1fr)}
}


/* ---------- aanpassingen uit het ontwerpvoorstel ---------- */

/* contrast van ondersteunende tekst omhoog: leesbaar op een telefoon buiten */
:root{--muted:#5F6E82;--muted-2:#8794A6}

/* bellen als tekstregel onder de hoofdknop, niet als tweede knop */
.hero-bellen{font-size:13.5px;color:var(--muted);margin-top:12px}
.hero-bellen a{color:var(--teal-ink);font-weight:500}

/* vertrouwensblok compacter: vier korte kaarten in plaats van vier alinea's */
.trust-item{flex-direction:column;gap:9px;padding:18px 16px}
.trust-item svg{width:19px;height:19px;margin:0}
.trust-item h3{font-size:14px;line-height:1.3}
.trust-item p{font-size:13px;line-height:1.5;margin-top:0}

/* het blok 'wat er daarna gebeurt' krijgt meer rust */
.daarna{background:var(--canvas);border:0}



/* ---------- lijnkaart: bus wordt door het script aangestuurd ---------- */
.lijnkaart{background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:64px 20px 22px;box-shadow:var(--shadow-s)}
.lijn-route{position:relative}
.spoor{position:absolute;left:5%;right:5%;top:20px;height:6px;border-radius:3px;background:#E8EDF1}
.gereden{position:absolute;left:5%;top:20px;height:6px;border-radius:3px;width:0;
  background:linear-gradient(90deg,var(--teal-2),var(--teal) 45%,#1C7F99 72%,var(--navy));
  transition:width var(--dur,1s) cubic-bezier(.4,.02,.22,1)}
.lijnkaart.glijdt .gereden,.lijnkaart.glijdt .bus{transition-timing-function:cubic-bezier(.45,.05,.55,.95)}

.bus{position:absolute;top:-50px;left:5%;width:104px;transform:translateX(-52%);z-index:3;
  filter:drop-shadow(0 6px 8px rgba(21,31,53,.2));
  transition:left var(--dur,1s) cubic-bezier(.4,.02,.22,1)}
.bus .body{width:100%;display:block;height:auto}
.velg{position:absolute;width:6.57%;height:auto;aspect-ratio:1;transform:translate(-50%,-50%);
  animation:velg-draai .62s linear infinite;animation-play-state:paused}
.velg.a{left:24.14%;top:66.77%}
.velg.v{left:83.71%;top:66.45%}
.lijnkaart.rolt .velg{animation-play-state:running}
.lijnkaart.achteruit .velg{animation-direction:reverse}
@keyframes velg-draai{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* teller rechtsboven in de kaart */
.lijn-teller{position:absolute;right:0;top:-46px;font-family:"JetBrains Mono",monospace;
  font-size:11.5px;color:var(--muted-2);background:var(--canvas);border-radius:20px;padding:5px 12px}
.lijn-teller b{color:var(--teal-ink);font-weight:500}

.haltes{position:relative;display:grid;grid-template-columns:repeat(10,1fr);z-index:2;padding-top:10px;margin:0;list-style:none}
.haltes .halte{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 2px;
  gap:0;cursor:pointer}
.haltes .bol{width:18px;height:18px;border-radius:50%;background:var(--surface);
  border:3.5px solid #DAE3E9;margin-bottom:11px;flex:none;
  transition:transform .3s cubic-bezier(.34,1.3,.5,1),box-shadow .3s ease,border-color .25s ease,background .25s ease}
.haltes .halte.bekeken .bol{border-color:var(--teal);background:var(--teal)}
.haltes .halte.nu .bol{border-color:var(--teal);background:var(--teal);
  transform:scale(1.3);box-shadow:0 0 0 7px rgba(0,155,168,.20)}
.haltes .halte:hover .bol{border-color:var(--teal);transform:scale(1.15)}
.haltes b{font-family:"JetBrains Mono",monospace;font-size:10px;color:var(--muted-2);font-weight:500;margin-bottom:3px;transition:color .25s ease}
.haltes span:last-child{font-size:10px;line-height:1.3;color:var(--muted-2);transition:color .25s ease}
.haltes .halte.nu b,.haltes .halte.nu span:last-child{color:var(--teal-ink);font-weight:600}

@media (max-width:759px){
  .lijnkaart{padding:20px 16px 20px 54px}
  .lijn-teller{position:static;display:inline-block;margin-bottom:14px}
  .spoor{left:12px;right:auto;top:10px;bottom:10px;width:6px;height:auto}
  .gereden{left:12px;top:10px;width:6px !important;height:0;
    background:linear-gradient(180deg,var(--teal-2),var(--teal) 45%,#1C7F99 72%,var(--navy));
    transition:height var(--dur,1s) cubic-bezier(.4,.02,.22,1)}
  .bus{top:0;left:15px !important;width:72px;transform:translate(-50%,-50%) rotate(90deg);
    transition:top var(--dur,1s) cubic-bezier(.4,.02,.22,1)}
  .haltes{grid-template-columns:1fr;padding-top:0;gap:15px}
  .haltes .halte{flex-direction:row;align-items:center;gap:12px;text-align:left}
  .haltes .bol{margin:0}
  .haltes b{margin:0}
  .haltes span:last-child{font-size:13px;color:var(--text)}
}
@media (prefers-reduced-motion:reduce){
  .lijnkaart.rijdt .gereden,.lijnkaart.rijdt .bus,.lijnkaart.rijdt .velg{animation:none}
  .gereden{width:90%}.bus{left:95%}
  .haltes .bol{border-color:var(--teal);background:var(--teal);transition:none}
  .haltes .halte.nu .bol{transform:none;box-shadow:0 0 0 5px rgba(0,155,168,.18)}
}


/* ---------- 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%}








/* de haltes staan per fase uitgeschreven: alles in één oogopslag zichtbaar */
.fases{display:grid;grid-template-columns:1fr;gap:12px;margin-top:26px;text-align:left}
.fase-blok{padding:15px 16px 14px;border-top:3px solid;background:var(--canvas);border-radius:0 0 12px 12px}
.fase-blok>b{display:block;font-family:Poppins,sans-serif;font-weight:600;font-size:13.5px;color:var(--text)}
.fase-blok>span{display:block;font-size:11.5px;color:var(--muted-2);margin-bottom:12px}
.fase-regels{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.fr{display:flex;gap:10px;align-items:flex-start;padding:7px 9px;border-radius:9px;
  transition:background .35s ease,opacity .35s ease;cursor:pointer;opacity:.45}
.fr-nr{font-family:"JetBrains Mono",monospace;font-size:10.5px;font-weight:500;flex:none;
  width:24px;height:20px;border-radius:5px;display:flex;align-items:center;justify-content:center;
  background:#E3E9EE;color:var(--muted-2);transition:background .35s ease,color .35s ease}
.fr-tekst{font-size:13px;line-height:1.45;color:var(--muted);min-width:0}
.fr-tekst b{display:block;font-family:Poppins,sans-serif;font-weight:600;font-size:12.5px;
  color:var(--text);margin-bottom:1px;transition:color .35s ease}

/* geweest: gewoon leesbaar, maar rustig */
.fr.bekeken{opacity:1}
.fr.bekeken .fr-nr{background:#CFE9EC;color:var(--teal-ink)}

/* waar de bus nu is */
.fr.nu{opacity:1;background:var(--teal-soft);box-shadow:0 0 0 1px rgba(0,155,168,.35)}
.fr.nu .fr-nr{background:var(--teal);color:#fff}
.fr.nu .fr-tekst b{color:var(--teal-ink)}
.fr.nu .fr-tekst{color:var(--text)}
.fr:hover{opacity:1}

@media (min-width:760px){
  .fases{grid-template-columns:repeat(3,1fr);gap:14px}
}
@media (prefers-reduced-motion:reduce){
  .fr{opacity:1;transition:none}
}


/* de naam staat al in het fasenblok; onder de lijn volstaat het nummer */
@media (min-width:760px){
  .haltes span:last-child{font-size:10px;color:var(--muted-2)}
  .haltes .halte.nu span:last-child{color:var(--teal-ink)}
}