/*
 * Hassan Commerce: het stijlblad van de site en het beheer, uit demo 15 (stijl.css van v6,
 * met de hand gebouwd op 23 oktober 2026). Elke regel staat onder .site, de klasse van body.
 * Wat de echte site meer nodig heeft dan de demo (formulieren zonder JavaScript, meldingen,
 * de fiche op A5), staat in aanvulling.css, zodat dit blad gelijk blijft aan de demo.
 */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("/fonts/archivo-100-900.woff2") format("woff2");
}

html { scroll-padding-bottom: 6rem; }
body { margin: 0; }
.site { min-height: 100vh; }
.site [hidden] { display: none !important; }
.site :where(a[href], summary, button, input, select, textarea):focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }

/* Hassan Commerce: de raamkaart. Archivo in twee breedtes, rood van het logo, antraciet en wit. */
.site {
  --rood: #D71920;
  --rood-diep: #A8121A;
  --rood-zacht: #FCE8E9;
  --antraciet: #20252B;
  --asfalt: #2C333B;
  --nacht: #16191E;
  --staal: #555E69;
  --mist: #A9B1BA;
  --lijn: #DDE2E7;
  --grijs: #F3F5F7;
  --wit: #FFFFFF;
  --groen: #287A45;
  --groen-zacht: #E4F2E9;
  --breed: 118%;
  --halfbreed: 108%;
  --rand: 0.375rem;
  background: var(--wit);
  color: var(--antraciet);
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  font-stretch: 100%;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

.site *, .site *::before, .site *::after { box-sizing: border-box; }
.site img { display: block; max-width: 100%; height: auto; }
.site a { color: inherit; }
.site p, .site h1, .site h2, .site h3, .site h4, .site ul, .site ol, .site dl, .site dd, .site figure, .site blockquote { margin: 0; }
.site ul, .site ol { padding: 0; list-style: none; }

.site h1, .site h2, .site h3 {
  font-weight: 800;
  font-stretch: var(--breed);
  letter-spacing: -0.012em;
  line-height: 1.04;
  color: var(--antraciet);
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: manual;
}
.site h1 { font-size: clamp(2rem, 1.2rem + 3.6vw, 4.4rem); }
@media (max-width: 47.99rem) { .site h1, .site h2 { font-stretch: 108%; } }
.site h2 { font-size: clamp(1.85rem, 1.35rem + 1.9vw, 2.9rem); }
.site h3 { font-size: 1.3rem; font-stretch: var(--halfbreed); line-height: 1.15; letter-spacing: -0.005em; }
.site p { max-width: 38em; text-wrap: pretty; }

.site .binnen { width: 100%; max-width: 77rem; margin-inline: auto; padding-inline: 1.25rem; }
.site .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.site .ic { width: 1.25em; height: 1.25em; flex: none; }
.site .inleiding { font-size: 1.1875rem; line-height: 1.55; color: var(--staal); }
.site .klein { font-size: 0.9375rem; color: var(--staal); }

/* Knoppen */
.site .knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 3.125rem;
  padding: 0.75rem 1.35rem;
  border-radius: var(--rand);
  border: 2px solid transparent;
  font-weight: 700;
  font-stretch: var(--halfbreed);
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.site .knop--rood { background: var(--rood); color: var(--wit); }
.site .knop--rood:hover { background: var(--rood-diep); }
.site .knop--donker { background: var(--antraciet); color: var(--wit); }
.site .knop--donker:hover { background: var(--nacht); }
.site .knop--rand { background: var(--wit); color: var(--antraciet); border-color: var(--antraciet); }
.site .knop--rand:hover { background: var(--grijs); }
.site .knop--licht { background: var(--wit); color: var(--antraciet); }
.site .knop--licht:hover { background: var(--grijs); }
.site .knop--spook { background: transparent; color: var(--wit); border-color: rgba(255, 255, 255, 0.55); }
.site .knop--spook:hover { border-color: var(--wit); background: rgba(255, 255, 255, 0.08); }
.site .knoppen { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.site .tekstlink {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 700;
  color: var(--antraciet);
  text-decoration: underline;
  text-decoration-color: var(--rood);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}
.site .tekstlink:hover { color: var(--rood-diep); }

/* Het merk */
.site .merk {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--antraciet);
}
.site .merk-wagen { width: 3.4rem; height: auto; color: var(--rood); flex: none; }
.site .merk-naam { display: flex; flex-direction: column; line-height: 1; }
.site .merk-naam strong { font-size: 1.2rem; font-weight: 800; font-stretch: 122%; letter-spacing: -0.01em; }
.site .merk-naam span { margin-top: 0.22rem; font-size: 0.8125rem; font-weight: 600; font-stretch: 112%; letter-spacing: 0.04em; color: var(--staal); }

/* Kop */
.site .kop {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--wit);
  border-bottom: 1px solid var(--lijn);
}
.site .kop-binnen {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 4.5rem;
  max-width: 77rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}
.site .kop .merk { margin-right: auto; }
.site .nav-breed { display: none; gap: 0.25rem; }
.site .nav-breed a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.85rem;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  border-radius: var(--rand);
}
.site .nav-breed a:hover { background: var(--grijs); }
.site .nav-breed a[aria-current] { color: var(--rood-diep); box-shadow: inset 0 -3px 0 var(--rood); border-radius: 0; }
.site .taal { display: flex; gap: 0.15rem; font-size: 0.875rem; font-weight: 700; }
.site .taal a, .site .taal strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  min-height: 2.25rem;
  border-radius: var(--rand);
  text-decoration: none;
}
.site .taal strong { background: var(--antraciet); color: var(--wit); }
.site .taal a { color: var(--staal); }
.site .taal a:hover { background: var(--grijs); color: var(--antraciet); }
.site .taal-breed { display: none; }
.site .kop-bel { display: none; }
.site .kop-bel-klein {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.875rem;
  height: 2.875rem;
  border-radius: var(--rand);
  background: var(--rood);
  color: var(--wit);
}
.site .menu { position: relative; }
.site .menu summary {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.875rem;
  padding: 0 0.9rem;
  border: 2px solid var(--antraciet);
  border-radius: var(--rand);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.site .menu summary::-webkit-details-marker { display: none; }
.site .menu[open] summary { background: var(--antraciet); color: var(--wit); }
.site .menu-lijst {
  position: absolute;
  right: 0;
  top: calc(100% + 0.6rem);
  width: min(20rem, calc(100vw - 2.5rem));
  padding: 0.6rem;
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: 0.6rem;
  box-shadow: 0 18px 40px -18px rgba(22, 25, 30, 0.45);
}
.site .menu-lijst nav { display: grid; }
.site .menu-lijst nav a {
  display: flex;
  align-items: center;
  min-height: 3rem;
  padding: 0 0.85rem;
  font-weight: 700;
  font-stretch: var(--halfbreed);
  text-decoration: none;
  border-radius: var(--rand);
}
.site .menu-lijst nav a:hover { background: var(--grijs); }
.site .menu-lijst nav a[aria-current] { color: var(--rood-diep); }
.site .menu-lijst .taal { padding: 0.6rem 0.85rem 0.3rem; border-top: 1px solid var(--lijn); margin-top: 0.4rem; }

/* De held */
.site .held { position: relative; background: var(--grijs); }
.site .held-foto { position: relative; }
.site .held-foto img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; object-position: 55% 100%; }
.site .held-raster { position: relative; display: grid; gap: 1.5rem; padding-bottom: 2.5rem; }
.site .bord {
  position: relative;
  margin-top: -1rem;
  padding: 1.75rem 1.4rem 1.6rem;
  background: var(--wit);
  border-top: 0.5rem solid var(--rood);
  border-radius: 0 0 var(--rand) var(--rand);
  box-shadow: 0 30px 60px -40px rgba(22, 25, 30, 0.6);
}
.site .bord-plek {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.9rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--staal);
}
.site .bord-plek .ic { color: var(--rood); }
.site .bord h1 { margin-bottom: 1rem; font-size: 2.15rem; font-stretch: 108%; }
.site .bord .inleiding { margin-bottom: 1.5rem; }
.site .feiten { display: grid; gap: 0.25rem; align-content: end; }
.site .feit {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 0.75rem;
  align-items: start;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--lijn);
  text-decoration: none;
}
.site .feit:last-child { border-bottom: 0; }
.site .feit-ic {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--wit);
  color: var(--rood);
  border: 1px solid var(--lijn);
}
.site .feit strong { display: block; font-weight: 700; font-stretch: var(--halfbreed); }
.site .feit strong + span { display: block; font-size: 0.95rem; color: var(--staal); }
.site a.feit:hover strong { color: var(--rood-diep); text-decoration: underline; text-underline-offset: 0.2em; }

/* Banden */
.site .band { padding-block: clamp(3.5rem, 2rem + 5vw, 6.5rem); }
.site .band--grijs { background: var(--grijs); }
.site .band--donker { background: var(--antraciet); color: var(--wit); }
.site .band--donker h2, .site .band--donker h3 { color: var(--wit); }
.site .band--donker .inleiding, .site .band--donker .klein { color: var(--mist); }
.site .bandkop { display: grid; gap: 1rem; margin-bottom: 2.5rem; }
.site .bandkop .inleiding { max-width: 34em; }

/* De raamkaarten */
.site .wagens { display: grid; gap: 1.25rem; align-items: start; }
.site .wagens > .inkoop { align-self: stretch; }
.site .raamkaart {
  display: flex;
  flex-direction: column;
  background: var(--wit);
  border-radius: var(--rand);
  overflow: hidden;
  border: 1px solid var(--lijn);
}
.site .raamkaart-foto { position: relative; background: #E9ECEF; }
.site .raamkaart-foto img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 78%; }
.site .label {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: 0 0.6rem;
  border-radius: 999px;
  background: var(--wit);
  color: var(--antraciet);
  font-size: 0.8125rem;
  font-weight: 700;
}
.site .raamkaart-foto .label { position: absolute; top: 0.75rem; left: 0.75rem; box-shadow: 0 1px 0 rgba(22, 25, 30, 0.12); }
.site .raamkaart-tekst {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1;
  padding: 1.2rem 1.25rem 1.25rem;
  border-top: 0.3125rem solid var(--rood);
}
.site .raamkaart-tekst h3 { font-size: 1.35rem; }
.site .uitvoering { color: var(--staal); font-size: 0.95rem; }
.site .prijs {
  margin-top: 0.7rem;
  font-size: 2rem;
  font-weight: 800;
  font-stretch: 112%;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
}
.site .specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem 1rem;
  margin: 1.1rem 0 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--lijn);
}
.site .specs dt { font-size: 0.8125rem; color: var(--staal); line-height: 1.2; }
.site .specs dd { font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.3; }
.site .raamkaart .tekstlink { margin-top: auto; }

.site .inkoop {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.75rem 1.5rem;
  border-radius: var(--rand);
  background: var(--antraciet);
  color: var(--wit);
}
.site .inkoop .merk-wagen { width: min(14rem, 70%); }
.site .inkoop h3 { color: var(--wit); font-size: clamp(1.6rem, 1.3rem + 1vw, 2rem); margin-bottom: 0.75rem; }
.site .inkoop p { color: var(--mist); margin-bottom: 1.5rem; }
.site .inkoop .tekstlink { margin-top: 1.1rem; color: var(--wit); }
.site .inkoop .tekstlink:hover { color: var(--wit); }

/* Stappen en het voorproefje van het formulier */
.site .verkoop { display: grid; gap: 3rem; align-items: start; }
.site .verkoop h2 { margin-bottom: 1rem; }
.site .stappen { display: grid; gap: 0; counter-reset: stap; margin-top: 2rem; }
.site .stappen li {
  position: relative;
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  gap: 1rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--lijn);
  counter-increment: stap;
}
.site .stappen li::before {
  content: counter(stap);
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: var(--antraciet);
  color: var(--wit);
  font-weight: 800;
  font-stretch: 120%;
  font-size: 1.25rem;
}
.site .stappen h3 { margin-bottom: 0.3rem; }
.site .stappen p { color: var(--staal); }

.site .formkaart {
  padding: 1.5rem 1.25rem;
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-top: 0.5rem solid var(--rood);
  border-radius: 0 0 0.6rem 0.6rem;
  box-shadow: 0 40px 70px -50px rgba(22, 25, 30, 0.55);
}
.site .formkaart > h2, .site .formkaart > h3 { margin-bottom: 0.4rem; }
.site .formkaart > .klein { margin-bottom: 1.25rem; }
.site .velden { display: grid; gap: 1rem; align-content: start; }
.site .velden-twee { display: grid; gap: 1rem; }
.site .veld { display: grid; gap: 0.35rem; align-content: start; }
.site .veld-label { font-weight: 700; font-size: 0.95rem; }
.site .veld-label small { font-weight: 500; color: var(--staal); font-size: 0.875rem; }
.site .invoer {
  display: flex;
  align-items: center;
  min-height: 3.125rem;
  padding: 0.7rem 0.9rem;
  border: 1.5px solid #C5CCD3;
  border-radius: var(--rand);
  background: var(--wit);
  color: var(--antraciet);
}
.site .invoer--leeg { color: #6B7480; }
.site .invoer--groot { min-height: 7rem; align-items: flex-start; }
.site .invoer--keuze { justify-content: space-between; }
.site .invoer--keuze::after {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  border-right: 2px solid var(--antraciet);
  border-bottom: 2px solid var(--antraciet);
  transform: rotate(45deg) translateY(-0.2rem);
}
.site .chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.site .chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  padding: 0 1rem;
  border: 1.5px solid #C5CCD3;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  background: var(--wit);
}
.site .chip--aan { border-color: var(--antraciet); background: var(--antraciet); color: var(--wit); }
.site .upload {
  display: grid;
  justify-items: center;
  gap: 0.4rem;
  padding: 1.5rem 1rem;
  border: 2px dashed #B9C1C9;
  border-radius: 0.6rem;
  background: var(--grijs);
  text-align: center;
}
.site .upload strong { font-stretch: var(--halfbreed); }
.site .upload .klein { max-width: 24em; }
.site .upload-ic {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--wit);
  color: var(--rood);
  border: 1px solid var(--lijn);
}
.site .formkaart .knop { width: 100%; margin-top: 1.25rem; }
.site .privacyregel { margin-top: 0.9rem; font-size: 1rem; color: var(--staal); }
.site .privacyregel a { color: var(--antraciet); font-weight: 600; }

/* Bevestiging na versturen of bewaren: :target, zonder script */
.site .bevestiging {
  display: none;
  gap: 0.75rem;
  grid-template-columns: 2.25rem 1fr;
  align-items: start;
  margin-bottom: 1.25rem;
  padding: 1rem 1.1rem;
  border-radius: var(--rand);
  background: var(--groen-zacht);
  border: 1px solid #B9DCC6;
  color: #14432A;
}
.site .bevestiging:target { display: grid; }
.site .bevestiging .ic-rond {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--groen);
  color: var(--wit);
}
.site .bevestiging strong { display: block; }

/* Reviews */
.site .reviews { display: grid; gap: 2rem; }
.site .review { display: grid; gap: 0.9rem; align-content: start; padding-top: 1.5rem; border-top: 2px solid var(--antraciet); }
.site .sterren { display: flex; gap: 0.15rem; color: var(--rood); }
.site .ster { width: 1.15rem; height: 1.15rem; }
.site .review blockquote p {
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.55rem);
  font-weight: 600;
  font-stretch: var(--halfbreed);
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.site .review cite { font-style: normal; font-size: 0.95rem; color: var(--staal); }
.site .reviews-voet { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 2.5rem; }

/* Bezoek */
.site .bezoek { display: grid; gap: 2.5rem; }
.site .adres-groot {
  font-style: normal;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  font-weight: 800;
  font-stretch: var(--breed);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 1.5rem 0 1.75rem;
}
.site .uren { display: grid; gap: 0; }
.site .uren div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.8rem 0; border-bottom: 1px solid var(--lijn); }
.site .uren dt { font-weight: 600; }
.site .uren dd { font-variant-numeric: tabular-nums; text-align: right; }
.site .band--donker .uren div { border-color: rgba(255, 255, 255, 0.16); }
.site .band--donker .uren dd { color: var(--wit); }
.site .uren .dicht { color: var(--staal); }
.site .band--donker .uren .dicht { color: var(--mist); }
.site .uren-kop { margin-bottom: 0.5rem; font-size: 1.1rem; }

/* Paginakop van de andere pagina's */
.site .paginakop { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(2rem, 1rem + 3vw, 3.5rem); background: var(--grijs); }
.site .paginakop-raster { display: grid; gap: 2rem; align-items: center; }
.site .paginakop h1 { margin-bottom: 1rem; }
.site .paginakop .knoppen { margin-top: 1.75rem; }
.site .paginakop-foto img { width: 100%; border-radius: var(--rand); object-fit: cover; }
.site .paginakop-foto--hoog img { aspect-ratio: 4 / 5; }
.site .kruimel { margin-bottom: 1.25rem; font-size: 1rem; color: var(--staal); }
.site .kruimel a { color: var(--antraciet); font-weight: 600; }

.site .kolommen { display: grid; gap: 2.5rem; align-items: start; }
.site .zijkaart {
  display: grid;
  gap: 1rem;
  padding: 1.5rem 1.25rem;
  border-radius: 0.6rem;
  background: var(--antraciet);
  color: var(--wit);
}
.site .zijkaart h2, .site .zijkaart h3 { color: var(--wit); font-size: 1.4rem; }
.site .zijkaart p { color: var(--mist); }
.site .zijkaart .knop { width: 100%; }
.site .lijst-vink { display: grid; gap: 0.65rem; }
.site .lijst-vink li { display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.6rem; align-items: start; }
.site .lijst-vink .ic { color: var(--rood); margin-top: 0.15rem; width: 1.2rem; height: 1.2rem; }
.site .zijblok { display: grid; gap: 1.25rem; }
.site .kaartje { padding: 1.5rem 1.25rem; border: 1px solid var(--lijn); border-radius: 0.6rem; background: var(--wit); }
.site .kaartje h2, .site .kaartje h3 { font-size: 1.3rem; margin-bottom: 0.9rem; }
.site .formsectie { padding-top: 1.5rem; margin-top: 1.5rem; border-top: 1px solid var(--lijn); }
.site .formsectie:first-of-type { padding-top: 0; margin-top: 0; border-top: 0; }
.site .formsectie > h3 { margin-bottom: 1rem; font-size: 1.15rem; }

/* Over ons */
.site .brede-foto img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--rand); }
.site .twee { display: grid; gap: 2rem; }
.site .twee h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin-bottom: 0.75rem; }
.site .twee p + p { margin-top: 0.9rem; }
.site .slotband { display: grid; gap: 1.5rem; align-items: center; }

/* Contact */
.site .wegen { display: grid; gap: 0.75rem; }
.site .weg {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1rem;
  align-items: center;
  min-height: 4.75rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--lijn);
  border-radius: 0.6rem;
  background: var(--wit);
  text-decoration: none;
}
.site .weg { position: relative; }
.site .weg:hover { border-color: var(--antraciet); }
.site .weg strong a { text-decoration: none; }
.site .weg strong a::after { content: ""; position: absolute; inset: 0; border-radius: 0.6rem; }
.site .weg strong a:focus-visible { outline: none; }
.site .weg:has(a:focus-visible) { outline: 3px solid var(--antraciet); outline-offset: 2px; }
.site .weg-ic {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--rood-zacht);
  color: var(--rood-diep);
}
.site .weg strong { display: block; font-weight: 800; font-stretch: var(--halfbreed); font-size: 1.1rem; }
.site .weg strong + span { display: block; color: var(--staal); font-size: 0.95rem; }
.site .tekstblok h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin-bottom: 0.9rem; }
.site .tekstblok p + p { margin-top: 0.9rem; }

/* Voet */
.site .voet { background: var(--nacht); color: var(--mist); padding: 3.5rem 0 7rem; font-size: 0.98rem; }
.site .voet .merk { color: var(--wit); }
.site .voet .merk-naam span { color: var(--mist); }
.site .voet-raster { display: grid; gap: 2.25rem; }
.site .voet h2 { font-size: 1rem; font-stretch: var(--halfbreed); color: var(--wit); margin-bottom: 0.75rem; letter-spacing: 0; }
.site .voet a { color: var(--wit); }
.site .voet address { font-style: normal; }
.site .voet-uren div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.2rem 0; }
.site .voet-uren dd { color: var(--wit); font-variant-numeric: tabular-nums; }
.site .voet-contact a { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.5rem; text-decoration: none; font-weight: 600; }
.site .voet-onder {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  align-items: center;
  margin-top: 2.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 1rem;
}
.site .voet-onder a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.site .voet-onder .taal a { color: var(--mist); }
.site .voet-onder .taal a:hover { background: rgba(255, 255, 255, 0.1); color: var(--wit); }
.site .voet-onder .taal strong { background: var(--wit); color: var(--nacht); }
.site .voet-wettelijk { margin-right: auto; }

/* De balk op een gsm */
.site .belbalk {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom));
  background: var(--wit);
  border-top: 1px solid var(--lijn);
  box-shadow: 0 -10px 30px -20px rgba(22, 25, 30, 0.5);
}
.site .belbalk a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 3rem;
  border-radius: var(--rand);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
}
.site .belbalk .bel { background: var(--rood); color: var(--wit); }
.site .belbalk .wa, .site .belbalk .route { background: var(--grijs); color: var(--antraciet); border: 1px solid var(--lijn); }

/* Het beheer */
.site .beheerkop { background: var(--antraciet); color: var(--wit); }
.site .beheerkop-binnen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  max-width: 82rem;
  margin-inline: auto;
  padding: 0.6rem 1.25rem;
}
.site .beheerkop .merk { color: var(--wit); margin-right: auto; }
.site .beheerkop .merk-wagen { width: 2.6rem; }
.site .beheerkop .merk-naam span { color: var(--mist); }
.site .beheer-nav { display: flex; gap: 0.25rem; order: 3; width: calc(100% + 2.5rem); margin: 0 -1.25rem; padding: 0 1.25rem; overflow-x: auto; scrollbar-width: none; }
.site .beheer-nav a, .site .beheer-uit a {
  display: inline-block;
  line-height: 2.75rem;
  padding: 0 0.85rem;
  border-radius: var(--rand);
  color: var(--wit);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
}
.site .beheer-nav a:hover, .site .beheer-uit a:hover { background: rgba(255, 255, 255, 0.1); }
.site .beheer-nav a[aria-current] { background: rgba(255, 255, 255, 0.14); box-shadow: inset 0 -3px 0 var(--rood); }
.site .teller {
  display: inline;
  margin-left: 0.4rem;
  padding: 0.1em 0.5em;
  border-radius: 999px;
  background: var(--rood);
  color: var(--wit);
  font-size: inherit;
  font-weight: 800;
}
.site .beheer-uit { display: flex; gap: 0.25rem; }
.site .beheer-uit a { color: var(--mist); }

.site .beheer { background: var(--grijs); min-height: 100vh; padding-bottom: 4rem; }
.site .scherm { max-width: 82rem; margin-inline: auto; padding: 2rem 1.25rem 0; }
.site .scherm-kop { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.site .scherm-kop h1 { font-size: clamp(1.9rem, 1.5rem + 1.5vw, 2.6rem); }
.site .scherm-kop p { color: var(--staal); margin-top: 0.4rem; }
.site .tabs { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 1rem; }
.site .tabs a, .site .tabs strong {
  display: inline-block;
  line-height: 2.6rem;
  padding: 0 1rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
  text-decoration: none;
  color: var(--staal);
  background: var(--wit);
  border: 1px solid var(--lijn);
}
.site .tabs strong { background: var(--antraciet); border-color: var(--antraciet); color: var(--wit); }
/* Zacht, maar boven de 4,5:1 van WCAG op wit (axe in ops/e2e, 29 oktober 2026: 0.7 gaf 3,3:1). */
.site .tabs small { margin-left: 0.4rem; font-size: inherit; font-weight: 800; opacity: 0.88; }
.site .paneel { background: var(--wit); border: 1px solid var(--lijn); border-radius: 0.6rem; }
.site .paneel + .paneel, .site .paneel + .bevestiging + .paneel { margin-top: 1.5rem; }
.site .paneel-kop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--lijn);
}
.site .paneel-kop h2 { font-size: 1.35rem; }
.site .paneel-kop p { color: var(--staal); font-size: 0.95rem; }
.site .paneel-inhoud { padding: 1.25rem; }

.site .rij {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 0.6rem 1rem;
  align-items: center;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--lijn);
}
.site .rij:last-child { border-bottom: 0; }
.site .rij-foto img { width: 5.5rem; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0.3rem; background: #E9ECEF; }
.site .rij-naam strong { display: block; font-weight: 800; font-stretch: var(--halfbreed); }
.site .rij-naam span { display: block; color: var(--staal); font-size: 0.9rem; }
.site .rij-gegevens { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.site .rij-gegevens .rij-prijs { font-weight: 800; font-stretch: 110%; }
.site .rij-acties { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.site .rij-acties a { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.75rem; font-weight: 700; font-size: 0.95rem; color: var(--antraciet); }
.site .schakelaar { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.95rem; font-weight: 600; min-height: 2.75rem; }
.site .schakelaar::before {
  content: "";
  width: 2.6rem;
  height: 1.5rem;
  border-radius: 999px;
  background: #C5CCD3;
  box-shadow: inset 0 0 0 0.2rem #C5CCD3, inset -1.1rem 0 0 0.2rem var(--wit);
}
.site .schakelaar--aan::before { background: var(--groen); box-shadow: inset 0 0 0 0.2rem var(--groen), inset 1.1rem 0 0 0.2rem var(--wit); }
.site .stand {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: 0 0.65rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 700;
  background: var(--grijs);
  color: var(--staal);
  border: 1px solid var(--lijn);
}
.site .stand--nieuw { background: var(--rood-zacht); color: var(--rood-diep); border-color: #F4C2C5; }
.site .stand--gebeld { background: #EEF1F4; color: var(--antraciet); }
.site .stand--klaar { background: var(--groen-zacht); color: #14432A; border-color: #B9DCC6; }
.site .label--rand { border: 1px solid var(--lijn); }

.site .bewerk { display: grid; gap: 2rem; align-items: start; }
.site .fotobak { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.site .fotobak img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0.4rem; }
.site .fotobak .hoofdfoto { grid-column: 1 / -1; position: relative; }
.site .fotobak .hoofdfoto .label { position: absolute; left: 0.6rem; top: 0.6rem; }
.site .fotovak {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  border: 2px dashed #B9C1C9;
  border-radius: 0.4rem;
  color: var(--staal);
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
  padding: 0.5rem;
}
.site .bewerk-acties { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--lijn); }
.site .schakelaars { display: grid; gap: 0.25rem; margin-top: 1rem; }

.site .uren-bewerk { display: grid; gap: 0; }
.site .uren-bewerk div {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 0.5rem 1rem;
  align-items: center;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--lijn);
}
.site .uren-bewerk .invoer { min-height: 2.75rem; padding: 0.4rem 0.75rem; font-variant-numeric: tabular-nums; }
.site .uren-bewerk .tijden { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }

.site .aanvragen { display: grid; gap: 1.5rem; align-items: start; }
.site .aanvraag {
  display: grid;
  gap: 0.35rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--lijn);
  text-decoration: none;
}
.site .aanvraag:last-child { border-bottom: 0; }
.site .aanvraag--open { background: #FBF6F6; box-shadow: inset 4px 0 0 var(--rood); }
.site .aanvraag-boven { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.site .aanvraag-boven time { margin-left: auto; font-size: 0.9375rem; color: var(--staal); }
.site .aanvraag strong { font-weight: 800; font-stretch: var(--halfbreed); }
.site .aanvraag > span:last-child { color: var(--staal); font-size: 1rem; }
.site .aanvraag strong a { text-decoration: none; }
.site .aanvraag strong a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.site .detailfotos { display: grid; grid-template-columns: 2fr 1fr; gap: 0.6rem; margin-bottom: 1.5rem; }
.site .detailfotos img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0.4rem; }
.site .detailfotos .klein-fotos { display: grid; gap: 0.6rem; }
.site .gegevens { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem 1.5rem; margin-bottom: 1.5rem; }
.site .gegevens dt { font-size: 0.8125rem; color: var(--staal); }
.site .gegevens dd { font-weight: 700; font-variant-numeric: tabular-nums; }
.site .bericht { padding: 1rem 1.1rem; border-radius: var(--rand); background: var(--grijs); margin-bottom: 1.25rem; }
.site .bericht p { font-size: 1rem; }
.site .bericht p + p { margin-top: 0.5rem; font-size: 1rem; color: var(--staal); }
.site .mailregel { display: flex; gap: 0.6rem; align-items: center; margin-top: 1.25rem; font-size: 1rem; color: var(--staal); }
.site .mailregel .ic { color: var(--groen); }

/* De fiche voor achter de voorruit */
.site .fichescherm { min-height: 100vh; background: #D9DEE3; padding: 1.25rem 1rem 3rem; }
.site .fiche-balk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  max-width: 52rem;
  margin: 0 auto 1.25rem;
  padding: 0.9rem 1.1rem;
  border-radius: 0.6rem;
  background: var(--antraciet);
  color: var(--wit);
}
.site .fiche-balk a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--wit); font-weight: 700; }
.site .fiche-balk p { color: var(--mist); font-size: 0.95rem; margin-right: auto; }
.site .fiche-balk kbd, .site .fiche-balk strong { color: var(--wit); }
.site .fiche {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 52rem;
  aspect-ratio: 210 / 297;
  margin-inline: auto;
  background: var(--wit);
  box-shadow: 0 30px 60px -30px rgba(22, 25, 30, 0.55);
  overflow: hidden;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  --f: min(0.52rem, calc(1vw - 0.04rem));
}
.site .fiche-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: calc(var(--f) * 4) calc(var(--f) * 5) calc(var(--f) * 3);
}
.site .fiche-kop .merk-wagen { width: calc(var(--f) * 11); }
.site .fiche-kop .merk-naam strong { font-size: calc(var(--f) * 3.4); }
.site .fiche-kop .merk-naam span { font-size: calc(var(--f) * 2); }
.site .fiche-tekoop {
  padding: calc(var(--f) * 1.2) calc(var(--f) * 2.6);
  border-radius: 999px;
  background: var(--rood);
  color: var(--wit);
  font-size: calc(var(--f) * 2.9);
  font-weight: 800;
  font-stretch: 116%;
}
.site .fiche-foto { position: relative; flex: 1 1 auto; min-height: 0; margin-inline: calc(var(--f) * 5); overflow: hidden; border-radius: calc(var(--f) * 1.2); background: #E9ECEF; }
.site .fiche-foto .label { position: absolute; top: calc(var(--f) * 2); left: calc(var(--f) * 2); font-size: calc(var(--f) * 2); min-height: 0; padding: calc(var(--f) * 0.6) calc(var(--f) * 1.6); }
.site .fiche-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 74%; }
.site .fiche-model { display: flex; align-items: baseline; justify-content: space-between; gap: calc(var(--f) * 3); padding: calc(var(--f) * 3.4) calc(var(--f) * 5) 0; }
.site .fiche-model h1 { font-size: calc(var(--f) * 7.2); line-height: 0.98; letter-spacing: -0.02em; }
.site .fiche-model p { font-size: calc(var(--f) * 2.6); color: var(--staal); max-width: none; text-align: right; }
.site .fiche-prijs {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--f) * 2);
  margin: calc(var(--f) * 2.6) calc(var(--f) * 5) 0;
  padding: calc(var(--f) * 1.8) calc(var(--f) * 3.4);
  border-radius: calc(var(--f) * 1.2);
  background: var(--rood);
  color: var(--wit);
}
.site .fiche-prijs strong { font-size: calc(var(--f) * 8); font-weight: 800; font-stretch: 112%; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums lining-nums; }
.site .fiche-prijs span { font-size: calc(var(--f) * 2.4); font-weight: 700; text-align: right; color: var(--wit); white-space: nowrap; }
.site .fiche-specs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: calc(var(--f) * 2.6) calc(var(--f) * 5) 0;
  border-top: calc(var(--f) * 0.35) solid var(--antraciet);
}
.site .fiche-specs div { padding: calc(var(--f) * 1) 0; border-bottom: 1px solid var(--lijn); }
.site .fiche-specs dt { font-size: calc(var(--f) * 1.9); color: var(--staal); }
.site .fiche-specs dd { font-size: calc(var(--f) * 2.9); font-weight: 800; font-stretch: 110%; line-height: 1.15; font-variant-numeric: tabular-nums; }
.site .fiche-uitrusting { margin: calc(var(--f) * 2) calc(var(--f) * 5) 0; }
.site .fiche-uitrusting h2 { font-size: calc(var(--f) * 2.4); font-stretch: var(--halfbreed); margin-bottom: calc(var(--f) * 1.4); letter-spacing: 0; }
.site .fiche-uitrusting ul { display: grid; grid-template-columns: repeat(4, auto); gap: calc(var(--f) * 0.8) calc(var(--f) * 3); font-size: calc(var(--f) * 2.15); font-weight: 600; }
.site .fiche-uitrusting li { display: flex; gap: calc(var(--f) * 1); align-items: center; }
.site .fiche-uitrusting li::before { content: ""; flex: none; width: calc(var(--f) * 1.3); height: calc(var(--f) * 1.3); border-radius: 50%; background: var(--rood); }
.site .fiche-voet {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: calc(var(--f) * 3);
  align-items: end;
  margin-top: calc(var(--f) * 3);
  padding: calc(var(--f) * 3) calc(var(--f) * 5) calc(var(--f) * 3.4);
  background: var(--antraciet);
  color: var(--wit);
}
.site .fiche-voet small { display: block; font-size: calc(var(--f) * 2.1); color: var(--mist); margin-bottom: calc(var(--f) * 0.6); }
.site .fiche-nummer { font-size: calc(var(--f) * 5.6); font-weight: 800; font-stretch: 112%; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.site .fiche-adres { font-size: calc(var(--f) * 2.4); line-height: 1.45; color: var(--wit); text-align: right; font-style: normal; }
.site .fiche-uren { color: var(--mist); }
.site .fiche-voorbeeld { margin: 1rem auto 0; max-width: 52rem; font-size: 1rem; color: var(--staal); text-align: center; }

@media (min-width: 30rem) {
  .site .wagens { grid-template-columns: repeat(2, 1fr); }
  .site .velden-twee { grid-template-columns: 1fr 1fr; }
  .site .belbalk { grid-template-columns: repeat(3, 1fr); }
  .site .rij { grid-template-columns: 6.5rem 1fr auto; }
  .site .rij-foto img { width: 6.5rem; }
  .site .fotobak { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 48rem) {
  .site .binnen, .site .kop-binnen { padding-inline: 2rem; }
  .site .held-foto img { aspect-ratio: 16 / 9; }
  .site .held-raster { padding-bottom: 3rem; }
  .site .bord { margin-top: -2rem; padding: 2.5rem 2.25rem 2.25rem; }
  .site .bord h1 { font-size: min(3.4rem, calc(8.3vw - 0.7rem)); font-stretch: 112%; }
  .site .feiten { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
  .site .feit { border-bottom: 0; }
  .site .bandkop { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 2rem; }
  .site .verkoop { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; }
  .site .formkaart { padding: 2rem 2rem; }
  .site .reviews { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
  .site .bezoek { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 4rem; align-items: center; }
  .site .paginakop-raster { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 3.5rem; }
  .site .twee { grid-template-columns: 1fr 1fr; gap: 3.5rem; }
  .site .slotband { grid-template-columns: 1fr auto; }
  .site .voet-raster { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; }
  .site .scherm { padding: 2.5rem 2rem 0; }
  .site .beheerkop-binnen { flex-wrap: nowrap; padding-inline: 2rem; }
  .site .beheer-nav { order: 0; width: auto; }
  .site .kolommen--gelijk { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; }
  .site .fichescherm { padding: 2rem 2rem 4rem; }
}

@media (min-width: 64rem) {
  .site .nav-breed, .site .taal-breed { display: flex; }
  .site .kop-bel { display: inline-flex; }
  .site .kop-bel-klein, .site .menu { display: none; }
  .site .kop .merk { margin-right: 1rem; }
  .site .nav-breed { margin-right: auto; }
  .site .held-foto img { aspect-ratio: auto; height: clamp(22rem, 54vh, 36rem); object-position: 50% 100%; }
  .site .held-raster { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 2.5rem; }
  .site .bord { margin-top: -4rem; padding: 3rem 3rem 2.75rem; }
  .site .bord h1 { font-size: clamp(2.4rem, calc(5.4vw - 0.95rem), 3.2rem); }
  .site .feiten { grid-template-columns: 1fr; gap: 0.25rem; padding-top: 1rem; }
  .site .feit { border-bottom: 1px solid var(--lijn); }
  .site .feit:last-child { border-bottom: 0; }
  .site .wagens { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
  .site .belbalk { display: none; }
  .site .kolommen { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 3rem; }
  .site .kolommen--gelijk { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .site .kolommen > .zijblok { position: sticky; top: 6.5rem; }
  .site .bewerk { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 2.5rem; }
  .site .bewerk > div:last-child { position: sticky; top: 1.5rem; }
  .site .voet { padding-bottom: 3rem; }
  .site .aanvragen { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
  .site .rij { grid-template-columns: 7rem minmax(0, 1.4fr) minmax(0, 1.6fr) auto auto; gap: 1.25rem; }
  .site .rij-foto img { width: 7rem; }
  .site .rij-gegevens, .site .rij-acties { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .site .knop { transition: none; }
}

@media print {
  .site .fiche-balk, .site .fiche-voorbeeld { display: none; }
  .site .fichescherm { padding: 0; background: var(--wit); min-height: 0; }
  .site .fiche { max-width: none; box-shadow: none; }
  .site { min-height: 0; }
}

/* Aanvullingen */
.site .filters { display: flex; gap: 0.5rem; margin: 0 -1.25rem; padding: 0 1.25rem 0.25rem; overflow-x: auto; scrollbar-width: none; }
.site .filters .chip { flex: none; }
@media (min-width: 48rem) { .site .filters { flex-wrap: wrap; margin-inline: 0; padding: 0; overflow: visible; } }
.site .filters .chip small { font-size: 0.8rem; font-weight: 800; opacity: 0.75; }
.site .voet-zin { margin-top: 1rem; max-width: 22em; }
.site .geen-foto { display: grid; place-items: center; width: 5.5rem; aspect-ratio: 4 / 3; border: 2px dashed #B9C1C9; border-radius: 0.3rem; font-size: 0.75rem; font-weight: 600; color: var(--staal); text-align: center; line-height: 1.2; padding: 0.25rem; }
@media (min-width: 30rem) { .site .geen-foto { width: 6.5rem; } }
@media (min-width: 64rem) { .site .geen-foto { width: 7rem; } }
@media (min-width: 48rem) { .site .bord h1 .regel { display: block; } }
.site .heel { white-space: nowrap; }
@media (max-width: 23.99rem) {
  .site .kop-binnen { gap: 0.6rem; padding-inline: 1rem; }
  .site .kop .merk-wagen { width: 2.6rem; }
  .site .kop .merk-naam strong { font-size: 1.05rem; }
  .site h1 { font-size: 1.8rem; }
  .site .knop { white-space: normal; text-align: center; }
  .site .bord { padding-inline: 1rem; }
  .site .bord h1 { font-size: 1.65rem; }
}
.site .kaartvoorbeeld { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--lijn); }
.site .kaartvoorbeeld > p { margin-bottom: 0.75rem; }
.site .kaartvoorbeeld .raamkaart { max-width: 22rem; }
.site .kaartvoorbeeld .raamkaart-tekst h3 { font-size: 1.2rem; }
.site .kaartvoorbeeld .prijs { font-size: 1.7rem; }
@media (max-width: 63.99rem) {
  .site .rij > .rij-stand { grid-column: 1 / -1; }
}
@media (max-width: 47.99rem) {
  .site .beheerkop .merk-naam span { display: none; }
  .site .beheer-uit a { padding: 0 0.55rem; font-size: 0.9rem; }
}

/* Alle eigenschappen van een wagen, dicht onder de raamkaart */
.site .meer { margin: -0.3rem 0 1.1rem; border-top: 1px solid var(--lijn); }
.site .meer summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.75rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.site .meer summary::-webkit-details-marker { display: none; }
.site .meer summary::after {
  content: "";
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid var(--rood);
  border-bottom: 2px solid var(--rood);
  transform: rotate(45deg) translateY(-0.15rem);
}
.site .meer[open] summary::after { transform: rotate(-135deg) translateY(-0.1rem); }
.site .meer summary small { font-weight: 500; color: var(--staal); font-size: 0.9rem; margin-right: auto; margin-left: 0.4rem; }
.site .eigenschappen { display: grid; padding-bottom: 0.25rem; }
.site .eigenschappen div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--lijn); }
.site .eigenschappen div:last-child { border-bottom: 0; }
.site .eigenschappen dt { color: var(--staal); }
.site .eigenschappen dd { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.site .meer--form { margin: 1.5rem 0 0; padding-top: 0.5rem; }
.site .meer--form .velden { padding: 0.75rem 0 0.5rem; }

/* Keuzelijsten (merk en model), zonder script: een details die openklapt */
.site .keuzelijst { position: relative; }
.site .keuzelijst > summary { list-style: none; cursor: pointer; }
.site .keuzelijst > summary::-webkit-details-marker { display: none; }
.site .keuzelijst[open] > summary { border-color: var(--antraciet); }
.site .keuzelijst-lijst {
  position: absolute;
  z-index: 15;
  top: calc(100% + 0.3rem);
  left: 0;
  right: 0;
  min-width: 13rem;
  max-height: 24rem;
  overflow-y: auto;
  padding: 0.35rem;
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--rand);
  box-shadow: 0 18px 40px -18px rgba(22, 25, 30, 0.45);
}
.site .keuzelijst-lijst li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0.75rem; border-radius: 0.3rem; }
.site .keuzelijst-lijst li:hover { background: var(--grijs); }
.site .keuzelijst-lijst .gekozen { background: var(--antraciet); color: var(--wit); font-weight: 700; }
.site .keuzelijst-lijst .gekozen:hover { background: var(--antraciet); }
.site .keuzelijst-lijst small { color: var(--staal); font-size: 1rem; font-weight: 600; }
.site .keuzelijst-lijst .gekozen small { color: var(--mist); }

/* De filter boven het aanbod */
.site .filterbalk { display: grid; gap: 0.75rem; margin-bottom: 1.5rem; }
.site .filterkeuzes { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.site .keuzelijst--filter > summary { min-height: 2.75rem; padding: 0.5rem 1rem; border-radius: 999px; font-weight: 600; font-size: 0.95rem; }
@media (min-width: 48rem) {
  .site .filterbalk { display: flex; flex-wrap: wrap; align-items: center; }
  .site .filterkeuzes { display: flex; }
  .site .keuzelijst--filter { width: 12.5rem; }
}

/* Een wagen toevoegen met een scan van het inschrijvingsbewijs */
.site .scan { display: grid; gap: 2rem; }
.site .scan-stap {
  display: grid;
  gap: 1rem;
  align-content: start;
  padding: 1.5rem;
  border: 2px dashed #B9C1C9;
  border-radius: 0.6rem;
  background: var(--grijs);
}
.site .scan-ic { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--rood); color: var(--wit); }
.site .scan-ic .ic { width: 1.6rem; height: 1.6rem; }
.site .scan-stap .klein { max-width: 30em; }
.site .scan-kop { font-size: 1.15rem; margin-bottom: 0.5rem; }
.site .scan-lijst { display: grid; margin-bottom: 1rem; }
.site .scan-lijst div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: baseline; padding: 0.55rem 0; border-bottom: 1px solid var(--lijn); }
.site .scan-lijst dt { display: flex; align-items: baseline; gap: 0.6rem; color: var(--staal); }
.site .scan-lijst dd { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.site .code {
  display: inline-block;
  flex: none;
  min-width: 2.5rem;
  padding: 0.05rem 0.4rem;
  border-radius: 0.25rem;
  background: var(--antraciet);
  color: var(--wit);
  font-size: 0.8125rem;
  font-weight: 700;
  text-align: center;
}
.site .uit-bewijs {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  background: var(--groen-zacht);
  color: #14432A;
  font-size: 0.8125rem;
  font-weight: 600;
  vertical-align: 0.1em;
}
.site .gescand {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: 0.75rem;
  align-items: start;
  margin: 1.25rem 1.25rem 0;
  padding: 0.9rem 1rem;
  border-radius: var(--rand);
  background: var(--groen-zacht);
  border: 1px solid #B9DCC6;
  color: #14432A;
}
.site .gescand p { max-width: none; }
.site .gescand .ic-rond { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--groen); color: var(--wit); }
@media (min-width: 64rem) {
  .site .scan { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 3rem; align-items: start; }
}
.site .filterkeuzes .keuzelijst + .keuzelijst .keuzelijst-lijst { left: auto; right: 0; }
.site .keuzelijst--raster .keuzelijst-lijst {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.15rem;
  max-height: none;
  min-width: min(20rem, calc(100vw - 2.5rem));
}
.site .keuzelijst--raster .keuzelijst-lijst li { padding: 0.5rem 0.7rem; }
@media (min-width: 48rem) {
  .site .keuzelijst--raster .keuzelijst-lijst { grid-template-columns: repeat(3, minmax(0, 1fr)); min-width: 30rem; }
}

/* Instellingen: vier tabbladen zonder script. Het tabblad in het adres staat open,
   ook als een bevestiging erin het doel is; zonder doel het eerste. De grote
   scroll-margin houdt de pagina bovenaan bij een klik op een tab. */
.site .tabblad > .tabs { margin-bottom: 1.25rem; }
@media (max-width: 29.99rem) {
  .site .tabblad > .tabs { display: grid; grid-template-columns: 1fr 1fr; }
  .site .tabblad > .tabs a, .site .tabblad > .tabs strong { text-align: center; }
}
.site .tabs--taal { margin-bottom: 0; }

.site .logo-raster { display: grid; gap: 2rem; }
.site .logo-voorbeelden { display: grid; gap: 0.75rem; margin-top: 0.6rem; }
.site .logo-op { display: grid; gap: 1rem; justify-items: start; padding: 1.5rem 1.25rem 1rem; border: 1px solid var(--lijn); border-radius: 0.6rem; }
.site .logo-op .merk-wagen { width: 4.6rem; }
.site .logo-op .merk-naam strong { font-size: 1.55rem; }
.site .logo-op .merk-naam span { font-size: 0.9375rem; }
.site .logo-op--donker { background: var(--antraciet); border-color: var(--antraciet); }
.site .logo-op--donker .merk { color: var(--wit); }
.site .logo-op--donker .merk-naam span, .site .logo-op--donker .klein { color: var(--mist); }
.site .logo-op--tab { background: var(--grijs); padding-top: 1rem; }
.site .tabmock {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  max-width: 100%;
  padding: 0.6rem 1rem;
  border-radius: 0.6rem 0.6rem 0 0;
  background: var(--wit);
  box-shadow: 0 1px 0 var(--lijn);
  font-size: 0.875rem;
}
.site .tabmock-ic { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; flex: none; }
.site .tabmock-ic .merk-wagen { width: 1.5rem; }
.site .tabmock-titel { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.site .logo-velden { margin-top: 1.5rem; }

.site .lijst { border-top: 1px solid var(--lijn); }
.site .paneel-kop + .lijst { border-top: 0; }
.site .lijst > summary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.75rem;
  padding: 0.75rem 1.25rem;
  list-style: none;
  cursor: pointer;
}
.site .lijst > summary::-webkit-details-marker { display: none; }
.site .lijst > summary strong { font-weight: 800; font-stretch: var(--halfbreed); }
.site .lijst > summary small { margin-left: auto; color: var(--staal); font-size: 0.9375rem; font-weight: 600; white-space: nowrap; }
.site .lijst > summary::after {
  content: "";
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  margin: 0 0.3rem 0 0.25rem;
  border-right: 2px solid var(--antraciet);
  border-bottom: 2px solid var(--antraciet);
  transform: rotate(45deg) translateY(-0.15rem);
}
.site .lijst[open] > summary::after { transform: rotate(-135deg) translate(-0.1rem, -0.1rem); }
.site .lijst > summary:hover { background: var(--grijs); }
.site .lijst-inhoud { padding: 0.25rem 1.25rem 1.75rem; }
.site .lijst-smal { max-width: 32rem; }
.site .lijst-tussenkop { display: block; margin-top: 1.25rem; }
.site .lijst-uitleg { margin-top: 1rem; max-width: 34em; }
.site .merkmodel { display: grid; gap: 2rem; }
.site .keuzes { margin-top: 0.5rem; border: 1px solid var(--lijn); border-radius: var(--rand); background: var(--wit); }
.site .keuzes li { display: flex; align-items: center; gap: 0.5rem; min-height: 2.875rem; padding: 0.3rem 0 0.3rem 0.9rem; border-bottom: 1px solid var(--lijn); }
.site .keuzes li:last-child { border-bottom: 0; }
.site .keuzes--rol { max-height: 24.6rem; overflow-y: auto; overscroll-behavior: contain; }
.site .keuze-kies, .site .keuze-naam { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.6rem; flex: 1; min-height: 2.75rem; color: inherit; text-decoration: none; }
.site .keuze-kies:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.site .keuzes .gekozen { background: var(--antraciet); color: var(--wit); font-weight: 700; }
.site .wis { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; flex: none; border-radius: var(--rand); color: var(--staal); }
.site .wis:hover { background: var(--rood-zacht); color: var(--rood-diep); }
.site .in-gebruik { flex: none; padding-right: 0.9rem; font-size: 0.8125rem; font-weight: 600; color: var(--staal); }
.site .gekozen .in-gebruik { color: var(--mist); }
.site .toevoegen { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
.site .toevoegen .invoer { flex: 1; min-width: 0; min-height: 2.75rem; padding-block: 0.4rem; }
.site .toevoegen .knop { flex: none; }
.site a.chip { color: inherit; text-decoration: none; }
.site .chip--nieuw { border-style: dashed; color: var(--staal); }
.site a.chip:hover { border-color: var(--antraciet); color: var(--antraciet); }
@media (min-width: 64rem) {
  .site .logo-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: start; }
  .site .merkmodel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; }
}
.site .uren-raster { display: grid; gap: 2rem; }
.site .uitz-kop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
.site .uitz-kop + .klein { margin-top: 0.35rem; }
.site .uitzonderingen .keuze-naam strong { font-weight: 700; font-variant-numeric: tabular-nums; }
.site .uitzonderingen .keuze-naam span { color: var(--staal); }
.site .uitz-uur { flex: none; font-size: 0.9375rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.site .uitz-nieuw { margin-top: 0.75rem; }
.site .tekstvoorbeeld {
  margin-top: 0.6rem;
  padding: 1.5rem 1.4rem 1.6rem;
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-top: 0.5rem solid var(--rood);
  border-radius: 0 0 var(--rand) var(--rand);
}
.site .tekstvoorbeeld-kop { margin-bottom: 0.75rem; font-size: 1.75rem; font-weight: 800; font-stretch: 108%; line-height: 1.05; letter-spacing: -0.01em; }
.site .tekstvoorbeeld p:not(.tekstvoorbeeld-kop) { color: var(--staal); }
.site .tekstvoorbeeld p + p:not(.tekstvoorbeeld-kop) { margin-top: 0.6rem; }
@media (min-width: 64rem) {
  .site .uren-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: start; }
}

/* De kaart linkt naar de pagina van de wagen: de link onderaan ligt over de hele kaart,
   en de link naar WhatsApp ligt erboven. */
.site .raamkaart { position: relative; }
.site .raamkaart .tekstlink { position: relative; z-index: 1; }
.site .kaart-meer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.75rem;
  margin: -0.3rem 0 1rem;
  border-top: 1px solid var(--lijn);
  font-weight: 700;
  color: var(--antraciet);
  text-decoration: none;
}
.site .kaart-meer::before {
  content: "";
  order: 1;
  width: 0.55rem;
  height: 0.55rem;
  margin-right: 0.3rem;
  border-right: 2px solid var(--rood);
  border-bottom: 2px solid var(--rood);
  transform: rotate(-45deg);
}
.site .kaart-meer::after { content: ""; position: absolute; inset: 0; }
.site .kaart-meer:focus-visible { outline: none; }
.site .raamkaart:has(.kaart-meer:focus-visible) { outline: 3px solid var(--antraciet); outline-offset: 2px; }
.site .raamkaart:has(.kaart-meer:hover) { border-color: var(--mist); }
.site .raamkaart:has(.kaart-meer:hover) .kaart-meer { color: var(--rood-diep); }

/* De pagina van een wagen. De galerij werkt zonder script: de foto in het adres staat
   groot, zonder doel de eerste; de grote scroll-margin houdt de pagina op haar plaats.
   Een klik op de grote foto opent haar in het venster (.lichtbak), ook met :target. */
.site .wagen { padding-block: 1.5rem 3.5rem; }
.site .wagen-raster { display: grid; gap: 1.75rem; }
.site .galerij, .site .wagen-kern { min-width: 0; }
.site .galerij-foto { display: none; position: relative; margin: 0; scroll-margin-top: 60rem; }
.site .galerij-foto:target { display: block; }
.site .galerij-groot:not(:has(:target)) > .galerij-foto:first-child { display: block; }
.site .galerij-open { display: block; border-radius: 0.6rem; overflow: hidden; cursor: zoom-in; }
.site .galerij-foto img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #E9ECEF; transition: transform 0.4s ease; }
.site .galerij-open:hover img { transform: scale(1.02); }
.site .galerij-foto .label { position: absolute; top: 0.75rem; left: 0.75rem; }
.site .galerij-teller, .site .galerij-vergroot { position: absolute; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.7rem; border-radius: 999px; background: rgba(22, 25, 30, 0.8); color: var(--wit); font-size: 0.8125rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.site .galerij-teller { top: 0.75rem; right: 0.75rem; }
.site .galerij-vergroot { right: 0.75rem; bottom: 0.75rem; }
.site .galerij-duimen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin-top: 0.5rem; }
.site .galerij-duimen a { display: block; border-radius: 0.4rem; overflow: hidden; outline: 3px solid transparent; outline-offset: -3px; }
.site .galerij-duimen a:hover { outline-color: var(--mist); }
.site .galerij-duimen img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #E9ECEF; }
@media (max-width: 47.99rem) {
  .site .galerij-duimen { display: flex; overflow-x: auto; scrollbar-width: none; margin-inline: -1.25rem; padding-inline: 1.25rem; }
  .site .galerij-duimen li { flex: 0 0 5.5rem; }
  .site .galerij-vergroot { padding: 0.45rem; }
  .site .galerij-vergroot span { display: none; }
}
.site .galerij:not(:has(.galerij-foto:target)) .galerij-duimen li:first-child a,
.site .galerij:has(#foto-1:target) a[href="#foto-1"] { outline-color: var(--rood); }
.site .galerij:has(#foto-2:target) a[href="#foto-2"] { outline-color: var(--rood); }
.site .galerij:has(#foto-3:target) a[href="#foto-3"] { outline-color: var(--rood); }
.site .galerij:has(#foto-4:target) a[href="#foto-4"] { outline-color: var(--rood); }
.site .galerij:has(#foto-5:target) a[href="#foto-5"] { outline-color: var(--rood); }
.site .galerij:has(#foto-6:target) a[href="#foto-6"] { outline-color: var(--rood); }

.site .wagen-kern h1 { font-size: clamp(2rem, 1.5rem + 2vw, 2.9rem); }
.site .wagen-kern .prijs { font-size: 2.6rem; margin-top: 0.9rem; }
.site .wagen-kern .prijs + .klein { margin-top: 0.4rem; }
.site .kernspecs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin: 1.25rem 0; }
.site .kernspecs div { padding: 0.7rem 0.8rem; border: 1px solid var(--lijn); border-radius: var(--rand); background: var(--grijs); }
.site .kernspecs dt { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8125rem; color: var(--staal); }
.site .kernspecs dt .ic { color: var(--rood); width: 1.1rem; height: 1.1rem; }
.site .kernspecs dd { margin-top: 0.15rem; font-weight: 800; font-stretch: var(--halfbreed); font-variant-numeric: tabular-nums; }
.site .wagen-knoppen { display: grid; gap: 0.6rem; }
.site .wagen-bezoek { margin-top: 1rem; }

.site .wagen-band h2 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); margin-bottom: 1.75rem; }
.site .wagen-info { display: grid; gap: 1.25rem; }
.site .wagen-hoofd, .site .wagen-zij { display: grid; gap: 1.25rem; align-content: start; }
.site .wagen-notitie { display: flex; gap: 0.9rem; align-items: flex-start; padding: 1.1rem 1.25rem; border-radius: 0.6rem; background: var(--antraciet); color: var(--wit); }
.site .wagen-notitie p { color: var(--mist); margin-top: 0.15rem; }
.site .wagen-notitie-ic { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; flex: none; border-radius: 50%; background: var(--rood); }
.site .specpanelen { display: grid; gap: 1.25rem; }
.site .specpaneel { padding: 1.25rem 1.35rem 1rem; border: 1px solid var(--lijn); border-radius: 0.6rem; background: var(--wit); }
.site .specpaneel h3 { display: flex; align-items: center; gap: 0.55rem; padding-bottom: 0.75rem; margin-bottom: 0.25rem; border-bottom: 2px solid var(--antraciet); font-size: 1.15rem; }
.site .specpaneel h3 .ic { color: var(--rood); }
.site .specpaneel h4 { margin: 1rem 0 0.5rem; font-size: 0.875rem; font-weight: 700; color: var(--staal); }
.site .specpaneel .eigenschappen div { padding: 0.6rem 0; }
.site .tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.site .tags li { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.25rem; padding: 0 0.75rem 0 0.55rem; border-radius: 999px; background: var(--groen-zacht); color: #14432A; font-size: 0.9375rem; font-weight: 600; }
.site .tags .ic { width: 1rem; height: 1rem; color: var(--groen); }
.site .papieren li { display: grid; gap: 0.1rem; padding: 0.7rem 0 0.7rem 1.75rem; border-bottom: 1px solid var(--lijn); position: relative; }
.site .papieren li:last-child { border-bottom: 0; }
.site .papieren li::before { content: ""; position: absolute; left: 0.15rem; top: 0.95rem; width: 0.55rem; height: 0.95rem; border-right: 2px solid var(--groen); border-bottom: 2px solid var(--groen); transform: rotate(40deg); }
.site .papieren span { color: var(--staal); font-size: 0.9375rem; }
.site .vraagkaart { display: grid; gap: 0.6rem; padding: 1.4rem 1.35rem; border-radius: 0.6rem; background: var(--antraciet); color: var(--wit); }
.site .vraagkaart-kop { font-size: 1.3rem; font-weight: 800; font-stretch: var(--halfbreed); }
.site .vraagkaart p:not(.vraagkaart-kop) { color: var(--mist); }
.site .vraagkaart .knop { margin-top: 0.4rem; }

.site .lichtbak { display: none; position: fixed; inset: 0; z-index: 90; align-items: center; justify-content: center; padding: 5.5rem 1rem 5.5rem; background: rgba(13, 15, 18, 0.95); }
.site .lichtbak:target { display: flex; }
.site .lichtbak-achter { position: absolute; inset: 0; cursor: zoom-out; }
.site .lichtbak-foto { position: relative; margin: 0; width: min(72rem, 100%); }
.site .lichtbak-foto img { display: block; width: 100%; max-height: calc(100vh - 13rem); object-fit: contain; border-radius: 0.4rem; }
.site .lichtbak-foto figcaption { margin-top: 0.8rem; text-align: center; color: var(--mist); font-size: 0.95rem; }
.site .lichtbak-knop { position: absolute; z-index: 1; display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: rgba(255, 255, 255, 0.14); color: var(--wit); }
.site .lichtbak-knop:hover { background: rgba(255, 255, 255, 0.26); }
.site .lichtbak-knop .ic { width: 1.5rem; height: 1.5rem; }
.site .lichtbak-vorige, .site .lichtbak-volgende, .site .lichtbak-sluit { bottom: 1.1rem; }
.site .lichtbak-sluit { left: calc(50% - 1.625rem); }
.site .lichtbak-vorige { left: calc(50% - 5.5rem); }
.site .lichtbak-volgende { right: calc(50% - 5.5rem); }
@media (min-width: 48rem) {
  .site .galerij-duimen { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .site .kernspecs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site .wagen-knoppen { grid-template-columns: 1fr 1fr; }
  .site .specpanelen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .site .specpaneel--breed { grid-column: 1 / -1; }
  .site .eigenschappen--twee { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 2.5rem; }
  .site .eigenschappen--twee div:nth-last-child(2) { border-bottom: 0; }
  .site .lichtbak { padding: 5.5rem 6rem 6rem; }
  .site .lichtbak-vorige, .site .lichtbak-volgende { top: 50%; bottom: auto; transform: translateY(-50%); }
  .site .lichtbak-vorige { left: 1.5rem; }
  .site .lichtbak-volgende { right: 1.5rem; }
}
@media (min-width: 64rem) {
  .site .wagen { padding-top: 2rem; }
  .site .wagen-raster { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 3rem; align-items: start; }
  .site .wagen-kern { position: sticky; top: 1.5rem; }
  .site .wagen-knoppen { grid-template-columns: 1fr; }
  .site .wagen-info { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
}
@media (prefers-reduced-motion: reduce) {
  .site .galerij-foto img { transition: none; }
}

/* WhatsApp: het logo in zijn eigen groen; de knop om naar een wagen te vragen en die in de
   balk op een gsm in dat groen, met het logo in het wit en de tekst donker (contrast). */
.site .ic-wa { color: #25D366; }
.site .knop--wa, .site .belbalk .wa { background: #25D366; border-color: #25D366; color: var(--nacht); }
.site .knop--wa:hover { background: #1FBE5B; border-color: #1FBE5B; }
.site .knop--wa .ic-wa, .site .belbalk .wa .ic-wa { color: var(--wit); }

/* Ook te koop: de andere wagens, als kaarten zonder foto (een pagina draagt er hoogstens zes). */
.site .ook-kop { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); margin-bottom: 1.5rem; }
.site .ook-te-koop { display: grid; gap: 0.75rem; }
.site .ook-kaart { position: relative; display: flex; flex-direction: column; gap: 0.15rem; padding: 1.1rem 1.2rem 1.2rem; border: 1px solid var(--lijn); border-top: 0.3125rem solid var(--rood); border-radius: var(--rand); background: var(--wit); }
.site .ook-kaart:has(a:hover) { border-color: var(--mist); border-top-color: var(--rood-diep); }
.site .ook-kaart:has(a:focus-visible) { outline: 3px solid var(--antraciet); outline-offset: 2px; }
.site .ook-kaart a { color: var(--antraciet); font-size: 1.2rem; font-weight: 800; font-stretch: var(--halfbreed); text-decoration: none; }
.site .ook-kaart a:focus-visible { outline: none; }
.site .ook-kaart a::after { content: ""; position: absolute; inset: 0; }
.site .ook-kaart span { color: var(--staal); font-size: 0.9375rem; }
.site .ook-kaart .ook-prijs { margin-top: auto; padding-top: 0.6rem; color: var(--antraciet); font-size: 1.5rem; font-weight: 800; font-stretch: 112%; font-variant-numeric: tabular-nums; }
.site .ook-slot { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--lijn); }
@media (min-width: 48rem) { .site .ook-te-koop { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .site .ook-te-koop { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } }

/* De fiche op papier: een eigen pagina met een marge van nul, zodat de browser er geen
   datum, titel, adres of paginanummer op drukt; de witruimte zit in de fiche zelf. */
@page fiche { size: A4; margin: 0; }
@media print {
  .site .fichescherm { page: fiche; padding: 10mm; }
  /* Zonder marge is 1vw het hele blad, en de fiche staat 20 mm smaller: rekenen op wat er overblijft. */
  .site .fiche { --f: min(0.52rem, calc((100vw - 20mm) / 100 - 0.04rem)); }
}

/* Nieuw binnen: op een gsm een rij om te vegen, zodat de startpagina kort blijft. */
@media (max-width: 47.99rem) {
  .site .wagens--nieuw { display: flex; gap: 0.75rem; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -1.25rem; padding: 0 1.25rem 0.5rem; scrollbar-width: none; }
  .site .wagens--nieuw > li { flex: 0 0 min(84%, 22rem); scroll-snap-align: start; }
}
.site .ingang { display: grid; gap: 1.25rem; margin-top: 2rem; padding: 1.5rem; border: 1px solid var(--lijn); border-radius: 0.6rem; background: var(--wit); }
.site .ingang h3 { margin-bottom: 0.75rem; font-size: 1.2rem; }
.site .ingangen { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.site .ingangen small, .site .aanbod .filters .chip small { margin-left: 0.15rem; font-size: 0.9375rem; font-weight: 800; opacity: 0.7; }
.site .ingang-knop { justify-self: start; }
@media (min-width: 48rem) {
  .site .ingang { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 1.5rem 2rem; }
}

/* Het Aanbod. Op een gsm staat de foto links en de gegevens rechts, vanaf een tablet als kaart. */
.site .paginakop--kort { padding-block: 1.5rem 0.75rem; }
.site .paginakop--kort h1 { margin-bottom: 0.5rem; font-size: clamp(1.9rem, 1.4rem + 2.4vw, 3rem); }
.site .aanbod { padding-top: 0.75rem; }
.site .aanbod-kop { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; margin-bottom: 1rem; }
.site .keuzelijst--sorteer { width: auto; min-width: 11.5rem; }
.site .keuzelijst--sorteer .keuzelijst-lijst { left: auto; right: 0; }
.site .aanbod-lijst { display: grid; gap: 0.75rem; }
.site .wagenkaart { position: relative; display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 0.9rem; padding: 0.6rem; border: 1px solid var(--lijn); border-radius: var(--rand); background: var(--wit); }
.site .wagenkaart:has(a:hover) { border-color: var(--mist); }
.site .wagenkaart:has(a:focus-visible) { outline: 3px solid var(--antraciet); outline-offset: 2px; }
.site .wagenkaart-foto { position: relative; }
.site .wagenkaart-foto img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0.3rem; background: #E9ECEF; }
.site .wagenkaart-foto .label { position: absolute; top: 0.35rem; left: 0.35rem; min-height: 1.35rem; padding: 0 0.4rem; }
.site .wagenkaart-tekst { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.site .wagenkaart-naam { font-size: 1.1rem; font-stretch: var(--halfbreed); line-height: 1.2; }
.site .wagenkaart-naam a { color: inherit; text-decoration: none; }
.site .wagenkaart-naam a:focus-visible { outline: none; }
.site .wagenkaart-naam a::after { content: ""; position: absolute; inset: 0; }
.site .wagenkaart-uitvoering { color: var(--staal); font-size: 0.9375rem; line-height: 1.35; }
.site .wagenkaart-gegevens { display: flex; flex-wrap: wrap; gap: 0 0.75rem; font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.site .wagenkaart-prijs { margin-top: auto; padding-top: 0.35rem; font-size: 1.35rem; font-weight: 800; font-stretch: 112%; font-variant-numeric: tabular-nums; }
@media (min-width: 48rem) {
  .site .aanbod-lijst { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
  .site .wagenkaart { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0 0 1.1rem; overflow: hidden; }
  .site .wagenkaart-foto img { border-radius: 0; }
  .site .wagenkaart-foto .label { top: 0.75rem; left: 0.75rem; }
  .site .wagenkaart-tekst { padding: 0.9rem 1.1rem 0; border-top: 0.3125rem solid var(--rood); }
}
@media (min-width: 64rem) { .site .aanbod-lijst { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* De lijst in het beheer toont de eerste wagens. */
.site .rij-voet { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding: 0.9rem 1.25rem; border-top: 1px solid var(--lijn); color: var(--staal); font-size: 0.95rem; }
.site .rij-voet a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--antraciet); font-weight: 700; }

/* ==== De bediening (23 oktober 2026): echte velden, knoppen, vensters en meldingen ==== */
.site button { font: inherit; color: inherit; }
.site input.invoer, .site select.invoer, .site textarea.invoer { width: 100%; font: inherit; line-height: 1.35; }
.site input.invoer::placeholder, .site textarea.invoer::placeholder { color: #6B7480; opacity: 1; }
.site textarea.invoer { display: block; resize: vertical; min-height: 7rem; }
.site textarea.invoer[rows="2"] { min-height: 4.5rem; }
.site select.invoer { appearance: none; padding-right: 2.6rem; cursor: pointer; background: var(--wit) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2320252B' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 0.95rem center / 0.8rem; }
.site select.invoer--keuze::after { content: none; }
.site .invoer:focus { border-color: var(--antraciet); outline: 3px solid rgba(32, 37, 43, 0.18); outline-offset: 0; }
.site .invoer.bd-ongeldig { border-color: var(--rood); }
.site .invoer--keuze { gap: 0.75rem; }
.site .rij-naam strong span, .site .rij-naam .deel { display: inline; }
.site .deel:empty { display: none; }
.site .deel:not(:empty) ~ .deel:not(:empty)::before { content: ", "; }
.site .scan-lijst div { grid-template-columns: max-content minmax(0, 1fr); }
.site .stand { gap: 0.3em; }
.site .stand > span:empty { display: none; }
.site .aanbod-leeg { display: grid; gap: 0.75rem; justify-items: start; max-width: 40rem; padding: 1.5rem; border: 1px solid var(--lijn); border-radius: 0.6rem; background: var(--wit); }
.site .aanbod-leeg h2 { font-size: 1.5rem; }
.site input[type="time"].invoer { width: auto; min-width: 7.25rem; }
.site label.veld-label { display: block; }
.site .upload { position: relative; cursor: pointer; }
.site .upload:hover { border-color: var(--antraciet); }
.site .upload:focus-within, .site .fotovak:focus-within { outline: 3px solid var(--antraciet); outline-offset: 2px; }
.site .fotovak { position: relative; overflow: hidden; cursor: pointer; }
.site .fotovak:hover { border-color: var(--antraciet); color: var(--antraciet); }
.site .fotovak img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; border-radius: 0; }
.site .hoofdfoto .geen-foto, .site .raamkaart-foto .geen-foto { width: 100%; aspect-ratio: 16 / 10; font-size: 1rem; border-radius: 0.4rem; background: var(--grijs); }
.site .raamkaart-foto .geen-foto { border-radius: 0; border-width: 0 0 2px; }
.site .bevestiging[data-bd] { display: grid; }
.site .bijlagen { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }
.site .bijlagen:empty { display: none; }
.site .bd-foto img { width: 6rem; height: 4.5rem; object-fit: cover; border-radius: 0.35rem; border: 1px solid var(--lijn); }
.site .upload--klein { grid-template-columns: auto minmax(0, 1fr); justify-items: start; gap: 0.1rem 0.9rem; padding: 0.9rem 1rem; text-align: left; }
.site .upload--klein .upload-ic { grid-row: span 2; width: 2.5rem; height: 2.5rem; }

/* Chips, tabs en schakelaars als knop */
.site button.chip { cursor: pointer; }
.site button.chip:hover { border-color: var(--antraciet); }
.site .chip[aria-pressed="true"] { border-color: var(--antraciet); background: var(--antraciet); color: var(--wit); }
.site .chip .ic { width: 1.1em; height: 1.1em; }
.site ul.chips { margin-top: 0.4rem; }
.site .chip--wis { gap: 0.15rem; padding-right: 0.3rem; }
.site .chip-wis { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--staal); cursor: pointer; }
.site .chip-wis:hover { background: var(--rood-zacht); color: var(--rood-diep); }
.site .chip-wis .ic { width: 1rem; height: 1rem; }
.site .tabs button { display: inline-flex; align-items: center; min-height: 2.6rem; padding: 0 1rem; border-radius: 999px; border: 1px solid var(--lijn); background: var(--wit); color: var(--staal); font-weight: 600; font-size: 0.95rem; white-space: nowrap; cursor: pointer; }
.site .tabs button:hover { border-color: var(--antraciet); color: var(--antraciet); }
.site .tabs button[aria-pressed="true"], .site .tabs button[aria-current="true"] { background: var(--antraciet); border-color: var(--antraciet); color: var(--wit); }
.site .tabs small:empty { display: none; }
.site button.schakelaar { padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
.site button.schakelaar:hover::before { filter: brightness(0.95); }
.site .rij-stand { display: flex; align-items: center; }

/* Keuzelijsten */
.site .keuzelijst-lijst li { cursor: pointer; }
.site .keuzelijst-lijst li:focus-visible { outline: 3px solid var(--antraciet); outline-offset: -3px; }

/* De lijst van wagens */
.site .werkbalk { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.site .zoekveld { position: relative; flex: 1 1 18rem; }
.site .zoekveld .ic { position: absolute; left: 0.95rem; top: 50%; transform: translateY(-50%); color: var(--staal); pointer-events: none; }
.site .zoekveld .invoer { min-height: 2.75rem; padding-left: 2.8rem; border-radius: 999px; }
.site .werkbalk .keuzelijst--sorteer { flex: 0 0 auto; }
.site .rij-acties button { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.75rem; padding: 0; border: 0; background: none; font-weight: 700; font-size: 0.95rem; color: var(--antraciet); text-decoration: underline; text-underline-offset: 0.15em; cursor: pointer; }
.site .rij-acties .rij-wis { justify-content: center; width: 2.75rem; border-radius: var(--rand); color: var(--staal); text-decoration: none; }
.site .rij-acties .rij-wis:hover { background: var(--rood-zacht); color: var(--rood-diep); }
.site .rij-leeg { display: grid; gap: 0.75rem; justify-items: start; padding: 1.5rem 1.25rem; }
.site .rij-voet { flex-wrap: wrap; }
.site .rij-voet .klein { font-size: 0.875rem; }
.site .bd-net { animation: bd-net 2.4s ease-out; }
@keyframes bd-net { from { background-color: #FFF4CC; } to { background-color: transparent; } }

/* Vensters */
.site dialog.modal { width: min(46rem, calc(100% - 2rem)); max-width: none; max-height: calc(100dvh - 2rem); padding: 0; border: 0; border-radius: 0.75rem; background: var(--wit); color: var(--antraciet); box-shadow: 0 30px 80px -20px rgba(22, 25, 30, 0.55); overflow: hidden; }
.site dialog.modal--breed { width: min(76rem, calc(100% - 2rem)); }
.site dialog.modal--klein { width: min(34rem, calc(100% - 2rem)); }
.site dialog.modal::backdrop { background: rgba(22, 25, 30, 0.6); }
.site .modal-binnen { display: flex; flex-direction: column; max-height: calc(100dvh - 2rem); }
.site .modal-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--lijn); }
.site .modal-kop h2 { font-size: 1.4rem; }
.site .modal-kop p { margin-top: 0.25rem; color: var(--staal); font-size: 0.95rem; }
.site .modal-sluit { display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 50%; background: var(--grijs); cursor: pointer; }
.site .modal-sluit:hover { background: var(--lijn); }
.site .modal-inhoud { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 1.25rem; }
.site .modal-inhoud > .gescand { margin-bottom: 1.25rem; }
.site .modal-voet { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; padding: 1rem 1.25rem; border-top: 1px solid var(--lijn); background: var(--wit); }
.site .modal-voet-rechts { margin-left: auto; }
.site .knop--wis { background: var(--wit); color: var(--rood-diep); border-color: #F4C2C5; }
.site .knop--wis:hover { background: var(--rood-zacht); }
.site .modal .bewerk > div:last-child { top: 0; }
@media (max-width: 47.99rem) {
  .site dialog.modal, .site dialog.modal--breed, .site dialog.modal--klein { width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
  .site .modal-binnen { height: 100%; max-height: 100dvh; }
  .site .modal-voet .knop { flex: 1 1 auto; }
  .site .modal-voet-rechts { margin-left: 0; width: 100%; }
  .site .modal-voet-rechts .knop { width: 100%; }
}

/* De vraag, de melding na een handeling, en de scan die leest */
.site .bd-melding { background: var(--antraciet); border-radius: var(--rand); font-weight: 600; }
.site .bd-vraag { border-radius: 0.75rem; color: var(--antraciet); }
.site .bd-vraag::backdrop { background: rgba(22, 25, 30, 0.6); }
.site .bd-vraag p { font-size: 1.1rem; font-weight: 700; max-width: none; }
.site .bd-knop { min-height: 3rem; padding: 0.6rem 1.2rem; border: 2px solid var(--antraciet); border-radius: var(--rand); font-weight: 700; font-stretch: var(--halfbreed); }
.site .bd-knop--ja { background: var(--rood); border-color: var(--rood); color: var(--wit); }
.site .bd-knop--ja:hover { background: var(--rood-diep); border-color: var(--rood-diep); }
.site .knop.bd-bezig { cursor: progress; opacity: 0.9; }
.site .knop.bd-bezig::before { content: ""; width: 1rem; height: 1rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: bd-draai 0.8s linear infinite; }
@keyframes bd-draai { to { transform: rotate(360deg); } }
@media (max-width: 47.99rem) { .site:has(.belbalk) .bd-meldingen { bottom: 5.5rem; } }

/* Instellingen */
.site .tabblad { display: block; }
.site .tabs--instellingen { margin-bottom: 1.25rem; }
@media (max-width: 29.99rem) { .site .tabs--instellingen { display: grid; grid-template-columns: 1fr 1fr; } .site .tabs--instellingen button { justify-content: center; } }
.site .logo-plek, .site .tabmock-ic { display: inline-flex; align-items: center; }
.site .logo-plek img { width: auto; height: 2.2rem; max-width: 9rem; object-fit: contain; }
.site .tabmock-ic img { width: 1rem; height: 1rem; object-fit: contain; }
.site .keuze-kies { padding: 0; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.site .keuzes li[aria-current="true"] { background: var(--antraciet); color: var(--wit); font-weight: 700; }
.site .keuzes li[aria-current="true"] .in-gebruik, .site .keuzes li[aria-current="true"] .wis { color: var(--mist); }
.site .wis { padding: 0; border: 0; background: none; cursor: pointer; }
.site .modellen .veld-label small { font-weight: 600; color: var(--staal); }
.site .lijst-leeg { margin-top: 0.75rem; }
.site .uren-bewerk .dag { grid-template-columns: 6.5rem auto minmax(0, 1fr); }
.site .uren-bewerk .dicht { color: var(--staal); font-weight: 600; }
.site .uren-bewerk .schakelaar { min-height: 2.75rem; }
@media (max-width: 29.99rem) { .site .uren-bewerk .dag { grid-template-columns: 1fr auto; } .site .uren-bewerk .dag > .tijden, .site .uren-bewerk .dag > .dicht { grid-column: 1 / -1; } }
.site .teksten-boven { max-width: 22rem; }
.site .tekstblok-taal { display: grid; gap: 1.5rem; margin-top: 1.25rem; }
/* Een tab met meer blokken (de startpagina, Over ons): elk blok een fieldset met zijn naam,
   en een lijn ertussen. De legend zweeft, anders loopt de lijn erdoor. */
.site .tekstblok-veld { min-width: 0; margin: 0 0 2rem; padding: 0; border: 0; }
.site .tekstblok-veld + .tekstblok-veld { padding-top: 1.75rem; border-top: 1px solid var(--lijn); }
.site .tekstblok-veld > legend { float: left; width: 100%; padding: 0; font-size: 1.15rem; font-weight: 800; }
.site .tekstblok-veld > legend + * { clear: both; }
@media (min-width: 64rem) { .site .tekstblok-taal { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; } }
.site .meldingbalk { margin-top: 0.25rem; padding: 0.65rem 1rem; border-radius: var(--rand); background: var(--antraciet); color: var(--wit); font-weight: 600; max-width: none; }
.site .meldingbalk:empty { display: none; }

/* Aanvragen */
.site .aanvraag-open { padding: 0; border: 0; background: none; font: inherit; font-weight: 800; font-stretch: var(--halfbreed); text-align: left; color: inherit; cursor: pointer; }
.site .aanvraag-open:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.site .aanvraag[aria-current="true"] { background: #FBF6F6; box-shadow: inset 4px 0 0 var(--rood); }
.site .aanvraag-detail .knoppen { margin-top: 0; }
.site .notitieblok, .site .antwoordblok { display: grid; gap: 0.5rem; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--lijn); }
.site .notitieblok .knop { justify-self: start; }
.site .antwoordblok .knoppen { margin-top: 0.25rem; }

/* Een gesprek */
.site .gesprek { display: grid; gap: 1rem; }
.site .gesprek:has(> li:not([hidden])) { margin-bottom: 0.25rem; }
.site .gesprek-bericht { padding: 0.85rem 1rem; border: 1px solid var(--lijn); border-radius: 0.6rem; background: var(--grijs); }
.site .gesprek-bericht--bureau { margin-right: 3rem; background: #EEF3FA; border-color: #D3E2F3; }
.site .gesprek-bericht--u, .site .gesprek-bericht--wij { margin-left: 3rem; }
.site .gesprek-kop { font-size: 0.95rem; max-width: none; }
.site .gesprek-kop span { margin-left: 0.35rem; color: var(--staal); font-size: 0.85rem; white-space: nowrap; }
.site .gesprek-tekst { margin-top: 0.3rem; white-space: pre-line; max-width: none; }
.site .gesprek-bericht .bd-foto { display: inline-block; margin: 0.6rem 0.5rem 0 0; }
.site .gesprek-bericht .bd-foto img { width: 10rem; height: 7rem; }
@media (max-width: 47.99rem) { .site .gesprek-bericht--bureau { margin-right: 1rem; } .site .gesprek-bericht--u, .site .gesprek-bericht--wij { margin-left: 1rem; } }

/* Meldingen aan MahaWeb */
.site .meldinggroepen { display: grid; gap: 1.25rem; }
.site .meldinggroepen > .paneel + .paneel { margin-top: 0; }
.site .meldinggroep { overflow: hidden; }
.site .meldinggroep-kop { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.15rem 0.85rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--lijn); }
.site .meldinggroep-kop h2 { font-size: 1.15rem; }
.site .meldinggroep-kop p { grid-column: 2; color: var(--staal); font-size: 0.95rem; }
.site details.meldinggroep > summary { list-style: none; cursor: pointer; }
.site details.meldinggroep > summary::-webkit-details-marker { display: none; }
.site details.meldinggroep > summary h2::after { content: ""; display: inline-block; width: 0.55rem; height: 0.55rem; margin-left: 0.6rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-0.2rem); }
.site details.meldinggroep[open] > summary h2::after { transform: rotate(-135deg) translate(-0.1rem, -0.05rem); }
.site details.meldinggroep:not([open]) > summary { border-bottom: 0; }
.site .groep-ic { display: grid; place-items: center; grid-row: span 2; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--grijs); color: var(--staal); }
.site .groep-ic--wacht { background: #FFF3D6; color: #8A5A00; }
.site .groep-ic--klaar { background: var(--groen-zacht); color: var(--groen); }
.site .melding + .melding { border-top: 1px solid var(--lijn); }
.site .melding-open { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 0.5rem 1rem; width: 100%; padding: 1rem 1.25rem; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.site .melding-open:hover, .site .melding-open:focus-visible { background: var(--grijs); }
.site .melding-iconen, .site .melding-ic { display: inline-flex; color: var(--staal); }
.site .melding-titel { display: block; font-weight: 700; }
.site .melding-meta { display: block; margin-top: 0.2rem; font-size: 0.875rem; color: var(--staal); }
.site .melding-laatste { display: flex; align-items: center; gap: 0.35rem; margin-top: 0.3rem; font-size: 0.875rem; font-weight: 700; color: #1F5FA8; }
.site .melding-pijl { display: inline-flex; color: var(--mist); }
.site .badge { display: inline-flex; align-items: center; min-height: 1.75rem; padding: 0 0.65rem; border: 1px solid var(--lijn); border-radius: 999px; background: var(--grijs); color: var(--staal); font-size: 0.8125rem; font-weight: 700; white-space: nowrap; }
.site .badge--wacht { background: #FFF3D6; border-color: #F2D38B; color: #6B4600; }
.site .badge--open { background: #EEF3FA; border-color: #D3E2F3; color: #1F4F8A; }
.site .badge--bezig { background: #FFF0E0; border-color: #F5CFA6; color: #7A3E00; }
.site .badge--klaar { background: var(--groen-zacht); border-color: #B9DCC6; color: #14432A; }
@media (max-width: 47.99rem) {
  .site .melding-open { grid-template-columns: auto minmax(0, 1fr) auto; }
  .site .melding-open .badge { grid-column: 2; justify-self: start; }
  .site .melding-pijl { grid-row: 1; grid-column: 3; }
}
.site .terug { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.75rem; margin-bottom: 0.5rem; padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--antraciet); cursor: pointer; }
.site .terug:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.site .stand-blok { margin-bottom: 1.25rem; }
.site .stand-uitleg { max-width: none; padding: 1rem 1.1rem; border: 1px solid var(--lijn); border-radius: var(--rand); background: var(--wit); }
.site .stand-uitleg strong { display: block; }
.site .stand-uitleg--wacht { background: #FFF8E6; border-color: #F2D38B; }
.site .stand-uitleg--klaar { background: var(--groen-zacht); border-color: #B9DCC6; }
.site .reageren { display: grid; gap: 0.6rem; }
.site .reageren h3 { font-size: 1.15rem; }
.site .reageren .knoppen { margin-top: 0.25rem; }
.site .chips--soort .chip { gap: 0.45rem; }
.site .teller--zacht { background: #F2D38B; color: #3F2A00; }

/* Privacy en voorwaarden */
.site .juridisch-versie { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 1rem; color: var(--staal); font-size: 0.95rem; }
.site .juridisch { display: grid; gap: 2rem; }
.site .juridisch-inhoud { padding: 1.1rem 1.25rem; border: 1px solid var(--lijn); border-radius: 0.6rem; background: var(--grijs); }
.site .juridisch-inhoud h2 { font-size: 1.05rem; margin-bottom: 0.5rem; }
.site .juridisch-nummers { display: grid; gap: 0.1rem; }
.site .juridisch-nummers a { display: flex; align-items: center; gap: 0.6rem; min-height: 2.5rem; color: var(--antraciet); font-weight: 600; font-size: 0.95rem; text-decoration: none; }
.site .juridisch-nummers a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.site .juridisch .nr { display: inline-grid; place-items: center; flex: none; min-width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--antraciet); color: var(--wit); font-size: 0.8rem; font-weight: 800; font-stretch: 100%; letter-spacing: 0; }
.site .juridisch-tekst { display: grid; gap: 2.5rem; min-width: 0; }
.site .juridisch-tekst section { scroll-margin-top: 6rem; }
.site .juridisch-tekst h2 { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.9rem; font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.75rem); }
.site .juridisch-tekst h3 { margin: 1.4rem 0 0.5rem; font-size: 1.1rem; }
.site .juridisch-tekst p + p, .site .juridisch-tekst p + ul, .site .juridisch-tekst ul + p, .site .juridisch-tekst address + p { margin-top: 0.75rem; }
.site .juridisch-tekst address { margin-top: 0.5rem; font-style: normal; font-weight: 600; }
.site .juridisch-lijst { display: grid; gap: 0.45rem; padding-left: 1.2rem; list-style: disc; }
.site .juridisch-lijst li::marker { color: var(--rood); }
.site .juridisch-tekst a { color: var(--antraciet); font-weight: 600; }
@media (min-width: 64rem) {
  .site .juridisch { grid-template-columns: 17rem minmax(0, 46rem); gap: 4rem; align-items: start; }
  .site .juridisch-inhoud { position: sticky; top: 6.5rem; }
}

/* De fiche: kiezen en afdrukken */
.site .fiche-balk .fiche-terug { gap: 0.35rem; }
.site .fiche-keuze { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.site .fiche-keuze .veld-label { color: var(--mist); }
.site .fiche-kies { min-width: 15rem; color: var(--antraciet); }
.site .fiche-kies > summary { min-height: 2.75rem; padding-block: 0.4rem; }
.site .fiche-balk .knop { margin-left: auto; }
.site .fiche-uitleg { flex-basis: 100%; }
@media print { .site .fiche[hidden] { display: none; } }

/* Aanmelden bij het beheer */
.site .aanmeld { display: grid; min-height: 100vh; background: var(--wit); }
.site .aanmeld-beeld { height: 13rem; overflow: hidden; background: #E9ECEF; }
.site .aanmeld-beeld img { width: 100%; height: 100%; object-fit: cover; }
.site .aanmeld-vak { width: 100%; max-width: 30rem; margin: 0 auto; padding: 2.25rem 1.25rem 3rem; }
.site .aanmeld-vak > .merk { display: inline-flex; margin-bottom: 2rem; color: var(--antraciet); text-decoration: none; }
.site .aanmeld-vak h1 { font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.4rem); }
.site .aanmeld-uitleg { margin: 0.6rem 0 1.5rem; color: var(--staal); }
.site .aanmeld-rij { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }
.site .vinkje { display: inline-flex; align-items: center; gap: 0.55rem; min-height: 2.75rem; font-size: 0.95rem; cursor: pointer; }
.site .vinkje input { width: 1.2rem; height: 1.2rem; accent-color: var(--antraciet); }
.site .tekstknop { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.75rem; padding: 0; border: 0; background: none; font-weight: 700; color: var(--antraciet); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
.site .aanmeld-knop { width: 100%; margin-top: 1.5rem; }
.site .aanmeld-voorbeeld { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 1rem; font-size: 0.9rem; color: var(--staal); }
.site .aanmeld-terug { margin-top: 1.25rem; font-size: 0.95rem; }
.site .aanmeld-terug a { color: var(--antraciet); font-weight: 600; }
.site .aanmeld .bevestiging { margin: 0 0 1.25rem; }
.site .wachtwoord { -webkit-text-security: disc; font-family: inherit; letter-spacing: 0.08em; }
@media (min-width: 64rem) {
  .site .aanmeld { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .site .aanmeld-beeld { height: auto; }
  .site .aanmeld-vak { align-self: center; padding: 4rem 2.5rem; }
}