:root{
color-scheme:light;
--paper:#FFFFFF;--surface:#FFFFFF;--surface-2:#F2F6F3;--ink:#12201A;--ink-2:#44554D;--ink-3:#55655D;
--line:#D9E2DC;--line-2:#EAF0EC;--n-300:#B3C2BA;--brand:#145A42;--brand-2:#1A6C50;--brand-deep:#0F3A2B;--brand-tint:#DDEEE6;
--on-brand:#FFFFFF;--accent:#A5521A;--accent-2:#B85D20;--accent-tint:#F9E8DA;--on-accent:#FFFFFF;
--deep:#0F3A2B;--deep-2:#145A42;--on-deep:#DCEAE4;--car:#145A42;--plate:#FFD400;
--good:#166B4E;--good-bg:#E3F0EA;--alert:#B03A1E;--alert-bg:#FBE7E1;
--shadow-s:0 1px 2px rgba(18,32,26,.06);--shadow:0 2px 6px rgba(18,32,26,.05), 0 18px 40px -24px rgba(18,32,26,.35);
--f-d:"Inter",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;--f-b:"Inter",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
--f-m:"Inter",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;--f-plate:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;--maxw:1180px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-b);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;font-feature-settings:"cv05","ss01"}
h1,h2,h3,h4{font-family:var(--f-d);margin:0;line-height:1.15;letter-spacing:-.022em;text-wrap:balance;font-weight:700}
p{margin:0}a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
input,select,textarea{font:inherit}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.m{font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent)}
:focus-visible{outline:2px solid var(--brand-deep);outline-offset:2px;border-radius:4px}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.top{position:sticky;top:0;z-index:40;position:sticky;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.top-in{max-width:var(--maxw);margin:0 auto;padding:10px 20px;display:flex;align-items:center;gap:clamp(12px,2.4vw,26px);min-height:62px}
.logo{display:inline-flex;align-items:center;line-height:0;flex:0 1 auto;min-width:0}
.logo img{height:clamp(24px,3vw,32px);width:auto;max-width:min(60vw,280px);object-fit:contain}
@media (max-width:360px){.logo img{max-width:47vw}}
.logo .dk{display:none}
.nav{display:flex;gap:4px;margin-left:10px;flex-wrap:nowrap;align-items:center}
.nav a{font-size:15px;font-weight:500;white-space:nowrap;color:var(--ink-2);text-decoration:none;padding:9px 13px;border-radius:10px;transition:background .14s,color .14s}
.nav a:hover{color:var(--ink);background:var(--surface-2)}
.top-r{margin-left:auto;display:flex;align-items:center;gap:10px;flex:0 0 auto}
.top-r::before{content:"";width:1px;height:26px;background:var(--line);margin-right:2px}
#loginBtn{border:0;background:none;padding:0 6px;min-height:40px;font-weight:600;color:var(--ink-2);box-shadow:none}
#loginBtn:hover{background:none;color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:1px solid var(--line);background:var(--surface);
border-radius:14px;padding:0 22px;min-height:48px;font-size:16px;font-weight:600;text-decoration:none;letter-spacing:-.01em;
transition:background .16s,border-color .16s,transform .1s,box-shadow .16s,color .16s;box-shadow:0 1px 0 rgba(16,16,50,.03)}
.btn:hover{border-color:var(--ink-3);background:var(--surface-2)}
.btn:active{transform:translateY(1px);box-shadow:none}
.btn-b{background:var(--accent);border-color:transparent;color:var(--on-accent);box-shadow:0 6px 16px -8px rgba(188,98,32,.65)}
.btn-b:hover{background:var(--accent-2);border-color:transparent;box-shadow:0 10px 22px -10px rgba(188,98,32,.7)}
.btn-d{background:var(--deep);color:var(--on-deep);border-color:transparent;box-shadow:0 6px 16px -10px rgba(15,58,43,.8)}
.btn-d:hover{background:var(--deep-2);border-color:transparent}
.btn-t{background:transparent;border-color:transparent}
.btn-t:hover{background:var(--surface-2);border-color:var(--line)}
.btn-s{padding:0 16px;min-height:40px;font-size:15px;border-radius:11px}
.btn[disabled]{opacity:.5;pointer-events:none}
.iconbtn{position:relative;width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center}
.iconbtn:hover{border-color:var(--brand)}
.badge{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;border-radius:999px;background:var(--accent);color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center;padding:0 6px}
.chipav{width:38px;height:38px;border-radius:50%;background:var(--deep);color:var(--on-deep);font-size:13px;font-weight:700;display:grid;place-items:center;border:0}
.menu{position:absolute;right:22px;top:64px;z-index:50;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:8px;min-width:230px}
.menu b{display:block;padding:10px 14px 4px;font-size:14.5px}
.menu small{display:block;padding:0 14px 10px;color:var(--ink-3);font-size:12.5px;border-bottom:1px solid var(--line-2);margin-bottom:6px}
.menu button{display:flex;width:100%;text-align:left;padding:10px 14px;border-radius:10px;font-size:14.5px;gap:10px}
.menu button:hover{background:var(--surface-2)}
.hero{padding:52px 0 6px}
.hero-in{display:grid;grid-template-columns:1.04fr .96fr;gap:54px;align-items:center}
.hero h1{font-size:clamp(36px,5vw,60px);font-weight:800;line-height:1.03;letter-spacing:-.038em;margin-top:16px}
.hero h1 mark{background:none;color:var(--accent)}
.hero .lead{margin-top:20px;font-size:18.5px;line-height:1.65;color:var(--ink-2);max-width:46ch}
.under{display:flex;gap:28px;margin-top:26px;flex-wrap:wrap}
.und b{display:block;font-size:24px;font-weight:800;letter-spacing:-.02em}
.und span{font-size:14px;color:var(--ink-3)}
.bar{--pct:40%}
.bar-track{position:relative;height:32px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);overflow:hidden}
.bar-fill{position:absolute;right:0;top:0;bottom:0;width:var(--pct);background:var(--brand);display:flex;align-items:center;justify-content:center;transition:width .8s cubic-bezier(.2,.8,.2,1)}
.bar-fill span{font-size:13.5px;font-weight:600;color:var(--on-brand);white-space:nowrap;padding:0 10px}
.bar-legend{display:flex;justify-content:space-between;margin-top:7px;font-size:13px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.bar-sm .bar-track{height:22px}.bar-sm .bar-fill span{font-size:10.5px}.bar-sm .bar-legend{font-size:10px;margin-top:5px}
.showcase{background:var(--surface);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);overflow:hidden}
.sc-top{padding:18px 20px 0;display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.showcase h3{font-size:21px;font-weight:600}
.sc-sub{font-size:13.5px;color:var(--ink-3);margin-top:3px}
.sc-art{padding:6px 20px 0}
.sc-body{padding:16px 20px 20px;display:flex;flex-direction:column;gap:15px}
.sc-row{display:flex;align-items:flex-end;gap:14px;border-top:1px solid var(--line-2);padding-top:15px}
.big-price{font-weight:800;font-size:34px;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.big-price small{font-family:var(--f-b);font-size:13px;font-weight:400;color:var(--ink-3);letter-spacing:0}
.search-wrap{padding:28px 0 0}
.search{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:13px;display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr auto;gap:10px;align-items:end;box-shadow:var(--shadow-s)}
.f label{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin:0 0 6px 3px;letter-spacing:0}
.f input,.f select,.f textarea{width:100%;background:var(--surface-2);border:1px solid var(--line);color:var(--ink);border-radius:11px;padding:11px 13px;font-size:14.5px}
.f textarea{min-height:88px;resize:vertical;line-height:1.5}
.f input:focus,.f select:focus,.f textarea:focus{outline:2px solid var(--brand);border-color:transparent}
.f.bad input,.f.bad select{border-color:var(--alert);background:var(--alert-bg)}
.f .err{display:none;font-size:12px;color:var(--alert);margin:5px 0 0 3px}
.f.bad .err{display:block}
.search .btn{min-height:48px}
.trust{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:16px;font-size:14.5px;color:var(--ink-2)}
.trust span{display:inline-flex;align-items:center;gap:7px}
.trust i{width:6px;height:6px;border-radius:50%;background:var(--accent);display:block}
.section{padding:clamp(40px,6vw,66px) 0}
#aanbod{background:var(--surface-2);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.sec-head{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;margin-bottom:18px}
.sec-head h2{font-size:clamp(25px,3vw,34px);font-weight:800;margin-top:10px}
.sec-head .right{margin-left:auto;display:flex;align-items:center;gap:14px}
.sec-head .cnt{font-size:14.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.sortsel{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:9px 14px;font-size:13.5px;color:var(--ink-2)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.chip{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:9px 17px;font-size:14.5px;font-weight:500;color:var(--ink-2)}
.chip:hover{border-color:var(--brand)}
.chip[aria-pressed="true"]{background:var(--deep);color:var(--on-deep);border-color:transparent}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:20px}
.card{position:relative;display:flex;flex-direction:column;text-align:left;width:100%;background:var(--surface);
border:1px solid var(--line);border-radius:20px;box-shadow:0 1px 2px rgba(21,22,46,.04);overflow:hidden;transition:border-color .18s,box-shadow .18s,transform .18s}
.card:hover{border-color:var(--blue,var(--brand));box-shadow:var(--shadow);transform:translateY(-3px)}
.card:hover .foto{transform:scale(1.03)}
.card.own{border-color:var(--brand)}
.art{position:relative;aspect-ratio:4/3;background:var(--surface-2);border-bottom:1px solid var(--line-2);display:grid;place-items:center;padding:14px;overflow:hidden}
.art svg{width:100%;max-width:250px}
.plate{display:inline-block;background:var(--surface-2);color:var(--ink-3);border:1px solid var(--line);border-radius:6px;
font-family:var(--f-plate);font-weight:500;font-size:12px;letter-spacing:.05em;padding:3px 9px}
.flagline{position:absolute;right:15px;top:13px;font-size:12px;font-weight:700;letter-spacing:.02em;padding:5px 12px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--ink-2)}
.flagline.pos{background:var(--good-bg);color:var(--good);border-color:transparent}
.flagline.neg{background:var(--alert-bg);color:var(--alert);border-color:transparent}
.flagline.own{background:var(--accent);color:var(--on-accent);border-color:transparent}
.fav{position:absolute;right:14px;bottom:12px;width:36px;height:36px;border-radius:50%;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;z-index:2}
.fav:hover{border-color:var(--brand)}
.fav svg{width:18px;height:18px;fill:none;stroke:var(--ink-2);stroke-width:2}
.fav[aria-pressed="true"] svg{fill:var(--accent);stroke:var(--accent)}
.cb{padding:16px 18px 18px;display:flex;flex-direction:column;gap:14px;flex:1}
.card h3{font-size:19.5px;font-weight:700;letter-spacing:-.02em}
.card .sub{font-size:14.5px;color:var(--ink-3);margin-top:4px}
.meta{display:flex;gap:14px;font-size:12.5px;color:var(--ink-2);flex-wrap:wrap}
.meta b{font-weight:700;color:var(--ink)}
.cfoot{display:flex;align-items:baseline;gap:10px;margin-top:auto;border-top:1px solid var(--line-2);padding-top:14px}
.price{font-weight:800;font-size:26px;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.price small{font-size:14px;font-weight:500;color:var(--ink-3);letter-spacing:0}
.cfoot .city{margin-left:auto;font-size:14.5px;color:var(--ink-2)}
.empty{grid-column:1/-1;border:1px dashed var(--line);border-radius:16px;padding:30px;text-align:center;color:var(--ink-2);font-size:15px;background:var(--surface)}
.empty b{display:block;color:var(--ink);font-size:17px;margin-bottom:6px}
.band{background:var(--deep);color:var(--on-deep)}
.band .eyebrow{color:#FF8452}.band h2{color:var(--on-deep)}
.vid-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center;margin-top:26px}
.player{position:relative;border-radius:18px;overflow:hidden;border:1px solid rgba(233,232,250,.18);background:#000;aspect-ratio:16/9}
.player video{width:100%;height:100%;display:block;object-fit:cover}
.playbtn{position:absolute;inset:0;display:grid;place-items:center;background:rgba(15,58,43,.3)}
.playbtn:hover{background:rgba(15,58,43,.14)}
.playbtn span{width:66px;height:66px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;box-shadow:0 10px 30px -8px rgba(0,0,0,.6)}
.steps{display:flex;flex-direction:column;gap:2px}
.step{padding:14px 0;border-bottom:1px solid rgba(233,232,250,.16);display:flex;gap:14px}
.step:last-child{border-bottom:0}
.step .n{font-size:13px;font-weight:700;color:var(--accent);padding-top:2px}
.step h3{font-size:16.5px;color:var(--on-deep);margin-bottom:3px;font-weight:600}
.step p{font-size:14px;color:rgba(233,232,250,.72);line-height:1.5}
.note-d{margin-top:24px;font-size:13.5px;color:rgba(233,232,250,.62);border-left:2px solid var(--accent);padding-left:14px}
.two{display:grid;grid-template-columns:1.05fr .95fr;gap:56px}
details.faq{border-bottom:1px solid var(--line);padding:15px 0}
details.faq summary{cursor:pointer;font-weight:600;font-size:17px;list-style:none;display:flex;gap:12px}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::before{content:"+";color:var(--accent);font-weight:700;font-size:19px;line-height:1.1}
details.faq[open] summary::before{content:"–"}
details.faq p{margin-top:10px;padding-left:24px;font-size:16px;color:var(--ink-2)}
.cats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
.cat{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:11px 14px;text-decoration:none;font-size:14px}
.cat:hover{border-color:var(--brand)}
.cat span{margin-left:auto;font-size:13px;font-weight:600;color:var(--ink-3);font-variant-numeric:tabular-nums}
.callout{margin-top:22px;background:var(--brand-tint);border-radius:14px;padding:17px 19px;font-size:14.5px;color:var(--ink-2)}
.callout b{color:var(--ink)}
.back{font-size:14px;color:var(--ink-2);display:inline-flex;gap:8px;align-items:center;margin:24px 0 16px}
.back:hover{color:var(--ink)}
.dgrid{display:grid;grid-template-columns:1.5fr 1fr;gap:40px;align-items:start;padding-bottom:64px}
.dart{aspect-ratio:16/10;border:1px solid var(--line);border-radius:18px;background:var(--surface-2);position:relative;display:grid;place-items:center;padding:18px;overflow:hidden}
.dart svg{width:100%;max-width:520px}
.detail h1{font-size:clamp(27px,3.4vw,40px);font-weight:700;letter-spacing:-.03em;margin-top:22px}
.dsub{color:var(--ink-2);margin-top:8px;font-size:15.5px}
.block{margin-top:28px}
.block h4{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:700;margin-bottom:12px}
.tbl{width:100%;border-collapse:collapse;font-size:14.5px}
.tbl th,.tbl td{text-align:left;padding:11px 6px;border-bottom:1px solid var(--line-2);vertical-align:top}
.tbl th{font-weight:400;color:var(--ink-2);width:46%;font-size:15.5px}
.tbl td{font-variant-numeric:tabular-nums;font-weight:600}
.tbl td.txt{font-weight:400}
.quote{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px 20px;font-size:15px;color:var(--ink-2);line-height:1.6;white-space:pre-wrap}
.check{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:14.5px;color:var(--ink-2)}
.check li{display:flex;gap:11px}
.check li::before{content:"";flex:0 0 17px;height:17px;margin-top:2px;border:1.5px solid var(--brand);border-radius:5px}
.side{position:sticky;top:82px;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:24px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:2px}
.side .p{font-size:38px;font-weight:800;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.side .p small{font-family:var(--f-b);font-size:13.5px;font-weight:400;color:var(--ink-3);letter-spacing:0}
.side hr{border:0;border-top:1px solid var(--line-2);margin:18px 0}
.kv{display:flex;justify-content:space-between;gap:12px;font-size:14px;padding:5px 0;color:var(--ink-2)}
.kv b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.side .btn{width:100%;margin-top:8px}
.seller{display:flex;gap:12px;align-items:center}
.seller .av{width:40px;height:40px;border-radius:50%;background:var(--brand);color:var(--on-brand);display:grid;place-items:center;font-weight:700;font-size:14px}
.seller b{font-size:14.5px;display:block}
.seller span{font-size:12.5px;color:var(--ink-3)}
.fineprint{font-size:12.5px;color:var(--ink-3);line-height:1.5;margin-top:14px}
/* account */
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin:8px 0 26px;flex-wrap:wrap}
.tab{padding:12px 16px;font-size:14.5px;color:var(--ink-2);border-bottom:2px solid transparent;margin-bottom:-1px;display:flex;gap:8px;align-items:center}
.tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--brand);font-weight:600}
.tab .pip{background:var(--brand);color:var(--on-brand);border-radius:999px;font-size:12px;font-weight:700;padding:2px 8px}
.row{display:flex;align-items:center;gap:16px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 16px;width:100%;text-align:left}
.row:hover{border-color:var(--brand)}
.row .thumb{width:104px;height:64px;border-radius:10px;background:var(--surface-2);display:grid;place-items:center;flex:0 0 auto;padding:0 8px}
.row .g{min-width:0;flex:1}
.row b{display:block;font-size:15.5px}
.row small{display:block;color:var(--ink-3);font-size:13px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .r{margin-left:auto;text-align:right;font-size:13px;color:var(--ink-3);flex:0 0 auto}
@media (max-width:520px){.rows .row{flex-wrap:wrap;gap:10px 12px}.rows .row .g{flex:1 1 calc(100% - 130px)}.rows .row .r{margin-left:0;text-align:left;flex:1 1 auto}}
.rows{display:flex;flex-direction:column;gap:10px}
.unread{background:var(--brand);color:var(--on-brand);border-radius:999px;font-size:12px;font-weight:700;padding:3px 9px}
.drawer{position:fixed;inset:0;z-index:60;display:none}
.drawer[data-open="true"]{display:block}
.scrim{position:absolute;inset:0;background:rgba(8,4,40,.5)}
.panel{position:absolute;right:0;top:0;bottom:0;width:min(430px,100%);background:var(--surface);border-left:1px solid var(--line);display:flex;flex-direction:column}
.ph{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px}
.ph .av{width:38px;height:38px;border-radius:50%;background:var(--brand);color:var(--on-brand);display:grid;place-items:center;font-weight:700;font-size:13.5px;flex:0 0 auto}
.ph b{font-size:15px;display:block}
.ph em{font-style:normal;font-size:12.5px;color:var(--ink-3)}
.ph .x{margin-left:auto;font-size:19px;color:var(--ink-3)}
.msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--surface-2)}
.msg{max-width:82%;padding:10px 14px;border-radius:16px;font-size:14.5px;line-height:1.45;white-space:pre-wrap;word-wrap:break-word}
.msg.them{background:var(--surface);border:1px solid var(--line);border-bottom-left-radius:5px}
.msg.me{background:var(--brand);color:var(--on-brand);align-self:flex-end;border-bottom-right-radius:5px}
.msg time{display:block;font-size:12px;opacity:.65;margin-top:4px}
.sys{align-self:center;text-align:center;max-width:94%;font-size:12.5px;color:var(--ink-2);background:var(--surface);border:1px dashed var(--line);border-radius:12px;padding:9px 13px}
.typing{align-self:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:12px 16px;display:flex;gap:5px}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--ink-3);display:block;animation:bl 1.1s infinite}
.typing i:nth-child(2){animation-delay:.18s}.typing i:nth-child(3){animation-delay:.36s}
@keyframes bl{0%,60%,100%{opacity:.25}30%{opacity:1}}
.quick{display:flex;gap:6px;flex-wrap:wrap;padding:10px 12px 0}
.quick button{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 12px;font-size:12.5px;color:var(--ink-2)}
.quick button:hover{border-color:var(--brand)}
.composer{padding:12px;display:flex;gap:8px;border-top:1px solid var(--line);margin-top:10px}
.composer input{flex:1;background:var(--surface-2);border:1px solid var(--line);color:var(--ink);border-radius:999px;padding:11px 15px;font-size:14.5px}
.modal{position:fixed;inset:0;z-index:70;display:none;place-items:center;padding:20px}
.modal[data-open="true"]{display:grid}
.sheet{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:20px;width:min(450px,100%);padding:28px;max-height:88vh;overflow-y:auto;box-shadow:0 40px 80px -40px rgba(0,0,0,.55)}
.cm-nee{display:block;margin:12px auto 0;padding:8px 12px;font-size:14px;color:var(--ink-3);text-decoration:underline;text-underline-offset:3px;min-height:44px}
.cm-ok{margin:6px 0 2px;padding:6px 28px 6px 0;font-size:17px;line-height:1.5;font-weight:600;color:var(--ink)}
.code-sheet.afscheid>*:not(.cm-ok):not(.x){display:none}
.code-sheet.afscheid .cm-ok{display:block}
.code-sheet.afscheid{padding:26px 28px}
.sec-nieuws.puls{animation:nbPuls 1.9s ease-out 1}
@keyframes nbPuls{0%{box-shadow:0 0 0 0 rgba(224,138,74,.0)}20%{box-shadow:0 0 0 6px rgba(224,138,74,.55)}100%{box-shadow:0 0 0 22px rgba(224,138,74,0)}}
@media (prefers-reduced-motion:reduce){.sec-nieuws.puls{animation:none}}
.code-sheet h2{font-size:24px;line-height:1.25}
.sheet.wide{width:min(680px,100%)}
.sheet h2{font-size:25px;font-weight:600;margin-top:8px}
.sheet .x{position:absolute;right:16px;top:14px;font-size:19px;color:var(--ink-3)}
.sheet .small{font-size:14px;color:var(--ink-2);margin-top:10px}
.social{display:flex;flex-direction:column;gap:9px;margin-top:20px}
.social button{width:100%;border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:12px 14px;font-weight:600;font-size:14.5px;display:flex;align-items:center;justify-content:center;gap:10px}
.social button:hover{border-color:var(--ink-3)}
.social .apple{background:#15162E;color:#fff;border-color:#15162E}
.social .apple:hover{background:#262845;border-color:#262845}
.or{display:flex;align-items:center;gap:12px;color:var(--ink-3);font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin:18px 0}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.frow.one{grid-template-columns:1fr}
.frow.three{grid-template-columns:1fr 1fr 1fr}
.legal{font-size:12px;color:var(--ink-3);margin-top:15px;line-height:1.5}
.steps-mini{display:flex;gap:6px;margin:18px 0 4px}
.steps-mini i{height:4px;border-radius:2px;background:var(--line);flex:1}
.steps-mini i.on{background:var(--brand)}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);z-index:90;background:var(--deep);color:var(--on-deep);border-radius:999px;padding:13px 24px;font-size:14.5px;box-shadow:0 20px 50px -20px rgba(0,0,0,.6);opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;max-width:90vw;text-align:center}
.toast[data-show="true"]{opacity:1;transform:translateX(-50%) translateY(0)}
.foot{border-top:1px solid var(--line);background:var(--surface);padding:40px 0 28px}
.fgrid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:30px}.fgrid>*{min-width:0}.fgrid a{overflow-wrap:anywhere}
.foot h4{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:700;margin-bottom:12px}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.foot a{text-decoration:none;color:var(--ink-2);font-size:14px}
.foot a:hover{color:var(--ink)}
.foot .logo img{height:clamp(20px,3vw,26px)}
.fine{margin-top:28px;padding-top:16px;border-top:1px solid var(--line-2);font-size:12.5px;color:var(--ink-3);display:flex;gap:18px;flex-wrap:wrap}
/* installeerbare app: onderbalk, alleen in de geïnstalleerde weergave */
.appbar{position:fixed;left:0;right:0;bottom:0;z-index:55;display:flex;background:var(--surface);
border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom));box-shadow:0 -8px 24px -18px rgba(18,32,26,.5)}
.appbar button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 2px;border-radius:12px;position:relative;color:var(--ink-3);font-size:11px;font-weight:600}
.appbar button:hover{color:var(--ink)}
.appbar svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.appbar .mid{color:var(--accent)}
.appbar .dot{position:absolute;top:5px;right:calc(50% - 16px);width:8px;height:8px;border-radius:50%;background:var(--accent)}
body.hasbar{padding-bottom:78px}
body.hasbar .toast{bottom:96px}
@media (max-width:1180px){ .nav a:nth-child(5){display:none} }
@media (max-width:980px){ .top-r #loginBtn,.top-r #installBtn,.top-r .btn-b{display:none} }
@media (max-width:700px){ .top-in{padding:10px 14px;min-height:58px} }
@media (max-width:980px){
.hero-in,.two,.dgrid,.vid-grid{grid-template-columns:1fr;gap:32px}
.nav{display:none}.side{position:static}
.search{grid-template-columns:1fr 1fr}.search .btn{grid-column:1/-1}
}
.fotoband{position:relative;min-height:330px;display:grid;align-items:center;overflow:hidden;background:#05013A}
.fotoband img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.fotoband .fb-in{position:relative;padding:56px 0}
.fotoband h2{color:#fff;font-size:clamp(26px,3.4vw,42px);max-width:16ch;letter-spacing:-.03em}
.fotoband p{color:rgba(255,255,255,.82);margin-top:16px;max-width:44ch;font-size:16.5px}
.fotoband .fb-stats{display:flex;gap:34px;margin-top:26px;flex-wrap:wrap}
.fotoband .fb-stats b{display:block;font-size:28px;font-weight:800;color:#fff;letter-spacing:-.02em}
.fotoband .fb-stats span{font-size:13px;color:rgba(255,255,255,.7)}
/* ---- menu voor kleine schermen ---- */
.burger{display:none;width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:var(--surface);place-items:center}
.burger svg{width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round}
.burger:hover{border-color:var(--accent)}
.burger[aria-expanded="true"]{background:var(--ink);border-color:var(--ink)}
.burger[aria-expanded="true"] svg{stroke:var(--paper)}
.mobmenu{position:absolute;left:0;right:0;top:100%;z-index:45;background:var(--surface);border-bottom:1px solid var(--line);
box-shadow:var(--shadow);padding:12px 18px 20px;display:flex;flex-direction:column;gap:2px}
.mobmenu a,.mobmenu button{display:block;width:100%;text-align:left;padding:15px 8px;font-size:17px;font-weight:600;
color:var(--ink);text-decoration:none;border-radius:12px}
.mobmenu a:hover,.mobmenu button:hover{background:var(--surface-2)}
.mobmenu hr{border:0;border-top:1px solid var(--line-2);margin:8px 0}
.mobmenu button#mobLogin,.mobmenu button:first-of-type{color:var(--accent)}
@media (max-width:980px){ .burger{display:grid} }
@media (max-width:430px){ .top-r{gap:6px} .top-r::before{display:none} .iconbtn,.burger{width:38px;height:38px} .chipav{width:36px;height:36px} }
.gal{display:flex;gap:10px;margin-top:12px;overflow-x:auto;padding-bottom:4px}
.gal button{flex:0 0 92px;height:66px;border-radius:12px;overflow:hidden;border:2px solid var(--line);background:var(--surface-2)}
.gal button[aria-current="true"]{border-color:var(--accent)}
.gal img{width:100%;height:100%;object-fit:contain;background:var(--surface-2)}
.dacties{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.dacties button{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:9px 15px;font-size:15px;font-weight:600;color:var(--ink-2);display:inline-flex;gap:8px;align-items:center;min-height:42px}
.dacties button:hover{border-color:var(--accent);color:var(--ink)}
.dacties svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.online{font-size:14.5px;color:var(--ink-3);text-align:center;margin-top:12px}
.meldkeuze{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.meldkeuze label{display:flex;gap:12px;align-items:center;border:1.5px solid var(--line);border-radius:12px;padding:14px 16px;cursor:pointer;font-size:16px}
.meldkeuze label:hover{border-color:var(--accent)}
.meldkeuze input{accent-color:var(--accent);width:18px;height:18px}
/* ---- beheer (achterkant) ---- */
.bh-kop{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.bh-kop h1,.bh-kop .h1{font-size:32px;font-weight:800}
.bh-kop .env{background:var(--warm);color:var(--accent);border-radius:999px;padding:5px 13px;font-size:13px;font-weight:700}
.bh-stats{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin:22px 0 26px}
.bh-stat{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px}
.bh-stat b{display:block;font-size:26px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.bh-stat span{font-size:12.5px;color:var(--ink-3);display:block;margin-top:2px;line-height:1.35}
.bh-stat.let b{color:var(--accent)}
.bh-tabel{width:100%;border-collapse:collapse;font-size:14.5px;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.bh-tabel th,.bh-tabel td{text-align:left;padding:11px 13px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.bh-tabel th{background:var(--surface-2);font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3)}
.bh-tabel tr:last-child td{border-bottom:0}
.bh-tabel td.num{font-variant-numeric:tabular-nums;text-align:right}
.bh-tag{display:inline-block;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:700}
.bh-tag.actief{background:var(--good-bg);color:var(--good)}
.bh-tag.boost{background:var(--warm);color:var(--accent)}
.bh-tag.verborgen{background:var(--surface-2);color:var(--ink-3)}
.bh-tag.open{background:var(--warm);color:var(--accent)}
.bh-tag.klaar{background:var(--good-bg);color:var(--good)}
.bh-knop{border:1px solid var(--line);background:var(--surface);border-radius:9px;padding:6px 11px;font-size:13.5px;font-weight:600;color:var(--ink-2)}
.bh-knop:hover{border-color:var(--accent);color:var(--ink)}
.bh-leeg{background:var(--surface);border:1px dashed var(--line);border-radius:14px;padding:26px;text-align:center;color:var(--ink-3)}
.bh-uitleg{background:var(--tint);border-radius:14px;padding:16px 18px;font-size:15px;color:var(--ink-2);margin-top:22px}
.bh-uitleg b{color:var(--ink)}
@media (max-width:980px){.bh-stats{grid-template-columns:1fr 1fr 1fr}}
@media (max-width:600px){.bh-stats{grid-template-columns:1fr 1fr}.bh-tabel th:nth-child(4),.bh-tabel td:nth-child(4){display:none}}
/* ---- particulier of zakelijk ---- */
.segment{display:flex;gap:8px;background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:6px;margin-bottom:20px;max-width:440px}
.segment button{flex:1;border-radius:10px;padding:11px 12px;font-size:15.5px;font-weight:600;color:var(--ink-2)}
.segment button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(21,22,46,.12)}
.segment button:hover{color:var(--ink)}
.keuze{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.keuze button{border:2px solid var(--line);border-radius:16px;padding:18px 18px;text-align:left;background:var(--surface)}
.keuze button:hover{border-color:var(--accent)}
.keuze button[aria-pressed="true"]{border-color:var(--accent);background:var(--warm)}
.keuze b{display:block;font-size:17px;font-weight:700}
.keuze span{display:block;font-size:14.5px;color:var(--ink-2);margin-top:5px;line-height:1.45}
.zakelijkveld{display:none}
body.plaatszak .zakelijkveld{display:block}
.btwnoot{display:none;font-size:13px;color:var(--ink-3);margin-top:6px}
body.plaatszak .btwnoot{display:block}
@media (max-width:600px){.keuze{grid-template-columns:1fr}}
/* ---- rekentool afkoopsom ---- */
.rekentool{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:26px;box-shadow:var(--shadow)}
.rekentool h3{font-size:21px;font-weight:800}
.rekentool .rij{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.rekentool .uit{margin-top:18px;border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.rekentool .uit div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:14px 16px;font-size:16px}
.rekentool .uit .stop{background:var(--warm);color:var(--ink-2)}
.rekentool .uit .over{background:var(--good-bg);color:var(--ink-2)}
.rekentool .uit b{font-size:23px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.rekentool .uit .stop b{color:var(--accent)}
.rekentool .uit .over b{color:var(--good)}
.rekentool .besp{background:var(--deep);color:#fff;padding:16px;text-align:center;font-size:16px}
.rekentool .besp b{display:block;font-size:30px;font-weight:800;letter-spacing:-.03em;color:#fff;margin-top:2px}
.rekentool .btn{width:100%;margin-top:16px}
.rekentool .klein{font-size:13px;color:var(--ink-3);margin-top:12px;line-height:1.5}
@media (max-width:820px){.rekentool .rij{grid-template-columns:1fr}}
/* ---- video bij een advertentie ---- */
.videovak{display:flex;gap:12px;align-items:center;flex-wrap:wrap;border:1px dashed var(--line);border-radius:12px;padding:14px}
.videovak.klaar{border-style:solid;border-color:var(--good);background:var(--good-bg)}
.videovak .vhint{font-size:13.5px;color:var(--ink-3)}
.videovak .vnaam{font-size:15px;font-weight:600;color:var(--good);display:flex;gap:8px;align-items:center;min-width:0}
.videovak .vnaam span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:190px}
.videovak .vweg{margin-left:auto;font-size:14px;font-weight:600;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px}
.vidspeler{margin-top:16px;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#0B0B14;aspect-ratio:16/9}
.vidspeler video{width:100%;height:100%;display:block;object-fit:contain;background:#0B0B14}
.vidbadge{position:absolute;left:14px;top:13px;display:inline-flex;align-items:center;gap:6px;background:rgba(15,58,43,.86);
color:#fff;border-radius:999px;padding:5px 11px;font-size:12.5px;font-weight:700;backdrop-filter:blur(4px)}
.vidbadge svg{width:13px;height:13px;fill:currentColor}
/* ---- kenteken en RDW ---- */
.rdwbox{background:var(--surface-2);border:1px solid var(--line);border-radius:16px;padding:20px 20px 16px;margin-top:18px}
.rdwbox>label{display:block;font-size:15px;font-weight:700;margin-bottom:12px}
.rdwrij{display:flex;gap:12px;flex-wrap:wrap}
.kentveld{display:flex;align-items:stretch;background:#FFD400;border:2px solid #15162E;border-radius:9px;overflow:hidden;flex:1 1 220px;min-width:200px;height:52px}
.kentveld span{background:#0B0091;color:#FFD400;font-size:13px;font-weight:700;display:grid;place-items:center;width:34px;letter-spacing:.02em}
.kentveld input{flex:1;border:0;background:#FFD400;color:#151607;font-family:var(--f-plate);font-size:23px;font-weight:500;
letter-spacing:.10em;text-align:center;text-transform:uppercase;padding:0 6px;min-width:0}
.kentveld input:focus{outline:none;background:#FFDE33}
.kentveld input::placeholder{color:rgba(21,22,7,.38);letter-spacing:.08em}
.rdwrij .btn{height:52px;min-height:52px;flex:0 0 auto}
.rdwuit{margin-top:14px;border-radius:12px;padding:14px 16px;font-size:15.5px;display:flex;gap:12px;align-items:flex-start}
.rdwuit.ok{background:var(--good-bg);color:var(--ink-2)}
.rdwuit.ok b{color:var(--good);display:block;font-size:16px;margin-bottom:2px}
.rdwuit.fout{background:var(--warm,var(--accent-tint));color:var(--ink-2)}
.rdwuit.fout b{color:var(--accent);display:block;font-size:16px;margin-bottom:2px}
.rdwuit.bezig{background:var(--brand-tint);color:var(--ink-2)}
.rdwbadge{display:inline-flex;align-items:center;gap:7px;background:var(--good-bg);color:var(--good);border-radius:999px;
padding:5px 12px;font-size:13px;font-weight:700;margin-top:12px}
.voorbeeldnoot{margin-top:10px;font-size:13.5px;color:var(--ink-3)}
/* ---- blok voor aanbieders ---- */
.verkoop{background:var(--brand-tint);border-radius:22px;padding:34px 32px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:34px;align-items:center}
.verkoop>*{min-width:0}
.verkoop h2{font-size:clamp(24px,2.8vw,34px)}
.verkoop p{margin-top:12px;font-size:17px;color:var(--ink-2);max-width:48ch}
.verkoop .vlijst{display:flex;flex-direction:column;gap:14px;margin-top:22px}
.verkoop .vlijst div{display:flex;gap:12px;font-size:16px}
.verkoop .vlijst b{display:block}
.verkoop .vlijst span{color:var(--ink-2);font-size:15px}
.vbox{background:var(--surface);border-radius:18px;padding:26px;box-shadow:var(--shadow)}
.vbox .groot{font-size:44px;font-weight:800;letter-spacing:-.03em;line-height:1}
.vbox .btn{width:100%;margin-top:18px}
.vbox ul{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:15px;color:var(--ink-2)}
.vbox li{display:flex;gap:9px}
.hero-cta{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}
@media (max-width:820px){.verkoop{grid-template-columns:minmax(0,1fr);padding:26px 22px}}
@media (max-width:400px){.verkoop{padding:22px 16px}.rekentool{padding:20px 16px}.rekentool .uit div{flex-wrap:wrap;padding:12px 14px}}
/* ---- verdienmodel ---- */
.prijzen{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}
.pkaart{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:26px 24px;display:flex;flex-direction:column;gap:14px}
.pkaart.uit{border:2px solid var(--accent);position:relative;box-shadow:var(--shadow)}
.pkaart .top{font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.prijzen .pkaart .top{position:static;z-index:auto;background:none;backdrop-filter:none;box-shadow:none;border-bottom:1px solid var(--line-2);padding-bottom:10px}
.pkaart.uit .top{color:var(--accent)}
.pkaart .bedrag .oud{font-size:20px;font-weight:600;color:var(--ink-3);text-decoration-thickness:2px;margin-right:4px;vertical-align:middle}
.pkaart .pactie{margin:0;background:var(--accent-tint);color:var(--accent);border-radius:10px;padding:8px 12px;font-size:14.5px}
.pkaart .pk-normaal{color:var(--ink-3)}
.pkaart.max{background:var(--deep);border-color:var(--deep);color:var(--on-deep)}
.prijzen .pkaart.max .top{color:#F0A868;border-bottom-color:rgba(255,255,255,.14)}.pkaart.max ul li b{color:#fff}.pkaart.max .bedrag small,.pkaart.max .pkaart-uit{color:rgba(220,234,228,.78)}
.pkaart.max ul{color:var(--on-deep)}.pkaart.max li svg{stroke:#F0A868}
.pkaart.max .btn{background:#fff;color:var(--deep);border-color:#fff}
.boostkeuze .prijs{text-align:right;white-space:nowrap}.boostkeuze .prijs s{display:block;color:var(--ink-3);font-weight:500;font-size:12.5px}
.pkaart .bedrag{font-size:38px;font-weight:800;letter-spacing:-.03em;line-height:1}
.pkaart .bedrag small{font-size:15px;font-weight:500;color:var(--ink-3)}
.pkaart ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:15.5px;color:var(--ink-2)}
.pkaart li{display:flex;gap:10px}
.pkaart li svg{flex:0 0 18px;margin-top:3px}
.pkaart .btn{margin-top:auto}
.zakelijk{margin-top:22px;background:var(--deep);color:var(--on-deep);border-radius:18px;padding:26px 28px;display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.zakelijk h3{color:#fff;font-size:22px}
.zakelijk p{color:rgba(233,232,250,.75);font-size:15.5px;margin-top:6px;max-width:52ch}
.zakelijk .btn{margin-left:auto}
.flagline.top{background:var(--accent);color:#fff;border-color:transparent}
.card.boost{border-color:var(--accent)}
.boostkeuze{display:flex;flex-direction:column;gap:12px;margin-top:18px}
.kcode{margin-top:14px}
.kc-open{background:none;border:0;padding:4px 0;font:inherit;font-size:14.5px;font-weight:600;color:var(--brand);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.kc-rij{display:flex;gap:8px}
.kc-rij input{flex:1;min-width:0;border:1.5px solid var(--line);border-radius:12px;padding:11px 14px;font:inherit;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.kc-rij input:focus{outline:none;border-color:var(--brand)}
.kc-rij .btn{flex:0 0 auto}
.kc-melding{margin:8px 0 0;font-size:14px;min-height:0}
.kc-melding:empty{display:none}
.kc-melding.ok{color:var(--good)}.kc-melding.fout{color:var(--alert)}
.bh-kc{display:grid;grid-template-columns:minmax(0,1.8fr) repeat(5,minmax(0,1fr)) auto;gap:10px;align-items:end;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px;margin-bottom:14px}
.bh-kc label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;font-weight:600;color:var(--ink-3)}
.bh-kc input,.bh-kc select{height:40px;box-sizing:border-box;border:1px solid var(--line);border-radius:10px;padding:0 10px;font:inherit;font-size:14px;color:var(--ink);background:var(--surface);min-width:0}
.bh-kc .codeveld{display:flex;gap:6px}.bh-kc .codeveld input{flex:1;text-transform:uppercase;font-weight:700;letter-spacing:.05em}
.bh-kc .btn{padding:0 18px;height:40px;box-shadow:none}.bh-kc .bh-knop{opacity:1;border:1px solid var(--line);background:var(--surface-2);color:var(--ink-2)}
.bh-code{font-weight:800;letter-spacing:.05em}
@media (max-width:900px){.bh-kc{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.bh-kc .kc-code{grid-column:1/-1}.bh-kc .btn{grid-column:1/-1}}
.boostkeuze label{display:flex;gap:14px;align-items:flex-start;border:1.5px solid var(--line);border-radius:14px;padding:16px 18px;cursor:pointer}
.boostkeuze label:hover{border-color:var(--accent)}
.boostkeuze input{margin-top:4px;accent-color:var(--accent);width:18px;height:18px}
.boostkeuze b{display:block;font-size:16.5px}
.boostkeuze span{display:block;font-size:14.5px;color:var(--ink-2);margin-top:3px}
.boostkeuze .prijs{margin-left:auto;font-weight:800;font-size:17px;white-space:nowrap}
.kern{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.kern .mnd{font-size:16px;color:var(--ink-2)}
.kern .mnd b{font-weight:800;font-size:18px;color:var(--ink)}
.kern .bon{margin-left:auto;font-size:13.5px;font-weight:700;border-radius:999px;padding:6px 13px}
.kern .bon.ja{background:var(--good-bg);color:var(--good)}
.kern .bon.nee{background:var(--surface-2);color:var(--ink-3)}
.art.hasfoto,.dart.hasfoto{overflow:hidden}
.thumb.hasfoto{padding:0;overflow:hidden}
.art .foto{width:100%;height:100%;object-fit:contain;object-position:center;transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.dart .dfoto{width:100%;height:100%;object-fit:contain}
.thumb .tfoto{width:100%;height:100%;object-fit:contain;border-radius:10px;background:var(--surface-2)}
.sc-art .scfoto{width:100%;aspect-ratio:4/3;object-fit:contain;background:var(--surface-2);border-radius:14px;padding:10px}
.fotos{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.fotos figure{position:relative;margin:0;width:92px;height:68px;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.fotos img{width:100%;height:100%;object-fit:contain;background:var(--surface-2)}
.fotos button{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;background:rgba(10,10,25,.72);color:#fff;font-size:13px;line-height:1;display:grid;place-items:center}
.fotos .leeg{display:flex;align-items:center;justify-content:center;width:92px;height:68px;border:1px dashed var(--line);border-radius:10px;color:var(--ink-3);font-size:12px;text-align:center;padding:6px}
/* ---- kenteken afschermen ---- */
.fotos figcaption{position:absolute;left:0;right:0;bottom:0;background:rgba(18,32,26,.86);color:#fff;font-size:9.5px;text-align:center;padding:3px 2px;font-weight:600}
.f label.schakel,.schakel{display:flex;gap:14px;align-items:flex-start;cursor:pointer;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2);position:relative}
.schakel input{position:absolute;opacity:0;width:0;height:0}
.schuif{display:block;flex:0 0 46px;width:46px;height:27px;border-radius:99px;background:#CFD3E4;position:relative;transition:background .18s;margin-top:1px}
.schuif:after{content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(18,32,26,.28);transition:transform .18s}
.schakel input:checked + .schuif{background:var(--brand)}
.schakel input:checked + .schuif:after{transform:translateX(19px)}
.schakel input:focus-visible + .schuif{outline:2px solid var(--brand);outline-offset:2px}
.schakel .tk{display:block}
.schakel .tk b{display:block;font-size:14.5px;font-weight:700}
.schakel .tk em{display:block;font-style:normal;font-size:12.5px;color:var(--ink-3);margin-top:4px;line-height:1.5}
.plate.afgedekt{letter-spacing:.22em;color:var(--ink-3);background:var(--surface-2)}
.kentnoot{font-size:12px;color:var(--ink-3);margin-left:9px}
@media (max-width:820px){
.prijzen{grid-template-columns:1fr}
.zakelijk{flex-direction:column;align-items:flex-start}
.zakelijk .btn{margin-left:0;width:100%}
.sec-head .right{width:100%;flex-wrap:wrap;gap:10px}
.sec-head .right .cnt{order:3}
.sortsel{flex:1 1 150px}
.sec-head .right .btn{flex:1 1 auto}
}
@media (max-width:600px){
.search{grid-template-columns:1fr}.fgrid{grid-template-columns:1fr 1fr;gap:28px 18px}.cats{grid-template-columns:1fr}
.frow,.frow.three{grid-template-columns:1fr}
.hide-s{display:none}.hero{padding-top:30px}
.row .thumb{display:none}
}
/* ============================================================
verfijning: typografie, diepte en rust
============================================================ */
:root{
--warm:var(--accent-tint);
--tint:var(--brand-tint);
--e1:0 1px 2px rgba(18,32,26,.05);
--e2:0 1px 1px rgba(18,32,26,.04), 0 2px 6px rgba(18,32,26,.05), 0 12px 24px -14px rgba(18,32,26,.22);
--e3:0 2px 6px rgba(18,32,26,.06), 0 18px 36px -14px rgba(18,32,26,.18), 0 60px 90px -50px rgba(18,32,26,.34);
--ring:0 0 0 3px var(--brand-tint);
--stage:radial-gradient(120% 68% at 50% 112%, rgba(18,32,26,.075) 0%, rgba(18,32,26,.02) 46%, rgba(18,32,26,0) 72%), #FFFFFF;
--ease:cubic-bezier(.2,.7,.2,1);
--t-h3:21px;--t-sm:15px;--t-cap:13px;--t-micro:11.5px;
}
body{font-variant-numeric:tabular-nums}
p,.lead,.dsub,.card .sub,.legal,.fineprint,.mij-kort{font-variant-numeric:proportional-nums}
/* -- één micro-label overal -- */
.eyebrow,.block h4,.foot h4,.bh-tabel th{
font-family:var(--f-b);font-size:var(--t-micro);font-weight:700;line-height:1.2;
letter-spacing:.115em;text-transform:uppercase}
.block h4{color:var(--ink-2);margin-bottom:16px;display:flex;align-items:center;gap:14px}
.block h4::after{content:"";flex:1;height:1px;background:var(--line-2)}
.block{margin-top:38px}
/* -- focus volgt de vorm -- */
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:inherit}
.btn-b:focus-visible,.btn-d:focus-visible{outline-color:#fff;outline-offset:-4px}
/* -- knoppen -- */
.btn{border-radius:13px;font-weight:600;letter-spacing:-.012em;
transition:background .16s var(--ease),border-color .16s var(--ease),box-shadow .16s var(--ease),color .16s var(--ease),transform .08s var(--ease)}
.btn:active{transform:translateY(1px)}
.btn-b{box-shadow:0 1px 2px rgba(188,98,32,.24), 0 10px 22px -12px rgba(188,98,32,.8)}
.btn-b:hover{box-shadow:0 1px 2px rgba(188,98,32,.3), 0 16px 30px -14px rgba(188,98,32,.85)}
.btn-d{box-shadow:0 1px 2px rgba(15,58,43,.26), 0 10px 22px -12px rgba(15,58,43,.85)}
.top{border-bottom:0;box-shadow:0 1px 0 var(--line)}
/* -- foto's: één podium in plaats van een wit vlak in een grijs vlak -- */
.art,.sc-art,.dart{background:var(--stage);border-color:var(--line-2)}
.art{padding:10px 16px 14px}
.sc-art .scfoto{background:none;padding:0;border-radius:0}
.thumb.hasfoto,.thumb .tfoto{background:none}
.dart{padding:22px 26px}
/* -- kaarten: haarlijn + ring bij hover, geen drievoudige beweging -- */
.card{border-color:var(--line-2);box-shadow:var(--e1);
transition:box-shadow .2s var(--ease),border-color .2s var(--ease)}
.card:hover{transform:none;border-color:color-mix(in srgb,var(--brand) 32%,#fff);box-shadow:var(--e2)}
.card:hover .foto{transform:scale(1.02)}
.card h3{letter-spacing:-.022em}
.meta b{font-size:var(--t-sm);font-weight:700;color:var(--ink)}
/* -- de statistiekenrail onder de kop -- */
.under{display:grid;grid-template-columns:repeat(3,minmax(0,auto));justify-content:start;gap:0;
margin-top:32px;padding-top:20px;border-top:1px solid var(--line-2)}
.und{padding:0 26px;border-left:1px solid var(--line-2)}
.und:first-child{padding-left:0;border-left:0}
.und b{display:block;font-size:26px;font-weight:700;line-height:1.1;letter-spacing:-.03em;color:var(--brand)}
.und span{display:block;margin-top:5px;font-size:var(--t-micro);font-weight:700;
letter-spacing:.085em;text-transform:uppercase;color:var(--ink-3)}
/* -- looptijdbalk: tijdlijn, geen laadbalk -- */
.bar{position:relative;padding-top:24px}
.bar-track{height:8px;border-radius:999px;border:0;overflow:visible;background:var(--brand-tint)}
.bar-fill{border-radius:999px;background:linear-gradient(90deg,var(--brand-2),var(--brand));
box-shadow:0 2px 6px -2px rgba(18,32,26,.4)}
.bar-fill span{position:absolute;right:0;bottom:calc(100% + 9px);padding:0;
font-size:13px;font-weight:700;letter-spacing:-.01em;color:var(--brand);white-space:nowrap}
.bar-legend{margin-top:9px;font-size:12.5px}
.bar-sm{padding-top:21px}
.bar-sm .bar-track{height:6px}
.bar-sm .bar-fill span{font-size:12px}
/* -- feitentabel: de waarde weegt zwaarder dan het label -- */
.tbl{font-size:var(--t-sm)}
.tbl th,.tbl td{padding:13px 0;vertical-align:baseline;border-bottom:1px solid var(--line-2)}
.tbl th{font-weight:400;color:var(--ink-2);width:38%;font-size:14.5px;padding-right:24px}
.tbl td{font-weight:600;font-size:15.5px;color:var(--ink);letter-spacing:-.012em}
.tbl tr:first-child td{font-size:19px;font-weight:700;letter-spacing:-.022em}
.tbl tr:last-child th,.tbl tr:last-child td{border-bottom:0}
.tbl td.txt{font-weight:400;font-size:var(--t-sm);color:var(--ink-2)}
/* -- prijskaart: bon-ritme -- */
.side{border-color:var(--line-2);box-shadow:var(--e3);border-top:3px solid var(--brand)}
.side .p{letter-spacing:-.04em}
.kv{padding:11px 0}
.kv + .kv{border-top:1px solid var(--line-2)}
.kv b{font-size:15.5px;letter-spacing:-.012em}
/* -- citaat en checklist -- */
.quote{background:var(--surface-2);border-color:transparent}
.check li::before{border:0;border-radius:6px;background:var(--brand-tint)
url("data:image/svg+xml;utf8,")
center/12px 12px no-repeat}
/* -- invoervelden: wit, niet uitgeschakeld-grijs -- */
.f label{margin:0 0 7px 0;font-size:13.5px;font-weight:600;color:var(--ink-2)}
.f input,.f select,.f textarea{background:var(--surface);border:1px solid var(--line);border-radius:12px;
box-shadow:inset 0 1px 2px rgba(18,32,26,.03);transition:border-color .14s var(--ease),box-shadow .14s var(--ease)}
.f input,.f select{height:46px;font-size:15.5px;padding:0 14px}
.f input:hover,.f select:hover,.f textarea:hover{border-color:#C6CBDF}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--brand);box-shadow:var(--ring)}
.f input[type=number]{-moz-appearance:textfield}
.f input[type=number]::-webkit-outer-spin-button,.f input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.f select{appearance:none;-webkit-appearance:none;padding-right:38px;cursor:pointer;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 14px center}
.keuze button[aria-pressed="true"]{box-shadow:0 0 0 3px var(--accent-tint)}
/* -- plaatsformulier: einde altijd in beeld -- */
#placeSubmit{position:sticky;bottom:0;z-index:6;min-height:54px;font-size:16.5px;margin-top:22px;
box-shadow:0 0 0 12px var(--surface), 0 -22px 22px 12px var(--surface), 0 12px 26px -14px rgba(188,98,32,.85)}
/* ---------------- beheer ---------------- */
.bh-kop h1,.bh-kop .h1{letter-spacing:-.032em}
.bh-kop .env{background:var(--accent-tint);color:var(--accent);border:1px solid rgba(188,98,32,.18);
border-radius:999px;padding:4px 11px;font-size:var(--t-micro);font-weight:700;
letter-spacing:.06em;text-transform:uppercase}
.bh-stats{gap:0;margin:26px 0 30px;background:var(--surface);border:1px solid var(--line);
border-radius:16px;box-shadow:var(--e1);overflow:hidden}
.bh-stat{display:flex;flex-direction:column-reverse;justify-content:space-between;
background:none;border:0;border-radius:0;border-left:1px solid var(--line-2);padding:15px 18px 17px;min-height:96px}
.bh-stat:first-child{border-left:0}
.bh-stat b{font-size:31px;font-weight:700;line-height:1;letter-spacing:-.035em;color:var(--ink)}
.bh-stat span{margin:0 0 10px;font-size:var(--t-micro);font-weight:700;letter-spacing:.075em;
text-transform:uppercase;color:var(--ink-3);line-height:1.3}
.bh-stat.nul b{color:var(--n-300);font-weight:600}
.bh-stat.let.nul b{color:var(--n-300)}
.bh-tabel{border-collapse:separate;border-spacing:0;border-color:var(--line);box-shadow:var(--e1)}
.bh-tabel th{background:var(--surface-2);color:var(--ink-3);border-bottom:1px solid var(--line);
padding:10px 16px;white-space:nowrap}
.bh-tabel td{padding:13px 16px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.bh-tabel th.num,.bh-tabel td.num{text-align:right}
.bh-tabel tr:last-child td{border-bottom:0}
.bh-tabel tbody tr:hover td{background:color-mix(in srgb,var(--surface-2) 55%,#fff)}
.bh-tabel td:first-child{width:34%}
.bh-tabel td:last-child{width:1%;white-space:nowrap;text-align:right}
/* -- "geen bonus" is geen nieuws: stille tekst in plaats van een pil -- */
.kern .bon.nee{background:none;color:var(--ink-3);padding:6px 0;font-weight:600}
.bh-tag{display:inline-flex;align-items:center;gap:6px;border:1px solid transparent}
.bh-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 auto}
.bh-tag.actief{background:none;color:var(--ink-2);padding-left:0}
.bh-tag.actief::before{background:var(--good)}
.bh-tag.klaar{background:none;color:var(--ink-3);padding-left:0}
.bh-tag.klaar::before{background:var(--good)}
.bh-tag.boost{background:var(--accent-tint);color:var(--accent);border-color:rgba(188,98,32,.18)}
.bh-tag.open{background:var(--alert-bg);color:var(--alert);border-color:rgba(176,58,30,.18)}
.bh-tag.verborgen{background:var(--surface-2);color:var(--ink-3);border-color:var(--line)}
.bh-knop{border-color:transparent;background:none;color:var(--ink-3);opacity:0;
transition:opacity .12s var(--ease),color .12s var(--ease),border-color .12s var(--ease),background .12s var(--ease)}
.bh-tabel tr:hover .bh-knop,.bh-tabel tr:focus-within .bh-knop,.bh-knop:focus-visible{opacity:1}
.bh-knop:hover{color:var(--accent);border-color:var(--line);background:var(--surface)}
@media (hover:none){.bh-knop{opacity:1;color:var(--ink-2);border-color:var(--line)}}
.bh-tag.zak{background:var(--brand-tint);color:var(--brand);border-color:rgba(20,90,66,.14)}
.bh-tag.par{background:var(--surface-2);color:var(--ink-2);border-color:var(--line)}
.bh-tag.blok{background:var(--alert-bg);color:var(--alert);border-color:rgba(176,58,30,.18)}
.bh-klein{display:block;color:var(--ink-3);font-size:13px;margin-top:2px}
.bh-kvk{font-variant-numeric:tabular-nums;font-weight:600}
.bh-kvk .ok{display:block;color:var(--good);font-size:12.5px;font-weight:600;margin-top:2px}
.bh-kvk .nee{color:var(--ink-3);font-weight:400}
.bh-ico{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;margin-right:12px;vertical-align:middle;
background:var(--surface-2);color:var(--ink-2);font-size:12.5px;font-weight:700;flex:0 0 auto}
.bh-ico.zak{background:var(--brand-tint);color:var(--brand)}
.bh-ico svg{width:17px;height:17px}
.bh-acc{display:flex;align-items:center}
.bh-filter{display:flex;gap:8px;margin:0 0 14px;overflow-x:auto;padding-bottom:2px}
.bh-filter button{white-space:nowrap;flex:0 0 auto;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:7px 14px;font-size:14px;font-weight:600;color:var(--ink-2)}
.bh-filter button[aria-pressed="true"]{background:var(--deep);color:var(--on-deep);border-color:transparent}
.bh-tabel tr.geblokkeerd td{opacity:.55}
.bh-tabel td.nw{white-space:nowrap}
.bh-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:14px}
.bh-accs{min-width:860px}
.bh-accs td:first-child{width:auto;min-width:250px}
.bh-accs td:nth-child(5){width:1%}
.bh-tabel tr.geblokkeerd td:last-child{opacity:1}
.bh-uitleg{background:var(--surface-2);border:1px solid var(--line-2);border-left:3px solid var(--brand);border-radius:12px}
.bh-leeg{border-style:solid;border-color:var(--line);background:var(--surface);border-radius:16px;padding:44px 26px}
/* -- tabs -- */
.tab{border-radius:10px 10px 0 0;color:var(--ink-3);transition:color .14s var(--ease),background .14s var(--ease)}
.tab:hover{color:var(--ink-2);background:var(--surface-2)}
.tab[aria-selected="true"]{color:var(--ink);font-weight:700}
.tab .pip{background:var(--surface-2);color:var(--ink-3);border:1px solid var(--line);min-width:22px;text-align:center}
.tab[aria-selected="true"] .pip{background:var(--brand-tint);color:var(--brand);border-color:transparent}
/* -- lege staten -- */
.empty{border:0;background:var(--surface-2);border-radius:18px;padding:44px 28px}
@media (max-width:980px){
.bh-stat:nth-child(3n+1){border-left:0}
.bh-stat:nth-child(n+4){border-top:1px solid var(--line-2)}
}
/* -- zijbalk: secundaire knop is een knop -- */
.side .btn-t{border-color:var(--line);background:var(--surface);color:var(--ink)}
.side .btn-t:hover{border-color:var(--ink-3);background:var(--surface-2)}
/* -- label op de foto: rustige pil met stip -- */
.flagline{display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 11px;
background:rgba(255,255,255,.94);backdrop-filter:blur(10px);color:var(--ink-2);
border:1px solid var(--line);box-shadow:0 2px 10px -2px rgba(18,32,26,.16)}
.flagline::before{content:"";flex:0 0 7px;width:7px;height:7px;border-radius:50%;background:currentColor}
.flagline.pos{color:var(--good);border-color:rgba(22,107,78,.22)}
.flagline.neg{color:var(--alert);border-color:rgba(176,58,30,.22)}
.flagline.own,.flagline.top{background:var(--accent);color:#fff;border-color:transparent;
box-shadow:0 6px 16px -8px rgba(188,98,32,.8)}
.flagline.own::before,.flagline.top::before{display:none}
@media (max-width:600px){
.hero-cta .btn{flex:1 1 100%;width:100%}
.under{grid-template-columns:repeat(3,1fr)}
.bh-stat{border-left:1px solid var(--line-2)}
.bh-stat:nth-child(2n+1){border-left:0}
.bh-stat:nth-child(n+3){border-top:1px solid var(--line-2)}
.bh-stat b{font-size:26px}
.und{padding:0 10px}
.und b{font-size:21px}
.und span{font-size:9.5px;letter-spacing:.04em;line-height:1.25}
}
/* ============================================================
aanbod als lijst: meer contracten in één blik
============================================================ */
.aanbodband{background:var(--deep);color:#fff;border-radius:18px;padding:24px 26px;
display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:18px}
.aanbodband h2{font-size:clamp(21px,2.8vw,30px);font-weight:800;letter-spacing:-.03em;max-width:18ch;color:#fff}
.aanbodband .eyebrow{color:rgba(255,255,255,.6)}
.aanbodband .tel{margin-left:auto;text-align:right}
.aanbodband .tel b{display:block;font-size:28px;font-weight:800;letter-spacing:-.03em;line-height:1}
.aanbodband .tel span{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.grid.lijst{display:block;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--paper)}
.grid.lijst .card{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;
border:0;border-bottom:1px solid var(--line-2);border-radius:0;box-shadow:none;background:none;
padding:10px 16px 10px 12px;gap:14px}
.grid.lijst .card:last-child{border-bottom:0}
.grid.lijst .card:hover{background:color-mix(in srgb,var(--surface-2) 55%,#fff);box-shadow:none;border-color:transparent;border-bottom-color:var(--line-2)}
.grid.lijst .card.boost{background:linear-gradient(90deg,var(--accent-tint),transparent 60%)}
.grid.lijst .art{aspect-ratio:auto;height:60px;padding:0;border:0;border-radius:10px;background:none}
.grid.lijst .art .foto{height:60px;width:96px;object-fit:contain}
.grid.lijst .art svg{height:60px;width:96px}
.grid.lijst .fav,.grid.lijst .vidbadge{display:none}
.grid.lijst .flagline{position:static;display:none}
.card .co{display:none}
.grid.lijst .cb{display:grid;grid-template-columns:minmax(0,1fr) 128px 126px 132px;align-items:center;gap:18px;padding:0}
.grid.lijst .co{display:block;font-size:13.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grid.lijst .cb h3{font-size:16px;letter-spacing:-.02em}
.grid.lijst .cb .sub{font-size:12.5px;color:var(--ink-3);margin-top:2px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grid.lijst .kern{display:block;margin:0;padding:0;border:0}
.grid.lijst .kern .mnd{font-size:13.5px;color:var(--ink-2);white-space:nowrap}
.grid.lijst .kern .mnd b{color:var(--brand);font-weight:700}
.grid.lijst .kern .bon{display:none}
.grid.lijst .kern .bon.ja{display:block;margin:3px 0 0;padding:0;background:none;
font-size:12.5px;font-weight:700;color:var(--accent)}
.grid.lijst .cfoot{display:block;padding:0;border:0;text-align:right}
.grid.lijst .price{font-size:19px;letter-spacing:-.026em}
.grid.lijst .price small{font-size:12px}
.grid.lijst .city{display:block;font-size:12.5px;color:var(--ink-3);margin-top:2px}
.lijstkop{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;padding:9px 16px 9px 12px;
background:var(--surface-2);border-bottom:1px solid var(--line);
font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.lijstkop .k2{display:grid;grid-template-columns:minmax(0,1fr) 128px 126px 132px;gap:18px}
.lijstkop .r{text-align:right}
@media (max-width:820px){
.lijstkop{display:none}
.grid.lijst .card{grid-template-columns:82px minmax(0,1fr);padding:11px 14px 11px 10px}
.grid.lijst .art,.grid.lijst .art .foto,.grid.lijst .art svg{height:54px;width:82px}
.grid.lijst .cb{grid-template-columns:minmax(0,1fr) auto;gap:3px 12px;
grid-template-areas:"n p" "m p"}
.grid.lijst .co{display:none}
.grid.lijst .cb>div:first-child{grid-area:n}
.grid.lijst .kern{grid-area:m}
.grid.lijst .cfoot{grid-area:p;align-self:center}
.aanbodband{padding:20px;border-radius:14px}
}
/* ============================================================
rondere vormen: zachter en vriendelijker
============================================================ */
:root{--r-s:12px;--r-m:16px;--r-l:22px;--r-xl:28px}
.btn,.btn-b,.btn-d,.btn-t,.btn-s{border-radius:999px}
.btn-s{padding:0 18px}
#placeSubmit,.side .btn,.side .btn-b,.side .btn-t{border-radius:999px}
.f input,.f select,.f textarea{border-radius:var(--r-m)}
.kentveld{border-radius:var(--r-m);overflow:hidden}
.search{border-radius:var(--r-xl)}
.showcase,.side,.rekentool,.sheet,.aanbodband{border-radius:var(--r-xl)}
.card,.grid.lijst,.bh-stats,.bh-tabel,.bh-leeg,.empty,.quote,.rdwbox,.videovak,.keuze button,.row,.mij,.scherm{border-radius:var(--r-l)}
.art,.dart,.sc-art,.thumb,.gal button,.fotos figure,.msg,.bh-uitleg,.note-d{border-radius:var(--r-m)}
.art .foto,.sc-art .scfoto,.dart .dfoto,.thumb .tfoto{border-radius:var(--r-s)}
.grid.lijst .art,.grid.lijst .art .foto{border-radius:var(--r-s)}
.lijstkop{border-radius:var(--r-l) var(--r-l) 0 0}
.grid.lijst{border-top-left-radius:0;border-top-right-radius:0}
.chip,.cat,.bh-tag,.bon,.flagline,.pip,.badge,.vidbadge,.kern .mnd{border-radius:999px}
.segment,.keuze{border-radius:999px}
.segment button{border-radius:999px}
.tab{border-radius:999px 999px 0 0}
.check li::before{border-radius:999px}
.iconbtn,.fav,.sheet .x,.burger{border-radius:999px}
.bh-knop{border-radius:999px;padding:6px 14px}
.block h4::after{border-radius:2px}
.fotoband,.band{border-radius:var(--r-xl)}
.avatar,.social button{border-radius:999px}
.sortsel{border-radius:999px;padding-inline:16px}
.dacties button{border-radius:999px}
.schakel{border-radius:var(--r-l)}
.bar-track,.bar-fill{border-radius:999px}
/* ============================================================
vonk: meer lef, minder braaf
============================================================ */
:root{
--gloed:radial-gradient(90% 120% at 12% 0%, rgba(188,98,32,.22) 0%, rgba(188,98,32,0) 55%),
radial-gradient(70% 100% at 100% 10%, rgba(18,32,26,.07) 0%, rgba(18,32,26,0) 60%);
--podium:radial-gradient(120% 74% at 50% 112%, rgba(18,32,26,.10) 0%, rgba(18,32,26,.025) 46%, rgba(18,32,26,0) 74%), #FFFFFF;
}
/* -- kop: groter, strakker, met een lichtvlek erachter -- */
.hero{position:relative;padding-top:52px}
.hero::before{content:"";position:absolute;inset:-40px -10vw 20px -12vw;background:var(--gloed);
z-index:-1;pointer-events:none;border-radius:0 0 60px 60px}
.hero h1{font-size:clamp(40px,6vw,74px);line-height:.98;letter-spacing:-.042em;font-weight:800;max-width:13ch}
.hero .lead{font-size:18px;max-width:40ch;color:var(--ink-2)}
.hero .eyebrow{display:inline-flex;align-items:center;gap:9px}
.hero .eyebrow::before{content:"";width:22px;height:3px;border-radius:3px;background:var(--accent)}
/* -- de vonkknop -- */
.btn-b{background:var(--accent);color:#fff;border-color:transparent;font-weight:700;
box-shadow:0 1px 2px rgba(18,32,26,.1), 0 12px 26px -12px rgba(188,98,32,.95)}
.btn-b:hover{background:var(--accent-2);border-color:transparent;transform:translateY(-1px);
box-shadow:0 2px 4px rgba(18,32,26,.12), 0 18px 34px -14px rgba(188,98,32,1)}
.btn-b:active{transform:translateY(0)}
.btn-d{background:var(--deep);color:#fff}
.btn-d:hover{background:var(--deep-2)}
/* -- statistiekrail: getallen groot, streep in de vonkkleur -- */
.under{border-top:0;position:relative;padding-top:24px}
.under::before{content:"";position:absolute;left:0;top:0;width:54px;height:3px;border-radius:3px;background:var(--accent)}
.und b{font-size:32px;font-weight:800;color:var(--ink);letter-spacing:-.035em}
.und span{color:var(--ink-3)}
/* -- foto's zweven op een lichtvlek, geen kader -- */
.art,.sc-art,.dart{background:var(--podium);border-color:transparent}
.dart{box-shadow:0 1px 2px rgba(18,32,26,.05), 0 30px 60px -40px rgba(18,32,26,.5)}
.showcase{box-shadow:0 2px 8px rgba(18,32,26,.05), 0 40px 80px -44px rgba(18,32,26,.45);
border-color:var(--line-2)}
/* -- de zwarte kopband boven het aanbod -- */
.aanbodband{background:linear-gradient(120deg,#0F3A2B 0%,#145A42 58%,#1A6C50 100%);position:relative;overflow:hidden;
padding:30px 30px 28px}
.aanbodband::after{content:"";position:absolute;right:-70px;top:-90px;width:300px;height:300px;border-radius:50%;
background:radial-gradient(circle,rgba(188,98,32,.45) 0%,rgba(188,98,32,0) 68%)}
.aanbodband h2{font-size:clamp(23px,3vw,34px);letter-spacing:-.034em}
.aanbodband .eyebrow{color:#A7CBBA;display:inline-flex;align-items:center;gap:8px}
.aanbodband .eyebrow::before{content:"";width:18px;height:3px;border-radius:3px;background:var(--accent)}
.aanbodband .tel b{font-size:34px;color:#fff}
.aanbodband .tel span{color:rgba(255,255,255,.55)}
/* -- de lijst: prijs domineert, bonus in de vonkkleur -- */
.grid.lijst{border-color:var(--line-2);box-shadow:0 1px 2px rgba(18,32,26,.04), 0 24px 48px -36px rgba(18,32,26,.4)}
.grid.lijst .card{padding:12px 18px 12px 14px}
.grid.lijst .card:hover{background:var(--surface-2)}
.grid.lijst .cb h3{font-size:16.5px;font-weight:700}
.grid.lijst .price{font-size:21px;font-weight:800;letter-spacing:-.03em}
.grid.lijst .kern .mnd b{color:var(--ink);font-weight:800}
.grid.lijst .kern .bon.ja{display:inline-block;background:var(--accent-tint);color:var(--accent);
font-size:11.5px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;padding:3px 9px;margin-top:5px}
.grid.lijst .card.boost{background:linear-gradient(90deg,rgba(188,98,32,.16),transparent 55%)}
.lijstkop{background:none;border-bottom:1px solid var(--line);color:var(--ink-3)}
/* -- chips en segment: scherper -- */
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.segment button[aria-pressed="true"]{box-shadow:0 1px 2px rgba(18,32,26,.08)}
/* -- detail: prijs als hoofdrolspeler -- */
.side{border-top:0;box-shadow:0 2px 8px rgba(18,32,26,.05), 0 40px 80px -44px rgba(18,32,26,.45);
border-color:var(--line-2);position:relative;overflow:hidden}
.side::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;
background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.side .p{font-size:46px;font-weight:800;letter-spacing:-.042em}
.detail h1{font-size:clamp(30px,4vw,46px);font-weight:800;letter-spacing:-.04em}
/* -- flagline en bonuslabels in de vonkkleur -- */
.flagline.pos{color:var(--accent);border-color:rgba(188,98,32,.26);background:rgba(253,237,228,.96)}
.flagline.pos::before{background:var(--accent)}
.flagline.top,.flagline.own{background:var(--accent);color:#fff;
box-shadow:0 6px 16px -8px rgba(188,98,32,.9)}
/* -- beheer: één accent -- */
.bh-stat.let b{color:var(--ink)}
.bh-tag.boost{background:var(--accent-tint);color:var(--accent);border-color:rgba(188,98,32,.26)}
/* -- kleine levendigheid -- */
.card,.btn,.chip,.rij,.bh-knop{transition:all .18s cubic-bezier(.2,.7,.2,1)}
.top{box-shadow:0 1px 0 var(--line-2)}
@media (max-width:600px){
.hero h1{font-size:clamp(32px,9vw,40px)}
.aanbodband{padding:22px 20px}
.und b{font-size:24px}
}
/* ============================================================
opbouw zoals een echte leasesite
============================================================ */
.hero{padding:0;position:relative}
.hero::before{display:none}
.heroband{position:relative;min-height:clamp(320px,40vw,440px);display:grid;align-items:center;
overflow:hidden;background:var(--deep)}
.heroband>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.45}
.heroband::after{content:"";position:absolute;inset:0;
background:linear-gradient(100deg,rgba(15,58,43,.94) 0%,rgba(15,58,43,.74) 44%,rgba(15,58,43,.26) 100%)}
.hb-in{position:relative;z-index:2;padding-block:48px 64px}
.heroband .eyebrow{color:#A7CBBA}
.heroband h1{color:#fff;font-size:clamp(31px,4.4vw,52px);line-height:1.05;letter-spacing:-.034em;
max-width:17ch;margin-top:12px;font-weight:800}
.heroband .lead{color:rgba(255,255,255,.88);margin-top:15px;max-width:44ch;font-size:17px}
.heroband .hero-cta{margin-top:24px;display:flex;gap:10px;flex-wrap:wrap}
.heroband .hb-tekst .btn{border-color:rgba(255,255,255,.36);background:transparent;color:#fff;padding:0 20px}
.heroband .hb-tekst .btn:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.55)}
.heroband .hb-tekst .btn-b{background:var(--accent);border-color:transparent;color:#fff}
.heroband .hb-tekst .btn-b:hover{background:var(--accent-2)}
.hero-in{display:grid;grid-template-columns:1fr;gap:0;padding-top:26px;padding-bottom:6px}
.showcase{max-width:520px;margin:0 auto}
.under{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:26px auto 0;max-width:760px;
padding:0;border-top:1px solid var(--line-2);padding-top:20px}
.under::before{display:none}
.und{padding:0 20px;border-left:1px solid var(--line-2);text-align:center}
.und:first-child{padding-left:0;border-left:0}
.und b{font-size:25px;font-weight:800;color:var(--brand);letter-spacing:-.03em;display:block}
.und span{display:block;margin-top:4px}
.search-wrap{margin-top:-44px;position:relative;z-index:3;padding-bottom:0}
.search{background:var(--surface);border:1px solid var(--line-2);
box-shadow:0 2px 6px rgba(18,32,26,.05), 0 30px 60px -34px rgba(18,32,26,.4)}
.segwrap{background:var(--surface);border-bottom:1px solid var(--line)}
.segwrap .wrap{display:flex;align-items:center;gap:16px;padding-block:10px;flex-wrap:wrap}
.segwrap .uitleg{font-size:13.5px;color:var(--ink-3);font-weight:500}
.segment{margin:0;max-width:none;width:auto;background:var(--surface-2);border-color:var(--line-2);padding:5px}
.segment button{padding:9px 24px;font-size:14.5px}
.segment button[aria-pressed="true"]{background:var(--brand);color:#fff;box-shadow:none}
#aanbod{background:var(--surface-2)}
.grid{grid-template-columns:repeat(auto-fill,minmax(288px,1fr));gap:20px}
.card{background:var(--surface);border:1px solid var(--line-2);border-radius:20px;overflow:hidden;
box-shadow:0 1px 2px rgba(18,32,26,.04);display:flex;flex-direction:column}
.card:hover{box-shadow:0 2px 6px rgba(18,32,26,.06), 0 18px 34px -18px rgba(18,32,26,.3);border-color:var(--line)}
.art{aspect-ratio:16/10;padding:12px 18px 4px;background:var(--surface);border-bottom:0}
.card .cb{padding:6px 20px 20px;gap:0;flex:1;display:flex;flex-direction:column}
.card h3{font-size:19px;font-weight:700;letter-spacing:-.022em}
.card .sub{font-size:13.5px;color:var(--ink-3);margin-top:4px}
.card .co{display:block;font-size:13px;color:var(--ink-3);margin-top:2px}
.card .kern{margin-top:14px;padding:14px 0 0;border-top:1px solid var(--line-2);border-bottom:0;
display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.kern .mnd{font-size:13px;color:var(--ink-2);background:var(--brand-tint);border-radius:999px;padding:5px 12px}
.kern .mnd b{color:var(--brand);font-weight:700}
.kern .bon.ja{background:var(--accent-tint);color:var(--accent);font-size:12.5px;font-weight:700;padding:5px 12px;margin:0}
.kern .bon.nee{display:none}
.cfoot{margin-top:auto;padding-top:16px;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;border-top:0}
.cfoot .price{font-size:27px;font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.cfoot .price small{font-size:13px;font-weight:500;color:var(--ink-3)}
.cfoot .city{font-size:13px;color:var(--ink-3);text-align:right}
@media (max-width:760px){
.search-wrap{margin-top:-28px}
.hb-in{padding-block:34px 50px}
.under{margin-top:20px;padding-top:16px}
.und{padding:0 10px}
.und b{font-size:20px}
.segwrap .uitleg{display:none}
.segment{width:100%}
}
/* -- topstrook met de keuze particulier of zakelijk -- */
.topstrip{background:var(--deep);color:rgba(255,255,255,.8);font-size:13.5px}
.topstrip .wrap{display:flex;align-items:center;gap:16px;min-height:42px;flex-wrap:wrap}
.modus{display:flex;gap:2px}
.modus button{padding:11px 18px 10px;font-size:13.5px;font-weight:600;color:rgba(255,255,255,.72);
border-bottom:3px solid transparent;border-radius:0;transition:color .15s,border-color .15s,background .15s}
.modus button:hover{color:#fff;background:rgba(255,255,255,.07)}
.modus button[aria-pressed="true"]{color:#fff;border-bottom-color:var(--accent);background:rgba(255,255,255,.06)}
.strip-uit{color:rgba(255,255,255,.62);font-size:12.5px;background:none;border:0;padding:4px 0;text-align:left}
body:is(.mzakelijk,.mpart) .strip-uit{color:rgba(255,255,255,.85);text-decoration:underline;text-underline-offset:3px}
.strip-link{margin-left:auto;color:rgba(255,255,255,.78);text-decoration:none;font-size:12.5px;font-weight:600}
.strip-link:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
body.mzakelijk .heroband::after{background:linear-gradient(100deg,rgba(15,58,43,.96) 0%,rgba(15,58,43,.8) 44%,rgba(15,58,43,.34) 100%)}
@media (max-width:760px){
.strip-uit{display:none}
.topstrip .wrap{gap:8px;min-height:40px}
.modus{flex:1}
.modus button{flex:1;padding:11px 8px 9px;text-align:center}
.strip-link{display:none}
}
/* -- beeldband met de uitgelichte kaart ernaast -- */
.hb-in{display:grid;grid-template-columns:1.18fr .82fr;gap:clamp(26px,3.4vw,48px);align-items:center;
padding-block:52px 56px}
.hb-tekst{min-width:0}
.heroband .showcase{background:var(--surface);border:0;border-radius:22px;max-width:440px;margin-left:auto;
box-shadow:0 4px 12px rgba(18,32,26,.16), 0 40px 70px -34px rgba(0,0,0,.5);padding-bottom:4px}
.heroband .sc-art{padding:6px 14px 0}
.heroband .sc-art .scfoto{aspect-ratio:16/9}
.heroband .showcase .btn{min-height:46px;font-size:15.5px}
.heroband .sc-art{background:var(--surface);border:0}
.heroband{min-height:0}
.heroband h1{font-size:clamp(30px,3.9vw,48px);max-width:14ch}
.heroband .lead{font-size:16.5px;max-width:38ch}
/* -- de vertrouwensregels in de band zelf -- */
.heroband .trust{margin-top:22px;display:flex;gap:18px;flex-wrap:wrap;font-size:13.5px;color:rgba(255,255,255,.76)}
.heroband .trust i{background:var(--accent)}
/* -- cijferrij: één rustige strook onder de zoekkaart -- */
.cijfers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:22px;
padding:18px 0 4px;border-top:0}
.cijfers .und{padding:0 20px;border-left:1px solid var(--line-2);text-align:center}
.cijfers .und:first-child{border-left:0}
.cijfers .und b{display:block;font-size:24px;font-weight:800;color:var(--brand);letter-spacing:-.03em}
.cijfers .und span{display:block;margin-top:4px;font-size:11.5px;font-weight:700;letter-spacing:.085em;
text-transform:uppercase;color:var(--ink-3)}
@media (max-width:900px){
.hb-in{grid-template-columns:1fr;gap:26px;padding-block:34px 44px}
.heroband .showcase{max-width:460px;margin:0 auto}
.heroband h1{max-width:none}
.cijfers .und{padding:0 10px}
.cijfers .und b{font-size:20px}
.cijfers .und span{font-size:9.5px;letter-spacing:.05em}
}
/* -- knoppen op donkere vlakken: geen gloed -- */
.zakelijk .btn-b,.fotoband .btn-b,.note-d .btn-b,.aanbodband .btn-b{box-shadow:0 1px 2px rgba(0,0,0,.25)}
.zakelijk .btn-b:hover,.fotoband .btn-b:hover,.note-d .btn-b:hover{box-shadow:0 2px 6px rgba(0,0,0,.3)}
/* -- kaart opgeruimd: bewaarknop in de hoek, bonus maar één keer -- */
.card .fav{top:12px;left:12px;right:auto;bottom:auto;opacity:0}
.card:hover .fav,.card .fav:focus-visible,.card .fav[aria-pressed="true"]{opacity:1}
@media (hover:none){.card .fav{opacity:1}}
.card .kern .bon.ja{display:none}
.card .kern{margin-top:12px}
/* -- de plaatsknop springt eruit -- */
.plaatsknop{min-height:46px;padding:0 18px;font-size:15.5px;font-weight:700;gap:8px;
background:var(--accent);border-color:transparent;color:#fff;white-space:nowrap;
box-shadow:0 1px 2px rgba(188,98,32,.3), 0 10px 22px -10px rgba(188,98,32,.95)}
.plaatsknop:hover{background:var(--accent-2);border-color:transparent;transform:translateY(-1px);
box-shadow:0 2px 4px rgba(188,98,32,.34), 0 16px 30px -12px rgba(188,98,32,1)}
.plaatsknop:active{transform:translateY(0)}
.plaatsknop svg{flex:0 0 auto}
.plaatsknop .gratis{background:rgba(255,255,255,.22);border-radius:999px;padding:3px 9px;
font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
@media (max-width:1320px){.plaatsknop .gratis{display:none}}
@media (max-width:1180px){.nav a{padding:9px 9px;font-size:14.5px}}
@media (max-width:1360px){.nav a:nth-child(6){display:none}}
@media (max-width:1220px){.nav a:nth-child(5){display:none}}
@media (max-width:1060px){.nav a:nth-child(4){display:none}}
.nav{min-width:0;overflow:hidden}
@media (max-width:860px){.plaatsknop{padding:0 14px;font-size:14.5px}.plaatsknop svg{display:none}}
@media (max-width:560px){
.plaatsknop{font-size:0;padding:0 14px;min-width:46px}
.plaatsknop svg{display:block;width:20px;height:20px}
}
/* -- vaste balk onderaan op de telefoon -- */
.plaatsbalk{display:none}
@media (max-width:760px){
.plaatsbalk{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;gap:10px;transform:translateY(110%);visibility:hidden;transition:transform .25s ease,visibility 0s linear .25s;
padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
background:color-mix(in srgb,var(--paper) 94%,transparent);backdrop-filter:blur(10px);
border-top:1px solid var(--line)}
body.na-hero .plaatsbalk{transform:none;visibility:visible;transition:transform .25s ease}
.plaatsbalk .btn{flex:1;min-height:48px}
body{padding-bottom:78px}
body.appmode .plaatsbalk{display:none}
body.appmode{padding-bottom:0}
}
/* -- twee tariefkaarten in plaats van drie -- */
.prijzen.twee{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));max-width:820px}
.pkaart-uit{font-size:14.5px;color:var(--ink-2);margin:10px 0 0;line-height:1.5}
.pkaart-noot{font-size:12.5px;color:var(--ink-3);margin-top:12px;text-align:center}
.pkaart ul li b{font-weight:700;color:var(--ink)}
/* -- particulier of zakelijk: duidelijker -- */
.modus-vraag{font-size:13px;font-weight:600;color:rgba(255,255,255,.62);letter-spacing:.02em}
.modus button{display:inline-flex;align-items:center;gap:8px;padding:11px 20px 10px;font-size:14.5px}
.modus button svg{width:16px;height:16px;opacity:.75}
.modus button[aria-pressed="true"] svg{opacity:1}
.modus button[aria-pressed="true"]{background:rgba(255,255,255,.1);border-bottom-width:3px}
.bandlead{color:rgba(255,255,255,.7);font-size:14px;margin-top:8px}
/* -- label op de kaart -- */
.soortlabel{display:inline-block;margin-top:9px;font-size:11.5px;font-weight:700;letter-spacing:.05em;
text-transform:uppercase;border-radius:999px;padding:4px 10px}
.soortlabel.zak{background:var(--brand-tint);color:var(--brand)}
.soortlabel.par{background:var(--surface-2);color:var(--ink-3)}
.grid.lijst .soortlabel{display:none}
.koopbadge{display:inline-block;margin-top:9px;margin-left:6px;font-size:11.5px;font-weight:700;letter-spacing:.05em;
text-transform:uppercase;border-radius:999px;padding:4px 10px;background:var(--accent-tint);color:var(--accent-2)}
.grid.lijst .koopbadge{display:none}
/* ---- inloggen: particulier of zakelijk ---- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lsoort{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--surface-2);border:1px solid var(--line);
border-radius:14px;padding:4px;margin-top:20px}
.lsoort button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;border-radius:10px;
font-size:15px;font-weight:600;color:var(--ink-3);transition:background .15s,color .15s,box-shadow .15s}
.lsoort button:hover{color:var(--ink)}
.lsoort button svg{width:18px;height:18px}
.lsoort button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(18,32,26,.08),0 2px 8px -2px rgba(18,32,26,.14)}
.lsoort button[aria-pressed="true"] svg{color:var(--accent)}
.stap{display:flex;align-items:center;gap:10px;margin:24px 0 10px;font-size:var(--t-micro);font-weight:700;
letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.stap i{font-style:normal;flex:0 0 22px;height:22px;border-radius:50%;background:var(--brand);color:#fff;
display:grid;place-items:center;font-size:11.5px;letter-spacing:0}
.stap::after{content:"";flex:1;height:1px;background:var(--line-2)}
/* ---- KvK-nummer opzoeken ---- */
.kvkveld{display:flex;align-items:stretch;border:1.5px solid var(--line);border-radius:14px;background:var(--surface);
overflow:hidden;transition:border-color .15s,box-shadow .15s}
.kvkveld:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}
.kvkveld .pre{display:grid;place-items:center;padding:0 13px;font-size:12px;font-weight:700;letter-spacing:.08em;
color:var(--ink-3);background:var(--surface-2);border-right:1px solid var(--line-2)}
.kvkveld input,.f .kvkveld input{flex:1;min-width:0;width:auto;border:0;border-radius:0;background:none;padding:0 14px;height:54px;
font-size:18px;font-weight:600;letter-spacing:.14em;font-variant-numeric:tabular-nums;color:var(--ink)}
.kvkveld input::placeholder{color:var(--n-300);font-weight:500}
.kvkveld input:focus,.f .kvkveld input:focus{outline:none}
.kvkveld button{flex:0 0 auto;margin:6px;padding:0 18px;border-radius:10px;background:var(--deep);color:#fff;
font-size:14.5px;font-weight:600;transition:background .15s}
.kvkveld button:hover{background:var(--deep-2)}
.kvkveld button[disabled]{opacity:.55;cursor:wait}
.f.bad .kvkveld{border-color:var(--alert)}
.f.bad .kvkveld input{background:none;border:0}
.kvkstatus{margin-top:10px;font-size:13.5px;color:var(--ink-2);display:flex;gap:9px;align-items:center}
.kvkstatus.fout{color:var(--alert)}
.kvkstatus.ok{color:var(--brand);font-weight:600}
.kvkstatus .spin{flex:0 0 14px;height:14px;border:2px solid var(--line);border-top-color:var(--brand);border-radius:50%;animation:draai .7s linear infinite}
@keyframes draai{to{transform:rotate(360deg)}}
/* robotcheck */
.robot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;border:1.5px solid var(--line);border-radius:14px;padding:10px 14px 10px 10px;background:var(--surface-2)}
.robot-vak{display:flex;align-items:center;gap:12px;background:none;border:0;padding:4px;font:inherit;font-size:15px;font-weight:600;color:var(--ink);cursor:pointer;border-radius:10px}
.robot-vak:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.rb-box{width:26px;height:26px;border-radius:8px;border:2px solid var(--n-300);background:var(--surface);display:grid;place-items:center;flex:0 0 26px;transition:border-color .15s,background .15s}
.robot-vak:hover .rb-box{border-color:var(--brand)}
.robot[data-staat="bezig"] .rb-box{border-color:var(--line);border-top-color:var(--brand);border-radius:50%;animation:draai .7s linear infinite}
.robot[data-staat="ja"] .rb-box{background:var(--good);border-color:var(--good)}
.robot[data-staat="ja"] .rb-box::after{content:"";width:7px;height:12px;border:solid #fff;border-width:0 3px 3px 0;transform:translateY(-1px) rotate(45deg)}
.robot[data-staat="fout"]{border-color:var(--alert);background:var(--alert-bg)}
.rb-merk{display:flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--ink-3);letter-spacing:.02em}
.rb-merk svg{width:15px;height:15px;color:var(--good)}
.rb-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
/* robotcontrole: fotoopdracht */
.rb-paneel{margin-top:10px;border:1.5px solid var(--line);border-radius:14px;padding:14px;background:var(--surface)}
.rb-melding{margin:0 0 10px;padding:8px 10px;border-radius:10px;background:var(--alert-bg);color:var(--alert);font-size:13.5px;font-weight:600}
.rb-vraag{display:block;margin:0 0 10px;font-size:15px;color:var(--ink-2);line-height:1.4}
.rb-vraag b{color:var(--ink)}
.rb-tegels{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.rb-tegel{position:relative;aspect-ratio:1/1;padding:0;border:2px solid transparent;border-radius:10px;overflow:hidden;background:var(--surface-2);cursor:pointer;transition:transform .12s,border-color .12s}
.rb-tegel img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;pointer-events:none;user-select:none}
.rb-tegel:hover{border-color:var(--n-300)}
.rb-tegel:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.rb-tegel.aan{border-color:var(--brand);transform:scale(.94)}
.rb-tegel.aan::after{content:"";position:absolute;right:6px;top:6px;width:22px;height:22px;border-radius:50%;background:var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat}
.rb-ant{width:100%;height:46px;border:1.5px solid var(--line);border-radius:10px;padding:0 12px;font:inherit;font-size:17px;background:var(--surface)}
.rb-onder{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}
.rb-pow{font-size:12.5px;color:var(--ink-3)}.rb-pow.klaar{color:var(--good)}
.rb-ga{min-height:42px;padding:0 20px}
.rb-links{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px}
.rb-links button{background:none;border:0;padding:0;font:inherit;font-size:13px;color:var(--ink-3);text-decoration:underline;cursor:pointer}
.rb-links button:hover{color:var(--ink)}
/* twee-stapsverificatie */
.ts-kop{display:flex;gap:12px;align-items:center;margin-top:16px}
.ts-ico{width:42px;height:42px;border-radius:12px;background:var(--brand-tint);color:var(--brand);display:grid;place-items:center;flex:0 0 42px}
.ts-ico svg{width:22px;height:22px}
.ts-kop p{margin:0;font-size:15px;color:var(--ink-2);line-height:1.45}
.ts-demo{margin:12px 0 0;font-size:13.5px;background:var(--accent-tint);color:var(--accent);border-radius:10px;padding:8px 12px}
.ts-demo:empty{display:none}
.ts-code{width:100%;margin-top:14px;border:1.5px solid var(--line);border-radius:14px;padding:14px;text-align:center;font:inherit;font-size:28px;font-weight:700;letter-spacing:.5em;text-indent:.5em;font-variant-numeric:tabular-nums}
.ts-code:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}
.ts-fout{margin:8px 0 0;font-size:14px;color:var(--alert)}.ts-fout:empty{display:none}
.ts-onthoud{display:flex;gap:8px;align-items:center;margin-top:12px;font-size:14px;color:var(--ink-2)}
.ts-onthoud input{width:17px;height:17px;accent-color:var(--brand)}
.ts-acties{display:flex;justify-content:space-between;margin-top:12px}
.ts-acties button{background:none;border:0;padding:4px 0;font:inherit;font-size:14px;font-weight:600;color:var(--brand);cursor:pointer}
.ts-acties button:disabled{color:var(--ink-3);cursor:default}
.kvkhint{font-size:12.5px;color:var(--ink-3);margin-top:10px;line-height:1.5}
/* ---- bedrijfskaart (na het ophalen) ---- */
.bedrijf{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--line);border-radius:16px;padding:16px 16px 15px;
background:var(--surface);box-shadow:var(--e1);animation:inschuif .25s var(--ease)}
@keyframes inschuif{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.bedrijf .ico{position:relative;flex:0 0 44px;height:44px;border-radius:12px;background:var(--brand-tint);color:var(--brand);display:grid;place-items:center}
.bedrijf .ico::after{content:"";position:absolute;right:-5px;bottom:-5px;width:19px;height:19px;border-radius:50%;
border:2px solid var(--surface);background:var(--good) url("data:image/svg+xml;utf8,") center/11px no-repeat}
.bedrijf .bm{font-size:13px;color:var(--ink-3);margin-top:7px}
.bedrijf .ico svg{width:22px;height:22px}
.bedrijf .bi{min-width:0;flex:1}
.bedrijf .bl{font-size:var(--t-micro);font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--good);margin-bottom:4px}
.bedrijf .bn{font-size:16.5px;font-weight:700;letter-spacing:-.015em;line-height:1.3;color:var(--ink)}
.bedrijf .ba{font-size:14px;color:var(--ink-2);margin-top:3px;line-height:1.45}
.bedrijf .bt{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.bedrijf .bt span{font-size:12px;font-weight:600;border-radius:999px;padding:3px 10px;background:var(--surface-2);color:var(--ink-2)}
.bedrijf .bt .ok{background:var(--good-bg);color:var(--good)}
.bedrijf .wijzig{flex:0 0 auto;font-size:13.5px;font-weight:600;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;padding:2px 0}
.bedrijf .wijzig:hover{color:var(--ink)}
.bedrijf-noot{font-size:12px;color:var(--ink-3);margin-top:8px}
.zakblok{margin-top:14px}
.zakblok>label{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin:0 0 6px 3px}
@media (max-width:420px){
.kvkveld .pre{display:none}
.kvkveld button{padding:0 14px}
.bedrijf{flex-wrap:wrap}
.bedrijf .ico{flex-basis:40px;height:40px}
}
/* -- zakelijke stand: subtiel herkenbaar -- */
body.mzakelijk .aanbodband{background:linear-gradient(120deg,#0B2A20 0%,#123B2D 58%,#17503D 100%)}
@media (max-width:760px){
.modus-vraag{display:none}
.modus button{padding:11px 10px 9px;font-size:13.5px}
.modus button svg{width:15px;height:15px}
}
/* ============================================================
verfijning 3: rust in de kop, merkkleur in de fotoband
============================================================ */
.logo{flex:0 0 auto}
.nav{margin-left:6px}
.nav a{padding:9px 10px}
.nav a:nth-child(6){display:none}
@media (max-width:1240px){.nav a:nth-child(5){display:none}}
@media (max-width:1120px){.nav a:nth-child(4){display:none}}
@media (min-width:1000px){.nav a{padding:9px 8px;font-size:14.5px}.nav{gap:0;margin-left:2px}}
.aanbodband::after{display:none}
.aanbodband{background:linear-gradient(120deg,#0F3A2B 0%,#145A42 70%,#1A6C50 100%)}
.fotoband{width:min(calc(100% - 32px),calc(var(--maxw) - 44px));margin:clamp(24px,4vw,48px) auto;background:#0F3A2B;border-radius:var(--r-xl,24px)}
.fotoband img{filter:grayscale(1) contrast(1.12) brightness(.9);opacity:.42;mix-blend-mode:luminosity}
.fotoband::before{content:"";position:absolute;inset:0;background:linear-gradient(95deg,rgba(15,58,43,.96) 0%,rgba(15,58,43,.78) 48%,rgba(20,90,66,.35) 100%)}
.fotoband .fb-in{padding-inline:clamp(22px,4vw,48px)}
.fotoband .fb-stats b{color:#fff}
.fotoband .fb-stats div:first-child b{color:#F0A868}
.rekentool .uit b{white-space:nowrap}
.art svg,.sc-art svg{width:100%;max-width:330px;margin:0 auto}
.band{width:min(calc(100% - 32px),calc(var(--maxw) - 44px));margin-inline:auto}
.dart svg{width:100%;max-width:560px}
/* ============================================================
verfijning 4: foto eerst, slim zoeken, fotocheck
============================================================ */
.card .art{aspect-ratio:3/2;padding:0;background:#EEF2F0;border-bottom:0}
.card .art .foto{width:100%;height:100%;object-fit:cover;object-position:center}
.looptijdchip{position:absolute;left:12px;bottom:12px;z-index:2;display:inline-flex;align-items:baseline;gap:5px;background:rgba(255,255,255,.94);color:var(--ink);
border-radius:999px;padding:5px 11px;font-size:12.5px;font-weight:600;box-shadow:0 2px 10px rgba(0,0,0,.18)}
.looptijdchip b{font-size:14.5px;font-weight:800;color:var(--brand)}
.card .kern{display:none}
.card .fav{bottom:auto;top:12px;right:12px;z-index:2}
.card .flagline{left:12px;right:auto;top:12px;z-index:2}
.card .vidbadge{top:auto;bottom:12px;left:auto;right:12px;z-index:2}
.cfoot .price{display:flex;flex-direction:column;gap:5px}
.cfoot .price .pr{white-space:nowrap}
.eff{font-style:normal;font-size:12.5px;font-weight:700;color:var(--good);letter-spacing:0;line-height:1.2}
.eff.neg{color:var(--ink-3);font-weight:600}
.effkv span{display:flex;flex-direction:column}
.effkv small{font-size:12px;color:var(--ink-3);font-weight:400;margin-top:2px}
.effkv b{color:var(--good)}
.geenfoto{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--ink-3);
background:repeating-linear-gradient(135deg,#EEF2F0 0 12px,#E8EEEA 12px 24px);font-size:13px;font-weight:600;min-height:140px}
.geenfoto svg{width:34px;height:34px;opacity:.7}
.dart .geenfoto{border-radius:inherit}
.slimveld label{display:inline-flex!important;align-items:center;gap:6px;color:var(--accent)!important}
.slimveld input{font-weight:500}
.slimchips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px;font-size:13.5px}
.sc-l{font-weight:700;color:var(--ink-2)}
.sc-c{display:inline-flex;align-items:center;gap:7px;background:var(--brand-tint);color:var(--brand);border-radius:999px;padding:5px 8px 5px 12px;font-weight:700}
.sc-c i{font-style:normal;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:rgba(20,90,66,.12);font-size:13px;line-height:1}
button.sc-c:hover i{background:var(--brand);color:#fff}
.sc-c.tekst{background:var(--surface-2);color:var(--ink-2);padding-right:12px;font-weight:600}
.sc-n{color:var(--ink-3);margin-left:4px}
.fotos figure.verb figcaption{background:rgba(22,107,78,.9)}
.fotos figure.let figcaption{background:rgba(176,58,30,.9)}
.fotohulp{display:flex;gap:14px;align-items:center;background:var(--surface-2);border-radius:12px;padding:10px 14px;margin:6px 0 12px}
.fh-score{flex:0 0 auto;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;align-content:center;position:relative;
background:radial-gradient(closest-side,var(--surface-2) 76%,transparent 78%),conic-gradient(var(--good) calc(var(--p,70)*1%),var(--line) 0)}
.fh-score b{font-size:17px;font-weight:800;line-height:1;color:var(--ink)}
.fh-score span{font-size:8px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.fh-tekst{font-size:13.5px;color:var(--ink-2);line-height:1.45}
.schrijfhulp{display:inline-flex;align-items:center;gap:8px;margin-top:8px;padding:8px 14px;border-radius:999px;background:var(--accent-tint);color:var(--accent);font-weight:700;font-size:14px;border:1px solid rgba(188,98,32,.25)}
.schrijfhulp:hover{background:var(--accent);color:#fff}
.schrijfhulp[disabled]{opacity:.7;cursor:wait}
@media (max-width:600px){.slimchips{font-size:13px}}
/* ============================================================
particulier of zakelijk: twee keuzekaarten in de hero
============================================================ */
.strip-tekst{font-size:13px;color:rgba(220,234,228,.72)}
.keuzekaarten{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px;max-width:600px}
.kk{display:flex;align-items:center;gap:13px;text-align:left;padding:14px 16px;border-radius:16px;
background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.22);color:#fff;
transition:background .18s,border-color .18s,transform .12s,box-shadow .18s;backdrop-filter:blur(6px)}
.kk:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.42);transform:translateY(-1px)}
.kk-ic{flex:0 0 42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.12);transition:background .18s,color .18s}
.kk-ic svg{width:21px;height:21px}
.kk-t{min-width:0}
.kk-t b{display:block;font-size:16px;font-weight:700;letter-spacing:-.01em}
.kk-t small{display:block;font-size:12.5px;opacity:.72;margin-top:2px}
.kk-p{margin-left:auto;font-size:22px;line-height:1;opacity:.55;transition:transform .18s,opacity .18s}
.kk:hover .kk-p{transform:translateX(3px);opacity:.9}
.kk[aria-pressed="true"]{background:#fff;border-color:#fff;color:var(--ink);box-shadow:0 14px 34px -16px rgba(0,0,0,.55)}
.kk[aria-pressed="true"] .kk-ic{background:var(--brand-tint);color:var(--brand)}
.kk[aria-pressed="true"] .kk-t small{opacity:1;color:var(--ink-3)}
.kk[aria-pressed="true"] .kk-p{opacity:1;color:var(--accent)}
.keuzekaarten:has(.kk[aria-pressed="true"]) .kk[aria-pressed="false"]{opacity:.72}
.kk-alles{margin-top:10px;font-size:13.5px;font-weight:600;color:rgba(255,255,255,.8);text-decoration:underline;text-underline-offset:3px}
.kk-alles:hover{color:#fff}
.keuzekaarten+.kk-alles+.hero-cta,.keuzekaarten+.kk-alles[hidden]+.hero-cta{margin-top:18px}
@media (max-width:560px){.keuzekaarten{grid-template-columns:1fr;gap:10px}.kk{padding:12px 14px}}
@media (max-width:600px){.topstrip{display:none}}
/* keuzekaarten opvallender: wit op groen, koperen accent; gekozen = koper */
.kk-vraag{margin-top:26px;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#F0A868}
.kk-vraag+.keuzekaarten{margin-top:10px}
.kk{background:#fff;border:2px solid #fff;color:var(--ink);box-shadow:0 16px 36px -18px rgba(0,0,0,.6);backdrop-filter:none}
.kk:hover{background:#fff;border-color:var(--accent);transform:translateY(-2px);box-shadow:0 20px 40px -18px rgba(0,0,0,.65)}
.kk-ic{background:var(--accent-tint);color:var(--accent)}
.kk-t small{opacity:1;color:var(--ink-3)}
.kk-p{opacity:1;color:var(--accent);font-weight:700}
.kk[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 18px 40px -16px rgba(188,98,32,.75)}
.kk[aria-pressed="true"] .kk-ic{background:rgba(255,255,255,.2);color:#fff}
.kk[aria-pressed="true"] .kk-t small{color:rgba(255,255,255,.85)}
.kk[aria-pressed="true"] .kk-p{color:#fff}
.kk[aria-pressed="true"] .kk-p::before{content:"✓";font-size:17px}
.kk[aria-pressed="true"] .kk-p{font-size:0}
.keuzekaarten:has(.kk[aria-pressed="true"]) .kk[aria-pressed="false"]{opacity:1;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28);color:#fff;box-shadow:none}
.keuzekaarten:has(.kk[aria-pressed="true"]) .kk[aria-pressed="false"] .kk-ic{background:rgba(255,255,255,.12);color:#fff}
.keuzekaarten:has(.kk[aria-pressed="true"]) .kk[aria-pressed="false"] .kk-t small{color:rgba(255,255,255,.7)}
.keuzekaarten:has(.kk[aria-pressed="true"]) .kk[aria-pressed="false"] .kk-p{color:rgba(255,255,255,.6)}
/* klikgevoel op de keuzekaarten */
.kk:active{transform:scale(.97);background:var(--accent-tint);border-color:var(--accent)}
.kk[aria-pressed="true"]:active{background:#9C5522;border-color:#9C5522}
.kk.geklikt{animation:kkKlik .45s ease-out}
@keyframes kkKlik{0%{box-shadow:0 0 0 0 rgba(231,165,111,.75)}100%{box-shadow:0 0 0 14px rgba(231,165,111,0)}}
@media (prefers-reduced-motion:reduce){.kk.geklikt{animation:none}}
/* ============================================================
hero: showroom (bento) in plaats van één losse advertentie
============================================================ */
.hb-in{grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr)}
.heroband h1 em{font-style:normal;color:#F0A868}
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:190px 190px auto;gap:12px;text-align:left}
.bt{position:relative;border-radius:20px;overflow:hidden;text-align:left;font:inherit;color:inherit;border:0;
transition:transform .2s ease,box-shadow .2s ease}
button.bt{cursor:pointer}
button.bt:hover{transform:translateY(-3px);box-shadow:0 22px 40px -18px rgba(0,0,0,.55)}
button.bt:active{transform:scale(.985)}
.bt-feat{grid-column:1/span 2;grid-row:1/span 2;background:#fff;color:var(--ink);display:flex;flex-direction:column;padding:18px 20px}
.bt-kop{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.bt-naam{display:block;font-size:23px;font-weight:800;letter-spacing:-.025em;line-height:1.1}
.bt-sub{display:block;font-size:13px;color:var(--ink-3);margin-top:4px}
.bt-tag{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;font-size:11.5px;font-weight:700;background:var(--surface-2);color:var(--ink-2);white-space:nowrap}
.bt-tag.cu{background:var(--accent-tint);color:var(--accent)}
.bt-tag.gr{background:var(--brand-tint);color:var(--brand)}
.bt-foto{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;margin:2px -20px 0}
.bt-foto img{height:100%;max-height:180px;width:auto;max-width:100%;object-fit:contain;transition:transform .5s ease}
.bt-foto .geenfoto{min-height:120px;border-radius:12px;margin:8px 20px}
button.bt-feat:hover .bt-foto img{transform:scale(1.035)}
.bt-onder{display:grid;gap:10px}
.bt-prijsrij{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.bt-grootprijs{font-size:32px;font-weight:800;letter-spacing:-.03em;line-height:1}
.bt-grootprijs small,.bt-prijs small{font-size:12.5px;font-weight:500;color:var(--ink-3);letter-spacing:0;margin-left:3px}
.bt-noot{text-align:right;font-size:12px;color:var(--ink-3);line-height:1.4}
.bt-loop{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--ink-3);white-space:nowrap}
.bt-loop b{color:var(--brand);font-weight:700}
.bt-balk{display:flex;height:6px;border-radius:6px;background:var(--brand-tint);overflow:hidden}
.bt-balk i{display:block;height:100%;background:var(--brand);border-radius:6px;margin-left:auto}
.bt-ad{background:#fff;color:var(--ink);padding:15px 16px;display:flex;flex-direction:column}
.bt-merk{display:block;font-size:22px;font-weight:800;letter-spacing:-.03em;line-height:1.05;margin-top:12px}
.bt-model{display:block;font-size:12.5px;color:var(--ink-3);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bt-prijs{margin-top:auto;font-size:21px;font-weight:800;letter-spacing:-.025em;line-height:1}
.bt-ad .bt-loop{margin:8px 0 6px}
.bt-ad .bt-prijs small{white-space:nowrap;display:inline-block}
.bt-ad .bt-balk{height:4px}
.bt-stappen{grid-column:1/span 2;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);color:#fff;padding:16px 18px;backdrop-filter:blur(8px)}
.bt-sk{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.bt-sk b{font-size:15px}
.bt-sk a{font-size:12.5px;color:#F0A868;font-weight:600;text-decoration:none;white-space:nowrap}
/* stoplicht: rood → oranje → groen */
.bt-stappen ol{list-style:none;margin:12px 0 0;padding:8px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;
background:rgba(4,14,10,.42);border:1px solid rgba(255,255,255,.08);border-radius:18px;box-shadow:inset 0 2px 10px rgba(0,0,0,.35)}
.bt-stappen li{--lamp:#E5484D;--gloed:rgba(229,72,77,.55);border-radius:12px;padding:11px 12px;background:rgba(255,255,255,.04);
border:1px solid transparent;animation:btStap 7.5s infinite}
.bt-stappen li:nth-child(2){--lamp:#F5A524;--gloed:rgba(245,165,36,.55);animation-delay:2.5s}
.bt-stappen li:nth-child(3){--lamp:#30C57A;--gloed:rgba(48,197,122,.55);animation-delay:5s}
.bt-stappen li:nth-child(2) .n{animation-delay:2.5s}.bt-stappen li:nth-child(3) .n{animation-delay:5s}
@keyframes btStap{0%,30%{background:color-mix(in srgb,var(--lamp) 14%,transparent);border-color:color-mix(in srgb,var(--lamp) 45%,transparent)}
34%,100%{background:rgba(255,255,255,.04);border-color:transparent}}
.bt-stappen .n{width:26px;height:26px;border-radius:50%;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;
color:rgba(255,255,255,.55);background:color-mix(in srgb,var(--lamp) 28%,#0b1a14);box-shadow:inset 0 -2px 4px rgba(0,0,0,.4);
animation:btLamp 7.5s infinite}
@keyframes btLamp{0%,30%{background:radial-gradient(circle at 35% 30%,#fff 0,var(--lamp) 42%,var(--lamp) 100%);color:#10201a;
box-shadow:0 0 0 3px color-mix(in srgb,var(--lamp) 30%,transparent),0 0 16px 4px var(--gloed)}
34%,100%{background:color-mix(in srgb,var(--lamp) 28%,#0b1a14);color:rgba(255,255,255,.55);box-shadow:inset 0 -2px 4px rgba(0,0,0,.4)}}
.bt-stappen li b{display:block;font-size:13.5px;margin-top:9px;line-height:1.25}
.bt-stappen li p{font-size:12px;line-height:1.4;color:rgba(255,255,255,.68);margin-top:4px}
.bt-cijfer{background:var(--accent-tint);color:var(--ink);padding:16px 18px;display:flex;flex-direction:column}
.bt-num{font-size:50px;font-weight:800;letter-spacing:-.045em;line-height:.95;color:var(--accent)}
.bt-num small{font-size:18px;letter-spacing:-.01em;margin-left:4px}
.bt-numt{font-size:13px;font-weight:700;margin-top:8px;line-height:1.3}
.bt-nums{font-size:12px;color:var(--ink-2);margin-top:auto;padding-top:8px;line-height:1.4}
@media (prefers-reduced-motion:reduce){.bt-stappen li,.bt-stappen .n{animation:none}.bt-stappen .n{background:var(--lamp);color:#10201a}}
@media (max-width:1180px){.hb-in{grid-template-columns:1fr}.bento{max-width:720px}}
/* passend op elke breedte: de indeling kijkt naar de ruimte van het vak zelf, niet naar het scherm */
.bento-vak{container:bento/inline-size;min-width:0}
@container bento (max-width:540px){
.bento{grid-template-columns:1fr 1fr;grid-template-rows:auto;gap:10px}
.bt-feat{grid-column:1/-1;grid-row:auto;min-height:340px;padding:16px}
.bt-foto{margin:0 -16px}
.bt-foto img{max-height:160px}
.bt-ad{min-height:170px;padding:13px}
.bt-merk{font-size:19px}
.bt-ad .bt-loop span{display:none}.bt-ad .bt-loop{justify-content:flex-end}
.bt-prijsrij{flex-direction:column;align-items:flex-start;gap:6px}.bt-noot{text-align:left}
.bt-stappen{grid-column:1/-1}
.bt-cijfer{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-items:center}
.bt-nums{grid-column:1/-1;padding-top:10px}
}
.bt-stappen{container:stap/inline-size;min-width:0}
.bt-stappen li{min-width:0}
.bt-stappen li b,.bt-stappen li p{overflow-wrap:break-word;hyphens:auto}
@container stap (max-width:470px){
.bt-stappen ol{grid-template-columns:1fr;gap:6px}
.bt-stappen li{display:grid;grid-template-columns:26px 1fr;column-gap:12px;align-items:center;padding:9px 12px}
.bt-stappen li b{margin-top:0}.bt-stappen li p{grid-column:2;margin-top:2px}
}
@container stap (max-width:250px){.bt-sk{flex-direction:column;gap:2px}}
.bt-cijfer{container-type:inline-size;min-width:0}
.bt-num{font-size:clamp(30px,34cqi,50px)}
.bt-num small{font-size:clamp(13px,11cqi,18px)}
.bt-numt{overflow-wrap:break-word;hyphens:auto}
/* kwaliteitsronde: kleine schermen en aanraakdoelen */
.mobmenu{max-height:calc(100dvh - 100%);max-height:calc(100dvh - 64px);overflow-y:auto;overscroll-behavior:contain}
.menu{max-height:calc(100dvh - 80px);overflow-y:auto}
.sheet .x{min-width:40px;min-height:40px;display:grid;place-items:center;right:10px;top:8px}
.ph .x{min-width:40px;min-height:40px;display:grid;place-items:center}
.back{padding:8px 0;margin:16px 0 8px}
.cijfers .und span{font-size:11px!important;letter-spacing:.03em!important}
.bedrijf .wijzig{padding:8px 0}
.rb-tekst{text-align:left}
@media (max-width:360px){.rb-merk{font-size:0;gap:0}.rb-merk svg{width:18px;height:18px}}
@media (max-width:420px){
.boostkeuze label{display:grid;grid-template-columns:18px minmax(0,1fr);column-gap:12px;padding:14px 14px}
.boostkeuze .prijs{grid-column:2;text-align:left;margin-top:6px;display:flex;gap:8px;align-items:baseline}
.boostkeuze .prijs s{display:inline}
.kc-rij .btn{padding-inline:12px;font-size:15px}
.kc-rij{flex-wrap:wrap}
.kc-rij input{letter-spacing:.04em;padding:11px 12px;flex:1 1 100%;font-size:16px}
.kc-rij .btn{flex:1 1 100%}
.boostkeuze .prijs{justify-content:flex-start;margin-left:0}
}
/* iPhone zoomt in bij invoervelden kleiner dan 16px: op aanraakschermen altijd 16px */
@media (hover:none) and (pointer:coarse){input:not([type=checkbox]):not([type=radio]):not(.ts-code),select,textarea{font-size:16px!important}}
/* voorbeeldfoto op wit: laat de witte achtergrond wegvallen tegen het podium */
img.wit{mix-blend-mode:multiply}
/* achtergrond zonder foto: vector, dus op elk scherm haarscherp */
.heroband{background:
radial-gradient(60% 75% at 92% 0%,rgba(208,116,44,.26),transparent 62%),
radial-gradient(55% 70% at 0% 100%,rgba(48,168,114,.20),transparent 60%),
linear-gradient(155deg,#12432F 0%,#0C2F22 100%)}
.heroband::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background-image:radial-gradient(rgba(255,255,255,.10) 1px,transparent 1.5px);background-size:22px 22px;
-webkit-mask-image:linear-gradient(100deg,transparent 18%,#000 70%);mask-image:linear-gradient(100deg,transparent 18%,#000 70%)}
.heroband::after,body.mzakelijk .heroband::after{background:none}
.fotoband{background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700' viewBox='0 0 700 700' fill='none' stroke='%23ffffff' stroke-opacity='.075' stroke-width='1.2'%3E%3Ccircle cx='700' cy='350' r='90'/%3E%3Ccircle cx='700' cy='350' r='160'/%3E%3Ccircle cx='700' cy='350' r='230'/%3E%3Ccircle cx='700' cy='350' r='300'/%3E%3Ccircle cx='700' cy='350' r='370'/%3E%3Ccircle cx='700' cy='350' r='440'/%3E%3Ccircle cx='700' cy='350' r='510'/%3E%3Ccircle cx='700' cy='350' r='580'/%3E%3Ccircle cx='700' cy='350' r='650'/%3E%3Ccircle cx='700' cy='350' r='720'/%3E%3Ccircle cx='700' cy='350' r='790'/%3E%3Ccircle cx='700' cy='350' r='860'/%3E%3Ccircle cx='700' cy='350' r='930'/%3E%3C/svg%3E") right -120px center/auto 150% no-repeat,
radial-gradient(70% 90% at 100% 50%,rgba(208,116,44,.18),transparent 65%),
linear-gradient(120deg,#0F3A2B 0%,#12432F 100%)}
.fotoband::before{display:none}
/* minder "sjabloon": labels in gewone zinsopmaak in plaats van spatiërende hoofdletters */
.eyebrow,.block h4,.or,.foot h4,.bh-tabel th,.pkaart .top,.und span,.cijfers .und span,.bh-kop .env,.bh-stat span,.lijstkop,
.grid.lijst .kern .bon.ja,.plaatsknop .gratis,.soortlabel,.koopbadge,.stap,.aanbodband .tel span,.bedrijf .bl,.fh-score span,.kk-vraag{
text-transform:none!important;letter-spacing:0!important}
.eyebrow{font-size:14.5px;font-weight:600}
.block h4,.foot h4{font-size:14px;font-weight:600}
.pkaart .top,.stap,.kk-vraag{font-size:14px;font-weight:600}
.cijfers .und span,.und span,.bh-stat span,.aanbodband .tel span{font-size:12.5px!important;font-weight:600}
.soortlabel,.koopbadge,.bedrijf .bl,.plaatsknop .gratis,.grid.lijst .kern .bon.ja{font-size:12.5px;font-weight:600}
.or{font-size:13px;font-weight:500}
.rdwbron{display:inline-block;margin-left:6px;font-size:11.5px;font-weight:600;color:var(--good);background:var(--good-bg);border-radius:999px;padding:1px 7px;vertical-align:1px}
td.let{color:var(--alert)}
.rdwuit.let{background:var(--alert-bg);color:var(--ink-2)}
.rdwuit.let b{color:var(--alert);display:block;font-size:16px;margin-bottom:2px}
/* bonus in goud; bewaren-knop rechtsboven zodat hij nooit over een label valt */
:root{--goud-a:#FCE9AE;--goud-b:#F1C75B;--goud-ink:#5B4300;--goud-rand:rgba(166,124,0,.35);--goud-stip:#B8860B}
.flagline.pos,.bt-tag.cu,.kern .bon.ja,.grid.lijst .kern .bon.ja{
background:linear-gradient(135deg,var(--goud-a),var(--goud-b))!important;color:var(--goud-ink)!important;
border:1px solid var(--goud-rand)!important;box-shadow:0 4px 12px -6px rgba(166,124,0,.55)}
.flagline.pos::before{background:var(--goud-stip)!important}
.card .fav{top:12px!important;right:12px!important;left:auto!important;bottom:auto!important}
.card .flagline{left:12px!important;right:auto!important;max-width:calc(100% - 72px)}
/* uitgelichte advertentie: label "Uitgelicht" en een koperen rand om de kaart */
.card.boost{border:2px solid var(--accent)!important;box-shadow:0 10px 28px -14px rgba(188,98,32,.55)}
.card.boost .flagline.top{display:inline-flex;align-items:center;gap:6px}
.card.boost .flagline.top::before{display:none}
.grid.lijst .card.boost{border-width:2px!important}
/* stoplicht strakker en compacter */
.bt-stappen{padding:14px 16px}
.bt-stappen ol{margin-top:10px;padding:6px;gap:6px;border-radius:16px}
.bt-stappen li{padding:9px 11px;border-radius:11px}
.bt-stappen li b{font-size:14px;margin-top:8px;line-height:1.2}
.bt-stappen li p{font-size:12.5px;margin-top:2px;line-height:1.35}
@container stap (max-width:470px){
.bt-stappen ol{gap:5px}
.bt-stappen li{padding:8px 11px;column-gap:11px}
.bt-stappen li b{margin-top:0}
.bt-stappen li p{margin-top:1px}
}
/* het O-teken uit het logo als opsommingsteken */
:root{--o-icoon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill-rule='evenodd' d='M53.5,97.0 L45.3,96.8 L36.7,95.0 L29.1,91.7 L25.6,89.6 L21.6,86.5 L18.3,83.3 L15.7,80.2 L11.6,73.5 L8.5,65.6 L7.1,57.7 L7.1,50.5 L8.1,44.2 L10.4,37.2 L13.7,30.9 L16.0,27.7 L19.1,24.2 L23.3,20.4 L26.7,17.9 L30.9,15.5 L35.3,13.6 L39.3,12.5 L43.7,11.8 L44.0,2.7 L73.6,20.0 L44.0,37.0 L43.7,26.8 L39.8,28.1 L35.1,30.4 L31.6,32.9 L28.5,36.0 L25.6,40.5 L23.2,46.0 L22.0,51.6 L22.0,56.3 L22.7,60.7 L24.6,65.8 L26.9,70.0 L30.5,74.3 L34.9,77.8 L38.8,79.8 L44.0,81.4 L48.8,82.0 L54.2,81.7 L59.1,80.5 L63.7,78.4 L68.6,75.0 L72.6,70.5 L75.5,65.6 L77.3,60.2 L78.0,54.9 L77.7,50.2 L76.3,44.7 L74.0,39.8 L70.2,34.2 L82.8,26.9 L83.8,27.7 L85.9,30.5 L89.6,37.4 L91.7,44.0 L92.6,49.8 L92.9,53.5 L92.6,58.6 L91.9,63.3 L90.8,67.7 L87.5,75.1 L82.6,82.1 L80.0,84.9 L76.3,88.2 L69.3,92.6 L61.4,95.6 L53.5,97.0Z'/%3E%3C/svg%3E")}
.eyebrow{display:flex;align-items:center;gap:8px}
.eyebrow::before,.hero .eyebrow::before,.aanbodband .eyebrow::before{content:"";flex:0 0 auto;width:14px;height:14px;border-radius:0;background:currentColor;
-webkit-mask:var(--o-icoon) center/contain no-repeat;mask:var(--o-icoon) center/contain no-repeat}
.hero .eyebrow::before,.heroband .eyebrow::before{background:var(--accent-2)}
.trust i{width:13px;height:13px;border-radius:0;background:var(--accent)!important;flex:0 0 auto;
-webkit-mask:var(--o-icoon) center/contain no-repeat;mask:var(--o-icoon) center/contain no-repeat}
.check li::before{border:0!important;border-radius:0!important;width:16px;height:16px;flex:0 0 16px;margin-top:3px;background:var(--brand)!important;
-webkit-mask:var(--o-icoon) center/contain no-repeat;mask:var(--o-icoon) center/contain no-repeat}
/* kleine foto in lijstjes: placeholder past in het vakje */
.row .thumb{overflow:hidden;padding:0}
.thumb .geenfoto{min-height:0;height:100%;gap:0;font-size:0;border-radius:inherit}
.thumb .geenfoto svg{width:22px;height:22px}
/* O-teken optisch op de regel: de ring zit lager in het vakje dan de pijl, dus iets omhoog */
.eyebrow::before,.hero .eyebrow::before,.aanbodband .eyebrow::before{transform:translateY(-1px)}
.trust i{transform:translateY(-1px)}
.check li::before{margin-top:4px!important}
/* hero met foto: stoplicht linksboven op de foto, uitgelicht contract onderaan */
.hfoto-vak{container:hf/inline-size;min-width:0}
.hfoto{position:relative}
.hf-fig{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:1/1.04;min-height:420px;max-height:640px;width:100%;
box-shadow:0 30px 60px -30px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08);background:#1a3a2e}
.hf-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:30% 40%}
.hf-kaartvak{position:absolute;left:16px;right:16px;bottom:16px;display:flex}
.hf-kaart{display:block;width:min(380px,100%);text-align:left;border:0;cursor:pointer;background:rgba(255,255,255,.96);color:var(--ink);
border-radius:18px;padding:12px 14px 13px;box-shadow:0 18px 40px -18px rgba(0,0,0,.6);backdrop-filter:blur(8px);font:inherit;transition:transform .2s}
.hf-kaart:hover{transform:translateY(-2px)}
.hf-lbl{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--accent)}
.hf-lbl::before{content:"";width:12px;height:12px;background:currentColor;-webkit-mask:var(--o-icoon) center/contain no-repeat;mask:var(--o-icoon) center/contain no-repeat}
.hf-rij{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;margin-top:6px}
.hf-thumb{width:64px;height:44px;border-radius:10px;background:var(--surface-2);overflow:hidden;display:grid;place-items:center}
.hf-thumb img{width:100%;height:100%;object-fit:contain}
.hf-tekst b{display:block;font-size:16px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hf-tekst small{display:block;font-size:13px;color:var(--ink-3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hf-prijs{font-size:20px;font-weight:800;letter-spacing:-.02em;text-align:right;white-space:nowrap}
.hf-prijs small{display:block;font-size:11.5px;font-weight:500;color:var(--ink-3);letter-spacing:0}
.hf-kaart .bt-balk{margin-top:10px}
.hf-stap{position:absolute;top:16px;left:16px;width:min(280px,50%);margin:0;background:rgba(9,34,25,.74)!important;
border:1px solid rgba(255,255,255,.14)!important;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:20px;box-shadow:0 18px 40px -20px rgba(0,0,0,.6)}
@container hf (max-width:560px){
.hf-fig{aspect-ratio:1/1;min-height:0}
.hf-img{object-position:34% 38%}
.hf-stap{position:static;width:auto;margin-top:12px;background:rgba(255,255,255,.07)!important;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
.hf-kaartvak{left:10px;right:10px;bottom:10px}
.hf-kaart{width:100%}
}
@container hf (max-width:360px){.hf-thumb{display:none}.hf-rij{grid-template-columns:minmax(0,1fr) auto}}
/* meerdere foto's op de kaart */
.art .fototeller{position:absolute;right:10px;bottom:10px;z-index:3;display:inline-flex;align-items:center;gap:5px;padding:4px 9px 4px 8px;border-radius:999px;
background:rgba(15,58,43,.82);color:#fff;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.art .fototeller i{font-style:normal}
.art .fnav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:34px;height:34px;border-radius:50%;border:0;padding:0;display:grid;place-items:center;cursor:pointer;
background:rgba(255,255,255,.94);color:var(--ink);box-shadow:0 2px 10px rgba(0,0,0,.28);opacity:0;transition:opacity .18s}
.art .fnav svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.art .fnav.prev{left:8px}.art .fnav.next{right:8px}
.card:hover .art .fnav,.art .fnav:focus-visible{opacity:1}
@media (hover:none){.art .fnav{opacity:.92;width:32px;height:32px}}
.art .fdots{position:absolute;left:50%;bottom:9px;transform:translateX(-50%);z-index:3;display:flex;gap:5px;padding:4px 7px;border-radius:999px;background:rgba(15,58,43,.5)}
.art .fdots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55)}
.art .fdots i.on{background:#fff}
.grid.lijst .art .fnav,.grid.lijst .art .fdots{display:none}
.grid.lijst .art .fototeller{right:4px;bottom:4px;padding:2px 6px;font-size:11px}
.grid.lijst .art .fototeller svg{display:none}
/* hero-foto: zachte, vervaagde randen in plaats van een harde kaart */
.hf-fig{border-radius:0;box-shadow:none;background:none;overflow:visible}
.hf-img{--rand:radial-gradient(ellipse 58% 57% at 52% 48%,#000 52%,rgba(0,0,0,.5) 74%,transparent 98%);
-webkit-mask-image:var(--rand);mask-image:var(--rand)}
@media (min-width:901px){.hfoto{margin-right:-4vw;margin-left:-2vw}}
@container hf (max-width:560px){.hf-img{--rand:radial-gradient(ellipse 56% 56% at 50% 46%,#000 50%,rgba(0,0,0,.5) 72%,transparent 96%)}}
/* aanbieders: foto als kop van het blok */
.verkoop .vk-foto{grid-column:1/-1;position:relative;margin:0;border-radius:18px;overflow:hidden;height:clamp(210px,27vw,310px);background:#0F3A2B}
.verkoop .vk-foto img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:70% 12%;display:block}
.verkoop .vk-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,34,25,.86) 0%,rgba(9,34,25,.55) 42%,rgba(9,34,25,0) 75%),linear-gradient(0deg,rgba(9,34,25,.5) 0%,rgba(9,34,25,0) 45%)}
.verkoop .vk-foto figcaption{position:absolute;z-index:1;left:clamp(20px,3vw,34px);bottom:clamp(18px,2.6vw,30px);right:20px;color:#fff}
.verkoop .vk-foto .eyebrow{color:#F0A868;display:flex;gap:8px;align-items:center;margin:0}
.verkoop .vk-foto h2{color:#fff;margin:8px 0 0;font-size:clamp(23px,3.2vw,38px);letter-spacing:-.03em;line-height:1.08;max-width:18ch}
.verkoop .vk-l>p:first-child{margin-top:0}
.verkoop{align-items:start}.verkoop .rekentool{align-self:start}
@media (max-width:820px){.verkoop .vk-foto{height:clamp(200px,58vw,300px);margin:-2px -2px 0}.verkoop .vk-foto img{object-position:60% 14%}}
/* per leasemaatschappij: in de demo als venster, op de echte site een eigen pagina */
.lm-ov{position:fixed;inset:0;z-index:600;background:#fff;display:flex;flex-direction:column}
.lm-ov[hidden]{display:none}
.lm-bar{flex:none;display:flex;align-items:center;min-height:54px;padding:6px 14px;border-bottom:1px solid var(--line,#D9E2DC);background:#fff}
.lm-terug{font:inherit;font-size:15px;font-weight:600;color:var(--brand,#145A42);background:none;border:0;cursor:pointer;padding:10px 8px;min-height:44px}
.lm-ov iframe{flex:1;width:100%;border:0;background:#fff}
/* zakelijke sectie en afsluiter */
.sec-a,.sec-b{
--sec-night:#0A2B20;
--sec-deep:var(--deep,#0F3A2B);
--sec-brand:var(--brand,#145A42);
--sec-cu:#A65A1E;
--sec-cu-hover:#A5521A;
--sec-cu-text:#E9B98C;
--sec-soft:#DCEAE4;
--sec-hair:rgba(255,255,255,.16);
font-family:var(--f-b,"Inter",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif);
color:#fff;
}
.sec-a *,.sec-b *{box-sizing:border-box}
.sec-a img,.sec-b img{display:block;max-width:none}
/* gedeelde onderdelen */
.sec-h{font-weight:700;letter-spacing:-.034em;line-height:1.05;color:#fff;text-wrap:balance;margin:0}
.sec-p{font-size:17px;line-height:1.6;color:var(--sec-soft);margin:0;max-width:44ch;text-wrap:pretty}
.sec-rule{display:block;width:28px;height:1px;background:var(--sec-cu-text);margin:0 0 22px}
.sec-eyebrow{display:flex;align-items:center;gap:14px;font-size:15px;font-weight:600;letter-spacing:-.005em;color:var(--sec-cu-text);margin:0 0 20px}
.sec-eyebrow::before{content:"";width:28px;height:1px;background:currentColor;flex:none}
.sec-btn{cursor:pointer;-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:12px 26px;border-radius:10px;
font-family:inherit;font-size:16px;font-weight:600;line-height:1.25;letter-spacing:-.01em;text-align:center;text-decoration:none;color:#fff;
border:1px solid transparent;transition:background .16s,border-color .16s}
.sec-btn-main{background:var(--sec-cu)}
.sec-btn-main:hover{background:var(--sec-cu-hover)}
.sec-btn-alt{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.55)}
.sec-btn-alt:hover{background:rgba(255,255,255,.14);border-color:#fff}
.sec-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* gedeelde fotogradering: ontzadigd nachtgroen, licht vignet, zacht uitlopend in effen groen */
.sec-photo{position:absolute;overflow:hidden;background:var(--sec-night)}
.sec-photo img{width:100%;height:100%;object-fit:cover}
.sec-photo::before,.sec-photo::after{content:"";position:absolute;inset:0;pointer-events:none}
.sec-photo::before{z-index:1;background:var(--sec-brand);mix-blend-mode:soft-light;opacity:.3}
.sec-photo::after{z-index:2}
/* ---------- sectie A ---------- */
.sec-a{margin:20px 0 96px}
.sec-a-card{position:relative;isolation:isolate;overflow:hidden;background:var(--sec-deep);border-radius:16px;min-height:540px;display:flex;align-items:center}
.sec-a-card::after{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid rgba(255,255,255,.07);pointer-events:none}
.sec-a-photo{top:0;bottom:0;right:0;left:38%;z-index:-1;
-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.5) 16%,#000 42%);
mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.5) 16%,#000 42%)}
.sec-a-photo img{object-position:46% 34%;filter:saturate(.95) contrast(1.05) brightness(1.02)}
.sec-a-photo::after{background:
linear-gradient(90deg,rgba(15,58,43,.92) 0,rgba(15,58,43,.7) 26%,rgba(15,58,43,.25) 46%,rgba(15,58,43,0) 64%),
linear-gradient(180deg,rgba(10,43,32,.22),rgba(10,43,32,0) 28%,rgba(10,43,32,0) 72%,rgba(10,43,32,.45))}
.sec-a-copy{position:relative;padding:72px 0 72px 72px;width:min(100%,600px)}
.sec-a .sec-h{font-size:clamp(34px,3.6vw,50px);margin-bottom:24px}
.sec-a .sec-p{max-width:40ch}
.sec-price{display:block;margin:26px 0 32px;padding:15px 0;border-top:1px solid var(--sec-hair);border-bottom:1px solid var(--sec-hair);
font-weight:600;color:#fff;max-width:40ch;text-wrap:balance}
/* ---------- sectie B ---------- */
.sec-b{position:relative;background:var(--sec-deep);overflow:hidden;isolation:isolate}
.sec-b::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(255,255,255,.08)}
.sec-b-stage{position:relative;max-width:1600px;margin:0 auto;min-height:clamp(560px,42vw,660px);display:flex;align-items:center}
.sec-b-photo{top:0;bottom:0;left:0;width:68%;z-index:-1;
-webkit-mask-image:linear-gradient(90deg,#000 50%,rgba(0,0,0,.5) 78%,transparent 100%);
mask-image:linear-gradient(90deg,#000 50%,rgba(0,0,0,.5) 78%,transparent 100%)}
.sec-b-photo img{object-position:42% 30%;filter:saturate(.95) contrast(1.05) brightness(1.02)}
.sec-b-photo::after{background:
linear-gradient(270deg,rgba(15,58,43,.85) 0,rgba(15,58,43,.35) 40%,rgba(15,58,43,0) 75%),
linear-gradient(180deg,rgba(10,43,32,.4),rgba(10,43,32,0) 24%,rgba(10,43,32,0) 66%,rgba(10,43,32,.6))}
.sec-nieuws{margin-top:34px;padding-top:26px;border-top:1px solid rgba(255,255,255,.16);max-width:520px}
.sec-nieuws-kop{margin:0 0 14px;font-size:18px;font-weight:600;letter-spacing:-.01em;color:#fff;line-height:1.3}
.sec-nieuws-sub{margin:-6px 0 14px;font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.8)}
.sec-nieuws .nb-rij{display:flex;gap:10px}
.sec-nieuws input[type=email]{flex:1;min-width:0;min-height:52px;padding:12px 18px;border-radius:10px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.08);color:#fff;font:inherit;font-size:16px}
.sec-nieuws input[type=email]::placeholder{color:rgba(255,255,255,.6)}
.sec-nieuws input[type=email]:focus{outline:2px solid var(--sec-cu);border-color:transparent;background:rgba(255,255,255,.12)}
.sec-nieuws .sec-btn{flex:none}
.nb-ak{display:flex;gap:10px;align-items:flex-start;margin-top:12px;font-size:13px;line-height:1.5;color:rgba(255,255,255,.72)}
.nb-ak input{margin-top:3px;flex:none;width:18px;height:18px;accent-color:var(--sec-cu)}
.nb-ak a{color:#fff;text-decoration:underline}
.nb-err{margin-top:10px;font-size:14px;font-weight:600;color:#ffb4a3}
.nb-klaar{margin:0;font-size:15px;font-weight:600;color:#fff;line-height:1.5}
@media (max-width:760px){.sec-nieuws{margin-top:28px;padding-top:22px}.sec-nieuws .nb-rij{flex-direction:column}.sec-nieuws .sec-btn{width:100%}}
.sec-b-copy{position:relative;margin-left:58%;padding:88px 56px 88px 0;width:42%;min-width:0}
.sec-b .sec-h{font-size:clamp(32px,3.4vw,50px);margin-bottom:24px}
.sec-b .sec-p{margin-bottom:34px}
.sec-b-actions{display:flex;flex-wrap:wrap;gap:12px}
@media (min-width:1601px){
.sec-b-photo{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 50%,rgba(0,0,0,.5) 78%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 50%,rgba(0,0,0,.5) 78%,transparent 100%)}
}
@media (max-width:1100px){
.sec-a-copy{padding-left:48px}
.sec-b-copy{margin-left:54%;width:46%;padding-right:40px}
}
/* ---------- tablet en mobiel: foto boven, tekst eronder ---------- */
@media (max-width:900px){
.sec-a{margin:8px 0 64px}
.sec-a-card{display:block;min-height:0}
.sec-a-photo{position:relative;left:auto;height:clamp(270px,58vw,440px);z-index:0;
-webkit-mask-image:linear-gradient(180deg,#000 45%,transparent 96%);mask-image:linear-gradient(180deg,#000 45%,transparent 96%)}
.sec-a-photo img{object-position:46% 28%}
.sec-a-photo::after{background:linear-gradient(180deg,rgba(10,43,32,.15),rgba(10,43,32,0) 40%)}
.sec-a-copy{width:auto;padding:0 40px 52px;margin-top:-20px}
.sec-a .sec-h{font-size:clamp(30px,6vw,44px)}
.sec-b-stage{display:block;min-height:0}
.sec-b-photo{position:relative;width:auto;height:clamp(310px,66vw,500px);z-index:0;
-webkit-mask-image:linear-gradient(180deg,#000 48%,transparent 96%);mask-image:linear-gradient(180deg,#000 48%,transparent 96%)}
.sec-b-photo img{object-position:36% 28%}
.sec-b-photo::after{background:linear-gradient(180deg,rgba(10,43,32,.35),rgba(10,43,32,0) 30%)}
.sec-b-copy{margin:-8px 0 0;width:auto;padding:0 40px 64px;max-width:680px}
.sec-b .sec-h{font-size:clamp(30px,6vw,44px)}
}
@media (max-width:520px){
.sec-p{font-size:16.5px}
/* foto-eerst en over de volle breedte, buiten de gutter van de container */
.sec-a-card{margin:0 -22px;border-radius:0}
.sec-a-card::after{display:none}
.sec-a-copy{padding:0 22px 48px}
.sec-b-copy{padding:0 22px 64px}
.sec-a .sec-h{font-size:clamp(25px,7.6vw,32px)}
.sec-b .sec-h{font-size:clamp(28px,7.8vw,34px)}
.sec-btn{width:100%}
.sec-b-actions{flex-direction:column}
}
@media (max-width:340px){
.sec-btn{padding:12px 16px}
}
@media (prefers-reduced-motion:no-preference){
.sec-photo img{transition:transform 1.2s cubic-bezier(.2,.6,.2,1)}
.sec-a-card:hover .sec-photo img,.sec-b:hover .sec-photo img{transform:scale(1.02)}
}
/* hero-foto wisselt mee met de keuze particulier / zakelijk */
.hf-img{transition:opacity .45s ease}
/* fotoband met foto aan de rechterkant */
.fotoband{overflow:hidden}
.fotoband img.fb-foto{inset:auto;left:auto;opacity:1;filter:none;mix-blend-mode:normal;z-index:0;position:absolute;top:0;right:0;height:100%;width:52%;object-fit:cover;object-position:100% 30%;
-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 38%);mask-image:linear-gradient(90deg,transparent 0%,#000 38%)}
.fotoband .fb-in{position:relative;z-index:1}
@media (min-width:821px){.fotoband .fb-in{margin:0;width:54%;max-width:none;padding-inline:clamp(28px,4vw,56px) 0}
.fotoband .fb-stats{max-width:none;gap:22px 26px}.fotoband .fb-stats span{display:block;max-width:15ch}}
@media (max-width:820px){.fotoband img.fb-foto{position:relative;width:100%;height:260px;display:block;-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}
.fotoband .fb-in{padding-top:8px}}
/* voor aanbieders: foto */
/* -- juridisch: pagina's, akkoordvakjes, cookiemelding -- */
.lg-sheet{width:min(760px,100%);padding:0;display:flex;flex-direction:column;overflow:hidden}
.lg-kop{padding:22px 28px 0;position:relative;flex:none}
.lg-kop h2{font-size:26px;margin:0 40px 14px 0}
.lg-nav{flex:none;display:flex;gap:6px;overflow-x:auto;padding:0 28px 14px;margin:0;scrollbar-width:none;border-bottom:1px solid var(--line)}
.lg-nav::-webkit-scrollbar{display:none}
.lg-nav button{flex:none;font:inherit;font-size:14px;font-weight:600;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--paper);color:var(--ink-2);cursor:pointer;min-height:40px}
.lg-nav button[aria-current="true"]{background:var(--brand);border-color:var(--brand);color:#fff}
.lg-body{padding:6px 28px 30px;overflow-y:auto;flex:1;overscroll-behavior:contain}
.lg-body h3{font-size:17.5px;font-weight:700;letter-spacing:-.012em;margin:26px 0 8px}
.lg-body p{margin:0 0 12px;color:var(--ink-2);font-size:16px;line-height:1.62;max-width:68ch}
.lg-body a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
.lg-body b{color:var(--ink)}
.lg-datum{font-size:13.5px;color:var(--ink-3);margin-top:14px!important}
.lg-leeg{background:var(--accent-tint);color:var(--accent);border-radius:4px;padding:0 5px;font-size:.92em}
.lg-model{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:6px 0 14px;background:var(--surface-2)}
.lg-model p{margin:0 0 6px;font-size:15px}
.lg-sheet .x{top:14px}
.lg-ak-groep{display:grid;gap:10px;margin:16px 0 4px}
.lg-ak{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;line-height:1.5;color:var(--ink-2);cursor:pointer;text-align:left}
.lg-ak input{flex:none;width:20px;height:20px;margin:2px 0 0;accent-color:var(--brand)}
.lg-ak a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
.lg-ak-groep[hidden],.lg-ak[hidden]{display:none}
.lg-err{font-size:13.5px;color:var(--alert);font-weight:600;margin:6px 0 0}
.lg-err[hidden]{display:none}
.lg-ak-los{margin:14px 0 4px}
.lg-zak{display:none}
body.plaatszak .lg-zak{display:inline}
body.plaatszak .lg-par{display:none}
.chatnoot{margin:0;padding:9px 16px;font-size:12.5px;line-height:1.45;color:var(--ink-2);background:var(--surface-2);border-bottom:1px solid var(--line)}
.chatnoot a{color:var(--brand);text-decoration:underline}
.fineprint a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
.fine a{color:inherit;text-decoration:none}
.fine a:hover{color:var(--ink);text-decoration:underline}
.fine2{margin:10px 0 0;font-size:12.5px;line-height:1.55;color:var(--ink-3);max-width:80ch}
.cookiebar{position:fixed;left:20px;bottom:20px;z-index:65;width:min(400px,calc(100vw - 40px));background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px 18px;box-shadow:0 24px 60px -28px rgba(0,0,0,.5);font-size:14px;line-height:1.5;color:var(--ink-2)}
.cookiebar[hidden]{display:none}
.cookiebar p{margin:0 0 12px}
.cookiebar a{color:var(--brand);text-decoration:underline}
.cookiebar .btn{min-height:42px}
@media (max-width:760px){
.cookiebar{left:12px;right:12px;width:auto;bottom:calc(12px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:12px;padding:11px 12px 11px 14px;font-size:13.5px;line-height:1.4}
body.na-hero .cookiebar{bottom:calc(86px + env(safe-area-inset-bottom,0px))}
.cookiebar p{margin:0;flex:1}
.cookiebar .btn{flex:none;min-height:44px}
.lg-kop{padding:18px 20px 0}.lg-nav{padding:0 20px 12px}.lg-body{padding:4px 20px 26px}
.lg-kop h2{font-size:23px}
}
body.appmode .cookiebar{bottom:14px}
.meldveld{display:grid;gap:6px;margin-top:14px}
.meldveld label{font-size:14px;font-weight:600;color:var(--ink)}
.meldveld input,.meldveld textarea{font:inherit;font-size:15.5px;padding:11px 13px;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);width:100%;box-sizing:border-box}
.meldveld textarea{min-height:92px;resize:vertical}
.meldveld[hidden]{display:none}
/* -- footer op de telefoon -- */
@media (max-width:760px){
.foot{padding:30px 0 24px}
.fgrid{grid-template-columns:1fr 1fr;gap:22px 16px}
.fgrid>div:nth-child(1){grid-column:1/-1;order:0}
.fgrid>div:nth-child(2){order:1}
.fgrid>div:nth-child(4){order:2}
.fgrid>div:nth-child(3){order:3;grid-column:1/-1}
.foot .logo{display:block}
.foot .logo img{height:22px;width:auto;max-width:100%}
.fgrid>div:nth-child(1) p{max-width:none;margin-top:12px}
.foot ul{gap:0}
.foot li a{display:block;padding:7px 0;font-size:14px;line-height:1.35}
.fgrid>div:nth-child(3) ul{display:block;columns:2;column-gap:16px}
.fgrid>div:nth-child(3) li{break-inside:avoid}
.foot h4{margin-bottom:4px}
.fine{gap:0 20px;margin-top:20px}
.fine span{flex:0 0 100%;margin-bottom:4px}
.fine a{display:block;padding:7px 0;white-space:nowrap}
.plaatsbalk .btn{white-space:nowrap}
}
@media (max-width:350px){.plaatsbalk .btn{font-size:14.5px}
}
/* -- tekstblok onder de marktplaats -- */
.seotxt{padding:clamp(40px,6vw,64px) 0;border-top:1px solid var(--line)}
.seotxt h2{font-size:clamp(24px,2.8vw,32px);letter-spacing:-.02em;margin:0 0 14px;max-width:26ch}
.seotxt .cols{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,5vw,60px);align-items:start}
.seotxt p{color:var(--ink-2);line-height:1.65;margin:0 0 14px;max-width:62ch}
.seotxt .links{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.seotxt .links a{display:block;padding:13px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);text-decoration:none;color:var(--ink)}
.seotxt .links a:hover{border-color:var(--ink-3)}
.seotxt .links b{display:block;font-size:14.5px;font-weight:600}
.seotxt .links span{display:block;font-size:13px;color:var(--ink-3);margin-top:3px;line-height:1.4}
@media (max-width:760px){.seotxt .cols{grid-template-columns:1fr}.seotxt .links{grid-template-columns:1fr}}
/* -- prijs op aanvraag voor meerdere auto's -- */
.offerteband{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:22px;padding:22px 24px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.offerteband h3{font-size:19px;margin:0 0 6px;letter-spacing:-.01em}
.offerteband p{margin:0;color:var(--ink-2);line-height:1.55;max-width:60ch;font-size:15px}
.offerteband .btn{flex:none}
.of-rij{display:flex;gap:8px;align-items:stretch}
.of-rij input{flex:1;min-width:0}
.of-rij .btn{flex:none;white-space:nowrap;min-width:92px;border:1px solid var(--line)}
.offerte-hint{display:none;margin:-4px 0 12px}
body.plaatszak .offerte-hint{display:block}
@media (max-width:760px){.offerteband{flex-direction:column;align-items:stretch;gap:14px;padding:18px}.offerteband .btn{width:100%}}
.vl-prijs{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px;margin:12px 0 2px;font-size:15px;color:var(--ink-3)}
.vl-prijs b{font-size:26px;letter-spacing:-.02em;color:var(--ink)}
.vl-banner{display:grid;gap:8px;margin:0 0 14px}
.vl-banner>div{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--accent-tint);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);border-radius:14px;padding:12px 14px;font-size:15px;line-height:1.4;color:var(--ink)}
.vl-banner .btn{flex:none}
@media(max-width:560px){.vl-banner>div{flex-direction:column;align-items:stretch}}
.mobmenu{max-height:calc(100vh - 70px);max-height:calc(100dvh - 70px);overflow-y:auto}
/* terugbelverzoek: stappen, verificatie en agenda */
.of-st{display:flex;align-items:center;gap:10px;margin:26px 0 10px;font-weight:700;font-size:16px;color:var(--ink)}
.of-st:first-of-type{margin-top:12px}
.of-st i{flex:none;width:26px;height:26px;border-radius:50%;background:var(--brand);color:var(--on-brand);font-style:normal;font-size:13px;display:grid;place-items:center}
#of_codeblok{margin-top:10px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2)}
#of_codeblok .of-vk{display:flex;gap:10px;align-items:flex-start;margin-bottom:6px;font-size:14px;color:var(--ink-2)}
#of_codeblok .of-vk svg{flex:none;color:var(--brand);margin-top:2px}
#of_codeblok .of-vk b{display:block;color:var(--ink);font-size:15px}
#of_code{font-size:22px;letter-spacing:.5em;text-align:center;font-variant-numeric:tabular-nums;font-weight:600}
.of-cal{border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:16px;position:relative;max-width:460px}
.of-cal.is-lock .of-body{opacity:.4;pointer-events:none;filter:grayscale(1)}
.of-lock{display:flex;gap:10px;align-items:center;margin:0 0 12px;padding:10px 12px;border-radius:10px;background:var(--accent-tint);color:#6B3510;font-size:14px;line-height:1.45}
.of-kop{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.of-kop b{font-size:16px;text-transform:capitalize}
.of-kop button{width:44px;height:44px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);font-size:18px;cursor:pointer}
.of-kop button:disabled{opacity:.35;cursor:default}
.of-wd,.of-dagen{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}
.of-wd span{font-size:12.5px;color:var(--ink-3);padding:4px 0;font-weight:600}
.of-d{height:44px;border:1px solid transparent;border-radius:12px;background:var(--surface-2);color:var(--ink);font:inherit;font-size:15px;cursor:pointer}
.of-d:disabled{background:transparent;color:var(--n-300);cursor:default}
.of-d.is-nu{border-color:var(--brand)}
.of-d.is-sel,.of-t.is-sel{background:var(--brand);color:var(--on-brand);border-color:var(--brand)}
.of-d:not(:disabled):hover,.of-t:hover{border-color:var(--brand)}
.of-sl{margin-top:14px}
.of-sl>b{display:block;font-size:14px;margin-bottom:8px}
#of_slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.of-t{height:44px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);font:inherit;font-size:15px;cursor:pointer}
.of-hint{grid-column:1/-1;margin:2px 0 0;font-size:13.5px;color:var(--ink-3)}
.of-pick{margin:14px 0 0;padding:10px 12px;border-radius:10px;background:var(--surface-2);font-size:14.5px;color:var(--ink-2)}
.of-pick.is-set{background:var(--good-bg);color:var(--good);font-weight:600}
.of-d:focus-visible,.of-t:focus-visible,.of-kop button:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
/* scherpte en kleur */
html{text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-optical-sizing:auto}
img{image-rendering:auto}
.of-d:disabled{color:#8C9A93}
/* toegankelijkheid: links in lopende tekst herkenbaar zonder kleur, zichtbare focus */
p a:not(.btn):not([class*="btn"]),li a:not(.btn),.legal a,.small a,.note-d a,td a:not(.btn){text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid #145A42;outline-offset:2px}
.tw:focus-visible{outline-offset:-3px}
/* terugbelformulier: meer lucht */
#of_form .frow{margin-bottom:20px}
#of_form .f>label,#of_form .lbl{display:block;margin-bottom:9px;font-weight:600;color:var(--ink)}
#of_form input,#of_form select,#of_form textarea{min-height:50px;padding:12px 14px;border:1.5px solid var(--n-300);border-radius:12px;background:#fff;font-size:16px;box-shadow:none}
#of_form textarea{min-height:130px}
#of_form input:focus,#of_form select:focus,#of_form textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}
.of-st{margin:40px 0 18px;padding-top:26px;border-top:1px solid var(--line);font-size:18px}
.of-st:first-of-type{margin-top:22px;padding-top:0;border-top:0}
#of_codeblok{margin:14px 0 6px;padding:18px}
.of-cal{margin-top:6px;padding:20px;box-shadow:var(--shadow-s)}
.of-cal.is-lock .of-body{opacity:.55;filter:none}
.of-kop{margin-bottom:14px}
.of-wd,.of-dagen{gap:6px}
.of-sl{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.of-pick{margin-top:18px}
#of_form .lg-ak{margin-top:28px;display:flex;gap:12px;align-items:flex-start;line-height:1.5}
#of_form #of_knop{margin-top:22px}
#of_form .legal{margin-top:16px}
.band .step .n,.band .n,.heroband .n,.aanbodband .n{color:#F0A868}
/* ankers: niet onder de vaste kop laten verdwijnen */
html{scroll-padding-top:128px}
@media (max-width:900px){html{scroll-padding-top:78px}}
/* looptijd, effectief per maand en bonus duidelijk dikgedrukt */
.mnd,.mnd b{font-weight:800;color:var(--ink)}
.mnd b{font-size:1.12em}
.eff{font-style:normal;font-weight:800;color:var(--brand-deep)}
.eff.neg{color:var(--accent)}
.bon{font-weight:800}
.effkv span,.effkv b{font-weight:800}
.effkv span small{font-weight:500}
.looptijdchip{font-size:14px;font-weight:800;color:var(--ink)}
.looptijdchip b{font-size:17px;font-weight:800}
.flagline.pos{font-weight:800;font-size:14px}
.kv.effkv b{font-size:1.25em}
/* foto's vullen altijd het hele vak */
.art .foto,.dart .dfoto,.thumb .tfoto,.gal img{object-fit:cover;object-position:center}
.sc-art .scfoto,.fotos img,.hf-thumb img,.grid.lijst .art .foto{object-fit:cover;object-position:center}
/* logo altijd volledig zichtbaar: ook onder de statusbalk van een telefoon */
.top{top:env(safe-area-inset-top,0px)}
.top .logo,.top .logo-t,.sh .logo,.sh .logo-t{overflow:visible;padding-block:3px}
.logo small.pw,.logo-t small.pw,.logo .pw{line-height:1.35;padding-bottom:2px;overflow:visible}
.logo svg,.logo-t svg{overflow:visible}
/* geen horizontaal scrollen op smalle schermen: lange links en e-mailadressen mogen afbreken */
.art,.art li,.art p,.art a,.art td,.art th,.cg,.lgrid,.lgrid>*{overflow-wrap:anywhere;min-width:0}
.tw td,.tw th{overflow-wrap:normal}
/* nav-zakelijk-fix: ruimte voor het extra menu-item */
@media (min-width:821px) and (max-width:1360px){.nav{margin-left:2px;gap:0}.nav a{padding:9px 7px;font-size:14px}}
.nav a[aria-current=page]{font-weight:700;color:#144636}
@media (max-width:1400px){.nav a:nth-child(5){display:none}}
/* introductieactie (tekst en bedragen uit assets/js/prijs.js) */
.lo-actie{display:inline-block;margin:10px 0 0;padding:7px 12px;border-radius:10px;background:#FCE9D9;color:#7A3A0F;font-size:14.5px;font-weight:700;line-height:1.35}
.lo-actie.klein{font-size:13px;margin:6px 0 2px}
figcaption .lo-actie{background:#F2B27E;color:#12201A}
.lo-kopzin{font-size:19px;font-weight:700;line-height:1.35;color:var(--ink);margin:0 0 6px;letter-spacing:-.01em}
.vk-l .lo-actie{margin:0 0 14px}
/* toegankelijkheid: links in lopende tekst onderstrepen, tikdoelen minimaal 44px */
.foot p a,.faq p a{text-decoration:underline;text-underline-offset:2px}
/* één knopstijl: overal pil-vorm */
.sec-btn,.nb-form button,.kc-rij .btn{border-radius:999px}
/* ============ homepage na de review (MK1, D4, D5, ME4, ME5) ============ */
/* hero: twee knoppen en een bewijsregel */
.hero-knoppen{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.hero-knoppen .btn{min-height:50px;padding:0 24px;font-size:16px;font-weight:700}
.btn-licht{background:rgba(255,255,255,.1);color:#fff;border:1.5px solid rgba(255,255,255,.6)}
.btn-licht:hover{background:rgba(255,255,255,.18);border-color:#fff}
.hero-bewijs{display:flex;flex-wrap:wrap;gap:6px 16px;margin:18px 0 0;font-size:14px;color:rgba(255,255,255,.85)}
.hero-bewijs span{display:inline-flex;align-items:center;gap:6px}
.hero-bewijs span::before{content:"";width:16px;height:16px;flex:0 0 16px;border-radius:50%;background:rgba(255,255,255,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/10px no-repeat}
/* rechts: echte contracten als kaartjes in plaats van een stockfoto */
.hf-stapel{display:grid;gap:12px;justify-items:end}
.hf-stapel .hf-kaart{width:min(420px,100%)}
.hf-stapel .hf-kaart:nth-child(2){margin-right:28px;opacity:.97}
.hf-stapel .hf-kaart:nth-child(3){margin-right:56px;opacity:.93}
.hf-stapel .hf-thumb .geenfoto{transform:scale(.6)}
.hf-leeg{background:rgba(255,255,255,.08);border:1px dashed rgba(255,255,255,.3);border-radius:18px;padding:22px;color:#fff;display:grid;gap:4px;width:min(420px,100%)}
/* zoeken: de Filters-knop alleen op mobiel */
.search .filterknop{display:none}
@media (max-width:820px){
.hfoto-vak{display:none}
.hb-in{padding-block:28px 40px}
.hero-knoppen .btn{flex:1 1 140px}
.search .filterknop{display:inline-flex}
.search .mfilter{display:none}
.search.toon-filters .mfilter{display:block}
.search{grid-template-columns:1fr 1fr}
.search .slimveld{grid-column:1/-1}
.search .btn{grid-column:auto}
.search.toon-filters .mfilter{grid-column:1/-1}
}
/* aanbod: aparte tab voor nieuw zakelijk (financial lease) */
.soorttabs{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 14px;border-bottom:1px solid var(--line-2)}
.st-tab{display:inline-flex;align-items:baseline;gap:6px;padding:10px 14px;min-height:44px;font-weight:600;font-size:15px;color:var(--ink-2);text-decoration:none;border-bottom:2.5px solid transparent;margin-bottom:-1px}
.st-tab[aria-current=page]{color:var(--brand-deep);border-bottom-color:var(--brand)}
.st-tab small{font-weight:500;color:var(--ink-3);font-size:12.5px}
a.st-tab:hover{color:var(--brand)}
/* lege resultaten: zoekalert voorop */
.leeg-alert{grid-column:1/-1}
.leeg-knoppen{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:16px}
/* aanbieden zonder foto */
.vk-kop{font-size:clamp(24px,3vw,34px);font-weight:800;letter-spacing:-.03em;margin:6px 0 14px}
/* tarieven: zakelijk als één regel */
.zak-regel{margin:22px 0 0;padding:16px 20px;border-radius:14px;background:var(--surface-2);color:var(--ink-2)}
.zak-regel a{font-weight:700;color:var(--brand);white-space:nowrap}
/* vertrouwen: drie kaarten */
.wz-drie{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:820px){.wz-drie{grid-template-columns:1fr}}
/* vragen: smalle kolom */
.wrap.smal{max-width:820px}
/* slotblok zonder foto */
.sec-b-zonder .sec-b-stage{min-height:0;justify-content:center}
.sec-b-zonder .sec-b-copy{margin:0 auto;width:auto;max-width:720px;padding:64px 24px;text-align:left}
.vk-kop{font-size:clamp(22px,2.6vw,30px);line-height:1.2}
@media (max-width:820px){.hero-knoppen{flex-wrap:nowrap}.hero-knoppen .btn{flex:1 1 0;padding:0 12px;font-size:15px;white-space:nowrap}}
/* ============ flows na de review (ME1, ME2, ME3) ============ */
/* inloggen: akkoord als zin */
.lg-zin{margin:14px 0 4px;font-size:13.5px;line-height:1.5;color:var(--ink-3)}
.lg-zin a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
/* plaatsen in drie stappen */
.voortgang{display:flex;gap:6px;list-style:none;margin:14px 0 18px;padding:0;counter-reset:s}
.voortgang li{flex:1;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ink-3);padding-top:8px;border-top:3px solid var(--line-2)}
.voortgang li span{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--surface-2);font-size:12px;flex:0 0 22px}
.voortgang li[aria-current=step]{color:var(--brand-deep);border-top-color:var(--brand)}
.voortgang li[aria-current=step] span{background:var(--brand);color:#fff}
.voortgang li.klaar{color:var(--brand);border-top-color:var(--brand-tint)}
.voortgang li.klaar span{background:var(--brand-tint);color:var(--brand)}
@media (max-width:520px){.voortgang li{font-size:0;gap:0}.voortgang li span{font-size:12px}.voortgang li[aria-current=step]{font-size:13px;gap:8px}}
.stapknoppen{display:flex;justify-content:space-between;gap:10px;margin-top:18px;position:sticky;bottom:-1px;background:linear-gradient(transparent,var(--surface) 30%);padding-top:14px;padding-bottom:4px}
.stapknoppen .btn{min-height:50px;padding:0 22px;font-weight:700}
.stapknoppen .btn-b{flex:1;max-width:340px;margin-left:auto}
.pvoorbeeld{pointer-events:none;max-width:380px;margin:0 auto 16px}
/* detail: belangrijkste info bovenaan */
.dkop{margin:4px 0 16px}
.dkop h1{margin-top:0}
.dkern{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;margin-top:12px}
.dk-prijs{font-size:30px;font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.dk-prijs small{font-size:14px;font-weight:500;color:var(--ink-3);letter-spacing:0;margin-left:2px}
.dk-mnd{font-size:16px;color:var(--ink-2)}
.dk-bonus,.dk-vergoeding{font-size:14px;font-weight:700;padding:4px 10px;border-radius:999px;background:#FCEFC7;color:#7A5200}
.dk-vergoeding{background:var(--accent-tint);color:var(--accent)}
.dart{position:relative}
.dfoto-acties{position:absolute;left:14px;top:14px;display:flex;gap:8px;z-index:2}
.dfoto-acties button{width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.94);box-shadow:0 4px 14px -6px rgba(0,0,0,.35);display:grid;place-items:center;cursor:pointer;color:var(--ink)}
.dfoto-acties button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.dfoto-acties button[aria-pressed=true] svg{fill:var(--brand);stroke:var(--brand)}
.dmeld{margin:22px 0 0;font-size:14px;color:var(--ink-3)}
.dmeld button{background:none;border:0;padding:6px 2px;font:inherit;font-weight:600;color:var(--ink-2);text-decoration:underline;cursor:pointer;min-height:44px}
/* berichtvak op de detailpagina */
.berichtvak{display:grid;gap:8px;margin:4px 0 6px}
.berichtvak label{font-weight:700;font-size:15px}
.berichtvak textarea{width:100%;border:1.5px solid var(--line);border-radius:14px;padding:12px;font:inherit;font-size:15px;resize:vertical;min-height:86px}
.berichtvak textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}
.bv-snel{display:flex;flex-wrap:wrap;gap:6px}
.bv-snel button{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 12px;min-height:36px;font:inherit;font-size:13px;cursor:pointer;color:var(--ink-2)}
.bv-snel button:hover{border-color:var(--brand);color:var(--brand)}
.berichtvak .btn-b{min-height:50px;font-weight:700}
.bv-noot{margin:0;font-size:12.5px;color:var(--ink-3);line-height:1.45}
/* mobiel: vaste balk onderaan de detailpagina */
.dbalk{display:none}
@media (max-width:820px){
.dbalk{display:flex;align-items:center;justify-content:space-between;gap:12px;position:fixed;left:0;right:0;bottom:0;z-index:45;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -8px 24px -16px rgba(0,0,0,.4)}
.dbalk span{font-size:14px;color:var(--ink-2)}.dbalk b{font-size:18px;color:var(--ink)}
.dbalk .btn{min-height:48px;padding:0 22px;font-weight:700}
body[data-view=detail] .plaatsbalk{display:none!important}
body[data-view=detail] #viewDetail{padding-bottom:84px}
}
/* delen */
.deel-kanalen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:14px}
.deel-k{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);font:inherit;font-weight:600;font-size:15px;text-decoration:none;cursor:pointer}
.deel-k:hover{border-color:var(--brand);color:var(--brand)}
.deel-k svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:0 0 20px}
/* inloggen kan bovenop een ander venster openen (bijv. bij plaatsen of reageren) */
#login.modal{z-index:75}
@media (max-width:820px){body[data-view=detail] .lochat-open,body[data-view=detail] .totop{bottom:calc(86px + env(safe-area-inset-bottom,0px))}}
/* bonus staat al naast de prijs; op de foto alleen nog 'jouw advertentie' */
#viewDetail .dart .flagline:not(.own){display:none}
.deel-k{font-size:14.5px}
/* chat: melden en blokkeren */
.chat-acties{display:flex;gap:6px}
.chat-acties button{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:0 12px;min-height:36px;font:inherit;font-size:13px;font-weight:600;color:var(--ink-2);cursor:pointer}
.chat-acties button:hover{border-color:var(--no,#B03A1E);color:var(--no,#B03A1E)}
.chat-geblokkeerd{margin:0;padding:14px 16px;background:var(--surface-2);color:var(--ink-2);font-size:14px;text-align:center;border-top:1px solid var(--line)}
@media (max-width:420px){.chat-acties button{padding:0 9px;font-size:12px}}
.ph em{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}
.menu .menu-link{display:flex;width:100%;padding:10px 14px;border-radius:10px;font-size:14.5px;color:inherit;text-decoration:none;font-weight:600}.menu .menu-link:hover{background:var(--surface-2)}
/* financial lease in dezelfde kaarten als overnames */
.soortlabel.fl{background:#e6eef6;color:#1f4e79}
.flagline.fl{background:#fff;color:var(--brand-deep);border:1px solid var(--line-2)}
.card.fl .kern .mnd b{font-weight:700}
.card.fl .cfoot .eff{display:block;font-size:12.5px;color:var(--ink-3);font-weight:600}
.card.fl .cfoot .city{color:var(--brand);font-weight:700}
.dk-bonus.fl{background:#e6eef6;color:#1f4e79}
.fl-demo{grid-column:1/-1;margin:0 0 4px;padding:10px 14px;border-radius:12px;background:#fff7e6;border:1px solid #f3dfb2;font-size:14px;color:#5b4a1f}
body.mfl .alleen-overname{display:none}
@media (max-width:600px){.soorttabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.st-tab{white-space:nowrap;font-size:14.5px;padding:10px 10px}.st-tab small{display:none}}