/* Projectpagina v4 (split) — Views/Projects/Detail.vbhtml
   Design: design-handoff/design_handoff_projectpaginas/README.md
   Alle klassen beginnen met pdv4- zodat niets met de bestaande site-CSS botst. */

@font-face { font-family: 'Avenir'; src: url('fonts/Avenir-Book.woff2') format('woff2'), url('fonts/Avenir-Book.woff') format('woff'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Avenir'; src: url('fonts/Avenir-Heavy.woff2') format('woff2'), url('fonts/Avenir-Heavy.woff') format('woff'); font-weight: 700; font-display: swap; }

:root {
    --pdv4-green: #00532D;
    --pdv4-green-hover: #006638;
    --pdv4-green-dark: #003D21;
    --pdv4-green-mid: #3D7A4E;
    --pdv4-green-soft: #7A9E6E;
    --pdv4-green-pastel: #D6E5CC;
    --pdv4-bg: #F2F5EF;
    --pdv4-white: #fff;
    --pdv4-ink: #2C3B2A;
    --pdv4-muted: #5a6b58;
    --pdv4-disabled: #8a948a;
    --pdv4-gold: #C9A96E;
    --pdv4-gold-hover: #B8935A;
    --pdv4-line: rgba(0, 83, 45, 0.10);
    --pdv4-line-soft: rgba(0, 83, 45, 0.08);
    --pdv4-line-strong: rgba(0, 83, 45, 0.15);
    --pdv4-error: #B3261E;
    --pdv4-serif: 'Playfair Display', 'Times New Roman', Georgia, serif;
    --pdv4-sans: 'Avenir', 'Open Sans', sans-serif;
    --pdv4-pad-y: clamp(48px, 6vw, 96px);
    --pdv4-pad-x: clamp(24px, 4vw, 80px);
    --pdv4-header-h: 120px;
    --pdv4-anchor-offset: 100px;
}

/* Geen globale scroll-behavior: smooth: dat maakt wiel-scrollen traag (zie custom.js). Ankers scrollen via het script. */
html { scroll-padding-top: var(--pdv4-anchor-offset); }
.pdv4-page { margin: 0; background: var(--pdv4-bg); font-family: var(--pdv4-sans); color: var(--pdv4-ink); -webkit-font-smoothing: antialiased; }
.pdv4-page *, .pdv4-page *::before, .pdv4-page *::after { box-sizing: border-box; }
.pdv4-page a { color: var(--pdv4-green); text-decoration: none; }
.pdv4-page a:hover { color: var(--pdv4-green-hover); }
.pdv4-page img { max-width: 100%; }
.pdv4-page [hidden] { display: none !important; }
.pdv4-page :focus-visible { outline: 2px solid var(--pdv4-green); outline-offset: 2px; }
.pdv4-skip { position: absolute; left: -9999px; top: 0; z-index: 2000; background: #fff; padding: 12px 16px; }
.pdv4-skip:focus { left: 8px; top: 8px; }

/* ───────── Split ───────── */
.pdv4-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.pdv4-content { min-width: 0; }
.pdv4-media { position: sticky; top: var(--pdv4-header-h); height: calc(100vh - var(--pdv4-header-h)); min-height: 520px; overflow: hidden; background: #1d2a1f; }
.pdv4-media__layers, .pdv4-layer { position: absolute; inset: 0; }
.pdv4-layer { opacity: 0; transition: opacity .6s ease; }
.pdv4-layer.is-active { opacity: 1; }
.pdv4-layer img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdv4-media__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 20, 10, .35) 0%, rgba(0, 20, 10, 0) 25%, rgba(0, 20, 10, 0) 50%, rgba(0, 20, 10, .82) 100%); pointer-events: none; }
.pdv4-media__top { position: absolute; left: 0; right: 0; top: 0; padding: 24px clamp(20px, 3vw, 48px); display: flex; align-items: center; justify-content: space-between; gap: 16px; pointer-events: none; }
.pdv4-media__label { font-size: 11px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: #fff; white-space: nowrap; }
.pdv4-media__bottom { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(24px, 3vw, 48px); display: flex; flex-direction: column; gap: 18px; color: #fff; pointer-events: none; }
.pdv4-badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--pdv4-ink); font-size: 12px; font-weight: 700; padding: 7px 13px; border-radius: 20px; white-space: nowrap; }
.pdv4-badge__dot { width: 8px; height: 8px; border-radius: 50%; background: #3B6D11; }
.pdv4-media__name { font-family: var(--pdv4-serif); font-size: clamp(34px, 3.6vw, 54px); line-height: 1.05; }
.pdv4-media__meta { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; flex-wrap: wrap; border-top: 1px solid rgba(255, 255, 255, .3); padding-top: 18px; }
.pdv4-media__line { font-size: 12px; color: rgba(255, 255, 255, .75); }
.pdv4-media__price { font-family: var(--pdv4-sans); font-weight: 700; font-size: 28px; white-space: nowrap; }
.pdv4-media__meta .pdv4-btn { pointer-events: auto; }

/* Placeholder voor ontbrekende beelden */
.pdv4-ph { width: 100%; height: 100%; min-height: 100%; background: linear-gradient(135deg, #dfe5da 0%, #cfd8c8 100%); }
.pdv4-media .pdv4-ph { background: linear-gradient(135deg, #2b3d2e 0%, #1d2a1f 100%); }

/* ───────── Secties ───────── */
.pdv4-sec { padding: var(--pdv4-pad-y) var(--pdv4-pad-x); }
.pdv4-sec--white { background: #fff; }
/* Contact: lichte groene tint zodat de sectie niet in de groene site-footer opgaat; het witte formulier
   komt als kaart naar voren. */
.pdv4-sec--contact { background: #DCE8D3; color: var(--pdv4-ink); border-top: 1px solid rgba(0, 83, 45, .18); }
.pdv4-sec--contact .pdv4-h2 { margin-bottom: 12px; }
.pdv4-sec--contact .pdv4-lead { font-size: 16px; max-width: 560px; margin-bottom: 28px; }
.pdv4-eyebrow { margin: 0 0 20px; font-size: 11px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--pdv4-green); }
.pdv4-eyebrow--gold { margin: 0; color: var(--pdv4-gold); }
.pdv4-sec > .pdv4-eyebrow + .pdv4-h2 { margin-top: -6px; }
.pdv4-h1 { margin: 0 0 24px; font-family: var(--pdv4-serif); font-weight: 500; font-size: clamp(30px, 5.2vw, 52px); line-height: 1.08; text-wrap: balance; overflow-wrap: break-word; }
.pdv4-page .pdv4-titleline .pdv4-titleline__h1 { display: inline; margin: 0; padding: 0; font: inherit; color: inherit; letter-spacing: inherit; text-transform: none; }
/* De komma na de titel is een CSS-teken: zelfde stijl als de h1, maar geen onderdeel van de h1-tekst en nooit los van het laatste woord */
.pdv4-titleline__h1.has-sub::after { content: ","; }
.pdv4-titleline__sub em { font-style: italic; font-weight: 400; color: var(--pdv4-green); }
.pdv4-nowrap { white-space: nowrap; }
.pdv4-h1 em { font-style: italic; font-weight: 400; color: var(--pdv4-green); }
.pdv4-h2 { margin: 0 0 20px; font-family: var(--pdv4-serif); font-weight: 500; font-size: clamp(30px, 3vw, 44px); line-height: 1.12; text-wrap: balance; }
.pdv4-h2--tight { margin-bottom: 12px; }
.pdv4-h2--flat { margin-bottom: 24px; line-height: 1.2; }
.pdv4-h3 { margin: 0; font-family: var(--pdv4-serif); font-weight: 500; line-height: 1.25; font-size: 26px; }
.pdv4-h3--inv { color: #fff; font-size: clamp(22px, 2vw, 28px); text-wrap: balance; }
.pdv4-h3--sm { font-size: 21px; line-height: 1.3; }
.pdv4-h3--md { font-size: 20px; margin-bottom: 6px; }
.pdv4-h3--lg { font-size: clamp(26px, 2.4vw, 34px); margin-bottom: 6px; }
.pdv4-h3--mt { margin: 64px 0 8px; }
.pdv4-h3--docs { margin: 56px 0 16px; font-size: clamp(22px, 2vw, 28px); }
.pdv4-lead { margin: 0 0 18px; font-size: 18px; line-height: 1.75; color: var(--pdv4-muted); max-width: 600px; }
.pdv4-lead-stack .pdv4-lead--m { margin-bottom: 18px; }
.pdv4-lead-stack { margin-bottom: 40px; }
.pdv4-lead--m { font-size: 17px; line-height: 1.8; margin-bottom: 40px; }
.pdv4-lead--s { font-size: 16px; line-height: 1.75; margin-bottom: 24px; }
.pdv4-sec .pdv4-text { margin: 0 0 16px; font-size: 16px; line-height: 1.8; color: var(--pdv4-muted); max-width: 600px; }
.pdv4-sec .pdv4-lead + .pdv4-text { margin-bottom: 40px; }
.pdv4-small { margin: 0 0 20px; font-size: 15px; line-height: 1.8; color: var(--pdv4-muted); max-width: 600px; }
.pdv4-small--tight { margin: 0; font-size: 14px; line-height: 1.6; }

/* Kerncijfers */
.pdv4-facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 28px; }
.pdv4-facts__item { border-top: 1px solid var(--pdv4-line-strong); padding: 14px 0 16px; }
.pdv4-facts dt { font-size: 12px; color: var(--pdv4-muted); }
.pdv4-facts dd { margin: 4px 0 0; font-family: var(--pdv4-serif); font-size: 21px; }

/* Knoppen */
.pdv4-actions { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; }
.pdv4-actions--tight { margin: 0; gap: 8px; }
.pdv4-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; border-radius: 4px; border: 1.5px solid transparent; font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; white-space: nowrap; text-decoration: none; line-height: 1.2; }
.pdv4-page .pdv4-btn--primary { background: var(--pdv4-green); color: #fff; border-color: var(--pdv4-green); }
.pdv4-page .pdv4-btn--primary:hover { background: var(--pdv4-green-hover); border-color: var(--pdv4-green-hover); color: #fff; }
.pdv4-page .pdv4-btn--outline { background: #fff; color: var(--pdv4-ink); border-color: var(--pdv4-ink); padding: 0 18px; }
.pdv4-page .pdv4-btn--outline:hover { background: var(--pdv4-green); border-color: var(--pdv4-green); color: #fff; }
.pdv4-page .pdv4-btn--gold { background: var(--pdv4-gold); color: var(--pdv4-ink); border-color: var(--pdv4-gold); }
.pdv4-page .pdv4-btn--gold:hover { background: var(--pdv4-gold-hover); border-color: var(--pdv4-gold-hover); color: var(--pdv4-ink); }
.pdv4-page .pdv4-btn--white { background: #fff; color: var(--pdv4-ink); border-color: #fff; padding: 15px 24px; box-shadow: 0 10px 30px rgba(0, 0, 0, .28); }
.pdv4-page .pdv4-btn--white:hover { background: var(--pdv4-gold); border-color: var(--pdv4-gold); color: var(--pdv4-ink); }
.pdv4-btn--xl { min-height: 54px; font-size: 13px; letter-spacing: 1.2px; }

/* Verhaal */
.pdv4-figures { display: flex; flex-direction: column; gap: 48px; }
.pdv4-figure { margin: 0; display: flex; flex-direction: column; gap: 18px; }
.pdv4-figure figcaption { font-size: 16px; line-height: 1.8; color: var(--pdv4-muted); max-width: 600px; }
.pdv4-figure__img { border-radius: 4px; overflow: hidden; background: #dfe5da; }
.pdv4-figure__img--32 { aspect-ratio: 3 / 2; }
.pdv4-figure__img--45 { aspect-ratio: 4 / 5; background: #EEF1EA; }
.pdv4-figure__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Groen CTA-blok / inline formulieren */
.pdv4-cta-green { margin-top: 56px; background: var(--pdv4-green); border-radius: 6px; padding: clamp(22px, 2.4vw, 32px); display: flex; flex-direction: column; gap: 14px; color: #fff; }
.pdv4-inline-form { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.pdv4-inline-form input { flex: 1 1 200px; min-width: 0; min-height: 48px; font: inherit; font-size: 15px; padding: 0 14px; border-radius: 4px; border: 1px solid transparent; color: var(--pdv4-ink); background: #fff; }
.pdv4-inline-form--light input { border-color: rgba(0, 83, 45, .22); }
.pdv4-inline-form .pdv4-form-error { flex: 1 1 100%; margin: 0; }
.pdv4-cta-green .pdv4-form-error { color: #ffd9d5; }
.pdv4-inline-done { margin: 4px 0 0; font-size: 15px; color: #fff; }
.pdv4-inline-done--green { color: var(--pdv4-green); margin: 0; }
.pdv4-form-error, .pdv4-field-error { color: var(--pdv4-error); font-size: 13px; font-style: normal; font-weight: 400; }
.pdv4-form-error { margin: 0; }

/* Architectuur */
.pdv4-quote { margin: 8px 0 48px; padding-left: 24px; border-left: 1px solid rgba(0, 83, 45, .3); max-width: 560px; }
.pdv4-quote p { margin: 0 0 8px; font-family: var(--pdv4-serif); font-style: italic; font-size: 21px; line-height: 1.5; }
.pdv4-quote footer { font-size: 13px; color: var(--pdv4-muted); }
.pdv4-materials { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 32px 20px; }
.pdv4-material { margin: 0; display: flex; flex-direction: column; gap: 16px; }
.pdv4-material figcaption { display: flex; flex-direction: column; gap: 8px; }
.pdv4-material figcaption p { margin: 0; font-size: 15px; line-height: 1.8; color: var(--pdv4-muted); }
.pdv4-tech { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 28px; }
.pdv4-tech__item { border-top: 1px solid var(--pdv4-line-strong); padding: 14px 0 16px; }
.pdv4-tech dt { font-size: 15px; font-weight: 700; color: var(--pdv4-ink); }
.pdv4-tech dd { margin: 4px 0 0; font-size: 14px; line-height: 1.65; color: var(--pdv4-muted); }
.pdv4-cta-row { margin-top: 40px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 20px 22px; border-radius: 6px; }
.pdv4-cta-row--card { background: #fff; border: 1px solid var(--pdv4-line); }
.pdv4-cta-row--soft { background: var(--pdv4-bg); margin-top: 32px; }
.pdv4-cta-row__text { min-width: 0; flex: 1 1 240px; }
.pdv4-cta-row__text strong { display: block; font-size: 16px; }
.pdv4-cta-row__text span { display: block; font-size: 14px; line-height: 1.6; color: var(--pdv4-muted); }

/* ───────── Woningen: lot-tabs + projectkaart ───────── */
.pdv4-lottabs { display: flex; gap: 8px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-bottom: 14px; padding-bottom: 2px; }
.pdv4-lottabs::-webkit-scrollbar { display: none; }
.pdv4-lottab { flex-shrink: 0; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 22px; border: 1px solid rgba(0, 83, 45, .2); background: #fff; color: var(--pdv4-ink); font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.pdv4-lottab[aria-selected="true"] { background: var(--pdv4-green); border-color: var(--pdv4-green); color: #fff; }
.pdv4-dot { width: 8px; height: 8px; border-radius: 50%; background: #b9c1b8; }
.pdv4-dot--avail { background: var(--pdv4-gold); }
.pdv4-mapwrap { position: relative; }
.pdv4-map { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; background: #cfd8c8; isolation: isolate; }
.pdv4-map__stage { position: absolute; inset: 0; transform-origin: 0 0; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.pdv4-map__stage > img, .pdv4-map__stage > .pdv4-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pdv4-map__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pdv4-zone { cursor: pointer; fill: #fff; fill-opacity: .18; stroke: rgba(255, 255, 255, .8); stroke-width: 1.5; vector-effect: non-scaling-stroke; transition: fill-opacity .25s; outline: none; }
/* .pdv4-zone.is-avail and .pdv4-zonelabel__tag.is-avail fill/background colors are set further
   down ("Overlays: beschikbaar = goud" block) — that block loads later and always wins at equal
   specificity, so the color declarations used to live here too were dead. Kept the behavior-only
   rules here, moved color to the one block that's actually in effect. */
.pdv4-zone:hover, .pdv4-zone:focus-visible { fill-opacity: .45; }
.pdv4-map.has-selection .pdv4-zone { fill-opacity: .08; }
.pdv4-map.has-selection .pdv4-zone.is-selected { fill-opacity: .5; stroke: #fff; stroke-width: 3; }
.pdv4-zonelabel { position: absolute; transform: translate(-50%, -50%) scale(var(--pdv4-inv, 1)); transition: transform .7s, opacity .3s; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pdv4-zonelabel__tag { background: #fff; color: var(--pdv4-ink); font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: 20px; box-shadow: 0 2px 10px rgba(0, 0, 0, .2); white-space: nowrap; }
.pdv4-zonelabel__sub { font-size: 11px; font-weight: 700; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .6); white-space: nowrap; }
.pdv4-map.has-selection .pdv4-zonelabel { opacity: 0; }
.pdv4-map.has-selection .pdv4-zonelabel.is-selected { opacity: 1; }
.pdv4-map.has-selection .pdv4-zonelabel.is-selected .pdv4-zonelabel__tag { background: var(--pdv4-green); color: #fff; }
.pdv4-map__hint { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); background: rgba(255, 255, 255, .94); color: var(--pdv4-ink); font-size: 13px; font-weight: 700; padding: 8px 14px; border-radius: 20px; box-shadow: 0 2px 10px rgba(0, 0, 0, .15); pointer-events: none; white-space: nowrap; }
.pdv4-map.has-selection .pdv4-map__hint { display: none; }
.pdv4-hint-touch { display: none; }
@media (max-width: 999px) { .pdv4-hint-desktop { display: none; } .pdv4-hint-touch { display: inline; } }

.pdv4-lotcard { position: absolute; left: 12px; right: 12px; bottom: 12px; max-width: 520px; background: #fff; border-radius: 8px; box-shadow: 0 12px 36px rgba(0, 0, 0, .25); padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; z-index: 2; }
.pdv4-lotcard__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.pdv4-lotcard__title { flex: 1; min-width: 0; }
.pdv4-lotcard__type { font-size: 12px; color: var(--pdv4-muted); white-space: nowrap; }
.pdv4-lotcard h3 { margin: 2px 0 0; font-family: var(--pdv4-serif); font-weight: 500; font-size: 28px; line-height: 1; }
.pdv4-lotcard__right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.pdv4-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 20px; white-space: nowrap; background: #EAF3DE; color: #3B6D11; }
.pdv4-pill > span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pdv4-pill--sold { background: #ECEEEA; color: #6b736a; font-size: 10px; letter-spacing: .8px; text-transform: uppercase; }
.pdv4-lotcard__close { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(0, 83, 45, .2); background: #fff; cursor: pointer; font-size: 18px; color: var(--pdv4-ink); display: flex; align-items: center; justify-content: center; }
.pdv4-lotcard__desc { margin: 0; font-size: 13px; line-height: 1.55; color: var(--pdv4-muted); }
.pdv4-lotcard dl { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pdv4-lotcard dt { font-size: 11px; color: var(--pdv4-muted); }
.pdv4-lotcard dd { margin: 2px 0 0; font-family: var(--pdv4-serif); font-size: 18px; white-space: nowrap; }
.pdv4-lotcard__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--pdv4-line); padding-top: 14px; }
.pdv4-lotcard__price { font-family: var(--pdv4-sans); font-weight: 700; font-size: 24px; color: var(--pdv4-green); white-space: nowrap; }
.pdv4-lotcard__price.is-sold { color: var(--pdv4-disabled); }
.pdv4-lotcard__btns { display: flex; gap: 8px; flex-wrap: nowrap; }
.pdv4-page .pdv4-lotcard__btns a { border-radius: 6px; font-size: 12px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; white-space: nowrap; }
.pdv4-page .pdv4-lotcard__btns .is-plan { border: 1.5px solid var(--pdv4-ink); color: var(--pdv4-ink); padding: 11px 14px; }
.pdv4-page .pdv4-lotcard__btns .is-main { background: var(--pdv4-green); color: #fff; padding: 12px 16px; }
.pdv4-page .pdv4-lotcard__btns .is-main:hover { background: var(--pdv4-green-hover); color: #fff; }

/* ───────── Prijslijst ───────── */
.pdv4-pricelist { margin-top: 72px; }
.pdv4-pricelist__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.pdv4-seg { display: flex; background: #fff; border: 1px solid var(--pdv4-line-strong); border-radius: 24px; padding: 3px; }
.pdv4-seg button { min-height: 40px; padding: 0 16px; border-radius: 20px; border: 0; background: transparent; color: var(--pdv4-ink); font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.pdv4-seg button[aria-checked="true"] { background: var(--pdv4-green); color: #fff; }
/* Tabel of kaartjes volgens de breedte van de prijslijst zelf (niet van het scherm): de kolom is maar half zo breed als het venster */
.pdv4-pricelist { container-type: inline-size; }
.pdv4-table { border-radius: 4px; overflow: hidden; border: 1px solid var(--pdv4-line); background: #fff; }
.pdv4-table__row { display: grid; grid-template-columns: minmax(0, 1fr) 78px 74px 68px 140px 84px; gap: 8px; align-items: center; min-height: 64px; padding: 12px 20px; border-top: 1px solid var(--pdv4-line-soft); background: #fff; }
.pdv4-table__row:hover { background: #FAFBF8; }
.pdv4-table__row--head { min-height: 52px; padding-top: 0; padding-bottom: 0; background: var(--pdv4-green); border-top: 0; }
.pdv4-table__row--head:hover { background: var(--pdv4-green); }
.pdv4-table__row--head span { font-size: 10px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: rgba(255, 255, 255, .75); }
.pdv4-table .r { text-align: right; }
.pdv4-table .c { text-align: center; display: flex; justify-content: center; }
.pdv4-table .num { font-size: 14px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pdv4-table__row.is-sold { background: #F5F7F2; color: #9aa39a; }
.pdv4-lotname { min-width: 0; }
.pdv4-lotname strong { display: block; font-size: 15px; color: var(--pdv4-green); }
.pdv4-lotname small { display: block; font-size: 12px; color: var(--pdv4-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdv4-bedrooms { display: flex; align-items: center; gap: 4px; }
.pdv4-bed { width: 7px; height: 7px; border-radius: 50%; border: 1px solid #9cbf8e; }
.pdv4-bed.is-on { background: var(--pdv4-green-mid); border-color: var(--pdv4-green-mid); }
.pdv4-bedrooms__n { font-size: 12px; color: var(--pdv4-muted); margin-left: 4px; }
.pdv4-pricecell { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.pdv4-priceline { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.pdv4-priceline__label { font-size: 11px; color: var(--pdv4-muted); }
.pdv4-priceline__v { font-family: var(--pdv4-sans); font-weight: 700; font-size: 19px; color: var(--pdv4-green); font-variant-numeric: tabular-nums; }
.pdv4-priceline__v.is-small { font-size: 16px; }
.pdv4-linkbtn { background: none; border: 0; padding: 2px 0; cursor: pointer; font-family: inherit; font-size: 11px; color: var(--pdv4-green); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.pdv4-linkbtn--l { font-size: 13px; padding: 4px 0; align-self: flex-start; }
.pdv4-page .pdv4-iconbtn { width: 36px; height: 36px; border-radius: 4px; border: 1px solid rgba(0, 83, 45, .25); background: #fff; display: flex; align-items: center; justify-content: center; color: var(--pdv4-green); }
.pdv4-page .pdv4-iconbtn:hover { border-color: var(--pdv4-green); background: var(--pdv4-bg); }
.pdv4-table__row[hidden], .pdv4-card[hidden] { display: none; }

.pdv4-cards { display: none; flex-direction: column; gap: 10px; }
.pdv4-card { background: #fff; border: 1px solid var(--pdv4-line); border-radius: 6px; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.pdv4-card.is-sold { background: #F7F9F5; color: #9aa39a; }
.pdv4-card__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pdv4-card h4 { margin: 0; font-family: var(--pdv4-serif); font-weight: 500; font-size: 22px; white-space: nowrap; }
.pdv4-card__price { font-size: 17px; font-weight: 700; white-space: nowrap; color: var(--pdv4-green); }
.pdv4-card__price.is-sold { color: var(--pdv4-disabled); }
.pdv4-card__sub { margin: -6px 0 0; font-size: 13px; color: var(--pdv4-muted); }
.pdv4-card__opts { display: flex; flex-direction: column; border-top: 1px solid rgba(0, 83, 45, .1); }
.pdv4-card__opts > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(0, 83, 45, .06); font-size: 14px; }
.pdv4-card__btns { display: flex; gap: 8px; }
.pdv4-page .pdv4-card__btns a { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 6px; border: 1px solid rgba(0, 83, 45, .25); color: var(--pdv4-ink); font-size: 13px; font-weight: 700; }

.pdv4-summary { margin: 12px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); background: #fff; border: 1px solid var(--pdv4-line); border-radius: 4px; overflow: hidden; }
.pdv4-summary > div { padding: 16px 18px; border-right: 1px solid var(--pdv4-line-soft); }
.pdv4-summary dt { font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--pdv4-muted); }
.pdv4-summary dd { margin: 6px 0 0; font-family: var(--pdv4-sans); font-weight: 700; font-size: 17px; line-height: 1.25; }
.pdv4-summary dd.s { margin: 2px 0 0; font-family: var(--pdv4-sans); font-size: 12px; color: var(--pdv4-muted); }

/* ───────── Maandlast ───────── */
.pdv4-calc { margin-top: 48px; border: 1px solid var(--pdv4-line); border-radius: 6px; overflow: hidden; background: #fff; }
.pdv4-calc__top { padding: clamp(20px, 2.2vw, 28px); display: flex; flex-direction: column; gap: 20px; }
.pdv4-calc__chips { display: flex; gap: 8px; flex-wrap: wrap; }
.pdv4-chip { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 52px; padding: 8px 14px; border-radius: 6px; border: 1.5px solid rgba(0, 83, 45, .2); background: #fff; font-family: inherit; cursor: pointer; text-align: left; }
.pdv4-chip span { font-size: 14px; font-weight: 700; color: var(--pdv4-ink); white-space: nowrap; }
.pdv4-chip small { font-size: 12px; color: var(--pdv4-muted); white-space: nowrap; }
.pdv4-chip[aria-checked="true"] { background: var(--pdv4-bg); border-color: var(--pdv4-green); }
.pdv4-calc__sliders { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px 24px; }
.pdv4-calc__sliders label { display: flex; flex-direction: column; gap: 8px; }
.pdv4-calc__sliders label > span { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--pdv4-muted); }
.pdv4-calc__sliders strong { color: var(--pdv4-ink); font-variant-numeric: tabular-nums; }
.pdv4-calc input[type=range] { accent-color: var(--pdv4-green); width: 100%; }
.pdv4-years { display: flex; gap: 6px; max-width: 420px; margin-top: 8px; }
.pdv4-years button { flex: 1; min-height: 44px; border-radius: 4px; border: 1px solid var(--pdv4-green); background: #fff; color: var(--pdv4-green); font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.pdv4-years button[aria-pressed="true"] { background: var(--pdv4-green); color: #fff; }
.pdv4-calc__result { background: var(--pdv4-green); color: #fff; padding: clamp(20px, 2.2vw, 28px); display: flex; flex-direction: column; gap: 18px; }
.pdv4-calc__resulttop { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.pdv4-calc__label { font-size: 13px; color: rgba(255, 255, 255, .8); margin-bottom: 6px; }
.pdv4-calc__amount { font-family: var(--pdv4-sans); font-weight: 700; font-size: clamp(44px, 4.4vw, 64px); line-height: 1; font-variant-numeric: tabular-nums; }
.pdv4-calc__loan { font-size: 13px; line-height: 1.6; color: rgba(255, 255, 255, .85); text-align: right; }
.pdv4-calc__cta { display: flex; gap: 12px 16px; flex-wrap: wrap; align-items: center; border-top: 1px solid rgba(255, 255, 255, .2); padding-top: 18px; }
.pdv4-calc__cta > span { font-size: 13px; color: rgba(255, 255, 255, .85); }
.pdv4-calc__disclaimer { margin: 0; padding: 12px clamp(20px, 2.2vw, 28px); font-size: 12px; line-height: 1.6; color: var(--pdv4-muted); background: #F7F9F5; }

/* Documenten */
.pdv4-docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 250px)); gap: 10px; }
.pdv4-page .pdv4-doc { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: #fff; border: 1px solid var(--pdv4-line); border-radius: 6px; color: var(--pdv4-ink); }
.pdv4-page .pdv4-doc:hover { border-color: var(--pdv4-green); color: var(--pdv4-ink); }
.pdv4-doc__icon { width: 40px; height: 48px; flex-shrink: 0; border-radius: 3px; background: var(--pdv4-bg); border: 1px solid var(--pdv4-line-strong); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; font-size: 9px; font-weight: 900; letter-spacing: .5px; color: var(--pdv4-green); }
.pdv4-doc__text { flex: 1; min-width: 0; }
.pdv4-doc__text strong { display: block; font-size: 15px; }
.pdv4-doc__text small { display: block; font-size: 12px; color: var(--pdv4-muted); }
.pdv4-doc__dl { font-size: 18px; color: var(--pdv4-green); }

/* ───────── Ligging ───────── */
.pdv4-guide { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px 32px; margin-bottom: 36px; }
.pdv4-guide p { margin: 0; font-size: 15px; line-height: 1.75; color: var(--pdv4-muted); }
.pdv4-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.pdv4-togglechip { min-height: 40px; padding: 0 15px; border-radius: 20px; border: 1px solid rgba(0, 83, 45, .2); background: #fff; color: var(--pdv4-ink); font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.pdv4-togglechip[aria-pressed="true"] { background: var(--pdv4-green); border-color: var(--pdv4-green); color: #fff; }
.pdv4-leaflet { position: relative; height: 440px; border-radius: 4px; overflow: hidden; border: 1px solid var(--pdv4-line); isolation: isolate; }
.pdv4-leaflet > div { position: absolute; inset: 0; }
.pdv4-leaflet .leaflet-tile-pane { filter: grayscale(.85) sepia(.12) brightness(1.04) contrast(.92); }
.pdv4-leaflet .leaflet-container { font-family: var(--pdv4-sans); background: #EEF1EA; }
.pdv4-travel { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-top: 20px; }
.pdv4-travel > div { background: var(--pdv4-bg); border-radius: 4px; padding: 14px 16px; }
.pdv4-travel span { display: block; font-size: 12px; color: var(--pdv4-muted); }
.pdv4-travel strong { display: block; font-family: var(--pdv4-serif); font-weight: 400; font-size: 22px; }

/* ───────── Bouwfase ───────── */
.pdv4-phase__head { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; flex-wrap: wrap; margin-bottom: 16px; }
.pdv4-phase__head .pdv4-h2 { margin: 0; }
.pdv4-phase__pct { font-family: var(--pdv4-serif); font-size: 44px; color: var(--pdv4-green); }
.pdv4-progress { height: 6px; background: var(--pdv4-green-pastel); border-radius: 3px; overflow: hidden; margin-bottom: 28px; }
.pdv4-progress > div { height: 100%; background: var(--pdv4-green); }
.pdv4-timeline { list-style: none; margin: 0; padding: 0; }
.pdv4-timeline li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(0, 83, 45, .1); color: var(--pdv4-ink); font-size: 15px; }
.pdv4-timeline li.is-now { color: var(--pdv4-green); font-weight: 700; }
.pdv4-timeline li.is-next { color: var(--pdv4-disabled); }
.pdv4-timeline__date { font-size: 14px; font-weight: 400; }
.pdv4-cta-card { margin-top: 32px; padding: 20px 22px; background: #fff; border: 1px solid var(--pdv4-line); border-radius: 6px; display: flex; flex-direction: column; gap: 12px; }
.pdv4-cta-card strong { display: block; font-size: 16px; }
.pdv4-cta-card > div > span { display: block; font-size: 14px; line-height: 1.6; color: var(--pdv4-muted); }

/* ───────── Kopen / vragen ───────── */
.pdv4-steps { list-style: none; margin: 0; padding: 0; }
.pdv4-steps li { display: grid; grid-template-columns: 18px 1fr; gap: 16px; padding: 12px 0; }
.pdv4-steps__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--pdv4-green); margin-top: 8px; }
.pdv4-steps strong, .pdv4-steps span { font-size: 15px; }
.pdv4-steps li span { color: var(--pdv4-muted); }
.pdv4-cta-line { margin-top: 28px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--pdv4-line-strong); padding-top: 24px; }
.pdv4-cta-line--plain { border-top: 0; padding-top: 0; }
.pdv4-cta-line p { margin: 0; font-size: 16px; color: var(--pdv4-ink); }
.pdv4-faq { border-top: 1px solid var(--pdv4-line-strong); }
.pdv4-faq__item { border-bottom: 1px solid var(--pdv4-line-strong); }
.pdv4-faq__item h3 { margin: 0; font-weight: 400; }
.pdv4-faq__item button { width: 100%; display: flex; justify-content: space-between; gap: 20px; padding: 20px 0; background: none; border: 0; cursor: pointer; text-align: left; font-family: var(--pdv4-serif); font-size: 19px; color: var(--pdv4-ink); }
.pdv4-faq__sign { color: var(--pdv4-green); }
.pdv4-faq__item p { margin: 0 0 22px; font-size: 15px; line-height: 1.8; color: var(--pdv4-muted); }

/* ───────── Contact ───────── */
.pdv4-form { background: #fff; border: 1px solid rgba(0, 83, 45, .14); box-shadow: 0 18px 44px rgba(0, 61, 33, .14); border-radius: 6px; padding: clamp(20px, 2.4vw, 32px); display: flex; flex-direction: column; gap: 18px; color: var(--pdv4-ink); }
.pdv4-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.pdv4-form legend { font-size: 13px; font-weight: 700; margin-bottom: 8px; padding: 0; border: 0; width: auto; }
.pdv4-form__chips { display: flex; gap: 8px; flex-wrap: wrap; }
.pdv4-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pdv4-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; }
.pdv4-form input:not([type=checkbox]), .pdv4-form textarea { min-height: 50px; font: inherit; font-size: 15px; font-weight: 400; padding: 0 14px; border: 1px solid rgba(0, 83, 45, .22); border-radius: 4px; color: var(--pdv4-ink); background: #fff; width: 100%; }
.pdv4-form textarea { padding: 12px 14px; resize: vertical; }
.pdv4-form input.has-error, .pdv4-form textarea.has-error { border-color: var(--pdv4-error); }
.pdv4-opt { font-weight: 400; color: var(--pdv4-muted); }
.pdv4-form .pdv4-check { flex-direction: row; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--pdv4-muted); font-weight: 400; cursor: pointer; }
.pdv4-check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--pdv4-green); flex-shrink: 0; }
.pdv4-field-error--block { margin: -8px 0 0; }
/* Bevestiging na verzenden: tweekoloms kaartje (links bedankt, rechts "wat er nu gebeurt"); de rest van het contactblok verdwijnt */
.pdv4-sec--contact.is-sent > .pdv4-h2, .pdv4-sec--contact.is-sent > .pdv4-lead, .pdv4-sec--contact.is-sent > .pdv4-call { display: none; }
.pdv4-page .pdv4-thanks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); background: #fff; border-radius: 6px; overflow: hidden; color: var(--pdv4-ink); box-shadow: 0 18px 44px rgba(0, 61, 33, .14); }
.pdv4-page .pdv4-thanks[hidden] { display: none; }
.pdv4-thanks:focus { outline: none; }
.pdv4-thanks__main { padding: clamp(24px, 4vw, 48px); display: flex; flex-direction: column; align-items: flex-start; }
.pdv4-thanks__next { padding: clamp(24px, 4vw, 48px); background: var(--pdv4-bg); display: flex; flex-direction: column; }
.pdv4-thanks__check { width: 48px; height: 48px; border-radius: 50%; background: #E6EFDC; color: var(--pdv4-green); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.pdv4-page .pdv4-thanks__eyebrow { margin: 0 0 14px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--pdv4-green); }
.pdv4-page .pdv4-thanks__title { margin: 0 0 16px; font-family: var(--pdv4-serif); font-weight: 500; font-size: clamp(26px, 3vw, 38px); line-height: 1.15; text-transform: none; letter-spacing: 0; color: var(--pdv4-ink); }
.pdv4-page .pdv4-thanks__text { margin: 0; font-size: 15px; line-height: 1.75; color: var(--pdv4-muted); }
.pdv4-thanks__steps { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.pdv4-thanks__step { position: relative; padding-left: 22px; display: flex; flex-direction: column; gap: 3px; }
.pdv4-thanks__step::before { content: ""; position: absolute; left: 0; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--pdv4-green); }
.pdv4-thanks__step--2::before { background: var(--pdv4-green-soft); }
.pdv4-thanks__step--3::before { background: var(--pdv4-gold); }
.pdv4-thanks__step strong { font-size: 15px; font-weight: 700; color: var(--pdv4-ink); }
.pdv4-thanks__step span { font-size: 14px; line-height: 1.6; color: var(--pdv4-muted); }
.pdv4-page .pdv4-thanks__more { margin-top: auto; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pdv4-green); text-decoration: none; }
.pdv4-page .pdv4-thanks__more:hover { color: var(--pdv4-green-hover); text-decoration: underline; }
.pdv4-call { margin: 20px 0 0; font-size: 14px; color: var(--pdv4-muted); }
.pdv4-page .pdv4-call a { color: var(--pdv4-green); font-weight: 700; }

/* Mobiele CTA-balk */
.pdv4-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1250; background: #fff; border-top: 1px solid var(--pdv4-line-strong); box-shadow: 0 -6px 20px rgba(0, 0, 0, .08); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 10px; }
.pdv4-bar__text { flex: 1; min-width: 0; font-size: 13px; line-height: 1.3; color: var(--pdv4-ink); }
.pdv4-bar__text strong { display: block; }
.pdv4-bar__text span { color: var(--pdv4-muted); }
.pdv4-page .pdv4-bar__call { width: 48px; height: 48px; flex-shrink: 0; border-radius: 4px; border: 1.5px solid var(--pdv4-green); display: flex; align-items: center; justify-content: center; color: var(--pdv4-green); font-size: 18px; }

/* Leaflet-pins (gebouwd door het script) */
.pdv4-pin { width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 2px solid var(--pdv4-green); color: var(--pdv4-green); font: 900 12px var(--pdv4-sans); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.pdv4-pin--project { width: 52px; height: 52px; background: var(--pdv4-green); border: 3px solid var(--pdv4-gold); box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
.pdv4-pin--project img { width: 30px; height: 30px; object-fit: contain; }


/* Het cookie-icoon (linksonder, vast) mag niet over de teksten op het beeld vallen: extra ruimte links. */
@media (min-width: 1000px) {
    .pdv4-media__bottom { padding-left: 96px; }
}

/* ───────── Responsive ───────── */
@media (max-width: 999px) {
    .pdv4-split { grid-template-columns: minmax(0, 1fr); }
    /* eerste zicht: het beeld loopt tot onderaan het scherm (de balk onderaan verschijnt pas na het scrollen) */
    .pdv4-media { position: relative; top: 0; height: calc(100vh - var(--pdv4-header-h)); height: calc(100svh - var(--pdv4-header-h)); }
    /* inhoud op het beeld boven het cookie-icoon (linksonder, 52px) */
    .pdv4-media__bottom { padding-bottom: 88px; }
    .pdv4-page { padding-bottom: 72px; }
}
@container (max-width: 660px) {
    .pdv4-table { display: none; }
    .pdv4-cards { display: flex; }
}
@supports not (container-type: inline-size) {
    @media (max-width: 1279px) { .pdv4-table { display: none; } .pdv4-cards { display: flex; } }
}
@media (max-width: 639px) {
    .pdv4-form__grid { grid-template-columns: minmax(0, 1fr); }
    .pdv4-lotcard { position: fixed; left: 0; right: 0; bottom: 0; max-width: none; z-index: 1300; border-radius: 16px 16px 0 0; box-shadow: 0 -10px 40px rgba(0, 0, 0, .25); padding: 22px 20px calc(18px + env(safe-area-inset-bottom)); }
    .pdv4-lotcard::before { content: ''; position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: var(--pdv4-green-pastel); }
    .pdv4-lotcard__desc { display: none; }
    .pdv4-map { aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) {
    .pdv4-layer, .pdv4-map__stage, .pdv4-zonelabel { transition: none; }
}

/* Thema-resets: de site-CSS zet koppen o.a. in hoofdletters en geeft ze marges */
.pdv4-page h1, .pdv4-page h2, .pdv4-page h3, .pdv4-page h4 { text-transform: none; letter-spacing: normal; text-shadow: none; }
.pdv4-page p { text-transform: none; }
.pdv4-page p.pdv4-eyebrow { text-transform: uppercase; letter-spacing: 1.8px; }

/* "De woningen" na een sectie met dezelfde achtergrond: dezelfde 72px afstand als boven "Prijslijst",
   i.p.v. de bottom- + top-padding van twee secties die samen ~190px geven. */
.pdv4-sec:not(.pdv4-sec--white):not(.pdv4-sec--contact):has(+ .pdv4-sec--homes) { padding-bottom: 0; }
.pdv4-sec:not(.pdv4-sec--white):not(.pdv4-sec--contact) + .pdv4-sec--homes { padding-top: 72px; }

/* Projectkaart: de verhouding blijft altijd 4:3 (zoals in de CPMCore-editor), anders valt de omtrek op de foto naast de juiste plek. */
.pdv4-map { min-height: 0; }

/* Overlays: beschikbaar = goud (zelfde kleur als de lottabs' .pdv4-dot--avail), verkocht = neutraal
   grijs (--pdv4-disabled, al een bestaand token). Was eerst lichtgroen/grijs met losse hex-waarden,
   buiten het palet en in tegenspraak met de goud-markering elders op de pagina — zie kritiek. */
.pdv4-zone { fill: var(--pdv4-disabled); fill-opacity: .38; stroke: rgba(255, 255, 255, .75); stroke-width: 1.5; }
.pdv4-zone:hover, .pdv4-zone:focus-visible { fill-opacity: .5; }
.pdv4-zone.is-avail { fill: var(--pdv4-gold); fill-opacity: .42; stroke: var(--pdv4-gold-hover); }
.pdv4-zone.is-avail:hover, .pdv4-zone.is-avail:focus-visible { fill: var(--pdv4-green); fill-opacity: .6; stroke: #fff; }
.pdv4-map.has-selection .pdv4-zone { fill-opacity: .1; }
.pdv4-map.has-selection .pdv4-zone.is-selected { fill-opacity: .6; stroke: #fff; stroke-width: 3; }
.pdv4-map.has-selection .pdv4-zone.is-avail.is-selected { fill: var(--pdv4-green); }
.pdv4-map.has-selection .pdv4-zone.is-selected:not(.is-avail) { fill: var(--pdv4-ink); }
.pdv4-zonelabel__tag.is-avail { background: var(--pdv4-gold); color: var(--pdv4-ink); }

.pdv4-quote + .pdv4-quote { margin-top: -24px; }

/* ── "Alle woonprojecten": terugknop op de foto (donker, wit bij hover) en boven de eyebrow (groene rand, groen bij hover) ── */
.pdv4-page .pdv4-back { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 10px; border-radius: 20px; border: 1px solid rgba(0, 83, 45, .22); background: #fff; color: var(--pdv4-green); font-size: 13px; font-weight: 700; line-height: 1; white-space: nowrap; transition: background-color .18s ease, color .18s ease, border-color .18s ease; }
.pdv4-page .pdv4-back:hover, .pdv4-page .pdv4-back:focus-visible { background: var(--pdv4-bg); border-color: var(--pdv4-green); color: var(--pdv4-green); }
.pdv4-page .pdv4-back svg { flex-shrink: 0; transition: transform .18s ease; }
.pdv4-page .pdv4-back:hover svg { transform: translateX(-2px); }
.pdv4-page .pdv4-back--photo { pointer-events: auto; border-color: rgba(255, 255, 255, .45); background: rgba(0, 0, 0, .35); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pdv4-page .pdv4-back--photo:hover, .pdv4-page .pdv4-back--photo:focus-visible { background: #fff; border-color: #fff; color: var(--pdv4-ink); }
.pdv4-crumbs { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.pdv4-crumbs__list { display: flex; flex-wrap: wrap; gap: 0; list-style: none; margin: 0; padding: 0; font-size: 13px; color: var(--pdv4-muted); }
.pdv4-crumbs__list li + li::before { content: "/"; margin: 0 8px; color: var(--pdv4-muted); opacity: .7; }
.pdv4-crumbs__list li[aria-current] { color: var(--pdv4-ink); }
.pdv4-page .pdv4-crumbs__list a { color: var(--pdv4-muted); }
.pdv4-page .pdv4-crumbs__list a:hover { color: var(--pdv4-green); text-decoration: underline; }
@media (max-width: 639px) { .pdv4-media__label { display: none; } }

/* Brochure verstuurd: groen kader toont de bevestiging i.p.v. het e-mailveld (geen download- of afspraakknop) */
.pdv4-bro-done { display: flex; align-items: flex-start; gap: 14px; margin-top: 4px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .2); }
.pdv4-bro-done[hidden] { display: none; }
.pdv4-bro-done__icon { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; background: var(--pdv4-gold); color: var(--pdv4-ink); display: flex; align-items: center; justify-content: center; }
.pdv4-bro-done__text strong { display: block; font-size: 15px; color: #fff; margin-bottom: 4px; }
.pdv4-bro-done__text p { margin: 0; font-size: 13px; line-height: 1.6; color: rgba(255, 255, 255, .9); }
.pdv4-bro-done__text b { color: #fff; }
.pdv4-page .pdv4-bro-done__reset { background: none; border: 0; padding: 0; font: inherit; color: #fff; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.pdv4-page .pdv4-bro-done__reset:hover { color: var(--pdv4-gold); }

/* Quote bij Architectuur: tekst in #2C3B2A (het site-thema kleurt blockquotes anders) */
.pdv4-page .pdv4-quote, .pdv4-page .pdv4-quote p { color: #2C3B2A; }

/* Brochure-blok: tekst links, gouden knop rechts */
.pdv4-bro__ask { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-top: 6px; }
.pdv4-bro__ask[hidden] { display: none; }
.pdv4-bro__ask p { margin: 0; font-size: 13px; color: rgba(255, 255, 255, .92); }
.pdv4-page .pdv4-cta-green .pdv4-h3 { max-width: 560px; }

/* Brochure-modal */
.pdv4-modal { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.pdv4-modal[hidden] { display: none; }
.pdv4-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 20, 10, .55); }
.pdv4-modal__dialog { position: relative; width: min(504px, 100%); max-height: calc(100dvh - 32px); overflow: auto; background: #fff; border-radius: 8px; padding: 32px clamp(20px, 5vw, 36px) 28px; box-shadow: 0 24px 64px rgba(0, 0, 0, .35); color: var(--pdv4-ink); }
.pdv4-modal__close { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(0, 83, 45, .2); background: #fff; color: var(--pdv4-ink); font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.pdv4-modal__close:hover { border-color: var(--pdv4-green); background: var(--pdv4-bg); }
.pdv4-modal__dialog .pdv4-eyebrow { margin: 0 52px 10px 0; font-size: 11px; }
.pdv4-modal__title { margin: 0 52px 12px 0; font-family: var(--pdv4-serif); font-weight: 500; font-size: clamp(26px, 5vw, 32px); line-height: 1.15; color: var(--pdv4-ink); text-transform: none; }
.pdv4-modal__intro { margin: 0 0 22px; font-size: 14px; line-height: 1.6; color: var(--pdv4-muted); }
.pdv4-modal__form { display: flex; flex-direction: column; gap: 14px; }
.pdv4-modal__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.pdv4-modal__form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; color: var(--pdv4-ink); }
.pdv4-modal__form input:not([type=hidden]) { min-height: 50px; font: inherit; font-size: 15px; font-weight: 400; padding: 0 14px; border: 1px solid rgba(0, 83, 45, .22); border-radius: 4px; color: var(--pdv4-ink); background: #fff; width: 100%; }
.pdv4-modal__form input:focus { outline: none; border-color: var(--pdv4-green); box-shadow: 0 0 0 3px rgba(0, 83, 45, .15); }
.pdv4-modal__form input[aria-invalid="true"] { border-color: var(--pdv4-error); }
.pdv4-modal__form input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(179, 38, 30, .15); }
.pdv4-req { color: #B3261E; font-weight: 700; }
.pdv4-modal__note { margin: 0; font-size: 12px; color: var(--pdv4-muted); }
.pdv4-modal__privacy { margin: 0; font-size: 13px; line-height: 1.55; color: var(--pdv4-muted); }
.pdv4-page .pdv4-modal__privacy a { color: var(--pdv4-green); text-decoration: underline; text-underline-offset: 2px; }
.pdv4-modal__submit { width: 100%; margin-top: 4px; }
.pdv4-modal__submit[disabled] { opacity: .7; cursor: progress; }
.pdv4-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 520px) { .pdv4-modal__grid { grid-template-columns: minmax(0, 1fr); } }

/* Projectbrochure + grondplan + documenten: op gsm volledig scherm i.p.v. een gecentreerd paneel. */
@media (max-width: 639px) {
    #pdv4BroModal, #pdv4PlanModal, #pdv4DocModal { padding: 0; align-items: stretch; }
    #pdv4BroModal .pdv4-modal__dialog, #pdv4PlanModal .pdv4-modal__dialog, #pdv4DocModal .pdv4-modal__dialog {
        width: 100%; max-width: none; height: 100dvh; max-height: none; border-radius: 0;
        padding: max(24px, calc(14px + env(safe-area-inset-top))) calc(20px + env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left));
    }
    #pdv4BroModal .pdv4-modal__close, #pdv4PlanModal .pdv4-modal__close, #pdv4DocModal .pdv4-modal__close {
        top: calc(14px + env(safe-area-inset-top));
        right: calc(14px + env(safe-area-inset-right));
    }
}

/* Modal-correcties: label + sterretje op één regel, ronde sluitknop (het thema overschrijft knoppen), scrollen niet doorgeven */
.pdv4-modal__form label { gap: 6px; }
.pdv4-modal__form .pdv4-lbl { display: block; line-height: 1.3; }
.pdv4-page .pdv4-modal__close { border-radius: 50% !important; width: 44px; height: 44px; min-height: 0; padding: 0 !important; background: #fff !important; color: var(--pdv4-ink) !important; border: 1px solid rgba(0, 83, 45, .2) !important; box-shadow: none; }
.pdv4-page .pdv4-modal__close:hover { border-color: var(--pdv4-green) !important; background: var(--pdv4-bg) !important; }
.pdv4-page .pdv4-modal__submit, .pdv4-page .pdv4-modal__submit:disabled { background: var(--pdv4-green) !important; color: #fff !important; border-color: var(--pdv4-green) !important; }
.pdv4-page .pdv4-modal__submit:hover:not(:disabled) { background: var(--pdv4-green-hover) !important; border-color: var(--pdv4-green-hover) !important; }
.pdv4-modal__dialog { overscroll-behavior: contain; }
.pdv4-modal__backdrop { touch-action: none; }

/* Afgeronde pills/schakelaars: het thema zet knoppen op vierkant, dus expliciet afdwingen */
.pdv4-page .pdv4-lottab { border-radius: 22px !important; }
.pdv4-page .pdv4-seg { border-radius: 24px !important; overflow: hidden; }
.pdv4-page .pdv4-seg button { border-radius: 20px !important; }
.pdv4-page .pdv4-togglechip { border-radius: 20px !important; }
.pdv4-page .pdv4-pill, .pdv4-page .pdv4-badge { border-radius: 20px !important; }
.pdv4-pill--ask { background: #EAF3DE; color: #3B6D11; font-size: 10px; letter-spacing: .8px; text-transform: uppercase; }

/* Plan-modal: bevestiging in plaats van het formulier */
.pdv4-modal__done { display: flex; flex-direction: column; gap: 10px; padding: 8px 0 4px; }
.pdv4-modal__done strong { font-family: var(--pdv4-serif); font-weight: 500; font-size: 24px; }
.pdv4-modal__done p { margin: 0 0 6px; font-size: 14px; line-height: 1.6; color: var(--pdv4-muted); }
.pdv4-modal__done .pdv4-btn { align-self: flex-start; }
.pdv4-modal__dialog.is-done .pdv4-modal__form, .pdv4-modal__dialog.is-done .pdv4-modal__intro, .pdv4-modal__dialog.is-done .pdv4-modal__title { display: none; }
.pdv4-page .pdv4-modal__done .pdv4-btn--primary { background: var(--pdv4-green) !important; color: #fff !important; border-color: var(--pdv4-green) !important; }

/* Sluitknop van het lotkaartje: rond (het thema zet knoppen op vierkant) */
.pdv4-page .pdv4-lotcard__close { border-radius: 50% !important; width: 44px; height: 44px; min-height: 0; padding: 0 !important; background: #fff !important; color: var(--pdv4-ink) !important; border: 1px solid rgba(0, 83, 45, .2) !important; box-shadow: none; }
.pdv4-page .pdv4-lotcard__close:hover { border-color: var(--pdv4-green) !important; background: var(--pdv4-bg) !important; }

/* Opeenvolgende secties met dezelfde achtergrond (comfort, documenten): één gewone tussenruimte i.p.v. onder- + bovenpadding bij elkaar */
.pdv4-sec:not(.pdv4-sec--white):not(.pdv4-sec--contact):has(+ .pdv4-sec--flush) { padding-bottom: 0; }
.pdv4-sec:not(.pdv4-sec--white):not(.pdv4-sec--contact) + .pdv4-sec--flush { padding-top: 64px; }
.pdv4-sec--flush .pdv4-tech { margin-bottom: 0; }

/* Contact: primaire kleur; het formulier blijft een wit kaartje. De strook "Ontdek onze andere woonprojecten" eronder scheidt het blok van de footer. */
.pdv4-sec--contact { background: var(--pdv4-green); color: #fff; border-top: 0; }
.pdv4-sec--contact .pdv4-h2 { color: #fff; }
.pdv4-sec--contact .pdv4-lead { color: rgba(255, 255, 255, .85); }
.pdv4-page .pdv4-sec--contact .pdv4-call { color: rgba(255, 255, 255, .85); }
.pdv4-page .pdv4-sec--contact .pdv4-call a { color: #fff; font-weight: 700; }
.pdv4-page .pdv4-sec--contact .pdv4-call a:hover { color: var(--pdv4-gold); }

.pdv4-more { background: #fff; border-top: 1px solid var(--pdv4-line); padding: clamp(28px, 4vw, 48px) 0; }
.pdv4-more__inner { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; }
.pdv4-page .pdv4-more__eyebrow { margin: 0 0 6px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--pdv4-green); }
.pdv4-page .pdv4-more__title { margin: 0; font-family: var(--pdv4-serif); font-weight: 500; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.2; color: var(--pdv4-ink); text-transform: none; }

/* FAQ-antwoord met opmaak (paragrafen, lijsten, links) */
.pdv4-faq__answer { margin: 0 0 22px; font-size: 15px; line-height: 1.8; color: var(--pdv4-muted); }
.pdv4-faq__answer p { margin: 0 0 10px; }
.pdv4-faq__answer p:last-child, .pdv4-faq__answer ul:last-child, .pdv4-faq__answer ol:last-child { margin-bottom: 0; }
.pdv4-faq__answer ul, .pdv4-faq__answer ol { margin: 0 0 10px; padding-left: 22px; }
.pdv4-page .pdv4-faq__answer a { color: var(--pdv4-green); text-decoration: underline; text-underline-offset: 2px; }
.pdv4-faq__answer[hidden] { display: none; }

/* "Bel ons" staat enkel op gsm bij het blokje "Wil je weten of … bij je past?" */
@media (min-width: 640px) { .pdv4-page .pdv4-only-mobile { display: none; } }

/* Getekend downloadicoon naast de tekst (prijslijst, kaartjes, documenten) */
.pdv4-ico { flex-shrink: 0; margin-right: 6px; vertical-align: -2px; }
.pdv4-doc__dl { display: inline-flex; }
.pdv4-doc__dl .pdv4-ico { margin: 0; }
.pdv4-lotcard:focus { outline: none; }
.pdv4-lotcard__close { display: inline-flex; align-items: center; justify-content: center; }

/* Cookie-icoon (linksonder) schuift boven de mobiele balk i.p.v. over de tekst ervan */
@media (max-width: 999px) {
    body:has(.pdv4-bar:not([hidden])) .cc-fab { bottom: calc(106px + env(safe-area-inset-bottom)); }
}
@media (min-width: 1000px) {
    .pdv4-page .pdv4-h1 { font-size: clamp(30px, 3.4vw, 56px); }
}

/* ───────── Gsm: knoppen op volle breedte, schuif en ruimte onder foto's ───────── */
@media (max-width: 639px) {
    /* alle actieknoppen over de volledige breedte */
    .pdv4-page .pdv4-actions { flex-direction: column; align-items: stretch; }
    .pdv4-page .pdv4-actions .pdv4-btn,
    .pdv4-page .pdv4-media__meta .pdv4-btn,
    .pdv4-page .pdv4-bro__ask .pdv4-btn,
    .pdv4-page .pdv4-cta-row > .pdv4-btn,
    .pdv4-page .pdv4-cta-line > .pdv4-btn,
    .pdv4-page .pdv4-more .pdv4-btn { width: 100%; flex: 1 1 100%; }
    .pdv4-page .pdv4-more__inner { flex-direction: column; align-items: stretch; }

    /* "Bel ons" en "Stel je vraag" naast elkaar, elk de helft */
    .pdv4-page .pdv4-cta-row .pdv4-actions { flex-direction: row; width: 100%; }
    .pdv4-page .pdv4-cta-row .pdv4-actions .pdv4-btn { flex: 1 1 0; width: auto; min-width: 0; padding: 0 12px; }

    /* de schuif "Beschikbaar / Alle woningen" over de volle breedte */
    .pdv4-pricelist__head { flex-direction: column; align-items: stretch; }
    .pdv4-page .pdv4-seg { width: 100%; }
    .pdv4-page .pdv4-seg button { flex: 1 1 0; min-height: 44px; padding: 0 10px; }

    /* ruimte tussen foto en titel bij de materialen (architectuur) */
    .pdv4-materials { gap: 44px 20px; }
    .pdv4-material { gap: 22px; }

    /* Eerste beeld (hero): lichtere kleursetting bovenaan op gsm — de terugknop en badge zitten
       vaak op het lichtste deel van de foto (lucht/gevel), niet op de donkere onderverloop waar
       prijs/knop onderaan wél tegen afsteken. Terugknop wit, badge groen, titel donker, de
       "Informatie aanvragen"-knop goud i.p.v. wit. Prijs/meta onderaan blijven wit (staan op het
       donkere deel van .pdv4-media__shade). */
    .pdv4-page .pdv4-media__top .pdv4-back--photo {
        background: #fff; border-color: rgba(0, 83, 45, .22); color: var(--pdv4-green);
        -webkit-backdrop-filter: none; backdrop-filter: none;
    }
    .pdv4-page .pdv4-media__top .pdv4-back--photo:hover,
    .pdv4-page .pdv4-media__top .pdv4-back--photo:focus-visible {
        background: var(--pdv4-bg); border-color: var(--pdv4-green); color: var(--pdv4-green);
    }
    .pdv4-page .pdv4-badge { background: var(--pdv4-green); color: #fff; }
    .pdv4-page .pdv4-badge__dot { background: var(--pdv4-gold); }
    .pdv4-page .pdv4-media__name { color: var(--pdv4-ink); }
    .pdv4-page .pdv4-media__meta .pdv4-btn--white {
        background: var(--pdv4-gold); color: var(--pdv4-ink); border-color: var(--pdv4-gold);
    }
    .pdv4-page .pdv4-media__meta .pdv4-btn--white:hover {
        background: var(--pdv4-gold-hover); border-color: var(--pdv4-gold-hover); color: var(--pdv4-ink);
    }

    /* Badge + titel verhuizen naar net onder de terugknop i.p.v. onderaan de foto (prijs/knop blijven
       wel onderaan). .pdv4-media__bottom (badge/titel/meta, flex-column, gap:18px) blijft gewoon
       position:absolute zoals voorheen (géén display:contents — dat zette alle inhoud zonder eigen
       "position" terug naar de stapel-laag ONDER de foto, want .pdv4-media__layers/__shade zijn zelf
       position:absolute en die wint altijd van niet-gepositioneerde inhoud, los van DOM-volgorde).
       I.p.v. enkel bottom:0 (hoogte = inhoud, dus onderaan opgestapeld) krijgt de box nu ook top:
       ze beslaat zo de volledige foto onder de terugknop-rij. Badge+titel blijven daardoor gewoon
       bovenaan in de flex-kolom; margin-top:auto op .pdv4-media__meta duwt enkel prijs/knop naar
       de onderkant van diezelfde box. */
    .pdv4-page .pdv4-media__bottom {
        top: 88px; /* hoogte van .pdv4-media__top: 24px+24px padding + 40px terugknop */
        padding-top: 0;
    }
    .pdv4-page .pdv4-media__meta { margin-top: auto; }
}

/* Tekstvak bij een locatie op het liggingsplan: leesbare maat (Leaflet staat standaard op 12-13px) */
.pdv4-leaflet .leaflet-popup-content-wrapper { border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 61, 33, .25); }
.pdv4-leaflet .leaflet-popup-content { margin: 16px 40px 16px 18px; font-family: var(--pdv4-sans); line-height: 1.4; color: var(--pdv4-ink); }
.pdv4-leaflet .pdv4-pop__name { display: block; font-size: 17px; font-weight: 700; line-height: 1.3; margin: 0 0 4px; color: var(--pdv4-ink); }
.pdv4-leaflet .pdv4-pop__meta { display: block; font-size: 15px; line-height: 1.45; color: var(--pdv4-muted); }
.pdv4-leaflet .leaflet-container a.leaflet-popup-close-button { width: 36px; height: 36px; font-size: 22px; line-height: 36px; color: var(--pdv4-muted); }
@media (min-width: 1000px) {
    .pdv4-leaflet .pdv4-pop__name { font-size: 18px; }
    .pdv4-leaflet .pdv4-pop__meta { font-size: 16px; }
}