.dp-conf { --dpc-blauw:#0B62BC; --dpc-groen:#39B54A; --dpc-rand:#e3e7ee; }
.dp-conf__stap { margin: 0 0 28px; }
.dp-conf__kop { font-size: 1.25rem; margin: 0 0 12px; display:flex; align-items:center; gap:10px; }
.dp-conf__nr { display:inline-grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--dpc-groen); color:#fff; font-weight:800; font-size:1rem; }
.dp-conf__keuzes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.dp-conf__keuze { display:flex; flex-direction:column; justify-content:center; min-height:76px; position:relative; margin:0; border:2px solid var(--dpc-rand); background:#fff; border-radius:12px; padding:12px; font-weight:700; text-align:center; cursor:pointer; }
.dp-conf__keuze.is-actief { border-color:var(--dpc-blauw); color:var(--dpc-blauw); background:#eef4fb; }
.dp-conf__pakketten { display:grid; gap:12px; }
.dp-conf__pakket { display:block; border:2px solid var(--dpc-rand); border-radius:14px; padding:16px; background:#fff; cursor:pointer; position:relative; }
.dp-conf__pakket.is-actief { border-color:var(--dpc-groen); background:#f4fbf5; }
.dp-conf__pakketkop { display:block; margin:0; cursor:pointer; }
/* De radio's blijven echte, focusbare inputs (pijltjestoetsen); alleen onzichtbaar. */
.dp-conf__keuze input, .dp-conf__pakket input { position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none; }
/* Toetsenbord: zichtbare focusrand om de kaart/knop. Na een muisklik niet (waar :has werkt). */
.dp-conf__keuze:focus-within, .dp-conf__pakket:focus-within { outline:3px solid var(--dpc-blauw); outline-offset:2px; }
.dp-conf__keuze:has(input:focus:not(:focus-visible)), .dp-conf__pakket:has(input:focus:not(:focus-visible)) { outline:none; }
.dp-conf__pakketnaam { display:block; font-weight:800; font-size:1.1rem; }
/* "meest gekozen" hangt half over de bovenrand van de kaart (Richard, 26-09), rechts,
   als een lintje. Niet meer in de naamregel: daar brak hij op 390px af in twee regels. */
.dp-conf__tag { position:absolute; top:-11px; right:14px; font-style:normal; font-size:.72rem; font-weight:700; line-height:1; background:var(--dpc-groen); color:#fff; border-radius:999px; padding:5px 10px; white-space:nowrap; box-shadow:0 0 0 3px #fff; }
.dp-conf__pakket.is-actief .dp-conf__tag { box-shadow:0 0 0 3px #f4fbf5; }
.dp-conf__pakketten { padding-top:6px; }
.dp-conf__pakketprijs { display:block; color:var(--dpc-blauw); font-weight:800; font-size:1.35rem; margin:4px 0 8px; }
.dp-conf__pakketprijs small, .dp-conf__prijs small { font-size:.7em; font-weight:600; color:#666; white-space:nowrap; }
.dp-conf__items { list-style:none; padding:0; margin:0; }
.dp-conf__items li { display:flex; gap:8px; align-items:flex-start; font-size:.9rem; margin:0 0 6px; }
.dp-conf__items i { color:var(--dpc-groen); margin-top:4px; }
.dp-conf__omschr { display:block; font-size:.85rem; color:#555; margin:6px 0 0; }
.dp-conf__hint { font-size:.9rem; color:#555; margin:10px 0 0; }
.dp-conf__extras { display:grid; gap:10px; }
.dp-conf__extra { display:block; border:1px solid var(--dpc-rand); border-radius:12px; padding:12px 14px; background:#fff; }
.dp-conf__extra label { display:block; margin:0; cursor:pointer; }
.dp-conf__extra label > span { margin-left:6px; }
.dp-conf__extra b { white-space:nowrap; }
.dp-conf__extra input { accent-color:var(--dpc-groen); } /* thema zet anders rood */
.dp-conf__meer { margin:6px 0 0 26px; font-size:.88rem; color:#555; }
.dp-conf__meer summary { cursor:pointer; color:var(--dpc-blauw); }
.dp-conf__totaal { border-top:2px solid var(--dpc-rand); padding-top:18px; display:grid; gap:14px; }
.dp-conf__los { color:#666; font-size:.95rem; }
.dp-conf__voordeel { color:var(--dpc-groen); font-weight:700; }
.dp-conf__prijs { font-size:1.9rem; font-weight:800; color:var(--dpc-blauw); line-height:1.1; margin:4px 0; }
.dp-conf__incl { font-size:.85rem; color:#555; }
/* Stapsgewijs: stap 2/3/totaal staan dicht tot er een woningtype is gekozen. Het thema
   heeft niet overal [hidden]{display:none!important}, en .dp-conf__totaal zet display:grid. */
.dp-conf [hidden] { display:none !important; }
/* Na de eerste keuze schuiven ze zacht in (alleen die ene render; geen sprong van de pagina). */
.dp-conf .is-nieuw { animation: dpc-in .35s ease-out both; }
@keyframes dpc-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) { .dp-conf .is-nieuw { animation:none; } }
/* De kop van stap 2 krijgt na de keuze de focus (tabindex=-1): ring alleen bij toetsenbord. */
.dp-conf__kop:focus, .dp-conf__subkop:focus { outline:none; }
.dp-conf__kop:focus-visible, .dp-conf__subkop:focus-visible { outline:3px solid var(--dpc-blauw); outline-offset:4px; border-radius:6px; }
/* iOS Safari zet :focus-visible ook na een tik; na muis/aanraking (data-invoer=muis) geen ring. */
.dp-conf[data-invoer="muis"] .dp-conf__kop:focus-visible, .dp-conf[data-invoer="muis"] .dp-conf__subkop:focus-visible { outline:none; }
/* Zelf samenstellen: kaart in stap 2, daaronder de lijst (rijen met rand, de lijst zelf
   zonder: één kaartlaag) en de nudge naar het goedkoopste dekkende pakket. */
.dp-conf__pakketsub { font-weight:600; font-size:.95rem; color:#555; }
.dp-conf__zelf { display:grid; gap:10px; margin:16px 0 0; }
.dp-conf__subkop { font-size:1.05rem; font-weight:800; margin:4px 0 0; }
/* Installatieberekeningen (warmteverlies, koellast): kleine tussenkop onder de vergunningsberekeningen.
   Invalshoek installatie: BENG en de rest ingeklapt onder "Bouw je nieuw?". */
.dp-conf__tussenkop { font-size:.95rem; font-weight:700; color:#555; margin:12px 0 0; }
.dp-conf__groep-inhoud { display:grid; gap:10px; }
.dp-conf__groep { margin:4px 0 0; }
.dp-conf__groep > summary { cursor:pointer; color:var(--dpc-blauw); font-weight:700; padding:6px 0; }
.dp-conf__groep[open] > summary { margin-bottom:10px; }
/* BENG is een gewoon vinkje (standaard aan); niets aan → totaal € 0 en de knop uit. */
.dp-conf__minstens { color:#333; font-weight:600; }
.dp-conf__knop-uit:disabled { opacity:.55; cursor:not-allowed; white-space:normal; }
/* Voorkeuze uit de URL (?pakket=zelf&onderdelen=…): één regel boven stap 1. */
.dp-conf__voorkeuze { margin:0 0 16px; padding:0; font-size:.95rem; color:#555; }
.dp-conf__bedrag { white-space:nowrap; }
.dp-conf__nudge { margin:2px 0 0; padding:12px 14px; border-left:4px solid var(--dpc-groen); background:#f4fbf5; border-radius:8px; font-size:.95rem; }
.dp-conf__nudgeknop { display:inline-block; margin:8px 0 0; padding:6px 16px; border:2px solid #1f7a2c; border-radius:999px; background:#fff; color:#1f7a2c; font-weight:700; cursor:pointer; }
.dp-conf__nudgeknop:hover { background:#1f7a2c; color:#fff; }
.dp-conf__nudgeknop:focus-visible { outline:3px solid var(--dpc-blauw); outline-offset:2px; }
.dp-conf--leeg { border:1px solid var(--dpc-rand); border-radius:14px; padding:20px; }
/* Stap 1 als tweedeling (Woning | Bedrijfspand): twee grote knoppen met een korte subregel.
   Daaronder, na Woning, de subvraag "Welk type woning?" met compacte knoppen (2×2 op mobiel).
   Geen extra kaart om de subvraag heen: één kaartlaag. */
.dp-conf__keuzes--gebouw { grid-template-columns:repeat(2,minmax(0,1fr)); }
/* Gebouw- en typeknoppen even hoog (min-height op .dp-conf__keuze) en op hetzelfde raster,
   zodat de randen van beide rijen uitlijnen (Richard, 26-09: twee hoogtes oogde rommelig). */
.dp-conf__keuze--gebouw { font-size:1.1rem; }
.dp-conf__keuzenaam { display:block; }
.dp-conf__keuzesub { display:block; margin-top:4px; font-size:.8rem; font-weight:600; line-height:1.3; color:#555; }
.dp-conf__keuze--gebouw.is-actief .dp-conf__keuzesub { color:var(--dpc-blauw); }
.dp-conf__sub { margin:18px 0 0; }
.dp-conf__sub .dp-conf__subkop { margin:0 0 10px; }
.dp-conf__keuzes--type .dp-conf__keuze { font-size:1rem; }
/* Bedrijfspand: "prijs op maat" in plaats van een bedrag, en één zin waarom. */
.dp-conf__pakketprijs--opmaat { font-size:1.1rem; }
.dp-conf__bedrag--opmaat { font-weight:600; color:#555; }
.dp-conf__opmaat { margin:12px 0 0; padding:10px 14px; border-left:4px solid var(--dpc-blauw); background:#eef4fb; border-radius:8px; font-size:.92rem; }
.dp-conf__los--opmaat { color:#333; font-weight:600; }
.dp-conf__los--opmaat small { font-weight:600; color:#666; white-space:nowrap; }
@media (min-width: 768px) {
  .dp-conf__keuzes { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .dp-conf__keuzes--gebouw { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dp-conf__pakketten { grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
  .dp-conf__totaal { grid-template-columns:1fr auto; align-items:center; }
}

/* ── Sticky prijsbalk (configurator.js maakt hem onder <body>, dus buiten .dp-conf: eigen
   variabelen). Zichtbaar zolang er een pakket gekozen is en het totaalblok en de footer uit
   beeld zijn. Boven de pagina en de contactknop (999), onder de vaste kop (1030), het mobiele
   menu (1200) en de cookiebanner (99999). Mobiel over de volle breedte, 62 px hoog; vanaf 768
   gecentreerd binnen 1100 px met afgeronde bovenhoeken. */
.dp-conf__sticky { --dpc-blauw:#0B62BC; --dpc-rand:#e3e7ee; --dps-h:62px; position:fixed; left:0; right:0; bottom:0; z-index:1025; background:#fff; box-shadow:0 -6px 20px rgba(16,24,40,.14); transform:translateY(calc(100% + 12px)); opacity:0; visibility:hidden; transition:transform .2s ease-out, opacity .2s ease-out, visibility 0s linear .2s; }
.dp-conf__sticky.is-zichtbaar { transform:none; opacity:1; visibility:visible; transition:transform .2s ease-out, opacity .2s ease-out, visibility 0s; }
.dp-conf__sticky-binnen { display:flex; align-items:center; gap:8px; height:var(--dps-h); padding:0 4px 0 12px; box-sizing:border-box; }
/* Smal: naam (afgekapt als hij te lang is), daaronder de prijs (nooit afgekapt); "excl. btw"
   loopt door op de prijsregel of valt, als die vol is, naar een derde regel (flex-wrap). */
.dp-conf__sticky-tekst { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; justify-content:center; }
.dp-conf__sticky-naam { font-size:.78rem; font-weight:700; line-height:1.2; color:#333; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dp-conf__sticky-prijs { display:flex; flex-wrap:wrap; align-items:baseline; column-gap:4px; line-height:1.15; }
.dp-conf__sticky-hoofd { font-size:.78rem; font-weight:600; color:var(--dpc-blauw); white-space:nowrap; }
.dp-conf__sticky-bedrag { font-size:1rem; font-weight:800; }
.dp-conf__sticky-excl { font-size:.7rem; font-weight:600; color:#666; white-space:nowrap; }
.dp-conf__sticky .breed { display:none; }
@media (max-width: 374.98px) { .dp-conf__sticky-beng { display:none; } }
.dp-conf__sticky .dp-conf__sticky-knop { flex:none; white-space:nowrap; font-size:.875rem; line-height:1.3; }
.dp-conf__sticky-dicht { flex:none; display:grid; place-items:center; width:28px; height:28px; margin:0; padding:0; border:0; border-radius:50%; background:transparent; color:#666; cursor:pointer; }
.dp-conf__sticky-dicht:hover { background:#f0f2f5; color:#222; }
.dp-conf__sticky-dicht:focus-visible, .dp-conf__sticky .dp-conf__sticky-knop:focus-visible { outline:3px solid var(--dpc-blauw); outline-offset:2px; }
/* Laatste inhoud niet onder de balk, en de zwevende contactknop (fixed, 64×64 rechtsonder)
   erboven zolang de balk er is. Vanaf 1260 px ligt de gecentreerde balk er niet onder. */
body.dp-sticky-aan { padding-bottom:64px; }
@media (max-width: 1259.98px) {
  body.dp-sticky-aan .custom-contact-tool { bottom:calc(64px + 12px); }
}
@media (prefers-reduced-motion: no-preference) {
  .custom-contact-tool { transition:bottom .2s ease-out; }
}
@media (prefers-reduced-motion: reduce) {
  .dp-conf__sticky, .dp-conf__sticky.is-zichtbaar { transition:none; }
}
@media (min-width: 768px) {
  .dp-conf__sticky { --dps-h:72px; max-width:1100px; margin:0 auto; border:0; border-radius:14px 14px 0 0; }
  .dp-conf__sticky-binnen { gap:16px; padding:0 12px 0 24px; }
  /* Breed: één regel, naam en prijs naast elkaar op de basislijn. */
  .dp-conf__sticky-tekst { flex-direction:row; align-items:baseline; justify-content:flex-start; gap:14px; }
  .dp-conf__sticky-naam { font-size:1.05rem; }
  .dp-conf__sticky .smal { display:none; }
  .dp-conf__sticky .breed { display:inline; }
  .dp-conf__sticky-prijs { flex-wrap:nowrap; column-gap:6px; }
  .dp-conf__sticky-hoofd { font-size:1rem; }
  .dp-conf__sticky-bedrag { font-size:1.3rem; }
  .dp-conf__sticky-excl { font-size:.8rem; }
  .dp-conf__sticky-dicht { width:32px; height:32px; }
  .dp-conf__sticky .dp-conf__sticky-knop { font-size:1rem; }
  body.dp-sticky-aan { padding-bottom:80px; }
}
@media (min-width: 768px) and (max-width: 1259.98px) {
  body.dp-sticky-aan .custom-contact-tool { bottom:calc(72px + 12px); }
}

/* ── Checklist "Welke berekeningen heb je nodig" (pagina /beng-berekening, sectie
   #welke-berekeningen). Staat hier omdat dit bestand op die pagina al in de <head> laadt
   (de shortcode staat erop) en WP-inhoud geen <style> mag bevatten. Geen kaarten: de rijen
   liggen direct op de grijze sectie, gescheiden door een dunne lijn. Twee groepen (h3). */
.dp-check { --dpk-blauw:#0B62BC; --dpk-groen:#39B54A; --dpk-rand:#e3e7ee; margin:32px 0 0; }
.dp-check .dp-check__groep { font-size:.8rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; line-height:1.3; color:var(--dpk-blauw); margin:0 0 4px; }
.dp-check .dp-check__lijst + .dp-check__groep { margin-top:36px; }
.dp-check .dp-check__lijst, .dp-check .dp-check__pakketten { list-style:none; margin:0; padding:0; }
.dp-check .dp-check__rij { display:grid; grid-template-columns:40px minmax(0,1fr); column-gap:14px; row-gap:10px; align-items:start; margin:0; padding:16px 0; }
.dp-check .dp-check__rij + .dp-check__rij { border-top:1px solid var(--dpk-rand); }
.dp-check .dp-check__rij::before { content:none; } /* thema-bolletjes/plusjes op li uit */
.dp-check__icoon { display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--dpk-groen); color:#fff; }
.dp-check__icoon svg { width:20px; height:20px; display:block; }
.dp-check .dp-check__kop { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; margin:0; line-height:1.35; }
/* Mobiel: icoon + naam op één regel; vraag en badges eronder over de volle breedte (naast het
   icoon hield de vraag op 390 maar 288 px over). De tekst-div valt daarvoor weg uit de grid. */
.dp-check .dp-check__tekst { display:contents; }
.dp-check .dp-check__kop { grid-column:2; align-self:center; }
.dp-check__naam { font-weight:700; font-size:1.05rem; }
.dp-check__naam a { color:var(--dpk-blauw); text-decoration:none; }
.dp-check__naam a:hover, .dp-check__naam a:focus-visible { text-decoration:underline; text-underline-offset:3px; }
.dp-check__naam a:focus-visible { outline:3px solid var(--dpk-blauw); outline-offset:2px; border-radius:3px; }
.dp-check__norm { display:inline-block; max-width:100%; font-size:.78rem; font-weight:600; line-height:1.3; color:#4a5160; background:#f0f2f5; box-shadow:inset 0 0 0 1px var(--dpk-rand); border-radius:999px; padding:3px 10px; }
.dp-check .dp-check__vraag { grid-column:1 / -1; margin:0; color:#4a4a4a; }
.dp-check .dp-check__pakketten { grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:6px; }
.dp-check .dp-check__pill { display:inline-flex; align-items:center; gap:5px; margin:0; padding:4px 10px; border-radius:999px; background:#eaf7ec; color:#2F7A3B; font-size:.78rem; font-weight:700; line-height:1.25; white-space:nowrap; }
.dp-check .dp-check__pill::before { content:none; }
.dp-check__pill svg { width:12px; height:12px; flex:none; }
.dp-check .dp-check__pill--los { background:#f0f2f5; color:#4a5160; box-shadow:inset 0 0 0 1px var(--dpk-rand); }
.dp-check__sr { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (min-width: 768px) {
  /* Desktop/tablet: pakketten als vaste derde kolom, zodat "Compleet" in elke rij op dezelfde plek staat. */
  .dp-check .dp-check__rij { grid-template-columns:40px minmax(0,1fr) 330px; column-gap:18px; align-items:center; }
  .dp-check .dp-check__tekst { display:block; grid-column:2; }
  .dp-check .dp-check__vraag { margin:4px 0 0; }
  .dp-check .dp-check__pakketten { grid-column:3; }
}
/* Geen animaties of overgangen in de checklist; prefers-reduced-motion hoeft niets uit te zetten. */

/* ── Lijst "BENG-eisen" (sectie #wat-is-beng): zelfde rustige opmaak als de checklist.
   Per eis een groene cirkel met het nummer (1, 2, 3, TO; aria-hidden, de titel noemt de eis al),
   rechts de vette titel, daaronder de uitleg. Mobiel over de volle breedte, vanaf 768 onder de
   titel ingesprongen. Geen kaarten; rijen gescheiden door een dunne lijn. */
.dp-eisen { --dpe-groen:#39B54A; --dpe-rand:#e3e7ee; list-style:none; margin:24px 0; padding:0; }
.dp-eisen .dp-eisen__rij { display:grid; grid-template-columns:40px minmax(0,1fr); column-gap:14px; row-gap:8px; align-items:center; margin:0; padding:16px 0; }
.dp-eisen .dp-eisen__rij + .dp-eisen__rij { border-top:1px solid var(--dpe-rand); }
.dp-eisen .dp-eisen__rij::before { content:none; } /* thema-bolletjes/plusjes op li uit */
.dp-eisen__nr { display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--dpe-groen); color:#fff; font-weight:800; font-size:1.1rem; line-height:1; }
.dp-eisen__nr--kort { font-size:.9rem; letter-spacing:.02em; }
.dp-eisen .dp-eisen__titel { margin:0; font-weight:700; font-size:1.05rem; line-height:1.35; }
.dp-eisen .dp-eisen__tekst { grid-column:1 / -1; margin:0; }
@media (min-width: 768px) {
  .dp-eisen .dp-eisen__rij { row-gap:4px; }
  .dp-eisen .dp-eisen__tekst { grid-column:2; }
}

/* BENG-eisen zonder beeld ernaast: op desktop twee kolommen, zodat de sectie compact blijft. */
@media (min-width: 768px) { .dp-eisen { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:32px; row-gap:8px; } }

/* ── Invalshoek (DP_Invalshoek) ──
   Kop en inleiding van de shortcode zelf (kop="…", intro="…"): staan vóór .dp-conf en krijgen de
   thema-klassen fs-1 mb-3 / mb-4 zoals de andere H2's. Kaart "Bouwplantoetsing: maatwerk"
   (invalshoek toetsing): geen keuze, dus geen klik-cursor en een gestippelde rand; eigen knop. */
.dp-conf__intro { max-width:760px; }
.dp-conf__pakket--toetsing { cursor:default; border-style:dashed; border-color:#b9c9de; background:#fff; }
.dp-conf__pakket--toetsing .dp-conf__pakketkop { cursor:default; }
.dp-conf__pakket--toetsing .dp-conf__toetsingknop { margin-top:10px; }