/* ==========================================================================
   Van Oostrom accountancy en belastingadvies — theme + dynamic block styling
   Bron: 7-pagina static HTML-export (Bootstrap 5, inline vo-* classes).
   Blauw-geleid (geen tweede accentkleur), Barlow Condensed + Source Sans 3.

   .db-vo-content = gedeelde rich-text scope rond ELK editorveld. De WYSIWYG
   levert h1-h6 / p / strong / em / u / s / ul / ol / pre / code / blockquote /
   a — gestyled via parent-classes (nooit classes op de WYSIWYG-tags zelf,
   behalve a.btn.btn-<variant>). Structuur komt uit de tags (kicker = h6,
   titel = h1/h2/h3), niet uit misbruikte nadruk-tags.
   ========================================================================== */

:root {
    --vo-blauw: #005EB8;
    --vo-donker: #00437F;
    --vo-licht: #EEF4F9;
    --vo-grijs: #6B6B6B;
    --vo-ink: #58585a;
    --vo-line: #E3E8EE;
    --vo-muted: #A8A8A8;
    /*--vo-radius: 6px;*/
    --vo-radius: 0;
}

/* Metric-matched fallbacks (tegen Arial berekend via de echte woff2-metrics)
   zodat de layout niet "springt" zodra het echte webfont geladen is: de
   fallback krijgt dezelfde ascent/descent/breedte-box als het webfont, dus de
   swap verandert alleen het lettertype, niet de regelafmetingen. */
@font-face {
    font-family: "Barlow Condensed Fallback";
    src: local("Arial");
    ascent-override: 111.2%;
    descent-override: 22.2%;
    line-gap-override: 0%;
    size-adjust: 89.9%;
}
@font-face {
    font-family: "Source Sans 3 Fallback";
    src: local("Arial");
    ascent-override: 91.7%;
    descent-override: 35.8%;
    line-gap-override: 0%;
    size-adjust: 111.7%;
}

body {
    font-family: "Source Sans 3", "Source Sans 3 Fallback", system-ui, -apple-system, sans-serif;
    color: var(--vo-ink);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--vo-blauw); text-decoration: none; }
a:hover { color: var(--vo-donker); }

/* ==========================================================================
   Rich-text scope — geldt voor de output van elk editorveld
   ========================================================================== */

.db-vo-content > *:first-child { margin-top: 0; }
.db-vo-content > *:last-child  { margin-bottom: 0; }

.db-vo-content h1,
.db-vo-content h2,
.db-vo-content h3,
.db-vo-content h4,
.db-vo-content h5 {
    font-family: "Barlow Condensed", "Barlow Condensed Fallback", sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.05;
    color: var(--vo-blauw);
    margin: 0 0 .45em 0;
}
.db-vo-content h1 { font-size: clamp(2.375rem, 1.7rem + 3.2vw, 4.75rem); }
.db-vo-content h2 { font-size: clamp(1.625rem, 1.3rem + 1.5vw, 2.875rem); }
.db-vo-content h3 { font-size: clamp(1.35rem, 1.2rem + .6vw, 1.5625rem); }
.db-vo-content h4 { font-size: 1.05rem; }
.db-vo-content h5 { font-size: .95rem; }
.db-vo-content h6 {
    margin: 0 0 .8em 0;
    font-family: "Barlow Condensed", "Barlow Condensed Fallback", sans-serif;
    font-weight: 500;
    font-size: .8125rem;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--vo-blauw);
}

.db-vo-content p {
    margin: 0 0 1em 0;
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--vo-ink);
}
.db-vo-content a            { color: var(--vo-blauw); text-decoration: none; font-weight: 600; }
.db-vo-content a:hover      { color: var(--vo-donker); }
.db-vo-content strong, .db-vo-content b { font-weight: 600; color: inherit; }
.db-vo-content em, .db-vo-content i     { font-style: italic; }
.db-vo-content i[class*="fa-"]          { font-style: normal; }
.db-vo-content u            { text-decoration: underline; }
.db-vo-content s            { text-decoration: line-through; }

.db-vo-content ul,
.db-vo-content ol { margin: 0 0 1em 0; padding-left: 0; list-style: none; }
.db-vo-content ol { padding-left: 1.3em; list-style: decimal; }
.db-vo-content li { position: relative; margin: 0 0 .55em 0; line-height: 1.6; color: var(--vo-ink); }
.db-vo-content ul > li { padding-left: 1.7em; }
.db-vo-content ul > li::before {
    content: "\f00c";
    font-family: "Font Awesome 7 Pro", "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome;
    font-weight: 900;
    position: absolute;
    left: 0;
    top: .1em;
    font-size: .82em;
    color: var(--vo-blauw);
}
.db-vo-content ol > li { padding-left: .3em; }

.db-vo-content blockquote {
    margin: 0 0 1em 0;
    font-family: "Source Sans 3", "Source Sans 3 Fallback", sans-serif;
    font-weight: 300;
    font-size: clamp(1.375rem, 1.2rem + .9vw, 1.875rem);
    line-height: 1.45;
    color: var(--vo-blauw);
}
.db-vo-content pre {
    margin: 0 0 1em 0; padding: 16px 18px;
    background: var(--vo-licht); overflow: auto;
    font-size: 14px; line-height: 1.5;
}
.db-vo-content code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .92em;
}

/* Rich-text op DONKERE secties (hero, pagina-header, cta-strip, cta-formulier):
   licht/wit i.p.v. donker. */
/* .db-vo-on-dark en .db-vo-content staan soms op HETZELFDE element (01-hero,
   02-pagina-header) en soms op voorouder+nakomeling (07-cta-strip, 08-cta-
   formulier hebben .db-vo-on-dark op de <section>) — beide gevallen matchen. */
.db-vo-on-dark.db-vo-content h1, .db-vo-on-dark .db-vo-content h1,
.db-vo-on-dark.db-vo-content h2, .db-vo-on-dark .db-vo-content h2,
.db-vo-on-dark.db-vo-content h3, .db-vo-on-dark .db-vo-content h3,
.db-vo-on-dark.db-vo-content h6, .db-vo-on-dark .db-vo-content h6 { color: #fff; }
.db-vo-on-dark.db-vo-content p,  .db-vo-on-dark .db-vo-content p  { color: rgba(255, 255, 255, .92); }
.db-vo-on-dark.db-vo-content h6, .db-vo-on-dark .db-vo-content h6 { color: rgba(255, 255, 255, .78); }
.db-vo-on-dark.db-vo-content a:not(.btn), .db-vo-on-dark .db-vo-content a:not(.btn) { color: #fff; text-decoration: underline; }

/* ==========================================================================
   Knoppen — WYSIWYG .btn link-stijlen (Site_Editor_Linkstyles).
   In dit ontwerp komen twee varianten letterlijk voor: wit-gevuld-blauwe-tekst
   (primaire CTA op donkere/foto-secties) en witte lijn (secundair op donkere
   secties). De overige twee CMS-stijlen krijgen een consistente, bruikbare
   invulling voor toekomstig gebruik op witte/paneel-secties.
   ========================================================================== */

.btn,
.db-vo-content a.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 18px 32px;
    font-family: "Source Sans 3", "Source Sans 3 Fallback", sans-serif;
    font-weight: 600;
    font-size: .9375rem;
    line-height: 1;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--vo-radius); /* elke .btn-variant deelt deze ene waarde */
    transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn.btn-calltoaction,         .db-vo-content a.btn.btn-calltoaction         { background: #fff; border-color: #fff; color: var(--vo-blauw); }
.btn.btn-calltoaction:hover,   .db-vo-content a.btn.btn-calltoaction:hover   { background: transparent; border-color: #fff; color: #fff; }
.btn.btn-highlight,            .db-vo-content a.btn.btn-highlight            { background: var(--vo-blauw); border-color: var(--vo-blauw); color: #fff; }
.btn.btn-highlight:hover,      .db-vo-content a.btn.btn-highlight:hover      { background: var(--vo-donker); border-color: var(--vo-donker); color: #fff; }
.btn.btn-highlight-line,       .db-vo-content a.btn.btn-highlight-line       { background: transparent; border-color: var(--vo-blauw); color: var(--vo-blauw); }
.btn.btn-highlight-line:hover, .db-vo-content a.btn.btn-highlight-line:hover { background: var(--vo-blauw); color: #fff; }
.btn.btn-white-line,           .db-vo-content a.btn.btn-white-line           { background: transparent; border-color: rgba(255, 255, 255, .6); color: #fff; }
.btn.btn-white-line:hover,     .db-vo-content a.btn.btn-white-line:hover     { background: #fff; border-color: #fff; color: var(--vo-blauw); }

/* "Lees meer" tekstlinks (geen .btn) in kaarten/citaten */
.db-vo-diensten-card a:not(.btn),
.db-vo-citaat-link:not(.btn) {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    font-weight: 600;
    font-size: .9rem;
}

/* ==========================================================================
   Sectie-basis: witte secties dragen geen eigen padding (de divider is de
   ruimte), paneel-secties dragen hun padding intern en schalen op mobiel
   net als de dividers (~48px onder 768px).
   ========================================================================== */

.db-vo-section        { padding: 0; }
.db-vo-section-panel  { background: var(--vo-licht); padding: 5rem 0; } /* = .divider-lrg (basis.css) */

/* Mobiele zijruimte op de container (niet op de binnenkant van kaarten/panelen) */
@media (max-width: 768px) {
    body { overflow-x: hidden; hyphens: auto; -webkit-hyphens: auto; }
    .container { padding-left: calc(var(--bs-gutter-x) * 1); padding-right: calc(var(--bs-gutter-x) * 1); }
    .db-vo-section-panel { padding: 3.25rem 0; } /* = .divider-lrg mobiel (basis.css, max-width:767px) */
    .db-vo-content h1 { max-width: 100%; }
}

/* Interne top/bottom-ruimte van een gekleurd/paneel-blok optioneel uitzetten
   (checkbox "Interne ruimte boven/onder weglaten?") — los van de
   trailing-divider tussen blokken (die regelt sitetext-onepage.html via
   unsetDivider/extraOnder). Voor twee gestapelde gekleurde blokken die anders
   dubbele padding zouden krijgen, of content die zelf al full-bleed is.
   Twee klassen op één element geeft hogere specificiteit dan de losse
   basis-/mobiel-regels hierboven en bij db-vo-cta-strip/-cta-formulier
   verderop, dus deze ene regel wint op elke breedte. */
.db-vo-section-panel.db-vo-flush,
.db-vo-cta-strip.db-vo-flush,
.db-vo-cta-formulier.db-vo-flush { padding: 0; }

/* ==========================================================================
   Site-header — fixed, transparant boven de full-bleed hero/pagina-header,
   solide zodra gescrold (zie vo-header.js). GEEN eigen flow-ruimte, dus geen
   pagina heeft top-padding nodig.
   ========================================================================== */
.db-vo-site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1030;
    background: transparent;
    transition: transform .38s cubic-bezier(.16, 1, .3, 1), background-color .3s ease, box-shadow .3s ease;
    will-change: transform;
}
.db-vo-site-header.vo-header-hidden   { transform: translateY(-100%); }
.db-vo-site-header.vo-header-scrolled { background: #fff; box-shadow: 0 10px 30px rgba(0, 30, 60, .12); }

/* zl_menu.css's mobiele drawer (#zl_mz_menu_nav) opent met een zeer hoge
   z-index uit het framework zelf. De losse "scroll naar boven"-knop
   (.zl_top_button, buiten de header in index.html) heeft anders geen eigen
   z-index en kan daardoor OVER het geopende menu heen vallen — z-index hier
   expliciet lager dan de header zetten, zodat de knop achter het menu blijft. */
/* basis.css levert alleen positionering/opacity-toggle (rgba(0,0,0,.2), geen
   hover/active) — hier de merkkleur + hover/active bovenop, transition erbij
   zodat de opacity-toggle en de kleurwissel niet abrupt aanvoelen. */
.zl_top_button {
    z-index: 1000;
    background-color: var(--vo-blauw);
    transition: opacity .25s ease, background-color .18s ease, transform .18s ease;
}
.zl_top_button:hover  { background-color: var(--vo-donker); }
.zl_top_button:active { background-color: var(--vo-donker); transform: scale(.94); }

/* Solide (witte) staat: logo/nav/CTA kantelen van wit-op-donker naar donker-op-wit. */
.db-vo-site-header.vo-header-scrolled .db-vo-logo-mark { filter: none; }
.db-vo-site-header.vo-header-scrolled .db-vo-nav-cta { background: var(--vo-blauw); border-color: var(--vo-blauw); color: #fff; }
.db-vo-site-header.vo-header-scrolled .db-vo-nav-cta:hover { background: var(--vo-donker); border-color: var(--vo-donker); color: #fff; }

.db-vo-site-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 22px 72px;
}

.db-vo-logo { display: flex; align-items: center; }
/* Het volledige aangeleverde logo (beeldmerk + wordmark, ÉÉN beeld — nooit
   opsplitsen in icoon + los getypte tekst). Standaard (transparante header
   over de foto) wordt het via een CSS-filter naar wit omgezet — brightness(0)
   invert(1) maakt elke gevulde pixel wit terwijl de transparante contouren
   (het gietijzeren "negative space" van de adelaar) gewoon transparant
   blijven, dus er is geen apart wit logo-bestand nodig voor de header. Een
   zachte schaduw houdt het los van een wisselende foto erachter. In de
   solide (witte) scroll-state resetten we het filter → de echte merkkleuren
   (zie vo-header-scrolled hierboven). */
.db-vo-logo-mark {
    /* Horizontale lockup (schild links, "VAN OOSTROM" + onderschrift
       ernaast, in het beeld zelf zo samengesteld) — de tekst beslaat hier
       het grootste deel van de hoogte, dus dit past op een normale
       compacte header-hoogte (i.t.t. de eerdere verticale variant). */
    height: 44px; width: auto; display: block;
    filter: brightness(0) invert(1) drop-shadow(0 1px 3px rgba(0, 0, 0, .45));
    transition: filter .18s ease;
}

/* .db-vo-nav-cta krijgt in de HTML ook "btn btn-toevoeging" — .btn levert
   display/align/border/border-radius/transition, hier alleen de compactere
   maat voor in de headerbalk + de flex-layout ertussen. Kleuren staan bij
   .btn.btn-toevoeging hieronder (nooit los op .db-vo-nav-cta zelf, anders
   deelt de knop straks niet meer automatisch in --vo-radius). */
.db-vo-nav-cta {
    padding: 12px 20px;
    font-size: .84rem;
    flex: 0 0 auto;
}
.btn.btn-toevoeging { background: #fff; border-color: #fff; color: var(--vo-blauw); }
.btn.btn-toevoeging:hover { background: var(--vo-licht); border-color: var(--vo-licht); color: var(--vo-donker); }

/* ==========================================================================
   Menuzo nav-override — horizontaal menu IN de header vanaf 1200px.
   (zl_menu.css toont het horizontale menu pas vanaf 1400px; daaronder drawer.)
   ========================================================================== */
@media (min-width: 1200px) {
    .db-vo-nav .btn-menu,
    .db-vo-nav #zl_mz_menu_nav button,
    .db-vo-nav #zl_mz_menu_nav .icon-dropdown-mobile,
    .db-vo-nav #zl_mz_menu_nav .homeicon,
    .db-vo-nav #zl_mz_menu_nav .zl_mz_menu_nav_previtem,
    .db-vo-nav #zl_mz_menu_nav ul.navmain li ul.zl_mz_menu_nav_level > li:first-child { display: none; }

    .db-vo-nav .zl_mz_menu_nav_container { position: relative; margin: 0; z-index: 10; }
    .db-vo-nav #zl_mz_menu_nav {
        position: static; left: auto; top: auto; width: auto; height: auto;
        min-height: 0; background: none; padding: 0; overflow: visible; transition: none;
        -webkit-backdrop-filter: none; backdrop-filter: none;
    }
    .db-vo-nav #zl_mz_menu_nav > ul,
    .db-vo-nav #zl_mz_menu_nav ul.navmain {
        display: flex; align-items: center; gap: 26px;
        list-style: none; margin: 0; padding: 0; max-width: none; min-height: 0;
        overflow: visible; position: static;
    }
    .db-vo-nav #zl_mz_menu_nav ul.navmain > li { display: inline-block; position: relative; margin: 0; }
    .db-vo-nav #zl_mz_menu_nav ul.navmain > li > a {
        display: block; padding: 4px 0 6px;
        font-family: "Source Sans 3", "Source Sans 3 Fallback", sans-serif; font-size: .906rem; font-weight: 400;
        color: rgba(255, 255, 255, .9); text-decoration: none; white-space: nowrap;
        border-bottom: 2px solid transparent;
    }
    .db-vo-nav #zl_mz_menu_nav ul.navmain > li:hover > a { color: #fff; }
    .db-vo-nav #zl_mz_menu_nav ul.navmain > li.navActive > a {
        color: #fff; font-weight: 600; border-bottom-color: #fff;
    }
    .db-vo-nav #zl_mz_menu_nav ul.navmain li .icon-dropdown { display: inline-block; margin-left: 5px; font-size: 11px; }

    /* Solide (witte) header: top-level links kantelen naar donker-op-wit. */
    .db-vo-site-header.vo-header-scrolled .db-vo-nav #zl_mz_menu_nav ul.navmain > li > a { color: var(--vo-ink); }
    .db-vo-site-header.vo-header-scrolled .db-vo-nav #zl_mz_menu_nav ul.navmain > li:hover > a { color: var(--vo-blauw); }
    .db-vo-site-header.vo-header-scrolled .db-vo-nav #zl_mz_menu_nav ul.navmain > li.navActive > a {
        color: var(--vo-blauw); border-bottom-color: var(--vo-blauw);
    }

    .db-vo-nav #zl_mz_menu_nav ul.navmain li ul {
        position: absolute; left: 0; top: calc(100% + 14px); min-width: 240px;
        padding: .5rem; margin: 0; list-style: none;
        background: #fff; border: 1px solid var(--vo-line);
        box-shadow: 0 24px 48px rgba(0, 40, 80, .16);
        opacity: 0; visibility: hidden; transition: opacity .15s ease; z-index: 40;
    }
    .db-vo-nav #zl_mz_menu_nav ul.navmain > li.zl-nav-haschilds::after {
        content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 16px;
    }
    .db-vo-nav #zl_mz_menu_nav ul.navmain li:hover > ul { opacity: 1; visibility: visible; }
    .db-vo-nav #zl_mz_menu_nav ul.navmain li ul li { display: block; margin: 2px 0; border: 0 !important; }
    .db-vo-nav #zl_mz_menu_nav ul.navmain li ul li a {
        display: flex; align-items: center; padding: .55rem .65rem;
        color: var(--vo-ink); white-space: nowrap; text-decoration: none; font-size: .9rem;
    }
    .db-vo-nav #zl_mz_menu_nav ul.navmain li ul li a:hover,
    .db-vo-nav #zl_mz_menu_nav ul.navmain li ul li.navActive > a { background: var(--vo-licht); color: var(--vo-blauw); }
}
@media (max-width: 1199.98px) {
    .db-vo-site-header-inner { padding: 16px 24px; flex-wrap: wrap; }
    /* Blijft fixed (net als desktop) zodat verbergen/tonen bij scrollen
       (vo-header.js) ook op mobiel werkt — een position:static header laat bij
       transform:translateY(-100%) een lege ruimte achter in plaats van echt te
       verdwijnen. Alleen de achtergrond wordt hier altijd solide donkerblauw
       (matcht het brondesign se mobiele header), niet transparant-over-foto
       zoals de eerste scherm-hoogte op desktop.
       will-change:transform (basisregel, voor de scroll-transitie) maakt de
       header een "containing block" voor position:fixed-nakomelingen —
       inclusief de mobiele drawer (#zl_mz_menu_nav, fixed via het framework's
       zl_menu.css). Dat moet hier gereset worden, anders blijft de drawer
       gevangen in de (kleine) headerbox in plaats van tegen het echte
       viewport te plakken — hij lijkt dan half "achter" de content te zitten
       / dekt niet goed af. */
    .db-vo-site-header { background: var(--vo-donker) !important; will-change: auto; }
    /* De achtergrond is op mobiel altijd donkerblauw (regel hierboven) — nooit
       wit zoals in de desktop-scrolled state. De .vo-header-scrolled-regel
       die het logo-filter dan reset naar "none" (echte merkkleuren, voor op
       een witte achtergrond) gold hier onterecht ook nog, waardoor het logo
       na scrollen op mobiel in de eigen blauw/grijze kleuren tegen de
       donkerblauwe achtergrond kwam te staan (bijna onzichtbaar). Hier
       teruggezet naar exact hetzelfde wit-filter als de basisstaat. */
    .db-vo-site-header.vo-header-scrolled .db-vo-logo-mark {
        filter: brightness(0) invert(1) drop-shadow(0 1px 3px rgba(0, 0, 0, .45));
    }
    .db-vo-logo-mark { height: 34px; }
    .db-vo-nav { order: 3; margin: 0 0 0 auto; }
    .db-vo-nav .btn-menu {
        display: block; position: static; left: auto; top: auto;
        width: auto; height: auto; background: none; border: none;
        cursor: pointer; font-size: 22px; color: #fff; padding: 0;
    }
    .db-vo-nav #zl_mz_menu_nav { background-color: var(--vo-donker); }
    .db-vo-nav #zl_mz_menu_nav > ul { max-width: 100%; margin: 0; padding: 84px 28px 40px; }
    .db-vo-nav #zl_mz_menu_nav a {
        color: #fff; font-family: "Source Sans 3", "Source Sans 3 Fallback", sans-serif; font-weight: 400; font-size: 1.1rem;
    }
    .db-vo-nav #zl_mz_menu_nav ul li { border-top: 1px solid rgba(255, 255, 255, .12); }
    .db-vo-nav #zl_mz_menu_nav ul li.homeicon,
    .db-vo-nav #zl_mz_menu_nav ul li:first-child { border-top: none; }
    .db-vo-nav #zl_mz_menu_nav ul li a { padding: 14px 0; }
    .db-vo-nav #zl_mz_menu_nav li.navActive > a,
    .db-vo-nav #zl_mz_menu_nav a:hover { color: #fff; font-weight: 600; }
    .db-vo-nav-cta { display: none; }
}

/* ==========================================================================
   Site-footer — donkerblauw grid, 4 kolommen.
   ========================================================================== */
.db-vo-site-footer {
    background: var(--vo-donker);
    color: rgba(255, 255, 255, .8);
    padding: 5rem 0 30px; /* top = .divider-lrg (basis.css), zelfde als elk ander gekleurd blok */
}
@media (max-width: 768px) {
    .db-vo-site-footer { padding: 3.25rem 0 24px; } /* = .divider-lrg mobiel (basis.css, max-width:767px) */
}
.db-vo-footer-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1fr;
    gap: 48px;
    align-items: start;
}
.db-vo-footer-brand { display: flex; flex-direction: column; gap: 16px; }
.db-vo-footer-logo-row { display: flex; align-items: center; gap: 12px; }
.db-vo-footer-payoff {
    margin: 0; font-family: "Barlow Condensed", "Barlow Condensed Fallback", sans-serif; font-weight: 600;
    font-size: 1.25rem; letter-spacing: .2em; text-transform: uppercase; color: #fff;
}
.db-vo-footer-coltitle {
    margin: 0 0 12px 0; font-family: "Barlow Condensed", "Barlow Condensed Fallback", sans-serif; font-weight: 600;
    font-size: 1.1rem; letter-spacing: .2em; text-transform: uppercase; color: #fff;
}
.db-vo-footer-text.db-vo-content p { margin: 0 0 8px 0; font-size: .9375rem; line-height: 1.6; color: rgba(255, 255, 255, .8); }
.db-vo-footer-text.db-vo-content a { color: rgba(255, 255, 255, .8); text-decoration: none; }
.db-vo-footer-text.db-vo-content a:hover { color: #fff; text-decoration: underline; }
.db-vo-footer-menu { display: flex; flex-direction: column; gap: 8px; font-size: .9375rem; }
.db-vo-footer-menu a { color: rgba(255, 255, 255, .8); }
.db-vo-footer-menu a:hover { color: #fff; }
.db-vo-footer-bottom {
    margin-top: 44px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .18);
}
.db-vo-footer-bottom .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.db-vo-footer-copy, .db-vo-footer-mzlink { font-size: .8125rem; color: rgba(255, 255, 255, .6); }

@media (max-width: 991.98px) {
    .db-vo-footer-grid { grid-template-columns: 1fr 1fr; row-gap: 36px; }
}
@media (max-width: 575.98px) {
    .db-vo-footer-grid { grid-template-columns: 1fr; }
}

/* Multi-knop rijen in editorvelden (hero / cta-strip / cta-formulier) */
.db-vo-content a.btn { margin: 0 14px 14px 0; }
.db-vo-content a.btn:last-child { margin-right: 0; }

/* ==========================================================================
   01-hero — home
   ========================================================================== */
.db-vo-hero { position: relative; }
.db-vo-hero-img { width: 100%; height: 780px; object-fit: cover; display: block; }
.db-vo-hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(rgba(0, 55, 110, .82) 0%, rgba(0, 55, 110, .42) 45%, rgba(0, 55, 110, .78) 100%);
}
.db-vo-hero .container-fluid { position: absolute; inset: 0; display: flex; align-items: flex-end; padding-bottom: 96px; }
.db-vo-hero-content { max-width: 900px; padding: 0 72px; }
.db-vo-hero .db-vo-content h1 { max-width: 20ch; text-wrap: balance; }
.db-vo-hero .db-vo-content p { max-width: 42ch; font-weight: 300; font-size: 1.5rem; line-height: 1.45; }

@media (max-width: 991.98px) {
    .db-vo-hero-img { height: 560px; }
    .db-vo-hero .container-fluid { padding-bottom: 32px; }
    .db-vo-hero-content { padding: 0 24px; }
    .db-vo-hero .db-vo-content h1 { max-width: 100%; }
    .db-vo-hero .db-vo-content p { max-width: 100%; }
}

/* ==========================================================================
   02-pagina-header — subpagina's
   ========================================================================== */
.db-vo-pagina-header { position: relative; }
.db-vo-pagina-header-img { width: 100%; height: 520px; object-fit: cover; display: block; }
.db-vo-pagina-header-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(rgba(0, 55, 110, .86) 0%, rgba(0, 55, 110, .5) 50%, rgba(0, 55, 110, .78) 100%);
}
.db-vo-pagina-header .container-fluid { position: absolute; inset: 0; display: flex; align-items: flex-end; padding-bottom: 72px; }
.db-vo-pagina-header-content { max-width: 900px; padding: 0 72px; }
.db-vo-pagina-header .db-vo-content h1 { max-width: 26ch; text-wrap: balance; }
.db-vo-pagina-header .db-vo-content p { max-width: 46ch; font-weight: 300; font-size: 1.1rem; line-height: 1.45; margin-top: -.2em; }

@media (max-width: 991.98px) {
    .db-vo-pagina-header-img { height: 300px; }
    .db-vo-pagina-header .container-fluid { padding-bottom: 28px; }
    .db-vo-pagina-header-content { padding: 0 24px; }
    .db-vo-pagina-header .db-vo-content h1 { max-width: 100%; }
    .db-vo-pagina-header .db-vo-content p { max-width: 100%; }
}

/* ==========================================================================
   03-tekstblok — generiek tekstblok, meerdere plaatsingen
   ========================================================================== */
.db-vo-tekstblok-heading { margin-bottom: 36px; }
.db-vo-tekstblok-sidebar .db-vo-tekstblok-inner {
    display: grid; grid-template-columns: 390px 1fr; gap: 70px; align-items: start;
}
.db-vo-tekstblok-sidebar .db-vo-tekstblok-inner > .db-vo-tekstblok-body:only-child { grid-column: 1 / -1; }
.db-vo-tekstblok-sidebar .db-vo-tekstblok-heading { margin-bottom: 0; }
.db-vo-tekstblok-heading-img { width: 100%; height: 230px; object-fit: cover; display: block; margin-top: 10px; }

.db-vo-tekstblok-twocols .db-vo-tekstblok-body { column-count: 2; column-gap: 44px; }
.db-vo-tekstblok-twocols .db-vo-tekstblok-body p { break-inside: avoid-column; }
.db-vo-tekstblok-body p:last-child { margin-bottom: 0; }

@media (max-width: 991.98px) {
    .db-vo-tekstblok-sidebar .db-vo-tekstblok-inner { display: block; }
    .db-vo-tekstblok-twocols .db-vo-tekstblok-body { column-count: 1; }
}

/* ==========================================================================
   04-beeld-tekst — generiek beeld+tekst, meerdere plaatsingen
   ========================================================================== */
.db-vo-beeld-tekst-inner {
    display: grid; grid-template-columns: 1fr 1fr; align-items: center;
}
.db-vo-beeld-tekst-image img { width: 100%; height: 580px; object-fit: cover; display: block; }
.db-vo-beeld-tekst-text { padding: 0 100px; }
.db-vo-beeld-tekst-rechts .db-vo-beeld-tekst-image { order: 2; }
.db-vo-beeld-tekst-rechts .db-vo-beeld-tekst-text  { order: 1; }

.db-vo-section-panel.db-vo-beeld-tekst .db-vo-beeld-tekst-image img { height: 480px; }

@media (max-width: 991.98px) {
    /* Mobiel: tekst altijd boven, beeld eronder (ook bij beeld links) */
    .db-vo-beeld-tekst-inner { display: flex; flex-direction: column; }
    .db-vo-beeld-tekst-image img { height: 280px; }
    .db-vo-beeld-tekst-text { padding: 0 24px; margin-bottom: 24px; }
    .db-vo-beeld-tekst .db-vo-beeld-tekst-text  { order: 1; }
    .db-vo-beeld-tekst .db-vo-beeld-tekst-image { order: 2; }
}

/* ==========================================================================
   05-citaat-uitgelicht — quote/testimonial, meerdere plaatsingen
   ========================================================================== */
.db-vo-citaat-inner {
    display: grid; grid-template-columns: 390px 1fr; gap: 80px; align-items: center;
}
.db-vo-citaat-image img { width: 100%; height: 440px; object-fit: cover; display: block; }
.db-vo-citaat-text { display: flex; flex-direction: column; gap: 18px; }
.db-vo-citaat-text.db-vo-content blockquote { color: var(--vo-blauw); }

.db-vo-citaat-centered .db-vo-citaat-inner { display: block; max-width: 960px; }
.db-vo-citaat-centered .db-vo-citaat-text { gap: 26px; }

@media (max-width: 991.98px) {
    .db-vo-citaat-inner { display: block; }
    .db-vo-citaat-image { margin-bottom: 24px; }
    .db-vo-citaat-image img { height: 260px; }
}

/* ==========================================================================
   06-diensten — 4-koloms kaartengrid, home
   ========================================================================== */
.db-vo-diensten-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 40px; margin-bottom: 44px;
}
.db-vo-diensten-head h2 { margin: 0; }
.db-vo-diensten-head p { margin: 0; font-size: 1rem; color: var(--vo-muted); }
/* Kolomaantal (4 → 2 → 1) via Bootstrap col-12/col-md-6/col-lg-3 in de HTML,
   niet via handmatige CSS-grid-breakpoints — de standaard .row-gutter
   (--bs-gutter-x, 1.5rem = 24px) levert precies dezelfde horizontale ruimte
   als de oude "gap:24px"; row-gap hieronder is voor de verticale ruimte
   tussen kaarten zodra ze terugvallen op minder kolommen (Bootstrap's .row
   voegt dat niet vanzelf toe). */
.db-vo-diensten-grid { row-gap: 24px; }
.db-vo-diensten-card {
    height: 100%;
    border-width: 3px 1px 1px; border-style: solid;
    border-color: var(--vo-blauw) var(--vo-line) var(--vo-line);
    background: #fff; padding: 34px 30px 30px;
    display: flex; flex-direction: column; gap: 16px;
}
.db-vo-diensten-card h3 { margin: 0; }
.db-vo-diensten-card p { margin: 0; flex: 1 0 auto; }
.db-vo-diensten-card a { margin-top: auto; font-weight: 600; }

@media (max-width: 991.98px) {
    .db-vo-diensten-head { flex-wrap: wrap; }
    .db-vo-diensten-card { padding: 22px; }
}

/* ==========================================================================
   07-cta-strip — donkere afsluit-balk, subpagina's
   ========================================================================== */
.db-vo-cta-strip { background: var(--vo-blauw); padding: 5rem 0; } /* = .divider-lrg (basis.css) */
.db-vo-cta-strip-inner {
    display: flex; align-items: center; justify-content: space-between; gap: 60px;
}
.db-vo-cta-strip-inner h2 { color: #fff; margin: 0 0 .3em 0; }
.db-vo-cta-strip-inner p { margin: 0; font-weight: 300; font-size: 1.1875rem; }

@media (max-width: 991.98px) {
    .db-vo-cta-strip-inner { flex-wrap: wrap; }
}
@media (max-width: 768px) {
    .db-vo-cta-strip { padding: 3.25rem 0; } /* = .divider-lrg mobiel (basis.css, max-width:767px) */
}

/* ==========================================================================
   08-cta-formulier — home, donkere CTA + compact offerteformulier
   ========================================================================== */
.db-vo-cta-formulier { background: var(--vo-donker); padding: 5rem 0; } /* = .divider-lrg (basis.css) */
.db-vo-cta-formulier-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.db-vo-cta-formulier-info { display: flex; flex-direction: column; gap: 24px; }
.db-vo-cta-formulier-info h2 { font-size: clamp(1.625rem, 1.3rem + 2vw, 3.25rem); }
.db-vo-cta-formulier-image { width: 100%; height: 230px; object-fit: cover; display: block; margin-top: 12px; }

.db-vo-cta-formulier-panel { background: #fff; padding: 40px; display: flex; flex-direction: column; gap: 18px; }
.db-vo-cta-formulier-title {
    margin: 0; font-family: "Barlow Condensed", "Barlow Condensed Fallback", sans-serif; font-weight: 600;
    font-size: 1.75rem; text-transform: uppercase; color: var(--vo-blauw);
}
.db-vo-cta-formulier-form { margin-top: 4px; }

@media (max-width: 991.98px) {
    .db-vo-cta-formulier-inner { display: block; }
    .db-vo-cta-formulier-panel { padding: 18px; margin-top: 24px; }
}
@media (max-width: 768px) {
    .db-vo-cta-formulier { padding: 3.25rem 0; } /* = .divider-lrg mobiel (basis.css, max-width:767px) */
}

/* ==========================================================================
   09-contact-formulier — contactpagina
   ========================================================================== */
.db-vo-contact-formulier { padding: 0; } /* wit blok: geen eigen padding, de divider is de ruimte */
.db-vo-contact-formulier-inner { display: grid; grid-template-columns: 1fr 1.1fr; gap: 80px; align-items: start; }
.db-vo-contact-formulier-info h2 { font-size: clamp(1.625rem, 1.4rem + 1.4vw, 2.125rem); margin-bottom: .2em; }
.db-vo-contact-formulier-info p { font-size: 1.0625rem; }
.db-vo-contact-formulier-info h6 { color: var(--vo-blauw); margin-top: 1.4em; }

.db-vo-contact-formulier-panel { background: var(--vo-licht); padding: 44px; display: flex; flex-direction: column; gap: 20px; }
.db-vo-contact-formulier-title {
    margin: 0; font-family: "Barlow Condensed", "Barlow Condensed Fallback", sans-serif; font-weight: 600;
    font-size: 2.125rem; text-transform: uppercase; color: var(--vo-blauw);
}
.db-vo-contact-formulier-form { margin-top: 4px; }

@media (max-width: 991.98px) {
    .db-vo-contact-formulier-inner { display: block; }
    .db-vo-contact-formulier-panel { padding: 18px; margin-top: 32px; }
}

/* Formbuilder-checkboxvelden (bv. privacy-akkoord): input + label naast
   elkaar i.p.v. onder elkaar. Formbuilder's eigen markup geeft hier geen
   layout mee — kaal <input type="checkbox"> direct gevolgd door een kaal
   <label>, allebei standaard block/losse regels — dus zonder deze regel
   valt de tekst onder de checkbox i.p.v. ernaast. Fix: zet beide op
   inline-block zodat ze samen op één regel staan (de labeltekst loopt
   terug op de volgende regel bij een lange tekst, netjes onder de checkbox
   uitlijnend via vertical-align). De foutmelding erna staat al standaard op
   een eigen regel dankzij formbuilder's eigen "d-block" class — daar hoeft
   niets voor gedaan te worden. */
.db-vo-cta-formulier-form input[type="checkbox"],
.db-vo-contact-formulier-form input[type="checkbox"] {
    display: inline-block;
    vertical-align: top;
    margin-top: .3em;
}
.db-vo-cta-formulier-form input[type="checkbox"] + label,
.db-vo-contact-formulier-form input[type="checkbox"] + label {
    display: inline-block;
    width: calc(100% - 1.8em);
    margin-left: .5em;
}

/* ==========================================================================
   10-route-parkeren — contactpagina
   ========================================================================== */
.db-vo-route-parkeren-inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: stretch; }
.db-vo-route-parkeren-text { display: flex; flex-direction: column; gap: 18px; }
.db-vo-route-parkeren-map {
    position: relative;
    overflow: hidden;
    border-radius: var(--vo-radius);
}
/* De googlemaps-plugin zet zelf een inline width/height op #gmMaps (uit de
   Article_Plugin_Settings_Json "width"/"height" — zie install.php). Die
   inline waarde is niet responsive, dus hier met !important overschreven
   per breedte i.p.v. via de settings-JSON zelf. */
.db-vo-route-parkeren-map #gmMaps { width: 100% !important; height: 360px !important; }
.db-vo-route-parkeren-image img { width: 100%; height: 100%; min-height: 440px; object-fit: cover; display: block; }

@media (max-width: 991.98px) {
    .db-vo-route-parkeren-inner { display: block; }
    .db-vo-route-parkeren-image { margin-top: 24px; }
    .db-vo-route-parkeren-map #gmMaps { height: 200px !important; }
    .db-vo-route-parkeren-image img { min-height: 220px; height: auto; }
}