/* ============================================================
   RIET QUADEN MAKELAARS — het woningaanbod

   De kaartjes zijn de raambiljetten uit de etalage van de homepagina. Riet
   noemde de etalage het enige onderdeel dat ze perfect vond (06-08), dus de
   aanbodpagina gebruikt letterlijk dezelfde vorm: wit papier, foto op 4:3,
   rode sticker die over de rand steekt, rode streep onder het adres.

   Eén verschil: hier hangen ze recht. Twintig scheve kaartjes in een raster
   wordt rommelig; in de etalage zijn het er zes op een rij.
   ============================================================ */

/* ---------- filters ---------- */

.filters {
  margin-bottom: var(--ruimte-lg);
}

/* Het witte vel zat eerst op .filters__rij. Sinds er twee rijen in staan
   (keuzelijsten boven, schuiven en knopjes eronder) is het vel een eigen
   laag, anders worden het twee losse kaarten onder elkaar. (15-09-2026) */
.filters__kaart {
  padding: var(--ruimte-sm);
  background: var(--wit);
  border-radius: 3px;
  box-shadow:
    0 1px 2px rgba(24, 22, 23, 0.08),
    0 16px 34px -26px rgba(24, 22, 23, 0.42);
}

.filters__rij {
  display: grid;
  gap: var(--ruimte-xs);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

/* Plaats en straal staan naast elkaar: het menu links, de schuif rechts.
   Samen twee kolommen breed, en onder de 760 px onder elkaar — een schuif van
   90 px is niet te bedienen. */
.filters__paar {
  display: grid;
  grid-column: span 2;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--ruimte-xs) var(--ruimte-sm);
  align-items: start;
  min-width: 0;
}

@media (max-width: 760px) {
  .filters__paar {
    grid-column: auto;
    grid-template-columns: minmax(0, 1fr);
  }
}

/* De schuif is uit tot er een plaats gekozen is. */
.schuif--uit {
  opacity: 0.45;
}

.schuif--uit .schuif__greep {
  cursor: not-allowed;
}

.schuif__stand--stil {
  color: var(--steungrijs);
  font-weight: var(--gew-body);
}

/* De schuiven hebben meer breedte nodig dan een keuzelijst: onder de 240 px
   staan de bedragen op twee regels en wordt de balk te kort om op te mikken. */
.filters__rij--schuiven {
  /* Ruimer dan de bovenste rij: de grepen staan aan de uiterste randen van hun
     balk, en met 12 px ertussen lijken twee schuiven naast elkaar één balk met
     drie grepen. */
  gap: var(--ruimte-xs) var(--ruimte-md);
  margin-top: var(--ruimte-sm);
  padding-top: var(--ruimte-sm);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  border-top: 1px solid rgba(24, 22, 23, 0.1);
}

.filters__veld {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.filters__label {
  color: var(--steungrijs);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Zelfde vorm als de velden in een formulier (zie paginas.css): papier met
   een 3px hoek, de logobalk als onderstreping en het eigen lijn-pijltje in
   plaats van dat van het besturingssysteem. (13-09-2026)
   16px blijft de ondergrens: anders zoomt Safari op de iPhone in bij het
   openklappen. */
.filters select,
.keuzemenu__knop {
  width: 100%;
  max-width: 100%;
  padding: 12px 40px 12px 14px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--zwart);
  background-color: var(--papier);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none' stroke='%23181617' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 7 7.5 13 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  border: 1px solid rgba(24, 22, 23, 0.16);
  border-bottom: 2px solid rgba(24, 22, 23, 0.5);
  border-radius: 3px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition:
    border-color 0.25s var(--ease-luxe),
    box-shadow 0.25s var(--ease-luxe);
}

.filters select:hover,
.keuzemenu__knop:hover {
  border-bottom-color: var(--zwart);
}

.filters select:focus-visible,
.keuzemenu__knop:focus-visible {
  outline: none;
  border-color: rgba(24, 22, 23, 0.28);
  border-bottom-color: var(--rood);
  box-shadow: 0 0 0 3px rgba(230, 68, 73, 0.18);
}

.filters__stand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ruimte-xs);
  margin-top: var(--ruimte-xs);
  color: var(--steungrijs);
  font-size: var(--fs-klein);
}

.filters__stand strong {
  color: var(--zwart);
  font-size: var(--fs-body);
}

.filters__wis {
  color: var(--rood-diep);
  font-weight: var(--gew-body-vet);
  border-bottom: 1px solid currentColor;
}

.filters__wis:focus-visible {
  outline: 2px solid var(--zwart);
  outline-offset: 3px;
}

/* ---------- de schuifbalken (prijs en woonoppervlak) ----------

   Twee gewone <input type="range"> over elkaar, geen library. Dat houdt de
   toetsenbordbediening (pijltjes, Home/End) en de vinger op een telefoon
   gratis; de balk en de rode vulling eronder zijn twee spans die met
   --van en --tot meeschuiven.

   De inputs vangen zelf geen muis (pointer-events: none); alleen de grepen
   doen dat. Anders ligt de bovenste input als een onzichtbaar vel over de
   onderste en is die greep niet meer te pakken. */

.schuif__stand {
  margin: 0 0 2px;
  min-height: 1.5em;
  color: var(--zwart);
  font-size: 1rem;
  font-weight: var(--gew-body-vet);
}

.schuif {
  position: relative;
  height: 34px;
}

.schuif__baan,
.schuif__vulling {
  position: absolute;
  top: 50%;
  height: 4px;
  margin-top: -2px;
  border-radius: 2px;
  pointer-events: none;
}

.schuif__baan {
  left: 0;
  right: 0;
  background: rgba(24, 22, 23, 0.16);
}

.schuif__vulling {
  left: var(--van, 0%);
  right: calc(100% - var(--tot, 100%));
  background: var(--rood);
}

.schuif__greep {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 34px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  pointer-events: none;
}

.schuif__greep:focus {
  outline: none;
}

/* De greep zelf: papier met de logobalk-rand, net als de keuzelijsten.
   26 px met een onzichtbare marge eromheen haalt het aanraakvlak op 44 px. */
.schuif__greep::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  background: var(--papier);
  border: 1px solid rgba(24, 22, 23, 0.16);
  border-bottom: 2px solid rgba(24, 22, 23, 0.5);
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(24, 22, 23, 0.18);
  cursor: grab;
  pointer-events: auto;
  transition:
    border-color 0.25s var(--ease-luxe),
    box-shadow 0.25s var(--ease-luxe);
}

.schuif__greep::-moz-range-thumb {
  width: 26px;
  height: 26px;
  background: var(--papier);
  border: 1px solid rgba(24, 22, 23, 0.16);
  border-bottom: 2px solid rgba(24, 22, 23, 0.5);
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(24, 22, 23, 0.18);
  cursor: grab;
  pointer-events: auto;
}

.schuif__greep:hover::-webkit-slider-thumb { border-bottom-color: var(--zwart); }
.schuif__greep:hover::-moz-range-thumb { border-bottom-color: var(--zwart); }

.schuif__greep:active::-webkit-slider-thumb { cursor: grabbing; }
.schuif__greep:active::-moz-range-thumb { cursor: grabbing; }

.schuif__greep:focus-visible::-webkit-slider-thumb {
  border-color: rgba(24, 22, 23, 0.28);
  border-bottom-color: var(--rood);
  box-shadow: 0 0 0 3px rgba(230, 68, 73, 0.18);
}

.schuif__greep:focus-visible::-moz-range-thumb {
  border-color: rgba(24, 22, 23, 0.28);
  border-bottom-color: var(--rood);
  box-shadow: 0 0 0 3px rgba(230, 68, 73, 0.18);
}

/* ---------- het uitklapmenu met vinkjes (slaapkamers) ----------
   Een <select> van het besturingssysteem kan maar één keuze aan, en meerdere
   aantallen tegelijk moest kunnen. Dit is dus de vorm van een keuzelijst met
   een eigen paneel eronder. (16-09-2026) */

.keuzemenu {
  position: relative;
}

.keuzemenu__knop {
  text-align: left;
  /* Het rijtje kan oplopen tot "1, 2, 3, 4 en 5 slaapkamers"; dat mag de
     kolom niet oprekken. De volledige tekst staat in de title. */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.keuzemenu__paneel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 5;
  padding: 6px;
  background: var(--wit);
  border: 1px solid rgba(24, 22, 23, 0.16);
  border-radius: 3px;
  box-shadow:
    0 2px 4px rgba(24, 22, 23, 0.06),
    0 18px 38px -22px rgba(24, 22, 23, 0.5);
}

.keuzemenu__regel {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 10px;
  border-radius: 2px;
  cursor: pointer;
}

.keuzemenu__regel:hover {
  background: var(--papier);
}

.keuzemenu__regel input {
  width: 18px;
  height: 18px;
  accent-color: var(--rood-vlak);
  cursor: pointer;
}

.keuzemenu__regel:focus-within {
  background: var(--papier);
  box-shadow: inset 0 0 0 2px rgba(230, 68, 73, 0.3);
}

/* ---------- het raster ---------- */

.raster {
  display: grid;
  gap: var(--ruimte-md);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

@media (max-width: 400px) {
  .raster {
    grid-template-columns: minmax(0, 1fr);
  }
}

.raster__leeg {
  max-width: 60ch;
  padding: var(--ruimte-md);
  background: var(--wit);
  border-left: 4px solid var(--rood);
  border-radius: 3px;
}

/* ---------- het blok met verkochte woningen ----------

   Staat onder het actuele aanbod, met een streep erboven zodat meteen te zien
   is dat hier iets anders begint. Dichtgeklapt is het één regel plus een knop;
   dat houdt de pagina licht, ook met tachtig woningen erin. */

.weglijst {
  margin-top: var(--ruimte-lg);
  /* Dit is een <section> binnen een sectie, dus de algemene regel uit
     basis.css (`section { padding-block: ...; background: var(--wit) }`)
     pakte hem ook. Dat legde een wit vlak ter breedte van de container over
     de schuine strepen: de achtergrond brak precies hier af. Het blok is
     geen eigen paginasectie, dus het vlak en de sectiepadding gaan eruit en
     de streep loopt door. */
  background: transparent;
  padding-block: var(--ruimte-md) 0;
  border-top: 1px solid rgba(24, 22, 23, 0.14);
}

.weglijst__kop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ruimte-xs) var(--ruimte-sm);
  margin-bottom: var(--ruimte-md);
}

.weglijst__titel {
  margin: 0;
  font-size: var(--fs-h3);
  line-height: 1.15;
}

.weglijst__tekst {
  flex: 1 1 22ch;
  max-width: 52ch;
  margin: 0;
  color: var(--steungrijs);
  font-size: var(--fs-klein);
}

/* de telling naast het aantal: "15 in de verkoop · 78 verkocht" */
.filters__uitsplitsing {
  color: var(--steungrijs);
}

@media (max-width: 560px) {
  .weglijst__kop .knop {
    width: 100%;
  }
}

/* ---------- het kaartje ---------- */

.kaart {
  display: block;
  border-radius: 4px;
}

.kaart:focus-visible {
  outline: 2px solid var(--zwart);
  outline-offset: 5px;
}

.kaart__blad {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 10px 10px 16px;
  background: var(--wit);
  border-radius: 3px;
  box-shadow:
    0 1px 1px rgba(24, 22, 23, 0.1),
    0 8px 18px -14px rgba(24, 22, 23, 0.45);
  transition: transform 0.45s var(--ease-luxe), box-shadow 0.45s var(--ease-luxe);
}

.kaart:hover .kaart__blad,
.kaart:focus-visible .kaart__blad {
  transform: translateY(-4px);
  box-shadow:
    0 2px 3px rgba(24, 22, 23, 0.1),
    0 18px 34px -18px rgba(24, 22, 23, 0.55);
}

.kaart__beeld {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--papier-diep);
  overflow: hidden;
}

.kaart__beeld img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}

.kaart__geenfoto {
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--steungrijs);
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.kaart__sticker {
  position: absolute;
  top: 12px;
  left: -6px;
  z-index: 2;
  padding: 5px 11px 4px;
  background: var(--rood-vlak);
  color: var(--wit);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  border-radius: 2px;
  box-shadow: 0 4px 10px -6px rgba(24, 22, 23, 0.7);
  transform: rotate(-2deg);
}

/* verkocht, verhuurd en onder voorbehoud in het merkzwart: dat leest als
   afgehandeld, en het houdt het rood voor wat nog te koop staat */
.kaart__sticker--verkocht,
.kaart__sticker--verhuurd,
.kaart__sticker--onder-bod {
  background: var(--zwart);
}

/* "Verkocht (onder voorbehoud)": het deel tussen haakjes op een eigen regel.
   Op één regel is die sticker breder dan het halve kaartje. */
.sticker__bij {
  display: block;
  margin-top: 1px;
  font-size: 0.9em;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  opacity: 0.9;
}

.kaart__tekst {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 14px 4px 0;
}

.kaart__type {
  display: block;
  margin-bottom: 3px;
  color: var(--steungrijs);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.kaart__straat {
  display: block;
  font-family: var(--font-kop);
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  /* Pastoor Schoenmaeckersstraat mag afbreken */
  overflow-wrap: break-word;
  hyphens: auto;
}

.kaart__plaats {
  display: block;
  margin-top: 2px;
  color: var(--steungrijs);
  font-size: var(--fs-klein);
}

.kaart__streep {
  display: block;
  width: 42px;
  height: 3px;
  margin: 12px 0 10px;
  background: var(--rood);
}

.kaart__prijs {
  display: block;
  margin-top: auto;
  font-size: 1.25rem;
  font-weight: var(--gew-body-vet);
}

.kaart__meta {
  display: block;
  margin-top: 4px;
  color: var(--steungrijs);
  font-size: 0.9375rem;
}

/* "8 km van Stein": staat er alleen bij een zoektocht met een straal, en moet
   dan opvallen — het is het antwoord op de vraag waarom deze woning in een
   lijst voor een andere plaats staat. */
.kaart__afstand {
  /* De tekstkolom van het kaartje is een flexkolom: zonder fit-content rekt
     het vlakje zich over de hele breedte uit en wordt het een balk. */
  display: inline-block;
  align-self: flex-start;
  width: fit-content;
  margin-top: 6px;
  padding: 3px 9px 2px;
  color: var(--rood-diep);
  background: rgba(230, 68, 73, 0.09);
  border-radius: 2px;
  font-size: 0.875rem;
  font-weight: var(--gew-body-vet);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   DE WONINGPAGINA
   ============================================================ */

.woning__balk {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ruimte-sm);
}

.woning__adres {
  font-size: var(--fs-h2);
  max-width: 18ch;
  overflow-wrap: break-word;
  hyphens: auto;
}

.woning__plaats {
  margin-top: 6px;
  color: var(--steungrijs);
  font-size: var(--fs-body-groot);
}

.woning__prijsblok {
  text-align: right;
}

.woning__prijs {
  font-family: var(--font-kop);
  font-size: var(--fs-h3);
  font-weight: 600;
}

.woning__stand {
  display: inline-block;
  margin-top: 6px;
  padding: 5px 11px 4px;
  background: var(--rood-vlak);
  color: var(--wit);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  border-radius: 2px;
}

.woning__stand--verkocht,
.woning__stand--verhuurd {
  background: var(--zwart);
}

/* ---------- de galerij ---------- */

.galerij {
  display: grid;
  gap: 8px;
  margin-top: var(--ruimte-md);
}

@media (min-width: 800px) {
  .galerij {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }
}

.galerij__hoofd,
.galerij__kant {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--papier-diep);
}

.galerij__hoofd {
  aspect-ratio: 4 / 3;
}

.galerij__kant {
  display: grid;
  gap: 8px;
  grid-template-rows: repeat(2, 1fr);
  background: none;
}

.galerij__klein {
  position: relative;
  overflow: hidden;
  background: var(--papier-diep);
  aspect-ratio: 4 / 3;
}

.galerij img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.galerij__meer {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 8px 14px;
  background: rgba(24, 22, 23, 0.86);
  color: var(--wit);
  font-size: var(--fs-klein);
  font-weight: var(--gew-body-vet);
  border-radius: 3px;
  backdrop-filter: blur(4px);
}

/* de hele strook foto's onder de knop */
.galerij__rest {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  margin-top: 8px;
}

.galerij__rest img {
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: cover;
  background: var(--papier-diep);
}

/* ---------- de inhoud van de woningpagina ---------- */

.woning__raster {
  display: grid;
  gap: var(--ruimte-lg);
  align-items: start;
}

@media (min-width: 960px) {
  .woning__raster {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: var(--ruimte-xl);
  }
}

/* De omschrijving staat een maat kleiner dan de rest van de site (21 px) en
   met meer regelafstand. Riet vond de tekst "vrij groot en druk" (15-09-2026),
   en dat klopt: een Pararius-omschrijving is een lap van vijftig regels, en op
   bodymaat leest die als een aankondiging in plaats van als een verhaal. */
.woning__tekst {
  max-width: 68ch;
  font-size: 1.125rem;
  line-height: 1.75;
}

.woning__tekst h2,
.woning__tekst h3,
.woning__tekst strong,
.woning__tekst b {
  font-size: 1.1875rem;
  font-weight: var(--gew-body-vet);
}

.woning__tekst p + p,
.woning__tekst ul + p,
.woning__tekst p + ul {
  margin-top: 1.05em;
}

.woning__lijst {
  display: grid;
  gap: 8px;
}

.woning__lijst li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 10px;
}

.woning__lijst li::before {
  content: '';
  width: 7px;
  height: 7px;
  margin-top: 0.62em;
  background: var(--rood);
  border-radius: 50%;
}

/* ---------- de kenmerkentabel ---------- */

.kenmerken__groep + .kenmerken__groep {
  margin-top: var(--ruimte-md);
}

.kenmerken__kop {
  font-family: var(--font-kop);
  font-size: 1.3125rem;
  font-weight: 600;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--zwart);
}

.kenmerken__lijst {
  margin-top: 10px;
}

.kenmerken__regel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--ruimte-xs);
  padding: 9px 0;
  border-bottom: 1px solid rgba(24, 22, 23, 0.1);
  font-size: var(--fs-klein);
}

/* Links het kenmerk vet, rechts de waarde gewoon. Stond andersom; Riet leest
   de lijst van links naar rechts en wil het kenmerk als eerste zien
   (feedback 17-09-2026). */
.kenmerken__regel dt {
  font-weight: var(--gew-body-vet);
}

.kenmerken__regel dd {
  font-weight: var(--gew-body);
}

/* ---------- het zijblok met contact ---------- */

.zijblok {
  position: sticky;
  top: calc(var(--header-hoogte) + 12px);
  padding: var(--ruimte-md);
  background: var(--wit);
  border-radius: 3px;
  box-shadow:
    0 1px 2px rgba(24, 22, 23, 0.08),
    0 20px 40px -28px rgba(24, 22, 23, 0.5);
}

.zijblok::before {
  content: '';
  display: block;
  width: 100%;
  height: 7px;
  margin: calc(var(--ruimte-md) * -1) calc(var(--ruimte-md) * -1) var(--ruimte-sm);
  width: calc(100% + var(--ruimte-md) * 2);
  background: var(--zwart);
  border-bottom: 3px solid var(--rood);
  border-radius: 3px 3px 0 0;
}

@media (max-width: 959px) {
  .zijblok {
    position: static;
  }
}

.zijblok__kop {
  font-size: var(--fs-h3);
}

.zijblok__tekst {
  margin-top: var(--ruimte-2xs);
  color: var(--steungrijs);
  font-size: var(--fs-klein);
}

.zijblok__knoppen {
  display: grid;
  gap: 10px;
  margin-top: var(--ruimte-sm);
}

.zijblok__deel {
  margin-top: var(--ruimte-sm);
  padding-top: var(--ruimte-sm);
  border-top: 1px solid rgba(24, 22, 23, 0.12);
  font-size: var(--fs-klein);
  color: var(--steungrijs);
}

/* ---------- kaartje met de ligging ---------- */

.ligging {
  margin-top: var(--ruimte-md);
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(24, 22, 23, 0.08);
}

.ligging iframe {
  display: block;
  width: 100%;
  height: 320px;
  border: 0;
}

/* Sinds de kaart een eigen blok onderaan is, staat het adres eronder: los van
   de kop bovenaan de pagina is anders niet te zien waar de speld staat. */
.ligging__adres {
  margin-top: var(--ruimte-xs);
  color: var(--steungrijs);
  font-size: var(--fs-klein);
}

/* ---------- meer woningen onderaan ---------- */

.meer__kop {
  font-size: var(--fs-h2);
  margin-bottom: var(--ruimte-md);
}

/* ---------- alle foto's achter een uitklapper ----------
   Een woning heeft er soms vijftig. Die allemaal boven de omschrijving
   zetten duwt de tekst uit beeld, dus ze zitten achter één knop. <details>
   is native: werkt zonder JavaScript en is meteen toetsenbordvriendelijk. */

.galerij__uitklap {
  margin-top: var(--ruimte-sm);
}

.galerij__uitklap > summary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px;
  list-style: none;
  cursor: pointer;
  background: var(--wit);
  border: 1px solid rgba(24, 22, 23, 0.2);
  border-radius: 3px;
  font-size: var(--fs-klein);
  font-weight: var(--gew-body-vet);
  transition: border-color 0.25s var(--ease-luxe), background 0.25s var(--ease-luxe);
}

.galerij__uitklap > summary::-webkit-details-marker {
  display: none;
}

.galerij__uitklap > summary::after {
  content: '▾';
  color: var(--rood-diep);
  transition: transform 0.25s var(--ease-luxe);
}

.galerij__uitklap[open] > summary::after {
  transform: rotate(180deg);
}

.galerij__uitklap > summary:hover {
  border-color: var(--zwart);
}

.galerij__uitklap > summary:focus-visible {
  outline: 2px solid var(--zwart);
  outline-offset: 3px;
}

/* ============================================================
   WONINGPAGINA: DE UITGEBREIDE TEMPLATE (11-09-2026)

   Pararius levert per woning ruim driehonderd velden. Deze blokken geven
   die een plek zonder dat de pagina een gegevensdump wordt: eerst de cijfers
   waar iedereen naar kijkt, dan het verhaal, dan pas de volledige tabel.
   ============================================================ */

/* ---------- etiket en meldingsbalk ---------- */

.woning__etiket {
  display: inline-block;
  margin-bottom: 10px;
  padding: 5px 11px 4px;
  background: var(--zwart);
  color: var(--wit);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  border-radius: 2px;
}

.woning__melding {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ruimte-xs);
  margin-top: var(--ruimte-sm);
  padding: 14px var(--ruimte-sm);
  background: var(--zwart);
  color: var(--wit);
  border-radius: 3px;
}

.woning__melding p {
  font-size: var(--fs-klein);
  font-weight: var(--gew-body-vet);
}

.woning__melding a {
  color: var(--wit);
  font-size: var(--fs-klein);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- de kerncijfers ----------
   De vijf of zes getallen waar een koper als eerste naar kijkt. Bij een
   bouwkavel of een garagebox blijven er minder over; het raster vult zich
   dan vanzelf met wat er wél is. */

.kerncijfers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(122px, 1fr));
  gap: 1px;
  margin-top: var(--ruimte-md);
  background: rgba(24, 22, 23, 0.12);
  border: 1px solid rgba(24, 22, 23, 0.12);
  border-radius: 3px;
  overflow: hidden;
}

.kerncijfers__vak {
  padding: 14px 16px;
  background: var(--wit);
}

.kerncijfers__waarde {
  font-family: var(--font-kop);
  font-size: 1.375rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.kerncijfers__label {
  margin-top: 3px;
  color: var(--steungrijs);
  font-size: 0.8125rem;
}

/* ---------- video en 360 graden ---------- */

.media__blok {
  margin-top: var(--ruimte-lg);
}

.media__speler {
  position: relative;
  margin-top: var(--ruimte-sm);
  padding-bottom: 56.25%;
  background: var(--zwart);
  border-radius: 3px;
  overflow: hidden;
}

.media__speler iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- de kenmerken in twee kolommen ----------
   Negen groepen onder elkaar wordt een lange sliert. Op een breed scherm
   staan ze naast elkaar; een groep breekt nooit doormidden. */

.kenmerken__raster {
  margin-top: 10px;
}

@media (min-width: 900px) {
  .kenmerken__raster {
    columns: 2;
    column-gap: var(--ruimte-lg);
  }

  .kenmerken__groep {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
  }
}

.kenmerken__raster .kenmerken__groep + .kenmerken__groep {
  margin-top: var(--ruimte-md);
}

@media (min-width: 900px) {
  .kenmerken__raster .kenmerken__groep {
    margin-top: 0;
    padding-bottom: var(--ruimte-md);
  }
}

/* Lange waarden (voorzieningen, isolatie) mogen afbreken in plaats van de
   kolom oprekken; dat gaf op 360 px anders horizontale overflow. */
.kenmerken__regel dd {
  overflow-wrap: anywhere;
}

/* ---------- plattegronden ---------- */

.plattegronden {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-top: var(--ruimte-sm);
}

.plattegronden img {
  width: 100%;
  height: auto;
  background: var(--wit);
  border: 1px solid rgba(24, 22, 23, 0.12);
  border-radius: 3px;
  object-fit: contain;
}

.kenmerken__bron {
  margin-top: var(--ruimte-sm);
  color: var(--steungrijs);
  font-size: var(--fs-klein);
}

/* ============================================================
   DE WONINGPAGINA ALS FILMISCHE HERO (12-09-2026)

   Wens van Alexander: klik je op een woning, dan wordt die eerste foto zacht
   groot, met het adres links onderin op de foto, en staat al het overige
   beeldmateriaal met de tekst daaronder.

   De foto is de hoofdfoto die Riet zelf in Pararius heeft aangewezen
   (main_media_id), dezelfde die op Funda bovenaan staat.
   ============================================================ */

.woningkop {
  position: relative;
  /* Loopt van rand tot rand, ook al zit hij in een container. */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  min-height: min(74vh, 720px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--zwart);
}

.woningkop__foto {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
}

.woningkop__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* De zachte zoom: de foto komt binnen op 106% en zakt naar zijn plek. */
  animation: woningkop-zoom 1.4s var(--ease-luxe) both;
}

@keyframes woningkop-zoom {
  from {
    transform: scale(1.06);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Donkere voet onder de foto, zodat de witte letters altijd leesbaar zijn,
   ook op een lichte lucht of een witte gevel. */
.woningkop::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 72%;
  background: linear-gradient(to top, rgba(12, 11, 11, 0.82) 0%, rgba(12, 11, 11, 0.45) 38%, transparent 100%);
  pointer-events: none;
}

.woningkop__binnen {
  position: relative;
  z-index: 1;
  width: min(1180px, 100% - 2 * var(--ruimte-sm));
  margin: 0 auto;
  padding: var(--ruimte-lg) 0 var(--ruimte-md);
  color: var(--wit);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ruimte-sm);
  animation: woningkop-tekst 0.9s var(--ease-luxe) 0.35s both;
}

@keyframes woningkop-tekst {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.woningkop__adres {
  font-size: var(--fs-h1);
  line-height: 1.04;
  color: var(--wit);
  max-width: 16ch;
  overflow-wrap: break-word;
}

.woningkop__plaats {
  margin-top: 8px;
  font-size: var(--fs-body-groot);
  color: rgba(255, 255, 255, 0.86);
}

.woningkop__prijsblok {
  text-align: right;
  margin-left: auto;
}

.woningkop__prijs {
  font-family: var(--font-kop);
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--wit);
  font-variant-numeric: tabular-nums;
}

.woningkop__merken {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.woningkop__merk {
  display: inline-block;
  padding: 5px 11px 4px;
  background: var(--rood-vlak);
  color: var(--wit);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  border-radius: 2px;
}

.woningkop__merk--stil {
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(2px);
}

.woningkop__teller {
  position: absolute;
  right: var(--ruimte-sm);
  top: var(--ruimte-sm);
  z-index: 1;
  padding: 9px 15px 8px;
  background: rgba(12, 11, 11, 0.55);
  backdrop-filter: blur(3px);
  color: var(--wit);
  font-family: inherit;
  font-size: var(--fs-klein);
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.25s var(--ease-luxe);
}

.woningkop__teller:hover {
  background: rgba(12, 11, 11, 0.78);
}

.woningkop__teller:focus-visible {
  outline: 2px solid var(--wit);
  outline-offset: 2px;
}

/* De hoofdfoto opent dezelfde serie als de teller. */
.woningkop__foto img {
  cursor: zoom-in;
}

@media (max-width: 700px) {
  .woningkop {
    min-height: min(62vh, 520px);
  }

  .woningkop__binnen {
    padding: var(--ruimte-md) 0 var(--ruimte-sm);
  }

  .woningkop__adres {
    font-size: clamp(1.75rem, 1.2rem + 4vw, 2.5rem);
    max-width: 100%;
  }

  .woningkop__prijsblok {
    text-align: left;
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .woningkop__foto img,
  .woningkop__binnen {
    animation: none;
  }
}

/* ---------- al het beeldmateriaal onder de hero ---------- */

.beeld {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: 10px;
  margin-top: var(--ruimte-md);
}

.beeld img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: 3px;
  background: rgba(24, 22, 23, 0.06);
}

/* De knop om de foto heen doet niets aan de vorm: hij is er voor de muis, het
   toetsenbord en de schermlezer. Alleen de cursor en een lichte verdieping bij
   hover verraden dat je erop kunt klikken. */
.beeld__knop {
  display: block;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 3px;
  cursor: zoom-in;
}

.beeld__knop img {
  transition: opacity 0.25s var(--ease-luxe);
}

.beeld__knop:hover img {
  opacity: 0.88;
}

.beeld__knop:focus-visible {
  outline: 2px solid var(--zwart);
  outline-offset: 3px;
}

.beeld__meer {
  margin-top: var(--ruimte-sm);
}

/* ---------- het contactblok compacter ----------
   Stond op var(--fs-h3) met veel lucht eromheen; daardoor paste "Interesse in
   deze woning?" met het formulier niet meer in één scherm. (Alexander, 12-09) */

.zijblok {
  padding: var(--ruimte-sm);
}

.zijblok__kop {
  font-size: 1.3125rem;
  line-height: 1.2;
}

.zijblok__tekst {
  margin-top: 6px;
  font-size: var(--fs-klein);
}

.zijblok__knoppen {
  margin-top: var(--ruimte-xs);
  gap: 8px;
}

.zijblok__deel {
  margin-top: var(--ruimte-xs);
  padding-top: var(--ruimte-xs);
}

/* ---------- het formulier in het zijblok ----------
   Alleen hier compacter, niet op de contactpagina: daar is alle ruimte er
   wel. In het zijblok telt elke pixel, want kop, knoppen en vier velden
   moeten samen in één scherm passen. De invoervelden houden 16 px letter,
   anders zoomt Safari op de iPhone bij het aantikken in. */

.zijblok .form__raster {
  gap: var(--ruimte-xs);
}

.zijblok .form__veld {
  gap: 4px;
}

.zijblok .form input,
.zijblok .form select,
.zijblok .form textarea {
  padding: 9px 12px;
}

.zijblok .form textarea {
  min-height: 74px;
}

.zijblok .form__veld label {
  font-size: 0.875rem;
}

/* De belknop is de hoofdactie en blijft vol breed; mailen staat eronder als
   link. Twee knoppen onder elkaar kostten alleen maar hoogte. */
.zijblok__knoppen {
  display: grid;
  gap: 8px;
  justify-items: stretch;
}

.zijblok__mail {
  justify-self: center;
  color: var(--zwart);
  font-size: var(--fs-klein);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.zijblok__mail:hover {
  color: var(--rood-diep);
}

.zijblok .form__veld label {
  line-height: 1.3;
}

.zijblok .form input,
.zijblok .form select {
  padding: 8px 12px;
}

.zijblok .form button[type='submit'] {
  padding-top: 12px;
  padding-bottom: 12px;
}

.zijblok {
  padding: 18px;
}

/* ============================================================
   DE LICHTBAK: ÉÉN FOTO SCHERMVULLEND
   Markup in components/Lichtbak.tsx. Het is een echte <dialog>, dus de
   achtergrond doet niet meer mee en Escape sluit vanzelf.
   ============================================================ */

.lichtbak {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  padding: 0;
  background: transparent;
  border: 0;
  overflow: hidden;
}

.lichtbak::backdrop {
  background: rgba(12, 11, 11, 0.93);
}

/* Zolang de lichtbak open staat, scrollt de pagina eronder niet mee. */
html:has(.lichtbak[open]) {
  overflow: hidden;
}

.lichtbak__binnen {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: clamp(12px, 3vw, 40px);
}

.lichtbak__foto {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 3px;
  /* De foto vangt de klik zelf op, zodat alleen ernaast klikken sluit. */
  cursor: default;
}

.lichtbak__teller {
  position: absolute;
  left: 50%;
  bottom: clamp(12px, 2.5vw, 28px);
  transform: translateX(-50%);
  margin: 0;
  padding: 7px 14px 6px;
  color: var(--wit);
  font-size: var(--fs-klein);
  background: rgba(12, 11, 11, 0.55);
  border-radius: 2px;
}

.lichtbak__knop {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  color: var(--zwart);
  background: var(--papier);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  cursor: pointer;
  transition:
    background-color 0.25s var(--ease-luxe),
    transform 0.25s var(--ease-luxe);
}

.lichtbak__knop:hover {
  background: var(--wit);
}

.lichtbak__knop:active {
  transform: scale(0.96);
}

.lichtbak__knop:focus-visible {
  outline: 2px solid var(--wit);
  outline-offset: 3px;
}

.lichtbak__knop--sluit {
  top: clamp(12px, 2.5vw, 28px);
  right: clamp(12px, 2.5vw, 28px);
}

.lichtbak__knop--terug {
  top: 50%;
  left: clamp(12px, 2.5vw, 28px);
  margin-top: -26px;
}

.lichtbak__knop--verder {
  top: 50%;
  right: clamp(12px, 2.5vw, 28px);
  margin-top: -26px;
}

/* Op een telefoon staan de bladerknoppen onderin naast de teller: in het
   midden van het scherm liggen ze over de foto, en daar wordt geveegd. */
@media (max-width: 700px) {
  .lichtbak__knop--terug,
  .lichtbak__knop--verder {
    top: auto;
    bottom: clamp(12px, 2.5vw, 28px);
    margin-top: 0;
  }

  /* De foto houdt onderaan ruimte vrij voor de knoppenrij, anders staan de
     bladerknoppen over de onderste strook van de foto heen. */
  .lichtbak__binnen {
    padding-bottom: 80px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lichtbak__knop,
  .beeld__knop img {
    transition: none;
  }
}