/* ==========================================================================
   Zorgpunt - gedeelde huisstijl voor alle keuzehulpen
   Kleuren, typografie en bouwstenen. Een bestand, gebruikt door de
   hoofdpagina, elke keuzehulp en het beheerscherm.
   ========================================================================== */

:root{
  --zp-blauw:#161F73;--zp-oranje:#E3530F;--zp-wit:#FFFFFF;
  --zp-grijs-licht:#F5F5F5;--zp-grijs-mid:#B0AEA5;
  --zp-font:'Neulis Sans','Century Gothic',system-ui,-apple-system,'Segoe UI',sans-serif;
  --cut:26px;--radius:14px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--zp-font);color:var(--zp-blauw);background:var(--zp-grijs-licht);line-height:1.5}
.wrap{max-width:900px;margin:0 auto;padding:0 18px 64px}

/* --- kop --------------------------------------------------------------- */
header{background:var(--zp-blauw);color:#fff;padding:24px 0 32px;margin-bottom:-16px}
.head-inner{max-width:900px;margin:0 auto;padding:0 18px;display:flex;gap:16px;align-items:center}
.logo-box{background:#fff;padding:11px 13px 15px 11px;flex:0 0 auto;clip-path:polygon(0 0,100% 0,calc(100% - 18px) 100%,0 100%)}
.logo-box img{height:44px;width:auto;display:block}
.logo-box a{display:block}
h1{font-size:1.3rem;font-weight:700;margin:0;line-height:1.15;letter-spacing:-.01em}
h1 span{opacity:.65;font-weight:400;display:block;font-size:.8rem;margin-top:5px}
.head-inner .terug{margin-left:auto;color:#fff;text-decoration:none;font-size:.82rem;opacity:.75;white-space:nowrap}
.head-inner .terug:hover{opacity:1}

/* --- voortgang en spoor ------------------------------------------------- */
.fase{display:flex;gap:8px;align-items:center;margin:0 0 12px;font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#7c81a6}
.fase b{color:var(--zp-blauw)}
.fase .bar{flex:1;height:4px;background:#e3e5f0;border-radius:99px;overflow:hidden;min-width:20px}
.fase .bar i{display:block;height:100%;background:var(--zp-oranje);transition:width .25s}

.spoor{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.chip{background:#fff;border:1.5px solid #dfe1ee;border-radius:999px;padding:6px 13px;font:inherit;font-size:.78rem;color:#3d4478;cursor:pointer}
.chip:hover{border-color:var(--zp-oranje);color:var(--zp-oranje)}
.chip b{font-weight:600;color:var(--zp-blauw)}

/* --- kaarten ------------------------------------------------------------ */
.card{background:#fff;border-radius:var(--radius);padding:26px 24px;margin-bottom:14px;box-shadow:0 1px 3px rgba(22,31,115,.08)}
.eyebrow{display:inline-block;background:var(--zp-oranje);color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:5px 12px 6px;margin-bottom:13px;clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,0 100%)}
.eyebrow.blauw{background:var(--zp-blauw)}
h2{font-size:1.28rem;margin:0 0 6px;line-height:1.2;letter-spacing:-.01em}
.hint{color:#5a6087;font-size:.88rem;margin:0 0 18px}

/* --- keuzeknoppen ------------------------------------------------------- */
.opts{display:grid;gap:9px}
.opts.beeld{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.opt{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;cursor:pointer;background:#fff;border:1.5px solid #dfe1ee;border-radius:12px;padding:14px 16px;font:inherit;color:inherit;transition:border-color .12s,background .12s}
.opt:hover{border-color:var(--zp-blauw);background:#fbfbfe}
.opt:focus-visible{outline:3px solid var(--zp-oranje);outline-offset:2px}
.opt.aan{border-color:var(--zp-blauw);background:#f4f5fb}
.opt .mark{flex:0 0 20px;height:20px;margin-top:2px;border:1.5px solid #c4c7dd;border-radius:50%;display:grid;place-items:center}
.opt.multi .mark{border-radius:5px}
.opt.aan .mark{background:var(--zp-blauw);border-color:var(--zp-blauw)}
.opt.aan .mark::after{content:"";width:8px;height:8px;background:#fff;border-radius:50%}
.opt.multi.aan .mark::after{content:"\2713";color:#fff;font-size:.75rem;font-weight:700;width:auto;height:auto;background:none}
.opt b{display:block;font-weight:600;font-size:1rem}
.opt small{display:block;color:#5a6087;font-size:.83rem;margin-top:3px;line-height:1.35}
.opt.beeldopt{flex-direction:column;align-items:stretch;gap:0;padding:0;overflow:hidden}
.opt.beeldopt .prent{background:#f4f5fb;padding:10px;display:grid;place-items:center;border-bottom:1.5px solid #eceef6}
.opt.beeldopt.aan .prent{background:#eceef9}
.opt.beeldopt .tekst{padding:14px 16px 16px}

/* --- tekeningen en foto's ----------------------------------------------- */
svg.ill{display:block;width:100%;height:auto;max-height:150px}
img.ill{display:block;width:100%;height:auto;max-height:150px;object-fit:contain}
.ill .lijn{fill:none;stroke:var(--zp-blauw);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.ill .vlak{fill:var(--zp-blauw)}
.ill .zacht{fill:#c8ccdf}
.ill .accent{fill:var(--zp-oranje)}
.ill .stip{fill:none;stroke:var(--zp-grijs-mid);stroke-width:1.6;stroke-dasharray:5 5}
.ill .pijl{fill:none;stroke:#c4c7dd;stroke-width:3;stroke-linecap:round}
.ill .pijl.actief{stroke:var(--zp-oranje);stroke-width:4}
.ill .kop{fill:#c4c7dd}
.ill .kop.actief{fill:var(--zp-oranje)}
.ill .lab{font-size:10px;font-weight:700;fill:#9aa0c0}
.ill .lab.actief{fill:var(--zp-oranje)}

/* --- knoppen ------------------------------------------------------------ */
.acties{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px;align-items:center}
.btn{border:none;border-radius:999px;padding:12px 26px;font:inherit;font-weight:600;cursor:pointer;background:var(--zp-oranje);color:#fff;text-decoration:none;display:inline-block}
.btn:hover{filter:brightness(.92)}
.btn:focus-visible{outline:3px solid var(--zp-blauw);outline-offset:2px}
.btn.sec{background:transparent;color:var(--zp-blauw);border:1.5px solid #dfe1ee;padding:11px 22px}
.btn.sec:hover{border-color:var(--zp-blauw);filter:none}
.btn[disabled]{opacity:.5;cursor:not-allowed;filter:none}

/* --- resultaatblok ------------------------------------------------------ */
.res-top{background:var(--zp-blauw);color:#fff;border-radius:var(--radius);padding:24px;margin-bottom:14px;clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%);display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.res-top .tekst{flex:1 1 260px}
.res-top .prent{flex:0 0 150px;background:#fff;border-radius:10px;padding:10px}
.res-top .label{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;opacity:.7;font-weight:700}
.res-top h2{font-size:1.55rem;margin:7px 0 8px;color:#fff}
.res-top h2 em{font-style:normal;color:#FF9E6B}
.res-top p{margin:0 0 12px;opacity:.85;font-size:.9rem;max-width:52ch}
.res-top .link{display:inline-block;background:#fff;color:var(--zp-blauw);border-radius:999px;padding:9px 20px;font-size:.85rem;font-weight:600;text-decoration:none}
.res-top .link:hover{background:#FFE2D3}

/* --- ladder ------------------------------------------------------------- */
.ladder{background:#fff;border-radius:var(--radius);padding:18px 20px 20px;margin-bottom:14px}
.ladder .kop{font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--zp-oranje);margin-bottom:12px}
.trap{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.trede{border:1.5px solid #dfe1ee;border-radius:10px;padding:10px 11px;background:#fbfbfe;position:relative;text-align:left;font:inherit;color:inherit;cursor:pointer;transition:border-color .12s}
.trede:hover{border-color:var(--zp-oranje)}
.trede:focus-visible{outline:3px solid var(--zp-oranje);outline-offset:2px}
.trede b{display:block;font-size:.85rem;line-height:1.2}
.trede small{display:block;font-size:.72rem;color:#7c81a6;margin-top:3px;line-height:1.3}
.trede.aan{background:var(--zp-blauw);border-color:var(--zp-blauw)}
.trede.aan b{color:#fff}.trede.aan small{color:#c8ccdf}
.trapas{display:flex;justify-content:space-between;font-size:.7rem;color:#7c81a6;margin-top:8px;font-weight:600}

/* --- infovakken --------------------------------------------------------- */
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-bottom:14px}
.vak{background:#fff;border-radius:var(--radius);padding:18px 20px}
.vak .label{font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--zp-oranje)}
.vak .waarde{font-size:1.08rem;font-weight:700;margin:6px 0 4px;line-height:1.25}
.vak .waarom{font-size:.85rem;color:#5a6087;margin:0}
.vak .alt{font-size:.82rem;color:#5a6087;margin:9px 0 0;padding-top:9px;border-top:1px solid #eceef6}
.vak .alt b{color:var(--zp-blauw);font-weight:600}
.vak a.prodlink{display:inline-block;margin-top:10px;font-size:.83rem;font-weight:600;color:var(--zp-oranje);text-decoration:none}
.vak a.prodlink:hover{text-decoration:underline}
.vak .foto{width:100%;border-radius:10px;margin-bottom:10px;background:#f4f5fb;display:block}

ul.punten{margin:10px 0 0;padding:0;list-style:none}
ul.punten li{position:relative;padding-left:23px;margin-bottom:9px;font-size:.9rem}
ul.punten li::before{content:"";position:absolute;left:0;top:.45em;width:9px;height:9px;background:var(--zp-oranje);clip-path:polygon(0 0,100% 0,100% 60%,60% 100%,0 100%)}

.let-op{background:#FEF1EB;border-left:4px solid var(--zp-oranje);border-radius:0 10px 10px 0;padding:14px 16px;margin-bottom:14px;font-size:.89rem}
.let-op b{display:block;margin-bottom:3px}
.let-op.ok{background:#F1F5EC;border-left-color:#6d8f3f}
.let-op a{color:var(--zp-oranje);font-weight:600}

/* --- meetblok ----------------------------------------------------------- */
.meetblok{background:#f4f5fb;border-radius:12px;padding:18px;margin-bottom:18px}
.meetblok h3{margin:0 0 4px;font-size:.98rem}
.meetblok p{margin:0 0 12px;font-size:.86rem;color:#5a6087}
.meetgrid{display:grid;gap:14px;grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.meetgrid>div{background:#fff;border-radius:10px;padding:12px}
.meetgrid svg{max-height:none}
.meetcap{font-size:.82rem;color:var(--zp-blauw);margin:8px 0 0;font-weight:600;text-align:center}

/* --- formuliervelden ---------------------------------------------------- */
.velden{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-top:4px}
.veld label{display:block;font-size:.8rem;font-weight:600;margin-bottom:5px}
.veld .rij{display:flex;align-items:center;gap:7px}
.veld input,.veld select,.veld textarea{width:100%;padding:11px 12px;border:1.5px solid #dfe1ee;border-radius:10px;font:inherit;font-size:1rem;color:var(--zp-blauw);background:#fff}
.veld input:focus,.veld select:focus,.veld textarea:focus{outline:none;border-color:var(--zp-blauw)}
.veld textarea{min-height:80px;font-size:.92rem;line-height:1.45;resize:vertical}
.veld .eenheid{font-size:.85rem;color:#7c81a6}
.veld small{display:block;font-size:.76rem;color:#7c81a6;margin-top:4px}

/* --- linkenlijst -------------------------------------------------------- */
.links{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:12px}
.links a{display:block;border:1.5px solid #dfe1ee;border-radius:10px;padding:12px 14px;text-decoration:none;color:var(--zp-blauw);font-size:.87rem;font-weight:600}
.links a:hover{border-color:var(--zp-oranje);color:var(--zp-oranje)}
.links a span{display:block;font-weight:400;font-size:.79rem;color:#7c81a6;margin-top:2px}
.links a:hover span{color:#7c81a6}

.printkop{display:none}
footer{text-align:center;font-size:.75rem;color:#7c81a6;margin-top:24px;line-height:1.6}
footer a{color:#7c81a6}

@media (max-width:620px){
  h1{font-size:1.1rem}.logo-box img{height:34px}
  .card,.res-top{padding:20px 17px}
  .res-top h2{font-size:1.28rem}
  .res-top .prent{flex:1 1 100%}
  .meetgrid{grid-template-columns:1fr}
  .trap{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media print{
  body{background:#fff}
  header,.acties,.spoor,.fase,.geen-print{display:none!important}
  .card,.vak,.res-top,.ladder{box-shadow:none;break-inside:avoid}
  .res-top,.trede.aan{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .printkop{display:block;border-bottom:2px solid #161F73;padding-bottom:10px;margin-bottom:16px}
  .printkop .r{display:flex;gap:24px;font-size:.82rem;margin-top:8px}
  .printkop .r span{flex:1;border-bottom:1px solid #b0aea5;padding-bottom:2px}
}