/* ============================================================
   SITIFY AUTODEALER TEMPLATE — stylesheet (licht / fotografie-gedreven)
   ------------------------------------------------------------
   KLANT-BRANDING: pas per klant alleen het blok :root hieronder
   aan (kleuren + eventueel fonts). De rest kan blijven staan.
   ============================================================ */

/* — Lettertypen (self-hosted: sneller en AVG-proof, geen Google-servers) — */
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/barlow-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/barlow-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/barlow-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/barlow-latin-700-normal.woff2") format("woff2");
}

:root {
  /* — Merkkleuren (per klant aanpassen) — */
  --kleur-bg: oklch(1 0 0);                 /* paginakleur */
  --kleur-vlak: oklch(0.966 0.002 262);     /* lichtgrijze panelen en secties */
  --kleur-vlak-2: oklch(0.94 0.003 262);    /* verdieping binnen een paneel */
  --kleur-lijn: oklch(0.9 0.004 262);       /* randen */
  --kleur-tekst: oklch(0.22 0.012 262);     /* bodytekst */
  --kleur-gedempt: oklch(0.49 0.016 262);   /* secundaire tekst */
  --kleur-primair: #141414;                 /* merkkleur Blaak Automotive (near-black) */
  --kleur-primair-hover: #000000;
  --kleur-primair-licht: #9a9a9a;           /* lichte tint van de merkkleur, voor gebruik op donkere vlakken */
  --kleur-donker: oklch(0.16 0.006 60);     /* donkere blokken (header, footer, badges) — warm bijna-zwart */
  --kleur-donker-tekst: oklch(0.94 0.004 262);
  --kleur-succes: oklch(0.55 0.14 150);
  --kleur-fout: oklch(0.5 0.19 25);
  --kleur-amber: oklch(0.68 0.15 55);       /* extra accent, o.a. voor nieuwscategorieën */
  --kleur-whatsapp: #25d366;                /* officiële WhatsApp-merkkleur, bewust niet afgeleid van de huisstijl */
  --kleur-whatsapp-hover: #1ebc59;

  /* — Typografie — */
  --font-display: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Barlow", "Helvetica Neue", Arial, sans-serif;

  /* — Maten — */
  --radius: 12px;
  --radius-groot: 18px;
  --radius-pill: 999px;
  --container: 1220px;
  --container-breed: 1480px; /* voor secties die iets meer ademruimte verdienen, bijv. de reviews-carousel */
  --sectie-ruimte: clamp(4rem, 9vw, 7.5rem);

  /* — Z-index schaal — */
  --z-header: 70;
  --z-menu: 60;
  --z-lightbox: 90;
}

/* ---------- Basis ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--kleur-bg);
  color: var(--kleur-tekst);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  margin: 0 0 0.5em;
  text-wrap: balance;
  letter-spacing: -0.015em;
}

h1 { font-size: clamp(2.4rem, 5.5vw, 4.2rem); }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.5rem); }

p { margin: 0 0 1em; max-width: 68ch; text-wrap: pretty; }

a { color: inherit; }

.container {
  width: min(var(--container), 100% - 2.5rem);
  margin-inline: auto;
}

.container--breed { width: min(var(--container-breed), 100% - 2.5rem); }

.sectie { padding-block: var(--sectie-ruimte); }

.sectie-kop {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

.sectie-kop h2 { margin-bottom: 0; }

.sectie-kop .alles-link {
  font-weight: 600;
  color: var(--kleur-gedempt);
  text-decoration: none;
  white-space: nowrap;
  padding-bottom: 0.35rem;
  border-bottom: 2px solid var(--kleur-primair);
  transition: color 160ms ease-out;
}

.sectie-kop .alles-link:hover { color: var(--kleur-tekst); }

.intro-tekst {
  color: var(--kleur-gedempt);
  font-size: 1.15rem;
  max-width: 58ch;
}

/* ---------- Knoppen ---------- */

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.8rem 1.7rem;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 160ms ease-out, border-color 160ms ease-out, color 160ms ease-out, transform 160ms ease-out;
}

.knop:active { transform: translateY(1px); }

.knop-primair {
  background: var(--kleur-primair);
  color: #fff;
}

.knop-primair:hover { background: var(--kleur-primair-hover); }

.knop-contour {
  background: transparent;
  color: var(--kleur-tekst);
  border-color: oklch(0.62 0.008 262); /* 3.6:1 tegen --kleur-bg, voldoet aan WCAG 1.4.11 */
}

.knop-contour:hover { border-color: var(--kleur-tekst); }

.knop-donker {
  background: var(--kleur-donker);
  color: #fff;
}

.knop-donker:hover { background: oklch(0.28 0.012 262); }

.knop-accent {
  background: #fff;
  color: var(--kleur-primair);
}

.knop-accent:hover { background: oklch(0.93 0.01 262); }

.knop-groot { padding: 1rem 2.2rem; font-size: 1.08rem; }

/* ---------- Header ---------- */

/* Skiplink: onzichtbaar tot hij toetsenbordfocus krijgt, dan als knop
   bovenin beeld. Eerste focusbare element op elke pagina. */
.skiplink {
  position: fixed;
  top: 0.6rem;
  left: 0.6rem;
  z-index: calc(var(--z-header) + 1);
  transform: translateY(-200%);
  background: var(--kleur-primair);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  padding: 0.7rem 1.2rem;
  border-radius: var(--radius);
}

.skiplink:focus-visible { transform: none; }

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: color-mix(in oklab, var(--kleur-bg) 90%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--kleur-lijn);
}

/* Vast 3-koloms rooster: menuknop links, logo in het midden, acties rechts.
   .hoofd-nav is fixed-gepositioneerd en telt niet mee als roostercel. */
.header-binnen {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  min-height: 4.5rem;
}

.logo {
  font-family: var(--font-display);
  font-size: clamp(1rem, 3.6vw, 1.35rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  /* Lange bedrijfsnamen (uit het portaal) mogen de header op smalle
     schermen niet uit beeld duwen: laat het logo krimpen en kap de naam
     dan af met een beletselteken. */
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-self: center;
  gap: 0.55rem;
}

.logo > span:last-child { overflow: hidden; text-overflow: ellipsis; }

.logo .logo-blok {
  width: 0.8em;
  height: 0.8em;
  border-radius: 4px;
  background: var(--kleur-primair);
  flex: none;
}

/* Beeldlogo Bot Auto's (transparant, werkt op licht én donker). */
.logo-afbeelding {
  display: block;
  height: 40px;
  width: auto;
  flex: none;
}

.site-footer .logo-afbeelding { height: 46px; }

@media (max-width: 560px) {
  .logo-afbeelding { height: 32px; }
}

/* ---------- Menuknop (hamburger, altijd links, wordt een kruis) ---------- */

.menu-knop {
  justify-self: start;
  display: inline-flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  background: none;
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: border-color 140ms ease-out, background 140ms ease-out;
}

.menu-knop:hover { border-color: var(--kleur-primair); }

.menu-streep {
  width: 1.15rem;
  height: 2px;
  background: var(--kleur-tekst);
  border-radius: 2px;
  transition: transform 220ms ease, opacity 160ms ease;
}

.menu-knop[aria-expanded="true"] {
  border-color: var(--kleur-primair);
  background: var(--kleur-primair);
}

.menu-knop[aria-expanded="true"] .menu-streep { background: #fff; }
.menu-knop[aria-expanded="true"] .menu-streep:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-knop[aria-expanded="true"] .menu-streep:nth-child(2) { opacity: 0; }
.menu-knop[aria-expanded="true"] .menu-streep:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Header-acties (rechts: telefoon + contactknop) ---------- */

.header-acties {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 1.4rem;
}

.header-bel {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--kleur-tekst) !important;  /* Aanraakvlak ≥44px (WCAG 2.5.8) zonder de layout te verschuiven. */
  padding: 0.7rem;
  margin: -0.7rem;
}

.header-bel svg { width: 1.15rem; height: 1.15rem; color: var(--kleur-primair); flex: none; }

.knop-header { padding: 0.65rem 1.4rem; font-size: 0.95rem; }

@media (max-width: 640px) {
  .header-bel span { display: none; }
  .header-bel svg { width: 1.3rem; height: 1.3rem; }
  .knop-header { padding: 0.6rem 1.1rem; font-size: 0.9rem; }
}

@media (max-width: 480px) {
  .header-acties { gap: 0.8rem; }
}

/* ---------- Volledige-schermmenu ---------- */
/* Klapt open onder de vaste header (die zelf op --z-header blijft staan,
   zodat de nu-actieve kruis-knop en het logo bereikbaar/zichtbaar blijven).
   Typografie en accentkleur volgen bewust dezelfde stijl als de rest van de
   site (font-weight 600, letter-spacing -0.01em zoals h1/h2, merkblauw i.p.v.
   een los accent) zodat het geen op zichzelf staand element voelt. */

.hoofd-nav {
  position: fixed;
  inset: 4.5rem 0 0 0;
  z-index: var(--z-menu);
  display: flex;
  justify-content: center;
  padding-inline: 1.5rem;
  background: var(--kleur-donker);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease-out, visibility 200ms;
}

.hoofd-nav.open {
  opacity: 1;
  visibility: visible;
}

/* margin:auto (i.p.v. justify-content:center op de scroll-container) centreert
   verticaal zolang de inhoud past, maar blijft — anders dan center + overflow —
   volledig scrollbaar zodra het menu niet past. Zonder deze truc werd "Home"
   (het eerste, bovenste item) op kortere schermen onbereikbaar afgesneden. */
.hoofd-nav-inner {
  margin-block: auto;
  padding-block: 2.5rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hoofd-nav-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
}

.hoofd-nav-links a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.08rem;
  text-align: center;
  text-decoration: none;
  color: var(--kleur-donker-tekst);
  padding: 0.25rem 0.2rem;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 380ms cubic-bezier(0.22, 1, 0.36, 1), transform 380ms cubic-bezier(0.22, 1, 0.36, 1), color 160ms ease-out;
}

.nav-titel {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4.4vw, 2.1rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.nav-sub {
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: color-mix(in oklab, var(--kleur-donker-tekst) 58%, transparent);
}

/* Financieren + Verzekeren: kleiner en dicht onder Diensten */
.hoofd-nav-links a.nav-sublink { margin-top: -0.32rem; }
.hoofd-nav-links a.nav-sublink .nav-titel { font-size: clamp(1.05rem, 3vw, 1.3rem); font-weight: 500; }
.hoofd-nav-links a.nav-sublink .nav-sub { font-size: 0.74rem; }

.hoofd-nav.open .hoofd-nav-links a { opacity: 1; transform: translateY(0); }

.hoofd-nav.open .hoofd-nav-links a:nth-child(1) { transition-delay: 60ms; }
.hoofd-nav.open .hoofd-nav-links a:nth-child(2) { transition-delay: 95ms; }
.hoofd-nav.open .hoofd-nav-links a:nth-child(3) { transition-delay: 130ms; }
.hoofd-nav.open .hoofd-nav-links a:nth-child(4) { transition-delay: 165ms; }
.hoofd-nav.open .hoofd-nav-links a:nth-child(5) { transition-delay: 200ms; }
.hoofd-nav.open .hoofd-nav-links a:nth-child(6) { transition-delay: 235ms; }
.hoofd-nav.open .hoofd-nav-links a:nth-child(7) { transition-delay: 270ms; }
.hoofd-nav.open .hoofd-nav-links a:nth-child(8) { transition-delay: 305ms; }
.hoofd-nav.open .hoofd-nav-links a:nth-child(9) { transition-delay: 340ms; }

.hoofd-nav-links a:hover,
.hoofd-nav-links a:focus-visible,
.hoofd-nav-links a[aria-current="page"] { color: var(--kleur-primair-licht); }

.hoofd-nav-onder {
  margin-top: 2.2rem;
  padding-top: 2rem;
  border-top: 1px solid color-mix(in oklab, var(--kleur-donker-tekst) 16%, transparent);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 380ms cubic-bezier(0.22, 1, 0.36, 1), transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hoofd-nav.open .hoofd-nav-onder { opacity: 1; transform: translateY(0); transition-delay: 320ms; }

.hoofd-nav-onder a:not(.knop) {
  position: relative;
  color: var(--kleur-donker-tekst);
  opacity: 0.7;
  text-decoration: none;
  font-weight: 500;
  transition: opacity 140ms ease-out;
}

.hoofd-nav-onder a:not(.knop):hover { opacity: 1; }

.knop-menu-cta {
  background: transparent;
  border: 1.5px solid color-mix(in oklab, var(--kleur-donker-tekst) 32%, transparent);
  color: var(--kleur-donker-tekst);
}

.knop-menu-cta svg { transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1); }

.knop-menu-cta:hover {
  background: var(--kleur-primair-licht);
  border-color: var(--kleur-primair-licht);
  color: var(--kleur-donker);
}

.knop-menu-cta:hover svg { transform: translateX(3px); }

@media (max-width: 480px) {
  .hoofd-nav { inset: 4rem 0 0 0; }
  .hoofd-nav-inner { padding-block: 1.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hoofd-nav-links a, .hoofd-nav-onder { transition-duration: 1ms; transition-delay: 0ms !important; }
}

/* ---------- Foto-hero ---------- */

.hero-foto {
  position: relative;
  min-height: clamp(480px, 72vh, 760px);
  background: oklch(0.9 0.003 262);
  overflow: clip;
  display: grid;
}

.hero-foto > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Zachte gradient onderin zodat tekst op elke foto leesbaar is,
   vloeiend uitvloeiend naar 0% (geen harde balk) */
.hero-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    oklch(0.12 0.01 262 / 0.72) 0%,
    oklch(0.12 0.01 262 / 0.45) 22%,
    oklch(0.12 0.01 262 / 0.12) 48%,
    oklch(0.12 0.01 262 / 0) 70%
  );
  pointer-events: none;
}

.hero-overlay {
  position: relative;
  z-index: 1;
  align-self: end;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 3rem;
  padding-bottom: clamp(1.6rem, 4vw, 3rem);
  color: #fff;
}

.hero-overlay .model-label {
  display: block;
  font-size: 0.95rem;
  font-weight: 500;
  color: oklch(0.85 0.01 262);
  margin-bottom: 0.3rem;
}

.hero-overlay h1 {
  margin: 0;
  color: #fff;
  font-weight: 600;
}

.hero-specs {
  display: flex;
  gap: clamp(1.6rem, 4vw, 3.5rem);
}

.hero-specs .spec { min-width: 0; }

.hero-specs .spec span {
  display: block;
  font-size: 0.88rem;
  color: oklch(0.85 0.01 262);
}

.hero-specs .spec strong {
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Thumbnail-wisselaar */
.hero-thumbs {
  position: absolute;
  z-index: 2;
  top: clamp(1rem, 3vw, 2rem);
  right: clamp(1rem, 3vw, 2rem);
  /* Vaste veiligheidsmarge tot onder de foto: hoeveel foto's een auto ook
     heeft (main.js beperkt dit al tot 4), deze kolom mag nooit tot in de
     tekst-overlay onderin doorgroeien. Bij een auto met toch meer foto's
     dan er verticaal passen, scrollt de kolom zelf in plaats van dat hij
     de kaart openduwt. */
  max-height: min(60%, calc(100% - 9rem));
  overflow-y: auto;
  scrollbar-width: thin;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: oklch(1 0 0 / 0.92);
  padding: 0.5rem;
  border-radius: var(--radius);
  box-shadow: 0 10px 30px oklch(0.2 0.01 262 / 0.18);
}

.hero-thumbs button {
  display: block;
  position: relative;
  width: 84px;
  /* Vaste hoogte i.p.v. aspect-ratio: bij een portret-foto (bijv. een
     rechtopstaande smartphonefoto van de auto) bleek aspect-ratio hier
     niet betrouwbaar te worden toegepast — de knop groeide dan mee met
     de hoogte van de bronfoto in plaats van 16:10 te blijven, waardoor
     de kolom veel te hoog werd. Een expliciete hoogte + absoluut
     gepositioneerde foto (zelfde patroon als .hero-foto>img) voorkomt
     dat sowieso, ongeacht de oriëntatie van de bronfoto. flex:none
     voorkomt dat de flex-kolom 'm alsnog laat mee-groeien/krimpen. */
  height: 52.5px;
  flex: none;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: clip;
  cursor: pointer;
  background: oklch(0.93 0.003 262);
}

.hero-thumbs button img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-thumbs button[aria-current="true"] { border-color: var(--kleur-primair); }

@media (max-width: 640px) {
  /* Thumbnails op mobiel: rechtsboven als verticale kolom (zelfde plek en
     richting als op desktop). Bovenin rechts is de foto vrij, dus de kolom
     valt niet over de overlay-tekst (onderin) en ook niet over de
     blader-pijlen (.hero-pijlen) op de naad onderaan. */
  .hero-thumbs {
    display: flex;
    flex-direction: column;
    position: absolute;
    inset: 0.85rem 0.85rem auto auto;
    max-height: calc(100% - 12rem);
    overflow-x: hidden;
    overflow-y: auto;
    gap: 0.4rem;
    margin: 0;
    padding: 0.4rem;
    background: oklch(1 0 0 / 0.9);
    box-shadow: 0 8px 22px oklch(0.2 0.01 262 / 0.18);
    border-radius: var(--radius);
    scrollbar-width: none;
  }
  .hero-thumbs::-webkit-scrollbar { display: none; }
  .hero-thumbs button { width: 54px; height: 38px; flex: 0 0 auto; }
  .hero-foto { min-height: 480px; }
  .hero-specs { flex-wrap: wrap; gap: 0.9rem 1.8rem; }
  .hero-specs .spec span { font-size: 0.8rem; }
}

/* Pijlen om door de uitgelichte auto's te bladeren:
   half over de foto, half over de balk eronder */
.hero-pijlen {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 0.7rem;
  height: 0;
}

.hero-pijlen button {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--kleur-lijn);
  background: #fff;
  color: var(--kleur-tekst);
  display: grid;
  place-items: center;
  cursor: pointer;
  transform: translateY(-50%);
  box-shadow: 0 8px 22px oklch(0.2 0.01 262 / 0.2);
  transition: background 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out;
}

.hero-pijlen button:hover {
  background: var(--kleur-primair);
  border-color: var(--kleur-primair);
  color: #fff;
}

.hero-pijlen svg { width: 1.35rem; height: 1.35rem; }

/* Balk onder de hero: omschrijving + prijs + actie */
.hero-onder {
  background: var(--kleur-vlak);
  border-bottom: 1px solid var(--kleur-lijn);
}

.hero-onder-binnen {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto auto;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding-block: clamp(1.4rem, 3vw, 2.2rem);
}

.hero-onder .hero-omschrijving {
  margin: 0;
  color: var(--kleur-gedempt);
  font-size: 1rem;
  max-width: 52ch;
}

.hero-onder .prijsblok span {
  display: block;
  font-size: 0.88rem;
  color: var(--kleur-gedempt);
}

.hero-onder .prijsblok strong {
  font-size: 1.7rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 820px) {
  .hero-onder-binnen { grid-template-columns: 1fr auto; }
  .hero-onder .hero-omschrijving { grid-column: 1 / -1; }
}

/* ---------- Zoekstrook ---------- */

.zoekstrook { border-bottom: 1px solid var(--kleur-lijn); }

.zoekbalk {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 0.9rem;
  align-items: end;
  padding-block: clamp(1.4rem, 3vw, 2rem);
}

.zoekbalk label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--kleur-gedempt);
  margin: 0 0 0.3rem 0.2rem;
}

@media (max-width: 720px) {
  .zoekbalk { grid-template-columns: 1fr 1fr; }
  /* Merk + Model naast elkaar (rij 1), daarna Max. prijs en de Zoeken-knop
     elk over de volle breedte. Voorheen stond Max. prijs alleen in de
     linkerkolom met een leeg vak ernaast: dat gaf het 'gat' dat als 2 losse
     knoppen oogde. */
  .zoekbalk > div:nth-child(3) { grid-column: 1 / -1; }
  .zoekbalk .zoek-actie { grid-column: 1 / -1; }
}

/* ---------- Formulier-elementen ---------- */

select, input[type="text"], input[type="email"], input[type="tel"], input[type="number"], textarea {
  font: inherit;
  color: var(--kleur-tekst);
  background: var(--kleur-bg);
  border: 1px solid oklch(0.82 0.006 262);
  border-radius: var(--radius);
  padding: 0.7rem 0.85rem;
  width: 100%;
}

/* Native op/neer-pijltjes van number-velden ogen anders per browser en
   passen niet bij de rest van de invulvelden; standaard verbergen. */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

select:focus-visible, input:focus-visible, textarea:focus-visible, .knop:focus-visible, a:focus-visible, button:focus-visible {
  outline: 2px solid var(--kleur-primair);
  outline-offset: 2px;
}

::placeholder { color: var(--kleur-gedempt); opacity: 1; }

/* ---------- Autokaarten ---------- */

.auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.4rem;
}

.auto-kaart {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--kleur-bg);
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius-groot);
  overflow: clip;
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 200ms ease-out, border-color 200ms ease-out, opacity 200ms ease-out;
}

.auto-kaart:hover {
  transform: translateY(-4px);
  border-color: oklch(0.8 0.02 262);
  box-shadow: 0 16px 36px oklch(0.3 0.02 262 / 0.12);
}

/* De kaart is een gewone div (geen <a>) zodat de WhatsApp-knop als losse,
   niet-geneste link ernaast kan bestaan; dit hoofdlinkje omvat de rest van
   de inhoud en maakt zo de hele kaart klikbaar. */
.auto-kaart-link {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.auto-kaart .foto {
  position: relative;
  aspect-ratio: 16 / 9;
  background: oklch(0.93 0.003 262);
  overflow: clip;
}

/* position:absolute + inset:0 dwingt af dat elke foto het 16:9-vak volledig
   vult, ongeacht de eigen resolutie of beeldverhouding (ook een lage-res of
   brede bronfoto). Zo wordt elke auto altijd op exact dezelfde maat getoond. */
.auto-kaart .foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.auto-kaart:hover .foto img { transform: scale(1.03); }

.auto-kaart .kaart-inhoud {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.1rem 1.25rem 1.25rem;
  flex: 1;
}

/* WhatsApp-snelknop: los van de kaartlink (geen geneste <a>'s), met een
   hogere z-index zodat hij altijd zelf de klik afvangt. */
.kaart-whatsapp {
  position: absolute;
  z-index: 2;
  top: 0.75rem;
  right: 0.75rem;
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--kleur-whatsapp);
  color: #fff;
  box-shadow: 0 6px 16px oklch(0.2 0.02 262 / 0.25);
  transition: background 150ms ease-out, transform 150ms ease-out;
}

.kaart-whatsapp:hover { background: var(--kleur-whatsapp-hover); transform: scale(1.06); }

.kaart-whatsapp svg { width: 1.2rem; height: 1.2rem; }

.auto-kaart h3 { margin: 0; font-size: 1.12rem; font-weight: 700; letter-spacing: 0; }

.auto-kaart .uitvoering {
  color: var(--kleur-gedempt);
  font-size: 0.95rem;
  margin: 0;
}

.auto-kaart .specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  margin: 0.55rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--kleur-gedempt);
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
}

.auto-kaart .specs li + li::before {
  content: "·";
  margin-right: 0.9rem;
  opacity: 0.6;
}

.auto-kaart .prijs-rij {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 0.9rem;
}

.prijs {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--kleur-tekst);
  font-variant-numeric: tabular-nums;
}

.prijs-rij .bekijk {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--kleur-primair);
}

.badge {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  background: var(--kleur-primair);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-pill);
}

.badge-verkocht { background: var(--kleur-donker); color: var(--kleur-donker-tekst); }

/* Verkochte auto's blijven zichtbaar (toont de omloopsnelheid) maar vallen
   duidelijk terug, zodat de aandacht vanzelf naar de beschikbare voorraad
   gaat. De badge zelf blijft op volle dekking leesbaar. */
.auto-kaart.is-verkocht { opacity: 0.6; }
.auto-kaart.is-verkocht .foto img { filter: grayscale(0.9); }
.auto-kaart.is-verkocht:hover { transform: none; box-shadow: none; }
.auto-kaart.is-verkocht:hover .foto img { transform: none; }

/* ---------- Aanbod-pagina ---------- */

.pagina-kop {
  background: var(--kleur-vlak);
  border-bottom: 1px solid var(--kleur-lijn);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.pagina-kop p { color: var(--kleur-gedempt); font-size: 1.12rem; }

.filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.7rem;
  margin: 2rem 0 0;
}

.filters .filter-veld label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--kleur-gedempt);
  margin-bottom: 0.3rem;
}

.filter-balk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.6rem;
}

.resultaat-teller { color: var(--kleur-gedempt); font-variant-numeric: tabular-nums; }

.wis-filters {
  background: none;
  border: none;
  color: var(--kleur-gedempt);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0;
}

.wis-filters:hover { color: var(--kleur-tekst); }

.leeg-melding {
  border: 1px dashed oklch(0.8 0.006 262);
  border-radius: var(--radius-groot);
  padding: 3rem 2rem;
  text-align: center;
  color: var(--kleur-gedempt);
}

/* ---------- Detailpagina ---------- */

.detail-terug {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--kleur-gedempt);
  text-decoration: none;
  font-weight: 600;
  margin-top: 1.6rem;
}

.detail-terug:hover { color: var(--kleur-tekst); }

/* Titel over de volle breedte; de pilltags staan in de linkerkolom
   zodat ze op dezelfde hoogte vallen als de pil in de prijskaart
   rechts (zie .prijs-kaart-kop, beide zijn het eerste item in hun
   kolom van .detail-indeling). */
.detail-kop { padding-block: 1.4rem 0.4rem; }

.detail-kop h1 { font-size: clamp(2rem, 3.6vw, 2.9rem); margin-bottom: 0; }

.detail-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  margin: clamp(0.9rem, 2vw, 1.15rem) 0 0;
  list-style: none;
  min-height: 2.6rem;
}

.detail-tags li {
  background: var(--kleur-vlak);
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius-pill);
  padding: 0.35rem 0.9rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--kleur-gedempt);
}

.detail-indeling {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr);
  gap: clamp(1.6rem, 4vw, 3rem);
  align-items: start;
  padding-block: 0 var(--sectie-ruimte);
}

.detail-hoofd { display: grid; gap: clamp(1.4rem, 3vw, 2rem); min-width: 0; }

/* Galerij: verticale thumbnails links, grote foto rechts */
.detail-galerij {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 0.7rem;
  align-items: start;
}

.detail-thumbs-verticaal {
  display: grid;
  gap: 0.7rem;
}

.detail-thumbs-verticaal button {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius);
  overflow: clip;
  cursor: pointer;
  background: oklch(0.93 0.003 262);
}

.detail-thumbs-verticaal button img { width: 100%; height: 100%; object-fit: cover; }

.detail-thumbs-verticaal button[aria-current="true"] { border-color: var(--kleur-primair); }

.detail-foto-groot {
  position: relative;
  border-radius: var(--radius-groot);
  overflow: clip;
  border: 1px solid var(--kleur-lijn);
  background: oklch(0.93 0.003 262);
  aspect-ratio: 4 / 3;
  cursor: zoom-in;
}

.detail-foto-groot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Losse, altijd zichtbare knop bovenop de foto: duidelijker affordance dan
   alleen een zoom-cursor, en de enige echt focusbare/toetsenbord-bediende
   trigger (de foto zelf krijgt bewust geen eigen role/tabindex, dat zou een
   interactief element in een interactief element nesten). */
.detail-foto-vergroot {
  position: absolute;
  right: 0.9rem;
  bottom: 0.9rem;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: var(--radius-pill);
  background: oklch(1 0 0 / 0.92);
  color: var(--kleur-tekst);
  cursor: zoom-in;
  box-shadow: 0 6px 18px oklch(0.2 0.01 262 / 0.18);
}

.detail-foto-vergroot:hover { background: #fff; }

/* ---------- Lightbox: foto vergroten ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-lightbox);
  display: flex;
  background: oklch(0.12 0.006 262 / 0.94);
  padding: clamp(1rem, 4vw, 3rem);
}

.lightbox[hidden] { display: none; }

.lightbox-foto-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-foto-wrap img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius);
}

.lightbox-sluiten,
.lightbox-pijl {
  position: absolute;
  display: grid;
  place-items: center;
  border: none;
  border-radius: var(--radius-pill);
  background: oklch(1 0 0 / 0.14);
  color: #fff;
  cursor: pointer;
}

.lightbox-sluiten:hover,
.lightbox-pijl:hover { background: oklch(1 0 0 / 0.24); }

.lightbox-sluiten {
  top: clamp(0.75rem, 3vw, 1.5rem);
  right: clamp(0.75rem, 3vw, 1.5rem);
  width: 46px;
  height: 46px;
}

.lightbox-pijl {
  top: 50%;
  translate: 0 -50%;
  width: 52px;
  height: 52px;
}

.lightbox-pijl[hidden] { display: none; }

.lightbox-vorige { left: clamp(0.5rem, 2vw, 1.5rem); }
.lightbox-volgende { right: clamp(0.5rem, 2vw, 1.5rem); }

.lightbox-teller {
  position: absolute;
  bottom: clamp(0.75rem, 3vw, 1.5rem);
  left: 50%;
  translate: -50% 0;
  margin: 0;
  color: oklch(1 0 0 / 0.85);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .lightbox-pijl { width: 42px; height: 42px; }
}

/* Specificaties: witte kaart, 3-koloms rooster met scheidingslijnen */
.specs-kaart, .info-kaart, .prijs-kaart {
  background: var(--kleur-bg);
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius-groot);
  padding: clamp(1.4rem, 3vw, 1.9rem);
}

.specs-kaart h2, .info-kaart h2, .prijs-kaart h2 { font-size: 1.4rem; margin-bottom: 1.1rem; }

.specs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--kleur-lijn);
  border-left: 1px solid var(--kleur-lijn);
}

.spec-cel {
  padding: 1.1rem 0.75rem;
  text-align: center;
  border-right: 1px solid var(--kleur-lijn);
  border-bottom: 1px solid var(--kleur-lijn);
}

.spec-cel span {
  display: block;
  font-size: 0.85rem;
  color: var(--kleur-gedempt);
  margin-bottom: 0.35rem;
}

.spec-cel strong {
  font-weight: 700;
  color: var(--kleur-primair);
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}

/* Zijbalk: prijs + acties, omschrijving, uitrusting */
.detail-zijbalk { display: grid; gap: 1.2rem; position: sticky; top: 6rem; }

.prijs-kaart-kop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.2rem;
}

.prijs-kaart-kop h2 { margin-bottom: 0; }

.prijs-per-maand {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--kleur-gedempt);
  white-space: nowrap;
}

.prijs-groot {
  display: block;
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.prijs-kaart .prijs-toelichting {
  font-size: 0.9rem;
  color: var(--kleur-gedempt);
  margin: 0.15rem 0 1.4rem;
}

.detail-acties { display: grid; gap: 0.7rem; }

.detail-acties .knop { width: 100%; justify-content: space-between; }

.detail-acties .knop svg { width: 1.1rem; height: 1.1rem; flex: none; }

/* Secundaire acties (bellen, proefrit) blijven duidelijk lichter dan de
   primaire "Reserveer"-knop erboven: twee kolommen naast elkaar op bredere
   schermen, gestapeld op mobiel. */
.detail-acties-secundair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

@media (max-width: 420px) {
  .detail-acties-secundair { grid-template-columns: 1fr; }
}

.detail-acties-secundair .knop {
  font-size: 0.92rem;
  padding: 0.7rem 1.1rem;
}

.info-kaart p { margin: 0; color: var(--kleur-gedempt); }

.opties-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
}

.optie-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
  background: var(--kleur-vlak);
  border-radius: var(--radius);
  padding: 1.1rem 0.6rem;
  font-size: 0.92rem;
  font-weight: 600;
}

.optie-item svg { width: 1.3rem; height: 1.3rem; color: var(--kleur-primair); }

@media (max-width: 900px) {
  .detail-indeling { grid-template-columns: 1fr; }
  .detail-zijbalk { position: static; }
}

@media (max-width: 560px) {
  .detail-galerij { grid-template-columns: 1fr; }
  .detail-thumbs-verticaal { grid-auto-flow: column; grid-auto-columns: 1fr; grid-template-columns: none; order: 2; }
  .detail-foto-groot { order: 1; }
  .specs-grid { grid-template-columns: repeat(2, 1fr); }
  .opties-grid { grid-template-columns: 1fr; }
}

/* ---------- Diensten (USP's) ---------- */

.diensten-indeling {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.diensten-lijst { display: grid; gap: 0; }

.dienst {
  display: grid;
  grid-template-columns: 3.4rem 1fr;
  gap: 1.1rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--kleur-lijn);
}

.dienst:last-child { border-bottom: 1px solid var(--kleur-lijn); }

.dienst-icoon {
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  background: oklch(0.93 0.03 262);
  color: var(--kleur-primair);
  display: grid;
  place-items: center;
}

.dienst-icoon svg { width: 1.5rem; height: 1.5rem; }

.dienst h3 { margin-bottom: 0.25em; font-size: 1.15rem; font-weight: 700; letter-spacing: 0; }

.dienst p { color: var(--kleur-gedempt); margin: 0; font-size: 0.99rem; }

@media (max-width: 860px) {
  .diensten-indeling { grid-template-columns: 1fr; }
}

/* ---------- Reviews ---------- */

.reviews-sectie { background: var(--kleur-vlak); border-block: 1px solid var(--kleur-lijn); }

/* Rij boven de carousel: Google-badge links, navigatiepijlen rechts
   (zelfde knoppenpatroon als de hero-pijlen). */
.reviews-kop-rij {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.4rem;
}

/* .onderhoud-pijlen deelt dit knoppenpatroon (zie hieronder bij
   Onderhoud & reparatie), zodat beide carousels er hetzelfde uitzien. */
.reviews-pijlen,
.onderhoud-pijlen { display: flex; gap: 0.6rem; flex: none; }

.reviews-pijlen button,
.onderhoud-pijlen button {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid var(--kleur-lijn);
  background: var(--kleur-bg);
  color: var(--kleur-tekst);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 150ms ease-out, color 150ms ease-out, background 150ms ease-out;
}

.reviews-pijlen button:hover,
.onderhoud-pijlen button:hover { border-color: var(--kleur-primair); color: var(--kleur-primair); }

/* Expliciete maat voor de chevrons: zonder width/height krimpt een inline-SVG
   zonder eigen afmetingen in een flex-knop tot 0 en lijken de pijlen leeg
   (zelfde patroon als .hero-pijlen svg). */
.reviews-pijlen button svg,
.onderhoud-pijlen button svg { width: 1.2rem; height: 1.2rem; }

/* Horizontale carousel i.p.v. een vast grid: elke kaart heeft een vaste
   breedte en klikt op zijn plek vast (scroll-snap), de pijlen scrollen
   precies één kaart per keer. Geen JS-library nodig. */
.reviews-carousel { position: relative; }

.reviews-grid {
  display: flex;
  gap: 1.4rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 0.4rem;
  /* Geen negatieve marge + compenserende padding meer: die truc (bedoeld als
     ademruimte voor de hover-schaduw) verstoorde de scroll-snap-startpositie,
     waardoor de eerste kaart niet meer gelijk begon met de rest van de
     pagina. De kaarten sluiten nu recht aan op dezelfde marge als de rest
     van de site. */
  scrollbar-width: none;
}

.reviews-grid::-webkit-scrollbar { display: none; }

@media (prefers-reduced-motion: reduce) {
  .reviews-grid { scroll-behavior: auto; }
}

.review {
  /* .review is a <figure> element (zie js/main.js): zonder deze reset gebruikt
     de browser zijn standaard figure-marge (~1em 40px), wat de kaarten scheef
     tegen elkaar duwt en de eerste kaart uit lijn met de rest van de site
     brengt. De tussenruimte komt al netjes van de gap op .reviews-grid. */
  margin: 0;
  scroll-snap-align: start;
  flex: 0 0 clamp(260px, 30vw, 340px);
  position: relative;
  background: var(--kleur-bg);
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius-groot);
  padding: 1.7rem 1.7rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow: clip;
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 200ms ease-out, border-color 200ms ease-out;
}

@media (max-width: 720px) {
  /* Op mobiel geen horizontale swipe-carousel maar een verticale stapel: alle
     reviews staan onder elkaar en zijn altijd zichtbaar. De swipe-variant gaf
     op de telefoon de indruk dat er 'geen reviews meer' waren (je kon voorbij
     de laatste kaart scrollen naar lege ruimte). Zonder carousel kan dat niet
     meer, dus zijn de blader-pijlen op mobiel ook overbodig. */
  .reviews-grid {
    flex-direction: column;
    overflow-x: visible;
    scroll-snap-type: none;
    gap: 1.1rem;
  }
  .review {
    flex: 0 0 auto;
    width: 100%;
  }
  .reviews-pijlen { display: none; }
}

.review-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.review-kop svg { flex: none; opacity: 0.85; }

.review:hover {
  transform: translateY(-4px);
  border-color: oklch(0.82 0.008 262);
  box-shadow: 0 22px 40px -26px oklch(0.2 0.02 262 / 0.35);
}

/* Groot, gedempt aanhalingsteken op de achtergrond voor wat redactionele flair */
.review::before {
  content: "\201C";
  position: absolute;
  top: -0.5rem;
  right: 0.9rem;
  font-family: var(--font-display);
  font-size: 5.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--kleur-primair);
  opacity: 0.07;
  pointer-events: none;
}

.review .sterren { color: var(--kleur-primair); letter-spacing: 0.15em; font-size: 1.05rem; }

.review blockquote {
  position: relative;
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.55;
}

.review figcaption {
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px solid var(--kleur-lijn);
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

.review-avatar {
  width: 2.4rem;
  height: 2.4rem;
  flex: none;
  border-radius: 50%;
  background: oklch(0.93 0.03 262);
  color: var(--kleur-primair);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
}

.review figcaption > span:last-child { min-width: 0; }

.review-naam {
  display: block;
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--kleur-tekst);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.review-bron {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--kleur-gedempt);
}

.review-bron svg { flex: none; }

/* Badge met het Google-cijfer + aantal reviews, linkt door naar het echte
   Google Bedrijfsprofiel. Toont de daadwerkelijke, actuele beoordeling in
   plaats van een statische kopie van reviewtekst. */
.google-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  background: var(--kleur-bg);
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius-pill);
  padding: 0.7rem 1.3rem 0.7rem 0.9rem;
  text-decoration: none;
  color: var(--kleur-tekst);
  margin-bottom: 1.6rem;
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 180ms ease-out, border-color 180ms ease-out;
}

.google-badge:hover {
  transform: translateY(-2px);
  border-color: oklch(0.78 0.008 262);
  box-shadow: 0 10px 24px -16px oklch(0.2 0.02 262 / 0.4);
}

.google-badge-cijfer {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
}

.google-badge-cijfer .sterren { color: var(--kleur-primair); letter-spacing: 0.1em; font-size: 0.95rem; }

.google-badge-tekst { color: var(--kleur-gedempt); font-size: 0.92rem; font-weight: 500; }

.google-badge-tekst strong { color: var(--kleur-tekst); }

.google-badge svg.pijl { color: var(--kleur-gedempt); flex: none; transition: transform 180ms ease-out; }

.google-badge:hover svg.pijl { transform: translateX(3px); color: var(--kleur-tekst); }

/* ---------- CTA-band ---------- */

.cta-band {
  background: var(--kleur-donker);
  border-radius: var(--radius-groot);
  padding: clamp(2.2rem, 5vw, 3.6rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  color: #fff;
}

.cta-band h2 { margin: 0 0 0.25em; color: #fff; }

.cta-band p { margin: 0; color: oklch(0.93 0.02 262); max-width: 52ch; }

.cta-band .knop { flex: none; background: #fff; color: var(--kleur-primair); }

.cta-band .knop:hover { background: oklch(0.93 0.01 262); }

/* ---------- Onderhoud: werkplaats-banner ----------
   Brede sfeerfoto van de werkplaats, binnen dezelfde --container-breedte
   als de rest van de site (geen echte viewport-brede bleed) zodat de
   marges overal gelijk blijven. overflow:clip + aspect-ratio houdt de
   hoogte voorspelbaar ongeacht de brondimensies van de foto. */

.onderhoud-banner {
  border-radius: var(--radius-groot);
  overflow: clip;
  aspect-ratio: 16 / 6;
}

.onderhoud-banner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 640px) {
  .onderhoud-banner { aspect-ratio: 4 / 3; }
}

/* ---------- Over ons ---------- */

.over-indeling {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 5vw, 4.5rem);
}

/* Grid-items krijgen standaard min-width: auto, wat hun min-content-breedte
   respecteert (bijv. de width/height-attributen op <img>) ongeacht max-width:
   100% elders. Zonder deze reset houdt een grote foto de kolom open tot voorbij
   de viewport op mobiel — expliciet naar 0 zetten laat de foto echt meekrimpen. */
.over-indeling > * { min-width: 0; }

.over-indeling .kolom-beeld img {
  border-radius: var(--radius-groot);
  border: 1px solid var(--kleur-lijn);
  background: oklch(0.93 0.003 262);
  /* Zonder object-fit rekt de browser de echte foto naar de beeldverhouding
     van de width/height-attributen (bijv. 960x400), wat een gedrukt/gerekt
     resultaat geeft zodra de brondbestand een andere eigen verhouding heeft.
     cover behoudt de juiste verhouding en snijdt netjes bij. */
  object-fit: cover;
  width: 100%;
}

.cijfers-rij {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(115px, 1fr));
  gap: 1rem;
  margin-top: 2.5rem;
}

.cijfers-rij div {
  border-top: 2px solid var(--kleur-primair);
  padding-top: 0.8rem;
}

.cijfers-rij strong {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 700;
  display: block;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.cijfers-rij span { color: var(--kleur-gedempt); }

/* ---------- Verkoper-kaarten (menselijk gezicht + direct contact) ---------- */

.verkoper-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.4rem;
}

.verkoper-kaart {
  background: var(--kleur-vlak);
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius-groot);
  overflow: clip;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 200ms ease-out, border-color 200ms ease-out;
}

.verkoper-kaart:hover {
  transform: translateY(-3px);
  border-color: oklch(0.8 0.02 262);
  box-shadow: 0 14px 32px oklch(0.3 0.02 262 / 0.1);
}

/* Vierkante teamfoto, volle breedte van de kaart (geen klein rond
   avatarige), met een silhouet-placeholder als variant voor teamleden
   zonder foto (zie .is-placeholder, gezet door bouwVerkoperKaart). */
.verkoper-foto {
  width: 100%;
  aspect-ratio: 16 / 9; /* zelfde beeldverhouding als de autofoto's (.auto-kaart .foto) */
  flex: none;
  /* Flex-items krijgen standaard min-height: auto, wat de min-content-hoogte
     van de foto respecteert. Bij een liggend/staand teamfoto die groter is
     dan de 16:9-verhouding duwt dat de kaart alsnog open, ondanks
     aspect-ratio hierboven. min-height: 0 dwingt de aspect-ratio echt af. */
  min-height: 0;
  background: oklch(0.93 0.03 262);
  color: var(--kleur-primair);
}

.verkoper-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}

.verkoper-foto.is-placeholder { display: grid; place-items: center; }

.verkoper-foto.is-placeholder svg { width: 3.4rem; height: 3.4rem; }

.verkoper-info { padding: 1.15rem 1.3rem 0; }

.verkoper-info h3 { margin: 0; font-size: 1.08rem; font-weight: 700; letter-spacing: 0; }

.verkoper-info p { margin: 0.15rem 0 0; color: var(--kleur-gedempt); font-size: 0.92rem; }

.verkoper-acties {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem;
  margin-top: 1.1rem;
  padding: 0 1.3rem 1.4rem;
}

.knop-verkoper {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.95rem;
  border-radius: var(--radius-pill);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out;
}

.knop-verkoper.is-app { background: var(--kleur-whatsapp); color: #fff; }
.knop-verkoper.is-app:hover { background: var(--kleur-whatsapp-hover); }

.knop-verkoper.is-bel {
  background: transparent;
  color: var(--kleur-tekst);
  border-color: var(--kleur-lijn);
}
.knop-verkoper.is-bel:hover { border-color: var(--kleur-tekst); }

@media (max-width: 860px) {
  .over-indeling { grid-template-columns: 1fr; }
}

/* ---------- Contact ---------- */

.contact-indeling {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.contact-info-lijst {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  display: grid;
  gap: 1rem;
}

.contact-info-lijst a { color: var(--kleur-tekst); font-weight: 600; text-decoration-color: var(--kleur-primair); }

.contact-info-lijst .label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--kleur-gedempt);
}

.openingstijden {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.openingstijden td {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--kleur-lijn);
}

.openingstijden td:last-child { text-align: right; color: var(--kleur-gedempt); }

.contact-formulier {
  background: var(--kleur-vlak);
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius-groot);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  display: grid;
  gap: 1rem;
}

.contact-formulier label {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.35rem;
}

.formulier-melding {
  background: oklch(0.94 0.05 150);
  border: 1px solid var(--kleur-succes);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  display: none;
}

.formulier-melding.zichtbaar { display: block; }

@media (max-width: 860px) {
  .contact-indeling { grid-template-columns: 1fr; }
}

/* ---------- Inruilpagina ---------- */

/* Bewust asymmetrisch: een donker, "vast" toelichtingspaneel naast een
   licht wizard-formulier. Het paneel blijft (op desktop) in beeld tijdens
   het scrollen door de stappen, net als .detail-zijbalk op auto.html. */
.inruil-indeling {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.3fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.inruil-uitleg {
  background: var(--kleur-donker);
  color: var(--kleur-donker-tekst);
  border-radius: var(--radius-groot);
  padding: clamp(1.8rem, 3vw, 2.6rem);
  position: sticky;
  top: 6rem;
}

.inruil-uitleg h2 { color: #fff; }

.inruil-uitleg h3 {
  margin-top: 2.2rem;
  color: #fff;
  font-size: 1.05rem;
}

.inruil-stappen {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  display: grid;
  gap: 1.2rem;
}

.inruil-stappen li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.9rem;
  align-items: start;
}

.inruil-stappen strong { display: block; margin-bottom: 0.2rem; color: #fff; }

.inruil-stappen p { margin: 0; color: oklch(0.78 0.01 262); font-size: 0.95rem; }

.stap-nummer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--kleur-primair-licht);
  color: var(--kleur-donker);
  font-weight: 700;
  font-family: var(--font-display);
}

.inruil-uitleg .contact-info-lijst a { color: #fff; text-decoration-color: var(--kleur-primair-licht); }

.inruil-uitleg .contact-info-lijst .label { color: oklch(0.78 0.01 262); }

@media (max-width: 860px) {
  .inruil-uitleg { position: static; top: auto; }
}

/* ---------- Inruilwizard ---------- */

.wizard-stappen {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  list-style: none;
  padding: 0;
  margin: 0 0 1.8rem;
}

.wizard-stappen::before {
  content: "";
  position: absolute;
  top: 1.05rem;
  left: calc(100% / 6);
  right: calc(100% / 6);
  height: 2px;
  background: var(--kleur-lijn);
  z-index: 0;
}

.wizard-stappen li {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  text-align: center;
}

.wizard-stap-bol {
  width: 2.1rem;
  height: 2.1rem;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--kleur-bg);
  border: 2px solid var(--kleur-lijn);
  color: var(--kleur-gedempt);
  font-weight: 700;
  font-family: var(--font-display);
  transition: background 200ms ease-out, border-color 200ms ease-out, color 200ms ease-out;
}

.wizard-stap-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--kleur-gedempt);
  transition: color 200ms ease-out;
}

.wizard-stappen li.is-actief .wizard-stap-bol {
  background: var(--kleur-primair);
  border-color: var(--kleur-primair);
  color: #fff;
}

.wizard-stappen li.is-actief .wizard-stap-label { color: var(--kleur-tekst); }

.wizard-stappen li.is-voltooid .wizard-stap-bol {
  background: var(--kleur-succes);
  border-color: var(--kleur-succes);
  color: #fff;
}

.wizard-stap {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
  display: grid;
  gap: 1rem;
  animation: wizard-in 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* [hidden] heeft in de browser-standaardstijl een lage specificiteit
   (elementselector), dus de .wizard-stap-regel hierboven (display: grid)
   zou 'm zonder deze regel overstemmen. Expliciet herbevestigen dat een
   verborgen stap ook echt niet getoond wordt. */
.wizard-stap[hidden] { display: none; }

.wizard-stap-titel {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0;
}

/* Deze titel krijgt bij een stapwissel programmatisch focus (voor
   schermlezers), niet via Tab. De standaard focusring past hier niet visueel,
   maar we vervangen 'm door een zachte, altijd-zichtbare aanwijzing in plaats
   van 'm helemaal weg te laten. */
.wizard-stap-titel:focus {
  outline: none;
  box-shadow: inset 3px 0 0 var(--kleur-primair);
  padding-left: 0.6rem;
  margin-left: -0.6rem;
}

/* Veld-specifieke foutmeldingen (zie js/inruil.js) */
.veld-fout {
  display: block;
  margin: 0.3rem 0 0;
  font-size: 0.85rem;
  color: var(--kleur-fout);
}

input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: var(--kleur-fout);
}

.wizard-stap-intro { margin: -0.5rem 0 0; color: var(--kleur-gedempt); font-size: 0.95rem; }

.wizard-textarea { min-height: 8.5rem; resize: vertical; }

.wizard-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 0.4rem;
}

.wizard-nav [data-wizard-vorige] { margin-right: auto; }

@keyframes wizard-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .wizard-stap { animation: none; }
}

.formulier-rooster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* Foto-upload: dropzone + rooster met altijd gelijk bijgesneden voorvertoningen,
   ongeacht de afmetingen van de brondbestanden die een klant aanlevert. */
.foto-upload { display: grid; gap: 0.7rem; }

.foto-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
  padding: 1.6rem 1.2rem;
  border: 2px dashed oklch(0.78 0.008 262);
  border-radius: var(--radius);
  color: var(--kleur-gedempt);
  cursor: pointer;
  transition: border-color 140ms ease-out, background 140ms ease-out;
}

.foto-dropzone svg { color: var(--kleur-primair); }

.foto-dropzone strong { color: var(--kleur-tekst); }

.foto-dropzone:hover, .foto-upload .is-sleep { border-color: var(--kleur-primair); background: oklch(0.97 0.008 262); }

.foto-teller { margin: 0; font-size: 0.85rem; color: var(--kleur-gedempt); }

.foto-fout {
  display: grid;
  gap: 0.2rem;
  margin: 0;
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius);
  background: color-mix(in oklab, var(--kleur-fout) 10%, var(--kleur-bg));
  color: var(--kleur-fout);
  font-size: 0.85rem;
}

.foto-previews {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 0.6rem;
}

.foto-preview {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: clip;
  background: oklch(0.93 0.003 262);
  border: 1px solid var(--kleur-lijn);
}

.foto-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }

.foto-verwijder {
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  width: 1.6rem;
  height: 1.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: oklch(0.15 0.01 262 / 0.65);
  color: #fff;
  cursor: pointer;
}

.foto-verwijder:hover { background: oklch(0.15 0.01 262 / 0.9); }

@media (max-width: 860px) {
  .inruil-indeling { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .formulier-rooster { grid-template-columns: 1fr; }
}

/* ---------- Onderhoud & reparatie ---------- */

/* Rij met alleen de navigatiepijlen, direct boven de carousel (zelfde
   patroon als .reviews-kop-rij, maar zonder Google-badge). */
.onderhoud-kop-rij {
  display: flex;
  justify-content: flex-end;
  margin: 1.4rem 0;
}

.onderhoud-carousel { position: relative; }

/* Horizontale carousel i.p.v. een vast grid: bij een oneven aantal
   werkzaamheden bleef er anders 1 kaart alleen over op de laatste rij.
   Zelfde scroll-snap-mechaniek als .reviews-grid. */
.onderhoud-grid {
  display: flex;
  gap: 1.4rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 0.4rem;
  scrollbar-width: none;
}

.onderhoud-grid::-webkit-scrollbar { display: none; }

@media (prefers-reduced-motion: reduce) {
  .onderhoud-grid { scroll-behavior: auto; }
}

.onderhoud-kaart {
  scroll-snap-align: start;
  flex: 0 0 clamp(260px, 32vw, 340px);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  background: var(--kleur-bg);
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius-groot);
  padding: clamp(1.4rem, 3vw, 1.9rem);
}

@media (max-width: 720px) {
  .onderhoud-kaart { flex-basis: 78vw; }
}

.onderhoud-kaart h3 { margin: 0; font-size: 1.15rem; font-weight: 700; letter-spacing: 0; }

.onderhoud-kaart p { margin: 0; color: var(--kleur-gedempt); font-size: 0.96rem; flex: 1; }

.onderhoud-actie {
  margin-top: 0.2rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--kleur-lijn);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.7rem 0.9rem;
}

.onderhoud-prijs {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--kleur-primair);
}

.onderhoud-actie .knop { padding: 0.55rem 1.15rem; font-size: 0.9rem; white-space: nowrap; }

.onderhoud-toelichting { color: var(--kleur-gedempt); font-size: 0.9rem; margin-top: 1.4rem; }

/* ---------- Nieuws ---------- */

.nieuws-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.6rem 0 2.4rem;
}

.nieuws-filter button {
  font: inherit;
  cursor: pointer;
  padding: 0.5rem 1.1rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--kleur-lijn);
  background: var(--kleur-bg);
  color: var(--kleur-gedempt);
  font-weight: 600;
  font-size: 0.92rem;
  transition: background 140ms ease-out, border-color 140ms ease-out, color 140ms ease-out;
}

.nieuws-filter button:hover { border-color: var(--kleur-primair); color: var(--kleur-tekst); }

.nieuws-filter button[aria-pressed="true"] { background: var(--kleur-primair); border-color: var(--kleur-primair); color: #fff; }

/* Nieuwstegels: foto vult het hele blok, tekst staat er als donkere
   gradient-overlay overheen. Bewust een ander patroon dan de
   auto-kaarten (foto boven, tekst op wit vlak eronder) zodat het
   nieuwsoverzicht een eigen, redactioneel karakter krijgt — met
   dezelfde vaste beeldverhouding + object-fit: cover per tegelformaat,
   zodat elke foto toch altijd even netjes bijgesneden wordt. */
.nieuws-tegel {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-radius: var(--radius-groot);
  overflow: clip;
  background: var(--kleur-donker);
  text-decoration: none;
  color: #fff;
  transition: box-shadow 200ms ease-out;
}

.nieuws-tegel:hover { box-shadow: 0 20px 40px oklch(0.2 0.02 262 / 0.25); }

.nieuws-tegel > img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

.nieuws-tegel:hover > img { transform: scale(1.06); }

.nieuws-tegel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: oklch(0.08 0.01 262 / 0.62);
}

.nieuws-tegel-inhoud { padding: 1.3rem; display: flex; flex-direction: column; gap: 0.5rem; }

.nieuws-categorie {
  align-self: flex-start;
  display: inline-flex;
  padding: 0.28rem 0.8rem;
  border-radius: var(--radius-pill);
  background: var(--kleur-primair);
  border: 1px solid oklch(1 0 0 / 0.3);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
}

.nieuws-tegel h2, .nieuws-tegel h3 { margin: 0; color: #fff; }

.nieuws-tegel-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.85rem;
  font-weight: 600;
  color: oklch(0.94 0.005 262 / 0.85);
}

/* Uitgelicht: grote tegel bovenaan, met ruimte voor een korte samenvatting */
.nieuws-uitgelicht {
  aspect-ratio: 16 / 8;
  margin-bottom: 1.4rem;
}

.nieuws-uitgelicht .nieuws-tegel-inhoud { padding: clamp(1.6rem, 4vw, 2.6rem); gap: 0.7rem; max-width: 62ch; }

.nieuws-uitgelicht h2 { font-size: clamp(1.5rem, 3vw, 2.3rem); }

.nieuws-uitgelicht p { margin: 0; color: oklch(0.94 0.005 262 / 0.9); }

/* Rooster: bento-achtige afwisseling van formaten voor visueel ritme */
.nieuws-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  grid-auto-flow: dense;
  gap: 1.2rem;
}

.nieuws-grid .nieuws-tegel { aspect-ratio: 3 / 4; }

.nieuws-grid .nieuws-tegel--groot { grid-column: span 2; aspect-ratio: 16 / 9; }

.nieuws-leeg { color: var(--kleur-gedempt); padding: 2rem 0; }

@media (max-width: 760px) {
  .nieuws-uitgelicht { aspect-ratio: 4 / 5; }
  .nieuws-grid .nieuws-tegel--groot { grid-column: span 1; aspect-ratio: 3 / 4; }
}

/* ---------- Nieuwsartikel ---------- */
/* Gecentreerde, redactionele koptekst: badges, titel, intro en
   auteursregel staan allemaal gecentreerd boven de grote foto —
   bewust een ander, "magazine"-achtig ritme dan de rest van de site. */

.artikel-kop {
  max-width: 62ch;
  margin: 0 auto 2.2rem;
  text-align: center;
  display: grid;
  gap: 0.9rem;
  justify-items: center;
}

.artikel-badges {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9rem;
  color: var(--kleur-gedempt);
  font-weight: 600;
}

.artikel-kop h1 { margin: 0; }

.artikel-intro { margin: 0; font-size: 1.15rem; color: var(--kleur-gedempt); }

.artikel-byline {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--kleur-gedempt);
}

.artikel-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: oklch(0.93 0.03 262);
  color: var(--kleur-primair);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  flex: none;
}

.artikel-foto {
  aspect-ratio: 16 / 8;
  border-radius: var(--radius-groot);
  overflow: clip;
  border: 1px solid var(--kleur-lijn);
  background: oklch(0.93 0.003 262);
  margin-bottom: 2.6rem;
}

.artikel-foto img { width: 100%; height: 100%; object-fit: cover; }

.artikel-inhoud { max-width: 68ch; margin: 0 auto; display: grid; gap: 1.2rem; font-size: 1.08rem; }

.artikel-inhoud p { color: var(--kleur-tekst); margin: 0; }

.artikel-inhoud h2 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); margin: 0.6rem 0 0; }

.artikel-inhoud ul, .artikel-inhoud ol { margin: 0; padding-left: 1.4rem; display: grid; gap: 0.5rem; color: var(--kleur-tekst); }

.artikel-inhoud ol { font-variant-numeric: tabular-nums; }

.artikel-inhoud blockquote {
  margin: 0.4rem 0;
  padding: 0.2rem 0 0.2rem 1.4rem;
  border-left: 3px solid var(--kleur-primair);
  font-size: 1.2rem;
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--kleur-tekst);
}

.artikel-terug {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--kleur-gedempt);
  text-decoration: none;
  font-weight: 600;
  margin-bottom: 1.4rem;
}

.artikel-terug:hover { color: var(--kleur-tekst); }

/* ---------- Juridische pagina's ---------- */

.let-op-kader {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  background: oklch(0.97 0.03 90);
  border: 1px solid oklch(0.8 0.09 90);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  margin-bottom: 2.4rem;
  font-size: 0.95rem;
}

.let-op-kader svg { flex: none; width: 1.3rem; height: 1.3rem; margin-top: 0.15rem; color: oklch(0.55 0.14 70); }

.let-op-kader strong { display: block; margin-bottom: 0.15rem; }

.let-op-kader p { margin: 0; color: var(--kleur-gedempt); }

.juridisch-inhoud {
  max-width: 72ch;
  display: grid;
  gap: 1.6rem;
}

.juridisch-inhoud h2 { font-size: 1.35rem; margin-bottom: 0.3em; }

.juridisch-inhoud h2 span { color: var(--kleur-gedempt); font-weight: 500; margin-right: 0.4em; }

.juridisch-inhoud p, .juridisch-inhoud li { color: var(--kleur-gedempt); }

.juridisch-inhoud ul, .juridisch-inhoud ol { margin: 0; padding-left: 1.3rem; display: grid; gap: 0.35rem; }

.juridisch-inhoud table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }

/* De cookietabel kan op een smal scherm niet verder krimpen dan zijn
   min-content-breedte en rekte daardoor de hele pagina op; laat de tabel
   dan binnen zijn eigen kader scrollen i.p.v. de pagina. */
.juridisch-inhoud > div { min-width: 0; }

@media (max-width: 640px) {
  .juridisch-inhoud table { display: block; overflow-x: auto; }
}

.juridisch-inhoud th, .juridisch-inhoud td { text-align: left; padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--kleur-lijn); }

.juridisch-inhoud th { color: var(--kleur-tekst); font-weight: 700; }

.juridisch-laatst-bijgewerkt { color: var(--kleur-gedempt); font-size: 0.9rem; }

/* ---------- Footer ---------- */

.site-footer {
  background: var(--kleur-donker);
  color: oklch(0.72 0.008 262);
  padding-block: clamp(2.5rem, 5vw, 4rem) 1.5rem;
  margin-top: var(--sectie-ruimte);
  font-size: 0.98rem;
}

.site-footer .logo { color: #fff; }

.footer-kolommen {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.2fr;
  gap: 2rem;
  margin-bottom: 2.5rem;
}

.footer-kolommen h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.8rem;
  letter-spacing: 0;
}

.footer-kolommen ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }

.footer-kolommen a { color: oklch(0.72 0.008 262); text-decoration: none; }

.footer-kolommen a:hover { color: #fff; }

/* Social-iconen: automatisch gevuld door initSocials() op basis van
   SITE.socials in site-data.js. Leeg (geen URL's ingevuld) laat het
   .footer-socials-element gewoon leeg/verborgen. Ook hergebruikt op
   contact.html, buiten de donkere footer, vandaar de vaste donkere
   cirkel-achtergrond (werkt op elke ondergrond). */
.footer-socials {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.1rem;
}

.footer-socials:empty { display: none; }

.footer-socials a {
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: oklch(0.27 0.012 262);
  color: oklch(0.85 0.006 262);
  transition: background 150ms ease-out, color 150ms ease-out;
}

.footer-socials a:hover { background: var(--kleur-primair); color: #fff; }

.footer-socials svg { width: 1.05rem; height: 1.05rem; }

/* Vertrouwensbalk: subtiele rij met keurmerken tussen de footerkolommen en
   de juridische onderbalk, blendt bewust in met de rest van de donkere
   footer (geen felle logo's, gewoon dezelfde gedempte tekstkleur). */
.vertrouwen-balk {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(1.4rem, 4vw, 3rem);
  padding: 1.7rem 0;
  border-top: 1px solid oklch(0.3 0.01 262);
  /* Geen eigen border-bottom: .footer-onder eronder heeft al een
     border-top, dat is dezelfde scheidingslijn. Twee randen hier zou een
     dubbele haarlijn geven. */
}

.vertrouwen-item {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: oklch(0.72 0.008 262);
}

.vertrouwen-item svg { width: 1.2rem; height: 1.2rem; flex: none; color: var(--kleur-primair-licht); }

.footer-onder {
  border-top: 1px solid oklch(0.3 0.01 262);
  padding-top: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.8rem;
  font-size: 0.9rem;
}

.footer-onder a { color: inherit; text-decoration: none; }

.footer-onder a:hover { color: #fff; }

.footer-juridisch { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; }

@media (max-width: 860px) {
  .footer-kolommen { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
  /* Twee kolommen i.p.v. één: houdt de footer op mobiel compact. */
  .footer-kolommen { grid-template-columns: 1fr 1fr; gap: 1.75rem 1.25rem; }
}

/* ---------- Reveal-animatie ---------- */

.reveal {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1), transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .js .reveal.zichtbaar {
    opacity: 1;
    transform: none;
  }

  .hero-foto > img { transition: opacity 350ms ease-out; }
  .hero-foto > img.wisselen { opacity: 0; }
}

/* ---------- Hulpklassen ----------
   Vervangen de losse style=""-attributen die her en der in de HTML stonden;
   zo blijft alle opmaak in dit ene bestand. */

.mt-0 { margin-top: 0; }
.mt-klein { margin-top: 0.8rem; }
.mt-midden { margin-top: 1.8rem; }
.mt-groot { margin-top: 2rem; }
.mb-mini { margin-bottom: 0.2em; }
.mb-klein { margin-bottom: 0.8rem; }
.pt-0 { padding-top: 0; }
.pb-0 { padding-bottom: 0; }
.pt-krap { padding-top: 2rem; }
.blok-krap-boven { padding-block: 2rem var(--sectie-ruimte); }
.breedte-vol { width: 100%; }
.tekst-gedempt { color: var(--kleur-gedempt); }
.formulier-intro { color: var(--kleur-gedempt); margin-bottom: 0.5rem; }
.formulier-voetnoot { color: var(--kleur-gedempt); font-size: 0.85rem; margin: 0; }
.leeg-melding-sub { margin: 0.5rem auto 0; }

/* ---------- Kleinigheden ---------- */

::selection { background: var(--kleur-primair); color: #fff; }


/* ---------- Verhuur-kaarten (overgenomen van de template-uitbreiding) ---------- */

/* Voor een tweede sectie-kop bínnen dezelfde .sectie (bijv. twee gegroepeerde
   voertuig-secties op de verhuurpagina), zodat ze duidelijk gescheiden
   blijven zonder er een aparte .sectie (met volledige padding-block) voor
   te gebruiken — dat zou juist weer extra witruimte toevoegen. */
.sectie-kop--sub { margin-top: clamp(3rem, 6vw, 4.5rem); }

/* Modifier voor kaarten met precies 4 items (bijv. "Goed om te weten" op
   de verhuurpagina), zodat ze op één rij staan i.p.v. dat het 4e item
   alleen op een eigen regel valt. Op smalle schermen geldt nog steeds de
   2-koloms regel hieronder. */
.specs-grid--vier { grid-template-columns: repeat(4, 1fr); }

/* Op smalle schermen past 4 kolommen niet: terug naar 2. Staat na de
   basisregel hierboven zodat de bronvolgorde deze op mobiel laat winnen. */
@media (max-width: 560px) {
  .specs-grid--vier { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Verhuur: specifieke bedrijfswagens/aanhanger ----------
   Losse, niet-scrollende kaarten (i.t.t. .onderhoud-kaart in de carousel
   erboven) omdat dit maar 3 concrete voertuigen zijn met meer detail per
   stuk (afmetingen, prijs excl./incl. btw, vrije km) — een dl-lijst leent
   zich daar beter voor dan de eenregelige prijs van de categoriekaarten. */
.verhuur-voertuigen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.voertuig-kaart {
  display: flex;
  flex-direction: column;
  background: var(--kleur-bg);
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius-groot);
  overflow: clip;
}

/* Vaste hoogte + position:absolute i.p.v. aspect-ratio: op deze site is
   gebleken dat aspect-ratio op een flex-item met een losstaande <img> niet
   betrouwbaar is (zie .hero-thumbs). Deze aanpak is al bewezen elders. */
.voertuig-foto {
  position: relative;
  width: 100%;
  height: 170px;
  flex: none;
}

.voertuig-foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.voertuig-kaart-inhoud {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: clamp(1.4rem, 3vw, 1.9rem);
}

.voertuig-kaart h3 { margin: 0; font-size: 1.15rem; font-weight: 700; letter-spacing: 0; }

.voertuig-kaart-inhoud > p { margin: 0; color: var(--kleur-gedempt); font-size: 0.96rem; }

.voertuig-specs {
  display: grid;
  gap: 0.65rem;
  margin: 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--kleur-lijn);
}

.voertuig-specs > div { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.9rem; }

.voertuig-specs dt { color: var(--kleur-gedempt); }

.voertuig-specs dd { margin: 0; font-weight: 600; text-align: right; }

.voertuig-kaart .knop { align-self: flex-start; margin-top: 0.2rem; }

/* Prijs + knop-rij (hergebruikt .onderhoud-actie) i.p.v. een losse knop:
   binnen die rij staat de knop al verticaal gecentreerd naast de prijs,
   dus de align-self/margin-top van hierboven moeten hier niet gelden. */
.voertuig-kaart .onderhoud-actie .knop { align-self: center; margin-top: 0; }

/* ---------- Diensten-subpagina's (financieren / verzekeren / auto zoeken) ---------- */
.dienst-secties { display: grid; gap: 2.6rem; max-width: 66ch; }
.dienst-secties .intro-tekst { margin: 0; }
.dienst-secties h2 { margin-bottom: 0.6rem; }

.stappen-lijst, .punten-lijst { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: 0.9rem; }
.stappen-lijst { counter-reset: stap; }
.stappen-lijst li { position: relative; padding-left: 3rem; line-height: 1.5; }
.stappen-lijst li::before {
  counter-increment: stap; content: counter(stap);
  position: absolute; left: 0; top: -0.1rem;
  width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--kleur-primair); color: #fff;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem;
}
.punten-lijst li { position: relative; padding-left: 1.9rem; line-height: 1.5; }
.punten-lijst li::before {
  content: ""; position: absolute; left: 0; top: 0.55rem;
  width: 0.7rem; height: 0.7rem; border-radius: 50%;
  background: var(--kleur-primair);
}
.fijn-druk { margin-top: 1.3rem; font-size: 0.9rem; color: var(--kleur-gedempt); }

/* ---------- Ingesloten partnerwidgets (financiering / verzekering) ----------
   De echte, op Bot Auto's geconfigureerde embeds van Financial Lease en
   Dealerservices. In een strak kader zodat ze bij de rest van de site passen. */
.embed-intro { max-width: 66ch; }
.embed-intro h2 { margin-bottom: 0.4rem; }
.embed-intro p { color: var(--kleur-gedempt); }

.embed-kader {
  margin-top: 1.4rem;
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius-groot);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 24px 48px -34px oklch(0.2 0.02 262 / 0.4);
}

.embed-kader iframe {
  display: block;
  width: 100%;
  border: 0;
}

/* Ruime standaardhoogtes; de calculators scrollen intern als het nodig is.
   Een klein script (per pagina) past de hoogte automatisch aan wanneer de
   partner een resize-bericht stuurt. */
.embed-kader--financiering iframe { height: 900px; }
.embed-kader--verzekering iframe { height: 720px; }

@media (max-width: 640px) {
  .embed-kader--financiering iframe { height: 1080px; }
  .embed-kader--verzekering iframe { height: 860px; }
}

.embed-fijn-druk {
  margin-top: 0.9rem;
  font-size: 0.85rem;
  color: var(--kleur-gedempt);
}

/* ---------- Inruil: kenteken-invoer + RDW-status ---------- */
.kenteken-rij {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.9rem;
}
.kenteken-invoer { flex: 1 1 200px; }

.kenteken-veld {
  display: flex;
  align-items: stretch;
  max-width: 260px;
  border: 2px solid oklch(0.72 0.13 95);
  border-radius: 8px;
  overflow: hidden;
  background: oklch(0.9 0.17 100);
}
.kenteken-veld:focus-within { box-shadow: 0 0 0 3px oklch(0.75 0.14 95 / 0.45); }
.kenteken-vlag {
  display: grid;
  place-items: center;
  padding: 0 0.55rem;
  background: oklch(0.45 0.16 265);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
}
.kenteken-veld input {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0.55rem 0.7rem;
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1a1a1a;
}
.kenteken-veld input:focus { outline: none; box-shadow: none; }
.kenteken-veld input::placeholder { color: oklch(0.55 0.04 95); font-weight: 600; letter-spacing: 0.05em; }

.rdw-status {
  margin-top: 0.7rem;
  padding: 0.55rem 0.8rem;
  font-size: 0.92rem;
  border-radius: var(--radius);
  background: var(--kleur-vlak);
  border: 1px solid var(--kleur-lijn);
}
.rdw-status[data-soort="goed"] { background: oklch(0.95 0.05 150); border-color: oklch(0.82 0.1 150); color: oklch(0.36 0.09 150); }
.rdw-status[data-soort="fout"] { background: oklch(0.96 0.04 30); border-color: oklch(0.83 0.11 30); color: oklch(0.44 0.13 30); }
.rdw-status[data-soort="bezig"] { color: var(--kleur-gedempt); }

.wizard-subkop {
  margin: 1.6rem 0 0.2rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--kleur-lijn);
  font-size: 1.05rem;
}

/* ============================================================
   HUISSTIJL — lichte header, wordmark-logo en merkaccent
   ============================================================ */
.site-header { background: color-mix(in oklab, var(--kleur-bg) 92%, transparent); border-bottom: 1px solid var(--kleur-lijn); }
.knop-primair, .knop-primair:hover { color: #fff; }
.logo-woordmerk { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.05rem, 3.4vw, 1.5rem); letter-spacing: -0.015em; color: var(--kleur-tekst); white-space: nowrap; line-height: 1; }
.logo-woordmerk .accent { color: var(--kleur-primair); }
.site-footer .logo-woordmerk { color: #fff; font-size: 1.45rem; }
.site-footer .logo-woordmerk .accent { color: var(--kleur-primair-licht); }
.hero-overlay h1, .hero-overlay .hero-specs { text-shadow: 0 2px 14px oklch(0.1 0.01 262 / 0.55); }
.cta-band { color: var(--kleur-donker-tekst); }
.cta-band h2 { color: #fff; }
.cta-band p { color: color-mix(in oklab, var(--kleur-donker-tekst) 82%, transparent); }

/* ---------- Content-pagina's: beelden en dienstkaarten ---------- */
.inhoud-beeld {
  display: block;
  width: 100%;
  border-radius: var(--radius-groot);
  border: 1px solid var(--kleur-lijn);
  margin: 1.6rem 0;
}
.beeld-rij {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.8rem;
  align-items: center;
  margin: 1.6rem 0;
}
.beeld-rij img {
  width: 100%;
  border-radius: var(--radius-groot);
  border: 1px solid var(--kleur-lijn);
}
@media (max-width: 760px) { .beeld-rij { grid-template-columns: 1fr; } }

.dienst-kaarten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.dienst-kaart {
  display: flex;
  flex-direction: column;
  background: var(--kleur-bg);
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius-groot);
  overflow: clip;
}
.dienst-kaart img { width: 100%; height: 190px; object-fit: cover; }
.dienst-kaart-inhoud { padding: 1.2rem 1.35rem 1.45rem; }
.dienst-kaart-inhoud h3 { margin: 0 0 0.45rem; }
.dienst-kaart-inhoud p { margin: 0; color: var(--kleur-gedempt); }

.pakket-lijst { columns: 2; gap: 1.6rem; }
@media (max-width: 620px) { .pakket-lijst { columns: 1; } }

/* ============================================================
   VISITEKAARTJE-HOMEPAGE — bedrijfshero + diensten-grid
   ============================================================ */
.bedrijf-hero {
  position: relative;
  min-height: clamp(440px, 66vh, 620px);
  display: grid;
  align-items: end;
  overflow: hidden;
  isolation: isolate;
}
.bedrijf-hero-foto {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.bedrijf-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(0,0,0,0.86) 0%, rgba(0,0,0,0.45) 42%, rgba(0,0,0,0.12) 100%);
}
.bedrijf-hero-inhoud {
  position: relative; z-index: 2; color: #fff;
  padding-block: clamp(2.4rem, 6vw, 4.4rem);
  max-width: 660px;
}
.bedrijf-hero .kicker {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--kleur-primair-licht, #ffb347);
  margin-bottom: 0.9rem;
}
.bedrijf-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 0.9rem;
  text-wrap: balance; text-shadow: 0 2px 18px rgba(0,0,0,0.5);
}
.bedrijf-hero-inhoud p {
  font-size: clamp(1.02rem, 1.6vw, 1.2rem); line-height: 1.55;
  color: rgba(255,255,255,0.92); max-width: 52ch; margin: 0 0 1.6rem;
  text-shadow: 0 1px 10px rgba(0,0,0,0.4);
}
.bedrijf-hero-acties { display: flex; flex-wrap: wrap; gap: 0.75rem; }
@media (max-width: 560px) { .bedrijf-hero { align-items: end; min-height: 500px; } }

/* Diensten-grid (wat we aanbieden) */
.diensten-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin-top: 2rem;
}
.diensten-blok {
  display: flex; flex-direction: column; gap: 0.6rem;
  padding: 1.5rem 1.5rem 1.35rem;
  background: var(--kleur-bg); border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius-groot); text-decoration: none; color: inherit;
  transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.diensten-blok:hover {
  border-color: var(--kleur-primair);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.10);
}
.diensten-blok .d-icoon {
  width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: 12px; background: color-mix(in oklab, var(--kleur-primair) 14%, transparent);
  color: var(--kleur-primair); margin-bottom: 0.35rem;
}
.diensten-blok .d-icoon svg { width: 24px; height: 24px; }
.diensten-blok h3 { margin: 0; font-size: 1.12rem; }
.diensten-blok p { margin: 0; color: var(--kleur-gedempt); font-size: 0.95rem; line-height: 1.5; flex: 1; }
.diensten-blok .d-link {
  display: inline-flex; align-items: center; gap: 0.35rem;
  color: var(--kleur-primair); font-weight: 600; font-size: 0.92rem; margin-top: 0.2rem;
}
.diensten-blok:hover .d-link svg { transform: translateX(3px); }
.diensten-blok .d-link svg { width: 16px; height: 16px; transition: transform 180ms ease; }
@media (prefers-reduced-motion: reduce) { .diensten-blok, .diensten-blok .d-link svg { transition: none; } }
.bedrijf-hero-acties .knop-ghost { background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.55); backdrop-filter: blur(4px); }
.bedrijf-hero-acties .knop-ghost:hover { background: rgba(255,255,255,0.22); color: #fff; }

/* ============================================================
   DIENSTPAGINA'S v2 — rijkere, visuele tweekoloms opzet
   Vervangt de smalle eenkoloms .dienst-secties door een hero met
   sfeerbeeld, icoon-troeven en een artikel met sticky contactkolom.
   ============================================================ */

/* ---- Hero: introtekst links, groot sfeerbeeld rechts ---- */
.dienst-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding-block: clamp(2.4rem, 5vw, 4rem);
}
@media (max-width: 880px) { .dienst-hero { grid-template-columns: 1fr; padding-bottom: 1rem; } }

.dienst-hero-tekst { max-width: 48ch; }
.kruimel {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.82rem; font-weight: 600; color: var(--kleur-gedempt);
  margin-bottom: 1rem;
}
.kruimel a { color: var(--kleur-primair); text-decoration: none; }
.kruimel a:hover { text-decoration: underline; }
.kruimel svg { width: 0.85rem; height: 0.85rem; opacity: 0.6; }
.dienst-hero-tekst h1 {
  font-size: clamp(2.1rem, 4.6vw, 3.25rem); line-height: 1.04;
  letter-spacing: -0.02em; margin: 0 0 1rem; text-wrap: balance;
}
.dienst-hero-tekst .lead {
  font-size: clamp(1.08rem, 1.6vw, 1.22rem); color: var(--kleur-gedempt);
  line-height: 1.55; margin: 0 0 1.8rem;
}
.dienst-hero-acties { display: flex; flex-wrap: wrap; gap: 0.8rem; }

.dienst-hero-beeld {
  position: relative; border-radius: var(--radius-groot); overflow: clip;
  aspect-ratio: 4 / 3; background: var(--kleur-vlak-2);
  box-shadow: 0 34px 70px -34px oklch(0.2 0.02 60 / 0.5);
}
.dienst-hero-beeld img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Zwevende accent-badge op het beeld (bijv. "BOVAG erkend") */
.beeld-badge {
  position: absolute; left: 1rem; bottom: 1rem;
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: color-mix(in oklab, var(--kleur-donker) 88%, transparent);
  color: var(--kleur-donker-tekst); backdrop-filter: blur(6px);
  padding: 0.55rem 0.95rem; border-radius: var(--radius-pill);
  font-size: 0.85rem; font-weight: 600;
}
.beeld-badge svg { width: 1.05rem; height: 1.05rem; color: var(--kleur-primair-licht); }

/* ---- Troeven: icoon-kaarten in een lichte band ---- */
.troeven-band { background: var(--kleur-vlak); border-block: 1px solid var(--kleur-lijn); }
.dienst-troeven {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 1rem;
}
.troef {
  background: var(--kleur-bg); border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius-groot); padding: 1.5rem 1.4rem;
  display: grid; gap: 0.55rem; align-content: start;
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.troef:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px -26px oklch(0.2 0.02 60 / 0.55);
  border-color: color-mix(in oklab, var(--kleur-primair) 45%, var(--kleur-lijn));
}
.troef-icoon {
  width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center;
  background: color-mix(in oklab, var(--kleur-primair) 15%, transparent);
  color: var(--kleur-primair);
}
.troef-icoon svg { width: 25px; height: 25px; }
.troef h3 { margin: 0; font-size: 1.06rem; letter-spacing: -0.01em; }
.troef p { margin: 0; color: var(--kleur-gedempt); font-size: 0.94rem; line-height: 1.5; }

/* ---- Hoofdinhoud: artikel links + sticky aside rechts ---- */
.dienst-indeling {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.4rem);
  align-items: start;
}
@media (max-width: 920px) { .dienst-indeling { grid-template-columns: 1fr; } }

.dienst-inhoud { display: grid; gap: 2.3rem; min-width: 0; }
.dienst-inhoud > * { min-width: 0; }
.dienst-inhoud h2 { font-size: clamp(1.35rem, 2.2vw, 1.7rem); letter-spacing: -0.01em; margin: 0 0 0.7rem; }
.dienst-inhoud .blok > p { margin: 0 0 1rem; max-width: 68ch; }
.dienst-inhoud .blok > p:last-child { margin-bottom: 0; }
.dienst-inhoud .inhoud-beeld {
  width: 100%; border-radius: var(--radius-groot); display: block; margin: 0.4rem 0 0;
  border: 1px solid var(--kleur-lijn);
}

/* Beeld-duo (twee foto's naast elkaar) binnen het artikel */
.beeld-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.beeld-duo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--kleur-lijn); }
@media (max-width: 520px) { .beeld-duo { grid-template-columns: 1fr; } }

/* Check-grid: opsomming als kaartjes met vinkje, twee koloms */
.check-grid { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 0.7rem; }
.check-grid li {
  position: relative; padding: 0.9rem 1rem 0.9rem 2.7rem;
  background: var(--kleur-vlak); border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius); line-height: 1.45; font-size: 0.95rem;
}
.check-grid li::before {
  content: ""; position: absolute; left: 0.85rem; top: 0.95rem;
  width: 1.15rem; height: 1.15rem; border-radius: 50%;
  background: color-mix(in oklab, var(--kleur-succes) 16%, transparent);
  /* vinkje getekend met een achtergrond-mask */
}
.check-grid li::after {
  content: ""; position: absolute; left: 1.18rem; top: 1.28rem;
  width: 0.5rem; height: 0.28rem; border-left: 2px solid var(--kleur-succes);
  border-bottom: 2px solid var(--kleur-succes); transform: rotate(-45deg);
}

/* Genummerde stappen als kaartjes */
.stappen-kaarten { list-style: none; counter-reset: stap; margin: 1.1rem 0 0; padding: 0; display: grid; gap: 0.8rem; }
.stappen-kaarten li {
  position: relative; padding: 1.1rem 1.2rem 1.1rem 3.6rem;
  background: var(--kleur-bg); border: 1px solid var(--kleur-lijn); border-radius: var(--radius);
  line-height: 1.5;
}
.stappen-kaarten li::before {
  counter-increment: stap; content: counter(stap);
  position: absolute; left: 1rem; top: 1rem; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: var(--kleur-primair); color: #fff; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem;
}
.stappen-kaarten li strong { display: block; margin-bottom: 0.15rem; }

/* ---- Sticky aside ---- */
.dienst-aside { position: sticky; top: 92px; display: grid; gap: 1.1rem; }
@media (max-width: 920px) { .dienst-aside { position: static; top: auto; } }

.aside-kaart { border: 1px solid var(--kleur-lijn); border-radius: var(--radius-groot); padding: 1.5rem 1.4rem; background: var(--kleur-bg); }
.aside-kaart h3 { margin: 0 0 0.4rem; font-size: 1.12rem; letter-spacing: -0.01em; }
.aside-kaart > p { margin: 0 0 1.1rem; color: var(--kleur-gedempt); font-size: 0.95rem; line-height: 1.5; }

.aside-contact { background: var(--kleur-donker); border-color: transparent; color: var(--kleur-donker-tekst); }
.aside-contact h3 { color: #fff; }
.aside-contact > p { color: color-mix(in oklab, var(--kleur-donker-tekst) 78%, transparent); }
.aside-acties { display: grid; gap: 0.6rem; }
.aside-acties .knop { width: 100%; justify-content: center; }
.aside-openingsregel { margin: 1.1rem 0 0; padding-top: 1rem; border-top: 1px solid color-mix(in oklab, #fff 14%, transparent); font-size: 0.86rem; color: color-mix(in oklab, var(--kleur-donker-tekst) 72%, transparent); display: flex; align-items: center; gap: 0.5rem; }
.aside-openingsregel svg { width: 1rem; height: 1rem; color: var(--kleur-primair-licht); flex: none; }

.aside-punten ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.aside-punten li { position: relative; padding-left: 1.8rem; line-height: 1.45; font-size: 0.94rem; }
.aside-punten li svg { position: absolute; left: 0; top: 0.15rem; width: 1.15rem; height: 1.15rem; color: var(--kleur-primair); }

/* WhatsApp-knop in de sticky contactkaart */
.knop-wa { background: var(--kleur-whatsapp); color: #fff; }
.knop-wa:hover { background: var(--kleur-whatsapp-hover); color: #fff; }
.knop-wa svg, .aside-acties .knop-primair svg { width: 1.05rem; height: 1.05rem; flex: none; }

/* Omlijnde knop-variant voor de hero-acties op licht vlak */
.knop-omlijnd { background: transparent; color: var(--kleur-tekst); border: 1.5px solid var(--kleur-lijn); }
.knop-omlijnd:hover { border-color: var(--kleur-primair); color: var(--kleur-primair); background: color-mix(in oklab, var(--kleur-primair) 6%, transparent); }

@media (prefers-reduced-motion: reduce) {
  .troef { transition: none; }
  .troef:hover { transform: none; }
}

/* ============================================================
   MOBIEL — dienstpagina's: hero-knoppen niet laten afbreken
   ============================================================ */
/* Telefoonnummer in knoppen nooit over meerdere regels breken */
.dienst-hero-acties .knop span,
.aside-acties .knop span { white-space: nowrap; }

/* Icoon in de hero-knoppen expliciet begrenzen (anders schaalt de SVG
   zonder eigen maat mee met de vol-brede knop op mobiel) */
.dienst-hero-acties .knop svg { width: 1.15rem; height: 1.15rem; flex: none; }

@media (max-width: 560px) {
  /* Hero-knoppen vol-breed stapelen i.p.v. een smalle, afbrekende telefoonknop */
  .dienst-hero-acties { flex-direction: column; align-items: stretch; }
  .dienst-hero-acties .knop { width: 100%; justify-content: center; }
}

/* ============================================================
   MOBIEL v2 — foto-hoogte over-ons + swipe-carousels
   ============================================================ */

/* Over-ons foto: bij gestapelde layout niet de ruwe 896px hoogte-attribuut
   gebruiken maar een nette liggende banner */
@media (max-width: 860px) {
  .over-indeling .kolom-beeld img {
    aspect-ratio: 16 / 10;
    height: auto;
  }
}

/* Diensten, team en reviews als horizontale swipe-carousel op mobiel */
@media (max-width: 720px) {
  /* Reviews blijven een carousel (overrulet de verticale stapel hierboven) */
  .reviews-grid {
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 1rem;
  }
  .reviews-grid .review { flex: 0 0 86%; width: auto; scroll-snap-align: start; }

  /* Onze diensten als carousel */
  .diensten-grid {
    grid-template-columns: none;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: 0.9rem;
    margin-top: 1.6rem;
    scrollbar-width: none;
  }
  .diensten-grid::-webkit-scrollbar { display: none; }
  .diensten-grid .diensten-blok { flex: 0 0 80%; scroll-snap-align: start; }

  /* Team als carousel */
  .verkoper-grid {
    grid-template-columns: none;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: 1rem;
    scrollbar-width: none;
  }
  .verkoper-grid::-webkit-scrollbar { display: none; }
  .verkoper-grid .verkoper-kaart { flex: 0 0 82%; scroll-snap-align: start; }

  @media (prefers-reduced-motion: reduce) {
    .diensten-grid, .verkoper-grid { scroll-behavior: auto; }
  }
}


/* ============================================================
   BLAAK AUTOMOTIVE — wordmerk, sterren en thema-accenten
   ============================================================ */
.logo-woordmerk { display:inline-flex; align-items:center; gap:.55rem; letter-spacing:-0.01em; }
.logo-woordmerk .lw-sep { width:2px; height:1.05em; background:currentColor; opacity:.3; border-radius:2px; flex:0 0 auto; }
.logo-woordmerk .lw-thin { font-weight:400; letter-spacing:.2em; font-size:.72em; opacity:.92; }
.site-footer .logo-woordmerk .lw-thin { opacity:.78; }
@media (max-width:560px){ .logo-woordmerk .lw-thin { display:none; } .logo-woordmerk .lw-sep { display:none; } }
/* gouden reviewsterren als warm accent op het monochrome merk */
.review .sterren, .google-badge-cijfer .sterren { color:#c8a24a; }
/* zorg dat de hero-kicker leesbaar blijft op de donkere heldfoto */
.bedrijf-hero .kicker { color:#fff; opacity:.92; }
.bedrijf-hero-inhoud h1, .bedrijf-hero-inhoud p { color:#fff; }


/* ============================================================
   FIXES RONDE 2 — uitlijning, mobiele stats, diensten-carousel,
   reviews-hover, route onder adres.
   ============================================================ */
@media (min-width: 861px){
  .over-indeling .kolom-beeld{ height:100%; }
  .over-indeling .kolom-beeld img{ height:100%; }
}
@media (max-width: 560px){
  .cijfers-rij{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 721px){
  .diensten-grid{
    display:flex; grid-template-columns:none;
    overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
    gap:1rem; padding:4px 0 10px; scrollbar-width:none;
  }
  .diensten-grid::-webkit-scrollbar{ display:none; }
  .diensten-grid .diensten-blok{ flex:0 0 31%; scroll-snap-align:start; }
}
.review::before{ top:0.7rem; }
.reviews-grid{ padding-top:10px; padding-bottom:14px; }
.contact-info-lijst .route-onder{ display:block; margin-top:0.4rem; }