/* SmartHub 2026 - gedeelde basislaag
Automatisch afgeleid uit de 13 v4-conceptpagina's.
Volgorde volgt index.html zodat de cascade gelijk blijft. */
.sh-sectie *{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--papier);line-height:1.6;font-size:17px;overflow-x:hidden}
.sh-sectie img{max-width:100%;display:block}
.sh-sectie a{color:var(--paars)}
.sh-sectie :focus-visible{outline:3px solid var(--roze);outline-offset:3px;border-radius:4px}
.sh-sectie .skip{position:absolute;left:-999px;top:0;background:var(--paars);color:#fff;padding:10px 18px;z-index:99;border-radius:0 0 12px 0}
.sh-sectie .skip:focus{left:0}
.sh-sectie .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.sh-sectie h1, .sh-sectie h2, .sh-sectie h3{font-weight:900;text-transform:uppercase;line-height:1.05;letter-spacing:-.01em;text-wrap:balance}
.sh-sectie h1{font-size:clamp(2.5rem,5.4vw,4.4rem)}
.sh-sectie h2{font-size:clamp(1.9rem,3.7vw,2.85rem)}
.sh-sectie h3{font-size:clamp(1.12rem,2vw,1.45rem)}
.sh-sectie .accent{color:var(--roze)}
.sh-sectie .kicker{display:inline-flex;align-items:center;gap:10px;font-weight:800;text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;color:var(--paars);margin-bottom:16px}
.sh-sectie .kicker::before{content:"";width:26px;height:3px;background:var(--roze);border-radius:2px}
.sh-sectie .lead{font-size:1.13rem;color:var(--steen);max-width:660px}
.sh-sectie .center{text-align:center}
.sh-sectie .center .lead{margin-inline:auto}
.sh-sectie .btn{display:inline-flex;align-items:center;gap:10px;border-radius:var(--pill);padding:15px 30px;font-weight:800;text-decoration:none;font-size:1rem;border:2px solid transparent;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease}
.sh-sectie .btn svg{width:18px;height:18px;flex:none;transition:transform .18s ease}
.sh-sectie .btn:hover{transform:translateY(-2px)}
.sh-sectie .btn:hover svg{transform:translateX(4px)}
.sh-sectie .btn-roze{background:var(--roze);color:#fff;box-shadow:0 10px 24px rgba(209,0,116,.32)}
.sh-sectie .btn-roze:hover{box-shadow:0 16px 32px rgba(209,0,116,.42)}
.sh-sectie .btn-hairline{border:1.5px solid rgba(255,255,255,.85)}
.sh-sectie .btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.85)}
.sh-sectie .btn-ghost:hover{background:rgba(255,255,255,.14)}
.sh-sectie .btn-wit{background:#fff;color:var(--paars)}
.sh-sectie .btn-lijn{background:transparent;color:var(--paars);border-color:var(--paars)}
.sh-sectie .btn-lijn:hover{background:var(--paars);color:#fff}
.sh-sectie .btn-lijn-donker{background:transparent;color:var(--ink);border-color:var(--ink)}
.sh-sectie .btn-lijn-donker:hover{background:var(--ink);color:#fff}
.sh-sectie .link{font-weight:800;text-decoration:none;color:var(--paars);display:inline-flex;gap:8px;align-items:center}
.sh-sectie .link svg{transition:transform .18s ease}
.sh-sectie .link:hover{color:var(--roze)}
.sh-sectie .link:hover svg{transform:translateX(4px)}
.sh-sectie .knop-rij{display:flex;gap:14px;flex-wrap:wrap}
.sh-sectie .knop-midden{display:flex;justify-content:center;margin-top:38px}
.sh-sectie .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.sh-sectie .reveal.in{opacity:1;transform:none}
.sh-sectie .reveal.d1{transition-delay:.08s}
.sh-sectie .reveal.d2{transition-delay:.16s}
.sh-sectie .reveal.d3{transition-delay:.24s}
.sh-sectie .reveal.d4{transition-delay:.32s}
.sh-sectie header{position:sticky;top:0;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);z-index:60;border-bottom:1px solid var(--lijn)}
.sh-sectie .nav{display:grid;grid-template-columns:auto 1fr auto;align-items:center;height:88px;gap:24px}
.sh-sectie .nav .logo img{height:56px;width:auto}
.sh-sectie .nav ul.hoofd{display:flex;gap:8px;list-style:none;align-items:center;justify-content:center}
.sh-sectie .nav ul.hoofd>li>a{display:inline-block;text-decoration:none;color:var(--ink);font-weight:700;font-size:1rem;padding:10px 16px;border-radius:var(--pill);transition:background .15s,color .15s}
.sh-sectie .nav ul.hoofd>li>a:hover, .sh-sectie .nav li.open>a{background:var(--roze-08);color:var(--paars)}
.sh-sectie .nav .btn{padding:12px 24px;font-size:.94rem}
.sh-sectie .pijl{display:inline-block;width:9px;height:9px;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(45deg) translateY(-2px);margin-left:7px;transition:transform .2s}
.sh-sectie li.open .pijl{transform:rotate(225deg) translateY(-2px)}
.sh-sectie .mega{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--lijn);box-shadow:0 30px 60px rgba(29,18,32,.12);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .22s ease,transform .22s ease,visibility .22s}
.sh-sectie li.open .mega{opacity:1;visibility:visible;transform:none}
.sh-sectie .mega-in{max-width:var(--maxw);margin:0 auto;padding:38px 28px 42px;display:grid;grid-template-columns:1.15fr 2fr 1fr;gap:44px}
.sh-sectie .mega h4{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--steen);margin-bottom:16px;font-weight:800}
.sh-sectie .mega-intro p{color:var(--steen);font-size:.95rem;margin-bottom:18px}
.sh-sectie .mega-fases{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sh-sectie .mega-fase{display:flex;gap:14px;align-items:flex-start;text-decoration:none;padding:14px 16px;border-radius:16px;border:1px solid var(--lijn);transition:border-color .15s,background .15s,transform .15s}
.sh-sectie .mega-fase:hover{border-color:var(--roze);background:var(--roze-08);transform:translateY(-2px)}
.sh-sectie .mega-fase b{display:block;color:var(--ink);font-size:.98rem}
.sh-sectie .mega-fase span{font-size:.82rem;color:var(--steen);line-height:1.45;display:block}
.sh-sectie .mega-fase .dot{flex:none;width:12px;height:12px;border-radius:50%;margin-top:6px;background:var(--roze)}
.sh-sectie .mega-fase.mf2 .dot{background:var(--paars)}
.sh-sectie .mega-fase.mf3 .dot{background:#B4437F}
.sh-sectie .mega-fase.mf4 .dot{background:var(--ink)}
.sh-sectie .mega-links{list-style:none;display:grid;gap:10px}
.sh-sectie .mega-links a{text-decoration:none;color:var(--ink);font-weight:700;font-size:.95rem}
.sh-sectie .mega-links a:hover{color:var(--roze)}
@media(max-width:980px){
.sh-sectie .nav ul.hoofd{display:none}
.sh-sectie .nav{grid-template-columns:auto auto;justify-content:space-between}}
.sh-sectie .hero{position:relative;min-height:min(88vh,820px);display:flex;align-items:center;color:#fff;overflow:hidden;isolation:isolate}
.sh-sectie .hero-bg{position:absolute;inset:0;z-index:-3}
.sh-sectie .hero-bg img{width:100%;height:100%;object-fit:cover;animation:kenburns 22s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.09)}}
.sh-sectie .hero-tint{position:absolute;inset:0;z-index:-2;background:linear-gradient(105deg,rgba(92,8,63,.96) 8%,rgba(162,0,103,.82) 46%,rgba(92,8,63,.55) 100%)}
.sh-sectie .hero-net{position:absolute;inset:0;z-index:-1;opacity:.5}
.sh-sectie .hero-in{padding:110px 0 130px;max-width:720px}
.sh-sectie .hero .kicker{color:#fff}
.sh-sectie .hero .kicker::before{background:var(--roos)}
.sh-sectie .hero h1{opacity:0;animation:rijz .8s ease .1s forwards}
.sh-sectie .hero h1 .r2{color:var(--roos);display:block}
.sh-sectie .hero p.sub{margin:24px 0 34px;font-size:1.2rem;color:rgba(255,255,255,.9);max-width:560px;opacity:0;animation:rijz .8s ease .25s forwards}
.sh-sectie .hero .knop-rij{opacity:0;animation:rijz .8s ease .4s forwards}
.sh-sectie .hero-note{margin-top:16px;font-size:.86rem;color:rgba(255,255,255,.65);opacity:0;animation:rijz .8s ease .55s forwards}
@keyframes rijz{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.sh-sectie .scrollhint{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);width:26px;height:42px;border:2px solid rgba(255,255,255,.5);border-radius:14px}
.sh-sectie .scrollhint::after{content:"";position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:#fff;animation:drop 1.8s ease infinite}
@keyframes drop{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}
.sh-sectie .ticker{background:linear-gradient(90deg,var(--roze),var(--paars));color:#fff;overflow:hidden;padding:15px 0}
.sh-sectie .ticker-rij{display:flex;gap:0;width:max-content;animation:loop 30s linear infinite}
.sh-sectie .ticker:hover .ticker-rij{animation-play-state:paused}
.sh-sectie .ticker span{font-weight:900;text-transform:uppercase;letter-spacing:.18em;font-size:.85rem;padding:0 26px;white-space:nowrap;color:#fff}
.sh-sectie .ticker span i{font-style:normal;color:var(--roos);padding-right:26px}
@keyframes loop{to{transform:translateX(-50%)}}
.sh-sectie .stats{background:var(--ink);color:#fff}
.sh-sectie .stat b{display:block;font-size:2.2rem;font-weight:900;color:#fff;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.sh-sectie .stat span{font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:#fff;font-weight:700}
@media(max-width:900px){
.sh-sectie .stats-in{grid-template-columns:1fr 1fr}
.sh-sectie .stats h2{grid-column:1/-1}}
/* sectieritme-basis: stond alleen in de paginalagen, waardoor een pagina zonder laag
0px ruimte tussen de secties kreeg. Zelfde waarde, dus geen zichtbaar verschil waar
een paginalaag wel laadt. Moet voor de 900px-query staan. */
.sh-sectie section{padding:96px 0;position:relative;scroll-margin-top:92px}
.sh-sectie .sectie-veld{background:var(--veld)}
.sh-sectie .duo{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
@media(max-width:900px){
.sh-sectie .duo{grid-template-columns:1fr}
.sh-sectie section{padding:64px 0}}
.sh-sectie .foto{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-zwaar);aspect-ratio:4/3;background:
linear-gradient(140deg,rgba(162,0,103,.16),rgba(209,0,116,.10)),
repeating-linear-gradient(-45deg,var(--paars-05) 0 18px,#fff 18px 36px)}
.sh-sectie .foto .slot{position:absolute;inset:0;display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center;text-align:center;padding:26px;color:var(--paars)}
.sh-sectie .foto .slot svg{width:34px;height:34px;opacity:.7}
.sh-sectie .foto .slot b{font-size:.86rem;max-width:90%;line-height:1.4}
.sh-sectie .foto .slot small{font-size:.72rem;color:var(--steen);letter-spacing:.06em;text-transform:uppercase}
.sh-sectie .foto img{position:relative;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.sh-sectie .foto .slot{transition:transform .6s ease}
.sh-sectie .foto:hover img, .sh-sectie a:hover .foto img, .sh-sectie .verhaal:hover .foto img, .sh-sectie .fase-paneel .fase-foto:hover img{transform:scale(1.06)}
.sh-sectie .foto:hover .slot, .sh-sectie .verhaal:hover .foto .slot{transform:scale(1.04)}
.sh-sectie .duo-strak{align-items:stretch}
.sh-sectie .duo-strak .foto{aspect-ratio:auto;height:100%;min-height:380px}
.sh-sectie .kader-roze{position:absolute;inset:auto;z-index:-1}
.sh-sectie .manifest{background:linear-gradient(150deg,var(--roze),var(--paars) 70%);color:#fff;text-align:center;padding:110px 0 120px;overflow:hidden;position:relative}
.sh-sectie .manifest .kicker{color:#fff}
.sh-sectie .manifest .kicker::before{background:#fff}
.sh-sectie .manifest h2{max-width:960px;margin:0 auto;font-size:clamp(1.95rem,4.3vw,3.3rem)}
.sh-sectie .manifest h2 em{font-style:normal;color:var(--roos)}
.sh-sectie .tegels{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;max-width:980px;margin:56px auto 0}
.sh-sectie .tegel{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:20px;padding:14px 14px 16px;backdrop-filter:blur(3px);transition:transform .25s ease}
.sh-sectie .tegel:nth-child(odd){transform:rotate(-1.6deg)}
.sh-sectie .tegel:nth-child(even){transform:rotate(1.4deg) translateY(10px)}
.sh-sectie .tegel:hover{transform:rotate(0) translateY(-6px)}
.sh-sectie .tegel .foto{aspect-ratio:1/1;box-shadow:none;border-radius:14px;background:linear-gradient(140deg,rgba(255,255,255,.25),rgba(255,255,255,.08))}
.sh-sectie .tegel .foto .slot{color:#fff;padding:14px}
.sh-sectie .tegel .foto .slot b{font-size:.68rem}
.sh-sectie .tegel .foto .slot small{color:rgba(255,255,255,.7);font-size:.6rem}
.sh-sectie .tegel figcaption{margin-top:12px;font-weight:800;font-size:.86rem;letter-spacing:.08em;text-transform:uppercase}
.sh-sectie .manifest .site{margin-top:52px;font-weight:900;letter-spacing:.3em;font-size:.95rem;color:rgba(255,255,255,.65)}
@media(max-width:820px){
.sh-sectie .tegels{grid-template-columns:1fr 1fr}}
.sh-sectie .routes{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:46px}
.sh-sectie .route{position:relative;background:#fff;border:1px solid var(--lijn);border-radius:var(--radius);padding:40px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:14px;overflow:hidden;transition:transform .22s ease,box-shadow .22s ease;text-decoration:none;color:inherit;cursor:pointer}
.sh-sectie .route:hover .link svg{transform:translateX(4px)}
.sh-sectie .route:hover{transform:translateY(-6px);box-shadow:var(--shadow-zwaar)}
.sh-sectie .route .beeldlaag{position:absolute;inset:0;opacity:0;transition:opacity .3s ease;background:linear-gradient(160deg,rgba(162,0,103,.92),rgba(209,0,116,.88)),repeating-linear-gradient(-45deg,rgba(255,255,255,.06) 0 16px,transparent 16px 32px)}
.sh-sectie .route:hover .beeldlaag, .sh-sectie .route:focus-within .beeldlaag{opacity:1}
.sh-sectie .route .inhoud{position:relative;display:flex;flex-direction:column;gap:14px;flex:1;transition:color .25s}
.sh-sectie .route:hover .inhoud, .sh-sectie .route:hover .inhoud p, .sh-sectie .route:hover .inhoud .link{color:#fff}
.sh-sectie .route .beeldnaam{position:absolute;right:16px;bottom:14px;font-size:.66rem;color:rgba(255,255,255,.75);opacity:0;transition:opacity .3s;max-width:70%;text-align:right}
.sh-sectie .route:hover .beeldnaam{opacity:1}
.sh-sectie .route .tag{align-self:flex-start;font-size:.74rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:7px 14px;border-radius:var(--pill)}
.sh-sectie .route.talent .tag{background:var(--roze-08);color:var(--roze)}
.sh-sectie .route.werkgever .tag{background:var(--paars-05);color:var(--paars)}
.sh-sectie .route:hover .tag{background:rgba(255,255,255,.2);color:#fff}
.sh-sectie .route p{color:var(--steen)}
.sh-sectie .route .link{margin-top:auto}
@media(max-width:820px){
.sh-sectie .routes{grid-template-columns:1fr}}
.sh-sectie .fase-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:44px 0 0;border:0}
.sh-sectie .fase-tab{border:2px solid var(--lijn);background:#fff;border-radius:var(--pill);padding:13px 24px;font-family:inherit;font-weight:800;font-size:.95rem;cursor:pointer;color:var(--steen);transition:all .2s ease}
.sh-sectie .fase-tab:hover{border-color:var(--roze);color:var(--paars)}
.sh-sectie .fase-tab[aria-selected="true"]{background:var(--paars);border-color:var(--paars);color:#fff;box-shadow:0 10px 24px rgba(162,0,103,.3)}
.sh-sectie .fase-paneel{display:none;margin-top:34px;background:#fff;border:1px solid var(--lijn);border-radius:calc(var(--radius) + 6px);box-shadow:var(--shadow);overflow:hidden}
.sh-sectie .fase-paneel.actief{display:grid;grid-template-columns:1.1fr .9fr;animation:fadein .45s ease}
@keyframes fadein{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.sh-sectie .fase-tekst{padding:44px 46px;display:flex;flex-direction:column;gap:14px}
.sh-sectie .fase-tekst .wie{font-size:.74rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--roze)}
.sh-sectie .fase-tekst p{color:var(--steen)}
.sh-sectie .fase-tekst ul{list-style:none;display:grid;gap:10px;margin:8px 0 18px}
.sh-sectie .fase-tekst li{font-weight:600;padding-left:22px;position:relative;font-size:.97rem}
.sh-sectie .fase-tekst li::before{content:"—";position:absolute;left:0;color:var(--roze);font-weight:900}
.sh-sectie .fase-foto{position:relative;min-height:340px}
.sh-sectie .fase-foto .foto{position:absolute;inset:0;border-radius:0;box-shadow:none;aspect-ratio:auto}
@media(max-width:880px){
.sh-sectie .fase-paneel.actief{grid-template-columns:1fr}
.sh-sectie .fase-foto{min-height:240px}}
.sh-sectie .programmas{background:var(--ink);color:#fff;overflow:hidden}
.sh-sectie .programmas .bg{position:absolute;inset:0;opacity:.22;background:
linear-gradient(160deg,rgba(29,18,32,.4),rgba(29,18,32,.9)),
repeating-linear-gradient(-45deg,rgba(162,0,103,.35) 0 22px,transparent 22px 44px)}
.sh-sectie .programmas .bg-naam{position:absolute;right:20px;top:18px;font-size:.68rem;color:rgba(255,255,255,.45);z-index:1}
.sh-sectie .programmas .wrap{position:relative;z-index:2}
.sh-sectie .programmas .kicker{color:var(--roos)}
.sh-sectie .programmas .lead{color:rgba(255,255,255,.78)}
.sh-sectie .hubs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:48px}
.sh-sectie .hub{border-radius:var(--radius);padding:38px 32px;color:#fff;display:flex;flex-direction:column;gap:14px;min-height:360px;border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(6px);transition:transform .22s ease,border-color .22s,box-shadow .22s;text-decoration:none;cursor:pointer}
.sh-sectie .hub:hover{transform:translateY(-8px);border-color:rgba(255,255,255,.45);box-shadow:0 26px 60px rgba(0,0,0,.35)}
.sh-sectie .hub:hover .link svg{transform:translateX(6px)}
.sh-sectie .hub .extern{font-size:.7rem;color:rgba(255,255,255,.6);margin-left:10px;border:1px solid rgba(255,255,255,.35);border-radius:var(--pill);padding:3px 10px;white-space:nowrap;align-self:center}
.sh-sectie .hub .link{white-space:nowrap;flex-wrap:nowrap}
.sh-sectie .hub.h1{background:linear-gradient(160deg,rgba(209,0,116,.92),rgba(156,0,87,.92))}
.sh-sectie .hub.h2{background:linear-gradient(160deg,rgba(162,0,103,.92),rgba(92,8,63,.92))}
.sh-sectie .hub.h3{background:linear-gradient(160deg,rgba(62,55,67,.9),rgba(29,18,32,.94))}
.sh-sectie .hub .tag{align-self:flex-start;font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:6px 13px;border-radius:var(--pill);background:rgba(255,255,255,.16)}
.sh-sectie .hub p{color:rgba(255,255,255,.86);font-size:.97rem}
.sh-sectie .hub .voor{font-size:.82rem;font-weight:700;color:rgba(255,255,255,.62)}
.sh-sectie .hub .voor b{color:#fff}
.sh-sectie .hub .link{color:#fff;margin-top:auto}
@media(max-width:900px){
.sh-sectie .hubs{grid-template-columns:1fr}}
.sh-sectie .wg-kop{max-width:820px}
.sh-sectie .wg-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;margin-top:52px;align-items:stretch}
.sh-sectie .wg-grid>div:first-child{display:flex;flex-direction:column;gap:26px}
.sh-sectie .wg-grid .quote{margin-top:0;flex:1}
.sh-sectie .wg-kaart.cta{justify-content:center}
.sh-sectie .btn-klein{padding:11px 20px;font-size:.9rem}
.sh-sectie .quote{background:#fff;border-radius:var(--radius);padding:34px 36px;box-shadow:var(--shadow);position:relative;margin-top:26px}
.sh-sectie .quote::before{content:"“";position:absolute;top:-30px;left:26px;font-size:6rem;font-weight:900;color:var(--roze);line-height:1;font-family:Georgia,serif}
.sh-sectie .quote p{font-weight:700;font-size:1.12rem;line-height:1.55}
.sh-sectie .quote span{display:block;margin-top:14px;font-size:.86rem;color:var(--steen);font-weight:700}
.sh-sectie .wg-kaart{background:#fff;border:1px solid var(--lijn);border-radius:var(--radius);padding:36px;display:flex;flex-direction:column;gap:10px}
.sh-sectie .wg-kaart.cta{background:linear-gradient(160deg,var(--paars),#5C083F);color:#fff;border:0;box-shadow:0 24px 54px rgba(162,0,103,.35)}
.sh-sectie .wg-kaart.cta h3{color:#fff}
.sh-sectie .wg-kaart.cta p{color:rgba(255,255,255,.85)}
.sh-sectie .checks{list-style:none;display:grid;gap:12px;margin:14px 0 4px}
.sh-sectie .checks li{display:flex;gap:12px;align-items:flex-start;font-weight:600;font-size:.98rem}
.sh-sectie .checks li::before{content:"";flex:none;width:22px;height:22px;margin-top:2px;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 .wg-kaart.cta .checks li::before{background:var(--roos)}
.sh-sectie .zeker{display:flex;gap:18px;margin-top:16px;font-size:.8rem;color:rgba(255,255,255,.7);flex-wrap:wrap}
.sh-sectie .zeker span{display:inline-flex;gap:7px;align-items:center}
@media(max-width:920px){
.sh-sectie .wg-grid{grid-template-columns:1fr}}
.sh-sectie .agenda{background:var(--veld)}
.sh-sectie .agenda-grid{display:grid;grid-template-columns:.9fr 1.35fr;gap:48px;margin-top:48px;align-items:stretch}
.sh-sectie .agenda-grid .events{justify-content:space-between;align-content:space-between}
.sh-sectie .agenda-beeld{position:relative;border-radius:var(--radius);overflow:hidden;min-height:420px}
.sh-sectie .agenda-beeld .foto{position:absolute;inset:0;aspect-ratio:auto;border-radius:0;box-shadow:none}
.sh-sectie .agenda-beeld .beeldlabel{position:absolute;left:18px;bottom:18px;z-index:2;background:rgba(29,18,32,.72);color:#fff;padding:12px 18px;border-radius:16px;font-size:.85rem;font-weight:700;backdrop-filter:blur(4px)}
.sh-sectie .events{display:grid;gap:16px}
.sh-sectie .event{position:relative;display:grid;grid-template-columns:104px 1fr auto;gap:22px;align-items:center;background:#fff;border:1px solid var(--lijn);border-radius:var(--radius);padding:22px 26px;transition:transform .2s ease,box-shadow .2s ease}
.sh-sectie .event h3 a{color:inherit;text-decoration:none}
.sh-sectie .event h3 a::after{content:"";position:absolute;inset:0;border-radius:var(--radius)}
.sh-sectie .event h3 a:hover{color:var(--paars)}
.sh-sectie .event .btn{position:relative;z-index:2}
.sh-sectie .event:hover{transform:translateX(8px);box-shadow:var(--shadow)}
.sh-sectie .event .datum{text-align:center;background:var(--paars-05);border-radius:16px;padding:13px 8px}
.sh-sectie .event .datum b{display:block;font-size:1.8rem;font-weight:900;color:var(--paars);line-height:1}
.sh-sectie .event .datum span{font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--steen)}
.sh-sectie .event .tag{display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--roze);margin-bottom:5px}
.sh-sectie .event h3{text-transform:none;font-size:1.12rem;letter-spacing:0}
.sh-sectie .event p{font-size:.88rem;color:var(--steen)}
@media(max-width:960px){
.sh-sectie .agenda-grid{grid-template-columns:1fr}
.sh-sectie .agenda-beeld{min-height:280px}}
@media(max-width:640px){
.sh-sectie .event{grid-template-columns:86px 1fr}
.sh-sectie .event .btn{grid-column:1/-1;justify-content:center}}
.sh-sectie .verhalen{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:46px}
.sh-sectie .verhaal{background:#fff;border:1px solid var(--lijn);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .22s ease,box-shadow .22s ease;text-decoration:none;color:inherit}
.sh-sectie .verhaal:hover .link{color:var(--roze)}
.sh-sectie .verhaal:hover .link svg{transform:translateX(4px)}
.sh-sectie .verhaal:hover{transform:translateY(-6px);box-shadow:var(--shadow-zwaar)}
.sh-sectie .verhaal .beeld{position:relative;aspect-ratio:16/10;overflow:hidden}
.sh-sectie .verhaal .beeld .foto{position:absolute;inset:0;aspect-ratio:auto;border-radius:0;box-shadow:none}
.sh-sectie .verhaal .body{padding:26px;display:flex;flex-direction:column;gap:10px;flex:1}
.sh-sectie .verhaal .tag{align-self:flex-start;font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--roze)}
.sh-sectie .verhaal h3{text-transform:none;letter-spacing:0;font-size:1.06rem;line-height:1.4}
.sh-sectie .verhaal .wie{font-size:.85rem;color:var(--steen);font-weight:600}
.sh-sectie .verhaal .link{margin-top:auto;font-size:.92rem}
@media(max-width:900px){
.sh-sectie .verhalen{grid-template-columns:1fr}}
.sh-sectie .portaal{background:linear-gradient(160deg,var(--ink),#3A2440);color:#fff;overflow:hidden}
.sh-sectie .portaal .kicker{color:var(--roos)}
.sh-sectie .portaal p{color:rgba(255,255,255,.82)}
.sh-sectie .mail-label{display:block;margin:26px 0 10px;font-size:.8rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--roos)}
.sh-sectie .mail{display:flex;gap:6px;background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.35);border-radius:var(--pill);padding:6px 6px 6px 24px;max-width:520px;transition:border-color .2s,background .2s}
.sh-sectie .mail:focus-within{border-color:#fff;background:rgba(255,255,255,.16)}
.sh-sectie .mail input{flex:1;min-width:0;border:0;background:transparent;color:#fff;font-size:1rem;font-family:inherit;outline:none}
.sh-sectie .mail input::placeholder{color:rgba(255,255,255,.65)}
.sh-sectie .mail .btn{flex:none}
.sh-sectie .mock{position:relative;min-height:560px}
.sh-sectie .mkaart{position:absolute;background:#fff;color:var(--ink);border-radius:18px;padding:18px 20px;box-shadow:0 24px 60px rgba(0,0,0,.4);animation:zweef 6s ease-in-out infinite}
.sh-sectie .mkaart b{display:block;font-size:.92rem}
.sh-sectie .mkaart span{font-size:.78rem;color:var(--steen)}
.sh-sectie .mkaart .mtag{display:inline-block;font-size:.64rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--roze);border-radius:var(--pill);padding:4px 10px;margin-bottom:8px}
.sh-sectie .mk1{top:2%;left:4%;width:62%;animation-delay:0s}
.sh-sectie .mk2{top:22%;right:0;width:58%;animation-delay:1.4s}
.sh-sectie .mk3{top:44%;left:8%;width:56%;animation-delay:2.8s}
.sh-sectie .mk4{top:64%;right:4%;width:54%;animation-delay:1s}
.sh-sectie .mk5{bottom:0;left:14%;width:58%;animation-delay:2.2s}
@keyframes zweef{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.sh-sectie .roadmap{list-style:none;display:grid;gap:12px;margin-top:28px}
.sh-sectie .roadmap li{display:flex;gap:16px;align-items:center;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:14px 18px;font-size:.95rem;transition:transform .2s ease,border-color .2s,background .2s;cursor:default}
.sh-sectie .roadmap li:hover{transform:translateX(8px);border-color:var(--roos);background:rgba(255,255,255,.12)}
.sh-sectie .roadmap li.live .wanneer{position:relative;padding-left:24px}
.sh-sectie .roadmap li.live .wanneer::before{content:"";position:absolute;left:10px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:#fff;animation:puls 1.6s ease infinite}
@keyframes puls{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.5)}}
.sh-sectie .roadmap .wanneer{flex:none;font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:6px 13px;border-radius:var(--pill);background:rgba(255,255,255,.14)}
.sh-sectie .roadmap li.live .wanneer{background:var(--roze)}
@media(max-width:900px){
.sh-sectie .mock{display:none}}
.sh-sectie .faq{max-width:840px;margin:46px auto 0}
.sh-sectie .faq details{background:#fff;border:1px solid var(--lijn);border-radius:18px;margin-bottom:12px;overflow:hidden;transition:box-shadow .2s}
.sh-sectie .faq details[open]{box-shadow:var(--shadow)}
.sh-sectie .faq summary{cursor:pointer;padding:22px 26px;font-weight:800;font-size:1.03rem;list-style:none;display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center}
.sh-sectie .faq summary::-webkit-details-marker{display:none}
.sh-sectie .faq summary .plus{width:30px;height:30px;border-radius:50%;background:var(--roze-08);color:var(--roze);display:grid;place-items:center;font-size:1.3rem;font-weight:900;line-height:1;transition:transform .25s,background .25s,color .25s}
.sh-sectie .faq details[open] .plus{transform:rotate(45deg);background:var(--roze);color:#fff}
.sh-sectie .faq .antwoord{padding:0 26px 24px;color:var(--steen)}
.sh-sectie .faq .antwoord a{font-weight:700}
.sh-sectie .slot{background:linear-gradient(120deg,var(--paars),var(--roze));color:#fff;text-align:center;padding:84px 0;overflow:hidden;position:relative}
.sh-sectie .slot h2{font-size:clamp(2.2rem,5vw,3.8rem);position:relative;z-index:1}
.sh-sectie .slot h2 .w{display:inline-block;opacity:0;transform:translateY(26px)}
.sh-sectie .slot.in h2 .w{animation:rijz .6s ease forwards}
.sh-sectie .slot h2 .w:nth-child(2){animation-delay:.12s}
.sh-sectie .slot h2 .w:nth-child(3){animation-delay:.24s}
.sh-sectie .slot h2 .w:nth-child(4){animation-delay:.36s}
.sh-sectie .slot .knop-rij{justify-content:center;margin-top:30px;position:relative;z-index:1;opacity:0;transition:opacity .5s ease 1s}
.sh-sectie .slot.in .knop-rij{opacity:1}
.sh-sectie footer{background:var(--ink);color:rgba(255,255,255,.75);padding:74px 0 34px;font-size:.94rem}
.sh-sectie .f-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:36px}
.sh-sectie .f-grid h4{color:#fff;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px}
.sh-sectie .f-grid ul{list-style:none;display:grid;gap:9px}
.sh-sectie .f-grid a{color:rgba(255,255,255,.75);text-decoration:none;transition:color .15s}
.sh-sectie .f-grid a:hover{color:var(--roos)}
.sh-sectie .f-logo{height:48px;width:auto;margin-bottom:16px;filter:brightness(0) invert(1)}
.sh-sectie .f-bottom{border-top:1px solid rgba(255,255,255,.14);margin-top:44px;padding-top:24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.82rem;color:rgba(255,255,255,.5)}
@media(max-width:900px){
.sh-sectie .f-grid{grid-template-columns:1fr 1fr}}
@media (prefers-reduced-motion:reduce){
.sh-sectie *, .sh-sectie *::before, .sh-sectie *::after{animation:none!important;transition:none!important}
.sh-sectie .reveal{opacity:1;transform:none}
html{scroll-behavior:auto}
}
.sh-sectie .hero.tint-a .hero-tint{background:linear-gradient(135deg,rgba(162,0,103,.86),rgba(209,0,116,.68))}
.sh-sectie .hero.tint-b .hero-tint{background:linear-gradient(100deg,rgba(29,18,32,.88) 0%,rgba(162,0,103,.70) 32%,rgba(162,0,103,.28) 60%,rgba(209,0,116,.10) 100%)}
.sh-sectie .hero.tint-c .hero-tint{background:linear-gradient(100deg,rgba(29,18,32,.74) 0%,rgba(29,18,32,.38) 44%,rgba(29,18,32,0) 72%),linear-gradient(0deg,rgba(162,0,103,.16),rgba(162,0,103,.16))}
/* ── Hero-inhoud op de contentlijn ─────────────────────────────────────────────
.hero is een flex-container. Een .wrap daarbinnen is dus een flex-item en groeit
niet vanzelf naar zijn max-width van 1200px: hij krimpt tot de breedte van
.hero-in (720px) en wordt door margin:0 auto in het midden gezet. Daardoor stond
de herotekst zo|n 300px naar binnen ten opzichte van het logo en de rest van de
pagina. Met width:100% vult de wrap de regel tot 1200px en begint .hero-in weer
op dezelfde linkerlijn als alle andere secties.
Zat ook al zo in het oorspronkelijke concept; dit is dus geen omzettingsfout. */
.sh-sectie .hero > .wrap {width:100%}
/* ---------------------------------------------------------------------------
Loginkeuze in de header
De knop klapt twee opties uit: werkgevers kunnen door naar het portaal, talent
nog niet. Die tweede staat er uitgeschakeld bij, zodat zichtbaar is dat het
eraan komt.
--------------------------------------------------------------------------- */
.login-menu {
position: relative;
}
a.login-menu__knop,
.login-menu__knop {
display: inline-flex;
align-items: center;
gap: 9px;
cursor: pointer;
text-decoration: none;
}
.login-slot {
width: 17px;
height: 17px;
flex: 0 0 auto;
}
.login-menu__paneel {
position: absolute;
top: calc(100% + 10px);
right: 0;
z-index: 60;
min-width: 268px;
padding: 8px;
border: 1px solid var(--lijn);
border-radius: 14px;
background: #fff;
box-shadow: 0 18px 44px rgba(29, 18, 32, .16);
}
.login-optie {
display: block;
padding: 12px 14px;
border-radius: 10px;
text-decoration: none;
color: var(--ink);
}
.login-optie strong {
display: block;
font-size: .96rem;
line-height: 1.25;
}
.login-optie span {
display: block;
margin-top: 2px;
font-size: .82rem;
color: var(--steen);
}
a.login-optie:hover,
a.login-optie:focus-visible {
background: var(--veld);
color: var(--paars);
}
.login-optie--uit {
opacity: .55;
cursor: not-allowed;
}
/* In het mobiele paneel staat de keuze open en is er geen knop. */
.login-menu--open .login-menu__paneel {
position: static;
min-width: 0;
margin-top: 8px;
padding: 0;
border: 0;
box-shadow: none;
background: transparent;
}
.login-menu__kop {
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 800;
font-size: .78rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--steen);
}
.login-menu--open .login-optie {
padding-inline: 0;
border-bottom: 1px solid var(--lijn);
border-radius: 0;
}
.login-menu--open .login-optie:last-child {
border-bottom: 0;
}
/* Onder 980px verdwijnt het hoofdmenu en komt de hamburger ervoor in de plaats.
De navigatiebalk staat daar op twee grid-kolommen, terwijl er dan drie dingen
in staan: logo, loginknop en hamburger. Het derde item viel daardoor onder de
header. Flex met space-between kan wél met drie, en de loginknop krimpt tot
alleen het slotje zodat er ruimte overblijft voor het logo. */
@media (max-width: 980px) {
.sh-sectie .nav {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.sh-sectie .nav .login-menu {
margin-left: auto;
}
.sh-sectie .nav .login-menu__knop {
padding: 12px;
gap: 0;
}
.sh-sectie .nav .login-menu__knop > span {
/* Weg uit beeld, maar wel voorleesbaar: een knop met alleen een icoon
heeft nog steeds een naam nodig. */
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.sh-sectie .nav .login-slot {
width: 19px;
height: 19px;
}
.login-menu__paneel {
right: -8px;
min-width: 244px;
}
}
/* De manifesttegels kunnen doorlinken naar de vier levensfasen. Het anker ligt
om beeld én bijschrift, zodat de hele tegel één klikgebied is. */
.sh-sectie .tegel__link {
display: block;
color: inherit;
text-decoration: none;
}
.sh-sectie .tegel--link .foto {
transition: transform .3s ease, box-shadow .3s ease;
}
.sh-sectie .tegel--link:hover .foto,
.sh-sectie .tegel__link:focus-visible .foto {
transform: translateY(-4px);
box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
}
.sh-sectie .tegel--link figcaption {
display: inline-flex;
align-items: center;
gap: 6px;
}
.sh-sectie .tegel__pijl {
width: 15px;
height: 15px;
opacity: 0;
transform: translateX(-4px);
transition: opacity .25s ease, transform .25s ease;
}
.sh-sectie .tegel--link:hover .tegel__pijl,
.sh-sectie .tegel__link:focus-visible .tegel__pijl {
opacity: 1;
transform: translateX(0);
}