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

.db-wg6{--offerte:#15803D;--offerte-hover:#166534;--wg6-zee:var(--db-wit);--wg6-land:var(--db-puurwit);--wg6-nh:var(--db-zwart);--wg6-grens:var(--db-grijs);--wg6-wa:#25D366;--wg6-wa-hover:#1EBE5A;--sectie-achtergrond:var(--db-gradient);--wg6-rand:#D9D9D9;--wg6-uitsnede-schaduw:0 14px 18px rgb(var(--db-zwart-rgb) / .28);
  position:relative;overflow:clip;padding:clamp(3.5rem,6vw,5.5rem) 0;background:var(--sectie-achtergrond);color:var(--db-tekst-op-donker);font-family:var(--db-font-tekst)}
.db-wg6 :focus-visible{outline:calc(2 * var(--db-rand)) solid var(--db-focus);outline-offset:4px}
:where(.db-wg6) :where(ul,ol){list-style:none;margin:0;padding:0}
:where(.db-wg6) :where(p){margin:0}
.db-wg6 .i{display:inline-block;flex:none;width:var(--i-maat,24px);height:var(--i-maat,24px);overflow:visible;color:inherit}
.db-wg6__inner{width:min(100% - 2rem,75rem);margin:0 auto;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:2.5rem clamp(2.5rem,5vw,4.5rem);align-items:center}
.db-wg6__kop{min-width:0}
.db-wg6__nb{white-space:nowrap;hyphens:none}
.db-wg6__tag{display:inline-block;margin:0 0 1.2rem;padding:.45rem .8rem;background:var(--db-roze);color:var(--db-actie-tekst);font:600 .78rem/1 var(--db-font-kop);letter-spacing:.12em;text-transform:uppercase}
.db-wg6 h2{margin:0;font:700 clamp(2rem,1.15rem + 2.5vw,3.2rem)/1.05 var(--db-font-kop);letter-spacing:-.03em;text-wrap:balance;hyphens:manual}
.db-wg6__lead{margin:1.1rem 0 0;max-width:34rem;font-size:1.06rem;line-height:1.55}
/* twee locaties als genummerde kaarten; het nummer staat ook op de kaart */
.db-wg6__locs{margin:1.75rem 0 0;display:grid;gap:1.5rem}
.db-wg6__loc{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:.9rem 1rem;align-items:start;padding:1rem 1.1rem 1.05rem;background:var(--db-vlak);color:var(--db-tekst);border:var(--db-rand) solid var(--db-roze)}
.db-wg6__nr{display:grid;place-items:center;width:2.4rem;height:2.4rem;background:var(--db-zwart);color:var(--db-puurwit);box-shadow:.2rem .2rem 0 var(--db-roze);font:700 1.1rem/1 var(--db-font-kop)}
.db-wg6__loctekst{min-width:0}
.db-wg6__label{font:600 .75rem/1.2 var(--db-font-kop);letter-spacing:.11em;text-transform:uppercase;color:var(--db-tekst-zacht)}
.db-wg6__naam{margin-top:.2rem;font:600 1.05rem/1.3 var(--db-font-kop)}
.db-wg6__adres{margin-top:.1rem;font:600 1rem/1.35 var(--db-font-kop)}
.db-wg6__regels{margin-top:.6rem;display:grid;gap:.25rem}
.db-wg6__regels li{display:flex;align-items:center;gap:.5rem;font-size:.95rem;line-height:1.35;min-height:1.6rem}
.db-wg6__regels .i{--i-maat:1.6rem}
.db-wg6__regels a{display:inline-flex;align-items:center;min-height:2.75rem;color:var(--db-zwart);font-family:var(--db-font-kop);font-weight:600;text-decoration:none}
.db-wg6__loc--kantoor{grid-template-columns:auto minmax(0,1fr) minmax(0,40%);align-items:center}
.db-wg6__regels--kant{margin:0;padding:.7rem .8rem;background:var(--db-puurwit);border:var(--db-rand) solid var(--db-roze)}
.db-wg6__regels li:has(a){min-height:2.75rem}
/* de loodsfoto steekt over de rechter- en bovenrand van de kaart */
.db-wg6__loc--loods{padding-right:calc(40% + 1.4rem);min-height:10.5rem}
.db-wg6__foto{--stijg:1rem;--sw:calc(max(100cqw,1.4 * (100cqh + var(--stijg))));--sh:calc(var(--sw) / 1.359);position:absolute;z-index:1;top:-1.1rem;right:-1.1rem;bottom:1rem;width:40%;margin:0;container-type:size;border:var(--db-rand) solid var(--db-roze);box-shadow:.55rem .55rem 0 var(--db-roze);background:var(--db-roze)}
.db-wg6__klem{position:absolute;inset:0}
.db-wg6__klem{overflow:clip}
.db-wg6__stapel{position:absolute;width:var(--sw);height:var(--sh);left:calc((var(--sw) - 100cqw) * -.55);top:calc(var(--sh) * -.029 - var(--stijg))}
.db-wg6__stapel img{position:absolute;display:block}
.db-wg6__klem img{left:0;top:0;width:100%;height:100%;object-fit:cover}
/* regio en de twee steden: twee kleine feiten */
.db-wg6__chips{margin-top:1.5rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
.db-wg6__chip{display:flex;flex-direction:column;align-items:flex-start;gap:.2rem;padding:.8rem 1rem;border:var(--db-rand) solid var(--db-roze);background:var(--db-puurwit);color:var(--db-tekst)}
.db-wg6__waarde{font:600 1.02rem/1.3 var(--db-font-kop)}
.db-wg6__acties{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.6rem}
.db-wg6__offerte,.db-wg6__wa,.db-wg6__bel{display:inline-flex;align-items:center;gap:.6rem;min-height:3rem;padding:.8rem 1.3rem;text-decoration:none;font:600 .98rem/1.2 var(--db-font-kop)}
.db-wg6__offerte{background:var(--offerte);color:var(--db-puurwit);box-shadow:var(--db-schaduw)}
.db-wg6__offerte:is(:hover,:focus-visible){background:var(--offerte-hover)}
.db-wg6__wa{background:var(--wg6-wa);color:var(--db-puurwit);border:2px solid var(--wg6-wa)}
.db-wg6__wa:is(:hover,:focus-visible){background:var(--wg6-wa-hover);border-color:var(--wg6-wa-hover)}
.db-wg6__wa svg{fill:currentColor}
.db-wg6__pijl,.db-wg6__wa svg,.db-wg6__bel .i{width:1.15rem;height:1.15rem;flex:none}
.db-wg6__pijl{fill:currentColor}
/* hoeken: overal 5px (Stijlgids), vier gelijke hoeken */
:is(.db-wg6__tag,.db-wg6__loc,.db-wg6__nr,.db-wg6__regels--kant,.db-wg6__foto,.db-wg6__chip,.db-wg6__offerte,.db-wg6__wa,.db-wg6__bel,.db-wg6__kaartje){border-radius:var(--db-radius)}
.db-wg6__podium::before{border-radius:var(--db-radius)}
/* podium: kaartschijf op een schuin blok (4 graden), uitsnede steekt over de schijfrand, donkere kaart over de voet */
.db-wg6__podium{position:relative;display:flow-root;min-width:0;isolation:isolate}
.db-wg6__podium::before{content:"";position:absolute;z-index:0;left:22%;right:-1.25rem;top:38%;bottom:-.6rem;background:var(--db-vlak);border:var(--db-rand) solid var(--db-roze);transform:skewY(calc(var(--db-helling) * -1))}
.db-wg6__schijf{position:relative;z-index:1;width:88%;aspect-ratio:1;border-radius:50%;overflow:hidden;border:var(--db-rand) solid var(--db-roze);box-shadow:0 0 0 .6rem var(--db-wit),var(--db-schaduw)}
.db-wg6__kaart{display:block;width:100%;height:100%}
.db-wg6__zee{fill:var(--wg6-zee)}
.db-wg6__land,.db-wg6__buitenland{fill:var(--wg6-land);stroke:var(--wg6-grens);stroke-width:.8}
.db-wg6__buitenland{fill:var(--db-vlak)}
.db-wg6__nh{fill:var(--wg6-nh);stroke:var(--db-puurwit);stroke-width:1}
.db-wg6__lab{font:600 14.5px var(--db-font-kop);fill:var(--db-tekst-zacht);letter-spacing:.05em}
.db-wg6__lab--nh{fill:var(--db-puurwit);stroke:var(--db-zwart);stroke-width:4px;paint-order:stroke;stroke-linejoin:round;font-size:14.5px;letter-spacing:.02em}
.db-wg6__rl{fill:var(--db-roze);stroke:var(--db-zwart);stroke-width:.8}
.db-wg6__rlt,.db-wg6__plt,.db-wg6__mkt{font:600 12.5px var(--db-font-kop);fill:var(--db-zwart)}
.db-wg6__mk{fill:var(--db-zwart);stroke:var(--db-roze);stroke-width:1}
.db-wg6__mkt{fill:var(--db-puurwit);font-size:15px;font-weight:700}
.db-wg6__pl{fill:var(--db-puurwit);stroke:var(--db-roze);stroke-width:1.8}
.db-wg6__pin{fill:var(--db-roze);stroke:var(--db-zwart);stroke-width:2}
.db-wg6__pind{fill:var(--db-puurwit)}
/* Den Haag en Utrecht: positie geijkt op PDOK (README), groter dan de andere labels zodat ze op 390 leesbaar blijven */
.db-wg6__stadt{font:700 20px var(--db-font-kop);fill:var(--db-zwart)}
.db-wg6__rlt{font-size:17px}
/* onderkant van de uitsnede = onderkant van het zwarte blok (podium eindigt daar); boven en zijkanten blijven vrij voor de schaduw */
.db-wg6__uitsnede{position:absolute;z-index:2;right:0;top:7%;bottom:0;width:42%;pointer-events:none;clip-path:inset(-3rem -3rem 0 -3rem)}
.db-wg6__uitsnede img{width:100%;height:auto;filter:drop-shadow(var(--wg6-uitsnede-schaduw))}
.db-wg6__kaartje{position:relative;z-index:3;margin-top:-4.5rem;padding:1.1rem 1.4rem 1.2rem;background:var(--db-zwart);color:var(--db-tekst-op-donker);box-shadow:inset 0 calc(var(--db-balk) * -1) 0 var(--db-roze),0 0 0 1px var(--wg6-rand),var(--db-schaduw);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.15rem 1rem;align-items:center}
.db-wg6__vraag{font:600 1.05rem/1.3 var(--db-font-kop)}
.db-wg6__antwoord{grid-column:1;font-size:.95rem}
.db-wg6__bel{grid-column:2;grid-row:1 / span 2;justify-content:center;background:var(--db-puurwit);color:var(--db-zwart)}
/* toon verloop-om: grijs boven, donker onder */
.db-wg6.db-wg6--verloop-om{--sectie-achtergrond:var(--db-gradient-om)}
.db-wg6--grijs{--sectie-achtergrond:var(--db-gradient-om)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .db-wg6__offerte,.db-wg6__wa,.db-wg6__bel{transition:transform .25s ease,background-color .25s ease}
  .db-wg6__offerte:is(:hover,:focus-visible),.db-wg6__wa:is(:hover,:focus-visible),.db-wg6__bel:is(:hover,:focus-visible){transform:translateY(-2px)}
}
@media (max-width:900px){
  .db-wg6__inner{grid-template-columns:1fr;gap:3rem}
  .db-wg6__podium{max-width:35rem;margin-inline:auto;width:100%}
  .db-wg6__foto{right:-.7rem;box-shadow:.4rem .4rem 0 var(--db-roze)}
}
@media (max-width:560px){
  .db-wg6__chips{grid-template-columns:1fr}
  .db-wg6__loc--kantoor{grid-template-columns:auto minmax(0,1fr)}
  .db-wg6__regels--kant{grid-column:1 / -1}
  .db-wg6__acties>*{flex:1 1 100%;justify-content:center;text-align:center}
  .db-wg6__loc--loods{padding-right:1.1rem;padding-top:calc(46vw + 1.1rem);min-height:0}
  .db-wg6__foto{top:-1.1rem;bottom:auto;left:1.1rem;right:-.1rem;width:auto;height:46vw;box-shadow:.4rem .4rem 0 var(--db-roze)}
  .db-wg6__schijf{width:94%}
  .db-wg6__uitsnede{width:38%;top:14%}
  .db-wg6__kaartje{grid-template-columns:minmax(0,1fr);margin-top:-3.25rem}
  .db-wg6__bel{grid-column:1;grid-row:3;justify-content:center;margin-top:.9rem}
}
/* ---- 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)}
/* ---- projecten-strip: projecten-strip-v16 ---- */
/* 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.) */

/* ---- Projectenstrook v15 (Draagbalken.nl): beeld met keuzelijst, zonder blok om Michel Wit. Links het grote beeld (een foto per keer,
   geen stukje van de volgende), rechts de keuzelijst met Michel Wit als uitsnede die boven de lijst uitsteekt. Alleen de foto's waar
   een stuk van de foto mooi boven het kader uitsteekt (werkers) hebben dat effect; de rest staat vlak in hetzelfde kader.
   Loslaten glijdt zacht: de snap staat uit zolang het beeld naar zijn plek schuift. Eigen variabelen --ps16-*. */
.db-ps16{
  --ps16-wa:#25D366;--ps16-wa-hover:#1EBE5A;
  --ps16-hel:6.99vw;
  --ps16-t:22%;
  --ps16-gap:.9rem;
  --ps16-mw:12.5rem;
  --ps16-dek:2.6rem;
  --ps16-kaart:rgb(var(--db-zwart-rgb) / .95);
  --ps16-ease:cubic-bezier(.22,.8,.3,1);
  position:relative;overflow:clip;container-type:inline-size;
  padding-bottom:clamp(2.25rem,4.5vw,3.75rem);
  --sectie-achtergrond:var(--db-gradient);--ps16-kop-vlak:var(--db-zwart);
  --ps16-item:var(--db-zwart);--ps16-item-hover:var(--db-grijs);--ps16-lijn:var(--db-grijs);--ps16-item-tekst:var(--db-tekst-op-donker);
  --ps16-actief:var(--db-puurwit);--ps16-actief-tekst:var(--db-zwart);
  background:var(--sectie-achtergrond);color:var(--db-tekst-op-donker);font:400 1rem/1.6 var(--db-font-tekst);
}
.db-ps16 :focus-visible{outline:calc(2 * var(--db-rand)) solid var(--db-focus);outline-offset:3px}
.db-ps16 :where(ul,ol,figure,p,h2){margin:0;padding:0;list-style:none}
.db-ps16__sprite{position:absolute;width:0;height:0;overflow:hidden}
.db-ps16__in{position:relative;width:min(100% - 2rem,74rem);margin-inline:auto}
.db-ps16__status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.db-ps16__wa-bg{fill:var(--ps16-wa)}
.db-ps16__wa-pad{fill:var(--db-puurwit)}

/* kop: effen zwarte band met 4 graden schuine onderrand en roze lijn van 4 px op het verloop van de sectie (de roze is alleen de lijn); tekst links, rechts blijft plek voor Michel Wit */
.db-ps16__top{position:relative;color:var(--db-tekst-op-donker);padding:clamp(4rem,7vw,6.25rem) 0 calc(var(--ps16-hel) + 4.5rem)}
.db-ps16__band{position:absolute;inset:0;background:linear-gradient(transparent calc(100% - 12cqi),var(--db-roze) 0);clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - 6.99cqi))}
.db-ps16__band::after{content:"";position:absolute;inset:-2px 0 var(--db-balk);background:var(--ps16-kop-vlak);clip-path:inherit}
.db-ps16__kop{padding-right:calc(19.5rem + 2rem)}
.db-ps16__tag{display:inline-block;margin:0 0 1rem;padding:.4rem .75rem;border-radius:var(--db-radius);background:var(--db-roze);color:var(--db-actie-tekst);font:700 .75rem/1 var(--db-font-kop);letter-spacing:.14em;text-transform:uppercase}
.db-ps16 h2{max-width:14ch;font:700 clamp(2.3rem,1.5rem + 3vw,3.9rem)/1.02 var(--db-font-kop);letter-spacing:-.025em;text-wrap:balance}
.db-ps16__lead{max-width:32rem;margin:1.1rem 0 1.5rem;font-size:1.15rem;line-height:1.5}
.db-ps16__knoppen{position:relative;z-index:3;display:flex;flex-wrap:wrap;gap:.65rem}  /* boven het podium (z-index 2), dat over de knoppenrij schuift: klikbaar op 1440 */
.db-ps16__knop{display:inline-flex;align-items:center;justify-content:center;gap:.7rem;min-height:3.5rem;padding:.85rem 1.45rem;border-radius:var(--db-radius);font:700 1.1rem/1.2 var(--db-font-kop);text-align:center;text-decoration:none}
.db-ps16__knop--offerte{color:var(--db-puurwit);background:var(--offerte);box-shadow:inset 0 0 0 1px var(--db-puurwit)}
.db-ps16__knop--offerte:is(:hover,:focus-visible){background-color:var(--offerte-hover)}
.db-ps16__knop--wa{color:var(--db-puurwit);background:var(--ps16-wa)}
.db-ps16__knop--wa:is(:hover,:focus-visible){background-color:var(--ps16-wa-hover)}
.db-ps16__ico{flex:none;width:1.4rem;height:1.4rem;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.db-ps16__ico--wa{width:1.7rem;height:1.7rem;stroke:none}

/* beeld links, rechts Michel Wit boven de keuzelijst */
.db-ps16__podium{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) 19.5rem;gap:1.25rem;align-items:end;margin-top:calc(var(--ps16-hel) * -1 - 11.5rem)}
.db-ps16__scherm{position:relative;container-type:inline-size;min-width:0}
.db-ps16__rail{position:relative;display:flex;gap:var(--ps16-gap);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;cursor:grab}
.db-ps16__rail::-webkit-scrollbar{display:none;width:0}
.db-ps16__rail:focus-visible{outline-offset:-3px}
.db-ps16__rail.is-sleep{cursor:grabbing;user-select:none}
.db-ps16__rail:is(.is-sleep,.is-glij){scroll-snap-type:none}
.db-ps16__dia{flex:0 0 100%;aspect-ratio:3/2;min-width:0;scroll-snap-align:start;scroll-snap-stop:always}
.db-ps16__fig{position:relative;height:100%}
.db-ps16__bild{position:absolute;inset:0}
.db-ps16__foto{position:absolute;inset:0;width:100%;height:100%;clip-path:inset(var(--ps16-t) 0 0 0 round var(--db-radius));background:var(--db-grijs);user-select:none;-webkit-user-drag:none}
/* zelfde kader voor elke foto: ook de vlakke foto's beginnen op dezelfde hoogte (--ps16-t) en vullen dezelfde breedte en hoogte; alleen de uitsnedes steken erboven uit */
.db-ps16__foto--vlak{inset:var(--ps16-t) 0 0 0;height:calc(100% - var(--ps16-t));clip-path:none;border-radius:var(--db-radius);object-fit:cover}
.db-ps16__rand{inset:0}
.db-ps16__rand{position:absolute;inset:var(--ps16-t) 0 0 0;border:var(--db-rand) solid var(--db-roze);border-radius:var(--db-radius);pointer-events:none}
.db-ps16__uit{position:absolute;top:0;left:0;width:100%;height:auto;pointer-events:none;user-select:none;-webkit-user-drag:none}
.db-ps16__cap{position:absolute;left:1rem;bottom:1rem;display:grid;gap:.25rem;max-width:calc(100% - 10.5rem);padding:.85rem 1.25rem .95rem;border:var(--db-rand) solid var(--db-roze);border-radius:var(--db-radius);background:var(--ps16-kaart)}
.db-ps16__cap b{font:700 clamp(1.3rem,.95rem + 1.2vw,1.75rem)/1.15 var(--db-font-kop);color:var(--db-puurwit)}
.db-ps16__cap span{font-size:clamp(1.05rem,.9rem + .4vw,1.25rem);line-height:1.4;color:var(--db-wit)}
.db-ps16__pijlen{position:absolute;z-index:3;right:1rem;bottom:1rem;display:flex;gap:.5rem}
.db-ps16__pijl{display:grid;place-items:center;width:3.4rem;height:3.4rem;padding:0;border:var(--db-rand) solid var(--db-roze);border-radius:var(--db-radius);background:var(--db-zwart);color:var(--db-tekst-op-donker);cursor:pointer}
.db-ps16__pijl svg{width:1.55rem;height:1.55rem;fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(.1em .1em 0 var(--db-roze))}
.db-ps16__pijl:is(:hover,:focus-visible){color:var(--db-actie-tekst);background:var(--db-roze)}
.db-ps16__pijl:is(:hover,:focus-visible) svg{filter:none}
.db-ps16__pijl[aria-disabled="true"]{opacity:.3;cursor:default;pointer-events:none}

/* Michel Wit staat achter de eerste regel van de lijst: hoofd en romp boven de lijst, de rechte onderrand verdwijnt achter het blok */
.db-ps16__rechts{position:relative;min-width:0}
.db-ps16__persoon{position:relative;z-index:1;height:calc(var(--ps16-mw) * 1.587)}
.db-ps16__uitsnede{position:absolute;right:.4rem;bottom:0;width:var(--ps16-mw);pointer-events:none}
.db-ps16__uitsnede img{width:100%;height:auto}
.db-ps16__zijde{position:absolute;left:0;bottom:calc(var(--ps16-dek) + .6rem);display:grid;gap:.55rem;justify-items:start;max-width:calc(100% - var(--ps16-mw) + .6rem)}
.db-ps16__kies{padding:.4rem .6rem;border-radius:var(--db-radius);background:var(--db-roze);color:var(--db-actie-tekst);font:700 .82rem/1.1 var(--db-font-kop);white-space:nowrap}
.db-ps16__wie{display:grid;padding:.4rem .65rem;border-radius:var(--db-radius);background:var(--db-roze);color:var(--db-actie-tekst);font:400 .78rem/1.25 var(--db-font-kop)}
.db-ps16__wie b{font-size:.95rem;font-weight:700}
.db-ps16__lijst{position:relative;z-index:2;display:grid;gap:.3rem;margin-top:calc(var(--ps16-dek) * -1);background:var(--ps16-dek-vlak,var(--db-zwart))}
.db-ps16__item{display:flex;align-items:center;gap:.8rem;width:100%;min-height:3rem;padding:.25rem .8rem .25rem .25rem;border:var(--db-rand) solid var(--ps16-lijn);border-radius:var(--db-radius);background:var(--ps16-item);color:var(--ps16-item-tekst);font:700 .95rem/1.2 var(--db-font-kop);text-align:left;cursor:pointer}
.db-ps16__mini{flex:none;width:3.9rem;aspect-ratio:3/2;overflow:hidden;border-radius:var(--db-radius)}
.db-ps16__mini img{width:100%;height:100%;object-fit:cover;opacity:.7}
.db-ps16__item:is(:hover,:focus-visible){border-color:var(--db-roze);background:var(--ps16-item-hover)}
.db-ps16__item:is(:hover,:focus-visible) img{opacity:1}
.db-ps16__item[aria-current]{border-color:var(--ps16-actief);background:var(--ps16-actief);color:var(--ps16-actief-tekst)}
.db-ps16__item[aria-current] img{opacity:1}
.db-ps16__voet{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 1.5rem;margin-top:1.5rem}
.db-ps16__hint{font-size:.95rem;line-height:1.4;opacity:.8}
.db-ps16__alle{display:inline-flex;align-items:center;gap:.6rem;min-height:3rem;padding:.6rem 1.15rem;border:var(--db-rand) solid var(--db-tekst-op-donker);border-radius:var(--db-radius);color:var(--db-tekst-op-donker);font:700 1.05rem/1.2 var(--db-font-kop);text-decoration:none}
.db-ps16__alle .db-ps16__ico{filter:drop-shadow(.12em .12em 0 var(--db-roze))}
.db-ps16__alle:is(:hover,:focus-visible){border-color:var(--db-roze);background:var(--db-roze);color:var(--db-actie-tekst)}
.db-ps16__alle:is(:hover,:focus-visible) .db-ps16__ico{filter:none}

/* Vaste podiumhoogte (hoogte van de rechterkolom met acht namen, zoals op de homepage): met minder werken blijft de beeldrij op dezelfde plek onder de roze lijn staan, op elke pagina en in beide tonen. */
@media (min-width:981px){
  .db-ps16__rechts{min-height:calc(var(--ps16-mw) * 1.587 - var(--ps16-dek) + 8 * 3.225rem + 7 * .3rem)}
}
@media (max-width:980px){
  .db-ps16__top{padding-bottom:calc(var(--ps16-hel) + 3.25rem)}
  .db-ps16__kop{padding-right:0}
  .db-ps16__podium{grid-template-columns:minmax(0,1fr);gap:1.25rem;margin-top:calc(var(--ps16-hel) * -1 - 3rem)}
  .db-ps16__persoon{--ps16-mw:10.5rem;display:flex;align-items:flex-end}
  .db-ps16__uitsnede{right:auto;left:.4rem}
  .db-ps16__zijde{left:calc(var(--ps16-mw) + 1rem);max-width:calc(100% - var(--ps16-mw) - 1.5rem)}
  .db-ps16__lijst{display:flex;overflow-x:auto;gap:.5rem;padding:.25rem .25rem .25rem 0;scrollbar-width:none}
  .db-ps16__lijst li{flex:0 0 13.5rem}
  .db-ps16__item{height:100%}
}
@media (max-width:700px){
  .db-ps16__lijst li{flex-basis:11.5rem}
  /* telefoon: onderschrift onder het beeld, pijlen op de hoek van het beeld */
  .db-ps16__dia{aspect-ratio:auto}
  .db-ps16__fig{display:flex;flex-direction:column;height:auto}
  .db-ps16__bild{position:relative;inset:auto;aspect-ratio:3/2}
  .db-ps16__cap{position:static;max-width:none;min-height:7.6rem;margin-top:.5rem;align-content:start}
  .db-ps16__pijlen{top:calc(66.67cqw - 3.5rem);right:.6rem;bottom:auto}
  .db-ps16__pijl{width:2.85rem;height:2.85rem}
  .db-ps16__pijl svg{width:1.3rem;height:1.3rem}
  .db-ps16__voet{flex-direction:column;align-items:flex-start}
}
@media (max-width:560px){
  .db-ps16__knop{flex:1 1 100%}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .db-ps16__knop,.db-ps16__alle,.db-ps16__pijl,.db-ps16__item{transition:transform .2s var(--ps16-ease),background-color .2s var(--ps16-ease),border-color .2s var(--ps16-ease)}
  .db-ps16__knop:is(:hover,:focus-visible),.db-ps16__alle:is(:hover,:focus-visible){transform:translateY(-2px)}
  .db-ps16__pijl:is(:hover,:focus-visible){transform:scale(1.07)}
  .db-ps16__mini img{transition:opacity .25s var(--ps16-ease)}
}

/* ---- Lichte tonen (website-kit RULES 4.26: afwisseling donker/licht langs de pagina). De paginagenerator zet db-ps16--wit (#FFFFFF) of
   db-ps16--licht (#F6F6F6) op de wortel als config.SECTIE_TOON dat vraagt. De zwarte kopband met roze lijn, de fotokaders, de zwarte
   onderschriften en pijlen blijven; wat op het vlak zelf staat wordt donker: keuzelijst (lichte items, actieve zwart, de lijst vult
   met de sectiekleur zodat Michels onderrand erachter verdwijnt), hint, Alle projecten en de focusring. Roze blijft accent. */
.db-ps16--wit{--sectie-achtergrond:var(--db-puurwit);--ps16-item:var(--db-wit);--ps16-item-hover:var(--db-puurwit)}
.db-ps16--licht{--sectie-achtergrond:var(--db-wit);--ps16-item:var(--db-puurwit);--ps16-item-hover:var(--db-puurwit)}
.db-ps16:is(.db-ps16--wit,.db-ps16--licht){
  --ps16-dek-vlak:var(--sectie-achtergrond);--ps16-lijn:color-mix(in srgb,var(--db-zwart) 28%,transparent);--ps16-item-tekst:var(--db-tekst);
  --ps16-actief:var(--db-zwart);--ps16-actief-tekst:var(--db-tekst-op-donker);
  color:var(--db-tekst);
}
.db-ps16:is(.db-ps16--wit,.db-ps16--licht) :is(.db-ps16__lijst,.db-ps16__voet) :focus-visible{outline-color:var(--db-zwart)}
.db-ps16:is(.db-ps16--wit,.db-ps16--licht) .db-ps16__hint{color:var(--db-grijs);opacity:1}
.db-ps16:is(.db-ps16--wit,.db-ps16--licht) .db-ps16__alle{border-color:var(--db-zwart);color:var(--db-zwart)}
.db-ps16:is(.db-ps16--wit,.db-ps16--licht) .db-ps16__alle:is(:hover,:focus-visible){border-color:var(--db-roze);background:var(--db-roze);color:var(--db-actie-tekst)}
.db-ps16:is(.db-ps16--wit,.db-ps16--licht) .db-ps16__mini img{opacity:.85}
/* ---- Toon verloop-om (BRIEF-ACHTERGROND 2026-10-27): verloop omgekeerd, grijs boven en donker onderaan; sluit aan op een buur die grijs eindigt. */
.db-ps16.db-ps16--verloop-om{--sectie-achtergrond:var(--db-gradient-om);--ps16-kop-vlak:var(--db-grijs)}
/* ---- reviews: reviews-v12 ---- */
/* 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.) */

/* ---- Klanten reviews, versie 12 (Draagbalken.nl). Naar section-library reviews-team ("Three review cards with team image"):
   drie reviewkaarten in een rij, de teamfoto overlapt de eerste kaart (de onderrand verdwijnt achter de kaart) en de koppen steken
   boven het kader uit. De Google-score staat in de ratingpil in de kop. Donkere sectie met een schuine band (4 graden) erachter.
   Merkwaarden uit ../_shared/tokens.css (--db-*). */
.db-rev-team{
  --rev12-radius:1rem;                  /* zachtere hoeken dan het site-token (--db-radius, 5px) op verzoek van de gebruiker 2026-10-28: kaarten, ratingpil en roze plaat */
  --rev12-quote:var(--db-roze);         /* kleur van het openingsaanhalingsteken */
  --rt-over:2.4rem;                     /* hoeveel van de plaat en de uitsnede achter de eerste kaart verdwijnt */
  --rt-duo:17.5rem;                       /* breedte van de uitsnede met twee mensen */
  --offerte:#15803D;--offerte-hover:#166534;
  --g-blauw:#4285F4;--g-rood:#EA4335;--g-geel:#FBBC05;--g-groen:#34A853;--g-ster:#FBBC04;--g-grijs:#5F6368;--g-avatar:#9AA0A6;--wa-groen:#25D366;--wa-groen-hover:#1EBE5A;
  --sectie-achtergrond:var(--db-gradient);
  --rt-band:linear-gradient(180deg,var(--db-zwart) 0,var(--db-grijs) 80%);  /* band loopt naar de randkleur van de sectie (grijs onderaan), zodat de onderrand naadloos sluit */
  position:relative;isolation:isolate;overflow:clip;background:var(--sectie-achtergrond);color:var(--db-tekst-op-donker);font-family:var(--db-font-tekst);font-size:1rem;line-height:1.5;
  padding:clamp(2.5rem,5vw,3.5rem) 0 clamp(3rem,5vw,4rem)}
.db-rev-team::before{content:"";position:absolute;z-index:-1;left:-6%;right:-6%;top:38%;bottom:-6%;background:var(--rt-band);transform:skewY(calc(var(--db-helling) * -1));transform-origin:100% 100%;pointer-events:none}
.db-rev-team :focus-visible{outline:calc(2 * var(--db-rand)) solid var(--db-focus);outline-offset:.25rem}
.db-rev-team :where(h2,p,blockquote,figure){margin:0;padding:0}
.db-rev-team__defs{position:absolute;width:0;height:0;overflow:hidden}
.db-rev-team .b{fill:var(--g-blauw)}.db-rev-team .r{fill:var(--g-rood)}.db-rev-team .ge{fill:var(--g-geel)}.db-rev-team .gr{fill:var(--g-groen)}
.db-rev-team__in{width:min(100% - 2rem,75rem);margin:0 auto;display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr) minmax(0,1fr);gap:1.25rem clamp(1rem,2vw,1.5rem);align-items:stretch}
.db-rev-team__kop{grid-column:2 / -1;grid-row:1;align-self:center;min-width:0}
.db-rev-team__tag{display:inline-flex;align-items:center;gap:.55rem;margin-bottom:.8rem;padding:.4rem .75rem .4rem .45rem;border-radius:var(--db-radius);background:var(--db-puurwit);color:var(--db-tekst);font:600 .8rem/1 var(--db-font-kop);letter-spacing:.1em;text-transform:uppercase}
.db-rev-team__tag-g{flex:none;width:1.25rem;height:1.25rem}
.db-rev-team h2{font:700 clamp(2.1rem,1.4rem + 2.4vw,3.2rem)/1.08 var(--db-font-kop);letter-spacing:-.025em;text-wrap:balance}
.db-rev-team__lead{margin-top:.7rem;font-size:1.08rem;line-height:1.5}
.db-rev-team__score{display:inline-flex;align-items:center;flex-wrap:wrap;gap:.3rem .7rem;min-height:2.75rem;margin-top:.9rem;padding:.35rem 1rem;border:var(--db-rand) solid var(--db-roze);border-radius:var(--rev12-radius);background:var(--db-puurwit);color:var(--db-tekst);text-decoration:none;font:600 .95rem/1.2 var(--db-font-kop)}
.db-rev-team__cijfer{font:700 1.35rem/1 var(--db-font-kop);letter-spacing:-.01em}
.db-rev-team__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:-1px}
.db-rev-team__sterren-groot{width:5.5rem;height:1.1rem}
.db-rev-team__sterren-groot .leeg use{fill:var(--g-avatar);opacity:.55}
.db-rev-team__score svg:last-child{flex:none;width:1rem;height:1rem;fill:currentColor}

/* uitsnede met twee mensen (Michel en Pascal, hoofd tot heup) op een roze plaat; het hoofd steekt boven de plaat uit, de snijrand zit achter de eerste kaart */
.db-rev-team__foto{position:relative;z-index:1;grid-column:1;grid-row:1;align-self:end;min-width:0;display:flex;justify-content:center;margin-bottom:calc(var(--rt-over) * -1)}
.db-rev-team__foto img{position:relative;display:block;width:var(--rt-duo);max-width:100%;height:auto}

/* reviewkaarten: sterren en datum, tekst, onderaan de naam met avatar en bron */
.db-rev-team__kaarten{display:contents;list-style:none}
.db-rev-team__kaart{position:relative;z-index:2;grid-row:2;min-width:0;display:flex;flex-direction:column;gap:.7rem;padding:1.15rem 1.25rem 1rem;border:var(--db-rand) solid var(--db-roze);border-radius:var(--rev12-radius);background:var(--db-puurwit);color:var(--db-tekst);box-shadow:var(--db-schaduw)}
.db-rev-team__kaart:nth-child(1){grid-column:1;--rq-top:calc(1.15rem + var(--rt-over) * .5 - .55rem);padding-top:calc(1.15rem + var(--rt-over) * .5)}
.db-rev-team__kaart:nth-child(2){grid-column:2}
.db-rev-team__kaart:nth-child(3){grid-column:3}
.db-rev-team__quote{position:absolute;top:var(--rq-top,.6rem);left:1.1rem;color:var(--rev12-quote);font:700 3rem/1 var(--db-font-kop);pointer-events:none;user-select:none}
.db-rev-team__rij2{display:flex;align-items:center;gap:.6rem;padding-left:2.4rem;color:var(--g-grijs);font-size:.88rem}
.db-rev-team__rij2 span:empty{display:none}
.db-rev-team__sterren{width:5.5rem;height:1.1rem}
.db-rev-team__sterren use,.db-rev-team__sterren-groot .vol use{fill:var(--g-ster)}
.db-rev-team__tekst{flex:1}
.db-rev-team__tekst p{font:400 .95rem/1.5 var(--db-font-tekst)}
.db-rev-team__kaartkop{display:flex;align-items:center;gap:.75rem;padding-top:.75rem;border-top:1px solid color-mix(in srgb,currentColor 18%,transparent)}
.db-rev-team__av{flex:none;display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:50%;background:var(--g-avatar);color:var(--db-puurwit);font:600 1rem/1 var(--db-font-kop);letter-spacing:.02em}
.db-rev-team__naam{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem;line-height:1.25}
.db-rev-team__naam b{font:600 1rem/1.25 var(--db-font-kop)}
.db-rev-team__naam small{color:var(--g-grijs);font-size:.85rem}
.db-rev-team__glogo{flex:none;width:1.5rem;height:1.5rem}

/* knoppen: offerte groen, bellen wit met zwarte tekst en roze rand, WhatsApp in het eigen merkgroen */
.db-rev-team__acties{grid-column:1 / -1;grid-row:3;display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;margin-top:.5rem}
.db-rev-team__offerte,.db-rev-team__bel,.db-rev-team__wa{display:inline-flex;align-items:center;gap:.55rem;min-height:2.9rem;padding:.7rem 1.25rem;border-radius:var(--db-radius);text-decoration:none;font:600 .98rem/1.2 var(--db-font-kop)}
.db-rev-team__offerte{background:var(--offerte);color:var(--db-puurwit)}
.db-rev-team__offerte:is(:hover,:focus-visible){background:var(--offerte-hover)}
.db-rev-team__offerte svg,.db-rev-team__bel svg{width:1.05rem;height:1.05rem;fill:currentColor}
.db-rev-team__bel{background:var(--db-puurwit);color:var(--db-zwart);border:var(--db-rand) solid var(--db-roze);font-weight:600}
.db-rev-team__wa{padding-left:.85rem;background:var(--wa-groen);color:var(--db-puurwit)}
.db-rev-team__wa:is(:hover,:focus-visible){background:var(--wa-groen-hover)}
.db-rev-team__wa .wa{width:1.5rem;height:1.5rem;fill:var(--db-puurwit)}

/* hover (pattern): kaart 4px omhoog, ratingpil en knoppen 3px omhoog; de teamfoto blijft staan */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .db-rev-team__kaart{transition:transform .25s ease}
  .db-rev-team__kaart:hover{transform:translateY(-4px)}
  .db-rev-team__score,.db-rev-team__offerte,.db-rev-team__bel,.db-rev-team__wa{transition:transform .26s ease,background-color .2s ease}
  .db-rev-team__score:is(:hover,:focus-visible),.db-rev-team__offerte:is(:hover,:focus-visible),.db-rev-team__bel:is(:hover,:focus-visible),.db-rev-team__wa:is(:hover,:focus-visible){transform:translateY(-2px)}
}

@media (max-width:999px){
  .db-rev-team::before{top:46%}
  .db-rev-team__in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .db-rev-team__kop{grid-column:1;grid-row:1}
  .db-rev-team__foto{grid-column:2;grid-row:1;align-self:end;--rt-duo:min(100%,17rem)}
  .db-rev-team__kaart:nth-child(1){grid-column:1 / -1;grid-row:2}
  .db-rev-team__kaart:nth-child(2){grid-column:1;grid-row:3}
  .db-rev-team__kaart:nth-child(3){grid-column:2;grid-row:3}
  .db-rev-team__acties{grid-row:4}
}
@media (max-width:560px){
  .db-rev-team__in{grid-template-columns:minmax(0,1fr)}
  .db-rev-team__kop{grid-column:1;grid-row:1}
  .db-rev-team__foto{grid-column:1;grid-row:2;align-self:start;margin-top:.5rem;--rt-duo:11.5rem}
  .db-rev-team__kaart:nth-child(1){grid-row:3}
  .db-rev-team__kaart:nth-child(2){grid-column:1;grid-row:4}
  .db-rev-team__kaart:nth-child(3){grid-column:1;grid-row:5}
  .db-rev-team__acties{grid-row:6}
  .db-rev-team__acties>*{flex:1 1 100%;justify-content:center}
  .db-rev-team__score svg:last-child{display:none}
  .db-rev-team__lead{font-size:1rem}
}
/* toon verloop-om (BRIEF-ACHTERGROND): grijs boven, donker onder; de band erachter draait mee */
.db-rev-team.db-rev-team--verloop-om{--sectie-achtergrond:var(--db-gradient-om);--rt-band:linear-gradient(180deg,var(--db-grijs) 0,var(--db-zwart) 80%)}
/* ---- 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%)}