/*__FONTS__*/

/* ==========================================================
   autoleasepartner.nl - homepage
   Opbouw volgt financiallease.nl. Identiteit is monochroom met
   kentekengeel als enige accentkleur: dat maakt het logo de
   kern van het merk en zet ons los van al het blauw in de markt.
   Achtergronden wisselen tussen wit, koel grijs, geeltint en nacht.
   ========================================================== */

:root{
  --wit:#FFFFFF;
  --mist:#F2F2F7;      /* koel lichtgrijs */
  --geeltint:#FFF3E0;  /* zeer licht kentekengeel */
  --nacht:#12141A;     /* alleen nog voor tekst en de auto's */
  --diep:#1800AD;      /* donkere banden en footer */
  --diep-2:#27177F;    /* kaarten op donker */
  --diep-3:#3C2E96;    /* lijnen op donker */

  --inkt:#12141A;
  --inkt-2:#4D4A5C;
  --grijs:#6E6B80;
  --lijn:#E5E4EC;
  --lijn-donker:#3A3170;

  --geel:#FFB020;
  --geel-hover:#F0A312;
  --geel-diep:#6B4A00;
  --violet:#3416C9;       /* kobalt: de dragende kleur */
  --violet-licht:#AFA8E4; /* het violet op donkere banden */
  --violet-was:#ECE8FB;   /* lichte kobalttint als bandkleur */
  --violet-licht-2:#CBC7EE;   /* een tint dieper, voor tabs die niet gekozen zijn */
  --eublauw:#2A0FBE;   /* uitsluitend in de kentekenplaat */

  /* De secties van het ontwerp zitten in een eigen bak van 1180 pixels. De kop, de
     aankondigingsbalk en de voettekst gebruikten deze van 1400, en dus stond de kop 110
     pixels breder dan alles eronder. Eén maat voor de hele site. */
  --wrap:1280px;
  --radius:0;
  --radius-l:0;
  --radius-xl:0;

  --t-xs:0.75rem;
  --t-s:0.9375rem;
  --t-0:1.0625rem;
  --t-1:1.1875rem;
  --t-2:1.5rem;
  --t-3:clamp(1.8rem,1.1rem + 2.4vw,2.6rem);
  --t-4:clamp(2.2rem,1.35rem + 3vw,3.25rem);
  --t-5:clamp(2.6rem,1.1rem + 4.8vw,4.5rem);

  --schaduw:0 1px 2px rgba(18,20,26,.03), 0 14px 36px -24px rgba(18,20,26,.16);
  --schaduw-s:0 1px 2px rgba(18,20,26,.025), 0 8px 22px -18px rgba(18,20,26,.12);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ background:var(--wit); scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}

body{
  margin:0; position:relative; background:var(--wit); color:var(--inkt);
  font-family:"Basier Circle","Segoe UI",system-ui,sans-serif;
  font-synthesis-weight:none;
  font-size:var(--t-0); line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2{ margin:0; font-weight:600; line-height:1.05; letter-spacing:-0.036em; text-wrap:balance; }
h3,h4{ margin:0; font-weight:500; line-height:1.2; letter-spacing:-0.02em; text-wrap:balance; }
p{ margin:0; text-wrap:pretty; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:var(--inkt); text-decoration-color:var(--violet); text-decoration-thickness:2px; text-underline-offset:3px; }
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--inkt); outline-offset:2px; border-radius:0;
}

.wrap{ width:min(100% - 2.5rem,var(--wrap)); margin-inline:auto; }
[id]{ scroll-margin-top:120px; }

.band{ padding-block:clamp(3rem,5vw,5rem); }
.band--wit{ background:var(--wit); }
.band--mist{ background:var(--mist); }
.band--geel{ background:var(--geeltint); }
.band--nacht{ background:var(--diep); color:var(--wit); }
.band--violet{ background:var(--violet-was); }

/* secties die over de volgende band heen lopen */
.band--uitloop{ padding-bottom:0; }
.uitloop{ position:relative; z-index:2; margin-bottom:clamp(-7.5rem,-6.5vw,-4.5rem); }
.band--na-uitloop{ padding-top:clamp(7rem,10vw,9.5rem); }

.badge{
  display:inline-flex; align-items:center; gap:0.4rem; align-self:flex-start;
  background:var(--violet); color:var(--wit); border-radius:0;
  padding:0.3rem 0.75rem; font-size:var(--t-xs); font-weight:500; letter-spacing:0.01em;
}
.band--nacht .badge{ background:var(--violet-licht); color:var(--nacht); }
.band--nacht a{ color:var(--wit); }

.sec-kop{ display:flex; flex-direction:column; gap:0.7rem; margin-bottom:2.25rem; max-width:58ch; }
.sec-kop h2{ font-size:var(--t-3); }
.sec-kop p{ color:var(--inkt-2); }
.band--nacht .sec-kop p{ color:#BDB7E2; }
.eyebrow{
  font-family:"Basier Square","Segoe UI",system-ui,sans-serif;
  font-size:var(--t-xs); letter-spacing:0.17em; text-transform:uppercase;
  color:var(--grijs); margin:0;
}
.band--nacht .eyebrow{ color:var(--geel); }
.klein{ font-size:var(--t-s); color:var(--grijs); }
.band--nacht .klein{ color:#9A93CE; }

.pijl{ display:inline-flex; align-items:center; gap:0.45rem; font-weight:500; text-decoration:none; }
.pijl svg{ color:var(--violet); transition:transform 180ms ease; }
.band--nacht .pijl svg{ color:var(--violet-licht); }
@media (hover:hover){ .pijl:hover{ text-decoration:underline; } .pijl:hover svg{ transform:translateX(4px); } }

.todo{ border-bottom:1.5px dotted var(--geel-diep); }

/* ---------- knoppen ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:0.55rem;
  background:var(--geel); color:var(--inkt); border:0; border-radius:0;
  padding:0.85rem 1.6rem; font-family:inherit; font-weight:500; font-size:var(--t-s);
  letter-spacing:-0.01em; cursor:pointer; text-decoration:none; min-height:48px;
  transition:background 150ms ease, transform 150ms ease;
}
.btn:active{ transform:translateY(1px); }
.btn--donker{ background:var(--diep); color:var(--wit); }
.btn--rand{ background:transparent; color:var(--inkt); box-shadow:inset 0 0 0 1.5px var(--lijn); }
.band--nacht .btn--rand{ color:var(--wit); box-shadow:inset 0 0 0 1.5px var(--diep-3); }
.btn--s{ padding:0.6rem 1.1rem; font-size:var(--t-xs); min-height:40px; white-space:nowrap; }
.btn--breed{ width:100%; }
@media (hover:hover){
  .btn:hover{ background:var(--geel-hover); }
  .btn--donker:hover{ background:var(--diep-2); }
  .btn--rand:hover{ box-shadow:inset 0 0 0 1.5px var(--inkt); }
  .band--nacht .btn--rand:hover{ background:var(--diep-2); box-shadow:inset 0 0 0 1.5px #5B4FA0; }
}
.smal-alleen{ display:inline; }
.breed-alleen{ display:none; }
@media (min-width:560px){ .smal-alleen{ display:none; } .breed-alleen{ display:inline; } }

/* ---------- top ---------- */
/* de balk blijft dekkend; alleen de header eronder is doorzichtig */
.topbalk{ position:relative; z-index:70; background:var(--diep); color:var(--wit);
  font-size:var(--t-s); }
.topbalk .wrap{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:0.55rem; }
.topbalk a{ text-decoration:none; font-weight:500; display:flex; align-items:center; gap:0.5rem; white-space:nowrap; }
.topbalk a{ color:var(--wit); }
.topbalk a svg{ color:var(--geel); }


.kop{ position:sticky; top:0; z-index:60; background:transparent;
  transition:background-color 180ms ease; }
/* de header blijft staan en wordt lager zodra je scrolt */
.kop{ position:sticky; top:0; z-index:60; background:transparent;
  transition:background-color 180ms ease; }
.kop .wrap{ display:flex; align-items:center; justify-content:space-between;
  gap:2rem; padding-block:1.125rem; transition:padding-block 180ms ease; }
/* Bovenaan de pagina had de kop helemaal geen onderrand: hij zweefde over de hero en er
   was niets dat zei waar hij ophield. Nu een lijn van twee pixels in de lichte merktint.
   Eén pixel verdwijnt op een scherm met hoge puntdichtheid, drie wordt een balk. */
/* Een haarlijn van de merkkleur op tien procent. Twee pixels in een lichte
   tint was een streep die je zag in plaats van een scheiding die je voelt. */
.kop{ border-bottom:1px solid rgba(24,0,173,.10); }
.kop--klein{ background:var(--wit);
  box-shadow:0 10px 28px -24px rgba(18,20,26,.35); }
.kop--klein .wrap{ padding-block:0.5rem; }
/* Het logo is een gestapeld geheel: "Autolease" boven "Partner" met de tegel .NL ernaast,
   verhouding 2,78 op 1. De naam zit erin, dus het losse woordmerk ernaast is weg. Sturen op
   hoogte en de breedte laten volgen, anders klopt de verhouding niet meer zodra de kop bij
   het scrollen krimpt. Onder de 34 pixels wordt de tweede regel te klein om te lezen, dus
   daar gaan we niet onder. */
.merk-beeld{ display:block; height:50px; width:auto; }
.kop--klein .merk-beeld{ height:42px; }
footer .merk-beeld{ height:50px; }
@media (max-width:520px){ .merk-beeld,.kop--klein .merk-beeld{ height:42px; } }
.kop--klein .woordmerk{ font-size:1.0625rem; }
.kop .merk svg,.kop .woordmerk{ transition:width 180ms ease, height 180ms ease,
  font-size 180ms ease; }
@media (prefers-reduced-motion:reduce){
  .kop,.kop .wrap,.kop .merk svg,.kop .woordmerk{ transition:none; }
}
.merk{ display:flex; align-items:center; gap:0.6rem; text-decoration:none; }
.merk svg{ display:block; flex:none; }
.woordmerk{ font-weight:500; font-size:1.25rem; letter-spacing:-0.032em; color:var(--inkt); white-space:nowrap; }
.band--nacht .woordmerk,footer .woordmerk{ color:var(--wit); }
.nav{ display:none; gap:2.1rem; margin-left:auto; }
@media (min-width:1080px){ .nav{ display:flex; } }
.nav a{ text-decoration:none; font-size:var(--t-0); font-weight:600; letter-spacing:-0.012em; }
@media (hover:hover){ .nav a:hover{ text-decoration:underline; } }
.nav-knop{ font:inherit; font-size:var(--t-0); font-weight:600; letter-spacing:-0.012em;
  color:var(--inkt); background:none; border:0; padding:0; cursor:pointer;
  display:inline-flex; align-items:center; gap:0.35rem; }
.nav-knop svg{ transition:transform 160ms ease; }
.nav-knop[aria-expanded="true"] svg{ transform:rotate(180deg); }
@media (hover:hover){ .nav-knop:hover{ text-decoration:underline; } }
/* het paneel hangt onder de hele header, niet onder de knop */
.mega{ position:absolute; left:0; right:0; top:100%; background:var(--wit);
  border-top:1px solid var(--lijn);
  box-shadow:0 24px 48px -32px rgba(18,20,26,.4); }
/* De wrap van de kop is een flexbak, want daar staan logo, menu en knop naast elkaar.
   Het megamenu hergebruikt diezelfde wrap, en als flex-item kromp het raster naar zijn
   inhoud: 1252 pixels binnen een bak van 1400. Daardoor liep het menu niet in de pas met de
   rest van de pagina. Binnen het menu is de wrap gewoon een blok. */
.mega .wrap{ display:block; }
.mega[hidden]{ display:none; }
.mega-raster{ display:grid; gap:2rem clamp(1.5rem,3vw,3rem);
  grid-template-columns:repeat(4,1fr) 1.35fr; padding-block:2rem 2.25rem; }
.mega-kop{ font-family:"Basier Square",system-ui,sans-serif; font-size:var(--t-xs);
  letter-spacing:0.14em; text-transform:uppercase; color:var(--grijs); margin:0 0 0.9rem; }
.mega-kolom ul{ list-style:none; margin:0; padding:0; display:grid; gap:0.15rem; }
.mega-kolom a{ display:block; text-decoration:none; padding:0.5rem 0.6rem;
  margin-inline:-0.6rem; border-radius:0; }
.mega-kolom a b{ display:block; font-size:var(--t-0); font-weight:500; }
.mega-kolom a span{ display:block; font-size:var(--t-s); color:var(--inkt-2); }
@media (hover:hover){ .mega-kolom a:hover{ background:var(--mist); } }
.mega-merken{ display:grid; grid-template-columns:repeat(2,1fr); gap:0.3rem; }
.mega-merk{ display:flex; align-items:center; gap:0.5rem; text-decoration:none;
  font-size:var(--t-s); font-weight:500; padding:0.45rem 0.55rem;
  border-radius:0; color:var(--inkt); }
.mega-merk svg{ flex:none; color:var(--inkt); }
@media (hover:hover){ .mega-merk:hover{ background:var(--mist); } }
@media (max-width:1200px){ .mega-raster{ grid-template-columns:repeat(3,1fr); } }

/* de drie punten staan in de topbalk; op wit moet het vinkje geel-diep zijn, kentekengeel haalt daar geen contrast */
.topbalk-usp{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap;
  justify-content:center; gap:0.3rem 1.6rem; }
.topbalk-usp li{ display:flex; align-items:center; gap:0.45rem; color:#FFFFFF;
  font-size:var(--t-s); font-weight:500; }
.topbalk-usp svg{ flex:none; color:var(--geel); }
/* onder 720 px is er geen ruimte naast elkaar: nummer boven, punten eronder */
@media (max-width:719px){
  .topbalk .wrap{ flex-direction:column-reverse; align-items:flex-start; gap:0.5rem; }
  .topbalk-usp{ justify-content:flex-start; gap:0.25rem 1.2rem; }
}


/* de sterren tonen de werkelijke score: gevulde sterren over lege heen, afgeknipt op --vul */
.sterren{ position:relative; display:inline-flex; line-height:0; }
.sterren-leeg,.sterren-vol{ display:flex; gap:1px; }
.sterren-leeg{ color:var(--violet-licht); }
.sterren-vol{ position:absolute; inset:0; width:var(--vul); overflow:hidden;
  color:var(--violet); }
/* zonder flex:none krimpen de volle sterren mee met het smallere vak en schuiven ze
   ten opzichte van de lege sterren eronder; dan piepen die er rechts onderuit */
.sterren-vol svg{ flex:none; }
/* het nummer klapt bij aanwijzen open tot een contactkaart */
.tel-blok{ position:relative; }
.tel-knop{ display:flex; align-items:center; gap:0.5rem; text-decoration:none; font-weight:500;
  white-space:nowrap; }
.tel-knop > svg:first-child{ color:var(--geel); }
.tel-knop > svg:last-child{ color:#9A93CE; transition:transform 160ms ease; }
.tel-kaart{ position:absolute; right:0; top:calc(100% + 0.55rem); width:min(20.5rem,84vw);
  background:var(--wit); border:1.5px solid var(--lijn); border-radius:0;
  box-shadow:0 26px 52px -28px rgba(18,20,26,.45); overflow:hidden;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity 160ms ease, transform 160ms ease, visibility 160ms;
  text-align:left; z-index:1; }
.tel-blok:hover .tel-kaart,.tel-blok:focus-within .tel-kaart{ opacity:1; visibility:visible;
  transform:none; }
.tel-blok:hover .tel-knop > svg:last-child,
.tel-blok:focus-within .tel-knop > svg:last-child{ transform:rotate(180deg); }

/* statusstrook: laat live zien of er iemand zit */
.tel-status{ display:flex; align-items:center; gap:0.5rem; padding:0.7rem 1.15rem;
  background:var(--violet-was); border-bottom:1px solid var(--lijn); font-size:var(--t-xs); }
.tel-status b{ font-weight:600; color:var(--inkt); }
.tel-status span:last-child{ color:var(--inkt-2); }
.tel-stip{ width:9px; height:9px; border-radius:0; flex:none; background:var(--geel);
  box-shadow:0 0 0 3px rgba(247,209,23,.28); }
.tel-status[data-open="nee"] .tel-stip{ background:var(--grijs);
  box-shadow:0 0 0 3px rgba(107,114,128,.2); }

.tel-body{ padding:1.05rem 1.15rem 1.15rem; }
.tel-kop{ font-size:var(--t-0); font-weight:600; }
.tel-uitleg{ margin-top:0.3rem; font-size:var(--t-s); color:var(--inkt-2); line-height:1.45; }

/* bellen is de hoofdactie, de rest staat eronder */
.tel-hoofd{ display:flex; align-items:center; gap:0.6rem; margin-top:1rem;
  background:var(--geel); color:var(--inkt); text-decoration:none;
  border-radius:0; padding:0.7rem 0.9rem; font-size:var(--t-0);
  transition:background 150ms ease; }
.tel-hoofd b{ font-weight:600; }
.tel-hoofd svg:last-child{ margin-left:auto; }
@media (hover:hover){ .tel-hoofd:hover{ background:var(--geel-hover); } }
.tel-optie{ display:flex; align-items:center; gap:0.6rem; text-decoration:none;
  padding:0.55rem 0.6rem; margin:0.15rem -0.6rem 0; border-radius:0;
  font-size:var(--t-s); color:var(--inkt-2); }
.tel-optie:first-of-type{ margin-top:0.5rem; }
.tel-optie svg{ flex:none; color:var(--violet); }
@media (hover:hover){ .tel-optie:hover{ background:var(--mist); color:var(--inkt); } }

/* op een aanraakscherm is er geen aanwijzen; daar belt de knop gewoon */
@media (max-width:719px){ .tel-kaart{ display:none; } }
@media (prefers-reduced-motion:reduce){
  .tel-kaart,.tel-knop > svg:last-child,.tel-hoofd{ transition:none; }
}
/* nummer en score vormen samen de linkerkant van de topbalk */
.topbalk-links{ display:flex; align-items:center; flex-wrap:wrap; gap:0.4rem 1.15rem; }
.topbalk-score{ display:flex; align-items:center; gap:0.35rem; white-space:nowrap;
  color:var(--inkt-2); font-size:var(--t-s); }
.topbalk-score b{ font-weight:600; color:var(--inkt); }

/* ---------- hero met zoekblok ---------- */
.hero{ position:relative; z-index:1;
  padding-block:clamp(2rem,3.4vw,3.25rem) clamp(5rem,7vw,6.5rem); }
/* horizon: wit bovenin dat naar was en lucht zakt, met een perzikgloed linksonder en
   een blauwe rechtsonder. De witte straal in het midden houdt de kop en het zoekblok vrij.
   De laag begint bovenaan de pagina, loopt achter de doorzichtige balk en header door en
   170 px onder de hero uit. De hoogte wordt in script gezet. */
.paginagrond{ position:absolute; top:0; left:0; right:0; height:640px; z-index:0;
  pointer-events:none; overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 170px),transparent 100%);
  mask-image:linear-gradient(to bottom,#000 calc(100% - 170px),transparent 100%); }
.paginagrond svg{ width:100%; height:100%; display:block; }
/* de sectie eronder is doorzichtig, anders dekt hij de uitloop af */
.band--doorloop{ position:relative; z-index:1; background:transparent;
  padding-top:clamp(6rem,9vw,8rem); }
.hero-inhoud{ position:relative; z-index:1; }
.hero-merken{ margin-top:clamp(1.5rem,2.6vw,2rem); }
.hero-merk-kop{ font-family:"Basier Square",system-ui,sans-serif; font-size:var(--t-xs);
  letter-spacing:0.14em; text-transform:uppercase; color:var(--grijs); margin-bottom:0.7rem; text-align:center; }
.hero-merk-raster{ display:grid; gap:0.6rem; grid-template-columns:repeat(2,1fr); }
@media (min-width:620px){ .hero-merk-raster{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1000px){ .hero-merk-raster{ grid-template-columns:repeat(6,1fr); } }
.hero-merk-tegel{ display:flex; align-items:center; justify-content:center; gap:0.6rem; background:var(--wit);
  border:1.5px solid var(--lijn); border-radius:0; min-height:60px; padding:0.6rem 0.8rem;
  font-family:inherit; font-size:var(--t-s); font-weight:500; color:var(--inkt); cursor:pointer;
  transition:border-color 150ms ease; }
@media (hover:hover){ .hero-merk-tegel:hover{ border-color:var(--inkt); } }
/* merklogo's, in de inkttoon van de pagina in plaats van zes losse merkkleuren */
.logo-slot{ width:28px; height:28px; flex:none; display:grid; place-items:center; color:var(--inkt); }
.logo-slot svg{ width:28px; height:28px; display:block; }
.hero h1{ font-size:var(--t-5); text-align:center; max-width:min(100%,64rem);
  margin-inline:auto; letter-spacing:-0.038em; text-wrap:balance; }
/* de gele streep onder het kernwoord, hetzelfde gebaar als bij de prijzen */
.accent{ position:relative; white-space:nowrap; }
.accent::after{ content:""; position:absolute; left:0; right:0; bottom:-0.11em;
  height:0.1em; border-radius:0; background:var(--geel); }
.hero-onder{ text-align:center; color:var(--inkt-2); margin:1rem auto 0;
  font-size:var(--t-2); max-width:54rem; text-wrap:balance; line-height:1.45; }
.hero-onder b{ color:var(--inkt); font-weight:600; }

.zoek{ background:var(--wit); border-radius:0;
  padding:clamp(1.1rem,1.8vw,1.4rem); box-shadow:var(--schaduw); }
.zoek{ }
.hero-mascotte{
  position:absolute; top:0; right:3%; width:clamp(132px,14vw,210px);
  transform:translateY(-74%); z-index:3; pointer-events:none;
}
.hero-mascotte svg{ display:block; width:100%; height:auto; }
/* onder 1080 px loopt de kop door tot waar Plaatje staat, dan gaat hij eruit */
@media (max-width:1079px){ .hero-mascotte{ display:none; } }
.tabs{ display:grid; grid-template-columns:repeat(3,1fr); gap:0.25rem; }
@media (min-width:640px){ .tabs{ display:flex; gap:0.3rem; } }
.tab{
  display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
  background:var(--violet-licht-2); color:var(--inkt); border:0;
  border-radius:0; padding:0.75rem 0.8rem; min-height:48px;
  font-family:inherit; font-size:var(--t-s); font-weight:500; cursor:pointer;
  transition:background 150ms ease, color 150ms ease;
}
@media (min-width:640px){ .tab{ padding-inline:1.5rem; } }
.tab svg{ flex:none; }
.tab[aria-selected=true]{ background:var(--wit); color:var(--inkt); }
@media (hover:hover){ .tab:not([aria-selected=true]):hover{ background:#CFC5EE; } }
@media (max-width:420px){ .tab svg{ display:none; } .tab{ font-size:var(--t-xs); } }

.zoek-body{
  background:var(--wit); border-radius:0;
  padding:clamp(1.25rem,2.4vw,1.9rem); box-shadow:var(--schaduw);
}
.zoek-kop{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:0.5rem 1.5rem; margin-bottom:1.15rem; }
.zoek-kop h2{ font-size:var(--t-2); }
.zoek-kop a{ font-size:var(--t-s); font-weight:500; }
.zoek-rij{ display:grid; gap:0.65rem; }
@media (min-width:760px){ .zoek-rij{ grid-template-columns:1fr 1fr 1fr 15rem;
  align-items:end; } }
.veld{ display:flex; flex-direction:column; gap:0.35rem; }
.veld label{ font-size:var(--t-xs); color:var(--grijs); font-family:"Basier Square",system-ui,sans-serif; letter-spacing:0.08em; text-transform:uppercase; }
select{
  appearance:none; -webkit-appearance:none; width:100%;
  font-family:inherit; font-size:var(--t-0); color:var(--inkt);
  background:var(--wit); border:1.5px solid var(--lijn); border-radius:0;
  padding:0.8rem 2.6rem 0.8rem 0.95rem; min-height:52px; cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6L8 10.5 12.5 6' fill='none' stroke='%2312141A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 0.95rem center; background-size:16px;
  transition:border-color 150ms ease;
}
@media (hover:hover){ select:hover{ border-color:var(--inkt); } }
.zoek-rij .btn{ min-height:52px; height:52px; font-size:var(--t-1); }
.zoek-voet{ display:flex; flex-wrap:wrap; gap:0.5rem 1.5rem; margin-top:1.15rem; padding-top:1.05rem; border-top:1px solid var(--lijn); }
.zoek-voet span{ display:flex; align-items:center; gap:0.5rem; font-size:var(--t-s); color:var(--inkt-2); }
.zoek-voet svg{ flex:none; color:var(--violet); }

/* ---------- tegels ---------- */
.tegels{ display:grid; gap:0.9rem; grid-template-columns:repeat(2,1fr); }
@media (min-width:760px){ .tegels{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1080px){ .tegels{ grid-template-columns:repeat(6,1fr); } }
.tegel{
  background:var(--wit); border:1.5px solid var(--lijn); border-radius:0;
  padding:1.15rem 1rem 1.2rem; display:flex; flex-direction:column; align-items:flex-start; gap:0.55rem;
  text-decoration:none; text-align:left; font-family:inherit; cursor:pointer;
  transition:border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.tegel svg{ color:var(--inkt); }
.tegel b{ font-weight:500; font-size:var(--t-s); letter-spacing:-0.01em; }
.tegel span{ font-size:var(--t-xs); color:var(--grijs); }
@media (hover:hover){ .tegel:hover{ border-color:var(--inkt); transform:translateY(-2px); box-shadow:var(--schaduw-s); } }

/* ---------- calculator ---------- */
.rk-kop{ display:grid; gap:1.5rem; align-items:center; }
@media (min-width:900px){ .rk-kop{ grid-template-columns:1fr auto; } }
.rk-kop h2{ font-size:var(--t-3); margin-top:0.8rem; }
.rk-kop > div:first-child > p:last-child{ margin-top:0.9rem; color:var(--inkt-2);
  max-width:52ch; }
.rk-beeld svg{ width:clamp(190px,22vw,290px); height:auto; display:block; }

.rk-blok{ display:grid; gap:1.15rem; margin-top:clamp(1.75rem,3vw,2.5rem); }
@media (min-width:1000px){ .rk-blok{ grid-template-columns:1.5fr 1fr; align-items:start; } }

/* vier instellingen naast elkaar, elk met zijn huidige waarde groot in beeld */
.rk-regelaars{ display:grid; gap:0.9rem; }
@media (min-width:700px){ .rk-regelaars{ grid-template-columns:1fr 1fr; } }
.rk-tegel{ background:var(--wit); border:1.5px solid var(--lijn); border-radius:0;
  padding:1.05rem 1.1rem 1.15rem; display:flex; flex-direction:column; gap:0.15rem; }
.rk-label{ font-family:"Basier Square",system-ui,sans-serif; font-size:var(--t-xs);
  letter-spacing:0.1em; text-transform:uppercase; color:var(--grijs); }
.rk-waarde{ font-size:var(--t-2); font-weight:600; letter-spacing:-0.028em;
  font-variant-numeric:tabular-nums; margin-bottom:0.7rem; }
.rk-tegel .keuzes{ margin-top:auto; flex-wrap:wrap; }

/* de uitkomst staat op een Nederlandse kentekenplaat, het eigen beeldmerk */
.rk-uit{ background:var(--violet-was); border-radius:0;
  padding:clamp(1.35rem,2.4vw,1.8rem); display:flex; flex-direction:column; }
.rk-plaat{ display:flex; align-items:center; gap:0.6rem; align-self:flex-start;
  background:var(--geel); border:3.5px solid var(--inkt); border-radius:0;
  padding:0.55rem 1rem 0.55rem 0.55rem; }
.rk-plaat-band{ width:18px; align-self:stretch; border-radius:0; background:var(--eublauw); }
.rk-plaat b{ font-size:clamp(2.1rem,4vw,2.75rem); font-weight:600; letter-spacing:-0.035em;
  line-height:1; font-variant-numeric:tabular-nums; }
.rk-plaat-pm{ font-size:var(--t-s); color:var(--geel-diep); align-self:flex-end;
  padding-bottom:0.3rem; }
.rk-plaat-onder{ margin-top:0.6rem; font-size:var(--t-s); color:var(--inkt-2); }
.rk-detail{ margin:1.25rem 0 0; padding-top:1.1rem; border-top:1px solid var(--violet-licht-2);
  display:grid; gap:0.55rem; }
.rk-detail > div{ display:flex; justify-content:space-between; gap:1rem;
  font-size:var(--t-s); }
.rk-detail dt{ color:var(--inkt-2); }
.rk-detail dd{ margin:0; font-weight:600; font-variant-numeric:tabular-nums; }
.rk-uit .btn{ margin-top:1.35rem; }
.rk-uit .disclaimer{ margin-top:0.9rem; font-size:var(--t-xs); color:var(--inkt-2);
  line-height:1.5; }

/* ---------- waarom wij ---------- */

/* cijfers als typografie met een doorlopende regel eronder, in plaats van een bolletje */
.stp-n{ display:block; width:auto; height:auto; background:none;
  border-radius:0; color:var(--inkt);
  font-size:clamp(2.25rem,3vw,2.75rem); font-weight:600; letter-spacing:-0.04em;
  line-height:1; padding-bottom:0.85rem; border-bottom:2px solid var(--inkt); }
.stp h3{ margin-top:1.1rem; }

/* strakkere hoeken en een echte foto in de startblokken */
.startblok{ border-radius:0; }
/* de auto staat rechtsboven, de tekst blijft er links onder vandaan */
.startblok-beeld{ top:clamp(0.5rem,1.4vw,1.1rem); inset-inline:auto -2%;
  width:min(72%,330px); }
.startblok-beeld img{ width:100%; height:auto; display:block; }
.startblok-tekst{ position:relative; z-index:1; }
.startblok{ min-height:clamp(330px,34vw,400px); }
.startblok--diep{ background:var(--mist); }
.startblok--geel{ background:var(--geeltint); }
.startblok-pijl{ border-radius:0; }




/* ---------- knop in de kop ---------- */




/* de contactkaart hangt in de balk en erfde daardoor de witte tekstkleur: wit op wit.
   Alles in de kaart staat op een witte ondergrond en krijgt hier zijn eigen kleuren terug. */
.tel-kaart{ color:var(--inkt); }
.tel-kaart .tel-kop{ color:var(--inkt); }
.tel-kaart .tel-uitleg{ color:var(--inkt-2); }
.tel-kaart a{ color:var(--inkt); }
.tel-kaart .tel-hoofd,.tel-kaart .tel-hoofd svg{ color:var(--inkt); }
.tel-kaart .tel-optie{ color:var(--inkt-2); }
.tel-kaart .tel-optie svg{ color:var(--violet); }
.tel-kaart .tel-status b{ color:var(--inkt); }
.tel-kaart .tel-status span:last-child{ color:var(--inkt-2); }
/* de claim links in de balk; het schildje is het enige gele element aan die kant */
.topbalk-claim{ display:inline-flex; align-items:center; gap:0.5rem; white-space:nowrap;
  color:#FFFFFF; font-weight:500; }
.topbalk-claim svg{ flex:none; color:var(--geel); }
@media (max-width:1099px){ .topbalk-claim{ display:none; } }

/* ---------- zoekformulier, strak ---------- */
/* twee bij twee in plaats van vier regels onder elkaar */
.zoek-raster{ display:grid; gap:0.55rem; }
@media (min-width:460px){ .zoek-raster{ grid-template-columns:1fr 1fr; } }
.zoek-form{ display:grid; gap:0.75rem; }
/* labels zonder kapitalen en zonder letterafstand: dat scheelt hoogte en oogt strakker */
.zoek-raster .veld{ gap:0.2rem; }
.zoek-raster label{ font-family:inherit; font-size:0.8125rem; font-weight:500;
  letter-spacing:0; text-transform:none; color:var(--inkt-2); }
.zoek-raster select,.zoek-raster .invoer{ min-height:46px; padding-block:0.55rem;
  font-size:var(--t-s); border-radius:0; }
@media (max-width:820px){
  .zoek-raster select,.zoek-raster .invoer{ font-size:1rem; min-height:50px; }
}
.zoek-raster select{ padding-right:2.3rem; background-position:right 0.8rem center; }
.invoer{ width:100%; font-family:inherit; color:var(--inkt); background:var(--wit);
  border:1.5px solid var(--lijn); padding-inline:0.85rem;
  transition:border-color 150ms ease; }
.invoer::placeholder{ color:#6E6B80; }
@media (hover:hover){ .invoer:hover{ border-color:var(--inkt); } }
.invoer:focus-visible{ border-color:var(--violet); }
.zoek-form .btn{ min-height:50px; }
/* de score staat nu op kobalt: volle sterren geel, lege wit met lage dekking */
.balk-score{ display:inline-flex; align-items:center; gap:0.4rem; white-space:nowrap;
  color:#FFFFFF; }
.balk-score b{ font-weight:600; color:var(--wit); }
.balk-score .sterren-leeg{ color:rgba(255,255,255,.30); }
.balk-score .sterren-vol{ color:var(--geel); }
/* het aantal auto's, naast de score */
.balk-aanbod{ display:inline-flex; align-items:center; gap:0.3rem; white-space:nowrap;
  color:#FFFFFF; }
.balk-aanbod b{ font-weight:600; color:var(--wit); font-variant-numeric:tabular-nums; }
/* het nummer staat helemaal rechts, de score ervoor */
/* Niet meer afbreken: de score en het aantal auto's kwamen onder elkaar en daarmee
   werd de balk 72 pixels hoog in plaats van 37. */
.topbalk-links{ margin-left:auto; flex-wrap:nowrap; gap:0.4rem 1.1rem; }
/* Let op het teken > : zonder dat raakt deze regel ook .sterren-vol, want dat is
   het laatste kind van .sterren. De gele sterren verdwenen dan op elke telefoon. */
@media (max-width:1099px){ .balk-score > span:last-child{ display:none; } }
@media (max-width:899px){ .balk-score{ display:none; } }
/* de balk vroeg 1432 px in een vak van 1400 en brak daardoor over twee regels */
.topbalk .wrap{ flex-wrap:nowrap; }
.topbalk-usp{ flex-wrap:nowrap; gap:1.1rem; }
.topbalk-usp li{ white-space:nowrap; }
.topbalk-usp li:nth-child(3){ display:none; }
/* Op 1400 pixels telde de inhoud op tot 1148 in een bak van 1180: precies te krap
   met de tussenruimtes erbij. De tweede opsomming valt nu eerder weg. */
@media (max-width:1599px){ .topbalk-usp li:nth-child(2){ display:none; } }
/* de balk is op een telefoon alleen nog het nummer en de status; de punten staan
   een stukje lager in de hero en hoefden daar niet nog een keer boven te staan */
@media (max-width:999px){
  .topbalk-usp{ display:none; }
  .topbalk .topbalk-knop{ display:none; }
  .topbalk .wrap{ flex-direction:row; align-items:center; justify-content:space-between;
    gap:0.75rem; }
  .topbalk-uren > span:last-child{ display:none; }
}

.kop .wrap{ gap:1rem; justify-content:flex-start; }
/* het menu en de knop schuiven samen naar rechts, het logo blijft links */
.kop .nav{ margin-left:auto; }
.kop-cta{ flex:none; margin-left:0; background:var(--geel); color:var(--inkt);
  border-radius:0; padding:0.55rem 1.15rem; min-height:38px;
  font-size:var(--t-s); font-weight:600; letter-spacing:-0.012em;
  box-shadow:0 6px 16px -12px rgba(247,209,23,.9); }
.kop-cta svg{ transition:transform 180ms ease; }
@media (hover:hover){ .kop-cta:hover{ background:var(--geel-hover); }
  .kop-cta:hover svg{ transform:translateX(3px); } }
@media (prefers-reduced-motion:reduce){ .kop-cta svg{ transition:none; } }
@media (max-width:1200px){ .kop-cta{ display:none; } }
.hero-tekst h1{ color:var(--diep); }
.hero-vinkjes li{ color:var(--violet); font-weight:500; }

/* ---------- hero in twee kolommen (voorstel 10) ---------- */
/* de kop mag de grootste tekst blijven, maar niet drie regels op de maximale maat vullen */
.hero-tekst h1{ font-size:clamp(2.3rem,3.7vw,3.35rem); max-width:19ch;
  letter-spacing:-0.034em; }
.hero-tekst .hero-onder{ font-size:var(--t-1); margin-top:0.9rem; max-width:42ch; }
.hero-vinkjes{ margin-top:1.15rem; gap:0.5rem; }
.hero-autos{ margin-top:1.1rem; }
.hero{ padding-block:clamp(1.5rem,2.6vw,2.5rem) clamp(5rem,7vw,6.5rem); }

.hero-split{ display:grid; gap:2rem; align-items:center; }
@media (min-width:1000px){ .hero-split{ grid-template-columns:1.1fr 0.9fr; gap:3rem; } }
.hero-tekst h1{ text-align:left; margin-inline:0; max-width:16ch; }
.hero-tekst .hero-onder{ text-align:left; margin-inline:0; max-width:46ch; }
.hero-vinkjes{ list-style:none; margin:1.5rem 0 0; padding:0; display:grid; gap:0.6rem; }
.hero-vinkjes li{ display:flex; align-items:center; gap:0.6rem; font-size:var(--t-0); }
.hero-vinkjes svg{ flex:none; color:var(--violet); }
/* als groep spiegelen: dan draait ook de volgorde om en blijft de overlap kloppen */
.hero-autos{ display:flex; align-items:flex-end; margin-top:1.5rem;
  transform:scaleX(-1); }
.hero-autos img{ width:56%; height:auto; }
.hero-autos img:last-child{ margin-left:-11%; }
@media (max-width:999px){ .hero-autos{ display:none; } }

.zoek-titel{ font-size:var(--t-1); font-weight:600; letter-spacing:-0.022em;
  margin-bottom:0.85rem; }
.zoek-kolom{ display:grid; gap:0.75rem; }
.zoek-kolom .veld{ display:flex; flex-direction:column; gap:0.35rem; }
.btn--breed{ width:100%; }
.zoek-voetregel{ margin-top:0.7rem; font-size:var(--t-xs); color:var(--inkt-2);
  text-align:center; }
.zoekopdracht{ display:none; margin-top:0.8rem; padding:0.7rem 0.9rem;
  background:var(--violet-was); border-radius:0; font-size:var(--t-s);
  line-height:1.45; }
.zoekopdracht.aan{ display:block; }
.zoekopdracht b{ font-weight:600; }

/* ---------- balk, header en kenmerkkaarten (voorstel 10) ---------- */
.topbalk-knop{ display:inline-flex; align-items:center;
  border:1.5px solid rgba(255,255,255,.45); color:var(--wit); border-radius:0; padding:0.35rem 0.95rem; font-weight:600;
  text-decoration:none; white-space:nowrap; }
@media (hover:hover){ .topbalk-knop:hover{ background:var(--wit); color:var(--violet);
  border-color:var(--wit); } }
.kop-score{ display:inline-flex; align-items:center; gap:0.4rem; font-size:var(--t-s);
  color:var(--inkt-2); margin-left:1.75rem; }
.kop-score b{ font-weight:600; color:var(--inkt); }
@media (max-width:1079px){ .kop-score{ display:none; } }

/* de drie kaarten vallen over de onderrand van de hero */
.kenmerken-band{ position:relative; z-index:2; }
.kenmerken{ display:grid; gap:0.9rem; margin-top:clamp(-3.5rem,-4vw,-2.5rem); }
@media (min-width:820px){ .kenmerken{ grid-template-columns:repeat(3,1fr); } }
.kenmerk{ display:flex; gap:0.85rem; background:var(--wit); border:1.5px solid var(--lijn);
  border-radius:0; padding:1rem 1.15rem; }
.kenmerk-icoon{ flex:none; display:grid; place-items:center; width:38px; height:38px;
  border-radius:0; background:var(--geeltint); color:var(--geel-diep); }
.kenmerk b{ display:block; font-size:var(--t-0); font-weight:600; letter-spacing:-0.015em; }
.kenmerk p{ margin-top:0.15rem; font-size:var(--t-s); color:var(--inkt-2); line-height:1.45; }

/* ---------- aanbodtegels ---------- */
.tg-rij{ display:grid; gap:1.15rem; margin-top:clamp(1.75rem,3vw,2.5rem); }
@media (min-width:760px){ .tg-rij{ grid-template-columns:1fr 1fr; } }
.tg{ position:relative; display:block; border-radius:0; overflow:hidden;
  text-decoration:none; color:var(--wit); min-height:clamp(280px,31vw,370px);
  background:var(--diep); transition:transform 180ms ease; }
@media (hover:hover){ .tg:hover{ transform:translateY(-3px); } }
@media (prefers-reduced-motion:reduce){ .tg{ transition:none; } }
/* de foto vult de hele tegel; het verloop houdt het label leesbaar */
.tg img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.tg::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(12,10,28,.78) 0%, rgba(12,10,28,.30) 38%,
    transparent 66%); }
.tg-tekst,.tg-pijl{ z-index:1; }
.tg-tekst{ position:absolute; left:clamp(1.1rem,2vw,1.5rem); bottom:clamp(1.1rem,2vw,1.5rem);
  right:4.5rem; }
.tg-tekst b{ font-size:var(--t-2); font-weight:600; letter-spacing:-0.024em; }
.tg-pijl{ position:absolute; right:clamp(1.1rem,2vw,1.5rem); bottom:clamp(1.1rem,2vw,1.5rem);
  width:44px; height:44px; border-radius:0; display:grid; place-items:center;
  background:var(--geel); color:var(--inkt); }

/* de drie ingangen naar de uitleg */
.inf-blok{ margin-top:clamp(2.25rem,4vw,3rem); padding-top:clamp(1.75rem,3vw,2.25rem);
  border-top:1px solid var(--lijn); }
.inf-kop{ font-family:"Basier Square",system-ui,sans-serif; font-size:var(--t-xs);
  letter-spacing:0.1em; text-transform:uppercase; color:var(--grijs); }
.inf-rij{ display:grid; gap:0.9rem; margin-top:1.1rem; }
@media (min-width:820px){ .inf-rij{ grid-template-columns:repeat(3,1fr); } }
.inf{ display:grid; gap:0.3rem; text-decoration:none; position:relative; color:var(--inkt);
  background:var(--mist); border-radius:0;
  padding:1.05rem 2.6rem 1.15rem 1.15rem; transition:background 160ms ease; }
.inf b{ font-size:var(--t-0); font-weight:500; }
.inf span{ font-size:var(--t-s); color:var(--inkt-2); }
.inf svg{ position:absolute; right:1.15rem; top:1.15rem; color:var(--violet); }
@media (hover:hover){ .inf:hover{ background:var(--violet-was); } }
@media (prefers-reduced-motion:reduce){ .inf{ transition:none; } }

/* ---------- modelkaarten met zwevende auto ---------- */
.modellen{ display:grid; gap:1.15rem; margin-top:clamp(9.5rem,11vw,10.5rem); }
@media (min-width:640px){ .modellen{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1100px){ .modellen{ grid-template-columns:repeat(4,1fr); } }
/* variant 5: een zachte cirkel in de merkkleuren achter de auto, half achter de kaart */
.model{ position:relative; isolation:isolate; }
.model::before{ content:""; position:absolute; left:50%; top:-150px;
  width:192px; height:192px; margin-left:-96px; border-radius:0;
  background:var(--violet-was); z-index:0; }
.model:nth-child(2n)::before{ background:var(--geeltint); }
/* vrijstaande auto boven de kaart; hij steekt nog 36 px in de kaart,
   meer en hij dekt de modelnaam af */
.model-beeld{ position:absolute; top:-104px; left:50%; transform:translateX(-50%);
  width:min(92%,232px); pointer-events:none; z-index:2; }
.model-beeld img{ width:100%; height:auto; display:block; }
.model .kaart{ position:relative; z-index:1; padding-top:4.2rem; height:100%; }
.kaart{
  background:var(--wit); border:1.5px solid var(--lijn); border-radius:0;
  padding:1.4rem 1.4rem 1.5rem; display:flex; flex-direction:column; gap:0.55rem;
  transition:border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
@media (hover:hover){ .kaart:hover{ border-color:var(--inkt); transform:translateY(-2px); box-shadow:var(--schaduw-s); } }
/* op de modelsectie geen hover-effect */
@media (hover:hover){ #aanbod .kaart:hover{ border-color:var(--lijn); transform:none;
  box-shadow:none; } }
.kaart h3{ font-size:var(--t-1); }
.kaart p{ font-size:var(--t-s); color:var(--inkt-2); }
.kaart .pijl{ margin-top:auto; padding-top:0.85rem; font-size:var(--t-s); }
.model-naam{ font-family:"Basier Square",system-ui,sans-serif; font-size:var(--t-xs);
  font-weight:600; color:var(--inkt-2); letter-spacing:0.06em; text-transform:uppercase; }
.model-prijs{ display:flex; align-items:baseline; gap:0.4rem; padding-bottom:0.6rem; border-bottom:3px solid var(--violet); align-self:flex-start; }
.model-prijs b{ font-size:1.6rem; font-weight:600; letter-spacing:-0.032em; font-variant-numeric:tabular-nums; }
.model-prijs span{ font-size:var(--t-s); color:var(--inkt-2); }
.model-uitleg{ font-size:var(--t-s); color:var(--inkt-2); margin:0.2rem 0 0; }
/* twee grote startblokken in plaats van de oude aanvraagsectie */
.startblokken{ display:grid; gap:1.15rem; margin-top:clamp(1.75rem,3vw,2.5rem); }
@media (min-width:860px){ .startblokken{ grid-template-columns:1fr 1fr; } }
.startblok{ position:relative; display:grid; align-content:end; gap:0.9rem;
  min-height:clamp(300px,32vw,380px); padding:clamp(1.5rem,2.6vw,2.1rem);
  border-radius:0; text-decoration:none; overflow:hidden;
  transition:transform 180ms ease; }
@media (hover:hover){ .startblok:hover{ transform:translateY(-3px); } }
@media (prefers-reduced-motion:reduce){ .startblok{ transition:none; } }
.startblok--diep{ background:var(--violet-was); color:var(--inkt); }
.startblok--geel{ background:var(--geeltint); color:var(--inkt); }
.startblok-beeld{ position:absolute; inset:auto 0 auto 0; top:clamp(1rem,2.2vw,1.75rem);
  display:grid; place-items:center; pointer-events:none; }
.startblok-beeld svg{ width:clamp(140px,17vw,215px); height:auto; display:block; }
.startblok-tekst h3{ font-size:var(--t-2); letter-spacing:-0.024em; }
.startblok-tekst p{ margin-top:0.4rem; font-size:var(--t-s); max-width:40ch; }
.startblok--diep .startblok-tekst p{ color:var(--inkt-2); }
.startblok--geel .startblok-tekst p{ color:var(--inkt-2); }
.startblok-pijl{ position:absolute; right:clamp(1.5rem,2.6vw,2.1rem);
  bottom:clamp(1.5rem,2.6vw,2.1rem); width:46px; height:46px; border-radius:0;
  display:grid; place-items:center; }
.startblok--diep .startblok-pijl{ background:var(--violet); color:var(--wit); }
.startblok--geel .startblok-pijl{ background:var(--diep); color:var(--wit); }

/* ---------- oude calculator ---------- */
.calc-grid{ display:grid; gap:2rem; }
@media (min-width:900px){ .calc-grid{ grid-template-columns:1.15fr 0.85fr; gap:2.75rem; } }
.calc-kaart{ background:var(--wit); color:var(--inkt); border-radius:0; padding:clamp(1.35rem,2.4vw,1.9rem); }
.calc-uit{ background:var(--geeltint); border-radius:0; padding:1.35rem 1.4rem; display:flex; flex-direction:column; height:100%; }
.reken-veld{ margin-top:1.3rem; }
.reken-veld:first-of-type{ margin-top:0; }
.reken-label{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin-bottom:0.5rem; }
.reken-label span:first-child{ font-size:var(--t-s); color:var(--inkt-2); }
.reken-label output{ font-family:"Basier Square",system-ui,sans-serif; font-size:var(--t-s); font-variant-numeric:tabular-nums; }
input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:26px; background:transparent; cursor:pointer; margin:0; display:block; }
input[type=range]::-webkit-slider-runnable-track{ height:6px; border-radius:0; background:#E5E4EC; }
input[type=range]::-moz-range-track{ height:6px; border-radius:0; background:#E5E4EC; }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:24px; height:24px; border-radius:0; background:var(--diep); border:4px solid var(--geel); margin-top:-9px; }
input[type=range]::-moz-range-thumb{ width:24px; height:24px; border-radius:0; background:var(--diep); border:4px solid var(--geel); }
.keuzes{ display:flex; gap:0.35rem; }
.keuze{
  flex:1 1 0; min-width:48px; min-height:44px; border:1.5px solid var(--lijn);
  background:var(--wit); color:var(--inkt-2); border-radius:0;
  font-family:inherit; font-size:var(--t-s); cursor:pointer; padding:0.5rem 0.2rem;
  font-variant-numeric:tabular-nums; transition:background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.keuze[aria-pressed=true]{ background:var(--diep); border-color:var(--diep); color:var(--wit); font-weight:500; }
@media (hover:hover){ .keuze:not([aria-pressed=true]):hover{ border-color:var(--diep); } }
.uitkomst-rij{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.bedrag{ font-size:clamp(2.1rem,1.4rem + 2.2vw,3rem); font-weight:600; letter-spacing:-0.04em; font-variant-numeric:tabular-nums; line-height:1; }
.uitkomst-detail{ display:flex; flex-direction:column; gap:0.35rem; margin-top:1rem; padding-top:0.9rem; border-top:1px solid rgba(18,20,26,.14); }
.uitkomst-detail div{ display:flex; justify-content:space-between; gap:1rem; font-size:var(--t-s); color:var(--inkt-2); }
.uitkomst-detail b{ font-weight:500; color:var(--inkt); font-variant-numeric:tabular-nums; }
.calc-uit .btn{ margin-top:1.2rem; }
.disclaimer{ font-size:var(--t-xs); color:var(--inkt-2); margin-top:0.85rem; line-height:1.5; }

/* ---------- stappen ---------- */
.stappen{ display:grid; gap:1.75rem 1.15rem; position:relative; }
@media (min-width:600px){ .stappen{ grid-template-columns:1fr 1fr; } }
@media (min-width:1000px){ .stappen{ grid-template-columns:repeat(4,1fr); } }
@media (min-width:1000px){
  .stappen::before{ content:""; position:absolute; top:23px; left:12.5%; right:12.5%; border-top:2px dashed var(--lijn); z-index:0; }
}
.stap{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center; gap:0.6rem; }
.stap-n{
  width:46px; height:46px; border-radius:0; background:var(--violet); color:var(--wit);
  display:grid; place-items:center; font-family:"Basier Square",system-ui,sans-serif; font-size:var(--t-1);
  border:5px solid var(--wit);
}
.stap h3,.stap h4{ font-size:var(--t-1); }
.stappen-blok{ margin-top:clamp(2.5rem,4.5vw,3.75rem);
  padding-top:clamp(2.25rem,4vw,3rem); border-top:1.5px solid rgba(18,20,26,.11); }
.stappen-blok h3{ font-size:var(--t-3); margin:0.7rem 0 clamp(1.6rem,2.8vw,2.25rem);
  max-width:32ch; }
.stap p{ font-size:var(--t-s); color:var(--inkt-2); max-width:32ch; }

/* ---------- redenen ---------- */
.zij-grid{ display:grid; gap:2.5rem; align-items:center; }
@media (min-width:940px){ .zij-grid{ grid-template-columns:0.86fr 1.14fr; gap:3.5rem; } }
.zij-grid--omgekeerd > .zij-beeld{ order:2; }
@media (max-width:939px){ .zij-grid--omgekeerd > .zij-beeld{ order:0; } }
.zij-beeld svg{ width:100%; height:auto; display:block; max-width:min(100%,460px); margin-inline:auto; }
.zij-beeld--compact svg{ max-width:min(100%,290px); }

.redenen{ display:grid; gap:0.9rem; }
@media (min-width:640px){ .redenen{ grid-template-columns:1fr 1fr; } }
.reden{
  background:var(--wit); border:1.5px solid var(--lijn); border-radius:0;
  padding:1.25rem 1.3rem 1.35rem; display:flex; flex-direction:column; gap:0.4rem;
}
.reden h3{ font-size:var(--t-0); }
.reden p{ font-size:var(--t-s); color:var(--inkt-2); }

.intro-grid{ display:grid; gap:2.25rem; align-items:center; margin-bottom:2.75rem; }
@media (min-width:900px){ .intro-grid{ grid-template-columns:1.15fr 0.85fr; gap:3.5rem; } }
.intro-beeld svg{ width:100%; height:auto; display:block; max-width:min(100%,260px); margin-inline:auto; }
.intro-beeld--breed svg{ max-width:min(100%,400px); }

/* ---------- uitleg ---------- */
.uitleg-grid{ display:grid; gap:2.25rem; align-items:center; margin-bottom:2.25rem; }
@media (min-width:920px){ .uitleg-grid{ grid-template-columns:1.05fr 0.95fr; gap:3.5rem; } }
.antwoord{ background:var(--geeltint); border-radius:0; padding:1.5rem 1.6rem; }
.antwoord p{ font-size:var(--t-1); line-height:1.5; }
.uitleg-beeld svg{ width:100%; height:auto; display:block; max-width:400px; margin-inline:auto; }
.tabel-wrap table{ min-width:600px; }
.tabel-wrap{ overflow-x:auto; border:1.5px solid var(--lijn); border-radius:0; background:var(--wit); }
/* De min-width van 600 hoorde bij een brede specificatietabel in een omhulsel dat zelf
   kon schuiven. Op de tekstpagina's staat hij gewoon in de kolom en dan loopt de hele
   pagina 230 pixels buiten beeld op een telefoon. De brede tabellen krijgen die grens
   nu via hun eigen schuifbak, niet via elke tabel op de site. */
table{ border-collapse:collapse; width:100%; }
caption{ text-align:left; padding:1.1rem 1.4rem 0; font-size:var(--t-s); color:var(--grijs); }
th,td{ text-align:left; padding:0.95rem 1.4rem; font-size:var(--t-s); border-bottom:1px solid var(--lijn); vertical-align:top; }
thead th{ font-weight:500; border-bottom:1.5px solid var(--inkt); }
tbody th{ font-weight:400; color:var(--inkt-2); width:28%; }
tbody tr:last-child th,tbody tr:last-child td{ border-bottom:0; }
td b{ font-weight:500; }

/* ---------- over ---------- */
.over-grid{ display:grid; gap:2.5rem; align-items:center; }
@media (min-width:920px){ .over-grid{ grid-template-columns:1.02fr 0.98fr; gap:4rem; } }
.band--nacht h2{ color:var(--wit); font-size:var(--t-3); }
.over-tekst p{ color:#BDB7E2; margin-top:1.1rem; max-width:52ch; }
.over-lijst{ display:flex; flex-direction:column; gap:0.75rem; margin-top:1.6rem; }
.over-lijst li{ display:flex; gap:0.7rem; align-items:flex-start; color:#E5E4EC; font-size:var(--t-s); }
.over-lijst svg{ flex:none; width:17px; margin-top:0.22rem; color:var(--geel); }
.over-beeld svg{ width:100%; height:auto; display:block; }

/* ---------- merken ---------- */
.merken{ display:flex; flex-wrap:wrap; gap:0.5rem; }
.merken li{
  font-size:var(--t-s); color:var(--inkt-2); background:var(--wit);
  border:1.5px solid var(--lijn); border-radius:0; padding:0.4rem 1rem;
}

/* ---------- vragen ---------- */
.vragen-grid{ display:grid; gap:2.5rem; align-items:start; }
@media (min-width:980px){ .vragen-grid{ grid-template-columns:0.8fr 1.2fr; gap:4rem; } }
.vragen-zij svg{ width:100%; max-width:280px; height:auto; display:block; margin-top:1.5rem; }
.vragen{ border-top:1.5px solid var(--lijn); }
.vraag{ border-bottom:1.5px solid var(--lijn); }
.vraag summary{ cursor:pointer; list-style:none; padding:1.1rem 2.5rem 1.1rem 0; position:relative; font-size:var(--t-1); font-weight:500; letter-spacing:-0.015em; }
.vraag summary::-webkit-details-marker{ display:none; }
.vraag summary::after{
  content:""; position:absolute; right:0.4rem; top:1.55rem; width:11px; height:11px;
  border-right:2px solid var(--inkt); border-bottom:2px solid var(--inkt);
  transform:rotate(45deg); transition:transform 180ms ease;
}
.vraag[open] summary::after{ transform:rotate(-135deg); top:1.75rem; }
.vraag-tekst{ padding:0 0 1.35rem; color:var(--inkt-2); max-width:66ch; display:flex; flex-direction:column; gap:0.7rem; }

/* ---------- aanvraag ---------- */
.aanvraag-grid{ display:grid; gap:2rem; align-items:center; }
@media (min-width:900px){ .aanvraag-grid{ grid-template-columns:1.05fr 0.95fr; gap:3.5rem; } }
.aanvraag-kaart{ background:var(--wit); border:1.5px solid var(--lijn); border-radius:0; padding:1.6rem 1.7rem 1.75rem; }
.aanvraag-kaart h3{ font-size:var(--t-1); margin-bottom:0.9rem; }
.aanvraag-lijst{ display:flex; flex-direction:column; gap:0.7rem; }
.aanvraag-lijst li{ display:flex; gap:0.65rem; align-items:flex-start; font-size:var(--t-s); color:var(--inkt-2); }
.aanvraag-lijst svg{ flex:none; width:16px; margin-top:0.24rem; color:var(--violet); }
.slot-cta{ display:flex; flex-wrap:wrap; gap:0.75rem; margin-top:1.6rem; }

/* ---------- footer ---------- */
footer{ background:var(--diep); color:#BDB7E2; padding-block:3.25rem 2.25rem; }
.voet{ display:grid; gap:2rem; }
@media (min-width:860px){ .voet{ grid-template-columns:1.5fr 1fr 1fr 1fr; gap:2.5rem; } }
.voet h3{ font-size:var(--t-xs); font-family:"Basier Square",system-ui,sans-serif; font-weight:400; letter-spacing:0.14em; text-transform:uppercase; color:#9A93CE; margin-bottom:0.9rem; }
.voet ul{ display:flex; flex-direction:column; gap:0.5rem; }
.voet a{ color:#DCD7F0; text-decoration:none; font-size:var(--t-s); }
@media (hover:hover){ .voet a:hover{ color:var(--wit); text-decoration:underline; } }
.voet-over p{ font-size:var(--t-s); margin-top:0.9rem; max-width:36ch; }
.voet-onder{
  margin-top:2.5rem; padding-top:1.35rem; border-top:1px solid var(--lijn-donker);
  display:flex; flex-wrap:wrap; gap:0.5rem 1.75rem; justify-content:space-between;
  font-size:var(--t-xs); color:#9A93CE;
}
.voet-onder a{ color:#9A93CE; }
.fotobron{ font-size:var(--t-xs); color:#9A93CE; margin-top:1.25rem; }
.fotobron a{ color:inherit; }


/* ==========================================================================
   Aanvullende stijl voor de echte site: aanbod, voertuigpagina, aanvraag.
   De basis (kleuren, topbalk, header, footer, banden) komt uit homepage.html.
   Deze laag voegt alleen toe wat daar niet in zit.
   ========================================================================== */

@font-face{ font-family:"Basier Circle"; src:url("../fonts/BasierCircle-Regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"Basier Circle"; src:url("../fonts/BasierCircle-Medium.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:"Basier Circle"; src:url("../fonts/BasierCircle-SemiBold.woff2") format("woff2");
  font-weight:600 700; font-style:normal; font-display:swap; }
/* 600 EN 700 uit hetzelfde bestand. Van Basier Circle is er geen echte 700, en het
   ontwerp uit MagicPath zet alle koppen op 700. Zonder deze regel maakt de browser
   zelf een namaak-vet door de letters te verdikken, en op 68 pixels zie je dat: de
   randen worden vlekkerig en de letters lopen dicht. Nu pakt 700 de echte SemiBold. */
@font-face{ font-family:"Basier Square"; src:url("../fonts/BasierSquare-Regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap; }

.overslaan{ position:absolute; left:-9999px; top:0; z-index:100; padding:10px 16px;
  background:#3416C9; color:#FFFFFF; text-decoration:none; border-radius:0; }
.overslaan:focus{ left:0; }
[hidden]{ display:none !important; }
:where(a,button,input,select,summary):focus-visible{ outline:2px solid #3416C9; outline-offset:2px;
  border-radius:0; }

/* --- broodkruimel ------------------------------------------------------- */
.kruimel{ padding:14px 0 0; font-size:0.8125rem; color:#6E6B80; }
.kruimel ol{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; list-style:none;
  margin:0; padding:0; }
.kruimel li{ display:flex; align-items:center; gap:6px; }
.kruimel li+li::before{ content:"/"; color:#C2C0D0; }
.kruimel a{ color:#4D4A5C; text-decoration:none; }
.kruimel a:hover{ color:#1800AD; text-decoration:underline; }
.kruimel [aria-current]{ color:#1800AD; font-weight:500; }
@media (max-width:719px){ .kruimel .kruimel-diep{ display:none; } }

/* --- aanbod: kop en raster ---------------------------------------------- */
.ab{ background:#EFEEFB; padding:20px 0 18px; border-bottom:1px solid #E2E1EA; }
.ab-kop{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:10px; }
.ab-kop h1{ font-size:clamp(1.5rem,2.4vw,2rem); letter-spacing:-0.032em; color:#1800AD; margin:0; }
.ab-tel{ font-size:0.9375rem; color:#4D4A5C; font-variant-numeric:tabular-nums; }
.ab-tel b{ font-weight:600; color:#1800AD; }
.ab-lijf{ display:grid; gap:20px; padding:20px 0 56px; align-items:start; }
@media (min-width:1000px){ .ab-lijf{ grid-template-columns:272px 1fr; gap:28px; } }

/* --- filterkolom -------------------------------------------------------- */
.fk-open{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  min-height:46px; font:inherit; font-weight:500; color:#1800AD; background:#FFFFFF;
  border:1px solid #D6D5E0; border-radius:0; cursor:pointer; }
@media (min-width:1000px){ .fk-open{ display:none; } }
.fk{ background:#FFFFFF; border:1px solid #E2E1EA; border-radius:0; padding:0 14px 10px; }
@media (max-width:999px){
  .fk{ position:fixed; inset:0; z-index:60; border-radius:0; border:0; overflow-y:auto;
    padding:0 16px 96px; transform:translateY(100%); transition:transform .24s cubic-bezier(.16,1,.3,1); }
  .fk[data-open="ja"]{ transform:none; }
  .fk-sluit{ position:sticky; bottom:0; display:block; width:100%; min-height:52px; margin-top:12px;
    font:inherit; font-weight:600; color:#12141A; background:#FFB020; border:0; border-radius:0;
    cursor:pointer; }
}
@media (min-width:1000px){ .fk-sluit{ display:none; } .fk{ position:sticky; top:96px; } }
.fk-titel{ position:sticky; top:0; z-index:1; display:flex; align-items:center;
  justify-content:space-between; gap:8px; padding:14px 0 10px; background:#FFFFFF;
  font-size:0.9375rem; font-weight:600; color:#1800AD; }
@media (min-width:1000px){ .fk-titel{ display:none; } }
.fk-actief{ display:flex; flex-wrap:wrap; gap:6px; padding:12px 0; border-bottom:1px solid #EEEEF5; }
.fk-actief:empty{ display:none; }
.chip{ display:inline-flex; align-items:center; gap:6px; font:inherit; font-size:0.8125rem;
  font-weight:500; color:#1800AD; background:#EFEEFB; border:0; border-radius:0;
  padding:6px 10px; cursor:pointer; }
.chip span{ font-size:1rem; line-height:1; color:#756BBF; }
@media (hover:hover){ .chip:hover{ background:#DFDCF8; } .chip:hover span{ color:#1800AD; } }
.chip--leeg{ background:none; color:#6E6B80; text-decoration:underline; padding:6px 4px; }

.fg{ border-bottom:1px solid #EEEEF5; }
.fg:last-child{ border-bottom:0; }
.fg>summary{ display:flex; align-items:center; justify-content:space-between; gap:8px;
  min-height:48px; padding:0 2px; cursor:pointer; list-style:none;
  font-size:0.9375rem; font-weight:500; color:#12141A; }
.fg>summary::-webkit-details-marker{ display:none; }
.fg>summary::after{ content:""; width:8px; height:8px; margin-right:4px; flex:none;
  border-right:1.6px solid #9C9AAF; border-bottom:1.6px solid #9C9AAF;
  transform:rotate(45deg) translateY(-2px); transition:transform .18s ease; }
.fg[open]>summary::after{ transform:rotate(-135deg) translateY(-2px); }
.fg-tel{ font-size:0.8125rem; font-weight:400; color:#6E6B80; font-variant-numeric:tabular-nums; }
.fg-lijf{ padding:2px 2px 14px; }
.fg-zoek{ width:100%; min-height:40px; margin-bottom:8px; padding:0 10px; font:inherit;
  font-size:0.875rem; color:#12141A; background:#F7F7FC; border:1px solid #E2E1EA;
  border-radius:0; }
.fg-lijst{ display:grid; gap:1px; max-height:232px; overflow-y:auto; }
.fg-lijst label{ display:flex; align-items:center; gap:9px; min-height:36px; padding:0 4px;
  font-size:0.875rem; color:#12141A; cursor:pointer; border-radius:0; }
@media (hover:hover){ .fg-lijst label:hover{ background:#F7F7FC; } }
.fg-lijst input{ width:17px; height:17px; flex:none; accent-color:#3416C9; margin:0; }
.fg-lijst b{ margin-left:auto; font-size:0.8125rem; font-weight:400; color:#9C9AAF;
  font-variant-numeric:tabular-nums; }
.fg-leeg{ font-size:0.8125rem; color:#9C9AAF; padding:6px 4px; }
.fg-slot{ font-size:0.8125rem; color:#6E6B80; padding:8px 4px 0; }

/* een dunne scrollbalk: de standaard van Windows is veel te dominant in een filterkolom */
.fg-lijst{ scrollbar-width:thin; scrollbar-color:transparent transparent; }
.fg-lijst:hover,.fg-lijst:focus-within{ scrollbar-color:#CCCBDC transparent; }
.fg-lijst::-webkit-scrollbar{ width:6px; }
.fg-lijst::-webkit-scrollbar-thumb{ background:transparent; border-radius:0; }
.fg-lijst:hover::-webkit-scrollbar-thumb,
.fg-lijst:focus-within::-webkit-scrollbar-thumb{ background:#CCCBDC; }

.fp{ display:flex; align-items:center; gap:8px; }
.fp input{ width:100%; min-width:0; min-height:40px; padding:0 10px; font:inherit;
  font-size:0.875rem; color:#12141A; background:#FFFFFF; border:1px solid #E2E1EA;
  border-radius:0; font-variant-numeric:tabular-nums; }
.fp span{ color:#9C9AAF; flex:none; }
.fs select{ width:100%; min-height:40px; padding:0 30px 0 10px; font:inherit; font-size:0.875rem;
  color:#12141A; background:#FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%239AA2AF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center;
  border:1px solid #E2E1EA; border-radius:0; -webkit-appearance:none; appearance:none; }

/* --- resultaatkolom ----------------------------------------------------- */
.rk-bar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:10px; padding-bottom:14px; }
.rk-tel{ font-size:0.9375rem; color:#4D4A5C; }
.rk-tel b{ color:#1800AD; font-weight:600; font-variant-numeric:tabular-nums; }
.rk-sorteer{ display:flex; align-items:center; gap:8px; font-size:0.875rem; color:#6E6B80; }

.rooster{ display:grid; gap:18px; grid-template-columns:repeat(auto-fill,minmax(252px,1fr)); }
.kaart{ display:flex; flex-direction:column; background:#FFFFFF; border:1px solid #E6E4F2;
  border-radius:0; overflow:hidden; text-decoration:none; color:inherit;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s cubic-bezier(.16,1,.3,1); }
@media (hover:hover){ .kaart:hover{ border-color:#BEB9DE; transform:translateY(-2px);
  box-shadow:0 10px 24px -14px rgba(16,24,40,.3); } }
.kaart-beeld{ aspect-ratio:4/3; background:#F2F2F7; overflow:hidden; }
.kaart-beeld img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Elke regel is precies een regel hoog met puntjes als hij niet past. Zo zijn alle kaarten in
   het raster even hoog en wordt er nooit middenin een woord afgebroken. */
.kaart-body{ display:grid; gap:3px; padding:13px 14px 12px; }
.kaart-type,.kaart-feit{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* De modelnaam mag twee regels gebruiken en houdt die ruimte altijd vast, zodat lange namen
   als "BMW 2-Serie Gran Tourer" heel blijven en alle kaarten toch even hoog zijn. */
.kaart-naam{ font-size:1rem; font-weight:600; color:#1800AD; letter-spacing:-0.012em;
  line-height:1.3; min-height:2.6em; display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden; }
.kaart-type{ font-size:0.8125rem; color:#6E6B80; line-height:1.4; }
.kaart-feit{ font-size:0.8125rem; color:#8D8AA3; line-height:1.4; margin-top:3px;
  font-variant-numeric:tabular-nums; }

.kaart-voet{ display:flex; align-items:flex-end; justify-content:space-between; gap:10px;
  margin-top:auto; padding:11px 14px 14px; border-top:1px solid #EEEEF5; }
.kaart-pm b,.kaart-prijs b{ display:block; font-variant-numeric:tabular-nums;
  letter-spacing:-0.018em; }
.kaart-pm b{ font-size:1.1875rem; font-weight:700; color:#1800AD; line-height:1.15; }
.kaart-pm span{ font-size:0.75rem; color:#8D8AA3; }
.kaart-prijs{ text-align:right; }
.kaart-prijs b{ font-size:0.9375rem; font-weight:500; color:#4D4A5C; line-height:1.15; }
.kaart-prijs span{ font-size:0.75rem; color:#8D8AA3; }

.leeg{ padding:56px 20px; text-align:center; background:#FFFFFF; border:1px solid #E2E1EA;
  border-radius:0; }
.leeg b{ display:block; font-size:1.125rem; color:#1800AD; margin-bottom:6px; }
.leeg p{ color:#6E6B80; margin:0 0 16px; }

.meer{ display:block; width:100%; min-height:48px; margin-top:20px; font:inherit;
  font-weight:500; color:#1800AD; background:#FFFFFF; border:1px solid #D6D5E0;
  border-radius:0; cursor:pointer; }
@media (hover:hover){ .meer:hover{ background:#F7F7FC; border-color:#BEB9DE; } }

/* ==========================================================================
   Voertuigpagina
   ========================================================================== */
.vt{ padding:0 0 56px; }
.vt-kop{ padding:10px 0 16px; }
.vt-kop h1{ font-size:clamp(1.6rem,2.8vw,2.25rem); letter-spacing:-0.034em; color:#1800AD;
  line-height:1.1; margin:0; text-wrap:balance; }
.vt-type{ font-size:1rem; color:#4D4A5C; margin:4px 0 0; line-height:1.4; }

/* Twee vinkregels onder de merknaam in plaats van een kale opsomming van uitvoering, bouwjaar
   en kilometerstand. Die drie staan onder de foto in de feitenstrook, dus daar stonden ze
   dubbel. Deze twee regels zeggen wat het kost en wat je ervoor krijgt. */
.vt-punten{ display:grid; gap:7px; margin:10px 0 0; padding:0; list-style:none; }
.vt-punten li{ display:flex; align-items:flex-start; gap:9px; font-size:1rem; color:#12141A;
  line-height:1.45; }
.vt-punten svg{ flex:none; margin-top:2px; color:#3416C9; }
.vt-punten b{ font-weight:600; color:#1800AD; font-variant-numeric:tabular-nums; }

/* De losse mobiele prijsregel is vervallen: de vinkregel onder de merknaam noemt het
   maandbedrag al, en dan stond het bedrag twee keer boven elkaar. */

.vt-lijf{ display:grid; gap:24px; align-items:start; }
/* De rekenkaart heeft een vaste, smalle breedte zodat alle ruimte die overblijft naar de foto
   gaat. Op een laptop 348, op een breed scherm 396. Daaronder een kolom. */
@media (min-width:1000px){
  .vt-lijf{ grid-template-columns:minmax(0,1fr) 348px; gap:28px; }
  .vt-beeld{ grid-column:1; grid-row:1; }
  .vt-rest { grid-column:1; grid-row:2; }
  .vt-geld { grid-column:2; grid-row:1 / span 2; }
}
@media (min-width:1280px){ .vt-lijf{ grid-template-columns:minmax(0,1fr) 396px; gap:36px; } }

/* --- galerij ------------------------------------------------------------ */
.gal{ display:grid; gap:8px; }
.gal-groot{ position:relative; aspect-ratio:4/3; background:#F2F2F7; border-radius:0;
  overflow:hidden; }
.gal-groot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .18s ease; }
.gal-groot img[data-actief]{ opacity:1; }
.gal-pijl{ position:absolute; top:50%; translate:0 -50%; width:40px; height:40px;
  display:grid; place-items:center; background:rgba(255,255,255,.92); border:0;
  border-radius:0; cursor:pointer; color:#12141A;
  box-shadow:0 2px 10px rgba(16,24,40,.16); }
.gal-pijl[data-r="l"]{ left:10px; } .gal-pijl[data-r="r"]{ right:10px; }
@media (hover:hover){ .gal-pijl:hover{ background:#FFFFFF; } }
.gal-tel{ position:absolute; right:10px; bottom:10px; padding:4px 9px; border-radius:0;
  background:rgba(18,20,26,.72); color:#FFFFFF; font-size:0.75rem;
  font-variant-numeric:tabular-nums; }
/* De strook was gemaakt voor drie miniaturen. Sinds alle foto's van de advertentie
   meekomen zijn het er tot dertig, en zonder deze regels persen ze zichzelf plat tot
   streepjes van drie pixels. Nu schuift de strook horizontaal, met de scrollbalk uit
   het zicht en een vastklikpunt per miniatuur. */
.gal-strip{ display:flex; gap:8px; overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x proximity; scrollbar-width:none; padding-bottom:2px; }
.gal-strip::-webkit-scrollbar{ display:none; }
.gal-strip button{ width:84px; flex:none; scroll-snap-align:start;
  aspect-ratio:4/3; padding:0; border:2px solid transparent;
  border-radius:0; overflow:hidden; background:#F2F2F7; cursor:pointer;
  transition:border-color .12s ease; }
.gal-strip button[data-actief]{ border-color:#1800AD; }
.gal-strip img{ width:100%; height:100%; object-fit:cover; display:block; }
.gal-een .gal-pijl,.gal-een .gal-tel,.gal-een .gal-strip{ display:none; }

/* --- feitenstrook ------------------------------------------------------- */
.feiten{ display:grid; grid-template-columns:repeat(auto-fit,minmax(128px,1fr)); gap:1px;
  margin-top:16px; background:#E6E4F2; border:1px solid #E6E4F2; border-radius:0;
  overflow:hidden; }
.feiten div{ display:flex; flex-direction:column; align-items:center; gap:5px; padding:16px 10px;
  background:#FFFFFF; text-align:center; }
.feiten svg{ color:#8D8AA3; }
.feiten dt{ font-size:0.75rem; color:#8D8AA3; order:3; }
.feiten dd{ margin:0; font-size:0.9375rem; font-weight:600; color:#12141A; order:2;
  font-variant-numeric:tabular-nums; line-height:1.3; }

/* --- blokken ------------------------------------------------------------ */
.blok{ margin-top:32px; }
.blok>h2{ font-size:1.125rem; letter-spacing:-0.018em; color:#1800AD; margin:0 0 14px; }
.krijg{ display:grid; gap:10px; margin:0; padding:16px 18px; list-style:none;
  background:#EFEEFB; border-radius:0; }
.krijg li{ display:flex; gap:10px; align-items:flex-start; font-size:0.9375rem; color:#12141A;
  line-height:1.45; }
.krijg svg{ flex:none; margin-top:2px; color:#3416C9; }
.krijg b{ font-weight:600; }

/* Specificaties in twee kolommen: de mediane auto heeft een handvol gevulde velden, en die
   staan naast elkaar korter en overzichtelijker dan onder elkaar. */
.spec{ display:grid; gap:0 32px; margin:0; }
@media (min-width:640px){ .spec{ grid-template-columns:1fr 1fr; } }
.spec>div{ display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:11px 0; border-bottom:1px solid #EEEEF5; }
.spec dt{ font-size:0.9375rem; color:#6E6B80; flex:none; }
.spec dd{ margin:0; font-size:0.9375rem; color:#12141A; text-align:right;
  font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }

.uit{ display:flex; flex-wrap:wrap; gap:7px; margin:0; padding:0; list-style:none; }
.uit li{ font-size:0.8125rem; color:#12141A; background:#F2F2F7; border-radius:0;
  padding:6px 10px; }

.inklap{ border:1px solid #E2E1EA; border-radius:0; margin-top:10px; }
.inklap>summary{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  min-height:52px; padding:0 16px; cursor:pointer; list-style:none;
  font-size:0.9375rem; font-weight:500; color:#12141A; }
.inklap>summary::-webkit-details-marker{ display:none; }
.inklap>summary::after{ content:""; width:8px; height:8px; flex:none;
  border-right:1.6px solid #9C9AAF; border-bottom:1.6px solid #9C9AAF;
  transform:rotate(45deg) translateY(-2px); transition:transform .18s ease; }
.inklap[open]>summary::after{ transform:rotate(-135deg) translateY(-2px); }
.inklap-lijf{ padding:0 16px 16px; font-size:0.9375rem; color:#4D4A5C; line-height:1.6; }
.inklap-lijf p{ margin:0 0 10px; } .inklap-lijf p:last-child{ margin:0; }
.vt-bron{ margin-top:22px; font-size:0.8125rem; color:#9C9AAF; }

/* ==========================================================================
   Rekenkaart. Maten opgemeten bij nationaleautolease, lease.auto en financiallease.nl:
   basis 16px, schuifspoor 8px, kaart 24px padding met radius 16 en geen rand of schaduw.
   ========================================================================== */
.vza{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.rek{ background:#F6F5FD; border:1px solid #DEDCF3; border-radius:0; padding:24px; }
@media (min-width:1000px){ .rek{ position:sticky; top:96px; } }

.rek-aanschaf{ padding-bottom:16px; border-bottom:1px solid #DEDCF3; margin-bottom:18px; }
.rek-aanschaf .rij{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.rek-aanschaf .rij span{ font-size:0.9375rem; color:#5E5A73; }
.rek-aanschaf .rij b{ font-size:1.25rem; font-weight:600; color:#12141A;
  font-variant-numeric:tabular-nums; }
.rek-aanschaf .btw{ display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin-top:5px; font-size:0.875rem; color:#8D8AA3; }
.rek-aanschaf .btw b{ font-weight:500; color:#5E5A73; font-variant-numeric:tabular-nums; }

.rek-blok+.rek-blok{ margin-top:14px; }
.veldkop{ font-size:0.9375rem; font-weight:500; color:#12141A; }
.schuifkop{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex:1; }
.schuifkop b{ font-size:1.0625rem; font-weight:600; color:#1800AD;
  font-variant-numeric:tabular-nums; }

/* Uitleg achter een klikbaar icoon. Geen tooltip: die vraagt op een telefoon een extra tik,
   opent over het veld heen dat je wilde bedienen en sluit bij elke scroll. */
.uitleg>summary{ display:flex; align-items:center; gap:8px; cursor:pointer; list-style:none;
  min-height:26px; }
.uitleg>summary::-webkit-details-marker{ display:none; }
.uitleg>summary i{ position:relative; display:grid; place-items:center; width:20px; height:20px;
  flex:none; border-radius:0; background:#FFFFFF; border:1px solid #CDC9EC; color:#1800AD;
  font-style:normal;
  font-size:0.75rem; font-weight:600; font-family:"Basier Square",serif;
  transition:background .16s ease, color .16s ease; }
/* 44px aanraakvlak zonder 44px in de layout */
.uitleg>summary i::after{ content:""; position:absolute; inset:-12px; }
@media (hover:hover){ .uitleg>summary:hover i{ background:#1800AD; color:#FFFFFF; } }
.uitleg[open]>summary i{ background:#1800AD; color:#FFFFFF; }
.uitlegtekst{ margin:10px 0 0; padding:14px 16px; background:#FFFFFF; border:1px solid #E6E4F7;
  border-radius:0;
  font-size:0.875rem; color:#5E5A73; line-height:1.6; }

.schuif{ -webkit-appearance:none; appearance:none; width:100%; height:8px; border-radius:0;
  background:#D6D3F2; outline:0; margin:12px 0 0; }
.schuif::-webkit-slider-thumb{ -webkit-appearance:none; width:28px; height:28px;
  border-radius:0; background:#1800AD; border:4px solid #FFFFFF;
  box-shadow:0 2px 10px rgba(14,42,99,.34); cursor:pointer; }
.schuif::-moz-range-thumb{ width:28px; height:28px; border-radius:0; background:#1800AD;
  border:4px solid #FFFFFF; box-shadow:0 2px 10px rgba(14,42,99,.34); cursor:pointer; }
.schuif:focus-visible{ outline:3px solid #3416C9; outline-offset:4px; }
.schaal{ display:flex; justify-content:space-between; margin-top:7px; font-size:0.8125rem;
  color:#8D8AA3; font-variant-numeric:tabular-nums; }

.rek-uitkomst{ margin-top:14px; padding-top:14px; border-top:1px solid #DEDCF3; }
.rek-label{ font-size:0.875rem; font-weight:500; color:#5E5A73; margin:0 0 4px; }
.rek-uit{ display:flex; align-items:baseline; gap:10px; }
.rek-uit b{ font-size:2.125rem; font-weight:700; color:#1800AD; letter-spacing:-0.03em;
  line-height:1.1; font-variant-numeric:tabular-nums; transition:color .2s ease; }
.rek-uit b[data-puls]{ color:#331BA8; }
.rek-uit span{ font-size:0.9375rem; font-weight:500; color:#5E5A73; }

.rek-knop{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
  min-height:54px; margin-top:14px; font:inherit; font-size:1.0625rem; font-weight:600;
  color:#FFFFFF; background:#1800AD; border:0; border-radius:0; cursor:pointer;
  transition:background .16s ease; }
@media (hover:hover){ .rek-knop:hover{ background:#3416C9; } }
.rek-vrij{ display:flex; align-items:center; justify-content:center; gap:8px; margin:10px 0 0;
  font-size:0.875rem; color:#5E5A73; }
.rek-vrij svg{ color:#0F7B4F; flex:none; }
.rek-proof{ display:flex; align-items:center; justify-content:center; gap:8px; margin:10px 0 0;
  padding-top:11px; border-top:1px solid #DEDCF3; font-size:0.875rem; color:#5E5A73;
  white-space:nowrap; }
.rek-proof b{ color:#12141A; font-weight:600; }
.sterren{ display:flex; gap:2px; color:#FFB020; }

.rek-usps{ list-style:none; margin:14px 0 0; padding:0; display:grid; gap:10px; }
.rek-usps li{ display:flex; gap:10px; align-items:flex-start; font-size:0.875rem; color:#12141A;
  line-height:1.5; }
.rek-usps svg{ flex:none; margin-top:1px; color:#0F7B4F; }
.rek-usps b{ font-weight:600; }

.rek-contact{ display:flex; gap:14px; align-items:center; margin-top:12px; padding:12px 18px;
  background:#FFFFFF; border:1px solid #E6E4F2; border-radius:0; }
.portret{ position:relative; width:52px; height:52px; flex:none; }
.portret .vlak{ width:52px; height:52px; border-radius:0; background:#F1F0FA; display:grid;
  place-items:center; color:#8D8AA3; }
.status{ position:absolute; left:50%; bottom:-7px; translate:-50% 0; display:flex;
  align-items:center; gap:4px; padding:3px 8px; border-radius:0; font-size:0.6875rem;
  font-weight:600; white-space:nowrap; background:#0F7B4F; color:#FFFFFF; }
.status[data-open="nee"]{ background:#5E5A73; }
.status i{ width:6px; height:6px; border-radius:0; background:#FFFFFF; }
.rek-contact .tekst b{ display:block; font-size:0.9375rem; color:#1800AD; font-weight:600; }
.rek-contact .tekst a{ display:inline-flex; align-items:center; gap:7px; margin-top:2px;
  font-size:1.0625rem; font-weight:600; color:#12141A; text-decoration:none;
  font-variant-numeric:tabular-nums; }
.rek-contact .tekst a svg{ color:#3416C9; flex:none; }
.rek-contact .tekst a:hover{ text-decoration:underline; }

.rek-rente{ margin:12px 0 0; font-size:0.8125rem; color:#8D8AA3; line-height:1.55; }

/* --- vaste onderbalk op mobiel ------------------------------------------ */
.balk{ position:fixed; left:0; right:0; bottom:0; z-index:50; display:flex; align-items:center;
  justify-content:space-between; gap:12px; padding:9px 16px calc(9px + env(safe-area-inset-bottom));
  background:#FFFFFF; border-top:1px solid #E2E1EA; box-shadow:0 -4px 18px rgba(16,24,40,.08);
  transform:translateY(105%); transition:transform .22s cubic-bezier(.16,1,.3,1); }
.balk[data-toon]{ transform:none; }
/* de balk hangt niet aan de schermbreedte maar aan de vraag of de gele knop in beeld staat.
   Op een laptop van 768 hoog past de hele rekenkaart niet, en dan is dit de enige weg. */
@media (min-width:1000px){
  /* linksonder, niet rechts: rechts staat de rekenkaart en daar dekte de balk de
     aanbetalingsknoppen af. Links ligt de galerij, en daar hindert hij niets. */
  .balk{ right:auto; left:24px; bottom:24px; width:auto; border-radius:0;
    border:1px solid #E2E1EA; padding:10px 12px 10px 18px; gap:18px;
    box-shadow:0 10px 30px -12px rgba(16,24,40,.28); }
  .balk[data-toon]{ transform:none; }
}
.balk-bedrag b{ display:block; font-size:1.125rem; font-weight:600; color:#1800AD;
  line-height:1.15; font-variant-numeric:tabular-nums; }
.balk-bedrag span{ font-size:0.75rem; color:#6E6B80; }
.balk .rek-knop{ width:auto; margin:0; padding:0 18px; min-height:46px; flex:none; }

/* ==========================================================================
   Aanvraagformulier
   ========================================================================== */
.mod{ position:fixed; inset:0; z-index:80; display:grid; place-items:end center;
  background:rgba(14,20,34,.5); padding:0; }
@media (min-width:720px){ .mod{ place-items:center; padding:24px; } }
.mod.overslaan{ position:absolute; left:-9999px; top:0; z-index:100; padding:10px 16px;
  background:#3416C9; color:#FFFFFF; text-decoration:none; border-radius:0; }
.overslaan:focus{ left:0; }
[hidden]{ display:none !important; }
.mod-kaart{ width:100%; max-width:520px; max-height:92vh; overflow-y:auto; background:#FFFFFF;
  border-radius:0; padding:20px; }
@media (min-width:720px){ .mod-kaart{ border-radius:0; padding:26px; } }
.mod-kop{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  margin-bottom:4px; }
.mod-kop h2{ font-size:1.25rem; letter-spacing:-0.022em; color:#1800AD; margin:0; }
.mod-sluit{ width:36px; height:36px; flex:none; display:grid; place-items:center; font:inherit;
  font-size:1.25rem; color:#6E6B80; background:#F2F2F7; border:0; border-radius:0;
  cursor:pointer; line-height:1; }
.mod-auto{ display:flex; align-items:center; gap:11px; margin:14px 0; padding:11px;
  background:#EFEEFB; border-radius:0; }
.mod-auto img{ width:60px; height:45px; object-fit:cover; border-radius:0; flex:none;
  background:#E2E1EA; }
.mod-auto div{ min-width:0; }
.mod-auto b{ display:block; font-size:0.9375rem; color:#1800AD; }
.mod-auto span{ font-size:0.8125rem; color:#4D4A5C; font-variant-numeric:tabular-nums; }
.mod-stap{ font-size:0.8125rem; color:#6E6B80; margin:0 0 12px; }
.veld{ margin-bottom:13px; }
.veld label{ display:block; font-size:0.875rem; font-weight:500; color:#12141A; margin-bottom:6px; }
.veld input,.veld select{ width:100%; min-height:48px; padding:0 12px; font:inherit;
  font-size:1rem; color:#12141A; background:#FFFFFF; border:1px solid #D6D5E0;
  border-radius:0; }
.veld input:focus{ border-color:#3416C9; }
.veld input[aria-invalid="true"]{ border-color:#B42318; }
.veld-fout{ display:block; margin-top:5px; font-size:0.8125rem; color:#B42318; }
.veld-hint{ display:block; margin-top:5px; font-size:0.8125rem; color:#6E6B80; }
.keuzerij{ display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:7px; }
.keuzerij label{ display:flex; align-items:center; justify-content:center; min-height:46px;
  padding:0 8px; margin:0; text-align:center; font-size:0.875rem; color:#4D4A5C;
  background:#F7F7FC; border:1px solid #E2E1EA; border-radius:0; cursor:pointer;
  transition:border-color .14s ease, background .14s ease; }
.keuzerij input{ position:absolute; opacity:0; width:0; height:0; }
.keuzerij input:checked+span{ color:#1800AD; font-weight:600; }
.keuzerij label:has(input:checked){ background:#EFEEFB; border-color:#3416C9; }
.mod-voet{ display:flex; gap:9px; margin-top:16px; }
.mod-voet button{ flex:1; min-height:52px; font:inherit; font-size:1rem; font-weight:600;
  border-radius:0; cursor:pointer; }
.mod-terug{ flex:0 0 96px !important; font-weight:500 !important; color:#4D4A5C;
  background:#FFFFFF; border:1px solid #D6D5E0; }
.mod-door{ color:#12141A; background:#FFB020; border:0; }
@media (hover:hover){ .mod-door:hover{ background:#FFDE3D; } }
.mod-klein{ margin:11px 0 0; font-size:0.75rem; color:#6E6B80; line-height:1.5; }
.mod-klein a{ color:#4D4A5C; }
.mod-bel{ margin:12px 0 0; padding-top:12px; border-top:1px solid #EEEEF5; text-align:center;
  font-size:0.875rem; color:#6E6B80; }
.mod-bel a{ color:#1800AD; font-weight:600; text-decoration:none;
  font-variant-numeric:tabular-nums; }

/* --- vertrouwensregel --------------------------------------------------- */
.proof{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px;
  margin-top:11px; font-size:0.8125rem; color:#4D4A5C; }
.proof .sterren{ display:flex; gap:1px; color:#FFB020; }
.proof a{ color:#4D4A5C; }

/* --- veelgestelde vragen op de voertuigpagina --------------------------- */
.vragen{ display:grid; gap:8px; }

/* --- vergelijkbaar ------------------------------------------------------ */
.verg{ margin-top:44px; padding-top:32px; border-top:1px solid #E2E1EA; }
.verg h2{ font-size:1.25rem; letter-spacing:-0.022em; color:#1800AD; margin:0 0 4px; }
.verg p{ color:#6E6B80; margin:0 0 16px; font-size:0.9375rem; }
.verg .rooster{ grid-template-columns:repeat(auto-fill,minmax(228px,1fr)); }
/* op een telefoon stond dit blok op een derde van de hele paginahoogte. Drie kaarten is
   genoeg om iemand door te laten klikken; de vierde kost alleen scrollwerk. */
@media (max-width:719px){ .verg .kaart:nth-child(4){ display:none; } }

/* --- markering voor gegevens die nog moeten komen ----------------------- */
.todo{ text-decoration:underline dotted #C2C0D0; text-underline-offset:3px; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* Vertrouwensregel en voorbehoud staan onder de kaart, niet erin: anders duwen ze de gele
   knop van het scherm af op een laptop van 768 pixels hoog. */
.rek-onderaan{ margin-top:12px; padding:14px 16px; background:#FFFFFF; border:1px solid #E2E1EA;
  border-radius:0; }
.rek-onderaan .proof{ margin:0 0 10px; justify-content:flex-start; }
.rek-onderaan .rek-rente{ margin:0; padding:10px 0 0; border-top:1px solid #EEEEF5; }
.rek-onderaan .rek-totaal{ margin:0 0 10px; padding:0 0 10px; border-top:0;
  border-bottom:1px solid #EEEEF5; }

/* De footerkoppen zijn h2 geworden: op een lijstpagina staat er geen h2 boven, en h1 naar h3
   is een sprong die schermlezers als een ontbrekend niveau melden. De opmaak blijft gelijk. */
.voet h2{ font-size:var(--t-xs); font-family:"Basier Square",system-ui,sans-serif;
  font-weight:400; letter-spacing:0.14em; text-transform:uppercase; color:#9A93CE;
  margin-bottom:0.9rem; }

/* --- tekstpagina's (voorwaarden, privacy) ------------------------------- */
.tekstpagina{ max-width:720px; padding:20px 0 72px; }
.tekstpagina h1{ font-size:clamp(1.7rem,3vw,2.3rem); letter-spacing:-0.034em; color:#1800AD;
  margin:0 0 14px; }
.tekstpagina h2{ font-size:1.125rem; letter-spacing:-0.018em; color:#1800AD; margin:30px 0 10px; }
.tekstpagina p{ color:#4D4A5C; line-height:1.65; margin:0 0 12px; }
.tekstpagina .tekst-in{ font-size:1.0625rem; color:#12141A; }
.tekstpagina a{ color:#1800AD; }
.tekstpagina .spec{ margin:6px 0 4px; }

/* --- mobiel menu -------------------------------------------------------- */
/* Onder 1080 pixels was .nav display:none en was het logo de enige link in de header. */
/* De oude regels stonden hier. Ze golden voor ELKE span in de knop, dus toen het
   woord "Menu" erbij kwam werd dat een zwart streepje van 2 pixels hoog. De opmaak
   staat nu verderop en richt zich alleen op .kop-menu-strepen. */
@media (min-width:1080px){ .kop-menu{ display:none !important; } }

@media (min-width:1080px){ .nav-bel{ display:none; } }

/* --- contactpagina ------------------------------------------------------ */
.contact{ padding:20px 0 72px; }
.contact h1{ font-size:clamp(1.7rem,3vw,2.4rem); letter-spacing:-0.034em; color:#1800AD;
  margin:0 0 12px; }
.contact h2{ font-size:1.125rem; letter-spacing:-0.018em; color:#1800AD; margin:28px 0 10px; }
.contact-in{ font-size:1.0625rem; color:#4D4A5C; line-height:1.65; margin:0 0 22px;
  max-width:52ch; }
.contact-lijf{ display:grid; gap:32px; align-items:start; }
/* Twee kolommen pas vanaf 1024. Op 900 paste 1fr plus 400 plus 48 gap niet meer in de
   bak en liep het formulier 183 pixels buiten beeld; de pagina kreeg een horizontale
   schuifbalk. De min-width:0 hoort erbij: zonder dat kan een rasterkolom niet krimpen onder
   de breedte van zijn inhoud, en de tabel met de bedrijfsgegevens duwde hem open. */
.contact-lijf > * { min-width: 0; }
.contact-lijf .spec { width: 100%; }
@media (min-width:1024px){
  .contact-lijf{ grid-template-columns:minmax(0,1fr) minmax(0,400px); gap:48px; }
}
.contact-kanalen{ display:grid; gap:10px; }
.kanaal{ display:flex; align-items:center; gap:14px; padding:14px 16px; background:#FFFFFF;
  border:1px solid #E2E1EA; border-radius:0; text-decoration:none; color:inherit;
  transition:border-color .16s ease; }
@media (hover:hover){ .kanaal:hover{ border-color:#BEB9DE; } }
.kanaal svg{ flex:none; color:#3416C9; }
.kanaal b{ display:block; font-size:1.0625rem; color:#1800AD;
  font-variant-numeric:tabular-nums; }
.kanaal span{ font-size:0.8125rem; color:#6E6B80; }
.kanaal b+ span,.kanaal span b{ display:block; }
.contact-door{ margin-top:24px; font-size:0.9375rem; color:#4D4A5C; line-height:1.6; }
.contact-door a{ color:#1800AD; }
.contact-form{ background:#FFFFFF; border:1px solid #E2E1EA; border-radius:0; padding:22px; }
.contact-form h2{ margin:0 0 4px; }
.contact-klein{ font-size:0.875rem; color:#6E6B80; margin:0 0 18px; }
.contact-form .rek-knop{ margin-top:6px; }

/* --- menuknop ------------------------------------------------------------ */
/* Drie identieke streepjes is het icoon dat op elke site staat. Deze heeft een
   haarlijnrand, kobalte strepen en een onderste streep die korter is. Die ongelijkheid is
   het enige wat hem van de standaard onderscheidt, en meer is ook niet nodig. Het woord
   Menu staat erbij zodra er ruimte is: een icoon zonder woord kost bedenktijd. */
/* Alleen het icoon: geen woord ernaast en geen kader eromheen. Daardoor is er ruimte om de
   streepjes zelf groter te maken, en dat leest op een telefoon beter dan een klein icoontje
   in een doosje. Het raakvlak blijft 48 bij 48, ruim boven de 44 pixels die je minimaal
   wilt hebben voor een duim. */
.kop-menu{ display:flex; align-items:center; justify-content:center; gap:0;
  width:48px; height:48px; min-width:48px; min-height:48px;
  margin-left:auto; padding:0; background:transparent; border:0; cursor:pointer;
  border-radius:0; transition:background .16s ease; }
.kop-menu:hover{ background:#F1EFFC; }
.kop-menu:focus-visible{ outline:2px solid var(--diep); outline-offset:2px; }
.kop-menu-strepen{ display:flex; flex-direction:column; align-items:flex-start; gap:7px;
  width:30px; }
/* Drie streepjes waarvan de onderste duidelijk korter is. Het stond al zo, maar op
   20-20-13 met een dikte van 2 pixels zag je het verschil nauwelijks. Nu 24-24-13 met een
   dikte van 2,5: de knik onderaan is meteen zichtbaar en dat is precies wat dit icoon van
   de standaard hamburger onderscheidt. */
.kop-menu-strepen span{ display:block; height:3px; width:30px; border-radius:0;
  background:var(--diep);
  transition:transform .18s ease, opacity .14s ease, width .18s ease; }
.kop-menu-strepen span:nth-child(3){ width:17px; }
.kop-menu[aria-expanded="true"] .kop-menu-strepen span:nth-child(1){
  transform:translateY(10px) rotate(45deg); }
.kop-menu[aria-expanded="true"] .kop-menu-strepen span:nth-child(2){ opacity:0; }
.kop-menu[aria-expanded="true"] .kop-menu-strepen span:nth-child(3){ width:30px;
  transform:translateY(-10px) rotate(-45deg); }
/* Het woord blijft in de opmaak staan maar is niet meer te zien: zonder tekst en zonder
   label heeft de knop geen naam voor iemand met een schermlezer. */
.kop-menu-tekst{ position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
/* het verbergen van het woord Menu staat nu in de ongelaagde
   homepage-regels, op 340 px in plaats van 420 px */

/* --- de knop in de header ------------------------------------------------ */
/* Omlijnd in plaats van geel. Geel is van de zoekknop in de hero; twee gele knoppen boven
   elkaar heffen elkaar op. */
.kop-cta{ background:#FFFFFF !important; color:var(--diep) !important;
  box-shadow:inset 0 0 0 1.5px var(--lijn); font-variant-numeric:tabular-nums; }
.kop-cta:hover{ background:#F6F5FE !important;
  box-shadow:inset 0 0 0 1.5px var(--diep); }


/* ======================================================================
   KOP EN AANKONDIGINGSBALK: het sjabloon voor elke pagina
   ======================================================================
   Deze regels stonden eerst in het blok dat alleen de homepage laadt. Daardoor zag de kop
   er op de calculator en de voertuigpagina's anders uit: lege balk, ander lettertype.
   Alles wat bij kop en balk hoort staat nu hier, en dit bestand zit in elke pagina. */

/* Plus Jakarta Sans: het lettertype van het ontwerp uit MagicPath. Stond eerst alleen op de
   homepage, waardoor de rest van de site in Basier Circle bleef. Twee lettertypes binnen
   een site valt op zodra je doorklikt. */
@font-face{font-family:"Plus Jakarta Sans";src:url("/fonts/PlusJakartaSans-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url("/fonts/PlusJakartaSans-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url("/fonts/PlusJakartaSans-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url("/fonts/PlusJakartaSans-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
/* De zware snede uit het logo. De site ging tot 700 en de koppen werden daarmee net
   iets lichter gezet dan de naam in het logo. Met 800 staan ze op hetzelfde gewicht. */
@font-face{font-family:"Plus Jakarta Sans";src:url("/fonts/PlusJakartaSans-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}

body, .topbalk, .topbalk *, header, header *, footer, footer *,
.nav, .nav *, .kop-cta, .mega, .mega * {
  font-family: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
}

/* De balk op een telefoon. Hij was tweeenveertig pixels donkerblauw waarin niets stond: de
   belofte, de opsommingen en het reviewcijfer waren alle drie verborgen en alleen het
   nummer bleef over. Nu links wat 672 ondernemers ervan vonden, rechts het nummer. */
/* De balk op een telefoon. Het telefoonnummer is eruit, dus wat overblijft is het bewijs:
   wat 672 ondernemers ervan vonden en hoeveel auto's er klaarstaan. Die twee samen op een
   regel, gecentreerd, met een puntje ertussen zodat het één mededeling is en geen twee
   losse blokjes die toevallig naast elkaar staan.

   De belofte en de drie opsommingen blijven weg: die staan een paar centimeter lager al in
   de zoekkaart en zouden hier over drie regels breken. */
@media (max-width: 767px) {
  .topbalk .wrap {
    flex-direction: row; align-items: center; justify-content: center;
    gap: 0.6rem; padding-block: 0.5rem;
  }
  .topbalk-claim, .topbalk-usp { display: none; }
  .topbalk-links {
    margin-left: 0; width: 100%; flex-wrap: nowrap;
    align-items: center; justify-content: center; gap: 0.55rem;
  }
  .balk-score { display: inline-flex; gap: 0.3rem; font-size: 0.8125rem; }
  /* Let op het teken > : zonder dat raakt deze regel ook de gele sterrenlaag, want die is
     het laatste kind van zijn eigen omhulsel. De sterren werden dan wit-transparant. */
  .balk-score > span:last-child { display: inline; color: #FFFFFF; }
  .balk-score .sterren-vol { display: flex; }
  .balk-aanbod { display: inline-flex; font-size: 0.8125rem; }
  .balk-aanbod::before {
    content: "\00B7"; margin-right: 0.5rem; color: rgba(255,255,255,.45);
  }
}
/* Op de allersmalste toestellen valt het woord reviews weg. Het cijfer, de sterren en het
   aantal auto's blijven, want dat zijn de twee dingen die iets bewijzen. */
@media (max-width: 359px) {
  .balk-score > span:last-child { display: none; }
  .kop-menu-strepen { margin: 0 auto; }
}


/* ======================================================================
   CHATKNOP RECHTSONDER
   ======================================================================
   Een kale link naar wa.me opent WhatsApp met een leeg venster, en dan moet iemand zelf
   bedenken wat hij vraagt. Daar haken mensen af. Dit paneel zet drie vragen klaar en stuurt
   wat er staat mee als eerste bericht. */
.wa-houder{ position:fixed; right:16px; z-index:60; display:flex; flex-direction:column;
  align-items:flex-end; gap:10px;
  bottom:calc(16px + env(safe-area-inset-bottom)); }
/* De voertuigpagina heeft onderaan een vaste balk met het maandbedrag. Op een telefoon
   loopt die over de hele breedte, dus daar moet de chatknop bovenop. */
@media (max-width:999px){
  body:has(.balk[data-toon]) .wa-houder{ bottom:calc(84px + env(safe-area-inset-bottom)); }
}
.wa-knop{ display:inline-flex; align-items:center; gap:9px; min-height:48px;
  padding:0 18px 0 15px; border:0; border-radius:0; cursor:pointer;
  background:#1800AD; color:#FFFFFF; font-family:inherit; font-size:0.9375rem;
  font-weight:700; box-shadow:0 8px 22px -8px rgba(14,42,99,.55);
  transition:background .16s ease, transform .16s ease; }
.wa-knop:hover{ background:#3416C9; }
.wa-knop:active{ transform:translateY(1px); }
.wa-knop:focus-visible{ outline:2px solid #FFB020; outline-offset:3px; }
/* Op een telefoon alleen het teken. Met het woord erbij is de knop tweehonderd pixels
   breed en dekte hij de gele knop onder in de sectie af. Het WhatsApp-teken herkent
   iedereen, dus het woord kost daar meer dan het oplevert. Op een breed scherm is er ruimte
   zat en blijft het label staan. */
@media (max-width:767px){
  .wa-knop{ width:52px; min-height:52px; padding:0; justify-content:center; }
  .wa-knop span{ display:none; }
}
.wa-houder[data-open] .wa-knop span{ display:none; }
.wa-houder[data-open] .wa-knop{ padding:0; width:48px; justify-content:center; }

.wa-paneel{ width:min(20rem, calc(100vw - 32px)); background:#FFFFFF; border-radius:0;
  overflow:hidden; box-shadow:0 20px 46px -18px rgba(14,42,99,.4),
  0 0 0 1px rgba(14,42,99,.08); }
.wa-paneel[hidden]{ display:none; }
.wa-kop{ display:flex; align-items:center; gap:10px; padding:13px 12px 13px 14px;
  background:#1800AD; color:#FFFFFF; }
.wa-kop b{ display:block; font-size:0.875rem; font-weight:700; line-height:1.25; }
.wa-kop span{ display:block; font-size:0.75rem; color:rgba(255,255,255,.72); }
.wa-dicht{ margin-left:auto; display:grid; place-items:center; width:30px; height:30px;
  border:0; border-radius:0; background:transparent; color:#FFFFFF; cursor:pointer; }
.wa-dicht:hover{ background:rgba(255,255,255,.14); }
.wa-dicht:focus-visible{ outline:2px solid #FFB020; outline-offset:1px; }
.wa-lijf{ padding:12px; }
.wa-over{ margin:0 0 9px; font-size:0.75rem; font-weight:600; color:#1800AD;
  background:#F0EEFC; border-radius:0; padding:6px 9px; }
.wa-snel{ display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.wa-snel button{ text-align:left; font-family:inherit; font-size:0.8125rem; color:#12141A;
  background:#FFFFFF; border:1px solid #E1DAF4; border-radius:0; padding:8px 10px;
  cursor:pointer; transition:border-color .14s ease, background .14s ease; }
.wa-snel button:hover{ background:#F6F5FE; border-color:#1800AD; }
.wa-snel button:focus-visible{ outline:2px solid #1800AD; outline-offset:1px; }
.wa-vak{ width:100%; box-sizing:border-box; font-family:inherit; font-size:0.875rem;
  color:#12141A; border:1px solid #E1DAF4; border-radius:0; padding:9px 10px;
  resize:vertical; }
.wa-vak:focus{ outline:2px solid #1800AD; outline-offset:-1px; border-color:#1800AD; }
.wa-fout{ margin:6px 0 0; font-size:0.75rem; color:#B42318; }
.wa-stuur{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  min-height:44px; margin-top:9px; border:0; border-radius:0; cursor:pointer;
  background:#FFB020; color:#12141A; font-family:inherit; font-size:0.9375rem;
  font-weight:700; transition:background .16s ease; }
.wa-stuur:hover{ background:#FFC24D; }
.wa-stuur:focus-visible{ outline:2px solid #1800AD; outline-offset:2px; }

/* --- snelknoppen in de kop, alleen op een telefoon ---------------------- */
.kop-snel{ display:none; }
@media (max-width:1079px){
  .kop-snel{ display:grid; place-items:center; width:44px; height:44px; flex:none;
    border-radius:0; color:var(--diep); text-decoration:none;
    transition:background .16s ease; }
  .kop-snel:hover{ background:#F1EFFC; }
  .kop-snel:focus-visible{ outline:2px solid var(--diep); outline-offset:2px; }
  /* De drie knoppen horen als groep tegen de rechterrand. Eerst stond hier
     .kop-snel:first-of-type{ margin-left:auto }, en dat pakt niets: :first-of-type kijkt
     naar het eerste element van dat type tussen de broers en zussen, en dat is het logo,
     want dat is ook een <a>. Nu duwt het logo zelf de rest naar rechts. */
  .merk{ margin-right:auto; }
  .kop-menu{ margin-left:0; }
  .kop .wrap{ gap:0.15rem; justify-content:flex-start; }
}

/* --- de kop lager op een telefoon --------------------------------------- */
/* Was 92 pixels hoog: bijna een achtste van het scherm voordat er iets van de pagina te
   zien is. Het logo van 56 en een opvulling van 1,5rem boven en onder telden op. */
@media (max-width:767px){
  .kop .wrap{ padding-block:0.55rem; }
  .kop--klein .wrap{ padding-block:0.4rem; }
  .merk-beeld,.kop--klein .merk-beeld{ height:38px; }
}


/* ======================================================================
   HET MOBIELE MENU
   ====================================================================== */
.menu-waas{ display:none; }
@media (max-width:1079px){
  /* De donkere laag ernaast. Hij dekt ook de kop af, want anders tik je per ongeluk op het
     logo terwijl je het menu wilt sluiten. */
  .menu-waas{ position:fixed; inset:0; z-index:120; background:rgba(14,12,32,.5);
    backdrop-filter:blur(2px); opacity:0; transition:opacity .2s ease; }
  .menu-waas[data-open]{ display:block; opacity:1; }

  /* Het paneel schuift van rechts in. Achtentachtig procent, zodat er links een strook
     zichtbaar blijft: dat laat zien dat de pagina er nog is en nodigt uit om ernaast te
     tikken. */
  .nav-mob[data-open]{
    display:flex; flex-direction:column; gap:0; position:fixed; z-index:130;
    top:0; right:0; bottom:0; left:auto; width:min(88vw,380px); margin:0; padding:0;
    background:#FFFFFF; border-radius:0; overflow:hidden;
    box-shadow:-24px 0 60px -30px rgba(14,12,32,.55);
    animation:menu-in .22s cubic-bezier(.16,1,.3,1);
  }
  @keyframes menu-in{ from{ transform:translateX(16px); opacity:.6; } }
  @media (prefers-reduced-motion:reduce){ .nav-mob[data-open]{ animation:none; } }

  .menu-kop{ display:flex; align-items:center; justify-content:space-between;
    padding:14px 14px 14px 20px; border-bottom:1px solid #EDEBF7; flex:none; }
  .menu-titel{ font-size:0.75rem; font-weight:700; letter-spacing:0.1em;
    text-transform:uppercase; color:#6E6B80; }
  .menu-dicht{ display:grid; place-items:center; width:44px; height:44px; flex:none;
    border:0; border-radius:0; cursor:pointer; color:#FFFFFF;
    background:var(--diep); transition:background .16s ease; }
  .menu-dicht:focus-visible{ outline:2px solid var(--diep); outline-offset:2px; }

  /* De links. Grote rijen met een pijltje, want een rij die aanvoelt als een knop wordt
     ook als knop behandeld. */
  .nav-mob[data-open] .menu-lijst{ flex:1; overflow-y:auto; padding:6px 8px 8px;
    -webkit-overflow-scrolling:touch; }
  .nav-mob[data-open] a{ display:flex; align-items:center; justify-content:space-between;
    gap:12px; min-height:56px; padding:0 12px; border-radius:0;
    font-size:1.0625rem; font-weight:600; color:#12141A; text-decoration:none; }
  .nav-mob[data-open] a svg{ color:#A9A5C6; flex:none; }
  .nav-mob[data-open] a[aria-current]{ background:#F1EFFC; color:var(--diep); }
  .nav-mob[data-open] a[aria-current] svg{ color:var(--diep); }
  .nav-mob[data-open] a + a{ box-shadow:0 -1px 0 #F0EEF8; }

  /* Twee acties onderin, naast elkaar. WhatsApp is de eerste want dat is de weg die we
     willen dat mensen nemen; bellen staat ernaast voor wie liever belt. */
  .menu-voet{ flex:none; display:grid; grid-template-columns:1fr 1fr; gap:10px;
    padding:12px 16px calc(16px + env(safe-area-inset-bottom));
    border-top:1px solid #EDEBF7; background:#FBFAFE; }
  .menu-voet a{ display:flex; align-items:center; justify-content:center; gap:8px;
    min-height:50px; border-radius:0; font-size:0.9375rem; font-weight:700;
    text-decoration:none; }
  .menu-wa{ background:var(--geel); color:#12141A; }
  .menu-bel{ background:#FFFFFF; color:var(--diep); box-shadow:inset 0 0 0 1.5px #DED8F4; }
}
/* Het hele paneel bestaat alleen op een telefoon. */
.nav-mob{ display:none; }
@media (min-width:1080px){ .nav-mob,.menu-waas{ display:none !important; } }

/* Zweefkleuren alleen waar echt een muis is. Op een aanraakscherm blijft :hover hangen na
   het tikken, en dan hield de menuknop een grijze vlek over. */
@media (hover:none){
  .kop-snel:hover{ background:transparent; }
  .kop-menu:hover{ background:transparent; }
  .menu-dicht:hover{ background:var(--diep); }
}


/* --- de drie iconen in de kop op een raster ------------------------------
   Alle drie massief, alle drie 24 bij 24. Het logo is zwaar en dicht; omtrekiconen van
   twee pixels horen bij een licht lettertype en vallen daar naast weg. */
.kop-snel svg{ width:24px; height:24px; display:block; }
.kop-menu-strepen{ width:24px; gap:5.5px; }
.kop-menu-strepen span{ height:2.8px; width:24px; }
.kop-menu-strepen span:nth-child(3){ width:14px; }
.kop-menu[aria-expanded="true"] .kop-menu-strepen span:nth-child(1){
  transform:translateY(8.3px) rotate(45deg); }
.kop-menu[aria-expanded="true"] .kop-menu-strepen span:nth-child(3){ width:24px;
  transform:translateY(-8.3px) rotate(-45deg); }


/* --- de groepen in het mobiele menu -------------------------------------
   Een kopje boven elke groep. Vijf gelijke regels dwingen iemand om alles te lezen voordat
   hij kan kiezen; met een kopje leest hij er een en slaat hij de rest over. */
@media (max-width:1079px){
  .nav-mob[data-open] .menu-groep{
    font-size:0.65rem; font-weight:700; letter-spacing:0.11em; text-transform:uppercase;
    color:#8E8AA6; margin:16px 12px 4px; }
  .nav-mob[data-open] .menu-lijst > .menu-groep:first-child{ margin-top:4px; }
  /* De lijn tussen twee regels hoort niet over een kopje heen te lopen. */
  .nav-mob[data-open] .menu-groep + a{ box-shadow:none; }
}


/* Tikken mag niet zoomen ------------------------------------------------
   Twee keer snel op hetzelfde pijltje tikken leest een telefoon als dubbeltik, en dat is de
   afspraak voor inzoomen. Bij een carrousel tik je juist snel achter elkaar. Met
   touch-action:manipulation blijft alleen tikken en scrollen over; zoomen met twee vingers
   blijft gewoon werken, dus wie slecht ziet kan de pagina nog steeds vergroten. */
a, button, summary, label, input, select, [role="button"], [role="tab"]{
  touch-action: manipulation;
}


/* ======================================================================
   DE AANKONDIGINGSBALK
   ======================================================================
   Boven de 1100 pixels staat alles op een regel, gecentreerd als een blok. Daaronder
   wisselen vier zinnen elkaar af: 3,5 seconde in beeld, in 0,48 seconde naar binnen vanaf
   rechts en naar buiten naar links.

   Waarom gecentreerd en niet tegen de randen: met space-between stonden de twee groepen op
   een breed scherm vierhonderd pixels uit elkaar en moest je oog van hoek naar hoek. Als
   blok in het midden is het één ding om te lezen in plaats van twee.

   Waarom haarlijnen en geen ruitjes: een ruitje zweeft tussen twee woorden, een lijn
   scheidt. En het geel is voorbehouden aan de sterren; met gele vinkjes ernaast was er geen
   verschil meer tussen een belofte en een bewijs. */
.tb-wissel{ display:none; }
@media (min-width:1100px){
  .topbalk .wrap{ display:flex !important; justify-content:center; gap:0; }
  /* Even breed als de kop: het eerste punt begint waar het logo begint en het laatste
     eindigt waar de belknop eindigt. De haarlijnen zijn daarmee overbodig geworden; ze
     waren nodig toen de punten 44 pixels uit elkaar stonden, nu is dat ruim 100 en scheidt
     de ruimte zelf al. */
  /* De drie argumenten staan links bij elkaar, uitgelijnd met het logo. De score wordt
     met een automatische marge helemaal naar rechts geduwd, tot aan de belknop. Zo lees je
     eerst wat we doen en pas daarna het bewijs, en de balk hangt aan dezelfde twee randen
     als de kop eronder. */
  .tb-vast{ display:flex; align-items:center; justify-content:flex-start; gap:0;
    width:100%; margin:0; padding:0; list-style:none; flex-wrap:nowrap; }
  .tb-vast li:last-child{ margin-left:auto; }
  .tb-vast li{ position:relative; display:flex; align-items:center; gap:0.45rem;
    padding:0 1.375rem; white-space:nowrap;
    font-size:0.8125rem; font-weight:500; letter-spacing:-0.002em;
    color:rgba(255,255,255,.88); }
  .tb-vast li:first-child{ padding-left:0; }
  .tb-vast li:last-child{ padding-right:0; }
  /* Een haarlijn tussen de drie argumenten links. Niet voor de score: die staat met een
     automatische marge helemaal rechts, en een lijntje midden in dat gat scheidt niets. */
  .tb-vast li + li:not(:last-child)::before{ content:""; position:absolute; left:0; top:50%;
    width:1px; height:13px; margin-top:-6.5px; background:rgba(255,255,255,.22); }
  .tb-vast svg{ flex:none; color:rgba(255,255,255,.55); }
  /* Op de svg zelf en niet op het omhulsel: .tb-vast svg zet de kleur rechtstreeks op het
     element, en dan komt overerving van de laag erboven er niet meer doorheen. Zonder deze
     regel stonden alle vijf de sterren wit en zag je de score niet meer. */
  .tb-vast .sterren-vol svg{ color:var(--geel); }
  .tb-vast .sterren-leeg svg{ color:rgba(255,255,255,.26); }
  /* alleen de cijfers zijn vet en zuiver wit, de rest een niveau rustiger */
  .tb-vast b{ font-weight:600; color:#FFFFFF; }
  .tb-vast .balk-score,.tb-vast .balk-aanbod{ display:inline-flex !important;
    align-items:center; gap:0.4rem; color:inherit; }
  .tb-vast .balk-score > span:last-child{ display:inline !important;
    color:rgba(255,255,255,.7); }
  .tb-vast .balk-aanbod::before{ content:none !important; }
}
@media (max-width:1099px){
  .topbalk .wrap{ display:none !important; }
  .tb-wissel{ display:block; position:relative; overflow:hidden; height:2.375rem; }
  .tb-venster{ position:absolute; inset:0; margin:0; padding:0 1.25rem; list-style:none; }
  .tb-zin{ position:absolute; inset:0; display:flex; align-items:center;
    justify-content:center; gap:0.45rem; white-space:nowrap;
    font-size:0.8125rem; font-weight:600; letter-spacing:-0.004em; color:#FFFFFF;
    opacity:0; transform:translate3d(26px,0,0); will-change:transform,opacity;
    animation:tb-wissel 16s cubic-bezier(.22,1,.36,1) infinite; }
  .tb-zin:nth-child(2){ animation-delay:4s; }
  .tb-zin:nth-child(3){ animation-delay:8s; }
  .tb-zin:nth-child(4){ animation-delay:12s; }
  .tb-zin svg{ flex:none; color:var(--geel); }
  .tb-zin .balk-score,.tb-zin .balk-aanbod{ display:inline-flex !important;
    align-items:center; gap:0.3rem; }
  .tb-zin .balk-score > span:last-child{ display:inline !important; }
  .tb-zin .balk-score{ gap:0.4rem; }
  .tb-zin .balk-aanbod::before{ content:none !important; }
  .tb-voortgang{ position:absolute; left:0; right:0; bottom:0; height:2px;
    background:rgba(255,255,255,.15); overflow:hidden; }
  .tb-voortgang i{ display:block; height:100%; background:var(--geel);
    transform-origin:left center; transform:scaleX(0);
    animation:tb-vullen 4s linear infinite; }
  .tb-wissel:hover .tb-zin{ animation-play-state:paused; }
}
@keyframes tb-wissel{
  0%   { opacity:0; transform:translate3d(26px,0,0); }
  3%   { opacity:1; transform:translate3d(0,0,0); }
  22%  { opacity:1; transform:translate3d(0,0,0); }
  25%  { opacity:0; transform:translate3d(-26px,0,0); }
  100% { opacity:0; transform:translate3d(-26px,0,0); }
}
@keyframes tb-vullen{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
/* Wie beweging heeft uitgezet krijgt de eerste zin vast in beeld. Zonder deze regel staat de
   balk leeg, want alle zinnen beginnen op onzichtbaar. */
@media (prefers-reduced-motion:reduce){
  .tb-zin{ animation:none !important; }
  .tb-zin:first-child{ opacity:1 !important; transform:none !important; }
  .tb-zin:not(:first-child){ display:none !important; }
  .tb-voortgang{ display:none; }
}


/* Het portret in de kop van het chatpaneel. */
.wa-kop img{ width:34px; height:34px; border-radius:0; object-fit:cover;
  flex:none; }


/* Alle koppen op 700 ------------------------------------------------------
   Dit moet met important. De opmaak hangt aan bijna elke kop een eigen utility-klasse
   (font-bold, font-semibold, en op de h1 zelfs 800), en een klasse wint van een gewone
   elementregel. Eén blokje important is hier minder rommel dan vijftien losse regels die
   elk een andere kop overschrijven. */
h1, h2, h3, h4 { font-weight: 700 !important; }


/* ======================================================================
   DE VOETTEKST
   ======================================================================
   Vier kolommen onder een merkblok, met een haarlijn ertussen en een onderbalk. De links
   wijzen naar schone adressen; wat er stond waren relatieve paden (calculator.html) en
   ankers die niet bestonden (#zoeken, #werkwijze, #waarom). Het adres en het KvK-nummer
   stonden er als plaatshouder in en zijn eruit tot de echte gegevens er zijn. */
footer .wrap { display: block; }
.vt-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 2rem 3rem; flex-wrap: wrap;
  padding-bottom: 2rem; border-bottom: 1px solid rgba(255,255,255,.13);
}
.vt-merk { max-width: 34rem; }
.vt-merk .merk-beeld { height: 46px; width: auto; display: block; }
.vt-merk p {
  margin: 1rem 0 0; font-size: 0.9375rem; line-height: 1.6;
  color: rgba(255,255,255,.68); max-width: 42ch; text-wrap: pretty;
}
.vt-knoppen { display: flex; gap: 0.6rem; flex: none; flex-wrap: wrap; }
.vt-knop {
  display: inline-flex; align-items: center; gap: 0.55rem; min-height: 46px;
  padding: 0 1.1rem; border-radius:0; text-decoration: none;
  font-size: 0.9375rem; font-weight: 600; color: #FFFFFF;
  border: 1px solid rgba(255,255,255,.28);
  transition: background-color .16s ease, border-color .16s ease;
}
.vt-knop--vol { background: #FFFFFF; color: #12141A; border-color: #FFFFFF; }
@media (hover: hover) {
  .vt-knop:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.5); }
  .vt-knop--vol:hover { background: #EDEAFB; border-color: #EDEAFB; }
}
.vt-knop:focus-visible { outline: 2px solid #FFB020; outline-offset: 2px; }

.vt-kolommen {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem 2.5rem; padding: 2rem 0;
}
@media (min-width: 720px)  { .vt-kolommen { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* h2 en h3 allebei: pagina_voet zet de koppen van de voettekst om naar h2, zodat een
   lijstpagina zonder h2 er toch een heeft. Op een regel die alleen h3 noemt greep dat mis
   en vielen de kopjes terug op de gewone h2-maat van de site, drie keer zo groot. */
.vt-kolom h2, .vt-kolom h3 {
  margin: 0 0 0.85rem; font-size: 0.6875rem; font-weight: 700 !important;
  letter-spacing: 0.12em; line-height: 1.3;
  text-transform: uppercase; color: rgba(255,255,255,.5);
}
.vt-kolom a { overflow-wrap: anywhere; }
.vt-kolom ul { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.55rem; }
.vt-kolom a {
  color: rgba(255,255,255,.86); text-decoration: none; font-size: 0.9375rem;
  transition: color .14s ease;
}
@media (hover: hover) { .vt-kolom a:hover { color: #FFFFFF; text-decoration: underline; } }
.vt-kolom a:focus-visible { outline: 2px solid #FFB020; outline-offset: 2px; border-radius:0; }

.vt-onder {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.6rem 1.5rem; flex-wrap: wrap;
  padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.13);
  font-size: 0.8125rem; color: rgba(255,255,255,.5);
}
.vt-juridisch { display: flex; gap: 1.25rem; }
.vt-onder a { color: rgba(255,255,255,.7); text-decoration: none; }
@media (hover: hover) { .vt-onder a:hover { color: #FFFFFF; text-decoration: underline; } }
footer .fotobron {
  margin: 1.25rem 0 0; font-size: 0.75rem; line-height: 1.5; color: rgba(255,255,255,.38);
}
footer .fotobron a { color: rgba(255,255,255,.55); }


/* --- de werkwijzepagina --------------------------------------------------- */
.tekstpagina .lood {
  font-size: 1.125rem; line-height: 1.6; color: #3C3950; max-width: 44rem;
}
.tekstpagina .lijst-vink { list-style: none; margin: 0 0 1.5rem; padding: 0;
  display: flex; flex-direction: column; gap: 0.6rem; }
.tekstpagina .lijst-vink li { position: relative; padding-left: 1.75rem; line-height: 1.55; }
.tekstpagina .lijst-vink li::before {
  content: ""; position: absolute; left: 0; top: 0.45em;
  width: 9px; height: 5px; border-left: 2.2px solid #1800AD; border-bottom: 2.2px solid #1800AD;
  transform: rotate(-45deg);
}
.tekstpagina .knop-inline {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 1.35rem;
  border-radius:0; background: #FFB020; color: #12141A; font-weight: 700;
  text-decoration: none; transition: background-color .16s ease;
}
@media (hover: hover) { .tekstpagina .knop-inline:hover { background: #FFC24D; } }
.tekstpagina .knop-inline:focus-visible { outline: 2px solid #1800AD; outline-offset: 2px; }


/* Adres en KvK onder de contactkolom. Ze stonden er als plaatshouder ("Straatnaam 1",
   "KvK 00000000") en zijn nu de echte gegevens. */
.vt-adres {
  margin: 1rem 0 0; font-size: 0.875rem; line-height: 1.6;
  color: rgba(255,255,255,.6);
}


/* Tabellen op een telefoon ------------------------------------------------
   De werkwijzepagina liep 230 pixels buiten beeld doordat de vergelijkingstabel twee kolommen
   met lange zinnen naast elkaar zette. Onder de 640 vallen de cellen onder elkaar: de kop
   erboven, de tekst eronder. */
@media (max-width: 639px) {
  .tekstpagina .spec,
  .tekstpagina .spec tbody,
  .tekstpagina .spec tr,
  .tekstpagina .spec th,
  .tekstpagina .spec td { display: block; width: 100%; }
  .tekstpagina .spec th { padding: 0 0 2px; border: 0; }
  .tekstpagina .spec td { padding: 0 0 0.9rem; border: 0; }
  .tekstpagina .spec tr + tr { border-top: 1px solid #E5E4EC; padding-top: 0.9rem; }
}
.tekstpagina table { max-width: 100%; }


/* De vergelijking op de werkwijzepagina ------------------------------------
   Stond eerst als table met class spec, en spec is display:grid en bedoeld voor een dl.
   Een tabel daarin rekende zich 600 pixels breed en de pagina kreeg een schuifbalk. Nu een
   dl met een eigen raster: onder elkaar op een telefoon, twee kolommen vanaf 640. */
.wv-verg { display: grid; gap: 0; margin: 0 0 1.75rem; }
.wv-verg > div {
  display: grid; gap: 0.2rem; padding: 0.85rem 0;
  border-top: 1px solid #E5E4EC;
}
.wv-verg > div:last-child { border-bottom: 1px solid #E5E4EC; }
.wv-verg dt { font-weight: 600; color: #12141A; font-size: 0.9375rem; }
.wv-verg dd { margin: 0; color: #4D4A5C; line-height: 1.55; }
@media (min-width: 640px) {
  .wv-verg > div { grid-template-columns: 11rem minmax(0, 1fr); gap: 1.5rem; align-items: start; }
}


/* ======================================================================
   AANSLUITING OP DE HOMEPAGE
   ======================================================================
   Oker is op de homepage de kleur van doen (zoekknop, rekenknop) en blauw is de kleur van
   vlakken. De aanvraagknop op de voertuigpagina was blauw en verdween daardoor tussen de
   rest; hij is de belangrijkste knop van de site. */
.rek-knop {
  background: #FFB020 !important; color: #12141A !important; font-weight: 700;
  border-radius:0;
}
@media (hover: hover) { .rek-knop:hover { background: #FFC24D !important; } }
.rek-knop:focus-visible { outline: 2px solid #1800AD; outline-offset: 2px; }

/* De vorm van de kaart staat nu onderaan dit bestand, bij "GELIJK AAN MOCKUP 1". Hier stond
   eerder een blok met !important dat de rand op #C3BFE2 en de hoek op 14 pixels zette, om ze
   gelijk te maken aan de modelkaarten op de homepage. Dat won van alles wat er later kwam en
   hield de aanbodpagina op de oude vorm vast. Alleen de regel voor mensen die beweging
   uitzetten blijft staan. */
@media (prefers-reduced-motion: reduce) { .kaart { transition: none; } }

/* --- btw of marge, als label -----------------------------------------------
   Stond als zin in een grijs kadertje halverwege de rekenmodule. Het is een van de eerste
   dingen die een ondernemer wil weten: bij een btw-auto vraag je de btw terug, bij een
   marge-auto niet. Nu een label bij de prijs, en ook op de kaart in het aanbod zodat je het
   ziet voordat je doorklikt. */
.btw-label {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 3px 9px; border-radius:0;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.005em; white-space: nowrap;
}
.btw-label--btw   { background: #FFF1D6; color: #6B4A00; }
.btw-label--marge { background: #ECEAF7; color: #423E60; }
.btw-label--vraag { background: #F1F0F6; color: #6E6B80; }
.rek-aanschaf .btw { display: block; margin-top: 8px; }
.rek-aanschaf .btw span { display: block; margin-top: 6px; font-size: 0.8125rem;
  color: #6E6B80; line-height: 1.45; }
.kaart-label { position: absolute; left: 10px; top: 10px; z-index: 2; }
.kaart-beeld { position: relative; }


/* De kop van de voertuigpagina op een telefoon ----------------------------
   De twee beloftes liepen allebei over twee regels en duwden de foto naar 660 pixels diep,
   dus onder de vouw. Op een autopagina hoort de auto het eerste te zijn wat je ziet. De
   zinnen zijn ingekort tot een regel en de uitvoering staat nu als ondertitel onder de kop,
   waar hij hoort: het is de aanduiding van deze specifieke auto. */
.vt-kop { padding: 8px 0 12px; }
.vt-punten { gap: 5px; margin-top: 8px; }
.vt-punten li { font-size: 0.9375rem; }
@media (max-width: 639px) {
  .vt-kop h1 { font-size: 1.5rem; }
  .vt-type { font-size: 0.9375rem; margin-top: 2px; }
}


/* ======================================================================
   DE AANBODPAGINA
   ======================================================================
   Het maandbedrag is waar iemand op vergelijkt, dus dat is het grootste getal op de kaart
   geworden. De vraagprijs stond er even zwaar naast en concurreerde daarmee; die staat nu
   als stille regel eronder. */
.kaart-voet {
  display: block; padding: 12px 14px 14px;
}
.kaart-pm b {
  font-size: 1.5rem; font-weight: 700; color: #1800AD; line-height: 1.1;
  letter-spacing: -0.022em;
}
.kaart-pm span {
  font-size: 0.8125rem; color: #6E6B80; display: inline; margin-left: 0.3rem;
}
.kaart-pm { display: block; }
.kaart-prijs {
  display: block; text-align: left; margin-top: 2px;
}
.kaart-prijs b {
  display: inline; font-size: 0.875rem; font-weight: 500; color: #6E6B80;
}
.kaart-prijs span { font-size: 0.875rem; color: #9C9AAF; margin-left: 0.25rem; }

/* De balk met het aantal en de sortering blijft staan. Met veertienduizend auto's scrol je
   diep, en dan staat de sorteerkeuze duizend pixels hoger. */
.rk-bar {
  /* Onder de kop en niet erachter: de kop plakt zelf ook en is 67 pixels hoog op een
     telefoon en 87 op een breed scherm. Zonder deze afstand schuift de balk eronder door en
     lees je het aantal resultaten dwars door het menu heen. */
  position: sticky; top: 68px; z-index: 20;
  background: #FFFFFF; padding-top: 12px; margin-top: -12px;
  border-bottom: 1px solid transparent; transition: border-color .16s ease;
}
.rk-bar[data-vast] { border-bottom-color: #E5E4EC; }

.rooster { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
@media (max-width: 639px) {
  .kaart-body { padding: 11px 12px 10px; }
  .kaart-voet { padding: 10px 12px 12px; }
  .kaart-naam { font-size: 0.9375rem; min-height: 0; -webkit-line-clamp: 1; }
  .kaart-pm b { font-size: 1.375rem; }
  .rooster { gap: 14px; }
}


/* --- bladeren -------------------------------------------------------------
   Vorige, de nummers, volgende. Het huidige nummer is gevuld. Bij meer dan zeven pagina's
   vallen er nummers weg met een beletselteken, zodat de rij nooit breder wordt dan de
   kolom. */
.blader {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 6px; margin-top: 28px;
}
.blader button, .blader span {
  min-width: 42px; min-height: 42px; padding: 0 0.6rem;
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-size: 0.9375rem; font-variant-numeric: tabular-nums;
  color: #12141A; background: #FFFFFF; border: 1px solid #E2E1EA; border-radius:0;
  cursor: pointer; transition: border-color .14s ease, background-color .14s ease;
}
.blader span { border-color: transparent; background: transparent; color: #9C9AAF;
  cursor: default; min-width: 26px; padding: 0; }
.blader button[aria-current="page"] {
  background: #1800AD; border-color: #1800AD; color: #FFFFFF; font-weight: 700;
}
.blader button:disabled { opacity: .4; cursor: not-allowed; }
@media (hover: hover) {
  .blader button:not(:disabled):not([aria-current="page"]):hover {
    border-color: #1800AD; background: #F7F6FE;
  }
}
.blader button:focus-visible { outline: 2px solid #1800AD; outline-offset: 2px; }
.blader-uit { width: 100%; text-align: center; font-size: 0.875rem; color: #6E6B80;
  margin-top: 4px; }

@media (min-width: 1100px) { .rk-bar { top: 88px; } }


/* --- de rekenkaart: antwoord eerst ---------------------------------------
   Het maandbedrag stond onderaan, na drie instellingen. Die instellingen zijn pas
   interessant als je het bedrag kent en het wil bijstellen, dus staat het bedrag nu bovenaan
   met de knop eronder, en heten de schuiven daarna "pas aan". */
.rek-pas {
  margin: 20px 0 12px; padding-top: 16px; border-top: 1px solid #E5E4EC;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: #8D8AA3;
}
.rek-uitkomst { margin-bottom: 12px; }
.rek-knop { margin-bottom: 10px; }


/* ======================================================================
   DE AANBODPAGINA, TWEEDE OPZET
   ======================================================================
   Snelkeuzes onder de kop. Veertienduizend auto's en zes dichtgeklapte accordeons is geen
   ingang; een rij met "tot 300 per maand" en "elektrisch" wel. Het zijn echte links, dus
   deelbaar en werkend zonder javascript. */
.ab-snel {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px;
}
.ab-snel a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 0.95rem;
  border-radius:0; background: #FFFFFF; border: 1px solid #D9D5EE;
  font-size: 0.875rem; font-weight: 600; color: #1800AD; text-decoration: none;
  white-space: nowrap; transition: border-color .14s ease, background-color .14s ease;
}
@media (hover: hover) { .ab-snel a:hover { background: #F4F2FE; border-color: #1800AD; } }
.ab-snel a:focus-visible { outline: 2px solid #1800AD; outline-offset: 2px; }
.ab-snel a[aria-current="true"] { background: #1800AD; border-color: #1800AD; color: #FFFFFF; }

/* De kaart: geld eerst, dan de naam, dan de feiten als losse plaatjes.
   Op een verkoopsite staat de naam bovenaan; hier vergelijkt iemand maandbedragen, dus dat
   is het eerste dat onder de foto hoort te staan. */
.kaart-body { display: block; padding: 12px 14px 6px; }
.kaart-prijsrij {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-bottom: 6px;
}
.kaart-body .kaart-pm { white-space: nowrap; }
/* Het bedrag stond als block, dus viel p/m op de regel eronder. */
.kaart-body .kaart-pm b { display: inline; }
.kaart-body .kaart-pm b {
  font-size: 1.5rem; font-weight: 700; color: #1800AD; line-height: 1.05;
  letter-spacing: -0.022em;
}
.kaart-body .kaart-pm span { font-size: 0.8125rem; color: #6E6B80; margin-left: 0.25rem; }
.kaart-body .kaart-vraag {
  font-size: 0.8125rem; color: #8D8AA3; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.kaart-naam {
  font-size: 0.9375rem; font-weight: 600; color: #12141A; letter-spacing: -0.012em;
  line-height: 1.3; min-height: 0; -webkit-line-clamp: 1; display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kaart-type { font-size: 0.8125rem; color: #6E6B80; line-height: 1.4; }
.kaart-chips {
  display: flex; flex-wrap: wrap; gap: 5px; margin: 9px 0 0; padding: 0; list-style: none;
}
.kaart-chips li {
  font-size: 0.75rem; color: #4D4A5C; background: #F4F3FA; border-radius:0;
  padding: 3px 7px; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.kaart-voet { display: none; }

@media (min-width: 1500px) { .rooster { grid-template-columns: repeat(4, minmax(0, 1fr)); } }


/* --- de voertuigpagina: het paneel loopt mee -------------------------------
   Op een breed scherm is de fotokolom hoger dan het paneel ernaast, dus scrolde het
   maandbedrag en de aanvraagknop uit beeld terwijl je door de foto's ging. Nu blijft het
   paneel staan zolang er kolom onder is. De onderbalk op een telefoon doet hetzelfde werk
   en die was er al. */
@media (min-width: 900px) {
  .vt-geld { position: sticky; top: 100px; align-self: start; }
}


/* --- het huisje in het kruimelpad ---------------------------------------- */
.kruimel a svg { display: block; }
.kruimel li:first-child a {
  display: inline-flex; align-items: center; color: #6E6B80;
  padding: 2px; margin: -2px; border-radius:0;
}
.kruimel li:first-child a:hover { color: #1800AD; }
.kruimel li:first-child a:focus-visible { outline: 2px solid #1800AD; outline-offset: 1px; }

/* Op de aanbodpagina hoort het kruimelpad bij de lila kop eronder, niet op een eigen witte
   strook erboven. Zo is het één blok in plaats van twee. */
.ab-kruimel { background: #EFEEFB; }
.ab-kruimel .kruimel { padding-top: 16px; }
.ab .ab-kop { padding-top: 10px; }


/* --- de kop van de aanbodpagina, compacter -------------------------------
   Er stond een kruimelpad, een kop van 32 pixels, een teller aan de overkant en een rij
   knoppen van 40 pixels, alles onder elkaar. Samen bijna tweehonderd pixels voordat de eerste
   auto in beeld komt. Op een laptop is dat een vijfde van het scherm aan kop, en daar staat
   niets in wat iemand nodig heeft om te kiezen. Alles een maat kleiner en dichter op elkaar.

   Op een telefoon vielen de acht snelkeuzes over drie regels. Nu is het een strook die je
   opzij schuift: even goed bereikbaar, maar de kop blijft laag. */
.ab-kruimel .kruimel { padding: 10px 0 0; }
.ab { padding: 8px 0 12px; }
.ab .ab-kop { padding-top: 0; row-gap: 9px; column-gap: 18px; }
.ab-kop h1 { font-size: clamp(1.25rem, 1.9vw, 1.625rem); line-height: 1.15; }
.ab-tel { font-size: 0.875rem; }
.ab-kop .ab-snel { flex: 1 0 100%; margin-top: 0; }
.ab-snel { gap: 6px; }
.ab-snel a { min-height: 32px; padding: 0 0.72rem; font-size: 0.8125rem; }

@media (max-width: 719px) {
  .ab-snel {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin-inline: -1.25rem; padding-inline: 1.25rem;
    scroll-snap-type: x proximity; overscroll-behavior-x: contain;
  }
  .ab-snel::-webkit-scrollbar { display: none; }
  .ab-snel a { scroll-snap-align: start; }
  .ab-kop { align-items: baseline; }
  .ab-kop h1 { font-size: 1.1875rem; }
  .ab-tel { font-size: 0.8125rem; }
}


/* --- de regel naast de kop ------------------------------------------------
   Was "18.117 deals gevonden". Dat is geen deal maar een auto, en het getal alleen zegt niet
   of er iets voor jou bij zit. Nu staat het laagste maandbedrag van de lijst die je op dat
   moment ziet erbij, en dat loopt mee met je filters. Geen witte pil eromheen: die zou
   lijken op de snelkeuzeknoppen eronder en dan verwacht je dat je erop kunt drukken. */
.ab-tel {
  display: inline-flex; align-items: baseline; gap: 10px; margin: 0;
  font-size: 0.8125rem; color: #6E6B80; font-variant-numeric: tabular-nums;
}
.ab-tel b { font-size: 0.9375rem; font-weight: 700; color: #1800AD; }
.ab-tel-va { display: inline-flex; align-items: baseline; gap: 0.3rem; padding-left: 10px;
  border-left: 1px solid #D9D5EE; }
@media (max-width: 419px) { .ab-tel { font-size: 0.75rem; gap: 7px; }
  .ab-tel-va { padding-left: 7px; } }


/* --- de teller op de regel van de snelkeuzes ------------------------------
   Stond rechts naast de kop, op de onderlijn van een letter van 26 pixels, en hing daardoor
   laag in een verder lege hoek. Hij hoort bij de knoppen eronder: dat getal verspringt zodra
   je er een aanraakt. Dus staat hij nu op die regel, rechts, op dezelfde hoogte als de
   knoppen. De kop krijgt zijn eigen regel terug.

   Nowrap erbij, want in een smal venster brak "18.136 auto's vanaf EUR 97 p/m" in vier
   stukken onder elkaar. */
.ab-tel, .ab-tel span { white-space: nowrap; }
@media (min-width: 720px) {
  .ab-kop { align-items: center; }
  .ab-kop h1 { flex: 1 0 100%; }
  .ab-kop .ab-snel { flex: 1 1 auto; }
  .ab-tel { order: 3; flex: 0 0 auto; margin-left: auto; padding-left: 18px; }
}


/* ======================================================================
   OPZET 1: HET GELD ONDERAAN, ICONEN OP DE TELEFOON, EEN BALK DIE MEELOOPT
   ====================================================================== */

/* --- het geld onderaan ----------------------------------------------------
   Stond bovenaan, direct onder de foto. Je las dan een bedrag voordat je wist van welke auto,
   en dat is de omgekeerde volgorde van hoe iemand kijkt: eerst wat is het, dan wat kost het.
   Het staat nu in een eigen vak onderaan, met een lijn erboven en de looptijd erbij. */
.kaart{ position:relative; }
.kaart-body{ flex:1; padding:11px 13px 8px; }
.kaart-geld{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:0 8px;
  margin-top:auto; padding:10px 13px 12px; border-top:1px solid #EFEEF6;
}
.kaart-geld .kaart-pm{ display:inline-flex; align-items:baseline; gap:4px; }
.kaart-body .kaart-pm b, .kaart-geld .kaart-pm b{
  font-size:1.4375rem; font-weight:700; color:#1800AD; line-height:1.05;
  letter-spacing:-0.024em; display:inline;
}
.kaart-geld .kaart-pm span{ font-size:0.8125rem; color:#6E6B80; margin-left:0; }
.kaart-geld .kaart-vraag{
  margin-left:auto; font-size:0.8125rem; color:#8D8AA3; white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.kaart-basis{ flex:1 0 100%; margin-top:2px; font-size:0.6875rem; color:#9B98AC; }

/* --- de feiten met een teken ervoor ---------------------------------------
   Op een telefoon is "2024 · 34.144 km · Benzine · Automaat" een muur van vier woorden op
   350 pixels. Met een teken ervoor lees je het als vier feiten. Het teken staat in het blauw
   van de site zodat het bij de kaart hoort en niet als grijze ruis wegvalt. */
.kaart-chips li{ display:inline-flex; align-items:center; gap:5px; }
.kaart-chips svg{ width:13px; height:13px; flex:none; fill:none; stroke:#1800AD;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; opacity:.85; }

/* --- het btw- en margelabel -----------------------------------------------
   Was een gevuld bolletje in geel of lila met een woord erin. Dat vecht met de foto en met
   de gele knoppen elders op de pagina. Nu klein, in hoofdletters met spatiëring, doorzichtig
   met een vervaagde achtergrond, zoals een label op een foto hoort te liggen. */
.btw-label{
  padding:4px 8px; border-radius:0;
  font-size:0.625rem; font-weight:700; letter-spacing:0.09em; text-transform:uppercase;
  backdrop-filter:blur(10px) saturate(140%); -webkit-backdrop-filter:blur(10px) saturate(140%);
  box-shadow:0 1px 3px rgba(18,20,26,.14);
}
.btw-label--btw{ background:rgba(18,20,26,.82); color:#FFFFFF;
  box-shadow:0 1px 3px rgba(18,20,26,.24); }
.btw-label--marge{ background:rgba(255,255,255,.86); color:#3B3752;
  box-shadow:inset 0 0 0 1px rgba(18,20,26,.07), 0 1px 3px rgba(18,20,26,.12); }
.kaart-label{ left:9px; top:9px; }

/* --- raster of lijst -------------------------------------------------------
   In een lijstregel past meer per auto, in een raster zie je er meer tegelijk. Op een
   telefoon is het verschil er niet, dus staat de knop daar niet. */
.rk-weergave{ display:none; gap:2px; padding:2px; border:1px solid #D9D5EE; border-radius:0;
  background:#FFFFFF; }
@media (min-width:720px){ .rk-weergave{ display:inline-flex; } }
.rk-weergave button{ display:grid; place-items:center; width:34px; height:30px; border:0;
  border-radius:0; background:none; cursor:pointer; }
.rk-weergave svg{ width:14px; height:14px; fill:#6E6B80; }
.rk-weergave .aan{ background:#EFEEFB; }
.rk-weergave .aan svg{ fill:#1800AD; }
.rk-rechts{ display:flex; align-items:center; gap:10px; }

@media (min-width:720px){
  .rooster--lijst{ grid-template-columns:minmax(0,1fr) !important; gap:12px; }
  .rooster--lijst .kaart{ display:grid; grid-template-columns:232px minmax(0,1fr) 216px;
    align-items:stretch; }
  .rooster--lijst .kaart-beeld{ aspect-ratio:4/3; height:100%; }
  .rooster--lijst .kaart-beeld img{ height:100%; }
  .rooster--lijst .kaart-body{ padding:14px 16px; }
  .rooster--lijst .kaart-naam{ font-size:1.0625rem; }
  .rooster--lijst .kaart-geld{ flex-direction:column; align-items:flex-start; gap:0;
    justify-content:center; border-top:0; border-left:1px solid #EFEEF6; padding:14px 16px; }
  .rooster--lijst .kaart-geld .kaart-vraag{ margin-left:0; }
  .rooster--lijst .kaart-geld .kaart-pm b{ font-size:1.625rem; }
}

/* --- de telefoon -----------------------------------------------------------
   De acht snelkeuzes zijn hier weg: twee regels knoppen die hetzelfde doen als de filterknop
   eronder. Die filterknop staat nu samen met de sortering in een balk die meeloopt, want bij
   achttienduizend auto's scrol je diep en dan staat de knop duizend pixels hoger. */
@media (max-width:719px){
  .ab-snel{ display:none; }
  .ab{ padding-bottom:10px; }

  .fk-open{ margin:0; flex:1; }
  .rk-bar{
    position:sticky; top:64px; z-index:22; display:grid;
    grid-template-columns:1fr 1fr; align-items:center; gap:8px;
    padding:8px 0 10px; margin:0 -1.25rem 12px; padding-inline:1.25rem;
    background:rgba(255,255,255,.94);
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid transparent;
  }
  .rk-bar[data-vast]{ border-bottom-color:#E5E4EC; }
  .rk-tel{ display:none; }
  .rk-sorteer{ margin:0; }
  .rk-sorteer .fs{ width:100%; }
  .rk-sorteer select{ width:100%; min-height:44px; }
  /* "Sorteer op" viel op 350 pixels over twee regels naast een keuzelijst van tien tekens.
     Het woord staat er voor een schermlezer nog, alleen niet meer in beeld. */
  .rk-sorteer{ font-size:0; }
  .rk-sorteer .fs{ font-size:0.875rem; }
  .fk-open{ min-height:44px; }
}


/* --- de filterkolom blijft staan -----------------------------------------
   Hij stond al op sticky, maar dat kon niets doen: de omhullende kolom is precies zo hoog als
   het formulier zelf, en binnen een bak van je eigen hoogte kun je niet meeschuiven. Nu plakt
   die omhullende kolom, en scrolt het formulier zelf als het langer is dan het scherm. Anders
   kun je bij een lange filterlijst de onderste groepen niet bereiken. */
@media (min-width:1000px){
  /* Het omhulsel moet de hele hoogte van de rij pakken, anders heeft het plakken geen ruimte
     om in te bewegen: een bak die precies zo hoog is als zijn inhoud kan nergens heen. De
     rij zelf staat op align-items:start, dus dat moet hier expliciet terug. */
  .ab-lijf > div:first-child{ align-self:stretch; }
  .fk{
    position:sticky; top:96px; max-height:calc(100vh - 124px); overflow-y:auto;
    overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#D9D5EE transparent;
  }
  .fk::-webkit-scrollbar{ width:8px; }
  .fk::-webkit-scrollbar-thumb{ background:#D9D5EE; border-radius:0;
    border:2px solid #FFFFFF; }
  .fk::-webkit-scrollbar-track{ background:transparent; }
}


/* ======================================================================
   GELIJK AAN MOCKUP 1
   De waarden komen letterlijk uit /mockups/aanbod/, opzet 1. Dit blok staat achteraan zodat
   het de oudere opmaak hierboven overschrijft; daarom staat elke eigenschap er voluit.
   ====================================================================== */

/* --- de indeling ---------------------------------------------------------- */
@media (min-width:1000px){
  .ab-lijf{ grid-template-columns:250px minmax(0,1fr); gap:24px; }
}

/* --- het raster en de kaart ------------------------------------------------ */
.rooster{ gap:16px; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); }
@media (max-width:519px){ .rooster{ grid-template-columns:1fr 1fr; gap:12px; } }
@media (max-width:399px){ .rooster{ grid-template-columns:1fr; } }

.kaart{
  display:flex; flex-direction:column; background:#FFFFFF;
  border:1px solid #E5E4EC; border-radius:0; overflow:hidden; box-shadow:none;
  transition:border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
@media (hover:hover){
  .kaart:hover{
    border-color:#D9D5EE; box-shadow:0 10px 26px -18px rgba(18,20,26,.28);
    transform:translateY(-1px);
  }
  .kaart:hover .kaart-beeld{ transform:none; box-shadow:none; }
  .kaart:hover .kaart-naam{ color:#12141A; }
}
.kaart-beeld{
  position:relative; aspect-ratio:4/3; background:#F2F2F7;
  border-radius:0; overflow:hidden; transform:none; box-shadow:none;
}
.kaart-beeld img{ width:100%; height:100%; object-fit:cover; }

.kaart-body{ display:block; padding:11px 13px 0; }
.kaart-naam{
  display:block; font-size:0.9375rem; font-weight:600; color:#12141A;
  letter-spacing:-0.012em; line-height:1.3; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; min-height:0;
}
.kaart-type{
  display:block; font-size:0.8125rem; color:#6E6B80; line-height:1.4;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.kaart-chips{
  display:flex; flex-wrap:wrap; gap:5px; margin:9px 0 0; padding:0; list-style:none;
}
.kaart-chips li{
  display:inline-flex; align-items:center; gap:5px;
  font-size:0.75rem; color:#4D4A5C; background:#F4F3FA; border-radius:0;
  padding:3px 7px; white-space:nowrap; font-variant-numeric:tabular-nums;
}
/* De tekens staan er alleen op een telefoon. Op een breed scherm is er ruimte voor de woorden
   en is de kaart precies de mockup. */
.kaart-chips svg{ display:none; width:13px; height:13px; flex:none; fill:none;
  stroke:#1800AD; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
@media (max-width:719px){ .kaart-chips svg{ display:block; } }

/* Het geld onderaan. In de mockup stond het boven de naam; Ayham wilde het eronder. De maten
   zijn verder gelijk: bedrag 1,375rem in het blauw, vraagprijs klein aan de overkant. */
.kaart-geld{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:0 8px;
  margin-top:auto; padding:11px 13px 13px; border:0;
}
.kaart-geld .kaart-pm{ display:inline-flex; align-items:baseline; gap:4px; }
.kaart-geld .kaart-pm b{
  display:inline; font-size:1.375rem; font-weight:700; color:#1800AD;
  line-height:1.05; letter-spacing:-0.022em;
}
.kaart-geld .kaart-pm span{ font-size:0.8125rem; color:#6E6B80; margin:0; }
.kaart-geld .kaart-vraag{
  margin-left:auto; font-size:0.8125rem; color:#8D8AA3; white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.kaart-basis{ flex:1 0 100%; margin-top:1px; font-size:0.6875rem; color:#8D8AA3; }

/* --- de lijstweergave ------------------------------------------------------ */
@media (min-width:720px){
  .rooster--lijst{ grid-template-columns:minmax(0,1fr) !important; gap:12px; }
  .rooster--lijst .kaart{
    display:grid; grid-template-columns:236px minmax(0,1fr) 210px; align-items:stretch;
    padding:0; border-bottom:1px solid #E5E4EC;
  }
  .rooster--lijst .kaart-beeld{ height:100%; }
  .rooster--lijst .kaart-body{ padding:14px 16px; }
  .rooster--lijst .kaart-naam{ font-size:1.0625rem; }
  .rooster--lijst .kaart-geld{
    flex-direction:column; align-items:flex-start; gap:0; justify-content:center;
    padding:14px 16px; border-left:1px solid #EFEEF6;
  }
  .rooster--lijst .kaart-geld .kaart-vraag{ margin-left:0; }
  .rooster--lijst .kaart-geld .kaart-pm b{ font-size:1.5rem; }
}

/* --- de filterkolom -------------------------------------------------------- */
@media (min-width:1000px){
  .fk{
    background:none; border:0; border-radius:0; padding:0 12px 0 0;
    max-height:calc(100vh - 124px);
  }
  .fg{ border-bottom:1px solid #E5E4EC; }
  .fg:last-child{ border-bottom:0; }
  /* Open groepen krijgen een kleine kop in kapitalen, dichte groepen blijven een gewone regel
     met een teken erachter. Dat is precies het verschil tussen .mk-groep en .mk-dicht. */
  .fg[open]>summary{
    min-height:40px; font-size:0.8125rem; font-weight:700; letter-spacing:0.06em;
    text-transform:uppercase; color:#6E6B80;
  }
  .fg:not([open])>summary{
    min-height:44px; font-size:0.9375rem; font-weight:500; letter-spacing:0;
    text-transform:none; color:#12141A;
  }
  .fg-tel{ letter-spacing:0; text-transform:none; font-weight:400; }
  .fg-lijf{ padding-bottom:18px; }
}
.fg-lijst label{ min-height:30px; gap:8px; font-size:0.875rem; }
.fg-lijst input{ width:15px; height:15px; accent-color:#1800AD; }
.fg-lijst b{ font-size:0.75rem; color:#6E6B80; }

/* --- de balk boven de resultaten ------------------------------------------- */
@media (min-width:720px){
  .rk-bar{
    padding-bottom:14px; margin-bottom:16px; border-bottom:1px solid #E5E4EC;
  }
  .rk-bar[data-vast]{ border-bottom-color:#E5E4EC; }
  .rk-tel{ font-size:0.875rem; color:#6E6B80; }
  .rk-tel b{ font-size:0.9375rem; font-weight:700; color:#1800AD; }
  .rk-sorteer{ font-size:0.8125rem; color:#6E6B80; }
  .rk-sorteer select{
    min-height:36px; border-color:#D9D5EE; border-radius:0;
    font-size:0.8125rem; font-weight:600; color:#12141A;
  }
}
.rk-weergave{ border-color:#D9D5EE; border-radius:0; }
.rk-weergave button{ width:34px; height:30px; border-radius:0; }
.rk-weergave .aan{ background:#EFEEFB; }

/* --- de snelkeuzes --------------------------------------------------------- */
.ab-snel a{
  min-height:32px; padding:0 0.72rem; border-radius:0; background:#FFFFFF;
  border:1px solid #D9D5EE; font-size:0.8125rem; font-weight:600; color:#1800AD;
}


/* ======================================================================
   EXACT MOCKUP 1
   Alles wat er na de keuze bij is gekomen staat hier weer uit. Dit blok staat achteraan en
   overschrijft dus de blokken hierboven.
   ====================================================================== */

/* Het geld staat weer bovenin de kaart, direct onder de foto, zoals in .mk-lijf. */
.kaart-body{ display:block; padding:11px 13px 13px; }
.kaart-geld{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:0 5px;
  margin:0; padding:0; border:0;
}
.kaart-geld .kaart-pm{ display:inline-flex; align-items:baseline; gap:5px; }
.kaart-geld .kaart-pm b{
  display:inline; font-size:1.375rem; font-weight:700; color:#1800AD;
  line-height:1.05; letter-spacing:-0.022em;
}
.kaart-geld .kaart-pm span{ font-size:0.8125rem; color:#6E6B80; margin:0; }
.kaart-geld .kaart-vraag{
  margin-left:auto; font-size:0.8125rem; color:#8D8AA3; white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.kaart-basis{ display:block; margin-top:1px; font-size:0.6875rem; color:#8D8AA3; }
.kaart-naam{ display:block; margin-top:7px; }
.kaart-chips{ margin-top:9px; }

/* Geen tekens bij de feiten: mockup 1 heeft ze niet. */
.kaart-chips svg{ display:none !important; }
.kaart-chips li{ gap:0; }

/* Het label zoals in de mockup: gevuld, zonder kapitalen. */
.btw-label{
  padding:3px 8px; border-radius:0; font-size:0.6875rem; font-weight:700;
  letter-spacing:0.005em; text-transform:none;
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
.btw-label--btw{ background:#12141A; color:#FFFFFF; box-shadow:none; }
.btw-label--marge{ background:rgba(255,255,255,.94); color:#4D4A5C; box-shadow:none; }
.kaart-label{ left:8px; top:8px; }

/* De teller staat weer rechts naast de kop, op dezelfde regel. */
@media (min-width:720px){
  .ab-kop{ align-items:baseline; }
  .ab-kop h1{ flex:0 1 auto; }
  .ab-kop .ab-snel{ flex:1 0 100%; }
  .ab-tel{ order:0; margin-left:0; padding-left:0; }
}

/* De snelkeuzes staan ook op een telefoon. */
@media (max-width:719px){
  .ab-snel{ display:flex; }
}

/* Geen raster/lijst-knop. */
.rk-weergave{ display:none !important; }


/* ======================================================================
   FILTERKOLOM EN RESULTAATREGEL GELIJK AAN MOCKUP 1
   ====================================================================== */

/* --- het maandbedrag: van, tot en drie knoppen ----------------------------- */
.fg-budget{ display:flex; gap:6px; margin-top:8px; }
.fg-budget button{
  flex:1; min-height:30px; padding:0 6px; border:1px solid #D9D5EE; border-radius:0;
  background:#FFFFFF; font:inherit; font-size:0.75rem; font-weight:600; color:#1800AD;
  cursor:pointer; white-space:nowrap;
}
@media (hover:hover){ .fg-budget button:hover{ background:#F4F2FE; border-color:#1800AD; } }
.fg-budget button.aan{ background:#1800AD; border-color:#1800AD; color:#FFFFFF; }

/* --- soort als twee knoppen ------------------------------------------------
   Het blijven twee gewone vinkvakjes, want die werken al met de rest van het filteren. Het
   vakje zelf is onzichtbaar en het label ziet eruit als een knop. */
.fg-duo{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.fg-duo label{
  display:flex; align-items:center; justify-content:center; min-height:36px; padding:0 8px;
  border:1px solid #D9D5EE; border-radius:0; background:#FFFFFF;
  font-size:0.8125rem; font-weight:600; color:#12141A; cursor:pointer; text-align:center;
}
.fg-duo label:hover{ background:#F7F7FC; }
.fg-duo input{ position:absolute; opacity:0; width:0; height:0; }
.fg-duo label:has(input:checked){ background:#1800AD; border-color:#1800AD; color:#FFFFFF; }
.fg-duo label:has(input:focus-visible){ outline:2px solid #1800AD; outline-offset:2px; }
.fg-duo b{ display:none; }

/* --- merk: zes regels en een link ------------------------------------------ */
.fg[data-groep="merk"] .fg-zoek{ display:none; }
.fg[data-groep="merk"] .fg-lijst{ max-height:none; overflow:visible; }
.fg[data-groep="merk"] .fg-lijst label:nth-child(n+7){ display:none; }
.fg--alles[data-groep="merk"] .fg-zoek{ display:block; }
.fg--alles[data-groep="merk"] .fg-lijst{ max-height:280px; overflow-y:auto; }
.fg--alles[data-groep="merk"] .fg-lijst label:nth-child(n+7){ display:flex; }
.fg-alle{
  display:inline-block; margin-top:8px; padding:0; border:0; background:none;
  font:inherit; font-size:0.8125rem; font-weight:600; color:#1800AD; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px;
}

/* --- dichte groepen krijgen een plus ---------------------------------------
   In het ontwerp staat er een plus achter Bouwjaar, Kilometerstand en Brandstof, geen
   pijltje. */
.fg:not([open])>summary::after{
  content:"+"; width:auto; height:auto; margin:0 2px 0 0; border:0; transform:none;
  font-size:1rem; font-weight:400; line-height:1; color:#6E6B80;
}
.fg[open]>summary::after{
  content:""; width:8px; height:8px; margin-right:4px;
  border-right:1.6px solid #B6B3C6; border-bottom:1.6px solid #B6B3C6;
  transform:rotate(-135deg) translateY(-2px);
}

/* --- de regel boven de kaarten ---------------------------------------------
   Hetzelfde als bovenaan de pagina: aantal, streepje, laagste maandbedrag. Beide lopen mee
   met de filters. */
.rk-tel{
  display:inline-flex; align-items:baseline; gap:10px; margin:0;
  font-size:0.8125rem; color:#6E6B80; font-variant-numeric:tabular-nums; white-space:nowrap;
}
.rk-tel b{ font-size:0.9375rem; font-weight:700; color:#1800AD; }
.rk-tel .rk-va{ padding-left:10px; border-left:1px solid #D9D5EE; }
@media (max-width:719px){
  /* Op de telefoon staat die regel onder de balk met Filters en Relevantie, precies zoals in
     het ontwerp. Hij stond verborgen. */
  .rk-tel{ display:inline-flex; grid-column:1 / -1; order:2; padding-top:10px; }
  .rk-bar{ grid-template-columns:1fr 1fr; }
}


/* De snelkeuzes lopen op een telefoon gewoon door over meer regels, zoals in het ontwerp.
   Ze schoven eerst opzij in een strook; dat scheelt hoogte, maar dan zie je de laatste vier
   niet staan. */
@media (max-width:719px){
  .ab-snel{
    display:flex; flex-wrap:wrap; overflow:visible;
    margin-inline:0; padding-inline:0;
  }
}


/* ======================================================================
   NAGEMETEN TEGEN OPZET 1 EN RECHTGEZET
   Elke regel hier komt uit een gemeten verschil tussen /aanbod/ en het bureaubladkader van
   opzet 1 in /mockups/aanbod2/. De waarde rechts is die van het ontwerp.
   ====================================================================== */

/* het label had een spatiëring van 0,055px; in het ontwerp geen */
.btw-label{ letter-spacing:normal; }

/* de kop was 20,7px door een clamp die meeschaalt; in het ontwerp een vaste 24 */
.ab-kop h1{ font-size:1.5rem; }

/* tussen de kop en de snelkeuzes zat 9px, in het ontwerp 24 (12 onder de kop, 12 boven de
   knoppen). De band eronder houdt 14px over, net als daar. */
.ab-kop{ row-gap:24px; }
.ab{ padding-top:10px; padding-bottom:14px; }
.ab-snel{ margin-top:0; }

@media (min-width:1000px){
  /* de filterkolom had 12px ruimte rechts voor een schuifbalk; in het ontwerp niets */
  .fk{ padding:0; }

  /* onder elke groep 18px, dan de haarlijn, dan weer 18. Dichte groepen 12 en 12. De ruimte
     zat eerst in de regelhoogte van het kopje, waardoor de lijnen te dicht op elkaar stonden
     en de kopjes te ver van hun eigen inhoud. */
  .fg{ padding-bottom:18px; margin-bottom:18px; }
  .fg:not([open]){ padding-bottom:12px; margin-bottom:12px; }
  .fg:last-child{ margin-bottom:0; }
  .fg-lijf{ padding-top:0; padding-bottom:0; }

  /* het kopje: geen regelhoogte van 40 pixels meer, maar 10 pixels lucht eronder */
  .fg[open]>summary{ min-height:0; padding:0 2px; margin-bottom:10px; }
  .fg:not([open])>summary{ min-height:0; padding:0 2px; }

  /* van en tot: 38 hoog met een lila rand */
  .fp input, .fs select{ min-height:38px; height:38px; border-color:#D9D5EE; }

  /* de merkregels: 30 hoog en 14 groot */
  .fk .fg-lijst label{ min-height:30px; font-size:0.875rem; gap:8px; }
  .fk .fg-lijst input{ width:15px; height:15px; }
}


/* --- drie kaarten naast elkaar --------------------------------------------
   Het raster stond op "zoveel als er passen" met een minimum van 230 pixels. Op een breed
   scherm werden dat er vier, en dan is elke kaart 243 pixels en de foto navenant klein. In
   het ontwerp staan er drie naast elkaar; dat is 327 pixels per kaart en dus een foto die
   een derde groter is. Vast op drie dus, en niet meer meerekenen met de breedte.

   Op een telefoon een kolom tot 560 pixels. Twee kaarten van 170 pixels naast elkaar levert
   postzegels op, en dat is precies wat een auto niet verkoopt. */
@media (min-width:1000px){
  .rooster{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .rooster--lijst{ grid-template-columns:minmax(0,1fr) !important; }
}
@media (min-width:720px) and (max-width:999px){
  .rooster{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:560px){
  .rooster{ grid-template-columns:minmax(0,1fr); gap:16px; }
}

/* De foto vult de kaart van rand tot rand en wordt op 4:3 bijgesneden, net als in het
   ontwerp. Bij de bredere kaart valt er nu veel minder weg. */
.kaart-beeld{ display:block; width:100%; }
.kaart-beeld img{ width:100%; height:100%; object-fit:cover; object-position:center; }


/* --- de laatste drie gemeten verschillen ----------------------------------
   1. De kaart had nog padding van 22,4 pixels rondom, overgebleven van de modelkaarten op de
      homepage. Daardoor raakte de foto de rand niet, was hij 202 pixels breed in plaats van
      248, en was de kaart 61 pixels hoger dan in het ontwerp. In het ontwerp loopt de foto
      van rand tot rand.
   2. De sorteerkeuze werd 38 pixels hoog omdat de regel voor de van/tot-velden ook op de
      keuzelijst in de resultaatbalk sloeg. Die hoort 36 te zijn.
   3. De twee soortknoppen werden 30 pixels hoog en 13 groot, omdat de regel voor de
      merkregels eroverheen ging. Ze horen 36 en 14. */
.rooster .kaart{ padding:0; }
.rk-bar .rk-sorteer select{ min-height:36px; height:36px; }
@media (min-width:1000px){
  .fk .fg-duo label{ min-height:36px; font-size:0.8125rem; }
}


/* --- vier dingen die Ayham aanwees ----------------------------------------

   1. De balk met het aantal en de sortering plakte op een breed scherm mee tijdens het
      scrollen en schoof daarbij over de kaarten heen. Hij hoort daar gewoon te blijven staan
      waar hij staat. Op een telefoon blijft hij wel plakken; daar is hij de enige manier om
      bij de filters te komen zonder helemaal terug te scrollen.

   2. De schuifbalk in de filterkolom is weg. Die was er om een lange kolom binnen het scherm
      te houden, maar een tweede schuifbalk naast die van de pagina leest slecht en de kolom
      past nu toch: de dichte groepen zijn een regel geworden.

   3. Dichte en open groepen hadden een ander lettertype. Nu allebei hetzelfde, in het
      lettertype van de open groep, en de dichte iets donkerder zodat je ziet dat er nog wat
      achter zit.

   4. Het geld staat onderaan de kaart. */

@media (min-width:1000px){
  .rk-bar{ position:static; background:none; padding-top:0; margin-top:0; }
  .rk-bar[data-vast]{ border-bottom-color:#E5E4EC; }

  .fk{ max-height:none; overflow:visible; }

  .fg>summary,
  .fg[open]>summary,
  .fg:not([open])>summary{
    font-size:0.8125rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  }
  .fg[open]>summary{ color:#6E6B80; }
  .fg:not([open])>summary{ color:#3B3752; }
}

/* Het geld onderaan de kaart, met lucht ertussen in plaats van een lijn. */
.kaart-body{ padding:11px 13px 0; }
.kaart-geld{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:0 5px;
  margin-top:auto; padding:11px 13px 13px; border:0;
}
.kaart-geld .kaart-vraag{ margin-left:auto; }
.kaart-basis{ flex:1 0 100%; margin-top:1px; }
.kaart-naam{ margin-top:0; }


/* De tekens bij bouwjaar, kilometerstand, brandstof en versnelling, op elk formaat. Ze staan
   in het blauw van de site zodat ze bij de kaart horen en niet als grijze ruis wegvallen. */
.kaart-chips li{ display:inline-flex; align-items:center; gap:5px; }
.kaart-chips svg{
  display:block !important; width:13px; height:13px; flex:none; fill:none;
  stroke:#1800AD; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}


/* --- de filterkolom scrolt gewoon mee --------------------------------------
   Hij stond op plakken zonder eigen schuifbalk. Dat gaat goed zolang de kolom in het scherm
   past, maar bij een laptop van 800 pixels hoog viel alles onder Brandstof buiten beeld en
   was er geen manier om erbij te komen. Drie dingen konden niet tegelijk: meeplakken, geen
   eigen schuifbalk, en alles bereikbaar. Bereikbaar wint. De kolom scrolt nu met de pagina
   mee, zoals de rest. */
@media (min-width:1000px){
  .ab-lijf > div:first-child{ align-self:start; }
  .fk{ position:static; max-height:none; overflow:visible; }
}

/* De snelkeuzes boven de resultaten zijn weg. Alles wat erin stond staat ook in de
   filterkolom, en twee ingangen naar hetzelfde filter is een keuze te veel. */
.ab-snel{ display:none !important; }


/* --- wat Ayham aanwees: hover, weergave, vermogen --------------------------
   1. Geen hover-effect meer op de advertenties. De kaart bewoog omhoog en kreeg een schaduw;
      bij drie kolommen naast elkaar wipt dan steeds een kaart op en dat is onrustig.
   2. De raster/lijst-knop staat weer aan. De keuze wordt in de browser bewaard, dus wie
      liever lijstjes leest krijgt de volgende keer meteen lijstjes.
   3. Het vermogen staat als vijfde plaatje op de kaart, in pk met de kilowatts erachter. */
@media (hover:hover){
  .kaart:hover{ transform:none; box-shadow:none; border-color:#E5E4EC; }
  .kaart:hover .kaart-beeld{ transform:none; box-shadow:none; }
  .kaart:hover .kaart-naam{ color:#1800AD; }
}
.rk-weergave{ display:none !important; }
@media (min-width:720px){ .rk-weergave{ display:inline-flex !important; } }


/* --- het zoekveld boven de filters ----------------------------------------
   Elke leasesite heeft een veld waarin je gewoon typt wat je zoekt. Met negentienduizend
   auto's is filteren alleen niet genoeg als je al weet dat je een Polo wil. */
.fg--zoek{ border-bottom:1px solid #E5E4EC; padding-bottom:16px; margin-bottom:16px; }
.fg-zoek--alles{
  width:100%; min-height:40px; padding:0 12px 0 34px; font-size:0.875rem;
  border:1px solid #D9D5EE; border-radius:0; background:#FFFFFF
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6B80' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5'/%3E%3C/svg%3E")
    no-repeat 10px center; background-size:15px;
}
.fg-zoek--alles:focus{ outline:2px solid #1800AD; outline-offset:1px; }


/* --- lijstweergave ook op een telefoon -------------------------------------
   De knop stond alleen op een breed scherm. Op een telefoon is het verschil juist groot: in
   het raster past er anderhalve kaart op een scherm, in de lijst vier auto's. Wie snel langs
   een paar honderd auto's wil, wil dat daar het meest.

   De foto gaat naar links op 116 pixels, de tekst ernaast, en het bedrag onder de naam. */
.rk-weergave{ display:inline-flex !important; }
@media (max-width:719px){
  .rk-bar{ grid-template-columns:1fr 1fr auto; }
  .rk-weergave{ order:3; }

  .rooster--lijst{ grid-template-columns:minmax(0,1fr) !important; gap:12px; }
  .rooster--lijst .kaart{
    display:grid; grid-template-columns:116px minmax(0,1fr); align-items:stretch;
  }
  .rooster--lijst .kaart-beeld{ height:100%; aspect-ratio:auto; }
  .rooster--lijst .kaart-body{ padding:10px 12px 0; }
  .rooster--lijst .kaart-naam{ font-size:0.875rem; }
  .rooster--lijst .kaart-type{ font-size:0.75rem; }
  .rooster--lijst .kaart-chips{ margin-top:6px; gap:4px; }
  .rooster--lijst .kaart-chips li{ font-size:0.6875rem; padding:2px 5px; }
  /* op 116 pixels naast de foto passen er geen vijf plaatjes; brandstof en vermogen vallen
     weg, bouwjaar en kilometerstand zijn wat je hier wil zien */
  .rooster--lijst .kaart-chips li:nth-child(n+3){ display:none; }
  .rooster--lijst .kaart-geld{ padding:6px 12px 10px; }
  .rooster--lijst .kaart-geld .kaart-pm b{ font-size:1.1875rem; }
  .rooster--lijst .kaart-basis{ display:none; }
  .rooster--lijst .kaart-label{ left:6px; top:6px; padding:2px 6px; font-size:0.625rem; }
}


/* --- de filterlade op een telefoon -----------------------------------------
   Drie dingen klopten niet.

   1. De lade lag onder de balk bovenaan de site, dus de titel "Filters" en de knop "Alles
      wissen" vielen erachter weg. De lade hoort over alles heen te liggen; dat is wat een
      lade is.
   2. De gele knop "Toon resultaten" plakt onderaan, maar de lade had 96 pixels ruimte onder
      zich staan. Daardoor hing de knop 96 pixels boven de onderkant, midden in de lijst,
      met filterregels eromheen. Nu ligt hij tegen de onderrand, over de volle breedte, met
      een zachte schaduw zodat je ziet dat er tekst onderdoor loopt.
   3. Er was geen kruisje. Wie de lade opent zonder iets te kiezen kon alleen weg via "Toon
      resultaten", en dat suggereert dat je iets bevestigt. */
@media (max-width:999px){
  .fk{ z-index:200; padding-bottom:0; }
  .fk-titel{ padding-top:16px; padding-bottom:12px; }
  .fk-kruis{
    display:grid; place-items:center; width:34px; height:34px; margin-right:-6px;
    border:0; border-radius:0; background:#F4F3FA; color:#12141A; cursor:pointer;
  }
  .fk-kruis svg{ width:16px; height:16px; }
  .fk-sluit{
    position:sticky; bottom:0; width:calc(100% + 32px); margin:20px -16px 0;
    border-radius:0; min-height:58px; font-size:1rem;
    box-shadow:0 -12px 22px -14px rgba(18,20,26,.45);
  }
}
@media (min-width:1000px){ .fk-kruis{ display:none; } }


/* --- het kruisje in de filterknoppen ---------------------------------------
   Het was het teken &times; op 16 pixels naast tekst van 13. Zo'n glyph hangt in zijn eigen
   regelhoogte en zakt daardoor optisch weg onder het woord ernaast, ook al staan de vakjes
   netjes gecentreerd. Nu een getekend kruis in een vierkant van 12 bij 12: dat staat altijd
   precies in het midden, ongeacht het lettertype. */
.chip{ padding:5px 8px 5px 11px; gap:7px; }
.chip span{
  display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; border-radius:0; font-size:0; line-height:0;
  background:rgba(24,0,173,.08);
}
.chip span svg{
  width:9px; height:9px; display:block; fill:none; stroke:#5B54A8;
  stroke-width:1.9; stroke-linecap:round;
}
@media (hover:hover){
  .chip:hover span{ background:rgba(24,0,173,.16); }
  .chip:hover span svg{ stroke:#1800AD; }
}
.chip--leeg{ padding:6px 4px; }
.chip--leeg span{ display:none; }


/* --- een stip in plaats van een cijfer -------------------------------------
   Achter "SOORT" stond een 1 en achter "MERK" een 2. Dat je op merk gefilterd hebt is nuttig
   om te zien; hoeveel merken je hebt aangevinkt niet, die staan er gewoon onder. Een cijfer
   zonder uitleg naast een kop leest bovendien als een aantal auto's, en dat is het niet.

   Nu een stip in het blauw van de site, en de groepsnaam kleurt mee. Je ziet in een oogopslag
   welke groepen aanstaan, ook als ze dichtgeklapt zijn. */
.fg-tel{ font-size:0; line-height:0; }
.fg-tel[data-aan]{
  display:inline-block; width:7px; height:7px; margin-left:2px;
  border-radius:0; background:#1800AD;
}
.fg:has(.fg-tel[data-aan]) > summary{ color:#1800AD !important; }
/* de knop op de telefoon houdt wel zijn aantal: daar zie je de groepen niet staan */
.fk-open .fg-tel{ font-size:0.6875rem; line-height:1; }
.fk-open .fg-tel[data-aan]{ width:auto; height:auto; background:none; }


/* --- het uitklapmenu onder Aanbod ------------------------------------------
   Was een megamenu over de volle breedte met vijf kolommen en merklogo's, dat bovendien nooit
   openging omdat het javascript een knop zocht die er niet stond. Nu een smalle lijst onder
   het woord Aanbod, zoals Ayham liet zien.

   Aanbod zelf blijft een link: aanwijzen opent de lijst, klikken brengt je naar alle auto's.
   Daarom ligt er een onzichtbare strook boven de lijst, anders valt hij dicht zodra je muis
   het gat tussen het woord en het paneel oversteekt. */
.nav-drop{ position:relative; display:inline-flex; align-items:center; }
.mega{
  position:absolute; left:50%; right:auto; top:calc(100% + 14px);
  transform:translateX(-50%);
  width:250px; padding:8px; z-index:70;
  background:#FFFFFF; border:1px solid #E5E4EC; border-radius:0;
  box-shadow:0 20px 44px -22px rgba(18,20,26,.4), 0 2px 6px rgba(18,20,26,.05);
}
.mega::before{ content:""; position:absolute; left:0; right:0; top:-16px; height:16px; }
.mega[hidden]{ display:none; }
.mega .wrap{ display:block; padding:0; width:auto; }
.mega a{
  display:block; padding:9px 12px; border-radius:0;
  font-size:0.9375rem; font-weight:500; color:#12141A; text-decoration:none;
  white-space:nowrap;
}
@media (hover:hover){ .mega a:hover{ background:#F4F3FA; color:#1800AD; } }
.mega a:focus-visible{ outline:2px solid #1800AD; outline-offset:-2px; }
.mega-lijn{ display:block; height:1px; margin:6px 10px; background:#EEEEF5; }
.nav-aanbod[aria-expanded="true"]{ color:#1800AD; }


/* --- de balk op een telefoon: alles even groot en hoger ---------------------
   De filterknop was 44 pixels hoog, de sorteerkeuze ook, maar de raster/lijst-knop 34. Drie
   knoppen naast elkaar met verschillende hoogtes staan scheef. Alles nu 44.

   En de balk stond te laag: onder de kop zat nog 14 pixels van de lila band en 20 van de
   inhoud eronder. Samen 34 pixels lucht waar niets in staat. */
@media (max-width:719px){
  .ab{ padding-bottom:10px; }
  .ab-lijf{ padding-top:10px; }
  .rk-bar{ gap:8px; padding-top:0; padding-bottom:12px; grid-template-columns:auto 1fr auto; }
  .fk-open{ min-height:44px; height:44px; padding:0 14px; }
  .rk-sorteer select{ min-height:44px; height:44px; }
  .rk-weergave{ height:44px; padding:3px; border-radius:0; }
  .rk-weergave button{ width:38px; height:38px; border-radius:0; }
  .rk-weergave svg{ width:15px; height:15px; }
}


/* De sorteerkeuze bleef 36 pixels omdat de regel voor de resultaatbalk zwaarder woog dan die
   voor de telefoon. Op een telefoon 44, gelijk aan de twee knoppen ernaast. */
@media (max-width:719px){
  .rk-bar .rk-sorteer select{ min-height:44px; height:44px; }
}


/* --- gekozen waarden bij hun eigen groep -----------------------------------
   Ze stonden als losse rij bovenaan het formulier, verder van de groep vandaan dan de groep
   zelf. Nu staan ze in de samenvattingsregel van hun groep, en dat is met opzet: van een
   dichtgeklapte groep is alleen die regel zichtbaar, dus zo zie je je keuze ook zonder de
   groep open te klappen. */
.fg > summary{ display:block; padding:0; }
.fg-kop{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  min-height:40px;
}
.fg > summary::after{ content:none; }
.fg-kop::after{
  content:""; width:8px; height:8px; margin-right:4px; flex:none;
  border-right:1.6px solid #B6B3C6; border-bottom:1.6px solid #B6B3C6;
  transform:rotate(45deg) translateY(-2px); transition:transform .18s ease;
}
.fg[open] > summary .fg-kop::after{ transform:rotate(-135deg) translateY(-2px); }
@media (min-width:1000px){
  .fg:not([open]) > summary .fg-kop::after{
    content:"+"; width:auto; height:auto; margin:0 2px 0 0; border:0; transform:none;
    font-size:1rem; font-weight:400; line-height:1; color:#6E6B80;
  }
}
.fg-keuze{ display:flex; flex-wrap:wrap; gap:5px; }
.fg-keuze:not(:empty){ padding:0 0 12px; }
.fg[open] .fg-keuze:not(:empty){ padding-bottom:10px; }
.fg-keuze .chip{ text-transform:none; letter-spacing:normal; font-weight:600; }

/* de stip is niet meer nodig: de keuze staat er nu voluit */
.fg-tel[data-aan]{ display:none; }

/* de losse rij bovenaan is vervangen door de knopjes bij de groepen */
.fk-actief{ display:none !important; }

/* --- de kop van de filterkolom ---------------------------------------------
   Op een breed scherm stond hier niets. Nu "Filters" met het aantal erachter en "Alle filters
   wissen" aan de overkant, zodat je in een oogopslag ziet hoeveel er aanstaat. */
@media (min-width:1000px){
  .fk-titel{
    display:flex; padding:0 0 14px; margin-bottom:14px;
    border-bottom:1px solid #E5E4EC; font-size:1rem; color:#12141A;
  }
}
.fk-naam{ display:inline-flex; align-items:center; gap:8px; font-weight:700; }
.fk-aantal{ display:none; }
.fk-aantal[data-aan]{
  display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 6px;
  border-radius:0; background:#1800AD; color:#FFFFFF;
  font-size:0.6875rem; font-weight:700; font-style:normal;
}

/* --- de knop op de telefoon ------------------------------------------------
   "Filters . 5", en de knop kleurt mee zodra er iets aanstaat. */
.fk-open .fg-tel{ font-size:0.875rem; font-weight:700; }
.fk-open .fg-tel[data-aan]{ display:inline; }
.fk-open .fg-tel[data-aan]::before{ content:"\00b7"; margin:0 5px 0 2px; color:#9C9AAF; }
.fk-open:has(.fg-tel[data-aan]){ background:#EFEEFB; border-color:#C7C0EE; }


/* --- de regel boven de kaarten --------------------------------------------- */
.rk-tel{ font-size:1.0625rem; font-weight:600; color:#12141A; letter-spacing:-0.012em; }
.rk-tel b{ font-weight:700; color:#1800AD; }
@media (max-width:719px){ .rk-tel{ font-size:0.9375rem; } }

/* --- de lijstweergave op een telefoon, strakker ----------------------------
   Het was een foto van 116 pixels met de tekst er krap naast en het bedrag eronder, en de
   regels stonden niet uitgelijnd. Nu: foto van 132 over de volle hoogte, daarnaast de naam,
   de uitvoering, twee feiten en onderaan het bedrag met de vraagprijs aan de overkant. Alles
   op een vaste hoogte, zodat een lijst van twintig auto's een strak ritme heeft. */
@media (max-width:719px){
  .rooster--lijst{ gap:10px; }
  .rooster--lijst .kaart{
    grid-template-columns:132px minmax(0,1fr); grid-template-rows:auto auto;
    border-radius:0; overflow:hidden;
  }
  .rooster--lijst .kaart-beeld{
    grid-column:1; grid-row:1 / 3; height:100%; aspect-ratio:auto; min-height:104px;
  }
  .rooster--lijst .kaart-body{
    grid-column:2; grid-row:1; padding:10px 12px 0; min-width:0;
  }
  .rooster--lijst .kaart-geld{
    grid-column:2; grid-row:2; align-items:baseline; padding:2px 12px 10px; margin-top:auto;
  }
  .rooster--lijst .kaart-naam{ font-size:0.9375rem; line-height:1.25; }
  .rooster--lijst .kaart-type{ font-size:0.75rem; }
  .rooster--lijst .kaart-chips{ margin-top:7px; gap:4px; }
  .rooster--lijst .kaart-chips li{ font-size:0.6875rem; padding:2px 6px; gap:4px; }
  .rooster--lijst .kaart-chips svg{ width:11px; height:11px; }
  /* twee feiten passen naast elkaar op de smalle kolom; de rest staat op de kaart zelf */
  .rooster--lijst .kaart-chips li:nth-child(n+3){ display:none; }
  .rooster--lijst .kaart-geld .kaart-pm b{ font-size:1.125rem; }
  .rooster--lijst .kaart-geld .kaart-pm span{ font-size:0.75rem; }
  .rooster--lijst .kaart-vraag{ font-size:0.75rem; }
  .rooster--lijst .kaart-basis{ display:none; }
  .rooster--lijst .kaart-label{ left:6px; top:6px; padding:2px 6px; font-size:0.5625rem; }
}


/* --- de samenvattingsregel: geen loze ruimte -------------------------------
   De regel was 61 pixels hoog terwijl de kop 40 is en de keuzes 0: er bleef 21 pixels aan
   lege regelhoogte over, en die tekende zich af als een streepje onder elke groepsnaam. Een
   kolom-flexbox laat geen anonieme regel meer over. */
.fg > summary{ display:flex; flex-direction:column; gap:0; padding:0; line-height:0; }
.fg-kop{ width:100%; line-height:1.3; }
.fg-keuze{ width:100%; line-height:1.3; }
.fg-keuze:empty{ display:none; }

/* De regel boven de kaarten is één zin, geen rij losse stukken. Als flexbox met een gat van
   10 pixels stond er "Wij hebben   19.856   auto's gevonden". */
.rk-tel{ display:block; gap:0; }


/* --- alleen de knoppenbalk plakt op een telefoon ---------------------------
   De regel "Wij hebben ... gevonden" zat in dezelfde balk en plakte dus mee. Dat gaf twee
   regels die blijven staan, met een streep pagina ertussen die er doorheen schoof. Nu plakt
   alleen het blok met de drie knoppen, tegen de kop aan, zonder gat. */
.rk-knoppen{ display:flex; align-items:center; gap:10px; }
@media (min-width:720px){
  .rk-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .rk-tel{ order:-1; }
}
@media (max-width:719px){
  .rk-bar{
    display:block; position:static; padding:0; margin:0; background:none;
    backdrop-filter:none; -webkit-backdrop-filter:none; border:0;
  }
  .rk-knoppen{
    position:sticky; top:62px; z-index:22;
    display:grid; grid-template-columns:auto 1fr auto; gap:8px; align-items:center;
    margin-inline:-1.25rem; padding:10px 1.25rem;
    background:#FFFFFF; border-bottom:1px solid transparent;
  }
  .rk-bar[data-vast] .rk-knoppen{ border-bottom-color:#E5E4EC; }
  .rk-tel{ display:block; padding:14px 0 12px; }
}


/* Het uitklapmenu lijnt links uit met het woord Aanbod in plaats van eronder gecentreerd te
   staan. Een menu dat onder zijn eigen knop begint leest als een verlengstuk van dat woord;
   gecentreerd lijkt het los te hangen. */
.mega{ left:0; transform:none; }


/* --- de filterkolom zoals in het voorbeeld ---------------------------------
   Drie dingen.

   1. Er hing een los pijltje onder elke groepsnaam. De samenvattingsregel is een kolom
      geworden, en het oude pijltje op ::after van die regel werd daardoor een eigen regel
      eronder in plaats van een teken ernaast. Het pijltje hoort bij de kop; daar staat het al.

   2. De groepsnamen stonden klein in kapitalen. In het voorbeeld staan ze gewoon groot en
      donker, in normale schrijfwijze. Open en dicht hetzelfde, zodat de kolom een rustig
      ritme houdt.

   3. De gekozen waarden staan als knopjes direct onder hun eigen groepsnaam, in een lichte
      tint met de tekst in inkt en het kruisje in een rondje. */
.fg > summary::after,
.fg[open] > summary::after,
.fg:not([open]) > summary::after{ content:none !important; }

.fg-kop,
.fg[open] > summary .fg-kop,
.fg:not([open]) > summary .fg-kop{
  font-size:1rem; font-weight:700; letter-spacing:-0.012em; text-transform:none;
  color:#12141A; min-height:38px;
}
@media (min-width:1000px){
  .fg[open] > summary,
  .fg:not([open]) > summary{
    font-size:1rem; font-weight:700; letter-spacing:-0.012em; text-transform:none;
    color:#12141A;
  }
}
.fg:has(.fg-tel[data-aan]) > summary{ color:#12141A !important; }
.fg:has(.fg-tel[data-aan]) .fg-kop{ color:#1800AD; }

.fg-keuze{ padding-top:2px; }
.fg-keuze .chip{
  background:#EFEEFB; border:1px solid #DEDBF0; color:#12141A;
  font-size:0.8125rem; font-weight:600; padding:5px 7px 5px 11px;
}
.fg-keuze .chip span{ background:rgba(24,0,173,.10); }
.fg-keuze .chip span svg{ stroke:#4A4470; }
@media (hover:hover){
  .fg-keuze .chip:hover{ background:#E4E1F6; border-color:#C7C0EE; }
  .fg-keuze .chip:hover span svg{ stroke:#1800AD; }
}

/* de kop van de kolom: Filters met het aantal in een rondje */
.fk-titel{ font-size:1.0625rem; }
.fk-naam{ font-size:1.0625rem; }
.fk-titel .chip--leeg{
  font-size:0.875rem; color:#4D4A5C; text-decoration:underline; text-underline-offset:3px;
}


/* "Alle filters wissen" kreeg bij aanwijzen een gevuld lila blok, want hij deelt zijn klasse
   met de keuzeknopjes. Het is geen knopje maar een tekstlink; die hoort alleen een tint
   donkerder te worden. */
.fk-titel .chip--leeg{
  background:none !important; border:0 !important; border-radius:0;
  padding:6px 2px; color:#6E6B80;
}
@media (hover:hover){
  .fk-titel .chip--leeg:hover{ background:none !important; color:#12141A; }
}
.fk-titel .chip--leeg:focus-visible{ outline:2px solid #1800AD; outline-offset:2px; }


/* --- de knoppenbalk blijft nu echt staan -----------------------------------
   Plakken werkt alleen binnen de bak waar het element in zit. De knoppen zaten in .rk-bar,
   en die bak is op een telefoon maar 110 pixels hoog: precies de knoppen plus de telregel.
   Voorbij die 110 pixels was er niets meer om in te plakken en schoof de balk gewoon weg.

   Met display:contents verdwijnt die bak als doos en worden de knoppen en de telregel
   rechtstreeks kind van de resultatenkolom. Die is duizenden pixels hoog, dus daar kan de
   balk de hele lijst lang in blijven staan. */
@media (max-width:719px){
  .rk-bar{ display:contents; }
}


/* --- de knop Filters met het aantal ---------------------------------------
   Stond er als "Filters . 2" met een puntje ertussen. Een rond vlakje met het cijfer erin
   leest sneller en is hetzelfde teken als in de filterkolom, dus je herkent het terug. */
.fk-open .fg-tel[data-aan]{
  display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 6px;
  border-radius:0; background:#1800AD; color:#FFFFFF;
  font-size:0.6875rem; font-weight:700; line-height:1;
}
.fk-open .fg-tel[data-aan]::before{ content:none; }

/* --- de raster/lijst-knop, recht uitgelijnd --------------------------------
   De twee knoppen hadden verschillende maten uit oudere regels, waardoor het gekleurde
   vlakje achter de actieve knop niet midden onder zijn eigen teken stond. Nu allebei precies
   38 bij 38 in een omhulsel van 44, met het teken gecentreerd. */
@media (max-width:719px){
  .rk-weergave{
    display:inline-flex; align-items:center; gap:2px;
    height:44px; padding:3px; border-radius:0; border:1px solid #D9D5EE;
    background:#FFFFFF; box-sizing:border-box;
  }
  .rk-weergave button{
    display:grid; place-items:center; width:38px; height:36px; padding:0;
    border:0; border-radius:0; background:none; cursor:pointer;
  }
  .rk-weergave svg{ display:block; width:15px; height:15px; }
  .fk-open{ gap:8px; }
}


/* --- alles wat aanstaat op één plek, bovenaan ------------------------------
   De gekozen waarden stonden bij hun eigen groep. Dat leest goed per groep, maar je moet dan
   langs de hele kolom om te zien wat er allemaal aanstaat, en bij een dichtgeklapte groep
   onderaan zie je het pas na scrollen. Nu staan ze als één rij direct onder "Filters", met
   de lijn eronder als scheiding. Eén blik en je weet waarop je zoekt.

   De groepsnaam blijft blauw kleuren, zodat je nog steeds ziet waar een keuze vandaan komt. */
.fk-actief{
  display:flex !important; flex-wrap:wrap; gap:6px;
  padding:0 0 14px; margin-bottom:14px; border-bottom:1px solid #E5E4EC;
}
.fk-actief:empty{ display:none !important; }
.fk-actief .chip{
  background:#EFEEFB; border:1px solid #DEDBF0; color:#12141A;
  font-size:0.8125rem; font-weight:600; padding:5px 7px 5px 11px;
}
.fk-actief .chip span{ background:rgba(24,0,173,.10); }
.fk-actief .chip span svg{ stroke:#4A4470; }
@media (hover:hover){
  .fk-actief .chip:hover{ background:#E4E1F6; border-color:#C7C0EE; }
  .fk-actief .chip:hover span svg{ stroke:#1800AD; }
}

/* de knopjes bij de groepen zelf zijn daarmee dubbel */
.fg-keuze{ display:none !important; }


/* ======================================================================
   ADVERTENTIEPAGINA, OPZET 7 (RUSTIG)
   ====================================================================== */

/* --- de strook foto's links van de grote foto ------------------------------
   Stond eronder. Links erlangs staat de grote foto hoger op het scherm en zie je meteen dat
   er meer zijn. Op een telefoon blijft de strook eronder liggen en schuif je hem opzij. */
@media (min-width:1000px){
  .gal--links{ display:grid; grid-template-columns:80px minmax(0,1fr); gap:10px;
    align-items:start; }
  .gal--links .gal-strip{ flex-direction:column; overflow:visible; max-height:none; }
  .gal--links .gal-strip button{ width:80px; }
}

/* --- de rekenkaart ---------------------------------------------------------
   Eerst de aanschafprijs, dan wat je zelf kunt draaien, dan pas het maandbedrag. Dat is de
   volgorde waarin iemand denkt en het is wat alle vijf de concurrenten doen. */
.rek-kop{ padding-bottom:14px; margin-bottom:16px; border-bottom:1px solid #E5E4EC; }
.rek-kop > span{ display:block; font-size:0.8125rem; color:#6E6B80; }
.rek-kop > b{ display:block; font-size:1.375rem; font-weight:700; letter-spacing:-0.022em; }
.rek-btw{ display:block; margin-top:8px; font-size:0.75rem; font-style:normal; color:#6E6B80;
  line-height:1.5; }
.rek-btw .btw-label{ margin-right:6px; vertical-align:1px; }

.rek-veld{ margin-bottom:16px; }
.rek-label{ display:block; margin-bottom:8px; font-size:0.8125rem; font-weight:600;
  color:#4D4A5C; }
.rek-jaren{ display:grid; grid-template-columns:repeat(6,1fr); gap:4px; }
.rek-jaren button{
  min-height:40px; padding:0 2px; border:1px solid #D9D5EE; border-radius:0;
  background:#FFFFFF; font:inherit; font-size:0.875rem; font-weight:600; color:#12141A;
  cursor:pointer; transition:background-color .12s ease, border-color .12s ease;
}
@media (hover:hover){ .rek-jaren button:hover{ background:#F4F2FE; border-color:#1800AD; } }
.rek-jaren .aan{ background:#1800AD; border-color:#1800AD; color:#FFFFFF; }
.rek-jaren button:focus-visible{ outline:2px solid #1800AD; outline-offset:2px; }

.rek-invoer{ display:flex; align-items:center; gap:7px; min-height:44px; padding:0 12px;
  border:1px solid #D9D5EE; border-radius:0; background:#FFFFFF; }
.rek-invoer i{ font-style:normal; color:#8D8AA3; }
.rek-invoer input{ width:100%; min-width:0; border:0; outline:0; background:none;
  font:inherit; font-weight:600; font-variant-numeric:tabular-nums; }
.rek-invoer:focus-within{ border-color:#1800AD; box-shadow:0 0 0 3px rgba(24,0,173,.10); }
.rek-hint{ display:block; margin-top:6px; font-size:0.6875rem; color:#8D8AA3; line-height:1.5; }
.rek-hint b{ color:#6E6B80; font-weight:600; }

.rek-uit{ padding:16px 0 12px; margin-top:4px; border-top:1px solid #E5E4EC; }
.rek-bedrag{ display:flex; align-items:baseline; gap:8px; }
.rek-bedrag b{ font-size:2.125rem; font-weight:700; color:#1800AD; letter-spacing:-0.03em;
  line-height:1; }
.rek-bedrag i{ font-style:normal; font-size:0.875rem; color:#6E6B80; }
.rek-basis{ display:block; margin-top:5px; font-size:0.75rem; color:#8D8AA3; }

.gerust{ margin:12px 0 0; padding:0; list-style:none; display:grid; gap:7px; }
.gerust li{ display:flex; align-items:flex-start; gap:8px; font-size:0.8125rem; color:#4D4A5C; }
.gerust svg{ flex:none; margin-top:2px; color:#1800AD; }

.rek-ct{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:16px;
  padding-top:14px; border-top:1px solid #E5E4EC; }
.rek-ct-knop{
  display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:40px;
  padding:0 6px; border:1px solid #D9D5EE; border-radius:0; background:#FFFFFF;
  font:inherit; font-size:0.8125rem; font-weight:600; color:#1800AD; cursor:pointer;
  text-decoration:none; white-space:nowrap;
}
@media (hover:hover){ .rek-ct-knop:hover{ background:#F4F2FE; border-color:#1800AD; } }
.rek-ct-knop svg{ flex:none; }

/* wat er niet meer is */
.rek-uitkomst, .rek-vrij, .rek-proof, .rek-pas, .rek-aanschaf, .rek-usps,
.rek-contact, .rek-blok{ display:none !important; }
.vt-punten{ display:none !important; }

@media (max-width:719px){
  .rek-jaren{ grid-template-columns:repeat(3,1fr); }
  .rek-bedrag b{ font-size:1.875rem; }
  .rek-ct{ grid-template-columns:1fr 1fr; }
  .rek-ct-knop:last-child{ grid-column:1 / -1; }
}


/* --- schuiven bij de aanbetaling en de slottermijn -------------------------
   Typen is precies maar traag; slepen geeft meteen gevoel voor wat het met je maandbedrag
   doet. Allebei dus, en ze houden elkaar bij. */
.rek-schuif{
  -webkit-appearance:none; appearance:none; width:100%; height:22px; margin:10px 0 0;
  background:none; cursor:pointer;
}
.rek-schuif::-webkit-slider-runnable-track{
  height:4px; border-radius:0; background:#DEDBF0;
}
.rek-schuif::-moz-range-track{ height:4px; border-radius:0; background:#DEDBF0; }
.rek-schuif::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:20px; height:20px; margin-top:-8px;
  border-radius:0; background:#FFFFFF; border:2px solid #1800AD;
  box-shadow:0 2px 6px rgba(18,20,26,.2);
}
.rek-schuif::-moz-range-thumb{
  width:20px; height:20px; border-radius:0; background:#FFFFFF; border:2px solid #1800AD;
  box-shadow:0 2px 6px rgba(18,20,26,.2);
}
.rek-schuif:focus-visible{ outline:2px solid #1800AD; outline-offset:4px; }
.rek-veld .rek-hint{ margin-top:2px; }

/* --- de strook kleine foto's -----------------------------------------------
   Liep door tot ver onder de grote foto. Nu even hoog als die foto, en daarbinnen scrollen.
   De schuifbalk zelf is weg; dat er meer is zie je aan de halve foto onderaan. */
@media (min-width:1000px){
  /* De strook staat los van de rij. Stond hij er gewoon in, dan bepaalden twintig kleine
     foto's de hoogte van die rij, rekte de grote foto daarin mee, en werd hij door zijn
     verhouding van 4 op 3 achttienhonderd pixels breed. Daar liep de hele pagina op scheef.
     Nu bepaalt de foto de hoogte en vult de strook die op, met scrollen als het er meer zijn
     dan erin passen. */
  .gal--links{ position:relative; align-items:start; }
  .gal--links .gal-strip{
    position:absolute; left:0; top:0; bottom:0; width:80px;
    flex-direction:column; min-height:0; overflow-y:auto; padding-right:2px;
    scrollbar-width:none;
  }
  .gal--links .gal-strip::-webkit-scrollbar{ display:none; }
  .gal--links .gal-groot{ grid-column:2; min-width:0; }
}

/* --- de pijlen: alleen bij aanwijzen, en strakker --------------------------
   Ze stonden er altijd en waren zwaar. Nu een witte cirkel met een dunne streep, die
   opkomt zodra je met de muis over de foto gaat. Op een telefoon staan ze er gewoon: daar is
   geen muis om mee aan te wijzen. */
.gal-groot{ position:relative; }
.gal-pijl{
  position:absolute; top:50%; transform:translateY(-50%) scale(.94);
  display:grid; place-items:center; width:44px; height:44px;
  border:1px solid rgba(18,20,26,.06); border-radius:0;
  background:rgba(255,255,255,.92); color:#12141A; cursor:pointer;
  box-shadow:0 4px 14px -4px rgba(18,20,26,.28);
  opacity:0; pointer-events:none;
  transition:opacity .16s ease, transform .16s cubic-bezier(.16,1,.3,1),
             background-color .14s ease;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.gal-pijl svg{ width:17px; height:17px; stroke-width:1.7; }
.gal-pijl[data-r="l"]{ left:12px; }
.gal-pijl[data-r="r"]{ right:12px; }
@media (hover:hover){
  .gal-groot:hover .gal-pijl,
  .gal-groot:focus-within .gal-pijl{ opacity:1; pointer-events:auto;
    transform:translateY(-50%) scale(1); }
  .gal-pijl:hover{ background:#FFFFFF; }
}
@media (hover:none){
  .gal-pijl{ opacity:1; pointer-events:auto; transform:translateY(-50%) scale(1);
    width:40px; height:40px; }
}
.gal-pijl:focus-visible{ opacity:1; pointer-events:auto; outline:2px solid #1800AD;
  outline-offset:2px; }

/* --- meer van dezelfde: drie naast elkaar, opzij te schuiven ----------------
   Vier kaarten in een raster gaven een tweede regel met een gat ernaast. Nu een strook van
   drie met een halve vierde in beeld, zodat je ziet dat er meer staat. */
.verg .rooster{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,calc((100% - 36px)/3));
  grid-template-columns:none !important; gap:18px;
  overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
  padding-bottom:6px; scrollbar-width:thin; scrollbar-color:#D9D5EE transparent;
}
.verg .rooster > *{ scroll-snap-align:start; }
.verg .rooster::-webkit-scrollbar{ height:8px; }
.verg .rooster::-webkit-scrollbar-thumb{ background:#D9D5EE; border-radius:0; }
@media (max-width:999px){
  .verg .rooster{ grid-auto-columns:minmax(0,calc((100% - 24px)/2)); gap:12px;
    margin-inline:-1.25rem; padding-inline:1.25rem; }
}
@media (max-width:560px){
  .verg .rooster{ grid-auto-columns:minmax(0,78%); }
}


/* --- de labels in de feitenstrook waren te licht ---------------------------
   Ze stonden op #8D8AA3 en dat is op wit een contrast van 3,3 op 1. De ondergrens voor tekst
   van deze maat is 4,5. Nu #6E6B80: 4,6 op 1, en daarmee gewoon te lezen. Ook de tekens
   ernaast krijgen de kleur van de site in plaats van grijs. */
.feiten dt{ color:#6E6B80; font-weight:500; }
.feiten svg{ color:#1800AD; opacity:.9; }
.spec dt{ color:#6E6B80; }


/* --- meer van dezelfde: drie in beeld, met pijlen ---------------------------
   De kolommen stonden op minmax(0, een derde) en mochten dus inzakken; zes kaarten persten
   zich daardoor gewoon in de breedte tot honderdzesentwintig pixels per stuk. Zonder die
   minmax is een kolom precies een derde en schuift de rest eruit. */
.verg-kop{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
  margin-bottom:16px; }
.verg-kop h2{ margin:0; }
.verg-kop p{ margin:4px 0 0; }
.verg-pijlen{ display:flex; gap:8px; flex:none; }
.verg-pijlen button{
  display:grid; place-items:center; width:40px; height:40px; padding:0;
  border:1px solid #D9D5EE; border-radius:0; background:#FFFFFF; color:#12141A;
  cursor:pointer; transition:background-color .14s ease, border-color .14s ease,
  opacity .14s ease;
}
@media (hover:hover){ .verg-pijlen button:hover:not(:disabled){ background:#F4F2FE;
  border-color:#1800AD; color:#1800AD; } }
.verg-pijlen button:disabled{ opacity:.32; cursor:default; }
.verg-pijlen button:focus-visible{ outline:2px solid #1800AD; outline-offset:2px; }

.verg .rooster{
  grid-auto-columns:calc((100% - 36px) / 3);
  scroll-behavior:smooth; scrollbar-width:none;
}
.verg .rooster::-webkit-scrollbar{ display:none; }
@media (max-width:999px){
  .verg .rooster{ grid-auto-columns:calc((100% - 12px) / 2); }
}
@media (max-width:560px){
  .verg .rooster{ grid-auto-columns:78%; }
  .verg-pijlen{ display:none; }
}


/* --- de galerij op een telefoon --------------------------------------------
   De strook kleine foto's hoort onder de grote foto, niet erboven: je kijkt eerst naar de
   auto en pas daarna naar de rest. En de pijlen staan er niet meer: op een telefoon veeg je,
   en twee knoppen over de foto heen nemen alleen maar zicht weg. */
@media (max-width:999px){
  .gal--links{ display:flex; flex-direction:column; gap:8px; }
  .gal--links .gal-strip{
    position:static; width:auto; flex-direction:row; order:2;
    overflow-x:auto; overflow-y:hidden; scrollbar-width:none;
    margin-inline:-1.25rem; padding-inline:1.25rem;
  }
  .gal--links .gal-strip::-webkit-scrollbar{ display:none; }
  .gal--links .gal-groot{ order:1; }
  .gal-pijl{ display:none !important; }
}


/* --- de knop op de schuif: helemaal blauw ----------------------------------
   Hij was wit met een blauwe rand, en kreeg bij aanraken de gele focusring van de site
   eromheen. Twee kleuren op een knop van twintig pixels is een kleur te veel. Nu een volle
   blauwe knop met een witte rand eromheen, en de ring bij toetsenbordgebruik ook in blauw. */
.rek-schuif::-webkit-slider-thumb{
  background:#1800AD; border:2px solid #FFFFFF;
  box-shadow:0 0 0 1px #1800AD, 0 2px 6px rgba(18,20,26,.22);
}
.rek-schuif::-moz-range-thumb{
  background:#1800AD; border:2px solid #FFFFFF;
  box-shadow:0 0 0 1px #1800AD, 0 2px 6px rgba(18,20,26,.22);
}
.rek-schuif{ accent-color:#1800AD; }
.rek-schuif:focus{ outline:none; }
.rek-schuif:focus-visible{ outline:2px solid #1800AD; outline-offset:4px; }
.rek-schuif:focus-visible::-webkit-slider-thumb{
  box-shadow:0 0 0 1px #1800AD, 0 0 0 5px rgba(24,0,173,.18);
}


/* --- de foto op een telefoon: niet meer meerekken -------------------------
   De strook is een flexregel met twintig kleine foto's naast elkaar. Een flexonderdeel mag
   standaard niet kleiner worden dan zijn inhoud, dus die strook eiste zestienhonderd pixels
   breedte op. Het hele blok werd daardoor 1832 breed, de grote foto rekte mee, en die werd
   door zijn verhouding van 4 op 3 dertienhonderd pixels hoog: een foto van drie schermen.

   min-width:0 heft dat op. Dan mag de strook wel kleiner worden dan zijn inhoud en schuift
   hij binnen zijn eigen breedte, zoals de bedoeling was. */
@media (max-width:999px){
  .vt-beeld{ min-width:0; }
  .gal, .gal--links{ min-width:0; max-width:100%; }
  .gal--links .gal-strip{ min-width:0; width:100%; }
  .gal--links .gal-groot{ min-width:0; width:100%; }
}


/* ======================================================================
   DE GALERIJ ALS VEEGCARROUSEL
   ====================================================================== */

/* De foto's staan naast elkaar in een strook die de browser zelf scrolt. Dat veegt vanzelf
   soepel, met vaart, en snapt precies op een foto. touch-action:pan-x is de regel die zegt
   dat een horizontale beweging bij deze strook hoort: zonder die regel scrolt de pagina
   omhoog of omlaag zodra je vinger een beetje schuin gaat. */
.gal-spoor{
  display:flex; height:100%;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  overscroll-behavior-x:contain; touch-action:pan-x;
  scrollbar-width:none; -ms-overflow-style:none;
}
.gal-spoor::-webkit-scrollbar{ display:none; }
.gal-spoor > img{
  flex:0 0 100%; width:100%; height:100%; object-fit:cover;
  scroll-snap-align:start;
  position:static !important; opacity:1 !important; user-select:none;
  -webkit-user-drag:none;
}
@media (prefers-reduced-motion:reduce){ .gal-spoor{ scroll-behavior:auto; } }

/* de teller en de pijlen liggen erboven */
.gal-tel{ z-index:2; }
.gal-pijl{ z-index:2; }


/* ======================================================================
   DE FEITENSTROOK, OPZET 6
   Teken in een rond vlakje, waarde ernaast, label erboven. Zes gegevens, en op een telefoon
   drie naast elkaar doordat het teken daar boven de tekst gaat staan.
   ====================================================================== */
.feiten{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px 22px;
  margin:0; padding:0; background:none; border:0; border-radius:0;
}
.feiten div{
  display:grid; grid-template-columns:42px minmax(0,1fr); align-items:center;
  column-gap:12px; row-gap:1px; padding:0; background:none; border:0; text-align:left;
}
.feiten svg{
  grid-row:1 / 3; width:42px; height:42px; padding:10px; border-radius:0;
  background:#EFEEFB; color:#1800AD; box-sizing:border-box;
}
.feiten dt{
  order:0; font-size:0.6875rem; font-weight:600; letter-spacing:0.06em;
  text-transform:uppercase; color:#6E6B80;
}
.feiten dd{ order:0; margin:0; font-size:1rem; font-weight:700; color:#12141A;
  letter-spacing:-0.012em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

@media (max-width:719px){
  /* Drie naast elkaar op een telefoon: het teken boven de tekst in plaats van ernaast, en
     alles gecentreerd. Zo kost de hele strook twee regels van tachtig pixels. */
  .feiten{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px 8px; }
  .feiten div{
    grid-template-columns:1fr; justify-items:center; text-align:center; row-gap:3px;
  }
  .feiten svg{ grid-row:auto; width:34px; height:34px; padding:8px; }
  .feiten dt{ font-size:0.625rem; letter-spacing:0.05em; }
  .feiten dd{ font-size:0.875rem; }
}


/* De strook met kleine foto's onder de grote: iets meer lucht ertussen, en de foto waar je
   naar kijkt duidelijk aangezet in plaats van een dun randje. */
@media (max-width:999px){
  .gal--links{ gap:10px; }
  .gal-strip button{ border-radius:0; }
}
.gal-strip button[data-actief]{
  outline:2px solid #1800AD; outline-offset:1px; border-color:#1800AD;
}
.gal-strip button{ opacity:.72; transition:opacity .14s ease; }
.gal-strip button[data-actief]{ opacity:1; }
@media (hover:hover){ .gal-strip button:hover{ opacity:1; } }


/* --- de feitenstrook op een telefoon: tekst binnen zijn vakje ---------------
   "Handgeschakeld" en "95 pk" liepen aan weerszijden buiten hun kolom. De waarde stond op
   nowrap, en drie kolommen van honderd pixels zijn te smal voor een woord van veertien
   letters. Nu mag hij afbreken, en de vakjes mogen kleiner worden dan hun inhoud. */
@media (max-width:719px){
  .feiten div{ min-width:0; }
  .feiten dd{
    white-space:normal; overflow-wrap:anywhere; text-overflow:clip;
    font-size:0.8125rem; line-height:1.25;
  }
  .feiten dt{ white-space:normal; }
}


/* --- de strook kleine foto's lijnt uit met de grote foto -------------------
   Hij had een negatieve marge zodat hij tot de schermrand doorliep, en lag daardoor links
   tegen de rand aan terwijl de foto erboven netjes binnen de kolom staat. Nu precies zo
   breed als de foto: dezelfde linker- en rechterlijn.

   Passen ze alle twintig niet, dan schuift hij binnen die breedte. Zijn het er weinig, dan
   staan ze in het midden onder de foto. */
@media (max-width:999px){
  .gal--links .gal-strip{
    margin-inline:0; padding-inline:0; justify-content:flex-start;
    scroll-padding-inline:0;
  }
  /* weinig foto's: dan zijn ze samen smaller dan de strook en horen ze gecentreerd */
  .gal--links .gal-strip:not(:has(> :nth-child(6))){ justify-content:center; }
}


/* ======================================================================
   ADVERTENTIEPAGINA: DE LAATSTE PUNTEN
   ====================================================================== */

/* --- de schuifknop helemaal blauw, geen gele of oranje rand ----------------
   accent-color tintte de knop, en de browser tekende er tijdens het slepen zijn eigen ring
   omheen. Allebei weg. Dit blok staat achteraan en heeft daarmee het laatste woord. */
.rek-schuif{ accent-color:initial; outline:none; }
.rek-schuif:focus{ outline:none; }
.rek-schuif:focus-visible{ outline:2px solid #1800AD; outline-offset:4px; }
.rek-schuif::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  background:#1800AD; border:2px solid #FFFFFF;
  box-shadow:0 0 0 1.5px #1800AD, 0 2px 6px rgba(18,20,26,.22);
}
.rek-schuif::-moz-range-thumb{
  background:#1800AD; border:2px solid #FFFFFF;
  box-shadow:0 0 0 1.5px #1800AD, 0 2px 6px rgba(18,20,26,.22);
}
.rek-schuif:focus::-webkit-slider-thumb,
.rek-schuif:active::-webkit-slider-thumb{
  box-shadow:0 0 0 1.5px #1800AD, 0 0 0 5px rgba(24,0,173,.20);
}
.rek-schuif:focus::-moz-range-thumb,
.rek-schuif:active::-moz-range-thumb{
  box-shadow:0 0 0 1.5px #1800AD, 0 0 0 5px rgba(24,0,173,.20);
}

/* --- de uitleg achter een informatietekentje -------------------------------
   Stond als grijze regel onder elk veld. Nu een klein rondje met een i naast het label; de
   tekst komt tevoorschijn bij aanwijzen of aantikken. Twee regels minder in de kaart. */
.rek-label{ display:inline-flex; align-items:center; gap:6px; }
.rek-i{
  position:relative; display:inline-grid; place-items:center; width:16px; height:16px;
  color:#9C9AAF; cursor:help; -webkit-tap-highlight-color:transparent;
}
.rek-i svg{ width:15px; height:15px; }
@media (hover:hover){ .rek-i:hover{ color:#1800AD; } }
.rek-i:focus-visible{ outline:2px solid #1800AD; outline-offset:2px; border-radius:0; }
.rek-tip{
  position:absolute; left:-6px; top:calc(100% + 9px); z-index:6; width:212px;
  padding:10px 12px; border-radius:0; background:#12141A; color:#FFFFFF;
  font-size:0.75rem; font-weight:400; line-height:1.45; letter-spacing:0; text-transform:none;
  box-shadow:0 10px 24px -10px rgba(18,20,26,.5); pointer-events:none;
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity .14s ease, transform .14s ease, visibility .14s;
}
.rek-tip::before{
  content:""; position:absolute; left:11px; top:-4px; width:9px; height:9px;
  background:#12141A; transform:rotate(45deg); border-radius:0;
}
.rek-tip b{ color:#FFFFFF; font-weight:700; }
.rek-i:hover .rek-tip, .rek-i:focus .rek-tip, .rek-i:focus-within .rek-tip{
  opacity:1; visibility:visible; transform:translateY(0);
}

/* --- ruimte tussen de foto en de feitenstrook ------------------------------ */
.vt-beeld .feiten{ margin-top:22px; padding-top:22px; border-top:1px solid #EFEEF6; }
@media (max-width:719px){ .vt-beeld .feiten{ margin-top:18px; padding-top:18px; } }

/* --- meer van dezelfde: op een telefoon binnen de kolom, niet tegen de rand -
   De strook had een negatieve marge zodat hij tot de schermrand liep. Daardoor lag de eerste
   kaart links tegen de rand terwijl de kop erboven ingesprongen staat. Nu lijnt de eerste
   kaart uit met de kop. */
@media (max-width:999px){
  .verg .rooster{ margin-inline:0; padding-inline:0; scroll-padding-inline:0; }
}


/* ======================================================================
   DE REKENKAART PAST OP HET SCHERM
   Was 832 pixels hoog op een scherm van 900 en begon op 246: de knop stond onder de vouw.
   ====================================================================== */
@media (min-width:1000px){
  .rek{ padding:16px 16px 14px; }
  .rek-kop{
    display:grid; grid-template-columns:1fr auto; align-items:baseline; column-gap:10px;
    padding-bottom:12px; margin-bottom:12px;
  }
  .rek-kop > span{ font-size:0.8125rem; }
  .rek-kop > b{ font-size:1.25rem; }
  .rek-btw{ grid-column:1 / -1; margin-top:4px; font-size:0.6875rem; line-height:1.4; }
  .rek-veld{ margin-bottom:12px; }
  .rek-label{ margin-bottom:6px; font-size:0.75rem; }
  .rek-jaren button{ min-height:36px; font-size:0.8125rem; }
  /* aanbetaling en slottermijn naast elkaar: twee velden van dezelfde soort, en het scheelt
     honderd pixels hoogte */
  .rek-twee{ display:grid; grid-template-columns:1fr 1fr; column-gap:12px; }
  .rek-twee .rek-veld{ min-width:0; }
  .rek-invoer{ min-height:40px; padding:0 10px; }
  .rek-schuif{ height:18px; margin-top:6px; }
  .rek-schuif::-webkit-slider-thumb{ width:18px; height:18px; margin-top:-7px; }
  .rek-schuif::-moz-range-thumb{ width:18px; height:18px; }
  .rek-uit{ padding:12px 0 10px; margin-top:0; }
  .rek-bedrag b{ font-size:1.875rem; }
  .rek-knop{ min-height:46px; }
  .gerust{ margin-top:10px; gap:5px; }
  .gerust li{ font-size:0.75rem; }
  .rek-ct{ margin-top:12px; padding-top:12px; }
  .rek-ct-knop{ min-height:36px; font-size:0.75rem; }
  .rek-rente{ margin:10px 0 0; font-size:0.6875rem; line-height:1.4; }
  /* de tip van het i-tekentje in de smalle kolom niet buiten de kaart laten vallen */
  .rek-twee .rek-veld:last-child .rek-tip{ left:auto; right:-6px; }
  .rek-twee .rek-veld:last-child .rek-tip::before{ left:auto; right:11px; }
}

/* ======================================================================
   DE MERKLANDINGSPAGINA'S  /financial-lease/  en  /financial-lease/audi/
   Scherpe hoeken, tabelcijfers voor elk bedrag en elk aantal, en geen kaartjes met randen
   waar een haarlijn genoeg is. Alles container-onafhankelijk: dit staat op een eigen pagina
   en niet in een vergelijkvenster, dus gewone schermvragen.
   ====================================================================== */
.ml{ display:block; }
.ml-in{ width:min(100% - 2.5rem,1180px); margin-inline:auto; }

.ml-top{ background:#F1EFFC; border-bottom:1px solid #E3DCF6; padding:34px 0 38px; }
.ml h1{ margin:0; font-size:clamp(1.75rem,1.2rem + 2.4vw,2.625rem); font-weight:700;
  letter-spacing:-.028em; color:#1800AD; line-height:1.1; }
.ml-lead{ margin:12px 0 0; max-width:62ch; font-size:1.0625rem; line-height:1.55;
  color:#43405A; }
.ml-lead b{ color:#12141A; font-variant-numeric:tabular-nums; }

.ml-cijfers{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px;
  margin:24px 0 0; padding:0; list-style:none; background:#E3DCF6; border:1px solid #E3DCF6; }
.ml-cijfers li{ display:grid; gap:2px; padding:14px 16px; background:#fff; }
.ml-c-kop{ font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; color:#8D8AA3;
  font-weight:700; }
.ml-cijfers b{ font-size:1.375rem; font-weight:700; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; }
.ml-c-bij{ font-size:.8125rem; color:#6E6B80; font-variant-numeric:tabular-nums; }

.ml-knoppen{ display:flex; gap:10px; flex-wrap:wrap; margin-top:22px; }
.ml-knop{ display:inline-flex; align-items:center; justify-content:center; min-height:48px;
  padding:0 20px; font-weight:700; font-size:.9375rem; text-decoration:none;
  border:1px solid #C9C3E8; color:#1800AD; background:#fff;
  transition:background-color .14s ease,border-color .14s ease; }
.ml-knop:hover{ border-color:#3416C9; background:#F7F6FE; }
.ml-knop--vol{ background:#1800AD; color:#fff; border-color:#1800AD; }
.ml-knop--vol:hover{ background:#3416C9; border-color:#3416C9; }
.ml-knop:focus-visible{ outline:2px solid #3416C9; outline-offset:2px; }

.ml-belofte{ display:flex; gap:10px 26px; flex-wrap:wrap; margin:20px 0 0; padding:0;
  list-style:none; }
.ml-belofte li{ position:relative; padding-left:24px; font-size:.9375rem; color:#43405A; }
.ml-belofte li::before{ content:""; position:absolute; left:2px; top:.42em; width:11px;
  height:6px; border-left:2px solid #1800AD; border-bottom:2px solid #1800AD;
  transform:rotate(-45deg); }

.ml-band{ padding:38px 0 42px; background:#FAFAFD; border-bottom:1px solid #EDECF5; }
.ml-band--wit{ background:#fff; }
.ml h2{ margin:0 0 4px; font-size:1.5rem; font-weight:700; letter-spacing:-.024em;
  color:#12141A; }
.ml h2 + .ml-trap,.ml h2 + .ml-modellen,.ml h2 + .ml-rooster,.ml h2 + .ml-verdeling,
.ml h2 + .ml-vragen,.ml h2 + .ml-andere,.ml h2 + .ml-tabel,.ml h2 + .ml-stappen{
  margin-top:18px; }
.ml-onder{ margin:6px 0 0; color:#6E6B80; font-size:.9375rem; max-width:70ch; }
.ml-band > .ml-in > h2:not(:first-child){ margin-top:34px; }

/* --- de prijstrap --------------------------------------------------------- */
.ml-trap{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:1px;
  background:#E3DCF6; border:1px solid #E3DCF6; }
.ml-trap a{ display:grid; gap:3px; padding:16px; background:#fff; text-decoration:none;
  color:inherit; transition:background-color .13s ease; }
.ml-trap b{ font-size:1.0625rem; font-variant-numeric:tabular-nums; }
.ml-trap span{ font-size:.8125rem; color:#6E6B80; font-variant-numeric:tabular-nums; }
.ml-trap a:hover{ background:#F7F6FE; }
.ml-trap a:hover b{ color:#1800AD; }
.ml-trap a:focus-visible{ outline:2px solid #3416C9; outline-offset:-2px; }

/* --- de modellen en de andere merken -------------------------------------- */
.ml-modellen,.ml-andere{ display:grid; gap:1px; background:#E3DCF6; border:1px solid #E3DCF6; }
.ml-modellen{ grid-template-columns:repeat(5,minmax(0,1fr)); }
.ml-modellen--merk{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.ml-andere{ grid-template-columns:repeat(5,minmax(0,1fr)); }
.ml-modellen a,.ml-andere a{ display:grid; align-content:start; gap:3px; padding:14px 15px;
  background:#fff; text-decoration:none; color:inherit; min-height:88px;
  transition:background-color .13s ease; }
.ml-modellen b,.ml-andere a{ font-size:.9375rem; }
.ml-modellen b{ font-weight:700; }
.ml-andere a{ align-content:center; min-height:64px; font-weight:600; }
.ml-modellen span,.ml-andere b{ font-size:.8125rem; color:#6E6B80; font-weight:400;
  font-variant-numeric:tabular-nums; }
.ml-m-p{ color:#1800AD !important; font-weight:700 !important; }
.ml-modellen a:hover,.ml-andere a:hover{ background:#F7F6FE; }
.ml-modellen a:focus-visible,.ml-andere a:focus-visible{ outline:2px solid #3416C9;
  outline-offset:-2px; }

/* --- de acht auto's -------------------------------------------------------- */
.ml-rooster{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.ml-meer{ display:inline-flex; align-items:center; min-height:44px; margin-top:18px;
  font-weight:600; font-size:.9375rem; color:#3416C9; text-decoration:none; }
.ml-meer:hover{ text-decoration:underline; text-underline-offset:4px; }

/* --- de verdeling ---------------------------------------------------------- */
.ml-verdeling{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px;
  background:#E3DCF6; border:1px solid #E3DCF6; }
.ml-v{ padding:16px 17px 18px; background:#fff; }
.ml-v h3{ margin:0 0 10px; font-size:.75rem; letter-spacing:.07em; text-transform:uppercase;
  color:#8D8AA3; font-weight:700; }
.ml-v ul{ margin:0; padding:0; list-style:none; display:grid; gap:7px; }
.ml-v li{ display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  font-size:.875rem; }
.ml-v li span{ color:#43405A; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ml-v li b{ font-variant-numeric:tabular-nums; white-space:nowrap; }

/* --- de vergelijktabel op de hoofdpagina ----------------------------------- */
.ml-tabel{ border:1px solid #E3DCF6; }
.ml-rij{ display:grid; grid-template-columns:1fr 1.2fr 1.2fr; gap:1px; background:#E3DCF6; }
.ml-rij span{ padding:12px 15px; background:#fff; font-size:.9375rem; }
.ml-rij--kop span{ background:#F1EFFC; font-weight:700; font-size:.8125rem;
  letter-spacing:.05em; text-transform:uppercase; color:#1800AD; }
.ml-rij [role="rowheader"]{ font-weight:600; }

/* --- de stappen ------------------------------------------------------------ */
.ml-stappen{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px;
  margin:0; padding:0; list-style:none; counter-reset:stap; }
.ml-stappen li{ counter-increment:stap; padding:16px 17px 18px; background:#fff;
  border:1px solid #E3DCF6; }
.ml-stappen li::before{ content:counter(stap); display:grid; place-items:center; width:28px;
  height:28px; margin-bottom:11px; background:#1800AD; color:#fff; font-size:.8125rem;
  font-weight:700; border-radius:999px; }
.ml-stappen b{ display:block; font-size:1rem; }
.ml-stappen span{ display:block; margin-top:3px; font-size:.875rem; color:#6E6B80; }

/* --- de vragen ------------------------------------------------------------- */
.ml-vragen{ border-top:1px solid #E3DCF6; }
.ml-vraag{ border-bottom:1px solid #E3DCF6; }
.ml-vraag > summary{ list-style:none; display:flex; align-items:center;
  justify-content:space-between; gap:16px; min-height:56px; cursor:pointer;
  -webkit-tap-highlight-color:transparent; }
.ml-vraag > summary::-webkit-details-marker{ display:none; }
.ml-vraag > summary::after{ content:""; flex:none; width:10px; height:10px;
  border-right:2px solid #1800AD; border-bottom:2px solid #1800AD;
  transform:translateY(-3px) rotate(45deg); transition:transform .18s ease; }
.ml-vraag[open] > summary::after{ transform:translateY(2px) rotate(-135deg); }
.ml-vraag > summary:focus-visible{ outline:2px solid #3416C9; outline-offset:-2px; }
.ml-vraag h3{ margin:0; font-size:1rem; font-weight:600; letter-spacing:-.012em; }
.ml-vraag p{ margin:0 0 16px; max-width:76ch; color:#43405A; line-height:1.6; }

.ml-terug{ margin:22px 0 0; font-size:.9375rem; }
.ml-terug a{ display:inline-flex; align-items:center; min-height:44px; color:#3416C9;
  font-weight:600; }

/* ---------------------------------------------------------------- telefoon */
@media (max-width:1000px){
  .ml-modellen,.ml-andere,.ml-trap{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .ml-modellen--merk{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .ml-rooster,.ml-verdeling,.ml-stappen{ grid-template-columns:1fr 1fr; }
  .ml-cijfers{ grid-template-columns:1fr 1fr; }
}
@media (max-width:720px){
  .ml-in{ width:calc(100% - 2rem); }
  .ml-top{ padding:26px 0 30px; }
  .ml-band{ padding:28px 0 32px; }
  .ml h2{ font-size:1.25rem; }
  .ml-lead{ font-size:1rem; }
  .ml-modellen,.ml-andere,.ml-trap,.ml-modellen--merk{ grid-template-columns:1fr 1fr; }
  .ml-rooster{ grid-template-columns:1fr 1fr; gap:10px; }
  .ml-verdeling,.ml-stappen{ grid-template-columns:1fr; }
  .ml-knoppen{ display:grid; grid-template-columns:1fr; }
  .ml-belofte{ display:grid; gap:8px; }
  /* een tabel van drie kolommen past hier niet: per regel de twee antwoorden onder elkaar */
  .ml-rij{ grid-template-columns:1fr; }
  .ml-rij--kop{ display:none; }
  .ml-rij [role="rowheader"]{ background:#F1EFFC; font-weight:700; }
  .ml-rij [role="cell"]:nth-of-type(2)::before{ content:"Financial lease: "; font-weight:700;
    color:#1800AD; }
  .ml-rij [role="cell"]:nth-of-type(3)::before{ content:"Operational lease: "; font-weight:700;
    color:#6E6B80; }
  .ml-vraag > summary{ min-height:60px; }
}
/* Pas onder 340. Op een telefoon van 375 kostte een kolom 7.359 pixels aan pagina, en met
   twee kolommen is dat de helft; twee kaarten van 165 pixels breed passen daar prima. */
@media (max-width:340px){
  .ml-modellen,.ml-andere,.ml-trap,.ml-modellen--merk,.ml-rooster{ grid-template-columns:1fr; }
  .ml-cijfers{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
  .ml *{ transition-duration:.01ms !important; }
}

/* --- de cijferregel en de kleine koppen -----------------------------------
   Het verdelingsblok was vier vakken met percentages. Dezelfde cijfers passen op een regel,
   en dan staat er niets tussen de bezoeker en de auto's. */
.ml-feitregel{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 10px;
  margin:20px 0 0; padding-top:16px; border-top:1px solid #E3DCF6;
  font-size:.8125rem; color:#6E6B80; font-variant-numeric:tabular-nums; }
.ml-f-kop{ font-weight:700; color:#12141A; text-transform:none; }
.ml-feitregel > span + span::before{ content:"\00b7"; padding-right:10px; opacity:.5; }
.ml-h-klein{ font-size:1.0625rem !important; letter-spacing:-.014em !important; }
.ml-band > .ml-in > .ml-h-klein:not(:first-child){ margin-top:26px; }
.ml-h-klein + .ml-trap,.ml-h-klein + .ml-modellen{ margin-top:12px !important; }

/* --- de kop van de merkpagina korter op een telefoon ----------------------
   De auto's begonnen op 864 pixels, dus een heel scherm scrollen voordat je ziet waar je
   voor kwam. De drie beloftes worden een doorlopende regel in plaats van drie regels, de
   vier cijfers krijgen minder lucht, en de twee knoppen komen naast elkaar. Samen scheelt
   dat ruim tweehonderd pixels zonder dat er iets weg is. */
@media (max-width:720px){
  .ml-top{ padding:20px 0 24px; }
  .ml-lead{ margin-top:8px; font-size:.9375rem; }
  .ml-cijfers{ margin-top:16px; }
  .ml-cijfers li{ padding:10px 12px; }
  .ml-cijfers b{ font-size:1.1875rem; }
  .ml-c-kop{ font-size:.6875rem; }
  .ml-knoppen{ display:flex; gap:8px; margin-top:16px; }
  .ml-knoppen .ml-knop{ flex:1 1 0; min-width:0; padding:0 10px; font-size:.875rem;
    text-align:center; line-height:1.2; }
  .ml-belofte{ display:flex; gap:4px 14px; margin-top:14px; font-size:.8125rem; }
  .ml-belofte li{ padding-left:19px; font-size:.8125rem; }
  .ml-belofte li::before{ width:9px; height:5px; }
  .ml-feitregel{ margin-top:16px; padding-top:14px; }
}

/* --- de koptekens op een telefoon zwart ----------------------------------
   Telefoon, WhatsApp en het menustreepje stonden op het diepe blauw. Naast het logo, dat
   zelf al blauw en zwart is, werd dat een blauwe rij waarin niets meer opvalt. Zwart laat
   het logo het enige blauwe ding in de kop zijn. Alleen op een telefoon: op een breed
   scherm staan deze twee knoppen er helemaal niet en is het menu een gewone balk. */
@media (max-width:1079px){
  .kop-snel{ color:#12141A; }
  .kop-menu-strepen span{ background:#12141A; }
}


/* --- de schuine pijl ------------------------------------------------------
   Schuin naar rechtsboven en niet recht naar rechts: dit brengt je naar een andere pagina met
   een eigen gereedschap, en niet naar de volgende stap in dezelfde reeks. */
.pijl-schuin{ flex:none; margin-left:2px; }

/* --- het portret in de kopknop -------------------------------------------
   Rond, als een van de weinige ronde vormen op de site. Dat is dezelfde uitzondering als bij
   de twee gezichten in het overlegblok: een gezicht in een vierkant leest als een pasfoto. */
.kop-cta-foto{ width:26px; height:26px; border-radius:999px; object-fit:cover;
  margin-left:-5px; flex:none; }


/* ======================================================================
   DE WHATSAPP-KNOP: een ronde groene bel
   ====================================================================== */
.wa-houder{ --wa:#1DA851; --wa-op:#25D366; }

/* Rond op elk formaat, met een staartje rechtsonder zodat het een bel wordt en geen knop.
   #1DA851 en niet #25D366: dat laatste haalt als teken op wit maar 1,98 op 1 en de grens is
   3. Bij aanwijzen komt de echte merkkleur alsnog tevoorschijn. */
.wa-knop{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:58px; height:58px; min-height:58px; padding:0;
  border:0; border-radius:999px; cursor:pointer;
  background:var(--wa); color:#FFFFFF;
  box-shadow:0 10px 26px -8px rgba(18,20,26,.45), 0 2px 6px rgba(18,20,26,.18);
  transition:background .16s ease, transform .16s ease, box-shadow .16s ease;
}
/* Het staartje. Een driehoekje dat met zijn bovenkant in de bel valt en met zijn punt
   rechtsonder naar buiten steekt, precies richting de hoek van het scherm. */
.wa-knop::after{
  content:""; position:absolute; right:3px; bottom:1px;
  width:18px; height:18px; background:var(--wa);
  clip-path:polygon(0 0, 100% 0, 100% 100%);
  transition:background .16s ease;
}
.wa-knop:hover{ background:var(--wa-op); transform:translateY(-1px);
  box-shadow:0 14px 30px -8px rgba(18,20,26,.5), 0 2px 6px rgba(18,20,26,.2); }
.wa-knop:hover::after{ background:var(--wa-op); }
.wa-knop:active{ transform:translateY(1px); }
.wa-knop:focus-visible{ outline:3px solid #12141A; outline-offset:3px; }
.wa-knop svg{ width:27px; height:27px; }

/* Het woord blijft in de pagina staan, alleen niet in beeld. Met display:none verdween het
   ook uit de voorleesvolgorde en had de knop geen naam meer. */
.wa-knop span{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; display:block !important;
}
@media (max-width:767px){
  .wa-knop{ width:56px; height:56px; min-height:56px; }
  .wa-knop svg{ width:26px; height:26px; }
}
.wa-houder[data-open] .wa-knop{ width:52px; height:52px; min-height:52px; padding:0; }
.wa-houder[data-open] .wa-knop::after{ display:none; }

/* Het WhatsApp-teken in de kop blijft zwart, net als de belknop en het menustreepje. Groen
   is voorbehouden aan de zwevende bel rechtsonder; drie zwarte tekens naast elkaar en een
   groene bel apart leest rustiger dan een groen teken tussen twee zwarte. */


/* --- de knoppen op de schuiven: rond en helemaal blauw --------------------
   Waren vierkant met een witte rand en een blauwe ring eromheen, wat leest als een blokje in
   een doosje. Dit blok staat achteraan en heeft daarmee het laatste woord over de drie
   eerdere blokken die deze knop ook aanraken. Webkit en mozilla nooit in een selectorlijst
   samen: een pseudo-element dat de browser niet kent maakt de hele regel ongeldig. */
.rek-schuif::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:22px; height:22px; margin-top:-9px;
  border-radius:999px; background:#1800AD; border:0;
  box-shadow:0 2px 6px rgba(18,20,26,.28);
}
.rek-schuif::-moz-range-thumb{
  width:22px; height:22px; border-radius:999px; background:#1800AD; border:0;
  box-shadow:0 2px 6px rgba(18,20,26,.28);
}
.rek-schuif:focus::-webkit-slider-thumb,
.rek-schuif:active::-webkit-slider-thumb{ box-shadow:0 0 0 5px rgba(24,0,173,.20); }
.rek-schuif:focus::-moz-range-thumb,
.rek-schuif:active::-moz-range-thumb{ box-shadow:0 0 0 5px rgba(24,0,173,.20); }
.rek-schuif::-webkit-slider-runnable-track{ border-radius:999px; }
.rek-schuif::-moz-range-track{ border-radius:999px; }

/* --- de tekens in de feitenstrook rond ------------------------------------ */
.feiten svg{ border-radius:999px; }


/* --- de knop op de schuif wint nu ook echt --------------------------------
   De regels hierboven verloren van input[type=range]::-webkit-slider-thumb met een gele rand
   van vier pixels. Dat is een element plus een attribuut en dus zwaarder dan een enkele
   klasse; de knop bleef daardoor vierkant met een oranje rand. Met de klasse EN het attribuut
   in de selector wint deze ongeacht de volgorde. */
input[type=range].rek-schuif::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:22px; height:22px; margin-top:-9px;
  border-radius:999px; background:#1800AD; border:0;
  box-shadow:0 2px 6px rgba(18,20,26,.28);
}
input[type=range].rek-schuif::-moz-range-thumb{
  width:22px; height:22px; border-radius:999px; background:#1800AD; border:0;
  box-shadow:0 2px 6px rgba(18,20,26,.28);
}
input[type=range].rek-schuif:focus::-webkit-slider-thumb,
input[type=range].rek-schuif:active::-webkit-slider-thumb{
  box-shadow:0 0 0 5px rgba(24,0,173,.20);
}
input[type=range].rek-schuif:focus::-moz-range-thumb,
input[type=range].rek-schuif:active::-moz-range-thumb{
  box-shadow:0 0 0 5px rgba(24,0,173,.20);
}

/* --- de zes looptijdknoppen op een telefoon in een rij ---------------------
   Stonden in twee rijen van drie. Zes naast elkaar past: op 375 pixels blijft er per knop
   tweeenvijftig over en dat is genoeg voor twee cijfers, terwijl de hoogte van vierenveertig
   blijft staan. Zo zie je de hele reeks in een oogopslag en is de sprong van 12 naar 72 een
   beweging in plaats van een regelwissel. */
@media (max-width:719px){
  .rek-jaren{ grid-template-columns:repeat(6,1fr); gap:3px; }
  .rek-jaren button{ padding-left:0; padding-right:0; font-size:0.8125rem; }
}