/* Lettertype Hanken Grotesk, op onze eigen server (geen Google: privacy, AVG).
   Variabel lettertype: één bestand voor alle diktes. Licentie: letters/OFL.txt. */
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("letters/hanken-grotesk-latin-ext.a3a0917757d7.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("letters/hanken-grotesk-latin.a6b899943e31.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Het ontwerp van de site.
   Op basis van Dynex en Houzez, maar rustiger en met echte cijfers.
   Wit, lichtblauw accent, vette schreefloze koppen (Hanken Grotesk),
   donkerblauwe kop en voet, hoofdfoto over de volle breedte. */
:root{color-scheme:light;
  --wit:#fff;--grond:#f4f8fb;--inkt:#0f1d2b;--zacht:#5a6b7b;--lijn:#e2e9f0;
  /* Lichtblauw (Houzez); voor tekst een donkerdere tint die goed leesbaar is. */
  --blauw:#1aa3e8;--blauw-knop:#1593d6;--blauw-tekst:#0a74b0;--blauw-zacht:#e7f5fd;--nacht:#0c1a2a;
  --sans:"Hanken Grotesk",ui-sans-serif,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --rond:20px;--zij:300px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--wit);color:var(--inkt);font:16px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid var(--blauw);outline-offset:3px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rand{max-width:1280px;margin:0 auto;padding:0 24px}
.proef{background:#fef3c7;color:#78350f;text-align:center;padding:8px 16px;font-size:14px}
h1,h2,h3{letter-spacing:-.025em}

/* knoppen: pil met pijl-rondje, zoals Dynex */
.pil{display:inline-flex;align-items:center;gap:12px;padding:7px 7px 7px 20px;border-radius:999px;font-weight:600;font-size:15px;
  text-decoration:none;white-space:nowrap;background:var(--inkt);color:#fff;border:0;cursor:pointer;font-family:inherit;transition:background .2s}
.pil i{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#fff;color:var(--inkt);font-style:normal;font-size:15px;
  transition:transform .25s}
.pil:hover i{transform:rotate(45deg)}
.pil-blauw{background:var(--blauw-knop)}
.pil-blauw:hover{background:var(--blauw-tekst)}
.pil-blauw i{color:var(--blauw-knop)}
.pil-wit{background:#fff;color:var(--inkt)}
.pil-wit i{background:var(--inkt);color:#fff}

/* kop */
/* Kop in dezelfde donkerblauwe kleur als de voet. */
.kop{position:sticky;top:0;z-index:20;background:var(--nacht);color:#fff}
.kop .rand{display:flex;align-items:center;gap:32px;height:80px}
.merk{display:flex;align-items:center;gap:11px;font-weight:700;font-size:24px;letter-spacing:-.03em;text-decoration:none;white-space:nowrap}
.merk em{font-style:normal;color:var(--blauw)}
.merk svg{width:34px;height:34px;padding:6px;border-radius:10px;background:var(--blauw);fill:#fff}
.kop nav{display:flex;gap:8px;margin:0 auto}
.kop nav a{text-decoration:none;font-weight:500;font-size:16px;color:#fff;padding:8px 16px;border-radius:999px;white-space:nowrap}
.kop nav a:hover{background:rgba(255,255,255,.1)}
.kop nav a.aan{color:#fff;background:rgba(26,163,232,.28)}
.kop .pil{background:var(--blauw-knop);font-size:15px;padding:5px 5px 5px 18px;gap:10px}   /* kleiner */
.kop .pil i{width:28px;height:28px;font-size:13px}
.kop .pil:hover{background:var(--blauw)}
.kop .pil i{color:var(--blauw-knop)}

/* held: foto over de volle breedte, vast aan de donkere kop */
.held-rand{padding-top:0}
.held{position:relative;min-height:620px;overflow:hidden;display:flex;align-items:flex-end;background:var(--nacht)}
/* Elke foto zakt heel langzaam terug van iets ingezoomd naar normaal (14 s); de
   volgende vloeit er na 10 s in 4,8 s overheen (site.js). Geen harde wissel. */
.held-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center var(--held-y,60%);
  animation:drijf 14s cubic-bezier(.25,.6,.35,1) both}
@keyframes drijf{from{transform:scale(1.08)}to{transform:none}}
.held-laag .held-foto{opacity:0;transition:opacity 4.8s cubic-bezier(.4,0,.2,1)}
.held-laag.aan .held-foto{opacity:1}
/* bovenin loopt de kopkleur over in de foto; links donker voor de tekst */
.held::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(12,26,42,.85) 0%,rgba(12,26,42,0) 22%),
             linear-gradient(90deg,rgba(9,22,36,.82) 0%,rgba(9,22,36,.55) 40%,rgba(9,22,36,.05) 72%),
             linear-gradient(0deg,rgba(9,22,36,.55),transparent 45%)}
.held-binnen{position:relative;z-index:2;width:100%;display:flex;justify-content:space-between;align-items:flex-end;gap:32px}
.held-tekst{padding:72px 0 40px;max-width:720px;color:#fff;animation:op .9s .25s cubic-bezier(.2,.7,.2,1) both}
@keyframes op{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.held h1{font-size:clamp(38px,4.4vw,59px);line-height:1.04;font-weight:700;margin:0;text-wrap:balance}
.onder{font-size:18px;line-height:1.6;color:rgba(255,255,255,.85);margin:20px 0 30px;max-width:34em}
.knoppen{display:flex;flex-wrap:wrap;gap:12px}

/* beloftes in de foto, onder de knoppen */
.held-punten{list-style:none;margin:44px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 28px;font-size:15px;font-weight:600;color:rgba(255,255,255,.92)}
.held-punten li{display:flex;align-items:center;gap:9px}
.held-punten svg{width:20px;height:20px;flex:none;fill:none;stroke:#7cc9f2;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* top 10: doorlopende strook (zie site.js) */
.top10{padding-top:80px}
.sectiekop{margin-bottom:24px}
.sectiekop h2,.lijstkop h2{font-size:clamp(28px,3vw,38px);font-weight:700;line-height:1.1;margin:0}
.sub{margin:8px 0 0;color:var(--zacht)}
.tegel{text-decoration:none;display:flex;flex-direction:column}
.tegel-beeld{position:relative;display:block;aspect-ratio:4/3.2;border-radius:16px;overflow:hidden;background:var(--grond)}
.tegel-beeld img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.tegel:hover .tegel-beeld img{transform:scale(1.05)}
.soort{position:absolute;top:12px;left:12px;font-size:12px;font-weight:700;padding:5px 10px;border-radius:999px;background:#fff;color:var(--inkt)}
.soort-huur{background:var(--blauw-knop);color:#fff}
.bedrag{position:absolute;right:12px;bottom:12px;font-weight:700;font-size:16px;padding:7px 12px;border-radius:999px;color:#fff;
  background:rgba(12,26,42,.72);backdrop-filter:blur(6px)}
.bedrag small{font-weight:500;font-size:12px;opacity:.8}
.tegel-adres{font-weight:700;font-size:17px;margin-top:14px;letter-spacing:-.01em}
.tegel:hover .tegel-adres{color:var(--blauw-tekst)}
.tegel-plaats{color:var(--zacht);font-size:15px}
.tegel-feiten{display:flex;gap:14px;margin-top:8px;font-size:13px;color:var(--zacht)}
.tegel-feiten i{font-style:normal}

/* pagina: lijst + advertentiestrook */
.pagina{display:grid;grid-template-columns:minmax(0,1fr) var(--zij);gap:40px;align-items:start;padding-top:88px;scroll-margin-top:80px}
.pagina.verder{padding-top:40px}
main{min-width:0}
.zijkant{position:sticky;top:104px;padding-top:4px}   /* advertentie 300 x 600 scrollt mee */
@media (max-height:720px){.zijkant{top:88px}}
/* Advertentievakken: het mediabureau vult ze (op id/data-advertentie). Wij
   reserveren alleen de ruimte, zodat de pagina niet verspringt. Gestippeld
   met uitleg alleen in de voorbeeldstand. */
.reclame{display:grid;place-items:center;text-align:center;font-size:13px;overflow:hidden}
.reclame > span{display:none}
.voorbeeld .reclame{border:1.5px dashed #c6d2dd;border-radius:16px;color:#8696a6;
  background:repeating-linear-gradient(135deg,transparent 0 10px,rgba(198,210,221,.18) 10px 20px)}
.voorbeeld .reclame > span{display:block}
.reclame-hoog{height:600px}
/* Plekken van Nextday Media: "pc" vanaf 1000 px, "mob" tot 999 px. */
.reclame-970x250{max-width:970px;height:250px;margin:0 auto}
.reclame-728x90{max-width:728px;height:90px;margin:0 auto}
.reclame-300x250{width:300px;height:250px;margin:0 auto}
.reclame-video{max-width:640px;aspect-ratio:16/9;margin:0 auto}
.reclame-native{min-height:200px;border-radius:var(--rond)}
.reclame-label{display:block;margin:0 0 6px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--zacht)}
.reclame-rij{padding-top:28px}
.reclame-rij-woning{padding-top:0;margin-bottom:20px}
.bladeren + .reclame-plek{margin-top:32px}
.woning .reclame-rij{padding-top:40px}
.woning .reclame-rij-woning{padding-top:0}
@media (max-width:999px){.alleen-pc{display:none}}
@media (min-width:1000px){.alleen-mob{display:none}.reclame-onder{display:none}}
.lijstkop{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:24px}
.schakel{display:flex;padding:4px;border-radius:999px;background:var(--grond);border:1px solid var(--lijn)}
.schakel a{padding:10px 26px;border-radius:999px;font-weight:600;font-size:16px;text-decoration:none;color:var(--zacht)}
.schakel a:hover{color:var(--inkt)}
.schakel a[aria-current]{background:var(--blauw-knop);color:#fff;box-shadow:0 4px 12px rgba(21,147,214,.3)}

.lijst{display:flex;flex-direction:column;gap:20px}
.kaart{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px;padding:14px;border-radius:var(--rond);background:#fff;
  border:1px solid var(--lijn);transition:box-shadow .25s,border-color .25s}
.kaart:hover{border-color:#cfe3f1;box-shadow:0 14px 40px rgba(12,26,42,.08)}
.beeld{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:6px;align-content:start;text-decoration:none}
.beeld img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:12px;background:var(--grond)}
.beeld img:first-of-type{grid-column:1/-1}
.kaart[data-n="2"] .beeld img:nth-of-type(2){display:none}
.geen-foto{grid-column:1/-1;aspect-ratio:3/2;display:grid;place-items:center;border-radius:12px;font-weight:700;font-size:20px;
  color:var(--blauw-tekst);background:var(--blauw-zacht);padding:16px;text-align:center}
.rang{position:absolute;top:10px;left:10px;min-width:32px;height:32px;padding:0 10px;border-radius:999px;display:grid;place-items:center;
  font-weight:700;font-size:14px;background:#fff;box-shadow:0 2px 8px rgba(12,26,42,.15);font-variant-numeric:tabular-nums}
.nieuw{position:absolute;top:10px;right:10px;background:var(--blauw-knop);color:#fff;font-size:12px;font-weight:700;padding:6px 11px;border-radius:999px}
.info{display:flex;flex-direction:column;min-width:0;padding:8px 6px 4px 0}
.prijs{margin:0;font-size:32px;font-weight:700;letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums}
.prijs small{font-size:15px;font-weight:500;color:var(--zacht);letter-spacing:0}
.kaart h3{font-size:18px;font-weight:600;margin:8px 0 0;letter-spacing:-.01em}
.kaart h3 a{text-decoration:none}
.kaart h3 a:hover{color:var(--blauw-tekst)}
.plaats{margin:2px 0 0;color:var(--zacht)}
.feiten{list-style:none;padding:0;margin:16px 0 22px;display:flex;flex-wrap:wrap;gap:8px}
.feiten li{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--inkt);background:var(--grond);border-radius:10px;padding:6px 11px}
.feiten svg{width:16px;height:16px;fill:none;stroke:var(--blauw-tekst);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.naar{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:12px;text-decoration:none;font-size:14px;
  border-top:1px solid var(--lijn);padding-top:14px}
.naar span{color:var(--zacht);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.naar b{display:flex;align-items:center;gap:8px;color:var(--blauw-tekst);font-weight:700;white-space:nowrap}
.naar b i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--blauw-zacht);font-style:normal;transition:transform .25s,background .25s,color .25s}
.naar:hover b i{transform:translateX(3px);background:var(--blauw-knop);color:#fff}
.leeg{color:var(--zacht);padding:24px 0}

.bladeren{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:36px}
.nummers{display:flex;gap:8px}
.nummers a{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;text-decoration:none;font-weight:700;font-size:16px;
  border:1px solid var(--lijn);background:#fff}
.nummers a:hover{border-color:var(--blauw)}
.nummers a[aria-current]{background:var(--blauw-knop);border-color:var(--blauw-knop);color:#fff}
.stap{white-space:nowrap;font-weight:600;color:var(--blauw-tekst);text-decoration:none;padding:12px 18px;border-radius:999px;border:1px solid var(--lijn)}
a.stap:hover{border-color:var(--blauw);background:var(--blauw-zacht)}
.stap.uit{color:#b8c3cd}

/* nieuwsbrief en uitleg */
#brief{padding-top:96px}
.brief{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center;padding:34px 40px;border-radius:28px;
  background:linear-gradient(120deg,var(--blauw-zacht),#f3fbff);border:1px solid #d6edfa}
.brief h2{font-size:clamp(22px,2.2vw,28px);font-weight:700;line-height:1.1;margin:0}
.brief p{margin:8px 0 0;color:var(--zacht);font-size:15px}
.brief form{display:flex;flex-wrap:wrap;gap:8px;padding:6px;background:#fff;border-radius:999px;border:1px solid var(--lijn)}
.brief input{flex:1;min-width:160px;font:inherit;font-size:15px;padding:8px 14px;border:0;background:transparent;color:var(--inkt)}
.brief input:focus{outline:none}
.brief output{flex-basis:100%;font-size:14px;padding:0 16px 8px;color:var(--zacht)}
.hoe{padding-top:96px}
.hoe h2{font-size:clamp(28px,3vw,38px);font-weight:700;margin:0 0 28px}
.drie{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.drie>div{padding:28px;border-radius:var(--rond);background:var(--grond)}
.drie h3{font-size:19px;margin:0 0 8px}
.drie p{margin:0;color:var(--zacht)}
.voet{margin-top:96px;background:var(--nacht);color:rgba(255,255,255,.65);padding:48px 0 110px;font-size:14px}
.voet .rand{display:flex;gap:48px;align-items:center}
.voet .merk{color:#fff}
.voet p{margin:0;max-width:52em}

/* ===== woningpagina ===== */
.woning{padding-top:28px}
.kruimel a{display:inline-flex;font-weight:600;color:var(--blauw-tekst);text-decoration:none;padding:8px 0}
.kruimel a:hover{text-decoration:underline;text-underline-offset:4px}

/* foto's: één grote en twee kleine (of alleen de grote) */
.galerij{position:relative;display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:10px;height:min(520px,52vw);margin-top:12px}
.galerij a,.galerij .vergroot{display:block;overflow:hidden;border-radius:20px;background:var(--grond)}
.galerij .vergroot{all:unset;box-sizing:border-box;display:block;overflow:hidden;border-radius:20px;background:var(--grond);cursor:zoom-in}
.galerij .vergroot:focus-visible{outline:3px solid var(--blauw);outline-offset:3px}
.galerij > :first-child{grid-row:1/-1}
.galerij img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.galerij .vergroot:hover img{transform:scale(1.03)}
.alle-fotos{position:absolute;right:18px;bottom:18px;font-weight:700;font-size:14px;padding:8px 14px;border-radius:999px;background:#fff;
  box-shadow:0 2px 10px rgba(12,26,42,.18);pointer-events:none}

/* lichtbak: foto's groot */
.lichtbak{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;gap:16px;padding:24px;
  background:rgba(8,16,26,.94)}
.lichtbak[hidden]{display:none}
.lichtbak figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;max-width:min(1200px,100%);min-width:0}
.lichtbak figure img{display:none;max-width:100%;max-height:calc(100vh - 120px);border-radius:12px;object-fit:contain}
.lichtbak figure img.aan{display:block}
.lichtbak figcaption{color:rgba(255,255,255,.75);font-size:14px}
.lb-pijl,.lb-dicht{all:unset;cursor:pointer;display:grid;place-items:center;border-radius:50%;color:#fff;background:rgba(255,255,255,.12);
  transition:background .2s}
.lb-pijl{flex:0 0 52px;height:52px;font-size:22px}
.lb-dicht{position:absolute;top:18px;right:18px;width:46px;height:46px;font-size:28px;line-height:1}
.lb-pijl:hover,.lb-dicht:hover{background:var(--blauw-knop)}
.lb-een .lb-pijl{display:none}   /* één foto: niets te bladeren */
.lb-pijl:focus-visible,.lb-dicht:focus-visible{outline:2px solid #fff;outline-offset:3px}
.galerij[data-n="1"],.galerij[data-n="2"]{grid-template-columns:1fr;grid-template-rows:1fr}
.galerij[data-n="2"] a:nth-child(2){display:none}
.galerij .soort{top:18px;left:18px;font-size:13px;padding:6px 12px}
.plek{position:absolute;left:18px;bottom:18px;font-weight:700;font-size:14px;padding:8px 14px;border-radius:999px;color:#fff;
  background:rgba(12,26,42,.72);backdrop-filter:blur(6px)}
.geen-foto{grid-row:1/-1}
/* één foto op een vervaagde kopie van zichzelf */
.galerij .enkel{position:relative;background:#1b2632}
.enkel .waas{position:absolute;inset:-40px;width:calc(100% + 80px);height:calc(100% + 80px);object-fit:cover;
  filter:blur(30px) brightness(.6) saturate(1.1)}
.enkel .foto{position:absolute;inset:0;margin:auto;width:auto;height:auto;max-width:calc(100% - 48px);max-height:calc(100% - 48px);
  border-radius:12px;box-shadow:0 18px 50px rgba(0,0,0,.4)}
.galerij .enkel:hover img{transform:none}

.woning-raster{display:grid;grid-template-columns:minmax(0,1fr) var(--zij);gap:40px;align-items:start;margin-top:32px}
.woning-kop h1{font-size:clamp(30px,3.4vw,44px);font-weight:700;line-height:1.08;margin:0}
.woning-kop .plaats{font-size:18px;margin-top:6px}
.woning-kop .prijs{font-size:clamp(34px,3.6vw,46px);margin-top:18px}
.woning-kop .feiten{margin:18px 0 0}
.woning-kop .feiten li{font-size:15px;padding:8px 13px}
.blok{margin-top:40px;padding-top:32px;border-top:1px solid var(--lijn)}
.blok h2{font-size:24px;font-weight:700;margin:0 0 14px}
.omschrijving{font-size:18px;line-height:1.7;margin:0;max-width:40em}
.bron-tekst{color:var(--zacht);margin:14px 0 24px}
.pil.groot{font-size:17px;padding:9px 9px 9px 26px}
.pil.groot i{width:38px;height:38px}
.kaartvak{height:380px;border-radius:20px;overflow:hidden;background:var(--grond);border:1px solid var(--lijn);z-index:0}
.kaart-bron{font-size:13px;color:var(--zacht);margin:10px 0 0}
.speld span{display:block;width:34px;height:34px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--blauw-knop);
  border:3px solid #fff;box-shadow:0 4px 12px rgba(12,26,42,.35)}
.meer{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

/* rechts: knop naar de makelaar, daaronder advertentie */
/* Zijkolom woningpagina: het blok met prijs en makelaarsknop staat vast bovenaan;
   alleen de advertentie scrollt mee (sticky). */
.woning-zij{display:flex;flex-direction:column;gap:20px;padding-top:0;position:static;align-self:stretch}
.woning-zij .reclame-plek{position:sticky;top:104px}
.actie{padding:24px;border-radius:20px;background:#fff;border:1px solid var(--lijn);box-shadow:0 14px 40px rgba(12,26,42,.08)}
.actie-prijs{margin:0;font-size:30px;font-weight:700;letter-spacing:-.03em}
.actie-prijs small{font-size:15px;font-weight:500;color:var(--zacht);letter-spacing:0}
.actie-adres{margin:4px 0 20px;color:var(--zacht)}
.actie .pil{width:100%;justify-content:space-between}
.actie-wie{margin:14px 0 0;font-size:14px;color:var(--zacht)}
.actie-wie b{color:var(--inkt);font-weight:600}

.weg{padding:96px 24px 40px;max-width:760px}
.weg h1{font-size:clamp(30px,4vw,46px);font-weight:700;line-height:1.1;margin:0}
.weg p{font-size:18px;color:var(--zacht);margin:16px 0 28px}

@media (max-width:1080px){
  .woning-raster{grid-template-columns:minmax(0,1fr)}
  .woning-zij{display:none}
}
@media (max-width:760px){
  .galerij{grid-template-columns:1fr 1fr;grid-template-rows:auto auto;height:auto}
  .galerij > :first-child{grid-column:1/-1;grid-row:auto;aspect-ratio:4/3}
  .galerij .vergroot:not(:first-child){aspect-ratio:4/3}
  .galerij a,.galerij .vergroot{border-radius:14px}
  .lichtbak{padding:12px;gap:0}
  .lb-pijl{position:absolute;bottom:20px;flex:none;width:48px;height:48px}
  .lb-vorige{left:calc(50% - 60px)}
  .lb-volgende{right:calc(50% - 60px)}
  .lichtbak figure img{max-height:calc(100vh - 160px)}
  .galerij[data-n="1"],.galerij[data-n="2"]{grid-template-columns:1fr}
  .enkel .foto{max-width:calc(100% - 24px);max-height:calc(100% - 24px)}
  .woning-raster{margin-top:22px}
  .kaartvak{height:280px}
  .meer{grid-template-columns:1fr 1fr;gap:14px}
  .meer .tegel:nth-child(3){display:none}
  .weg{padding:56px 16px 24px}
  .woning{padding-top:16px}
}

/* ===== 55-plus en Spanje ===== */
/* Blok "Ook interessant" op de voorpagina */
.ontdek{padding-top:72px}
.ontdek h2{font-size:clamp(28px,3vw,38px);font-weight:700;line-height:1.1;margin:0 0 24px}
.ontdek-rij{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.ontdek-kaart{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;gap:18px;
  min-height:250px;padding:30px;border-radius:24px;color:#fff;text-decoration:none;
  background:linear-gradient(135deg,#8a3216 0%,#d9622f 100%);transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.ontdek-senior{background:linear-gradient(135deg,#2c2c7a 0%,#5b5bd6 100%)}
.ontdek-kaart::after{content:"";position:absolute;z-index:-1;right:-80px;bottom:-110px;width:300px;height:300px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,255,255,.18),transparent)}
.ontdek-kaart > img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.ontdek-kaart:has(> img){background:#0c1a2a}
.ontdek-kaart:has(> img)::after{inset:0;width:auto;height:auto;border-radius:0;
  background:linear-gradient(90deg,rgba(9,22,36,.82),rgba(9,22,36,.25))}
.ontdek-kaart:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(12,26,42,.18)}
/* Met foto: het icoontje houdt de kleur van de lijst (zoals de labels). */
.ontdek-spanje:has(> img) .ontdek-ikoon{background:var(--zon);border-color:var(--zon)}
.ontdek-senior:has(> img) .ontdek-ikoon{background:var(--paars);border-color:var(--paars)}
.ontdek-ikoon{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;font-weight:700;font-size:20px;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.25)}
.ontdek-ikoon svg{width:30px;height:30px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ontdek-tekst{display:flex;flex-direction:column;gap:6px}
.ontdek-naam{font-size:30px;font-weight:700;letter-spacing:-.025em;line-height:1.1}
.ontdek-sub{font-size:16px;color:rgba(255,255,255,.85);max-width:28em}
.ontdek-meta{font-size:14px;font-weight:600;margin-top:4px;color:rgba(255,255,255,.95)}
.ontdek-kaart .pil{margin-top:auto}
.ontdek-kaart:hover .pil i{transform:translateX(3px)}

:root{--zon:#d9622f;--zon-zacht:#fcefe8;--paars:#5b5bd6;--paars-zacht:#ececfb}
.lijstband{background:var(--nacht);color:#fff;padding:44px 0 48px;position:relative;overflow:hidden}
.lijstband::after{content:"";position:absolute;right:-120px;top:-160px;width:460px;height:460px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(26,163,232,.35),transparent)}
.lijstband-spanje::after{background:radial-gradient(closest-side,rgba(217,98,47,.4),transparent)}
.lijstband .rand{position:relative;z-index:1;display:flex;align-items:center;gap:24px}
/* Met foto (dezelfde als op de voorpagina): links donker voor de tekst. */
.lijstband.met-foto{padding:120px 0 124px}
.lijstband-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center var(--band-y,55%)}
.lijstband.met-foto::after{inset:0;right:0;top:0;width:auto;height:auto;border-radius:0;
  background:linear-gradient(90deg,rgba(12,26,42,.92) 0%,rgba(12,26,42,.75) 38%,rgba(12,26,42,.2) 75%),
             linear-gradient(0deg,rgba(12,26,42,.35),transparent 50%)}
.lijstband.met-foto .rand{z-index:2}
.lijstband h1{font-size:clamp(34px,4vw,52px);font-weight:700;line-height:1.05;margin:0}
.lijstband p{margin:8px 0 0;font-size:19px;color:rgba(255,255,255,.8);max-width:34em}
.lijstband-ikoon{flex:0 0 76px;height:76px;border-radius:22px;display:grid;place-items:center;font-weight:700;font-size:26px;
  letter-spacing:-.03em;background:var(--paars);color:#fff}
.lijstband-spanje .lijstband-ikoon{background:var(--zon)}
.lijstband-gewoon .lijstband-ikoon{background:var(--blauw-knop)}
.lijstband-ikoon svg{width:40px;height:40px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lijstlabel{position:absolute;top:10px;right:10px;font-size:12px;font-weight:700;padding:6px 11px;border-radius:999px;color:#fff}
.lijstlabel-spanje{background:var(--zon)}
.lijstlabel-senior{background:var(--paars)}
.galerij .galerij-label{top:18px;right:18px;font-size:13px;padding:6px 12px}
.let-op{margin:-8px 0 18px;font-size:14px;color:var(--zacht);display:flex;gap:8px;align-items:baseline}
.let-op::before{content:"i";flex:0 0 18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;
  font-style:italic;background:var(--grond);color:var(--blauw-tekst);transform:translateY(3px)}
.schakel a small{font-size:13px;font-weight:600;opacity:.75;margin-left:4px}
.leeg-blok{padding:40px;border-radius:var(--rond);background:var(--grond);border:1px dashed #c9d6e2}
.leeg-blok h3{font-size:22px;margin:0 0 8px}
.leeg-blok p{margin:0 0 22px;color:var(--zacht);max-width:40em}
.kanttekening{display:flex;gap:14px;align-items:flex-start;margin-top:24px;padding:18px 20px;border-radius:16px;background:var(--zon-zacht)}
.kanttekening-senior{background:var(--paars-zacht)}
.kanttekening > span{flex:0 0 28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-style:italic;
  color:#fff;background:var(--zon)}
.kanttekening-senior > span{background:var(--paars)}
.kanttekening p{margin:0;line-height:1.55}
.kanttekening b{display:block;margin-bottom:2px}

@media (max-width:1080px){
  .kop .pil{display:none}
  .kop nav a{padding:8px 12px;font-size:16px}
  .kop nav .hoe-link{display:none}
  .pagina{grid-template-columns:minmax(0,1fr)}
  .zijkant{display:none}
}
@media (max-width:760px){
  .rand{padding-left:16px;padding-right:16px}   /* alleen zijkanten: anders vielen de ruimtes boven blokken weg */
  /* Telefoon: naam bovenaan, eronder de vier lijsten als één balk over de volle
     breedte, met gelijke afstand tussen de woorden,
     niet tegen het logo aan. "Hoe het werkt" staat op de voorpagina zelf. */
  .kop .rand{height:auto;flex-wrap:wrap;gap:0;padding-top:12px;padding-bottom:12px}
  .kop .pil{display:none}
  .merk{font-size:19px;height:40px}
  .merk svg{width:30px;height:30px;padding:5px}
  .kop nav{order:3;width:100%;margin:12px 0 0;display:flex;gap:0;
    padding:4px;border-radius:999px;background:rgba(255,255,255,.07)}
  /* Elk vak = woord + evenveel extra ruimte: gelijke afstand tussen de woorden
     (vier gelijke vakken zetten korte woorden als Koop en Huur verder uit elkaar). */
  .kop nav a{flex:1 1 auto;font-size:15px;padding:8px 6px;text-align:center}
  .kop nav .hoe-link{display:none}
  .ontdek{padding-top:48px}
  .ontdek-rij{grid-template-columns:1fr;grid-auto-rows:1fr;gap:14px}   /* kaarten even hoog */
  .ontdek-kaart{min-height:0;padding:24px}
  .ontdek-naam{font-size:26px}
  .lijstband{padding:28px 0 32px}
  .lijstband.met-foto{padding:56px 0 60px}
  .lijstband.met-foto::after{background:linear-gradient(0deg,rgba(12,26,42,.92) 0%,rgba(12,26,42,.7) 55%,rgba(12,26,42,.35) 100%)}
  .lijstband .rand{gap:16px;align-items:flex-start}
  .lijstband-ikoon{flex-basis:56px;height:56px;border-radius:16px;font-size:20px}
  .lijstband-ikoon svg{width:30px;height:30px}
  .lijstband p{font-size:16px}
  .leeg-blok{padding:24px 20px}
  /* Telefoon: de staande foto (naam-mobiel.jpg) vult het eerste scherm, de
     tekst staat eroverheen; onderin donker voor de leesbaarheid. */
  .held{min-height:calc(100svh - 123px);align-items:center}   /* 123 = hoogte kop op de telefoon */
  .held-foto{object-position:center 60%}   /* staande foto: eigen uitsnede, positie per foto geldt alleen liggend */
  .held::before{background:linear-gradient(0deg,rgba(9,22,36,.9) 0%,rgba(9,22,36,.62) 40%,rgba(9,22,36,.5) 60%,rgba(9,22,36,.2) 85%,rgba(12,26,42,.55) 100%)}
  .held-binnen{align-items:center}
  .held-tekst{padding:40px 0 64px}
  /* Meer ruimte tussen de knoppen, zodat je niet misklikt. */
  .knoppen{gap:22px}
  .onder{font-size:16px}
  .held-punten{flex-direction:column;gap:10px;margin-top:28px;font-size:15px}
  .top10{padding-top:56px}
  .pagina{padding-top:64px}
  .kaart{grid-template-columns:1fr;gap:12px;padding:10px}
  .info{padding:4px 6px 6px}
  .prijs{font-size:28px}
  .nummers a{width:40px;height:40px}
  .stap{padding:10px 12px}
  .brief{grid-template-columns:1fr;padding:28px 22px;gap:20px}
  .brief form{border-radius:22px}
  .brief .pil{width:100%;justify-content:space-between}
  .drie{grid-template-columns:1fr}
  .voet .rand{flex-direction:column;align-items:flex-start;gap:12px}
  @media (max-width:350px){.kop nav a{font-size:14px}}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .held-foto,.held-tekst{animation:none}
  *{transition:none!important}
}

/* Luchtfoto (PDOK) als de makelaar zijn foto's niet elders laat zien: 3 x 2
   tegels samengevoegd (_lucht.html), vult het vak zoals een foto. */
.lucht{display:block;width:100%;height:100%;background:#3c4a3a}
.lucht-bron{position:absolute;right:8px;bottom:8px;font-size:10px;font-weight:600;line-height:1;
  padding:4px 7px;border-radius:999px;background:rgba(12,26,42,.6);color:#fff;pointer-events:none}
.beeld .lucht{grid-column:1/-1;aspect-ratio:3/2;height:auto;border-radius:12px}
.tegel-beeld .lucht{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.tegel:hover .tegel-beeld .lucht{transform:scale(1.05)}
.galerij .enkel-lucht{background:#3c4a3a}
.galerij .enkel-lucht .lucht-bron{right:14px;bottom:14px;font-size:12px;padding:5px 10px}
/* Kanttekening bij de woning zelf (tijdelijke huur, inkomensgrens) */
.kanttekening-let{background:var(--blauw-zacht)}
.kanttekening-let > span{background:var(--blauw-tekst)}
.kanttekening + .kanttekening{margin-top:12px}
.omschrijving + .omschrijving{margin-top:14px}

/* Uitgelicht vandaag: doorlopende strook met kaarten (foto 380 x 224, hoeken 24 px,
   12 px ertussen), in onze huisstijl. Binnen de paginabreedte:
   4 kaarten in beeld, smaller scherm 3 of 2, telefoon ruim 1. */
.strook{container-type:inline-size;overflow:hidden;padding-bottom:6px;outline:0}
.strook::-webkit-scrollbar{display:none}
.strook-rij{display:flex;gap:12px;width:max-content;will-change:transform}
.deal{flex:0 0 calc((100cqw - 3 * 12px) / 4);min-width:0;display:flex;flex-direction:column;text-decoration:none;color:var(--inkt)}
@container (max-width:1000px){.deal{flex-basis:calc((100cqw - 2 * 12px) / 3)}}
@container (max-width:760px){.deal{flex-basis:calc((100cqw - 12px) / 2)}}
@container (max-width:560px){.deal{flex-basis:78cqw}}
.deal-beeld{position:relative;display:block;aspect-ratio:380/224;border-radius:24px;overflow:hidden;background:var(--grond)}
.deal-beeld img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.deal:hover .deal-beeld img,.deal:hover .deal-beeld .lucht{transform:scale(1.04)}
.deal-beeld .lucht{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.deal-prijs{position:absolute;top:10px;right:10px;font-size:20px;font-weight:700;letter-spacing:-.02em;line-height:1;
  padding:8px 13px;border-radius:999px;color:#fff;background:var(--nacht)}
.deal-prijs small{font-size:12px;font-weight:500;opacity:.75;margin-left:2px}
.deal .soort{top:auto;bottom:10px;left:10px}
.deal-adres,.deal-regel{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.deal-adres{font-weight:700;font-size:18px;letter-spacing:-.01em;margin-top:12px}
.deal:hover .deal-adres{color:var(--blauw-tekst)}
.deal-regel{color:var(--zacht);font-size:14px;margin-top:2px}
.deal:focus-visible{outline:3px solid var(--blauw);outline-offset:4px;border-radius:24px}

/* ===== Voet, contact en tekstpagina's ===== */
.voet-onder{display:flex;flex-direction:column;gap:14px;margin-top:28px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1)}
.voet .voet-onder{align-items:flex-start}
.voet-links{display:flex;flex-wrap:wrap;gap:8px 26px;font-size:16px}   /* groter */
.voet-links a,.voet-links .koppeling{color:rgba(255,255,255,.7);text-decoration:none}
.voet-links a:hover,.voet-links .koppeling:hover{color:#fff;text-decoration:underline}
.koppeling{all:unset;cursor:pointer}
.koppeling:focus-visible{outline:2px solid #fff;outline-offset:2px}

.tekstpagina{max-width:760px;padding-top:56px;padding-bottom:24px}
.tekstpagina h1{font-size:clamp(32px,4vw,46px);font-weight:700;line-height:1.1;margin:0 0 18px}
.tekstpagina h2{font-size:22px;font-weight:700;margin:32px 0 8px}
.tekstpagina p{font-size:17px;line-height:1.7;margin:0 0 14px;color:var(--inkt)}
.tekstpagina .inleiding{color:var(--zacht)}
.formulier{display:flex;flex-direction:column;gap:18px;margin-top:28px}
.veld{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:15px}
.veld input,.veld select,.veld textarea{font:inherit;font-weight:400;font-size:16px;padding:12px 14px;border:1.5px solid var(--lijn);border-radius:12px;background:#fff;color:var(--inkt)}
.veld textarea{resize:vertical;min-height:140px}
.veld input:focus,.veld select:focus,.veld textarea:focus{outline:none;border-color:var(--blauw)}
.veld [aria-invalid="true"]{border-color:#c43d3d}
.vinkje{display:flex;gap:10px;align-items:flex-start;font-size:15px}
.vinkje input{margin-top:3px;width:18px;height:18px}
.fout{color:#c43d3d;font-size:14px;font-weight:500}
.fout-blok{padding:12px 16px;border-radius:12px;background:#fdecec}
.formulier .pil{align-self:flex-start}
.lokveld{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.bedankt{margin-top:24px;padding:28px;border-radius:20px;background:var(--blauw-zacht)}
.bedankt h2{margin-top:0}

/* ===== Contactpagina: foto-kaart met formulier ernaast ===== */
.contact-rand{padding-top:36px}
.contact-kaart{position:relative;isolation:isolate;overflow:hidden;border-radius:28px;min-height:680px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:40px;padding:44px;background:var(--nacht);color:#fff}
.contact-kaart > picture{position:absolute;inset:0;z-index:-2}
.contact-foto{display:block;width:112%;max-width:none;height:100%;margin-left:-12%;object-fit:cover;object-position:center 30%}   /* iets naar links: logo vrij van het formulier */
/* Bovenin licht (daar staan de mensen en het logo), onderin donker voor de tekst. */
.contact-kaart::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(9,22,36,.25) 0%,rgba(9,22,36,0) 30%,rgba(9,22,36,.35) 55%,rgba(9,22,36,.92) 100%)}
.contact-links{display:flex;flex-direction:column;justify-content:flex-end;gap:28px;min-width:0}
.contact-kop h1{font-size:clamp(32px,3.2vw,44px);font-weight:700;line-height:1.08;letter-spacing:-.02em;margin:0 0 12px}
.contact-kop p{margin:0;max-width:30em;font-size:16px;line-height:1.6;color:rgba(255,255,255,.88)}
.contact-gegevens{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:20px 40px;margin:0}
.contact-gegevens dt{font-size:17px;font-weight:700;margin-bottom:6px}
.contact-gegevens dd{margin:0;font-size:14px;line-height:1.6;color:rgba(255,255,255,.85)}
.contact-gegevens a{color:#fff}
.contact-vak{min-width:0;align-self:start;background:#fff;color:var(--inkt);border-radius:22px;padding:32px;box-shadow:0 24px 60px rgba(9,22,36,.35)}
.contact-vak h2{font-size:26px;font-weight:700;letter-spacing:-.01em;margin:0}
.contact-sub{margin:6px 0 0;color:var(--zacht);font-size:15px}
.contact-vak .formulier{gap:14px;margin-top:22px}
.velden-rij{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.velden-rij .veld{min-width:0}
.contact-vak .veld input,.contact-vak .veld textarea{width:100%;box-sizing:border-box;border-radius:999px;padding:13px 18px;font-size:15px;background:var(--grond);border-color:transparent}
.contact-vak .veld textarea{border-radius:18px;min-height:150px}
.contact-vak .veld input:focus,.contact-vak .veld textarea:focus{background:#fff;border-color:var(--blauw)}
.keuzes{border:0;margin:4px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.keuzes legend{font-size:14px;color:var(--zacht);margin-bottom:8px;padding:0}
.keuze{position:relative}
.keuze input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.keuze span{display:inline-block;padding:9px 18px;border-radius:999px;border:1.5px solid var(--lijn);font-size:14px;font-weight:600;color:var(--zacht);transition:all .15s}
.keuze input:checked + span{border-color:var(--inkt);color:var(--inkt);background:#fff;box-shadow:0 0 0 1px var(--inkt) inset}
.keuze input:focus-visible + span{outline:2px solid var(--blauw);outline-offset:2px}
.keuze:hover span{border-color:var(--zacht)}
.contact-vak .vinkje{font-size:14px;color:var(--zacht)}
.contact-vak .vinkje a{color:var(--blauw-tekst)}
.contact-knop{all:unset;box-sizing:border-box;cursor:pointer;width:100%;text-align:center;padding:15px 20px;border-radius:999px;
  background:var(--blauw-knop);color:#fff;font-weight:700;font-size:16px;margin-top:6px;transition:background .2s}
.contact-knop:hover{background:var(--blauw)}
.contact-knop:focus-visible{outline:3px solid var(--blauw);outline-offset:3px}
.contact-vak .bedankt{background:none;padding:12px 0;margin:0}
.bedankt-vinkje{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--blauw-zacht);margin-bottom:16px}
.bedankt-vinkje svg{width:26px;height:26px;fill:none;stroke:var(--blauw-tekst);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.contact-vak .bedankt p{color:var(--zacht);margin:8px 0 22px}
@media (max-width:860px){
  .contact-rand{padding:0}   /* telefoon: foto van rand tot rand, vast aan de kop */
  .contact-kaart{display:flex;flex-direction:column;gap:0;padding:0 0 8px;min-height:0;border-radius:0;background:var(--grond)}
  .contact-kaart > picture{position:relative;inset:auto;z-index:auto;display:block;height:300px}
  .contact-foto{height:300px;width:100%;margin-left:0;object-position:center 30%}
  .contact-kaart::before{bottom:auto;height:300px;background:linear-gradient(180deg,rgba(9,22,36,0) 40%,rgba(9,22,36,.88) 100%)}
  .contact-links{display:contents}
  .contact-kop{position:absolute;left:20px;right:20px;top:0;height:300px;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:22px}
  .contact-kop h1{font-size:30px;margin-bottom:8px}
  .contact-kop p{display:none}
  .contact-vak{margin:-6px 12px 0;padding:24px 20px;border-radius:20px;box-shadow:0 12px 30px rgba(9,22,36,.12);position:relative;z-index:1}
  .velden-rij{grid-template-columns:1fr}
  .contact-gegevens{order:3;grid-template-columns:1fr;gap:16px;padding:26px 24px 28px;color:var(--inkt)}
  .contact-gegevens dd{color:var(--zacht)}
  .contact-gegevens a{color:var(--blauw-tekst)}
}
.voet-copy{font-size:14px;color:rgba(255,255,255,.5);margin:0}

/* ===== Hoe het werkt: uitleg in de wij-vorm met sfeerfoto's ===== */
.hoe-band.met-foto::after{background:linear-gradient(90deg,rgba(12,26,42,.86) 0%,rgba(12,26,42,.55) 45%,rgba(12,26,42,.1) 80%)}
.hoe-label{display:inline-block;margin-bottom:10px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blauw-tekst)}
.hoe-intro,.hoe-stappen,.hoe-lijsten,.hoe-weten,.hoe-slot{padding-top:88px}
.hoe-intro h2,.hoe-stappen h2,.hoe-lijsten h2,.hoe-slot h2{font-size:clamp(28px,3vw,38px);font-weight:700;line-height:1.15;margin:0 0 18px}
.hoe-intro{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.hoe-intro p{font-size:17px;line-height:1.7;margin:0 0 14px}
.hoe-foto{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:24px}
.stappen-rij{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:16px;counter-reset:stap}
.stappen-rij li{padding:26px 22px;border-radius:var(--rond);background:var(--grond)}
.stap-nr{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--blauw-knop);color:#fff;font-weight:700;font-size:18px;margin-bottom:16px}
.stappen-rij h3{font-size:18px;margin:0 0 8px;line-height:1.25}
.stappen-rij p{margin:0;color:var(--zacht);font-size:15px;line-height:1.6}
.hoe-lijsten{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center}
.lijsten-uitleg{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.lijsten-uitleg li{padding:14px 0;border-bottom:1px solid var(--lijn)}
.lijsten-uitleg li:last-child{border-bottom:0}
.lijsten-uitleg a{font-size:19px;font-weight:700;color:var(--inkt);text-decoration:none}
.lijsten-uitleg a::after{content:" →";color:var(--blauw-knop)}
.lijsten-uitleg a:hover{color:var(--blauw-tekst)}
.lijsten-uitleg p{margin:4px 0 0;color:var(--zacht);line-height:1.6}
.hoe-weten .drie{margin-top:8px}
.hoe-makelaar{margin:20px 0 0;color:var(--zacht)}
.hoe-makelaar a,.hoe-contact a{color:var(--blauw-tekst);font-weight:600}
.hoe-slot{padding-bottom:16px}
.hoe-slot-blok{position:relative;isolation:isolate;overflow:hidden;padding:64px 56px;border-radius:28px;background:var(--nacht);color:#fff}
.hoe-slot-foto{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:70% 35%}
.hoe-slot-blok::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(12,26,42,.9) 0%,rgba(12,26,42,.65) 55%,rgba(12,26,42,.25) 100%)}
.hoe-slot-blok h2{max-width:16em}
.hoe-slot-blok>p{margin:0;font-size:18px;color:rgba(255,255,255,.82);max-width:30em}
.hoe-knoppen{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.hoe-contact{margin:24px 0 0;color:rgba(255,255,255,.75)}
.hoe-slot-blok .hoe-contact a{color:#fff}
@media (max-width:1100px){.stappen-rij{grid-template-columns:repeat(2,1fr)}.stappen-rij li:last-child{grid-column:1/-1}}
@media (max-width:860px){
  .hoe-intro,.hoe-lijsten{grid-template-columns:1fr;gap:28px}
  .hoe-lijsten .hoe-foto{order:2}
}
@media (max-width:760px){
  .hoe-intro,.hoe-stappen,.hoe-lijsten,.hoe-weten,.hoe-slot{padding-top:56px}
  .hoe-band.met-foto::after{background:linear-gradient(0deg,rgba(12,26,42,.92) 0%,rgba(12,26,42,.6) 60%,rgba(12,26,42,.3) 100%)}
  .stappen-rij{grid-template-columns:1fr}
    .hoe-slot-blok{padding:40px 22px;border-radius:22px}
  .hoe-foto{border-radius:18px}
}
.hoe-meer{margin:22px 0 0}
.hoe-meer a{font-weight:700;color:var(--blauw-tekst)}
.hoe-meer a::after{content:" →"}
.hoe-band h1 .nl{font-style:normal;color:var(--blauw)}
/* Band "Hoe het werkt": uitsnede hoger, zodat het logo op de muur in beeld blijft op brede schermen. */
/* Zelfde hoogte als de andere banden; brede foto (3:1), logo rechtsboven de kop. */
.hoe-band .lijstband-foto{object-position:center 70%}
@media (max-width:760px){.hoe-band .lijstband-foto{object-position:100% 70%}}
/* Slotblok: kop boven, knoppen in het midden, contactregel helemaal onderin. */
.hoe-slot-blok{display:flex;flex-direction:column;align-items:flex-start;min-height:340px;padding-top:52px;padding-bottom:36px}
.hoe-slot-blok h2{margin:0}
.hoe-slot-blok .hoe-knoppen{margin:auto 0}
.hoe-slot-blok .hoe-contact{margin:0}
/* Telefoon: knoppen zoals op de voorpagina (niet over de volle breedte), iets lager,
   en "Een tip of vraag?" helemaal onderin. */
@media (max-width:760px){
  .hoe-slot-blok{min-height:440px;padding-top:36px;padding-bottom:28px}
  .hoe-slot-blok .hoe-knoppen{margin:44px 0 0;flex-direction:column;align-items:flex-start;gap:22px}
  .hoe-slot-blok .hoe-contact{margin-top:auto;padding-top:32px}
}
/* Lijntekening van huizen in de band zonder foto. */
.hoe-band{isolation:isolate}
.huizenrij{position:absolute;z-index:0;right:max(16px,calc((100vw - 1160px)/2));bottom:0;height:86%;width:auto;max-width:40%}
.huizenrij-lijn{fill:none;stroke:rgba(255,255,255,.22);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.huizenrij-blauw{fill:var(--blauw)}
.huizenrij-raam{fill:var(--nacht)}
.hoe-band .rand{position:relative;z-index:1}
@media (max-width:760px){.hoe-band:not(.met-foto){padding-bottom:96px}.huizenrij{height:84px;max-width:none;right:50%;transform:translateX(50%)}}
/* Alle banden met foto even hoog als die van koop en huur: vaste hoogte,
   tekst verticaal in het midden, zodat een langere ondertitel of kop niets uitmaakt. */
.lijstband.met-foto{height:365px;padding-top:0;padding-bottom:0;display:flex;align-items:center;box-sizing:border-box}
.lijstband.met-foto>.rand{width:100%}
@media (max-width:760px){.lijstband.met-foto{height:234px;padding-top:0;padding-bottom:0}}
/* Telefoon: advertenties netjes in het midden tussen de blokken. Achteraan, zodat
   deze regels voor de algemene gaan. */
@media (max-width:999px){
  .reclame-rij{padding-top:40px}
  .reclame-rij + .top10,.reclame-rij + .pagina{padding-top:40px}
  .reclame-onder{padding-top:48px;padding-bottom:48px}
  .reclame-onder + .voet{margin-top:0}
  .hoe{padding-top:56px}
}
/* Telefoon: uitsnede zo dat beide gezichten in beeld zijn. */
@media (max-width:760px){.hoe-slot-foto{object-position:88% 35%}}
.deal-label{top:10px;right:auto;left:10px;z-index:1}   /* Spanje in Uitgelicht */
/* Deel deze woning: één knop, op de computer met een klein menu. */
.actie-rij{display:flex;flex-wrap:wrap;align-items:center;gap:12px}   /* deelknop naast de makelaarsknop */
.delen{position:relative}
.actie-rij .deel{height:56px;padding:0 22px;font-size:16px}
@media (max-width:480px){.actie-rij{gap:10px}.actie-rij .deel{padding:0 18px}.deel-lang{display:none}}   /* telefoon: "Deel", past naast de knop */
.deel{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;border:1px solid var(--lijn);background:#fff;
  font:inherit;font-size:15px;font-weight:600;color:var(--inkt);cursor:pointer;transition:border-color .15s,background .15s}
.deel:hover,.deel[aria-expanded="true"]{border-color:var(--blauw);background:var(--blauw-zacht)}
.delen svg{width:18px;height:18px;fill:none;stroke:var(--blauw-tekst);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.deelmenu{position:absolute;z-index:20;right:0;top:calc(100% + 8px);min-width:220px;padding:6px;border-radius:16px;background:#fff;
  border:1px solid var(--lijn);box-shadow:0 18px 40px rgba(12,26,42,.14)}
.deelmenu[hidden]{display:none}
.deelmenu a,.deelmenu button{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border:0;border-radius:10px;background:none;
  font:inherit;font-size:15px;color:var(--inkt);text-decoration:none;text-align:left;cursor:pointer}
.deelmenu a:hover,.deelmenu button:hover{background:var(--blauw-zacht)}
.deel-kopie.gekopieerd{color:#2e7d4f}
/* Computer: kop en zinnetje bovenin de foto, knoppen en punten onderin */
@media (min-width:761px){
  .held-binnen{align-self:stretch;align-items:stretch}
  .held-tekst{display:flex;flex-direction:column;padding-top:48px}
  .held-tekst .onder{margin-top:34px}   /* zinnetje iets lager */
  .held-tekst .knoppen{margin-top:auto}   /* kop + zinnetje bovenin, knoppen en punten onderin */
  .held-punten{margin-top:84px}   /* knoppen iets hoger, punten blijven staan */
}
/* Telefoon: de drie punten onderin de foto, de tekst blijft ongeveer in het midden */
@media (max-width:760px){
  .held-binnen{align-self:stretch;align-items:stretch}
  .held-tekst{display:flex;flex-direction:column;padding-bottom:36px}
  .held-tekst h1{margin-top:auto}
  .held-punten{margin-top:auto;padding-top:40px}
}
/* Telefoon: copyright onderaan de voet, niet met een grote lege strook eronder.
   De vaste balk met prijs en knop onderin de woningpagina is weg. */
@media (max-width:760px){
  .voet{padding-bottom:40px}
  .voet .voet-copy{margin-top:22px}
}
/* Telefoon: het deelmenu (als het toestelmenu niet kan) schuift onderin het scherm omhoog,
   over de volle breedte; eerst viel het half buiten beeld. */
@media (max-width:760px){
  .deelmenu{position:fixed;z-index:60;left:12px;right:12px;top:auto;bottom:12px;min-width:0;padding:8px;border-radius:20px;
    box-shadow:0 -10px 40px rgba(12,26,42,.25)}
  .deelmenu a,.deelmenu button{padding:14px 14px;font-size:16px}
}
/* Telefoon: de balk met lijsten schuift opzij, met Hoe het werkt en Nieuwsbrief erachter.
   Rechts vervaagt hij een beetje, zodat je ziet dat er meer is. Op de computer staat Nieuwsbrief als knop. */
.kop nav .brief-link{display:none}
@media (max-width:760px){
  .kop nav{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
  .kop nav::-webkit-scrollbar{display:none}
  .kop nav.midden{-webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}
  .kop nav.eind{-webkit-mask-image:linear-gradient(90deg,transparent,#000 15%);mask-image:linear-gradient(90deg,transparent,#000 15%)}
  .kop nav a{flex:0 0 auto;padding:8px 16px;white-space:nowrap}
  .kop nav .hoe-link,.kop nav .brief-link{display:block}
}
/* Telefoon: Vorige/Volgende compact op één regel, pijl naast het woord */
@media (max-width:760px){
  .bladeren{gap:8px}
  .stap{padding:9px 12px;font-size:14px}
  .nummers{gap:6px}
  .nummers a{width:38px;height:38px;font-size:15px}
}
/* Woningkaarten in de lijst rustiger, meer zoals Funda. */
.prijs{font-size:24px}
.prijs small{font-size:13px}
.kaart h3{font-size:16px;margin-top:6px}
.plaats{font-size:15px}
.feiten{margin:12px 0 18px;gap:6px}
.feiten li{font-size:13px;padding:5px 9px;border-radius:8px}
.feiten svg{width:14px;height:14px}
.naar{font-size:13px;padding-top:12px}
.naar b i{width:26px;height:26px}
@media (max-width:760px){
  .prijs{font-size:22px}
}
/* Woningpagina rustiger, net als de lijst. */
.woning-kop h1{font-size:clamp(24px,2.6vw,32px)}
.woning-kop .plaats{font-size:16px;margin-top:4px}
.woning-kop .prijs{font-size:clamp(24px,2.4vw,30px);margin-top:14px}
.woning-kop .feiten{margin-top:14px}
.woning-kop .feiten li{font-size:14px;padding:6px 11px}
.blok{margin-top:32px;padding-top:28px}
.blok h2{font-size:20px;margin-bottom:12px}
.omschrijving{font-size:16px;line-height:1.7}
.bron-tekst{font-size:15px}
.pil.groot{font-size:16px;padding:7px 7px 7px 22px}
.pil.groot i{width:34px;height:34px}
.actie-rij .deel{height:48px;padding:0 18px;font-size:15px}
.actie-prijs{font-size:24px}
.actie-prijs small{font-size:13px}
/* Telefoon: zinnetje onder de kop weg, het staat al in de punten */
@media (max-width:760px){
  .held .onder{display:none}
  .held .knoppen{margin-top:26px}
}
/* Telefoon: knoppen precies midden tussen de kop en de drie punten, kop iets hoger */
@media (max-width:760px){
  .held .knoppen{margin-top:auto;margin-bottom:auto;padding:24px 0}
  .held-punten{margin-top:0;padding-top:0}
}
/* Telefoon: geen "Nummer 3 van vandaag" op de foto; hij viel midden over de kleine foto's. */
@media (max-width:760px){
  .plek{display:none}
}
/* Telefoon: knoppen in het slotblok naar beneden, onder het gezicht van de linker vrouw */
@media (max-width:760px){
  .hoe-slot-blok .hoe-knoppen{margin-top:110px}   /* koopknop waar eerst de huurknop stond */
}
/* Volledig aanbod per provincie: blok onder de kop van /koop/ en /huur/ */
.provkeuze{display:flex;align-items:center;gap:14px;margin:0 0 20px;padding:14px 16px;border-radius:16px;
  background:var(--blauw-zacht);border:1px solid #d6edfa}
.provkeuze-ikoon{flex:0 0 38px;height:38px;border-radius:11px;display:grid;place-items:center;background:#fff}
.provkeuze-ikoon svg{width:20px;height:20px;fill:none;stroke:var(--blauw-tekst);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.provkeuze-tekst{flex:1;min-width:0;font-size:15px;line-height:1.4;color:var(--inkt)}
.provkeuze-tekst a{color:var(--blauw-tekst);font-weight:600;white-space:nowrap}
.provkeuze-kies{flex:0 0 auto}
.provkeuze select{appearance:none;-webkit-appearance:none;font:inherit;font-size:15px;font-weight:600;color:var(--inkt);cursor:pointer;
  padding:10px 40px 10px 16px;border-radius:999px;border:1px solid var(--lijn);background:#fff
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231580c0' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center/16px}
.provkeuze select:hover,.provkeuze select:focus{border-color:var(--blauw);outline:none}
@media (max-width:760px){
  .provkeuze{flex-wrap:wrap;gap:10px 12px;padding:14px}
  .provkeuze-kies{flex:1 1 100%}
  .provkeuze select{width:100%}
}
/* Kop op de voorpagina rustiger en luxer: kleiner, iets minder vet,
   wat meer regelruimte. Alleen de computer; op de telefoon was hij goed. */
@media (min-width:761px){
  .held h1{font-size:clamp(36px,3.3vw,46px);font-weight:600;line-height:1.12;letter-spacing:-.02em;max-width:15em}
}
/* Bladeren bij veel pagina's: de nummers schuiven opzij (zoals de balk in de kop), Vorige en
   Volgende staan vast aan de zijkanten. */
.bladeren .stap{flex:none}
.nummers{flex:0 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:2px}
.nummers::-webkit-scrollbar{display:none}
.nummers a{flex:none}
.nummers.schuift{-webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent)}
.nummers.schuift.begin{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent)}
.nummers.schuift.eind{-webkit-mask-image:linear-gradient(90deg,transparent,#000 24px);mask-image:linear-gradient(90deg,transparent,#000 24px)}

/* Koppen in dezelfde stijl als de hoofdtitel: kleiner en halfvet */
@media (min-width:761px){
  .sectiekop h2,.lijstkop h2,.ontdek h2,.hoe h2,
  .hoe-intro h2,.hoe-stappen h2,.hoe-lijsten h2,.hoe-slot h2{font-size:clamp(24px,2.1vw,29px);font-weight:700;letter-spacing:-.02em}
  .lijstband h1,.tekstpagina h1,.contact-kop h1,.weg h1{font-size:clamp(32px,3.1vw,42px);font-weight:600;letter-spacing:-.02em}
}
/* Ook interessant staat onder de lijst: na de advertentie begint de lijst nu meteen,
   met dezelfde ruimte als het blok dat er eerst stond. */
@media (min-width:1000px){.reclame-rij + .pagina{padding-top:72px}}
/* Het vinkje "verhaal delen" alleen bij Gelukt: woning gevonden; .vinkje{display:flex} won van [hidden]. */
.formulier [hidden]{display:none !important}
/* Drie onderwerpen op één regel op de computer; de telefoon is daar te smal voor. */
.keuzes{gap:6px}
.keuze span{padding:9px 15px}
/* Berichtvak iets hoger; bij "Gelukt" staat het vinkje in die ruimte, zodat het vak even hoog blijft. */
.contact-vak .veld textarea{min-height:190px}
/* Geen sleephoekje: groter trekken liet de foto naast het formulier meegroeien. */
.contact-vak .veld textarea{resize:none}
/* Telefoon: "Woning gevonden 🎉" in plaats van "Gelukt: woning gevonden", zodat de drie onderwerpen
   op één regel passen. */
.keuze span span{padding:0;border:0;border-radius:0;box-shadow:none;background:none;color:inherit;display:inline}
.keuze span .keuze-kort{display:none}
@media (max-width:860px){.keuze span .keuze-lang{display:none}.keuze span .keuze-kort{display:inline}}
@media (max-width:860px){.keuze > span{padding:9px 12px}}
@media (max-width:390px){.keuze > span{padding:8px 10px;font-size:13px}}
/* Kop op de voorpagina weer vet op de computer; telefoon ongewijzigd. */
@media (min-width:761px){.held h1{font-weight:700}}

/* Uitgelicht: verticaal scrollt de pagina, horizontaal vegen doet site.js (vloeiend, met uitglijden). */
.strook{touch-action:pan-y}

/* Spanje-band: ondertitel met de wisseldagen op één regel op de computer. */
@media (min-width:1000px){.lijstband-spanje p{max-width:none;white-space:nowrap}}
/* Volledig aanbod: kop met het aantal op een eigen regel, zodat het
   blok niet als kanttekening leest. */
.provkeuze-start{padding:18px 20px}
.provkeuze-start .provkeuze-kop{display:block;font-size:18px;font-weight:700;line-height:1.3;margin-bottom:2px}
.provkeuze-start .provkeuze-tekst span{color:var(--zacht)}
@media (max-width:760px){.provkeuze-start{padding:16px}.provkeuze-start .provkeuze-kop{font-size:17px}}