/* =========================================================
   LTB Connect - vacaturesite
   1-op-1 afgeleid van ltbconnect-wp (tokens.css / base.css / components.css)
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600..800&family=Figtree:wght@400..700&display=swap');

:root{
  --c-navy:#062349; --c-berg-donker:#143A62; --c-berg-midden:#20496E; --c-berg-licht:#396890;
  --c-staal:#4C8DBC; --c-oranje:#CA6B1A; --c-oranje-actie:#B05A12; --c-oranje-hover:#8F4A0F;
  --c-oranje-tekst:#8F4A0F; --c-oranje-licht:#F0B47E; --c-staal-tekst:#2F6E9C; --c-wit:#FFFFFF;
  --c-tint:#EEF4F9; --c-tint-sterk:#DCE8F3; --c-tint-oranje:#FBE3CC; --c-tint-oranje-tekst:#7A3E0A;
  --c-ink:var(--c-navy); --c-ink-zacht:#4C5A6E; --c-ink-op-donker:#C9D6E4; --c-rand:#D5DEE8;
  --c-rand-op-donker:rgba(201,214,228,.22); --c-rand-veld:#6B7A8E;
  --tekst:var(--c-ink); --tekst-zacht:var(--c-ink-zacht); --link:var(--c-staal-tekst);
  --actie:var(--c-oranje-actie); --actie-hover:var(--c-oranje-hover); --focus:var(--c-staal);
  --font-kop:"Bricolage Grotesque","Avenir Next",system-ui,sans-serif;
  --font-tekst:"Figtree","Avenir Next",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fs-xs:.875rem; --fs-s:1rem; --fs-body:clamp(1.0625rem,1.01rem + .25vw,1.125rem);
  --fs-lead:clamp(1.1875rem,1.1rem + .4vw,1.375rem); --fs-h4:clamp(1.25rem,1.15rem + .45vw,1.5rem);
  --fs-h3:clamp(1.5rem,1.3rem + .85vw,1.875rem); --fs-h2:clamp(1.875rem,1.5rem + 1.65vw,2.75rem);
  --fs-h1:clamp(2.25rem,1.65rem + 2.7vw,3.75rem);
  --fw-tekst:400; --fw-tekst-medium:500; --fw-tekst-bold:700; --fw-kop-s:700; --fw-kop-l:800;
  --lh-display:1.02; --lh-kop:1.1; --lh-kop-s:1.25; --lh-tekst:1.6; --lh-krap:1.4;
  --ls-display:-.025em; --ls-kop:-.015em;
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.25rem; --s-6:1.5rem; --s-8:2rem;
  --s-10:2.5rem; --s-12:3rem; --s-16:4rem; --s-20:5rem; --s-24:6rem; --s-32:8rem;
  --s-sectie:clamp(4rem,2.5rem + 6.5vw,8rem); --s-gutter:clamp(1rem,.5rem + 2.2vw,2rem);
  --container-breed:85rem; --header-h:4.5rem; --header-h-mobiel:4rem; --klikvlak-min:2.75rem;
  --knop-h:3rem; --knop-h-groot:3.5rem; --r-s:.5rem; --r-m:1rem; --r-pill:999px; --r-foto:1rem 1rem 1rem 4rem;
  --onderstreep:2px; --schaduw-zweef:0 18px 40px -20px rgba(6,35,73,.35);
  --dur-1:150ms; --dur-2:250ms; --dur-3:400ms; --dur-in:600ms;
  --ease-uit:cubic-bezier(.22,1,.36,1); --ease-in-uit:cubic-bezier(.65,0,.35,1);
  --beweging-in:12px; --beweging-hover:6px; --stagger:80ms; --boog-dikte:7;
  --logo-wit:url('https://ltbconnect.recruition.nl/upload/files/1/logo-wit.png');
  --logo-kleur:url('https://ltbconnect.recruition.nl/upload/files/1/logo-kleur.png');
}

html{scroll-padding-top:calc(var(--header-h) + var(--s-4))}
body{
  background:var(--c-wit); color:var(--tekst);
  font-family:var(--font-tekst); font-size:var(--fs-body); font-weight:var(--fw-tekst); line-height:var(--lh-tekst);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:clip;
}
h1,h2,h3,h4{font-family:var(--font-kop);font-optical-sizing:auto;text-wrap:balance}
::selection{background:var(--c-tint-oranje);color:var(--c-navy)}

/* ================= HEADER (site-header) ================= */
#nav-main{
  --h-bg:var(--c-navy); --h-tekst:var(--c-wit);
  position:sticky; top:0; z-index:200;
  background:var(--h-bg) !important; color:var(--h-tekst);
  padding:0; min-height:var(--header-h-mobiel); box-shadow:none;
  transition:background-color var(--dur-3) var(--ease-uit),box-shadow var(--dur-3) var(--ease-uit),color var(--dur-3) var(--ease-uit);
  font-family:var(--font-tekst);
}
#nav-main.is-gescrold{--h-bg:var(--c-wit); --h-tekst:var(--c-navy); box-shadow:var(--schaduw-zweef)}
#nav-main > .container-fluid{
  display:flex; flex-wrap:nowrap; align-items:center; justify-content:space-between; gap:var(--s-4);
  width:100%; max-width:calc(var(--container-breed) + 2 * var(--s-gutter));
  margin-inline:auto; padding-inline:var(--s-gutter); min-height:var(--header-h-mobiel);
}
#nav-main .navbar-brand{flex:none;margin:0;padding:0;display:block;line-height:0}
#nav-main .navbar-logo{content:var(--logo-wit); width:auto !important; height:var(--s-8); max-width:none; transition:opacity var(--dur-3) var(--ease-uit)}
#nav-main.is-gescrold .navbar-logo{content:var(--logo-kleur)}
@media (min-width:30em){#nav-main .navbar-logo{height:var(--s-10)}}

#nav-main .nav-link{
  position:relative; padding:var(--s-3) !important; color:var(--h-tekst) !important;
  font-family:var(--font-tekst); font-size:var(--fs-s); font-weight:var(--fw-tekst-medium); line-height:1;
  text-decoration:none; background:none; transition:color var(--dur-3) var(--ease-uit);
}
#nav-main .nav-link::after{
  content:""; position:absolute; left:var(--s-3); right:var(--s-3); bottom:var(--s-1); height:var(--onderstreep);
  background:var(--c-oranje); transform:scaleX(0); transform-origin:left; transition:transform var(--dur-3) var(--ease-uit);
}
#nav-main .nav-item:not(:last-child) .nav-link:hover::after{transform:scaleX(1)}

/* Laatste menu-item = knop knop--primair knop--compact */
#nav-main .navbar-nav .nav-item:last-child .nav-link{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-3);
  min-height:var(--klikvlak-min); padding:var(--s-3) var(--s-5) !important;
  border:2px solid transparent; border-radius:var(--r-pill);
  background:var(--actie); color:var(--c-wit) !important;
  font-size:var(--fs-s); font-weight:var(--fw-tekst-bold); line-height:1; white-space:nowrap;
  transition:background-color var(--dur-1) var(--ease-uit),color var(--dur-1) var(--ease-uit),border-color var(--dur-1) var(--ease-uit),transform var(--dur-2) var(--ease-uit);
}
#nav-main .navbar-nav .nav-item:last-child .nav-link::after{display:none}
#nav-main .navbar-nav .nav-item:last-child .nav-link:hover{background:var(--actie-hover);transform:translateY(-2px)}
#nav-main .navbar-nav .nav-item:last-child .nav-link:active{background:var(--actie-hover);transform:none}

/* Desktop: logo | menu (gecentreerd) | knop */
@media (min-width:64em){
  #nav-main,#nav-main > .container-fluid{min-height:var(--header-h)}
  #nav-main > .container-fluid{gap:var(--s-8)}
  #nav-main .navbar-logo{height:var(--s-12)}
  #nav-main .navbar-collapse{display:flex !important; flex:1 1 0%; flex-basis:auto}
  #nav-main .navbar-nav{flex:1; display:flex; flex-direction:row; align-items:center; gap:var(--s-1); margin:0 !important}
  #nav-main .navbar-nav .nav-item:first-child{margin-left:auto}
  #nav-main .navbar-nav .nav-item:nth-last-child(2){margin-right:auto}
  #nav-main .navbar-toggler{display:none}
}

/* Mobiel: menuknop + volledig scherm navy menu */
@media (max-width:63.99em){
  #nav-main .navbar-toggler{
    order:3; display:inline-flex; align-items:center; gap:var(--s-2); min-height:var(--klikvlak-min);
    padding:var(--s-2) var(--s-4); border:2px solid currentColor; border-radius:var(--r-pill);
    background:transparent; color:var(--h-tekst); font-weight:var(--fw-tekst-bold); font-size:var(--fs-s); cursor:pointer;
  }
  #nav-main .navbar-toggler::before{content:"Menu"; font-family:var(--font-tekst); line-height:1}
  #nav-main .navbar-toggler span{display:none}
  #nav-main .navbar-collapse{
    position:fixed; inset:0; z-index:300; display:flex !important; flex-direction:column; justify-content:center;
    height:100vh !important; padding:calc(var(--header-h-mobiel) + var(--s-8)) var(--s-gutter) var(--s-12);
    background:var(--c-navy); color:var(--c-wit); overflow-y:auto;
    visibility:hidden; opacity:0; transform:translateY(calc(-1 * var(--s-4)));
    transition:opacity var(--dur-3) var(--ease-in-uit),transform var(--dur-3) var(--ease-in-uit),visibility 0s linear var(--dur-3);
  }
  #nav-main .navbar-collapse.show,#nav-main .navbar-collapse.collapsing{visibility:visible; opacity:1; transform:none; transition:opacity var(--dur-3) var(--ease-in-uit),transform var(--dur-3) var(--ease-in-uit),visibility 0s}
  #nav-main .navbar-nav{display:grid; gap:var(--s-2); margin:0}
  #nav-main .navbar-nav .nav-link{display:inline-block; padding:var(--s-2) 0 !important; color:var(--c-wit) !important; font-family:var(--font-kop); font-size:var(--fs-h3); font-weight:var(--fw-kop-s); line-height:var(--lh-kop)}
  #nav-main .navbar-nav .nav-link::after{display:none}
  #nav-main .navbar-nav .nav-item:last-child{margin-top:var(--s-6)}
  #nav-main .navbar-nav .nav-item:last-child .nav-link{font-family:var(--font-tekst);font-size:var(--fs-s);padding:var(--s-3) var(--s-5) !important}
  #nav-main .navbar-toggler{position:relative; z-index:301}
  #nav-main .navbar-toggler:not(.collapsed){color:var(--c-wit)}
  #nav-main .navbar-toggler:not(.collapsed)::before{content:"Sluiten"}
}

/* ================= Gedeelde componenten ================= */
.ltb{font-family:var(--font-tekst); color:var(--tekst)}
.ltb *,.ltb *::before,.ltb *::after{box-sizing:border-box}
.ltb h1,.ltb h2,.ltb h3,.ltb h4{margin:0; font-family:var(--font-kop); color:inherit; text-wrap:balance; font-optical-sizing:auto}
.ltb h2{font-size:var(--fs-h2); font-weight:var(--fw-kop-l); line-height:var(--lh-kop); letter-spacing:var(--ls-kop)}
.ltb p{margin:0; max-width:65ch; text-wrap:pretty}
.ltb ul{list-style:none; margin:0; padding:0}
.ltb-container{width:100%; max-width:calc(var(--container-breed) + 2 * var(--s-gutter)); margin-inline:auto; padding-inline:var(--s-gutter)}

.ltb-knop{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-3);
  min-height:var(--knop-h); padding:var(--s-4) var(--s-6); border:2px solid transparent; border-radius:var(--r-pill);
  font-family:var(--font-tekst); font-size:var(--fs-s); font-weight:var(--fw-tekst-bold); line-height:1; text-decoration:none !important; cursor:pointer;
  transition:background-color var(--dur-1) var(--ease-uit),color var(--dur-1) var(--ease-uit),border-color var(--dur-1) var(--ease-uit),transform var(--dur-2) var(--ease-uit);
}
.ltb-knop--groot{min-height:var(--knop-h-groot); padding-inline:var(--s-8); font-size:var(--fs-body)}
.ltb-knop--primair{background:var(--actie); color:var(--c-wit) !important}
.ltb-knop--primair:hover{background:var(--actie-hover); transform:translateY(-2px)}
.ltb-knop--primair:active{background:var(--actie-hover); transform:none}
.ltb-knop--secundair{background:transparent; color:var(--t-tekst,var(--c-navy)) !important; border-color:currentColor}
.ltb-knop--secundair:hover{background:var(--t-tekst,var(--c-navy)); color:var(--t-bg,#fff) !important; border-color:var(--t-tekst,var(--c-navy))}
.ltb-knop--op-donker{background:var(--c-wit); color:var(--c-navy) !important}
.ltb-knop--op-donker:hover{background:var(--c-tint)}
.ltb-knop--compact{min-height:var(--klikvlak-min); padding:var(--s-3) var(--s-5)}
.ltb-knop__pijl,.ltb-actielink__pijl{flex:none; transition:transform var(--dur-2) var(--ease-uit)}
.ltb-knop:hover .ltb-knop__pijl{transform:translateX(var(--s-1))}
.ltb-actielink{display:inline-flex; align-items:center; gap:var(--s-2); min-height:var(--klikvlak-min); color:var(--t-accent) !important; font-weight:var(--fw-tekst-bold); text-decoration:none !important}
.ltb-actielink:hover{text-decoration:underline !important; text-decoration-thickness:var(--onderstreep) !important; text-underline-offset:.25em}
.ltb-actielink:hover .ltb-actielink__pijl{transform:translateX(var(--beweging-hover))}

/* ================= HERO (paginakop zoals /kandidaten/) ================= */
.ltb-hero{
  --t-bg:var(--c-navy); --t-tekst:var(--c-wit); --t-zacht:var(--c-ink-op-donker); --t-accent:var(--c-oranje-licht);
  --t-berg-1:var(--c-berg-donker); --t-berg-2:var(--c-berg-midden); --boog-vlak:var(--c-tint);
  position:relative; overflow:hidden; isolation:isolate; padding-block:var(--s-8) var(--s-16);
  background:var(--t-bg); color:var(--t-tekst);
}
.ltb-hero__berg{position:absolute; right:-25%; bottom:0; z-index:-1; width:140%; height:70%; animation:ltb-berg-in calc(2 * var(--dur-in)) var(--ease-uit) both}
.ltb-hero__berg .berg--licht{fill:var(--t-berg-1)} .ltb-hero__berg .berg--midden{fill:var(--t-berg-2)}
.ltb-hero__inner{display:grid; gap:var(--s-5)}
.ltb-hero__foto{position:relative; order:-1; margin:0; width:clamp(6rem,26vw,11rem); animation:ltb-foto-in calc(1.4 * var(--dur-in)) var(--ease-uit) both}
.ltb-hero__img{display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:50% 12%; border-radius:var(--r-foto); background:var(--t-berg-1)}
.ltb .ltb-hero__titel{font-size:var(--fs-h1); font-weight:var(--fw-kop-l); line-height:var(--lh-display); letter-spacing:var(--ls-display); max-width:15ch}
.ltb .ltb-hero__subkop{margin-top:var(--s-5); font-size:var(--fs-lead); line-height:var(--lh-tekst); color:var(--t-zacht); max-width:36ch}
.ltb-hero__acties{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2) var(--s-8); margin-top:var(--s-6)}
.ltb-hero__titel,.ltb-hero__subkop,.ltb-hero__acties{animation:ltb-binnenkomen var(--dur-in) var(--ease-uit) both}
.ltb-hero__subkop{animation-delay:var(--stagger)} .ltb-hero__acties{animation-delay:calc(3 * var(--stagger))}
.ltb-hero__boog{position:absolute; left:0; right:0; bottom:-1px; width:100%; height:clamp(2.5rem,7vw,6rem)}
.ltb-hero__boog-vlak{fill:var(--boog-vlak)}
.ltb-hero__boog-lijn{fill:none; stroke:var(--c-oranje); stroke-width:var(--boog-dikte); stroke-linecap:round; vector-effect:non-scaling-stroke; animation:ltb-lijn-teken calc(1.6 * var(--dur-in)) var(--ease-in-uit) calc(3 * var(--stagger)) both}
@media (min-width:64em){
  .ltb-hero{display:grid; align-items:center; min-height:min(44rem,calc(100svh - var(--header-h))); padding-block:var(--s-10) var(--s-32)}
  .ltb-hero__inner{grid-template-columns:minmax(0,6fr) minmax(0,6fr); align-items:center; gap:var(--s-12)}
  .ltb .ltb-hero__titel{max-width:16ch}
  .ltb-hero__acties{margin-top:var(--s-8)}
  .ltb-hero__foto{order:0; width:100%; max-width:36rem; justify-self:end}
  .ltb-hero__img{aspect-ratio:5/4}
  .ltb-hero__berg{right:-3%; width:78%; height:96%}
}
@keyframes ltb-binnenkomen{from{opacity:.001; transform:translateY(var(--beweging-in))}}
@keyframes ltb-foto-in{from{opacity:.001; transform:scale(1.04)}}
@keyframes ltb-berg-in{from{opacity:.001; transform:translateY(var(--s-12))}}
@keyframes ltb-lijn-teken{from{clip-path:inset(-50% 100% -50% 0)}to{clip-path:inset(-50% 0 -50% 0)}}
@media (prefers-reduced-motion:reduce){.ltb *{animation:none !important; transition:none !important}}

/* ================= VACATURES-sectie ================= */
.ltb-vacatures{--t-tekst:var(--c-navy); --t-zacht:var(--c-ink-zacht); background:var(--c-tint); padding-block:var(--s-sectie)}
.ltb-vacatures__kop{display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:var(--s-6) var(--s-10); margin-bottom:var(--s-12)}
.ltb-sectie-kop{display:grid; gap:var(--s-4)}
.ltb .ltb-sectie-kop__intro{font-size:var(--fs-lead); line-height:var(--lh-tekst); color:var(--t-zacht)}

/* Zoekformulier */
#lijst{font-family:var(--font-tekst)}
#lijst > .row:first-child{align-items:flex-end; margin-bottom:var(--s-8)}
#lijst label{display:block; margin-bottom:var(--s-2) !important; font-size:var(--fs-s); font-weight:var(--fw-tekst-bold); color:var(--c-navy)}
#lijst .input-group-search{
  display:flex; align-items:center; min-height:var(--knop-h); padding:0 var(--s-4);
  background:var(--c-wit) !important; border:1.5px solid var(--c-rand-veld); border-radius:var(--r-s);
  transition:border-color var(--dur-1) var(--ease-uit),box-shadow var(--dur-1) var(--ease-uit);
}
#lijst .input-group-search:focus-within{border-color:var(--c-navy); box-shadow:0 0 0 3px var(--c-staal)}
#lijst .input-group-prepend{background:transparent !important; margin-right:var(--s-3) !important; color:var(--c-ink-zacht)}
#lijst #search-input{height:auto; padding:var(--s-3) 0; border:0; background:transparent !important; box-shadow:none; font-family:var(--font-tekst); font-size:var(--fs-body); color:var(--c-navy)}
#lijst #search-input::placeholder{color:var(--c-ink-zacht)}
#lijst .btn-search{width:100%}

/* Algemene knoppen van het platform = knop--primair */
.btn.btn-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-3);
  min-height:var(--knop-h); padding:var(--s-4) var(--s-6); border:2px solid transparent !important; border-radius:var(--r-pill) !important;
  background:var(--actie) !important; color:var(--c-wit) !important; box-shadow:none !important;
  font-family:var(--font-tekst); font-size:var(--fs-s); font-weight:var(--fw-tekst-bold); line-height:1;
  transition:background-color var(--dur-1) var(--ease-uit),transform var(--dur-2) var(--ease-uit);
}
.btn.btn-primary:hover{background:var(--actie-hover) !important; transform:translateY(-2px)}
.btn.btn-primary:active{transform:none}

/* Filters */
.vacancy-index-sidebar{background:var(--c-wit); border:1px solid var(--c-rand); border-radius:var(--r-m); padding:var(--s-6); margin-bottom:var(--s-5)}
.vacancy-index-item-filter-name{font-family:var(--font-tekst); font-size:var(--fs-s); font-weight:var(--fw-tekst-bold); color:var(--c-navy); margin:0 0 var(--s-2)}
.vacancy-index-item-filter-options{margin-bottom:var(--s-5); font-size:var(--fs-s); color:var(--c-ink-zacht)}
.vacancy-index-item-filter-options:last-child{margin-bottom:0}
.vacancy-index-sidebar .custom-control-label{cursor:pointer; line-height:1.5}
.vacancy-index-sidebar .custom-control-label::before{border:1.5px solid var(--c-rand-veld); border-radius:4px; background:#fff}
.vacancy-index-sidebar .custom-control-input:checked ~ .custom-control-label::before{background:var(--actie); border-color:var(--actie)}
.vacancy-index-sidebar .custom-control-input:focus ~ .custom-control-label::before{box-shadow:0 0 0 3px var(--c-tint-oranje)}

/* Teller */
.vacancy-index-list-title{display:flex; align-items:center; gap:var(--s-2); margin-bottom:var(--s-5); font-family:var(--font-tekst); font-size:var(--fs-s); font-weight:var(--fw-tekst-bold); color:var(--c-navy)}
.vacancy-index-list-counter{display:inline-flex; align-items:center; justify-content:center; min-width:1.75rem; height:1.75rem; padding:0 var(--s-2); border-radius:var(--r-pill) !important; background:var(--c-navy) !important; color:var(--c-wit) !important; font-size:var(--fs-xs)}

/* Vacaturekaarten (vacature-kaart) */
.vacancy-index-items{display:grid; gap:var(--s-5); grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))}
.vacancy-index-item{
  position:relative; display:flex; flex-direction:column; gap:var(--s-2); min-height:15rem; margin:0 !important;
  padding:calc(var(--s-8) + 1.875rem + var(--s-3)) var(--s-6) var(--s-6);
  border:1px solid var(--c-rand); border-radius:var(--r-m); background:var(--c-wit); color:var(--c-navy); box-shadow:none;
  transition:transform var(--dur-2) var(--ease-uit),background-color var(--dur-2) var(--ease-uit),color var(--dur-2) var(--ease-uit);
}
.vacancy-index-item:hover{transform:translateY(calc(-1 * var(--s-1))); background:var(--c-navy); color:var(--c-wit)}
.vacancy-index-item > .row{margin:0; display:block}
.vacancy-index-item > .row > .col{padding:0}
.vacancy-index-item-title{
  font-family:var(--font-kop); font-size:var(--fs-h4); font-weight:var(--fw-kop-s); line-height:var(--lh-kop-s);
  color:inherit !important; text-decoration:none !important; text-wrap:balance;
}
.vacancy-index-item-title::after{content:""; position:absolute; inset:0; border-radius:inherit; z-index:1}
.vacancy-index-item-fields{
  display:flex !important; flex-wrap:wrap; align-items:center; gap:var(--s-1) 0; margin:auto 0 0 !important;
  padding-top:var(--s-4); padding-right:var(--s-12);
  font-size:var(--fs-xs); font-weight:var(--fw-tekst-medium); line-height:var(--lh-krap); color:inherit;
}
.vacancy-index-item-fields > div{flex:none; max-width:none; padding:0 !important; margin:0 !important}
.vacancy-index-item-field-value{color:inherit; white-space:nowrap}
.vacancy-index-item-field-value i{display:none}
/* volgorde: plaats · uren · functie */
.vacancy-index-item-fields > div:nth-child(2){order:1}
.vacancy-index-item-fields > div:nth-child(1){order:2}
.vacancy-index-item-fields > div:nth-child(3){order:3}
.vacancy-index-item-fields > div:nth-child(1)::before,
.vacancy-index-item-fields > div:nth-child(3)::before{content:"\00B7"; margin:0 var(--s-3)}
.vacancy-index-item-fields > div:nth-child(1) .vacancy-index-item-field-value::after{content:" uur"}
/* branche = label bovenaan (label--vast) */
.vacancy-index-item-fields > div:nth-child(4){position:absolute; top:var(--s-8); left:var(--s-6)}
.vacancy-index-item-fields > div:nth-child(4) .vacancy-index-item-field-value{
  display:inline-flex; align-items:center; padding:var(--s-1) var(--s-3); border-radius:var(--r-pill);
  background:var(--c-tint-sterk); color:var(--c-berg-donker); font-size:var(--fs-xs); font-weight:var(--fw-tekst-bold); line-height:var(--lh-krap);
}
/* Bekijken = ronde pijl (vacature-kaart__pijl) */
.vacancy-index-item-fields > div:last-child{position:absolute; right:var(--s-5); bottom:var(--s-5); z-index:2}
.vacancy-index-item .btn.btn-primary{
  width:var(--s-10); height:var(--s-10); min-height:0; padding:0 !important; font-size:0; gap:0;
  transition:transform var(--dur-2) var(--ease-uit);
}
.vacancy-index-item .btn.btn-primary::before{
  content:""; width:20px; height:20px; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
}
.vacancy-index-item:hover .btn.btn-primary{transform:translateX(var(--s-1)); background:var(--actie) !important}

/* ================= CTA ================= */
.ltb-cta{
  --t-bg:var(--c-navy); --t-tekst:var(--c-wit); --t-zacht:var(--c-ink-op-donker); --t-accent:var(--c-oranje-licht);
  background:var(--t-bg); color:var(--t-tekst); padding-block:var(--s-sectie); line-height:calc(var(--lh-tekst) + .05);
}
.ltb-cta__inner{display:grid; gap:var(--s-10); align-items:center}
.ltb-cta__symbool{display:block; width:min(100%,20rem); height:auto}
.ltb .ltb-cta__tekst{margin-top:var(--s-5); font-size:var(--fs-lead); color:var(--t-zacht); max-width:46ch}
.ltb-cta__acties{display:flex; flex-wrap:wrap; gap:var(--s-3); margin-top:var(--s-8) !important}
@media (min-width:64em){.ltb-cta__inner{grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:var(--s-16)} .ltb-cta__symbool{justify-self:center}}

/* ================= FOOTER ================= */
.ltb-footer{background:var(--c-navy); color:var(--c-wit); border-top:1px solid var(--c-rand-op-donker); font-family:var(--font-tekst); font-size:var(--fs-body); line-height:calc(var(--lh-tekst) + .05)}
.ltb-footer__inner{display:grid; gap:var(--s-10); padding-block:var(--s-16) var(--s-12); grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
.ltb-footer__logo{display:block; width:auto; height:var(--s-12)}
.ltb .ltb-footer__zin{margin-top:var(--s-4); color:var(--c-ink-op-donker); font-size:var(--fs-s)}
.ltb .ltb-footer__titel{margin-bottom:var(--s-3); font-family:var(--font-tekst); font-size:var(--fs-s); font-weight:var(--fw-tekst-bold); letter-spacing:0; line-height:var(--lh-kop-s); color:var(--c-wit)}
.ltb-footer__lijst{display:grid; gap:var(--s-2); font-size:var(--fs-s); color:var(--c-ink-op-donker)}
.ltb-footer__adres{font-style:normal; margin:0}
.ltb-footer a:not(.ltb-knop){color:var(--c-wit) !important; text-decoration:none}
.ltb-footer a:not(.ltb-knop):hover{text-decoration:underline}
.ltb-footer__nadruk{font-weight:var(--fw-tekst-bold)}
.ltb .ltb-footer__tekst{margin-bottom:var(--s-4); color:var(--c-ink-op-donker); font-size:var(--fs-s)}
.ltb-footer__onder{background:var(--c-berg-donker)}
.ltb-footer__onder-inner{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2) var(--s-6); padding-block:var(--s-4); font-size:var(--fs-xs); color:var(--c-ink-op-donker)}
.ltb-footer__onder a:not(.ltb-knop){text-decoration:underline !important; text-decoration-color:var(--c-rand-op-donker) !important}
.ltb-footer__juridisch{display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-6); margin-left:auto}
/* ================= Overrides platform-CSS (box.css / content.css / default.css) ================= */
#nav-main > .container-fluid.is-content-1200{max-width:calc(var(--container-breed) + 2 * var(--s-gutter)) !important}
#nav-main .navbar-logo{max-height:none !important}
#nav-main #navbar-main .nav-item .nav-link{font-size:var(--fs-s) !important; line-height:1 !important; letter-spacing:normal}
@media (max-width:63.99em){#nav-main #navbar-main .nav-item:not(:last-child) .nav-link{font-size:var(--fs-h3) !important; line-height:var(--lh-kop) !important}}
.ltb p,.ltb li,.ltb label,.ltb td{font-size:inherit; line-height:inherit; font-weight:inherit}
.ltb,.ltb-hero,.ltb-cta{line-height:var(--lh-tekst)}
.ltb-cta,.ltb-footer{line-height:calc(var(--lh-tekst) + .05)}
.ltb .ltb-hero__subkop,.ltb .ltb-sectie-kop__intro,.ltb .ltb-cta__tekst{font-weight:var(--fw-tekst)}
.ltb .ltb-footer__lijst li{font-size:var(--fs-s)}
.btn,.btn.btn-primary{letter-spacing:normal !important}
#lijst .input-group-search{height:auto !important}
#lijst label,.vacancy-index-list-title{line-height:var(--lh-krap) !important; font-weight:var(--fw-tekst-bold) !important}
.vacancy-index-sidebar .custom-control-label{font-size:var(--fs-s) !important; line-height:1.5 !important; font-weight:var(--fw-tekst) !important}

/* kaart-meta + filters */
.vacancy-index-item-fields > div{display:flex !important; align-items:center; width:auto !important}
.vacancy-index-item-fields > div:nth-child(1)::before,.vacancy-index-item-fields > div:nth-child(3)::before{content:"\00B7"; display:inline-block; margin:0 var(--s-3); line-height:1}
.vacancy-index-item-field-value{display:inline-flex; align-items:center; font-size:var(--fs-xs) !important; line-height:var(--lh-krap) !important; font-weight:var(--fw-tekst-medium) !important}
.vacancy-index-item-fields > div:nth-child(1) .vacancy-index-item-field-value::after{content:"\00a0uur"}
#lijst .vacancy-index-sidebar .custom-control-label{font-size:var(--fs-s) !important; line-height:1.5 !important; font-weight:var(--fw-tekst) !important; color:var(--c-ink-zacht); margin:0 !important}
#lijst .input-group-search,#lijst .input-group-search *{background-color:#fff !important}

/* CTA exact als .cta */
.ltb-cta{position:relative; overflow:hidden}
.ltb-cta__symbool{width:clamp(9rem,40vw,16rem)}
.ltb .ltb-cta h2{font-size:var(--fs-h1); max-width:14ch}
.ltb .ltb-cta__tekst{max-width:65ch}
@media (min-width:64em){.ltb-cta__inner{gap:var(--s-20)} .ltb-cta__symbool{width:100%; max-width:26rem; justify-self:center}}

/* mobiel menu */
@media (max-width:63.99em){
  #nav-main .navbar-collapse{margin:0 !important; width:auto !important; align-items:stretch !important}
  #nav-main .navbar-nav{margin:0 !important; padding:0 !important; align-items:start !important; justify-items:start}
  #nav-main .navbar-nav .nav-item{padding:0 !important; margin-left:0 !important}
  #nav-main .navbar-brand{position:relative; z-index:301}
  #nav-main .navbar-toggler:not(.collapsed) ~ * .navbar-logo,#nav-main:has(.navbar-collapse.show) .navbar-logo{content:var(--logo-wit)}
}