/* ---- gedeeld: iconen-iconen-css ---- */
/* Draagbalken iconenset, stijl "Harde schaduw" (gekozen 2026-10-27).
Gebruik:
Het icoon volgt de tekstkleur (currentColor). De harde schaduw volgt --db-roze. */
.i{
--i-maat:24px;
display:inline-block;flex:none;vertical-align:middle;
width:var(--i-maat);height:var(--i-maat);
color:inherit;
overflow:visible;
}
.i--32{--i-maat:32px}
.i--48{--i-maat:48px}
.i--96{--i-maat:96px}
.i--1em{--i-maat:1em}
/* kleur van het icoon (de schaduw blijft roze) */
.i--op-donker{color:var(--db-wit,#F6F6F6)}
.i--op-licht{color:var(--db-zwart,#0C0C0C)}
/* schaduwkleur aanpassen: bijvoorbeeld op een roze knop, waar roze niet zou opvallen */
.i--schaduw-grijs{--db-roze:#404040}
.i--schaduw-zwart{--db-roze:#0C0C0C}
.i--schaduw-wit{--db-roze:#F6F6F6}
.i--zonder-schaduw{--db-roze:transparent}
/* subtiele hover voor icoon in link of knop: schaduw schuift naar het icoon */
@media (hover:hover){
.i--hover .s{transition:transform .2s ease}
a:hover .i--hover .s,button:hover .i--hover .s,.i--hover:hover .s{transform:translate(-1.2px,-1.2px)}
}
@media (prefers-reduced-motion:reduce){.i--hover .s{transition:none}}
/* ---- 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 -- hieronder.) */
/* Kop van een subpagina: een foto per pagina, laag, zonder medewerkers, met hetzelfde offertepaneel als de homepage-hero (hero-home-v16:
titel, korte tekst, trustchips, het formulier met vier velden en de strip met bel- en app-knop). De foto wisselt per pagina: src, srcset, alt en --hp-fokus op de img. */
.db-hp12{--hp-z18:rgb(var(--db-zwart-rgb) / .18);--hp-z35:rgb(var(--db-zwart-rgb) / .35);--hp-z45:rgb(var(--db-zwart-rgb) / .45);--hp-z55:rgb(var(--db-zwart-rgb) / .55);--hp-z64:rgb(var(--db-zwart-rgb) / .64);--hp-z82:rgb(var(--db-zwart-rgb) / .82);--hp-z92:rgb(var(--db-zwart-rgb) / .92);
--hp-gl-b:#4285F4;--hp-gl-r:#EA4335;--hp-gl-g:#FBBC05;--hp-gl-gr:#34A853;--hp-ster:#FBBC04;--hp-wa:#25D366;--offerte:#15803D;--offerte-hover:#166534;
--hp-lijn:var(--hp-z18);--hp-menu:5rem;--hp-over:3.5rem;--hp-pad:clamp(1rem,4vw,2.5rem);
--sectie-achtergrond:var(--db-gradient);position:relative;background:var(--sectie-achtergrond);color:var(--db-tekst-op-donker);font-family:var(--db-font-tekst);overflow-x:clip;padding-bottom:clamp(2rem,4vw,3rem)}
.db-hp12 :focus-visible{outline:calc(2 * var(--db-rand)) solid var(--db-focus);outline-offset:2px}
.db-hp12 a{text-decoration:none}
.db-hp12__foto{position:absolute;inset:0;z-index:-2;display:block;overflow:hidden;background:var(--db-gradient)}
.db-hp12__foto img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:var(--hp-fokus,center)}
.db-hp12__kruim{font:400 .82rem/1.4 var(--db-font-tekst);color:color-mix(in srgb,var(--db-puurwit) 82%,transparent);text-shadow:0 2px 12px var(--hp-z55)}
.db-hp12__kruim ol{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:0;padding:0}
.db-hp12__kruim li{display:flex;align-items:center;min-height:44px}
.db-hp12__kruim li+li::before{content:"/";margin-right:.4rem;opacity:.55}
.db-hp12__kruim a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding-inline:.35rem;color:inherit}
.db-hp12__kruim a:hover{color:var(--db-puurwit)}
.db-hp12__titel{margin:0;font:700 clamp(2rem,1rem + 2.8vw,3rem)/1.05 var(--db-font-kop);letter-spacing:-.02em;text-wrap:balance;text-shadow:0 4px 30px var(--hp-z35)}
.db-hp12__titel em{font-style:normal;white-space:nowrap;color:var(--db-roze)}
.db-hp12__lead{margin:.8rem 0 0;max-width:38rem;font-size:clamp(1rem,.9rem + .4vw,1.15rem);line-height:1.5;text-shadow:0 2px 14px var(--hp-z45);text-wrap:pretty}
/* offertepaneel, trustchips, formulier en strip: 1 op 1 overgenomen van hero-home-v16 (klassen db-hp12 in plaats van db-hh16) */
/* ---- Paneel v12 */
.db-hp12__paneel{position:relative;z-index:5;width:min(100% - 2rem,75rem);margin:calc(var(--hp-over) * -1) auto 0;padding:clamp(1rem,2vw,1.4rem);border-radius:var(--db-radius);
background:var(--db-puurwit);color:var(--db-tekst);border:var(--db-rand) solid var(--db-roze);box-shadow:var(--db-schaduw)} /* effen wit vlak: gebruiker 2026-10-27 "make the whole form white"; geen verloop op blokken, alleen op de sectie-achtergrond */
.db-hp12__kopt{flex:1 1 18rem;min-width:0}
.db-hp12__ptitel{margin:0;font:700 clamp(1.45rem,1.1rem + 1.1vw,2rem)/1.15 var(--db-font-kop)}
.db-hp12__intro{margin:.4rem 0 0;max-width:34rem;line-height:1.5;text-wrap:balance}
.db-hp12__form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) auto;align-items:center;gap:0 1.1rem;padding:.5rem .5rem .5rem 1.3rem;border-radius:var(--db-radius);background:var(--db-puurwit);color:var(--db-tekst);border:var(--db-rand) solid var(--db-roze)}
.db-hp12__veld{display:flex;flex-direction:column;gap:.1rem;min-width:0;padding:.25rem 0}
.db-hp12__veld + .db-hp12__veld{padding-left:1.1rem;border-left:1px solid var(--hp-lijn)}
.db-hp12__veld span{font:600 .75rem/1.2 var(--db-font-kop);letter-spacing:.1em;text-transform:uppercase;color:var(--db-tekst-zacht)}
.db-hp12__veld :is(input,select){width:100%;min-height:2.75rem;padding:0;border:0;border-radius:0;background:transparent;color:var(--db-tekst);font:400 1rem/1.3 var(--db-font-tekst)}
.db-hp12__veld :is(input,select)::placeholder{color:var(--db-tekst-zacht);opacity:1}
.db-hp12__veld :is(input,select) option{background:var(--db-puurwit);color:var(--db-tekst)}
.db-hp12 :is(input,select){caret-color:var(--db-zwart)} /* tekstcursor zwart (gebruiker 2026-10-28) */
.db-hp12__verstuur{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:3.25rem;padding:.7rem 1.5rem;border:0;border-radius:var(--db-radius);background:var(--offerte);color:var(--db-puurwit);font:700 1rem/1.2 var(--db-font-kop);letter-spacing:.02em;white-space:nowrap;cursor:pointer}
.db-hp12__verstuur:is(:hover,:focus-visible){background:var(--offerte-hover)}
.db-hp12__verstuur svg{width:1.1rem;height:1.1rem;fill:currentColor}
.db-hp12__btn{display:flex;align-items:center;justify-content:center;gap:.6rem;width:100%;min-height:3rem;padding:.5rem .9rem;border-radius:var(--db-radius);font:700 .98rem/1.2 var(--db-font-kop);white-space:nowrap}
.db-hp12__btn svg{width:1.3rem;height:1.3rem;flex:none}
.db-hp12__tk{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.db-hp12__tk b{font:700 .98rem/1.25 var(--db-font-kop)}
.db-hp12__tk > span{font-size:.86rem;line-height:1.35}
.db-hp12__g{width:1.9rem;height:1.9rem;flex:none}
.db-hp12__g .b{fill:var(--hp-gl-b)}.db-hp12__g .gr{fill:var(--hp-gl-gr)}.db-hp12__g .ge{fill:var(--hp-gl-g)}.db-hp12__g .r{fill:var(--hp-gl-r)}
.db-hp12__sterren{display:flex;gap:2px;flex:none}
.db-hp12__sterren svg{width:.8rem;height:.8rem;fill:var(--hp-ster)}
.db-hp12__r1{display:flex;align-items:center;gap:.45rem}
.db-hp12__wa{background:var(--hp-wa);color:var(--db-zwart)}
.db-hp12__wa svg{fill:var(--db-puurwit)}
.db-hp12__bel{background:var(--db-zwart);color:var(--db-wit)}
.db-hp12__bel svg{fill:var(--db-roze)}
.db-hp12__trust .db-hp12__tk b{font:700 .9rem/1.2 var(--db-font-kop)}
.db-hp12__trust .db-hp12__r1 b{font-size:.98rem}
.db-hp12__trust .db-hp12__tk span{font-size:.8rem;line-height:1.25}
.db-hp12__intro{max-width:34rem;text-wrap:pretty}
.db-hp12__strip{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1.3fr) minmax(0,.9fr) minmax(0,.9fr);width:min(100% - 2rem,75rem);margin:.9rem auto 0;padding:0;list-style:none;border-radius:var(--db-radius);background:var(--db-vlak);color:var(--db-tekst);border:var(--db-rand) solid var(--db-roze);box-shadow:var(--db-schaduw)}
.db-hp12__strip > li{display:flex;align-items:center;gap:.85rem;padding:.8rem 1rem}
.db-hp12__strip > li + li{border-left:1px solid var(--hp-lijn)}
.db-hp12__strip .db-hp12__tk span{color:var(--db-tekst-zacht)}
.db-hp12__strip > .db-hp12__act{padding:.6rem .9rem}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
.db-hp12__verstuur,.db-hp12__btn,.db-hp12__gl{transition:transform .2s ease-out}
.db-hp12__verstuur:is(:hover,:focus-visible),.db-hp12__btn:is(:hover,:focus-visible),.db-hp12__gl:is(:hover,:focus-visible){transform:translateY(-2px)}
}
@media (max-width:1180px){
.db-hp12__strip{grid-template-columns:repeat(2,minmax(0,1fr))}
.db-hp12__strip > li:nth-child(3){border-left:0}
.db-hp12__strip > li:nth-child(n+3){border-top:1px solid var(--hp-lijn)}
}
@media (max-width:1000px){
.db-hp12__form{grid-template-columns:repeat(2,minmax(0,1fr));gap:.3rem 1.1rem;padding:.7rem 1rem 1rem 1.2rem}
.db-hp12__verstuur{grid-column:1 / -1;margin-top:.5rem}
}
@media (max-width:700px){
.db-hp12__form{grid-template-columns:minmax(0,1fr);gap:.2rem}
.db-hp12__veld + .db-hp12__veld{padding-left:0;border-left:0;border-top:1px solid var(--hp-lijn)}
.db-hp12__strip > li{padding:.7rem .8rem;gap:.7rem}
}
@media (max-width:560px){
.db-hp12__trust > li:not(.db-hp12__gchip){flex-direction:column;align-items:flex-start;gap:.45rem;padding:.6rem .6rem}
.db-hp12__trust > li:not(.db-hp12__gchip) .db-hp12__tk b{font-size:.82rem}
.db-hp12__intro{font-size:.93rem}
.db-hp12__strip{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)}
.db-hp12__strip > li:not(.db-hp12__act){grid-column:1 / -1;border-left:0}
.db-hp12__strip > li:nth-child(2){border-top:1px solid var(--hp-lijn)}
.db-hp12__strip > .db-hp12__act{padding:.5rem .5rem}
.db-hp12__strip > .db-hp12__act + .db-hp12__act{border-left:1px solid var(--hp-lijn)}
.db-hp12__btn{padding:.5rem .3rem;font-size:.86rem;gap:.35rem}
.db-hp12__btn svg{width:1.1rem;height:1.1rem}
}
.db-hp12__pkop{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem 1.5rem;margin-bottom:.9rem}
.db-hp12__trust{display:grid;grid-template-columns:repeat(3,13.6rem);gap:.5rem;margin:0;padding:0;list-style:none}
.db-hp12__trust > li{display:flex;align-items:center;gap:.7rem;min-height:3.9rem;padding:.55rem .8rem .45rem;border-radius:var(--db-radius);background:var(--db-wit);box-shadow:inset 0 var(--db-rand) 0 var(--db-roze),inset 0 0 0 1px var(--hp-lijn);color:var(--db-tekst);white-space:nowrap}
.db-hp12__trust > .db-hp12__gchip{padding:0}
.db-hp12__gl{display:flex;align-items:center;gap:.7rem;width:100%;min-height:3.9rem;padding:.55rem .8rem .45rem;color:inherit}
.db-hp12__trust .db-hp12__tk span{color:var(--db-tekst-zacht)}
.db-hp12__trust .db-hp12__r1 b{color:var(--db-tekst)}
.db-hp12__mi{display:grid;place-items:center;flex:none;width:2.7rem;height:2.7rem;border-radius:var(--db-radius);background:var(--db-puurwit);box-shadow:0 0 0 1px var(--hp-lijn);color:var(--db-zwart)}
.db-hp12__mi svg{width:1.95rem;height:1.95rem;fill:currentColor}
.db-hp12__ico{display:grid;place-items:center;flex:none;width:3.5rem;height:3.5rem;border-radius:var(--db-radius);background:var(--db-puurwit);box-shadow:inset 0 var(--db-rand) 0 var(--db-roze),0 0 0 1px var(--hp-lijn);color:var(--db-zwart)}
.db-hp12__ico svg{width:2.5rem;height:2.5rem;fill:currentColor}
@media (max-width:1180px){
.db-hp12__trust{width:100%;grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:700px){
.db-hp12__trust{width:100%;grid-template-columns:repeat(2,minmax(0,1fr))}
.db-hp12__trust > li{white-space:normal;min-width:0}
.db-hp12__trust > .db-hp12__gchip{grid-column:1 / -1}
.db-hp12__ico{width:3.1rem;height:3.1rem}
.db-hp12__ico svg{width:2.2rem;height:2.2rem}
}
@media (max-width:560px){
.db-hp12__mi{width:2.5rem;height:2.5rem}
.db-hp12__mi svg{width:1.8rem;height:1.8rem}
}
/* v12: gecentreerde tekst op een foto over de volle breedte met een donkere sluier; het paneel schuift over de onderkant */
.db-hp12__kop{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;text-align:center;min-height:22rem;padding:max(var(--hp-menu),calc(var(--db-kop-h,64px) + .6rem)) var(--hp-pad) calc(var(--hp-over) + 1.4rem)}
.db-hp12__kruim,.db-hp12__titel,.db-hp12__lead{max-width:46rem}
.db-hp12__kruim ol{justify-content:center}
.db-hp12__lead{margin-inline:auto}
.db-hp12__sluier{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(120% 90% at 70% 18%,transparent 30%,var(--hp-z55) 100%),linear-gradient(180deg,var(--hp-z82) 0,var(--hp-z64) 30%,var(--hp-z64) 70%,var(--hp-z92) 100%)} /* leestekst: ook de lichtste pixels onder titel en lead houden 4,5:1 */
@media (max-width:700px){.db-hp12{--hp-menu:4.25rem;--hp-over:3rem}}
/* smal scherm: de velden komen voor de vertrouwenschips, zodat de eerste velden op scroll 0 boven de zwevende knoppen staan */
@media (max-width:560px){
.db-hp12__paneel{display:flex;flex-direction:column}
.db-hp12__pkop{display:contents}
.db-hp12__kopt{order:1;flex:0 0 auto;margin-bottom:.9rem}
.db-hp12__form{order:2}
.db-hp12__trust{order:3;margin-top:.9rem}
}
/* ---- Toon verloop-om (BRIEF-ACHTERGROND 2026-10-27): verloop omgekeerd, grijs boven en donker onderaan; sluit aan op een buur die grijs eindigt. */
.db-hp12.db-hp12--verloop-om{--sectie-achtergrond:var(--db-gradient-om)}
/* lange woorden in de titel: afbreken op smalle schermen, zonder de letter kleiner te maken */
@media (max-width:460px){
.db-hp12__titel{overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:14 11 6;-webkit-hyphenate-limit-before:11;-webkit-hyphenate-limit-after:6}
.db-hp12__titel em{white-space:normal}
}
/* ---- artikel-tekst: artikel-tekst-v2 ---- */
/* toon: verloop (eigen achtergrond van deze sectie; de paginagenerator leest deze regel voor website-kit RULES 4.26. Een andere toon per pagina komt via config.SECTIE_TOON en een klasse -- hieronder.) */
/* ---- Artikeltekst v2 (Draagbalken.nl), nieuw ontwerp uit de ideeen van de library (offset-shape, soft-cards, heading-stack).
Kopband: links titel, lead en Belangrijkste punten, rechts een donkere inhoudskaart (datum, leestijd, auteur, hoofdstukken) waarvan
een uitgesneden stuk van de foto (de twee hoofden met lashelm) boven het fotokader en de kaartrand uitsteekt. Daaronder een gecentreerde, bredere leeskolom van 50rem (tekst 68ch). Merkwaarden: ../_shared/tokens.css. */
.db-art2{
--a2-tekst:var(--db-tekst-op-donker);
--a2-zacht:color-mix(in srgb,var(--db-wit) 85%,transparent);
--a2-lijn:color-mix(in srgb,var(--db-wit) 22%,transparent);
--a2-kaart-tekst:var(--db-tekst);
--a2-kolom:100%;
--a2-leest:none;
--a2-rail:21rem;
--a2-gat:4rem;
--a2-op:2.4rem;
--a2-breuk:linear-gradient(180deg,var(--db-zwart) 0,var(--db-grijs) 80%); /* schuine band erachter (gebruiker 2026-10-28) */
position:relative;isolation:isolate;overflow:clip;padding:clamp(3.5rem,7vw,6rem) 0 clamp(3.5rem,7vw,6rem);
--sectie-achtergrond:var(--db-gradient);background:var(--sectie-achtergrond);color:var(--a2-tekst);font-family:var(--db-font-tekst);
}
.db-art2::before{content:"";position:absolute;z-index:-1;left:-6%;right:-6%;top:25%;bottom:-6%;background:var(--a2-breuk);transform:skewY(calc(var(--db-helling) * -1));transform-origin:100% 100%;pointer-events:none}
.db-art2 :focus-visible{outline:calc(2 * var(--db-rand)) solid var(--db-focus);outline-offset:3px}
.db-art2__inner{width:min(100% - 2rem,75rem);margin:0 auto}
.db-art2__kop{display:grid;grid-template-columns:minmax(0,1fr) var(--a2-rail);column-gap:var(--a2-gat);align-items:stretch}
.db-art2__kop-tekst{display:flex;flex-direction:column;min-width:0;container-type:inline-size;padding-top:.4rem} /* kolom: Belangrijkste punten vult door tot de onderrand van de inhoudskaart */
.db-art2__tekst{width:min(100%,var(--a2-kolom));margin:1rem auto 0;min-width:0}
/* ---- kop */
.db-art2__tag{display:inline-block;align-self:flex-start;margin:0 0 1.1rem;padding:.4rem .7rem;border-radius:var(--db-radius);background:var(--db-roze);color:var(--db-puurwit);font:600 .8rem/1 var(--db-font-kop);letter-spacing:.1em;text-transform:uppercase}
.db-art2__kop h2{margin:0;font:700 min(clamp(1.85rem,1.2rem + 2.8vw,3.4rem),8.3cqi)/1.06 var(--db-font-kop);letter-spacing:-.025em;text-wrap:balance;overflow-wrap:normal;hyphens:manual} /* nooit midden in een woord breken (cqi: kolombreedte) */
.db-art2__lead{margin:1.3rem 0 0;color:var(--a2-zacht);font-size:1.1875rem;line-height:1.65}
.db-art2__punten{flex:1 0 auto;margin:2rem 0 0;padding:1.4rem 1.6rem 1.6rem;border-radius:var(--db-radius);background:var(--db-vlak);color:var(--a2-kaart-tekst);box-shadow:inset var(--db-balk) 0 0 var(--db-roze)}
.db-art2__punten-t{margin:0 0 .9rem;font:700 1.05rem/1.2 var(--db-font-kop)}
.db-art2__punten .db-art2__lijst{margin:0}
.db-art2__punten .db-art2__lijst li{margin-bottom:.7rem}
.db-art2__punten .db-art2__lijst li:last-child{margin-bottom:0}
/* ---- vervolgdeel: hoofdstukken tussen andere secties, zonder eigen kop; alleen de sectiepadding staat boven het eerste hoofdstuk */
.db-art2--vervolg .db-art2__tekst{margin-top:0}
.db-art2--vervolg .db-art2__hs:first-child{padding-top:0}
/* ---- hoofdstukken */
.db-art2__hs{padding-top:3rem;scroll-margin-top:1.5rem}
.db-art2__hs > :is(h2,h3){display:grid;grid-template-columns:auto minmax(0,1fr);gap:.9rem;align-items:start;margin:0 0 1.1rem;font:700 clamp(1.4rem,1.1rem + 1vw,1.8rem)/1.22 var(--db-font-kop);letter-spacing:-.01em;text-wrap:balance}
.db-art2__hn{display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:var(--db-radius);background:var(--db-zwart);color:var(--db-roze);font:700 1.05rem/1 var(--db-font-kop)}
.db-art2__body > :is(p,ul){max-width:var(--a2-leest)}
.db-art2__hs p{margin:0 0 1.05rem;font-size:1.0625rem;line-height:1.72}
.db-art2__hs a{color:var(--a2-tekst);font-weight:700;text-decoration:none}
.db-art2__lijst{margin:0 0 1.2rem;padding:0;list-style:none}
.db-art2__lijst li{position:relative;margin:0 0 .55rem;padding-left:1.5rem;font-size:1.0625rem;line-height:1.62}
.db-art2__lijst li::before{content:"";position:absolute;left:0;top:.7em;width:.7rem;height:var(--db-balk);background:var(--db-roze)}
.db-art2__sub{max-width:var(--a2-leest);margin:1.6rem 0 0;padding:1.1rem 1.3rem 1.2rem;border-radius:var(--db-radius);background:var(--db-vlak);color:var(--a2-kaart-tekst);scroll-margin-top:1.5rem}
.db-art2__sub h4{margin:0 0 .45rem;font:600 1.08rem/1.35 var(--db-font-kop)}
.db-art2__sub p{margin:0}
.db-art2__tabel{margin:1.5rem 0 0}
.db-art2__tabel table{width:100%;border-collapse:collapse;font-size:1rem;line-height:1.5}
.db-art2__tabel thead th{padding:.2rem 1rem .8rem;text-align:left;font:600 .8rem/1.3 var(--db-font-kop);letter-spacing:.08em;text-transform:uppercase;color:var(--a2-zacht);box-shadow:inset 0 calc(var(--db-balk) * -1) 0 var(--db-roze)}
.db-art2__tabel tbody :is(th,td){padding:.9rem 1rem;border-bottom:1px solid var(--a2-lijn);text-align:left;vertical-align:top}
.db-art2__tabel tbody th{width:28%;font:700 1rem/1.4 var(--db-font-kop)}
.db-art2__vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* figuur: breder dan de tekst; een donker vlak steekt boven en rechts achter de foto uit */
.db-art2__fig{position:relative;margin:2.4rem 0 .6rem;isolation:isolate}
.db-art2__fig::before{content:"";position:absolute;z-index:-1;top:-1.6rem;right:-1.8rem;width:70%;height:72%;border-radius:var(--db-radius);background:var(--db-rook)}
.db-art2__fig img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:50% 50%;border-radius:var(--db-radius);box-shadow:var(--db-schaduw)}
/* figuur naast de lopende tekst: de tekst loopt eromheen, het donkere vlak blijft binnen de sitecontainer */
.db-art2__body{display:flow-root}
.db-art2__fig--rechts,.db-art2__fig--links{width:46%;margin:.35rem 0 1.4rem}
.db-art2__fig--rechts{float:right;margin-left:clamp(1.6rem,3vw,2.75rem)}
.db-art2__fig--links{float:left;margin-right:clamp(1.6rem,3vw,2.75rem)}
.db-art2__fig--rechts::before{left:-1.1rem;right:auto;top:-.8rem}
.db-art2__fig--links::before{right:-1.1rem;top:-.8rem}
.db-art2__fig--rechts img,.db-art2__fig--links img{aspect-ratio:3/2}
.db-art2__fig figcaption{margin-top:.75rem;padding-left:.8rem;box-shadow:inset var(--db-balk) 0 0 var(--db-roze);color:var(--a2-zacht);font-size:.9375rem;line-height:1.45}
.db-art2__fig--links ~ ul{display:flow-root}
/* ---- inhoudskaart */
.db-art2__toc{position:relative;align-self:stretch;margin-top:calc(var(--a2-op) + .2rem);padding:0 1.3rem 1.6rem;border-radius:var(--db-radius);background:var(--db-zwart);color:var(--db-tekst-op-donker);box-shadow:inset 0 calc(var(--db-balk) * -1) 0 var(--db-roze)}
.db-art2__foto{--a2-kop:20.5%;position:relative;margin:-2.1rem -1.1rem 0 .5rem;aspect-ratio:1000/839}
.db-art2__kader{position:absolute;inset:var(--a2-kop) 0 0 0;overflow:hidden;border-radius:var(--db-radius);box-shadow:var(--db-schaduw);background:var(--db-zwart)}
.db-art2__kader img{width:100%;height:100%;object-fit:cover}
.db-art2__uit{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.db-art2__meta{margin:1rem 0 1rem;padding:0 0 .9rem;list-style:none;border-bottom:1px solid var(--db-grijs)}
.db-art2__meta li{display:flex;align-items:center;gap:.65rem;padding:.25rem 0;font-size:.92rem}
.db-art2__meta svg{flex:none;width:1.1rem;height:1.1rem;color:var(--db-roze)}
.db-art2__label{margin:0 0 .4rem;color:var(--db-roze);font:700 .78rem/1 var(--db-font-kop);letter-spacing:.14em;text-transform:uppercase}
.db-art2__toc ol{margin:0;padding:0;list-style:none}
.db-art2__toc a{display:flex;align-items:center;gap:.7rem;min-height:2.75rem;padding:.25rem 0;color:var(--db-tekst-op-donker);text-decoration:none;font:500 .9rem/1.3 var(--db-font-kop)}
.db-art2__toc .db-art2__n{flex:none;display:grid;place-items:center;width:1.6rem;height:1.6rem;border-radius:var(--db-radius);background:var(--db-roze);color:var(--db-zwart);font:700 .78rem/1 var(--db-font-kop)}
/* ---- contact */
.db-art2__acties{display:flex;flex-wrap:wrap;gap:.7rem}
.db-art2__knop{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:3rem;padding:.75rem 1.3rem;border-radius:var(--db-radius);background:var(--db-actie);color:var(--db-puurwit);text-decoration:none;font:600 1rem/1.2 var(--db-font-kop)}
.db-art2__hs a.db-art2__knop{box-shadow:none;font-weight:600;color:var(--db-actie-tekst)}
.db-art2__knop svg{width:1.1rem;height:1.1rem;fill:currentColor}
.db-art2__knop--2{background:var(--db-vlak);box-shadow:inset 0 0 0 2px var(--db-zwart)}
.db-art2__hs a.db-art2__knop--2{box-shadow:inset 0 0 0 2px var(--db-zwart);color:var(--a2-kaart-tekst)}
.db-art2__vraag{margin-top:1.8rem;max-width:var(--a2-leest)}
.db-art2__vraag-t{margin:0 0 .9rem;font:700 1.15rem/1.3 var(--db-font-kop)}
.db-art2__slot{width:min(100%,var(--a2-kolom));margin:3.6rem auto 0;padding:2rem 2rem 2.2rem;border-radius:var(--db-radius);background:var(--db-zwart);color:var(--db-tekst-op-donker);box-shadow:inset 0 calc(var(--db-balk) * -1) 0 var(--db-roze)}
.db-art2__slot-t{margin:0;max-width:24ch;font:700 clamp(1.5rem,1.2rem + 1vw,2rem)/1.2 var(--db-font-kop);text-wrap:balance}
.db-art2__slot-p{margin:.8rem 0 1.4rem;max-width:46ch;line-height:1.6}
.db-art2__slot .db-art2__knop--2{background:transparent;color:var(--db-tekst-op-donker);box-shadow:inset 0 0 0 2px var(--db-wit)}
/* ---- 900: kop in een kolom, inhoudskaart onder de tekst van de kop */
@media (max-width:900px){
.db-art2__kop{grid-template-columns:minmax(0,1fr);row-gap:0}
.db-art2__toc{margin-top:calc(var(--a2-op) + 2rem)}
.db-art2__toc ol{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));column-gap:1.4rem}
.db-art2__toc{display:grid;grid-template-columns:20rem minmax(0,1fr);column-gap:1.6rem;align-items:center}
.db-art2__foto{grid-column:1;grid-row:1 / 3;margin:-2.1rem 0 1rem}
.db-art2__meta{grid-column:2;grid-row:1;margin:1rem 0 0;border-bottom:0;padding-bottom:0}
.db-art2__label{grid-column:2;grid-row:2;align-self:end;margin:0 0 1rem}
.db-art2__toc ol{grid-column:1 / -1}
.db-art2__fig{margin-inline:0}
.db-art2__fig::before{right:-.8rem}
.db-art2__fig--rechts,.db-art2__fig--links{float:none;width:auto;margin:1.8rem 0 1.5rem}
.db-art2__fig--rechts::before,.db-art2__fig--links::before{left:auto;right:-.5rem;top:-.7rem}
}
@media (max-width:560px){
.db-art2{--a2-op:1.8rem}
.db-art2__toc{display:block}
.db-art2__foto{margin:-2.1rem 0 1rem .3rem}
.db-art2__meta{margin:0 0 1rem;padding-bottom:.9rem;border-bottom:1px solid var(--db-grijs)}
.db-art2__label{margin:0 0 .4rem}
.db-art2__hs{padding-top:2.4rem}
.db-art2__hs > :is(h2,h3){grid-template-columns:minmax(0,1fr)}
.db-art2__hn{width:2.1rem;height:2.1rem}
.db-art2__tabel thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.db-art2__tabel :is(table,tbody,tr,th,td){display:block}
.db-art2__tabel tr{margin-bottom:.7rem;padding:.4rem 0;border-radius:var(--db-radius);border:var(--db-rand) solid var(--db-roze);background:var(--db-vlak);color:var(--a2-kaart-tekst)}
.db-art2__tabel tbody :is(th,td){width:auto;padding:.35rem 1rem;border-bottom:0}
.db-art2__tabel td::before{content:attr(data-l);display:block;color:var(--a2-zacht);font:600 .75rem/1.4 var(--db-font-kop);letter-spacing:.06em;text-transform:uppercase}
.db-art2__acties{flex-direction:column}
.db-art2__slot{padding:1.6rem 1.25rem 1.8rem}
}
/* hover:start (alleen transform; gespiegeld op focus-visible) */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
.db-art2__knop{transition:transform .25s ease}
.db-art2__knop:is(:hover,:focus-visible){transform:translateY(-2px)}
.db-art2__toc a{transition:transform .2s ease}
.db-art2__toc a:is(:hover,:focus-visible){transform:translateX(4px)}
}
/* hover:end */
/* dunne roze rand (gebruiker 2026-10-27): blok dicht bij de kleur van zijn achtergrond */
.db-art2__punten,.db-art2__sub{border:var(--db-rand) solid var(--db-roze)}
/* contactroutes in andere vorm (tekstlink met icoonvlak, chip), zodat er per sectie variatie is */
.db-art2__tel{display:inline-flex;align-items:center;gap:0.62rem;min-height:2.8rem;font:800 1.04rem/1.2 var(--db-font-kop);color:inherit;text-decoration:none}
.db-art2__tel i{display:grid;place-items:center;flex:none;width:2.55rem;height:2.55rem;background:var(--db-roze);color:var(--db-puurwit);border-radius:var(--db-radius)}
.db-art2__tel svg{width:1.10rem;height:1.10rem;fill:currentColor}
.db-art2__chip{display:inline-flex;align-items:center;gap:0.52rem;min-height:2.8rem;padding:0 1.2rem;font:700 1.01rem/1.2 var(--db-font-kop);color:inherit;text-decoration:none;background:color-mix(in srgb,currentColor 7%,transparent);border:var(--db-rand) solid var(--db-roze);border-radius:var(--db-radius)}
.db-art2__chip svg{flex:none;width:1.15rem;height:1.15rem;fill:currentColor}
.db-art2__hs a.db-art2__chip{box-shadow:none}
/* ---- Toonvarianten (website-kit RULES 4.26). Standaard verloop (zwart boven, grijs onder); --verloop-om en --grijs: grijs boven, zwart onder. */
.db-art2.db-art2--grijs,.db-art2.db-art2--verloop-om{--sectie-achtergrond:var(--db-gradient-om);--a2-breuk:linear-gradient(180deg,var(--db-grijs) 0,var(--db-zwart) 80%)}
@media (max-width:560px){.db-art2__tabel td::before{color:var(--db-tekst-zacht)}}
/* lange woorden: afbreken op smalle schermen, zonder de letter kleiner te maken */
@media (max-width:384px){
.db-art2__hs > :is(h2,h3){overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:14 11 6;-webkit-hyphenate-limit-before:11;-webkit-hyphenate-limit-after:6}
.db-art2__hs a{overflow-wrap:anywhere}
}
/* ---- vergelijk-tabel: vergelijk-tabel-v16 ---- */
/* toon: verloop (eigen achtergrond van deze sectie; varianten --grijs en --licht onderaan) */
/* ---- Profielen vergelijken v16 (Draagbalken.nl): een echte tabel. De profielen zijn de kolommen met een grote foto als kop (de balk zelf steekt boven het kader uit), de kenmerken zijn rijen; de eigenschap is een volle roze rij en de meters zijn ronde stippen met cijfer. Onder de tabel een donker antwoordblok met de keuzecriteria en een contactkaart met een werkfoto waaruit de balk boven de kaart uitsteekt. Een rustig wit tabelkader, groene offerteknop, een straal op alle hoeken. ---- */
.db-vt16{
--sectie-achtergrond:var(--db-gradient);--offerte:#15803D;--offerte-hover:#166534;--wa:#25D366;--wa-hover:#1EBE5A;--vt-lab:11rem;--vt-wa:#25D366;--vt-lijn:rgb(var(--db-zwart-rgb) / .14);--vt-tint:var(--db-wit);--vt-vlak:rgb(var(--db-zwart-rgb) / .05);--vt-pop:3.4rem;--vt-as:rgb(var(--db-zwart-rgb) / .3);--vt-pijl:rgb(var(--db-zwart-rgb) / .55);--vt-ring:rgb(var(--db-zwart-rgb) / .22);--vt-zacht:rgb(var(--db-zwart-rgb) / .65);--vt-uitleg:rgb(var(--db-zwart-rgb) / .75);
position:relative;overflow:clip;padding:clamp(2.6rem,5vw,4.2rem) 0 clamp(3rem,6vw,5rem);
background:var(--sectie-achtergrond);color:var(--db-wit);font-family:var(--db-font-tekst);
}
.db-vt16 :focus-visible{outline:calc(2 * var(--db-rand)) solid var(--db-focus);outline-offset:3px}
.db-vt16__inner{width:min(100% - 2rem,76rem);margin:0 auto}
.db-vt16__kop{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:.9rem clamp(1.5rem,5vw,4rem);align-items:end;margin-bottom:clamp(1.6rem,3vw,2.4rem)}
.db-vt16__tag{grid-column:1 / -1;justify-self:start;margin:0;padding:.3rem 0 .3rem .7rem;background:none;box-shadow:inset var(--db-balk-links) 0 0 var(--db-roze);color:var(--db-puurwit);font:600 .8rem/1 var(--db-font-kop);letter-spacing:.14em;text-transform:uppercase}
.db-vt16 h2{margin:0;font:700 clamp(2rem,1.2rem + 2.6vw,3.1rem)/1.06 var(--db-font-kop);letter-spacing:-.02em;text-wrap:balance;overflow-wrap:break-word;hyphens:auto}
.db-vt16__lead{margin:0;font-size:1.1rem;line-height:1.62}
.db-vt16__lead strong{padding:.06em .32em;border-radius:var(--db-radius);background:var(--db-roze);color:var(--db-puurwit);font:700 1em var(--db-font-kop)}
/* tabelkader met een verschoven roze vlak erachter */
.db-vt16__kader{position:relative;isolation:isolate;padding:clamp(1rem,2.2vw,1.6rem) clamp(1rem,2.2vw,1.6rem) clamp(1.6rem,3.2vw,2.6rem);color:var(--db-zwart)}
.db-vt16__kader::before{content:"";position:absolute;z-index:-1;inset:0;border-radius:var(--db-radius);background:var(--db-wit);box-shadow:var(--db-schaduw)}
.db-vt16__as{display:grid;grid-template-columns:var(--vt-lab) minmax(0,1fr);align-items:center;margin-bottom:.9rem}
.db-vt16__as span:first-child{grid-column:2;grid-row:1;justify-self:start;font:700 .75rem/1.2 var(--db-font-kop);letter-spacing:.06em;text-transform:uppercase}
.db-vt16__as span:last-child{grid-column:2;grid-row:1;justify-self:end;font:700 .75rem/1.2 var(--db-font-kop);letter-spacing:.06em;text-transform:uppercase}
.db-vt16__as i{grid-column:2;grid-row:2;position:relative;display:block;height:2px;margin-top:.6rem;background:var(--vt-as)}
.db-vt16__as i::after{content:"";position:absolute;right:-1px;top:50%;width:.6rem;height:.6rem;border-top:2px solid var(--vt-pijl);border-right:2px solid var(--vt-pijl);transform:translateY(-50%) rotate(45deg)}
.db-vt16__tabel,.db-vt16__tabel thead,.db-vt16__tabel tbody{display:block;width:100%}
.db-vt16__cap{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.db-vt16__rij{display:grid;grid-template-columns:var(--vt-lab) repeat(var(--vt-n,3),minmax(0,1fr));column-gap:clamp(.8rem,1.6vw,1.3rem);align-items:start}
.db-vt16__rij>*{min-width:0;margin:0;padding:.85rem 0;font-weight:400;text-align:left}
.db-vt16__rij--kop>*{padding:.2rem 0 1rem}
.db-vt16__rij:not(.db-vt16__rij--kop){border-top:1px solid var(--vt-lijn)}
.db-vt16__kol{display:flex;flex-direction:column;gap:.8rem}
/* foto met een stuk dat uit het kader steekt */
.db-vt16__fig{position:relative;width:100%;margin:calc(var(--m) * 1%) 0 0;aspect-ratio:var(--r)}
.db-vt16__foto{position:absolute;inset:0;overflow:hidden;border-radius:var(--db-radius);background:var(--db-grijs)}
.db-vt16__foto img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.db-vt16__fig--ipe .db-vt16__foto,.db-vt16__fig--hea .db-vt16__foto,.db-vt16__fig--heb .db-vt16__foto{border:var(--db-rand) solid var(--db-roze);border-radius:var(--db-radius)}
.db-vt16__uit{position:absolute;z-index:2;left:calc(var(--l) * 1%);top:calc(var(--t) * 1%);width:calc(var(--pw) * 1%);height:auto;max-width:none;pointer-events:none}
.db-vt16__fig--ipe{--r:1297/865;--l:28.913;--t:-18.497;--pw:39.553;--m:12.34}
.db-vt16__fig--hea{--r:1282/855;--l:28.393;--t:-19.181;--pw:53.666;--m:12.79}
.db-vt16__fig--heb{--r:1357/905;--l:19.053;--t:-17.993;--pw:61.975;--m:12}
.db-vt16__fig--balk{--r:1600/1118;--l:4.828;--t:-27.467;--pw:84.253;--m:19.19}
.db-vt16__naam{display:flex;align-items:center;gap:.7rem}
.db-vt16__prof{flex:none;height:2.4rem;width:2.2rem;padding:0;background:none;fill:var(--db-zwart);stroke:var(--db-zwart);stroke-width:1.5;stroke-linejoin:round}
.db-vt16__naamtekst{display:flex;flex-direction:column;gap:.25rem;align-items:flex-start}
.db-vt16__naamtekst b{font:800 1.9rem/1 var(--db-font-kop)}
.db-vt16__naamtekst em{padding:0;background:none;color:var(--vt-zacht);font:500 .9rem/1.15 var(--db-font-kop);font-style:normal}
/* rijen */
.db-vt16__label{display:flex;align-items:center;gap:.5rem;font:700 .75rem/1.25 var(--db-font-kop);letter-spacing:.06em;text-transform:uppercase}
.db-vt16__label svg{width:1.15rem;height:1.15rem;flex:none}
.db-vt16__rij--eig{margin:.1rem -.8rem 0;padding:0 .8rem;border-radius:var(--db-radius);border:0!important;box-shadow:inset var(--db-balk-links) 0 0 var(--db-roze);background:var(--vt-tint);color:var(--db-zwart)}
.db-vt16__rij--eig td{font:600 1.05rem/1.3 var(--db-font-kop)}
.db-vt16__rij--maat td{display:flex;align-items:center;gap:.6rem}
.db-vt16__rij--maat{align-items:center}
.db-vt16__punten{display:flex;gap:.35rem}
.db-vt16__punten i{display:block;width:1.05rem;height:1.05rem;border-radius:50%;box-shadow:inset 0 0 0 2px var(--vt-ring)}
.db-vt16__punten i.aan{background:var(--db-roze);box-shadow:none}
.db-vt16__aantal{font:600 .85rem/1 var(--db-font-kop);color:var(--vt-pijl)}
.db-vt16__rij--tekst td{line-height:1.5;font-size:1.02rem}
.db-vt16__hoek{display:flex;flex-direction:column;justify-content:space-between;gap:1rem;align-self:stretch;padding:.9rem!important;border-radius:var(--db-radius);background:var(--vt-vlak)}
.db-vt16__hoek p{margin:0;color:var(--vt-uitleg);font-size:.82rem;line-height:1.45}
.db-vt16__profiel{font:700 .75rem/1.25 var(--db-font-kop);letter-spacing:.06em;text-transform:uppercase}
.db-vt16__stippen{display:flex;gap:.35rem}
.db-vt16__stippen i{display:block;width:1.05rem;height:1.05rem;border-radius:50%;box-shadow:inset 0 0 0 2px var(--vt-ring)}
.db-vt16__stippen i.aan{background:var(--db-roze);box-shadow:none}
/* onder de tabel */
.db-vt16__onder{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:1.4rem;align-items:stretch;margin-top:2rem}
.db-vt16__links{display:grid;gap:1.2rem;align-content:start;margin-top:0;padding:1.3rem 1.4rem;border-radius:var(--db-radius);border:var(--db-rand) solid var(--db-roze);background:var(--db-roze);color:var(--db-puurwit)} /* gebruiker 2026-10-27: tekst wit in het roze blok */
.db-vt16__links h3{margin:0 0 .5rem;font:700 1.15rem/1.2 var(--db-font-kop);color:var(--db-puurwit)}
.db-vt16__sterker p{margin:0;line-height:1.65}
.db-vt16__sterker strong{padding:.06em .32em;border-radius:var(--db-radius);background:var(--db-zwart);color:var(--db-puurwit);font-family:var(--db-font-kop)}
.db-vt16__sterker span{padding:.11rem .42rem;border-radius:var(--db-radius);border:1px solid var(--db-puurwit);color:var(--db-puurwit);font:700 .75rem/1.3 var(--db-font-kop);text-transform:uppercase;letter-spacing:.07em}
.db-vt16__crit{padding-top:1.1rem;border-top:1px solid var(--db-puurwit)}
.db-vt16__crit ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.db-vt16__crit li{display:flex;align-items:center;gap:.6rem;font:600 .98rem/1.3 var(--db-font-kop)}
.db-vt16__crit svg{width:1.3rem;height:1.3rem;flex:none;color:var(--db-puurwit)}
.db-vt16__kaart{display:grid;grid-template-columns:minmax(0,21rem) minmax(0,1fr);grid-template-rows:1fr 1fr auto;gap:.5rem 1.2rem;align-content:center;align-items:start;align-self:stretch;margin-top:0;padding:.8rem;border-radius:var(--db-radius);border:var(--db-rand) solid var(--db-roze);background:var(--db-wit);color:var(--db-zwart);box-shadow:var(--db-schaduw)}
.db-vt16__kaart .db-vt16__fig{margin:0}
.db-vt16__kaart-in{display:contents}
.db-vt16__kaart h3{grid-column:2;grid-row:1;align-self:end;margin:0;font:700 1.45rem/1.15 var(--db-font-kop)}
.db-vt16__kaart p{grid-column:2;grid-row:2;align-self:start;margin:0;line-height:1.55}
.db-vt16__kaart .db-vt16__fig{grid-column:1;grid-row:1 / span 2}
.db-vt16__kaart .db-vt16__foto::after{content:"";position:absolute;inset:0;border:var(--db-rand) solid var(--db-roze);border-radius:inherit;pointer-events:none}
.db-vt16__acties{grid-column:1 / -1;display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:.65rem;align-self:end;margin-top:.5rem}
.db-vt16__btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:3.2rem;padding:.7rem .9rem;border-radius:var(--db-radius);text-decoration:none;font:600 1rem/1.2 var(--db-font-kop);text-align:center;cursor:pointer}
.db-vt16__btn svg{width:1.15rem;height:1.15rem;flex:none}
.db-vt16__btn--form{background:var(--offerte);color:var(--db-puurwit)}
.db-vt16__btn--form:is(:hover,:focus-visible){background:var(--offerte-hover)}
.db-vt16__btn--tel{background:var(--db-zwart);color:var(--db-wit)}
.db-vt16__btn--wa{background:var(--wa);color:var(--db-puurwit);border:1px solid var(--wa)}
.db-vt16__btn--wa:is(:hover,:focus-visible){background:var(--wa-hover);border-color:var(--wa-hover)}
.db-vt16__btn--wa svg{color:var(--db-puurwit)}
@media (prefers-reduced-motion:no-preference){.db-vt16__btn{transition:transform .2s ease,background-color .2s ease}.db-vt16__btn:is(:hover,:focus-visible){transform:translateY(-2px)}.db-vt16__btn--form svg{transition:transform .2s ease}.db-vt16__btn--form:is(:hover,:focus-visible) svg{transform:translateX(4px)}}
@media (max-width:30rem){.db-vt16__btn{white-space:normal;padding-inline:.7rem}}
@media (max-width:64rem){
.db-vt16{--vt-lab:8.5rem}
.db-vt16__kop{grid-template-columns:minmax(0,1fr)}
.db-vt16__rij--eig td{font-size:1.05rem}
.db-vt16__rij--maat td{flex-wrap:wrap;gap:.4rem .6rem}
.db-vt16__naamtekst b{font-size:1.5rem}
.db-vt16__prof{display:none}
.db-vt16__rij--kop>.db-vt16__hoek{grid-column:1 / -1;grid-row:2;flex-direction:row;align-items:center;justify-content:flex-start;gap:.9rem;padding:.6rem .8rem!important;margin-bottom:.3rem}
.db-vt16__rij--kop>.db-vt16__hoek .db-vt16__profiel{display:none}
.db-vt16__rij--kop>.db-vt16__kol{grid-row:1}
.db-vt16__rij--kop>.db-vt16__kol:nth-child(2){grid-column:2}
.db-vt16__rij--kop>.db-vt16__kol:nth-child(3){grid-column:3}
.db-vt16__rij--kop>.db-vt16__kol:nth-child(4){grid-column:4}
.db-vt16__rij--kop>.db-vt16__kol:nth-child(5){grid-column:5}
.db-vt16__kaart{grid-template-columns:minmax(0,14rem) minmax(0,1fr)}
.db-vt16__onder{grid-template-columns:minmax(0,1fr);margin-top:2rem}
.db-vt16__links{margin-top:0}
.db-vt16__kaart{margin-top:var(--vt-pop)}
}
@media (max-width:46rem){
.db-vt16__kader{padding:1rem .8rem 1.2rem}
.db-vt16__as{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.db-vt16__as span:first-child{grid-column:1}
.db-vt16__as span:last-child{grid-column:2;text-align:right}
.db-vt16__as i{grid-column:1 / -1}
.db-vt16__as span{font-size:.68rem}
.db-vt16__tabel,.db-vt16__tabel thead,.db-vt16__tabel tbody{display:block}
.db-vt16__rij--kop{grid-template-columns:repeat(var(--vt-n,3),minmax(0,1fr));column-gap:.5rem}
.db-vt16__naam{flex-direction:column;align-items:flex-start;gap:.3rem}
.db-vt16__naamtekst{max-width:100%}
.db-vt16__naamtekst b{max-width:100%;font-size:clamp(.85rem,4.25vw,1.3rem);overflow-wrap:break-word;hyphens:auto}
.db-vt16__naamtekst em{max-width:100%;font-size:.7rem;padding:.2rem 0;overflow-wrap:break-word;hyphens:auto}
.db-vt16__rij:not(.db-vt16__rij--kop){display:block;margin-top:.9rem;padding-bottom:.4rem}
.db-vt16__rij:not(.db-vt16__rij--kop)>*{padding:.4rem 0}
.db-vt16__label{padding:.5rem .7rem!important;margin-bottom:.3rem;border-radius:var(--db-radius);background:var(--db-zwart);color:var(--db-wit)}
.db-vt16__rij--eig{margin:.9rem 0 0;padding:.5rem .7rem .7rem}
.db-vt16__rij>td{display:grid;grid-template-columns:minmax(0,1fr);gap:.25rem}
.db-vt16__rij>td::before{content:attr(data-p);justify-self:start;padding:.15rem .4rem;border-radius:var(--db-radius);background:var(--db-zwart);color:var(--db-wit);font:700 .72rem/1.2 var(--db-font-kop)}
.db-vt16__rij>td.db-vt16__hoek{display:flex}
.db-vt16__rij>td.db-vt16__hoek::before{content:none}
.db-vt16__hoek p{flex:1}
.db-vt16__rij--kop>.db-vt16__kol:nth-child(2){grid-column:1}
.db-vt16__rij--kop>.db-vt16__kol:nth-child(3){grid-column:2}
.db-vt16__rij--kop>.db-vt16__kol:nth-child(4){grid-column:3}
.db-vt16__rij--kop>.db-vt16__kol:nth-child(5){grid-column:4}
.db-vt16__rij--maat td{display:grid}
.db-vt16__rij--maat td>.db-vt16__punten{grid-column:2}
.db-vt16__rij--maat td>.db-vt16__aantal{display:none}
.db-vt16__kaart{grid-template-columns:minmax(0,1fr);grid-template-rows:none;margin-top:calc(var(--vt-pop) + .8rem)}
.db-vt16__kaart h3,.db-vt16__kaart p,.db-vt16__kaart .db-vt16__fig{grid-column:1;grid-row:auto}
.db-vt16__acties{grid-template-columns:minmax(0,1fr)}
.db-vt16__links{padding:1.1rem}
}
/* ---- Toonvarianten (website-kit RULES 4.26). De paginagenerator zet db-vt16--grijs (#404040) of db-vt16--licht (#F6F6F6) op de wortel.
Licht: kop en tabelkader (nu #F6F6F6) krijgen een witte tabel; tekst op de grond wordt donker, roze tekst op de grond wordt zwart op een roze vlak. */
.db-vt16.db-vt16--grijs,.db-vt16.db-vt16--verloop-om{--sectie-achtergrond:var(--db-gradient-om)}
.db-vt16.db-vt16--licht{--sectie-achtergrond:var(--db-wit);color:var(--db-zwart)}
.db-vt16--licht .db-vt16__tag{color:var(--db-zwart)}
.db-vt16--licht .db-vt16__kader{outline:1px solid var(--vt-lijn);outline-offset:0}
/* ---- checklist-risicos: checklist-risicos-v7 ---- */
/* toon: verloop (eigen achtergrond van deze sectie; varianten --grijs onderaan) */
/* ---- Checklist en risico's, versie 7: twee kolommen. Links een lichte kaart "Eerst regelen" met 8 rijen (nummer, vet label met regel),
links een donker paneel "Let op" met 5 waarschuwingen en gevolg-chips, met de foto erboven waarvan hoofd, schouders en stempelplaat als uitsnede boven de fotorand uitsteken; rechts de checklistkaart; onderaan een wit blok met de sleutelzin. */
.db-cr7{
--offerte:#15803D;--offerte-hover:#166534;--cr-over:3rem;--cr7-wa:#25D366;--cr7-wa-hover:#1EBE5A;--cr-top:18%;
position:relative;overflow-x:clip;
padding:clamp(3rem,6vw,5rem) 0 clamp(3rem,6vw,5rem);
background:var(--db-gradient);color:var(--db-tekst-op-donker);font-family:var(--db-font-tekst);
}
.db-cr7 :focus-visible{outline:calc(2 * var(--db-rand)) solid var(--db-focus);outline-offset:3px}
.db-cr7__inner{width:min(100% - 2rem,75rem);margin:0 auto}
.db-cr7__kop{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.25rem 2rem}
.db-cr7__tag{display:inline-block;margin:0 0 1rem;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-cr7 h2{margin:0;max-width:22ch;color:var(--db-wit);font:700 clamp(1.9rem,1.1rem + 2.5vw,3.1rem)/1.08 var(--db-font-kop);letter-spacing:-.015em;text-wrap:balance}
.db-cr7__btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:3rem;padding:.75rem 1.3rem;border-radius:var(--db-radius);font:700 .95rem/1.2 var(--db-font-kop);text-decoration:none;cursor:pointer}
.db-cr7__btn svg{width:1.2rem;height:1.2rem;flex:none}
.db-cr7__btn--prim{background:var(--offerte);color:var(--db-puurwit)}
.db-cr7__btn--prim:is(:hover,:focus-visible){background:var(--offerte-hover)}
.db-cr7__twee{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1fr);gap:clamp(1.25rem,3vw,2.25rem);margin-top:clamp(1.75rem,3vw,2.5rem)}
.db-cr7__h3{display:flex;align-items:center;gap:.7rem;margin:0 0 1rem;font:700 clamp(1.2rem,1rem + .7vw,1.5rem)/1.2 var(--db-font-kop)}
.db-cr7__h3 span:last-child{margin-left:.3rem;font:500 .88rem/1.2 var(--db-font-kop);opacity:.75}
.db-cr7__badge{display:grid;place-items:center;flex:none;width:2.3rem;height:2.3rem;border-radius:var(--db-radius);background:var(--db-roze);color:var(--db-puurwit)}
.db-cr7__badge svg{width:1.35rem;height:1.35rem}
.db-cr7__h3 .db-cr7__badge{opacity:1}
/* links: lichte checklistkaart */
.db-cr7__kaart{display:flex;flex-direction:column;padding:clamp(1.1rem,2.4vw,1.6rem);border:var(--db-rand) solid var(--db-roze);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-cr7__lijst{list-style:none;margin:0;padding:0 0 .4rem;display:flex;flex-direction:column;flex:1}
.db-cr7__rij{flex:1;display:grid;grid-template-columns:2.2rem minmax(0,1fr);align-items:center;gap:.85rem;padding:.55rem 0;border-top:1px solid var(--db-wit)}
.db-cr7__nr{display:grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:50%;background:var(--db-zwart);color:var(--db-puurwit);font:700 .95rem/1 var(--db-font-kop)}
.db-cr7__wat{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.db-cr7__wat strong{font:700 1.05rem/1.25 var(--db-font-kop)}
.db-cr7__wat span{font-size:.9rem;line-height:1.4}
.db-cr7__rij .db-cr7__wat span{color:var(--db-tekst-zacht)}
/* links: foto met uitsnede boven de rand, daaronder het donkere paneel met roze rand */
.db-cr7__rechts{display:flex;flex-direction:column;min-width:0}
.db-cr7__foto{position:relative;z-index:2;margin:0 1.5rem calc(var(--cr-over) * -1) -.75rem;aspect-ratio:1297 / 689}
.db-cr7__basis{position:absolute;inset:0;width:100%;height:100%;clip-path:inset(var(--cr-top) 0 0 0 round var(--db-radius))}
.db-cr7__ram{position:absolute;inset:var(--cr-top) 0 0 0;border:var(--db-rand) solid var(--db-roze);border-radius:var(--db-radius);pointer-events:none}
.db-cr7__uit{position:absolute;left:0;top:0;width:100%;height:auto;pointer-events:none}
.db-cr7__paneel{flex:1;position:relative;z-index:1;display:flex;flex-direction:column;padding:calc(var(--cr-over) + 1.4rem) clamp(1.1rem,2.4vw,1.6rem) clamp(1.1rem,2.4vw,1.6rem);border:var(--db-rand) solid var(--db-roze);border-radius:var(--db-radius);background:var(--db-zwart)}
.db-cr7__h3--let{color:var(--db-puurwit)}
.db-cr7__risicos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.15rem}
.db-cr7__risico{display:grid;grid-template-columns:2.3rem minmax(0,1fr);align-items:center;gap:.85rem;padding:.5rem 0;border-top:1px solid var(--db-grijs)}
.db-cr7__rico{display:grid;place-items:center;width:2.3rem;height:2.3rem;border-radius:var(--db-radius);background:var(--db-roze);color:var(--db-puurwit)}
.db-cr7__rico svg{width:1.3rem;height:1.3rem}
.db-cr7__risico strong{color:var(--db-puurwit)}
.db-cr7__risico .db-cr7__wat span{color:var(--db-wit);opacity:.85}
.db-cr7__chiptitel{margin:auto 0 .6rem;padding-top:1rem;color:var(--db-wit);font:700 .8rem/1.2 var(--db-font-kop);letter-spacing:.1em;text-transform:uppercase}
.db-cr7__chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem}
.db-cr7__chips li{padding:.4rem .7rem;border:var(--db-rand) solid var(--db-roze);border-radius:var(--db-radius);background:var(--db-roze);color:var(--db-puurwit);font:600 .82rem/1.2 var(--db-font-kop)}
/* onderaan: wit blok met de sleutelzin en de twee snelle wegen */
.db-cr7__band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;margin-top:clamp(1.25rem,3vw,2rem);padding:clamp(1.1rem,2.4vw,1.6rem) clamp(1.1rem,2.6vw,2rem);border-radius:var(--db-radius);background:var(--db-puurwit);color:var(--db-tekst)}
.db-cr7__band p{margin:0;flex:1 1 24rem;max-width:44rem;font:700 clamp(1.1rem,1rem + .5vw,1.4rem)/1.35 var(--db-font-kop)}
.db-cr7__acties{display:flex;flex-wrap:wrap;gap:.7rem}
.db-cr7__btn--wa{background:var(--cr7-wa);color:var(--db-puurwit)}
.db-cr7__btn--wa:is(:hover,:focus-visible){background:var(--cr7-wa-hover)}
.db-cr7__band .db-cr7__btn--tel{background:var(--db-zwart);color:var(--db-puurwit)}
.db-cr7__band :focus-visible{outline-color:var(--db-zwart)}
.db-cr7__kaart :focus-visible{outline-color:var(--db-zwart)}
@media (max-width:900px){
.db-cr7__twee{grid-template-columns:minmax(0,1fr)}
.db-cr7__foto{margin:0 auto calc(var(--cr-over) * -1);width:min(100%,34rem)}
}
@media (max-width:600px){
.db-cr7{--cr-over:2.25rem}
.db-cr7__kopknop,.db-cr7__kopknop .db-cr7__btn,.db-cr7__acties,.db-cr7__acties .db-cr7__btn{width:100%}
.db-cr7__wat strong{font-size:1rem}
.db-cr7__wat span{font-size:.86rem}
.db-cr7__rij{gap:.65rem}
}
/* hover:start */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
.db-cr7__btn{transition:transform .2s ease}
.db-cr7__btn:is(:hover,:focus-visible){transform:translateY(-2px)}
}
/* ---- Toonvarianten (website-kit RULES 4.26). De paginagenerator zet db-cr7--grijs (#404040) op de wortel.
Het donkere paneel, de kaart en het sleutelzinblok hebben een eigen vlak; alleen de sectiegrond wisselt. */
.db-cr7.db-cr7--grijs,.db-cr7.db-cr7--verloop-om{background:var(--db-gradient-om)}
/* ---- voorbeeld-document: voorbeeld-document-v14 ---- */
/* toon: verloop (eigen achtergrond van deze sectie; varianten --grijs onderaan) */
/* ---- Voorbeeld document, versie 14: wijziging van versie 11. Drie stapkaarten waarin een stuk van de foto (hoofden, stalen balk) boven het kader uitsteekt zonder schaduw, met een dunne roze rand strak om de foto; witte lijstkaart met een label per onderdeel; contactkaart met Pascal Treffers op een podium met een werkfoto als achtergrond (donker getoond) en dunne roze rand en bel- en WhatsApp-knop op een regel. */
.db-vdoc14{
--v14-zacht:rgb(246 246 246 / .84);--v14-lijn:rgb(246 246 246 / .2);--v14-inkt:rgb(12 12 12 / .14);--v14-wa:#25D366;--offerte:#15803D;--offerte-hover:#166534;--wa:#25D366;--wa-hover:#1EBE5A;--sectie-achtergrond:var(--db-gradient);--v14-breuk:linear-gradient(180deg,var(--db-zwart) 0,var(--db-grijs) 80%);--v14-chip:var(--db-grijs);--v14-toon-1:rgb(12 12 12 / .35);--v14-toon-2:rgb(12 12 12 / .6);--v14-knop:var(--db-roze);--v14-knop-hover:color-mix(in srgb,var(--db-roze) 82%,var(--db-zwart));
position:relative;isolation:isolate;overflow:clip;padding:clamp(3.5rem,7vw,6rem) 0;background:var(--sectie-achtergrond);color:var(--db-tekst-op-donker);font-family:var(--db-font-tekst)}
.db-vdoc14 :focus-visible{outline:calc(2 * var(--db-rand)) solid var(--db-focus);outline-offset:3px}
.db-vdoc14__inner{width:min(100% - 2rem,75rem);margin:0 auto}
.db-vdoc14__kop>div:first-child{min-width:0;container-type:inline-size} /* cqi voor de kop: het langste woord past altijd in de kolom */
.db-vdoc14__kop{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:1.5rem clamp(2rem,5vw,5rem);align-items:center}
.db-vdoc14__tag{display:inline-block;margin:0 0 1rem;padding:.4rem .7rem;border-radius:var(--db-radius);background:var(--db-roze);color:var(--db-puurwit);font:600 .8rem/1 var(--db-font-kop);letter-spacing:.1em;text-transform:uppercase}
.db-vdoc14 h2{margin:0;max-width:max(16ch,12.5em);color:var(--db-tekst-op-donker);font:700 min(clamp(1.75rem,1.1rem + 2.4vw,3.2rem),8.3cqi)/1.07 var(--db-font-kop);letter-spacing:-.02em;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-vdoc14__sit{display:grid;gap:.9rem}
.db-vdoc14__sit p{display:grid;grid-template-columns:5.6rem minmax(0,1fr);gap:1rem;align-items:start;margin:0;color:var(--v14-zacht);font-size:1.05rem;line-height:1.6}
.db-vdoc14__label{display:block;padding:.45rem .5rem;border-radius:var(--db-radius);background:var(--v14-chip);color:var(--db-puurwit);font:700 .75rem/1 var(--db-font-kop);letter-spacing:.1em;text-align:center;text-transform:uppercase}
.db-vdoc14__sit p + p .db-vdoc14__label{background:var(--db-wit);color:var(--db-roze)}
.db-vdoc14__stappen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;margin:clamp(6.2rem,9vw,7.6rem) 0 0;padding:0;list-style:none}
.db-vdoc14__stap{position:relative;min-width:0;display:flex;flex-direction:column;padding:1rem 1.1rem 1.6rem;border:var(--db-rand) solid var(--db-roze);border-radius:var(--db-radius);background:var(--db-puurwit);color:var(--db-zwart)}
.db-vdoc14__pop{position:relative;margin:calc(var(--pt) * -1) 0 1.4rem;padding-top:var(--pt)}
.db-vdoc14::before{content:"";position:absolute;z-index:-1;left:-6%;right:-6%;top:30%;bottom:-6%;background:var(--v14-breuk);transform:skewY(calc(var(--db-helling) * -1));transform-origin:100% 100%;pointer-events:none}
.db-vdoc14__fr{aspect-ratio:1450 / 809;border-radius:var(--db-radius);overflow:hidden;box-shadow:0 0 0 var(--db-rand) var(--db-roze)}
.db-vdoc14__fr img{display:block;width:100%;height:100%;object-fit:cover}
.db-vdoc14__cut{position:absolute;z-index:2;left:0;top:0;width:100%;height:auto;pointer-events:none;clip-path:inset(-3rem -3rem var(--cb) -3rem)}
.db-vdoc14__kopje{display:grid;grid-template-columns:2.7rem minmax(0,1fr) auto;gap:.8rem;align-items:center;margin-bottom:.8rem}
.db-vdoc14__nr{display:grid;place-items:center;width:2.7rem;height:2.7rem;border-radius:var(--db-radius);background:var(--db-roze);color:var(--db-puurwit);font:700 1.35rem/1 var(--db-font-kop)}
.db-vdoc14__kopje h3{margin:0;font:700 1.35rem/1.15 var(--db-font-kop)}
.db-vdoc14__stap p{margin:0;color:var(--db-tekst);font-size:1.02rem;line-height:1.62}
.db-vdoc14__stap strong{color:var(--db-zwart);font-weight:700}
.db-vdoc14__plan{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:1.5rem;margin-top:clamp(5.4rem,7vw,6.4rem);align-items:stretch}
.db-vdoc14__lijstkaart{min-width:0;padding:1.6rem clamp(1.2rem,2.6vw,2rem) .7rem;border:var(--db-rand) solid var(--db-roze);border-radius:var(--db-radius);background:var(--db-puurwit);color:var(--db-zwart)}
.db-vdoc14__lijstkop{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.9rem}
.db-vdoc14__lijstkop h3{margin:0;font:700 1.5rem/1.2 var(--db-font-kop)}
.db-vdoc14__aantal{flex:none;padding:.45rem .7rem;border-radius:var(--db-radius);background:var(--db-roze);color:var(--db-puurwit);font:700 .76rem/1 var(--db-font-kop);letter-spacing:.09em;text-transform:uppercase}
.db-vdoc14__lijst{margin:0;padding:0;list-style:none}
.db-vdoc14__lijst li{display:grid;grid-template-columns:2.8rem minmax(0,1fr);gap:1rem;align-items:center;padding:.72rem 0;border-top:1px solid var(--v14-inkt);font-size:1.04rem;line-height:1.45}
.db-vdoc14__chip{display:grid;place-items:center;width:2.8rem;height:2.8rem;border-radius:var(--db-radius);background:var(--db-roze)}
.db-vdoc14__tekst small{display:block;margin-bottom:.15rem;color:var(--db-grijs);font:700 .75rem/1.2 var(--db-font-kop);letter-spacing:.1em;text-transform:uppercase}
.db-vdoc14__tekst strong{font-weight:700}
.db-vdoc14__contact{position:relative;min-width:0;display:flex;flex-direction:column;padding:.8rem;border:var(--db-rand) solid var(--db-roze);border-radius:var(--db-radius);background:var(--db-puurwit);color:var(--db-zwart)}
.db-vdoc14__podium{position:relative;flex:1 1 auto;min-height:15rem;border:var(--db-rand) solid var(--db-roze);border-radius:var(--db-radius);background:linear-gradient(180deg,var(--v14-toon-1),var(--v14-toon-2)),url("/assets/fotos/voorbeeld-document-v14-achtergrond.webp") center / cover no-repeat var(--db-zwart)}
.db-vdoc14__werker{position:absolute;left:50%;bottom:0;width:74%;margin:0;transform:translateX(-50%);pointer-events:none}
.db-vdoc14__werker img{width:100%;height:auto}
/* het vak van de werker heeft altijd de maat van de torsofoto (800 x 922). Een hogere uitsnede, zoals een hele persoon, vult het vak vanaf de bovenkant en steekt dus niet verder boven het paneel uit dan de torso (stak op /stempelplan-laten-maken/ in de lijstkaart) */
.db-vdoc14__werker{aspect-ratio:800 / 922}
.db-vdoc14__werker img{height:100%;object-fit:cover;object-position:50% 0}
/* onder 360 px past "constructieberekening" niet op 1,5rem in de kop van de lijstkaart */
@media (max-width:359px){.db-vdoc14__lijstkop h3{font-size:1.3rem}}
.db-vdoc14__body{flex:none;display:flex;flex-direction:column;justify-content:center;gap:.7rem;padding:1.2rem .6rem .6rem}
.db-vdoc14__vraag{margin:0 0 .3rem;font:700 1.25rem/1.3 var(--db-font-kop)}
.db-vdoc14__btn{display:flex;align-items:center;justify-content:center;gap:.6rem;min-height:3.1rem;padding:0 1.2rem;border-radius:var(--db-radius);background:var(--v14-knop);color:var(--db-puurwit);font:700 1rem/1 var(--db-font-kop);text-decoration:none;cursor:pointer}
.db-vdoc14__btn:hover{background:var(--v14-knop-hover)}
.db-vdoc14__btn svg{width:1.1rem;height:1.1rem;flex:none;fill:currentColor}
.db-vdoc14__rij{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:.6rem}
.db-vdoc14__bel,.db-vdoc14__wa{display:flex;align-items:center;justify-content:center;gap:.6rem;min-height:3.1rem;padding:.35rem .7rem;border-radius:var(--db-radius);font:700 1rem/1.15 var(--db-font-kop);text-decoration:none}
.db-vdoc14__bel{border:var(--db-rand) solid var(--db-roze);background:var(--db-puurwit);color:var(--db-zwart);box-shadow:none}
.db-vdoc14__bel svg{width:1.35rem;height:1.35rem;flex:none}
.db-vdoc14__bel small{display:block;color:var(--db-grijs);font:600 .75rem/1.2 var(--db-font-kop);letter-spacing:.08em;text-transform:uppercase}
.db-vdoc14__wa{background:var(--wa);color:var(--db-puurwit)}
.db-vdoc14__wa:hover{background:var(--wa-hover)}
.db-vdoc14__wa svg{width:1.3rem;height:1.3rem;flex:none;color:var(--db-puurwit)}
@media (max-width:1000px){
.db-vdoc14__kop{grid-template-columns:minmax(0,1fr)}
.db-vdoc14__stappen{grid-template-columns:minmax(0,1fr);gap:5.2rem}
.db-vdoc14__stap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);column-gap:1.6rem;align-items:start;padding:1.2rem 1.2rem 1.4rem}
.db-vdoc14__pop{grid-row:1 / span 2;margin-bottom:0}
.db-vdoc14__kopje{align-self:end}
.db-vdoc14__plan{grid-template-columns:minmax(0,1fr);row-gap:6.4rem}
.db-vdoc14__contact{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:.8rem}
.db-vdoc14__podium{min-height:14rem}
.db-vdoc14__werker{width:68%}
.db-vdoc14__body{padding:.4rem .4rem .4rem}
}
@media (max-width:620px){
.db-vdoc14__stappen{margin-top:6rem}
.db-vdoc14__stap{display:flex;padding:1rem 1rem 1.4rem}
.db-vdoc14__pop{margin-bottom:1.4rem}
.db-vdoc14__kopje{align-self:auto;grid-template-columns:2.7rem minmax(0,1fr)}
.db-vdoc14__kopje .i{display:none}
.db-vdoc14__sit p{grid-template-columns:minmax(0,1fr);gap:.5rem}
.db-vdoc14__label{justify-self:start;padding:.45rem .7rem}
.db-vdoc14__lijstkop{flex-wrap:wrap}
.db-vdoc14__lijst li{grid-template-columns:2.6rem minmax(0,1fr);gap:.8rem}
.db-vdoc14__chip{width:2.6rem;height:2.6rem}
.db-vdoc14__contact{display:flex}
.db-vdoc14__podium{flex:none;aspect-ratio:16 / 10;min-height:0}
.db-vdoc14__werker{width:58%}
.db-vdoc14__body{padding:1.2rem .4rem .4rem}
.db-vdoc14__bel,.db-vdoc14__wa{padding:.35rem .4rem;gap:.4rem;font-size:.9rem}
.db-vdoc14__bel svg{width:1.15rem;height:1.15rem}
}
/* onder 380px past het nummer niet naast WhatsApp (nummer brak, WhatsApp raakte de knoprand): de twee knoppen onder elkaar (D03-V5-02, B02-V5-01) */
@media (max-width:379px){
.db-vdoc14__rij{grid-template-columns:minmax(0,1fr)}
}
/* ---- Toonvarianten (website-kit RULES 4.26). De paginagenerator zet db-vdoc14--grijs (#404040) op de wortel.
Stapkaarten, lijstkaart en contactkaart hebben een eigen vlak; alleen de sectiegrond wisselt. */
.db-vdoc14.db-vdoc14--grijs,.db-vdoc14.db-vdoc14--verloop-om{--sectie-achtergrond:var(--db-gradient-om);--v14-breuk:linear-gradient(180deg,var(--db-grijs) 0,var(--db-zwart) 80%);--v14-chip:var(--db-zwart)}
/* ---- cta-strip: cta-strip-v7 ---- */
/* toon: verloop (eigen achtergrond van deze sectie; een andere toon per pagina komt via config.SECTIE_TOON en een klasse -- hieronder.) */
/* ---- Contactband, versie 7: zelfde als versie 6, alleen de band onder de werker en de vorm achter hem verschillen. Band = roze strook met donkere plaat erachter, cirkel = dunne roze ring. */
/* (aangepast uit library "opslag": Opslagkaart met diagonale band).
Zoals de bron: een donkere kaart links, de werker-uitsnede rechts, een diagonale band erachter met een donkere streep
onderaan die de afgesneden onderrand van de uitsnede verbergt. In Draagbalken: zwarte sectie, roze band onder 4 graden,
scherpe hoeken, groene offerteknop, bel en WhatsApp als eigen knoppen, een roze stempel "24 uur" op de lege plek rechts. */
.db-cta7{
--c7-wa:#25D366;--c7-wa-hover:#1EBE5A;--sectie-achtergrond:var(--db-gradient);--c7-hoogte:44rem;--c7-beeld:42rem;--c7-streep:7.5rem;--c7-lijn:1rem;--c7-band:15rem;--c7-schleier:.3;--c7-s:6.99cqi;--c7-y1:calc(var(--c7-band) - var(--c7-streep) + var(--c7-s));--c7-plaat:color-mix(in srgb,var(--db-roze) 55%,var(--db-puurwit));--c7-rand-onder:var(--db-grijs);
position:relative;overflow:hidden;container-type:inline-size;isolation:isolate;background:var(--sectie-achtergrond);color:var(--db-tekst-op-donker);font-family:var(--db-font-tekst)}
.db-cta7 :focus-visible{outline:calc(2 * var(--db-rand)) solid var(--db-focus);outline-offset:3px}
.db-cta7__band{position:absolute;left:0;right:0;bottom:0;height:var(--c7-band)} /* geen vlak zelf; twee scherpe stroken: roze + een donkere plaat er .75rem lager achter (zelfde afstand als de roze plaat achter de kaart) */
.db-cta7__band::before,.db-cta7__band::after{content:"";position:absolute;inset:0}
.db-cta7__band::before{z-index:3;background:var(--db-zwart);clip-path:polygon(0 calc(var(--c7-y1) - 1.5rem),100% calc(calc(var(--c7-y1) - 1.5rem) - var(--c7-s)),100% calc(calc(var(--c7-y1) + 1rem) - var(--c7-s)),0 calc(var(--c7-y1) + 1rem))} /* plaat loopt door tot onder de streep: ring en onderrand van de uitsnede blijven helemaal erachter */
.db-cta7__band::after{z-index:1;background:var(--db-roze);clip-path:polygon(0 calc(var(--c7-y1) - 4.5rem),100% calc(calc(var(--c7-y1) - 4.5rem) - var(--c7-s)),100% calc(calc(var(--c7-y1) - 1.5rem) - var(--c7-s)),0 calc(var(--c7-y1) - 1.5rem))}
.db-cta7__streep{position:absolute;z-index:3;left:0;right:0;bottom:0;height:var(--c7-streep);background:var(--c7-rand-onder);clip-path:polygon(0 6.99cqi,100% 0,100% calc(100% + 1px),0 calc(100% + 1px))} /* onderrand 1px onder de sectie: anders schemert de foto op een gebroken pixelpositie door de laatste rij (SITE-R4-V1) */
.db-cta7__binnen{position:relative;display:grid;grid-template-columns:minmax(0,33rem) minmax(0,1fr);align-items:end;column-gap:clamp(1rem,3vw,3rem);width:min(100% - 3rem,75rem);min-height:var(--c7-hoogte);margin:0 auto}
.db-cta7__kaart{position:relative;z-index:4;align-self:start;margin:3.5rem 0 0;padding:clamp(1.5rem,3vw,2.5rem);border:var(--db-rand) solid var(--db-roze);border-radius:var(--db-radius);background:var(--db-puurwit);color:var(--db-tekst);box-shadow:.75rem .75rem 0 var(--db-roze)}
.db-cta7__tag{display:inline-block;margin:0 0 1.1rem;padding:.4rem .7rem;border-radius:var(--db-radius);background:var(--db-roze);color:var(--db-actie-tekst);font:600 .8rem/1 var(--db-font-kop);letter-spacing:.14em;text-transform:uppercase}
.db-cta7 h2{margin:0;color:var(--db-zwart);font:700 clamp(2rem,1.3rem + 2.2vw,2.9rem)/1.08 var(--db-font-kop);letter-spacing:-.02em;text-wrap:balance;hyphens:auto;overflow-wrap:break-word}
.db-cta7__lead{margin:1rem 0 0;color:var(--db-tekst);font-size:1.05rem;line-height:1.6}
.db-cta7__acties{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;margin-top:1.6rem}
.db-cta7__knop{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:3.25rem;padding:.7rem 1rem;border:1px solid transparent;border-radius:var(--db-radius);font:700 .95rem/1.2 var(--db-font-kop);text-align:center;text-decoration:none}
.db-cta7__knop--offerte{grid-column:1/-1;background:var(--offerte);border-color:var(--offerte);color:var(--db-puurwit);font-size:1.05rem}
.db-cta7__knop--offerte:hover{background:var(--offerte-hover);border-color:var(--offerte-hover)}
.db-cta7__knop--bel{border-color:var(--db-zwart);background:transparent;color:var(--db-zwart)}
.db-cta7__knop--bel:hover{background:var(--db-zwart);color:var(--db-puurwit)}
.db-cta7__knop--wa{background:var(--c7-wa);border-color:var(--c7-wa);color:var(--db-puurwit)}
.db-cta7__knop--wa:hover{background:var(--c7-wa-hover);border-color:var(--c7-wa-hover)}
.db-cta7__ico{flex:none;width:1.4rem;height:1.4rem;fill:currentColor;overflow:visible}
.db-cta7__ico .db-cta7__sh{fill:var(--db-roze)}
.db-cta7__knop--offerte .db-cta7__ico{width:1.2rem;height:1.2rem}
.db-cta7__wa{flex:none;width:1.5rem;height:1.5rem}
.db-cta7__wa circle{fill:none}
.db-cta7__wa path{fill:var(--db-puurwit)}
/* uitsnede: staat op de onderrand van de sectie, de streep verbergt het middel; hoofd en borst steken boven de band uit */
.db-cta7__beeld{position:relative;z-index:2;justify-self:center;margin:0;height:var(--c7-beeld);aspect-ratio:857/1400}
.db-cta7__beeld::before{content:"";position:absolute;z-index:-1;left:50%;bottom:6%;width:120%;aspect-ratio:1;border-radius:50%;border:var(--db-rand) solid var(--db-roze);transform:translateX(-50%)} /* dunne roze ring in plaats van de witte schijf */
.db-cta7__beeld img{display:block;width:100%;height:100%;object-fit:contain;object-position:50% 100%}
.db-cta7__stempel{position:absolute;z-index:4;top:2.5rem;right:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;width:9rem;height:9rem;margin:0;padding:1rem;border-radius:50%;background:var(--db-roze);border:var(--db-balk) solid var(--db-puurwit);color:var(--db-zwart);text-align:center;transform:rotate(-8deg)}
.db-cta7__stempel strong{font:800 2rem/1 var(--db-font-kop);letter-spacing:-.02em}
.db-cta7__stempel span{font:600 .75rem/1.25 var(--db-font-kop);letter-spacing:.04em;text-transform:uppercase}
@media (max-width: 1100px){
.db-cta7__binnen{grid-template-columns:minmax(0,28rem) minmax(0,1fr)}
.db-cta7__stempel{width:8.75rem;height:8.75rem;padding:.8rem}
.db-cta7__stempel strong{font-size:1.6rem}
.db-cta7__stempel span{font-size:.75rem;letter-spacing:.02em}
}
@media (max-width: 900px){
.db-cta7{--c7-beeld:34rem}
.db-cta7{--c7-band:12.5rem;--c7-y1:calc(var(--c7-band) - 3rem)}
/* de band is zelf roze; de dunne roze lijn erboven valt ermee samen */
.db-cta7__streep{height:8rem;clip-path:polygon(0 calc(100% - 3rem),100% calc(100% - 3rem - 6.99cqi),100% calc(100% + 1px),0 calc(100% + 1px))}
.db-cta7__beeld::before{width:98%;bottom:0}
.db-cta7__binnen{display:block;width:min(100% - 2rem,34rem);min-height:0}
.db-cta7__kaart{margin:2rem 0 0}
.db-cta7__beeld{height:28rem;margin:1.5rem auto 0;width:min(100%,20.8rem);overflow:hidden;aspect-ratio:auto}
.db-cta7__beeld img{height:var(--c7-beeld);object-position:50% 0}
.db-cta7__stempel{top:auto;right:0;bottom:19rem;width:8.75rem;height:8.75rem;padding:.7rem;gap:.15rem}
.db-cta7__stempel strong{font-size:1.35rem}
.db-cta7__stempel span{font-size:.75rem;line-height:1.15;letter-spacing:.02em}
}
@media (max-width: 560px){
.db-cta7__acties{grid-template-columns:minmax(0,1fr)}
.db-cta7__kaart{box-shadow:.5rem .5rem 0 var(--db-roze)}
}
/* hover:start (alleen transform; gespiegeld op focus-visible) */
@media (hover: hover) and (prefers-reduced-motion: no-preference){
.db-cta7__knop{transition:transform .2s ease}
.db-cta7__knop:is(:hover,:focus-visible){transform:translateY(-2px)}
}
/* hover:end */
/* ---- Tonen (PAGINA-VULLING: cta grijs* en licht*). De paginagenerator zet db-cta7--grijs of db-cta7--licht op de wortel. De witte kaart, de roze band onder
de werker en de donkere onderband blijven; alleen het sectievlak verandert (effen #404040 of #F6F6F6). */
.db-cta7.db-cta7--grijs,.db-cta7.db-cta7--verloop-om{--sectie-achtergrond:var(--db-gradient-om);--c7-rand-onder:var(--db-zwart)}
.db-cta7.db-cta7--licht{--sectie-achtergrond:var(--db-wit);color:var(--db-tekst)}
.db-cta7.db-cta7--licht .db-cta7__beeld::before{border-color:var(--db-roze)} /* de ring is roze op beide tonen */
/* ---- auteur-gerelateerd: auteur-gerelateerd-v6 ---- */
/* toon: verloop (eigen achtergrond van deze sectie; de paginagenerator leest deze regel voor website-kit RULES 4.26. Een andere toon per pagina komt via config.SECTIE_TOON en een klasse -- hieronder.) */
/* ---- Auteur en gerelateerde artikelen, versie 6 (Draagbalken.nl), nieuw ontwerp uit de ideeen van de library
(card-on-band, tilted-block, popout-card, image-card-grid): een brede fotoband met schuine onderrand en de kop erop,
de drie artikelkaarten (elk met foto) hangen over de onderrand van de band, daaronder de auteursplaat met de uitsnede
van Michel Wit die boven de plaat uitsteekt. Merkwaarden uit ../_shared/tokens.css. */
.db-ag6{
--offerte:#15803D;--offerte-hover:#166534;--a6-s1:rgb(var(--db-zwart-rgb) / .88);--a6-s2:rgb(var(--db-zwart-rgb) / .62);--a6-s3:rgb(var(--db-zwart-rgb) / .25);--a6-s4:rgb(var(--db-zwart-rgb) / .12);
--a6-wa:#25D366;--a6-wa-hover:#1EBE5A;
--a6-inner:min(100% - 2rem,75rem);
--a6-rise:3.3rem;
position:relative;overflow:clip;padding:0 0 clamp(3rem,5vw,4.5rem);
--sectie-achtergrond:var(--db-gradient);background:var(--sectie-achtergrond);color:var(--db-tekst-op-donker);font-family:var(--db-font-tekst);
}
.db-ag6 :focus-visible{outline:calc(2 * var(--db-rand)) solid var(--db-focus);outline-offset:3px}
/* fotoband */
.db-ag6__band{position:relative;container-type:inline-size;isolation:isolate;
padding:clamp(3.5rem,6vw,5.5rem) 0 clamp(11rem,17vw,13rem);background:var(--db-gradient);
clip-path:polygon(0 0,100% 0,100% calc(100% - 6.99cqi),0 100%)}
.db-ag6__bandfoto{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.db-ag6__band::after{content:"";position:absolute;inset:0;z-index:-1;
background:linear-gradient(90deg,var(--a6-s1) 0%,var(--a6-s2) 55%,var(--a6-s3) 100%)}
.db-ag6__bandtekst{width:var(--a6-inner);margin:0 auto}
.db-ag6__tag{display:inline-block;margin:0 0 1.1rem;padding:.38rem .66rem;background:var(--db-roze);color:var(--db-puurwit);
font:600 .8rem/1 var(--db-font-kop);letter-spacing:.12em;text-transform:uppercase;border-radius:var(--db-radius)}
.db-ag6 h2{margin:0;max-width:16ch;font:700 clamp(2.1rem,1.3rem + 2.6vw,3.4rem)/1.06 var(--db-font-kop);letter-spacing:-.02em;color:var(--db-wit)}
.db-ag6__lead{margin:1rem 0 0;max-width:30rem;font-size:1.1rem;line-height:1.55;color:var(--db-wit)}
/* kaarten over de bandrand: kaartstijl van diensten-grid-v9 (witte kaart, dunne roze rand, roze balk onder, ingelegd fotovenster met uit-de-rand-uitsnede) */
.db-ag6__kaarten{position:relative;z-index:2;width:var(--a6-inner);margin:calc(-1 * clamp(8.5rem,13vw,10.5rem)) auto 0;
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.9rem,2vw,1.6rem)}
.db-ag6__kaart{position:relative;display:flex;flex-direction:column;min-width:0;margin-top:var(--a6-rise);padding:.7rem .7rem 0;background:var(--db-puurwit);color:var(--db-tekst);text-decoration:none;
border:var(--db-rand) solid var(--db-roze);border-radius:var(--db-radius);box-shadow:var(--db-schaduw),inset 0 calc(var(--db-balk) * -1) 0 var(--db-roze)}
.db-ag6__venster{position:relative;display:block;container-type:inline-size;aspect-ratio:1.8}
.db-ag6__ph-laag,.db-ag6__uit{position:absolute;left:0;right:0;top:-14.5cqw;bottom:0;display:block;pointer-events:none}
.db-ag6__ph-laag{clip-path:inset(14.5cqw 0 0 0 round var(--db-radius))}
.db-ag6__uit{z-index:2;clip-path:inset(-6rem 0 0 0)}
.db-ag6__ph-laag img,.db-ag6__uit img{position:absolute;left:0;top:0;display:block;width:calc(var(--z,1) * 100%);height:auto;max-width:none;margin:calc(var(--my,0%) * -1) 0 0 calc(var(--mx,0%) * -1)}
.db-ag6__venster::after{content:"";position:absolute;z-index:1;inset:0;border:var(--db-rand) solid var(--db-roze);border-radius:var(--db-radius);pointer-events:none}
.db-ag6__venster--vlak .db-ag6__rahmen{position:absolute;inset:0;display:block;overflow:hidden;border-radius:var(--db-radius);background:var(--db-zwart)}
.db-ag6__venster--vlak img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.db-ag6__lab{position:absolute;z-index:3;left:.5rem;bottom:.5rem;padding:.35rem .6rem;border-radius:var(--db-radius);background:var(--db-roze);color:var(--db-puurwit);
font:700 .75rem/1 var(--db-font-kop);letter-spacing:.1em;text-transform:uppercase}
.db-ag6__body{position:relative;display:flex;flex:1 1 auto;flex-direction:column;gap:.55rem;padding:.85rem .3rem 1.1rem}
.db-ag6__nr{position:absolute;right:.3rem;top:.7rem;font:300 2.3rem/1 var(--db-font-kop);letter-spacing:-.04em;color:var(--db-grijs)}
.db-ag6__kaart h3{margin:0;padding-right:3.4rem;font:700 1.15rem/1.25 var(--db-font-kop);text-wrap:balance}
.db-ag6__p{font-size:.96rem;line-height:1.55;color:var(--db-grijs)}
.db-ag6__meer{display:inline-flex;align-items:center;gap:.5rem;margin-top:auto;padding-top:.5rem;min-height:2.75rem;font:700 .95rem/1.2 var(--db-font-kop)}
.db-ag6__meer svg{width:1.1rem;height:1.1rem;flex:none;fill:currentColor}
.db-ag6__kaart:is(:hover,:focus-visible) .db-ag6__meer{color:var(--offerte)}
/* auteursplaat */
.db-ag6__auteur{position:relative;container-type:inline-size;width:var(--a6-inner);margin:clamp(3.2rem,5vw,4.2rem) auto 0;
display:grid;grid-template-columns:14.5rem minmax(0,1fr) 15.5rem;gap:clamp(1.2rem,3vw,2.6rem);align-items:center;
padding:2.2rem 2rem 2.2rem 0;min-height:17rem;border:var(--db-rand) solid var(--db-roze);border-radius:var(--db-radius);background:var(--db-puurwit);color:var(--db-tekst);box-shadow:var(--db-schaduw)}
.db-ag6__auteur :focus-visible{outline-color:var(--db-zwart)}
.db-ag6__figuur{position:relative;z-index:1;align-self:end;margin:0 0 -2.2rem;height:22rem;clip-path:inset(-6rem 0 0 0)}
.db-ag6__figuur img{position:absolute;left:50%;bottom:0;transform:translateX(-50%);height:100%;width:auto;max-width:none}
.db-ag6__tekst,.db-ag6__acties{position:relative;z-index:1;min-width:0}
.db-ag6__tekst{padding-top:2.4rem}
.db-ag6__label{display:inline-block;margin:0 0 .6rem;padding:.38rem .62rem;border-radius:var(--db-radius);background:var(--db-zwart);color:var(--db-puurwit);font:600 .78rem/1 var(--db-font-kop);letter-spacing:.14em;text-transform:uppercase}
.db-ag6__tekst h3{margin:0;font:700 1.6rem/1.15 var(--db-font-kop);color:var(--db-tekst)}
.db-ag6__rol{margin:.2rem 0 0;font-size:.95rem;color:var(--db-tekst)}
.db-ag6__bio{margin:.9rem 0 0;max-width:34rem;font-size:1.02rem;line-height:1.6}
.db-ag6__bio strong{font-weight:700}
.db-ag6__sta{margin:1rem 0 .5rem;font:600 .86rem/1 var(--db-font-kop);color:var(--db-tekst)}
.db-ag6__chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0;list-style:none}
.db-ag6__chips li{padding:.5rem .75rem;border-radius:var(--db-radius);border:0;background:var(--db-roze);color:var(--db-actie-tekst);font:600 .88rem/1.2 var(--db-font-kop)}
.db-ag6__acties{display:flex;flex-direction:column;gap:.7rem}
.db-ag6__btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:3.1rem;padding:.75rem 1rem;
font:700 .98rem/1.2 var(--db-font-kop);text-align:center;text-decoration:none}
.db-ag6__btn svg{width:1.15rem;height:1.15rem;flex:none}
.db-ag6__btn--offerte{background:var(--offerte);color:var(--db-puurwit);box-shadow:var(--db-schaduw)}
.db-ag6__btn--offerte svg{fill:currentColor}
.db-ag6__btn--offerte:is(:hover,:focus-visible){background:var(--offerte-hover)}
.db-ag6__btn--wa{background:var(--a6-wa);color:var(--db-zwart)}
.db-ag6__btn--wa:is(:hover,:focus-visible){background:var(--a6-wa-hover)}
.db-ag6__btn--wa .wa{width:1.5rem;height:1.5rem}
.db-ag6__btn--wa .wa circle{fill:var(--a6-wa)}
.db-ag6__btn--wa .wa path{fill:var(--db-puurwit)}
.db-ag6__link{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:2.75rem;font:700 .92rem/1.2 var(--db-font-kop);text-decoration:none;color:var(--db-zwart)}
.db-ag6__link svg{width:1rem;height:1rem;fill:currentColor}
.db-ag6__link:is(:hover,:focus-visible){background:var(--a6-s4)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
.db-ag6__kaart{transition:transform .25s ease}
.db-ag6__kaart:is(:hover,:focus-visible){transform:translateY(-4px)}
.db-ag6__btn{transition:transform .22s ease}
.db-ag6__btn:is(:hover,:focus-visible){transform:translateY(-2px)}
}
@media (max-width:1000px){
.db-ag6__auteur{grid-template-columns:12rem minmax(0,1fr);padding-right:1.4rem}
.db-ag6__acties{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap;align-items:center;padding-left:1.4rem}
.db-ag6__figuur{height:19rem;margin-bottom:0}
.db-ag6__tekst{padding-top:1.6rem}
}
@media (max-width:860px){
.db-ag6__kaarten{grid-template-columns:minmax(0,1fr);gap:1.1rem;margin-top:calc(-1 * 8rem)}
.db-ag6__venster{aspect-ratio:2.6}
}
@media (max-width:640px){
.db-ag6__band{padding-bottom:10rem}
.db-ag6__venster{aspect-ratio:1.8}
.db-ag6__auteur{display:flex;flex-direction:column;align-items:stretch;gap:1rem;padding:0 1.2rem 1.6rem;margin-top:5rem}
.db-ag6__figuur{align-self:center;order:-1;width:11rem;height:17rem;margin:-6rem 0 -.4rem}
.db-ag6__acties{padding-left:0;flex-direction:column;align-items:stretch}
.db-ag6__tekst{padding-top:0}
.db-ag6__btn{white-space:normal}
}
/* ---- Toon-varianten (website-kit RULES 4.26): alleen de sectie-achtergrond wisselt; de fotoband, de witte kaarten en de roze auteursplaat blijven leesbaar. */
.db-ag6.db-ag6--licht{--sectie-achtergrond:var(--db-wit);background:var(--sectie-achtergrond)}
.db-ag6.db-ag6--grijs,.db-ag6.db-ag6--verloop-om{--sectie-achtergrond:var(--db-gradient-om);background:var(--sectie-achtergrond)}
/* ---- 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 -- 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}
}