/* ---- hero-pagina: hero-pagina-v12 ---- */
/* toon: foto (eigen achtergrond van deze sectie; de paginagenerator leest deze regel voor website-kit RULES 4.26. Een andere toon per pagina komt via config.SECTIE_TOON en een klasse <wortel>--<toon> hieronder.) */

/* Kop van een subpagina: een foto per pagina, laag, zonder medewerkers, met hetzelfde offertepaneel als de homepage-hero (hero-home-v16:
   titel, korte tekst, trustchips, het formulier met vier velden en de strip met bel- en app-knop). De foto wisselt per pagina: src, srcset, alt en --hp-fokus op de img. */
.db-hp12{--hp-z18:rgb(var(--db-zwart-rgb) / .18);--hp-z35:rgb(var(--db-zwart-rgb) / .35);--hp-z45:rgb(var(--db-zwart-rgb) / .45);--hp-z55:rgb(var(--db-zwart-rgb) / .55);--hp-z64:rgb(var(--db-zwart-rgb) / .64);--hp-z82:rgb(var(--db-zwart-rgb) / .82);--hp-z92:rgb(var(--db-zwart-rgb) / .92);
  --hp-gl-b:#4285F4;--hp-gl-r:#EA4335;--hp-gl-g:#FBBC05;--hp-gl-gr:#34A853;--hp-ster:#FBBC04;--hp-wa:#25D366;--offerte:#15803D;--offerte-hover:#166534;
  --hp-lijn:var(--hp-z18);--hp-menu:5rem;--hp-over:3.5rem;--hp-pad:clamp(1rem,4vw,2.5rem);
  --sectie-achtergrond:var(--db-gradient);position:relative;background:var(--sectie-achtergrond);color:var(--db-tekst-op-donker);font-family:var(--db-font-tekst);overflow-x:clip;padding-bottom:clamp(2rem,4vw,3rem)}
.db-hp12 :focus-visible{outline:calc(2 * var(--db-rand)) solid var(--db-focus);outline-offset:2px}
.db-hp12 a{text-decoration:none}
.db-hp12__foto{position:absolute;inset:0;z-index:-2;display:block;overflow:hidden;background:var(--db-gradient)}
.db-hp12__foto img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:var(--hp-fokus,center)}
.db-hp12__kruim{font:400 .82rem/1.4 var(--db-font-tekst);color:color-mix(in srgb,var(--db-puurwit) 82%,transparent);text-shadow:0 2px 12px var(--hp-z55)}
.db-hp12__kruim ol{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:0;padding:0}
.db-hp12__kruim li{display:flex;align-items:center;min-height:44px}
.db-hp12__kruim li+li::before{content:"/";margin-right:.4rem;opacity:.55}
.db-hp12__kruim a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding-inline:.35rem;color:inherit}
.db-hp12__kruim a:hover{color:var(--db-puurwit)}
.db-hp12__titel{margin:0;font:700 clamp(2rem,1rem + 2.8vw,3rem)/1.05 var(--db-font-kop);letter-spacing:-.02em;text-wrap:balance;text-shadow:0 4px 30px var(--hp-z35)}
.db-hp12__titel em{font-style:normal;white-space:nowrap;color:var(--db-roze)}
.db-hp12__lead{margin:.8rem 0 0;max-width:38rem;font-size:clamp(1rem,.9rem + .4vw,1.15rem);line-height:1.5;text-shadow:0 2px 14px var(--hp-z45);text-wrap:pretty}

/* offertepaneel, trustchips, formulier en strip: 1 op 1 overgenomen van hero-home-v16 (klassen db-hp12 in plaats van db-hh16) */
/* ---- Paneel v12 */
.db-hp12__paneel{position:relative;z-index:5;width:min(100% - 2rem,75rem);margin:calc(var(--hp-over) * -1) auto 0;padding:clamp(1rem,2vw,1.4rem);border-radius:var(--db-radius);
  background:var(--db-puurwit);color:var(--db-tekst);border:var(--db-rand) solid var(--db-roze);box-shadow:var(--db-schaduw)}  /* effen wit vlak: gebruiker 2026-10-27 "make the whole form white"; geen verloop op blokken, alleen op de sectie-achtergrond */
.db-hp12__kopt{flex:1 1 18rem;min-width:0}
.db-hp12__ptitel{margin:0;font:700 clamp(1.45rem,1.1rem + 1.1vw,2rem)/1.15 var(--db-font-kop)}
.db-hp12__intro{margin:.4rem 0 0;max-width:34rem;line-height:1.5;text-wrap:balance}
.db-hp12__form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) auto;align-items:center;gap:0 1.1rem;padding:.5rem .5rem .5rem 1.3rem;border-radius:var(--db-radius);background:var(--db-puurwit);color:var(--db-tekst);border:var(--db-rand) solid var(--db-roze)}
.db-hp12__veld{display:flex;flex-direction:column;gap:.1rem;min-width:0;padding:.25rem 0}
.db-hp12__veld + .db-hp12__veld{padding-left:1.1rem;border-left:1px solid var(--hp-lijn)}
.db-hp12__veld span{font:600 .75rem/1.2 var(--db-font-kop);letter-spacing:.1em;text-transform:uppercase;color:var(--db-tekst-zacht)}
.db-hp12__veld :is(input,select){width:100%;min-height:2.75rem;padding:0;border:0;border-radius:0;background:transparent;color:var(--db-tekst);font:400 1rem/1.3 var(--db-font-tekst)}
.db-hp12__veld :is(input,select)::placeholder{color:var(--db-tekst-zacht);opacity:1}
.db-hp12__veld :is(input,select) option{background:var(--db-puurwit);color:var(--db-tekst)}
.db-hp12 :is(input,select){caret-color:var(--db-zwart)}  /* tekstcursor zwart (gebruiker 2026-10-28) */
.db-hp12__verstuur{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:3.25rem;padding:.7rem 1.5rem;border:0;border-radius:var(--db-radius);background:var(--offerte);color:var(--db-puurwit);font:700 1rem/1.2 var(--db-font-kop);letter-spacing:.02em;white-space:nowrap;cursor:pointer}
.db-hp12__verstuur:is(:hover,:focus-visible){background:var(--offerte-hover)}
.db-hp12__verstuur svg{width:1.1rem;height:1.1rem;fill:currentColor}
.db-hp12__btn{display:flex;align-items:center;justify-content:center;gap:.6rem;width:100%;min-height:3rem;padding:.5rem .9rem;border-radius:var(--db-radius);font:700 .98rem/1.2 var(--db-font-kop);white-space:nowrap}
.db-hp12__btn svg{width:1.3rem;height:1.3rem;flex:none}
.db-hp12__tk{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.db-hp12__tk b{font:700 .98rem/1.25 var(--db-font-kop)}
.db-hp12__tk > span{font-size:.86rem;line-height:1.35}


.db-hp12__g{width:1.9rem;height:1.9rem;flex:none}
.db-hp12__g .b{fill:var(--hp-gl-b)}.db-hp12__g .gr{fill:var(--hp-gl-gr)}.db-hp12__g .ge{fill:var(--hp-gl-g)}.db-hp12__g .r{fill:var(--hp-gl-r)}
.db-hp12__sterren{display:flex;gap:2px;flex:none}
.db-hp12__sterren svg{width:.8rem;height:.8rem;fill:var(--hp-ster)}
.db-hp12__r1{display:flex;align-items:center;gap:.45rem}
.db-hp12__wa{background:var(--hp-wa);color:var(--db-zwart)}
.db-hp12__wa svg{fill:var(--db-puurwit)}
.db-hp12__bel{background:var(--db-zwart);color:var(--db-wit)}
.db-hp12__bel svg{fill:var(--db-roze)}
.db-hp12__trust .db-hp12__tk b{font:700 .9rem/1.2 var(--db-font-kop)}
.db-hp12__trust .db-hp12__r1 b{font-size:.98rem}
.db-hp12__trust .db-hp12__tk span{font-size:.8rem;line-height:1.25}
.db-hp12__intro{max-width:34rem;text-wrap:pretty}
.db-hp12__strip{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1.3fr) minmax(0,.9fr) minmax(0,.9fr);width:min(100% - 2rem,75rem);margin:.9rem auto 0;padding:0;list-style:none;border-radius:var(--db-radius);background:var(--db-vlak);color:var(--db-tekst);border:var(--db-rand) solid var(--db-roze);box-shadow:var(--db-schaduw)}
.db-hp12__strip > li{display:flex;align-items:center;gap:.85rem;padding:.8rem 1rem}
.db-hp12__strip > li + li{border-left:1px solid var(--hp-lijn)}
.db-hp12__strip .db-hp12__tk span{color:var(--db-tekst-zacht)}
.db-hp12__strip > .db-hp12__act{padding:.6rem .9rem}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .db-hp12__verstuur,.db-hp12__btn,.db-hp12__gl{transition:transform .2s ease-out}
  .db-hp12__verstuur:is(:hover,:focus-visible),.db-hp12__btn:is(:hover,:focus-visible),.db-hp12__gl:is(:hover,:focus-visible){transform:translateY(-2px)}
}
@media (max-width:1180px){
  .db-hp12__strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .db-hp12__strip > li:nth-child(3){border-left:0}
  .db-hp12__strip > li:nth-child(n+3){border-top:1px solid var(--hp-lijn)}
}
@media (max-width:1000px){
  .db-hp12__form{grid-template-columns:repeat(2,minmax(0,1fr));gap:.3rem 1.1rem;padding:.7rem 1rem 1rem 1.2rem}
  .db-hp12__verstuur{grid-column:1 / -1;margin-top:.5rem}
}
@media (max-width:700px){
  .db-hp12__form{grid-template-columns:minmax(0,1fr);gap:.2rem}
  .db-hp12__veld + .db-hp12__veld{padding-left:0;border-left:0;border-top:1px solid var(--hp-lijn)}
  .db-hp12__strip > li{padding:.7rem .8rem;gap:.7rem}
}
@media (max-width:560px){
  .db-hp12__trust > li:not(.db-hp12__gchip){flex-direction:column;align-items:flex-start;gap:.45rem;padding:.6rem .6rem}
  .db-hp12__trust > li:not(.db-hp12__gchip) .db-hp12__tk b{font-size:.82rem}
  .db-hp12__intro{font-size:.93rem}
  .db-hp12__strip{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)}
  .db-hp12__strip > li:not(.db-hp12__act){grid-column:1 / -1;border-left:0}
  .db-hp12__strip > li:nth-child(2){border-top:1px solid var(--hp-lijn)}
  .db-hp12__strip > .db-hp12__act{padding:.5rem .5rem}
  .db-hp12__strip > .db-hp12__act + .db-hp12__act{border-left:1px solid var(--hp-lijn)}
  .db-hp12__btn{padding:.5rem .3rem;font-size:.86rem;gap:.35rem}
  .db-hp12__btn svg{width:1.1rem;height:1.1rem}
}

.db-hp12__pkop{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem 1.5rem;margin-bottom:.9rem}
.db-hp12__trust{display:grid;grid-template-columns:repeat(3,13.6rem);gap:.5rem;margin:0;padding:0;list-style:none}
.db-hp12__trust > li{display:flex;align-items:center;gap:.7rem;min-height:3.9rem;padding:.55rem .8rem .45rem;border-radius:var(--db-radius);background:var(--db-wit);box-shadow:inset 0 var(--db-rand) 0 var(--db-roze),inset 0 0 0 1px var(--hp-lijn);color:var(--db-tekst);white-space:nowrap}
.db-hp12__trust > .db-hp12__gchip{padding:0}
.db-hp12__gl{display:flex;align-items:center;gap:.7rem;width:100%;min-height:3.9rem;padding:.55rem .8rem .45rem;color:inherit}
.db-hp12__trust .db-hp12__tk span{color:var(--db-tekst-zacht)}
.db-hp12__trust .db-hp12__r1 b{color:var(--db-tekst)}
.db-hp12__mi{display:grid;place-items:center;flex:none;width:2.7rem;height:2.7rem;border-radius:var(--db-radius);background:var(--db-puurwit);box-shadow:0 0 0 1px var(--hp-lijn);color:var(--db-zwart)}
.db-hp12__mi svg{width:1.95rem;height:1.95rem;fill:currentColor}
.db-hp12__ico{display:grid;place-items:center;flex:none;width:3.5rem;height:3.5rem;border-radius:var(--db-radius);background:var(--db-puurwit);box-shadow:inset 0 var(--db-rand) 0 var(--db-roze),0 0 0 1px var(--hp-lijn);color:var(--db-zwart)}
.db-hp12__ico svg{width:2.5rem;height:2.5rem;fill:currentColor}
@media (max-width:1180px){
  .db-hp12__trust{width:100%;grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:700px){
  .db-hp12__trust{width:100%;grid-template-columns:repeat(2,minmax(0,1fr))}
  .db-hp12__trust > li{white-space:normal;min-width:0}
  .db-hp12__trust > .db-hp12__gchip{grid-column:1 / -1}
  .db-hp12__ico{width:3.1rem;height:3.1rem}
  .db-hp12__ico svg{width:2.2rem;height:2.2rem}
}
@media (max-width:560px){
  .db-hp12__mi{width:2.5rem;height:2.5rem}
  .db-hp12__mi svg{width:1.8rem;height:1.8rem}
}

/* v12: gecentreerde tekst op een foto over de volle breedte met een donkere sluier; het paneel schuift over de onderkant */
.db-hp12__kop{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;text-align:center;min-height:22rem;padding:max(var(--hp-menu),calc(var(--db-kop-h,64px) + .6rem)) var(--hp-pad) calc(var(--hp-over) + 1.4rem)}
.db-hp12__kruim,.db-hp12__titel,.db-hp12__lead{max-width:46rem}
.db-hp12__kruim ol{justify-content:center}
.db-hp12__lead{margin-inline:auto}
.db-hp12__sluier{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(120% 90% at 70% 18%,transparent 30%,var(--hp-z55) 100%),linear-gradient(180deg,var(--hp-z82) 0,var(--hp-z64) 30%,var(--hp-z64) 70%,var(--hp-z92) 100%)}  /* leestekst: ook de lichtste pixels onder titel en lead houden 4,5:1 */
@media (max-width:700px){.db-hp12{--hp-menu:4.25rem;--hp-over:3rem}}
/* smal scherm: de velden komen voor de vertrouwenschips, zodat de eerste velden op scroll 0 boven de zwevende knoppen staan */
@media (max-width:560px){
  .db-hp12__paneel{display:flex;flex-direction:column}
  .db-hp12__pkop{display:contents}
  .db-hp12__kopt{order:1;flex:0 0 auto;margin-bottom:.9rem}
  .db-hp12__form{order:2}
  .db-hp12__trust{order:3;margin-top:.9rem}
}
/* ---- Toon verloop-om (BRIEF-ACHTERGROND 2026-10-27): verloop omgekeerd, grijs boven en donker onderaan; sluit aan op een buur die grijs eindigt. */
.db-hp12.db-hp12--verloop-om{--sectie-achtergrond:var(--db-gradient-om)}
/* lange woorden in de titel: afbreken op smalle schermen, zonder de letter kleiner te maken */
@media (max-width:460px){
  .db-hp12__titel{overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:14 11 6;-webkit-hyphenate-limit-before:11;-webkit-hyphenate-limit-after:6}
  .db-hp12__titel em{white-space:normal}
}
/* ---- artikel-tekst: artikel-tekst-v2 ---- */
/* toon: verloop (eigen achtergrond van deze sectie; de paginagenerator leest deze regel voor website-kit RULES 4.26. Een andere toon per pagina komt via config.SECTIE_TOON en een klasse <wortel>--<toon> hieronder.) */

/* ---- Artikeltekst v2 (Draagbalken.nl), nieuw ontwerp uit de ideeen van de library (offset-shape, soft-cards, heading-stack).
   Kopband: links titel, lead en Belangrijkste punten, rechts een donkere inhoudskaart (datum, leestijd, auteur, hoofdstukken) waarvan
   een uitgesneden stuk van de foto (de twee hoofden met lashelm) boven het fotokader en de kaartrand uitsteekt. Daaronder een gecentreerde, bredere leeskolom van 50rem (tekst 68ch). Merkwaarden: ../_shared/tokens.css. */
.db-art2{
  --a2-tekst:var(--db-tekst-op-donker);
  --a2-zacht:color-mix(in srgb,var(--db-wit) 85%,transparent);
  --a2-lijn:color-mix(in srgb,var(--db-wit) 22%,transparent);
  --a2-kaart-tekst:var(--db-tekst);
  --a2-kolom:100%;
  --a2-leest:none;
  --a2-rail:21rem;
  --a2-gat:4rem;
  --a2-op:2.4rem;
  --a2-breuk:linear-gradient(180deg,var(--db-zwart) 0,var(--db-grijs) 80%);  /* schuine band erachter (gebruiker 2026-10-28) */
  position:relative;isolation:isolate;overflow:clip;padding:clamp(3.5rem,7vw,6rem) 0 clamp(3.5rem,7vw,6rem);
  --sectie-achtergrond:var(--db-gradient);background:var(--sectie-achtergrond);color:var(--a2-tekst);font-family:var(--db-font-tekst);
}
.db-art2::before{content:"";position:absolute;z-index:-1;left:-6%;right:-6%;top:25%;bottom:-6%;background:var(--a2-breuk);transform:skewY(calc(var(--db-helling) * -1));transform-origin:100% 100%;pointer-events:none}
.db-art2 :focus-visible{outline:calc(2 * var(--db-rand)) solid var(--db-focus);outline-offset:3px}
.db-art2__inner{width:min(100% - 2rem,75rem);margin:0 auto}
.db-art2__kop{display:grid;grid-template-columns:minmax(0,1fr) var(--a2-rail);column-gap:var(--a2-gat);align-items:stretch}
.db-art2__kop-tekst{display:flex;flex-direction:column;min-width:0;container-type:inline-size;padding-top:.4rem}  /* kolom: Belangrijkste punten vult door tot de onderrand van de inhoudskaart */
.db-art2__tekst{width:min(100%,var(--a2-kolom));margin:1rem auto 0;min-width:0}

/* ---- kop */
.db-art2__tag{display:inline-block;align-self:flex-start;margin:0 0 1.1rem;padding:.4rem .7rem;border-radius:var(--db-radius);background:var(--db-roze);color:var(--db-puurwit);font:600 .8rem/1 var(--db-font-kop);letter-spacing:.1em;text-transform:uppercase}
.db-art2__kop h2{margin:0;font:700 min(clamp(1.85rem,1.2rem + 2.8vw,3.4rem),8.3cqi)/1.06 var(--db-font-kop);letter-spacing:-.025em;text-wrap:balance;overflow-wrap:normal;hyphens:manual}  /* nooit midden in een woord breken (cqi: kolombreedte) */
.db-art2__lead{margin:1.3rem 0 0;color:var(--a2-zacht);font-size:1.1875rem;line-height:1.65}
.db-art2__punten{flex:1 0 auto;margin:2rem 0 0;padding:1.4rem 1.6rem 1.6rem;border-radius:var(--db-radius);background:var(--db-vlak);color:var(--a2-kaart-tekst);box-shadow:inset var(--db-balk) 0 0 var(--db-roze)}
.db-art2__punten-t{margin:0 0 .9rem;font:700 1.05rem/1.2 var(--db-font-kop)}
.db-art2__punten .db-art2__lijst{margin:0}
.db-art2__punten .db-art2__lijst li{margin-bottom:.7rem}
.db-art2__punten .db-art2__lijst li:last-child{margin-bottom:0}

/* ---- vervolgdeel: hoofdstukken tussen andere secties, zonder eigen kop; alleen de sectiepadding staat boven het eerste hoofdstuk */
.db-art2--vervolg .db-art2__tekst{margin-top:0}
.db-art2--vervolg .db-art2__hs:first-child{padding-top:0}

/* ---- hoofdstukken */
.db-art2__hs{padding-top:3rem;scroll-margin-top:1.5rem}
.db-art2__hs > :is(h2,h3){display:grid;grid-template-columns:auto minmax(0,1fr);gap:.9rem;align-items:start;margin:0 0 1.1rem;font:700 clamp(1.4rem,1.1rem + 1vw,1.8rem)/1.22 var(--db-font-kop);letter-spacing:-.01em;text-wrap:balance}
.db-art2__hn{display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:var(--db-radius);background:var(--db-zwart);color:var(--db-roze);font:700 1.05rem/1 var(--db-font-kop)}
.db-art2__body > :is(p,ul){max-width:var(--a2-leest)}
.db-art2__hs p{margin:0 0 1.05rem;font-size:1.0625rem;line-height:1.72}
.db-art2__hs a{color:var(--a2-tekst);font-weight:700;text-decoration:none}
.db-art2__lijst{margin:0 0 1.2rem;padding:0;list-style:none}
.db-art2__lijst li{position:relative;margin:0 0 .55rem;padding-left:1.5rem;font-size:1.0625rem;line-height:1.62}
.db-art2__lijst li::before{content:"";position:absolute;left:0;top:.7em;width:.7rem;height:var(--db-balk);background:var(--db-roze)}
.db-art2__sub{max-width:var(--a2-leest);margin:1.6rem 0 0;padding:1.1rem 1.3rem 1.2rem;border-radius:var(--db-radius);background:var(--db-vlak);color:var(--a2-kaart-tekst);scroll-margin-top:1.5rem}
.db-art2__sub h4{margin:0 0 .45rem;font:600 1.08rem/1.35 var(--db-font-kop)}
.db-art2__sub p{margin:0}
.db-art2__tabel{margin:1.5rem 0 0}
.db-art2__tabel table{width:100%;border-collapse:collapse;font-size:1rem;line-height:1.5}
.db-art2__tabel thead th{padding:.2rem 1rem .8rem;text-align:left;font:600 .8rem/1.3 var(--db-font-kop);letter-spacing:.08em;text-transform:uppercase;color:var(--a2-zacht);box-shadow:inset 0 calc(var(--db-balk) * -1) 0 var(--db-roze)}
.db-art2__tabel tbody :is(th,td){padding:.9rem 1rem;border-bottom:1px solid var(--a2-lijn);text-align:left;vertical-align:top}
.db-art2__tabel tbody th{width:28%;font:700 1rem/1.4 var(--db-font-kop)}
.db-art2__vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* figuur: breder dan de tekst; een donker vlak steekt boven en rechts achter de foto uit */
.db-art2__fig{position:relative;margin:2.4rem 0 .6rem;isolation:isolate}
.db-art2__fig::before{content:"";position:absolute;z-index:-1;top:-1.6rem;right:-1.8rem;width:70%;height:72%;border-radius:var(--db-radius);background:var(--db-rook)}
.db-art2__fig img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:50% 50%;border-radius:var(--db-radius);box-shadow:var(--db-schaduw)}
/* figuur naast de lopende tekst: de tekst loopt eromheen, het donkere vlak blijft binnen de sitecontainer */
.db-art2__body{display:flow-root}
.db-art2__fig--rechts,.db-art2__fig--links{width:46%;margin:.35rem 0 1.4rem}
.db-art2__fig--rechts{float:right;margin-left:clamp(1.6rem,3vw,2.75rem)}
.db-art2__fig--links{float:left;margin-right:clamp(1.6rem,3vw,2.75rem)}
.db-art2__fig--rechts::before{left:-1.1rem;right:auto;top:-.8rem}
.db-art2__fig--links::before{right:-1.1rem;top:-.8rem}
.db-art2__fig--rechts img,.db-art2__fig--links img{aspect-ratio:3/2}
.db-art2__fig figcaption{margin-top:.75rem;padding-left:.8rem;box-shadow:inset var(--db-balk) 0 0 var(--db-roze);color:var(--a2-zacht);font-size:.9375rem;line-height:1.45}
.db-art2__fig--links ~ ul{display:flow-root}

/* ---- inhoudskaart */
.db-art2__toc{position:relative;align-self:stretch;margin-top:calc(var(--a2-op) + .2rem);padding:0 1.3rem 1.6rem;border-radius:var(--db-radius);background:var(--db-zwart);color:var(--db-tekst-op-donker);box-shadow:inset 0 calc(var(--db-balk) * -1) 0 var(--db-roze)}
.db-art2__foto{--a2-kop:20.5%;position:relative;margin:-2.1rem -1.1rem 0 .5rem;aspect-ratio:1000/839}
.db-art2__kader{position:absolute;inset:var(--a2-kop) 0 0 0;overflow:hidden;border-radius:var(--db-radius);box-shadow:var(--db-schaduw);background:var(--db-zwart)}
.db-art2__kader img{width:100%;height:100%;object-fit:cover}
.db-art2__uit{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.db-art2__meta{margin:1rem 0 1rem;padding:0 0 .9rem;list-style:none;border-bottom:1px solid var(--db-grijs)}
.db-art2__meta li{display:flex;align-items:center;gap:.65rem;padding:.25rem 0;font-size:.92rem}
.db-art2__meta svg{flex:none;width:1.1rem;height:1.1rem;color:var(--db-roze)}
.db-art2__label{margin:0 0 .4rem;color:var(--db-roze);font:700 .78rem/1 var(--db-font-kop);letter-spacing:.14em;text-transform:uppercase}
.db-art2__toc ol{margin:0;padding:0;list-style:none}
.db-art2__toc a{display:flex;align-items:center;gap:.7rem;min-height:2.75rem;padding:.25rem 0;color:var(--db-tekst-op-donker);text-decoration:none;font:500 .9rem/1.3 var(--db-font-kop)}
.db-art2__toc .db-art2__n{flex:none;display:grid;place-items:center;width:1.6rem;height:1.6rem;border-radius:var(--db-radius);background:var(--db-roze);color:var(--db-zwart);font:700 .78rem/1 var(--db-font-kop)}

/* ---- contact */
.db-art2__acties{display:flex;flex-wrap:wrap;gap:.7rem}
.db-art2__knop{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:3rem;padding:.75rem 1.3rem;border-radius:var(--db-radius);background:var(--db-actie);color:var(--db-puurwit);text-decoration:none;font:600 1rem/1.2 var(--db-font-kop)}
.db-art2__hs a.db-art2__knop{box-shadow:none;font-weight:600;color:var(--db-actie-tekst)}
.db-art2__knop svg{width:1.1rem;height:1.1rem;fill:currentColor}
.db-art2__knop--2{background:var(--db-vlak);box-shadow:inset 0 0 0 2px var(--db-zwart)}
.db-art2__hs a.db-art2__knop--2{box-shadow:inset 0 0 0 2px var(--db-zwart);color:var(--a2-kaart-tekst)}
.db-art2__vraag{margin-top:1.8rem;max-width:var(--a2-leest)}
.db-art2__vraag-t{margin:0 0 .9rem;font:700 1.15rem/1.3 var(--db-font-kop)}
.db-art2__slot{width:min(100%,var(--a2-kolom));margin:3.6rem auto 0;padding:2rem 2rem 2.2rem;border-radius:var(--db-radius);background:var(--db-zwart);color:var(--db-tekst-op-donker);box-shadow:inset 0 calc(var(--db-balk) * -1) 0 var(--db-roze)}
.db-art2__slot-t{margin:0;max-width:24ch;font:700 clamp(1.5rem,1.2rem + 1vw,2rem)/1.2 var(--db-font-kop);text-wrap:balance}
.db-art2__slot-p{margin:.8rem 0 1.4rem;max-width:46ch;line-height:1.6}
.db-art2__slot .db-art2__knop--2{background:transparent;color:var(--db-tekst-op-donker);box-shadow:inset 0 0 0 2px var(--db-wit)}

/* ---- 900: kop in een kolom, inhoudskaart onder de tekst van de kop */
@media (max-width:900px){
  .db-art2__kop{grid-template-columns:minmax(0,1fr);row-gap:0}
  .db-art2__toc{margin-top:calc(var(--a2-op) + 2rem)}
  .db-art2__toc ol{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));column-gap:1.4rem}
  .db-art2__toc{display:grid;grid-template-columns:20rem minmax(0,1fr);column-gap:1.6rem;align-items:center}
  .db-art2__foto{grid-column:1;grid-row:1 / 3;margin:-2.1rem 0 1rem}
  .db-art2__meta{grid-column:2;grid-row:1;margin:1rem 0 0;border-bottom:0;padding-bottom:0}
  .db-art2__label{grid-column:2;grid-row:2;align-self:end;margin:0 0 1rem}
  .db-art2__toc ol{grid-column:1 / -1}
  .db-art2__fig{margin-inline:0}
  .db-art2__fig::before{right:-.8rem}
  .db-art2__fig--rechts,.db-art2__fig--links{float:none;width:auto;margin:1.8rem 0 1.5rem}
  .db-art2__fig--rechts::before,.db-art2__fig--links::before{left:auto;right:-.5rem;top:-.7rem}
}
@media (max-width:560px){
  .db-art2{--a2-op:1.8rem}
  .db-art2__toc{display:block}
  .db-art2__foto{margin:-2.1rem 0 1rem .3rem}
  .db-art2__meta{margin:0 0 1rem;padding-bottom:.9rem;border-bottom:1px solid var(--db-grijs)}
  .db-art2__label{margin:0 0 .4rem}
  .db-art2__hs{padding-top:2.4rem}
  .db-art2__hs > :is(h2,h3){grid-template-columns:minmax(0,1fr)}
  .db-art2__hn{width:2.1rem;height:2.1rem}
  .db-art2__tabel thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .db-art2__tabel :is(table,tbody,tr,th,td){display:block}
  .db-art2__tabel tr{margin-bottom:.7rem;padding:.4rem 0;border-radius:var(--db-radius);border:var(--db-rand) solid var(--db-roze);background:var(--db-vlak);color:var(--a2-kaart-tekst)}
  .db-art2__tabel tbody :is(th,td){width:auto;padding:.35rem 1rem;border-bottom:0}
  .db-art2__tabel td::before{content:attr(data-l);display:block;color:var(--a2-zacht);font:600 .75rem/1.4 var(--db-font-kop);letter-spacing:.06em;text-transform:uppercase}
  .db-art2__acties{flex-direction:column}
  .db-art2__slot{padding:1.6rem 1.25rem 1.8rem}
}

/* hover:start (alleen transform; gespiegeld op focus-visible) */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .db-art2__knop{transition:transform .25s ease}
  .db-art2__knop:is(:hover,:focus-visible){transform:translateY(-2px)}
  .db-art2__toc a{transition:transform .2s ease}
  .db-art2__toc a:is(:hover,:focus-visible){transform:translateX(4px)}
}
/* hover:end */

/* dunne roze rand (gebruiker 2026-10-27): blok dicht bij de kleur van zijn achtergrond */
.db-art2__punten,.db-art2__sub{border:var(--db-rand) solid var(--db-roze)}

/* contactroutes in andere vorm (tekstlink met icoonvlak, chip), zodat er per sectie variatie is */
.db-art2__tel{display:inline-flex;align-items:center;gap:0.62rem;min-height:2.8rem;font:800 1.04rem/1.2 var(--db-font-kop);color:inherit;text-decoration:none}
.db-art2__tel i{display:grid;place-items:center;flex:none;width:2.55rem;height:2.55rem;background:var(--db-roze);color:var(--db-puurwit);border-radius:var(--db-radius)}
.db-art2__tel svg{width:1.10rem;height:1.10rem;fill:currentColor}
.db-art2__chip{display:inline-flex;align-items:center;gap:0.52rem;min-height:2.8rem;padding:0 1.2rem;font:700 1.01rem/1.2 var(--db-font-kop);color:inherit;text-decoration:none;background:color-mix(in srgb,currentColor 7%,transparent);border:var(--db-rand) solid var(--db-roze);border-radius:var(--db-radius)}
.db-art2__chip svg{flex:none;width:1.15rem;height:1.15rem;fill:currentColor}
.db-art2__hs a.db-art2__chip{box-shadow:none}

/* ---- Toonvarianten (website-kit RULES 4.26). Standaard verloop (zwart boven, grijs onder); --verloop-om en --grijs: grijs boven, zwart onder. */
.db-art2.db-art2--grijs,.db-art2.db-art2--verloop-om{--sectie-achtergrond:var(--db-gradient-om);--a2-breuk:linear-gradient(180deg,var(--db-grijs) 0,var(--db-zwart) 80%)}
@media (max-width:560px){.db-art2__tabel td::before{color:var(--db-tekst-zacht)}}

/* lange woorden: afbreken op smalle schermen, zonder de letter kleiner te maken */
@media (max-width:384px){
  .db-art2__hs > :is(h2,h3){overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:14 11 6;-webkit-hyphenate-limit-before:11;-webkit-hyphenate-limit-after:6}
  .db-art2__hs a{overflow-wrap:anywhere}
}
/* ---- prijsopbouw: prijsopbouw-v2 ---- */
/* ---- Prijsopbouw v2 (Draagbalken.nl), nieuw ontwerp: prijsbalken.
   Donker verloopvlak met elke post als balk op een schaal van 0 tot 2800 euro (laagste tot hoogste indicatiebedrag, het bedrag staat ook als tekst).
   De foto steekt boven de paneelrand uit. Links kop, totaalzin, prijsfactoren en knop. Merkwaarden uit ../_shared/tokens.css. */

/* toon: verloop (eigen achtergrond van deze sectie; de paginagenerator leest deze regel. Een andere toon per pagina komt via config.SECTIE_TOON en een klasse <wortel>--<toon>.) */
.db-po2{--offerte:#15803D;--offerte-hover:#166534;--p2-tekst:var(--db-tekst-op-donker);--p2-zacht:color-mix(in srgb,var(--db-wit) 85%,transparent);--p2-kaart-tekst:var(--db-tekst);--p2-kaart-zacht:var(--db-tekst-zacht);--p2-vlak:var(--db-vlak);--p2-wit:var(--db-puurwit);--p2-gap:clamp(1.5rem,3vw,2.5rem);
  position:relative;overflow:clip;padding:clamp(3.5rem,7vw,6rem) 0;--sectie-achtergrond:var(--db-gradient);--p2-breuk:linear-gradient(180deg,var(--db-zwart) 0,var(--db-grijs) 80%);background:var(--sectie-achtergrond);color:var(--p2-tekst);font-family:var(--db-font-tekst)}
.db-po2::before{content:"";position:absolute;z-index:0;left:-6%;right:-6%;top:30%;bottom:-6%;background:var(--p2-breuk);transform:skewY(calc(var(--db-helling) * -1));transform-origin:100% 100%;pointer-events:none}  /* schuine achtergrondbreuk (gebruiker 2026-10-28) */
.db-po2 :focus-visible{outline:calc(2 * var(--db-rand)) solid var(--db-focus);outline-offset:3px}
.db-po2 *{min-width:0}
.db-po2__inner{position:relative;z-index:1;width:min(100% - 2rem,75rem);margin:0 auto}
.db-po2__tag{display:inline-block;margin:0 0 1.1rem;padding:.45rem .75rem;border-radius:var(--db-radius);background:var(--db-roze);color:var(--db-puurwit);
  font:600 .8rem/1 var(--db-font-kop);letter-spacing:.12em;text-transform:uppercase}
.db-po2 h2{margin:0;max-width:15ch;font:700 clamp(2.1rem,1.3rem + 2.4vw,3.1rem)/1.06 var(--db-font-kop);letter-spacing:-.02em;text-wrap:balance;hyphens:manual}
.db-po2__lead{margin:1rem 0 0;max-width:31rem;color:var(--p2-zacht);font-size:1.1rem;line-height:1.58}
.db-po2__acties{display:flex;flex-wrap:wrap;gap:.7rem}
.db-po2__btn{display:inline-flex;align-items:center;gap:.55rem;min-height:3rem;padding:.9rem 1.5rem;border-radius:var(--db-radius);
  background:var(--offerte);color:var(--db-puurwit);text-decoration:none;font:600 1.02rem/1.2 var(--db-font-kop);box-shadow:var(--db-schaduw)}
.db-po2__btn svg{flex:none;width:1.1rem;height:1.1rem;fill:currentColor}
.db-po2__btn--sec{background:var(--db-puurwit);color:var(--p2-kaart-tekst);box-shadow:inset 0 0 0 2px var(--db-zwart)}
.db-po2__btn--ond{background:transparent;color:var(--db-tekst-op-donker);box-shadow:inset 0 0 0 2px var(--db-tekst-op-donker)}
.db-po2__groep{display:flex;align-items:center;gap:.7rem;margin:0;font:700 1.12rem/1.25 var(--db-font-kop)}
.db-po2__groep span{flex:none;display:grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:50%;background:var(--db-roze);color:var(--db-puurwit);font:700 .95rem/1 var(--db-font-kop)}
.db-po2__rijen{list-style:none;margin:0;padding:0}
.db-po2__wat{display:flex;flex-direction:column;gap:.2rem}
.db-po2__wat b{font:600 1.02rem/1.35 var(--db-font-kop)}
.db-po2__wat small{color:var(--p2-zacht);font-size:.88rem;line-height:1.4}
.db-po2__bedrag{white-space:nowrap;font:700 1.02rem/1.3 var(--db-font-kop)}
.db-po2__chips{display:flex;flex-wrap:wrap;gap:.45rem;list-style:none;margin:0;padding:0}
.db-po2__chips li{padding:.5rem .85rem;border:var(--db-rand) solid var(--db-roze);border-radius:var(--db-radius);background:var(--db-roze);color:var(--db-puurwit);font:500 .9rem/1.3 var(--db-font-kop)}  /* gebruiker 2026-10-27: de kleine grijze blokken roze; het grote grijze blok (pakketprijzen) blijft grijs */
.db-po2__direct{display:flex;flex-wrap:wrap;gap:.2rem 1.4rem;margin:0}
.db-po2__direct a{display:inline-flex;align-items:center;gap:.45rem;min-height:2.8rem;color:var(--p2-tekst);text-decoration:none;font:700 1rem/1.2 var(--db-font-kop)}
.db-po2__direct svg{flex:none;width:1.1rem;height:1.1rem;fill:currentColor}
.db-po2__totaal{margin:0;font:600 1.12rem/1.5 var(--db-font-kop);text-wrap:pretty}
.db-po2__noot{margin:0;color:var(--p2-zacht);font-size:.95rem;line-height:1.5}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .db-po2__btn{transition:transform .22s ease}
  .db-po2__btn:is(:hover,:focus-visible){transform:translateY(-2px)}
  .db-po2__btn svg{transition:transform .2s ease}
  .db-po2__btn:is(:hover,:focus-visible) svg{transform:translateX(3px)}
}

.db-po2{--p2-lijn:rgb(255 255 255 / .14);--p2-spoor:rgb(255 255 255 / .12);--p2-lijn-l:rgb(var(--db-zwart-rgb) / .12)}
.db-po2__inner{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.35fr);gap:clamp(2rem,4vw,4rem);align-items:start}
.db-po2__links{display:flex;flex-direction:column;align-items:flex-start;gap:1.5rem;padding-top:1rem}
.db-po2__links > *{margin:0}
.db-po2__paneel{--p2-hef:1.25rem;position:relative;margin-top:4.5rem;padding:0 clamp(1.25rem,3vw,2.5rem) calc(clamp(1.5rem,3vw,2.25rem) + var(--p2-hef));border-radius:var(--db-radius);
  border:var(--db-rand) solid var(--db-roze);background:var(--db-zwart);color:var(--db-tekst-op-donker);box-shadow:inset 0 calc(var(--db-balk) * -1) 0 var(--db-roze)}
.db-po2__fig{position:relative;z-index:2;margin:calc(var(--db-rand) * -1) 0 calc(1.5rem - var(--p2-hef));translate:0 calc(var(--p2-hef) * -1);aspect-ratio:2.35;min-height:11rem}
.db-po2__rahmen{position:absolute;inset:0;overflow:hidden;border:var(--db-rand) solid var(--db-roze);border-radius:var(--db-radius);background:var(--db-zwart);box-shadow:var(--db-schaduw)}
.db-po2__canvas{position:absolute;top:0;left:0;width:100%;aspect-ratio:1920 / 1413;translate:0 calc(var(--py,0) * -100%)}
.db-po2__canvas img{position:absolute;top:0;left:0;display:block;width:100%;height:auto}
.db-po2__uit{position:absolute;z-index:2;inset:var(--db-rand);pointer-events:none;clip-path:inset(-30rem 0 0 0)}
.db-po2__paneel .db-po2__groep{margin-top:1.1rem;color:var(--db-tekst-op-donker)}
.db-po2__paneel .db-po2__groep:first-of-type{margin-top:0}
.db-po2__rij{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) auto;align-items:center;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--p2-lijn)}
.db-po2__paneel .db-po2__wat small{color:var(--db-tekst-op-donker);opacity:.75}
.db-po2__spoor{position:relative;height:.9rem;border-radius:var(--db-radius);background:var(--p2-spoor)}
.db-po2__balk{position:absolute;top:0;bottom:0;left:calc(var(--von) * 1%);width:calc(var(--br) * 1%);min-width:.5rem;border-radius:var(--db-radius);background:var(--db-roze)}
.db-po2__bedrag{min-width:9.5rem;text-align:right}
.db-po2__schaal{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) 9.5rem;gap:1rem;margin:.75rem 0 0;font:500 .8rem/1 var(--db-font-kop);opacity:.8}
.db-po2__as{display:flex;justify-content:space-between}
.db-po2__as i{font-style:normal}
.db-po2__pakket{display:flex;flex-direction:column;gap:.8rem;width:100%;padding:1.25rem 1.25rem 1.4rem;border-radius:var(--db-radius);border:var(--db-rand) solid var(--db-roze);background:var(--p2-vlak);color:var(--p2-kaart-tekst);box-shadow:inset var(--db-balk-links) 0 0 var(--db-roze)}
.db-po2__pakket .db-po2__noot{color:var(--p2-kaart-zacht)}
.db-po2__pk-kop{margin:0;font:700 1.1rem/1.3 var(--db-font-kop)}
.db-po2__pk-lijst{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.1rem}
.db-po2__pk-lijst li{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px solid var(--p2-lijn-l)}
.db-po2__pk-lijst li:last-child{border-bottom:0;padding-bottom:.2rem}
.db-po2__pk-lijst b{font:700 1.05rem/1.3 var(--db-font-kop);white-space:nowrap}
/* past de prijs niet naast het label, dan gaat hij naar een eigen regel, rechts; het label telt mee met zijn langste woord, dus waar het nu past blijft alles gelijk */
.db-po2__pk-lijst li{flex-wrap:wrap;row-gap:.1rem}
.db-po2__pk-lijst li > span{flex:1 1 0;min-width:auto}
.db-po2__pk-lijst b{margin-left:auto}
.db-po2__links{position:sticky;top:2rem}
.db-po2__paneel > .db-po2__noot{margin-top:1rem;color:var(--db-tekst-op-donker);opacity:.85}
@media (max-width:1000px){
  .db-po2__rij{grid-template-columns:minmax(0,1fr) auto}
  .db-po2__spoor{grid-column:1 / -1;grid-row:2}
  .db-po2__schaal{display:none}
}
@media (max-width:900px){.db-po2__links{position:static}}
@media (max-width:900px){
  .db-po2__inner{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .db-po2__paneel{--p2-hef:1rem}
  .db-po2__fig{width:100%;max-width:100%}
  .db-po2__bedrag{min-width:0;font-size:1rem}
  .db-po2__rij{grid-template-columns:minmax(0,1fr)}
  .db-po2__spoor{grid-row:auto;grid-column:auto}
}

/* ---- Toonvarianten (website-kit RULES 4.26). Standaard verloop (zwart boven, grijs onder); --verloop-om en --grijs: grijs boven, zwart onder. --wit is afgeschaft voor paginagebruik. */
.db-po2.db-po2--wit{--sectie-achtergrond:var(--db-puurwit);--p2-breuk:var(--db-puurwit)}
.db-po2.db-po2--grijs,.db-po2.db-po2--verloop-om{--sectie-achtergrond:var(--db-gradient-om);--p2-breuk:linear-gradient(180deg,var(--db-grijs) 0,var(--db-zwart) 80%)}
/* ---- rekentool: rekentool-v4 ---- */
/* toon: verloop (eigen achtergrond van deze sectie; de paginagenerator leest deze regel voor website-kit RULES 4.26. Een andere toon per pagina komt via config.SECTIE_TOON en een klasse <wortel>--<toon> hieronder.) */

/* ---- Rekentool v4 (Draagbalken.nl), nieuw ontwerp uit de ideeen van savings-calculator.
   Links kop, de documenten die de constructeur daarna nodig heeft en een contactkaart; rechts een stappenkaart (lengte, doorbraken,
   pakket, aanvragen) met voortgangsbalk en een bon die altijd zichtbaar blijft. De vier panelen delen een rastercel, dus de kaart
   heeft op elke stap dezelfde hoogte. Meike staat achter de kaart en kijkt over de bovenrand (out-of-border, onderaan verankerd aan de kaart). */
.db-rt4{
  --rt-tekst:var(--db-tekst);--rt-zacht:var(--db-tekst-zacht);--rt-veld:var(--db-puurwit);--rt-gekozen:var(--db-puurwit);
  --rt-rand:rgb(var(--db-zwart-rgb) / .3);--rt-lijn:rgb(var(--db-zwart-rgb) / .14);--rt-klik:rgb(var(--db-zwart-rgb) / .5);--rt-klik-s:rgb(var(--db-zwart-rgb) / .6);--rt-klik-n:rgb(var(--db-zwart-rgb) / .35);
  --sectie-achtergrond:var(--db-gradient);--rt-rand-donker:#D9D9D9;--wa:#25D366;--wa-hover:#1EBE5A;--rt-band:8rem;--rt-h:12.5rem;--rt-in:4.5rem;--rt-stap:1;--rt-breuk:linear-gradient(180deg,var(--db-zwart) 0,var(--db-grijs) 80%);
  position:relative;overflow:clip;padding:clamp(2.5rem,5vw,4.5rem) 0 clamp(3rem,6vw,5rem);background:var(--sectie-achtergrond)}
.db-rt4::before{content:"";position:absolute;z-index:0;left:-6%;right:-6%;top:35%;bottom:-6%;background:var(--rt-breuk);transform:skewY(calc(var(--db-helling) * -1));transform-origin:100% 100%;pointer-events:none}  /* schuine achtergrondbreuk (gebruiker 2026-10-28), recept reviews-v6 */
.db-rt4__inner{position:relative;z-index:1;width:min(100% - 2rem,75rem);margin:0 auto}
.db-rt4__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:1.5rem 2.2rem;align-items:stretch}
.db-rt4__links{display:flex;flex-direction:column;gap:1.6rem;min-width:0}
.db-rt4__contact{display:grid;gap:.9rem;padding:1.3rem 1.4rem;border-radius:var(--db-radius);background:var(--db-zwart);color:var(--db-wit);box-shadow:inset 0 calc(var(--db-balk) * -1) 0 var(--db-roze),0 0 0 1px var(--rt-rand-donker)}
.db-rt4__contactkop{margin:0;font:700 1.2rem/1.25 var(--db-font-kop)}
.db-rt4__contactknoppen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}
.db-rt4__contact .db-rt4__knop--rand{color:var(--db-wit)}
.db-rt4__rechts{position:relative;display:flex;flex-direction:column;min-width:0;padding-top:var(--rt-band)}
.db-rt4__uitsnede{position:absolute;z-index:0;right:clamp(1rem,4vw,3rem);top:calc(var(--rt-band) + var(--rt-in) - var(--rt-h));height:var(--rt-h);width:auto}
.db-rt4__kaart{position:relative;z-index:1;display:flex;flex:1;flex-direction:column;gap:1.3rem;min-width:0;padding:clamp(1.2rem,2.6vw,2rem);background:var(--db-vlak);border:var(--db-rand) solid var(--db-roze);border-radius:var(--db-radius);box-shadow:var(--db-schaduw)}
.db-rt4__nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.4rem;margin:0;padding:0;list-style:none}
.db-rt4__nav button{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;min-height:2.75rem;padding:.4rem .3rem;border:0;border-radius:var(--db-radius);background:transparent;color:var(--rt-zacht);font:600 .88rem/1.2 var(--db-font-kop);cursor:pointer}
.db-rt4__navnr{display:inline-grid;place-items:center;flex:none;width:1.6rem;height:1.6rem;border-radius:50%;background:var(--db-puurwit);border:1px solid var(--rt-rand);font:700 .8rem/1 var(--db-font-kop);color:var(--rt-tekst)}
.db-rt4__nav button[aria-current="step"]{color:var(--rt-tekst)}
.db-rt4__nav button[aria-current="step"] .db-rt4__navnr,.db-rt4__nav button.is-klaar .db-rt4__navnr{background:var(--db-roze);border-color:var(--db-roze);color:var(--db-actie-tekst)}
.db-rt4__voortgang{height:var(--db-balk);margin-top:-.6rem;border-radius:var(--db-radius);background:color-mix(in srgb,var(--db-zwart) 12%,transparent);overflow:hidden}
.db-rt4__voortgang i{display:block;height:100%;width:calc(var(--rt-stap) * 25%);background:var(--db-roze)}
.db-rt4__panelen{display:block;flex:1}
.db-rt4__paneel{align-content:center;display:grid;gap:.4rem;min-width:0}
.db-rt4.is-wiz .db-rt4__panelen{display:grid;align-content:stretch}
.db-rt4.is-wiz .db-rt4__paneel{grid-area:1 / 1;visibility:hidden;pointer-events:none}
.db-rt4.is-wiz .db-rt4__paneel.is-actief{visibility:visible;pointer-events:auto}
.db-rt4__bon{display:flex;flex:1;flex-direction:column;padding:1.3rem 1.4rem 1.4rem;border-radius:var(--db-radius);background:var(--db-puurwit);border:var(--db-rand) solid var(--db-roze);box-shadow:var(--db-schaduw)}
.db-rt4__bonkop{margin:0 0 .5rem;font:700 1.3rem/1.2 var(--db-font-kop)}
.db-rt4__aanl{margin-top:.6rem}
.db-rt4__totaalrij{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-top:1rem;padding:.75rem 1.2rem;border-radius:var(--db-radius);background:var(--db-zwart);color:var(--db-wit);font:600 .95rem/1.3 var(--db-font-kop)}
.db-rt4__totaalrij strong{color:var(--db-roze);font:800 clamp(1.7rem,1.4rem + 1.4vw,2.3rem)/1 var(--db-font-kop);letter-spacing:-.015em;font-variant-numeric:tabular-nums;white-space:nowrap}
.db-rt4__btw{display:block;font-size:.8rem;font-weight:500}
.db-rt4__acties{display:grid;gap:.6rem;margin-top:.8rem}
.db-rt4__voet{display:flex;justify-content:space-between;gap:.8rem}
.db-rt4__voet .db-rt4__knop{width:auto;min-width:7.5rem}
.db-rt4__voet button:disabled{border-style:dashed;border-color:var(--rt-lijn);background:color-mix(in srgb,var(--db-zwart) 6%,transparent);color:var(--rt-zacht);box-shadow:none;cursor:not-allowed;transform:none}
.db-rt4__voet button:disabled svg{opacity:.5}
.db-rt4__keuzes--n .db-rt4__box{min-height:4.4rem;font-size:1.4rem}
.db-rt4__keuzes--n .db-rt4__box small{font-size:.8rem}
.db-rt4__samen{margin-bottom:.3rem}

.db-rt4{font-family:var(--db-font-tekst);color:var(--db-tekst-op-donker)}
.db-rt4 :is(.db-rt4__kaart,.db-rt4__bon){color:var(--rt-tekst)}
.db-rt4 :focus-visible{outline:calc(2 * var(--db-rand)) solid var(--db-focus);outline-offset:3px}
.db-rt4 [hidden]{display:none!important}
.db-rt4 h2{margin:0;font:700 clamp(1.786rem,1.222rem + 2vw,2.632rem)/1.08 var(--db-font-kop);letter-spacing:-.02em;text-wrap:balance}
.db-rt4__tag{display:inline-block;margin:0 0 0.94rem;padding:0.376rem 0.658rem;border-radius:var(--db-radius);background:var(--db-roze);color:var(--db-actie-tekst);font:600 0.752rem/1 var(--db-font-kop);letter-spacing:.1em;text-transform:uppercase}
.db-rt4__lead{margin:0.846rem 0 0;max-width:37.6rem;color:var(--db-tekst-op-donker);font-size:0.959rem;line-height:1.6}
.db-rt4__vraag{min-width:0;margin:0;padding:0;border:0}
.db-rt4__label{display:flex;align-items:center;gap:0.564rem;margin:0 0 0.564rem;padding:0;font:600 0.94rem/1.3 var(--db-font-kop)}
.db-rt4__nr{flex:none;display:inline-grid;place-items:center;width:1.598rem;height:1.598rem;border-radius:50%;background:var(--db-roze);color:var(--db-actie-tekst);font:700 0.799rem/1 var(--db-font-kop)}
.db-rt4__invoer{text-size-adjust:100%;position:relative;display:flex;align-items:center}
.db-rt4__invoer input{width:100%;min-width:0;min-height:3.055rem;padding:0.564rem 2.82rem 0.564rem 0.94rem;border:1px solid var(--rt-rand);border-radius:var(--db-radius);background:var(--rt-veld);color:var(--rt-tekst);font:600 1.269rem/1 var(--db-font-kop)}
.db-rt4__invoer input{caret-color:var(--db-zwart)}  /* tekstcursor zwart (gebruiker 2026-10-28) */
.db-rt4__eenheid{position:absolute;right:0.94rem;color:var(--rt-zacht);font:600 0.94rem/1 var(--db-font-kop);pointer-events:none}
.db-rt4__hulp{margin:0.47rem 0 0;color:var(--rt-zacht);font-size:0.827rem;line-height:1.45}
.db-rt4__hint{margin:0.517rem 0 0;font-size:0.865rem;font-weight:700;line-height:1.4}
.db-rt4__hint button{min-height:2.585rem;margin-left:0.329rem;padding:0.376rem 0.799rem;border:0;border-radius:var(--db-radius);background:var(--db-roze);color:var(--db-actie-tekst);font:600 0.846rem/1.2 var(--db-font-kop);cursor:pointer}
.db-rt4__keuzes{display:grid;gap:0.47rem}
.db-rt4__keuzes--n{grid-template-columns:repeat(5,minmax(0,1fr))}
.db-rt4__keuzes--p{grid-template-columns:repeat(2,minmax(0,1fr))}
.db-rt4__opt{position:relative;display:block;min-width:0}
.db-rt4__opt input{text-size-adjust:100%;position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.db-rt4__box{display:flex;flex-direction:column;justify-content:center;gap:0.235rem;height:100%;min-height:2.82rem;padding:0.611rem 0.799rem;border:1px solid var(--rt-rand);border-radius:var(--db-radius);background:var(--rt-veld);font:600 0.94rem/1.25 var(--db-font-kop)}
.db-rt4__box small{color:var(--rt-zacht);font:400 0.79rem/1.35 var(--db-font-tekst)}
.db-rt4__keuzes--n .db-rt4__box{align-items:center;text-align:center}
.db-rt4__opt input:checked + .db-rt4__box{text-size-adjust:100%;border-color:var(--db-roze);background:var(--rt-gekozen);box-shadow:inset 0 calc(var(--db-balk) * -1) 0 var(--db-roze)}
.db-rt4__opt input:focus-visible + .db-rt4__box{outline:calc(2 * var(--db-rand)) solid var(--db-focus);outline-offset:2px}
/* Klikbaar: duidelijke rand, keuzecirkel (radio) rechtsboven, hover- en gekozen-staat. */
.db-rt4__box{position:relative;border:2px solid var(--rt-klik);padding-right:2.4rem;cursor:pointer}
.db-rt4__keuzes--n .db-rt4__box{padding-right:.8rem}
.db-rt4__box::before{content:"";position:absolute;top:.55rem;right:.55rem;width:1.15rem;height:1.15rem;border-radius:50%;border:2px solid var(--rt-klik-s);background:var(--db-puurwit)}
.db-rt4__opt:hover .db-rt4__box{border-color:var(--db-zwart);background:color-mix(in srgb,var(--db-roze) 9%,var(--db-puurwit))}
.db-rt4__opt:hover input:not(:checked) + .db-rt4__box::before{border-color:var(--db-zwart);background:color-mix(in srgb,var(--db-roze) 30%,var(--db-puurwit))}
.db-rt4__opt input:checked + .db-rt4__box{border-width:var(--db-rand);border-color:var(--db-roze);background:color-mix(in srgb,var(--db-roze) 9%,var(--db-puurwit))}
.db-rt4__opt input:checked + .db-rt4__box::before{border-color:var(--db-zwart);background:radial-gradient(circle,var(--db-zwart) 0 34%,var(--db-roze) 38%)}
.db-rt4__nav button{border:1px solid var(--rt-klik-n);background:var(--db-puurwit)}
.db-rt4__nav button:hover{border-color:var(--db-zwart);background:color-mix(in srgb,var(--db-roze) 9%,var(--db-puurwit))}
.db-rt4__nav button[aria-current="step"]{border-color:var(--db-roze)}
.db-rt4__invoer input{border:2px solid var(--rt-klik)}
.db-rt4__invoer input:hover{border-color:var(--db-zwart)}
.db-rt4__invoer input:focus{border-width:var(--db-rand);border-color:var(--db-roze)}
.db-rt4__stapper{display:flex;align-items:stretch;gap:0.47rem}
.db-rt4__stapper button{flex:none;display:grid;place-items:center;width:3.055rem;min-height:3.055rem;border:1px solid var(--rt-rand);border-radius:var(--db-radius);background:var(--rt-veld);color:var(--rt-tekst);cursor:pointer}
.db-rt4__stapper svg{text-size-adjust:100%;width:1.034rem;height:1.034rem;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round}
.db-rt4__stapper output{flex:1;display:grid;place-items:center;min-height:3.055rem;border:1px solid var(--rt-rand);border-radius:var(--db-radius);background:var(--rt-veld);font:700 1.128rem/1 var(--db-font-kop)}
.db-rt4__knop{display:inline-flex;align-items:center;justify-content:center;gap:0.517rem;min-height:2.82rem;padding:0.752rem 1.175rem;border:1px solid transparent;border-radius:var(--db-radius);font:600 0.94rem/1.2 var(--db-font-kop);text-align:center;text-decoration:none;cursor:pointer}
.db-rt4__knop svg{flex:none;width:1.034rem;height:1.034rem;fill:currentColor}
.db-rt4__knop--primair{text-size-adjust:100%;background:var(--db-actie);color:var(--db-actie-tekst);box-shadow:var(--db-schaduw)}
.db-rt4__knop--donker{background:var(--db-zwart);color:var(--db-wit)}
.db-rt4__knop--licht{background:var(--db-puurwit);color:var(--db-zwart)}
.db-rt4__knop--rand{text-size-adjust:100%;background:transparent;color:inherit;border-color:currentColor}
.db-rt4__samen{margin:0;color:var(--rt-zacht);font-size:0.893rem;line-height:1.45}
.db-rt4__lines{display:grid;margin:0;padding:0;list-style:none}
.db-rt4__lines li{display:flex;justify-content:space-between;gap:0.94rem;padding:0.564rem 0;border-bottom:1px solid var(--rt-lijn);font-size:0.893rem;line-height:1.4}
.db-rt4__lines b{flex:none;font:700 0.921rem/1.4 var(--db-font-kop);white-space:nowrap;font-variant-numeric:tabular-nums}
.db-rt4__werk,.db-rt4__melding{margin:0.752rem 0 0;font-size:0.893rem;line-height:1.5}
.db-rt4__melding{font-weight:700}
.db-rt4__tot{margin:0;font:800 clamp(2.068rem,1.504rem + 2.4vw,3.196rem)/1 var(--db-font-kop);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.db-rt4__feiten{display:grid;gap:0.423rem;margin:0.846rem 0 0;padding:0;list-style:none;color:var(--rt-zacht);font-size:0.827rem;line-height:1.4}
.db-rt4__feiten li{display:flex;gap:0.517rem}
.db-rt4__feiten svg{flex:none;width:0.987rem;height:0.987rem;margin-top:0.094rem;padding:2px;border-radius:50%;background:var(--db-roze);color:var(--db-zwart)}
.db-rt4__aanl{margin-top:1.034rem;padding-top:0.94rem;border-top:1px solid var(--rt-lijn)}
.db-rt4__aanl h3{margin:0 0 0.564rem;font:700 0.94rem/1.3 var(--db-font-kop)}
.db-rt4__aanl ul{display:grid;gap:0.611rem;margin:0;padding:0;list-style:none}
.db-rt4__aanl b{display:block;font:600 0.865rem/1.35 var(--db-font-kop)}
.db-rt4__aanl span{display:block;margin-top:0.094rem;color:var(--rt-zacht);font-size:0.808rem;line-height:1.45}
.db-rt4__staffel{margin-top:0.94rem}
.db-rt4__staffelkop{margin:0 0 0.47rem;font:600 0.846rem/1.3 var(--db-font-kop)}
.db-rt4__staffellijst{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0.47rem;margin:0;padding:0;list-style:none}
.db-rt4__staffellijst li{display:flex;flex-direction:column;gap:0.141rem;padding:0.517rem 0.658rem;border:1px solid var(--rt-lijn);border-radius:var(--db-radius);background:var(--rt-veld);font-size:0.799rem;line-height:1.3}
.db-rt4__staffellijst b{font:700 0.921rem/1.2 var(--db-font-kop);font-variant-numeric:tabular-nums}
.db-rt4__staffellijst li.is-actief{border-color:var(--db-roze);box-shadow:inset 0 calc(var(--db-balk) * -1) 0 var(--db-roze)}
.db-rt4__staffellijst--drie{grid-template-columns:repeat(3,minmax(0,1fr))}
.db-rt4__uitsnede{text-size-adjust:100%;display:block;max-width:none;pointer-events:none;user-select:none}
@media (max-width:560px){
  .db-rt4__keuzes--p{grid-template-columns:minmax(0,1fr)}
  .db-rt4__knop{width:100%}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .db-rt4__knop,.db-rt4__box{transition:transform .2s ease,box-shadow .2s ease}
  .db-rt4__knop:is(:hover,:focus-visible){transform:translateY(-2px)}
  .db-rt4__knop svg{transition:transform .2s ease}
  .db-rt4__knop--primair:is(:hover,:focus-visible) svg{transform:translateX(4px)}
}

@media (max-width:900px){
  .db-rt4__grid{grid-template-columns:minmax(0,1fr)}
  .db-rt4{--rt-band:4.4rem;--rt-h:8.4rem;--rt-in:4rem}
  .db-rt4__links{display:contents}
  .db-rt4__kop{order:1}
  .db-rt4__rechts{order:2}
  .db-rt4__bon{order:3;flex:none}
  .db-rt4__contact{order:4}
}
@media (max-width:560px){
  .db-rt4__nav button{flex-direction:column;gap:.2rem;font-size:.75rem;padding-inline:.1rem}
  .db-rt4__voet .db-rt4__knop{width:auto;flex:1}
  .db-rt4__contactknoppen{grid-template-columns:minmax(0,1fr)}
}

.db-rt4__knop[href*="wa.me"],.db-rt4__contact .db-rt4__knop[href*="wa.me"]{background:var(--wa);border-color:var(--wa);color:var(--db-puurwit)}
.db-rt4__knop[href*="wa.me"]:is(:hover,:focus-visible){background:var(--wa-hover);border-color:var(--wa-hover)}

/* toon verloop-om: grijs boven, donker onder; kop en inleiding staan licht op het donker, kaart en bon blijven effen licht met donkere tekst. */
.db-rt4.db-rt4--verloop-om{--sectie-achtergrond:var(--db-gradient-om);--rt-breuk:linear-gradient(180deg,var(--db-grijs) 0,var(--db-zwart) 80%)}
.db-rt4--grijs{--sectie-achtergrond:var(--db-gradient-om)}

/* keuzecirkel van de aantalknoppen staat boven de tekst in plaats van eroverheen (5+ op maat) */
.db-rt4__keuzes--n .db-rt4__box::before{position:static;flex:none;margin:0 0 .2rem}
/* compacte prijsbalk onder in beeld op smal scherm: verschijnt zodra er een bedrag staat */
.db-rt4__balk{display:none}
@media (max-width:900px){
  .db-rt4__balk{position:sticky;bottom:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-top:1rem;padding:.6rem .75rem;border:var(--db-rand) solid var(--db-roze);border-radius:var(--db-radius);background:var(--db-puurwit);color:var(--rt-tekst);box-shadow:var(--db-schaduw)}
  .db-rt4:not([data-state="prijs"]):not([data-state="maat"]) .db-rt4__balk{display:none}
  .db-rt4__balktot{display:grid;gap:.15rem;margin:0;min-width:0}
  .db-rt4__balkkop{font:600 .75rem/1.2 var(--db-font-kop);color:var(--rt-zacht)}
  .db-rt4__balktot strong{font:800 1.4rem/1 var(--db-font-kop);letter-spacing:-.015em;font-variant-numeric:tabular-nums;white-space:nowrap}
  .db-rt4__balk .db-rt4__balklink{width:auto;flex:none;min-height:2.75rem;padding:.55rem 1rem}
}
@media (max-width:560px){
  .db-rt4__balk{gap:.5rem;padding-right:4.75rem}  /* ruimte voor de zwevende WhatsApp-knop rechtsonder */
  .db-rt4__balktot strong{font-size:1.25rem}
  .db-rt4__balk .db-rt4__balklink{padding-inline:.75rem}
}
/* past het bedrag niet naast de knop, dan gaat de knop naar een eigen regel; het totaal telt mee met zijn smalste breedte, dus het bedrag komt nooit onder de knop */
@media (max-width:900px){
  .db-rt4__balk{flex-wrap:wrap}
  .db-rt4__balktot{flex:1 1 0;min-width:auto}
}
/* onder 390 px passen "Doorbraken" en "Aanvragen" niet in vier kolommen: twee rijen van twee */
@media (max-width:389px){
  .db-rt4__nav{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* ---- prijs-vanaf: prijs-vanaf-v9 ---- */
/* toon: verloop (eigen achtergrond van deze sectie; varianten --grijs en --licht onderaan) */
/* ---- Vanafprijzen v9 (Draagbalken.nl): werkfotoband met kop op donker vlak; drie witte prijskaarten overlappen de band, elk met
   een groot fotovenster waaruit een uitgesneden stuk van de foto (balk, capuchon, stalen portaal) boven het venster uitsteekt;
   daaronder inclusief, twee diensten op aanvraag en een donker actievlak (op een schuine grijze plaat) met Pascal en de knoppen. Op verzoek van de gebruiker (2026-10-27): actievlak wit, de schuine plaat erachter roze, kopblok links. */
.db-pv9{
  --offerte:#15803D;--offerte-hover:#166534;
  --pv9-wa:#25D366;--pv9-wa-hover:#1EBE5A;             /* WhatsApp in eigen merkkleur */
  --pv9-hoogte:min(31rem,50vw);  /* hoogte van het zichtbare deel van de foto */
  --pv9-strip:0px;              /* geen strook boven de foto meer: gewone bandfoto */
  --pv9-cw:100%;--pv9-cx:0%;--pv9-cut:22;   /* canvas van foto en uitsnede: breedte, links, snijlijn in % van de foto */
  --pv9-donker:rgb(var(--db-zwart-rgb) / .32);
  --pv9-over:4rem;               /* hoever de prijskaarten over de band liggen */
  --pv9-incl:var(--db-zwart);  /* paneel Inclusief: zwart waar het verloop grijs is, grijs waar het donker is */
  --pv9-kaart:color-mix(in srgb,var(--db-grijs) 30%,var(--db-zwart));
  position:relative;padding:0 0 clamp(3rem,5vw,4.5rem);overflow:hidden;
  --sectie-achtergrond:var(--db-gradient);background:var(--sectie-achtergrond);color:var(--db-tekst-op-donker);font-family:var(--db-font-tekst);
}
.db-pv9 :focus-visible{outline:calc(2 * var(--db-rand)) solid var(--db-focus);outline-offset:2px}
.db-pv9__inner{position:relative;margin:0 auto;width:min(75rem,100% - 2rem)}

/* fotoband met kop */
.db-pv9__band{position:relative;height:calc(var(--pv9-strip) + var(--pv9-hoogte))}
.db-pv9__foto{position:absolute;inset:var(--pv9-strip) 0 0 0;container-type:inline-size}
.db-pv9__kader{position:absolute;inset:0;clip-path:polygon(0 0,100% 0,100% calc(100% - 6.99cqi),0 100%)}
.db-pv9__bandbild{position:absolute;left:var(--pv9-cx);width:var(--pv9-cw);height:auto;max-width:none;transform:translateY(calc(var(--pv9-cut) * -1%))}
.db-pv9__bandbild{top:0;display:block}
.db-pv9__kader::after{content:"";position:absolute;inset:0;background:var(--pv9-donker);pointer-events:none}  /* gebruiker 2026-10-27: bovenste achtergrondfoto iets donkerder */
.db-pv9__kopwrap{position:relative;z-index:2;height:100%;display:grid;align-items:start;padding-top:1.75rem}
.db-pv9__kop{position:relative;justify-self:start;width:min(100%,33rem);padding:1.75rem 1.5rem 1.75rem 0}
.db-pv9__kopvlak{position:absolute;inset:0 0 0 calc(50% - 50vw)}
.db-pv9__kopvlak i{display:block;height:100%;background:color-mix(in srgb,var(--db-zwart) 90%,transparent);border-radius:var(--db-radius)}
.db-pv9__kop > :not(.db-pv9__kopvlak){position:relative;z-index:1}
.db-pv9__tag{display:inline-block;margin:0 0 .9rem;padding:.4rem .7rem;border-radius:var(--db-radius);background:var(--db-roze);color:var(--db-zwart);font:700 .76rem/1 var(--db-font-kop);letter-spacing:.14em;text-transform:uppercase}
.db-pv9 h2{margin:0 0 .85rem;font:700 clamp(2rem,1.3rem + 2.4vw,3.1rem)/1.06 var(--db-font-kop);letter-spacing:-.015em;text-wrap:balance}
.db-pv9__lead{margin:0;font-size:1.02rem;line-height:1.62}

/* prijskaarten over de band: groot fotovenster, de uitsnede steekt boven het venster uit */
.db-pv9__kaarten{position:relative;z-index:2;list-style:none;margin:calc(var(--pv9-over) * -1) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem 1.75rem}
.db-pv9__kaart{position:relative;display:grid;align-content:start;gap:.35rem;height:100%;padding:.6rem .6rem 1.5rem;background:var(--db-puurwit);color:var(--db-tekst);border:var(--db-rand) solid var(--db-roze);border-radius:var(--db-radius);box-shadow:var(--db-schaduw);text-decoration:none}
.db-pv9__kaart > :not(.db-pv9__venster){margin-inline:.9rem}
.db-pv9__venster{position:relative;display:block;aspect-ratio:calc(1.2 / (1 - var(--top) / 100));background:var(--db-zwart);border-radius:var(--db-radius)}
.db-pv9__venster::after{content:"";position:absolute;z-index:1;inset:0;border:var(--db-rand) solid var(--db-roze);border-radius:var(--db-radius);pointer-events:none}
.db-pv9__canvas{position:absolute;inset:auto 0 0;height:calc(100% / (1 - var(--top) / 100))}
.db-pv9__bild{position:absolute;top:0;left:0;display:block;width:100%;height:100%;max-width:none;clip-path:inset(calc(var(--top) * 1%) 0 0 0 round var(--db-radius))}
.db-pv9__uit{position:absolute;z-index:2;top:0;left:0;display:block;width:100%;height:auto;max-width:none;pointer-events:none}
.db-pv9__kaart h3{margin:.85rem .9rem 0;font:700 1.2rem/1.2 var(--db-font-kop)}
.db-pv9__prijs{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .7rem;margin-top:.2rem}
.db-pv9__va{padding:.32rem .55rem;border-radius:var(--db-radius);background:var(--db-roze);color:var(--db-puurwit);font:800 .76rem/1 var(--db-font-kop);letter-spacing:.12em;text-transform:uppercase}
.db-pv9__bedrag{font:800 clamp(2.3rem,1.2rem + 3vw,3.3rem)/1.02 var(--db-font-kop);letter-spacing:-.03em}
.db-pv9__voorw{font-size:.96rem;line-height:1.5;color:var(--db-tekst-zacht)}

/* onder: links inclusief en aanvraag, rechts het donkere actievlak met Pascal */
.db-pv9__onder{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:1.5rem 2.25rem;margin-top:5.5rem;align-items:stretch}
.db-pv9__links{display:grid;gap:2rem;align-content:space-between}
.db-pv9__incl{padding:1.4rem 1.5rem 1.5rem;border:var(--db-rand) solid var(--db-roze);border-radius:var(--db-radius);background:var(--pv9-incl)}
.db-pv9__incl-kop{margin:0 0 1rem;font:700 1.4rem/1.2 var(--db-font-kop)}
.db-pv9__incl ul{display:grid;gap:.55rem;margin:0;padding:0;list-style:none}
.db-pv9__incl li{display:flex;align-items:center;gap:.75rem;font-size:1.02rem;line-height:1.3}
.db-pv9__incl svg{flex:none;width:1.5rem;height:1.5rem;padding:.35rem;border-radius:50%;background:var(--db-roze);color:var(--db-puurwit)}
.db-pv9__aanvraag{list-style:none;margin:0;padding:0;display:grid;gap:1.6rem}
.db-pv9__aanvraag a{display:grid;grid-template-columns:9.5rem minmax(0,1fr);gap:1rem;align-items:center;padding:.6rem 1rem .6rem .6rem;border:var(--db-rand) solid var(--db-roze);border-radius:var(--db-radius);background:var(--db-puurwit);color:var(--db-tekst);text-decoration:none}
.db-pv9__aanvraag .db-pv9__venster{margin:0}
.db-pv9__aanvraag span:last-child{display:grid;gap:.2rem;min-width:0;font-size:.92rem;line-height:1.4;color:var(--db-tekst-zacht)}
.db-pv9__aanvraag b{min-width:0;color:var(--db-tekst);font:700 1.05rem/1.25 var(--db-font-kop);overflow-wrap:break-word;hyphens:auto}
.db-pv9__actie{position:relative;display:grid;align-content:center;gap:1.1rem;padding:2.25rem 12.5rem 2.25rem 2.25rem}
.db-pv9__actie::before{content:"";position:absolute;inset:0;border-radius:var(--db-radius);background:var(--db-roze);transform:rotate(-4deg)}
.db-pv9__actie-bg{position:absolute;inset:0;border:var(--db-rand) solid var(--db-roze);border-radius:var(--db-radius);background:var(--db-puurwit)}
.db-pv9__pascal{position:absolute;z-index:2;right:1.25rem;bottom:0;width:auto;height:calc(100% + 4rem);max-width:none;pointer-events:none}
.db-pv9__actie > :not(.db-pv9__actie-bg):not(.db-pv9__pascal){position:relative;z-index:1}
.db-pv9__korting{margin:0;font:800 clamp(1.35rem,1.2rem + 1.2vw,2.2rem)/1.15 var(--db-font-kop);letter-spacing:-.02em;color:var(--db-zwart);overflow-wrap:break-word}
.db-pv9__knoppen{display:grid;gap:.65rem}
.db-pv9__knop{display:flex;align-items:center;justify-content:center;gap:.6rem;min-height:3.1rem;padding:.7rem 1rem;border-radius:var(--db-radius);font:700 1rem/1.2 var(--db-font-kop);text-decoration:none;text-align:center}
.db-pv9__knop svg{flex:none;width:1.3rem;height:1.3rem;fill:currentColor}
.db-pv9__knop--offerte{background:var(--offerte);color:var(--db-puurwit);box-shadow:var(--db-schaduw)}
.db-pv9__knop--offerte:hover{background:var(--offerte-hover)}
.db-pv9__knop--wa svg{fill:var(--db-puurwit)}
.db-pv9__knop--wa{background:var(--pv9-wa);border:1px solid var(--pv9-wa);color:var(--db-zwart)}
.db-pv9__knop--wa:hover{background:var(--pv9-wa-hover);border-color:var(--pv9-wa-hover)}
.db-pv9__knop--bel{border:var(--db-rand) solid var(--db-roze);background:var(--pv9-kaart);color:var(--db-tekst-op-donker)}

@media (max-width:1100px){
  .db-pv9__kaarten{gap:2.25rem 1.1rem}
  .db-pv9__kaart > :not(.db-pv9__venster){margin-inline:.5rem}
  .db-pv9__kaart h3{margin-inline:.5rem;font-size:1.1rem}
  .db-pv9__actie{padding-right:10.5rem}
  .db-pv9__aanvraag a{grid-template-columns:7.5rem minmax(0,1fr)}
}
@media (max-width:1000px){
  .db-pv9__onder{grid-template-columns:minmax(0,1fr);row-gap:6rem}
  .db-pv9__links{align-items:stretch;grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .db-pv9{--pv9-over:0rem}
  .db-pv9__band{height:auto;padding-top:calc(var(--pv9-strip) + 13rem)}
  .db-pv9__foto{bottom:auto;height:13rem}
  .db-pv9__kopwrap{display:block;height:auto;padding:1.5rem 0 0}
  .db-pv9__kop{width:auto;padding:0 0 0 0}
  .db-pv9__kopvlak{display:none!important}
  .db-pv9__kaarten{margin-top:4.5rem;grid-template-columns:minmax(0,1fr);gap:4.5rem}
  .db-pv9__kaart > :not(.db-pv9__venster){margin-inline:.9rem}
  .db-pv9__kaart h3{margin-inline:.9rem;font-size:1.25rem}
}
@media (min-width:561px) and (max-width:900px){
  .db-pv9__kaarten{grid-template-columns:repeat(2,minmax(0,1fr))}
  .db-pv9__kaarten li:last-child{grid-column:1 / -1}
  .db-pv9__kaarten li:last-child .db-pv9__kaart{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:1rem;align-content:center}
  .db-pv9__kaarten li:last-child .db-pv9__venster{grid-column:1;grid-row:1 / span 3}
  .db-pv9__kaarten li:last-child .db-pv9__kaart > :not(.db-pv9__venster){grid-column:2}
}
@media (max-width:700px){
  .db-pv9__links{grid-template-columns:100%}
}
@media (max-width:560px){
  .db-pv9__foto{height:10.5rem}.db-pv9__band{padding-top:calc(var(--pv9-strip) + 10.5rem)}
  .db-pv9__aanvraag a{grid-template-columns:7rem minmax(0,1fr)}
  .db-pv9__actie{padding:1.75rem 1.25rem 2rem;min-height:0}
  .db-pv9__korting{padding-right:6rem;min-height:9rem}
  .db-pv9__pascal{top:-4.5rem;bottom:auto;right:1rem;height:15rem}
  .db-pv9__onder{row-gap:5.5rem;margin-top:5.5rem}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .db-pv9__kaart,.db-pv9__aanvraag a{transition:transform .25s ease}
  .db-pv9__kaart:hover,.db-pv9__aanvraag a:hover{transform:translateY(-4px)}
}

/* ---- Toonvarianten (website-kit RULES 4.26). De paginagenerator zet db-pv9--grijs (#404040) of db-pv9--licht (#F6F6F6) op de wortel.
   Alle tekst staat op kaarten en blokken met eigen vlak, dus alleen de sectiegrond wisselt. */
.db-pv9.db-pv9--grijs,.db-pv9.db-pv9--verloop-om{--sectie-achtergrond:var(--db-gradient-om);--pv9-incl:var(--db-grijs)}
.db-pv9.db-pv9--licht{--sectie-achtergrond:var(--db-wit)}
/* ---- diensten-grid: diensten-grid-v9 ---- */
/* toon: verloop (eigen achtergrond van deze sectie; de paginagenerator leest deze regel voor website-kit RULES 4.26. Een andere toon per pagina komt via config.SECTIE_TOON en een klasse <wortel>--<toon> hieronder.) */


/* ---- Diensten-overzicht, versie 9 (Draagbalken.nl). Herwerking van versie 6 volgens de opmerking van de gebruiker (Sectiekeuze
   2026-10-27): de kleuren en randen van versie 1 terug (lichte band, witte kaarten met dunne roze rand, afgeronde hoeken, roze balk onder),
   compacte kaarten met een ingelegd fotovenster, het uit-de-rand-effect alleen op de foto's waar het werkt (helm, balk, capuchon, hoofd) en niet op
   de portaalfoto en de breekhamer, en "Meer diensten" als kleine knop onder de kaarten. Het contactblok is vervallen.
   Merkwaarden: ../_shared/tokens.css. */
.db-dg9{
  --pop:3.3rem;                    /* ruimte boven een kaart voor de uitsnede */
  --ar:1.9;
  --dg9-breuk:linear-gradient(180deg,var(--db-zwart) 0,var(--db-grijs) 80%);  /* schuine band (gebruiker 2026-10-28) */
  position:relative;overflow:clip;padding:clamp(3rem,5.5vw,4.5rem) 0 clamp(3rem,5vw,4.25rem);
  --sectie-achtergrond:var(--db-gradient);
  background:var(--sectie-achtergrond);color:var(--db-tekst-op-donker);font-family:var(--db-font-tekst);
}
.db-dg9__kop{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,27rem);gap:1.25rem 3rem;align-items:end;margin-bottom:calc(var(--pop) + .75rem)}
.db-dg9__lead{margin:0;color:var(--db-tekst-op-donker);font-size:1.1rem;line-height:1.6}
.db-dg9__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--pop) + 1.25rem) 1.25rem}  /* rijafstand +.75rem (2026-10-29): de hoge werkersuitsneden (latei, trapgat, schouw) raakten de onderrand van de kaart erboven */
.db-dg9__kaart{display:flex;flex-direction:column;padding:.7rem .7rem 0;background:var(--db-puurwit);color:var(--db-tekst)}
.db-dg9__tekst{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.4rem .75rem;flex:1;align-content:start;padding:.85rem .3rem 1.1rem}
.db-dg9__tekst h3{grid-column:1}
.db-dg9__tekst h3 a{color:var(--db-tekst)}
.db-dg9__tekst p{grid-column:1 / -1;color:var(--db-tekst-zacht)}
.db-dg9__pijl{grid-column:2;grid-row:1;background:var(--db-vlak);color:var(--db-zwart)}
.db-dg9__onder{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;margin-top:clamp(1.75rem,3.5vw,2.5rem)}
.db-dg9__noot{max-width:46rem;color:var(--db-tekst-op-donker)}
.db-dg9__meer{background:var(--db-puurwit);color:var(--db-zwart);box-shadow:var(--db-schaduw)}

.db-dg9 :focus-visible{outline:calc(2 * var(--db-rand)) solid var(--db-focus);outline-offset:3px}
.db-dg9::before{content:"";position:absolute;z-index:0;left:-6%;right:-6%;top:30%;bottom:-6%;background:var(--dg9-breuk);transform:skewY(calc(var(--db-helling) * -1));transform-origin:100% 100%;pointer-events:none}
.db-dg9__inner{position:relative;z-index:1;width:min(100% - 2rem,75rem);margin:0 auto}
.db-dg9__tag{display:inline-block;margin:0 0 1rem;padding:.4rem .7rem;border-radius:var(--db-radius);background:var(--db-roze);color:var(--db-actie-tekst);
  font:600 .8rem/1 var(--db-font-kop);letter-spacing:.1em;text-transform:uppercase}
.db-dg9 h2{margin:0;max-width:18ch;font:700 clamp(2rem,1.3rem + 2.2vw,3rem)/1.08 var(--db-font-kop);letter-spacing:-.02em;text-wrap:balance}
.db-dg9__grid{list-style:none;margin:0;padding:0}
.db-dg9__kaart{position:relative;min-width:0;border:var(--db-rand) solid var(--db-roze);border-radius:var(--db-radius);box-shadow:var(--db-schaduw),inset 0 calc(var(--db-balk) * -1) 0 var(--db-roze)}
.db-dg9__tekst h3{margin:0;font:700 1.12rem/1.2 var(--db-font-kop);letter-spacing:-.01em}
.db-dg9__tekst h3 a{display:flex;align-items:center;min-height:2.75rem;text-decoration:none}
.db-dg9__tekst h3 a::after{content:"";position:absolute;left:0;right:0;bottom:0;top:calc(var(--pop) * -1)}
.db-dg9__tekst h3 a:focus-visible{outline:none}
.db-dg9__kaart:has(h3 a:focus-visible){outline:calc(2 * var(--db-rand)) solid var(--db-focus);outline-offset:3px}
.db-dg9__tekst p{margin:0;font-size:.94rem;line-height:1.5}
.db-dg9__pijl{display:grid;place-items:center;width:2.25rem;height:2.25rem;border:var(--db-rand) solid var(--db-roze);border-radius:50%}
.db-dg9__pijl svg{width:1rem;height:1rem;fill:currentColor}
.db-dg9__chip{position:absolute;z-index:5;left:.5rem;bottom:.5rem;padding:.35rem .6rem;border-radius:var(--db-radius);background:var(--db-roze);color:var(--db-actie-tekst);font:700 .85rem/1 var(--db-font-kop);white-space:nowrap}
.db-dg9__meer{display:inline-flex;align-items:center;gap:.6rem;min-height:3rem;padding:.55rem 1.3rem;border:var(--db-rand) solid var(--db-roze);border-radius:var(--db-radius);text-decoration:none;font:600 .95rem/1.2 var(--db-font-kop)}
.db-dg9--alles .db-dg9__meer{display:none}  /* de diensten-pagina toont alle tegels al */
.db-dg9__meer:is(:hover,:focus-visible){background:var(--db-vlak)}
.db-dg9__meer svg{flex:none;width:1rem;height:1rem;fill:currentColor}
.db-dg9__noot{margin:0;font-size:.88rem;line-height:1.5;text-wrap:balance}

.db-dg9__venster{position:relative;aspect-ratio:var(--ar)}
.db-dg9__rahmen{position:absolute;inset:0;overflow:hidden;border-radius:var(--db-radius);background:var(--db-zwart)}
.db-dg9__rahmen::after{content:"";position:absolute;z-index:1;inset:0;border:var(--db-rand) solid var(--db-roze);border-radius:var(--db-radius);pointer-events:none}
.db-dg9__vlak{display:block;width:100%;height:100%;object-fit:cover}
.db-dg9__canvas{position:absolute;top:0;left:0;width:calc(var(--z,1) * 100%);aspect-ratio:1.2;translate:calc(var(--px,0) * -100%) calc(var(--py,0) * -100%)}
.db-dg9__canvas img{position:absolute;top:0;left:0;display:block;width:100%}
.db-dg9__foto{height:100%}
.db-dg9__uit{position:absolute;z-index:2;inset:0;pointer-events:none;clip-path:inset(-30rem 0 0 0)}
.db-dg9__uit img{height:auto}

@media (max-width:900px){
  .db-dg9{--pop:4rem}
  .db-dg9__kop{grid-template-columns:minmax(0,1fr)}
  .db-dg9__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .db-dg9{--pop:3.1rem}
  .db-dg9__grid{grid-template-columns:minmax(0,1fr)}
  .db-dg9:not(.db-dg9--alles) .db-dg9__kaart:nth-child(n+4){display:none}  /* mobiel: drie kaarten, tenzij db-dg9--alles (/diensten/) */
  .db-dg9__onder{flex-direction:column-reverse;align-items:stretch}
  .db-dg9__meer{justify-content:center}
}
/* hover:start (alleen transform; gespiegeld op focus-visible) */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .db-dg9__kaart{transition:transform .26s ease}
  .db-dg9__kaart:is(:hover,:focus-within){transform:translateY(-4px)}
  .db-dg9__pijl svg{transition:transform .24s ease}
  .db-dg9__kaart:is(:hover,:focus-within) .db-dg9__pijl svg{transform:translateX(3px)}
  .db-dg9__meer{transition:transform .26s ease}
  .db-dg9__meer:is(:hover,:focus-visible){transform:translateY(-2px)}
}
/* hover:end */

/* ---- Toon verloop is de standaard (BRIEF 2026-10-28). De witte kaarten houden hun vlak; kop, inleiding en noot zijn licht.
   --verloop-om: grijs boven, donker onder. --licht blijft staan voor de record (niet meer gebruikt op pagina's). */
.db-dg9.db-dg9--verloop{--sectie-achtergrond:var(--db-gradient)}
.db-dg9.db-dg9--verloop-om{--sectie-achtergrond:var(--db-gradient-om);--dg9-breuk:linear-gradient(180deg,var(--db-grijs) 0,var(--db-zwart) 80%)}
.db-dg9.db-dg9--licht{--sectie-achtergrond:var(--db-vlak);color:var(--db-tekst)}
.db-dg9.db-dg9--licht .db-dg9__lead,.db-dg9.db-dg9--licht .db-dg9__noot{color:var(--db-tekst-zacht)}
/* ---- offerte-formulier: offerte-formulier-v2 ---- */
/* toon: verloop (eigen achtergrond van deze sectie; de paginagenerator leest deze regel voor website-kit RULES 4.26. Een andere toon per pagina komt via config.SECTIE_TOON en een klasse <wortel>--<toon> hieronder.) */

/* ---- Offerteformulier versie 2 (Draagbalken.nl), opbouw van quote-block-form (section-library).
   Een witte kaart op het lichte vlak. Links steekt een portretfoto boven de kaart uit en zakt achter een donker paneel
   met een schuine bovenrand (een helling voor de hele site); in het paneel kop, lead, bellen en WhatsApp. Rechts het
   hele formulier in twee delen. Merkwaarden uit ../_shared/tokens.css (--db-*). */
.db-of2,.db-of2__form{  /* ook op het formulier zelf: het staat los in contact-gegevens-v5 (sectie_blok.py) */
  --ob-kaart:var(--db-puurwit);
  --ob-tekst:var(--db-tekst);                    /* donkere tekst in witte velden en bordjes */
  --ob-zacht:var(--db-tekst-zacht);
  --ob-veldrand:color-mix(in srgb,var(--db-zwart) 25%,var(--db-puurwit));  /* lichtgrijze rand van de velden */
  --ob-rij:color-mix(in srgb,var(--db-zwart) 14%,transparent);
  --offerte:#15803D;--offerte-hover:#166534;
}
.db-of2{
  --ob-grond:var(--db-gradient);
  --ob-vlak:var(--db-puurwit);                   /* effen witte formulierkaart op het verloop (gebruiker 2026-10-28) */
  --ob-lijn:color-mix(in srgb,var(--db-zwart) 50%,transparent);
  --ob-op-donker:var(--db-wit);
  --ob-wa:#25D366;--ob-wa-hover:#1EBE5A;
  --ob-gap:1rem;                                /* afstand tussen de roze kaartrand en de fotokant, overal gelijk (gebruiker 2026-10-28) */
  --ob-m:calc(var(--ob-gap) + var(--db-rand));  /* foto-inspringing links en rechts: de kaartrand telt mee, zo is de witte strook links gelijk aan de gap */
  --ob-rise:3.5rem;--ob-pop:5rem;               /* hoeveel de foto boven de kaart uitsteekt */
  --ob-hals:.33;                                /* waar het kader de foto afsnijdt, als deel van de fotohoogte van boven: rond haar hals (gebruiker 2026-10-27, ronde 2); erboven steken hoofd en haar uit */
  --ob-breuk:linear-gradient(180deg,var(--db-zwart) 0,var(--db-grijs) 80%);  /* schuine band erachter (gebruiker 2026-10-28) */
  position:relative;isolation:isolate;overflow:clip;background:var(--ob-grond);color:var(--ob-op-donker);font-family:var(--db-font-tekst);
  padding:calc(clamp(2.75rem,5vw,4.5rem) + var(--ob-rise)) 0 clamp(3rem,5.5vw,5rem);
}
.db-of2::before{content:"";position:absolute;z-index:-1;left:-6%;right:-6%;top:30%;bottom:-6%;background:var(--ob-breuk);transform:skewY(calc(var(--db-helling) * -1));transform-origin:100% 100%;pointer-events:none}
.db-of2 :focus-visible{outline:calc(2 * var(--db-rand)) solid var(--db-focus);outline-offset:3px}
.db-of2__inner{width:min(100% - 2rem,75rem);margin:0 auto}
.db-of2__kaart{--ob-cx:calc(var(--db-rand) + (100% - 2 * var(--db-rand)) * 5 / 12 - var(--ob-m));  /* x van de rechterrand van de foto, vanaf de kaartrand */
  --ob-cy:calc(var(--db-rand) - var(--ob-rise) + var(--ob-hals) * (100% - 2 * var(--db-rand) - 22.5rem + 4.5rem + var(--ob-rise) + var(--ob-pop)) - var(--ob-pop));  /* y van de bovenrand van het zwarte fotovlak: zelfde som als .db-of2__foto::before (kaarthoogte min paneelhoogte = fotohoogte) */
  --ob-t:.55rem;--ob-s:.35;--ob-ts:calc(var(--ob-t) * var(--ob-s));  /* t: lengte van de afronding langs beide randen van een hoekpunt (gebruiker 2026-10-28: scherpe punten zachter); s: helling van de schuine kant (tan, per breedte ingesteld) */
  --ob-hap:polygon(
    calc(var(--ob-cx) - var(--ob-t)) var(--ob-ts),calc(var(--ob-cx) - .5 * var(--ob-t)) calc(.5625 * var(--ob-ts)),var(--ob-cx) calc(.25 * var(--ob-ts)),calc(var(--ob-cx) + .5 * var(--ob-t)) calc(.0625 * var(--ob-ts)),calc(var(--ob-cx) + var(--ob-t)) 0,
    100% 0,100% 100%,0 100%,
    0 calc(var(--ob-cy) + var(--ob-t)),calc(.0625 * var(--ob-t)) calc(var(--ob-cy) + .5625 * var(--ob-t) - .0625 * var(--ob-ts)),calc(.25 * var(--ob-t)) calc(var(--ob-cy) + .25 * var(--ob-t) - .25 * var(--ob-ts)),calc(.5625 * var(--ob-t)) calc(var(--ob-cy) + .0625 * var(--ob-t) - .5625 * var(--ob-ts)),var(--ob-t) calc(var(--ob-cy) - var(--ob-ts)));  /* kwartboog van 3 tussenpunten op beide hoekpunten van de schuine kant (zoals --f4-vorm in faq-v4) */
  position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);color:var(--ob-tekst)}
/* gebruiker 2026-10-28: een driehoek van de linkerbovenhoek van de witte kaart afgesneden, van de bovenrand van het fotovlak (linkerrand) naar de rechterrand van de foto (bovenrand). De clip zit op twee lagen achter de inhoud (roze rand + wit vlak), zodat de foto en haar hoofd boven de kaart uit blijven steken; de overige drie hoeken ronden via border-radius, de roze rand volgt de schuine kant. */
.db-of2__kaart::before,.db-of2__kaart::after{content:"";position:absolute;z-index:-1;border-radius:var(--db-radius);clip-path:var(--ob-hap)}
.db-of2__kaart::before{inset:0;background:var(--db-roze)}
.db-of2__kaart::after{inset:var(--db-rand);background:var(--ob-vlak);border-radius:calc(var(--db-radius) - var(--db-rand))}

/* ---- linkerkant: foto boven het schuine paneel */
.db-of2__zij{position:relative;display:flex;flex-direction:column;min-width:0;container-type:inline-size}
.db-of2__toneel{position:relative;flex:1 0 auto;min-height:21rem}
.db-of2__foto{--ob-fs:.35;  /* fs: helling van de schuine kant voor de afronding (zoals --ob-s, per breedte) */
  --ob-fd:calc((var(--ob-gap) + var(--db-rand)) * sqrt(1 + var(--ob-fs) * var(--ob-fs)));  /* verticale verschuiving van de fotokant onder de roze kaartrand: gap loodrecht, dus gap / cos(hoek) = gap * sqrt(1 + helling^2) */
  --ob-fl:calc(var(--ob-hals) * 100% + var(--ob-fd) - var(--ob-m) * var(--ob-fs));  /* y van de linkerbovenhoek van de foto, in het fotovlak */
  --ob-fr:calc(var(--ob-pop) + var(--ob-rise) + var(--ob-fd));  /* y van de rechterbovenhoek: de diagonaal raakt de kaartbovenrand op de rechterrand van de foto */
  --ob-fv:polygon(  /* gebruiker 2026-10-28: de fotokant volgt de schuine kant van de witte kaart; de lijn loopt door dezelfde twee punten (kaartrand links en kaartbovenrand) en is dus een met de roze kaartrand */
    0 100%,0 calc(var(--ob-fl) + var(--db-radius)),calc(.0625 * var(--db-radius)) calc(var(--ob-fl) + .5625 * var(--db-radius) - .0625 * var(--db-radius) * var(--ob-fs)),calc(.25 * var(--db-radius)) calc(var(--ob-fl) + .25 * var(--db-radius) - .25 * var(--db-radius) * var(--ob-fs)),calc(.5625 * var(--db-radius)) calc(var(--ob-fl) + .0625 * var(--db-radius) - .5625 * var(--db-radius) * var(--ob-fs)),var(--db-radius) calc(var(--ob-fl) - var(--db-radius) * var(--ob-fs)),
    calc(100% - var(--db-radius)) calc(var(--ob-fr) + var(--db-radius) * var(--ob-fs)),calc(100% - .5625 * var(--db-radius)) calc(var(--ob-fr) + .5625 * var(--db-radius) * var(--ob-fs) + .0625 * var(--db-radius)),calc(100% - .25 * var(--db-radius)) calc(var(--ob-fr) + .25 * var(--db-radius) * var(--ob-fs) + .25 * var(--db-radius)),calc(100% - .0625 * var(--db-radius)) calc(var(--ob-fr) + .0625 * var(--db-radius) * var(--ob-fs) + .5625 * var(--db-radius)),100% calc(var(--ob-fr) + var(--db-radius)),
    100% 100%);
  position:absolute;z-index:1;margin:0;top:calc(var(--ob-rise) * -1);left:var(--ob-m);right:var(--ob-m);bottom:0}
.db-of2__foto::before{content:"";position:absolute;inset:calc(var(--ob-pop) * -1) 0 0 0;background:var(--db-zwart);clip-path:var(--ob-fv)}  /* zelfde doos en vorm als .db-of2__vlak */
.db-of2__vlak,.db-of2__uit{position:absolute;left:0;right:0;top:calc(var(--ob-pop) * -1);bottom:0;pointer-events:none}
.db-of2__vlak{clip-path:var(--ob-fv)}
.db-of2__uit{clip-path:inset(0 0 0 0)}  /* uit-de-rand: dezelfde uitsnede ligt exact over de foto en steekt met hoofd en haar boven het kader uit */
.db-of2__ph,.db-of2__uit img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 0}
.db-of2__paneel{position:relative;z-index:2;margin-top:-4.5rem;padding:calc(4.5rem + 1.5rem) clamp(1.5rem,3vw,2.5rem) 2.25rem;color:var(--ob-op-donker)}
.db-of2__paneel::before{content:"";position:absolute;z-index:-1;inset:0;background:var(--db-zwart);  /* effen: gebruiker 2026-10-27: merkstijl, geen grijs verloop op blokken, alleen op de sectie-achtergrond */
border-radius:var(--db-radius);box-shadow:inset 0 calc(var(--db-balk) * -1) 0 var(--db-roze)}
.db-of2__tag{display:inline-block;margin:0 0 .9rem;padding:.4rem .7rem;border-radius:var(--db-radius);background:var(--db-roze);color:var(--db-puurwit);font:600 .8rem/1 var(--db-font-kop);letter-spacing:.1em;text-transform:uppercase}
.db-of2 h2{margin:0;color:var(--ob-op-donker);font:700 clamp(2rem,1.3rem + 2vw,2.8rem)/1.08 var(--db-font-kop);letter-spacing:-.02em}
.db-of2__lead{margin:.8rem 0 0;font-size:1.08rem;line-height:1.55}
.db-of2__direct-kop{margin:1.4rem 0 .6rem;font:600 .95rem/1.3 var(--db-font-kop)}
.db-of2__direct{display:flex;flex-wrap:wrap;gap:.6rem}
.db-of2__bel,.db-of2__app{display:inline-flex;align-items:center;gap:.6rem;min-height:3rem;padding:.7rem 1.1rem;border-radius:var(--db-radius);font:600 .98rem/1.2 var(--db-font-kop);text-decoration:none}
.db-of2__bel{background:var(--ob-kaart);color:var(--ob-tekst)}
.db-of2__app{background:var(--ob-wa);color:var(--db-puurwit)}  /* WhatsApp-stijl (gebruiker 2026-10-27) */
.db-of2__app:is(:hover,:focus-visible){background:var(--ob-wa-hover)}
.db-of2__bel svg,.db-of2__app svg{flex:none;width:1.2rem;height:1.2rem;fill:currentColor}

/* ---- het formulier */
.db-of2__form{scroll-margin-top:6rem;min-width:0;margin:0;padding:clamp(1.5rem,3vw,2.5rem) clamp(1.25rem,3vw,2.5rem) clamp(1.5rem,3vw,2.25rem);display:flex;flex-direction:column;gap:1.6rem}
.db-of2__deel{min-width:0;margin:0;padding:0;border:0}
.db-of2__deel > legend{float:left;width:100%;display:flex;align-items:center;gap:.7rem;margin:0 0 1rem;padding:0;font:700 1.2rem/1.2 var(--db-font-kop);letter-spacing:-.01em}
.db-of2__deel > legend b{display:grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:var(--db-radius);background:var(--db-roze);color:var(--db-puurwit);font:700 .95rem/1 var(--db-font-kop)}
.db-of2__deel + .db-of2__deel{padding-top:1.5rem;border-top:1px solid var(--ob-rij)}
.db-of2__rij{clear:both;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.db-of2__veld{display:flex;flex-direction:column;gap:.4rem;margin:0;min-width:0}
.db-of2__veld > :is(input,select){margin-top:auto}  /* gebruiker 2026-10-28: velden naast elkaar op een lijn, ook als het ene label op twee regels staat */
.db-of2__veld label{font:600 .92rem/1.3 var(--db-font-kop)}
.db-of2__ster{color:var(--ob-zacht)}
.db-of2__veld :is(input,select,textarea){width:100%;min-height:3rem;padding:.65rem .85rem;border:var(--db-rand) solid var(--ob-veldrand);border-radius:var(--db-radius);background:var(--ob-kaart);color:var(--ob-tekst);font:400 1rem/1.3 var(--db-font-tekst)}
.db-of2 :is(input,select,textarea){caret-color:var(--db-zwart);color:var(--db-tekst)}  /* gebruiker 2026-10-28: zwarte cursor en donkere typtekst op de witte velden */
.db-of2__veld small{color:var(--ob-zacht);font-size:.84rem;line-height:1.35}
.db-of2__veld textarea{display:block;resize:vertical}
.db-of2__breed{grid-column:1/-1}
.db-of2__melding,.db-of2__klaar{margin:0;padding:.85rem 1rem;border-radius:var(--db-radius);background:color-mix(in srgb,var(--db-roze) 10%,var(--db-puurwit));box-shadow:inset .25rem 0 0 var(--db-roze);color:var(--ob-tekst);line-height:1.5}
.db-of2__melding:empty{display:none}
.db-of2__melding a,.db-of2__klaar a{color:inherit;font-weight:600}
.db-of2__klaar{outline:0}
.db-of2__klaar strong{display:block;margin-bottom:.3rem;font:700 1.2rem/1.3 var(--db-font-kop)}
.db-of2__form:has(.db-of2__klaar){justify-content:center}
.db-of2__einde{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 1.5rem;margin-top:auto;padding-top:1.4rem;box-shadow:0 -1px 0 var(--ob-rij)}
.db-of2__privacy{flex:1 1 16rem;margin:0;color:var(--ob-zacht);font-size:.88rem;line-height:1.5}
.db-of2__verstuur{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:3.25rem;padding:.85rem 1.7rem;border:0;border-radius:var(--db-radius);background:var(--offerte);color:var(--db-puurwit);font:600 1.05rem/1.2 var(--db-font-kop);box-shadow:var(--db-schaduw);cursor:pointer}  /* offerte groen (gebruiker 2026-10-27) */
.db-of2__verstuur:is(:hover,:focus-visible){background:var(--offerte-hover)}
.db-of2__verstuur svg{flex:none;width:1.15rem;height:1.15rem;fill:currentColor}

/* ---- 900: een kolom; foto, paneel, dan het formulier */
@media (max-width:900px){
  .db-of2__kaart{--ob-s:.03;grid-template-columns:minmax(0,1fr);--ob-cx:calc(100% - var(--db-rand) - var(--ob-m));--ob-cy:calc(var(--db-rand) - var(--ob-rise) + var(--ob-hals) * (24rem + var(--ob-rise) + var(--ob-pop)) - var(--ob-pop))}
  .db-of2__toneel{min-height:24rem}
  .db-of2__foto{--ob-fs:.05}
  .db-of2__form{padding-top:1.75rem}
}
@media (max-width:640px){
  .db-of2{--ob-rise:2.75rem;--ob-gap:.75rem}
  .db-of2__toneel{min-height:26rem}
  .db-of2__kaart{--ob-cx:calc(100% - var(--db-rand) - var(--ob-m));--ob-cy:calc(var(--db-rand) - var(--ob-rise) + var(--ob-hals) * (26rem + var(--ob-rise) + var(--ob-pop)) - var(--ob-pop))}
  .db-of2__foto{--ob-fs:.12}
  .db-of2__rij{grid-template-columns:minmax(0,1fr)}
  .db-of2__direct{flex-direction:column}
  .db-of2__bel,.db-of2__app{justify-content:center}
  .db-of2__einde{flex-direction:column;align-items:stretch}
  .db-of2__privacy{flex:0 0 auto}
  .db-of2__verstuur{width:100%}
}

/* hover:start (alleen transform; gespiegeld op focus-visible, RULES 5.3) */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .db-of2__bel,.db-of2__app,.db-of2__verstuur{transition:transform .25s ease}
  .db-of2__bel:is(:hover,:focus-visible),.db-of2__app:is(:hover,:focus-visible),.db-of2__verstuur:is(:hover,:focus-visible){transform:translateY(-2px)}
}
/* hover:end */

/* ---- Toonvarianten (website-kit RULES 4.26). Standaard verloop (zwart boven, grijs onder); --verloop-om en --grijs: grijs boven, zwart onder. */
.db-of2.db-of2--grijs,.db-of2.db-of2--verloop-om{--ob-grond:var(--db-gradient-om);--ob-breuk:linear-gradient(180deg,var(--db-grijs) 0,var(--db-zwart) 80%)}
/* ---- faq: faq-v9 ---- */
/* toon: verloop (eigen achtergrond van deze sectie; de paginagenerator leest deze regel voor website-kit RULES 4.26. Een andere toon per pagina komt via config.SECTIE_TOON en een klasse <wortel>--<toon> hieronder.) */

/* ---- Veelgestelde vragen, versie 9 (Draagbalken.nl): zelfde sectie als versie 9 (donker, paneel met uitsnede, contactplaat),
   alleen het witte vragenblok is anders: gestapelde witte rijen zonder rand met een dunne roze balk links op elke rij (dikker bij de open rij); het open antwoord ligt op een lichtgrijze inzetplaat.
   Zelfde vragen, zelfde accordeon (een open tegelijk). Merkwaarden uit ../_shared/tokens.css. */
.db-faq9{
  --f9-lijn:rgb(246 246 246 / .28);
  --f9-op:clamp(3.5rem,6vw,5.5rem);
  --f9-zij:clamp(.8rem,2.2vw,1.8rem);
  --f9-vlak:rgb(246 246 246 / .07);
  --offerte:#15803D;--offerte-hover:#166534;
  position:relative;overflow:clip;
  padding:clamp(3.5rem,6vw,5.5rem) 0;
  background:var(--db-gradient);color:var(--db-tekst-op-donker);font-family:var(--db-font-tekst);
}
.db-faq9 :focus-visible{outline:calc(2 * var(--db-rand)) solid var(--db-focus);outline-offset:3px}
.db-faq9__inner{width:min(100% - 2rem,75rem);margin:0 auto;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(2rem,5vw,5rem);align-items:stretch}

/* links: paneel, foto, plaat */
.db-faq9__podium{position:relative;container-type:inline-size;min-width:0;display:flex;flex-direction:column;padding:0 var(--f9-zij);align-self:start}
.db-faq9__paneel{--f9-vorm:polygon(0 calc(var(--f9-val) + var(--db-radius)),calc(var(--db-radius) * .134) calc(var(--f9-val) + var(--db-radius) * .5),calc(var(--db-radius) * .5) calc(var(--f9-val) + var(--db-radius) * .134),var(--db-radius) calc(var(--f9-val) - var(--db-radius) * .07),100% 0,100% 100%,0 100%);--f9-val:calc((100cqi + 2 * var(--f9-zij)) * tan(var(--db-helling)));position:absolute;inset:calc(var(--f9-op) - var(--f9-val)) 0 0 0;background:var(--db-roze);border-radius:var(--db-radius);overflow:hidden;
  clip-path:var(--f9-vorm)}  /* schuine bovenrand via clip-path, onderrand vlak: valt samen met de onderrand van de plaat (gebruiker 2026-10-28); de boog linksboven staat als punten in de polygon, de overige hoeken ronden via border-radius */
/* dunne roze rand om het schuine paneel: het roze vlak is de rand, de foto (staalprofielen in de werkplaats, gebruiker 2026-10-27: geen wit vlak maar een beeld) ligt 1px erbinnen */
.db-faq9__paneel img{position:absolute;inset:1px;width:calc(100% - 2px);height:calc(100% - 2px);max-width:none;object-fit:cover;object-position:50% 40%;border-radius:calc(var(--db-radius) - 1px);clip-path:var(--f9-vorm)}  /* foto volgt de schuine rand: de roze rand blijft overal 1px */
.db-faq9__paneel::after{content:"";position:absolute;inset:1px;background:color-mix(in srgb,var(--db-wit) 38%,transparent);border-radius:calc(var(--db-radius) - 1px);box-shadow:inset 0 calc(var(--db-balk) - 1px) 0 var(--db-roze)}
.db-faq9__foto{position:relative;margin:0;flex:none;min-height:0;height:clamp(22rem,32vw,30rem)}
.db-faq9__foto img{position:absolute;left:50%;top:0;height:100%;width:auto;max-width:100%;object-fit:contain;object-position:center bottom;transform:translateX(-50%)}
.db-faq9__plaat{position:relative;z-index:1;flex:none;margin:-3.5rem 0 0;padding:1.4rem 1.4rem 1.5rem;border:var(--db-rand) solid var(--db-roze);border-radius:var(--db-radius);background:var(--db-puurwit);color:var(--db-tekst);box-shadow:var(--db-schaduw)}
.db-faq9__naam{margin:0;font-size:.92rem;line-height:1.4;color:var(--db-tekst-zacht)}
.db-faq9__naam strong{display:block;color:var(--db-tekst);font:700 1.15rem/1.3 var(--db-font-kop)}
.db-faq9__zin{margin:.8rem 0 0;font-size:.98rem;line-height:1.6}
.db-faq9__zin a{font-weight:700;text-decoration:none}
.db-faq9__plaat .db-faq9__acties{margin-top:1.1rem;flex-direction:column;align-items:stretch}

/* rechts: kop en lijst */
.db-faq9__tekst{min-width:0;align-self:center}
.db-faq9__tag{display:inline-block;margin:0 0 1.1rem;padding:.38rem .66rem;border-radius:var(--db-radius);
  background:var(--db-roze);color:var(--db-actie-tekst);font:600 .8rem/1 var(--db-font-kop);letter-spacing:.12em;text-transform:uppercase}
.db-faq9 h2{margin:0;font:700 clamp(2rem,1.3rem + 2.2vw,3rem)/1.08 var(--db-font-kop);letter-spacing:-.02em;color:var(--db-wit)}
.db-faq9__lead{margin:1rem 0 0;max-width:34rem;font-size:1.06rem;line-height:1.6;color:var(--db-wit)}
  list-style:none;cursor:pointer;font:600 1.2rem/1.35 var(--db-font-kop);text-wrap:pretty}
  background:linear-gradient(var(--db-puurwit),var(--db-puurwit)) center/12px 2px no-repeat,
    linear-gradient(var(--db-puurwit),var(--db-puurwit)) center/2px 12px no-repeat,var(--db-zwart)}
.db-faq9__antwoord > *{margin:0;max-width:60ch;font-size:1.02rem;line-height:1.65;color:var(--db-tekst)}
.db-faq9__antwoord > * + *{margin-top:.9rem}
.db-faq9__antwoord strong{font-weight:700}
.db-faq9__let{font:600 1.12rem/1.45 var(--db-font-kop)}
.db-faq9__feit{display:grid;gap:.2rem;padding:.8rem 1rem;border:var(--db-rand) solid var(--db-roze);background:var(--f9-vlak)}
.db-faq9__feit strong{font:700 1.7rem/1.1 var(--db-font-kop);color:var(--db-tekst)}
.db-faq9__feit span{font-size:.92rem;line-height:1.45}
.db-faq9__punten{list-style:none;padding:0;display:grid;gap:.55rem}
.db-faq9__punten li{position:relative;padding:.1rem 0 .1rem 1.5rem}
.db-faq9__punten li::before{content:"";position:absolute;left:.1rem;top:.62em;width:.55rem;height:.55rem;background:var(--db-roze)}
.db-faq9__noot{padding:.7rem 1rem;border-left:var(--db-balk) solid var(--db-roze);background:var(--f9-vlak)}

.db-faq9__acties{display:flex;flex-wrap:wrap;gap:.7rem}
.db-faq9__btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:3rem;padding:.78rem 1.15rem;border-radius:var(--db-radius);
  font:700 1rem/1.2 var(--db-font-kop);text-decoration:none;white-space:nowrap}
.db-faq9__btn svg{width:1.15rem;height:1.15rem;flex:none}
.db-faq9__btn--prim{background:var(--offerte);color:var(--db-puurwit);box-shadow:var(--db-schaduw)}
.db-faq9__btn--prim:is(:hover,:focus-visible){background:var(--offerte-hover)}
.db-faq9__btn--prim svg{fill:currentColor}
.db-faq9{--faq9-wa:#25D366;--faq9-wa-hover:#1EBE5A}
.db-faq9__btn--wa{background:var(--faq9-wa);color:var(--db-puurwit)}  /* WhatsApp-stijl (gebruiker 2026-10-27) */
.db-faq9__btn--wa:is(:hover,:focus-visible){background:var(--faq9-wa-hover)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .db-faq9__btn{transition:transform .25s ease}
  .db-faq9__btn:is(:hover,:focus-visible){transform:translateY(-2px)}
}

/* de contactplaat staat op het lichte paneel: knoppen als in de lichte secties */
@media (max-width: 900px){
  .db-faq9__inner{grid-template-columns:minmax(0,1fr);gap:2.5rem}
  .db-faq9__podium{order:2;width:100%;max-width:36rem;margin:0 auto}
  .db-faq9__tekst{order:1}
  .db-faq9__foto{flex:none;height:clamp(22rem,70vw,30rem)}
  .db-faq9__plaat .db-faq9__acties{flex-direction:row;align-items:center}
}
@media (max-width: 560px){
  .db-faq9__feit strong{font-size:1.45rem}
  .db-faq9__btn{white-space:normal}
}

/* ---- Contactregel (audit 2026-10-28): drie echte knoppen in plaats van drie links in een zin: wit vlak, roze rand, pictogram,
   minstens 44 px hoog, onder elkaar over de volle breedte; het nummer breekt nooit af. WhatsApp in WhatsApp-groen met wit pictogram. */
.db-faq9__contact{display:flex;flex-direction:column;align-items:stretch;gap:.6rem;margin-top:.8rem}
.db-faq9__cbtn{display:flex;align-items:center;justify-content:center;gap:.6rem;min-height:2.75rem;padding:.6rem 1rem;border:var(--db-rand) solid var(--db-roze);border-radius:var(--db-radius);
  background:var(--db-puurwit);color:var(--db-zwart);font:700 1rem/1.2 var(--db-font-kop);text-decoration:none;cursor:pointer;white-space:nowrap}
.db-faq9__cbtn svg{width:1.25rem;height:1.25rem;flex:none}
.db-faq9__cbtn span{min-width:0}
.db-faq9__cbtn:hover{background:var(--db-vlak)}
.db-faq9__cbtn:active{background:var(--db-roze);color:var(--db-actie-tekst)}
.db-faq9__cbtn--wa{background:var(--faq9-wa);border-color:var(--faq9-wa);color:var(--db-puurwit)}
.db-faq9__cbtn--wa:is(:hover,:active){background:var(--faq9-wa-hover);border-color:var(--faq9-wa-hover);color:var(--db-puurwit)}
/* ---- Lichte toon (PAGINA-VULLING: faq licht*). De paginagenerator zet db-faq9--licht op de wortel: vlak #F6F6F6, donkere tekst en lijnen,
   nummers donker (roze nooit als tekst op licht), open-knop en plusknop donker. Foto-paneel, plaat en knoppen blijven zoals ze zijn. */
.db-faq9.db-faq9--licht{--f9-lijn:color-mix(in srgb,var(--db-zwart) 22%,transparent);--f9-vlak:color-mix(in srgb,var(--db-zwart) 6%,transparent);background:var(--db-wit);color:var(--db-tekst)}
.db-faq9--licht h2{color:var(--db-zwart)}
.db-faq9--licht :is(.db-faq9__lead,.db-faq9__antwoord > *,.db-faq9__feit strong){color:var(--db-tekst)}
/* ---- Toon verloop-om (BRIEF-ACHTERGROND 2026-10-27): verloop omgekeerd, grijs boven en donker onderaan; sluit aan op een buur die grijs eindigt. */
.db-faq9.db-faq9--verloop-om{background:var(--db-gradient-om)}

/* ---- het witte vragenblok */.db-faq9__vraag > summary{list-style:none;cursor:pointer;text-wrap:pretty}
.db-faq9__vraag > summary::-webkit-details-marker{display:none}

.db-faq9__lijst{--f9-vlak:var(--db-puurwit);margin-top:1.8rem;display:flex;flex-direction:column;gap:.4rem;color:var(--db-tekst)}
.db-faq9__vraag{background:var(--db-puurwit);border-radius:var(--db-radius);box-shadow:inset var(--db-balk-links) 0 0 var(--db-roze);overflow:clip}
.db-faq9__vraag[open]{box-shadow:inset var(--db-balk) 0 0 var(--db-roze)}
.db-faq9__vraag > summary{display:grid;grid-template-columns:2.6rem minmax(0,1fr) 1.4rem;align-items:center;gap:.6rem;min-height:4.4rem;padding:1rem 1.2rem 1rem 1.1rem;font:600 1.15rem/1.35 var(--db-font-kop)}
.db-faq9__nr{font:300 1.4rem/1 var(--db-font-kop);color:var(--db-tekst-zacht);letter-spacing:-.02em}
.db-faq9__vraag > summary::after{content:"";width:1.2rem;height:1.2rem;
  background:linear-gradient(var(--db-zwart),var(--db-zwart)) center/100% 2px no-repeat,linear-gradient(var(--db-zwart),var(--db-zwart)) center/2px 100% no-repeat}
.db-faq9__vraag[open] > summary::after{background-size:100% 2px,0 0}  /* plus wordt min */
.db-faq9__vraag > summary:hover{background:var(--db-vlak)}
.db-faq9__vraag[open] > summary{font-weight:700}
.db-faq9__vraag[open] > summary:hover{background:transparent}
.db-faq9__antwoord{margin:0 1rem 1rem 1rem;padding:1.2rem 1.2rem 1.3rem;background:var(--db-vlak);border-radius:var(--db-radius)}
/* onderrand gelijk met de contactplaat (gebruiker 2026-10-28): de open vraag vult de vaste lijsthoogte (RULES 5.1-script) op, zodat de laatste rij
   altijd onderaan de lijst staat; waar de browser het toelaat groeit de grijze antwoordplaat mee, anders blijft er wit onder de plaat */
.db-faq9__vraag[open]{flex-grow:1;display:flex;flex-direction:column}
.db-faq9__vraag[open]::details-content{flex-grow:1;display:flex;flex-direction:column}
.db-faq9__vraag[open] .db-faq9__antwoord{flex-grow:1}
@media (max-width: 560px){
  .db-faq9__vraag > summary{grid-template-columns:1.9rem minmax(0,1fr) 1.2rem;gap:.5rem;padding:.9rem .8rem .9rem .9rem;font-size:1.04rem}
  .db-faq9__nr{font-size:1.2rem}
  .db-faq9__antwoord{margin:0 .6rem .7rem;padding:1rem .9rem 1.1rem}
}