/* =========================================================================
   Deurloo & Wisse — stijlblad
   -------------------------------------------------------------------------
   Volgt het originele ontwerp (Claude Design "Makelaar Website v4"): dezelfde
   kleuren, maten, letterbreedtes en zwarte haarlijnen. Wat is toegevoegd, is
   er voor mobiel en toegankelijkheid — het ontwerp was op één schermbreedte
   getekend.

     1. Tokens                      7. Woningkaarten en aanbod
     2. Basis en toegankelijkheid   8. Woningdetail
     3. Typografie                  9. Overige blokken
     4. Layout en hulpklassen      10. Print
     5. Balk, lade, voettekst
     6. Formulieren en filters

   SPATIËRING — gebruik de tokens en de hulpklassen uit blok 4, niet losse
   waarden in de views. Verticale ruimte tussen secties: --sectie-s/m/l.
   Ruimte binnen een blok: --ruimte-1 t/m --ruimte-7.
   ========================================================================= */

/* 1. TOKENS ============================================================== */

:root {
  /* Kleur */
  --papier: #efe9e0;
  --papier-diep: #e0d8cb;
  --inkt: #16171c;
  /* Warm, net als het papier. Deze tint droeg álle secundaire tekst en was
     blauwzwemend (#4f535c) terwijl de ondergrond warm crème is; in korte
     regels merk je dat niet, in hele kolommen leest het lei-achtig en vaal
     tegen de rest. Contrast blijft ruim boven 4,5:1 op #efe9e0. */
  --inkt-zacht: #57524b;         /* warme grijstint, 6,4:1 op papier */
  /* Twee lijnwaarden, niet één. --lijn is de volle inktlijn uit het ontwerp en
     tekent de buitenkant: de rand van een kader, de scheiding tussen secties.
     --lijn-zacht is voor de rijen bínnen zo'n blok. Met alleen de volle lijn was
     de rand van een kader niet te onderscheiden van de rijen erin, viel een
     paneel uiteen in losse hokjes, en las een kop boven een sectielijn als een
     onderstreepte link. Allebei currentColor, dus ze werken ook op inkt. */
  --lijn: currentColor;
  --lijn-zacht: color-mix(in srgb, currentColor 26%, transparent);
  --accent: #ff5a2b;             /* alleen als vlak, met donkere tekst erop */
  --accent-tekst: #a8441f;       /* leesbare variant voor tekstlinks: 4,96:1 */
  --accent-diep: #7d3319;
  --paneel: #16171c;
  --paneel-tekst: #efe9e0;
  --paneel-zacht: #b3b0a9;
  --paneel-lijn: rgba(239, 233, 224, .5);   /* 4,6:1 — zichtbaar genoeg als rand */
  /* Eén groen in twee lichtheden, niet twee groenen: --succes voor randen en
     tekst op papier, --succes-licht voor vlakken op inkt. Eerder kreeg "open
     huis" mintgroen op een kaartje en bosgroen op de woningpagina, en dat leest
     als twee verschillende betekenissen. */
  --succes: #16513a;
  --succes-licht: #5fae87;
  --fout: #b3261e;
  --nacht: #0e0f13;              /* achtergrond achter de hero */
  --roest: #8f3d20;              /* tweede accent: voortgang, "onder bod" */

  /* Typografie */
  --font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;

  /* De tekstladder. Hiervoor stonden er zestien losse pixelmaten in dit blad —
     11, 11.5, 12, 12.5, 13, 13.5, 14, 15, 15.5, 16, 17, 18, 19, 20, 21 — en
     verschillen van een halve pixel ziet niemand; het leest als een verzameling
     in plaats van een systeem. Vijf tredes plus één maat voor de micro-
     kapitaaltjes, en elke trede is duidelijk anders dan de vorige.
     Koppen hebben hun eigen, vloeiende ladder (.display t/m .titel-s). */
  --t-label: 11.5px;   /* uitsluitend voor gespatieerde kapitalen */
  --t-xs: 12px;        /* voettekst, badges, tellers */
  --t-s: 13.5px;       /* meta, hulptekst, bijschriften */
  --t-m: 16px;         /* broodtekst — ook de ondergrens voor invoervelden op iOS */
  --t-l: 18px;         /* nadruk binnen een blok */
  --t-xl: 21px;        /* kaarttitels */

  /* Spatiëring */
  --rand: clamp(18px, 5vw, 28px);
  --breedte: 1760px;             /* bovengrens, anders rekt de compositie uit */
  /* DE rooilijn. Alles wat aan de linkerkant van de pagina begint gebruikt
     --marge, nooit --rand: boven 1816px groeit de marge mee en zou een blok
     met kale --rand 52px uit de lijn vallen. */
  --marge: max(var(--rand), (100vw - var(--breedte)) / 2);
  --ruimte-1: 6px;
  --ruimte-2: 10px;
  --ruimte-3: 14px;
  --ruimte-4: 20px;
  --ruimte-5: 28px;
  --ruimte-6: 40px;
  --ruimte-7: 56px;
  /* Twee maten voor omkaderde blokken. Gebruik .doos of .kader; zet nooit
     een eigen padding op een blok, anders beginnen de labels erin niet op
     dezelfde lijn als die van het blok ernaast. */
  /* De zijkant schaalt mee met het scherm. Vast op 24 en 28px hield een blok op
     een scherm van 305px werkbreedte alleen al 56px aan lucht over, waardoor de
     inhoud niet meer paste en /kopen een horizontale schuifbalk kreeg. */
  --doos: 26px clamp(16px, 5vw, 24px);
  --doos-l: 30px clamp(18px, 6vw, 28px);
  --sectie-s: clamp(34px, 5vw, 56px);
  --sectie-m: clamp(46px, 7vw, 72px);
  --sectie-l: clamp(56px, 8vw, 96px);

  --balk: 66px;                  /* werkelijke hoogte: 40px knop + 12/14 padding */
  --soepel: cubic-bezier(.16, 1, .3, 1);

  color-scheme: light;
}

/* 2. BASIS EN TOEGANKELIJKHEID =========================================== */

*, *::before, *::after { box-sizing: border-box; }

/* Het hidden-attribuut moet altijd winnen. Zonder deze regel verslaat elke
   `display: grid/flex` in dit blad de UA-regel, en dan is `hidden` in de
   markup én in JavaScript stilzwijgend zonder effect. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--balk) + 14px);
  /* Zonder deze regel rekent 100vw in --marge over de schuifbalk heen en
     verspringt de rooilijn zodra een pagina wel/niet scrolt. */
  scrollbar-gutter: stable;
}
/* De vaste actiebalk onderaan mag geen gefocust element bedekken (SC 2.4.11) */
@media (max-width: 899px) {
  html:has(.actiebalk) { scroll-padding-bottom: 96px; }
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--inkt);
  font-family: var(--font);
  /* 16px, niet 15: op de woningpagina viel 54% van de zichtbare tekst onder de
     14px en een derde onder de 13px. Een makelaarssite wordt voor een groot
     deel gelezen door mensen die hun leesbril niet bij de hand hebben. */
  font-size: var(--t-m);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Lange adressen, e-mailadressen en URL's mogen nooit de layout oprekken */
p, li, dd, dt, h1, h2, h3, h4, a, span, address { overflow-wrap: break-word; }

img { display: block; max-width: 100%; height: auto; background: var(--papier-diep); }

a { color: var(--accent-tekst); text-decoration: none; }
a:hover { color: var(--accent-diep); text-decoration: underline; }

/* Links in lopende tekst moeten ook zonder kleur herkenbaar zijn (SC 1.4.1) */
p a, li a, dd a, address a, figcaption a, .melding a, .tekstpagina a, .artikel-inhoud a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
.voet p a, .melding a { color: inherit; }

::selection { background: var(--accent); color: #16171c; }

:where(button, input, select, textarea) { font: inherit; color: inherit; }

/* Focus: donker op papier (14,8:1), accent op donkere vlakken (5,8:1) */
:focus-visible { outline: 3px solid var(--inkt); outline-offset: 3px; }
.balk :focus-visible, .lade :focus-visible, .hero :focus-visible,
.galerij :focus-visible, .donker :focus-visible, .paginakop :focus-visible,
.prijsblok :focus-visible, .cta :focus-visible, .filterbalk :focus-visible,
.actiebalk :focus-visible { outline-color: var(--accent); }

.overslaan {
  position: absolute; left: var(--marge); top: -100px; z-index: 200;
  padding: 12px 18px; background: var(--accent); color: #16171c; font-weight: 700;
  transition: top .16s ease;
}
.overslaan:focus { top: 10px; text-decoration: none; }

.verborgen-tekst {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.alleen-breed { display: none; }
@media (min-width: 640px) { .alleen-breed { display: inline; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* 3. TYPOGRAFIE ========================================================== */

h1, h2, h3, h4 { margin: 0; }

.display, .titel-xl, .titel-l, .titel-m, .titel-s,
h1, h2, h3, h4 {
  font-weight: 700;
  font-stretch: 112%;
  letter-spacing: -.03em;
  line-height: 1;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }

/* Optische correctie op de linkerrand van grote koppen. De waarde komt uit
   App\Support\Optisch en staat als --optisch in het style-attribuut; zonder
   waarde gebeurt er niets.
   .optisch-regel is de variant per regel: elke regel van een kop met een <br>
   erin krijgt zijn eigen verschuiving, want de tweede regel begint met een
   andere letter. `display: block` maakt van elke span een eigen regel, zodat de
   <br> kan vervallen en de marge werkt. */
.optisch { margin-left: var(--optisch, 0); }
/* overflow-wrap hier óók: elke regel van een kop is een <span>, en de globale
   regel `span { overflow-wrap: break-word }` won van de bescherming die alleen
   op .display en .titel-xl stond. Op de contactpagina knapte de kop daardoor
   middenin het woord: "VOORBEELDSTR / AAT 1", zonder afbreekstreepje, in de
   grootste letter van het scherm. Nu breekt hij op een lettergreep. */
.optisch-regel {
  display: block; margin-left: var(--optisch, 0);
  overflow-wrap: normal; hyphens: auto;
}

/* De ondergrens was 44px en daarmee paste "WALCHEREN" op een telefoon met vier
   pixel speling in de regel — één letter langer en de kop brak middenin het
   woord af tot "WALCHERE / N". Dat is voor een template waarin de klant zijn
   eigen kop typt geen marge maar toeval. Lager beginpunt, en midden in een
   woord afbreken mag hier niet: een afbreekstreepje op de juiste plek leest als
   een keuze, een woord dat doormidden knapt als een fout. */
.display {
  font-size: clamp(34px, 9.4vw, 150px);
  font-stretch: 125%; line-height: .82; letter-spacing: -.045em; text-transform: uppercase;
  overflow-wrap: normal; hyphens: auto;
}
.titel-xl {
  font-size: clamp(32px, 7vw, 104px);
  font-stretch: 120%; line-height: .86; letter-spacing: -.04em; text-transform: uppercase;
  overflow-wrap: normal; hyphens: auto;
}
/* .titel-ls en .titel-m liepen naast elkaar op 32px en 34px: twee tredes met
   twee pixel verschil, dus een sectiekop en de koppen ín die sectie waren op
   het oog even groot en de hiërarchie viel plat. De ladder is nu 21 · 25 · 34 ·
   46, met een merkbare stap tussen elke trede. */
/* De afstand tot de volgende tekst hangt aan de kop, niet aan de alinea. Zat
   hij aan de alinea, dan kreeg een kop gevolgd door een lead 27px lucht en een
   kop gevolgd door gewone tekst 11px — twee koppen op dezelfde pagina plakten
   daardoor zichtbaar tegen hun eigen tekst aan. */
.titel-l + *, .titel-ls + *, .titel-m + *, .titel-s + * { margin-top: var(--ruimte-4); }
.titel-l  { font-size: clamp(28px, 3.8vw, 46px); font-stretch: 118%; line-height: .95; text-transform: uppercase; }
.titel-ls { font-size: clamp(19px, 2.1vw, 25px); font-stretch: 117%; line-height: 1.1; letter-spacing: -.02em; text-transform: uppercase; }
/* Kleinere koppen krijgen ruimere optische waarden: op 18–22px versaal
   raken regels elkaar bij line-height 1 en werkt negatieve tracking tegen. */
.titel-m  { font-size: clamp(23px, 2.9vw, 34px); font-stretch: 114%; line-height: 1.06; letter-spacing: -.02em; text-transform: uppercase; }
.titel-s  { font-size: clamp(17px, 1.9vw, 21px); font-stretch: 110%; line-height: 1.14; letter-spacing: -.005em; text-transform: uppercase; }

.lead {
  font-family: var(--font-serif); font-weight: 300;
  font-size: clamp(24px, 2.9vw, 40px); line-height: 1.28; letter-spacing: -.01em;
  text-transform: none; font-stretch: 100%;
}
.serif { font-family: var(--font-serif); font-size: var(--t-l); line-height: 1.55; }
.serif-groot { font-family: var(--font-serif); font-size: clamp(18px, 1.6vw, 21px); line-height: 1.65; }

/* Micro-kapitaaltjes in twee tredes, meer niet: .label voor bovenkopjes,
   .label--kort voor labels binnen een blok. Alles wat er eerder los
   omheen zweefde (filterkoppen, kerncijferlabels, veldlabels) haakt hier
   nu op aan. */
.label, .filters__kop, .kerncijfers dt {
  margin: 0; font-size: var(--t-label); font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--inkt-zacht);
}
.label--kort { font-size: var(--t-label); letter-spacing: .16em; }
/* Veldlabels stonden op 11,5px in wijd gespatieerde kapitalen — van alle tekst
   op de site het lastigst leesbaar, en dan precies boven de velden waar iemand
   zijn gegevens moet invullen. Nu gewoon leesbaar, met de micro-kapitaaltjes
   alleen nog voor bovenkopjes. */
.veld > label {
  font-size: var(--t-s); letter-spacing: .01em; text-transform: none;
  font-weight: 600; color: var(--inkt);
}
.zacht { color: var(--inkt-zacht); }
.klein { font-size: var(--t-s); line-height: 1.6; }
.nadruk { font-weight: 700; font-stretch: 112%; letter-spacing: -.02em; }
.cijfer { font-variant-numeric: tabular-nums; }

/* Op donkere vlakken schuiven de grijstinten mee */
/* .lade hoort hier ook bij: het uitschuifmenu is een zwart vlak, maar het stond
   niet in deze lijst. De adresregel onderin gebruikte daardoor de grijstint voor
   licht papier en haalde 2,32:1 op zwart — op elke pagina, in het menu dat op
   een telefoon de hoofdnavigatie is. */
.donker, .paginakop, .prijsblok, .cta, .filterbalk, .kruimels, .lade {
  --inkt: var(--paneel-tekst);
  --inkt-zacht: var(--paneel-zacht);
  --fout: #ff8a80;               /* rood op #16171c: 7,8:1 in plaats van 2,7:1 */
  --succes: var(--succes-licht);   /* zelfde groen, lichtere trede voor op inkt */
  --accent-tekst: var(--accent);  /* 5,7:1 op donker; de leesvariant is te donker */
  background: var(--paneel);
  color: var(--paneel-tekst);
}
/* Twee donkere vlakken onder elkaar hebben een scheiding nodig */
.paginakop + .filterbalk { border-top: 1px solid var(--paneel-lijn); }
.donker a:not(.knop), .cta a:not(.knop), .filterbalk a:not(.knop):not(.chip),
.prijsblok a:not(.knop), .paginakop a:not(.knop) { color: var(--accent); }
/* De actieve-filterchip is geen tekstlink, dus hij pakt de accentkleur van de
   regel hierboven niet. Zijn eigen kleuren staan bij .chip--actief; hier stond
   een restant uit de tijd dat hij oranje gevuld was (donkere tekst), en dat
   maakte de chip na het omlijnen onleesbaar: donker op donker. */
.filterbalk .chip--actief { color: inherit; }

/* 4. LAYOUT EN HULPKLASSEN =============================================== */

/* Boven --breedte stopt de compositie met rekken; de marge groeit dan mee.
   .voet__klein staat hier bewust NIET tussen: dat blok zit ín .voet, die de
   marge al zet, dus kreeg de juridische regel de inspringing twee keer en
   stond hij op elke pagina één gutter uit het lood met de rest van de voet. */
.balk, .rand, .rek, .duimen, .voet,
.paginakop, .filterbalk, .kruimels, .galerij__balk, .galerij__terug, .actiebalk {
  padding-inline: var(--marge);
}
.galerij__terug { padding-inline: 0; left: var(--marge); }

.sectie { padding-block: var(--sectie-l); }
.pt-s { padding-top: var(--sectie-s); }  .pb-s { padding-bottom: var(--sectie-s); }
.pt-m { padding-top: var(--sectie-m); }  .pb-m { padding-bottom: var(--sectie-m); }
.pb-l { padding-bottom: var(--sectie-l); }

.mt-1 { margin-top: var(--ruimte-1); } .mt-2 { margin-top: var(--ruimte-2); }
.mt-3 { margin-top: var(--ruimte-3); } .mt-4 { margin-top: var(--ruimte-4); }
.mt-5 { margin-top: var(--ruimte-5); } .mt-6 { margin-top: var(--ruimte-6); }
.mt-7 { margin-top: var(--ruimte-7); }

.mb-1 { margin-bottom: var(--ruimte-1); }
.mb-2 { margin-bottom: var(--ruimte-2); }
.mb-4 { margin-bottom: var(--ruimte-4); }
.geen-marge { margin: 0; }

/* ch is de breedte van een nul en die is breder dan een gemiddelde letter, dus
   64ch leverde in de praktijk 94 tekens per regel op — ruim boven de leesbare
   45–75. Gemeten over alle pagina's zat alleen maat-l daarboven; de andere
   tredes blijven zoals ze waren. */
.maat    { max-width: 56ch; }
.maat-s  { max-width: 44ch; }
.maat-l  { max-width: 58ch; }
.maat-xl { max-width: 74ch; }
.maat-form { max-width: 560px; }

/* Tussenruimte binnen een rij, stapel of raster — dezelfde ladder als de
   marges, zodat er geen losse gap-waarden in de views hoeven te staan. */
.gap-1 { gap: var(--ruimte-1); }
.gap-2 { gap: var(--ruimte-2); }
.gap-3 { gap: var(--ruimte-3); }
.gap-4 { gap: var(--ruimte-4); }
.gap-0 { gap: 0; }

.midden { text-align: center; }
.relatief { position: relative; min-width: 0; }
.erf-kleur { color: inherit; }
/* Maakt de hele kaart klikbaar zonder de link zelf op te rekken. */
.dek-vlak { position: absolute; inset: 0; }
.beeld-vullend { width: 100%; height: 100%; object-fit: cover; }
.portret { flex: none; object-fit: cover; }
.portret--s { width: 52px; height: 65px; }
.portret--m { width: 70px; height: 88px; }

/* Contactgegevens: label erboven, waarde eronder */
.gegeven { margin-top: 7px; font-size: var(--t-m); line-height: 1.7; font-style: normal; }

.groot { font-size: var(--t-m); }
.normaal { text-transform: none; }
.spatie { letter-spacing: .1em; }
.inkt { color: var(--inkt); }
.accent-tekst { color: var(--accent-tekst); }
.terzijde { font-style: italic; color: var(--inkt-zacht); }
.uitlijn-start { align-items: start; }
.naar-rechts { margin-left: auto; }
.anker { scroll-margin-top: 70px; }
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.schuif { width: 100%; accent-color: var(--accent); }
.midden-blok { margin: var(--ruimte-3) auto var(--ruimte-5); max-width: 52ch; }

/* Rij met een haarlijn erboven: kerncijfers op de homepage, open-huis-lijst,
   kaartlijst bij de kaartweergave. Eén patroon, drie plekken. */
/* baseline, niet center: met een adres van 21px links en een metaregel van
   13px rechts zakte de kleine tekst zichtbaar weg. */
.lijnrij {
  position: relative;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  gap: 16px; padding: 13px 0; border-top: 1px solid var(--lijn);
}
/* De rij is 45px hoog, het adres erin maar 19 — en je moest precies op die
   letters mikken terwijl de rest van de regel er duidelijk bij hoort. De link
   pakt nu de hele rij. Meteen ook het raakvlak op orde (WCAG 2.2 SC 2.5.8).
   Let op: géén `position: relative` op de link zelf — dan wordt de link zijn
   eigen houvast en dekt het vlak precies de letters weer af. Het houvast is
   .lijnrij hierboven. */
.lijnrij > a::after { content: ""; position: absolute; inset: 0; }
.lijnrij--breed {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  gap: 20px; padding: 15px 0; border-top: 1px solid var(--lijn);
}
.tijdlijn {
  display: grid; grid-template-columns: 90px 1fr; gap: var(--ruimte-5);
  padding: 18px 0; border-top: 1px solid var(--lijn-zacht);
}
/* Eén trede groter dan de standaard kleine tekst. Deze lijst staat pal naast
   een serif-lead van 40px; met 13,5px ernaast is het verschil zo groot dat de
   jaartallen als voetnoot lezen in plaats van als het verhaal ernaast. */
.tijdlijn p { font-size: var(--t-m); line-height: 1.55; }
/* Op een telefoon hield deze lijst zijn twee desktopkolommen vast: links een
   jaartal, rechts een kolom van dertig tekens die in vier korte regels brak.
   Het jaartal gaat daar boven de tekst staan. */
@media (max-width: 639px) {
  .tijdlijn { grid-template-columns: 1fr; gap: var(--ruimte-1); }
}
.raster--kenmerken { gap: 8px 44px; }
.midden-rij { justify-content: center; }
.halfvet { font-weight: 600; }
.pb-6 { padding-bottom: var(--ruimte-6); }
/* Opsommingen binnen een blok: één patroon in plaats van vijf varianten. */
.lijst { margin: 0; padding-left: 20px; display: grid; gap: var(--ruimte-1); }
.lijst--ruim { gap: var(--ruimte-2); }

.spatie-s { letter-spacing: .06em; }
.spatie-xs { letter-spacing: .04em; }
.ruim { line-height: 1.7; }
.uitlijn-basislijn { align-items: baseline; }
.zelf-start { align-self: start; }
.geen-doos { margin: 0; padding: 0; border: 0; }
.normaal-tekst { font-weight: 400; text-transform: none; letter-spacing: 0; }
.pt-1 { padding-top: var(--ruimte-1); }
.py-2 { padding-block: var(--ruimte-2); }
.raster--gegevens { gap: 26px 32px; }
.beeld-4-5 { aspect-ratio: 4 / 5; overflow: hidden; background: var(--papier-diep); }

/* :where() houdt de basiswaarde op specificiteit 0, zodat een hulpklasse
   als .gap-3 of een patroon als .lijnrij hem kan overschrijven ongeacht de
   volgorde in dit bestand. */
:where(.split) { display: grid; gap: clamp(28px, 4vw, 56px); }
.split { display: grid; }
/* Een rasteritem is standaard minstens zo breed als zijn langste ondeelbare
   woord, ook als de kolom smaller is. Eén adres van 850px in de kop liep
   daardoor dwars onder het prijspaneel in de kolom ernaast door. */
.split > * { min-width: 0; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1.35fr 1fr; align-items: end; }
  .split--gelijk { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .split--breed  { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
  .split--kopen  { grid-template-columns: 1.1fr .9fr; align-items: start; }
}

:where(.raster) { display: grid; gap: 24px; }
.raster { display: grid; }
@media (min-width: 640px) { .raster--3, .raster--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) {
  .raster--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 24px; }
  .raster--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
}
@media (min-width: 700px) { .raster--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

:where(.rij) { gap: 12px; align-items: center; }
.rij { display: flex; flex-wrap: wrap; }
.rij--tussen { justify-content: space-between; }
.rij--vast { flex-wrap: nowrap; }
:where(.stapel) { gap: 12px; }
.stapel { display: flex; flex-direction: column; }
/* color: inherit is nodig, niet decoratief. De browser geeft een <hr> een eigen
   kleur (grijs), dus currentColor — waar --lijn op staat — viel daarop terug.
   De sluitlijn van een lijst was daardoor een andere tint dan de rijscheidingen
   erboven, op exact dezelfde breedte. */
.streep { border: 0; border-top: 1px solid var(--lijn); margin: 0; color: inherit; }
/* Voor lijstjes waarvan de tussenlijnen zacht zijn: een slotlijn hoort nooit
   zwaarder te zijn dan de lijnen die hij afsluit. */
.streep--zacht { border-top-color: var(--lijn-zacht); }
/* :where() zet het gewicht op nul. Deze regel bestaat alleen om de standaard
   van de browser weg te halen en hoort daarom van élke opmaakklasse te
   verliezen. Zonder :where() won hij van .mt-4 — hij staat later in het blad en
   weegt even zwaar — en stond de adressenlijst op de kaartweergave pal tegen
   de kop erboven, zonder een millimeter lucht. */
:where(.lijst-schoon) { list-style: none; margin: 0; padding: 0; }

.sectie-kop {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
  gap: 16px; margin-bottom: var(--ruimte-5);
}

/* Knoppen --------------------------------------------------------------- */

.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 14px 24px;
  border: 1px solid transparent; background: var(--accent); color: #16171c;
  font-size: var(--t-s); line-height: 1.4; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  text-align: center; cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.knop:hover { background: var(--inkt); color: var(--papier); text-decoration: none; }
.donker .knop:hover, .cta .knop:hover, .prijsblok .knop:hover,
.filterbalk .knop:hover, .paginakop .knop:hover, .hero .knop:hover,
.actiebalk .knop:hover, .lade .knop:hover { background: var(--papier); color: var(--paneel); }

.knop--lijn { background: transparent; border-color: currentColor; color: inherit; }
.knop--lijn:hover { background: var(--inkt); color: var(--papier); }
/* Op donkere vlakken is --inkt licht; daar moet de hover andersom. */
.donker .knop--lijn:hover, .cta .knop--lijn:hover, .prijsblok .knop--lijn:hover,
.filterbalk .knop--lijn:hover, .paginakop .knop--lijn:hover, .actiebalk .knop--lijn:hover,
.hero .knop--lijn:hover { background: var(--paneel-tekst); color: var(--paneel); }

/* .knop--donker is vervallen. Hij stond op precies één plek — de verzendknop
   van het contactformulier — en maakte daarmee de enige primaire actie van de
   site zwart in plaats van accent, juist bij de handeling die het meest
   oplevert. */
/* Een gevulde knop die niet om aandacht vraagt: crème vlak, inkt letter. Voor
   de plek waar een knop wél de hoofdactie van zijn blok is, maar er op dat
   moment niets te doen valt — de verstuurknop van de filterbalk zolang je nog
   niets hebt gewijzigd. Als lijnknop was hij niet van de weergavewissel ernaast
   te onderscheiden; in accentoranje trok hij de aandacht naar een handeling die
   niets zou veranderen. */
.knop--zacht { background: var(--papier); color: var(--paneel); border-color: transparent; }
/* Twee selectoren diep, want `.filterbalk .knop:hover` maakt een knop op een
   donker vlak juist crème — precies de rustkleur hierboven, waardoor aanwijzen
   niets deed. Bij aanwijzen wordt hij alsnog accent: dan is hij aan de beurt. */
.filterbalk .knop--zacht:hover, .donker .knop--zacht:hover {
  background: var(--accent); color: #16171c;
}
.knop--klein { min-height: 40px; padding: 9px 16px; font-size: var(--t-xs); letter-spacing: .06em; }
.knop--ruim { padding: 15px 24px; }   /* knoppenstapel in het prijsblok */
.knop--breed { width: 100%; }
/* Binnen een formulier is de verstuurknop op een telefoon net zo breed als de
   velden erboven; smaller leest als een halfbakken afsluiting van de kolom. */
@media (max-width: 639px) {
  .formulier > .knop, .formulier button[type="submit"] { width: 100%; }
}
.knop:disabled { opacity: .45; cursor: not-allowed; }

.pijl {
  width: 44px; height: 44px; flex: none;
  border: 1px solid currentColor; background: transparent; color: inherit;
  font-size: var(--t-m); cursor: pointer;
}
.pijl:hover { background: var(--inkt); color: var(--papier); }
/* aria-disabled, niet het disabled-attribuut: zie de toelichting in site.js.
   De knop blijft dus focusbaar en ziet er alleen uit alsof hij niets doet. */
.pijl--uit, .pijl:disabled { opacity: .3; cursor: default; }
.pijl--uit:hover, .pijl:disabled:hover { background: transparent; color: inherit; }

/* 5. BALK, LADE, VOETTEKST =============================================== */

.balk {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  min-height: var(--balk);
  padding-block: 12px 14px;
  color: #fff; background: var(--paneel);
  font-size: var(--t-xs); letter-spacing: .04em;
  transition: background .3s ease, padding .3s ease;
}
body { padding-top: var(--balk); }
body.met-hero { padding-top: 0; }

/* Zweeft over de hero, maar loopt niet naar volledig doorzichtig: onderaan
   blijft .62 staan, zodat de menutekst ook boven een lichte lucht leesbaar is. */
/* .82 onderaan in plaats van .62: boven een lichte lucht composeerde de oude
   waarde naar rgb(97,95,94), en daarop haalde de oranje focusring nog maar
   2,03:1 (SC 1.4.11 vraagt 3:1). De menutekst zat wel goed, alleen de ring niet. */
body.met-hero .balk:not(.balk--vast) {
  background: linear-gradient(180deg, rgba(10, 11, 15, .90), rgba(10, 11, 15, .82));
  padding-bottom: 22px;
}
/* En voor de zekerheid een dubbele ring in de hero: een witte kern met een
   donkere buitenring werkt op elke foto, ongeacht wat eronder ligt. */
.hero :focus-visible, body.met-hero .balk:not(.balk--vast) :focus-visible {
  outline-color: #fff;
  box-shadow: 0 0 0 6px rgba(10, 11, 15, .9);
}

/* flex: 0 1 auto met min-width: 0 — met `flex: none` kon de naam niet krimpen
   en werd de hamburger bij 320 CSS-px (SC 1.4.10) buiten beeld geduwd: 161 +
   20 + 148 px in 284 px beschikbare ruimte. Er is geen horizontale scrollbalk
   om hem alsnog te bereiken, dus het menu was daar simpelweg weg. Nu wijkt de
   kantoornaam en blijven de knoppen staan. */
.balk__merk {
  /* Krimpt alleen als er echt niets anders overblijft: shrink 1 tegenover 6 op
     de statusregel ernaast. Zonder die verhouding gaf de naam als eerste toe en
     stond er op 940px nog 26 pixels van "DEMO MAKELAARS" in beeld. */
  flex: 0 1 auto; flex-shrink: 1; min-width: 0; color: #fff;
  padding-block: 2px;                          /* 24px aanraakvlak (SC 2.5.8) */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--t-s); font-weight: 700; font-stretch: 118%; letter-spacing: .01em; text-transform: uppercase;
}
.balk__merk:hover { color: #fff; text-decoration: none; border-bottom: 1px solid var(--accent); }

/* Niets afkappen, wel weglaten. Elk onderdeel heeft een eigen drempel, en die
   drempels zijn uitgerekend en nagemeten in plaats van geschat — anders staat
   er ergens tussen twee ronde getallen alsnog een half woord.
     560px  het stipje met "open" of "gesloten" — de kernvraag
    1300px  plaats en klok erbij (tegelijk met het telefoonnummer)
    1440px  het uur erachter ("morgen vanaf 08.30")
   Op 1440px meet de hele balk 1394px; dat is de krapste van de vier stappen. */
.balk__status {
  display: none; align-items: center; gap: 9px;
  /* Krimpen mag als laatste redmiddel bij een uitzonderlijk lange kantoor- of
     plaatsnaam, maar dan wel eerder dan de kantoornaam zelf — vandaar shrink 6.
     margin-right: auto houdt het blokje tegen die naam aan; zonder dat duwt
     space-between het naar het midden van de balk. */
  flex: 0 1 auto; flex-shrink: 6; min-width: 0; margin-right: auto; white-space: nowrap;
  color: #fff;
}
/* De noodrem staat op de tekst, niet op het omhulsel. Stond hij op het omhulsel,
   dan knipte die ook de kloppende ring van het stipje af — precies het effect
   waar het stipje voor bestaat. */
.balk__status > span:not(.stip) { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.balk__plaats, .balk__scheiding, .balk__staart, .balk__nummer { display: none; }
@media (min-width: 1300px) { .balk__nummer { display: inline; } }
.balk__scheiding { color: var(--paneel-zacht); }
@media (min-width: 560px) { .balk__status { display: flex; } }
@media (min-width: 1300px) { .balk__plaats, .balk__scheiding { display: inline; } }
@media (min-width: 1440px) { .balk__staart { display: inline; } }
/* Het stipje naast de openingstijden. Groen als het kantoor open is, rood als
   het dicht is — en alleen in de open stand een zachte pulsering, want dan is
   er ook echt iets gaande. Eerder was hij altijd accentoranje: dat gaf geen
   informatie en kostte wel de kleur die verder de hoofdactie aanwijst. */
.stip {
  position: relative; width: 8px; height: 8px; flex: none; border-radius: 50%;
  background: var(--gesloten, #cf5a5a);
}
.stip--open { background: var(--succes-licht); }
.stip--open::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--succes-licht);
  animation: kloppen 2.4s ease-out infinite;
}
@keyframes kloppen {
  0%   { transform: scale(1);   opacity: .55; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}
/* Zonder beweging blijft de kleur het verschil dragen. */
@media (prefers-reduced-motion: reduce) { .stip--open::after { animation: none; opacity: 0; } }

/* Ruimer dan de tussenruimte binnen het menu zelf: "Contact" plakte tegen de
   telefoonknop, waardoor het laatste menu-item bij de knoppengroep leek te
   horen. De sprong moet groter zijn dan de afstand tussen twee menu-items. */
.balk__rechts { display: flex; align-items: center; gap: 8px; flex: none; }
@media (min-width: 1100px) { .balk__rechts { gap: 8px; margin-left: 12px; }
  .balk__menu { margin-right: 20px; } }
/* Het menu staat pas vanaf 1100px uitgeklapt in de balk. Op 940 paste het niet:
   kantoornaam (160) + stand (70) + menu (524) + telefoon + bewaard + marges
   tellen op tot 1036px, en de balk gaf dat tekort door aan de kantoornaam. */
.balk__menu { display: none; }
@media (min-width: 1100px) {
  .balk__menu { display: flex; align-items: center; gap: clamp(10px, 1.2vw, 18px); }
  .balk__menu a {
    position: relative;
    color: #fff; font-size: var(--t-xs); font-weight: 500; letter-spacing: .04em;
    padding-bottom: 3px; border-bottom: 1px solid transparent;
  }
  /* 23px hoog is te weinig om met een duim of een trillende hand te raken
     (WCAG 2.2 SC 2.5.8 vraagt 24). Het raakvlak groeit via een pseudo-element,
     zodat de onderstreping op zijn plek blijft en de balk niet hoger wordt. */
  .balk__menu a::after { content: ""; position: absolute; inset: -4px -4px -3px; }
  .balk__menu a:hover { text-decoration: none; border-bottom-color: var(--accent); }
  .balk__menu a[aria-current="page"] { border-bottom-color: var(--accent); }
  /* Je bent hier ergens ónder: hetzelfde streepje, maar in het gedempte grijs
     van de balk. Halfdoorzichtig oranje op bijna zwart haalde 1,8:1 — een
     testbezoeker die op 150% zoomt zag het simpelweg niet. Dit haalt 4,9:1 en
     blijft duidelijk anders dan het accent van de pagina waar je écht bent. */
  .balk__menu a[data-tak] { border-bottom-color: var(--paneel-zacht); }
  /* Twee selectoren diep, want .balk__knop staat verderop in het blad en zet
     display: inline-flex; bij gelijk gewicht won die en stond er vanaf 940px
     een hamburger náást het volledige menu — twee navigaties in één balk. */
  .balk__knop.balk__hamburger { display: none; }
}

.balk__knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-width: 44px; min-height: 44px; padding: 8px 13px;
  border: 1px solid rgba(255, 255, 255, .75); background: rgba(0, 0, 0, .25); color: #fff;
  font-size: var(--t-label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer;
}
.balk__knop:hover { background: var(--papier); color: var(--paneel); text-decoration: none; }
/* Pictogrammen schalen mee met de tekst ernaast en erven de kleur. */
.pictogram { width: 1.15em; height: 1.15em; flex: none; display: block; }

.balk__teller { min-width: 18px; padding: 0 5px; background: var(--accent); color: #16171c; font-size: var(--t-label); font-weight: 700; }
.balk__teller[hidden] { display: none; }

/* Onder de 400px passen kantoornaam plus drie knoppen niet naast elkaar; dan
   won de ellipsis en stond er "DEMO MA…" in de balk. Het hartje wijkt als
   eerste: bellen en het menu zijn dringender, en in het menu staat "Bewaard"
   voluit mét dezelfde teller. */
@media (max-width: 399px) {
  .balk__knop--bewaard { display: none; }
  /* En de tussenruimte krimpt mee. Met 20px hield "Demo Makelaars" exact
     159,56px over voor een naam van 160px en kapte de balk hem af op een halve
     pixel. Twaalf geeft genoeg lucht voor een kantoornaam van een tekst of
     vijftien tekens, wat de meeste zijn. */
  .balk { gap: 12px; }
}

.lade {
  position: fixed; inset: 0; z-index: 80;
  display: grid; grid-template-rows: auto 1fr auto;
  padding: 0 var(--rand) calc(20px + env(safe-area-inset-bottom));
  background: var(--paneel); color: var(--paneel-tekst); overflow-y: auto;
}
.lade[hidden] { display: none; }
.lade__kop {
  display: flex; align-items: center; justify-content: space-between;
  min-height: var(--balk); margin-inline: calc(var(--rand) * -1); padding-inline: var(--rand);
  border-bottom: 1px solid var(--paneel-lijn);
}
.lade__lijst { display: flex; flex-direction: column; padding: 6px 0; }
.lade__lijst a {
  display: flex; align-items: baseline; gap: 14px; padding: 13px 0;
  border-bottom: 1px solid var(--paneel-lijn); color: var(--paneel-tekst);
  font-size: clamp(21px, 6vw, 30px); font-weight: 700; font-stretch: 112%;
  letter-spacing: -.02em; text-transform: uppercase;
}
.lade__lijst a:hover { color: var(--accent); text-decoration: none; }
.lade__lijst span { font-size: var(--t-xs); font-weight: 500; letter-spacing: .1em; color: var(--paneel-zacht); }
/* Teller achter "Bewaard" in het menu — dezelfde vlag als in de balk, zodat je
   ook op een smal scherm ziet dát er iets bewaard is. */
.lade__lijst .lade__teller {
  margin-left: auto; min-width: 22px; padding: 1px 6px; align-self: center;
  background: var(--accent); color: #16171c;
  font-size: var(--t-label); font-weight: 700; letter-spacing: 0; text-align: center;
}
.lade__lijst .lade__teller[hidden] { display: none; }
.lade__voet { display: grid; gap: 10px; padding-top: 18px; }

.voet {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 28px;
  border-top: 1px solid var(--lijn);
  padding-block: var(--ruimte-6) 0; font-size: var(--t-s);
}
.voet__naam { font-size: var(--t-m); font-weight: 700; font-stretch: 118%; letter-spacing: .02em; text-transform: uppercase; }
.voet__lijst { display: flex; flex-wrap: wrap; gap: 6px 18px; }
/* Een voettekstlink is 19 tot 22px hoog — onder de 24px die WCAG 2.2 (SC 2.5.8)
   als ondergrens aanhoudt. Het raakvlak groeit via een pseudo-element in plaats
   van via padding, zodat de regelafstand in de voettekst niet verandert. */
.voet__lijst a { position: relative; }
.voet__lijst a::after { content: ""; position: absolute; inset: -3px 0; }
/* Op een telefoon werden dit tien navigatielinks als doorlopende regel, met een
   raakvlak van 46x20px en tien pixels ertussen — daar mis je er altijd één van.
   Onder de 700px twee kolommen met een volle regelhoogte per link. */
@media (max-width: 699px) {
  .voet nav.voet__lijst {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0;
  }
  .voet nav.voet__lijst a {
    display: flex; align-items: center; min-height: 44px;
    padding-right: 12px; border-top: 1px solid var(--lijn);
  }
  /* De juridische regel onderin is geen navigatielijst en hoort de rijlijnen
     niet te erven: die gaven twee losse streepjes onder elkaar, op elke
     pagina. */
  /* gap expliciet terugzetten: de grid-regel hierboven zette hem op 0 en dat
     erfde deze rij, waardoor "PrivacyverklaringAlgemene voorwaarden
     Toegankelijkheid" als één woord aan elkaar plakte. */
  .voet__klein nav.voet__lijst { display: flex; gap: 6px 18px; }
  .voet__klein nav.voet__lijst a { min-height: 0; border-top: 0; padding-right: 0; }
}
.voet__klein {
  flex-basis: 100%;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px;
  margin-top: var(--ruimte-5); padding-block: 16px 26px;
  border-top: 1px solid var(--lijn); font-size: var(--t-xs); color: var(--inkt-zacht);
}
/* Telefoon- en e-mailadressen staan hier op een eigen regel, dus ze vallen niet
   onder de uitzondering voor links binnen een zin (WCAG 2.2 SC 2.5.8). Op 13px
   is zo'n link maar 17px hoog. Het raakvlak groeit via een pseudo-element, want
   padding op de link zelf zou de regelafstand van de hele alinea oprekken. */
a[href^="tel:"]:not(.knop):not(.balk__knop),
a[href^="mailto:"]:not(.knop):not(.balk__knop) { position: relative; }
a[href^="tel:"]:not(.knop):not(.balk__knop)::after,
a[href^="mailto:"]:not(.knop):not(.balk__knop)::after {
  content: ""; position: absolute; inset: -4px -2px;
}
.voet a { color: inherit; }
.voet__klein a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.voet a:hover { color: var(--accent-tekst); }

/* 6. FORMULIEREN EN FILTERS ============================================== */

.formulier { display: grid; gap: 14px; }
/* align-content: start — anders rekt een veld zonder hulptekst mee met de
   hoogte van het veld ernaast dat er wél een heeft, en stonden twee identieke
   invoervelden naast elkaar met 22px hoogteverschil. */
.veld { display: grid; gap: 5px; align-content: start; }
/* De opmaak van het veldlabel staat in blok 3 (typografie). Hier stond hem een
   tweede keer, later in het blad en met dezelfde gewichtsklasse, waardoor de
   kapitalen daar gewoon weer terugkwamen. */
.veld__hulp { font-size: var(--t-xs); color: var(--inkt-zacht); }

.invoer {
  width: 100%; min-height: 46px; padding: 13px 15px;
  border: 1px solid var(--veldrand, currentColor); border-radius: 0; background: transparent; color: inherit;
  font-size: var(--t-m);                       /* iOS zoomt in onder 16px */
  transition: border-color .16s ease, box-shadow .16s ease;
}
.invoer::placeholder { color: var(--inkt-zacht); }
/* Géén `outline: none` hier: dat zou de focusrand van :focus-visible
   overschrijven en die is de enige die het contrast haalt. */
.invoer:focus { border-color: var(--accent-diep); box-shadow: inset 0 0 0 1px var(--accent-diep); }
.filterbalk .invoer:focus, .donker .invoer:focus { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.invoer[aria-invalid="true"] { border-color: var(--fout); box-shadow: inset 0 0 0 1px var(--fout); }
/* Verslepen blijft mogelijk — dat is een nuttige voorziening — maar zonder het
   gestreepte greepje van de browser, het enige plukje systeem-UI dat nog in
   beeld stond. */
textarea.invoer { min-height: 130px; resize: vertical; }
textarea.invoer::-webkit-resizer { background: transparent; }
/* Dezelfde rand als een invoerveld: ze staan in elk formulier pal boven
   elkaar en hadden verschillende randkleuren. */
select.invoer { appearance: none; padding-right: 38px; background-color: transparent; border-color: var(--veldrand, currentColor); }
.donker select.invoer, .filterbalk select.invoer { background-color: var(--paneel); }
/* Chip, kleine knop en keuzelijst staan in de filtervoet naast elkaar: één
   hoogte, anders rafelt die rij. */
.filterbalk .invoer { border-color: var(--paneel-lijn); min-height: 40px; padding: 9px 12px; font-size: var(--t-s); }
.filterbalk select.invoer { padding-right: 34px; }

/* Een keuzelijst waarin nog niets gekozen is, leest als placeholder — net als
   een leeg invoerveld. In de opengeklapte lijst zelf krijgt die regel dezelfde
   behandeling; de andere opties blijven gewone inkt. */
/* De rand blijft op volle sterkte. Hij kwam uit currentColor, en currentColor
   is in deze stand gedempt — waardoor een nog niet ingevulde keuzelijst een
   lichtere rand kreeg dan het invoerveld er pal naast. De tekst mag dempen,
   de omtrek van het veld niet: die vertelt waar het veld begint en eindigt. */
.invoer--leeg { color: var(--inkt-zacht); --veldrand: var(--inkt); }
.donker .invoer--leeg { --veldrand: var(--paneel-tekst); }
.invoer--leeg option:not(.invoer__leeg) { color: var(--inkt); }
.invoer__leeg { color: var(--inkt-zacht); }

.select-omhulsel { position: relative; }
.select-omhulsel::after {
  content: "▾"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  pointer-events: none; font-size: var(--t-xs); color: var(--inkt-zacht);
}

.vink {
  display: grid; grid-template-columns: 19px 1fr; gap: 11px; align-items: start;
  font-size: var(--t-s); line-height: 1.5; cursor: pointer;
}
/* Zelfde vinkje als in de keuzelijsten, zodat de filterbalk niet één los
   systeemvakje overhoudt tussen de eigen exemplaren. */
.vink input {
  appearance: none; -webkit-appearance: none;
  width: 19px; height: 19px; margin: 2px 0 0;
  border: 1px solid currentColor; background: transparent; cursor: pointer;
  transition: background .14s ease, border-color .14s ease;
}
.vink input:checked {
  background: var(--accent) no-repeat center / 12px 12px;
  border-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 6.4l3 3 6-6.6' fill='none' stroke='%2316171c' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E");
}
.vink input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (forced-colors: active) { .vink input { appearance: auto; -webkit-appearance: auto; } }
@supports not (selector(:has(*))) { .vink input { appearance: auto; -webkit-appearance: auto; } }

.fout { display: flex; gap: 7px; font-size: var(--t-xs); font-weight: 600; color: var(--fout); }

.melding {
  display: grid; gap: 6px; padding: 18px 20px;
  border-left: 3px solid var(--succes); background: color-mix(in srgb, var(--succes) 14%, transparent);
}
.melding--fout { border-left-color: var(--fout); background: color-mix(in srgb, var(--fout) 14%, transparent); }
.melding__kop { font-size: var(--t-m); font-weight: 700; letter-spacing: -.01em; }
.melding a { color: var(--inkt); }

.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Filterbalk ------------------------------------------------------------ */

.filterbalk { padding-block: 30px 26px; }
/* Drie kolommen van gelijke hoogte. Met vier kolommen eindigden Plaats en
   Soort al na één keuzelijst en stond er 110px leeg zwart onder. */
/* Eén regel bedieningselementen. Onder de 980px wordt het twee kolommen en op
   een telefoon één, zodat de keuzelijsten breed genoeg blijven om te lezen. */
.filters__velden { display: grid; gap: 16px 18px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .filters__velden { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) {
  .filters__velden {
    grid-template-columns: 1.25fr 1.35fr 1.6fr 1fr 1.1fr 1fr;
    align-items: end;
  }
  /* Het vinkje heeft geen kop boven zich en zou anders op de kopregel gaan
     staan; het hoort op de hoogte van de keuzelijsten ernaast. */
  .filters__veld--vink { grid-column: 1 / -1; margin-top: 2px; }
}
@media (min-width: 1240px) {
  .filters__velden { grid-template-columns: 1.15fr 1.25fr 1.5fr .95fr 1fr .95fr auto; }
  .filters__veld--vink { grid-column: auto; margin-top: 0; padding-bottom: 11px; }
}
.filters__veld { display: grid; gap: 8px; align-content: end; min-width: 0; }
.filters__blok { display: grid; gap: 10px; align-content: start; }
.filters__kop { margin: 0 0 2px; font-weight: 600; color: var(--paneel-zacht); }
.filters__voet {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-top: var(--ruimte-5); padding-top: 18px; border-top: 1px solid var(--paneel-lijn);
}
/* Op een telefoon hing deze rij rechts terwijl al het andere links begint, en
   hij verspringt zelfs van rechts naar links zodra er een filter aanstaat.
   Onder de 700px alles links, en de bedieningselementen delen de breedte. */
@media (max-width: 699px) {
  .filters__voet .naar-rechts { margin-left: 0; width: 100%; }
  .filters__voet .naar-rechts > * { flex: 1 1 auto; }
}
/* Met de filters dichtgeklapt stonden er twee haarlijnen met een lege strook
   ertussen: de onderrand van de uitklapknop en de bovenrand van deze voet, met
   niets ertussen om te scheiden. Vier panels noemden dat los van elkaar "een
   blok dat niet geladen is". Dicht = één lijn. */
.uitklap-knop[aria-expanded="false"] { border-bottom: 0; margin-bottom: 0; }
.uitklap-knop[aria-expanded="false"] ~ .filters__voet { margin-top: 0; }
.filters__resultaat { font-size: clamp(19px, 2.1vw, 25px); font-weight: 700; font-stretch: 112%; letter-spacing: -.03em; }
/* De verzendknop is nu altijd de gevulde hoofdactie, dus de kleurwissel bij
   openstaande wijzigingen is vervallen — die trof bovendien élke button[type=
   submit] in de balk, dus ook de weergavewissel ernaast. Dat er iets klaarstaat
   blijkt uit het opschrift ("Toon resultaten (2 wijzigingen)"), wat een
   schermlezer ook meekrijgt en een kleurverschil niet. */

/* Zwevende terugknop naar de filterbalk. Alleen op een telefoon: daar is de
   balk niet blijvend in beeld en is de pagina het langst. */
.filterterug {
  position: fixed; left: var(--rand); bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 55;
  display: none; align-items: center; gap: 8px;
  min-height: 44px; padding: 10px 16px;
  background: var(--paneel); color: var(--paneel-tekst);
  box-shadow: 0 6px 24px rgba(8, 9, 12, .35);
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.filterterug:hover { background: var(--papier); color: var(--paneel); text-decoration: none; }
.filterterug[hidden] { display: none; }
@media (max-width: 899px) {
  .filterterug:not([hidden]) { display: inline-flex; }
}
.filterterug__aantal { font-weight: 500; letter-spacing: .02em; color: var(--paneel-zacht); }

.uitklap-knop {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 46px; padding: 10px 0; margin-bottom: 6px;
  border: 0; border-bottom: 1px solid var(--paneel-lijn); background: transparent; color: inherit;
  font-size: var(--t-s); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
}
.uitklap-knop[hidden] { display: none; }
.uitklap-knop > span:last-child { font-size: var(--t-l); }

/* Keuzelijst die opengaat, met vinkjes erin: ziet eruit als de andere selects
   in de balk, maar kan meerdere waarden aan. Zie de toelichting in
   components/veld-meerkeuze.blade.php. */
.meerkeuze { position: relative; }
.meerkeuze__knop {
  display: flex; align-items: center; gap: 10px;
  text-align: left; cursor: pointer;
}
/* De rechterruimte staat hier en niet in de regel hierboven: `.filterbalk
   .invoer` verderop zet de padding-shorthand en veegde een losse padding-right
   weg. Het pijltje werd daardoor bovenop het oranje telbolletje getekend. */
.meerkeuze__knop,
.filterbalk .meerkeuze__knop { padding-right: 40px; }
.meerkeuze__knop::after {
  content: "▾"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-size: var(--t-xs); color: var(--paneel-zacht); pointer-events: none;
  transition: transform .16s ease;
}
.meerkeuze__knop[aria-expanded="true"]::after { transform: translateY(-50%) rotate(180deg); }
.meerkeuze__knop > span:not(.meerkeuze__teller) {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Crème, geen accentoranje: dit telt wat je hebt aangevinkt, het is geen
   handeling. In de filterbalk stond het pal naast "Toon resultaten" en trok
   twee keer dezelfde kleur de aandacht naar twee verschillende dingen. */
.meerkeuze__teller {
  flex: none; min-width: 20px; padding: 1px 6px;
  background: var(--papier); color: #16171c;
  font-size: var(--t-label); font-weight: 700; line-height: 1.5;
}
.meerkeuze__teller[hidden] { display: none; }
.meerkeuze__knop[aria-expanded="true"] { border-color: var(--paneel-tekst); }
/* Zolang er niets is aangevinkt leest deze knop als invulhint, net als de
   gewone keuzelijsten ernaast. Zonder dit stonden zes even lege filtervelden
   in twee verschillende grijswaarden op één rij. */
.meerkeuze__knop:not(.meerkeuze__knop--gekozen) [data-meerkeuze-tekst] { color: var(--paneel-zacht); }

/* Het paneel zweeft over de inhoud eronder, zoals een echte keuzelijst. */
.meerkeuze__paneel {
  position: absolute; z-index: 40; top: calc(100% - 1px); left: 0; right: 0;
  min-width: 260px; max-height: 300px; overflow-y: auto;
  padding: 10px 12px;
  background: var(--paneel); border: 1px solid var(--paneel-tekst);
  box-shadow: 0 18px 34px rgba(8, 9, 12, .5);
}
.meerkeuze__paneel[hidden] { display: none; }
/* Zonder JavaScript blijft de knop verborgen en staat het paneel open in de
   pagina zelf — dan is het gewoon een aanvinklijst. */
.meerkeuze:not([data-meerkeuze-actief]) .meerkeuze__paneel {
  position: static; max-height: none; padding: 0; margin-top: 8px;
  border: 0; box-shadow: none; background: transparent;
}

.veldgroep { min-width: 0; margin: 0; padding: 0; border: 0; }
.veldgroep legend { padding: 0; }
.keuzelijst {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 2px 10px;
}
.keuze {
  display: flex; align-items: center; gap: 10px;
  min-height: 34px; padding: 4px 8px 4px 2px;
  font-size: var(--t-s); line-height: 1.25; cursor: pointer;
}
/* Eigen vinkje: de systeemversie is op dit zwarte vlak een fel wit blokje, en
   met twintig keuzes naast elkaar leest dat als een rij lampjes in plaats van
   als een lijst. Dit is een dunne rand die vult zodra je hem aanzet. */
.keuze input {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; flex: none; margin: 0;
  border: 1px solid var(--paneel-lijn); background: transparent;
  cursor: pointer; transition: background .14s ease, border-color .14s ease;
}
.keuze input:checked {
  background: var(--accent) no-repeat center / 11px 11px;
  border-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 6.4l3 3 6-6.6' fill='none' stroke='%2316171c' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E");
}
.keuze__naam { flex: 1; min-width: 0; }
.keuze__aantal { flex: none; font-size: var(--t-xs); color: var(--inkt-zacht); font-variant-numeric: tabular-nums; }
.keuze:hover input { border-color: var(--paneel-tekst); }
.keuze:has(input:checked) .keuze__naam { font-weight: 700; }
.keuze:has(input:checked) .keuze__aantal { color: inherit; }
/* Een plaats zonder aanbod blijft staan (hij kan morgen weer gevuld zijn) maar
   vraagt geen aandacht. */
.keuze--leeg { color: var(--inkt-zacht); }
.keuze:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.keuzelijst__uitleg { margin-top: 10px; color: var(--inkt-zacht); }

/* Met een vinger mag een regel ruimer: 34px haalt de norm wel, maar tien
   dorpen dicht op elkaar aantikken blijft priegelen. Op een aanraakscherm
   vervalt ook de vaste hoogte met eigen schuifbalk — een scrollvlak ín een
   scrollende pagina is op touch onhandig, en de lijst past daar toch. */
/* Ook op breedte, niet alleen op aanraking: een smal venster is in de praktijk
   een telefoon, en zo is het gedrag ook zichtbaar in een gewone browser die je
   smal maakt. */
@media (pointer: coarse), (max-width: 700px) {
  .keuze { min-height: 44px; }
  /* Op een telefoon is het paneel geen zwevend menu maar een blok in de pagina.
     Een zwevende laag van 300px die je met je vinger moet scrollen terwijl de
     pagina eronder óók scrollt, is vragen om ellende. */
  .meerkeuze__paneel {
    position: static; max-height: none; box-shadow: none;
    margin-top: 8px; border-color: var(--paneel-lijn);
  }
  .meerkeuze .keuzelijst { grid-template-columns: 1fr; }
}

@media (forced-colors: active) {
  .keuze input { appearance: auto; -webkit-appearance: auto; }
}

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 8px 12px;
  border: 1px solid var(--paneel-lijn); color: var(--paneel-tekst);
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .03em; cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
/* Geen flex: 1 — dan volgt de chipbreedte de kolom in plaats van de inhoud, en
   werd dezelfde chip "Alle" 100px breed bij het energielabel en 73px bij de
   slaapkamers. Eén minimumbreedte houdt de losse letters en cijfers gelijk. */
.chip--breed { min-width: 62px; }
/* Een actief filter is geen actie maar een stand die je kunt weghalen. Gevuld
   in accentoranje stonden er tot vier van deze blokjes in één balk, naast de
   oranje hoofdknop — en op een telefoon was de énige oranje knop in beeld
   uitgerekend de knop om iets ongedaan te maken. Omlijnd blijft hij duidelijk
   aanklikbaar zonder de hoofdactie te beconcurreren. */
.chip--actief {
  gap: 8px; background: transparent; border-color: var(--paneel-tekst);
  color: var(--paneel-tekst); text-decoration: none;
}
.chip--actief:hover { background: var(--paneel-tekst); border-color: var(--paneel-tekst); color: var(--paneel); text-decoration: none; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip:hover { border-color: var(--paneel-tekst); }
.chip:has(input:checked) {
  background: var(--accent); border-color: var(--accent); color: #16171c;
  box-shadow: inset 0 0 0 2px var(--paneel);   /* ook zichtbaar zonder kleur */
}
/* "Alle" is de stand waarin er niets gefilterd is. Die kreeg dezelfde oranje
   vulling als een echte keuze, waardoor de accentkleur bij binnenkomst al twee
   keer opgloeide voor precies niets. Wel duidelijk gekozen, niet luid. */
.chip--alles:has(input:checked) {
  background: transparent; color: var(--paneel-tekst);
  border-color: var(--paneel-tekst); box-shadow: inset 0 0 0 1px var(--paneel-tekst);
  font-weight: 700;
}
.chip:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; }

/* Hoog-contrastmodus negeert achtergrondkleuren; de selectie moet dan uit de
   rand blijken. Zonder :has()-ondersteuning valt de site terug op de rand. */
@media (forced-colors: active) {
  .chip:has(input:checked) { border-width: 3px; forced-color-adjust: none; border-color: Highlight; }
  .duim[aria-current="true"] { border-width: 3px; border-color: Highlight; }
  .balk__teller { border: 1px solid; }
  .knop, .balk__knop, .pijl, .galerij__knop { border: 1px solid; }
}
/* Zonder :has() bestaat de aangevinkte staat niet als achtergrond; dan tonen
   wij gewoon het echte keuzerondje, mét zijn eigen focusring. */
@supports not (selector(:has(*))) {
  .chip input { position: static; opacity: 1; width: auto; height: auto; margin-right: 6px; }
  /* Zonder :has() valt ook het eigen vinkje weg; dan liever het systeemvakje
     dan een lijst waarin niet te zien is wat aanstaat. */
  .keuze input { appearance: auto; -webkit-appearance: auto; }
  @media (max-width: 899px) { body { padding-bottom: 84px; } }
}

/* 7. WONINGKAARTEN EN AANBOD ============================================= */

.kaart-woning { position: relative; display: flex; flex-direction: column; min-width: 0; }
.kaart-woning[hidden] { display: none; }
.kaart-woning__beeld { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--papier-diep); }
.kaart-woning__beeld img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--soepel); }
.kaart-woning:hover .kaart-woning__beeld img { transform: scale(1.03); }
/* Ingesprongen, niet in de hoek geplakt. Vlak tegen de onderrand en in exact de
   paginakleur leek dit label een hap uit de foto in plaats van een label erop.
   Nu ligt het er duidelijk bovenop, met een randje dat het van lichte luchten
   scheidt. */
.kaart-woning__prijs {
  position: absolute; right: 12px; bottom: 12px; padding: 9px 13px;
  background: var(--papier); color: var(--inkt);
  box-shadow: 0 2px 10px rgba(8, 9, 12, .28);
  font-size: var(--t-m); font-weight: 700; letter-spacing: -.02em;
}
.kaart-woning__kk { font-size: var(--t-xs); font-weight: 500; color: var(--inkt-zacht); letter-spacing: .02em; }
/* flex-wrap plus min-width: 0 op de kinderen. Zonder die twee stak "Koudekerke"
   bij 640px 34px buiten de kaart en bij 320px zelfs voorbij de schermrand:
   overflow-wrap verkleint de min-content-breedte van een flexitem niet, dus
   een lange plaatsnaam duwde het item gewoon naar buiten. */
.kaart-woning__kop {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: baseline; gap: 4px 14px; margin-top: 14px;
}
.kaart-woning__kop > * { min-width: 0; }
.kaart-woning__titel { font-size: clamp(17px, 1.9vw, 21px); text-transform: uppercase; }
/* margin-top: auto duwt de voet naar de onderkant van de kaart. Zonder dat hing
   hij onder de omschrijving, en zodra één omschrijving een regel langer was
   stonden de scheidingslijnen van een rij kaarten op verschillende hoogtes. Op
   /aanbod viel dat niet op omdat de teksten daar toevallig even lang zijn; op
   /verkocht en /verkopen wel. */
.kaart-woning__voet {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 16px;
  margin-top: auto; padding-top: 11px; border-top: 1px solid var(--lijn-zacht);
}
.kaart-woning__voet > :first-child { min-width: 0; }
/* Op een telefoon paste "BEKIJKEN →" niet meer naast de metaregel zodra daar
   "· in 21 dagen verkocht" bij stond: de pijl zakte los onder het woord. Onder
   de 600px krijgt de link daarom een eigen regel. */
@media (max-width: 599px) {
  .kaart-woning__voet > * { flex-basis: 100%; }
}
.kaart-woning a.dek { color: inherit; }
.kaart-woning__voet .bekijken { color: var(--inkt); }
.kaart-woning a.dek:hover { text-decoration: none; }
.kaart-woning a.dek::after { content: ""; position: absolute; inset: 0; }

/* Ingesprongen en met lucht ertussen. Tegen de hoek geplakt en zonder tussen-
   ruimte liepen drie badges van verschillende breedte als een trapje uit de
   foto weg; nu leest het als een stapeltje labels op het beeld. */
.vlaggen {
  position: absolute; left: 12px; top: 12px; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
}
/* Zachte hoekschaduw onder de vlaggen. Het volgnummer is witte tekst zonder
   vlak, en linksboven op een huizenfoto is bijna altijd lucht: op een heldere
   opname was het cijfer eenvoudigweg weg. Een sluier in de hoek lost dat op
   zonder er alsnog een badge van te maken.
   Het vlak bedekt de héle foto en de kleur dooft radiaal uit. Een kleiner vlak
   met een schuin verloop erin gaf twee kaarsrechte randen midden op de foto —
   op een wolkenlucht las dat als een half geladen beeld, precies waar een
   bezoeker op het aanbod het langst naar kijkt. */
.kaart-woning__beeld::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(104% 60% at 0% 0%,
    rgba(8, 9, 12, .58), rgba(8, 9, 12, .2) 40%, rgba(8, 9, 12, 0) 66%);
}
/* Eén familie: allemaal hetzelfde inktvlak, en het verschil zit in het woord.
   Hiervoor stonden er vol accentoranje, diep bosgroen, roest, inkt en crème
   door elkaar — drie kleurtemperaturen die op één foto op elkaar stapelden. Het
   ergste was dat NIEUW exact de kleur van de hoofdknop had: op de mobiele
   aanbodpagina was het énige oranje in beeld een passief label, terwijl de
   knop die de bezoeker moest indrukken kleurloos bleef.
   Alleen VERKOCHT wijkt af, en dat mag: dat is geen mededeling maar een
   afsluiting, en de omkering leest als een stempel. */
.vlag {
  padding: 7px 11px; background: var(--paneel); color: var(--paneel-tekst);
  font-size: var(--t-label); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  box-shadow: 0 2px 10px rgba(8, 9, 12, .24);
}
/* Een fijn streepje links draagt het onderscheid, zonder een tweede vlak. Vier
   statussen, vier duidelijk verschillende signalen, één vorm:
     NIEUW      accent — nieuws, vraagt aandacht
     OPEN HUIS  groen  — een uitnodiging
     ONDER BOD  geen streep — een toestand, geen mededeling
     VERKOCHT   crème streep — afgesloten
   Eerder was VERKOCHT een crèmekleurig vlak: een tweede familie voor hetzelfde
   systeem, die op een lichte lucht bovendien wegviel. En NIEUW en ONDER BOD
   droegen allebei een oranje, waarvan de ene alleen valer was — dat leerde een
   bezoeker nooit wat een kleur betekende. */
/* Crème, geen accentoranje. Oranje wijst op deze site de hoofdactie aan, en op
   de mobiele aanbodpagina was het énige oranje in beeld dit passieve label
   terwijl de knop die de bezoeker moest indrukken kleurloos bleef. De vier
   vaantjes blijven onderling goed te onderscheiden: crème, groen, roest, grijs. */
.vlag--nieuw { box-shadow: inset 3px 0 0 var(--papier), 0 2px 10px rgba(8, 9, 12, .24); }
.vlag--openhuis { box-shadow: inset 3px 0 0 var(--succes-licht), 0 2px 10px rgba(8, 9, 12, .24); }
.vlag--verkocht { box-shadow: inset 3px 0 0 var(--paneel-zacht), 0 2px 10px rgba(8, 9, 12, .24); }
/* ONDER BOD krijgt óók een streep, in de roestkleur die daar al voor
   klaarstond. Zonder streep werd het een naamloos zwart blokje dat niet te
   onderscheiden was van het volgnummer eronder — één van de vier statussen
   viel daarmee buiten het systeem. */
.vlag--bod { box-shadow: inset 3px 0 0 var(--roest), 0 2px 10px rgba(8, 9, 12, .24); }
.donker .vlag--bod, .kaart-woning .vlag--bod { box-shadow: inset 3px 0 0 #c9704a, 0 2px 10px rgba(8, 9, 12, .24); }

/* Het volgnummer is geen status en hoort dus niet van hetzelfde materiaal te
   zijn als de statusbadges. Twee selectoren diep (.vlag.vlag--nr), want dit
   blok stond eerder VOOR .vlag in het blad en verloor daardoor bij gelijke
   gewichtsklasse — de badge bleef gewoon een zwart vlak. */
/* Zelfde familie, kleinere maat: in een tekstregel naast een adres mag een
   vaantje niet zo zwaar wegen als op een foto. */
.vlag--klein { padding: 3px 7px; font-size: 10px; letter-spacing: .1em; }
.vlag.vlag--nr {
  padding: 0 0 2px; background: transparent; color: #fff;
  box-shadow: none; text-shadow: 0 1px 8px rgba(8, 9, 12, .85);
  letter-spacing: .16em;
}

.bewaar {
  position: absolute; right: 12px; top: 12px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 0; background: rgba(239, 233, 224, .92); color: #16171c; cursor: pointer;
  transition: background .15s ease;
}
.bewaar:hover { background: var(--papier); }
.bewaar svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.bewaar[aria-pressed="true"] svg { fill: var(--accent); stroke: var(--roest); }

/* Energielabel: op de detailpagina in kleur, op de kaarten neutraal zodat de
   tonaliteit van het overzicht heel blijft. */
/* Eén behandeling voor het energielabel, overal hetzelfde.
   Hier stond de complete EPC-waaier: signaalgroen, zuur limoen, kanariegeel,
   oranje, rood. Dat zijn met afstand de felste kleuren van de site, ze horen
   bij geen enkele andere kleur hier, en ze zaten op een bijzaak — terwijl
   precies hetzelfde gegeven op de woningkaartjes wél neutraal was omlijnd. Eén
   gegeven hoort één behandeling te krijgen, en de letter zelf is de informatie.
   Alleen de laagste labels houden een waarschuwende toon, want dat is een
   koopargument en geen decoratie. */
.label-energie {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; padding: 1px 6px;
  border: 1px solid currentColor; background: transparent; color: inherit;
  font-size: var(--t-label); font-weight: 700; letter-spacing: .02em;
}
.label-energie[data-label="F"],
.label-energie[data-label="G"] { border-color: var(--roest); color: var(--roest); }
.donker .label-energie[data-label="F"],
.donker .label-energie[data-label="G"],
.prijsblok .label-energie[data-label="F"],
.prijsblok .label-energie[data-label="G"] { border-color: var(--accent); color: var(--accent); }

.rek {
  display: flex; gap: 20px; overflow-x: auto;
  scroll-snap-type: x mandatory; scroll-padding-left: var(--marge);
  overscroll-behavior-x: contain;
}
.rek > * { flex: 0 0 auto; width: min(78vw, 430px); scroll-snap-align: start; }
.rek .kaart-woning__beeld { aspect-ratio: auto; height: min(56vh, 470px); }

/* Geen zichtbare schuifbalk onder de woningrij: de pijlen, de teller en de
   voortgangsbalk vertellen al waar je bent. Scrollen blijft gewoon werken.
   Zonder JavaScript zijn die pijlen er niet — dan blijft de schuifbalk staan
   als enige aanwijzing dat de rij verschuifbaar is. */
.rek--actief, .duimen { scrollbar-width: none; -ms-overflow-style: none; }
.rek--actief::-webkit-scrollbar, .duimen::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* opacity op de baan zou ook het kind doorzichtig maken — dan is de
   voortgangsbalk onzichtbaar. Daarom als kleur, niet als dekking. */
.voortgang { height: 2px; background: color-mix(in srgb, currentColor 16%, transparent); }
.voortgang > div { height: 100%; width: 12%; background: var(--roest); transition: width .4s var(--soepel); }

.paginering { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; }
.paginering a, .paginering span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--lijn); color: inherit; font-size: var(--t-s); font-weight: 600;
}
.paginering a:hover { background: var(--inkt); color: var(--papier); text-decoration: none; }
.paginering [aria-current="page"] { background: var(--inkt); color: var(--papier); }
.paginering .uit { opacity: .35; }

/* 8. WONINGDETAIL ======================================================== */

.galerij { position: relative; background: var(--paneel); }
.galerij__hoofd { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 80vh; overflow: hidden; }
@media (max-width: 700px) { .galerij__hoofd { aspect-ratio: 4 / 3; } }
.galerij__hoofd figure { margin: 0; height: 100%; }
.galerij__hoofd img { width: 100%; height: 100%; object-fit: cover; }
.galerij__hoofd figcaption { display: none; }

/* Zonder JavaScript is er geen galerij maar een eenvoudige fotolijst — dan
   zijn alle foto's bereikbaar in plaats van vijf van de zes verborgen. */
.galerij:not(.galerij--actief) .galerij__hoofd { aspect-ratio: auto; max-height: none; display: grid; gap: 2px; }
.galerij:not(.galerij--actief) .galerij__hoofd figure { height: auto; }
.galerij:not(.galerij--actief) .galerij__hoofd figcaption {
  display: block; padding: 10px var(--marge); background: var(--paneel); color: var(--paneel-zacht); font-size: var(--t-s);
}
.galerij:not(.galerij--actief) .galerij__waas,
.galerij:not(.galerij--actief) .galerij__balk,
.galerij:not(.galerij--actief) .duimen { display: none; }
.galerij__waas {
  position: absolute; inset: 0; pointer-events: none;
  /* Alleen nog de algemene verdonkering voor de knoppen bovenin. De zwaardere
     sluier onderaan zat op een vast percentage van de fotohoogte, en dat gaat
     mis zodra het adres over twee regels loopt: op een telefoon schoof de kop
     dan omhoog tot boven die sluier en stond witte tekst van 26px op een lichte
     lucht. De sluier zit nu op het tekstblok zelf en schuift dus altijd mee. */
  background: linear-gradient(180deg,
    rgba(8, 9, 12, .5), rgba(8, 9, 12, 0) 30%,
    rgba(8, 9, 12, .2) 62%, rgba(8, 9, 12, .42));
}
.galerij__terug {
  position: absolute; top: 16px; z-index: 2;
  padding: 9px 15px; border: 1px solid rgba(255, 255, 255, .6); background: rgba(0, 0, 0, .55); color: #fff;
  font-size: var(--t-label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.galerij__terug:hover { background: var(--papier); color: var(--paneel); text-decoration: none; }
/* Eén kolom onderaan de foto: eerst adres en prijs, dan de bedieningsbalk.
   Als twee losse absoluut geplaatste blokken met een geraden hoogteverschil
   overlapten ze op smalle schermen — de teller en het bijschrift lagen precies
   over de vraagprijs. Zo kan dat niet meer. */
.galerij__onder {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; flex-direction: column; gap: 14px;
  isolation: isolate;
}
/* De sluier hoort bij dit blok en niet bij de foto, zodat hij precies zo hoog
   is als de tekst die erop staat — één regel adres of drie, met of zonder
   bijschrift. Hij loopt 72px boven het blok uit om zacht in te zetten. */
.galerij__onder::before {
  content: ""; position: absolute; inset: -80px 0 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 9, 12, 0), rgba(8, 9, 12, .5) 46%, rgba(8, 9, 12, .72));
}
.galerij__titel {
  padding-inline: var(--marge);
  color: #fff; text-shadow: 0 2px 18px rgba(8, 9, 12, .7);
}
.galerij__adres {
  font-size: clamp(26px, 4.2vw, 52px); font-weight: 700; font-stretch: 118%;
  line-height: 1; letter-spacing: -.03em; text-transform: uppercase;
}
.galerij__plaats {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px;
  margin-top: 10px; font-size: var(--t-m); letter-spacing: .02em;
}
.galerij__prijs { font-weight: 700; font-size: clamp(17px, 1.6vw, 21px); letter-spacing: -.01em; }
.galerij__prijslabel { font-size: var(--t-xs); font-weight: 600; letter-spacing: .02em; }
/* De vaantjes staan bóven het adres op de foto, in dezelfde volgorde als in het
   overzicht. Geen tekstschaduw: ze hebben hun eigen vlak. */
.galerij__vlaggen { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; text-shadow: none; }

.galerij__balk {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  padding-bottom: 16px;
}
.galerij__chip { padding: 8px 13px; background: rgba(0, 0, 0, .68); color: #fff; font-size: var(--t-xs); }
/* Op een telefoon lagen er acht donkere vlakken over de hoofdfoto — terugknop,
   twee vaantjes, adres, plaats met prijs, teller, bijschrift en twee pijlen —
   en was van het huis nauwelijks iets te zien; de duimnagel eronder oogde beter
   dan de foto zelf. Het bijschrift is daar het eerste dat wijkt: het is de
   breedste van de acht en het minst nodig, en het staat voor schermlezers nog
   steeds in de statusregel. */
@media (max-width: 639px) {
  /* Wegkijken, niet weghalen: het bijschrift blijft in de statusregel staan die
     bij het wisselen van foto wordt voorgelezen. */
  [data-galerij-bijschrift] {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .galerij__onder { gap: 10px; }
}
.galerij__knop {
  width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, .6);
  background: rgba(0, 0, 0, .5); color: #fff; font-size: var(--t-l); cursor: pointer;
}
.galerij__knop:hover { background: var(--papier); color: var(--paneel); }

.duimen { display: flex; gap: 8px; overflow-x: auto; padding-block: 10px 14px; }
/* position: relative is hier geen opmaak maar een reparatie. In elke duimnagel
   zit een .verborgen-tekst met `position: absolute`; zonder een gepositioneerde
   duimnagel hangen die spans aan .galerij en ontsnappen ze uit de scrollstrook.
   Ze stonden daardoor op x=632 in een venster van 390 en rekten de hele pagina
   242px breed — met een horizontale schuifbalk over de complete woningpagina. */
.duim { position: relative; flex: 0 0 auto; width: 104px; height: 72px; padding: 0; border: 2px solid transparent; background: none; cursor: pointer; opacity: .5; transition: opacity .15s ease, border-color .15s ease; }
.duim img { width: 100%; height: 100%; object-fit: cover; }
.duim:hover { opacity: .85; }
.duim[aria-current="true"] { border-color: var(--accent); opacity: 1; }

.kerncijfers {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border-block: 1px solid var(--lijn);
}
@media (min-width: 900px) { .kerncijfers { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.kerncijfers { padding-inline: calc(var(--marge) - var(--ruimte-4)); }
.kerncijfers > div { padding: 16px var(--ruimte-4); }
.kerncijfers > div:nth-child(even) { border-left: 1px solid var(--lijn-zacht); }
.kerncijfers > div:nth-child(n+3) { border-top: 1px solid var(--lijn-zacht); }
/* Een oneven laatste cel pakt de volle breedte in plaats van als halve doos
   te blijven hangen. */
.kerncijfers > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .kerncijfers > div + div { border-left: 1px solid var(--lijn-zacht); }
  .kerncijfers > div:nth-child(n+3) { border-top: 0; }
  .kerncijfers > div:last-child:nth-child(odd) { grid-column: auto; }
}
.kerncijfers dt { letter-spacing: .16em; overflow-wrap: normal; }
/* "WOONOPPERVLAK" knapte op een smalle telefoon af tot "WOONOPPERVL / AK". Het
   is een opschrift van één woord: afbreken kán daar niet netjes, dus krimpt de
   spatiëring in plaats van het woord. Dertien tekens × ±7,7px past dan binnen
   de halve kolom van een scherm van 320px. */
@media (max-width: 419px) {
  .kerncijfers dt { letter-spacing: .08em; }
}
.kerncijfers dd { margin: 7px 0 0; font-size: clamp(17px, 2vw, 22px); font-weight: 700; font-stretch: 112%; letter-spacing: -.02em; }

.kenmerken__rij {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 16px;
  padding: 12px 0; border-top: 1px solid var(--lijn-zacht); font-size: var(--t-s);
}
/* Onder de 600px stapelen. Twee kolommen op een telefoon laten links drie
   woorden per regel en rechts een rechts uitgelijnde zin over: dat is de
   desktopindeling die is blijven staan, geen mobiel ontwerp. */
.kenmerken__rij dt { color: var(--inkt-zacht); }
/* Rechts uitlijnen werkt bij korte waarden ("186 m²", "1974"). Voor rijen met
   lopende tekst — de kostenlijst op /kopen heeft zinnen van vier regels — geeft
   dat een rafelige linkerkant midden in een alinea; die rijen krijgen daarom
   .kenmerken__rij--tekst en blijven links. */
.kenmerken__rij dd { margin: 0; font-weight: 500; text-align: right; }
.kenmerken__rij--tekst { grid-template-columns: minmax(0, .8fr) minmax(0, 2fr); }
.kenmerken__rij--tekst dd { text-align: left; font-weight: 400; max-width: 52ch; }

/* Deze mediaquery staat bewust ná de regels hierboven. Stond hij ervoor, dan
   won `text-align: right` alsnog en kreeg je op een telefoon een zigzag: label
   linksboven, waarde rechtsonder. En de tekstvariant hield zijn twee kolommen,
   waardoor de labelkolom zo smal werd dat woorden middenin afbraken. */
@media (max-width: 599px) {
  .kenmerken__rij,
  .kenmerken__rij--tekst { grid-template-columns: 1fr; gap: 4px; }
  .kenmerken__rij dd { text-align: left; }
}

/* Prijsregel onder de kop van de woningpagina. */
.kopprijs { flex-wrap: wrap; padding-block: 16px; border-block: 1px solid var(--lijn); }
.kopprijs__bedrag { font-size: clamp(23px, 2.9vw, 34px); font-weight: 700; font-stretch: 112%; letter-spacing: -.03em; }
.kopprijs__bedrag .klein { font-weight: 400; letter-spacing: 0; }
/* Vanaf 900px staat het prijsblok in de zijkolom vast in beeld; dan is dit
   bedrag een herhaling binnen hetzelfde scherm. De knop blijft wel staan —
   die haalt de belangrijkste actie naar voren in de tabvolgorde. */
@media (min-width: 900px) {
  .kopprijs__bedrag { display: none; }
  .kopprijs { justify-content: flex-start; border-top: 0; padding-top: 0; }
}

.zijkolom { display: grid; gap: 16px; align-content: start; }
@media (min-width: 900px) { .zijkolom { position: sticky; top: calc(var(--balk) + 20px); } }

/* Onder de 900px is dit geen zijkolom meer maar een blok dat ná het complete
   contactformulier landt. Daar herhaalt het de vraagprijs en het knoppenpaar
   die op die telefoon al drie keer eerder langskwamen — bovenaan, in de
   kenmerken en in de vaste balk onderaan, die precies dit werk doet. Het
   prijsblok verdwijnt daar dus; wat eronder staat (de makelaar, delen, printen)
   blijft. */
/* Onder de 900px verdwijnt het prijsblok, maar de makelaarkaart zit erin en
   die moet blijven: zonder haar stond er verderop wel "Bel Sanne over dit huis"
   terwijl Sanne nergens meer te zien was. Het blok wordt daarom niet verborgen
   maar uitgekleed — prijs en knoppen eruit, de makelaar blijft. */
@media (max-width: 899px) {
  .zijkolom .prijsblok {
    background: transparent; color: inherit; padding: 0;
    --inkt: #16171c; --inkt-zacht: #57524b;
  }
  .zijkolom .prijsblok > :not(.makelaarkaart) { display: none; }
  .zijkolom .makelaarkaart { margin-top: 0; padding-top: 0; border-top: 0; }
}

.prijsblok { padding: var(--doos-l); }
.prijsblok__bedrag { font-size: clamp(28px, 3.2vw, 42px); font-weight: 700; font-stretch: 112%; letter-spacing: -.03em; }
.makelaarkaart { display: flex; gap: 14px; align-items: center; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--paneel-lijn); }
.makelaarkaart img { width: 58px; height: 72px; flex: none; object-fit: cover; }

/* Vier vakken op één regel: prijs, bewaren, bellen, bezichtiging. Toen het
   bewaarhartje erbij kwam brak deze balk in twee rafelige rijen met de oranje
   knop halfbreed onderaan — vier panels noemden dat los van elkaar. De twee
   pictogramknoppen zijn nu vierkant en vast, de prijs krimpt mee en de
   hoofdknop krijgt wat overblijft. */
.actiebalk {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  display: grid; grid-template-columns: minmax(0, auto) 48px 48px minmax(120px, 1fr);
  align-items: center; gap: 8px;
  padding-block: 10px calc(10px + env(safe-area-inset-bottom));
  background: var(--paneel); color: var(--paneel-tekst); border-top: 1px solid var(--paneel-lijn);
}
.actiebalk__prijs {
  font-size: var(--t-s); font-weight: 700; font-stretch: 112%; letter-spacing: -.02em;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.actiebalk .knop { min-height: 48px; padding-inline: 10px; font-size: var(--t-xs); }
.actiebalk__bewaar,
.actiebalk .knop--lijn { padding: 0; }
.actiebalk__bewaar[aria-pressed="true"] .pictogram { fill: var(--accent); stroke: var(--accent); }
/* Onder de 360px past de prijs er niet meer bij zonder alles te knijpen. */
@media (max-width: 359px) {
  .actiebalk { grid-template-columns: 48px 48px minmax(0, 1fr); }
  .actiebalk__prijs { display: none; }
}
@media (min-width: 900px) { .actiebalk { display: none; } }
@media (max-width: 899px) { body:has(.actiebalk) { padding-bottom: 88px; } }

.plattegrond { display: grid; gap: 14px; }
/* Indeling als verhoudingsdiagram: de staaf draagt het aandeel, de naam staat
   ernaast. Zie de toelichting in components/plattegrond.blade.php voor waarom
   dit geen rij vakken meer is. Werkt op elke breedte hetzelfde, dus het
   bijschrift klopt overal. */
.indeling { display: grid; gap: 1px; border: 1px solid var(--lijn); }
.indeling__rij {
  display: grid; grid-template-columns: minmax(96px, 8.5rem) 1fr auto;
  gap: 8px 14px; align-items: center;
  padding: 11px 14px;
  background: color-mix(in srgb, currentColor 5%, transparent);
}
.indeling__naam { font-size: var(--t-s); font-weight: 600; letter-spacing: -.01em; }
.indeling__staaf {
  display: block; height: 12px; min-width: 40px;
  background: color-mix(in srgb, currentColor 10%, transparent);
}
/* Inkt, geen accent: een verhoudingsdiagram is informatie, geen actie. */
.indeling__vulling { display: block; height: 100%; background: color-mix(in srgb, currentColor 62%, transparent); }
.indeling__opp { font-size: var(--t-xs); color: var(--inkt-zacht); font-variant-numeric: tabular-nums; }
/* Onder de 460px staat de naam boven de staaf: drie kolommen zouden de naam
   afknellen tot twee letters per regel. */
@media (max-width: 459px) {
  .indeling__rij { grid-template-columns: 1fr auto; }
  .indeling__naam { grid-column: 1 / -1; }
}
/* Hier stonden dertien regels voor een SVG-plattegrond met muren, deuropeningen
   en maatvoering. Die tekening bestaat niet meer sinds de indeling een
   staafdiagram werd; de regels raakten dus niets meer. */

.rekenaar { display: grid; gap: 16px; padding: var(--doos); border: 1px solid var(--lijn); }
.rekenaar__uitkomst { font-size: clamp(28px, 3.6vw, 44px); font-weight: 700; font-stretch: 118%; letter-spacing: -.04em; }
/* Vierkant, net als al het andere. De browserstandaard is een pilvormige baan
   met een ronde greep, en dat waren de enige ronde vormen op de hele site —
   knoppen, velden, badges, kaartspelden en foto's hebben allemaal rechte
   hoeken. */
.rekenaar input[type="range"] {
  width: 100%; height: 40px; background: transparent;
  appearance: none; -webkit-appearance: none; cursor: pointer;
}
.rekenaar input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; background: color-mix(in srgb, var(--inkt) 18%, transparent);
}
.rekenaar input[type="range"]::-moz-range-track {
  height: 4px; background: color-mix(in srgb, var(--inkt) 18%, transparent);
}
.rekenaar input[type="range"]::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none;
  width: 14px; height: 22px; margin-top: -9px;
  background: var(--accent); border: 1px solid var(--inkt); border-radius: 0;
}
.rekenaar input[type="range"]::-moz-range-thumb {
  width: 14px; height: 22px;
  background: var(--accent); border: 1px solid var(--inkt); border-radius: 0;
}
.rekenaar input[type="range"]:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
/* Met een vinger moet je een strook van twaalf pixels raken én vasthouden;
   op een telefoon wordt de greep daarom breder. */
@media (pointer: coarse), (max-width: 699px) {
  .rekenaar input[type="range"]::-webkit-slider-thumb { width: 26px; }
  .rekenaar input[type="range"]::-moz-range-thumb { width: 26px; }
}

/* 9. OVERIGE BLOKKEN ===================================================== */

/* min-height in plaats van height, en geen overflow-clip: bij 200% tekstzoom
   groeide de inhoud voorbij de doos en verdween de bovenste regel (SC 1.4.4). */
.hero {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: max(100svh, 600px); isolation: isolate;
  padding: calc(var(--balk) + 24px) var(--marge) clamp(30px, 4vw, 40px);
  background: var(--nacht); color: #fff;
}
@media (hover: hover) and (pointer: fine) { .hero { cursor: crosshair; } }
.hero__beeld, .hero__binnen { position: absolute; inset: 0; }
.hero__beeld img, .hero__binnen img { width: 100%; height: 100%; object-fit: cover; }
/* Begin- en eindwaarde in dezelfde eenheid, zodat de interpolatie ook zonder
   calc()-omweg leesbaar blijft. (`circle(0 …)` deed het net zo goed — beide
   varianten leveren halverwege `circle(75% …)` — maar 0% naast 150% leest
   duidelijker.) */
.hero__binnen { clip-path: circle(0% at 50% 50%); transition: clip-path .18s var(--soepel); }
.hero__binnen.aan { clip-path: circle(150% at 50% 50%); }
/* De sluier moet onder de tekst gegarandeerd donker genoeg zijn: op een foto
   met een lichte lucht haalde de oorspronkelijke verloop maar 1,5:1. Vanaf de
   helft is de dekking minimaal .72, wat wit boven de 4,5:1 houdt. */
/* Twee lagen in plaats van één verloop over de volle hoogte. De onderband is
   in pixels verankerd, dus de tekst staat bij élke vensterhoogte op ≥.90
   dekking; de lichte totaaltint laat de foto bovenin gewoon zien. Eén verloop
   over de hele hoogte moest zó zwaar zijn dat er van het beeld niets overbleef. */
.hero__waas {
  position: absolute; inset: 0;
  background:
    linear-gradient(0deg,
      rgba(8, 9, 12, .92) 0,
      rgba(8, 9, 12, .86) 300px,
      rgba(8, 9, 12, 0) 620px),
    linear-gradient(180deg,
      rgba(8, 9, 12, .34) 0%,
      rgba(8, 9, 12, .22) 30%,
      rgba(8, 9, 12, .3) 60%);
}
.hero__beeld, .hero__binnen, .hero__waas { z-index: 0; }
.hero__inhoud { z-index: 1; }
.hero__inhoud { position: relative; width: 100%; max-width: var(--breedte); margin-inline: auto; }
/* De schaduw hoort bij de tekst, niet bij de knoppen: op het oranje vlak gaf
   hij een vuile waas achter de letters. */
.hero__inhoud > p, .hero__inhoud h1, .hero__voet > p { text-shadow: 0 1px 22px rgba(0, 0, 0, .5); }
.hero__voet {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px;
  margin-top: clamp(24px, 3vw, 34px); padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .35);
}
.hero h1 { color: #fff; }
.hero__tekst { max-width: 40ch; font-size: var(--t-m); line-height: 1.6; color: rgba(255, 255, 255, .9); }

/* Het adresveld in de waardebepalingsband: één grote regel op een onderlijn. */
/* Op een telefoon was dit geen veld maar een tweede kop: 24px vet grijs, pal
   onder een kop van 28px, met alleen een streepje eronder en verder geen kader
   en geen vulling. De enige aanwijzing dat je erin moest typen was de knop
   eronder. Daar krijgt het nu hetzelfde materiaal als elk ander invoerveld op
   de site. Vanaf 700px staat het naast een forse knop en is de ruime maat wél
   te lezen als veld — maar ook daar met een kader rondom. */
.waardeveld {
  flex: 1; min-width: 260px; padding: 15px;
  border-width: 1px; border-color: var(--paneel-lijn);
  background: rgba(255, 255, 255, .05);
  font-size: var(--t-m); font-weight: 500; letter-spacing: 0;
}
@media (min-width: 700px) {
  .waardeveld {
    padding: 18px 20px;
    font-size: clamp(26px, 3.2vw, 40px); font-weight: 700; font-stretch: 112%; letter-spacing: -.03em;
  }
}
.waardeband { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--ruimte-3); }
/* De knop volgt het veld: op een telefoon stond een knop van 68px onder een
   veld van 58px, en dat leest als twee losse dingen in plaats van één regel. */
.waardeband .knop { padding: 16px 26px; font-size: var(--t-m); letter-spacing: .04em; }
@media (min-width: 700px) {
  .waardeband .knop { padding: 22px 34px; }
}
/* In de views stond hier inline `color:#fff`; dat won van de hover-regel en
   maakte de knoptekst bij hover wit-op-crème. Nu staat het in het blad. */
.hero .knop--lijn { color: #fff; border-color: rgba(255, 255, 255, .7); }
.hero .knop--lijn:hover { color: var(--paneel); border-color: var(--papier); }
.hero .lead { font-style: italic; font-size: clamp(18px, 2vw, 22px); line-height: 1.5; color: #efe9e0; }
/* Alleen het pijltje beweegt; de knop zelf blijft op de lijn staan. Zonder
   vaste line-height rekt dit flexitem de knop 8px hoger dan zijn buren. */
/* Beweegt alleen bij aanwijzen of focus. Als oneindige animatie was dit het
   enige element op de site dat eeuwig bewoog zonder pauzeknop (WCAG 2.2.2) —
   en een pijltje dat blijft stuiteren terwijl je een tekst leest is bovendien
   vermoeiend. */
.zweef { display: inline-block; }
.knop:hover .zweef, .knop:focus-visible .zweef { animation: zweven 2.2s ease-in-out infinite alternate; }
/* Schakelknoppen houden bewust hun opschrift — een label dat meewisselt levert
   samen met aria-pressed tegenstrijdige aankondigingen op ("Toon de gevel,
   ingedrukt"). Wie kijkt in plaats van luistert zag daardoor niets veranderen,
   dus de ingedrukte stand is nu ook zichtbaar. */
.hero .knop--lijn[aria-pressed="true"],
.marquee-pauze[aria-pressed="true"] {
  background: var(--accent); border-color: var(--accent); color: #16171c;
}

.knop .zweef { font-size: var(--t-l); line-height: 1; }
@keyframes zweven { from { transform: translate3d(0, 0, 0) } to { transform: translate3d(0, -8px, 0) } }

/* Bovenpadding klein: het kruimelpad erboven is nu hetzelfde zwarte vlak. */
.paginakop { padding-block: clamp(16px, 3vw, 34px) clamp(28px, 3vw, 40px); }
.paginakop .label { color: var(--paneel-zacht); }

/* Het kruimelpad hoort ín het zwarte blok. Als crème strook tussen de balk en
   de paginakop las het als een naad in plaats van als een keuze. */
.kruimels {
  padding-block: 16px 4px;
  background: var(--paneel); color: var(--paneel-zacht);
  font-size: var(--t-xs);
}
/* Melding onderin beeld, boven de mobiele actiebalk uit. */
.zweefmelding {
  position: fixed; left: var(--rand); right: var(--rand); bottom: 96px; z-index: 70;
  max-width: 520px; margin: 0 auto; padding: 14px 16px;
  background: var(--paneel); color: var(--paneel-tekst);
  border-left: 4px solid var(--accent); font-size: var(--t-s); line-height: 1.5;
}

/* Bewijsregel boven een formulier: cijfer groot, de rest klein ernaast. */
.vertrouwen {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px;
  padding: 16px 18px; border: 1px solid var(--lijn);
  background: color-mix(in srgb, var(--inkt) 4%, transparent);
}
.vertrouwen__cijfer {
  margin: 0; font-size: 34px; font-weight: 700; font-stretch: 118%;
  letter-spacing: -.04em; line-height: 1;
}
.vertrouwen p { margin: 0; }
.vertrouwen__persoon { flex-basis: 100%; padding-top: 14px; border-top: 1px solid var(--lijn-zacht); }

/* Het kruimelpad stond scheef en las verkeerd om. De link was een inline-block
   van 29px hoog naast een huidige-paginatekst van 14px, dus ze zaten niet op
   één lijn en de onderstreping hing los onder het woord. Het scheidingsteken
   was een vaag tekentje op halve dekking dat boven de regel zweefde. En link én
   huidige pagina hadden exact dezelfde kleur, waardoor je niet kon zien waar je
   was.
   Nu: alles op één basislijn, de link gedempt zonder streep, de pagina waar je
   staat in volle kleur, en een scheidingsteken dat meedoet in plaats van
   wegvalt. Het raakvlak blijft 24px hoog (WCAG 2.2 SC 2.5.8) via een
   pseudo-element, zodat de regelhoogte er niet van groeit. */
.kruimels ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px;
  margin: 0; padding: 0; list-style: none;
}
.kruimels li { display: flex; align-items: center; gap: 8px; }
.kruimels a { position: relative; color: inherit; text-decoration: none; }
.kruimels a::after { content: ""; position: absolute; inset: -6px -3px; }
.kruimels a:hover { color: var(--paneel-tekst); text-decoration: underline; text-underline-offset: .22em; }
.kruimels [aria-current="page"] { color: var(--paneel-tekst); font-weight: 600; }
.kruimels li + li::before {
  content: "/"; color: var(--paneel-zacht); opacity: .55;
  font-size: var(--t-xs); line-height: 1;
}

/* Even veel lucht boven als onder: de band had 72px erboven en niets eronder,
   waardoor hij optisch aan de sectie eronder vastplakte in plaats van als
   eigen onderbreking te lezen. */
/* margin-block collapsed niet met de marges van de secties eromheen, waardoor
   er boven 73px en onder 148px lucht stond. Padding op de band zelf plus een
   vaste marge houdt het aan beide kanten gelijk. */
.marquee-band {
  position: relative;
  margin-block: var(--sectie-m); padding-block: 22px;
  border-block: 1px solid var(--lijn); overflow: hidden;
}
.marquee-band + * { margin-top: 0; }
/* De animatie start pas als JavaScript hem aanzet. Anders loopt er bewegende
   tekst die niet te stoppen is, want de pauzeknop werkt alleen mét script
   (WCAG 2.2.2). */
.marquee {
  display: flex; width: max-content;
  font-size: clamp(30px, 5vw, 64px); font-weight: 700; font-stretch: 120%;
  letter-spacing: -.03em; text-transform: uppercase; white-space: nowrap; opacity: .9;
}
.marquee--loopt { animation: schuif 46s linear infinite; }
.marquee--stil { animation-play-state: paused; }
@keyframes schuif { from { transform: translate3d(0, 0, 0) } to { transform: translate3d(-50%, 0, 0) } }
/* De knop stond midden op de band en dus dwars over de letters. Nu staat hij
   onder de band, rechts uitgelijnd: even goed bereikbaar, maar hij snijdt de
   naam van een dorp niet meer doormidden. */
.marquee-pauze {
  position: absolute; right: var(--marge); bottom: -1px;
  min-height: 32px; padding: 4px 12px;
  border: 1px solid var(--lijn); border-bottom: 0; background: var(--papier); color: inherit;
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .06em; cursor: pointer;
}
.marquee-pauze:hover { background: var(--inkt); color: var(--papier); }
.marquee-band { padding-bottom: 40px; }
@media (prefers-reduced-motion: reduce) { .marquee, .marquee--loopt { animation: none } }

.bandlink {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
  margin: var(--ruimte-5) var(--marge) 0; padding: 22px 24px;
  border: 1px solid var(--lijn); color: inherit;
  font-size: clamp(18px, 2.2vw, 26px); font-weight: 700; font-stretch: 114%;
  letter-spacing: -.03em; text-transform: uppercase;
  transition: background .2s ease, color .2s ease;
}
.bandlink:hover { background: var(--inkt); color: var(--papier); text-decoration: none; }
.bandlink span:last-child { font-size: var(--t-m); letter-spacing: .06em; }

.stap { padding: 26px 0; border-top: 1px solid var(--lijn); }
/* Vaste nummerkolom: anders hangt de alinea eronder scheef ten opzichte van
   de kop, want "01" is smaller dan de indent van 42px. */
.stap__kop { display: grid; grid-template-columns: 24px 1fr; gap: 18px; align-items: baseline; }
.stap__nr { font-size: var(--t-xs); letter-spacing: .1em; color: var(--inkt-zacht); }
.stap p { margin-top: 12px; font-family: var(--font-serif); font-size: var(--t-l); line-height: 1.62; color: var(--inkt-zacht); }
@media (min-width: 700px) { .stap p { margin-left: 42px; max-width: 46ch; } }
/* Op een telefoon stond het nummer links, de kop 42px ingesprongen en de tekst
   weer helemaal links: één blokje met drie linkerranden, op drie pagina's. Daar
   gaat het nummer boven de kop staan, zodat alles op één rooilijn begint. */
@media (max-width: 699px) {
  .stap__kop { grid-template-columns: 1fr; gap: 4px; }
  .stap__nr { font-size: var(--t-label); }
}
.stapbeeld { position: relative; min-height: 380px; overflow: hidden; background: var(--papier-diep); }
.stapbeeld img { position: absolute; inset: 0; }
@media (min-width: 900px) { .stapbeeld { min-height: 560px; } }

.verkoopstap { display: grid; gap: 12px 32px; padding: 30px 0; border-top: 1px solid var(--lijn); align-items: start; }
@media (min-width: 900px) { .verkoopstap { grid-template-columns: 80px 1fr 1.1fr; } }
.verkoopstap p { font-family: var(--font-serif); font-size: var(--t-l); line-height: 1.62; color: var(--inkt-zacht); max-width: 56ch; }

.doos--groot { padding: var(--doos-l); }
.kader { padding: var(--doos-l); border: 1px solid var(--lijn); }
.kader__waarde { margin-top: 12px; font-size: clamp(30px, 4vw, 54px); font-weight: 700; font-stretch: 118%; letter-spacing: -.04em; }

/* align-content: start plus de naamregel naar beneden: het grid verdeelde de
   overgebleven hoogte over álle tussenruimtes, dus zodra één recensie een regel
   korter was schoven kop, quote én naam van die kaart een stuk omlaag en stond
   de rij zichtbaar scheef. Nu staat de bovenkant vast en zakt alleen de
   naamregel mee naar de onderrand. */
/* Teamkaart: contactgegevens vast aan de onderkant, net als bij de
   woningkaarten. */
.persoonkaart { display: flex; flex-direction: column; min-width: 0; }
.persoonkaart > :last-child { margin-top: auto; padding-top: var(--ruimte-2); }
/* Telefoon en e-mail stonden op een telefoon als twee regels van 15px pal op
   elkaar; met een duim raak je dan altijd de verkeerde. Onder de 700px worden
   het twee volwaardige rijen met een haarlijn ertussen. */
@media (max-width: 699px) {
  .persoonkaart > :last-child { display: grid; }
  .persoonkaart > :last-child br { display: none; }
  .persoonkaart > :last-child a {
    display: flex; align-items: center; min-height: 44px;
    /* Niet var(--lijn): dat is currentColor, en currentColor is hier de
       roestkleur van de link zelf. Elke collegakaart kreeg daardoor twee volle
       oranje strepen over de hele breedte — acht op een pagina, en op desktop
       bestonden ze niet. De scheidingslijn hoort bij de kaart, niet bij de link. */
    border-top: 1px solid color-mix(in srgb, var(--inkt) 22%, transparent);
  }
}

/* Flexkolom, geen grid: bij `display: grid` met `align-content: start` blijft de
   overgebleven hoogte onderaan liggen en doet `margin-top: auto` op een item
   niets. Met flex zakt de ondertekening wél naar de onderrand, zodat drie
   recensies naast elkaar hun ondertekening op één lijn hebben ook als het ene
   citaat een regel korter is. */
.recensie {
  display: flex; flex-direction: column; gap: 12px;
  padding: var(--doos); border: 1px solid var(--lijn);
}
.recensie > :last-child { margin-top: auto; padding-top: 4px; }
.recensie__cijfer {
  display: inline-flex; align-items: center; justify-content: center;
  /* Inkt, geen accent: dit is een cijfer om te lezen, geen knop om op te
     drukken. Drie oranje tegels naast elkaar trokken meer aandacht dan de
     enige echte actie op diezelfde pagina. */
  width: 44px; height: 44px; background: var(--paneel); color: var(--paneel-tekst);
  font-size: var(--t-l); font-weight: 700;
}

.faq { border-top: 1px solid var(--lijn); }
.faq summary {
  display: flex; justify-content: space-between; gap: 16px; padding: 18px 0;
  font-size: clamp(16px, 1.8vw, 19px); font-weight: 600; cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: var(--t-xl); }
.faq[open] summary::after { content: "–"; }
.faq p { padding-bottom: 20px; max-width: 68ch; font-family: var(--font-serif); font-size: var(--t-l); line-height: 1.6; color: var(--inkt-zacht); }

/* Grid met een vaste tweede kolom in plaats van flex-wrap. Met flex sprong het
   blok om zodra de kop iets langer was: op de ene pagina stonden tekst en
   knoppen naast elkaar, op de andere onder elkaar met een groot leeg zwart vlak
   ernaast. Hetzelfde onderdeel hoorde er niet per pagina anders uit te zien. */
.cta {
  display: grid; gap: 22px 32px; align-items: center;
  padding: clamp(26px, 3vw, 36px) clamp(22px, 3vw, 32px);
}
@media (min-width: 780px) {
  .cta { grid-template-columns: minmax(0, 1fr) auto; }
  .cta > :last-child { justify-self: end; }
}
.cta > :first-child { min-width: 0; }

.lijstrij {
  display: grid; gap: 10px 32px; align-items: baseline;
  padding: 24px 0; border-top: 1px solid var(--lijn); color: inherit;
}
/* De hele rij is een link, maar het enige teken daarvan was een hover-effect —
   en hover bestaat op een telefoon niet. De kop krijgt daarom de onderstreping
   die op de rest van de site het kenmerk van een link is. */
.lijstrij:hover { text-decoration: none; opacity: .65; }
.lijstrij .titel-ls,
.lijstrij .titel-s {
  text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: .18em; text-decoration-color: var(--inkt-zacht);
}
.lijstrij:hover .titel-ls,
.lijstrij:hover .titel-s { text-decoration-color: currentColor; }
@media (min-width: 900px) {
  .lijstrij--nieuws { grid-template-columns: 120px 1.4fr 1fr; }
  .lijstrij--vacature { grid-template-columns: 2fr 1fr 1fr auto; }
}

.artikel-inhoud { max-width: 68ch; display: grid; gap: 20px; }
.artikel-inhoud h2 { margin-top: 12px; font-size: clamp(20px, 2.4vw, 28px); text-transform: uppercase; }
.artikel-inhoud p { font-family: var(--font-serif); font-size: var(--t-l); line-height: 1.7; }
.artikel-inhoud ul { margin: 0; padding-left: 22px; display: grid; gap: 10px; font-size: var(--t-m); }

.tekstpagina { max-width: 74ch; display: grid; gap: 16px; }
.tekstpagina h2 { margin-top: 18px; font-size: clamp(19px, 2.2vw, 24px); text-transform: uppercase; }
.tekstpagina p { font-size: var(--t-m); line-height: 1.7; }
.tekstpagina ul { margin: 0; padding-left: 22px; display: grid; gap: 8px; font-size: var(--t-m); line-height: 1.6; }

.kaart-houder { position: relative; height: min(72vh, 620px); background: var(--papier-diep); overflow: hidden; }
.kaart-houder--hoog { height: min(76vh, 700px); }
.kaart-houder--laag { height: 380px; }
/* Op /contact vulde deze kaart de hele hoogte van de kolom ernaast. Het
   middelpunt — precies waar de speld "Ons kantoor" staat — kwam daardoor
   honderden pixels onder de vouw te liggen, en in het eerste scherm zag je een
   buitenwijk zonder speld. Een vaste hoogte die meeschuift houdt het kantoor
   altijd in beeld. */
.kaart-houder--vullend { height: min(70vh, 600px); }
@media (min-width: 900px) {
  .kaart-houder--vullend { position: sticky; top: var(--balk); }
}
.kaart-houder__vlak { position: absolute; inset: 0; }
/* Regeltje onderin op een telefoon in plaats van een laag over de hele kaart:
   slepen vraagt om twee vingers, dus de kaart blijft zichtbaar en elke speld
   blijft met één tik te openen. */
/* Bovenin, niet onderin: onderaan liep de regel dwars door de OpenStreetMap-
   attributie heen (die zit in Leaflets controlpane op z-index 1000 en won).
   Naast lelijk is dat een licentiepunt — OSM vraagt om leesbare naamsvermelding. */
.kaart-hint {
  position: absolute; left: 0; right: 0; top: 0; z-index: 500;
  margin: 0; padding: 9px 12px;
  background: rgba(8, 9, 12, .82); color: #fff;
  font: 600 12px/1.4 var(--font); letter-spacing: .04em; text-align: center;
  pointer-events: none;
}

/* Rusttoestand van de kaart. Dit was een vlak beige veld met een regeltje erin,
   en op een breed scherm vulde dat het hele eerste scherm: je klikte op "op de
   kaart" en kreeg niets. Nu ligt er een fijn stratenraster onder, zodat het
   vlak ook vóór de tegels binnen zijn al als kaart leest en er iets te zien is
   waar iets komt. */
.kaart-laadt {
  position: absolute; inset: 0; z-index: 1;
  display: grid; place-content: center;
  color: var(--inkt-zacht); font-size: var(--t-s); letter-spacing: .1em;
  text-transform: uppercase;
  background:
    repeating-linear-gradient(0deg, transparent 0 39px, color-mix(in srgb, var(--inkt) 9%, transparent) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, color-mix(in srgb, var(--inkt) 9%, transparent) 39px 40px),
    var(--papier-diep);
}
.kaart-laadt::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(114deg, transparent calc(50% - 5px), color-mix(in srgb, var(--inkt) 12%, transparent) calc(50% - 5px) calc(50% + 5px), transparent calc(50% + 5px)),
    linear-gradient(28deg, transparent calc(38% - 3px), color-mix(in srgb, var(--inkt) 10%, transparent) calc(38% - 3px) calc(38% + 3px), transparent calc(38% + 3px));
}
.kaart-laadt span { position: relative; }
.leaflet-container { background: var(--papier-diep) !important; font-family: var(--font) !important; }

/* De kaarttegels waren met afstand het bontste vlak op de site: felgroene
   parken, blauw water en geel-oranje wegen naast een palet van crème, inkt en
   één accentkleur. Ontkleuren en licht warm trekken zet ze terug in de huisstijl
   en laat de oranje spelden er juist uitspringen. Filter op de tegellaag alleen,
   dus de spelden en het hoverkaartje houden hun eigen kleur. Geen andere
   tegelaanbieder: dat zou een extra afhankelijkheid en een andere
   bronvermelding betekenen. */
.leaflet-tile-pane { filter: grayscale(1) contrast(.9) brightness(1.06) sepia(.16); }
/* Leaflets bronvermelding komt standaard in blauw systeemlettertype mét
   vlagemoji. Dat is het enige blauw en het enige emoji op de hele site, en het
   staat in elke kaart rechtsonder. De vermelding blijft staan — OpenStreetMap
   vraagt daarom — maar dan wel in de huisstijl. */
.leaflet-control-attribution {
  font-size: var(--t-xs) !important;
  background: color-mix(in srgb, var(--papier) 88%, transparent) !important;
  color: var(--inkt-zacht) !important;
  padding: 2px 8px !important;
}
.leaflet-control-attribution a { color: var(--inkt-zacht) !important; text-decoration: underline; }
.leaflet-control-attribution a:hover { color: var(--accent-tekst) !important; }
/* Het blauw-gele vlaggetje achter "Leaflet" is het enige zuivere blauw en geel
   op de hele site. Twee selectoren diep, want Leaflet laadt zijn eigen blad ná
   dit blad en zet er zelf `display: inline !important` op — bij gelijke
   belangrijkheid wint dan de laatste, dus alleen meer specificiteit helpt.
   De tekstlink blijft staan; die is wat de licentie vraagt. */
.leaflet-control-attribution .leaflet-attribution-flag { display: none !important; }

/* Leaflet levert zijn eigen knoppen mee: afgeronde hoeken en Lucida Console.
   Dat waren de enige ronde hoeken en het enige vreemde lettertype op de hele
   site, precies midden in beeld. Hier gaan ze mee in de huisstijl — en meteen
   naar een klikdoel van 44px. */
.leaflet-bar,
.leaflet-bar a {
  border-radius: 0 !important;
  border-color: var(--inkt) !important;
  color: var(--inkt) !important;
  font-family: var(--font) !important;
}
.leaflet-bar a {
  width: 44px !important; height: 44px !important; line-height: 44px !important;
  /* Leaflet zet hier spierwit neer. Dat was de enige zuivere witte vlek op de
     hele site, midden op een ontkleurde kaart in een crème pagina. */
  background: var(--papier) !important;
  font-size: 20px !important; font-weight: 700;
}
.leaflet-bar a:hover { background: var(--papier-diep) !important; }
.leaflet-bar a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { border-radius: 0 !important; }

/* Leaflet zet zonder iconSize de linkerbovenhoek op de coördinaat; met deze
   verschuiving wijst de onderkant van het vlaggetje naar het werkelijke punt. */
.speld {
  display: inline-block;
  transform: translate(-50%, -100%);
  background: var(--paneel); color: var(--papier);
  font: 700 12px/1 var(--font); letter-spacing: -.01em;
  padding: 8px 11px; white-space: nowrap; box-shadow: 0 2px 12px rgba(0, 0, 0, .3);
  transition: background .16s ease, color .16s ease, transform .16s var(--soepel);
}
.speld--actief { background: var(--accent); color: #16171c; transform: translate(-50%, calc(-100% - 3px)); }
.speld--verkocht { background: var(--roest); color: var(--papier); }
/* Telefoonvariant: een stip in plaats van een prijsvlak. Negen prijzen van 80px
   op een kaart van 350px lagen over elkaar heen en geen enkele was te lezen.
   Het klikvlak blijft 44px; alleen de zichtbare stip is klein. */
.speld--stip {
  width: 44px; height: 44px; padding: 0; box-shadow: none; background: none;
  display: grid; place-items: center; transform: translate(-50%, -50%);
}
.speld--stip .speld__prijs {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.speld--stip::before {
  content: ""; width: 19px; height: 19px; border-radius: 50%;
  background: var(--paneel); border: 3px solid var(--papier);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
}
.speld--stip.speld--verkocht::before { background: var(--roest); }
.speld--stip.speld--actief { transform: translate(-50%, -50%); }
.speld--stip.speld--actief::before { background: var(--accent); border-color: #16171c; width: 23px; height: 23px; }

/* Kaartje dat bij hover over een speld verschijnt: het beeld van de woning,
   het adres en de prijs. Klikken opent de woningpagina. */
.kaartje {
  position: absolute; left: 14px; bottom: 32px; z-index: 600;
  width: 250px; background: var(--papier); color: var(--inkt);
  box-shadow: 0 12px 44px rgba(0, 0, 0, .32);
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .22s ease, transform .22s var(--soepel);
}
.kaartje.aan { opacity: 1; transform: none; pointer-events: auto; }
.kaartje img { width: 100%; height: 140px; object-fit: cover; background: var(--papier-diep); }
.kaartje__tekst { display: grid; gap: 4px; padding: 13px 15px 15px; }
.kaartje__adres { font-size: var(--t-m); font-weight: 700; font-stretch: 112%; letter-spacing: -.02em; text-transform: uppercase; }
.kaartje__meta { font-size: var(--t-xs); color: var(--inkt-zacht); }
.kaartje__prijs { margin-top: 6px; font-size: var(--t-m); font-weight: 700; letter-spacing: -.02em; }
.kaartje__link { margin-top: 8px; font-size: var(--t-label); font-weight: 700; letter-spacing: .08em; color: var(--accent-tekst); }
.kaartje a { color: inherit; text-decoration: none; display: block; }
.kaartje a:hover { text-decoration: none; }
.kaartje a:hover .kaartje__link { color: var(--accent-diep); }

/* 10. PRINT ============================================================== */

@media print {
  .balk, .lade, .actiebalk, .voet, .bewaar, .galerij__knop, .galerij__terug,
  .duimen, .kaart-houder, .rekenaar, .overslaan, form, .bandlink,
  .marquee-pauze, .paginering { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; padding: 0; }
  .donker, .prijsblok, .paginakop, .cta, .filterbalk { background: #fff !important; color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
  .galerij__hoofd { max-height: 9cm; }
  .sectie { padding-block: 12pt; }
}