/* Basis van de site (vervangt het demo-chroom tussen base:start en base:end van de secties). */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--db-zwart)}
/* de body-achtergrond blijft in de inhoud; de ruimte voor de zwevende knoppen (padding-bottom) toont de donkere html-kleur, geen witte band onder de voet */
body{margin:0;background:var(--db-achtergrond);background-clip:content-box;color:var(--db-tekst);font:16px/1.5 var(--db-font-tekst)}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit}
a{color:inherit}
:focus-visible{outline:3px solid var(--db-focus,var(--db-roze));outline-offset:3px}
.db-skip{position:absolute;left:1rem;top:-4rem;z-index:200;padding:.75rem 1rem;background:var(--db-puurwit);color:var(--db-zwart);border-radius:var(--db-radius);text-decoration:none}
.db-skip:focus{top:1rem}
main:focus{outline:none}
/* uit het demo-chroom van de secties: uitsneden vangen nooit een klik */
.cutout-slot{pointer-events:none}

/* Plaatshouders (skelet): verdwijnen zodra de goedgekeurde secties erin staan. */
.db-hero-p{background:var(--db-gradient);color:var(--db-tekst-op-donker);padding:clamp(150px,14vw,200px) 24px 64px}
.db-hero-p__in{max-width:1200px;margin:0 auto}
.db-hero-p h1{font:700 clamp(30px,4vw,52px)/1.12 var(--db-font-kop);margin:0 0 16px;max-width:22ch;hyphens:manual}
.db-hero-p__lead{max-width:62ch;margin:0 0 24px;font-size:18px}
.db-hero-p__label{display:inline-block;margin:0;padding:6px 12px;border:1px solid rgb(var(--db-roze-rgb) / .6);border-radius:var(--db-radius);font-size:14px}
.db-hero-p__kruimel ol{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0 0 18px;padding:0;font-size:14px}
.db-hero-p__kruimel li+li::before{content:"\203A";margin-right:6px;opacity:.7}
.db-hero-p__kruimel a{text-decoration:none;opacity:.85}
.db-hero-p__kruimel a:hover{opacity:1}
.db-plaats{padding:28px 24px}
.db-plaats:nth-of-type(even){background:var(--db-vlak)}
.db-plaats__in{max-width:1200px;margin:0 auto;padding:22px 24px;border:1px solid rgb(var(--db-zwart-rgb) / .18);border-left:4px solid var(--db-roze);border-radius:var(--db-radius);background:var(--db-puurwit)}
.db-plaats__nr{margin:0;font-size:13px;color:var(--db-tekst-zacht)}
.db-plaats__id{margin:2px 0 6px;font:600 22px/1.3 var(--db-font-kop)}
.db-plaats__taak{margin:0;color:var(--db-tekst-zacht)}

/* ---- kop: site-kop-v7 ---- */
/* ---- Site-kop versie 7 (Draagbalken.nl): ronde 2 op versie 5. Zelfde opbouw als de kop van de liftverhuursite
   (doorzichtig over de hero, na 40 px een lichte lagere balk met kleiner logo, panelen onder het menu, lade van rechts),
   met twee wijzigingen na de notitie van de gebruiker: (1) bovenaan staan logo, menu en knoppen op een middellijn
   (geen losse marges meer) en de knoppen houden dezelfde maat en plek bij scrollen; (2) meer knoppen: bel, WhatsApp en
   offerte in de balk (ook op de telefoon), een knoppenstrook onderaan elk uitklappaneel, een Contact-paneel met drie
   routes, snelknoppen en een voet met drie knoppen in de lade. Merkwaarden uit ../_shared/tokens.css. */
.db-kop7{
  --k-lg:86px;--k-ease:cubic-bezier(.22,.61,.36,1);--k-knop:44px;
  --k-lijn:color-mix(in srgb,var(--db-zwart) 12%,transparent);--k-band:color-mix(in srgb,var(--db-zwart) 62%,transparent);
  --k-glas:color-mix(in srgb,var(--db-wit) 92%,transparent);--k-scrim:color-mix(in srgb,var(--db-zwart) 60%,transparent);
  --k-snede:rgb(var(--db-zwart-rgb) / .35);--k-wa:#25D366;--k-wa-hover:#1EBE5A;--kop7-offerte-hover:color-mix(in srgb,var(--offerte) 85%,var(--db-zwart));--sectie-achtergrond:var(--db-wit);--hero-achtergrond:var(--db-gradient);
  position:relative;background:var(--sectie-achtergrond);color:var(--db-tekst);font-family:var(--db-font-tekst)}
@media(min-width:1200px){.db-kop7{--k-lg:92px}}
.db-kop7 :focus-visible{outline:calc(2 * var(--db-rand)) solid var(--db-focus);outline-offset:3px}
.db-kop7 a{text-decoration:none}
.db-kop7 :where(ul){list-style:none;margin:0;padding:0}
.db-kop7__header{position:fixed;top:0;left:0;right:0;z-index:90;height:0}
html{scroll-padding-top:5.5rem}
.db-kop7__tekst{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- balk: doorzichtig over de hero, solide en laag na scrollen; alles op een middellijn */
.db-kop7__bar{position:absolute;inset:0 0 auto 0;z-index:1;padding:.9rem 0;transition:background .35s var(--k-ease),box-shadow .35s var(--k-ease),padding .35s var(--k-ease)}
.db-kop7__bar.is-stuck{background:var(--k-glas);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);box-shadow:var(--db-schaduw);padding:.45rem 0}
.db-kop7__wrap{display:flex;align-items:center;gap:1rem;width:min(100% - 2.5rem,70rem);margin:0 auto}
@media(min-width:1280px){.db-kop7__wrap{width:min(100% - 3rem,80rem)}}
.db-kop7__bar::before{content:"";position:absolute;inset:0 0 auto 0;height:150px;z-index:-1;pointer-events:none;background:linear-gradient(180deg,var(--k-band) 0%,var(--k-band) 42%,transparent 100%);transition:opacity .35s var(--k-ease)}
.db-kop7__bar.is-stuck::before{opacity:0}
.db-kop7__bar.is-stuck{--k-lg:54px}
@media(min-width:1200px){.db-kop7__bar.is-stuck{--k-lg:58px}}
@media(max-width:620px){.db-kop7,.db-kop7__bar.is-stuck{--k-lg:50px}}

/* ---- logo: D-merk plus woordmerk (wit op donker, roze op licht) */
.db-kop7__logo{flex:none;display:flex;min-height:44px;align-items:center;gap:calc(var(--k-lg) * .14)}
.db-kop7__mark{height:calc(var(--k-lg) * .86);width:auto;transition:height .35s var(--k-ease)}
.db-kop7__word{position:relative;display:block;width:calc(var(--k-lg) * 1.55);transition:width .35s var(--k-ease)}
.db-kop7__word img{display:block;width:100%;height:auto;transition:opacity .35s var(--k-ease)}
.db-kop7__word img+img{position:absolute;left:0;top:50%;transform:translateY(-50%);opacity:0}
.db-kop7__bar.is-stuck .db-kop7__word img{opacity:0}
.db-kop7__bar.is-stuck .db-kop7__word img+img{opacity:1}

/* ---- menu: direct naast het logo, op dezelfde middellijn als de knoppen */
.db-kop7__nav{display:flex;align-items:center;flex:1 1 auto;min-width:0;margin-left:clamp(.5rem,1.6vw,1.75rem)}
.db-kop7__links{display:flex;align-items:center;gap:1.05rem}
.db-kop7__links>li{position:relative}
.db-kop7__links>li>a,.db-kop7__trigger{display:inline-flex;align-items:center;gap:.3rem;min-height:var(--k-knop);padding:0;font:600 .9rem/1 var(--db-font-kop);letter-spacing:.01em;color:var(--db-tekst-op-donker);white-space:nowrap;cursor:pointer;transition:color .25s var(--k-ease)}
.db-kop7__chev{width:13px;height:13px;transition:transform .25s var(--k-ease)}
.db-kop7__links li.is-open .db-kop7__chev{transform:rotate(180deg)}
.db-kop7__links>li>a:hover,.db-kop7__links li.is-open>.db-kop7__trigger{color:var(--db-roze)}
.db-kop7__bar.is-stuck .db-kop7__links>li>a,.db-kop7__bar.is-stuck .db-kop7__trigger{color:var(--db-tekst)}
.db-kop7__bar.is-stuck .db-kop7__links>li>a:hover,.db-kop7__bar.is-stuck .db-kop7__links li.is-open>.db-kop7__trigger{color:var(--db-tekst-op-donker);background:var(--db-zwart);border-radius:var(--db-radius);padding-inline:.6rem;margin-inline:-.6rem}

/* ---- paneel: kleine witte kaart onder het menupunt, alleen links (zonder script blijft de tekst gewoon in de pagina) */
.db-kop7__mega{position:absolute;top:calc(100% + 6px);left:0;z-index:60;width:max-content;max-width:min(66rem,calc(100vw - 3rem));padding:1.6rem 1.9rem;background:var(--db-puurwit);border:var(--db-rand) solid var(--db-roze);border-radius:var(--db-radius);box-shadow:var(--db-schaduw);transform:translateY(-8px);clip-path:inset(0 0 100% 0);pointer-events:none;transition:opacity .2s var(--k-ease),transform .2s var(--k-ease),visibility .2s}
.db-kop7__links>li:last-child>.db-kop7__mega{left:auto;right:0}
.js .db-kop7__mega{clip-path:none;opacity:0;visibility:hidden}
.db-kop7__mega::before{content:"";position:absolute;top:-8px;left:0;right:0;height:8px}
.db-kop7__links li.is-open>.db-kop7__mega{clip-path:none;opacity:1;visibility:visible;pointer-events:auto;transform:none}
.db-kop7__grid{display:grid;gap:1.5rem 2.4rem}
.db-kop7__mega--1 .db-kop7__grid{grid-template-columns:minmax(0,1fr)}
.db-kop7__mega--3 .db-kop7__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.db-kop7__label{margin:0 0 .85rem;font:600 .7rem/1 var(--db-font-kop);letter-spacing:.12em;text-transform:uppercase;color:var(--db-tekst-zacht)}
.db-kop7__label--vervolg{margin-top:1.5rem}
.db-kop7__col ul{display:grid;gap:.62rem}
.db-kop7__col a{display:block;padding:.2rem .5rem;margin:-.2rem -.5rem;border-radius:var(--db-radius);font:400 .93rem/1.35 var(--db-font-tekst);color:var(--db-tekst);transition:background .2s var(--k-ease),transform .2s var(--k-ease)}
.db-kop7__col a:hover{background:var(--db-wit);box-shadow:inset var(--db-balk-links) 0 0 var(--db-roze);color:var(--db-tekst);transform:translateX(2px)}

/* ---- knoppen: een middellijn en een maat, bovenaan en na scrollen */
.db-kop7__actions{display:flex;align-items:center;flex:none;gap:.6rem;margin-left:auto}
.db-kop7__btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:var(--k-knop);padding:.6rem 1.1rem;border:var(--db-rand) solid transparent;border-radius:var(--db-radius);font:600 .88rem/1.2 var(--db-font-kop);text-align:center;white-space:nowrap;transition:background .25s var(--k-ease),color .25s var(--k-ease),transform .25s var(--k-ease)}
.db-kop7__btn .ic{width:17px;height:17px;flex:none}
.db-kop7__btn .ic--s{width:12px;height:12px}
.db-kop7__btn--wa{background:var(--k-wa);color:var(--db-puurwit);border-color:var(--k-wa)}
.db-kop7__btn--wa:hover{background:var(--k-wa-hover);border-color:var(--k-wa-hover);color:var(--db-puurwit)}
/* hoofdknop: groen (--offerte) met witte tekst, zwaarder en groter dan bel en WhatsApp zodat hij als eerste opvalt; overal dezelfde groene knop (balk, lade, kaart) */
.db-kop7__btn--offerte{background:var(--offerte);color:var(--db-actie-tekst);border-color:var(--offerte);border-radius:var(--db-radius);min-height:calc(var(--k-knop) + 4px);padding:.7rem 1.5rem;font-weight:700;font-size:.98rem;box-shadow:var(--db-schaduw)}
.db-kop7__btn--offerte:hover{background:var(--kop7-offerte-hover);color:var(--db-actie-tekst);border-color:var(--kop7-offerte-hover)}
.db-kop7 .db-kop7__btn--offerte:focus-visible{outline-color:var(--db-zwart);box-shadow:0 0 0 3px var(--db-puurwit)}
.db-kop7__btn--bel{background:var(--db-puurwit);color:var(--db-tekst);border-color:var(--db-roze)}
.db-kop7__btn--bel:hover{background:var(--db-wit)}
.db-kop7__btn--rand{background:var(--db-puurwit);color:var(--db-tekst);border-color:var(--k-lijn)}
.db-kop7__btn--rand:hover{border-color:var(--db-roze)}
/* in de balk: bel en WhatsApp als vierkante knop met alleen een pictogram tot er ruimte is voor tekst */
.db-kop7__actions .db-kop7__btn--bel,.db-kop7__actions .db-kop7__btn--wa{width:var(--k-knop);padding:0}
.db-kop7__actions .db-kop7__btn--wa .ic--s{display:none}
.db-kop7__actions .db-kop7__btn--offerte{display:none}
.db-kop7__toggle{display:none;flex:none;align-items:center;justify-content:center;width:var(--k-knop);height:var(--k-knop);padding:0;border:var(--db-rand) solid var(--db-roze);border-radius:var(--db-radius);background:var(--db-zwart);color:var(--db-wit);cursor:pointer;transition:background .25s var(--k-ease),color .25s var(--k-ease)}
.db-kop7__toggle svg{width:24px;height:24px}
.db-kop7__toggle:hover{background:var(--db-grijs);color:var(--db-tekst-op-donker)}
@media(min-width:600px){.db-kop7__actions .db-kop7__btn--offerte{display:inline-flex}}
@media(min-width:1340px){.db-kop7__actions .db-kop7__btn--bel{width:auto;padding:.6rem 1.1rem}.db-kop7__actions .db-kop7__btn--bel .db-kop7__tekst{position:static;width:auto;height:auto;overflow:visible;clip:auto}}
@media(min-width:1560px){.db-kop7__wrap{width:min(100% - 3rem,86rem)}.db-kop7__actions .db-kop7__btn--wa{width:auto;padding:.6rem 1.1rem}.db-kop7__actions .db-kop7__btn--wa .db-kop7__tekst{position:static;width:auto;height:auto;overflow:visible;clip:auto}.db-kop7__actions .db-kop7__btn--wa .ic--s{display:block}}
@media(max-width:1179.98px){.db-kop7__nav{display:none}.db-kop7__toggle{display:inline-flex}}

/* ---- lade: schuift van rechts in, met scrim; aria-hidden tot hij open is */
.db-kop7__drawer{position:fixed;inset:0;z-index:120;overflow:hidden;clip-path:inset(0 0 100% 0);pointer-events:none}
.js .db-kop7__drawer{clip-path:none;visibility:hidden}
.db-kop7__drawer.is-open{clip-path:none;visibility:visible;pointer-events:auto}
.db-kop7__scrim{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:var(--k-scrim);cursor:pointer;opacity:0;transition:opacity .3s var(--k-ease)}
.db-kop7__drawer.is-open .db-kop7__scrim{opacity:1}
.db-kop7__panel{position:absolute;inset:0 0 0 auto;z-index:1;display:flex;flex-direction:column;width:min(420px,100%);background:var(--db-puurwit);transform:translateX(100%);transition:transform .32s var(--k-ease)}
.db-kop7__drawer.is-open .db-kop7__panel{transform:none}
.db-kop7__dhead{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex:0 0 auto;padding:.9rem 1.25rem;border-bottom:1px solid var(--k-lijn)}
.db-kop7__dlogo{display:flex;align-items:center;gap:.5rem;min-height:44px}
.db-kop7__dlogo img:first-child{height:44px;width:auto}
.db-kop7__dlogo img+img{width:128px;height:auto}
.db-kop7__close{display:grid;place-items:center;width:44px;height:44px;border:0;background:none;color:var(--db-tekst);cursor:pointer}
.db-kop7__close svg{width:24px;height:24px}
.db-kop7__dnav{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:0 0 1rem}
.db-kop7__group{border-bottom:1px solid var(--k-lijn)}
.db-kop7__group>summary{display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:.95rem 1.25rem;font:600 1rem/1.3 var(--db-font-kop);color:var(--db-tekst);cursor:pointer;list-style:none}
.db-kop7__group>summary::-webkit-details-marker{display:none}
.db-kop7__group>summary::after{content:"";flex:0 0 auto;width:9px;height:9px;margin-left:1rem;border-right:2px solid var(--db-tekst-zacht);border-bottom:2px solid var(--db-tekst-zacht);transform:rotate(45deg) translateY(-2px);transition:transform .2s var(--k-ease)}
.db-kop7__group[open]>summary{box-shadow:inset var(--db-balk-links) 0 0 var(--db-roze)}
.db-kop7__group[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
.db-kop7__group a{display:flex;align-items:center;min-height:44px;padding:.6rem 1.25rem .6rem 2rem;font-size:.94rem;color:var(--db-tekst-zacht)}
.db-kop7__group a:hover{color:var(--db-tekst);background:var(--db-wit)}
.db-kop7__group a.db-kop7__alle{font:600 .94rem/1.3 var(--db-font-kop);color:var(--db-tekst)}
.db-kop7__dlink{display:block;padding:.95rem 1.25rem;font:600 1rem/1.3 var(--db-font-kop);color:var(--db-tekst);border-bottom:1px solid var(--k-lijn)}
.db-kop7__dlink:hover{background:var(--db-wit)}
.db-kop7__dfoot{flex:0 0 auto;display:grid;grid-template-columns:1fr 1fr;gap:.7rem;padding:1.1rem 1.25rem;border-top:1px solid var(--k-lijn);background:var(--db-wit)}
.db-kop7__dcta{min-height:48px;padding-inline:.7rem;font-size:.92rem}
.db-kop7__dcta--vol{grid-column:1 / -1}
@media(prefers-reduced-motion:reduce){.db-kop7__bar,.db-kop7__mega,.db-kop7__panel,.db-kop7__scrim,.db-kop7__mark,.db-kop7__word,.db-kop7__word img,.db-kop7__chev{transition:none}}

/* ---- demo-pagina onder de kop: hero, kaart met werker-uitsnede die boven de kaart uitsteekt, blokken om te scrollen */
.db-kop7__hero{position:relative;isolation:isolate;display:flex;align-items:flex-end;min-height:38rem;padding:9.5rem 1.25rem 9rem;background:var(--hero-achtergrond);color:var(--db-tekst-op-donker)}
.db-kop7__foto{position:absolute;inset:0;z-index:-2;margin:0}
.db-kop7__foto img{width:100%;height:100%;object-fit:cover;object-position:center 60%}
.db-kop7__hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--k-band),var(--k-scrim))}
.db-kop7__hero-in{width:min(100%,70rem);margin:0 auto;text-align:center}
.db-kop7__tag{display:inline-block;margin:0 0 1rem;padding:.4rem .7rem;border-radius:var(--db-radius);background:var(--db-roze);color:var(--db-actie-tekst);font:600 .8rem/1 var(--db-font-kop);letter-spacing:.11em;text-transform:uppercase}
.db-kop7 h2{margin:0 auto;max-width:18ch;font:700 clamp(2rem,1.3rem + 2.4vw,3.25rem)/1.08 var(--db-font-kop);letter-spacing:-.02em;text-wrap:balance}
.db-kop7__lead{margin:1rem auto 1.5rem;max-width:34rem;font-size:1.05rem;line-height:1.5}
.db-kop7__demo{min-height:2.9rem;padding:.6rem 1.15rem;border:var(--db-rand) solid var(--db-roze);border-radius:var(--db-radius);background:transparent;color:var(--db-tekst-op-donker);font:600 .95rem/1.2 var(--db-font-kop);cursor:pointer}
.db-kop7__demo:hover{background:var(--db-grijs);color:var(--db-tekst-op-donker)}
.db-kop7__kaartwrap{position:relative;z-index:2;width:min(100% - 2.5rem,62rem);margin:-6rem auto 0}
.db-kop7__kaart{display:grid;grid-template-columns:minmax(0,17rem) minmax(0,1fr);align-items:center;gap:2rem;padding:2rem 2rem 2rem 1.5rem;border:var(--db-rand) solid var(--db-roze);border-radius:var(--db-radius);background:var(--db-puurwit);box-shadow:var(--db-schaduw)}
.db-kop7__persoon{position:relative;align-self:end;margin:-5.5rem 0 -2rem;height:21rem}
.db-kop7__persoon img{position:absolute;left:50%;bottom:0;height:100%;width:auto;max-width:none;transform:translateX(-50%);filter:drop-shadow(0 .6rem .8rem var(--k-snede));pointer-events:none}
.db-kop7__kaart h3{margin:0 0 .6rem;font:600 1.4rem/1.2 var(--db-font-kop)}
.db-kop7__kaart p{margin:0 0 1.25rem;line-height:1.55;max-width:34rem}
.db-kop7__kaart-acties{display:flex;flex-wrap:wrap;gap:.7rem}
.db-kop7__kaart-acties .db-kop7__btn{min-height:2.9rem;font-size:.95rem}
.db-kop7__kaart-acties .db-kop7__btn--offerte{min-height:3.1rem;font-size:1rem}
.db-kop7__pagina{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;width:min(100% - 2.5rem,62rem);margin:0 auto;padding:4rem 0 5rem}
.db-kop7__blok{padding:1.75rem;border:var(--db-rand) solid var(--db-roze);border-radius:var(--db-radius);background:var(--db-puurwit);min-height:12rem}
.db-kop7__blok h3{margin:0 0 .6rem;font:600 1.2rem/1.2 var(--db-font-kop)}
.db-kop7__blok p{margin:0;line-height:1.55}
@media(max-width:760px){
  .db-kop7__hero{min-height:0;padding:7rem 1rem 8.5rem}
  .db-kop7__kaartwrap{margin-top:-5rem}
  .db-kop7__kaart{grid-template-columns:1fr;gap:1rem;padding:1.5rem 1.25rem}
  .db-kop7__persoon{height:14rem;margin:-4rem 0 0}
  .db-kop7__pagina{grid-template-columns:1fr;padding:2.5rem 0 3rem}
  .db-kop7__blok{min-height:0}
}
/* ---- voet: site-voet-v9 ---- */
/* toon: verloop (eigen achtergrond van deze sectie; de paginagenerator leest deze regel voor website-kit RULES 4.26. Een andere toon per pagina komt via config.SECTIE_TOON en een klasse <wortel>--<toon> hieronder.) */
.db-voet-fond :focus-visible{outline:calc(2 * var(--db-rand)) solid var(--db-focus);outline-offset:3px}
.db-voet-fond :where(a){color:inherit;text-decoration:none}
.db-voet-fond address{font-style:normal;line-height:1.5}
.db-voet-fond .i{flex:none;width:1.2rem;height:1.2rem;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.db-voet-fond .i .f{fill:currentColor;stroke:none}
.db-voet-fond .vs{width:1.6rem;height:1.6rem}

.vf__tag{display:inline-flex;align-items:center;gap:.75rem;margin:0 0 .6rem;color:var(--db-roze);font:600 .76rem/1.3 var(--db-font-kop);letter-spacing:.12em;text-transform:uppercase}
.vf__tag::before{content:"";flex:none;width:2rem;height:var(--db-balk);background:var(--db-roze)}
.vf__lead{margin:.7rem 0 0;max-width:34rem;color:var(--vf-zacht);line-height:1.55}
.vf__acties{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem}
.vf__tel,.vf__wa,.vf__offerte{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:3rem;padding:.5rem 1.2rem;border-radius:var(--db-radius);white-space:nowrap;font:700 .9rem/1.2 var(--db-font-kop)}
.vf__tel{background:var(--db-actie);color:var(--db-zwart);box-shadow:var(--db-schaduw)}
.vf__wa{background:var(--vf-wa);color:var(--db-zwart)}  /* WhatsApp-stijl (gebruiker 2026-10-27) */
.vf__wa:is(:hover,:focus-visible){background:var(--vf-wa-hover)}
.vf__wa .i{color:var(--db-puurwit)}
.vf__offerte{background:var(--offerte);color:var(--db-puurwit)}

.vf__merk{display:flex;flex-direction:column;align-items:flex-start;gap:.6rem;min-width:0}
.vf__logo{display:block;width:min(100%,13.5rem);height:auto}
.vf__slogan{display:block;width:min(100%,12rem);height:auto}
.vf__adres{display:grid;gap:.4rem;margin:.3rem 0 0;font-size:.85rem;color:var(--vf-zacht)}
.vf__adres strong{margin-right:.5rem;color:var(--db-wit);font-family:var(--db-font-kop);font-weight:700}
.vf__mail{display:inline-flex;align-items:center;gap:.55rem;min-height:2.75rem}
.vf__social{display:flex;gap:.5rem}
.vf__social a{display:grid;place-items:center;width:2.75rem;height:2.75rem;border:1px solid var(--vf-lijn);border-radius:var(--db-radius)}
.vf__nav{display:contents}
.vf__kol{min-width:0}
.vf__kop{display:block;margin:.1rem 0 .6rem;list-style:none;color:var(--db-roze);font:700 .8rem/1.3 var(--db-font-kop);letter-spacing:.12em;text-transform:uppercase;pointer-events:none}
.vf__kop::-webkit-details-marker{display:none}
.vf__dub{display:grid;align-items:start;grid-template-columns:repeat(2,minmax(0,max-content));column-gap:clamp(1.25rem,2.5vw,2rem)}
.vf__kol ul{display:grid;gap:.15rem;margin:0;padding:0;list-style:none}
.vf__kol li a{display:inline-block;padding:.2rem 0;font-size:.92rem;line-height:1.4}

.vf__rooster{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,2.05fr) minmax(0,.95fr) minmax(0,.95fr);gap:1.25rem clamp(1.25rem,2.5vw,2rem)}

.vf__logos li{display:flex;align-items:center}
.vf__logos img{display:block;height:auto;filter:grayscale(1);opacity:.82}
.vf__logos li:hover img{filter:none;opacity:1}

.vf__balk a{display:inline-flex;align-items:center;min-height:2.75rem;color:var(--db-tekst-op-donker)}
.vf__balk p{margin:0}
.vf__balk ul{display:flex;flex-wrap:wrap;margin:0;padding:0;list-style:none}
.vf__punt{margin:0 .35rem}

@media (max-width:1100px){
  .vf__rooster{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .vf__nav{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:1.25rem 1.5rem;grid-column:1 / -1}
  .vf__merk{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap;align-items:center;gap:.6rem 2rem}
  .vf__adres{grid-auto-flow:column;gap:2rem;margin:0}
}
@media (max-width:860px){
  .vf__nav{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .vf__kol--diensten{grid-column:1 / -1}
}
@media (max-width:700px){
  .vf__nav{display:block}
  .vf__kol{margin:0 0 .6rem;scroll-margin-top:calc(var(--db-kop-h,64px) + 1rem)}
  .vf__kop{display:flex;align-items:center;justify-content:space-between;min-height:3rem;margin:0;padding:.4rem 1rem;border:1px solid var(--vf-knoprand);border-radius:var(--db-radius);background:var(--vf-knopvlak);color:var(--db-tekst-op-donker);pointer-events:auto;cursor:pointer}
  .vf__kop::after{content:"";flex:none;width:.55rem;height:.55rem;border:solid var(--db-roze);border-width:0 var(--db-rand) var(--db-rand) 0;transform:rotate(45deg);margin-right:.35rem}
  .vf__kol[open] > .vf__kop{border-color:var(--db-roze);color:var(--db-roze)}
  .vf__kol[open] > .vf__kop::after{transform:rotate(-135deg)}
  .vf__kol > ul,.vf__kol > .vf__dub{padding-top:.4rem}
  .vf__kol li a{display:flex;align-items:center;min-height:2.75rem;padding:.2rem 0}
  .vf__dub{grid-template-columns:minmax(0,1fr)}
  .vf__kol ul{padding-bottom:.4rem}
  .vf__adres{grid-auto-flow:row;gap:.5rem}
}
@media (max-width:560px){
  .vf__acties > *{flex:1 1 100%}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .vf__tel,.vf__wa,.vf__offerte,.vf__social a{transition:transform .25s ease,background-color .25s ease}
  .vf__tel:is(:hover,:focus-visible),.vf__wa:is(:hover,:focus-visible),.vf__offerte:is(:hover,:focus-visible),.vf__social a:is(:hover,:focus-visible){transform:translateY(-2px)}
  .vf__logos img{transition:opacity .25s ease,filter .25s ease}
}
@media (hover:hover){
  .vf__offerte:is(:hover,:focus-visible){background:var(--offerte-hover)}
  .vf__kop:is(:hover,:focus-visible){background:var(--vf-knophover)}
  .vf__kol li a:is(:hover,:focus-visible),.vf__balk a:is(:hover,:focus-visible){color:var(--db-roze);border-color:var(--db-roze)}
}


/* ---- Sitevoet, versie 9 (Draagbalken.nl). Naar v6, de busfoto nu als achtergrond van de hele voet: rechtsboven,
   links en onder uitgefaded in het donker (masker), zodat claim en kolommen erover leesbaar blijven. Partners
   lichtgrijs direct op het donker (geen vlak, geen rand), de onderbalk in twee regels, gecentreerd. */
.db-voet-fond{
  --vf-lijn:rgb(246 246 246 / .16);
  --vf-knoprand:rgb(246 246 246 / .55);--vf-knopvlak:rgb(246 246 246 / .06);--vf-knophover:rgb(246 246 246 / .14);
  --vf-zacht:rgb(246 246 246 / .8);
  --vf-diep:rgb(var(--db-zwart-rgb) / .5);
  --vf-wa:#25D366;--vf-wa-hover:#1EBE5A;
  --vf-sluier-klein:linear-gradient(180deg,rgb(var(--db-zwart-rgb) / .8) 0,rgb(var(--db-zwart-rgb) / .55) 100%);
  --vf-masker:linear-gradient(90deg,transparent 0,#000 42%),linear-gradient(180deg,#000 22%,transparent 80%);
  --vf-onder:linear-gradient(180deg,transparent 30%,rgb(var(--db-zwart-rgb) / .9) 90%);
  --vf-vert:linear-gradient(180deg,#000 80%,transparent 100%);
  --vf-sluier:linear-gradient(90deg,rgb(var(--db-zwart-rgb) / .88) 0,rgb(var(--db-zwart-rgb) / .6) 44%,transparent 78%),var(--vf-onder);
  position:relative;isolation:isolate;overflow:clip;background:var(--db-gradient);color:var(--db-tekst-op-donker);font-family:var(--db-font-tekst);font-size:.95rem;
}
.vf__voet{position:relative}
.vf__foto{position:absolute;z-index:-2;top:0;right:0;width:min(80%,66rem);height:min(100%,34rem);object-fit:cover;object-position:30% 50%;-webkit-mask-image:var(--vf-masker);mask-image:var(--vf-masker);-webkit-mask-composite:source-in;mask-composite:intersect}
.vf__sluier{position:absolute;z-index:-1;top:0;left:0;right:0;height:min(100%,34rem);background:var(--vf-sluier);-webkit-mask-image:var(--vf-vert);mask-image:var(--vf-vert);pointer-events:none}
.vf__band,.vf__rooster,.vf__partners,.vf__balk{width:min(100% - 2rem,75rem);margin-left:auto;margin-right:auto}
.vf__band{padding:clamp(1.75rem,3vw,2.5rem) 0 clamp(1.5rem,2.6vw,2.25rem)}
.vf__band h2{margin:0;max-width:20ch;font:700 clamp(1.55rem,1.2rem + 1vw,2rem)/1.12 var(--db-font-kop);letter-spacing:-.015em;text-wrap:balance}
.vf__lead{max-width:30rem}
.vf__acties{margin-top:1.1rem}
.vf__rooster{padding:1.5rem 0 1.25rem;border-top:1px solid var(--vf-lijn);align-items:start}
.vf__partners{display:flex;align-items:center;gap:1.5rem;margin-bottom:1.25rem;padding:.85rem 0;color:var(--db-tekst-op-donker)}
.vf__plabel{flex:none;margin:0;font:700 .78rem/1.3 var(--db-font-kop);letter-spacing:.12em;text-transform:uppercase}
.vf__logos{flex:1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 1.5rem;margin:0;padding:0;list-style:none}
.vf__logos img{filter:brightness(0) invert(1);opacity:.78}
/* logo 4 (rood vlak) en 6 (wit vlak) hebben een dichte achtergrond: 4 als lichtgrijs vlak, 6 omgekeerd en met screen zodat het vlak verdwijnt */
.vf__logos li:nth-child(4) img{filter:grayscale(1) brightness(1.7);opacity:.9}
.vf__logos li:nth-child(6) img{filter:grayscale(1) invert(1);mix-blend-mode:screen;opacity:.85}
.vf__logos li:is(:hover,:focus-within):nth-child(n) img{filter:none;mix-blend-mode:normal;opacity:1}
/* de link om elk logo: geen onderstreping, zichtbare focus via .db-voet-fond :focus-visible */
.vf__logolink{display:flex;align-items:center;justify-content:center;min-width:2.75rem;min-height:2.75rem;border-radius:var(--db-radius)}
.vf__logos img{width:calc(var(--lw) * 1rem);max-width:100%}
.vf__onder{background:var(--vf-diep);border-top:1px solid var(--vf-lijn)}
.vf__balk{padding:.35rem 0 .1rem;font-size:.86rem;color:var(--vf-zacht);text-align:center}
.vf__regel{padding:.4rem 0 .15rem}
.vf__rij{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0 2rem;border-top:1px solid var(--vf-lijn)}
.vf__rij ul{justify-content:center;gap:0 1.35rem}
.vf__credit{padding:.5rem 0}

@media (max-width:1100px){
  .vf__partners{flex-direction:column;align-items:flex-start;gap:.7rem}
  .vf__logos{justify-content:flex-start;gap:.75rem 2rem}
}
@media (max-width:860px){
  .vf__foto{width:100%;height:20rem;object-position:50% 50%;-webkit-mask-image:var(--vf-masker-klein);mask-image:var(--vf-masker-klein)}
  .db-voet-fond{--vf-masker-klein:linear-gradient(180deg,#000 30%,transparent 100%)}
  .vf__sluier{height:20rem;background:var(--vf-sluier-klein)}
}
@media (max-width:700px){
  .vf__partners{flex-direction:column;align-items:flex-start;gap:.6rem;padding:.85rem 0}
  .vf__logos{justify-content:flex-start;gap:.75rem 1.25rem}
  .vf__logos img{width:calc(var(--lw) * .8rem)}
  .vf__rooster{padding-bottom:.5rem}
}
@media (max-width:560px){
  .vf__rij{flex-direction:column;align-items:center;gap:0}
  .vf__rij ul{gap:0 1.1rem}
  .vf__regel{line-height:1.5}
}
/* ---- Toon verloop-om (BRIEF-ACHTERGROND 2026-10-27): verloop omgekeerd, grijs boven en donker onderaan; sluit aan op een buur die grijs eindigt. */
.db-voet-fond.db-voet-fond--verloop-om{background:var(--db-gradient-om)}
.db-voet-fond.db-voet-fond--verloop{background:var(--db-gradient)}
/* Zwevende knoppen (whatsapp.css, bereken.css) geven de body onderaan 5rem ruimte op een witte achtergrond; de voet loopt er zelf doorheen, zodat daar geen witte band onder het donker zit en de laatste regel boven de knoppen blijft. */
@media (max-width:560px){
  .db-voet-fond{margin-bottom:calc(-5rem - env(safe-area-inset-bottom))}
  .vf__onder{padding-bottom:calc(5rem + env(safe-area-inset-bottom))}  /* de ruimte zit in de onderbalk en krijgt diens donkere laag, niet het lichtere einde van het verloop (D03-V5-01) */
}
/* ---- blokken ---- */