/* ==========================================================================
   Motion Crew — verhuurmodule.

   Ligt BOVENOP assets/css/site.css. Alle kleuren, lettertypes, rondingen en
   overgangen komen uit de tokens die daar gedefinieerd staan: --cream, --ink,
   --accent, --sans, --mono en de rest. Zo verkleurt dit gedeelte mee zodra u
   daar het accent aanpast, en hoeft hier niets aangeraakt te worden.
   ========================================================================== */

/* ---------- Aanvullende tokens ---------- */
.vh {
  /* Beschikbaarheid. Bewust LOS van het accent: groen, oranje en rood zijn
     betekenis, geen huisstijl. Anders leest een oranje accent als waarschuwing. */
  --vrij:      oklch(0.50 0.12 150);
  --vrij-bg:   oklch(0.50 0.12 150 / 0.10);
  --beperkt:   oklch(0.56 0.13 68);
  --beperkt-bg:oklch(0.56 0.13 68 / 0.13);
  --bezet:     oklch(0.53 0.16 27);
  --bezet-bg:  oklch(0.53 0.16 27 / 0.09);
  --uit:       var(--faint);
  --uit-bg:    rgba(0,0,0,.05);

  /* site.css levert --accent-40/50/55. Voor vlakken hebben we lichtere nodig. */
  --accent-12: oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.12);
  --accent-06: oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.06);

  --radius:    10px;
  --radius-s:  7px;
  --schaduw:   0 1px 2px rgba(0,0,0,.04), 0 10px 30px -20px rgba(0,0,0,.35);
  --kop-hoogte: 64px;
}

body.vh {
  background: var(--cream);
  color: var(--body);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;

  /* Zodat de voet ook op een korte pagina onderaan blijft staan in plaats van
     halverwege te zweven met crème eronder. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
body.vh > .vh-main { flex: 1 0 auto; }
body.vh > .vh-voet { flex: none; }

/* Het hidden-attribuut moet altijd winnen. Zonder deze regel blijft een blok
   met display:flex gewoon staan, ook als het verborgen hoort te zijn: dat is
   precies wat er misging met het leveradres bij "ik haal zelf op". */
.vh [hidden], .vh[hidden] { display: none !important; }

/* ==========================================================================
   Kop
   ========================================================================== */
.vh-kop {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(244, 241, 234, .92);
  backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid var(--line-08);
}
.vh-kop-in {
  display: flex;
  align-items: center;
  gap: 14px 22px;
  min-height: var(--kop-hoogte);
  padding: 10px var(--gutter);
  max-width: 1440px;
  margin: 0 auto;
  flex-wrap: wrap;
}

/* Het merk is hetzelfde als op de hoofdsite: het vierkantje en de naam komen
   uit site.css via .nav__mark en .nav__name. Hier staat enkel hoe ze naast
   elkaar liggen, plus het afdelingslabel erachter. Past u het logo ooit aan in
   site.css, dan verandert het hier vanzelf mee. */
.vh-merk {
  display: flex; align-items: center; gap: 11px;
  text-decoration: none; flex: none;
}
.vh-merk .nav__name { font-size: 17px; }

/* "Verhuur" staat naast het logo, niet erin: het logo blijft dus onaangeroerd. */
.vh-merk-sub {
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent);
  padding-left: 11px; border-left: 1px solid var(--line-10);
  align-self: center; white-space: nowrap;
}
@media (max-width: 560px) {
  .vh-merk-sub { display: none; }
}

.vh-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.vh-nav a {
  font-size: 14px; color: var(--body); text-decoration: none;
  padding: 7px 12px; border-radius: var(--radius-s);
  transition: background .18s var(--ease), color .18s var(--ease);
}
.vh-nav a:hover { background: rgba(0,0,0,.045); color: var(--ink); }
.vh-nav a.is-actief { color: var(--accent); font-weight: 600; background: var(--accent-12); }

.vh-kop-acties { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-wrap: wrap; }

/* Segmentschakelaars: taal en btw. Zelfde vorm, dus ze lezen als één familie. */
.vh-talen, .vh-btw {
  display: inline-flex;
  border: 1px solid var(--line-10);
  border-radius: 100px;
  overflow: hidden;
  background: var(--card);
}
.vh-talen a, .vh-btw a {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 6px 11px;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.vh-talen a + a, .vh-btw a + a { border-left: 1px solid var(--line-08); }
.vh-talen a:hover, .vh-btw a:hover { background: rgba(0,0,0,.04); color: var(--ink); }
.vh-talen a.is-actief, .vh-btw a.is-actief { background: var(--accent); color: var(--cream); }
.vh-btw a { font-size: 10px; }

.vh-lijstknop {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ink); color: var(--cream);
  padding: 8px 14px; border-radius: 100px;
  font-size: 13.5px; font-weight: 500; text-decoration: none;
  transition: background .18s var(--ease);
}
.vh-lijstknop:hover { background: var(--accent); }
.vh-teller {
  background: var(--accent); color: var(--cream);
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 100px; display: grid; place-items: center;
}
.vh-lijstknop:hover .vh-teller { background: var(--cream); color: var(--accent); }

.vh-uit { font-size: 13px; color: var(--muted); text-decoration: none; }
.vh-uit:hover { color: var(--accent); text-decoration: underline; }

@media (max-width: 720px) {
  .vh-lijstknop-tekst { display: none; }
  .vh-nav { order: 3; width: 100%; border-top: 1px solid var(--line-08); padding-top: 8px; }
  .vh-nav a { padding: 6px 10px; font-size: 13.5px; }
}

/* ==========================================================================
   Periodebalk
   ========================================================================== */
.vh-periodebalk { background: var(--band); border-top: 1px solid var(--line-08); }
.vh-periodebalk.is-leeg { background: var(--beperkt-bg); }
.vh-periodebalk-in {
  display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap;
  padding: 9px var(--gutter);
  max-width: 1440px; margin: 0 auto;
  font-size: 13.5px;
}
.vh-periode-icoon { display: inline-flex; color: var(--accent); }
.vh-periode-datums { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.vh-periode-duur, .vh-periode-extra {
  font-family: var(--mono); font-size: 11px; letter-spacing: .05em;
  color: var(--muted); text-transform: uppercase;
}
.vh-periode-extra { color: var(--accent); }
.vh-periode-wijzig { margin-left: auto; color: var(--accent); font-size: 13px; }

/* ==========================================================================
   Raamwerk
   ========================================================================== */
.vh-main {
  /* width:100% is hier geen overbodigheid. body.vh is een flexkolom, en een
     flexitem met auto-marges krimpt naar zijn inhoud in plaats van uit te
     rekken. Zonder deze regel is elke pagina zo breed als wat erop staat, en
     lijkt de ene pagina gecentreerd en de andere links uitgelijnd. */
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding-inline: var(--gutter);
  padding-block: clamp(26px, 4vw, 48px) 80px;
  min-height: 60vh;
}
/* Gecentreerde, smalle kolom. Dit is de vorm voor elk scherm met één taak:
   aanmelden, toegang vragen, een periode kiezen, uw gegevens, een bevestiging.
   Breed blijft voorbehouden aan de aanvraagtrechter: catalogus, aanvraaglijst
   en het aanvraagformulier. */
.vh-smal { max-width: 620px; margin-inline: auto; }

.vh-titel {
  font-size: clamp(26px, 4vw, 42px);
  font-weight: 600; letter-spacing: -.03em; line-height: 1.08;
  color: var(--ink); margin-bottom: 8px; text-wrap: balance;
}
.vh-onder { color: var(--muted); max-width: 62ch; margin-bottom: 26px; text-wrap: pretty; }
.vh-eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: .26em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 12px;
}

/* ==========================================================================
   Meldingen
   ========================================================================== */
.vh-melding {
  border-radius: var(--radius-s);
  padding: 13px 16px;
  margin-bottom: 20px;
  font-size: 14.5px;
  border-left: 3px solid var(--accent);
  background: rgba(0,0,0,.035);
  color: var(--strong);
}
.vh-melding ul { margin: 0; padding-left: 18px; }
.vh-melding li + li { margin-top: 4px; }
.vh-melding--fout   { border-left-color: var(--bezet); background: var(--bezet-bg); }
.vh-melding--gelukt { border-left-color: var(--vrij);  background: var(--vrij-bg); }
.vh-melding--info   { border-left-color: var(--accent); }

/* ==========================================================================
   Formulieren
   ========================================================================== */
.vh-kaart {
  background: var(--card);
  border: 1px solid var(--line-08);
  border-radius: var(--radius);
  padding: clamp(22px, 4vw, 34px);
  box-shadow: var(--schaduw);
}
.vh-velden { display: flex; flex-direction: column; gap: 16px; }
.vh-rij { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.vh-rij--3 { grid-template-columns: 2fr 1fr 1fr; }
@media (max-width: 620px) { .vh-rij, .vh-rij--3 { grid-template-columns: 1fr; } }

.vh-veld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.vh-veld > label, .vh-legende {
  font-size: 13px; font-weight: 600; color: var(--strong); letter-spacing: -.005em;
}
.vh-veld .vh-hint { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.vh-periode-uitleg { margin: -6px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.vh-veld .vh-opt { font-weight: 400; color: var(--faint); }

.vh-veld input[type=text], .vh-veld input[type=email], .vh-veld input[type=tel],
.vh-veld input[type=password], .vh-veld input[type=date], .vh-veld input[type=number],
.vh-veld input[type=search], .vh-veld select, .vh-veld textarea {
  font-family: var(--sans); font-size: 15px; color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--line-10);
  border-radius: var(--radius-s);
  padding: 11px 13px;
  width: 100%;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.vh-veld textarea { min-height: 110px; resize: vertical; line-height: 1.55; }
.vh-veld select { appearance: none; background-image: none; cursor: pointer; }
.vh-veld input:focus, .vh-veld select:focus, .vh-veld textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-12);
}
.vh-veld input[aria-invalid=true], .vh-veld select[aria-invalid=true] { border-color: var(--bezet); }

/* Keuzevakjes en radio's krijgen genoeg klikruimte, ook op een telefoon. */
.vh-keuze { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 14.5px; line-height: 1.5; }
.vh-keuze input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--accent); flex: none; }
.vh-keuzes { display: flex; flex-direction: column; gap: 10px; }
.vh-keuzes--breed { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 620px) { .vh-keuzes--breed { grid-template-columns: 1fr; } }

/* Een radio als hele kaart: makkelijker te raken en duidelijker wat gekozen is. */
.vh-radiokaart {
  border: 1px solid var(--line-10); border-radius: var(--radius-s);
  padding: 13px 15px; background: var(--cream);
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.vh-radiokaart:has(input:checked) { border-color: var(--accent); background: var(--card); }
.vh-radiokaart:hover { border-color: var(--dim); }
.vh-radiokaart small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 3px; }

fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.vh-legende { margin-bottom: 9px; display: block; }

/* ---------- Knoppen ---------- */
.vh-knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--sans); font-size: 15px; font-weight: 500;
  background: var(--accent); color: var(--cream);
  border: 1px solid transparent; border-radius: 100px;
  padding: 12px 24px; cursor: pointer; text-decoration: none;
  transition: transform .18s var(--ease), background .18s var(--ease), opacity .18s var(--ease);
}
.vh-knop:hover { background: var(--ink); transform: translateY(-1px); }
.vh-knop:active { transform: translateY(0); }
.vh-knop[disabled], .vh-knop.is-uit { opacity: .45; pointer-events: none; }
.vh-knop--sec { background: transparent; color: var(--ink); border-color: var(--line-10); }
.vh-knop--sec:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.vh-knop--klein { font-size: 13.5px; padding: 8px 16px; }
.vh-knop--breed { width: 100%; }
.vh-knop--gevaar { background: var(--bezet); }

.vh-acties { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 24px; }
.vh-link { color: var(--accent); font-size: 14px; }

/* ==========================================================================
   Catalogus
   ========================================================================== */
.vh-filters {
  display: flex; flex-direction: column; gap: 14px;
  margin-bottom: 22px; padding-bottom: 20px; border-bottom: 1px solid var(--line-08);
}
/* Twee vaste regels in plaats van één die afbreekt waar het uitkomt: zoeken en
   sorteren bovenaan, categorieen eronder. Zo wordt er niets meer afgekapt. */
.vh-filterrij {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center; width: 100%;
}
.vh-zoek { position: relative; flex: 1 1 300px; max-width: 440px; min-width: 0; }
.vh-zoek input {
  width: 100%;
  font-family: var(--sans); font-size: 15px; color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--line-10);
  border-radius: var(--radius-s);
  padding: 11px 13px 11px 38px;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
  -webkit-appearance: none; appearance: none;
}
.vh-zoek input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-12);
}
.vh-zoek input::-webkit-search-cancel-button { cursor: pointer; }
.vh-zoek svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--faint); pointer-events: none; }

.vh-chips { display: flex; gap: 7px; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
/* Beheer, aanvragen: filters per soort op een eigen rij met een label ervoor. */
.bh-filters { display: grid; gap: 10px; margin-bottom: 18px; }
/* Beheer, klant: uitkomst van de VIES-controle onder het btw-nummer. */
.bh-vies { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-top: 8px; }
.bh-vies .vh-hint { margin: 0; }
.bh-filterrij { display: flex; gap: 12px; align-items: baseline; }
.bh-filterlabel { flex: 0 0 52px; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 640px) { .bh-filterrij { flex-direction: column; gap: 6px; } }
.vh-chip {
  font-size: 13px; padding: 7px 14px; border-radius: 100px;
  border: 1px solid var(--line-10); background: var(--card); color: var(--body);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: all .18s var(--ease);
}
.vh-chip:hover { border-color: var(--dim); color: var(--ink); }
.vh-chip.is-actief { background: var(--ink); color: var(--cream); border-color: var(--ink); }

.vh-telling {
  font-family: var(--mono); font-size: 11.5px; color: var(--faint);
  letter-spacing: .05em; margin-left: auto; white-space: nowrap; flex: none;
}
.vh-sorteer {
  font-family: var(--sans); font-size: 13.5px; padding: 9px 14px; flex: none;
  border: 1px solid var(--line-10); border-radius: 100px;
  background: var(--card); color: var(--body); cursor: pointer;
}
.vh-sorteer:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vh-enkelvrij { flex: none; white-space: nowrap; font-size: 13.5px; }

.vh-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 18px;
}

.vh-prod {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line-08);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.vh-prod:hover { border-color: var(--line-10); box-shadow: var(--schaduw); transform: translateY(-2px); }
.vh-prod.is-bezet .vh-prod-beeld { opacity: .55; }
/* Bewust NIET de hele kaart vervagen: een bezet artikel kan wel degelijk
   aangevraagd worden, en een vage knop leest als uitgeschakeld. */

.vh-prod-beeld {
  aspect-ratio: 4 / 3; background: var(--band);
  display: grid; place-items: center; overflow: hidden; position: relative;
  max-width: 100%;
}
/* Elke foto in hetzelfde kader en volledig zichtbaar. Met cover viel bij een
   hoge foto (een recorder, een speaker) de boven- en onderkant weg, en stonden
   productfoto's op wit en sfeerfoto's ongelijk naast elkaar. Nu staat elke
   foto wat kleiner, met witruimte rondom, in een wit kader. */
.vh-prod-beeld:has(img), .vh-galerij-groot, .vh-galerij-duim { background: #fff; }
/* De foto wordt absoluut in het kader gezet. Met height: 100% alleen nam een
   img in een grid met aspect-ratio zijn eigen hoogte, liep hij onder het kader
   door en sneed overflow: hidden de onder- en bovenkant weg. */
.vh-prod-beeld img, .vh-galerij-groot img, .vh-galerij-duim img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; display: block; box-sizing: border-box;
}
.vh-prod-beeld img { padding: 9%; }

/* Meerdere foto's op een kaart: een strook die u opzij veegt, met pijltjes bij
   hover en bolletjes onderaan. De strook ligt boven de klikbare kaart, zodat
   vegen werkt; elke foto is zelf een link naar de productpagina. */
.vh-prod-strook {
  position: absolute; inset: 0; z-index: 1;
  display: flex; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.vh-prod-strook::-webkit-scrollbar { display: none; }
.vh-prod-dia { flex: 0 0 100%; position: relative; scroll-snap-align: start; }
.vh-prod-pijl {
  position: absolute; top: 50%; z-index: 2; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 50%; padding: 0;
  border: 1px solid var(--line-10); background: rgba(255, 255, 255, .92); color: var(--ink);
  display: grid; place-items: center; cursor: pointer; font-size: 17px; line-height: 1;
  opacity: 0; transition: opacity .15s var(--ease);
}
.vh-prod-pijl--vorige { left: 8px; }
.vh-prod-pijl--volgende { right: 8px; }
.vh-prod:hover .vh-prod-pijl, .vh-prod-pijl:focus-visible { opacity: 1; }
.vh-prod-pijl[disabled] { visibility: hidden; }
@media (hover: none) { .vh-prod-pijl { display: none; } }
.vh-prod-punten {
  position: absolute; left: 0; right: 0; bottom: 8px; z-index: 2;
  display: flex; justify-content: center; gap: 5px; pointer-events: none;
}
.vh-prod-punten span { width: 6px; height: 6px; border-radius: 50%; background: var(--line-10); }
.vh-prod-punten span.is-actief { background: var(--accent); }
/* De hele kaart is klikbaar via de naam; het formulier ligt erboven. */
.vh-prod-naam a::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.vh-prod .vh-toevoegen, .vh-prod .vh-meer { position: relative; z-index: 1; }
.vh-meer { font-size: 13px; color: var(--accent); text-decoration: none; align-self: flex-start; }
.vh-meer:hover { text-decoration: underline; }
.vh-prod-leeg { color: var(--faint); }

.vh-prod-body { padding: 15px 16px 16px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.vh-prod-merk {
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--faint);
}
.vh-prod-naam {
  font-size: 15.5px; font-weight: 600; line-height: 1.28; color: var(--ink);
  letter-spacing: -.012em; text-wrap: pretty;
}
.vh-prod-naam a { color: inherit; text-decoration: none; }
.vh-prod-naam a:hover { color: var(--accent); }

.vh-prod-prijs { margin-top: auto; display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.vh-prod-bedrag {
  font-size: 20px; font-weight: 600; color: var(--ink);
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.vh-prod-bedrag::before { content: "€ "; font-size: .72em; font-weight: 400; color: var(--muted); }
.vh-prod-eenheid { font-family: var(--mono); font-size: 10.5px; color: var(--muted); letter-spacing: .04em; }
.vh-prod-tweede { font-size: 11.5px; color: var(--faint); width: 100%; font-variant-numeric: tabular-nums; }

/* ---------- Beschikbaarheidsvlag ---------- */
.vh-vlag {
  display: inline-flex; align-items: center; gap: 6px;
  /* De kaart is een flexkolom; zonder dit rekt de vlag over de volle breedte. */
  align-self: flex-start;
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 100px; white-space: nowrap;
  max-width: 100%;
}
.vh-vlag--klein { display: inline-flex; margin-left: 8px; padding: 2px 8px; font-size: 10px; vertical-align: middle; }
.vh-vlag span { overflow: hidden; text-overflow: ellipsis; }
.vh-vlag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.vh-vlag--ok  { background: var(--vrij-bg);    color: var(--vrij); }
.vh-vlag--mid { background: var(--beperkt-bg); color: var(--beperkt); }
.vh-vlag--no  { background: var(--bezet-bg);   color: var(--bezet); }
.vh-vlag--off { background: var(--uit-bg);     color: var(--uit); }

/* ---------- Toevoegen ---------- */
.vh-toevoegen { display: flex; gap: 8px; align-items: stretch; }
.vh-aantal {
  display: flex; align-items: center;
  border: 1px solid var(--line-10); border-radius: 100px; background: var(--cream);
  flex: none;
}
.vh-aantal button {
  width: 32px; height: 36px; border: 0; background: none; cursor: pointer;
  color: var(--muted); font-size: 17px; line-height: 1; border-radius: 100px;
}
.vh-aantal button:hover { color: var(--accent); }
.vh-aantal input {
  width: 34px; border: 0; background: none; text-align: center;
  font-family: var(--mono); font-size: 13px; color: var(--ink);
  -moz-appearance: textfield; appearance: textfield;
}
.vh-aantal input::-webkit-outer-spin-button, .vh-aantal input::-webkit-inner-spin-button { appearance: none; margin: 0; }
.vh-toevoegen .vh-knop { flex: 1; padding: 9px 14px; font-size: 13.5px; }

/* ==========================================================================
   Productpagina
   ========================================================================== */
.vh-detail { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(24px, 4vw, 52px); align-items: start; }
@media (max-width: 900px) { .vh-detail { grid-template-columns: 1fr; } }
.vh-galerij-groot {
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius); border: 1px solid var(--line-08);
  overflow: hidden; display: grid; place-items: center;
}
.vh-galerij-groot img { padding: 7%; }
.vh-galerij-duimen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.vh-galerij-duim {
  position: relative; width: 68px; aspect-ratio: 1; padding: 0; cursor: pointer;
  border: 1px solid var(--line-08); border-radius: 8px; overflow: hidden;
}
.vh-galerij-duim img { padding: 8%; }
.vh-galerij-duim[aria-current="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.vh-galerij-duim:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vh-verwant { margin-top: clamp(40px, 6vw, 72px); padding-top: 28px; border-top: 1px solid var(--line-08); }
.vh-verwant .vh-raster { margin-top: 14px; }
.vh-pakket { list-style: none; margin: 8px 0 0; padding: 0; font-size: 14px; }
.vh-pakket li { padding: 9px 0; border-bottom: 1px solid var(--line-08); display: flex; gap: 10px; }
.vh-pakket-aantal { font-family: var(--mono); color: var(--muted); min-width: 28px; }
.vh-specs { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 8px; }
.vh-specs th, .vh-specs td { text-align: left; padding: 9px 0; border-bottom: 1px solid var(--line-08); vertical-align: top; }
.vh-specs th { color: var(--muted); font-weight: 400; width: 42%; }
.vh-specs td { color: var(--strong); }

/* ==========================================================================
   Aanvraaglijst
   ========================================================================== */
.vh-lijst { display: flex; flex-direction: column; gap: 12px; }
.vh-lijstregel {
  display: grid;
  /* Vijf kolommen voor vijf kinderen: beeld, tekst, aantal, prijs, verwijderen. */
  grid-template-columns: 74px minmax(0, 1fr) auto auto auto;
  gap: 16px; align-items: center;
  background: var(--card); border: 1px solid var(--line-08);
  border-radius: var(--radius); padding: 13px 16px 13px 13px;
}
.vh-lijstregel.is-tekort { border-color: var(--beperkt); }
.vh-lijstregel-beeld { aspect-ratio: 1; border-radius: var(--radius-s); overflow: hidden; background: var(--band); }
.vh-lijstregel-beeld img { width: 100%; height: 100%; object-fit: cover; }
.vh-lijstregel-naam { font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.vh-lijstregel-meta { font-family: var(--mono); font-size: 11px; color: var(--faint); letter-spacing: .04em; margin-top: 3px; }
.vh-lijstregel-prijs { text-align: right; font-variant-numeric: tabular-nums; }
.vh-lijstregel-bedrag { font-size: 17px; font-weight: 600; color: var(--ink); }
.vh-lijstregel-bedrag::before { content: "€ "; font-size: .72em; font-weight: 400; color: var(--muted); }
.vh-weg {
  border: 0; background: none; cursor: pointer; color: var(--faint);
  padding: 8px; border-radius: 50%; line-height: 0;
}
.vh-weg:hover { color: var(--bezet); background: var(--bezet-bg); }
@media (max-width: 760px) {
  .vh-lijstregel { grid-template-columns: 56px minmax(0, 1fr) auto; row-gap: 12px; }
  .vh-lijstregel-prijs { grid-column: 2 / 3; text-align: left; }
  .vh-lijstregel > form:last-child { grid-column: 3 / 4; justify-self: end; }
}

.vh-totalen {
  background: var(--card); border: 1px solid var(--line-08);
  border-radius: var(--radius); padding: 20px 22px; margin-top: 18px;
}
.vh-totaalregel {
  display: flex; justify-content: space-between; gap: 20px;
  padding: 7px 0; font-size: 14.5px; font-variant-numeric: tabular-nums;
}
.vh-totaalregel dt { color: var(--muted); }
.vh-totaalregel dd { color: var(--strong); font-weight: 500; }
.vh-totaalregel--eind {
  border-top: 1px solid var(--line-10); margin-top: 8px; padding-top: 14px; font-size: 19px;
}
.vh-totaalregel--eind dt { color: var(--ink); font-weight: 600; }
.vh-totaalregel--eind dd { color: var(--ink); font-weight: 700; }
.vh-totaalregel--klein { font-size: 12.5px; color: var(--faint); }
.vh-totaalregel--klein dd, .vh-totaalregel--klein dt { color: var(--faint); font-weight: 400; }
/* Het totaal dat de klant overschrijft (huur + waarborg): het laatste woord. */
.vh-totaalregel--huur { border-top: 1px solid var(--line-10); margin-top: 8px; padding-top: 12px; }
.vh-totaalregel--huur dt, .vh-totaalregel--huur dd { color: var(--ink); font-weight: 600; }
.vh-totaalregel--betalen dd { color: var(--accent); }
.vh-betaling dd strong { color: var(--ink); font-weight: 700; }

.vh-voorbehoud {
  font-size: 12.5px; color: var(--muted); line-height: 1.55;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-08);
}

/* ==========================================================================
   Tabellen (aanvragen, beheer)
   ========================================================================== */
.vh-tabelwrap { overflow-x: auto; border: 1px solid var(--line-08); border-radius: var(--radius); background: var(--card); }
.vh-tabel { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }
.vh-tabel thead th {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--muted);
  text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line-08); white-space: nowrap;
}
.vh-tabel tbody td { padding: 13px 16px; border-bottom: 1px solid var(--line-08); vertical-align: middle; }
.vh-tabel tbody tr:last-child td { border-bottom: 0; }
.vh-tabel tbody tr:hover { background: rgba(0,0,0,.018); }
.vh-tabel .num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.vh-tabel a { color: var(--accent); text-decoration: none; font-weight: 500; }
.vh-tabel a:hover { text-decoration: underline; }

.vh-status {
  display: inline-block; font-family: var(--mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; padding: 4px 9px; border-radius: 4px;
}
/* Waar een aanvraag vandaan komt, bv. motionbox.be (in de kleur van dat merk). */
.vh-bron {
  display: inline-block; font-family: var(--mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: .06em; padding: 3px 8px; border-radius: 4px;
  color: #8a0752; background: #fde7f3; border: 1px solid #f6b9da;
}
.vh-status--aanvraag    { background: var(--beperkt-bg); color: var(--beperkt); }
.vh-status--offerte     { background: var(--accent-12); color: var(--accent); }
.vh-status--optie       { background: var(--beperkt-bg); color: var(--beperkt); }
.vh-status--bevestigd   { background: var(--vrij-bg); color: var(--vrij); }
.vh-status--geleverd    { background: var(--vrij-bg); color: var(--vrij); }
.vh-status--retour      { background: var(--vrij-bg); color: var(--vrij); }
.vh-status--afgesloten  { background: var(--uit-bg); color: var(--uit); }
.vh-status--geannuleerd { background: var(--bezet-bg); color: var(--bezet); }

/* ==========================================================================
   Lege toestand
   ========================================================================== */
.vh-leeg {
  text-align: center; padding: clamp(40px, 8vw, 80px) 20px;
  border: 1px dashed var(--line-10); border-radius: var(--radius); background: var(--card);
}
.vh-leeg svg { color: var(--faint); margin-bottom: 14px; }
.vh-leeg p { color: var(--muted); margin-bottom: 20px; }

/* ==========================================================================
   Voet
   ========================================================================== */
.vh-voet { border-top: 1px solid var(--line-08); background: var(--band); margin-top: 40px; }
.vh-voet-in {
  max-width: 1440px; margin: 0 auto; padding: 26px var(--gutter);
  display: flex; justify-content: space-between; gap: 14px 28px; flex-wrap: wrap; align-items: center;
}
.vh-voet-bedrijf {
  font-family: var(--mono); font-size: 11px; color: var(--faint); letter-spacing: .04em;
  display: flex; align-items: center; gap: 10px;
}
.vh-voet-nav { display: flex; gap: 20px; flex-wrap: wrap; }
.vh-voet-nav a { font-size: 13px; color: var(--muted); text-decoration: none; }
.vh-voet-nav a:hover { color: var(--accent); text-decoration: underline; }

/* ==========================================================================
   Juridische tekst
   ========================================================================== */
.vh-juridisch { max-width: 74ch; margin-inline: auto; }
.vh-juridisch h2 {
  font-size: 20px; font-weight: 600; color: var(--ink); letter-spacing: -.02em;
  margin: 38px 0 10px; padding-top: 18px; border-top: 1px solid var(--line-08);
}
.vh-juridisch h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 26px; }
.vh-juridisch h3 { font-size: 15.5px; font-weight: 600; color: var(--strong); margin: 22px 0 6px; }
.vh-juridisch p, .vh-juridisch li { font-size: 15px; line-height: 1.72; color: var(--body); }
.vh-juridisch p { margin-bottom: 12px; text-wrap: pretty; }
.vh-juridisch ul, .vh-juridisch ol { margin: 0 0 14px; padding-left: 22px; }
.vh-juridisch li { margin-bottom: 6px; }
.vh-juridisch strong { color: var(--strong); font-weight: 600; }
.vh-artikel {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 5px;
}
/* Bepalingen die enkel voor consumenten of enkel voor bedrijven gelden. Wie
   dat niet kan zien, tekent iets anders dan hij denkt. */
.vh-enkel {
  border-left: 2px solid var(--accent); background: rgba(0,0,0,.028);
  padding: 14px 18px; border-radius: 0 var(--radius-s) var(--radius-s) 0; margin: 0 0 14px;
}
.vh-enkel p:last-child { margin-bottom: 0; }
.vh-enkel-kop {
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 6px;
}
.vh-inhoud { background: var(--card); border: 1px solid var(--line-08); border-radius: var(--radius); padding: 20px 24px; margin-bottom: 30px; }
.vh-inhoud ol { columns: 2; column-gap: 30px; margin: 0; padding-left: 20px; font-size: 14px; }
@media (max-width: 620px) { .vh-inhoud ol { columns: 1; } }
.vh-inhoud a { color: var(--body); text-decoration: none; }
.vh-inhoud a:hover { color: var(--accent); text-decoration: underline; }

/* ==========================================================================
   Toegankelijkheid
   ========================================================================== */
.vh-verborgen {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
  .vh *, .vh *::before, .vh *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
@media print {
  .vh-kop, .vh-voet, .vh-periodebalk, .vh-acties { display: none !important; }
  body.vh { background: #fff; }
}

/* ==========================================================================
   Beheer

   Bewust dichter en zakelijker dan de klantzijde: dit scherm wordt gescand en
   bediend, niet gelezen. Smallere regels, meer per scherm, en alles wat
   aandacht vraagt in kleur.
   ========================================================================== */
body.bh { background: #f7f5f0; }

.bh-kop { background: var(--ink); border-bottom: 0; position: sticky; top: 0; z-index: 60; }
.bh-kop-in {
  display: flex; align-items: center; gap: 10px 24px; flex-wrap: wrap;
  max-width: 1560px; margin: 0 auto; padding: 10px var(--gutter); min-height: 58px;
}
/* De beheerkop is donker, dus de naam moet licht. Het vierkantje blijft petrol
   en blijft daardoor herkenbaar. */
.bh-kop .nav__name    { color: var(--cream); font-size: 16px; }
.bh-kop .vh-merk-sub  { color: oklch(0.72 0.13 var(--accent-h)); border-left-color: rgba(255,255,255,.18); }
.bh-kop .nav__mark    { background: oklch(0.72 0.13 var(--accent-h)); }

.bh-nav { display: flex; gap: 2px; flex-wrap: wrap; }
.bh-nav a {
  font-size: 13.5px; color: rgba(244,241,234,.66); text-decoration: none;
  padding: 7px 12px; border-radius: var(--radius-s); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 7px;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.bh-nav a:hover { background: rgba(255,255,255,.08); color: var(--cream); }
.bh-nav a.is-actief { background: rgba(255,255,255,.13); color: var(--cream); font-weight: 600; }
.bh-badge {
  background: oklch(0.68 0.17 45); color: #1a1712;
  font-family: var(--mono); font-size: 9.5px; font-weight: 700;
  min-width: 17px; height: 17px; padding: 0 5px;
  border-radius: 100px; display: grid; place-items: center;
}
.bh-kop-acties { margin-left: auto; display: flex; gap: 16px; align-items: center; }
.bh-kop .vh-uit { color: rgba(244,241,234,.6); font-size: 12.5px; }
.bh-kop .vh-uit:hover { color: var(--cream); }

.bh-main { max-width: 1560px; padding-block: 26px 70px; }
.bh-titelrij {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 22px;
}

/* ---------- Tegels op het overzicht ---------- */
.bh-tegels { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 30px; }
.bh-tegel {
  background: var(--card); border: 1px solid var(--line-08);
  border-radius: var(--radius); padding: 17px 19px; text-decoration: none; display: block;
  transition: border-color .18s var(--ease), transform .18s var(--ease);
}
.bh-tegel:hover { border-color: var(--accent); transform: translateY(-2px); }
.bh-tegel-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
.bh-tegel-getal {
  font-size: 30px; font-weight: 600; color: var(--ink); letter-spacing: -.03em;
  line-height: 1.1; margin-top: 6px; font-variant-numeric: tabular-nums;
}
.bh-tegel-getal.is-aandacht { color: oklch(0.56 0.13 68); }
.bh-tegel-onder { font-size: 12.5px; color: var(--faint); margin-top: 3px; }

/* ---------- Formulieren in twee kolommen ---------- */
.bh-kolommen { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr); gap: 20px; align-items: start; }
@media (max-width: 980px) { .bh-kolommen { grid-template-columns: minmax(0, 1fr); } }
.bh-blok {
  background: var(--card); border: 1px solid var(--line-08);
  border-radius: var(--radius); padding: 20px 22px; margin-bottom: 16px;
}
.bh-blok > h2 {
  font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 15px;
}
.bh-blok:last-child { margin-bottom: 0; }
.bh-plakkerig { position: sticky; top: 78px; }
.bh-totp-qr { width: 200px; max-width: 100%; margin: 10px 0 4px; padding: 8px; background: #fff; border: 1px solid var(--line-10); border-radius: var(--radius-s); }
.bh-totp-qr svg { display: block; width: 100%; height: auto; }
/* Komende reservaties: per week; de zijkolom schuift zelf als de lijst lang is. */
.bh-komend { max-height: calc(100vh - 96px); overflow-y: auto; }
.bh-komend-keuze { margin: 4px 0 6px; }
.bh-komend-week { margin: 16px 0 2px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.bh-komend-regel { display: block; padding: 9px 0; border-top: 1px solid var(--line-08); font-size: 13.5px; color: inherit; text-decoration: none; }
.bh-komend-regel:hover .bh-komend-datum { color: var(--accent); }
.bh-komend-datum { display: block; color: var(--ink); font-weight: 600; }
.bh-komend-datum .vh-status { margin-left: 6px; vertical-align: 1px; }
.bh-komend-meta { display: block; color: var(--muted); margin-top: 2px; font-size: 12.5px; line-height: 1.45; }
@media (max-width: 980px) { .bh-komend { max-height: none; } }

/* ---------- Taaltabbladen ---------- */
.bh-tabs { display: flex; gap: 3px; border-bottom: 1px solid var(--line-08); margin-bottom: 16px; }
.bh-tabs button {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer;
  padding: 8px 13px; color: var(--muted); margin-bottom: -1px;
}
.bh-tabs button.is-actief { color: var(--accent); border-bottom-color: var(--accent); font-weight: 700; }

/* ---------- Compacte tabel ---------- */
.bh-main .vh-tabel { font-size: 13.5px; }
.bh-main .vh-tabel tbody td { padding: 10px 14px; }
.bh-main .vh-tabel thead th { padding: 10px 14px; }
.bh-rijknop {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em;
  padding: 5px 10px; border-radius: 5px; border: 1px solid var(--line-10);
  background: var(--cream); color: var(--body); cursor: pointer; text-decoration: none;
  display: inline-block;
}
.bh-rijknop:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Offerteregels ---------- */
.bh-regels { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.bh-regels th {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); text-align: left; padding: 0 8px 8px; font-weight: 700;
}
.bh-regels td { padding: 5px 8px; border-top: 1px solid var(--line-08); vertical-align: middle; }
.bh-regels td:first-child, .bh-regels th:first-child { padding-left: 0; }
.bh-regels td:last-child, .bh-regels th:last-child { padding-right: 0; text-align: right; }
.bh-regels input, .bh-regels select {
  font-family: var(--sans); font-size: 13.5px; color: var(--ink);
  background: var(--cream); border: 1px solid var(--line-10);
  border-radius: 5px; padding: 6px 8px; width: 100%;
}
.bh-regels input:focus, .bh-regels select:focus { outline: none; border-color: var(--accent); }
.bh-regels input.num { text-align: right; font-variant-numeric: tabular-nums; }
.bh-regels .w-klein { width: 68px; }
.bh-regels .w-geld  { width: 104px; }
.bh-regels tr.is-bezet td { background: var(--bezet-bg); }

.bh-waarschuwing {
  font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--bezet); white-space: nowrap;
}

/* ---------- Miniatuur ---------- */
.bh-mini {
  width: 42px; height: 42px; min-width: 42px; max-width: none; border-radius: 6px; object-fit: cover;
  background: var(--band); display: block;
}
.bh-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.bh-foto { position: relative; }
.bh-foto img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-s); background: var(--band); }
.bh-foto button {
  position: absolute; top: 5px; right: 5px; width: 24px; height: 24px;
  border: 0; border-radius: 50%; background: rgba(26,23,18,.82); color: #fff;
  cursor: pointer; line-height: 1; font-size: 13px;
}

/* ---------- Waarschuwingsstrook ---------- */
/* Offerte: vervangwaarde per artikel, met totaal en uitleg. */
.vh-vervang { margin: 14px 0 0; padding: 12px 16px 12px; border: 1px solid var(--line-10); border-radius: 8px; }
.vh-vervang .vh-eyebrow { margin: 0 0 4px; }
.vh-vervang .vh-eyebrow span { color: var(--muted); letter-spacing: .08em; }
.vh-vervang dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; font-size: 13.5px; }
.vh-vervang dl > div + div { border-top: 1px solid var(--line-08); }
.vh-vervang dt { color: var(--body); }
.vh-vervang dd { margin: 0; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.vh-vervang .vh-vervang-totaal { border-top-color: var(--line-10); font-weight: 600; }
.vh-vervang .vh-vervang-totaal dt { color: var(--ink); }
.vh-vervang-uitleg { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; max-width: 80ch; }

/* Offerte: de betaalafspraak als overzicht. */
.vh-betaling { margin: 14px 0 0; padding: 12px 16px 6px; background: var(--band); border-radius: 8px; }
.vh-betaling .vh-eyebrow { margin: 0 0 4px; }
.vh-betaling dl > div { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 7px 0; font-size: 14px; }
.vh-betaling dl > div + div { border-top: 1px solid var(--line-08); }
.vh-betaling dt { color: var(--muted); }
.vh-betaling dd { margin: 0; color: var(--ink); }
@media (max-width: 520px) { .vh-betaling dl > div { grid-template-columns: 1fr; gap: 2px; } }

/* Offerte: regel die niet beschikbaar is, zichtbaar maar buiten het totaal. */
.vh-regel-weg td { color: var(--faint); }
.vh-niet-beschikbaar { font-size: 12.5px; font-weight: 600; color: var(--beperkt); white-space: nowrap; }

/* Voorbeeld van de offerte: mail links, pdf rechts. */
.bh-voorbeeld { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 20px; align-items: start; margin-top: 16px; }
.bh-voorbeeld-kop { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 10px 0 16px; font-size: 13.5px; }
.bh-voorbeeld-kop dt { color: var(--muted); }
.bh-voorbeeld-kop dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.bh-voorbeeld-tekst { margin: 0; padding-top: 14px; border-top: 1px solid var(--line-08); white-space: pre-wrap; overflow-wrap: anywhere;
  font-family: var(--sans); font-size: 14px; line-height: 1.55; color: var(--ink); }
.bh-voorbeeld-html { display: block; width: 100%; height: 900px; border: 0; border-radius: var(--radius-s); margin-top: 4px; }
.bh-voorbeeld-details { margin-top: 14px; font-size: 13px; color: var(--muted); }
.bh-voorbeeld-details summary { cursor: pointer; }
.bh-voorbeeld-details .bh-voorbeeld-tekst { margin-top: 10px; }
.bh-voorbeeld-pdf iframe { display: block; width: 100%; height: 1100px; border: 1px solid var(--line-10); border-radius: var(--radius-s); background: #fff; }
.bh-voorbeeld-acties { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin: 20px 0 8px; }
@media (max-width: 980px) {
  .bh-voorbeeld { grid-template-columns: 1fr; }
  .bh-voorbeeld-pdf iframe { height: 80vh; }
}

.bh-regels tr.is-weg input[type=text], .bh-regels tr.is-weg input[type=number] { color: var(--faint); text-decoration: line-through; }
.bh-leverkost { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 12px; font-size: 13px; }
.bh-leverkost label { color: var(--muted); }
.bh-leverkost .vh-hint { flex-basis: 100%; margin: 0; font-size: 12px; color: var(--muted); }
.bh-regels-acties { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
.bh-regels-acties .vh-hint { margin: 0; flex: 1 1 280px; }

.bh-strook {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--beperkt-bg); border-left: 3px solid var(--beperkt);
  padding: 13px 16px; border-radius: 0 var(--radius-s) var(--radius-s) 0; margin-bottom: 18px;
  font-size: 13.5px; color: var(--strong);
}
.bh-strook--fout { background: var(--bezet-bg); border-left-color: var(--bezet); }

/* ---------- Documenten bij een product ---------- */
.vh-docs { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.vh-docs a {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 14px;
  background: var(--card);
  border: 1px solid var(--line-08);
  border-radius: var(--radius-s);
  color: var(--strong); text-decoration: none;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.vh-docs a:hover { border-color: var(--accent); color: var(--accent); }
.vh-docs svg { color: var(--accent); flex: none; }
.vh-doc-naam { font-size: 14.5px; font-weight: 500; flex: 1 1 auto; min-width: 0; }
.vh-doc-meta {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--faint); flex: none; white-space: nowrap;
}

/* ---------- Twee kolommen aan de klantzijde ----------
   Zelfde indeling als het beheer: het formulier links, een samenvatting die
   meescrollt rechts. Zo houdt het aanvraagformulier dezelfde paginabreedte als
   de catalogus en de aanvraaglijst, in plaats van halverwege te versmallen. */
.vh-kolommen {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
@media (max-width: 980px) {
  .vh-kolommen { grid-template-columns: 1fr; }
  .vh-plakkerig { position: static; }
}
.vh-plakkerig { position: sticky; top: 104px; }

/* Bedragen in de samenvatting breken niet meer over twee regels. */
.vh-samenvatting dd { white-space: nowrap; }
.vh-samenvatting dt { text-wrap: pretty; }

/* ---------- Logboek ---------- */
.bh-filter { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.bh-filter select {
  font-family: var(--sans); font-size: 13.5px; color: var(--ink); background: var(--card);
  border: 1px solid var(--line-10); border-radius: var(--radius-s); padding: 7px 10px; max-width: 100%;
}
.bh-schakel { display: inline-flex; border: 1px solid var(--line-10); border-radius: var(--radius-s); overflow: hidden; }
.bh-schakel a {
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  padding: 7px 13px; color: var(--muted); text-decoration: none; background: var(--card);
}
.bh-schakel a + a { border-left: 1px solid var(--line-10); }
.bh-schakel a.is-actief { background: var(--accent); color: #fff; font-weight: 700; }

.bh-log { list-style: none; margin: 0; padding: 0; }
.bh-log-item { padding: 14px 0; border-top: 1px solid var(--line-08); }
.bh-log-item:first-child { border-top: 0; padding-top: 0; }
.bh-log-item--opgelost, .bh-log-item--info { opacity: .78; }
.bh-log--kort .bh-log-item { padding: 10px 0; }
.bh-log--kort { margin-bottom: 12px; }
.bh-log-kop { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bh-log-datum { margin-left: auto; font-size: 12.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.bh-log-soort, .bh-log-vlag {
  font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 4px; white-space: nowrap;
  background: var(--band); color: var(--muted); text-decoration: none;
}
.bh-log-soort--schade, .bh-log-soort--defect, .bh-log-soort--ontbrekend { background: var(--bezet-bg); color: var(--bezet); }
.bh-log-soort--gebruikssporen, .bh-log-soort--onderhoud { background: var(--beperkt-bg); color: var(--beperkt); }
.bh-log-soort--herstel { background: var(--vrij-bg); color: var(--vrij); }
.bh-log-vlag--open { background: var(--bezet); color: #fff; }
.bh-log-vlag--uit { background: var(--ink); color: #fff; }
.bh-log-wat { margin-top: 8px; font-size: 14px; display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.bh-log-eenheid { font-size: 12.5px; color: var(--muted); }
.bh-log-meta { font-size: 12.5px; color: var(--muted); }
.bh-log-notitie { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--body); }
.bh-log-notitie--opgelost { color: var(--vrij); }
.bh-log-notitie--opgelost::before { content: "Opgelost: "; font-weight: 600; }
.bh-log-fotos { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.bh-log-fotos img { width: 64px; height: 64px; min-width: 64px; max-width: none; object-fit: cover; border-radius: 6px; display: block; background: var(--band); }
.bh-log-acties { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; align-items: center; }
.bh-log-oplossen { display: flex; gap: 6px; flex: 1 1 280px; }
.bh-log-oplossen input {
  flex: 1; min-width: 0; font-family: var(--sans); font-size: 13px; color: var(--ink);
  background: var(--cream); border: 1px solid var(--line-10); border-radius: 5px; padding: 5px 8px;
}

/* ---------- Retourcontrole ---------- */
.bh-retour { list-style: none; margin: 0; padding: 0; }
.bh-retour-rij { padding: 12px 0; border-top: 1px solid var(--line-08); }
.bh-retour-rij:first-child { border-top: 0; padding-top: 0; }
.bh-retour-kop { display: flex; gap: 12px; align-items: center; }
.bh-retour-naam { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 14px; }
.bh-retour-naam .vh-hint { font-size: 12.5px; }
.bh-retour-kop select {
  font-family: var(--sans); font-size: 13.5px; color: var(--ink); background: var(--cream);
  border: 1px solid var(--line-10); border-radius: 5px; padding: 6px 8px; width: 170px; flex: none;
}
.bh-retour-rij.is-afwijking .bh-retour-kop select { border-color: var(--bezet); color: var(--bezet); font-weight: 600; }
.bh-retour-details { margin: 12px 0 0 54px; display: grid; gap: 10px; }
@media (max-width: 640px) {
  .bh-retour-kop { flex-wrap: wrap; }
  .bh-retour-kop select { width: 100%; }
  .bh-retour-details { margin-left: 0; }
}
.bh-log a { color: var(--accent); text-decoration: none; }
.bh-log a:hover { text-decoration: underline; }
.bh-log-wat a strong { font-weight: 600; }

/* Losse uitleg in het beheer, buiten een formulierveld. */
.bh-main p.vh-hint { font-size: 13.5px; color: var(--muted); line-height: 1.5; }
/* Vinkjes in een regeltabel niet uitrekken tot de volle celbreedte. */
.bh-regels input[type=checkbox], .bh-regels input[type=radio] { width: auto; padding: 0; vertical-align: middle; }

/* ---------- Prijs op de detailpagina: hoofdprijs en de andere btw-weergave ---------- */
.vh-prijs-hoofd { font-size: 20px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.vh-prijs-tweede { display: block; text-align: right; font-size: 12.5px; font-weight: 400; color: var(--faint); font-variant-numeric: tabular-nums; margin-top: 2px; }

/* ---------- Keuze bij een artikel (bv. de kleur van het gastenboek) ---------- */
.vh-toevoegen:has(.vh-keuzeveld) { flex-wrap: wrap; }
.vh-keuzeveld { flex: 1 1 100%; display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; color: var(--strong); }
.vh-keuzeveld select, .vh-lijstkeuze select {
  font-family: var(--sans); font-size: 14px; color: var(--ink); background: var(--cream);
  border: 1px solid var(--line-10); border-radius: 100px; padding: 8px 14px; width: 100%;
}
.vh-prod .vh-keuzeveld select { font-size: 13px; padding: 6px 12px; }
.vh-lijstkeuze { margin-top: 6px; }
.vh-lijstkeuze label { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.vh-lijstkeuze select { width: auto; font-size: 13px; padding: 4px 12px; }

/* ---------- Mijn gegevens: volle breedte, wachtwoord ernaast ---------- */
.vh-account { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 20px; align-items: start; }
@media (max-width: 900px) { .vh-account { grid-template-columns: 1fr; } }

/* Keuzelijst met ruimte en een eigen pijltje, los van de rand. */
.vh-keuzeveld select, .vh-lijstkeuze select {
  -webkit-appearance: none; appearance: none;
  padding: 11px 44px 11px 18px; line-height: 1.3; min-height: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23706a5f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center; background-size: 12px 8px;
  cursor: pointer;
}
.vh-prod .vh-keuzeveld select { font-size: 13.5px; padding: 9px 40px 9px 16px; min-height: 40px; background-position: right 16px center; }
.vh-lijstkeuze select { padding: 7px 38px 7px 14px; min-height: 36px; background-position: right 14px center; }
.vh-keuzeveld select:focus, .vh-lijstkeuze select:focus { outline: none; border-color: var(--accent); }
.vh-keuzeveld { gap: 7px; margin-bottom: 4px; }
.vh-keuzeveld--moment { gap: 7px; }
.vh-keuzeveld-rij { display: flex; gap: 8px; flex-wrap: wrap; }
.vh-keuzeveld-rij input[type=date] {
  flex: 1 1 150px; font-family: var(--sans); font-size: 14px; color: var(--ink); background: var(--cream);
  border: 1px solid var(--line-10); border-radius: 100px; padding: 9px 16px; min-height: 44px;
}
.vh-keuzeveld-rij select { flex: 0 1 120px; }
.vh-keuzeveld-rij select, .vh-keuzeveld--moment select {
  -webkit-appearance: none; appearance: none; font-family: var(--sans); font-size: 14px; color: var(--ink);
  background: var(--cream) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23706a5f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center / 12px 8px;
  border: 1px solid var(--line-10); border-radius: 100px; padding: 9px 40px 9px 16px; min-height: 44px; cursor: pointer;
}
.vh-keuze-ontbreekt { font-size: 12.5px; color: var(--bezet); margin-top: 4px; }

/* ---------- Pakketten: label op het kaartje en een eigen filter ---------- */
.vh-pakketlabel {
  display: inline-block; align-self: flex-start; font-family: var(--mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
  background: var(--accent-12); padding: 3px 8px; border-radius: 4px; margin-bottom: 6px;
}
.vh-chip--pakket::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 2px; background: var(--accent); margin-right: 7px; vertical-align: 1px; }

/* ---------- Opties bij een hoofdartikel (bv. de photobooth) ---------- */
.vh-optiebadge {
  position: absolute; top: 12px; left: 12px; z-index: 2; width: 50px; height: 50px; border-radius: 50%;
  background: var(--card); padding: 3px; box-shadow: 0 2px 10px rgb(0 0 0 / 0.16); pointer-events: none;
}
.vh-optiebadge img { width: 100%; height: 100%; min-width: 0; max-width: none; border-radius: 50%; object-fit: cover; display: block; }
.vh-optiebadge b {
  position: absolute; right: -4px; bottom: -4px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); color: #fff; font: 700 15px/22px var(--sans); text-align: center;
  box-shadow: 0 0 0 2px var(--card);
}
.vh-optielabel {
  display: inline-block; align-self: flex-start; font-family: var(--mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  background: var(--band); padding: 3px 8px; border-radius: 4px; margin-bottom: 6px;
}
.vh-hoortbij {
  display: inline-flex; align-items: center; gap: 10px; margin: 2px 0 14px; padding: 5px 14px 5px 5px;
  border: 1px solid var(--line-10); border-radius: 100px; background: var(--card);
  font-size: 13.5px; color: var(--body); text-decoration: none;
}
.vh-hoortbij img { width: 32px; height: 32px; min-width: 32px; max-width: none; border-radius: 50%; object-fit: cover; }
.vh-hoortbij strong { color: var(--accent); font-weight: 600; }
.vh-hoortbij:hover { border-color: var(--accent); }
.vh-keuze-ontbreekt a { color: inherit; }
/* In het blok "Opties" op de pagina van het hoofdartikel zelf zegt de badge niets nieuws. */
.vh-opties .vh-optiebadge, .vh-opties .vh-optielabel { display: none; }

/* ---------- Venster: optie toegevoegd zonder hoofdartikel ---------- */
.vh-venster {
  border: 0; border-radius: var(--radius); padding: 26px 26px 20px; width: min(560px, calc(100vw - 32px));
  margin: auto; max-height: calc(100vh - 32px); overflow: auto;
  background: var(--card); color: var(--body); box-shadow: 0 24px 60px rgb(0 0 0 / 0.25);
}
.vh-venster::backdrop { background: rgb(20 18 14 / 0.45); }
.vh-venster h2 { font-size: 21px; color: var(--ink); margin: 0 0 8px; }
.vh-venster-uitleg { font-size: 14.5px; line-height: 1.5; margin: 0 0 16px; color: var(--muted); }
.vh-venster-keuzes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.vh-venster-keuzes li {
  display: grid; grid-template-columns: 88px 1fr auto; gap: 14px; align-items: center;
  border: 1px solid var(--line-08); border-radius: var(--radius-s); padding: 10px;
}
.vh-venster-keuzes img { width: 88px; height: 66px; min-width: 88px; max-width: none; object-fit: cover; border-radius: 6px; background: var(--band); }
.vh-venster-keuzes strong { display: block; font-size: 14.5px; color: var(--ink); line-height: 1.3; }
.vh-venster-keuzes span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 3px; font-variant-numeric: tabular-nums; }
.vh-venster-later { margin-top: 16px; background: none; border: 0; color: var(--accent); font-size: 14px; cursor: pointer; padding: 6px 0; }
@media (max-width: 520px) {
  .vh-venster-keuzes li { grid-template-columns: 64px 1fr; }
  .vh-venster-keuzes img { width: 64px; height: 48px; min-width: 64px; }
  .vh-venster-keuzes li .vh-knop { grid-column: 1 / -1; }
}

/* ---------- Opmerking of beperking bij een artikel ---------- */
.vh-letop {
  position: absolute; top: 12px; right: 12px; z-index: 2; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; background: var(--beperkt); color: #fff;
  box-shadow: 0 2px 10px rgb(0 0 0 / 0.18); cursor: help;
}
.vh-letop svg { margin-top: -1px; }
.vh-opmerking {
  display: flex; gap: 12px; align-items: flex-start; margin: 0 0 18px; padding: 14px 16px;
  border-radius: var(--radius-s); background: var(--beperkt-bg); border-left: 3px solid var(--beperkt);
  color: var(--strong); font-size: 14.5px; line-height: 1.5;
}
.vh-opmerking svg { flex: none; margin-top: 2px; color: var(--beperkt); }
.vh-opmerking p { margin: 0; }
.vh-opmerking strong { color: var(--beperkt); }
.vh-opmerking--klein { margin: 6px 0 0; padding: 7px 10px; font-size: 12.5px; gap: 8px; }
.vh-opmerking--klein svg { margin-top: 1px; }

/* ---------- Kaartje in drie zones: foto, info, voet (sinds 25/09/2026) ----------
   Terug naar de vorige kaart: git checkout voor-nieuwe-kaartlayout -- <bestanden>. */
.vh-prod-body { gap: 7px; padding: 14px 16px 16px; }
.vh-prod-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 16px; }
.vh-prod-soort {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.vh-prod-stip { flex: none; display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.vh-prod-stip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.vh-prod-stip--ok  { color: var(--vrij); }
.vh-prod-stip--mid { color: var(--beperkt); }
.vh-prod-stip--no  { color: var(--bezet); }
.vh-prod-stip--off { color: var(--uit); }
.vh-prod .vh-prod-naam {
  line-height: 1.3; min-height: 2.6em; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.vh-prod-voet { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line-08); display: flex; flex-direction: column; gap: 10px; }
.vh-prod-voet .vh-prod-prijs { margin: 0; display: block; }
.vh-prod-prijsregel { display: flex; align-items: baseline; gap: 6px; margin: 0; white-space: nowrap; }
.vh-prod-per { font-size: 12.5px; color: var(--muted); }
.vh-prod-voet .vh-prod-tweede { margin: 3px 0 0; width: auto; font-size: 11.5px; }
.vh-prod-tag {
  position: absolute; top: 12px; left: 12px; z-index: 2; font-family: var(--mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: #fff; background: var(--accent);
  padding: 5px 9px; border-radius: 5px; box-shadow: 0 2px 8px rgb(0 0 0 / 0.15); pointer-events: none;
}

/* ---------- Rondjes met de onderdelen van een pakket, onderaan de foto ---------- */
.vh-rondjes { position: absolute; left: 12px; bottom: 12px; z-index: 2; display: flex; pointer-events: auto; }
.vh-rondje {
  position: relative; width: 40px; height: 40px; border-radius: 50%; background: var(--card);
  border: 2px solid var(--card); box-shadow: 0 2px 8px rgb(0 0 0 / 0.18); flex: none;
}
.vh-rondje + .vh-rondje { margin-left: -10px; }
.vh-rondje img { width: 100%; height: 100%; min-width: 0; max-width: none; border-radius: 50%; object-fit: cover; display: block; position: static; padding: 0; }
.vh-rondje b {
  position: absolute; right: -6px; top: -6px; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 10px;
  background: var(--accent); color: #fff; font: 700 10.5px/20px var(--sans); text-align: center;
  box-shadow: 0 0 0 2px var(--card);
}
.vh-rondje--meer { display: grid; place-items: center; font: 600 12px var(--sans); color: var(--muted); background: var(--band); }
/* De punten van de fotocarrousel staan in het midden; de rondjes links laten ze vrij. */
.vh-prod-beeld[data-vh-fotos] .vh-rondjes { bottom: 28px; }
.vh-rondje:has(b) { z-index: 1; }
.vh-prod-opaanvraag { font-size: 17px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.vh-keuzeveld--tekst textarea {
  font-family: var(--sans); font-size: 14px; line-height: 1.5; color: var(--ink); background: var(--cream);
  border: 1px solid var(--line-10); border-radius: var(--radius-s); padding: 10px 14px; width: 100%; resize: vertical; min-height: 0;
}
.vh-keuzeveld--tekst textarea:focus { outline: none; border-color: var(--accent); }
.vh-lijstkeuze .vh-keuzeveld--tekst { display: flex; flex-direction: column; align-items: stretch; gap: 6px; width: 100%; }
.vh-lijstkeuze .vh-keuzeveld--tekst .vh-knop { align-self: flex-start; }

/* ---------- Detailpagina: onder de foto's en het koopblok ---------- */
.vh-detail-onder {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px);
  margin-top: clamp(32px, 5vw, 56px); padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--line-08);
  align-items: start;
}
.vh-detail-onder--een { grid-template-columns: minmax(0, 1fr); }
.vh-detail-onder--een .vh-detail-tekst { max-width: 72ch; }
.vh-detail-tekst { max-width: 70ch; }
.vh-detail-oms { font-size: 15.5px; line-height: 1.65; color: var(--body); }
.vh-detail-feiten > .vh-eyebrow:first-child { margin-top: 0; }
@media (max-width: 900px) { .vh-detail-onder { grid-template-columns: 1fr; } }
.vh-detail-tekst > .vh-eyebrow:first-child, .vh-detail-tekst > h2:first-of-type { margin-top: 0; }
del { text-decoration: line-through; text-decoration-thickness: 1.5px; color: var(--faint); }
.vh-periode-dag { font-weight: 500; color: var(--muted); margin-right: 1px; }

/* ---------- Toegang aanvragen: formulier links, uitleg rechts ---------- */
.vh-toegang-uitleg { position: sticky; top: 90px; }
.vh-stappen { list-style: none; margin: 0; padding: 0; counter-reset: stap; display: grid; gap: 14px; }
.vh-stappen li { counter-increment: stap; display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; font-size: 14.5px; line-height: 1.5; color: var(--body); }
.vh-stappen li::before {
  content: counter(stap); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-12); color: var(--accent); font-weight: 700; font-size: 13px;
}
@media (max-width: 900px) { .vh-toegang-uitleg { position: static; } }

/* Links in een keuzezin (privacyverklaring, voorwaarden): in de kleur van de site. */
.vh-keuze a { color: var(--accent); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.vh-keuze a:hover { color: var(--ink); }
.vh-tel { color: var(--accent); font-weight: 600; text-decoration: none; white-space: nowrap; } .vh-tel:hover { text-decoration: underline; }

/* ---------- Bevestiging na toevoegen ---------- */
.vh-toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 50; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px; max-width: min(560px, calc(100vw - 32px));
  padding: 12px 18px; border-radius: 100px; background: var(--ink); color: #fff;
  font-size: 14px; line-height: 1.35; box-shadow: 0 10px 30px rgb(0 0 0 / 0.25);
  animation: vh-toast-in .25s ease-out;
}
.vh-toast.is-weg { opacity: 0; transform: translate(-50%, 8px); transition: opacity .25s, transform .25s; }
.vh-toast-vink { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--vrij); color: #fff; font-weight: 700; font-size: 13px; }
.vh-toast strong { font-weight: 600; }
.vh-toast a { flex: none; color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; margin-left: 4px; }
@keyframes vh-toast-in { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
.vh-teller.is-bump { animation: vh-bump .6s ease-out; }
@keyframes vh-bump { 0% { transform: scale(1); } 30% { transform: scale(1.45); box-shadow: 0 0 0 4px rgb(255 255 255 / .35); } 100% { transform: scale(1); } }
@media (max-width: 520px) { .vh-toast { border-radius: var(--radius-s); bottom: 14px; } }

/* Leveren en ophalen: datum op een eigen regel, beide lijsten op dezelfde hoogte. */
.vh-rij--tijd { align-items: start; }
.vh-tijd-datum { display: block; }
.vh-keuze-uitleg { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.vh-contact { display: flex; flex-direction: column; gap: 14px; }

/* Aanvraagformulier in genummerde stappen. De teller slaat verborgen stappen over. */
.vh-stappen { counter-reset: stap; gap: 0; }
.vh-stap { border: 0; margin: 0; padding: 26px 0 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.vh-stap + .vh-stap { margin-top: 26px; border-top: 1px solid var(--line-10); }
.vh-stap:first-of-type { padding-top: 0; }
.vh-stap[hidden] { display: none; }
.vh-stap-kop { counter-increment: stap; display: flex; align-items: center; gap: 10px; margin: 0; padding: 0;
  font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); float: none; width: 100%; }
.vh-stap-kop::before { content: counter(stap); flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: inline-grid; place-items: center; background: var(--accent); color: #fff; font-size: 13px; font-weight: 700; }
.vh-stap-noot { margin: -6px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.vh-info { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 11px 14px; border-radius: 10px;
  background: var(--cream); font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.vh-info svg { flex: none; margin-top: 1px; color: var(--accent); }
.vh-contact { padding: 14px 16px; border: 1px solid var(--line-10); border-radius: 12px; }
.vh-op-aanvraag { font-size: 12.5px; font-weight: 500; color: var(--muted); white-space: nowrap; }

/* Aanvraaglijst als één kaart met regels, totalen en knop rechts. */
.vh-kolommen--lijst { margin-top: 6px; }
.vh-lijst { gap: 0; background: var(--card); border: 1px solid var(--line-08); border-radius: var(--radius); overflow: hidden; }
.vh-lijstregel { grid-template-columns: 64px minmax(0, 1fr) 112px 92px 36px; gap: 16px; align-items: start;
  border: 0; border-radius: 0; padding: 18px 18px 18px 16px; background: none; }
.vh-lijstregel + .vh-lijstregel { border-top: 1px solid var(--line-08); }
.vh-lijstregel.is-tekort { box-shadow: inset 3px 0 0 var(--beperkt); }
.vh-lijstregel > form, .vh-lijstregel-prijs { align-self: center; }
.vh-lijstregel > form:last-child { justify-self: end; }
.vh-lijstregel .vh-aantal { width: 112px; }
.vh-lijstregel-prijs .vh-op-aanvraag { white-space: normal; text-align: right; line-height: 1.35; }
/* Opties hangen onder hun hoofdartikel, iets ingesprongen met een verbindingslijn. */
.vh-lijstregel.is-optie { border-top-style: dashed; padding-left: 40px; grid-template-columns: 40px minmax(0, 1fr) 112px 92px 36px; position: relative; }
.vh-lijstregel.is-optie::before { content: ""; position: absolute; left: 26px; top: 0; height: 38px; width: 10px;
  border-left: 1.5px solid var(--line-10); border-bottom: 1.5px solid var(--line-10); border-bottom-left-radius: 6px; }
/* Keuzes (kleur, uur, wens) links onder de naam, niet gecentreerd. */
.vh-lijstkeuze { margin-top: 10px; }
.vh-lijstkeuze .vh-keuzeveld { align-items: flex-start; text-align: left; flex-direction: row; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 0; }
.vh-lijstkeuze .vh-keuzeveld--tekst { flex-direction: column; align-items: stretch; }
.vh-lijstkeuze .vh-keuzeveld-rij { justify-content: flex-start; }
.vh-kolommen--lijst .vh-totalen { margin-top: 0; }
.vh-kolommen--lijst .vh-totalen .vh-knop { margin-top: 16px; }
.vh-lijst-terug { margin: 12px 0 0; text-align: center; font-size: 14px; }
@media (max-width: 760px) {
  .vh-lijstregel, .vh-lijstregel.is-optie { grid-template-columns: 56px minmax(0, 1fr) auto; }
  .vh-lijstregel.is-optie { padding-left: 16px; }
  .vh-lijstregel.is-optie::before { display: none; }
}
.vh-lijstkeuze .vh-keuzeveld--moment { flex-direction: row; align-items: center; }
.vh-vast-uur { margin: 0; display: flex; align-items: baseline; gap: 8px; min-height: 42px; padding: 9px 14px; border-radius: var(--radius-s);
  border: 1px solid var(--accent-12); background: var(--accent-06); font-size: 15px; font-weight: 600; color: var(--ink); }
.vh-vast-uur span { font-size: 12.5px; font-weight: 400; color: var(--muted); }
@media (max-width: 760px) {
  .vh-lijstregel, .vh-lijstregel.is-optie { grid-template-columns: 56px minmax(0, 1fr) auto 36px; row-gap: 12px; column-gap: 12px; }
  .vh-lijstregel > :nth-child(2) { grid-column: 2 / 5; }
  .vh-lijstregel > :nth-child(3) { grid-column: 2 / 3; grid-row: 2; justify-self: start; }
  .vh-lijstregel > .vh-lijstregel-prijs { grid-column: 3 / 4; grid-row: 2; text-align: right; }
  .vh-lijstregel > form:last-child { grid-column: 4 / 5; grid-row: 2; }
}
.vh-let-op { margin: 8px 0 0; padding: 9px 12px; border-radius: var(--radius-s); background: var(--beperkt-bg); color: var(--strong);
  font-size: 12.5px; line-height: 1.45; }
.vh-let-op a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.vh-let-op .vh-knop { display: inline-flex; margin-top: 8px; }
.vh-concept-status { margin: 10px 0 0; min-height: 1em; text-align: center; font-size: 12px; color: var(--faint); }

/* Periodescherm: datums links, verder waar u gebleven was rechts. Op gsm eerst "verder". */
.vh-periode { max-width: 620px; }
.vh-periode--verder { max-width: none; display: grid; grid-template-columns: minmax(0, 620px) minmax(0, 1fr); gap: 28px; align-items: start; }
.vh-periode--verder .vh-periode-form { grid-column: 1; grid-row: 1; }
.vh-periode--verder .vh-verder { grid-column: 2; grid-row: 1; margin-bottom: 0; }
.vh-periode--verder .vh-periode-form .vh-verder-of { display: none; }
@media (max-width: 900px) {
  .vh-periode--verder { grid-template-columns: 1fr; gap: 0; }
  .vh-periode--verder .vh-verder, .vh-periode--verder .vh-periode-form { grid-column: 1; grid-row: auto; }
  .vh-periode--verder .vh-periode-form .vh-verder-of { display: block; }
}
.vh-verder { margin-bottom: 14px; padding-top: 18px; padding-bottom: 8px; }
.vh-verder-regel { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 12px 0; }
.vh-verder-regel + .vh-verder-regel { border-top: 1px solid var(--line-08); }
.vh-verder-naam { font-size: 15px; font-weight: 600; color: var(--ink); }
.vh-verder-meta { margin-top: 3px; font-size: 13px; color: var(--muted); }
.vh-verder-knoppen { display: flex; gap: 8px; flex-wrap: wrap; }
.vh-verder-noot { margin: 4px 0 8px; font-size: 12.5px; color: var(--muted); }
.vh-verder-of { margin: 18px 0 10px; font-size: 14px; color: var(--muted); }

/* Mijn aanvragen: de aanvraag in opmaak bovenaan. */
.vh-status--concept { background: var(--band); color: var(--muted); border: 1px dashed var(--line-10); }
.vh-concept-rij td { background: var(--accent-06); }
.vh-concept-naam { font-weight: 600; color: var(--ink); }
.vh-concept-rij .vh-knop + .vh-knop { margin-left: 6px; }
.vh-tabel a.vh-knop:not(.vh-knop--sec) { color: var(--cream); }
.vh-tabel a.vh-knop:hover { text-decoration: none; }

/* Beheer: periode wijzigen, het voorstel. */
.bh-voorstel { margin-top: 14px; padding: 12px 14px; border-radius: var(--radius-s); background: var(--cream); font-size: 12.5px; }
.bh-voorstel-tabel { width: 100%; border-collapse: collapse; margin-top: 8px; font-variant-numeric: tabular-nums; }
.bh-voorstel-tabel td { padding: 5px 0; border-top: 1px solid var(--line-08); vertical-align: top; }
.bh-voorstel-tabel td.num { text-align: right; white-space: nowrap; padding-left: 10px; }
.bh-voorstel-tabel tr.is-tekort td { color: var(--bezet); }
.bh-voorstel-totaal td { font-weight: 600; color: var(--ink); }
.bh-voorstel-let { margin-top: 8px; color: var(--beperkt); }

/* Klant: andere datum vragen. */
.vh-datumvraag { margin-top: 18px; }
.vh-datumvraag summary { cursor: pointer; font-weight: 600; color: var(--ink); list-style: none; display: flex; align-items: center; gap: 8px; }
.vh-datumvraag summary::-webkit-details-marker { display: none; }
.vh-datumvraag summary::before { content: "+"; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent-12); color: var(--accent); font-weight: 700; }
.vh-datumvraag[open] summary::before { content: "−"; }
.vh-datumvraag-uitleg { margin: 12px 0 14px; font-size: 14px; color: var(--muted); }

/* Concepten */
.vh-inline { display: inline; }
.vh-inline + .vh-inline, .vh-inline + .vh-knop, .vh-knop + .vh-inline { margin-left: 6px; }
.vh-concept-rij--opzij td { background: none; }
.vh-werkt-aan { margin: -6px 0 14px; font-size: 14px; color: var(--muted); }
.vh-opzij { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-08); font-size: 13.5px; }
.vh-opzij summary { cursor: pointer; color: var(--accent); font-weight: 500; }
.vh-opzij p { margin: 10px 0 12px; color: var(--muted); font-size: 13px; }

/* Versienummer onderaan (klant en beheer): klein, maar leesbaar om door te geven. */
.vh-voet-versie { margin: 10px auto 0; padding: 0 20px 16px; max-width: 1180px; font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.bh-versie { text-align: right; }

/* Beheer, aanvraag: kleine foto van het artikel bij elke regel. */
.bh-regel-oms { display: flex; gap: 8px; align-items: center; }
.bh-regel-oms input { flex: 1; min-width: 0; }
.bh-regel-foto { flex: none; display: block; width: 36px; height: 36px; border-radius: 6px; object-fit: cover; background: var(--line-10, #eee); }
.bh-regel-foto--leeg { background: transparent; }

/* ==========================================================================
   Beheer, aanvraag: samenvatting en planning bovenaan
   ========================================================================== */
.bh-samen {
  --kleur: var(--beperkt);
  background: var(--card); border: 1px solid var(--line-08); border-top: 4px solid var(--kleur);
  border-radius: var(--radius); box-shadow: var(--schaduw);
  padding: 0 0 4px; margin-bottom: 18px; overflow: hidden;
}
.bh-samen--offerte    { --kleur: var(--accent); }
.bh-samen--bevestigd, .bh-samen--geleverd, .bh-samen--retour { --kleur: var(--vrij); }
.bh-samen--afgesloten { --kleur: var(--faint); }
.bh-samen--geannuleerd{ --kleur: var(--bezet); }

.bh-samen-stap {
  display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap;
  margin: 0; padding: 12px 22px; font-size: 14.5px; font-weight: 500; color: var(--strong);
  background: color-mix(in oklch, var(--kleur) 9%, transparent);
  border-bottom: 1px solid var(--line-08);
}
.bh-samen-stap span {
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--kleur);
}

.bh-samen-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.bh-feit {
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
  padding: 16px 22px 14px; border-right: 1px solid var(--line-08);
}
.bh-feit:last-child { border-right: 0; }
.bh-feit-label {
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
.bh-feit-groot {
  font-size: 18px; font-weight: 650; line-height: 1.3; color: var(--ink); letter-spacing: -.01em;
  overflow-wrap: anywhere;
}
.bh-feit-groot a { color: inherit; text-decoration: none; }
.bh-feit-groot a:hover { color: var(--accent); }
.bh-feit-pijl { color: var(--faint); font-weight: 400; }
.bh-feit-sub { font-size: 13px; color: var(--muted); line-height: 1.45; }
.bh-feit-sub a, .bh-feit-contact a { color: var(--accent); text-decoration: none; }
.bh-feit-sub a:hover, .bh-feit-contact a:hover { text-decoration: underline; }
.bh-feit-contact { display: flex; flex-direction: column; font-size: 13px; overflow-wrap: anywhere; }
.bh-feit-leeg { color: var(--beperkt); font-weight: 500; }
.bh-feit-chip {
  align-self: flex-start; margin-top: 5px; font-family: var(--mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 4px;
  background: var(--band); color: var(--muted);
}
.bh-feit-chip--ok   { background: var(--vrij-bg); color: var(--vrij); }
.bh-feit-chip--let  { background: var(--beperkt-bg); color: var(--beperkt); }
.bh-feit-chip--fout { background: var(--bezet-bg); color: var(--bezet); }
.bh-feit-lijst { list-style: none; margin: 2px 0 0; padding: 0; font-size: 14px; color: var(--strong); line-height: 1.4; }
.bh-feit-lijst li { padding: 2px 0; }
.bh-feit-lijst li span { font-variant-numeric: tabular-nums; color: var(--muted); }
.bh-feit-lijst li.is-bezet { color: var(--bezet); font-weight: 600; }
.bh-feit-lijst li.is-weg { color: var(--faint); text-decoration: line-through; }
.bh-feit--bedrag { background: color-mix(in oklch, var(--kleur) 5%, transparent); }
.bh-feit--bedrag .bh-feit-groot { font-size: 26px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

.bh-samen-quote {
  margin: 0; padding: 12px 22px 12px 44px; position: relative;
  border-top: 1px solid var(--line-08); font-size: 14px; color: var(--strong);
}
.bh-samen-quote::before {
  content: "\201C"; position: absolute; left: 20px; top: 4px;
  font-size: 34px; line-height: 1; color: var(--kleur); font-family: Georgia, serif;
}
.bh-samen-quote p { margin: 0; font-style: italic; }
.bh-samen-quote cite {
  display: block; margin-top: 4px; font-style: normal; font-family: var(--mono);
  font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint);
}

.bh-samen-let {
  list-style: none; display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0; padding: 12px 22px 10px; border-top: 1px solid var(--line-08);
}
.bh-let {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; text-decoration: none;
  background: var(--accent-06); color: var(--accent); border: 1px solid var(--accent-12);
}
.bh-let::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.bh-let--let  { background: var(--beperkt-bg); color: var(--beperkt); border-color: transparent; }
.bh-let--fout { background: var(--bezet-bg); color: var(--bezet); border-color: transparent; }
.bh-let:hover { filter: brightness(.92); }

@media (max-width: 700px) {
  .bh-feit { border-right: 0; border-bottom: 1px solid var(--line-08); }
  .bh-feit:last-child { border-bottom: 0; }
}

/* Planning: tijdlijn van twee weken voor tot twee weken na de huur. */
.bh-planning { --label: 270px; }
.bh-planning-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 10px 20px; flex-wrap: wrap; margin-bottom: 12px; }
.bh-planning-kop h2 {
  margin: 0; font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: var(--muted);
}
.bh-planning-kop h2 span { font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--faint); margin-left: 8px; }
.bh-plan-legende { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; font-size: 12px; color: var(--muted); }
.bh-plan-legende li { display: inline-flex; align-items: center; gap: 6px; }
.bh-plan-legende i { display: inline-block; width: 18px; height: 10px; border-radius: 3px; }
.bh-plan-legende small { color: var(--faint); }

.bh-plan { position: relative; }
.bh-plan-raster {
  position: absolute; top: 0; bottom: 0; left: var(--label); right: 0;
  display: grid; grid-template-columns: repeat(var(--n), 1fr); pointer-events: none;
}
.bh-plan-raster span { border-left: 1px solid var(--line-08); }
.bh-plan-raster span.is-weekend { background: rgba(0,0,0,.028); }
.bh-plan-raster span.is-huur { background: var(--accent-06); }
.bh-plan-raster span.is-vandaag { border-left: 2px solid var(--bezet); }

.bh-plan-rij {
  position: relative; display: grid; grid-template-columns: var(--label) 1fr; align-items: center;
  min-height: 40px; border-top: 1px solid var(--line-08); color: inherit; text-decoration: none;
}
.bh-plan-rij--as { min-height: 22px; border-top: 0; }
a.bh-plan-rij:hover { background: rgba(0,0,0,.025); }
a.bh-plan-rij:hover .bh-plan-label strong { color: var(--accent); }
.bh-plan-rij.is-ernaast { opacity: .62; }
.bh-plan-rij.is-deze .bh-plan-label strong { color: var(--accent); }
.bh-plan-label {
  display: flex; flex-wrap: wrap; align-items: center; gap: 3px 7px; padding: 6px 12px 6px 0;
  font-size: 13px; min-width: 0;
}
.bh-plan-label strong { font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
.bh-plan-klant { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 130px; }
.bh-plan-label .vh-status, .bh-plan-label .vh-bron { font-size: 8.5px; padding: 2px 6px; }
.bh-plan-tag {
  font-family: var(--mono); font-size: 8.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 4px; background: var(--accent-12); color: var(--accent);
}
.bh-plan-tag--fout { background: var(--bezet); color: #fff; }

.bh-plan-baan { position: relative; height: 26px; }
.bh-plan-rij--as .bh-plan-baan { height: 22px; }
.bh-plan-tik {
  position: absolute; top: 3px; padding-left: 4px; white-space: nowrap;
  font-family: var(--mono); font-size: 9.5px; color: var(--muted);
}
.bh-plan-balk {
  position: absolute; top: 3px; bottom: 3px; min-width: 6px; border-radius: 5px;
  display: flex; align-items: center; padding: 0 7px; overflow: hidden; white-space: nowrap;
  font-family: var(--mono); font-size: 9.5px; font-weight: 700; color: #fff;
}
.bh-plan-balk--deze      { background: var(--accent); box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--accent-40); }
.bh-plan-balk--bevestigd { background: var(--vrij); }
.bh-plan-balk--optie     { background: var(--beperkt); }
.bh-plan-balk--aanvraag  {
  background: repeating-linear-gradient(135deg, oklch(0.55 0.06 290 / .10) 0 6px, oklch(0.55 0.06 290 / .20) 6px 12px);
  border: 1.5px dashed oklch(0.55 0.08 290); color: oklch(0.42 0.08 290);
}
.bh-plan-balk--afgesloten { background: var(--band); color: var(--faint); }
.bh-plan-balk--blokkade  {
  background: repeating-linear-gradient(135deg, var(--bezet) 0 5px, oklch(0.53 0.16 27 / .55) 5px 10px);
}
.bh-plan-leeg { margin: 12px 0 0; font-size: 13px; color: var(--muted); }

@media (max-width: 760px) {
  .bh-planning { --label: 0px; }
  .bh-plan-rij { grid-template-columns: 1fr; padding-bottom: 4px; }
  .bh-plan-rij--as .bh-plan-label { display: none; }
  .bh-plan-label { padding: 6px 0 2px; }
  .bh-plan-balk { font-size: 0; padding: 0; }
  .bh-plan-tik { font-size: 8px; padding-left: 2px; }
}

/* Interne notitie: een notitieblaadje, zodat ze opvalt. */
.bh-blok--notitie { background: #fff9dc; border-color: #eedc93; }
.bh-blok--notitie h2 { color: #8a6d0b; }
.bh-blok--notitie textarea {
  background: rgba(255,255,255,.65); border-color: #eedc93; min-height: 90px;
  font-size: 13.5px; line-height: 1.5; resize: vertical; overflow: hidden;
}

/* Beheer, aanvraag: regel toevoegen, op een smal scherm onder elkaar. */
.bh-regel-nieuw { display: grid; grid-template-columns: 1fr 140px 130px auto; gap: 8px; align-items: end; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-08); }
@media (max-width: 640px) { .bh-regel-nieuw { grid-template-columns: 1fr 1fr; } .bh-regel-nieuw > :first-child { grid-column: 1 / -1; } }

/* Samenvatting: VIES-label met de knop om opnieuw te controleren. */
.bh-feit-vies { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 5px; }
.bh-feit-vies > * { white-space: nowrap; }
.bh-feit-vies .bh-feit-chip { margin-top: 0; }
.bh-feit-knop {
  font: inherit; font-size: 12px; font-weight: 600; color: var(--accent); background: none;
  border: 1px solid var(--accent-40); border-radius: 999px; padding: 2px 10px; cursor: pointer;
}
.bh-feit-knop:hover { background: var(--accent-06); }