/* SmartHub 2026 - paginaspecifiek: werkgevers.html */
.sh-sectie .foto-chip{position:absolute;right:20px;bottom:20px;font-size:.7rem;background:rgba(29,18,32,.55);color:rgba(255,255,255,.85);padding:7px 13px;border-radius:var(--pill);backdrop-filter:blur(4px);z-index:2}
.sh-sectie .stats-in{display:grid;grid-template-columns:1.2fr repeat(4,1fr);gap:24px;align-items:end;padding:36px 0}
.sh-sectie .stats h2{font-size:1.9rem;line-height:1;margin:0;padding-bottom:2px}
.sh-sectie .stat{display:flex;flex-direction:column;justify-content:flex-end;gap:6px}
.sh-sectie .stat b{margin:0}
.sh-sectie .stat span{line-height:1.25}
.sh-sectie .stat b .plus-teken{font-size:.55em;font-weight:900;color:var(--roos);vertical-align:.35em;margin-left:1px}
.sh-sectie section{padding:96px 0;position:relative;scroll-margin-top:92px}
.sh-sectie .programmas .optie-chip, .sh-sectie .manifest .optie-chip, .sh-sectie .portaal .optie-chip, .sh-sectie .vacband .optie-chip{position:absolute;right:20px;bottom:16px;font-size:.68rem;letter-spacing:.06em;border:1.5px dashed rgba(255,255,255,.45);color:rgba(255,255,255,.75);padding:7px 13px;border-radius:var(--pill);z-index:3}
.sh-sectie .hero-sub{min-height:0!important}
.sh-sectie .hero-sub .hero-in{padding:64px 0 84px;max-width:680px}
.sh-sectie .hero-sub .scrollhint{bottom:18px}
.sh-sectie .hero-sub h1{font-size:clamp(2.1rem,4.4vw,3.4rem)}
.sh-sectie .hero-zoek .hero-in{padding:44px 0 56px}
.sh-sectie .hero-zoek h1{font-size:clamp(1.9rem,3.6vw,2.8rem)}
.sh-sectie .hero-zoek .sub{margin:14px 0 6px;font-size:1.05rem}
.sh-sectie .hero-zoek .kruimel{margin-bottom:12px}
.sh-sectie .baten{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:46px}
.sh-sectie .baat{background:#fff;border:1px solid var(--lijn);border-radius:var(--radius);padding:30px 26px;transition:transform .2s ease,box-shadow .2s ease}
.sh-sectie .baat:hover{transform:translateY(-6px);box-shadow:var(--shadow-zwaar)}
.sh-sectie .baat .ic{width:48px;height:48px;border-radius:14px;background:var(--roze-08);color:var(--roze);display:grid;place-items:center;margin-bottom:16px}
.sh-sectie .baat .ic svg{width:24px;height:24px}
.sh-sectie .baat h3{text-transform:none;letter-spacing:0;font-size:1.08rem;margin-bottom:8px}
.sh-sectie .baat p{color:var(--steen);font-size:.93rem}
@media(max-width:900px){
.sh-sectie .baten{grid-template-columns:1fr 1fr}}
@media(max-width:600px){
.sh-sectie .baten{grid-template-columns:1fr}}
.sh-sectie .zoeker{max-width:100%;margin:36px auto 0}
.sh-sectie .zoeker .zoekmock{margin:0 auto;max-width:640px}
.sh-sectie .zoeker .vac-tags{justify-content:center;margin-top:16px}
.sh-sectie .vac-tag.actief{background:#fff;color:var(--paars);border-color:#fff}
.sh-sectie .stage-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px;opacity:0;max-height:0;overflow:hidden;transition:opacity .5s ease,max-height .6s ease}
.sh-sectie .stage-grid.open{opacity:1;max-height:1400px}
.sh-sectie .stage-kaart{background:#fff;border-radius:var(--radius);padding:24px;color:var(--ink);display:flex;flex-direction:column;gap:10px;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease;position:relative}
.sh-sectie .stage-kaart:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(0,0,0,.3)}
.sh-sectie .stage-kop{display:flex;gap:12px;align-items:center}
.sh-sectie .stage-logo{flex:none;width:44px;height:44px;border-radius:12px;background:var(--paars-05);color:var(--paars);display:grid;place-items:center;font-weight:900;font-size:.9rem}
.sh-sectie .stage-kaart h3{text-transform:none;letter-spacing:0;font-size:1rem;line-height:1.35}
.sh-sectie .stage-kaart .waar{font-size:.82rem;color:var(--steen);font-weight:600}
.sh-sectie .stage-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.sh-sectie .stage-tags span{font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:5px 11px;border-radius:var(--pill);background:var(--roze-08);color:var(--roze)}
.sh-sectie .stage-tags span.niveau{background:var(--paars-05);color:var(--paars)}
.sh-sectie .stage-kaart .pijlknop{position:absolute;right:18px;bottom:18px;width:34px;height:34px;border-radius:50%;background:var(--roze);color:#fff;display:grid;place-items:center;transition:transform .2s}
.sh-sectie .stage-kaart:hover .pijlknop{transform:translateX(4px)}
.sh-sectie .stage-kaart.blur>*{filter:blur(6px);pointer-events:none;user-select:none}
.sh-sectie .stage-kaart.blur{overflow:hidden}
.sh-sectie .blur-overlay{position:absolute;inset:0;display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center;text-align:center;padding:20px;background:linear-gradient(160deg,rgba(255,255,255,.55),rgba(255,255,255,.85));border-radius:var(--radius);filter:none!important;pointer-events:auto!important;z-index:2}
.sh-sectie .blur-overlay b{font-size:1rem;color:var(--ink)}
.sh-sectie .zoek-leeg{margin-top:32px;color:rgba(255,255,255,.75);font-size:.95rem;display:none;text-align:center}
.sh-sectie .zoek-leeg.zichtbaar{display:block}
@media(max-width:900px){
.sh-sectie .stage-grid{grid-template-columns:1fr}}
.sh-sectie .kruimel{display:flex;gap:10px;align-items:center;font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:18px}
.sh-sectie .kruimel a{color:rgba(255,255,255,.7);text-decoration:none}
.sh-sectie .kruimel a:hover{color:#fff}
.sh-sectie .kruimel span{color:var(--roos)}
.sh-sectie .vind{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:46px}
.sh-sectie .vind-kaart{background:#fff;border:1px solid var(--lijn);border-radius:var(--radius);padding:32px 28px;transition:transform .2s ease,box-shadow .2s ease;position:relative;overflow:hidden}
.sh-sectie .vind-kaart:hover{transform:translateY(-6px);box-shadow:var(--shadow-zwaar)}
.sh-sectie .vind-kaart .nr{font-size:2.6rem;font-weight:900;color:var(--lijn);line-height:1;transition:color .25s;font-variant-numeric:tabular-nums}
.sh-sectie .vind-kaart:hover .nr{color:var(--roze)}
.sh-sectie .vind-kaart h3{text-transform:none;letter-spacing:0;font-size:1.12rem;margin:12px 0 8px}
.sh-sectie .vind-kaart p{color:var(--steen);font-size:.95rem}
@media(max-width:900px){
.sh-sectie .vind{grid-template-columns:1fr}}
.sh-sectie .stappen{display:grid;grid-template-columns:repeat(var(--stappen,3),minmax(0,1fr));gap:24px;margin-top:52px}
.sh-sectie .stap{background:#fff;border:1px solid var(--lijn);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease}
.sh-sectie .stap:hover{transform:translateY(-6px);box-shadow:var(--shadow-zwaar)}
.sh-sectie .stap .beeld{position:relative;aspect-ratio:16/10;overflow:hidden}
.sh-sectie .stap .beeld .foto{position:absolute;inset:0;aspect-ratio:auto;border-radius:0;box-shadow:none}
.sh-sectie .stap .body{padding:28px;display:flex;flex-direction:column;gap:10px;flex:1}
.sh-sectie .stap .fase-nr{position:absolute;top:14px;left:14px;z-index:2;width:44px;height:44px;border-radius:50%;background:var(--roze);color:#fff;display:grid;place-items:center;font-weight:900;font-size:1.1rem;box-shadow:0 8px 20px rgba(209,0,116,.4)}
.sh-sectie .stap h3{text-transform:none;letter-spacing:0;font-size:1.2rem}
.sh-sectie .stap p{color:var(--steen);font-size:.95rem}
.sh-sectie .stap ul{list-style:none;display:grid;gap:8px;margin-top:4px}
.sh-sectie .stap li{font-size:.9rem;font-weight:600;padding-left:20px;position:relative}
.sh-sectie .stap li::before{content:"—";position:absolute;left:0;color:var(--roze);font-weight:900}
@media(max-width:900px){
.sh-sectie .stappen{grid-template-columns:1fr}}
.sh-sectie .vacband{background:linear-gradient(150deg,var(--paars),#5C083F);color:#fff;position:relative;overflow:hidden}
.sh-sectie .vacband .wrap{position:relative;z-index:2}
.sh-sectie .vacband .kicker{color:var(--roos)}
.sh-sectie .zoekmock{display:flex;gap:6px;background:#fff;border-radius:var(--pill);padding:6px 6px 6px 24px;max-width:620px;margin-top:30px;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.sh-sectie .zoekmock input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font-size:1rem;font-family:inherit;outline:none}
.sh-sectie .zoekmock input::placeholder{color:var(--steen)}
.sh-sectie .vac-tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.sh-sectie .vac-tag{font-size:.8rem;font-weight:700;padding:8px 16px;border-radius:var(--pill);border:1.5px solid rgba(255,255,255,.4);color:#fff;text-decoration:none;transition:background .15s}
.sh-sectie .vac-tag:hover{background:rgba(255,255,255,.15)}
.sh-sectie .zoekbox{display:grid;grid-template-columns:1.35fr 1.05fr .95fr auto;gap:8px;background:#fff;border-radius:26px;padding:10px;box-shadow:0 30px 70px rgba(0,0,0,.35);max-width:860px;margin-top:34px;transition:box-shadow .25s ease,transform .25s ease}
.sh-sectie .zoekbox:focus-within{box-shadow:0 0 0 4px rgba(246,169,210,.65),0 34px 80px rgba(0,0,0,.4);transform:translateY(-2px)}
.sh-sectie .zoekbox .veld:focus-within{background:var(--roze-08)}
.sh-sectie .zoekbox .veld{display:flex;align-items:center;gap:9px;padding:10px 14px;border-radius:18px;background:var(--veld);min-width:0}
.sh-sectie .zoekbox select, .sh-sectie .sorteer select{appearance:none;-webkit-appearance:none;background-image:url('data:image/svg+xml,');background-repeat:no-repeat;background-position:right 2px center;background-size:15px;padding-right:22px;cursor:pointer}
.sh-sectie .sorteer select{background-position:right 12px center;padding-right:34px}
.sh-sectie .zoekbox .veld svg{width:19px;height:19px;color:var(--paars);flex:none}
.sh-sectie .zoekbox input, .sh-sectie .zoekbox select{border:0;background:transparent;font-family:inherit;font-size:.98rem;color:var(--ink);outline:none;width:100%;min-width:0}
.sh-sectie .zoekbox .btn{border-radius:18px}
.sh-sectie .quick-chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.sh-sectie .quick-chips .vac-tag{border-color:rgba(255,255,255,.45)}
@media(max-width:860px){
.sh-sectie .zoekbox{grid-template-columns:1fr}}
.sh-sectie .nieuw-rail{background:var(--veld2);color:var(--ink);padding:48px 0 40px;overflow:hidden;border-bottom:1px solid var(--lijn)}
.sh-sectie .nieuw-kop{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap}
.sh-sectie .nieuw-badge{display:inline-flex;align-items:center;gap:9px;background:var(--roze);color:#fff;font-weight:900;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;padding:7px 15px;border-radius:var(--pill)}
.sh-sectie .nieuw-badge i{width:8px;height:8px;border-radius:50%;background:#fff;animation:puls 1.6s ease infinite}
.sh-sectie .rail-wrap{position:relative;padding:0 64px}
@media(max-width:760px){
.sh-sectie .rail-wrap{padding:0}}
.sh-sectie .rail{display:grid;grid-auto-flow:column;grid-auto-columns:min(340px,80vw);gap:20px;overflow-x:auto;padding:30px 4px 12px;scroll-snap-type:x mandatory;scrollbar-width:none}
.sh-sectie .rail::-webkit-scrollbar{display:none}
.sh-sectie .rail .rail-kaart{scroll-snap-align:start;border:1px solid var(--lijn)}
.sh-sectie .rail-knop{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:1px solid var(--lijn);background:#fff;color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:all .15s;box-shadow:0 10px 26px rgba(29,18,32,.18);z-index:3}
.sh-sectie .rail-knop:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.sh-sectie .rail-knop.links{left:0}
.sh-sectie .rail-knop.rechts{right:0}
@media(max-width:760px){
.sh-sectie .rail-knop{display:none}}
.sh-sectie .rail-brug{display:flex;justify-content:center;margin-top:6px}
.sh-sectie .rail-brug a{display:inline-flex;gap:10px;align-items:center;font-weight:800;color:var(--paars);text-decoration:none;font-size:.95rem}
.sh-sectie .rail-brug a svg{animation:drop 1.8s ease infinite}
.sh-sectie .rail-brug a:hover{color:var(--roze)}
.sh-sectie .vac-layout{display:grid;grid-template-columns:290px 1fr;gap:40px;margin-top:20px;align-items:start}
@media(max-width:960px){
.sh-sectie .vac-layout{grid-template-columns:1fr}}
.sh-sectie .filters{position:sticky;top:104px;background:#fff;border:1px solid var(--lijn);border-radius:var(--radius);padding:26px;display:grid;gap:6px}
.sh-sectie .filters h2{font-size:1.05rem;letter-spacing:.02em;display:flex;justify-content:space-between;align-items:center}
.sh-sectie .wis{font-size:.78rem;font-weight:800;color:var(--roze);background:none;border:0;cursor:pointer;font-family:inherit;text-transform:none;letter-spacing:0}
.sh-sectie .fgroep{border-top:1px solid var(--lijn);padding:14px 0 6px}
.sh-sectie .fgroep summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;font-weight:800;font-size:.92rem;padding:4px 0}
.sh-sectie .fgroep summary::-webkit-details-marker{display:none}
.sh-sectie .fgroep summary .plus{color:var(--roze);font-weight:900;transition:transform .2s}
.sh-sectie .fgroep[open] summary .plus{transform:rotate(45deg)}
.sh-sectie .fgroep .opties{display:grid;gap:8px;padding:10px 0 8px}
.sh-sectie .fgroep label{display:flex;gap:10px;align-items:center;font-size:.9rem;font-weight:600;cursor:pointer;color:var(--ink)}
.sh-sectie .fgroep label span.aantal{margin-left:auto;font-size:.74rem;color:var(--steen);font-weight:700}
.sh-sectie .fgroep input[type=checkbox]{appearance:none;width:19px;height:19px;border:2px solid var(--lijn);border-radius:6px;cursor:pointer;position:relative;flex:none;transition:all .15s}
.sh-sectie .fgroep input[type=checkbox]:checked{background:var(--roze);border-color:var(--roze)}
.sh-sectie .fgroep input[type=checkbox]:checked::after{content:"";position:absolute;inset:2px;background:#fff;mask:url('data:image/svg+xml,') center/contain no-repeat;-webkit-mask:url('data:image/svg+xml,') center/contain no-repeat}
.sh-sectie .mini-zoek{display:flex;align-items:center;gap:8px;background:var(--veld);border-radius:12px;padding:8px 12px;margin-bottom:6px}
.sh-sectie .mini-zoek input{border:0;background:transparent;font-family:inherit;font-size:.86rem;outline:none;width:100%}
.sh-sectie .toon-meer{background:none;border:0;color:var(--paars);font-weight:800;font-size:.82rem;cursor:pointer;font-family:inherit;text-align:left;padding:4px 0}
.sh-sectie .vac-lijst.anim .vac-kaart, .sh-sectie .vac-lijst.anim .feed-cta{animation:instroom .5s ease both}
.sh-sectie .vac-lijst.anim>*:nth-child(1){animation-delay:.05s}
.sh-sectie .vac-lijst.anim>*:nth-child(2){animation-delay:.12s}
.sh-sectie .vac-lijst.anim>*:nth-child(3){animation-delay:.19s}
.sh-sectie .vac-lijst.anim>*:nth-child(4){animation-delay:.26s}
.sh-sectie .vac-lijst.anim>*:nth-child(5){animation-delay:.33s}
.sh-sectie .vac-lijst.anim>*:nth-child(6){animation-delay:.4s}
@keyframes instroom{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.sh-sectie .vac-teller.flits b{animation:tellerflits 1s ease}
@keyframes tellerflits{0%,100%{color:var(--roze)}50%{color:var(--paars);text-shadow:0 0 18px rgba(209,0,116,.35)}}
.sh-sectie .vac-toolbar{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:18px}
.sh-sectie .vac-teller{font-weight:900;font-size:1.3rem}
.sh-sectie .vac-teller b{color:var(--roze)}
.sh-sectie .sorteer{display:flex;align-items:center;gap:10px;font-size:.88rem;font-weight:700;color:var(--steen)}
.sh-sectie .sorteer select{border:1.5px solid var(--lijn);border-radius:var(--pill);padding:9px 16px;font-family:inherit;font-weight:700;font-size:.88rem;background:#fff;cursor:pointer}
.sh-sectie .actieve-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.sh-sectie .chip{display:inline-flex;align-items:center;gap:8px;background:var(--roze-08);color:var(--paars);font-weight:800;font-size:.8rem;padding:7px 8px 7px 14px;border-radius:var(--pill)}
.sh-sectie .chip button{width:20px;height:20px;border-radius:50%;border:0;background:var(--roze);color:#fff;font-weight:900;cursor:pointer;line-height:1;display:grid;place-items:center;font-size:.75rem}
.sh-sectie .vac-lijst{display:grid;gap:16px}
.sh-sectie .vac-kaart{position:relative;display:grid;grid-template-columns:64px 1fr auto;gap:20px;background:#fff;border:1px solid var(--lijn);border-radius:var(--radius);padding:26px;transition:transform .2s ease,box-shadow .2s ease;text-decoration:none;color:inherit}
.sh-sectie .vac-kaart:hover{transform:translateY(-4px);box-shadow:var(--shadow-zwaar)}
.sh-sectie .vac-logo{width:64px;height:64px;border-radius:16px;background:var(--paars-05);color:var(--paars);display:grid;place-items:center;font-weight:900;font-size:1.05rem;flex:none}
.sh-sectie .vac-kaart h3{text-transform:none;letter-spacing:0;font-size:1.14rem;line-height:1.35}
.sh-sectie .vac-kaart>div{min-width:0}
.sh-sectie .vac-kaart .werk{font-size:.88rem;color:var(--steen);font-weight:700;margin-top:2px}
.sh-sectie .vac-kaart .snippet{font-size:.9rem;color:var(--steen);margin-top:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sh-sectie .vac-kaart .stage-tags{margin-top:12px}
.sh-sectie .vac-zij{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;gap:12px;min-width:170px}
.sh-sectie .cp-rij{display:flex;align-items:center;gap:10px}
.sh-sectie .contactp{display:flex;align-items:center;gap:10px;text-align:right}
.sh-sectie .contactp .cp-foto{width:40px;height:40px;border-radius:50%;background:linear-gradient(140deg,var(--roze),var(--paars));color:#fff;display:grid;place-items:center;font-weight:900;font-size:.78rem;flex:none}
.sh-sectie .contactp span{font-size:.76rem;color:var(--steen);font-weight:700;line-height:1.3}
.sh-sectie .contactp span b{display:block;color:var(--ink);font-size:.82rem}
.sh-sectie .vac-nieuw{background:var(--roze);color:#fff;font-size:.62rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;padding:4px 11px;border-radius:var(--pill);display:inline-flex;gap:7px;align-items:center;margin-bottom:8px;width:max-content}
.sh-sectie .vac-nieuw i{width:6px;height:6px;border-radius:50%;background:#fff;animation:puls 1.6s ease infinite}
.sh-sectie .bewaar{position:relative;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--lijn);background:#fff;cursor:pointer;display:grid;place-items:center;color:var(--steen);transition:all .15s;z-index:2;flex:none}
.sh-sectie .bewaar:hover{border-color:var(--roze);color:var(--roze)}
.sh-sectie .bewaar.aan{background:var(--roze);border-color:var(--roze);color:#fff}
.sh-sectie .bewaar svg{width:18px;height:18px}
@media(max-width:760px){
.sh-sectie .vac-kaart{grid-template-columns:52px 1fr}
.sh-sectie .vac-zij{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:flex-start}}
.sh-sectie .rail-kaart{display:flex;flex-direction:column;gap:10px;background:#fff;color:var(--ink);border-radius:var(--radius);padding:24px;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease}
.sh-sectie .rail-kaart:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(0,0,0,.35)}
.sh-sectie .rail-kop{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sh-sectie .rail-kaart h3{text-transform:none;letter-spacing:0;font-size:1.04rem;line-height:1.35}
.sh-sectie .rail-kaart .werk{font-size:.84rem;color:var(--steen);font-weight:700}
.sh-sectie .rail-kaart .stage-tags{margin-top:auto;padding-top:10px}
.sh-sectie .rail-kaart .vac-nieuw{margin-bottom:0}
.sh-sectie .feed-cta{border-radius:var(--radius);padding:28px 30px;display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap;color:#fff}
.sh-sectie .feed-cta.sollicitatie{background:linear-gradient(150deg,var(--paars),#5C083F)}
.sh-sectie .feed-cta.alert{background:linear-gradient(150deg,var(--roze),#9C0057)}
.sh-sectie .feed-cta h3{text-transform:none;letter-spacing:0;font-size:1.15rem}
.sh-sectie .feed-cta p{font-size:.92rem;color:rgba(255,255,255,.85)}
.sh-sectie .meer-laden{display:flex;justify-content:center;margin-top:34px}
.sh-sectie .geen-resultaat{background:#fff;border:1px solid var(--lijn);border-radius:var(--radius);padding:44px;text-align:center;display:none}
.sh-sectie .geen-resultaat.zichtbaar{display:block}
.sh-sectie .geen-resultaat h3{text-transform:none;letter-spacing:0}
.sh-sectie .geen-resultaat p{color:var(--steen);margin:10px 0 20px}
.sh-sectie .filter-open{display:none;margin-bottom:16px}
@media(max-width:960px){
.sh-sectie .filter-open{display:inline-flex}
.sh-sectie .filters{display:none;position:fixed;inset:0;z-index:80;border-radius:0;overflow-y:auto;padding:26px 26px 100px}
.sh-sectie .filters.open{display:grid}
.sh-sectie .filters .sluit{position:sticky;bottom:16px;margin-top:20px}
}
.sh-sectie .tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px;align-items:stretch}
.sh-sectie .tier{background:#fff;border:1px solid var(--lijn);border-radius:calc(var(--radius) + 4px);padding:36px 32px;display:flex;flex-direction:column;gap:14px;position:relative;transition:transform .22s ease,box-shadow .22s ease,border-color .22s}
.sh-sectie .tier:hover{transform:translateY(-6px);box-shadow:var(--shadow-zwaar)}
.sh-sectie .tier.populair{border:2px solid var(--roze);box-shadow:0 24px 54px rgba(209,0,116,.18)}
.sh-sectie .tier.actief-tier{border-color:var(--paars);box-shadow:0 0 0 4px rgba(162,0,103,.15),var(--shadow-zwaar);transform:translateY(-6px)}
.sh-sectie .tier .pop-badge{position:absolute;top:-15px;left:50%;transform:translateX(-50%);background:var(--roze);color:#fff;font-size:.68rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;padding:6px 16px;border-radius:var(--pill)}
.sh-sectie .tier .fte{font-size:.76rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--steen)}
.sh-sectie .tier .prijs{font-size:2.3rem;font-weight:900;color:var(--paars);line-height:1}
.sh-sectie .tier .prijs small{font-size:.85rem;color:var(--steen);font-weight:700}
.sh-sectie .tier p{color:var(--steen);font-size:.94rem}
.sh-sectie .tier .checks{margin:6px 0 12px}
.sh-sectie .tier .checks li{font-size:.92rem}
.sh-sectie .tier .btn{margin-top:auto;justify-content:center}
@media(max-width:920px){
.sh-sectie .tiers{grid-template-columns:1fr}
.sh-sectie .tier.populair{order:-1}}
.sh-sectie .fte-schuif{background:#fff;border:1px solid var(--lijn);border-radius:var(--radius);padding:28px 32px;margin-top:34px;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;box-shadow:var(--shadow)}
.sh-sectie .fte-schuif label{font-weight:800;font-size:.95rem;display:block;margin-bottom:14px}
.sh-sectie .fte-schuif output{font-weight:900;color:var(--roze)}
.sh-sectie .fte-schuif input[type=range]{width:100%;accent-color:var(--roze);height:6px;cursor:pointer}
.sh-sectie .fte-uitkomst{text-align:right}
.sh-sectie .fte-uitkomst b{display:block;font-size:1.7rem;font-weight:900;color:var(--paars);line-height:1.1}
.sh-sectie .fte-uitkomst span{font-size:.82rem;color:var(--steen);font-weight:700}
@media(max-width:720px){
.sh-sectie .fte-schuif{grid-template-columns:1fr}
.sh-sectie .fte-uitkomst{text-align:left}}
.sh-sectie .voorwaarden{max-width:820px;margin:26px auto 0;text-align:center;font-size:.84rem;color:var(--steen)}
.sh-sectie .voorwaarden details{display:inline-block;text-align:left;margin-top:8px}
.sh-sectie .voorwaarden summary{cursor:pointer;font-weight:800;color:var(--paars);list-style:none;text-align:center}
.sh-sectie .voorwaarden summary::-webkit-details-marker{display:none}
.sh-sectie .voorwaarden ul{margin:12px 0 0 18px;display:grid;gap:6px}
.sh-sectie #video-rail{grid-auto-columns:min(360px,82vw)}
.sh-sectie #video-rail .video-kaart{scroll-snap-align:start}
.sh-sectie .video-kaart{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:16/11;display:flex;align-items:flex-end;text-decoration:none;color:#fff;background:linear-gradient(160deg,var(--paars),#5C083F);transition:transform .22s ease,box-shadow .22s ease}
.sh-sectie .video-kaart:hover{transform:translateY(-6px);box-shadow:var(--shadow-zwaar)}
.sh-sectie .video-kaart .foto{position:absolute;inset:0;border-radius:0;box-shadow:none;aspect-ratio:auto}
.sh-sectie .video-kaart .overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(29,18,32,.85))}
.sh-sectie .video-kaart .vk-body{position:relative;z-index:2;padding:24px;display:flex;align-items:center;gap:14px;width:100%}
.sh-sectie .video-kaart .play{flex:none;width:52px;height:52px;border-radius:50%;background:var(--roze);display:grid;place-items:center;box-shadow:0 10px 26px rgba(209,0,116,.5);transition:transform .2s}
.sh-sectie .video-kaart:hover .play{transform:scale(1.12)}
.sh-sectie .video-kaart .play svg{width:20px;height:20px;margin-left:3px}
.sh-sectie .video-kaart b{display:block;font-size:1rem}
.sh-sectie .video-kaart span{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.75);font-weight:700}
@media(max-width:900px){
.sh-sectie .videos{grid-template-columns:1fr}}
.sh-sectie .voordelen{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:40px}
.sh-sectie .voordeel{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--lijn);border-radius:18px;padding:20px 22px;font-size:.95rem;font-weight:600;transition:transform .18s ease,border-color .18s}
.sh-sectie .voordeel:hover{transform:translateX(6px);border-color:var(--roze)}
.sh-sectie .voordeel::before{content:"";flex:none;width:24px;height:24px;margin-top:1px;border-radius:50%;background:var(--roze);mask:url('data:image/svg+xml,') center/70% no-repeat;-webkit-mask:url('data:image/svg+xml,') center/70% no-repeat}
.sh-sectie .voordeel em{font-style:normal;color:var(--paars);font-weight:800}
@media(max-width:820px){
.sh-sectie .voordelen{grid-template-columns:1fr}}
.sh-sectie .leden-zoek{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.sh-sectie .leden-zoek .mini-zoek{max-width:320px;flex:1;min-width:220px;margin:0;background:#fff;border:1px solid var(--lijn)}
.sh-sectie .leden-chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:14px}
.sh-sectie .leden-chips .vac-tag{border-color:var(--lijn);color:var(--paars)}
.sh-sectie .leden-chips .vac-tag.actief{background:var(--paars);border-color:var(--paars);color:#fff}
.sh-sectie .leden-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:36px}
.sh-sectie .lid-tegel{background:#fff;border:1px solid var(--lijn);border-radius:18px;padding:18px 12px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;transition:transform .18s ease,box-shadow .18s ease,border-color .18s}
.sh-sectie .lid-tegel:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--roze)}
.sh-sectie .lid-tegel .logo-vlak{width:54px;height:54px;border-radius:14px;background:var(--paars-05);color:var(--paars);display:grid;place-items:center;font-weight:900;font-size:.95rem}
.sh-sectie .lid-tegel b{font-size:.76rem;line-height:1.3;color:var(--ink)}
.sh-sectie .lid-tegel span{font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--steen);font-weight:700}
.sh-sectie .leden-grid .lid-tegel{animation:instroom .35s ease both}
.sh-sectie .leden-leeg{display:none;text-align:center;margin-top:28px;color:var(--steen)}
.sh-sectie .leden-leeg.zichtbaar{display:block}
.sh-sectie .leden-teller{text-align:center;margin-top:22px;font-size:.9rem;color:var(--steen);font-weight:700}
.sh-sectie .leden-teller b{color:var(--roze)}
@media(max-width:1000px){
.sh-sectie .leden-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){
.sh-sectie .leden-grid{grid-template-columns:repeat(2,1fr)}}
.sh-sectie .leden-ticker{background:#fff;border-bottom:1px solid var(--lijn);padding:22px 0;overflow:hidden}
.sh-sectie .leden-ticker .ticker-rij span{color:var(--steen);font-size:.92rem;letter-spacing:.1em}
.sh-sectie .leden-ticker .ticker-rij span i{color:var(--roze)}
.sh-sectie .foto img + .slot{display:none !important}
/* ── Werkgeverslogo op de ledentegel groter ────────────────────────────────────
Het logo-vlak was 54x54 vierkant met object-fit:contain, terwijl de logo|s vrijwel
allemaal breed zijn (circa 300x80). Een 300x80-logo paste zich dan in naar circa
44x12px, terwijl de tegel ruim 150px breed is. Als het vlak de volle tegelbreedte
krijgt en lager wordt, schaalt hetzelfde logo mee naar circa 150x40px. */
.sh-sectie .lid-tegel .logo-vlak {width:100%;height:64px;border-radius:12px;padding:10px 14px;overflow:hidden}
/* ⚠️ Hier staat bewust een vaste hoogte en geen height:100%.
Het vlak is display:grid met place-items:center (zie regel hierboven). In die context lost
height:100% op de afbeelding NIET op naar de contenthoogte van 44px (64px min 2x10px padding)
maar naar circa 58px, waardoor hoge logo's onder het vlak uitstaken en over de bedrijfsnaam
vielen. Gemeten op 7-8-2026: ARA (300x162) en Alteco (300x216) staken er het verst uit, want
hoe vierkanter het logo, hoe groter de overschrijding. Met een expliciete 44px klopt het voor
elk formaat, omdat object-fit:contain het beeld binnen die doos past.
Pas je de hoogte van het vlak aan, pas dan ook deze waarde aan (vlakhoogte min 20px padding). */
.sh-sectie .lid-tegel .logo-vlak img {width:100%;height:44px;max-height:44px;object-fit:contain}
/* ── Branchefilters: vijf in beeld, de rest achter een knop ────────────────────
Er zijn 21 branches in gebruik. Alle chips staan in de HTML (zodat de filter-JS
en zoekmachines ze zien), maar alles voorbij de eerste vijf krijgt .is-extra en
staat pas in beeld nadat de knop is ingedrukt. Het verbergen gebeurt bewust met
display:none en niet met een hoogte-animatie: de chips wikkelen over meerdere
regels, dus een vaste hoogte klopt nooit. */
.sh-sectie .leden-chips .vac-tag.is-extra{display:none}
.sh-sectie .leden-chips.is-open .vac-tag.is-extra{display:inline-flex}
.sh-sectie .leden-chips .leden-meer{cursor:pointer;border-style:dashed;font-weight:700}
.sh-sectie .leden-chips .leden-meer:hover{border-style:solid}
/* Zonder JavaScript is er niets om op te klikken; dan tonen we ze gewoon allemaal. */
.no-js .sh-sectie .leden-chips .vac-tag.is-extra{display:inline-flex}
.no-js .sh-sectie .leden-chips .leden-meer{display:none}
/* Let op: dezelfde .tier-regels staan ook in blokken-werkgevers.css, en dit
bestand laadt daarna. Aanpassingen aan de pakketkaarten horen dus hier,
anders komen ze niet aan. */
/* ---------------------------------------------------------------------------
Pakketkaarten: swipen op mobiel
Onder 920px stonden de drie kaarten onder elkaar in één kolom. Het effect van
de fte-schuif was daardoor onzichtbaar: de kaart die oplicht staat dan een
scherm verderop. Op smalle schermen worden het nu drie kaarten naast elkaar
waar je doorheen veegt, en fteschuif.js schuift de passende kaart in beeld.
--------------------------------------------------------------------------- */
@media (max-width: 920px) {
.sh-sectie .tiers {
display: flex;
grid-template-columns: none;
gap: 16px;
/* Buiten de wrap laten lopen, zodat de eerste kaart links uitlijnt met de
tekst en de volgende alvast half zichtbaar is: dat maakt zonder uitleg
duidelijk dat er meer kaarten zijn. */
margin-inline: -28px;
padding-inline: 28px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding-left: 28px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.sh-sectie .tiers::-webkit-scrollbar {
display: none;
}
/* `overflow-x: auto` maakt van de verticale as ook een scrollcontainer, dus
alles wat boven de kaart uitsteekt wordt afgeknipt. De badge "Populair"
staat op top:-15px en verdween daardoor half. Ruimte bovenin de scroller
lost dat op; de negatieve marge houdt het blok op zijn oude plek. */
.sh-sectie .tiers {
/* Boven voor de badge, onder voor de schaduw van de kaart (24px offset,
54px blur). Zonder de onderste ruimte eindigt de gloed in een harde
rechte lijn waar de scroller ophoudt. */
padding-top: 22px;
padding-bottom: 44px;
margin-top: 26px;
margin-bottom: -18px;
}
.sh-sectie .tier {
flex: 0 0 82%;
scroll-snap-align: start;
}
/* De populaire kaart naar voren halen werkt bij een verticale stapel, maar in
een swiper haalt het de volgorde van goedkoop naar duur uit elkaar. */
.sh-sectie .tier.populair {
order: 0;
}
/* Een omhoog schuivende kaart valt in een horizontale scroller half weg. Het
accent komt hier van de rand en de ring. */
.sh-sectie .tier.actief-tier,
.sh-sectie .tier:hover {
transform: none;
}
}
@media (max-width: 560px) {
.sh-sectie .tier {
flex-basis: 88%;
}
}