/* Qlimatix - "Zakelijk doelgroeppagina" (template-zakelijk-doelgroep.php), v2 12-10-2026: hub-opmaak.
   Bovenop zakelijk.css (tokens, .btn-pill, .crumb, formulier .zform) en cat.css (.pcard).
   (template-hub-usage.php, op zijn beurt de NL-staginghomepage) en gescoped op .zdh: home.css en hub-usage.css
   laden hier niet. Wat de hub niet heeft: voordelenrij, productkaart + regel "waarom", tabel, FAQ, formulierblok. */

.zdh { font-family: 'Onest', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.zdh *, .zdh *::before, .zdh *::after { box-sizing: border-box; }
.zdh section { scroll-margin-top: 110px; }
.zdh .zdh-lead { font-size: 16px; line-height: 1.6; color: var(--muted); margin: 12px 0 0; max-width: 720px; text-wrap: pretty; }
.zdh .zdh-lead a, .zdh .lr__copy a, .zdh .zdh-note a, .zdh .zdh-qa p a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- kruimelpad: .cat-crumb (cat.css), met de ruimte van de FR hub ---------- */
.zdh .cat-crumb { padding-top: 24px; margin-bottom: 18px; }

/* ---------- hero: licht blok links (zonder Trusted Shops-regel), twee tegels rechts ---------- */
.zdh .zdh-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: stretch; }
.zdh .zdh-hero__main { display: flex; flex-direction: column; justify-content: center; background: #f2f6f9; border: 1px solid #e3eaf0; border-radius: 28px; padding: 44px 48px; }
.zdh .zdh-h1 { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; letter-spacing: .06em; line-height: 1.3; text-transform: uppercase; color: var(--orange); margin: 0 0 12px; }
.zdh .zdh-h1::before { content: ""; width: 22px; height: 2px; background: var(--orange); border-radius: 2px; flex-shrink: 0; }
/* H1 = bovenregel + grote kop in één element (13-10); de spans gedragen zich als de oude h1/p */
.zdh .zdh-h1-wrap { margin: 0; font: inherit; letter-spacing: normal; color: inherit; }
.zdh .zdh-h1-wrap .zdh-h1, .zdh .zdh-h1-wrap .zdh-hero__title { display: flex; }
.zdh .zdh-h1-wrap .zdh-hero__title { display: block; }
.zdh .zdh-h1-wrap .zdh-hero__title::first-letter { text-transform: uppercase; }
.zdh .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.zdh .zdh-hero__title { font-size: 52px; line-height: 1.03; letter-spacing: -.035em; font-weight: 600; color: var(--navy); margin: 0 0 18px; text-wrap: balance; }
.zdh .zdh-hero__sub { font-size: 16.5px; line-height: 1.6; color: var(--muted); margin: 0 0 26px; max-width: 540px; text-wrap: pretty; }
.zdh .zdh-hero__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 24px; margin-bottom: 26px; }
.zdh .zdh-hero__actions a.btn-pill { color: #fff; }
.zdh .zdh-hero__more { font-size: 15px; font-weight: 600; color: var(--navy); text-decoration: underline; text-underline-offset: 4px; }
.zdh .zdh-hero__more:hover { color: var(--orange); }
.zdh .zdh-hero__usps { display: flex; flex-direction: column; gap: 9px; list-style: none; margin: 0; padding: 0; }
.zdh .zdh-hero__usps li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.45; color: var(--text); }
.zdh .zdh-hero__usps svg { color: #2f9e44; flex-shrink: 0; margin-top: 1px; }


/* ---------- voordelen ---------- */
.zdh .zdh-vd { padding: 56px 0 0; }
.zdh .zdh-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; letter-spacing: .02em; line-height: 1.3; color: var(--orange); margin: 0 0 16px; }
.zdh .zdh-eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--orange); border-radius: 2px; }
.zdh .zdh-vd__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.zdh .zdh-vd__item { display: flex; flex-direction: column; gap: 10px; padding: 24px; border: 1px solid var(--border); border-radius: 20px; background: #fff; }
.zdh .zdh-vd__ic { width: 44px; height: 44px; border-radius: 999px; background: #f2f6f9; color: var(--navy); display: grid; place-items: center; }
.zdh .zdh-vd__title { font-size: 17px; line-height: 1.25; color: var(--navy); }
.zdh .zdh-vd__body { font-size: 14.5px; line-height: 1.55; color: var(--muted); margin: 0; }

/* ---------- klussen als .lk-tegels ---------- */
.zdh .lk { padding: 64px 0 40px; }
.zdh .lk__head { margin-bottom: 24px; }
.zdh .lk__title, .zdh .bv__title { font-size: 40px; line-height: 1.05; letter-spacing: -.03em; font-weight: 600; color: var(--text); margin: 0; text-wrap: balance; }
.zdh .lk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; }
.zdh .lk-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.zdh .lk-card { display: block; color: inherit; }
.zdh .lk-card__img { aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #eef1f4; }
.zdh .lk-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.zdh a.lk-card:hover .lk-card__img img { transform: scale(1.03); }
.zdh .lk-card__img--ic { display: grid; place-items: center; background: #f2f6f9; border: 1px solid #e3eaf0; color: var(--navy); }
.zdh .lk-card__bottom { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; margin-top: 14px; }
.zdh .lk-card__label { grid-column: 1; grid-row: 1; font-size: 19px; line-height: 1.2; letter-spacing: -.01em; color: var(--text); }
.zdh .lk-card__arrow { grid-column: 2; grid-row: 1; width: 34px; height: 34px; border-radius: 999px; background: #f3f5f7; color: var(--text); display: grid; place-items: center; transition: background .18s, color .18s; }
.zdh a.lk-card:hover .lk-card__arrow { background: var(--orange); color: #fff; }
.zdh .lk-card__sub { grid-column: 1 / -1; font-size: 14.5px; line-height: 1.5; color: var(--muted); margin: 0; text-wrap: pretty; }
.zdh .lk-card__more { grid-column: 1 / -1; font-size: 14px; font-weight: 600; color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- producten: top 5-slider (.bv--top5 + .au-slider), kaart uit cat.css + regel "waarom" ---------- */
.zdh .bv--top5 { padding: 56px 0 8px; }
.zdh .bv__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 24px; }
.zdh .bv__headtext { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.zdh .au-slider { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 8px 2px 14px; margin: 0 -2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.zdh .au-slider::-webkit-scrollbar { display: none; }
/* Kaart zoals de top 5 op de NL-homepage (Jay 12-10): de home.css-regels die afwijken van cat.css, gemeten met
   getComputedStyle op beide pagina's. Vaste 320px, de flexrij rekt ze even hoog. */
.zdh .au-slider > .pcard { flex: 0 0 calc((100% - 72px) / 4); width: auto; min-width: 0; scroll-snap-align: start; line-height: 1.55; } /* 4 per rij (Jay 12-10); meer producten = schuiven */
@media (max-width: 1100px) { .zdh .au-slider > .pcard { flex-basis: calc((100% - 48px) / 3); } }
@media (max-width: 800px) { .zdh .au-slider > .pcard { flex-basis: calc((100% - 24px) / 2); } }
.zdh .au-slider > .pcard .pcard__media { aspect-ratio: 1 / 1; display: grid; place-items: center; padding: 14px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--border-soft); }
.zdh .au-slider > .pcard .pcard__media img { width: 100%; height: auto; object-fit: contain; } /* anders houdt de foto zijn height="300" bij 266px breed */
.zdh .au-slider > .pcard > .pcard__name { font-size: 16.5px; font-weight: 600; color: var(--navy); line-height: 1.3; letter-spacing: -.01em; margin: 8px 0 10px; min-height: 0; }
.zdh .au-slider > .pcard .pcard__compare { color: var(--muted); }
.zdh .au-slider > .pcard .pcard__compare:hover { color: var(--navy); }
/* zakelijk.css zet .zk-page a { color: inherit } en wint van de witte knoptekst; zelfde fix als cat.css r. 41 (.cat-page) */
.zdh a.pcard__cart, .zdh a.pcard__cart:hover, .zdh a.btn-pill, .zdh a.btn-pill:hover { color: #fff; }
.zdh .au-slider-foot { display: flex; align-items: center; gap: 26px; margin-top: 24px; }
.zdh .au-slider-bar { position: relative; flex: 1; height: 4px; border-radius: 999px; background: var(--border-soft, #eef1f4); overflow: hidden; }
.zdh .au-slider-bar__thumb { position: absolute; top: 0; left: 0; height: 100%; min-width: 14%; width: 30%; border-radius: 999px; background: var(--navy); transition: left .18s ease, width .18s ease; }
.zdh .au-slider-nav { display: flex; gap: 10px; flex-shrink: 0; }
.zdh .au-slider-nav button { width: 46px; height: 46px; border-radius: 999px; border: 1px solid var(--border); background: #fff; color: var(--text); display: grid; place-items: center; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.zdh .au-slider-nav button:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.zdh .zdh-note { display: flex; gap: 12px; align-items: flex-start; margin: 22px 0 0; padding: 16px 20px; background: #f5f8fa; border-radius: 16px; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.zdh .zdh-note svg { flex-shrink: 0; color: var(--navy); margin-top: 2px; }

/* ---------- specialist als .lokb-balk ---------- */
.zdh .zdh-kh { padding: 40px 0 0; }
.zdh .lokb { background: #0d2334; border-radius: 26px; padding: 30px 34px; display: flex; align-items: center; gap: 24px; color: #fff; }
.zdh .lokb-ic { width: 72px; height: 72px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; background: rgba(255,255,255,.1); color: #fff; }
.zdh .lokb-text { flex: 1; min-width: 0; }
.zdh .lokb-title { margin: 0 0 6px; font-size: 22px; font-weight: 600; color: #fff; letter-spacing: -.015em; }
.zdh .lokb-sub { margin: 0; font-size: 15.5px; line-height: 1.5; color: #c4ccd3; font-weight: 300; }
.zdh .lokb .btn-pill { flex: 0 0 auto; color: #fff; white-space: nowrap; }

/* ---------- uitleg als .lr-rijen ---------- */
.zdh .lr { padding: 64px 0 16px; }
.zdh .lr__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.zdh .lr__grid--center { align-items: center; }
.zdh .lr--single .lr__grid { grid-template-columns: minmax(0, 820px); }
.zdh .lr__title { font-size: 34px; line-height: 1.1; letter-spacing: -.025em; font-weight: 600; color: var(--navy); margin: 0 0 18px; text-wrap: balance; }
.zdh .lr__copy { font-size: 16px; line-height: 1.65; color: var(--muted); margin: 0 0 14px; text-wrap: pretty; }
.zdh .lr__actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 12px; }
.zdh .lr__actions a.btn-pill { color: #fff; }
.zdh .zdh-table { overflow-x: auto; border: 1px solid var(--border); border-radius: 18px; }
.zdh .zdh-table table { width: 100%; border-collapse: collapse; font-size: 15px; }
.zdh .zdh-table th, .zdh .zdh-table td { padding: 13px 18px; text-align: left; border-bottom: 1px solid var(--border); color: var(--text); }
.zdh .zdh-table thead th { background: var(--navy); color: #fff; font-weight: 600; }
.zdh .zdh-table tbody tr:nth-child(even) td { background: #f7f9fb; }
.zdh .zdh-table tbody tr:last-child td { border-bottom: 0; }
.zdh .ka-list { display: flex; flex-direction: column; gap: 10px; background: #f5f8fa; border-radius: 28px; padding: 22px; }
.zdh .ka-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; min-height: 64px; background: #fff; border-radius: 18px; padding: 12px 16px 12px 20px; color: var(--text); box-shadow: 0 10px 24px -20px rgba(1,39,63,.35); transition: transform .2s, box-shadow .2s; }
.zdh .ka-item:hover { transform: translateY(-2px); box-shadow: 0 18px 32px -22px rgba(1,39,63,.45); color: var(--text); }
.zdh .ka-item__title { display: block; font-size: 16px; font-weight: 600; line-height: 1.3; }
.zdh .ka-item__sub { display: block; font-size: 14px; line-height: 1.45; color: var(--muted); margin-top: 3px; }
.zdh .ka-item__arrow { width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center; background: #f3f5f7; transition: background .18s, color .18s; }
.zdh .ka-item:hover .ka-item__arrow { background: var(--orange); color: #fff; }

/* ---------- FAQ: titel links, accordeon rechts ---------- */
.zdh .zdh-faq { padding: 64px 0 16px; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: start; }
.zdh .zdh-qa { border-bottom: 1px solid var(--border); }
.zdh .zdh-qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 18px; min-height: 44px; padding: 18px 0; font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--navy); }
.zdh .zdh-qa summary::-webkit-details-marker { display: none; }
.zdh .zdh-qa__plus { width: 32px; height: 32px; border-radius: 999px; border: 1px solid var(--border); display: grid; place-items: center; flex-shrink: 0; transition: transform .2s, background .2s, color .2s; }
.zdh .zdh-qa[open] .zdh-qa__plus { transform: rotate(45deg); background: var(--navy); color: #fff; border-color: var(--navy); }
.zdh .zdh-qa p { margin: 0 0 20px; font-size: 15.5px; line-height: 1.65; color: var(--muted); max-width: 680px; }

/* ---------- offerteformulier: licht blok onderaan ---------- */
.zdh .zdh-checks { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 10px; }
.zdh .zdh-checks li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.5; }
.zdh .zdh-checks svg { color: #2f9e44; flex-shrink: 0; margin-top: 3px; }
.zdh .zdh-alt { margin: 20px 0 0; font-size: 15px; }
.zdh .zdh-alt a { font-weight: 600; color: var(--navy); text-decoration: underline; }
.zdh .zdh-alt span { font-size: 14px; color: var(--muted); }
.zdh .zd-form { margin: 0; }
.zdh .zd-form .zform__row textarea { width: 100%; }
.zdh .zd-err { display: block; color: #b42318; font-size: 13px; margin-top: 4px; }
.zdh .zd-alert { background: #fdecea; color: #7a1a12; border-radius: 12px; padding: 12px 14px; font-size: 14px; margin: 0 0 14px; }
.zdh .zd-alert a { text-decoration: underline; }

/* ---------- hero: tekstblok links, offerteformulier rechts ---------- */
.zdh .zh-hero { align-items: start; }
.zdh .zh-hero .zdh-hero__main { align-self: stretch; }
.zdh .zh-form { margin: 0; }
.zdh .zh-more { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.zdh .zh-more__ic { width: 30px; height: 30px; border-radius: 999px; border: 1px solid var(--border); background: #fff; display: grid; place-items: center; color: var(--navy); flex-shrink: 0; }
.zdh .zh-more:hover .zh-more__ic { border-color: var(--orange); color: var(--orange); }

/* ---------- modelkiezer: menu met foto + regels met aantal (zakelijk-doelgroep.js); <details> als terugval zonder JS ---------- */
.zdh .zpick { position: relative; border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
.zdh .zpick legend { font-size: 12.5px; font-weight: 500; color: var(--text); padding: 0; margin-bottom: 6px; }
.zdh .zpick__hint { display: block; font-weight: 400; color: var(--muted); margin-top: 2px; }
.zdh .zpick__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.zdh .zpick__list:not(:empty) { margin-bottom: 8px; }
.zdh .zpick__row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 8px 8px 8px; border: 1px solid var(--border); border-radius: 12px; background: #fff; }
.zdh .zpick__thumb { width: 48px; height: 48px; border-radius: 9px; background: #f5f8fa; display: grid; place-items: center; overflow: hidden; flex-shrink: 0; }
.zdh .zpick__thumb img { width: 100%; height: 100%; object-fit: contain; }
.zdh .zpick__rowtext { display: flex; flex-direction: column; min-width: 0; }
.zdh .zpick__name { font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--navy); }
.zdh .zpick__price { font-size: 12.5px; color: var(--muted); }
.zdh .zpick__qty { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.zdh .zpick__step { width: 34px; height: 36px; border: 0; background: #f5f8fa; color: var(--navy); font-size: 17px; line-height: 1; cursor: pointer; font-family: inherit; }
.zdh .zpick__step:hover { background: #e9eff4; }
.zdh .zpick .zpick__qty input { width: 44px; min-height: 36px; height: 36px; border: 0; border-radius: 0; padding: 0; text-align: center; font-size: 14px; -moz-appearance: textfield; box-shadow: none; }
.zdh .zpick__qty input::-webkit-outer-spin-button, .zdh .zpick__qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.zdh .zpick__rm { width: 30px; height: 30px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; }
.zdh .zpick__rm:hover { background: #fdecea; color: #b42318; }
.zdh .zpick__addbtn { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 14px; border: 1px dashed var(--border); border-radius: 12px; background: #fff; font: inherit; font-size: 14px; font-weight: 600; color: var(--navy); cursor: pointer; list-style: none; text-align: left; }
.zdh .zpick__addbtn::-webkit-details-marker { display: none; }
.zdh .zpick__addbtn:hover, .zdh .zpick__addbtn[aria-expanded="true"] { border-color: var(--orange); border-style: solid; }
.zdh .zpick__addplus { width: 22px; height: 22px; border-radius: 999px; background: var(--orange); color: #fff; display: grid; place-items: center; font-size: 15px; line-height: 1; flex-shrink: 0; }
.zdh .zpick__chev { margin-left: auto; transition: transform .2s; }
.zdh .zpick__addbtn[aria-expanded="true"] .zpick__chev { transform: rotate(180deg); }
.zdh .zpick__menu { position: absolute; left: 0; right: 0; z-index: 20; margin-top: 6px; max-height: 320px; overflow-y: auto; background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 24px 48px -24px rgba(1,39,63,.35); padding: 6px; }
.zdh .zpick__grouplabel { padding: 10px 8px 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.zdh .zpick__group + .zpick__group { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--border-soft, #eef1f4); }
.zdh .zpick__opt { width: 100%; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px; border: 0; border-radius: 10px; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.zdh .zpick__opt:hover, .zdh .zpick__opt:focus-visible { background: #f2f6f9; outline: none; }
.zdh .zpick__opt[aria-selected="true"] .zpick__name::after { content: " \2713"; color: #2f9e44; }
.zdh .zpick__opt .zpick__price { font-size: 13px; font-weight: 600; color: var(--navy); white-space: nowrap; }
/* terugval zonder JS */
.zdh .zpick__fallback[open] .zpick__addbtn { border-style: solid; }
.zdh .zpick__fblist { list-style: none; margin: 0; padding: 8px 4px 4px; display: flex; flex-direction: column; gap: 8px; }
.zdh .zpick__item { display: grid; grid-template-columns: minmax(0, 1fr) 76px; gap: 12px; align-items: center; }
.zdh .zpick__item label { font-size: 13.5px; line-height: 1.35; color: var(--text); }
.zdh .zpick__item input { width: 100%; min-height: 40px; text-align: center; }
@media (max-width: 420px) { .zdh .zpick__row { grid-template-columns: 40px minmax(0, 1fr) auto; } .zdh .zpick__thumb { width: 40px; height: 40px; } .zdh .zpick__rm { grid-column: 3; grid-row: 1; } .zdh .zpick__qty { grid-column: 2 / 4; justify-self: start; } }

/* ---------- formulierkaart: punten en belregel ---------- */
.zdh .zh-form .zh-form__pts { margin: 0 0 22px; gap: 6px; }
.zdh .zh-form .zh-form__pts li { font-size: 13.5px; }
.zdh .zh-form .zdh-alt { margin: 14px 0 0; font-size: 13.5px; color: var(--muted); }

/* knoppen in de hero alleen als het formulier eronder staat; naast het formulier zijn ze dubbel (Jay 13-10) */
@media (min-width: 981px) { .zdh .zh-hero .zdh-hero__actions { display: none; } }

/* formulierkaart zonder oranje balk (Jay 13-10) en een gewone knop i.p.v. volle breedte */
.zdh .zh-form::before { display: none; }
.zdh .zh-form .zform__submit { width: auto; align-self: flex-start; justify-content: flex-start; }

/* ---------- plakbalk onderin: uit Jays export (zakelijk-hub.css, 13-10), alle formaten, na de hero ---------- */
.zdh .zk-sticky, .zk-sticky { display: block !important; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 0; background: var(--orange); box-shadow: 0 -12px 32px -18px rgba(14,42,63,.3); transform: translateY(110%); transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.zk-sticky.is-shown { transform: none; }
.zk-sticky__note { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 8px 16px; background: #f2f6f9; font-size: 13px; font-weight: 500; color: var(--navy); }
.zk-sticky__dot { width: 8px; height: 8px; border-radius: 999px; background: #1f9d55; box-shadow: 0 0 0 3px rgba(31,157,85,.18); }
.zk-sticky__btn, .zdh .zk-sticky__btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); background: var(--orange); color: #fff !important; font-size: 16px; font-weight: 500; text-decoration: none; }
.zk-sticky__btn svg { width: 18px; height: 18px; color: #fff; }
.zk-sticky__btn:hover { background: #d96a28; }
body.zk-bar-shown .zd-page { padding-bottom: 100px; }
body.zk-bar-shown .qxcw, body.zk-bar-shown .tw { opacity: 0; pointer-events: none; visibility: hidden; }
.qxcw, .tw { transition: opacity .25s, visibility .25s; }

/* ---------- uitlegrijen als lichte kaarten (Jay 13-10: geen losse tekstmuren) ---------- */
.zdh .zdh-uit { padding: 40px 0 0; }
.zdh .zdh-uit .lr__title { font-size: 28px; margin-bottom: 14px; }
.zdh .zdh-uit .lr__copy { font-size: 15.5px; }
.zdh .zdh-uit .lr__copy:last-child { margin-bottom: 0; }
.zdh .lr--pair .lr__grid { gap: 20px; align-items: stretch; }
.zdh .lr--pair .lr__text, .zdh .lr--single .lr__text,
.zdh .lr--table .lr__grid, .zdh .lr--links .lr__grid { background: #f2f6f9; border: 1px solid #e3eaf0; border-radius: 28px; padding: 40px 44px; }
.zdh .lr--single .lr__grid { grid-template-columns: minmax(0, 1fr); }
.zdh .lr--single .lr__text > * { max-width: 760px; }
.zdh .lr--table .lr__grid, .zdh .lr--links .lr__grid { gap: 40px; }
.zdh .lr--table .zdh-table { background: #fff; }
.zdh .lr--links .ka-list { background: transparent; padding: 0; }
.zdh .zdh-uit .lr__actions { margin-top: 18px; }
@media (max-width: 700px) {
	.zdh .zdh-uit { padding-top: 24px; }
	.zdh .zdh-uit .lr__title { font-size: 23px; }
	.zdh .lr--pair .lr__text, .zdh .lr--single .lr__text, .zdh .lr--table .lr__grid, .zdh .lr--links .lr__grid { padding: 26px 22px; border-radius: 22px; }
	.zdh .lr--pair .lr__grid { gap: 12px; }
}

/* ---------- stappen (zo bestelt u zakelijk) ---------- */
.zdh .zdh-stappen { padding: 56px 0 0; }
.zdh .zdh-stappen__grid { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.zdh .zdh-stap { position: relative; padding: 26px 24px; border: 1px solid var(--border); border-radius: 20px; background: #fff; }
.zdh .zdh-stap__num { width: 36px; height: 36px; border-radius: 999px; background: var(--navy); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 15px; margin-bottom: 14px; }
.zdh .zdh-stap__title { font-size: 17px; line-height: 1.25; color: var(--navy); margin: 0 0 8px; }
.zdh .zdh-stap__body { font-size: 14.5px; line-height: 1.55; color: var(--muted); margin: 0; }
.zdh .zdh-stap__body a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) { .zdh .zdh-stappen__grid { grid-template-columns: 1fr; gap: 12px; } }

/* ---------- responsive (zelfde breekpunten als hub-usage.css) ---------- */
@media (max-width: 1000px) {
	.zdh .lk-grid, .zdh .lk-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 18px; }
}
@media (max-width: 980px) {
	.zdh .zdh-hero { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
	.zdh .lr__grid, .zdh .zdh-faq, .zdh .zh-hero { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 700px) {
	.zdh .zdh-hero__main { padding: 28px 22px; border-radius: 22px; }
	.zdh .zdh-hero__title { font-size: 34px; }
	.zdh .zdh-hero__sub { font-size: 15.5px; margin-bottom: 20px; }
	.zdh .zdh-hero__actions .btn-pill { width: 100%; justify-content: flex-start; }
	.zdh .zdh-hero__usps li { font-size: 14px; }
	.zdh .zdh-vd { padding-top: 40px; }
	.zdh .lk, .zdh .lr { padding: 40px 0 16px; }
	.zdh .lk__title, .zdh .bv__title { font-size: 30px; }
	.zdh .lk-grid, .zdh .lk-grid--4 { grid-template-columns: 1fr; gap: 12px; }
	.zdh .lk-card { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px; border: 1px solid var(--border); border-radius: 14px; }
	.zdh .lk-card__img { aspect-ratio: 1; border-radius: 10px; }
	.zdh .lk-card__img--ic svg { width: 26px; height: 26px; }
	.zdh .lk-card__bottom { margin: 0; }
	.zdh .lk-card__label { font-size: 16px; }
	.zdh .lk-card__more { display: none; }
	.zdh .lk-card__sub { font-size: 13.5px; }
	.zdh .bv--top5 { padding-top: 40px; }
	.zdh .bv__head { flex-direction: column; align-items: stretch; gap: 18px; margin-bottom: 20px; }
	.zdh .lokb { flex-direction: column; align-items: flex-start; gap: 18px; padding: 26px 24px; border-radius: 22px; }
	.zdh .lokb-ic { width: 56px; height: 56px; }
	.zdh .lokb .btn-pill { width: 100%; white-space: normal; }
	.zdh .lr__title { font-size: 27px; }
	.zdh .lr__copy { font-size: 15px; }
	.zdh .lr__actions .btn-pill { width: 100%; justify-content: flex-start; }
	.zdh .ka-list { padding: 14px; border-radius: 20px; }
	.zdh .zdh-faq { padding-top: 40px; }
	.zdh .zform__grid2 { grid-template-columns: 1fr; }
	.zdh .zdh-table table { font-size: 14px; }
	.zdh .zdh-table th, .zdh .zdh-table td { padding: 10px 12px; }
}
@media (max-width: 560px) {
	.zdh .au-slider > .pcard { flex-basis: 84vw; }
}

/* De footer trekt zijn nieuwsbriefband 150px omhoog over de laatste sectie (footer.css); hier valt die dan over het
   formulier. Zelfde oplossing als adviescentrum.css: op dit paginatype niet omhoog. */
body.page-template-template-zakelijk-doelgroep #lofoot-root .lof-news-band--top,
body.page-template-template-zakelijk-offerte #lofoot-root .lof-news-band--top { transform: none !important; margin-bottom: 0 !important; }
.zd-page { padding-bottom: 64px; }

/* Korte hero met foto (16-10-2026, Jay): hub en doelgroeppagina's hebben geen formulier meer in de hero, alleen een knop
   naar /zakelijk/offerte-aanvragen/. Foto rechts even hoog als het lichte blok; zonder foto vult het blok de breedte. */
.zdh .zdh-hero--foto:not(:has(.zdh-hero__foto)) { grid-template-columns: minmax(0, 1fr); }
.zdh .zdh-hero--foto .zdh-hero__actions { margin-bottom: 0; }
.zdh .zdh-hero--foto .zdh-hero__usps { margin-top: 26px; }
.zdh .zdh-hero__foto { border-radius: 28px; overflow: hidden; background: #eef3f7; min-height: 340px; }
.zdh .zdh-hero__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 980px) { .zdh .zdh-hero__foto { min-height: 0; height: 210px; border-radius: 22px; } }

/* Offertepagina: wat er na de aanvraag gebeurt, links naast het formulier. */
.zdh .zo-steps { list-style: none; counter-reset: zo; display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; }
.zdh .zo-steps li { counter-increment: zo; display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 14px; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.zdh .zo-steps li::before { content: counter(zo); grid-row: span 2; width: 32px; height: 32px; border-radius: 50%; background: var(--navy); color: #fff; font-weight: 600; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.zdh .zo-steps strong { color: var(--navy); font-size: 15.5px; }
.zdh .zo-alt { margin: 26px 0 0; font-size: 14px; color: var(--muted); }
.zdh .zo-alt a { color: var(--navy); font-weight: 600; }
.zdh.zo-page .zform__head { margin-bottom: 14px; }

/* qx-zd-hero-a1-20261016 begin (Jay, export 51 "variant A1"): vervangt de compacte hero van eerder vandaag.
   Grijs paneel met ronde hoeken, tekst links (kruimelpad, label, titel, intro, vinkjes, knoppen), foto vult de rechterhelft.
   Alleen de opmaak uit de export; de tekst blijft die van de pagina zelf. */
.zdh .zdh-hero--foto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 0; min-height: 520px; margin-top: 22px; padding: 0; border-radius: 32px; overflow: hidden; background: #eeece7; }
.zdh .zdh-hero--foto:not(:has(.zdh-hero__foto)) { grid-template-columns: minmax(0, 1fr); min-height: 0; }
.zdh .zdh-hero--foto .zdh-hero__main { display: flex; flex-direction: column; justify-content: center; background: none; border: 0; border-radius: 0; padding: 36px 48px 48px; }
.zdh .zdh-hero--foto .cat-crumb { margin: 0 0 28px; padding: 0; font-size: 14px; }
.zdh .zdh-hero--foto .zdh-h1 { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; color: #d2641f; margin: 0 0 14px; }
.zdh .zdh-hero--foto .zdh-h1::before { display: none; }
.zdh .zdh-hero--foto .zdh-hero__title { font-size: 50px; line-height: 1.04; font-weight: 600; color: #10293d; letter-spacing: -.028em; margin: 0 0 18px; text-wrap: balance; }
.zdh .zdh-hero--foto .zdh-hero__sub { font-size: 17.5px; line-height: 1.6; color: #46535c; margin: 0 0 28px; max-width: 520px; }
.zdh .zdh-hero--foto .zdh-hero__usps { order: 1; margin: 0 0 28px; gap: 11px; }
.zdh .zdh-hero--foto .zdh-hero__usps li { align-items: center; gap: 11px; font-size: 16px; line-height: 1.45; color: #16242f; }
.zdh .zdh-hero--foto .zdh-hero__usps svg { width: 22px; height: 22px; padding: 5px; margin: 0; border-radius: 50%; background: #1f8a4d; color: #fff; }
.zdh .zdh-hero--foto .zdh-hero__actions { order: 2; margin: 0; gap: 14px 22px; }
.zdh .zdh-hero--foto .zdh-hero__actions a.btn-pill { background: linear-gradient(90deg, #f0974a, #e87f1e); }
.zdh .zdh-hero--foto .zdh-hero__more { text-decoration: none; }
.zdh .zdh-hero--foto .zdh-hero__more::after { content: " \2192"; }
.zdh .zdh-hero--foto .zdh-hero__foto { position: relative; min-height: 0; height: auto; border-radius: 0; }
.zdh .zdh-hero--foto .zdh-hero__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 980px) {
	.zdh .zdh-hero--foto { grid-template-columns: minmax(0, 1fr); min-height: 0; }
	.zdh .zdh-hero--foto .zdh-hero__main { padding: 28px 24px 32px; }
	.zdh .zdh-hero--foto .zdh-hero__foto { min-height: 360px; border-radius: 0; }
}
@media (max-width: 680px) {
	.zdh .zdh-hero--foto { margin-top: 14px; border-radius: 24px; }
	.zdh .zdh-hero--foto .zdh-hero__title { font-size: 34px; }
	.zdh .zdh-hero--foto .zdh-hero__foto { min-height: 260px; }
}
/* qx-zd-hero-a1-20261016 eind */

/* qx-zd-voordelen-a1-20261016 begin (Jay, export 51 A1): zes voordelen als grijze tegels, kop links en intro rechts. */
.zdh .zdh-vd { padding: 72px 0 0; }
.zdh .zdh-vd__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: end; margin-bottom: 40px; }
.zdh .zdh-vd__eb { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #d2641f; }
.zdh .zdh-vd__h2 { font-size: 38px; font-weight: 600; color: #10293d; letter-spacing: -.024em; margin: 8px 0 0; line-height: 1.08; text-wrap: balance; }
.zdh .zdh-vd__intro { font-size: 17px; line-height: 1.6; color: #46535c; margin: 0; }
.zdh .zdh-vd__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.zdh .zdh-vd__item { gap: 0; padding: 26px; border: 0; border-radius: 20px; background: #f5f3ef; }
.zdh .zdh-vd__ic { width: 44px; height: 44px; border-radius: 12px; background: #fff; border: 1px solid #e7e3dd; color: #d2641f; margin-bottom: 18px; }
.zdh .zdh-vd__title { font-size: 18px; font-weight: 600; line-height: 1.2; color: #10293d; margin: 0 0 8px; }
.zdh .zdh-vd__body { font-size: 15px; line-height: 1.6; color: #46535c; }
@media (max-width: 980px) {
	.zdh .zdh-vd__head { grid-template-columns: minmax(0, 1fr); gap: 14px; }
	.zdh .zdh-vd__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
	.zdh .zdh-vd { padding-top: 48px; }
	.zdh .zdh-vd__h2 { font-size: 30px; }
	.zdh .zdh-vd__grid { grid-template-columns: minmax(0, 1fr); }
}
/* qx-zd-voordelen-a1-20261016 eind */

/* Voordelen-tegels variant K3 (Jay 16-10, export 53): witte tegel met rand en een oranje streepje bovenaan, oranje
   icoonvlak, schaduw bij hover; de laatste tegel (de specialist) donkerblauw. */
.zdh .zdh-vd__item { position: relative; overflow: hidden; background: #fff; border: 1px solid #e7e3dd; transition: border-color .15s, box-shadow .15s; }
.zdh .zdh-vd__item::before { content: ""; position: absolute; left: 26px; top: 0; width: 44px; height: 3px; border-radius: 0 0 3px 3px; background: #e77935; }
.zdh .zdh-vd__item:hover { border-color: #d8d3cb; box-shadow: 0 16px 40px -28px rgba(16, 41, 61, .4); }
.zdh .zdh-vd__ic { background: #fdf1e8; border-color: #f4dcc8; color: #d2641f; }
.zdh .zdh-vd__item:last-child { background: #01273f; border-color: #01273f; }
.zdh .zdh-vd__item:last-child::before { background: #f0974a; }
.zdh .zdh-vd__item:last-child .zdh-vd__ic { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .15); color: #f0974a; }
.zdh .zdh-vd__item:last-child .zdh-vd__title { color: #fff; }
.zdh .zdh-vd__item:last-child .zdh-vd__body { color: #aebecb; }

/* Stappen variant S1 (Jay 16-10, export 52): bovenregel, grote kop, intro, oranje nummers met stippellijn, label per stap,
   knop + telefoon. Overschrijft de kaartjes van .zdh-stap alleen binnen .zdh-stappen--s1. */
.zdh .zdh-stappen--s1 { padding: 72px 0 24px; }
.zdh .zdh-stappen__eb { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #d2641f; margin-bottom: 12px; }
.zdh .zdh-stappen--s1 .zdh-stappen__h2 { font-size: 38px; font-weight: 600; color: #10293d; letter-spacing: -.024em; margin: 0 0 14px; line-height: 1.08; }
.zdh .zdh-stappen__lead { font-size: 17px; line-height: 1.6; color: #46535c; margin: 0 0 44px; max-width: 620px; }
.zdh .zdh-stappen--s1 .zdh-stappen__grid { margin: 0; gap: 24px; position: relative; }
.zdh .zdh-stappen--s1 .zdh-stappen__grid::before { content: ""; position: absolute; top: 28px; left: 28px; right: calc((100% - 48px) / 3 - 28px); border-top: 2px dashed #d8d3cb; }
.zdh .zdh-stappen--s1 .zdh-stap { padding: 0; border: 0; border-radius: 0; background: none; }
.zdh .zdh-stappen--s1 .zdh-stap__num { position: relative; z-index: 1; width: 56px; height: 56px; background: #e77935; font-size: 20px; box-shadow: 0 0 0 8px #fff, 0 12px 24px -12px rgba(231, 121, 53, .7); margin-bottom: 22px; }
.zdh .zdh-stappen--s1 .zdh-stap__title { font-size: 19px; font-weight: 600; color: #10293d; }
.zdh .zdh-stappen--s1 .zdh-stap__body { font-size: 15.5px; line-height: 1.6; color: #46535c; }
.zdh .zdh-stap__tag { display: inline-block; margin-top: 14px; font-size: 13px; font-weight: 600; color: #d2641f; background: #fdf1e8; padding: 5px 11px; border-radius: 999px; }
.zdh .zdh-stappen__cta { margin-top: 40px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.zdh .zdh-stappen__btn { display: inline-flex; align-items: center; gap: 10px; background: linear-gradient(90deg, #f0974a, #e87f1e); color: #fff; font-weight: 600; font-size: 16px; padding: 16px 28px; border-radius: 999px; text-decoration: none; transition: filter .15s; }
.zdh .zdh-stappen__btn:hover { filter: brightness(1.06); color: #fff; }
.zdh .zdh-stappen__cta span { font-size: 14.5px; color: #6f7a83; }
.zdh .zdh-stappen__cta span a { color: #10293d; font-weight: 600; text-decoration: none; }
@media (max-width: 980px) { .zdh .zdh-stappen--s1 .zdh-stappen__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; } .zdh .zdh-stappen--s1 .zdh-stappen__grid::before { display: none; } }
@media (max-width: 680px) { .zdh .zdh-stappen--s1 { padding-top: 48px; } .zdh .zdh-stappen--s1 .zdh-stappen__h2 { font-size: 30px; } }

/* uniek mobiel 16-10: eigen blok, tabel als kaartje per rij op smalle schermen (geen veegtabel). */
@media (max-width: 700px) {
	.zdh .zdh-uniek .zdh-table { border: 0; border-radius: 0; overflow: visible; background: transparent; }
	.zdh .zdh-uniek .zdh-table thead { display: none; }
	.zdh .zdh-uniek .zdh-table table, .zdh .zdh-uniek .zdh-table tbody, .zdh .zdh-uniek .zdh-table tr, .zdh .zdh-uniek .zdh-table td { display: block; width: 100%; }
	.zdh .zdh-uniek .zdh-table tr { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 12px 16px; margin-bottom: 10px; }
	.zdh .zdh-uniek .zdh-table tbody tr td, .zdh .zdh-uniek .zdh-table tbody tr:nth-child(even) td { background: transparent; border: 0; padding: 3px 0; }
	.zdh .zdh-uniek .zdh-table td:first-child { font-weight: 600; color: var(--navy); padding-bottom: 6px; }
	.zdh .zdh-uniek .zdh-table td:not(:first-child)[data-label]::before { content: attr(data-label) ": "; font-weight: 600; color: var(--navy); }
}

/* kruimelpad boven de hero, zoals op de merkpagina's (Jay 17-10): 24 px onder de navbar, 22 px boven de kaart */
.zdh .cat-crumb { padding-top: 24px; margin-bottom: 22px; }
.zdh .cat-crumb + .zd-top { margin-top: 0; }