/* ---- 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}
}
/* ---- kennisbank-index: kennisbank-index-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.) */

/* ---- Kennisbank artikelen, versie 9 (Draagbalken.nl): kaartenraster. Het nieuwste artikel is een dubbele kaart (2 kolommen, 2 rijen),
   de andere elf zijn gelijke kaarten. Elke kaart: foto met een uitgesneden stuk dat boven de fotorand uitsteekt, onderwerpblokje,
   titel, een zin. Merkwaarden uit ../_shared/tokens.css. */
.db-kb9{
  --offerte:#15803D;--offerte-hover:#166534;
  --k-draag:#FFD9BD;--k-draag-t:var(--db-zwart);
  --k-balk:#C9E2F8;--k-balk-t:var(--db-zwart);
  --k-ber:#CDEFD9;--k-ber-t:var(--db-zwart);
  --k-verg:#DDD4F6;--k-verg-t:var(--db-zwart);
  --k-gap:clamp(1rem,2vw,1.5rem);
  position:relative;isolation:isolate;overflow:clip;padding:clamp(3.5rem,6vw,5.5rem) 0;
  --sectie-achtergrond:var(--db-gradient);background:var(--sectie-achtergrond);color:var(--db-tekst-op-donker);font-family:var(--db-font-tekst);
}
.db-kb9 :focus-visible{outline:calc(2 * var(--db-rand)) solid var(--db-focus);outline-offset:3px}
.db-kb9__inner{width:min(100% - 2rem,75rem);margin:0 auto}
.db-kb9 ul{list-style:none;margin:0;padding:0}

/* kop */
.db-kb9__kop{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem 3rem;flex-wrap:wrap;position:relative;z-index:1;margin-bottom:max(clamp(3.8rem,6vw,6rem),calc(.1 * min(75rem,100vw - 2rem) + 1rem))}
.db-kb9__kopt{max-width:40rem}
.db-kb9__tag{display:inline-block;margin:0 0 1rem;padding:.38rem .66rem;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-kb9 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-kb9__lead{margin:1rem 0 0;font-size:1.06rem;line-height:1.6;color:var(--db-wit)}
.db-kb9__kopr{display:grid;gap:1.1rem;justify-items:start}
.db-kb9__legenda{display:flex;flex-wrap:wrap;gap:.5rem}
.db-kb9__legenda .db-kb9__t{box-shadow:0 0 0 var(--db-rand) var(--db-roze)}
.db-kb9__acties{display:flex;flex-wrap:wrap;gap:.7rem}
.db-kb9__btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:3rem;padding:.75rem 1.15rem;border-radius:var(--db-radius);font:700 1rem/1.2 var(--db-font-kop);text-decoration:none;white-space:nowrap}
.db-kb9__btn svg{width:1.15rem;height:1.15rem;flex:none}
.db-kb9__btn--prim{background:var(--offerte);color:var(--db-puurwit);box-shadow:var(--db-schaduw)}
.db-kb9__btn--prim svg{fill:currentColor}
.db-kb9__btn--prim:is(:hover,:focus-visible){background:var(--offerte-hover)}
.db-kb9__btn--tel{color:var(--db-wit);box-shadow:inset 0 0 0 2px var(--db-wit)}
.db-kb9__btn--tel:is(:hover,:focus-visible){background:var(--db-wit);color:var(--db-zwart)}

/* onderwerpblokje */
.db-kb9__t{display:inline-block;padding:.34rem .6rem;border-radius:var(--db-radius);font:600 .74rem/1 var(--db-font-kop);letter-spacing:.1em;text-transform:uppercase}
.db-kb9__t[data-t="draag"]{background:var(--k-draag);color:var(--k-draag-t)}
.db-kb9__t[data-t="balk"]{background:var(--k-balk);color:var(--k-balk-t)}
.db-kb9__t[data-t="ber"]{background:var(--k-ber);color:var(--k-ber-t)}
.db-kb9__t[data-t="verg"]{background:var(--k-verg);color:var(--k-verg-t)}

/* raster: 3 kolommen, de eerste kaart 2 x 2 */
.db-kb9__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--k-gap) + 1.6rem) var(--k-gap)}
.db-kb9__item{display:flex;min-width:0}
.db-kb9__item--groot{grid-column:span 2;grid-row:span 2}
.db-kb9__kaart{position:relative;display:flex;flex-direction:column;flex:1;min-width:0;padding:0 .85rem 1.15rem;border-radius:var(--db-radius);
  background:var(--db-vlak);color:var(--db-tekst);text-decoration:none;border:var(--db-rand) solid var(--db-roze);box-shadow:var(--db-schaduw)}
.db-kb9__kaart:is(:hover,:focus-visible){background:var(--db-puurwit)}

/* foto met uitgesneden stuk: beide lagen hebben hetzelfde canvas, de foto is aan de bovenkant afgesneden (--pop), de uitsnede niet */
.db-kb9__foto{position:relative;flex:none;margin:calc(.85rem - var(--popw,0%)) 0 0;aspect-ratio:4/3;width:100%}
/* dunne roze rand om het fotovlak (vanaf de afgesneden bovenrand), onder de uitsnede zodat het uitgesneden stuk erover heen valt */
.db-kb9__foto::before{content:"";position:absolute;top:var(--pop);right:0;bottom:0;left:0;border:var(--db-rand) solid var(--db-roze);border-radius:var(--db-radius);pointer-events:none}
.db-kb9__ph,.db-kb9__cut{display:block;width:100%;height:100%;object-fit:cover;max-width:none}
.db-kb9__ph{clip-path:inset(var(--pop) 0 0 0 round var(--db-radius))}
.db-kb9__cut{position:absolute;inset:0;pointer-events:none}

.db-kb9__item--groot .db-kb9__foto{aspect-ratio:1/1;margin-top:calc(.85rem - var(--pop))}

.db-kb9__body{display:flex;flex-direction:column;flex:1 1 auto;padding:1rem .35rem 0}
.db-kb9__labels{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin:0}
.db-kb9__nieuw{display:inline-block;padding:.34rem .6rem;border-radius:var(--db-radius);box-shadow:inset 0 0 0 1px var(--db-zwart);font:600 .74rem/1 var(--db-font-kop);letter-spacing:.1em;text-transform:uppercase}
.db-kb9__titel{margin:.7rem 0 0;font:700 1.2rem/1.25 var(--db-font-kop);letter-spacing:-.01em;text-wrap:balance}
.db-kb9__zin{margin:.55rem 0 0;font-size:.98rem;line-height:1.55;color:var(--db-tekst-zacht)}
.db-kb9__meer{display:flex;align-items:center;gap:.4rem;margin:auto 0 0;padding-top:.9rem;font:700 .92rem/1 var(--db-font-kop)}
.db-kb9__meer svg{width:1.05rem;height:1.05rem;fill:currentColor}
.db-kb9__item--groot .db-kb9__titel{font-size:clamp(1.6rem,1.1rem + 1.4vw,2.25rem);line-height:1.12}
.db-kb9__item--groot .db-kb9__zin{max-width:46rem;font-size:1.08rem}
.db-kb9__item--groot .db-kb9__body{padding-top:1.2rem}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .db-kb9__kaart{transition:transform .25s ease,background-color .25s ease}
  .db-kb9__kaart:is(:hover,:focus-visible){transform:translateY(-4px)}
  .db-kb9__btn{transition:transform .25s ease,background-color .25s ease}
  .db-kb9__btn:is(:hover,:focus-visible){transform:translateY(-2px)}
}

@media (max-width:1000px){
  .db-kb9__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .db-kb9__item--groot{grid-column:1/-1;grid-row:auto}
  .db-kb9__item--groot .db-kb9__foto{aspect-ratio:4/3;margin-top:calc(.85rem - var(--popw))}
  .db-kb9__item:last-child{grid-column:1/-1}
  .db-kb9__item:last-child .db-kb9__kaart{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.2rem;align-items:center}
  .db-kb9__item:last-child .db-kb9__body{padding-top:0}
}
/* de uitsnede van de grote kaart steekt hier ~.165 x breedte omhoog: kop houdt die ruimte vrij zodat de knoppen bereikbaar blijven */
@media (min-width:621px) and (max-width:1000px){
  .db-kb9__kop{margin-bottom:max(clamp(3.8rem,6vw,6rem),calc(.17 * (100vw - 4rem) + 1rem))}
}
@media (max-width:620px){
  .db-kb9__grid{grid-template-columns:minmax(0,1fr)}
  .db-kb9__item:last-child .db-kb9__kaart{display:flex}
  .db-kb9__item:last-child .db-kb9__body{padding-top:1rem}
  .db-kb9__btn{flex:1 1 auto;white-space:normal}
  .db-kb9__acties{width:100%}
}

/* ---- Toon licht (website-kit RULES 4.26): #F6F6F6 als achtergrond, kop en legenda in donkere tekst; de kaarten worden wit en houden hun roze rand. */
.db-kb9.db-kb9--licht{--sectie-achtergrond:var(--db-wit);background:var(--sectie-achtergrond);color:var(--db-tekst)}
.db-kb9--licht h2,.db-kb9--licht .db-kb9__lead{color:var(--db-zwart)}
.db-kb9--licht .db-kb9__kaart{background:var(--db-puurwit)}
.db-kb9--licht .db-kb9__btn--tel{color:var(--db-zwart);box-shadow:inset 0 0 0 2px var(--db-zwart)}
.db-kb9--licht .db-kb9__btn--tel:is(:hover,:focus-visible){background:var(--db-zwart);color:var(--db-wit)}
/* ---- Toon verloop-om (BRIEF-ACHTERGROND 2026-10-27): verloop omgekeerd, grijs boven en donker onderaan; sluit aan op een buur die grijs eindigt. */
.db-kb9.db-kb9--verloop-om{--sectie-achtergrond:var(--db-gradient-om)}
/* ---- 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}
}
/* ---- cta-strip: cta-strip-v7 ---- */
/* toon: verloop (eigen achtergrond van deze sectie; een andere toon per pagina komt via config.SECTIE_TOON en een klasse <wortel>--<toon> hieronder.) */

/* ---- Contactband, versie 7: zelfde als versie 6, alleen de band onder de werker en de vorm achter hem verschillen. Band = roze strook met donkere plaat erachter, cirkel = dunne roze ring. */
/* (aangepast uit library "opslag": Opslagkaart met diagonale band).
   Zoals de bron: een donkere kaart links, de werker-uitsnede rechts, een diagonale band erachter met een donkere streep
   onderaan die de afgesneden onderrand van de uitsnede verbergt. In Draagbalken: zwarte sectie, roze band onder 4 graden,
   scherpe hoeken, groene offerteknop, bel en WhatsApp als eigen knoppen, een roze stempel "24 uur" op de lege plek rechts. */
.db-cta7{
  --c7-wa:#25D366;--c7-wa-hover:#1EBE5A;--sectie-achtergrond:var(--db-gradient);--c7-hoogte:44rem;--c7-beeld:42rem;--c7-streep:7.5rem;--c7-lijn:1rem;--c7-band:15rem;--c7-schleier:.3;--c7-s:6.99cqi;--c7-y1:calc(var(--c7-band) - var(--c7-streep) + var(--c7-s));--c7-plaat:color-mix(in srgb,var(--db-roze) 55%,var(--db-puurwit));--c7-rand-onder:var(--db-grijs);
  position:relative;overflow:hidden;container-type:inline-size;isolation:isolate;background:var(--sectie-achtergrond);color:var(--db-tekst-op-donker);font-family:var(--db-font-tekst)}
.db-cta7 :focus-visible{outline:calc(2 * var(--db-rand)) solid var(--db-focus);outline-offset:3px}
.db-cta7__band{position:absolute;left:0;right:0;bottom:0;height:var(--c7-band)}  /* geen vlak zelf; twee scherpe stroken: roze + een donkere plaat er .75rem lager achter (zelfde afstand als de roze plaat achter de kaart) */
.db-cta7__band::before,.db-cta7__band::after{content:"";position:absolute;inset:0}
.db-cta7__band::before{z-index:3;background:var(--db-zwart);clip-path:polygon(0 calc(var(--c7-y1) - 1.5rem),100% calc(calc(var(--c7-y1) - 1.5rem) - var(--c7-s)),100% calc(calc(var(--c7-y1) + 1rem) - var(--c7-s)),0 calc(var(--c7-y1) + 1rem))}  /* plaat loopt door tot onder de streep: ring en onderrand van de uitsnede blijven helemaal erachter */
.db-cta7__band::after{z-index:1;background:var(--db-roze);clip-path:polygon(0 calc(var(--c7-y1) - 4.5rem),100% calc(calc(var(--c7-y1) - 4.5rem) - var(--c7-s)),100% calc(calc(var(--c7-y1) - 1.5rem) - var(--c7-s)),0 calc(var(--c7-y1) - 1.5rem))}
.db-cta7__streep{position:absolute;z-index:3;left:0;right:0;bottom:0;height:var(--c7-streep);background:var(--c7-rand-onder);clip-path:polygon(0 6.99cqi,100% 0,100% calc(100% + 1px),0 calc(100% + 1px))}  /* onderrand 1px onder de sectie: anders schemert de foto op een gebroken pixelpositie door de laatste rij (SITE-R4-V1) */
.db-cta7__binnen{position:relative;display:grid;grid-template-columns:minmax(0,33rem) minmax(0,1fr);align-items:end;column-gap:clamp(1rem,3vw,3rem);width:min(100% - 3rem,75rem);min-height:var(--c7-hoogte);margin:0 auto}
.db-cta7__kaart{position:relative;z-index:4;align-self:start;margin:3.5rem 0 0;padding:clamp(1.5rem,3vw,2.5rem);border:var(--db-rand) solid var(--db-roze);border-radius:var(--db-radius);background:var(--db-puurwit);color:var(--db-tekst);box-shadow:.75rem .75rem 0 var(--db-roze)}
.db-cta7__tag{display:inline-block;margin:0 0 1.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:.14em;text-transform:uppercase}
.db-cta7 h2{margin:0;color:var(--db-zwart);font:700 clamp(2rem,1.3rem + 2.2vw,2.9rem)/1.08 var(--db-font-kop);letter-spacing:-.02em;text-wrap:balance;hyphens:auto;overflow-wrap:break-word}
.db-cta7__lead{margin:1rem 0 0;color:var(--db-tekst);font-size:1.05rem;line-height:1.6}
.db-cta7__acties{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;margin-top:1.6rem}
.db-cta7__knop{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:3.25rem;padding:.7rem 1rem;border:1px solid transparent;border-radius:var(--db-radius);font:700 .95rem/1.2 var(--db-font-kop);text-align:center;text-decoration:none}
.db-cta7__knop--offerte{grid-column:1/-1;background:var(--offerte);border-color:var(--offerte);color:var(--db-puurwit);font-size:1.05rem}
.db-cta7__knop--offerte:hover{background:var(--offerte-hover);border-color:var(--offerte-hover)}
.db-cta7__knop--bel{border-color:var(--db-zwart);background:transparent;color:var(--db-zwart)}
.db-cta7__knop--bel:hover{background:var(--db-zwart);color:var(--db-puurwit)}
.db-cta7__knop--wa{background:var(--c7-wa);border-color:var(--c7-wa);color:var(--db-puurwit)}
.db-cta7__knop--wa:hover{background:var(--c7-wa-hover);border-color:var(--c7-wa-hover)}
.db-cta7__ico{flex:none;width:1.4rem;height:1.4rem;fill:currentColor;overflow:visible}
.db-cta7__ico .db-cta7__sh{fill:var(--db-roze)}
.db-cta7__knop--offerte .db-cta7__ico{width:1.2rem;height:1.2rem}
.db-cta7__wa{flex:none;width:1.5rem;height:1.5rem}
.db-cta7__wa circle{fill:none}
.db-cta7__wa path{fill:var(--db-puurwit)}
/* uitsnede: staat op de onderrand van de sectie, de streep verbergt het middel; hoofd en borst steken boven de band uit */
.db-cta7__beeld{position:relative;z-index:2;justify-self:center;margin:0;height:var(--c7-beeld);aspect-ratio:857/1400}
.db-cta7__beeld::before{content:"";position:absolute;z-index:-1;left:50%;bottom:6%;width:120%;aspect-ratio:1;border-radius:50%;border:var(--db-rand) solid var(--db-roze);transform:translateX(-50%)}  /* dunne roze ring in plaats van de witte schijf */
.db-cta7__beeld img{display:block;width:100%;height:100%;object-fit:contain;object-position:50% 100%}
.db-cta7__stempel{position:absolute;z-index:4;top:2.5rem;right:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;width:9rem;height:9rem;margin:0;padding:1rem;border-radius:50%;background:var(--db-roze);border:var(--db-balk) solid var(--db-puurwit);color:var(--db-zwart);text-align:center;transform:rotate(-8deg)}
.db-cta7__stempel strong{font:800 2rem/1 var(--db-font-kop);letter-spacing:-.02em}
.db-cta7__stempel span{font:600 .75rem/1.25 var(--db-font-kop);letter-spacing:.04em;text-transform:uppercase}

@media (max-width: 1100px){
  .db-cta7__binnen{grid-template-columns:minmax(0,28rem) minmax(0,1fr)}
  .db-cta7__stempel{width:8.75rem;height:8.75rem;padding:.8rem}
  .db-cta7__stempel strong{font-size:1.6rem}
  .db-cta7__stempel span{font-size:.75rem;letter-spacing:.02em}
}
@media (max-width: 900px){
  .db-cta7{--c7-beeld:34rem}
  .db-cta7{--c7-band:12.5rem;--c7-y1:calc(var(--c7-band) - 3rem)}
  /* de band is zelf roze; de dunne roze lijn erboven valt ermee samen */
.db-cta7__streep{height:8rem;clip-path:polygon(0 calc(100% - 3rem),100% calc(100% - 3rem - 6.99cqi),100% calc(100% + 1px),0 calc(100% + 1px))}
  .db-cta7__beeld::before{width:98%;bottom:0}
  .db-cta7__binnen{display:block;width:min(100% - 2rem,34rem);min-height:0}
  .db-cta7__kaart{margin:2rem 0 0}
  .db-cta7__beeld{height:28rem;margin:1.5rem auto 0;width:min(100%,20.8rem);overflow:hidden;aspect-ratio:auto}
  .db-cta7__beeld img{height:var(--c7-beeld);object-position:50% 0}
  .db-cta7__stempel{top:auto;right:0;bottom:19rem;width:8.75rem;height:8.75rem;padding:.7rem;gap:.15rem}
  .db-cta7__stempel strong{font-size:1.35rem}
  .db-cta7__stempel span{font-size:.75rem;line-height:1.15;letter-spacing:.02em}
}
@media (max-width: 560px){
  .db-cta7__acties{grid-template-columns:minmax(0,1fr)}
  .db-cta7__kaart{box-shadow:.5rem .5rem 0 var(--db-roze)}
}

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

/* ---- Tonen (PAGINA-VULLING: cta grijs* en licht*). De paginagenerator zet db-cta7--grijs of db-cta7--licht op de wortel. De witte kaart, de roze band onder
   de werker en de donkere onderband blijven; alleen het sectievlak verandert (effen #404040 of #F6F6F6). */
.db-cta7.db-cta7--grijs,.db-cta7.db-cta7--verloop-om{--sectie-achtergrond:var(--db-gradient-om);--c7-rand-onder:var(--db-zwart)}
.db-cta7.db-cta7--licht{--sectie-achtergrond:var(--db-wit);color:var(--db-tekst)}
.db-cta7.db-cta7--licht .db-cta7__beeld::before{border-color:var(--db-roze)}  /* de ring is roze op beide tonen */
/* ---- auteur-gerelateerd: auteur-gerelateerd-v6 ---- */
/* 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.) */

/* ---- Auteur en gerelateerde artikelen, versie 6 (Draagbalken.nl), nieuw ontwerp uit de ideeen van de library
   (card-on-band, tilted-block, popout-card, image-card-grid): een brede fotoband met schuine onderrand en de kop erop,
   de drie artikelkaarten (elk met foto) hangen over de onderrand van de band, daaronder de auteursplaat met de uitsnede
   van Michel Wit die boven de plaat uitsteekt. Merkwaarden uit ../_shared/tokens.css. */
.db-ag6{
  --offerte:#15803D;--offerte-hover:#166534;--a6-s1:rgb(var(--db-zwart-rgb) / .88);--a6-s2:rgb(var(--db-zwart-rgb) / .62);--a6-s3:rgb(var(--db-zwart-rgb) / .25);--a6-s4:rgb(var(--db-zwart-rgb) / .12);
  --a6-wa:#25D366;--a6-wa-hover:#1EBE5A;
  --a6-inner:min(100% - 2rem,75rem);
  --a6-rise:3.3rem;
  position:relative;overflow:clip;padding:0 0 clamp(3rem,5vw,4.5rem);
  --sectie-achtergrond:var(--db-gradient);background:var(--sectie-achtergrond);color:var(--db-tekst-op-donker);font-family:var(--db-font-tekst);
}
.db-ag6 :focus-visible{outline:calc(2 * var(--db-rand)) solid var(--db-focus);outline-offset:3px}

/* fotoband */
.db-ag6__band{position:relative;container-type:inline-size;isolation:isolate;
  padding:clamp(3.5rem,6vw,5.5rem) 0 clamp(11rem,17vw,13rem);background:var(--db-gradient);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 6.99cqi),0 100%)}
.db-ag6__bandfoto{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.db-ag6__band::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,var(--a6-s1) 0%,var(--a6-s2) 55%,var(--a6-s3) 100%)}
.db-ag6__bandtekst{width:var(--a6-inner);margin:0 auto}
.db-ag6__tag{display:inline-block;margin:0 0 1.1rem;padding:.38rem .66rem;background:var(--db-roze);color:var(--db-puurwit);
  font:600 .8rem/1 var(--db-font-kop);letter-spacing:.12em;text-transform:uppercase;border-radius:var(--db-radius)}
.db-ag6 h2{margin:0;max-width:16ch;font:700 clamp(2.1rem,1.3rem + 2.6vw,3.4rem)/1.06 var(--db-font-kop);letter-spacing:-.02em;color:var(--db-wit)}
.db-ag6__lead{margin:1rem 0 0;max-width:30rem;font-size:1.1rem;line-height:1.55;color:var(--db-wit)}

/* kaarten over de bandrand: kaartstijl van diensten-grid-v9 (witte kaart, dunne roze rand, roze balk onder, ingelegd fotovenster met uit-de-rand-uitsnede) */
.db-ag6__kaarten{position:relative;z-index:2;width:var(--a6-inner);margin:calc(-1 * clamp(8.5rem,13vw,10.5rem)) auto 0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.9rem,2vw,1.6rem)}
.db-ag6__kaart{position:relative;display:flex;flex-direction:column;min-width:0;margin-top:var(--a6-rise);padding:.7rem .7rem 0;background:var(--db-puurwit);color:var(--db-tekst);text-decoration:none;
  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-ag6__venster{position:relative;display:block;container-type:inline-size;aspect-ratio:1.8}
.db-ag6__ph-laag,.db-ag6__uit{position:absolute;left:0;right:0;top:-14.5cqw;bottom:0;display:block;pointer-events:none}
.db-ag6__ph-laag{clip-path:inset(14.5cqw 0 0 0 round var(--db-radius))}
.db-ag6__uit{z-index:2;clip-path:inset(-6rem 0 0 0)}
.db-ag6__ph-laag img,.db-ag6__uit img{position:absolute;left:0;top:0;display:block;width:calc(var(--z,1) * 100%);height:auto;max-width:none;margin:calc(var(--my,0%) * -1) 0 0 calc(var(--mx,0%) * -1)}
.db-ag6__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-ag6__venster--vlak .db-ag6__rahmen{position:absolute;inset:0;display:block;overflow:hidden;border-radius:var(--db-radius);background:var(--db-zwart)}
.db-ag6__venster--vlak img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.db-ag6__lab{position:absolute;z-index:3;left:.5rem;bottom:.5rem;padding:.35rem .6rem;border-radius:var(--db-radius);background:var(--db-roze);color:var(--db-puurwit);
  font:700 .75rem/1 var(--db-font-kop);letter-spacing:.1em;text-transform:uppercase}
.db-ag6__body{position:relative;display:flex;flex:1 1 auto;flex-direction:column;gap:.55rem;padding:.85rem .3rem 1.1rem}
.db-ag6__nr{position:absolute;right:.3rem;top:.7rem;font:300 2.3rem/1 var(--db-font-kop);letter-spacing:-.04em;color:var(--db-grijs)}
.db-ag6__kaart h3{margin:0;padding-right:3.4rem;font:700 1.15rem/1.25 var(--db-font-kop);text-wrap:balance}
.db-ag6__p{font-size:.96rem;line-height:1.55;color:var(--db-grijs)}
.db-ag6__meer{display:inline-flex;align-items:center;gap:.5rem;margin-top:auto;padding-top:.5rem;min-height:2.75rem;font:700 .95rem/1.2 var(--db-font-kop)}
.db-ag6__meer svg{width:1.1rem;height:1.1rem;flex:none;fill:currentColor}
.db-ag6__kaart:is(:hover,:focus-visible) .db-ag6__meer{color:var(--offerte)}

/* auteursplaat */
.db-ag6__auteur{position:relative;container-type:inline-size;width:var(--a6-inner);margin:clamp(3.2rem,5vw,4.2rem) auto 0;
  display:grid;grid-template-columns:14.5rem minmax(0,1fr) 15.5rem;gap:clamp(1.2rem,3vw,2.6rem);align-items:center;
  padding:2.2rem 2rem 2.2rem 0;min-height:17rem;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-ag6__auteur :focus-visible{outline-color:var(--db-zwart)}
.db-ag6__figuur{position:relative;z-index:1;align-self:end;margin:0 0 -2.2rem;height:22rem;clip-path:inset(-6rem 0 0 0)}
.db-ag6__figuur img{position:absolute;left:50%;bottom:0;transform:translateX(-50%);height:100%;width:auto;max-width:none}
.db-ag6__tekst,.db-ag6__acties{position:relative;z-index:1;min-width:0}
.db-ag6__tekst{padding-top:2.4rem}
.db-ag6__label{display:inline-block;margin:0 0 .6rem;padding:.38rem .62rem;border-radius:var(--db-radius);background:var(--db-zwart);color:var(--db-puurwit);font:600 .78rem/1 var(--db-font-kop);letter-spacing:.14em;text-transform:uppercase}
.db-ag6__tekst h3{margin:0;font:700 1.6rem/1.15 var(--db-font-kop);color:var(--db-tekst)}
.db-ag6__rol{margin:.2rem 0 0;font-size:.95rem;color:var(--db-tekst)}
.db-ag6__bio{margin:.9rem 0 0;max-width:34rem;font-size:1.02rem;line-height:1.6}
.db-ag6__bio strong{font-weight:700}
.db-ag6__sta{margin:1rem 0 .5rem;font:600 .86rem/1 var(--db-font-kop);color:var(--db-tekst)}
.db-ag6__chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0;list-style:none}
.db-ag6__chips li{padding:.5rem .75rem;border-radius:var(--db-radius);border:0;background:var(--db-roze);color:var(--db-actie-tekst);font:600 .88rem/1.2 var(--db-font-kop)}
.db-ag6__acties{display:flex;flex-direction:column;gap:.7rem}
.db-ag6__btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:3.1rem;padding:.75rem 1rem;
  font:700 .98rem/1.2 var(--db-font-kop);text-align:center;text-decoration:none}
.db-ag6__btn svg{width:1.15rem;height:1.15rem;flex:none}
.db-ag6__btn--offerte{background:var(--offerte);color:var(--db-puurwit);box-shadow:var(--db-schaduw)}
.db-ag6__btn--offerte svg{fill:currentColor}
.db-ag6__btn--offerte:is(:hover,:focus-visible){background:var(--offerte-hover)}
.db-ag6__btn--wa{background:var(--a6-wa);color:var(--db-zwart)}
.db-ag6__btn--wa:is(:hover,:focus-visible){background:var(--a6-wa-hover)}
.db-ag6__btn--wa .wa{width:1.5rem;height:1.5rem}
.db-ag6__btn--wa .wa circle{fill:var(--a6-wa)}
.db-ag6__btn--wa .wa path{fill:var(--db-puurwit)}
.db-ag6__link{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:2.75rem;font:700 .92rem/1.2 var(--db-font-kop);text-decoration:none;color:var(--db-zwart)}
.db-ag6__link svg{width:1rem;height:1rem;fill:currentColor}
.db-ag6__link:is(:hover,:focus-visible){background:var(--a6-s4)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .db-ag6__kaart{transition:transform .25s ease}
  .db-ag6__kaart:is(:hover,:focus-visible){transform:translateY(-4px)}
  .db-ag6__btn{transition:transform .22s ease}
  .db-ag6__btn:is(:hover,:focus-visible){transform:translateY(-2px)}
}

@media (max-width:1000px){
  .db-ag6__auteur{grid-template-columns:12rem minmax(0,1fr);padding-right:1.4rem}
  .db-ag6__acties{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap;align-items:center;padding-left:1.4rem}
  .db-ag6__figuur{height:19rem;margin-bottom:0}
  .db-ag6__tekst{padding-top:1.6rem}
}
@media (max-width:860px){
  .db-ag6__kaarten{grid-template-columns:minmax(0,1fr);gap:1.1rem;margin-top:calc(-1 * 8rem)}
  .db-ag6__venster{aspect-ratio:2.6}
}
@media (max-width:640px){
  .db-ag6__band{padding-bottom:10rem}
  .db-ag6__venster{aspect-ratio:1.8}
  .db-ag6__auteur{display:flex;flex-direction:column;align-items:stretch;gap:1rem;padding:0 1.2rem 1.6rem;margin-top:5rem}
  .db-ag6__figuur{align-self:center;order:-1;width:11rem;height:17rem;margin:-6rem 0 -.4rem}
  .db-ag6__acties{padding-left:0;flex-direction:column;align-items:stretch}
  .db-ag6__tekst{padding-top:0}
  .db-ag6__btn{white-space:normal}
}

/* ---- Toon-varianten (website-kit RULES 4.26): alleen de sectie-achtergrond wisselt; de fotoband, de witte kaarten en de roze auteursplaat blijven leesbaar. */
.db-ag6.db-ag6--licht{--sectie-achtergrond:var(--db-wit);background:var(--sectie-achtergrond)}
.db-ag6.db-ag6--grijs,.db-ag6.db-ag6--verloop-om{--sectie-achtergrond:var(--db-gradient-om);background:var(--sectie-achtergrond)}
/* ---- 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%)}