/* ============================================================================
   PAGEBUILDER - HEADER SECTION
   ============================================================================ */

/* --- Section Container --- */
section.header-layer {
    position: relative;
    padding: var(--small-padding);
}

@media (min-width:768px) {
    section.header-layer {
        padding: var(--medium-padding);
    }
}

@media (min-width:1180px) {
    section.header-layer {
        padding: var(--large-padding);
    }
}

/* --- Text Alignment Utilities --- */
.text-align-left {
    text-align: left;
}

.text-align-center {
    text-align: center;
}

.text-align-right {
    text-align: right;
}

.text-align-left * {
    text-align: left;
}

.text-align-right * {
    text-align: right;
}

.box-width-small {
    max-width: 500px;
}

.box-width-medium {
    max-width: 800px;
}

.box-width-large {
    max-width: 1200px;
}

/* Paginakop (gekleurde/patroon-header) verticaal centreren in het ZICHTBARE
   blauw. Op desktop (>=1180px) staat de menubalk fixed en dekt de bovenste
   ~124px van de sectie af, terwijl de sectie op y=0 begint. De symmetrische
   200/200-padding centreert de titel dan in de hele sectie, waardoor hij
   optisch te hoog (tegen het menu) staat. Fix: content 62px (halve
   menu-overlap) omlaag = padding 262/138 i.p.v. 200/200, blokhoogte gelijk.
   Alleen desktop: op tablet/mobiel begint de sectie al ONDER het menu, daar
   klopt de centrering al. Home uitgesloten (eigen full-height beeldheader). */
@media (min-width: 1180px) {
    body:not(.home) section.header-layer.bg-pattern,
    body:not(.home) section.header-layer.bg-color {
        padding-top: 262px;
        padding-bottom: 138px;
    }
}

/* --- Typography --- */
.header-layer .content-box :is(h1, h2, h3, h4, h5, h6) {
    margin-bottom: 16px;
    display: block;
}

/* --- Text Content --- */
.header-layer .text-box {
    margin: 16px 0px;
}

.text-box * {
    margin: 16px 0px;
}

.text-box > :first-child {
    margin-top: 0;
}

.text-box > :last-child {
    margin-bottom: 0;
}

/* --- Lists / Bullets --- */
ul.bullets {
    margin: 16px 0px 16px 16px;
}

.text-align-center ul.bullets,
.text-align-right ul.bullets {
    list-style-type: none;
    margin-left: 0;
}

/* --- Button Groups --- */
.buttons-box {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: flex-start;
}

.text-align-center .buttons-box {
    justify-content: center;
}

.text-align-right .buttons-box {
    justify-content: flex-end;
}

/* --- Header elements --- */
section.header-layer.with-image span.mobile-header {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

section.header-layer.with-image span.desktop-header.placement-center {
    background-position: center center !important;
}

section.header-layer.with-image span.desktop-header.placement-top {
    background-position: center top !important;
}

section.header-layer.with-image span.desktop-header.placement-bottom {
    background-position: center bottom !important;
}

@media (min-width: 1024px) {

section.header-layer.with-image span.desktop-header {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
}

section.header-layer.with-image span.mobile-header {
    display: none;
}
}
/* Homepage header (Figma): volledige hoogte, content gecentreerd */
body.home section.header-layer.with-image {
    border-bottom: 0;
    height: calc(100vh - 115px);
    display: flex;
    overflow: hidden;
    align-items: center;
}

/* ===== Intro + cijfers met iconen (KBK werkenbij) ===== */
/* Diagonaal vlak op de achtergrond (Figma 10886-11267) */
.intro-cijfers-laag { position: relative; overflow: hidden; background: #f2f2f2; }
.intro-cijfers-laag::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: #ffffff;
    clip-path: polygon(0 51%, 24.5% 51%, 42.5% 100%, 0 100%);
}
.intro-cijfers-laag .inner { position: relative; z-index: 1; text-align: center; }
.intro-cijfers-laag .ic-intro {
    max-width: 1380px;
    margin: 0 auto;
    text-align: center;
    font-family: 'Zurich BT', sans-serif;
    font-weight: 400;
    font-size: clamp(1.5rem, 3.3vw, 3rem);
    line-height: 1.3;
    color: #002240;
}
.intro-cijfers-laag .ic-intro p { margin: 0; }
.intro-cijfers-laag .ic-cijfers {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: clamp(80px, 13vw, 280px);
    margin-top: clamp(48px, 6vw, 96px);
}
.intro-cijfers-laag .ic-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
    text-align: center;
}
.intro-cijfers-laag .ic-icon { display: flex; align-items: center; justify-content: center; min-height: 66px; }
.intro-cijfers-laag .ic-icon img { width: 66px; height: auto; display: block; }
.intro-cijfers-laag .ic-text { display: flex; flex-direction: column; }
.intro-cijfers-laag .ic-getal,
.intro-cijfers-laag .ic-label {
    font-family: 'Merriweather', serif;
    font-weight: 400;
    font-size: clamp(1.75rem, 2.6vw, 2.5rem);
    line-height: 1.4;
    color: #1A3360;
    margin: 0;
}
.intro-cijfers-laag.font-Licht .ic-intro,
.intro-cijfers-laag.font-Licht .ic-getal,
.intro-cijfers-laag.font-Licht .ic-label { color: #ffffff; }
@media (max-width: 767px){
    .intro-cijfers-laag .ic-cijfers { gap: 40px; }
    .intro-cijfers-laag .ic-item { gap: 24px; }
}
/* ===== Twee blokken (beeld + titel) (KBK werkenbij) ===== */
.twee-blokken-laag .tb-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.twee-blokken-laag .tb-item { position: relative; min-height: clamp(420px, 52vw, 794px); display: flex; align-items: flex-end; padding: 24px; overflow: hidden; }
.twee-blokken-laag .tb-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.twee-blokken-laag .tb-info { position: relative; z-index: 1; width: 100%; background: #ffffff; padding: 32px; }
.twee-blokken-laag .tb-link { display: flex; align-items: center; justify-content: space-between; gap: 40px; text-decoration: none; }
.twee-blokken-laag .tb-title { font-family: 'Merriweather', serif; font-weight: 400; font-size: clamp(1.25rem, 2vw, 2rem); line-height: 1.4; color: #1A3360; margin: 0; min-height: calc(2em * 1.4); display: flex; align-items: center; }
.twee-blokken-laag .tb-cta:before, .twee-blokken-laag .tb-cta:after { width: 48px; height: 48px; background-size: 24px 24px; }
.twee-blokken-laag .tb-cta:before { right: 0; background-position: -26px 50%; }
.twee-blokken-laag .tb-link:hover .tb-cta:before { background-position: 50% 50%; }
.twee-blokken-laag .tb-link:hover .tb-cta:after { background-position: calc(100% + 24px) 50%; }
@media (max-width: 767px){ .twee-blokken-laag .tb-grid { grid-template-columns: 1fr; } .twee-blokken-laag .tb-info { padding: 24px; } }
/* Intro-cijfers mobile-tweaks (24-06) */
@media (max-width: 767px) {
    .intro-cijfers-laag .ic-intro { text-align: left; }
    .intro-cijfers-laag .ic-getal, .intro-cijfers-laag .ic-label { font-size: 20px; }
    .intro-cijfers-laag .ic-cijfers { flex-direction: column; align-items: center; gap: 48px; }
    .intro-cijfers-laag .ic-item { gap: 16px; }
}

/* Volle afbeelding + tekst: knoppen sluiten aan op de tekst */
section.volle-afb-tekst-laag .content-box .button-box { margin-top: 0px; }

/* Diensten: generieke blauw->rode balk onder elk dienst-item (alle schermen) */
.diensten-home .dienst-item { position: relative; }
.diensten-home .dienst-item::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 24px; background: linear-gradient(90deg, #1A3360 0%, #e63422 81%); visibility: visible; z-index: 2; }
.diensten-home .dienst-item > a { position: relative; z-index: 3; }

/* ===== Mobile-redesigns lagen (24-06) ===== */
/* Twee-blokken CTA (desktop: alleen pijl) */
.twee-blokken-laag .tb-cta { display: inline-flex; align-items: center; gap: 16px; }
.twee-blokken-laag .tb-cta__text { display: none; }

/* Homepage header USP's: standaard verborgen (desktop) */
.hdr-usps { display: none; gap: 40px; justify-content: center; margin-top: 40px; }
.hdr-usps .hdr-usp { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.hdr-usps .hdr-usp__num { font-family: 'Merriweather', serif; font-weight: 400; font-size: 24px; line-height: 1.4; color: #fff; }
.hdr-usps .hdr-usp__label { font-family: 'Zurich BT', sans-serif; font-size: 16px; line-height: 1.4; color: #fff; }

@media (max-width: 767px) {
    /* Homepage header USP's blijven ook op mobiel verborgen — de cijfers staan
       vlak eronder in het cijfers-blok, dus dit was dubbel (#5). */

    /* Twee blokken: beeld boven + donkerblauw paneel + Lees meer-knop */
    .twee-blokken-laag .tb-item { min-height: 0; padding: 0; display: block; }
    .twee-blokken-laag .tb-bg { position: relative; inset: auto; height: 278px; display: block; }
    .twee-blokken-laag .tb-info { background: #002240; padding: 24px; }
    .twee-blokken-laag .tb-link { flex-direction: column; align-items: stretch; gap: 24px; }
    .twee-blokken-laag .tb-title { color: #fff; font-size: 20px; }
    .twee-blokken-laag .tb-cta { align-self: flex-start; background: #fff; height: 64px; padding: 12px 12px 12px 24px; }
    .twee-blokken-laag .tb-cta__text { display: inline; color: #1a3360; font-family: 'Zurich BT', sans-serif; font-size: 16px; }
    .twee-blokken-laag .tb-cta:before { right: 12px; }

    /* Diensten: originele sticky-scroll behouden; minder ruimte boven.
       (theme-mobile.css regelt sticky/278px/slash/overlay.) */
    .diensten-scroll-box .dienst-item a .title-element { font-size: 24px !important; }

    /* Volle afbeelding + tekst: schermvullend, beeld als achtergrond, titel boven / tekst+knop onder */
    .volle-afb-tekst-laag { position: relative; min-height: 90vh !important; display: flex !important; padding: 0 !important; overflow: hidden; }
    .volle-afb-tekst-laag::after { display: none !important; }
    .volle-afb-tekst-laag > .image-box.bg-image { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; }
    .volle-afb-tekst-laag .inner { display: flex; width: 100%; max-width: 100%; padding: 72px 24px; position: relative; z-index: 1; }
    .volle-afb-tekst-laag .flexbox-wrapper { width: 100%; display: flex; }
    .volle-afb-tekst-laag .content-box { display: flex; flex-direction: column; flex: 1 1 auto; }
    .volle-afb-tekst-laag .text-box { margin-top: auto; }
}

/* ===== Uitgelichte vacatures (carousel) ===== */
.uitgelichte-vacatures-laag { background: #f2f2f2; padding: clamp(72px, 9vw, 144px) 0; overflow: hidden; --uv-titlefs: clamp(2rem, 4vw, 3.5rem); }
.uitgelichte-vacatures-laag .inner { overflow: visible; }
.uv-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: clamp(40px, 5vw, 88px); }
.uv-titlewrap { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
/* subline uitlijnen onder de titeltekst (onder "Wij"), niet onder de slash:
   inspringen = slashbreedte (.8em van de titel) + de 16px gap in .uv-title. */
.uv-subtitle { margin: 0 0 0 calc(0.8 * var(--uv-titlefs) + 16px); font-family: 'Zurich BT', sans-serif; font-size: clamp(16px, 1.4vw, 20px); line-height: 1.5; color: #1A3360; max-width: 640px; }
.uv-title { display: flex; align-items: center; gap: 16px; margin: 0; font-family: 'Merriweather', serif; font-weight: 400; font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.2; color: #002240; }
.uv-title strong { font-weight: 700; }
.uv-title .vac-slash { height: 0.9em; }
.uv-allbtn { display: inline-flex; align-items: center; gap: 16px; flex: 0 0 auto; height: 64px; padding: 12px 12px 12px 24px; background: #002240; color: #fff; text-decoration: none; font-family: 'Zurich BT', sans-serif; font-size: 16px; transition: background-color .2s ease; }
.uv-allbtn:hover { background: #0b2d4f; }
.uv-allbtn--bottom { display: none; }

/* carousel breekt uit de .inner naar volle viewport-breedte */
.uv-carousel { position: relative; left: 50%; right: 50%; width: 100vw; margin-left: -50vw; margin-right: -50vw; }
.uv-track { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x proximity; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; padding-top: 0; padding-bottom: 4px; padding-left: max(24px, calc(50vw - 894px)); padding-right: max(24px, calc(50vw - 894px)); scroll-padding-left: max(24px, calc(50vw - 894px)); }
.uv-track::-webkit-scrollbar { display: none; }
.uv-card { flex: 0 0 clamp(279px, 40vw, 580px); scroll-snap-align: start; }

.uv-nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 40px; }
.uv-dots { display: flex; align-items: center; gap: 18px; }
.uv-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: #fff; cursor: pointer; }
.uv-dot.is-active { background: transparent; border: 2px solid #002240; }
.uv-arrows { display: flex; gap: 9px; }
.uv-arrow { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 12px; border: 0; cursor: pointer; }
.uv-prev { background: #fff; }
.uv-next { background: #002240; }

@media (max-width: 767px) {
    .uitgelichte-vacatures-laag { padding: 72px 0; --uv-titlefs: 32px; }
    .uv-title { font-size: 32px; }
    .uv-allbtn--top { display: none; }
    .uv-allbtn--bottom { display: inline-flex; width: fit-content; justify-content: center; margin-top: 40px; }
    .uv-card { flex: 0 0 279px; }
}

/* Uitgelichte-vacatures BINNEN een actueel-artikel (rij 38): het blok is als
   volledige-breedte-sectie gebouwd. De actueel-contentkolom is smaller, en
   `.actueel-content > div { width:100%; flex-basis:100% }` (theme-mobile.css,
   specificiteit 0,1,1) hield het blok op kolombreedte -> grijze achtergrond met
   wit links/rechts (ook op groot scherm) en een witte strook eronder.
   Oplossing: het blok van rand tot rand laten lopen (100vw full-bleed) zodat de
   grijze achtergrond doorloopt; de brede kaarten en 894px-uitlijning van de
   originele sectie blijven behouden.
   - Selector `.actueel-content > .actueel-uitgelicht` (0,2,0) verslaat de
     theme-regel, anders wint width:100% en blijft het kolombreed.
   - `flex: 0 0 100vw` zet flex-shrink UIT; anders krimpt het blok als flex-item
     terug naar de kolombreedte (dat was de restfout op mobiel).
   - left:50% + margin-left:-50vw centreert de 100vw-breedte.
   - `.single-actueel { overflow-x: clip }` vangt de phantom horizontale scroll
     van de uitbraak op (verticaal scrollen blijft gewoon werken). */
.single-actueel { overflow-x: clip; }
.actueel-content > .actueel-uitgelicht { flex: 0 0 100vw; width: 100vw; max-width: none; position: relative; left: 50%; right: auto; margin-left: -50vw; margin-right: 0; }
.actueel-uitgelicht .uitgelichte-vacatures-laag { padding: clamp(56px, 6vw, 96px) 0; --uv-titlefs: clamp(2rem, 4vw, 3.5rem); }
.actueel-uitgelicht .uv-head { margin-bottom: clamp(40px, 5vw, 72px); }
.actueel-uitgelicht .uv-title { font-size: clamp(2rem, 4vw, 3.5rem); }
/* ---------------------------------------------------------------------------
   Overzicht-laag filter (projecten / actueel)
   Vervangt de Search & Filter Pro-UI (plugin verwijderd juni 2026). Houdt de
   bestaande .searchandfilter-look aan: Merriweather-kop, navy randen.
   --------------------------------------------------------------------------- */
.ov-filter { display: flex; flex-direction: column; gap: 16px; }

/* Horizontale categorie-tegels + zoeken (rij 5/6) */
.ov-filter.ov-filter--tiles { display: block; width: 100%; max-width: none; }
.ov-filter__label {
    display: block;
    font-family: 'Merriweather';
    font-size: 20px;
    color: #002240;
    margin-bottom: 14px;
}
.ov-filter__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
}
.ov-tiles { display: flex; flex-wrap: wrap; gap: 12px; flex: 1 1 auto; }
.ov-tile {
    border: 1px solid #002240;
    background: #fff;
    color: #002240;
    font-family: "Zurich BT", sans-serif;
    font-size: 16px;
    line-height: 1;
    padding: 14px 20px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.ov-tile:hover { background: rgba(0, 34, 64, .08); }
.ov-tile.is-active,
.ov-tile.is-active:hover { background: #002240; color: #fff; }
.ov-filter--tiles .ov-filter__field--search { width: 300px; max-width: 100%; flex: 0 0 auto; }
@media (max-width: 700px) {
    .ov-filter__bar { flex-direction: column; align-items: stretch; }
    .ov-filter--tiles .ov-filter__field--search { width: 100%; }
}
/* Meerdere categorielabels op een kaart naast elkaar i.p.v. gestapeld (rij 5) */
.nieuws-meta-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; margin-bottom: 16px; }
.nieuws-meta-top .tag:not(.content-box) { margin-bottom: 0; }
/* Datum + "Lees bericht" onderaan de kaart uitlijnen i.p.v. loze ruimte onderin (rij 5) */
.nieuws-item > a { display: flex; flex-direction: column; height: 100%; }
.nieuws-item > a .nieuws-content { display: flex; flex-direction: column; flex: 1 1 auto; }
.nieuws-content h3 { margin-bottom: 20px; }
.nieuws-content .nieuws-meta-bottom { margin-top: auto; }
.ov-filter h4 {
    font-size: 24px;
    font-family: 'Merriweather';
    color: #002240;
    font-weight: 400;
    margin-bottom: 0;
    padding: 0;
}
.ov-filter__field { position: relative; display: block; width: 100%; }
.ov-filter__search,
.ov-filter__select {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #002240;
    background: #fff;
    color: #002240;
    font-family: "Zurich BT", sans-serif;
    font-size: 16px;
    line-height: 140%;
    padding: 16px;
    border-radius: 0;
}
.ov-filter__search { padding-left: 52px; }
.ov-filter__field--search:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 16px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='11' cy='11' r='7' stroke='%23002240' stroke-width='2'/%3E%3Cpath d='M20 20l-4-4' stroke='%23002240' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center center;
}
.ov-filter__select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 48px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23002240' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
}
.ov-filter__search:focus,
.ov-filter__select:focus { outline: 2px solid #002240; outline-offset: 2px; }
.ov-filter__reset {
    align-self: flex-start;
    border: 0;
    background: none;
    padding: 0;
    color: #002240;
    font-family: "Zurich BT", sans-serif;
    font-size: 16px;
    text-decoration: underline;
    cursor: pointer;
}
.ov-filter__reset[hidden] { display: none; }
.overzicht-laag .geen-items { width: 100%; }
.overzicht-laag .geen-items[hidden] { display: none; }

@media (min-width: 1180px) {
    .ov-filter { max-width: 360px; }
}

/* ===== Vestigingen (kaartjes) + Recruiters lagen (#6) ===== */
/* Breedte = site-standaard (.inner: max-width 1836px + 24px padding). Geen eigen inner. */
.vk-title, .rl-title { display: flex; align-items: center; gap: 16px; margin: 0 0 16px; font-family: 'Merriweather', serif; font-weight: 400; font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.2; color: #002240; }
.vk-title .vac-slash, .rl-title .vac-slash { height: 0.9em; }
.vk-intro, .rl-intro { margin: 0 0 40px; max-width: 720px; font-family: 'Zurich BT', sans-serif; font-size: clamp(16px, 1.4vw, 20px); line-height: 1.5; color: #1A3360; }

.vk-grid, .rl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }

/* Kaart-basis (gedeeld) */
.vk-card, .rl-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #e2e8f0; overflow: hidden; }
.vk-card__media, .rl-card__photo { display: block; width: 100%; aspect-ratio: 3 / 2; overflow: hidden; background: #eef1f5; }
.vk-card__media img, .rl-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vk-card__body, .rl-card__body { display: flex; flex-direction: column; gap: 10px; padding: 24px; flex: 1 1 auto; }
.vk-card__name, .rl-card__name { margin: 0; font-family: 'Merriweather', serif; font-weight: 700; font-size: 20px; line-height: 1.3; color: #1A3360; }
.vk-card__addr, .rl-card__role { margin: 0; font-family: 'Zurich BT', sans-serif; font-size: 16px; line-height: 1.5; color: #4a5568; }
.vk-card__contact, .rl-card__contact { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.vk-card__link, .rl-card__link { display: inline-flex; align-items: center; gap: 10px; color: #1A3360; text-decoration: none; font-family: 'Zurich BT', sans-serif; font-size: 15px; }
.vk-card__link:hover, .rl-card__link:hover { text-decoration: underline; }
.vk-card__ico, .rl-card__ico { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; background: #eef1f5; color: #1A3360; }
.rl-card__ico { background: transparent; width: auto; height: auto; border-radius: 0; color: #1A3360; }
.rl-card__wa .rl-card__ico { background: transparent; color: #fff; }
.vk-card__btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 12px; margin-top: auto; padding: 12px 20px; background: #1A3360; color: #fff; text-decoration: none; font-family: 'Zurich BT', sans-serif; font-size: 15px; transition: background-color .2s ease; }
.vk-card__btn:hover { background: #24406f; }
.rl-card__wa { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: #25D366; color: #fff; text-decoration: none; font-family: 'Zurich BT', sans-serif; font-size: 15px; font-weight: 600; padding: 12px 20px; margin-top: 6px; align-self: flex-start; }
.rl-card__wa:hover { background: #1da851; text-decoration: none; }

/* Recruiters: horizontale kaart met staande foto links (consistente recruiter-vorm,
   gelijk aan de CTA-/bedankt-kaart). Accentbalk als top-strip over de volle breedte. */
.rl-card { position: relative; flex-direction: row; align-items: stretch; }
.rl-card__photo { width: 150px; flex: 0 0 150px; aspect-ratio: auto; align-self: stretch; }
.rl-card__photo img { height: 100%; }
.rl-card__body { justify-content: center; }
.rl-grid { grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); }
.rl-grid--compact { grid-template-columns: 1fr; gap: 20px; }
/* Recruiter-kaart in de vacature-sticky (smalle kolom): compacter, geen dubbele rand */
.vacd-card__reccard { border: 0; margin-top: 4px; }
.vacd-card__reccard .rl-card__photo { width: 112px; flex: 0 0 112px; }
.vacd-card__reccard .rl-card__body { padding: 0 0 0 18px; gap: 8px; }
.vacd-card__reccard .rl-card__wa { padding: 11px 16px; font-size: 14px; }

@media (max-width: 600px) {
    .vk-grid, .rl-grid { grid-template-columns: 1fr; }
    .rl-card__photo { width: 104px; flex: 0 0 104px; }
    .rl-card__body { padding: 16px; }
    .rl-card__link, .rl-card__wa { font-size: 13.5px; }
    .rl-card__ico { width: 26px; height: 26px; }
}

/* ===== Compacte recruiters/vestigingen in de contact-content-laag (#6) ===== */
/* Contact-content mét compacte widgets: twee ECHTE kolommen (links titel+adres, rechts
   rechter-tekst+widgets), elk verticaal gestapeld. Specificiteit (0,5,0) verslaat de
   thema-regel (...flexbox-wrapper .content-box{flex-row;nowrap}, 0,4,0). */
.contact-content-laag .inner .flexbox-wrapper.cc-2col { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 48px; }
.contact-content-laag .inner .flexbox-wrapper.cc-2col .content-box { display: flex; flex-direction: column; flex: 1 1 320px; min-width: 0; }
.contact-content-laag .inner .flexbox-wrapper.cc-2col .content-box:nth-of-type(2) { margin-top: 0; border-top: 0; padding-top: 0; }
/* Ruimte tussen titel en adres-tekst in de linkerkolom. */
.contact-content-laag .inner .flexbox-wrapper.cc-2col .content-box:first-child .text-box { margin-top: 40px; }
.cc-extra { display: flex; flex-direction: column; gap: 32px; margin-top: 32px; }
.cc-extra .cc-compact { margin-top: 0; }
.cc-compact { margin-top: 32px; }
.cc-compact__title { margin: 0 0 16px; font-family: 'Merriweather', serif; font-weight: 700; font-size: 18px; color: #1A3360; }
.cc-reclist, .cc-vestlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }

/* Recruiters compact: kleine avatar + naam/functie + inline contact */
.cc-rec { display: flex; align-items: center; gap: 14px; }
.cc-rec__avatar { flex: 0 0 auto; width: 48px; height: 60px; overflow: hidden; background: #eef1f5; }
.cc-rec__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cc-rec__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cc-rec__name { font-family: 'Zurich BT', sans-serif; font-weight: 600; font-size: 16px; color: #1A3360; }
.cc-rec__role { font-family: 'Zurich BT', sans-serif; font-size: 14px; color: #4a5568; }
.cc-rec__contact { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 2px; }
.cc-rec__contact a { font-family: 'Zurich BT', sans-serif; font-size: 14px; color: #1899d6; text-decoration: none; }
.cc-rec__contact a:hover { text-decoration: underline; }

/* Vestigingen compact: naam + adres + telefoon */
.cc-vest { display: flex; flex-direction: column; gap: 2px; padding-left: 16px; border-left: 3px solid #1899d6; }
.cc-vest__name { font-family: 'Zurich BT', sans-serif; font-weight: 600; font-size: 16px; color: #1A3360; }
.cc-vest__addr { font-family: 'Zurich BT', sans-serif; font-size: 14px; line-height: 1.5; color: #4a5568; }
.cc-vest__tel { font-family: 'Zurich BT', sans-serif; font-size: 14px; color: #1899d6; text-decoration: none; margin-top: 2px; }
.cc-vest__tel:hover { text-decoration: underline; }

/* ============================================================================
   09-09 — Klantvragen Nicole
   ============================================================================ */

/* [1] Volle-afbeelding + tekst: hoogte losgekoppeld van de viewport.
   Was 90vh (<=767px), 100vh (iPad gecentreerd), calc(100vh-115px) (desktop) en
   clamp(480px,62vh,760px): het blok rekte mee met de schermhoogte en oogde daardoor
   op sommige devices uit proportie. Nu een vaste px-ondergrens per breakpoint; langere
   content groeit gewoon mee. !important + hogere specificiteit overrulen de oude regels. */
section.volle-afb-tekst-laag { min-height: 460px !important; }
@media (min-width: 768px)  { section.volle-afb-tekst-laag { min-height: 560px !important; } }
@media (min-width: 1180px) { section.volle-afb-tekst-laag { min-height: 680px !important; } }
section.volle-afb-tekst-laag.Content.gecentreerd { height: auto !important; }

/* [2] Verhaalkaarten (Collega's aan het woord): tekstblokken per RIJ even hoog als de
   hoogste van díe rij (niet globaal). Onder 1180px doet flexbox dat al vanzelf (de kaarten
   in een rij rekken naar de hoogste, en .nieuws-content vult met flex:1). Boven 1180px ligt
   de tekst als absoluut wit blok over het beeld; die kan CSS niet per rij gelijktrekken,
   dat doet een klein script (equalizeNieuwsRows in pagebuilder-overzicht.php). Geen globale
   min-height meer, dus geen onnodig hoge blokken. */

/* ============================================================================
   10-09 — Contactpagina naar Figma (3 secties: intro, recruiters, formulier)
   ============================================================================ */
/* 1. Intro: titel links + tekst rechts, in een omkaderd grijs blok (witte marge eromheen) */
.cc-intro-laag { background: #fff; }
.cc-intro { display: grid; grid-template-columns: minmax(0,5fr) minmax(0,6fr); gap: 40px 64px; align-items: center; background: #f2f2f2; padding: clamp(32px, 4vw, 56px); }
.cc-intro__title .title-element { font-family: 'Merriweather', serif; font-weight: 400; font-size: clamp(1.8rem, 3vw, 2.75rem); line-height: 1.25; color: #1A3360; margin: 0; padding-left: 0; display: flex; gap: 16px; }
.cc-intro__text { font-family: 'Zurich BT', sans-serif; font-size: 16px; line-height: 1.6; color: #3a4250; }
.cc-intro__text p { margin: 0 0 1em; }
.cc-intro__text p:last-child { margin-bottom: 0; }

/* 2. Recruiters: kaarten naast elkaar (grijs), staande foto links */
.cc-recruiters-laag { background: #fff; padding: 72px 0; }
.cc-reccards { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; }
.cc-reccard { display: flex; background: #f2f2f2; }
.cc-reccard__photo { flex: 0 0 42%; max-width: 230px; overflow: hidden; }
.cc-reccard__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cc-reccard__body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 32px; }
.cc-reccard__name { font-family: 'Merriweather', serif; font-weight: 400; font-size: 22px; line-height: 1.2; color: #1A3360; margin: 0; }
.cc-reccard__role { font-family: 'Zurich BT', sans-serif; font-size: 14px; color: #1A3360; margin: 4px 0 18px; }
.cc-reccard__contact { display: flex; flex-direction: column; gap: 10px; }
.cc-reccard__link { display: inline-flex; align-items: center; gap: 10px; font-family: 'Zurich BT', sans-serif; font-size: 15px; color: #1A3360; text-decoration: none; }
.cc-reccard__link:hover { text-decoration: underline; }
.cc-ico { display: inline-flex; flex: 0 0 auto; color: #1A3360; }

/* 3. Stel je vraag: formulier links + contactgegevens rechts */
.cc-form-laag { background: #fff; }
.cc-form { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr); gap: 40px 64px; align-items: start; }
.cc-form__title { font-family: 'Merriweather', serif; font-weight: 400; font-size: clamp(1.6rem, 2.4vw, 2rem); color: #1A3360; margin: 0 0 28px; padding-left: 0; display: flex; gap: 16px; align-items: center; }
.cc-form__asidetitle { font-family: 'Merriweather', serif; font-weight: 400; font-size: 22px; color: #1A3360; margin: 0 0 20px; }
.cc-gegevens { font-family: 'Zurich BT', sans-serif; font-size: 15px; line-height: 1.5; color: #1A3360; display: flex; flex-direction: column; gap: 6px; }
.cc-gegevens__name { font-weight: 700; margin: 0; }
.cc-gegevens__addr { margin: 0 0 12px; color: #3a4250; }
.cc-gegevens__link { display: inline-flex; align-items: center; gap: 10px; color: #1A3360; text-decoration: none; }
.cc-gegevens__link:hover { text-decoration: underline; }

/* Formuliervelden strak (Gravity Forms binnen de contact-laag) */
.cc-form__fields input[type=text], .cc-form__fields input[type=email], .cc-form__fields input[type=tel],
.cc-form__fields textarea, .cc-form__fields select {
    width: 100%; box-sizing: border-box; border: 1px solid #d5d9e0; background: #fff; padding: 14px 16px;
    font-family: 'Zurich BT', sans-serif; font-size: 15px; color: #1A3360; border-radius: 0;
}
.cc-form__fields textarea { min-height: 150px; resize: vertical; }
.cc-form__fields label { font-family: 'Zurich BT', sans-serif; font-size: 14px; color: #1A3360; }
/* Gravity Form: eigen titel verbergen (we hebben al "Stel je vraag") */
.cc-form__fields .gform_heading { display: none; }
/* Veldlabels niet vet (GF maakt ze standaard bold) */
.cc-form__fields .gfield_label { font-weight: 400 !important; }
/* Akkoord-checkbox weer zichtbaar (thema verbergt de native checkbox) */
.cc-form__fields input[type="checkbox"] {
    -webkit-appearance: checkbox !important; appearance: auto !important;
    width: 18px !important; height: 18px !important; min-width: 18px; opacity: 1 !important;
    position: static !important; margin: 2px 8px 0 0 !important; accent-color: #1A3360; clip: auto !important;
}
/* Verzendknop: echte <button> met de site-brede knopstijl (navy + pijl-box, zie .has-arrow-hover) */
.cc-submit {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 16px; height: 60px;
    background: #1A3360; color: #fff; border: 0; cursor: pointer;
    font-family: 'Zurich BT', sans-serif; font-size: 16px; padding: 12px 12px 12px 24px;
}

@media (max-width: 991px) {
    .cc-intro, .cc-form { grid-template-columns: 1fr; }
    .cc-reccards { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .cc-reccard { flex-direction: column; }
    .cc-reccard__photo { flex-basis: auto; max-width: none; height: 240px; }
}

/* ============================================================================
   16-09 — HR-feedback: minder witruimte tussen intro en volgend blok
   ============================================================================ */
/* Een intro/content-laag ("Overal ruimte") die direct wordt gevolgd door een FAQ- of
   volle-afbeelding-blok kreeg 144px onderruimte -> grote lege ruimte (o.a. Veelgestelde
   vragen en de vakgebied-pagina's). Terugbrengen zodat de 2e sectie eerder in beeld komt. */
.content-laag.Overal.ruimte:has(+ .faq-laag),
.content-laag.Overal.ruimte:has(+ .volle-afb-tekst-laag) { padding-bottom: 56px; }

/* --- WYSIWYG-koppen in content-lagen als echte koppen tonen (24-09) ---
   De reset neutraliseert kopgroottes; een H2/H3 die de klant in de tekst-editor
   zet, erfde daardoor de bodytekst (20px, Zurich) en oogde niet als kop. Binnen
   .text-box zetten we de koppen expliciet terug in de huisstijl (Merriweather),
   met kleur = de tekstkleur van de laag (dus goed op licht én donker). Raakt
   alleen de WYSIWYG-inhoud, niet .title-element of de header-laag. */
.text-box :is(h1,h2,h3,h4,h5,h6){ font-family:'Merriweather',serif; color:inherit; font-weight:700; line-height:1.25; }
.text-box h1{ font-size:clamp(1.9rem,3vw,2.5rem); }
.text-box h2{ font-size:clamp(1.6rem,2.4vw,2rem); }
.text-box h3{ font-size:clamp(1.35rem,2vw,1.6rem); }
.text-box h4{ font-size:clamp(1.15rem,1.6vw,1.35rem); }
.text-box h5{ font-size:1.1rem; }
.text-box h6{ font-size:1rem; }
.text-box strong, .text-box b{ font-weight:700; }
/* "Grote tekst" (lead, 32px): koppen iets groter zodat ze boven de lead uitkomen. */
.text-box.grote_tekst h2{ font-size:clamp(2rem,3.2vw,2.6rem); }
.text-box.grote_tekst h3{ font-size:clamp(1.6rem,2.4vw,2rem); }