/*__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:#F2F4F7;      /* koel lichtgrijs */
  --geeltint:#FEF7DC;  /* zeer licht kentekengeel */
  --nacht:#12141A;     /* alleen nog voor tekst en de auto's */
  --diep:#0E2A63;      /* donkere banden en footer */
  --diep-2:#17397F;    /* kaarten op donker */
  --diep-3:#2E5296;    /* lijnen op donker */

  --inkt:#12141A;
  --inkt-2:#4A505C;
  --grijs:#6B7280;
  --lijn:#E4E7EC;
  --lijn-donker:#3A3170;

  --geel:#F7D117;
  --geel-hover:#EAC510;
  --geel-diep:#7A6200;
  --violet:#123A8A;       /* kobalt: de dragende kleur */
  --violet-licht:#A8BEE4; /* het violet op donkere banden */
  --violet-was:#E9EFFA;   /* lichte kobalttint als bandkleur */
  --violet-licht-2:#C7D6EE;   /* een tint dieper, voor tabs die niet gekozen zijn */
  --eublauw:#003399;   /* uitsluitend in de kentekenplaat */

  --wrap:1400px;
  --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:#B7C6E2; }
.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:#93A9CE; }

.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; }
.kop--klein{ background:var(--wit);
  box-shadow:0 1px 0 var(--lijn), 0 10px 28px -24px rgba(18,20,26,.35); }
.kop--klein .wrap{ padding-block:0.5rem; }
.kop--klein .merk svg{ width:36px; height:41px; }
.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); }
.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:#C6D5EB;
  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:#93A9CE; 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:#C6D5EB; 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:#6B7280; }
@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:#C6D5EB; }
.balk-score b{ font-weight:600; color:var(--wit); }
.balk-score .sterren-leeg{ color:rgba(255,255,255,.32); }
.balk-score .sterren-vol{ color:var(--geel); }
/* het nummer staat helemaal rechts, de score ervoor */
.topbalk-links{ margin-left:auto; gap:0.4rem 1.1rem; }
@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; }
@media (max-width:1399px){ .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:#E4E7EC; }
input[type=range]::-moz-range-track{ height:6px; border-radius:3px; background:#E4E7EC; }
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:#B7C6E2; 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:#E4E7EC; 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:#B7C6E2; 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:#93A9CE; 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:#93A9CE;
}
.voet-onder a{ color:#93A9CE; }
.fotobron{ font-size:var(--t-xs); color:#93A9CE; 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:#123A8A; 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 #123A8A; outline-offset:2px;
  border-radius:4px; }

/* --- broodkruimel ------------------------------------------------------- */
.kruimel{ padding:14px 0 0; font-size:0.8125rem; color:#6B7280; }
.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:#C0C6D0; }
.kruimel a{ color:#4A505C; text-decoration:none; }
.kruimel a:hover{ color:#0E2A63; text-decoration:underline; }
.kruimel [aria-current]{ color:#0E2A63; font-weight:500; }
@media (max-width:719px){ .kruimel .kruimel-diep{ display:none; } }

/* --- aanbod: kop en raster ---------------------------------------------- */
.ab{ background:#EEF3FB; padding:20px 0 18px; border-bottom:1px solid #E1E4EA; }
.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:#0E2A63; margin:0; }
.ab-tel{ font-size:0.9375rem; color:#4A505C; font-variant-numeric:tabular-nums; }
.ab-tel b{ font-weight:600; color:#0E2A63; }
.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:#0E2A63; background:#FFFFFF;
  border:1px solid #D5D9E0; border-radius:10px; cursor:pointer; }
@media (min-width:1000px){ .fk-open{ display:none; } }
.fk{ background:#FFFFFF; border:1px solid #E1E4EA; 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:#F7D117; 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:#0E2A63; }
@media (min-width:1000px){ .fk-titel{ display:none; } }
.fk-actief{ display:flex; flex-wrap:wrap; gap:6px; padding:12px 0; border-bottom:1px solid #EEF1F5; }
.fk-actief:empty{ display:none; }
.chip{ display:inline-flex; align-items:center; gap:6px; font:inherit; font-size:0.8125rem;
  font-weight:500; color:#0E2A63; background:#EEF3FB; border:0; border-radius:999px;
  padding:6px 10px; cursor:pointer; }
.chip span{ font-size:1rem; line-height:1; color:#6B8ABF; }
@media (hover:hover){ .chip:hover{ background:#DCE7F8; } .chip:hover span{ color:#0E2A63; } }
.chip--leeg{ background:none; color:#6B7280; text-decoration:underline; padding:6px 4px; }

.fg{ border-bottom:1px solid #EEF1F5; }
.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 #9AA2AF; border-bottom:1.6px solid #9AA2AF;
  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:#6B7280; 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:#F7F9FC; border:1px solid #E1E4EA;
  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:#F7F9FC; } }
.fg-lijst input{ width:17px; height:17px; flex:none; accent-color:#123A8A; margin:0; }
.fg-lijst b{ margin-left:auto; font-size:0.8125rem; font-weight:400; color:#9AA2AF;
  font-variant-numeric:tabular-nums; }
.fg-leeg{ font-size:0.8125rem; color:#9AA2AF; padding:6px 4px; }
.fg-slot{ font-size:0.8125rem; color:#6B7280; 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:#CBD2DC 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:#CBD2DC; }

.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 #E1E4EA;
  border-radius:8px; font-variant-numeric:tabular-nums; }
.fp span{ color:#9AA2AF; 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 #E1E4EA; 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:#4A505C; }
.rk-tel b{ color:#0E2A63; font-weight:600; font-variant-numeric:tabular-nums; }
.rk-sorteer{ display:flex; align-items:center; gap:8px; font-size:0.875rem; color:#6B7280; }

.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 #E4E9F2;
  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:#B9C6DE; transform:translateY(-2px);
  box-shadow:0 10px 24px -14px rgba(16,24,40,.3); } }
.kaart-beeld{ aspect-ratio:4/3; background:#F2F4F7; 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:#0E2A63; 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:#6B7280; line-height:1.4; }
.kaart-feit{ font-size:0.8125rem; color:#8A93A3; 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 #EEF1F5; }
.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:#0E2A63; line-height:1.15; }
.kaart-pm span{ font-size:0.75rem; color:#8A93A3; }
.kaart-prijs{ text-align:right; }
.kaart-prijs b{ font-size:0.9375rem; font-weight:500; color:#4A505C; line-height:1.15; }
.kaart-prijs span{ font-size:0.75rem; color:#8A93A3; }

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

.meer{ display:block; width:100%; min-height:48px; margin-top:20px; font:inherit;
  font-weight:500; color:#0E2A63; background:#FFFFFF; border:1px solid #D5D9E0;
  border-radius:10px; cursor:pointer; }
@media (hover:hover){ .meer:hover{ background:#F7F9FC; border-color:#B9C6DE; } }

/* ==========================================================================
   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:#0E2A63;
  line-height:1.1; margin:0; text-wrap:balance; }
.vt-type{ font-size:1rem; color:#4A505C; 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:#123A8A; }
.vt-punten b{ font-weight:600; color:#0E2A63; 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:#F2F4F7; 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:#F2F4F7; cursor:pointer;
  transition:border-color .12s ease; }
.gal-strip button[data-actief]{ border-color:#0E2A63; }
.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:#E4E9F2; border:1px solid #E4E9F2; 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:#8A93A3; }
.feiten dt{ font-size:0.75rem; color:#8A93A3; 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:#0E2A63; margin:0 0 14px; }
.krijg{ display:grid; gap:10px; margin:0; padding:16px 18px; list-style:none;
  background:#EEF3FB; 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:#123A8A; }
.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 #EEF1F5; }
.spec dt{ font-size:0.9375rem; color:#6B7280; 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:#F2F4F7; border-radius:6px;
  padding:6px 10px; }

.inklap{ border:1px solid #E1E4EA; 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 #9AA2AF; border-bottom:1.6px solid #9AA2AF;
  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:#4A505C; 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:#9AA2AF; }

/* ==========================================================================
   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:#F5F8FD; border:1px solid #DCE5F3; border-radius:16px; padding:24px; }
@media (min-width:1000px){ .rek{ position:sticky; top:96px; } }

.rek-aanschaf{ padding-bottom:16px; border-bottom:1px solid #DCE5F3; 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:#5A6273; }
.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:#8A93A3; }
.rek-aanschaf .btw b{ font-weight:500; color:#5A6273; 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:#0E2A63;
  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 #C9D6EC; color:#0E2A63;
  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:#0E2A63; color:#FFFFFF; } }
.uitleg[open]>summary i{ background:#0E2A63; color:#FFFFFF; }
.uitlegtekst{ margin:10px 0 0; padding:14px 16px; background:#FFFFFF; border:1px solid #E4EBF7;
  border-radius:12px;
  font-size:0.875rem; color:#5A6273; line-height:1.6; }

.schuif{ -webkit-appearance:none; appearance:none; width:100%; height:8px; border-radius:999px;
  background:#D3DFF2; outline:0; margin:12px 0 0; }
.schuif::-webkit-slider-thumb{ -webkit-appearance:none; width:28px; height:28px;
  border-radius:50%; background:#0E2A63; 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:#0E2A63;
  border:4px solid #FFFFFF; box-shadow:0 2px 10px rgba(14,42,99,.34); cursor:pointer; }
.schuif:focus-visible{ outline:3px solid #123A8A; outline-offset:4px; }
.schaal{ display:flex; justify-content:space-between; margin-top:7px; font-size:0.8125rem;
  color:#8A93A3; font-variant-numeric:tabular-nums; }

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

.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:#0E2A63; border:0; border-radius:999px; cursor:pointer;
  transition:background .16s ease; }
@media (hover:hover){ .rek-knop:hover{ background:#123A8A; } }
.rek-vrij{ display:flex; align-items:center; justify-content:center; gap:8px; margin:10px 0 0;
  font-size:0.875rem; color:#5A6273; }
.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 #DCE5F3; font-size:0.875rem; color:#5A6273;
  white-space:nowrap; }
.rek-proof b{ color:#12141A; font-weight:600; }
.sterren{ display:flex; gap:2px; color:#F7D117; }

.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 #E4E9F2; border-radius:16px; }
.portret{ position:relative; width:52px; height:52px; flex:none; }
.portret .vlak{ width:52px; height:52px; border-radius:50%; background:#F0F4FA; display:grid;
  place-items:center; color:#8A93A3; }
.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:#5A6273; }
.status i{ width:6px; height:6px; border-radius:50%; background:#FFFFFF; }
.rek-contact .tekst b{ display:block; font-size:0.9375rem; color:#0E2A63; 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:#123A8A; flex:none; }
.rek-contact .tekst a:hover{ text-decoration:underline; }

.rek-rente{ margin:12px 0 0; font-size:0.8125rem; color:#8A93A3; 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 #E1E4EA; 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 #E1E4EA; 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:#0E2A63;
  line-height:1.15; font-variant-numeric:tabular-nums; }
.balk-bedrag span{ font-size:0.75rem; color:#6B7280; }
.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:#123A8A; 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:#0E2A63; margin:0; }
.mod-sluit{ width:36px; height:36px; flex:none; display:grid; place-items:center; font:inherit;
  font-size:1.25rem; color:#6B7280; background:#F2F4F7; 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:#EEF3FB; border-radius:10px; }
.mod-auto img{ width:60px; height:45px; object-fit:cover; border-radius:6px; flex:none;
  background:#E1E4EA; }
.mod-auto div{ min-width:0; }
.mod-auto b{ display:block; font-size:0.9375rem; color:#0E2A63; }
.mod-auto span{ font-size:0.8125rem; color:#4A505C; font-variant-numeric:tabular-nums; }
.mod-stap{ font-size:0.8125rem; color:#6B7280; 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 #D5D9E0;
  border-radius:9px; }
.veld input:focus{ border-color:#123A8A; }
.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:#6B7280; }
.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:#4A505C;
  background:#F7F9FC; border:1px solid #E1E4EA; 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:#0E2A63; font-weight:600; }
.keuzerij label:has(input:checked){ background:#EEF3FB; border-color:#123A8A; }
.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:#4A505C;
  background:#FFFFFF; border:1px solid #D5D9E0; }
.mod-door{ color:#12141A; background:#F7D117; border:0; }
@media (hover:hover){ .mod-door:hover{ background:#FFDE3D; } }
.mod-klein{ margin:11px 0 0; font-size:0.75rem; color:#6B7280; line-height:1.5; }
.mod-klein a{ color:#4A505C; }
.mod-bel{ margin:12px 0 0; padding-top:12px; border-top:1px solid #EEF1F5; text-align:center;
  font-size:0.875rem; color:#6B7280; }
.mod-bel a{ color:#0E2A63; 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:#4A505C; }
.proof .sterren{ display:flex; gap:1px; color:#F7D117; }
.proof a{ color:#4A505C; }

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

/* --- vergelijkbaar ------------------------------------------------------ */
.verg{ margin-top:44px; padding-top:32px; border-top:1px solid #E1E4EA; }
.verg h2{ font-size:1.25rem; letter-spacing:-0.022em; color:#0E2A63; margin:0 0 4px; }
.verg p{ color:#6B7280; 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 #C0C6D0; 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 #E1E4EA;
  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 #EEF1F5; }
.rek-onderaan .rek-totaal{ margin:0 0 10px; padding:0 0 10px; border-top:0;
  border-bottom:1px solid #EEF1F5; }

/* 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:#93A9CE;
  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:#0E2A63;
  margin:0 0 14px; }
.tekstpagina h2{ font-size:1.125rem; letter-spacing:-0.018em; color:#0E2A63; margin:30px 0 10px; }
.tekstpagina p{ color:#4A505C; line-height:1.65; margin:0 0 12px; }
.tekstpagina .tekst-in{ font-size:1.0625rem; color:#12141A; }
.tekstpagina a{ color:#0E2A63; }
.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. */
.kop-menu{ display:flex; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; margin-left:auto; padding:0 10px; background:none; border:0;
  cursor:pointer; }
.kop-menu span{ display:block; height:2px; background:#12141A; border-radius:2px;
  transition:transform .18s ease, opacity .14s ease; }
.kop-menu[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.kop-menu[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.kop-menu[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
@media (min-width:1080px){ .kop-menu{ display:none; } }

@media (max-width:1079px){
  .nav[data-open]{ display:flex; flex-direction:column; gap:0; position:fixed;
    left:0; right:0; top:var(--kop-hoogte,68px); bottom:0; z-index:70; margin:0;
    padding:8px 20px calc(24px + env(safe-area-inset-bottom));
    background:#FFFFFF; overflow-y:auto; }
  .nav[data-open] a{ display:flex; align-items:center; min-height:56px;
    font-size:1.0625rem; color:#12141A; text-decoration:none;
    border-bottom:1px solid #EEF1F5; }
  .nav[data-open] a:last-child{ border-bottom:0; }
  .nav[data-open] .nav-bel{ margin-top:14px; justify-content:center; font-weight:600;
    color:#12141A; background:#F7D117; border-radius:10px; min-height:52px;
    font-variant-numeric:tabular-nums; }
}
@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:#0E2A63;
  margin:0 0 12px; }
.contact h2{ font-size:1.125rem; letter-spacing:-0.018em; color:#0E2A63; margin:28px 0 10px; }
.contact-in{ font-size:1.0625rem; color:#4A505C; 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 #E1E4EA; border-radius:12px; text-decoration:none; color:inherit;
  transition:border-color .16s ease; }
@media (hover:hover){ .kanaal:hover{ border-color:#B9C6DE; } }
.kanaal svg{ flex:none; color:#123A8A; }
.kanaal b{ display:block; font-size:1.0625rem; color:#0E2A63;
  font-variant-numeric:tabular-nums; }
.kanaal span{ font-size:0.8125rem; color:#6B7280; }
.kanaal b+ span,.kanaal span b{ display:block; }
.contact-door{ margin-top:24px; font-size:0.9375rem; color:#4A505C; line-height:1.6; }
.contact-door a{ color:#0E2A63; }
.contact-form{ background:#FFFFFF; border:1px solid #E1E4EA; border-radius:14px; padding:22px; }
.contact-form h2{ margin:0 0 4px; }
.contact-klein{ font-size:0.875rem; color:#6B7280; margin:0 0 18px; }
.contact-form .rek-knop{ margin-top:6px; }