/*
Theme Name: DirectBeschikbaar
Theme URI: https://over.ddev.site
Author: DirectBeschikbaar
Description: Huurwoningensite in de opbouw van een lokale huurmarkt, met DirectBeschikbaar-kleuren, logo en favicon.
Version: 4.3.8
Requires at least: 6.8
Tested up to: 6.8
Text Domain: over-wonen
*/

:root {
	--font-heading: "Poppins", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	--font-body: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	--brand: #1255CE;
	--brand-strong: #0E46AB;
	--brand-ink: #0F172A;
	--accent: #1255CE;
	--success: #12A87A;
	--tint: #E7EEFA;
	--ink: #0F172A;
	--muted: #5B6577;
	--line: #E3E8F0;
	--mist: #F3F7FC;
	--bg: #FFFFFF;
	--radius: 8px;
	--container-max: 1180px;
	--container-pad: 24px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	color: var(--ink);
	background: var(--mist);
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.55;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, .price, .logo, .brand-mark, .listing-card__price, .offer__price, .detail-price-lg, .stat-card strong {
	font-family: var(--font-heading);
	font-weight: 700;
	color: var(--brand-ink);
	margin: 0 0 .5em;
	line-height: 1.15;
}
h1, .page-title, .hero h1 { font-weight: 800; }
p { margin: 0 0 1em; }
button, .btn, label {
	font-family: var(--font-body);
	font-weight: 600;
}
.text-muted, .muted { color: var(--muted); }

.sr-only,
.skiplinks__link { position: absolute; left: -9999px; }
.skiplinks__link:focus { left: 16px; top: 16px; z-index: 80; background: #fff; padding: 8px 12px; }

.container {
	width: 100%;
	max-width: var(--container-max);
	margin: 0 auto;
	padding-left: var(--container-pad);
	padding-right: var(--container-pad);
}
.muted { color: var(--muted); }
.eyebrow { margin: 0 0 .4rem; color: var(--muted); font-weight: 500; }
.section-title { font-size: clamp(2rem, 4vw, 3.2rem); }
.lead { color: var(--muted); font-size: 1.05rem; max-width: none; }

.site-header {
	background: var(--bg);
	border-bottom: 1px solid var(--line);
	position: sticky;
	top: 0;
	z-index: 40;
}

.header-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 108px;
	padding-top: 20px;
	padding-bottom: 20px;
}

.brand-mark { display: inline-flex; align-items: center; gap: 12px; margin: 0; }
.brand-mark__icon { width: 40px; height: 40px; border-radius: 50%; }
.brand-mark__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-mark__name { font-size: 1.35rem; font-weight: 800; letter-spacing: -.03em; }
.brand-mark__direct { color: var(--brand-ink); }
.brand-mark__beschikbaar { color: var(--brand); }
.brand-mark__tag { margin-top: 4px; font-size: 12px; font-weight: 500; color: var(--muted); }

.main-nav { display: flex; align-items: center; gap: 24px; }
.nav-link {
	padding: 12px 0;
	border-bottom: 2px solid transparent;
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 600;
}
.nav-link.is-current { border-color: var(--brand); font-weight: 600; }
.nav-link:hover { border-color: var(--brand); }

.header-actions { display: flex; align-items: center; gap: 10px; }
.nav-toggle {
	display: none;
	background: none;
	border: 0;
	font-size: 26px;
	cursor: pointer;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 0;
	padding: .7em 1.15em;
	font-family: var(--font-body);
	font-weight: 600;
	cursor: pointer;
	text-decoration: none !important;
}
.btn-pill { border-radius: 999px; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-strong); color: #fff; }
.btn-success { background: var(--success); color: #fff; }
.btn-success:hover { background: #0e8f68; color: #fff; }
.btn-outline { background: var(--bg); color: var(--ink); border: 1px solid var(--line); }
.btn-outline:hover { border-color: var(--brand); color: var(--brand); }
.btn-ghost {
	background: transparent;
	color: var(--ink);
	border: 1px solid var(--line);
}
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); }
.btn-block { width: 100%; }
.btn-block + .btn-block, p + .btn { margin-top: .8rem; }
.linkish {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	font-weight: 600;
	color: var(--brand);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.hero,
.hero--search {
	position: relative;
	height: 300px;
	min-height: 300px;
	max-height: 300px;
	overflow: hidden;
	padding: 0;
	background: #1b2430;
}
.hero img { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(15, 23, 42, .55), rgba(15, 23, 42, .12) 55%, transparent);
}
.hero__content {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	color: #fff;
	padding-top: 12px;
	padding-bottom: 12px;
}
.hero__kicker { margin: 0 0 .35rem; font-weight: 600; font-size: .85rem; }
.hero h1 { font-size: clamp(1.5rem, 3vw, 2.1rem); max-width: none; margin: 0 0 .7rem; color: #fff; }
.hero__lead { display: none; }
.hero .btn { width: auto; align-self: flex-start; }

.shortcuts { padding: 3rem 0 2.6rem; background: var(--bg); }
.shortcuts__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px 24px;
}
.shortcuts a { display: grid; justify-items: start; gap: 8px; }
.shortcuts__icon { color: var(--brand); }
.shortcuts strong { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 700; color: var(--brand-ink); }
.shortcuts span { color: var(--muted); font-size: .95rem; line-height: 1.45; }

.aanbod { padding: 1.2rem 0 4rem; background: var(--bg); }
.aanbod-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin: 1.2rem 0 1rem; }
.aanbod-meta__new { color: var(--success); font-weight: 600; }
.type-links { display: flex; flex-wrap: wrap; gap: 12px 18px; margin: 0; }
.type-links a { color: var(--brand); font-weight: 600; font-size: .92rem; }
.type-links a:hover { text-decoration: underline; }

.aanbod-layout {
	display: grid;
	grid-template-columns: 250px 1fr;
	gap: 36px;
	align-items: start;
}

.filters { position: sticky; top: 140px; }
.filters__head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 1rem; padding-bottom: .8rem; border-bottom: 1px solid var(--line); }
.filters__title { margin: 0; font-family: var(--font-heading); font-weight: 700; color: var(--brand-ink); }
.filters__count { color: var(--muted); font-size: .85rem; }
.filters label { display: block; margin: 0 0 1rem; }
.filters label span { display: block; margin-bottom: .35rem; font-size: .82rem; font-weight: 600; }
.filters select,
.filters__search-row input,
.sort-form select {
	width: 100%;
	height: 42px;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: var(--bg);
	padding: 0 10px;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 1rem;
}
.filters__search-row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 8px;
	align-items: stretch;
}
.filters__search-row .btn {
	width: 42px;
	height: 42px;
	padding: 0;
	border-radius: 6px;
}
.aanbod-search {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 10px;
	align-items: stretch;
	margin: 0 0 1.6rem;
	padding: 12px;
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: 12px;
}
.aanbod-search input[type="search"] {
	width: 100%;
	height: 48px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--mist);
	padding: 0 14px;
	font-family: var(--font-body);
	font-size: 1.05rem;
}
.aanbod-search input[type="search"]:focus {
	outline: 2px solid rgba(18, 85, 206, .28);
	border-color: var(--brand);
	background: #fff;
}
.aanbod-search .btn {
	height: 48px;
	min-width: 128px;
	padding: 0 1.15rem;
	border-radius: 8px;
	gap: 8px;
	white-space: nowrap;
}
.aanbod-search__clear {
	grid-column: 1 / -1;
	justify-self: start;
	color: var(--brand);
	font-weight: 600;
	font-size: .92rem;
}
.aanbod-search__clear:hover { text-decoration: underline; }
.filters__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.filters__types {
	margin: 0 0 1rem;
	padding: 0 4px 0 0;
	border: 0;
	max-height: 280px;
	overflow: auto;
}
.filters__types legend {
	margin-bottom: .35rem;
	font-size: .82rem;
	font-weight: 600;
}
.filters__check {
	display: flex !important;
	align-items: center;
	gap: 8px;
	margin: 0 0 .15rem !important;
	font-weight: 500;
	cursor: pointer;
}
.filters__check input { margin: 0; accent-color: var(--brand); }
.filters__check span { margin: 0 !important; font-size: .86rem; font-weight: 500; }

.aanbod-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 1.2rem; }
.aanbod-toolbar h3 { margin: 0; font-size: 1.15rem; }
.sort-form label { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--muted); }
.sort-form select { width: auto; min-width: 170px; }

.listing-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px 22px;
}
.listing-grid--3 { grid-template-columns: repeat(3, 1fr); }

.listing-card { display: block; height: 100%; color: inherit; }
.listing-card article { display: flex; flex-direction: column; height: 100%; }
.listing-card__media {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--mist);
	border-radius: 4px;
}
.listing-card__media img,
.listing-card__placeholder { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.listing-card:hover img { transform: scale(1.04); }
.listing-card__badges { display: flex; flex-wrap: wrap; gap: 8px; }
.listing-card__media .listing-card__badges { position: absolute; top: 12px; left: 12px; }
.listing-card__body { display: flex; flex-direction: column; flex: 1; padding: 1.1rem 0 0; }
.listing-card__city { margin: 0 0 .4rem; color: var(--muted); }
.listing-card__title { font-size: 1.35rem; margin: 0; font-family: var(--font-heading); font-weight: 700; color: var(--brand-ink); }
.listing-card:hover .listing-card__title { color: var(--brand-ink); }
.listing-card__meta,
.listing-card__date { display: flex; align-items: flex-start; gap: 6px; margin: .4rem 0 0; color: var(--muted); font-size: .95rem; }
.listing-card__facts { display: flex; flex-wrap: wrap; gap: 14px; margin-top: auto; padding-top: 1rem; color: var(--muted); font-size: .95rem; font-weight: 600; }
.listing-card__facts span { display: inline-flex; align-items: center; gap: 4px; }
.listing-card__footer { display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.listing-card__price { margin: 0; font-size: 1.5rem; font-weight: 800; color: var(--brand-ink); }
.listing-card__price span { display: block; margin-top: 2px; font-family: var(--font-body); font-size: .9rem; font-weight: 500; color: var(--muted); }
.listing-card__go {
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--brand);
	color: #fff;
	flex-shrink: 0;
}
.listing-card:hover .listing-card__go { background: var(--brand-strong); }

.badge { display: inline-flex; padding: 6px 12px; font-size: .875rem; font-weight: 600; font-family: var(--font-body); }
.badge-new { background: var(--tint); color: var(--brand-ink); }
.badge-type { background: var(--brand); color: #fff; }
.badge-ok { background: var(--success); color: #fff; }
.badge-unknown { background: #E8EEF6; color: var(--ink); }
.badge-gone { background: var(--muted); color: #fff; }
.listing-card--gone { opacity: .82; }
.listing-card--gone .listing-card__go { background: var(--muted); color: #fff; }
.gone-banner {
	background: #fff;
	border: 1px solid var(--line);
	border-left: 4px solid var(--muted);
	border-radius: 12px;
	padding: 1.1rem 1.3rem;
	margin: 0 0 1.6rem;
}
.gone-banner p { margin: .4rem 0 .8rem; color: var(--muted); }

.pagination { display: flex; flex-wrap: wrap; gap: 8px; margin: 2.2rem 0 0; }
.pagination .page-numbers {
	min-width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 12px;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-weight: 600;
}
.pagination .current { background: var(--brand); border-color: var(--brand); color: #fff; }

.empty { background: var(--mist); padding: 1.5rem; border-radius: var(--radius); }

.seo-block {
	padding: 3.2rem 0;
	background: var(--bg);
	border-top: 1px solid var(--line);
}
#faq.seo-block { background: var(--mist); }
.seo-links {
	padding: 3.2rem 0 4rem;
	border-top: 1px solid var(--line);
	background: var(--bg);
}
.seo-links__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px 40px;
}
.seo-links__title { font-family: var(--font-heading); font-weight: 700; color: var(--brand-ink); margin: 0 0 .75rem; }
.seo-links ul { list-style: none; margin: 0; padding: 0; }
.seo-links li { margin: 0 0 .45rem; }
.seo-links a { color: var(--brand); font-weight: 600; font-size: .95rem; }
.seo-links a:hover { text-decoration: underline; }
.footer-title--sub { margin-top: 1.4rem; }
.detail-kicker a { color: var(--brand); }
.aanbod .lead { margin: 0 0 1rem; }
/* Prose follows the site container; no nested narrower column */
.prose { width: 100%; max-width: none; }
.container.prose { max-width: var(--container-max); }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose a { color: var(--brand); font-weight: 600; }
.prose a:hover { text-decoration: underline; }
.prose a.btn { text-decoration: none; font-weight: 700; }
.prose a.btn-primary,
.prose a.btn-primary:hover { color: #fff; }
.prose a.btn-success,
.prose a.btn-success:hover { color: #fff; }
.prose h2 { font-size: clamp(1.5rem, 2.4vw, 1.85rem); margin: 0 0 1.1rem; }
.prose h3 { font-size: 1.2rem; margin: 2rem 0 .65rem; }
.prose p { margin: 0 0 1.1rem; font-size: 1.0625rem; line-height: 1.7; color: var(--ink); }
.prose ul { margin: 0 0 1.35rem; padding-left: 1.35rem; }
.prose li { margin: 0 0 .55rem; font-size: 1.0625rem; line-height: 1.6; }
.prose li:last-child { margin-bottom: 0; }
#faq.seo-block h3 { margin-top: 2rem; }
#faq.seo-block h3:first-of-type { margin-top: 1.5rem; }
.article-hero { width: 100%; border-radius: var(--radius); margin-bottom: 1.2rem; }

/* Only vertical padding — keep .container horizontal pad so content aligns with header */
.page-body {
	padding-top: 1.6rem;
	padding-bottom: 3.5rem;
}
.page-body--tight { padding-bottom: 1rem; }
.page-title { font-size: clamp(1.8rem, 3.5vw, 2.6rem); margin: 0 0 1.2rem; }
.faq-toc {
	background: var(--mist);
	border-radius: 12px;
	padding: 1.2rem 1.4rem;
	margin: 1.4rem 0 0;
	width: 100%;
}
.faq-toc__title { margin: 0 0 .7rem; font-family: var(--font-heading); font-weight: 700; }
.faq-toc ol { margin: 0; padding-left: 1.2rem; }
.faq-toc li { margin: 0 0 .35rem; }
.faq-toc a { color: var(--brand); font-weight: 600; }
.faq-toc span { color: var(--muted); font-size: .85rem; }
.faq-group { padding: 0 0 1.2rem; }
.faq-item { padding: .2rem 0 1rem; border-bottom: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 0; }
.faq-item h3 { margin-top: .8rem; }
.faq-group h2 { scroll-margin-top: 96px; }
.info-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 1.3rem 1.4rem;
	margin: 0 0 1.6rem;
	box-shadow: 0 10px 30px rgba(15, 23, 42, .06);
	width: 100%;
}

.crumb-bar { background: var(--tint); }
.crumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding-top: .85rem;
	padding-bottom: .85rem;
	font-size: .88rem;
	color: var(--muted);
}
.crumbs a:hover { color: var(--brand); }

.detail {
	padding-top: 2.2rem;
	padding-bottom: 5rem;
}
.detail-head { display: flex; justify-content: space-between; gap: 24px; align-items: flex-end; margin-bottom: 1.5rem; }
.detail-kicker { margin: 0 0 .5rem; font-weight: 600; }
.detail h1 { font-size: clamp(1.8rem, 4vw, 3rem); }
.detail-price-lg { margin: 0; font-size: 1.6rem; font-weight: 800; }
.detail-price-lg span { display: block; font-family: var(--font-body); font-size: 1rem; font-weight: 500; color: var(--muted); }
.detail-grid { display: grid; grid-template-columns: 1.35fr .75fr; gap: 32px; align-items: start; }
.detail-copy { margin: 1.8rem 0; }
.detail-pitch { font-size: 1.05rem; line-height: 1.65; max-width: 62ch; }
.detail-copy__note { margin: 0 0 .85rem; font-size: .92rem; }
.detail-copy--provider .detail-copy__feed { opacity: .92; }

.gallery__stage { position: relative; overflow: hidden; border-radius: 12px; background: #d7dde4; aspect-ratio: 16 / 11; }
.gallery__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.gallery__stage img.is-active { opacity: 1; }
.gallery__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
	font-size: 22px;
}
.gallery__nav--prev { left: 12px; }
.gallery__nav--next { right: 12px; }
.gallery__count {
	position: absolute;
	right: 12px;
	bottom: 12px;
	background: rgba(255,255,255,.92);
	border-radius: 999px;
	padding: 6px 10px;
	font-size: 12px;
	font-weight: 600;
}

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stats--2 { grid-template-columns: 1fr 1fr; margin: 1rem 0; }
.stat { background: var(--tint); padding: 14px; }
.stat span { display: block; color: var(--muted); font-size: 1rem; font-weight: 600; margin-bottom: .2rem; }
.stat strong { font-size: 1.15rem; }

.offer { position: sticky; top: 140px; }
.offer__box { background: var(--tint); padding: 1.3rem; border-radius: 10px; }
.offer h2 { font-size: 1.6rem; margin: .8rem 0 .3rem; }
.offer__price { font-size: 1.5rem; font-weight: 800; }
.offer__price span { font-family: var(--font-body); font-size: 1rem; font-weight: 500; color: var(--muted); }
.offer__provider { margin-top: 1rem; font-size: 1rem; }
.offer__provider strong { display: block; }
.offer__hint { margin-top: 1rem; font-size: .95rem; color: var(--muted); }

.related { margin-top: 3rem; }
.stat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 2rem; }
.stat-card { background: var(--mist); padding: 1.1rem; border-radius: 10px; }
.stat-card span { display: block; color: var(--muted); font-size: .85rem; }
.stat-card strong { font-size: 1.6rem; }

body.map-app-page .crumb-bar,
body.map-app-page .site-footer { display: none; }
body.map-app-page .site-header { z-index: 1100; }
.leaflet-tile-pane { filter: saturate(.45) contrast(1.04) brightness(1.03); }
.map-app {
	position: relative;
	height: calc(100vh - 146px);
	min-height: 560px;
	background: #d7e2ef;
}
.map-app__canvas { height: 100%; width: 100%; }
.map-app__canvas.is-loading { cursor: wait; }
.map-panel {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 500;
	width: min(340px, calc(100% - 32px));
	max-height: calc(100% - 32px);
	overflow: auto;
	background: rgba(255, 255, 255, .96);
	backdrop-filter: blur(10px);
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: 1.1rem 1.15rem 1.2rem;
	box-shadow: 0 18px 40px rgba(15, 23, 42, .14);
}
.map-panel h1 { font-size: 1.35rem; margin: 0 0 .35rem; }
.map-panel__count { margin: 0; font-size: .95rem; }
.map-panel__count strong { font-size: 1.35rem; color: var(--brand); }
.map-panel__status { margin: .2rem 0 .9rem; color: var(--muted); font-size: .82rem; }
.map-panel__filters { display: grid; gap: 10px; }
.map-panel__filters label span { display: block; margin-bottom: .25rem; font-size: .75rem; font-weight: 600; color: var(--muted); }
.map-panel__filters select,
.map-panel__filters input[type="search"] {
	width: 100%;
	height: 40px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--bg);
	padding: 0 10px;
	font-family: var(--font-body);
}
.map-search { display: flex; gap: 6px; }
.map-search input { flex: 1; min-width: 0; }
.map-search__go {
	width: 40px; height: 40px; border: 0; border-radius: 8px;
	background: var(--brand); color: #fff; cursor: pointer;
	display: grid; place-items: center; flex: 0 0 auto;
}
.map-search__go:hover { background: var(--brand-strong, #0E46AB); }
.map-panel__nearby { display: grid; gap: 8px; }
.map-panel__nearby .btn.is-busy { opacity: .7; pointer-events: none; }
.map-panel__hint { margin: .85rem 0 .4rem; color: var(--muted); font-size: .8rem; }
.map-panel a { color: var(--brand); font-weight: 600; }
.map-user-dot,
.map-user-marker span {
	display: inline-block;
	width: 14px; height: 14px;
	border-radius: 50%;
	background: #1255CE;
	border: 2px solid #fff;
	box-shadow: 0 0 0 3px rgba(18, 85, 206, .28);
}
.map-user-marker { background: transparent !important; border: 0 !important; }
.map-user-marker span { width: 16px; height: 16px; }
.map-legend { list-style: none; margin: .9rem 0 0; padding: .8rem 0 0; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.map-legend li { display: flex; align-items: center; gap: 10px; font-size: .82rem; color: var(--muted); }
.map-pin {
	display: inline-flex;
	width: 18px;
	height: 18px;
	border-radius: 50% 50% 50% 0;
	transform: rotate(-45deg);
	background: var(--brand);
	border: 2px solid #fff;
	box-shadow: 0 4px 10px rgba(18, 85, 206, .35);
}
.map-pin span {
	width: 6px;
	height: 6px;
	margin: auto;
	border-radius: 50%;
	background: #fff;
	transform: rotate(45deg);
}
.map-pin--confirmed { background: var(--success); box-shadow: 0 4px 10px rgba(18, 168, 122, .35); }
.map-pin--recent { background: var(--brand); }
.map-pin--unknown { background: var(--brand-ink); }
.leaflet-div-icon.map-pin {
	background: transparent;
	border: 0;
	width: 28px !important;
	height: 28px !important;
}
.leaflet-div-icon.map-pin span {
	position: absolute;
	left: 50%;
	top: 8px;
	width: 18px;
	height: 18px;
	margin: 0 0 0 -9px;
	border-radius: 50% 50% 50% 0;
	transform: rotate(-45deg);
	background: var(--brand);
	border: 2px solid #fff;
	box-shadow: 0 4px 10px rgba(18, 85, 206, .35);
}
.leaflet-div-icon.map-pin--confirmed span { background: var(--success); box-shadow: 0 4px 10px rgba(18, 168, 122, .35); }
.leaflet-div-icon.map-pin--unknown span { background: var(--brand-ink); }
.map-cluster,
.leaflet-div-icon.map-cluster {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
}
.map-cluster span,
.leaflet-marker-icon.map-cluster span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	min-height: 32px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--brand);
	color: #fff;
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: .78rem;
	border: 3px solid #fff;
	box-shadow: 0 8px 18px rgba(18, 85, 206, .28);
}
.map-cluster--md span { min-width: 40px; min-height: 40px; font-size: .85rem; }
.map-cluster--lg span { min-width: 48px; min-height: 48px; font-size: .95rem; background: var(--brand-strong); }
.map-cluster--xl span { min-width: 56px; min-height: 56px; font-size: 1rem; background: var(--brand-ink); }
.leaflet-container { font-family: var(--font-body); background: #d7e2ef; }
.leaflet-popup-content-wrapper {
	border-radius: 14px;
	box-shadow: 0 16px 32px rgba(15, 23, 42, .16);
	padding: 0;
}
.leaflet-popup-content { margin: 0; }
.map-popup { padding: 12px 14px 14px; min-width: 200px; }
.map-popup__city { margin: 0; color: var(--muted); font-size: .78rem; font-weight: 600; }
.map-popup__title { display: block; margin: .15rem 0 .35rem; font-size: 1rem; }
.map-popup__price { margin: 0 0 .5rem; font-family: var(--font-heading); font-weight: 800; color: var(--brand-ink); }
.map-popup .badge { margin-bottom: .7rem; }
.map-popup__btn { width: 100%; margin-top: .2rem; }
.leaflet-control-zoom a {
	color: var(--brand-ink) !important;
	border-color: var(--line) !important;
}
.leaflet-bar { border: 0 !important; box-shadow: 0 8px 20px rgba(15, 23, 42, .12) !important; }

.cookie-banner {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 80;
	background: var(--bg);
	border-top: 1px solid var(--line);
	box-shadow: 0 -8px 28px rgba(15, 23, 42, .1);
	padding: 1rem 0 calc(1rem + env(safe-area-inset-bottom, 0px));
}
.cookie-banner[hidden] { display: none !important; }
.cookie-banner__inner {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.25rem 2rem;
}
.cookie-banner__title {
	margin: 0 0 .35rem;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--brand-ink);
}
.cookie-banner__text {
	margin: 0;
	color: var(--muted);
	font-size: .92rem;
	line-height: 1.5;
	max-width: 68ch;
}
.cookie-banner__text a { color: var(--brand); font-weight: 600; }
.cookie-banner__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	flex: 0 0 auto;
}
.footer-cookie-link {
	margin-top: .75rem !important;
	font-size: .9rem;
}
.footer-cookie-link a { color: var(--brand); font-weight: 600; }
body.has-cookie-banner { padding-bottom: 7.5rem; }

.site-footer { background: var(--bg); border-top: 1px solid var(--line); padding: 2.8rem 0 2rem; }
.footer-grid { display: grid; grid-template-columns: 1.3fr repeat(3, .7fr); gap: 40px; }
.footer-kicker { color: var(--muted); margin: .6rem 0; }
.footer-title { font-family: var(--font-heading); font-weight: 700; color: var(--brand-ink); margin: 0 0 .6rem; }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin: 0 0 .4rem; }
.footer-links a:hover { color: var(--brand); }
.footer-note { margin-top: 2rem; color: var(--muted); font-size: .9rem; max-width: 70ch; }

.search-lead { margin: 0 0 1.4rem; }
.site-search {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: stretch;
	gap: 10px;
	width: 100%;
	max-width: 720px;
	margin: 0 0 2rem;
}
.site-search__input {
	width: 100%;
	height: 52px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--bg);
	padding: 0 16px;
	font-family: var(--font-body);
	font-size: 1.05rem;
	font-weight: 400;
	color: var(--ink);
}
.site-search__input:focus {
	outline: 2px solid rgba(18, 85, 206, .28);
	border-color: var(--brand);
}
.site-search__btn {
	height: 52px;
	min-width: 132px;
	padding: 0 1.25rem;
	border-radius: 10px;
	font-size: 1rem;
	gap: 8px;
	white-space: nowrap;
}

.hero-search {
	display: grid;
	grid-template-columns: 1.2fr .9fr .9fr auto;
	gap: 10px;
	align-items: end;
	width: min(960px, 100%);
	margin-top: 0;
	padding: 14px 14px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 12px 28px rgba(15, 23, 42, .18);
	color: var(--ink);
}
.hero-search label { display: flex; flex-direction: column; min-width: 0; }
.hero-search label span,
.alert-form label span { display: block; margin-bottom: .35rem; font-size: .8rem; font-weight: 600; color: var(--muted); }
.hero-search select,
.alert-form input,
.alert-form select {
	width: 100%;
	height: 44px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--bg);
	padding: 0 12px;
	font-family: var(--font-body);
	font-size: 1rem;
}
.hero-search .btn {
	height: 44px;
	padding: 0 1.2rem;
	align-self: end;
	font-size: 1rem;
	white-space: nowrap;
}
.listing-card__source { margin: .35rem 0 0; color: var(--muted); font-size: .95rem; }
.listing-card__footer { flex-wrap: wrap; }
.price-breakdown { margin: .35rem 0 0; font-size: 1rem; color: var(--muted); }
.price-breakdown strong { display: block; color: var(--brand-ink); font-family: var(--font-heading); }
.listing-card__footer .price-breakdown { flex-basis: 100%; order: 3; }
.filters__alert { margin: .4rem 0 0; font-size: .88rem; }
.filters__alert a { color: var(--brand); font-weight: 600; }
.home-more { margin: 2.2rem 0 0; }
.home-block { padding: 3.2rem 0; background: var(--bg); }
.home-block--mist { background: var(--mist); }
.home-block h2 { margin: 0 0 .6rem; }
.home-block .lead { margin: 0 0 1.4rem; }
.city-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 0.2rem; }
.city-card {
	display: flex;
	flex-direction: column;
	gap: 4px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 1rem 1.1rem;
}
.city-card:hover { border-color: var(--brand); }
.city-card span { color: var(--muted); font-size: .85rem; }
.alert-form { display: grid; gap: 12px; max-width: 560px; width: 100%; }
.notice-banner {
	background: var(--tint);
	border-radius: 12px;
	padding: 1rem 1.1rem;
	margin: 0 0 1.2rem;
	width: 100%;
}
.notice-banner--ok { background: #e4f6ef; }
.notice-banner--warn { background: #fdecec; }
.hp { position: absolute; left: -9999px; }

.aanbod--home { padding: 3.2rem 0; }

@media (max-width: 1100px) {
	.listing-grid { grid-template-columns: repeat(2, 1fr); }
	.shortcuts__grid,
	.stat-cards,
	.city-grid,
	.seo-links__grid,
	.hero-search { grid-template-columns: repeat(2, 1fr); }
	.hero-search .btn { grid-column: 1 / -1; }
	.main-nav { display: none; }
	.site-header.is-open .main-nav {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		background: #fff;
		padding: 12px 24px 20px;
		border-bottom: 1px solid var(--line);
		gap: 0;
	}
	.nav-toggle { display: inline-flex; }
}

@media (max-width: 900px) {
	.aanbod-layout,
	.detail-grid,
	.footer-grid,
	.detail-head { grid-template-columns: 1fr; }
	.filters, .offer { position: static; }
	.hero, .hero--search { height: 300px; min-height: 300px; max-height: 300px; }
	.header-bar { min-height: 78px; padding-top: 12px; padding-bottom: 12px; }
	.brand-mark__tag { display: none; }
	.map-app { height: calc(100vh - 116px); min-height: 480px; }
	.map-panel { top: auto; bottom: 12px; left: 12px; right: 12px; width: auto; max-height: 46%; }
}

@media (max-width: 760px) {
	.cookie-banner__inner { flex-direction: column; align-items: stretch; }
	.cookie-banner__actions .btn { flex: 1 1 auto; }
	body.has-cookie-banner { padding-bottom: 11rem; }
	.site-search {
		grid-template-columns: 1fr;
		max-width: none;
	}
	.site-search__btn { width: 100%; }
	.aanbod-search {
		grid-template-columns: 1fr;
	}
	.aanbod-search .btn { width: 100%; }
}

@media (max-width: 640px) {
	:root { --container-pad: 16px; }
	.seo-block,
	.home-block,
	.aanbod--home { padding: 2.4rem 0; }
	.seo-links { padding-top: 2.4rem; padding-bottom: 3rem; }
	.listing-grid,
	.listing-grid--3,
	.shortcuts__grid,
	.stat-cards,
	.stats,
	.stats--2,
	.city-grid,
	.hero-search,
	.seo-links__grid,
	.footer-grid { grid-template-columns: 1fr; }
	.header-actions .btn { padding: .55em .9em; font-size: .9rem; }
	body.map-app-page .map-app { height: calc(100vh - 78px); }
}