/* ---- 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}
}
/* ---- tekst-kort-1: tekst-kort-v1 ---- */
/* toon: verloop (eigen achtergrond van deze sectie; varianten via config.SECTIE_TOON en de klasse hieronder) */

/* ---- Korte tekst v1 (Draagbalken.nl): een bescheiden H2 en een of twee alinea's in de volle sitecontainer. Geen foto, geen knop,
   geen nummering. De sectie staat twee keer op een pagina (tekst-kort-1 en tekst-kort-2), daarom geen id's in de markup. */
.db-tk{--sectie-achtergrond:var(--db-gradient);position:relative;padding:clamp(2.5rem,5vw,4rem) 0;background:var(--sectie-achtergrond);color:var(--db-tekst-op-donker);font-family:var(--db-font-tekst)}
.db-tk.db-tk--verloop-om{--sectie-achtergrond:var(--db-gradient-om)}
.db-tk :focus-visible{outline:calc(2 * var(--db-rand)) solid var(--db-focus);outline-offset:3px}
.db-tk__wrap{width:min(100% - 2rem,75rem);margin:0 auto;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(2rem,5vw,4.5rem);align-items:start}
.db-tk h2{margin:0;font:700 clamp(1.4rem,1.1rem + 1vw,1.8rem)/1.22 var(--db-font-kop);letter-spacing:-.01em;text-wrap:balance;overflow-wrap:normal;hyphens:manual}
.db-tk__tekst p{margin:0 0 1.05rem;font-size:1.0625rem;line-height:1.72}
.db-tk__tekst p:last-child{margin-bottom:0}
.db-tk__tekst a{color:var(--db-roze);font-weight:700;text-decoration:none}
@media (max-width: 900px){
  .db-tk__wrap{grid-template-columns:minmax(0,1fr);row-gap:.9rem}
}
/* ---- uitleg-tekst-foto: uitleg-tekst-foto-v7 ---- */
/* 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-u7{--u7-uit:0rem;--offerte:#15803D;--offerte-hover:#166534;--u7-lijn:var(--db-rand) solid var(--db-roze);--u7-wa:#25D366;--u7-wa-hover:#1EBE5A;--u7-breuk:linear-gradient(180deg,var(--db-zwart) 0,var(--db-grijs) 80%);position:relative;overflow:clip;background:var(--db-gradient);color:var(--db-tekst-op-donker);font-family:var(--db-font-tekst);padding:clamp(4.5rem,8vw,6.5rem) 1rem clamp(2.5rem,5vw,4.5rem)}
.db-u7::before{content:"";position:absolute;z-index:0;left:-6%;right:-6%;top:35%;bottom:-6%;background:var(--u7-breuk);transform:skewY(calc(var(--db-helling) * -1));transform-origin:100% 100%;pointer-events:none}  /* schuine achtergrondbreuk (gebruiker 2026-10-28), recept reviews-v6 */
.db-u7 :focus-visible{outline-color:var(--db-focus)}
.db-u7__inner{position:relative;z-index:1;max-width:75rem;margin:0 auto;display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(1.5rem,4vw,4rem);align-items:center}
@media (min-width:1000px){.db-u7{--u7-uit:2.25rem;padding-inline:calc(var(--u7-uit) + 1rem)}.db-u7__inner{grid-template-columns:.8fr 1.2fr}}  /* kaart steekt --u7-uit rechts voorbij de foto (gebruiker 2026-10-28); zijpadding houdt hem binnen het scherm */  /* wit blok en foto 9% breder (gebruiker 2026-10-28) */
.db-u7__tekst{min-width:0;container-type:inline-size}  /* cqi voor de kop: het langste woord past altijd in de kolom */
.db-u7__tag{display:inline-block;margin:0 0 1rem;padding:.3rem .7rem;background:var(--db-roze);color:var(--db-zwart);border-radius:var(--db-radius);font:700 .78rem/1.2 var(--db-font-kop);letter-spacing:.06em;text-transform:uppercase}
.db-u7 h2{margin:0 0 1rem;font:700 clamp(1.9rem,3.4vw,2.8rem)/1.12 var(--db-font-kop);font-size:min(clamp(1.9rem,3.4vw,2.8rem),8.3cqi);color:var(--db-puurwit);text-wrap:balance;overflow-wrap:normal;hyphens:manual}  /* nooit midden in een woord breken: "constructieberekening?" is 11,9 em breed, dus de kop wordt nooit groter dan 8,3 % van de kolombreedte */
.db-u7__lead{margin:0 0 1rem;font-size:1.08rem;line-height:1.6;max-width:34rem}
.db-u7__meta{margin:0 0 1rem;font-size:.92rem}
.db-u7__lead:nth-of-type(3){padding-left:.9rem;border-left:var(--db-balk-links) solid var(--db-roze)}
.db-u7__acties{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}
.db-u7__btn{display:inline-flex;align-items:center;gap:.6rem;min-height:3rem;padding:.7rem 1.3rem;border-radius:var(--db-radius);font:700 .95rem/1.2 var(--db-font-kop);text-decoration:none}
.db-u7__btn svg{width:1.15rem;height:1.15rem;fill:currentColor;flex:none}
.db-u7__btn--prim{background:var(--offerte);color:var(--db-puurwit)}  /* offerteknoppen groen (gebruiker 2026-10-27) */
.db-u7__btn--prim:is(:hover,:focus-visible){background:var(--offerte-hover)}
.db-u7__btn--wa{background:var(--u7-wa);color:var(--db-puurwit)}  /* WhatsApp-stijl (gebruiker 2026-10-27) */
.db-u7__btn--wa:is(:hover,:focus-visible){background:var(--u7-wa-hover)}
.db-u7__rechts{position:relative;min-width:0;padding-top:0}
.db-u7__foto{--stijg:2rem;--zoom:1.12;--sw:calc(max(100cqw,2 * (100cqh + var(--stijg))) * var(--zoom));--sh:calc(var(--sw) / 2);position:relative;margin:0;height:17rem;container-type:size;border:var(--u7-lijn);border-radius:var(--db-radius);background:var(--db-grijs)}
/* uit-de-rand-effect (recept werkgebied-v6): foto en uitgesneden stuk delen een stapel; alleen het stuk mag boven het kader uit, het kader houdt zijn maat */
.db-u7__klem,.db-u7__rijs{position:absolute;inset:0;margin:0}
.db-u7__klem{overflow:clip;border-radius:calc(var(--db-radius) - var(--db-rand))}
.db-u7__rijs{z-index:2;clip-path:inset(-3rem 0 0 0);pointer-events:none}
.db-u7__stapel{position:absolute;width:var(--sw);height:var(--sh);left:calc((var(--sw) - 100cqw) * -.5);top:calc(var(--stijg) * -1)}
.db-u7__stapel img{position:absolute;display:block;max-width:none}
.db-u7__klem img{left:0;top:0;width:100%;height:100%;object-fit:cover}
.db-u7__rijs img{left:var(--u7-pl,60%);top:0;width:24.375%;height:37.5%}
.db-u7__kaart{position:relative;z-index:3;margin:-5.5rem calc(var(--u7-uit) * -1) 0 2.5rem;background:var(--db-wit);color:var(--db-zwart);border-radius:var(--db-radius);border-bottom:var(--db-balk) solid var(--db-roze);box-shadow:var(--db-schaduw);padding:1.25rem 1.5rem 1.5rem}
.db-u7__tabs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(7.5rem,1fr);gap:.5rem;margin:0;padding:3px 3px .7rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.db-u7__tabs::-webkit-scrollbar{display:none}  /* geen balk zichtbaar; aanraken en toetsenbord blijven schuiven */
.db-u7__tabs[hidden]{display:none}
.db-u7__tabs button{position:relative;scroll-snap-align:start;background:var(--db-puurwit);color:var(--db-zwart);display:flex;align-items:center;justify-content:space-between;gap:.5rem;min-height:2.75rem;padding:.45rem .8rem;border:var(--db-rand) solid var(--db-roze);border-radius:var(--db-radius);font:700 .88rem/1.2 var(--db-font-kop);text-align:left;cursor:pointer}
.db-u7__tabs button::before{content:"";order:2;flex:none;width:.45rem;height:.45rem;margin-right:.15rem;border:solid var(--db-roze);border-width:0 2px 2px 0;transform:rotate(-45deg)}  /* pijltje rechts: dit is een knop */
.db-u7__tabs button[aria-selected=false]:hover{background:var(--db-vlak)}
.db-u7__tabs button:focus-visible{outline:calc(2 * var(--db-rand)) solid var(--db-focus);outline-offset:3px}
.db-u7__panelen{display:grid;gap:1.25rem;border-top:var(--db-balk) solid var(--db-roze);padding-top:1rem}  /* roze balk boven het paneel; het wijzertje van het gekozen tabje komt erin uit */
.db-u7__paneel{min-width:0}
.is-tabs .db-u7__panelen{gap:0}
.is-tabs .db-u7__paneel{grid-area:1/1;visibility:hidden}
.is-tabs .db-u7__paneel.is-open{visibility:visible}
.db-u7__tabs [aria-selected=true]{background:var(--db-roze);color:var(--db-puurwit)}
.db-u7__tabs [aria-selected=true]::before{border-color:var(--db-puurwit);transform:rotate(45deg)}
.db-u7__tabs [aria-selected=true]::after{content:"";position:absolute;left:50%;top:100%;width:.75rem;height:.9rem;margin-left:-.375rem;background:var(--db-roze);clip-path:polygon(0 0,100% 0,50% 100%)}  /* driehoekig wijzertje, punt omlaag de roze balk van het paneel in (gebruiker 2026-10-28) */
.db-u7__chip{display:inline-block;margin:0 0 .6rem;padding:.25rem .65rem;background:var(--db-roze);color:var(--db-puurwit);border-radius:var(--db-radius);font:700 .78rem/1.2 var(--db-font-kop);letter-spacing:.04em}
.db-u7__paneel a{color:var(--db-roze);font-weight:700;text-decoration:none}
.db-u7__paneel h3{margin:0 0 .6rem;font:700 1.12rem/1.3 var(--db-font-kop)}
.db-u7__paneel p{margin:0 0 .6rem;font-size:1rem;line-height:1.55}
.db-u7__paneel p:last-child{margin-bottom:0}
.db-u7__paneel ul{margin:0 0 .6rem;padding:0;list-style:none;display:grid;gap:.45rem}
.db-u7__paneel li{position:relative;padding-left:1.5rem;font-size:1rem;line-height:1.45}
.db-u7__paneel li::before{content:"";position:absolute;left:0;top:.5em;width:.7rem;height:.7rem;background:var(--db-roze);border-radius:var(--db-radius)}
@media (max-width:980px){
  .db-u7__inner{grid-template-columns:1fr}
  .db-u7__rechts{padding-top:.75rem}  /* een kolom: het stuk steekt 2rem boven het kader uit en raakte de WhatsApp-knop erboven (2026-10-29) */
  .db-u7__foto{height:15rem}
}
@media (max-width:640px){
  .db-u7{padding-top:2.75rem}
  .db-u7__foto{height:11rem}
  .db-u7__kaart{margin:-3.5rem 0 0 0;padding:1.1rem 1rem 1.25rem}
  .db-u7__btn{width:100%;justify-content:center}
  .db-u7 h2{font-size:min(clamp(1.65rem,7.2vw,1.9rem),8.3cqi)}
  .db-u7__tabs{grid-auto-columns:minmax(9.5rem,1fr)}
}
@media (min-width:761px){.db-u7__tabs{grid-auto-columns:minmax(min-content,1fr);gap:.4rem}}  /* breed scherm: alle vier de tabs passen, dus geen horizontaal schuiven */
@media (hover:hover) and (prefers-reduced-motion:no-preference){.db-u7__btn,.db-u7__tabs button{transition:transform .2s ease}.db-u7__btn:is(:hover,:focus-visible){transform:translateY(-2px)}.db-u7__tabs button[aria-selected=false]:hover{transform:translateY(-2px)}}
/* ---- Toon verloop-om (BRIEF-ACHTERGROND 2026-10-27): verloop omgekeerd, grijs boven en donker onderaan; sluit aan op een buur die grijs eindigt. */
.db-u7.db-u7--verloop-om{background:var(--db-gradient-om);--u7-breuk:linear-gradient(180deg,var(--db-grijs) 0,var(--db-zwart) 80%)}

/* ---- Toon licht (BRIEF 2026-10-28, build-waarschuwing): lichte achtergrond met donkere tekst. De witte kaart, de roze tags,
   de foto en de knoppen blijven zoals ze zijn. */
.db-u7.db-u7--licht{background:var(--db-wit);color:var(--db-zwart)}
.db-u7.db-u7--licht h2{color:var(--db-zwart)}
/* ---- tekst-kort-2: tekst-kort-v1 ---- */
/* toon: verloop (eigen achtergrond van deze sectie; varianten via config.SECTIE_TOON en de klasse hieronder) */

/* ---- Korte tekst v1 (Draagbalken.nl): een bescheiden H2 en een of twee alinea's in de volle sitecontainer. Geen foto, geen knop,
   geen nummering. De sectie staat twee keer op een pagina (tekst-kort-1 en tekst-kort-2), daarom geen id's in de markup. */
.db-tk{--sectie-achtergrond:var(--db-gradient);position:relative;padding:clamp(2.5rem,5vw,4rem) 0;background:var(--sectie-achtergrond);color:var(--db-tekst-op-donker);font-family:var(--db-font-tekst)}
.db-tk.db-tk--verloop-om{--sectie-achtergrond:var(--db-gradient-om)}
.db-tk :focus-visible{outline:calc(2 * var(--db-rand)) solid var(--db-focus);outline-offset:3px}
.db-tk__wrap{width:min(100% - 2rem,75rem);margin:0 auto;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(2rem,5vw,4.5rem);align-items:start}
.db-tk h2{margin:0;font:700 clamp(1.4rem,1.1rem + 1vw,1.8rem)/1.22 var(--db-font-kop);letter-spacing:-.01em;text-wrap:balance;overflow-wrap:normal;hyphens:manual}
.db-tk__tekst p{margin:0 0 1.05rem;font-size:1.0625rem;line-height:1.72}
.db-tk__tekst p:last-child{margin-bottom:0}
.db-tk__tekst a{color:var(--db-roze);font-weight:700;text-decoration:none}
@media (max-width: 900px){
  .db-tk__wrap{grid-template-columns:minmax(0,1fr);row-gap:.9rem}
}
/* ---- uitleg-opties: uitleg-opties-v6 ---- */
/* ---- Opties uitgelegd, versie 6: opbouw van v1 (service-story-tabs), nu met duidelijke keuzeknoppen (vakje met bolletje,
   zwarte rand en schaduwrand, gekozen knop roze met vinkje), een foto die met de keuze wisselt (alle foto's op dezelfde plek,
   dezelfde hoogte), een bel-knop met telefoonicoon naast de offerteknop en geen "Of". Merkwaarden uit ../_shared/tokens.css. */
/* toon: verloop (eigen achtergrond van deze sectie; varianten --licht onderaan) */
.db-uo6{
  --uo-snede:rgb(var(--db-zwart-rgb) / .35);   /* schaduw van de uitsnede */
  --uo-hover:rgb(255 255 255 / .6);--uo-over:4.5rem;--uo-pop:3rem;                          /* hoeveel de kaart over de foto schuift */
  position:relative;overflow:clip;--uo-breuk:linear-gradient(180deg,var(--db-zwart) 0,var(--db-grijs) 80%);
  padding:clamp(3.5rem,7vw,6rem) 0 clamp(3rem,6vw,5rem);
  --sectie-achtergrond:var(--db-gradient);--offerte:#15803D;--offerte-hover:#166534;background:var(--sectie-achtergrond);color:var(--db-tekst-op-donker);font-family:var(--db-font-tekst);
}
.db-uo6::before{content:"";position:absolute;z-index:0;left:-6%;right:-6%;top:35%;bottom:-6%;background:var(--uo-breuk);transform:skewY(calc(var(--db-helling) * -1));transform-origin:100% 100%;pointer-events:none}  /* schuine achtergrondbreuk (gebruiker 2026-10-28), recept reviews-v6 */
.db-uo6__inner{position:relative;z-index:1;width:min(100% - 2rem,75rem);margin:0 auto;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,4.5vw,4.5rem);align-items:center}
.db-uo6__copy{min-width:0}

.db-uo6 :focus-visible{outline:calc(2 * var(--db-rand)) solid var(--db-focus);outline-offset:4px}
.db-uo6__tag{display:inline-block;margin:0 0 1.2rem;padding:.45rem .75rem;border-radius:var(--db-radius);background:var(--db-roze);color:var(--db-puurwit);font:700 .78rem/1 var(--db-font-kop);letter-spacing:.12em;text-transform:uppercase}
.db-uo6 h2{margin:0;max-width:15ch;color:var(--db-wit);font:700 clamp(2rem,1.2rem + 2.3vw,3.1rem)/1.06 var(--db-font-kop);letter-spacing:-.015em;text-wrap:balance}

.db-uo6__lead{margin:1.1rem 0 0;max-width:34rem;color:var(--db-puurwit);font-size:1.1rem;line-height:1.6}
.db-uo6__intro{margin:.9rem 0 0;max-width:34rem;color:var(--db-wit);font-size:1rem;line-height:1.62}
.db-uo6__factoren{list-style:none;margin:1.3rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.db-uo6__factoren li{padding:.4rem .8rem;border:var(--db-rand) solid var(--db-roze);border-radius:var(--db-radius);background:var(--db-roze);color:var(--db-puurwit);font:600 .85rem/1.2 var(--db-font-kop)}

/* contact: offerte (roze, hoofdactie) en bellen (witte knop met telefoonicoon) naast elkaar */
.db-uo6__acties{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.7rem}
.db-uo6__btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:3.25rem;padding:.8rem 1.35rem;border-radius:var(--db-radius);font:700 .95rem/1.2 var(--db-font-kop);letter-spacing:.01em;text-decoration:none;cursor:pointer}
.db-uo6__btn svg{width:1.15rem;height:1.15rem;flex:none}
.db-uo6__btn--prim{background:var(--offerte);color:var(--db-puurwit);box-shadow:var(--db-schaduw)}
.db-uo6__btn--prim svg{fill:currentColor}
.db-uo6__btn--prim:is(:hover,:focus-visible){background:var(--offerte-hover)}
.db-uo6__btn--tel{background:var(--db-puurwit);color:var(--db-zwart);box-shadow:var(--db-schaduw)}

/* ---- beeld: foto's op een plek, de gekozen ligt zichtbaar, de rest verborgen */
.db-uo6__visual{min-width:0}
.db-uo6__stage{position:relative}
.db-uo6__blok{position:absolute;z-index:0;top:-1.25rem;right:-1.25rem;width:60%;height:78%;border-radius:var(--db-radius);background:var(--db-roze);transform:rotate(var(--db-helling))}
.db-uo6__fotos{position:relative;z-index:1;aspect-ratio:16 / 9.5;border:var(--db-rand) solid var(--db-roze);border-radius:var(--db-radius);background:var(--db-grijs);box-shadow:var(--db-schaduw)}
.db-uo6__foto{position:absolute;inset:calc(var(--uo-pop) * -1) 0 0 0;margin:0;opacity:0;visibility:hidden}
.db-uo6__basis,.db-uo6__uit{position:absolute;inset:0;pointer-events:none}
.db-uo6__basis{clip-path:inset(var(--uo-pop) 0 0 0 round var(--db-radius))}
.db-uo6__uit{z-index:2;clip-path:inset(-30rem 0 0 0)}
.db-uo6__cv{position:absolute;bottom:0;left:50%;translate:-50% 0;height:calc(var(--k,1) * 100%);aspect-ratio:var(--ar)}
.db-uo6__cv img{display:block;width:100%;height:100%;object-fit:cover}
.db-uo6__foto.is-active{opacity:1;visibility:visible}
/* uitsnede: hoofd boven de fotorand, voeten achter de kaart (snede 2rem onder de bovenrand van de kaart) */
.db-uo6__cutout{position:absolute;z-index:2;top:-3rem;right:4%;height:calc(100% + 3rem - var(--uo-over) + 2rem);pointer-events:none;filter:drop-shadow(8px 10px 12px var(--uo-snede))}
.db-uo6__cutout img{height:100%;width:auto;max-width:none}
.db-uo6__kaart{position:relative;z-index:3;margin:calc(-1 * var(--uo-over)) clamp(.75rem,2vw,1.75rem) 0;padding:1.25rem 1.5rem 1.5rem;border-radius:var(--db-radius);background:var(--db-puurwit);color:var(--db-tekst);box-shadow:inset 0 calc(var(--db-balk) * -1) 0 var(--db-roze),var(--db-schaduw)}
.db-uo6__kaart :focus-visible{outline-color:var(--db-zwart)}
.db-uo6__label{display:block;margin:0 0 .85rem;color:var(--db-tekst);font:700 .8rem/1.35 var(--db-font-kop);letter-spacing:.1em;text-transform:uppercase}
.db-uo6__label span{display:block;margin-top:.15rem;color:var(--db-tekst-zacht);font-size:.82rem;font-weight:500;letter-spacing:.02em;text-transform:none}
.db-uo6__tabs{display:none}

/* keuzeknop: wit vlak met roze rand en pijltje rechts; hover = grijs vlak; gekozen = roze met witte tekst en verbonden met het paneel */
.db-uo6__tab{position:relative;display:flex;align-items:center;justify-content:space-between;gap:.7rem;width:100%;min-height:3.25rem;padding:.55rem .9rem;border:var(--db-rand) solid var(--db-roze);border-radius:var(--db-radius);background:var(--db-puurwit);color:var(--db-tekst);font:700 .95rem/1.2 var(--db-font-kop);text-align:left;cursor:pointer}
.db-uo6__dot{display:none}
.db-uo6__pijl{flex:none;width:.6rem;height:.6rem;margin-right:.2rem;border:solid var(--db-roze);border-width:0 2px 2px 0;transform:rotate(-45deg)}
.db-uo6__tab:hover{background:var(--db-vlak)}
.db-uo6__tab[aria-selected="true"]{background:var(--db-roze);color:var(--db-puurwit)}
.db-uo6__tab[aria-selected="true"] .db-uo6__pijl{border-color:var(--db-puurwit);transform:rotate(45deg)}
/* paneel: roze kader met balk bovenaan en een roze chip met de naam van de gekozen knop */
.db-uo6__chip{display:none}
.db-uo6__kaart.is-ready .db-uo6__paneel{padding:1rem 1rem 1.1rem;border:var(--db-rand) solid var(--db-roze);border-top:var(--db-balk) solid var(--db-roze);border-radius:var(--db-radius)}
.db-uo6__kaart.is-ready .db-uo6__chip{display:inline-block;margin:0 0 .6rem;padding:.35rem .65rem;border-radius:var(--db-radius);background:var(--db-roze);color:var(--db-puurwit);font:700 .8rem/1 var(--db-font-kop);letter-spacing:.04em}
.db-uo6__paneel+.db-uo6__paneel{margin-top:1.1rem}
.db-uo6__h3{margin:0 0 .35rem;color:var(--db-tekst);font:700 1.15rem/1.3 var(--db-font-kop)}
.db-uo6__kenmerk{margin:0 0 .6rem;color:var(--db-tekst-zacht);font:600 .85rem/1.4 var(--db-font-kop)}
.db-uo6__tekst{margin:0;font-size:.95rem;line-height:1.6}
.db-uo6__kaart.is-ready .db-uo6__tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem;margin-bottom:1.3rem;padding-bottom:3px}
.db-uo6__kaart.is-ready .db-uo6__panelen{display:grid}
.db-uo6__kaart.is-ready .db-uo6__paneel{grid-area:1 / 1;margin:0;visibility:hidden;scroll-margin-top:1rem}
.db-uo6__kaart.is-ready .db-uo6__paneel.is-active{visibility:visible}
.db-uo6__paneel:focus-visible{outline-offset:6px}

/* hover:start */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .db-uo6__btn{transition:transform .22s ease}
  .db-uo6__btn:is(:hover,:focus-visible){transform:translateY(-2px)}
  .db-uo6__btn--prim svg{transition:transform .2s ease}
  .db-uo6__btn--prim:is(:hover,:focus-visible) svg{transform:translateX(4px)}
  .db-uo6__tab{transition:transform .2s ease}
  .db-uo6__tab:is(:hover,:focus-visible){transform:translateY(-2px);box-shadow:var(--db-schaduw)}
  .db-uo6__foto{transition:opacity .35s ease,visibility .35s}
}
/* hover:end */

@media (max-width:900px){
  .db-uo6__inner{grid-template-columns:minmax(0,1fr);gap:3.25rem}
  .db-uo6__visual{max-width:46rem;padding-top:calc(var(--uo-pop) + 1rem)}
  .db-uo6__cutout{right:2%}
}
@media (max-width:560px){
  .db-uo6{--uo-over:3rem}
  .db-uo6__blok{top:-.75rem;right:-.6rem}
  .db-uo6__cutout{top:-2.2rem;right:0;height:calc(100% + 2.2rem - var(--uo-over) + 1.25rem)}
  .db-uo6__kaart{margin-inline:.4rem;padding:1.1rem 1rem 1.3rem}
  .db-uo6__acties{flex-direction:column;align-items:stretch}
  .db-uo6__btn{width:100%}
  .db-uo6__tab{padding-inline:.7rem;font-size:.9rem;min-height:3rem;overflow-wrap:anywhere;hyphens:auto}
  .db-uo6__kaart.is-ready .db-uo6__tabs{grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible}
}
/* zonder foto's (geen_foto op alle opties, 2026-11-04): de vuller haalt elke figure weg; dan vervalt het fotovlak met blok en
   uitsnede en staat de kaart los in de kolom, zonder grijs leeg vak */
.db-uo6__stage:not(:has(.db-uo6__foto)){display:none}
.db-uo6__visual:not(:has(.db-uo6__foto)) .db-uo6__kaart{margin-top:0}
@media (max-width:900px){.db-uo6__visual:not(:has(.db-uo6__foto)){padding-top:0}}

/* ---- Tonen: --licht (#F6F6F6). Alleen achtergrond en wat leesbaarheid daarop vraagt. */
.db-uo6.db-uo6--licht{--sectie-achtergrond:var(--db-wit);color:var(--db-tekst)}
.db-uo6--licht h2,.db-uo6--licht .db-uo6__lead,.db-uo6--licht .db-uo6__intro,.db-uo6--licht .db-uo6__factoren li{color:var(--db-tekst)}
.db-uo6--licht .db-uo6__btn--tel{background:var(--db-zwart);color:var(--db-puurwit)}
/* ---- Toon verloop-om (BRIEF-ACHTERGROND 2026-10-27): verloop omgekeerd, grijs boven en donker onderaan; sluit aan op een buur die grijs eindigt. */
.db-uo6.db-uo6--verloop-om{--sectie-achtergrond:var(--db-gradient-om);--uo-breuk:linear-gradient(180deg,var(--db-grijs) 0,var(--db-zwart) 80%)}
/* ---- tekst-kort-3: tekst-kort-v1 ---- */
/* toon: verloop (eigen achtergrond van deze sectie; varianten via config.SECTIE_TOON en de klasse hieronder) */

/* ---- Korte tekst v1 (Draagbalken.nl): een bescheiden H2 en een of twee alinea's in de volle sitecontainer. Geen foto, geen knop,
   geen nummering. De sectie staat twee keer op een pagina (tekst-kort-1 en tekst-kort-2), daarom geen id's in de markup. */
.db-tk{--sectie-achtergrond:var(--db-gradient);position:relative;padding:clamp(2.5rem,5vw,4rem) 0;background:var(--sectie-achtergrond);color:var(--db-tekst-op-donker);font-family:var(--db-font-tekst)}
.db-tk.db-tk--verloop-om{--sectie-achtergrond:var(--db-gradient-om)}
.db-tk :focus-visible{outline:calc(2 * var(--db-rand)) solid var(--db-focus);outline-offset:3px}
.db-tk__wrap{width:min(100% - 2rem,75rem);margin:0 auto;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(2rem,5vw,4.5rem);align-items:start}
.db-tk h2{margin:0;font:700 clamp(1.4rem,1.1rem + 1vw,1.8rem)/1.22 var(--db-font-kop);letter-spacing:-.01em;text-wrap:balance;overflow-wrap:normal;hyphens:manual}
.db-tk__tekst p{margin:0 0 1.05rem;font-size:1.0625rem;line-height:1.72}
.db-tk__tekst p:last-child{margin-bottom:0}
.db-tk__tekst a{color:var(--db-roze);font-weight:700;text-decoration:none}
@media (max-width: 900px){
  .db-tk__wrap{grid-template-columns:minmax(0,1fr);row-gap:.9rem}
}
/* ---- werkwijze-stappen: werkwijze-stappen-v6 ---- */
/* ---- Werkwijze stappen, versie 6 (Draagbalken.nl). Opbouw van v2 (lijst met stappen links, donker podium rechts waaruit de
   foto breekt), nu met echte keuzeknoppen (tabs): elke stap is een knop en toont zijn eigen foto. Donkere sectie, lichte
   stapkaarten, gekozen stap wit met zwarte balk, het blok onder de foto draagt het roze accent. Alle tekst blijft zichtbaar, dus de hoogte is bij elke stap gelijk. */
/* toon: verloop (eigen achtergrond van deze sectie; varianten --grijs en --licht onderaan) */
.db-ws6{
  --offerte:#15803D;--offerte-hover:#166534;--ws-uit:2.5rem;--ws-pop:3.5rem;--sectie-achtergrond:var(--db-gradient);--ws-breuk:linear-gradient(180deg,var(--db-zwart) 0,var(--db-grijs) 80%);--wa:#25D366;--wa-hover:#1EBE5A;
  position:relative;overflow:clip;padding:clamp(3.5rem,6vw,5rem) 0 clamp(3rem,5vw,4.5rem);
  background:var(--sectie-achtergrond);color:var(--db-tekst-op-donker);font-family:var(--db-font-tekst);
}
.db-ws6::before{content:"";position:absolute;z-index:0;left:-6%;right:-6%;top:30%;bottom:-6%;background:var(--ws-breuk);transform:skewY(calc(var(--db-helling) * -1));transform-origin:100% 100%;pointer-events:none}  /* schuine achtergrondbreuk (gebruiker 2026-10-28) */
.db-ws6 :focus-visible{outline:calc(2 * var(--db-rand)) solid var(--db-focus);outline-offset:3px}
.db-ws6__inner{position:relative;z-index:1;width:min(100% - 2rem,75rem);margin-inline:auto}
.db-ws6__kop{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,26rem);gap:2rem 4rem;align-items:stretch;margin-bottom:clamp(6rem,8vw,7rem)}
.db-ws6__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:600 .8rem/1 var(--db-font-kop);letter-spacing:.1em;text-transform:uppercase}
.db-ws6 h2{margin:0;max-width:17ch;font:700 clamp(2rem,1.3rem + 2.2vw,3rem)/1.1 var(--db-font-kop);letter-spacing:-.02em;text-wrap:balance;color:var(--db-tekst-op-donker)}
.db-ws6__lead{margin:1rem 0 0;max-width:38rem;color:var(--db-tekst-op-donker);font-size:1.075rem;line-height:1.6}
.db-ws6__kopactie{display:flex;flex-direction:column;justify-content:space-between;gap:1.5rem;padding:1.5rem;border-radius:var(--db-radius);border:var(--db-rand) solid var(--db-roze);background:var(--db-puurwit);color:var(--db-tekst);box-shadow:inset var(--db-balk) 0 0 var(--db-roze),var(--db-schaduw)}
.db-ws6__chip{display:flex;flex-direction:column;gap:.35rem;margin:0;padding-left:.5rem;color:var(--db-tekst);font:600 1.35rem/1.25 var(--db-font-kop)}
.db-ws6__chipkop{font:600 .8rem/1.2 var(--db-font-kop);letter-spacing:.1em;text-transform:uppercase}
.db-ws6__acties{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
.db-ws6__knopactie{display:inline-flex;white-space:nowrap;align-items:center;justify-content:center;gap:.6rem;min-height:3.1rem;padding:.8rem 1rem;border-radius:var(--db-radius);border:var(--db-rand) solid var(--db-roze);background:var(--db-vlak);color:var(--db-tekst);text-decoration:none;font:600 1rem/1.2 var(--db-font-kop);text-align:center}
.db-ws6__knopactie--primair{grid-column:1 / -1;background:var(--offerte);color:var(--db-puurwit);box-shadow:var(--db-schaduw);font-size:1.05rem}
.db-ws6__knopactie--primair:is(:hover,:focus-visible){background:var(--offerte-hover)}
.db-ws6__knopactie svg{flex:none;width:1.1rem;height:1.1rem;fill:currentColor}
.db-ws6__body{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 42%;gap:3.5rem;align-items:stretch}
.db-ws6__lijst{min-width:0}
.db-ws6__hint{display:flex;align-items:center;gap:.6rem;margin:0 0 .9rem;font:600 .9rem/1.3 var(--db-font-kop);letter-spacing:.04em;color:var(--db-tekst-op-donker)}
.db-ws6__hint svg{flex:none;width:1.1rem;height:1.1rem;fill:var(--db-roze)}
.db-ws6__stappen{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.db-ws6__stap{min-width:0}
.db-ws6__knop{display:flex;align-items:flex-start;gap:1.1rem;width:100%;min-height:2.75rem;margin:0;padding:1.1rem 1.25rem;border:var(--db-rand) solid var(--db-roze);border-radius:var(--db-radius);background:var(--db-vlak);color:var(--db-tekst);text-align:left;cursor:pointer;font:inherit}
.db-ws6__nr{flex:none;display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:50%;background:var(--db-zwart);color:var(--db-tekst-op-donker);font:700 1rem/1 var(--db-font-kop)}
.db-ws6__tekst{display:block;flex:1;min-width:0}
.db-ws6__titel{display:block;font:600 1.1rem/1.3 var(--db-font-kop)}
.db-ws6__uitleg{display:block;margin-top:.3rem;color:var(--db-tekst-zacht);font-size:.96rem;line-height:1.55}
.db-ws6__pijl{flex:none;align-self:center;display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:50%;border:1px solid var(--db-zwart);color:var(--db-tekst)}
.db-ws6__pijl svg{width:1.1rem;height:1.1rem;fill:currentColor}
.db-ws6__stap.is-actief .db-ws6__knop{background:var(--db-puurwit);color:var(--db-tekst);border-color:var(--db-roze);box-shadow:inset var(--db-balk) 0 0 var(--db-roze),var(--db-schaduw)}
.db-ws6__stap.is-actief .db-ws6__nr{background:var(--db-roze);color:var(--db-actie-tekst)}
.db-ws6__stap.is-actief .db-ws6__uitleg{color:var(--db-tekst)}
.db-ws6__stap.is-actief .db-ws6__pijl{background:var(--db-roze);border-color:var(--db-roze);color:var(--db-actie-tekst)}
/* het podium: donker vlak rechts; de foto steekt er boven en links uit */
.db-ws6__podium{position:relative;border-radius:var(--db-radius);background:var(--db-roze);box-shadow:var(--db-schaduw)}
.db-ws6__bijschrift{position:absolute;left:1.5rem;right:1.5rem;bottom:1rem;margin:0;padding:.6rem 1rem;display:flex;flex-direction:column;gap:.15rem;border-radius:var(--db-radius);border:var(--db-rand) solid var(--db-roze);background:var(--db-zwart);box-shadow:inset var(--db-balk) 0 0 var(--db-roze);color:var(--db-tekst-op-donker)}
.db-ws6__bn{color:var(--db-roze);font:600 .8rem/1.2 var(--db-font-kop);letter-spacing:.1em;text-transform:uppercase}
.db-ws6__bt{font:600 1.15rem/1.3 var(--db-font-kop)}
.db-ws6__foto{position:absolute;z-index:2;margin:0;top:calc((var(--ws-uit) + var(--ws-pop)) * -1);bottom:5.25rem;left:-2rem;right:1.5rem;opacity:0;visibility:hidden}
.db-ws6__foto.is-vorig{opacity:1;visibility:visible;z-index:2}
.db-ws6__foto:not(.is-actief) .db-ws6__uit{opacity:0}  /* het uitgesneden stuk steekt boven het kader uit en wordt niet door de nieuwe foto bedekt: dat van de vorige stap gaat dus eerst weg, dat van de nieuwe stap komt erna */
.db-ws6__foto.is-actief{opacity:1;visibility:visible;z-index:3}  /* nieuwe foto vervaagt over de vorige heen: het roze podium schijnt nooit door */
/* basis: foto in het venster (de bovenste --ws-pop blijft weg); uit: uitgesneden stuk op dezelfde plek, mag boven het venster uitsteken */
.db-ws6__basis,.db-ws6__uit{position:absolute;inset:0;pointer-events:none}
.db-ws6__basis{clip-path:inset(var(--ws-pop) 0 0 0 round var(--db-radius));background:var(--db-zwart);box-shadow:var(--db-schaduw)}
.db-ws6__uit{clip-path:inset(-30rem 0 0 0)}
.db-ws6__foto::after{content:"";position:absolute;z-index:1;inset:var(--ws-pop) 0 0 0;border:var(--db-rand) solid var(--db-roze);border-radius:var(--db-radius);pointer-events:none}
.db-ws6__uit{z-index:2}
.db-ws6__cv{position:absolute;bottom:0;left:calc(50% + var(--ox,0%));translate:-50% 0;height:calc(var(--k,1) * 100%);aspect-ratio:var(--ar)}
.db-ws6__cv img{display:block;width:100%;height:100%;object-fit:cover}
@media (hover:hover){
  .db-ws6__stap:not(.is-actief) .db-ws6__knop:hover{background:var(--db-puurwit);box-shadow:inset var(--db-balk) 0 0 var(--db-roze)}
  .db-ws6__stap:not(.is-actief) .db-ws6__knop:hover .db-ws6__pijl{border-color:var(--db-roze)}
  .db-ws6__knopactie:hover{box-shadow:inset 0 calc(var(--db-balk) * -1) 0 var(--db-roze)}
  .db-ws6__knopactie--primair:hover{box-shadow:inset 0 calc(var(--db-balk) * -1) 0 var(--db-zwart)}
}
@media (prefers-reduced-motion:no-preference){
  .db-ws6__foto.is-actief{transition:opacity .35s ease}
  .db-ws6__foto.is-vorig .db-ws6__uit{transition:opacity .18s cubic-bezier(.22,.61,.36,1)}
  .db-ws6__foto.is-actief .db-ws6__uit{transition:opacity .25s cubic-bezier(.22,.61,.36,1) .16s}
  .db-ws6__knop{transition:box-shadow .2s ease,background-color .2s ease}
}
@media (max-width:900px){
  .db-ws6{--ws-pop:2rem}
  .db-ws6__kop{grid-template-columns:minmax(0,1fr);margin-bottom:3.5rem}
  .db-ws6__kopactie{padding:1.25rem}
  .db-ws6__body{display:flex;flex-direction:column}
  /* telefoon en tablet: het podium blijft bovenaan de lijst plakken, zodat de foto bij elke tik zichtbaar wisselt */
  .db-ws6__podium{order:-1;position:sticky;top:calc(var(--db-kop-h,64px) + var(--ws-pop) + .75rem + .5rem);z-index:5;height:clamp(13rem,34vw,19rem);margin:1.25rem 0 1.25rem .5rem;background-color:var(--db-zwart);background-image:none}
  .db-ws6__foto{top:calc(-.75rem - var(--ws-pop));bottom:2.9rem;left:-.5rem;right:.75rem}
  .db-ws6__cv{left:calc(50% + var(--oxm,var(--ox,0%)));height:calc(var(--km,var(--k,1)) * 100%)}
  .db-ws6__bijschrift{left:1rem;right:1rem;bottom:.5rem;padding:.35rem .9rem;flex-direction:row;align-items:baseline;gap:.75rem}
  .db-ws6__bt{font-size:1rem}
  .db-ws6__pijl{display:none}
  .db-ws6__stappen{gap:.6rem}
}
@media (max-width:560px){
  .db-ws6__acties{grid-template-columns:minmax(0,1fr)}
  .db-ws6__chip{font-size:1.2rem}
  /* bijschrift in een eigen rij, vooraf op twee regels: een lange titel schuift niet onder de foto en stapwisseling laat de lijst niet springen */
  .db-ws6__bijschrift{position:relative;grid-area:2/1;left:auto;right:auto;bottom:auto;margin:0 1rem;flex-direction:column;justify-content:center;gap:.1rem}
  .db-ws6__bn{font-size:.75rem}
  .db-ws6__bt{font-size:.95rem}
  .db-ws6__foto{grid-area:1/1/2/2;bottom:0}
  .db-ws6__podium{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:7.5rem minmax(4.3rem,auto);row-gap:.5rem;height:auto;padding-bottom:.5rem;margin-bottom:1rem}
  .db-ws6__knop{scroll-margin-top:calc(var(--db-kop-h,64px) + var(--ws-pop) + 14.05rem + 1rem)}
  .db-ws6__knop{padding:1rem}
}
/* smal desktopblok: het bijschrift kan hier twee regels worden */
@media (min-width:901px) and (max-width:1100px){
  .db-ws6__foto{bottom:7rem}
}

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

/* ---- Tonen: --grijs (#404040) en --licht (#F6F6F6). Alleen achtergrond en wat leesbaarheid daarop vraagt. */
.db-ws6.db-ws6--grijs,.db-ws6.db-ws6--verloop-om{--sectie-achtergrond:var(--db-gradient-om);--ws-breuk:linear-gradient(180deg,var(--db-grijs) 0,var(--db-zwart) 80%)}
.db-ws6.db-ws6--licht{--sectie-achtergrond:var(--db-wit);--ws-breuk:var(--db-puurwit);color:var(--db-tekst)}
.db-ws6--licht :is(h2,.db-ws6__lead,.db-ws6__hint){color:var(--db-tekst)}
.db-ws6--licht .db-ws6__kopactie{box-shadow:inset var(--db-balk) 0 0 var(--db-roze),var(--db-schaduw)}

/* lange woorden: afbreken op smalle schermen, zonder de letter kleiner te maken */
@media (max-width:384px){
  .db-ws6 h2{overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:14 11 6;-webkit-hyphenate-limit-before:11;-webkit-hyphenate-limit-after:6}
}
/* ---- kosten-blok: kosten-blok-v7 ---- */
/* toon: verloop (eigen achtergrond van deze sectie; varianten --grijs en --licht onderaan) */
/* ---- Kosten kort, versie 7 (Draagbalken.nl). Zelfde inhoud en volgorde als kosten-blok-v1, op zwart.
   Beeldfocus: de echte studiofoto van Dani Burgers (bron 3648x4893 px, hier 1491x2000) loopt over de volle breedte
   van de rechterkolom, 28,5 rem hoog, met schuine bovenrand (4 graden) en een grijze plaat die er schuin achter uitsteekt.
   Out of border: Dani's hoofd is uit dezelfde foto vrijgesteld (kosten-blok-v7-dani-uitbraak.webp, zelfde canvas 1491x2000,
   boven de fotorand, alleen kop en hals) en steekt boven de schuine rand uit. De witte kaart schuift over de onderrand van
   de foto, het witte naamlabel steekt links over de fotorand, ver onder het gezicht. Achter alles een schuin grijs vlak. */
.db-kb7{
  --kb-wa:#25D366;--kb-wa-hover:#1EBE5A;--kb-h:28.5rem;--kb-rand:3px;--kb-over:7.5rem;--kb-uit:4.5rem;--kb-vorm:polygon(0.0rem calc(6.99cqi + 1.6rem),0.055rem calc(6.99cqi + 1.186rem),0.214rem calc(6.99cqi + 0.8rem),0.469rem calc(6.99cqi + 0.469rem),0.8rem calc(6.99cqi + 0.214rem),1.186rem calc(6.99cqi + 0.055rem),1.6rem calc(6.99cqi + 0.0rem),calc(100% + -1.6rem) 0.0rem,calc(100% + -1.186rem) 0.055rem,calc(100% + -0.8rem) 0.214rem,calc(100% + -0.469rem) 0.469rem,calc(100% + -0.214rem) 0.8rem,calc(100% + -0.055rem) 1.186rem,calc(100% + 0.0rem) 1.6rem,calc(100% + 0.0rem) calc(100% + -1.6rem),calc(100% + -0.055rem) calc(100% + -1.186rem),calc(100% + -0.214rem) calc(100% + -0.8rem),calc(100% + -0.469rem) calc(100% + -0.469rem),calc(100% + -0.8rem) calc(100% + -0.214rem),calc(100% + -1.186rem) calc(100% + -0.055rem),calc(100% + -1.6rem) calc(100% + 0.0rem),1.6rem calc(100% + 0.0rem),1.186rem calc(100% + -0.055rem),0.8rem calc(100% + -0.214rem),0.469rem calc(100% + -0.469rem),0.214rem calc(100% + -0.8rem),0.055rem calc(100% + -1.186rem),0.0rem calc(100% + -1.6rem));--kb-zacht:color-mix(in srgb,var(--db-wit) 78%,transparent);--kb-schaduw:rgb(var(--db-zwart-rgb) / .6);
  --offerte:#15803D;--offerte-hover:#166534;position:relative;overflow:clip;isolation:isolate;
  padding:clamp(3.5rem,6vw,5.5rem) 0 clamp(3.5rem,6vw,5.5rem);
  --sectie-achtergrond:var(--db-gradient);--kb7-paneel:linear-gradient(180deg,var(--db-zwart) 0%,color-mix(in srgb,var(--db-grijs) 12%,var(--db-zwart)) 50%,var(--db-grijs) 100%);--kb7-paneel-m:linear-gradient(180deg,color-mix(in srgb,var(--db-grijs) 38%,var(--db-zwart)) 0%,color-mix(in srgb,var(--db-grijs) 14%,var(--db-zwart)) 45%,var(--db-grijs) 100%);background:var(--sectie-achtergrond);color:var(--db-tekst-op-donker);font-family:var(--db-font-tekst);
}
.db-kb7::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;right:0;width:54%;background:var(--kb7-paneel);clip-path:polygon(3.9rem 0,100% 0,100% 100%,0 100%)}
.db-kb7 :focus-visible{outline:calc(2 * var(--db-rand)) solid var(--db-focus);outline-offset:3px}
.db-kb7__inner{width:min(100% - 2rem,75rem);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2.5rem,5vw,5rem);align-items:stretch}
.db-kb7__copy{min-width:0;display:flex;flex-direction:column}
.db-kb7__tag{align-self:flex-start;margin:0 0 1rem;padding:.45rem .8rem;border-radius:var(--db-radius);background:var(--db-roze);color:var(--db-puurwit);font:600 .78rem/1 var(--db-font-kop);letter-spacing:.12em;text-transform:uppercase}
.db-kb7 h2{margin:0;max-width:14ch;font:700 clamp(2.1rem,1.3rem + 2.4vw,3.2rem)/1.06 var(--db-font-kop);letter-spacing:-.02em;text-wrap:balance}
.db-kb7__lead{margin:1rem 0 0;max-width:36rem;color:var(--kb-zacht);font-size:1.06rem;line-height:1.62}
.db-kb7__prijs{margin:1.5rem 0 0;padding:1.1rem 1.5rem 1.35rem;display:grid;gap:.15rem;border-radius:var(--db-radius);border:var(--db-rand) solid var(--db-roze);background:var(--db-vlak);color:var(--db-zwart);box-shadow:inset 0 calc(var(--db-balk) * -1) 0 var(--db-roze),0 1.4rem 2.4rem -1.4rem var(--kb-schaduw)}
.db-kb7__prijs-label{font:600 .82rem/1.2 var(--db-font-kop);letter-spacing:.1em;text-transform:uppercase;color:var(--db-grijs)}
.db-kb7__prijs strong{font:800 clamp(2.6rem,1.7rem + 3.8vw,4.3rem)/1.05 var(--db-font-kop);letter-spacing:-.03em}
.db-kb7__prijs-noot{color:var(--db-grijs);font-size:1rem;line-height:1.5}
.db-kb7__factoren{flex:1;list-style:none;margin:1.6rem 0 0;padding:0;display:flex;flex-direction:column}
.db-kb7__factoren li{flex:1;position:relative;display:flex;align-items:flex-start;gap:1.1rem;padding-bottom:1.1rem}
.db-kb7__factoren li:last-child{flex:0 0 auto;padding-bottom:0}
.db-kb7__factoren li:not(:last-child)::after{content:"";position:absolute;left:1.3rem;top:2.8rem;bottom:.2rem;width:2px;background:var(--db-roze)}
.db-kb7__nr{flex:none;display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:var(--db-radius);background:var(--db-roze);color:var(--db-puurwit);font:700 1.15rem/1 var(--db-font-kop)}
.db-kb7__factoren p{margin:0;color:var(--kb-zacht);font-size:1.06rem;line-height:1.55}
.db-kb7__factoren strong{display:block;margin-bottom:.1rem;color:var(--db-tekst-op-donker);font:600 1.22rem/1.3 var(--db-font-kop)}
.db-kb7__alle{align-self:flex-start;display:inline-flex;align-items:center;gap:.8rem;margin-top:1.4rem;min-height:3rem;padding:.35rem .35rem .35rem 1.1rem;border-radius:var(--db-radius);background:var(--db-wit);color:var(--db-zwart);text-decoration:none;font:600 1rem/1.2 var(--db-font-kop)}
.db-kb7__alle svg{flex:none;width:2.3rem;height:2.3rem;padding:.6rem;border-radius:var(--db-radius);background:var(--db-roze);fill:var(--db-puurwit)}

/* ---- stage: grote foto, kaart eroverheen */
.db-kb7__stage{position:relative;min-width:0;container-type:inline-size;display:flex;flex-direction:column;padding-top:1.4rem}
.db-kb7__slab{position:absolute;z-index:0;top:0;left:2.2rem;right:-1.2rem;height:var(--kb-h);background:var(--db-roze);clip-path:var(--kb-vorm)}
.db-kb7__foto{position:relative;z-index:2;height:var(--kb-h);margin:1.4rem 1.2rem 0 0}
.db-kb7__klip{position:absolute;inset:0;background:var(--db-roze);clip-path:var(--kb-vorm)}
.db-kb7__bin{position:absolute;inset:var(--kb-rand);background:var(--db-zwart);clip-path:var(--kb-vorm)}
.db-kb7__foto img{position:absolute;inset:calc(var(--kb-uit) * -1) 0 0 0;width:100%;height:calc(100% + var(--kb-uit));object-fit:cover;object-position:50% 36%}
.db-kb7__foto .db-kb7__uit{pointer-events:none}
.db-kb7__naam{position:absolute;z-index:3;top:15rem;left:-1.2rem;width:min(13rem,42%);margin:0;padding:.8rem 1rem;border-radius:var(--db-radius);border:var(--db-rand) solid var(--db-roze);background:var(--db-puurwit);color:var(--db-zwart);font-size:.92rem;line-height:1.35;box-shadow:0 1rem 1.6rem -1rem var(--kb-schaduw)}
.db-kb7__naam strong{display:block;margin-bottom:.1rem;font:700 1.12rem/1.2 var(--db-font-kop)}
.db-kb7__kaart{position:relative;z-index:3;display:flex;flex-direction:column;gap:1.05rem;flex:1;margin:calc(var(--kb-over) * -1) 3.2rem 0 -1.4rem;padding:clamp(1.3rem,2.4vw,1.9rem);border-radius:var(--db-radius);border:var(--db-rand) solid var(--db-roze);background:var(--db-puurwit);color:var(--db-zwart);box-shadow:0 1.8rem 3rem -1.4rem var(--kb-schaduw)}
.db-kb7__tekst{margin:0;font-size:1.04rem;line-height:1.6}
.db-kb7__incl{margin:auto 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:.45rem}
.db-kb7__incl li{padding:.4rem .7rem;border-radius:var(--db-radius);background:var(--db-vlak);border:1px solid color-mix(in srgb,var(--db-zwart) 14%,transparent);color:var(--db-zwart);font:600 .84rem/1.3 var(--db-font-kop)}
.db-kb7__incl .db-kb7__incl-kop{padding:0;background:none;border:0;color:var(--db-grijs);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;flex:1 0 100%}
.db-kb7__acties{display:grid;grid-template-columns:1fr 1fr;gap:.65rem}
.db-kb7__knop{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:3.1rem;padding:.65rem .9rem;border-radius:var(--db-radius);border:2px solid var(--db-zwart);color:var(--db-zwart);text-decoration:none;text-align:center;font:600 .95rem/1.2 var(--db-font-kop)}
.db-kb7__knop svg{flex:none;width:1.2rem;height:1.2rem;fill:currentColor}
.db-kb7__knop--hoofd{min-height:3.4rem;background:var(--offerte);border-color:var(--offerte);color:var(--db-puurwit);font-size:1.05rem}
.db-kb7__knop--hoofd:hover{background:var(--offerte-hover);border-color:var(--offerte-hover)}
.db-kb7__knop--bel{background:var(--db-zwart);color:var(--db-puurwit)}
.db-kb7__knop--wa{background:var(--kb-wa);border-color:var(--kb-wa)}
.db-kb7__knop--wa:hover{background:var(--kb-wa-hover);border-color:var(--kb-wa-hover)}
.db-kb7__knop--wa svg{fill:var(--db-puurwit)}
.db-kb7__noot{margin:0;font-size:.94rem;line-height:1.5;color:var(--db-grijs)}

@media (max-width:900px){
  .db-kb7::before{width:100%;top:auto;height:62%;background:var(--kb7-paneel-m);clip-path:polygon(0 4vw,100% 0,100% 100%,0 100%)}
  .db-kb7__inner{grid-template-columns:minmax(0,1fr);gap:2.5rem}
  .db-kb7__factoren{flex:none}
  .db-kb7__stage{width:min(100%,36rem);margin-inline:auto}
}
@media (max-width:560px){
  .db-kb7{--kb-h:23rem;--kb-over:5rem}
  .db-kb7__slab{left:1.4rem;right:-.2rem}
  .db-kb7__foto{margin-right:.4rem}
  .db-kb7__naam{top:12rem;left:-.4rem;width:min(11rem,52%);padding:.65rem .8rem;font-size:.84rem}
  .db-kb7__kaart{margin:calc(var(--kb-over) * -1) .8rem 0 0}
  .db-kb7__acties{grid-template-columns:minmax(0,1fr)}
}

/* ---- Toonvarianten (website-kit RULES 4.26). De paginagenerator zet db-kb7--grijs / db-kb7--verloop-om (verloop grijs boven, donker onder) of db-kb7--licht (#F6F6F6) op de wortel.
   Grijs: schuine plaat een tint donkerder. Licht: donkere tekst, witte plaat en witte prijskaart. */
.db-kb7.db-kb7--grijs,.db-kb7.db-kb7--verloop-om{--sectie-achtergrond:var(--db-gradient-om);--kb7-paneel:linear-gradient(180deg,var(--db-grijs) 0%,color-mix(in srgb,var(--db-grijs) 12%,var(--db-zwart)) 50%,var(--db-zwart) 100%);--kb7-paneel-m:linear-gradient(180deg,color-mix(in srgb,var(--db-grijs) 62%,var(--db-zwart)) 0%,color-mix(in srgb,var(--db-grijs) 14%,var(--db-zwart)) 45%,var(--db-zwart) 100%)}
.db-kb7.db-kb7--licht{--sectie-achtergrond:var(--db-wit);--kb-zacht:var(--db-grijs);color:var(--db-zwart)}
.db-kb7--licht::before{background:var(--db-puurwit)}
.db-kb7--licht h2,.db-kb7--licht .db-kb7__factoren strong{color:var(--db-zwart)}
.db-kb7--licht .db-kb7__prijs{background:var(--db-puurwit)}
.db-kb7--licht .db-kb7__alle{border:1px solid var(--db-zwart)}
/* ---- 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)}
/* ---- 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}
}
/* ---- 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%)}