/* ==========================================================================
   DE BRUIN TEGELWERKEN - custom.css
   Template: debruin (Helix Ultimate / Joomla 6)
   Laag 1: huisstijl-basis (fonts, kleuren, utilities)
   Latere stappen vullen dit bestand aan met header/footer en addon-styling.
   Dit bestand wordt automatisch als laatste geladen door het template.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FONT - Inter (Google Fonts, gewichten 400/500/600/700)
   Laat de font-instellingen in Helix (Typography) leeg, anders
   overschrijven die deze regels.
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* --------------------------------------------------------------------------
   2. HUISSTIJL-VARIABELEN
   -------------------------------------------------------------------------- */
:root {
    /* Kleuren gekoppeld aan de globale SP Page Builder kleuren van de
       ontwerper (Geel, Donker beige, Donker grijs, ...). Verandert de
       ontwerper een kleur in SPPB, dan volgt het template automatisch. */
    --db-amber:        #F4B331;  /* UI-accentkleur, gemeten in ontwerp (PNG) */
    --db-amber-dark:   #DD9D17;  /* hover-variant */
    --db-olive:        #777465;  /* topbar en copyrightbalk */
    --db-olive-dark:   #4B4C3A;  /* Vacatures-pill */
    --db-taupe:        #AEA7A1;  /* headerbalk, gemeten in ontwerp */
    --db-bg:           #E7E4DF;  /* pagina-achtergrond */
    --db-bg-alt:       #D4CFC9;  /* footer, gemeten in ontwerp */
    --db-grid-line:    rgba(255, 255, 255, 0.33); /* gemeten: lijn +14 grijswaarde op footer */
    --db-grid-line-dark: rgba(0, 0, 0, 0.05);     /* raster op lichte vlakken */
    --db-text:         #231F20;  /* tekstkleur, gemeten in ontwerp */
    --db-text-light:   #FFFFFF;
    --db-radius:       8px;      /* standaard afronding kaarten/knoppen */
    --db-radius-pill:  50rem;    /* pill-vorm voor knoppen */

    /* Tegelraster-celgrootte */
    --db-grid-size: 59px;  /* gemeten: 247px in 8000px-ontwerp = 59px op 1920 */
}

/* --------------------------------------------------------------------------
   2b. SP PAGE BUILDER THEME-VARIABELEN
   SPPB injecteert eigen theme-kleuren (o.a. witte header, blauwe links)
   als inline <style> NA de stylesheets. Daarom hier op body.site gezet:
   hogere specificiteit dan :root, dus deze waarden winnen altijd.
   -------------------------------------------------------------------------- */
body.site {
    --sppb-topbar-bg-color: var(--db-olive);
    --sppb-topbar-text-color: #B7B3A8;
    --sppb-header-bg-color: var(--db-taupe);
    --sppb-menu-text-color: #231F20;
    --sppb-menu-text-hover-color: #231F20;
    --sppb-menu-text-active-color: #231F20;
    --sppb-menu-dropdown-bg-color: #FFFFFF;
    --sppb-menu-dropdown-text-color: #231F20;
    --sppb-menu-dropdown-text-hover-color: var(--db-amber-dark);
    --sppb-menu-dropdown-text-active-color: var(--db-amber-dark);
    --sppb-text-color: var(--db-text);
    --sppb-bg-color: var(--db-bg);
    --sppb-link-color: var(--db-text);
    --sppb-link-hover-color: var(--db-amber-dark);
    --sppb-footer-bg-color: var(--db-bg-alt);
    --sppb-footer-text-color: var(--db-text);
    --sppb-footer-link-color: var(--db-text);
    --sppb-footer-link-hover-color: var(--db-amber-dark);
}

/* --------------------------------------------------------------------------
   3. BASIS-TYPOGRAFIE
   Inter: body 400, koppen 600, knoppen/labels 500.
   -------------------------------------------------------------------------- */
body.site {
    font-family: 'Inter', Arial, sans-serif;
    background-color: var(--db-bg);
    color: var(--db-text);
    font-size: 16px;
    line-height: 1.65;
}

h1, h2, h3, h4, h5, h6,
.sppb-addon-title, .sppb-addon-header h1, .sppb-addon-header h2, .sppb-addon-header h3 {
    font-family: 'Inter', Arial, sans-serif;
    font-weight: 600;
    color: var(--db-text);
    line-height: 1.15;
}

h1 { font-size: 2.75rem; }
h2 { font-size: 2.125rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }

@media (max-width: 767px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.625rem; }
}

a {
    color: var(--db-text);
    text-decoration: none;
    transition: color .2s ease;
}
a:hover { color: var(--db-amber-dark); }

/* --------------------------------------------------------------------------
   4. UTILITIES - tegelraster en accentstreep
   Toe te passen op SPPB-secties via "CSS Class" in sectie-instellingen.
   -------------------------------------------------------------------------- */

/* Tegelraster.
   Vaste tegelmaat in px: in elk element exact dezelfde maat, ongeacht
   de afmetingen, margins of paddings van dat element. Gebruik deze
   classes in plaats van een achtergrondafbeelding, want een bg-image
   met 'cover' schaalt per sectie anders en geeft ongelijke rasters.
   De offset van -25% cel zorgt dat er nooit een lijn precies op de
   rand van het vlak ligt. */
.db-grid-bg,
.db-grid-bg-soft {
    background-size: var(--db-grid-size) var(--db-grid-size);
    background-position: calc(var(--db-grid-size) * -0.25) calc(var(--db-grid-size) * -0.25);
}

/* Witte lijnen (heroes, footer, donkere/beige vlakken) */
.db-grid-bg {
    background-image:
        linear-gradient(to right, var(--db-grid-line) 1px, transparent 1px),
        linear-gradient(to bottom, var(--db-grid-line) 1px, transparent 1px);
}

/* Donkere lijnen voor heel lichte vlakken */
.db-grid-bg-soft {
    background-image:
        linear-gradient(to right, var(--db-grid-line-dark) 1px, transparent 1px),
        linear-gradient(to bottom, var(--db-grid-line-dark) 1px, transparent 1px);
}

/* Korte amber accentstreep onder een kop.
   Toepasbaar als CSS-class op een heading-addon. */
.db-accent .sppb-addon-title,
h1.db-accent, h2.db-accent, h3.db-accent {
    position: relative;
    padding-bottom: 18px;
}
.db-accent .sppb-addon-title::after,
h1.db-accent::after, h2.db-accent::after, h3.db-accent::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 48px;
    height: 4px;
    background: var(--db-amber);
}
/* Gecentreerde variant */
.db-accent-center .sppb-addon-title::after,
.db-accent-center::after { left: 50%; transform: translateX(-50%); }

/* --------------------------------------------------------------------------
   5. KNOPPEN - amber pill met pijl (basis; verfijning volgt in addon-stap)
   Geldt voor SPPB-buttons en reguliere Joomla/Bootstrap-knoppen.
   -------------------------------------------------------------------------- */
.sppb-btn,
.btn-primary,
.button,
input[type="submit"].btn {
    font-family: 'Inter', Arial, sans-serif;
    font-weight: 500;
    background-color: var(--db-amber);
    border: none;
    color: var(--db-text);
    border-radius: var(--db-radius-pill);
    padding: 10px 22px;
    font-size: 0.9375rem;
    transition: background-color .2s ease, transform .15s ease;
}
.sppb-btn:hover, .sppb-btn:focus,
.btn-primary:hover, .btn-primary:focus,
.button:hover,
input[type="submit"].btn:hover {
    background-color: var(--db-amber-dark);
    color: var(--db-text);
}

/* --------------------------------------------------------------------------
   6. SELECTIE & FOCUS
   -------------------------------------------------------------------------- */
::selection { background: var(--db-amber); color: var(--db-text); }

:focus-visible {
    outline: 2px solid var(--db-amber-dark);
    outline-offset: 2px;
}

/* ==========================================================================
   LAAG 2: HEADER & TOPBAR (header-variant "1-DeBruin")
   ========================================================================== */

/* Inhoud van topbar en header in gecentreerde container, cf. ontwerp
   (1320px breed; logo op x=300, menu tot x=1620 bij 1920px viewport) */
.db-topbar .container-inner,
#sp-header.db-header .container-inner {
    max-width: 1320px;
    margin-inline: auto;
    padding-inline: 0;
}
@media (max-width: 1399px) {
    .db-topbar .container-inner,
    #sp-header.db-header .container-inner {
        max-width: calc(100% - 60px);
    }
}

/* --- Topbar (olijf) ------------------------------------------------------ */
.db-topbar {
    background: var(--db-olive) !important;
    color: #B7B3A8;
    font-size: 0.875rem;
    padding: 8px 0;
}
.db-topbar .container-inner { gap: 22px; }

.db-topbar a {
    color: #B7B3A8;
}
.db-topbar a:hover { color: #fff; }

/* Vacatures-pill */
.db-topbar-vacatures,
.db-topbar .mod-menu a,
.db-topbar .sp-module a {
    display: inline-block;
    background: var(--db-olive-dark);
    color: #C9C6BB;
    border-radius: var(--db-radius-pill);
    padding: 2px 16px;
    line-height: 1.6;
}
.db-topbar-vacatures:hover,
.db-topbar .mod-menu a:hover,
.db-topbar .sp-module a:hover {
    background: var(--db-amber);
    color: var(--db-text);
}
.db-topbar .sp-module { margin: 0; }
.db-topbar .mod-menu { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; }

/* Bel direct */
.db-topbar-phone { display: inline-flex; align-items: center; gap: 7px; }
.db-topbar-phone i { font-size: 0.75rem; }

/* Social icons in topbar */
.db-topbar-social .social-icons {
    display: flex;
    gap: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.db-topbar-social .social-icons li { margin: 0; }
.db-topbar-social .social-icons a { font-size: 0.9375rem; }

/* --- Headerbalk (taupe) ---------------------------------------------------
   Gemeten ontwerpgeometrie (1920px viewport):
   - topbar 35px hoog, headerband 94px hoog
   - logo 50px hoog, verticaal gecentreerd; amber logolijn op y 103-107
   - actieve menu-underline: zelfde y (103-107), zelfde dikte (4px),
     d.w.z. 22px boven de onderkant van de header, volle woordbreedte
   - menu en topbar eindigen rechts op de containerrand
   -------------------------------------------------------------------------- */
#sp-header.db-header {
    background: var(--db-taupe) !important;
    box-shadow: none;
    height: auto;
    padding: 0;
}
#sp-header.db-header .container-inner { padding-top: 0; padding-bottom: 0; }
#sp-header.db-header .container-inner > .row { min-height: 94px; }

/* Bootstrap col-auto gutters (12px) verwijderen zodat logo en menu
   exact op de containerranden staan, gelijk met de topbar-iconen */
#sp-header.db-header #sp-logo { padding-left: 0; }
#sp-header.db-header #sp-menu { padding-right: 0; }

/* Logo: 50px hoog (gemeten), verticaal gecentreerd */
#sp-header.db-header .logo-image { height: 50px !important; }

/* Sticky: zelfde taupe, subtiele schaduw */
#sp-header.db-header.header-sticky {
    background: var(--db-taupe) !important;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.12);
}

/* --- Menu -------------------------------------------------------------------
   Padding op de li, niet op de a: de underline (op de a) is daardoor
   exact zo breed als het woord zelf. Links zijn full-height zodat de
   underline op vaste afstand van de headeronderkant ligt, gelijk aan
   de logolijn. */
/* Let op: de ul heeft Bootstrap-class d-lg-block (display:block !important);
   daarom blijven de li's inline-flex zodat ze horizontaal staan. */
#sp-header.db-header .sp-megamenu-parent { margin: 0; font-size: 0; }
#sp-header.db-header .sp-megamenu-parent > li {
    padding: 0 23px;
    margin: 0 !important;
    display: inline-flex;
    align-items: stretch;
    vertical-align: top;
    float: none;
}
#sp-header.db-header .sp-megamenu-parent > li:last-child { padding-right: 0; }

#sp-header.db-header .sp-megamenu-parent > li > a,
#sp-header.db-header .sp-megamenu-parent > li > span {
    font-family: 'Inter', Arial, sans-serif;
    font-weight: 500;
    font-size: 1rem;
    color: #231F20 !important;
    padding: 0;
    margin: 0;
    position: relative;
    display: flex;
    align-items: center;
    min-height: 94px;
    line-height: 1.2;
    background: transparent !important;
}
#sp-header.db-header .sp-megamenu-parent > li > a:hover,
#sp-header.db-header .sp-megamenu-parent > li:hover > a {
    color: #231F20 !important;
}

/* Amber underline: volle woordbreedte, 4px dik, 22px boven headeronderkant
   = exact dezelfde hoogte en dikte als de lijn in het logo */
#sp-header.db-header .sp-megamenu-parent > li > a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 22px;
    height: 4px;
    background: var(--db-amber);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .2s ease;
}
#sp-header.db-header .sp-megamenu-parent > li > a:hover::after,
#sp-header.db-header .sp-megamenu-parent > li.active > a::after,
#sp-header.db-header .sp-megamenu-parent > li.current-item > a::after {
    transform: scaleX(1);
}

/* Dropdowns in huisstijl */
#sp-header.db-header .sp-dropdown .sp-dropdown-inner {
    background: #fff;
    border-radius: var(--db-radius);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}
#sp-header.db-header .sp-dropdown li.sp-menu-item > a {
    color: var(--db-text);
    font-size: 0.9rem;
    min-height: 0;
    display: block;
}
#sp-header.db-header .sp-dropdown li.sp-menu-item > a::after { content: none; }
#sp-header.db-header .sp-dropdown li.sp-menu-item > a:hover,
#sp-header.db-header .sp-dropdown li.sp-menu-item.active > a {
    color: var(--db-amber-dark) !important;
    background: transparent;
}

/* --- Topbar-maatvoering (35px hoog, iconafstanden cf. ontwerp) ------------- */
.db-topbar { padding: 0; }
.db-topbar .container-inner { min-height: 35px; gap: 20px; }
.db-topbar-social .social-icons { gap: 16px; }

/* --- Offcanvas / mobiel menu ---------------------------------------------- */
#sp-header.db-header .burger-icon span { background-color: var(--db-text); }

.offcanvas-menu {
    background: var(--db-bg);
}
.offcanvas-menu .offcanvas-inner ul.menu > li > a,
.offcanvas-menu .offcanvas-inner ul.menu > li > span {
    color: var(--db-text);
    font-family: 'Inter', Arial, sans-serif;
    font-weight: 500;
}
.offcanvas-menu .offcanvas-inner ul.menu > li.active > a {
    color: var(--db-amber-dark);
    box-shadow: inset 4px 0 0 var(--db-amber);
}
.offcanvas-menu .offcanvas-inner ul.menu > li > a:hover {
    color: var(--db-amber-dark);
}

/* Origineel raster-SVG van de ontwerper (witte lijnen, vaste celmaat).
   Gebruik deze class als het CSS-raster niet exact genoeg matcht. */
.db-grid-bg-svg {
    background-image: url('../images/debruin/grid-bg.svg');
    background-size: auto 100%;
    background-repeat: repeat;
}

/* ==========================================================================
   LAAG 3: FOOTER (debruin-footer.php)
   ========================================================================== */
.db-footer {
    background-color: var(--db-bg-alt);
    margin-top: 0;
}
.db-footer .container { max-width: 1200px; }

.db-footer-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 0.9fr;
    gap: 40px;
    padding: 56px 0 48px;
    align-items: start;
}

/* Kolom 1: merk */
.db-footer-logo { height: 44px; width: auto; margin-bottom: 18px; }
.db-footer-company {
    font-size: 0.9375rem;
    line-height: 1.6;
    margin-bottom: 18px;
}
.db-footer-social .social-icons {
    display: flex;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.db-footer-social .social-icons li { margin: 0; }
.db-footer-social .social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 0.875rem;
    transition: background-color .2s ease;
}
.db-footer-social .social-icons a:hover { background: var(--db-amber); color: var(--db-text); }

/* Kolom 2: contact */
.db-footer-contact p {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    font-size: 0.9375rem;
}
.db-footer-contact a { display: flex; gap: 12px; color: var(--db-text); }
.db-footer-contact a:hover { color: var(--db-amber-dark); }
.db-footer-contact i {
    width: 16px;
    text-align: center;
    margin-top: 4px;
    color: var(--db-text);
}

/* Kolom 3: links */
.db-footer-links ul { list-style: none; margin: 0; padding: 0; }
.db-footer-links li { margin-bottom: 12px; }
.db-footer-links a { font-size: 0.9375rem; color: var(--db-text); }
.db-footer-links a:hover { color: var(--db-amber-dark); }

/* Kolom 4: certificeringen */
.db-footer-certs { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.db-footer-certs img { height: 52px; width: auto; }

/* Helix' eigen (lege) footer-rij rendert boven onze footer en geeft
   een witte lijn; volledig uitschakelen, db-footer vervangt hem. */
#sp-footer { display: none !important; }
.db-footer { border-top: 0; }

/* Copyrightbalk */
.db-footer-copyright {
    background: var(--db-olive);
    padding: 10px 0;
}
.db-footer-copyright p {
    margin: 0;
    text-align: center;
    font-size: 0.78125rem;
    color: rgba(255, 255, 255, 0.75);
}

/* Helix' eigen footer/bottom-rijen verbergen we niet; ze renderen alleen
   als er modules in staan. Zet wel de Helix-copyright uit in de instellingen. */

/* Responsive */
@media (max-width: 991px) {
    .db-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 575px) {
    .db-footer-grid { grid-template-columns: 1fr; padding: 40px 0 36px; }
    .db-footer-certs { flex-direction: row; gap: 28px; }
}

/* --------------------------------------------------------------------------
   DE BRUIN HERO (custom addon)
   Gemeten ontwerp (1920px viewport, p01/p02):
   - hoogte 820px, achtergrond #D4CFC9 met 59px-raster over volle breedte
   - foto rechts 56% breed, links gemaskeerd met fade van ~220px
   - tekst in 1320px-container; H1 60px/1.15, intro 16px/2.0
   -------------------------------------------------------------------------- */
.db-hero {
    position: relative;
    background-color: var(--db-bg-alt);
    min-height: 820px;
    display: flex;
    align-items: center;
    overflow: hidden;
    /* Full-bleed: breekt uit elke SPPB-container naar de volle schermbreedte
       (body-innerwrapper heeft overflow-x:hidden, dus geen scrollbalk) */
    width: 100vw;
    margin-left: calc(50% - 50vw);
}
/* Sectie- en addonmarges rond de hero automatisch op nul, zodat hij
   direct tegen de header aanligt; geen handmatige SPPB-instellingen nodig */
.sppb-section:has(.db-hero) { padding: 0 !important; }
.sppb-section:has(.db-hero) .sppb-row { --bs-gutter-x: 0; margin: 0; }
.sppb-addon:has(> .db-hero),
.sppb-addon-wrapper:has(.db-hero) { margin: 0 !important; padding: 0 !important; }
.db-hero-image {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 56%;
    background-size: cover;
    background-position: center;
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0, #000 220px);
            mask-image: linear-gradient(to right, rgba(0,0,0,0) 0, #000 220px);
}
.db-hero-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1320px;
    margin-inline: auto;
}
@media (max-width: 1399px) {
    .db-hero-inner { max-width: calc(100% - 60px); }
}
.db-hero-content {
    max-width: 560px;
    padding: 90px 0;
}
.db-hero-content h1 {
    font-family: 'Inter', Arial, sans-serif;
    font-weight: 600;
    font-size: var(--db-fs-h1);
    line-height: 1.15;
    color: var(--db-text);
    margin: 0 0 56px;
}
/* Amber accentstreep onder de titel (gemeten: 120 x 8px, ~60px boven intro) */
.db-hero-content h1::after {
    content: "";
    display: block;
    width: 120px;
    height: 8px;
    background: var(--db-amber);
    margin-top: 12px;
}
.db-hero-content p {
    font-size: 1rem;
    line-height: 2;
    color: var(--db-text);
    max-width: 480px;
    margin: 0 0 16px;
}
.db-hero-content p:last-child { margin-bottom: 0; }

@media (max-width: 991px) {
    .db-hero { min-height: 0; flex-direction: column-reverse; align-items: stretch; }
    .db-hero-content h1 { margin-bottom: 24px; }
    .db-hero-image {
        position: relative;
        width: 100%;
        height: 320px;
        -webkit-mask-image: none;
                mask-image: none;
    }
    .db-hero-content { padding: 48px 0; }
}

/* --------------------------------------------------------------------------
   DE BRUIN USP-RIJ (custom addon)
   Gemeten: band 170px hoog, bg #D4CFC9 met raster, amber cirkels 46px
   met plus, tekst donker; inhoud in 1320px-container.
   -------------------------------------------------------------------------- */
.db-usps {
    background-color: var(--db-bg-alt);
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: 40px 0;
}
.sppb-section:has(.db-usps) { padding: 0 !important; }
.sppb-addon:has(> .db-usps),
.sppb-addon-wrapper:has(.db-usps) { margin: 0 !important; padding: 0 !important; }
.db-usps-inner {
    max-width: 1320px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 40px;
    align-items: center;
}
@media (max-width: 1399px) { .db-usps-inner { max-width: calc(100% - 60px); } }
.db-usp { display: flex; align-items: center; gap: 26px; }
.db-usp-icon {
    flex: 0 0 46px;
    width: 46px; height: 46px;
    border-radius: 50%;
    background: var(--db-amber);
    color: #fff;
    font-size: 30px;
    font-weight: 400;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.db-usp-text { font-size: 0.9375rem; line-height: 1.55; color: var(--db-text); font-weight: 500; }

/* --------------------------------------------------------------------------
   DE BRUIN INFOKAART (custom addon)
   Gemeten: kaart 574px breed, amber #F4B331, titelpadding 55px links /
   ~80px boven; foto sluit rechts aan, begint 123px lager en steekt
   33px onder de kaart uit.
   -------------------------------------------------------------------------- */
.db-infokaart {
    display: flex;
    align-items: flex-start;
    max-width: 1320px;
    margin-inline: auto;
}
.db-infokaart-card {
    flex: 0 0 690px;
    max-width: 690px;
    background: var(--db-amber);
    border-radius: 16px;
    padding: 72px 55px 60px;
    color: var(--db-text);
}
.db-infokaart-title {
    font-family: 'Inter', Arial, sans-serif;
    font-weight: 600;
    font-size: var(--db-fs-h3);
    line-height: 1.3;
    margin: 0 0 28px;
    color: var(--db-text);
}
.db-infokaart-title::after {
    content: "";
    display: block;
    width: var(--db-accent-w);
    height: var(--db-accent-h);
    background: rgba(255, 255, 255, 0.65);
    margin-top: 14px;
}
.db-infokaart-text p { font-size: 0.9375rem; line-height: 1.9; margin: 0 0 14px; }
.db-infokaart-btn {
    display: inline-block;
    margin-top: 18px;
    padding: 8px 16px;
    background: #fff;
    border: 0;
    border-radius: 4px;
    color: var(--db-text);
    font-weight: 500;
    font-size: 0.9375rem;
    transition: background .2s, color .2s;
}
.db-infokaart-btn:hover { background: var(--db-text); color: var(--db-amber); }
/* Mediakolom: foto overlapt de kaart ~120px (gemeten p04), citaat eronder */
.db-infokaart-media {
    flex: 1 1 auto;
    min-width: 0;
    margin-left: -120px;
    position: relative;
    z-index: 1;
}
.db-infokaart-image { margin-top: 123px; }
.db-infokaart-image img { width: 100%; height: auto; display: block; border-radius: 10px; }
.db-infokaart-quote {
    margin: 80px 0 0 auto;
    max-width: 540px;
    font-family: 'Inter', Arial, sans-serif;
    font-weight: 600;
    font-size: 40px;
    line-height: 1.4;
    color: var(--db-text);
}
.sppb-section:has(.db-infokaart) { overflow: visible; }
@media (max-width: 991px) {
    .db-infokaart { flex-direction: column; }
    .db-infokaart-card { flex-basis: auto; max-width: 100%; padding: 44px 32px 40px; }
    .db-infokaart-media { margin: -20px 0 0 32px; }
    .db-infokaart-image { margin-top: 0; }
    .db-infokaart-quote { font-size: 28px; margin-top: 40px; }
}

/* --------------------------------------------------------------------------
   FAQ-ACCORDION (styling op de standaard SPPB accordion-addon)
   Gemeten: kolom 1070px gecentreerd, amber balken 48px hoog met caret
   links, donkere vraagtekst; antwoord op wit.
   -------------------------------------------------------------------------- */
.sppb-addon-accordion .sppb-panel-group { max-width: 1070px; margin-inline: auto; }
.sppb-addon-accordion .sppb-panel,
.sppb-addon-accordion .sppb-panel-modern {
    background: transparent;
    border: 0 !important;
    border-radius: 0;
    margin-bottom: 10px;
}
.sppb-addon-accordion .sppb-panel-heading {
    background: var(--db-amber) !important;
    border-radius: 6px;
    min-height: 48px;
    padding: 12px 20px 12px 44px !important;
    position: relative;
    cursor: pointer;
}
.sppb-addon-accordion .sppb-panel-heading .sppb-panel-title {
    font-family: 'Inter', Arial, sans-serif;
    font-weight: 600;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    letter-spacing: 0 !important;
    color: var(--db-text) !important;
}
/* Caret links: driehoekje dat meedraait */
.sppb-addon-accordion .sppb-panel-heading::before {
    content: "";
    position: absolute;
    left: 20px;
    top: 50%;
    width: 0; height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid var(--db-text);
    transform: translateY(-50%) rotate(-90deg);
    transition: transform .25s ease;
}
.sppb-addon-accordion .sppb-panel-heading.active::before {
    transform: translateY(-50%) rotate(0deg);
}
/* Anobiz' ronde plus-knop rechts uitschakelen */
.sppb-addon-accordion .sppb-panel-heading .sppb-toggle-direction { display: none !important; }
.sppb-addon-accordion .sppb-panel-body {
    background: #fff;
    border: 0 !important;
    border-radius: 0 0 6px 6px;
    max-width: none !important;
    padding: 18px 24px 20px 44px !important;
    font-size: 0.9375rem;
    line-height: 1.9;
    color: var(--db-text);
}

/* --------------------------------------------------------------------------
   PROJECTCARDS (Dynamic Content) - class db-project-card op het item
   Gemeten ontwerp: taupe (#AEA7A1) balk onder de foto, donkere titel,
   amber pill-knop.
   -------------------------------------------------------------------------- */
/* Class 'db-project-card' op het Collectie-element (CSS Class-veld);
   elke kaart (item) krijgt dan de taupe balk uit het ontwerp.
   Maatvoering volledig vastgezet (gemeten p01/p02), onafhankelijk van
   de marges in de Dynamic Content-layout. */
.db-project-card .sppb-dynamic-content-collection__item {
    background: var(--db-taupe);
    overflow: hidden;
    border-radius: 6px;
    padding: 0 !important;
}
/* Layout-marges binnen de kaart neutraliseren en zelf bepalen */
.db-project-card .sppb-dynamic-content-collection__item .sppb-addon-wrapper { margin: 0 !important; width: auto !important; }
.db-project-card h4.sppb-dynamic-content-text,
.db-project-card .sppb-dynamic-content-text {
    margin: 22px 18px 0 !important;
    font-family: 'Inter', Arial, sans-serif;
    font-size: 19px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    color: var(--db-text) !important;
}
/* Specifieker dan de nulregel hierboven, anders verliest de knopmarge */
.db-project-card .sppb-dynamic-content-collection__item .sppb-addon-wrapper.addon-root-button {
    margin: 14px 18px 22px !important;
}
.db-project-card .sppb-btn,
.db-project-card .sppb-btn.sppb-btn-link {
    background: var(--db-amber) !important;
    border: 0 !important;
    border-radius: 6px !important;
    color: var(--db-text) !important;
    padding: 7px 16px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.db-project-card .sppb-btn:hover { background: var(--db-amber-dark) !important; }
.db-project-card .sppb-dynamic-content-collection__item .sppb-dynamic-content-image-wrapper,
.db-project-card .sppb-dynamic-content-collection__item .sppb-dynamic-content-image-wrapper img {
    display: block; width: 100%; margin: 0;
}
.db-project-card h3, .db-project-card h4,
.db-project-card .item-title-text { color: var(--db-text) !important; }


/* --------------------------------------------------------------------------
   DE BRUIN TEKST & FOTO (custom addon)
   Gemeten (p02): foto 550px rechts op containerlijn; amber kaart 500px,
   rechts gelijk met foto, 40px over de foto-onderkant, padding ~56px,
   vette tekst 19px; titel met accentlijn 104x6; amber pill-knop.
   -------------------------------------------------------------------------- */
.db-showcase {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 60px;
    max-width: 1320px;
    margin-inline: auto;
}
.db-showcase-text { flex: 1 1 auto; max-width: 560px; padding-top: 24px; }
.db-showcase.db-showcase-left { flex-direction: row-reverse; }
.db-showcase-title {
    font-family: 'Inter', Arial, sans-serif;
    font-weight: 600;
    font-size: var(--db-fs-h2);
    line-height: 1.25;
    color: var(--db-text);
    margin: 0 0 44px;
}
.db-showcase-title::after {
    content: "";
    display: block;
    width: var(--db-accent-w);
    height: var(--db-accent-h);
    background: var(--db-amber);
    margin-top: 16px;
}
.db-showcase-body p { font-size: 1rem; line-height: 2; color: var(--db-text); margin: 0 0 18px; }
.db-btn-amber {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--db-amber);
    color: var(--db-text);
    border-radius: var(--db-radius-pill);
    padding: 9px 22px;
    font-size: 15px;
    font-weight: 500;
    margin-top: 10px;
    transition: background .2s;
}
.db-btn-amber:hover { background: var(--db-amber-dark); color: var(--db-text); }
.db-showcase-media { flex: 0 0 550px; max-width: 550px; }
.db-showcase-image { width: 100%; height: auto; display: block; border-radius: 10px; }
.db-showcase-caption {
    width: 500px;
    max-width: 91%;
    margin-left: auto;
    margin-top: -40px;
    position: relative;
    background: var(--db-amber);
    border-radius: 10px;
    padding: 50px 56px;
    font-weight: 700;
    font-size: 19px;
    line-height: 1.9;
    color: var(--db-text);
}
@media (max-width: 991px) {
    .db-showcase, .db-showcase.db-showcase-left { flex-direction: column; gap: 36px; }
    .db-showcase-title, .db-band-title { margin-bottom: 32px; }
    .db-showcase-media { flex-basis: auto; max-width: 100%; }
    .db-showcase-caption { padding: 32px 30px; font-size: 17px; margin-top: -28px; }
}

/* --------------------------------------------------------------------------
   DE BRUIN BAND (custom addon)
   Gemeten (p02): full-bleed band #D4CFC9 met raster, padding ~145px;
   foto links op containerlijn ~595px; tekstkolom rechts ~610px met
   titel 44px + accentlijn.
   -------------------------------------------------------------------------- */
.db-band {
    background-color: var(--db-bg-alt);
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: 145px 0 150px;
}
.sppb-section:has(.db-band) { padding: 0 !important; }
.sppb-addon:has(> .db-band),
.sppb-addon-wrapper:has(.db-band) { margin: 0 !important; padding: 0 !important; }
.db-band-inner {
    max-width: 1320px;
    margin-inline: auto;
    display: flex;
    align-items: flex-start;
    gap: 115px;
}
@media (max-width: 1399px) { .db-band-inner { max-width: calc(100% - 60px); gap: 60px; } }
.db-band.db-band-right .db-band-inner { flex-direction: row-reverse; }
.db-band-media { flex: 0 0 595px; max-width: 595px; }
.db-band-media img { width: 100%; height: auto; display: block; border-radius: 10px; }
.db-band-media .db-band-image2 {
    width: 62%;
    margin: 43px 0 0 auto;
}
.db-band-text { flex: 1 1 auto; min-width: 0; max-width: 610px; }
.db-band-title {
    font-family: 'Inter', Arial, sans-serif;
    font-weight: 600;
    font-size: var(--db-fs-h2);
    line-height: 1.25;
    color: var(--db-text);
    margin: 0 0 44px;
}
.db-band-title::after {
    content: "";
    display: block;
    width: var(--db-accent-w);
    height: var(--db-accent-h);
    background: var(--db-amber);
    margin-top: 16px;
}
.db-band-body p { font-size: 1rem; line-height: 2; color: var(--db-text); margin: 0 0 18px; }
@media (max-width: 991px) {
    .db-band { padding: 64px 0; }
    .db-band-inner, .db-band.db-band-right .db-band-inner { flex-direction: column; gap: 36px; }
    .db-band-media { flex-basis: auto; max-width: 100%; }
}

/* --------------------------------------------------------------------------
   DE BRUIN FOTOKAART (custom addon)
   Gemeten (p04): full-bleed fotosectie ~1080px hoog, amber kaart 545px
   op de containerlijn, verticaal gecentreerd (~140px inzet), kaartpadding
   ~55px, titel 36px met witte accentlijn, witte knop.
   -------------------------------------------------------------------------- */
.db-fotokaart {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    min-height: 1080px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    padding: 140px 0;
}
.sppb-section:has(.db-fotokaart) { padding: 0 !important; }
.sppb-addon:has(> .db-fotokaart),
.sppb-addon-wrapper:has(.db-fotokaart) { margin: 0 !important; padding: 0 !important; }
.db-fotokaart-inner {
    max-width: 1320px;
    margin-inline: auto;
    width: 100%;
}
@media (max-width: 1399px) { .db-fotokaart-inner { max-width: calc(100% - 60px); } }
.db-fotokaart-card {
    max-width: 545px;
    background: var(--db-amber);
    border-radius: 10px;
    padding: 56px 55px 50px;
    color: var(--db-text);
}
.db-fotokaart.db-fotokaart-right .db-fotokaart-card { margin-left: auto; }
.db-fotokaart-title {
    font-family: 'Inter', Arial, sans-serif;
    font-weight: 600;
    font-size: var(--db-fs-h3);
    line-height: 1.3;
    color: var(--db-text);
    margin: 0 0 28px;
}
.db-fotokaart-title::after {
    content: "";
    display: block;
    width: var(--db-accent-w);
    height: var(--db-accent-h);
    background: rgba(255, 255, 255, 0.75);
    margin-top: 14px;
}
.db-fotokaart-text p { font-size: 0.9375rem; line-height: 1.9; margin: 0 0 14px; }
.db-btn-white {
    display: inline-block;
    margin-top: 14px;
    padding: 8px 16px;
    background: #fff;
    border-radius: 4px;
    color: var(--db-text);
    font-weight: 500;
    font-size: 0.9375rem;
    transition: background .2s, color .2s;
}
.db-btn-white:hover { background: var(--db-text); color: var(--db-amber); }
@media (max-width: 991px) {
    .db-fotokaart { min-height: 0; padding: 64px 0; }
    .db-fotokaart-card { padding: 40px 30px 36px; }
}

/* --- Fotokaart: lichte 'tegel'-kaartstijl ---------------------------------- */
.db-fotokaart-card.db-card-tegel {
    background-color: var(--db-bg);
    background-image:
        linear-gradient(to right, var(--db-grid-line) 1px, transparent 1px),
        linear-gradient(to bottom, var(--db-grid-line) 1px, transparent 1px);
    background-size: var(--db-grid-size) var(--db-grid-size);
    background-position: calc(var(--db-grid-size) * -0.25) calc(var(--db-grid-size) * -0.25);
}
.db-fotokaart-card.db-card-tegel .db-fotokaart-title::after { background: var(--db-amber); }

/* --- Showcase: onder-rij met citaat links en onderschrift-kaart rechts ----- */
.db-showcase-media:only-child { flex: 1 1 100%; max-width: 100%; }
.db-showcase-below {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 60px;
}
.db-showcase-quote {
    max-width: 560px;
    font-family: 'Inter', Arial, sans-serif;
    font-weight: 600;
    font-size: 40px;
    line-height: 1.4;
    color: var(--db-text);
    margin-top: 56px;
}
@media (max-width: 991px) {
    .db-showcase-below { flex-direction: column-reverse; gap: 32px; }
    .db-showcase-quote { font-size: 28px; margin-top: 8px; }
}

/* --------------------------------------------------------------------------
   DE BRUIN CTA (custom addon)
   Titel ~40px met accentlijn links, amber pill-knop rechts (gemeten p04).
   -------------------------------------------------------------------------- */
.db-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    max-width: 1320px;
    margin-inline: auto;
}
.db-cta-title {
    font-family: 'Inter', Arial, sans-serif;
    font-weight: 600;
    font-size: var(--db-fs-h2);
    line-height: 1.25;
    color: var(--db-text);
    margin: 0;
    max-width: 760px;
}
.db-cta-title::after {
    content: "";
    display: block;
    width: var(--db-accent-w);
    height: var(--db-accent-h);
    background: var(--db-amber);
    margin-top: 16px;
}
.db-cta-btn { flex: 0 0 auto; margin-top: 0; padding: 12px 26px; font-size: 1rem; }
@media (max-width: 991px) {
    .db-cta { flex-direction: column; align-items: flex-start; gap: 28px; }
}

/* --------------------------------------------------------------------------
   RSFORM PRO - De Bruin formulierstijl (gemeten p07/p11)
   Werkt op de standaard RSForm-output (shortcode {rsform X}).
   -------------------------------------------------------------------------- */
.rsform label,
.rsform .formControlLabel,
.rsform .rsform-block legend,
.rsform .form-label {
    font-family: 'Inter', Arial, sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: var(--db-text);
    margin-bottom: 8px;
    display: inline-block;
}
.rsform .formRequired { color: var(--db-text); }
.rsform .rsform-block { margin-bottom: 26px; }
.rsform input[type="text"],
.rsform input[type="email"],
.rsform input[type="tel"],
.rsform input[type="number"],
.rsform input[type="date"],
.rsform .rsform-input-box,
.rsform .rsform-calendar-box,
.rsform select,
.rsform .rsform-select-box,
.rsform textarea,
.rsform .rsform-text-box,
.rsform .form-control {
    width: 100%;
    background: #fff !important;
    border: 0 !important;
    border-radius: 8px;
    min-height: 50px;
    padding: 12px 18px;
    font-family: 'Inter', Arial, sans-serif;
    font-size: 0.9375rem;
    color: var(--db-text);
    box-shadow: none;
}
.rsform textarea, .rsform .rsform-text-box { min-height: 170px; resize: vertical; }
.rsform ::placeholder { color: #8E8B86; opacity: 1; }
.rsform input:focus, .rsform textarea:focus, .rsform select:focus {
    outline: 2px solid var(--db-amber) !important;
    outline-offset: 0;
}
/* Radio's en checkboxes */
.rsform input[type="radio"],
.rsform input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 24px; height: 24px;
    background: #fff;
    border: 0;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 10px;
    cursor: pointer;
    position: relative;
    flex: 0 0 auto;
}
.rsform input[type="checkbox"] { border-radius: 7px; }
.rsform input[type="radio"]:checked::after {
    content: "";
    position: absolute; inset: 6px;
    border-radius: 50%;
    background: var(--db-amber);
}
.rsform input[type="checkbox"]:checked::after {
    content: "";
    position: absolute; inset: 0;
    border-radius: 7px;
    background: var(--db-amber) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23231F20' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center/14px no-repeat;
}
.rsform .rsform-radio + label,
.rsform .rsform-checkbox + label { font-weight: 400; margin-bottom: 0; }
/* Upload: native file-input in taupe balk */
.rsform input[type="file"], .rsform .rsform-upload-box {
    width: 100%;
    background: #B5AFA9;
    border: 0;
    border-radius: 8px;
    color: var(--db-text);
    padding: 11px 18px;
    font-size: 0.9375rem;
    cursor: pointer;
}
.rsform input[type="file"]::file-selector-button {
    background: transparent; border: 0; color: var(--db-text);
    font-weight: 500; padding: 0 14px 0 0; cursor: pointer;
}
/* Verzendknop: outline pill (ontwerp) */
.rsform input[type="submit"],
.rsform button[type="submit"],
.rsform .rsform-submit-button {
    background: transparent !important;
    border: 1.5px solid var(--db-text) !important;
    border-radius: 6px;
    color: var(--db-text) !important;
    font-family: 'Inter', Arial, sans-serif;
    font-weight: 500;
    font-size: 1rem;
    padding: 10px 28px;
    cursor: pointer;
    transition: background .2s, color .2s;
}
.rsform input[type="submit"]:hover,
.rsform button[type="submit"]:hover,
.rsform .rsform-submit-button:hover { background: var(--db-text) !important; color: var(--db-amber) !important; }
/* Validatie */
.rsform .formError, .rsform .rsform-error-text { color: #C0392B; font-size: 0.85rem; }
.rsform input.rsform-error, .rsform textarea.rsform-error { outline: 2px solid #C0392B !important; }

/* --------------------------------------------------------------------------
   DE BRUIN CONTACTKAARTEN (custom addon)
   Gemeten p07: kaarten 198px breed, 173px hoog, 24px tussenruimte,
   radius 10; rij 1 amber, rij 2 taupe.
   -------------------------------------------------------------------------- */
.db-contactkaarten { display: flex; flex-direction: column; gap: 24px; }
.db-contactkaarten-rij {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.db-contactkaart {
    border-radius: 10px;
    min-height: 173px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 12px;
    padding: 20px 16px;
    color: var(--db-text);
    transition: filter .2s;
}
.db-contactkaart:hover { filter: brightness(0.96); color: var(--db-text); }
.db-contactkaart i { font-size: 30px; }
.db-contactkaart p { margin: 0; font-size: 0.9375rem; line-height: 1.5; font-weight: 500; }
.db-contactkaart-amber { background: var(--db-amber); }
.db-contactkaart-taupe { background: var(--db-taupe); }
.db-contactkaart-route { text-decoration: underline; font-weight: 500; color: var(--db-text); }
@media (max-width: 767px) { .db-contactkaarten-rij { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   VACATURE-BALKEN - class 'db-vacature' op het Dynamic Content
   Collectie-element (zoals db-project-card). Amber balken met titel,
   subregel en witte Bekijken-knop rechts (p08).
   -------------------------------------------------------------------------- */
.db-vacature .sppb-dynamic-content-collection__item {
    background: var(--db-amber);
    border-radius: 10px;
    padding: 30px 36px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 28px;
}
.db-vacature .sppb-dynamic-content-collection__item .sppb-addon-wrapper { margin: 0 !important; }
.db-vacature h3.sppb-dynamic-content-text,
.db-vacature h4.sppb-dynamic-content-text {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--db-text) !important;
    margin: 0 0 8px !important;
}
.db-vacature .sppb-dynamic-content-text { color: var(--db-text); }
.db-vacature .sppb-btn {
    background: #fff !important;
    border: 0 !important;
    border-radius: 6px !important;
    color: var(--db-text) !important;
    padding: 9px 20px !important;
    font-weight: 500 !important;
    white-space: nowrap;
}
.db-vacature .sppb-btn:hover { background: var(--db-text) !important; color: var(--db-amber) !important; }
@media (max-width: 767px) {
    .db-vacature .sppb-dynamic-content-collection__item { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* --- Showcase: extra foto + onderschrift links ----------------------------- */
.db-showcase-image2 { width: 62%; margin: 43px 0 0 auto; }
.db-showcase-media.db-caption-left .db-showcase-caption { margin-left: 0; margin-right: auto; }
.db-showcase-media.db-caption-left .db-showcase-below { flex-direction: row-reverse; }

/* --- CTA: kleine variant ---------------------------------------------------- */
.db-cta.db-cta-small .db-cta-title { font-size: 18px; font-weight: 700; line-height: 1.6; }
.db-cta.db-cta-small .db-cta-title::after { content: none; }

/* --------------------------------------------------------------------------
   DE BRUIN PROJECTNAVIGATIE (custom addon)
   Vorig/volgend op DC-detailpagina's + amber overzichtsknop (p10).
   -------------------------------------------------------------------------- */
.db-projectnav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    max-width: 1320px;
    margin-inline: auto;
}
.db-projectnav a { color: var(--db-text); font-weight: 500; font-size: 1rem; }
.db-projectnav a:hover { color: var(--db-amber-dark); }
.db-projectnav-pijl { font-size: 1.5em; vertical-align: middle; }
.db-projectnav-overzicht { padding: 11px 26px; margin-top: 0; }
.db-projectnav-leeg { min-width: 120px; }
@media (max-width: 767px) {
    .db-projectnav { flex-wrap: wrap; justify-content: center; gap: 18px; }
}

/* --------------------------------------------------------------------------
   DE BRUIN MERKEN (custom addon)
   Gecentreerde logostrip (p06): logo's ~40px hoog, klikbaar, met
   titel erboven en klein onderschrift eronder.
   -------------------------------------------------------------------------- */
.db-merken { max-width: 1320px; margin-inline: auto; text-align: center; }
.db-merken-titel {
    font-family: 'Inter', Arial, sans-serif;
    font-weight: 600;
    font-size: var(--db-fs-h3);
    color: var(--db-text);
    margin: 0 0 44px;
}
.db-merken-rij {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 40px 56px;
}
.db-merk { display: inline-flex; align-items: center; }
.db-merk img { max-height: 40px; width: auto; display: block; transition: opacity .2s; }
a.db-merk:hover img { opacity: 0.65; }
.db-merken-sub {
    margin: 36px 0 0;
    font-size: 0.8125rem;
    color: var(--db-text);
    opacity: 0.7;
}
@media (max-width: 767px) { .db-merken-rij { gap: 28px 36px; } .db-merk img { max-height: 32px; } }

/* --------------------------------------------------------------------------
   FOUT- EN OFFLINE-PAGINA'S in huisstijl
   -------------------------------------------------------------------------- */
html.error-page body {
    background-color: var(--db-bg);
    background-image:
        linear-gradient(to right, var(--db-grid-line) 1px, transparent 1px),
        linear-gradient(to bottom, var(--db-grid-line) 1px, transparent 1px);
    background-size: var(--db-grid-size) var(--db-grid-size);
    font-family: 'Inter', Arial, sans-serif;
    color: var(--db-text);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
html.error-page .error-logo { height: 56px; margin-bottom: 48px; }
html.error-page .error-code {
    font-size: 140px;
    font-weight: 700;
    line-height: 1;
    color: var(--db-amber);
    margin: 0 0 18px;
}
html.error-page .error-message {
    font-size: 24px;
    font-weight: 600;
    color: var(--db-text);
    margin: 0 0 36px;
}
html.error-page .btn,
html.error-page .btn-secondary {
    background: var(--db-amber);
    border: 0;
    border-radius: var(--db-radius-pill);
    color: var(--db-text);
    font-weight: 500;
    padding: 11px 26px;
}
html.error-page .btn:hover { background: var(--db-amber-dark); color: var(--db-text); }

/* Offline / coming soon */
.coming-soon-wrapper, body.coming-soon {
    background-color: var(--db-bg) !important;
    font-family: 'Inter', Arial, sans-serif;
    color: var(--db-text);
}
.coming-soon-login .form-control { border-radius: 8px; border: 0; min-height: 48px; }
.coming-soon-login .btn-primary {
    background: var(--db-amber); border: 0; color: var(--db-text);
    border-radius: var(--db-radius-pill); font-weight: 500;
}
.coming-soon-login .btn-primary:hover { background: var(--db-amber-dark); }

/* --------------------------------------------------------------------------
   UNIFORME KNOP-RADIUS
   Eén variabele bepaalt de hoekafronding van alle knoppen.
   -------------------------------------------------------------------------- */
:root {
    --db-btn-radius: 6px;
    /* Centrale kop-schaal: overal dezelfde maten */
    --db-fs-h1: 60px;   /* hero-titel */
    --db-fs-h2: 44px;   /* sectiekoppen */
    --db-fs-h3: 36px;   /* kaart-/subkoppen */
    --db-accent-w: 104px;
    --db-accent-h: 6px;
}
.db-btn-amber,
.db-btn-white,
.db-infokaart-btn,
.db-cta-btn,
.db-projectnav-overzicht,
.db-project-card .sppb-btn,
.db-vacature .sppb-btn,
.rsform input[type="submit"],
.rsform button[type="submit"],
.rsform .rsform-submit-button,
html.error-page .btn {
    border-radius: var(--db-btn-radius) !important;
}

/* --------------------------------------------------------------------------
   ANIMATIES
   1) Pijltjes in knoppen schuiven mee op hover
   2) Blokken faden/schuiven in bij scrollen (JS zet .db-anim/.db-in;
      zonder die classes is alles gewoon zichtbaar, dus de editor en
      no-JS blijven ongemoeid)
   -------------------------------------------------------------------------- */
.db-btn-amber span, .db-btn-white span,
.db-infokaart-btn span, .db-cta-btn span,
.db-projectnav-prev .db-projectnav-pijl, .db-projectnav-next .db-projectnav-pijl,
.db-project-card .sppb-btn i, .db-vacature .sppb-btn i {
    display: inline-block;
    transition: transform .25s ease;
}
.db-btn-amber:hover span, .db-btn-white:hover span,
.db-infokaart-btn:hover span, .db-cta-btn:hover span,
.db-project-card .sppb-btn:hover i, .db-vacature .sppb-btn:hover i,
.db-projectnav-next:hover .db-projectnav-pijl { transform: translateX(5px); }
.db-projectnav-prev:hover .db-projectnav-pijl { transform: translateX(-5px); }

html.db-anim .db-anim-item {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .6s ease, transform .6s ease;
    will-change: opacity, transform;
}
html.db-anim .db-anim-item.db-in {
    opacity: 1;
    transform: none;
}
/* Hero-foto komt subtiel van rechts */
html.db-anim .db-hero-image.db-anim-item { transform: translateX(46px); }
html.db-anim .db-hero-image.db-anim-item.db-in { transform: none; }
/* Lichte cascade in rijen met meerdere items */
html.db-anim .db-usp:nth-child(2),
html.db-anim .db-contactkaarten-rij .db-contactkaart:nth-child(2),
html.db-anim .db-project-card .sppb-dynamic-content-collection__item:nth-child(2) { transition-delay: .12s; }
html.db-anim .db-usp:nth-child(3),
html.db-anim .db-contactkaarten-rij .db-contactkaart:nth-child(3),
html.db-anim .db-project-card .sppb-dynamic-content-collection__item:nth-child(3) { transition-delay: .24s; }
html.db-anim .db-usp:nth-child(4) { transition-delay: .36s; }

/* --------------------------------------------------------------------------
   TELEFOON-ICOON gespiegeld (cf. ontwerp) - topbar, footer, contactkaarten
   -------------------------------------------------------------------------- */
.db-topbar-phone i,
.db-topbar-phone svg,
.db-footer-contact .fa-phone-alt,
.db-footer-contact .fa-phone,
.db-contactkaart .fa-phone-alt,
.db-contactkaart .fa-phone {
    transform: scaleX(-1);
    display: inline-block;
}

/* --------------------------------------------------------------------------
   SPPB HEADING-ADDON op dezelfde kop-schaal als de De Bruin-addons
   -------------------------------------------------------------------------- */
.sppb-addon-header .sppb-addon-title {
    font-family: 'Inter', Arial, sans-serif;
    font-weight: 600;
    color: var(--db-text);
}
h1.sppb-addon-title { font-size: var(--db-fs-h1) !important; line-height: 1.15 !important; }
h2.sppb-addon-title { font-size: var(--db-fs-h2) !important; line-height: 1.25 !important; }
h3.sppb-addon-title { font-size: var(--db-fs-h3) !important; line-height: 1.3 !important; }
/* Mobiel: de hele kop-schaal in een keer kleiner; alle koppen
   (De Bruin-addons en SPPB-headings) volgen automatisch */
@media (max-width: 991px) {
    :root {
        --db-fs-h1: 38px;
        --db-fs-h2: 32px;
        --db-fs-h3: 26px;
        --db-accent-w: 80px;
    }
}

/* --- De Bruin FAQ-addon: knop-reset zodat de accordion-styling 1-op-1 past --- */
.db-faq button.sppb-panel-heading {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    font: inherit;
}
.db-faq .sppb-panel-body[hidden] { display: none; }