/* Kommer Motors: rood #B7000C (wit 6,9:1), zwart, antraciet, grijzen; recht, vlak, geen schaduw.
   Sfeer van de oude site (E-156, 03-11): donkere vlakken, rood in volle vlakken, grote tegels, koppen in hoofdletters.
   Wit is het rustpunt, niet de basis. Vorige, lichte versie: docs/ontwerp-v5-wit/. */
@font-face{font-family:"Lalezar";font-weight:400;font-style:normal;font-display:swap;src:url(/assets/fonts/lalezar.woff2) format("woff2")}
@font-face{font-family:"Nunito";font-weight:200 900;font-style:normal;font-display:swap;src:url(/assets/fonts/nunito.woff2) format("woff2")}
:root{--rood:#B7000C;--blauw:#1C4E8F;--rood-licht:#ff6b73;--zwart:#000;--grijs-d:#3B3B3B;--grijs:#686868;--lijn:#D6D6D6;--vlak:#F3F3F3;--wit:#fff;--foto:#e3e3e3;--antraciet:#2b2b2b;--diep:#141414;
--kop:"Lalezar",Impact,"Arial Narrow",sans-serif;--tekst:"Nunito","Segoe UI",Arial,sans-serif;--w:1320px;--sec:clamp(48px,7vw,96px)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{font-family:var(--tekst);color:var(--grijs-d);background:var(--wit);font-size:16px;line-height:1.5;-webkit-text-size-adjust:100%}
img{max-width:100%;display:block;height:auto}
[hidden]{display:none!important}
a{color:var(--rood)}
p{max-width:64ch}
h1,h2,h3,h4,.h4{font-family:var(--kop);font-weight:400;text-transform:uppercase;color:var(--zwart);line-height:1.05;letter-spacing:.01em}
h1{font-size:clamp(2.2rem,4.5vw,3rem)}
h2{font-size:clamp(1.75rem,3vw,2rem);margin-bottom:.5em}
h3{font-size:1.4rem;margin-bottom:.3em}
.oog{font-weight:800;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--rood);margin-bottom:12px;display:block}
.donker .oog{color:var(--rood-licht)}
:focus-visible{outline:3px solid var(--rood);outline-offset:3px}
.donker :focus-visible,.hero2 :focus-visible,footer :focus-visible,.balk :focus-visible{outline-color:#fff}
.w{max-width:var(--w);margin:0 auto;padding:0 24px}
.sec{padding:var(--sec) 0}.sec.vlak{background:var(--vlak)}.sec.bovenkort{padding-top:32px}
.donker{background:var(--zwart);color:#e6e6e6}.donker h1,.donker h2,.donker h3{color:#fff}
.naar-inhoud{position:absolute;left:-9999px}.naar-inhoud:focus{left:12px;top:12px;z-index:300;background:#fff;color:#000;padding:10px 16px;font-weight:800}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;user-select:none} /* KMRS-33g: niet mee bij kopiëren */
.ruim{margin-bottom:40px}.ruim-boven{margin-top:28px}.ruim-onder{margin-bottom:20px}
/* plaatshouders: valt op, zodat niets ongemerkt live gaat */
.navragen{background:#fff3b0;color:#000;outline:1px dashed #8a6d00;padding:0 4px;font-weight:700}
/* knoppen: minimaal 44 px hoog; een rode hoofdknop per blok, de rest omlijnd */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;font-family:var(--tekst);font-weight:700;text-transform:uppercase;font-size:.94rem;letter-spacing:.03em;padding:10px 26px;border:2px solid var(--rood);background:var(--rood);color:#fff;text-decoration:none;cursor:pointer;border-radius:0;transition:background .15s}
.btn:hover{background:var(--zwart);border-color:var(--zwart)}
.btn.rand{background:transparent;color:var(--zwart);border-color:var(--zwart)}.btn.rand:hover{background:var(--zwart);color:#fff}
.donker .btn.rand{color:#fff;border-color:#fff}.donker .btn.rand:hover{background:#fff;color:#000}
.btn.breed{display:flex;width:100%}
.btn.klein{min-height:44px;font-size:1rem;padding:8px 18px}
.link{font-weight:800;color:var(--zwart);text-decoration:none;border-bottom:2px solid var(--rood)}.link:hover{color:var(--rood)}
.uitleg{display:flex;gap:12px;align-items:flex-start;background:var(--vlak);padding:12px 16px;font-size:.92rem;color:var(--grijs-d)}
.uitleg::before{content:"i";flex:none;width:22px;height:22px;border-radius:50%;background:var(--zwart);color:#fff;font:800 .8rem/22px var(--tekst);text-align:center;margin-top:2px}
.uitleg p{max-width:none}
.vlak .uitleg{background:#e8e8e8}
.uitleg.voorbeeld{margin-bottom:20px;background:#fff3b0}
/* kop: zoals de oude site. Logo in een wit vlak met een rode lijn eronder, donkergrijze topbalk met rode belknop, zwarte menubalk */
:root{--melding:var(--blauw)} /* KMRS-48: meldingbalk in het huisstijlblauw #1C4E8F (zelfde als Gereserveerd), wit erop 8,6:1 */
.balk{background:var(--melding);color:#fff;text-align:center;font-weight:700;font-size:.85rem;padding:9px 16px} /* KMRS-46: gewone zin, geen hoofdletters (rustiger) */
/* CRM-29c: kleur per soort (Instellingen > Meldingbalk), alle drie met wit erop ruim boven 4,5:1; sluitknop alleen met JavaScript */
.balk-rood{--melding:var(--rood)}.balk-antraciet{--melding:var(--antraciet)}
.balk[data-balk]{position:relative;padding-right:48px;padding-left:48px}
.balk-weg{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:40px;height:40px;background:none;border:0;color:#fff;font-size:1.4rem;line-height:1;cursor:pointer}
.balk-voorbeeld{font-weight:800}
.tijden-reden{display:block;font-size:.85em;opacity:.8}
.kop{background:var(--zwart);position:relative;z-index:60}
.kop::before{content:"";position:absolute;left:0;right:0;top:0;height:40px;background:var(--antraciet)}
.kop-w{display:flex;position:relative}
.logovlak{flex:none;display:flex;align-items:center;background:#fff;padding:0 clamp(16px,2.4vw,32px);border-bottom:4px solid var(--rood)}
.logovlak .logo{height:62px;width:auto}
.kop-r{flex:1;min-width:0;display:flex;flex-direction:column}
.topbalk{display:flex;justify-content:flex-end;align-items:stretch;height:40px}
.toplinks{display:flex;align-items:stretch}
.toplinks a{display:flex;align-items:center;padding:0 14px;color:#dcdcdc;text-decoration:none;font-size:.75rem;font-weight:400}
.toplinks a:hover,.toplinks a[aria-current]{color:#fff;text-decoration:underline;text-underline-offset:4px}
.topbel{display:flex;align-items:center;background:var(--rood);color:#fff;text-decoration:none;font-family:var(--tekst);font-weight:400;text-transform:uppercase;font-size:.94rem;padding:0 22px}
.topbel:hover{background:#8f0009}
/* KMRS-52: telefoonnummer als gewone tekst in de topbalk, vóór de rode webshopknop */
.toptel{display:flex;align-items:center;padding:0 18px;color:#fff;text-decoration:none;font-size:.8rem;font-weight:700;border-left:1px solid #4a4a4a}
.toptel:hover,.toptel:focus-visible{text-decoration:underline;text-underline-offset:4px}
.hoofdbalk{display:flex;justify-content:flex-end;align-items:center;height:76px;padding:0 clamp(8px,2vw,24px)}
.menu{display:flex;gap:2px;align-items:center}
.menu a{white-space:nowrap;font-family:var(--tekst);font-weight:700;text-transform:uppercase;font-size:.875rem;letter-spacing:.02em;text-decoration:none;color:#fff;padding:10px 14px;min-height:44px;display:inline-flex;align-items:center}
.menu a:hover{background:#262626}
.menu a[aria-current=page]{background:var(--rood);color:#fff}
.alleen-mobiel{display:none}
.mbtn{display:none;font-family:var(--tekst);font-weight:700;font-size:.94rem;background:var(--rood);color:#fff;border:0;padding:0 22px;min-height:48px;text-transform:uppercase;cursor:pointer}
@media(max-width:1100px){.menu a{padding:10px 9px}.toplinks a{padding:0 9px}}
@media(max-width:960px){
.kop::before{height:44px}.kop-w{padding:0}.toplinks{display:none}.topbalk{height:44px}.topbel{flex:1;justify-content:center}
.hoofdbalk{height:64px}.logovlak .logo{height:48px}.js .mbtn{display:block}
.menu{flex-wrap:wrap}
.js .menu{display:none;position:absolute;left:0;right:0;top:100%;background:var(--zwart);flex-direction:column;align-items:stretch;border-top:1px solid #333;z-index:50;padding:8px 24px 16px}
.js .menu.open{display:flex}.js .menu a{border-bottom:1px solid #2a2a2a;min-height:52px;font-size:1.15rem}
.alleen-mobiel{display:contents}.alleen-mobiel a{font-family:var(--tekst);text-transform:none;font-weight:700;font-size:1rem!important}}
/* foto-vlakken */
.foto{background:var(--foto);position:relative;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;color:#595959;font-weight:800;font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;text-align:center;overflow:hidden}
.foto img{width:100%;height:100%;object-fit:cover;object-position:top}
.tag{position:absolute;top:0;left:0;background:var(--zwart);color:#fff;font:800 .68rem/1 var(--tekst);padding:6px 10px;letter-spacing:.08em;text-transform:uppercase;z-index:2}
.tag.rood{background:var(--rood)}
/* status-etiket op kaart en detailfoto (KMRS-15b): klein, recht in de hoek; Gereserveerd blauw, Verkocht rood */
.tag.etiket{left:auto;right:0;font-size:.78rem;padding:8px 12px;letter-spacing:.1em} /* rechtsboven: het logo linksboven in de foto blijft heel (KMRS-15c) */
.tag.tag-gereserveerd{background:var(--blauw)}.tag.tag-verkocht{background:var(--rood)}
.verkocht-melding{display:flex;flex-wrap:wrap;gap:12px 32px;align-items:center;justify-content:space-between;background:var(--zwart);color:#f0f0f0;padding:20px 24px;margin:0 0 20px;border-left:0}
.verkocht-melding .vm-kop{font-family:var(--kop);font-size:clamp(1.4rem,2.2vw,1.9rem);color:#fff;text-transform:uppercase;line-height:1.1;margin:0 0 4px}
.verkocht-melding p{margin:0}
.gereserveerd{font-weight:800;color:#fff;margin-bottom:4px}
.leeg-foto{display:flex;align-items:center;justify-content:center;text-align:center;padding:16px;background:var(--foto);color:#595959;font-weight:800;font-size:.8rem;text-transform:uppercase;letter-spacing:.1em}
/* fotokop (wisselt elke 5 s, zoals de oude site) */
.show{position:absolute;inset:0;overflow:hidden;background:#111}
.show .s{position:absolute;inset:0;visibility:hidden}
.show .s img{width:100%;height:100%;object-fit:cover;display:block}
.show .s.on{visibility:visible;z-index:2}
.show .s.prev{visibility:visible;z-index:1}
/* wissel: de nieuwe foto komt rustig op, zoomt licht in en wordt van onscherp scherp (1,1 s) */
.show .s.on.go{animation:scherpstellen 1.1s cubic-bezier(.25,.1,.25,1) both}
.show .s.on img,.show .s.prev img{animation:zoomin 6.5s linear both}
@keyframes scherpstellen{from{opacity:0;filter:blur(8px);transform:scale(1.06)}to{opacity:1;filter:blur(0);transform:none}}
@keyframes zoomin{from{transform:scale(1)}to{transform:scale(1.1)}}
@keyframes vervaag{from{opacity:0}to{opacity:1}}
.acties{display:flex;gap:12px;flex-wrap:wrap}
.hero2{position:relative;display:flex;align-items:center;min-height:620px;overflow:hidden;background:#000}
.hero2 .w{position:relative;z-index:3;width:100%;padding-top:56px;padding-bottom:56px}
@media(max-width:699px){
.hero2{display:block;min-height:0}
.hero2 .w{padding:0}
}
@media(prefers-reduced-motion:reduce){.show .s.on.go{animation:none}.show .s.on img,.show .s.prev img{animation:none}}
@media(max-width:700px){.show .s.on.go{animation:vervaag 1.2s ease both}.show .s.on img,.show .s.prev img{animation:none}}
/* paginakop zonder foto */
.pk{padding:clamp(28px,5vw,56px) 0 clamp(24px,4vw,40px)}.pk h1{font-size:clamp(2.4rem,6vw,3.8rem)}
.intro{font-size:1.15rem;margin-top:12px}
.acties-rij{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap}
.kruim{font-size:.88rem;margin-bottom:18px;color:#bdbdbd}.kruim a{color:#e6e6e6}
.kruim.licht{color:var(--grijs)}.kruim.licht a{color:var(--grijs-d)}
/* home */
.feiten{background:var(--vlak)}
.feiten ul{list-style:none;display:grid;grid-template-columns:repeat(4,1fr)}
.feiten li{padding:24px 24px 24px 0;font-family:var(--kop);font-weight:400;text-transform:uppercase;color:var(--zwart);font-size:1.2rem;line-height:1.15}
.feiten li span{display:block;font-family:var(--tekst);text-transform:none;font-weight:400;color:var(--grijs-d);font-size:.9rem;margin-top:4px;line-height:1.4}
.feiten li+li{padding-left:24px;border-left:1px solid var(--lijn)}
@media(max-width:860px){.feiten ul{grid-template-columns:1fr 1fr}.feiten li:nth-child(3){padding-left:0;border-left:0}.feiten li:nth-child(n+3){border-top:1px solid var(--lijn)}}
@media(max-width:420px){.feiten ul{grid-template-columns:1fr}.feiten li,.feiten li+li{padding-left:0;border-left:0}.feiten li+li{border-top:1px solid var(--lijn)}}
.kopregel{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin-bottom:32px}.kopregel h2{margin:0}
.kaarten{display:grid;grid-template-columns:repeat(3,1fr);gap:32px 24px}
.kaarten.auto{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
@media(max-width:900px){.kaarten{grid-template-columns:1fr 1fr}}
/* KMRS-40b: Nieuw binnen op de homepage: tablet (700-1024 px) twee naast elkaar met een eigen aantal */
.nieuw-kaarten .alleen-tablet,.nieuw-kaarten .niet-tablet{display:contents}
@media(max-width:699px),(min-width:1025px){.nieuw-kaarten .alleen-tablet{display:none}}
@media(min-width:700px) and (max-width:1024px){.nieuw-kaarten{grid-template-columns:1fr 1fr}.nieuw-kaarten .niet-tablet{display:none}}@media(max-width:560px){.kaarten,.kaarten.auto{grid-template-columns:1fr}}
.stappen{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:40px 64px;counter-reset:s}
@media(max-width:760px){.stappen{grid-template-columns:1fr;gap:28px}}
.stappen li{counter-increment:s;display:grid;grid-template-columns:56px 1fr;gap:4px 12px}
.stappen li::before{content:counter(s);font-family:var(--kop);font-size:3rem;line-height:.9;color:#bdbdbd;grid-row:1/3}
.stappen h3{font-size:1.5rem;margin:0}.stappen p{color:#cfcfcf}
.kom{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,6vw,88px)}
@media(max-width:760px){.kom{grid-template-columns:1fr}}
.kom-foto{align-self:stretch}
.kom-foto img{width:100%;height:100%;min-height:280px;object-fit:cover}
.tijden-kop{margin-top:36px}
.tijden{border-collapse:collapse;width:100%;max-width:360px;margin-bottom:16px}.tijden td,.tijden th{padding:7px 0;border-bottom:1px solid var(--lijn)}.tijden th{font-weight:inherit;text-align:left}.tijden td:last-child{text-align:right;font-weight:800;color:var(--zwart)}
.tijden-extra{margin-bottom:16px;font-weight:700}
.tijden-melding{max-width:360px;margin-bottom:14px;font-weight:800;color:var(--blauw)}.tijden-melding-rood{color:var(--rood)}.tijden-melding-antraciet{color:var(--antraciet)} /* CRM-29c3: gewone zin in de kleur van de balk, geen vlak of rand */
address{font-style:normal;margin-bottom:16px}
.twee{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,6vw,88px);align-items:center}
.twee.boven{align-items:start}
@media(max-width:860px){.twee{grid-template-columns:1fr}}
.twee p+p{margin-top:14px}
/* teksten uit het beheer */
.tekst{max-width:72ch}
.tekst h2{margin-top:40px}.tekst h2:first-child{margin-top:0}
.tekst h3{margin-top:28px}
.tekst p,.tekst ul{margin-bottom:16px}
.tekst ul{padding-left:22px}.tekst li{margin-bottom:6px}
.tekst a{color:var(--zwart);font-weight:800;text-decoration-color:var(--rood);text-decoration-thickness:2px;text-underline-offset:3px}
.tekst.kolommen{max-width:none;columns:2 380px;column-gap:64px}
.tekst.kolommen h2{break-after:avoid;font-size:1.7rem}.tekst.kolommen p,.tekst.kolommen ul{break-inside:avoid}
/* voet */
footer{background:var(--zwart);color:#cfcfcf;font-size:.95rem}
footer .w{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;padding-top:56px;padding-bottom:40px}
@media(max-width:900px){footer .w{grid-template-columns:1fr 1fr}}@media(max-width:520px){footer .w{grid-template-columns:1fr}}
footer .h4{color:#fff;font-size:1.2rem;margin-bottom:10px}
footer a{color:#e6e6e6;text-decoration:none;display:block;padding:6px 0;min-height:36px}footer a:hover{color:#fff;text-decoration:underline}
footer .voetlogo{height:60px;width:auto;margin-bottom:16px}
footer .onder{border-top:1px solid #333;padding:16px 24px;text-align:center;font-size:.85rem;color:#a8a8a8}
/* occasions */
.filters select,.filters input,.v input,.v select,.v textarea{width:100%;min-height:48px;padding:10px 12px;border:1px solid var(--grijs);font:inherit;font-size:16px;background:#fff;border-radius:0;color:var(--grijs-d)}
.js .filters [type=submit]{display:none}
.resbalk{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.resbalk strong{font-family:var(--kop);font-weight:400;font-size:1.5rem;text-transform:uppercase;color:var(--zwart)}
.resbalk select{min-height:44px;padding:8px 10px;border:1px solid var(--grijs);font:inherit;font-size:16px;background:#fff;border-radius:0;margin-left:6px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:40px;background:var(--vlak);border:1px solid var(--lijn);padding:0 12px;font-size:.9rem;font-weight:700;color:var(--zwart);text-decoration:none}
.chip:hover{border-color:var(--zwart)}
/* detail */
.status-label{display:inline-block;vertical-align:middle;background:var(--rood);color:#fff;font:800 .9rem/1 var(--tekst);letter-spacing:.08em;padding:8px 12px}
.galerij{position:relative}
.galerij .groot{aspect-ratio:4/3;background:var(--foto);display:flex;align-items:center;justify-content:center;overflow:hidden}
.galerij .groot img{width:100%;height:100%;object-fit:cover;object-position:top;cursor:zoom-in}
.galerij .groot img[hidden]{display:none}
.gn{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:56px;border:0;background:var(--zwart);color:#fff;font-family:var(--kop);font-size:1.6rem;cursor:pointer;z-index:3}
.gn:hover{background:var(--rood)}.gn.v{left:0}.gn.n{right:0}
/* pijl getekend in plaats van het lettertekens (in Lalezar leek dat op een halve maan) */
.gn{font-size:0;line-height:0}.gn::before{content:"";display:block;width:12px;height:12px;margin:0 auto;border:solid #fff;border-width:0 3px 3px 0;transform:translateX(3px) rotate(135deg)}
.gn.n::before{transform:translateX(-3px) rotate(-45deg)}
.gn:focus-visible{outline:3px solid #fff;outline-offset:-6px}
.teller{position:absolute;bottom:0;right:0;background:var(--zwart);color:#fff;font-weight:800;font-size:.85rem;padding:6px 12px;z-index:3}
.thumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:8px}
.thumbs a{display:block;aspect-ratio:4/3;overflow:hidden;opacity:.6;background:var(--foto)}
.thumbs a img{width:100%;height:100%;object-fit:cover;object-position:top}
.thumbs a[aria-current=true],.thumbs a:hover{opacity:1}
/* hele foto op volledig scherm (klik op de grote foto of Enter); Esc sluit */
.lichtbak{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(0,0,0,.94)}
.lichtbak::backdrop{background:rgba(0,0,0,.94)}
.lichtbak img{position:absolute;inset:56px 64px;width:calc(100% - 128px);height:calc(100% - 112px);object-fit:contain}
.lichtbak .gn{z-index:2}.lichtbak .teller{bottom:auto;top:0;right:auto;left:0}
.lichtbak .sluit{position:absolute;top:0;right:0;width:56px;height:56px;border:0;background:var(--zwart);color:#fff;font-size:1.8rem;line-height:1;cursor:pointer}
.lichtbak .sluit:hover,.lichtbak .sluit:focus-visible{background:var(--rood)}
@media(max-width:600px){.lichtbak img{inset:56px 0;width:100%}}.thumbs a[aria-current=true]{outline:3px solid var(--rood);outline-offset:2px}
.sectie-d{margin-top:clamp(36px,5vw,64px)}
.spec{width:100%;border-collapse:collapse}
.spec th,.spec td{text-align:left;padding:12px 8px 12px 0;border-bottom:1px solid var(--lijn);vertical-align:top}
.spec th{font-weight:700;color:var(--zwart);width:42%}
.spec2{display:grid;grid-template-columns:1fr 1fr;gap:0 56px}@media(max-width:760px){.spec2{grid-template-columns:1fr}}
.over-twee{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px clamp(32px,5vw,72px);align-items:start}
.over-twee.enkel{grid-template-columns:1fr}
.over-twee .tekst{max-width:none}
.opties-blok{background:var(--vlak);padding:clamp(20px,3vw,32px)}
@media(max-width:900px){.over-twee{grid-template-columns:1fr}}
.opties{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px;margin:12px 0 0}
.opties li{position:relative;padding-left:26px;line-height:1.4;font-weight:600}
.opties li::before{content:"";position:absolute;left:5px;top:2px;width:6px;height:11px;border:solid var(--rood);border-width:0 2px 2px 0;transform:rotate(45deg)}
.opties-overig{margin-top:12px;color:var(--grijs-d)}
@media(max-width:420px){.opties{grid-template-columns:1fr}}
/* formulieren */
.v{display:grid;gap:14px;max-width:560px}.v label{display:block;font-weight:800;font-size:.88rem;margin-bottom:5px;color:var(--zwart)}
.v .optioneel{font-weight:400;color:var(--grijs)}
.v [aria-invalid=true]{border:2px solid var(--rood)}
.veldfout{color:var(--rood);font-weight:700;font-size:.9rem;margin-top:4px}
.fout{background:var(--rood);color:#fff;padding:12px 16px;font-weight:700}
.klein:not(.btn){font-size:.85rem;color:var(--grijs)} /* KMRS-54: niet op knoppen, anders grijze tekst op een rode knop */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.bedankt{background:#fff;font-size:1rem}
/* ---- Sfeer oude site (E-156, 03-11) ---- */
.btn.wit{background:#fff;color:var(--zwart);border-color:#fff}.btn.wit:hover{background:var(--zwart);color:#fff;border-color:var(--zwart)}
/* hero: volle foto met donker filter, wit kader met dikke zwarte kop en een zwart label "Sinds 1997" */
.hero2::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.42);z-index:2;pointer-events:none}
.hero2 .w{display:flex;justify-content:center}
.herodoos{position:relative;z-index:3;background:#fff;color:var(--grijs-d);max-width:840px;padding:clamp(28px,4vw,52px) clamp(24px,4vw,56px);text-align:center}
.herodoos h1{color:var(--zwart);font-size:clamp(2rem,3vw,2.9rem);line-height:1;margin-bottom:12px}
.herodoos p{font-size:1.08rem;margin:0 auto 26px}
.herodoos .acties{justify-content:center}
.sinds{position:absolute;top:0;right:0;transform:translateY(-100%);background:var(--zwart);color:#fff;font-weight:700;font-size:1rem;text-transform:uppercase;padding:6px 14px}
.hero2 .herodoos p:last-child{margin-bottom:0} /* KMRS-40a: zonder knoppen geen witruimte onderin */
@media(max-width:699px){.hero2::after{display:none}.herodoos{max-width:none;padding:28px 24px;text-align:left}.herodoos .acties{justify-content:flex-start}.sinds{position:static;transform:none;display:inline-block;margin-bottom:14px}}
.onderdelen-regel{position:relative;display:flex;justify-content:center;gap:12px;align-items:center;background:var(--zwart);color:#fff;text-decoration:none;font-weight:800;padding:18px 24px;text-align:center}
.onderdelen-regel .pijl{color:#fff;font-family:var(--kop);font-size:1.4rem}
.onderdelen-regel:hover span:first-child{text-decoration:underline;text-underline-offset:4px}
/* paginakop zonder foto: donker */
.pk.donker{background:var(--zwart)}.pk.donker .intro{color:#e6e6e6}
/* strook onder de fotokop (pluspunten of openingstijden): zelfde vlak en hoogte als de filterbalk van de occasions */
.strook{background:var(--diep);color:#fff}
.strook .w{display:flex;flex-wrap:wrap;align-items:center;gap:10px 32px;min-height:87px;padding-top:12px;padding-bottom:14px}
.strook-punten{list-style:none;display:flex;flex-wrap:wrap;gap:6px 0;font-weight:700}
.strook-punten li{padding:0 20px;border-left:1px solid #4a4a4a;white-space:nowrap}.strook-punten li:first-child{padding-left:0;border-left:0}
.strook-punten a{color:#fff;text-decoration:underline;text-decoration-color:var(--rood);text-underline-offset:4px}
.strook-punten .vol{color:#ff8a90}
.strook .btn{margin-left:auto;min-height:44px;padding:8px 18px}
@media(max-width:700px){.strook .w{min-height:0;padding-top:14px;padding-bottom:16px}.strook-punten{flex-direction:column}.strook-punten li{padding:0;border-left:0}.strook .btn{margin-left:0;width:100%}}
/* occasion: garantie en belofte */
/* over ons (KMRS-33): tijdlijn, team in rood/zwarte blokken, afsluiter met foto */
.over-tijd h2,.over-team h2{margin-bottom:0}
.tijdlijn{list-style:none;position:relative;max-width:1000px;margin:40px auto 0;padding:0}
.tijdlijn::before{content:"";position:absolute;left:50%;top:6px;bottom:6px;width:2px;margin-left:-1px;background:var(--zwart)}
.tijdlijn li{position:relative;width:50%;padding:0 56px 44px 0;text-align:right}
.tijdlijn li:nth-child(even){margin-left:50%;padding:0 0 44px 56px;text-align:left}
.tijdlijn li:last-child{padding-bottom:0}
.tijdlijn li::before{content:"";position:absolute;top:.9rem;right:-8px;width:16px;height:16px;background:var(--rood)}
.tijdlijn li:nth-child(even)::before{right:auto;left:-8px}
.tl-jaar{display:block;font-family:var(--kop);font-size:clamp(2.8rem,5vw,4.2rem);line-height:1;color:var(--rood);margin-bottom:6px}
.tl-tekst{display:inline-block;max-width:42ch;margin:0;font-size:1.05rem;line-height:1.55}
.tl-tekst p{margin:0;max-width:none}.tl-tekst p::first-letter{text-transform:uppercase}
@media(min-width:761px){.tijdlijn li+li{margin-top:-48px}}
@media(max-width:760px){
  .tijdlijn::before{left:7px}
  .tijdlijn li,.tijdlijn li:nth-child(even){width:auto;margin-left:0;padding:0 0 32px 40px;text-align:left}
  .tijdlijn li::before,.tijdlijn li:nth-child(even)::before{left:0;right:auto;top:.7rem}
}
/* KMRS-35c: team rustig op wit, grote vierkante foto, naam en taak eronder; het rode streepje is het enige accent */
.teamblokken{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:40px clamp(24px,4vw,56px);margin:36px 0 0;padding:0}
.teamblokken li{display:flex;flex-direction:column;gap:16px;color:var(--grijs-d)}
.teamblokken img{width:100%;max-width:280px;height:auto;aspect-ratio:1;object-fit:cover;background:var(--vlak)}
.teamblokken h3{color:var(--zwart);font-size:clamp(1.4rem,1.8vw,1.7rem);margin:0}
.teamblokken .streep{margin:8px 0 10px}
.teamblokken p{margin:0;font-size:.95rem;line-height:1.45}
/* KMRS-33h: met vier of meer mensen op desktop 4 naast elkaar, op tablet 2 per rij */
.teamblokken:has(>li:nth-child(4)){grid-template-columns:repeat(4,1fr)}
@media(max-width:999px){.teamblokken:has(>li:nth-child(4)){grid-template-columns:1fr 1fr}}
@media(max-width:600px){
  .teamblokken,.teamblokken:has(>li:nth-child(4)){grid-template-columns:1fr 1fr;gap:28px 18px}
  .teamblokken li:last-child:nth-child(odd){grid-column:1/-1;max-width:calc(50% - 9px)}
}
/* KMRS-35: blok Waarom Kommer Motors op elke hoofdpagina (zelfde stijl als onder de occasions, .occ-info) */
.occ-info .occ-vast p{margin:0 0 10px;color:#e6e6e6;max-width:52ch}.occ-info .occ-vast a{color:#fff}
.waarom-acties{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
/* KMRS-38a: zonder vinkjes staat de kop links en de tekst (met knoppen) rechts, zodat het blok in balans blijft */
@media(min-width:1001px){
  .occ-waarom.zonder-punten{grid-template-columns:1fr}
  .occ-waarom.zonder-punten>div{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr;column-gap:64px;align-items:start}
  .occ-waarom.zonder-punten>div>h2,.occ-waarom.zonder-punten>div>.streep{grid-column:1}
  .occ-waarom.zonder-punten>div>.occ-vast{grid-column:2;grid-row:1/span 2}
  .occ-waarom.zonder-punten>div>.waarom-acties{grid-column:2;margin-top:10px}
}
.waarom .btn.rand{background:transparent;color:#fff;border-color:#fff}.waarom .btn.rand:hover{background:#fff;color:#000}
.occ-tegels.aantal-3{grid-template-columns:repeat(3,1fr)}.occ-tegels.aantal-2{grid-template-columns:repeat(2,1fr)}
.occ-tegel .wwk{margin:0 0 14px}
.occ-tekst ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.occ-tekst li{position:relative;padding-left:20px}.occ-tekst li::before{content:"";position:absolute;left:3px;top:.35em;width:5px;height:10px;border:solid var(--rood-licht);border-width:0 2px 2px 0;transform:rotate(45deg)}
.occ-icoon .icoon{display:block}
/* nieuwsbrief boven de voet */
.nieuwsbrief{background:var(--antraciet);color:#e6e6e6}
.nieuwsbrief .w{display:grid;grid-template-columns:1fr 1fr;gap:16px 48px;align-items:center;padding-top:40px;padding-bottom:40px}
.nieuwsbrief h2{color:#fff;margin-bottom:6px}
.nb-form label{display:block;font-weight:800;font-size:.88rem;margin-bottom:6px;color:#fff}
.nb-rij{display:flex}.nb-rij input{flex:1;min-width:0;min-height:48px;padding:10px 12px;border:0;font:inherit;font-size:16px;border-radius:0}
.nieuwsbrief .klein{color:#cfcfcf;margin-top:8px}.nieuwsbrief .klein a{color:#fff}
.nb-melding{font-weight:800;color:#fff}.nb-melding.fout{background:var(--rood);padding:10px 14px;margin-bottom:10px}
@media(max-width:760px){.nieuwsbrief .w{grid-template-columns:1fr}}
@media(min-width:700px){.hero2{align-items:flex-end;min-height:520px}.hero2 .w{padding-top:48px;padding-bottom:0}}
/* homepage, eerste scherm (zoals de oude site): één foto loopt door onder de hero en de 6 blokken.
   Daarover een rustige, bijna dichte laag in zwart; rood alleen als accent (streepje, hover). */
.scherm{position:relative;background:#0e0e0e;overflow:hidden}
.scherm>.show{z-index:0}
.scherm .hero2{background:transparent}
.tegels{position:relative;z-index:1}
.tegels-foto{display:none}
.vlakken,.verder-rij{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.vlak-t{position:relative;display:flex;align-items:center;gap:24px;min-height:180px;padding:28px clamp(24px,3vw,48px);text-decoration:none;color:#fff;background:rgba(12,12,12,.88);transition:background-color .25s ease}
.verder .vlak-t{background:rgba(12,12,12,.9)}
.vt-kop{flex:1;min-width:0}
.vlak-t h2,.vlak-t h3{color:#fff;font-size:clamp(1.45rem,1.7vw,1.9rem);letter-spacing:.02em;margin:0}
.streep{display:block;width:28px;height:2px;background:var(--rood);margin:8px 0 10px;transition:width .25s ease}
.vlak-t p{color:#f0f0f0;font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;line-height:1.45;max-width:38ch}
.vlak-t .pijl{flex:none;font-size:1.3rem;line-height:1;color:#fff;opacity:.75;transition:transform .25s ease,opacity .25s ease}
.vlak-t .label{position:absolute;top:14px;right:clamp(24px,3vw,48px);color:#f0f0f0;font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.vlak-t:hover,.vlak-t:focus-visible{background:rgba(4,4,4,.96)}
.vlak-t:hover .streep,.vlak-t:focus-visible .streep{width:56px;background:#fff}
.vlak-t:hover .pijl,.vlak-t:focus-visible .pijl{transform:translateX(6px);opacity:1}
.vlak-t:focus-visible{outline:2px solid #fff;outline-offset:-6px}
.onderdelen-regel{border-top:1px solid rgba(255,255,255,.16)}
:root{--kop-h:116px}
@media(max-width:960px){:root{--kop-h:63px}} /* KMRS-40: compacte kop (60 px + rode lijn) */
/* KMRS-46: met meldingbalk (één regel van 36 px) schuift het eerste scherm van de homepage mee */
@media(min-width:700px){.home .balk{height:36px;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
@media(min-width:961px){.home.met-balk{--kop-h:152px}}
@media(min-width:700px) and (max-width:960px){.home.met-balk{--kop-h:99px}}
/* KMRS-40: eerste scherm (kop in de foto, 6 tegels eronder) vanaf tablet staand (700 px); kleiner = foto, blok en tegels onder elkaar */
@media(min-width:700px){
.scherm{display:flex;flex-direction:column;height:calc(100vh - var(--kop-h));height:calc(100svh - var(--kop-h));min-height:520px}
.scherm .hero2{flex:1;min-height:0}
.scherm .vlak-t{min-height:0;height:clamp(96px,15vh,200px);height:clamp(96px,15svh,200px);padding-top:10px;padding-bottom:10px}
.scherm .herodoos{padding:clamp(20px,3vh,44px) clamp(24px,4vw,56px)}
.scherm .herodoos p{margin-bottom:clamp(14px,2.4vh,26px)}
}
@media(max-width:699px){
.scherm>.show{position:relative;inset:auto;aspect-ratio:16/10}
.tegels-foto{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vlakken,.verder-rij{grid-template-columns:1fr}
.vlak-t{min-height:0;padding:18px 24px}
.vlak-t .label{top:10px;right:24px}.verder .vlak-t{padding-top:32px}
}
/* financieren: aanvraag NuMotorrijden in een iframe */
.aanvraag{margin-top:32px;max-width:900px}
.aanvraag iframe{display:block;width:100%;height:80vh;min-height:900px;border:1px solid var(--lijn);background:#fff}
.aanvraag .klein{margin-top:10px}
@media(max-width:600px){.aanvraag iframe{min-height:1100px}}
/* blokken om en om rood en zwart (dambord): rij 1 rood-zwart-rood, rij 2 zwart-rood-zwart; onder elkaar op mobiel vanzelf om en om */
.vlakken .vlak-t:nth-child(odd),.verder-rij .vlak-t:nth-child(2){background:rgba(183,0,12,.9)}
.vlakken .vlak-t:nth-child(odd) .streep,.verder-rij .vlak-t:nth-child(2) .streep{background:#fff}
.vlakken .vlak-t:nth-child(odd):hover,.vlakken .vlak-t:nth-child(odd):focus-visible,
.verder-rij .vlak-t:nth-child(2):hover,.verder-rij .vlak-t:nth-child(2):focus-visible{background:rgba(165,0,10,.97)}
.nb-rij input{width:0}.nb-rij .btn{flex:none;padding:10px 18px}
/* KMRS-35: nieuwsbrief als smalle rode banner op één regel (kop + tekst | e-mailveld + knop) */
.nieuwsbrief{background:var(--rood);color:#fff}
.nieuwsbrief .w{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px;padding-top:18px;padding-bottom:18px}
.nieuwsbrief .w > div{display:flex;align-items:baseline;gap:6px 16px;flex-wrap:wrap}
.nieuwsbrief h2{font-size:1.5rem;margin:0;color:#fff}
.nieuwsbrief .w > div p{margin:0;color:#fff;font-size:.95rem;max-width:none}
.nb-form{flex:0 1 380px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px}
.nb-form .nb-rij{flex:1 1 300px}
.nb-rij input{min-height:44px}
.nieuwsbrief .nb-rij .btn{min-height:44px;background:var(--zwart);border-color:var(--zwart)}
.nieuwsbrief .nb-rij .btn:hover{background:#fff;color:var(--zwart);border-color:#fff}
.klein-adres address{font-size:.88rem;color:var(--grijs);font-style:normal;margin-top:4px} /* KMRS-35d */
.nb-privacy{color:#fff;font-size:.78rem;margin-left:4px;white-space:nowrap}
.nb-melding.fout{background:var(--zwart);flex-basis:100%}
@media(max-width:700px){.nieuwsbrief .w{padding-top:16px;padding-bottom:18px}.nb-form{flex-basis:100%}}
/* cijfer WebwinkelKeur in het blok Accessoires (zelf opgehaald, geen widget van derden) */
.wwk{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:.78rem;font-weight:600;color:#fff;letter-spacing:.04em}
.wwk strong{font-weight:800;font-size:.9rem}
.sterren{position:relative;display:inline-block;font-size:.9rem;line-height:1;letter-spacing:2px;color:rgba(255,255,255,.35)}
.sterren::before{content:"\2605\2605\2605\2605\2605"}
.sterren span{position:absolute;inset:0 auto 0 0;overflow:hidden;white-space:nowrap;color:#ffc107} /* KMRS-41: gele sterren (contrast 4,2:1 op de rode tegel, 12:1 op zwart); lege ster blijft lichtgrijs */
.sterren span::before{content:"\2605\2605\2605\2605\2605"}
/* ---- Occasions in de stijl van de homepage ---- */
/* paginakop: foto met scherpstel-overgang, donker filter, wit kader */
.paginakop{position:relative;display:flex;align-items:flex-end;min-height:clamp(300px,45vh,460px);overflow:hidden;background:#0e0e0e}
.paginakop::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.42);z-index:2;pointer-events:none}
.paginakop .w{position:relative;z-index:3;width:100%;padding-top:48px}
/* filters: strakke donkere balk (desktop), uitklapbaar (mobiel) */
.filterbalk{background:var(--diep);color:#fff}
.filterbalk .w{padding-top:12px;padding-bottom:14px}
.filters{display:grid;grid-template-columns:minmax(160px,1.4fr) repeat(5,minmax(108px,1fr)) auto auto;gap:10px;align-items:end}
.filters .fv input,.filters .fv select{min-height:40px;padding:6px 10px;font-size:15px}
.filters .btn.klein{min-height:40px;padding:6px 14px}
.filters .fv label{display:block;color:#f0f0f0;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:4px;white-space:nowrap}
.filterknoppen{display:flex;gap:8px}
.filterbalk .btn.rand{color:#fff;border-color:#fff}.filterbalk .btn.rand:hover{background:#fff;color:#000}
.fknop{display:none;width:100%}
@media(max-width:900px){.js .fknop{display:flex}.js .filters{display:none;margin-top:16px}.js .filters.open{display:grid}.filters{grid-template-columns:repeat(2,minmax(0,1fr))}.filterknoppen{grid-column:1/-1}}
/* kaarten: donker, grote foto, prijs in een rood vlak */
/* geen motoren */
.leeg-donker{background:var(--diep);color:#e6e6e6;padding:clamp(28px,4vw,48px)}
.leeg-donker h2{color:#fff;margin-bottom:8px}.leeg-donker p{margin-bottom:20px}
/* occasion-detail: donkere kop met galerij, prijsblok rood, strakke specificaties */
.sectie-d.eerste{margin-top:0}
.spec th{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--grijs-d);vertical-align:middle}
.spec td{color:var(--zwart);font-weight:600}
/* subpagina-kop in de stijl van de homepage-blokken: donkere, licht doorzichtige laag over de foto */
.kopvlak{position:relative;max-width:640px;background:rgba(12,12,12,.88);color:#f0f0f0;padding:26px clamp(24px,3vw,40px) 28px}
.kopvlak .kruim{margin-bottom:12px;color:#cfcfcf}.kopvlak .kruim a{color:#fff}
.kopvlak h1{color:#fff;font-size:clamp(2rem,3vw,2.6rem);margin:0}
.kopvlak .streep{margin:10px 0 14px}
.kopvlak p{font-size:1rem;margin:0 0 18px;color:#f0f0f0}
.kopvlak .btn.rand{color:#fff;border-color:#fff}.kopvlak .btn.rand:hover{background:#fff;color:#000}
.vinkjes{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:6px 24px;margin:0 0 20px;font-size:.8rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#f0f0f0}
.vinkjes li{position:relative;padding-left:22px;line-height:1.45;white-space:nowrap}
.vinkjes li::before{content:"";position:absolute;left:3px;top:2px;width:5px;height:10px;border:solid var(--rood-licht);border-width:0 2px 2px 0;transform:rotate(45deg)}
@media(max-width:520px){.vinkjes{grid-template-columns:1fr}}
@media(max-width:699px){.paginakop{display:block;min-height:0}.paginakop .show{position:relative;inset:auto;aspect-ratio:16/9}.paginakop::after{display:none}.paginakop .w{padding:0}.kopvlak{max-width:none;background:#0c0c0c;padding:22px 24px 24px}}
/* filterbalk sluit aan op het donkere vlak */
.filterbalk{background:#0c0c0c;border-top:1px solid #262626}
.filters .fv input,.filters .fv select{background:#1c1c1c;color:#fff;border:1px solid #4a4a4a}
.filters .fv input::placeholder{color:#a8a8a8}
.filters .fv input:focus,.filters .fv select:focus{border-color:#fff;outline:2px solid var(--rood);outline-offset:0}
.filters .fv select option{background:#1c1c1c;color:#fff}
/* occasion-kaarten in de stijl van de homepage-tegels */
.kaart{display:flex;flex-direction:column;text-decoration:none;color:#fff;background:#141414;transition:background-color .25s ease}
.kaart .foto{aspect-ratio:4/3}
.kaart .foto img{transition:transform .35s ease}
.kaart .info{padding:18px 20px 6px;flex:1}
.kaart h3{margin:0;font-size:1.5rem;color:#fff}
.kaart .streep{margin:8px 0 10px}
.kaart .feit{font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#e6e6e6}
.kaart .feit.rb{margin-top:4px;color:#b3b3b3}
.kaart-onder{display:flex;align-items:center;justify-content:space-between;padding:12px 20px 20px}
.kaart .prijs{background:var(--rood);color:#fff;font-family:var(--kop);font-size:1.6rem;line-height:1;padding:10px 14px 8px}
.kaart .pijl{font-size:1.3rem;line-height:1;color:#fff;opacity:.75;transition:transform .25s ease,opacity .25s ease}
.kaart:hover,.kaart:focus-visible{background:#000}
.kaart:hover .foto img,.kaart:focus-visible .foto img{transform:scale(1.04)}
.kaart:hover .streep,.kaart:focus-visible .streep{width:56px;background:#fff}
.kaart:hover .pijl,.kaart:focus-visible .pijl{transform:translateX(6px);opacity:1}
.kaart:focus-visible{outline:3px solid var(--rood);outline-offset:3px}
@media(min-width:1200px){.verder .vlak-t .label{top:auto;bottom:12px}.scherm .verder .vlak-t{padding-top:10px}}
/* KMRS-40d: tablet (700-1199 px) rustig: 6 even hoge tegels met alleen kop, streepje, één subregel en pijl;
   geen webshopnaam en geen sterren (die blijven op desktop); compacter introblok */
@media(min-width:700px) and (max-width:1199px){
.scherm .vlakken,.scherm .verder-rij{grid-template-columns:repeat(3,minmax(0,1fr))}
.scherm .vlak-t,.scherm .verder .vlak-t{height:clamp(88px,11svh,116px);min-height:0;padding:0 20px;gap:12px;align-items:center}
.scherm .vlak-t h2,.scherm .vlak-t h3{font-size:clamp(1rem,2.15vw,1.3rem);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scherm .vlak-t .streep{margin:6px 0 8px}
.scherm .vlak-t p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:none;font-size:.72rem}
.scherm .vlak-t .label,.scherm .vlak-t .wwk{display:none}
.scherm .herodoos{padding:20px 28px}
.scherm .herodoos h1{font-size:clamp(1.7rem,3.2vw,2.2rem);margin-bottom:8px}
.scherm .herodoos p{font-size:1rem;line-height:1.5}
}
/* proefritformulier met handtekening (E-156g) */
.motorregel{background:var(--zwart);color:#fff;padding:10px 14px;font-size:.95rem}.motorregel strong{color:#fff}
.vinkregel{display:flex;gap:10px;align-items:flex-start;font-weight:700}.vinkregel input{width:20px;height:20px;margin-top:2px;flex:none;accent-color:var(--rood)}
.handtekening{display:grid;gap:6px}
.teken{display:none;gap:8px}
.js .teken{display:grid}
.teken-uitleg{font-size:.88rem;color:var(--grijs-d)}
.teken canvas{width:100%;height:180px;background:#fff;border:1px solid var(--grijs);touch-action:none;cursor:crosshair}
.teken .btn{justify-self:start}
.akkoordblok{display:grid;gap:10px} /* KMRS-44: geen rood blok meer, alleen het vinkje (zonder JavaScript) en de foutmelding */
/* financieren: extern venster pas na klik */
.aanvraag-start{background:var(--diep);color:#f0f0f0;padding:24px clamp(20px,3vw,32px);display:grid;gap:16px;justify-items:start}
.aanvraag-start p{max-width:70ch}
/* cookiemelding (alleen als Google Analytics aan staat): accepteren en weigeren even groot */
.cookiemelding{position:fixed;left:0;right:0;bottom:0;z-index:200;background:#0c0c0c;color:#f0f0f0}
.cookiemelding .w{display:flex;gap:16px 32px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding-top:18px;padding-bottom:18px}
.cookiemelding h2{color:#fff;font-size:1.3rem;margin:0 0 4px}
.cookiemelding p{font-size:.92rem;max-width:72ch}.cookiemelding a{color:#fff}
.cm-knoppen{display:flex;gap:10px}.cm-knoppen .btn{min-width:150px}
.voetknop{display:block;background:none;border:0;padding:6px 0;min-height:36px;color:#e6e6e6;font:inherit;cursor:pointer;text-align:left}
.voetknop:hover{color:#fff;text-decoration:underline}
/* proefritformulier in stappen (E-156g) */
.proefrit-form{max-width:640px}
.proefrit-form .stap{border:0;padding:0;margin:0;min-width:0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.proefrit-form .stap>*{grid-column:1/-1}.proefrit-form .stap>.half{grid-column:auto}
@media(max-width:520px){.proefrit-form .stap>.half{grid-column:1/-1}}
.stapkop{font-size:1.5rem;margin:0}.stapkop:focus{outline:none}.stapkop:focus-visible{outline:3px solid var(--rood);outline-offset:3px}
.proefrit-form .stap+.stap{margin-top:28px;padding-top:28px;border-top:1px solid var(--lijn)}
.in-stappen .stap+.stap{margin-top:0;padding-top:0;border-top:0}
.stappenbalk,.stapfout:empty{display:none}
.js .stappenbalk{display:grid;grid-template-columns:repeat(4,1fr);list-style:none;margin-bottom:6px}
.stappenbalk li{display:flex;align-items:center;gap:8px;padding:10px 12px;background:#e6e6e6;color:var(--grijs-d);font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.stappenbalk .nr{font-family:var(--kop);font-size:1.2rem;line-height:1}
.stappenbalk li.klaar{background:var(--zwart);color:#fff}
.stappenbalk li[aria-current=step]{background:var(--rood);color:#fff}
@media(max-width:520px){.stappenbalk .lb{display:none}.stappenbalk li{justify-content:center}.stappenbalk li[aria-current=step] .lb{display:inline}}
.stapfout{background:var(--rood);color:#fff;font-weight:700;padding:10px 14px}
.stapknoppen{display:flex;justify-content:space-between;gap:10px;margin-top:6px}
.stapknoppen [data-vorige],.stapknoppen [data-volgende]{display:none}
.js .stapknoppen [data-vorige],.js .stapknoppen [data-volgende]{display:inline-flex}
.voorwaarden-scroll{max-height:320px;overflow:auto;border:1px solid var(--grijs);background:#fff;padding:14px 18px;font-size:.9rem}
.voorwaarden-scroll ol{padding-left:20px;margin:10px 0}.voorwaarden-scroll li{margin-bottom:6px}
.voorwaarden-scroll:focus-visible{outline:3px solid var(--rood)}
/* KMRS-44: vervolgregels en het a/b-lijstje binnen een afspraak, zelfde letter als de rest */
.voorwaarden-scroll .vervolg{display:block;margin-top:4px}
.voorwaarden-scroll ol.keuzes{list-style:lower-alpha;margin:4px 0 0;padding-left:20px}.voorwaarden-scroll ol.keuzes li{margin-bottom:2px}
@media(max-width:520px){.voorwaarden-scroll{max-height:42vh}}
.samenvatting{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px;background:var(--zwart);color:#fff;padding:14px 16px}
.samenvatting dt{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#cfcfcf}.samenvatting dd{font-weight:700}
@media(max-width:520px){.samenvatting{grid-template-columns:1fr}}
.aanvraagzin{font-size:.92rem;color:var(--grijs-d);font-weight:700}
.v .vinkregel{display:flex}
.akkoordblok .veldfout{color:var(--rood)}
/* proefrit: inruilvraag */
.keuze-vraag{font-weight:800;font-size:.88rem;color:var(--zwart);margin-bottom:6px}
.keuze-opties{display:flex;gap:10px;flex-wrap:wrap}
/* KMRS-62: rijbewijs in stap 1 */
.proefrit-form .subkop{font-size:1.15rem;margin:10px 0 0;padding-top:14px;border-top:1px solid var(--grijs)}
.rijbewijs-uitleg{font-size:.92rem;color:var(--grijs-d);font-weight:700;margin-top:-6px}
.keuze-opties label{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border:1px solid var(--grijs);background:#fff;font-weight:700;cursor:pointer;margin:0}
.keuze-opties input{width:18px;height:18px;accent-color:var(--rood)}
.keuze-opties label:has(input:checked){border-color:var(--zwart);outline:1px solid var(--zwart)}
.inruil-velden{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.inruil-velden>*{grid-column:1/-1}.inruil-velden>.half{grid-column:auto}
@media(max-width:520px){.inruil-velden>.half{grid-column:1/-1}}
.inruil-info p{font-weight:700;color:var(--zwart)}
/* inklapbare, niet verplichte blokken in het proefritformulier */
.inklap{border:1px solid var(--grijs);background:#fff}
.inklap summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;min-height:48px;padding:10px 14px;font-weight:800;color:var(--zwart)}
.inklap summary::-webkit-details-marker{display:none}
.inklap summary::before{content:"+";flex:none;width:22px;height:22px;display:grid;place-items:center;background:var(--zwart);color:#fff;font-weight:800;line-height:1}
.inklap[open] summary::before{content:"\2212";background:var(--rood)}
.inklap summary:focus-visible{outline:3px solid var(--rood);outline-offset:-3px}
.inklap .inruil-velden,.inklap .inklap-inhoud{padding:4px 14px 16px}
/* occasion-detail: wit vlak met galerij en prijs, daaronder een zwart vlak met naam, vinkjes, knoppen en kerngegevens */
.detail-wit{background:#fff;padding:22px 0 clamp(28px,4vw,48px)}
.detail-wit .kruim{margin-bottom:14px}
.dwit-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(260px,1fr);gap:clamp(20px,3vw,40px);align-items:start}
.dwit-zij{position:sticky;top:20px}
.dwit-zij h1{font-size:clamp(2rem,3.4vw,2.8rem);margin:0}
.dwit-zij .streep{margin:12px 0 18px}
.prijsvak{background:var(--rood);color:#fff;padding:24px 26px 26px}
.prijsvak .status-label{background:var(--zwart);margin-bottom:12px}
.pv-kop{font-family:var(--kop);font-size:1.5rem;line-height:1;text-transform:uppercase;letter-spacing:.02em;margin:14px 0 10px;padding-top:14px;border-top:1px solid rgba(255,255,255,.35)}
.pv-lijst{list-style:none;display:grid;gap:6px;margin:0 0 14px;font-weight:700}
.pv-lijst li{position:relative;padding-left:28px;line-height:1.35}
.pv-lijst li::before{content:"";position:absolute;left:0;top:1px;width:18px;height:18px;background:#fff}
.pv-lijst li::after{content:"";position:absolute;left:6px;top:3px;width:5px;height:10px;border:solid var(--rood);border-width:0 2px 2px 0;transform:rotate(45deg)}
.prijsvak .klein-wit{opacity:.9;font-size:.82rem}
.prijs-groot{font-family:var(--kop);font-size:clamp(2.4rem,4vw,3.4rem);line-height:1;margin-bottom:12px}
.prijsvak p{max-width:none}.klein-wit{font-size:.88rem;margin-top:6px;color:#fff}
.detail-zwart{background:var(--zwart);color:#e6e6e6;padding:clamp(32px,4vw,52px) 0}
.dzw-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(260px,1fr);gap:clamp(20px,3vw,40px);align-items:start}
.detail-zwart .vinkjes{margin-bottom:24px}
.detail-zwart .vinkjes:has(+ .wettelijk){margin-bottom:8px}
.wettelijk{font-size:.8rem;color:#bdbdbd;margin:0 0 24px}
/* KMRS-32: motor zonder All-In (onder de prijsgrens) */
.vinkjes li.geen::before{top:.62em;width:11px;height:2px;border:0;background:#bdbdbd;transform:none} /* geen vinkje: streepje */
.prijsvak .pv-wettelijk{margin:0 0 10px}
.kopvlak .kop-sub{font-family:var(--kop);font-size:clamp(1.3rem,2vw,1.6rem);line-height:1.1;color:#fff;margin:0 0 12px;text-transform:uppercase}
/* KMRS-42: op de telefoon past de hele kop (foto, titel, subkop, vinkjes, knoppen) in het eerste scherm, ook met de
   Safari-balk onderaan: lagere foto (28% van de zichtbare hoogte, svh met vh als terugval) en de knoppen naast elkaar */
@media(max-width:699px){
.paginakop .show{aspect-ratio:auto;height:28vh;height:28svh;min-height:130px;max-height:240px}
.kopvlak{padding-top:18px;padding-bottom:20px}
.kopvlak .kop-sub{font-size:1.2rem;margin-bottom:10px}
.kopvlak .vinkjes{margin-bottom:16px;gap:4px 24px}
.kopvlak .acties{flex-wrap:nowrap;gap:10px}
.kopvlak .acties .btn{flex:1 1 0;min-width:0;min-height:46px;padding:8px 10px;font-size:.8rem;letter-spacing:.02em;text-align:center}
}
@media(max-width:380px){.kopvlak .acties .btn{font-size:.74rem;letter-spacing:0;padding:8px 6px}}
/* KMRS-43: telefoonnummers (en e-mail bij Gegevens) vet zonder rode onderstreping; bij hover/focus rood met dunne lijn */
.link.tel{border-bottom:0}
.link.tel:hover,.link.tel:focus-visible{color:var(--rood);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
/* KMRS-43: kleine lijniconen voor adres, telefoon en e-mail (voet en Gegevens op de contactpagina) */
.met-icoon{display:flex;align-items:flex-start;gap:10px;font-style:normal}
.met-icoon .icoon{flex:none;margin-top:3px;color:var(--rood)}
footer .met-icoon .icoon{color:var(--rood-licht);margin-top:3px}
footer address.met-icoon{padding:6px 0;margin-bottom:0}
footer a.met-icoon:hover span{text-decoration:underline}footer a.met-icoon:hover{text-decoration:none}
.contactregels{display:grid;gap:6px;margin-top:12px}
.contactregels .met-icoon .icoon{margin-top:2px}
/* occasions: informatie onder de lijst (donker vlak met foto, vinkjes en vier tegels) */
.occ-info{position:relative;background:#0e0e0e;color:#f0f0f0;overflow:hidden}
.occ-info-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.18}
.occ-info .w{position:relative;padding-top:var(--sec);padding-bottom:var(--sec)}
.occ-waarom{display:grid;grid-template-columns:1fr 1fr;gap:24px 64px;align-items:start;margin-bottom:clamp(32px,4vw,56px)}
.occ-waarom h2{color:#fff;font-size:clamp(1.8rem,2.6vw,2.4rem);margin:0}
.occ-vast{font-size:1.05rem;line-height:1.6;max-width:52ch}.occ-vast strong{color:#fff}
.occ-vinkjes{list-style:none;display:grid;gap:12px;font-weight:700;color:#fff;padding-top:6px}
.occ-vinkjes li{position:relative;padding-left:30px;line-height:1.45}
.occ-vinkjes li::before{content:"";position:absolute;left:4px;top:2px;width:7px;height:13px;border:solid var(--rood-licht);border-width:0 3px 3px 0;transform:rotate(45deg)}
.occ-tegels{display:grid;grid-template-columns:repeat(4,1fr);gap:2px}
.occ-tegel{position:relative;display:flex;flex-direction:column;padding:28px clamp(20px,2vw,32px);background:rgba(12,12,12,.88);transition:background-color .25s ease}
.occ-tegel:hover,.occ-tegel:focus-within{background:rgba(4,4,4,.97)}
.occ-icoon{color:var(--rood-licht);margin-bottom:16px}
.occ-label{align-self:flex-start;margin:0 0 12px;line-height:1.4;font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff;border:1px solid var(--rood);padding:3px 8px}
.occ-tegel h3{color:#fff;font-size:clamp(1.3rem,1.6vw,1.6rem);margin:0}
.occ-tegel:hover .streep,.occ-tegel:focus-within .streep{width:56px;background:#fff}
.occ-tekst{font-size:.95rem;line-height:1.55;flex:1;margin-bottom:18px}.occ-tekst p{margin:0}.occ-tekst a{color:#fff;position:relative;z-index:1}
.occ-link{color:#fff;font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:.82rem;text-decoration:none}
.occ-link .pijl{display:inline-block;margin-left:6px;transition:transform .25s ease}
.occ-tegel:hover .occ-link .pijl,.occ-link:focus-visible .pijl{transform:translateX(6px)}
.occ-link::after{content:"";position:absolute;inset:0}
.occ-link:focus-visible{outline:none}.occ-tegel:focus-within{outline:2px solid #fff;outline-offset:-6px}
@media(max-width:1000px){.occ-tegels,.occ-tegels.aantal-3{grid-template-columns:1fr 1fr}.occ-tegels.aantal-3 .occ-tegel:last-child{grid-column:1/-1}.occ-waarom{grid-template-columns:1fr}}
@media(max-width:600px){.occ-tegels,.occ-tegels.aantal-3,.occ-tegels.aantal-2{grid-template-columns:1fr}}
.kern{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #333;border-bottom:1px solid #333}
.kern div{padding:14px 12px 14px 0}.kern div+div{padding-left:16px;border-left:1px solid #333}
.kern dt{font-size:.72rem;color:#cfcfcf;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.kern dd{font-family:var(--kop);font-size:1.4rem;color:#fff;line-height:1.15}
.dzw-acties{display:grid;gap:10px}
.detail-zwart .btn.rand{color:#fff;border-color:#fff}.detail-zwart .btn.rand:hover{background:#fff;color:#000}
.detail-zwart .uitleg{background:#1c1c1c;color:#e6e6e6;margin-top:6px}.detail-zwart .uitleg::before{background:#fff;color:#000}
@media(max-width:900px){.dwit-grid,.dzw-grid{grid-template-columns:1fr}.dwit-zij{position:static}}
@media(max-width:560px){.kern{grid-template-columns:1fr 1fr}.kern div:nth-child(3){padding-left:0;border-left:0}.kern div:nth-child(n+3){border-top:1px solid #333}}
/* occasion: controleer zelf bij de RDW */
.zelfcheck{border-top:1px solid #333;padding-top:16px;margin-top:8px;display:grid;gap:10px}
.zelfcheck h2{color:#fff;margin:0}
.zelfcheck dl{display:grid;gap:6px}.zelfcheck dl div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid #262626;padding-bottom:6px}
.zelfcheck dt{color:#cfcfcf;font-size:.85rem}.zelfcheck dd{color:#fff;font-weight:700;font-size:.9rem;text-align:right}
.zelfcheck .bron{font-size:.78rem;color:#bdbdbd}
/* proefrit stap 3: één akkoordknop (met JavaScript), zonder JavaScript het vinkje */
.akkoordknop{align-items:center;line-height:1.2;padding:8px 22px}
.akkoordknop{display:none}
.js .stapknoppen .akkoordknop{display:inline-flex}
.js .akkoord-vinkje{position:absolute;left:-9999px}
.js .akkoordblok .veldfout{margin-top:0}
/* Kop van subpagina's (E-156, 03-11): tekst direct op de foto met een donker verloop van links; geen zwart vlak.
   Het verloop is links minstens 82% zwart, zodat witte tekst ook op een lichte foto leesbaar blijft (contrast > 4,5:1). */
@media(min-width:700px){ /* KMRS-40c: vanaf tablet staand (700 px) ligt de kop op de foto */
.paginakop::after{background:linear-gradient(90deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.82) 52%,rgba(0,0,0,0) 85%)}
.kopvlak{background:none;padding:0 0 34px;max-width:620px}
}
/* KMRS-45: op telefoon en tablet (tot 1199 px) is het kopblok rood (huisstijl), op desktop blijft het zwart.
   Op rood: streepje en vinkjes wit, kruimelpad wit, rode knop wordt wit met zwarte tekst. Witte tekst op #B7000C = 6,9:1. */
@media(max-width:1199px){
.kopvlak{background:var(--rood)}
.kopvlak .streep{background:#fff}
.kopvlak .kruim,.kopvlak .kruim a{color:#fff}
.kopvlak p,.kopvlak .vinkjes{color:#fff}
.kopvlak .vinkjes li::before{border-color:#fff}
.kopvlak .btn:not(.rand){background:#fff;border-color:#fff;color:var(--zwart)}
.kopvlak .btn:not(.rand):hover,.kopvlak .btn:not(.rand):focus-visible{background:var(--zwart);border-color:var(--zwart);color:#fff}
.kopvlak :focus-visible{outline-color:#fff}
}
@media(min-width:700px) and (max-width:1199px){
.paginakop::after{background:rgba(0,0,0,.2)}
.kopvlak{padding:26px 32px 28px}
}
.kruim a,.kruim.licht a{text-decoration:none}.kruim a:hover{text-decoration:underline}
.kruim{font-size:.8rem}.kopvlak .kruim{color:#bdbdbd}.kopvlak .kruim a{color:#d9d9d9}
.kruim.licht{color:var(--grijs)}.kruim.licht a{color:var(--grijs)}
/* filterbalk in antraciet met een dunne lijn erboven; velden blijven binnen de container en lopen door */
.filterbalk{background:#252525;border-top:1px solid rgba(255,255,255,.14)}
/* KMRS-64a: vaste kolommen per breedte; vinkje "Ook verkocht" en de knoppen op een eigen rij eronder */
.filters{grid-template-columns:minmax(0,1.5fr) repeat(6,minmax(0,1fr))}
.filters .fv{min-width:0}
.filters .fv input,.filters .fv select{background:#1a1a1a}
.filters .filterknoppen{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin:0}
.filters .filterknoppen .vink-f{display:inline-flex;align-items:center;gap:8px;margin:0 12px 0 0;color:#f0f0f0;font-size:.9rem;font-weight:700;cursor:pointer;white-space:nowrap}
.filters .filterknoppen .vink-f input{width:18px;height:18px;min-height:0;margin:0;padding:0;flex:none;accent-color:var(--rood);background:none;border:0}
@media(max-width:1199px){.filters{grid-template-columns:repeat(4,minmax(0,1fr))}.filters .fv.breed{grid-column:span 1}}
@media(max-width:900px){.filters{grid-template-columns:repeat(2,minmax(0,1fr))}.filters .fv.breed{grid-column:1/-1}}
/* vinkjes in twee rustige kolommen (3 + 2) */
.vinkjes{grid-template-columns:repeat(2,max-content);grid-template-rows:repeat(3,auto);grid-auto-flow:column;column-gap:40px}
@media(max-width:520px){.vinkjes{grid-template-rows:none;grid-auto-flow:row;grid-template-columns:1fr;font-size:.72rem;letter-spacing:.03em}}
/* werkplaats: onderdelen als blokken naast elkaar, om en om rood en zwart (KMRS-22) */
.werkblokken{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.tekst+.werkblokken{margin-top:32px}
.werkblok{display:flex;flex-direction:column;gap:14px;padding:32px clamp(22px,2.4vw,36px);background:var(--zwart);color:#f0f0f0;min-height:240px}
.werkblok:nth-child(odd){background:var(--rood)}
.werkblok h2{color:#fff;font-size:clamp(1.4rem,1.7vw,1.8rem);margin:0;line-height:1.1}
.werkblok .streep{background:#fff}
.werkblok .wb-tekst p{margin:0;color:#f0f0f0;line-height:1.55}
.werkblok .wb-tekst a{color:#fff}
.wb-acties{margin-top:auto;display:flex;flex-direction:column;gap:12px;padding-top:6px}
.wb-tel{color:#fff;font-weight:800;text-decoration:underline;text-underline-offset:4px}
.wb-tel:hover{text-decoration-thickness:2px}
@media(max-width:1000px){.werkblokken{grid-template-columns:repeat(2,1fr)}.werkblok:nth-child(4n+2),.werkblok:nth-child(4n+3){background:var(--zwart)}.werkblok:nth-child(4n+1),.werkblok:nth-child(4n){background:var(--rood)}}
@media(max-width:600px){.werkblokken{grid-template-columns:1fr}.werkblok{min-height:0}.werkblok:nth-child(odd){background:var(--rood)}.werkblok:nth-child(even){background:var(--zwart)}}
.werkblok .wb-acties .btn{padding-inline:12px;white-space:nowrap} /* KMRS-26a: lange shopnaam op één regel, knoppen even hoog */
.werkblok .btn.wit:hover{background:transparent;color:#fff;border-color:#fff}
/* vorige / volgende motor op de detailpagina (KMRS-21) */
/* KMRS-21a: wit, met alleen een dunne grijze lijn eronder */
.blader{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 0 16px;padding:0 0 10px;border-bottom:1px solid var(--lijn)}
.blader a{display:flex;align-items:center;gap:12px;min-height:56px;padding:4px 0;background:transparent;color:var(--zwart);text-decoration:none;min-width:0}
.blader a:hover .bl-naam,.blader a:focus-visible .bl-naam{color:var(--rood);text-decoration:underline;text-underline-offset:3px}
.blader a:hover .bl-pijl,.blader a:focus-visible .bl-pijl{border-color:var(--rood)}
.blader a:focus-visible{outline:2px solid var(--rood);outline-offset:2px}
.blader .bl-volgende{flex-direction:row-reverse;text-align:right}
.bl-foto{flex:none;width:64px;height:48px;background:var(--foto);overflow:hidden}.bl-foto img{width:100%;height:100%;object-fit:cover;display:block}
.bl-tekst{display:flex;flex-direction:column;min-width:0}
.bl-kop{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--grijs)}
.bl-naam{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bl-pijl{flex:none;width:10px;height:10px;border:solid var(--zwart);border-width:0 2px 2px 0;transform:rotate(135deg);margin:0 4px}
.bl-volgende .bl-pijl{transform:rotate(-45deg)}
@media(max-width:600px){.blader a{gap:8px;padding:8px 10px}.bl-foto{width:48px;height:36px}.bl-naam{font-size:.85rem}}
@media(max-width:600px){.bl-lang{display:none}.blader a{align-items:center}.bl-foto{width:44px;height:33px}.bl-pijl{margin:0}.bl-naam{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.2;font-size:.8rem}}
/* blokken: lijst met vinkjes, 5 blokken als 2 + 3, knop en sterren van een webshop (KMRS-24/26) */
.werkblok .wb-tekst ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.werkblok .wb-tekst li{position:relative;padding-left:26px;line-height:1.45}
.werkblok .wb-tekst li::before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;background:#fff}
.werkblok .wb-tekst li::after{content:"";position:absolute;left:5px;top:5px;width:5px;height:9px;border:solid var(--zwart);border-width:0 2px 2px 0;transform:rotate(45deg)}
.werkblok:nth-child(odd) .wb-tekst li::after{border-color:var(--rood)}
.werkblok .wwk{margin-top:0}
.werkblokken.aantal-5,.werkblokken.aantal-3{grid-template-columns:repeat(6,1fr)}
.werkblokken.aantal-5 .werkblok{grid-column:span 2}.werkblokken.aantal-5 .werkblok:nth-child(-n+2){grid-column:span 3}
.werkblokken.aantal-3 .werkblok{grid-column:span 2}
.werkblokken.aantal-5 .werkblok:nth-child(3){background:var(--zwart)}.werkblokken.aantal-5 .werkblok:nth-child(4){background:var(--rood)}.werkblokken.aantal-5 .werkblok:nth-child(5){background:var(--zwart)}
.werkblokken.aantal-5 .werkblok:nth-child(-n+2){min-height:200px}
@media(max-width:1000px){.werkblokken.aantal-5,.werkblokken.aantal-3{grid-template-columns:repeat(2,1fr)}.werkblokken.aantal-5 .werkblok,.werkblokken.aantal-3 .werkblok{grid-column:auto}.werkblokken.aantal-5 .werkblok:nth-child(-n+2){grid-column:auto}.werkblokken.aantal-5 .werkblok:last-child,.werkblokken.aantal-3 .werkblok:last-child{grid-column:1/-1}}
@media(max-width:600px){.werkblokken.aantal-5,.werkblokken.aantal-3{grid-template-columns:1fr}.werkblokken.aantal-5 .werkblok:nth-child(odd){background:var(--rood)}.werkblokken.aantal-5 .werkblok:nth-child(even){background:var(--zwart)}}
/* aanbieding (KMRS-28): label op de foto, oude prijs doorgestreept */
.tag.tag-aanbieding{background:var(--rood)}
.kaart-onder .prijs .van{display:block;font-family:var(--tekst);font-size:.85rem;font-weight:700;color:#fff;opacity:.85;line-height:1.2}
.kaart-onder .prijs .nu{display:block}
.prijs-van{margin:0 0 4px;font-weight:700;color:#fff;font-size:1rem;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.prijs-van s{opacity:.85;font-size:1.15rem}
.aanb-label{background:#fff;color:var(--rood);font-weight:800;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;padding:4px 8px}
.aanb-tot{font-size:.82rem;font-weight:600;opacity:.9}
/* KMRS-29: met RDW-blok drie kolommen: kenmerken | Controleer zelf | knoppen. Smaller: kenmerken en knoppen naast elkaar, RDW eronder; mobiel onder elkaar (knoppen vóór RDW). */
.dzw-grid.met-rdw{grid-template-columns:minmax(0,1.25fr) minmax(240px,1fr) minmax(260px,1fr)}
.dzw-grid.met-rdw > .zelfcheck{grid-column:2;grid-row:1;border-top:0;padding-top:0;margin-top:0}
.dzw-grid.met-rdw > .dzw-acties{grid-column:3;grid-row:1}
@media(max-width:1100px){.dzw-grid.met-rdw{grid-template-columns:minmax(0,2fr) minmax(260px,1fr)}.dzw-grid.met-rdw > .dzw-acties{grid-column:2;grid-row:1}.dzw-grid.met-rdw > .zelfcheck{grid-column:1 / -1;grid-row:2;border-top:1px solid #333;padding-top:16px}}
@media(max-width:900px){.dzw-grid.met-rdw{grid-template-columns:1fr}.dzw-grid.met-rdw > .dzw-acties,.dzw-grid.met-rdw > .zelfcheck{grid-column:1;grid-row:auto}}
@media(min-width:1101px){
  .met-rdw .vinkjes{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row}
  .met-rdw .kern{grid-template-columns:1fr 1fr}.met-rdw .kern div:nth-child(3){padding-left:0;border-left:0}.met-rdw .kern div:nth-child(n+3){border-top:1px solid #333}
}
/* KMRS-30: delen (WhatsApp-link en, waar het toestel het kan, het deelmenu) */
.delen{display:flex;flex-wrap:wrap;gap:6px 20px;padding:2px 0}
.deel-link{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0;border:0;background:none;color:#fff;font:inherit;font-size:.85rem;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.deel-link:hover{color:#ff8a8f}
.deel-link:focus-visible{outline:2px solid #fff;outline-offset:3px}
.deel-link svg{flex:none}
/* KMRS-31: contactpersoon bij de formulieren over occasions */
.contactpersoon{display:flex;align-items:center;gap:16px;margin:22px 0 0;padding-top:18px;border-top:1px solid var(--lijn,#d9d9d9)}
.contactpersoon img{flex:none;width:72px;height:72px;object-fit:cover} /* KMRS-33b: vierkant, foto uit Beheer > Team */
.contactpersoon p{margin:0;display:grid;gap:2px;line-height:1.35}
.cp-label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--grijs-d,#555)}
.cp-naam{font-family:var(--kop);font-size:1.25rem;font-weight:400;color:var(--zwart,#000)}
.cp-rol{font-size:.9rem}
/* SEO-191a4: merkpagina's */
.merk-intro .tekst{max-width:760px}
.merk-intro + .sec.bovenkort{padding-top:0}
.leeg-donker .btn.wit-rand{color:#fff;border-color:#fff}.leeg-donker .btn.wit-rand:hover{background:#fff;color:#000}
.leeg-knoppen{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.merk-verkocht-kop{margin:clamp(28px,4vw,48px) 0 16px}
.merklinks{margin-top:clamp(28px,4vw,48px);border-top:1px solid var(--lijn);padding-top:20px}
.merklinks h2{margin:0 0 10px;color:var(--zwart)}
.merklinks ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 22px}
.merklinks a{color:var(--zwart);font-weight:700;text-decoration:underline;text-decoration-color:var(--rood);text-underline-offset:3px;display:inline-block;padding:6px 0}
.merklinks a span{font-weight:400;color:var(--grijs)}
.sec.merk-intro{padding-bottom:4px}
/* KMRS-33e: kopfoto's mogen ook een <picture> zijn (WebP) */
.show .s picture{display:block;width:100%;height:100%}
/* KMRS-21b: op mobiel kleine pijlknoppen rechts naast het kruimelpad in plaats van de balk vorige/volgende */
.kruim-rij{display:flex;align-items:center;justify-content:space-between;gap:12px}
.kruim-rij .kruim{min-width:0}
.blader-mini{display:none;flex:none;gap:6px}
.blader-mini a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--lijn);color:var(--zwart);text-decoration:none;font-size:1.6rem;line-height:1;background:#fff}
.blader-mini a:hover,.blader-mini a:focus-visible{border-color:var(--zwart);color:var(--rood)}
@media(max-width:767px){.blader-mini{display:flex}.detail-wit .blader{display:none}.detail-wit .kruim-rij .kruim{margin-bottom:0}.detail-wit .kruim-rij{margin-bottom:14px}}
.blader-mini a span{font-size:0;width:10px;height:10px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(135deg);margin-left:4px}
.blader-mini a[data-mini=volgende] span{transform:rotate(-45deg);margin:0 4px 0 0}
/* KMRS-21b: pijlen van de galerij altijd in het midden van hun vak (.gn.v kreeg display:grid van de formulierklasse .v) */
.gn,.gn.v,.gn.n{display:flex;align-items:center;justify-content:center;gap:0;max-width:none;padding:0}
.gn::before{margin:0}
/* KMRS-37: compacte mobiele kop (één regel, ca. 60 px): logo, bel-icoon, menu-icoon; menu als volle schermlaag met sluitknop */
.m-bel,.m-sluit{display:none}
@media(max-width:960px){
  .kop{position:sticky;top:0;background:#fff;border-bottom:3px solid var(--rood);z-index:80}
  .kop::before{display:none}
  .kop-w{align-items:center;min-height:60px}
  .logovlak{background:none;border-bottom:0;padding:0}
  .logovlak .logo{height:40px}
  .kop-r{flex-direction:row;justify-content:flex-end;align-items:center}
  .topbalk{display:none}
  .hoofdbalk{height:60px;padding:0;gap:2px}
  .m-bel,.js .mbtn{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;min-height:48px;padding:0;color:var(--zwart);background:none;border:0;text-decoration:none}
  .m-bel:hover,.js .mbtn:hover{color:var(--rood)}
  .m-bel:focus-visible,.mbtn:focus-visible{outline:2px solid var(--rood);outline-offset:-2px}
  .mbtn-tekst{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .menu a{color:var(--zwart)}
  .js .menu{position:fixed;inset:0;top:0;display:none;flex-direction:column;align-items:stretch;flex-wrap:nowrap;background:var(--zwart);padding:72px 24px 32px;overflow-y:auto;border:0;z-index:100}
  .js .menu.open{display:flex}
  .js .menu a{color:#fff}
  .js .m-sluit{display:inline-flex;align-items:center;justify-content:center;position:absolute;top:6px;right:12px;width:48px;height:48px;color:#fff;background:none;border:0;cursor:pointer}
  .m-sluit:focus-visible,.js .menu a:focus-visible{outline:2px solid #fff;outline-offset:-2px}
  html.menu-open{overflow:hidden}
}
@media(max-width:960px){.kop-w{padding:0 6px 0 16px}}
/* KMRS-33f: laatste punt van de tijdlijn = heden, met een gevulde ronde rode stip */
.tl-nu{font-family:var(--tekst);font-size:.8rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--zwart);vertical-align:middle;margin-left:6px}
.tijdlijn li.tl-heden::before{width:18px;height:18px;border-radius:50%;right:-9px}
.tijdlijn li.tl-heden:nth-child(even)::before{left:-9px}
@media(max-width:760px){.tijdlijn li.tl-heden::before,.tijdlijn li.tl-heden:nth-child(even)::before{left:-1px;right:auto}}
/* KMRS-38: USP-balk met een rood vinkje voor elk punt, zonder scheidingsstreepjes */
.strook-punten{gap:6px 28px}
.strook-punten li,.strook-punten li:first-child{position:relative;padding:0 0 0 24px;border-left:0}
.strook-punten li::before{content:"";position:absolute;left:5px;top:.15em;width:6px;height:11px;border:solid var(--rood-licht);border-width:0 2px 2px 0;transform:rotate(45deg)}
@media(max-width:700px){.strook-punten li,.strook-punten li:first-child{padding-left:24px}}
/* KMRS-45a: USP-balk op desktop (vanaf 1200 px) rood met witte tekst en vinkjes; knop wit met zwarte tekst.
   Op telefoon en tablet blijft hij donker (daar is het kopblok erboven al rood, KMRS-45). */
/* KMRS-45b: licht bol rood vlak (boven een fractie lichter, onder een fractie donkerder, dunne lichte lijn bovenaan).
   Herbruikbaar: background:var(--rood-bol);box-shadow:var(--rood-bol-lijn). Witte tekst blijft boven 5,8:1. */
:root{--rood-bol:linear-gradient(180deg,#c21420 0%,#b7000c 50%,#a8000b 100%);--rood-bol-lijn:inset 0 1px 0 rgba(255,255,255,.14)}
@media(min-width:1200px){
.strook{background:var(--rood);background:var(--rood-bol);box-shadow:var(--rood-bol-lijn)}
.strook-punten li::before{border-color:#fff}
.strook-punten a{text-decoration-color:#fff}
.strook-punten .vol{color:#fff}
.strook .btn{background:#fff;border-color:#fff;color:var(--zwart)}
.strook .btn:hover,.strook .btn:focus-visible{background:var(--zwart);border-color:var(--zwart);color:#fff}
.strook :focus-visible{outline-color:#fff}
/* KMRS-45b: rode knoppen in de kop krijgen hetzelfde bolle rood; hover iets donkerder. Afstand tot de balk: 34px onder het kopblok */
/* KMRS-45c: rand doorzichtig zodat het verloop tot de rand loopt; hover = zelfde verloop, donkerder via een binnenschaduw
   (soepel, zonder verspringen van rand of grootte); toetsenbord: witte focusrand buiten de knop */
.kopvlak .btn:not(.rand){background:var(--rood-bol);border:0;padding:12px 28px;box-shadow:var(--rood-bol-lijn);transition:box-shadow .15s ease}
.kopvlak .btn:not(.rand):hover,.kopvlak .btn:not(.rand):focus-visible{background:var(--rood-bol);box-shadow:var(--rood-bol-lijn),inset 0 0 0 100px rgba(0,0,0,.14)}
.kopvlak .btn:not(.rand):focus-visible{outline:2px solid #fff;outline-offset:3px}
}
/* KMRS-43a: tekstlinks sitebreed rustig: vet zonder streep; bij hover/focus een dunne lijn en (op licht) rood, (op donker) lichtrood,
   (op rood) wit. Geldt voor .link, links in lopende tekst, merklinks, links in de balk onder de kop en in de kaarten/blokken. */
.link,.tekst a,.merklinks a{color:var(--zwart);font-weight:800;text-decoration:none;border-bottom:0}
.occ-tekst a,.occ-info .occ-vast a,.werkblok .wb-tekst a,.strook-punten a{color:#fff;font-weight:700;text-decoration:none}
.link:hover,.link:focus-visible,.tekst a:hover,.tekst a:focus-visible,.merklinks a:hover,.merklinks a:focus-visible{color:var(--rood);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.occ-tekst a:hover,.occ-tekst a:focus-visible,.occ-info .occ-vast a:hover,.occ-info .occ-vast a:focus-visible,.werkblok .wb-tekst a:hover,.werkblok .wb-tekst a:focus-visible,.strook-punten a:hover,.strook-punten a:focus-visible{color:var(--rood-licht);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
@media(min-width:1200px){.strook-punten a:hover,.strook-punten a:focus-visible{color:#fff}}
.werkblok .wb-tekst a:hover,.werkblok .wb-tekst a:focus-visible{color:#fff} /* werkblokken zijn om en om rood en zwart: wit met lijn */
/* KMRS-48a: in de kaarten van het waarom-blok (en onder de occasions) geen rood streepje onder de kaartkop; de grote blokkop houdt het */
.occ-tegel .streep{display:none}
.occ-tegel h3{margin-bottom:10px}
/* KMRS-47: extra services bij de winterstalling. Vlak en recht zoals de rest: drie kolommen met dunne lijnen, losse extra's als lijst. */
.stalling-extras .se-intro{max-width:62ch;margin:0 0 8px}
.se-kop{font-size:1.25rem;color:var(--zwart);margin:28px 0 12px}
.se-pakketten{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn)}
.se-pakketten.aantal-1{grid-template-columns:1fr}.se-pakketten.aantal-2{grid-template-columns:1fr 1fr}
.se-pakketten li{padding:20px 24px 22px;border-left:1px solid var(--lijn)}.se-pakketten li:first-child{border-left:0;padding-left:0}
.se-pakketten h4{font-size:1.4rem;color:var(--zwart);margin:0}
.se-pakketten .se-prijs{font-weight:800;color:var(--rood);margin:4px 0 8px}
.se-pakketten p{margin:0;max-width:40ch}
.se-extras{list-style:none;margin:0;padding:0;border-top:1px solid var(--lijn)}
.se-extras li{display:grid;grid-template-columns:1fr auto;gap:2px 24px;padding:12px 0;border-bottom:1px solid var(--lijn)}
.se-extras .se-naam{font-weight:800;color:var(--zwart)}.se-extras .se-prijs{font-weight:800;color:var(--rood);text-align:right}
.se-extras .se-tekst{grid-column:1/-1;font-size:.92rem;color:var(--grijs)}
.se-actie{margin-top:24px}
@media(max-width:760px){.se-pakketten,.se-pakketten.aantal-2{grid-template-columns:1fr}.se-pakketten li,.se-pakketten li:first-child{border-left:0;padding:16px 0;border-top:1px solid var(--lijn)}.se-pakketten li:first-child{border-top:0}}
/* formulier stap 2: keuzes als rijen met een rondje of vinkje */
.se-keuze{margin-bottom:18px}
.se-opties{display:grid;gap:8px}
.se-opties label{display:flex;align-items:flex-start;gap:10px;padding:10px 14px;border:1px solid var(--grijs);background:#fff;cursor:pointer;margin:0;font-weight:400}
.se-opties label:has(input:checked){border-color:var(--zwart);outline:1px solid var(--zwart)}
.se-opties input{flex:none;width:18px;height:18px;min-height:0;margin-top:3px;padding:0;accent-color:var(--rood)}
.se-opties strong{color:var(--zwart)}.se-opties .se-prijs{font-weight:800;color:var(--rood);margin-left:6px}
.se-opties small{display:block;font-size:.85rem;color:var(--grijs);margin-top:2px}
/* KMRS-49: op desktop blijft de zwarte menubalk bovenaan staan zodra het topmenu weggescrold is (klas .plakt via site.js).
   De ruimte van de balk blijft gereserveerd (geen verspringen); klein wit logo links; ankers vallen er niet onder. */
.plak-logo{display:none}
@media(min-width:961px){
html{scroll-padding-top:72px}
.kop.plakt .kop-r{padding-bottom:76px}
.kop.plakt .hoofdbalk{position:fixed;top:0;left:0;right:0;z-index:60;height:60px;background:var(--zwart);border-bottom:3px solid var(--rood);justify-content:space-between;padding:0 clamp(16px,2.4vw,32px)}
.kop.plakt .plak-logo{display:flex;align-items:center}
.plak-logo img{height:36px;width:auto}
}
/* KMRS-51: aanvraagformulier NuMotorrijden: laadmelding boven het vak, reserveknop eronder */
.aanvraag-frame{position:relative}
.aanvraag-status{position:absolute;left:0;right:0;top:40px;text-align:center;font-weight:700;color:var(--grijs-d);pointer-events:none}
.aanvraag-frame iframe{position:relative;background:transparent}
.aanvraag-reserve{margin-top:12px;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.aanvraag-reserve[hidden]{display:none}
/* KMRS-50: Google-reviews op de homepage. Vlak, met dunne lijnen tussen de reviews; gele sterren (KMRS-41). */
.google-reviews .kopregel{align-items:flex-end}
.gr-totaal{display:flex;align-items:center;gap:8px;margin:0;font-size:.95rem;color:var(--grijs-d)}.gr-totaal strong{color:var(--zwart);font-size:1.1rem}
.google-reviews .sterren{color:#c9c9c9}
.gr-lijst{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--lijn)}
.gr-lijst.aantal-3{grid-template-columns:repeat(3,1fr)}.gr-lijst.aantal-2{grid-template-columns:repeat(2,1fr)}.gr-lijst.aantal-1{grid-template-columns:1fr}
.gr-lijst li{display:flex;flex-direction:column;gap:10px;padding:20px 24px 22px;border-left:1px solid var(--lijn)}
.gr-lijst li:first-child{border-left:0;padding-left:0}
.gr-kop{display:flex;align-items:center;gap:10px;margin:0}.gr-datum{font-size:.82rem;color:var(--grijs)}
.gr-tekst{margin:0;font-size:.95rem;line-height:1.55;flex:1}
.gr-tekst summary{cursor:pointer;list-style:none}.gr-tekst summary::-webkit-details-marker{display:none}
.gr-lees{font-weight:800;color:var(--zwart);white-space:nowrap}.gr-tekst summary:hover .gr-lees{color:var(--rood);text-decoration:underline}
.gr-tekst[open] summary{display:none}.gr-tekst p{margin:0}
.gr-naam{margin:0;font-weight:800;color:var(--zwart)}
.gr-alle{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:28px}
@media(max-width:1000px){.gr-lijst,.gr-lijst.aantal-3{grid-template-columns:1fr 1fr}.gr-lijst li:nth-child(odd){border-left:0;padding-left:0}.gr-lijst li{border-bottom:1px solid var(--lijn)}}
@media(max-width:600px){.gr-lijst,.gr-lijst.aantal-2,.gr-lijst.aantal-3{grid-template-columns:1fr}.gr-lijst li{border-left:0;padding:18px 0}}
/* SEO-191a1: regiopagina's (occasions + werkplaats + route per plaats) en de plaatsen in de voet */
.regio-tekst{margin-bottom:32px}
.regio-afstand{font-family:Lalezar,sans-serif;font-size:1.5rem;line-height:1.2;color:var(--zwart);margin:4px 0 14px}
.regio-adres address{font-style:normal;margin-bottom:24px}
.regio-tijden-kop{margin-bottom:8px}
.donker .tekst a{color:#fff}
.regio-buurt{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-wrap:wrap;gap:10px}
.regio-concept{background:var(--zwart);color:#fff;padding:10px 24px;font-weight:700;text-align:center}
footer .voet-regio{border-top:1px solid #333;padding:14px 24px;text-align:center;font-size:.88rem;color:#a8a8a8}
footer .voet-regio a{display:inline-block;min-height:0;padding:4px 8px}