/* DirectClinics – Paginablokken (page-blokken.php).
   Bewust MINIMAAL: alle blokken hergebruiken bestaande sitewide-componenten
   (.dc-split, .dc-bigquote, .dc-quotes-swiper, .dc-usps, .dc-werkwijze, .dc-faq,
   .dc-popsearch, .dc-btn-*, .dc-sec--*, .dc-help/.dc-card (specialismen-carrousel),
   .dc-blog/.dc-blog-card (blog-slider), .dc-grev, containers). Deze twee laatste
   ("Waar kunnen we je mee helpen?" en "Blog of kennisbank") staan ALLEEN nog als
   losse markup in front-page.php — dit blok is er een 1:1 kopie van, geen aparte
   stijl. Hieronder alleen: de blokken-hero, quote-split-typografie, de kaart-hoogte
   voor de locatiekaart, en wysiwyg/kop-marges. Tokens uit dc-base; geen nieuwe hexa's. */

/* ============ Hero ============ */
.dc-pbhero { position: relative; background: #21383f center/cover no-repeat; display: flex; align-items: stretch; min-height: 70vh; }
.dc-pbhero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,20,25,.35), rgba(10,20,25,.7)); }
.dc-pbhero__inner { position: relative; z-index: 1; width: 100%; padding-top: 60px; padding-bottom: 80px; color: #fff; text-align: center; display: flex; flex-direction: column; justify-content: center; }
.dc-pbhero__title { font-family: 'Lora', Georgia, serif; font-weight: 400; font-size: 48px; line-height: 1.1; margin: auto auto 14px; color: #fff; }
.dc-pbhero__text { max-width: 640px; margin: 0 auto; line-height: 1.65; opacity: .95; }
.dc-pbhero__text p:last-child { margin-bottom: 0; }
.dc-pbhero .dc-hero__badges { display: flex; flex-wrap: wrap; gap: 16px 44px; justify-content: center; position: static; margin-top: auto; padding-top: 40px; z-index: 2; }

/* ============ Hero — split (kleurvlak + foto, 50/50) ============
   Full-bleed. Linkervlak (--pb-panel) 50%, foto rechts 50%. De tekst lijnt
   links uit met de gekozen containerbreedte via --pb-padl en blijft rechts
   binnen het vlak (padding-right), zodat hij nooit over de foto valt.
   Tekstkleur staat als basis op __inner; USP's en losse term erven die mee. */
.dc-pbhero-split { position: relative; }
.dc-pbhero-split__grid { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; min-height: 70vh; }
.dc-pbhero-split__panel { display: flex; align-items: center; background: var(--pb-panel, var(--beige)); }
.dc-pbhero-split__inner { width: 100%; color: var(--graphite); padding: 76px 48px 104px var(--pb-padl, 35px); }
.dc-pbhero-split__title { font-family: 'Lora', Georgia, serif; font-weight: 400; font-size: 52px; line-height: 1.1; margin: 0 0 22px; color: inherit; }
.dc-pbhero-split__text { line-height: 1.65; margin: 0 0 28px; }
.dc-pbhero-split__text p:last-child { margin-bottom: 0; }
.dc-pbhero-split__badges { margin: 0 0 30px; }
.dc-pbhero-split__badges .dc-hero__badge { color: var(--usp-tx, inherit); }
.dc-pbhero-split__badges .dc-hero__badge i { color: var(--usp-ic, inherit); }
.dc-pbhero-split__btns { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.dc-pbhero-split__btns .dc-btn-primary, .dc-pbhero-split__btns .dc-btn-sand, .dc-pbhero-split__btns .dc-dh-cta, .dc-pbhero-split__btns .dc-btn { margin: 0; }
.dc-pbhero-split__term { font-weight: 700; color: inherit; text-decoration: none; }
a.dc-pbhero-split__term:hover { text-decoration: underline; color: inherit; }
.page-template-page-blokken .dc-hero__badges.dc-pbhero-split__badges { display: flex; flex-direction: column; gap: 10px; }
span.dc-pbhero-split__term { margin-top: 20px; }
.dc-pbhero-split__media { position: relative; min-height: 100%; }
.dc-pbhero-split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ============ Hero-zoekbalk (overlapt onderrand) ============
   Deze pill-styling staat normaal in dc-home.css (alleen homepage). Op
   paginablokken-pagina's wordt die niet geladen, dus staat het hier zelf-
   voorzienend zodat de zoek-optie (overlay- én split-hero) klopt. De negatieve
   marge trekt de balk ~half over de onderrand van de hero ("50% verticaal"). */
.dc-pb .dc-home-search {
    margin: -42px auto 0; max-width: var(--dc-w-normal);
    background: linear-gradient(180deg, #cbcbcb, #f7f8f8);
    border-radius: 46px; box-shadow: none;
    padding: 25px 32px; position: relative; z-index: 5;
}
.dc-pb .dc-popsearch { display: flex; align-items: center; justify-content: flex-start; gap: 28px; }
.dc-pb .dc-popsearch__label { font-weight: 700; color: var(--dc-navy); white-space: nowrap; font-size: 17px; }
/* mobiele correctie: zie onderaan dit bestand */
.dc-pb .dc-popsearch__links { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 4px 2px; flex: 1; }
.dc-pb .dc-popsearch__links a { color: #44565b; text-decoration: none; font-size: 15px; padding: 4px 6px; white-space: nowrap; transition: color .2s ease; }
.dc-pb .dc-popsearch__links a:hover { color: var(--dc-teal); }
.dc-pb .dc-popsearch__links a::after { content: "\203A"; margin-left: 8px; color: #6ba8ae; }
.dc-pb .dc-popsearch__form { flex: none; }
.dc-pb .dc-popsearch__form .dc-specialisme-search { margin: 0; }
.dc-pb .dc-popsearch__form .dc-search-wrap { position: relative; display: flex; align-items: center; justify-content: flex-end; }
.dc-pb .dc-popsearch__form .dc-search-input { width: 250px; border: 1.5px solid var(--dc-teal); border-radius: 999px; padding: 10px 46px 10px 22px; background: transparent; color: var(--dc-navy); font-size: 15px; outline: none; }
.dc-pb .dc-popsearch__form .dc-search-input::placeholder { color: var(--dc-teal); opacity: .9; }
.dc-pb .dc-popsearch__form .dc-search-btn { position: absolute; right: 16px; background: none; border: 0; cursor: pointer; color: var(--dc-teal); display: inline-flex; align-items: center; }

/* ============ Werkwijze (blok-override) ============
   Titel/beschrijving/labels/icoontjes krijgen hun kleur inline mee vanuit de
   render. De stappenlijn is een pseudo-element, dus die stuur ik via --wz-lijn
   (fallback = de sitewide standaard). Gescoped op .dc-pb zodat de homepage-
   werkwijze onaangeroerd blijft. */
.dc-pb .dc-werkwijze__step::before { background: var(--wz-lijn, rgba(42,42,42,.12)); }

/* ============ FAQ (blok-override) ============
   Achtergronden en titelkleur worden inline gezet; vraag/antwoord/scheidings-
   lijn en het +/- icoon (pseudo-element) via variabelen op de kaart. Gescoped
   op .dc-pb zodat de homepage-/dienst-FAQ onaangeroerd blijft. */
.dc-pb .dc-faq__q { color: var(--faq-tx, var(--dc-navy)); }
.dc-pb .dc-faq__q::after { color: var(--faq-tx, var(--dc-teal)); }
.dc-pb .dc-faq__a-inner { color: var(--faq-tx, #2a2a2a); }
.dc-pb .dc-faq__item { border-bottom-color: var(--faq-lijn, rgba(0,0,0,.08)); }

/* ============ Locatiekaart (tekst + kaart) ============ */
.dc-split.dc-pb-kaart--top { align-items: flex-start; }
.dc-pb-kaart__btns { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 26px; }
.dc-pb-kaart__link { font-family: 'Lora', Georgia, serif; color: var(--bs-primary); text-decoration: none; }
.dc-pb-kaart__link:hover { text-decoration: underline; }
.dc-pb-kaart__maptitle { margin: 0 0 16px; }

/* ============ Inhoudsblok (kop + tekst + knop) ============ */
.dc-pb-content--links { text-align: left; }
.dc-pb-content--midden { text-align: center; }
.dc-pb-content--rechts { text-align: right; }
.dc-pb-content__tekst { margin-top: 18px; }
.dc-pb-content__tekst > *:first-child { margin-top: 0; }
.dc-pb-content__btns { margin-top: 30px; }

/* ============ Koptekst + accordeon ============ */
.dc-pb-acc--midden .dc-pb-acc__kop { text-align: center; }
.dc-pb-acc__list { margin-top: 24px; }
.dc-pb-acc__btns { margin-top: 28px; }
.dc-pb .dc-pb-acc .dc-faq__q { color: var(--acc-tx, var(--dc-navy)); }
.dc-pb .dc-pb-acc .dc-faq__a-inner { color: var(--acc-tx, #4a5d62); }

/* ============ Specialisme-slider knoppen ============ */
.dc-help__btns { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 40px; }

/* ============ Tabs (verloop / detail) ============
   .dc-dtabs staat normaal in dc-dienst.css (alleen dienst-pagina's). Hier
   zelfvoorzienend voor paginablokken, var-gestuurd zodat kleuren instelbaar
   zijn. Gescoped op .dc-pb; de tab-toggle-JS zit in de blokken-footer-script. */
.dc-pb .dc-dtabs { background: var(--dt-card-bg, var(--graphite)); border-radius: 20px; overflow: hidden; color: #eae7e3; }
.dc-pb .dc-dtabs__head { padding: 40px 48px 0; }
.dc-pb .dc-dtabs__title { font-family: 'Lora', Georgia, serif; font-weight: 400; font-size: 30px; color: var(--dt-titel, #fff); margin: 0 0 18px; }
.dc-pb .dc-dtabs__intro { color: var(--dt-intro, #d3cec8); line-height: 1.7; margin: 0 0 24px;}
.dc-pb .dc-dtabs__nav { display: flex; flex-wrap: wrap; gap: 12px; }
.dc-pb .dc-dtabs__tab { background: transparent; border: 2px solid rgba(255,255,255,.28); color: #d8d3cd; border-radius: 999px; padding: 9px 22px; font: inherit; font-size: 14px; cursor: pointer; transition: background .15s, color .15s; }
.dc-pb .dc-dtabs__tab.is-active { background: var(--dt-tab-bg, #7c7c7c); color: #fff; border-color: var(--dt-tab-bg, #7c7c7c); }
.dc-pb .dc-dtabs__body { background: var(--dt-body-bg, #fff); color: var(--dt-body-tx, var(--graphite)); margin: 22px 0 0; border-radius: 0 0 20px 20px; padding: 34px 40px; }
.dc-pb .dc-dtabs__content { display: none; line-height: 1.75; color: var(--dt-body-tx, #3f3f3f); max-height: 320px; overflow-y: auto; padding-right: 12px; }
.dc-pb .dc-dtabs__content.is-active { display: block; }
.dc-pb .dc-dtabs__content > *:first-child { margin-top: 0; }
.dc-pb .dc-dtabs__btns { display: flex; align-items: center; gap: 24px; margin-top: 26px; flex-wrap: wrap; }
.dc-pb a.dc-dtabs__link { font-family: 'Lora', Georgia, serif; color: var(--bs-primary); text-decoration: none; }
.dc-pb a.dc-dtabs__link:hover { text-decoration: underline; }
@media (max-width: 575px) {
    .dc-pb .dc-dtabs__head { padding: 28px 24px 0; }
    .dc-pb .dc-dtabs__body { margin: 18px; padding: 24px; }
}

/* ============ Blogs (blok-override) ============
   Sectie-achtergrond, lint, nav-knoppen en kop-kleuren gaan inline vanuit de
   render. De kaart-kleuren (titel/tekst/link) via variabelen — alleen op
   desktop, want op mobiel verdwijnt het lint en staan de kaarten op wit (die
   donkere defaults laten we dan staan voor leesbaarheid). Gescoped op .dc-pb. */
@media (min-width: 576px) {
    .dc-pb .dc-blog-card__body h3 { color: var(--blog-ct, #fff); }
    .dc-pb .dc-blog-card__body p { color: var(--blog-cx, #fff); }
    .dc-pb .dc-blog-card__body a { color: var(--blog-cb, var(--dc-cta-solid)); }
}

/* ============ Quote (los / met afbeelding) ============ */
.dc-quoteblok__q { font-family: 'Lora', Georgia, serif; font-weight: 400; margin: 0 0 18px; color: var(--graphite); font-size: 35px; line-height: 45px; }
.dc-quoteblok__text .dc-quote-author { margin: 0; }
.dc-quoteblok--links { text-align: left; }
.dc-quoteblok--rechts { text-align: right; }
.dc-quoteblok--midden { text-align: center; }
.dc-quoteblok__grid { display: grid; gap: 60px; align-items: center; }
.dc-quoteblok__media img { width: 100%; border-radius: 16px; display: block; object-fit: cover; }
@media (max-width: 991px) {
    .dc-quoteblok__q { font-size: 30px; line-height: 1.3; }
    .dc-quoteblok__grid { grid-template-columns: 1fr !important; gap: 32px; }
}

/* ============ Quote-slider met vectorvorm ============
   De vectorvorm loopt over de onderrand het volgende blok in — zonder dat dat
   blok negatieve padding nodig heeft. Truc: dit blok krijgt GEEN z-index (dus
   geen eigen stacking context), de vector staat op z-index 1 (tekent daardoor
   boven de achtergrond van het volgende blok) en de inhoud op z-index 2 (blijft
   overal bovenop). */
.dc-quoteflow { position: relative; overflow: visible; padding: 74px 0; color: #fff; }
.dc-quoteflow__inner { position: relative; z-index: 2; }
.dc-quoteflow__vec { position: absolute; z-index: 1; bottom: 0; width: 320px; aspect-ratio: 1 / 1; line-height: 0; pointer-events: none; transform: translateY(var(--qf-ty, 50%)); }
.dc-quoteflow__vec svg { display: block; width: 100%; height: 100%; }
.dc-quoteflow--links .dc-quoteflow__vec { left: 0; }
.dc-quoteflow--rechts .dc-quoteflow__vec { right: 0; transform: scaleX(-1) translateY(var(--qf-ty, 50%)); }
.dc-quoteflow--vast .dc-quoteflow__vec { top: 50%; bottom: auto; --qf-ty: -50%; }
.dc-quoteflow--vast .dc-quoteflow__vec--vorm3 { top: auto; bottom: 0; --qf-ty: 0%; aspect-ratio: 320 / 400; }
.dc-quoteflow__vec--vorm2 { --qf-ty: 40%; }
.dc-quoteflow__vec--vorm3 { aspect-ratio: 320 / 500; --qf-ty: 30%; }
.dc-quoteflow .dc-quotes-swiper { width: 100%; }
.dc-quoteflow .dc-quote-inner { max-width: 100%; margin: 0 auto; }
.dc-qflow__slide { text-align: center; padding: 6px 20px; }
.dc-qflow__nav { display: flex; gap: 12px; justify-content: center; margin-top: 32px; }
.dc-qflow__nav button {
    width: 44px; height: 44px; border-radius: 999px; border: 0; cursor: pointer;
    background: var(--beige); color: var(--petrol); font-size: 18px;
    display: inline-flex; align-items: center; justify-content: center; transition: opacity .2s ease;
}
.dc-qflow__nav button:hover { opacity: .85; }
@media (max-width: 767px) {
    .dc-quoteflow { padding: 54px 0; }
    .dc-quoteflow__vec { width: 220px; }
}

/* ============ Quote + afbeelding ============ */
.dc-pb-qsplit__q { font-family: 'Lora', Georgia, serif; font-weight: 400; font-size: 30px; line-height: 1.3; color: var(--graphite); margin: 0 0 16px; }

/* ============ Locatiekaart (tekst + maps) ============ */
.dc-pb-kaart__map { min-height: 420px; }
.dc-pb-kaart__map > * { height: 100%; }

/* ============ WYSIWYG / losse kop ============ */
.dc-pb-full { padding: 0 24px; }
.dc-pb-wysiwyg { line-height: 1.7; }
.dc-pb-kop :is(h1, h2, h3, h4) { margin: 0; }
.dc-pb-kop--center { text-align: center; }
.dc-pb-wysiwyg--center { text-align: center; }
.dc-pb-wysiwyg--center ul, .dc-pb-wysiwyg--center ol { display: inline-block; text-align: left; }
.dc-pb-wysiwyg--right { text-align: right; }
.dc-pb-wysiwyg--right ul, .dc-pb-wysiwyg--right ol { display: inline-block; text-align: left; }

/* ============ Responsive ============ */
@media (max-width: 991px) {
    /* Overlay-hero USP's terug in de flow op mobiel (voorkomt overlap bij lange titels) */
    .dc-pbhero { align-items: center; min-height: 0; }
    .dc-pbhero__inner { justify-content: center; }
    .dc-pbhero .dc-hero__badges { position: static; margin-top: 20px; }

    .dc-pbhero__title { font-size: 34px; }
    .dc-pb-kaart__map { min-height: 320px; }

    /* Split-hero: foto boven, vlak eronder — geen tekst meer over de foto. */
    .dc-pbhero-split__grid { grid-template-columns: 1fr; min-height: 0; }
    .dc-pbhero-split__media { order: -1; min-height: 300px; }
    .dc-pbhero-split__inner { padding: 44px 24px 72px 24px; }
    .dc-pbhero-split__title { font-size: 36px; }

    .dc-pb .dc-popsearch { flex-wrap: wrap; gap: 14px; justify-content: center; }
    .dc-pb .dc-popsearch__form, .dc-pb .dc-popsearch__form .dc-search-input { width: 100%; }
}
@media (max-width: 575px) {
    .dc-pbhero-split__title { font-size: 30px; }
    .dc-pbhero-split__btns { gap: 12px; }
    .dc-pbhero-split__btns > * { width: 100%; text-align: center; }
}
/* ============ Blok-achtergrondkleuren ============
   Per neutraal blok instelbaar. Kleur zit op de <section>, dus vult de
   volledige padding — geen witte randen tussen aangrenzende blokken.
   Standaard (geen class) = wit/transparant. */
.dc-pb-bg--beige { background: #d8cfc4; }
.dc-pb-bg--cream { background: #f7f5f2; }
/* Transparant: geen eigen achtergrond, pagina-achtergrond schijnt erdoorheen. */
.dc-pb-bg--transparent { background: transparent; }
/* Pagina-brede achtergrond voor blokken-template (per pagina instelbaar via
   inline custom property op .dc-pb). Blok-kleuren vallen hier bovenop. */
.dc-pb { background: var(--dc-pb-page-bg, transparent); }

/* ============ Knopstijl-varianten ============
   De knopkleur-keuze mapt op een VOLLEDIGE bestaande knop-class
   (dc-btn-primary / dc-btn-sand / dc-dh-cta), zodat niet alleen de
   achtergrond maar de hele stijl (tekstkleur, hover, radius, font)
   wordt overgenomen. Alleen 'grafiet' bestaat niet als losse class:
   dat is dc-btn-primary met een grafiet-achtergrond. */
.dc-btn-primary.dc-btn--graphite { background: #2a2a2a; }
/* dc-dh-cta buiten de header opnieuw als knop laten renderen: het is daar
   normaal een header-element, hier gebruiken we het puur voor de teal kleur. */
main#primary .dc-dh-cta { font-family: "Lora", Georgia, serif; }

/* Regelafbreking in koptekst die alleen op desktop breekt.
   Op mobiel valt de <br class="dc-br-desktop"> weg, zodat korte schermen
   niet met een ongelukkige afbreking blijven zitten. */
@media (max-width: 767px) {
    .dc-pb-kop .dc-br-desktop { display: none; }
}
/* Margin-collapse: kind-margins (bijv. laatste <p> in wysiwyg) mogen niet buiten de section vallen.
   flow-root geeft de container een eigen block formatting context; de last-child-regel haalt
   de restmarge weg zodat er ook geen extra ruimte binnen de section overblijft. */
.dc-pb .dc-sec > :is(.container, .dc-container, .dc-small-container, .dc-pb-full) { display: flow-root; }
.dc-pb :is(.dc-pb-wysiwyg, .dc-pb-kop) > :is(.container, .dc-container, .dc-small-container, .dc-pb-full) > :last-child { margin-bottom: 0; }

/* Sectie-wrapper (dienst/specialisme): container-breedte op de BINNENSTE container, zodat full-bleed achtergronden heel blijven. */
.dc-secwrap[data-cw="smal"] :is(.container, .dc-container, .dc-small-container) { max-width: var(--dc-w-small) !important; }
.dc-secwrap[data-cw="medium"] :is(.container, .dc-container, .dc-small-container) { max-width: var(--dc-w-normal) !important; }
.dc-secwrap[data-cw="breed"] :is(.container, .dc-container, .dc-small-container) { max-width: var(--dc-w-wide) !important; }
/* element-/knopkleuren: gelden alleen als het data-attribuut gezet is → anders basis */
.dc-secwrap[data-titel] :is(h1, h2, h3, h4) { color: var(--sw-titel) !important; }
.dc-secwrap[data-btn] :is(.dc-btn-primary, .dc-btn-sand, .dc-btn-primary-dark, .dc-btn-primary-light, .btn) { background: var(--sw-btn) !important; border-color: var(--sw-btn) !important; }

/* ============ Responsive: werkwijze-sliert + usps 2-per-view (<=991px) · knoppen centreren (<=768px) ============ */
/* Werkwijze/USP: JS-sliders (Swiper) op mobiel, grid op desktop */
.dc-werkwijze-sliderwrap, .dc-usps-sliderwrap { position: relative; }
/* Deze swipers zijn op desktop een grid (niet geinitialiseerd); de .dc-home :not(.swiper-initialized) opacity:0-regel mag ze niet verbergen */
.dc-usps-swiper:not(.swiper-initialized), .dc-werkwijze-swiper:not(.swiper-initialized) { opacity: 1 !important; }
@media (min-width: 992px) {
    .dc-werkwijze-swiper .swiper-wrapper { display: grid !important; transform: none !important; height: auto !important; }
    .dc-usps-swiper .swiper-wrapper.dc-usps { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; transform: none !important; height: auto !important; }
    .dc-werkwijze-swiper .swiper-slide, .dc-usps-swiper .swiper-slide { width: auto !important; height: auto !important; }
    .dc-werkwijze-sliderwrap .swiper-button-prev, .dc-werkwijze-sliderwrap .swiper-button-next,
    .dc-usps-sliderwrap .swiper-button-prev, .dc-usps-sliderwrap .swiper-button-next { display: none !important; }
}
@media (max-width: 991px) {
    .dc-werkwijze-swiper, .dc-usps-swiper { overflow: hidden; }
    .dc-werkwijze-swiper .swiper-wrapper, .dc-usps-swiper .swiper-wrapper { display: flex !important; grid-template-columns: none !important; gap: 0 !important; align-items: stretch; }
    .dc-werkwijze-swiper .swiper-slide, .dc-usps-swiper .swiper-slide { height: auto; box-sizing: border-box; }
    .dc-werkwijze-swiper .dc-werkwijze__step::before { display: none !important; }
    .dc-werkwijze-swiper .dc-werkwijze__step { flex-direction: column !important; text-align: center !important; padding: 0 !important; height: auto; }
    .dc-werkwijze-swiper .dc-werkwijze__num { margin-bottom: 14px !important; flex: none; }
    .dc-werkwijze-swiper .dc-werkwijze__label { max-width: 60vw !important; margin-left: auto; margin-right: auto; }
}
/* Nav-pijlen (met offset naar buiten, geen slider-padding) */
.dc-werkwijze-sliderwrap .swiper-button-prev, .dc-werkwijze-sliderwrap .swiper-button-next,
.dc-usps-sliderwrap .swiper-button-prev, .dc-usps-sliderwrap .swiper-button-next {
    --swiper-navigation-size: 18px;
    color: #fff; background: var(--bs-primary, #32666b);
    width: 38px; height: 38px; border-radius: 50%;
    top: 50%; margin-top: 0; transform: translateY(-50%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}
.dc-werkwijze-sliderwrap .swiper-button-prev, .dc-usps-sliderwrap .swiper-button-prev { left: -20px; }
.dc-werkwijze-sliderwrap .swiper-button-next, .dc-usps-sliderwrap .swiper-button-next { right: -20px; }
@media (max-width: 768px) {
    /* Knoppen in inhoudsblok e.d. centreren */
    .dc-dinhoud__main > .dc-btn-primary,
    .dc-dinhoud__main > .dc-btn-sand,
    .dc-split__text > .dc-btn-primary,
    .dc-split__text > .dc-btn-sand {
        display: block;
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
    }
	.dc-pbhero-split__inner {
    text-align: center;
}
	aside.dc-dinhoud__card .container {
    padding: 0;
}
	.dc-faq h2 {
    text-align: center;
}
.dc-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    justify-content: center;
}
    .dc-dtabs__btns,
    .dc-faq__actions,
    .dc-pb-content__btns,
    .dc-help__btns,
    .dc-pb-kaart__btns {
        justify-content: center;
        text-align: center;
    }
    .dc-pbhero-split__inner {
        text-align: center;
    }
    .dc-hero__badge {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-weight: 600;
        justify-content: center;
    }
    .dc-small-container.dc-vk-foot {
        display: flex;
        justify-content: center;
        gap: 0;
        flex-direction: column;
    }
}
/* Split (afbeelding + tekst): instelbare verhouding tekst/foto via --dc-split-cols; op mobiel altijd gestapeld */
.dc-pb .dc-split { grid-template-columns: var(--dc-split-cols, 1fr 1fr); }
@media (max-width: 991px) { .dc-pb .dc-split { grid-template-columns: 1fr !important; } }

/* =========================================================
   Mobiele correcties 21-09-2026
   Origineel: archive/mobiel-20260921/assets/css/dc-blokken.css
========================================================= */
@media (max-width: 991px) {
  /* Dit blok staat ook op de specialisme-pagina's. nowrap liet de kop niet
     afbreken, waardoor het witte blok buiten het scherm liep. */
  .dc-pb .dc-popsearch__label { white-space: normal; text-wrap: balance; text-align: center; width: 100%; }
  .dc-pb .dc-popsearch__links { width: 100%; }
  .dc-pb .dc-popsearch__links a { white-space: normal; }
  .dc-pb .dc-home-search { padding: 20px 18px; border-radius: 28px; }
}
@media (max-width: 767px) {
  .dc-quoteblok__q { font-size: 24px; line-height: 1.3; }
  .dc-pb-qsplit__q { font-size: 22px; line-height: 1.35; }
  .dc-qflow__slide { padding: 6px 4px; }
}
@media (max-width: 575px) {
  .dc-quoteblok__q { font-size: 22px; line-height: 1.3; }
}