/**
 * Hedilla Park — de secties. Het fundament staat in hedilla.css.
 *
 * Eén sectie is één blok uit `src/blokken/`, en de klasse is `blok-<slug>`.
 * De achtergrondkleur staat hier en niet in het CMS: in dit ontwerp ligt per
 * sectie vast of hij wit, kalk of groen is.
 *
 * Waar een sectie per pagina anders meet, staat dat op `[data-template]` van
 * de main. Dat is bijvoorbeeld zo bij de stappen: op de homepage is dat een
 * eigen witte sectie, op de pagina Mogelijkheden hoort hij bij de witte strook
 * van de intro en meet hij dus anders.
 */

/* ───────────────────────────────────────── het kruimelpad als eigen strook */

.kruimelbalk {
  background: var(--wit);
  padding-top: clamp(40px, 5vw, 72px);
}

/* ─────────────────────────────────────────────────────────── kerngegevens */

.blok-feiten {
  background: var(--kalk);
  color: var(--antraciet);
}

.blok-feiten .binnen {
  padding-block: clamp(40px, 4.5vw, 56px);
}

.feiten-lijst {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 28px 40px;
}

.feit {
  display: flex;
  gap: 18px;
  align-items: center;
  min-width: 0;
}

.feit__icoon {
  flex: none;
  display: flex;
  color: var(--messing-donker);
}

.feit__icoon img,
.feit__icoon svg {
  display: block;
  width: 32px;
  height: 32px;
}

.feit__tekst {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.feit dt {
  font: 500 12px/1.3 var(--tekst-font);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--messing-donker);
}

.feit dd {
  margin: 0;
  font: 400 20px/1.35 var(--kop-font);
  color: var(--groen);
  text-wrap: balance;
}

/* ───────────────────────────────────── de mogelijkheden, schuivend (home) */

.blok-mogelijkhedenSlider {
  position: relative;
  background: var(--groen);
  color: var(--kalk);
}

.slider-rooster {
  max-width: var(--inhoud-max);
  margin: 0 auto;
  padding: var(--sectie-y) var(--gutter) clamp(48px, 6vw, 80px);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas:
    'intro beeld'
    'lijst beeld';
  gap: 48px clamp(40px, 6vw, 96px);
  align-items: start;
}

.slider-intro {
  grid-area: intro;
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: flex-start;
  min-width: 0;
}

.slider-intro h2 {
  font-size: var(--h2);
  line-height: 1.15;
  color: var(--kalk);
}

.slider-intro p {
  margin: 0;
  color: var(--zand);
  max-width: 46ch;
}

.slider-intro .knop-houder {
  margin-top: 6px;
}

.slider-lijst {
  grid-area: lijst;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.slider-lijst ol {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--lijn-op-donker-sterk);
}

.slider-lijst li {
  position: relative;
  border-bottom: 1px solid var(--lijn-op-donker-sterk);
}

.slider-lijst button {
  width: 100%;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 12px;
  padding: 16px 0;
  background: transparent;
  border: 0;
  color: var(--kalk);
  text-align: left;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity var(--snel);
  font-family: var(--tekst-font);
}

.slider-lijst button:hover,
.slider-lijst button[aria-current='true'] {
  opacity: 1;
}

.slider-nr {
  font: 500 13px/1 var(--tekst-font);
  letter-spacing: 0.14em;
  color: var(--messing);
}

.slider-naam {
  font: 400 clamp(22px, 2.2vw, 26px) / 1.2 var(--kop-font);
}

.slider-sector {
  font: 500 11px/1 var(--tekst-font);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--zand);
}

/* De voortgangsbalk onder het actieve item. De animatie is de klok van de
   slider: als hij klaar is, schuift de volgende impressie in beeld. */
@keyframes sliderVullen {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.slider-balk {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 100%;
  background: var(--messing);
  transform: scaleX(0);
  transform-origin: left center;
}

.slider-balk--actief {
  animation: sliderVullen var(--tempo, 4s) linear forwards;
}

.slider--pauze .slider-balk--actief {
  animation-play-state: paused;
}

.slider-beeld {
  grid-area: beeld;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.slider-doek {
  position: relative;
  flex: 1;
  min-height: 440px;
  overflow: hidden;
  background: var(--antraciet);
}

/* Elke impressie is een laag over de hele doek. De laag regelt het doorvloeien,
   het beeld erin de langzame inzoom. Dat is gesplitst omdat het beeld van
   next/image komt en de laag van de clientcomponent: zo kan het beeld een
   servercomponent blijven. */
.slider-laag {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 400ms ease;
}

.slider-laag img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 0ms linear 400ms;
}

.slider-laag[data-actief='true'] {
  opacity: 1;
}

.slider-laag[data-actief='true'] img {
  transform: scale(1.06);
  transition: transform 4500ms linear;
}

@media (prefers-reduced-motion: reduce) {
  .slider-laag[data-actief='true'] img {
    transform: none;
  }
}

.slider-vlag {
  position: absolute;
  left: 0;
  top: 0;
  padding: 10px 14px;
  background: var(--kalk);
  color: var(--groen);
  font: 500 13px/1.2 var(--tekst-font);
  z-index: 2;
}

.slider-onder {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 96px clamp(24px, 3vw, 36px) clamp(24px, 3vw, 32px);
  background: linear-gradient(
    to top,
    rgba(29, 36, 33, 0.88) 0%,
    rgba(29, 36, 33, 0.55) 55%,
    rgba(29, 36, 33, 0) 100%
  );
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 20px;
  align-items: baseline;
  z-index: 2;
}

.slider-teller {
  font: 500 13px/1 var(--tekst-font);
  letter-spacing: 0.14em;
  color: var(--messing);
  font-variant-numeric: tabular-nums;
}

.slider-onder p {
  margin: 0;
  color: var(--kalk);
  font-size: 17px;
  line-height: 1.6;
  max-width: 52ch;
}

.slider-noot {
  max-width: var(--inhoud-max);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(40px, 5vw, 64px);
}

.slider-noot p {
  margin: 0;
  padding-top: 24px;
  border-top: 1px solid var(--lijn-op-donker);
  font-size: var(--small);
  color: var(--zand);
}

/* Onder 1100px stapelt de slider: intro, beeld, lijst. Zo staat het beeld
   direct onder de kop en niet onder een lijst van zes regels. */
@media (max-width: 1099px) {
  .slider-rooster {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'intro'
      'beeld'
      'lijst';
  }

  .slider-doek {
    aspect-ratio: 4 / 3;
    min-height: 0;
  }
}

/* ──────────────────────────────────────────────────── stappen en pluspunten */

.blok-stappen {
  position: relative;
  background: var(--wit);
  padding-block: var(--sectie-y);
}

.sectie-kop {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: var(--gap) 64px;
  align-items: end;
  margin-bottom: 56px;
}

.sectie-kop__titel {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.sectie-kop h2 {
  font-size: var(--h2);
  line-height: 1.15;
  color: var(--groen);
}

.sectie-kop__naast p {
  margin: 0;
  color: var(--muted);
  max-width: 50ch;
}

.op-donker .sectie-kop h2 {
  color: var(--kalk);
}

.op-donker .sectie-kop__naast p {
  color: var(--zand);
}

.stappen {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--gap);
}

.stap {
  position: relative;
  padding: 28px 0 0;
  border-top: 1px solid var(--lijn);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.stap::before {
  content: '';
  position: absolute;
  left: 0;
  top: -1px;
  width: 40px;
  height: 3px;
  background: var(--messing);
}

.stap__nr {
  font: 400 48px/1 var(--kop-font);
  color: var(--groen);
}

.stap h3 {
  font: 400 24px/1.25 var(--kop-font);
  color: var(--groen);
}

.stap p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
  max-width: 36ch;
}

.stappen-knop {
  margin-top: 56px;
}

/**
 * Op de pagina Mogelijkheden horen de pluspunten bij de witte strook van de
 * intro: daar staat geen eigen kop boven en meet de ruimte eromheen anders.
 */
[data-template='mogelijkheden'] .blok-stappen {
  padding-block: clamp(56px, 7vw, 96px);
}

/* ───────────────────────────────────────────────────────── tekst met beeld */

.blok-tekstMetBeeld {
  background: var(--kalk);
  padding-block: var(--sectie-y);
}

.duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: clamp(40px, 7vw, 112px);
  align-items: center;
}

.duo__beeld {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--zand);
}

/* Het beeld is 116% hoog en staat hoger, zodat het mee kan bewegen met het
   scrollen zonder dat er een rand onderuit komt. */
.duo__beeld img {
  position: absolute;
  left: 0;
  top: -8%;
  width: 100%;
  height: 116%;
  object-fit: cover;
  will-change: transform;
}

.duo__tekst {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 560px;
}

.duo__tekst h2 {
  font-size: var(--h2);
  line-height: 1.15;
  color: var(--groen);
}

.streep {
  height: 1px;
  background: var(--lijn);
  position: relative;
}

.streep::before {
  content: '';
  position: absolute;
  left: 0;
  top: -1px;
  width: 40px;
  height: 3px;
  background: var(--messing);
}

.duo__lead p {
  margin: 0;
  font: 400 var(--lead) / 1.6 var(--tekst-font);
  color: var(--antraciet);
}

.duo__body p {
  margin: 0;
  color: var(--muted);
  max-width: 62ch;
}

.duo__knop {
  margin-top: 8px;
}

/* Het beeld rechts in plaats van links. Onder 768px staat het altijd boven. */
.duo--beeld-rechts .duo__beeld {
  order: 2;
}

@media (max-width: 767px) {
  .duo--beeld-rechts .duo__beeld {
    order: 0;
  }
}

/* ─────────────────────────────────────────────────────────────── galerij */

.blok-galerij {
  background: var(--kalk);
  padding-block: var(--sectie-y);
}

.blok-galerij .sectie-kop {
  margin-bottom: clamp(40px, 5vw, 56px);
}

.galerij {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: clamp(260px, 30vw, 440px);
  gap: var(--gap);
}

.galerij li {
  min-width: 0;
}

.galerij button {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: var(--zand);
  cursor: zoom-in;
  text-align: left;
}

.galerij img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 900ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.galerij button:hover img {
  transform: scale(1.04);
}

.galerij__onder {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 72px clamp(20px, 2.4vw, 28px) clamp(20px, 2.4vw, 24px);
  background: linear-gradient(to top, rgba(29, 36, 33, 0.82) 0%, rgba(29, 36, 33, 0) 100%);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
}

.galerij__tekst {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.galerij__label {
  font: 500 12px/1.2 var(--tekst-font);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--zand);
}

.galerij__naam {
  font: 400 clamp(22px, 2.2vw, 28px) / 1.15 var(--kop-font);
  color: var(--kalk);
}

.galerij__plus {
  flex: none;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--kalk);
  color: var(--groen);
}

.galerij-noot {
  margin: 32px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--lijn);
}

.galerij-noot p {
  margin: 0;
  font-size: var(--small);
  color: var(--muted);
  max-width: 90ch;
}

/* Het mozaïek: breed, smal, smal, breed, breed, smal — en zo door. */
.galerij--mozaiek li:nth-child(6n + 1),
.galerij--mozaiek li:nth-child(6n + 4),
.galerij--mozaiek li:nth-child(6n + 5) {
  grid-column: span 7;
}

.galerij--mozaiek li:nth-child(6n + 2),
.galerij--mozaiek li:nth-child(6n + 3),
.galerij--mozaiek li:nth-child(6n) {
  grid-column: span 5;
}

.galerij--raster li {
  grid-column: span 4;
}

.galerij--raster {
  grid-auto-rows: clamp(240px, 24vw, 340px);
}

@media (max-width: 999px) {
  .galerij--mozaiek li,
  .galerij--raster li {
    grid-column: span 6;
  }
}

@media (max-width: 699px) {
  .galerij {
    grid-auto-rows: auto;
  }

  .galerij--mozaiek li,
  .galerij--raster li {
    grid-column: span 12;
  }

  .galerij button {
    aspect-ratio: 4 / 3;
    height: auto;
  }
}

/* ───────────────────────────────────────────────── het vergrote beeld */

.lichtbak {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(29, 36, 33, 0.95);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 80px clamp(16px, 5vw, 80px) 32px;
}

.lichtbak img {
  display: block;
  max-width: min(100%, 1400px);
  max-height: calc(100vh - 230px);
  object-fit: contain;
  width: auto;
  height: auto;
}

.lichtbak__sluit {
  position: absolute;
  top: 20px;
  right: 20px;
}

.lichtbak__onder {
  width: 100%;
  max-width: 1400px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 20px 32px;
}

.lichtbak__tekst {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.lichtbak__teller {
  font: 500 12px/1.2 var(--tekst-font);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--messing);
}

.lichtbak__naam {
  font: 400 28px/1.15 var(--kop-font);
  color: var(--kalk);
}

.lichtbak__omschrijving {
  font-size: 16px;
  line-height: 1.5;
  color: var(--zand);
  max-width: 60ch;
}

.lichtbak__knoppen {
  display: flex;
  gap: 8px;
}

/** De vierkante knoppen van de lichtbak: 54px, een rand, geen vulling. */
.vierkant {
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  box-shadow: inset 0 0 0 1.5px var(--kalk);
  color: var(--kalk);
  cursor: pointer;
  transition:
    background var(--snel),
    color var(--snel);
}

.vierkant:hover {
  background: var(--kalk);
  color: var(--groen);
}

/* ───────────────────────────────────────────────────────────── tijdlijn */

.blok-tijdlijn {
  background: var(--wit);
  padding-block: 0 var(--sectie-y);
}

.tijdlijn-rooster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: 48px clamp(40px, 7vw, 112px);
  align-items: start;
}

/**
 * De linkerkolom blijft staan zolang de tijdlijn in beeld is.
 *
 * Let op: geen `overflow: hidden` op de sectie eromheen. Dat maakt er een
 * scrollcontainer van, en dan plakt dit vast aan die container in plaats van
 * aan het scherm — zonder foutmelding en zonder dat de regel hier verkeerd
 * uitziet. Moet er ooit iets afgeknipt worden, gebruik dan `overflow: clip`.
 */
.tijdlijn-kop {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: 120px;
}

.tijdlijn-kop h2 {
  font-size: var(--h2);
  line-height: 1.15;
  color: var(--groen);
}

.tijdlijn-kop p {
  margin: 0;
  color: var(--muted);
  max-width: 44ch;
}

.tijdlijn {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--lijn);
}

.tijdlijn li {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 32px 0;
  border-bottom: 1px solid var(--lijn);
}

.tijdlijn__jaar {
  font: 400 clamp(30px, 3.2vw, 40px) / 1.1 var(--kop-font);
  color: var(--groen);
}

.tijdlijn__tekst p {
  margin: 0;
  font-size: 17px;
  line-height: 1.65;
  color: var(--antraciet);
  max-width: 56ch;
}

.tijdlijn__tekst p + p {
  margin-top: 14px;
}

/* ─────────────────────────────────────────────────────────────── visie */

.blok-visie {
  background: var(--kalk);
  padding-block: var(--sectie-y);
}

.visie-beeld {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--zand);
}

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

.visie-tekst {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 560px;
}

.visie-tekst h2 {
  font-size: var(--h2);
  line-height: 1.15;
  color: var(--groen);
}

.visie-lead p {
  margin: 0;
  font: 400 var(--lead) / 1.6 var(--tekst-font);
  color: var(--antraciet);
}

.visie-lijst {
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--lijn);
}

.visie-lijst > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 32px;
  padding: 20px 0;
  border-bottom: 1px solid var(--lijn);
}

.visie-lijst dt {
  flex: 0 0 150px;
  font: 400 22px/1.3 var(--kop-font);
  color: var(--groen);
}

.visie-lijst dd {
  flex: 1 1 240px;
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}

.visie-lijst dd p {
  margin: 0;
}

/* ───────────────────────────────────────────────────────── plattegrond */

.blok-plattegrond {
  background: var(--wit);
  padding-block: clamp(40px, 5vw, 64px) var(--sectie-y);
}

.kaart-balk {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--lijn);
  margin-bottom: 24px;
}

.verdiepingen {
  display: flex;
  gap: 0;
}

.verdiepingen button {
  height: 48px;
  padding: 0 24px;
  border: 0;
  box-shadow: inset 0 0 0 1.5px var(--groen);
  background: transparent;
  color: var(--groen);
  font: 500 15px/1 var(--tekst-font);
  cursor: pointer;
  transition:
    background var(--snel),
    color var(--snel);
  margin-left: -1.5px;
}

.verdiepingen button[aria-selected='true'] {
  background: var(--groen);
  color: var(--kalk);
}

.legenda {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  font-size: var(--small);
  color: var(--muted);
}

.legenda li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.kaart-rooster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: 32px clamp(32px, 4vw, 56px);
  align-items: start;
}

.kaart-kolom {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.kaart-doek {
  position: relative;
  background: var(--kalk);
}

.kaart-doek svg {
  display: block;
  width: 100%;
  height: auto;
}

.kaart-doek polygon[data-aanwijsbaar='true'] {
  cursor: pointer;
  transition: fill 200ms ease-out;
}

.kaart-labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.kaart-label {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  text-align: center;
  white-space: nowrap;
  transition: background 200ms ease-out;
}

.kaart-label__nr {
  font: 600 13px/1.1 var(--tekst-font);
  letter-spacing: 0.06em;
  transition: color 200ms ease-out;
}

.kaart-label__naam {
  font: 400 12.5px/1.2 var(--tekst-font);
  transition: color 200ms ease-out;
}

.kaart-noot {
  margin: 0;
  font-size: var(--small);
  color: var(--muted);
}

/** Het kaartje bij een unit. Zweeft op een breed scherm, staat eronder op een smal. */
.kaart-tip {
  width: 300px;
  max-width: calc(100% - 24px);
  background: var(--wit);
  border: 1px solid var(--lijn);
  box-shadow: 0 12px 32px rgba(29, 36, 33, 0.14);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: absolute;
  z-index: 5;
}

.kaart-tip::before {
  content: '';
  position: absolute;
  left: 24px;
  top: -1px;
  width: 40px;
  height: 3px;
  background: var(--messing);
}

.kaart-tip--vast {
  position: relative;
  width: auto;
  max-width: none;
  box-shadow: none;
  padding: 20px 22px;
  gap: 12px;
}

.kaart-tip--vast::before {
  left: 22px;
}

.kaart-tip__kop {
  font: 500 12px/1.3 var(--tekst-font);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--messing-donker);
}

.kaart-tip__noot {
  font-size: var(--small);
  line-height: 1.5;
  color: var(--muted);
  margin-top: -6px;
}

.kaart-tip__huurder {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kaart-tip__naam {
  font: 400 23px/1.2 var(--kop-font);
  color: var(--groen);
}

.kaart-tip--vast .kaart-tip__naam {
  font-size: 22px;
}

.kaart-tip__omschrijving {
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
}

.kaart-tip a {
  font-size: 15px;
  line-height: 1.5;
  color: var(--groen);
  text-decoration: underline;
  text-decoration-color: var(--messing);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  align-self: flex-start;
}

.kaart-tip__vrij {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kaart-tip__vrij .pijllink {
  margin-top: 4px;
  text-decoration: none;
  align-self: flex-start;
}

/** De lijst naast de kaart. */
.kaart-lijst {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.kaart-groep {
  display: flex;
  flex-direction: column;
}

.kaart-groep > span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--lijn);
}

.kaart-groep ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.kaart-groep li {
  border-bottom: 1px solid var(--lijn);
}

.kaart-groep button {
  width: 100%;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 10px 0;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: var(--antraciet);
  font-family: var(--tekst-font);
}

.kaart-chip {
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 13px/1 var(--tekst-font);
  letter-spacing: 0.06em;
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px var(--invoer-rand);
  color: var(--groen);
  transition:
    background var(--snel),
    color var(--snel);
}

.kaart-chip--vrij {
  box-shadow: inset 0 0 0 1px var(--messing);
  color: var(--messing-donker);
}

.kaart-chip--aan {
  background: var(--groen);
  color: var(--wit);
  box-shadow: none;
}

.kaart-chip--vrij.kaart-chip--aan {
  background: var(--messing-donker);
}

.kaart-naam {
  font-size: 16px;
  line-height: 1.4;
  text-wrap: pretty;
}

.kaart-naam--vrij {
  color: var(--messing-donker);
}

/* Onder 1000px staan de kaart en de lijst onder elkaar. */
@media (max-width: 999px) {
  .kaart-rooster {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Onder 760px zweeft het kaartje niet meer: dan staat het onder de kaart,
   want op een aanraakscherm is er geen muis om het mee te volgen. */
@media (max-width: 759px) {
  .kaart-tip {
    position: relative;
  }
}

/* ────────────────────────────────────────────── de tabel met bedrijven */

.blok-bedrijventabel {
  background: var(--kalk);
  padding-block: var(--sectie-y);
}

.blok-bedrijventabel .sectie-kop {
  margin-bottom: 48px;
}

.bedrijven {
  display: flex;
  flex-direction: column;
  border-top: 1.5px solid var(--groen);
}

.bedrijven__kop,
.bedrijven__rij {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.2fr) minmax(0, 1.3fr) minmax(0, 1.8fr);
}

.bedrijven__kop {
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--tabel-lijn);
  font: 500 12px/1.3 var(--tekst-font);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--messing-donker);
}

.bedrijven__rij {
  gap: 6px 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--tabel-lijn);
  align-items: baseline;
  cursor: pointer;
  background: transparent;
  transition: background 200ms ease-out;
  text-align: left;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  width: 100%;
  font-family: var(--tekst-font);
  color: var(--antraciet);
}

.bedrijven__rij[data-aan='true'] {
  background: rgba(230, 223, 207, 0.55);
}

.bedrijven__naam {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.bedrijven__naam strong {
  font: 400 21px/1.3 var(--kop-font);
  color: var(--groen);
}

.bedrijven__naam--vrij strong {
  color: var(--messing-donker);
}

.bedrijven__omschrijving {
  font-size: var(--small);
  line-height: 1.5;
  color: var(--muted);
}

.bedrijven__nrs {
  font: 500 15px/1.4 var(--tekst-font);
  color: var(--groen);
  letter-spacing: 0.02em;
}

.bedrijven__verdiepingen {
  font-size: 15px;
  line-height: 1.4;
  color: var(--muted);
}

.bedrijven__web {
  font-size: 15px;
  line-height: 1.4;
  min-width: 0;
  overflow-wrap: anywhere;
}

.bedrijven__web a {
  color: var(--groen);
  text-decoration: underline;
  text-decoration-color: var(--messing);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}

.bedrijven__web .pijllink {
  text-decoration: none;
  font-weight: 500;
}

.bedrijven__leeg {
  color: var(--muted);
}

/* Onder 760px wordt de tabel een kaartweergave. */
@media (max-width: 759px) {
  .bedrijven__kop {
    display: none;
  }

  .bedrijven__rij {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .bedrijven__naam,
  .bedrijven__web {
    grid-column: 1 / -1;
  }
}

/* ──────────────────────────────────────────────── contact en formulier */

.blok-contactformulier {
  background: var(--wit);
  padding-block: 0 var(--sectie-y);
}

.contact-rooster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 56px clamp(40px, 7vw, 112px);
  align-items: start;
}

.contact-links {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.contact-links h1 {
  font-size: var(--h1);
  line-height: 1.02;
  color: var(--groen);
}

.contact-links .hero-intro p {
  margin: 0;
  font: 400 var(--lead) / 1.6 var(--tekst-font);
  color: var(--muted);
  max-width: 40ch;
}

.contact-gegevens {
  display: flex;
  flex-direction: column;
  margin-top: 16px;
  border-top: 1px solid var(--lijn);
}

.contact-gegeven {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 0;
  border-bottom: 1px solid var(--lijn);
}

/* Losse waarden onder elkaar met acht pixels ertussen; regels die bij elkaar
   horen staan als één blok in dezelfde alinea. Zie componenten/Gegeven.tsx. */
.contact-gegeven__waarde {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.contact-gegeven__waarde p,
.contact-gegeven a {
  margin: 0;
  font: 400 22px/1.4 var(--kop-font);
  color: var(--groen);
  text-decoration: none;
}

.contact-gegeven a:hover {
  text-decoration: underline;
  text-decoration-color: var(--messing);
}

/* Een gegeven dat gewone tekst is in plaats van een adres of nummer, zoals
   de bereikbaarheid: dat leest als een alinea en niet als een gegeven. */
.contact-gegeven--tekst .contact-gegeven__waarde p {
  font: 400 16px/1.6 var(--tekst-font);
  color: var(--muted);
  max-width: 40ch;
}

.contact-slot {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  margin-top: 8px;
}

.contact-slot__kop {
  font: 400 24px/1.25 var(--kop-font);
  color: var(--groen);
}

.contact-vlak {
  background: var(--kalk);
  padding: clamp(28px, 4vw, 48px);
  min-width: 0;
}

/* ──────────────────────────────────────────── formulieren, beide vormen */

.hform {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hform h2 {
  font-size: var(--h3);
  line-height: 1.2;
  color: var(--groen);
}

.hform__groep {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hform__vraag {
  font: 500 14px/1.3 var(--tekst-font);
  color: var(--antraciet);
}

.hform__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  height: 42px;
  padding: 0 18px;
  border: 0;
  box-shadow: inset 0 0 0 1.5px var(--invoer-rand);
  background: var(--wit);
  color: var(--groen);
  font: 500 14px/1 var(--tekst-font);
  cursor: pointer;
  transition:
    background var(--snel),
    color var(--snel);
}

.chip[aria-pressed='true'] {
  background: var(--groen);
  color: var(--kalk);
  box-shadow: inset 0 0 0 1.5px var(--groen);
}

.hform__rij {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 20px;
}

.hform label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.hform label > span {
  font: 500 14px/1.3 var(--tekst-font);
  color: var(--antraciet);
}

.hform input[type='text'],
.hform input[type='email'],
.hform input[type='tel'],
.hform input[type='date'],
.hform textarea {
  width: 100%;
  /* 16px, zodat iOS niet inzoomt zodra het veld focus krijgt. */
  font: 400 16px var(--tekst-font);
  padding: 0 14px;
  height: 48px;
  min-height: 48px;
  border: 1px solid var(--invoer-rand);
  border-radius: 2px;
  background: var(--wit);
  color: var(--antraciet);
  outline: none;
  transition:
    border-color var(--snel),
    box-shadow var(--snel);
  /* Een cel in een grid krimpt niet onder de breedte van zijn inhoud; zonder
     deze twee loopt een datumveld op iOS buiten het scherm. */
  min-width: 0;
  max-width: 100%;
}

.hform textarea {
  height: auto;
  padding: 12px 14px;
  line-height: 1.5;
  resize: vertical;
}

.hform input:focus,
.hform textarea:focus {
  border-color: var(--groen);
  box-shadow: 0 0 0 3px rgba(176, 141, 87, 0.35);
}

.hform [aria-invalid='true'] {
  border-color: var(--conversie);
}

.hform__fout {
  font: 500 13px/1.4 var(--tekst-font);
  color: var(--conversie);
}

/* Het vinkje. Een knop en geen checkbox, zodat het vlak precies de maat uit
   het ontwerp houdt; de rol en de staat gaan via aria-pressed mee. */
.vinkje {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--antraciet);
  font: 400 15px/1.5 var(--tekst-font);
  text-align: left;
  cursor: pointer;
}

.vinkje__vak {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wit);
  box-shadow: inset 0 0 0 1.5px #9aa19c;
  color: var(--wit);
  transition: background var(--snel);
}

.vinkje__vak svg {
  opacity: 0;
}

.vinkje[aria-pressed='true'] .vinkje__vak {
  background: var(--groen);
  box-shadow: inset 0 0 0 1.5px var(--groen);
}

.vinkje[aria-pressed='true'] .vinkje__vak svg {
  opacity: 1;
}

.vinkje--fout .vinkje__vak {
  box-shadow: inset 0 0 0 1.5px var(--conversie);
}

.vinkje p {
  margin: 0;
}

.vinkje a {
  color: var(--groen);
}

/** Het bedankvak van het contactformulier. */
.hform-klaar {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  padding: 24px 0;
}

.hform-klaar__vink {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--groen);
  color: var(--kalk);
}

.hform-klaar h2 {
  font-size: var(--h3);
  line-height: 1.2;
  color: var(--groen);
}

.hform-klaar p {
  margin: 0;
  color: var(--muted);
  max-width: 44ch;
}

/* ──────────────────────────────────────────── de aanvraag in vijf stappen */

.blok-aanvraagformulier {
  background: var(--kalk);
  padding-block: clamp(32px, 4vw, 56px) clamp(72px, 8vw, 120px);
}

.aanvraag-rooster {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}

.aanvraag-kaart {
  background: var(--wit);
  border: 1px solid var(--lijn);
  min-width: 0;
}

.aanvraag-voortgang {
  list-style: none;
  margin: 0;
  padding: clamp(20px, 3vw, 32px) clamp(20px, 3vw, 40px) 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.aanvraag-voortgang li {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.aanvraag-voortgang span:first-child {
  height: 3px;
  background: var(--lijn);
  transition: background var(--snel);
}

.aanvraag-voortgang li[data-gedaan='true'] span:first-child {
  background: var(--messing);
}

.aanvraag-voortgang span:last-child {
  font: 500 12px/1.3 var(--tekst-font);
  letter-spacing: 0.06em;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.aanvraag-voortgang li[data-nu='true'] span:last-child {
  color: var(--groen);
}

.aanvraag-stap {
  padding: clamp(28px, 4vw, 48px) clamp(20px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.aanvraag-vraag {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.aanvraag-vraag h2 {
  font-size: var(--h3);
  line-height: 1.25;
  color: var(--groen);
}

.aanvraag-vraag p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
}

/* Stap 1: de keuzekaarten. */
.keuzekaarten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 12px;
}

.keuzekaart {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 20px;
  text-align: left;
  border: 0;
  background: var(--wit);
  box-shadow: inset 0 0 0 1px var(--lijn);
  color: var(--groen);
  cursor: pointer;
  transition:
    background var(--snel),
    box-shadow var(--snel);
  font-family: var(--tekst-font);
}

.keuzekaart[aria-pressed='true'] {
  background: #e7efea;
  box-shadow: inset 0 0 0 2px var(--groen);
}

.keuzekaart__streep {
  width: 24px;
  height: 3px;
  background: var(--lijn);
  transition: background var(--snel);
}

.keuzekaart[aria-pressed='true'] .keuzekaart__streep {
  background: var(--messing);
}

.keuzekaart__titel {
  font: 400 22px/1.2 var(--kop-font);
}

.keuzekaart__tekst {
  font: 400 15px/1.5 var(--tekst-font);
  color: var(--muted);
}

/* Stap 2: de schuif. */
.schuifvlak {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 28px clamp(20px, 3vw, 32px);
  background: var(--kalk);
}

.schuif-getal {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.schuif-getal strong {
  font: 400 clamp(56px, 7vw, 80px) / 1 var(--kop-font);
  color: var(--groen);
  font-variant-numeric: tabular-nums;
}

.schuif-getal span {
  font: 400 24px/1 var(--kop-font);
  color: var(--messing-donker);
}

.schuifvlak input[type='range'] {
  width: 100%;
  height: 32px;
  min-height: 32px;
  margin: 0;
  accent-color: var(--groen);
  cursor: pointer;
}

.schuif-grenzen {
  display: flex;
  justify-content: space-between;
  font: 500 12px/1 var(--tekst-font);
  letter-spacing: 0.08em;
  color: var(--muted);
}

.schuif-keuzes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.schuif-keuzes .chip {
  height: 40px;
  padding: 0 16px;
  box-shadow: inset 0 0 0 1px var(--lijn);
}

.schuif-keuzes .chip[aria-pressed='true'] {
  box-shadow: inset 0 0 0 1px var(--groen);
}

/* Stap 3: de wensen. */
.wenschips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.wenschips .chip {
  height: 46px;
  padding: 0 18px;
  font-size: 15px;
  box-shadow: inset 0 0 0 1px var(--lijn);
}

.wenschips .chip[aria-pressed='true'] {
  box-shadow: inset 0 0 0 1px var(--groen);
}

/* Stap 4: de periodes. */
.radiorijen {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--lijn);
}

.radiorij {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 60px;
  min-height: 60px;
  padding: 0 4px;
  border: 0;
  border-bottom: 1px solid var(--lijn);
  background: transparent;
  color: var(--groen);
  font: 400 17px/1 var(--tekst-font);
  cursor: pointer;
  text-align: left;
}

.radiorij__bol {
  width: 22px;
  height: 22px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1.5px var(--groen);
  background: var(--wit);
  transition: background var(--snel);
}

.radiorij__bol span {
  width: 10px;
  height: 10px;
  background: transparent;
}

.radiorij[aria-pressed='true'] .radiorij__bol {
  background: var(--groen);
}

.radiorij[aria-pressed='true'] .radiorij__bol span {
  background: var(--kalk);
}

.moment-rij {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 20px;
  padding-top: 8px;
}

.moment-rij .chip {
  height: 44px;
  padding: 0 16px;
  box-shadow: inset 0 0 0 1px var(--lijn);
}

.moment-rij .chip[aria-pressed='true'] {
  box-shadow: inset 0 0 0 1px var(--groen);
}

/* De knoppen onder de stap. */
.aanvraag-knoppen {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--lijn);
}

.aanvraag-knoppen > div:first-child {
  visibility: visible;
}

.aanvraag-knoppen[data-eerste='true'] > div:first-child {
  visibility: hidden;
}

/* De samenvatting ernaast. */
.aanvraag-samenvatting {
  position: sticky;
  top: 104px;
  background: var(--groen);
  color: var(--kalk);
  padding: clamp(24px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.aanvraag-samenvatting dl {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.aanvraag-samenvatting dl > div {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--lijn-op-donker);
}

.aanvraag-samenvatting dt {
  font: 500 12px/1.6 var(--tekst-font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--zand);
}

.aanvraag-samenvatting dd {
  margin: 0;
  font: 400 16px/1.5 var(--tekst-font);
  color: var(--kalk);
  overflow-wrap: anywhere;
}

.aanvraag-samenvatting dd[data-leeg='true'] {
  color: rgba(244, 244, 239, 0.55);
}

.aanvraag-vervolg {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.aanvraag-vervolg > span {
  font: 400 20px/1.3 var(--kop-font);
}

.aanvraag-vervolg ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--zand);
}

.aanvraag-vervolg li {
  display: flex;
  gap: 12px;
}

.aanvraag-vervolg li span {
  font: 500 12px/1.9 var(--tekst-font);
  letter-spacing: 0.1em;
  color: var(--messing);
  flex: none;
}

.aanvraag-slot {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--zand);
}

/* Het bevestigingsscherm. */
.aanvraag-klaar {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
  background: var(--wit);
  border: 1px solid var(--lijn);
  padding: clamp(32px, 5vw, 64px);
}

.aanvraag-klaar h1 {
  font-size: var(--h2);
  line-height: 1.15;
  color: var(--groen);
}

.aanvraag-klaar p {
  margin: 0;
  color: var(--muted);
}

.aanvraag-klaar dl {
  margin: 0;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--lijn);
}

.aanvraag-klaar dl > div {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--lijn);
}

.aanvraag-klaar dt {
  font: 500 12px/1.6 var(--tekst-font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.aanvraag-klaar dd {
  margin: 0;
  font: 400 16px/1.5 var(--tekst-font);
  color: var(--antraciet);
  overflow-wrap: anywhere;
}

.aanvraag-klaar__knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Onder 1000px staat de samenvatting onder het formulier. */
@media (max-width: 999px) {
  .aanvraag-rooster {
    grid-template-columns: minmax(0, 1fr);
  }

  .aanvraag-samenvatting {
    position: static;
  }
}

/* Onder 640px passen vijf stapnamen niet meer naast elkaar; dan blijven de
   balkjes staan en verdwijnt de tekst. */
@media (max-width: 639px) {
  .aanvraag-voortgang span:last-child {
    display: none;
  }
}