/* Huisstijl 30-10-2026: kleuren komen uit /_shell/primeprop.css (PrimeProp, crème dashboard-look). Hier alleen de koppeling. */
:root{--bg:var(--pp-bg,#f3efe6);--kaart:var(--pp-kaart,#fff);--ink:var(--pp-tekst,#1c2a39);--zacht:var(--pp-zacht,#5e6c7c);--lijn:var(--pp-lijn,#e7e0d1);--primair:var(--pp-nav,#1c2a39);--accent:var(--pp-accent,#1f5f8b);--rood:var(--pp-rood,#b42318);--groen:var(--pp-groen,#1f7a45);--oranje:var(--pp-oranje,#b54708);--r:var(--pp-r,16px)}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.45 var(--pp-font,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif)}
a{color:var(--accent)}
main{max-width:980px;margin:0 auto;padding:14px 12px 120px}
.kaart{background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--r);padding:16px;margin-bottom:14px}.kaart.smal{max-width:520px;margin:30px auto}
.kop{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
h1{font-size:22px;font-weight:700;margin:0 0 10px}h2{font-size:17px;margin:0 0 10px}h3{font-size:15px;margin:12px 0 6px}
.knop,button{display:inline-block;background:var(--primair);color:#fff;border:1px solid var(--primair);border-radius:999px;padding:10px 16px;font-family:inherit;font-size:15px;font-weight:500;cursor:pointer;text-decoration:none;line-height:1.2}
.knop.licht,button.licht{background:var(--kaart);color:var(--ink);border-color:var(--lijn)}button.rood{background:var(--rood);border-color:var(--rood)}button.klein{padding:6px 10px;font-size:13px}button:disabled{opacity:.5}
input,select,textarea{width:100%;padding:10px 11px;border:1px solid var(--lijn);border-radius:10px;font:inherit;background:#fff;color:inherit}textarea{min-height:76px}
label{display:block;font-size:13px;color:var(--zacht);margin:10px 0 4px}.verplicht:after{content:" *";color:var(--rood)}
.zacht{color:var(--zacht);font-size:13px}.melding{padding:10px 12px;border-radius:10px;background:#fff4d6;margin:8px 0;font-size:14px}.melding.ok{background:#dcf5e3}.melding.fout{background:#fde7e5}
.zoek{display:flex;gap:8px;margin:8px 0}.lijst .rij{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 4px;border-bottom:1px solid var(--lijn);text-decoration:none;color:inherit}
.pil{display:inline-block;padding:3px 10px;border-radius:99px;font-size:12px;background:var(--pp-accent-bg,#e4eef6);white-space:nowrap}.pil.concept{background:var(--pp-oranje-bg,#fef3e2);color:var(--oranje)}.pil.afgerond{background:var(--pp-groen-bg,#e6f4ec);color:var(--groen)}
.hits{border:1px solid var(--lijn);border-radius:10px;margin-top:4px;max-height:260px;overflow:auto;background:#fff}.hits:empty{display:none}
.hits div{padding:9px 11px;border-bottom:1px solid var(--lijn);cursor:pointer}.hits div:hover{background:var(--pp-hover,#faf7f1)}
.tabel{width:100%;border-collapse:collapse}.tabel td{padding:7px 6px;border-bottom:1px solid var(--lijn);font-size:14px}.rijform{display:flex;gap:8px;flex-wrap:wrap}.rijform input{flex:1;min-width:160px}
/* editor */
.balk{position:sticky;top:var(--pp-balk,46px);z-index:15;background:var(--bg);padding:6px 0 8px}
.titel{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}.titel b{font-size:17px}
.staat{font-size:12px;color:var(--zacht)}.staat.fout{color:var(--rood);font-weight:600}
.tabs{display:flex;gap:6px;overflow-x:auto;padding:6px 0;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}
.tabs button{background:var(--kaart);color:var(--ink);border:1px solid var(--lijn);white-space:nowrap;font-size:14px;padding:8px 14px}.tabs button.actief{background:var(--primair);color:#fff;border-color:var(--primair)}
.tabs button .tel{font-size:11px;opacity:.75;margin-left:4px}
.raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:0 12px}.raster .heel{grid-column:1/-1}
.janee{display:flex;gap:6px}.janee button{flex:1;background:var(--kaart);color:var(--ink);border:1px solid var(--lijn)}.janee button.aan{background:var(--primair);color:#fff}
.meer label{display:flex;gap:8px;align-items:center;color:var(--ink);font-size:15px;margin:4px 0}.meer input{width:auto}
.groeprij{border:1px dashed var(--lijn);border-radius:12px;padding:6px 12px 12px;margin:10px 0;position:relative}.groeprij .weg{position:absolute;right:8px;top:8px}
.ruimte{border:1px solid var(--lijn);border-radius:var(--r);margin:10px 0;background:#fff;overflow:hidden}
.ruimte>.rk{display:flex;align-items:center;gap:8px;padding:12px;cursor:pointer;background:var(--pp-hover,#faf7f1)}.ruimte>.rk b{flex:1}
.voortgang{font-size:12px;color:var(--zacht)}.voortgang.vol{color:var(--groen);font-weight:600}
.ruimte>.rb{padding:4px 12px 12px}.ruimte.dicht>.rb{display:none}
.ond{padding:10px 0;border-bottom:1px solid var(--lijn)}.ond:last-child{border-bottom:0}.ond .on{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-bottom:6px}
.scores{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.scores button{background:var(--kaart);color:var(--ink);border:1px solid var(--lijn);border-radius:10px;padding:9px 4px;font-size:14px}
.scores button.aan.Goed{background:var(--groen);color:#fff;border-color:var(--groen)}.scores button.aan.Redelijk{background:var(--oranje);color:#fff;border-color:var(--oranje)}
.scores button.aan.Slecht{background:var(--rood);color:#fff;border-color:var(--rood)}.scores button.aan.nvt{background:#888;color:#fff;border-color:#888}
.vorige{font-size:12px;background:var(--pp-accent-bg,#e4eef6);border-radius:8px;padding:2px 8px;cursor:pointer;white-space:nowrap}
.afw{margin-top:8px;padding:8px;background:#fdf7ee;border-radius:10px}
.thumbs{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}.thumb{position:relative;width:78px;height:78px;border-radius:8px;overflow:hidden;background:#eee}
.thumb img{width:100%;height:100%;object-fit:cover}.thumb .x{position:absolute;top:2px;right:2px;background:rgba(0,0,0,.6);color:#fff;border-radius:50%;width:22px;height:22px;padding:0;font-size:13px}
.fotoknop{width:78px;height:78px;border:2px dashed var(--lijn);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:26px;color:var(--zacht);cursor:pointer;background:#fff}
.fotoknop input{display:none}.bezig{opacity:.5}
.onder{position:fixed;left:0;right:0;bottom:0;background:var(--kaart);border-top:1px solid var(--lijn);padding:10px 12px calc(10px + env(safe-area-inset-bottom));display:flex;gap:8px;z-index:20}
.onder button{flex:1}
.modaal{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:50;display:flex;align-items:center;justify-content:center;padding:12px}
.modaal .in{background:var(--kaart);border-radius:var(--r);padding:14px;max-width:760px;width:100%;max-height:92vh;overflow:auto}
canvas.pad{width:100%;height:220px;border:1px solid var(--lijn);border-radius:10px;touch-action:none;background:#fff}
.groot img{max-width:100%;border-radius:8px}.hand img{max-height:80px;border:1px solid var(--lijn);border-radius:8px;background:#fff}
.info{white-space:pre-wrap;background:var(--pp-hover,#faf7f1);border-radius:10px;padding:10px;font-size:14px}
@media(min-width:800px){main{padding-top:20px}}

/* stappen na afronden */
.vervolg{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
@media(min-width:861px){body.pp-met-zij .onder{left:224px}}