/*__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:1180px;
  --radius:10px;
  --radius-l:14px;
  --radius-xl:20px;

  --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:2px;
}

.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:100px;
  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:var(--radius);
  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(--violet); 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.5rem; 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:56px; 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:8px; }
.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:8px; 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:var(--radius-l);
  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:50%; 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:var(--radius); 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:8px;
  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:var(--radius); 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.05em; 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:var(--radius-l);
  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:10px 10px 0 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 var(--radius-xl) var(--radius-xl) var(--radius-xl);
  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:var(--radius);
  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:var(--radius-l);
  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:var(--radius-l);
  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:var(--radius-xl);
  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:10px;
  padding:0.55rem 1rem 0.55rem 0.55rem; }
.rk-plaat-band{ width:18px; align-self:stretch; border-radius:5px; 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:var(--radius-l); }
/* 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:8px; }




/* ---------- 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:10px; }
@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:999px; 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:10px; 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:999px; 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:var(--radius-l); padding:1rem 1.15rem; }
.kenmerk-icoon{ flex:none; display:grid; place-items:center; width:38px; height:38px;
  border-radius:9px; 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:var(--radius-l); 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:10px; 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:var(--radius-l);
  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:50%;
  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:var(--radius-l);
  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:var(--radius-xl); 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:50%;
  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:var(--radius-xl); padding:clamp(1.35rem,2.4vw,1.9rem); }
.calc-uit{ background:var(--geeltint); border-radius:var(--radius-l); 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:3px; background:#E5E4EC; }
input[type=range]::-moz-range-track{ height:6px; border-radius:3px; background:#E5E4EC; }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:24px; height:24px; border-radius:50%; background:var(--diep); border:4px solid var(--geel); margin-top:-9px; }
input[type=range]::-moz-range-thumb{ width:24px; height:24px; border-radius:50%; 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:8px;
  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:50%; 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:var(--radius-l);
  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:var(--radius-l); 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{ overflow-x:auto; border:1.5px solid var(--lijn); border-radius:var(--radius-l); background:var(--wit); }
table{ border-collapse:collapse; width:100%; min-width:600px; }
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:100px; 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:var(--radius-xl); 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 0 8px 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:4px; }

/* --- 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:10px; cursor:pointer; }
@media (min-width:1000px){ .fk-open{ display:none; } }
.fk{ background:#FFFFFF; border:1px solid #E2E1EA; border-radius:14px; 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:10px;
    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:999px;
  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:8px; }
.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:6px; }
@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:3px; }
.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:8px; 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:8px; -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:14px; 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:14px; }
.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:10px; 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:14px;
  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:999px; 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:999px;
  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:8px; 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:14px;
  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:12px; }
.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:6px;
  padding:6px 10px; }

.inklap{ border:1px solid #E2E1EA; border-radius:12px; 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:16px; 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:50%; 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:12px;
  font-size:0.875rem; color:#5E5A73; line-height:1.6; }

.schuif{ -webkit-appearance:none; appearance:none; width:100%; height:8px; border-radius:999px;
  background:#D6D3F2; outline:0; margin:12px 0 0; }
.schuif::-webkit-slider-thumb{ -webkit-appearance:none; width:28px; height:28px;
  border-radius:50%; 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:50%; 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:999px; 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:16px; }
.portret{ position:relative; width:52px; height:52px; flex:none; }
.portret .vlak{ width:52px; height:52px; border-radius:50%; 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:999px; 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:50%; 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:12px;
    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 0 8px 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:16px 16px 0 0; padding:20px; }
@media (min-width:720px){ .mod-kaart{ border-radius:16px; 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:999px;
  cursor:pointer; line-height:1; }
.mod-auto{ display:flex; align-items:center; gap:11px; margin:14px 0; padding:11px;
  background:#EFEEFB; border-radius:10px; }
.mod-auto img{ width:60px; height:45px; object-fit:cover; border-radius:6px; 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:9px; }
.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:9px; 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:10px; 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:14px; }
.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; }
@media (min-width:900px){ .contact-lijf{ grid-template-columns:1fr 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:12px; 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:14px; 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:12px; 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:2px;
  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:999px; 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:14px;
  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:8px; 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:8px; 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:9px; 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:9px; 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:9px; 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:12px; 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:18px 0 0 18px; 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:999px; 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:12px;
    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:12px; 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;
}