/* ==========================================================================
   MHVK componenten
   Vereist: tokens.css, base.css
   Kleuren komen uit betekenis-tokens, zodat surfaces (.surface-brand enz.) meekleuren.
   ========================================================================== */

/* ---------- Icoon ---------- */
.icon {
  width: var(--icon-size);
  height: var(--icon-size);
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--sm {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
}

.icon--lg {
  width: 2rem;
  height: 2rem;
}

/* ---------- Icoontegel ---------- */
/* Icoon in een linnen vlak met een olijf icoon. Hetzelfde vlak als het icoon in een kaart (.card__icon).
   Gebruikt in de featurelijst, de feitenrij en de optiekaart. --lg is 4rem: zet dan .icon--lg op de svg. */
.icon-tile,
.card__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  background: var(--color-surface-warm);
  color: var(--olijf-600);
}

.icon-tile--lg {
  width: var(--space-9);
  height: var(--space-9);
}

/* Olijf vlak met wit icoon, in de kleur van de header. Alleen op wit, zoals in de featurelijst (DR-026).
   Niet in de feitenrij direct onder een olijf hero: dan wordt het te veel olijf (DR-015). */
.icon-tile--brand {
  background: var(--color-surface-brand);
  color: var(--wit);
}

/* Op linnen zou een linnen vlak wegvallen. Daar is het vlak olijf met een wit icoon, zoals .icon-tile--brand.
   Nooit een wit vlak met een groen icoon (DR-038). Een tegel in een witte kaart op linnen blijft linnen. */
.surface-warm .icon-tile {
  background: var(--color-surface-brand);
  color: var(--wit);
}

/* Op groen alleen het witte icoon: geen vlak, geen rand, geen schaduw (DR-038). Zonder vlak is de tegel zo breed als
   het icoon, zodat het icoon links op één lijn staat met de kop, de lijnen en de knop. De hoogte is één regel .type-h4:
   het icoon staat dan midden naast de eerste regel van de titel ernaast. Een groter icoon (.icon--lg) maakt hem hoger. */
.surface-brand .icon-tile,
.surface-dark .icon-tile {
  width: auto;
  height: auto;
  min-height: calc(var(--text-h4) * var(--leading-snug));
  background: transparent;
  border: 0;
  box-shadow: none;
  outline: 0;
  color: var(--wit);
}

/* ---------- Logo (DR-030) ----------
   SVG-bestanden in styleguide/assets/logo: mhvk-logo (lang, met mijnhuisverkoopklaar.nl) en mhvk-logo-kort
   (huis en MHVK), elk donker en -wit. Wit op olijf en bosgroen, donker op wit en linnen.
   Header: kort onder 64rem, lang vanaf 64rem, via <picture>. Footer: altijd lang.
   De hoogte zet de context; de breedte volgt uit de width en height op <img> en <source>. */
.logo {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target); /* klikvlak minimaal 44px hoog */
}

.logo__img {
  display: block;
  height: 2rem; /* kort logo, 32px */
  width: auto;
}

@media (min-width: 64rem) {
  .site-header .logo__img {
    height: 3rem; /* lang logo, 48px */
  }
}

/* In de footer altijd het lange logo, zo breed dat mijnhuisverkoopklaar.nl te lezen is */
.site-footer .logo__img {
  width: 22rem;
  max-width: 100%;
  height: auto;
}

.site-footer--compact .logo__img {
  width: 16rem;
}

/* ---------- Knoppen ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 3rem; /* 48px, Figma 12 + 24 + 12 */
  padding: var(--space-3) var(--space-5);
  border: var(--border-width) solid var(--color-action);
  border-radius: var(--radius);
  background-color: var(--color-action);
  color: var(--color-action-text);
  font-family: var(--font-heading);
  font-size: var(--text-body);
  font-weight: var(--font-weight-button);
  line-height: var(--leading-body);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease),
    border-color var(--duration-fast) var(--ease),
    color var(--duration-fast) var(--ease);
}

.btn:hover {
  background-color: var(--color-action-hover);
  border-color: var(--color-action-hover);
  color: var(--color-action-text);
  text-decoration: none;
}

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

.btn--secondary {
  background-color: transparent;
  border-color: var(--color-action-secondary);
  color: var(--color-action-secondary);
}

.btn--secondary:hover {
  background-color: var(--color-action-secondary);
  border-color: var(--color-action-secondary);
  color: var(--wit); /* DR-014: nooit linnen knoptekst, ook niet op .surface-warm */
}

.btn--text {
  min-height: var(--tap-target);
  padding-inline: 0;
  border-color: transparent;
  background-color: transparent;
  color: var(--color-link);
}

.btn--text:hover {
  background-color: transparent;
  border-color: transparent;
  color: var(--color-link-hover);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.btn--text .icon {
  transition: transform var(--duration) var(--ease);
}

.btn--text:hover .icon {
  transform: translateX(3px);
}

/* Zwarte knop: alleen op olijf, om af te wisselen met de witte (DR-012) */
.btn--dark {
  background-color: var(--neutraal-900);
  border-color: var(--neutraal-900);
  color: var(--wit);
}

.btn--dark:hover {
  background-color: var(--neutraal-800);
  border-color: var(--neutraal-800);
  color: var(--wit);
}

/* Op bosgroen valt zwart weg (1,3:1): daar blijft de knop wit */
.surface-dark .btn--dark,
.surface-dark .btn--dark:hover {
  background-color: var(--color-action);
  border-color: var(--color-action);
  color: var(--color-action-text);
}

/* Een olijf vlak binnen bosgroen (zoals de kaart in .scan-viewer--photo) is gewoon olijf: daar mag zwart weer */
.surface-dark .surface-brand .btn--dark {
  background-color: var(--neutraal-900);
  border-color: var(--neutraal-900);
  color: var(--wit);
}

.surface-dark .surface-brand .btn--dark:hover {
  background-color: var(--neutraal-800);
  border-color: var(--neutraal-800);
  color: var(--wit);
}

/* Op groen (DR-012): tweede actie is witte tekst met onderstreping, geen omlijnde knop */
.surface-brand .btn--secondary,
.surface-dark .btn--secondary,
.surface-brand .btn--text,
.surface-dark .btn--text {
  min-height: var(--tap-target);
  padding-inline: 0;
  border-color: transparent;
  background-color: transparent;
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

.surface-brand .btn--secondary:hover,
.surface-dark .btn--secondary:hover,
.surface-brand .btn--text:hover,
.surface-dark .btn--text:hover {
  border-color: transparent;
  background-color: transparent;
  color: var(--color-link-hover);
  text-decoration-thickness: 2px;
}

.btn--lg {
  min-height: 3.5rem;
  padding: var(--space-4) var(--space-6);
  font-size: var(--text-body-lg);
}

.btn--block {
  width: 100%;
  white-space: normal; /* lange tekst in een smalle kaart mag afbreken */
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

.btn .icon {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* ---------- Badge ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--olijf-100);
  color: var(--olijf-700);
  font-family: var(--font-heading);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  line-height: 1.5;
}

.badge--neutraal { background: var(--neutraal-100); color: var(--neutraal-700); }
.badge--succes { background: var(--succes-50); color: var(--succes-600); }
.badge--waarschuwing { background: var(--waarschuwing-50); color: var(--waarschuwing-600); }
.badge--fout { background: var(--fout-50); color: var(--fout-600); }

/* ---------- Placeholder: alleen in concepten ---------- */
.placeholder {
  padding: 0 0.25em;
  background: var(--waarschuwing-50);
  color: var(--waarschuwing-600);
  outline: 1px dashed var(--waarschuwing-400);
  font-weight: var(--font-weight-semibold);
  /* Over meer regels: elke regel dezelfde binnenruimte, zodat de linkerrand recht blijft */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* In een melding is de placeholder één kort woord, zoals [e-mailadres]: niet afbreken na "e-".
   Niet voor alle placeholders: lange, zoals [Echte review van een makelaar, hooguit drie zinnen.], moeten
   kunnen afbreken, anders lopen ze op 390px uit het scherm. */
.alert .placeholder {
  white-space: nowrap;
}

/* ---------- Energielabel ---------- */
.energy-label {
  --label-bg: var(--label-a);
  --label-fg: var(--neutraal-900);
  display: inline-flex;
  align-items: center;
  height: 2.25rem;
  min-width: 4.5rem;
  padding-left: var(--space-3);
  padding-right: 1.5rem;
  background: var(--label-bg);
  color: var(--label-fg);
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  font-size: 1.125rem;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  clip-path: polygon(0 0, calc(100% - 0.9rem) 0, 100% 50%, calc(100% - 0.9rem) 100%, 0 100%);
}

.energy-label--lg {
  height: 3.5rem;
  min-width: 7rem;
  padding-left: var(--space-4);
  padding-right: 2.25rem;
  font-size: 1.75rem;
  clip-path: polygon(0 0, calc(100% - 1.4rem) 0, 100% 50%, calc(100% - 1.4rem) 100%, 0 100%);
}

/* Witte letters op donkergroen en rood, donkere letters op licht. Letters zijn 18px+ vet (grote tekst). */
.energy-label--a4 { --label-bg: var(--label-a4); --label-fg: var(--wit); }
.energy-label--a3 { --label-bg: var(--label-a3); --label-fg: var(--wit); }
.energy-label--a2 { --label-bg: var(--label-a2); --label-fg: var(--wit); }
.energy-label--a1 { --label-bg: var(--label-a1); --label-fg: var(--wit); }
.energy-label--a  { --label-bg: var(--label-a); }
.energy-label--b  { --label-bg: var(--label-b); }
.energy-label--c  { --label-bg: var(--label-c); }
.energy-label--d  { --label-bg: var(--label-d); }
.energy-label--e  { --label-bg: var(--label-e); }
.energy-label--f  { --label-bg: var(--label-f); }
.energy-label--g  { --label-bg: var(--label-g); --label-fg: var(--wit); }

/* Labelschaal: balken worden langer van A++++ naar G */
.energy-scale {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-width: 26rem;
  padding: 0;
  list-style: none;
}

.energy-scale li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.energy-scale .energy-label {
  width: calc(4.5rem + var(--step, 0) * clamp(0.75rem, 3vw, 1.5rem));
  height: 1.875rem;
  font-size: 0.9375rem;
}

.energy-scale__current {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-heading);
}

.energy-scale__current::before {
  content: "";
  width: 0.75rem;
  height: 1.875rem;
  background: var(--color-heading);
  clip-path: polygon(100% 0, 100% 100%, 0 50%);
}

/* ---------- Formulieren ---------- */
.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.form-row {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.field__label {
  font-family: var(--font-heading);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-body);
  color: var(--color-heading);
}

.field__optional {
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-muted);
}

.field__hint {
  font-size: var(--text-body-sm);
  color: var(--color-text-muted);
}

.field__error {
  display: none;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
  color: var(--fout-600);
}

.field--error .field__error {
  display: flex;
}

.input,
.select,
.textarea {
  width: 100%;
  min-height: 3rem;
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius);
  background-color: var(--wit);
  color: var(--neutraal-900);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
}

.input::placeholder,
.textarea::placeholder {
  color: var(--neutraal-500);
}

.input:hover,
.select:hover,
.textarea:hover {
  border-color: var(--neutraal-700);
}

.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible {
  outline: none;
  border-color: var(--bosgroen);
  box-shadow: 0 0 0 1px var(--bosgroen), 0 0 0 4px var(--olijf-200);
}

.field--error .input,
.field--error .select,
.field--error .textarea {
  border-color: var(--fout-600);
  box-shadow: 0 0 0 1px var(--fout-600);
}

.input:disabled,
.select:disabled,
.textarea:disabled {
  background-color: var(--neutraal-100);
  color: var(--neutraal-500);
  cursor: not-allowed;
}

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

.select {
  appearance: none;
  padding-right: var(--space-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1C16' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  background-size: 1.25rem;
}

.choice-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 0;
  border: 0;
}

.choice-group legend {
  margin-bottom: var(--space-2);
}

.choice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-height: var(--tap-target);
  padding-block: var(--space-2);
  cursor: pointer;
}

.choice input {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.125rem;
  flex-shrink: 0;
  accent-color: var(--olijf-500);
  cursor: pointer;
}

/* ---------- Snelstart ---------- */
/* Postcode en huisnummer met één knop. Gaat met method="get" naar het aanvraagformulier, dat het adres dan zelf invult.
   Mobiel twee velden naast elkaar met de knop eronder, vanaf 48rem velden en knop op één rij.
   Knop naast witte velden is op olijf zwart: .btn--dark (DR-017) */
.quick-start {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  max-width: 42rem;
}

.quick-start__form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: var(--space-4) var(--space-3);
  width: 100%;
  text-align: left;
}

.quick-start__submit {
  grid-column: 1 / -1;
}

@media (min-width: 48rem) {
  .quick-start__form {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.75fr) auto;
  }

  .quick-start__submit {
    grid-column: auto;
  }
}

/* Proef (home-v2.html): snelstart in een eigen vlak. Samen met een surface-klasse, bijvoorbeeld .surface-dark.
   Wijkt op bosgroen af van DR-017 (witte knop naast witte velden). Nog niet op andere pagina's gebruiken. */
.quick-start--panel {
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius);
}

@media (min-width: 48rem) {
  .quick-start--panel {
    padding: var(--space-7);
  }
}

/* ---------- Aanvraag ---------- */
/* Drie stappen (gegevens, adres, opties) en het overzicht in één formulier, op een eigen pagina (aanvragen.html).
   Stap 1 is een slot: zolang naam en e-mail niet kloppen, zijn stap 2 en 3 zichtbaar maar gedimd (DR-020).
   js/aanvraag.js zet dan .order__step--locked op de stap en inert op .order__step-body. Zonder script is niets op slot.
   Onder 64rem: stap 1, 2 en 3, daaronder het overzicht met totaal en knop. Een balk onderaan het scherm
   toont het totaal zolang het overzicht nog niet in beeld is.
   Vanaf 64rem: de drie stappen links, het overzicht rechts ernaast vanaf stap 1. Het overzicht schuift mee (sticky).
   De scripts meten drie hoogtes en zetten ze in rem:
   --header-height         hoogte van de sticky header van de pagina, op <html> (js/components.js, zie Header en navigatie)
   --order-summary-height  hoogte van het overzicht, op het formulier (js/aanvraag.js)
   --order-bar-height      hoogte van de balk onderaan (onder 64rem), op het formulier */
.order__form {
  display: flex;
  flex-direction: column;
}

.order__steps {
  --order-step-gap: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--order-step-gap);
  min-width: 0;
}

/* Stap */
.order__step {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--space-5);
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.order__step-head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.order__step-number {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  background: var(--color-action);
  color: var(--color-action-text);
}

.order__step-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.order__step-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

/* Vanaf 48rem: nummer links, alles ingesprongen op één lijn met de stapkop, een lijn tussen de nummers */
@media (min-width: 48rem) {
  .order__step {
    grid-template-columns: 2.5rem minmax(0, 1fr);
    column-gap: var(--space-5);
  }

  .order__step-head {
    display: contents;
  }

  .order__step-body {
    grid-column: 2;
  }

  .order__step::before {
    content: "";
    position: absolute;
    top: calc(2.5rem + var(--space-3));
    bottom: calc(var(--space-3) - var(--order-step-gap));
    left: calc(1.25rem - var(--border-width) / 2);
    width: var(--border-width);
    background: var(--color-border);
  }

  .order__step:last-child::before {
    content: none;
  }
}

/* Stap op slot (DR-020): kop en uitleg blijven leesbaar, de velden zijn gedimd en doen niet mee (inert).
   Het nummer is grijs in plaats van olijf. De slotregel zegt wat je eerst moet doen en is niet gedimd. */
.order__step--locked .order__step-body {
  opacity: var(--opacity-disabled);
}

.order__step--locked .order__step-number {
  background: var(--color-border);
  color: var(--color-text-muted);
}

.order__step--locked .order__step-text > :first-child {
  color: var(--color-text-muted);
}

.order__lock {
  display: none;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.order__lock .icon {
  margin-top: 0.0625rem;
}

.order__step--locked .order__lock {
  display: flex;
}

/* Knop onder stap 1: de standaard olijf knop op wit (DR-017). Mobiel over de hele breedte.
   Samen met de statusregel in .order__next-row: na de klik verdwijnt de knop en zegt de regel dat stap 2 en 3 open zijn. */
.order__next-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.order__next {
  margin-top: var(--space-2);
}

@media (min-width: 30rem) {
  .order__next-row {
    align-items: flex-start;
  }
}

/* Onthouden gegevens: één regel boven de velden van stap 1, met een tekstknop om ze te wissen */
.order__remembered {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-3);
  font-size: var(--text-body-sm);
  color: var(--color-text-muted);
}

.order__remembered .btn--text {
  min-height: var(--tap-target);
  font-size: var(--text-body-sm);
}

/* Adres: postcode, huisnummer, toevoeging en de zoekknop. Het woonoppervlak hoort bij stap 1 en staat
   altijd direct onder postcode en huisnummer, nooit los in een andere kolom.
   Smal (mobiel, en naast het overzicht tussen 64rem en 90rem): twee kolommen. */
.order__address {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--space-5) var(--space-3);
}

/* Knop op dezelfde hoogte als de velden: labelhoogte plus tussenruimte van .field */
.order__lookup {
  margin-top: calc(var(--text-body-sm) * var(--leading-body) + var(--space-2));
}

.order__area {
  grid-column: 1 / -1;
}

/* Breed genoeg (tablet, en vanaf 90rem naast het overzicht): één rij adresvelden met de knop,
   het woonoppervlak eronder, zo breed als postcode en huisnummer samen */
@media (48rem <= width < 64rem), (min-width: 90rem) {
  .order__address {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 1.4fr) auto;
  }

  .order__area {
    grid-column: 1 / 3;
  }
}

/* Naast het overzicht tussen 64rem en 90rem: twee kolommen, het woonoppervlak zo breed als de postcode */
@media (64rem <= width < 90rem) {
  .order__area {
    grid-column: 1;
  }
}

/* Status van het BAG-register onder het woonoppervlak */
.order__status {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.order__status .icon {
  margin-top: 0.0625rem;
}

.order__status--found {
  color: var(--succes-600);
}

.order__status--error {
  color: var(--fout-600);
}

/* Opties */
.order__options {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Vraag of opmerking onder de diensten (optioneel) */
.order__note {
  margin-top: var(--space-5);
}

/* Tweede verstuurknop onder de opmerking (DR-027): de standaard olijf knop op wit, alleen vanaf 64rem.
   Daaronder volgt het overzicht met de knop direct na stap 3, dan is een tweede knop dubbel. */
.order__send {
  display: none;
}

@media (min-width: 64rem) {
  .order__send {
    display: flex;
    margin-top: var(--space-5);
  }
}

/* Contactgegevens */
.order__contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

@media (min-width: 30rem) {
  .order__contact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Een veld dat in beeld scrollt (foutmelding, aankomst via de snelstart): de sticky header regelt
   scroll-padding-top op <html>, hier alleen wat lucht erboven. Onder 64rem ook niet onder de balk onderaan. */
.order__form .input,
.option-card__check {
  scroll-margin-top: var(--space-6);
  scroll-margin-bottom: calc(var(--order-bar-height, 0rem) + var(--space-5));
}

/* Na de snelstart zet js/aanvraag.js de stap bovenaan in beeld: ook daar lucht onder de header */
.order__step {
  scroll-margin-top: var(--space-6);
}

/* Knop en melding. De melding blijft altijd in de opbouw (ook leeg), zodat aria-live de eerste melding voorleest.
   Leeg is hij 0 hoog; pas met inhoud krijgt hij ruimte boven. */
.order__actions {
  display: flex;
  flex-direction: column;
}

.order__feedback:not(:empty) {
  margin-top: var(--space-3);
}

/* De akkoordregel onder de knop staat er nooit tegenaan (DR-074). Geen gap op .order__actions:
   dan geeft de lege melding hierboven een dubbele ruimte. */
.order__actions > p {
  margin-top: var(--space-4);
}

/* js/aanvraag.js zet de focus op de melding na "Verstuur je aanvraag", zodat hij in beeld komt en wordt voorgelezen.
   De melding is geen knop (tabindex="-1") en heeft al een eigen rand: geen focusring eromheen, anders
   staat er in het groene overzicht een witte ring om de gekleurde rand. */
.order__feedback .alert:focus {
  outline: none;
}

/* Desktop: de drie stappen onder elkaar links (gegevens, adres, opties), het overzicht rechts (31% van de breedte, nooit smaller
   dan 22rem) met de bovenkant gelijk aan stap 1. .order__steps doet dan niet mee in de opbouw: de stappen
   worden zelf cellen van het formulier, zodat het overzicht over alle drie de rijen kan meeschuiven. */
@media (min-width: 64rem) {
  .order__form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(22rem, 31%);
    align-items: start;
    gap: var(--space-9) var(--gap-split);
  }

  .order__steps {
    --order-step-gap: var(--space-9);
    display: contents;
  }

  .order__step--contact {
    grid-column: 1;
    grid-row: 1;
  }

  .order__step--address {
    grid-column: 1;
    grid-row: 2;
  }

  .order__step--options {
    grid-column: 1;
    grid-row: 3;
  }
}

/* Overzicht in het formulier.
   Mobiel: binnen de marges van de pagina, als afsluiter onder stap 3. Zo loopt het groen niet tot de rand
   en sluit de sectie gewoon af met de witte ruimte van .section.
   Tablet: springt in, net als de velden van de stappen.
   Desktop: rechts naast de stappen en sticky onder de header. Past het overzicht niet in het scherm,
   dan schuift de bovenkant weg en blijven totaal en knop in beeld. */
.order__form > .order-summary {
  margin-top: var(--space-8);
}

/* De link in de balk springt naar de kop van het overzicht: de groene bovenrand blijft zichtbaar */
.order__form > .order-summary .order-summary__head > :first-child {
  scroll-margin-top: calc(var(--space-7) + var(--space-4));
}

@media (min-width: 48rem) {
  .order__form > .order-summary {
    margin-inline-start: calc(2.5rem + var(--space-5));
  }
}

/* Bij sticky telt 100% in top als de hoogte van het scherm. Zonder script rekent top met --space-10 als headerhoogte. */
@media (min-width: 64rem) {
  .order__form > .order-summary {
    grid-column: 2;
    grid-row: 1 / span 3;
    position: sticky;
    top: min(
      calc(var(--header-height, var(--space-10)) + var(--space-5)),
      calc(100% - var(--order-summary-height, 0rem) - var(--space-5))
    );
    margin-top: 0;
    margin-inline-start: 0;
  }
}

/* Balk in het formulier (onder 64rem).
   Laatste element van het formulier, sticky onderaan het scherm. De negatieve marge (eigen hoogte)
   haalt hem uit de opbouw, zodat er onder het overzicht geen lege ruimte komt.
   js/aanvraag.js toont hem alleen bij stap 3 en niet tijdens typen (DR-073), en verbergt hem zodra het overzicht in beeld is. */
.order__form > .order-summary__bar {
  position: sticky;
  bottom: 0;
  z-index: 10;
  margin-top: calc(-1 * var(--order-bar-height, 0rem));
  margin-inline: calc(-1 * var(--page-padding));
  padding-inline: var(--page-padding);
}

@media (min-width: 64rem) {
  .order__form > .order-summary__bar {
    display: none;
  }
}

/* ---------- Optiekaart ---------- */
/* Selecteerbare dienst (checkbox) of pakket (radio, hooguit één, DR-045) met icoon, naam, uitleg en prijs.
   De hele kaart is klikbaar via het label. Gestapeld in smalle kolommen, anders een rij.
   De prijsregel (.option-card__price) staat leeg in de HTML met hidden. js/aanvraag.js vult hem uit prijzen.js
   (DR-044): "vanaf" het laagste bedrag met zijn klasse, het bedrag voor de klasse van de woning, of
   "Prijs op aanvraag". Zonder prijzen.js blijft hij leeg en verborgen: nooit een bedrag of placeholder in de HTML. */
.option-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-4);
  border: var(--border-width) solid var(--color-border);
  background: var(--color-bg);
  transition:
    border-color var(--duration) var(--ease),
    background-color var(--duration) var(--ease),
    box-shadow var(--duration) var(--ease);
}

.option-card:hover {
  border-color: var(--color-border-strong);
}

/* Het icoon is een .icon-tile, mobiel zo groot als een tapdoel */
.option-card__icon {
  width: var(--tap-target);
  height: var(--tap-target);
  transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease);
}

.option-card__body {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.option-card__title {
  cursor: pointer;
}

/* Hele kaart klikbaar */
.option-card__title::after {
  content: "";
  position: absolute;
  inset: 0;
}

.option-card__price {
  grid-column: 2 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-2);
}

/* Checkbox: vierkant, olijf met wit vinkje als hij aan staat. appearance none, vinkje bij :checked, focusring om
   de kaart. Pakketten staan niet in het formulier, dus er is geen radio (DR-051). */
.option-card__check {
  position: relative;
  z-index: 1;
  grid-column: 3;
  grid-row: 1;
  display: grid;
  place-content: center;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0.625rem 0 0;
  border: var(--border-width-strong) solid var(--color-border-strong);
  border-radius: var(--radius);
  background: var(--wit);
  appearance: none;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease);
}

.option-card__check::before {
  content: "";
  width: 1rem;
  height: 1rem;
  background-color: var(--wit);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: scale(0);
  transition: transform var(--duration-fast) var(--ease);
}

.option-card__check:checked {
  border-color: var(--color-action);
  background: var(--color-action);
}

.option-card__check:checked::before {
  transform: scale(1);
}

/* Gekozen */
.option-card:has(.option-card__check:checked) {
  border-color: var(--color-action);
  box-shadow: inset 0 0 0 var(--border-width) var(--color-action);
  background: var(--olijf-50);
}

.option-card:has(.option-card__check:checked) .option-card__icon {
  background: var(--color-action);
  color: var(--color-action-text);
}

/* Focus op de hele kaart */
.option-card:has(.option-card__check:focus-visible) {
  outline: var(--border-width-strong) solid var(--color-focus);
  outline-offset: 0.1875rem;
}

.option-card:has(.option-card__check:focus-visible) .option-card__check {
  outline: none;
}

/* Vaste optie (aria-disabled="true") met .option-card__included als uitleg. Sinds DR-066 (2026-10-22) gebruikt het
   formulier dit niet meer: de 3D-plattegrond is geen eigen kaart, die zit in de prijs bij meetrapport en virtuele
   tour. De regels blijven voor een volgende optie die vanzelf meekomt. */
.option-card:has(.option-card__check[aria-disabled="true"]) .option-card__title,
.option-card__check[aria-disabled="true"] {
  cursor: default;
}

.option-card__included {
  font-weight: var(--font-weight-medium);
  color: var(--color-heading);
}

/* Foutmelding: geen optie gekozen */
.field--error .option-card {
  border-color: var(--fout-600);
}

/* Als rij met de prijs rechts: op tablet (48rem tot 64rem) en vanaf 90rem.
   Daartussen is de kolom naast het overzicht te smal en blijft de kaart gestapeld. */
@media (48rem <= width < 64rem), (min-width: 90rem) {
  .option-card {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    column-gap: var(--space-5);
    padding: var(--space-5);
  }

  .option-card__icon {
    align-self: start;
    width: 3rem;
    height: 3rem;
  }

  .option-card__price {
    grid-column: 3;
    grid-row: 1;
    flex-direction: column;
    align-items: flex-end;
    min-width: 5rem;
    text-align: right;
  }

  .option-card__check {
    grid-column: 4;
    margin-top: 0;
  }
}

/* ---------- Overzicht van de aanvraag ---------- */
/* Altijd op .surface-dark. Adres, m², prijsklasse, per pakket of dienst het bedrag uit prijzen.js (DR-044),
   het totaal incl. 21% btw, de knop en wat er daarna gebeurt.
   Zo hoog als de inhoud. De plek in het formulier staat bij Aanvraag hierboven. */
.order-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-7) var(--space-5);
}

.order-summary__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.order-summary__facts {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
}

.order-summary__fact {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-4);
}

.order-summary__fact dd {
  margin: 0;
  text-align: right;
}

.order-summary__calc {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Elk blok met een lijn erboven, met --space-5 tussen lijn en tekst (DR-074). Zonder gekozen dienst is de regellijst
   weg en blijft er één lijn over. De regellijst is een ul[role="list"]: base.css zet daar padding op 0, met meer
   gewicht dan één klasse. Daarom .order-summary ervoor, anders staat de eerste regel tegen de lijn. */
.order-summary .order-summary__lines,
.order-summary__total {
  padding-top: var(--space-5);
  border-top: var(--border-width) solid var(--color-border);
}

.order-summary__lines {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
  padding-inline: 0;
  padding-bottom: 0;
  list-style: none;
}

.order-summary__line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 var(--space-4);
}

.order-summary__formula {
  grid-column: 1;
}

.order-summary__amount {
  grid-column: 2;
  grid-row: 1;
  text-align: right;
}

.order-summary__total {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.order-summary__total-label {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

/* Het totaal incl. 21% btw, "Prijs op aanvraag" of "Nog geen totaal", met eventueel een korte zin eronder */
.order-summary__sum {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Wat er na de aanvraag gebeurt: direct onder de knop */
.order-summary__foot {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

@media (min-width: 48rem) {
  .order-summary {
    padding: var(--space-7);
  }
}

/* Balk: het totaal en hoeveel diensten er gekozen zijn in één regel, met een link naar het overzicht (DR-051).
   Alleen voor smalle schermen. De plek (sticky onderaan) staat bij Aanvraag hierboven. */
.order-summary__bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-3);
  padding-inline: var(--space-5);
  transition:
    transform var(--duration) var(--ease),
    visibility 0s linear 0s;
}

.order-summary__bar-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.order-summary__bar-total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-2);
}

.order-summary__bar-link .icon {
  transition: transform var(--duration) var(--ease);
}

.order-summary__bar-link:hover .icon {
  transform: translateY(0.125rem);
}

/* Verborgen: schuift onder het scherm weg */
.order-summary__bar--hidden {
  visibility: hidden;
  transform: translateY(100%);
  transition:
    transform var(--duration) var(--ease),
    visibility 0s linear var(--duration);
}

/* ---------- Media en placeholders ---------- */
.media {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  background: var(--color-placeholder-bg);
}

.media img,
.media iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}

.media--1x1 { aspect-ratio: 1 / 1; }
.media--4x3 { aspect-ratio: 4 / 3; }
.media--16x9 { aspect-ratio: 16 / 9; }

/* Nog geen foto: beschrijf welke foto hier moet komen */
.media--placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-6);
  color: var(--color-placeholder-fg);
  text-align: center;
  font-size: var(--text-body-sm);
}

.media--placeholder .icon {
  width: 2.5rem;
  height: 2.5rem;
}

.media--placeholder p {
  max-width: 28ch;
}

/* ---------- Fotostrip ---------- */
/* Tegels van gelijke hoogte en verschillende breedte, met hooguit twee zwevende kaarten.
   Onder 64rem: zijwaarts scrollen binnen de eigen rij. De eerste tegel is smaller dan het scherm,
   zodat de tweede foto met zijn kaart duidelijk in beeld steekt.
   Vanaf 64rem: de rij vult de volle breedte. Tegels groeien in verhouding:
   --square 1,25 · --wide 1,45 · standaard 1 · --narrow 0,75.
   Een zwevende kaart mag over de boven- of onderrand van zijn foto steken.
   Zolang de rij scrollt, staat er een voortgangslijn onder (.photo-strip__progress): zo zie je dat er meer foto's naast staan. */
.photo-strip {
  --strip-overhang: var(--space-6);
  --strip-height: 20rem;
  margin-top: calc(var(--gap-split) + var(--space-2) - var(--strip-overhang));
  timeline-scope: --photo-strip;
}

/* Dubbele klasse: base.css zet padding: 0 op ul[role="list"] */
.photo-strip .photo-strip__list {
  display: flex;
  gap: var(--space-3);
  margin: 0;
  padding: var(--strip-overhang) var(--page-padding);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--page-padding);
  scrollbar-width: none;
  scroll-timeline: --photo-strip inline;
}

.photo-strip__list::-webkit-scrollbar {
  display: none;
}

/* De rij scrollt: tabindex="0" op de lijst, zodat je hem met Tab en de pijltjes kunt scrollen (ook in Safari).
   De rij is even breed als het scherm: focusring binnen de rand, anders valt hij weg. */
.photo-strip .photo-strip__list:focus-visible {
  outline-offset: calc(-1 * var(--border-width-strong));
}

.photo-strip__item {
  position: relative;
  flex: 0 0 auto;
  width: 15rem;
  scroll-snap-align: start;
}

/* 100% is de breedte van de rij: er blijft altijd 8,5rem over voor de volgende foto */
.photo-strip__item--square {
  width: clamp(11rem, 100% - 8.5rem, 16rem);
}

.photo-strip__item--wide {
  width: 18rem;
}

.photo-strip__item--narrow {
  width: 12rem;
}

.photo-strip__media {
  height: var(--strip-height);
}

/* Uitsnede naar rechts, bijvoorbeeld om de afstandsmeter naast de plattegrond in beeld te houden */
.photo-strip__media--focus-end img {
  object-position: 65% 50%;
}

/* Plek van de zwevende kaart. Staat naast .media (niet erin), zodat hij over de rand kan steken. */
.photo-strip__card {
  position: absolute;
  z-index: 1;
  left: var(--space-3);
  max-width: calc(100% - 2 * var(--space-3));
}

/* Over de bovenrand: op een rustige vloer of lucht, niet over het onderwerp */
.photo-strip__card--top {
  top: calc(var(--space-2) - var(--strip-overhang));
}

/* Over de onderrand: op stoep of vloer */
.photo-strip__card--bottom {
  bottom: calc(var(--space-2) - var(--strip-overhang));
}

/* Rechts in de tegel in plaats van links */
.photo-strip__card--end {
  left: auto;
  right: var(--space-3);
}

/* Kaart op een tegel die niet helemaal in beeld is. Zolang de rij scrollt (onder 64rem)
   staat hij links, in het deel dat je ziet. Vanaf 64rem geldt --end weer. */
.photo-strip__card--peek {
  left: var(--space-3);
  right: auto;
}

/* Voortgangslijn onder de rij, alleen zolang de rij scrollt (onder 64rem). In de HTML direct na de lijst:
   <div class="photo-strip__progress" aria-hidden="true"><span class="photo-strip__progress-bar"></span></div>
   Een dunne lijn met een wit stuk van 30% aan het begin: er staat meer naast. Het witte stuk schuift mee als je veegt
   (scroll-driven animation, alleen door de makelaar zelf, nooit vanzelf). Zonder die techniek blijft het aan het begin staan. */
.photo-strip__progress {
  position: relative;
  height: var(--border-width-strong);
  margin: var(--space-3) var(--page-padding) 0;
  background: var(--color-border);
  overflow: hidden;
}

.photo-strip__progress-bar {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 30%;
  background: var(--color-heading);
}

@supports (animation-timeline: scroll()) {
  .photo-strip__progress-bar {
    animation: photo-strip-voortgang linear both;
    animation-timeline: --photo-strip;
  }
}

/* Van het begin tot het einde van de lijn: 70% van de lijn is 7/3 van het witte stuk zelf */
@keyframes photo-strip-voortgang {
  to {
    transform: translateX(calc(700% / 3));
  }
}

@media (min-width: 48rem) {
  .photo-strip {
    --strip-height: 25rem;
    margin-top: calc(var(--gap-split) - var(--strip-overhang));
  }

  .photo-strip__item {
    width: 19rem;
  }

  .photo-strip__item--square {
    width: 21rem;
  }

  .photo-strip__item--wide {
    width: 25rem;
  }

  .photo-strip__item--narrow {
    width: 15rem;
  }

  .photo-strip__card {
    left: var(--space-5);
    max-width: calc(100% - 2 * var(--space-5));
  }

  .photo-strip__card--end {
    left: auto;
    right: var(--space-5);
  }

  .photo-strip__card--peek {
    left: var(--space-5);
    right: auto;
  }
}

@media (min-width: 64rem) {
  .photo-strip {
    --strip-height: clamp(24rem, 10rem + 22vw, 34rem);
  }

  .photo-strip .photo-strip__list {
    gap: var(--space-4);
    padding-inline: 0;
    overflow: visible;
  }

  .photo-strip__progress {
    display: none;
  }

  .photo-strip__item {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }

  .photo-strip__item--square {
    flex-grow: 1.25;
  }

  .photo-strip__item--wide {
    flex-grow: 1.45;
  }

  .photo-strip__item--narrow {
    flex-grow: 0.75;
  }

  .photo-strip__card {
    left: var(--space-4);
    max-width: calc(100% - 2 * var(--space-4));
  }

  .photo-strip__card--end {
    left: auto;
    right: var(--space-4);
  }

  /* Kaart steekt verder uit dan de rij-afstand, zodat hij echt zweeft */
  .photo-strip__card--top {
    top: calc(-1 * var(--space-6));
  }

  .photo-strip__card--bottom {
    bottom: calc(-1 * var(--space-6));
  }
}

/* ---------- Zwevende kaart ---------- */
/* Klein effen vlak op een foto met een voorbeeldwaarde. Altijd met .surface-white en een badge "Voorbeeld".
   De plek op de foto regelt de ouder: .photo-strip__card in de fotostrip, .media-overlay__card op een grote foto.
   Standaard (fotostrip): onder 48rem compact, badge bovenaan en alles onder elkaar, zodat de kaart smal blijft.
   Vanaf 48rem staan titel en badge op één regel, en waarde en uitleg op één regel. */
.float-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: max-content;
  padding: var(--space-2) var(--space-3);
  box-shadow: var(--shadow-raised);
}

.float-card__head {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: var(--space-1);
}

.float-card__head .badge {
  flex-shrink: 0;
}

.float-card__row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.float-card__value {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Gekozen diensten: korte namen met een vinkje in hetzelfde olijf vlak als een gekozen optiekaart.
   Zet .type-label op de lijst. Mobiel onder elkaar, vanaf 48rem naast elkaar. Hooguit drie namen. */
.float-card .float-card__checks {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  color: var(--color-heading);
}

.float-card__checks li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
}

.float-card__check {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  background: var(--color-action);
  color: var(--color-action-text);
}

.float-card__check .icon {
  width: 0.875rem;
  height: 0.875rem;
  stroke-width: 3;
}

@media (min-width: 48rem) {
  .float-card {
    gap: var(--space-3);
    padding: var(--space-4);
  }

  .float-card .float-card__checks {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
  }

  /* Te smal? Dan schuift de badge onder de titel in plaats van uit de kaart te steken */
  .float-card__head {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-3);
  }

  .float-card__row {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
  }
}

/* Groot: op een grote foto (.media-overlay). Op elke breedte titel en badge op één regel,
   de waarde (bijvoorbeeld .energy-label--lg) met een korte uitleg ernaast. */
.float-card--lg {
  gap: var(--space-4);
  padding: var(--space-5);
}

.float-card--lg .float-card__head {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.float-card--lg .float-card__row {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-4);
}

.float-card--lg .float-card__row p {
  max-width: 14ch;
}

@media (min-width: 48rem) {
  .float-card--lg {
    padding: var(--space-6);
  }
}

/* Balk met de labelklassen A++++ tot G, altijd 11 stappen. De huidige klasse steekt uit. */
.float-card__scale {
  display: grid;
  grid-template-columns: repeat(11, minmax(0, 1fr));
  align-items: end;
  gap: var(--space-1);
  height: var(--space-4);
}

.float-card__step {
  height: var(--space-2);
}

.float-card__step:nth-child(1)  { background: var(--label-a4); }
.float-card__step:nth-child(2)  { background: var(--label-a3); }
.float-card__step:nth-child(3)  { background: var(--label-a2); }
.float-card__step:nth-child(4)  { background: var(--label-a1); }
.float-card__step:nth-child(5)  { background: var(--label-a); }
.float-card__step:nth-child(6)  { background: var(--label-b); }
.float-card__step:nth-child(7)  { background: var(--label-c); }
.float-card__step:nth-child(8)  { background: var(--label-d); }
.float-card__step:nth-child(9)  { background: var(--label-e); }
.float-card__step:nth-child(10) { background: var(--label-f); }
.float-card__step:nth-child(11) { background: var(--label-g); }

.float-card__step--current {
  height: 100%;
}

/* Twee korte feiten onder een dunne lijn */
.float-card__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--color-border);
}

.float-card__facts dd {
  color: var(--color-heading);
}

/* ---------- Foto met zwevende kaart ---------- */
/* Grote foto met één zwevende kaart (.float-card--lg) erop, naast kop, tekst en knop.
   Optioneel daarna een korte, echte review (.quote--compact met .media-overlay__quote): het bewijs komt pas na de actie.
   Nog geen echte review? Laat hem weg. De placeholder staat dan alleen in de reviewkaart bij de vragen (.review-grid--faq).
   Volgorde in de HTML: __content, __media, __quote.
   Mobiel en tablet onder elkaar: tekst en knop, foto met kaart, review.
   Vanaf 64rem: foto links over de volle hoogte, rechts tekst en knop met de review eronder, samen in het midden. */
.media-overlay {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

.media-overlay__media {
  margin-top: var(--space-9);
}

.media-overlay__quote {
  margin-top: var(--space-7);
}

.media-overlay__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.media-overlay__media {
  position: relative;
  max-width: 100%;
}

.media-overlay__image {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 45%;
  background: var(--color-placeholder-bg);
}

/* Plek van de kaart. Mobiel schuift hij over de onderkant van de foto, zo blijft de foto zichtbaar. */
.media-overlay__card {
  position: relative;
  width: auto;
  margin: calc(-1 * var(--space-10)) var(--space-4) 0;
}

/* Vanaf 48rem ligt de kaart midden op de foto: het ene brandpunt.
   De uitsnede laat raam en vensterbank zien, de radiator valt eronder weg. */
@media (min-width: 48rem) {
  .media-overlay__image {
    aspect-ratio: 5 / 4;
    object-position: 50% 40%;
  }

  .media-overlay__card {
    position: absolute;
    top: 50%;
    inset-inline: 0;
    width: min(26rem, calc(100% - 2 * var(--space-7)));
    margin: 0 auto;
    transform: translateY(-50%);
  }
}

/* Vanaf 64rem: foto links, tekst rechts. De lege rijen boven en onder houden tekst en review samen in het midden. */
@media (min-width: 64rem) {
  .media-overlay {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 1fr auto auto 1fr;
    column-gap: var(--gap-split);
  }

  .media-overlay__media {
    grid-column: 1;
    grid-row: 1 / -1;
    margin-top: 0;
  }

  .media-overlay__content {
    grid-column: 2;
    grid-row: 2;
  }

  .media-overlay__quote {
    grid-column: 2;
    grid-row: 3;
  }

  /* Vierkant, zodat de foto niet hoger wordt dan de tekst ernaast */
  .media-overlay__image {
    aspect-ratio: 1 / 1;
    object-position: 50% 15%;
  }
}

/* Vanaf 90rem: foto breder dan de tekst */
@media (min-width: 90rem) {
  .media-overlay {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }

  .media-overlay__image {
    aspect-ratio: 5 / 4;
    object-position: 50% 40%;
  }
}

/* ---------- Tekst met foto ---------- */
/* Rustige sectie zoals "Over ons": links kop, korte tekst, drie feiten en één vervolgstap, rechts één staande foto.
   Op wit of linnen. Geen zwevende kaart en geen tweede foto: dat hebben de fotostrip, de collage en de foto met zwevende kaart al.
   Volgorde in de HTML: __body, __media. Onder 64rem onder elkaar (eerst de tekst), de foto hooguit 32rem breed,
   zodat een staande foto niet vergroot en zacht wordt. Vanaf 64rem naast elkaar, verticaal in het midden. */
.text-media {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: var(--space-9) var(--gap-split);
}

.text-media__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-7);
  min-width: 0;
}

/* Drie korte feiten, elk met een dunne lijn erboven. Onbekend? Een .placeholder.
   Een rij per feit (label links, waarde rechts). Is de tekstkolom zelf minstens 36rem breed, dan drie kolommen met
   het label boven de waarde. Die stap kijkt naar de kolom (container), niet naar het scherm: naast de foto of naast
   de zijbalk van de style guide is de kolom smaller dan het scherm doet denken.
   Nooit twee naast elkaar met één los eronder. */
.text-media__body {
  container: text-media / inline-size;
}

.text-media__facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  margin: 0;
}

.text-media__fact {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-4);
  padding-block: var(--space-3);
  border-top: var(--border-width) solid var(--color-border);
}

.text-media__fact dd {
  margin: 0;
}

@container text-media (min-width: 36rem) {
  /* Kolommen naar hun inhoud: de extra ruimte wordt gelijk verdeeld, dus de lijnen lopen nog steeds over de hele
     breedte, maar een langere waarde ("Eén aanspreekpunt") krijgt iets meer plek dan een korte (DR-059). */
  .text-media__facts {
    grid-template-columns: repeat(3, auto);
    column-gap: var(--space-5);
  }

  .text-media__fact {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding-block: var(--space-4) 0;
  }

  /* Drie naast elkaar: de waarde een maat kleiner dan .type-h4 (DR-059). Met h4 liep "Eén aanspreekpunt" in een
     derde van de kolom over twee regels, en stonden de feiten niet meer op één lijn. */
  .text-media__fact dd {
    font-size: var(--text-body-lg);
  }
}

.text-media__media {
  aspect-ratio: 4 / 5;
  max-width: 32rem;
}

.text-media__media img {
  object-position: 50% 60%;
}

@media (min-width: 64rem) {
  .text-media {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  }

  .text-media__media {
    max-width: none;
  }
}

/* ---------- Collage ---------- */
/* Drie foto's en een linnen vlak met één knop. Volgorde in de HTML en in beeld is gelijk:
   hoofdfoto, kleine foto, zijfoto, linnen vlak.
   --main is de foto met de meeste kleur (bijvoorbeeld een gevel). Die krijgt altijd het grootste vak.
   Mobiel en tablet: hoofdfoto over de volle breedte (3:2), twee staande foto's (4:5) naast elkaar, linnen vlak eronder.
   Vanaf 90rem: twee even hoge kolommen die verspringen. Links hoofdfoto en kleine foto, rechts zijfoto en linnen vlak.
   --breakout (alleen rechts in een .split): vanaf 90rem schuift de collage --space-9 de ruimte
   tussen de kolommen in. De foto's worden groter en de vraag in het linnen vlak past op twee regels. */
.collage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.collage__col {
  display: contents;
}

.collage__photo {
  aspect-ratio: 4 / 5;
}

.collage__photo--main {
  grid-column: 1 / -1;
  aspect-ratio: 3 / 2;
}

/* Uitsnede per vak. Eén waarde voor alle breedtes: in een staand vak telt alleen de eerste
   waarde (links of rechts), in een liggend vak alleen de tweede (hoger of lager).
   Hoofdfoto (hoekhuis): staand vanaf 90rem iets rechts van het midden, zodat erker en voordeur heel in beeld zijn.
   Kleine foto (badkamer): staand het raam in het midden, liggend vanaf 90rem de douchekop nog in beeld.
   Zijfoto (keuken): naar rechts, zodat de donkere kast aan de linkerrand wegvalt. */
.collage__photo--main img {
  object-position: 52% 50%;
}

.collage__photo--small img {
  object-position: 35% 25%;
}

.collage__photo--side img {
  object-position: 75% 50%;
}

.collage__cta {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-6);
}

.collage__action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

@media (min-width: 90rem) {
  .collage--breakout {
    margin-inline-start: calc(-1 * var(--space-9));
  }

  /* De rechterkolom bepaalt de hoogte: zijfoto 4:5 plus het linnen vlak op zijn inhoud.
     De linkerkolom rekt even hoog mee en verdeelt die hoogte 3 : 2 over hoofdfoto en kleine foto.
     Links --space-10 ruimte onder, rechts --space-10 boven: boven- en onderkant verspringen
     dus altijd evenveel, ook als de tekst in het linnen vlak langer wordt. */
  .collage__col {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-10);
  }

  .collage__col--offset {
    margin-top: var(--space-10);
    margin-bottom: 0;
  }

  .collage__photo {
    flex: 2 1 0;
    min-height: 0;
    aspect-ratio: auto;
  }

  .collage__photo--main {
    flex-grow: 3;
  }

  .collage__photo--side {
    flex: none;
    aspect-ratio: 4 / 5;
  }

  .collage__cta {
    flex: none;
  }
}

/* ---------- Hero (Figma: Header 19) ---------- */
.hero {
  padding-block: var(--section-padding);
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-split);
  align-items: center;
}

/* Mobiel: eerst kop en knop, dan het beeld */
.hero__media {
  order: 2;
}

@media (min-width: 48rem) {
  .hero__inner {
    grid-template-columns: 1fr 1fr;
  }

  .hero__media {
    order: 0;
  }

  .hero--media-right .hero__media {
    order: 2;
  }
}

.hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.hero__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.hero__title {
  font-size: var(--text-display-2); /* DR-007 */
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}

.hero__lead {
  font-size: var(--text-body-lg);
  line-height: var(--leading-body-lg);
  max-width: 34rem;
  text-wrap: balance; /* regels verdelen met CSS, niet met vaste spaties of <br> in de tekst */
}

/* Gecentreerd: tekst en snelstart in het midden, fotostrip eronder.
   Onderaan minder ruimte: de fotostrip heeft zelf ruimte voor de zwevende kaart. */
.hero--center {
  padding-bottom: var(--section-padding-sm);
}

.hero--center .hero__content {
  align-items: center;
  max-width: 52rem;
  margin-inline: auto;
  text-align: center;
  gap: var(--space-6);
}

.hero--center .hero__text {
  align-items: center;
}

.hero--center .hero__title {
  max-width: 22ch;
}

@media (min-width: 48rem) {
  .hero--center .hero__content {
    gap: var(--space-7);
  }
}

@media (min-width: 64rem) {
  .hero--center {
    padding-top: calc(var(--section-padding) - var(--space-4));
  }
}

/* ---------- Kaart ---------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

/* Icoon in de kaart: .card__icon, hetzelfde vlak als .icon-tile (zie Icoontegel) */

.card__title {
  font-size: var(--text-h4);
}

.card__footer {
  margin-top: auto;
  padding-top: var(--space-2);
}

/* Hele kaart klikbaar via de link in de titel */
.card--link:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-raised);
}

.card--link .card__title a {
  color: inherit;
  text-decoration: none;
}

.card--link .card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.card--link:focus-within {
  outline: var(--border-width-strong) solid var(--color-focus);
  outline-offset: 3px;
}

.card--link .card__title a:focus-visible {
  outline: none;
}

/* Of: de vervolgstap onderin is de echte link (.card__action) en maakt de hele kaart klikbaar.
   Gebruik dit als de titel gewone tekst blijft, zoals in de dienstkaart met foto. */
.card__action::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* De kaart toont de focusring al (.card--link:focus-within) */
.card__action:focus-visible {
  outline: none;
}

/* Niet verschuiven bij indrukken: anders krimpt het klikvlak naar de link en valt de klik weg */
.card__action:active {
  transform: none;
}

.card--link:hover .card__action {
  color: var(--color-link-hover);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.card--link:hover .card__action .icon {
  transform: translateX(var(--space-1));
}

/* ---------- Dienstkaart met foto ---------- */
/* Rij met dienstkaarten: mobiel 1 kolom, vanaf 48rem 2, van 64rem tot 90rem 2 liggende kaarten,
   vanaf 90rem 4 naast elkaar. Zo krijg je nooit 3 kaarten met 1 losse eronder. */
.card--media__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}

/* Kop met lead boven de kaarten: de lead krijgt meer lucht onder de grote kop */
.section-head:has(+ .card--media__list) > .type-body-lg {
  margin-top: var(--space-4);
}

@media (min-width: 48rem) {
  .card--media__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap-grid);
  }

  /* Meer lucht onder de sectiekop. Padding, want marges vallen samen. */
  .section-head + .card--media__list {
    padding-top: var(--space-5);
  }
}

@media (min-width: 90rem) {
  .card--media__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-5);
  }
}

/* Kaarten in één rij zijn even hoog en de voet staat onderaan (margin-top: auto).
   Zo staan lijn, prijs en link naast elkaar op één hoogte. Icoon, titel en zin
   houden in elke kaart dezelfde afstand, ook als een titel over twee regels gaat. */
.card--media {
  height: 100%;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-5) var(--space-4);
}

/* Foto loopt door tot de rand van de kaart */
.card--media .card__media {
  width: auto;
  max-width: none;
  margin: calc(-1 * var(--space-5)) calc(-1 * var(--space-5)) 0;
  aspect-ratio: 12 / 5;
}

.card--media .card__media img {
  transition: transform var(--duration) var(--ease);
}

.card--media:hover .card__media img {
  transform: scale(1.04);
}

/* Uitsnede: kies waar de foto om draait. Zonder klasse blijft het midden staan.
   Mobiel (12:5) snijdt boven en onder weg, tussen 64rem en 90rem (staand) links en rechts. */
.card__media--focus-onder img {
  object-position: 45% 70%;
}

.card__media--focus-rechts img {
  object-position: 62% 50%;
}

/* Icoon staat half op de foto. Kleur blijft van .card__icon (linnen vlak, olijf icoon).
   Groter vlak (4rem, net als .icon-tile--lg) met .icon--lg (2rem), zodat het icoon naast de foto iets draagt.
   Een rand in de kaartkleur plus een zachte schaduw maken het vlak los van een lichte foto. */
.card--media .card__icon {
  position: relative;
  z-index: 1;
  width: var(--space-9);
  height: var(--space-9);
  margin-top: calc(-1 * (var(--space-3) + var(--space-9) / 2));
  box-shadow: 0 0 0 var(--space-1) var(--color-bg), var(--shadow-raised);
}

/* Titel: de volledige dienstnaam, ook als hij over twee regels gaat */
.card--media .card__title {
  margin-top: var(--space-3);
}

/* Voet: een dunne lijn met de vervolgstap (.card__action). Geen bedrag in de HTML, bedragen komen uit prijzen.js (DR-044). */
.card--media .card__footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--color-border);
}

/* Beschrijving: altijd wat lucht boven de lijn van de voet */
.card--media > .text-muted {
  margin-bottom: var(--space-2);
}

/* Vanaf 48rem de hele foto (3:2), mobiel lager (12:5) zodat de stapel kort blijft */
@media (min-width: 48rem) {
  .card--media .card__media {
    aspect-ratio: 3 / 2;
  }
}

/* Tussen 64rem en 90rem: twee liggende kaarten, foto links */
@media (64rem <= width < 90rem) {
  .card--media {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    grid-template-rows: auto auto auto 1fr;
    column-gap: var(--space-6);
    row-gap: var(--space-3);
  }

  .card--media > * {
    grid-column: 2;
  }

  .card--media .card__media {
    grid-column: 1;
    grid-row: 1 / -1;
    margin: calc(-1 * var(--space-5)) 0 calc(-1 * var(--space-4)) calc(-1 * var(--space-5));
    aspect-ratio: auto;
  }

  .card--media .card__icon {
    margin-top: 0;
    box-shadow: none;
  }

  .card--media .card__title {
    margin-top: var(--space-2);
  }

  .card--media .card__footer {
    align-self: end;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card--media:hover .card__media img,
  .card--link:hover .card__action .icon {
    transform: none;
  }
}

/* ---------- Hulpbalk ---------- */
/* Onder een rij kaarten, voor wie twijfelt: één vraag, telefoon en e-mail als losse links,
   en een brug naar de aanvraag met één knop. Geen vlakken met iconen: die lijken knoppen.
   Onder elkaar en gecentreerd, vanaf 64rem de hulp links en de knop rechts. */
.help-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  padding-top: var(--space-7);
  border-top: var(--border-width) solid var(--color-border);
  text-align: center;
}

/* Ruimte erboven alleen als er iets boven staat */
* + .help-bar {
  margin-top: var(--space-8);
}

.help-bar__text,
.help-bar__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}

.help-bar__action {
  gap: var(--space-3);
}

/* Mobiel breekt een zin in gelijke delen */
.help-bar p {
  text-wrap: balance;
}

/* Telefoon en e-mail, elk met icoon. Bekend: een link (.btn--text, minstens --tap-target hoog).
   Nog niet bekend: alleen het telefoonnummer als één placeholder, gewone tekst zonder link, even hoog,
   zodat de balk niet verspringt als de link erin komt. */
.help-bar__contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 var(--space-6);
  margin-top: var(--space-1);
}

.help-bar__contact li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-target);
}

.help-bar__contact li > .icon {
  color: var(--color-eyebrow);
}

/* Een telefoon- of mailicoon schuift niet mee bij hover: het is geen pijl */
.help-bar__contact .btn--text:hover .icon {
  transform: none;
}

@media (min-width: 48rem) {
  .help-bar {
    padding-top: var(--space-8);
  }

  * + .help-bar {
    margin-top: var(--space-9);
  }
}

/* Vanaf 64rem op één lijn: vraag en contact links, brug en knop rechts */
@media (min-width: 64rem) {
  .help-bar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: left;
  }

  .help-bar__text {
    align-items: flex-start;
  }

  .help-bar__contact {
    justify-content: flex-start;
  }

  .help-bar__action {
    flex-direction: row;
    gap: var(--space-5);
  }
}

/* ---------- Prijskaart ---------- */
.price-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-7) var(--space-6);
  border: var(--border-width) solid var(--color-border);
  background: var(--color-bg);
}

.price-card__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--text-h1);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  /* Gewone cijfers: met tabular-nums krijgt de 1 in Montserrat een voetje (DR-040, DR-044) */
  font-variant-numeric: lining-nums proportional-nums;
  color: var(--color-heading);
}

.price-card__unit {
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0;
  color: var(--color-text-muted);
}

/* Prijs per klasse van het woonoppervlak (DR-044): links de klasse, rechts het bedrag, lijnen ertussen.
   In de HTML staat een lege dl.price-card__tiers met data-prijs-tiers="id" en hidden. js/components.js vult hem
   uit prijzen.js. De klasse staat kort in beeld ("t/m 75 m²") en voluit voor schermlezers ("tot en met 75 m²").
   Bedragen in Montserrat met gewone cijfers (DR-040). Op .surface-dark kleuren lijn, klasse en bedrag vanzelf mee.
   Geen nowrap op het bedrag: Intl zet al een vaste spatie na het euroteken, en "Prijs op aanvraag" mag breken. */
.price-card__tiers {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.price-card__tier {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-top: var(--border-width) solid var(--color-border);
}

.price-card__tier:last-child {
  border-bottom: var(--border-width) solid var(--color-border);
}

.price-card__tier dt {
  font-size: var(--text-body-sm);
  color: var(--color-text-muted);
}

.price-card__tier dd {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-snug);
  font-variant-numeric: lining-nums proportional-nums;
  text-align: right;
  color: var(--color-heading);
}

.price-card .usp-list {
  flex-grow: 1;
}

/* Doorgestreepte losse som bij een combinatie (DR-060), voor de nieuwe prijs: "€ 515 € 490".
   Altijd op <del> met "Los samen " in .visually-hidden ervoor, zodat een schermlezer zegt wat het is.
   Kleiner, gewoon gewicht en gedempt, zodat de nieuwe prijs het sterkst blijft. De streep zelf blijft altijd staan:
   kleur is nooit het enige signaal. Werkt in tabellen, prijskaarten, optiekaarten en het overzicht van de aanvraag,
   ook op .surface-dark (--color-text-muted kleurt mee). Geen percentage erbij. */
.price-old {
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0;
  color: var(--color-text-muted);
  text-decoration-line: line-through;
  text-decoration-thickness: var(--border-width);
  white-space: nowrap;
}

/* ---------- Inhoudsopgave (DR-063) ----------
   Voor lange tekstpagina's zoals de algemene voorwaarden en de privacyverklaring. .legal zet de inhoudsopgave
   (nav.toc) naast de tekst (.prose). Onder 64rem staat de inhoudsopgave boven de tekst, vanaf 64rem links ernaast
   en sticky onder de header, met een eigen scroll als hij langer is dan het scherm. Elke kop in de tekst heeft een id;
   de link in de inhoudsopgave wijst ernaar. scroll-padding op <html> houdt de kop onder de sticky header vrij.
   Alles werkt zonder JS. Alleen het artikel dat je leest dik maken doet components.js: die link krijgt
   aria-current="true" (DR-064). Alleen dik, geen kleur, balk of onderstreping. */
.legal {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
}

.toc {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border: var(--border-width) solid var(--color-border);
  background: var(--color-bg-subtle);
}

.toc__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.toc__list a {
  display: block;
  padding-block: var(--space-1);
  font-size: var(--text-body-sm);
  color: var(--color-text);
  text-decoration: none;
}

.toc__list a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

.toc__list a[aria-current="true"] {
  font-weight: var(--font-weight-semibold);
}

/* De header-hoogte zit al in scroll-padding-top op <html> (Header en navigatie); hier alleen wat lucht erboven */
.legal .prose h2 {
  scroll-margin-top: var(--space-5);
}

.legal .prose h2:not(:first-child) {
  margin-top: var(--space-5);
}

@media (min-width: 64rem) {
  .legal {
    grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
    gap: var(--space-10);
    align-items: start;
  }

  .toc {
    position: sticky;
    top: calc(var(--header-height, var(--space-10)) + var(--space-5));
    max-height: calc(100vh - var(--header-height, var(--space-10)) - var(--space-7));
    overflow-y: auto;
  }
}

/* ---------- USP-lijst ---------- */
.usp-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 0;
  list-style: none;
}

/* De li is een gewoon blok met het vinkje links ernaast (absolute ::before), geen flex of grid. In flex of grid wordt elk
   inline element een eigen kolom: een <span class="nowrap">3D-tour</span> in de tekst viel dan uiteen in drie kolommen
   met gaten ertussen (DR-032). Zo loopt de tekst door als één alinea, ook met een span, link of strong erin. */
.usp-list li {
  position: relative;
  padding-left: calc(1.25rem + var(--space-3));
}

.usp-list li::before {
  content: "";
  position: absolute;
  top: 0.125rem;
  left: 0;
  width: 1.25rem;
  height: 1.25rem;
  background-color: var(--color-eyebrow);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Stappenplan ---------- */
.steps {
  display: grid;
  gap: var(--gap-grid);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-5);
  border-top: var(--border-width-strong) solid var(--color-heading);
  counter-increment: step;
}

.steps__item::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: var(--space-2);
  background: var(--color-action);
  color: var(--color-action-text);
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
}

.steps__title {
  font-size: var(--text-h4);
}

/* ---------- Featurelijst ---------- */
/* Twee tot vijf punten met icoon (.icon-tile), onder elkaar met een dunne lijn ertussen.
   De titel is een h3 met .type-h4 (zoals de kopjes in de prijskaarten), dus geen eigen lettermaat hier.
   Maximaal 34rem breed (net als .hero__lead), zodat de lijnen niet tegen het beeld ernaast lopen. */
.feature-list {
  display: flex;
  flex-direction: column;
  max-width: 34rem;
  padding: 0;
  list-style: none;
}

.feature-list__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  padding-block: var(--space-5);
  border-top: var(--border-width) solid var(--color-border);
}

.feature-list__item:first-child {
  padding-top: 0;
  border-top: 0;
}

.feature-list__item:last-child {
  padding-bottom: 0;
}

.feature-list__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-width: var(--measure);
}

/* ---------- Feitenrij ---------- */
/* Smalle, rustige rij met korte feiten direct onder de hero. Alleen echte feiten, geen verzonnen aantallen of klantlogo's.
   Elk feit: icoon (.icon-tile), kenmerk op .type-h4, één regel uitleg op .type-body-sm.
   Typografie komt alleen uit de .type-*-klassen in de HTML. Deze CSS verandert geen lettermaat.
   Alleen de vaste breekpunten (48rem en 64rem):
   - mobiel: 2 kolommen, icoon boven de tekst, alles gecentreerd, met een kruis van dunne lijnen;
   - vanaf 48rem schermbreedte (een tablet van 768px): één lage rij van even brede kolommen met een lijn ertussen, icoon boven de tekst;
   - vanaf 64rem schermbreedte: meer lucht naast de lijnen;
   - vanaf 64rem breedte van de rij zelf: icoon links naast de tekst, zodat de rij laag en rustig blijft.
     Die laatste stap kijkt naar de rij (container), niet naar het scherm: in een smallere kolom, zoals naast
     de zijbalk van de style guide, blijft het icoon boven de tekst en breekt de uitleg niet af.
   Gebruik 3 of 4 feiten, of 6 met .fact-row--6: vanaf 48rem 3 kolommen in 2 rijen in plaats van één rij (DR-024). */
.fact-row {
  container: fact-row / inline-size;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  text-align: center;
}

.fact-row__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  padding: 0;
  list-style: none;
}

/* Ruimte boven en onder via variabelen: de eerste rij krijgt geen ruimte boven, de laatste geen ruimte onder.
   Zo lopen de lijnen precies van de bovenkant tot de onderkant van de feiten. */
.fact-row__item {
  --fact-row-space-top: var(--space-5);
  --fact-row-space-bottom: var(--space-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--fact-row-space-top) var(--space-2) var(--fact-row-space-bottom);
}

.fact-row__item:nth-child(-n + 2) {
  --fact-row-space-top: 0;
}

.fact-row__item:last-child,
.fact-row__item:nth-last-child(2):nth-child(odd) {
  --fact-row-space-bottom: 0;
}

/* Lijn tussen de kolommen en tussen de rijen */
.fact-row__item:nth-child(even) {
  border-left: var(--border-width) solid var(--color-border);
}

.fact-row__item:nth-child(n + 3) {
  border-top: var(--border-width) solid var(--color-border);
}

/* Oneven aantal: het laatste feit staat alleen in het midden */
.fact-row__item:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.fact-row__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* Loopt de uitleg in een smalle kolom toch over 2 regels, dan zijn die even lang */
.fact-row__body > * {
  text-wrap: balance;
}

/* Vanaf 48rem: één rij. Elk feit krijgt een even brede kolom, ook bij 3 feiten. Zo staan de lijnen op gelijke afstand. */
@media (min-width: 48rem) {
  .fact-row__list {
    grid-template-columns: none;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
  }

  .fact-row__item {
    --fact-row-space-top: 0;
    --fact-row-space-bottom: 0;
    padding-inline: var(--space-2);
  }

  .fact-row__item:last-child:nth-child(odd) {
    grid-column: auto;
  }

  /* Geen kruis meer, alleen een lijn links van elk feit na het eerste */
  .fact-row__item:nth-child(n + 3) {
    border-top: 0;
  }

  .fact-row__item + .fact-row__item {
    border-left: var(--border-width) solid var(--color-border);
  }

  /* 6 feiten: 3 kolommen in 2 rijen. Lijn tussen de kolommen en tussen de rijen, niet links van het eerste feit in een rij. */
  .fact-row--6 .fact-row__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-flow: row;
  }

  .fact-row--6 .fact-row__item:nth-child(-n + 3) {
    --fact-row-space-bottom: var(--space-5);
  }

  .fact-row--6 .fact-row__item:nth-child(n + 4) {
    --fact-row-space-top: var(--space-5);
    border-top: var(--border-width) solid var(--color-border);
  }

  .fact-row--6 .fact-row__item:nth-child(3n + 1) {
    border-left: 0;
  }
}

/* Vanaf 64rem: meer lucht onder de kop en naast de lijnen */
@media (min-width: 64rem) {
  .fact-row {
    gap: var(--space-8);
  }

  .fact-row__item {
    padding-inline: var(--space-4);
  }
}

/* Rij van 64rem of breder: icoon links, kenmerk en uitleg rechts onder elkaar. Het feit staat als geheel in het midden van zijn kolom.
   Niet bij 6 feiten: daar blijft het icoon boven de tekst, zodat de iconen van een rij op één lijn staan,
   ook als de uitleg van één feit over twee regels loopt (DR-024). */
@container fact-row (min-width: 64rem) {
  .fact-row__item {
    flex-direction: row;
    justify-content: center;
    text-align: start;
  }

  .fact-row--6 .fact-row__item {
    flex-direction: column;
    justify-content: flex-start;
    text-align: center;
  }
}

/* ---------- Header en navigatie ---------- */
.site-header {
  position: relative;
  z-index: 50;
  border-bottom: var(--border-width) solid var(--color-border);
  background: var(--color-bg);
}

.site-header--sticky {
  position: sticky;
  top: 0;
}

/* Eén regel voor alles wat in beeld scrollt onder een sticky header: ankers uit het menu, velden met een fout,
   de sprong vanuit de snelstart. De bovenkant komt direct onder de header. js/components.js meet de header en zet
   --header-height op <html>; zonder script rekent de pagina met --space-10. Wil een element extra lucht erboven,
   geef het dan alleen scroll-margin-top met een --space-token, nooit nog een keer de headerhoogte. */
html:has(.site-header--sticky) {
  scroll-padding-top: var(--header-height, var(--space-10));
}

/* Header op dezelfde surface als de hero: geen lijn ertussen (DR-018) */
.site-header.surface-brand,
.site-header.surface-dark {
  border-bottom-color: transparent;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  min-height: 4.5rem;
}

.site-nav {
  display: none;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: 0;
  list-style: none;
}

.site-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target);
  font-family: var(--font-heading);
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
  color: var(--color-heading);
  text-decoration: none;
  white-space: nowrap; /* "Voor makelaars" en "Over ons" nooit over twee regels */
}

.site-nav__link:hover,
.site-nav__link[aria-current="page"] {
  color: var(--color-heading);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.4em;
}

.site-header__cta {
  display: none;
}

/* Menuknop: alleen het icoon, geen rand, schaduw of vlak (DR-022). Het klikvlak blijft 44px; de negatieve marge
   zet het icoon gelijk met de rechterkant van de inhoud. Met Tab blijft de focusring zichtbaar. */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-target);
  height: var(--tap-target);
  margin-inline-end: calc((var(--icon-size) - var(--tap-target)) / 2);
  padding: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
  color: var(--color-heading);
  -webkit-tap-highlight-color: transparent;
}

/* Focus op groen (DR-038): nooit de algemene witte ring om een groen vlak met een wit kruis erin
   ("groen vierkant met witte rand en wit icoon op groen"). Op olijf wordt het klikvlak zwart met een wit icoon,
   zoals .btn--dark. Op bosgroen valt zwart weg (1,3:1), daar wordt het wit met een zwart icoon,
   zoals de witte knop op bosgroen (DR-012). Geen rand, geen outline. Op wit en linnen blijft de gewone ring. */
.surface-brand .nav-toggle:focus-visible,
.surface-dark .surface-brand .nav-toggle:focus-visible {
  outline: 0;
  background-color: var(--neutraal-900);
  color: var(--wit);
}

.surface-dark .nav-toggle:focus-visible {
  outline: 0;
  background-color: var(--wit);
  color: var(--neutraal-900);
}

/* Drie lijnen die naar een kruis draaien (DR-023). Gebaseerd op de "spin" uit Hamburgers van Jonathan Suh
   (github.com/jonsuh/hamburgers, MIT-licentie, copyright 2015 Jonathan Suh).
   Maten zoals het Lucide-icoon menu: vlak 24px, lijnen 16px breed, 1,5px dik en 7px uit elkaar.
   HTML: <span class="nav-toggle__box" aria-hidden="true"><span class="nav-toggle__inner"></span></span>
   De open-stand volgt aria-expanded, dat zet js/components.js. */
.nav-toggle__box {
  position: relative;
  display: block;
  width: var(--icon-size);
  height: var(--icon-size);
}

.nav-toggle__inner,
.nav-toggle__inner::before,
.nav-toggle__inner::after {
  position: absolute;
  display: block;
  width: calc(var(--icon-size) * 2 / 3);
  height: calc(var(--icon-size) / 16);
  border-radius: calc(var(--icon-size) / 32);
  background-color: currentColor;
}

.nav-toggle__inner {
  top: 50%;
  left: calc(var(--icon-size) / 6);
  margin-top: calc(var(--icon-size) / -32);
}

.nav-toggle__inner::before,
.nav-toggle__inner::after {
  content: "";
  left: 0;
}

.nav-toggle__inner::before {
  top: calc(var(--icon-size) * -7 / 24);
}

.nav-toggle__inner::after {
  bottom: calc(var(--icon-size) * -7 / 24);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__inner {
  transform: rotate(225deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__inner::before {
  top: 0;
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__inner::after {
  bottom: 0;
  transform: rotate(-90deg);
}

/* Alleen beweging als de bezoeker dat niet heeft uitgezet. Anders wisselt de knop direct, zonder wachttijd. */
@media (prefers-reduced-motion: no-preference) {
  /* Sluiten: eerst draait het kruis terug, daarna schuiven de lijnen uit elkaar */
  .nav-toggle__inner {
    transition: transform var(--duration) var(--ease-in);
  }

  .nav-toggle__inner::before {
    transition:
      top calc(var(--duration) / 2) var(--ease-in) calc(var(--duration) * 1.25),
      opacity calc(var(--duration) / 2) var(--ease-in);
  }

  .nav-toggle__inner::after {
    transition:
      bottom calc(var(--duration) / 2) var(--ease-in) calc(var(--duration) * 1.25),
      transform var(--duration) var(--ease-in);
  }

  /* Openen: eerst schuiven de lijnen naar het midden, daarna draait het geheel naar een kruis */
  .nav-toggle[aria-expanded="true"] .nav-toggle__inner {
    transition: transform var(--duration) var(--ease) calc(var(--duration) / 2);
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle__inner::before {
    transition:
      top calc(var(--duration) / 2) var(--ease),
      opacity calc(var(--duration) / 2) var(--ease) calc(var(--duration) / 2);
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle__inner::after {
    transition:
      bottom calc(var(--duration) / 2) var(--ease),
      transform var(--duration) var(--ease) calc(var(--duration) / 2);
  }
}

/* Mobiel menu (DR-022): open vult het het hele scherm. De header wordt dan fixed over het scherm, dus logo en
   sluitknop blijven bovenaan staan en de pagina eronder scrollt niet mee. Geen lijnen: niet onder de header,
   niet tussen de links. js/components.js sluit het menu na een klik op een link en maakt de pagina erachter inert. */
.mobile-nav {
  background: var(--color-bg);
  padding-block: var(--space-4) var(--space-6);
}

@media (width < 64rem) {
  .site-header:has(.mobile-nav:not([hidden])) {
    position: fixed;
    inset: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-bottom-color: transparent;
  }

  html:has(.site-header .mobile-nav:not([hidden])) {
    overflow: hidden;
  }
}

.mobile-nav__list {
  display: flex;
  flex-direction: column;
  padding: 0;
  margin-bottom: var(--space-5);
  list-style: none;
}

.mobile-nav__list a {
  display: flex;
  align-items: center;
  min-height: 3.25rem;
  font-family: var(--font-heading);
  font-size: var(--text-body-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-heading);
  text-decoration: none;
}

/* De pagina waar je bent: onderstreept, net als in het menu op desktop (.site-nav__link) */
.mobile-nav__list a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: var(--border-width-strong);
  text-underline-offset: 0.4em;
}

@media (min-width: 64rem) {
  .site-nav,
  .site-header__cta {
    display: flex;
  }

  .nav-toggle,
  .mobile-nav {
    display: none !important;
  }

  /* Vijf links (met "Voor makelaars") passen vanaf 1024px naast het lange logo en de knop. Het logo krimpt nooit:
     lang logo minstens 200px breed (DR-030). Daarom tot 80rem minder ruimte tussen de links en rond het menu. */
  .site-header__inner > .logo {
    flex-shrink: 0;
  }

  .site-header__inner {
    gap: var(--space-4);
  }

  .site-nav__list {
    gap: var(--space-3);
  }
}

@media (min-width: 72rem) {
  .site-nav__list {
    gap: var(--space-5);
  }
}

@media (min-width: 80rem) {
  .site-header__inner {
    gap: var(--space-6);
  }

  .site-nav__list {
    gap: var(--space-6);
  }
}

/* Header zonder menu (.site-header--focus): op een pagina waar de makelaar één ding afmaakt, zoals de aanvraag.
   Logo links en rechts één link terug. Geen menu, geen knop en geen menuknop, op elke breedte. */
.site-header__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-target);
  font-family: var(--font-heading);
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
  color: var(--color-heading);
  text-decoration: none;
}

.site-header__back:hover {
  color: var(--color-heading);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.4em;
}

.site-header__back .icon {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
}

/* ---------- Footer ---------- */
.site-footer {
  padding-block: var(--space-10) var(--space-6);
}

.site-footer__grid {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  padding-bottom: var(--space-8);
  border-bottom: var(--border-width) solid var(--color-border);
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 22rem;
}

.site-footer__title {
  margin-bottom: var(--space-4);
  font-family: var(--font-heading);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-eyebrow);
}

.site-footer__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 0;
  list-style: none;
}

.site-footer__list a {
  color: var(--color-link); /* DR-013: op groen wit, nooit beige */
  text-decoration: none;
}

.site-footer__list a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-5);
  font-size: var(--text-body-sm);
  color: var(--color-text-muted);
}

/* Klein (.site-footer--compact): alleen de onderregel met logo, copyright en privacy. Hoort bij de header zonder
   menu (.site-header--focus), op pagina's zonder afleiding zoals de aanvraag. Mobiel onder elkaar, vanaf 48rem op één regel. */
.site-footer--compact {
  padding-block: var(--space-7);
}

.site-footer--compact .site-footer__bottom {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding-top: 0;
}

@media (min-width: 48rem) {
  .site-footer--compact .site-footer__bottom {
    flex-direction: row;
    align-items: center;
    gap: var(--space-6);
  }

  .site-footer--compact .site-footer__bottom > :first-child {
    margin-inline-end: auto;
  }
}

/* Met aanvraag (.site-footer--cta): eerst een grote zin en één witte knop naar het aanvraagformulier,
   daaronder de kolommen. Altijd met .surface-dark. Geen invoervelden op bosgroen (DR-017).
   Alles hangt onder .site-footer--cta, zodat de gewone .site-footer niet verandert. */
.site-footer--cta {
  padding-block: var(--section-padding) var(--section-padding-sm);
}

/* Kop, daaronder (vanaf 64rem ernaast) de uitleg en de knop */
.site-footer__cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  padding-bottom: var(--section-padding);
}

.site-footer__cta p {
  text-wrap: balance;
}

/* Pijl in de knop schuift een klein stukje mee bij hover */
@media (prefers-reduced-motion: no-preference) {
  .site-footer__cta .btn .icon {
    transition: transform var(--duration) var(--ease);
  }

  .site-footer__cta .btn:hover .icon {
    transform: translateX(var(--space-1));
  }
}

/* Mobiel: merk en contact over de hele breedte, de twee linklijsten naast elkaar */
.site-footer--cta .site-footer__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8) var(--space-5);
  padding-block: var(--section-padding-sm);
  border-top: var(--border-width) solid var(--color-border);
}

.site-footer--cta .site-footer__brand,
.site-footer--cta .site-footer__grid > :last-child {
  grid-column: 1 / -1;
}

.site-footer--cta .site-footer__brand p {
  text-wrap: balance;
}

/* Kolomtitels zijn h3: de kop in de CTA is de enige h2 in de footer.
   De kleur komt uit .site-footer__title (--color-eyebrow, op .surface-dark wit, DR-014). */
.site-footer--cta .site-footer__title {
  margin-bottom: var(--space-2);
}

/* Elke regel en elke link is minstens zo hoog als --tap-target */
.site-footer--cta .site-footer__list {
  gap: 0;
}

.site-footer--cta .site-footer__list > li,
.site-footer--cta .site-footer__list a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap-target);
}

.site-footer--cta .site-footer__list a {
  display: inline-flex;
}

/* Contactregel met icoon (telefoon, e-mail, werkgebied). Het icoon is wit zoals links (DR-013, DR-014).
   Loopt de tekst over twee regels, dan blijft het icoon bij de eerste regel. */
.site-footer--cta .site-footer__list > li:has(> .icon) {
  align-items: flex-start;
  padding-block: calc((var(--tap-target) - var(--leading-body) * 1em) / 2);
}

.site-footer--cta .site-footer__list .icon {
  margin-block-start: calc((var(--leading-body) * 1em - var(--icon-size-sm)) / 2);
  color: var(--color-link);
}

.site-footer--cta .site-footer__list a .icon {
  margin-block-start: 0;
}

/* Onderregel. Mobiel onder elkaar, zodat KvK en privacyverklaring niet tegen elkaar aan staan. */
.site-footer--cta .site-footer__bottom {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

@media (min-width: 48rem) {
  /* Merk over de hele breedte, daaronder drie kolommen. Contact is nooit smaller dan 15rem. */
  .site-footer--cta .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(15rem, 1fr);
  }

  .site-footer--cta .site-footer__grid > :last-child {
    grid-column: auto;
  }

  /* Onderregel: copyright links, privacyverklaring rechts */
  .site-footer--cta .site-footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
  }
}

@media (min-width: 64rem) {
  /* CTA en kolommen delen één raster: uitleg en knop beginnen precies waar "Meer weten" begint */
  .site-footer__cta,
  .site-footer--cta .site-footer__grid {
    grid-template-columns: minmax(0, 1.8fr) repeat(2, minmax(0, 1fr)) minmax(15rem, 1fr);
    column-gap: var(--space-6);
  }

  /* Kop en uitleg beginnen op dezelfde bovenlijn */
  .site-footer__cta {
    align-items: start;
  }

  .site-footer__cta > :first-child {
    grid-column: 1 / 3;
  }

  .site-footer__cta > :last-child {
    grid-column: 3 / -1;
  }

  .site-footer--cta .site-footer__brand {
    grid-column: auto;
  }
}

/* ---------- CTA-blok ---------- */
.cta-block {
  display: grid;
  gap: var(--space-6);
  align-items: end;
}

@media (min-width: 64rem) {
  .cta-block {
    grid-template-columns: 1.4fr 1fr;
    gap: var(--gap-split);
  }

  .cta-block .actions {
    justify-content: flex-end;
  }
}

.cta-block__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: var(--measure);
}

/* ---------- Review ---------- */
/* Elke review heeft dezelfde opbouw, in elke variant:
   icoon (.quote__icon), blockquote met <p class="quote__text">, figcaption (.quote__author) met .quote__name en .quote__role.
   De variant bepaalt de maat van .quote__text: standaard op kopmaat (één grote review),
   --card als grote leestekst, --compact als kleine leestekst. Zet geen .type-klasse op de reviewtekst. */
.quote {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 48rem;
}

.quote__icon {
  width: 2rem;
  height: 2rem;
  color: var(--color-eyebrow);
}

.quote__text {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: var(--font-weight-medium);
  line-height: 1.35;
  letter-spacing: var(--tracking-heading);
  color: var(--color-heading);
  text-wrap: pretty;
}

.quote__author {
  display: flex;
  flex-direction: column;
  font-style: normal;
}

.quote__name {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  color: var(--color-heading);
}

.quote__role {
  font-size: var(--text-body-sm);
  color: var(--color-text-muted);
}

/* Naam en kantoor op één regel, met een komma ertussen: "Naam, Kantoor". Voor --compact en --card. */
.quote--compact .quote__name:not(:last-child)::after,
.quote--card .quote__name:not(:last-child)::after {
  content: ",";
}

/* Compact (.quote--compact): één rustige regel onder een dunne lijn, als bewijs na kop, tekst en knop.
   Icoon, reviewtekst, naam en kantoor lopen door als één alinea op de maat van .type-body-sm.
   Past het niet op één regel, dan loopt de tekst verder onder de tekst, niet onder het icoon.
   Zonder vlak achter het icoon, zonder foto en zonder sterren. */
.quote--compact {
  position: relative;
  display: block;
  max-width: none;
  padding-top: var(--space-5);
  padding-inline-start: calc(var(--icon-size-sm) + var(--space-3));
  border-top: var(--border-width) solid var(--color-border);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body);
}

.quote--compact .quote__icon {
  position: absolute;
  top: var(--space-5);
  inset-inline-start: 0;
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  color: var(--color-heading);
}

.quote--compact blockquote,
.quote--compact .quote__text,
.quote--compact .quote__author {
  display: inline;
}

.quote--compact .quote__text {
  font: inherit;
  letter-spacing: normal;
}

.quote--compact .quote__author {
  margin-inline-start: var(--space-2);
}

.quote--compact .quote__role {
  font-size: inherit;
}

/* Kaart (.quote--card): een .quote in een wit vlak. Zet .surface-white op de kaart, dan klopt hij op linnen en op groen.
   Bovenaan het quote-icoon in een olijf tegel, eventueel met een badge van de dienst waar de review over gaat.
   .quote__text is hier grote leestekst, zodat de kaart rustig blijft naast de sectiekop.
   Naam en kantoor staan onderaan onder een dunne lijn. */
.quote--card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr auto;
  align-items: start;
  gap: var(--space-5) var(--space-4);
  width: 100%;
  max-width: none;
  padding: var(--space-5);
}

.quote--card > * {
  grid-column: 1 / -1;
}

.quote--card .quote__icon {
  grid-column: 1;
  width: var(--space-8);
  height: var(--space-8);
  padding: var(--space-3);
  background-color: var(--color-action);
  color: var(--color-action-text);
}

.quote--card .badge {
  grid-column: 2;
  align-self: center;
}

.quote--card .quote__text {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-body-lg);
  letter-spacing: normal;
}

.quote--card .quote__author {
  display: block;
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--color-border);
  font-size: var(--text-body-sm);
}

@media (min-width: 64rem) {
  .quote--card {
    padding: var(--space-7);
  }
}

/* ---------- Reviewrij ---------- */
/* Twee kolommen met dezelfde maat en tussenruimte als .split, zodat alles in de sectie
   op dezelfde lijnen staat. Mobiel onder elkaar, vanaf 48rem naast elkaar. */
.review-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-grid);
  padding: 0;
  list-style: none;
}

.review-grid > li {
  display: flex;
}

@media (min-width: 48rem) {
  .review-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap-split);
  }
}

/* --scroll: mobiel een rij om zijwaarts te vegen, de volgende kaart piept rechts in beeld.
   De rij loopt door tot de schermrand en scrollt alleen binnen zichzelf.
   Zet tabindex="0" en een aria-label op de lijst, dan werkt hij ook met het toetsenbord. */
@media (width < 48rem) {
  /* Dubbele klasse: base.css zet padding: 0 op ul[role="list"] */
  .review-grid.review-grid--scroll {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(calc(100% - var(--space-7)), 24rem);
    margin-inline: calc(-1 * var(--page-padding));
    padding-inline: var(--page-padding);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--page-padding);
  }

  .review-grid--scroll > li {
    scroll-snap-align: start;
  }

  /* De rij is even breed als het scherm: focusring binnen de rand, anders valt hij weg */
  .review-grid--scroll:focus-visible {
    outline-offset: calc(-1 * var(--border-width-strong));
  }
}

/* --faq: de sectie met vragen, een foto en één reviewkaart.
   In de HTML eerst .review-grid__body (sectiekop, vragen en knop), dan .review-grid__aside met de foto
   (.review-grid__media) en de kaart (.quote.quote--card.surface-white met .review-grid__quote).
   Onder 64rem één kolom zonder foto: kop, vragen, knop, dan de kaart over de volle breedte.
   Vanaf 64rem: foto links, even hoog als de kolom rechts, met de bovenkant gelijk aan de kop. De kaart zweeft over
   de onderrand van de foto, net als de kaart op de grote foto (.media-overlay): foto en review zijn samen één beeld.
   Staat er een reviewrij boven (twee echte reviews), dan is de ruimte erboven groter dan onder de sectiekop. */
.review-grid--faq {
  row-gap: var(--space-9);
}

.review-grid + .review-grid--faq {
  margin-top: var(--space-10);
}

@media (min-width: 48rem) {
  .review-grid--faq {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 64rem) {
  .review-grid--faq {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .review-grid + .review-grid--faq {
    margin-top: var(--space-11);
  }

  .review-grid--faq > .review-grid__aside {
    grid-column: 1;
    grid-row: 1;
  }

  .review-grid--faq > .review-grid__body {
    grid-column: 2;
    grid-row: 1;
  }
}

/* Foto en kaart */
.review-grid__aside {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Foto: pas vanaf 64rem. Hij vult de hoogte van de kolom, ook als er een vraag openklapt. */
.review-grid__media {
  display: none;
}

.review-grid__media img {
  object-position: 50% 35%;
}

/* Een zwevende kaart (.float-card--lg, zoals de belkaart op voor-makelaars.html) in plaats van de reviewkaart:
   onder 64rem valt de foto weg, dan staat de kaart over de volle breedte van de kolom en even breed als de
   vragen (.faq), niet op max-content links met een leeg vlak ernaast. */
@media (width < 64rem) {
  .float-card.review-grid__quote {
    width: auto;
    max-width: 52rem;
  }

  /* Reviewkaart verborgen (DR-071) en de foto staat onder 64rem niet in beeld: dan is de hele kolom weg, anders
     blijft de row-gap als lege ruimte onder de vragen staan. */
  .review-grid--faq > .review-grid__aside:has(> .review-grid__quote[hidden]) {
    display: none;
  }
}

@media (min-width: 64rem) {
  .review-grid__media {
    display: block;
    flex: 1 1 auto;
    min-height: 24rem;
  }

  /* Over de onderrand van de foto, binnen de breedte van de foto */
  .review-grid__quote {
    position: relative;
    width: auto;
    margin: calc(-1 * var(--space-11)) var(--space-7) 0;
  }
}

/* Kolom met de sectiekop (.section-head--flush), de vragen en de knop, als .stack.stack--lg.
   Onder de kop iets meer ruimte dan tussen de vragen en de knop, zodat de kop bij de hele kolom hoort. */
.review-grid__body > .section-head {
  margin-bottom: var(--space-5);
}

/* Hulpregel met knop onder de vragen: iets meer lucht tussen tekst en knop */
.review-grid__body > .cluster {
  --cluster-gap: var(--space-4) var(--space-6);
}

/* ---------- FAQ ---------- */
.faq {
  border-top: var(--border-width) solid var(--color-border);
  max-width: 52rem;
}

.faq__item {
  border-bottom: var(--border-width) solid var(--color-border);
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 4rem;
  padding-block: var(--space-4);
  font-family: var(--font-heading);
  font-size: var(--text-body-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-heading);
  cursor: pointer;
  list-style: none;
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__question::after {
  content: "";
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--duration) var(--ease);
}

.faq__item[open] .faq__question::after {
  transform: rotate(180deg);
}

.faq__answer {
  padding-bottom: var(--space-5);
  max-width: var(--measure);
  color: var(--color-text);
}

/* ---------- FAQ-navigatie (DR-070) ----------
   Kaarten bovenaan veelgestelde-vragen.html die naar een categorie op dezelfde pagina springen (#cat-...).
   HTML: ul.faq-nav (role="list") met per categorie li > a.faq-nav__card: een Lucide-icoon (.icon .icon--lg
   .faq-nav__icon, aria-hidden), de naam (.faq-nav__title .type-h4) en het echte aantal (.faq-nav__count
   .type-body-sm .text-muted, "5 vragen"). De hele kaart is de link.
   Op wit zijn de kaarten linnen, op .surface-warm wit met een rand. Het icoon is olijf, zonder vlak (DR-038).
   Niet op olijf of bosgroen.
   Raster: 2 kolommen op mobiel, 3 vanaf 48rem, 4 vanaf 64rem. Typografie komt uit de .type-*-klassen in de HTML.
   De sticky header houdt zelf ruimte vrij boven de categorie (scroll-padding-top op <html>). */
.faq-nav {
  --faq-nav-card: var(--color-surface-warm);
  --faq-nav-border: var(--color-surface-warm);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-grid);
  padding: 0;
  list-style: none;
}

.surface-warm .faq-nav {
  --faq-nav-card: var(--wit);
  --faq-nav-border: var(--color-border);
}

.faq-nav > li {
  display: flex;
}

.faq-nav__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  min-height: 100%;
  padding: var(--space-4);
  border: var(--border-width) solid var(--faq-nav-border);
  border-radius: var(--radius);
  background: var(--faq-nav-card);
  color: var(--color-text);
  text-decoration: none;
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.faq-nav__icon {
  margin-bottom: var(--space-2);
  color: var(--olijf-600);
}

/* Lange namen ("Meetrapport en plattegrond") breken tussen de woorden in een smalle kolom op 390px.
   Geen hyphens: auto, dan zet text-wrap: balance (.type-h4) een afbreekstreepje in "Meetrapport". */
.faq-nav__title {
  overflow-wrap: break-word;
}

/* Het aantal staat onderaan, zodat de aantallen in een rij op één lijn staan */
.faq-nav__count {
  margin-top: auto;
}

.faq-nav__card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-raised);
}

.faq-nav__card:hover .faq-nav__title {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Focusring zoals de rest (base.css), om de hele kaart */
.faq-nav__card:focus-visible {
  outline: var(--border-width-strong) solid var(--color-focus);
  outline-offset: 0.1875rem;
}

@media (min-width: 48rem) {
  .faq-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .faq-nav__card {
    padding: var(--space-5);
  }
}

@media (min-width: 64rem) {
  .faq-nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---------- Tabel ---------- */
/* position: relative houdt tekst met .visually-hidden in de tabel (zoals de klasse voluit in de kop van de
   prijstabel, DR-044) binnen het scrollvlak. Anders schuift de hele pagina op een telefoon opzij. */
.table-wrap {
  position: relative;
  width: 100%;
  overflow-x: auto;
  border: var(--border-width) solid var(--color-border);
}

.table {
  width: 100%;
  min-width: 36rem;
  font-size: var(--text-body);
}

.table caption {
  padding: var(--space-4) var(--space-5);
  text-align: left;
  font-size: var(--text-body-sm);
  color: var(--color-text-muted);
  caption-side: bottom;
  border-top: var(--border-width) solid var(--color-border);
}

.table th,
.table td {
  padding: var(--space-4) var(--space-5);
  text-align: left;
  vertical-align: top;
  border-bottom: var(--border-width) solid var(--color-border);
}

.table thead th {
  background: var(--color-surface-warm);
  font-family: var(--font-heading);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--neutraal-900);
}

/* Op linnen (.surface-warm) valt een linnen kop weg tegen de achtergrond. Daar is de kop olijf met witte tekst,
   en de rijen wit, zodat de tabel een duidelijk blok is (DR-037). */
.surface-warm .table thead th {
  background: var(--color-surface-brand);
  color: var(--wit);
}

.surface-warm .table tbody {
  background: var(--wit);
}

.table tbody tr:last-child th,
.table tbody tr:last-child td {
  border-bottom: 0;
}

.table tbody th {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
}

/* Omschrijving onder de naam in een rijkop, zoals in de prijstabel (DR-044). De rijkop is Montserrat semibold;
   deze regel zet de gewone tekstletter terug. */
.table__sub {
  display: block;
  margin-top: var(--space-1);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-muted);
}

.table .num {
  text-align: right;
  white-space: nowrap;
}

/* Bedragen in de cellen staan in Google Sans Flex: tabular-nums zet ze netjes onder elkaar.
   Een kop staat in Montserrat: daar gewone cijfers, anders krijgt de 1 een voetje (DR-040, DR-044). */
.table td.num {
  font-variant-numeric: tabular-nums;
}

.table th.num {
  font-variant-numeric: lining-nums proportional-nums;
}

/* Telefoon en tablet (onder 64rem): minder ruimte links en rechts in cellen en caption (DR-044). Zo past de
   prijstabel op een tablet van 768px helemaal, zonder half afgekapt bedrag in de laatste kolom, en scrol je op een
   telefoon minder binnen de .table-wrap. De caption krijgt dezelfde ruimte, zodat hij gelijk staat met de cellen.
   Niet voor .table--invoer: die houdt zijn eigen padding (DR-046). */
@media (max-width: 63.99rem) {
  .table:not(.table--invoer) th,
  .table:not(.table--invoer) td,
  .table:not(.table--invoer) caption {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }
}

/* Tabel met invoervelden (DR-046). Alleen voor beheer (beheer/prijzen.html), nooit op een klantpagina.
   Velden staan in Google Sans Flex, dus tabular-nums mag hier (DR-040 gaat over Montserrat).
   De tabel is breder dan een telefoon: de .table-wrap eromheen scrollt zelf. */
.table--invoer {
  min-width: 56rem;
}

.table--invoer th,
.table--invoer td {
  padding: var(--space-3) var(--space-4);
  vertical-align: middle;
}

.table--invoer .num .input {
  min-width: 6.5rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.table--invoer .select {
  min-width: 11.5rem; /* ruim genoeg voor "2D" of "3D" naast het pijltje, en de kolom verspringt niet */
}

/* .num zet nowrap: een foutmelding onder een bedrag mag wel over meer regels */
.table--invoer .field__error {
  white-space: normal;
  text-align: left;
}

.table--invoer .choice {
  padding-block: 0;
  align-items: center;
}

/* De inhoud van een pakket onder de naam */
.table--invoer tbody th .type-body-sm {
  font-weight: var(--font-weight-regular);
  color: var(--color-text-muted);
}

/* ---------- Melding ---------- */
.alert {
  --alert-fg: var(--info-600);
  --alert-bg: var(--info-50);
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-4) var(--space-5);
  border: var(--border-width) solid var(--alert-fg);
  background: var(--alert-bg);
  color: var(--neutraal-900);
}

.alert .icon {
  color: var(--alert-fg);
}

.alert__title {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  color: var(--alert-fg);
}

.alert--succes { --alert-fg: var(--succes-600); --alert-bg: var(--succes-50); }
.alert--waarschuwing { --alert-fg: var(--waarschuwing-600); --alert-bg: var(--waarschuwing-50); }
.alert--fout { --alert-fg: var(--fout-600); --alert-bg: var(--fout-50); }

/* ---------- 3D-scan viewer ---------- */
.scan-viewer {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.scan-viewer__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: 100%;
  overflow: hidden;
  background: var(--bosgroen);
  color: var(--wit);
}

.scan-viewer__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.scan-viewer__poster {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-5);
  text-align: center;
  background-image:
    linear-gradient(rgb(255 255 255 / 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.06) 1px, transparent 1px);
  background-size: 2rem 2rem;
}

/* Alleen het grote icoon in de poster, niet een icoon in een knop */
.scan-viewer__poster > .icon {
  width: 3rem;
  height: 3rem;
  color: var(--olijf-300);
}

.scan-viewer__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  font-size: var(--text-body-sm);
  color: var(--color-text-muted);
}

.scan-viewer__meta span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* Met foto (.scan-viewer--photo): een foto als poster, met een effen olijf kaart erop.
   Nieuw is alleen .scan-viewer__image. De bestaande onderdelen houden hun rol:
   __frame  = het kader. Het houdt foto en kaart bij elkaar en groeit mee met de inhoud.
   __poster = wat je ziet voordat de scan laadt: hier een olijf kaart (.surface-brand) met eyebrow, kop en knoppen.
              De hoofdactie is daar de zwarte knop (.btn--dark): de kaart is olijf, en zo wisselt hij af met een
              olijf sectie met witte knop erboven (DR-012).
   __meta   = de punten onder het kader.
   __slides = de huizen in de foto, één dia per huis (DR-043).
   __controls = rechtsonder: de knop "Bekijk 3D-tour" (__tour, DR-042) en de pijlen (__nav, DR-043).
   Mobiel en tablet staat de kaart direct onder de foto: samen één poster. Vanaf 64rem is het kader een raster
   van 12 kolommen: de foto staat in kolom 5 tot het einde, de kaart in kolom 1 tot 7 en ligt over de linkerrand van de foto.
   Gebruik binnen .surface-dark of .surface-brand: de zoekerhoeken en (op olijf) de kaart nemen --color-bg van de sectie over. */
.scan-viewer--photo {
  gap: var(--space-6);
}

/* De maat komt van de foto (en op desktop ook van de kaart), niet van een vaste 16:9 */
.scan-viewer--photo .scan-viewer__frame {
  display: grid;
  aspect-ratio: auto;
}

.scan-viewer__image {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--color-placeholder-bg);
}

.scan-viewer__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 84%;
}

/* Zoekerhoeken in de kleur van de sectie: vier hoeken van twee streepjes elk */
.scan-viewer__image::after {
  content: "";
  position: absolute;
  inset: var(--space-4);
  pointer-events: none;
  background-image:
    linear-gradient(var(--color-bg), var(--color-bg)),
    linear-gradient(var(--color-bg), var(--color-bg)),
    linear-gradient(var(--color-bg), var(--color-bg)),
    linear-gradient(var(--color-bg), var(--color-bg)),
    linear-gradient(var(--color-bg), var(--color-bg)),
    linear-gradient(var(--color-bg), var(--color-bg)),
    linear-gradient(var(--color-bg), var(--color-bg)),
    linear-gradient(var(--color-bg), var(--color-bg));
  background-position:
    left top, left top,
    right top, right top,
    right bottom, right bottom,
    left bottom, left bottom;
  background-size:
    var(--space-5) var(--border-width-strong), var(--border-width-strong) var(--space-5),
    var(--space-5) var(--border-width-strong), var(--border-width-strong) var(--space-5),
    var(--space-5) var(--border-width-strong), var(--border-width-strong) var(--space-5),
    var(--space-5) var(--border-width-strong), var(--border-width-strong) var(--space-5);
  background-repeat: no-repeat;
}

/* Slider met huizen (DR-043): elke dia is een ander huis met een eigen foto en een eigen 3D-tour (data-tour).
   De dia's liggen naast elkaar in een lijst met scroll-snap: op mobiel veeg je, met de pijlen schuift hij één huis
   verder. Zonder script kun je nog steeds vegen of scrollen; de pijlen en de teller komen pas als het script klaar is.
   Geen autoplay. De foto-regels van .scan-viewer__image img gelden voor elke dia. */
.scan-viewer__slides {
  position: absolute;
  inset: 0;
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.scan-viewer__slides::-webkit-scrollbar {
  display: none;
}

.scan-viewer__slide {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: start;
}

@media (prefers-reduced-motion: no-preference) {
  .scan-viewer__slides {
    scroll-behavior: smooth;
  }
}

/* Onder op de foto, binnen de zoekerhoeken (--space-3 verder naar binnen dan de hoeken), uit elkaar:
   links de pijlen, rechts de knop "Bekijk 3D-tour". Pijlen nooit in de knop en niet in een wit vlak (DR-043). */
.scan-viewer__controls {
  --tour-inset: calc(var(--space-4) + var(--space-3));
  position: absolute;
  z-index: 2;
  right: var(--tour-inset);
  bottom: var(--tour-inset);
  left: var(--tour-inset);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

/* Knop "Bekijk 3D-tour" (DR-042): hoekig wit vlak, bosgroene tekst, play-icoon erachter.
   Hij neemt de link over van de dia die in beeld is en opent in een nieuw tabblad. */
.scan-viewer__tour {
  display: inline-flex;
  margin-left: auto; /* blijft rechts, ook als de pijlen er niet zijn */
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-target);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  background-color: var(--wit);
  color: var(--bosgroen);
  font-family: var(--font-heading);
  font-size: var(--text-body);
  font-weight: var(--font-weight-button);
  line-height: var(--leading-body);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--duration-fast) var(--ease);
}

.scan-viewer__tour:hover {
  background-color: var(--olijf-50);
  color: var(--bosgroen);
  text-decoration: none;
}

.scan-viewer__tour:active {
  transform: translateY(1px);
}

/* Pijlen los op de foto, zonder vlak eromheen: alleen de twee olijf cirkels */
.scan-viewer__nav {
  display: none;
  align-items: center;
  gap: var(--space-1);
}

[data-scan-slider="klaar"] .scan-viewer__nav {
  display: flex;
}

/* Teller "1 / 3": alleen voor schermlezers. Losse tekst op de foto is niet goed te lezen */
.scan-viewer__count {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Pijl: raakvlak van 44px, zichtbaar een olijf cirkel met wit icoon (zelfde cirkel als in .process, DR-040) */
.scan-viewer__arrow {
  display: grid;
  place-items: center;
  width: var(--tap-target);
  height: var(--tap-target);
  padding: var(--space-1);
  border: 0;
  border-radius: var(--radius-circle);
  background-color: var(--olijf-500);
  background-clip: content-box;
  color: var(--wit);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease);
}

.scan-viewer__arrow:hover {
  background-color: var(--olijf-600);
}

.scan-viewer__arrow .icon {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
}

/* Over een lichte foto valt een witte ring weg: donkere ring met een wit randje ertussen */
.scan-viewer__tour:focus-visible,
.scan-viewer__arrow:focus-visible {
  outline-color: var(--bosgroen);
  outline-offset: var(--space-1);
  box-shadow: 0 0 0 var(--space-1) var(--wit);
}

/* Kaart: mobiel en tablet een olijf blok direct onder de foto, even breed.
   Tekst en acties staan elk in een eigen stapel; --space-5 ertussen. */
.scan-viewer--photo .scan-viewer__poster {
  position: relative;
  inset: auto;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--space-5);
  padding: var(--space-6) var(--space-5);
  background: var(--bosgroen);
  text-align: start;
}

/* In een olijf sectie (.surface-brand) zijn kader en kaart ook olijf: één vlak in de kleur van de header (DR-025) */
.surface-brand .scan-viewer--photo .scan-viewer__frame,
.surface-brand .scan-viewer--photo .scan-viewer__poster {
  background: var(--color-bg);
}

/* Wat de makelaar krijgt: icoon naast kop en zin, op elke breedte. Onder elkaar tot 64rem. */
.scan-viewer--photo .scan-viewer__meta {
  gap: var(--space-4) var(--gap-grid);
}

.scan-viewer--photo .scan-viewer__meta li {
  display: grid;
  flex: 1 1 100%;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: start;
  gap: var(--space-1) var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--color-border);
}

.scan-viewer--photo .scan-viewer__meta .icon {
  grid-row: span 2;
  color: var(--color-eyebrow);
}

/* Tablet: liggende foto met het hele statief, meer lucht. Punten blijven onder elkaar. */
@media (min-width: 48rem) {
  .scan-viewer--photo {
    gap: var(--space-7);
  }

  .scan-viewer__image {
    aspect-ratio: 4 / 3;
  }

  .scan-viewer__image img {
    object-position: 50% 62%;
  }

  .scan-viewer__image::after {
    inset: var(--space-5);
  }

  .scan-viewer__controls {
    --tour-inset: calc(var(--space-5) + var(--space-3));
  }

  .scan-viewer__tour {
    padding-inline: var(--space-4);
  }

  .scan-viewer--photo .scan-viewer__poster {
    padding: var(--space-7);
  }

  .scan-viewer--photo .scan-viewer__meta li {
    padding-top: var(--space-5);
  }
}

/* Desktop: kader van 12 kolommen. De foto (4:3) staat in kolom 5 tot het einde en wordt dus hooguit
   ongeveer 850px breed: een staande foto van 1066px hoeft dan niet vergroot te worden.
   De kaart staat in kolom 1 tot 7, in het midden van de hoogte, en ligt twee kolommen over de foto.
   De zoekerhoeken staan op --space-6 van de rand en zijn --space-6 lang (samen --space-9). Is de kaart hoog,
   dan houdt margin-block: --space-9 de rij zo hoog dat de hoeken aan de linkerkant vrij blijven; de foto rekt dan mee. */
@media (min-width: 64rem) {
  .scan-viewer--photo {
    gap: var(--space-8);
  }

  .scan-viewer--photo .scan-viewer__frame {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap-grid);
  }

  .scan-viewer__image {
    grid-area: 1 / 5 / 2 / -1;
    align-self: stretch;
  }

  .scan-viewer__image img {
    object-position: 50% 60%;
  }

  .scan-viewer__image::after {
    inset: var(--space-6);
    background-size:
      var(--space-6) var(--border-width-strong), var(--border-width-strong) var(--space-6),
      var(--space-6) var(--border-width-strong), var(--border-width-strong) var(--space-6),
      var(--space-6) var(--border-width-strong), var(--border-width-strong) var(--space-6),
      var(--space-6) var(--border-width-strong), var(--border-width-strong) var(--space-6);
  }

  .scan-viewer__controls {
    --tour-inset: calc(var(--space-6) + var(--space-3));
  }

  /* Desktop: geen pijlen (DR-043). Alleen de knop staat rechtsonder; vegen met een trackpad en de pijltoetsen werken nog */
  [data-scan-slider="klaar"] .scan-viewer__nav {
    display: none;
  }

  .scan-viewer__tour {
    min-height: var(--space-8);
  }

  .scan-viewer--photo .scan-viewer__poster {
    grid-area: 1 / 1 / 2 / 7;
    align-self: center;
    margin-block: var(--space-9);
    padding: var(--space-6);
  }

  /* Punten in drie gelijke kolommen */
  .scan-viewer--photo .scan-viewer__meta li {
    flex-basis: 0;
    min-width: 0;
  }
}

/* Groot scherm: meer lucht in de kaart */
@media (min-width: 90rem) {
  .scan-viewer--photo .scan-viewer__poster {
    padding: var(--space-7);
  }
}

/* ---------- Proces-kaarten (DR-031) ---------- */
/* Een echte volgorde van 3 of 4 stappen: 01, 02, 03. Linnen kaart met een vet olijf nummer, een kop (.type-h4 in
   de HTML) en één zin, alleen gescheiden door ruimte (geen stippellijn, DR-040). Tussen de kaarten een pijl in een
   olijf cirkel met een wit icoon (DR-040).
   Alles gaat op de breedte van de ruimte om de lijst (container query), niet van het scherm:
     smaller dan 36rem (576)   onder elkaar, de pijl wijst omlaag;
     vanaf 36rem               tablet: 4 stappen als 2 x 2; 3 stappen onder elkaar als liggende kaarten (nummer
                               links, kop en zin rechts), de pijl omlaag. Geen lange toren en geen leeg vlak;
     vanaf 56rem (896)         3 stappen naast elkaar, even hoog, de pijl wijst naar rechts;
     vanaf 62rem (992)         4 stappen naast elkaar.
   De pijl staat in de kaart ervoor (aria-hidden) en schuift naar het midden van de ruimte ertussen.
   Zo blijft de lijst een gewone <ol> met alleen stappen, ook voor een schermlezer.
   Op wit zijn de kaarten linnen, op .surface-warm wit. Niet op olijf of bosgroen. */
.process {
  --process-gap: var(--space-9);   /* 64: pijlvlak van 40 met 12 lucht boven en onder */
  --process-arrow: var(--space-7);
  --process-card: var(--color-surface-warm);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--process-gap);
  padding: 0;
  list-style: none;
}

.surface-warm .process {
  --process-card: var(--wit);
}

.process__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5); /* rondom 24, bij 3 en 4 stappen en ook onder elkaar: net als de dienstkaarten */
  border-radius: var(--radius);
  background-color: var(--process-card);
  color: var(--neutraal-900);
}

/* Het nummer wijst de volgorde, de kop is het focuspunt. Het nummer is vet (700) maar op --text-h2, niet groter:
   zo heeft het body zonder de kop te overstemmen (DR-040). Gewone cijfers: met tabular-nums krijgt de 1 van
   Montserrat een voetje en lijkt "01" op een typemachine. */
.process__number {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  font-variant-numeric: lining-nums proportional-nums;
  color: var(--olijf-500);
}

.process__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.process__body .type-h4 {
  color: var(--neutraal-900);
}

.process__body p {
  color: var(--neutraal-700);
}

/* Pijl: mobiel midden onder de kaart, in de ruimte naar de volgende */
.process__arrow {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: calc(-0.5 * (var(--process-gap) + var(--process-arrow)));
  display: grid;
  place-items: center;
  width: var(--process-arrow);
  height: var(--process-arrow);
  margin-left: calc(-0.5 * var(--process-arrow));
  border-radius: var(--radius-circle);
  background-color: var(--olijf-500);
  color: var(--wit);
}

.process__arrow .icon {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  rotate: 90deg;
}

.process__item:last-child .process__arrow {
  display: none;
}

/* Naast elkaar: elke kaart beslaat 3 rijen van het raster (nummer, kop, zin) via subgrid.
   Zo staan de koppen en de zinnen in alle kaarten op één lijn, ook als één kop op één regel past
   en de andere twee regels nodig hebben. */
/* 3 stappen: naast elkaar als de ruimte om de lijst minstens 56rem (896) breed is. Op een pagina is dat vanaf een
   scherm van 1024px (.container). Een container query, net als bij 4 stappen: in een smallere kolom blijven de kaarten
   onder elkaar, anders loopt een lang woord als "geregistreerd" de kaart uit. */
:has(> .process) {
  container-type: inline-size;
}

/* Tablet, 3 stappen (36rem tot 56rem): de kaarten onder elkaar, maar liggend: het nummer links, kop en zin rechts,
   alleen ruimte ertussen. Zelfde maten als op tablet bij 4 stappen: 48 ertussen, pijlvlak 32,
   binnenin rondom 24. De pijl wijst omlaag. Zo wordt het geen lange toren van hoge, brede kaarten met één regel tekst,
   en ook geen 2 + 1 met een leeg vlak naast de derde kaart. Drie smalle kaarten naast elkaar passen hier niet:
   dan loopt een lang woord als "geregistreerd" de kaart uit. */
@container (min-width: 36rem) and (max-width: 55.999rem) {
  .process:not(:has(> .process__item:nth-child(4))) {
    --process-gap: var(--space-8);
    --process-arrow: var(--space-6);
  }

  .process:not(:has(> .process__item:nth-child(4))) .process__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0 var(--space-5);
  }

  .process:not(:has(> .process__item:nth-child(4))) .process__body {
    align-self: stretch;
    justify-content: center;
  }
}

/* Tablet, 4 stappen (36rem tot 62rem): 2 x 2. Zelfde maten als 4 stappen naast elkaar: 48 ertussen, pijlvlak 32,
   binnenin rondom 24. Per rij van kaarten staan kop en zin op één lijn (subgrid); de lege rij ertussen is de ruimte
   tussen de rijen. Pijl van 1 naar 2 en van 3 naar 4. Van 2 naar 3 geen pijl: de nummers wijzen de volgorde. */
@container (min-width: 36rem) and (max-width: 61.999rem) {
  .process:has(> .process__item:nth-child(4)) {
    --process-gap: var(--space-8);
    --process-arrow: var(--space-6);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, auto) var(--process-gap) repeat(3, auto);
    gap: 0 var(--process-gap);
  }

  .process:has(> .process__item:nth-child(4)) .process__item {
    display: grid;
    grid-row: 1 / span 3;
    grid-template-rows: subgrid;
    row-gap: var(--space-4);
  }

  .process:has(> .process__item:nth-child(4)) .process__item:nth-child(n + 3) {
    grid-row: 5 / span 3;
  }

  .process:has(> .process__item:nth-child(4)) .process__body {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    row-gap: var(--space-2);
  }

  .process:has(> .process__item:nth-child(4)) .process__arrow {
    left: auto;
    bottom: auto;
    top: 50%;
    right: calc(-0.5 * (var(--process-gap) + var(--process-arrow)));
    margin-left: 0;
    margin-top: calc(-0.5 * var(--process-arrow));
  }

  .process:has(> .process__item:nth-child(4)) .process__arrow .icon {
    rotate: none;
  }

  /* Van de rechterkaart boven naar de linkerkaart onder: geen pijl */
  .process:has(> .process__item:nth-child(4)) .process__item:nth-child(2) .process__arrow {
    display: none;
  }
}

@container (min-width: 56rem) {
  .process:not(:has(> .process__item:nth-child(4))) {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    grid-template-columns: none;
    grid-template-rows: repeat(3, auto);
    row-gap: 0;
  }

  .process:not(:has(> .process__item:nth-child(4))) .process__item {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: var(--space-4);
  }

  .process:not(:has(> .process__item:nth-child(4))) .process__body {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    row-gap: var(--space-2);
  }

  .process:not(:has(> .process__item:nth-child(4))) .process__arrow {
    left: auto;
    bottom: auto;
    top: 50%;
    right: calc(-0.5 * (var(--process-gap) + var(--process-arrow)));
    margin-left: 0;
    margin-top: calc(-0.5 * var(--process-arrow));
  }

  .process:not(:has(> .process__item:nth-child(4))) .process__arrow .icon {
    rotate: none;
  }
}

/* 4 stappen: pas naast elkaar als de ruimte om de lijst minstens 62rem breed is, anders wordt de kop
   in een kaart midden in een woord afgebroken. Daarom een container query op de ouder van de lijst,
   niet op het scherm: in een smalle kolom blijven de kaarten onder elkaar. De ouder is een blok
   over de volle breedte, zoals .container. Met 4 kaarten: 48 ertussen met een pijlvlak van 32 (8 lucht links en
   rechts), en binnenin rondom 24, net als de dienstkaarten op de homepage. De kaart wordt dus niet krapper gemaakt
   om ruimte te winnen: de lijst gaat pas naast elkaar vanaf 62rem (992), zodat "Kennismaking" op één regel past. */
@container (min-width: 62rem) {
  .process:has(> .process__item:nth-child(4)) {
    --process-gap: var(--space-8);
    --process-arrow: var(--space-6);
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    grid-template-columns: none;
    grid-template-rows: repeat(3, auto);
    row-gap: 0;
  }

  .process:has(> .process__item:nth-child(4)) .process__item {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: var(--space-4);
  }

  .process:has(> .process__item:nth-child(4)) .process__body {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    row-gap: var(--space-2);
  }

  .process:has(> .process__item:nth-child(4)) .process__arrow {
    left: auto;
    bottom: auto;
    top: 50%;
    right: calc(-0.5 * (var(--process-gap) + var(--process-arrow)));
    margin-left: 0;
    margin-top: calc(-0.5 * var(--process-arrow));
  }

  .process:has(> .process__item:nth-child(4)) .process__arrow .icon {
    rotate: none;
  }
}

/* ---------- SEO-tekst met sticky CTA (DR-032) ---------- */
/* Links lopende tekst (.prose: h2, alinea's, .usp-list), rechts een olijf kaart met kop en de snelstart.
   Is de ruimte om de .seo-split smaller dan 57rem (912), dan staat de kaart direct onder de kop en de eerste alinea,
   voor de rest van de tekst: op de telefoon zie je de snelstart meteen, niet pas na 300 woorden. Vanaf 57rem schuift
   de kaart mee (sticky) onder de header,
   maar alleen binnen .seo-split: de cel van het raster is de grens, dus de kaart loopt nooit de sectie uit.
   De snelstart staat in de smalle kaart altijd als twee velden met de knop eronder. Knop zwart (DR-017).
   .seo-split__text doet niet mee als eigen blok (display: contents): kop, alinea's en kaart staan samen in het raster,
   zodat de kaart tussen de tekst kan staan. De HTML blijft hetzelfde. De ruimte tussen de alinea's komt van een
   marge (--space-4, net als .prose), niet van de gap van het raster. */
/* De tekstkolom is zo breed als de breedste alinea of lijst (hooguit --measure), niet breder. Koppen tellen
   niet mee voor die breedte (contain: inline-size) en vullen de kolom: zo is de kop precies zo breed als de alinea
   eronder (DR-036). */
.seo-split {
  display: grid;
  grid-template-columns: minmax(0, max-content);
  gap: 0;
}

.seo-split__text > :is(h2, h3) {
  contain: inline-size;
}

.seo-split__text {
  display: contents;
}

.seo-split__text > * + * {
  margin-top: var(--space-4);
}

.seo-split__text > h2:first-child + * {
  margin-top: var(--space-5);
}

.seo-split__text h2:not(:first-child) {
  margin-top: var(--space-5);
}

/* Tussenkoppen ("Wat je krijgt", "Wat het kost") in de maat van .type-h4: duidelijk lichter dan de h2 erboven,
   met --space-7 lucht naar de alinea ervoor. Zo leest het blok rustig, zoals "Over MHVK" op de homepage. */
.seo-split__text h3 {
  font-size: var(--text-h4);
  line-height: var(--leading-snug);
  letter-spacing: normal;
}

.seo-split__text h3:not(:first-child) {
  margin-top: var(--space-7);
}

/* Alinea's en lijsten hooguit --measure (ongeveer 70 tekens per regel): de tekst is het brede deel van de sectie,
   de kaart het smalle. De kop is even breed als de breedste alinea (DR-036). */
.seo-split__text > p,
.seo-split__text > ul,
.seo-split__text > ol {
  max-width: var(--measure);
}

/* .prose zet een inspringing op lijsten. De USP-lijst heeft zijn eigen vinkjes. */
.prose .usp-list {
  padding-left: 0;
}

.seo-split__aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  align-self: start;
}

/* Optioneel: een foto onder de kaart (figure.media media--4x3), zodat naast de lange tekst niet alleen een olijf vlak
   staat, net als de collage en de foto's in de tekstsecties op de homepage. Alleen als tekst en kaart naast elkaar
   staan; onder elkaar valt de foto weg, zodat de snelstart dicht bij de kop blijft. Een foto maar één keer per pagina
   (DR-019). */
.seo-split__aside > .media {
  display: none;
}

/* Tekst en kaart onder elkaar: eerst de kop en de eerste alinea, dan de kaart, dan de rest van de tekst.
   De kaart vult de volle breedte van de tekstkolom, ook op tablet (DR-041). Naast de tekst bepaalt het raster de
   breedte (--aside-min tot --aside). */
@container (max-width: 56.999rem) {
  .seo-split__text > * {
    order: 1;
  }

  .seo-split__text > h2:first-child,
  .seo-split__text > h2:first-child + * {
    order: 0;
  }

  .seo-split__aside {
    order: 0;
    margin-top: var(--space-6);
  }

  .seo-split__text > h2:first-child + * + * {
    margin-top: var(--space-7);
  }
}

.seo-split__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-6);
  border-radius: var(--radius);
}

/* Lange kop in de tekstkolom: regels zo vol mogelijk, niet balanceren. Balance maakt in een kolom van ongeveer
   450px vier korte regels van "Energielabel, meetrapport en 3D-tour in Noord-Holland". */
.seo-split__text h2 {
  text-wrap: pretty;
}

/* De kop staat in dezelfde kolom als de alinea's en is precies zo breed (DR-036, zie .seo-split). Maat .type-h1:
   in een kolom van --measure-narrow past een lang woord als "aanspreekpunt" op .type-display-2 niet en werd de kop
   afgekapt. De eerste alinea op .type-body-lg. Ook als de HTML een kale <h2> en <p> gebruikt. De rest blijft
   --text-body, zodat de lange tekst rustig leest onder een duidelijke opening. */
.seo-split__text > h2 {
  font-size: var(--text-h1);
  overflow-wrap: break-word;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}

.seo-split__text > h2 + p {
  font-size: var(--text-body-lg);
  line-height: var(--leading-body-lg);
}

/* Korte vraag als kop: niet balanceren, anders breekt "Benieuwd wat het kost?" in twee halve regels. */
.seo-split__card .type-h3 {
  text-wrap: pretty;
}

.seo-split__card .quick-start {
  align-items: stretch;
  max-width: none;
}

.seo-split__card .quick-start__form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.seo-split__card .quick-start__submit {
  grid-column: 1 / -1;
  white-space: normal;
}

/* Naast elkaar via een container query op de ouder (zoals .container), niet op het scherm: in een smalle kolom
   (zoals de style guide bij 1024px) wordt de tekstkolom anders een strook van een paar woorden breed. Vanaf 57rem
   (912) is de tekstkolom minstens 450px, breder dan de kaart. */
:has(> .seo-split) {
  container-type: inline-size;
}

@container (min-width: 57rem) {
  /* Kop, alinea's en lijsten in kolom 1, de kaart in kolom 2 vanaf de bovenkant van de kop (DR-036). De kop gaat
     niet meer over beide kolommen: dan was hij breder dan de alinea's eronder. */
  .seo-split {
    /* De tekst is het brede deel (alinea's tot --measure), de kaart het smalle (--aside), met minstens 64px ertussen
       (DR-036). Wat overblijft komt tussen tekst en kaart; dat is door de brede tekst hooguit een paar tientallen px. */
    grid-template-columns: minmax(0, max-content) minmax(var(--aside-min), var(--aside));
    justify-content: space-between;
    gap: 0 var(--space-9);
    align-items: start;
  }

  .seo-split__text > * {
    grid-column: 1;
  }

  /* De kaart begint op de hoogte van de kop. Hij beslaat de rijen van de tekst (lege rijen zijn 0 hoog),
     zodat hij sticky kan meeschuiven tot het einde van de tekst. */
  .seo-split__aside {
    grid-column: 2;
    grid-row: 1 / span 40;
    margin-top: 0;
    position: sticky;
    top: calc(var(--header-height, var(--space-10)) + var(--space-5));
  }

  .seo-split__aside > .media {
    display: block;
  }

  /* Laag scherm (liggende tablet, kleine laptop): kaart en foto passen dan niet onder de header. Dan schuift de
     kaart niet mee en valt de foto weg, anders valt de onderkant van de kaart buiten beeld. */
  @media (max-height: 47.99rem) {
    .seo-split__aside {
      position: static;
    }

    .seo-split__aside > .media {
      display: none;
    }
  }

  /* De kaart houdt ook hier --space-6 binnenruimte: met --space-7 past "Benieuwd wat het kost?" net niet op één regel.
     De kaart kan daarom niet smaller dan --aside (26rem). Ruimte voor de tekst komt uit de kolomafstand: 48 in plaats van
     --gap-split (tot 80), zodat de tekstkolom breder is dan de kaart. */
}

/* ---------- Reviewmuur (DR-033) ---------- */
/* Zes reviewkaarten in drie kolommen die verspringen: de middelste kolom begint lager (__col--offset).
   Layout overgenomen van Sitehulp (Relume "Testimonial 18"), in MHVK-stijl: scherpe hoeken, olijf sterren,
   vierkante olijf initialen. Het Google-logo staat rechtsboven: de reviews komen straks van Google.
   De breekpunten hangen aan de ruimte om de muur (container query op de ouder, zoals .container), niet aan het scherm,
   net als bij .process en .seo-split. Zo wordt een kaart nooit smaller dan ongeveer 280px, ook niet in een smalle
   kolom (zoals de style guide bij 1024px): anders valt het Google-logo over de sterren en breekt een kop midden in een woord.
   Onder 36rem (576) één kolom, van 36rem tot 58rem (928) twee kolommen van 3 kaarten zonder verspringen
   (de kolommen doen dan niet mee: display: contents, de kaarten lopen door in CSS columns), vanaf 58rem drie kolommen
   van minstens 280px. De kaarten staan altijd in de volgorde van de HTML.
   Op wit of linnen. Niet op olijf of bosgroen. */
.review-wall {
  display: flex;
  flex-direction: column;
  gap: var(--gap-grid);
  width: 100%;
}

.review-wall__col {
  display: flex;
  flex-direction: column;
  gap: var(--gap-grid);
  min-width: 0;
}

/* Tablet: echte kolommen (CSS columns), geen raster. Een raster maakt de kaarten per rij even hoog, dan krijgt een
   korte review een leeg vlak. Zo staat elke kaart op zijn eigen hoogte, 3 per kolom in de volgorde van de HTML. */
:has(> .review-wall) {
  container-type: inline-size;
}

@container (min-width: 36rem) and (max-width: 57.999rem) {
  .review-wall {
    display: block;
    columns: 2;
    column-gap: var(--gap-grid);
  }

  .review-wall__col {
    display: contents;
  }

  .review-wall .review-card {
    break-inside: avoid;
    margin-bottom: var(--gap-grid);
  }

  .review-wall__col:last-child > .review-card:last-child {
    margin-bottom: 0;
  }
}

/* Drie kolommen: de middelste begint lager, maar alle kolommen eindigen op één lijn. De kolommen zijn even hoog
   (stretch) en de kaarten in een kolom groeien even veel mee, zodat de extra ruimte verdeeld wordt over beide kaarten. Zo verspringt alleen de bovenrand, bewust,
   en is de onderrand recht. Met align-items: flex-start eindigde de rechterkolom zo'n 150px hoger dan de middelste. */
@container (min-width: 58rem) {
  .review-wall {
    flex-direction: row;
    align-items: stretch;
  }

  .review-wall__col {
    flex: 1;
  }

  .review-wall__col > .review-card {
    flex-grow: 1;
  }

  .review-wall__col--offset {
    padding-top: var(--space-10);
  }
}

.review-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  background-color: var(--wit);
  color: var(--neutraal-900);
}

.review-card__stars {
  display: flex;
  gap: var(--space-1);
  color: var(--olijf-500);
}

.review-card__stars .icon {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  fill: currentColor;
}

.review-card__google {
  position: absolute;
  top: var(--space-6);
  right: var(--space-6);
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
}

/* De kop is optioneel en staat niet in de standaard-HTML: een Google-review heeft geen kop, en een kop erboven legt
   de makelaar woorden in de mond. Staat er een kop, dan blijft de quote --text-body. */
.review-card__heading {
  color: var(--neutraal-900);
}

.review-card__quote p {
  color: var(--neutraal-700);
}

/* Zonder kop is de quote zelf de kop van de kaart: --text-body-lg, in de donkere tekstkleur. */
.review-card:not(:has(.review-card__heading)) .review-card__quote p {
  font-size: var(--text-body-lg);
  line-height: var(--leading-body-lg);
  color: var(--neutraal-900);
}

/* De eerste review is het beginpunt van de muur: de quote in het font van een kop, op --text-h4,
   de andere vijf blijven --text-body-lg. Zo zijn het geen zes gelijke kaarten zonder rangorde. Zet de sterkste review
   daarom als eerste kaart in de HTML. */
.review-wall__col:first-child > .review-card:first-child .review-card__quote p {
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
  letter-spacing: var(--tracking-heading);
  text-wrap: pretty;
}

/* Eén link onder de muur naar alle reviews op Google (.cluster met .btn--text): de bron die je kunt controleren. */
.review-wall + .cluster {
  justify-content: center;
  margin-top: var(--space-8);
}

.review-card__person {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: auto; /* altijd onderaan de kaart, ook als kaarten in een rij even hoog worden (2 kolommen) */
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--neutraal-200);
}

.review-card__avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius);
  background-color: var(--olijf-500);
  color: var(--wit);
  font-family: var(--font-heading);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-semibold);
}

.review-card__meta {
  display: flex;
  flex-direction: column;
  font-size: var(--text-body-sm);
  line-height: var(--leading-body);
}

.review-card__name {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  color: var(--neutraal-900);
}

.review-card__role {
  color: var(--neutraal-600);
}

/* Meer binnenruimte pas als de kaarten breed genoeg zijn: drie kolommen in minstens 64rem ruimte (kaarten vanaf
   ongeveer 320px), of twee kolommen vanaf 44rem. */
@container ((min-width: 44rem) and (max-width: 57.999rem)) or (min-width: 64rem) {
  .review-card {
    padding: var(--space-7);
  }

  .review-card__google {
    top: var(--space-7);
    right: var(--space-7);
  }
}

/* ---------- Formulier in een vlak (DR-034) ---------- */
/* Een .form in een eigen vlak met binnenruimte, zoals het samenwerkingsformulier op linnen (.surface-warm).
   Knop en melding staan samen in .form__actions. De melding (.form__feedback, aria-live) staat altijd in de HTML,
   ook leeg, zodat een schermlezer de eerste melding voorleest. Leeg is hij 0 hoog. */
.form-panel {
  padding: var(--space-5);
  border-radius: var(--radius);
}

/* Staat het vlak toch los op de pagina, dan blijven de velden binnen een leesbare maat */
.form-panel .form {
  max-width: var(--measure);
}

/* Het vlak is een halve kolom: velden altijd onder elkaar, ook als iemand toch een .form-row gebruikt.
   Naast elkaar lopen de foutmeldingen in kolommen van ongeveer 170px over drie regels. */
.form-panel .form-row {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}

@media (min-width: 48rem) {
  .form-panel {
    padding: var(--space-7);
  }
}

/* Uitleg naast het vlak: pas twee kolommen als de ruimte om de .split minstens 60rem breed is (container query,
   zoals bij de proces-kaarten). Daaronder is een halve kolom te smal voor twee velden naast elkaar en een knop op
   één regel. De foto in de uitleg (optioneel) staat naast elkaar onder de tekst, in de verhouding uit de HTML; onder
   elkaar is hij overbodig en duwt hij het formulier omlaag. */
:has(> .split > .form-panel) {
  container-type: inline-size;
}

.split:has(> .form-panel) {
  grid-template-columns: minmax(0, 1fr);
}

.split:has(> .form-panel) > .stack > .media {
  display: none;
}

/* De kop links is een sectiekop: zelfde maat als de sectiekoppen op de homepage ("Kies wat je nodig hebt"),
   --text-display-2. Ook als de HTML nog h2.type-h2 gebruikt. Zo weegt hij zwaarder
   dan een kaartkop en vult de uitleg links meer van de hoogte naast het formulier. */
.split:has(> .form-panel) > .stack > h2 {
  font-size: var(--text-display-2);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}

@container (min-width: 60rem) {
  /* De foto houdt de verhouding uit de HTML (media--4x3). Opgerekt tot de hoogte van het vlak werd een liggende of
     vierkante foto een smalle staande uitsnede, met onderaan een donkere, onscherpe band. Het verschil in hoogte
     vangt de sticky uitleg op (hieronder). */
  .split:has(> .form-panel) {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  .split:has(> .form-panel) > .stack > .media {
    display: block;
    margin-top: var(--space-4);
  }

  /* De uitleg is korter dan het vlak. Hij schuift mee (sticky) onder de header, zodat kop, lijst en foto naast de
     velden blijven staan waar je bent, tot de onderkant van het vlak. Zo blijft er geen wit gat onder de foto
     naast de knop staan. */
  .split:has(> .form-panel) > .stack {
    position: sticky;
    top: calc(var(--header-height, var(--space-10)) + var(--space-5));
  }

  /* Naast de uitleg iets minder ruimte tussen de velden (16 in plaats van 24): label en veld horen nog steeds
     duidelijk bij elkaar, en het vlak is minder hoog dan de uitleg ernaast. */
  .split > .form-panel .form {
    gap: var(--space-4);
  }
}

.form__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Smal: de knop is de volle breedte van het vlak, op één regel. Alleen op een heel smal scherm
   (smaller dan 360px) mag de tekst nog afbreken, in plaats van uit het vlak te lopen. */
.form__actions .btn {
  max-width: 100%;
  white-space: normal;
}

@media (max-width: 47.99rem) {
  .form__actions .btn {
    width: 100%;
    padding-inline: var(--space-2);
  }
}

.form__feedback {
  align-self: stretch;
}

.form__feedback:not(:empty) {
  margin-top: var(--space-4);
}

.form__feedback .alert:focus {
  outline: none;
}

/* Smal: in het vlak blijft naast het icoon te weinig ruimte over (ongeveer 150px bij 390). Icoon boven de tekst
   en minder binnenruimte, dan loopt de tekst over de volle breedte. */
@media (max-width: 47.99rem) {
  .form-panel .form__feedback .alert {
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
  }
}

/* ---------- Beweging bij het scrollen (DR-035) ---------- */
/* Opt-in: alleen een onderdeel met het attribuut data-reveal beweegt. Zonder dat attribuut verandert er niets,
   dus pagina's die het niet gebruiken (zoals home-animated.html, met eigen beweging) blijven precies hetzelfde.
   js/components.js zet de stand:
     data-reveal="wacht"  klaargezet, nog niet in beeld (alleen als het onderdeel bij het laden buiten beeld staat);
     data-reveal="speel"  in beeld, de beweging loopt;
     data-reveal="klaar"  afgelopen, alleen de gewone stijl geldt;
     data-reveal="per-kaart"  alleen .process, als de kaarten onder elkaar staan of het onderdeel hoger
                              is dan het scherm: elke kaart start apart (data-reveal-kaart).
   Zonder script, zonder IntersectionObserver of met minder beweging (prefers-reduced-motion) blijft het attribuut leeg
   en staat alles direct in beeld. Elke beweging eindigt bij de gewone stijl (fill-mode backwards).
   Elk onderdeel heeft een eigen beweging die past bij wat er staat. Rustig: kleine afstand, korte tijd.
   Tijden uit tokens.css (--reveal-*). Keyframes heten reveal-*, zodat ze niet botsen met home-animated.css. */

/* Volgorde van kaarten en punten */
.feature-list__item:nth-child(2),
.process__item:nth-child(2) { --reveal-i: 1; }
.feature-list__item:nth-child(3),
.process__item:nth-child(3) { --reveal-i: 2; }
.feature-list__item:nth-child(4),
.process__item:nth-child(4) { --reveal-i: 3; }
.feature-list__item:nth-child(5) { --reveal-i: 4; }

@media (prefers-reduced-motion: no-preference) {
  /* Featurelijst: per punt eerst het icoon, dan schuift de tekst ernaast in */
  .feature-list[data-reveal="wacht"] .icon-tile {
    opacity: 0;
  }

  .feature-list[data-reveal="wacht"] .feature-list__body {
    opacity: 0;
  }

  .feature-list[data-reveal="speel"] .icon-tile {
    animation: reveal-icoon var(--duration) var(--ease) backwards;
    animation-delay: calc(var(--reveal-i, 0) * var(--reveal-volgorde));
  }

  .feature-list[data-reveal="speel"] .feature-list__body {
    animation: reveal-van-links var(--reveal-uitkomst) var(--ease) backwards;
    animation-delay: calc(var(--reveal-i, 0) * var(--reveal-volgorde) + var(--reveal-stap) * 2);
  }

  /* Proces-kaarten: kaart, pijl, kaart, pijl. Zo vertelt de volgorde het proces. Elke stap duurt --reveal-uitkomst
     (300ms): de kaart start, na --reveal-volgorde (150ms) komt de pijl in --duration-fast (150ms). De pijl is dus
     klaar precies als de volgende kaart start, nooit later. Vier stappen: 1,2 seconden. */
  .process[data-reveal="wacht"] .process__item,
  .process[data-reveal="wacht"] .process__arrow {
    opacity: 0;
  }

  .process[data-reveal="speel"] .process__item {
    animation: reveal-van-onder var(--reveal-uitkomst) var(--ease) backwards;
    animation-delay: calc(var(--reveal-i, 0) * var(--reveal-uitkomst));
  }

  .process[data-reveal="speel"] .process__arrow {
    animation: reveal-icoon var(--duration-fast) var(--ease) backwards;
    animation-delay: calc(var(--reveal-i, 0) * var(--reveal-uitkomst) + var(--reveal-volgorde));
  }

  /* De reviewmuur beweegt niet: wie het bewijs leest, wil de kaarten meteen zien. Een data-reveal op .review-wall
     doet niets (components.js slaat hem over). */

  /* Kaarten onder elkaar of hoger dan het scherm: proces-kaarten komen elk pas als je ernaartoe scrolt. components.js zet dan
     data-reveal="per-kaart" op het onderdeel en data-reveal-kaart op elke kaart. Zelfde beweging. Komen er meer kaarten
     tegelijk in beeld, dan geeft het script ze een oplopende --reveal-kaart-i (schuin van links boven naar rechts onder):
     ze komen na elkaar, met --reveal-volgorde ertussen. Een kaart die alleen in beeld komt, start direct.
     De pijl onder een proces-kaart komt als de kaart staat. */
  .process__item[data-reveal-kaart="wacht"] {
    opacity: 0;
  }

  .process__item[data-reveal-kaart="speel"] {
    animation: reveal-van-onder var(--reveal-uitkomst) var(--ease) backwards;
    animation-delay: calc(var(--reveal-kaart-i, 0) * var(--reveal-volgorde));
  }

  /* Proces-kaarten die samen in beeld komen: zelfde ritme als hierboven, kaart en pijl om en om */
  .process__item[data-reveal-kaart="speel"] {
    animation-delay: calc(var(--reveal-kaart-i, 0) * var(--reveal-uitkomst));
  }

  /* Per kaart hoort de pijl bij de kaart waar hij naar wijst. Wacht die kaart nog, dan is de pijl er ook niet: anders
     wees een zwarte pijl onder de 80%-lijn naar een leeg vlak. Start die kaart, dan komt eerst de pijl (in
     --duration-fast) en start de kaart --reveal-volgorde later, net als in de groep: kaart, pijl, kaart.
     components.js zet --reveal-pijl-i op de kaart ervoor, gelijk aan --reveal-kaart-i van de volgende kaart. */
  .process__item:has(+ .process__item[data-reveal-kaart="wacht"]) .process__arrow {
    opacity: 0;
  }

  .process__item:has(+ .process__item[data-reveal-kaart="speel"]) .process__arrow {
    animation: reveal-icoon var(--duration-fast) var(--ease) backwards;
    animation-delay: calc(var(--reveal-pijl-i, 0) * var(--reveal-uitkomst));
  }

  .process__item + .process__item[data-reveal-kaart="speel"] {
    animation-delay: calc(var(--reveal-kaart-i, 0) * var(--reveal-uitkomst) + var(--reveal-volgorde));
  }

  /* Collage: de foto's openen van onder naar boven en zakken iets terug. Het linnen vlak met de knop beweegt niet. */
  .collage__photo--side { --reveal-i: 1; }
  .collage__photo--small { --reveal-i: 2; }

  .collage[data-reveal="wacht"] .collage__photo {
    clip-path: inset(100% 0 0 0);
  }

  .collage[data-reveal="speel"] .collage__photo {
    animation: reveal-foto-open var(--reveal-foto) var(--ease) backwards;
    animation-delay: calc(var(--reveal-i, 0) * var(--duration-fast));
  }

  .collage[data-reveal="speel"] .collage__photo img {
    animation: reveal-foto-zakt var(--reveal-foto) var(--ease) backwards;
    animation-delay: calc(var(--reveal-i, 0) * var(--duration-fast));
  }

  /* Energielabel op de foto: de klassen lopen op, de huidige klasse komt als laatste, het label schuift open */
  .media-overlay__card[data-reveal] .float-card__step {
    transform-origin: bottom;
  }

  .media-overlay__card .float-card__step:nth-child(2)  { --reveal-i: 1; }
  .media-overlay__card .float-card__step:nth-child(3)  { --reveal-i: 2; }
  .media-overlay__card .float-card__step:nth-child(4)  { --reveal-i: 3; }
  .media-overlay__card .float-card__step:nth-child(5)  { --reveal-i: 4; }
  .media-overlay__card .float-card__step:nth-child(6)  { --reveal-i: 5; }
  .media-overlay__card .float-card__step:nth-child(7)  { --reveal-i: 6; }
  .media-overlay__card .float-card__step:nth-child(8)  { --reveal-i: 7; }
  .media-overlay__card .float-card__step:nth-child(9)  { --reveal-i: 8; }
  .media-overlay__card .float-card__step:nth-child(10) { --reveal-i: 9; }
  .media-overlay__card .float-card__step:nth-child(11) { --reveal-i: 10; }

  .media-overlay__card[data-reveal="wacht"] .float-card__step {
    scale: 1 0;
  }

  .media-overlay__card[data-reveal="wacht"] .energy-label {
    clip-path: polygon(0 0, 0 0, 0 50%, 0 100%, 0 100%);
  }

  .media-overlay__card[data-reveal="speel"] .float-card__step {
    animation: reveal-klasse var(--duration) var(--ease) backwards;
    animation-delay: calc(var(--reveal-i, 0) * var(--reveal-stap));
  }

  .media-overlay__card[data-reveal="speel"] .float-card__step--current {
    animation-duration: var(--reveal-uitkomst);
    animation-delay: calc(10 * var(--reveal-stap) + var(--duration-fast));
  }

  .media-overlay__card[data-reveal="speel"] .energy-label {
    animation: reveal-label-pijl var(--reveal-uitkomst) var(--ease) backwards;
    animation-delay: calc(10 * var(--reveal-stap) + var(--duration));
  }

  /* 3D-scan met foto: één scanlijn van links naar rechts, de kaart schuift erbij in. Een scanner loopt gelijkmatig: linear. */
  .scan-viewer__frame[data-reveal="wacht"] .scan-viewer__image::before,
  .scan-viewer__frame[data-reveal="speel"] .scan-viewer__image::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
      to right,
      transparent calc(100% - var(--space-10)),
      color-mix(in srgb, var(--olijf-300) 35%, transparent) calc(100% - var(--border-width-strong) - var(--border-width)),
      var(--bosgroen) calc(100% - var(--border-width-strong) - var(--border-width)),
      var(--bosgroen) calc(100% - var(--border-width-strong)),
      var(--wit) calc(100% - var(--border-width-strong))
    );
    translate: -100% 0;
  }

  .scan-viewer__frame[data-reveal="wacht"] .scan-viewer__poster {
    opacity: 0;
  }

  .scan-viewer__frame[data-reveal="speel"] .scan-viewer__image::before {
    animation: reveal-scan-lijn var(--reveal-scan) linear backwards;
  }

  .scan-viewer__frame[data-reveal="speel"] .scan-viewer__poster {
    animation: reveal-van-links var(--reveal-uitkomst) var(--ease) backwards;
    animation-delay: calc(var(--duration) * 2);
  }
}

@keyframes reveal-van-onder {
  from {
    opacity: 0;
    translate: 0 var(--reveal-afstand);
  }
}

@keyframes reveal-van-links {
  from {
    opacity: 0;
    translate: calc(-1 * var(--reveal-afstand)) 0;
  }
}

@keyframes reveal-icoon {
  from {
    opacity: 0;
    scale: 0.6;
  }
}

/* Met eindwaarde: van inset naar geen clip-path is geen vloeiende overgang */
@keyframes reveal-foto-open {
  from {
    clip-path: inset(100% 0 0 0);
  }

  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes reveal-foto-zakt {
  from {
    scale: 1.06;
  }
}

@keyframes reveal-klasse {
  from {
    scale: 1 0;
  }
}

@keyframes reveal-label-pijl {
  from {
    clip-path: polygon(0 0, 0 0, 0 50%, 0 100%, 0 100%);
  }
}

/* Op 85% staat de lijn aan de rechterkant, daarna faadt hij uit */
@keyframes reveal-scan-lijn {
  from {
    translate: -100% 0;
    opacity: 1;
  }

  85% {
    translate: 0 0;
    opacity: 1;
  }

  to {
    translate: 0 0;
    opacity: 0;
  }
}