/* ---- gedeeld: iconen-iconen-css ---- */
/* Draagbalken iconenset, stijl "Harde schaduw" (gekozen 2026-10-27).
   Gebruik: <svg class="i"><use href="../_shared/iconen/sprite.svg#i-telefoon"/></svg>
   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 <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}
}
/* ---- missie-kernwaarden: missie-kernwaarden-v11 ---- */
/* 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.) */

/* ---- Missie en kernwaarden, versie 11 (herwerking van versie 7 na "bit less pink in the section. dont use the team image
   as full cutout, do it with out of bounds effect instead."). Licht missievlak: de teamfoto staat in een kader met een
   grijze verschoven plaat erachter; alleen de koppen van de zes medewerkers zijn uit dezelfde foto geknipt en steken boven
   de kaderrand uit. De kernwaarden zijn tabbladen van een map: de gekozen tab is wit en loopt over in het witte blad met
   de tekst, zodat knop en tekst aan elkaar vastzitten. Michel Wit staat aan de rechterrand van het blad en steekt erboven uit, naast
   de tabs. Roze alleen als dunne rand, nummer en klein label. De vijf bladen liggen op elkaar: de hoogte verspringt nooit. */
.db-mk11{
  --m11-pop:5.2rem;--m11-rand:clamp(1.5rem,4vw,3.25rem);--m11-michel:17rem;--m11-hover:#555555;--m11-tab:#E6E6E6;--m11-tab-hover:#D8D8D8;
  --offerte:#15803D;--offerte-hover:#166534;--g-blauw:#4285F4;--g-rood:#EA4335;--g-geel:#FBBC05;--g-groen:#34A853;--g-ster:#FBBC04;--wa-groen:#25D366;--wa-groen-hover:#1EBE5A;--sectie-achtergrond:var(--db-gradient);--m11-breuk:linear-gradient(180deg,var(--db-zwart) 0,var(--db-grijs) 80%);
  position:relative;isolation:isolate;overflow:clip;padding:clamp(2rem,4vw,3rem) 0 clamp(3.5rem,7vw,5.5rem);background:var(--sectie-achtergrond);color:var(--db-tekst-op-donker);font-family:var(--db-font-tekst);font-size:1rem;line-height:1.6}
.db-mk11 :focus-visible{outline:calc(2 * var(--db-rand)) solid var(--db-focus);outline-offset:4px}
.db-mk11__sprite{position:absolute;width:0;height:0}
.db-mk11__in{width:min(100% - 2rem,75rem);margin:0 auto}
.db-mk11 :where(h2,h3,p){margin:0;padding:0}

/* missie: licht vlak, kader met verschoven plaat, koppen boven het kader */
.db-mk11__missie{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:center;padding:2.4rem var(--m11-rand) 3.2rem;border:var(--db-rand) solid var(--db-roze);border-radius:var(--db-radius);background:var(--db-wit);color:var(--db-zwart)}
.db-mk11__plaat{display:none}
.db-mk11__team{position:relative;margin:-9.5% 1.2rem 0 0;padding-top:calc(16.235% - .195rem)}
.db-mk11__kader{display:block;width:100%;height:auto;aspect-ratio:1700/857;object-fit:cover;object-position:50% 100%;border-radius:var(--db-radius);box-shadow:1.1rem 1.1rem 0 0 var(--db-roze),0 0 0 var(--db-rand) var(--db-roze)}
.db-mk11__koppen{position:absolute;left:0;top:0;width:100%;height:auto;pointer-events:none}
.db-mk11__kern{min-width:0}
.db-mk11__tag{display:inline-block;margin-bottom:1.1rem;padding:.45rem .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:.12em;text-transform:uppercase}
.db-mk11 h2{max-width:20ch;color:var(--db-zwart);font:700 clamp(1.9rem,1.2rem + 2.2vw,2.9rem)/1.1 var(--db-font-kop);letter-spacing:-.02em;text-wrap:balance}
.db-mk11__lead{max-width:32rem;margin-top:1.2rem;color:var(--db-tekst-zacht);font-size:1.15rem;line-height:1.55}
.db-mk11__review{display:inline-flex;align-items:center;flex-wrap:wrap;gap:.4rem .7rem;margin-top:1.5rem;padding:.75rem 1.1rem;border-radius:var(--db-radius);background:var(--db-zwart);color:var(--db-tekst-op-donker);font:500 .9rem/1.3 var(--db-font-kop)}
.db-mk11__g{flex:none;width:1.6rem;height:1.6rem}
.db-mk11__g .gr1{fill:var(--g-rood)}
.db-mk11__g .gr2{fill:var(--g-blauw)}
.db-mk11__g .gr3{fill:var(--g-geel)}
.db-mk11__g .gr4{fill:var(--g-groen)}
.db-mk11__cijfer{font:800 1.45rem/1 var(--db-font-kop);letter-spacing:-.01em}
.db-mk11__sterren{display:inline-flex;gap:.12rem}
.db-mk11__sterren svg{fill:var(--g-ster);width:1.05rem;height:1.05rem}

/* kernwaarden: tabbladen van een map */
.db-mk11__waarden{margin-top:calc(var(--m11-pop) / 2 + 2.2rem)}
.db-mk11__wkop{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1.4rem;margin-bottom:1.2rem}
.db-mk11 h3#db-mk11-wk{color:var(--db-tekst-op-donker);font:700 clamp(1.5rem,1.1rem + 1.2vw,2rem)/1.15 var(--db-font-kop)}
.db-mk11__map{position:relative}
.db-mk11::before{content:"";position:absolute;z-index:-1;left:-6%;right:-6%;top:30%;bottom:-6%;background:var(--m11-breuk);transform:skewY(calc(var(--db-helling) * -1));transform-origin:100% 100%;pointer-events:none}
.db-mk11__tabs{position:relative;z-index:2;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.5rem;width:calc(100% - var(--m11-michel) - 1.5rem);margin-bottom:.7rem}
.db-mk11__tab{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45rem;min-height:5.4rem;margin:0;padding:.7rem .4rem .6rem;border:var(--db-rand) solid var(--db-roze);border-radius:var(--db-radius);background:var(--m11-tab);color:var(--db-zwart);font:600 .82rem/1.2 var(--db-font-kop);text-align:center;cursor:pointer}
.db-mk11__tab .ic{width:2rem;height:2rem;overflow:visible;color:var(--db-zwart)}
.db-mk11 :is(.ic,.db-mk11__ikoon) .sh{fill:var(--db-roze);transform:translate(1.4px,1.4px)}
.db-mk11 :is(.ic,.db-mk11__ikoon) use:not(.sh){fill:currentColor}
.db-mk11__nr{position:absolute;top:.4rem;left:.4rem;display:grid;place-items:center;width:1.4rem;height:1.4rem;border:var(--db-rand) solid var(--db-roze);border-radius:50%;background:var(--db-zwart);color:var(--db-tekst-op-donker);font:700 .7rem/1 var(--db-font-kop)}
.db-mk11__tab[aria-selected="true"]{border-color:var(--db-roze);border-bottom-color:var(--db-puurwit);background:var(--db-puurwit);color:var(--db-zwart)}
.db-mk11__tab[aria-selected="true"] .ic{color:var(--db-zwart)}
.db-mk11__tab[aria-selected="true"] .db-mk11__nr{background:var(--db-roze);color:var(--db-actie-tekst)}
.db-mk11__tab[aria-selected="true"]{border-bottom-left-radius:0;border-bottom-right-radius:0}
/* verbinding tab-blad: effen brug over de tussenruimte plus twee holle hoeken van 5px (zelfde straal) aan de buitenkant */
.db-mk11__tab[aria-selected="true"]::after{content:"";position:absolute;left:calc(-1px - var(--db-radius));right:calc(-1px - var(--db-radius));top:calc(100% + 1px);height:calc(.7rem + 1px);pointer-events:none;
  background:
    radial-gradient(circle at 0 0,transparent calc(var(--db-radius) - .5px),var(--db-puurwit) var(--db-radius)) 0 100% / var(--db-radius) var(--db-radius) no-repeat,
    radial-gradient(circle at 100% 0,transparent calc(var(--db-radius) - .5px),var(--db-puurwit) var(--db-radius)) 100% 100% / var(--db-radius) var(--db-radius) no-repeat,
    linear-gradient(var(--db-puurwit),var(--db-puurwit)) var(--db-radius) 0 / calc(100% - 2 * var(--db-radius)) 100% no-repeat}
.db-mk11__tab:first-child[aria-selected="true"]::after{left:-1px;background:
    radial-gradient(circle at 100% 0,transparent calc(var(--db-radius) - .5px),var(--db-puurwit) var(--db-radius)) 100% 100% / var(--db-radius) var(--db-radius) no-repeat,
    linear-gradient(var(--db-puurwit),var(--db-puurwit)) 0 0 / calc(100% - var(--db-radius)) 100% no-repeat}
.db-mk11__blad{position:relative;z-index:1;border:var(--db-rand) solid var(--db-roze);border-radius:var(--db-radius);background:var(--db-puurwit);color:var(--db-zwart)}
.db-mk11__map:has(.db-mk11__tab:first-child[aria-selected="true"]) .db-mk11__blad{border-top-left-radius:0}
.db-mk11__panelen{display:grid;grid-template-columns:minmax(0,1fr);align-content:start;padding:2rem calc(var(--m11-michel) + 2.4rem) 1.2rem 2.2rem}
.db-mk11__paneel{grid-area:1 / 1;display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.6rem;align-items:start;visibility:hidden}
.db-mk11__paneel.is-actief{visibility:visible}
.db-mk11__ikoon{width:4.4rem;height:4.4rem;overflow:visible;color:var(--db-zwart)}
.db-mk11__telt{display:inline-block;margin-bottom:.6rem;padding:.4rem .65rem;border-radius:var(--db-radius);font:600 .75rem/1 var(--db-font-kop);letter-spacing:.1em;text-transform:uppercase;color:var(--db-actie-tekst);background:var(--db-roze)}
.db-mk11__paneel h3{margin-bottom:.6rem;color:var(--db-tekst);font:700 clamp(1.6rem,1.2rem + 1.4vw,2.1rem)/1.1 var(--db-font-kop)}
.db-mk11__tekst{color:var(--db-tekst-zacht);font-size:1.03rem;line-height:1.65}
.db-mk11__nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-right:calc(var(--m11-michel) + 1rem);padding:.9rem 2.2rem 1.1rem;border-top:1px solid var(--db-grijs)}
.db-mk11__stap{display:inline-flex;align-items:center;gap:.6rem;min-height:2.9rem;margin:0;padding:.5rem 1.1rem;border:1px solid var(--db-zwart);border-radius:var(--db-radius);background:var(--db-zwart);color:var(--db-tekst-op-donker);font:600 .95rem/1.2 var(--db-font-kop);cursor:pointer}
.db-mk11__stap .pijl{width:1.1rem;height:1.1rem;fill:var(--db-roze)}
.db-mk11__teller{white-space:nowrap;color:var(--db-tekst);font:600 .95rem/1 var(--db-font-kop)}
.db-mk11__spreker{position:absolute;z-index:2;right:0;bottom:0;width:var(--m11-michel);margin:0;pointer-events:none}
.db-mk11__spreker img{display:block;width:100%;height:auto}
.db-mk11:not(.is-js) .db-mk11__paneel{grid-area:auto;visibility:visible;margin-bottom:1.5rem}

/* afsluiting: drie grote kaarten voor bellen, WhatsApp en offerte */
.db-mk11__partner{margin-top:clamp(2.5rem,5vw,3.75rem)}
.db-mk11__ptekst{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:.4rem clamp(1.5rem,4vw,4rem);align-items:start}
.db-mk11__ptekst h3{color:var(--db-tekst-op-donker);font:700 clamp(1.4rem,1.1rem + 1vw,1.8rem)/1.2 var(--db-font-kop)}
.db-mk11__ptekst p{max-width:40rem}
.db-mk11__contact{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem;margin-top:1.6rem}
.db-mk11__bel,.db-mk11__wa,.db-mk11__offerte{display:flex;align-items:center;gap:1rem;min-height:5.2rem;padding:.9rem 1.2rem;border-radius:var(--db-radius);text-decoration:none}
.db-mk11__bel{border:var(--db-rand) solid var(--db-roze);background:var(--db-puurwit);color:var(--db-zwart)}
.db-mk11__wa{border:1px solid var(--wa-groen);background:var(--wa-groen);color:var(--db-puurwit)}
.db-mk11__bel .tel{flex:none;width:3rem;height:3rem;padding:.7rem;border-radius:var(--db-radius);background:var(--db-roze);color:var(--db-zwart);fill:currentColor}
.db-mk11__wa .wa{flex:none;width:3rem;height:3rem;padding:.7rem;border-radius:var(--db-radius);background:transparent;fill:var(--db-puurwit)}
.db-mk11__offerte{justify-content:space-between;background:var(--offerte);color:var(--db-puurwit)}
.db-mk11__offerte .pijl{flex:none;width:1.5rem;height:1.5rem;fill:currentColor}
.db-mk11__bel-t{display:grid;gap:.1rem}
.db-mk11__bel-t small{font:500 .74rem/1.2 var(--db-font-kop);letter-spacing:.1em;text-transform:uppercase;opacity:.85}
.db-mk11__bel-t strong{font:700 clamp(1.15rem,.9rem + .6vw,1.4rem)/1.15 var(--db-font-kop)}
.db-mk11__offerte:is(:hover,:focus-visible){background:var(--offerte-hover)}
.db-mk11__bel:is(:hover,:focus-visible){background:var(--db-vlak)}
.db-mk11__wa:is(:hover,:focus-visible){background:var(--wa-groen-hover)}

@media (max-width: 1000px){
  .db-mk11{--m11-michel:10.4rem}
  .db-mk11__missie{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:2rem}
  .db-mk11__tabs{grid-template-columns:repeat(3,minmax(0,1fr));width:100%;margin-bottom:.8rem}
  .db-mk11__tab[aria-selected="true"]{border-radius:var(--db-radius)}
  .db-mk11__tab[aria-selected="true"]::after{display:none}
  .db-mk11__map:has(.db-mk11__tab:first-child[aria-selected="true"]) .db-mk11__blad{border-top-left-radius:var(--db-radius)}
  .db-mk11__panelen{padding:1.6rem 1.6rem 1rem}
  .db-mk11__nav{margin-right:0;padding-inline:1.6rem}
  .db-mk11__spreker{top:calc(-5.7rem - 1px);bottom:auto;clip-path:inset(0 0 calc(100% - 5.7rem) 0)}
  .db-mk11__waarden{margin-top:2.4rem}
  .db-mk11__ptekst{grid-template-columns:minmax(0,1fr)}
  .db-mk11__contact{grid-template-columns:minmax(0,1fr)}
}
@media (max-width: 560px){
  .db-mk11__tabs{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;align-items:stretch}
  .db-mk11__tabs .db-mk11__tab:last-child{grid-column:1 / -1}
  .db-mk11__tab{padding-inline:.4rem;font-size:.875rem;overflow-wrap:anywhere}
}
@media (max-width: 760px){
  .db-mk11{--m11-michel:8.6rem}
  .db-mk11__missie{grid-template-columns:minmax(0,1fr);gap:1.8rem;padding:1.8rem 1.3rem 2.4rem}
  .db-mk11__team{margin-right:1rem;margin-top:-9.5%;padding-top:calc(16.235% - .162rem)}
  .db-mk11__kader{box-shadow:.8rem .8rem 0 0 var(--db-roze),0 0 0 var(--db-rand) var(--db-roze)}
  .db-mk11__tab{min-height:4.6rem;font-size:.875rem}
  .db-mk11__tab .ic{width:1.7rem;height:1.7rem}
  .db-mk11__spreker{top:calc(-5.2rem - 1px);clip-path:inset(0 0 calc(100% - 5.2rem) 0)}
  .db-mk11__panelen{padding:1.4rem 1.2rem .8rem;container-type:inline-size}  /* cqi voor de kernwaardekop: "Verantwoordelijkheid" past naast het icoon */
  .db-mk11__paneel{grid-template-columns:auto minmax(0,1fr);gap:.2rem 1rem}
  .db-mk11__ptxt{display:contents}
  .db-mk11__ikoon{grid-row:1 / span 2;align-self:center;width:3.2rem;height:3.2rem}
  .db-mk11__paneel .db-mk11__telt{grid-column:2;grid-row:1;align-self:end;justify-self:start;margin:0}
  .db-mk11__paneel h3{grid-column:2;grid-row:2;margin:.3rem 0 0;font-size:min(clamp(1.6rem,1.2rem + 1.4vw,2.1rem),calc((100cqi - 4.4rem) / 11.2))}  /* langste woord is 10,9 em; kolom = paneelbreedte min icoon (3,2 rem) en tussenruimte (1 rem) */
  .db-mk11__paneel .db-mk11__tekst{grid-column:1 / -1;margin-top:.9rem}
  .db-mk11__nav{padding-inline:1.2rem}
  .db-mk11__stap{padding-inline:.8rem}
}

/* hover:start (alleen transform en achtergrond, gespiegeld op focus-visible) */
@media (hover: hover) and (prefers-reduced-motion: no-preference){
  .db-mk11__tab,.db-mk11__stap,.db-mk11__offerte,.db-mk11__bel,.db-mk11__wa{transition:transform .25s ease,background-color .2s ease}
  .db-mk11__tab[aria-selected="false"]:is(:hover,:focus-visible){transform:translateY(-2px);background:var(--m11-tab-hover)}
  .db-mk11__stap:is(:hover,:focus-visible){transform:translateY(-4px)}
  .db-mk11__offerte:is(:hover,:focus-visible),.db-mk11__bel:is(:hover,:focus-visible),.db-mk11__wa:is(:hover,:focus-visible){transform:translateY(-2px)}
}
/* hover:end */

/* toon licht (variant, lichte sectie): de tekst die direct op de sectie staat wordt donker; het missieblok houdt zijn witte vlak en krijgt een dunne rand, zodat het op het lichte vlak zichtbaar blijft. */
.db-mk11.db-mk11--licht{--sectie-achtergrond:var(--db-wit);color:var(--db-tekst)}
.db-mk11.db-mk11--licht .db-mk11__missie{outline:1px solid color-mix(in srgb,var(--db-zwart) 8%,transparent);outline-offset:-1px}
.db-mk11.db-mk11--licht h3#db-mk11-wk,.db-mk11.db-mk11--licht .db-mk11__ptekst h3{color:var(--db-tekst)}

.db-mk11.db-mk11--verloop-om{--sectie-achtergrond:var(--db-gradient-om);--m11-breuk:linear-gradient(180deg,var(--db-grijs) 0,var(--db-zwart) 80%)}
.db-mk11.db-mk11--verloop{--sectie-achtergrond:var(--db-gradient)}
/* ---- uitleg-band-donker: uitleg-band-donker-v5 ---- */
/* ---- Uitleg op donker, versie 5 (nieuw, ideeen offset-shape, dark-band).
   Gradientkaart links met een noot over de constructieberekening; rechts een staande werkfoto die over de kaartrand schuift en boven en onder de kaart uitsteekt, met een roze balk van 4 px onderaan. Alleen echte foto (geen uitsnede). Extra (r2): cirkelring en gekanteld blok als achtergrondvormen, rij met drie punten (berekening, vergunning, aanspreekpunt) met iconen; alle hoeken van foto, kaart en blokken gelijk afgerond. */
/* toon: verloop (eigen achtergrond van deze sectie; varianten --verloop-om en --grijs onderaan) */
.db-ubd5{--offerte:#15803D;--offerte-hover:#166534;--sectie-achtergrond:var(--db-gradient);--u5-blok:var(--db-zwart);--u5-over:2.5rem;--u5-pop:3.5rem;--u5-noot:var(--db-vlak);--u5-punt:var(--db-vlak);--u5-rand:rgb(var(--db-roze-rgb) / .55);position:relative;overflow:hidden;isolation:isolate;padding:calc(var(--u5-over) + var(--u5-pop) + 1rem) 0 calc(var(--u5-over) + 1rem);background:var(--sectie-achtergrond);font-family:var(--db-font-tekst)}
.db-ubd5 :focus-visible{outline:calc(2 * var(--db-rand)) solid var(--db-focus);outline-offset:3px}
.db-ubd5__wrap{width:min(100% - 2rem,75rem);margin:0 auto;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:stretch}
.db-ubd5__kaart{container-type:inline-size;position:relative;z-index:1;grid-column:1 / 10;grid-row:1;padding:clamp(2rem,4vw,3.25rem) clamp(7rem,10vw,9rem) clamp(2rem,4vw,3.25rem) clamp(1.75rem,4vw,3.25rem);
  background:var(--db-puurwit);border:var(--db-rand) solid var(--db-roze);border-radius:var(--db-radius);color:var(--db-tekst);box-shadow:var(--db-schaduw)}
.db-ubd5__foto{position:relative;z-index:2;grid-column:9 / 13;grid-row:1;margin:calc((var(--u5-over) + var(--u5-pop)) * -1) 0 calc(var(--u5-over) * -1)}
.db-ubd5__fenster{height:100%;min-height:20rem}
/* basis: foto in het venster; uit: uitgesneden stuk op dezelfde plek, steekt boven het venster uit */
.db-ubd5__basis,.db-ubd5__uit{position:absolute;inset:0;pointer-events:none}
.db-ubd5__basis{clip-path:inset(var(--u5-pop) 0 0 0 round var(--db-radius));background:var(--db-zwart)}
.db-ubd5__uit{z-index:2;clip-path:inset(-30rem 0 0 0)}
.db-ubd5__foto::after{content:"";position:absolute;z-index:1;inset:var(--u5-pop) 0 0 0;border:var(--db-rand) solid var(--db-roze);border-bottom:var(--db-balk) solid var(--db-roze);border-radius:var(--db-radius);box-shadow:var(--db-schaduw);pointer-events:none}
.db-ubd5__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-ubd5__cv img{display:block;width:100%;height:100%;object-fit:cover}
.db-ubd5__tag{display:inline-block;margin:0 0 1rem;padding:.35rem .65rem;border:var(--db-rand) solid var(--db-roze);border-radius:var(--db-radius);color:var(--db-tekst);font:600 .78rem/1 var(--db-font-kop);letter-spacing:.12em;text-transform:uppercase}
.db-ubd5 h2{margin:0;font:700 min(clamp(2rem,1.3rem + 2.2vw,3rem),8.3cqi)/1.08 var(--db-font-kop);letter-spacing:-.02em;text-wrap:balance;overflow-wrap:normal;hyphens:manual}  /* nooit midden in een woord breken (cqi: kaartbreedte) */
.db-ubd5__alinea{margin:1rem 0 0;max-width:36rem;font-size:1.08rem;line-height:1.6}
.db-ubd5__noot{margin:1.4rem 0 0;max-width:36rem;padding:1rem 1.1rem;border:var(--db-rand) solid var(--db-roze);border-left-width:var(--db-balk-links);border-radius:var(--db-radius);background:var(--u5-noot);font-size:1rem;line-height:1.55}
.db-ubd5__acties{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem;margin-top:1.6rem}
.db-ubd5__knop{display:inline-flex;align-items:center;gap:.6rem;min-height:3rem;padding:.8rem 1.3rem;border-radius:var(--db-radius);background:var(--offerte);color:var(--db-puurwit);font:600 1rem/1.2 var(--db-font-kop);text-decoration:none}
.db-ubd5__knop:is(:hover,:focus-visible){background:var(--offerte-hover)}
.db-ubd5__knop svg{flex:none;width:1.1rem;height:1.1rem;fill:currentColor}
.db-ubd5__bel{display:inline-flex;align-items:center;gap:.6rem;min-height:3rem;padding:.4rem .9rem;border:var(--db-rand) solid var(--db-roze);border-radius:var(--db-radius);color:var(--db-tekst);font:600 1rem/1.2 var(--db-font-kop);text-decoration:none}
.db-ubd5__bel svg{flex:none;width:1.2rem;height:1.2rem;fill:currentColor}
@media (max-width: 900px){
  .db-ubd5{--u5-over:0rem;--u5-pop:2.5rem;padding-block:calc(var(--u5-pop) + 1.5rem) 2.5rem}
  .db-ubd5__wrap{display:flex;flex-direction:column}
  .db-ubd5__foto{order:-1;margin:0 1rem -2.25rem auto;width:calc(100% - 3rem)}
  .db-ubd5__fenster{height:auto;min-height:0;margin-top:var(--u5-pop)}
  .db-ubd5__fenster{aspect-ratio:1 / .95}
  .db-ubd5__cv{top:var(--u5-pop);bottom:auto;left:calc(50% + var(--ox,0%));width:100%;height:auto;translate:-50% -22%}
  .db-ubd5__kaart{padding:3.25rem 1.5rem 2rem}
}
@media (max-width: 560px){
  .db-ubd5 h2{font-size:clamp(1.55rem,6.6vw,1.8rem)}
}
@media (max-width: 560px){
  .db-ubd5__acties{display:grid;grid-template-columns:minmax(0,1fr)}
  .db-ubd5__knop,.db-ubd5__bel{justify-content:center}
}
.db-ubd5__vorm{position:absolute;z-index:0;pointer-events:none}
.db-ubd5__vorm--ring{top:-5rem;right:-4rem;width:19rem;height:19rem;border:var(--db-rand) solid var(--db-roze);border-radius:50%;opacity:.7}
.db-ubd5__vorm--blok{bottom:-3.5rem;left:-3rem;width:12rem;height:12rem;background:var(--u5-blok);border-radius:var(--db-radius);transform:rotate(var(--db-helling))}
.db-ubd5__punten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;margin:1.4rem 0 0;padding:0;list-style:none}
.db-ubd5__punten li{display:flex;flex-direction:column;align-items:flex-start;gap:.6rem;padding:.85rem .9rem;border:1px solid var(--u5-rand);border-radius:var(--db-radius);background:var(--u5-punt);font:600 .92rem/1.3 var(--db-font-kop)}
@media (max-width: 900px){.db-ubd5__vorm--ring{width:12rem;height:12rem;top:-3rem;right:-3rem}.db-ubd5__vorm--blok{width:8rem;height:8rem}}
@media (max-width: 560px){.db-ubd5__punten{grid-template-columns:minmax(0,1fr)}.db-ubd5__punten li{flex-direction:row;align-items:center}}
/* werker-uitsnede (Lien Menick, vanaf het midden van de borst, gebruiker 2026-10-28) staat op de onderrand van de witte kaart, rechts tegen de foto; haar hoofd steekt een stukje over het grijze aanspreekpunt-blok. Hoogte volgt de afstand van dat blok tot de kaartrand */
.db-ubd5__kaart{--u5-gat:calc(var(--db-rand) + 1.6rem + 3rem + clamp(2rem,4vw,3.25rem))}
.db-ubd5__figuur{position:absolute;z-index:2;right:calc(100% / 9 - 2.5rem);bottom:calc(var(--db-rand) * -1);height:calc(var(--u5-gat) * 2.32);width:auto;aspect-ratio:532 / 734;border-radius:var(--db-radius);pointer-events:none}
@media (max-width: 900px){.db-ubd5__kaart{--u5-gat:calc(var(--db-rand) + 1.6rem + 3rem + 2rem)}.db-ubd5__figuur{right:.25rem}}
@media (max-width: 560px){.db-ubd5__figuur{display:none}}
/* hover:start (alleen transform; gespiegeld op focus-visible, RULES 5.3) */
@media (hover: hover) and (prefers-reduced-motion: no-preference){
  .db-ubd5__knop,.db-ubd5__bel{transition:transform .25s ease}
  .db-ubd5__knop:is(:hover,:focus-visible),.db-ubd5__bel:is(:hover,:focus-visible){transform:translateY(-2px)}
}
/* hover:end */

/* ---- Tonen: verloop-om (alias --grijs): grijs boven, donker onder. De kaart blijft effen wit, alleen achtergrond en het gekantelde blok (grijs op het donkere einde) wisselen. */
.db-ubd5.db-ubd5--grijs,.db-ubd5.db-ubd5--verloop-om{--sectie-achtergrond:var(--db-gradient-om);--u5-blok:var(--db-grijs)}

/* lange woorden: afbreken op smalle schermen, zonder de letter kleiner te maken */
@media (max-width:384px){
  .db-ubd5 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}
}
/* ---- team: team-v8 ---- */
/* 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-te8{--te8-groen:#15803D;--te8-groen-hover:#166534;--te8-wa:#25D366;--te8-wa-hover:#1EBE5A;--sectie-achtergrond:var(--db-gradient);--te8-schijf:var(--db-gradient-om);--te8-blok:linear-gradient(180deg,var(--db-zwart),var(--db-grijs));--te8-tegel:var(--db-zwart);--te8-schaduw:12px 12px 0 var(--db-zwart);--t:.4;--te8-rand:.7rem;--te8-voet:.9rem;--te8-uit:drop-shadow(0 .5rem .45rem rgb(var(--db-zwart-rgb) / .5));
  position:relative;isolation:isolate;overflow:clip;padding:clamp(3.5rem,6vw,5.5rem) 0;background:var(--sectie-achtergrond);color:var(--db-tekst-op-donker);font-family:var(--db-font-tekst)}
.db-te8::before{content:"";position:absolute;z-index:-1;left:-12rem;top:9rem;width:44rem;aspect-ratio:1;border-radius:50%;background:var(--te8-schijf)}
.db-te8::after{content:"";position:absolute;z-index:-1;right:0;bottom:0;width:58%;height:7rem;background:var(--te8-blok);clip-path:polygon(0 100%,18% 0,100% 0,100% 100%)}
.db-te8 :focus-visible{outline:calc(2 * var(--db-rand)) solid var(--db-focus);outline-offset:3px}
.db-te8__inner{width:min(100% - 2rem,75rem);margin:0 auto}
.db-te8__raster{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(2rem,4vw,3.5rem);align-items:start}
.db-te8__links,.db-te8__rechts{min-width:0}
.db-te8__tag{display:inline-block;margin:0 0 1rem;padding:.42rem .72rem;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-te8 h2{margin:0;font:700 clamp(2rem,1.3rem + 2.2vw,3rem)/1.08 var(--db-font-kop);letter-spacing:-.02em}
.db-te8__lead{margin:1rem 0 0;font-size:1.1rem;line-height:1.6}
/* scheve polaroid */
.db-te8__foto{position:relative;margin:.5rem .6rem 0 0}
.db-te8__fig{position:relative;aspect-ratio:1200/1240;transform:rotate(-2.5deg);transform-origin:50% 70%}
.db-te8__kaart{position:absolute;z-index:1;left:0;right:0;bottom:0;top:calc(var(--t) * 97.1% - var(--te8-rand));background:var(--db-puurwit);border-radius:var(--db-radius);box-shadow:var(--te8-schaduw)}
.db-te8__laag{position:absolute;z-index:2;inset:0;clip-path:inset(calc(var(--t) * 97.1%) var(--te8-rand) var(--te8-voet) var(--te8-rand))}
.db-te8__laag img{position:absolute;left:-8%;top:0;width:113.4%;max-width:none;height:auto}
.db-te8__cutout{position:absolute;z-index:3;left:0;top:0;width:100%;pointer-events:none;clip-path:inset(-3rem -3rem calc((.992 - var(--t)) * 100%) -3rem)}
.db-te8__cutout img{width:100%;height:auto;filter:var(--te8-uit)}
.db-te8__feit{position:absolute;z-index:4;left:0;top:3%;width:84%;margin:0;padding-left:.8rem;border-left:var(--db-balk) solid var(--db-roze);font:inherit;font-size:1.1rem;line-height:1.6}
/* spelerskaarten */
.db-te8__hint{margin:0;font:600 .8rem/1.2 var(--db-font-kop);letter-spacing:.1em;text-transform:uppercase}
.db-te8__tegels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3.1rem .7rem;margin-top:3.4rem}
.db-te8__tegel{position:relative;display:block;min-height:11.2rem;border:var(--db-rand) solid var(--db-roze);border-radius:var(--db-radius);background:var(--te8-tegel);color:var(--db-tekst-op-donker);text-decoration:none}
.db-te8__pop{position:absolute;left:0;right:0;top:-2.5rem;height:9.6rem;display:flex;justify-content:center;pointer-events:none}
.db-te8__pop img{width:auto;max-width:none;height:100%;filter:var(--te8-uit)}
.db-te8__txt{position:absolute;z-index:1;left:0;right:0;bottom:0;display:grid;gap:.15rem;align-content:start;min-height:4.2rem;padding:.5rem .6rem .6rem;border-radius:0 0 var(--db-radius) var(--db-radius);background:var(--db-puurwit);color:var(--db-zwart);box-shadow:0 calc(-1 * var(--db-rand)) 0 var(--db-roze)}
.db-te8__txt b{font:600 .92rem/1.15 var(--db-font-kop)}
.db-te8__txt small{font-size:.74rem;line-height:1.2;color:var(--db-grijs)}
.db-te8__tegel.is-actief{background:var(--db-wit);box-shadow:0 var(--db-balk) 0 var(--db-roze)}
.db-te8__tegel.is-actief .db-te8__txt{background:var(--db-puurwit);color:var(--db-zwart);opacity:1}
/* schuin contactpaneel */
.db-te8__detail{display:grid;margin-top:1.6rem}
.db-te8__paneel{position:relative;isolation:isolate;padding:1.6rem 2.2rem 1.8rem}
.db-te8__paneel::before{content:"";position:absolute;z-index:-1;inset:0;transform:skewX(calc(var(--db-helling) * -1));background:var(--db-zwart);border:var(--db-rand) solid var(--db-roze);border-bottom-width:var(--db-balk);border-radius:var(--db-radius)}
.db-te8__paneel h3{margin:0;font:700 clamp(1.7rem,1.1rem + 1.6vw,2.4rem)/1.05 var(--db-font-kop);letter-spacing:-.01em}
.db-te8__functie{display:inline-block;margin:.7rem 0 0;padding:.38rem .62rem;border-radius:var(--db-radius);background:var(--db-roze);color:var(--db-actie-tekst);font:600 .78rem/1 var(--db-font-kop);letter-spacing:.08em;text-transform:uppercase}
.db-te8__bio{margin:1rem 0 0;padding:.7rem .95rem;border:1px dashed var(--db-tekst-op-donker);border-radius:var(--db-radius);font-size:.92rem;opacity:.9}
.db-te8__acties{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.1rem}
.db-te8__knop{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:3rem;padding:.6rem 1rem;border-radius:var(--db-radius);text-decoration:none;font:600 .92rem/1.2 var(--db-font-kop);white-space:nowrap}
.db-te8__knop--offerte{flex:1 1 13rem;background:var(--te8-groen);color:var(--db-puurwit);font-size:1rem}
.db-te8__knop--offerte:is(:hover,:focus-visible){background:var(--te8-groen-hover)}
.db-te8__knop--chip{flex:0 1 auto;background:var(--db-puurwit);color:var(--db-zwart)}
.db-te8__knop svg{flex:none;width:1.2rem;height:1.2rem;fill:currentColor}
.db-te8__knop[href^="https://wa.me"]{background:var(--te8-wa);color:var(--db-puurwit)}
.db-te8__knop[href^="https://wa.me"]:is(:hover,:focus-visible){background:var(--te8-wa-hover)}
.db-te8__knop svg.wa{fill:currentColor}
.db-te8--js .db-te8__paneel{grid-area:1/1;visibility:hidden}
.db-te8--js .db-te8__paneel.is-actief{visibility:visible}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .db-te8__tegel{transition:transform .2s ease}
  .db-te8__tegel:not(.is-actief):hover{transform:translateY(-4px)}
  .db-te8__knop{transition:transform .25s ease}
  .db-te8__knop:is(:hover,:focus-visible){transform:translateY(-2px)}
}
@media (max-width:900px){
  .db-te8::before{left:-14rem;top:6rem;width:34rem}
  .db-te8__raster{grid-template-columns:minmax(0,1fr);gap:2.4rem}
  .db-te8__foto{width:min(100% - 1rem,32rem);margin:0 auto}
  .db-te8__feit{position:static;width:auto;margin:1.4rem 0 0}
  .db-te8__tegels{margin-top:3.2rem}
}
@media (max-width:560px){
  .db-te8{--te8-rand:.5rem;--te8-voet:.6rem}
  .db-te8__tegels{gap:2.4rem .4rem;margin-top:2.8rem}
  .db-te8__tegel{min-height:8.4rem}
  .db-te8__pop{top:-1.9rem;height:7rem}
  .db-te8__txt{min-height:3.2rem;padding:.4rem .3rem .5rem;text-align:center}
  .db-te8__txt b{font-size:.72rem}
  .db-te8__txt small{display:none}
  .db-te8__paneel{padding:1.3rem 1.7rem 1.5rem}
  .db-te8__acties{flex-direction:column}
  .db-te8__knop{width:100%}
  .db-te8__knop--offerte{flex:0 0 auto}
}

/* ---- Toon grijs (website-kit RULES 4.26): effen #404040 als sectie-achtergrond; de schijf en de band onderaan worden donker zodat ze zichtbaar blijven. Tegels, paneel en tekst blijven leesbaar (licht op donker). */
.db-te8.db-te8--grijs,.db-te8.db-te8--verloop-om{--sectie-achtergrond:var(--db-gradient-om);--te8-schijf:var(--db-gradient);--te8-blok:linear-gradient(180deg,var(--db-grijs),var(--db-zwart))}
/* ---- 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)}
/* ---- voordelen: voordelen-v13 ---- */
/* toon: verloop-om (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.) */

/* ---- Voordelen, versie 13: de balie. Bovenaan links kop en knoppen, rechts Mike (uitsnede tot de heupen, armen over elkaar) op een roze
   paneel waarvan de onderkant gelijk loopt met de Google-kaart. Eronder een rooster van drie kolommen met witte tegels: links een
   lichte plaat met het voorwerp, rechts de tekst. De platen zijn: G in merkkleuren, stopwatch met roze taartpunt, meetlint met de
   weken 1 tot 5 (4 en 5 licht), twee chatwolken, groot getal 200, prijskaartje aan een roze touwtje en een schild met PAO-lint. */
.db-vd13{
  --vd13-geel:#FBBC05;--vd13-g-rood:#EA4335;--vd13-g-blauw:#4285F4;--vd13-g-groen:#34A853;--vd13-wa:#25D366;
  --vd13-breuk:linear-gradient(180deg,var(--db-grijs) 0,var(--db-zwart) 80%);  /* schuine band (gebruiker 2026-10-28), standaardtoon is verloop-om */
  --vd13-plaat:clamp(6.8rem,11.5vw,8.2rem);--vd13-ico:3.5rem;--vd13-lijn:2px;--vd13-ico-radius:var(--db-radius);--vd13-pad:.9rem;--vd13-rand:var(--db-rand);--vd13-offerte:var(--offerte,#15803D);--vd13-offerte-hover:var(--offerte-hover,#116B33);
  position:relative;overflow:clip;--sectie-achtergrond:var(--db-gradient-om);background:var(--sectie-achtergrond);color:var(--db-tekst-op-donker);  /* verloop, nooit vlak zwart of grijs (gebruiker 2026-10-27) */
  font-family:var(--db-font-tekst);
  padding:clamp(3rem,5.5vw,5rem) 0 clamp(2.5rem,5vw,4.5rem);
}
.db-vd13 :focus-visible{outline:calc(2 * var(--db-rand)) solid var(--db-focus);outline-offset:5px}
.db-vd13 .i{--i-maat:24px;display:inline-block;flex:none;overflow:visible;width:var(--i-maat);height:var(--i-maat)}
.db-vd13 :where(ul,p){padding:0;margin:0}
.db-vd13 ul{list-style-type:none}
.db-vd13__sr{position:absolute;overflow:hidden;width:1px;height:1px;margin:-1px;clip-path:inset(50%);white-space:nowrap}
.db-vd13::before{content:"";position:absolute;z-index:0;left:-6%;right:-6%;top:30%;bottom:-6%;background:var(--vd13-breuk);transform:skewY(calc(var(--db-helling) * -1));transform-origin:100% 100%;pointer-events:none}
.db-vd13__in{position:relative;z-index:1;width:min(100% - 2rem,75rem);margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:1.2rem;row-gap:1.2rem;align-items:start}
.db-vd13__kop{grid-area:1 / 1 / 2 / 3;display:grid;justify-items:start;gap:1rem;min-width:0;margin-bottom:.8rem}
.db-vd13__tag{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-vd13 h2{margin:0;max-width:22ch;font:700 clamp(2.1rem,1.2rem + 2.8vw,3.4rem)/1.05 var(--db-font-kop);letter-spacing:-.025em;text-wrap:balance}
.db-vd13__lead{max-width:36rem;color:var(--db-wit);font-size:1.08rem;line-height:1.6}
.db-vd13__acties{grid-area:2 / 1 / 3 / 3;display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:.8rem}

/* lasfoto in een kader met roze rand; het stuk van de foto zelf (hoofd met gehoorbeschermers en schouders) steekt boven de kaderrand uit (gebruiker 2026-10-28). Foto en stuk delen dezelfde stapel (zelfde maat en plek), alleen het stuk mag boven de rand uit */
.db-vd13__figuur{grid-area:1 / 3 / 4 / 4;align-self:stretch;position:relative;margin:0;pointer-events:none}
.db-vd13__kader{--stijg:6rem;--sw:max(100cqw,.85 * (100cqh + var(--stijg)));--sh:calc(var(--sw) / .85);position:absolute;inset:8.3rem 0 0;container-type:size;border:var(--vd13-rand) solid var(--db-roze);border-radius:var(--db-radius);background:var(--db-roze)}
.db-vd13__klem,.db-vd13__rijs{position:absolute;inset:0}
.db-vd13__klem{overflow:clip;border-radius:calc(var(--db-radius) - var(--db-rand))}
.db-vd13__rijs{clip-path:inset(-9rem 0 0 0)}
.db-vd13__stapel{position:absolute;width:var(--sw);height:var(--sh);left:calc((var(--sw) - 100cqw) * -.45);top:calc(var(--stijg) * -1)}
.db-vd13__stapel img{position:absolute;display:block;max-width:none}
.db-vd13__klem img{left:0;top:0;width:100%;height:100%}
.db-vd13__rijs img{left:26.12%;top:0;width:40.12%;height:33.88%}
/* Mike: voeten op de onderrand van de Google-kaart, steekt alleen omhoog uit; weg of kleiner op kleine schermen */
.db-vd13__google{position:relative}
.db-vd13__mike{position:absolute;z-index:1;right:1rem;bottom:0;width:8rem;height:auto;pointer-events:none}

/* rooster: witte tegel = lichte plaat met voorwerp + tekst */
.db-vd13__rek{display:contents}
.db-vd13__k{display:grid;grid-template-columns:var(--vd13-plaat) minmax(0,1fr);align-items:stretch;align-self:stretch;gap:1.4rem;min-height:9.6rem;padding:var(--vd13-pad);background:var(--db-puurwit);color:var(--db-zwart);border:var(--db-rand) solid var(--db-roze);border-radius:var(--db-radius);box-shadow:var(--db-schaduw)}
.db-vd13__google{grid-area:3 / 1 / 4 / 3;padding:0}
.db-vd13__klok{grid-area:4 / 1}
.db-vd13__kal{grid-area:4 / 2}
.db-vd13__bel{grid-area:4 / 3}
.db-vd13__aantal{grid-area:5 / 1}
.db-vd13__prijs{grid-area:5 / 2}
.db-vd13__schild{grid-area:5 / 3}
.db-vd13__k > div{align-self:center;min-width:0;padding-right:1rem}
.db-vd13__k b{display:block;font:700 1.15rem/1.2 var(--db-font-kop);letter-spacing:-.01em;color:var(--db-zwart)}
.db-vd13__k p{margin-top:.4rem;font-size:.95rem;line-height:1.5;color:var(--db-grijs)}
.db-vd13__plaat{display:grid;place-items:center;min-width:0;padding:.8rem;border-radius:var(--db-radius);background:var(--db-wit);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--db-zwart) 6%,transparent)}

/* Google-reviewkaart: G-plaat links, daarnaast naam, 4,8 en sterren */
.db-vd13__google a{display:grid;grid-template-columns:var(--vd13-plaat) minmax(0,1fr);align-items:stretch;gap:1.4rem;width:100%;padding:var(--vd13-pad);color:inherit;text-decoration:none}
.db-vd13__g{width:var(--vd13-ico);height:auto}
.db-vd13__g path{fill:currentColor}
.db-vd13__g .r{color:var(--vd13-g-rood)}
.db-vd13__g .b{color:var(--vd13-g-blauw)}
.db-vd13__g .y{color:var(--vd13-geel)}
.db-vd13__g .gr{color:var(--vd13-g-groen)}
.db-vd13__gtekst{display:flex;flex-direction:column;justify-content:center;gap:.4rem;min-width:0}
.db-vd13__gnaam{font:600 1.1rem/1 var(--db-font-kop);white-space:nowrap}
.db-vd13__gscore{display:flex;align-items:center;gap:clamp(1.2rem,3vw,2.4rem)}
.db-vd13__gscore b{font:700 clamp(3.8rem,3rem + 2.4vw,5.2rem)/1 var(--db-font-kop);letter-spacing:-.04em}
.db-vd13__gscore > span{display:flex;flex-direction:column;gap:.5rem}
.db-vd13__gscore em{font:600 1.2rem/1.1 var(--db-font-kop);font-style:normal;white-space:nowrap}
.db-vd13__sterren{width:clamp(8.6rem,20vw,16.5rem);height:auto;aspect-ratio:5/1}
.db-vd13__sterren .vol{stroke:none;fill:var(--vd13-geel)}
.db-vd13__sterren .leeg{fill:var(--db-grijs);fill-opacity:.25;stroke:none}
.db-vd13__sterren :is(.vol,.leeg) use{stroke:none}

/* een pictogramstelsel voor alle platen: 48 x 48 raster in --vd13-ico, lijn --vd13-lijn, zwarte lijn, een roze vlak, witte vulling */
.db-vd13__ico{width:var(--vd13-ico);height:var(--vd13-ico);color:var(--db-zwart);fill:none;stroke:currentColor;stroke-width:var(--vd13-lijn);stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.db-vd13__ico *{vector-effect:non-scaling-stroke}
.db-vd13__ico .wi{fill:var(--db-puurwit)}
.db-vd13__ico .ro{fill:var(--db-roze)}
.db-vd13__ico-g{width:var(--vd13-ico);height:var(--vd13-ico);stroke:none}

/* getal 200: zelfde doos, zelfde lijn, roze vlak */
.db-vd13__getal{display:grid;place-items:center;width:var(--vd13-ico);height:var(--vd13-ico);border:var(--vd13-lijn) solid var(--db-zwart);border-radius:var(--vd13-ico-radius);background:var(--db-roze);color:var(--db-zwart);font:700 1.3rem/1 var(--db-font-kop);letter-spacing:-.04em}

/* knoppen */
.db-vd13__knop{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:3.1rem;padding:.7rem 1.3rem;border-radius:var(--db-radius);text-decoration:none;font:600 .97rem/1.2 var(--db-font-kop)}
.db-vd13__knop .i{--i-maat:1.25rem}
.db-vd13__knop--hoofd{color:var(--db-puurwit);background:var(--vd13-offerte);font-weight:700}
.db-vd13__knop--hoofd:is(:hover,:focus-visible){background:var(--vd13-offerte-hover)}
.db-vd13__knop--bel{background:var(--db-puurwit);color:var(--db-zwart)}
.db-vd13__knop--wa{background:var(--vd13-wa);color:var(--db-puurwit)}  /* WhatsApp-stijl (gebruiker 2026-10-27) */
.db-vd13__knop--wa:is(:hover,:focus-visible){background:var(--vd13-wa-hover)}
.db-vd13__wa{width:1.4rem;height:1.4rem;fill:var(--db-puurwit)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .db-vd13__knop,.db-vd13__google a{transition:transform .2s ease-out}
  .db-vd13__knop:is(:hover,:focus-visible),.db-vd13__google a:is(:hover,:focus-visible){transform:translateY(-2px)}
}
@media (max-width:1000px){
  .db-vd13{--mw:8.2rem}
  .db-vd13__in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .db-vd13__kop{grid-area:1 / 1 / 2 / 3;padding-right:calc(var(--mw) + 1.6rem);min-height:calc(var(--mw) * 2.2);align-content:start}
  .db-vd13__acties{grid-area:2 / 1 / 3 / 3}
  .db-vd13__figuur{grid-area:1 / 2 / 2 / 3;justify-self:end;align-self:stretch;width:var(--mw)}
  .db-vd13__kader{inset:auto 0 0;height:calc(var(--mw) * 1.5);--stijg:3.5rem}
  .db-vd13__mike{display:none}
  .db-vd13__google{grid-area:3 / 1 / 4 / 3}
  .db-vd13__klok{grid-area:4 / 1}
  .db-vd13__kal{grid-area:4 / 2}
  .db-vd13__bel{grid-area:5 / 1}
  .db-vd13__aantal{grid-area:5 / 2}
  .db-vd13__prijs{grid-area:6 / 1}
  .db-vd13__schild{grid-area:6 / 2}
  .db-vd13__k{align-self:stretch;grid-template-columns:1fr;min-height:0}
  .db-vd13__google{grid-template-columns:var(--vd13-plaat) minmax(0,1fr)}
  .db-vd13__plaat{min-height:6.6rem}
  .db-vd13__k > div{align-self:start;padding:.2rem .5rem .5rem}
}
@media (max-width:760px){
  .db-vd13{--mw:7.3rem;--vd13-plaat:6.3rem}
  .db-vd13__in{grid-template-columns:minmax(0,1fr);row-gap:1rem}
  .db-vd13__kop{grid-area:1 / 1}
  .db-vd13__figuur{grid-area:1 / 1}
  .db-vd13 h2{font-size:1.72rem}
  .db-vd13__acties{grid-area:2 / 1}
  .db-vd13__knop{flex:1 1 100%;min-height:3.2rem}
  .db-vd13__google,.db-vd13__klok,.db-vd13__kal,.db-vd13__bel,.db-vd13__aantal,.db-vd13__prijs,.db-vd13__schild{grid-column:1;grid-row:auto}
  .db-vd13__k{grid-template-columns:var(--vd13-plaat) minmax(0,1fr)}
  .db-vd13__plaat{min-height:0}
  .db-vd13__k > div{align-self:center;padding:0 1rem 0 0}
  .db-vd13__gscore{flex-wrap:wrap;gap:.2rem 1rem}
  .db-vd13__gscore b{font-size:3.5rem}
  .db-vd13__sterren{width:7.4rem}
}

/* smal scherm: naast de foto past "Draagbalken.nl" niet in de kop. De kop krijgt de volle breedte en de foto blijft naast de lead; die is minstens zo hoog als de foto met het stuk erboven, zodat de foto de kop niet raakt */
@media (max-width:380px){
  .db-vd13__kop{padding-right:0}
  .db-vd13__lead{padding-right:calc(var(--mw) + 1.6rem);min-height:calc(var(--mw) * 1.5 + 3.5rem)}
}

/* ---- Lichte toon (website-kit RULES 4.26: afwisseling donker/licht langs de pagina). De paginagenerator zet db-vd13--licht (#F6F6F6)
   of db-vd13--wit (#FFFFFF) op de wortel als config.SECTIE_TOON dat vraagt. Alleen achtergrond en wat leesbaarheid daarop vraagt:
   donkere tekst, witte tegels met de site-schaduw zodat ze los blijven van het vlak, de witte belknop wordt zwart, WhatsApp in eigen groen. */
.db-vd13{--vd13-wa-hover:#1EBE5A}
.db-vd13.db-vd13--grijs,.db-vd13.db-vd13--verloop-om{--sectie-achtergrond:var(--db-gradient-om);--vd13-breuk:linear-gradient(180deg,var(--db-grijs) 0,var(--db-zwart) 80%)}
.db-vd13.db-vd13--verloop{--sectie-achtergrond:var(--db-gradient);--vd13-breuk:linear-gradient(180deg,var(--db-zwart) 0,var(--db-grijs) 80%)}
.db-vd13.db-vd13--licht{background:var(--db-wit)}
.db-vd13.db-vd13--wit{background:var(--db-puurwit)}
.db-vd13:is(.db-vd13--licht,.db-vd13--wit){color:var(--db-tekst)}
.db-vd13:is(.db-vd13--licht,.db-vd13--wit) .db-vd13__lead{color:var(--db-grijs)}
.db-vd13:is(.db-vd13--licht,.db-vd13--wit) .db-vd13__k{box-shadow:var(--db-schaduw);outline:1px solid color-mix(in srgb,var(--db-zwart) 8%,transparent);outline-offset:-1px}
.db-vd13--wit .db-vd13__k{background:var(--db-wit)}
.db-vd13--wit .db-vd13__plaat{background:var(--db-puurwit)}
.db-vd13:is(.db-vd13--licht,.db-vd13--wit) .db-vd13__knop--bel{background:var(--db-zwart);color:var(--db-puurwit)}
.db-vd13:is(.db-vd13--licht,.db-vd13--wit) .db-vd13__knop--wa{background:var(--vd13-wa);color:var(--db-puurwit)}
.db-vd13:is(.db-vd13--licht,.db-vd13--wit) .db-vd13__knop--wa:is(:hover,:focus-visible){background:var(--vd13-wa-hover)}
.db-vd13:is(.db-vd13--licht,.db-vd13--wit) .db-vd13__wa{fill:var(--db-puurwit)}

/* rustige lus (RULES 5.9, een per sectie): de icoontjes zweven langzaam, om en om een andere fase; uit bij verminderde beweging. Keyframes: site/_werk/beweging.css */
@media (prefers-reduced-motion:no-preference){
  .db-vd13__ico{animation:bw-zweef 3.5s ease-in-out infinite}
  .db-vd13__plaat:nth-child(2n) .db-vd13__ico{animation-delay:-1.2s}
  .db-vd13__plaat:nth-child(3n) .db-vd13__ico{animation-delay:-2.3s}
}
/* ---- partners: partners-v8 ---- */
/* 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-pa8{
  --pa8-m1:#F9992C;--pa8-m2:#6A9A82;--pa8-m3:#F66847;--pa8-m4:#A00101;--pa8-m5:#0480C5;--pa8-m6:#3C76B9;--pa8-m7:#213C6A;--pa8-m8:#1F659A;--pa8-m9:#7BA77B;--pa8-rood:#E30613;
  --pa8-k:1.1;
  --pa8-breuk:linear-gradient(180deg,var(--db-zwart) 0,var(--db-grijs) 45%);  /* schuine band (gebruiker 2026-10-28) */
  /* onderrand vlak: geen schuine clip-path meer (die liet de witte pagina zien rechts onderaan, gebruiker 2026-10-28); de onderrand is de eindkleur van het verloop in beide tonen */
  position:relative;overflow:clip;padding-top:1.5rem;background:var(--db-gradient);color:var(--db-tekst-op-donker);font-family:var(--db-font-tekst)}
.db-pa8 :focus-visible{outline:calc(2 * var(--db-rand)) solid var(--db-focus);outline-offset:3px}
.db-pa8::before{content:"";position:absolute;z-index:0;left:-6%;right:-6%;top:35%;bottom:-6%;background:var(--pa8-breuk);transform:skewY(calc(var(--db-helling) * -1));transform-origin:100% 100%;pointer-events:none}
.db-pa8__inner{position:relative;z-index:1;width:min(100% - 2rem,75rem);margin:0 auto}
.db-pa8__kop{display:grid;grid-template-columns:minmax(0,1fr) 31rem;gap:clamp(1.5rem,4vw,3.5rem);align-items:end}
.db-pa8__tekst{padding-bottom:1.7rem}
.db-pa8__tag{display:inline-block;margin:0 0 .9rem;padding:.4rem .7rem;border-radius:var(--db-radius);background:var(--db-roze);color:var(--db-actie-tekst);font:600 .8rem/1 var(--db-font-kop);letter-spacing:.1em;text-transform:uppercase}
.db-pa8 h2{margin:0;color:var(--db-puurwit);font:700 clamp(2rem,1.3rem + 2.2vw,3rem)/1.08 var(--db-font-kop);letter-spacing:-.02em;text-wrap:balance}
.db-pa8__lead{margin:.9rem 0 0;max-width:38rem;font-size:1.1rem;line-height:1.55}

/* uitsnede (gebruiker 2026-10-27/28): een echte uitsnede van drie werkers (een foto, geen losse personen), rechts in de sectie. Gebruiker 2026-10-28: een roze blok achter de werkers van de benen tot de nek/schouders (bovenkant op 27 procent van de uitsnedehoogte, hoofden steken erboven uit) en de onderkant van de uitsnede niet zacht maar strak afgesneden op de onderrand van het blok. Maten in em van .db-pa8__foto zodat uitsnede en blok meeschalen */
.db-pa8__foto{position:relative;z-index:2;order:2;margin:0 0 -.6rem;height:15em;font-size:min(1rem,2.7vw)}
.db-pa8__foto{--pa8-kantel:3.5deg}
/* gebruiker 2026-10-28: het blok is een fotoblok met roze rand; erachter een effen roze kopie, 3,5 graden gekanteld en .6em omhoog en naar rechts verschoven (kijkt boven en rechts uit) */
.db-pa8__foto::before{content:"";position:absolute;bottom:0;right:2em;width:21.7em;height:11em;border-radius:var(--db-radius);background:var(--db-roze);transform:translate(.6em,-.6em) rotate(var(--pa8-kantel));pointer-events:none}
.db-pa8__blok{position:absolute;bottom:0;right:2em;width:21.7em;height:11em;overflow:hidden;border:var(--db-rand) solid var(--db-roze);border-radius:var(--db-radius);pointer-events:none}
.db-pa8__blok img{display:block;width:100%;height:100%;object-fit:cover;max-width:none}
.db-pa8__cutout{position:absolute;bottom:0;right:3em;height:15em;pointer-events:none;clip-path:inset(0)}
.db-pa8__cutout img{display:block;width:auto;height:100%;max-width:none}

/* band: de partnerplaten (gebruiker 2026-10-27, ronde 2: geen roze achtergrond meer, de band toont de sectiekleur); de platen (ontwerp van versie 7) met harde schaduw in de merkkleur. Onderaan de gewone ruimte tot de vlakke onderrand */
.db-pa8__sjerp{position:relative;z-index:3;padding:1.3rem 0 1.5rem;overflow:hidden}
.db-pa8__spoor{display:flex;width:max-content;gap:1.2rem;margin:0;padding:0 .6rem;list-style:none}
.db-pa8__plaat{--merk:var(--pa8-m1);display:grid;place-items:center;flex:none;width:10rem;height:5rem;min-width:0;padding:.5rem;border-radius:var(--db-radius);background:var(--db-puurwit);box-shadow:.4rem .4rem 0 var(--merk)}
/* link om het logo: vult de hele tegel (negatieve marge over de opvulling), de tegel zelf blijft de zichtbare vorm */
.db-pa8__link{display:grid;place-items:center;align-self:stretch;justify-self:stretch;margin:-.5rem;padding:.5rem;border-radius:inherit;color:inherit;text-decoration:none}
.db-pa8__plaat:is(:hover,:focus-within){box-shadow:.65rem .65rem 0 var(--merk)}
.db-pa8__plaat img{width:calc(var(--lw,5) * var(--pa8-k) * 1rem);max-width:100%;max-height:100%;height:auto;object-fit:contain}
.db-pa8__plaat:nth-child(9n+1){--lw:6.4;--merk:var(--pa8-m1)}
.db-pa8__plaat:nth-child(9n+2){--lw:5.2;--merk:var(--pa8-m2)}
.db-pa8__plaat:nth-child(9n+3){--lw:5.2;--merk:var(--pa8-m3)}
.db-pa8__plaat:nth-child(9n+4){--lw:6.2;--merk:var(--pa8-m4);background:var(--pa8-rood)}
.db-pa8__plaat:nth-child(9n+5){--lw:6.4;--merk:var(--pa8-m5)}
.db-pa8__plaat:nth-child(9n+6){--lw:6.4;--merk:var(--pa8-m6)}
.db-pa8__plaat:nth-child(9n+7){--lw:3.6;--merk:var(--pa8-m7)}
.db-pa8__plaat:nth-child(9n+8){--lw:2.7;--merk:var(--pa8-m8)}
.db-pa8__plaat:nth-child(9n+9){--lw:6.2;--merk:var(--pa8-m9)}
/* logo 8 (jonkman en de jong) is hoog en heeft geen witruimte in het bestand: 84 procent van de hoogte geeft ruimte boven en onder (gebruiker 2026-10-28) */
.db-pa8__plaat:nth-child(9n+8) img{max-height:84%}
.db-pa8__plaat:nth-child(9n+1) img{clip-path:inset(0 4% 0 0)}
.db-pa8__plaat:nth-child(9n+2) img{clip-path:inset(0 0 0 3.5%)}

@media (prefers-reduced-motion:no-preference){
  .db-pa8__spoor{animation:db-pa8-loop 48s linear infinite}
  .db-pa8__sjerp:is(:hover,:focus-within) .db-pa8__spoor{animation-play-state:paused}
}
@keyframes db-pa8-loop{to{transform:translateX(calc(-100% / 3))}}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .db-pa8__plaat{transition:transform .25s ease,box-shadow .25s ease,background-color .25s ease}
  .db-pa8__plaat:is(:hover,:focus-within){transform:translate(-2px,-2px)}
}
/* bewegingen uit: een rij van negen platen over de breedte, op smalle schermen een rij om te scrollen */
@media (prefers-reduced-motion:reduce){
  .db-pa8__spoor{width:min(100% - 2rem,75rem);margin:0 auto;padding:0 .4rem 0 0;gap:.9rem}
  .db-pa8__plaat{flex:1 1 0;width:auto;--pa8-k:.9}
  .db-pa8__plaat[aria-hidden="true"]{display:none}
}
@media (max-width:900px){
  .db-pa8__kop{grid-template-columns:minmax(0,1fr);gap:1.5rem}
  .db-pa8__tekst{order:-1;padding-bottom:0}
  .db-pa8__foto{width:31em;max-width:100%;margin:0 auto -.6rem}
}
@media (max-width:900px) and (prefers-reduced-motion:reduce){
  .db-pa8__sjerp{overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:1rem}
  .db-pa8__spoor{width:max-content;margin:0;padding:0 1rem}
  .db-pa8__plaat{flex:none;width:9.5rem;scroll-snap-align:start}
}
@media (max-width:620px){
  .db-pa8__kop{grid-template-columns:minmax(0,1fr);gap:1rem}
  .db-pa8__tekst{order:-1}
  .db-pa8__plaat{width:9rem;--pa8-k:1}
}

/* ---- Lichte toon (website-kit RULES 4.26: afwisseling donker/licht langs de pagina). De paginagenerator zet db-pa8--wit (vlak #FFFFFF)
   of db-pa8--licht (vlak #F6F6F6); de logoband is in elke toon roze (gebruiker 2026-10-27) op de wortel als config.SECTIE_TOON dat vraagt. Tekst donker, belknop met donkere tekst,
   WhatsApp-knop in eigen groen met wit logo. */
.db-pa8.db-pa8--wit{background:var(--db-puurwit)}
.db-pa8.db-pa8--licht{background:var(--db-wit)}
.db-pa8:is(.db-pa8--wit,.db-pa8--licht){color:var(--db-tekst)}
.db-pa8:is(.db-pa8--wit,.db-pa8--licht) h2{color:var(--db-zwart)}
.db-pa8:is(.db-pa8--wit,.db-pa8--licht) .db-pa8__plaat{outline:1px solid color-mix(in srgb,var(--db-zwart) 10%,transparent);outline-offset:-1px}

/* ---- Toon verloop-om (BRIEF 2026-10-28): grijs boven, donker onder. */
.db-pa8.db-pa8--verloop-om{background:var(--db-gradient-om);--pa8-breuk:linear-gradient(180deg,var(--db-grijs) 0,var(--db-zwart) 45%)}
.db-pa8.db-pa8--verloop{background:var(--db-gradient)}
/* ---- reviews: reviews-v12 ---- */
/* toon: verloop (eigen achtergrond van deze sectie; de paginagenerator leest deze regel voor website-kit RULES 4.26. Een andere toon per pagina komt via config.SECTIE_TOON en een klasse <wortel>--<toon> hieronder.) */

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

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

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

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

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

@media (max-width:999px){
  .db-rev-team::before{top:46%}
  .db-rev-team__in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .db-rev-team__kop{grid-column:1;grid-row:1}
  .db-rev-team__foto{grid-column:2;grid-row:1;align-self:end;--rt-duo:min(100%,17rem)}
  .db-rev-team__kaart:nth-child(1){grid-column:1 / -1;grid-row:2}
  .db-rev-team__kaart:nth-child(2){grid-column:1;grid-row:3}
  .db-rev-team__kaart:nth-child(3){grid-column:2;grid-row:3}
  .db-rev-team__acties{grid-row:4}
}
@media (max-width:560px){
  .db-rev-team__in{grid-template-columns:minmax(0,1fr)}
  .db-rev-team__kop{grid-column:1;grid-row:1}
  .db-rev-team__foto{grid-column:1;grid-row:2;align-self:start;margin-top:.5rem;--rt-duo:11.5rem}
  .db-rev-team__kaart:nth-child(1){grid-row:3}
  .db-rev-team__kaart:nth-child(2){grid-column:1;grid-row:4}
  .db-rev-team__kaart:nth-child(3){grid-column:1;grid-row:5}
  .db-rev-team__acties{grid-row:6}
  .db-rev-team__acties>*{flex:1 1 100%;justify-content:center}
  .db-rev-team__score svg:last-child{display:none}
  .db-rev-team__lead{font-size:1rem}
}
/* toon verloop-om (BRIEF-ACHTERGROND): grijs boven, donker onder; de band erachter draait mee */
.db-rev-team.db-rev-team--verloop-om{--sectie-achtergrond:var(--db-gradient-om);--rt-band:linear-gradient(180deg,var(--db-grijs) 0,var(--db-zwart) 80%)}
/* ---- offerte-formulier: offerte-formulier-v2 ---- */
/* toon: verloop (eigen achtergrond van deze sectie; de paginagenerator leest deze regel voor website-kit RULES 4.26. Een andere toon per pagina komt via config.SECTIE_TOON en een klasse <wortel>--<toon> hieronder.) */

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

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

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

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

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

/* ---- Toonvarianten (website-kit RULES 4.26). Standaard verloop (zwart boven, grijs onder); --verloop-om en --grijs: grijs boven, zwart onder. */
.db-of2.db-of2--grijs,.db-of2.db-of2--verloop-om{--ob-grond:var(--db-gradient-om);--ob-breuk:linear-gradient(180deg,var(--db-grijs) 0,var(--db-zwart) 80%)}