/* Letterlijk uit woning-makelaarinamsterdam.html */
  :root{
    --blauw:#95D2F3;
    --blauw-zacht:#EAF4FB;
    --zand:#FBF6EE;
    --zand-diep:#F3E9D8;
    --zand-rand:#E7DAC1;
    --groen:#736F3C;
    --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 */
  .woning-kop{padding:44px 5vw 28px}
  .woning-kop .binnen{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
  .woning-kop h1{font-size:clamp(2.2rem,5vw,3.6rem);font-weight:800;margin-bottom:6px}
  .woning-plaats{font-size:1.1rem;color:var(--ink-zacht)}
  .woning-kop .woning-label{margin-bottom:14px}
  .woning-prijs{font-family:'Funnel Display',Arial,sans-serif;font-weight:800;font-size:clamp(1.3rem,2.4vw,1.7rem);margin-top:14px}
  .woning-feiten{list-style:none;display:flex;flex-wrap:wrap;gap:10px}
  .woning-feiten li{font-weight:600;background:var(--wit);border:1px solid var(--zand-rand);border-radius:999px;padding:8px 16px}

  /* galerij: grote foto + vier kleine, de rest via de lightbox */
  .woning-galerij-wrap{padding:0 5vw 56px}
  .woning-galerij{position:relative;display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:10px;aspect-ratio:21/9;border-radius:var(--radius);overflow:hidden;box-shadow:var(--schaduw)}
  .woning-galerij .woning-foto:first-child{grid-row:1/3}
  .woning-galerij .woning-foto:nth-child(n+6){display:none}
  .woning-foto{border:0;padding:0;background:var(--zand-diep);cursor:zoom-in;overflow:hidden;display:block;width:100%;height:100%}
  .woning-foto img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
  .woning-foto:hover img{transform:scale(1.03)}
  .woning-foto:focus-visible{outline:3px solid var(--blauw);outline-offset:-3px}
  .woning-alle{position:absolute;right:18px;bottom:18px;background:var(--wit);color:var(--ink);border:0;border-radius:999px;padding:12px 20px;font:inherit;font-weight:600;cursor:pointer;box-shadow:var(--schaduw-klein)}
  .woning-alle:hover{background:var(--zand)}
  @media(max-width:820px){
    .woning-galerij{grid-template-columns:1fr;grid-template-rows:auto;aspect-ratio:4/3}
    .woning-galerij .woning-foto:not(:first-child){display:none}
    .woning-galerij .woning-foto:first-child{grid-row:auto}
  }

  /* lightbox */
  .woning-lightbox{position:fixed;inset:0;z-index:200;background:rgba(20,22,22,.94);display:flex;align-items:center;justify-content:center}
  .woning-lightbox[hidden]{display:none}
  .woning-lightbox img{max-width:92vw;max-height:84vh;object-fit:contain;border-radius:8px}
  .woning-lightbox button{position:absolute;background:rgba(251,246,238,.12);color:var(--zand);border:0;border-radius:999px;width:52px;height:52px;font-size:1.5rem;cursor:pointer}
  .woning-lightbox button:hover{background:rgba(251,246,238,.24)}
  .lb-sluit{top:20px;right:20px}
  .lb-vorige{left:20px;top:50%;transform:translateY(-50%)}
  .lb-volgende{right:20px;top:50%;transform:translateY(-50%)}
  .lb-teller{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);color:var(--zand);font-size:.9rem}

  /* tekst + zijkant */
  .woning-inhoud-wrap{padding:0 5vw 24px}
  .woning-inhoud{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:64px;align-items:start}
  .woning-tekst{max-width:68ch;font-size:1.08rem;color:var(--ink-zacht)}
  .woning-tekst > * + *{margin-top:1.05em}
  .woning-tekst h2{font-family:'Funnel Display',Arial,sans-serif;color:var(--ink);font-size:1.5rem;font-weight:800;margin-top:1.8em}
  .woning-tekst > :first-child{margin-top:0}
  .woning-tekst ul{padding-left:1.3em}
  .woning-tekst li + li{margin-top:.35em}
  .woning-zijkant{position:sticky;top:96px;display:flex;flex-direction:column;gap:16px}
  .woning-kaartje{background:var(--wit);border:1px solid var(--zand-rand);border-radius:var(--radius);padding:24px;box-shadow:var(--schaduw-klein)}
  .woning-kaartje .woning-prijs{margin-top:0;margin-bottom:16px;font-size:1.3rem}
  .woning-bezichtiging{width:100%;text-align:center}
  .woning-makelaar{display:flex;gap:16px;align-items:center}
  .woning-makelaar img{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:center 20%;flex-shrink:0}
  .woning-makelaar .label{font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--groen)}
  .woning-makelaar b{display:block;font-family:'Funnel Display',Arial,sans-serif;font-size:1.1rem}
  .woning-makelaar a{display:block;font-size:.95rem;text-decoration:none;border-bottom:1px solid transparent;width:max-content}
  .woning-makelaar a:hover{border-color:var(--groen)}
  @media(max-width:1000px){.woning-inhoud{grid-template-columns:1fr;gap:32px}.woning-zijkant{position:static;order:-1}}

  /* secties */
  .woning-sectie{padding:56px 5vw 0}
  .woning-sectie h2{font-size:clamp(1.6rem,2.8vw,2.2rem);font-weight:800;margin-bottom:22px}
  .woning-kenmerken{width:100%;max-width:820px;border-collapse:collapse;background:var(--wit);border-radius:var(--radius);overflow:hidden;box-shadow:var(--schaduw-klein)}
  .woning-kenmerken th,.woning-kenmerken td{text-align:left;padding:14px 20px;border-bottom:1px solid var(--zand-rand);vertical-align:top}
  .woning-kenmerken tr:last-child th,.woning-kenmerken tr:last-child td{border-bottom:0}
  .woning-kenmerken th{font-weight:600;color:var(--ink-zacht);width:42%}
  .woning-plattegronden .rij{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:1000px}
  .woning-plattegronden .woning-foto{background:var(--wit);border:1px solid var(--zand-rand);border-radius:16px;aspect-ratio:3/4;padding:14px}
  .woning-plattegronden .woning-foto img{object-fit:contain}
  .woning-embed{position:relative;display:block;width:100%;max-width:1000px;aspect-ratio:16/9;border:0;border-radius:var(--radius);overflow:hidden;cursor:pointer;background:var(--ink);color:var(--zand);font:inherit;font-weight:600;font-size:1.1rem;box-shadow:var(--schaduw)}
  .woning-embed img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.8}
  .woning-embed span{position:relative;display:inline-flex;align-items:center;gap:10px;background:var(--rood);padding:14px 26px;border-radius:999px}
  .woning-embed span::before{content:"";border-left:12px solid currentColor;border-top:8px solid transparent;border-bottom:8px solid transparent}
  .woning-3d .woning-embed{background:linear-gradient(135deg,#2c2f2f,#141616)}
  iframe.woning-iframe{display:block;width:100%;max-width:1000px;aspect-ratio:16/9;height:auto;border:0;border-radius:var(--radius)}
  .woning-kaart-embeds{display:grid;grid-template-columns:1fr 1fr;gap:20px}
  .woning-kaart-embeds > *{width:100%;aspect-ratio:4/3;border:0;border-radius:var(--radius);background:var(--zand-diep)}
  .kaart-plek{display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;color:var(--ink-zacht);font-size:.95rem;border:1px dashed var(--zand-rand)}
  @media(max-width:820px){.woning-kaart-embeds,.woning-plattegronden .rij{grid-template-columns:1fr}}

  @media(max-width:720px){.woning-kop{padding:36px 6vw 22px}.woning-galerij-wrap,.woning-inhoud-wrap,.woning-sectie,.afsluiter{padding-left:6vw;padding-right:6vw}}

  /* Thema: kaart en Street View vangen het scrollen niet af. Een laag erover; klikken of tikken
     maakt de kaart bedienbaar tot de muis het vak verlaat (assets/js/woning.js). */
  .woning-embed-vak{position:relative;width:100%;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;background:var(--zand-diep)}
  .woning-kaart-embeds .woning-embed-vak iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:0;aspect-ratio:auto}
  .woning-embed-laag{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;background:transparent;cursor:pointer;display:flex;align-items:flex-end;justify-content:center}
  .woning-embed-laag span{margin-bottom:18px;background:rgba(20,22,22,.78);color:var(--zand);font:inherit;font-size:.9rem;font-weight:600;padding:8px 16px;border-radius:999px;opacity:0;transition:opacity .2s ease}
  .woning-embed-laag:hover span,.woning-embed-laag:focus-visible span{opacity:1}
  @media(hover:none){.woning-embed-laag span{opacity:1}}
  .woning-embed-vak.actief .woning-embed-laag{display:none}
  /* Thema: knop verborgen tot de House-app geladen is (assets/js/woning.js). */
  .woning-bezichtiging[hidden]{display:none}
  /* Thema: verkochte woning heeft alleen de hoofdfoto, die vult dan de hele galerij. */
  .woning-galerij.is-een{display:block}
  .woning-galerij.is-een .woning-foto{height:100%;cursor:default}
  .woning-galerij.is-een .woning-foto img{width:100%;height:100%;object-fit:cover}
