/* Bewakingsdiensten.be — gedeeld UX-systeem
   Elke hoofdrubriek volgt: titel → korte uitleg → zoeken/keuze → resultaten → duidelijke CTA. */
.ux-page{max-width:900px;margin:0 auto}
.ux-hero{background:linear-gradient(135deg,#eef2ff,#f8fafc);border:1px solid #dbeafe;border-radius:18px;padding:24px;margin:0 0 20px}
.ux-hero h1{margin:6px 0 10px}.ux-hero p{max-width:760px;margin:0;color:#4b5563}
.ux-purpose{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.045em;color:var(--brand);margin-bottom:5px}
.ux-search{display:grid;grid-template-columns:1.45fr 1fr auto;gap:10px;align-items:end;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px;margin:18px 0}
.ux-search.four{grid-template-columns:1.4fr 1fr 1fr auto}
.ux-count{font-size:13px;color:var(--muted);margin:8px 0 14px}
.ux-list{display:grid;gap:14px}
.ux-card{border:1px solid var(--line);background:#fff;border-radius:14px;padding:18px}
.ux-card h2,.ux-card h3{margin:0 0 6px}.ux-card h2{font-size:19px}.ux-card h3{font-size:17px}
.ux-meta{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}.ux-chip{font-size:12px;background:var(--soft);color:var(--brand2);padding:5px 9px;border-radius:999px}
.ux-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}
.ux-empty{text-align:center;border:1px dashed #cbd5e1;border-radius:14px;padding:28px;background:#f8fafc}
.ux-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:18px 0}
.ux-choice{border:1px solid var(--line);border-radius:14px;padding:18px;background:#fff;text-decoration:none;color:inherit;display:block}
.ux-choice:hover{background:var(--soft2);text-decoration:none}.ux-choice strong{display:block;font-size:17px;margin-bottom:5px}.ux-choice span{color:var(--muted);font-size:13px;line-height:1.45}
.ux-cta{margin-top:28px;border:1px solid #c7d2fe;background:#f8faff;border-radius:14px;padding:18px}.ux-cta h2{margin:0 0 7px}.ux-cta p{margin:0 0 10px}
.ux-stepbar{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:16px 0 4px}.ux-step{font-size:12px;text-align:center;padding:8px;border-radius:10px;background:#f8fafc;border:1px solid var(--line);color:#4b5563}.ux-step strong{display:block;color:var(--text);font-size:13px}
.ux-section-title{margin:28px 0 6px}.ux-intro{color:#4b5563;max-width:760px}
.ux-badge{display:inline-flex;align-items:center;gap:6px;background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46;font-size:12px;font-weight:800;padding:6px 9px;border-radius:999px}
/* Bestaande modules laten exact hetzelfde aanvoelen */
.job-hero,.training-hero,.codex-hero{background:linear-gradient(135deg,#eef2ff,#f8fafc)!important;border:1px solid #dbeafe!important;border-radius:18px!important;padding:24px!important;margin:0 0 20px!important}
.job-search,.training-search{border-radius:14px!important;padding:14px!important;margin:18px 0!important}
.job-card,.training-card,.pillar-card{border-radius:14px!important;padding:18px!important}
.job-list,.training-list{gap:14px!important}
.vacancy-count,.training-count{font-size:13px;color:var(--muted);margin:8px 0 14px}
@media(max-width:760px){.ux-search,.ux-search.four{grid-template-columns:1fr}.ux-choices{grid-template-columns:1fr}.ux-stepbar{grid-template-columns:1fr 1fr}.ux-hero{padding:19px}.ux-page{max-width:none}}