/* Letterlijk uit aanbod-makelaarinamsterdam.html */
:root{
--blauw:#95D2F3;
--blauw-zacht:#EAF4FB;
--zand:#FBF6EE;
--zand-diep:#F3E9D8;
--zand-rand:#E7DAC1;
--groen:#6A6637;
--rood:#B14030;
--ink:#141616;
--ink-zacht:#3d403f;
--wit:#ffffff;
--radius:22px;
--schaduw:0 18px 44px rgba(20,22,22,.09);
--schaduw-klein:0 8px 22px rgba(20,22,22,.07);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{font-family:'Funnel Sans',Arial,sans-serif;color:var(--ink);background:var(--zand);line-height:1.65;overflow-x:hidden}
h1,h2,h3{font-family:'Funnel Display',Arial,sans-serif;line-height:1.1;letter-spacing:-.02em}
img{display:block;max-width:100%}
a{color:inherit}
.btn{display:inline-block;font-family:'Funnel Sans',Arial,sans-serif;font-weight:600;font-size:1rem;padding:16px 32px;border-radius:999px;text-decoration:none;border:none;cursor:pointer;transition:background .25s ease,transform .25s ease}
.btn-rood{background:var(--rood);color:var(--zand)}
.btn-rood:hover{background:#9c382a;transform:translateY(-2px)}
.btn-blauw{background:var(--blauw);color:var(--ink)}
.btn-blauw:hover{background:#aadcf7;transform:translateY(-2px)}
.btn-donker{background:var(--ink);color:var(--zand)}
.btn-donker:hover{background:#2c2f2f;transform:translateY(-2px)}
/* nav (vaste stand) */
#nav{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:16px 5vw;background:rgba(251,246,238,.94);backdrop-filter:blur(12px);box-shadow:0 1px 0 rgba(20,22,22,.08)}
.nav-logo{font-family:'Funnel Display',Arial,sans-serif;font-weight:800;font-size:1.15rem;text-decoration:none;color:var(--ink)}
.nav-logo .stip{color:var(--blauw)}
.nav-links{display:flex;gap:32px;align-items:center;list-style:none}
.nav-links a:not(.btn){text-decoration:none;font-weight:500;font-size:.95rem;color:var(--ink)}
.nav-links a:not(.btn):hover,.nav-links a[aria-current]{color:var(--groen)}
.nav-links .btn{padding:12px 24px;font-size:.9rem}
.nav-links a,.nav-logo{white-space:nowrap}
.hamburger{display:none}
@media(max-width:1180px){
.nav-links{display:none;position:absolute;top:100%;right:5vw;left:5vw;flex-direction:column;align-items:stretch;gap:6px;background:var(--zand);border-radius:16px;padding:16px;box-shadow:0 18px 40px rgba(20,22,22,.18)}
.nav-links.open{display:flex}
.nav-links a:not(.btn){padding:12px 10px;font-size:1rem}
.nav-links .btn{text-align:center;margin-top:6px;padding:14px 24px}
.hamburger{display:block;background:none;border:none;font-size:1.6rem;cursor:pointer;line-height:1}
}
.binnen{max-width:1180px;margin:0 auto}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--groen);margin-bottom:14px}
.eyebrow::before{content:"";width:28px;height:3px;background:var(--groen);border-radius:2px}
.kruimel{font-size:.86rem;color:var(--ink-zacht);margin-bottom:24px}
.kruimel a{text-decoration:none;border-bottom:1px solid var(--zand-rand)}
.kruimel a:hover{border-color:var(--groen)}
.kruimel span[aria-hidden]{margin:0 8px;color:var(--zand-rand)}
/* statuslabel (kaart en woningpagina) */
.woning-label{display:inline-block;font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;border-radius:999px;background:var(--blauw);color:var(--ink)}
.woning-label.is-verkocht-ovb{background:var(--groen);color:var(--zand)}
.woning-label.is-verkocht{background:var(--rood);color:var(--zand)}
/* afsluiter */
.afsluiter{padding:48px 5vw 96px}
.afsluiter .binnen{background:var(--groen);color:var(--zand);border-radius:var(--radius);padding:44px 48px;display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:center;position:relative;overflow:hidden}
.afsluiter .binnen::before,.afsluiter .binnen::after{content:"";position:absolute;right:-50px;top:50%;width:200px;height:16px;border-radius:4px;background:var(--zand);opacity:.12}
.afsluiter .binnen::before{transform:translateY(-50%) rotate(45deg)}
.afsluiter .binnen::after{transform:translateY(-50%) rotate(-45deg)}
.afsluiter .eyebrow{color:var(--blauw)}
.afsluiter .eyebrow::before{background:var(--blauw)}
.afsluiter h2{font-size:clamp(1.7rem,3vw,2.4rem);font-weight:800;margin-bottom:12px}
.afsluiter p{color:rgba(251,246,238,.9);max-width:46ch}
.afsluiter .knoppen{display:flex;flex-direction:column;gap:12px;align-items:flex-start;position:relative}
@media(max-width:820px){.afsluiter .binnen{grid-template-columns:1fr;padding:32px 26px}}
footer{background:var(--zand-diep);color:var(--ink-zacht);padding:26px 5vw;font-size:.85rem;border-top:1px solid var(--zand-rand);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
footer .stip{color:var(--blauw)}
footer a{color:var(--ink)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
/* kop */
.aanbod-kop{padding:60px 5vw 28px}
.aanbod-kop h1{font-size:clamp(2.2rem,5vw,3.6rem);font-weight:800;margin-bottom:16px;max-width:18ch}
.aanbod-kop .intro{font-size:1.15rem;color:var(--ink-zacht);max-width:60ch}
/* filters */
.aanbod-filters-wrap{padding:0 5vw 36px}
.aanbod-filters{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;background:var(--wit);border:1px solid var(--zand-rand);border-radius:var(--radius);padding:20px 22px;box-shadow:var(--schaduw-klein)}
.aanbod-filters label{display:flex;flex-direction:column;gap:6px;font-size:.82rem;font-weight:600;color:var(--ink-zacht);flex:1 1 180px}
.aanbod-filters select{font:inherit;font-size:1rem;font-weight:500;color:var(--ink);background:var(--zand);border:1px solid var(--zand-rand);border-radius:12px;padding:12px 14px;min-height:48px}
.aanbod-filters .btn{padding:14px 28px;min-height:48px}
.aanbod-telling{font-size:.95rem;color:var(--ink-zacht);margin-top:18px}
/* raster */
.aanbod-lijst{padding:0 5vw 24px}
.aanbod-raster{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.woning-kaart{background:var(--wit);border:1px solid var(--zand-rand);border-radius:var(--radius);overflow:hidden;box-shadow:var(--schaduw-klein);transition:transform .3s ease,box-shadow .3s ease}
.woning-kaart:hover{transform:translateY(-4px);box-shadow:var(--schaduw)}
.woning-kaart-link{display:flex;flex-direction:column;height:100%;text-decoration:none}
.woning-kaart-foto{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--zand-diep)}
.woning-kaart-foto img{width:100%;height:100%;object-fit:cover}
.woning-kaart-foto .woning-label{position:absolute;left:16px;top:16px;box-shadow:var(--schaduw-klein)}
.woning-kaart-tekst{padding:20px 22px 22px;display:flex;flex-direction:column;gap:4px;flex:1}
.woning-kaart-tekst h2{font-size:1.3rem;font-weight:800}
.woning-kaart-plaats{font-size:.92rem;color:var(--ink-zacht)}
.woning-kaart-prijs{font-family:'Funnel Display',Arial,sans-serif;font-weight:700;font-size:1.08rem;margin-top:8px}
.woning-kaart-kenmerken{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:14px}
.woning-kaart-kenmerken li{font-size:.84rem;font-weight:600;background:var(--zand);border:1px solid var(--zand-rand);border-radius:999px;padding:4px 12px}
@media(max-width:1000px){.aanbod-raster{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.aanbod-raster{grid-template-columns:1fr}}
/* paginering */
.aanbod-paginering{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;padding:40px 5vw 0}
.aanbod-paginering a,.aanbod-paginering span{min-width:46px;min-height:46px;display:inline-flex;align-items:center;justify-content:center;padding:0 16px;border-radius:999px;text-decoration:none;font-weight:600;border:1px solid var(--zand-rand);background:var(--wit)}
.aanbod-paginering .current{background:var(--ink);color:var(--zand);border-color:var(--ink)}
.aanbod-paginering a:hover{border-color:var(--groen)}
@media(max-width:720px){.aanbod-kop{padding:44px 6vw 24px}.aanbod-filters-wrap,.aanbod-lijst,.afsluiter{padding-left:6vw;padding-right:6vw}}