:root{--wit:#fff;--licht:#F4F5FA;--licht-2:#ECEDF4;--rand:rgba(20,20,60,.08);--rand-2:#D6D7E2;--zwart:#0B0B0C;--zwart-2:#15151A;--tekst:#1D1D22;--muted:#6B6B78;--muted-licht:#A8A8B4;--mint:#CDF3EC;--mint-2:#7EEADF;--groen:#0FA89A;--groen-donker:#0B7A6E;--paars:#4F46E5;--paars-licht:#EEEDFF;--paars-2:#B7B3FF;--paars-donker:#3730A3;--oranje:#F59E0B;--oranje-licht:#FFF4DC;--rood:#D9304C;--rood-licht:#FDE8EC;--gradient:linear-gradient(92deg,#0FA89A,#4F46E5);--radius:20px;--schaduw:0 10px 30px rgba(20,20,60,.06),0 1px 2px rgba(20,20,60,.04);--mono:"JetBrains Mono",ui-monospace,monospace;--kop:"Bricolage Grotesque",sans-serif;--font:"Instrument Sans",system-ui,sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);color:var(--tekst);background:var(--licht);font-size:14.5px;line-height:1.5}
h1,h2,h3,h4{font-family:var(--kop);letter-spacing:-.02em;margin:0;font-weight:700}
a{color:var(--paars)}
b,strong{font-weight:600}

/* ---- raamwerk ---- */
.app{display:grid;grid-template-columns:256px 1fr;min-height:100vh}
.zij{background:var(--zwart);color:var(--muted-licht);padding:22px 16px 18px;display:flex;flex-direction:column;gap:4px;position:sticky;top:0;height:100vh;overflow:auto;background-image:radial-gradient(ellipse at 100% 0%,rgba(79,70,229,.35) 0%,rgba(11,11,12,0) 55%),radial-gradient(ellipse at 0% 100%,rgba(15,168,154,.22) 0%,rgba(11,11,12,0) 50%)}
.logo{font-family:var(--kop);font-weight:800;font-size:1.35rem;color:#fff;letter-spacing:-.03em;padding:4px 10px 14px;text-decoration:none;display:block}
.logo b{background:var(--gradient);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}
.logo i{display:inline-block;width:.42em;height:.42em;border-radius:50%;background:#0FA89A;margin-left:.1em;vertical-align:baseline}
.profiel{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:12px;margin:2px 0 12px}
.profiel .av{width:40px;height:40px;border-radius:12px;background:var(--gradient);color:#fff;display:grid;place-items:center;font-family:var(--kop);font-weight:800;font-size:.95rem;flex:none;letter-spacing:0}
.profiel strong{color:#fff;display:block;font-size:.92rem;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profiel small{color:var(--muted-licht);font-size:.76rem}
.zij nav a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:12px;color:var(--muted-licht);text-decoration:none;font-weight:500;position:relative;transition:background .15s,color .15s}
.zij nav a svg{width:18px;height:18px;flex:none;opacity:.8}
.zij nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.zij nav a.actief{background:rgba(255,255,255,.1);color:#fff}
.zij nav a.actief::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:3px;background:var(--gradient)}
.zij nav a.actief svg{opacity:1}
.zij nav a .bol{margin-left:auto;background:var(--oranje);color:#000;font-family:var(--mono);font-size:.68rem;font-weight:600;border-radius:999px;padding:2px 8px}
.zij .kopje{font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);padding:14px 12px 6px;display:block}
.zij .onder{margin-top:auto;border-top:1px solid rgba(255,255,255,.1);padding-top:14px;font-size:.84rem;display:grid;gap:10px}
.motor{display:flex;align-items:center;gap:10px;color:#fff;font-weight:600;font-size:.84rem;padding:0 4px}
.puls{width:10px;height:10px;border-radius:50%;background:var(--mint-2);box-shadow:0 0 0 0 rgba(126,234,223,.6);animation:puls 2.2s infinite;flex:none}
.puls.uit{background:var(--oranje);animation:none;box-shadow:none}.puls.test{background:var(--paars-2);animation:none;box-shadow:none}
@keyframes puls{0%{box-shadow:0 0 0 0 rgba(126,234,223,.55)}70%{box-shadow:0 0 0 9px rgba(126,234,223,0)}100%{box-shadow:0 0 0 0 rgba(126,234,223,0)}}
.pauze{width:100%;border:1px solid rgba(255,255,255,.22);background:transparent;color:#fff;border-radius:999px;padding:9px;font-family:var(--font);font-weight:600;cursor:pointer;font-size:.84rem}
.pauze:hover{background:rgba(255,255,255,.08)}
.pauze.aan{background:var(--oranje);color:#000;border-color:var(--oranje)}
.wie{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:0 4px}
.wie strong{color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.wie a{color:var(--muted-licht);font-size:.8rem}
.hoofd{padding:28px 36px 60px;display:flex;flex-direction:column;gap:20px;max-width:1380px;width:100%;position:relative}
.hoofd::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(ellipse 60% 40% at 20% -10%,rgba(205,243,236,.7) 0%,rgba(244,245,250,0) 60%),radial-gradient(ellipse 50% 40% at 95% 0%,rgba(238,237,255,.9) 0%,rgba(244,245,250,0) 60%)}

/* ---- koppen en labels ---- */
.top{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:4px}
.top h1{font-size:1.9rem;font-weight:800;line-height:1.1;margin:4px 0 8px}
.top .sub{color:var(--muted);margin:0;max-width:760px;font-size:.95rem}
.top .sub b{color:var(--tekst)}
.top .rechts{margin-left:auto;display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding-bottom:4px}
.pil{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;padding:6px 11px;border-radius:999px;background:var(--licht-2);color:var(--muted);white-space:nowrap;display:inline-block}
.pil.mint{background:var(--mint);color:var(--groen-donker)}.pil.paars{background:var(--paars-licht);color:var(--paars-donker)}.pil.oranje{background:var(--oranje-licht);color:#8a5a00}.pil.zwart{background:var(--zwart);color:#fff}.pil.rood{background:var(--rood-licht);color:var(--rood)}
.eyebrow{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--muted)}
.melding{background:var(--mint);color:var(--groen-donker);border-radius:14px;padding:12px 16px;font-weight:600}
.kort{color:var(--muted);font-size:.84rem}
.leeg{color:var(--muted);font-size:.92rem;padding:8px 0;margin:0}

/* ---- tegels ---- */
.tegels{display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr;gap:16px}
.tegels.vier{grid-template-columns:repeat(4,1fr)}
.tegel{background:#fff;border:1px solid var(--rand);border-radius:var(--radius);padding:22px 24px;display:flex;flex-direction:column;gap:8px;min-width:0;box-shadow:var(--schaduw);position:relative;overflow:hidden}
.tegel.held{background:var(--zwart);color:#fff;border-color:var(--zwart);background-image:radial-gradient(ellipse at 100% 0%,rgba(79,70,229,.55) 0%,rgba(11,11,12,0) 55%),radial-gradient(ellipse at 0% 110%,rgba(15,168,154,.4) 0%,rgba(11,11,12,0) 50%)}
.tegel.held .eyebrow{color:#B7B3FF}
.getal{font-family:var(--kop);font-weight:800;font-size:2.6rem;line-height:1;letter-spacing:-.04em}
.getal small{font-size:1.15rem;color:var(--muted);font-weight:700;letter-spacing:-.02em}
.tegel.held .getal{font-size:3.6rem;background:linear-gradient(92deg,#7EEADF,#B7B3FF);-webkit-background-clip:text;background-clip:text;color:transparent}
.tegel.held .getal small{color:#B4B4BC;-webkit-text-fill-color:#B4B4BC}
.delta{font-size:.84rem;color:var(--muted);line-height:1.45}
.delta b{color:var(--groen-donker);font-weight:600}.delta a{color:var(--paars);font-weight:600;text-decoration:none}
.tegel.held .delta{color:#B4B4BC}.tegel.held .delta b{color:#7EEADF}
.sparkvak{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:4px}
.sparkvak small{color:var(--muted-licht);font-size:.7rem;font-family:var(--mono)}
.spark{overflow:visible}
.spark .lijn{fill:none;stroke:var(--paars);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.spark .vlak{fill:var(--paars-licht)}
.spark .punt{fill:var(--paars)}
.spark.mint .lijn{stroke:var(--mint-2)}.spark.mint .vlak{fill:rgba(126,234,223,.18)}.spark.mint .punt{fill:var(--mint-2)}
.ringrij{display:flex;align-items:center;gap:14px}
.ring .spoor{fill:none;stroke:var(--licht-2)}
.ring .deel{fill:none;stroke:var(--paars);stroke-linecap:round}
.ring text{font-family:var(--kop);font-weight:800;font-size:13px;fill:var(--tekst)}
.ring.mint .deel{stroke:var(--mint-2)}.ring.mint .spoor{stroke:rgba(255,255,255,.14)}.ring.mint text{fill:#fff}
.ring.grijs .deel{stroke:var(--rand-2)}.ring.grijs text{fill:var(--muted)}
.tegel.held .ring .spoor{stroke:rgba(255,255,255,.14)}.tegel.held .ring text{fill:#fff}

/* ---- kaarten ---- */
.rij2{display:grid;grid-template-columns:1.35fr 1fr;gap:16px}
.rij2.gelijk{grid-template-columns:1fr 1fr}
.rij2.breed{grid-template-columns:1.7fr 1fr}
.rij3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.ai-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.kaart{background:#fff;border:1px solid var(--rand);border-radius:var(--radius);padding:22px 24px;min-width:0;box-shadow:var(--schaduw)}
.kaart-kop{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.kaart-kop h2{font-size:1.12rem;letter-spacing:-.015em}
.kaart-kop .eyebrow{display:block;margin-top:3px;letter-spacing:.1em;text-transform:none;font-family:var(--font);font-size:.82rem;font-weight:400;color:var(--muted)}
.kaart-kop .meer,.wacht .meer{margin-left:auto;color:var(--paars);font-weight:600;font-size:.84rem;text-decoration:none;white-space:nowrap;padding:6px 12px;border-radius:999px;background:var(--paars-licht)}
.kaart-kop .meer:hover{background:#E2E0FF}
.kaart-kop .pil{margin-left:auto}
.kaart-kop .pil + .meer{margin-left:0}

/* ---- grafieken ---- */
.grafiek{position:relative}
.grafiek svg{width:100%;height:auto;display:block;overflow:visible}
.staafgrafiek .as{font-family:var(--mono);font-size:10px;fill:var(--muted)}
.staafgrafiek .raster{stroke:#EEEEF3}
.staafgrafiek .staaf{fill:var(--paars-2);transition:fill .15s}.staafgrafiek .staaf.laatste{fill:var(--paars)}
.staafgrafiek .staaf.mint{fill:#9FEFE4}.staafgrafiek .staaf.mint.laatste{fill:var(--groen)}
.staafgrafiek .vang{fill:transparent;cursor:pointer}
.staafgrafiek .vang:hover + .staaf{fill:var(--paars-donker)}
.staafgrafiek .vang:hover + .staaf.mint{fill:var(--groen-donker)}
.staafgrafiek .waarde{font-family:var(--font);font-size:11px;font-weight:700;fill:var(--tekst)}
.grafiek .tip{position:absolute;background:var(--zwart);color:#fff;border-radius:10px;padding:7px 10px;font-size:.78rem;pointer-events:none;transform:translate(-50%,-100%);white-space:nowrap;box-shadow:0 8px 20px rgba(0,0,0,.2);z-index:2}
.grafiek .tip[hidden]{display:none}

/* ---- pijplijn ---- */
.pijplijn{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kolom{background:var(--licht);border-radius:16px;padding:12px;min-height:150px;min-width:0}
.stapkop{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-weight:600;font-size:.86rem}
.stapkop i{width:22px;height:22px;border-radius:50%;background:#fff;border:1px solid var(--rand-2);display:grid;place-items:center;font-style:normal;font-family:var(--mono);font-size:.68rem;color:var(--muted);flex:none}
.stapkop b{margin-left:auto;font-family:var(--mono);font-size:.72rem;color:var(--muted);font-weight:600}
.kolom:nth-child(3) .stapkop i{background:var(--oranje-licht);border-color:var(--oranje);color:#8a5a00}
.kolom:nth-child(4) .stapkop i{background:var(--mint);border-color:var(--groen);color:var(--groen-donker)}
.item{background:#fff;border:1px solid var(--rand);border-radius:12px;padding:10px 12px;font-size:.84rem;margin-bottom:8px;display:flex;flex-direction:column;gap:3px;overflow-wrap:anywhere;box-shadow:0 1px 2px rgba(20,20,60,.04)}
.item small{color:var(--muted)}
.item a{color:inherit;text-decoration:none;font-weight:600}
.item.akkoord{border-color:var(--oranje);box-shadow:0 0 0 3px var(--oranje-licht)}
.item.live{border-color:var(--groen)}
.item .stip{display:none}

/* ---- tabellen ---- */
table{width:100%;border-collapse:collapse;font-size:.88rem}
th{text-align:left;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;padding:8px 10px;border-bottom:1px solid var(--rand);white-space:nowrap}
td{padding:11px 10px;border-bottom:1px solid var(--rand);vertical-align:middle}
tr:last-child td{border-bottom:0}
table.strak tbody tr:hover td{background:#FAFAFD}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
td a{text-decoration:none;font-weight:600;color:var(--tekst)}
td a:hover{color:var(--paars)}
.tabel-scroll{overflow:auto}
.status{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:.8rem;white-space:nowrap}
.status .ico{width:18px;height:18px;border-radius:50%;display:inline-grid;place-items:center;flex:none}
.status.ja .ico{background:var(--mint);color:var(--groen-donker)}.status.nee .ico{background:var(--licht-2);color:var(--muted)}.status.nee{color:var(--muted)}.status.deels .ico{background:var(--oranje-licht);color:#8a5a00}.status.leeg{color:var(--muted-licht)}.status.leeg .ico{background:var(--licht)}
.status .ico::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:14px}
.chips .eyebrow{width:100%}
.chip{background:var(--licht);border:1px solid var(--rand);border-radius:999px;padding:5px 11px;font-size:.8rem;color:var(--tekst)}
.chip b{color:var(--muted);font-weight:600;margin-left:4px}

/* ---- ringen en kansen ---- */
.ringen{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.ringkaart{display:flex;align-items:center;gap:12px;background:var(--licht);border-radius:16px;padding:12px}
.ringkaart strong{display:block;font-size:.92rem}
.ringkaart small{color:var(--muted);font-size:.78rem}
.kansen{display:grid;gap:12px}
.kans-kop{display:flex;justify-content:space-between;gap:10px;font-size:.88rem;font-weight:600;margin-bottom:5px}
.kans-kop small{color:var(--muted);font-weight:400;white-space:nowrap}
.kans-cijfers{display:flex;gap:14px;font-size:.78rem;color:var(--muted);margin-top:5px}
.kans-cijfers b{color:var(--tekst)}
.balk{height:10px;border-radius:999px;background:var(--licht-2);overflow:hidden;display:flex}
.balk.dun{height:8px}
.balk i{display:block;height:100%}
.balk .g{background:var(--groen)}.balk .p{background:var(--paars)}.balk .o{background:var(--rand-2)}
.balk.dun .p{background:linear-gradient(90deg,#B7B3FF,#4F46E5)}

/* ---- wachtlijst en knoppen ---- */
.wacht{display:flex;flex-direction:column;gap:10px}
.wacht .item{flex-direction:row;align-items:center;gap:12px;padding:14px;flex-wrap:wrap}
.wacht .item > div{flex:1;min-width:200px}
.wacht .meer{margin-left:0;align-self:flex-start}
.knop{border:0;border-radius:999px;padding:9px 16px;font-family:var(--font);font-weight:600;font-size:.84rem;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px;color:var(--tekst);background:var(--licht-2);transition:transform .1s,background .15s}
.knop:hover{transform:translateY(-1px)}
.knop.ok{background:var(--mint);color:var(--groen-donker)}.knop.lijn{background:#fff;border:1px solid var(--rand-2);color:var(--tekst)}.knop.paars{background:var(--paars);color:#fff}.knop.zwart{background:var(--zwart);color:#fff}.knop.rood{background:var(--rood-licht);color:var(--rood)}
.knop.klein{padding:5px 11px;font-size:.76rem}
.knop.groot{justify-content:center;padding:13px;font-size:.95rem}
.knoppen{display:flex;gap:8px;flex-wrap:wrap}
.bots{display:flex;gap:4px;flex-wrap:wrap}
.bot{font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;padding:2px 7px;border-radius:6px;background:var(--licht-2);color:var(--muted);white-space:nowrap}
.bot.aan{background:var(--paars-licht);color:var(--paars-donker)}

/* ---- onderwerpkaart ---- */
.clusters{display:flex;flex-direction:column;gap:10px}
.cluster{display:grid;grid-template-columns:150px 1fr 72px;align-items:center;gap:12px;font-size:.86rem}
.cluster span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cluster small{color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.legenda{display:flex;gap:14px;font-size:.78rem;color:var(--muted);margin-top:12px;flex-wrap:wrap}
.legenda span::before{content:"";display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px;background:var(--groen)}
.legenda span:nth-child(2)::before{background:var(--paars)}.legenda span:nth-child(3)::before{background:var(--rand-2)}

/* ---- rapportage en vraag ---- */
.rapport{background:linear-gradient(135deg,#EAF9F5,#F1F0FF);border:0}
.rapport p{margin:0 0 14px;color:var(--muted)}
.rapport ul{margin:0 0 14px;padding-left:18px}
.vraag{margin-top:20px;padding-top:18px;border-top:1px solid rgba(20,20,60,.08)}
.vraag textarea{margin-top:10px;min-height:72px}
.vraag .knop{margin-top:8px}
.spec{display:flex;align-items:center;gap:12px}
.spec .av{width:40px;height:40px;border-radius:50%;background:var(--gradient);color:#fff;display:grid;place-items:center;font-family:var(--kop);font-weight:800;flex:none}
.antwoord{background:var(--licht);border-radius:14px;padding:14px 16px;font-size:.86rem;margin-top:12px;white-space:pre-wrap;overflow-wrap:anywhere}
.antwoord .eyebrow{display:block;margin-bottom:6px;white-space:normal}
.antwoord mark{background:var(--mint);color:var(--groen-donker);padding:0 3px;border-radius:3px}
.antwoord.signaal{background:var(--paars-licht)}
.rapportkaarten{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.rapportkaart.lopend{background:linear-gradient(135deg,#F3FBF9,#F4F3FF)}
.rapportkaart h2{font-size:1.4rem;margin-top:2px}
.ministats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:4px 0 14px}
.ministats div{background:rgba(255,255,255,.75);border:1px solid var(--rand);border-radius:14px;padding:12px}
.ministats b{display:block;font-family:var(--kop);font-weight:800;font-size:1.5rem;letter-spacing:-.03em;margin:4px 0 2px}
.ministats b em{font-style:normal;font-size:.9rem;color:var(--muted)}
.ministats small{color:var(--muted);font-size:.76rem}
.punten{margin:0 0 16px;padding-left:18px;color:var(--muted);font-size:.9rem}
.punten li{margin:4px 0}

/* ---- formulieren ---- */
form.formulier{display:grid;gap:12px;max-width:720px}
form.formulier label{display:grid;gap:5px;font-weight:600;font-size:.85rem}
form.formulier label small{font-weight:400;color:var(--muted)}
input[type=text],input[type=email],input[type=password],input[type=number],select,textarea{border:1px solid var(--rand-2);border-radius:12px;padding:10px 13px;font-family:var(--font);font-size:.92rem;background:#fff;width:100%;color:var(--tekst)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--paars-2);outline-offset:0;border-color:var(--paars)}
textarea{min-height:90px;resize:vertical}
.inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.inline input,.inline select{width:auto;min-width:120px}
.opties{display:grid;gap:8px}
.optie{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--rand);border-radius:14px;padding:12px;cursor:pointer}
.optie input{margin-top:3px}
.optie b{display:block}
.optie small{color:var(--muted)}
.poorten{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.poort{border:1px solid var(--rand);border-radius:12px;padding:10px;font-size:.8rem}
.poort.ok{border-color:var(--groen);background:#F3FBF9}
.poort.fout{border-color:var(--oranje);background:var(--oranje-licht)}
.poort b{display:block;margin-bottom:4px}
.poort ul{margin:0;padding-left:16px;color:var(--muted)}
.brief dl{display:grid;grid-template-columns:160px 1fr;gap:6px 14px;margin:0;font-size:.88rem}
.brief dt{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding-top:3px}
.brief dd{margin:0}
.brief ul{margin:0;padding-left:18px}
.artikel{max-width:760px;line-height:1.65;font-size:1rem}
.artikel h2{font-size:1.35rem;margin:28px 0 10px}
.artikel h3{font-size:1.1rem;margin:22px 0 8px}
.artikel .direct{background:var(--mint);border-radius:14px;padding:14px 16px;font-weight:600;color:var(--groen-donker)}
.fout{background:var(--rood-licht);color:var(--rood);border-radius:12px;padding:10px 12px;font-weight:600;margin-bottom:12px}
.log{font-family:var(--mono);font-size:.74rem;background:var(--zwart);color:#DDD;border-radius:14px;padding:14px;max-height:520px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere}
.stappen{display:grid;gap:6px}
.stap{display:flex;gap:10px;align-items:baseline;font-size:.86rem;border-bottom:1px solid var(--rand);padding:6px 0}
.stap .pil{flex:none}
details summary{cursor:pointer;font-weight:600}
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tabs a{text-decoration:none;padding:6px 12px;border-radius:999px;background:#fff;border:1px solid var(--rand-2);color:var(--tekst);font-weight:600;font-size:.82rem}
.tabs a.actief{background:var(--zwart);color:#fff;border-color:var(--zwart)}
.menu-knop{display:none}

/* ---- inloggen ---- */
.login{min-height:100vh;display:grid;place-items:center;background:var(--zwart);background-image:radial-gradient(ellipse at 85% 10%,rgba(79,70,229,.55) 0%,rgba(11,11,12,0) 55%),radial-gradient(ellipse at 5% 95%,rgba(15,168,154,.4) 0%,rgba(11,11,12,0) 50%);padding:24px}
.login-vlak{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center;width:min(960px,100%)}
.login-tekst{color:#B4B4BC}
.login-tekst .logo{padding:0 0 22px;font-size:1.6rem}
.login-tekst h1{color:#fff;font-size:2rem;font-weight:800;line-height:1.1;margin-bottom:18px}
.login-tekst ul{margin:0;padding-left:18px;display:grid;gap:8px;font-size:.95rem}
.login-kaart{padding:32px;border-radius:24px}
.login-kaart h2{font-size:1.4rem;margin-bottom:4px}
.login-kaart .kort{margin:0 0 16px}
.login-kaart form + .kort{margin:16px 0 0}

/* ---- berichten, wensen, facturen ---- */
.bol.mint{background:var(--mint-2);color:#000}.bol.grijs{background:rgba(255,255,255,.18);color:#fff}
.berichten{display:flex;flex-direction:column;gap:10px;max-height:520px;overflow:auto;padding:4px}
.bericht{max-width:82%;border-radius:16px;padding:10px 14px;font-size:.9rem;white-space:pre-wrap;overflow-wrap:anywhere;background:var(--licht);align-self:flex-end;border-bottom-right-radius:6px}
.bericht.specialist{background:var(--paars-licht);align-self:flex-start;border-bottom-right-radius:16px;border-bottom-left-radius:6px}
.bericht small{display:block;color:var(--muted);font-size:.72rem;margin-top:4px;white-space:normal}
.wensen .item{flex-direction:row;align-items:center;gap:12px;flex-wrap:wrap}
.wensen .item > div{flex:1;min-width:200px}
.feitgroep{margin-bottom:12px}
.feitgroep .eyebrow{display:block;margin-bottom:6px}
.feitgroep .chip{margin:0 6px 6px 0;display:inline-block}
.factuur-open{border-color:var(--oranje);box-shadow:0 0 0 3px var(--oranje-licht)}
td .pil{font-size:.6rem}
.invoerblok{display:grid;gap:10px;background:var(--licht);border-radius:16px;padding:16px}
.invoerblok label{display:grid;gap:4px;font-weight:600;font-size:.84rem}
.invoerblok label small{font-weight:400;color:var(--muted)}
.invoerblok .rij{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:760px){.invoerblok .rij{grid-template-columns:1fr}.bericht{max-width:100%}}

/* ---- pakketten ---- */
.lijnen{display:grid;gap:16px}
.lijn-kop{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.lijn-kop h3{font-size:1.2rem;margin-top:2px}
.lijn-kop .pil{margin-left:auto}
.aanvraag{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--oranje-licht);border:1px solid var(--oranje);border-radius:14px;padding:12px 14px;margin-bottom:14px}
.aanvraag > div{flex:1;min-width:200px}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.tier{border:1px solid var(--rand);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:8px;background:#fff;position:relative}
.tier.huidig{border-color:var(--groen);box-shadow:0 0 0 3px var(--mint)}
.tier.populair{border-color:var(--paars-2)}
.tier-kop{display:flex;justify-content:space-between;align-items:center;gap:8px}
.tier-kop strong{font-family:var(--kop);font-size:1.02rem}
.tier-spec b{font-family:var(--kop);font-weight:800;font-size:1.6rem;letter-spacing:-.03em;margin-right:4px}
.tier-spec small{display:block;color:var(--muted);font-size:.76rem}
.tier .kort{margin:0}
.tier-lijst{margin:0;padding-left:16px;font-size:.82rem;color:var(--muted);flex:1}
.tier-lijst li{margin:3px 0}
.tier-voet{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:4px;flex-wrap:wrap}
.tier-voet .prijs{font-weight:600;font-size:.86rem}
.stoppen{margin-top:12px;text-align:right}
@media (max-width:900px){.tiers{grid-template-columns:1fr}}

/* ---- factuur (los document) ---- */
body.factuurpagina{background:var(--licht)}
.factuur-balk{background:var(--zwart);color:#fff;padding:10px 24px;display:flex;gap:16px;align-items:center;font-size:.9rem}
.factuur-balk a{color:#fff;font-weight:600;text-decoration:none}
.factuur-balk button{margin-left:auto}
.factuur{max-width:820px;margin:32px auto;background:#fff;border:1px solid var(--rand);border-radius:20px;padding:44px 48px;box-shadow:var(--schaduw)}
.factuur-kop{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:32px}
.factuur-kop h1{font-size:2rem;font-weight:800}
.factuur-kop .logo{color:var(--zwart);padding:0 0 8px}
.adresblok{font-size:.9rem;line-height:1.5;white-space:pre-line}
.adresblok .eyebrow{display:block;margin-bottom:4px}
.factuur-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 28px;font-size:.88rem}
.factuur-meta div{background:var(--licht);border-radius:12px;padding:10px 12px}
.factuur-meta .eyebrow{display:block;margin-bottom:3px}
.factuur table td,.factuur table th{padding:12px 10px}
.factuur .totalen{margin-left:auto;width:min(360px,100%);margin-top:16px;font-size:.92rem}
.factuur .totalen div{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--rand)}
.factuur .totalen div.eind{border:0;font-family:var(--kop);font-weight:800;font-size:1.3rem;padding-top:10px}
.factuur .voet{margin-top:36px;color:var(--muted);font-size:.84rem;border-top:1px solid var(--rand);padding-top:14px}
.factuur .stempel{display:inline-block;font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;padding:6px 12px;border-radius:999px}
@media print{.factuur-balk{display:none}.factuur{box-shadow:none;border:0;margin:0;max-width:none;padding:0}body.factuurpagina{background:#fff}}
@media (max-width:760px){.factuur{padding:24px 18px;margin:12px}.factuur-meta{grid-template-columns:1fr 1fr}}

.melding.blokkade{background:var(--rood-licht);color:var(--rood)}
.melding.blokkade a{color:var(--rood);font-weight:700}

/* ---- wizard ---- */
.wizard{display:grid;grid-template-columns:300px 1fr;gap:16px;align-items:start}
.stappenlijst{position:sticky;top:20px}
.voortgang{height:8px;border-radius:999px;background:var(--licht-2);overflow:hidden;margin-bottom:14px}
.voortgang i{display:block;height:100%;background:var(--gradient);border-radius:999px;transition:width .3s}
.stap-item{display:flex;gap:12px;align-items:flex-start;padding:10px 10px;border-radius:12px;text-decoration:none;color:var(--tekst)}
.stap-item i{width:26px;height:26px;border-radius:50%;background:var(--licht-2);display:grid;place-items:center;font-style:normal;font-family:var(--mono);font-size:.72rem;color:var(--muted);flex:none}
.stap-item strong{display:block;font-size:.92rem}
.stap-item small{color:var(--muted);font-size:.78rem}
.stap-item.af i{background:var(--mint);color:var(--groen-donker)}
.stap-item.actief{background:var(--paars-licht)}.stap-item.actief i{background:var(--paars);color:#fff}
.stapvak{min-height:420px}
.stapvak h3{font-size:1.05rem;margin:0 0 8px}
.koppelstap ol.punten{margin:0 0 14px}
.controle .stap{align-items:center;font-size:.92rem;padding:10px 0}
.melding a{color:inherit;font-weight:700}
@media (max-width:1000px){.wizard{grid-template-columns:1fr}.stappenlijst{position:static}}

/* ---- kalender ---- */
.rooster2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.maandgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.dagkop{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:center;padding:4px 0}
.dag{min-height:74px;border:1px solid var(--rand);border-radius:10px;padding:5px 6px;background:#fff;display:flex;flex-direction:column;gap:3px;overflow:hidden}
.dag.buiten{opacity:.35}.dag.weekend{background:var(--licht)}
.dag.vandaag{border-color:var(--paars);box-shadow:0 0 0 2px var(--paars-licht)}
.dagnr{font-family:var(--mono);font-size:.7rem;color:var(--muted)}
.dag.vandaag .dagnr{color:var(--paars);font-weight:600}
.kal-item{display:block;font-size:.7rem;line-height:1.25;padding:3px 6px;border-radius:6px;text-decoration:none;color:var(--tekst);background:var(--licht-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kal-item.live{background:var(--mint);color:var(--groen-donker)}.kal-item.gepland{background:var(--paars-licht);color:var(--paars-donker)}.kal-item.akkoord{background:var(--oranje-licht);color:#8a5a00}
.tabs a small{color:var(--muted);font-weight:500;margin-left:4px}.tabs a.actief small{color:#B4B4BC}
.bronlijst{margin:0;padding-left:18px}.bronlijst li{margin:3px 0}
.chips .chip{text-decoration:none}
@media (max-width:1100px){.rooster2{grid-template-columns:1fr}}
@media (max-width:760px){.dag{min-height:46px;padding:3px}.kal-item{font-size:0;height:6px;padding:0;border-radius:3px}}

/* ---- responsive ---- */
@media (max-width:1180px){.tegels,.tegels.vier{grid-template-columns:1fr 1fr}.rij2,.rij2.gelijk,.rij2.breed,.rij3,.ai-grid,.rapportkaarten{grid-template-columns:1fr}.pijplijn{grid-template-columns:1fr 1fr}.poorten{grid-template-columns:1fr 1fr}.login-vlak{grid-template-columns:1fr;gap:28px}}
@media (max-width:760px){.app{grid-template-columns:1fr}.zij{position:static;height:auto;padding:14px 16px}.zij nav{display:none}.zij.open nav{display:block}.zij .onder,.zij .profiel{display:none}.zij.open .profiel{display:flex}.menu-knop{display:inline-flex;margin-left:auto;background:transparent;border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:8px;padding:6px 10px;font-family:var(--font);cursor:pointer}.zij-top{display:flex;align-items:center}.hoofd{padding:16px 16px 40px}.top h1{font-size:1.5rem}.tegels,.tegels.vier{grid-template-columns:1fr}.pijplijn{grid-template-columns:1fr}.getal{font-size:2.2rem}.tegel.held .getal{font-size:3rem}.cluster{grid-template-columns:100px 1fr 56px}.brief dl{grid-template-columns:1fr}.poorten{grid-template-columns:1fr}.ringen{grid-template-columns:1fr}.ministats{grid-template-columns:1fr 1fr}.kaart,.tegel{padding:18px}}

/* wachtwoordveld met oogje */
.ww{position:relative;display:block}
.ww input{padding-right:44px}
.ww .oog{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:none;padding:6px;cursor:pointer;color:var(--muted);line-height:0;border-radius:8px}
.ww .oog:hover,.ww .oog[aria-pressed=true]{color:var(--tekst);background:var(--licht)}

/* tweestapsverificatie */
.qr{display:inline-block;background:#fff;border:1px solid var(--rand-2);border-radius:14px;padding:10px;line-height:0}
.qr svg{width:220px;height:220px}
.herstelcodes{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px;margin-top:8px}
.herstelcodes code{display:block;background:var(--licht);border:1px solid var(--rand-2);border-radius:10px;padding:10px 12px;font-family:var(--mono);font-size:.95rem;letter-spacing:.06em;text-align:center}