/* ============================================================
   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");
}
/* Barlow Condensed werd nergens in de stylesheet gebruikt; de twee
   @font-face-declaraties zijn daarom opgeruimd (de woff2-bestanden werden
   toch al niet gedownload — een @font-face laadt pas bij gebruik). */

: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: oklch(0.5 0.2 262);      /* merkkleur: knoppen, links */
  --kleur-primair-hover: oklch(0.44 0.19 262);
  --kleur-primair-licht: oklch(0.75 0.13 262); /* lichte tint van de merkkleur, voor gebruik op donkere vlakken */
  --kleur-donker: oklch(0.17 0.008 262);    /* donkere blokken (footer, badges) */
  --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);
}

/* 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); }

.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;
}

/* ---------- 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 vergroot het klikbare gebied, de negatieve marge compenseert. */
  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:
    radial-gradient(120% 70% at 50% 0%, color-mix(in oklab, var(--kleur-primair) 20%, transparent) 0%, transparent 60%),
    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.15rem;
}

.hoofd-nav-links a {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 0.85rem;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4.6vw, 2.2rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--kleur-donker-tekst);
  padding: 0.35rem 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;
}

.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-links a::after {
  content: "";
  position: absolute;
  left: 0.2rem;
  right: 0.2rem;
  bottom: 0.3rem;
  height: 2px;
  background: var(--kleur-primair-licht);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.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-links a:hover::after,
.hoofd-nav-links a:focus-visible::after,
.hoofd-nav-links a[aria-current="page"]::after { transform: scaleX(1); }

.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;
}

/* Donkere zweem onderin zodat tekst op elke foto leesbaar is */
.hero-foto::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  background: linear-gradient(to top, oklch(0.1 0.01 262 / 0.72), transparent);
  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) {
  .hero-thumbs {
    flex-direction: row;
    top: auto;
    right: auto;
    position: static;
    order: 2;
    align-self: start;
    margin: 0.9rem auto 0;
    box-shadow: none;
    background: transparent;
    padding: 0;
  }
  .hero-thumbs button { width: 72px; height: 45px; }
  .hero-foto { min-height: 440px; }
  .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; }
  .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;
}

/* Uitgelichte auto (zie SITE.uitgelicht in cars-data.js / het portaal) krijgt
   in het volledige aanbod-overzicht een dubbel zo brede kaart en dus een
   grotere foto, zodat 'm er duidelijk uitspringt tussen de rest. */
.auto-kaart--groot { grid-column: span 2; }

/* Let op: `span 2` maakt in een 1-koloms auto-fill-grid een *impliciete*
   tweede kolom aan en duwt de pagina dan zijwaarts uit beeld (op 375px
   gemeten: 139px horizontale scroll). Op smal scherm dus terug naar een
   gewone kaart. */
@media (max-width: 700px) {
  .auto-kaart--groot { grid-column: auto; }
}

.auto-kaart--groot .kaart-inhoud h3 { font-size: 1.3rem; }

.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;
  /* Flex-items krijgen standaard min-height: auto, wat de min-content-hoogte
     van de foto respecteert. Auto-foto's komen in wisselende formaten binnen
     (telefoonfoto's, andere crops); zonder deze reset duwt een foto die
     hoger is dan 16:9 de kaart alsnog open, ondanks aspect-ratio hierboven. */
  min-height: 0;
  background: oklch(0.93 0.003 262);
}

.auto-kaart .foto img {
  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); }

/* Donkere tekst i.p.v. wit: wit op --kleur-amber haalt geen 4.5:1 contrast. */
.badge-uitgelicht { background: var(--kleur-amber); color: var(--kleur-donker); }

/* 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 { 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);
}

/* 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); }

.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-template-columns: repeat(3, 1fr); 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); }

/* 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) {
  .review { flex-basis: 78vw; }
}

.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:
    radial-gradient(70% 130% at 85% 15%, oklch(0.62 0.16 262 / 0.5), transparent 70%),
    var(--kleur-primair);
  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; }

/* ---------- 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; }

/* ---------- 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: linear-gradient(to top, oklch(0.08 0.01 262 / 0.92) 0%, oklch(0.08 0.01 262 / 0.55) 40%, oklch(0.08 0.01 262 / 0) 75%);
}

.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 (4 kolommen met lange celteksten) kan op een smal scherm
   niet verder krimpen dan zijn min-content-breedte en rekte daardoor de
   hele pagina op (op 375px gemeten: 136px horizontale scroll). 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) {
  .footer-kolommen { grid-template-columns: 1fr; }
}

/* ---------- 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; }