/* ==========================================================================
   INHOUDSOPGAVE — alle maten in px, overgenomen uit Figma Dev Mode.
   Tokens (kleuren, typografie, radius, spacing) staan in tokens.css.
   1.  Basis
   2.  Typografie
   3.  Buttons
   4.  Formulieren
   5.  Header (inc/header.php)
   6.  Footer (inc/footer.php)
   7.  Woning card (inc/kaarten.php)
   9.  Pagina — Home (content/home.php)
   10. Pagina — Huis kopen / aanbod (content/huis-kopen.php)
   11. Pagina — Woning detail (content/woning.php, content/sneak-preview-detail.php)
   11d. Casuspagina V2 — verkoopverhaal (content/casus.php)
   12. Pagina — Inloggen & Aanmelden (content/inloggen.php, content/aanmelden.php)
   13. Account-omgeving (content/account.php, inloggegevens.php, notificaties.php, favorieten.php, woonwensen.php)
   14. Slider — Owl Carousel (js/owl/functies.js)
   15. Makelaarskant — /voormakelaars (inc/makelaars.php, content/voormakelaars/)
   16. Cookiebanner (inc/cookie-banner.php)
   18. Pagina — Onze makelaars en kantoorprofiel (content/onze-makelaars.php, content/onze-makelaars-detail.php)
   19. Pagina — Contact (content/contact.php)
   20. Pagina — Over Powerhuys (content/over-powerhuys.php)
   21. Stappenformulier — Waardebepaling en Mijn Huys toevoegen (content/waardebepaling.php)
   22. Pagina — Blog (content/blog.php)
   23. Mijn Huys (content/mijn-huys.php, content/mijn-huys-toevoegen.php)
   24. App — kop en onderbalk (inc/header.php, inc/app-navigatie.php)
   ========================================================================== */

/* === 1. Basis ============================================================= */

/* overflow-x: clip — 100vw is incl. scrollbalk bij secties die tot de schermrand doorlopen */
body { font-family: var(--font-primary); background-color: var(--bg-default); margin: 0 32px; overflow-x: clip;}

@media (max-width: 767.98px) {
    body { margin: 0;}
    .ph-contactpagina-intro h1 { font-size: var(--display-xl-size); line-height: var(--display-xl-line);}
}

/* Patroonachtergrond (Figma "Group 2" + "Ellipse 52") — gebruikt door de hero op Home en
   Inloggen/Aanmelden. Breekt uit de .container en loopt achter de header door; het
   patroon begint pas onder de menubalk (16px boven de onderkant van --header-height)
   en vervaagt onderaan naar zand. Patroon 2023px breed; 40% dekking zit in de SVG. */
.ph-pattern-bg { position: relative; isolation: isolate; margin: calc(-1 * var(--header-height)) calc(50% - 50vw) 0; padding-top: var(--header-height); background-image: linear-gradient(180deg, rgba(var(--tertiary-rgb), 0) 84.62%, var(--bg-default) 100%), url('/assets/backgrounds/background-gold.svg'); background-repeat: no-repeat; background-position: top center, center calc(var(--header-height) - 16px); background-size: 100% 100%, max(2023px, 100%) auto;}
.ph-pattern-bg::after { content: ""; position: absolute; z-index: -1; left: 50%; bottom: 53px; width: min(980px, 100%); height: 196px; transform: translateX(-50%); border-radius: 50%; background: rgba(var(--secondary-rgb), .4); filter: blur(150px); pointer-events: none;}

/* === 2. Typografie (Figma Typography; mobiele maten via tokens.css) ======= */

h1, h2, h3, h4, h5, h6 { font-family: var(--font-primary); color: var(--text-default);}

/* Display — smal (wdth 75) */
.text-display-xl, .text-display-lg, .text-display-md, .text-display-sm, .text-display-xs { font-family: var(--font-display); font-stretch: var(--font-display-stretch); font-weight: var(--font-weight-display);}
.text-display-xl { font-size: var(--display-xl-size); line-height: var(--display-xl-line);}
.text-display-lg { font-size: var(--display-lg-size); line-height: var(--display-lg-line);}
.text-display-md { font-size: var(--display-md-size); line-height: var(--display-md-line);}
.text-display-sm { font-size: var(--display-sm-size); line-height: var(--display-sm-line);}
.text-display-xs { font-size: var(--display-xs-size); line-height: var(--display-xs-line);}

/* Headline (h1-h3) en Title (h4-h6) */
h1 { font-size: var(--headline-lg-size); line-height: var(--headline-lg-line); font-weight: var(--font-weight-headline);}
h2 { font-size: var(--headline-md-size); line-height: var(--headline-md-line); font-weight: var(--font-weight-headline);}
h3 { font-size: var(--headline-sm-size); line-height: var(--headline-sm-line); font-weight: var(--font-weight-headline);}
h4, .text-title-lg { font-size: var(--title-lg-size); line-height: var(--title-lg-line); font-weight: var(--font-weight-title);}
h5, .text-title-default { font-size: var(--title-default-size); line-height: var(--title-default-line); font-weight: var(--font-weight-title);}
h6 { font-size: var(--title-sm-size); line-height: var(--title-sm-line); font-weight: var(--font-weight-title);}

/* Body */
body, p, .text-body-default { font-size: var(--body-default-size); line-height: var(--body-default-line); font-weight: var(--font-weight-body);}
.text-body-lg { font-size: var(--body-lg-size); line-height: var(--body-lg-line); font-weight: var(--font-weight-body);}
.text-body-sm { font-size: var(--body-sm-size); line-height: var(--body-sm-line); font-weight: var(--font-weight-body);}

/* Label */
.text-label-md { font-size: var(--label-default-size); line-height: var(--label-default-line); font-weight: var(--font-weight-label);} /* Label Medium | Default */
.text-label-xs { font-size: var(--label-xs-size); line-height: var(--label-xs-line); font-weight: var(--font-weight-body);} /* Label | Xsmall: Regular = Body-gewicht in Figma */
.text-subtext-md { font-size: var(--label-sm-size); line-height: var(--label-sm-line); color: var(--green-700);}
.text-subtext-sm { font-size: var(--label-xs-size); line-height: var(--label-xs-line); color: var(--green-700);}

.text-pre-line { white-space: pre-line;}
.text-gold { color: var(--text-accent-primary);}

/* === 3. Buttons (Figma Components / Button) ===============================
   48px hoog, padding 8/16, gap 10, radius 8, tekst Label Medium | Default 18/500.
   Large: padding 16/24, tekst 24, iconen 32. Hover-staten 1-op-1 uit de component. */

.btn { --bs-btn-padding-y: 8px; --bs-btn-padding-x: 16px; --bs-btn-font-family: var(--font-primary); --bs-btn-font-size: var(--label-default-size); --bs-btn-line-height: var(--label-default-line); --bs-btn-font-weight: var(--font-weight-label); --bs-btn-border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; max-width: 100%; white-space: normal; text-align: center; overflow-wrap: break-word; transition: background-color .3s ease-out, color .3s ease-out, border-color .3s ease-out; --bs-btn-disabled-color: var(--bs-btn-color); --bs-btn-disabled-bg: var(--bs-btn-bg); --bs-btn-disabled-border-color: var(--bs-btn-border-color);}
.btn svg { flex-shrink: 0; width: var(--icon-size-default); height: var(--icon-size-default);}
.btn-lg { --bs-btn-padding-y: 16px; --bs-btn-padding-x: 24px; --bs-btn-font-size: var(--label-lg-size); --bs-btn-line-height: var(--label-lg-line); height: auto;}
.btn-lg svg { width: var(--icon-size-large); height: var(--icon-size-large);}

/* Primary, Dark green — hover: alleen rand */
.btn-primary { --bs-btn-bg: var(--primary); --bs-btn-border-color: var(--primary); --bs-btn-color: var(--white); --bs-btn-hover-bg: transparent; --bs-btn-hover-border-color: var(--primary); --bs-btn-hover-color: var(--primary); --bs-btn-active-bg: transparent; --bs-btn-active-border-color: var(--primary); --bs-btn-active-color: var(--primary);}
/* Primary, Pink — hover: wit met roze rand en tekst */
.btn-pink { --bs-btn-bg: var(--pink-500); --bs-btn-border-color: var(--pink-500); --bs-btn-color: var(--white); --bs-btn-hover-bg: var(--white); --bs-btn-hover-border-color: var(--pink-500); --bs-btn-hover-color: var(--pink-500); --bs-btn-active-bg: var(--white); --bs-btn-active-border-color: var(--pink-500); --bs-btn-active-color: var(--pink-500);}
/* Primary, White — hover: lichtgroen */
.btn-white { --bs-btn-bg: var(--white); --bs-btn-border-color: var(--white); --bs-btn-color: var(--primary); --bs-btn-hover-bg: var(--green-500); --bs-btn-hover-border-color: var(--green-500); --bs-btn-hover-color: var(--primary); --bs-btn-active-bg: var(--green-500); --bs-btn-active-border-color: var(--green-500); --bs-btn-active-color: var(--primary);}
/* Secondary, Dark green — rand 50%; hover: volle rand en 20% vulling */
.btn-outline-primary { --bs-btn-bg: transparent; --bs-btn-border-color: var(--stroke-default); --bs-btn-color: var(--primary); --bs-btn-hover-bg: var(--primary-20); --bs-btn-hover-border-color: var(--primary); --bs-btn-hover-color: var(--primary); --bs-btn-active-bg: var(--primary-20); --bs-btn-active-border-color: var(--primary); --bs-btn-active-color: var(--primary);}
/* Secondary, White — op donkere achtergronden; hover gelijk aan default (Figma) */
.btn-outline-light { --bs-btn-bg: transparent; --bs-btn-border-color: var(--white); --bs-btn-color: var(--white); --bs-btn-hover-bg: transparent; --bs-btn-hover-border-color: var(--white); --bs-btn-hover-color: var(--white); --bs-btn-active-bg: transparent; --bs-btn-active-border-color: var(--white); --bs-btn-active-color: var(--white);}
/* Text, Dark green — 24px hoog, gap 8; hover gelijk aan default (Figma) */
.btn-text { --bs-btn-bg: transparent; --bs-btn-border-color: transparent; --bs-btn-color: var(--primary); --bs-btn-hover-bg: transparent; --bs-btn-hover-border-color: transparent; --bs-btn-hover-color: var(--primary); --bs-btn-active-bg: transparent; --bs-btn-active-border-color: transparent; --bs-btn-active-color: var(--primary); --bs-btn-padding-x: 0; --bs-btn-padding-y: 0; gap: 8px; min-height: 24px;}
.btn-text svg { width: var(--button-text-icon-size); height: var(--button-text-icon-size);}
/* Text, White — op donkere achtergronden */
.btn-text-light { --bs-btn-color: var(--white); --bs-btn-hover-color: var(--white); --bs-btn-active-color: var(--white);}
/* Text, Pink en Error — o.a. "Wijzigen" en "Account verwijderen" op de accountpagina's */
.btn-text-pink { --bs-btn-color: var(--text-accent-01); --bs-btn-hover-color: var(--text-accent-01); --bs-btn-active-color: var(--text-accent-01);}
.btn-text-error { --bs-btn-color: var(--text-error); --bs-btn-hover-color: var(--text-error); --bs-btn-active-color: var(--text-error);}

/* Lader (js/knoppen.js): data-bezig = meteen disabled en vergrendeld, nog zonder zichtbare verandering; .is-bezig = na 150 ms
   de ring in currentColor. In een knop staat de ring in het midden en blijven tekst en iconen onzichtbaar op hun plek (de knop
   houdt zijn maat, color blijft staan, dus de ring heeft de tekstkleur van de variant). Bij een schakelaar staat de ring in het
   bolletje en bij een keuze (label) achter de tekst. Het 3D-model en de zoekresultaten hebben de lader met het PH-logo (hieronder). */
button.is-bezig::after, .ph-schakelaar.is-bezig .ph-schakelaar-knop::after, label.is-bezig::after { content: ""; width: var(--bezig-maat); height: var(--bezig-maat); border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: ph-draai .8s linear infinite;}
button.is-bezig { --bezig-maat: var(--icon-size-default); position: relative; -webkit-text-fill-color: transparent;}
button.is-bezig > * { visibility: hidden;}
button.is-bezig::after { position: absolute; inset: 0; margin: auto;}
.btn[data-bezig] { --bs-btn-disabled-opacity: 1;}
.btn-lg.is-bezig { --bezig-maat: var(--icon-size-large);}
.btn-text.is-bezig { --bezig-maat: var(--button-text-icon-size);}
.ph-schakelaar.is-bezig .ph-schakelaar-knop { --bezig-maat: var(--icon-size-small); display: flex; align-items: center; justify-content: center; color: var(--icon-default);}
label.is-bezig::after { --bezig-maat: var(--icon-size-small); display: inline-block; flex-shrink: 0; margin-left: 8px; vertical-align: middle;}
/* Formulier onderweg: schakelaars en keuzes niet meer te bedienen */
form[data-bezig] .ph-schakelaar, form[data-bezig] label { pointer-events: none;}
/* Lader met het PH-logo voor inhoud (3D-model, zoekresultaten): het beeldmerk in currentColor via mask, pulserend. Alleen de
   dekking beweegt, dus ook bij minder beweging hetzelfde. Plaats en wachttijd staan bij het onderdeel zelf. */
.ph-woning-3d.is-laden::after, .ph-aanbod-resultaten.is-laden :is(.card-photo-wrap, .ph-casus-foto)::after { content: ""; width: var(--icon-size-xlarge); aspect-ratio: 93 / 120; background-color: currentColor; -webkit-mask: url('/assets/icons/logo-mark-dark.svg') center / contain no-repeat; mask: url('/assets/icons/logo-mark-dark.svg') center / contain no-repeat; animation: ph-puls 1.6s ease-in-out infinite;}
@keyframes ph-draai { to { transform: rotate(360deg);} }
@keyframes ph-puls { 0%, 100% { opacity: .3;} 50% { opacity: 1;} }
@keyframes ph-tonen { from { visibility: hidden;} to { visibility: visible;} }

/* Touchscreens: geen hover-staat (iOS houdt die na een tik vast, dan lijkt bv. .btn-primary leeg); de active-staat blijft als tikfeedback */
@media (hover: none) {
    .btn:hover { border-color: var(--bs-btn-border-color); background-color: var(--bs-btn-bg); color: var(--bs-btn-color);}
}

/* Touchscreens: tikvlak van minstens 44px om tekstknoppen (24 hoog) zonder dat de opmaak verschuift */
@media (pointer: coarse) {
    .btn-text:not(.stretched-link) { position: relative;}
    .btn-text:not(.stretched-link)::after { content: ""; position: absolute; inset: -10px 0;}
}

/* === 4. Formulieren (Figma Components / Input field) ====================== */

.form-control { --bs-border-radius: var(--radius-sm); height: var(--input-height); padding: 8px var(--input-padding-h); border-color: var(--stroke-default); font-family: var(--font-primary); font-size: var(--input-font-size); line-height: 18px; font-weight: var(--font-weight-body); color: var(--text-default);}
.form-control::placeholder { color: var(--primary-50);}
.form-control:focus { border-color: var(--primary); box-shadow: var(--shadow-focus);}
/* Automatisch ingevuld: Chrome toont de voorvertoning in een eigen, kleiner lettertype; hier hetzelfde als getypte tekst */
.form-control:-webkit-autofill, .form-control:-webkit-autofill::first-line { font-family: var(--font-primary); font-size: var(--input-font-size);}
/* Figma "Input field" Autofill: gegevens die de site zelf invult (readonly) of vastzet (disabled) */
.form-control[readonly], .form-control:disabled { background-color: var(--bg-subtle-02); color: var(--text-default);}
/* Checkbox (Figma "Checkbox"): 24×24, rand 1.5px Stroke/Default, radius 6; aangevinkt goud met een wit vinkje van 14 */
.ph-auth-check-label input, .ph-contact-check, .ph-filter-popup .form-check-input[type="checkbox"] { flex-shrink: 0; width: 24px; height: 24px; margin: 0; appearance: none; border: 1.5px solid var(--stroke-default); border-radius: var(--radius-checkbox); background: var(--bg-secondary) center / 14px no-repeat; cursor: pointer;}
.ph-auth-check-label input:checked, .ph-contact-check:checked, .ph-filter-popup .form-check-input[type="checkbox"]:checked { border-color: var(--stroke-accent-primary); background-color: var(--bg-accent-primary); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Cpath fill='white' d='M18.293.28a1.03 1.03 0 0 1 1.414 0 .92.92 0 0 1 0 1.353L7.332 13.47a1.03 1.03 0 0 1-1.414 0L.293 8.089a.92.92 0 0 1 0-1.352 1.03 1.03 0 0 1 1.414 0l4.918 4.704z'/%3E%3C/svg%3E");}
.ph-auth-check-label input:focus-visible, .ph-contact-check:focus, .ph-filter-popup .form-check-input:focus { outline: none; border-color: var(--primary); box-shadow: var(--shadow-focus);}
/* Radio (Figma "Radio Button 1"): vak 24, ring 20 van 2px Stroke/Default, aan: gouden ring met een stip van 12 */
.ph-filter-popup .form-check-input[type="radio"] { width: 20px; height: 20px; margin: 2px; padding: 2px; border: 2px solid var(--stroke-default); border-radius: 50%; background-clip: content-box;}
.ph-filter-popup .form-check-input[type="radio"]:checked { border-color: var(--stroke-accent-primary); background-color: var(--bg-accent-primary); background-image: none;}
/* Wachtwoordveld met oogknop rechts in het veld; de knop wisselt tussen tonen en verbergen (js/account-formulier.js) */
.ph-wachtwoord { position: relative; display: block;}
.ph-wachtwoord .form-control { padding-right: 44px;} /* ruimte voor de knop, zodat tekst er niet onder loopt */
.ph-wachtwoord .form-control.is-valid, .ph-wachtwoord .form-control.is-invalid { background-image: none;} /* geen Bootstrap-icoon onder de oogknop */
.ph-wachtwoord-toon { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); padding: 4px; border: 0; background: var(--bg-transparent, transparent); color: var(--text-secondary); font-size: 18px; line-height: 1;}
/* Oog als masker in de kleur van de knop; aria-pressed="true" = wachtwoord zichtbaar, dan het doorgestreepte oog */
.ph-wachtwoord-toon::before { content: ""; display: block; width: var(--input-icon-size); height: var(--input-icon-size); background-color: currentColor; -webkit-mask: url('/assets/icons/eye.svg') center / contain no-repeat; mask: url('/assets/icons/eye.svg') center / contain no-repeat;}
.ph-wachtwoord-toon[aria-pressed="true"]::before { -webkit-mask-image: url('/assets/icons/eye-crossed.svg'); mask-image: url('/assets/icons/eye-crossed.svg');}

/* Keuzelijst met chevron (Figma "Input field" met "Chevron-down"); zonder keuze in placeholderkleur */
.ph-select { position: relative;}
.ph-select select.form-control { padding-right: 48px; appearance: none; cursor: pointer;}
.ph-select select.form-control:has(option[value=""]:checked) { color: var(--primary-50);}
.ph-select svg { position: absolute; top: 50%; right: 16px; transform: translateY(-50%); color: var(--primary); pointer-events: none;}
.ph-select select.form-control.is-valid, .ph-select select.form-control.is-invalid { padding-right: 80px; background-position: right 48px center;} /* validatie-icoon links van de chevron */
/* Telefoonveld met vlag en landcode (intl-tel-input 17.0.8, js/telefoon.js), overal hetzelfde: vlag + landcode in een
   grijs vlak links in het veld, met de chevron van .ph-select. De landenlijst zoals de keuzemenu's van de site
   (.ph-filter-menu): wit vlak met Shadow/Float, regels Label Small, hover groen 200, het gekozen land donkergroen met wit.
   Niet onder een pagina-class: op een telefoon zet intl-tel-input de lijst los in de body (.iti-mobile). */
.iti { display: block; width: 100%;}
.iti input.form-control { padding-right: var(--input-padding-h);}
.iti input.form-control.is-valid, .iti input.form-control.is-invalid { padding-right: calc(1.5em + .75rem);}
.iti--separate-dial-code .iti__selected-flag { gap: 8px; padding: 0 12px 0 16px; border-right: 1px solid var(--stroke-secondary); border-radius: var(--radius-sm) 0 0 var(--radius-sm); background-color: var(--bg-subtle-02); outline: none;}
.iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag { background-color: var(--green-200);}
.iti__selected-flag:focus-visible { box-shadow: var(--shadow-focus);}
.iti--separate-dial-code .iti__selected-dial-code { margin-left: 0; font-family: var(--font-primary); font-size: var(--input-font-size); color: var(--text-default);}
.iti__arrow { width: 16px; height: 16px; margin-left: 0; border: 0; background-color: var(--primary); -webkit-mask: url('/assets/icons/chevron-down.svg') center / contain no-repeat; mask: url('/assets/icons/chevron-down.svg') center / contain no-repeat; transition: transform .2s ease-out;}
.iti__arrow--up { border: 0; transform: rotate(180deg);}
.iti__country-list { width: max-content; max-width: min(360px, calc(100vw - 32px)); max-height: 320px; margin: 4px 0 0; padding: 12px; border: none; border-radius: var(--radius-sm); background-color: var(--bg-secondary); box-shadow: var(--shadow-float); white-space: normal; overflow-y: auto; scrollbar-width: thin;}
.iti__country-list--dropup { margin: 0 0 4px;}
.iti__divider { margin: 8px 0; padding: 0; border-bottom: 1px solid var(--stroke-secondary);}
.iti__country { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--radius-sm); font-family: var(--font-primary); font-size: var(--label-sm-size); line-height: var(--label-sm-line); color: var(--text-default); cursor: pointer;}
.iti__flag-box, .iti__country-name { margin-right: 0;}
.iti__dial-code { margin-left: auto; color: var(--text-secondary);}
.iti__country.iti__highlight { background-color: var(--green-200);}
.iti__country.iti__active { background-color: var(--primary); color: var(--white);}
.iti__country.iti__active .iti__dial-code { color: var(--white-80);}
.iti-mobile .iti__country-list { max-width: none; margin: 0;}
.iti-mobile .iti__country { padding: 12px; line-height: var(--label-sm-line);}
/* Foutmelding onder het veld: het veld staat in .iti, dus niet meer direct naast .invalid-feedback */
.iti:has(> .is-invalid) ~ .invalid-feedback { display: block;}
/* Veld met label erboven (Figma "Field": label Label Small 500, 10px tot het invoerveld): Contact, Account,
   Waardebepaling en Mijn Huys. .ph-veld-rij zet er twee naast elkaar (16px ertussen), .is-drie drie (Mijn Huys:
   postcode, huisnummer, toevoeging); op mobiel onder elkaar. */
.ph-veld { display: flex; flex-direction: column; gap: 10px; min-width: 0;}
.ph-veld > label, .ph-veld-label { margin: 0; font-size: var(--label-sm-size); line-height: var(--label-sm-line); font-weight: 500; color: var(--text-default);}
.ph-veld textarea.form-control { height: 140px; padding-block: 16px; resize: vertical;}
.ph-veld-rij { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;}
.ph-veld-rij.is-drie { grid-template-columns: repeat(3, minmax(0, 1fr));}

@media (max-width: 575.98px) {
    .ph-veld-rij, .ph-veld-rij.is-drie { grid-template-columns: minmax(0, 1fr);}
}
/* Suggesties onder een zoekveld (js/zoek-suggesties.js; Figma "Inladende zoeklijst" 3154-96464):
   Check je regio, Home, /huis-kopen en Sneak Preview. Het zoekveld eromheen is position: relative.
   Per regel padding 16, gap 16, lijn eronder; groen vierkant 48×48 met pin; naam Title Default, context Body Default. */
.ph-zoek-suggesties { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 10; max-height: 404px; margin: 0; padding: 0; overflow-y: auto; list-style: none; border-radius: var(--radius-sm); background-color: var(--bg-secondary); box-shadow: var(--shadow-float); text-align: left;}
.ph-zoek-suggestie { display: flex; align-items: center; gap: 16px; padding: 16px; border-bottom: 1px solid var(--stroke-secondary); cursor: pointer;}
.ph-zoek-suggestie:last-child { border-bottom: none;}
.ph-zoek-suggestie:not(.is-leeg):hover, .ph-zoek-suggestie[aria-selected="true"] { background-color: var(--green-200);}
.ph-zoek-suggestie.is-leeg { cursor: default; font-size: var(--body-default-size); line-height: var(--body-default-line); color: var(--text-secondary);}
.ph-zoek-suggestie-icoon { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-sm); background-color: var(--green-500);}
.ph-zoek-suggestie-icoon::before { content: ""; width: 24px; height: 24px; background-color: var(--icon-default); -webkit-mask: url('/assets/icons/pin-location.svg') center / 24px 24px no-repeat; mask: url('/assets/icons/pin-location.svg') center / 24px 24px no-repeat;}
.ph-zoek-suggestie-tekst { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0;}
.ph-zoek-suggestie-naam { font-family: var(--font-primary); font-size: var(--body-default-size); line-height: var(--body-default-line); font-weight: 500; color: var(--text-default);}
.ph-zoek-suggestie-context { font-family: var(--font-primary); font-size: var(--body-default-size); line-height: var(--body-default-line); font-weight: 400; color: var(--text-secondary);}

/* === 5. Header (Figma "Top navigation") ===================================
   Linkregel van 40px, daaronder de witte balk (padding 12, radius 16). Beide staan
   in de .container (makelaarskant .ph-mk-container) en steken links en rechts 16px
   buiten de inhoud uit. De header plakt; de linkregel schuift mee weg. */

.ph-header { position: sticky; top: 16px; z-index: 1030; padding-bottom: 16px;}
.ph-header-links { display: flex; justify-content: flex-end; align-items: center; gap: 24px; position: relative; z-index: 1030; height: var(--header-links-height); margin: 0 -16px; padding: 0; list-style: none;}
.ph-header-links a, .ph-header-nav a { font-family: var(--font-primary); line-height: 1; color: var(--primary-600); text-decoration: none; transition: color .2s ease-out;}
.ph-header-links a { font-size: 16px;}
.ph-header-nav a { font-size: 18px;}
.ph-header-links a:hover, .ph-header-nav a:hover { color: var(--text-default);}
/* Figma "Nav item" Selected: Medium en Text/Default */
.ph-header-links a.active, .ph-header-nav a.active { color: var(--text-default); font-weight: 500;}
.ph-header-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-inline: -16px; padding: 12px; border-radius: var(--radius-md); background-color: var(--white); box-shadow: var(--shadow-primary);}
.ph-header-left { display: flex; align-items: center; gap: 40px;}
.ph-header-logo { display: block; flex-shrink: 0;}
.ph-header-logo img { display: block; width: 210px; height: 48px;}
.ph-header-nav { display: flex; align-items: center; gap: 32px; margin: 0; padding: 0; list-style: none;}
.ph-header-actions { display: flex; align-items: center; gap: 12px;}
/* Knoppen in de Top navigation zijn Regular (de Button-component zelf is Medium) */
.ph-header-actions .btn { --bs-btn-font-weight: var(--font-weight-body);}

/* Accountknop (ingelogd) — Figma "Account Button" (design system, node 390-1360):
   outline-knop met roze cirkel (24px) met voorletters en "Hey {voornaam}!". Popup
   349px, padding 8, radius 8, rand 20%, 24px onder de knop; regels van 64px (padding 0 8, gap 12)
   met het icoonvlak van het accountmenu (.ph-icoonvlak, sectie 13), een lijn voor Uitloggen. */
.ph-account-avatar { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 24px; height: 24px; border-radius: 999px; background-color: var(--pink-500); color: var(--white); font-size: 10px; line-height: 14px; font-weight: 500;}

.ph-account .btn { font-size: var(--body-default-size); line-height: var(--body-default-line);}
/* Lange voornaam: afkappen, anders schuiven de headerknoppen naar een tweede regel */
.ph-account-naam { max-width: 160px; overflow: hidden; text-overflow: ellipsis;}
.ph-account-menu { --bs-dropdown-min-width: 349px; --bs-dropdown-padding-x: 8px; --bs-dropdown-padding-y: 8px; --bs-dropdown-border-color: var(--stroke-secondary); --bs-dropdown-border-radius: var(--radius-sm); --bs-dropdown-bg: var(--bg-secondary); --bs-dropdown-link-color: var(--text-secondary); --bs-dropdown-link-hover-color: var(--text-default); --bs-dropdown-link-hover-bg: transparent; --bs-dropdown-link-active-color: var(--text-secondary); --bs-dropdown-link-active-bg: rgba(var(--primary-rgb), .05); --bs-dropdown-divider-bg: var(--stroke-secondary); box-shadow: var(--shadow-float);}
.ph-account-menu .dropdown-item { display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 8px; border-radius: var(--radius-sm); font-size: var(--body-default-size); line-height: var(--body-default-line); font-weight: var(--font-weight-body); transition: color .2s ease-out;}

/* Menu consumentenkant onder 1400px (inc/header.php, Figma "Hamburger menu | Consumenten" 4017:37861): schermvullend
   paneel (Bootstrap offcanvas) op Background/Default. Kop padding 16/24 met logo 192×44 en sluitknop 44 (wit, rand 20%,
   radius 8). Inhoud padding 16/24/40, gap 24: hoofdmenu (Display Large, regels padding 20 0 met lijn 20% en pijl 24),
   Over Powerhuys en Contact (Label Small, padding 16 0), de knoppen (gap 12; Inloggen op wit) en de makelaarslink
   (14px, lijn erboven, padding-top 16, schuine pijl 16; past hij niet op één regel, dan de link met pijl op de tweede).
   Makelaarskant (inc/makelaars-header.php, .ph-menu-mk, Figma "Hamburger menu | Makelaar" 421:1395): op wit, onder de
   laatste regel geen lijn, één knop. */
.ph-menu { --bs-offcanvas-width: 100%; --bs-offcanvas-bg: var(--bg-default); --bs-offcanvas-color: var(--text-default); --bs-offcanvas-border-width: 0;}
.ph-menu-kop { display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; padding: 16px 24px;}
.ph-menu-logo img { display: block; width: 192px; height: 44px;}
.ph-menu-sluiten { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--stroke-secondary); border-radius: var(--radius-sm); background-color: var(--bg-secondary); color: var(--icon-default);}
.ph-menu-inhoud { display: flex; flex-direction: column; flex: 1 1 auto; gap: 24px; overflow-y: auto; overscroll-behavior: contain; padding: 16px 24px 40px;}
.ph-menu-nav { display: flex; flex-direction: column; align-items: flex-start; flex: 1 0 auto;}
.ph-menu-hoofd { display: flex; justify-content: space-between; align-items: center; gap: 16px; align-self: stretch; padding: 20px 0; border-bottom: 1px solid var(--stroke-secondary); font-family: var(--font-display); font-stretch: var(--font-display-stretch); font-weight: var(--font-weight-display); font-size: var(--display-lg-size); line-height: var(--display-lg-line); text-transform: uppercase; color: var(--text-default); text-decoration: none;}
.ph-menu-hoofd svg { flex-shrink: 0;}
.ph-menu-extra { padding: 16px 0; font-size: var(--label-sm-size); line-height: var(--label-sm-line); color: var(--text-secondary); text-decoration: none;}
.ph-menu-extra:hover { color: var(--text-default);}
.ph-menu-knoppen { display: flex; flex-direction: column; gap: 12px;}
.ph-menu-knoppen .btn-outline-primary { --bs-btn-bg: var(--bg-secondary);}
/* Figma: op één regel. Tekst is ±21.6× de lettergrootte, plus 38px voor gaps en pijl, plus 48px menupadding:
   op schermen smaller dan 390px krimpt de letter mee; past het toch niet, dan pas de tweede regel */
.ph-menu-makelaar { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; padding-top: 16px; border-top: 1px solid var(--stroke-secondary); font-size: min(14px, calc((100vw - 86px) / 21.6)); line-height: normal; color: var(--text-secondary); text-decoration: none;}
.ph-menu-makelaar span { display: inline-flex; align-items: center; gap: 8px;}
.ph-menu-makelaar strong { font-weight: 600; color: var(--text-default);}
/* Pijl 16 een kwartslag schuin: in Figma een vak van 22.6, vandaar 3px marge */
.ph-menu-makelaar svg { flex-shrink: 0; margin-inline: 3px; color: var(--icon-default); transform: rotate(-45deg);}
.ph-menu-mk { --bs-offcanvas-bg: var(--bg-secondary);}
.ph-menu-mk .ph-menu-hoofd:last-child { border-bottom: 0;}

/* Menuknop alleen onder 1400px (daaronder is de balk te smal voor menu en knoppen) */
.ph-header-toggle { display: none; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: none; border-radius: var(--radius-sm); background-color: var(--tertiary); color: var(--primary);}

@media (max-width: 1399.98px) {
    .ph-header-nav { display: none;}
    .ph-header-toggle { display: inline-flex;}
}

@media (max-width: 767.98px) {
    .ph-header { top: 0; padding-top: 16px;}
    .ph-header-links { display: none;}
    /* Makelaarskant: inhoud staat 16px van de rand, de balk ook */
    .ph-header-mk .ph-header-bar { margin-inline: 0;}
    .ph-header-logo img { width: 168px; height: auto;}
    /* Anders springen de knoppen tussen 576 en 768 naar een tweede regel; (Ver)koophulp staat dan in het menu (makelaarskant: één knop, past wel) */
    .ph-header:not(.ph-header-mk) .ph-header-actions .btn-primary { display: none;}
}

@media (max-width: 575.98px) {
    .ph-header-actions .btn { display: none;}
    /* Inhoud staat 12px van de rand, 16px breder valt buiten beeld: de balk blijft 16px van de rand */
    .ph-header > .container { padding-inline: 16px;}
    .ph-header-bar { margin-inline: 0;}
}

/* === 6. Footer (Figma "Footer") ===========================================
   80px ruimte erboven voor het zwevende beeldmerk; donkergroen blok (radius
   40 boven, padding 120/80/32) dat schermbreed doorloopt. */

/* position: relative — op Onze makelaars en het kantoorprofiel schuift de footer over de kaart (.ph-vm-kaart, sectie 18);
   pointer-events: de transparante 80px bovenaan laat klikken door naar de kaart (zoomknoppen), alleen het groene deel vangt ze. */
.ph-footer { position: relative; margin-inline: calc(50% - 50vw); padding-top: 80px; pointer-events: none;}
.ph-footer-section { display: flex; flex-direction: column; align-items: center; gap: 40px; padding: 120px 80px 32px; border-radius: 40px 40px 0 0; background-color: var(--primary); color: var(--white-80); pointer-events: auto;}
.ph-footer-items { display: flex; justify-content: center; align-items: flex-start; gap: 80px; width: 100%; max-width: 1400px;}
.ph-footer-side { display: flex; align-items: flex-start; gap: 24px; flex: 1 0 0;}
.ph-footer-side:last-child { gap: 16px;}
.ph-footer-col { display: flex; flex-direction: column; gap: 16px; flex: 1 0 0;}
.ph-footer-col-title { font-family: var(--font-display); font-stretch: var(--font-display-stretch); font-size: 24px; line-height: 1; font-weight: var(--font-weight-display); text-transform: uppercase; color: var(--white);}
.ph-footer-links { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none;}
.ph-footer-links a, .ph-footer-socials a { color: var(--text-inverse-secondary); text-decoration: none;}
.ph-footer-links a { font-size: 18px; line-height: 23.4px;}
.ph-footer-links a:hover { color: var(--white); text-decoration: underline;}

/* Beeldmerk in een witte kaart die 60px boven het groene blok uitsteekt (Figma "Frame 410") */
.ph-footer-center { position: relative; display: flex; flex-direction: column; align-items: center; gap: 32px;}
.ph-footer-mark { position: absolute; top: -180px; left: 50%; transform: translateX(-50%); display: flex; justify-content: center; align-items: center; width: 144px; padding: 12px; border-radius: var(--radius-md); background-color: var(--white); box-shadow: var(--shadow-float);}
.ph-footer-mark img { display: block; width: 93px; height: 120px;}
.ph-footer-brand { display: flex; flex-direction: column; align-items: center; gap: 16px;}
.ph-footer-logo { display: block; width: 248px; height: 40px;}
.ph-footer-tagline { max-width: 226px; margin: 0; text-align: center; font-size: 18px; line-height: 23.4px;}
.ph-footer-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px;}
.ph-footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; max-width: 1400px; font-size: 16px;}
.ph-footer-juridisch { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px;}
.ph-footer-juridisch a, .ph-footer-juridisch button { padding: 0; border: none; background: none; color: var(--text-inverse-secondary); text-decoration: none;}
.ph-footer-juridisch a:hover, .ph-footer-juridisch button:hover { color: var(--white); text-decoration: underline;}
.ph-footer-socials { display: flex; align-items: center; gap: 16px;}
/* Tikvlak 40×40 rond het icoon van 24; de negatieve marge houdt de opmaak gelijk */
.ph-footer-socials a { display: inline-flex; margin: -8px; padding: 8px; transition: color .2s ease-out;}
.ph-footer-socials a:hover { color: var(--white);}

@media (max-width: 991.98px) {
    .ph-footer-section { padding: 120px 24px 32px;}
    .ph-footer-items { flex-direction: column; align-items: stretch; gap: 40px;}
    .ph-footer-center { order: -1;}
    .ph-footer-bottom { flex-direction: column;}
}

@media (max-width: 575.98px) {
    /* Knoppen onder elkaar en even breed: één gridkolom zo breed als de breedste knop, de knoppen vullen die */
    .ph-footer-actions { display: grid; justify-content: center;}
}

@media (max-width: 767.98px) {
    /* Makelaarskant: ruimte onder de footer voor de zwevende "Claim je regio"-knop (16 + 54 + 16), zodat die de socials niet bedekt */
    .ph-footer-mk .ph-footer-section { padding-bottom: 88px;}
}

/* === 7. Woning card (Figma "Woning card/Desktop") =========================
   360×424, padding 12, gap 8, radius 16; foto 336×240 radius 8; tekstblok
   padding 4. Gebruikt op Home en de sneak preview-pagina; /huis-kopen gebruikt de liggende variant. */

.card-woning { position: relative; display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 12px; border-radius: var(--radius-md); background-color: var(--white); box-shadow: var(--shadow-card);}
.card-woning .card-photo-wrap { position: relative;}
.card-woning img, .card-woning .card-photo-placeholder { display: block; width: 100%; height: 240px; object-fit: cover; border-radius: var(--radius-sm);}
.card-woning .card-photo-placeholder { background-color: var(--primary-20);}
.card-woning .card-body-wrap { display: flex; flex-direction: column; gap: 8px; padding: 4px;}
.card-woning .card-address { font-family: var(--font-primary); font-size: var(--headline-md-size); line-height: var(--headline-md-line); font-weight: var(--font-weight-headline); color: var(--text-default);}
.card-woning .card-address a { color: inherit; text-decoration: none;}
.card-woning .card-meta { font-family: var(--font-primary); font-size: var(--body-default-size); line-height: var(--body-default-line); color: var(--text-secondary);}
.card-woning .card-price { font-family: var(--font-display); font-stretch: var(--font-display-stretch); font-size: var(--display-xs-size); line-height: var(--display-xs-line); font-weight: var(--font-weight-display); text-transform: uppercase; color: var(--text-default);}
/* Tikvlak van 48 (icoon 28 + 2×10 padding); de negatieve marge houdt het icoon op zijn Figma-plek. Mobiel 24 */
.card-woning .card-favorite, .card-woning .card-share { position: relative; z-index: 2; align-self: flex-start; flex-shrink: 0; margin: -10px; padding: 10px; border: none; background: transparent; line-height: 0; color: var(--primary); cursor: pointer;}
.card-woning .card-favorite svg, .card-woning .card-share svg { width: 28px; height: 28px;}
/* Favorietknop (render_favoriet_knop, js/favorieten.js): leeg hartje, bewaard het gevulde roze hartje (Figma "Heart-fill") */
.ph-favoriet-leeg, .ph-favoriet-vol { display: contents;}
.ph-favoriet:not(.is-favoriet) .ph-favoriet-vol, .ph-favoriet.is-favoriet .ph-favoriet-leeg { display: none;}
.ph-favoriet.is-favoriet .ph-favoriet-vol svg { color: var(--icon-accent-01);}
.card-woning .card-stats { display: flex; align-items: center; gap: 8px; font-family: var(--font-primary); font-size: var(--label-sm-size); line-height: var(--label-sm-line); color: var(--text-secondary);}
.card-woning .card-stats span { display: inline-flex; align-items: center; gap: 4px;}
.card-woning .card-stats svg { width: 20px; height: 20px;}

/* Label (Figma "Label/*" > "Frame 513"): rechthoek met radius 4 links (::before)
   en de punt van 27px als losse vector (::after, Figma-pad als masker). Steekt
   4px links buiten de kaart, 20px van de bovenkant. 26 hoog: de tekst is getrimd tot de
   hoofdletterhoogte (text-box). Kleur via --badge-bg. */
.card-woning-badge { --badge-bg: var(--green-500); --badge-tail: 27px; position: absolute; top: 8px; left: -16px; z-index: 1; padding: 8px var(--badge-tail) 8px 12px; font-family: var(--font-primary); font-size: var(--label-sm-size); line-height: var(--label-sm-line); font-weight: var(--font-weight-body); color: var(--text-default); text-box: trim-both cap alphabetic; filter: drop-shadow(var(--shadow-label-filter));}
.card-woning-badge::before, .card-woning-badge::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: -1; background-color: var(--badge-bg);}
.card-woning-badge::before { left: 0; right: var(--badge-tail); border-radius: var(--radius-xs) 0 0 var(--radius-xs);}
/* 1px strook onder de rechthoek tegen een naad */
.card-woning-badge::after { right: 0; width: calc(var(--badge-tail) + 1px); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 0 29 27' preserveAspectRatio='none'%3E%3Cpath d='M-1 0H24.5821C27.5592 0 28.9278 3.70877 26.6699 5.65423L2.76054 26.2249C2.1806 26.7248 1.43826 27 0.672729 27H-1Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 0 29 27' preserveAspectRatio='none'%3E%3Cpath d='M-1 0H24.5821C27.5592 0 28.9278 3.70877 26.6699 5.65423L2.76054 26.2249C2.1806 26.7248 1.43826 27 0.672729 27H-1Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;}
/* Lege foto (Figma "Woning card/Image" zonder foto): grijsgroen beeldmerk 32×40 op het lichtgroene vlak.
   Specifieker dan ".owl-carousel .owl-item img { width: 100%}" van Owl Carousel */
.card-woning .card-photo-placeholder img.card-photo-placeholder-logo { width: 32px; height: 40px; border-radius: 0;}
/* "Meer sneak preview aanbod" (render_sneak_preview_meer_kaart), laatste kaart op Home: zandkleurig
   vlak tot de kaartrand met drie gestapelde lege kaarten (8px verschoven), dat onderaan naar wit vervaagt */
.card-sneak-meer-cta { text-align: center;}
.card-sneak-stapel { position: relative; flex: 1 1 auto; margin: -12px -12px 0; overflow: hidden; border-radius: var(--radius-md) var(--radius-md) 0 0; background-color: var(--tertiary);}
.card-sneak-stapel::after { content: ""; position: absolute; inset: auto 0 0; z-index: 2; height: 64px; background: linear-gradient(rgba(var(--white-rgb), 0), var(--white));}
.card-sneak-stapel-kaart { --stapel: 0px; position: absolute; top: calc(24px + var(--stapel)); left: calc(18% + var(--stapel)); width: 64%; padding: 8px; border-radius: var(--radius-sm); background-color: var(--white); box-shadow: var(--shadow-card);}
.card-sneak-stapel-kaart:nth-child(2) { --stapel: 8px;}
.card-sneak-stapel-kaart:nth-child(3) { --stapel: 16px;}
.card-woning .card-sneak-stapel .card-photo-placeholder { height: 160px;}
.card-woning .card-sneak-stapel img.card-photo-placeholder-logo { width: 21px; height: 26px;}
.card-sneak-stapel .card-woning-badge { --badge-tail: 20px; top: 4px; left: -8px; padding: 4px var(--badge-tail) 4px 8px; font-size: 12px;}
.card-sneak-meer-cta-body { display: flex; flex-direction: column; gap: 16px; padding: 4px;}
.card-sneak-meer-cta-titel { text-transform: uppercase; color: var(--primary);}
.card-woning-badge-status-sneak-preview { --badge-bg: var(--secondary); color: var(--white);}
.card-woning-badge-status-beschikbaar { --badge-bg: var(--green-500);}
/* Figma "Label/Verkocht": Verkocht, Onder bod en Onder voorbehoud allemaal roze met witte tekst */
.card-woning-badge-status-onder-bod, .card-woning-badge-status-verkocht-onder-voorbehoud, .card-woning-badge-status-verkocht { --badge-bg: var(--bg-accent-01); color: var(--text-inverse);}
/* Liggende variant op /huis-kopen (render_aanbod_lijst_kaart, Figma "Woning card" 840/620 breed):
   foto 400×260 (kaartweergave: halve breedte), 12px ernaast de tekst met padding 16/8.
   Kop + prijs vullen de hoogte; iconen 28px; sneak preview: gouden vinkje (18px) met woningtype. */
.card-woning-lijst { flex-direction: row; gap: 12px; height: auto; transition: box-shadow .2s ease-out;}
/* Gemarkeerd vanuit een pin op de kaart: donkergroene rand om de kaart */
.card-woning-lijst.is-geselecteerd { box-shadow: 0 0 0 2px var(--primary), var(--shadow-card);}
.card-woning-lijst .card-photo-wrap { flex: 0 1 400px; min-width: 0; align-self: center;}
.ph-aanbod-kaart-weergave .card-woning-lijst .card-photo-wrap { flex: 1 1 0; min-width: 0;}
.card-woning-lijst .card-photo-wrap > img, .card-woning-lijst .card-photo-placeholder { height: 260px;}
.card-woning-lijst .card-body-wrap { flex: 1 0 280px; min-width: 0; justify-content: center; gap: 16px; padding: 16px 8px;}
.ph-aanbod-kaart-weergave .card-woning-lijst .card-body-wrap { flex: 1 1 0;}
.card-woning-lijst .card-address { overflow-wrap: break-word;}
.card-woning-top { display: flex; flex: 1 1 auto; flex-direction: column; gap: 8px;}
.card-woning-kop { display: flex; flex: 1 1 auto; align-items: flex-start; gap: 12px;}
.card-woning-titel { flex: 1 1 auto; min-width: 0;}
.card-sneak-kenmerk { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: var(--body-default-size); line-height: var(--body-default-line); color: var(--text-secondary);}
.card-sneak-kenmerk-check { display: flex; flex: 0 0 18px; height: 18px; padding: 2px; border-radius: 40px; background-color: var(--text-accent-primary); color: var(--white);}
.card-sneak-kenmerk-check svg { width: 14px; height: 14px;}
/* Makelaar (Figma "Makelaar"): rand 20%, radius 8, padding 4/16/4/4, logo 40×40 op wit, Label Small */
.card-woning-makelaar { display: flex; align-self: flex-start; align-items: center; gap: 8px; max-width: 100%; padding: 4px 16px 4px 4px; border: 1px solid var(--stroke-secondary); border-radius: var(--radius-sm); font-size: var(--label-sm-size); line-height: var(--label-sm-line); color: var(--text-secondary);}
.card-woning-makelaar-logo { display: flex; flex-shrink: 0; width: 40px; height: 40px; padding: 4px; border-radius: var(--radius-sm); background-color: var(--bg-secondary);}
.card-woning.card-woning-lijst .card-woning-makelaar-logo img { width: 100%; height: 100%; object-fit: contain;}

@media (max-width: 767.98px) {
    /* Figma "Woning card" Device=Mobile: staand 220×264, liggend 400×136. Padding 8, radius 8, foto 120 radius 4; label 12 van boven, 4 buiten de kaart;
       titel Headline Small (max. 2 regels), adres Body Small 80% op één regel, prijs Display Small, kenmerken Body Small met iconen 18, hartje 24; blur 5 */
    .card-woning { padding: 8px; border-radius: var(--radius-sm);}
    .card-woning img, .card-woning .card-photo-placeholder { height: 120px; border-radius: var(--radius-xs);}
    .card-photo-wrap > .card-woning-badge { top: 4px; left: -12px;}
    .card-woning .card-address { font-size: var(--headline-sm-size); line-height: var(--headline-sm-line);}
    .card-woning .card-body-wrap .card-address { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2;}
    .card-woning .card-meta { font-size: var(--body-sm-size); line-height: var(--body-sm-line); color: rgba(var(--primary-rgb), .8);}
    .card-woning .card-body-wrap .card-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
    .card-woning .card-price { font-size: var(--display-sm-size); line-height: var(--display-sm-line);}
    .card-woning .card-favorite svg, .card-woning .card-share svg { width: 24px; height: 24px;}
    .card-woning .card-stats { flex-wrap: wrap; font-size: var(--body-sm-size); line-height: var(--body-sm-line);}
    .card-woning .card-stats svg { width: 18px; height: 18px;}
    .card-sneak-stapel { margin: -8px -8px 0; border-radius: var(--radius-sm) var(--radius-sm) 0 0;}
    /* Liggend: foto 140 breed, zo hoog als de tekst (min. 120); tekst padding 4, gap 8; deelknop en makelaar verborgen (d-none in render_aanbod_lijst_kaart) */
    .card-woning-lijst { gap: 8px;}
    .card-woning-lijst .card-photo-wrap, .ph-aanbod-kaart-weergave .card-woning-lijst .card-photo-wrap { flex: 0 0 140px; align-self: stretch; min-height: 120px;}
    .card-woning-lijst .card-photo-wrap > img { position: absolute; inset: 0; height: 100%;}
    .card-woning-lijst .card-photo-placeholder { height: 100%;}
    .card-woning-lijst .card-body-wrap, .ph-aanbod-kaart-weergave .card-woning-lijst .card-body-wrap { flex: 1 1 0; gap: 8px; padding: 4px;}
    .card-woning-kop { gap: 8px;}
}

/* === 9. Pagina — Home (Figma "Home (niet ingelogd)", node 2569-30000) ==== */

/* Displaykoppen op home zijn zwaar en smal */
.ph-home .text-display-xl, .ph-home .text-display-lg, .ph-home .text-display-md, .ph-home .text-display-xs { text-transform: uppercase;}
.ph-home-muted { color: var(--primary-600);}

/* Hero — 680px, inhoud 800px, 40px tussen kop en zoekkaart */
/* z-index 2: de suggestielijst van het zoekveld valt over "Binnenkort in de verkoop" (de hero is
   door .ph-pattern-bg een eigen stacking context; .owl-carousel heeft zelf z-index 1) */
.header { z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px; min-height: calc(680px + var(--header-height)); padding: var(--header-height) 24px 24px;}
.header h1 { margin: 0;}
.ph-home-hero-text { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 40px; text-align: center;}

@media (max-width: 767.98px) {
    .header { min-height: 0; padding-top: calc(var(--header-height) + 32px);}
    .ph-home-hero-text { padding: 0;}
}

/* Zoekkaart (Figma "Search"): 800px, padding 32, gap 16, radius 16 */
.ph-hero-search-card { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 800px; padding: 32px; border: 1px solid var(--white-20); border-radius: var(--radius-md); background-color: var(--white); box-shadow: var(--shadow-float); backdrop-filter: blur(12px);}
/* Variant van .ph-search-input (basis onderaan sectie 10) */
.ph-search-input.ph-hero-search { flex: 1 1 auto; min-width: 0; height: 56px; margin: 0; gap: 8px; padding: 8px 16px; border: 1px solid var(--primary-20); border-radius: var(--radius-sm); box-shadow: none;}
.ph-search-input.ph-hero-search svg { width: 24px; height: 24px; color: var(--primary);}
.ph-search-input.ph-hero-search input { font-size: 16px;}
/* Zoekknop op Home is 56px hoog, padding 8/24 (Figma Home) */
.ph-hero-search-card .btn { --bs-btn-padding-x: 24px; min-height: 56px;}

/* Mobiel (Figma "Home (niet ingelogd) | Consumenten", node 3873-63480): geen kaart, titel en knop,
   alleen het zoekveld (44px, padding 8/12, radius 8, schaduw); zoeken met Enter */
@media (max-width: 767.98px) {
    .ph-hero-search-card { padding: 0; border: none; background-color: transparent; box-shadow: none; backdrop-filter: none;}
    .ph-hero-search-card > .text-display-xs,
    .ph-hero-search-card .btn { display: none;}
    .ph-search-input.ph-hero-search { height: 44px; padding: 8px 12px; border: none; box-shadow: var(--shadow-zoekveld);}
    .ph-search-input.ph-hero-search svg { width: 20px; height: 20px;}
    .ph-search-input.ph-hero-search input { font-size: 14px;}
    .ph-search-input.ph-hero-search input::placeholder { color: var(--primary-600);}
}

/* Binnenkort in de verkoop (Figma "Frame 397", node 2569-31855): radius 24, tekstkolom
   (padding 40/40/40/80), kaarten met 32px verticale ruimte; wat niet past
   valt weg achter de rechterrand. Tekstkolom 540px i.p.v. Figma's 523px: ons paneel is
   1296px breed (Figma 1280), zo valt de tweede kaart net als in Figma ~12px buiten beeld. */
.ph-sneak-panel { display: flex; gap: 24px; margin-bottom: 40px; overflow: hidden; border-radius: var(--radius-lg); color: var(--white); background-color: var(--primary);}
.ph-sneak-panel-text { position: relative; isolation: isolate; flex: 0 0 540px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 32px; padding: 40px 40px 40px 80px;}
/* Figma "Glow" */
.ph-sneak-panel-text::before { content: ""; position: absolute; z-index: -1; left: -76px; top: 50px; width: 417px; height: 387px; border-radius: 50%; background: rgba(var(--secondary-rgb), .3); filter: blur(100px); pointer-events: none;}
.ph-sneak-panel-text p { margin: 0; color: var(--white-80);}
/* Maximaal vier kaarten plus "Meer sneak preview aanbod" in een Owl Carousel (autoWidth, slepen,
   geen pijlen of bolletjes). De stage-outer houdt ruimte voor het uitstekende label en de schaduw. */
.ph-sneak-panel-cards { flex: 1 1 auto; min-width: 0; padding: 32px 0;}
.ph-sneak-panel-cards .owl-stage-outer { margin: -16px -16px -24px -8px; padding: 16px 16px 24px 8px;}
.ph-sneak-panel-item { width: min(360px, 75vw); height: 424px;}

@media (max-width: 1199.98px) {
    .ph-sneak-panel { flex-direction: column; padding: 0 0 24px 24px;}
    .ph-sneak-panel-text { flex-basis: auto; padding: 40px 24px 0;}
    .ph-sneak-panel-cards { padding: 0;}
}

@media (max-width: 767.98px) {
    .ph-sneak-panel-item { width: 220px; height: 264px;}
}

/* Nieuw in de verkoop (Figma "Frame 399", node 2569-31870): padding 40 0, 32 tussen kop en
   rij, vier vaste kaarten naast elkaar met 24px ertussen */
.ph-home-new { padding: 40px 0;}
.ph-home-section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 32px;}
.ph-home-new-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px;}

@media (max-width: 1199.98px) {
    .ph-home-new-grid { grid-template-columns: repeat(2, minmax(0, 1fr));}
}

/* Mobiel (Figma node 3873-63857): kop, kaarten, dan de link onder de woningen, 16px ertussen; link 16px met pijl 20px */
@media (max-width: 767.98px) {
    .ph-home-new { display: flex; flex-direction: column; gap: 16px;}
    .ph-home-new .ph-home-section-head { display: contents;}
    .ph-home-new .ph-home-link-text { order: 1; align-self: flex-start; font-size: 16px;}
    .ph-home-new .ph-home-link-text svg { width: 20px; height: 20px;}
    .ph-home-new-grid { scrollbar-width: none;}
    .ph-home-new-grid::-webkit-scrollbar { display: none;}
}

/* Tekstlink met pijl ("Al het aanbod", "Alles over ...") */
.ph-home-link-text { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-primary); font-size: 18px; line-height: 1; font-weight: 500; color: inherit; text-decoration: none; white-space: nowrap;}
.ph-home-link-text:hover { color: inherit; text-decoration: underline;}
.ph-home-link-text svg { width: 24px; height: 24px;}

/* Direct naar wat je zoekt (render_direct_naar, Figma "Frame 447", ook op Over Powerhuys): padding 80 0,
   twee kolommen met 80px ertussen; links intro + Kopen (40px ertussen), rechts Verkopen */
.ph-home-direct { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 80px; align-items: start; padding: 80px 0;}
.ph-home-direct-left { display: flex; flex-direction: column; gap: 40px;}
.ph-home-direct-intro { display: flex; flex-direction: column; gap: 16px;}
.ph-home-direct-intro h2, .ph-home-direct-intro p { margin: 0;}

@media (max-width: 991.98px) {
    .ph-home-direct { grid-template-columns: minmax(0, 1fr); gap: 40px;}
}

/* Mobiel Home: overal 40px tussen de onderdelen (Figma "Home (niet ingelogd) | Consumenten"); elk onderdeel alleen 40px onderaan,
   zodat het klopt als Nieuw in de verkoop of het app-blok ontbreekt (Sneak preview heeft al margin-bottom 40) */
@media (max-width: 767.98px) {
    .ph-home .ph-home-new, .ph-home .ph-home-direct, .ph-home .ph-home-app { padding: 0 0 40px;}
    .ph-home .ph-faq { padding-top: 0;}
}

.ph-home-direct-card { overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-label);}
.ph-home-direct-photo { height: 320px; background-color: var(--primary-600); background-size: cover; background-position: center;}
.ph-home-direct-photo-kopen { background-image: url('/assets/images/home-kopen-content.jpg');}
.ph-home-direct-photo-verkopen { background-image: url('/assets/images/home-verkopen-content.jpg');}
.ph-home-direct-body { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding: 40px;}
.ph-home-direct-card-kopen .ph-home-direct-body { background-color: var(--primary); color: var(--white);}
.ph-home-direct-card-verkopen .ph-home-direct-body { background-color: var(--secondary); color: var(--primary);}
.ph-home-direct-title { display: flex; flex-direction: column; gap: 4px;}
.ph-home-direct-title h3, .ph-home-direct-title p { margin: 0; color: inherit;}
.ph-home-direct-title p a { color: inherit; text-decoration: underline;}
.ph-home-direct-links { display: flex; flex-direction: column; gap: 16px; align-self: stretch;}
.ph-home-direct-body > .ph-home-link-text { opacity: .8;}

@media (max-width: 575.98px) {
    .ph-home-direct-body { padding: 24px;}
    /* "Alles over het verkopen van je woning →" past niet op één regel */
    .ph-home-direct-body > .ph-home-link-text { white-space: normal;}
}

/* Linkregel (Figma "Frame 491"): padding 8/24/8/8, gap 16, radius 16, icoonvlak 64×64 */
.ph-home-link { display: flex; align-items: center; gap: 16px; padding: 8px 24px 8px 8px; border-radius: var(--radius-md); background-color: var(--white); color: var(--primary); font-family: var(--font-primary); font-size: 18px; line-height: 1; font-weight: 500; text-decoration: none; transition: background-color .3s ease-out;}
.ph-home-link:hover { background-color: var(--green-200); color: var(--primary);}
.ph-home-link-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 64px; height: 64px; border-radius: var(--radius-sm); color: var(--white); background-color: var(--primary);}
.ph-home-direct-card-verkopen .ph-home-link-icon { background-color: var(--secondary);}

/* Download de PowerHuys app (Figma "download-app-cta", node 3002-106815): padding 80 0; donkergroen
   blok met radius 40, padding 80/100 en twee kolommen met 80px ertussen. De gouden en roze gloed
   (Figma-SVG's op hun eigen maat) lopen buiten het blok door; de telefoons (498×513) steken boven
   en onder uit de rechterkolom (231 hoog, padding-bottom 40), met een gouden gloed erachter. */
.ph-home-app { padding: 80px 0;}
.ph-home-app-blok { position: relative; display: flex; align-items: center; gap: 80px; padding: 80px 100px; border-radius: var(--radius-xl); background-color: var(--bg-inverse);}
.ph-home-app-gloed { position: absolute; max-width: none; pointer-events: none;}
.ph-home-app-gloed-goud { top: 50%; right: -80px; transform: translateY(-50%);}
.ph-home-app-gloed-roze { right: 100px; bottom: -250px;}
.ph-home-app-tekst { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 40px;}
.ph-home-app-tekst h2, .ph-home-app-tekst p { margin: 0;}
.ph-home-app-tekst p { font-size: var(--body-default-size); line-height: var(--body-default-line); color: var(--text-inverse-secondary);}
.ph-home-app-beeld { position: relative; flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; height: 231px; padding-bottom: 40px;}
.ph-home-app-beeld-gloed { top: 50%; left: 50%; transform: translate(-50%, -50%);}
.ph-home-app-telefoon { position: relative; flex-shrink: 0; width: 498px; height: 513px;}
/* Figma "Store Button": padding 8/16, gap 4, radius 8; logovlak 40×40 (padding 2), "Get it on" 12px, naam 16/24 semibold */
.ph-store-button { display: inline-flex; align-items: center; gap: 4px; padding: 8px 16px; border: 1px solid var(--store-button-stroke); border-radius: var(--radius-sm); background-color: var(--store-button-bg); color: var(--store-button-text); text-decoration: none; white-space: nowrap;}
.ph-store-button:hover { color: var(--store-button-text);}
.ph-store-button img { margin: 2px;}
.ph-store-button-tekst { display: flex; flex-direction: column; font-size: 12px; line-height: normal;}
.ph-store-button-tekst strong { font-size: 16px; line-height: 24px; font-weight: 600;}

@media (max-width: 991.98px) {
    .ph-home-app-blok { flex-direction: column; gap: 40px; padding: 48px 24px 0; overflow: hidden;}
    .ph-home-app-gloed-goud { top: auto; bottom: -300px; right: -300px; transform: none;}
    .ph-home-app-gloed-roze { display: none;}
    .ph-home-app-tekst, .ph-home-app-beeld { flex: 0 0 auto; width: 100%;}
    .ph-home-app-beeld { height: auto; padding-bottom: 0;}
    .ph-home-app-telefoon { flex-shrink: 1; width: 100%; max-width: 498px; height: auto;}
}

/* Veelgestelde vragen (Figma "FAQ"): padding 80/0/40, 40px tussen kop en lijst, items 800px */
.ph-faq { display: flex; flex-direction: column; align-items: center; gap: 40px; padding: 80px 0 40px;}
.ph-faq-head { display: flex; flex-direction: column; gap: 8px; max-width: 800px; text-align: center;}
.ph-faq-head h2 { margin: 0;}
.ph-faq-list { width: 100%; max-width: 800px;}
.ph-faq-item { border-bottom: 1px solid var(--stroke-secondary);}
/* Vraag Headline Small (Figma "FAQ" 382:987); plus/min 20 lang, 2px met ronde uiteinden */
.ph-faq-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 16px; border: none; background: transparent; color: var(--text-default); font-family: var(--font-primary); font-size: var(--headline-sm-size); line-height: var(--headline-sm-line); font-weight: var(--font-weight-headline); text-align: left;}
.ph-faq-icon { position: relative; flex-shrink: 0; width: 24px; height: 24px;}
.ph-faq-icon::before, .ph-faq-icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 20px; height: 2px; border-radius: 1px; background-color: var(--icon-accent-primary); transform: translate(-50%, -50%); transition: transform .2s ease-out;}
.ph-faq-icon::after { transform: translate(-50%, -50%) rotate(90deg) scaleX(0);}
.ph-faq-toggle.collapsed .ph-faq-icon::after { transform: translate(-50%, -50%) rotate(90deg);}
.ph-faq-answer { margin: 0; padding: 0 16px 16px; font-size: var(--body-default-size); line-height: var(--body-default-line); color: var(--text-secondary);}
/* Optionele tekstknop onder het antwoord ('link' in render_faq) */
.ph-faq-link { margin: 0 16px 16px;}

/* === 10. Pagina — Aanbod (Figma "Aanbod (lijst)" 2874-16011, "Aanbod (kaart)" 2874-15796) ===
   Lijst: linkerkolom (filterbalk, kop, kaarten, paginering) + zijpaneel van 400px, 40px ertussen.
   Kaart: filterbalk over de hele breedte, daaronder kaarten en kaart in twee gelijke kolommen. */

.ph-aanbod-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 40px;}
.ph-aanbod-kaart-weergave .ph-aanbod-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; margin-top: 24px;}
.ph-aanbod-main { min-width: 0;}

/* Filterbalk (Figma "Frame 425"): wit, padding 16, radius 16, 10px tussen de velden. Scrolt mee
   met de pagina (niet sticky), in de lijst- en de kaartweergave. */
.ph-aanbod-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 16px; border-radius: var(--radius-md); background-color: var(--bg-secondary);}
.ph-aanbod-filters { display: flex; flex: 1 1 auto; align-items: center; gap: 10px;}
.ph-aanbod-kaart-weergave .ph-aanbod-filters { flex: 0 1 auto;}
/* Lijst: Filters, Prijs en Woonoppervlakte even breed (Figma flex 1), maar nooit smaller dan hun tekst; past de rij niet, dan naar de volgende regel */
.ph-aanbod-lijst-weergave .ph-aanbod-filters { flex-wrap: wrap;}
.ph-aanbod-lijst-weergave .ph-aanbod-filters > * { flex: 1 1 0; min-width: max-content;}
.ph-aanbod-bewaar { flex: 0 0 auto;}
/* Zoekveld (Figma "Input field" + "Radius"): 48 hoog, padding 8/16, gap 8; straal achter een lijn van 30px */
.ph-zoekveld { position: relative; display: flex; flex: 1 1 100%; align-items: center; gap: 8px; min-width: 0; height: var(--input-height); padding: 8px var(--input-padding-h); border: 1px solid var(--stroke-default); border-radius: var(--radius-sm); background-color: var(--bg-secondary); color: var(--icon-default);}
.ph-aanbod-zoekrij .ph-zoekveld { flex: 1 1 calc((100% - 30px) / 4);}
/* /huis-kopen: zoekveld en "Bewaar filters" op één rij; de knop is zo breed als hij nodig heeft, het zoekveld vult de rest */
.ph-aanbod-zoekrij { display: flex; flex: 1 1 100%; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0;}
.ph-aanbod-zoekrij .ph-zoekveld { flex: 1 1 0;}
.ph-aanbod-zoekrij .ph-aanbod-bewaar { flex: 0 0 auto; white-space: nowrap;}
.ph-aanbod-kaart-weergave .ph-aanbod-zoekrij { flex: 1 1 480px;}
.ph-aanbod-lijst-weergave .ph-aanbod-filters { flex-basis: 100%;}
.ph-zoekveld > svg { flex-shrink: 0; width: var(--input-icon-size); height: var(--input-icon-size);}
.ph-zoekveld input { flex: 1 1 auto; min-width: 0; padding: 0; border: none; outline: none; background: transparent; font-family: var(--font-primary); font-size: var(--input-font-size); line-height: var(--label-default-line); color: var(--text-default);}
.ph-zoekveld input::placeholder { color: var(--text-secondary);}
/* Gekozen plaats (/huis-kopen, Figma "Label plaats"): .ph-filter-chip in het veld, op de plek van het zoekveld; lange namen afkappen; op desktop 1px lager (stond 1px te hoog) */
.ph-zoekveld-plaats { position: relative; top: 1px; display: flex; flex: 1 1 auto; min-width: 0;}
.ph-zoekveld-plaats:not(:has(.ph-filter-chip)) { display: none;}
.ph-zoekveld-plaats:has(.ph-filter-chip) + input { display: none;}
.ph-zoekveld-plaats .ph-filter-chip { min-width: 0; white-space: nowrap;}
.ph-zoekveld-plaats .ph-filter-chip span { overflow: hidden; text-overflow: ellipsis;}
.ph-zoekveld-radius { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 0 0 12px; border: none; border-left: 1px solid var(--stroke-default); background: transparent; font-family: var(--font-primary); font-size: var(--input-font-size); line-height: var(--label-default-line); color: var(--text-secondary); white-space: nowrap;}
.ph-zoekveld-radius svg { width: 24px; height: 24px;}
/* Filterknop (Figma "Frame 145/146/147/148"): 48 hoog, padding 8/16 (lijst 18), Label Small, chevron 20 */
.ph-filter-pill { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 8px 16px; border: 1px solid var(--stroke-default); border-radius: var(--radius-sm); background-color: var(--bg-secondary); color: var(--text-default); font-family: var(--font-primary); font-size: var(--label-sm-size); line-height: var(--label-sm-line); font-weight: var(--font-weight-body); white-space: nowrap; text-decoration: none; transition: background-color .3s ease-out, border-color .3s ease-out;}
.ph-aanbod-lijst-weergave .ph-aanbod-filters .ph-filter-pill { width: 100%; padding-inline: 18px;}
.ph-filter-pill:hover, .ph-filter-pill[aria-expanded="true"] { background-color: var(--green-200); color: var(--text-default);}
.ph-filter-pill.is-actief { border-color: var(--primary);}
.ph-filter-pill svg { flex-shrink: 0; width: var(--icon-size-medium); height: var(--icon-size-medium);}
.ph-filter-pill-label { flex: 1 1 auto; text-align: left;}
/* Tekst in een pil niet afkappen: de pil is altijd zo breed als de tekst en loopt anders door naar de volgende regel */
.ph-filter-pill-tekst { flex-shrink: 0;}
.ph-filter-pill-icoon { justify-content: center; width: 48px; padding: 0;}
.ph-filter-teller { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 24px; height: 24px; border-radius: 40px; background-color: var(--green-500);}
.ph-filter-menu { min-width: 224px; padding: 12px; border: none; border-radius: var(--radius-sm); box-shadow: var(--shadow-float);}
.ph-filter-menu .dropdown-item { padding: 8px 12px; border-radius: var(--radius-sm); font-family: var(--font-primary); font-size: var(--label-sm-size); line-height: var(--label-sm-line); color: var(--text-default); cursor: pointer;}
.ph-filter-menu .dropdown-item:hover, .ph-filter-menu .dropdown-item:focus-within { background-color: var(--green-200);}
.ph-aanbod-filters .ph-filter-pill { justify-content: space-between;}
.ph-filter-menu .dropdown-item.active, .ph-filter-menu .dropdown-item.active:hover { background-color: var(--primary); color: var(--white);}
.ph-filter-panel { min-width: min(320px, calc(100vw - 32px));}
/* Prullenbak: 24px in secundaire kleur, rood bij hover; klikvlak 40px (padding 8, negatieve marge). Bovenaan uitgelijnd en midden op de velden, zodat hij niet verschuift als de foutmelding eronder verschijnt */
.ph-filter-bereik-rij { display: flex; align-items: flex-start; gap: 5px;}
.ph-filter-bereik-wissen { display: inline-flex; flex-shrink: 0; margin: calc((var(--input-height) - 40px) / 2) -8px -8px; padding: 8px; border: none; border-radius: var(--radius-sm); background: none; color: var(--icon-secondary); cursor: pointer; transition: color .2s ease-out, background-color .2s ease-out;}
.ph-filter-bereik-wissen:hover, .ph-filter-bereik-wissen:focus-visible { color: var(--black);}
.ph-filter-bereik-wissen svg { width: 24px; height: 24px;}
/* Zonder ingevuld veld valt er niets te wissen */
.ph-filter-bereik-rij:has(input:placeholder-shown + input:placeholder-shown) .ph-filter-bereik-wissen { display: none;}


/* Filterpopup (Figma "Filter popup" 3139-94223, frame 3114-92718): Bootstrap-modal van 600 breed en
   max. 720 hoog met overlay, radius 24; kop "Filters [n]" + Sluiten en de knop "Toon N resultaten"
   staan vast (padding 24, lijn ertussen), de secties scrollen met een lijn tussen elke sectie. */
.ph-filter-popup { --bs-modal-width: 600px; --bs-modal-padding: 24px; --bs-modal-header-padding: 24px; --bs-modal-border-width: 0; --bs-modal-border-radius: var(--radius-lg); --bs-modal-inner-border-radius: var(--radius-lg); --bs-modal-box-shadow: var(--shadow-float); --bs-modal-header-border-color: var(--stroke-secondary); --bs-modal-footer-border-color: var(--stroke-secondary); --bs-modal-footer-gap: 0;}
.ph-filter-popup .modal-content { max-height: min(720px, 100%); box-shadow: var(--bs-modal-box-shadow);}
.ph-filter-popup .modal-header { justify-content: space-between; gap: 16px;}
.ph-filter-popup .modal-body { padding-top: 16px;}
.ph-filter-popup-titel { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--body-default-size); line-height: var(--body-default-line); font-weight: 500; color: var(--text-default);}
.ph-filter-popup-titel .ph-filter-teller { font-size: var(--label-sm-size); line-height: var(--label-sm-line); font-weight: 500;}
.ph-filter-sectie { display: flex; flex-direction: column; gap: 8px; padding-bottom: 16px; border-bottom: 1px solid var(--stroke-secondary);}
.ph-filter-sectie:last-child { padding-bottom: 0; border-bottom: none;}
.ph-filter-sectie-kop { margin: 0; font-size: var(--body-default-size); line-height: var(--body-default-line); font-weight: 500; color: var(--text-default);}
/* Actief filter (Figma "Filter item"): groen, padding 8/16, radius 8, kruisje in een vak van 24 */
.ph-filter-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: var(--radius-sm); background-color: var(--green-500); font-size: var(--label-sm-size); line-height: var(--label-sm-line); color: var(--text-default); text-decoration: none; transition: background-color .3s ease-out;}
.ph-filter-chip:hover { background-color: var(--green-200); color: var(--text-default);}
.ph-filter-chip svg { flex-shrink: 0; margin: 5px;}
.ph-filter-wissen { align-self: flex-start; font-size: var(--label-default-size); line-height: var(--label-default-line); font-weight: 500; color: var(--text-secondary); text-decoration: none;}
.ph-filter-wissen:hover { color: var(--text-default);}

/* Vinkjes en radio's: design-system-opmaak in sectie 4; label Body Small secundair */
.ph-filter-popup .form-check { display: flex; align-items: center; gap: 8px; min-height: 0; margin: 0; padding-left: 0;}
.ph-filter-popup .form-check-input { float: none;}
.ph-filter-popup .form-check-label, .ph-filter-aantal { font-size: var(--body-sm-size); line-height: var(--body-sm-line); color: var(--text-secondary);}
.ph-filter-popup .ph-woningtype-optie .form-check-label { font-size: var(--body-default-size); line-height: var(--body-default-line);}

/* Resultaatkop (Figma "Frame 427"): 24 boven (kaart 16), Display Small + Body Default, lijn eronder */
.ph-aanbod-kop { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 24px; padding: 24px 0; border-bottom: 1px solid var(--stroke-secondary);}
/* Kaartweergave: aantal, sorteren en lijst-knop staan bovenaan gelijk met de kaart, 24px onder de filters (grid margin-top). */
.ph-aanbod-kaart-weergave .ph-aanbod-kop { padding-top: 0;}
.ph-aanbod-kop-tekst { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; min-width: 0;}
/* Alleen mobiel (Figma app 2049:4599): kaartknop naast het zoekveld; in de kop sorteren, bewaren en filters als iconen */
.ph-aanbod-mobiel { display: none;}
.ph-aanbod-sorteren > svg:first-child { display: none;}
/* Mobiel: chevron met Filters, Sorteren en Bewaren verticaal eronder (zwevend); de chevron draait om als de kolom open is */
.ph-aanbod-acties-wrap { position: relative; flex-shrink: 0;}
/* Kolom schuift 8px omlaag en faadt in, gelijk met het omdraaien van de chevron (zelfde duur en curve);
   dicht blijft hij onzichtbaar en niet klikbaar (visibility pas na het uitfaden) */
.ph-aanbod-acties { position: absolute; top: calc(100% + 8px); left: 0; z-index: 5; display: flex; flex-direction: column; gap: 8px; visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .18s ease-out, transform .18s ease-out, visibility 0s linear .18s;}
.ph-aanbod-acties-wrap.is-open .ph-aanbod-acties { visibility: visible; opacity: 1; transform: none; transition: opacity .18s ease-out, transform .18s ease-out, visibility 0s;}
.ph-aanbod-acties .ph-filter-pill { box-shadow: var(--shadow-control);}
/* Chevron omhoog als het menu dicht is, omlaag als het open is */
.ph-aanbod-acties-knop svg { transform: rotate(-180deg); transition: transform .2s ease-out;}
.ph-aanbod-acties-wrap.is-open .ph-aanbod-acties-knop svg { transform: none;}
@media (prefers-reduced-motion: reduce) {
    .ph-aanbod-acties, .ph-aanbod-acties-knop svg { transition: none;}
}
.ph-aanbod-acties-wrap .ph-filter-pill { position: relative;}
.ph-aanbod-acties-wrap .ph-filter-teller { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; font-size: 12px;}
.ph-aanbod-acties-wrap.is-open .ph-aanbod-acties-knop .ph-filter-teller { display: none;}
/* Menu rechts van het zoekveld (/favorieten): kolom rechts uitgelijnd */
.ph-aanbod-acties-rechts .ph-aanbod-acties { right: 0; left: auto;}
/* Bewaren roze met witte diskette, zoals "Bewaar filters" op desktop (.btn-pink); hover wit met roze */
.ph-aanbod-acties .ph-aanbod-acties-bewaar { border-color: var(--pink-500); background-color: var(--pink-500); color: var(--white);}
.ph-aanbod-acties .ph-aanbod-acties-bewaar:hover { background-color: var(--white); color: var(--pink-500);}

.ph-aanbod-aantal { margin: 0; color: var(--text-default);}
.ph-aanbod-plaats { color: var(--text-secondary);}
.ph-aanbod-plaats a { color: var(--primary);}
/* Intro en woningmarkt (SEO-teksten op /huis-kopen/{plaats}): tekst secundair, links primair */
.ph-aanbod-tekst { color: var(--text-secondary);}
.ph-aanbod-tekst a { color: var(--primary);}
.ph-aanbod-intro:not(.is-open) { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding-right: 35px;}
.ph-aanbod-lijst { display: flex; flex-direction: column; gap: 16px;}
.ph-aanbod-resultaten.is-laden { pointer-events: none;}
.ph-aanbod-resultaten.is-laden > :not(.ph-aanbod-lijst, .ph-casussen-lijst), .ph-aanbod-resultaten.is-laden .ph-aanbod-lijst > :not(.card-woning), .ph-aanbod-resultaten.is-laden .card-woning > :not(.card-photo-wrap), .ph-aanbod-resultaten.is-laden .card-photo-wrap > *, .ph-aanbod-resultaten.is-laden .ph-casus > :not(.ph-casus-foto), .ph-aanbod-resultaten.is-laden .ph-casus-foto > * { opacity: .5;}
.ph-aanbod-resultaten.is-laden :is(.card-photo-wrap, .ph-casus-foto)::after { position: absolute; inset: 0; z-index: 2; margin: auto;}
.ph-aanbod-leeg { margin: 0; color: var(--text-secondary);}

/* Paginering (Figma "Pagination"): Terug/Volgende 44 hoog met rand 20%, nummers 44×44 */
.ph-paginering { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-top: 24px;}
.ph-paginering-stap { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 8px 12px; border: 1px solid var(--stroke-secondary); border-radius: var(--radius-sm); background-color: var(--white); font-size: var(--body-default-size); line-height: var(--body-default-line); color: var(--text-default); text-decoration: none; transition: background-color .3s ease-out;}
.ph-paginering-stap svg { flex-shrink: 0; width: var(--icon-size-medium); height: var(--icon-size-medium);}
.ph-paginering-volgende svg { transform: scaleX(-1);}
.ph-paginering-stap.is-uit { color: var(--primary-20);}
.ph-paginering-nummers { display: flex; gap: 4px;}
.ph-paginering-nummers.ph-paginering-mobiel { display: none;}
.ph-paginering-nummer { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid transparent; border-radius: var(--radius-sm); font-size: var(--body-default-size); line-height: var(--body-default-line); color: var(--text-default); text-decoration: none; transition: background-color .3s ease-out;}
a.ph-paginering-stap:hover { background-color: var(--green-200); color: var(--text-default);}
/* Figma "Number" Hover: wit met rand 20% */
a.ph-paginering-nummer:hover { border-color: var(--stroke-secondary); background-color: var(--white); color: var(--text-default);}
.ph-paginering-nummer.is-actief { border-color: var(--primary); background-color: var(--primary); color: var(--white);}

/* Zijpaneel: zo hoog als de kolom, zonder eigen rand, zodat het CTA-blok erin sticky kan zijn (16px onder
   de topbar). De rand (20%) en radius 16 horen bij het CTA-blok zelf. */
.ph-aanbod-zijpaneel .ph-aanbod-cta { position: sticky; top: calc(var(--header-height) - var(--header-links-height) + 16px); border: 1px solid var(--stroke-secondary);}
/* Het bewijs, verkoop (render_bewijs_cta(), Figma 3705:58160): groene kop (padding 24/24/40, radius 16 boven, rand 20%),
   het donkere blok (padding 24) schuift er 16px overheen */
.ph-bewijs-cta { position: sticky; top: calc(var(--header-height) - var(--header-links-height) + 16px); display: flex; flex-direction: column;}
.ph-bewijs-cta-kop { padding: 24px 24px 40px; border: 1px solid var(--stroke-secondary); border-bottom: 0; border-radius: var(--radius-md) var(--radius-md) 0 0; background-color: var(--green-500); font-size: var(--headline-md-size); line-height: var(--headline-md-line); font-weight: var(--font-weight-headline); color: var(--text-default);}
.ph-bewijs-cta-blok { margin-top: -16px; padding: 24px;}
.ph-bewijs-cta-blok p { font-size: var(--body-default-size); line-height: var(--body-default-line); color: var(--text-inverse);}

/* Mobiel: geen lichtgroene kop "Denk je aan verkopen?", alleen het donkere blok */
@media (max-width: 767.98px) {
    .ph-bewijs-cta-kop { display: none;}
    /* Verloop dark green 900 → 600 van links naar rechts (Figma "Waardebapling banner") */
    .ph-bewijs-cta-blok { margin-top: 0; background-image: linear-gradient(to right, var(--primary), var(--primary-600));}
    /* Kop Display Regular (24px op mobiel), Figma "Waardebapling banner" 4029-8668 */
    .ph-bewijs-cta-blok h2 { font-size: var(--display-md-size); line-height: var(--display-md-line);}
}
/* CTA blok: foto in beeldmerkvorm (405×523, alleen de onderste 301px zichtbaar) met slogan in de uitsparing */
.ph-aanbod-cta { display: flex; flex-direction: column; gap: 16px; overflow: clip; border-radius: var(--radius-md); background-color: var(--bg-secondary);}
.ph-aanbod-cta-beeld { position: relative; display: flex; align-items: flex-end; justify-content: center; height: 301px; overflow: hidden;}
.ph-aanbod-cta-foto { flex: 0 0 405px; height: 522.65px; background: url('/assets/images/aanbod/cta-foto.png') center / cover no-repeat; -webkit-mask: url('/assets/images/aanbod/cta-masker.svg') 0 0 / 100% 100% no-repeat; mask: url('/assets/images/aanbod/cta-masker.svg') 0 0 / 100% 100% no-repeat;}
.ph-aanbod-cta-slogan { position: absolute; top: 179.95px; left: calc(50% - 97.29px); display: flex; align-items: center; width: 89.37px; height: 112px; margin: 0; font-size: var(--body-default-size); line-height: normal; color: var(--text-default);}
.ph-aanbod-cta-body { display: flex; flex-direction: column; gap: 24px; padding: 16px; text-align: center;}
.ph-aanbod-cta-tekst { margin: 0; color: var(--text-secondary);}

/* Banner tussen de woningkaarten (render_aanbod_banner(), Figma "Sneak Preview banner" 3816:40522): verloop dark green → 600,
   radius 16, padding 0 40, gap 40, 286 hoog. Tekstkolom padding 40 0: titel Display Small goud, tekst Body Default 80% wit,
   knop onderaan. Telefoon (152 breed) in een kolom van 240, 24px van de bovenkant, onderaan afgesneden; de gouden gloed
   (Ellipse 60) achter de telefoon. Lid (Figma "Waardebepaling banner" 4160:86838): 284 hoog, gap 80, geen gloed; rechts
   een foto van 340×268 bovenaan, in de vorm van het beeldmerk (cta-masker.svg, 340×439 met de onderkant gelijk aan de
   foto), de slogan Body Small wit in de uitsparing (75 breed, 88 van links, 176 van boven). */
.ph-aanbod-banner { position: relative; isolation: isolate; overflow: hidden; display: flex; gap: 40px; min-height: 286px; padding: 0 40px; border-radius: var(--radius-md); background: linear-gradient(90deg, var(--primary), var(--primary-600)); box-shadow: 0 2px 16px rgba(var(--black-rgb), .25); color: var(--text-inverse);}
.ph-aanbod-banner.is-waardebepaling { gap: 80px; min-height: 284px;}
.ph-aanbod-banner-gloed { position: absolute; z-index: -1; top: -160px; right: -116px; max-width: none; pointer-events: none;}
.ph-aanbod-banner-tekst { display: flex; flex-direction: column; align-items: flex-start; flex: 1 1 0; gap: 16px; min-width: 0; padding: 40px 0;}
.ph-aanbod-banner-titel { font-family: var(--font-display); font-stretch: var(--font-display-stretch); font-weight: var(--font-weight-display); font-size: var(--display-sm-size); line-height: var(--display-sm-line); text-transform: uppercase;}
.ph-aanbod-banner-intro { flex: 1 1 auto; margin: 0; color: var(--text-inverse-secondary);}
.ph-aanbod-banner-telefoon { position: relative; flex: 0 0 240px;}
.ph-aanbod-banner-telefoon img { position: absolute; top: 24px; left: 44px; width: 152px; height: 311px;}
/* Kaartweergave (Figma 3816:40523, 620 breed): telefoonkolom zo breed als de telefoon (152) */
@media (min-width: 768px) {
    .ph-aanbod-kaart-weergave .ph-aanbod-banner-telefoon { flex-basis: 152px;}
    .ph-aanbod-kaart-weergave .ph-aanbod-banner-telefoon img { left: 0;}
    .ph-aanbod-kaart-weergave .ph-aanbod-banner-gloed { right: -204px;}
}
.ph-aanbod-banner-foto { position: relative; flex: 0 0 340px; height: 268px; background: url('/assets/images/aanbod/waardebepaling-foto.png') -22.6px -10.45px / 419.2px 279.45px no-repeat; -webkit-mask: url('/assets/images/aanbod/cta-masker.svg') 0 -171px / 340.1px 439.07px no-repeat; mask: url('/assets/images/aanbod/cta-masker.svg') 0 -171px / 340.1px 439.07px no-repeat;}
.ph-aanbod-banner-slogan { position: absolute; top: 176px; left: 88px; display: flex; align-items: center; width: 75px; height: 85px; margin: 0; font-size: var(--body-sm-size); line-height: normal; color: var(--text-inverse);}

/* Kaart (Figma "Map"): 640 hoog, blijft 16px onder de topbar staan; zoomknoppen 24px van de hoek */
.ph-aanbod-kaart { position: sticky; top: calc(var(--header-height) - var(--header-links-height) + 16px); height: 640px; overflow: hidden; border-radius: var(--radius-lg); background-color: var(--green-200);}
.ph-aanbod-kaart-canvas { width: 100%; height: 100%;}
.ph-aanbod-kaart-melding { display: flex; align-items: center; justify-content: center; height: 100%; margin: 0; padding: 24px; text-align: center; color: var(--text-secondary);}
.ph-kaart-zoom { position: absolute; right: 24px; bottom: 24px; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-sm); background-color: var(--white); box-shadow: var(--shadow-control);}
.ph-kaart-zoom button { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: none; background: transparent; color: var(--icon-default);}
.ph-kaart-zoom button + button { border-top: 1px solid var(--stroke-secondary);}
.ph-kaart-zoom button:hover { background-color: var(--green-200);}
.ph-kaart-zoom svg { width: var(--icon-size-default); height: var(--icon-size-default);}

/* Touchscreens: zoomknoppen 44 i.p.v. 40 */
@media (pointer: coarse) {
    .ph-kaart-zoom button { width: 44px; height: 44px;}
}
/* Pin (Figma "PH Logo Icon"): 40×40, rand 4 wit, radius 8, witte punt eronder */
.ph-kaart-pin { position: relative; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: 8px; padding: 3px 5px; border: 4px solid var(--white); border-radius: var(--radius-sm); background-color: var(--primary); cursor: pointer; transition: background-color .2s ease-out, transform .2s ease-out;}
.ph-kaart-pin::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -7px; border-top: 12px solid var(--white); border-right: 7px solid transparent; border-left: 7px solid transparent;}
.ph-kaart-pin img { display: block; width: 20px; height: 26px;}
/* Gekozen pin (klik): goud, iets groter */
.ph-kaart-pin.is-actief { background-color: var(--secondary); transform: scale(1.15); transform-origin: bottom center;}
/* Cluster (Figma "Pins"): cirkel van 24px met aantal, gecentreerd op het punt */
.ph-kaart-cluster { display: flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 4px; border: 2px solid var(--white); border-radius: 999px; background-color: var(--bg-inverse); color: var(--white); font-size: 12px; line-height: 1; font-weight: 700; box-shadow: var(--shadow-pin); transform: translateY(50%); cursor: pointer;}

@media (max-width: 1199.98px) {
    .ph-aanbod-grid, .ph-aanbod-kaart-weergave .ph-aanbod-grid { grid-template-columns: minmax(0, 1fr);}
    .ph-aanbod-zijpaneel { justify-self: center; width: 400px; max-width: 100%;}
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .ph-aanbod-kaart-weergave .ph-aanbod-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);}
}

@media (max-width: 991.98px) {
    .ph-aanbod-kaart { position: relative; top: 0; order: -1; height: 400px;}
    .ph-aanbod-kaart-weergave .ph-aanbod-filters { flex: 1 1 100%; flex-wrap: wrap;}
}

@media (max-width: 767.98px) {
    .ph-aanbod-filterbar { padding: 0; border-radius: 0; background-color: transparent;}
    .ph-zoekveld-plaats { top: 0;}
    .ph-aanbod-filters { flex: 1 1 100%; flex-wrap: wrap;}
    .ph-aanbod-lijst-weergave .ph-filter-filters { flex-basis: 100%;}
    .ph-aanbod-bewaar { flex: 1 1 100%;}
    .ph-aanbod-zoekrij .ph-aanbod-bewaar { flex: 1 1 100%;}
    .ph-filter-pill { height: var(--input-height);}
    .ph-aanbod-mobiel { display: inline-flex;}
    .ph-aanbod-desktop, .ph-aanbod-filters, .ph-aanbod-zoekrij .ph-aanbod-bewaar { display: none;}
    .ph-aanbod-zoekrij { flex-wrap: nowrap;}
    .ph-aanbod-zoekrij .ph-zoekveld { flex: 1 1 0;}
    .ph-aanbod-kop > :not(.ph-aanbod-kop-tekst) { display: none;}
    /* Kaart (Figma app "Kaart | Aanbod" 2044:2076): volle breedte, zoekrij zwevend erop, de resultaten eronder */
    .ph-aanbod-kaart-weergave { position: relative;}
    .ph-aanbod-kaart-weergave .ph-aanbod-filterbar { position: absolute; top: 16px; right: 0; left: 0; z-index: 3;}
    .ph-aanbod-kaart-weergave .ph-aanbod-zoekrij .ph-filter-pill, .ph-aanbod-kaart-weergave .ph-zoekveld { box-shadow: var(--shadow-control);}

    .ph-aanbod-kaart-weergave .ph-aanbod-grid { gap: 24px; margin-top: 0;}
    .ph-aanbod-kaart-weergave .ph-aanbod-kaart { height: 400px; margin-inline: calc(50% - 50vw); border-radius: 0;}
    .ph-aanbod-kaart-weergave .ph-kaart-zoom { right: 16px; bottom: 16px;}
    /* Web: de kaart begint achter de navigatiebalk en is precies één scherm hoog; de zoekrij 16px onder de balk */
    body:not(.ph-app):has(.ph-aanbod-kaart-weergave) .ph-header { position: fixed; top: 0; right: 0; left: 0;}
    body:not(.ph-app) .ph-aanbod-kaart-weergave .ph-aanbod-kaart { height: 100svh;}
    body:not(.ph-app) .ph-aanbod-kaart-weergave .ph-aanbod-filterbar { position: fixed; top: var(--header-height); right: 16px; left: 16px; z-index: 1029;}
    .ph-favorieten-sorteren, .ph-favorieten-filterbar > .ph-aanbod-bewaar { display: none;}
    /* Banner (Figma 3881:113491 en 3903:51509): padding 24, geen schaduw; tekstkolom 184 (titel Display Regular, 8 tot
       de tekst Body Small, 16 tot de tekstknop met schaduw), telefoon 114 breed in een kolom van 110; gloed gecentreerd */
    .ph-aanbod-banner { justify-content: space-between; gap: 16px; min-height: 0; padding: 24px; box-shadow: none;}
    .ph-aanbod-banner.is-waardebepaling { gap: 16px; min-height: 0;}
    .ph-aanbod-banner-gloed { right: auto; left: 50%; transform: translateX(-50%);}
    .ph-aanbod-banner-tekst { flex: 0 1 184px; gap: 8px; padding: 0;}
    .ph-aanbod-banner.is-waardebepaling .ph-aanbod-banner-tekst { flex: 1 1 auto;}
    .ph-aanbod-banner-titel { font-size: var(--display-md-size); line-height: var(--display-md-line);}
    .ph-aanbod-banner-intro { flex: none; font-size: var(--body-sm-size); line-height: var(--body-sm-line);}
    .ph-aanbod-banner .btn-text { margin-top: 8px; filter: drop-shadow(0 4px 10px rgba(var(--black-rgb), .25));}
    .ph-aanbod-banner-telefoon { flex: 0 0 110px;}
    .ph-aanbod-banner-telefoon img { top: -6px; left: -2px; width: 114px; height: 233px;}
}

@media (max-width: 575.98px) {
    /* Telefoon: pijlen zonder tekst, de korte nummerrij (1 2 3 … laatste, paginering_nummers()) in plaats van de lange */
    .ph-paginering-stap { padding: 8px 10px;}
    .ph-paginering-stap-tekst, .ph-paginering-nummers:not(.ph-paginering-mobiel) { display: none;}
    .ph-paginering-nummers.ph-paginering-mobiel { display: flex;}
    .ph-aanbod-lijst-weergave .ph-aanbod-filters .ph-filter-pill { padding-inline: 12px;}
    /* Sorteren en de kaart-/lijstknop schuiven onder het aantal woningen zodra de titel smaller dan 160px zou worden */
    .ph-aanbod-kop { flex-wrap: wrap;}
    .ph-aanbod-kop-tekst { flex-basis: 160px;}
    /* Filterpopup schermvullend (modal-fullscreen-sm-down, Figma mobiel 3329:100010) */
    .ph-filter-popup .modal-fullscreen-sm-down .modal-content { max-height: none;}
}

/* Zoekveld van de hero op Home (.ph-search-input.ph-hero-search in sectie 9) */
.ph-search-input { position: relative; flex: 1 1 240px; display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 24px; border: 1px solid var(--primary); border-right: none; border-radius: var(--radius-sm) 0 0 var(--radius-sm); background-color: var(--white); box-shadow: 0 4px 20px rgba(var(--primary-rgb), .06);}
.ph-search-input svg { flex-shrink: 0; color: var(--green-700);}
.ph-search-input input { flex: 1 1 auto; border: none; outline: none; background: transparent; font-family: var(--font-primary); font-size: 18px; color: var(--primary);}
.ph-search-input input::placeholder { color: var(--primary-600);}

/* === 11. Pagina — Woning detail (Figma "Woningpagina | Consumenten" 2874-16146, supermakelaar 2780-32736,
   "Sneak preview woningpagina" 2874-16465) — content/woning.php, content/sneak-preview-detail.php en
   de woningblokken in inc/kaarten.php (makelaarsblok, Zet de volgende stap, In de buurt, Vergelijkbaar) === */

.ph-woning-detail, .ph-sneak-detail, .ph-mijn-huys { display: flex; flex-direction: column; gap: 24px; padding: 16px 0 80px;}
.ph-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-family: var(--font-primary); font-size: 16px; line-height: 1; font-weight: 500; color: var(--primary);}
.ph-breadcrumb a { display: inline-flex; color: inherit; text-decoration: none;}
.ph-breadcrumb a:hover { text-decoration: underline;}
.ph-breadcrumb-current { font-weight: 400; color: var(--primary-600);}

/* Touchscreens: tikvlak van 44 hoog om de links (16 hoog) zonder dat de opmaak verschuift */
@media (pointer: coarse) {
    .ph-breadcrumb a { position: relative;}
    .ph-breadcrumb a::after { content: ""; position: absolute; inset: -14px -4px;}
}

/* Galerij (Figma "Frame 456"): 4 kolommen, hoofdfoto 2×2, gap 4, 447 hoog (supermakelaar 520), radius 16 op de buitenhoeken.
   De knoppen dragen data-media-tab / data-foto-index voor het media-overzicht en de lightbox. */
.ph-gallery { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 4px; height: 447px;}
.ph-gallery-groot { height: 520px;}
.ph-gallery-main, .ph-gallery-tile { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer;}
.ph-gallery-main { grid-column: span 2; grid-row: span 2; border-radius: var(--radius-md) 0 0 var(--radius-md);}
.ph-gallery-tile:nth-child(3) { border-top-right-radius: var(--radius-md);}
.ph-gallery-tile:nth-child(5) { border-bottom-right-radius: var(--radius-md);}
.ph-gallery-main img, .ph-gallery-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;}
/* Play-icoon op de videotegel: 80px, wit 60% met blur */
.ph-gallery-play { position: relative; display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; padding: 24px; border-radius: var(--radius-xl); background-color: rgba(var(--white-rgb), .6); backdrop-filter: blur(5px); color: var(--icon-default);}
.ph-gallery-play svg { width: 32px; height: 32px;}
.ph-gallery .card-woning-badge, .ph-sneak-photo .card-woning-badge, .ph-buurthuys-foto .card-woning-badge { top: 16px; left: -4px;}
/* Delen en favoriet (Figma "Filter"): 44×44, wit, radius 8, 17px uit de hoek */
.ph-gallery-actions { position: absolute; top: 17px; right: 17px; z-index: 1; display: flex; gap: 8px;}
.ph-gallery-action { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 8px; border: none; border-radius: var(--radius-sm); background-color: var(--white); color: var(--icon-default); box-shadow: var(--shadow-control); cursor: pointer;}
.ph-gallery-action svg { width: 24px; height: 24px;}
/* Mediaknoppen (Figma "Button"): 44 hoog, wit 70% met blur en witte rand, radius 8, Label Default 500; hover lichtgroen */
.ph-gallery-media { position: absolute; left: 16px; bottom: 16px; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px;}
.ph-gallery-knop { display: inline-flex; flex-shrink: 0; align-items: center; gap: 8px; height: 44px; padding: 4px 12px; border: 1px solid var(--stroke-inverse-secondary); border-radius: var(--radius-sm); background-color: rgba(var(--white-rgb), .7); backdrop-filter: blur(5px); font-family: var(--font-primary); font-size: var(--label-default-size); line-height: var(--label-default-line); font-weight: 500; color: var(--text-default); white-space: nowrap; transition: background-color .3s ease-out;}
.ph-gallery-knop:hover { background-color: var(--green-200);}
.ph-gallery-knop svg { flex-shrink: 0; width: 24px; height: 24px;}
.ph-gallery-alle { position: absolute; right: 16px; bottom: 16px; z-index: 1;}
/* Sneak preview: één foto van 520px */
.ph-sneak-photo { position: relative;}
.ph-sneak-photo > img, .ph-sneak-photo .card-photo-placeholder { display: block; width: 100%; height: 520px; object-fit: cover; border-radius: var(--radius-md); background-color: var(--primary-20);}
.ph-sneak-photo .card-photo-placeholder-logo { width: 64px; height: auto;}

@media (max-width: 767.98px) {
    .ph-gallery { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; height: auto;}
    .ph-gallery-main { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 3; border-radius: var(--radius-md);}
    .ph-gallery-tile { display: none;}
    /* Mediaknoppen op één rij die horizontaal scrolt; wrappen zou bij vier knoppen bijna de hele foto bedekken */
    .ph-gallery-media { right: 16px; bottom: 68px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;}
    .ph-sneak-photo > img, .ph-sneak-photo .card-photo-placeholder { height: auto; aspect-ratio: 4 / 3;}
}

/* Status-pill boven de omschrijving */
.ph-pill { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 8px; border-radius: 999px; font-family: var(--font-primary); font-size: 18px; font-weight: 300;}
.ph-pill-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;}
.ph-pill-success { background-color: var(--green-500); color: var(--primary);}

/* Omschrijving: 4 regels, uitklapbaar */
.ph-omschrijving-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; font-family: var(--font-primary); font-size: 16px; line-height: 20px; color: var(--green-700);}
.ph-omschrijving-text.is-expanded { display: block; overflow: visible;}
.ph-chevron { display: inline-flex; vertical-align: middle; transition: transform .2s ease-out;}
.ph-chevron.is-rotated { transform: rotate(180deg);}

/* Twee kolommen (Figma "Frame 433"): hoofdinhoud + zijbalk van 400, 40px ertussen en tussen de secties.
   De zijbalk is zo hoog als de rij, zodat alleen de CTA-kaart erin meeschuift (sticky). */
.ph-woning-layout { display: grid; grid-template-columns: minmax(0, 1fr) min(400px, 100%); gap: 40px; padding-top: 16px;}
.ph-woning-main { display: flex; flex-direction: column; gap: 40px; min-width: 0;}
.ph-woning-sidebar { display: flex; flex-direction: column; gap: 32px;}

@media (max-width: 991.98px) {
    .ph-woning-layout { grid-template-columns: minmax(0, 1fr);}
}

/* Energielabel — vlagvorm met clip-path, kleur per klasse */
.ph-energielabel { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 24px; padding-inline: 8px 12px; clip-path: polygon(0 0, 80% 0, 100% 50%, 80% 100%, 0 100%); background-color: var(--green-700); color: var(--white); font-family: var(--font-primary); font-size: 16px; font-weight: 600;}
.ph-energielabel-b { background-color: var(--primary-600);}
.ph-energielabel-c, .ph-energielabel-d { background-color: var(--bg-accent-02); color: var(--text-default);}
.ph-energielabel-e, .ph-energielabel-f { background-color: var(--secondary); color: var(--primary);}
.ph-energielabel-g { background-color: var(--pink-700);}

/* Sneak preview: kenmerken met gouden rondje en wit vinkje (.card-sneak-kenmerk, sectie 7), naast elkaar */
.ph-sneak-kenmerken { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; padding: 0; list-style: none;}

/* Dit huis in het kort (Figma "Frame 491"): witte kaart met rand, groen icoonvak van 64px, 12px tussen de kaarten */
.ph-in-het-kort-lijst { display: flex; flex-direction: column; gap: 12px;}
.ph-in-het-kort { display: flex; align-items: center; gap: 16px; padding: 16px; border: 1px solid var(--stroke-secondary); border-radius: var(--radius-md); background-color: var(--bg-secondary); font-size: var(--body-default-size); line-height: var(--body-default-line);}
.ph-in-het-kort-icoon { display: flex; flex: 0 0 64px; align-items: center; justify-content: center; height: 64px; padding: 16px; border-radius: var(--radius-sm); background-color: var(--green-500); color: var(--icon-default);}
.ph-in-het-kort-icoon svg { width: 32px; height: 32px;}
.ph-in-het-kort-titel { font-weight: 500; color: var(--text-default);}
.ph-in-het-kort-tekst { color: var(--text-secondary);}

/* Kenmerken (Figma "Kenmerken" 2780-34123): ingeklapt 400px hoog; de onderste 200px vervagen naar zand met de knop */
.ph-kenmerken { position: relative;}
.ph-kenmerken-inhoud { display: flex; flex-direction: column; gap: 15px; max-height: 400px; overflow: hidden;}
.ph-kenmerken.is-open .ph-kenmerken-inhoud { max-height: none; overflow: visible;}
.ph-kenmerken-fade { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; height: 200px; padding: 16px 24px; background: linear-gradient(rgba(var(--tertiary-rgb), 0), var(--bg-default));}
.ph-kenmerken.is-open .ph-kenmerken-fade { position: static; height: auto; background: none;}
/* Kenmerkkaart (render_info_kaart): wit, rand 1px, radius 16, padding 24; rijen met labelkolom 240 en een lijn ertussen.
   Ook gebruikt door "In de buurt" en de Verkoopstatus. */
.ph-kenmerk-groep { display: flex; flex-direction: column; isolation: isolate;}
.ph-kenmerk-kaart { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 16px; padding: 24px; border: 1px solid var(--stroke-secondary); border-radius: var(--radius-md); background-color: var(--bg-secondary);}
.ph-kenmerk-rijen { display: flex; flex-direction: column; gap: 8px;}
.ph-kenmerk-rij { display: flex; gap: 10px; font-size: var(--body-default-size); line-height: var(--body-default-line);}
.ph-kenmerk-rij + .ph-kenmerk-rij { padding-top: 8px; border-top: 1px solid var(--stroke-secondary);}
.ph-kenmerk-label { flex: 0 0 240px; color: var(--text-secondary);}
.ph-kenmerk-waarde { flex: 1 1 0; min-width: 0; color: var(--text-default);}
a.ph-kenmerk-waarde { color: var(--text-link); text-decoration: none;}
a.ph-kenmerk-waarde:hover { color: var(--text-link); text-decoration: underline;}
/* Groen blok dat 24px onder een kaart uitsteekt (Figma "Energiekosten berekenen", "Ontdek de buurt") */
.ph-groen-voet { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-top: -24px; padding: 40px 24px 24px; border: 1px solid var(--stroke-secondary); border-radius: 0 0 var(--radius-md) var(--radius-md); background-color: var(--green-500);}
.ph-groen-voet-titel { font-size: var(--headline-md-size); line-height: var(--headline-md-line); font-weight: 500; color: var(--text-default);}
.ph-groen-voet-tekst { margin: 0; color: var(--text-secondary);}

/* Telefoon: label en waarde onder elkaar (zie .ph-kenmerk-rij); anders wordt de 200px van de label de hoogte */
@media (max-width: 575.98px) {
    .ph-buurt-rij .ph-kenmerk-label { flex-basis: auto;}
}

/* Bereik (render_woning_bereik(), Figma 3470:100729): kop, de tegels naast elkaar in één witte kaart ("Opgeslagen in
   favorieten" roze, "Aantal keer gedeeld" wit; padding 24, icoon in een wit vak van 44 rechtsboven), dan de belofte
   en de views per kanaal uit de casuspagina (sectie 11b) */
.ph-woning-bereik { display: flex; flex-direction: column; gap: 24px;}
.ph-bereik-tegels { display: flex; overflow: hidden; border: 1px solid var(--stroke-secondary); border-radius: var(--radius-md); background-color: var(--bg-secondary);}
.ph-bereik-tegel { position: relative; display: flex; flex-direction: column; gap: 8px; flex: 1 1 0; min-width: 0; padding: 24px; font-size: var(--body-default-size); line-height: var(--body-default-line); color: var(--text-default);}
.ph-bereik-tegel-roze { border-radius: var(--radius-md); background-color: var(--bg-subtle-01);}
.ph-bereik-tegel-icoon { position: absolute; top: 24px; right: 24px; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-sm); background-color: var(--white); box-shadow: var(--shadow-label); color: var(--icon-default);}

/* In de buurt (Figma "Frame 397"): cijfers (label 200), kaart van 320 met pin en zoomknoppen 16px uit de hoek, gouden reistijdlink */
.ph-buurt { gap: 24px;}
.ph-buurt-cijfers { display: flex; flex-direction: column; gap: 24px; padding: 8px;}
.ph-buurt-rij .ph-kenmerk-label { flex-basis: 200px;}
.ph-buurt-kaart { position: relative; display: flex; align-items: center; justify-content: center; height: 320px; overflow: hidden; border-radius: var(--radius-md); background-color: var(--green-200);}
.ph-buurt-kaart-canvas { position: absolute; inset: 0;}
.ph-buurt-kaart .ph-kaart-zoom { right: 16px; bottom: 16px;}
/* Pin (Figma "Frame 261"): ring van 3px met een stip van 12px */
.ph-buurt-pin { display: block; width: 26px; height: 26px; padding: 4px; border: 3px solid var(--stroke-default); border-radius: var(--radius-xl); background-color: var(--bg-inverse); background-clip: content-box;}
/* Op de woningkaart is de pin (.ph-kaart-pin, zie /huis-kopen) niet klikbaar */
.ph-buurt-kaart-canvas .ph-kaart-pin { cursor: default;}
.ph-buurt-reistijd { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; font-size: var(--label-default-size); line-height: var(--label-default-line); font-weight: 500; color: var(--text-link); text-decoration: none;}
.ph-buurt-reistijd:hover { color: var(--text-link); text-decoration: underline;}
/* Popup Buurtinzichten (render_buurt_popup()): tabs als Vergelijkbaar, per rij label, balk en waarde */
.ph-buurt-popup-tabs { position: relative; flex-shrink: 0; gap: 4px; overflow-x: auto; scrollbar-width: none;}
.ph-buurt-popup-tabs::-webkit-scrollbar { display: none;}
.ph-buurt-popup-tabs .ph-vergelijkbaar-tab { flex: 1 0 auto; padding: 0 12px; white-space: nowrap;}
.ph-buurt-popup-paneel { display: flex; flex-direction: column; gap: 16px;}
.ph-buurt-popup-paneel[hidden] { display: none;}
.ph-buurt-stat { display: flex; flex-direction: column; gap: 4px;}
.ph-buurt-stat-label { font-size: var(--body-sm-size); line-height: var(--body-sm-line); color: var(--text-secondary);}
.ph-buurt-stat-meter { display: flex; align-items: center; gap: 12px;}
.ph-buurt-stat-balk { flex: 1 1 auto; height: 8px; overflow: hidden; border-radius: var(--radius-xs); background-color: var(--bg-subtle-02);}
.ph-buurt-stat-balk span { display: block; height: 100%; border-radius: var(--radius-xs); background-color: var(--green-700);}
.ph-buurt-stat-waarde { flex-shrink: 0; min-width: 72px; margin-left: auto; text-align: right; font-size: var(--body-default-size); line-height: var(--body-default-line); font-weight: 500; color: var(--text-default);}
.ph-buurt-popup-leeg { margin: 0; font-size: var(--body-sm-size); line-height: var(--body-sm-line); color: var(--text-secondary);}
.ph-buurt-reistijd svg { flex-shrink: 0; width: 24px; height: 24px;}

/* Telefoon: label en waarde onder elkaar (zie .ph-kenmerk-rij); anders wordt de 200px van de label de hoogte */
@media (max-width: 575.98px) {
    .ph-buurt-rij .ph-kenmerk-label { flex-basis: auto;}
}

/* Vergelijkbaar in de buurt (Figma "Frame 399"): toggle Te koop / Verkocht (48 hoog, actieve tab lichtgroen) en woningkaarten */
.ph-vergelijkbaar { display: flex; flex-direction: column; gap: 32px;}
.ph-vergelijkbaar-toggle { display: flex; height: 48px; padding: 4px; border: 1px solid var(--stroke-inverse); border-radius: var(--radius-sm); background-color: var(--bg-secondary);}
.ph-vergelijkbaar-tab { flex: 1 1 0; padding: 0; border: none; border-radius: var(--radius-xs); background: transparent; font-family: var(--font-primary); font-size: var(--body-default-size); line-height: var(--body-default-line); color: var(--text-secondary); transition: background-color .2s ease-out;}
.ph-vergelijkbaar-tab.is-actief { background-color: var(--green-500); color: var(--text-default);}
.ph-vergelijkbaar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px;}
.ph-vergelijkbaar-leeg, .ph-vergelijkbaar-ondertitel { margin: 0; color: var(--text-secondary);}

/* Telefoon: Nieuw in de verkoop (sectie 9) en Vergelijkbaar als horizontaal scrollende rij mobiele kaarten; padding laat label en schaduw vrij */
@media (max-width: 767.98px) {
    .ph-home-new-grid, .ph-vergelijkbaar-grid { display: flex; gap: 16px; margin: -16px 0 -24px -4px; padding: 16px 0 24px 4px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 4px;}
    .ph-home-new-grid > .card-woning, .ph-vergelijkbaar-grid > .card-woning { flex: 0 0 220px; scroll-snap-align: start;}
}

/* Makelaarsblok (render_makelaar_blok, Figma "Frame 379"): kantoorfoto 200, witte logotegel van 80 die 43px over de foto valt */
.ph-makelaar-blok { position: relative; display: flex; flex-direction: column; gap: 16px; border-radius: var(--radius-md); background-color: var(--bg-inverse); color: var(--text-inverse); text-align: center;}
.ph-makelaar-blok-foto { height: 200px; overflow: hidden; border-radius: var(--radius-md); background-color: var(--bg-inverse-tertiary);}
.ph-makelaar-blok-foto img { display: block; width: 100%; height: 100%; object-fit: cover;}
/* Supermakelaar (Figma 2780-59649): roze label linksboven op de foto */
.ph-makelaar-blok-label { position: absolute; top: 16px; left: -4px; padding: 8px; border-radius: var(--radius-xs); background-color: var(--bg-accent-01); color: var(--text-inverse); font-size: var(--label-sm-size); line-height: var(--label-sm-line);}
.ph-makelaar-blok-body { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 16px;}
.ph-makelaar-blok-kop { display: flex; flex-direction: column; align-items: center; gap: 12px;}
.ph-makelaar-blok-logo { position: relative; display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; margin-top: -75px; padding: 4px; border-radius: var(--radius-sm); background-color: var(--bg-secondary);}
.ph-makelaar-blok-logo img { max-width: 72px; max-height: 72px; object-fit: contain;}
/* Zijbalk woningpagina en Sneak Preview-woningpagina (Figma 3850:41418): één blok dat onder de header meeschuift;
   24 tussen kop en knoppen, knoppen 12 uit elkaar, de lijn tussen Favoriet en Delen in Stroke/Inverse */
.ph-makelaar-blok-woning { position: sticky; top: calc(var(--header-height) - var(--header-links-height) + 40px);}
.ph-makelaar-blok-woning .ph-makelaar-blok-body { gap: 24px;}
.ph-makelaar-blok-knoppen { display: flex; flex-direction: column; gap: 12px; width: 100%;}
.ph-makelaar-blok .ph-volgende-stap-lijn { background-color: var(--stroke-inverse);}

/* Zet de volgende stap (render_volgende_stap_kaart, Figma "Frame 380"): beeld van .ph-aanbod-cta-beeld (sectie 10)
   met de woningfoto; de kaart schuift mee onder de header */
.ph-volgende-stap { position: sticky; top: calc(var(--header-height) - var(--header-links-height) + 40px); display: flex; flex-direction: column; gap: 16px; overflow: hidden; border: 1px solid var(--stroke-secondary); border-radius: var(--radius-md); background-color: var(--bg-secondary);}
.ph-volgende-stap .ph-aanbod-cta-foto { background-image: url('/assets/images/woning/volgende-stap-foto.jpg'); background-position: center bottom; background-size: auto 302px;}
.ph-volgende-stap-body { display: flex; flex-direction: column; gap: 24px; padding: 16px; text-align: center;}
.ph-volgende-stap-tekst { margin: 0; color: var(--text-secondary);}
.ph-volgende-stap-acties { display: flex; align-items: center; gap: 8px;}
.ph-volgende-stap-lijn { flex: 0 0 1px; height: 32px; background-color: var(--stroke-secondary);}

@media (max-width: 991.98px) {
    .ph-volgende-stap, .ph-makelaar-blok-woning { position: relative; top: 0;}
}

/* Verkoopstatus (Figma "Tekst" 2874-16526): padding 32; tijdlijn met open bolletjes, de actieve stap als witte pil met
   schaduw en een roze "NU"-label; de volgende stap in secundair groen, de rest 50% */
.ph-verkoopstatus-kaart { gap: 24px; padding: 32px;}
.ph-verkoopstatus { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 0; padding: 0; list-style: none; font-family: var(--font-primary); font-size: 16px; line-height: 16px; color: var(--primary-50);}
.ph-verkoopstatus::before { content: ""; position: absolute; top: 12px; bottom: 12px; left: 11.5px; width: 1px; background-color: var(--stroke-default);}
.ph-verkoopstatus li { position: relative; display: flex; align-items: center; gap: 12px; padding: 4px; border-radius: 999px;}
.ph-verkoopstatus li.is-actief { background-color: var(--white); box-shadow: var(--shadow-stap); color: var(--text-default);}
.ph-verkoopstatus li.is-volgende { color: var(--text-secondary);}
.ph-verkoopstatus li.is-klaar { color: var(--text-default);}
.ph-verkoopstatus-bol { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 16px; height: 16px; border: 1px solid var(--primary-50); border-radius: 999px; background-color: var(--white); color: var(--white);}
.ph-verkoopstatus li.is-actief .ph-verkoopstatus-bol, .ph-verkoopstatus li.is-klaar .ph-verkoopstatus-bol { border-color: var(--primary); background-color: var(--primary);}
.ph-verkoopstatus-bol svg { width: 10px; height: 10px;}
.ph-verkoopstatus-nu { display: inline-flex; align-items: center; height: 16px; padding: 2px 8px; border-radius: 999px; background-color: var(--pink-500); color: var(--white); font-size: 12px; line-height: 1; font-weight: 600;}

@media (max-width: 575.98px) {
    .ph-verkoopstatus-kaart { padding: 24px;}
}

/* === 11a. Woning — Alle media en foto-preview (render_media_overzicht, js/woning-media.js) ===
   Figma "Alle media" 3036-35978 en "Foto preview" 3036-36503: schermvullende overlay op zand, links het overzicht
   of de preview, rechts een kolom van 352 (padding 16) met de CTA-kaart die meeschuift. Toolbar 76 hoog, wit.
   Raster: rijen van 2 (584 hoog, de eerste 296) en 3 (288 hoog), 8px ertussen. Preview: wit, foto 1440/956
   tussen pijlknoppen van 44. Mobiel (geen ontwerp): geen CTA-kolom, lagere rijen, vegen in plaats van pijlen. */
.ph-media { position: fixed; inset: 0; z-index: 1060; display: flex; align-items: flex-start; overflow-y: auto; overscroll-behavior: contain; background-color: var(--bg-default);}
.ph-media-inhoud { flex: 1 1 0; min-width: 0;}
.ph-media-overzicht { padding-bottom: 24px;}
.ph-media-cta { flex: 0 0 352px; align-self: stretch; padding: 16px;}
.ph-media .ph-volgende-stap { top: 16px;}
.ph-media-toolbar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 24px; height: 76px; padding: 0 16px; background-color: var(--bg-secondary);}
.ph-media-tabs { display: flex; flex: 1 1 0; align-items: center; gap: 16px; min-width: 0; overflow-x: auto; scrollbar-width: none;}
.ph-media-tab { display: inline-flex; flex-shrink: 0; align-items: center; gap: 8px; padding: 24px 12px; border: none; border-bottom: 4px solid transparent; background: none; font-family: var(--font-primary); font-size: var(--label-default-size); line-height: var(--label-default-line); font-weight: 500; color: var(--text-default); white-space: nowrap;}
.ph-media-tab svg { flex-shrink: 0; width: 24px; height: 24px;}
.ph-media-tab.is-actief { border-bottom-color: var(--pink-500);}
.ph-media-knop { flex-shrink: 0; border: 1px solid var(--stroke-secondary);}
.ph-media-raster { display: flex; flex-direction: column; gap: 8px;}
.ph-media-rij { display: flex; gap: 8px;}
.ph-media-rij-2 { height: 584px;}
.ph-media-rij-2:first-child { height: 296px;}
.ph-media-rij-3 { height: 288px;}
.ph-media-tegel { position: relative; flex: 1 1 0; min-width: 0; padding: 0; border: none; overflow: hidden; background-color: var(--green-200); cursor: zoom-in;}
.ph-media-tegel img { display: block; width: 100%; height: 100%; object-fit: cover;}
/* Plattegronden: hele tekening op wit */
.ph-media-raster-plattegrond .ph-media-tegel { background-color: var(--bg-secondary);}
.ph-media-raster-plattegrond .ph-media-tegel img { object-fit: contain;}
.ph-media-videos { display: flex; flex-direction: column; gap: 8px;}
.ph-media-video { aspect-ratio: 16 / 9; background-color: var(--black);}
.ph-media-video iframe, .ph-media-video video { display: block; width: 100%; height: 100%; border: 0;}
.ph-media-preview { display: flex; flex-direction: column; min-height: 100dvh; background-color: var(--bg-secondary);}
.ph-media-teller { position: absolute; left: 50%; transform: translateX(-50%); font-size: var(--label-default-size); line-height: var(--label-default-line); font-weight: 500; white-space: nowrap;}
.ph-media-podium { display: flex; flex: 1 1 0; align-items: center; gap: 16px; padding: 0 16px 24px;}
.ph-media-foto { flex: 1 1 0; min-width: 0; aspect-ratio: 1440 / 956; max-height: calc(100dvh - 100px);}
.ph-media-foto img { display: block; width: 100%; height: 100%; object-fit: contain;}
/* Foto-preview (Figma 3036:36503): links de tabs als knoppen (48 hoog, padding 12, gap 8, radius 8, rand 20%, wit;
   actief donkergroen met witte tekst) en de foto over de volle breedte: in de preview geen CTA-kaart */
.ph-media-tabknop { display: inline-flex; flex-shrink: 0; align-items: center; gap: 8px; height: 48px; padding: 12px; border: 1px solid var(--stroke-secondary); border-radius: var(--radius-sm); background-color: var(--bg-secondary); font-family: var(--font-primary); font-size: var(--label-default-size); line-height: var(--label-default-line); font-weight: 500; color: var(--text-default); white-space: nowrap;}
.ph-media-tabknop svg { flex-shrink: 0; width: 24px; height: 24px;}
.ph-media-tabknop.is-actief { border-color: var(--bg-inverse); background-color: var(--bg-inverse); color: var(--text-inverse);}
.ph-media:has(.ph-media-preview:not(.d-none)) .ph-media-cta { display: none;}

@media (max-width: 991.98px) {
    .ph-media-cta { display: none;}
}

@media (max-width: 767.98px) {
    .ph-media-toolbar { gap: 12px; padding: 0 12px;}
    .ph-media-tabs { gap: 0;}
    .ph-media-tab { padding: 24px 8px;}
    .ph-media-raster, .ph-media-rij { gap: 4px;}
    .ph-media-rij-2, .ph-media-rij-2:first-child { height: 240px;}
    .ph-media-rij-3 { height: 120px;}
    .ph-media-pijl { display: none;}
    .ph-media-podium { padding: 0 0 24px;}
    .ph-media-teller { position: static; transform: none; margin-right: auto;}
}

/* === 11b. Pagina — Het bewijs en Casuspagina (Figma "Het bewijs" 2633-80307, "Casuspagina" 2643-93331) ===
   content/bewijs.php en content/casus.php. Bouwt op het aanbod (sectie 10: filterbalk, paginering, CTA blok)
   en de woningpagina (sectie 11: kruimelpad, galerij, layout, Insights); de casuskaart zelf is render_casus_kaart(). */
.ph-casussen { padding-bottom: 40px;}
.ph-casussen .ph-paginering { margin-top: 0;}
.ph-casussen-sub { margin: 0; color: var(--text-secondary);}
/* Filterbalk (Figma "Frame 425"): scrolt mee (zoals op het aanbod); Filters vult de rij, de andere knoppen zo breed als hun tekst (padding 18).
   Past de rij niet (ook naast het zijpaneel boven 1200px), dan lopen de knoppen door op de volgende regel. */
.ph-casussen-filters { flex-wrap: wrap; min-width: 0;}
.ph-casussen-filters .ph-filter-filters { flex: 1 1 auto;}
.ph-casussen-filters .dropdown .ph-filter-pill { padding-inline: 18px;}
/* Tabs (Figma "Frame 514"): wit zonder rand, actieve tab donkergroen 600 met witte tekst */
.ph-casussen-tabs { border-color: transparent;}
.ph-casussen-tabs .ph-vergelijkbaar-tab { display: flex; align-items: center; justify-content: center; text-decoration: none;}
.ph-casussen-tabs .ph-vergelijkbaar-tab:not(.is-actief):hover { color: var(--text-default);}
.ph-casussen-tabs .ph-vergelijkbaar-tab.is-actief { background-color: var(--bg-inverse-tertiary); color: var(--text-inverse);}
/* Lijst met liggende casuskaarten (Figma "Het bewijs" 2633:80307): 16px ertussen */
.ph-casussen-lijst { display: flex; flex-direction: column; gap: 16px;}
/* CTA blok rechts (Figma "Frame 450"): zelfde zijpaneel als het aanbod (.ph-aanbod-zijpaneel, sectie 10). */

@media (max-width: 767.98px) {
    .ph-casussen-filters .ph-filter-filters { flex-basis: 100%;}
}

/* === 11d. Casuspagina V2 — verkoopverhaal (Figma "NIEUW | Casuspagina V2" 3443:30706, render_casus_* in inc/kaarten.php) ===
   Blokken van 840 met 40 ertussen; kaarten wit, radius 16, schaduw float. Kleur per kanaal in --kanaal. */
.ph-kanaal-sneak { --kanaal: var(--secondary);}
.ph-kanaal-woningpagina { --kanaal: var(--primary);}
.ph-kanaal-app { --kanaal: var(--primary-600);}
.ph-kanaal-social { --kanaal: var(--kanaal-social);}
.ph-kanaal-remarketing { --kanaal: var(--pink-500);}
.ph-kanaal-funda { --kanaal: var(--kanaal-funda);}
.ph-gallery > .card-woning-badge { top: 16px; left: -4px;}
.ph-casus-goud { font-size: var(--headline-sm-size); line-height: var(--headline-sm-line); font-weight: 500; color: var(--text-accent-primary);}
.ph-casus-subkop { margin: 0; font-size: var(--headline-md-size); line-height: var(--headline-md-line); font-weight: 500; color: var(--text-default);}
.ph-casus-hero-adres { font-size: var(--headline-md-size); line-height: var(--headline-md-line); font-weight: 500; color: var(--text-default);}
/* Hero: kop, samenvatting (vet = SemiBold) en kerncijfers in 4 kolommen (de eerste twee zo breed als hun inhoud) */
.ph-casus-hero { display: flex; flex-direction: column; gap: 32px;}
.ph-casus-samenvatting { display: flex; flex-direction: column; gap: 8px; color: var(--text-secondary);}
.ph-casus-samenvatting p { margin: 0;}
.ph-casus-samenvatting p + p { margin-top: 23.4px;}
.ph-casus-samenvatting strong { font-weight: 600;}
.ph-casus-cijfers { display: grid; grid-template-columns: auto auto minmax(0, 1fr) minmax(0, 1fr); gap: 16px;}
.ph-casus-cijfer { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 24px; border-radius: var(--radius-md); background-color: var(--bg-secondary); box-shadow: var(--shadow-card); font-size: var(--body-sm-size); line-height: var(--body-sm-line); color: var(--text-secondary);}
.ph-casus-cijfer strong { font-family: var(--font-display); font-stretch: var(--font-display-stretch); font-size: var(--display-sm-size); line-height: var(--display-sm-line); font-weight: var(--font-weight-display); text-transform: uppercase; color: var(--text-default); white-space: nowrap;}
.ph-casus-cijfer.is-donker, .ph-casus-cijfer.is-goud, .ph-casus-cijfer.is-grijs { color: var(--text-inverse-secondary);}
.ph-casus-cijfer.is-donker { background-color: var(--bg-inverse);}
.ph-casus-cijfer.is-goud { background-color: var(--bg-accent-primary);}
.ph-casus-cijfer.is-grijs { background-color: var(--primary-600);}
.ph-casus-cijfer.is-donker strong, .ph-casus-cijfer.is-goud strong, .ph-casus-cijfer.is-grijs strong { color: var(--text-inverse);}
.ph-casus-cijfer-klein { font-size: var(--label-xs-size); line-height: var(--label-xs-line); opacity: .8;}
/* Animaties bij in beeld komen (Figma-motion, één keer): blok vervaagt in, cijfers 10px omhoog, balken groeien, stippen ploppen */
@keyframes ph-in-breedte { from { scale: .01 1;} to { scale: 1 1;} }
@keyframes ph-in-hoogte { from { scale: 1 .01;} to { scale: 1 1;} }
@keyframes ph-in-plop { from { opacity: 0; scale: .65;} to { opacity: 1; scale: 1;} }
.is-animeren .ph-in-cijfer { display: inline-block; animation: ph-in-omhoog .52s ease-out var(--vertraging, .38s) both paused;}
.is-animeren .ph-in-balk { animation: ph-in-breedte .72s ease-out var(--vertraging, .3s) both paused;}
.is-animeren .ph-in-staaf { transform-origin: bottom; animation: ph-in-hoogte .72s ease-out var(--vertraging, .3s) both paused;}
.is-animeren .ph-in-uitrollen { transform-origin: top; animation: ph-in-hoogte .6s ease-out var(--vertraging, .52s) both paused;}
.is-animeren .ph-in-stip { animation: ph-in-plop .32s ease-out var(--vertraging, .7s) both paused;}
.is-animeren.is-in-beeld .ph-in-cijfer, .is-animeren.is-in-beeld .ph-in-balk, .is-animeren.is-in-beeld .ph-in-staaf, .is-animeren.is-in-beeld .ph-in-uitrollen, .is-animeren.is-in-beeld .ph-in-stip { animation-play-state: running;}
/* Legenda en lijst per kanaal: vierkantje van 12 (radius 3) */
.ph-casus-legenda { display: flex; flex-wrap: wrap; column-gap: 24px; row-gap: 8px; margin: 0; padding: 0; list-style: none; font-size: var(--body-sm-size); line-height: var(--body-sm-line); color: var(--text-default);}
.ph-casus-legenda li { display: flex; align-items: center; gap: 8px;}
.ph-casus-legenda li::before, .ph-casus-kanaallijst li::before { content: ""; flex-shrink: 0; width: 12px; height: 12px; border-radius: 3px; background-color: var(--kanaal);}
.ph-casus-kanaallijst { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; list-style: none;}
.ph-casus-kanaallijst li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(var(--primary-rgb), .08); color: var(--text-default);}
.ph-casus-kanaallijst li:last-child { border-bottom: 0;}
.ph-casus-kanaallijst span { flex: 1 1 auto; min-width: 0;}
.ph-casus-kanaallijst strong { font-size: var(--label-default-size); line-height: var(--label-default-line); font-weight: 500; white-space: nowrap;}
/* Blok (Figma "Dashboard"): wit, radius 16, padding 24, gap 24, schaduw */
.ph-casus-blok { display: flex; flex-direction: column; gap: 24px; padding: 24px; border-radius: var(--radius-md); background-color: var(--bg-secondary); box-shadow: var(--shadow-float);}
.ph-casus-blok p { color: var(--text-secondary);}
/* Donut: ring 16% dik (bogen) met witte naden, totaal Display Small in het midden, onderschrift Body Small secundair */
.ph-casus-donuts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px;}
.ph-casus-donut { display: flex; flex-direction: column; align-items: center; gap: 16px; margin: 0;}
.ph-casus-donut-ring { position: relative; width: 150px; max-width: 100%; aspect-ratio: 1;}
.ph-casus-donut.is-groot .ph-casus-donut-ring { width: 210px;}
.ph-casus-donut-ring svg { display: block; width: 100%; height: 100%;}
.ph-casus-donut-ring path { fill: none; stroke: var(--kanaal); stroke-width: 16;}
.ph-casus-donut-totaal { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-stretch: var(--font-display-stretch); font-size: var(--display-sm-size); line-height: var(--display-sm-line); font-weight: var(--font-weight-display); color: var(--text-default);}
.ph-casus-donut figcaption { font-size: var(--body-sm-size); line-height: var(--body-sm-line); color: var(--text-secondary);}
/* Herkomst (Figma "Wat we deden"): wit, padding 16, donut 210 met 40 ernaast de lijst */
.ph-casus-herkomst { display: flex; flex-direction: column; gap: 16px; padding: 16px; border-radius: var(--radius-md); background-color: var(--bg-secondary);}
.ph-casus-herkomst-inhoud { display: flex; align-items: center; gap: 40px;}
/* Fase: kop met gouden nummervak van 64 (radius 8), label Label XSmall 500 goud, titel Display Small, uitleg secundair */
.ph-casus-fase { display: flex; flex-direction: column; gap: 24px;}
.ph-casus-fase-kop { display: flex; align-items: flex-start; gap: 24px;}
.ph-casus-nummer { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 64px; height: 64px; border-radius: var(--radius-sm); background-color: var(--bg-accent-primary); font-family: var(--font-display); font-stretch: var(--font-display-stretch); font-size: var(--display-sm-size); line-height: var(--display-sm-line); font-weight: var(--font-weight-display); color: var(--text-inverse);}
.ph-casus-nummer.is-donker { background-color: var(--bg-inverse);}
.ph-casus-nummer svg { width: 32px; height: 32px;}
.ph-casus-fase-tekst { display: flex; flex-direction: column; gap: 8px; min-width: 0;}
.ph-casus-fase-tekst p { color: var(--text-secondary);}
.ph-casus-fase-label { font-size: var(--label-xs-size); line-height: var(--label-xs-line); font-weight: 500; letter-spacing: .56px; color: var(--text-accent-primary);}
/* Belofte (Figma "Onze belofte"): wit met rand 20%, links 341 breed, rechts het groene bewijsvlak (radius 16) */
.ph-casus-belofte { display: flex; align-items: stretch; overflow: hidden; border: 1px solid var(--stroke-secondary); border-radius: var(--radius-md); background-color: var(--bg-secondary); box-shadow: var(--shadow-float);}
.ph-casus-belofte-tekst { display: flex; flex-direction: column; justify-content: center; gap: 12px; flex: 0 0 341px; padding: 24px;}
.ph-casus-belofte-tekst p { font-size: var(--headline-md-size); line-height: var(--headline-md-line); font-weight: 500; color: var(--text-default);}
.ph-casus-bewijs { display: flex; flex-direction: column; justify-content: center; gap: 8px; flex: 1 1 0; min-width: 0; padding: 24px; border-radius: var(--radius-md); background-color: var(--green-500); color: var(--text-default);}
.ph-casus-bewijs > span { font-size: var(--headline-sm-size); line-height: var(--headline-sm-line); font-weight: 500;}
.ph-casus-bewijs p { font-size: var(--body-sm-size); line-height: var(--body-sm-line);}
/* Trechter (Sneak Preview en buurt): rijen van 125, links een vak van 350 met de balk (64 hoog, schaduw) en het verloop */
.ph-casus-trechter { position: relative; padding: 0 24px; border-radius: var(--radius-md); background-color: var(--bg-secondary); box-shadow: var(--shadow-float);}
.ph-casus-trechter.is-goud { --trechter: var(--secondary); --trechter-licht: var(--secondary-20);}
.ph-casus-trechter.is-groen { --trechter: var(--primary); --trechter-licht: var(--primary-20);}
.ph-casus-trechter-vorm { position: absolute; top: 0; left: 24px; width: 350px; height: 100%;}
.ph-casus-trechter-vorm path { fill: var(--trechter-licht);}
.ph-casus-trechter-rij { position: relative; display: flex; align-items: center; gap: 40px; min-height: 125px; border-top: 1px solid var(--stroke-secondary);}
.ph-casus-trechter-rij:first-of-type { border-top: 0;}
.ph-casus-trechter-vak { display: flex; justify-content: center; flex: 0 0 350px;}
.ph-casus-trechter-balk { display: flex; align-items: center; justify-content: center; height: 64px; border-radius: var(--radius-sm); background-color: var(--trechter); box-shadow: var(--shadow-label); font-family: var(--font-display); font-stretch: var(--font-display-stretch); font-size: var(--display-sm-size); line-height: var(--display-sm-line); font-weight: var(--font-weight-display); color: var(--text-inverse);}
.ph-casus-trechter-tekst { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 24px 0;}
.ph-casus-trechter-tekst p { font-size: var(--body-sm-size); line-height: var(--body-sm-line); color: var(--text-secondary);}
/* Stroom (Figma "Frame 1597880541"): rijen van 125 met links het label, rechts de balk (40 hoog, radius 8) en lichte banden */
.ph-casus-stroom { position: relative; display: flex; flex-direction: column; padding: 0 16px 16px; border-radius: var(--radius-md); background-color: var(--bg-secondary); box-shadow: var(--shadow-float);}
.ph-casus-stroom-rijen { position: relative;}
.ph-casus-stroom-vlak { position: absolute; top: 0; left: 240px; width: calc(100% - 240px); height: 100%;}
.ph-casus-stroom-band { fill: var(--kanaal); opacity: .25;}
.ph-casus-stroom-rij { position: relative; display: flex; align-items: center; height: 125px; border-bottom: 1px solid var(--stroke-secondary);}
.ph-casus-stroom-label { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; flex: 0 0 240px;}
.ph-casus-stroom-label strong { font-size: 32px; line-height: 38px; font-weight: 500; color: var(--text-default);}
.ph-casus-stroom-baan { position: absolute; top: 0; bottom: 0; left: 240px; right: 0;}
.ph-casus-stroom-balk { position: absolute; top: 42.5px; left: var(--links); display: flex; width: var(--breedte); height: 40px; overflow: hidden; border-radius: var(--radius-sm);}
.ph-casus-stroom-balk span { min-width: 0; background-color: var(--kanaal);}
.ph-casus-stroom > .ph-casus-legenda { padding-top: 24px;}
/* Powerhuys-effect: vier kaarten (rand 20%, radius 16, padding 12), staven van 48 in een vak van 180 hoog */
.ph-casus-effect { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;}
.ph-casus-effect-kaart { display: flex; flex-direction: column; gap: 16px; padding: 12px; border: 1px solid var(--stroke-secondary); border-radius: var(--radius-md);}
.ph-casus-effect-titel { margin: 0; font-size: var(--body-default-size); line-height: var(--body-default-line); font-weight: 600; color: var(--text-default);}
.ph-casus-effect-aandeel { margin: 0; font-size: var(--label-xs-size); line-height: var(--label-xs-line); color: var(--text-secondary);}
.ph-casus-effect-aandeel strong { color: var(--text-default);}
.ph-casus-effect-staven { display: flex; justify-content: center; gap: 16px; height: 200px; padding-bottom: 1px; border-bottom: 1px solid var(--stroke-secondary);}
.ph-casus-effect-staaf { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; width: 48px;}
.ph-casus-effect-staaf strong { font-size: var(--label-xs-size); line-height: var(--label-xs-line); font-weight: 600; color: var(--text-default);}
.ph-casus-effect-blok { display: flex; flex-direction: column-reverse; gap: 2px; width: 100%; max-height: calc(100% - 18px); overflow: hidden; border-radius: 4px; background-color: var(--kanaal);}
.ph-casus-effect-stapel { background-color: transparent;}
.ph-casus-effect-stapel span { min-height: 2px; background-color: var(--kanaal);}
.ph-casus-effect-namen { display: flex; justify-content: center; gap: 16px; margin-top: -8px; font-size: var(--label-xs-size); line-height: var(--label-xs-line); color: var(--text-secondary);}
.ph-casus-effect-namen span { width: 64px; text-align: center;}
/* Zichtbaarheid: telefoon (202×413) naast de balk per kanaal (48 hoog, radius 8) en de lijst; eerste regel lichtgroen */
.ph-casus-kanalen { display: flex; align-items: flex-start; gap: 40px; max-height: 380px; overflow: hidden; padding: 24px 40px 0; border-radius: var(--radius-md); background-color: var(--bg-secondary); box-shadow: var(--shadow-float);}
.ph-casus-kanalen-telefoon { flex-shrink: 0;}
.ph-casus-kanalen-telefoon img { display: block; width: 202px; height: auto;}
.ph-casus-kanalen-inhoud { display: flex; flex-direction: column; gap: 24px; flex: 1 1 auto; min-width: 0; padding-top: 24px;}
.ph-casus-kanalen-balk { display: flex; gap: 2px; height: 40px; overflow: hidden; border-radius: var(--radius-sm);}
.ph-casus-kanalen-balk span { min-width: 0; background-color: var(--kanaal);}
.ph-casus-kanalen .ph-casus-kanaallijst li:first-child { padding-inline: 8px; background-color: rgba(var(--primary-rgb), .08);}
/* Biedingen: as met labels erboven en bedragen eronder; streep bij de vraagprijs, rechts daarvan goud */
.ph-casus-biedingen { display: flex; flex-direction: column; gap: 24px; padding: 24px; border: 1px solid var(--stroke-secondary); border-radius: var(--radius-md); background-color: var(--bg-secondary); box-shadow: var(--shadow-float);}
.ph-casus-as { --vraag: 50%; display: flex; flex-direction: column; gap: 16px;}
.ph-casus-as-labels { position: relative; display: flex; justify-content: space-between; height: 18px; font-size: var(--label-xs-size); line-height: 18px; font-weight: 500; color: var(--text-secondary);}
.ph-casus-as-bedragen { font-size: var(--body-default-size); color: var(--text-default);}
.ph-casus-as-vraag { position: absolute; left: var(--vraag); transform: translateX(-50%);}
.ph-casus-as-lijn { position: relative; height: 40px; margin: 0 8px; background: linear-gradient(var(--stroke-secondary), var(--stroke-secondary)) center / 100% 4px no-repeat;}
.ph-casus-as-lijn::before, .ph-casus-as-lijn::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background-color: var(--stroke-default);}
.ph-casus-as-lijn::before { left: var(--vraag);}
.ph-casus-as-lijn::after { right: -8px;}
.ph-casus-as-boven { position: absolute; top: 18px; left: var(--vraag); right: 0; height: 4px; background-color: var(--secondary); transform-origin: left;}
.ph-casus-as-stip { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background-color: var(--primary);}
.ph-casus-as-stip.is-verkocht { width: 20px; height: 20px; margin: -10px 0 0 -10px; border: 3px solid var(--primary); background-color: var(--secondary);}
.ph-casus-legenda .ph-casus-legenda-stip::before { width: 10px; height: 10px; border-radius: 50%; background-color: var(--primary);}
.ph-casus-legenda .ph-casus-legenda-streep::before { width: 18px; height: 4px; border-radius: 2px; background-color: var(--secondary);}
.ph-casus-legenda .ph-casus-legenda-vraag::before { width: 1px; height: 16px; border-radius: 0; background-color: var(--stroke-default);}
/* Beoordelingen en "Dit was de move": goud vlak (radius 16, padding 24), witte kaarten met radius 16 en padding 24 */
.ph-casus-goud-blok { display: flex; flex-direction: column; gap: 24px; padding: 24px; border-radius: var(--radius-md); background-color: var(--bg-accent-primary); box-shadow: var(--shadow-float);}
.ph-casus-goud-blok .ph-casus-fase-label { color: var(--text-default);}
.ph-casus-goud-blok .ph-casus-fase-tekst h2 { color: var(--text-inverse);}
.ph-casus-goud-blok .ph-casus-fase-tekst p { color: var(--text-inverse-secondary);}
.ph-casus-beoordeling { display: flex; flex-direction: column; gap: 16px; padding: 24px; border: 1px solid var(--stroke-secondary); border-radius: var(--radius-md); background-color: var(--bg-secondary);}
.ph-casus-beoordeling > p { color: var(--text-secondary);}
.ph-casus-beoordeling-inhoud { display: flex; align-items: flex-start; gap: 40px;}
.ph-casus-beoordeling-cijfer { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 0 0 166px; color: var(--text-secondary);}
.ph-casus-beoordeling-cijfer strong { color: var(--text-default);}
.ph-casus-citaat { display: flex; gap: 16px; margin: 0;}
.ph-casus-citaat img { flex-shrink: 0; width: 20px; height: 32px;}
.ph-casus-citaat blockquote { font-family: var(--font-display); font-stretch: var(--font-display-stretch); font-size: var(--display-xs-size); line-height: 32px; font-weight: var(--font-weight-display); font-style: italic; color: var(--text-default);}
.ph-casus-citaat figcaption { margin-top: 8px; color: var(--text-secondary);}
/* Zijbalk: het donkere blok (sectie 23) schuift mee zoals het CTA blok op het aanbod */
.ph-aanbod-zijpaneel .ph-casus-waarde { position: sticky; top: calc(var(--header-height) - var(--header-links-height) + 16px);}

@media (max-width: 991.98px) {
    .ph-casus-cijfers { grid-template-columns: repeat(2, minmax(0, 1fr));}
    .ph-casus-donuts, .ph-casus-effect { grid-template-columns: repeat(2, minmax(0, 1fr));}
}

@media (max-width: 767.98px) {
    .ph-casus-belofte, .ph-casus-herkomst-inhoud, .ph-casus-beoordeling-inhoud { flex-direction: column; align-items: stretch;}
    .ph-casus-belofte-tekst { flex-basis: auto;}
    /* Beoordeling mobiel: het cijfer met een ster rechtsboven in het witte vak */
    .ph-casus-beoordeling { position: relative;}
    .ph-casus-beoordeling .ph-casus-subkop { padding-right: 96px;}
    .ph-casus-beoordeling-cijfer { position: absolute; top: 24px; right: 24px; display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 4px; row-gap: 4px;}
    .ph-casus-beoordeling-label { grid-column: 1 / -1; text-align: center;}
    .ph-casus-beoordeling-cijfer strong { font-size: var(--display-xs-size); line-height: var(--display-xs-line);}
    .ph-casus-beoordeling-ster svg { display: block; width: 20px; height: 20px;}
    /* Figma "Casuspagina" mobiel (3927:145300): de grafieken blijven, smaller. Trechter: vorm links (45%), tekst rechts;
       stroom: titel en totaal links (55%), balken en banden rechts; kanalen: telefoon gecentreerd boven de balk */
    .ph-casus-trechter-rij { gap: 16px;}
    .ph-casus-trechter-vak { flex-basis: 45%;}
    .ph-casus-trechter-vorm { width: calc((100% - 48px) * .45);}
    .ph-casus-trechter-balk { min-width: 48px;}
    .ph-casus-stroom-label { flex-basis: 55%;}
    .ph-casus-stroom-label strong { font-size: var(--display-md-size); line-height: var(--display-md-line);}
    .ph-casus-stroom-vlak, .ph-casus-stroom-baan { left: 55%;}
    .ph-casus-stroom-vlak { width: 45%;}
    .ph-casus-kanalen { flex-direction: column; align-items: stretch; gap: 0; max-height: none; padding: 16px 24px 24px;}
    .ph-casus-kanalen-telefoon { align-self: center; height: 280px; overflow: hidden;}
    .ph-casus-fase-kop { gap: 16px;}
}

/* === 11c. Woning — Maandlastencalculator (render_maandlasten_popup in inc/kaarten.php) — nog geen Figma-ontwerp ===
   Popup achter de pil "Wat worden mijn maandlasten?" op de woningpagina, sneak preview en casus.
   Opbouw en stijl van de filterpopup (.ph-filter-popup, sectie 10); hier alleen de pil als knop en de uitkomst. */

.ph-pill-knop { border: none; cursor: pointer; text-decoration: none; transition: background-color .3s ease-out;}
.ph-pill-knop:hover { background-color: var(--green-200);}
.ph-pill-knop:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px;}
.ph-maandlasten-noot { font-size: var(--body-sm-size); line-height: var(--body-sm-line); color: var(--text-secondary);}
.ph-maandlasten-waarde { font-size: var(--body-default-size); line-height: var(--body-default-line); color: var(--text-default); text-align: right;}
.ph-maandlasten-uitkomst { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;}
.ph-maandlasten-bedrag { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: var(--radius-sm); background-color: var(--bg-subtle-02);}
.ph-maandlasten-bedrag:last-child { background-color: var(--bg-accent-02);}
.ph-maandlasten-bedrag span { font-size: var(--body-sm-size); line-height: var(--body-sm-line); color: var(--text-secondary);}
.ph-maandlasten-bedrag strong { font-size: var(--display-xs-size); line-height: var(--display-xs-line); font-weight: 600; color: var(--text-default);}

/* === 12. Pagina — Inloggen & Aanmelden (Figma "Inloggen" / "Aanmelden") ====
   Frame 461: padding 40/80, 80px tussen beeld (651px) en paneel (549px).
   Paneel: groen (radius 16, 40px onder) met daarin de witte kaart (padding 40,
   gap 40, schaduw) en daaronder "Heb je (al/nog geen) account?". */

.ph-auth-inner { display: flex; justify-content: center; align-items: flex-start; gap: 80px; max-width: 1440px; margin: 0 auto; padding: 40px 80px;}

/* Beeld: foto in de vorm van het beeldmerk, slogan in de uitsparing (left 169, 144×167) */
/* Beeld loopt achter de header door tot de bovenkant van de pagina (Figma: foto 795 hoog, onderkant op 651 van het frame) */
.ph-auth-visual { display: flex; flex-direction: column; flex: 0 1 651px; min-width: 0; margin-top: calc(-1 * var(--header-height) - 40px);}
.ph-auth-photo { position: relative;}
/* Bovenste 40px van de foto (onder de linkregel) 20px geblurd, zoals in Figma */
.ph-auth-photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: url('/assets/images/auth-beeld.png') top center / 100% auto no-repeat; filter: blur(20px); clip-path: inset(0 0 calc(100% - var(--header-links-height)) 0); pointer-events: none;}
.ph-auth-photo img { display: block; width: 100%; height: auto;}
.ph-auth-tagline { position: absolute; left: 26%; bottom: 0; display: flex; flex-direction: column; justify-content: center; width: 22%; height: 21.4%; margin: 0; font-size: var(--body-lg-size); line-height: var(--body-lg-line); color: var(--text-default);}
.ph-auth-benefits { display: flex; flex-wrap: wrap; gap: 40px; margin: 0; padding: 80px 0 0; list-style: none;}
.ph-auth-benefits li { display: flex; align-items: center; gap: 16px; font-family: var(--font-display); font-stretch: var(--font-display-stretch); font-size: var(--display-xs-size); line-height: var(--display-xs-line); font-weight: var(--font-weight-display); text-transform: uppercase; color: var(--black);}
.ph-auth-check { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 999px; background-color: var(--bg-accent-primary); color: var(--primary);}
.ph-auth-check svg { width: 24px; height: 24px;}

.ph-auth-panel { display: flex; flex-direction: column; gap: 40px; flex: 0 0 549px; padding-bottom: 40px; border-radius: var(--radius-md); background-color: var(--bg-accent-02);}
.ph-auth-card { display: flex; flex-direction: column; gap: 24px; padding: 40px; border-radius: var(--radius-md); background-color: var(--bg-secondary); box-shadow: var(--shadow-float);}
.ph-auth-title { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; text-transform: uppercase;}
.ph-auth-title h1 { margin: 0;}

/* Social login: 48px hoog, padding 8/16/8/8, gap 16, radius 10, rand 20% */
.ph-auth-social { display: flex; gap: 16px;}
.ph-auth-social-btn { display: flex; align-items: center; gap: 16px; flex: 1 1 0; min-height: 48px; padding: 8px 16px 8px 8px; border: 1px solid var(--stroke-secondary); border-radius: 10px; background-color: var(--bg-secondary); color: var(--text-default); font-size: var(--body-sm-size); line-height: var(--body-sm-line); text-decoration: none; transition: border-color .2s ease-out;}
.ph-auth-social-btn:hover { border-color: var(--stroke-default); color: var(--text-default);}
.ph-auth-social-btn img { flex-shrink: 0; width: 28px; height: 28px;}
.ph-auth-divider { display: flex; align-items: center; gap: 16px; font-size: var(--label-default-size); line-height: var(--label-default-line); color: var(--text-default);}
.ph-auth-divider::before, .ph-auth-divider::after { content: ""; flex: 1; height: 1px; background-color: var(--stroke-secondary);}

.ph-auth-form { display: flex; flex-direction: column; gap: 16px;}
.ph-auth-field { display: flex; flex-direction: column; gap: 8px; font-size: var(--body-sm-size); line-height: var(--body-sm-line); color: var(--text-secondary);}
/* flex-wrap: op een telefoon past "Houd mij ingelogd" niet naast "Wachtwoord vergeten?" */
.ph-auth-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 8px 16px;}
.ph-auth-check-label { display: flex; align-items: center; gap: 8px; white-space: unset; font-size: var(--body-sm-size); line-height: var(--body-sm-line); color: var(--text-secondary); cursor: pointer;}
.ph-auth-link { white-space: nowrap; font-size: var(--body-sm-size); line-height: var(--body-sm-line); color: var(--text-secondary); text-decoration: none;}
.ph-auth-link:hover { color: var(--text-default); text-decoration: underline;}
.ph-auth-hints ul { margin: 0; padding: 0 0 0 18px; list-style: disc; font-size: var(--body-sm-size); line-height: var(--body-sm-line); color: var(--text-secondary);}
/* Wachtwoordeisen tijdens het typen (js/account-formulier.js): voldaan groen met vinkje, na het verlaten van het veld de rest rood */
.ph-auth-hints li.is-ok { color: var(--green-700); list-style-type: "✓ ";}
.ph-auth-hints li.is-fout { color: var(--text-error);}
.ph-auth-form .btn-primary { margin-top: 8px;} /* 24px boven de knop, 16 eronder */
.ph-auth-note { margin: 0; font-size: var(--body-sm-size); line-height: var(--body-sm-line); color: var(--text-secondary);}
.ph-auth-note a { font-weight: 600; color: var(--text-default); text-decoration: none;}
.ph-auth-note a:hover { text-decoration: underline;}

.ph-auth-alt { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding: 0 40px;}
.ph-auth-alt h2 { margin: 0;}
.ph-auth-alt .btn-white { --bs-btn-border-color: var(--stroke-secondary); --bs-btn-hover-border-color: var(--green-500);}

@media (max-width: 1199.98px) {
    .ph-auth-inner { gap: 40px; padding: 40px 24px;}
    .ph-auth-panel { flex-basis: 480px;}
}

@media (max-width: 991.98px) {
    .ph-auth-inner { flex-direction: column-reverse; align-items: stretch;}
    .ph-auth-panel { flex-basis: auto;}
    .ph-auth-visual { margin-top: 0;}
    .ph-auth-photo { display: none;}
    .ph-auth-benefits { justify-content: center; padding: 0;}
}

@media (max-width: 767.98px) {
    /* Inloggen en Aanmelden mobiel (.ph-auth-mobiel, Figma Inloggen 4004:80456): bovenaan de hele foto met de slogan, daaronder de drie vinken op één regel,
       dan het formulier; onderaan 16px tot de footer. De (sticky) header is een vast geblurd vlak met een zandkleurige
       waas waar de foto onder doorscrolt; alleen wat boven de onderkant van de menubalk komt is geblurd; daaronder is
       de foto scherp. De rand loopt in de laatste 24px zacht uit (masker), zodat er naast de balk geen harde lijn is.
       De foto (auth-beeld-mobiel.png, uitsnede als Figma) schuift achter de header: de onderkant staat 200/358 van de breedte
       onder de menubalk (88px), zodat de hoofden net onder de balk beginnen en het formulier meteen in beeld is. */
    body:has(.ph-auth-mobiel) .ph-header::before { content: ""; position: absolute; z-index: -1; inset: 0 0 auto; height: calc(var(--header-height) - 16px); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); background-color: rgba(var(--tertiary-rgb), .4); -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 24px), transparent); pointer-events: none;}
    .ph-auth-mobiel .ph-auth-inner { flex-direction: column; gap: 24px; padding: 0 16px 16px;}
    .ph-auth-mobiel .ph-auth-visual { flex: none; margin-top: calc(-16px - 43.2%); container-type: inline-size;}
    .ph-auth-mobiel .ph-auth-photo { display: block;}
    .ph-auth-mobiel .ph-auth-photo::before { display: none;}
    /* Slogan: schaalt met de fotobreedte (±15px op 358 breed, max 18px; "een sterke" past dan op één regel), zodat de
       vier regels altijd in de uitsparing passen */
    .ph-auth-mobiel .ph-auth-tagline { top: 70.9%; bottom: auto; height: 29%; font-size: min(var(--body-lg-size), 4.2cqw); line-height: 1.25;}
    .ph-auth-mobiel .ph-auth-benefits { flex-wrap: nowrap; justify-content: space-between; gap: 4px; padding: 16px 0 0;}
    /* Vinken: Figma-maat (16px tekst, 24px vink) op 358 breed; smaller schaalt alles mee zodat de rij precies onder de foto blijft */
    .ph-auth-mobiel .ph-auth-benefits li { gap: min(8px, 2.2cqw); font-size: min(var(--display-xs-size), 4.2cqw); line-height: 1.2; white-space: nowrap;}
    .ph-auth-mobiel .ph-auth-check { flex-shrink: 0; width: min(24px, 6.4cqw); height: min(24px, 6.4cqw);}
    .ph-auth-mobiel .ph-auth-check svg { width: 66%; height: 66%;}
}

@media (max-width: 575.98px) {
    .ph-auth-card { padding: 24px;}
    .ph-auth-social { flex-direction: column;}
    .ph-auth-alt { padding: 0 24px;}
}

/* BuurtHuys (content/buurthuys.php): in één oogopslag de openingszin, de woning (foto, adres, prijs, kenmerken) en de
   spelregels als drie stapjes op één regel; rechts het aanmeldpaneel met het adres van de kaart vast ingevuld. De foto
   groeit mee tot de hoogte van het formulier (geen witruimte), met het kaartje "Je volgt dit huis" erop. Eigen ontwerp, nog geen Figma. */
.ph-auth-inner.ph-buurthuys-inner { align-items: stretch;}
.ph-buurthuys { display: flex; flex-direction: column; gap: 24px; flex: 0 1 651px; min-width: 0;}
.ph-buurthuys-woning { display: flex; flex: 1 1 auto; flex-direction: column; overflow: hidden; border: 1px solid var(--stroke-secondary); border-radius: var(--radius-md); background-color: var(--bg-secondary);}
.ph-buurthuys-foto { position: relative; flex: 1 1 auto; min-height: 320px;}
.ph-buurthuys-foto > img, .ph-buurthuys-foto-leeg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;}
.ph-buurthuys-foto-leeg { background-color: var(--primary-20);}
.ph-buurthuys-volg { display: flex; align-items: center; gap: 12px; position: absolute; right: 16px; bottom: 16px; padding: 12px 20px 12px 12px; border-radius: var(--radius-md); background-color: var(--bg-secondary); box-shadow: var(--shadow-float); font-size: var(--body-sm-size); line-height: var(--body-sm-line); color: var(--text-secondary);}
.ph-buurthuys-volg strong { display: block; font-size: var(--body-default-size); line-height: var(--body-default-line); color: var(--text-default);}
.ph-buurthuys-volg-icoon { display: flex; flex: 0 0 44px; align-items: center; justify-content: center; height: 44px; border-radius: 999px; background-color: var(--secondary); color: var(--primary);}
.ph-buurthuys-volg-icoon svg { width: 22px; height: 22px;}
.ph-buurthuys-woning-tekst { display: flex; flex-direction: column; gap: 12px; padding: 20px 24px;}
.ph-buurthuys-naam { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;}
.ph-buurthuys-stappen { display: flex; align-items: center; gap: 12px; margin: 0; padding: 0; list-style: none; font-weight: 600; color: var(--text-default);}
.ph-buurthuys-stappen li { display: flex; flex: 1 1 0; align-items: center; gap: 8px; min-width: 0;}
.ph-buurthuys-stappen li:not(:last-child)::after { content: ""; flex: 1 1 auto; min-width: 12px; height: 2px; background-color: var(--stroke-secondary);}
.ph-buurthuys-stap-icoon { display: flex; flex: 0 0 40px; align-items: center; justify-content: center; height: 40px; border-radius: 999px; background-color: var(--secondary); color: var(--primary);}
.ph-buurthuys-stap-icoon svg { width: 20px; height: 20px;}
/* Volgpagina buurtbewoner (/volgen/{id}, content/volgen-inzichten.php; Figma "Woningpagina buurtbewoner" 3850:50420) */
.ph-volg-status { display: flex; flex-direction: column; gap: 24px; padding: 32px; border: 1px solid var(--stroke-secondary); border-radius: var(--radius-md); background-color: var(--bg-secondary);}
.ph-volg-tijdlijn { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none;}
.ph-volg-tijdlijn li { position: relative; display: flex; align-items: center; gap: 12px; align-self: flex-start; padding: 0 4px; font-size: var(--body-default-size); line-height: var(--body-default-line); color: var(--text-secondary); opacity: .7;}
.ph-volg-tijdlijn li.is-klaar { color: var(--text-default); opacity: 1;}
.ph-volg-tijdlijn li:not(:last-child)::after { content: ""; position: absolute; top: calc(50% + 8px); left: 11px; width: 1px; height: 14px; background-color: var(--stroke-default);}
.ph-volg-tijdlijn li.is-nu { margin-left: -4px; padding: 2px 8px; border-radius: 999px; background-color: var(--bg-secondary); box-shadow: var(--shadow-float);}
.ph-volg-tijdlijn li.is-nu::after { left: 15px;}
.ph-volg-tijdlijn-punt { display: flex; flex: 0 0 16px; align-items: center; justify-content: center; height: 16px; border: 1px solid var(--stroke-default); border-radius: 999px; background-color: var(--bg-secondary); color: var(--icon-inverse);}
.ph-volg-tijdlijn li.is-klaar .ph-volg-tijdlijn-punt { border-color: var(--primary); background-color: var(--primary);}
.ph-volg-tijdlijn-tekst { display: inline-flex; align-items: center; gap: 8px;}
.ph-volg-nu { padding: 2px 8px; border-radius: 999px; background-color: var(--bg-accent-01); font-size: var(--label-xs-size); line-height: var(--label-xs-line); font-weight: 600; text-transform: uppercase; color: var(--text-inverse);}
.ph-volg-tegels { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));}
.ph-volg-meer { display: flex; flex-direction: column; gap: 48px;}
.ph-volg-meer[hidden] { display: none;}

@media (max-width: 991.98px) {
    .ph-auth-inner.ph-buurthuys-inner { flex-direction: column;}
    .ph-buurthuys { flex-basis: auto;}
}

@media (max-width: 575.98px) {
    .ph-buurthuys-foto { min-height: 220px;}
    .ph-buurthuys-volg { right: 12px; bottom: 12px; left: 12px;}
    .ph-buurthuys-woning-tekst { padding: 16px;}
    .ph-buurthuys-naam { grid-template-columns: minmax(0, 1fr);}
    .ph-buurthuys-stappen { flex-direction: column; align-items: stretch; gap: 8px;}
    .ph-buurthuys-stappen li { flex: none; gap: 12px;}
    .ph-buurthuys-stappen li:not(:last-child)::after { display: none;}
    .ph-buurthuys-stap-icoon { flex-basis: 36px; height: 36px;}
    .ph-buurthuys-stap-icoon svg { width: 18px; height: 18px;}
}

/* === 13. Account-omgeving — menu en accountpagina's (Figma "Persoonlijke gegevens" 3031:34952, "Inloggegevens"
   3036:19104, "Notificatie instellingen" 3036:21331, "Favorieten" 3031:32266; render_account_menu/-kop) ===
   Menu van 400 breed links, 40px ernaast de inhoud (max. 840): kop Display Small, lijn 20%, witte kaarten
   met rand 20%, radius 16 en padding 40. Onder 992px vervalt het menu (dezelfde links staan onder de accountknop). */

.ph-accountpagina { display: grid; grid-template-columns: 400px minmax(0, 840px); justify-content: center; align-items: start; gap: 40px; padding: 24px 0 80px;}
.ph-accountpagina-inhoud { display: flex; flex-direction: column; gap: 24px; min-width: 0; padding: 24px 0;}
.ph-accountpagina-kop { display: flex; flex: 1 1 auto; flex-direction: column; gap: 4px; min-width: 0;}
.ph-accountpagina-kop p { color: var(--text-secondary);}
.ph-accountpagina-lijn { margin: 0; border-top-color: var(--stroke-secondary); opacity: 1;}
.ph-accountpagina-privacy { margin: 0; font-size: var(--body-sm-size); line-height: var(--body-sm-line);}
.ph-accountpagina-privacy a { color: var(--text-link); text-decoration: underline;}
/* Menu (Figma "Instellingen mennu"): padding 24/16/16, gap 8; regels 64 hoog met een icoonvlak van 48 (radius 8, padding 12) */
.ph-accountmenu { display: flex; flex-direction: column; gap: 8px; padding: 24px 16px 16px; border: 1px solid var(--stroke-secondary); border-radius: var(--radius-md); background-color: var(--bg-secondary);}
.ph-accountmenu-kop { display: flex; align-items: center; gap: 12px; padding: 0 8px; color: var(--text-default);}
.ph-accountmenu-avatar { width: 48px; height: 48px; font-size: 16px; line-height: 14px;}
.ph-accountmenu-groep { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none;}
.ph-accountmenu-link { display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 16px 0 8px; border-radius: var(--radius-sm); font-size: var(--body-default-size); line-height: var(--body-default-line); color: var(--text-secondary); text-decoration: none; transition: background-color .2s ease-out;}
/* Figma "Menu Button": actief 5% donkergroen; hover tekst Default en het icoonvlak donkergroen met wit icoon */
.ph-accountmenu-link.is-actief { background-color: rgba(var(--primary-rgb), .05); color: var(--text-secondary);}
.ph-accountmenu-link:hover { color: var(--text-default);}
/* Icoonvlak (menu, accountknop en woonwenskaart): 48, radius 8, padding 12; groen (standaard), goud (woonwensen) of roze (favorieten) */
.ph-icoonvlak { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 48px; height: 48px; padding: 12px; border-radius: var(--radius-sm); background-color: var(--bg-subtle-02); color: var(--icon-secondary); transition: background-color .2s ease-out, color .2s ease-out;}
.ph-icoonvlak svg { width: var(--icon-size-default); height: var(--icon-size-default);}
.ph-icoonvlak.is-goud, .ph-leeg-staat-icoon.is-goud { background-color: var(--icon-ellipse); color: var(--icon-accent-primary);}
.ph-icoonvlak.is-roze { background-color: var(--bg-subtle-01); color: var(--icon-accent-01);}
.ph-accountmenu-link:hover .ph-icoonvlak, .ph-account-menu .dropdown-item:hover .ph-icoonvlak { background-color: var(--bg-inverse); color: var(--icon-inverse);}
/* Kaart (Figma "Frame 427" > kaart): wit, rand 20%, radius 16, padding 40, gap 24 (gegevensformulier 40); knoppen rechts, 24 ertussen */
.ph-accountkaart { display: flex; flex-direction: column; gap: 24px; padding: 40px; border: 1px solid var(--stroke-secondary); border-radius: var(--radius-md); background-color: var(--bg-secondary);}
/* Compact (padding 24): woonwens en de blokken van Mijn Huys */
.ph-accountkaart.is-compact { padding: 24px;}
.ph-accountkaart-knoppen { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 24px;}
/* Persoonlijke gegevens: groepen met kop Headline Small (500), velden in twee kolommen (16 ertussen), label Body Small secundair */
.ph-gegevens-form { gap: 40px;}
.ph-gegevens-groep { min-width: 0; margin: 0; padding: 0; border: 0;}
.ph-gegevens-titel { margin: 0 0 16px; padding: 0; font-size: var(--headline-sm-size); line-height: var(--headline-sm-line); font-weight: 500; color: var(--text-default);}
.ph-gegevens-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;}
.ph-gegevens-breed { grid-column: 1 / -1;}
.ph-gegevens-veld { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0;}
.ph-gegevens-label { font-size: var(--body-sm-size); line-height: var(--body-sm-line); color: var(--text-secondary);}
/* Aanhef (Figma "Radio button" 24: ring 20 van 2px, goud als gekozen), tekst Input 16; .ph-sp-keuze (sectie 13a) met eigen maten */
.ph-aanhef { display: flex; flex-wrap: wrap; gap: 16px;}
.ph-aanhef .ph-aanhef-keuze { gap: 8px; font-size: var(--input-font-size); line-height: 18px; color: var(--text-default);}
.ph-aanhef .ph-aanhef-keuze input { width: 20px; height: 20px;}
/* Inloggegevens (Figma grid 140 / 1fr / knop, 24 tussen de rijen, 16 tussen de kolommen) */
.ph-inlog-rijen { display: grid; grid-template-columns: 140px minmax(0, 1fr) auto; gap: 24px 16px;}
.ph-inlog-rijen dt { font-weight: var(--font-weight-body); color: var(--text-secondary);}
.ph-inlog-rijen dd { margin: 0;}
.ph-inlog-waarde { overflow-wrap: anywhere; color: var(--text-default);}
.ph-inlog-waarde.ph-inlog-uitleg { color: var(--text-secondary);}
.ph-inlog-actie { display: flex; justify-content: flex-end;}
.ph-verwijderen { align-items: flex-start;}
.ph-verwijderen p, .ph-apparaten-uitleg { color: var(--text-secondary);}
/* Vensters (wachtwoord, account verwijderen): als de kaart, radius 16, padding 40 */
.ph-accountvenster { --bs-modal-width: 560px; --bs-modal-border-width: 0; --bs-modal-border-radius: var(--radius-md); --bs-modal-box-shadow: var(--shadow-float);}
.ph-accountvenster .modal-content { gap: 24px; padding: 40px; box-shadow: var(--bs-modal-box-shadow);}
.ph-accountvenster-kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;}
.ph-accountvenster-uitleg { font-size: var(--body-sm-size); line-height: var(--body-sm-line); color: var(--text-secondary);}
/* Notificaties: regels met kop Headline Small (500) en uitleg, 24 naast de schakelaar (onderaan uitgelijnd) */
.ph-melding { display: flex; align-items: flex-end; gap: 24px;}
.ph-melding-tekst { display: flex; flex: 1 1 auto; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0;}
.ph-melding-tekst p { color: var(--text-secondary);}
.ph-melding-titel { margin: 0; font-size: var(--headline-sm-size); line-height: var(--headline-sm-line); font-weight: 500; color: var(--text-default);}
/* Schakelaar (Figma "Toggle"): 70×32, knop 28; uit lichtroze met "Uit" rechts, aan roze met "Aan" links (Label XSmall) */
.ph-schakelaar { position: relative; display: inline-flex; flex-shrink: 0; width: 70px; height: 32px;}
.ph-schakelaar input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer;}
.ph-schakelaar-baan { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 2px 8px 2px 2px; border-radius: 1000px; background-color: var(--bg-subtle-01); font-size: var(--label-xs-size); line-height: var(--label-xs-line); color: var(--text-default); transition: background-color .2s ease-out;}
.ph-schakelaar-knop { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background-color: var(--white); box-shadow: var(--shadow-knop);}
.ph-schakelaar-aan { display: none;}
.ph-schakelaar input:checked + .ph-schakelaar-baan { padding: 2px 2px 2px 8px; background-color: var(--icon-accent-01); color: var(--text-inverse);}
.ph-schakelaar input:checked + .ph-schakelaar-baan .ph-schakelaar-aan { display: inline;}
.ph-schakelaar input:checked + .ph-schakelaar-baan .ph-schakelaar-uit { display: none;}
.ph-schakelaar input:focus-visible + .ph-schakelaar-baan { box-shadow: var(--shadow-focus);}
/* Pushmeldingen zonder gekoppeld apparaat (/notificaties in de app): regel grijs, schakelaar niet te bedienen */
.ph-melding.is-uit { opacity: .5;}
.ph-melding.is-uit .ph-schakelaar { pointer-events: none;}
/* Hover (Figma "Toggle" Hover=True): zwarte laag over de baan, 10% uit en 20% aan */
@media (hover: hover) {
    .ph-schakelaar:hover .ph-schakelaar-baan { background-image: linear-gradient(rgba(var(--black-rgb), .1), rgba(var(--black-rgb), .1));}
    .ph-schakelaar:hover input:checked + .ph-schakelaar-baan { background-image: linear-gradient(rgba(var(--black-rgb), .2), rgba(var(--black-rgb), .2));}
}
/* Favorieten: filterbalk zoals /huis-kopen (sectie 10), "Filters" vult de ruimte; tabs Actief/Archief
   (wit, 48 hoog, padding 4, gekozen tab lichtroze met radius 4) */
.ph-favorieten-filterbar .ph-aanbod-filters { flex-wrap: wrap; min-width: 0;}
/* Prijs en Woonoppervlakte niet afkappen maar doorlopen naar de volgende regel als de rij niet past */
.ph-favorieten-filterbar .ph-aanbod-filters > .dropdown { flex-shrink: 0;}
.ph-favorieten-filterknop { flex: 1 1 160px;}
.ph-favorieten-tabs { display: flex; height: 48px; padding: 4px; border-radius: var(--radius-sm); background-color: var(--bg-secondary);}
.ph-favorieten-tab { display: flex; flex: 1 1 0; align-items: center; justify-content: center; border-radius: var(--radius-xs); font-size: var(--body-default-size); line-height: var(--body-default-line); color: var(--text-secondary); text-decoration: none; transition: background-color .2s ease-out;}
.ph-favorieten-tab:hover { color: var(--text-default);}
.ph-favorieten-tab.is-actief { background-color: var(--bg-subtle-01); color: var(--text-default);}
/* Favorietkaart (render_aanbod_lijst_kaart met $favoriet): 300 hoog (foto 276), 12 tussen foto en tekst, tekst padding 16/8 */
.card-woning-favoriet { gap: 12px;}
.card-woning-actie { position: relative; z-index: 2; width: 100%;}
/* Figma "Interesse | Tint": lichtroze, padding 8/12, radius 8; regel met icoon 20 (roze hartje) en Label Small */
.card-woning-interesse { display: flex; flex-direction: column; gap: 8px; padding: 8px 12px; border-radius: var(--radius-sm); background-color: var(--bg-subtle-01);}
.card-woning-interesse-item { display: flex; align-items: center; gap: 8px; font-size: var(--label-sm-size); line-height: var(--label-sm-line); color: var(--text-default);}
.card-woning-interesse-item svg { flex-shrink: 0; width: 20px; height: 20px; color: var(--icon-accent-01);}
/* Lege staat (Figma "Empty state CTA"): kaart met icoonvlak 80 (lichtroze, radius 16, hartje 32), tekst max. 500 gecentreerd */
.ph-leeg-staat { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 40px; border: 1px solid var(--stroke-secondary); border-radius: var(--radius-md); background-color: var(--bg-secondary); text-align: center;}
.ph-leeg-staat-icoon { display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; border-radius: var(--radius-md); background-color: var(--bg-subtle-01); color: var(--icon-accent-01);}
.ph-leeg-staat-icoon svg { width: 32px; height: 32px;}
.ph-leeg-staat-tekst { display: flex; flex-direction: column; gap: 8px; max-width: 500px;}
.ph-leeg-staat-tekst p { color: var(--text-secondary);}
/* Mijn woonwensen (Figma "Frame 275"): kaart met padding 24; kop met icoonvlak en Headline Medium (500), Wijzigen/Verwijderen
   24 uit elkaar; kenmerken met een stip van 4 ertussen; onderaan "Bekijk resultaten" en de schakelaar met Label Small ervoor */
.ph-woonwens-kop { display: flex; flex-wrap: wrap; align-items: center; gap: 24px;}
.ph-woonwens-titel { display: flex; flex: 1 1 auto; align-items: center; gap: 12px; min-width: 0;}
.ph-woonwens-naam, .ph-mh-subkop { margin: 0; font-size: var(--headline-md-size); line-height: var(--headline-md-line); font-weight: 500; color: var(--text-default);}
.ph-woonwens-knoppen { display: flex; align-items: center; gap: 24px; padding: 8px 0;}
.ph-woonwens-kenmerken { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; color: var(--text-secondary);}
.ph-woonwens-kenmerken li + li::before { content: ""; display: inline-block; width: 4px; height: 4px; margin-right: 8px; border-radius: 50%; background-color: currentColor; vertical-align: middle;}
.ph-woonwens-voet { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px;}
.ph-woonwens-melding { display: flex; align-items: center; gap: 12px; margin-left: auto; font-size: var(--label-sm-size); line-height: var(--label-sm-line); color: var(--text-default);}
.ph-woonwens-melding label { cursor: pointer;}

@media (max-width: 1199.98px) {
    .ph-accountpagina { grid-template-columns: 320px minmax(0, 1fr); gap: 24px;}
}

@media (max-width: 991.98px) {
    .ph-accountpagina { grid-template-columns: minmax(0, 1fr); padding-top: 0;}
    .ph-accountmenu { display: none;}
}

@media (max-width: 767.98px) {
    .ph-accountpagina { padding: 0 16px 40px;}
    .ph-accountkaart, .ph-leeg-staat, .ph-accountvenster .modal-content { padding: 24px;}
    .ph-gegevens-raster { grid-template-columns: minmax(0, 1fr);}
    .ph-inlog-rijen { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px;}
    .ph-inlog-rijen dt { grid-column: 1 / -1; padding-top: 16px;}
    .ph-inlog-rijen dt:first-child { padding-top: 0;}
    /* Favorieten blijven op mobiel staand (Figma heeft geen mobiele favorietkaart) */
    .card-woning-favoriet { flex-direction: column; gap: 8px;}
    .card-woning-favoriet .card-photo-wrap, .card-woning-favoriet .card-body-wrap { flex: 0 0 auto;}
    .card-woning-favoriet .card-photo-wrap > img { position: static;}
    .card-woning-favoriet .card-photo-wrap > img, .card-woning-favoriet .card-photo-placeholder { height: 240px;}
}

/* === 13a. Pagina — Sneak Preview (content/sneak-preview.php) ===
   Inschrijven in vijf stappen (Figma "Sneak preview inschrijf flow", 3705:78482): links (549) de titel met
   voortgangsbalk, per stap een witte kaart (rand 20%, radius 16, padding 40, schaduw) en Vorige/Volgende;
   80px ernaast het groene paneel (651) met de teller. Na het aanmelden de bevestiging in de opmaak van
   Inloggen (beeld links, sectie 12; .ph-sp-start). */

.ph-sp-start { display: flex; flex-direction: column; gap: 40px; flex: 0 0 549px; min-width: 0; padding: 40px; border: 1px solid var(--stroke-secondary); border-radius: var(--radius-md); background-color: var(--bg-secondary);}
.ph-sp-start-kop { display: flex; flex-direction: column; gap: 16px;}
.ph-sp-titel { margin: 0; font-weight: 500; color: var(--text-default);}
.ph-sp-titel:focus { outline: none;}
.ph-sp-tekst { margin: 0; font-size: var(--body-default-size); line-height: var(--body-default-line); color: var(--text-secondary);}
.ph-sp-fout { margin: 0; font-size: var(--body-sm-size); line-height: var(--body-sm-line); color: var(--text-accent-01-dark);}
.ph-sp-flow .alert { margin: 0;}
/* Tot drie zoekgebieden (.ph-zoekveld uit sectie 10), 8px ertussen, met een kruisje na de straal (geen Figma-ontwerp), en "Zoekgebied toevoegen" */
.ph-sp-zoekgebieden { display: flex; flex-direction: column; gap: 8px;}
.ph-sp-zoekgebieden .ph-zoekveld { flex: none;}
.ph-sp-zoekgebied-weg { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: none; background: none; color: var(--icon-default); cursor: pointer;}
.ph-sp-zoekgebied-weg svg { width: 12px; height: 12px;}
.ph-sp-toevoegen { align-self: flex-start;}

/* z-index: de suggestielijst van het zoekgebied valt anders onder de footer (die is position: relative en staat later in de pagina) */
.ph-sp { z-index: 1;}
.ph-sp-inner { display: flex; align-items: flex-start; gap: 80px; max-width: 1440px; margin: 0 auto; padding: 40px 80px;}
.ph-sp-flow { display: flex; flex-direction: column; gap: 40px; flex: 0 1 549px; min-width: 0;}
.ph-sp-flow-kop { display: flex; flex-direction: column; gap: 24px;}
/* Voortgang (Figma "Frame 137"): vijf streepjes van 4 hoog, 8 ertussen; gedane en huidige stap goud */
.ph-sp-voortgang { display: flex; gap: 8px;}
.ph-sp-voortgang span { flex: 1 1 0; height: 4px; border-radius: 999px; background-color: var(--primary-20); transition: background-color .3s ease-out;}
.ph-sp-voortgang span.is-actief { background-color: var(--secondary);}
.ph-sp-stap { display: flex; flex-direction: column; gap: 24px; padding: 40px; border: 1px solid var(--stroke-secondary); border-radius: var(--radius-md); background-color: var(--bg-secondary); box-shadow: var(--shadow-float);}
/* Vorige en Volgende elk de helft (gap 16); bij stap 1 houdt Vorige zijn plek (.invisible) */
.ph-sp-knoppen { display: flex; gap: 16px;}
.ph-sp-knoppen .btn { flex: 1 1 0; font-weight: 500;}

/* Groen paneel (Figma "download-app-cta"): padding 40, 80px tussen tekst en telefoon */
.ph-sp-cta { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 80px; flex: 0 0 442px; min-width: 0; padding: 40px; background-color: var(--bg-inverse); color: var(--text-inverse);}
/* Figma "Gold Glow": 500×500, 29px buiten de rechterkant, midden 173px onder het midden; de SVG (860) heeft de vervaging eromheen */
.ph-sp-cta-glow { position: absolute; z-index: 1; top: calc(50% + 173px); right: -209px; width: 860px; height: 860px; max-width: none; transform: translateY(-50%); pointer-events: none;}
.ph-sp-cta-tekst { position: relative; z-index: 3; display: flex; flex-direction: column; gap: 24px; width: 100%;}
.ph-sp-cta-kop { display: flex; flex-direction: column; gap: 8px;}
.ph-sp-cta-aantal { font-variant-numeric: tabular-nums;}
.ph-sp-cta-intro { margin: 0; font-size: var(--body-default-size); line-height: var(--body-default-line); color: var(--text-inverse-secondary);}
/* Melding (Figma "Sneak Preview melding"): glas, 362 breed */
.ph-sp-melding { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 64px; padding: 12px 14px; border-radius: 24px;}
.ph-sp-melding::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background-color: rgba(var(--white-rgb), .07); box-shadow: 0 8px 40px rgba(var(--black-rgb), .2); mix-blend-mode: screen;}
.ph-sp-melding > * { position: relative;}
.ph-sp-melding-logo { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; background-color: var(--white);}
.ph-sp-melding-logo img { width: 24px; height: 31px;}
.ph-sp-melding-tekst { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; font-size: 15px; line-height: 17.5px; letter-spacing: -0.23px; white-space: nowrap; color: var(--text-inverse);}
.ph-sp-melding-tekst strong { font-weight: 600;}
.ph-sp-melding-tijd { align-self: flex-start; font-size: 15px; line-height: 17px; letter-spacing: -0.23px; white-space: nowrap; color: rgba(var(--white-rgb), .5);}
/* Telefoon (Figma "Notifications 1", 202×413): 80px van links en 50px boven het vak van 312; het paneel knipt de onderkant af */
.ph-sp-cta-telefoon { position: relative; z-index: 2; flex-shrink: 0; width: 100%; height: 312px;}
.ph-sp-cta-telefoon img { position: absolute; top: -50px; left: 80px; width: 202px; height: 413px; max-width: none;}
/* Naast de stappen (Figma "Frame 639", 80 onder de bovenkant): tekst (290) en telefoon (201) naast elkaar, radius 40.
   De telefoon steekt boven het paneel uit; de gloed blijft erbinnen (.ph-sp-cta-gloed knipt). De melding (362) loopt over de telefoon. */
.ph-sp-cta-flow { flex: 0 1 651px; flex-direction: row; align-items: stretch; margin-top: 80px; overflow: visible; border-radius: var(--radius-xl);}
.ph-sp-cta-gloed { position: absolute; z-index: 1; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none;}
.ph-sp-cta-flow .ph-sp-cta-tekst { flex: 0 1 290px; width: auto; min-width: 0;}
.ph-sp-cta-flow .ph-sp-melding { width: 362px;}
.ph-sp-cta-flow .ph-sp-cta-telefoon { flex: 0 0 201px; width: 201px; height: auto;}
.ph-sp-cta-flow .ph-sp-cta-telefoon img { top: -90px; left: 0;}
/* Label Medium Default */
.ph-sp-label { font-size: var(--label-default-size); line-height: var(--label-default-line); font-weight: 500; color: var(--text-default);}
.ph-sp-veld { display: flex; flex-direction: column; gap: 8px; flex: 1 1 0; min-width: 0;}
.ph-sp-veld-klein { gap: 6px;}
.ph-sp-rij { display: flex; gap: 16px;}
.ph-sp-prijs .ph-sp-rij { gap: 12px;}
.ph-sp-flow .form-control { font-weight: var(--font-weight-body);}
/* Prijsrange: staafjes (10 kolommen, 174 hoog), schuifregelaar en min/max */
.ph-sp-prijs { display: flex; flex-direction: column; gap: 16px;}
.ph-sp-staafjes { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); align-items: end; gap: 8px; height: 174px;}
.ph-sp-staafjes span { height: 8px; border-radius: var(--radius-xs); background-color: var(--primary-20); transition: height .4s ease-out, background-color .3s ease-out;}
.ph-sp-staafjes span.is-actief { background-color: var(--primary-600);}
/* Twee range-inputs over elkaar; alleen de bolletjes (16px, rand 2) zijn klikbaar */
.ph-sp-slider { position: relative; height: 24px;}
.ph-sp-slider-baan { position: absolute; top: 10px; left: 0; right: 0; height: 4px; border-radius: 2px; background-color: var(--stroke-secondary);}
.ph-sp-slider-baan span { position: absolute; top: 0; bottom: 0; background-color: var(--primary);}
.ph-sp-slider input { position: absolute; inset: 0; width: 100%; height: 24px; margin: 0; appearance: none; background: transparent; pointer-events: none;}
.ph-sp-slider input:focus { outline: none;}
.ph-sp-slider input::-webkit-slider-runnable-track { height: 24px; background: transparent;}
.ph-sp-slider input::-moz-range-track { height: 24px; background: transparent;}
.ph-sp-slider input::-webkit-slider-thumb { box-sizing: border-box; width: 16px; height: 16px; margin-top: 4px; appearance: none; border: 2px solid var(--primary); border-radius: 50%; background-color: var(--white); box-shadow: var(--shadow-pin); pointer-events: auto; cursor: grab;}
.ph-sp-slider input::-moz-range-thumb { box-sizing: border-box; width: 16px; height: 16px; border: 2px solid var(--primary); border-radius: 50%; background-color: var(--white); box-shadow: var(--shadow-pin); pointer-events: auto; cursor: grab;}
.ph-sp-slider input:focus-visible::-webkit-slider-thumb { box-shadow: var(--shadow-focus);}
.ph-sp-slider input:focus-visible::-moz-range-thumb { box-shadow: var(--shadow-focus);}
.ph-sp-slider-einden { display: flex; justify-content: space-between; gap: 16px; font-size: var(--body-sm-size); line-height: var(--body-sm-line); color: var(--text-default); opacity: .4;}
/* Jouw wensen: één keuze (Figma "Radio Button 1": 14px, rand 2, gouden stip) */
.ph-sp-keuzes { display: flex; flex-direction: column; gap: 8px;}
.ph-sp-keuze { display: flex; align-items: center; gap: 16px; margin: 0; font-size: var(--body-default-size); line-height: var(--body-default-line); color: var(--text-secondary); cursor: pointer;}
.ph-sp-keuze input { flex-shrink: 0; width: 14px; height: 14px; margin: 2px; padding: 2px; appearance: none; border: 2px solid var(--stroke-default); border-radius: 50%; background-clip: content-box; cursor: pointer;}
.ph-sp-keuze input:checked { border-color: var(--secondary); background-color: var(--secondary);}
.ph-sp-keuze input:focus-visible { outline: none; box-shadow: var(--shadow-focus);}
/* Vinkjes (type woning en wensen op /sneak-preview, meerdere keuzes): vierkant in plaats van rond */
.ph-sp-keuze input[type="checkbox"] { border-radius: var(--radius-xs);}
/* Waardebepaling hoort bij "Ik heb een eigen woning" en staat er ingesprongen onder */
.ph-sp-keuze-sub { padding-left: 34px;}
.ph-sp-keuze[hidden] { display: none;}

@media (max-width: 1199.98px) {
    /* Stappen en paneel onder elkaar, gecentreerd en maximaal 651 breed */
    .ph-sp-inner { flex-direction: column; align-items: center; gap: 0; padding: 40px 24px;}
    .ph-sp-flow, .ph-sp-cta-flow { width: 100%; max-width: 651px;}
    .ph-sp-cta { flex: none; gap: 40px;}
}

@media (max-width: 991.98px) {
    .ph-sp-start { flex-basis: auto;}
}

@media (max-width: 767.98px) {
    .ph-sp-start, .ph-sp-stap, .ph-sp-cta { padding: 24px;}
    .ph-sp-cta-flow { margin-top: 40px; border-radius: var(--radius-lg);}
    .ph-sp-cta-flow .ph-sp-cta-tekst { flex: 1 1 auto;}
    .ph-sp-cta-flow .ph-sp-melding { width: 100%;}
    .ph-sp-rij { flex-direction: column;}
    .ph-sp-prijs .ph-sp-rij { flex-direction: row;}
    .ph-sp-melding-tekst > * { overflow: hidden; text-overflow: ellipsis;}
    .ph-sp-melding-tijd { display: none;}
    .ph-sp-cta-telefoon { display: none;}
}

/* === 14. Slider — Owl Carousel (js/owl/functies.js) — nog geen Figma-ontwerp ===
   Basis-CSS in css/owl/owl.carousel.min.css; hier alleen pijlen en bolletjes,
   gecentreerd onder de slider. */

.owl-carousel .owl-nav, .owl-carousel .owl-dots { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 24px;}
.owl-carousel .owl-nav button.owl-prev, .owl-carousel .owl-nav button.owl-next { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1px solid var(--stroke-default); border-radius: var(--radius-sm); color: var(--icon-default); transition: background-color .3s ease-out, border-color .3s ease-out;}
.owl-carousel .owl-nav button.owl-prev:hover, .owl-carousel .owl-nav button.owl-next:hover { border-color: var(--primary); background-color: var(--primary-20);}
.owl-carousel .owl-nav button.disabled { opacity: .4; cursor: default; pointer-events: none;}
.owl-carousel .owl-nav svg { width: var(--icon-size-default); height: var(--icon-size-default);}
.owl-carousel .owl-nav .owl-prev svg { transform: scaleX(-1);}
.owl-carousel .owl-dots { margin-top: 16px;}
/* Tikvlak 44 hoog en 4px breder aan elke kant via ::before (Owl zet padding: 0 !important op de knop) */
.owl-carousel button.owl-dot { position: relative;}
.owl-carousel button.owl-dot::before { content: ""; position: absolute; inset: -18px -4px;}
.owl-carousel button.owl-dot span { display: block; width: 8px; height: 8px; border-radius: 50%; background-color: var(--stroke-secondary); transition: background-color .3s ease-out, width .3s ease-out;}
.owl-carousel button.owl-dot.active span { width: 24px; border-radius: var(--radius-xs); background-color: var(--primary);}

/* === 15. Makelaarskant — /voormakelaars ===================================
   Donker thema (Background/Inverse) met glas-kaarten, goudkleurige gloed en de
   PH-patroon-hero. Bouwblokken in inc/makelaars.php, header in
   inc/makelaars-header.php, pagina's in content/voormakelaars/. De footer is
   inc/footer.php met .ph-footer-mk. Zij- en sectiepadding via --mk-padding. */

/* Basis */
body.ph-mk { margin: 0; background-color: var(--bg-inverse); color: var(--text-inverse);}
.ph-mk strong { font-weight: 600;}
/* Gloed, patroon en carrousel steken bewust buiten de viewport */
.ph-mk-main { position: relative; overflow-x: clip;}
.ph-mk-container { position: relative; max-width: 1440px; margin-inline: auto; padding-inline: var(--mk-padding);}
.ph-mk-section { position: relative; padding-block: var(--mk-padding);}
.ph-mk-muted { color: var(--text-inverse-secondary);}
/* Donkergroen-600 op witte kaarten (formulieren, planner, reviews) */
.ph-mk-subtle { color: var(--text-secondary);}
/* Body/Small */
.ph-mk-text-sm { font-size: var(--body-sm-size); line-height: var(--body-sm-line);}
.ph-mk-maxw-600 { max-width: 600px;}
.ph-mk-maxw-800 { max-width: 800px;}
/* Sectiekop met 40px tot de inhoud eronder (Figma Padding/Medium-300): beloftes en fases */
.ph-mk-kop { margin-bottom: 40px;}
/* Tekst die in een flex-rij moet kunnen krimpen naast een knop */
.ph-mk-flex-text { flex-basis: 192px;}
/* Twee gelijke kolommen met 80px tussenruimte (beschikbaarheid, formulier) */
.ph-mk-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mk-padding); align-items: start;}

/* Header en footer: dezelfde componenten als de consumentenkant, lichte links op donker */
.ph-mk .ph-header-links a { color: var(--text-inverse-secondary);}
.ph-mk .ph-header-links a:hover { color: var(--white);}
/* Vensters uit de rest van de app (.ph-accountvenster, bv. slot claimen) zijn wit: donkere tekst i.p.v. de lichte van de makelaarskant */
.ph-mk .ph-accountvenster { --bs-modal-color: var(--text-default); color: var(--text-default);}
/* Goud-gloed van de footer (Figma "Ellipse" 76:4991: 1860×400 bovenaan de footer, niet afgesneden): steekt 200px
   boven de footer uit; onderaan afgesneden, anders wordt de pagina langer dan de footer */
.ph-footer-mk-gloed { position: absolute; top: -200px; right: 0; bottom: 0; left: 0; overflow: hidden; pointer-events: none;}
.ph-footer-mk-gloed .ph-mk-glow { top: 400px;}
/* Groene blok boven de gloed en (contactpagina) boven de kaart, die onder de afgeronde hoeken doorloopt */
.ph-footer-mk .ph-footer-section { position: relative;}

/* Wazige goud-gloed (Figma "Ellipse"), gecentreerd achter de inhoud */
.ph-mk-glow { position: absolute; top: 50%; left: 50%; z-index: 0; max-width: none; transform: translate(-50%, -50%); pointer-events: none;}
/* Glas-kaart (Background+Border): 10% wit, 20% witte rand */
.ph-mk-glass { position: relative; display: flex; flex-direction: column; gap: 24px; overflow: hidden; overflow: clip; border: 1px solid var(--stroke-inverse); border-radius: var(--radius-md); background-color: var(--white-10);}
.ph-mk-glass > * { position: relative;}
.ph-mk-glass > .ph-mk-glow { position: absolute;}
.ph-mk-glass-lg { padding: 40px;}
.ph-mk-divider { margin: 0; border: 0; border-top: 1px solid var(--stroke-inverse); opacity: 1;}

/* Hero: patroon + gloed + zoekkaart + stempel */
.ph-mk-hero { position: relative; display: flex; flex-direction: column; align-items: center; min-height: 800px; padding: var(--mk-padding) var(--mk-padding) 0;}
.ph-mk-hero > .ph-mk-glow { top: calc(50% + 1px);}
/* Patroon: 20% wit, vanaf 84,6% uitfadend naar donkergroen (Figma "Banner" 1:39768) */
.ph-mk-pattern { position: absolute; left: 50%; bottom: 0; z-index: 0; width: max(100%, 1440px); height: 883px; overflow: hidden; transform: translateX(-50%); pointer-events: none;}
.ph-mk-pattern img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; opacity: .2;}
.ph-mk-pattern::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(var(--primary-rgb), 0) 84.6%, var(--primary) 100%);}
/* z-index 2: de suggestielijst van de zoekkaart valt over de logo-carrousel en (regio check) de resultaten */
.ph-mk-hero-content { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 40px; width: 100%; max-width: 800px; padding-top: var(--mk-padding); filter: drop-shadow(0 4px 8px rgba(var(--primary-rgb), .25));}
.ph-mk-hero-text { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-inline: 40px; text-align: center;}
/* Figma: titel is 760px breed en steekt 20px buiten de 40px zijpadding */
.ph-mk-hero-title { width: calc(100% + 40px); max-width: 760px; margin-inline: -20px;}
/* Figma motion (Titel 1:39793, Sub-titel 1:39781, Body 5:2079; Home, Regio check, Contact): eenmalig in, de titel
   van boven en label en tekst van onder (100px, 0,5s ease-out; label na 0,2s, tekst na 0,4s) */
.ph-mk-hero-text > * { animation: ph-mk-hero-van-onder .5s ease-out .2s both;}
.ph-mk-hero-text > p { animation-delay: .4s;}
.ph-mk-hero-text > .ph-mk-hero-title { animation-name: ph-mk-hero-van-boven; animation-delay: 0s;}

/* Witte zoekkaart "Check je regio" (Figma "Search") */
.ph-mk-search-card { display: flex; flex-direction: column; gap: 16px; padding: 32px; border-radius: var(--radius-md); background-color: var(--white); box-shadow: var(--shadow-float); text-align: left;}
.ph-mk-search-input { position: relative; flex: 1 1 auto; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px 16px; border: 1px solid var(--stroke-secondary); border-radius: var(--radius-sm); color: var(--primary);}
.ph-mk-search-input svg { flex-shrink: 0;}
.ph-mk-search-input input { flex: 1 1 auto; min-width: 0; border: none; outline: none; background: transparent; font-size: 16px; font-weight: 400; color: var(--primary); text-overflow: ellipsis;}
.ph-mk-search-input input::placeholder { color: var(--text-secondary); text-overflow: ellipsis;}
.ph-mk-search-input:focus-within { border-color: var(--primary); box-shadow: var(--shadow-focus);}
.ph-mk-search-btn { --bs-btn-padding-x: 24px; min-height: 56px;}

/* Stempel: roze cirkel, -10° gekanteld; animeert eenmalig in (Figma motion:
   opacity 0→1 en scale 1.2→1, ease-out, na 1,2s) */
.ph-mk-sticker { position: absolute; display: flex; align-items: center; justify-content: center; width: 232px; height: 232px; pointer-events: none; animation: ph-mk-sticker-in .5s ease-out 1.2s both;}
.ph-mk-sticker-inner { display: flex; align-items: center; justify-content: center; width: 200px; height: 200px; padding: 32px; border: 1px solid var(--stroke-inverse); border-radius: 50%; background-color: var(--pink-500); transform: rotate(-10deg); filter: drop-shadow(0 4px 8px var(--shadow-default)); font-family: var(--font-display); font-stretch: var(--font-display-stretch); font-size: 24px; line-height: 1; font-weight: var(--font-weight-display); text-transform: uppercase; text-align: center; color: var(--white);}
/* Desktop: de cirkel (232 met een rand van 16) begint precies aan de rand van de 800px-kolom, dicht naast de tekst */
.ph-mk-sticker-hero { top: 143px; right: -216px;}

@keyframes ph-mk-sticker-in {
    from { opacity: 0; scale: 1.2;}
    to { opacity: 1; scale: 1;}
}

@keyframes ph-mk-hero-van-boven {
    from { opacity: 0; translate: 0 -100px;}
}

@keyframes ph-mk-hero-van-onder {
    from { opacity: 0; translate: 0 100px;}
}

/* Logo-carrousel onder de hero, links/rechts uitfadend */
.ph-mk-logo-carousel { position: relative; z-index: 1; width: 100vw; max-width: 1918px; height: 100px; margin-top: 40px; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent 5%, var(--black) 20%, var(--black) 80%, transparent 95%); mask-image: linear-gradient(to right, transparent 5%, var(--black) 20%, var(--black) 80%, transparent 95%);}
.ph-mk-logo-track { display: flex; align-items: center; gap: 64px; width: max-content; height: 100%; animation: ph-mk-marquee 40s linear infinite;}
.ph-mk-logo-track img { flex-shrink: 0; width: 180px;}
.ph-mk-logo-track img.is-contain, .ph-mk-logo-track img.is-cover { height: 100px; object-fit: contain;}
.ph-mk-logo-track img.is-cover { object-fit: cover;}

@keyframes ph-mk-marquee {
    to { transform: translateX(calc(-50% - 32px));}
}

@media (prefers-reduced-motion: reduce) {
    .ph-mk-sticker, .ph-mk-logo-track, .ph-mk-hero-text > * { animation: none;}
}

/* Quote: goud PH-teken + grote tekst */
.ph-mk-quote { display: flex; justify-content: center; align-items: flex-start; gap: 32px;}
.ph-mk-quote-mark { flex-shrink: 0;}
.ph-mk-quote figure { max-width: 610px;}
.ph-mk-quote-text { font-size: 32px; line-height: 40px; font-weight: 300; color: var(--white);}

/* Beloftes: 3 kolommen, boven en onder uitfadend, als doorlopende band (render_mk_beloftes): de strook bevat
   drie gelijke sets met elk 20px ruimte eronder, dus -33.333% is precies één set en de lus heeft geen naad.
   Buitenste kolommen omhoog, de middelste omlaag; alleen de kolom onder de muis staat stil, en alles bij prefers-reduced-motion. */
.ph-mk-beloven > .ph-mk-glow { top: 279px; margin-top: -200px; transform: translateX(-50%);}
.ph-mk-beloven-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; height: 600px; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent 0, var(--black) 14%, var(--black) 82%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, var(--black) 14%, var(--black) 82%, transparent 100%);}
/* Drie indelingen van dezelfde 12 kaarten; per schermmaat staat er één aan (zie de media queries van de
   makelaarskant): desktop 3 kolommen van 4, tablet 2 van 6, telefoon 1 van 12. Duur = 9s per kaart. */
.ph-mk-beloven-tablet, .ph-mk-beloven-mobiel { display: none;}
.ph-mk-beloven-tablet { grid-template-columns: repeat(2, minmax(0, 1fr));}
.ph-mk-beloven-mobiel { grid-template-columns: minmax(0, 1fr);}
.ph-mk-beloven-col { min-width: 0; overflow: hidden;}
.ph-mk-beloven-strook { display: flex; flex-direction: column; animation: ph-mk-beloven-omhoog 36s linear infinite;}
.ph-mk-beloven-tablet .ph-mk-beloven-strook { animation-duration: 54s;}
.ph-mk-beloven-mobiel .ph-mk-beloven-strook { animation-duration: 108s;}
.ph-mk-beloven-strook.is-omlaag { animation-name: ph-mk-beloven-omlaag;}
.ph-mk-beloven-col:hover .ph-mk-beloven-strook { animation-play-state: paused;}
/* Met js/makelaars-beloftes.js stuurt het script de positie (slepen met de muis) en staat de CSS-animatie uit. */
.ph-mk-beloven-grid.is-js .ph-mk-beloven-strook { animation: none; will-change: transform;}
.ph-mk-beloven-grid.is-js .ph-mk-beloven-col { cursor: grab; user-select: none;}
.ph-mk-beloven-grid.is-js .ph-mk-beloven-col.is-slepen { cursor: grabbing;}
.ph-mk-beloven-set { display: flex; flex-direction: column; gap: 20px; padding-bottom: 20px;}
@keyframes ph-mk-beloven-omhoog { from { transform: translateY(0);} to { transform: translateY(-33.3333%);} }
@keyframes ph-mk-beloven-omlaag { from { transform: translateY(-33.3333%);} to { transform: translateY(0);} }
@media (prefers-reduced-motion: reduce) {
    .ph-mk-beloven-strook { animation: none;}
}
.ph-mk-belofte { display: flex; flex-direction: column; gap: 16px; padding: 22px; border: 1px solid var(--stroke-inverse); border-radius: var(--radius-md); background-color: var(--white-10); backdrop-filter: blur(8px); color: var(--white);}
/* Figma: 20/27 Light, vet = SemiBold (op de p, anders geldt de body-stijl van p) */
.ph-mk-belofte p { font-size: 20px; line-height: 27px; font-weight: 300;}
.ph-mk-belofte.is-highlight { background-color: var(--white-20);}
.ph-mk-belofte-square, .ph-mk-belofte-logo { flex-shrink: 0; width: 32px; height: 32px; border-radius: var(--radius-sm); background-color: var(--primary-600);}
.ph-mk-belofte-logo { display: flex; align-items: center; justify-content: center; background-color: var(--white);}
.ph-mk-belofte-bar { height: 9px; border-radius: 99px; background-color: var(--primary-600);}
/* Figma: alleen de uitgelichte kaart in de middelste kolom heeft een lichte balk (op elke schermmaat dezelfde kaart) */
.ph-mk-belofte.is-balk-licht .ph-mk-belofte-bar { background-color: var(--white-20);}
/* Over PowerHuys: intro is hier 800px breed (Figma 31:1995) */
.ph-mk-over-beloven .ph-mk-maxw-600 { max-width: 800px;}

/* Fases-tijdlijn; de actieve fase is een witte kaart met witte stip en halo (Figma "Frame 654") */
.ph-mk-fases { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none;}
.ph-mk-fase { display: flex; flex-direction: column; gap: 16px;}
.ph-mk-fase-track { position: relative; display: flex; align-items: center; height: 16px;}
.ph-mk-fase-track::after { content: ""; flex: 1 1 auto; height: 2px; margin-left: -1px; background-color: var(--secondary);}
.ph-mk-fase-dot { position: relative; z-index: 1; flex-shrink: 0; width: 16px; height: 16px; border-radius: 50%; background-color: var(--secondary);}
.ph-mk-fase.is-active .ph-mk-fase-dot { background-color: var(--white); box-shadow: 0 0 0 4px rgba(var(--white-rgb), .5);}
.ph-mk-fase-card { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; margin-right: 16px; padding: 24px; overflow: hidden; border: 1px solid var(--stroke-inverse); border-radius: var(--radius-md); background-color: var(--white-10); color: var(--white);}
.ph-mk-fase-card > :not(.ph-mk-glow) { position: relative;}
.ph-mk-fase-card h3 { color: inherit;}
.ph-mk-fase-card p { color: var(--text-inverse-secondary);}
.ph-mk-fase.is-active .ph-mk-fase-card { margin-right: 0; border-color: var(--white); background-color: var(--white); color: var(--primary);}
.ph-mk-fase.is-active .ph-mk-fase-card p { color: var(--text-secondary);}
.ph-mk-fase-label { font-size: var(--body-sm-size); line-height: var(--body-sm-line); font-weight: 500; color: var(--secondary);}

/* Tools (Figma "Function cards"); teller "8 van de 20 zichtbaar" (Figma "Background" 10:7724): tekst getrimd tot de hoofdletterhoogte, dus 35px hoog */
.ph-mk-count-badge { padding: 12px 16px; border-radius: var(--radius-sm); background-color: var(--white); font-size: 16px; line-height: 1; color: var(--primary); text-box: trim-both cap alphabetic;}
.ph-mk-tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;}
.ph-mk-tool { position: relative; display: flex; flex-direction: column; gap: 16px; min-height: 118px; padding: 16px; overflow: hidden; border: 1px solid var(--stroke-inverse); border-radius: var(--radius-md); background-color: var(--white-10);}
.ph-mk-tool > :not(.ph-mk-glow) { position: relative;}
.ph-mk-tool-icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; background-color: var(--white);}
.ph-mk-tool-icon.is-locked { background-color: var(--secondary);}
.ph-mk-tool-content { display: flex; flex-direction: column; gap: 4px;}
.ph-mk-tool-title { font-family: var(--font-primary); font-size: 18px; line-height: 21.6px; font-weight: 500; color: var(--white); overflow-wrap: anywhere; hyphens: auto;}
.ph-mk-tool.is-locked .ph-mk-tool-content { filter: blur(2px); user-select: none;}
.ph-mk-tool .ph-mk-tool-lock { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 6.4px; padding: 24px 16px 12px; background-image: linear-gradient(180deg, rgba(var(--white-rgb), 0) 0%, var(--white-10) 70%), linear-gradient(180deg, rgba(var(--primary-rgb), 0) 0%, var(--primary) 70%); font-size: 16px; line-height: 1; font-weight: 500; color: var(--white);}
/* Slotje gecentreerd in een vlak van 18px (Figma "Locked slot") */
.ph-mk-tool-lock img { margin-inline: 3.5px;}
/* Tool-kaart die een pop-up opent (Home en Webinar) */
.ph-mk-tool-link { display: flex; border-radius: var(--radius-md); text-decoration: none;}
.ph-mk-tool-link > .ph-mk-tool { flex: 1 1 auto; transition: background-color .3s ease-out;}
.ph-mk-tool-link:hover > .ph-mk-tool { background-color: var(--white-20);}
/* Tool-pop-up (Figma "2" 44:2031): uitleg links, voorbeeldplanner rechts die boven de pop-up uitsteekt en onderaan wegvalt */
.ph-mk-tool-popup .modal-dialog { max-width: 1100px;}
.ph-mk-tool-popup-content { position: relative; flex-direction: row; border: 1px solid var(--stroke-inverse); border-radius: var(--radius-md); background-color: var(--primary); background-image: linear-gradient(var(--white-10), var(--white-10)); color: var(--white);}
.ph-mk-tool-popup-bg { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none;}
.ph-mk-tool-popup-glow { left: calc(50% + 262px);}
.ph-mk-tool-popup-close { position: absolute; top: 17px; right: 19px; z-index: 2; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--stroke-inverse); border-radius: var(--radius-sm); background: none; color: var(--white); box-shadow: var(--shadow-control); transition: background-color .2s ease-out;}
.ph-mk-tool-popup-close:hover { background-color: var(--white-10);}
.ph-mk-tool-popup-close:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px;}
/* Webinar-pop-up (regio-check): de witte formulierkaart zelf is de pop-up, sluitknop in primary */
.ph-mk-webinar-popup .modal-dialog { max-width: 720px;}
.ph-mk-webinar-popup-content { position: relative; border: 0; background: none;}
.ph-mk-webinar-popup-content .ph-mk-tool-popup-close { border-color: var(--stroke-default); color: var(--primary);}
.ph-mk-webinar-popup-content .ph-mk-tool-popup-close:hover { background-color: var(--primary-20);}
.ph-mk-webinar-popup-content .ph-mk-form-title { padding-right: 56px;}
.ph-mk-tool-popup-info { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 32px; min-height: 504px; padding: 40px;}
.ph-mk-tool-popup-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 6px; background-color: var(--white);}
/* Figma: icoon 28px in een vlak van 40px (op de kaart 20px in 32px), dus 1,4× */
.ph-mk-tool-popup-icon img { transform: scale(1.4);}
.ph-mk-tool-popup-title { font-family: var(--font-primary); font-size: var(--headline-md-size); line-height: var(--headline-md-line); font-weight: 500; color: var(--white);}
.ph-mk-tool-popup-demo { position: relative; flex: 1 1 0; min-width: 0; display: flex; align-items: flex-end; justify-content: center; padding-right: 24px;}
.ph-mk-planner { display: flex; flex-direction: column; gap: 32px; width: 384px; height: calc(100% + 26px); min-height: 530px; margin-top: -26px; padding: 32px; overflow: hidden; border-radius: var(--radius-md) var(--radius-md) 0 0; background-color: var(--white); box-shadow: var(--shadow-modal); color: var(--primary);}
.ph-mk-planner-title, .ph-mk-planner-kop { font-family: var(--font-primary); font-size: 24px; line-height: normal; color: var(--primary);}
.ph-mk-planner-title { font-weight: 700;}
.ph-mk-planner-kop { font-weight: 600;}
.ph-mk-planner-logo { display: block; width: 210px; height: 48px; margin: 11px auto;}
.ph-mk-planner-week { display: flex; justify-content: space-between; align-items: center; font-size: 16px;}
.ph-mk-planner-weektekst { display: flex; flex-direction: column; gap: 8px; padding: 8px 4px; text-align: center;}
.ph-mk-planner-week strong { font-weight: 600;}
/* Figma trimt de planner-teksten tot hun hoofdletterhoogte (text-box-trim) */
.ph-mk-planner-title, .ph-mk-planner-kop, .ph-mk-planner-weektekst > *, .ph-mk-planner-optie > *, .ph-mk-planner-voorwaarden { text-box: trim-both cap alphabetic;}
.ph-mk-planner-pijl { display: flex; padding: 8px; border: 1px solid var(--primary-20); border-radius: 50%; background-color: var(--white); color: var(--primary);}
.ph-mk-planner-pijl.is-vorige svg { transform: rotate(90deg);}
.ph-mk-planner-pijl.is-volgende svg { transform: rotate(-90deg);}
.ph-mk-planner-pijl:disabled { opacity: .4;}
.ph-mk-planner-dagen { display: inline-grid; grid-template-columns: repeat(7, auto); gap: 8px;}
.ph-mk-planner-tijden { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px;}
.ph-mk-planner-optie { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 8px; border: 1px solid var(--primary-20); border-radius: 10px; background-color: var(--white); font-size: 16px; line-height: normal; color: var(--primary);}
.ph-mk-planner-optie strong { font-weight: 600;}
.ph-mk-planner-tijden .ph-mk-planner-optie { padding: 8px 4px; font-size: 12px;}
.ph-mk-planner-optie[aria-pressed="true"] { background-color: var(--primary); color: var(--white); font-weight: 600;}
.ph-mk-planner-optie:disabled { color: var(--primary-20);}
.ph-mk-planner-optie:focus-visible, .ph-mk-planner-pijl:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px;}
.ph-mk-planner-voorwaarden { font-size: 12px; line-height: normal; text-align: center;}
.ph-mk-planner-voorwaarden strong { font-weight: 700;}

/* Demo's rechts in de tool-pop-up (render_mk_tool_demo(), Figma "Mockups" Tool 01-21 en de losse mockups), decoratief.
   Witte vellen (.ph-mk-planner + .ph-mk-demo-vel) steken boven de pop-up uit zoals de planner, inhoud verticaal
   gecentreerd; .is-midden centreert een demo zonder vel. */
/* Inhoud begint op de hoogte van de titel en het kruisje (40 van de bovenkant van de pop-up) */
.ph-mk-tool-popup-demo.is-midden { align-items: flex-start; padding-block: 40px;}
/* Klant automation en Het Huysdossier wel verticaal in het midden */
.ph-mk-tool-popup-demo.is-midden.is-centraal { align-items: center;}
/* Wit vel steekt 26 boven de pop-up uit: 26 + 40 bovenpadding, zodat de inhoud gelijk met de titel begint */
.ph-mk-demo-vel { position: relative; justify-content: flex-start; gap: 20px; padding-top: 66px; font-size: 14px; line-height: normal;}
.ph-mk-demo-vel strong { font-weight: 600;}
.ph-mk-demo-vel .btn { pointer-events: none;}
.ph-mk-demo-vel-kop { display: flex; flex-direction: column; gap: 8px; color: var(--text-secondary);}
.ph-mk-demo-label { font-size: 12px; font-weight: 600; color: var(--text-secondary);}
.ph-mk-demo-klein { font-size: 12px; color: var(--text-secondary);}
.ph-mk-demo-middel { font-size: 16px;}
.ph-mk-demo-groot { font-size: 20px; line-height: 1.2;}
/* Grijs blok met rand (Figma Background/Subtle); wit met schaduw, donkergroen of lichtroze als variant */
.ph-mk-demo-blok { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; border: 1px solid var(--stroke-secondary); border-radius: var(--radius-sm); background-color: rgba(var(--primary-rgb), .04);}
/* Losse tekst in een blok grijs/licht; knoppen en pillen houden hun eigen (witte) tekst */
.ph-mk-demo-blok > span:not(.btn):not(.ph-mk-demo-pil) { color: var(--text-secondary);}
.ph-mk-demo-blok.is-wit { background-color: var(--white); box-shadow: var(--shadow-float);}
.ph-mk-demo-blok.is-donker { gap: 12px; padding: 16px; border-color: var(--primary); background-color: var(--primary); color: var(--white);}
.ph-mk-demo-blok.is-donker > span:not(.btn):not(.ph-mk-demo-pil) { color: var(--white-80);}
.ph-mk-demo-blok.is-roze { flex-direction: row; align-items: center; gap: 12px; border-color: var(--pink-200); background-color: var(--pink-200);}
/* Pil: rand (standaard), roze (wit op roze), donkergroen, licht op donker */
.ph-mk-demo-pil { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--stroke-default); border-radius: 99px; font-size: 12px; line-height: 1; font-weight: 500; color: var(--primary); white-space: nowrap;}
.ph-mk-demo-pil.is-roze { border-color: var(--pink-500); background-color: var(--pink-500); color: var(--white);}
.ph-mk-demo-pil.is-donker { border-color: var(--primary); background-color: var(--primary); color: var(--white);}
.ph-mk-demo-pil.is-licht { border-color: var(--white); color: var(--white);}
.ph-mk-demo-pil.is-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background-color: var(--white);}
/* Rij label/waarde met lijn eronder */
.ph-mk-demo-rij { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 12px; padding-block: 10px; border-bottom: 1px solid var(--stroke-secondary);}
.ph-mk-demo-blok.ph-mk-demo-rij { padding: 10px 12px; border: 1px solid var(--stroke-secondary);}
.ph-mk-demo-rij.is-rand { border-top: 1px solid var(--stroke-secondary);}
.ph-mk-demo-rij strong.is-roze { color: var(--pink-500);}
/* QR (mk_demo_qr()) en het donkergroene kaartje (Waardebepaling, BuurtHuys): kop over de volle breedte, tekst naast de QR */
.ph-mk-demo-qr { width: 66px; height: 66px; color: var(--white); fill: var(--primary);}
.ph-mk-demo-kaartje { display: grid; grid-template-columns: minmax(0, 1fr) 66px; gap: 4px 8px; width: 242px; padding: 13px; border-radius: var(--radius-sm); background-color: var(--primary); box-shadow: var(--shadow-float); font-size: 10px; line-height: 1.3; color: var(--white); transform: rotate(4deg);}
.ph-mk-demo-kaartje strong { grid-column: 1 / -1; font-size: 18px; line-height: 1.2; font-weight: 500;}
/* Tool 13 Adverteren: advertentie 384×414 (verticaal gecentreerd), kanalen in rondjes van 76 die erbuiten steken */
.ph-mk-demo-ad { position: relative; width: 384px; margin-inline: 62px 46px;}
.ph-mk-demo-ad-kaart { display: flex; flex-direction: column; height: 414px; border-radius: var(--radius-md); background-color: var(--white); box-shadow: var(--shadow-float); font-size: 14px; line-height: normal; color: var(--primary);}
.ph-mk-demo-ad-kop { display: flex; align-items: center; gap: 10px; height: 60px; padding-inline: 14px; flex-shrink: 0;}
.ph-mk-demo-ad-kop .ph-mk-avatar { width: 36px; height: 36px; font-size: 12px; color: var(--white);}
.ph-mk-demo-ad-kop strong, .ph-mk-demo-ad-voet strong { font-weight: 600;}
/* Grijze subregels (Gesponsord, prijs); niet de initialen in het rondje, die blijven wit */
.ph-mk-demo-ad-kop span:not(.ph-mk-avatar), .ph-mk-demo-ad-voet span { color: var(--text-secondary);}
.ph-mk-demo-ad-kaart > p { height: 46px; padding-inline: 14px; overflow: hidden;}
.ph-mk-demo-ad-foto { position: relative; height: 256px;}
.ph-mk-demo-ad-foto img { display: block; width: 100%; height: 100%; object-fit: cover;}
.ph-mk-demo-ad-foto .card-woning-badge { top: 12px; left: -4px;}
.ph-mk-demo-ad-voet { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 52px; padding-inline: 14px; border-radius: 0 0 var(--radius-md) var(--radius-md); background-color: var(--green-200);}
.ph-mk-demo-ad-voet .ph-mk-demo-ad-knop { padding: 6px 12px; border-radius: var(--radius-sm); background-color: var(--secondary); font-weight: 500; color: var(--white);}
.ph-mk-demo-ad-logo { position: absolute; display: flex; align-items: center; justify-content: center; width: 76px; height: 76px; border-radius: 50%; background-color: var(--white); box-shadow: var(--shadow-float);}
.ph-mk-demo-ad-logo.is-facebook { top: 23px; left: -62px;}
.ph-mk-demo-ad-logo.is-instagram { top: 175px; right: -46px;}
.ph-mk-demo-ad-logo.is-google { top: 316px; left: -62px;}
/* Tool 16 Dashboard: drie cijfers en een lijngrafiek */
.ph-mk-demo-cijfers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;}
.ph-mk-demo-cijfers .ph-mk-demo-blok { padding: 10px;}
.ph-mk-demo-cijfers span { font-size: 11px; overflow-wrap: anywhere;}
.ph-mk-demo-cijfers strong { font-size: 18px;}
.ph-mk-demo-grafiek { display: block; width: 100%; height: 72px; margin-top: 8px;}
.ph-mk-demo-grafiek .is-vlak { fill: var(--pink-200);}
.ph-mk-demo-grafiek .is-lijn { fill: none; stroke: var(--pink-500); stroke-width: 2; vector-effect: non-scaling-stroke;}
/* Offerte: punten met een roze vinkje */
.ph-mk-demo-vinken { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none;}
.ph-mk-demo-vinken li { display: flex; align-items: flex-start; gap: 10px;}
.ph-mk-demo-vinken span { font-size: 12px; color: var(--text-secondary);}
/* Pitch generator: invulvelden */
.ph-mk-demo-velden { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px;}
.ph-mk-demo-velden .is-breed { grid-column: 1 / -1;}
.ph-mk-demo-velden span { display: block; margin-bottom: 4px; font-size: 12px; color: var(--text-secondary);}
.ph-mk-demo-velden div > div { padding: 8px 10px; border: 1px solid var(--stroke-default); border-radius: var(--radius-sm);}
/* Leadgeneratie: tijdlijn met stippen, de laatste roze en vet */
.ph-mk-demo-tijdlijn { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none;}
.ph-mk-demo-tijdlijn li { position: relative; padding-left: 64px;}
.ph-mk-demo-tijdlijn li span { position: absolute; left: 0; font-size: 12px; color: var(--text-secondary);}
.ph-mk-demo-tijdlijn li::before { content: ""; position: absolute; top: 5px; left: 46px; width: 8px; height: 8px; border-radius: 50%; background-color: var(--primary);}
.ph-mk-demo-tijdlijn li.is-laatste { font-weight: 600;}
.ph-mk-demo-tijdlijn li.is-laatste::before { background-color: var(--pink-500);}
/* Tool 11 BuurtHuys: 7×7 donkergroene huizen in een vlak van 296 met de roze radar erachter; buitenste ringen lichter */
.ph-mk-demo-buurt-radar { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: 1fr; place-items: center; width: 296px; max-width: 100%; aspect-ratio: 1;}
.ph-mk-demo-buurt-radar img { position: relative;}
.ph-mk-demo-buurt-radar .ph-mk-demo-buurt-cirkel { position: absolute; inset: 0; width: 100%; height: 100%;}
.ph-mk-demo-buurt-radar .is-ring-2 { opacity: .7;}
.ph-mk-demo-buurt-radar .is-ring-3 { opacity: .35;}
.ph-mk-demo-kaartje.is-buren { position: absolute; left: 32px; bottom: 24px;}
/* Tool 07 Klant automation: trigger (donkergroen) en stappen (wit) met een lijn van 2px ertussen */
.ph-mk-demo-flow { display: flex; flex-direction: column; gap: 24px; width: 100%; max-width: 497px; margin: 0; padding: 0; list-style: none;}
.ph-mk-demo-flow li { position: relative; display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-radius: var(--radius-sm); background-color: var(--white); font-size: 16px; line-height: normal; color: var(--primary);}
.ph-mk-demo-flow li + li::before { content: ""; position: absolute; left: 35px; bottom: 100%; width: 2px; height: 24px; background-color: rgba(var(--white-rgb), .5);}
.ph-mk-demo-flow li.is-trigger { background-color: var(--primary); color: var(--white);}
.ph-mk-demo-flow span { font-size: 12px; color: var(--secondary);}
.ph-mk-demo-flow strong { font-weight: 500;}
/* Tool 19 Deurmatten: foto vult het vel */
.ph-mk-demo-foto { aspect-ratio: 384 / 530; padding: 0;}
/* De foto is de uitsnede uit Figma (Mockup · Gebrande deurmatten, 384×530 op 2×) en vult het vel */
.ph-mk-demo-foto img { width: 100%; height: 100%; object-fit: cover;}
/* Tool 12 Social: Facebook-post achter, Instagram-story en WhatsApp-bericht ervoor, licht gekanteld */
.ph-mk-demo-social { position: relative; flex-shrink: 0; width: 480px; height: 440px;}
.ph-mk-demo-social img { position: absolute; border-radius: var(--radius-sm); box-shadow: var(--shadow-float);}
.ph-mk-demo-social .is-facebook { top: 0; left: 160px; width: 210px; height: auto; transform: rotate(3deg);}
.ph-mk-demo-social .is-instagram { top: 50px; right: 0; width: 210px; height: auto; transform: rotate(8deg);}
.ph-mk-demo-social .is-whatsapp { top: 40px; left: 0; width: 240px; height: auto; transform: rotate(-6deg);}
/* Tool 21 doos (Het Huysdossier; Verhuysplan deel 2 met de partners die eruit komen) */
.ph-mk-demo-doos { position: relative; flex-shrink: 0; width: 420px; height: 420px;}
.ph-mk-demo-doos.met-partners { height: 480px;}
/* Schaduw onder de doos (Figma): de afbeelding is transparant rond de doos, drop-shadow volgt de vorm */
.ph-mk-demo-doos-beeld { position: absolute; left: 0; bottom: 0; width: 420px; height: auto; filter: drop-shadow(0 28px 24px rgba(var(--black-rgb), .5));}
.ph-mk-demo-doos-logo { position: absolute; left: 50%; bottom: 96px; width: 150px; height: auto; transform: translateX(-50%);}
.ph-mk-demo-doos.met-partners .ph-mk-demo-doos-beeld { width: 340px; left: 40px;}
.ph-mk-demo-doos.met-partners .ph-mk-demo-doos-logo { bottom: 72px; width: 124px;}
.ph-mk-demo-partner { position: absolute; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 104px; padding: 12px; border-radius: 12px; background-color: var(--white); box-shadow: var(--shadow-float); font-size: 10px; color: var(--text-secondary);}
.ph-mk-demo-partner strong { font-size: 14px; font-weight: 600; color: var(--primary);}
.ph-mk-demo-partner .ph-mk-demo-pil { margin-top: 4px; padding: 3px 8px; font-size: 10px;}
.ph-mk-demo-partner-icoon { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-bottom: 4px; border-radius: 50%; background-color: var(--green-200);}
.ph-mk-demo-partner.is-verhuizer { top: 60px; left: 10px; transform: rotate(-8deg);}
.ph-mk-demo-partner.is-schilder { top: 0; left: 122px; transform: rotate(6deg);}
.ph-mk-demo-partner.is-hovenier { top: 48px; right: 10px; transform: rotate(12deg);}
.ph-mk-demo-partner.is-interieur { top: 112px; left: 160px; transform: rotate(-4deg);}
/* Verhuysplan deel 1: welkomstblok met de doos */
.ph-mk-demo-welkom { flex-direction: row; align-items: center; gap: 16px; padding: 16px;}
.ph-mk-demo-welkom img { flex-shrink: 0; width: 80px; height: auto;}
.ph-mk-demo-welkom em { font-size: 20px; font-weight: 500; color: var(--primary);}
.ph-mk-demo-welkom span { font-size: 12px;}
/* Tool 15 Insight per woning: de donuts en legenda van de casuspagina, kleiner en twee kolommen */
.ph-mk-demo-inzicht { gap: 16px; padding: 66px 25px 25px;}
.ph-mk-demo-inzicht-donuts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px;}
.ph-mk-demo-inzicht .ph-casus-donut { align-items: flex-start; gap: 8px;}
.ph-mk-demo-inzicht .ph-casus-donut-ring { width: 104px;}
.ph-mk-demo-inzicht .ph-casus-donut-totaal { font-size: 20px; line-height: 1;}
.ph-mk-demo-inzicht .ph-casus-legenda { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; font-size: 12px; line-height: normal;}
/* Corporate brochure: omslag (donkergroen, roze stempel) en binnenpagina naast elkaar */
.ph-mk-demo-spread { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; height: 230px;}
.ph-mk-demo-spread-omslag { display: flex; flex-direction: column; padding: 14px; border-radius: 4px; background-color: var(--primary); color: var(--white);}
.ph-mk-demo-spread-merk { font-size: 8px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;}
.ph-mk-demo-spread-stempel { display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; margin: -6px -2px 0 auto; padding: 8px; border-radius: 50%; background-color: var(--pink-500); font-size: 8px; line-height: 1.1; text-align: center; color: var(--white);}
.ph-mk-demo-spread-omslag strong { margin-top: auto; font-size: 15px; line-height: 1.2;}
.ph-mk-demo-spread-pagina { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--stroke-secondary); border-radius: 4px; font-size: 10px; color: var(--primary);}
.ph-mk-demo-spread-pagina strong { font-size: 10px;}
.ph-mk-demo-spread-lijn { height: 3px; width: 70%; border-radius: 2px; background-color: var(--stroke-secondary);}
.ph-mk-demo-spread-pagina ul { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; color: var(--text-secondary);}
.ph-mk-demo-spread-pagina li::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 6px; border-radius: 50%; background-color: var(--pink-500); vertical-align: middle;}
.ph-mk-demo-spread-blok { margin-top: auto; padding: 6px 8px; border-radius: 4px; background-color: rgba(var(--primary-rgb), .05); font-size: 9px;}
/* Tool 01 Powerhuys Certified: rond keurmerk (400) met witte rand, bovenste helft wit */
.ph-mk-demo-keurmerk { flex-shrink: 0; width: 400px; aspect-ratio: 1; padding: 12px; border: 4px solid var(--white); border-radius: 50%; background-color: var(--primary); box-shadow: var(--shadow-float);}
.ph-mk-demo-keurmerk-binnen { display: flex; flex-direction: column; align-items: center; height: 100%; overflow: hidden; border-radius: 50%; background: linear-gradient(var(--white) 52%, transparent 52%); text-align: center;}
.ph-mk-demo-keurmerk-tekst { display: flex; align-items: center; height: 52%; padding: 24px 56px 0; font-family: var(--font-display); font-stretch: var(--font-display-stretch); font-size: 40px; line-height: 44px; font-weight: var(--font-weight-display); text-transform: uppercase; color: var(--primary-600);}
/* Logo zoals in Figma (280×64): wit blokje (64) met het donkere PH-teken, 12 ernaast het witte woordmerk */
.ph-mk-demo-keurmerk-logo { display: flex; align-items: center; gap: 12px; margin-top: 24px;}
.ph-mk-demo-keurmerk-merk { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 64px; height: 64px; border-radius: 4px; background-color: var(--white);}
.ph-mk-demo-keurmerk-label { margin-top: 12px; font-family: var(--font-display); font-stretch: var(--font-display-stretch); font-size: 24px; line-height: 1; font-weight: var(--font-weight-display); text-transform: uppercase; color: var(--white-80);}
/* Tool 03 Waardebepaling-kaarten: kaartje, gebogen pijl en de aanvraag met het huis */
.ph-mk-demo-waarde-pijl { position: absolute; top: 177px; right: 62px; z-index: 1;}
.ph-mk-demo-waarde-kaart { display: flex; flex-direction: column; gap: 20px; padding: 16px; border-radius: var(--radius-md); background-color: var(--white); box-shadow: var(--shadow-float);}
.ph-mk-demo-waarde-huis { display: flex; align-items: center; justify-content: center; height: 160px; border-radius: var(--radius-sm); background-color: var(--primary-20);}
/* Het Huysdossier: 3D-render (transparant) */
.ph-mk-demo-huysdossier { display: block; width: 460px; max-width: 100%; height: auto;}
/* Tool 14 Powerhuys App: twee telefoons */
.ph-mk-demo-app { display: block; width: 460px; max-width: 100%; height: auto;}

/* Beschikbaarheid (slots) */
.ph-mk-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;}
/* Figma: vol = wit vlak, vrij (Beschikbaar / Laatste slot) = glas */
/* Figma "Overlay" (44:2132): tekst getrimd tot de hoofdletterhoogte, dus 28px hoog */
.ph-mk-slot { padding: 8px 12px; border: 1px solid var(--white); border-radius: var(--radius-sm); background-color: var(--white); font-size: 14px; line-height: 1; color: var(--primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-box: trim-both cap alphabetic;}
.ph-mk-slot.is-free { border-color: var(--stroke-inverse); background-color: var(--white-10); color: var(--white);}
/* Home, "Beschikbaarheid per werkgebied" (Figma 5:6036 en "Frame 328" 5:6065): 12px tussen de regio's, 40px tussen tekst en knop */
.ph-mk-werkgebieden { display: flex; flex-direction: column; gap: 12px;}
.ph-mk-werkgebied-cta { column-gap: 40px;}
/* Home, "Zien hoe de machine draait?" (Figma "Container" 7:7064): kolom van 393px hoog, tekst verticaal gecentreerd */
.ph-mk-toegang-intro { min-height: 393px;}

/* Prijs */
.ph-mk-price { flex-direction: row; align-items: stretch; gap: 40px; width: 100%; max-width: 1062px; padding: 40px 48px;}
.ph-mk-price-col { flex: 1 1 0; display: flex; flex-direction: column; justify-content: center; gap: 24px; min-width: 0; padding-block: 16px;}
.ph-mk-price-divider { flex-shrink: 0; width: 1px; background-color: var(--stroke-inverse);}
.ph-mk-price-amount { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; font-size: 72px; line-height: 1; font-weight: 500; color: var(--white);}
.ph-mk-price-amount s { font-size: 28px; font-weight: 400; color: var(--text-inverse-secondary);}
/* Lijst met gouden vinkjes */
.ph-mk-checklist { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; color: var(--text-inverse-secondary);}
.ph-mk-checklist li { display: flex; align-items: center; gap: 12px;}
.ph-mk-checklist li.is-launch { font-weight: 600; color: var(--white);}
.ph-mk-checklist li.is-launch::before { background-color: var(--pink-500);}
.ph-mk-checklist li::before { content: ""; flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--secondary) url('/assets/makelaars/icons/check.svg') center / 16px 16px no-repeat;}

/* Reviews (foto-kaarten, home + webinar) */
.ph-mk-rating { gap: 12px;}
.ph-mk-rating-score { font-size: 27.2px; line-height: 42.16px; font-weight: 500; color: var(--white);}
.ph-mk-reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px;}
.ph-mk-review { position: relative; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 416 / 640; overflow: hidden; border-radius: var(--radius-md);}
.ph-mk-review-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;}
.ph-mk-review-body { position: relative; display: flex; flex-direction: column; gap: 11px; min-height: 200px; padding: 24px; border: 1px solid var(--stroke-inverse); border-radius: var(--radius-md); background-image: linear-gradient(var(--white-10), var(--white-10)), linear-gradient(var(--primary), var(--primary)); color: var(--white);}
.ph-mk-review-body figcaption { color: var(--text-inverse-secondary);}
.ph-mk-review-body.is-featured { background: var(--secondary); color: var(--primary);}
.ph-mk-review-body.is-featured figcaption { color: var(--primary);}
.ph-mk-avatar { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background-color: var(--primary); font-size: 10px; font-weight: 600; color: var(--white);}

/* Stappen (goud genummerde lijst; home "Zien hoe de machine draait?" en de tool-pop-ups) */
.ph-mk-steps { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: ph-mk-step; color: var(--text-inverse-secondary);}
.ph-mk-steps li { display: flex; align-items: center; gap: 12px; counter-increment: ph-mk-step;}
.ph-mk-steps-top li { align-items: flex-start;}
.ph-mk-steps li::before { content: counter(ph-mk-step); flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background-color: var(--secondary); font-size: 14px; line-height: 1; color: var(--white);}

/* Formulierkaart (wit) */
.ph-mk-form-card { display: flex; flex-direction: column; gap: 24px; padding: 40px; border-radius: var(--radius-md); background-color: var(--white); box-shadow: var(--shadow-float); color: var(--primary);}
.ph-mk-form-title { font-family: var(--font-primary); font-size: 32px; line-height: 1; font-weight: 500; color: var(--primary);}
.ph-mk-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;}
/* Velden in twee groepen met een kopje, een lijn ertussen (Figma Home | Makelaar, "Jouw kantoor" en "Persoonlijke gegevens") */
.ph-mk-form-groep { display: flex; flex-direction: column; gap: 16px;}
.ph-mk-form-groep-kop { margin: 0; font-size: 16px; line-height: 1; font-weight: var(--font-weight-body); color: var(--primary);}
.ph-mk-form-lijn { margin: 0; border: 0; border-top: 1px solid var(--stroke-secondary); opacity: 1;}
.ph-mk-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0;}
/* Figma "Invul"/"Field": label getrimd tot de hoofdletterhoogte, dan de gap van het veld (8px; legend 12px) */
.ph-mk-field > label, .ph-mk-field > legend { float: none; width: auto; margin: 0; padding: 0; font-size: 18px; line-height: 1; font-weight: 500; color: var(--primary); text-box: trim-both cap alphabetic;}
.ph-mk-field > legend { margin-bottom: 12px;}
/* Rand Stroke/Default (50%), bij focus volle kleur zoals .form-control; tekst Regular. Het telefoonveld is .form-control met vlag en landcode (.iti, js/telefoon.js) */
.ph-mk-field .form-control { height: 48px; padding: 8px 16px; border: 1px solid var(--stroke-default); border-radius: var(--radius-sm); font-size: 16px; font-weight: 400; color: var(--primary);}
.ph-mk-field .form-control:focus { border-color: var(--primary);}
.ph-mk-field .form-control::placeholder { color: var(--primary-50);}
/* Keuze-chips (radio + label, zie Bootstrap .btn-check) */
.ph-mk-chip { padding: 12px 16px; border: 1px solid var(--stroke-secondary); border-radius: var(--radius-sm); font-size: 16px; line-height: 1; color: var(--text-secondary); cursor: pointer; transition: background-color .3s ease-out, color .3s ease-out;}
.ph-mk-chip:hover { background-color: var(--green-200);}
.btn-check:checked + .ph-mk-chip { border-color: var(--primary); background-color: var(--primary); color: var(--white);}
.btn-check:focus-visible + .ph-mk-chip { box-shadow: var(--shadow-focus);}
.ph-mk-form-note { flex-basis: 224px;}
/* Foutmelding onder een veld van het slotformulier (js/slotformulier.js) */
.ph-mk-field-fout { font-size: 14px; line-height: 1.3; color: var(--pink-700);}
.ph-mk-field.is-fout .form-control, .ph-mk-field.is-fout .ph-mk-chip { border-color: var(--pink-700);}

/* Zwevende "Claim je regio"-knop (Figma "Claim je regio popup") */
.ph-mk-claim-popup { position: fixed; right: 40px; bottom: 40px; z-index: 1020; padding: 16px 24px; border: 1px solid var(--stroke-inverse); border-radius: 32px 32px 4px 32px; background-color: var(--pink-500); box-shadow: var(--shadow-float); font-size: 18px; line-height: 21.6px; font-weight: 500; color: var(--white); text-decoration: none; transition: background-color .3s ease-out, color .3s ease-out;}
.ph-mk-claim-popup:hover { background-color: var(--white); color: var(--pink-700);}

/* Hero-stempel (home, regio check, contact) onder 1400: de stempel staat in de markup tussen label en titel en
   wordt een ronde float rechts naast de titel, zodat titel en tekst eromheen breken zodra hij er niet naast past.
   Vanaf 1400 blijft hij absoluut buiten de 800px-kolom (de tekstkolom is dan flex en dus geen containing block).
   zoom i.p.v. transform: dan krimpt ook de ruimte die de float inneemt; marges schalen mee, vandaar / var(--z).
   Hij steekt in de zijpadding uit, op de telefoon net buiten beeld zoals in Figma (Mobile | 390 px). */
@media (max-width: 1399.98px) {
    .ph-mk-hero-text { display: flow-root;}
    .ph-mk-hero-text > .ph-mk-hero-title, .ph-mk-hero-text > p { padding-top: 8px;}
    .ph-mk-hero-text > .ph-mk-sticker { --z: .7; position: relative; top: auto; right: auto; float: right; zoom: var(--z); margin-right: calc(-40px / var(--z)); shape-outside: circle(50%) border-box;}
}

@media (max-width: 1199.98px) {
    .ph-mk-container, .ph-mk-hero { padding-inline: 40px;}
    .ph-mk-tools { grid-template-columns: repeat(2, minmax(0, 1fr));}
    .ph-mk-fases { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px;}
    .ph-mk-fase .ph-mk-fase-card { margin-right: 16px;}
    .ph-mk-split { gap: 40px;}
}

/* Tussen 992 en 1200 is de formulierkolom naast de tekst te smal voor twee velden naast elkaar (telefoonveld met vlag en
   landcode): één veld per regel. Vanaf 991 staat het formulier over de volle breedte en passen er weer twee naast elkaar. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .ph-mk-split .ph-mk-form-row { grid-template-columns: minmax(0, 1fr);}
}

@media (max-width: 991.98px) {
    .ph-mk-split, .ph-mk-reviews { grid-template-columns: minmax(0, 1fr);}
    .ph-mk-toegang-intro { min-height: 0;}
    .ph-mk-review { aspect-ratio: auto; min-height: 480px;}
    .ph-mk-beloven-desktop { display: none;}
    .ph-mk-beloven-tablet { display: grid;}
    .ph-mk-price { flex-direction: column;}
    .ph-mk-price-divider { width: auto; height: 1px;}
    .ph-mk-tool-popup-content { flex-direction: column;}
    .ph-mk-tool-popup-info { min-height: 0;}
    .ph-mk-tool-popup-demo { padding: 0 40px;}
    .ph-mk-planner { width: 100%; max-width: 384px; margin-top: 0;}
    /* Pop-up op tablet en telefoon (Figma "Pop-up functies" 365:1547): kop naast de sluitknop, de stappen, direct daaronder de
       demo (geen vel dat uitsteekt) en de knop naar de volgende tool onderaan */
    .ph-mk-tool-popup-content { gap: 24px; padding: 16px 0 24px;}
    .ph-mk-tool-popup-info { display: contents;}
    .ph-mk-tool-popup-info > * { margin-inline: 40px;}
    .ph-mk-tool-popup-info > :first-child { min-height: 44px; margin-right: 72px;}
    .ph-mk-tool-popup-knoppen { order: 1;}
    /* Knop naar de volgende tool over de volle breedte, tekst (ook over twee regels) gecentreerd */
    .ph-mk-tool-popup-knoppen .btn { flex: 1 1 100%; justify-content: center; text-align: center;}
    .ph-mk-tool-popup-content > .ph-mk-tool-popup-close { top: 16px; right: 16px;}
    .ph-mk-tool-popup .ph-mk-planner { height: auto; min-height: 0; border-radius: var(--radius-md);}
    .ph-mk-demo-vel:not(.ph-mk-demo-foto) { padding-top: 32px;}
    .ph-mk-tool-popup-demo.is-midden { padding-block: 0;}
}

@media (max-width: 767.98px) {
    .ph-mk-container, .ph-mk-hero { padding-inline: 16px;}
    /* Lange knopteksten lopen (zoals overal) over meer regels; op mobiel links uitgelijnd */
    .ph-mk-main .btn { text-align: left;}
    .ph-mk-hero { min-height: 0;}
    .ph-mk-hero-text { padding-inline: 0;}
    .ph-mk-hero-title { width: 100%; margin-inline: 0;}
    /* Figma: cirkel 110 (55%), rechterrand 8px buiten beeld */
    .ph-mk-hero-text > .ph-mk-sticker { --z: .55; margin-right: calc(-33px / var(--z));}
    /* Home: het label is op de telefoon weg; de stempel schuift omhoog naast de bovenkant van de titel */
    .ph-mk-hero-text > .ph-mk-sticker-hero { margin-top: calc(-40px / var(--z));}
    /* Knop onder het zoekveld (flex-column in de markup) */
    .ph-mk-search-card { padding: 24px;}
    .ph-mk-fases, .ph-mk-form-row { grid-template-columns: minmax(0, 1fr);}
    /* Onderdelen (Figma Home mobiel): 2 breed, alleen icoon en titel */
    .ph-mk-tools { gap: 8px;}
    .ph-mk-tool { min-height: 0;}
    .ph-mk-tool-content p { display: none;}
    .ph-mk-tool .ph-mk-tool-lock { padding: 16px 12px 10px; font-size: 12px;}
    .ph-mk-tools-cta { flex-direction: column;}
    .ph-mk-tools-cta .btn { align-self: stretch; justify-content: center;}
    .ph-mk-fases { row-gap: 0;}
    .ph-mk-fase { flex-direction: row; gap: 16px;}
    /* Stip bovenaan de kaart; de lijn loopt absoluut tot de onderkant van de fase, dus door naar de stip van de volgende */
    .ph-mk-fase-track { flex-direction: column; flex-shrink: 0; width: 16px; height: auto;}
    .ph-mk-fase-track::after { position: absolute; top: 8px; bottom: 0; left: 7px; width: 2px; height: auto; margin: 0;}
    .ph-mk-fase .ph-mk-fase-card { margin: 0 0 16px;}
    .ph-mk-fase:last-child .ph-mk-fase-card { margin-bottom: 0;}
    .ph-mk-beloven-tablet { display: none;}
    .ph-mk-beloven-mobiel { display: grid;}
    /* Figma Home mobiel: teken 40×77 links naast de tekst (18/25) met 16 ertussen, toelichting Body/Small */
    .ph-mk-quote { gap: 16px;}
    .ph-mk-quote-mark { width: 40px; height: auto;}
    .ph-mk-quote-text { font-size: 18px; line-height: 25px;}
    .ph-mk-quote figure { gap: 12px !important;}
    .ph-mk-quote figure .ph-mk-muted { font-size: var(--body-sm-size); line-height: var(--body-sm-line);}
    .ph-mk-form-card, .ph-mk-glass-lg { padding: 24px;}
    /* Beschikbaarheid per werkgebied (Figma Home mobiel): kaart padding 16, vakjes 8 uit elkaar met 12px tekst, zodat "Laatste slot" en "Beschikbaar" op één regel passen; knop over de volle breedte met de tekst eronder */
    .ph-mk-werkgebied-kaart { padding: 16px;}
    .ph-mk-slots { gap: 8px;}
    .ph-mk-slot { padding: 8px 10px; font-size: 12px;}
    .ph-mk-werkgebied-cta { flex-direction: column-reverse; align-items: stretch;}
    .ph-mk-werkgebied-cta .ph-mk-flex-text { flex-basis: auto;}
    .ph-mk-werkgebied-cta .btn { align-self: stretch; justify-content: center;}
    /* Formulier: knop over de volle breedte met de tekst eronder */
    .ph-mk-form-verzend { flex-direction: column-reverse; gap: 12px !important;}
    .ph-mk-form-verzend .btn { align-self: stretch; justify-content: center;}
    .ph-mk-form-verzend p { flex-basis: auto; text-align: center;}
    /* Figma Webinar mobiel (385:15916): padding 24/16, bedrag en reguliere prijs op één regel */
    .ph-mk-price { padding: 24px 16px;}
    .ph-mk-price-amount { flex-wrap: nowrap; font-size: 48px; white-space: nowrap;}
    .ph-mk-price-amount s { font-size: 22px;}
    .ph-mk-claim-popup { right: 16px; bottom: 16px; font-size: 16px;}
    .ph-mk-tool-popup-info > * { margin-inline: 16px;}
    .ph-mk-tool-popup-demo { padding: 0 16px;}
    .ph-mk-planner { padding: 24px;}
    /* Zeven dagknoppen krimpen mee; met auto-kolommen viel "Zo" in de pop-up buiten de planner */
    .ph-mk-planner-dagen { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px;}
    /* Demo's die breder zijn dan de telefoon (advertentie, social, doos, keurmerk) schalen mee */
    .ph-mk-demo-schaal { zoom: .7;}
}

/* Pagina — Regio check (Figma "Regio check" 10:12188 / 10:15055): hero van 800px met
   de inhoud verticaal gecentreerd; met resultaten schuift de sectie eronder 120px omhoog */
.ph-mk-regio-hero { justify-content: center; min-height: 800px; padding-block: 0;}
.ph-mk-regio-hero.is-filled { margin-bottom: -120px;}
.ph-mk-regio-hero-content { flex: 1 0 auto; justify-content: center; padding-top: 0;}
/* Stempel: Figma 232px-frame, 80px van de top, 140px buiten de 800px-kolom */
.ph-mk-sticker-regio { top: 80px; right: -140px;}
/* Na het zoeken springt de pagina hierheen (#regio-resultaat); de plakkende header (zonder linkregel) mag de titel niet bedekken */
.ph-mk-regio-results { position: relative; z-index: 1; padding-block: 40px var(--mk-padding); scroll-margin-top: calc(var(--header-height) - var(--header-links-height));}
.ph-mk-regio-results-inner { display: flex; flex-direction: column; gap: 40px;}
/* Slotkaarten (Figma "Makelaars" 10:17130): 3 kolommen, 32px tussenruimte; eerst ingenomen (is-taken, geclaimd zonder
   kantoor ook is-claimed), dan vrij (is-free) */
.ph-mk-regio-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin: 0; padding: 0; list-style: none;}
.ph-mk-regio-card { display: flex; flex-direction: column; gap: 16px; border: 1px solid var(--stroke-inverse); border-radius: var(--radius-md); background-color: var(--white-10);}
.ph-mk-regio-card-photo { display: block; width: 100%; height: 200px; border-radius: var(--radius-md); background-color: var(--white-10);}
/* Kantoorfoto (Figma "Rectangle 114"): vult het vlak van 200px, hoeken mee afgerond */
.ph-mk-regio-card-photo img { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover;}
.ph-mk-regio-card-body { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 16px; text-align: center;}
.ph-mk-regio-card-info { display: flex; flex-direction: column; align-items: center; gap: 12px;}
/* Logovlak 80×80 (Figma "Frame 346"), 75px boven het tekstblok: steekt 43px over de foto */
.ph-mk-regio-card-logo { position: relative; display: flex; flex-shrink: 0; width: 80px; height: 80px; margin-top: -75px; padding: 4px; border-radius: var(--radius-sm); background-color: var(--white);}
.ph-mk-regio-card.is-free .ph-mk-regio-card-logo { background-color: var(--primary-600);}
.ph-mk-regio-card-logo img { width: 100%; height: 100%; object-fit: contain;}
/* Geclaimd slot zonder bekend kantoor (is-claimed, Figma "Frame 507" 198:1576): kantoorfoto op 30% in grijsgroen
   (luminosity) met een wit verloop naar onderen; slotje 33×41 in een grijsgroen logovlak met witte rand. De kaart is
   zoals in Figma 10% wit óp donkergroen en isoleert zich, anders mengt luminosity met de transparante sectie en blijft
   de foto in kleur */
.ph-mk-regio-card.is-claimed { isolation: isolate; background-image: linear-gradient(var(--white-10), var(--white-10)); background-color: var(--primary);}
.ph-mk-regio-card.is-claimed .ph-mk-regio-card-photo { position: relative; background-color: transparent; mix-blend-mode: luminosity;}
.ph-mk-regio-card.is-claimed .ph-mk-regio-card-photo img { opacity: .3;}
.ph-mk-regio-card.is-claimed .ph-mk-regio-card-photo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background-image: linear-gradient(to bottom, rgba(var(--white-rgb), 0), rgba(var(--white-rgb), .2));}
.ph-mk-regio-card.is-claimed .ph-mk-regio-card-logo { align-items: center; justify-content: center; border: 1px solid var(--stroke-inverse-secondary); background-color: var(--bg-inverse-tertiary);}
.ph-mk-regio-card.is-claimed .ph-mk-regio-card-logo img { width: 33px; height: 41px;}
.ph-mk-regio-card .btn-text { min-height: 48px;}
/* "PH verified v2": 32×32-vlak met gecentreerd keurmerk (28×27) */
.ph-mk-regio-verified { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 32px; height: 32px;}

@media (max-width: 991.98px) {
    .ph-mk-regio-cards { grid-template-columns: repeat(2, minmax(0, 1fr));}
    /* Oneven laatste kaart over de volle breedte */
    .ph-mk-regio-card:last-child:nth-child(odd) { grid-column: 1 / -1;}
}

@media (max-width: 767.98px) {
    .ph-mk-regio-hero { min-height: 0; padding-block: var(--mk-padding);}
    .ph-mk-regio-hero.is-filled { margin-bottom: 0; padding-bottom: 0;}
    .ph-mk-regio-cards { grid-template-columns: minmax(0, 1fr);}
}

/* Pagina — Webinar (Figma "Webinar | Makelaar" 16:3744) */
/* Goud verloop op tekst (Figma "bg-clip-text") */
.ph-mk-wb-gradient { background-image: linear-gradient(50deg, var(--secondary) 0%, var(--secondary-light) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;}
.ph-mk-wb-intro { padding-block: 40px;}
/* Figma Webinar 16:5846: kop, video met hoofdstukken, voorbeelden; 32 ertussen */
.ph-mk-wb-player { display: flex; flex-direction: column; gap: 32px;}
/* Video (781) met de hoofdstukken (467) ernaast, 32 ertussen (Figma 16:5846); onder 992 onder elkaar */
.ph-mk-wb-player-rij { display: grid; grid-template-columns: minmax(0, 781fr) minmax(0, 467fr); gap: 32px; align-items: start;}
/* Tijdelijk een YouTube-video (thumbnail van YouTube) met onze tijd en balk erover. De iframe vangt geen klikken: een klik
   op het beeld speelt/pauzeert via postMessage en de focus blijft op het vak, zodat de toetsen blijven werken */
.ph-mk-wb-video.is-youtube { cursor: pointer;}
.ph-mk-wb-video.is-youtube iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: inherit; pointer-events: none;}
.ph-mk-wb-video.is-gestart .ph-mk-wb-video-poster { display: none;}
.ph-mk-wb-hoofdstukken { gap: 24px; padding: 24px;}
.ph-mk-wb-hoofdstukken ol { margin: 0; padding: 0; list-style: none;}
/* Hoofdstuk = knop (springt naar de starttijd); lopend hoofdstuk vet en wit, voorbije met een vinkje (script op de webinarpagina) */
.ph-mk-wb-hoofdstukken button { display: flex; align-items: flex-start; gap: 8px; width: 100%; padding: 8px 0; border: 0; background: none; font-size: 16px; line-height: 1.3; text-align: left; color: var(--text-inverse-secondary); transition: color .2s ease-out;}
.ph-mk-wb-hoofdstukken button:hover { color: var(--white);}
.ph-mk-wb-hoofdstukken button:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px;}
.ph-mk-wb-hoofdstukken li + li { border-top: 1px solid var(--stroke-inverse);}
.ph-mk-wb-hoofdstuk-titel { flex: 1 1 auto;}
.ph-mk-wb-hoofdstuk-tijd { flex-shrink: 0; width: 48px; color: var(--secondary);}
.ph-mk-wb-hoofdstukken li.is-actief button { font-weight: 600; color: var(--white);}
/* Bekeken: wit rondje (18) met een donkergroen vinkje */
.ph-mk-wb-hoofdstuk-vink { display: none; flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; background-color: var(--white);}
.ph-mk-wb-hoofdstukken li.is-bekeken .ph-mk-wb-hoofdstuk-vink { display: block;}
.ph-mk-wb-hoofdstuk-vink::after { content: ""; display: block; width: 100%; height: 100%; background-color: var(--primary); -webkit-mask: url('/assets/makelaars/icons/check.svg') center / 14px 14px no-repeat; mask: url('/assets/makelaars/icons/check.svg') center / 14px 14px no-repeat;}
.ph-mk-wb-video { position: relative; display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; gap: 8px; aspect-ratio: 16 / 9; padding: 16px; border: 1px solid var(--stroke-inverse); border-radius: var(--radius-md); scroll-margin-top: var(--header-height);}
/* Het vak knipt niet (overflow zichtbaar), zodat het witte bolletje van de balk over de rand mag steken: video, poster en
   balk hebben zelf de afgeronde hoeken */
.ph-mk-wb-video-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit;}
/* Play-knop precies in het midden van de video (Figma stond hij 30px rechts van het midden) */
.ph-mk-wb-play { position: absolute; top: 50%; left: 50%; padding: 0; border: 0; border-radius: 50%; background: none; transform: translate(-50%, -50%); transition: transform .3s ease-out;}
.ph-mk-wb-play img { display: block; border-radius: 50%; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);}
.ph-mk-wb-play:hover { transform: translate(-50%, -50%) scale(1.08);}
.ph-mk-wb-play:focus-visible { outline: 2px solid var(--white); outline-offset: 4px;}
/* Tijdens het afspelen verdwijnt de knop en komt hij terug bij aanwijzen (pauzeren) */
.ph-mk-wb-video.is-speelt .ph-mk-wb-play { opacity: 0; transition: opacity .3s ease-out, transform .3s ease-out;}
.ph-mk-wb-video.is-speelt:hover .ph-mk-wb-play, .ph-mk-wb-video.is-speelt .ph-mk-wb-play:focus-visible { opacity: 1;}
.ph-mk-wb-video-notice { position: absolute; top: 16px; left: 16px; padding: 8px 12px; border-radius: var(--radius-sm); background-color: rgba(var(--primary-rgb), .8); color: var(--white);}
.ph-mk-wb-video-time { position: relative; padding: 8px 12px; border-radius: var(--radius-sm); background-color: rgba(var(--primary-rgb), .8); font-size: 14px; line-height: 1; color: var(--white); text-box: trim-both cap alphabetic;}
.ph-mk-wb-video-time:empty { display: none;}
/* Rechtsonder: tijd en knop volledig scherm (zelfde vlak als de tijd); in volledig scherm zonder rand en hoeken */
.ph-mk-wb-video-knoppen { position: relative; display: flex; align-items: center; gap: 8px;}
.ph-mk-wb-volledig { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--radius-sm); background-color: rgba(var(--primary-rgb), .8); color: var(--white); transition: background-color .2s ease-out;}
.ph-mk-wb-volledig:hover { background-color: var(--primary);}
.ph-mk-wb-volledig:focus-visible, .ph-mk-wb-video:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px;}
.ph-mk-wb-video:fullscreen { aspect-ratio: auto; border: 0; border-radius: 0; background-color: var(--black);}
.ph-mk-wb-video:-webkit-full-screen { aspect-ratio: auto; border: 0; border-radius: 0; background-color: var(--black);}
.ph-mk-wb-video:fullscreen .ph-mk-wb-progress, .ph-mk-wb-video:fullscreen .ph-mk-wb-progress-bar { border-radius: 0;}
.ph-mk-wb-video:-webkit-full-screen .ph-mk-wb-progress, .ph-mk-wb-video:-webkit-full-screen .ph-mk-wb-progress-bar { border-radius: 0;}
.ph-mk-wb-progress { --voortgang: 0%; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; border-radius: 0 0 var(--radius-md) var(--radius-md); background-color: rgba(var(--tertiary-rgb), .2); cursor: pointer; touch-action: none;}
/* Groter tikvlak (vooral voor de telefoon), zonder dat de balk dikker wordt */
.ph-mk-wb-progress::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; bottom: 0;}
.ph-mk-wb-progress-bar { display: block; height: 100%; border-bottom-left-radius: var(--radius-md); background-color: var(--secondary); transition: width .4s ease-out;}
.ph-mk-wb-progress.is-schuiven .ph-mk-wb-progress-bar { transition: none;}
/* Wit bolletje op het punt van de video (zoals YouTube): bij aanwijzen en tijdens het slepen; op touchscreens zodra de video loopt */
.ph-mk-wb-progress-knop { position: absolute; top: 50%; left: var(--voortgang); width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background-color: var(--white); box-shadow: var(--shadow-control); transform: scale(0); transition: transform .15s ease-out; pointer-events: none;}
.ph-mk-wb-progress:hover .ph-mk-wb-progress-knop, .ph-mk-wb-progress.is-schuiven .ph-mk-wb-progress-knop { transform: scale(1);}
.ph-mk-wb-progress.is-schuiven .ph-mk-wb-progress-knop { transform: scale(1.25);}
@media (hover: none) {
    .ph-mk-wb-video.is-gestart .ph-mk-wb-progress-knop { transform: scale(1);}
}
/* "Niet begonnen als toolbox" */
.ph-mk-wb-story { display: flex; justify-content: center; align-items: flex-start; gap: 32px;}
.ph-mk-wb-story-body { flex: 1 1 0; display: flex; flex-direction: column; gap: 24px; min-width: 0; max-width: 880px;}
.ph-mk-wb-story-text { gap: 12px;}
.ph-mk-wb-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px;}
.ph-mk-wb-pillar { display: flex; flex-direction: column; gap: 4px; padding-top: 8px; border-top: 2px solid var(--secondary);}
/* Headline/Small medium */
.ph-mk-wb-pillar-title { font-family: var(--font-primary); font-size: var(--headline-sm-size); line-height: var(--headline-sm-line); font-weight: 500; color: var(--white);}
/* "Wij investeren zelf voorop": foto's (2 van 5 kolommen) + accordeon met stempel (3 van 5) */
.ph-mk-wb-invest { display: grid; grid-template-columns: minmax(0, 474fr) minmax(0, 742fr); column-gap: 64px;}
.ph-mk-wb-invest-media { display: flex; gap: 16px;}
.ph-mk-wb-invest-stack { flex: 1 1 0; display: flex; flex-direction: column; gap: 16px;}
.ph-mk-wb-invest-photo { position: relative; flex: 1 1 0; min-height: 200px; overflow: hidden; border-radius: var(--radius-md);}
.ph-mk-wb-invest-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;}
.ph-mk-wb-budget { display: flex; flex-direction: column; justify-content: center; min-height: 119px; padding: 16px; border: 1px solid var(--stroke-inverse); border-radius: var(--radius-md); background-color: var(--green-500);}
.ph-mk-wb-invest-content { position: relative; display: flex; flex-direction: column; gap: 24px; max-width: 880px;}
/* Ruimte rechts van de kop voor de stempel erboven */
.ph-mk-wb-invest-content > div > h2 { padding-right: 120px;}
.ph-mk-wb-accordion { overflow: hidden; border: 1px solid var(--stroke-inverse); border-radius: var(--radius-md);}
.ph-mk-wb-acc-item { border-bottom: 1px solid var(--stroke-inverse); transition: background-color .3s ease-out;}
.ph-mk-wb-acc-item:last-child { border-bottom: 0;}
/* Open item: glas-kaart met eigen rand (Figma "Overlay+Border") */
.ph-mk-wb-acc-item:has(> .show, > .collapsing) { margin: -1px; border: 1px solid var(--stroke-inverse); border-radius: var(--radius-md); background-color: var(--white-10);}
.ph-mk-wb-acc-btn { display: block; width: 100%; padding: 24px; border: 0; background: none; font-family: var(--font-primary); font-size: 18px; line-height: 23.4px; font-weight: 500; text-align: left; color: var(--white);}
.ph-mk-wb-acc-btn:not(.collapsed) { padding-bottom: 4px;}
.ph-mk-wb-acc-btn:focus-visible { outline: 2px solid var(--secondary); outline-offset: -4px;}
.ph-mk-wb-acc-body { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding: 0 24px 24px;}
.ph-mk-wb-badge { padding: 4px 12px; border-radius: 40px; background-color: var(--secondary); color: var(--primary);}
/* Kleinere stempel (Figma 186px, zandkleurige tekst, zonder rand); op desktop rechtsboven de kop "Wij vragen je niet…" */
.ph-mk-sticker.ph-mk-wb-sticker { top: -140px; right: -80px; z-index: 1; width: 215px; height: 215px;}
.ph-mk-wb-sticker .ph-mk-sticker-inner { width: 186px; height: 186px; border: 0; color: var(--tertiary);}
/* Prijskaart: kop en kaart 40px uit elkaar */
.ph-mk-wb-offer { gap: 40px;}
.ph-mk-wb-split-pay { display: inline-flex; align-self: flex-start; overflow: hidden; border: 1px solid var(--stroke-inverse); border-radius: var(--radius-sm); background-color: var(--white-10);}
.ph-mk-wb-split-pay span { display: flex; flex-direction: column; gap: 2px; padding: 12px 24px; font-size: 18px; line-height: 23.4px; color: var(--white);}
.ph-mk-wb-split-pay small { font-size: 14px; line-height: 1.3; color: var(--text-inverse-secondary);}
.ph-mk-wb-split-pay .is-active, .ph-mk-wb-split-pay .is-active small { background-color: var(--secondary); color: var(--primary);}
/* Compacte variant van .ph-mk-checklist (18px vinkje, Body/Small) */
.ph-mk-wb-checklist { gap: 16px; font-size: var(--body-sm-size); line-height: var(--body-sm-line);}
.ph-mk-wb-checklist li { gap: 8px;}
.ph-mk-wb-checklist li::before { width: 18px; height: 18px; background-size: 14px 14px;}
/* Rijen label/waarde met scheidingslijnen (prijs + regio-kaart) */
.ph-mk-wb-rows { display: flex; flex-direction: column; gap: 12px; width: 100%;}
.ph-mk-wb-row { display: flex; justify-content: space-between; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--stroke-inverse); font-size: 14px; line-height: 21.7px; color: var(--white);}
.ph-mk-wb-row strong { flex-shrink: 0; font-weight: 500; text-align: right;}
.ph-mk-wb-row small { display: block; font-size: 12px; line-height: 1.4; color: var(--text-inverse-secondary);}
.ph-mk-wb-row s { margin-right: 8px; font-weight: 400; color: var(--text-inverse-secondary);}
/* Launch-tarief: roze pil boven de kop, label (goud, kapitalen), pil op glas, uitlegblok en de twee voorwaarden eronder */
.ph-mk-wb-launch { padding: 6px 16px; border-radius: 99px; background-color: var(--pink-500); font-size: 13px; line-height: 1.3; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--white);}
.ph-mk-wb-label { font-size: 14px; line-height: 1.3; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--secondary);}
.ph-mk-wb-pil { align-self: flex-start; padding: 6px 16px; border: 1px solid var(--stroke-inverse); border-radius: 99px; background-color: var(--white-10); font-size: 13px; line-height: 1.3; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--white);}
.ph-mk-wb-info { display: flex; align-items: flex-start; gap: 12px; padding: 20px 24px; border: 1px solid var(--stroke-inverse); border-radius: var(--radius-md); font-size: 14px; line-height: 1.5; color: var(--text-inverse-secondary);}
.ph-mk-wb-info svg { flex-shrink: 0; margin-top: 2px; color: var(--secondary);}
.ph-mk-wb-info strong { color: var(--white);}
.ph-mk-wb-voorwaarden { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; width: 100%; max-width: 1062px;}
.ph-mk-wb-voorwaarden .ph-mk-glass { gap: 8px; padding: 24px;}
.ph-mk-wb-voorwaarden strong { font-weight: 600;}

@media (max-width: 1199.98px) {
    .ph-mk-wb-invest { column-gap: 40px;}
    .ph-mk-sticker.ph-mk-wb-sticker { right: -40px; transform: scale(.8);}
}

@media (max-width: 991.98px) {
    .ph-mk-wb-player-rij, .ph-mk-wb-invest { grid-template-columns: minmax(0, 1fr);}
    .ph-mk-wb-invest { row-gap: 40px;}
    .ph-mk-wb-invest-media { min-height: 480px;}
    /* Stempel rechtsboven over de kaartfoto (Figma Webinar mobiel "Frame 155", ook op tablet zodra de foto's boven de tekst staan): absoluut t.o.v. het hele blok; 215 geschaald
       naar 70% (150), de 32px lege rand per kant zit in top/right */
    .ph-mk-wb-invest { position: relative;}
    .ph-mk-wb-invest-content { position: static;}
    .ph-mk-wb-invest-content > div > h2 { padding-right: 0;}
    .ph-mk-sticker.ph-mk-wb-sticker { top: -72px; right: -54px; bottom: auto; transform: scale(.7);}
}

@media (max-width: 767.98px) {
    .ph-mk-wb-intro { padding-top: 24px;}
    .ph-mk-wb-play img { width: 56px; height: 56px;}
    /* Figma Webinar mobiel: quote-teken (40×77) links naast de kop, de tekst eronder over de volle breedte */
    .ph-mk-wb-story { position: relative; flex-direction: column;}
    .ph-mk-wb-story > .ph-mk-quote-mark { position: absolute; top: 0; left: 16px; width: 40px; height: auto;}
    .ph-mk-wb-story-body > h2 { min-height: 77px; padding-left: 56px;}
    .ph-mk-wb-pillars { grid-template-columns: minmax(0, 1fr); gap: 24px;}
    .ph-mk-wb-invest-media { min-height: 360px;}
    .ph-mk-wb-split-pay span { padding-inline: 16px; font-size: 16px;}
    /* Figma Webinar mobiel: badge in het accordeon over de volle breedte, rechtere hoeken (radius 8) */
    .ph-mk-wb-badge { align-self: stretch; padding: 12px 16px; border-radius: var(--radius-sm);}
    /* Launch-pil boven het aanbod: op twee regels ook rechtere hoeken */
    .ph-mk-wb-launch { padding: 10px 16px; border-radius: var(--radius-sm);}
    /* Geen risico en Beperkt tot 15 onder elkaar (hier, na de basisregel, anders wint die) */
    .ph-mk-wb-voorwaarden { grid-template-columns: minmax(0, 1fr); gap: 16px;}
}

/* Pagina — Contact (Figma "Contact | Makelaar" 16:7470) */
/* Hero van 600px; het patroon (735px) loopt achter de header door */
.ph-contact-hero { min-height: 0; padding-top: 0;}
/* Figma: het patroon zelf vervaagt onderaan en de gloed loopt door tot in de sectie eronder; een masker i.p.v.
   de donkergroene overlay van .ph-mk-pattern, anders valt de gloed op de onderrand van de hero weg (harde rand) */
.ph-contact-hero .ph-mk-pattern { height: 735px; -webkit-mask-image: linear-gradient(to bottom, var(--black) 60%, transparent 100%); mask-image: linear-gradient(to bottom, var(--black) 60%, transparent 100%);}
.ph-contact-hero .ph-mk-pattern::after { content: none;}
.ph-contact-hero .ph-mk-hero-content { justify-content: center; min-height: 600px;}
.ph-contact-sticker { top: 143px; right: -177px;}
/* Formulier (760) + ondersteunend paneel (440), 80px tussenruimte */
.ph-contact-grid { display: grid; grid-template-columns: minmax(0, 760fr) minmax(0, 440fr); gap: var(--mk-padding); align-items: start;}
/* Figma "Form introduction" 16:13108: 32px tussen intro en formulier */
.ph-contact-kolom { gap: 32px;}
/* Figma: labels Label/Small (16px), 10px boven het veld (rand, gewicht en getrimde labels: .ph-mk-field) */
.ph-contact-form .ph-mk-field { gap: 10px;}
.ph-contact-form .ph-mk-field > label { font-size: 16px;}
.ph-contact-form .ph-mk-field textarea.form-control { height: 140px; padding-block: 16px; resize: vertical;}
/* Figma "Consent" 16:13196: vinkje (.ph-contact-check, design-system-opmaak in sectie 4), 10px tot de tekst */
.ph-contact-akkoord { gap: 10px;}
.ph-contact-privacy-link { color: var(--primary); text-decoration: none;}
.ph-contact-privacy-link:hover { text-decoration: underline;}
/* Glas-paneel "Liever direct iemand spreken?" */
.ph-contact-tel { color: inherit; white-space: nowrap; text-decoration: none;}
.ph-contact-tel:hover { color: var(--white); text-decoration: underline;}
.ph-contact-hours-wrap { gap: 6px;}
.ph-contact-hours > div { display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: 16px; padding-block: 10px; font-size: 18px; line-height: 23.4px; color: var(--white);}
.ph-contact-hours > div + div { margin-top: -1px; border-top: 1px solid var(--stroke-inverse);}
.ph-contact-hours dt { font-weight: 400;}
.ph-contact-hours dd { margin: 0;}
.ph-contact-route { display: inline-flex; align-items: center; align-self: flex-start; gap: 8px; font-size: 18px; line-height: 1; font-weight: 500; color: var(--secondary); text-decoration: none;}
.ph-contact-route:hover { color: var(--secondary); text-decoration: underline;}
/* FAQ-accordeon (Bootstrap collapse) met de plus/min-iconen uit het ontwerp; Figma "FAQ" 16:13042: 40px tussen kop en vragen, vraag Headline/Small 500 */
.ph-contact-faq-blok { gap: 40px;}
.ph-contact-faq { width: 100%; max-width: 800px;}
/* Figma "Divider" is 0px hoog (lijn valt over de onderkant van de vraag erboven): -1px marge */
.ph-contact-faq-item + .ph-contact-faq-item { margin-top: -1px; border-top: 1px solid var(--stroke-inverse);}
.ph-contact-faq-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 16px; border: 0; background: none; font-family: var(--font-primary); font-size: 18px; line-height: 21.6px; font-weight: 500; text-align: left; color: var(--white);}
.ph-contact-faq-btn span { flex: 1 1 auto;}
.ph-contact-faq-btn img { flex-shrink: 0;}
.ph-contact-faq-btn:focus-visible { outline: 2px solid var(--secondary); outline-offset: -2px;}
.ph-contact-faq-plus { display: none; margin: 2px;}
.ph-contact-faq-btn.collapsed .ph-contact-faq-plus { display: block;}
.ph-contact-faq-btn.collapsed .ph-contact-faq-min { display: none;}
.ph-contact-faq-answer { padding: 0 16px 16px;}
/* Kaart (Google Maps, zonder sleutel een statische afbeelding) die onder de afgeronde footer doorloopt */
.ph-contact-map { --ct-map-zoom: 1; position: relative; height: 680px; margin-bottom: -160px; overflow: hidden; border-radius: var(--radius-md) var(--radius-md) 0 0;}
/* Figma: kaarttegels zijn 656px hoog (de onderste 24px valt onder de footer); zoomen rond de punt van de marker */
.ph-contact-map-img { display: block; width: 100%; height: calc(100% - 24px); object-fit: cover; object-position: center top; transform: scale(var(--ct-map-zoom)); transform-origin: 50% 53%; transition: transform .3s ease-out;}
.ph-contact-map-canvas { width: 100%; height: calc(100% - 24px); background-color: var(--green-200);}
.ph-contact-marker { display: flex; flex-direction: column; align-items: center; cursor: pointer;}
/* Statische kaart: Figma midden van de pil 310px van de top bij een kaart van 656px (op Google Maps zit de marker in de kaart) */
.ph-contact-map > .ph-contact-marker { position: absolute; top: calc((100% - 24px) * .4726 - 29px); left: 50%; transform: translateX(-50%); pointer-events: none;}
.ph-contact-marker-pill { display: flex; align-items: center; gap: 12px; padding: 4px 16px 4px 4px; border: 1px solid var(--primary); border-radius: var(--radius-sm); background-color: var(--primary); font-size: 18px; line-height: 23.4px; color: var(--white);}
.ph-contact-marker-logo { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-xs); background-color: var(--white); box-shadow: var(--shadow-float);}
.ph-contact-marker-pointer { margin-top: -5px; transform: rotate(180deg);}
.ph-contact-zoom { position: absolute; right: 24px; bottom: 104px; z-index: 1; display: flex; flex-direction: column; width: 40px; padding-block: 8px; border-radius: var(--radius-sm); background-color: var(--white); box-shadow: var(--shadow-control);}
.ph-contact-zoom button { display: flex; align-items: center; justify-content: center; height: 32px; padding: 0; border: 0; background: none;}
.ph-contact-zoom button + button { border-top: 1px solid var(--green-500);}
/* Popup (Google InfoWindow) bij klik op de marker */
.ph-contact-popup-titel { font-size: 18px; line-height: 23.4px; font-weight: 500; color: var(--text-default);}
.ph-contact-popup { display: flex; flex-direction: column; gap: 8px; padding-bottom: 4px; font-family: var(--font-primary); font-size: var(--body-sm-size); line-height: var(--body-sm-line); color: var(--text-secondary);}
.ph-contact-popup-link { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; color: var(--text-default); text-decoration: none;}
.ph-contact-popup-link:hover { color: var(--text-default); text-decoration: underline;}
.ph-contact-popup-link svg { width: 16px; height: 16px;}

@media (prefers-reduced-motion: reduce) {
    .ph-contact-map-img { transition: none;}
}

/* Touchscreens: zoomknoppen 44×44 i.p.v. 40×32 */
@media (pointer: coarse) {
    .ph-contact-zoom { width: 44px;}
    .ph-contact-zoom button { height: 44px;}
}

@media (max-width: 1199.98px) {
    .ph-contact-grid { gap: 40px;}
}

@media (max-width: 991.98px) {
    .ph-contact-grid { grid-template-columns: minmax(0, 1fr);}
}

@media (max-width: 767.98px) {
    .ph-contact-hero .ph-mk-hero-content { min-height: 0; padding-bottom: var(--mk-padding);}
    .ph-contact-form, .ph-contact-support { padding: 24px;}
    .ph-contact-form .ph-mk-form-row { grid-template-columns: minmax(0, 1fr);}
    .ph-contact-map { height: 520px;}
}

/* Pagina — Over PowerHuys (Figma "Over PowerHuys | Makelaar" 26:13544) */
/* Hero van 720px die achter de header doorloopt; de foto (600×784) steekt boven de hero uit */
.ph-mk-over-hero { position: relative; display: flex; align-items: flex-end; height: calc(720px + var(--header-height)); margin-top: calc(-1 * var(--header-height)); padding: 0 var(--mk-padding) var(--mk-padding); overflow: hidden;}
.ph-mk-over-hero-inner { position: relative; z-index: 1; display: flex; gap: var(--mk-padding); width: 100%; max-width: 1280px; height: 640px; margin-inline: auto;}
/* Foto in PH-vorm: alpha-masker met de drie stroken uit Figma */
.ph-mk-over-hero-photo { position: relative; flex: 0 0 600px; align-self: flex-end; aspect-ratio: 600 / 784.29; overflow: hidden; -webkit-mask: url('/assets/makelaars/over/hero-ph-mask.svg') no-repeat 0 0 / 100% 100%; mask: url('/assets/makelaars/over/hero-ph-mask.svg') no-repeat 0 0 / 100% 100%;}
.ph-mk-over-hero-photo img { position: absolute; top: -3.06%; left: -19.9%; width: 139.8%; height: 103.03%; max-width: none; object-fit: cover;}
.ph-mk-over-hero-content { flex: 1 1 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 40px; min-width: 0;}
/* Quote (Figma "Section" 26:15491): 40px tussen PH-teken en tekst en tussen kop en kolommen; daaronder lead en kleine tekst naast elkaar */
.ph-mk-over-quote { gap: 40px;}
.ph-mk-over-quote-body { gap: 40px;}
.ph-mk-over-quote-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px;}
.ph-mk-over-quote-lead { font-size: 24px; line-height: 28.8px; font-weight: 500; color: var(--white);}
/* Review-carrousel (Figma 26:15560): Owl Carousel met witte kaarten; pijlen links/rechts, bolletjes ertussen op één rij */
/* Kop met score (Figma "Frame 665" 26:15554): 40px naast elkaar en boven de carrousel, score-rij 12px tussenruimte */
.ph-mk-over-reviews-kop { column-gap: 40px; margin-bottom: 40px;}
.ph-mk-over-rating { gap: 12px;}
/* Ook de carrousel van de onderdelen onder 1200 (render_mk_tools($tools, 10), webinar; Figma Webinar mobiel "Frame 610") */
.ph-mk-over-reviews, .ph-mk-tools-carrousel { position: relative;}
/* Owl zet elke afbeelding in een dia op width: 100% (.owl-carousel .owl-item img): iconen, slotjes en gloed in de
   tegels houden hun eigen maat; met width auto rekent de browser de breedte uit de height-attributen */
.ph-mk-tools-carrousel .owl-item img { width: auto;}
.ph-mk-over-reviews .owl-stage-outer { margin: -15px 0; padding: 15px 0;}
.ph-mk-over-reviews .owl-stage { display: flex;}
.ph-mk-over-reviews .owl-item { display: flex;}
.ph-mk-over-review { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; gap: 25px; padding: 40px; border-radius: 20px; background-color: var(--white); box-shadow: var(--shadow-lg); color: var(--primary);}
.ph-mk-over-review-text { flex: 1 1 auto; font-size: 18px; line-height: 23.4px;}
/* Datum: Label/XSmall, getrimd tot de hoofdletterhoogte zoals in Figma (text-box-trim) */
.ph-mk-over-review-datum { text-box: trim-both cap alphabetic;}
.ph-mk-over-review-score { position: absolute; top: 10px; right: 10px; display: flex; align-items: center; justify-content: center; min-width: 77px; height: 64px; padding-inline: 24px; border-radius: 10px; background-color: var(--secondary); font-family: var(--font-display); font-stretch: var(--font-display-stretch); font-size: 32px; line-height: 1; font-weight: var(--font-weight-display); color: var(--white);}
.ph-mk-over-reviews .owl-dots, .ph-mk-tools-carrousel .owl-dots { height: 24px; margin-top: 16px;}
.ph-mk-over-reviews .owl-nav, .ph-mk-tools-carrousel .owl-nav { position: absolute; left: 8px; right: 8px; bottom: 0; justify-content: space-between; height: 24px; margin-top: 0; pointer-events: none;}
/* Pijl 24px, tikvlak 44 (de negatieve marge houdt de pijl op zijn plek) */
.ph-mk-over-reviews .owl-nav button.owl-prev, .ph-mk-over-reviews .owl-nav button.owl-next, .ph-mk-tools-carrousel .owl-nav button.owl-prev, .ph-mk-tools-carrousel .owl-nav button.owl-next { width: 44px; height: 44px; margin: -10px; border: 0; pointer-events: auto; transition: opacity .3s ease-out;}
.ph-mk-over-reviews .owl-nav button.owl-prev:hover, .ph-mk-over-reviews .owl-nav button.owl-next:hover, .ph-mk-tools-carrousel .owl-nav button.owl-prev:hover, .ph-mk-tools-carrousel .owl-nav button.owl-next:hover { background-color: transparent; opacity: .7;}
.ph-mk-over-reviews button.owl-dot span, .ph-mk-tools-carrousel button.owl-dot span { background-color: rgba(var(--white-rgb), .3);}
.ph-mk-over-reviews button.owl-dot.active span, .ph-mk-tools-carrousel button.owl-dot.active span { width: 33px; background-color: var(--white);}
.ph-mk-over-reviews .owl-nav button:focus-visible, .ph-mk-over-reviews button.owl-dot:focus-visible, .ph-mk-tools-carrousel .owl-nav button:focus-visible, .ph-mk-tools-carrousel button.owl-dot:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px;}
/* Slot-CTA met gouden gloed en stempel rechts naast de kop */
.ph-mk-over-cta > .ph-mk-glow { top: calc(50% - 66px);}
.ph-mk-over-cta-inner { display: flex; flex-direction: column; align-items: center; gap: 64px;}
.ph-mk-over-cta-text { position: relative; max-width: 600px; gap: 40px;}
.ph-mk-over-sticker { top: -44px; left: calc(100% + 12px);}

@media (prefers-reduced-motion: reduce) {
    .ph-mk-over-reviews button.owl-dot span, .ph-mk-tools-carrousel button.owl-dot span { transition: none;}
}

@media (max-width: 1199.98px) {
    .ph-mk-over-hero { padding-inline: 40px;}
    .ph-mk-over-hero-inner { gap: 40px;}
    .ph-mk-over-hero-photo { flex-basis: 45%;}
    .ph-mk-over-sticker { left: auto; right: -140px; transform: scale(.7);}
}

@media (max-width: 991.98px) {
    .ph-mk-over-hero { height: auto; margin-top: 0; padding-top: 40px; overflow: visible;}
    .ph-mk-over-hero-inner { flex-direction: column; height: auto;}
    .ph-mk-over-hero-photo { flex: none; align-self: center; width: min(100%, 480px);}
    .ph-mk-over-hero .ph-mk-pattern { height: 100%;}
    .ph-mk-over-quote-cols { grid-template-columns: minmax(0, 1fr);}
    .ph-mk-over-sticker { position: relative; top: auto; right: auto; align-self: center; margin: -48px 0; transform: scale(.6);}
}

@media (max-width: 767.98px) {
    .ph-mk-over-hero { padding-inline: 16px;}
    .ph-mk-over-review { padding: 40px 24px 24px;}
    .ph-mk-over-cta-inner { gap: 40px;}
    .ph-mk-over-quote { flex-direction: column;}
}

/* === 16. Cookiebanner (inc/cookie-banner.php, Figma "Cookiebanner" 3147:20031) ===============
   800 breed, radius 24, wit. Tabs even breed (Label Medium Default, padding 24 16), de actieve met een roze streep van 4
   op de lijn eronder (24 van de randen). Toestemming: kop (Headline Medium) en tekst (padding 32 24), daaronder de drie
   schakelaars in kolommen met een lijn ertussen. Voorkeuren: per soort titel, uitleg en de schakelaar rechts. Onderaan
   altijd drie even brede knoppen (padding 24, gap 16). De inhoud scrolt binnen 343 (Figma), de knoppen blijven staan.
   Alleen in de pagina zolang er geen keuze is (index.php), het script in de include toont hem. */

#powerhuys-cookie-overlay { display: none; position: fixed; inset: 0; z-index: 1100; background: rgba(var(--black-rgb), .6);}
/* max-height + flex: op een liggende telefoon scrolt de inhoud en blijven de knoppen in beeld (het script zet display: flex) */
#powerhuys-cookie-banner { display: none; flex-direction: column; position: fixed; top: 50%; left: 50%; z-index: 1101; width: calc(100% - 32px); max-width: 800px; max-height: calc(100dvh - 32px); overflow: hidden; transform: translate(-50%, -50%); border-radius: var(--radius-lg); background: var(--bg-secondary); box-shadow: 0 4px 8px rgba(var(--black-rgb), .25); color: var(--text-default);}
#powerhuys-cookie-banner .cb-tabs-nav { display: flex; flex-shrink: 0; margin: 0 24px; padding: 0; border-bottom: 1px solid var(--stroke-secondary); list-style: none;}
#powerhuys-cookie-banner .cb-tabs-nav li { flex: 1 1 0; min-width: 0;}
#powerhuys-cookie-banner .cb-tabs-nav a { display: block; margin-bottom: -1px; padding: 24px 16px 20px; border-bottom: 4px solid transparent; font-size: var(--label-default-size); line-height: var(--label-default-line); font-weight: var(--font-weight-label); color: var(--text-default); text-align: center; text-decoration: none; white-space: nowrap;}
#powerhuys-cookie-banner .cb-tabs-nav li.is-active a { border-bottom-color: var(--stroke-accent-01);}
#powerhuys-cookie-banner .cb-tab-content { display: none; flex-direction: column; flex: 0 1 auto; min-height: 0; max-height: 343px; overflow-y: auto;}
#powerhuys-cookie-banner .cb-tab-content.is-active { display: flex;}
#powerhuys-cookie-banner .cb-tab-content p { margin: 0; font-size: var(--body-default-size); line-height: var(--body-default-line); color: var(--text-secondary);}
#powerhuys-cookie-banner .cb-tab-content a { color: var(--text-default); text-decoration: underline;}
#powerhuys-cookie-banner .cb-intro { display: flex; flex-direction: column; gap: 4px; padding: 32px 24px;}
#powerhuys-cookie-banner .cb-intro .cb-titel { font-size: var(--headline-md-size); line-height: var(--headline-md-line); font-weight: var(--font-weight-headline); color: var(--text-default);}
#powerhuys-cookie-banner .cb-soorten { display: flex; border-top: 1px solid var(--stroke-secondary);}
#powerhuys-cookie-banner .cb-soort { display: flex; flex: 1 1 0; flex-direction: column; align-items: center; justify-content: space-between; gap: 24px; min-width: 0; margin: 0; padding: 16px; text-align: center; cursor: pointer;}
#powerhuys-cookie-banner .cb-soort + .cb-soort { border-left: 1px solid var(--stroke-secondary);}
#powerhuys-cookie-banner .cb-soort-titel { font-size: var(--headline-sm-size); line-height: var(--headline-sm-line); font-weight: var(--font-weight-headline); color: var(--text-default);}
#powerhuys-cookie-banner .cb-tab-content[data-tab="details"] { gap: 24px; padding: 32px 24px;}
#powerhuys-cookie-banner .cb-cookie-type { display: flex; align-items: flex-end; gap: 24px;}
#powerhuys-cookie-banner .cb-cookie-type-tekst { display: flex; flex: 1 1 auto; flex-direction: column; gap: 8px; min-width: 0;}
/* Cookiebeleid: kopjes (Headline Small) met 8 tot de tekst en 24 tussen de onderwerpen */
#powerhuys-cookie-banner .cb-tab-content[data-tab="about"] { gap: 8px; padding: 32px 24px;}
#powerhuys-cookie-banner .cb-tab-content[data-tab="about"] p:has(> b):not(:first-child) { margin-top: 16px;}
#powerhuys-cookie-banner .cb-tab-content[data-tab="about"] b { font-size: var(--headline-sm-size); line-height: var(--headline-sm-line); font-weight: var(--font-weight-headline); color: var(--text-default);}
/* Noodzakelijk: geen schakelaar maar "Altijd actief" (geen toestemming nodig) */
#powerhuys-cookie-banner .cb-altijd-actief { flex-shrink: 0; font-size: var(--body-default-size); line-height: var(--body-default-line); font-weight: var(--font-weight-headline); color: var(--text-secondary); white-space: nowrap;}
#powerhuys-cookie-banner .cb-footer { display: flex; flex-shrink: 0; gap: 16px; padding: 24px; border-top: 1px solid var(--stroke-secondary);}
#powerhuys-cookie-banner .cb-footer .btn { flex: 1 1 0; min-width: 0;}

@media (max-width: 767.98px) {
    #powerhuys-cookie-banner .cb-tabs-nav { margin: 0 12px;}
    #powerhuys-cookie-banner .cb-tabs-nav a { padding: 16px 8px 12px;}
    #powerhuys-cookie-banner .cb-intro, #powerhuys-cookie-banner .cb-tab-content[data-tab="details"], #powerhuys-cookie-banner .cb-tab-content[data-tab="about"] { padding: 24px 16px;}
    #powerhuys-cookie-banner .cb-soort { gap: 12px; padding: 12px 8px;}
    #powerhuys-cookie-banner .cb-footer { flex-direction: column; gap: 8px; padding: 16px;}
}

/* === 17. Consumentenpagina's — Kopers en Verkopers (Figma "Kopers | Consumenten" 2710:23855,
   "Verkopers | Consumenten" 2710:32171, "Verkopers (ingelogd)" 2710:34355). Gedeelde blokken uit
   inc/kaarten.php, ook voor Het bewijs, Casus en Makelaars. Carrousels lopen rechts door tot de
   schermrand; de stage-outer houdt ruimte voor uitstekende labels en schaduwen. ============== */

.ph-consument .ph-faq-head h2 { text-transform: uppercase;}
.ph-consument-sneak { padding-top: 40px;}
.ph-reviews-carrousel, .ph-casus-carrousel-liggend { margin-right: calc(50% - 50vw);}
.ph-reviews-carrousel .owl-stage-outer, .ph-casus-carrousel-liggend .owl-stage-outer { margin: -16px 0 -24px -16px; padding: 16px 0 24px 16px;}
.ph-reviews-carrousel .owl-stage, .ph-casus-carrousel .owl-stage { display: flex;}
.ph-reviews-carrousel .owl-item, .ph-casus-carrousel .owl-item { display: flex;}

/* Hero met foto in PH-vorm (render_ph_foto_hero): 680 hoog, 80px tussen foto (600×774, steekt
   118px boven de hero uit, achter de menubalk) en inhoud (600 breed, 40px tussen kop en acties).
   Masker met de drie stroken; de foto (600×798) staat onderaan, de slogan in de uitsparing. */
.ph-foto-hero { padding-bottom: 24px;}
.ph-foto-hero-inner { display: flex; align-items: flex-end; gap: 80px; max-width: 1328px; height: 656px; margin-inline: auto; padding-inline: 24px;}
.ph-foto-hero-beeld { position: relative; flex: 0 0 600px; height: 774px; container-type: inline-size;}
.ph-foto-hero-foto { position: absolute; inset: 0; overflow: hidden; -webkit-mask: url('/assets/images/ph-foto-mask.svg') 0 0 / 100% 100% no-repeat; mask: url('/assets/images/ph-foto-mask.svg') 0 0 / 100% 100% no-repeat;}
.ph-foto-hero-foto img { position: absolute; left: 0; bottom: 0; width: 100%; height: 103.06%; max-width: none; object-fit: cover;}
.ph-foto-hero-slogan { position: absolute; left: 26%; top: 75.07%; display: flex; align-items: center; width: 22%; height: 24.93%; margin: 0; font-size: 26.816px; line-height: normal; color: var(--text-default);}
/* De slogan schaalt mee met de breedte van het beeld (26.816px op 600 breed), zodat hij in de uitsparing past */
@supports (font-size: 1cqw) {
    .ph-foto-hero-slogan { font-size: calc(26.816 / 600 * 100cqw);}
}
.ph-foto-hero-inhoud { flex: 1 1 0; min-width: 0; max-width: 600px; align-self: center; display: flex; flex-direction: column; align-items: flex-start; gap: 40px;}
.ph-foto-hero-tekst { font-size: var(--body-default-size); line-height: var(--body-default-line); color: var(--text-secondary);}
.ph-foto-hero .ph-home-link { box-shadow: var(--shadow-card);}
.ph-foto-hero .ph-home-link-icon { background-color: var(--secondary);}

/* Eigen woning in de hero (render_eigen_woning_kaart, Figma "Woning card" 2710:36212): liggend, 256 hoog, 24px tussen foto en tekst */
.ph-eigen-woning { flex-direction: row; gap: 24px; width: 100%; height: 256px;}
.ph-eigen-woning .card-photo-wrap { flex: 1 1 0; min-width: 0;}
.ph-eigen-woning .card-photo-wrap > img, .ph-eigen-woning .card-photo-placeholder { height: 100%;}
.ph-eigen-woning-body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; padding: 16px 4px;}
.ph-eigen-woning-tekst { flex: 1 1 auto; min-width: 0;}
.ph-eigen-woning-adres { font-size: var(--headline-md-size); line-height: var(--headline-md-line); font-weight: 500; color: var(--text-default);}
.ph-eigen-woning-plaats { font-size: var(--body-default-size); line-height: var(--body-default-line); color: var(--text-secondary);}

@media (max-width: 1199.98px) {
    .ph-foto-hero-inner { gap: 40px;}
    .ph-foto-hero-beeld { flex-basis: 45%; height: auto; aspect-ratio: 600 / 774;}
}

@media (max-width: 991.98px) {
    .ph-foto-hero-inner { flex-direction: column; align-items: center; height: auto; padding-top: 40px;}
    .ph-foto-hero-beeld { flex: none; width: min(100%, 480px);}
    .ph-foto-hero-inhoud { flex: none; width: 100%; align-self: stretch;}
}

@media (max-width: 575.98px) {
    .ph-eigen-woning { flex-direction: column; height: auto;}
    .ph-eigen-woning .card-photo-wrap { flex: none;}
    .ph-eigen-woning .card-photo-wrap > img, .ph-eigen-woning .card-photo-placeholder { height: 200px;}
    .ph-eigen-woning-body { flex: none; padding: 4px;}
}

/* Vergelijking (render_vergelijking, Figma 2710:25740): padding 80 0, 40px ertussen; kaarten 1100 breed met 32px ertussen,
   padding 40, gap 16, radius 16; PowerHuys-kaart donkergroen met gloed (934×648) en stempel rechtsboven */
.ph-vergelijking { display: flex; flex-direction: column; align-items: center; gap: 40px; padding: 80px 0;}
.ph-vergelijking-titel { max-width: 800px; color: var(--text-default);}
.ph-vergelijking-kaarten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; width: 100%; max-width: 1100px;}
.ph-vergelijking-kaart { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 40px; border-radius: var(--radius-md); background-color: var(--bg-secondary); box-shadow: var(--shadow-card); color: var(--text-default);}
.ph-vergelijking-kaart.is-powerhuys { background-color: var(--bg-inverse); color: var(--text-inverse);}
.ph-vergelijking-kaart h3, .ph-vergelijking-punten { position: relative;}
.ph-vergelijking-gloed { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none;}
.ph-vergelijking-gloed img { position: absolute; top: 50%; left: 50%; max-width: none; transform: translate(-50%, -50%);}
.ph-vergelijking-punten { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none;}
.ph-vergelijking-punten li { display: flex; align-items: center; gap: 8px; font-size: var(--body-default-size); line-height: var(--body-default-line); color: var(--text-secondary);}
.is-powerhuys .ph-vergelijking-punten li { color: var(--text-inverse);}
/* Minteken (Figma "Frame 348"): rondje 18 met rand, streepje 10×2 */
.ph-vergelijking-min { position: relative; flex: 0 0 18px; height: 18px; border: 1px solid var(--stroke-default); border-radius: 40px;}
.ph-vergelijking-min::after { content: ""; position: absolute; top: 7px; left: 3px; width: 10px; height: 2px; border-radius: 40px; background-color: var(--icon-secondary);}
.ph-vergelijking-stempel { top: -100px; right: -116px;}

/* Tot 1200 valt de stempel (116px buiten de kaart) buiten het scherm: kleiner en dichter op de kaart */
@media (max-width: 1199.98px) {
    .ph-vergelijking-stempel { right: -60px; transform: scale(.8);}
}

/* Eén kolom: stempel boven de rechterhoek, zodat hij de titel niet bedekt; de kaarten krijgen er ruimte voor */
@media (max-width: 991.98px) {
    .ph-vergelijking-kaarten { grid-template-columns: minmax(0, 1fr); row-gap: 64px;}
    .ph-vergelijking-stempel { top: -100px; right: -56px; transform: scale(.6);}
    .ph-vergelijking-kaart.is-powerhuys h3 { padding-right: 96px;}
}

@media (max-width: 767.98px) {
    .ph-vergelijking { padding: 48px 0;}
    .ph-vergelijking-kaart { padding: 24px;}
}

/* Fases (render_ph_fases, Figma 2884:45352): padding 40 0, 32 tussen kop (600) en de kaarten; vier kaarten van 302
   met 24 ertussen. Kaart wit, rand 20%, radius 16; bovenin een vlak van 290 met kleurverloop en de app-screenshot
   (202 breed, 24 van de bovenkant, onderaan afgesneden), eronder tekst (padding 24, lijn erboven, schaduw omhoog). */
.ph-fases { display: flex; flex-direction: column; gap: 32px; padding: 40px 0;}
.ph-fases-titel { max-width: 600px; color: var(--text-default);}
.ph-fases-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px;}
.ph-fase { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--stroke-secondary); border-radius: var(--radius-md); background-color: var(--bg-secondary);}
.ph-fase-beeld { position: relative; display: flex; flex-shrink: 0; justify-content: center; height: 290px; padding-top: 24px; overflow: hidden;}
.ph-fase-beeld > img { flex-shrink: 0; width: 202px; height: 413px; filter: drop-shadow(0 4px 16px rgba(var(--black-rgb), .25));}
.ph-fase-beeld-groen { background: linear-gradient(180deg, rgba(var(--primary-rgb), .1), rgba(var(--primary-rgb), .3)), var(--white);}
.ph-fase-beeld-goud { background: linear-gradient(180deg, rgba(var(--secondary-rgb), .1), rgba(var(--secondary-rgb), .3)), var(--white);}
.ph-fase-beeld-lichtgroen { background: linear-gradient(180deg, color-mix(in srgb, var(--bg-subtle-02) 50%, transparent), var(--bg-subtle-02)), rgba(var(--white-rgb), .2);}
.ph-fase-beeld-roze { background: linear-gradient(180deg, color-mix(in srgb, var(--pink-500) 10%, transparent), color-mix(in srgb, var(--pink-500) 30%, transparent)), var(--white);}
/* Sneak Preview-melding over het beeld (Figma "Sneak Preview melding" 3766:40512): 16 van links, 89 van boven, 362 breed
   (steekt rechts buiten de kaart en wordt afgesneden); licht glas, donker logovlak, donkere tekst */
.ph-fase-beeld .ph-sp-melding { position: absolute; top: 89px; left: 16px; width: 362px;}
.ph-sp-melding-licht::before { background-color: rgba(var(--white-rgb), .5); box-shadow: 0 8px 20px rgba(var(--black-rgb), .2);}
.ph-sp-melding-licht .ph-sp-melding-logo { background-color: var(--icon-default);}
.ph-sp-melding-licht .ph-sp-melding-tekst { color: var(--text-default);}
.ph-sp-melding-licht .ph-sp-melding-tijd { color: var(--text-secondary);}
.ph-fase-body { position: relative; display: flex; flex: 1 1 auto; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 24px; min-height: 222px; padding: 24px; border-top: 1px solid var(--stroke-secondary); background-color: var(--bg-secondary); box-shadow: 0 0 8px rgba(var(--black-rgb), .25);}
.ph-fase-titel { font-size: var(--headline-md-size); line-height: var(--headline-md-line); font-weight: 500; color: var(--text-default);}
.ph-fase-tekst { font-size: var(--body-default-size); line-height: var(--body-default-line); color: var(--text-secondary);}

@media (max-width: 1199.98px) {
    .ph-fases-raster { grid-template-columns: repeat(2, minmax(0, 1fr));}
}

@media (max-width: 575.98px) {
    .ph-fases-raster { grid-template-columns: minmax(0, 1fr);}
}

/* Reviews (render_reviews, Figma 2710:25907): padding 80 0, 40px tussen kop en kaarten; kaarten 460 breed, padding 40,
   gap 25, radius 20, cijferbadge 77×64 (radius 10) rechtsboven; sterren 18×17,25 met 4px ertussen (ook makelaarskant) */
.ph-reviews { display: flex; flex-direction: column; gap: 40px; padding: 80px 0;}
.ph-reviews-kop { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px;}
.ph-reviews-kop h2 { color: var(--text-default);}
.ph-reviews-ondertitel { color: var(--text-secondary);}
.ph-reviews-score { font-size: 27.2px; line-height: 42.16px; font-weight: 500; color: var(--text-default);}
.ph-reviews-aantal { font-size: var(--body-sm-size); line-height: var(--body-sm-line); color: var(--text-secondary);}
.ph-sterren { display: inline-flex; align-items: center; gap: 4px;}
/* Specifieker dan ".owl-carousel .owl-item img { width: 100%}" van Owl Carousel */
.ph-sterren img, .owl-carousel .owl-item .ph-sterren img { display: block; width: 18px; height: 17.25px;}
.ph-review { position: relative; display: flex; flex-direction: column; gap: 25px; width: min(460px, 80vw); padding: 40px; border-radius: 20px; background-color: var(--bg-secondary); box-shadow: var(--shadow-card);}
.ph-review-tekst { flex: 1 1 auto; font-size: var(--body-default-size); line-height: var(--body-default-line); color: var(--text-default);}
.ph-review-naam { font-size: var(--body-sm-size); line-height: var(--body-sm-line); font-weight: 500; color: var(--text-default);}
.ph-review-datum { font-size: var(--label-xs-size); line-height: var(--label-xs-line); color: var(--text-secondary);}
.ph-review-cijfer { position: absolute; top: 10px; right: 10px; display: flex; align-items: center; justify-content: center; min-width: 77px; height: 64px; padding: 16px 24px; border-radius: 10px; background-color: var(--bg-accent-primary); font-family: var(--font-display); font-stretch: var(--font-display-stretch); font-size: var(--display-sm-size); line-height: var(--display-sm-line); font-weight: var(--font-weight-display); color: var(--text-inverse);}

@media (max-width: 767.98px) {
    .ph-reviews { padding: 48px 0;}
    .ph-review { padding: 88px 24px 24px;}
}

/* Bewijs (render_bewijs, Figma 2710:25947): padding 80 0, 40px ertussen; kengetallen met 24px en een lijn ertussen */
.ph-bewijs { display: flex; flex-direction: column; gap: 40px; padding: 80px 0;}
.ph-bewijs-kop { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px;}
.ph-bewijs-kop h2 { color: var(--text-default);}
.ph-kengetallen { display: flex; gap: 24px;}
.ph-kengetal { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; padding: 16px 0;}
.ph-kengetal + .ph-kengetal { padding-left: 24px; border-left: 1px solid var(--stroke-secondary);}
.ph-kengetal dt { font-weight: var(--font-weight-display); color: var(--text-accent-primary);}
.ph-kengetal dd { font-size: var(--body-default-size); line-height: var(--body-default-line); color: var(--text-secondary);}
/* Paneel (Verkopers, Figma 3069:49356): donkergroen, rand 20%, radius 40, padding 40, 40 ertussen, gouden gloed
   (Ellipse 55, 200px buiten het paneel); de carrousel loopt door tot de rand van het paneel en wordt daar afgesneden */
.ph-bewijs-paneel { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 40px; padding: 40px; border: 1px solid var(--stroke-secondary); border-radius: var(--radius-xl); background-color: var(--bg-inverse); box-shadow: 0 4px 20px rgba(var(--black-rgb), .25);}
.ph-bewijs-paneel-gloed { position: absolute; z-index: -1; top: -200px; left: -200px; width: calc(100% + 400px); height: calc(100% + 400px); max-width: none; pointer-events: none;}
.ph-bewijs-paneel .ph-casus-carrousel-liggend { margin-right: -40px;}
.ph-bewijs-paneel .ph-kengetal dt { color: var(--text-inverse);}
.ph-bewijs-paneel .ph-kengetal dd { color: var(--text-inverse-secondary);}
.ph-bewijs-paneel .ph-kengetal + .ph-kengetal { border-color: var(--stroke-inverse);}

@media (max-width: 767.98px) {
    .ph-bewijs { padding: 48px 0;}
    .ph-bewijs-paneel { padding: 24px; border-radius: var(--radius-lg);}
    .ph-bewijs-paneel .ph-casus-carrousel-liggend { margin-right: -24px;}
    .ph-kengetallen { flex-direction: column; gap: 0;}
    .ph-kengetal + .ph-kengetal { padding-left: 0; border-left: 0; border-top: 1px solid var(--stroke-secondary);}
    /* Figma "Verkopers | Consumenten" (3903-51618): "Bekijk meer cases" links onder het paneel */
    .ph-bewijs-kop { display: contents;}
    .ph-bewijs-kop > .btn { order: 1; align-self: flex-start; margin-top: -24px;}
    /* Veelgestelde vragen direct na Bewijs, Bereik of Reviews (/verkopen): alleen de 48px onderaan het vorige blok, zoals Figma */
    :is(.ph-bewijs, .ph-bereik, .ph-reviews) + .ph-faq { padding-top: 0;}
}

/* Casuskaart (render_casus_kaart, Figma component "Casus card"): padding 12, label Verkocht 20px van boven en 4px buiten de kaart.
   Liggend (aankoop) 3069:49055: 980 breed, radius 24, foto 400 breed (radius 16), tekst met padding 24/40 en 40px ertussen.
   Lijst = Liggend (verkoop) 3036:33702: zo breed als de kolom (Figma 838), radius 16, 24px tussen foto (320×320, radius 8) en tekst (padding 16/4,
   16px ertussen), regel m²/perceel/slaapkamers en onderaan kantoorchip + "Bekijk deze casus".
   Staand (verkoop) 3069:48848: 408 breed, radius 24, foto 200 hoog, tekst met padding 16 en kengetallen over twee regels. */
.ph-casus { position: relative; display: flex; padding: 12px; border-radius: var(--radius-lg); background-color: var(--bg-secondary); box-shadow: var(--shadow-card); color: var(--text-default);}
.ph-casus-foto { position: relative; overflow: hidden; border-radius: var(--radius-md); background-color: var(--primary-20);}
.ph-casus .ph-casus-foto img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; object-fit: cover;}
.ph-casus > .card-woning-badge { top: 20px; left: -4px;}
.ph-casus-body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 40px; padding: 24px 40px;}
.ph-casus-kop { display: flex; flex-direction: column; gap: 16px;}
.ph-casus-titel { font-size: var(--headline-md-size); line-height: var(--headline-md-line); font-weight: 500; color: var(--text-default);}
.ph-casus-titel a { color: inherit; text-decoration: none;}
.ph-casus-adres { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--label-sm-size); line-height: var(--label-sm-line); color: var(--text-secondary);}
.ph-casus-adres strong { font-weight: 500;}
.ph-casus-punt { width: 4px; height: 4px; border-radius: 50%; background-color: var(--text-secondary);}
.ph-casus-kengetallen { display: flex; flex-wrap: wrap; gap: 24px;}
.ph-casus-kengetallen > div { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px;}
.ph-casus-kengetallen dt { font-size: var(--body-default-size); line-height: var(--body-default-line); font-weight: 400; color: var(--text-secondary);}
.ph-casus-kengetallen dd { margin: 0; white-space: nowrap;}
.ph-casus-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--label-sm-size); line-height: var(--label-sm-line); color: var(--text-secondary);}
.ph-casus-stats span { display: inline-flex; align-items: center; gap: 4px;}
.ph-casus-stats svg { width: 20px; height: 20px;}
.ph-casus-voet { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;}
.ph-casus-kantoor { display: inline-flex; align-items: center; gap: 8px; padding: 4px 16px 4px 4px; border: 1px solid var(--stroke-secondary); border-radius: var(--radius-sm); font-size: var(--body-default-size); line-height: var(--body-default-line); color: var(--text-secondary);}
.ph-casus-logo { display: flex; flex-shrink: 0; width: 48px; height: 48px; padding: 4px; border-radius: var(--radius-sm); background-color: var(--bg-secondary);}
.ph-casus .ph-casus-logo img { width: 100%; height: 100%; border-radius: 0; object-fit: contain;}
.ph-casus-liggend { width: min(980px, 85vw);}
.ph-casus-liggend .ph-casus-foto { flex: 0 0 400px; min-height: 327px;}
.ph-casus-lijst { align-items: center; gap: 24px; border-radius: var(--radius-md);}
.ph-casus-lijst .ph-casus-foto { flex: 0 0 320px; height: 320px; border-radius: var(--radius-sm);}
.ph-casus-lijst .ph-casus-body { align-self: stretch; gap: 16px; padding: 16px 4px;}
.ph-casus-lijst .ph-casus-kop { gap: 12px;}
.ph-casus-lijst .ph-casus-adres strong { font-weight: 400;}
.ph-casus-lijst .ph-casus-kengetallen { gap: 16px;}
.ph-casus-lijst .ph-casus-kengetallen > div:first-child { flex: 0 0 180px;}
.ph-casus-lijst .ph-casus-voet { padding-right: 8px;}
.ph-casus-staand { flex-direction: column; width: 100%; height: 100%;}
.ph-casus-staand .ph-casus-foto { flex: none; height: 200px;}
.ph-casus-staand .ph-casus-body { flex: 1 1 auto; justify-content: flex-start; padding: 16px;}
.ph-casus-staand .ph-casus-kengetallen > div { flex: 1 0 120px;}
.ph-casus-staand .ph-casus-kengetallen > div:first-child { flex: 0 0 160px;}
/* Carrousel staand (casuspagina, Figma 2719:41546): pijlen 24px links en rechts, bolletjes ertussen op één rij (actief 33 breed) */
/* Ruimte voor de kaartschaduw (0 2 16), anders knipt .owl-stage-outer (overflow: hidden) hem af */
.ph-casus-carrousel-staand .owl-stage-outer { margin: -16px -16px -24px; padding: 16px 16px 24px;}
.ph-casus-carrousel-staand .owl-dots { height: 24px; margin-top: 24px;}
.ph-casus-carrousel-staand .owl-nav { position: absolute; left: 8px; right: 8px; bottom: 0; justify-content: space-between; margin-top: 0; pointer-events: none;}
/* Pijl 24px, tikvlak 44 (de negatieve marge houdt de pijl op zijn plek) */
.ph-casus-carrousel-staand .owl-nav button.owl-prev, .ph-casus-carrousel-staand .owl-nav button.owl-next { width: 44px; height: 44px; margin: -10px; border: 0; background-color: transparent; pointer-events: auto;}
.ph-casus-carrousel-staand .owl-nav button.owl-prev:hover, .ph-casus-carrousel-staand .owl-nav button.owl-next:hover { background-color: transparent; opacity: .7;}
.ph-casus-carrousel-staand button.owl-dot.active span { width: 33px;}
/* Liggend: alle kaarten even hoog als de hoogste (owl-item is al flex) */
.ph-casus-carrousel-liggend .ph-casus-item { display: flex;}

@media (max-width: 991.98px) {
    .ph-casus-liggend { flex-direction: column;}
    .ph-casus-liggend .ph-casus-foto { flex: none; min-height: 0; height: 220px;}
    .ph-casus-liggend .ph-casus-body { flex: 1 1 auto; justify-content: flex-start; gap: 24px; padding: 24px 12px 12px;}
    /* Kaarten even hoog: makelaar onderaan, extra ruimte tussen cijfers en makelaar (zonder makelaar: cijfers onderaan) */
    .ph-casus-liggend .ph-casus-voet, .ph-casus-liggend .ph-casus-kengetallen:last-child { margin-top: auto;}
}

@media (max-width: 767.98px) {
    .ph-casus-lijst { flex-direction: column; align-items: stretch; gap: 8px;}
    .ph-casus-lijst .ph-casus-foto { flex: none; height: 220px;}
    .ph-casus-lijst .ph-casus-kengetallen > div:first-child { flex: 1 1 auto;}
    .ph-casus-liggend { width: calc(100vw - var(--bs-gutter-x, 24px));}
    /* Bolletjes alleen op mobiel; de carrousel loopt rechts een halve gutter door, die marge houdt ze gecentreerd */
    .ph-casus-carrousel-liggend .owl-dots { height: 24px; margin-right: calc(var(--bs-gutter-x, 24px) * .5);}
    /* In het paneel (Figma "Verkopers | Consumenten" 3903-51618): kaart 300 breed bij 390 scherm zodat de volgende
       kaart rechts in beeld komt, padding 8, foto 200 hoog, tekst 24/16/16; geen bolletjes */
    .ph-bewijs-paneel .ph-casus-liggend { width: calc(100vw - 90px); padding: 8px;}
    .ph-bewijs-paneel .ph-casus-liggend .ph-casus-foto { height: 200px;}
    .ph-bewijs-paneel .ph-casus-liggend .ph-casus-body { padding: 24px 16px 16px;}
    .ph-bewijs-paneel .ph-casus-carrousel-liggend .owl-dots { display: none;}
}

/* Bereikcalculator (render_bereik_calculator, Figma 3168:22452): padding 80 0, formulier 500 breed, 80px ertussen;
   resultatenpaneel donkergroen (radius 24, padding 40) met gloed, tellers met lijnen en de balk Funda vs. PowerHuys */
/* Formulier in een witte kaart (padding 40, rand 20%, radius 16) direct tegen het donkere paneel, dat er iets
   boven en onder uitsteekt en eroverheen valt; beide even breed (Figma Bereik Calculator 3401:32291) */
.ph-bereik { display: flex; align-items: center; padding: 80px 0; scroll-margin-top: var(--header-height);}
.ph-bereik-form { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 32px; padding: 40px; border: 1px solid var(--stroke-secondary); border-radius: var(--radius-md); background-color: var(--bg-secondary);}
.ph-bereik-form h2 { color: var(--text-default);}
.ph-bereik-intro { font-size: var(--body-default-size); line-height: var(--body-default-line); color: var(--text-secondary);}
.ph-bereik-veld { display: flex; flex-direction: column; gap: 12px; min-width: 0; margin: 0; padding: 0; border: 0;}
.ph-bereik-veld > label, .ph-bereik-veld > legend { float: none; width: auto; margin: 0; font-size: var(--label-sm-size); line-height: var(--label-sm-line); color: var(--text-default);}
.ph-bereik-veld > legend { margin-bottom: 12px;}
.ph-bereik-soorten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;}
.ph-bereik-soort { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 80px; padding: 16px; border: 1px solid var(--stroke-default); border-radius: 10px; background-color: var(--bg-secondary); font-size: var(--label-xs-size); line-height: var(--label-xs-line); text-align: center; color: var(--text-secondary); cursor: pointer; transition: border-color .2s ease-out, box-shadow .2s ease-out;}
.ph-bereik-soort:hover { border-color: var(--primary);}
.btn-check:checked + .ph-bereik-soort { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); color: var(--text-default);}
.btn-check:focus-visible + .ph-bereik-soort { box-shadow: var(--shadow-focus);}
/* Slider: track 4px (roze tot het bolletje), bolletje 20px (Figma "right-thumb" met schaduw, 26×26), bubbel 38px erboven */
.ph-bereik-slider { position: relative; padding-top: 43px;}
.ph-bereik-bubbel { position: absolute; top: 0; left: 0; padding: 8px; border: 2px solid var(--pink-500); border-radius: var(--radius-xs); background-color: var(--bg-secondary); font-size: var(--label-xs-size); line-height: var(--label-xs-line); font-weight: 500; color: var(--text-default); white-space: nowrap; transform: translateX(-50%);}
.ph-bereik-slider input { display: block; width: 100%; height: 24px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer;}
.ph-bereik-slider input::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--pink-500) var(--bereik-deel, 30%), var(--stroke-secondary) var(--bereik-deel, 30%));}
.ph-bereik-slider input::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--pink-500) var(--bereik-deel, 30%), var(--stroke-secondary) var(--bereik-deel, 30%));}
.ph-bereik-slider input::-webkit-slider-thumb { width: 26px; height: 26px; margin-top: -11px; border: 0; background: url('/assets/icons/slider-thumb.svg') center / 26px 26px no-repeat; -webkit-appearance: none; appearance: none;}
.ph-bereik-slider input::-moz-range-thumb { width: 26px; height: 26px; border: 0; border-radius: 0; background: url('/assets/icons/slider-thumb.svg') center / 26px 26px no-repeat;}
.ph-bereik-slider input:focus-visible { outline: 2px solid var(--primary-20); outline-offset: 4px; border-radius: var(--radius-xs);}
.ph-bereik-grenzen { display: flex; justify-content: space-between; font-size: var(--body-sm-size); line-height: var(--body-sm-line); color: rgba(var(--primary-rgb), .4);}
.ph-bereik-voetnoot { font-size: var(--body-sm-size); line-height: var(--body-sm-line); color: var(--text-secondary);}
.ph-bereik-paneel { position: relative; z-index: 1; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; padding: 40px; overflow: hidden; border-radius: var(--radius-lg); background-color: var(--bg-inverse); color: var(--text-inverse);}
.ph-bereik-paneel > :not(.ph-bereik-gloed) { position: relative;}
.ph-bereik-gloed { position: absolute; top: 50%; left: 50%; max-width: none; transform: translate(-50%, -50%); pointer-events: none;}
.ph-bereik-rij { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-top: 1px solid var(--stroke-inverse); font-size: var(--body-default-size); line-height: var(--body-default-line); color: var(--text-inverse-secondary);}
.ph-bereik-rij strong { color: var(--text-inverse);}
.ph-bereik-rij-kop { padding-top: 0; border-top: 0; color: var(--text-inverse);}
.ph-bereik-rij-groot { flex-direction: column; align-items: flex-start;}
.ph-bereik-postcode { padding: 4px 12px; border-radius: var(--radius-sm); background-color: var(--bg-accent-primary); color: var(--text-inverse);}
.ph-bereik-grafiek { display: flex; flex-direction: column; gap: 16px; padding: 24px; border: 1px solid var(--stroke-inverse); border-radius: var(--radius-md); background-color: var(--white-10);}
.ph-bereik-grafiek[hidden] { display: none;}
.ph-bereik-balk { height: 32px; overflow: hidden; border-radius: var(--radius-sm); background-color: var(--white-20);}
.ph-bereik-balk-ph { display: flex; align-items: center; width: 0; height: 100%; overflow: hidden; border-radius: var(--radius-sm); background-image: linear-gradient(to right, var(--secondary) 27.139%, var(--secondary-gradient-end) 98.154%); font-size: var(--label-sm-size); line-height: var(--label-sm-line); text-align: center; color: var(--text-default); white-space: nowrap; transition: width .9s ease-out;}
.ph-bereik-balk-funda { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 0; height: 100%; overflow: hidden; border-radius: var(--radius-sm); background-color: var(--white); color: var(--text-secondary); transition: width .9s ease-out .2s;}
.ph-bereik-legenda { display: inline-flex; align-items: center; gap: 8px; font-size: var(--label-sm-size); line-height: var(--label-sm-line); color: var(--text-inverse);}
.ph-bereik-legenda-funda, .ph-bereik-legenda-ph { width: 18px; height: 18px; border-radius: var(--radius-xs); background-color: var(--white);}
.ph-bereik-legenda-ph { background-image: linear-gradient(90deg, var(--secondary) 27.139%, var(--secondary-gradient-end) 98.153%);}

@media (prefers-reduced-motion: reduce) {
    .ph-bereik-balk-ph, .ph-bereik-balk-funda, .ph-bereik-soort { transition: none;}
}

@media (max-width: 991.98px) {
    .ph-bereik { flex-direction: column; align-items: stretch; gap: 24px;}
    .ph-bereik-form { flex: none;}
    .ph-bereik-paneel { flex: none;}
}

@media (max-width: 575.98px) {
    .ph-bereik { padding: 48px 0;}
    .ph-bereik-form { padding: 24px;}
    .ph-bereik-paneel { padding: 24px;}
    .ph-bereik-soorten { grid-template-columns: repeat(2, minmax(0, 1fr));}
}

/* === 18. Pagina — Onze makelaars en kantoorprofiel =========================
   Overzicht (content/onze-makelaars.php): Figma "Vind makelaars (empty)" 2643:93885 en "Vind makelaars"
   2718:52107. Profiel (content/onze-makelaars-detail.php): Figma 2685:14444. Kaart: render_makelaars_kaart()
   in inc/kaarten.php + js/makelaars-kaart.js. Kantoorkaarten zijn render_makelaar_blok() (sectie 11). */

.ph-vm-muted { color: var(--text-secondary);}

/* Hero (Figma "Hero", 657 hoog): patroon (.ph-pattern-bg, sectie 1), inhoud 40 onder de header en 80 erboven;
   kop 1040 breed, zoekkaart 842. z-index 2: de suggestielijst valt over de resultaten. */
.ph-vm-hero { z-index: 2; display: flex; justify-content: center; padding: calc(var(--header-height) + 40px) 24px 80px;}
.ph-vm-hero-inner { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; max-width: 1040px;}
.ph-vm-hero-tekst { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px 40px; text-align: center;}
.ph-vm-hero-tekst p { max-width: 762px; color: var(--text-secondary);}
/* Zoekkaart "Vind makelaar": donkergroen, rand wit 20%, padding 32, gap 32, radius 16; veld = .ph-zoekveld (sectie 10) */
.ph-vm-zoekkaart { display: flex; flex-direction: column; gap: 32px; width: 100%; max-width: 842px; padding: 32px; border: 1px solid var(--white-20); border-radius: var(--radius-md); background-color: var(--bg-inverse); box-shadow: var(--shadow-label);}
.ph-vm-zoekrij { display: flex; gap: 16px;}
/* Radio (Figma "Radio Button 1"): ring 20 met rand 2 (wit, gekozen goud) en een gouden stip, 4px tot het label */
.ph-vm-keuze { display: flex; align-items: center; gap: 4px; margin: 0; font-size: var(--label-default-size); line-height: var(--label-default-line); color: var(--text-inverse); cursor: pointer;}
.ph-vm-keuze input { flex-shrink: 0; width: 20px; height: 20px; margin: 2px; padding: 2px; appearance: none; border: 2px solid var(--stroke-inverse-secondary); border-radius: 50%; background-clip: content-box; cursor: pointer;}
.ph-vm-keuze input:checked { border-color: var(--stroke-accent-primary); background-color: var(--bg-accent-primary);}
.ph-vm-keuze input:focus-visible { outline: none; box-shadow: var(--shadow-focus);}

/* Resultaat (Figma "Makelaars"): padding 40/0/80, kop + aantal, drie kantoorkaarten met 32 ertussen */
.ph-vm-resultaat { display: flex; flex-direction: column; gap: 40px; padding: 40px 0 80px;}
.ph-vm-kantoren { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px;}
.ph-vm-kantoren .ph-makelaar-blok { box-shadow: var(--shadow-label);}
.ph-vm-kantoren .ph-makelaar-blok-body { gap: 24px;}

/* Kaart (Figma "Map"): schermbreed, 600 hoog (profiel 680), radius 16 boven; de footer schuift er 160px over
   (80 transparant + 80 groen), daarom de zoomknoppen 104 van de onderkant. isolation: de kaartlagen blijven onder de footer. */
.ph-vm-kaart { position: relative; isolation: isolate; height: 600px; margin: 0 calc(50% - 50vw) -160px;}
.ph-makelaars-kaart { position: relative; height: 100%; overflow: hidden; border-radius: var(--radius-md) var(--radius-md) 0 0; background-color: var(--green-200);}
.ph-makelaars-kaart-canvas { width: 100%; height: 100%;}
.ph-makelaars-kaart .ph-kaart-zoom { bottom: 104px;}
/* Kantoorlabel op het profiel (Figma "Group 17"): donkergroen, padding 4/16/4/4, logotegel 48, punt van 12 eronder */
.ph-kantoor-pin { position: relative; display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 4px 16px 4px 4px; border-radius: var(--radius-kaartlabel); background-color: var(--bg-inverse); box-shadow: var(--shadow-pin); font-size: var(--body-default-size); line-height: var(--body-default-line); color: var(--text-inverse); white-space: nowrap;}
.ph-kantoor-pin::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -7px; border-top: 12px solid var(--bg-inverse); border-right: 7px solid transparent; border-left: 7px solid transparent;}
.ph-kantoor-pin-logo { display: flex; flex-shrink: 0; width: 48px; height: 48px; padding: 4px; border-radius: var(--radius-sm); background-color: var(--bg-secondary);}
.ph-kantoor-pin-logo img { width: 100%; height: 100%; object-fit: contain;}

/* Profiel: donkergroene pagina die achter de header doorloopt (linkregel licht); inhoud 1440 met 80 zijpadding */
body:has(.ph-kantoor) .ph-header-links a { color: var(--text-inverse-secondary);}
body:has(.ph-kantoor) .ph-header-links a:hover { color: var(--text-inverse);}
.ph-kantoor { margin: calc(-1 * var(--header-height)) calc(50% - 50vw) 0; padding-top: var(--header-height); background-color: var(--bg-inverse); color: var(--text-inverse);}
.ph-kantoor-muted { color: var(--text-inverse-secondary);}
/* Hero (Figma "Hero" 2685:14448): 600 hoog (16 erboven), tekst en teamfoto (radius 24) naast elkaar met 80 ertussen */
.ph-kantoor-hero { display: flex; gap: 80px; height: 616px; max-width: 1440px; margin: 0 auto; padding: 16px 80px 24px;}
.ph-kantoor-hero-tekst { display: flex; flex: 1 1 0; flex-direction: column; justify-content: center; align-items: flex-start; gap: 24px; min-width: 0; padding: 40px 0;}
.ph-kantoor-logo { display: flex; align-items: center; justify-content: center; width: 120px; height: 120px; padding: 8px; border: 1px solid var(--stroke-secondary); border-radius: var(--radius-sm); background-color: var(--bg-secondary);}
.ph-kantoor-logo img { max-width: 102px; max-height: 102px; object-fit: contain;}
.ph-kantoor-icoon { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 24px; height: 24px;}
.ph-kantoor-foto { flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: var(--radius-lg); background-color: var(--bg-inverse-tertiary);}
.ph-kantoor-foto img { display: block; width: 100%; height: 100%; object-fit: cover;}
/* Statistieken (Figma "Frame 551"): padding 40/80, Body Default 80% + Display Regular, gouden gloed (blur 40) schermbreed */
.ph-kantoor-cijfers { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px 48px; max-width: 1440px; margin: 0 auto; padding: 40px 80px;}
.ph-kantoor-cijfers::before { content: ""; position: absolute; top: 40px; left: min(-9px, calc((1440px - 100vw) / 2 - 9px)); right: min(-9px, calc((1440px - 100vw) / 2 - 9px)); height: 80px; border-radius: var(--radius-xl); background-color: rgba(var(--secondary-rgb), .2); filter: blur(40px); pointer-events: none;}
.ph-kantoor-cijfers > div { position: relative;}
.ph-kantoor-cijfer-label { font-size: var(--body-default-size); line-height: var(--body-default-line); font-weight: var(--font-weight-body); color: var(--text-inverse-secondary);}
.ph-kantoor-cijfer { display: flex; align-items: center; gap: 12px; color: var(--text-inverse);}
/* Inhoud (Figma "Frame 433"): kolom 840 + zijbalk 400, 40 ertussen; de witte zijbalkkaart schuift mee */
.ph-kantoor-layout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 40px; max-width: 1440px; margin: 0 auto; padding: 40px 80px 80px;}
.ph-kantoor-main { display: flex; flex-direction: column; gap: 40px; min-width: 0;}
.ph-kantoor-sidebar { color: var(--text-default);}
/* Over (4 regels, .ph-omschrijving-text uit sectie 11) in Body Default wit 80% */
.ph-kantoor-over { font-size: var(--body-default-size); line-height: var(--body-default-line); color: var(--text-inverse-secondary);}
/* Reviews (render_reviews, sectie 17) op donkergroen en binnen de kolom: één kaart zo breed als de kolom */
.ph-kantoor .ph-reviews { padding: 0;}
.ph-kantoor .ph-reviews-kop h2, .ph-kantoor .ph-reviews-score { color: var(--text-inverse);}
.ph-kantoor .ph-reviews-ondertitel { color: var(--text-inverse-secondary);}
.ph-kantoor .ph-reviews-aantal { --bs-primary-rgb: var(--white-rgb); color: var(--text-inverse-secondary);}
.ph-kantoor .ph-reviews-carrousel { margin-right: 0;}
.ph-kantoor .ph-review { width: calc(min(1440px, 100vw) - 600px);}
/* Aanbod (Figma "Frame 270"): toggle wit 10% met witte rand, actieve tab goud; compacte woningkaarten (280 hoog) */
.ph-kantoor-aanbod { display: flex; flex-direction: column; gap: 32px;}
/* Toggle (Figma 3705:58723): vlak Inverse secondary (wit 10%) met rand Stroke/Inverse, actieve tab Accent-02 zoals de basis */
.ph-kantoor-toggle { background-color: var(--bg-inverse-secondary);}
.ph-kantoor-toggle .ph-vergelijkbaar-tab { color: var(--text-inverse);}
.ph-kantoor-aanbod .ph-raster-carrousel .owl-stage-outer { margin: -16px 0 -24px -16px; padding: 16px 0 24px 16px;}
/* Pijlen en bolletjes (Figma 2685:14531) wit op de donkere achtergrond */
.ph-kantoor-aanbod .ph-raster-carrousel .owl-nav button.owl-prev, .ph-kantoor-aanbod .ph-raster-carrousel .owl-nav button.owl-next { color: var(--icon-inverse);}
.ph-kantoor-aanbod .ph-raster-carrousel button.owl-dot span { background-color: rgba(var(--white-rgb), .3);}
.ph-kantoor-aanbod .ph-raster-carrousel button.owl-dot.active span { background-color: var(--icon-inverse);}
.ph-kantoor-aanbod .card-woning { width: 100%; padding: 8px; border-radius: var(--radius-sm);}
/* Vanaf 768 compact; op de telefoon de mobiele kaart (sectie 7) */
@media (min-width: 768px) {
    .ph-kantoor-aanbod .card-woning img, .ph-kantoor-aanbod .card-woning .card-photo-placeholder { height: 128px; border-radius: var(--radius-xs);}
    .ph-kantoor-aanbod .card-woning .card-address { font-size: var(--body-sm-size); line-height: var(--body-sm-line); font-weight: 500;}
    .ph-kantoor-aanbod .card-woning .card-meta, .ph-kantoor-aanbod .card-woning .card-stats { font-size: var(--label-xs-size);}
    .ph-kantoor-aanbod .card-woning .card-price { font-size: var(--headline-sm-size); line-height: var(--headline-sm-line);}
}
/* Carrouselpijlen en -bolletjes (sectie 14) op donkergroen: wit, bolletjes 30% */
.ph-kantoor .owl-carousel .owl-nav button.owl-prev, .ph-kantoor .owl-carousel .owl-nav button.owl-next { border-color: var(--stroke-inverse); color: var(--icon-inverse);}
.ph-kantoor .owl-carousel .owl-nav button.owl-prev:hover, .ph-kantoor .owl-carousel .owl-nav button.owl-next:hover { border-color: var(--stroke-inverse-secondary); background-color: var(--white-10);}
.ph-kantoor .owl-carousel button.owl-dot span { background-color: rgba(var(--white-rgb), .3);}
.ph-kantoor .owl-carousel button.owl-dot.active span { background-color: var(--white);}
.ph-kantoor-kaart { height: 680px;}

@media (max-width: 991.98px) {
    .ph-vm-kantoren { grid-template-columns: repeat(2, minmax(0, 1fr));}
    .ph-kantoor-hero { flex-direction: column; gap: 24px; height: auto; padding: 16px 24px 24px;}
    .ph-kantoor-foto { flex: none; height: 360px;}
    .ph-kantoor-cijfers { justify-content: flex-start; gap: 24px 32px; padding: 24px;}
    .ph-kantoor-layout { grid-template-columns: minmax(0, 1fr); padding: 24px 24px 80px;}
    .ph-kantoor .ph-review { width: calc(100vw - 48px);}
}

@media (max-width: 767.98px) {
    .ph-vm-hero { padding: calc(var(--header-height) + 16px) 16px 40px;}
    /* Figma "Vind makelaars (empty)" mobiel (3997:65068): subtekst links, alleen het zoekveld (geen groene kaart, kop en knop;
       Enter of een suggestie kiezen zoekt). De kop blijft voor schermlezers. */
    .ph-vm-hero-tekst { padding: 16px 0;}
    .ph-vm-hero-tekst p { align-self: stretch; text-align: left;}
    .ph-vm-zoekkaart { gap: 16px; padding: 0; border: 0; background-color: transparent; box-shadow: none;}
    .ph-vm-zoekkaart > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;}
    .ph-vm-zoekrij { flex-direction: column;}
    .ph-vm-zoekrij .btn { display: none;}
    .ph-vm-keuze { color: var(--text-default);}
    .ph-vm-keuze input { border-color: var(--stroke-default);}
    .ph-vm-kaart, .ph-kantoor-kaart { height: 480px;}
    .ph-kantoor-aanbod .card-woning { width: 220px; height: 264px;}
}

@media (max-width: 575.98px) {
    .ph-vm-kantoren { grid-template-columns: minmax(0, 1fr);}
    .ph-kantoor-hero, .ph-kantoor-layout { padding-inline: 16px;}
    .ph-kantoor-cijfers { padding-inline: 16px;}
    .ph-kantoor .ph-review { width: calc(100vw - 32px);}
}

/* === 19. Pagina — Contact (Figma "Contact page" 3443:57573, content/contact.php) ==========
   Zonder hero (weggehaald, staging rechttrekken 21-10-2026): direct het formulier (760) en het
   groene adviesblok, 80px ertussen, met een gouden gloed (1076×648, 20%) erachter. */
.ph-contactpagina-blok { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 760fr) minmax(0, 440fr); gap: 80px; align-items: start; padding-block: 40px 80px;}
.ph-contactpagina-blok::before { content: ""; position: absolute; z-index: -1; left: calc(50% - 264px); top: calc(50% + 87px); width: min(1076px, 100%); height: 648px; transform: translate(-50%, -50%); border-radius: 50%; background-color: rgba(var(--secondary-rgb), .2); filter: blur(150px); pointer-events: none;}
/* Veelgestelde vragen direct onder het contactblok: alleen de 80px onderaan het blok, niet nog eens 80px erboven */
.ph-contactpagina-blok + .ph-faq { padding-top: 0;}
.ph-contactpagina-kolom { display: flex; flex-direction: column; gap: 32px; min-width: 0;}
.ph-contactpagina-intro { display: flex; flex-direction: column; gap: 16px;}
.ph-contactpagina-intro p { max-width: 650px; color: var(--text-secondary);}
.ph-contactpagina-form { display: flex; flex-direction: column; gap: 24px; padding: 40px; border-radius: var(--radius-md); background-color: var(--bg-secondary); box-shadow: var(--shadow-float);}
.ph-contactpagina-akkoord { gap: 10px; white-space: normal;}
.ph-contactpagina-akkoord a { color: var(--text-default); text-decoration: none;}
.ph-contactpagina-akkoord a:hover { text-decoration: underline;}
.ph-contactpagina-form .btn-primary { align-self: flex-start;}
.ph-contactpagina-advies { display: flex; flex-direction: column; gap: 32px; padding: 32px; border-radius: var(--radius-md); background-color: var(--bg-inverse); color: var(--text-inverse);}
.ph-contactpagina-advies-kop { display: flex; flex-direction: column; gap: 16px;}
.ph-contactpagina-advies h2 { color: var(--text-inverse);}
.ph-contactpagina-advies p { color: var(--text-inverse-secondary);}
.ph-contactpagina-advies a { color: inherit; white-space: nowrap; text-decoration: none;}
.ph-contactpagina-advies a:hover { color: var(--text-inverse); text-decoration: underline;}
.ph-contactpagina-tijden { display: flex; flex-direction: column; gap: 6px; font-size: var(--body-default-size); line-height: var(--body-default-line);}
.ph-contactpagina-tijden h3 { font-size: inherit; line-height: inherit; font-weight: 400; color: var(--text-inverse);}
.ph-contactpagina-tijden dl > div { display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: 16px; padding-block: 10px;}
.ph-contactpagina-tijden dl > div + div { border-top: 1px solid var(--stroke-inverse);}
.ph-contactpagina-tijden dt { font-weight: 400; color: var(--text-inverse);}
.ph-contactpagina-tijden dd { margin: 0; color: var(--text-inverse-secondary);}

@media (max-width: 1199.98px) {
    .ph-contactpagina-blok { gap: 40px;}
}

@media (max-width: 991.98px) {
    .ph-contactpagina-blok { grid-template-columns: minmax(0, 1fr);}
}

@media (max-width: 767.98px) {
    .ph-contactpagina-blok { padding-bottom: 48px;}
    .ph-contactpagina-form, .ph-contactpagina-advies { padding: 24px;}
}
/* === 20. Pagina — Over Powerhuys (Figma "Over PowerHuys" 3414:34684, content/over-powerhuys.php) ======
   Hero = render_ph_foto_hero (sectie 17). Daarna "Kiezen op onderbouwing" (goud PH-teken 100×192 en tekst
   van 800, 40px ertussen), de vier fases als tijdlijn, de beloftes (render_mk_beloftes licht, sectie 15),
   reviews in een raster (render_reviews, sectie 17) en "Direct naar wat je zoekt" (sectie 9). */
.ph-over-onderbouwing { display: flex; justify-content: center; align-items: flex-start; gap: 40px; padding: 80px 0;}
.ph-over-quote-teken { flex-shrink: 0;}
.ph-over-onderbouwing-tekst { display: flex; flex-direction: column; gap: 40px; max-width: 800px;}
.ph-over-onderbouwing-tekst h2 { max-width: 662px;}
.ph-over-onderbouwing-kolommen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px;}
.ph-over-onderbouwing-lead { font-size: var(--headline-md-size); line-height: var(--headline-md-line); font-weight: 500; color: var(--text-default);}

/* Fases (Figma "Frame 645"): vier kolommen zonder tussenruimte; per kolom een stip (16, goud) met een
   lijn van 2px tot de volgende stip, 16px eronder de kaart (168 hoog, 16px rechts ertussen). De laatste fase
   is donkergroen met een stip van 24 (halo 50%). Witte gloed (1440×168, 30%) achter de kaarten. */
.ph-over-standaard { display: flex; flex-direction: column; gap: 40px; padding: 80px 0; scroll-margin-top: calc(var(--header-height) - var(--header-links-height));}
.ph-over-standaard p { max-width: 800px;}
.ph-over-fases { position: relative; isolation: isolate; display: flex; margin: 0; padding: 0; list-style: none;}
.ph-over-fases::before { content: ""; position: absolute; z-index: -1; top: 32px; left: 50%; width: 100vw; max-width: 1440px; height: 168px; transform: translateX(-50%); border-radius: 50%; background-color: rgba(var(--white-rgb), .3); filter: blur(20px); pointer-events: none;}
.ph-over-fase { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px;}
.ph-over-fase-lijn { display: flex; align-items: center; height: 24px;}
.ph-over-fase-stip { position: relative; z-index: 1; flex-shrink: 0; width: 16px; height: 16px; margin-right: -1px; border-radius: 50%; background-color: var(--icon-accent-primary);}
.ph-over-fase.is-actief .ph-over-fase-stip { width: 24px; height: 24px; margin-left: -4px; background: radial-gradient(circle closest-side, var(--primary) 66.6%, var(--primary-50) 66.7%);}
.ph-over-fase-streep { flex: 1 1 auto; height: 2px; background-color: var(--icon-accent-primary); transform-origin: left center;}
.ph-over-fase-kaart { display: flex; flex-direction: column; gap: 8px; height: 168px; margin-right: 16px; padding: 24px; overflow: hidden; border: 1px solid var(--stroke-secondary); border-radius: var(--radius-md); background-color: var(--bg-secondary);}
.ph-over-fase.is-actief .ph-over-fase-kaart { flex: 1 1 auto; height: auto; min-height: 168px; margin-right: 0; border-color: var(--stroke-inverse-secondary); background-color: var(--bg-inverse);}
.ph-over-fase-label { font-size: var(--body-sm-size); line-height: var(--body-sm-line); font-weight: 500; color: var(--text-accent-primary);}
.ph-over-fase-kaart h3 { color: var(--text-default);}
.ph-over-fase-kaart p { font-size: var(--body-sm-size); line-height: var(--body-sm-line); color: var(--text-secondary);}
.ph-over-fase-kaart a { color: var(--text-link); text-decoration: underline;}
.ph-over-fase.is-actief h3 { color: var(--text-inverse);}
.ph-over-fase.is-actief p { color: var(--text-inverse-secondary);}

/* In beeld (js/in-beeld.js), Figma-motion per fase 0,75s later: stip 0,1s, lijn groeit 0,715s, kaart
   0,42s omhoog (12px) en zichtbaar. Eén keer bij in beeld komen in plaats van de lus van het prototype. */
@keyframes ph-in-vervagen { from { opacity: 0;} to { opacity: 1;} }
@keyframes ph-in-omhoog { from { opacity: 0; translate: 0 12px;} to { opacity: 1; translate: 0 0;} }
@keyframes ph-in-groeien { from { transform: scaleX(0);} to { transform: scaleX(1);} }
.is-animeren .ph-over-fase-stip { animation: ph-in-vervagen .1s ease-out calc(.15s + var(--fase) * .75s) both paused;}
.is-animeren .ph-over-fase-streep { animation: ph-in-groeien .715s linear calc(.185s + var(--fase) * .75s) both paused;}
.is-animeren .ph-over-fase-kaart { animation: ph-in-omhoog .42s ease-out calc(.15s + var(--fase) * .75s) both paused;}
.is-animeren.is-in-beeld .ph-over-fase-stip, .is-animeren.is-in-beeld .ph-over-fase-streep, .is-animeren.is-in-beeld .ph-over-fase-kaart { animation-play-state: running;}

/* Beloftes licht (render_mk_beloftes(..., true), Figma 3455:60884): padding 80 0, witte gloed (1440×600, 30%)
   achter de kolommen; kaarten wit met rand 20%, padding 24, 12px tussen balk en tekst, 16px tussen de kaarten;
   uitgelicht donkergroen met witte tekst en een balk van 20% wit. */
.ph-mk-beloven.is-licht { position: relative; isolation: isolate; padding: 80px 0;}
.ph-mk-beloven.is-licht::before { content: ""; position: absolute; z-index: -1; top: 279px; left: 50%; width: 100vw; max-width: 1440px; height: 600px; transform: translateX(-50%); border-radius: 50%; background-color: rgba(var(--white-rgb), .3); filter: blur(100px); pointer-events: none;}
.ph-mk-beloven.is-licht h2 { color: var(--text-default);}
.ph-mk-beloven-intro { color: var(--text-secondary);}
.ph-mk-beloven.is-licht .ph-mk-beloven-grid { gap: 16px;}
.ph-mk-beloven.is-licht .ph-mk-beloven-set { gap: 16px; padding-bottom: 16px;}
.ph-mk-beloven.is-licht .ph-mk-belofte { gap: 12px; padding: 24px; border-color: var(--stroke-secondary); background-color: var(--bg-secondary); backdrop-filter: none; color: var(--text-default);}
.ph-mk-beloven.is-licht .ph-mk-belofte strong { font-weight: 600;}
.ph-mk-beloven.is-licht .ph-mk-belofte .text-gold { color: inherit;}
.ph-mk-beloven.is-licht .ph-mk-belofte-square, .ph-mk-beloven.is-licht .ph-mk-belofte-bar { background-color: var(--primary-20);}
.ph-mk-beloven.is-licht .ph-mk-belofte.is-highlight { border-color: var(--bg-inverse); background-color: var(--bg-inverse); color: var(--text-inverse);}
.ph-mk-beloven.is-licht .ph-mk-belofte.is-highlight .ph-mk-belofte-bar { background-color: var(--white-20);}

/* Carrousel in een raster (raster_carrousel_owl(): reviews hier en de blogkaarten): 3/2/1 kaarten met 24px
   ertussen; pijlen (24) links en rechts op de rij met bolletjes (8, 30%; actief 33 breed). */
.ph-raster-carrousel .owl-stage-outer { margin: -16px 0; padding: 16px 0;}
.ph-raster-carrousel .owl-stage { display: flex;}
.ph-raster-carrousel .owl-item { display: flex;}
.ph-raster-carrousel .owl-dots { height: 24px; margin-top: 16px;}
.ph-raster-carrousel .owl-nav { position: absolute; left: 8px; right: 8px; bottom: 0; justify-content: space-between; height: 24px; margin-top: 0; pointer-events: none;}
.ph-raster-carrousel .owl-nav button.owl-prev, .ph-raster-carrousel .owl-nav button.owl-next { width: 44px; height: 44px; margin: -10px; border: 0; pointer-events: auto; transition: opacity .3s ease-out;}
.ph-raster-carrousel .owl-nav button.owl-prev:hover, .ph-raster-carrousel .owl-nav button.owl-next:hover { background-color: transparent; opacity: .7;}
.ph-raster-carrousel button.owl-dot span { background-color: rgba(var(--primary-rgb), .3);}
.ph-raster-carrousel button.owl-dot.active span { width: 33px; background-color: var(--icon-default);}
/* Reviewkaarten (render_reviews(..., true)): schaduw 0 4 8; vervagen om de 0,2s in. */
.ph-reviews-raster .ph-review { flex: 1 1 auto; width: auto; box-shadow: var(--shadow-label);}
.ph-reviews-raster.is-animeren .owl-item .ph-review { animation: ph-in-vervagen .45s ease-out both paused;}
.ph-reviews-raster.is-animeren .owl-item:nth-child(2) .ph-review { animation-delay: .2s;}
.ph-reviews-raster.is-animeren .owl-item:nth-child(3) .ph-review { animation-delay: .4s;}
.ph-reviews-raster.is-animeren.is-in-beeld .owl-item .ph-review { animation-play-state: running;}

@media (prefers-reduced-motion: reduce) {
    .ph-raster-carrousel .owl-nav button.owl-prev, .ph-raster-carrousel .owl-nav button.owl-next { transition: none;}
}

@media (max-width: 991.98px) {
    /* Tijdlijn mobiel: de ruimte tussen de fases is een marge onder de kaart, zodat de streep doorloopt naar de volgende stip;
       de stip staat aan het begin van de fase (midden op 12px, ook de grotere actieve stip) */
    .ph-over-fases { flex-direction: column;}
    .ph-over-fase { flex-direction: row; gap: 16px;}
    .ph-over-fase-lijn { flex-direction: column; flex-shrink: 0; width: 24px; height: auto; padding-top: 4px;}
    .ph-over-fase-stip { margin: 0 0 -1px;}
    .ph-over-fase.is-actief .ph-over-fase-stip { margin: -4px 0 -1px;}
    .ph-over-fase-streep { width: 2px; margin-bottom: -5px; transform-origin: center top;}
    .ph-over-fase:last-child .ph-over-fase-streep { margin-bottom: 0;}
    .ph-over-fase-kaart, .ph-over-fase.is-actief .ph-over-fase-kaart { flex: 1 1 auto; height: auto; min-height: 0; margin: 0 0 16px;}
    .ph-over-fase:last-child .ph-over-fase-kaart { margin-bottom: 0;}
    .ph-over-fases::before { top: 0; height: 100%;}
    @keyframes ph-in-groeien { from { transform: scaleY(0);} to { transform: scaleY(1);} }
}

@media (max-width: 767.98px) {
    /* Figma mobiel (3987:56360): quote mark links van de kop en de eerste alinea, de kolommen eronder over de volle breedte */
    .ph-over-onderbouwing { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 24px 16px; padding: 48px 0;}
    .ph-over-onderbouwing-tekst { display: contents;}
    .ph-over-quote-teken { width: 30px; height: auto;}
    .ph-over-onderbouwing-kolommen { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr); gap: 16px;}
    .ph-over-standaard, .ph-mk-beloven.is-licht { padding: 48px 0;}
}
/* === 21. Stappenformulier — Waardebepaling en Mijn Huys toevoegen (render_stappen_kop/-knoppen, js/stappen.js) ===
   Figma "Waardebepaling" 2733:69077: kop (titel + gouden ondertitel, 8px ertussen) met de voortgangsbalk
   (stukken van 4px, 8px ertussen) 24px eronder; 40px onder de kop de kaart (wit, rand 20%, radius 16,
   padding 40, 24px tussen de velden) en 24px daaronder Vorige | Volgende (16px ertussen). Labels Label
   Default 500, 8px boven het veld; vraag Headline Large 500. */
.ph-stappen { display: flex; flex-direction: column; gap: 40px; flex: 0 0 549px; min-width: 0; padding-top: 44px;} /* Figma: verticaal gecentreerd naast de foto */
.ph-stappen-kop { display: flex; flex-direction: column; gap: 24px;}
.ph-stappen-titel { display: flex; flex-direction: column; gap: 8px;}
.ph-stappen-voortgang { display: flex; gap: 8px;}
.ph-stappen-voortgang span { flex: 1 1 0; height: 4px; border-radius: 999px; background-color: var(--primary-20); transition: background-color .3s ease-out;}
.ph-stappen-voortgang span.is-actief { background-color: var(--secondary);}
.ph-stappen-form { display: flex; flex-direction: column; gap: 24px;}
.ph-stappen-kaart { display: flex; flex-direction: column; gap: 24px; min-width: 0; margin: 0; padding: 40px; border: 1px solid var(--stroke-secondary); border-radius: var(--radius-md); background-color: var(--bg-secondary); box-shadow: var(--shadow-float);}
.ph-stappen-kaart[hidden] { display: none;}
.ph-stappen-vraag { display: flex; flex-direction: column; gap: 8px;}
.ph-stappen-vraag p { color: var(--text-secondary);}
.ph-stappen-vraag-titel { margin: 0; font-size: var(--headline-lg-size); line-height: var(--headline-lg-line); font-weight: 500; color: var(--text-default);}
.ph-stappen-subvraag { margin: 0; font-size: var(--headline-md-size); line-height: var(--headline-md-line); font-weight: 500; color: var(--text-default);}
.ph-stappen .ph-veld { gap: 8px;}
.ph-stappen .ph-veld > label, .ph-stappen .ph-veld-label { font-size: var(--label-default-size); line-height: var(--label-default-line);}
.ph-stappen-knoppen { display: flex; gap: 16px;}
.ph-stappen-knoppen .btn { flex: 1 1 0;}
/* Gegevens van de woning (Mijn Huys toevoegen, verkoophulp en waardebepaling, besluit 30-10-2026): verborgen tijdens het
   ophalen; het energielabel gecentreerd en ingevuld groen, zoals de tellers (.ph-hulp-teller) en de gekozen tegel. */
.ph-woning-gegevens { display: flex; flex-direction: column; gap: 24px;}
.ph-woning-gegevens select[name="energielabel"]:not(:has(option[value=""]:checked)) { background-color: var(--bg-subtle-02);}
.ph-woning-gegevens select[name="energielabel"] { text-indent: 32px; text-align: center; text-align-last: center;} /* gekozen energielabel gecentreerd zoals de tellers; 32px inspringen = midden tussen 16 links en 48 rechts (chevron). Geen extra padding: Chrome gebruikt die ook in de uitklaplijst */
.ph-woning-gegevens select[name="energielabel"] option { text-indent: 0; text-align: left; text-align-last: left;} /* de uitklaplijst zelf links */

/* Tegels (render_soort_woning_tegels): 3 kolommen, 80 hoog, radius 10, rand 50%; gekozen groen met donkere rand */
.ph-tegels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;}
.ph-tegel { position: relative; display: flex; margin: 0; cursor: pointer;}
.ph-tegel input, .ph-tegel-anders input { position: absolute; opacity: 0; pointer-events: none;}
/* Icoon van 24 boven de naam (Label Xsmall), 4px ertussen (Figma "Soort woning" 3511:36976) */
.ph-tegel span { display: flex; flex: 1 1 auto; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 80px; padding: 16px; border: 1px solid var(--stroke-default); border-radius: 10px; background-color: var(--bg-secondary); font-size: var(--label-xs-size); line-height: var(--label-xs-line); color: var(--text-secondary); text-align: center; transition: background-color .2s ease-out, border-color .2s ease-out;}
.ph-tegel:hover span { border-color: var(--primary);}
.ph-tegel input:checked + span { border-color: var(--primary); background-color: var(--bg-subtle-02); color: var(--text-default);}
.ph-tegel input:focus-visible + span, .ph-tegel-anders input:focus-visible + span { box-shadow: var(--shadow-focus);}
.ph-tegel-anders { position: relative; align-self: flex-start; margin: 0; cursor: pointer;}
.ph-tegel-anders span { font-size: var(--label-default-size); line-height: var(--label-default-line); font-weight: 500; color: var(--text-default);}
.ph-tegel-anders input:checked + span { text-decoration: underline;}

@media (max-width: 1199.98px) {
    .ph-stappen { flex-basis: 480px;}
}

@media (max-width: 991.98px) {
    .ph-stappen { flex-basis: auto; padding-top: 24px;}
}

@media (max-width: 575.98px) {
    .ph-stappen-kaart { padding: 24px;}
    .ph-tegels { grid-template-columns: repeat(2, minmax(0, 1fr));}
}
/* === 22. Pagina — Blog (Figma "Blogpagina" 3348:94071, content/blog.php, blog_artikelen()) ==============
   Kruimelpad, foto (520 hoog, radius 16), intro (label, Display Large, Headline Medium van 800), dan de blokken
   van 1200 breed met 40px boven en onder: tekst + foto (40px ertussen, foto even hoog als de tekst), tekst + CTA
   blok (405), gecentreerde tekst, citaat en het app-blok; onderaan "Wellicht ook interessant voor jou". */
.ph-blog { display: flex; flex-direction: column; padding-top: 16px;}
.ph-blog-hero { position: relative; height: 520px; margin-top: 24px; overflow: hidden; border-radius: var(--radius-md); background-color: var(--green-200);}
.ph-blog-hero img { position: absolute; top: -2.6%; left: 0; width: 100%; height: 123.6%; max-width: none; object-fit: cover;}
.ph-blog-intro { display: flex; flex-direction: column; gap: 16px; padding: 24px 0;}
.ph-blog-intro p { max-width: 800px; font-size: var(--headline-md-size); line-height: var(--headline-md-line); font-weight: 500; color: var(--text-secondary);}
.ph-blog-blok { width: 100%; max-width: 1200px; margin-inline: auto; padding: 40px 0;}
.ph-blog-blok-tekst-foto, .ph-blog-blok-foto-tekst, .ph-blog-blok-tekst-cta { display: flex; gap: 40px; align-items: stretch;}
.ph-blog-tekst { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px;}
.ph-blog-alineas { color: var(--text-secondary);}
.ph-blog-alineas p { margin: 0;}
.ph-blog-alineas p + p { margin-top: var(--body-default-line);} /* Figma: een lege regel tussen de alinea's */
.ph-blog-foto { position: relative; flex: 1 1 0; min-width: 0; min-height: 300px; overflow: hidden; border-radius: var(--radius-md); background-color: var(--green-200);}
.ph-blog-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;}
.ph-blog-blok-foto-tekst .ph-blog-foto { order: -1;}
.ph-blog-blok-tekst-cta { align-items: flex-start;}
.ph-blog-cta { flex: 0 0 405px; min-width: 0;}
.ph-blog-blok-midden .ph-blog-tekst { align-items: center; text-align: center;}
.ph-blog-blok-midden h2, .ph-blog-blok-midden .ph-blog-alineas { max-width: 800px;}

/* Citaat (Figma "Citaat verkoper"): witte kaart met rand 20%, padding 40; goud teken 28×40, 16px ernaast;
   tekst 32 smal schuin (Condensed SemiBold Italic), naam Body Default secundair */
.ph-citaat { display: flex; align-items: flex-start; gap: 16px; padding: 40px; border: 1px solid var(--stroke-secondary); border-radius: var(--radius-md); background-color: var(--bg-secondary);}
.ph-citaat img { flex-shrink: 0;}
.ph-citaat-tekst { font-family: var(--font-display); font-stretch: var(--font-display-stretch); font-size: 32px; line-height: normal; font-weight: var(--font-weight-display); font-style: italic; color: var(--text-default);}
.ph-citaat-naam { font-size: var(--body-default-size); line-height: var(--body-default-line); color: var(--text-secondary);}

/* App-blok (render_app_blok, Figma "download-app-cta" 3355:96531) */
.ph-app-blok { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; gap: 80px; padding: 40px 80px; border-radius: var(--radius-xl); background-color: var(--bg-inverse);}
.ph-app-blok-gloed { position: absolute; z-index: -1; top: -200px; left: -200px; max-width: none; transform: rotate(180deg); pointer-events: none;}
.ph-app-blok-beeld { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; height: 232px;}
.ph-app-blok-beeld img { flex-shrink: 0; width: 396px; height: 408px; max-width: none;}
.ph-app-blok-tekst { display: flex; flex-direction: column; gap: 40px; flex-shrink: 0;}
.ph-app-blok-tekst h2 { color: var(--text-inverse);}
.ph-app-blok-rij { display: flex; align-items: flex-start; gap: 40px;}
.ph-app-blok-voordelen { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none;}
.ph-app-blok-voordelen li { display: flex; align-items: center; gap: 8px; font-size: var(--body-default-size); line-height: var(--body-default-line); color: var(--text-inverse);}
.ph-app-blok-vinkje { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: var(--radius-xl); background-color: var(--text-accent-primary); color: var(--primary);}
.ph-app-blok-vinkje svg { width: 12px; height: 12px;}

/* Wellicht ook interessant (Figma "Frame 577"): padding 80 0 40, kop Display Small, kaarten in .ph-raster-carrousel */
.ph-blog-meer { display: flex; flex-direction: column; gap: 24px; padding: 80px 0 40px;}
.ph-blog-kaart { display: flex; flex: 1 1 auto; flex-direction: column; gap: 8px; overflow: hidden; border-radius: var(--radius-lg); background-color: var(--bg-secondary); box-shadow: var(--shadow-card);}
.ph-blog-kaart > img { display: block; width: 100%; height: 200px; object-fit: cover;}
.ph-blog-kaart-body { display: flex; flex: 1 1 auto; flex-direction: column; justify-content: space-between; gap: 24px; padding: 16px;}
.ph-blog-kaart-titel { font-size: var(--headline-md-size); line-height: var(--headline-md-line); font-weight: 500; color: var(--text-default);}
.ph-blog-kaart-tekst { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: var(--label-sm-size); line-height: 19px; font-weight: 500; color: var(--text-secondary);}

@media (max-width: 1199.98px) {
    .ph-app-blok { gap: 40px; padding: 40px;}
    .ph-app-blok-rij { flex-direction: column; gap: 24px;}
}

@media (max-width: 991.98px) {
    .ph-blog-blok-tekst-foto, .ph-blog-blok-foto-tekst, .ph-blog-blok-tekst-cta { flex-direction: column; gap: 24px;}
    .ph-blog-blok-foto-tekst .ph-blog-foto { order: 0;}
    .ph-blog-foto { flex: none; min-height: 280px;}
    .ph-blog-cta { flex: none; width: 100%; max-width: 405px;}
    .ph-app-blok { flex-direction: column; padding: 160px 24px 40px;}
    .ph-app-blok-beeld { flex: none; position: absolute; top: -160px; left: 50%; transform: translateX(-50%) scale(.7); transform-origin: top center;}
}

@media (max-width: 767.98px) {
    .ph-blog-hero { height: 280px;}
    .ph-blog-intro p { font-size: var(--body-lg-size); line-height: var(--body-lg-line);}
    .ph-blog-blok { padding: 24px 0;}
    .ph-citaat { flex-direction: column; padding: 24px;}
    .ph-citaat-tekst { font-size: 24px;}
}

/* === 23. Mijn Huys (Figma "Mijn Huys" 3335:30601; content/mijn-huys.php, content/mijn-huys-toevoegen.php) ===
   Toevoegen: het donkere Sneak Preview-paneel (sectie 13a) liggend links naast de stappen (sectie 21). Stap 2 (nog
   niet in Figma): adres en de gevonden gegevens als velden (.ph-woning-gegevens, sectie 21).
   Dashboard: zijpaneel van 400 en de inzichten (max. 840) met 40 ertussen; blokken zijn .ph-accountkaart.is-compact. */

.ph-mh-cta { flex: 0 1 651px; flex-direction: row; align-items: flex-end; gap: 40px; min-height: 420px; margin-top: 40px; overflow: visible; border-radius: var(--radius-xl);}
.ph-mh-cta .ph-sp-cta-tekst { flex: 1 1 0; align-self: flex-start; min-width: 0;}
.ph-mh-cta .ph-sp-melding { width: 362px; max-width: none;}
.ph-mh-cta-telefoon { position: relative; z-index: 2; align-self: stretch; flex: 1 1 0; min-width: 0;}
.ph-mh-cta-telefoon img { position: absolute; top: 50%; left: 50%; width: 472px; height: auto; max-width: none; transform: translate(-50%, -50%);}
.ph-leeg-staat-icoon.is-groen { border-radius: var(--radius-sm); background-color: var(--bg-subtle-02); color: var(--icon-secondary);}
/* Dashboard */
.ph-mh-raster { display: grid; grid-template-columns: 400px minmax(0, 840px); justify-content: center; align-items: start; gap: 40px;}
.ph-mh-zijpaneel { display: flex; flex-direction: column; gap: 40px;}
.ph-mh-inhoud { display: flex; flex-direction: column; gap: 40px; min-width: 0;}
/* Woning (Figma "CTA blok"): beeld van 180 (20% donkergroen) met label dat 4px uitsteekt, daaronder padding 16 en gap 24 */
.ph-mh-woning { border: 1px solid var(--stroke-secondary); border-radius: var(--radius-md); background-color: var(--bg-secondary);}
.ph-mh-woning-beeld { position: relative; display: flex; align-items: center; justify-content: center; height: 180px; padding: 8px; border-radius: 15px 15px 0 0; background-color: var(--primary-20);}
.ph-mh-woning-beeld img { height: 100%; width: auto;}
.ph-mh-woning-beeld.is-foto { padding: 0;}
.ph-mh-woning-beeld.is-foto img { width: 100%; object-fit: cover; border-radius: 15px 15px 0 0;}
.ph-mh-woning-beeld .card-woning-badge { z-index: 1; top: 12px; left: -4px;}
/* Deel je woning (Figma 3819:41207): tekst links, rechts drie gekantelde voorbeelden van de deelbeelden */
.ph-mh-deel { display: flex; overflow: hidden; border: 1px solid var(--primary); border-radius: var(--radius-md); background: linear-gradient(to right, var(--primary), var(--primary-600));}
.ph-mh-deel-tekst { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; flex: 0 1 384px; padding: 32px; color: var(--text-inverse-secondary);}
.ph-mh-deel-beelden { position: relative; flex: 1 1 0; min-width: 0;}
.ph-mh-deel-beelden img { position: absolute; box-shadow: var(--shadow-float);}
.ph-mh-deel-beelden .is-facebook { top: 23px; left: 171px; transform: rotate(5.15deg);}
.ph-mh-deel-beelden .is-whatsapp { top: 52px; left: 42px; transform: rotate(-11.24deg);}
.ph-mh-deel-beelden .is-story { top: 77px; left: 269px; transform: rotate(15deg);}
/* Woning in 3D (js/woning-3d.js): canvas over het hele vak; met model (.is-3d) de illustratie of pin weg */
.ph-woning-3d-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border-radius: inherit; cursor: grab; touch-action: pan-y;}
.ph-woning-3d-canvas:active { cursor: grabbing;}
.ph-woning-3d-canvas:focus-visible { outline: none; box-shadow: var(--shadow-focus);}
.ph-woning-3d.is-3d > img, .ph-woning-3d.is-3d > .ph-buurt-pin, .ph-woning-3d.is-laden > img, .ph-woning-3d.is-laden > .ph-buurt-pin { display: none;}
/* Het placeholder-logo heeft d-flex (display: flex !important), dus alleen met !important weg (anders schijnt het door het model heen, /verkopen) */
.ph-woning-3d.is-3d > .card-photo-placeholder, .ph-woning-3d.is-laden > .card-photo-placeholder { display: none !important;}
/* Tijdens het laden het PH-logo (sectie 3) midden in het vak; pas na 150 ms zichtbaar (ph-tonen), zodat een snel model niet flitst */
.ph-woning-3d.is-laden::after { position: absolute; inset: 0; z-index: 1; margin: auto; animation: ph-puls 1.6s ease-in-out infinite, ph-tonen 0s .15s both;}
/* Eigen woning op Verkopers: het 3D-vak met de achtergrond en hoeken van de foto, ook leeg tijdens het laden; label boven het model */
.ph-eigen-woning .card-photo-wrap.ph-woning-3d { min-height: 200px; border-radius: var(--radius-sm); background-color: var(--primary-20);}
.ph-eigen-woning .ph-woning-3d .card-woning-badge { z-index: 1;}

.card-woning-badge-status-niet-te-koop, .card-woning-badge-status-niet-in-de-verkoop { --badge-bg: var(--primary); color: var(--white);}
.ph-mh-woning-body { display: flex; flex-direction: column; gap: 24px; padding: 16px;}
.ph-mh-woning-adres { margin: 0; font-size: var(--headline-md-size); line-height: var(--headline-md-line); font-weight: 500; color: var(--text-default);}
.ph-mh-woning-plaats { margin: 0; font-size: var(--body-sm-size); line-height: var(--body-sm-line); color: var(--text-secondary);}
/* Iconen + waarde (Figma 3335:45980): 16 tussen de kenmerken, 4 tussen icoon (20) en waarde; daaronder soort, staat en bouwjaar */
.ph-mh-woning-kenmerken { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; font-size: var(--body-sm-size); line-height: var(--body-sm-line); color: var(--text-secondary);}
.ph-mh-woning-kenmerken span { display: inline-flex; align-items: center; gap: 4px;}
.ph-mh-woning-kenmerken svg { flex-shrink: 0; width: 20px; height: 20px;}
.ph-mh-woning-extra { font-size: var(--body-sm-size); line-height: var(--body-sm-line); color: var(--text-secondary);}
/* "Denk je aan verkopen?": groen tabje dat 16px onder het donkere blok doorloopt; blok met gouden gloed, padding 40 */
.ph-mh-verkopen { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-md); background-color: var(--bg-inverse);}
.ph-mh-verkopen-tab { margin-bottom: -16px; padding: 24px 24px 40px; border: 1px solid var(--stroke-secondary); border-radius: var(--radius-md) var(--radius-md) 0 0; background-color: var(--green-500); font-size: var(--headline-md-size); line-height: var(--headline-md-line); font-weight: 500; color: var(--text-default);}
/* Donker blok met gouden gloed (Figma "Consument | Woning bereik"): padding 40, gap 16; ook de zijbalk van de casuspagina */
.ph-donker-blok { position: relative; display: flex; flex-direction: column; gap: 16px; overflow: hidden; padding: 40px; border-radius: var(--radius-md); background-color: var(--bg-inverse); color: var(--text-inverse);}
.ph-donker-blok > :not(.ph-donker-blok-gloed) { position: relative;}
.ph-donker-blok-gloed { position: absolute; top: 50%; left: 50%; width: 800px; max-width: none; transform: translate(-50%, -50%); pointer-events: none;}
/* Blokkop (Display Small + ondertitel), bedrag (Display Regular) met stijging, bandbreedte Headline Medium */
.ph-mh-kop { display: flex; flex-direction: column; gap: 8px;}
.ph-mh-kop p { margin: 0; color: var(--text-secondary);}
.ph-mh-kop p.ph-mh-ondertitel { font-size: var(--headline-sm-size); line-height: var(--headline-sm-line); font-weight: 500;}
.ph-mh-waarde { display: flex; flex-wrap: wrap; align-items: center; column-gap: 24px; row-gap: 8px;}
.ph-mh-bandbreedte { margin: 0; font-size: var(--headline-md-size); line-height: var(--headline-md-line); font-weight: 500; color: var(--text-secondary);}
.ph-mh-trends { gap: 32px;}
.ph-mh-trend-tekst { font-size: var(--headline-md-size); line-height: var(--headline-md-line); font-weight: 500; color: var(--text-default);}
/* Figma "omhoog/omlaag": groen-500, radius 8, padding 8/16, chevron 24 en Input 16 SemiBold; omlaag lichtroze */
.ph-mh-verschil { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: var(--radius-sm); background-color: var(--green-500); font-size: var(--input-font-size); line-height: var(--label-default-line); font-weight: 600; color: var(--text-default);}
.ph-mh-verschil svg { width: 24px; height: 24px; transform: rotate(180deg);}
.ph-mh-verschil.is-omlaag { background-color: var(--bg-subtle-01);}
.ph-mh-verschil.is-omlaag svg { transform: none;}
/* Grafiek (render_mh_grafiek): rijen van 13 hoog met 24 ertussen; label Label Default secundair, lijn 20%. Het vlak loopt van
   het midden van de eerste tot het midden van de laatste rij en van achter de labels tot 64px van rechts. */
.ph-mh-grafiek { position: relative; display: flex; flex-direction: column; gap: 24px; padding: 0 24px;}
.ph-mh-verloop stop { stop-color: var(--green-500);}
.ph-mh-grafiek-rij { display: flex; align-items: center; gap: 16px; height: 13px; font-size: var(--label-default-size); line-height: 13px; color: var(--text-secondary); white-space: nowrap;}
.ph-mh-grafiek-rij span { flex: 0 0 var(--label);}
.ph-mh-grafiek-rij::after { content: ""; flex: 1 1 auto; border-top: 1px solid var(--stroke-secondary);}
.ph-mh-grafiek-vlak { position: absolute; z-index: 1; top: 6.5px; left: calc(24px + var(--label) + 16px); right: 64px; height: calc(var(--rijen) * 37px); overflow: visible;}
svg.ph-mh-grafiek-vlak { width: calc(100% - 104px - var(--label));}
.ph-mh-band-buiten { fill: var(--green-200);}
.ph-mh-band-binnen { fill: var(--green-500);}
.ph-mh-lijn, .ph-mh-trend { fill: none; stroke-width: 2px;}
.ph-mh-lijn { stroke: var(--green-700);}
.ph-mh-trend { stroke: var(--primary); stroke-dasharray: 6 6;}
.ph-mh-punt { position: absolute; width: 16px; height: 16px; border: 2px solid var(--primary-600); border-radius: 50%; background-color: var(--white); transform: translate(-50%, -50%);}
.ph-mh-grafiek-x { position: relative; height: 13px; margin: 0 40px 0 calc(var(--label) + 16px); font-size: var(--label-default-size); line-height: 13px; color: var(--text-secondary);}
.ph-mh-grafiek-x span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap;}
/* Vergelijk (Figma "Tabel"): kolom van 144 per woning met foto van 85 (radius 8); rijen 40 met een lijn van 20% */
.ph-mh-tabel-wrap { overflow-x: auto;}
.ph-mh-tabel { width: 100%; min-width: 640px; border-collapse: collapse; font-size: var(--body-default-size); line-height: var(--body-default-line); color: var(--text-secondary);}
.ph-mh-tabel thead th { width: 168px; padding: 0 24px 8px 0; font-weight: 500; color: var(--text-default); text-align: center; vertical-align: bottom;}
.ph-mh-tabel thead th span { display: block; margin-bottom: 8px;}
.ph-mh-tabel thead img { display: block; width: 144px; height: 85px; object-fit: cover; border-radius: var(--radius-sm);}
/* Jouw woning in 3D (zelfde maat als de foto's ernaast) */
.ph-mh-tabel-3d { position: relative; width: 144px; height: 85px; border-radius: var(--radius-sm); background-color: var(--primary-20);}
.ph-mh-tabel tbody th { padding: 8px 16px 8px 0; font-weight: 500; color: var(--text-default); text-align: left;}
.ph-mh-tabel tbody td { padding: 8px 24px 8px 0;}
.ph-mh-tabel tbody tr { border-top: 1px solid var(--stroke-secondary);}
.ph-mh-tabel.is-woz { min-width: 0;}
.ph-mh-tabel.is-woz thead th { width: auto; text-align: left;}
.ph-mh-mutatie { font-weight: 600; color: var(--green-700);}
.ph-mh-mutatie.is-omlaag { color: var(--error-600);}
/* Label (Figma "omhoog/omlaag" klein): lichtgroen, radius 8, padding 4/8, Label Small 500; onder 50% lichtroze */
.ph-mh-label { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: var(--radius-sm); background-color: var(--bg-subtle-02); font-size: var(--label-sm-size); line-height: var(--label-sm-line); font-weight: 500; color: var(--text-secondary);}
.ph-mh-label.is-roze { background-color: var(--bg-subtle-01); color: var(--text-accent-01-dark);}
/* Verkoopstrategie: kaart van 240, twee schuifregelaars (baan 8, twee bolletjes van 24 met rand 4, donker ertussen) en de
   woningen in de prijsrange. De twee invoervelden liggen op elkaar; alleen de bolletjes vangen de muis. --van en --tot
   (0 tot 1, gezet door het script in content/mijn-huys.php) lopen over de baan min de breedte van een bolletje. */
.ph-mh-strategie-kaart { height: 240px;}
.ph-mh-schuiven { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px;}
.ph-mh-schuif { display: flex; flex-direction: column; gap: 16px;}
.ph-mh-schuif .ph-mh-label { padding: 8px 16px; font-size: var(--input-font-size); font-weight: 600; color: var(--text-secondary);}
.ph-mh-schuif-baan { --van: 0; --tot: 1; position: relative; height: 24px; background: linear-gradient(var(--stroke-secondary), var(--stroke-secondary)) center / 100% 8px no-repeat;}
.ph-mh-schuif-baan::before { content: ""; position: absolute; top: 8px; left: calc(12px + (100% - 24px) * var(--van)); width: calc((100% - 24px) * (var(--tot) - var(--van))); height: 8px; border-radius: 4px; background-color: var(--primary);}
.ph-mh-schuif-invoer { position: absolute; inset: 0; z-index: 1; width: 100%; height: 24px; margin: 0; appearance: none; background: none; pointer-events: none;}
.ph-mh-schuif-invoer.is-boven { z-index: 2;}
.ph-mh-schuif-invoer::-webkit-slider-thumb { box-sizing: border-box; width: 24px; height: 24px; appearance: none; border: 4px solid var(--primary); border-radius: 50%; background-color: var(--white); cursor: pointer; pointer-events: auto;}
.ph-mh-schuif-invoer::-moz-range-thumb { box-sizing: border-box; width: 24px; height: 24px; border: 4px solid var(--primary); border-radius: 50%; background-color: var(--white); cursor: pointer; pointer-events: auto;}
.ph-mh-schuif-invoer:focus-visible { outline: none;}
.ph-mh-schuif-invoer:focus-visible::-webkit-slider-thumb { box-shadow: var(--shadow-focus);}
.ph-mh-schuif-invoer:focus-visible::-moz-range-thumb { box-shadow: var(--shadow-focus);}
.ph-mh-schuif-einden { display: flex; justify-content: space-between; margin-top: -8px; font-size: var(--body-sm-size); line-height: var(--body-sm-line); color: var(--text-secondary); opacity: .6;}
.ph-mh-prijsrange { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none;}
.ph-mh-prijsrange li { display: flex; align-items: center; gap: 16px; padding: 16px 8px; border-top: 1px solid var(--stroke-secondary);}
.ph-mh-prijsrange li:first-child { border-top: 0;}
.ph-mh-prijsrange img { flex-shrink: 0; width: 110px; height: 73px; object-fit: cover; border-radius: var(--radius-xs);}
.ph-mh-prijsrange-tekst { display: flex; flex-direction: column; gap: 8px; min-width: 0;}
.ph-mh-prijsrange-adres { font-size: var(--headline-sm-size); line-height: var(--headline-sm-line); font-weight: 500; color: var(--text-default);}
.ph-mh-prijsrange-cijfers { display: flex; flex-wrap: wrap; column-gap: 24px; row-gap: 8px; margin: 0; font-size: var(--body-default-size); line-height: 18px; color: var(--text-secondary);}
.ph-mh-prijsrange-cijfers dt { font-weight: var(--font-weight-body);}
.ph-mh-prijsrange-cijfers dd { margin: 0;}
/* Powerhuys statistieken: het bereikpaneel (sectie 17) met logo-vlak van 64 en Views naast het grote getal */
.ph-mh-statistieken { flex: none; border-radius: var(--radius-md);}
.ph-mh-statistieken-kop { display: flex; align-items: center; gap: 16px;}
.ph-mh-statistieken-kop p { color: var(--text-inverse-secondary);}
.ph-mh-statistieken-logo { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 64px; height: 64px; border-radius: var(--radius-xs); background-color: var(--white);}
.ph-mh-inhoud .ph-vergelijkbaar-grid { grid-template-columns: repeat(3, minmax(0, 1fr));}

@media (max-width: 1199.98px) {
    .ph-mh-raster { grid-template-columns: minmax(0, 1fr);}
    .ph-mh-zijpaneel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px;}
    .ph-mh-cta { display: none;}
}

@media (max-width: 991.98px) {
    .ph-mh-inhoud .ph-vergelijkbaar-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));}
}

@media (max-width: 767.98px) {
    .ph-mh-zijpaneel { grid-template-columns: minmax(0, 1fr);}
    .ph-mh-schuiven { grid-template-columns: minmax(0, 1fr); gap: 24px;}
    .ph-mh-grafiek { padding: 0;}
    .ph-mh-grafiek-vlak { left: calc(var(--label) + 16px); right: 40px;}
    svg.ph-mh-grafiek-vlak { width: calc(100% - 56px - var(--label));}
    .ph-donker-blok { padding: 24px;}
}

@media (max-width: 575.98px) {
    .ph-mh-grafiek-rij span { flex-basis: var(--label-smal, var(--label));}
    .ph-mh-grafiek-vlak { left: calc(var(--label-smal, var(--label)) + 16px);}
    svg.ph-mh-grafiek-vlak { width: calc(100% - 56px - var(--label-smal, var(--label)));}
    .ph-mh-grafiek-x { margin-left: calc(var(--label-smal, var(--label)) + 16px);}
    .ph-mh-grafiek-x span:nth-child(even), .ph-mh-grafiek-eenheid { display: none;}
}

/* === 24. App — kop en onderbalk (IsApp; inc/header.php, inc/app-navigatie.php) ===
   Figma "Mobile app | PowerHuys" (node 2291-34238): scherm met 120 ruimte onder voor de onderbalk, bovenaan
   alleen het logo (scrolt mee). Onderbalk: vijf tabs, actief vet met een roze streep; Start is het PH-beeldmerk
   in een groen vlak. Maten van logo en onderbalk afgelezen uit de mockup (nog geen Dev Mode-waarden). */
.ph-app { --header-links-height: 0px; --header-height: calc(66px + env(safe-area-inset-top, 0px)); padding-bottom: calc(var(--padding-large-400) + env(safe-area-inset-bottom, 0px));}
.ph-header-app { position: relative; z-index: 1030; display: flex; justify-content: center; padding: calc(var(--padding-small-400) + env(safe-area-inset-top, 0px)) var(--padding-small-400) var(--padding-small-400);}
.ph-header-app img { display: block; width: 134px; height: 34px;}
.ph-app-nav { position: fixed; right: var(--padding-small-400); bottom: calc(8px + env(safe-area-inset-bottom, 0px)); left: var(--padding-small-400); z-index: 1030; display: flex; padding: 8px 4px 0; border-radius: var(--radius-md); background-color: var(--bg-secondary); box-shadow: var(--shadow-float);}
.ph-app-nav-tab { position: relative; display: flex; flex: 1 1 0; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding-bottom: 10px; font-size: 12px; line-height: 16px; color: var(--text-default); text-decoration: none;}
.ph-app-nav-tab svg { width: 24px; height: 24px;}
.ph-app-nav-tab.is-actief { font-weight: 600;}
.ph-app-nav-tab.is-actief::after { content: ""; position: absolute; right: 4px; bottom: 0; left: 4px; height: 3px; border-radius: 3px 3px 0 0; background-color: var(--pink-500);}
.ph-app-nav-start { display: flex; justify-content: center; align-items: center; width: 24px; height: 24px; border-radius: var(--radius-xs); background-color: var(--primary);}
.ph-app-nav-start svg { width: 12px; height: 16px;}
/* Accountpagina's in de app: geen zijmenu maar het account-overzicht (content/account-overzicht.php) met alleen het
   menu; elke pagina krijgt de app-kop (render_account_kop()): terugknop 48x48 links, titel gecentreerd. Met app-kop geen logo. */
.ph-app:has(.ph-app-kop) .ph-header-app { display: none;}
.ph-app .ph-accountpagina { grid-template-columns: minmax(0, 1fr);}
.ph-app .ph-accountpagina > .ph-accountmenu { display: none;}
.ph-app-overzicht { display: flex; flex-direction: column; gap: 24px; padding: 24px 16px 0;}
.ph-app-overzicht .ph-accountmenu { display: flex;}
.ph-app-kop { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; padding-top: env(safe-area-inset-top, 0px);}
.ph-app-kop-tekst { grid-column: 2; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; text-align: center;}
.ph-app-kop-tekst p { color: var(--text-secondary);}
.ph-app-terug { display: flex; justify-content: center; align-items: center; width: 48px; height: 48px; border-radius: var(--radius-sm); background-color: var(--bg-secondary); box-shadow: var(--shadow-float); color: var(--icon-default);}
.ph-app-terug svg { width: 24px; height: 24px;}

/* === 25. Tekstpagina — Privacyverklaring (Figma "Privacyverklaring" 3576:28376, content/privacyverklaring.php) ===
   Hero 400 hoog met patroon (.ph-pattern-bg, sectie 1) en de titel (720 breed, gecentreerd). Daaronder blokken van
   800 breed, 40 boven en onder (het laatste 80 onder): inleiding in Headline Medium met een gouden gloed (1076x648)
   erachter, daarna per artikel label, kop (Display Regular) en tekst (Body), 16 ertussen. */
.ph-tekstpagina-hero { display: flex; align-items: center; justify-content: center; min-height: calc(400px + var(--header-height)); padding-inline: 24px;}
.ph-tekstpagina-hero h1 { max-width: 720px; padding-inline: 40px; color: var(--text-default);}
.ph-tekstpagina-hero-breed h1 { max-width: 1054px;} /* Gebruikersvoorwaarden: titel 974 breed + 2x 40 */
.ph-tekstpagina-blok { position: relative; display: flex; flex-direction: column; gap: 16px; max-width: 800px; margin: 0 auto; padding-block: 40px; overflow-wrap: break-word; color: var(--text-secondary);}
.ph-tekstpagina-blok:last-child { padding-bottom: 80px;}
.ph-tekstpagina-blok h2 { color: var(--text-default);}
.ph-tekstpagina-blok p { margin: 0;}
.ph-tekstpagina-blok a { color: inherit; text-decoration: underline;}
.ph-tekstpagina-blok a:hover { color: var(--text-default);}
.ph-tekstpagina-tekst { display: flex; flex-direction: column; gap: var(--body-default-line);}
.ph-tekstpagina-inleiding { isolation: isolate; gap: var(--headline-md-line);}
.ph-tekstpagina-inleiding p { font-size: var(--headline-md-size); line-height: var(--headline-md-line); font-weight: var(--font-weight-headline);}
.ph-tekstpagina-inleiding::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: min(1076px, 100vw); height: 648px; transform: translate(-50%, -50%); border-radius: 50%; background-color: rgba(var(--secondary-rgb), .2); filter: blur(150px); pointer-events: none;}

@media (max-width: 767.98px) {
    .ph-tekstpagina-hero { min-height: 0; padding: calc(var(--header-height) + 80px) 0 40px;}
    .ph-tekstpagina-hero h1 { padding-inline: 0;}
    .ph-tekstpagina-blok { padding-block: 24px;}
    .ph-tekstpagina-blok:last-child { padding-bottom: 56px;}
}

/* 404 (Figma "404 pagina" 3648:38443, content/404.php): patroon (.ph-pattern-bg, sectie 1) zonder gouden gloed;
   inhoud 800 breed, gecentreerd, 80 rondom en 40 tussen cijfer, tekst en knoppen, minstens 600 hoog. */
.ph-404::after { content: none;}
.ph-404-inhoud { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px; max-width: 800px; min-height: 600px; margin: 0 auto; padding: 80px 0; color: var(--text-secondary);}
.ph-404-inhoud h1 { color: var(--text-default);}
.ph-404-cijfer { font-family: var(--font-display); font-stretch: var(--font-display-stretch); font-weight: var(--font-weight-display); font-size: var(--display-404-size); line-height: 1;}

@media (max-width: 767.98px) {
    .ph-404-inhoud { min-height: 0; padding: 56px 0; gap: 24px;}
}

/* === 26. (Ver)koophulp (Figma-sectie "(Ver)koophulp" 3208:24071, content/verkoophulp.php) ===
   Opmaak van het stappenformulier (sectie 21) in .ph-auth (sectie 11). Startpagina: kaart "Ik wil een woning..."
   met twee keuzes (rand, radius 16, padding 8 16 8 8; icoonvlak 64, radius 8). Stromen (.ph-hulp): formulier 600
   en het paneel 600 (wit, radius 24, padding 28 24 24, 20 ertussen) met drie inzichtkaarten (radius 16, padding 24,
   verloop per kleur, pil radius 999 padding 8 12) en eronder de voetnoot. Teller: veld met − en + (48 hoog, groen vlak). */
.ph-hulp-keuzes { display: flex; gap: 24px;}
.ph-hulp-keuze { display: flex; flex: 1 1 0; align-items: center; gap: 16px; min-width: 0; padding: 8px 16px 8px 8px; border: 1px solid var(--stroke-secondary); border-radius: var(--radius-md); background-color: var(--bg-secondary); font-size: var(--label-default-size); line-height: var(--label-default-line); font-weight: var(--font-weight-label); color: var(--text-default); text-decoration: none; transition: border-color .2s ease-out;}
.ph-hulp-keuze:hover { border-color: var(--stroke-default); color: var(--text-default);}
.ph-hulp-keuze:focus-visible { outline: none; box-shadow: var(--shadow-focus);}
.ph-hulp-keuze-icoon { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: var(--radius-sm); color: var(--icon-inverse);}
.ph-hulp-keuze-icoon.is-verkopen { background-color: var(--bg-inverse-tertiary);}
.ph-hulp-keuze-icoon.is-kopen { background-color: var(--bg-inverse);}
.ph-hulp-keuze-tekst { flex: 1 1 auto; min-width: 0;}
.ph-hulp .ph-stappen { flex-basis: 600px;}
.ph-hulp-zijkant { display: flex; flex-direction: column; gap: 16px; flex: 0 1 600px; min-width: 0; padding-top: 44px;}
.ph-hulp-paneel { display: flex; flex-direction: column; gap: 20px; padding: 28px 24px 24px; border-radius: var(--radius-lg); background-color: var(--bg-secondary); box-shadow: var(--shadow-paneel);}
.ph-hulp-paneel-kop { display: flex; flex-direction: column; gap: 4px; color: var(--text-default);}
.ph-hulp-paneel-kop [hidden], .ph-hulp-pil[hidden] { display: none;}
.ph-hulp-kaart { display: flex; flex-direction: column; gap: 24px; padding: 24px; border-radius: var(--radius-md); background-color: var(--bg-secondary);}
.ph-hulp-kaart.is-goud { background-image: linear-gradient(180deg, rgba(var(--secondary-rgb), .08) 0%, rgba(var(--secondary-rgb), .16) 100%);}
.ph-hulp-kaart.is-roze { background-image: linear-gradient(180deg, rgba(var(--pink-500-rgb), .06) 0%, rgba(var(--pink-500-rgb), .12) 100%);}
.ph-hulp-kaart.is-groen { background-image: linear-gradient(180deg, color-mix(in srgb, var(--bg-subtle-02) 50%, var(--bg-secondary)) 0%, var(--bg-subtle-02) 100%);}
.ph-hulp-kaart-kop { display: flex; align-items: center; gap: 8px; font-size: var(--label-default-size); line-height: var(--label-default-line); font-weight: var(--font-weight-label); color: var(--text-default);}
.ph-hulp-kaart-icoon { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 24px; height: 24px;}
.is-goud .ph-hulp-kaart-icoon { color: var(--secondary);}
.is-roze .ph-hulp-kaart-icoon { color: var(--pink-500);}
.is-groen .ph-hulp-kaart-icoon, .ph-hulp-staafjes { color: var(--green-500);}
.ph-hulp-kaart-inhoud { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;}
.ph-hulp-kaart-waarde { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0;}
.ph-hulp-kaart-waarde > div { display: flex; flex-direction: column; gap: 2px;}
.ph-hulp-kaart-waarde .text-display-sm { color: var(--text-default);}
.ph-hulp-kaart-label { color: var(--text-secondary);}
.ph-hulp-pil { display: inline-flex; align-items: center; padding: 8px 12px; border-radius: 999px; white-space: nowrap;}
.is-goud .ph-hulp-pil { background-color: var(--secondary); color: var(--text-inverse);}
.is-roze .ph-hulp-pil { background-color: var(--pink-500); color: var(--text-inverse);}
.is-groen .ph-hulp-pil { background-color: var(--bg-accent-02); color: var(--text-default);}
.ph-hulp-ring, .ph-hulp-staafjes { display: flex; flex-shrink: 0;}
.is-goud .ph-hulp-ring-baan { stroke: rgba(var(--secondary-rgb), .2);}
.is-goud .ph-hulp-ring-boog { stroke: var(--secondary);}
.is-roze .ph-hulp-ring-baan { stroke: rgba(var(--pink-500-rgb), .2);}
.is-roze .ph-hulp-ring-boog { stroke: var(--pink-500);}
.ph-hulp-teller { display: flex; align-items: center; gap: 8px; height: var(--input-height); padding: 8px var(--input-padding-h); border: 1px solid var(--stroke-default); border-radius: var(--radius-sm); background-color: var(--bg-subtle-02);}
.ph-hulp-teller:focus-within { box-shadow: var(--shadow-focus);}
.ph-hulp-teller .form-control { flex: 1 1 auto; min-width: 0; height: auto; padding: 0; border: 0; background: none; box-shadow: none; text-align: center; appearance: textfield;}
.ph-hulp-teller .form-control::-webkit-inner-spin-button, .ph-hulp-teller .form-control::-webkit-outer-spin-button { margin: 0; appearance: none;}
.ph-hulp-teller-knop { display: flex; flex-shrink: 0; padding: 0; border: 0; background: none; color: var(--icon-default);}
.ph-hulp-teller:has(input:placeholder-shown) { background-color: var(--bs-body-bg);} /* leeg wit, ingevuld groen (besluit 30-10-2026) */
.ph-hulp-melding { padding: 24px; border-radius: var(--radius-md); background-color: var(--bg-subtle-02); color: var(--text-default);}
/* Vrijblijvend hypotheekadvies (Figma 3648:30148, content/hypotheekadvies.php): Opslaan rechts op de halve breedte, zonder Vorige */
.ph-hypotheek .ph-stappen-knoppen .btn { flex: 0 1 calc(50% - 8px);}
/* Gespiegeld ten opzichte van inloggen: formulier links, foto rechts (Figma 3648:30148) */
.ph-hypotheek .ph-auth-visual { order: 1;}

@media (max-width: 991.98px) {
    .ph-auth-inner.ph-hulp { flex-direction: column;}
    .ph-hulp .ph-stappen, .ph-hulp-zijkant { flex-basis: auto; padding-top: 0;}
}

@media (max-width: 575.98px) {
    .ph-hulp-keuzes { flex-direction: column;}
    .ph-hulp-kaart-inhoud { align-items: flex-start;}
    .ph-hulp-pil { white-space: normal;}
}
/* Koophulp (sectie 26): keuzes als chips bovenaan het paneel (Figma: groen, radius 4), en lagere staafjes boven de prijsslider */
.ph-hulp-chips { display: flex; flex-wrap: wrap; gap: 8px;}
.ph-hulp-chips:empty { display: none;}
.ph-hulp-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--radius-xs); background-color: var(--bg-accent-02); font-size: var(--body-sm-size); line-height: var(--body-sm-line); color: var(--text-default);}
.ph-hulp-chip-weg { display: inline-flex; padding: 0; border: 0; background: none; color: inherit; cursor: pointer;}
.ph-hulp-chip-weg svg { width: 10px; height: 10px;}
.ph-hulp .ph-sp-staafjes { height: 120px;}
/* Blogoverzicht /blog (content/blog-overzicht.php, fase I; geen Figma-ontwerp): blogkaarten (sectie 22) in drie kolommen,
   breedte en tussenruimte zoals de carrousel onder een artikel (24) */
.ph-blog-overzicht { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: 1280px; margin: 0 auto; padding: 40px 0 80px;}
@media (max-width: 991.98px) {
    .ph-blog-overzicht { grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media (max-width: 575.98px) {
    .ph-blog-overzicht { grid-template-columns: minmax(0, 1fr);}
}

/* === 27. Deelpagina — Woning delen op social media (Figma "Social media share | Powerhuys": "Share | Consument"
   22:13655 en "Modal | Bekijk ..." 38:20317 e.v.; content/mijn-huys/social-media-share.php, js/delen.js) ===
   Header erboven (niet in Figma; de eigen kopregel met adres is weggelaten); patroon achter header en hero (.ph-pattern-bg
   zonder gouden gloed). De voorbeeldberichten zijn nagemaakte posts met het echte deelbeeld (inc/delen.php). */

.ph-deel-boven::after { content: none;}
.ph-deel-sluiten { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 24px; height: 24px; padding: 5px; border: 0; background: transparent; color: var(--icon-default);}
.ph-deel-sluiten svg { width: 100%; height: 100%;}


/* Hero (Figma "Hero"): 680 hoog, items onderaan, padding-bottom 24, 80 tussen tekst en beeld */
.ph-deel-hero { display: flex; align-items: flex-end; gap: 80px; height: 680px; padding-bottom: 24px;}
.ph-deel-hero-tekst { display: flex; flex: 1 1 0; flex-direction: column; justify-content: center; align-self: stretch; gap: 40px; min-width: 0;}
.ph-deel-hero-tekst p { font-size: var(--body-default-size); line-height: var(--body-default-line); color: var(--text-secondary);}
.ph-deel-hero-knoppen { display: flex; flex-wrap: wrap; gap: 16px;}
.ph-deel-hero-knoppen .btn-outline-primary { --bs-btn-bg: var(--bg-default);}
.ph-deel-hero-beeld { position: relative; display: flex; flex: 1 1 0; align-items: center; justify-content: center; align-self: stretch; min-width: 0;}
/* Woningkaart (render_woning_kaart) 462 breed = 1,283× de gewone kaart, 5,21° gekanteld; zonder hartje */
.ph-deel-hero-kaart { width: 360px; transform: rotate(5.21deg) scale(1.2833);}
.ph-deel-hero-kaart .card-favorite { display: none;}
/* Stempel (ph_stempel): 200×200, -1,61°, Zalando Sans Bold breedte 75, 34px; animatie van .ph-mk-sticker */
.ph-deel-stempel { top: 19px; right: -40px; width: 206px; height: 206px;}
.ph-deel-stempel .ph-mk-sticker-inner { transform: rotate(-1.61deg); font-family: var(--font-primary); font-stretch: var(--font-display-stretch); font-weight: var(--font-weight-bold); font-size: 34px;}

/* Waarom delen werkt (Figma 38:14007): donkergroen, radius 24; titel 483 breed met gloed, daarnaast de stappen
   (glaskaarten 320 breed) als Owl-carrousel (verslepen, geen pijlen of bolletjes) die onder een wazige rand van
   de titel verdwijnen; de stage krijgt 16px extra ruimte voor de schaduw van de kaarten */
.ph-deel-waarom { position: relative; display: flex; gap: 24px; overflow: hidden; border-radius: var(--radius-lg); background-color: var(--bg-inverse);}
.ph-deel-waarom-titel { position: relative; z-index: 2; display: flex; flex: 0 0 483px; flex-direction: column; justify-content: center; gap: 8px; padding: 40px 40px 40px 64px; background-color: var(--bg-inverse); clip-path: inset(0 -40px 0 0);}
.ph-deel-waarom-titel::after { content: ""; position: absolute; top: 0; bottom: 0; left: calc(100% - 5px); width: 26px; background-color: var(--bg-inverse); filter: blur(7.5px);}
.ph-deel-waarom-titel > :not(.ph-mk-glow) { position: relative; z-index: 1;}
.ph-deel-waarom-titel .ph-mk-glow { left: calc(50% - 70px);}
.ph-deel-waarom-titel p { font-size: var(--body-default-size); line-height: var(--body-default-line);}
.ph-deel-waarom-stappen { flex: 1 1 auto; min-width: 0; padding: 24px 0;}
.ph-deel-waarom-stappen .owl-stage-outer { padding: 16px 0;}
.ph-deel-waarom-stappen .ph-deel-reden .ph-mk-glow { width: 721px;}
.ph-deel-reden { width: 320px; gap: 16px; padding: 24px; box-shadow: var(--shadow-card); cursor: grab;}
.ph-deel-reden-kop { display: flex; flex-direction: column; gap: 8px;}
.ph-deel-reden-stap { font-size: var(--label-sm-size); line-height: var(--label-sm-line); font-weight: var(--font-weight-label); color: var(--text-link);}
.ph-deel-reden p { font-size: var(--body-sm-size); line-height: var(--body-sm-line); color: var(--text-inverse-secondary);}

/* Kies waar je wilt delen (Figma "Share grid | Consument"): padding 80/0, 40 onder de titel, drie kolommen met 24 ertussen */
.ph-deel-delen { display: flex; flex-direction: column; gap: 40px; padding: 80px 0; scroll-margin-top: 24px;}
.ph-deel-delen > div > p { font-size: var(--body-default-size); line-height: var(--body-default-line);}
.ph-deel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;}

/* Deelkaart (Figma "Deelkaart" 15:546): wit, rand, radius 16; kop 14/16, voorbeeld 240 hoog (bovenaan 24), acties 14/16/16 */
.ph-deel-kaart { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--stroke-secondary); border-radius: var(--radius-md); background-color: var(--bg-secondary);}
.ph-deel-kaart-kop { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 16px;}
.ph-deel-kaart-titel { min-width: 0;}
.ph-deel-kaart-titel h3 { margin: 0; font-family: var(--font-primary); font-size: var(--title-default-size); line-height: var(--title-default-line); font-weight: var(--font-weight-title); color: var(--text-default);}
.ph-deel-kaart-titel p { margin: 0; font-size: var(--body-xs-size); line-height: var(--body-xs-line); color: var(--text-secondary);}
.ph-deel-kaart-voorbeeld { display: flex; flex-direction: column; align-items: center; height: 240px; padding-top: 24px; overflow: hidden; background-color: var(--deel-voorbeeld-bg);}
/* Het voorbeeld houdt zijn eigen hoogte en valt onderaan weg (anders drukt de flexbox story en post in elkaar) */
.ph-deel-kaart-voorbeeld > * { flex-shrink: 0;}
.ph-deel-kaart-voorbeeld-story .ph-deel-igs { zoom: .7692;}
.ph-deel-kaart-voorbeeld-facebook .ph-deel-post, .ph-deel-kaart-voorbeeld-linkedin .ph-deel-post { zoom: .8966;}
.ph-deel-kaart-acties { display: flex; gap: 8px; padding: 14px 16px 16px; border-top: 1px solid var(--stroke-secondary);}
.ph-deel-kaart-inhoud { display: flex; flex: 1 1 auto; flex-direction: column;}
/* Uitklapknop (Figma "Uitleg knop" 44×44 met chevron): alleen op mobiel; het vlak beslaat de hele kop */
.ph-deel-kaart-uitklap { display: none; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; margin-left: auto; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--icon-default);}
.ph-deel-kaart-uitklap::after { content: ""; position: absolute; inset: 0;}
.ph-deel-kaart-uitklap svg { width: 24px; height: 24px; transition: transform .2s ease-out;}
.ph-deel-kaart.is-open .ph-deel-kaart-uitklap svg { transform: rotate(180deg);}

/* Kanaalicoon 44×44, radius 8, padding 8 (Facebook: eigen rond logo; e-mail: radius 10, icoon 20) */
.ph-deel-kanaal { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; padding: 8px; border-radius: var(--radius-sm);}
.ph-deel-kanaal-whatsapp { background-color: var(--kanaal-whatsapp);}
.ph-deel-kanaal-instagram { background-image: var(--kanaal-instagram);}
.ph-deel-kanaal-linkedin { background-color: var(--kanaal-linkedin);}
.ph-deel-kanaal-facebook { padding: 0;}
.ph-deel-kanaal-mail { border-radius: var(--radius-deel); background-color: var(--bg-inverse);}

/* Nagemaakte berichten: gemeenschappelijk */
.ph-deel-avatar { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background-color: var(--deel-avatar); font-family: var(--font-sociaal); font-size: 10px; line-height: 1; font-weight: 600; color: var(--white);}

/* WhatsApp (Figma "Bubble"): groene bubbel met doorstuur-knop, staartje, linkvoorbeeld, tekst en tijd */
.ph-deel-wa { position: relative; display: flex; flex-direction: column; gap: 2px; width: 239px; padding: 3px 3px 5px; border: .5px solid var(--deel-wa-rand); border-radius: var(--radius-deel); background-color: var(--deel-wa-bubbel); filter: drop-shadow(var(--shadow-deel-voorbeeld-filter)); font-family: var(--font-sociaal); color: var(--deel-wa-tekst);}
.ph-deel-wa-doorsturen { position: absolute; top: 50%; left: -33px; display: flex; align-items: center; justify-content: center; width: 27px; height: 27px; border-radius: 50%; background-color: var(--deel-wa-doorsturen); transform: translateY(-50%);}
.ph-deel-wa-staart { position: absolute; right: -5px; bottom: -1px;}
.ph-deel-wa-bijlage { overflow: hidden; border-radius: var(--radius-deel-klein); background-color: var(--deel-wa-bijlage);}
.ph-deel-wa-bijlage > img { display: block; width: 100%; height: auto;}
.ph-deel-wa-bestand { display: flex; flex-direction: column; gap: 1px; padding: 7px 8px 10px; font-size: 9px; color: var(--deel-wa-tekst-secundair);}
.ph-deel-wa-bestand > * { overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.ph-deel-wa-bestand strong { font-size: 10px; line-height: 15px; font-weight: 600; color: var(--deel-wa-tekst); opacity: .8;}
.ph-deel-wa-tekst { margin: 0; padding: 2px 5px 12px; font-size: 13px; line-height: 17.5px; letter-spacing: -.17px;}
.ph-deel-wa-link { color: var(--deel-wa-link); word-break: break-all;}
.ph-deel-wa-tijd { position: absolute; right: 8px; bottom: 2px; display: flex; align-items: center; gap: 2px; font-size: 9px; color: var(--deel-wa-tekst-secundair);}

/* Instagram post (Figma "User headers", "Sjabloon | Post", "Post info"): 260 breed */
.ph-deel-ig { width: 260px; overflow: hidden; border-radius: var(--radius-sm); background-color: var(--white); filter: drop-shadow(var(--shadow-deel-voorbeeld-filter)); font-family: var(--font-sociaal); color: var(--black);}
.ph-deel-ig-kop { display: flex; align-items: center; gap: 5px; height: 33px; padding: 0 11px 0 9px;}
.ph-deel-ig-avatar { position: relative; display: flex; flex-shrink: 0; width: 24px; height: 24px; padding: 2px;}
.ph-deel-ig-avatar .ph-deel-avatar { width: 20px; height: 20px; font-size: 8px;}
.ph-deel-ig-avatar img { position: absolute; inset: 0;}
.ph-deel-ig-naam { display: flex; flex: 1 1 auto; flex-direction: column; gap: 1px; min-width: 0; font-size: 7px; line-height: normal;}
.ph-deel-ig-naam strong { font-size: 8px; font-weight: 700;}
.ph-deel-ig-beeld { display: block; width: 260px; height: 325px;}
.ph-deel-ig-iconen { display: flex; align-items: center; gap: 8px; height: 29px; padding: 0 8px;}
.ph-deel-ig-tekst { display: flex; flex-direction: column; gap: 4px; padding: 0 8px 16px; font-size: 9px; line-height: normal;}
.ph-deel-ig-tekst p { margin: 0; font-size: 9.33px; line-height: normal;}
.ph-deel-ig-tekst > strong { font-size: 8.5px;}
.ph-deel-ig-tekst > span { font-size: 8px; color: var(--deel-ig-tekst-secundair);}

/* Instagram story (Figma "Instagram story"): 260×462, timer en kop bovenop, linksticker onder de prijs, berichtregel onderaan */
.ph-deel-igs { position: relative; width: 260px; height: 462px; overflow: hidden; border-radius: var(--radius-sm); filter: drop-shadow(var(--shadow-deel-voorbeeld-filter)); font-family: var(--font-sociaal); color: var(--white);}
.ph-deel-igs-beeld { display: block; width: 260px; height: 462px;}
.ph-deel-igs-boven { position: absolute; top: 0; right: 0; left: 0;}
.ph-deel-igs-timer { display: flex; gap: 4px; padding: 5px 5px 2px;}
.ph-deel-igs-timer span { flex: 1 1 0; height: 1.5px; border-radius: 1px; background-color: var(--deel-igs-timer);}
.ph-deel-igs-timer span.is-bezig { background-image: linear-gradient(90deg, var(--white) 20%, transparent 20%);}
.ph-deel-igs-kop { display: flex; align-items: center; gap: 5px; padding: 1px 8px; font-size: 7px;}
.ph-deel-igs-kop strong { font-size: 8px; font-weight: 600;}
.ph-deel-igs-sticker { position: absolute; top: 337px; left: 15px; display: inline-flex; align-items: center; gap: 2px; padding: 5px 5px 5px 3px; border-radius: var(--radius-xs); background-color: var(--white); font-family: var(--font-display); font-stretch: var(--font-display-stretch); font-size: 18px; line-height: 1; text-transform: uppercase; color: var(--deel-igs-link);}
.ph-deel-igs-onder { position: absolute; right: 0; bottom: 9px; left: 0; display: flex; align-items: center; gap: 11px; padding: 0 8px;}
.ph-deel-igs-onder span { flex: 1 1 auto; padding: 6px 11px; border: .67px solid var(--deel-igs-rand); border-radius: 100px; font-size: 10.5px; line-height: 14.5px;}

/* Facebook en LinkedIn (Figma "Bericht"): 290 breed, kop, tekst, linkvoorbeeld, tellers en acties */
.ph-deel-post { width: 290px; overflow: hidden; border-radius: var(--radius-sm); background-color: var(--white); box-shadow: var(--shadow-deel-voorbeeld); font-family: var(--font-sociaal); color: var(--deel-fb-tekst);}
.ph-deel-post-kop { display: flex; align-items: center; gap: 7px; padding: 9px 10px 6px;}
.ph-deel-post-naam { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 9px; line-height: 1.3; color: var(--deel-fb-tekst-secundair);}
.ph-deel-post-naam strong { font-size: 11px; font-weight: 600; color: var(--deel-fb-tekst);}
.ph-deel-post-tekst { margin: 0; padding: 0 10px 9px; font-size: 11px; line-height: 1.35;}
.ph-deel-post-link { background-color: var(--deel-fb-vlak);}
.ph-deel-post-link > img { display: block; width: 100%; height: auto;}
.ph-deel-post-linktekst { display: flex; flex-direction: column; gap: 1.5px; padding: 7px 10px 9px; font-size: 9px; line-height: 1.3; color: var(--deel-fb-tekst-secundair);}
.ph-deel-post-linktekst strong { font-size: 12px; font-weight: 600; color: var(--deel-fb-tekst);}
.ph-deel-post-teller { display: flex; justify-content: space-between; padding: 7px 10px; font-size: 9.5px; line-height: 1.3; color: var(--deel-fb-tekst-secundair);}
.ph-deel-post-acties { display: flex; justify-content: space-between; padding: 7px 10px 9px; border-top: .75px solid var(--deel-fb-lijn); font-size: 9.5px; line-height: 1.3; font-weight: 600; color: var(--deel-fb-tekst-secundair);}
.ph-deel-post-acties span { display: inline-flex; align-items: center; gap: 4.5px;}
.ph-deel-post-linkedin { color: var(--black);}
.ph-deel-post-linkedin .ph-deel-post-kop { align-items: flex-start;}
.ph-deel-post-linkedin .ph-deel-avatar { width: 36px; height: 36px; font-size: 12px;}
.ph-deel-post-linkedin .ph-deel-post-naam strong, .ph-deel-post-linkedin .ph-deel-post-linktekst strong { color: var(--black);}
.ph-deel-post-linkedin .ph-deel-post-naam, .ph-deel-post-linkedin .ph-deel-post-linktekst, .ph-deel-post-linkedin .ph-deel-post-teller, .ph-deel-post-linkedin .ph-deel-post-acties { color: var(--deel-li-tekst-secundair);}
.ph-deel-post-linkedin .ph-deel-post-link { background-color: var(--deel-li-vlak);}
.ph-deel-post-linkedin .ph-deel-post-linktekst strong { font-size: 11px;}
.ph-deel-post-linkedin .ph-deel-post-acties { border-top-color: var(--deel-li-lijn); font-size: 8px;}
.ph-deel-post-linkedin .ph-deel-post-acties span { flex-direction: column; gap: 3px;}

/* E-mail (Figma "Voorbeeld | E-mail"): 280 breed, vensterbalk, velden, beeld, tekst en knop */
.ph-deel-mail { width: 280px; overflow: hidden; border-radius: var(--radius-deel); background-color: var(--white); box-shadow: var(--shadow-deel-voorbeeld); font-family: var(--font-sociaal); font-size: 8px; line-height: normal; color: var(--text-default);}
.ph-deel-mail-balk { display: flex; gap: 4px; padding: 7px 10px; background-color: var(--deel-mail-balk);}
.ph-deel-mail-balk span { width: 7px; height: 7px; border-radius: 50%; background-color: var(--deel-mail-bolletje);}
.ph-deel-mail-velden { margin: 0; padding: 2px 10px;}
.ph-deel-mail-velden div { display: flex; gap: 6px; padding: 5px 0; border-bottom: 1px solid var(--stroke-secondary);}
.ph-deel-mail-velden dt { flex-shrink: 0; width: 52px; font-weight: 400; color: var(--text-secondary);}
.ph-deel-mail-velden dd { flex: 1 1 auto; min-width: 0; margin: 0;}
.ph-deel-mail-velden strong { font-weight: 600;}
.ph-deel-mail-inhoud { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 10px 10px 12px;}
.ph-deel-mail-inhoud > img { display: block; width: 100%; height: auto;}
.ph-deel-mail-inhoud p { margin: 0; font-size: 9.5px; line-height: 1.35; color: var(--deel-mail-tekst); overflow-wrap: anywhere;}
.ph-deel-mail-knop { padding: 7px 12px; border-radius: var(--radius-xs); background-color: var(--primary); font-size: 8.5px; font-weight: 600; color: var(--tertiary);}

/* Modal "Bekijk ..." (Figma 38:20317 e.v.): 1080×680, radius 24; links het voorbeeld (380 breed, zand), rechts de uitleg
   (padding 32, scrolt) met de deelknop eronder; sluiten rechtsboven. Grid op .modal-content, .ph-deel-modal-scroll doet niet mee. */
.ph-deel-modal .modal-dialog { max-width: 1080px;}
.ph-deel-modal .modal-content { display: grid; grid-template-columns: 380px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; height: min(680px, calc(100dvh - 56px)); overflow: hidden; border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-deel-modal);}
.ph-deel-modal-scroll { display: contents;}
.ph-deel-modal-voorbeeld { display: flex; grid-row: 1 / 3; flex-direction: column; align-items: center; gap: 20px; padding: 32px; overflow: hidden; background-color: var(--bg-default);}
.ph-deel-modal-label { margin: 0; font-size: var(--label-default-size); line-height: var(--label-default-line); font-weight: var(--font-weight-label); color: var(--text-accent-primary);}
.ph-deel-modal-mock { display: flex; flex: 1 1 auto; align-items: center; min-height: 0;}
.ph-deel-modal-uitleg { display: flex; grid-column: 2; grid-row: 1; flex-direction: column; gap: 16px; min-width: 0; padding: 32px 32px 20px; overflow-y: auto;}
.ph-deel-modal-acties { grid-column: 2; grid-row: 2; padding: 0 32px 32px;}
.ph-deel-modal-sluiten { position: absolute; top: 32px; right: 32px;}
.ph-deel-modal-kop { display: flex; align-items: center; gap: 14px; padding-right: 38px;}
.ph-deel-modal-kop h2 { flex: 1 1 auto; min-width: 0; margin: 0;}
.ph-deel-modal-intro { margin: 0; font-size: var(--body-sm-size); line-height: var(--body-sm-line); color: var(--text-secondary);}
/* Stappen: 28×28 nummer (de eerste donkergroen), 14 ertussen, padding 12/0, lijn 10% donkergroen */
.ph-deel-stappen { margin: 0; padding: 0; list-style: none;}
.ph-deel-stappen li { display: flex; align-items: flex-start; gap: 14px; padding: 12px 0;}
.ph-deel-stappen li + li { border-top: 1px solid rgba(var(--primary-rgb), .1);}
.ph-deel-stap-nummer { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background-color: var(--bg-default); font-size: 13px; line-height: 1; font-weight: var(--font-weight-display); color: var(--text-default);}
.ph-deel-stap-nummer.is-eerste { background-color: var(--bg-inverse); color: var(--text-inverse);}
.ph-deel-stap-tekst { display: flex; flex-direction: column; gap: 4px; font-size: var(--body-sm-size); line-height: var(--body-sm-line); color: var(--text-secondary);}
.ph-deel-stap-tekst strong { font-weight: var(--font-weight-title); color: var(--text-default);}
/* Tekst om te kopiëren: wit, rand, radius 12, padding 16 */
.ph-deel-kopieer { display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px solid var(--stroke-secondary); border-radius: var(--radius-deel-vak); background-color: var(--bg-secondary);}
.ph-deel-kopieer-kop { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: var(--label-sm-size); line-height: var(--label-sm-line); color: var(--text-accent-primary);}
.ph-deel-kopieer-kop button { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: transparent; font-size: var(--label-xs-size); line-height: var(--label-xs-line); font-weight: var(--font-weight-label); color: var(--text-default);}
.ph-deel-kopieer-tekst { margin: 0; font-size: var(--body-xs-size); line-height: 1.45; color: var(--text-default); overflow-wrap: anywhere;}
.ph-deel-kopieer-link { text-decoration: underline;}

/* QR-code voor Instagram op de computer (render_deel_qr_modal(), js/delen.js): wit vak, punten dark green, kern van de hoekogen goud, logo in het midden */
.ph-deel-qr { position: relative; display: flex; align-items: center; justify-content: center; padding: 20px; border-radius: var(--radius-md); background-color: var(--bg-secondary); box-shadow: var(--shadow-card);}
.ph-deel-qr svg { display: block;}
.ph-deel-qr-punt { fill: var(--primary);}
.ph-deel-qr-oog { fill: none; stroke: var(--primary); stroke-width: 1;}
.ph-deel-qr-kern { fill: var(--primary);}
.ph-deel-qr-logo { position: absolute; top: 50%; left: 50%; width: auto; height: 40px; transform: translate(-50%, -50%);}

/* Zwevende melding onderin beeld (js/delen.js na delen of kopiëren, js/favorieten.js bij een fout); geen Figma-ontwerp */
.ph-zwevende-melding { position: fixed; bottom: 24px; left: 50%; z-index: 1100; max-width: min(480px, calc(100% - 32px)); padding: 12px 16px; border-radius: var(--radius-sm); background-color: var(--bg-inverse); box-shadow: var(--shadow-float); font-size: var(--body-sm-size); line-height: var(--body-sm-line); color: var(--text-inverse); opacity: 0; pointer-events: none; transform: translate(-50%, 16px); transition: opacity .2s ease-out, transform .2s ease-out;}
.ph-zwevende-melding.is-zichtbaar { opacity: 1; transform: translate(-50%, 0);}

@media (max-width: 1199.98px) {
    .ph-deel-hero { gap: 40px;}
    .ph-deel-hero-kaart { transform: rotate(5.21deg) scale(1.1);}
    .ph-deel-waarom-titel { flex-basis: 400px; padding-left: 40px;}
    .ph-deel-grid { grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media (max-width: 991.98px) {
    /* Hero tablet en mobiel (Figma mobiel 38:33809): woningkaart bovenaan met de stempel half over de hoek, daaronder gecentreerde
       titel (eerste deel op een eigen regel) en tekst, knoppen onder elkaar over de volle breedte */
    .ph-deel-hero { flex-direction: column; align-items: stretch; gap: 32px; height: auto; padding: 8px 0 48px;}
    .ph-deel-hero-beeld { flex: 0 0 auto; order: -1; align-self: center; width: fit-content; padding: 16px 0;}
    .ph-deel-hero-kaart { transform: rotate(5.21deg);}
    .ph-deel-stempel { top: -47px; right: -89px; transform: scale(.6);}
    .ph-deel-hero-tekst { align-items: center; gap: 32px; width: 100%; max-width: 560px; margin: 0 auto; text-align: center;}
    .ph-deel-hero-tekst h1 .text-gold { display: block;}
    .ph-deel-hero-knoppen { flex-direction: column; align-self: stretch; gap: 12px;}
    /* Waarom delen werkt (Figma mobiel 38:35689): titel boven (padding 32/32/8), daaronder de kaarten (16 rondom, 9 ertussen),
       zonder Owl (js/delen.js) maar met gewoon swipen en scroll-snap */
    .ph-deel-waarom { flex-direction: column; gap: 0;}
    .ph-deel-waarom-titel { z-index: 0; flex-basis: auto; padding: 32px 32px 8px; background-color: transparent; clip-path: none;}
    .ph-deel-waarom-titel::after { content: none;}
    .ph-deel-waarom-titel .ph-mk-glow { top: 100%; left: 50%;}
    .ph-deel-waarom-stappen { position: relative; z-index: 1; padding: 0;}
    .ph-deel-waarom-stappen:not(.owl-loaded) { display: flex; gap: 9px; padding: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none;}
    .ph-deel-waarom-stappen:not(.owl-loaded)::-webkit-scrollbar { display: none;}
    .ph-deel-waarom-stappen:not(.owl-loaded) .ph-deel-reden { flex: 0 0 280px; cursor: auto; scroll-snap-align: start;}
    .ph-deel-reden { width: 280px; gap: 8px;}
    .ph-deel-reden-kop { gap: 4px;}
    .ph-deel-reden .ph-mk-glow { display: none;}
    /* Modal als paneel van onderen (Figma mobiel 38:35945): radius 24 alleen boven; voorbeeld bovenaan,
       uitleg met padding 24/24/96; voorbeeld en uitleg scrollen samen, sluiten (24 van boven en rechts) en de
       deelknop (24 van onder en opzij) blijven staan; het voorbeeld is helemaal te zien */
    .ph-deel-modal .modal-dialog { align-items: flex-end; max-width: 560px; min-height: 100%; margin: 0 auto;}
    .ph-deel-modal.fade .modal-dialog { transform: translateY(100%);}
    .ph-deel-modal.show .modal-dialog { transform: none;}
    .ph-deel-modal .modal-content { display: block; height: auto; border-radius: var(--radius-lg) var(--radius-lg) 0 0;}
    .ph-deel-modal-scroll { display: block; max-height: calc(100dvh - 40px); overflow-y: auto; overscroll-behavior: contain;}
    /* Voorbeeld helemaal zichtbaar (in Figma 348 hoog en afgesneden; besloten 16-10: hele voorbeeld tonen) */
    .ph-deel-modal-voorbeeld { height: auto;}
    .ph-deel-modal-mock { justify-content: center; width: 100%;}
    .ph-deel-modal-uitleg { padding: 24px 24px 96px; overflow: visible;}
    .ph-deel-modal-acties { position: absolute; right: 24px; bottom: 24px; left: 24px; padding: 0;}
    .ph-deel-modal-sluiten { top: 24px; right: 24px;}
    .ph-deel-modal-kop { padding-right: 0;}
}
@media (max-width: 767.98px) {
    /* Figma mobiel 38:33809: zijmarge 16 (container 12 + 4) */
    .ph-deel { padding-inline: 4px;}
    .ph-deel-boven > .container { padding-inline: 16px;}
    /* Hero: padding 24/0, 16 tussen beeld en tekst, 24 tussen tekst en knoppen, knoppen 8 uit elkaar; woningkaart
       225 breed (0,626× de gewone kaart) in een vak over de volle breedte, stempel 80 groot, 14 van rechts en 8 van boven */
    .ph-deel-hero { gap: 16px; padding: 24px 0;}
    .ph-deel-hero-beeld { align-self: stretch; width: auto; padding: 8px 0;}
    .ph-deel-hero-kaart { zoom: .626;}
    /* In Figma is dit de desktopkaart verkleind, dus niet de mobiele kaartvariant (foto 120, padding 8, kleinere letters):
       desktopmaten terug, met de desktopwaarden van de typografie-tokens binnen de kaart */
    .ph-deel-hero-kaart { --headline-md-size: 24px; --headline-md-line: 28.8px; --body-default-size: 18px; --body-default-line: 23.4px; --display-xs-size: 24px; --display-xs-line: 24px; --label-sm-size: 16px; --label-sm-line: 16px;}
    .ph-deel-hero-kaart .card-woning { padding: 12px; border-radius: var(--radius-md);}
    .ph-deel-hero-kaart .card-woning img { height: 240px; border-radius: var(--radius-sm);}
    .ph-deel-hero-kaart .card-photo-wrap > .card-woning-badge { top: 8px; left: -16px;}
    .ph-deel-hero-kaart .card-woning .card-body-wrap .card-address { display: block; font-size: var(--headline-md-size); line-height: var(--headline-md-line);}
    .ph-deel-hero-kaart .card-woning .card-body-wrap .card-meta { font-size: var(--body-default-size); line-height: var(--body-default-line); white-space: normal; color: var(--text-secondary);}
    .ph-deel-hero-kaart .card-woning .card-price { font-size: var(--display-xs-size); line-height: var(--display-xs-line);}
    .ph-deel-hero-kaart .card-woning .card-stats { flex-wrap: nowrap; font-size: var(--label-sm-size); line-height: var(--label-sm-line);}
    .ph-deel-hero-kaart .card-woning .card-stats svg { width: 20px; height: 20px;}
    .ph-deel-stempel { top: -54px; right: -48px; transform: scale(.4);}
    .ph-deel-hero-tekst { gap: 24px;}
    .ph-deel-hero-knoppen { gap: 8px;}
    /* Waarom delen werkt: 24 boven en onder */
    .ph-deel-waarom { margin: 24px 0;}
    /* Kies waar je wilt delen: padding 32/0, 16 onder de titel (Display Large), kaarten als uitklaplijst 8 uit elkaar,
       knoppen onder elkaar over de volle breedte */
    .ph-deel-delen { gap: 16px; padding: 32px 0;}
    .ph-deel-delen h2 { font-size: var(--display-lg-size); line-height: var(--display-lg-line);}
    .ph-deel-grid { gap: 8px;}
    .ph-deel-kaart-uitklap { display: inline-flex;}
    .ph-deel-kaart:not(.is-open) .ph-deel-kaart-inhoud { display: none;}
    .ph-deel-kaart-acties { flex-direction: column;}
    .ph-deel-kaart-acties .btn { width: 100%;}
    /* App-banner (alleen hier, niet op Home): telefoons bovenaan (vak 271 hoog, beeld 384×395), radius 16, padding 32,
       48 tussen beeld en tekst, titel Display Large, storeknoppen onder elkaar over de volle breedte */
    .ph-deel .ph-home-app { padding: 80px 0;}
    /* De telefoons steken 80 boven het groene vlak uit. Het blok begint daarom 80 hoger en is zelf transparant; het groene vlak
       is ::before vanaf 80. Zo is gewone overflow: hidden genoeg (gloed niet buiten de pagina) en knipt iOS Safari de
       telefoons niet af, wat met overflow-x: clip + clip-path met negatieve inset wel gebeurde */
    .ph-deel .ph-home-app-blok { gap: 48px; margin-top: -80px; padding: 112px 32px 32px; overflow: hidden; border-radius: var(--radius-md); background-color: transparent;}
    .ph-deel .ph-home-app-blok::before { content: ""; position: absolute; inset: 80px 0 0; border-radius: var(--radius-md); background-color: var(--bg-inverse);}
    /* z-index: door order: -1 tekent de browser het beeld anders vóór (dus onder) het groene vlak */
    .ph-deel .ph-home-app-tekst { z-index: 1; gap: 16px;}
    .ph-deel .ph-home-app-beeld { z-index: 1; order: -1; height: 271px; padding-bottom: 40px;}
    .ph-deel .ph-home-app-telefoon { flex-shrink: 0; width: 384px; max-width: none; height: 395px;}
    .ph-deel .ph-home-app-tekst h2 { font-size: var(--display-lg-size); line-height: var(--display-lg-line);}
    .ph-deel .ph-home-app-tekst .ph-store-button { justify-content: center; width: 100%;}
    .ph-deel-grid { grid-template-columns: minmax(0, 1fr);}
    /* Mobiele maten uit Figma: titels Display Large (blok) en Display Regular (kaarten, modal) */
    .ph-deel-waarom-titel h2 { font-size: var(--display-lg-size); line-height: var(--display-lg-line);}
    .ph-deel-reden h3, .ph-deel-modal-kop h2 { font-size: var(--display-md-size); line-height: var(--display-md-line);}
}
/* Smalle telefoons: de nagemaakte berichten (tot 290 breed) passen anders niet in de modal */
@media (max-width: 379.98px) {
    .ph-deel-modal-mock { zoom: .85;}
}
@media (prefers-reduced-motion: reduce) {
    .ph-zwevende-melding { transition: none;}
}

/* === 28. Online offerte voor de verkoper — /portaal/{token} (content/portaal.php, js/portaal.js) ===
   Tijdelijk ontwerp naar het voorbeeld van de collega ("Voorstel · Meerzichtlaan 87 · weergave makelaar", nietgit/Offertes
   designs in beheer), tot het echte ontwerp er is. Klassen met pp- ervoor, zodat ze niet botsen met Bootstrap. */
.ph-portaal { margin: 0; background: var(--bg-default); color: var(--text-default); font-family: var(--font-primary); font-weight: 300; font-size: 16px; line-height: 1.6;}
.ph-portaal h1, .ph-portaal h2, .ph-portaal h3 { margin: 0; font-family: var(--font-primary); font-weight: 600; line-height: 1.1; color: inherit;}
.ph-portaal a { color: inherit;}
.ph-portaal button:focus-visible, .ph-portaal a:focus-visible, .ph-portaal textarea:focus-visible { outline: 2px solid var(--pink-500); outline-offset: 2px;}
.pp-top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px clamp(16px, 4vw, 40px); background: var(--primary); color: var(--tertiary);}
.pp-merk { display: flex; align-items: baseline; gap: 12px;}
.pp-wm { font-family: var(--font-display); font-stretch: var(--font-display-stretch); font-weight: 600; font-size: 20px; letter-spacing: .14em;}
.pp-voor { font-size: 13px; color: var(--green-500);}
.pp-topr { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;}
.pp-geldig { font-size: 14px;}
.pp-geldig b { font-weight: 600;}
.pp-mkbalk { position: sticky; top: calc(56px + env(safe-area-inset-top, 0px)); z-index: 19; margin: 0; padding: 10px clamp(16px, 4vw, 40px); border-bottom: 1px dashed var(--portaal-goud-donker); background: var(--secondary-20); font-size: 14px;}
.pp-main { display: flex; flex-direction: column; gap: 20px; max-width: 1280px; margin: 0 auto; padding: clamp(20px, 4vw, 40px) clamp(16px, 4vw, 24px) 140px;}
.pp-hero img { display: block; width: 100%; height: clamp(260px, 42vw, 480px); object-fit: cover; border-radius: 20px;}
.pp-voorwie { margin: 18px 0 6px; color: var(--portaal-goud-donker); font-weight: 500;}
.pp-hero h1 { font-size: clamp(34px, 5.4vw, 54px);}
.pp-kaart { display: flex; flex-direction: column; gap: 14px; padding: clamp(20px, 3vw, 32px); border: 1px solid var(--portaal-lijn); border-radius: 16px; background: var(--white); scroll-margin-top: 90px;}
.pp-kaart h2 { font-size: clamp(24px, 3vw, 30px);}
.pp-kaart h3 { padding-top: 6px; font-size: 15px; color: var(--portaal-goud-donker);}
.pp-kaart p { margin: 0; color: var(--portaal-zacht);}
.pp-kaart p.pp-groot { font-size: 17px; color: var(--text-default);}
.pp-skop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;}
.pp-vraag { min-height: 34px; padding: 0 14px; border: 1px solid var(--portaal-lijn); border-radius: 17px; background: var(--portaal-vlak); color: var(--text-default); font: inherit; font-size: 13px; cursor: pointer;}
.pp-mak { display: flex; align-items: center; gap: 12px;}
.pp-mak b { font-weight: 600;}
.pp-mak small, .pp-bkop small { display: block; font-size: 13px; color: var(--portaal-zacht);}
.pp-av { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 22px; background: var(--primary); color: var(--secondary); font-weight: 600;}
.pp-cijfers { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px;}
.pp-cijfers > div { padding: 16px; border-radius: 12px; background: var(--portaal-vlak);}
.pp-cijfers small { display: block; font-size: 13px; color: var(--portaal-zacht);}
.pp-cijfers b { font-weight: 600; font-size: clamp(24px, 3.4vw, 32px); line-height: 1.15;}
.pp-refs { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px;}
.pp-ref { margin: 0; overflow: hidden; border: 1px solid var(--portaal-lijn); border-radius: 12px; background: var(--white);}
.pp-ref img { display: block; width: 100%; height: 180px; object-fit: cover;}
.pp-ref figcaption { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; font-size: 14px;}
.pp-ref b { font-weight: 600;}
.pp-ref small { font-size: 12px; color: var(--portaal-zacht);}
.pp-ref .pp-bron { font-weight: 500; color: var(--portaal-goud-donker);}
.pp-kaart p.pp-sp { padding: 12px 14px; border-radius: 10px; background: var(--portaal-vlak);}
.pp-rij { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--portaal-lijn);}
.pp-rij small { display: block; font-size: 13px; color: var(--portaal-zacht);}
.pp-rij b, .pp-sp b { font-weight: 600;}
.pp-bedrag { font-weight: 500; white-space: nowrap;}
.pp-kaart p.pp-klein { font-size: 13px;}
.pp-kaart p.pp-vooraf { padding: 12px 14px; border-radius: 10px; background: var(--portaal-vlak); color: var(--text-default); font-weight: 500;}
.pp-kaart p.pp-ph { padding: 12px 14px; border-radius: 10px; background: var(--primary); color: var(--tertiary);}
.pp-bij { margin: 0; padding-left: 18px;}
.pp-launch { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 30; display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 20px 0 8px; border: 0; border-radius: 28px; background: var(--primary); color: var(--tertiary); font: inherit; font-weight: 500; font-size: 15px; box-shadow: 0 10px 28px rgba(var(--primary-rgb), .3); cursor: pointer;}
.pp-launch[hidden] { display: none;}
.pp-launch-nieuw { animation: pp-pop .5s ease-out;}
@keyframes pp-pop { 0% { transform: scale(1);} 40% { transform: scale(1.06);} 100% { transform: scale(1);} }
.pp-ico { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; overflow: hidden; border-radius: 10px; background: var(--white);}
.pp-ico img { width: 32px; height: 32px; object-fit: contain;}
.pp-logo { display: inline-flex; flex: 0 0 auto; overflow: hidden; border-radius: 8px;}
.pp-logo--kantoor { align-items: center; justify-content: center; width: 38px; height: 38px; background: var(--white);}
.pp-logo--kantoor img { width: 32px; height: 32px; object-fit: contain;}
.pp-logo-vlak { fill: var(--primary);}
.pp-logo-rand, .pp-logo-p { stroke: var(--secondary);}
.pp-badge { position: absolute; top: -4px; right: -4px; display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border: 2px solid var(--bg-default); border-radius: 11px; background: var(--pink-500); color: var(--white); font-size: 12px; font-weight: 600;}
.pp-badge[hidden] { display: none;}
.pp-preview { position: fixed; right: 20px; bottom: calc(88px + env(safe-area-inset-bottom, 0px)); z-index: 31; width: 300px; max-width: calc(100vw - 40px); border: 1px solid var(--portaal-lijn); border-radius: 14px; background: var(--white); box-shadow: 0 10px 28px rgba(var(--primary-rgb), .22);}
.pp-preview[hidden] { display: none;}
.pp-pvbody { display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 12px 34px 12px 14px; border: 0; background: transparent; color: var(--text-default); font: inherit; font-size: 14px; text-align: left; cursor: pointer;}
.pp-pvbody small { font-size: 12px; font-weight: 600; color: var(--primary);}
.pp-pvx { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; border: 0; background: transparent; color: var(--portaal-zacht); font-size: 18px; cursor: pointer;}
.pp-selknop { position: absolute; z-index: 46; min-height: 36px; padding: 0 14px; border: 0; border-radius: 18px; background: var(--primary); color: var(--tertiary); font: inherit; font-size: 13px; font-weight: 500; box-shadow: 0 6px 16px rgba(var(--primary-rgb), .3); cursor: pointer;}
.pp-selknop[hidden] { display: none;}
.pp-bot { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 40; display: flex; flex-direction: column; width: 380px; max-width: calc(100vw - 24px); height: min(620px, calc(100vh - 110px)); overflow: hidden; border-radius: 18px; background: var(--white); box-shadow: 0 18px 48px rgba(var(--primary-rgb), .32);}
.pp-bot[hidden] { display: none;}
.pp-bot.pp-wijzen { height: auto;}
.pp-bot.pp-wijzen .pp-bbody, .pp-bot.pp-wijzen .pp-bvoet, .pp-bot.pp-wijzen .pp-bakk { display: none;}
.pp-bkop { display: flex; align-items: center; gap: 10px; padding: 14px 10px 14px 16px; background: var(--primary); color: var(--tertiary);}
.pp-bkop b { font-weight: 600;}
.pp-bkop small { color: var(--green-500);}
.pp-x { width: 40px; height: 40px; margin-left: auto; border: 0; border-radius: 8px; background: transparent; color: var(--tertiary); font-size: 22px; cursor: pointer;}
.pp-bakk { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--portaal-lijn); background: var(--white); font-size: 14px;}
.pp-wijs { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; padding: 0 14px; border: 1.5px dashed var(--secondary); border-radius: 22px; background: var(--portaal-vlak); color: var(--text-default); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;}
.pp-wijs:hover { background: rgba(var(--secondary-rgb), .18);}
.pp-wijsbox { display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 14px 12px 16px; border-left: 3px solid var(--secondary); border-bottom: 1px solid var(--portaal-lijn); background: var(--portaal-vlak); color: var(--text-default); font-size: 14px; line-height: 1.45; animation: pp-in .25s ease-out;}
.pp-wijsbox[hidden] { display: none;}
.pp-wijsbox span { flex: 1 1 auto;}
.pp-wijsbox svg { flex: 0 0 auto; color: var(--portaal-goud-donker);}
.pp-annuleer { flex: 0 0 auto; min-height: 32px; padding: 0 4px; border: 0; background: transparent; color: var(--text-default); font: inherit; font-size: 13px; font-weight: 500; text-decoration: underline; cursor: pointer;}
@keyframes pp-in { from { opacity: 0; transform: translateY(-4px);} to { opacity: 1; transform: none;} }
.pp-aanwijs [data-kies] { outline: 2px dashed var(--secondary); outline-offset: 3px; border-radius: 6px; cursor: pointer;}
.pp-aanwijs [data-kies]:hover { background: rgba(var(--secondary-rgb), .14);}
.pp-aanwijs .pp-launch { display: none;}
.pp-bbody { display: flex; flex: 1 1 auto; flex-direction: column; gap: 10px; overflow-y: auto; padding: 14px; background: var(--portaal-vlak);}
.pp-msg { max-width: 85%; padding: 10px 12px; border-radius: 14px; font-size: 14px; line-height: 1.5; white-space: pre-line;}
.pp-msg small { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 600; color: var(--portaal-goud-donker);}
.pp-msg-b { align-self: flex-start; border: 1px solid var(--portaal-lijn); border-bottom-left-radius: 4px; background: var(--white);}
.pp-msg-j { align-self: flex-end; border-bottom-right-radius: 4px; background: var(--primary); color: var(--tertiary);}
.pp-msg-j small { color: var(--secondary);}
.pp-msg-m { align-self: flex-start; border: 1.5px solid var(--primary); border-bottom-left-radius: 4px; background: var(--white);}
.pp-msg-m small { color: var(--primary);}
.pp-msg-st { display: flex; align-self: stretch; gap: 8px; max-width: 100%; border: 1px solid var(--green-500); border-radius: 10px; background: var(--green-200); font-size: 13px;}
.pp-msg-st::before { content: "✓"; font-weight: 600;}
.pp-msg-bezig { display: flex; gap: 4px;}
.pp-msg-bezig span { width: 6px; height: 6px; border-radius: 50%; background: var(--primary-50); animation: ph-puls 1s infinite;}
.pp-msg-bezig span:nth-child(2) { animation-delay: .2s;}
.pp-msg-bezig span:nth-child(3) { animation-delay: .4s;}
.pp-ongelezen { display: flex; align-items: center; gap: 10px; margin: 6px 0;}
.pp-ongelezen::before, .pp-ongelezen::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--secondary);}
.pp-ongelezen span { padding: 4px 12px; border-radius: 12px; background: var(--primary); color: var(--tertiary); font-size: 13px; font-weight: 600; letter-spacing: .01em;}
.pp-fout { margin: 0; color: var(--text-accent-01-dark); font-size: 14px;}
.pp-bvoet { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-top: 1px solid var(--portaal-lijn); background: var(--white);}
.pp-wiekies { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px;}
.pp-wiekies[hidden] { display: none;}
.pp-kies { min-height: 44px; padding: 0 16px; border: 1px solid var(--portaal-lijn); border-radius: 22px; background: var(--white); color: var(--text-default); font: inherit; font-size: 14px; cursor: pointer;}
.pp-citaat { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border-left: 3px solid var(--secondary); border-radius: 6px; background: var(--portaal-vlak); font-size: 13px;}
.pp-citaat[hidden] { display: none;}
.pp-citaat span { flex: 1 1 auto;}
.pp-citweg { width: 28px; height: 28px; border: 0; background: transparent; color: var(--text-default); cursor: pointer;}
.pp-inv { display: flex; align-items: flex-end; gap: 8px;}
.pp-inv textarea { flex: 1 1 auto; min-width: 0; min-height: 52px; max-height: 140px; padding: 12px 14px; border: 2px solid var(--primary); border-radius: 14px; background: var(--white); color: var(--primary); font: inherit; font-size: 15px; line-height: 1.4; resize: none; field-sizing: content;}
.pp-inv textarea:focus { outline: none; border-color: var(--secondary); box-shadow: 0 0 0 3px rgba(var(--secondary-rgb), .35);}
.pp-stuur { flex: 0 0 auto; width: 48px; height: 48px; border: 0; border-radius: 24px; background: var(--primary); color: var(--tertiary); font-size: 18px; cursor: pointer;}
.pp-voorbeeld .pp-bot button:disabled, .pp-voorbeeld .pp-bot textarea:disabled { opacity: .45; cursor: not-allowed;}
.pp-emo { position: relative; flex: 0 0 auto;}
.pp-emoknop { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1px solid var(--portaal-lijn); border-radius: 24px; background: var(--white); color: var(--text-default); cursor: pointer;}
.pp-emopaneel { position: absolute; left: 0; bottom: 56px; z-index: 5; display: grid; grid-template-columns: repeat(4, 40px); gap: 4px; padding: 8px; border: 1px solid var(--portaal-lijn); border-radius: 12px; background: var(--white); box-shadow: 0 8px 24px rgba(var(--primary-rgb), .15);}
.pp-emopaneel[hidden] { display: none;}
.pp-emopaneel button { width: 40px; height: 40px; border: 0; border-radius: 8px; background: transparent; font-size: 22px; cursor: pointer;}
.pp-emopaneel button:hover { background: var(--portaal-vlak);}
.pp-belrij { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--portaal-lijn); border-radius: 22px; background: var(--portaal-vlak); color: var(--text-default); font-size: 14px; text-decoration: none;}
.pp-belrij b { margin-left: auto; font-weight: 600;}
.pp-teller { display: block; margin-top: 4px; text-align: right; font-size: 12px; font-weight: 400; color: var(--portaal-zacht);}
.pp-teller--vol::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--pink-500); vertical-align: 1px;}
.pp-dicht { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--portaal-vlak); color: var(--text-default); font-size: 13px; line-height: 1.45;}
.pp-dicht[hidden] { display: none;}
.pp-akk fieldset { display: flex; flex-direction: column; gap: 16px; min-width: 0; margin: 0; padding: 0; border: 0;}
.pp-akk fieldset:disabled { opacity: .55;}
.pp-akk fieldset:disabled .pp-akk-vlak, .pp-akk fieldset:disabled button { cursor: not-allowed;}
.pp-akk-wie { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px;}
.pp-akk-wie .pp-kies[aria-pressed="true"] { border-color: var(--primary); background: var(--primary); color: var(--tertiary);}
.pp-akk-velden { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 16px;}
.pp-akk label { display: flex; flex-direction: column; gap: 6px; margin: 0; font-size: 14px; font-weight: 500;}
.pp-akk input[type="text"], .pp-akk input[type="email"], .pp-akk input[type="tel"] { min-height: 48px; padding: 0 14px; border: 1px solid var(--portaal-lijn); border-radius: 10px; background: var(--white); color: var(--text-default); font: inherit; font-weight: 400; font-size: 15px;}
.pp-akk input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--secondary-rgb), .35);}
.pp-akk input.pp-akk-mis { border-color: var(--pink-500);}
/* Telefoon met vlag en landcode (.iti, js/telefoon.js): het grijze vlak in de hoek en de maat van deze velden */
.pp-akk .iti__selected-flag { border-radius: 10px 0 0 10px;}
.pp-akk .iti__selected-dial-code { font-size: 15px;}
.pp-akk-fout { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 400; color: var(--text-default);}
.pp-akk-fout::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--pink-500);}
.pp-akk-fout[hidden] { display: none;}
.pp-akk-hand { display: flex; flex-direction: column; gap: 6px;}
.pp-akk-handkop { display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 500;}
.pp-akk-wis { min-height: 32px; padding: 0 4px; border: 0; background: transparent; color: var(--text-default); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer;}
.pp-akk-vlak { display: block; width: 100%; height: 180px; border: 1.5px dashed var(--secondary); border-radius: 12px; background: var(--portaal-vlak); color: var(--primary); touch-action: none; cursor: crosshair;}
.pp-akk-vlak.pp-akk-mis { border-style: solid; border-color: var(--pink-500);}
.pp-akk-hint { font-size: 13px; color: var(--portaal-zacht);}
.pp-akk label.pp-akk-vink { flex-direction: row; align-items: flex-start; gap: 10px; font-size: 15px; font-weight: 400;}
.pp-akk-vink input { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px; accent-color: var(--primary);}
.pp-akk-vink input.pp-akk-mis { outline: 2px solid var(--pink-500); outline-offset: 2px;}
.pp-akk-knop { align-self: flex-start; min-height: 52px; padding: 0 28px; border: 0; border-radius: 26px; background: var(--primary); color: var(--tertiary); font: inherit; font-weight: 600; font-size: 16px; cursor: pointer;}
.pp-kaart p.pp-akk-klaar { padding: 14px 16px; border-radius: 10px; background: var(--green-200); color: var(--text-default); font-weight: 500;}
.pp-kaart p.pp-akk-let { padding: 10px 14px; border-radius: 10px; background: var(--secondary-20); color: var(--text-default); font-size: 14px;}
.pp-kaart p.pp-akk-let[hidden] { display: none;}
@media (max-width: 640px) {
    .pp-voor { display: none;}
    .pp-bot { right: 0; bottom: 0; width: 100vw; max-width: 100vw; height: 85vh; padding-bottom: env(safe-area-inset-bottom, 0px); border-radius: 18px 18px 0 0;}
    .pp-launch { right: 12px;}
    .pp-akk-knop { width: 100%;}
}
@media (prefers-reduced-motion: reduce) {
    .pp-wijsbox, .pp-launch-nieuw { animation: none;}
}

/* === 29. Huysplan-pagina's: gedeelde kop (hp_pagina_begin()), "niet gevonden" en Vragen voor de afspraak (content/huysplan-vragen.php) ===
   Ontwerp nietgit/Huysplan Designs in beheer ("Huysplan · Meerzichtlaan 87"). Klassen met hp- ervoor; de Pitch Generator zelf staat in sectie 30. */
.ph-huysplan { margin: 0; background: var(--primary); color: var(--tertiary); font-family: var(--font-primary); -webkit-font-smoothing: antialiased;}
.ph-huysplan button { font-family: inherit;}
.ph-huysplan :focus-visible { outline: 2px solid var(--pink-500); outline-offset: 2px;}
.hp-kop { margin: 0; font-family: var(--font-display); font-stretch: var(--font-display-stretch); font-weight: 600; text-transform: uppercase; letter-spacing: .01em; color: inherit;}
.hp-hero { display: flex; justify-content: center; padding: 24px 20px 44px; background: rgba(var(--tertiary-rgb), .04); color: var(--tertiary);}
.hp-hero-w { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 1320px;}
.hp-hero-titel { display: flex; flex-direction: column; gap: 4px;}
.hp-hero h1 { font-size: clamp(34px, 8vw, 52px); line-height: 1;}
.hp-hero-sub { font-size: 15px; color: var(--green-500);}
.hp-hero-voor { font-size: 14px;}
.hp-merk { display: flex; align-items: center; gap: 10px;}
.hp-merk-tekst { display: flex; flex-direction: column; line-height: 1.2;}
.hp-merk-naam { font-size: 16px;}
.hp-merk-sub { font-size: 13px; color: var(--green-500);}
.hp-logo { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1.5px solid var(--secondary); border-radius: 4px; font-family: var(--font-display); font-stretch: var(--font-display-stretch); font-weight: 600; color: var(--secondary);}
.hp-inhoud { width: 100%; max-width: 1320px; margin: -24px auto 0; padding: 0 16px 48px;}
.hp-kaart { display: flex; flex-direction: column; gap: 12px; padding: clamp(18px, 3vw, 28px); border: 1px solid rgba(var(--secondary-rgb), .75); border-radius: 14px; background: rgba(var(--tertiary-rgb), .06);}
.hp-kaart-titel { font-size: 24px;}
.hp-klein { font-size: 14px; line-height: 1.55;}
.hp-toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 70; max-width: calc(100vw - 32px); padding: 12px 16px; border: 1px solid var(--secondary); border-radius: 10px; background: var(--primary); color: var(--tertiary); font-size: 14px; transform: translateX(-50%);}
@media (max-width: 860px) {
    .hp-pgs-body, .hp-startdia, .hp-laad, .hp-dia, .hp-pr { grid-template-columns: minmax(0, 1fr);}
    .hp-dia { min-height: 0;}
    .hp-wpanel { min-height: 0;}
    .hp-kv { grid-template-columns: repeat(3, minmax(0, 1fr));}
    .hp-kstat, .hp-mini, .hp-stappen { grid-template-columns: repeat(2, minmax(0, 1fr));}
    .hp-bewijs { grid-template-columns: minmax(0, 1fr);}
    .hp-hst { grid-template-columns: repeat(3, minmax(0, 1fr));}
}
@media (max-width: 560px) {
    .hp-dvragen { grid-template-columns: minmax(0, 1fr);}
    .hp-cijfers, .hp-stats3 { grid-template-columns: repeat(2, auto);}
}

/* === 30. Pitch Generator — Figma "Pitch Generator | Powerhuys" (tablet 1024×768, 30-10-2026); js/huysplan-pitch.js en js/huysplan-dias.js ===
   Elk scherm vult de hele pagina: kop (kantoor en sluiten), hoofdstuk- of stappenbalk, inhoud en navigatie. Ontworpen voor de
   tablet; op desktop blijft het scherm 1024 breed (gecentreerd), smaller (telefoon) stapelt de inhoud en worden kop en navigatie compacter. */
.pg-pagina { width: 100%; max-width: 1024px; margin: 0 auto;}
.pg-app { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 1024px; min-height: 100vh; min-height: 100dvh; margin: 0 auto; overflow: hidden; background: var(--primary); color: var(--white); font-family: var(--font-primary);}
.pg-app > * { position: relative; z-index: 1;}
/* Dia's op tablet en groter: ontwerpformaat 1024 × minstens 768, als geheel passend geschaald door pasDia() (js/huysplan-pitch.js) */
@media (min-width: 769px) {
    .pg-pagina:has(.pg-dia-kader) { max-width: none; overflow: hidden;}
    .pg-app.pg-dia-kader { width: 1024px; max-width: none; min-height: 768px; margin: 0; transform-origin: 0 0;}
}
.pg-patroon::before { content: ""; position: absolute; inset: 0; z-index: 0; background: url(/assets/images/pitch-achtergrond-patroon-tegel.svg) -499px -56px / 505.686px 447.983px repeat; opacity: .12; pointer-events: none;}
.pg-patroon::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(to bottom, rgba(var(--primary-rgb), 0) 84.615%, var(--primary) 100%); pointer-events: none;}
.pg-kop { display: flex; align-items: flex-start; gap: 32px; padding: 24px 32px;}
.pg-merk { display: flex; flex: 1; align-items: center; gap: 12px; min-width: 0;}
.pg-merk img { flex: 0 0 auto; width: 37px; height: 48px;}
.pg-merk-tekst { display: flex; flex-direction: column; gap: 4px; min-width: 0;}
.pg-merk-tekst strong { overflow: hidden; font-family: var(--font-display); font-stretch: var(--font-display-stretch); font-weight: 600; font-size: 24px; line-height: 24px; text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis;}
.pg-merk-tekst span { font-size: 18px; line-height: 18px; color: var(--secondary);}
.pg-sluit { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 5px; border: 0; background: transparent; cursor: pointer;}
.pg-voortgang { display: flex; gap: 6px; padding: 10px 32px 0;}
.pg-hst { display: flex; flex: 1; flex-direction: column; gap: 6px; min-width: 0; padding: 0; border: 0; background: transparent; color: var(--secondary); font-size: 14px; line-height: 14px; text-align: left; white-space: nowrap; cursor: pointer;}
.pg-hst i { display: block; height: 4px; overflow: hidden; border-radius: 2px; background: rgba(var(--white-rgb), .18);}
.pg-hst b { display: block; height: 100%; background: var(--secondary);}
.pg-hst.nu { color: var(--white);}
.pg-inhoud { display: flex; flex: 1; flex-direction: column; width: 100%; padding: 10px 0;}
.pg-nav { display: flex; align-items: center; gap: 24px; padding: 16px 32px; border-top: 1px solid var(--white-20); background: var(--primary);}
.pg-nav .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 160px; min-height: 48px; font-size: 18px; font-weight: 500;}
.pg-nav-leeg { min-width: 160px;}
.pg-teller { flex: 1; font-size: 16px; font-weight: 500; text-align: center; color: var(--white-80);}
@media (max-width: 640px) {
    .pg-kop { gap: 16px; padding: 16px;}
    .pg-merk-tekst strong { font-size: 20px; line-height: 20px;}
    .pg-merk-tekst span { font-size: 15px; line-height: 15px;}
    .pg-voortgang { padding: 6px 16px 0;}
    .pg-hst { font-size: 0;}
    .pg-hst.nu { font-size: 12px;}
    .pg-nav { gap: 12px; padding: 12px 16px;}
    .pg-nav .btn { min-width: 0; padding: 0 14px;}
    .pg-nav-leeg { min-width: 0;}
}
.pg-opgeslagen { align-self: center; font-size: 14px; white-space: nowrap; color: var(--white-80);}

/* ===== 31. Pitch Generator: invoer (js/huysplan-pitch.js: pitchInvoer, laadscherm, modal). Figma "Pitch Generator | Powerhuys": startpagina, stap 1–4, rekenscherm en pop-ups (tablet 1024×768) ===== */
/* Kop met het adres i.p.v. het kantoor (stappen en rekenscherm; kader() met klasse pgi-adreskop en het adres in o.rechts) */
.pgi-adreskop .pg-kop { gap: 12px;}
.pgi-adreskop .pg-merk { flex: 0 0 auto;}
.pgi-adreskop .pg-merk-tekst { display: none;}
.pgi-adreskop .pg-inhoud { padding: 0;}
.pgi-adres { display: flex; flex: 1; flex-direction: column; gap: 4px; min-width: 0;}
.pgi-adres strong { overflow: hidden; font-family: var(--font-display); font-stretch: var(--font-display-stretch); font-weight: var(--font-weight-display); font-size: var(--display-xs-size); line-height: var(--display-xs-line); text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis;}
.pgi-adres span { font-size: var(--label-default-size); line-height: var(--label-default-line); color: var(--text-inverse-secondary);}
.pgi-opgeslagen { align-self: center; font-size: var(--label-xs-size); line-height: var(--label-xs-line); color: var(--text-inverse-secondary); white-space: nowrap;}

/* Stappen 1–4: licht scherm van 768 hoog, links de stappen (scrollt), rechts het zijpaneel */
.pgi-licht { height: 100vh; height: 100dvh; background: var(--bg-default); color: var(--text-default);}
.pgi-licht .pgi-adres span, .pgi-licht .pgi-opgeslagen { color: var(--text-secondary);}
.pgi-licht .pg-sluit { background: var(--icon-default); -webkit-mask: url(/assets/images/pitch-sluiten.svg) center / 22px 22px no-repeat; mask: url(/assets/images/pitch-sluiten.svg) center / 22px 22px no-repeat;}
.pgi-licht .pg-sluit img { opacity: 0;}
.pgi-licht .pg-inhoud { min-height: 0;}
.pgi-stap { display: flex; flex: 1; gap: 40px; min-height: 0; padding: 0 40px 24px;}
.pgi-links { display: flex; flex: 1; flex-direction: column; gap: 16px; min-width: 0; margin: 0 -8px; padding: 0 8px 8px; overflow-y: auto; scrollbar-width: none;}
.pgi-links::-webkit-scrollbar { display: none;}
.pgi-balk { position: sticky; top: 0; z-index: 2; display: flex; flex: 0 0 auto; gap: 8px; padding-bottom: 16px; background: var(--bg-default);}
.pgi-balk span { display: flex; flex: 1; flex-direction: column; gap: 12px; min-width: 0; overflow: hidden; font-size: var(--label-sm-size); line-height: var(--label-sm-line); color: var(--text-secondary); white-space: nowrap; text-overflow: ellipsis;}
.pgi-balk i { display: block; height: 4px; border-radius: 999px; background: var(--primary-20);}
.pgi-balk .af i { background: var(--icon-accent-primary);}
.pgi-kop { display: flex; flex: 0 0 auto; align-items: flex-start; gap: 16px;}
.pgi-kop > div { display: flex; flex: 1; flex-direction: column; gap: 4px; min-width: 0;}
.pgi-kop h2 { margin: 0; font-family: var(--font-display); font-stretch: var(--font-display-stretch); font-weight: var(--font-weight-display); font-size: var(--display-sm-size); line-height: var(--display-sm-line); text-transform: uppercase; color: var(--text-default);}
.pgi-kop p { margin: 0; font-size: var(--body-sm-size); line-height: var(--body-sm-line); color: var(--text-secondary);}
.pgi-vrknop { position: relative; display: flex; flex: 0 0 48px; align-items: center; justify-content: center; height: 48px; padding: 0; border: 1px solid var(--stroke-secondary); border-radius: var(--radius-pitch-knop); background: var(--bg-secondary); cursor: pointer;}
.pgi-vrknop i { position: absolute; top: 7px; right: 3px; display: flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 3px; border-radius: var(--radius-xl); background: var(--bg-accent-01); color: var(--white); font-size: 10px; font-style: normal; font-weight: 500; line-height: 14px;}
.pgi-lijst { display: flex; flex: 0 0 auto; flex-direction: column; gap: 8px;}
.pgi-leeg { margin: 0; padding: 16px; border: 1px dashed var(--stroke-secondary); border-radius: var(--radius-sm); font-size: var(--body-sm-size); line-height: var(--body-sm-line); color: var(--text-secondary);}
.pgi-uitleg { margin: 0; font-size: var(--body-sm-size); line-height: var(--body-sm-line); color: var(--text-secondary);}
.pgi-nav { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 16px;}
.pgi-nav .btn { min-width: 146px;}

/* Stap 1: woningkaarten (eigen woning donker, referenties wit met match-label) */
.pgi-kaart { position: relative; display: flex; gap: 8px; width: 100%; min-height: 136px; padding: 8px; border: 0; border-radius: var(--radius-sm); background: var(--bg-secondary); box-shadow: 0 2px 8px rgba(var(--black-rgb), .25); color: var(--text-default); text-align: left; cursor: pointer;}
.pgi-kaart.eigen { background: var(--bg-inverse); color: var(--text-inverse); cursor: default;}
.pgi-beeld { position: relative; display: flex; flex: 0 0 140px; align-items: center; justify-content: center; height: 120px; overflow: hidden; border-radius: var(--radius-xs); background: var(--primary-20);}
.pgi-kaart.eigen .pgi-beeld { background: var(--bg-inverse-secondary);}
.pgi-eigen-3d { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;}
.pgi-eigen-3d img { height: 96px; width: auto;}
.pgi-foto { width: 100%; height: 100%; object-fit: cover;}
.pgi-huisje { position: relative; display: flex; align-items: flex-start; height: 104px;}
.pgi-huisje img { position: relative; margin-left: 7px;}
.pgi-huisje .pgi-huisje-grond { position: absolute; top: 36px; left: 0; margin: 0;}
.pgi-kaart-tekst { display: flex; flex: 1; flex-direction: column; justify-content: space-between; gap: 8px; min-width: 0; padding: 4px;}
.pgi-kaart-boven { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;}
.pgi-kaart-boven > span:first-child { display: flex; flex-direction: column; min-width: 0;}
.pgi-kaart-boven strong { display: -webkit-box; max-height: 38px; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 16px; font-weight: var(--font-weight-headline); line-height: 19.2px; color: var(--primary);}
.pgi-kaart.eigen .pgi-kaart-boven strong { color: var(--text-inverse);}
.pgi-kaart-adr { font-size: 14px; line-height: 18.2px; color: rgba(var(--primary-rgb), .8);}
.pgi-kaart.eigen .pgi-kaart-adr { color: var(--text-inverse-secondary);}
.pgi-kaart-vk { display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 12px; line-height: 12px; color: var(--text-secondary); text-align: right;}
.pgi-kaart-vk b { font-family: var(--font-display); font-stretch: var(--font-display-stretch); font-weight: var(--font-weight-display); font-size: 18px; line-height: 21.6px; text-transform: uppercase; color: var(--text-default); white-space: nowrap;}
.pgi-kenm { display: flex; justify-content: space-between; gap: 8px;}
.pgi-kenm > span { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 12px; line-height: 12px; color: var(--text-secondary); white-space: nowrap;}
.pgi-kaart.eigen .pgi-kenm > span { color: var(--text-inverse-secondary);}
.pgi-kenm b { font-family: var(--font-display); font-stretch: var(--font-display-stretch); font-weight: var(--font-weight-display); font-size: 16px; line-height: 19.2px; text-transform: uppercase; color: var(--text-default);}
.pgi-kaart.eigen .pgi-kenm b { color: var(--text-inverse);}
.pgi-match { position: absolute; top: 16px; left: -4px; z-index: 1; display: flex; filter: drop-shadow(var(--shadow-label-filter)); pointer-events: none;}
.pgi-match span { padding: 6px 0 6px 12px; border-radius: var(--radius-xs) 0 0 var(--radius-xs); background: var(--bg-accent-primary); color: var(--white); font-size: 14px; line-height: 14px; white-space: nowrap;}
.pgi-match img { width: 26px; height: 26px; margin-left: -1px; transform: rotate(90deg) scaleY(-1);}

/* Stap 2–4: tegels (leeg wit, ingevuld lichtgroen, toevoegen met gestreepte rand) */
.pgi-tegel { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 64px; padding: 8px 12px 8px 8px; border: 1px solid var(--stroke-secondary); border-radius: var(--radius-pitch-tegel); background: var(--bg-secondary); color: var(--text-default); text-align: left; cursor: pointer;}
.pgi-tegel.vol { background: var(--bg-subtle-02);}
.pgi-tegel.nieuw { border-style: dashed;}
.pgi-tegel-ico { display: flex; flex: 0 0 48px; align-items: center; justify-content: center; height: 48px; border-radius: var(--radius-sm); background: var(--bg-secondary);}
.pgi-tegel-tekst { display: flex; flex: 1; flex-direction: column; gap: 4px; min-width: 0;}
.pgi-tegel-tekst strong { font-size: var(--title-sm-size); font-weight: var(--font-weight-title); line-height: var(--title-sm-line);}
.pgi-tegel-tekst small { overflow: hidden; font-size: 14px; line-height: 14px; color: var(--text-secondary); white-space: nowrap; text-overflow: ellipsis;}
.pgi-tegel b { flex: 0 0 auto; font-family: var(--font-display); font-stretch: var(--font-display-stretch); font-weight: var(--font-weight-display); font-size: var(--display-xs-size); line-height: var(--display-xs-line); text-transform: uppercase; white-space: nowrap;}
.pgi-tegel > img { flex: 0 0 auto;}

/* Zijpaneel Woningwaarde */
.pgi-paneel { display: flex; flex: 0 0 288px; flex-direction: column; gap: 16px; padding: 24px; border-radius: var(--radius-md); background: var(--bg-inverse); color: var(--text-inverse);}
.pgi-paneel h3 { margin: 0; font-family: var(--font-display); font-stretch: var(--font-display-stretch); font-weight: var(--font-weight-display); font-size: var(--display-xs-size); line-height: var(--display-xs-line); text-transform: uppercase; color: var(--text-inverse);}
.pgi-paneel-lijst { display: flex; flex: 1; flex-direction: column; gap: 16px;}
.pgi-paneel-lijst div { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 16px; border-top: 1px solid var(--stroke-inverse);}
.pgi-paneel-lijst span { font-size: var(--body-sm-size); line-height: var(--body-sm-line); color: var(--text-inverse-secondary);}
.pgi-paneel-lijst b { font-size: var(--title-sm-size); font-weight: var(--font-weight-title); line-height: var(--title-sm-line); text-align: right; white-space: nowrap;}
.pgi-paneel-tot { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; padding-top: 24px; border-top: 1px solid var(--stroke-inverse); text-align: right;}
.pgi-paneel-tot span { font-size: var(--body-sm-size); line-height: var(--body-sm-line); color: var(--text-inverse-secondary);}
.pgi-paneel-tot strong { font-family: var(--font-display); font-stretch: var(--font-display-stretch); font-weight: var(--font-weight-display); font-size: var(--display-md-size); line-height: var(--display-md-line); text-transform: uppercase; white-space: nowrap;}

/* Startpagina: links adres en kenmerken, rechts het 3D-huis (of de woningfoto) */
.pgi-start { display: flex; flex: 1; gap: 40px; padding: 0 40px 22px;}
.pgi-start-tekst { display: flex; flex: 0 1 472px; flex-direction: column; justify-content: center; align-items: flex-start; gap: 80px; min-width: 0;}
.pgi-start-blok { display: flex; flex-direction: column; gap: 32px; width: 100%;}
.pgi-datum { margin: 0; font-size: var(--label-sm-size); font-weight: var(--font-weight-label); line-height: var(--label-sm-line); color: var(--text-accent-primary);}
.pgi-start-adres { display: flex; flex-direction: column; gap: 8px;}
.pgi-start-adres h2 { margin: 0; overflow-wrap: anywhere; font-family: var(--font-display); font-stretch: var(--font-display-stretch); font-weight: var(--font-weight-display); font-size: var(--display-lg-size); line-height: var(--display-lg-line); text-transform: uppercase; color: var(--text-inverse);}
.pgi-start-adres p { margin: 0; font-size: var(--body-default-size); line-height: var(--body-default-line); color: var(--text-inverse-secondary);}
.pgi-goudlijn { display: block; height: 1px; background: var(--stroke-accent-primary);}
.pgi-cijfers { display: flex; justify-content: space-between; gap: 16px;}
.pgi-cijfers div { display: flex; flex-direction: column; gap: 8px;}
.pgi-cijfers strong { font-family: var(--font-display); font-stretch: var(--font-display-stretch); font-weight: var(--font-weight-display); font-size: var(--display-sm-size); line-height: var(--display-sm-line); text-transform: uppercase; white-space: nowrap;}
.pgi-cijfers span { font-size: var(--label-xs-size); line-height: var(--label-xs-line); color: var(--text-inverse-secondary);}
.pgi-start-knop { min-width: 160px;}
.pgi-start-huis { display: flex; flex: 1 1 472px; align-items: center; justify-content: center; min-width: 0; padding: 40px 0;}
.pgi-start-3d { position: relative; flex: 0 0 auto; width: 433px; height: 455px;}
.pgi-start-grond { position: absolute; top: 318.5px; left: 0; width: 426px; height: 136.5px;}
.pgi-start-woning { position: absolute; top: 0; left: 50.9px; width: 382.5px; height: 455px;}
.pgi-start-foto { width: 100%; max-height: 455px; border-radius: var(--radius-md); object-fit: cover;}

/* Rekenscherm: 7 stappen, links de uitleg bij de lopende stap */
.pgi-laad { display: flex; flex: 1; align-items: center; gap: 40px; padding: 0 40px 32px;}
.pgi-laad-uitleg { display: flex; flex: 1 1 452px; flex-direction: column; gap: 12px; min-width: 0;}
.pgi-laad-stap { margin: 0; font-size: var(--label-sm-size); font-weight: var(--font-weight-label); line-height: var(--label-sm-line); color: var(--text-accent-primary);}
.pgi-laad-uitleg h2 { margin: 0; font-family: var(--font-display); font-stretch: var(--font-display-stretch); font-weight: var(--font-weight-display); font-size: var(--display-md-size); line-height: var(--display-md-line); text-transform: uppercase; color: var(--text-inverse);}
.pgi-laad-tekst { margin: 0; font-size: var(--body-default-size); line-height: var(--body-default-line); color: var(--text-inverse-secondary);}
.pgi-laad-lijst { display: flex; flex: 1 1 452px; flex-direction: column; gap: 6px; min-width: 0; margin: 0; padding: 0; list-style: none;}
.pgi-laad-lijst li { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 12px; border: 1px solid transparent; border-radius: var(--radius-pitch-tegel); font-size: var(--label-sm-size); font-weight: var(--font-weight-label); line-height: var(--label-sm-line); color: var(--text-inverse);}
.pgi-laad-lijst li.nu { border-color: var(--stroke-inverse); background: var(--bg-inverse-secondary);}
.pgi-laad-lijst i { display: flex; flex: 0 0 24px; align-items: center; justify-content: center; height: 24px; border: 1.5px solid var(--stroke-inverse); border-radius: 999px;}
.pgi-laad-lijst .nu i { border-color: var(--stroke-accent-primary);}
.pgi-laad-lijst .af i { border-color: var(--stroke-accent-primary); background: var(--bg-accent-primary);}
.pgi-laad-lijst span { display: flex; flex-direction: column; gap: 8px; min-width: 0;}
.pgi-laad-lijst li:not(.af):not(.nu) span { opacity: .5;}
.pgi-laad-lijst small { font-size: var(--label-xs-size); font-weight: var(--font-weight-body); line-height: var(--label-xs-line); color: var(--text-accent-primary);}
/* Laadscherm vloeiend: uitleg schuift in, totaalbalk en actieve stap vullen zich in --laad-tik, het vinkje springt */
.pgi-laad-uitleg > p, .pgi-laad-uitleg > h2 { animation: pgi-laad-in .6s ease-out both;}
.pgi-laad-uitleg > h2 { animation-delay: .08s;}
.pgi-laad-uitleg > .pgi-laad-tekst { animation-delay: .16s;}
.pgi-laad-totaal { display: block; height: 4px; margin-top: 12px; overflow: hidden; border-radius: 2px; background: var(--white-20);}
.pgi-laad-totaal i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(to right, var(--secondary), var(--gold-gradient-light)); animation: pgi-laad-totaal var(--laad-tik) linear both;}
.pgi-laad-lijst li { position: relative; overflow: hidden; transition: background-color .3s, border-color .3s;}
.pgi-laad-lijst li.nu { animation: pgi-laad-in .4s ease-out both;}
.pgi-laad-lijst .nu i { border-top-color: transparent; animation: pgi-laad-draai .9s linear infinite;}
.pgi-laad-vul { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--secondary); animation: pgi-laad-vul var(--laad-tik) linear both;}
.pgi-laad-lijst .net i { animation: pgi-laad-vink .45s cubic-bezier(.3, 1.6, .5, 1) both;}
.pgi-laad-lijst .net small { animation: pgi-laad-in .5s ease-out .15s both;}
@keyframes pgi-laad-in { from { opacity: 0; transform: translateY(8px);} to { opacity: 1; transform: none;} }
@keyframes pgi-laad-totaal { from { width: var(--van);} to { width: var(--tot);} }
@keyframes pgi-laad-vul { from { width: 0;} to { width: 100%;} }
@keyframes pgi-laad-draai { to { transform: rotate(360deg);} }
@keyframes pgi-laad-vink { from { transform: scale(.4);} to { transform: scale(1);} }
@media (prefers-reduced-motion: reduce) {
    .pgi-laad *, .pgi-laad-totaal i { animation: none !important;}
    .pgi-laad-totaal i { width: var(--tot);}
}

/* Pop-ups: overlay, venster, kop met icoon en sluiten, inhoud (scrollt), voet met knoppen */
.pgi-modal { position: fixed; inset: 0; z-index: 1050; display: flex; align-items: center; justify-content: center; padding: 32px; overflow-y: auto; background: rgba(var(--primary-rgb), .55);}
.pgi-venster { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 800px; max-height: 100%; overflow: hidden; border-radius: var(--radius-md); background: var(--bg-secondary); box-shadow: 0 24px 32px var(--shadow-default); color: var(--text-default);}
.pgi-venster-staat, .pgi-venster-bijz { max-width: 664px; height: 768px; box-shadow: 0 24px 64px var(--shadow-default);}
.pgi-venster-ref { height: 660px;}
.pgi-mkop { position: relative; display: flex; flex: 0 0 auto; align-items: flex-start; gap: 14px; padding: 24px 24px 16px; border-bottom: 1px solid var(--stroke-secondary);}
.pgi-mkop-tegel { align-items: center; padding: 16px 16px 16px 24px;}
.pgi-mico { display: flex; flex: 0 0 48px; align-items: center; justify-content: center; height: 48px; border-radius: var(--radius-pitch-knop); background: var(--bg-subtle-01);}
.pgi-mico.groen { flex-basis: 56px; height: 56px; border-radius: var(--radius-sm); background: var(--bg-subtle-02);}
.pgi-mkop-tegel .pgi-mico img { transform: scale(1.2);}
.pgi-mtitel { display: flex; flex: 1; flex-direction: column; justify-content: center; gap: 6px; align-self: stretch; min-width: 0;}
.pgi-mtitel span { font-size: var(--label-sm-size); font-weight: var(--font-weight-label); line-height: var(--label-sm-line); color: var(--text-accent-01);}
.pgi-mtitel h3 { margin: 0; overflow-wrap: anywhere; font-family: var(--font-display); font-stretch: var(--font-display-stretch); font-weight: var(--font-weight-display); font-size: var(--display-sm-size); line-height: var(--display-sm-line); text-transform: uppercase; color: var(--text-default);}
.pgi-mkop-tegel .pgi-mtitel { gap: 0;}
.pgi-mkop-tegel h3 { font-size: var(--display-xs-size); line-height: var(--display-xs-line);}
.pgi-mtitel p { margin: 0; font-size: var(--body-sm-size); line-height: var(--body-sm-line); color: var(--text-secondary);}
.pgi-msluit { display: flex; flex: 0 0 44px; align-items: center; justify-content: center; height: 44px; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; cursor: pointer;}
.pgi-minhoud { display: flex; flex: 1; flex-direction: column; gap: 18px; min-height: 0; padding: 24px; overflow-y: auto;}
.pgi-mvoet { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px; border-top: 1px solid var(--stroke-secondary);}
.pgi-mvoet > .btn { min-width: 180px;}
.pgi-mvoet-vraag { flex-direction: column; align-items: stretch; gap: 16px; background: var(--bg-default);}
.pgi-mvraag { display: flex; align-items: flex-start; gap: 12px;}
.pgi-mvraag-ico { display: inline-flex; flex: 0 0 40px; align-items: center; justify-content: center; height: 40px; border-radius: var(--radius-sm); background: var(--bg-secondary); color: var(--icon-default, var(--primary));}
.pgi-mvraag p { display: flex; flex-direction: column; gap: 2px; margin: 0; font-size: var(--body-default-size); line-height: var(--body-default-line); color: var(--text-default);}
.pgi-mvraag span { font-size: var(--body-sm-size); line-height: var(--body-sm-line); color: var(--text-secondary);}
.pgi-mknoppen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;}
.pgi-mknoppen > span { display: flex; flex-wrap: wrap; gap: 12px;}
.pgi-mknoppen > span .btn { min-width: 150px;}
.pgi-mverder { text-decoration: underline; text-underline-offset: 3px;}
.pgi-venster-staat .pgi-mvoet > .btn, .pgi-venster-bijz .pgi-mvoet > .btn { min-width: 140px;}

/* Pop-up Keuken (staat/bijzonderheden): niveau, chips, eigen kenmerk, kleine klus, bedrag */
.pgi-groep { display: flex; flex-direction: column; gap: 12px;}
.pgi-glabel { font-size: var(--label-sm-size); font-weight: var(--font-weight-label); line-height: var(--label-sm-line); color: var(--text-default);}
.pgi-segment { display: flex; align-self: flex-start; width: max-content; max-width: 100%; padding: 3px; border: 1px solid var(--stroke-secondary); border-radius: var(--radius-sm); background: var(--bg-secondary);}
.pgi-segment button { flex: 0 0 120px; min-width: 0; height: 40px; padding: 0 12px; white-space: nowrap; border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--text-secondary); font-size: var(--label-sm-size); line-height: var(--label-sm-line); cursor: pointer;}
.pgi-segment button[aria-pressed="true"] { background: var(--icon-subtle-02); color: var(--text-default);}
.pgi-chips { display: flex; flex-wrap: wrap; gap: 8px;}
.pgi-chip { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 12px 16px; border: 1px solid var(--stroke-secondary); border-radius: var(--radius-sm); background: var(--bg-secondary); color: var(--text-secondary); font-size: var(--label-sm-size); line-height: var(--label-sm-line); cursor: pointer;}
.pgi-chip[aria-pressed="true"] { border-color: var(--stroke-default); background: var(--bg-subtle-02); color: var(--text-default);}
.pgi-chip.toe { border-style: dashed;}
.pgi-toevoegen { display: flex; gap: 8px;}
.pgi-veld { width: 100%; min-height: 48px; padding: 12px 16px; border: 1px solid var(--stroke-default); border-radius: var(--radius-sm); background: var(--bg-secondary); color: var(--text-default); font-size: var(--body-sm-size); line-height: var(--body-sm-line);}
.pgi-veld:focus { outline: 0; box-shadow: var(--shadow-focus);}
.pgi-veld::placeholder { color: var(--text-secondary); opacity: 1;}
textarea.pgi-veld { display: block; height: 110px; padding: 16px; resize: vertical;}
textarea.pgi-veld-kort { height: 80px;}
.pgi-klus { gap: 8px;}
.pgi-klus label { display: flex; align-items: center; gap: 8px; font-size: var(--label-sm-size); font-weight: var(--font-weight-label); line-height: var(--label-sm-line); cursor: pointer;}
.pgi-klus input[type="checkbox"] { width: 20px; height: 20px; margin: 0; accent-color: var(--primary);}
.pgi-stepper { display: flex; align-items: center; gap: 10px;}
.pgi-stepper button { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--stroke-default); border-radius: var(--radius-sm); background: transparent; cursor: pointer;}
.pgi-stepper strong { min-width: 140px; font-family: var(--font-display); font-stretch: var(--font-display-stretch); font-weight: var(--font-weight-display); font-size: var(--display-sm-size); line-height: var(--display-sm-line); text-align: center; text-transform: uppercase; white-space: nowrap;}

/* Pop-ups Vragen, Vraag, Vraag toevoegen, Kenmerk toevoegen */
.pgi-vragen { gap: 8px;}
.pgi-vraag { display: flex; align-items: flex-start; gap: 16px; width: 100%; padding: 16px; border: 1px solid var(--stroke-secondary); border-radius: var(--radius-sm); background: var(--bg-secondary); color: var(--text-default); text-align: left; cursor: pointer;}
.pgi-vraag.nieuw { align-items: center; border-style: dashed;}
.pgi-status { display: flex; flex: 0 0 26px; align-items: center; justify-content: center; height: 26px; border: 1.5px solid var(--stroke-accent-01); border-radius: 13px;}
.pgi-status.ok { border-color: var(--bg-accent-01); background: var(--bg-accent-01);}
.pgi-vraag-tekst { display: flex; flex: 1; flex-direction: column; gap: 8px; min-width: 0;}
.pgi-vraag-tekst strong { font-size: var(--title-default-size); font-weight: var(--font-weight-title); line-height: var(--title-default-line);}
.pgi-antw { display: -webkit-box; max-height: 37px; overflow: hidden; padding-left: 10px; border-left: 2px solid var(--icon-accent-01); -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: var(--body-sm-size); line-height: var(--body-sm-line); color: var(--text-secondary);}
.pgi-velden { gap: 16px;}
.pgi-veldgroep { display: flex; flex-direction: column; gap: 8px; margin: 0;}
.pgi-hint { margin: 0; font-size: var(--body-xs-size); line-height: var(--body-xs-line); color: var(--text-secondary);}

/* Pop-up Referentie: kop met beeld en match-label, cijferkaarten, vergelijking, waarom */
.pgi-refkop { align-items: center;}
.pgi-refkop .pgi-match { top: 32px; left: 20px;}
.pgi-refkop .pgi-match span { padding: 5px 0 5px 12px; font-size: var(--label-sm-size); line-height: var(--label-sm-line);}
.pgi-refbeeld { flex: 0 0 180px; height: 120px; margin-right: 2px;}
.pgi-refinhoud { gap: 16px;}
.pgi-cijfers4 { display: flex; gap: 8px;}
.pgi-cijfers4 > div { display: flex; flex: 1; flex-direction: column; gap: 8px; min-width: 0; padding: 16px; border-radius: var(--radius-sm); background: var(--bg-subtle-02); font-size: var(--label-xs-size); line-height: var(--label-xs-line); color: var(--text-default); white-space: nowrap;}
.pgi-cijfers4 strong { overflow: hidden; font-family: var(--font-display); font-stretch: var(--font-display-stretch); font-weight: var(--font-weight-display); font-size: var(--display-xs-size); line-height: var(--display-xs-line); text-transform: uppercase; text-overflow: ellipsis;}
.pgi-cijfers4 small { overflow: hidden; font-size: var(--label-xs-size); line-height: var(--label-xs-line); color: var(--text-secondary); text-overflow: ellipsis;}
.pgi-cijfers4 .donker { background: var(--bg-inverse); color: var(--text-inverse);}
.pgi-cijfers4 .donker small { color: var(--text-inverse-secondary);}
.pgi-vgl h4 { margin: 0; padding-bottom: 8px; font-size: var(--title-sm-size); font-weight: var(--font-weight-title); line-height: var(--title-sm-line); color: var(--text-default);}
.pgi-vgl table { width: 100%; border-collapse: collapse;}
.pgi-vgl th { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--stroke-secondary); font-size: var(--label-sm-size); font-weight: var(--font-weight-body); line-height: var(--label-sm-line); color: var(--text-secondary); text-align: left;}
.pgi-vgl td { padding: 7px 12px 7px 0; border-bottom: 1px solid var(--stroke-secondary); font-size: var(--body-sm-size); line-height: var(--body-sm-line); color: var(--text-default); vertical-align: middle;}
.pgi-vgl td:first-child { width: 150px; font-size: var(--label-sm-size); font-weight: var(--font-weight-label); line-height: var(--label-sm-line); color: var(--text-secondary);}
.pgi-vgl td:last-child, .pgi-vgl th:last-child { padding-right: 0; text-align: right;}
.pgi-vgl td.pgi-lang { text-align: left;}
.pgi-pil { display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--bg-subtle-02); font-size: var(--label-xs-size); font-weight: var(--font-weight-label); line-height: var(--label-xs-line); color: var(--text-default); white-space: nowrap;}
.pgi-pil.min { background: var(--bg-subtle-01);}
.pgi-waarom { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: var(--radius-sm); background: var(--bg-subtle-02); font-size: var(--body-sm-size); line-height: var(--body-sm-line); color: var(--text-default);}
.pgi-waarom strong { font-weight: var(--font-weight-title);}
.pgi-waarom p { margin: 0;}
.pgi-waarom .pgi-waarom-klein { font-size: var(--body-xs-size); line-height: var(--body-xs-line); color: var(--text-secondary);}

/* Smaller dan de tablet: kolommen onder elkaar, zijpaneel onder de inhoud */
@media (max-width: 768px) {
    .pgi-licht { height: auto;}
    .pgi-stap { flex-direction: column; gap: 24px; padding: 0 16px 24px;}
    .pgi-links { margin: 0; padding: 0; overflow: visible;}
    .pgi-balk { position: static;}
    .pgi-paneel { flex: 0 0 auto;}
    .pgi-paneel-lijst { flex: 0 0 auto;}
    .pgi-start { flex-direction: column; gap: 24px; padding: 24px 16px;}
    .pgi-start-tekst { flex: 0 0 auto; gap: 40px;}
    .pgi-start-huis { flex: 0 0 auto; padding: 0;}
    .pgi-start-3d { width: 260px; height: 273px;}
    .pgi-start-grond { top: 191px; width: 256px; height: 82px;}
    .pgi-start-woning { left: 30.5px; width: 229.5px; height: 273px;}
    .pgi-laad { flex-direction: column; align-items: stretch; gap: 32px; padding: 24px 16px;}
    .pgi-laad-uitleg, .pgi-laad-lijst { flex: 0 0 auto;}
    .pgi-modal { padding: 16px;}
    .pgi-cijfers4 { flex-wrap: wrap;}
    .pgi-cijfers4 > div { flex: 1 1 calc(50% - 4px);}
}
/* Telefoon: compacter, pop-ups schermvullend */
@media (max-width: 480px) {
    .pgi-opgeslagen { display: none;}
    .pgi-segment { width: 100%;}
    .pgi-segment button { flex: 1 1 0; padding: 0 4px;}
    .pgi-kaart { min-height: 0;}
    .pgi-beeld { flex-basis: 96px; height: 96px;}
    .pgi-huisje { transform: scale(.8);}
    .pgi-kaart-boven { flex-direction: column;}
    .pgi-kaart-vk { align-items: flex-start; text-align: left;}
    .pgi-kenm { flex-wrap: wrap; justify-content: flex-start; gap: 8px 16px;}
    .pgi-tegel { gap: 12px;}
    .pgi-tegel-ico { flex-basis: 40px; height: 40px;}
    .pgi-nav .btn { flex: 1; min-width: 0;}
    .pgi-cijfers { flex-wrap: wrap; justify-content: flex-start; gap: 16px 24px;}
    .pgi-modal { padding: 0;}
    .pgi-venster, .pgi-venster-staat, .pgi-venster-bijz, .pgi-venster-ref { max-width: none; height: 100%; max-height: none; border-radius: 0;}
    .pgi-mkop { padding: 16px;}
    .pgi-mkop-tegel { padding: 16px;}
    .pgi-minhoud { padding: 16px;}
    .pgi-mvoet { flex-wrap: wrap; gap: 8px; padding: 12px 16px;}
    .pgi-mvoet > .btn, .pgi-venster-staat .pgi-mvoet > .btn, .pgi-venster-bijz .pgi-mvoet > .btn { flex: 1; min-width: 0;}
    .pgi-stepper { order: -1; justify-content: center; width: 100%;}
    .pgi-refkop { flex-wrap: wrap;}
    .pgi-refbeeld { flex-basis: 120px; height: 80px;}
    .pgi-refkop .pgi-match { top: 24px; left: 12px;}
    .pgi-vgl { overflow-x: auto;}
    .pgi-vgl td:first-child { width: auto;}
}


/* --- Dia's van de presentatie (js/huysplan-dias.js): Figma "Pitch Generator | Powerhuys", sectie "Dia slide" --- */
.pgd-display { font-family: var(--font-display); font-stretch: var(--font-display-stretch); font-weight: 600; text-transform: uppercase; letter-spacing: 0;}
.pgd-dia { display: flex; flex: 1; flex-direction: column; min-height: 0; padding: 32px; color: var(--white);}
.pgd-dia h1, .pgd-dia h2, .pgd-dia h3 { margin: 0; color: var(--white);}
.pgd-dia hr { flex: 0 0 auto; width: 100%; height: 1px; margin: 0; border: 0; background: var(--white-20); opacity: 1;}
.pgd-nr { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(244.28deg, var(--gold-gradient-light) 7.28%, var(--secondary) 63.67%, var(--gold-gradient-dark) 100.37%); color: var(--primary); font-size: 24px; line-height: 24px;}
.pgd-leeg { margin: 0; font-size: 16px; line-height: 18.2px; color: var(--white-80);}
.pgd-foto-leeg { display: flex; align-items: center; justify-content: center; background: var(--white-10);}
.pgd-stat { display: flex; flex-direction: column; gap: 2px; white-space: nowrap;}
.pgd-stat span { font-size: 14px; line-height: 14px; color: var(--white-80); opacity: .8;}
.pgd-stat strong { font-size: 32px; line-height: 32px; color: var(--green-500);}

/* Vlaglabel (Label/Sneak Preview, Beschikbaar, Verkocht): tekstvlak met een vaandelpunt rechts */
.pgd-vlag { position: absolute; z-index: 2; display: flex; filter: drop-shadow(0 3.556px 3.556px rgba(var(--black-rgb), .25)); pointer-events: none;}
.pgd-vlag > span { padding: 5.36px 0 5.36px 10.667px; border-radius: 3.556px 0 0 3.556px; font-size: 14.22px; line-height: 14.22px; white-space: nowrap;}
.pgd-vlag img { width: 24.22px; height: 24.94px; margin-left: -.5px;}
.pgd-vlag-goud > span { background: var(--secondary); color: var(--white);}
.pgd-vlag-groen > span { background: var(--green-500); color: var(--primary);}
.pgd-vlag-roze > span { background: var(--pink-500); color: var(--white);}

/* 3D-huis (dia 1 en de woningkaart op dia 17): schaduw en huis op elkaar */
.pgd-huis { position: relative; display: block; aspect-ratio: 433.4 / 455;}
.pgd-huis img { position: absolute; height: auto;}
.pgd-huis-schaduw { left: 0; top: 70%; width: 98.3%;}
.pgd-huis-woning { left: 11.74%; top: 0; width: 88.26%;}

/* Dia 1: overzicht */
.pgd-overzicht { flex-direction: row; align-items: center; gap: 40px; padding: 0 0 0 40px;}
.pgd-overzicht-tekst { display: flex; flex: 0 1 472px; flex-direction: column; gap: 32px; min-width: 0;}
.pgd-overzicht-kop { display: flex; flex-direction: column; gap: 8px;}
.pgd-voor { font-size: 32px; line-height: 32px; color: var(--secondary);}
.pgd-overzicht h1 { font-size: 64px; line-height: 64px; overflow-wrap: anywhere;}
.pgd-pc { font-size: 18px; line-height: 23.4px; color: var(--white-80);}
.pgd-lijn-goud { height: 1px; margin: 0; border: 0; background: var(--secondary); opacity: 1;}
.pgd-kengetallen { display: flex; justify-content: space-between; gap: 16px;}
.pgd-kengetallen > div { display: flex; flex-direction: column; gap: 8px; white-space: nowrap;}
.pgd-kengetallen strong { font-size: 32px; line-height: 32px;}
.pgd-kengetallen span { font-size: 16px; line-height: 18.2px; color: var(--white-80);}
.pgd-overzicht-huis { flex: 0 1 433px; margin: 0 19px;}

/* Dia 2: prijsrange */
.pgd-prijsrange { gap: 24px;}
.pgd-prijsrange > h2 { font-size: 32px; line-height: 32px;}
.pgd-pr-kaart { display: flex; flex: 1; gap: 16px; min-height: 0; padding: 1px; border: 1px solid var(--white-20); border-radius: var(--radius-md); background: var(--white-10);}
.pgd-pr-meten { display: flex; flex: 1; flex-direction: column; gap: 8px; min-width: 0; padding: 32px 24px 24px;}
.pgd-pr-diagram { position: relative; flex: 1; min-height: 120px;}
.pgd-staven { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); align-items: end; column-gap: 8px; height: 100%;}
.pgd-staven i { display: block; border-radius: var(--radius-xs); background: var(--white-20);}
.pgd-staven i.in { background: rgba(var(--white-rgb), .5);}
.pgd-pr-waarde { position: absolute; top: -6%; bottom: 0; border-left: 1px dashed var(--white); pointer-events: none;}
.pgd-pr-waarde span { position: absolute; left: 8px; top: 0; font-size: 14px; line-height: 16.8px; color: var(--white-80); white-space: nowrap;}
.pgd-pr-waarde.links span { left: auto; right: 8px;}
.pgd-pr-spoor { position: relative; flex: 0 0 auto; height: 24px;}
.pgd-pr-spoor::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 8px; border-radius: var(--radius-xl); background: var(--white-20);}
.pgd-pr-band { position: absolute; top: 8px; height: 8px; border-radius: var(--radius-xl); background: linear-gradient(186.913deg, var(--gold-gradient-light) 7.283%, var(--secondary) 63.707%, var(--gold-gradient-dark) 100.39%);}
.pgd-pr-greep { position: absolute; top: 2px; width: 64px; height: 20px; border: 2px solid var(--white); border-radius: var(--radius-sm); background: var(--white-20);}
.pgd-pr-schuif { position: absolute; top: 0; width: calc(50% + 64px); height: 24px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer;}
.pgd-pr-schuif::-webkit-slider-runnable-track { height: 24px; background: transparent;}
.pgd-pr-schuif::-webkit-slider-thumb { width: 64px; height: 20px; margin-top: 2px; border: 2px solid var(--white); border-radius: var(--radius-sm); background: var(--white-20); -webkit-appearance: none; appearance: none;}
.pgd-pr-schuif::-moz-range-track { height: 24px; background: transparent;}
.pgd-pr-schuif::-moz-range-thumb { box-sizing: border-box; width: 64px; height: 20px; border: 2px solid var(--white); border-radius: var(--radius-sm); background: var(--white-20);}
.pgd-pr-schuif:focus-visible { outline: 0;}
.pgd-pr-schuif:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(var(--white-rgb), .4);}
.pgd-pr-schaal { display: flex; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px solid var(--white-20); font-size: 16px; line-height: 18.2px; color: var(--white-80);}
.pgd-pr-stats { display: flex; gap: 16px; padding-top: 8px;}
.pgd-pr-stats > div { display: flex; flex: 1; flex-direction: column; gap: 8px; min-width: 0;}
.pgd-pr-stats span { font-size: 14px; line-height: 14px; color: var(--white-80);}
.pgd-pr-stats strong { font-size: 32px; line-height: 32px;}
.pgd-goudvak { display: flex; flex: 0 0 304px; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 24px; border-radius: var(--radius-md); background: linear-gradient(253.148deg, var(--gold-gradient-light) 7.283%, var(--secondary) 63.707%, var(--gold-gradient-dark) 110.95%); color: var(--primary); text-align: center;}
.pgd-goudvak > span { font-size: 16px; line-height: 16px;}
.pgd-goudvak > div { display: flex; flex-direction: column; gap: 8px; width: 100%;}
.pgd-goudvak strong { font-size: 48px; line-height: 48px;}
.pgd-goudvak > div > span { font-size: 24px; font-weight: 500; line-height: 24px;}

/* Dia 3: week voor week */
.pgd-week { justify-content: center; gap: 19px;}
.pgd-week > h2 { max-width: 800px; font-size: 32px; line-height: 32px;}
.pgd-week > h2 span { color: var(--secondary);}
.pgd-fasen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 33px; align-items: start;}
.pgd-fase { display: flex; flex-direction: column; gap: 40px; min-width: 0;}
.pgd-fase-kaart { position: relative; display: flex; flex-direction: column; gap: 9px; height: 180px; padding: 8px; border: 1px solid var(--white-20); border-radius: 12px; background: var(--white-10);}
.pgd-fase-kaart > img:first-child { display: block;}
.pgd-fase-foto { display: block; flex: 1; width: 100%; min-height: 0; border-radius: 6px; object-fit: cover;}
.pgd-foto-streep { display: flex; border: 1px dashed var(--white);}
.pgd-fase-tekst { display: flex; flex-direction: column; justify-content: center; gap: 6px; height: 42px; min-width: 0;}
.pgd-fase-tekst strong { overflow: hidden; font-size: 16px; font-weight: 500; line-height: 18.2px; white-space: nowrap; text-overflow: ellipsis;}
.pgd-fase-tekst span { font-size: 14px; line-height: 16.8px; white-space: nowrap;}
.pgd-balkje { display: block; width: 102px; height: 8px; border-radius: 3px; background: var(--white-80);}
.pgd-balkje.kort { width: 64px; height: 6px;}
.pgd-fase-kaart .pgd-vlag { left: 4px; top: 25.58px;}
.pgd-sleutel { position: relative; height: 180px;}
.pgd-sleutel-img { position: absolute; left: 35px; top: 42px; width: 153.6px; height: auto; transform: rotate(12deg);}
.pgd-glans { position: absolute; height: auto;}
.pgd-glans-1 { left: 30px; top: 40px; width: 12px;}
.pgd-glans-2 { left: 126px; top: 38px; width: 17.22px;}
.pgd-glans-3 { left: 45px; top: 125px; width: 8px;}
.pgd-sleutel .pgd-vlag { left: 6px; top: 26.58px;}
.pgd-fase-label { display: flex; align-items: center; gap: 10px; min-width: 0;}
.pgd-fase-label > span { display: flex; flex-direction: column; gap: 2px; min-width: 0;}
.pgd-fase-label strong { font-size: 24px; line-height: 24px;}
.pgd-fase-label small { font-size: 12px; white-space: nowrap; color: var(--white-80);}

/* Hoofdstukkop en tijdlijn van de stapdia's (4–14) */
.pgd-stapdia { padding: 32px 0 0;}
.pgd-hst { display: flex; align-items: center; gap: 16px; padding: 0 32px;}
.pgd-hst .pgd-nr { width: 48px; height: 48px; border-radius: 12px; font-size: 32px; line-height: 32px;}
.pgd-hst h2 { font-size: 32px; line-height: 32px;}
.pgd-tijdlijn { position: relative; flex: 0 0 auto; height: 36px; margin-top: 21px;}
.pgd-tijdlijn::before { content: ""; position: absolute; left: 0; right: 0; top: 16.5px; height: 3px; border-radius: 2px; background: rgba(var(--white-rgb), .15);}
.pgd-tijdlijn-start::after { content: ""; position: absolute; left: 72px; top: 16.5px; width: min(680px, calc(100% - 72px)); height: 3px; border-radius: 2px; background: linear-gradient(to right, var(--secondary), var(--gold-gradient-light));}
.pgd-tijdlijn i { position: absolute; z-index: 1; left: 50px; top: 0; width: 36px; height: 36px; border: 2px solid var(--white-20); border-radius: 50%; background: var(--primary);}
.pgd-tijdlijn-start i { border: 0; background: rgba(var(--secondary-rgb), .5);}
.pgd-tijdlijn-start i::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--secondary);}
.pgd-stap { display: flex; flex: 0 0 348px; align-items: center; gap: 24px; min-height: 0; margin-top: 24px; padding: 24px 56px;}
.pgd-stap-tekst { display: flex; flex: 1; flex-direction: column; gap: 40px; min-width: 0;}
.pgd-stap-inhoud { display: flex; flex-direction: column; gap: 12px;}
.pgd-stap-inhoud h3 { font-size: 32px; line-height: 32px;}
.pgd-vinken { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none;}
.pgd-vinken li { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; line-height: 18.2px;}
.pgd-vinken img { flex: 0 0 auto; width: 20px; height: 20px;}
/* "Zo ziet het eruit": vak van 320×300; de mockups (1× uit Figma) staan op hun plek uit het ontwerp en steken het tekstvlak in */
.pgd-stap-beeld { position: relative; display: flex; flex: 0 0 320px; align-items: center; justify-content: center; height: 300px;}
.pgd-mock { position: absolute; display: block; max-width: none; height: auto;}
.pgd-mock-d05 { left: -36px; top: -1px;}
.pgd-mock-d06 { left: -58px; top: -41px;}
.pgd-mock-d08 { left: -118px; top: 32px;}
.pgd-mock-d09 { left: -48px; top: -26px;}
.pgd-mock-d11 { left: -36px; top: -9px;}
.pgd-mock-d12 { left: -153px; top: -51px;}
/* Mockups met de voorbeeldwoning van het kantoor (dia 6, 8, 9, 11, 12), nagebouwd naar de beelden uit het ontwerp */
.pgd-nm { width: 400px; height: 400px; font-size: 8px; line-height: 1.3;}
.pgd-nm-d06 { width: 400px; height: 407px;}
.pgd-nm-d08 { width: 456px; height: 275px;}
.pgd-nm-d09 { width: 365px; height: 365px;}
.pgd-nm-d11 { width: 393px; height: 375px;}
.pgd-nm-d12 { width: 505px; height: 365px;}
.pgd-nm img { display: block; max-width: none;}
.pgd-nm p { margin: 0; font-size: inherit; line-height: inherit;}
.pgd-nm-avatar { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--deel-avatar); font-size: 8px; font-style: normal; font-weight: 500; color: var(--white);}
.pgd-nm-kop { display: flex; align-items: center; gap: 6px; padding: 7px 8px;}
.pgd-nm-kop span { display: flex; flex-direction: column; min-width: 0;}
.pgd-nm-kop b { overflow: hidden; font-size: 8px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis;}
.pgd-nm-kop small { font-size: 7px; color: var(--deel-fb-tekst-secundair);}
/* Deelbeeld: foto met verloop, logo, stempel en de gegevens onderaan */
.pgd-db { position: relative; overflow: hidden; color: var(--white);}
.pgd-db::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(to bottom, rgba(var(--primary-rgb), 0), rgba(var(--primary-rgb), .85));}
.pgd-db-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;}
.pgd-db-logo { position: absolute; z-index: 1; left: 8px; top: 8px; display: flex; align-items: center; gap: 3px; font-size: 7px; font-weight: 600; letter-spacing: .02em;}
.pgd-db-logo img { filter: brightness(0) invert(1);}
.pgd-db-stempel { position: absolute; z-index: 1; right: 8px; top: 8px; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 4px; border-radius: 50%; background: var(--pink-500); font-size: 6px; font-weight: 600; line-height: 1.1; text-align: center; text-transform: uppercase; color: var(--white); transform: rotate(-12deg);}
.pgd-db-tekst { position: absolute; z-index: 1; left: 8px; right: 8px; bottom: 8px; display: flex; flex-direction: column; gap: 1px;}
.pgd-db-tekst strong { font-size: 13px; line-height: 1; text-transform: uppercase;}
.pgd-db-tekst b { margin-top: 3px; font-size: 11px; line-height: 1;}
.pgd-db-tekst small { font-size: 6px; color: var(--white-80);}
.pgd-db-link { height: 92px;}
.pgd-db-post { height: 205px;}
.pgd-db-post .pgd-db-tekst strong { font-size: 17px;}
.pgd-db-post .pgd-db-tekst b { font-size: 13px;}
.pgd-db-post .pgd-db-tekst small { font-size: 7px;}
.pgd-db-post .pgd-db-logo { font-size: 9px;}
.pgd-db-fb { flex: 1; min-height: 0;}
.pgd-db-story { position: absolute; inset: 0;}
.pgd-db-story .pgd-db-foto { height: 62%;}
.pgd-db-story::after { inset: 0; background: linear-gradient(to bottom, rgba(var(--primary-rgb), 0) 30%, var(--primary) 62%);}
.pgd-db-story .pgd-db-tekst { bottom: 72px;}
.pgd-db-story .pgd-db-stempel { top: auto; bottom: 134px; width: 46px; height: 46px; font-size: 7px;}
/* Instagram-post, story, e-mail en Facebook-post */
.pgd-nm-ig, .pgd-nm-mail, .pgd-nm-fb, .pgd-nm-story { position: absolute; overflow: hidden; border-radius: 10px; color: var(--deel-fb-tekst); box-shadow: var(--shadow-float);}
.pgd-nm-ig { background: var(--white);}
.pgd-nm-ig-voet { padding: 6px 8px; font-size: 8.5px;}
.pgd-nm-ig-voet p { margin: 3px 0 0;}
.pgd-nm-ig-voet small { display: block; margin-top: 3px; color: var(--deel-ig-tekst-secundair);}
.pgd-nm-ig-iconen { display: flex; gap: 6px; margin-bottom: 4px;}
.pgd-nm-ig-kort { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; padding: 8px 10px; font-size: 6.5px;}
.pgd-nm-ig-kort p { align-self: stretch; margin: 0;}
.pgd-nm-ig .pgd-nm-avatar { box-shadow: 0 0 0 1.5px var(--white), 0 0 0 3px var(--pink-500);}
.pgd-nm-meer { margin-left: auto; font-size: 6px; font-style: normal; letter-spacing: 1px;}
.pgd-nm-story { background: var(--primary); color: var(--white);}
.pgd-nm-story-balk { position: absolute; z-index: 1; left: 8px; right: 8px; top: 6px; height: 2px; border-radius: 1px; background: var(--white-80);}
.pgd-nm-story-kop { position: absolute; z-index: 1; left: 8px; right: 8px; top: 14px; display: flex; align-items: center; gap: 5px; font-size: 7px;}
.pgd-nm-story-kop small { color: var(--white-80);}
.pgd-nm-story-kop .pgd-nm-meer { font-size: 7px;}
.pgd-nm-sluit { font-size: 16px; font-style: normal; line-height: 1;}
.pgd-nm-bericht { position: absolute; z-index: 1; left: 8px; right: 8px; bottom: 10px; display: flex; align-items: center; gap: 8px; font-size: 8px;}
.pgd-nm-bericht span { flex: 1; padding: 6px 10px; border: 1px solid var(--white-80); border-radius: 14px;}
.pgd-nm-wit { filter: brightness(0) invert(1);}
.pgd-nm-story-bericht .pgd-db-tekst { bottom: 92px;}
.pgd-nm-story-bericht .pgd-db-stempel { bottom: 150px;}
.pgd-nm-story-bericht .pgd-nm-story-link { bottom: 52px;}
.pgd-nm-story .pgd-nm-avatar { box-shadow: 0 0 0 1.5px var(--primary), 0 0 0 3px var(--pink-500);}
.pgd-nm-story-link { position: absolute; z-index: 1; left: 8px; bottom: 34px; display: flex; align-items: center; gap: 3px; padding: 4px 7px; border-radius: 4px; background: var(--white); font-size: 11px; font-weight: 600; color: var(--deel-igs-link);}
.pgd-nm-mail { padding: 4px; border: 2px solid var(--deel-wa-rand); background: var(--deel-wa-bubbel); color: var(--deel-wa-tekst);}
.pgd-nm-mail .pgd-db-link { border-radius: 6px 6px 0 0;}
.pgd-nm-mail-link { display: flex; flex-direction: column; gap: 1px; padding: 6px 8px; border-radius: 0 0 6px 6px; background: var(--deel-wa-rand); font-size: 8px;}
.pgd-nm-mail-link small { color: var(--deel-wa-tekst-secundair);}
.pgd-nm-mail-tekst { padding: 10px 6px; font-size: 9.5px; line-height: 1.35;}
.pgd-nm-mail-tekst p { margin: 12px 0 0;}
.pgd-nm-fb { display: flex; flex-direction: column; background: var(--white);}
.pgd-nm-fb > p { margin: 0; padding: 2px 12px 8px; font-size: 8.5px; line-height: 12.5px;}
.pgd-nm-fb .pgd-nm-kop { padding: 10px 12px 6px;}
.pgd-nm-fb .pgd-nm-kop b { font-size: 9.5px;}
.pgd-nm-fb-voet { display: flex; justify-content: space-between; padding: 7px 14px; font-size: 7.5px; color: var(--deel-fb-tekst-secundair);}
.pgd-nm-rond { position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center; width: 90px; height: 90px; border-radius: 50%; background: var(--pink-500); font-size: 16px; font-weight: 500; line-height: 1.05; text-align: center; color: var(--white); transform: rotate(8deg);}
.pgd-nm-bereikt { position: absolute; z-index: 2; display: flex; flex-direction: column; padding: 10px 16px; border-radius: 8px; background: var(--green-500); box-shadow: var(--shadow-float); color: var(--primary);}
.pgd-nm-bereikt span { font-size: 14px;}
.pgd-nm-bereikt strong { font-size: 30px; line-height: 1;}
.pgd-nm-label { position: absolute; z-index: 2; display: flex; flex-direction: column; padding: 8px 14px; border-left: 4px solid var(--secondary); border-radius: 6px; background: var(--tertiary); box-shadow: var(--shadow-float); font-size: 20px; line-height: 1.15; color: var(--primary);}
.pgd-nm-label span:last-child { color: var(--primary-600);}
/* Laptop met de woningpagina */
.pgd-nm-laptop { position: absolute;}
.pgd-nm-scherm { position: absolute; left: 7%; right: 7%; top: 0; bottom: 14px; overflow: hidden; border: 7px solid var(--black); border-bottom-width: 10px; border-radius: 12px 12px 0 0; background: var(--tertiary); color: var(--primary);}
.pgd-nm-voet { position: absolute; left: 0; right: 0; bottom: 0; height: 14px; border-radius: 0 0 14px 14px; background: linear-gradient(to bottom, var(--pitch-laptop-licht), var(--pitch-laptop-donker));}
.pgd-nm-site-kop { display: flex; align-items: center; gap: 10px; margin: 6px 8px; padding: 5px 8px; border-radius: 6px; background: var(--white); font-size: 6px; color: var(--primary-600);}
.pgd-nm-site-logo { display: flex; align-items: center; gap: 3px; margin-right: 6px; font-size: 8px; font-weight: 600; color: var(--primary);}
.pgd-nm-site-pad { margin: 0 10px 4px; font-size: 5.5px; color: var(--primary-600);}
.pgd-nm-site-fotos { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; height: 52%; margin: 0 10px; overflow: hidden; border-radius: 6px;}
.pgd-nm-site-fotos img { width: 100%; height: 100%; object-fit: cover;}
.pgd-nm-site-fotos img.groot { grid-row: span 2;}
.pgd-nm-site-info { display: flex; flex-direction: column; gap: 2px; margin: 8px 12px; font-size: 6px;}
.pgd-nm-site-info strong { font-size: 10px; font-weight: 500;}
.pgd-nm-site-info b { margin-top: 3px; font-size: 9px; font-weight: 600;}
/* Plaats per dia (gemeten op de beelden uit het ontwerp) */
/* Dia 6: hoekpunt linksboven en draaiing gemeten op het beeld uit Figma (draaien om die hoek) */
.pgd-nm-d06 .pgd-nm-mail { z-index: 1; left: 11px; top: 77px; width: 186px; height: 420px; transform: rotate(-5deg); transform-origin: 0 0;}
.pgd-nm-d06 .pgd-nm-ig { left: 200px; top: 40px; width: 184px; height: 400px; transform: rotate(7deg); transform-origin: 0 0;}
.pgd-nm-d06 .pgd-db-post { height: 245px;}
.pgd-nm-d06 .pgd-nm-rond { left: 125px; top: 3px;}
.pgd-nm-d08 .pgd-nm-laptop { inset: 0;}
/* Dia 9: hoekpunt linksboven en draaiing gemeten op het beeld uit Figma (draaien om die hoek) */
.pgd-nm-d09 .pgd-nm-fb { left: 74px; top: 26px; width: 258px; height: 327px; transform: rotate(-4deg); transform-origin: 0 0;}
.pgd-nm-d09 .pgd-nm-bereikt { left: 10px; top: 159px; width: 120px; height: 83px; justify-content: center; transform: rotate(4deg); transform-origin: 0 0;}
/* Dia 11: hoekpunt linksboven en draaiing gemeten op het beeld uit Figma (draaien om die hoek) */
.pgd-nm-d11 .pgd-nm-ig { left: 7px; top: 24px; width: 170px; height: 350px; transform: rotate(-5.4deg); transform-origin: 0 0;}
.pgd-nm-d11 .pgd-db-post { height: 208px;}
.pgd-nm-d11 .pgd-db-post .pgd-db-tekst strong { font-size: 14px;}
.pgd-nm-d11 .pgd-nm-ig-voet { font-size: 6.5px;}
.pgd-nm-d11 .pgd-nm-story { left: 180px; top: 27px; width: 206px; height: 345px; transform: rotate(5.8deg); transform-origin: 0 0;}
.pgd-nm-story .pgd-db-tekst strong { font-size: 17px;}
.pgd-nm-story .pgd-db-tekst b { font-size: 14px;}
.pgd-nm-story .pgd-db-tekst small { font-size: 7px;}
/* Dia 12: plaats, maat en draaiing gemeten op het beeld uit Figma (de story draait om de hoek linksboven) */
.pgd-nm-d12 .pgd-nm-laptop { left: 5px; top: 83px; width: 455px; height: 270px;}
.pgd-nm-d12 .pgd-nm-story { left: 325px; top: 6px; width: 174px; height: 305px; transform: rotate(6.9deg); transform-origin: 0 0;}
.pgd-nm-d12 .pgd-nm-label { left: 173px; top: 37px; width: 178px; height: 63px; justify-content: center; font-size: 21px;}
.pgd-stats2 { display: flex; gap: 32px;}
.pgd-stats2 .pgd-stat { flex: 0 0 256px;}

/* Dia 4: tekst boven, vier voorbeelden eronder (lopen onderaan door tot de navigatie) */
.pgd-stap-boven { flex: 1; align-items: stretch; overflow: hidden; margin-bottom: -10px; padding: 10px 56px 0;}
.pgd-stap-boven .pgd-stap-tekst { gap: 40px;}
/* Dia 6 en 11: de afbeelding staat op de lijn boven de knoppen (ontwerp) */
.pgd-stap-onder { flex: 1; align-items: stretch; overflow: hidden; margin: 0 0 -10px; padding-bottom: 0;}
.pgd-stap-onder .pgd-stap-tekst { justify-content: center; padding-bottom: 80px;}
.pgd-stap-onder .pgd-stap-beeld { height: auto;}
.pgd-stap-onder .pgd-mock { top: auto; bottom: 0;}
.pgd-zo-rij { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; flex: 1; min-height: 0;}
.pgd-zo { display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; min-width: 0; min-height: 0; filter: drop-shadow(0 8px 9px rgba(var(--black-rgb), .25));}
.pgd-zo-kop { display: flex; align-items: center; gap: 4px;}
.pgd-zo-ico { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 24px; height: 24px;}
.pgd-zo-kop strong { flex: 1; font-size: 16px; font-weight: 500; line-height: 16px; white-space: nowrap;}
.pgd-zo-kop > span:last-child { font-size: 14px; line-height: 14px; color: var(--white-80); white-space: nowrap;}
.pgd-zo-vlak { position: relative; flex: 1; min-height: 160px; max-height: 214px; overflow: hidden; border-radius: var(--radius-sm) var(--radius-sm) 0 0;}
.pgd-plattegrond { background: var(--plattegrond-vlak); color: var(--plattegrond-tekst);}
.pgd-pl-tekening { position: absolute; left: 4.6%; top: 34px; width: 90.7%; height: auto;}
.pgd-pl-ruimte { position: absolute; font-size: 6.5px; font-weight: 500; line-height: 8px; white-space: nowrap;}
.pgd-pl-keuken { left: 12.5%; top: 54px;}
.pgd-pl-eethoek { left: 11%; top: 87px;}
.pgd-pl-woonkamer { left: 65%; top: 76px;}
.pgd-pl-som { position: absolute; left: 0; right: 0; top: 158px; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center;}
.pgd-pl-som strong { font-size: 9px; font-weight: 500;}
.pgd-pl-som span { font-size: 8px; color: var(--plattegrond-tekst-secundair);}
.pgd-styling > img { position: absolute; top: 0; left: 50%; width: auto; height: 214px; max-width: none; transform: translateX(-50%);}
.pgd-styling-na { clip-path: inset(0 0 0 50%);}
.pgd-styling-lijn { position: absolute; left: calc(50% - 1px); top: 0; bottom: 0; width: 2.5px; background: var(--white);}
.pgd-styling-greep { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--white); box-shadow: 0 8px 16px rgba(var(--black-rgb), .22); transform: translate(-50%, -50%);}
.pgd-fotografie { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; padding: 12px;}
.pgd-fotografie::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(var(--black-rgb), 0) 55%, rgba(var(--black-rgb), .55) 100%);}
.pgd-fotografie-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;}
.pgd-foto-teller { position: relative; z-index: 1; padding: 4px 8px; border-radius: var(--radius-xs); background: var(--white); color: var(--primary); font-size: 14px; line-height: 14px;}
.pgd-miniaturen { position: relative; z-index: 1; display: flex; gap: 6px; width: 100%;}
.pgd-miniaturen img { flex: 1; min-width: 0; height: 44px; border: 1px solid var(--white); border-radius: 6px; object-fit: cover; opacity: .85;}
.pgd-miniaturen img.nu { border-width: 2px; opacity: 1;}
.pgd-video { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; padding: 8px; background: linear-gradient(to bottom, rgba(var(--black-rgb), .15) 0%, rgba(var(--black-rgb), .05) 50%, rgba(var(--black-rgb), .65) 100%), url(/assets/images/pitch-d04-styling-na.jpg) center / cover;}
.pgd-video-speel { position: absolute; left: 50%; top: 42%; display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; border-radius: var(--radius-xl); background: rgba(var(--white-rgb), .6); backdrop-filter: blur(5px); transform: translate(-50%, -50%);}
.pgd-video-balk { position: relative; width: 100%; height: 12px;}
.pgd-video-balk::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 4px; border-radius: 2px; background: rgba(var(--white-rgb), .35);}
.pgd-video-balk::after { content: ""; position: absolute; left: 0; top: 4px; width: 40%; height: 4px; border-radius: 2px; background: var(--pink-500);}
.pgd-video-balk i { position: absolute; z-index: 1; left: calc(40% - 6px); top: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--pink-500);}
.pgd-video-tijd { display: flex; justify-content: space-between; width: 100%; font-size: 14px; line-height: 14px;}
.pgd-video-tijd span { padding: 4px 8px;}

/* Dia 5: documenten */
.pgd-tags { display: flex; flex-wrap: wrap; gap: 8px;}
.pgd-tags span { padding: 8px 10px; border: 1px solid var(--white-20); border-radius: 6px; background: var(--white-10); font-size: 14px; line-height: 16px; color: var(--white-80);}

/* Dia 7: prijs vaststellen */
.pgd-stap-res { gap: 40px;}
.pgd-stap-res .pgd-stap-beeld, .pgd-stap-agenda .pgd-stap-beeld { flex: 0 0 auto; height: auto;}
.pgd-app { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px 12px 12px; border-radius: var(--radius-sm); background: var(--pink-500); color: var(--white);}
.pgd-app strong { font-size: 16px; font-weight: 500; line-height: 18.2px;}
.pgd-app span { font-size: 14px; line-height: 16.8px;}
.pgd-res { display: flex; flex-direction: column; gap: 16px; width: 400px; max-width: 100%; padding: 16px; overflow: hidden; border-radius: 14px; background: var(--tertiary); box-shadow: 0 12px 28px rgba(var(--black-rgb), .3); color: var(--primary);}
.pgd-res-kop { display: flex; align-items: center; gap: 12px;}
.pgd-res-kop strong { font-size: 24px; line-height: 24px;}
.pgd-res-kop i { width: 10px; height: 10px; border-radius: 50%; background: var(--pink-500);}
.pgd-res-cijfers { display: flex; gap: 8px;}
.pgd-res-cijfers > div { display: flex; flex: 1; flex-direction: column; gap: 4px; min-width: 0; padding: 12px; border-radius: var(--radius-sm); background: var(--white);}
.pgd-res-cijfers strong { font-size: 24px; line-height: 24px;}
.pgd-res-cijfers span { font-size: 14px; line-height: 14px; color: var(--primary-600);}
.pgd-res-cijfers .roze { background: var(--pink-500); color: var(--white);}
.pgd-res-cijfers .roze span { color: var(--white);}
.pgd-res-staven { display: flex; align-items: flex-end; gap: 8px;}
.pgd-res-staven > div { display: flex; flex: 1; flex-direction: column; gap: 4px; min-width: 0; text-align: center;}
.pgd-res-staven b { font-size: 16px; font-weight: 500; line-height: 16px;}
.pgd-res-staven i { display: block; width: 100%; border-radius: var(--radius-xs); background: rgba(var(--primary-rgb), .1);}
.pgd-res-staven .hoog i { background: var(--pink-500);}
.pgd-res-staven span { font-size: 10px; line-height: 14px; color: var(--primary-600); white-space: nowrap;}
.pgd-res-advies { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; border-radius: 10px; background: var(--pink-500); color: var(--white); white-space: nowrap;}
.pgd-res-advies span { font-size: 14px; line-height: 14px;}
.pgd-res-advies strong { font-size: 24px; line-height: 24px;}

/* Dia 8: sticker op de laptop */
.pgd-sticker { position: absolute; z-index: 1; left: 251px; top: 0; display: flex; align-items: center; justify-content: center; width: 92px; height: 92px; padding: 8px; border-radius: 50%; background: var(--pink-500); color: var(--white); font-size: 16px; font-weight: 500; line-height: 16px; text-align: center; transform: rotate(8deg);}

/* Dia 10: buurt met buurkaart */
.pgd-buurt { position: relative; width: 320px; max-width: 100%;}
.pgd-buurt-raster { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 24px; padding: 16px 12px;}
.pgd-buurt-raster i { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; padding: 2px;}
.pgd-buurt-raster img { width: 100%; height: auto;}
.pgd-buurt-raster i.mid { opacity: .7;}
.pgd-buurt-raster i.ver { opacity: .4;}
.pgd-buurkaart { position: absolute; left: 140px; top: 190px; display: flex; flex-direction: column; gap: 8px; width: 190px; padding: 12px; border: 1px solid rgba(var(--green-500-rgb), .6); border-radius: 10px; background: var(--primary); box-shadow: 0 14px 32px rgba(var(--black-rgb), .35); transform: rotate(4deg);}
.pgd-buurkaart strong { font-size: 16px; font-weight: 500; line-height: 16px; color: var(--green-500);}
.pgd-buurkaart > div { display: flex; align-items: flex-start; gap: 8px;}
.pgd-buurkaart span { flex: 1; font-size: 10px; line-height: 14px;}
.pgd-qr { position: relative; flex: 0 0 48px; display: grid; grid-template-columns: repeat(4, 8px); gap: 2px; width: 48px; height: 48px; padding: 5px; border-radius: var(--radius-xs); background: var(--white);}
.pgd-qr b { width: 8px; height: 8px; border-radius: 1px; background: var(--primary);}
.pgd-qr b:nth-child(3n) { background: transparent;}

/* Dia 13: bezichtigingen met de weekagenda */
.pgd-totaal { display: inline-flex; align-items: center; align-self: flex-start; gap: 12px; padding: 10px 16px; border-radius: 12px; background: linear-gradient(202.315deg, var(--gold-gradient-light) 7.28%, var(--secondary) 63.67%, var(--gold-gradient-dark) 100.37%); color: var(--primary); white-space: nowrap;}
.pgd-totaal strong { font-size: 32px; line-height: 32px;}
.pgd-totaal span { font-size: 16px; font-weight: 500; line-height: 16px;}
.pgd-agenda { display: grid; grid-template-columns: auto repeat(3, 120px); grid-auto-rows: auto; gap: 8px; padding: 12px; border-radius: 14px; background: var(--white); box-shadow: 0 14px 32px rgba(var(--black-rgb), .35); color: var(--primary);}
.pgd-agenda > b { font-size: 16px; font-weight: 500; line-height: 16px; text-align: center;}
.pgd-agenda hr { grid-column: 2 / span 3; height: 1px; background: rgba(var(--primary-rgb), .08);}
.pgd-agenda-tijd { align-self: center; font-size: 14px; line-height: 14px; color: var(--primary-600); white-space: nowrap;}
.pgd-afspraak { display: flex; flex-direction: column; gap: 6px; min-height: 42px; padding: 8px; overflow: hidden; border-left: 4px solid; border-radius: 6px; font-size: 14px; line-height: 14px;}
.pgd-afspraak span + span { color: var(--primary-600); white-space: nowrap;}
.pgd-afspraak-funda { border-color: var(--green-500); background: var(--green-200);}
.pgd-afspraak-remarketing { border-color: var(--gold-gradient-light); background: rgba(var(--gold-gradient-light-rgb), .35);}
.pgd-afspraak-sp { border-color: var(--secondary); background: rgba(var(--secondary-rgb), .35);}
.pgd-afspraak-social { border-color: var(--pink-500); background: var(--pink-200);}

/* Dia 14: biedingen */
.pgd-boden { display: flex; flex-direction: column; gap: 12px; width: 320px; max-width: 100%; padding: 14px 0;}
.pgd-bod { display: flex; flex-direction: column; gap: 12px; width: calc(100% - 12px); padding: 16px; overflow: hidden; border-radius: 12px; background: var(--white); box-shadow: 0 14px 32px rgba(var(--black-rgb), .35); color: var(--primary);}
.pgd-bod.advies { align-self: flex-end; background: linear-gradient(210.673deg, var(--gold-gradient-light) 7.28%, var(--secondary) 63.67%, var(--gold-gradient-dark) 100.37%);}
.pgd-bod-kop { display: flex; align-items: center; gap: 16px; min-height: 20px;}
.pgd-bod-kop strong { flex: 1; font-size: 16px; font-weight: 500; line-height: 16px;}
.pgd-bod-kop span { padding: 3px 8px; border-radius: var(--radius-xs); background: var(--primary); color: var(--white); font-size: 14px; line-height: 14px; white-space: nowrap;}
.pgd-bod-balken { display: flex; gap: 8px;}
.pgd-bod-balken > div { display: flex; flex: 1; flex-direction: column; gap: 8px; min-width: 0;}
.pgd-bod-balken span { font-size: 14px; line-height: 14px; opacity: .8;}
.pgd-bod-balken i { display: block; height: 6px; border-radius: 3px; background: rgba(var(--primary-rgb), .12);}
.pgd-bod-balken b { display: block; height: 6px; border-radius: 3px; background: var(--green-500);}
.pgd-bod.advies .pgd-bod-balken b { background: var(--primary);}

/* Dia 15: bewijs */
.pgd-bewijs { gap: 32px;}
.pgd-bewijs > h2 { font-size: 32px; line-height: 32px;}
.pgd-bewijs > h2 span { color: var(--secondary);}
.pgd-bewijs-rij { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;}
.pgd-bewijs-kaart { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 8px; border-radius: var(--radius-sm); background: var(--white); color: var(--primary); filter: drop-shadow(0 2px 8px rgba(var(--black-rgb), .25));}
.pgd-bewijs-foto { display: block; flex: 0 0 194px; width: 100%; border-radius: var(--radius-xs); object-fit: cover;}
.pgd-bewijs-foto.pgd-foto-leeg { background: rgba(var(--primary-rgb), .2);}
.pgd-bewijs-kaart .pgd-vlag { left: -4px; top: 16px;}
.pgd-bewijs-kaart .pgd-vlag > span { padding: 6.78px 0 6.78px 12px; border-radius: 4px 0 0 4px; font-size: 14px; line-height: 14px;}
.pgd-bewijs-kaart .pgd-vlag img { width: 26.77px; height: 27.57px;}
.pgd-bewijs-tekst { display: flex; flex-direction: column; gap: 12px; flex: 1; padding: 4px;}
.pgd-bewijs-tekst .pgd-bewijs-onder { margin-top: auto;}
.pgd-bewijs-tekst hr { background: rgba(var(--primary-rgb), .2);}
.pgd-bewijs-adres { display: flex; flex-direction: column;}
.pgd-bewijs-adres strong { overflow: hidden; font-size: 16px; font-weight: 500; line-height: 19.2px; white-space: nowrap; text-overflow: ellipsis;}
.pgd-bewijs-adres span { font-size: 14px; line-height: 18.2px; color: rgba(var(--primary-rgb), .8);}
.pgd-bewijs-vk { display: flex; flex-direction: column; gap: 4px;}
.pgd-bewijs-vk > span { font-size: 12px; line-height: 12px; color: var(--primary-600); white-space: nowrap;}
.pgd-bewijs-vk > div { display: flex; align-items: center; gap: 4px;}
.pgd-bewijs-vk strong { font-size: 18px; line-height: 21.6px; white-space: nowrap;}
.pgd-chip { padding: 4px 8px; border-radius: var(--radius-xs); background: var(--green-500); font-size: 12px; font-weight: 500; line-height: 12px;}
.pgd-bewijs-stats { display: flex; justify-content: space-between; gap: 8px; white-space: nowrap;}
.pgd-bewijs-stats > div { display: flex; flex-direction: column; gap: 4px;}
.pgd-bewijs-stats span { font-size: 12px; line-height: 12px; color: var(--primary-600);}
.pgd-bewijs-stats strong { font-size: 16px; line-height: 19.2px;}
.pgd-bewijs-link { display: flex; align-items: center; gap: 8px; min-height: 20px; color: var(--secondary); font-size: 14px; line-height: 14px; text-decoration: none;}
.pgd-bewijs-link img { margin-left: auto;}

/* Dia 16: vragen (de lijst scrolt binnen de dia als hij niet past) */
.pgd-vragen { gap: 21.584px;}
.pgd-vragen-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;}
.pgd-vragen-kop > div { display: flex; flex-direction: column; gap: 7.195px; max-width: 719.48px;}
.pgd-vragen-kop h2 { font-size: 48px; line-height: 48px;}
.pgd-vragen-kop h2 span { color: var(--pink-500);}
.pgd-vragen-kop p { margin: 0; font-size: 16.188px; line-height: 21.045px; color: var(--white-80);}
.pgd-vragen-teller { display: flex; align-items: flex-end; font-size: 43.169px; font-weight: 600; line-height: 43.169px; color: var(--white-80); white-space: nowrap;}
.pgd-vragen-teller b { font-size: 71.948px; font-weight: 600; line-height: 60px; color: var(--pink-500);}
.pgd-vragen-lijst { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14.39px; min-height: 0; margin: 0 -4px; padding: 0 4px 4px; overflow-y: auto;}
.pgd-vraag { display: flex; align-items: flex-start; gap: 16px; padding: 16px; border: 2px solid var(--white-20); border-radius: var(--radius-sm); background: var(--white-10); color: var(--white); font: inherit; text-align: left;}
button.pgd-vraag { cursor: pointer;}
.pgd-vraag-ico { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 24px; height: 24px; border: 1.349px solid var(--pink-500); border-radius: var(--radius-xl);}
.pgd-vraag-ico.ok { border: 0; background: var(--pink-500);}
.pgd-vraag-tekst { display: flex; flex: 1; flex-direction: column; gap: 8px; align-self: stretch; min-width: 0;}
.pgd-vraag-tekst strong { flex: 1; font-size: 16px; font-weight: 500; line-height: 18.2px;}
.pgd-vraag-sub { display: -webkit-box; padding-left: 10.8px; border-left: 1.8px solid var(--pink-500); overflow: hidden; font-size: 14px; line-height: 16.8px; color: var(--white-80); -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.pgd-vraag-nieuw { border-style: dashed; background: transparent;}
.pgd-vraag-nieuw .pgd-vraag-ico { border-color: var(--white-20);}
.pgd-vraag-nieuw .pgd-vraag-tekst span { font-size: 14px; line-height: 16.8px; color: var(--white-80);}
/* Vragen voor de afspraak (content/huysplan-vragen.php): eigen pagina in de stijl van dia 16 */
.pgd-vragen-pagina .pgd-vragen-teller { align-items: baseline; gap: 8px; font-size: 18px; line-height: 18px;}
.pgd-vragen-pagina .pgd-vragen-lijst { margin: 0; padding: 0; overflow: visible; list-style: none;}
.pgd-vragen-pagina .pgd-vraag-ico { font-size: 12px; font-weight: 600;}
.pgd-vragen-adres { font-size: 14px; line-height: 16.8px; color: var(--secondary);}
.pgd-vragen-label { font-size: 14px; font-weight: 500; line-height: 16.8px; color: var(--white);}
.pgd-vragen-fout { margin: 0; padding: 12px 16px; border-radius: var(--radius-sm); background: var(--error-200); color: var(--error-600);}
.pgd-vragen-bel { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px; border: 1px solid var(--white-20); border-radius: var(--radius-sm); background: var(--white-10); color: var(--white); text-decoration: none;}
.pgd-vragen-bel:hover { color: var(--white); background: var(--white-20);}

/* Dia 17: aan de slag */
.pgd-slot { position: relative; justify-content: center; padding: 32px 118px 32px 32px;}
.pgd-slot-rij { display: flex; align-items: center; gap: 64px;}
.pgd-slot-tekst { display: flex; flex: 1; flex-direction: column; gap: 32px; min-width: 0;}
.pgd-slot-kop { display: flex; flex-direction: column; gap: 7.387px;}
.pgd-slot-kop > span { font-size: 14.773px; line-height: 16.805px; color: var(--secondary);}
.pgd-slot-kop h2 { font-size: 32px; line-height: 32px;}
.pgd-slot-vak { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 16px; border: 1px solid var(--white-20); border-radius: var(--radius-sm); background: var(--white-10);}
.pgd-slot-voor { font-size: 14px; line-height: 14px; color: var(--white-80);}
.pgd-slot-range { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; white-space: nowrap;}
.pgd-slot-range strong { font-size: 32px; line-height: 32px;}
.pgd-slot-range span { font-size: 16px; font-weight: 500; line-height: 16px;}
.pgd-slot-vak .pgd-pr-spoor { width: 100%;}
.pgd-slot-stats { display: flex; gap: 16px; width: 100%;}
.pgd-slot-stats .pgd-stat { flex: 1; gap: 8px; min-width: 0;}
.pgd-slot-stats .pgd-stat span { opacity: 1;}
.pgd-slot-stats .pgd-stat strong { color: var(--white);}
.pgd-woning { position: relative; display: flex; flex: 0 0 292px; align-items: center; justify-content: center; min-height: 337px;}
.pgd-woning::before { content: ""; position: absolute; left: -45px; top: -69px; width: 383px; height: 476px; border-radius: 50%; background: var(--icon-ellipse); filter: blur(46px); pointer-events: none;}
.pgd-woningkaart { position: relative; display: flex; flex-direction: column; gap: 6px; width: 272px; padding: 9px; border-radius: 12px; background: var(--white); color: var(--primary); filter: drop-shadow(0 1.5px 6px rgba(var(--black-rgb), .25)); transform: rotate(3.83deg);}
.pgd-woningkaart .pgd-vlag { left: -3px; top: 15px; filter: drop-shadow(0 3px 3px rgba(var(--black-rgb), .25));}
.pgd-woningkaart .pgd-vlag > span { padding: 4.4px 0 4.4px 9px; border-radius: 3px 0 0 3px; font-size: 12px; line-height: 12px;}
.pgd-woningkaart .pgd-vlag img { width: 20.2px; height: 20.8px;}
.pgd-woning-beeld { display: flex; align-items: center; justify-content: center; height: 181px; padding: 6px; overflow: hidden; border-radius: 6px; background: rgba(var(--primary-rgb), .2);}
.pgd-woning-beeld > img { width: calc(100% + 12px); height: calc(100% + 12px); margin: -6px; object-fit: cover;}
.pgd-woning-huis { width: 135px;}
.pgd-woning-tekst { display: flex; flex-direction: column; gap: 6px; padding: 3px;}
.pgd-woning-tekst strong { overflow: hidden; font-size: 18px; font-weight: 500; line-height: 21.7px; white-space: nowrap; text-overflow: ellipsis;}
.pgd-woning-tekst > span { font-size: 13.58px; line-height: 17.66px; color: var(--primary-600);}
.pgd-woning-tekst b { margin-top: 12px; font-size: 16px; line-height: 16px;}
.pgd-woning-type { display: flex; align-items: center; gap: 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.pgd-woning-type i { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 13.6px; height: 13.6px; border-radius: 50%; background: var(--secondary);}
.pgd-reviews { position: absolute; right: 0; top: 50%; display: flex; flex-direction: column; justify-content: center; gap: 16px; width: 78px; padding: 16px 8px; border: 1px solid var(--white-20); border-right: 0; border-radius: 7.195px 0 0 7.195px; background: var(--white-10); transform: translateY(-50%);}
.pgd-reviews-titel { font-size: 14px; line-height: 16.8px; color: var(--white-80); text-align: center;}
.pgd-review { display: flex; flex-direction: column; align-items: center; gap: 12px;}
.pgd-review strong { font-size: 32px; line-height: 32px;}
.pgd-review img { width: 60px; height: 36px; padding: 5px 6px; object-fit: contain; border-radius: var(--radius-xs); background: var(--white);}
.pgd-review-naam { font-size: 12px; line-height: 14px; color: var(--white-80); text-align: center; overflow-wrap: anywhere;}

/* Het scherm is ten hoogste 1024 breed (pg-app); tot 1024 schaalt de tabletopmaak mee. Telefoon en smalle tablet: kolommen onder elkaar;
   de dia scrolt verticaal binnen pg-inhoud */
@media (max-width: 768px) {
    .pgd-dia { flex: 1 1 auto; overflow-y: auto; padding: 24px 16px;}
    .pgd-overzicht { flex-direction: column; align-items: stretch; gap: 24px; padding: 24px 16px;}
    .pgd-overzicht-tekst { max-width: none;}
    .pgd-overzicht h1 { font-size: 48px; line-height: 48px;}
    .pgd-overzicht-huis { width: 70%; max-width: 300px; margin: 0 auto;}
    .pgd-pr-kaart { flex-direction: column;}
    .pgd-pr-diagram { min-height: 160px;}
    .pgd-goudvak { flex: 0 0 auto; gap: 12px; padding: 20px;}
    .pgd-goudvak > div { flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: center;}
    .pgd-goudvak strong { font-size: 32px; line-height: 32px;}
    .pgd-goudvak > div > span { font-size: 18px; line-height: 18px;}
    .pgd-week { justify-content: flex-start;}
    .pgd-fasen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px;}
    .pgd-fase { gap: 16px;}
    .pgd-stapdia { padding: 24px 0 0;}
    .pgd-hst { padding: 0 16px;}
    .pgd-tijdlijn i { left: 16px;}
    .pgd-tijdlijn-start::after { left: 34px; width: calc(100% - 34px);}
    .pgd-stap { flex: 0 0 auto; flex-direction: column; align-items: stretch; gap: 32px; margin-top: 0; padding: 24px 16px;}
    .pgd-stap-beeld { flex: 0 0 auto; height: auto; max-width: 100%;}
    .pgd-mock { position: static; max-width: 100%;}
    .pgd-nm { position: relative; margin: 0 auto; zoom: .7;}
    .pgd-sticker { left: auto; right: 0;}
    .pgd-agenda { grid-template-columns: auto repeat(3, minmax(0, 120px));}
    .pgd-stap-boven { overflow: visible; margin-bottom: 0; padding: 8px 16px 24px;}
    .pgd-stap-onder { overflow: visible; margin-bottom: 0; padding-bottom: 24px;}
    .pgd-stap-onder .pgd-stap-tekst { padding-bottom: 0;}
    .pgd-zo-rij { grid-template-columns: repeat(2, minmax(0, 1fr));}
    .pgd-zo-vlak { flex: 0 0 200px; border-radius: var(--radius-sm);}
    .pgd-stats2 .pgd-stat { flex: 1 1 0;}
    .pgd-bewijs-rij { grid-template-columns: repeat(2, minmax(0, 1fr));}
    .pgd-bewijs-foto { flex: 0 0 180px;}
    .pgd-vragen-kop { flex-direction: column; align-items: flex-start;}
    .pgd-vragen-kop h2 { font-size: 32px; line-height: 32px;}
    .pgd-vragen-lijst { grid-template-columns: minmax(0, 1fr); overflow: visible;}
    .pgd-slot { justify-content: flex-start; padding: 24px 16px;}
    .pgd-slot-rij { flex-direction: column; align-items: stretch; gap: 48px;}
    .pgd-woning { flex: 0 0 auto;}
    .pgd-reviews { position: static; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-around; width: auto; margin-top: 32px; border-right: 1px solid var(--white-20); border-radius: 7.195px; transform: none;}
    .pgd-reviews hr { display: none;}
    .pgd-reviews-titel { flex: 0 0 100%;}
}
@media (max-width: 480px) {
    .pgd-overzicht h1 { font-size: 40px; line-height: 40px;}
    .pgd-voor, .pgd-kengetallen strong, .pgd-prijsrange > h2, .pgd-week > h2, .pgd-hst h2, .pgd-stap-inhoud h3, .pgd-bewijs > h2, .pgd-slot-kop h2 { font-size: 26px; line-height: 26px;}
    .pgd-kengetallen { flex-wrap: wrap;}
    .pgd-pr-meten { padding: 20px 16px 16px;}
    .pgd-staven { column-gap: 4px;}
    .pgd-pr-stats { flex-wrap: wrap;}
    .pgd-pr-stats strong, .pgd-slot-range strong { font-size: 24px; line-height: 24px;}
    .pgd-fasen { grid-template-columns: minmax(0, 1fr);}
    .pgd-hst .pgd-nr { width: 40px; height: 40px; font-size: 24px; line-height: 24px;}
    .pgd-zo-rij { grid-template-columns: minmax(0, 1fr);}
    .pgd-zo-vlak { flex: 0 0 214px;}
    .pgd-stats2 { flex-direction: column; gap: 16px;}
    .pgd-res-cijfers > div { padding: 8px;}
    .pgd-res-staven span { font-size: 9px; white-space: normal;}
    .pgd-agenda { padding: 8px; gap: 6px;}
    .pgd-afspraak { padding: 6px; font-size: 12px; line-height: 12px;}
    .pgd-afspraak span + span { white-space: normal;}
    .pgd-buurt-raster { gap: 14px;}
    .pgd-buurkaart { left: auto; right: 0; top: auto; bottom: 0;}
    .pgd-bewijs-rij { grid-template-columns: minmax(0, 1fr);}
    .pgd-vragen-teller { font-size: 32px; line-height: 32px;}
    .pgd-vragen-teller b { font-size: 48px; line-height: 40px;}
    .pgd-woning { transform: scale(.9);}
}

/* === Laders bij minder beweging (staat als laatste, zodat het de animaties hierboven overschrijft) ===
   Niet draaien maar rustig pulseren, zodat zichtbaar blijft dat er iets gebeurt: knoppen, schakelaars, keuzes en de typ-puntjes
   van de Powerbot. Het logo van het 3D-model pulseert al. De pitch generator houdt zijn eigen instelling. */
@media (prefers-reduced-motion: reduce) {
    button.is-bezig::after, .ph-schakelaar.is-bezig .ph-schakelaar-knop::after, label.is-bezig::after, .pp-msg-bezig span { animation: ph-puls 1.6s ease-in-out infinite;}
}