/* HetWerkt.net — Wie het laat werken (vacature) en Welkom (de nieuwe CEO) */

.wie-kopknop{margin-top:34px}

/* ───── Het organogram: alles is vervuld, bovenaan is ruimte ───── */
.wie-org{margin-top:clamp(40px,6vw,70px);padding:clamp(30px,5vw,60px) clamp(14px,3vw,40px) clamp(28px,4vw,50px);display:flex;flex-direction:column;gap:clamp(70px,10vw,130px);overflow:hidden}
.wie-org-lijnen{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.wie-org-lijnen path{fill:none;stroke:rgba(143,107,255,.32);stroke-width:1.2}
.wie-org-lijnen circle{fill:var(--lila);filter:drop-shadow(0 0 6px var(--paars-licht))}
.wie-org-top{display:flex;justify-content:center}
.wie-org-rij{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(8px,1.4vw,18px)}
.wie-knoop{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;padding:16px 10px 14px;border-radius:16px;
  background:rgba(10,5,22,.92);border:1px solid rgba(143,107,255,.45);box-shadow:0 0 30px -10px rgba(143,107,255,.8);transition:border-color .4s,box-shadow .4s,transform .5s var(--zacht)}
.wie-knoop b{font-size:clamp(.82rem,1.3vw,1.02rem);font-weight:700;letter-spacing:-.02em;line-height:1.2}
.wie-knoop small{display:inline-flex;align-items:center;gap:7px;font:500 .62rem var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--tekst-dof)}
.wie-knoop:hover{border-color:var(--lila)}
.wie-knoop-open{padding:22px clamp(20px,4vw,44px) 20px;border:1.5px dashed rgba(255,122,26,.75);background:rgba(20,8,2,.88);box-shadow:0 0 60px -12px var(--oranje-gloed);animation:wieWenk 3.4s ease-in-out infinite}
.wie-knoop-open b{font-size:clamp(1rem,1.9vw,1.4rem)}
.wie-knoop-open small{color:var(--oranje)}
.wie-knoop-open:hover{transform:translateY(-3px);border-color:var(--oranje);box-shadow:0 0 80px -8px var(--oranje-gloed)}
.wie-org.is-uit .wie-knoop-open{animation-play-state:paused}
@keyframes wieWenk{0%,100%{box-shadow:0 0 50px -16px var(--oranje-gloed)}50%{box-shadow:0 0 90px -6px var(--oranje-gloed)}}
@media (max-width:700px){
  .wie-org-rij{grid-template-columns:repeat(6,minmax(0,1fr))}
  .wie-org-rij .wie-knoop{grid-column:span 2}
  .wie-org-rij .wie-knoop:nth-child(4){grid-column:2/span 2}
  .wie-org-rij .wie-knoop:nth-child(5){grid-column:4/span 2}
  .wie-knoop{padding:12px 4px 10px}
}

/* ───── De lijst met functies ───── */
.wie-filters{margin-top:clamp(30px,5vw,50px)}
@media (min-width:761px){.wie-filters{grid-template-columns:repeat(2,minmax(0,1fr)) auto}}
.wie-lijst{margin-top:14px;display:grid;gap:8px;transition:opacity .35s,filter .35s}
.wie-lijst.is-filteren{opacity:.25;filter:blur(6px);pointer-events:none}
.wie-rij{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1fr) minmax(0,1fr) auto;align-items:center;gap:16px;padding:17px 22px;border-radius:16px;color:var(--tekst-dof)}
.wie-rij-naam{font-weight:700;letter-spacing:-.02em;font-size:1.05rem;color:var(--tekst-zacht)}
.wie-rij-afd,.wie-rij-omv{font-size:.9rem}
.wie-rij-status{display:inline-flex;align-items:center;gap:9px;min-width:8.5ch;justify-content:flex-end;font:500 .68rem var(--mono);letter-spacing:.09em;text-transform:uppercase}
a.wie-rij-open{border-color:rgba(255,122,26,.42);color:var(--tekst-zacht);transition:transform .5s var(--zacht),border-color .3s,box-shadow .4s;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 30px 80px -36px rgba(255,122,26,.5)}
a.wie-rij-open:hover{transform:translateX(6px);border-color:var(--oranje)}
.wie-rij-open .wie-rij-naam{color:var(--tekst)}
.wie-rij-open .wie-rij-status{color:var(--oranje)}
@media (max-width:640px){
  .wie-rij{grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:15px 16px}
  .wie-rij-afd,.wie-rij-omv{display:none}
}

/* ───── De vacature ───── */
.wie-vac{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(30px,6vw,90px);align-items:start}
.wie-proza{margin-top:clamp(30px,4vw,50px)}
.wie-proza h3:first-child{margin-top:0}
.wie-proza li{padding-left:.2em}
.wie-zij{position:sticky;top:96px}
.wie-kaart{padding:clamp(22px,3vw,32px);display:flex;flex-direction:column;gap:22px;border-color:rgba(255,122,26,.3)}
.wie-feiten{margin:0;display:grid}
.wie-feiten div{display:flex;justify-content:space-between;gap:18px;padding:11px 0;border-bottom:1px solid var(--glas-rand);font-size:.93rem}
.wie-feiten dt{font:500 .68rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tekst-dof);padding-top:.25em}
.wie-feiten dd{margin:0;text-align:right;font-weight:600}
.wie-form{display:grid;gap:16px}
.wie-form h3{font-size:1.5rem;font-weight:800;letter-spacing:-.04em;scroll-margin-top:110px}
.wie-form-uitleg{color:var(--tekst-zacht);font-size:.95rem;margin-top:-8px}
.wie-form input[type=date]{color-scheme:dark;min-height:3.1em}
.wie-form input.is-anders{border-color:rgba(143,107,255,.7);box-shadow:0 0 0 4px rgba(143,107,255,.14)}
.wie-form .knop{width:100%;margin-top:4px}
.wie-form-klein{font-size:.8rem;color:var(--tekst-dof)}
.wie-form-klein a{color:var(--lila);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(205,191,255,.35)}
@media (max-width:900px){.wie-vac{grid-template-columns:minmax(0,1fr)}.wie-zij{position:static}}
.wie-slot{padding-bottom:clamp(60px,9vw,120px)}

/* ═════════ Het feest: na het versturen, en los op welkom.html ═════════ */
.feest{background:#000;color:var(--tekst)}
.feest-laag{position:fixed;inset:0;z-index:60;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;animation:feestIn .5s both}
.feest-laag:focus{outline:none}
@keyframes feestIn{from{opacity:0}}
.feest-top{position:relative;min-height:100svh;display:grid;place-items:center;text-align:center;padding:110px var(--goot) 90px;overflow:hidden;isolation:isolate}
.feest-top::before{content:"";position:absolute;inset:0;z-index:-2;
  background:radial-gradient(ellipse 70% 55% at 50% 105%,rgba(74,31,184,.7),transparent 70%),radial-gradient(ellipse 50% 40% at 50% -5%,rgba(255,122,26,.16),transparent 70%)}
.feest-doek{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.feest-binnen{display:flex;flex-direction:column;align-items:center;gap:clamp(18px,3vh,32px);width:100%;max-width:1100px}
.feest-merk{font-size:1.1rem}
.feest-titel{font-size:clamp(2.7rem,9.4vw,8rem);font-weight:800;letter-spacing:-.06em;line-height:.94;text-wrap:balance}
.feest-titel span{display:block;background:linear-gradient(180deg,#fff 20%,var(--lila) 80%);-webkit-background-clip:text;background-clip:text;color:transparent;padding:.04em 0 .08em;
  animation:feestKop 1.1s var(--zacht) both}
.feest-titel em{display:block;font-style:normal;font-size:.56em;letter-spacing:-.045em;line-height:1.05;margin-top:.2em;color:var(--tekst);animation:feestKop 1.1s .45s var(--zacht) both}
@keyframes feestKop{from{opacity:0;transform:translateY(.3em) scale(.96);filter:blur(16px)}}
.feest-plaat{display:flex;flex-direction:column;gap:2px;padding:16px clamp(24px,5vw,50px);border-color:rgba(255,122,26,.5);box-shadow:0 0 70px -14px var(--oranje-gloed);animation:feestKop 1s 1s var(--zacht) both}
.feest-plaat[hidden]{display:none}
.feest-plaat b{font-size:clamp(1.2rem,2.6vw,1.8rem);font-weight:800;letter-spacing:-.035em;overflow-wrap:anywhere}
.feest-plaat span{font:500 .68rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--oranje)}
.feest-ovatie{display:flex;flex-direction:column;align-items:center;gap:4px;animation:feestKop 1s 1.3s var(--zacht) both}
.feest-ovatie b{font-size:clamp(1.9rem,5vw,3.6rem);font-weight:800;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums;color:var(--oranje);text-shadow:0 0 34px var(--oranje-gloed)}
.feest-ovatie span{font:500 .7rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--tekst-zacht)}
.feest-ovatie small{margin-top:8px;font:500 .7rem var(--mono);letter-spacing:.06em;color:var(--tekst-dof);font-variant-numeric:tabular-nums}
.feest-hint{font:500 .7rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--lila);animation:feestHint 2.2s ease-in-out infinite}
.feest-hint[hidden]{display:none}
@keyframes feestHint{50%{opacity:.35}}
.feest-top .hero-scroll{bottom:24px}

.feest-vervolg{position:relative;padding:clamp(70px,11vw,150px) 0 clamp(70px,10vw,130px);border-top:1px solid rgba(255,255,255,.07)}
.feest-vervolg .kop{max-width:18ch}
.feest-tegels{margin-top:clamp(36px,5vw,60px)}
.feest-tegels .tegel{padding:28px 26px 30px}
.feest-tegels .tegel p{font-size:1.02rem}
.feest-acties{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(36px,5vw,56px)}
.feest-los .feest-top{padding-top:130px}

@media (prefers-reduced-motion:reduce){
  .wie-knoop-open,.feest-hint{animation:none}
}