/* Makelaarspagina's (okt 2026): /makelaars/, /makelaars/{plaats}/, /makelaars/{kantoor}/.
   Opbouw uit het design (design.buurtje.nl, project buurtje-makelaars, sectie Buurtje.nl:
   makelaars.html, makelaars-amsterdam.html, kantoorpagina.html). Klassen kp- (kantoorpagina,
   gedeelde opbouw), ml- (overzicht en plaatspagina) en bm- (kaart rechts).
   Sinds 2026-10-16 gelijkgetrokken met woning-single en regio.php: zelfde header (zoekpil),
   topbar (.ws-topbar), kolommen (.ws-wrap/.ws-layout: 1180px, 350px rechts, 64px tussenruimte),
   typografie (h1 24px, h2 18px/600, subregels 14px/500 #BDBBB8, lopende tekst 15px/1.7 zwart),
   scheidingslijnen #F0F0F0 met 32px lucht, highlights (.ws-hl-*), pillen (.ws-filter-btn),
   knoppen (.ws-leesmeer-label, .ws-hl-score-btn), reviewkaarten (.ws-omg-erv-grid) en de
   FAQ (.woningen-faq). Warme grijzen; geen #5f6368 meer.
   Na een wijziging: npx esbuild makelaars.css --minify --outfile=makelaars.min.css */

body{display:block;background:#fff}
.kp{--ink:#1D2122;--ink-soft:#6B6864;--ink-faint:#908D89;--ink-licht:#BDBBB8;--line:#DBDAD7;--line-soft:#F0F0F0;--kaart-rand:#E8E8E6;--wash:#F5F5F3;
  max-width:1180px;margin:0 auto;padding:20px 20px 88px;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) 350px;column-gap:64px;grid-template-areas:"kop zij" "inhoud zij";align-items:start;color:var(--ink)}
.kp a{color:inherit;text-decoration:none}
.kp-kop{grid-area:kop;min-width:0}
.kp-inhoud{grid-area:inhoud;min-width:0}
.kp-zij{grid-area:zij;min-width:0}
.kp-zij .ws-sidebar-card{margin:0}
/* Overzicht en plaatspagina: geen kolom rechts (verificatie-CTA staat er nog niet) */
.kp.kp-smal{grid-template-columns:minmax(0,820px);grid-template-areas:"kop" "inhoud"}

/* ---------- kop (zelfde maten als .ws-adres / .ws-woonplaats / .ws-beschrijving) ---------- */
.kp-hero{display:flex;gap:16px;align-items:center}
.kp-logo{width:56px;height:56px;flex-shrink:0;border-radius:14px;border:1px solid #EEECE9;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;font-size:16px;font-weight:700;color:var(--ink-faint)}
.kp-logo img{width:32px;height:32px;display:block;border-radius:6px}
.kp h1{margin:0 0 4px;font-size:24px;line-height:1.2;font-weight:700;letter-spacing:0;color:var(--ink)}
.kp-sub{margin:0;font-size:15px;font-weight:500;color:var(--ink-licht)}
.kp-sub-1{color:var(--ink)}
.kp-intro{margin:16px 0 0;font-size:15px;line-height:1.7;color:var(--ink)}

/* Kantoorcijfers: .ws-highlights met .ws-hl-item (global.css), hier alleen de omlijsting */
.kp .kp-stats{margin:24px 0 0;padding:14px 0 0;border-top:1px solid var(--line-soft);border-bottom:0}
.kp-stats .ws-hl-icon svg{stroke-width:1.6}
.kp-stats .ws-hl-item:last-child{padding-bottom:0}
/* Desktop: cijfers naast elkaar (Laurens 16 okt); mobiel onder elkaar zoals .ws-highlights */
@media (min-width:601px){
  .kp .kp-stats{display:grid;grid-auto-flow:column;grid-auto-columns:max-content;justify-content:start;column-gap:120px;padding-top:24px}
  /* Zelfde stijl als de highlights op de woningpagina, alleen kleiner (Laurens 16 okt) */
  /* Icoon naast de tekst (Laurens 17 okt: toch niet erboven) */
  .kp-stats .ws-hl-item{padding:0;gap:10px;align-items:center}
  .kp-stats .ws-hl-icon{width:22px;height:22px}
  .kp-stats .ws-hl-icon svg{width:22px;height:22px}
  .kp-stats .ws-hl-title{font-size:14px}
  .kp-stats .ws-hl-sub{font-size:13px}
}

/* ---------- secties: lijn #F0F0F0 met 32px lucht erboven en eronder (zoals .ws-section) ---------- */
.kp-sec{margin-top:32px;padding-top:32px;border-top:1px solid var(--line-soft)}
.kp-sec-kop{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:16px}
.kp h2{margin:0;font-size:18px;line-height:1.3;font-weight:600;letter-spacing:0;color:var(--ink)}
.kp-sec-sub{margin:6px 0 0;font-size:14px;font-weight:500;color:var(--ink-licht)}

/* Koop/huur: pillen zoals .ws-filter-btn (Buurt/Wijk/Gemeente op de woningpagina) */
.kp-tabs{display:inline-flex;gap:2px;padding:2px;border-radius:10px;background:#f5f5f5;flex-shrink:0}
.kp-tab{height:28px;padding:0 11px;border-radius:8px;border:0;background:none;font:inherit;font-size:12.5px;font-weight:600;color:var(--ink-soft);display:flex;align-items:center;gap:6px;cursor:pointer}
.kp-tab.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.kp-tab i{font-style:normal;font-weight:500;color:var(--ink-faint)}

.kp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 22px}
.kp-grid[hidden],.kp-meer-btn[hidden]{display:none}
.kp-grid>.pc.kp-extra{display:none}
.kp-grid.alles>.pc.kp-extra{display:flex}
/* Meer-knop: zelfde grijze knop als "Lees meer" / "Bekijk alle kenmerken" (.ws-leesmeer-label) */
.kp-meer-btn{display:block;width:fit-content;margin:24px 0 0;padding:8px 16px;border:0;border-radius:10px;background:var(--wash);font:inherit;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;transition:background .15s}
.kp-meer-btn:hover{background:#EBEBEB}

/* buurten */
.kp-buurten{border-top:1px solid var(--line-soft)}
.kp-buurt:last-child{border-bottom:0}
.kp-buurt{display:grid;grid-template-columns:30px minmax(0,1fr) auto 150px 14px;column-gap:16px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line-soft)}
.kp-buurt:hover .kp-buurt-naam{text-decoration:underline;text-underline-offset:3px}
.kp-score{width:30px;height:22px;border-radius:7px;color:#fff;font-size:11.5px;font-weight:700;display:flex;align-items:center;justify-content:center}
.kp-buurt-naam{font-size:14px;font-weight:600;min-width:0}
.kp-buurt-naam small{display:block;font-size:13px;font-weight:500;color:var(--ink-licht);margin-top:1px}
.kp-buurt-woz{font-size:13px;font-weight:600;text-align:right;white-space:nowrap}
.kp-buurt-woz small{display:block;font-size:12px;font-weight:500;color:var(--ink-licht)}
.kp-buurt>svg{width:13px;height:13px;color:var(--ink-licht)}
.kp-thumbs{display:flex;justify-content:flex-end;align-items:center;gap:8px}
.kp-thumbs-img{display:flex;align-items:center}
.kp-thumbs-n{width:68px;font-size:13px;font-weight:500;color:var(--ink-faint);white-space:nowrap}
.kp-thumbs img,.kp-thumbs-meer{width:22px;height:22px;border-radius:7px;border:1.5px solid #fff;object-fit:cover;box-shadow:0 1px 4px rgba(29,33,34,.18);background:var(--wash)}
.kp-thumbs img+img,.kp-thumbs-meer{margin-left:-9px}
.kp-thumbs-meer{display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:var(--ink-faint)}

/* reviews: scorekaart zoals .ws-hl-score-card, kaarten zoals .ws-omg-erv-grid .ws-review-card */
.kp-rv-score{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:24px;margin-bottom:24px;padding:0;background:#fff}
.kp-rv-totaal{display:flex;align-items:center;gap:14px}
.kp-rv-badge{width:46px;height:32px;border-radius:10px;color:#fff;font-size:16px;font-weight:700;letter-spacing:-.4px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.kp-rv-totaal b{display:block;font-size:15px;font-weight:600;line-height:1.3}
.kp-rv-totaal div span{display:block;margin-top:2px;font-size:13px;color:var(--ink-faint);white-space:nowrap}
.kp-rv-bronnen{display:grid;gap:8px;padding-left:24px;border-left:1px solid var(--kaart-rand)}
.kp-rv-rij{display:grid;grid-template-columns:16px 52px minmax(0,1fr) 28px 44px;align-items:center;gap:10px;font-size:13px}
.kp-rv-rij img{width:16px;height:16px;border-radius:4px;display:block}
.kp-rv-naam{font-weight:600}
.kp-rv-bar{height:6px;border-radius:9px;background:#F0F0F0;overflow:hidden}
.kp-rv-bar i{display:block;height:100%;border-radius:9px}
.kp-rv-rij b{font-weight:700;text-align:right}
.kp-rv-rij small{font-size:12px;color:var(--ink-faint)}
.kp-rv-rij:hover .kp-rv-naam{text-decoration:underline;text-underline-offset:3px}
/* Knop in de kop: .ws-omg-hero-cta ("Praat mee"), hier alleen de plaats */
.kp-sec-kop-knop{align-items:center}
.kp-rv-knop{flex-shrink:0;white-space:nowrap}
.kp-reviews{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.kp-review{display:flex;flex-direction:column;margin:0;padding:22px;background:#fff;border-radius:20px;box-shadow:0 4px 24px rgba(0,0,0,.06)}
.kp-review-kop{display:flex;align-items:center;justify-content:space-between;gap:8px}
.kp-sterren{display:flex;gap:1px}
.kp-sterren svg{width:13px;height:13px;display:block}
.kp-sterren svg.leeg{color:#DBDAD7}
.kp-review-datum{font-size:12.5px;font-weight:500;color:var(--ink-faint)}
.kp-review blockquote{margin:12px 0 0;font-size:13.5px;font-weight:500;line-height:1.6;color:var(--ink);display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.kp-review figcaption{display:flex;align-items:center;gap:7px;margin-top:auto;padding-top:14px;font-size:12.5px;font-weight:500;color:var(--ink-faint)}
.kp-review figcaption img{width:16px;height:16px;border-radius:4px}
.kp-review figcaption a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.kp-rv-bronregel{margin:16px 0 0;font-size:12px;line-height:1.5;color:var(--ink-faint)}
.kp-rv-bronregel a{text-decoration:underline;text-underline-offset:3px}
.kp-rv-bronregel a:hover{color:var(--ink)}

/* over: tekst zoals .ws-beschrijving, regels in een kaart zoals .ws-feature-group */
.kp-over p{margin:0;font-size:15px;line-height:1.7;color:var(--ink)}
.kp-bron{display:flex;align-items:flex-start;gap:7px;margin:6px 0 0;font-size:12px;line-height:1.5;color:var(--ink-faint)}
.kp-bron svg{width:14px;height:14px;flex-shrink:0;margin-top:1px}
.kp-bron a{text-decoration:underline;text-underline-offset:3px}
.kp-bron-kort{display:none}
@media (max-width:600px){.kp-bron-lang{display:none}.kp-bron-kort{display:inline}}
.kp-regels{margin-top:20px;padding:9px 20px;border:1px solid var(--kaart-rand);border-radius:16px}
.kp-regels p{display:flex;gap:12px;margin:0;padding:9px 0;border-bottom:1px solid var(--wash);font-size:14px;font-weight:500;color:var(--ink)}
.kp-regels p:last-child{border-bottom:0}
.kp-regels>p>span:first-child{flex:0 0 40%;font-size:14px;color:var(--ink-faint)}
.kp-regel-v{flex:1;min-width:0}
.kp-regels abbr{text-decoration:underline dotted;text-decoration-color:var(--ink-faint);text-underline-offset:3px;cursor:help}
.kp-regels a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}
.kp-regels a:hover{text-decoration-color:var(--ink)}
.kp-over-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;margin-top:24px}
.kp-over-grid h3{margin:0 0 10px;font-size:15px;font-weight:700}
.kp-vinken{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.kp-vinken li{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500}
.kp-vinken svg{width:14px;height:14px;color:#118141;flex-shrink:0}

/* links: kaartjes met dezelfde rand en radius als de kenmerkenkaarten */
.kp-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.kp-link{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--kaart-rand);border-radius:16px;transition:border-color .15s}
.kp-link:hover{border-color:var(--line)}
.kp-link img{width:38px;height:38px;border-radius:9px;object-fit:cover;flex-shrink:0;background:var(--wash)}
.kp-link b{display:block;font-size:14px;font-weight:600}
.kp-link span{display:block;margin-top:2px;font-size:13px;font-weight:500;color:var(--ink-licht)}
.kp-link.zonder{padding:14px 16px}
/* Fotostapel: drie woningfoto's rommelig op elkaar, bij hover netjes recht naast elkaar */
/* Per kaartje een andere ligging (--a/--b/--c = draaiing, --x = afstand); hover schuift
   alleen een paar pixels verder uit en draait iets recht (rustig, geen sprong). */
.kp-stapel{--a:-12deg;--b:9deg;--c:-3deg;--x:15px;--ya:3px;--yb:-2px;position:relative;width:84px;height:44px;flex-shrink:0}
.kp-link:nth-child(4n+2) .kp-stapel{--a:-7deg;--b:13deg;--c:4deg;--x:14px;--ya:-2px;--yb:3px}
.kp-link:nth-child(4n+3) .kp-stapel{--a:-14deg;--b:6deg;--c:-6deg;--x:16px;--ya:1px;--yb:1px}
.kp-link:nth-child(4n+4) .kp-stapel{--a:-9deg;--b:11deg;--c:2deg;--x:13px;--ya:4px;--yb:-3px}
.kp-stapel img{position:absolute;top:6px;left:26px;width:32px;height:32px;border-radius:8px;object-fit:cover;background:var(--wash);border:2px solid #fff;box-shadow:0 1px 5px rgba(29,33,34,.18);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.kp-stapel img:nth-child(1){z-index:1;transform:translate(calc(var(--x) * -1),var(--ya)) rotate(var(--a))}
.kp-stapel img:nth-child(2){z-index:2;transform:translate(var(--x),var(--yb)) rotate(var(--b))}
.kp-stapel img:nth-child(3){z-index:3;transform:rotate(var(--c))}
.kp-link:hover .kp-stapel img:nth-child(1){transform:translate(calc(var(--x) * -1 - 4px),var(--ya)) rotate(calc(var(--a) * .6))}
.kp-link:hover .kp-stapel img:nth-child(2){transform:translate(calc(var(--x) + 4px),var(--yb)) rotate(calc(var(--b) * .6))}
.kp-link:hover .kp-stapel img:nth-child(3){transform:rotate(calc(var(--c) * .5))}
.kp-stapel-1 img{transform:none !important}
/* Logo's (bij "Makelaars in ..."): heel tonen op wit, niet bijsnijden */
.kp-stapel-logo img{object-fit:contain;padding:4px;box-sizing:border-box;background:#fff}
@media (prefers-reduced-motion:reduce){.kp-stapel img{transition:none}}
.kp-link>svg{width:14px;height:14px;margin-left:auto;color:var(--ink-licht);flex-shrink:0}

/* faq: .woningen-faq uit global.css (zelfde accordeon met + als op de woningpagina) */
.kp-faq summary h3{margin:0;font:inherit}
.kp .woningen-faq-item a{color:var(--wn-accent,#E7643E)}
.kp .woningen-faq-item a:hover{text-decoration:underline}

/* ---------- kaart rechts (kantoorpagina) ---------- */
/* Kop, vinkjes en blokkoppen (.bm-agent, .bm-usp, .bm-reviews) staan in global.css omdat de
   woningpagina ze ook gebruikt */
.bm-review-row{display:flex;align-items:center;gap:9px;padding:5px 0;color:inherit}
.bm-review-row img{width:20px;height:20px;border-radius:5px;flex-shrink:0}
.bm-review-plat{flex:1;font-size:13px;font-weight:500;color:#1D2122;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bm-review-score{font-size:13px;font-weight:700;color:#1D2122;min-width:22px;text-align:right}
/* Knoppen zoals .ws-side-bar .ws-side-btn op de woningpagina (40px, radius 12, 13px/600) */
.bm-eigen{display:flex;gap:8px;margin-top:16px}
.bm-btn{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;box-sizing:border-box;font-size:13px;font-weight:600;font-family:inherit;color:#1D2122;background:#fff;border:1px solid #DBDAD7;border-radius:12px;text-decoration:none;white-space:nowrap;transition:border-color .15s,opacity .15s}
.bm-btn:hover{border-color:#1D2122}
.bm-btn svg{width:14px;height:14px;flex-shrink:0}
.bm-btn-ink{border:0;color:#fff;background:linear-gradient(160deg,#2A2F31,#000 70%);box-shadow:0 6px 20px rgba(29,33,34,.38),inset 0 0 0 1px rgba(255,255,255,.08),inset 0 1px 0 rgba(255,255,255,.16)}
.bm-btn-ink:hover{opacity:.92}
.kp .bm-btn-ink{color:#fff}
.bm-kantoor{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:14px;font-weight:500;color:#1D2122}
.bm-kantoor svg{width:16px;height:16px;flex-shrink:0;color:#908d89}
.kp-zij .bm-eerste .bm-usps{margin-bottom:8px}
/* Subregel onder de naam zoals "2 bronnen" in de kaart op de woningpagina (.ws-pc-bron-count-txt) */
.kp-zij .bm-agent-sub{margin-top:3px;font-size:12px;font-weight:600;color:#BDBBB8}
.kp-contact-boven{margin-top:16px}
/* Twee groepjes (website + adres, mail + telefoon) met wat lucht ertussen */
.kp-ct-groep+.kp-ct-groep{margin-top:10px}
/* Witte knop (Woningen) in de sticky balk, naast de zwarte Beoordeel */
.ws-navbar-cta.mk-navbar-wit,.has-hdr .ws-navbar.mk-navbar .ws-navbar-cta.mk-navbar-wit{background:#fff;color:var(--ink,#1D2122);box-shadow:inset 0 0 0 1px #DBDAD7}
.kp-blok-kop{display:flex;justify-content:space-between;align-items:baseline}
.kp-blok-stat{font-size:12px;font-weight:500;color:#BDBBB8;transition:color .15s}
.kp-stat-lang{display:none}
.kp-tijd{display:flex;justify-content:space-between;padding:2px 0;font-size:13px;font-weight:500;color:var(--ink-faint)}
.kp-tijd b{font-weight:500;color:var(--ink)}
.kp-tijd.is-vandaag span,.kp-tijd.is-vandaag b{font-weight:600;color:var(--ink)}
/* Eén letterschaal in de kaart (Laurens 17 okt): alle regels 13px/500 in ink,
   blokkoppen 13px/500 lichtgrijs (zoals .ws-hl-sub) */
.kp .bm-usp,.kp-zij .bm-review-plat,.kp-zij .ws-contact-item-text{font-size:13px;font-weight:500;color:var(--ink)}
.kp .bm-usp svg{margin-top:3px}
.kp-zij .kp-blok-kop>span:first-child,.kp-blok-stat{font-size:13px}
.kp-kop-usps{display:none}
.kp-socials{display:flex;gap:4px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line-soft)}
.kp-socials a{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--ink-faint);transition:background .15s,color .15s}
.kp-socials a:hover{background:var(--wash);color:var(--ink)}
.kp-socials svg{width:16px;height:16px}
/* Zelfde opmaak als "Deze woning melden" op de woningpagina (.ws-melden) */
.kp-melden{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:16px;font-size:13px;font-weight:500;color:#908d89 !important}
.kp-melden svg{width:15px;height:15px;flex-shrink:0}
.kp-melden span{text-decoration:underline;text-underline-offset:3px}
.kp-melden:hover{color:#1D2122 !important}

/* ---------- Beoordeel-modal (schil = premium-modal, klassen bpw- en v4- in global.css) ---------- */
button.kp-rv-knop,button.bm-btn{font-family:inherit;cursor:pointer;color:var(--ink)}
/* Compact (Laurens 17 okt): het hele formulier past binnen 100vh, ook op een telefoon */
.mkr-form{margin-top:18px;display:flex;flex-direction:column;gap:13px;padding-bottom:0}
.mkr-veld{display:flex;flex-direction:column;gap:6px;min-width:0}
.mkr-label{font-size:13px;font-weight:600;color:#1D2122}
.mkr-sterren{display:flex;gap:6px}
.mkr-sterren button{width:36px;height:36px;padding:0;border:1px solid #E5E3DF;border-radius:10px;background:#fff;color:#DBDAD7;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:color .15s,border-color .15s,transform .12s}
.mkr-sterren button svg{width:20px;height:20px}
.mkr-sterren button:hover{border-color:#BDBBB8}
.mkr-sterren button.on{color:var(--ster,#118141);border-color:var(--ster,#118141)}
.mkr-sterren button:active{transform:scale(.94)}
.mkr-logo{position:relative;width:52px;height:52px;border-radius:15px;border:1px solid #EEECE9;background:#fff;box-shadow:0 1px 3px rgba(29,33,34,.08),0 10px 28px rgba(29,33,34,.12);display:flex;align-items:center;justify-content:center;overflow:hidden}
.mkr-logo span{font-size:16px;font-weight:700;color:#908D89}
.mkr-logo img{position:absolute;inset:0;margin:auto;width:30px;height:30px;border-radius:5px;background:#fff;box-shadow:0 0 0 11px #fff}
.mkr-logo img:not([src]){display:none}
.mkr-hint{font-size:12px;line-height:1.45;color:#908D89}
.mkr-sheet.v4 .bpw-card{padding-top:22px}
.mkr-sheet.v4 .bpw-title.v4-title{margin-top:12px;font-size:18px}
.mkr-sheet .v4-sub{margin-top:6px}
.mkr-chips{display:flex;flex-wrap:wrap;gap:6px}
.mkr-chips button{height:30px;padding:0 12px;border-radius:999px;border:1px solid #E5E3DF;background:#fff;font:inherit;font-size:13px;font-weight:500;color:#6B6864;cursor:pointer}
.mkr-chips button:hover{border-color:#BDBBB8}
.mkr-chips button.on{background:#1D2122;border-color:#1D2122;color:#fff}
.mkr-form textarea,.mkr-form input[type=text],.mkr-form input[type=email]{width:100%;box-sizing:border-box;border:1px solid #DBDAD7;border-radius:10px;padding:9px 12px;font:inherit;font-size:16px;color:#1D2122;background:#fff;outline:none;resize:vertical}
@media (min-width:720px){.mkr-form textarea,.mkr-form input[type=text],.mkr-form input[type=email]{font-size:14px}}
.mkr-form textarea:focus,.mkr-form input:focus{border-color:#1D2122}
.mkr-teller{font-size:12px;color:#908D89}
.mkr-teller.ok{color:#118141}
.mkr-rij{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (max-width:340px){.mkr-rij{grid-template-columns:minmax(0,1fr)}}
.mkr-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.mkr-fout{margin:0;font-size:13px;color:#C33737}
.mkr-alt{margin:0;text-align:center;font-size:12.5px;color:#908D89}
.mkr-alt a{color:#6B6864;text-decoration:underline;text-underline-offset:3px}
.mkr-sheet .bpw-cta-wrap{padding-bottom:16px;margin-top:4px}
@media (min-width:720px){.mkr-sheet.v4 .bpw-card{padding:24px 28px 12px}}
.mkr-klaar{display:flex;flex-direction:column;align-items:center;text-align:center;padding:28px 6px 24px;gap:8px}
.mkr-klaar[hidden],.mkr-form[hidden]{display:none}
.mkr-klaar-ico{width:48px;height:48px;border-radius:50%;background:#E8F3EC;color:#118141;display:flex;align-items:center;justify-content:center;margin-bottom:4px}
.mkr-klaar-ico svg{width:24px;height:24px}
.mkr-klaar h3{margin:0;font-size:17px;font-weight:700}
.mkr-klaar p{margin:0 0 14px;font-size:14px;color:#6B6864;line-height:1.55}

/* ---------- overzicht en plaatspagina (ml-) ---------- */
.ml-zoek{display:block;position:relative;max-width:480px;margin-top:20px}
.ml-zoek>svg{position:absolute;left:14px;top:22px;width:16px;height:16px;transform:translateY(-50%);color:var(--ink-faint);pointer-events:none}
.ml-zoek input{width:100%;height:44px;padding:0 14px 0 40px;border:1px solid var(--line);border-radius:12px;font:inherit;font-size:16px;color:var(--ink);background:#fff;outline:none;box-sizing:border-box}
@media (min-width:700px){.ml-zoek input{font-size:14px}}
.ml-zoek input:focus{border-color:var(--ink)}
.ml-zoek-res{position:absolute;left:0;right:0;top:50px;z-index:20;background:#fff;border:1px solid var(--line-soft);border-radius:14px;box-shadow:0 10px 32px rgba(29,33,34,.12);padding:6px;max-height:360px;overflow:auto}
.ml-zoek-res[hidden]{display:none}
.ml-zoek-res a{display:flex;justify-content:space-between;gap:12px;padding:9px 10px;border-radius:9px;font-size:14px;font-weight:600}
.ml-zoek-res a span{font-size:13px;font-weight:500;color:var(--ink-licht);white-space:nowrap}
.ml-zoek-res a:hover,.ml-zoek-res a.on{background:var(--wash)}
.ml-zoek-res p{padding:9px 10px;font-size:13px;color:var(--ink-faint)}
.ml-zoek-res h3{margin:6px 10px 2px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-faint)}
/* Wijkfilter en sortering: pillen zoals .ws-filter-btn */
.ml-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.ml-chips button{padding:6px 14px;border-radius:42px;border:1px solid rgba(29,33,34,.12);background:transparent;font:inherit;font-size:13px;font-weight:500;color:#6B6864;display:flex;align-items:center;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.ml-chips button:hover{border-color:rgba(29,33,34,.24);color:var(--ink)}
.ml-chips button.on{background:rgba(29,33,34,.06);border-color:transparent;color:var(--ink);font-weight:600}
/* Sortering: dezelfde schakelaar als koop/huur op de kantoorpagina (.kp-tabs) */
.ml-sort{display:inline-flex;gap:2px;padding:2px;border-radius:10px;background:#f5f5f5;flex-shrink:0}
.ml-sort button{height:28px;padding:0 11px;border-radius:8px;border:0;background:none;font:inherit;font-size:12.5px;font-weight:600;color:var(--ink-soft);display:flex;align-items:center;cursor:pointer}
.ml-sort button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}

.ml-lijst{border-top:1px solid var(--line-soft)}
.ml-rij{display:grid;grid-template-columns:40px minmax(0,1fr) auto 120px;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line-soft)}
.ml-rij[hidden]{display:none}
.ml-lijst:not(.alles) .ml-rij.ml-extra{display:none}
.ml-rij:hover .ml-naam{text-decoration:underline;text-underline-offset:3px}
.ml-logo{position:relative;width:40px;height:40px;border-radius:10px;border:1px solid #EEECE9;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden}
.ml-logo::before{content:attr(data-letters);font-size:12px;font-weight:700;color:var(--ink-faint)}
.ml-logo img{position:absolute;inset:0;margin:auto;width:22px;height:22px;border-radius:4px;background:#fff;box-shadow:0 0 0 9px #fff}
.ml-logo img:not([src]){display:none}
.ml-tekst{min-width:0}
.ml-naam{display:block;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ml-sub{display:block;margin-top:2px;font-size:13px;font-weight:500;color:var(--ink-licht);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ml-aanbod{font-size:13px;font-weight:500;color:var(--ink-faint);white-space:nowrap;text-align:right}
.ml-aanbod b{color:var(--ink);font-weight:600}
.ml-score{display:flex;align-items:center;justify-content:flex-end;gap:6px;font-size:13px;white-space:nowrap}
.ml-score b{color:var(--ink);font-weight:700;min-width:22px;text-align:right}
.ml-score-logo{width:14px;height:14px;border-radius:3px;display:block}
.ml-score .kp-sterren svg{width:11px;height:11px}
.ml-leeg{padding:18px 0;font-size:14px;font-weight:500;color:var(--ink-faint)}

.ml-steden{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:28px;border-top:1px solid var(--line-soft)}
.ml-steden a{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:11px 0;border-bottom:1px solid var(--line-soft);font-size:14px;font-weight:600}
.ml-steden a span{font-size:13px;font-weight:500;color:var(--ink-licht)}
.ml-steden a:hover b{text-decoration:underline;text-underline-offset:3px}
.ml-steden b{font-weight:600}

.ml-prov{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 28px}
.ml-prov h3{margin:0 0 8px;font-size:15px;font-weight:700}
.ml-prov a{display:block;padding:3px 0;font-size:14px;font-weight:500;color:var(--ink-faint)}
.ml-prov a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.ml-prov-rest[hidden]{display:none}
.ml-prov button{display:block;margin-top:6px;padding:3px 0;border:0;background:none;font:inherit;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer}
.ml-prov button:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- responsief (zelfde breekpunten als woning-single: 900 en 600) ---------- */
/* Zwevende balk alleen in de mobiele opbouw (global.css toont .ws-mob-bar tot 900px) */
@media (min-width:901px){.kp-mob-bar{display:none !important}}
/* Sectiebalk bovenin (.ws-navbar, makelaar_navbar_html), mobiel en desktop; koppen vallen eronder, niet erachter */
/* Desktop: evenveel ruimte boven als onder de cijfers (24px tot beide lijnen) */
@media (min-width:901px){.kp-inhoud>.kp-sec:first-child{margin-top:24px}}
.kp h2[id]{scroll-margin-top:84px}
@media (max-width:1100px){
  .kp{column-gap:40px}
  .ml-prov{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ml-steden{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1050px) and (min-width:901px),(max-width:600px){
  .kp-rv-score{grid-template-columns:minmax(0,1fr);gap:16px}
  .kp-rv-bronnen{padding-left:0;border-left:0;padding-top:14px;border-top:1px solid var(--kaart-rand)}
}
@media (max-width:900px){
  /* Volgorde mobiel (Laurens 17 okt): kop met vinkjes en cijfers, contact (mail, telefoon, adres,
     openingstijden), Over, Reviews, Woningen, rest. .kp-inhoud valt weg (contents) zodat de kaart
     ertussen kan. */
  .kp{display:flex;flex-direction:column;align-items:stretch;padding-top:16px;padding-bottom:104px}
  .kp-inhoud{display:contents}
  .kp-kop{order:0}
  .kp-inhoud>.kp-sec{order:5}
  .kp-zij{order:1;position:static;max-width:none;margin-top:0;padding-top:24px}
  .kp-inhoud>.kp-sec[aria-labelledby=kp-over]{order:2}
  .kp-inhoud>.kp-sec[aria-labelledby=kp-reviews]{order:3}
  .kp-inhoud>.kp-sec[aria-labelledby=kp-aanbod]{order:4}
  .kp-kop-usps{display:block;margin-top:16px}
  /* Logo, naam en vinkjes staan al in de kop: in de kaart niet nog eens */
  .kp-zij .bm-eerste{display:none}
  /* Mobiel: de kaart staat direct onder de kop, dus geen tweede logo + naam en geen
     reviews (die staan verderop in "Wat klanten zeggen"); openingstijden uitgeklapt. */
  /* Plat zoals de kaart op de woningpagina mobiel: geen schaduw/rand, alleen dividers */
  .kp-zij .ws-sidebar-card{box-shadow:none;background:transparent;border:0;border-radius:0;padding:0}
  /* Eerste blok van de kaart: de cijfers erboven hebben de lijn al */
  .kp-zij .ws-contact-block{display:block;margin-top:0;padding-top:0;border-top:0}
  /* Evenveel ruimte onder als boven (24px padding van .kp-zij): 8 + 16 marge van de lijn eronder */
  .kp-zij .kp-contact-boven{padding-bottom:8px}
  /* Beoordeel/Website staan op mobiel in de zwevende balk onderin */
  .kp-zij .bm-eigen{display:none}
  .has-hdr .kp-mob-wit{background:#fff;color:var(--ink);border:1px solid #DBDAD7;box-shadow:none}
  .kp-mob-bar .ws-mob-btn{flex:1 1 0}
  .kp .kp-mob-bar .ws-mob-bekijk-aanbod{color:#fff}
  /* "Klopt er iets niet?" staat mobiel al bij Over en in de FAQ */
  .kp-zij .kp-melden{display:none}
  .kp-zij .bm-reviews:not(.kp-tijden){display:none}
  .kp-zij .kp-stat-lang{display:inline}
  .kp-zij .kp-stat-kort{display:none}
  .kp-zij .kp-tijden .kp-blok-stat{color:var(--accent);font-weight:600}
  /* Socials compact en verticaal midden tussen de lijnen: 16px erboven, en de 32px
     marge van de sectie eronder met 16px ingekort */
  .kp-zij .kp-socials{padding-top:16px;margin-bottom:-16px}
  /* Cijfers staan mobiel boven de kaart: lijn eronder, zoals .ws-highlights */
  .kp .kp-stats{padding-bottom:24px;border-bottom:1px solid var(--line-soft)}
  .kp-sec-kop{flex-direction:column;align-items:flex-start}
  /* Beoordelen zit mobiel al in de zwevende balk (Laurens 17 okt) */
  .kp-rv-knop{display:none}
  .kp-links{grid-template-columns:minmax(0,1fr)}
  .ml-rij{grid-template-columns:40px minmax(0,1fr) auto;gap:12px}
  .ml-aanbod{grid-column:2/4;grid-row:2;text-align:left;margin-top:-6px}
  .ml-score{grid-column:3;grid-row:1}
  .ml-steden{grid-template-columns:minmax(0,1fr)}
  .ml-prov{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 20px}
}
@media (max-width:700px){
  .kp-reviews{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  .kp{padding-left:16px;padding-right:16px}
  .kp-hero{gap:12px}
  .kp-logo{width:48px;height:48px;border-radius:12px}
  .kp-logo img{width:28px;height:28px}
  .kp h1{font-size:20px;margin-bottom:6px}
  .kp-sub{font-size:13px}
  .kp-hl-sub,.kp-stats .ws-hl-sub{font-size:13px}
  /* Icoon links tegen de kantlijn, gelijk met intro en vinkjes (vak was 44px, icoon gecentreerd) */
  .kp-stats .ws-hl-icon{width:28px;justify-content:flex-start}
  .kp-stats .ws-hl-item{gap:16px}
  .kp-grid{grid-template-columns:minmax(0,1fr);gap:24px}
  .kp-grid>.pc:nth-child(n+4):not(.kp-extra){display:none}
  .kp-grid.alles>.pc:nth-child(n+4){display:flex}
  .kp-buurt{grid-template-columns:30px minmax(0,1fr) auto 14px}
  .kp-thumbs-img,.kp-buurt-woz{display:none}
  .kp-thumbs-n{width:auto}
  .kp-review{padding:18px}
  .kp-over-grid{gap:16px}
  .kp-vinken li{font-size:13px;align-items:flex-start}
  .kp-vinken svg{margin-top:2px}
  .kp-regels{padding:6px 16px}
  .kp-regels>p>span:first-child{flex-basis:36%;font-size:13px}
  .kp-rv-rij{grid-template-columns:16px 48px minmax(0,1fr) 28px 40px}
}
