/* ============================================================
   Beroepen Portaal — portaal.css v4.0
   Syne + DM Sans | navbar | footer | home | theme-agnostic
   ============================================================ */
:root {
  --kb-blue:    #003082;
  --kb-mid:     #0055b3;
  --kb-orange:  #e85d00;
  --kb-purple:  #7c3aed;
  --kb-bg:      #f4f6fb;
  --kb-border:  #e2e8f0;
  --kb-text:    #1e293b;
  --kb-muted:   #64748b;
}
.kb-wrap *, .kb-login-wrap *, .kb-nav *, .kb-footer *, .kb-home * { box-sizing: border-box; }
.kb-wrap {
  font-family: 'DM Sans', system-ui, sans-serif;
  color: var(--kb-text); line-height: 1.5;
  max-width: 1200px; margin: 0 auto; padding: 16px;
}
.kb-wrap a { text-decoration: none; }
.kb-wrap p { margin: 0 0 8px; }
.kb-wrap h1,.kb-wrap h2,.kb-wrap h3 { line-height: 1.2; margin: 0 0 8px; font-family: 'Syne', system-ui, sans-serif; }

/* ─── NAVBAR ──────────────────────────────────────────── */
.kb-nav {
  font-family: 'DM Sans', system-ui, sans-serif;
  background: white; border-bottom: 1px solid var(--kb-border);
  box-shadow: 0 1px 8px rgba(0,48,130,.06);
  position: sticky; top: 0; z-index: 1000; width: 100%;
}
.kb-nav-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 20px;
  height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.kb-nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.kb-nav-logo-img { max-height: 38px; width: auto; }
.kb-nav-logo-text { font-family: 'Syne', system-ui, sans-serif; font-size: 17px; font-weight: 800; color: var(--kb-blue); letter-spacing: -.3px; line-height: 1.1; }
.kb-nav-logo-sub { font-size: 10px; color: var(--kb-muted); font-weight: 500; }
.kb-nav-links { display: flex; align-items: center; gap: 4px; flex: 1; }
.kb-nav-link { padding: 7px 13px; border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--kb-muted); text-decoration: none; transition: all .15s; white-space: nowrap; }
.kb-nav-link:hover { background: #f1f5f9; color: var(--kb-blue); }
.kb-nav-link.active { background: #eff6ff; color: var(--kb-blue); }
.kb-nav-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.kb-nav-user { font-size: 12px; color: var(--kb-muted); background: #f8fafc; padding: 5px 12px; border-radius: 20px; border: 1px solid var(--kb-border); white-space: nowrap; }
.kb-nav-burger { display: none; background: none; border: none; cursor: pointer; padding: 6px; color: var(--kb-blue); font-size: 22px; line-height: 1; }
.kb-nav-mobile { display: none; border-top: 1px solid var(--kb-border); padding: 10px 16px; background: white; flex-direction: column; gap: 4px; }
.kb-nav-mobile .kb-nav-link { padding: 10px 14px; }
@media (max-width:768px) {
  .kb-nav-links { display: none; }
  .kb-nav-burger { display: flex; align-items: center; justify-content: center; }
  .kb-nav-user { display: none; }
}

/* ─── FOOTER ──────────────────────────────────────────── */
.kb-footer {
  font-family: 'DM Sans', system-ui, sans-serif;
  background: var(--kb-blue); color: rgba(255,255,255,.7); margin-top: 60px;
}
.kb-footer-inner {
  max-width: 1200px; margin: 0 auto; padding: 44px 24px 0;
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px;
}
.kb-footer-logo-text { font-family: 'Syne', system-ui, sans-serif; font-size: 20px; font-weight: 800; color: white; letter-spacing: -.3px; display: block; margin-bottom: 10px; }
.kb-footer-brand p { font-size: 13px; line-height: 1.65; }
.kb-footer-col h4 { font-family: 'Syne', system-ui, sans-serif; color: white; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 14px; }
.kb-footer-col a, .kb-footer-col span { display: block; color: rgba(255,255,255,.62); font-size: 13px; margin-bottom: 9px; text-decoration: none; transition: color .15s; }
.kb-footer-col a:hover { color: white; }
.kb-footer-bottom { max-width: 1200px; margin: 0 auto; padding: 18px 24px; border-top: 1px solid rgba(255,255,255,.1); display: flex; justify-content: space-between; align-items: center; font-size: 12px; opacity: .5; flex-wrap: wrap; gap: 6px; }
@media (max-width:768px) { .kb-footer-inner { grid-template-columns: 1fr 1fr; gap: 24px; } }
@media (max-width:480px) { .kb-footer-inner { grid-template-columns: 1fr; } }

/* ─── HOME / STARTPAGINA ──────────────────────────────── */
.kb-home { font-family: 'DM Sans', system-ui, sans-serif; }
.kb-home-hero {
  background: linear-gradient(135deg,#001f5e 0%,#003082 45%,#1a47a0 100%);
  min-height: 560px; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 60px 24px; position: relative; overflow: hidden;
}
.kb-home-hero::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(ellipse at 30% 50%,rgba(124,58,237,.3) 0%,transparent 60%),
              radial-gradient(ellipse at 80% 20%,rgba(0,85,179,.4) 0%,transparent 55%);
}
.kb-home-hero-inner { position:relative; z-index:1; max-width:680px; margin:0 auto; }
.kb-home-hero-badge {
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2);
  border-radius:20px; padding:5px 14px; font-size:12px; color:rgba(255,255,255,.9);
  font-weight:600; margin-bottom:20px; letter-spacing:.04em;
}
.kb-home-hero h1 {
  font-family:'Syne',system-ui,sans-serif;
  font-size:clamp(32px,5vw,54px); font-weight:800;
  color:white; line-height:1.1; margin-bottom:16px; letter-spacing:-.5px;
}
.kb-home-hero h1 span { color:#f59e0b; }
.kb-home-hero p { font-size:17px; color:rgba(255,255,255,.75); line-height:1.6; margin-bottom:32px; }
.kb-home-hero-btns { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.kb-home-cta-primary {
  background:var(--kb-orange); color:white !important; padding:14px 28px; border-radius:12px;
  font-size:15px; font-weight:700; text-decoration:none; transition:all .2s;
  display:inline-flex; align-items:center; gap:8px; box-shadow:0 4px 20px rgba(232,93,0,.4);
}
.kb-home-cta-primary:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(232,93,0,.5); }
.kb-home-cta-ghost {
  background:rgba(255,255,255,.12); color:white !important; padding:14px 28px; border-radius:12px;
  border:1.5px solid rgba(255,255,255,.25); font-size:15px; font-weight:600;
  text-decoration:none; transition:all .2s; display:inline-flex; align-items:center; gap:8px;
}
.kb-home-cta-ghost:hover { background:rgba(255,255,255,.2); }
.kb-home-section { max-width:1100px; margin:0 auto; padding:64px 24px; }
.kb-home-section-title { font-family:'Syne',system-ui,sans-serif; font-size:clamp(24px,3.5vw,36px); font-weight:800; color:var(--kb-blue); text-align:center; margin-bottom:10px; letter-spacing:-.3px; }
.kb-home-section-sub { text-align:center; color:var(--kb-muted); font-size:16px; margin-bottom:44px; line-height:1.6; }
.kb-home-features { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.kb-home-feature {
  background:white; border:1px solid var(--kb-border); border-radius:20px; padding:28px 24px;
  transition:all .2s; position:relative; overflow:hidden;
}
.kb-home-feature::after { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--kb-blue),var(--kb-purple)); transform:scaleX(0); transition:transform .2s; transform-origin:left; }
.kb-home-feature:hover { transform:translateY(-4px); box-shadow:0 12px 32px rgba(0,48,130,.08); border-color:#c4b5fd; }
.kb-home-feature:hover::after { transform:scaleX(1); }
.kb-home-feature-icon { font-size:36px; margin-bottom:14px; display:block; }
.kb-home-feature h3 { font-family:'Syne',system-ui,sans-serif; font-size:17px; font-weight:700; color:var(--kb-blue); margin-bottom:8px; }
.kb-home-feature p { font-size:14px; color:var(--kb-muted); line-height:1.6; margin:0; }
.kb-home-stats {
  background:linear-gradient(135deg,var(--kb-blue),var(--kb-mid)); border-radius:24px;
  padding:48px 40px; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center;
}
.kb-home-stat-num { font-family:'Syne',system-ui,sans-serif; font-size:40px; font-weight:800; color:white; line-height:1; }
.kb-home-stat-label { font-size:13px; color:rgba(255,255,255,.65); margin-top:6px; }
.kb-home-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.kb-home-step { text-align:center; padding:24px 16px; }
.kb-home-step-num { width:44px; height:44px; background:var(--kb-blue); color:white; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Syne',system-ui,sans-serif; font-size:18px; font-weight:800; margin:0 auto 14px; }
.kb-home-step h4 { font-family:'Syne',system-ui,sans-serif; font-size:15px; font-weight:700; color:var(--kb-blue); margin-bottom:6px; }
.kb-home-step p { font-size:13px; color:var(--kb-muted); line-height:1.5; margin:0; }
.kb-home-cta-section { background:#f0f4ff; border-radius:24px; padding:56px 40px; text-align:center; }
@media (max-width:768px) {
  .kb-home-features { grid-template-columns:1fr; }
  .kb-home-stats { grid-template-columns:1fr 1fr; padding:32px 20px; }
  .kb-home-steps { grid-template-columns:1fr 1fr; }
}
@media (max-width:480px) { .kb-home-steps { grid-template-columns:1fr; } }

/* ─── PORTAAL INSIDE PAGES ───────────────────────────── */
.kb-topbar { display:flex; justify-content:space-between; align-items:center; padding:10px 0; margin-bottom:14px; border-bottom:1px solid var(--kb-border); flex-wrap:wrap; gap:8px; }
.kb-login-wrap { font-family:'DM Sans',system-ui,sans-serif; min-height:70vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.kb-login-box  { background:white; border-radius:24px; padding:36px; width:100%; max-width:420px; box-shadow:0 4px 32px rgba(0,48,130,.1); border:1px solid var(--kb-border); }
.kb-login-input { width:100%; padding:11px 14px; border:1.5px solid var(--kb-border); border-radius:10px; font-size:14px; font-family:inherit; outline:none; transition:border-color .15s,box-shadow .15s; background:white; color:var(--kb-text); }
.kb-login-input:focus { border-color:var(--kb-blue); box-shadow:0 0 0 3px rgba(0,48,130,.08); }
.kb-notice { padding:14px 18px; border-radius:12px; margin-bottom:16px; font-size:14px; }
.kb-notice-info    { background:#eff6ff; border:1px solid #bfdbfe; color:#1d4ed8; }
.kb-notice-error   { background:#fef2f2; border:1px solid #fca5a5; color:#dc2626; }
.kb-notice-success { background:#f0fdf4; border:1px solid #86efac; color:#166534; }
.kb-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:8px 16px; border-radius:10px; font-size:13px; font-weight:600; cursor:pointer; border:none; text-decoration:none; transition:all .15s; font-family:inherit; line-height:1; }
.kb-btn:hover { opacity:.9; transform:translateY(-1px); }
.kb-btn:active { transform:translateY(0); }
.kb-btn-primary { background:var(--kb-blue); color:white !important; }
.kb-btn-orange  { background:var(--kb-orange); color:white !important; }
.kb-btn-purple  { background:var(--kb-purple); color:white !important; }
.kb-btn-ghost   { background:white; color:var(--kb-text) !important; border:1.5px solid var(--kb-border); }
.kb-btn-ghost:hover { background:#f8fafc; }
.kb-btn-sm      { padding:5px 12px; font-size:12px; border-radius:8px; }
.kb-hero { background:linear-gradient(135deg,var(--kb-blue) 0%,var(--kb-mid) 100%); border-radius:20px; padding:22px 28px; color:white; margin-bottom:20px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; }
.kb-hero-title { font-family:'Syne',system-ui,sans-serif; font-size:20px; font-weight:800; }
.kb-hero-sub   { font-size:13px; opacity:.7; margin-top:3px; }
.kb-filters { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; align-items:center; }
.kb-select,.kb-search { padding:8px 14px; border-radius:10px; border:1.5px solid var(--kb-border); font-size:13px; font-family:inherit; outline:none; background:white; color:var(--kb-text); }
.kb-search { width:200px; }
.kb-teller { margin-left:auto; font-size:13px; color:var(--kb-muted); }
.kb-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; }
.kb-beroep-card { background:white; border-radius:14px; border:1px solid var(--kb-border); box-shadow:0 1px 4px rgba(0,0,0,.04); overflow:hidden; transition:box-shadow .15s,transform .15s; }
.kb-beroep-card:hover { box-shadow:0 6px 20px rgba(0,48,130,.08); transform:translateY(-1px); }
.kb-beroep-header { padding:12px 14px 10px; background:#fafbff; border-bottom:1px solid #f1f5f9; }
.kb-beroep-naam   { font-family:'Syne',system-ui,sans-serif; font-weight:700; color:var(--kb-blue); font-size:14px; line-height:1.3; }
.kb-beroep-sector { font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--kb-muted); margin-top:2px; }
.kb-beroep-body   { padding:10px 14px; }
.kb-beroep-footer { padding:8px 14px 14px; }
.kb-lvl { display:inline-block; padding:2px 8px; border-radius:20px; font-size:10px; font-weight:700; flex-shrink:0; }
.kb-lvl-basis { background:#fef3c7; color:#92400e; }
.kb-lvl-mbo   { background:#dcfce7; color:#166534; }
.kb-lvl-hoger { background:#dbeafe; color:#1e40af; }
.kb-badge-dg  { background:#ede9fe; color:#6d28d9; padding:2px 8px; border-radius:20px; font-size:10px; font-weight:700; }
.kb-check-label { display:flex; align-items:center; gap:7px; cursor:pointer; font-size:13px; font-weight:600; color:#374151; margin-bottom:5px; }
.kb-check-label input[type=checkbox] { width:15px; height:15px; cursor:pointer; accent-color:var(--kb-orange); }
.kb-notitie { width:100%; padding:8px 10px; border:1.5px solid var(--kb-border); border-radius:10px; font-size:12px; font-family:inherit; resize:none; min-height:56px; outline:none; transition:border-color .15s; background:white; color:var(--kb-text); }
.kb-notitie:focus { border-color:var(--kb-orange); }
.kb-card { background:white; border-radius:16px; border:1px solid var(--kb-border); box-shadow:0 1px 6px rgba(0,0,0,.04); padding:20px; }
.kb-client-btn { width:100%; padding:12px 14px; background:white; border:1.5px solid var(--kb-border); border-radius:12px; cursor:pointer; text-align:left; transition:all .15s; margin-bottom:7px; font-family:inherit; }
.kb-client-btn:hover { border-color:var(--kb-purple); background:#faf5ff; }
.kb-aant-card  { background:white; border-radius:14px; border:1px solid var(--kb-border); margin-bottom:10px; overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,.04); transition:border-color .15s; }
.kb-aant-card:hover { border-color:#c4b5fd; }
.kb-aant-kop   { padding:14px 16px; background:#fafbff; cursor:pointer; user-select:none; transition:background .1s; }
.kb-aant-kop:hover { background:#f5f3ff; }
.kb-aant-body  { padding:16px; border-top:1px solid #f1f5f9; background:#fafbff; }
.kb-aant-grid  { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.kb-inklap-pijl { font-size:11px; color:#94a3b8; transition:transform .2s; display:inline-block; }
.kb-sterren-preview { color:#f59e0b; font-size:13px; letter-spacing:-1px; }
.kb-client-notitie-preview { margin-top:6px; font-size:11px; background:#fff7ed; border:1px solid #fed7aa; border-radius:6px; padding:4px 8px; color:#92400e; }
.kb-sector-groep { margin-bottom:8px; }
.kb-sector-titel { font-family:'Syne',system-ui,sans-serif; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--kb-purple); margin:16px 0 8px 2px; border-bottom:2px solid #ede9fe; padding-bottom:6px; }
.kb-doelgroep-toggle { display:flex; align-items:flex-start; gap:10px; padding:10px 14px; border-radius:12px; border:2px solid var(--kb-border); margin-bottom:14px; transition:border-color .15s,background .15s; }
.kb-doelgroep-toggle.actief { border-color:var(--kb-purple); background:#f5f3ff; }
.kb-dg-cb { width:18px; height:18px; flex-shrink:0; accent-color:var(--kb-purple); cursor:pointer; margin-top:2px; }
.kb-sterren-rij { display:flex; align-items:center; gap:2px; }
.kb-ster { font-size:24px; cursor:pointer; background:none; border:none; padding:0; line-height:1; color:#e2e8f0; transition:color .1s,transform .1s; }
.kb-ster.actief { color:#f59e0b; }
.kb-ster:hover  { transform:scale(1.2); }
.kb-ster-label  { font-size:12px; color:var(--kb-muted); margin-left:8px; }
.kb-field-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--kb-muted); display:block; margin-bottom:5px; }
.kb-field-textarea { width:100%; padding:10px 12px; border:1.5px solid #ede9fe; background:#faf5ff; border-radius:10px; font-size:13px; font-family:inherit; resize:vertical; min-height:76px; outline:none; color:var(--kb-text); }
.kb-field-textarea:focus { border-color:var(--kb-purple); }
.kb-field-number { width:80px; padding:8px 12px; border:1.5px solid #ede9fe; background:#faf5ff; border-radius:10px; font-size:14px; font-weight:700; text-align:center; outline:none; color:var(--kb-text); }
.kb-save-status { font-size:12px; color:var(--kb-muted); min-height:18px; }
.kb-tab-btn { padding:8px 16px; border-radius:10px; border:none; background:transparent; font-size:13px; font-weight:600; color:#64748b; cursor:pointer; transition:all .15s; font-family:inherit; }
.kb-tab-btn.active { background:white; color:var(--kb-blue); box-shadow:0 1px 4px rgba(0,0,0,.08); }
.kb-begel-tabs { display:flex; gap:4px; background:#f1f5f9; padding:4px; border-radius:14px; width:fit-content; margin-bottom:20px; flex-wrap:wrap; }
.kb-begel-tab { padding:9px 18px; border-radius:10px; border:none; background:transparent; font-size:13px; font-weight:600; color:#64748b; cursor:pointer; transition:all .15s; font-family:inherit; }
.kb-begel-tab.active { background:white; color:var(--kb-blue); box-shadow:0 1px 4px rgba(0,0,0,.08); }
.kb-client-tbl { width:100%; border-collapse:collapse; font-size:13px; }
.kb-client-tbl th { text-align:left; padding:8px 12px; color:#64748b; font-size:11px; text-transform:uppercase; font-weight:700; border-bottom:2px solid #f1f5f9; }
.kb-client-tbl td { padding:11px 12px; border-bottom:1px solid #f8fafc; vertical-align:middle; }
.kb-client-tbl tr:hover td { background:#fafbff; }
.kb-begel-print-header { display:none; }
.kb-log-maand-header { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#94a3b8; margin:20px 0 8px; padding-bottom:4px; border-bottom:1px solid #f1f5f9; }
.kb-log-entry  { display:flex; gap:14px; align-items:flex-start; background:white; border:1px solid var(--kb-border); border-radius:14px; padding:14px 16px; margin-bottom:8px; transition:box-shadow .15s; }
.kb-log-entry:hover { box-shadow:0 2px 8px rgba(0,0,0,.06); }
.kb-log-datum  { flex-shrink:0; text-align:center; min-width:48px; }
.kb-log-acties { flex-shrink:0; }
.kb-print-header { display:none; }

@media (max-width:768px) {
  .kb-hero { flex-direction:column; }
  .kb-grid { grid-template-columns:1fr; }
  .kb-aant-grid { grid-template-columns:1fr !important; }
  .kb-search { width:100%; }
  .kb-wrap { padding:10px; }
  .kb-begel-tabs { width:100%; }
}
@media print {
  .kb-no-print,.kb-topbar,.kb-filters,nav,header,footer,
  .kb-hero > div:last-child,#wpadminbar,.site-header,
  .kb-client-btn,#kb-client-list,#kb-logboek-stats,
  #kb-nieuw-form,.kb-sterren-rij,.kb-doelgroep-toggle,
  .kb-log-acties,.kb-nav,.kb-footer,.kb-begel-tabs,
  #begel-tab-clients,#begel-tab-archief { display:none !important; }
  .kb-begel-print-header { display:block !important; }
  .kb-print-header { display:block !important; }
  #kb-logboek-entries { display:none !important; }
  #kb-print-entries   { display:block !important; }
  .kb-aant-card { box-shadow:none !important; border:1px solid #e2e8f0 !important; margin-bottom:6px !important; break-inside:avoid; }
  .kb-aant-body { display:block !important; padding:8px 12px !important; }
  .kb-aant-kop  { display:block !important; }
  .kb-aant-grid { grid-template-columns:1fr 1fr !important; gap:8px !important; }
  .kb-field-textarea,.kb-field-number { border:none !important; background:transparent !important; padding:2px 0 !important; font-size:11px !important; min-height:auto !important; }
  .kb-sector-titel { margin:10px 0 4px !important; font-size:10px !important; }
  .kb-beroep-card { box-shadow:none !important; border:1px solid #e2e8f0 !important; break-inside:avoid; margin-bottom:6px !important; }
  .kb-notitie,.kb-field-textarea { border:none !important; background:transparent !important; }
  .kb-hero { border-radius:10px !important; padding:14px !important; break-after:avoid; }
  .kb-log-entry { break-inside:avoid; border:1px solid #e2e8f0 !important; margin-bottom:4px !important; }
  .kb-wrap { max-width:100%; padding:0; }
  body { font-size:11px; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  @page { size:A4 portrait; margin:14mm; }
}