:root{
  --paper:#f4f5f7; --card:#ffffff; --ink:#3a3a45; --kop:#2b2b34; --muted:#8b8b96;
  --indigo:#37357a; --indigo-d:#2c2b63; --indigo-l:#413f8f;
  --teal:#20ad9e; --teal-d:#1a978a; --teal-soft:#e7f6f4;
  --line:#eaeaf0; --line2:#dfdfe7;
  --disp:'Barlow','Helvetica Neue',Helvetica,Arial,sans-serif;
  --body:'Barlow','Helvetica Neue',Helvetica,Arial,sans-serif;
  --wrap:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.62;font-weight:400;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--disp);margin:0;line-height:1.12;font-weight:600;color:var(--kop);letter-spacing:-.01em}
a{color:var(--teal-d);text-decoration:none}
img{max-width:100%}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.eyebrow,.kicker{font-family:var(--disp);font-weight:600;font-size:13.5px;letter-spacing:.02em;color:var(--teal-d);margin:0 0 9px;text-transform:uppercase}

/* header (indigo, wit menu, teal cta) */
.kop{background:var(--indigo);position:sticky;top:0;z-index:50}
.kop-in{display:flex;align-items:center;gap:26px;height:74px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--disp);font-size:25px;font-weight:300;color:#fff;letter-spacing:.01em}
.logo-mark{display:none}
.logo-tekst{font-weight:300}
.logo b{color:var(--teal);font-weight:600}
.logo.licht{color:#fff}.logo.licht b{color:var(--teal)}
.hoofdnav{display:flex;gap:6px;margin-right:auto}
.hoofdnav a{padding:9px 14px;color:rgba(255,255,255,.85);font-weight:500;font-size:15px;border-bottom:2px solid transparent;transition:.15s}
.hoofdnav a:hover{color:#fff}
.hoofdnav a.nu{border-bottom-color:var(--teal);color:#fff}
.kop-acties{display:flex;align-items:center;gap:16px}
.knop-link{color:rgba(255,255,255,.9);font-weight:500;font-size:15px}
.knop-link:hover{color:#fff}
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 22px;border-radius:6px;font-weight:600;font-size:14.5px;cursor:pointer;border:2px solid transparent;transition:.16s;font-family:var(--body);white-space:nowrap}
.btn.pri{background:var(--teal);color:#fff}
.btn.pri:hover{background:var(--teal-d)}
.btn.ghost{background:transparent;border-color:rgba(255,255,255,.55);color:#fff}
.btn.ghost:hover{background:#fff;border-color:#fff;color:var(--indigo)}
.btn.groot{padding:14px 30px;font-size:16px}

/* op lichte secties krijgt een ghost-knop donkere rand */
.sectie .btn.ghost,.detail-kop .btn.ghost{border-color:var(--line2);color:var(--indigo)}
.sectie .btn.ghost:hover,.detail-kop .btn.ghost:hover{background:var(--indigo);border-color:var(--indigo);color:#fff}

/* hero (indigo, schuine onderrand) */
.hero{background:linear-gradient(135deg,var(--indigo-d),var(--indigo) 55%,var(--indigo-l));color:#fff;padding:74px 0 104px;position:relative;overflow:hidden;clip-path:polygon(0 0,100% 0,100% calc(100% - 46px),50% 100%,0 calc(100% - 46px))}
.hero::after{content:"";position:absolute;right:-6%;top:-30%;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(32,173,158,.22),transparent 68%);pointer-events:none}
.hero .wrap{position:relative;z-index:1}
.hero h1{font-size:clamp(2.7rem,6.6vw,4.6rem);font-weight:300;max-width:15ch;letter-spacing:-.01em;color:#fff;line-height:1.05}
.hero h1 .accent{color:var(--teal);font-weight:400;position:relative;white-space:nowrap}
.hero .lead{font-size:20px;color:rgba(255,255,255,.82);max-width:44ch;margin:20px 0 0;font-weight:300}
.hero-cijfers{display:flex;gap:0;margin-top:36px;flex-wrap:wrap}
.hero-cijfers div{padding-right:34px;margin-right:34px;border-right:1px solid rgba(255,255,255,.22)}
.hero-cijfers div:last-child{border:none;margin:0;padding:0}
.hero-cijfers b{font-family:var(--disp);font-size:32px;font-weight:600;color:var(--teal);display:block;line-height:1}
.hero-cijfers span{color:rgba(255,255,255,.72);font-size:14px}

/* secties */
.sectie{padding:56px 0}
.sectie-kop{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:28px;flex-wrap:wrap}
.sectie-kop h2{font-size:clamp(1.7rem,3.4vw,2.35rem);font-weight:600}
.sectie-kop p{color:var(--muted);margin:6px 0 0;font-weight:400}

/* sectoren */
.sectorgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.sectorkaart{display:flex;align-items:center;gap:14px;background:var(--card);border-radius:6px;box-shadow:0 2px 10px rgba(30,30,70,.05);padding:18px 18px;transition:.16s;border:1px solid var(--line)}
.sectorkaart:hover{box-shadow:0 10px 26px rgba(30,30,70,.12);transform:translateY(-2px)}
.sectorkaart .ico{width:46px;height:46px;border-radius:6px;background:var(--teal-soft);color:var(--teal-d);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.sectorkaart .ico svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.8}
.sectorkaart b{display:block;color:var(--kop);font-family:var(--disp);font-size:16px;font-weight:600}
.sectorkaart span{color:var(--muted);font-size:13.5px}

/* vacature-kaarten */
.vaclijst{display:flex;flex-direction:column;gap:14px}
.vackaart{display:flex;gap:18px;background:var(--card);border-radius:6px;box-shadow:0 2px 10px rgba(30,30,70,.05);border:1px solid var(--line);padding:20px 22px;transition:.16s;position:relative}
.vackaart:hover{box-shadow:0 10px 28px rgba(30,30,70,.12);border-color:var(--line2)}
.vackaart.uitgelicht{background:#f5f5fb;border-color:#d8d7ee}
.vac-logo{width:92px;align-self:stretch;min-height:76px;border-radius:6px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--disp);font-weight:600;font-size:26px}
/* beeld-logo (echt logobestand) */
img.beeld{background:#fff;object-fit:contain;padding:8px;border:1px solid var(--line)}
.ico.beeld{padding:5px}
.vac-body{flex:1;min-width:0}
.vac-titel{font-family:var(--disp);font-size:20px;font-weight:600;color:var(--indigo);display:block;letter-spacing:-.01em}
.vackaart:hover .vac-titel{color:var(--teal-d)}
.vac-bedrijf{color:var(--muted);font-size:14.5px;margin-top:3px}
.vac-meta{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;background:#f6f6fa;border:1px solid var(--line2);color:#5a5a66;border-radius:6px;padding:4px 10px}
.chip svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.9}
.chip.type{color:#fff;border:none;font-weight:600}
.vac-rechts{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;flex:0 0 auto;text-align:right;gap:8px}
.vac-uitgelicht-badge{font-family:var(--disp);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--indigo)}
.vac-datum{color:var(--muted);font-size:12.5px}
.stretch::after{content:"";position:absolute;inset:0}

/* advertentiebanner */
.banner{position:relative;border-radius:6px;overflow:hidden;border:1px solid var(--line);box-shadow:0 2px 10px rgba(30,30,70,.05);background:#fff;line-height:0}
.banner img{display:block;width:100%;height:auto}
.banner picture{display:block;line-height:0}
.banner-label{position:absolute;top:8px;right:8px;background:rgba(20,20,40,.55);color:#fff;font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;border-radius:4px;line-height:1.4}
.banner a{display:block}

/* filters */
.filterbalk{background:var(--card);border-radius:6px;box-shadow:0 2px 12px rgba(30,30,70,.06);border:1px solid var(--line);padding:12px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:22px}
.filterbalk .veld{display:flex;align-items:center;gap:8px;flex:1;min-width:155px;background:var(--paper);border:1px solid var(--line2);border-radius:4px;padding:9px 12px}
.filterbalk .veld svg{width:17px;height:17px;stroke:var(--muted);fill:none;stroke-width:1.8;flex:0 0 auto}
.filterbalk input,.filterbalk select{border:none;background:none;outline:none;font:inherit;width:100%;color:var(--ink)}
.layout2{display:grid;grid-template-columns:1fr 330px;gap:30px;align-items:start}
@media(max-width:860px){.layout2{grid-template-columns:1fr}}

/* detail */
.detail-kop{background:var(--card);border-radius:6px;padding:28px 30px;box-shadow:0 4px 20px rgba(30,30,70,.08);border:1px solid var(--line)}
.detail-kop h1{font-size:clamp(1.9rem,4vw,2.6rem);font-weight:600;letter-spacing:-.01em;color:var(--indigo)}
.detail-body{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:28px 30px;margin-top:20px;font-size:16.5px;box-shadow:0 2px 12px rgba(30,30,70,.05)}
.detail-body h2{font-size:1.4rem;margin:24px 0 10px;color:var(--kop)}
.detail-body h2:first-child{margin-top:0}
.detail-body p{margin:0 0 14px;white-space:pre-line;color:#44444f}
.zijkaart{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:24px;position:sticky;top:98px;box-shadow:0 2px 12px rgba(30,30,70,.05)}
.zijkaart h3{font-size:1.2rem;margin-bottom:14px;color:var(--indigo)}
.zij-info{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.zij-info:last-of-type{border:none}
.zij-info .k{color:var(--muted);flex:0 0 100px}
.zij-info b{color:var(--kop)}
.terug{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-weight:500;font-size:14.5px;margin-bottom:18px}
.terug:hover{color:var(--teal-d)}.terug svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2}

/* werkgevers-cta */
.cta{background:linear-gradient(135deg,var(--indigo-d),var(--indigo-l));color:#fff;border-radius:6px;padding:46px;display:flex;justify-content:space-between;align-items:center;gap:26px;flex-wrap:wrap;position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;right:-40px;bottom:-70px;width:230px;height:230px;border:28px solid rgba(32,173,158,.16);border-radius:50%;pointer-events:none}
.cta h2{color:#fff;font-size:2.1rem}
.cta p{color:rgba(255,255,255,.82);margin:12px 0 0;max-width:48ch;font-size:16.5px;font-weight:300}
.cta .eyebrow{color:var(--teal)}
.cta .btn.pri{background:var(--teal)}.cta .btn.pri:hover{background:var(--teal-d)}

/* footer */
.voet{background:var(--indigo-d);color:rgba(255,255,255,.68);margin-top:64px}
.voet-in{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px;padding:52px 24px 32px}
@media(max-width:760px){.voet-in{grid-template-columns:1fr 1fr}}
.voet h4{color:#fff;font-family:var(--disp);font-size:15px;font-weight:600;margin-bottom:12px;text-transform:uppercase;letter-spacing:.03em}
.voet a{display:block;color:rgba(255,255,255,.68);padding:4px 0;font-size:14.5px}
.voet a:hover{color:var(--teal)}
.voet-sub{margin:14px 0 0;font-size:14.5px;max-width:34ch;font-weight:300}
.voet-onder{border-top:1px solid rgba(255,255,255,.14);padding:18px 24px;font-size:13px;color:rgba(255,255,255,.5)}

/* forms/paneel (login/admin/portaal) */
.melding{border-radius:4px;padding:11px 15px;font-size:14.5px;margin-bottom:16px}
.melding.fout{background:#fce8e4;border:1px solid #f0b8ac;color:#b93a1e}
.melding.ok{background:var(--teal-soft);border:1px solid #a9e0d8;color:#157468}
.veldrij{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:640px){.veldrij{grid-template-columns:1fr}}
label.veld{display:block;margin-bottom:14px}
label.veld .lab{display:block;font-size:13.5px;font-weight:600;color:var(--kop);margin-bottom:6px}
label.veld input,label.veld select,label.veld textarea{width:100%;padding:11px 13px;border:1px solid var(--line2);border-radius:4px;font:inherit;background:#fff}
label.veld input:focus,label.veld select:focus,label.veld textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-soft)}
label.veld textarea{min-height:150px;resize:vertical;line-height:1.55}
.paneel{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:26px;box-shadow:0 4px 20px rgba(30,30,70,.07)}
.tabel{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.tabel th,.tabel td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);font-size:14.5px}
.tabel th{background:var(--paper);font-family:var(--disp);font-weight:600;color:var(--kop)}
.tabel tr:last-child td{border-bottom:none}
.login-body{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--indigo-d),var(--indigo-l));padding:20px}
.login-kaart{background:var(--card);border-radius:6px;padding:34px;width:100%;max-width:400px;box-shadow:0 24px 60px rgba(15,15,50,.4)}
.leeg{text-align:center;color:var(--muted);background:var(--card);border:1px dashed var(--line2);border-radius:6px;padding:44px 20px}

/* ---- beheer ---- */
.beheerbalk{background:var(--indigo-d);border-bottom:1px solid rgba(255,255,255,.1)}
.beheerbalk-in{display:flex;align-items:center;justify-content:space-between;height:52px;gap:16px}
.bb-links{display:flex;gap:4px;flex-wrap:wrap}
.bb-links a{color:rgba(255,255,255,.8);font-weight:500;font-size:14.5px;padding:7px 13px;border-bottom:2px solid transparent}
.bb-links a:hover{color:#fff;background:rgba(255,255,255,.08)}
.bb-links a.nu{color:#fff;border-bottom-color:var(--teal)}
.bb-rechts{display:flex;align-items:center;gap:12px;color:rgba(255,255,255,.6);font-size:13.5px;white-space:nowrap}
.bb-uit{color:var(--teal)!important;font-weight:600}
.bb-wissel{display:inline-flex;margin:0}
.bb-wissel select{font:inherit;font-size:13.5px;font-weight:600;color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);border-radius:6px;padding:5px 10px;cursor:pointer}
.bb-wissel select option{color:#1f2430}
.bb-addbedrijf{color:rgba(255,255,255,.85)!important;font-weight:600;border:1px solid rgba(255,255,255,.28);border-radius:6px;padding:5px 10px;font-size:13px}
.bb-addbedrijf:hover{background:rgba(255,255,255,.12)}
@media(max-width:640px){.bb-rol{display:none}}
.beheerkop{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.beheerkop h1{font-size:clamp(1.6rem,3.4vw,2.1rem);color:var(--indigo);font-weight:600}
.beheerkop p{color:var(--muted);margin:4px 0 0}
.btn.klein{padding:7px 14px;font-size:13.5px;border-radius:4px}
.btn.grijs{background:#eef0f4;color:var(--kop)}
.btn.grijs:hover{background:#e3e6ec}
.btn.rood{background:#e2483a;color:#fff}
.btn.rood:hover{background:#c93a2d}
.knoprij{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tabel td .knoprij{justify-content:flex-end}
.tabel .mini-logo{width:38px;height:38px;border-radius:4px;object-fit:contain;background:#fff;border:1px solid var(--line);vertical-align:middle}
.tabel .mini-mono{width:38px;height:38px;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-family:var(--disp)}
.badge{display:inline-block;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:6px;text-transform:uppercase;letter-spacing:.03em}
.badge.groen{background:var(--teal-soft);color:#157468}
.badge.grijs{background:#eef0f4;color:#666}
.badge.oranje{background:#fdeede;color:#a2620c}
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin-bottom:28px}
.statkaart{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:20px 22px;box-shadow:0 2px 10px rgba(30,30,70,.05)}
.statkaart b{font-family:var(--disp);font-size:30px;font-weight:600;color:var(--indigo);display:block;line-height:1}
.statkaart span{color:var(--muted);font-size:13.5px}
.logo-preview{display:flex;align-items:center;gap:14px;margin-bottom:8px}
.logo-preview img{width:72px;height:72px;border-radius:6px;object-fit:contain;background:#fff;border:1px solid var(--line);padding:6px}
.ad-lijst{display:flex;flex-direction:column;gap:14px}
.ad-rij{display:flex;align-items:center;gap:16px;background:var(--card);border:1px solid var(--line);border-radius:6px;padding:12px 14px;box-shadow:0 2px 8px rgba(30,30,70,.04)}
.ad-rij img{width:200px;max-width:38vw;border-radius:6px;border:1px solid var(--line)}
.ad-rij .ad-info{flex:1;min-width:0}
.hint{color:var(--muted);font-size:13px;margin:4px 0 0}
.oog{background:none;border:none;cursor:pointer;padding:6px;color:var(--muted);position:absolute;right:6px;top:50%;transform:translateY(-50%);display:flex}
.oog svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8}
.ww-wrap{position:relative}
.ww-wrap input{padding-right:42px!important}

@media(max-width:720px){
  .hoofdnav{display:none}
  .hero{padding:54px 0 84px;clip-path:polygon(0 0,100% 0,100% calc(100% - 30px),50% 100%,0 calc(100% - 30px))}
  .kop-in{gap:14px}
  .kop-acties .knop-link{display:none}
}

/* Melding op een vacature die niet meer openstaat. De pagina blijft bestaan
   omdat bezoekers er via oude links op terechtkomen; we sturen ze door naar
   wat er wél nog openstaat. */
.vac-afgesloten{margin-top:20px;background:#fdf4e7;border:1px solid #f0d9b5;border-radius:6px;padding:18px 20px}
.vac-afgesloten strong{display:block;font-size:17px;color:#8a5a12;margin-bottom:6px}
.vac-afgesloten p{margin:0 0 14px;color:#6b5535;font-size:15px;line-height:1.55}
.vac-afgesloten .btn{background:#fff;border:1px solid #e0cba6;color:#8a5a12}
.vac-afgesloten .btn:hover{background:#faf1e2}

/* Foutpagina */
.vier-nul-vier{max-width:640px;margin:26px auto 0;text-align:center}
.vier-nul-vier .code{display:inline-block;font-size:15px;font-weight:700;letter-spacing:.22em;
  color:var(--groen,#1abc9c);background:#e9f8f4;border-radius:6px;padding:5px 16px;margin-bottom:18px}
.vier-nul-vier h1{font-size:34px;line-height:1.15;margin:0 0 12px}
.vier-nul-vier p{color:var(--muted);font-size:17px;line-height:1.6;margin:0 auto;max-width:52ch}
.vier-nul-vier .knoppen{margin-top:24px;display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
@media (max-width:600px){.vier-nul-vier h1{font-size:26px}}

/* ==========================================================================
   Zoeken centraal (23-08). Opzet overgenomen uit de vergelijking met Jobat,
   VDAB, StepStone, belgievacature en werkenindekempen.
   ========================================================================== */

.zoekblok{background:linear-gradient(170deg,#1b2534 0%,#16303a 62%,#12463f 100%);color:#eef3f4;
  padding:32px 0 26px;margin-bottom:0}
.zoekblok .belofte{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);border-radius:6px;padding:5px 13px;
  font-size:13px;font-weight:500;color:#cfe6e1;margin-bottom:13px}
.zoekblok .belofte svg{width:15px;height:15px;stroke:#1abc9c;fill:none;stroke-width:2.4}
.zoekblok h1{font-size:clamp(23px,3.2vw,32px);line-height:1.18;letter-spacing:-.02em;margin:0 0 18px;color:#fff}

.zoekbalk{display:grid;grid-template-columns:1.5fr 1.1fr .86fr auto;gap:1px;background:#e3e7ed;
  border-radius:6px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.22)}
.zoekbalk .zv{background:#fff;display:flex;align-items:center;gap:9px;padding:0 14px;min-width:0}
.zoekbalk .zv svg{width:18px;height:18px;flex:none;stroke:#6b7688;fill:none;stroke-width:2}
.zoekbalk .zv input,.zoekbalk .zv select{border:0;background:none;font:inherit;font-size:15.5px;
  color:#141b26;padding:15px 0;width:100%;min-width:0;appearance:none}
.zoekbalk .zv input:focus,.zoekbalk .zv select:focus{outline:none}
.zoekbalk .zv:focus-within{box-shadow:inset 0 0 0 2px #12a08a}
.zoekbalk button{background:#12a08a;color:#fff;border:0;font-weight:700;font-size:15px;
  padding:0 30px;cursor:pointer;white-space:nowrap}
.zoekbalk button:hover{background:#0d8271}
@media (max-width:860px){.zoekbalk{grid-template-columns:1fr}.zoekbalk button{padding:15px}}

.snel{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:15px}
.snel .lab{font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:#8fada9;font-weight:600}
.chip-snel{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.2);color:#e4efed;
  border-radius:6px;padding:7px 14px;font-size:13.5px;font-weight:500;white-space:nowrap;text-decoration:none}
.chip-snel:hover{background:#12a08a;border-color:#12a08a;color:#fff}
.chip-snel.aan{background:#12a08a;border-color:#12a08a;color:#fff}

.alert-lijn{margin-top:15px;font-size:14px;color:#a9c2bf;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.alert-lijn a{color:#fff;font-weight:600;border-bottom:1px solid rgba(255,255,255,.4);text-decoration:none}
.alert-lijn a:hover{border-bottom-color:#1abc9c;color:#1abc9c}
.alert-lijn svg{width:16px;height:16px;stroke:#1abc9c;fill:none;stroke-width:2}

.resbalk{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:22px 0 14px;flex-wrap:wrap}
.resbalk h2{font-size:21px;letter-spacing:-.015em;margin:0;font-weight:700}
.resbalk h2 b{color:#12a08a}
.resbalk .wis{font-size:14px;color:#6b7688;border-bottom:1px solid #d6dbe3;text-decoration:none}
.resbalk .wis:hover{color:#12a08a;border-bottom-color:#12a08a}

.indeling{display:grid;grid-template-columns:258px 1fr;gap:26px;align-items:start;padding-bottom:44px}
@media (max-width:900px){.indeling{grid-template-columns:1fr}}

.filters{background:#fff;border:1px solid #e3e7ed;border-radius:6px;overflow:hidden;
  position:sticky;top:16px}
.filterknop{display:none}
@media (max-width:900px){.filters{position:static;display:none;margin-top:6px}.filters.open{display:block}.filterknop{display:flex;width:100%;align-items:center;justify-content:space-between;gap:10px;background:#fff;border:1px solid #e3e7ed;border-radius:6px;padding:13px 16px;font:inherit;font-weight:600;font-size:15px;color:#1a2230;cursor:pointer}.filterknop .fk-in{display:inline-flex;align-items:center;gap:9px}.filterknop .fk-chev{color:#6b7688;transition:transform .2s}.filterknop[aria-expanded="true"] .fk-chev{transform:rotate(180deg)}}
.fgroep{border-bottom:1px solid #eff2f6}
.fgroep:last-child{border-bottom:0}
.fgroep h3{font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:#6b7688;
  font-weight:700;margin:0;padding:14px 16px 8px}
.fgroep ul{list-style:none;margin:0;padding:0 8px 12px}
.fgroep li a{display:flex;justify-content:space-between;gap:10px;align-items:center;
  padding:8px;border-radius:6px;font-size:14.5px;color:#3d4757;text-decoration:none;min-height:38px}
.fgroep li a:hover{background:#e7f6f3;color:#0d8271}
.fgroep li a.aan{background:#12a08a;color:#fff;font-weight:600}
.fgroep .n{font-size:12.5px;color:#6b7688;font-variant-numeric:tabular-nums;
  background:#eff2f6;border-radius:6px;padding:1px 8px;min-width:26px;text-align:center}
.fgroep li a:hover .n{background:#fff;color:#0d8271}
.fgroep li a.aan .n{background:rgba(255,255,255,.22);color:#fff}

.wg{background:#141b26;color:#dfe5ee;border-radius:6px;padding:22px;margin-top:16px}
.wg h3{color:#fff;font-size:17px;margin:0 0 7px;letter-spacing:-.01em}
.wg p{font-size:14px;color:#9aa6b8;margin:0 0 14px;line-height:1.5}
.wg a{display:inline-block;background:#12a08a;color:#fff;font-weight:600;font-size:14px;
  padding:10px 17px;border-radius:4px;text-decoration:none}
.wg a:hover{background:#0d8271}

/* de hero gebruikt dezelfde zoekbalk als het overzicht */
.hero .belofte{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);border-radius:6px;padding:5px 13px;
  font-size:13px;font-weight:500;color:#cfe6e1;margin-bottom:13px}
.hero .belofte svg{width:15px;height:15px;stroke:#1abc9c;fill:none;stroke-width:2.4}
.hero .zoekbalk{margin-top:20px}
.hero .snel{margin-top:15px}
.hero .alert-lijn{margin-top:15px}
.hero-cijfers{margin-top:22px}

/* Vacaturekaart op een telefoon: het logo blijft links naast de titel, maar de
   rechterkolom (uitgelicht + datum) schuift eronder. Anders knijpt de titel
   samen tot een paar tekens breed en scrolt de pagina zijwaarts. */
@media (max-width:640px){
  .vackaart{flex-wrap:wrap;padding:16px 16px;gap:13px}
  .vac-logo{width:64px;height:64px;align-self:flex-start;min-height:0}
  .vac-body{flex:1 1 60%;min-width:0}
  .vac-titel{font-size:17.5px;overflow-wrap:anywhere}
  .vac-bedrijf{font-size:13.5px}
  .vac-rechts{flex:1 1 100%;flex-direction:row;align-items:center;justify-content:space-between;
    text-align:left;order:3;padding-top:2px}
  .vac-meta{margin-top:11px;gap:6px}
  .chip{font-size:11.5px}
  .snel .lab{width:100%;margin-bottom:2px}
  .hero .belofte{font-size:12px;white-space:normal;line-height:1.35;text-align:left}
  .hero-cijfers div{padding-right:20px;margin-right:20px}
}

/* Vaste onderbalk op mobiel. Op een groot scherm bestaat ze niet. */
.onderbalk{display:none}
@media (max-width:720px){
  .onderbalk{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;
    z-index:60;background:#fff;border-top:1px solid #e4e6ee;
    padding:7px 4px calc(7px + env(safe-area-inset-bottom));
    box-shadow:0 -3px 16px rgba(20,20,60,.09)}
  .onderbalk a{display:flex;flex-direction:column;align-items:center;gap:3px;
    text-decoration:none;color:#6b7688;font-size:11px;font-weight:600;padding:3px 2px;line-height:1.2}
  .onderbalk svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.85;
    stroke-linecap:round;stroke-linejoin:round}
  .onderbalk a.nu{color:#12a08a}
  body{padding-bottom:74px}
  .voet{margin-bottom:0}
}

/* Basismaat voor de inline iconen. Zonder deze regel rekt een icoon dat in
   gewone tekst staat (zoals de plaatspin op een bedrijfspagina) uit tot de
   volle breedte van zijn kader. Componenten die een eigen maat zetten,
   overschrijven dit gewoon. */
svg[viewBox="0 0 24 24"]{width:1em;height:1em;flex:none;vertical-align:-.13em}
.detail-kop p svg{width:16px;height:16px}

/* Beheergedeelte op een telefoon.
   De beheerbalk had een vaste hoogte van 52px terwijl de items wrapten, waardoor
   de tweede regel buiten de balk viel en achter de inhoud schoof. Op mobiel
   staat ze nu op een regel die je zijwaarts schuift, zoals een tabbladenrij. */
@media (max-width:720px){
  /* De hele balk schuift als een geheel, met Uitloggen achteraan. Liet ik enkel
     de linkerkant scrollen, dan schoven de items onder Uitloggen door. */
  .beheerbalk-in{height:auto;min-height:46px;gap:0;padding-top:5px;padding-bottom:5px;
    overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;justify-content:flex-start}
  .beheerbalk-in::-webkit-scrollbar{display:none}
  .bb-links{flex-wrap:nowrap;gap:2px;flex:0 0 auto}
  .bb-links a{white-space:nowrap;font-size:14px;padding:6px 10px}
  .bb-rechts{flex:0 0 auto;gap:0;padding-left:6px}
  .bb-uit{padding:6px 10px;white-space:nowrap}

  /* Ingelogd op de publieke site stonden "Mijn beheer" en "Uitloggen" nog eens
     in de kopbalk. Dat is dubbel: beide zitten in de onderbalk en de beheerbalk. */
  .kop-acties .btn.ghost{display:none}

  .tabel th,.tabel td{padding:10px 12px;font-size:13.5px}
  body{padding-bottom:86px}
}

/* Een brede tabel schuift binnen zijn eigen kader in plaats van de hele pagina
   mee te trekken. De tabel zelf blijft een echte tabel, zodat de rijhoogtes
   normaal blijven. */
.tabelwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:6px;max-width:100%}
.tabelwrap .tabel{min-width:740px}
@media (max-width:720px){
  .tabelwrap .tabel th,.tabelwrap .tabel td{white-space:nowrap;vertical-align:middle}
  .tabelwrap .tabel td:first-child{white-space:normal;min-width:190px}
  /* De knoppen achteraan een rij mogen niet omslaan; anders wordt elke rij
     drie keer zo hoog en zie je vooral witruimte. */
  .tabelwrap .knoprij{flex-wrap:nowrap;gap:6px}
  .tabelwrap .knoprij .btn{white-space:nowrap}
}

/* nette focus i.p.v. de standaard blauwe browser-ring */
.btn:focus-visible{outline:2px solid var(--teal-d);outline-offset:2px}
.btn:focus:not(:focus-visible){outline:none}

/* gesynchroniseerde omschrijving met structuur */
.vac-oms h3,.vac-oms h4{color:var(--teal-d,#1a8f82);font-family:var(--disp);font-size:18px;margin:20px 0 6px;font-weight:600}
.vac-oms h3:first-child,.vac-oms h4:first-child{margin-top:0}
.vac-oms p{margin:0 0 10px;line-height:1.6}
.vac-oms ul{margin:6px 0 12px;padding-left:20px}.vac-oms li{margin:3px 0;line-height:1.5}

/* blokken-editor voor de omschrijving */
.blok-editor{display:flex;flex-direction:column;gap:14px;margin-bottom:10px}
.blok-rij{border:1px solid var(--line);border-radius:6px;padding:12px;background:#fafbff;display:flex;flex-direction:column;gap:8px}
.blok-rij .blok-kop{font-weight:600}
.blok-rij input,.blok-rij textarea{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:4px;font:inherit}
.blok-rij textarea{min-height:90px;resize:vertical}
.blok-rij .blok-weg{align-self:flex-end}