/* Visuele stijlgids De Munt, concept 6 oktober 2026. */
:root{--navy:#242021;--ink:#242021;--muted:#625D5E;--cream:#FFFFFF;--line:#DED9D3;--accent:#F67321;--orange:#F67321;--warm:#F2EFEA}
body{background:#FFFFFF;color:var(--ink);font-family:'Source Sans 3',Arial,sans-serif;font-size:16px;line-height:1.5}
button,input,select,textarea,.leaflet-container{font-family:'Source Sans 3',Arial,sans-serif}
h1,h2,h3,h4,strong,button,.price,.property-price{font-weight:600}
h1,h2,h3,h4{color:var(--ink);letter-spacing:0;text-align:left}
.intro h1,.hero h1{font-size:clamp(30px,3.5vw,46px);line-height:1.15;font-weight:600;max-width:850px}
.intro p:not(.eyebrow){max-width:860px;font-size:17px;line-height:1.6;color:var(--ink);margin-top:16px}
.eyebrow,.feature-kicker,.filters label,.group{color:var(--ink);text-transform:none;letter-spacing:0;font-size:14px;font-weight:600}
.intro,.hero{padding-top:32px;padding-bottom:32px}
header.top{padding-top:20px;padding-bottom:20px;gap:24px}
header.top .intro-cta>span{font-size:20px;line-height:1.3;font-weight:600;color:var(--ink);white-space:normal}
header.top .intro-cta button{font-size:14px;line-height:1.35;min-height:44px;padding:10px 14px}
.intro-cta>span{transform:none;line-height:1.3}
.shell,.layout,.feature-card,.vlog-section,.vlog-item,.broker-bubble,.map-legend,.help-popover,.property-agent,.property-document-card,.property-location-card,.property-plans-card,nav.contact-bar{box-shadow:none}
.shell,.layout,.feature-card,.vlog-item,.property-agent,.property-document-card,.property-location-card,.property-plans-card{border:1px solid var(--line);border-radius:8px}
.below-map{gap:24px;margin-bottom:40px}
.feature-copy,.quote-card,.bog-card .bog-copy{padding:28px}
.feature-card h2,.vlog-section h2{font-size:28px;line-height:1.25;font-weight:600}
.feature-card p{font-size:16px;line-height:1.6;color:var(--ink)}
.quote-card,.bog-card{background:var(--warm)}
.quote-card blockquote{font-size:22px;line-height:1.5;font-weight:400;margin:20px 0 0;color:var(--ink)}
.vlog-section{background:var(--warm);border:1px solid var(--line);border-top:3px solid var(--accent);border-radius:8px;padding:28px}
.vlog-section .feature-kicker,.vlog-section h2{color:var(--ink)}
.vlog-visual{background:var(--warm)}
.vlog-visual:before{display:none}
.vlog-number{color:var(--ink);font-weight:600;font-size:64px}
.broker-cutout,.broker-figure .broker-cutout{filter:none}
.card:hover,.card:focus-visible,.card.active{background:var(--warm);box-shadow:inset 3px 0 var(--accent)}
.card .badge,.popbody .badge,.tag,.tag.appointment,.property-status,.time,.group,.group.app,.property-header-facts span{background:var(--warm);color:var(--ink)}
.filters select{font-size:14px;min-height:44px;border-color:var(--line)}
.filters .map-legend label,.filters .map-legend label span{font-size:12px;letter-spacing:0;text-transform:none}
.card h2{font-size:16px}.card .price{font-size:16px}.card .place,.card .facts{font-size:13px}
.intro-cta button,.broker-bubble button,.broker-bubble a,.feature-card button,.appointment-submit,.appointment-close,.property-actions button,.property-actions a:not(.property-secondary),.property-document-button,.action,.popbody a,.video-play,.vlog-play-icon{background:#F67321;color:#242021!important;border-radius:6px;box-shadow:none;font-weight:600}
.intro-cta button:hover,.intro-cta button:focus-visible,.broker-bubble button:hover,.broker-bubble a:hover,.feature-card button:hover,.appointment-submit:hover,.appointment-close:hover,.property-actions button:hover,.property-document-button:hover,.action:hover,.popbody a:hover,.video-play:hover{background:#F67321;outline:2px solid #242021;outline-offset:2px;box-shadow:none;transform:none}
.property-actions .property-secondary,.property-share-buttons a,.property-read-more{background:var(--warm);color:var(--ink);border:1px solid var(--line);box-shadow:none}
.property-document-button{min-height:48px}
.property-description p{font-size:17px;line-height:1.65;max-width:72ch}
.property-block>h2{font-size:28px;font-weight:600}
.property-agent p,.property-location-card p{color:var(--muted);font-size:16px}
.property-section-nav button{font-weight:600;color:var(--ink)}
.property-section-nav button:hover{color:var(--ink);text-decoration-color:var(--accent)}
.property-share-buttons a:hover{background:var(--warm);border-color:var(--ink)}
nav.contact-bar{background:#FFFFFF;border-top:2px solid var(--accent)}
nav.contact-bar .contact-links a{background:var(--warm);color:var(--ink);font-weight:600;border-radius:6px}
nav.contact-bar .contact-links a:first-child{background:var(--accent);color:var(--ink)}
nav.contact-bar .contact-links a:hover,nav.contact-bar .contact-links a:focus-visible{background:var(--warm);color:var(--ink);outline:2px solid var(--ink);outline-offset:1px}
.vlog-play:focus-visible{outline-color:var(--ink)}
.carousel-controls button:hover,.vlog-section .carousel-controls button:hover{background:var(--accent);color:var(--ink)}
@media(max-width:750px){body{font-size:16px}.intro,.hero{padding-top:24px;padding-bottom:24px}.intro p:not(.eyebrow){font-size:16px}.intro h1,.hero h1{font-size:32px}.below-map{gap:20px}.feature-copy,.quote-card,.bog-card .bog-copy{padding:24px}.feature-card h2{font-size:25px}.vlog-section{padding:22px 16px}header.top{padding-top:16px;padding-bottom:16px;gap:14px}header.top .intro-cta>span{font-size:18px}header.top .intro-cta button{font-size:13px}.property-description p{font-size:16px}}

/* Warmere afwisseling en een vaste header op beide pagina's. */
html{scroll-padding-top:calc(var(--site-header-height,160px) + 16px)}
body.has-fixed-header{padding-top:var(--site-header-height,160px)!important}
header.top{position:fixed!important;inset:0 0 auto;z-index:1100;background:#FFFFFF;border-bottom:1px solid #DED9D3!important}
body{background:#FBFAF7}
.intro,.hero{background:#F2EFEA;border-bottom:1px solid #DED9D3;margin-bottom:28px}
.shell,.layout,.silent-card{background:#FFFFFF}
.quote-card{background:#FFF2E7;border-top:3px solid #F67321}
.bog-card{background:#F2EFEA}
.vlog-section{background:#FFF2E7;border-top:3px solid #F67321}
.vlog-item{background:#FFFFFF}
.vlog-item:nth-child(3n+1) .vlog-visual{background:#F2EFEA}
.vlog-item:nth-child(3n+2) .vlog-visual{background:#FAE2CF}
.vlog-item:nth-child(3n) .vlog-visual{background:#F8F3ED}
.group{background:#F2EFEA}.group.app{background:#FFF2E7}
@media(max-width:750px){.intro,.hero{margin-bottom:20px}}

/* Waardebepaling: rustige, ondergeschikte actie in de header. */
header.top .intro-cta{flex:0 1 auto;max-width:360px;align-items:flex-end;gap:6px}
header.top .intro-cta>span{font-size:15px;font-weight:400;color:#625D5E;text-align:right}
header.top .intro-cta button{width:auto;min-height:36px;padding:8px 12px;background:#FFFFFF;color:#242021!important;border:1px solid #DED9D3;border-radius:6px;box-shadow:none;font-size:13px;font-weight:600;line-height:1.3}
header.top .intro-cta button:hover,header.top .intro-cta button:focus-visible{background:#F2EFEA;border-color:#F67321;outline:2px solid #242021;outline-offset:2px;transform:none;box-shadow:none}
@media(max-width:820px){header.top .intro-cta{flex:1 1 100%;max-width:100%;align-items:flex-start}header.top .intro-cta>span{text-align:left;font-size:14px}header.top .intro-cta button{font-size:12px;min-height:36px}}

/* Oranje accent op de compacte waardebepalingsknop. */
header.top .intro-cta button{background:#F67321;border-color:#F67321;color:#242021!important}
header.top .intro-cta button:hover,header.top .intro-cta button:focus-visible{background:#F67321;border-color:#F67321}

/* Gedeelde hoofd- en subnavigatie. */
header.top{flex-wrap:wrap!important;row-gap:12px}
.site-menu{flex:1 0 100%;display:flex;align-items:center;gap:24px;border-top:1px solid #DED9D3;padding-top:10px}
.site-menu a,.site-menu-group-toggle{color:#242021;text-decoration:none;font-size:15px;font-weight:600;line-height:1.4}
.site-menu-group{position:relative}
.site-menu-group-toggle{border:0;background:none;display:flex;align-items:center;gap:7px;padding:6px 0;cursor:pointer}
.site-menu-group-toggle svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5}
.site-menu a:hover,.site-menu a[aria-current=page],.has-current-page>.site-menu-group-toggle{text-decoration:underline;text-decoration-color:#F67321;text-decoration-thickness:2px;text-underline-offset:6px}
.site-submenu{position:absolute;top:calc(100% + 8px);left:-14px;min-width:245px;background:#FFFFFF;border:1px solid #DED9D3;border-top:3px solid #F67321;border-radius:6px;padding:8px;z-index:2}
.site-submenu[hidden]{display:none}.site-submenu a{display:block;padding:11px 12px;font-size:14px;border-radius:4px}.site-submenu a:hover{background:#F2EFEA}
.site-whatsapp-link{margin-left:auto}.site-menu-toggle{display:none}
.site-menu a:focus-visible,.site-menu-group-toggle:focus-visible,.site-menu-toggle:focus-visible{outline:2px solid #242021;outline-offset:4px}
.page-hero{background:#F2EFEA;border-bottom:1px solid #DED9D3;padding:32px clamp(20px,4vw,68px) 38px}
.page-container{max-width:1200px;margin:0 auto}.page-breadcrumb{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 24px;font-size:14px;color:#625D5E}.page-breadcrumb a{text-underline-offset:3px}
.page-hero h1{font-size:clamp(32px,4vw,48px);line-height:1.15;max-width:820px;margin:0 0 18px}.page-hero .page-lead{max-width:780px;font-size:20px;line-height:1.5;margin:0}
.page-content{padding:40px clamp(20px,4vw,68px) 48px}.page-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;align-items:start}
.page-reading section{margin-bottom:32px}.page-reading h2{font-size:26px;line-height:1.25;margin:0 0 14px}.page-reading p{max-width:72ch;margin:0 0 14px;font-size:17px;line-height:1.65}
.page-reading ul{padding-left:22px;line-height:1.7}.page-reading li{margin-bottom:8px}.page-aside{background:#FFF2E7;border:1px solid #DED9D3;border-top:3px solid #F67321;border-radius:8px;padding:24px}.page-aside h2{font-size:22px;margin:0 0 12px}
.page-button{display:inline-flex;justify-content:center;align-items:center;min-height:44px;padding:10px 16px;background:#F67321;color:#242021;text-decoration:none;font-weight:600;border:1px solid #F67321;border-radius:6px;margin:8px 8px 8px 0}.page-button.secondary{background:#FFFFFF;border-color:#DED9D3}.page-button:hover,.page-button:focus-visible{outline:2px solid #242021;outline-offset:2px}
.team-grid,.offer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:24px 0}.team-card,.offer-card{background:#FFFFFF;border:1px solid #DED9D3;border-radius:8px;overflow:hidden}.team-card img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center 25%}.team-card div,.offer-card-body{padding:20px}.team-card h2{font-size:23px;margin:0 0 6px}.team-role{color:#625D5E;font-size:15px;margin:0 0 10px}.offer-card img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}.offer-card h2{font-size:22px;margin:0 0 6px}.offer-card p{margin:6px 0}.offer-card .offer-price{font-weight:600;font-size:20px}
.offer-filters{display:flex;gap:16px;flex-wrap:wrap;background:#FFFFFF;border:1px solid #DED9D3;padding:20px;border-radius:8px;margin-bottom:24px}.offer-filters label{display:flex;flex-direction:column;gap:6px;font-weight:600}.offer-filters select,.offer-filters input{font-size:16px;min-height:44px;padding:8px 12px;border:1px solid #DED9D3;border-radius:6px;background:#FFFFFF;max-width:100%}.offer-count{color:#625D5E}.offer-empty{padding:24px;background:#F2EFEA;border-radius:6px}.contact-details{font-style:normal;line-height:1.7}.contact-actions{display:flex;flex-wrap:wrap;gap:8px}.page-review-note{margin:32px 0 0;padding:16px 20px;background:#F2EFEA;border-left:3px solid #F67321;color:#625D5E;font-size:14px}
@media(max-width:820px){.site-menu-toggle{display:flex;align-items:center;gap:12px;background:#F2EFEA;color:#242021;border:1px solid #DED9D3;border-radius:6px;padding:8px 14px;min-height:44px;cursor:pointer;font-weight:600;order:4}.site-menu{display:none;order:5;max-height:50dvh;overflow:auto;align-items:stretch;padding-top:12px;gap:8px}.site-menu.is-open{display:flex;flex-direction:column}.site-menu>a{padding:9px 8px}.site-menu-group-toggle{width:100%;justify-content:space-between;padding:10px 8px}.site-submenu{position:static;min-width:0;margin:0 8px 8px;background:#F2EFEA;border-top:0}.site-whatsapp-link{margin-left:0}.page-grid{grid-template-columns:1fr;gap:24px}.team-grid,.offer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.page-hero .page-lead{font-size:18px}}
@media(max-width:520px){.team-grid,.offer-grid{grid-template-columns:1fr}.page-content{padding-top:28px}.page-hero{padding-top:24px;padding-bottom:28px}.offer-filters{display:grid;grid-template-columns:1fr}.page-reading p{font-size:16px}}
/* Ruime fotoheaders en rustige afwisseling tussen paginaonderdelen. */
.page-hero{background:#F2EFEA;padding:28px 0 52px}
.page-hero-layout{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-top:26px}
.page-hero-copy h1{font-size:clamp(34px,4vw,58px);line-height:1.08;max-width:12ch;margin:14px 0 24px;font-weight:600}
.page-eyebrow{font-size:14px;letter-spacing:.06em;margin:0;color:#6d5140}
.page-hero-copy .page-lead{font-size:20px;line-height:1.6;max-width:48ch;margin-bottom:28px}
.page-hero-photo{margin:0;position:relative;min-width:0}
.page-hero-photo img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:2px}
.page-hero-photo figcaption{background:white;padding:12px 16px;font-size:14px}
.page-hero-photo figcaption a{color:#242021;text-decoration:none}
.page-hero-person img{object-position:center 25%;aspect-ratio:5/4}
.page-hero-actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.page-text-link{color:#242021;text-underline-offset:5px;font-weight:600}
.page-content{background:white;padding:64px 0 90px;scroll-margin-top:calc(var(--site-header-height,95px) + 20px)}
.page-aside{background:#FFF2E7;border:0;border-top:3px solid #F67321;padding:28px}
.page-reading section{margin-bottom:36px}.page-reading h2{font-size:28px;line-height:1.2}
.page-steps>section{padding:24px 28px 26px 78px;position:relative;background:#F8F6F2;margin-bottom:20px}
.page-steps>section:nth-child(even){background:#FFF2E7}
.page-step-number{position:absolute;top:26px;left:24px;color:#a6470d;font-size:22px;font-weight:600}
.page-steps h2{margin-top:0}.page-steps p{margin-bottom:0}
.team-grid{gap:28px}.team-card{background:#F8F6F2;border:0;box-shadow:none;border-radius:2px}.team-card:nth-child(even){background:#FFF2E7}
.team-card img{aspect-ratio:4/5;object-fit:cover;object-position:top}.team-role{color:#a6470d!important}
.offer-filters{background:#F2EFEA;padding:24px;align-items:end}.offer-card{box-shadow:none!important;border:1px solid #e4ded5!important}
@media(max-width:850px){.page-hero-layout{gap:28px}.page-hero-copy h1{font-size:40px}.page-hero-copy .page-lead{font-size:18px}}
@media(max-width:650px){.page-hero{padding-bottom:28px}.page-hero-layout{grid-template-columns:1fr;gap:28px}.page-hero-copy h1{max-width:18ch;font-size:38px}.page-hero-photo img{aspect-ratio:16/10}.page-content{padding:36px 0 75px}.page-steps>section{padding:22px 22px 22px 65px}.page-step-number{left:20px;top:23px}}

/* Koop en huur schuiven naast Woningaanbod en Bedrijfsaanbod uit. */
.site-menu-branch{position:relative}
.site-menu-branch-toggle{display:flex;align-items:center;justify-content:space-between;gap:18px;width:100%;border:0;border-radius:4px;background:none;color:#242021;text-align:left;padding:11px 12px;font:600 14px/1.4 'Source Sans 3',Arial,sans-serif;cursor:pointer}
.site-menu-branch-toggle:hover,.site-menu-branch-toggle[aria-expanded=true]{background:#F2EFEA}
.site-menu-branch-toggle:focus-visible{outline:2px solid #242021;outline-offset:-2px}
.site-menu-branch-toggle svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;flex:none}
.site-flyout{position:absolute;left:100%;top:0;min-width:160px;background:#fff;border:1px solid #DED9D3;border-top:3px solid #F67321;border-radius:6px;padding:8px;z-index:3;animation:menu-slide .16s ease-out}
.site-flyout[hidden]{display:none}
@keyframes menu-slide{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}
@media(max-width:820px){.site-flyout{position:static;min-width:0;margin:0 8px 8px 16px;border-top:0;background:#fff;animation:none}.site-menu-branch-toggle[aria-expanded=true] svg{transform:rotate(90deg)}}
@media(prefers-reduced-motion:reduce){.site-flyout{animation:none}}

/* Hyves en TikTok naast Instagram, met passende ruimte op mobiel. */
nav.contact-bar .contact-links{grid-template-columns:repeat(4,minmax(0,1fr)) repeat(4,44px)}
nav.contact-bar .contact-links button.social-link{display:flex;align-items:center;justify-content:center;min-height:48px;min-width:0;padding:7px;border:0;border-radius:8px;background:#F2EFEA;color:#242021;font:inherit}
nav.contact-bar .contact-links button.social-link svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
nav.contact-bar .contact-links .social-pending{opacity:.65;cursor:default}
@media(max-width:600px){nav.contact-bar .contact-links{grid-template-columns:repeat(4,minmax(0,1fr)) repeat(4,28px);gap:4px}nav.contact-bar .contact-links button.social-link{min-height:56px;padding:3px}nav.contact-bar .contact-links button.social-link svg{width:20px;height:20px}nav.contact-bar .contact-links a.social-link{padding:3px}}

/* Gedeelde ruimere navigatie op alle pagina’s. */

/* Rustige hoofdnavigatie op de homepage. */
header.top .site-menu{gap:6px;align-items:center;border-top:0;background:#F8F6F2;padding:6px 8px;border-radius:8px}
header.top .site-menu>a,header.top .site-menu-group-toggle{min-height:40px;padding:9px 14px;border-radius:6px;color:#242021;text-decoration:none;transition:background .15s ease,color .15s ease}
header.top .site-menu>a:hover,header.top .site-menu-group-toggle:hover,header.top .site-menu-group-toggle[aria-expanded=true]{background:#fff;color:#9b460e;text-decoration:none}
header.top .site-menu>a[aria-current=page],header.top .has-current-page>.site-menu-group-toggle{background:#fff;box-shadow:inset 0 -2px #F67321;text-decoration:none}
header.top .site-menu-group-toggle svg{width:14px;height:14px;color:#805e46;transition:transform .15s ease}
header.top .site-menu-group-toggle[aria-expanded=true] svg{transform:rotate(180deg)}
header.top .site-submenu{min-width:235px;top:calc(100% + 4px);left:0;padding:7px;background:#fff;border:1px solid #DED9D3;border-top:2px solid #F67321;border-radius:8px;box-shadow:0 12px 28px #24202112}
header.top .site-submenu>a,header.top .site-menu-branch-toggle{padding:12px 14px;border-radius:5px;font-size:14px}
header.top .site-submenu>a:hover,header.top .site-menu-branch-toggle:hover,header.top .site-menu-branch-toggle[aria-expanded=true]{background:#F8F6F2;text-decoration:none;color:#9b460e}
header.top .site-flyout{border-top:2px solid #F67321;border-radius:8px;box-shadow:0 12px 28px #24202112}
header.top .site-flyout a{padding:11px 14px;border-radius:5px;text-decoration:none}
header.top .site-flyout a:hover{background:#F8F6F2;color:#9b460e}
@media(max-width:820px){header.top .site-menu{align-items:stretch;gap:4px;padding:8px;background:#F8F6F2;border-radius:8px}header.top .site-menu>a,header.top .site-menu-group-toggle{width:100%;padding:11px 12px;min-height:44px}header.top .site-submenu{position:static;min-width:0;margin:4px 4px 8px;padding:5px;border-top:0;box-shadow:none}header.top .site-flyout{position:static;border-top:0;box-shadow:none}}
@media(prefers-reduced-motion:reduce){header.top .site-menu>a,header.top .site-menu-group-toggle,header.top .site-menu-group-toggle svg{transition:none}}


/* Geselecteerde en geopende menu-items volledig oranje. */
header.top .site-menu>a[aria-current=page],header.top .has-current-page>.site-menu-group-toggle,header.top .site-menu-group-toggle[aria-expanded=true],header.top .site-menu-branch-toggle[aria-expanded=true],header.top .site-submenu a[aria-current=page]{background:#F67321;color:#242021;box-shadow:none;text-decoration:none}
header.top .site-menu-group-toggle[aria-expanded=true] svg,header.top .has-current-page>.site-menu-group-toggle svg,header.top .site-menu-branch-toggle[aria-expanded=true] svg{color:#242021}


/* Ruimere navigatie voor betere leesbaarheid. */
header.top .site-menu{gap:8px;flex-wrap:wrap}
header.top .site-menu>a,header.top .site-menu-group-toggle{font-size:18px;min-height:50px;min-width:128px;padding:12px 24px;justify-content:center}
header.top .site-menu a,header.top .site-menu-branch-toggle{font-size:18px;line-height:1.45}
header.top .site-submenu{min-width:270px;top:100%;margin-top:0}
header.top .site-submenu>a,header.top .site-menu-branch-toggle,header.top .site-flyout a{min-height:48px;padding:12px 18px}
header.top .site-flyout{min-width:180px}
header.top .site-menu>a:hover,header.top .site-menu-group-toggle:hover,header.top .site-submenu a:hover,header.top .site-menu-branch-toggle:hover,header.top .site-flyout a:hover,header.top .site-menu a:focus-visible,header.top .site-menu-group-toggle:focus-visible,header.top .site-menu-branch-toggle:focus-visible{background:#F67321;color:#242021;text-decoration:none;box-shadow:none}
header.top .site-menu-group-toggle:hover svg{color:#242021}
@media(max-width:820px){header.top .site-menu>a,header.top .site-menu-group-toggle{width:100%;min-width:0;min-height:50px;padding:12px 18px;justify-content:space-between}header.top .site-submenu{min-width:0}}

.page-photo-credit{display:block;position:static;margin:24px clamp(20px,4vw,68px);font:12px/1.5 'Source Sans 3',Arial,sans-serif;color:#625D5E}.page-photo-credit a{color:inherit;text-underline-offset:2px}
