:root{
  --ground:#FFFFFF;
  --paper:#F4F7FC;
  --surface:#FFFFFF;
  --line:#DEE5F1;
  --line-strong:#C3CFE5;
  --ink:#111B33;
  --ink-soft:#44527A;
  --ink-muted:#6B7899;
  --heading:#0C1D55;
  --accent:#0F6E72;
  --accent-hover:#0B5A5E;
  --accent-soft:rgba(15,110,114,.10);
  --ok:#0E7A54;
  --ok-soft:rgba(14,122,84,.09);
  --warn:#9A5B08;
  --alarm:#8E1119;
  --alarm-soft:rgba(142,17,25,.10);
  --warn-soft:rgba(154,91,8,.10);
  --focus:#1E3A8F;
  --band:#0C1D55;
  --band-ink:#FFFFFF;
  --band-soft:#B9C7EC;
  --band-line:rgba(255,255,255,.16);
  --ph-bg:rgba(12,29,85,.045);
  --ph-line:#B9C7E4;
  --shadow:0 1px 2px rgba(12,29,85,.05),0 14px 34px -18px rgba(12,29,85,.30);
  --r:12px;
  --measure:66ch;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#080E22;--paper:#0D1531;--surface:#0C142E;
    --line:#212F58;--line-strong:#32407A;
    --ink:#E9EEFA;--ink-soft:#B6C3E2;--ink-muted:#8E9CC0;--heading:#DCE6FF;
    --accent:#4FC7CC;--accent-hover:#7BDDE1;--accent-soft:rgba(79,199,204,.15);
    --ok:#4FC79A;--ok-soft:rgba(79,199,154,.11);
    --warn:#E3A44A;--warn-soft:rgba(227,164,74,.12);
    --alarm:#FF4750;--alarm-soft:rgba(255,71,80,.16);
    --focus:#8FA9F0;
    --band:#050B1C;--band-ink:#EAF0FF;--band-soft:#9DAFD8;--band-line:rgba(255,255,255,.12);
    --ph-bg:rgba(255,255,255,.035);--ph-line:#2C3B66;
    --shadow:0 1px 2px rgba(0,0,0,.5),0 14px 34px -18px rgba(0,0,0,.85);
  }
}
:root[data-theme="dark"]{
  --ground:#080E22;--paper:#0D1531;--surface:#0C142E;
  --line:#212F58;--line-strong:#32407A;
  --ink:#E9EEFA;--ink-soft:#B6C3E2;--ink-muted:#8E9CC0;--heading:#DCE6FF;
  --accent:#4FC7CC;--accent-hover:#7BDDE1;--accent-soft:rgba(79,199,204,.15);
  --ok:#4FC79A;--ok-soft:rgba(79,199,154,.11);
  --warn:#E3A44A;--warn-soft:rgba(227,164,74,.12);
  --focus:#8FA9F0;
  --band:#050B1C;--band-ink:#EAF0FF;--band-soft:#9DAFD8;--band-line:rgba(255,255,255,.12);
  --ph-bg:rgba(255,255,255,.035);--ph-line:#2C3B66;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 14px 34px -18px rgba(0,0,0,.85);
}

*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:17px;line-height:1.64;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:Figtree,-apple-system,BlinkMacSystemFont,sans-serif;color:var(--heading);text-wrap:balance;margin:0}
p{margin:0}
a{color:var(--accent);text-underline-offset:3px}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:6px}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}
.wrap{max-width:1260px;margin:0 auto;padding:0 28px}
@media (max-width:600px){.wrap{padding:0 20px}}
.eyebrow{font-family:Figtree;font-weight:700;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:50px;padding:0 24px;border-radius:9px;font-family:Figtree;font-weight:600;font-size:16.5px;text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.btn-primary{background:#0F6E72;color:#fff}
.btn-primary:hover{background:#0B5A5E;color:#fff}
.btn-secondary{background:transparent;color:var(--heading);border-color:var(--line-strong)}
.btn-secondary:hover{border-color:var(--heading)}
.btn-ghost{background:transparent;color:var(--band-ink);border-color:var(--band-line)}
.btn-ghost:hover{border-color:var(--band-ink)}
.btn-sm{min-height:42px;padding:0 17px;font-size:15px}

/* header */
header.site{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--ground) 86%,transparent);backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid var(--line);transition:box-shadow .25s,border-color .25s}
header.site.scrolled{box-shadow:0 10px 30px -22px rgba(12,29,85,.55);border-color:var(--line-strong)}
#progress{position:absolute;left:0;top:0;height:3px;width:0;background:linear-gradient(90deg,#0C1D55,#0F6E72 70%,#FA3C46);border-radius:0 3px 3px 0;transition:width .12s linear;z-index:2}
header.site .wrap{display:flex;align-items:center;gap:26px;height:76px;transition:height .25s}
header.site.scrolled .wrap{height:66px}
header.site img.logo{height:34px;width:auto;transition:height .25s}
header.site.scrolled img.logo{height:29px}
header.site nav{display:flex;gap:6px;margin:0 auto;font-family:Figtree;font-weight:600;font-size:14.8px}
header.site nav a{position:relative;color:var(--ink-soft);text-decoration:none;padding:9px 12px;border-radius:8px;transition:color .18s,background .18s}
header.site nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:2px;border-radius:2px;background:var(--accent);transform:scaleX(0);transform-origin:center;transition:transform .22s cubic-bezier(.4,0,.2,1)}
header.site nav a:hover{color:var(--heading);background:var(--accent-soft)}
header.site nav a:hover::after,header.site nav a.is-active::after{transform:scaleX(1)}
header.site nav a.is-active{color:var(--heading)}
header.site .right{display:flex;align-items:center;gap:16px}
header.site .tel{font-family:Figtree;font-weight:600;font-size:15px;color:var(--heading);text-decoration:none;white-space:nowrap;display:flex;align-items:center;gap:7px}
header.site .tel svg{width:15px;height:15px;stroke:var(--accent);fill:none;stroke-width:1.9}
header.site .btn .arw{display:inline-block;transition:transform .2s}
header.site .btn:hover .arw{transform:translateX(3px)}
@media (max-width:1040px){header.site nav{display:none}}
@media (max-width:560px){header.site .tel{display:none}}

/* hero */
.hero{background:var(--paper);border-bottom:1px solid var(--line)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:56px;padding-top:62px;padding-bottom:62px;align-items:start}
@media (max-width:920px){.hero .wrap{grid-template-columns:minmax(0,1fr);gap:36px;padding-top:44px;padding-bottom:44px}}
.hero h1{font-size:clamp(33px,4.6vw,50px);font-weight:800;line-height:1.05;letter-spacing:-.025em;margin:14px 0 0}
.hero h1 .rood{color:var(--accent)}
.hero .sub{margin-top:20px;font-size:18.5px;color:var(--ink-soft);max-width:36ch}
.hero .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero .micro{margin-top:16px;font-size:14.5px;color:var(--ink-muted)}

.firstaid{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.firstaid .top{padding:17px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;background:var(--accent-soft)}
.firstaid .top h2{font-size:16.5px;font-weight:700}
.firstaid ol{list-style:none;margin:0;padding:6px 0}
.firstaid li{display:grid;grid-template-columns:30px 1fr;gap:14px;padding:16px 22px;border-top:1px solid var(--line)}
.firstaid li:first-child{border-top:0}
.firstaid .n{font-family:"IBM Plex Mono";font-size:12.5px;color:var(--ground);background:var(--heading);width:26px;height:26px;border-radius:8px;display:grid;place-items:center;margin-top:2px}
.firstaid h3{font-size:16px;font-weight:700;margin-bottom:2px}
.firstaid p{font-size:14.8px;color:var(--ink-soft);line-height:1.55}

/* trust strip */
.trust{border-bottom:1px solid var(--line);background:var(--ground)}
.trust .wrap{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 38px;padding-top:18px;padding-bottom:18px;font-size:14.5px;color:var(--ink-soft)}
.trust span{display:flex;align-items:center;gap:9px}
.trust .tick{color:var(--ok);font-size:13px}

/* generic section */
section.blk,.band,.hero{scroll-margin-top:90px}
section.blk{padding:74px 0;border-bottom:1px solid var(--line)}
section.blk.tint{background:var(--paper)}
.head{max-width:var(--measure);margin:0 auto 40px;text-align:center}
.head h2{font-size:clamp(26px,3.2vw,34px);font-weight:700;letter-spacing:-.02em;margin-top:12px}
.head p{margin-top:14px;color:var(--ink-soft);font-size:17.5px}

/* claimpartijen */
.parties{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:1000px;margin:0 auto}
@media (max-width:860px){.parties{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.parties{grid-template-columns:minmax(0,1fr)}}
.party{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:7px;text-decoration:none;transition:border-color .15s,transform .15s}
.party:hover{border-color:var(--line-strong);border-left-color:var(--accent);transform:translateY(-2px)}
.party .kind{font-family:Figtree;font-weight:600;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted)}
.party .nm{font-family:Figtree;font-weight:700;font-size:17.5px;color:var(--heading)}
.party p{font-size:14.8px;color:var(--ink-soft);line-height:1.55}
.party .go{font-family:Figtree;font-weight:600;font-size:14.5px;color:var(--accent);margin-top:auto;padding-top:8px}

/* checklist als kaartraster */
.checks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;list-style:none;margin:0 auto;padding:0;max-width:1120px}
@media (max-width:900px){.checks{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.checks{grid-template-columns:minmax(0,1fr)}}
.checks li{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px 20px;display:flex;flex-direction:column;gap:9px}
.checks .tick{width:30px;height:30px;border-radius:9px;background:var(--ok-soft);color:var(--ok);display:grid;place-items:center;font-size:14px}
.checks b{font-family:Figtree;font-weight:700;color:var(--heading);display:block;font-size:16.5px;line-height:1.35}
.checks span.txt{color:var(--ink-soft);font-size:15px;line-height:1.55}

/* stappen */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px}
.step{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px 20px 24px;display:flex;flex-direction:column;gap:9px}
.step .n{font-family:"IBM Plex Mono";font-size:12.5px;color:var(--accent);letter-spacing:.06em}
.step h3{font-size:17px;font-weight:700}
.step p{font-size:14.8px;color:var(--ink-soft);line-height:1.55}

/* foto-placeholder */
.ph{background:var(--ph-bg);border:1.5px dashed var(--ph-line);border-radius:var(--r);display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:20px;min-height:260px}
.ph .tag{font-family:"IBM Plex Mono";font-size:11.5px;letter-spacing:.05em;color:var(--accent)}
.ph .desc{font-family:Figtree;font-weight:600;font-size:15px;color:var(--ink-soft);line-height:1.4}
.ph.tall{min-height:420px}

/* over */
.over{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:48px;align-items:center}
@media (max-width:860px){.over{grid-template-columns:minmax(0,1fr);gap:28px}}
.over h2{font-size:clamp(25px,3vw,32px);font-weight:700;letter-spacing:-.02em;margin-top:12px}
.over p{color:var(--ink-soft);margin-top:16px;max-width:52ch}
.over .sig{margin-top:22px;font-family:Figtree;font-weight:700;color:var(--heading)}
.over .sig small{display:block;font-weight:500;color:var(--ink-muted);font-size:14px;margin-top:2px}

/* prijs */
.price{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:16px;align-items:stretch}
.pcard{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:30px 24px 26px;display:flex;flex-direction:column;gap:10px;text-align:center}
.pcard.lead{border:1.5px solid var(--heading);box-shadow:var(--shadow)}
.pcard h3{font-size:19.5px;font-weight:700}
.pcard .role{font-family:Figtree;font-weight:600;font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-muted)}
.ribbon{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:#0F6E72;color:#fff;font-family:Figtree;font-weight:700;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;padding:5px 13px;border-radius:99px;white-space:nowrap}
.amt{display:flex;flex-direction:column;align-items:center;gap:3px;margin:8px 0 4px}
.amt .row{display:flex;align-items:baseline;justify-content:center;gap:10px}
.amt .now{font-family:Figtree;font-weight:800;font-size:40px;color:var(--heading);letter-spacing:-.03em;line-height:1.05}
.amt .was{font-family:Figtree;font-weight:600;font-size:19px;color:var(--ink-muted);text-decoration:line-through}
.amt .note{font-size:13.5px;color:var(--ink-muted)}
.save{display:inline-block;font-family:Figtree;font-weight:700;font-size:12px;letter-spacing:.04em;color:var(--ok);background:var(--ok-soft);border-radius:99px;padding:3px 11px;margin-top:2px}
.pcard ul{list-style:none;margin:10px 0 18px;padding:0;display:flex;flex-direction:column;gap:9px;font-size:15.2px;color:var(--ink-soft);text-align:left}
.pcard li{padding-left:24px;position:relative}
.pcard li::before{content:"\2713";position:absolute;left:0;color:var(--ok);font-size:13.5px}
.pcard .btn{margin-top:auto;width:100%}
.pay{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;margin-top:30px;font-size:14px;color:var(--ink-muted)}
.pay .chip{font-family:Figtree;font-weight:600;font-size:13.5px;color:var(--ink-soft);border:1px solid var(--line-strong);border-radius:7px;padding:6px 13px;background:var(--surface)}
.whycost{max-width:60ch;margin:32px auto 0;text-align:center;font-size:15.5px;color:var(--ink-muted);line-height:1.6}
.whycost b{color:var(--ink-soft);font-family:Figtree;font-weight:700}

/* statement */
.statement{margin:0 auto;text-align:center}
.statement h2{font-size:clamp(25px,3.2vw,34px);font-weight:800;letter-spacing:-.022em;margin-top:12px;max-width:24ch;margin-left:auto;margin-right:auto}
.statement .big{font-size:19.5px;color:var(--ink-soft);margin:22px auto 0;line-height:1.62;max-width:62ch}
.statement .grond{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:40px auto 0;max-width:940px;text-align:left}
@media (max-width:760px){.statement .grond{grid-template-columns:minmax(0,1fr)}}
.statement .grond div{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px 19px}
.statement .grond b{display:block;font-family:Figtree;font-weight:700;font-size:15.5px;color:var(--heading);margin-bottom:4px}
.statement .grond span{font-size:14.6px;color:var(--ink-soft);line-height:1.55}
.statement .kick{margin:36px auto 0;font-family:Figtree;font-weight:700;font-size:18px;color:var(--heading);max-width:58ch}
.todo{display:inline-block;font-family:"IBM Plex Mono";font-size:11.5px;letter-spacing:.05em;color:var(--warn);background:var(--warn-soft);border:1px solid color-mix(in srgb,var(--warn) 30%,transparent);border-radius:5px;padding:3px 7px;vertical-align:middle}

/* reviews */
.revs{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:14px}
.rev{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.rev .stars{color:#0F6E72;letter-spacing:2px;font-size:13.5px}
.rev blockquote{margin:12px 0 0;font-family:Figtree;font-weight:500;font-size:17px;line-height:1.5;color:var(--heading)}
.rev .who{margin-top:14px;font-size:13.5px;color:var(--ink-muted)}

/* faq */
.faq{max-width:var(--measure);border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:17px 0;font-family:Figtree;font-weight:600;font-size:17px;color:var(--heading);list-style:none;display:flex;justify-content:space-between;gap:18px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:"IBM Plex Mono";color:var(--accent);font-size:20px;line-height:1.1}
.faq details[open] summary::after{content:"\2212"}
.faq .a{padding:0 0 18px;font-size:16px;color:var(--ink-soft);max-width:60ch}

/* infographic: hoe een brief ontstaat */
.pipe{position:relative;max-width:920px;margin:44px auto 0}
.pipe .rail{position:absolute;left:12%;right:12%;top:27px;height:3px;background:var(--line);border-radius:2px;overflow:hidden}
.pipe .rail i{position:absolute;inset:0 auto 0 0;width:26%;background:linear-gradient(90deg,transparent,var(--accent),transparent);animation:travel 3.6s linear infinite}
@keyframes travel{from{transform:translateX(-110%)}to{transform:translateX(500%)}}
.pipe .nodes{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.pnode{display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px}
.pnode .dot{width:56px;height:56px;border-radius:50%;background:var(--surface);border:2px solid var(--line-strong);display:grid;place-items:center;position:relative;z-index:1}
.pnode .dot svg{width:24px;height:24px;stroke:var(--heading);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pnode:last-child .dot{border-color:var(--accent)}
.pnode:last-child .dot svg{stroke:var(--accent)}
.pnode b{font-family:Figtree;font-weight:700;font-size:15.5px;color:var(--heading)}
.pnode span{font-size:14.2px;color:var(--ink-soft);line-height:1.5;max-width:24ch}
@media (max-width:760px){.pipe .rail{display:none}.pipe .nodes{grid-template-columns:minmax(0,1fr);gap:22px}.pnode span{max-width:40ch}}

/* infographic: bedragen */
.bars{max-width:var(--measure);margin:44px auto 0}
.bar+.bar{margin-top:18px}
.bar .lbl{display:flex;justify-content:space-between;align-items:baseline;gap:14px;font-size:14.8px;color:var(--ink-soft);margin-bottom:8px;text-align:left}
.bar .lbl b{font-family:"IBM Plex Mono";font-weight:500;font-size:16px;color:var(--heading)}
.bar .track{height:28px;background:var(--line);border-radius:8px;overflow:hidden}
.bar .fill{height:100%;border-radius:8px;width:var(--w);transform-origin:left center}
.bars.go .fill{animation:grow 1.05s cubic-bezier(.2,.75,.2,1)}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.bar.low .fill{background:var(--heading)}
.bar.high .fill{background:linear-gradient(90deg,#0F6E72,#FA3C46)}
.bars .cap{margin-top:16px;font-size:13.8px;color:var(--ink-muted);text-align:center}

/* beslisboom */
.flowband{background:var(--band);color:var(--band-ink);padding:76px 0;scroll-margin-top:90px}
.flowband .head{max-width:60ch;margin:0 auto 42px;text-align:center}
.flowband .head h2{color:var(--band-ink);font-size:clamp(26px,3.3vw,35px);font-weight:800;letter-spacing:-.022em;margin-top:12px}
.flowband .head p{color:var(--band-soft);margin-top:14px;font-size:17.5px}
.flowband .eyebrow{color:#7BDDE1}
.flow{max-width:840px;margin:0 auto;display:flex;flex-direction:column}
.qrow{position:relative;padding:0 0 26px}
.qrow:last-child{padding-bottom:0}
.qrow::before{content:"";position:absolute;left:17px;top:40px;bottom:0;width:2px;background:var(--band-line)}
.qrow:last-child::before{display:none}
.q{display:flex;align-items:center;gap:14px}
.q .n{flex:0 0 auto;width:36px;height:36px;border-radius:11px;background:var(--band-ink);color:var(--band);display:grid;place-items:center;font-family:"IBM Plex Mono";font-size:14px;font-weight:500}
.q h3{color:var(--band-ink);font-size:19px;font-weight:700;letter-spacing:-.01em}
.outs{display:grid;grid-template-columns:minmax(0,1fr) 1fr;gap:12px;margin:14px 0 0 50px}
@media (max-width:700px){.outs{grid-template-columns:minmax(0,1fr);margin-left:0}}
.out{background:rgba(255,255,255,.05);border:1px solid var(--band-line);border-radius:10px;padding:14px 16px}
.out .k{font-family:Figtree;font-weight:700;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;display:block;margin-bottom:5px}
.out.ja .k{color:#7ED3AE}
.out.nee .k{color:#7BDDE1}
.out p{color:var(--band-soft);font-size:14.8px;line-height:1.55;margin:0}
.flow-foot{max-width:60ch;margin:44px auto 0;text-align:center}
.flow-foot p{color:var(--band-soft);font-size:16px;margin-bottom:22px}

/* band + formulier */
.band{background:var(--band);color:var(--band-ink);padding:74px 0}
.band .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:56px;align-items:start}
@media (max-width:920px){.band .wrap{grid-template-columns:minmax(0,1fr);gap:34px}}
.band h2{color:var(--band-ink);font-size:clamp(26px,3.4vw,36px);font-weight:800;letter-spacing:-.025em;margin-top:12px}
.band .eyebrow{color:#7BDDE1}
.band p{color:var(--band-soft);margin-top:16px;max-width:44ch;font-size:17.5px}
.band ul{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;color:var(--band-soft);font-size:15.5px}
.band ul li{padding-left:22px;position:relative}
.band ul li::before{content:"\2713";position:absolute;left:0;color:#7ED3AE}
form{background:var(--surface);border-radius:var(--r);padding:26px;display:flex;flex-direction:column;gap:15px;box-shadow:0 20px 50px -22px rgba(0,0,0,.6)}
form h3{font-size:20px;font-weight:700}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:13.8px;font-weight:600;color:var(--ink-soft)}
.field input,.field select{font:inherit;font-size:16px;padding:12px 13px;border:1px solid var(--line-strong);border-radius:9px;background:var(--ground);color:var(--ink);min-height:48px}
.field input:focus,.field select:focus{border-color:var(--focus)}
.hint{font-size:13px;color:var(--ink-muted)}

/* footer */
footer.site{background:var(--paper);border-top:1px solid var(--line);padding:52px 0 34px}
.fgrid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:34px}
@media (max-width:800px){.fgrid{grid-template-columns:minmax(0,1fr) 1fr;gap:28px}}
footer img.logo{height:32px;width:auto}
footer .about{margin-top:16px;font-size:14.5px;color:var(--ink-muted);max-width:38ch}
footer h4{font-family:Figtree;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:12px}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:14.8px}
footer ul a{color:var(--ink-soft);text-decoration:none}
footer ul a:hover{color:var(--accent)}
.legal{margin-top:40px;padding-top:22px;border-top:1px solid var(--line);font-size:13.5px;color:var(--ink-muted);display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:space-between}
.disclaimer{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:15px 18px;font-size:14px;color:var(--ink-muted);margin-top:34px;max-width:80ch}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ============ nieuwe onderdelen ============ */

/* beslisboom met slot */
.lockgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;max-width:1180px;margin:0 auto}
@media (max-width:1000px){.lockgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.lockgrid{grid-template-columns:minmax(0,1fr)}}
.lcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px 20px;display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden;transition:transform .2s,border-color .2s}
.lcard:hover{transform:translateY(-3px);border-color:var(--line-strong)}
.lcard .qn{font-family:"IBM Plex Mono";font-size:12px;color:var(--accent);letter-spacing:.06em}
.lcard h3{font-size:16.5px;font-weight:700;line-height:1.35;min-height:3.2em}
.lcard.open{border-color:var(--heading);box-shadow:var(--shadow)}
.lcard .ans{display:flex;flex-direction:column;gap:10px;margin-top:auto}
.lcard .ans .r{display:flex;gap:9px;align-items:flex-start;font-size:14.2px;color:var(--ink-soft);line-height:1.5}
.lcard .ans .r em{font-style:normal;font-family:Figtree;font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;flex:0 0 auto;padding-top:2px}
.lcard .ans .r.ja em{color:var(--ok)}
.lcard .ans .r.nee em{color:var(--accent)}
.skel{display:flex;flex-direction:column;gap:8px;margin-top:auto;filter:blur(2.5px);opacity:.6;pointer-events:none}
.skel i{display:block;height:9px;border-radius:5px;background:var(--line-strong)}
.skel i:nth-child(2){width:88%}
.skel i:nth-child(3){width:64%}
.lockbadge{position:absolute;inset:auto 0 0 0;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;background:linear-gradient(to top,var(--surface) 62%,transparent);font-family:Figtree;font-weight:600;font-size:13px;color:var(--ink-muted)}
.lockbadge svg{width:14px;height:14px;stroke:var(--accent);fill:none;stroke-width:2}

/* tijdlijn escalatie */
.tl{position:relative;max-width:720px;margin:0 auto;padding-left:46px}
.tl::before{content:"";position:absolute;left:17px;top:8px;bottom:8px;width:2px;background:var(--line)}
.tl .prog{position:absolute;left:17px;top:8px;width:2px;height:0;background:linear-gradient(180deg,var(--heading),var(--accent));transition:height 1.4s cubic-bezier(.3,.8,.3,1)}
.tl.go .prog{height:calc(100% - 16px)}
.tstep{position:relative;padding:0 0 30px}
.tstep:last-child{padding-bottom:0}
.tstep .mk{position:absolute;left:-46px;top:0;width:36px;height:36px;border-radius:50%;background:var(--surface);border:2px solid var(--line-strong);display:grid;place-items:center;font-family:"IBM Plex Mono";font-size:12.5px;color:var(--ink-muted);z-index:1;transition:border-color .3s,color .3s,background .3s}
.tl.go .tstep:nth-child(2) .mk{transition-delay:.15s}
.tl.go .tstep:nth-child(3) .mk{transition-delay:.4s}
.tl.go .tstep:nth-child(4) .mk{transition-delay:.65s}
.tl.go .tstep:nth-child(5) .mk{transition-delay:.9s}
.tl.go .tstep:nth-child(6) .mk{transition-delay:1.15s}
.tl.go .tstep .mk{border-color:var(--accent);color:var(--accent)}
.tstep h3{font-size:17.5px;font-weight:700;margin-bottom:5px}
.tstep p{font-size:15px;color:var(--ink-soft);max-width:56ch}
.tstep .cost{display:inline-block;margin-top:9px;font-family:"IBM Plex Mono";font-size:12.5px;color:var(--warn);background:var(--warn-soft);border-radius:6px;padding:4px 10px}

/* vergelijkingstabel pakketten */
.matrix{max-width:1000px;margin:0 auto;overflow-x:auto}
.matrix table{width:100%;border-collapse:separate;border-spacing:0;min-width:640px;font-size:15px}
.matrix th,.matrix td{padding:14px 16px;border-bottom:1px solid var(--line);text-align:center}
.matrix thead th{font-family:Figtree;font-weight:700;font-size:14.5px;color:var(--heading);border-bottom:2px solid var(--line-strong);vertical-align:bottom}
.matrix thead th span{display:block;font-family:"IBM Plex Mono";font-weight:500;font-size:13px;color:var(--ink-muted);margin-top:4px}
.matrix tbody th{text-align:left;font-weight:400;color:var(--ink-soft);font-size:14.8px}
.matrix td.y{color:var(--ok);font-size:17px}
.matrix td.n{color:var(--line-strong)}
.matrix col.hl,.matrix .hl{background:var(--accent-soft)}
.matrix tbody tr:hover th{color:var(--ink)}
.matrix tfoot td{padding-top:20px;border:0}

/* sectiekop links uitgelijnd met rand */
.head.left{text-align:left;margin-left:0;max-width:60ch}

.fa-foot{padding:15px 22px;border-top:1px solid var(--line);background:var(--paper);font-size:14.2px;color:var(--ink-muted)}
.fa-foot a{font-family:Figtree;font-weight:600;text-decoration:none}
.fa-foot a:hover{text-decoration:underline}
.tl-foot{max-width:60ch;margin:40px auto 0;text-align:center;font-size:16px;color:var(--ink-soft)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.matrix{margin-top:44px}

/* ---- subpagina's ---- */
.subhero{background:var(--paper);border-bottom:1px solid var(--line);padding:52px 0 56px}
.crumb{font-size:13.5px;color:var(--ink-muted);display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.crumb a{color:var(--ink-muted);text-decoration:none}
.crumb a:hover{color:var(--accent)}
.crumb span{opacity:.5}
.subhero h1{font-size:clamp(30px,4.1vw,45px);font-weight:800;line-height:1.06;letter-spacing:-.025em;margin:16px 0 0;max-width:20ch}
.subhero .lead{margin-top:18px;font-size:18.5px;color:var(--ink-soft);max-width:62ch}
.subhero .kind-tag{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-family:Figtree;font-weight:600;font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);border-radius:99px;padding:6px 14px}
.subhero .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.prose{max-width:var(--measure);margin:0 auto}
.prose p{color:var(--ink-soft);margin-bottom:18px}
.prose p:last-child{margin-bottom:0}
.prose h3{font-size:20px;font-weight:700;margin:34px 0 12px}
.prose ul{margin:0 0 18px;padding-left:22px;color:var(--ink-soft)}
.prose li{margin-bottom:8px}
.prose strong{color:var(--ink);font-weight:600}

/* uitgelichte vraag/antwoord kaarten */
.qa{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:1000px;margin:0 auto}
@media (max-width:760px){.qa{grid-template-columns:minmax(0,1fr)}}
.qa .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px 20px}
.qa .card h3{font-size:17px;font-weight:700;margin-bottom:8px}
.qa .card p{font-size:15px;color:var(--ink-soft)}
.qa .card .tagline{display:inline-block;font-family:Figtree;font-weight:700;font-size:11px;letter-spacing:.11em;text-transform:uppercase;margin-bottom:10px}
.qa .card.good .tagline{color:var(--ok)}
.qa .card.bad .tagline{color:var(--accent)}

/* verwante pagina's */
.related{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:1120px;margin:0 auto}
@media (max-width:860px){.related{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.related{grid-template-columns:minmax(0,1fr)}}
.related a{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;text-decoration:none;display:flex;flex-direction:column;gap:6px;transition:transform .2s,border-color .2s}
.related a:hover{transform:translateY(-3px);border-color:var(--line-strong)}
.related .t{font-family:Figtree;font-weight:700;font-size:16.5px;color:var(--heading)}
.related .d{font-size:14.5px;color:var(--ink-soft);line-height:1.5}
.related .g{font-family:Figtree;font-weight:600;font-size:14px;color:var(--accent);margin-top:4px}

/* meter: waar zit het bedrag */
.meter{max-width:760px;margin:0 auto}
.meter .scale{position:relative;height:34px;border-radius:10px;background:linear-gradient(90deg,#0E7A54 0%,#B8A21A 45%,#0F6E72 100%);opacity:.9}
.meter .pin{position:absolute;top:-9px;width:4px;height:52px;background:var(--ink);border-radius:3px;transform:translateX(-50%);transition:left 1.2s cubic-bezier(.3,.8,.3,1)}
.meter .pin::after{content:attr(data-l);position:absolute;top:-26px;left:50%;transform:translateX(-50%);white-space:nowrap;font-family:Figtree;font-weight:700;font-size:12.5px;color:var(--ink)}
.meter .marks{display:flex;justify-content:space-between;margin-top:12px;font-size:13.5px;color:var(--ink-muted)}
.meter .legend{margin-top:22px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:640px){.meter .legend{grid-template-columns:minmax(0,1fr)}}
.meter .legend div{border-left:3px solid var(--line-strong);padding-left:13px}
.meter .legend b{display:block;font-family:Figtree;font-weight:700;font-size:15px;color:var(--heading);margin-bottom:3px}
.meter .legend span{font-size:14.2px;color:var(--ink-soft);line-height:1.5}

/* anatomie van een brief */
.anat{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:34px;align-items:start;max-width:1060px;margin:0 auto}
@media (max-width:860px){.anat{grid-template-columns:minmax(0,1fr)}}
.letter{background:var(--surface);border:1px solid var(--line-strong);border-radius:10px;padding:26px 24px;box-shadow:var(--shadow);font-size:13.5px;color:var(--ink-muted);position:relative}
.letter .ln{height:9px;border-radius:5px;background:var(--line);margin-bottom:9px}
.letter .blk{margin-bottom:20px;position:relative;padding-left:30px}
.letter .hot{position:absolute;left:0;top:-2px;width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-family:"IBM Plex Mono";font-size:11.5px}
.letter .cap{font-family:Figtree;font-weight:700;font-size:12.5px;color:var(--heading);margin-bottom:7px}
.anat ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;counter-reset:a}
.anat ol li{display:grid;grid-template-columns:26px 1fr;gap:13px;align-items:start}
.anat ol li::before{counter-increment:a;content:counter(a);width:24px;height:24px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-family:"IBM Plex Mono";font-size:12px;margin-top:2px}
.anat ol b{display:block;font-family:Figtree;font-weight:700;font-size:15.5px;color:var(--heading);margin-bottom:3px}
.anat ol span{font-size:14.5px;color:var(--ink-soft);line-height:1.55}
.meter .pin{animation:pinIn 1.3s cubic-bezier(.3,.85,.3,1)}
@keyframes pinIn{from{left:0}}

/* ============ horizontale tijdlijn ============ */
.tlx{position:relative;max-width:1180px;margin:0 auto}
.tlx .rail{position:absolute;top:23px;left:10%;right:10%;height:3px;background:var(--line);border-radius:3px;overflow:hidden}
.tlx .rail i{position:absolute;top:0;left:0;bottom:0;width:0;background:linear-gradient(90deg,var(--heading),var(--accent));transition:width 1.8s cubic-bezier(.25,.8,.3,1)}
.tlx.go .rail i{width:100%}
.tlx .cols{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;align-items:stretch}
.tcol{display:flex;flex-direction:column;align-items:center;gap:14px}
.tcol .mk{width:48px;height:48px;border-radius:50%;background:var(--surface);border:2px solid var(--line-strong);display:grid;place-items:center;font-family:"IBM Plex Mono";font-size:14px;color:var(--ink-muted);z-index:1;transition:border-color .45s,color .45s,transform .45s}
.tlx.go .tcol .mk{border-color:var(--accent);color:var(--accent);transform:scale(1.06)}
.tlx.go .tcol:nth-child(2) .mk{transition-delay:.3s}
.tlx.go .tcol:nth-child(3) .mk{transition-delay:.6s}
.tlx.go .tcol:nth-child(4) .mk{transition-delay:.9s}
.tlx.go .tcol:nth-child(5) .mk{transition-delay:1.2s}
.tcol .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px 16px 18px;width:100%;flex:1;display:flex;flex-direction:column;gap:8px;text-align:center;transition:border-color .2s,transform .2s}
.tcol .card:hover{border-color:var(--line-strong);transform:translateY(-3px)}
.tcol h3{font-size:16px;font-weight:700;line-height:1.3}
.tcol p{font-size:14px;color:var(--ink-soft);line-height:1.5}
.tcol .cost{margin-top:auto;font-family:"IBM Plex Mono";font-size:12px;color:var(--warn);background:var(--warn-soft);border-radius:6px;padding:5px 9px;align-self:center}
@media (max-width:1040px){.tlx .rail{display:none}.tlx .cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}}
@media (max-width:700px){.tlx .cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:460px){.tlx .cols{grid-template-columns:minmax(0,1fr)}}

/* ============ veelgestelde vragen ============ */
.faqwrap{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:30px;max-width:1140px;margin:0 auto;align-items:start}
@media (max-width:900px){.faqwrap{grid-template-columns:minmax(0,1fr);gap:22px}}
.faqcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:4px 26px;box-shadow:var(--shadow)}
.faq{max-width:none;border-top:0}
.faq details:last-child{border-bottom:0}
.faq summary{padding:19px 0}
.helpcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:26px 24px;display:flex;flex-direction:column;gap:12px;position:sticky;top:100px}
.helpcard .ic{width:44px;height:44px;border-radius:13px;background:var(--accent-soft);display:grid;place-items:center;margin-bottom:2px}
.helpcard .ic svg{width:21px;height:21px;stroke:var(--accent);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.helpcard h3{font-size:19px;font-weight:700;line-height:1.3}
.helpcard p{font-size:15px;color:var(--ink-soft)}
.helpcard .big-tel{font-family:Figtree;font-weight:800;font-size:24px;color:var(--heading);text-decoration:none;letter-spacing:-.01em}
.helpcard .big-tel:hover{color:var(--accent)}
.helpcard .sub{font-size:13.5px;color:var(--ink-muted)}
.helpcard .btn{margin-top:6px;width:100%}

/* ============ tekst met zijkaart ============ */
.withaside{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:36px;max-width:1120px;margin:0 auto;align-items:start}
@media (max-width:900px){.withaside{grid-template-columns:minmax(0,1fr);gap:24px}}
.withaside .prose{max-width:none;margin:0}
.aside{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--r);padding:24px 22px;position:sticky;top:100px}
.aside h3{font-family:Figtree;font-weight:700;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:14px}
.aside ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.aside li{font-size:15px;color:var(--ink-soft);line-height:1.5;padding-left:20px;position:relative}
.aside li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:2px;background:var(--accent)}

/* ============ scroll-animaties ============ */
[data-rv]{transition:opacity .6s cubic-bezier(.22,.72,.25,1),transform .6s cubic-bezier(.22,.72,.25,1);transition-delay:calc(var(--i,0)*70ms)}
html.reveal [data-rv]{opacity:0;transform:translateY(22px) scale(.985)}
html.reveal [data-rv].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html.reveal [data-rv]{opacity:1!important;transform:none!important}}

/* vinkjes die zichzelf tekenen */
.checks .tick svg{width:15px;height:15px;fill:none;stroke:var(--ok);stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:0;transition:stroke-dashoffset .55s ease .3s}
html.reveal .checks li[data-rv]:not(.in) .tick svg{stroke-dashoffset:24}

/* pijltjes die meebewegen */
.arw2{display:inline-block;animation:nudge 2.6s ease-in-out infinite}
@keyframes nudge{0%,58%,100%{transform:translateX(0)}72%{transform:translateX(5px)}}
.party:hover .arw2,.related a:hover .arw2,.btn:hover .arw2{animation:none;transform:translateX(5px);transition:transform .2s}
@media (prefers-reduced-motion:reduce){.arw2{animation:none}}

/* kaarten die reageren */
.step,.rev,.qa .card,.checks li,.pcard{transition:transform .22s cubic-bezier(.3,.8,.3,1),border-color .22s,box-shadow .22s}
.step:hover,.rev:hover,.qa .card:hover,.checks li:hover{transform:translateY(-4px);border-color:var(--line-strong)}
.pcard:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.lcard .skel i{animation:shimmer 2.4s ease-in-out infinite}
.lcard .skel i:nth-child(2){animation-delay:.25s}
.lcard .skel i:nth-child(3){animation-delay:.5s}
@keyframes shimmer{0%,100%{opacity:.45}50%{opacity:.85}}

/* ============ fotoplekken ============ */
.ph{margin:0;background:var(--ph-bg);border:1.5px dashed var(--ph-line);border-radius:var(--r);display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:20px;min-height:260px}
.ph .tag{font-family:"IBM Plex Mono";font-size:11.5px;letter-spacing:.05em;color:var(--accent)}
.ph .desc{font-family:Figtree;font-weight:600;font-size:15px;color:var(--ink-soft);line-height:1.4}
.ph.tall{min-height:420px}
.ph.wide{min-height:300px}
.fig{margin:0;border-radius:var(--r);overflow:hidden;background:var(--paper);border:1px solid var(--line)}
.fig img{display:block;width:100%;height:auto}
.fig figcaption{padding:11px 16px;font-size:13.5px;color:var(--ink-muted);border-top:1px solid var(--line)}
.fig.tall img{aspect-ratio:4/5;object-fit:cover}
.fig.wide img{aspect-ratio:3/2;object-fit:cover}
.fotoband{max-width:1120px;margin:0 auto}
.fgrid{grid-template-columns:minmax(0,1.3fr) repeat(4,minmax(0,1fr))}
@media (max-width:1000px){.fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.fgrid{grid-template-columns:minmax(0,1fr)}}

/* ============ wat wij wel en niet zijn ============ */
.disc{background:var(--paper);border-top:1px solid var(--line);padding:52px 0}
.disc .inner{max-width:1120px;margin:0 auto}
.disc .kop{display:flex;align-items:center;gap:14px;margin-bottom:8px;justify-content:center}
.disc .kop svg{width:26px;height:26px;stroke:var(--accent);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.disc h2{font-size:22px;font-weight:700}
.disc .lead{text-align:center;max-width:66ch;margin:0 auto 30px;color:var(--ink-soft);font-size:16px}
.disc .grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:900px){.disc .grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.disc .grid{grid-template-columns:minmax(0,1fr)}}
.disc .item{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:19px 18px}
.disc .item b{display:block;font-family:Figtree;font-weight:700;font-size:15.5px;color:var(--heading);margin-bottom:6px;line-height:1.35}
.disc .item span{font-size:14.5px;color:var(--ink-soft);line-height:1.55}
.disc .item.no b::before{content:"\00d7";color:var(--accent);font-size:17px;margin-right:7px;line-height:1}
.disc .item.yes b::before{content:"\2713";color:var(--ok);font-size:14px;margin-right:8px;line-height:1}

/* ============ wie is wie tabel ============ */
.wiewie{max-width:1180px;margin:0 auto;overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.wiewie table{width:100%;border-collapse:separate;border-spacing:0;min-width:940px;font-size:14.5px}
.wiewie th,.wiewie td{padding:13px 15px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.wiewie thead th{font-family:Figtree;font-weight:700;font-size:13px;color:var(--heading);background:var(--paper);border-bottom:2px solid var(--line-strong);position:sticky;top:0}
.wiewie tbody tr:last-child td{border-bottom:0}
.wiewie tbody tr:hover td{background:var(--accent-soft)}
.wiewie .nm{font-family:Figtree;font-weight:700;font-size:15px;color:var(--heading)}
.wiewie .nm a{text-decoration:none}
.wiewie .alias{display:block;font-size:13px;color:var(--ink-muted);margin-top:3px;line-height:1.45}
.wiewie .rol{font-size:13.5px;color:var(--ink-soft)}
.pil{display:inline-block;font-family:Figtree;font-weight:700;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:99px;white-space:nowrap}
.pil.a{background:var(--accent-soft);color:var(--accent)}
.pil.b{background:rgba(30,58,143,.10);color:var(--focus)}
.pil.c{background:var(--line);color:var(--ink-muted)}
.pil.klaar{background:var(--ok-soft);color:var(--ok)}
.tabel-uitleg{max-width:66ch;margin:0 auto 26px;text-align:center;color:var(--ink-soft);font-size:15.5px}
.scrolltip{max-width:1180px;margin:10px auto 0;font-size:13px;color:var(--ink-muted);text-align:right}

/* naamketen */
.keten{max-width:1000px;margin:0 auto;display:flex;flex-direction:column;gap:26px}
.ket{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px}
.ket h3{font-size:17px;font-weight:700;margin-bottom:16px}
.ket .stroom{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.ket .knoop{background:var(--paper);border:1px solid var(--line-strong);border-radius:9px;padding:9px 14px;font-family:Figtree;font-weight:600;font-size:14.5px;color:var(--heading)}
.ket .knoop.nu{background:var(--accent);border-color:var(--accent);color:#fff}
.ket .pijl{color:var(--accent);font-size:16px;font-weight:700}
.ket p{margin-top:14px;font-size:14.8px;color:var(--ink-soft);max-width:70ch}
.scrolltip{display:none}
@media (max-width:1000px){.scrolltip{display:block}}

/* ============ vierkante portretjes ============ */
.avatar{display:block;width:74px;height:74px;border-radius:50%;overflow:hidden;border:3px solid var(--surface);box-shadow:0 2px 10px -3px rgba(12,29,85,.35);flex:0 0 auto}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.helpcard .avatar{width:64px;height:64px;margin-bottom:4px}
.sigblok{display:flex;align-items:center;gap:15px;margin-top:26px}
.sigblok .avatar{width:62px;height:62px}
.sigblok b{display:block;font-family:Figtree;font-weight:700;font-size:16.5px;color:var(--heading)}
.sigblok small{display:block;font-family:"IBM Plex Sans";font-weight:400;color:var(--ink-muted);font-size:14px;margin-top:2px}

/* ============================================================
   HERO 2: naar het ontwerpdocument van 2 september 2026
   ============================================================ */
.hero2{position:relative;overflow:hidden;background:var(--paper);border-bottom:1px solid var(--line)}
.hero2::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle,var(--line-strong) 1px,transparent 1px);background-size:22px 22px;opacity:.5}
.gloed{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;opacity:.5;animation:adem 9s ease-in-out infinite}
.gloed.g1{width:420px;height:420px;background:rgba(217,32,43,.16);top:-120px;left:-90px}
.gloed.g2{width:480px;height:480px;background:rgba(12,29,85,.14);bottom:-180px;right:-120px;animation-delay:3s}
@keyframes adem{0%,100%{transform:scale(1);opacity:.42}50%{transform:scale(1.12);opacity:.6}}

.hero2 .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:60px;
  padding-top:64px;padding-bottom:26px;align-items:center}
@media (max-width:980px){.hero2 .wrap{grid-template-columns:minmax(0,1fr);gap:52px;padding-top:44px}}

/* kicker met puntje */
.kicker{display:inline-flex;align-items:center;gap:10px;font-family:Figtree;font-weight:700;font-size:11.5px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--accent)}
.kicker i{width:9px;height:9px;border-radius:50%;background:var(--accent);position:relative;flex:0 0 auto}
.kicker i::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--accent);animation:ping 2.4s cubic-bezier(0,0,.2,1) infinite}
@keyframes ping{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(2.6);opacity:0}}

.hero2 h1{font-family:Figtree;font-weight:800;font-size:clamp(34px,4.9vw,60px);line-height:1.06;
  letter-spacing:-.028em;color:var(--heading);margin:16px 0 0}
.hero2 h1 span{display:block}
.hero2 h1 .rood{color:var(--accent);position:relative;display:inline-block}
.caret{display:inline-block;width:3px;height:.86em;background:var(--accent);margin-left:4px;vertical-align:-.08em;
  animation:knipper 1s steps(1) infinite}
@keyframes knipper{0%,49%{opacity:1}50%,100%{opacity:0}}
.streep{display:block;height:5px;border-radius:3px;background:var(--accent);opacity:.28;margin-top:6px;
  transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.22,.7,.25,1)}
.streep.aan{transform:scaleX(1)}

.hero2 .lead{margin-top:22px;font-size:18.5px;color:var(--ink-soft);max-width:42ch}
.hero2 .knoppen{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.btn-magneet{will-change:transform;transition:transform .35s cubic-bezier(.2,1.5,.4,1),background .15s}
.betaalregel{margin-top:18px;font-size:14.5px;color:var(--ink-muted);display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.betaalregel .badge{background:var(--surface);border:1px solid var(--line-strong);border-radius:6px;
  padding:4px 10px;font-family:Figtree;font-weight:600;font-size:12.5px;color:var(--ink-soft)}

.stats{display:flex;flex-wrap:wrap;gap:14px 36px;margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
.stat b{display:block;font-family:Figtree;font-weight:800;font-size:27px;color:var(--heading);letter-spacing:-.02em;line-height:1.1}
.stat span{display:block;font-size:13.5px;color:var(--ink-muted);margin-top:3px}
.stat .sterren{color:#B8860B;letter-spacing:1px;font-size:13px}

/* rechterkolom */
.rechts{position:relative}
.stapkaart{position:relative;z-index:2;background:var(--surface);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 2px 4px rgba(12,29,85,.04),0 24px 50px -26px rgba(12,29,85,.4);overflow:hidden}
.stapkaart .kop{display:flex;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--line);background:var(--accent-soft)}
.stapkaart .kop h2{font-size:17px;font-weight:700}
.weeg{width:26px;height:26px;flex:0 0 auto;stroke:var(--heading);fill:none;stroke-width:1.7;stroke-linecap:round;
  transform-origin:50% 22%;animation:wiegen 9s ease-in-out infinite}
@keyframes wiegen{0%{transform:rotate(-9deg)}22%{transform:rotate(8deg)}44%{transform:rotate(-4deg)}
  62%{transform:rotate(2deg)}78%,100%{transform:rotate(0deg)}}

.stappen2{position:relative;list-style:none;margin:0;padding:8px 0}
.stappen2 .spoor{position:absolute;left:35px;top:22px;bottom:22px;width:2px;background:var(--line);border-radius:2px}
.stappen2 .reiziger{position:absolute;left:31px;top:22px;width:10px;height:10px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 4px var(--accent-soft);transition:transform .7s cubic-bezier(.4,0,.2,1)}
.stappen2 li{position:relative;display:grid;grid-template-columns:34px 1fr;gap:16px;padding:15px 22px}
.stappen2 .nr{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:var(--paper);
  border:1px solid var(--line-strong);color:var(--ink-muted);font-family:"IBM Plex Mono";font-size:13px;
  transition:transform .4s cubic-bezier(.3,1.4,.4,1),background .35s,color .35s,border-color .35s;z-index:1}
.stappen2 li.actief .nr{background:var(--accent);border-color:var(--accent);color:#fff;transform:scale(1.14)}
.stappen2 h3{font-size:16px;font-weight:700;margin-bottom:3px;transition:color .3s}
.stappen2 li.actief h3{color:var(--accent)}
.stappen2 p{font-size:14.5px;color:var(--ink-soft);line-height:1.55}
.stapkaart .voet{padding:15px 22px;border-top:1px solid var(--line);background:var(--paper);font-size:14.2px;color:var(--ink-muted)}
.stapkaart .voet a{font-family:Figtree;font-weight:600;text-decoration:none}
.stapkaart .voet a:hover{text-decoration:underline}

/* zwevende elementen */
.zweef{position:absolute;z-index:3;background:var(--surface);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 14px 30px -18px rgba(12,29,85,.5);padding:12px 15px;font-size:13.5px;animation:dobber 6s ease-in-out infinite}
@keyframes dobber{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.zweef.brief{top:-46px;left:-50px;width:198px;animation-delay:.2s}
.zweef.schild{top:-26px;right:-30px;background:var(--heading);border-color:var(--heading);color:#fff;display:flex;
  align-items:center;gap:10px;animation-delay:1.4s}
.zweef.advies{bottom:-86px;left:-64px;width:224px;animation-delay:2.6s}
.zweef.ultimatum{bottom:-86px;right:-58px;width:186px;animation-delay:3.6s}
@media (max-width:1180px){.zweef.brief{left:-14px}.zweef.advies{left:-14px}.zweef.schild{right:-12px}.zweef.ultimatum{right:-12px}}
@media (max-width:820px){.zweef{display:none}.check{margin-top:20px}}
.zweef .lbl{font-family:Figtree;font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted);display:block;margin-bottom:5px}
.zweef .bedrag{font-family:"IBM Plex Mono";font-size:17px;color:var(--accent);display:inline-block;position:relative;
  animation:dreig 9s ease-in-out infinite}
@keyframes dreig{0%,6%{transform:translateX(0);color:var(--accent)}
  8%{transform:translateX(-2px)}10%{transform:translateX(2px)}12%{transform:translateX(-2px)}14%{transform:translateX(0)}
  30%{color:var(--heading)}55%,100%{color:var(--ink-muted)}}
.zweef .bedrag::after{content:"";position:absolute;left:-2px;right:-2px;top:52%;height:2px;background:var(--heading);
  transform:scaleX(0);transform-origin:left;animation:doorhaal 9s ease-in-out infinite}
@keyframes doorhaal{0%,28%{transform:scaleX(0)}42%,100%{transform:scaleX(1)}}
.stempel{position:absolute;right:-14px;bottom:-14px;background:var(--accent);color:#fff;font-family:Figtree;font-weight:800;
  font-size:10.5px;letter-spacing:.1em;padding:5px 10px;border-radius:5px;transform:rotate(-11deg) scale(0);
  animation:stempelen 9s ease-in-out infinite}
@keyframes stempelen{0%,46%{transform:rotate(-11deg) scale(0);opacity:0}
  52%{transform:rotate(-11deg) scale(1.16);opacity:1}58%,100%{transform:rotate(-11deg) scale(1);opacity:1}}
.zweef.schild svg{width:26px;height:26px;stroke:#fff;fill:none;stroke-width:1.7}
.zweef.schild .ring{position:absolute;inset:-5px;border:2px solid var(--heading);border-radius:16px;opacity:0;animation:puls 3.2s ease-out infinite}
@keyframes puls{0%{transform:scale(.96);opacity:.55}100%{transform:scale(1.1);opacity:0}}
.zweef.advies .vink{display:inline-grid;place-items:center;width:19px;height:19px;border-radius:50%;background:var(--ok-soft);
  color:var(--ok);font-size:11px;margin-right:7px;transform:scale(0);animation:inspringen 9s ease-in-out infinite}
@keyframes inspringen{0%,18%{transform:scale(0)}26%{transform:scale(1.25)}32%,100%{transform:scale(1)}}
.zweef.ultimatum .oud{display:inline-block;position:relative;color:var(--ink-muted)}
.zweef.ultimatum .oud::after{content:"";position:absolute;left:0;right:0;top:52%;height:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;animation:doorhaal 9s ease-in-out infinite;animation-delay:1s}
.zweef.ultimatum .nieuw{display:block;margin-top:7px;font-family:Figtree;font-weight:700;color:var(--heading);
  opacity:0;animation:opkomen 9s ease-in-out infinite;animation-delay:1s}
@keyframes opkomen{0%,44%{opacity:0;transform:translateY(4px)}56%,100%{opacity:1;transform:none}}

/* bedrag-check */
.check{position:relative;z-index:2;margin-top:92px;background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:22px;box-shadow:0 2px 4px rgba(12,29,85,.04),0 18px 40px -26px rgba(12,29,85,.35)}
.check .kicker{font-size:11px}
.check h3{font-size:19px;font-weight:700;margin:9px 0 16px}
.meterboog{position:relative;width:100%;max-width:340px;margin:0 auto}
.meterboog svg{width:100%;height:auto;display:block;overflow:visible}
.wijzer{transform-origin:100px 92px;transition:transform 1s cubic-bezier(.3,1.5,.45,1)}
.wijzer.zwaai{animation:zwaaien 7s ease-in-out infinite}
@keyframes zwaaien{0%,100%{transform:rotate(-52deg)}50%{transform:rotate(52deg)}}
.meterlabels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));text-align:center;font-size:10.5px;letter-spacing:.01em;color:var(--ink-muted);margin-top:8px}
.meterlabels span{white-space:nowrap}
.checkrij{display:flex;gap:10px;margin-top:18px}
.checkrij input{flex:1;min-width:0;font:inherit;font-size:16px;padding:11px 13px;border:1px solid var(--line-strong);
  border-radius:9px;background:var(--ground);color:var(--ink);min-height:46px}
.checkrij input:focus{border-color:var(--focus)}
.checkrij button{min-height:46px;padding:0 20px}
.checkuit{margin-top:16px;padding:14px 16px;border-radius:10px;font-size:14.6px;line-height:1.55;display:none}
.checkuit.toon{display:block;animation:opkomen2 .5s cubic-bezier(.2,.8,.3,1)}
@keyframes opkomen2{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.checkuit b{display:block;font-family:Figtree;font-weight:700;margin-bottom:4px}
.checkuit.z2{background:var(--warn-soft);color:var(--ink-soft)}
.checkuit.z2 b{color:var(--warn)}
.checkuit.z1{background:var(--ok-soft)}
.checkuit.z1 b{color:var(--ok)}
.checkuit.z3{background:var(--accent-soft);color:var(--ink-soft)}
.checkuit.z3 b{color:var(--accent)}
.checkuit.z4{background:var(--alarm-soft);color:var(--ink-soft);box-shadow:inset 3px 0 0 var(--alarm)}
.checkuit.z4 b{color:var(--alarm)}
.check .klein{margin-top:14px;font-size:12.5px;color:var(--ink-muted)}

/* lopende band */
.band-loop{position:relative;border-top:1px solid var(--line);background:var(--surface);overflow:hidden;padding:13px 0}
.band-loop .spoorwagen{display:flex;width:max-content;animation:lopen 32s linear infinite}
.band-loop:hover .spoorwagen{animation-play-state:paused}
.band-loop span{display:inline-flex;align-items:center;gap:11px;padding:0 26px;font-family:Figtree;font-weight:600;
  font-size:14.5px;color:var(--ink-soft);white-space:nowrap}
.band-loop span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:.6;flex:0 0 auto}
@keyframes lopen{from{transform:translateX(0)}to{transform:translateX(-50%)}}

@media (prefers-reduced-motion:reduce){
  .gloed,.kicker i::after,.weeg,.zweef,.zweef .bedrag,.zweef .bedrag::after,.stempel,.zweef.schild .ring,
  .zweef.advies .vink,.zweef.ultimatum .oud::after,.zweef.ultimatum .nieuw,.wijzer.zwaai,.band-loop .spoorwagen,.caret{
    animation:none!important}
  .zweef.ultimatum .nieuw{opacity:1}
  .zweef.advies .vink{transform:scale(1)}
  .stempel{transform:rotate(-11deg) scale(1);opacity:1}
  .streep{transform:scaleX(1)}
}
.kaarthouder{position:relative;margin:0 24px}
@media (max-width:1180px){.kaarthouder{margin:0 12px}}
@media (max-width:820px){.kaarthouder{margin:0}}

/* bedrag-check als eigen sectie */
.checkgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center;max-width:1120px;margin:0 auto}
@media (max-width:900px){.checkgrid{grid-template-columns:minmax(0,1fr);gap:32px}}
.checktekst h2{font-size:clamp(26px,3.2vw,34px);font-weight:700;letter-spacing:-.02em;margin-top:12px}
.checktekst .lead{margin-top:14px;color:var(--ink-soft);font-size:17.5px;max-width:48ch}
.checktekst .plain{margin-top:22px}
.checkgrid .check{margin-top:0;max-width:520px;justify-self:center;width:100%}
.hero2 .rechts{padding:44px 0 96px}
@media (max-width:820px){.hero2 .rechts{padding-bottom:0}}
.checktekst .plain{list-style:none;padding:0;display:grid;gap:10px}
.checktekst .plain li{position:relative;padding-left:22px;color:var(--ink-soft);font-size:15.5px;line-height:1.55}
.checktekst .plain li::before{content:"";position:absolute;left:0;top:9px;width:10px;height:10px;border-radius:50%;background:var(--accent)}
.checktekst .plain li:nth-child(1)::before{background:#0E7A54}
.checktekst .plain li:nth-child(2)::before{background:#D98014}
.checktekst .plain li:nth-child(3)::before{background:#0F6E72}
.checktekst .plain li:nth-child(4)::before{background:#8E1119}
.checktekst .klein{margin-top:22px;font-size:13.5px;color:var(--ink-muted)}
.checktekst .klein a{color:var(--heading);font-weight:600}
.checkgrid .check{box-shadow:0 2px 4px rgba(12,29,85,.05),0 28px 56px -30px rgba(12,29,85,.4)}

/* ---------- kennisbank: gereedschappen, zoeken, kaarten ---------- */
.tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;max-width:1120px;margin:0 auto}
@media (max-width:900px){.tools{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.tools{grid-template-columns:minmax(0,1fr)}}
.tools a{display:flex;flex-direction:column;gap:8px;padding:22px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);text-decoration:none;transition:transform .2s,border-color .2s,box-shadow .2s}
.tools a:hover{transform:translateY(-3px);border-color:var(--line-strong);box-shadow:var(--shadow)}
.tools .ic{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--accent-soft);color:var(--accent);margin-bottom:4px}
.tools .ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tools .t{font-family:Figtree;font-weight:700;font-size:17px;color:var(--heading)}
.tools .d{font-size:14.5px;color:var(--ink-soft);line-height:1.5}
.zoekbalk{display:flex;align-items:center;gap:14px;max-width:760px;margin:0 auto 18px}
.zoekbalk input{flex:1;min-width:0;height:52px;padding:0 18px;border:1.5px solid var(--line-strong);border-radius:12px;background:var(--surface);color:var(--ink);font:inherit;font-size:16px;transition:border-color .18s,box-shadow .18s}
.zoekbalk input:focus{outline:none;border-color:var(--heading);box-shadow:0 0 0 4px var(--accent-soft)}
.zoekbalk .teller{font-family:"IBM Plex Mono";font-size:13px;color:var(--ink-muted);white-space:nowrap}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 auto 28px;max-width:960px}
.chip{font-family:Figtree;font-weight:600;font-size:13.5px;padding:8px 14px;border-radius:99px;border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);cursor:pointer;transition:all .18s}
.chip:hover{border-color:var(--line-strong);color:var(--heading)}
.chip.is-on{background:var(--heading);border-color:var(--heading);color:#fff}
.kbgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:1120px;margin:0 auto}
@media (max-width:860px){.kbgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.kbgrid{grid-template-columns:minmax(0,1fr)}}
.kbcard{display:flex;flex-direction:column;gap:6px;padding:20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);text-decoration:none;transition:transform .2s,border-color .2s}
.kbcard:hover{transform:translateY(-3px);border-color:var(--line-strong)}
.kbcard .cat{font-family:Figtree;font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.kbcard .t{font-family:Figtree;font-weight:700;font-size:16.5px;color:var(--heading)}
.kbcard .d{font-size:14.5px;color:var(--ink-soft);line-height:1.5;flex:1}
.kbcard .meta{font-family:"IBM Plex Mono";font-size:11.5px;color:var(--ink-muted);margin-top:6px}
.leeg{text-align:center;color:var(--ink-soft);padding:24px 0}

/* ---------- begrippenlijst ---------- */
.glos{max-width:860px;margin:0 auto}
.glos .letters{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;margin:0 0 30px}
.glos .letters a{font-family:"IBM Plex Mono";font-size:13px;font-weight:500;width:32px;height:32px;display:grid;place-items:center;border-radius:8px;color:var(--ink-soft);text-decoration:none;border:1px solid transparent}
.glos .letters a:hover{background:var(--accent-soft);color:var(--heading);border-color:var(--line)}
.glosgroep{display:grid;grid-template-columns:56px minmax(0,1fr);gap:14px;padding:22px 0;border-top:1px solid var(--line)}
.glosgroep .letter{font-family:Figtree;font-weight:800;font-size:30px;color:var(--accent);line-height:1;position:sticky;top:96px;align-self:start}
.glosgroep dl{margin:0}
.begrip{padding:12px 14px;margin:0 -14px 6px;border-radius:10px;scroll-margin-top:110px;transition:background .3s}
.begrip:target,.begrip.is-doel{background:var(--accent-soft)}
.begrip dt{font-family:Figtree;font-weight:700;font-size:17px;color:var(--heading);display:flex;align-items:center;gap:8px}
.begrip dt .anker{font-family:"IBM Plex Mono";font-weight:400;font-size:13px;color:var(--ink-muted);text-decoration:none;opacity:0;transition:opacity .15s}
.begrip:hover dt .anker,.begrip dt .anker:focus{opacity:1}
.begrip dd{margin:6px 0 0;color:var(--ink-soft);font-size:15.5px;line-height:1.6}
.begrip .meer{font-family:Figtree;font-weight:600;font-size:14px;color:var(--accent);text-decoration:none;white-space:nowrap}
.begrip .meer:hover{text-decoration:underline}
@media (max-width:600px){.glosgroep{grid-template-columns:minmax(0,1fr);gap:6px}.glosgroep .letter{position:static;font-size:22px}}

/* livegang: interne labels onzichtbaar; zet class toon-todo op <html> om ze te zien */
.todo{display:none}
html.toon-todo .todo{display:inline-block}
.formuit.ok{color:var(--ok);font-weight:600;font-size:15px;margin-top:6px}
[hidden]{display:none!important}

/* ---------------------------------------------------------------- uitlijning
   Rasters met een oneven aantal kaarten lieten een gat vallen in de laatste rij.
   De kaarten staan nu op een raster van zes kolommen en beslaan er twee, zodat
   een halve rij netjes gecentreerd kan worden in plaats van links te blijven hangen. */
.checks,.related,.kbgrid{grid-template-columns:repeat(6,minmax(0,1fr))}
.checks>li,.related>a,.kbgrid>*{grid-column:span 2}
.checks>li:last-child:nth-child(3n+1),
.related>a:last-child:nth-child(3n+1),
.kbgrid>*:last-child:nth-child(3n+1){grid-column:3/span 2}
.checks>li:nth-last-child(2):nth-child(3n+1),
.related>a:nth-last-child(2):nth-child(3n+1),
.kbgrid>*:nth-last-child(2):nth-child(3n+1){grid-column:2/span 2}
/* vier kaarten naast elkaar: dezelfde truc op een raster van acht */
.tools{grid-template-columns:repeat(8,minmax(0,1fr))}
.tools>a{grid-column:span 2}
.tools>a:last-child:nth-child(4n+1){grid-column:4/span 2}
.tools>a:nth-last-child(2):nth-child(4n+1){grid-column:3/span 2}
.tools>a:nth-last-child(3):nth-child(4n+1){grid-column:2/span 2}
/* twee kaarten naast elkaar */
.qa{grid-template-columns:repeat(4,minmax(0,1fr))}
.qa>*{grid-column:span 2}
.qa>*:last-child:nth-child(2n+1){grid-column:2/span 2}

/* tijdlijn en processchema: evenveel kolommen als er stappen zijn */
.tlx .cols:has(>.tcol:last-child:nth-child(3)){grid-template-columns:repeat(3,minmax(0,1fr))}
.tlx .cols:has(>.tcol:last-child:nth-child(4)){grid-template-columns:repeat(4,minmax(0,1fr))}
.pipe .nodes:has(>.pnode:last-child:nth-child(3)){grid-template-columns:repeat(3,minmax(0,1fr))}
.pipe .nodes:has(>.pnode:last-child:nth-child(5)){grid-template-columns:repeat(5,minmax(0,1fr))}

/* ------------------------------------------------------------------ slotblok
   De foto stond als losse strook onderaan de pagina, zo groot dat hij nergens
   meer bij hoorde. Hij staat nu naast de verwijskaarten en loopt even hoog. */
.slotblok{display:grid;grid-template-columns:minmax(0,330px) minmax(0,1fr);gap:26px;align-items:stretch;max-width:1120px;margin:0 auto}
.slotblok .fig{display:flex;flex-direction:column;margin:0}
.slotblok .fig img{flex:1;width:100%;height:100%;min-height:280px;aspect-ratio:auto;object-fit:cover}
.slotblok .fig figcaption{font-size:12.5px;padding:9px 14px}
.slotblok .related{grid-template-columns:minmax(0,1fr);gap:14px;max-width:none}
.slotblok .related>a{grid-column:auto}
@media (max-width:900px){
  .slotblok{grid-template-columns:minmax(0,1fr);gap:18px}
  .slotblok .fig img{min-height:0;aspect-ratio:16/9}
  .slotblok .related{grid-template-columns:repeat(6,minmax(0,1fr))}
  .slotblok .related>a{grid-column:span 2}
}
@media (max-width:640px){
  .checks,.related,.kbgrid,.tools,.qa,.slotblok .related{grid-template-columns:minmax(0,1fr)}
  .checks>li,.related>a,.kbgrid>*,.tools>a,.qa>*,.slotblok .related>a{grid-column:auto !important}
}

/* tablet: rijen die halverwege afbreken netjes verdelen */
@media (max-width:1000px) and (min-width:641px){
  /* voettekst: merkkolom boven de volle breedte, de vier linkkolommen eronder naast elkaar */
  .fgrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 24px}
  .fgrid>:first-child{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px 40px}
  .fgrid>:first-child .logo{flex:0 0 100%;height:32px;width:auto;align-self:flex-start;object-fit:contain;object-position:left}
  .fgrid>:first-child .about{margin-top:10px}
}
@media (max-width:640px) and (min-width:561px){
  .fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fgrid>:first-child{grid-column:1/-1}
}
@media (max-width:1040px) and (min-width:701px){
  /* tijdlijn met vijf stappen: drie boven, twee gecentreerd eronder */
  .tlx .cols{grid-template-columns:repeat(6,minmax(0,1fr))}
  .tlx .cols>.tcol{grid-column:span 2}
  .tlx .cols>.tcol:last-child:nth-child(3n+1){grid-column:3/span 2}
  .tlx .cols>.tcol:nth-last-child(2):nth-child(3n+1){grid-column:2/span 2}
}
@media (max-width:1000px) and (min-width:561px){
  /* stappenkaarten en prijskaarten: twee per rij, een enkele kaart in het midden */
  .steps,.price{grid-template-columns:repeat(4,minmax(0,1fr))}
  .steps>*,.price>*{grid-column:span 2}
  .steps>*:last-child:nth-child(2n+1),.price>*:last-child:nth-child(2n+1){grid-column:2/span 2}
}
@media (max-width:700px) and (min-width:461px){
  .tlx .cols{grid-template-columns:repeat(4,minmax(0,1fr))}
  .tlx .cols>.tcol{grid-column:span 2}
  .tlx .cols>.tcol:last-child:nth-child(2n+1){grid-column:2/span 2}
}

footer .disclaimer{max-width:none}

/* ------------------------------------------------------------- één vaste rail
   De brede onderdelen liepen door elkaar: 920, 1000, 1060, 1120, 1140, 1180 en
   1204 pixels naast elkaar op dezelfde pagina, waardoor de linkerranden per blok
   verspringen. Alles wat de volle breedte gebruikt staat nu op dezelfde rail. */
section.blk>.wrap>.faqwrap,
section.blk>.wrap>.steps,
section.blk>.wrap>.tlx,
section.blk>.wrap>.anat,
section.blk>.wrap>.qa,
section.blk>.wrap>.pipe,
section.blk>.wrap>.wiewie,
section.blk>.wrap>.statement,
section.blk>.wrap>.matrix,
section.blk>.wrap>.keten,
section.blk>.wrap>.parties,
section.blk>.wrap>.kb,
section.blk>.wrap>.kbgrid,
section.blk>.wrap>.glos,
section.blk>.wrap>.lockgrid,
section.blk>.wrap>.price,
section.blk>.wrap>.fig,
section.blk>.wrap>.tools,
section.blk>.wrap>.checks,
section.blk>.wrap>.related,
section.blk>.wrap>.slotblok,
section.blk>.wrap>.withaside{width:100%;max-width:1120px;margin-left:auto;margin-right:auto}

/* de vervolgstap in de uitkomst van de bedrag-check */
.checkuit .uittekst{display:block}
.checkuit .uitcta{display:inline-flex;align-items:center;gap:7px;margin-top:12px;font-family:Figtree;font-weight:700;
  font-size:14.5px;text-decoration:none;color:var(--heading);border-bottom:2px solid currentColor;padding-bottom:2px;
  transition:gap .2s,color .2s}
.checkuit .uitcta i{font-style:normal;transition:transform .2s}
.checkuit .uitcta:hover i{transform:translateX(3px)}
.checkuit.z1 .uitcta{color:var(--ok)}
.checkuit.z2 .uitcta{color:var(--warn)}
.checkuit.z3 .uitcta{color:var(--accent)}
.checkuit.z4 .uitcta{color:var(--alarm)}

/* ------------------------------------------------------- geen zijwaarts schuiven
   Het keuzemenu in de afsluitende band bepaalt zijn minimale breedte aan de langste
   optie ("Copyright Agent / Visual Rights Group / Permission Machine"). In een
   kolom van 1fr rekt dat de hele pagina op, waardoor de site op een telefoon
   zijwaarts schoof. minmax(0,1fr) laat de kolom wel krimpen. */
@media (max-width:920px){
  .band .wrap{grid-template-columns:minmax(0,1fr)}
}
.band form,.band .field,.band select,.band input,.band button{min-width:0;max-width:100%}
select,input,textarea{max-width:100%}

/* Een kolom van 1fr krimpt niet onder de min-content van zijn inhoud: een select
   met lange opties, een regel die niet mag afbreken. Overal minmax(0,1fr), zodat
   een enkele lange regel de pagina nooit breder maakt dan het scherm. */
/* Lange woorden en adressen (bronvermeldingen, urls, dossiernummers) mogen afbreken
   in plaats van de pagina op een telefoon breder te maken dan het scherm. */
p,li,td,th,dd,dt,h1,h2,h3,h4,figcaption,.prose,.aside,.checkuit{overflow-wrap:anywhere}

/* ------------------------------------------------------------- menu op telefoon
   Onder de 1040 pixels verdween het hele menu zonder dat er een knop voor in de
   plaats kwam: op een telefoon was geen enkele pagina meer te bereiken via de kop.
   Nu klapt het menu uit onder de balk. */
.menuknop{display:none;align-items:center;justify-content:center;width:44px;height:44px;padding:0;
  background:var(--surface);border:1px solid var(--line);border-radius:10px;cursor:pointer;
  transition:border-color .18s,background .18s}
.menuknop:hover{border-color:var(--line-strong)}
.streepjes{display:block;width:19px;height:13px;position:relative}
.streepjes i{position:absolute;left:0;right:0;height:2px;border-radius:2px;background:var(--heading);
  transition:transform .24s cubic-bezier(.4,0,.2,1),opacity .18s}
.streepjes i:nth-child(1){top:0}
.streepjes i:nth-child(2){top:5.5px}
.streepjes i:nth-child(3){top:11px}
header.site.menu-open .streepjes i:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
header.site.menu-open .streepjes i:nth-child(2){opacity:0}
header.site.menu-open .streepjes i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

@media (max-width:1040px){
  .menuknop{display:inline-flex}
  header.site .wrap{gap:14px}
  header.site nav{display:block;position:absolute;left:0;right:0;top:100%;
    background:var(--ground);border-bottom:1px solid var(--line);
    box-shadow:0 18px 40px -26px rgba(12,29,85,.5);
    padding:8px 20px 16px;margin:0;font-size:16px;
    max-height:0;overflow:hidden;visibility:hidden;
    transition:max-height .28s cubic-bezier(.4,0,.2,1),visibility 0s .28s}
  header.site.menu-open nav{max-height:70vh;overflow-y:auto;visibility:visible;transition:max-height .3s cubic-bezier(.4,0,.2,1)}
  header.site nav a{display:block;padding:13px 8px;border-radius:8px;border-bottom:1px solid var(--line)}
  header.site nav a:last-child{border-bottom:0}
  header.site nav a::after{display:none}
  header.site nav a.is-active{background:var(--accent-soft);color:var(--accent)}
}
@media (max-width:560px){
  header.site .btn-sm{padding:0 12px;font-size:14px;white-space:nowrap}
  header.site .btn-sm .arw{display:none}
  header.site img.logo{height:auto;max-height:28px;max-width:46vw;width:auto}
  header.site.scrolled img.logo{max-height:25px}
  header.site .wrap{gap:10px;height:64px}
  header.site.scrolled .wrap{height:58px}
}

@media (max-width:400px){
  header.site .wrap{padding:0 12px;gap:8px}
  header.site .btn-sm{padding:0 10px;font-size:13.5px}
  .menuknop{width:40px;height:40px}
}

/* ============ foto als rustpunt midden in de pagina ============ */
/* Geen slab onderaan bij de leeslinks, maar een band tussen twee secties in.
   Hoogte is begrensd, zodat de foto een onderbreking is en geen poster. */
.middenfoto{max-width:1120px;margin:4px auto 54px;padding:0 22px}
.middenfoto .fig{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);margin:0}
.middenfoto .fig img{display:block;width:100%;height:auto;aspect-ratio:32/9;object-fit:cover}
.middenfoto .fig figcaption{display:none}
@media (max-width:900px){ .middenfoto .fig img{aspect-ratio:21/9} }
@media (max-width:560px){ .middenfoto{padding:0 16px} .middenfoto .fig img{aspect-ratio:16/9} }

/* ============ tekstlogo voor de Vlaamse site ============ */
/* Geen apart beeldbestand: het woordmerk is tekst, dus het blijft scherp op
   elk scherm en pakt vanzelf de accentkleur van het land. */
.woordmerk{font-family:Figtree;font-weight:800;font-size:23px;letter-spacing:-.02em;
  color:var(--ink);line-height:1;white-space:nowrap;display:inline-block}
.woordmerk b{font-weight:800;color:var(--accent)}
.woordmerk i{font-style:normal;font-weight:700;font-size:.62em;color:var(--ink-muted);letter-spacing:0}
footer.site .woordmerk{font-size:21px;margin-bottom:14px}
@media (max-width:560px){ .woordmerk{font-size:20px} }
/* de datumkolom van de Belgische uitsprakentabel wat ruimer */
.wiewie table td:first-child{min-width:150px}

/* ============ beeld op de pagina's ============
   Twee vormen. Een staand beeld naast de tekst, en een liggend beeld over de
   volle inhoudsbreedte als rustpunt tussen twee blokken. Allebei met dezelfde
   ronding, rand en schaduw als de rest van de site, zodat ze erbij horen en
   er niet op geplakt lijken. */

.metbeeld{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:40px;
  max-width:1120px;margin:0 auto;align-items:start}
.metbeeld .prose{max-width:none;margin:0}
.metbeeld.om{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)}
.metbeeld.om .prose{order:2}
.metbeeld.om .beeldnaast{order:1}

.beeldnaast{margin:0;border-radius:var(--r);overflow:hidden;background:var(--paper);
  border:1px solid var(--line);box-shadow:var(--shadow);position:sticky;top:100px}
.beeldnaast img{display:block;width:100%;height:auto}

.beeldband{margin:0 auto;max-width:1120px;border-radius:var(--r);overflow:hidden;
  background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow)}
.beeldband img{display:block;width:100%;height:auto}
.beeldband figcaption{padding:12px 20px;font-size:13.8px;color:var(--ink-muted);
  border-top:1px solid var(--line);background:var(--surface)}

/* Een band die meteen onder de subkop staat mag dichter tegen de tekst aan
   staan dan een gewone sectie, anders valt er een gat tussen kop en beeld. */
section.blk.beeldsec{padding-top:46px;padding-bottom:46px}
@media (max-width:600px){section.blk.beeldsec{padding-top:30px;padding-bottom:30px}}

/* Het beeld komt iets rustiger tevoorschijn dan een tekstblok: het schuift
   minder ver en zoomt een haartje uit in plaats van in. */
html.reveal .beeldband[data-rv],
html.reveal .beeldnaast[data-rv]{opacity:0;transform:translateY(16px) scale(1.012)}
html.reveal .beeldband[data-rv].in,
html.reveal .beeldnaast[data-rv].in{opacity:1;transform:none}
.beeldband,.beeldnaast{transition:opacity .75s cubic-bezier(.2,.7,.25,1),
  transform .75s cubic-bezier(.2,.7,.25,1),border-color .25s}

@media (max-width:900px){
  .metbeeld,.metbeeld.om{grid-template-columns:minmax(0,1fr);gap:26px}
  .metbeeld .prose,.metbeeld.om .prose{order:2}
  .metbeeld .beeldnaast,.metbeeld.om .beeldnaast{order:1;position:static;
    max-width:460px;margin-left:auto;margin-right:auto}
}
@media (prefers-reduced-motion:reduce){
  .beeldband,.beeldnaast{transition:none}
}

/* Zijkolom met een beeld boven de samenvattingskaart. Het beeld plakt niet,
   de kaart eronder wel, zodat de samenvatting meeleest terwijl het beeld
   netjes bovenaan de sectie blijft staan. */
.zijkolom{display:flex;flex-direction:column;gap:18px;position:sticky;top:100px}
.zijkolom .aside{position:static}
.beeldnaast.bijkaart{position:static}
@media (max-width:900px){
  .zijkolom{position:static}
}

/* beeldmerk claimhulp.be */
.logo-be{height:34px;width:auto;display:block;overflow:visible}
header.site .logo-be{transition:height .25s}
header.site.scrolled .logo-be{height:29px}
footer .logo-be,.fgrid .logo-be{height:32px;margin-bottom:12px}
.logo-be .n{fill:var(--heading)}
.logo-be .t{fill:var(--accent)}
.logo-be .sn{fill:none;stroke:var(--heading)}
.logo-be .st{fill:none;stroke:var(--accent)}
.logo-be .gn{stop-color:var(--heading)}
.logo-be .gt{stop-color:var(--accent)}
/* het vinkje tekent zichzelf bij het laden en zet zich af en toe opnieuw */
.logo-be .vink{stroke-dasharray:70;stroke-dashoffset:0;animation:vink-in 1.1s cubic-bezier(.2,.8,.2,1) .2s both,vink-nudge 9s ease-in-out 4s infinite;transform-origin:72px 68px}
@keyframes vink-in{from{stroke-dashoffset:70}to{stroke-dashoffset:0}}
@keyframes vink-nudge{0%,92%,100%{transform:scale(1)}94%{transform:scale(1.14) rotate(-4deg)}97%{transform:scale(.97)}}
a:hover .logo-be .vink{animation:vink-in .7s cubic-bezier(.2,.8,.2,1) both}
@media (prefers-reduced-motion:reduce){.logo-be .vink{animation:none!important}}

h1,h2,h3,h4,.woordmerk,.pcard .now,.pcard .was{font-family:Jost,Figtree,sans-serif}