:root{
  color-scheme:light;
  --or:#e85422; --or-d:#c94113; --or-l:#ff7a4d; --peach:#ffe3d6;
  --navy:#0f1b3d; --ink-2:#47526e; --muted:#69738c;
  --bg:#ffffff; --soft:#f4f6fa; --line:#e6eaf2;
  --sky:#dcebff; --sky-d:#1f5fd1;
  --mint:#d3f2e1; --mint-d:#0f7a50;
  --butter:#ffe9a8; --butter-d:#7d5800;
  --lilac:#e9e4ff; --lilac-d:#5a43c9;
  --r-l:28px; --r:16px; --r-s:10px; --pil:999px;
  --sh:0 1px 2px rgba(15,27,61,.06),0 10px 28px rgba(15,27,61,.08);
  --sh-2:0 2px 6px rgba(15,27,61,.08),0 28px 64px rgba(15,27,61,.16);
  --disp:"Cabinet Grotesk",system-ui,sans-serif;
  --body:"Satoshi",system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--navy);background:var(--bg);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
.num{font-variant-numeric:tabular-nums}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}
.breed{max-width:1680px;margin:0 auto;padding:0 16px}
.binnen{--pad:max(64px,calc((100% - 1192px) / 2))}
:focus-visible{outline:3px solid var(--sky-d);outline-offset:3px;border-radius:6px}
.ph,.ph-bold,.ph-fill{line-height:1}

/* knoppen */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border-radius:var(--pil);font-weight:700;font-size:16px;white-space:nowrap;transition:transform .15s var(--ease),background .2s,box-shadow .2s}
.btn:active{transform:translateY(1px) scale(.98)}
.btn-or{background:var(--or);color:#fff}
.btn-or:hover{background:var(--or-d)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:#1d2c57}
.btn-ghost{color:var(--navy)}
.btn-ghost:hover{background:var(--soft)}

/* kopbalk */
header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:blur(12px)}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:800;font-size:23px;letter-spacing:-.02em}
.logo .merk{width:34px;height:34px;flex:none}
.logo b{color:var(--or);font-weight:800}
.nav nav{display:flex;gap:4px;font-weight:500;font-size:15px}
.nav nav a{padding:9px 14px;border-radius:var(--pil);color:var(--ink-2);transition:background .2s,color .2s}
.nav nav a:hover{background:var(--soft);color:var(--navy)}
.nav-r{display:flex;gap:6px;align-items:center}

/* hero */
.hero{padding:8px 0 0}
.hero-blok{position:relative;overflow:hidden;background:linear-gradient(100deg,#c43d10 0%,#d4461a 42%,#e85422 70%);border-radius:var(--r-l);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px;padding:72px var(--pad);min-height:600px}
.hero-blok::before,.hero-blok::after{content:"";position:absolute;pointer-events:none;-webkit-mask:url(ring.svg) center/contain no-repeat;mask:url(ring.svg) center/contain no-repeat}
.hero-blok::before{width:760px;height:760px;right:-200px;top:-260px;background:#f06a3a}
.hero-blok::after{width:300px;height:300px;right:30%;bottom:-170px;background:#f27a50;transform:rotate(140deg)}
.hero-tekst{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center}
h1{font-family:var(--disp);font-weight:800;font-size:clamp(48px,6.2vw,84px);line-height:.98;letter-spacing:-.035em;color:#fff;margin-bottom:22px}
h1 span{color:#ffe9a8}
.hero-lead{font-size:20px;line-height:1.45;font-weight:500;color:#fff;max-width:28em;margin-bottom:32px}
.zoek label{display:block;font-weight:700;font-size:15px;color:#fff;margin-bottom:10px}
.veld{display:flex;align-items:center;background:#fff;border-radius:var(--pil);padding:6px 6px 6px 22px;max-width:540px;box-shadow:0 12px 30px rgba(120,30,0,.22)}
.veld i{font-size:20px;color:var(--muted);margin-right:10px}
.veld input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:18px;font-weight:500;height:48px}
.veld input::placeholder{color:#7d8699}
.veld .tld{font-weight:700;color:var(--muted);margin:0 14px 0 6px}
.veld:focus-within{box-shadow:0 0 0 4px rgba(255,255,255,.55),0 12px 30px rgba(120,30,0,.22)}
.uitkomst{margin-top:14px;min-height:56px;max-width:540px}
.res{display:flex;align-items:center;gap:14px;margin-bottom:18px;background:#fff;border-radius:var(--r);padding:14px 14px 14px 14px;box-shadow:var(--sh-2);animation:op .35s var(--ease)}
.res .ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:22px;flex:none}
.res .rt{flex:1;min-width:0;line-height:1.3}
.res .rs{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;letter-spacing:.01em;color:var(--kl,var(--ink-2))}
.res .rs::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.res .rn{display:block;font-family:var(--disp);font-weight:800;font-size:21px;letter-spacing:-.02em;color:var(--navy);overflow-wrap:anywhere;margin:1px 0 2px}
.res .rn span{color:var(--muted);font-weight:700}
.res small{display:block;font-size:14px;color:var(--ink-2)}
.res .btn{height:44px;padding:0 18px;font-size:14.5px;flex:none;white-space:nowrap}
.res .btn i{font-size:17px}
.res .klaar{display:inline-flex;align-items:center;gap:7px;height:44px;padding:0 16px;border-radius:var(--pil);background:var(--mint);color:var(--mint-d);font-weight:700;font-size:14.5px;flex:none}
.res-q .ic{background:var(--peach);color:var(--or-d)}.res-q{--kl:var(--or-d)}
.res-g .ic{background:var(--sky);color:var(--sky-d)}.res-g{--kl:var(--sky-d)}
.res-v .ic{background:var(--mint);color:var(--mint-d)}.res-v{--kl:var(--mint-d)}
.res-x .ic{background:var(--soft);color:var(--ink-2)}
.res-laad .ic,.res-laad .bal{background:linear-gradient(90deg,var(--soft) 0%,#e9edf4 50%,var(--soft) 100%);background-size:200% 100%;animation:glans 1.1s linear infinite}
.res-laad .bal{display:block;height:12px;border-radius:6px;margin:6px 0}
@keyframes glans{to{background-position:-200% 0}}
.res.res-open{flex-wrap:wrap}.res .volg-rij .btn{width:auto}
.volg-form,.volg-klaar{flex-basis:100%;border-top:1px solid var(--line);padding-top:14px;margin-top:2px}
.res .volg-form label{display:block;font-size:13px;font-weight:700;color:var(--navy);margin-bottom:6px}
.res .volg-rij{display:flex;gap:8px;width:100%}
.res .volg-rij input{width:auto;flex:1;min-width:0;height:46px;border:1.5px solid var(--line);border-radius:var(--pil);padding:0 18px;font-size:15px;outline:0}
.res .volg-rij input:focus{border-color:var(--navy)}
.volg-form small{display:block;font-size:13px;color:var(--muted);margin-top:7px}
.volg-form small.fout{color:var(--or-d);font-weight:700}
.volg-klaar{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--ink-2)}
.volg-klaar i{font-size:22px;color:var(--mint-d);margin-top:2px}
.volg-klaar b{display:block;color:var(--navy)}
.res .volgtel{display:inline-flex;align-items:center;gap:4px;color:var(--sky-d);font-weight:700;white-space:nowrap}
@media (max-width:560px){.res{flex-wrap:wrap;align-items:flex-start}.res .btn,.res .klaar{width:100%;justify-content:center}}
.punten{display:flex;gap:22px;flex-wrap:wrap;font-size:15px;font-weight:700;color:#fff}
.punten span{display:flex;align-items:center;gap:7px}
.punten i{font-size:18px;color:#ffe9a8}

/* hero-compositie */
.comp{position:relative;z-index:1;min-height:470px;align-self:center}
.kaart{position:absolute;background:#fff;border-radius:var(--r);box-shadow:var(--sh-2)}
.k-hoofd{left:6%;right:4%;top:0;padding:24px}
.k-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.pil{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:var(--pil);font-size:13px;font-weight:700;white-space:nowrap}
.p-sky{background:var(--sky);color:var(--sky-d)}
.p-mint{background:var(--mint);color:var(--mint-d)}
.p-butter{background:var(--butter);color:var(--butter-d)}
.p-peach{background:var(--peach);color:var(--or-d)}
.p-lilac{background:var(--lilac);color:var(--lilac-d)}
.p-grey{background:var(--soft);color:var(--ink-2)}
.k-naam{font-family:var(--disp);font-weight:800;font-size:38px;letter-spacing:-.03em;line-height:1.05}
.k-naam span{color:var(--muted);font-weight:700}
.k-sub{font-size:14px;color:var(--muted);margin-top:4px}
.aftel{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:20px 0}
.aftel div{background:var(--soft);border-radius:var(--r-s);padding:10px 0;text-align:center}
.aftel b{display:block;font-family:var(--disp);font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.aftel small{font-size:12px;color:var(--muted);font-weight:500}
.k-hoofd .btn{width:100%}
.k-toast{left:-4%;top:356px;display:flex;align-items:center;gap:12px;padding:14px 18px 14px 14px;max-width:330px}
.k-toast .ic{width:40px;height:40px;border-radius:12px;background:var(--mint);color:var(--mint-d);display:grid;place-items:center;font-size:22px;flex:none}
.k-toast b{display:block;font-size:15px}
.k-toast span{font-size:13px;color:var(--muted)}
.k-bod{right:0;top:336px;padding:16px 18px;width:210px;background:var(--butter)}
.k-bod small{font-size:13px;font-weight:700;color:var(--butter-d)}
.k-bod b{display:block;font-family:var(--disp);font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1.1;margin:2px 0}
.k-bod span{font-size:13px;color:#5e4a12}

/* lijst */
.lijst{padding:72px 0 40px}
.lijst-kop{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:24px}
h2{font-family:var(--disp);font-weight:800;font-size:clamp(34px,4vw,52px);line-height:1.05;letter-spacing:-.03em}
h2 em{font-style:normal;color:var(--or)}
.sub{font-size:18px;color:var(--ink-2);margin-top:10px;max-width:36em}
.tabs{display:flex;gap:6px;background:var(--soft);padding:5px;border-radius:var(--pil);flex-wrap:wrap}
.tabs button{height:40px;padding:0 16px;border-radius:var(--pil);font-weight:700;font-size:15px;color:var(--ink-2);display:flex;align-items:center;gap:8px;transition:background .2s,color .2s}
.tabs button span{font-size:12px;background:#fff;border-radius:var(--pil);padding:1px 8px;color:var(--muted)}
.tabs button[aria-selected="true"]{background:var(--navy);color:#fff}
.tabs button[aria-selected="true"] span{background:rgba(255,255,255,.18);color:#fff}
.balk{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.f-zoek{display:flex;align-items:center;gap:8px;height:44px;border:1.5px solid var(--line);border-radius:var(--pil);padding:0 16px;min-width:240px;background:#fff}
.f-zoek:focus-within{border-color:var(--navy)}
.f-zoek input{border:0;outline:0;flex:1;min-width:0;font-size:15px}
.f-zoek i{color:var(--muted)}
.chip{height:44px;padding:0 16px;border-radius:var(--pil);border:1.5px solid var(--line);font-weight:700;font-size:14px;color:var(--ink-2);display:flex;align-items:center;gap:7px;transition:all .2s;background:#fff}
.chip:hover{border-color:#c8cfdd}
.chip[aria-pressed="true"]{background:var(--peach);border-color:var(--peach);color:var(--or-d)}
.sort{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted);font-weight:500}
.sort select{height:44px;border:1.5px solid var(--line);border-radius:var(--pil);padding:0 14px;font-weight:700;color:var(--navy);background:#fff}

.tabel{background:var(--soft);border-radius:var(--r-l);padding:10px}
.t-kop,.rij{display:grid;grid-template-columns:minmax(0,2.3fr) minmax(0,1.35fr) 92px minmax(0,1fr) minmax(0,1.25fr) 132px;gap:16px;align-items:center}
.t-kop{padding:10px 20px 12px;font-size:13px;font-weight:700;color:var(--muted)}
.rijen{display:grid;gap:8px}
.rij{background:#fff;border-radius:var(--r);padding:16px 16px 16px 20px;border:1.5px solid transparent;transition:border-color .2s,box-shadow .2s;animation:op .4s var(--ease) both}
.rij:hover{border-color:#ffc7b1;box-shadow:var(--sh)}
.dn{display:flex;align-items:center;gap:14px;min-width:0}
.dn .av{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-family:var(--disp);font-weight:800;font-size:19px;flex:none}
.dn b{display:block;font-family:var(--disp);font-size:21px;font-weight:800;letter-spacing:-.02em;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dn b span{color:var(--muted);font-weight:700}
.dn small{font-size:13px;color:var(--muted)}
.wann b{display:block;font-weight:700;font-size:15px}
.wann small{font-size:13px;color:var(--muted)}
.score{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-family:var(--disp);font-weight:800;font-size:19px}
.hist b{display:block;font-weight:700;font-size:15px}
.hist small{font-size:13px;color:var(--muted)}
.rij .btn{height:42px;font-size:15px;width:100%}
.t-voet{display:flex;justify-content:space-between;align-items:center;padding:16px 12px 8px 14px;font-size:14px;color:var(--muted);gap:12px;flex-wrap:wrap}
.leeg{background:#fff;border-radius:var(--r);padding:40px 24px;text-align:center;color:var(--ink-2)}
.leeg i{font-size:32px;color:var(--muted);display:block;margin-bottom:8px}

/* voordelen */
.voordelen{padding:88px 0}
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;margin-top:40px}
.tegel{border-radius:var(--r-l);padding:36px;position:relative;overflow:hidden;min-height:320px;display:flex;flex-direction:column}
.tegel h3{font-family:var(--disp);font-weight:800;font-size:30px;letter-spacing:-.025em;line-height:1.08;margin-bottom:10px}
.tegel p{font-size:16px;color:var(--ink-2);max-width:26em}
.t-sky{grid-column:span 7;background:var(--sky)}
.t-mint{grid-column:span 5;background:var(--mint)}
.t-butter{grid-column:span 5;background:var(--butter)}
.t-lilac{grid-column:span 7;background:var(--lilac)}
.wacht{margin-top:auto;padding-top:24px;display:grid;gap:8px;max-width:440px}
.wacht div{display:flex;align-items:center;justify-content:space-between;background:#fff;border-radius:var(--r-s);padding:12px 14px;box-shadow:0 1px 2px rgba(15,27,61,.06);font-weight:700}
.wacht div span:first-child{display:flex;align-items:center;gap:10px}
.wacht i.ph-bell-ringing{color:var(--or)}
.nul{margin-top:auto;display:flex;align-items:flex-end;gap:16px;padding-top:24px}
.nul b{font-family:var(--disp);font-weight:800;font-size:112px;line-height:.82;letter-spacing:-.05em;color:var(--mint-d)}
.nul span{font-size:16px;font-weight:700;color:var(--mint-d);padding-bottom:8px;line-height:1.3}
.bieders{margin-top:auto;padding-top:24px}
.stapel{display:flex;margin-bottom:12px}
.stapel span{width:46px;height:46px;border-radius:50%;border:3px solid var(--butter);display:grid;place-items:center;font-weight:700;font-size:15px;margin-right:-10px}
.bieders p{font-size:15px;color:#5e4a12;font-weight:500}
.mail{margin-top:auto;background:#fff;border-radius:var(--r);padding:18px 20px;box-shadow:var(--sh);max-width:470px;align-self:flex-end;width:100%}
.mail-k{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);margin-bottom:10px}
.mail-k .lm{width:28px;height:28px;display:block}
.mail-k .lm svg{width:28px;height:28px;display:block}
.mail b{display:block;font-size:16px;margin-bottom:8px}
.code{display:flex;justify-content:space-between;align-items:center;background:var(--soft);border-radius:var(--r-s);padding:10px 12px;font-family:ui-monospace,Menlo,monospace;font-size:15px;font-weight:600;letter-spacing:.06em}
.code button{font-family:var(--body);letter-spacing:0;font-size:13px;font-weight:700;color:var(--lilac-d);display:flex;gap:6px;align-items:center}

/* werking */
.werking{padding:88px 0;background:var(--soft)}
.tijd{position:relative;margin-top:48px;background:#fff;border-radius:var(--r-l);padding:40px;box-shadow:var(--sh)}
.spoor{display:grid;grid-template-columns:1fr 6fr 1.3fr;gap:6px;height:14px;margin:8px 0 18px}
.spoor i{border-radius:var(--pil)}
.spoor i:nth-child(1){background:var(--navy)}
.spoor i:nth-child(2){background:repeating-linear-gradient(90deg,#cfd7e6 0 calc(100%/39 - 3px),transparent calc(100%/39 - 3px) calc(100%/39))}
.spoor i:nth-child(3){background:var(--or)}
.spoor-l{display:grid;grid-template-columns:1fr 6fr 1.3fr;gap:6px;font-size:14px;font-weight:700}
.spoor-l span:nth-child(2){text-align:center;color:var(--muted);font-weight:500}
.spoor-l span:nth-child(3){text-align:right;color:var(--or-d)}
.stappen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:44px}
.stap .nr{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:26px;margin-bottom:18px}
.stap h3{font-family:var(--disp);font-weight:800;font-size:23px;letter-spacing:-.02em;margin-bottom:6px}
.stap p{color:var(--ink-2);font-size:16px}

/* prijs */
.prijs{padding:88px 0}
.prijs-blok{background:var(--mint);border-radius:var(--r-l);padding:56px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:48px;align-items:center}
.prijs-groot{display:flex;align-items:flex-start;gap:18px;margin:26px 0 14px}
.prijs-groot b{font-family:var(--disp);font-size:clamp(96px,11vw,150px);font-weight:800;line-height:.82;letter-spacing:-.05em}
.prijs-groot span{display:block;font-weight:700;color:var(--mint-d);padding-top:10px;line-height:1.35}
.prijs-blok p.l{font-size:18px;color:#24443a;max-width:28em}
.inbegr{background:#fff;border-radius:var(--r);padding:30px;box-shadow:var(--sh)}
.inbegr h3{font-family:var(--disp);font-weight:800;font-size:22px;margin-bottom:16px}
.inbegr ul{list-style:none;display:grid;gap:12px;margin-bottom:24px}
.inbegr li{display:flex;gap:12px;font-size:16px;color:var(--ink-2)}
.inbegr li i{font-size:22px;color:var(--mint-d);flex:none}
.inbegr li b{color:var(--navy)}
.inbegr .btn{width:100%;height:54px;font-size:17px}
.veil{display:flex;align-items:center;gap:14px;margin-top:22px;background:rgba(255,255,255,.6);border-radius:var(--r);padding:16px 18px;font-size:15px;color:#24443a;max-width:34em}
.veil i{font-size:22px;color:var(--mint-d);flex:none}

/* vragen */
.vragen{padding:24px 0 88px}
.v-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:start}
.contact{margin-top:28px;background:var(--soft);border-radius:var(--r);padding:24px;display:flex;gap:14px;align-items:center}
.contact .ic{width:46px;height:46px;border-radius:14px;background:var(--peach);color:var(--or-d);display:grid;place-items:center;font-size:22px;flex:none}
.contact b{display:block}
.contact span{font-size:15px;color:var(--ink-2)}
details{background:var(--soft);border-radius:var(--r);margin-bottom:10px;transition:background .2s}
details[open]{background:#fff;box-shadow:var(--sh)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 22px;font-weight:700;font-size:18px}
summary::-webkit-details-marker{display:none}
summary i{font-size:20px;transition:transform .25s var(--ease);color:var(--muted)}
details[open] summary i{transform:rotate(180deg)}
details p{padding:0 22px 22px;color:var(--ink-2);font-size:16px}

/* slot */
.slot{padding:0 0 88px}
.slot-blok{background:var(--sky);border-radius:var(--r-l);padding:56px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:40px;align-items:center;position:relative;overflow:hidden}
.slot-blok::after{content:"";position:absolute;width:440px;height:440px;background:var(--or);right:-150px;top:-230px;-webkit-mask:url(ring.svg) center/contain no-repeat;mask:url(ring.svg) center/contain no-repeat;transform:rotate(-20deg)}
.slot-blok h2{color:var(--navy);position:relative;z-index:1}
.slot-blok p{color:var(--ink-2);font-size:18px;margin-top:10px;position:relative;z-index:1}
.slot-blok .veld{position:relative;z-index:1;box-shadow:none;max-width:none}

/* voet */
footer{padding:0 0 16px;font-size:15px}
.voet-blok{background:var(--soft);border-radius:var(--r-l);padding:64px var(--pad) 32px;position:relative;overflow:hidden}
.voet-blok::after{content:"";position:absolute;width:380px;height:380px;background:var(--peach);right:-110px;bottom:-190px;pointer-events:none;-webkit-mask:url(ring.svg) center/contain no-repeat;mask:url(ring.svg) center/contain no-repeat;transform:rotate(200deg)}
.voet-blok > *{position:relative;z-index:1}
.voet{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:40px}
.voet p{color:var(--ink-2);max-width:22em;margin-top:14px}
.voet h4{font-size:14px;font-weight:700;margin-bottom:12px}
.voet a:not(.logo){display:block;padding:4px 0;color:var(--ink-2)}
.voet a:not(.logo):hover{color:var(--or-d)}
.klein{margin-top:48px;padding-top:22px;border-top:1px solid #dde2ec;font-size:13px;color:var(--muted);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

/* reserveren */
dialog{border:0;padding:0;border-radius:var(--r-l);width:min(460px,calc(100vw - 32px));margin:auto;box-shadow:var(--sh-2);color:var(--navy)}
dialog::backdrop{background:rgba(15,27,61,.45);backdrop-filter:blur(3px)}
.dlg{padding:30px}
.dlg-k{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.dlg-k button{width:38px;height:38px;border-radius:50%;background:var(--soft);display:grid;place-items:center;font-size:18px}
.dlg h3{font-family:var(--disp);font-weight:800;font-size:34px;letter-spacing:-.03em;line-height:1.05}
.dlg h3 span{color:var(--muted)}
.dlg-f{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0 22px}
.dlg-f div{background:var(--soft);border-radius:var(--r-s);padding:12px 14px}
.dlg-f small{display:block;font-size:12px;color:var(--muted);font-weight:500}
.dlg-f b{font-size:16px}
.dlg label{display:block;font-weight:700;font-size:14px;margin-bottom:8px}
.dlg input{width:100%;height:52px;border:1.5px solid var(--line);border-radius:var(--r-s);padding:0 14px;font-size:16px;outline:0}
.dlg input:focus{border-color:var(--navy)}
.dlg .hulp{font-size:13px;color:var(--muted);margin:6px 0 18px}
.dlg .btn{width:100%;height:54px;font-size:16px}
.dlg .fijn{display:flex;gap:8px;justify-content:center;font-size:13px;color:var(--muted);margin-top:12px}

/* beweging */
@keyframes op{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  .hero-tekst > *{animation:op .8s var(--ease) both}
  .hero-tekst > *:nth-child(2){animation-delay:.08s}
  .hero-tekst > *:nth-child(3){animation-delay:.16s}
  .hero-tekst > *:nth-child(4){animation-delay:.24s}
  .kaart{animation:in .9s var(--ease) both}
  .k-hoofd{animation-delay:.2s}.k-toast{animation-delay:.5s}.k-bod{animation-delay:.65s}
  @keyframes in{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* kleiner */
@media (max-width:1060px){
  .hero-blok{grid-template-columns:minmax(0,1fr);padding:48px 32px;background:linear-gradient(170deg,#c43d10 0%,#d4461a 45%,#e85422 75%)}
  .voet-blok{padding:48px 32px 28px}
  .comp{min-height:420px;max-width:520px;width:100%;margin:0 auto}
  .t-kop{display:none}
  .rij{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"dn sc" "wa wa" "hi hi" "dr dr" "bt bt";row-gap:12px}
  .rij .dn{grid-area:dn}.rij .sc{grid-area:sc}.rij .wann{grid-area:wa}.rij .hist{grid-area:hi}.rij .dr{grid-area:dr}.rij .bt{grid-area:bt}
  .bento > *{grid-column:span 12}
  .stappen{grid-template-columns:1fr;gap:28px}
  .prijs-blok,.v-grid,.slot-blok{grid-template-columns:minmax(0,1fr)}
  .nav nav{display:none}
  .sort{margin-left:0}
}
@media (max-width:640px){
  .wrap{padding:0 14px}
  .hero-blok{padding:36px 22px 28px;border-radius:22px;min-height:0}
  .breed{padding:0 8px}
  .voet-blok{padding:40px 22px 24px;border-radius:22px}
  h1{font-size:44px}
  .hero-lead{font-size:18px}
  .veld{padding-left:16px}
  .veld i{display:none}
  .veld .btn{padding:0 16px}
  .k-naam{font-size:30px}
  .k-toast{left:0;max-width:280px}
  .k-bod{width:180px}
  .tabel{padding:6px;border-radius:22px}
  .f-zoek{min-width:0;flex:1 1 100%}
  .tegel,.prijs-blok,.slot-blok,.tijd{padding:28px 22px}
  .tegel h3{font-size:26px}
  .nul b{font-size:88px}
  .voet{grid-template-columns:1fr 1fr}
  .voet > div:first-child{grid-column:1 / -1}
  .nav-r .btn-ghost{display:none}
}

/* ===== binnenpagina's ===== */
.kruim{display:flex;gap:8px;align-items:center;font-size:14px;color:var(--muted);padding:20px 0 14px}
.kruim a:hover{color:var(--or-d)}
.kop-blok{border-radius:var(--r-l);padding:56px var(--pad);position:relative;overflow:hidden}
.kop-blok::after{content:"";position:absolute;width:460px;height:460px;right:-120px;top:-210px;pointer-events:none;-webkit-mask:url(ring.svg) center/contain no-repeat;mask:url(ring.svg) center/contain no-repeat;transform:rotate(30deg)}
.kop-blok > *{position:relative;z-index:1}
.kb-peach{background:var(--peach)}.kb-peach::after{background:#ffd0bc}
.kb-butter{background:var(--butter)}.kb-butter::after{background:#ffdf85}
.kb-sky{background:var(--sky)}.kb-sky::after{background:#c7dfff}
.kop-blok h1{color:var(--navy);font-size:clamp(40px,5vw,68px);margin-bottom:14px}
.kop-blok h1 span{color:var(--or)}
.kop-blok .lead{font-size:20px;color:var(--ink-2);max-width:34em}
.blok{padding:72px 0}
.blok-s{padding:40px 0}
.grid-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
.grid-zij{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,400px);gap:32px;align-items:start}
.plak{position:sticky;top:96px}
.kaartje{background:#fff;border-radius:var(--r);padding:28px;box-shadow:var(--sh)}
.kaartje h3{font-family:var(--disp);font-weight:800;font-size:22px;letter-spacing:-.02em;margin-bottom:8px}
.zacht{background:var(--soft);border-radius:var(--r-l);padding:40px}

/* stappen verticaal */
.route{position:relative;display:grid;gap:18px;margin-top:40px}
.route::before{content:"";position:absolute;left:27px;top:30px;bottom:30px;width:3px;border-radius:3px;background:linear-gradient(var(--or),var(--sky-d) 40%,var(--mint-d))}
.halte{display:grid;grid-template-columns:56px minmax(0,1fr) minmax(0,360px);gap:24px;align-items:start;position:relative}
.halte .nr{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;font-size:26px;box-shadow:0 0 0 6px #fff}
.halte h3{font-family:var(--disp);font-weight:800;font-size:24px;letter-spacing:-.02em;margin:4px 0 6px}
.halte p{color:var(--ink-2)}
.halte .vb{background:#fff;border-radius:var(--r);padding:16px 18px;box-shadow:var(--sh);font-size:15px}
.vb .r{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 0}
.vb small{color:var(--muted)}

/* betalen-tabel */
.uitslag{display:grid;gap:10px;margin-top:32px}
.uit{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:16px;align-items:center;background:#fff;border-radius:var(--r);padding:16px 20px}
.uit .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:21px}
.uit b{display:block}
.uit span{font-size:15px;color:var(--ink-2)}
.uit .bedrag{font-family:var(--disp);font-weight:800;font-size:24px;letter-spacing:-.02em;white-space:nowrap}

/* rekenvoorbeeld veiling */
.reken{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:24px 0}
.bieder{background:#fff;border-radius:var(--r);padding:20px}
.bieder label{display:flex;justify-content:space-between;font-weight:700;margin-bottom:12px}
.bieder input[type=range]{width:100%;accent-color:var(--or)}
.bieder .max{font-family:var(--disp);font-weight:800;font-size:28px}
.einde{background:var(--navy);color:#fff;border-radius:var(--r);padding:20px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.einde b{font-family:var(--disp);font-size:26px;font-weight:800}
.einde span{color:#c9d1e6;font-size:15px}
.stappen-t{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px}
.stappen-t div{background:rgba(255,255,255,.65);border-radius:var(--r-s);padding:12px 14px;font-size:14px}
.stappen-t b{display:block;font-size:17px}

/* domeinpagina */
.dom-kop{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap}
.dom-naam{font-family:var(--disp);font-weight:800;font-size:clamp(48px,6.4vw,92px);letter-spacing:-.04em;line-height:.95;overflow-wrap:anywhere}
.dom-naam span{color:var(--or)}
.feitenrij{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:32px}
.feit{background:rgba(255,255,255,.7);border-radius:var(--r);padding:18px 20px}
.feit small{display:block;font-size:13px;color:var(--ink-2);font-weight:500}
.feit b{font-family:var(--disp);font-size:28px;font-weight:800;letter-spacing:-.02em}
.jaren{display:flex;align-items:flex-end;gap:6px;height:120px;margin-top:20px}
.jaren i{flex:1;border-radius:6px 6px 2px 2px;background:var(--sky);min-height:6px}
.jaren i.top{background:var(--sky-d)}
.jaren-l{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);margin-top:8px}
.res-kaart .groot{font-family:var(--disp);font-weight:800;font-size:44px;letter-spacing:-.03em;line-height:1}
.res-kaart .aftel{margin:16px 0 18px}
.res-kaart .btn{width:100%;height:54px;font-size:16px}
.res-kaart ul{list-style:none;display:grid;gap:8px;margin-top:18px;font-size:15px;color:var(--ink-2)}
.res-kaart li{display:flex;gap:10px}
.res-kaart li i{color:var(--mint-d);font-size:19px;flex:none}
.melding{display:flex;gap:12px;border-radius:var(--r);padding:14px 16px;font-size:15px;margin-top:16px}
.melding i{font-size:20px;flex:none}

/* veiling */
.v-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:12px;margin-top:28px}
.v-cel{background:#fff;border-radius:var(--r);padding:20px 22px}
.v-cel small{display:block;font-size:13px;color:var(--muted);font-weight:500;margin-bottom:2px}
.v-cel b{font-family:var(--disp);font-size:36px;font-weight:800;letter-spacing:-.03em;line-height:1.1}
.v-cel.or{background:var(--or);color:#fff}
.v-cel.or small{color:#ffe3d6}
.v-cel .verl{font-size:13px;font-weight:700;color:var(--or-d);margin-top:4px;min-height:18px}
.historie{display:grid;gap:8px;background:var(--soft);border-radius:var(--r-l);padding:10px}
.bod{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:14px;align-items:center;background:#fff;border-radius:var(--r-s);padding:12px 16px;animation:op .35s var(--ease) both}
.bod .av{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-weight:700;font-size:14px}
.bod b{display:block;font-size:15px}
.bod small{font-size:13px;color:var(--muted)}
.bod .bedrag{font-family:var(--disp);font-weight:800;font-size:20px}
.bod.jij{outline:2px solid var(--or)}
.bied .snel{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0 18px}
.bied .snel button{height:48px;border-radius:var(--r-s);background:var(--peach);color:var(--or-d);font-weight:700;font-size:16px;transition:background .2s}
.bied .snel button:hover{background:#ffd3c0}
.bied label{display:block;font-weight:700;font-size:14px;margin-bottom:8px}
.bied .rij2{display:flex;gap:8px}
.bied input{flex:1;min-width:0;height:52px;border:1.5px solid var(--line);border-radius:var(--r-s);padding:0 14px;font-size:17px;font-weight:700;outline:0}
.bied input:focus{border-color:var(--navy)}
.bied .btn{height:52px}
.status{border-radius:var(--r);padding:14px 16px;font-weight:700;display:flex;gap:10px;align-items:center;margin-bottom:16px}
.st-win{background:var(--mint);color:var(--mint-d)}
.st-over{background:var(--peach);color:var(--or-d)}
.st-niks{background:var(--soft);color:var(--ink-2)}
.regels{list-style:none;display:grid;gap:12px;font-size:15px;color:var(--ink-2)}
.regels li{display:flex;gap:10px}
.regels i{font-size:19px;color:var(--sky-d);flex:none;margin-top:2px}
.regels b{color:var(--navy)}

@media (max-width:1060px){
  .grid-zij,.grid-2{grid-template-columns:minmax(0,1fr)}
  .plak{position:static}
  .halte{grid-template-columns:56px minmax(0,1fr)}
  .halte .vb{grid-column:2}
  .feitenrij{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kop-blok{padding:44px 32px}
}
@media (max-width:640px){
  .kop-blok{padding:36px 22px;border-radius:22px}
  .reken,.v-top,.stappen-t{grid-template-columns:minmax(0,1fr)}
  .zacht{padding:24px 18px}
  .uit{grid-template-columns:40px minmax(0,1fr)}
  .uit .bedrag{grid-column:2}
  .halte{grid-template-columns:44px minmax(0,1fr);gap:14px}
  .halte .nr{width:44px;height:44px;font-size:21px;border-radius:14px}
  .route::before{left:21px}
}

/* ===== uitlegpagina (zakelijk) ===== */
.doc-kop{background:var(--soft);border-radius:var(--r-l);padding:56px var(--pad) 60px;position:relative;overflow:hidden}
.doc-kop::after{content:"";position:absolute;width:520px;height:520px;right:-140px;top:-230px;background:#e9edf5;pointer-events:none;-webkit-mask:url(ring.svg) center/contain no-repeat;mask:url(ring.svg) center/contain no-repeat;transform:rotate(30deg)}
.doc-kop > *{position:relative;z-index:1}
.doc-kop-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:56px;align-items:end}
.doc-kop h1{font-family:var(--disp);font-weight:800;font-size:clamp(40px,4.6vw,60px);line-height:1.02;letter-spacing:-.035em;color:var(--navy);margin:6px 0 18px}
.doc-kop .lead{font-size:19px;line-height:1.55;color:var(--ink-2);max-width:32em}
.kort{background:#fff;border-radius:var(--r);box-shadow:var(--sh);padding:8px 24px}
.kort div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:16px 0}
.kort div + div{border-top:1px solid var(--line)}
.kort span{font-size:15px;color:var(--ink-2)}
.kort b{font-family:var(--disp);font-size:26px;font-weight:800;letter-spacing:-.02em;white-space:nowrap}
.kort b.or{color:var(--or)}
.doc{display:grid;grid-template-columns:220px minmax(0,760px);gap:72px;padding:72px 0 40px;justify-content:start}
.toc{position:sticky;top:104px;align-self:start}
.toc h4{font-size:13px;font-weight:700;color:var(--muted);margin-bottom:12px}
.toc a{display:block;padding:7px 0 7px 14px;border-left:2px solid var(--line);font-size:15px;color:var(--ink-2);transition:color .2s,border-color .2s}
.toc a:hover{color:var(--navy)}
.toc a.aan{border-color:var(--or);color:var(--navy);font-weight:700}
.doc section{padding:0 0 64px;scroll-margin-top:96px}
.doc h2{font-size:clamp(28px,2.6vw,36px);margin-bottom:10px}
.doc .intro{font-size:18px;color:var(--ink-2);margin-bottom:28px;max-width:40em}
.doc p{color:var(--ink-2)}
.st{list-style:none;counter-reset:st;position:relative}
.st li{counter-increment:st;position:relative;padding:0 0 30px 60px}
.st li::before{content:counter(st);position:absolute;left:0;top:-2px;width:36px;height:36px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:700;font-size:15px}
.st li::after{content:"";position:absolute;left:17px;top:40px;bottom:6px;width:2px;background:var(--line)}
.st li:last-child::after{display:none}
.st li:last-child{padding-bottom:0}
.st h3{font-family:var(--disp);font-size:21px;font-weight:800;letter-spacing:-.015em;margin-bottom:4px}
.st .tip{display:inline-flex;gap:8px;align-items:center;margin-top:10px;font-size:14px;color:var(--ink-2);background:var(--soft);border-radius:var(--r-s);padding:8px 12px}
.st .tip code{font-family:ui-monospace,Menlo,monospace;font-weight:600;color:var(--navy);letter-spacing:.04em}
.tbl{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;font-size:16px}
.tbl th{background:var(--soft);text-align:left;font-size:13px;font-weight:700;color:var(--muted);padding:12px 20px}
.tbl td{padding:16px 20px;border-top:1px solid var(--line);vertical-align:top}
.tbl td:last-child,.tbl th:last-child{text-align:right;white-space:nowrap}
.tbl td b{display:block;color:var(--navy)}
.tbl td span{font-size:14px;color:var(--muted)}
.tbl .bedr{font-family:var(--disp);font-weight:800;font-size:20px;color:var(--navy)}
.tbl .bedr.b0{color:var(--muted)}
.tbl tr.groep td{background:#fcfcfd}
.rk{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:28px}
.rk-kop{display:flex;justify-content:space-between;align-items:center;padding:16px 22px;border-bottom:1px solid var(--line);font-weight:700}
.rk-kop span{font-size:13px;font-weight:500;color:var(--muted)}
.rk-in{display:grid;grid-template-columns:1fr 1fr;gap:0}
.rk-in > div{padding:22px}
.rk-in > div + div{border-left:1px solid var(--line)}
.rk-in label{display:flex;justify-content:space-between;align-items:baseline;font-size:15px;color:var(--ink-2);margin-bottom:14px}
.rk-in label b{font-family:var(--disp);font-size:26px;font-weight:800;color:var(--navy)}
.rk-in input{width:100%;accent-color:var(--navy)}
.rk-uit{background:var(--peach);padding:18px 22px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.rk-uit b{font-family:var(--disp);font-size:22px;font-weight:800;color:var(--navy)}
.rk-uit span{font-size:15px;color:#7a3a1c;max-width:30em}
.stapjes{display:flex;gap:28px;flex-wrap:wrap;margin-top:16px;font-size:14px;color:var(--muted)}
.stapjes b{color:var(--navy)}
.regels2{display:grid;grid-template-columns:1fr 1fr;gap:28px 40px}
.regels2 h3{font-size:17px;font-weight:700;margin-bottom:4px;color:var(--navy)}
.regels2 p{font-size:15px}
.regels2 .hl{grid-column:1 / -1;background:var(--soft);border-radius:var(--r);padding:20px 22px;display:flex;gap:14px;align-items:flex-start}
.regels2 .hl svg{flex:none;width:28px;height:28px}
.doc-cta{border-top:1px solid var(--line);padding-top:36px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.doc-cta h3{font-family:var(--disp);font-size:26px;font-weight:800;letter-spacing:-.02em}
.doc-cta p{font-size:16px}
@media (max-width:1060px){
  .doc-kop-in{grid-template-columns:minmax(0,1fr);gap:32px}
  .doc{grid-template-columns:minmax(0,1fr);gap:0;padding-top:48px}
  .toc{display:none}
  .doc-kop{padding:44px 32px}
}
@media (max-width:640px){
  .doc-kop{padding:36px 22px;border-radius:22px}
  .rk-in{grid-template-columns:1fr}
  .rk-in > div + div{border-left:0;border-top:1px solid var(--line)}
  .regels2{grid-template-columns:1fr}
  .tbl td,.tbl th{padding:14px}
  .st li{padding-left:52px}
}

/* ===== veiling (zakelijk) ===== */
.v-kop{background:linear-gradient(100deg,#c43d10 0%,#d4461a 42%,#e85422 75%);border-radius:var(--r-l);padding:48px var(--pad) 52px;position:relative;overflow:hidden;color:#fff}
.v-kop::after{content:"";position:absolute;width:560px;height:560px;right:-150px;top:-250px;background:#f06a3a;pointer-events:none;-webkit-mask:url(ring.svg) center/contain no-repeat;mask:url(ring.svg) center/contain no-repeat;transform:rotate(30deg)}
.v-kop > *{position:relative;z-index:1}
.v-kop .kruim{color:#ffd9c9;padding:0 0 18px}
.v-kop .kruim a:hover{color:#fff}
.v-kop h1{font-family:var(--disp);font-weight:800;font-size:clamp(44px,5.4vw,76px);letter-spacing:-.04em;line-height:1;color:#fff;overflow-wrap:anywhere}
.v-kop h1 span{color:#ffe9a8}
.v-kop .sub2{margin-top:14px;font-size:18px;color:#fff;max-width:30em}
.v-label{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 14px;border-radius:var(--pil);background:rgba(255,255,255,.16);color:#fff;font-size:14px;font-weight:700;margin-bottom:18px}
.v-live{width:8px;height:8px;border-radius:50%;background:#ffe9a8;box-shadow:0 0 0 0 rgba(255,233,168,.6);animation:live 1.8s infinite}
@keyframes live{70%{box-shadow:0 0 0 8px rgba(255,233,168,0)}100%{box-shadow:0 0 0 0 rgba(255,233,168,0)}}
.v-stand{background:#fff;color:var(--navy);border-radius:var(--r);box-shadow:var(--sh-2);padding:6px 24px}
.v-stand div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:16px 0}
.v-stand div + div{border-top:1px solid var(--line)}
.v-stand span{font-size:15px;color:var(--ink-2)}
.v-stand b{font-family:var(--disp);font-size:28px;font-weight:800;letter-spacing:-.02em}
.v-stand b.or{color:var(--or)}
.v-stand small{display:block;text-align:right;font-size:13px;font-weight:700;color:var(--or-d);min-height:0}
.v-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,400px);gap:56px;padding:64px 0 72px;align-items:start}
.tbl .wie{display:flex;align-items:center;gap:12px}
.tbl .wie .av{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-weight:700;font-size:13px;flex:none}
.tbl .wie b{display:inline;font-weight:700}
.tbl .wie i{color:var(--muted);margin-left:6px}
.tbl tr.jij td{background:#fff7f3}
.tbl tr.nieuw td{animation:flits 1.2s var(--ease)}
@keyframes flits{from{background:#ffe3d6}}
.tbl .bt-t{color:var(--muted);font-size:14px;font-variant-numeric:tabular-nums}
.bied2 h3{font-family:var(--disp);font-size:22px;font-weight:800;letter-spacing:-.02em}
.bied2 .min{font-size:14px;color:var(--muted);margin:2px 0 16px}
.bied2 .snel{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:20px}
.bied2 .snel button{height:48px;border-radius:var(--r-s);border:1.5px solid var(--line);font-weight:700;font-size:16px;color:var(--navy);background:#fff;transition:border-color .2s,background .2s}
.bied2 .snel button:hover{border-color:var(--or);background:#fff7f3}
.bied2 .snel button:disabled{opacity:.45;cursor:default}
.bied2 label{display:block;font-weight:700;font-size:14px;margin-bottom:8px}
.bied2 .rij2{display:flex;gap:8px}
.bied2 .eur{display:flex;align-items:center;flex:1;min-width:0;border:1.5px solid var(--line);border-radius:var(--r-s);padding-left:14px;font-weight:700;color:var(--muted)}
.bied2 .eur:focus-within{border-color:var(--navy)}
.bied2 .eur input{flex:1;min-width:0;border:0;outline:0;height:50px;padding:0 10px 0 6px;font-size:17px;font-weight:700;color:var(--navy)}
.bied2 .btn{height:52px}
.bied2 .klein2{font-size:13px;color:var(--muted);margin-top:14px;line-height:1.5}
.bied2 hr{border:0;border-top:1px solid var(--line);margin:22px 0}
@media (max-width:1060px){.v-body{grid-template-columns:minmax(0,1fr)}.v-kop{padding:44px 32px}}
@media (max-width:640px){.v-kop{padding:34px 22px;border-radius:22px}.tbl .bt-t{display:none}}
@media (prefers-reduced-motion:reduce){.v-live{animation:none}}
.v-body .tbl td{vertical-align:middle}

/* ===== binnenpagina's v3: zelfde onderdelen als de homepage ===== */
.h1-m{font-size:clamp(40px,4.3vw,62px)!important}
.hero-tekst{min-width:0}
#d-naam{overflow-wrap:anywhere;line-height:1.02}
.hero-knoppen{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px}
.btn-wit{background:#fff;color:var(--navy)}
.btn-wit:hover{background:#fff3ec}
.btn-lijn-w{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}
.btn-lijn-w:hover{background:rgba(255,255,255,.12)}
.hero-blok .kruim{color:#ffd9c9;padding:0 0 18px}
.hero-blok .kruim a:hover{color:#fff}
.k-rijen{margin:18px 0 20px;display:grid;gap:0}
.k-rijen div{display:flex;justify-content:space-between;align-items:center;padding:11px 0;font-size:15px;color:var(--ink-2)}
.k-rijen div + div{border-top:1px solid var(--line)}
.k-rijen b{color:var(--navy);font-size:16px}
.k-ideal{right:0;top:330px;padding:16px 18px;width:230px}
.k-ideal small{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--muted);font-weight:500}
.k-ideal b{display:block;font-family:var(--disp);font-size:30px;font-weight:800;letter-spacing:-.02em;margin:4px 0 10px}
.k-ideal .btn{width:100%;height:40px;font-size:14px}

/* rijen in de grijze bak voor stappen en biedingen */
.srij{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center;background:#fff;border-radius:var(--r);padding:18px 20px;border:1.5px solid transparent;transition:border-color .2s,box-shadow .2s}
.srij:hover{border-color:#ffc7b1;box-shadow:var(--sh)}
.srij .dn b{font-size:20px;white-space:normal}
.srij .dn small{font-size:15px;color:var(--ink-2);display:block;margin-top:2px;max-width:46em}
.srij .av{font-size:21px!important}
.srij .r{display:flex;align-items:center;gap:14px;justify-content:flex-end}
.srij .bedrag{font-family:var(--disp);font-weight:800;font-size:24px;letter-spacing:-.02em;min-width:84px;text-align:right}
.srij.jij{border-color:var(--or);background:#fffaf7}
.srij.nieuw{animation:flits 1.2s var(--ease)}
.lijst-kop2{margin-bottom:24px}

/* wat je betaalt */
.tegel .groot{font-family:var(--disp);font-weight:800;font-size:96px;line-height:.85;letter-spacing:-.05em;margin-top:auto;padding-top:28px}
.t-mint .groot{color:var(--mint-d)}
.mini{margin-top:auto;padding-top:24px;display:grid;gap:8px;max-width:520px}
.mini div{display:flex;justify-content:space-between;align-items:center;gap:12px;background:#fff;border-radius:var(--r-s);padding:12px 14px;font-weight:700;font-size:15px}
.mini div span{display:flex;align-items:center;gap:10px}
.mini .b{font-family:var(--disp);font-size:18px;font-weight:800}
.mini .w{color:var(--butter-d)}
.t-sky2{grid-column:span 12;background:var(--sky)}
.t-sky2 .mini{max-width:none;grid-template-columns:repeat(3,minmax(0,1fr))}

/* rekenkaart in het veilingblok */
.reken2 label{display:flex;justify-content:space-between;align-items:baseline;font-size:15px;color:var(--ink-2);margin:4px 0 10px}
.reken2 label b{font-family:var(--disp);font-size:26px;font-weight:800;color:var(--navy)}
.reken2 input{width:100%;accent-color:var(--or);margin-bottom:14px}
.reken2 .uitk{background:var(--butter);border-radius:var(--r-s);padding:14px 16px;margin-top:6px}
.reken2 .uitk b{display:block;font-family:var(--disp);font-size:22px;font-weight:800}
.reken2 .uitk span{font-size:14px;color:#5e4a12}

/* veiling-hero: biedkaart als productkaart */
.comp.vast{min-height:0;display:grid;gap:14px;align-content:center}
.comp.vast .kaart{position:relative;left:auto;right:auto;top:auto;bottom:auto}
.comp.vast .k-toast{margin-left:-8%;max-width:360px}
.bodkaart{padding:24px}
.bodkaart .hoog{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin:14px 0 4px}
.bodkaart .hoog small{display:block;font-size:13px;color:var(--muted)}
.bodkaart .hoog b{font-family:var(--disp);font-weight:800;font-size:46px;letter-spacing:-.035em;line-height:1}
.bodkaart .aftel{margin:16px 0}
.bodkaart .snel{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.bodkaart .snel button{height:46px;border-radius:var(--pil);background:var(--peach);color:var(--or-d);font-weight:700;font-size:16px;transition:background .2s}
.bodkaart .snel button:hover{background:#ffd3c0}
.bodkaart .snel button:disabled{opacity:.45;cursor:default}
.bodkaart .maxrij{display:flex;align-items:center;background:var(--soft);border-radius:var(--pil);padding:5px 5px 5px 18px}
.bodkaart .maxrij span{font-weight:700;color:var(--muted)}
.bodkaart .maxrij input{flex:1;min-width:0;border:0;outline:0;background:transparent;height:42px;padding:0 8px;font-size:16px;font-weight:700;color:var(--navy)}
.bodkaart .maxrij .btn{height:42px}
.bodkaart .stat{margin-top:12px;font-size:14px;font-weight:700;display:flex;gap:8px;align-items:center;min-height:22px}
.stat.win{color:var(--mint-d)}.stat.over{color:var(--or-d)}.stat.niks{color:var(--muted)}
@media (max-width:1060px){
  .comp.vast .k-toast{margin-left:0}
  .t-sky2 .mini{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .srij{grid-template-columns:minmax(0,1fr);gap:12px}
  .srij .r{justify-content:flex-start}
  .tegel .groot{font-size:76px}
  .bodkaart .hoog b{font-size:38px}
}
@media (max-width:640px){
  .hero-blok::before{top:auto;bottom:-360px;right:-300px}
  .comp{display:grid;gap:12px;min-height:0!important}
  .comp .kaart{position:relative;inset:auto!important;width:auto!important;max-width:none!important;margin:0!important}
}

/* ===== overige pagina's ===== */
.v-label2{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 14px;border-radius:var(--pil);background:rgba(255,255,255,.16);color:#fff;font-size:14px;font-weight:700;margin-bottom:16px;align-self:flex-start}
.reskaart{padding:24px}
.reskaart .wanneer{font-size:14px;color:var(--muted);margin-top:14px}
.reskaart .groot2{font-family:var(--disp);font-weight:800;font-size:34px;letter-spacing:-.03em;line-height:1.05}
.reskaart .aftel{margin:16px 0 18px}
.reskaart .btn{width:100%;height:52px;font-size:16px}
.reskaart .fijn2{text-align:center;font-size:13px;color:var(--muted);margin-top:10px}
.balken{margin-top:auto;padding-top:24px;display:flex;align-items:flex-end;gap:5px;height:150px}
.balken i{flex:1;border-radius:6px 6px 2px 2px;background:rgba(255,255,255,.85);min-height:6px}
.balken i.top{background:var(--sky-d)}
.balken-l{display:flex;justify-content:space-between;font-size:13px;color:var(--sky-d);font-weight:700;margin-top:8px}
.score-groot{display:flex;align-items:flex-end;gap:10px;margin-top:auto;padding-top:20px}
.score-groot b{font-family:var(--disp);font-weight:800;font-size:96px;line-height:.85;letter-spacing:-.05em;color:var(--mint-d)}
.score-groot span{font-weight:700;color:var(--mint-d);padding-bottom:8px}
.lijn3{margin-top:auto;padding-top:24px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.lijn3 div{background:#fff;border-radius:var(--r-s);padding:12px 14px}
.lijn3 small{display:block;font-size:12px;color:var(--muted)}
.lijn3 b{font-size:15px}
.sluit{font-variant-numeric:tabular-nums}

/* inloggen */
.login{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;border-radius:var(--r-l);overflow:hidden;min-height:620px;margin-top:8px}
.login-l{background:linear-gradient(160deg,#c43d10 0%,#d4461a 45%,#e85422 80%);color:#fff;padding:64px;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.login-l::after{content:"";position:absolute;width:520px;height:520px;right:-170px;bottom:-230px;background:#f06a3a;-webkit-mask:url(ring.svg) center/contain no-repeat;mask:url(ring.svg) center/contain no-repeat;transform:rotate(160deg)}
.login-l > *{position:relative;z-index:1}
.login-l h1{font-family:var(--disp);font-weight:800;font-size:clamp(40px,4vw,58px);letter-spacing:-.035em;line-height:1.02;color:#fff;margin-bottom:18px}
.login-l h1 span{color:#ffe9a8}
.login-l ul{list-style:none;display:grid;gap:12px;margin-top:28px;font-weight:700}
.login-l li{display:flex;gap:10px;align-items:center}
.login-l li i{color:#ffe9a8;font-size:20px}
.login-r{background:var(--soft);display:grid;place-items:center;padding:48px 32px}
.login-kaart{background:#fff;border-radius:var(--r);box-shadow:var(--sh-2);padding:36px;width:min(440px,100%)}
.login-kaart h2{font-size:30px;margin-bottom:6px}
.login-kaart p{color:var(--ink-2);font-size:15px}
.login-kaart label{display:block;font-weight:700;font-size:14px;margin:22px 0 8px}
.login-kaart input{width:100%;height:54px;border:1.5px solid var(--line);border-radius:var(--r-s);padding:0 16px;font-size:16px;outline:0}
.login-kaart input:focus{border-color:var(--navy)}
.login-kaart .btn{width:100%;height:54px;margin-top:16px;font-size:16px}
.login-kaart .of{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:13px;margin:22px 0 0}
.login-kaart .of::before,.login-kaart .of::after{content:"";flex:1;height:1px;background:var(--line)}
.klaar{text-align:center}
.klaar .ic{width:64px;height:64px;border-radius:20px;background:var(--mint);color:var(--mint-d);display:grid;place-items:center;font-size:32px;margin:0 auto 18px}

/* account */
.acc-kop{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:end}
.acc-kop h1{margin-bottom:8px}
.stats{display:grid;grid-template-columns:repeat(3,minmax(140px,1fr));gap:12px}
.stats div{background:#fff;color:var(--navy);border-radius:var(--r);padding:18px 20px;box-shadow:var(--sh)}
.stats small{display:block;font-size:13px;color:var(--muted)}
.stats b{font-family:var(--disp);font-size:34px;font-weight:800;letter-spacing:-.02em}
.paneel[hidden]{display:none}
.toevoeg{display:flex;gap:8px;margin-bottom:14px}
.toevoeg .f-zoek{flex:1}

/* juridische tekst */
.tekst{max-width:760px;padding:64px 0 24px}
.tekst .let{display:flex;gap:12px;background:var(--butter);border-radius:var(--r);padding:16px 18px;font-size:15px;color:#5e4a12;margin-bottom:40px}
.tekst .let i{font-size:22px;color:var(--butter-d);flex:none}
.tekst h2{font-size:26px;margin:40px 0 10px}
.tekst p,.tekst li{color:var(--ink-2);font-size:16px;line-height:1.65}
.tekst ul{padding-left:20px;margin:8px 0}
.tekst li{margin:4px 0}
.tekst .ph-plek{background:var(--peach);color:var(--or-d);border-radius:6px;padding:1px 6px;font-weight:700;font-size:14px}

@media (max-width:1060px){
  .login{grid-template-columns:minmax(0,1fr)}
  .login-l{padding:48px 32px}
  .acc-kop{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .lijn3,.stats{grid-template-columns:minmax(0,1fr)}
  .score-groot b{font-size:76px}
  .login-l{padding:36px 22px}
  .login-kaart{padding:26px 20px}
}

/* inloggen: op het raster en schermvullend */
.login{--pl:max(56px,calc((min(100vw,1680px) - 32px - 1192px) / 2));min-height:max(620px,calc(100dvh - 96px))}
.login-l{padding:64px 64px 64px var(--pl)}
.login-r{padding:48px var(--pl) 48px 48px;justify-items:end}
.login-kaart #fout:empty{display:none}
.login-kaart .slot-r{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin-top:14px}
@media (max-width:1060px){
  .login{min-height:0}
  .login-l{padding:48px 32px}
  .login-r{padding:40px 32px;justify-items:center}
}
@media (max-width:640px){
  .login-l{padding:36px 22px}
  .login-r{padding:28px 14px}
}

/* footer altijd onderaan, ook op korte pagina's */
body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
body > main{flex:1 0 auto}
body > header,body > footer{flex:none}

/* reserveer- en controlevenster */
#sv-dlg h3{font-family:var(--disp);font-weight:800;font-size:30px;letter-spacing:-.03em;line-height:1.08;margin-bottom:8px}
#sv-dlg h3 span{color:var(--muted)}
#sv-dlg .sv-tekst{color:var(--ink-2);font-size:15px;margin-bottom:16px}
#sv-dlg .sv-waarom{display:flex;gap:10px;background:var(--sky);color:#20406f;border-radius:var(--r-s);padding:12px 14px;font-size:14px;line-height:1.45;margin-bottom:18px}
#sv-dlg .sv-waarom i{font-size:19px;color:var(--sky-d);flex:none;margin-top:1px}
#sv-dlg .sv-fout{color:var(--or-d);font-weight:700;font-size:14px;margin:6px 0 0}
#sv-dlg .sv-fout:empty{display:none}
#sv-dlg .btn{width:100%;height:54px;font-size:16px;margin-top:14px}
#sv-dlg .dlg-f{margin:14px 0 4px}
#sv-dlg .sv-bank{text-align:center;padding:24px 0 10px}
#sv-dlg .sv-draai{display:block;width:46px;height:46px;border-radius:50%;border:4px solid var(--lilac);border-top-color:var(--lilac-d);margin:0 auto 18px;animation:draai .8s linear infinite}
@keyframes draai{to{transform:rotate(360deg)}}
#sv-dlg .sv-klaar{text-align:center;padding-top:4px}
#sv-dlg .sv-klaar .ic{width:64px;height:64px;border-radius:20px;background:var(--mint);color:var(--mint-d);display:grid;place-items:center;font-size:32px;margin:0 auto 16px}
@media (prefers-reduced-motion:reduce){#sv-dlg .sv-draai{animation:none}}

/* logo */
.logo-img{height:34px;width:auto;display:block}
footer .logo-img{height:32px}
@media (max-width:640px){.logo-img{height:30px}}

/* ===== filters en lijst op mobiel ===== */
.chips-rij{display:contents}
@media (max-width:760px){
  .lijst{padding-top:48px}
  .lijst-kop{flex-direction:column;align-items:stretch;gap:16px;margin-bottom:14px}
  .tabs{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;border-radius:var(--pil);padding:4px}
  .tabs::-webkit-scrollbar{display:none}
  .tabs button{flex:none;height:38px;padding:0 14px;font-size:14px;scroll-snap-align:start}
  .balk{display:block;margin-bottom:14px}
  .f-zoek{width:100%;min-width:0;height:48px;margin-bottom:10px}
  .f-zoek input{font-size:16px}               /* geen inzoomen op iPhone */
  .chips-rij{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin:0 -14px;padding:2px 14px 4px;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 28px),transparent)}
  .chips-rij::-webkit-scrollbar{display:none}
  .chip{flex:none;height:40px;padding:0 14px;font-size:14px}
  .sort{flex:none;margin:0;font-size:0;gap:0}
  .sort select{height:40px;font-size:14px;padding:0 34px 0 14px;appearance:none;-webkit-appearance:none;
    background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f1b3d' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 12px center/14px}
  .tabel{padding:6px;border-radius:22px}
  .rij{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"dn sc" "wa dr" "hi hi" "bt bt";row-gap:10px;column-gap:12px;padding:14px}
  .rij .dn .av{width:38px;height:38px;font-size:17px}
  .rij .dn b{font-size:19px}
  .rij .wann b{display:inline;font-size:14px}
  .rij .wann small{display:inline;font-size:13px;margin-left:4px}
  .rij .dr{justify-self:end;align-self:center}
  .rij .hist{display:flex;gap:6px;align-items:baseline;flex-wrap:wrap;padding-top:8px;border-top:1px solid var(--line)}
  .rij .hist b,.rij .hist small{font-size:13px;font-weight:500;color:var(--ink-2)}
  .rij .hist b::after{content:"·";margin-left:6px;color:var(--muted)}
  .rij .score{width:44px;height:44px;font-size:16px}
  .rij .bt .btn{height:44px}
}
@media (max-width:760px){
  .lijst-kop > *,.lijst .wrap > *{min-width:0}
  .tabs{max-width:100%}
  .lijst h2{font-size:32px}
}
#lijst{scroll-margin-top:76px}
@media (max-width:760px){
  .rij .sc{justify-self:end;align-self:start}
  .rij .dn{align-self:start}
}
.ai-uitleg{display:block;margin-top:3px;font-size:13px;color:var(--ink-2);line-height:1.35;max-width:46ch}
@media (max-width:760px){.ai-uitleg{max-width:none}}