:root{
--paars:#551AE6; --paars-licht:#8B5CF6; --donker:#0F172A;
--tekst:#334155; --gedempt:#64748B; --bg:#F8FAFC; --wit:#FFFFFF;
--succes:#10B981; --waarschuwing:#F59E0B; --fout:#EF4444;
--rand:rgba(100,116,139,.18);
--merk:linear-gradient(135deg,#551AE6 0%,#8B5CF6 100%);
--donkergrad:linear-gradient(135deg,#0F172A 0%,#3B0FB3 100%);
--schaduw:0 1px 3px rgba(15,23,42,.08),0 8px 24px rgba(15,23,42,.06);
}
*{box-sizing:border-box;margin:0;padding:0}
body{
font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,Roboto,sans-serif;
background:var(--bg); color:var(--tekst); font-size:14px; line-height:1.55;
-webkit-font-smoothing:antialiased;
}
button{font-family:inherit;font-size:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea,select{font-family:inherit;font-size:inherit}
.verborgen{display:none!important}
/* ---------- INLOGGEN ---------- */
#inlog{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--donkergrad);padding:24px;position:relative;overflow:hidden}
#inlog::before{content:'';position:absolute;width:900px;height:900px;border-radius:50%;
background:radial-gradient(circle,rgba(139,92,246,.45) 0%,transparent 70%);top:-380px;right:-280px}
.inlogkaart{background:var(--wit);border-radius:18px;padding:40px;width:100%;max-width:470px;box-shadow:0 24px 70px rgba(0,0,0,.34);position:relative;z-index:1}
.merknaam{font-size:30px;font-weight:800;letter-spacing:-.8px;color:var(--donker)}
.merknaam span{background:var(--merk);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.inlogkaart p.sub{color:var(--gedempt);margin:6px 0 26px;font-size:13.5px}
.rolknop{display:flex;align-items:center;gap:14px;width:100%;padding:15px;border:1.5px solid var(--rand);border-radius:12px;margin-bottom:10px;transition:.16s;text-align:left;background:var(--wit)}
.rolknop:hover{border-color:var(--paars);background:#FAF7FF;transform:translateY(-1px)}
.rolavatar{width:42px;height:42px;border-radius:11px;background-color:#551AE6;background-image:var(--merk);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;flex-shrink:0}
.rolknop b{display:block;color:var(--donker);font-size:14.5px}
.rolknop small{color:var(--gedempt);font-size:12.5px}
.sessievoet{margin-top:22px;padding-top:16px;border-top:1px solid var(--rand);text-align:center;color:var(--gedempt);font-size:11.5px}
/* ---------- LAYOUT ---------- */
#app{display:none;min-height:100vh}
#app.actief{display:block}
.topbar{background:var(--donker);color:#fff;padding:0 22px;display:flex;align-items:center;gap:22px;height:56px;position:sticky;top:0;z-index:50}
.topbar .logo{font-weight:800;font-size:17px;letter-spacing:-.4px}
.topbar .logo span{color:var(--paars-licht)}
.rolbadge{background:rgba(139,92,246,.2);color:#C4B5FD;padding:4px 11px;border-radius:20px;font-size:11.5px;font-weight:600}
.topbar .rechts{margin-left:auto;display:flex;align-items:center;gap:14px}
.gebruiker{display:flex;align-items:center;gap:9px;font-size:13px}
.gebruiker .av{width:29px;height:29px;border-radius:50%;background-color:#551AE6;background-image:var(--merk);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11.5px}
.uitlog{color:#94A3B8;font-size:12.5px}
.uitlog:hover{color:#fff}
.nav{background:var(--wit);border-bottom:1px solid var(--rand);padding:0 22px;display:flex;gap:2px;overflow-x:auto;position:sticky;top:56px;z-index:49}
.nav button{padding:13px 15px;color:var(--gedempt);font-size:13.5px;font-weight:500;border-bottom:2.5px solid transparent;white-space:nowrap}
.nav button:hover{color:var(--paars)}
.nav button.actief{color:var(--paars);border-bottom-color:var(--paars);font-weight:600}
.pagina{padding:24px;max-width:1500px;margin:0 auto}
.paginakop{margin-bottom:20px}
.paginakop h1{font-size:22px;color:var(--donker);font-weight:700;letter-spacing:-.4px}
.paginakop p{color:var(--gedempt);font-size:13.5px;margin-top:3px}
/* ---------- BOUWSTENEN ---------- */
.kaart{background:var(--wit);border:1px solid var(--rand);border-radius:13px;box-shadow:var(--schaduw)}
.kaartkop{padding:15px 17px;border-bottom:1px solid var(--rand);display:flex;align-items:center;justify-content:between;gap:10px}
.kaartkop h2{font-size:14.5px;color:var(--donker);font-weight:650}
.kaartkop .rechts{margin-left:auto}
.kaartlijf{padding:17px}
.raster{display:grid;gap:16px}
.r2{grid-template-columns:repeat(2,1fr)}
.r3{grid-template-columns:repeat(3,1fr)}
.r4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1150px){.r4{grid-template-columns:repeat(2,1fr)}.r3{grid-template-columns:1fr}}
@media(max-width:820px){.r2,.r4{grid-template-columns:1fr}}
.kpi{background:var(--wit);border:1px solid var(--rand);border-radius:13px;padding:17px;box-shadow:var(--schaduw)}
.kpi .label{color:var(--gedempt);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.kpi .waarde{font-size:30px;font-weight:750;color:var(--donker);margin:7px 0 3px;letter-spacing:-1px}
.kpi .delta{font-size:12.5px;font-weight:600}
.kpi .delta.op{color:var(--succes)}
.kpi .delta.neer{color:var(--fout)}
.kpi.accent{background:var(--merk);border:none;color:#fff}
.kpi.accent .label,.kpi.accent .waarde,.kpi.accent .delta{color:#fff}
.kpi.accent .label{opacity:.85}
.delta{font-size:12.5px;font-weight:600}
.delta.op{color:var(--succes)}
.delta.neer{color:var(--fout)}
.pil{display:inline-block;flex:none;vertical-align:middle;line-height:1.4;padding:3px 10px;border-radius:20px;font-size:11.5px;font-weight:650;white-space:nowrap}
.pil.groen{background:#D1FAE5;color:#065F46}
.pil.paars{background:#EDE9FE;color:#5B21B6}
.pil.geel{background:#FEF3C7;color:#92400E}
.pil.rood{background:#FEE2E2;color:#991B1B}
.pil.grijs{background:#F1F5F9;color:#475569}
.pil.blauw{background:#DBEAFE;color:#1E40AF}
.knop{background-color:#551AE6;background-image:var(--merk);color:#fff;flex:none;padding:9px 17px;border-radius:9px;font-weight:600;font-size:13.5px;transition:.16s;display:inline-block;vertical-align:middle;line-height:1.4;text-align:center}
.knop:hover{opacity:.9;transform:translateY(-1px)}
.knop:disabled{opacity:.4;cursor:not-allowed;transform:none}
.knop.grijs{background-color:#F1F5F9;background-image:none;color:var(--tekst)}
.knop.rood{background-color:var(--fout);background-image:none}
.knop.groen{background-color:var(--succes);background-image:none}
.knop.klein{padding:6px 12px;font-size:12.5px}
table{width:100%;border-collapse:collapse}
th{text-align:left;padding:10px 13px;font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--gedempt);font-weight:650;border-bottom:1px solid var(--rand);background:#FBFCFE}
td{padding:11px 13px;border-bottom:1px solid var(--rand);font-size:13.5px;vertical-align:middle}
tr:last-child td{border-bottom:none}
tbody tr:hover{background:#FAFBFD}
td b{color:var(--donker);font-weight:620}
.score{display:inline-block;vertical-align:middle;width:38px;height:26px;line-height:26px;text-align:center;border-radius:7px;font-weight:700;font-size:13px}
.score.hoog{background:#D1FAE5;color:#065F46}
.score.mid{background:#FEF3C7;color:#92400E}
.score.laag{background:#FEE2E2;color:#991B1B}
.balk{height:6px;background:#F1F5F9;border-radius:4px;overflow:hidden}
.balk i{display:block;height:100%;background-color:#551AE6;background-image:var(--merk);border-radius:4px}
.leeg{padding:40px 20px;text-align:center;color:var(--gedempt);font-size:13.5px}
.notitie{background:#FAF7FF;border-left:3px solid var(--paars);padding:11px 14px;border-radius:0 8px 8px 0;font-size:13px;color:#4C1D95}
.waarschuw{background:#FFFBEB;border-left:3px solid var(--waarschuwing);padding:11px 14px;border-radius:0 8px 8px 0;font-size:13px;color:#92400E}
/* ---------- WERKSTATION ---------- */
.werk{display:grid;grid-template-columns:340px 1fr;gap:16px;align-items:start}
@media(max-width:1080px){.werk{grid-template-columns:1fr}}
.wachtrij{max-height:calc(100vh - 190px);overflow-y:auto}
.rij{padding:13px 15px;border-bottom:1px solid var(--rand);cursor:pointer;transition:.13s;border-left:3px solid transparent}
.rij:hover{background:#FAFBFD}
.rij.actief{background:#F5F0FF;border-left-color:var(--paars)}
.rij .bn{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:3px}
.rij .bn b{color:var(--donker);font-size:13.5px}
.rij small{color:var(--gedempt);font-size:12px;display:block}
.briefblok{margin-bottom:16px}
.brieflabel{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--gedempt);font-weight:700;margin-bottom:6px}
.bezwaar{border:1px solid var(--rand);border-radius:9px;padding:11px 13px;margin-bottom:8px;background:#FBFCFE}
.bezwaar b{color:var(--donker);font-size:13px;display:block;margin-bottom:3px}
.bezwaar span{color:var(--tekst);font-size:12.5px;font-style:italic}
.avgblok{background:#FFFBEB;border:1px solid #FDE68A;border-radius:10px;padding:14px}
.avgblok label{display:flex;gap:10px;align-items:flex-start;cursor:pointer;font-size:13px;color:#92400E}
.avgblok input{margin-top:2px;width:16px;height:16px;accent-color:var(--paars);cursor:pointer}
.gesprek{background:var(--donker);border-radius:13px;padding:18px;color:#fff}
.timer{font-size:34px;font-weight:750;font-variant-numeric:tabular-nums;letter-spacing:-1px}
.coachlijst{height:300px;overflow-y:auto;display:flex;flex-direction:column;gap:8px}
.tweeluik{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:900px){.tweeluik{grid-template-columns:1fr}}
.paneelkop{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}
.paneelkop b{font-size:12.5px}
.paneelkop span{font-size:11px;opacity:.65}
.transcript{height:300px;overflow-y:auto;background:rgba(255,255,255,.05);border-radius:9px;padding:12px;display:flex;flex-direction:column;gap:9px}
.tr{font-size:12.5px;line-height:1.5;animation:opkomst .3s ease}
.tr b{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px;opacity:.8}
.tr.beller{color:#DDD6FE}
.tr.beller b{color:var(--paars-licht)}
.tr.prospect{color:#E2E8F0}
.tr.prospect b{color:#94A3B8}
.praatmeter{display:flex;align-items:center;gap:10px;margin-bottom:14px;padding:9px 12px;background:rgba(255,255,255,.05);border-radius:9px}
.praatbaan{flex:1;height:6px;background:rgba(255,255,255,.13);border-radius:4px;overflow:hidden}
.praatbaan i{display:block;height:100%;background:var(--succes);border-radius:4px;transition:width .4s ease,background .4s ease}
.snelknop{margin-left:auto;background:rgba(139,92,246,.25);color:#DDD6FE;padding:4px 11px;border-radius:15px;font-size:11.5px;font-weight:600}
.snelknop:hover{background:rgba(139,92,246,.4)}
.mailkader{border:1px solid var(--rand);border-radius:10px;padding:16px;background:#FBFCFE}
.mailkop{font-size:12.5px;color:var(--gedempt);padding-bottom:9px;margin-bottom:11px;border-bottom:1px solid var(--rand)}
.mailkop b{color:var(--donker)}
.mailkader p{font-size:13.5px;margin-bottom:10px}
.mailknoppen{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.mailknop{padding:9px 15px;border-radius:8px;font-size:12.5px;font-weight:650;color:#fff}
.mailknop.groen{background:var(--succes)}
.mailknop.geel{background:var(--waarschuwing)}
.mailknop.grijs{background:var(--gedempt)}
.regelrij{display:flex;align-items:flex-start;gap:11px;padding:9px 0;border-bottom:1px solid var(--rand)}
.regelrij:last-of-type{border-bottom:none}
.regelrij .pil{flex-shrink:0;margin-top:1px}
.regelrij b{display:block;font-size:13px;color:var(--donker)}
.regelrij small{color:var(--gedempt);font-size:12.5px;line-height:1.5}
.agendarij{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--rand);flex-wrap:wrap}
.agendarij:last-of-type{border-bottom:none}
.agendarij .ar-wie{flex:1;min-width:190px}
.agendarij .ar-wie b{font-size:13px;color:var(--donker)}
.agendarij .pil{flex-shrink:0}
.icsblok{margin-top:11px;background:#0F172A;color:#E2E8F0;border-radius:9px;padding:13px 15px;
font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:11px;line-height:1.55;
white-space:pre-wrap;word-break:break-all;max-height:290px;overflow-y:auto}
.transcriptlicht{max-height:280px;overflow-y:auto;border:1px solid var(--rand);border-radius:9px;padding:13px;display:flex;flex-direction:column;gap:10px;background:#FBFCFE}
.trl{font-size:13px;line-height:1.5}
.trl b{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px}
.trl.beller b{color:var(--paars)}
.trl.prospect b{color:var(--gedempt)}
.trl.prospect{color:var(--donker)}
.hint{background:rgba(139,92,246,.16);border-left:3px solid var(--paars-licht);padding:10px 12px;border-radius:0 8px 8px 0;font-size:12.5px;color:#DDD6FE;animation:opkomst .35s ease}
.hint b{color:#fff;display:block;font-size:11px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px}
.hint.let{background:rgba(245,158,11,.16);border-left-color:var(--waarschuwing);color:#FDE68A}
@keyframes opkomst{from{transform:translateY(8px)}to{transform:none}}
.stip{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--fout);animation:pols 1.3s infinite}
@keyframes pols{0%,100%{opacity:1}50%{opacity:.35}}
.veld{margin-bottom:13px}
.veld label{display:block;font-size:12px;font-weight:650;color:var(--donker);margin-bottom:5px}
.veld select,.veld textarea,.veld input[type=text]{width:100%;padding:9px 11px;border:1px solid var(--rand);border-radius:8px;color:var(--tekst);background:var(--wit)}
.veld textarea{min-height:78px;resize:vertical}
.veld select:focus,.veld textarea:focus,.veld input:focus{outline:2px solid rgba(85,26,230,.28);border-color:var(--paars)}
.veldfout{color:var(--fout);font-size:12px;margin-top:4px;font-weight:600}
.qacrit{display:flex;align-items:center;gap:11px;padding:8px 0;border-bottom:1px solid var(--rand)}
.qacrit:last-child{border-bottom:none}
.qacrit .nm{width:130px;font-size:12.5px;color:var(--donker);font-weight:600;flex-shrink:0}
.qacrit .bl{flex:1}
.qacrit .cf{width:56px;text-align:right;font-size:12.5px;font-weight:700;color:var(--donker)}
.tijdlijn{position:relative;padding-left:20px}
.tijdlijn::before{content:'';position:absolute;left:5px;top:5px;bottom:5px;width:2px;background:var(--rand)}
.tl{position:relative;padding-bottom:15px}
.tl::before{content:'';position:absolute;left:-19px;top:5px;width:10px;height:10px;border-radius:50%;background:var(--gedempt);border:2px solid var(--wit)}
.tl.ai::before{background:var(--paars)}
.tl .kop{display:flex;align-items:center;gap:8px;margin-bottom:2px}
.tl .kop b{font-size:13px;color:var(--donker)}
.tl .kop small{color:var(--gedempt);font-size:11.5px;margin-left:auto}
.tl p{font-size:13px;color:var(--tekst)}
.agent{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--rand)}
.agent:last-child{border-bottom:none}
.agent .nr{width:26px;height:26px;border-radius:7px;background:#EDE9FE;color:var(--paars);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11.5px;flex-shrink:0}
.agent .inf{flex:1;min-width:0}
.agent .inf b{display:block;font-size:13px;color:var(--donker)}
.agent .inf small{color:var(--gedempt);font-size:11.5px}
.slack{background:var(--donker);border-radius:13px;padding:15px;color:#E2E8F0;max-height:420px;overflow-y:auto}
.sbericht{padding:9px 0;border-bottom:1px solid rgba(255,255,255,.07);font-size:12.5px}
.sbericht:last-child{border-bottom:none}
.skanaal{color:var(--paars-licht);font-weight:650;font-size:12px}
.sbericht p{color:#CBD5E1;margin-top:2px}
.filterrij{display:flex;gap:6px;flex-wrap:wrap}
.filterknop{padding:6px 12px;border:1px solid var(--rand);border-radius:20px;font-size:12.5px;
font-weight:600;color:var(--gedempt);background:var(--wit);transition:.14s;display:inline-flex;align-items:center;gap:6px}
.filterknop:hover{border-color:var(--paars);color:var(--paars)}
.filterknop.aan{background:var(--paars);border-color:var(--paars);color:#fff}
.filterknop span{background:rgba(100,116,139,.14);padding:1px 6px;border-radius:10px;font-size:11px}
.filterknop.aan span{background:rgba(255,255,255,.24)}
.zoek{width:100%;padding:11px 14px;border:1px solid var(--rand);border-radius:10px;background:var(--wit);margin-bottom:14px}
.zoek:focus{outline:2px solid rgba(85,26,230,.28);border-color:var(--paars)}
.oefenbalk{position:fixed;bottom:14px;right:14px;background:var(--donker);color:#94A3B8;padding:7px 13px;border-radius:20px;font-size:11.5px;z-index:100;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.oefenbalk b{color:var(--paars-licht)}
.modal{position:fixed;inset:0;background:rgba(15,23,42,.55);display:flex;align-items:center;justify-content:center;z-index:200;padding:24px}
.modalkaart{background:var(--wit);border-radius:15px;max-width:560px;width:100%;max-height:88vh;overflow-y:auto;box-shadow:0 24px 70px rgba(0,0,0,.3)}
/* ---------- LANDINGSPAGINA ---------- */
#landing{min-height:100vh}
.sitebalk{position:sticky;top:0;z-index:60;background:rgba(15,23,42,.92);backdrop-filter:blur(10px);
padding:0 30px;height:62px;display:flex;align-items:center;gap:26px}
.sitebalk .logo{font-weight:800;font-size:20px;color:#fff;letter-spacing:-.5px}
.sitebalk .logo span{color:var(--paars-licht)}
.sitebalk nav{display:flex;gap:22px;margin-left:16px}
.sitebalk nav a{color:#CBD5E1;text-decoration:none;font-size:13.5px;font-weight:500}
.sitebalk nav a:hover{color:#fff}
.sitebalk .cta{margin-left:auto;background:var(--merk);color:#fff;padding:9px 18px;border-radius:9px;font-weight:600;font-size:13.5px;text-decoration:none}
@media(max-width:820px){.sitebalk nav{display:none}}
.hero{background:var(--donkergrad);color:#fff;padding:88px 30px 96px;position:relative;overflow:hidden;text-align:center}
.hero::before{content:'';position:absolute;width:1000px;height:1000px;border-radius:50%;
background:radial-gradient(circle,rgba(139,92,246,.4) 0%,transparent 70%);top:-460px;left:50%;transform:translateX(-50%)}
.hero .inh{position:relative;z-index:1;max-width:860px;margin:0 auto}
.hero .label{display:inline-block;background:rgba(139,92,246,.22);color:#DDD6FE;padding:6px 15px;border-radius:20px;font-size:12.5px;font-weight:600;margin-bottom:22px}
.hero h1{font-size:52px;font-weight:800;letter-spacing:-1.8px;line-height:1.1;margin-bottom:20px}
.hero h1 em{font-style:normal;background:linear-gradient(135deg,#A78BFA 0%,#E9D5FF 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero p{font-size:18px;color:#CBD5E1;max-width:660px;margin:0 auto 32px;line-height:1.6}
.heroknoppen{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.hknop{background:var(--merk);color:#fff;padding:13px 26px;border-radius:10px;font-weight:650;font-size:15px;text-decoration:none;display:inline-block}
.hknop.rand{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.22)}
@media(max-width:700px){.hero h1{font-size:34px;letter-spacing:-1px}.hero p{font-size:16px}}
.sectie{padding:76px 30px;max-width:1180px;margin:0 auto}
.sectie.donker{background:var(--donker);color:#fff;max-width:none}
.sectie.donker .binnen{max-width:1180px;margin:0 auto}
.sectiekop{text-align:center;margin-bottom:46px}
.sectiekop .label{color:var(--paars);font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px}
.sectiekop h2{font-size:34px;font-weight:750;color:var(--donker);letter-spacing:-1px;margin:9px 0 12px}
.sectiekop p{color:var(--gedempt);font-size:16px;max-width:640px;margin:0 auto}
.sectie.donker .sectiekop h2{color:#fff}
.sectie.donker .sectiekop p{color:#94A3B8}
.sectie.donker .sectiekop .label{color:var(--paars-licht)}
.principe{background:var(--merk);color:#fff;border-radius:18px;padding:44px;text-align:center}
.principe h3{font-size:29px;font-weight:750;letter-spacing:-.7px;margin-bottom:12px}
.principe p{font-size:16px;opacity:.92;max-width:660px;margin:0 auto}
@media(max-width:700px){.principe{padding:28px}.principe h3{font-size:21px}}
.blok{background:var(--wit);border:1px solid var(--rand);border-radius:14px;padding:26px;box-shadow:var(--schaduw)}
.blok .ico{width:44px;height:44px;border-radius:11px;background:#EDE9FE;color:var(--paars);display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:800;margin-bottom:15px}
.blok h3{font-size:16.5px;color:var(--donker);font-weight:680;margin-bottom:7px}
.blok p{font-size:13.8px;color:var(--tekst);line-height:1.62}
.sectie.donker .blok{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1)}
.sectie.donker .blok h3{color:#fff}
.sectie.donker .blok p{color:#94A3B8}
.sectie.donker .blok .ico{background:rgba(139,92,246,.2);color:#C4B5FD}
.reis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:980px){.reis{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.reis{grid-template-columns:1fr}}
.stap{background:var(--wit);border:1px solid var(--rand);border-radius:13px;padding:20px;position:relative}
.stap .nr{width:27px;height:27px;border-radius:8px;background:var(--merk);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12.5px;margin-bottom:12px}
.stap h4{font-size:14.5px;color:var(--donker);font-weight:670;margin-bottom:5px}
.stap p{font-size:13px;color:var(--gedempt);line-height:1.55}
.stap .door{position:absolute;top:26px;right:-11px;color:var(--rand);font-size:17px;z-index:1}
@media(max-width:980px){.stap .door{display:none}}
.stap.mens{border-color:var(--succes);background:#F0FDF9}
.stap.mens .nr{background:var(--succes)}
.agentrooster{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:11px}
.agentkaart{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:11px;padding:14px}
.agentkaart .kp{display:flex;align-items:center;gap:9px;margin-bottom:6px}
.agentkaart .bd{width:24px;height:24px;border-radius:7px;background:rgba(139,92,246,.22);color:#C4B5FD;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0}
.agentkaart b{font-size:13px;color:#fff}
.agentkaart small{color:#94A3B8;font-size:12px;line-height:1.5;display:block}
.inlogsectie{background:var(--bg);padding:76px 30px;border-top:1px solid var(--rand)}
.inlogbinnen{max-width:520px;margin:0 auto}
.voet{background:var(--donker);color:#64748B;padding:34px 30px;text-align:center;font-size:12.5px}
.voet b{color:#94A3B8}
/* ---------- GAMIFICATION ---------- */
.titel{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:11px;
font-weight:650;white-space:nowrap;border:1px solid transparent;cursor:default}
.titel i{font-style:normal;font-size:12px}
.titel.groot{font-size:12.5px;padding:5px 12px}
.titel.goud{background:#FEF3C7;color:#92400E;border-color:#FCD34D}
.titel.paars{background:#EDE9FE;color:#5B21B6;border-color:#C4B5FD}
.titel.groen{background:#D1FAE5;color:#065F46;border-color:#6EE7B7}
.titel.blauw{background:#DBEAFE;color:#1E40AF;border-color:#93C5FD}
.titel.brons{background:#FFEDD5;color:#9A3412;border-color:#FDBA74}
.titelrij{display:flex;flex-wrap:wrap;gap:4px;max-width:250px}
.podium{display:flex;align-items:flex-end;justify-content:center;gap:20px;padding:14px 0 4px}
.pod{display:flex;flex-direction:column;align-items:center;gap:6px;width:172px}
.podav{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;
font-weight:800;font-size:20px;color:#3B2400}
.podav.goud{background:linear-gradient(135deg,#FCD34D,#F59E0B);box-shadow:0 0 26px rgba(245,158,11,.5)}
.podav.zilver{background:linear-gradient(135deg,#E2E8F0,#94A3B8)}
.podav.brons{background:linear-gradient(135deg,#FDBA74,#C2410C);color:#fff}
.pod b{color:#fff;font-size:14.5px}
.pod small{color:#94A3B8;font-size:11.5px}
.podtitels{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;min-height:20px}
.podblok{width:100%;border-radius:9px 9px 0 0;display:flex;flex-direction:column;align-items:center;
justify-content:center;gap:2px;margin-top:4px}
.podblok span{font-size:19px;font-weight:800;color:#fff}
.podblok em{font-style:normal;font-size:11px;color:rgba(255,255,255,.7);font-weight:700}
.podblok.goud{background:linear-gradient(180deg,rgba(245,158,11,.55),rgba(245,158,11,.16))}
.podblok.zilver{background:linear-gradient(180deg,rgba(148,163,184,.5),rgba(148,163,184,.14))}
.podblok.brons{background:linear-gradient(180deg,rgba(194,65,12,.5),rgba(194,65,12,.14))}
@media(max-width:700px){.podium{gap:9px}.pod{width:100px}}
.puntrij{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--rand);font-size:13px}
.puntrij:last-of-type{border-bottom:none}
.puntrij span{flex:1;color:var(--tekst)}
.puntrij b{font-weight:700;font-size:13.5px}
.puntrij b.plus{color:var(--succes)}
.puntrij b.min{color:var(--fout)}
.nivrij{display:flex;align-items:baseline;gap:10px;padding:8px 0;border-bottom:1px solid var(--rand)}
.nivrij:last-of-type{border-bottom:none}
.nivrij b{color:var(--donker);font-size:13.5px;width:96px;flex-shrink:0}
.nivrij small{flex:1;color:var(--gedempt);font-size:12.5px}
.nivrij span{color:var(--paars);font-weight:700;font-size:12.5px}
.titelraster{display:grid;grid-template-columns:repeat(auto-fill,minmax(252px,1fr));gap:12px}
.titelkaart{border:1px solid var(--rand);border-radius:11px;padding:14px;background:#FBFCFE}
.titelkaart.vergrendeld{opacity:.55;background:#F8FAFC}
.titelkaart .tk{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.titelkaart .tk i{font-style:normal;font-size:19px}
.titelkaart .tk b{font-size:14px;color:var(--donker)}
.titelkaart .crit{display:block;font-size:12px;color:var(--tekst);margin-bottom:6px;line-height:1.5}
.titelkaart .waarom{display:block;font-size:11.5px;color:var(--gedempt);font-style:italic;line-height:1.5;margin-bottom:9px}
.titelkaart .houder{display:flex;flex-wrap:wrap;gap:4px}
.mijntitels{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.volgendetitel{border:1px dashed var(--rand);border-radius:11px;padding:13px;background:#FBFCFE}
/* ---------- INLOGPAGINA ---------- */
/*
* In het oorspronkelijke ontwerp van Rocher was dit één HTML-bestand waarin JavaScript het inlogscherm
* aan- en uitzette met de klasse "actief" — vandaar de display:none hieronder. De
* serverversie rendert de inlogpagina, de uitnodigingspagina en de "link is niet geldig"-
* pagina als losse documenten en zet die klasse nergens; er is ook geen JavaScript meer dat
* dat doet. Het gevolg was dat die drie pagina's in de browser volledig leeg bleven.
*
* Het scherm staat nu gewoon aan. De klasse .actief blijft toegestaan zodat oudere opmaak
* die hem nog meestuurt niets kapotmaakt, maar hij is niet meer nodig.
*/
#login,#login.actief{display:grid;min-height:100vh;grid-template-columns:1fr 1fr}
@media(max-width:900px){
#login,#login.actief{grid-template-columns:1fr}
.loginrechts{display:none}
}
.loginlinks{display:flex;align-items:center;justify-content:center;padding:34px 26px;background:var(--wit)}
.loginkaart{width:100%;max-width:400px}
.terug{color:var(--gedempt);font-size:12.5px;margin-bottom:22px;display:inline-block}
.terug:hover{color:var(--paars)}
.loginkaart h2{font-size:24px;color:var(--donker);font-weight:730;letter-spacing:-.6px;margin-bottom:6px}
.loginsub{color:var(--gedempt);font-size:13.5px;margin-bottom:24px}
.wwveld{position:relative}
.wwveld input{width:100%;padding:10px 62px 10px 12px;border:1px solid var(--rand);border-radius:9px;color:var(--tekst)}
.wwveld input:focus{outline:2px solid rgba(85,26,230,.28);border-color:var(--paars)}
.wwoog{position:absolute;right:9px;top:50%;transform:translateY(-50%);color:var(--paars);font-size:12px;font-weight:650}
#login .veld input[type=email]{width:100%;padding:10px 12px;border:1px solid var(--rand);border-radius:9px;color:var(--tekst)}
#login .veld input[type=email]:focus{outline:2px solid rgba(85,26,230,.28);border-color:var(--paars)}
.loginrij{display:flex;align-items:center;justify-content:space-between;margin:4px 0 16px;gap:10px}
.onthoud{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--tekst);cursor:pointer}
.onthoud input{width:15px;height:15px;accent-color:var(--paars);cursor:pointer}
.link{color:var(--paars);font-size:12.5px;font-weight:600}
.link:hover{text-decoration:underline}
.loginfout{background:#FEE2E2;color:#991B1B;border-left:3px solid var(--fout);padding:10px 13px;
border-radius:0 8px 8px 0;font-size:12.8px;margin-bottom:14px;font-weight:600}
.scheiding{display:flex;align-items:center;gap:12px;margin:26px 0 14px;color:var(--gedempt);font-size:11.5px;
text-transform:uppercase;letter-spacing:.8px;font-weight:650}
.scheiding::before,.scheiding::after{content:'';flex:1;height:1px;background:var(--rand)}
.groeplabel{font-size:10.5px;text-transform:uppercase;letter-spacing:.8px;color:var(--gedempt);
font-weight:700;margin:9px 0 2px;display:flex;align-items:center;gap:6px}
.groeplabel:first-child{margin-top:0}
.groeplabel span{background:#F1F5F9;color:var(--gedempt);padding:1px 6px;border-radius:10px;font-size:10px}
.loginrechts{background:var(--donkergrad);display:flex;align-items:center;justify-content:center;
padding:44px;position:relative;overflow:hidden}
.loginrechts::before{content:'';position:absolute;width:760px;height:760px;border-radius:50%;
background:radial-gradient(circle,rgba(139,92,246,.4) 0%,transparent 70%);top:-330px;right:-230px}
.lr-binnen{position:relative;z-index:1;max-width:390px;color:#fff}
.lr-quote{font-size:25px;font-weight:700;letter-spacing:-.7px;line-height:1.35;margin-bottom:34px}
.lr-punten{display:flex;flex-direction:column;gap:19px}
.lr-punten div{display:flex;align-items:baseline;gap:12px}
.lr-punten b{font-size:29px;font-weight:800;color:#C4B5FD;letter-spacing:-1px;width:52px}
.lr-punten span{font-size:13.5px;color:#CBD5E1}
/* ---------- OCHTENDBRIEFING ---------- */
.ochtendhero{background:var(--donkergrad);border-radius:15px;padding:34px;color:#fff;margin-bottom:16px;position:relative;overflow:hidden}
.ochtendhero::before{content:'';position:absolute;width:560px;height:560px;border-radius:50%;
background:radial-gradient(circle,rgba(139,92,246,.4) 0%,transparent 70%);top:-320px;right:-160px}
.oh-binnen{position:relative;z-index:1}
.oh-tijd{font-size:11.5px;text-transform:uppercase;letter-spacing:1px;color:#C4B5FD;font-weight:700;margin-bottom:11px}
.ochtendhero h1{font-size:33px;font-weight:780;letter-spacing:-1px;margin-bottom:7px}
.ochtendhero p{font-size:16px;color:#CBD5E1;margin-bottom:22px}
.oh-cijfers{display:flex;gap:34px;flex-wrap:wrap}
.oh-cijfers div{display:flex;flex-direction:column}
.oh-cijfers b{font-size:27px;font-weight:780;letter-spacing:-.8px}
.oh-cijfers span{font-size:11.5px;color:#94A3B8}
@media(max-width:700px){.ochtendhero{padding:22px}.ochtendhero h1{font-size:24px}.oh-cijfers{gap:20px}}
/* ---------- MELDINGEN ---------- */
#toasts{position:fixed;bottom:52px;right:14px;z-index:150;display:flex;flex-direction:column;gap:9px;max-width:376px}
.toast{background:var(--donker);color:#E2E8F0;padding:13px 16px;border-radius:11px;font-size:12.8px;line-height:1.5;
box-shadow:0 12px 34px rgba(0,0,0,.3);border-left:3px solid var(--waarschuwing);
opacity:1;animation:toastin .32s ease both}
.toast b{display:block;color:#fff;font-size:11px;text-transform:uppercase;letter-spacing:.6px;margin-bottom:4px}
.toast.klaar{border-left-color:var(--succes)}
.toast.klaar b{color:#6EE7B7}
@keyframes toastin{from{transform:translateX(26px)}to{transform:none}}
.pil .stip{width:6px;height:6px;background:currentColor;margin-right:2px}
/* ==================== Callr-portaal: aanvullingen op de basis ==================== */
.syskaarten{display:grid;grid-template-columns:repeat(auto-fill,minmax(276px,1fr));gap:15px;margin-bottom:26px}
.syskaart{display:flex;flex-direction:column;gap:4px;background:var(--wit);border:1px solid var(--rand);
border-radius:13px;padding:19px;text-decoration:none;color:inherit;box-shadow:var(--schaduw);transition:.16s}
.syskaart:hover{transform:translateY(-2px);border-color:var(--paars);
box-shadow:0 4px 12px rgba(15,23,42,.07),0 14px 30px rgba(85,26,230,.1)}
.syskaart:focus-visible{outline:2px solid var(--paars);outline-offset:2px}
.syskaart.primair{box-shadow:inset 3px 0 0 var(--paars),var(--schaduw)}
.sysico{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;
margin-bottom:9px;background:rgba(85,26,230,.1);color:var(--paars)}
.sysico svg{width:20px;height:20px}
.syskaart.blauw .sysico{background:rgba(59,130,246,.12);color:#2563EB}
.syskaart.groen .sysico{background:rgba(16,185,129,.12);color:#059669}
.syskaart.oranje .sysico{background:rgba(245,158,11,.13);color:#B45309}
.syskaart.grijs .sysico{background:#F1F5F9;color:#475569}
.sysmerk{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--gedempt)}
.sysnaam{font-size:15.5px;font-weight:650;color:var(--donker)}
.sysoms{font-size:13px;color:var(--gedempt);line-height:1.55;margin-top:2px}
.sysopen{font-size:12.5px;font-weight:600;color:var(--paars);margin-top:12px}
.stip{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;vertical-align:middle}
.stip.aan{background:var(--succes)}
.stip.wacht{background:var(--waarschuwing)}
.stip.uit{background:#CBD5E1}
.reden{color:var(--gedempt);font-size:12px}
.tabelhouder{overflow-x:auto}
table.lijst{width:100%;border-collapse:collapse;font-size:13.5px}
table.lijst th,table.lijst td{text-align:left;padding:10px 13px;border-bottom:1px solid var(--rand);vertical-align:top}
table.lijst th{font-size:11.5px;text-transform:uppercase;letter-spacing:.7px;color:var(--gedempt);font-weight:600;white-space:nowrap}
table.lijst tbody tr:last-child td{border-bottom:none}
table.lijst tbody tr:hover{background:#F8FAFC}
table.lijst td.num,table.lijst th.num{text-align:right;font-variant-numeric:tabular-nums}
.topbar .rechts{margin-left:auto;display:flex;align-items:center;gap:14px}
.topbar .gebruiker{display:flex;align-items:center;gap:9px;color:#E2E8F0;font-size:13.5px}
.topbar .av{width:32px;height:32px;border-radius:9px;background:var(--merk);color:#fff;
display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12.5px}
.nav a{padding:13px 15px;color:var(--gedempt);font-size:13.5px;font-weight:500;text-decoration:none;
border-bottom:2.5px solid transparent;white-space:nowrap;display:inline-block}
.nav a:hover{color:var(--paars)}
.nav a.actief{color:var(--paars);border-bottom-color:var(--paars);font-weight:600}
@media(max-width:820px){
.syskaarten{grid-template-columns:1fr}
.verbergklein{display:none}
}
img.logo{height:26px;width:auto;display:block}
.topbar img.logo{height:23px}
img.merklogo{height:34px;width:auto;display:block;margin-bottom:6px}
/* ---------- CLAIMEN VAN WACHTRIJ-ITEMS ---------- */
.veld input[type=email],.veld input[type=password]{width:100%;padding:9px 11px;border:1px solid var(--rand);border-radius:8px;color:var(--tekst);background:var(--wit)}
.veld input[type=email]:focus,.veld input[type=password]:focus{outline:2px solid rgba(85,26,230,.28);border-color:var(--paars)}
.rij.vergrendeld{opacity:.55;cursor:not-allowed;background:#F8FAFC}
.rij.vergrendeld .titel{color:var(--gedempt)}
.claimbalk{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px;padding:10px 13px;border-radius:9px;font-size:13px;font-weight:600}
.claimbalk.vanmij{background:#EDE9FE;color:#5B21B6}
.claimbalk.vrij{background:#F8FAFC;border:1px dashed var(--rand)}
.claimbalk.vergrendeld{background:#FEE2E2;color:#991B1B}
#claim-melding:empty,#gebruikers-melding:empty{display:none}
/* ---------- GESPREKSSCHERM (paneel op de wachtrijpagina) ---------- */
.rijblok{display:flex;flex-direction:column;border-bottom:1px solid var(--rand)}
.rijblok .rij{border-bottom:none}
.rijstart{align-self:flex-start;margin:0 0 11px 15px}
.claimknoppen{display:flex;gap:8px;flex-wrap:wrap}
.modalkaart.breed{max-width:760px}
.gesprekkop{position:sticky;top:0;background:var(--wit);z-index:1;border-radius:15px 15px 0 0}
.gesprekkoprechts{display:flex;align-items:center;gap:12px}
.timer.klein{font-size:22px;color:var(--donker)}
.gesprekhoofd{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;
margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--rand)}
.gesprekgroot{font-size:19px;font-weight:700;color:var(--donker);letter-spacing:-.3px}
.gesprektel{display:inline-block;font-size:22px;font-weight:750;color:var(--paars);
letter-spacing:-.5px;text-decoration:none;font-variant-numeric:tabular-nums}
.gesprektel:hover{text-decoration:underline}
.gesprektel[aria-disabled=true]{color:var(--gedempt);font-size:15px;font-weight:600;pointer-events:none}
.gesprekraster{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
/* ---------- klik-en-bel ---------- */
/* Onder het nummer: óf de belknop met zijn statusregel, óf de reden dat die er niet is. */
.belblok{margin-top:9px}
.belknop{margin-bottom:6px}
.belstand:empty,.belreden:empty{display:none}
.belstand{margin:0;max-width:34ch}
.belstand.belbezig{color:var(--paars);font-weight:600}
.belstand.belfout{color:var(--fout);font-weight:600}
.belreden{margin:0;max-width:34ch}
details.bezwaar > summary{cursor:pointer;color:var(--donker);font-size:13px;font-weight:650;
list-style:none;display:flex;align-items:flex-start;gap:8px}
details.bezwaar > summary::-webkit-details-marker{display:none}
details.bezwaar > summary::before{content:'+';color:var(--paars);font-weight:800;line-height:1.35}
details.bezwaar[open] > summary::before{content:'–'}
details.bezwaar[open] > summary{margin-bottom:6px}
details.bezwaar > span{display:block;padding-left:16px}
#gesprek-briefing-blok{background:#FBFCFE}
#gesprek-briefing p,#gesprek-hoek p{margin-bottom:9px}
#gesprek-briefing p:last-child,#gesprek-hoek p:last-child{margin-bottom:0}
.vinkveld label{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:500;cursor:pointer}
.vinkveld input{width:16px;height:16px;accent-color:var(--paars);cursor:pointer}
#gesprek-afrondblok{margin-top:16px;padding-top:16px;border-top:1px solid var(--rand)}
#gesprek-notitie-fout:empty,#gesprek-afspraak-fout:empty,
#gesprek-terugbel-fout:empty,#gesprek-fout:empty{display:none}
@media(max-width:700px){
.modal{padding:0}
.modalkaart.breed{max-height:100vh;border-radius:0}
.gesprekkop{border-radius:0}
.gesprektel{font-size:19px}
}
/* ==================================================================================
OPMAAK ZONDER INLINE STIJLEN
----------------------------------------------------------------------------------
De CSP zet style-src 'self'. Op CSP-niveau 3 valt style-src-attr daarop terug, dus
een style="..."-attribuut wordt door de browser genegeerd. Alles wat vroeger in zo'n
attribuut stond staat daarom hieronder, met een klassenaam die zegt wat het is.
Zet hier nooit iets terug in een style-attribuut: dan is het meteen weer stuk.
================================================================================== */
/* ---------- knoppen ---------- */
/* Een knop over de volle breedte: de enige knop op een inlog- of uitnodigingskaart. */
.knop.breed{display:block;width:100%;padding:12px}
/* .knop wordt ook op een gezet; die hoort er niet onderstreept uit te zien. */
.knop{text-decoration:none}
/* Knop met wat ernaast staat op één regel: een formulierknop plus melding of invoerveld. */
.knoprij{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
/* ---------- kaarten ---------- */
/* Kaarten die onder elkaar staan houden onderling afstand. */
.kaart.gestapeld{margin-bottom:16px}
/* Detailkaart met wat meer lucht rondom de inhoud. */
.kaartlijf.ruim{padding:19px}
/*
* Kaartlijf waarin de blokken onder elkaar staan (melding, tabel, formulier): elk volgend
* blok krijgt afstand van het vorige. Bewust niet op elke .kaartlijf — het gespreksscherm
* regelt zijn eigen ritme met .briefblok en zou hier dubbele marges van krijgen.
*/
.kaartlijf.stapel > * + *{margin-top:14px}
/* Toelichting rechts in een kaartkop: kleiner en gedempt, nooit een kop op zich. */
.kaartkop .kopnoot{font-size:12.5px;color:var(--gedempt)}
/* ---------- KPI-dashboard ---------- */
/*
* .raster zelf zet alleen display:grid; de kolommen komen van .r2/.r3/.r4. Het
* KPI-dashboard gebruikt .r4 en staat dus in vier kolommen, met de bestaande
* mediaregels die dat op smallere schermen naar twee en één kolom brengen.
*/
.kpiraster{margin-bottom:20px}
/* ---------- detailvelden naast elkaar ---------- */
/*
* Het blok met losse labels en waarden onder de kop van een wachtrij-item of een afspraak:
* contactpersoon, telefoon, opdrachtgever, warmte, belpogingen — naast elkaar in vier
* kolommen, met dezelfde afslagpunten die .r3/.r4 en .reis hierboven ook gebruiken.
*
* Bewust een vast aantal kolommen en geen repeat(auto-fit,minmax(...)): vier rustige
* kolommen lezen beter dan zes of zeven smalle, en het is op elke breedte voorspelbaar
* wat je krijgt.
*/
.detailraster{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
@media(max-width:1150px){.detailraster{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.detailraster{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.detailraster{grid-template-columns:1fr}}
/* ---------- belwachtrij ---------- */
/*
* Een wachtrij-item is een naar dezelfde pagina met ?item=... Zonder deze regel geeft
* de browser hem de standaard linkopmaak: blauw en onderstreept, dwars door de hele lijst
* heen. De rij is een aanklikbaar blok, geen zin met een link erin.
*/
.rij{text-decoration:none;color:inherit;display:block}
.rij .titel{color:var(--donker);font-size:13.5px;font-weight:620;margin-bottom:3px}
/* Blijft gewone tekstflow: de prioriteitspil staat inline vóór "warmte 82 · Nieuw" en hoort
op dezelfde regel door te lopen, niet als los flexvak op een eigen regel te belanden. */
.rij .sub{color:var(--gedempt);font-size:12px}
/*
* Het werkscherm van de beller: een smalle kolom met de wachtrij naast een brede kolom
* met de briefing. Zonder deze modifier zou .tweeluik twee gelijke kolommen geven.
*/
.tweeluik.belscherm{grid-template-columns:320px 1fr;gap:16px;align-items:start}
@media(max-width:900px){.tweeluik.belscherm{grid-template-columns:1fr}}
/* De lijst zelf: de items onder elkaar met een vaste tussenruimte. */
.wachtrij{display:flex;flex-direction:column;gap:8px}
#gesprek-bevestiging{margin-bottom:14px}
/* ---------- gespreksscherm ---------- */
.avgblok{margin-bottom:13px}
/* ---------- formulieren op de gebruikerspagina ---------- */
/*
* Formulier waarvan de velden naast elkaar staan: naam, e-mail, rol en opdrachtgever op
* één regel, de verstuurknop eronder. align-items:end houdt die knop gelijk met de
* onderkant van de invoervelden in plaats van met hun labels.
*/
.formulierraster{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;align-items:end}
@media(max-width:1150px){.formulierraster{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.formulierraster{grid-template-columns:1fr}}
/* Klein invoerveld dat naast een knop staat in plaats van onder een label. */
.veldklein{padding:6px 9px;border:1px solid var(--rand);border-radius:7px;font-size:12.5px;
min-width:190px;background:var(--wit);color:var(--tekst)}
.veldklein:focus{outline:2px solid rgba(85,26,230,.28);border-color:var(--paars)}
/* Het leesveld met de uitnodigingslink: rekt mee, maar nooit smaller dan leesbaar. */
.linkveld{flex:1 1 320px;padding:8px 10px;border:1px solid var(--rand);border-radius:8px;
font-size:12.5px;background:var(--wit);color:var(--tekst)}
#uitnodiging-melding{margin-bottom:8px}
/* ---------- inlog-, uitnodigings- en foutpagina ---------- */
.loginkaart .notitie,.loginkaart .waarschuw{margin-bottom:16px}
.sessievoet b{color:var(--paars)}
/* ---------- pillen zonder kleurklasse ---------- */
/*
* .pil had wel padding, ronding en vetgedrukte tekst, maar geen achtergrond. Een pil zonder
* kleurklasse — de statuspil op de leads- en pipelinepagina, de uitkomstpil bij gesprekken —
* kwam daardoor als kale tekst in beeld in plaats van als label. De gekleurde varianten
* (.groen/.rood/.geel/...) staan hierboven en zijn specifieker, dus die blijven ongemoeid.
*/
.pil{background:#F1F5F9;color:#475569}
/* De prioriteit uit Call Queue komt als klasse mee: . Die drie
varianten bestonden nog niet, waardoor "Hoog" en "Laag" er hetzelfde uitzagen. */
.pil.hoog{background:#FEE2E2;color:#991B1B}
.pil.middel{background:#FEF3C7;color:#92400E}
.pil.laag{background:#F1F5F9;color:#475569}
/* ==================================================================================
BELMODUS — de wachtrij afwerken met de spatiebalk
----------------------------------------------------------------------------------
Eén ding groot in beeld, één regel die zegt wat de spatiebalk nú doet, en onderaan
een toetsenoverzicht zodat niemand iets hoeft te onthouden. Alle standen staan in de
HTML en worden met .verborgen aan- en uitgezet; deze opmaak hoeft dus niets te weten
van de standen behalve wat er zichtbaar is.
================================================================================== */
/* De deur naar belmodus, boven de gewone wachtrij. Wie liever klikt klikt gewoon door. */
.belmodusbalk{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px;
padding:14px 16px;background:var(--wit);border:1px solid var(--rand);border-radius:13px;
box-shadow:var(--schaduw)}
.belmodusbalk .reden{flex:1 1 340px;font-size:12.5px;line-height:1.55}
.belmodus{max-width:840px;margin:0 auto}
.belkop{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.belteller{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;
color:var(--paars);background:#EDE9FE;padding:5px 12px;border-radius:20px}
.beltimer{font-size:24px;font-weight:750;font-variant-numeric:tabular-nums;
letter-spacing:-.6px;color:var(--donker);margin-left:auto}
.beltimer[hidden]{display:none}
#bel-stoppen{flex:none}
.beluitleg{font-size:13px;color:var(--gedempt);margin-bottom:12px;line-height:1.55}
.beluitleg[hidden]{display:none}
/* Het podium: de kaart waarin telkens precies één stand zichtbaar is. */
.belpodium{background:var(--wit);border:1px solid var(--rand);border-radius:15px;
box-shadow:var(--schaduw);padding:30px 32px}
/* .belstap en niet .belstand: die klasse is al de statusregel van klik-en-bel in het
gespreksscherm, met max-width:34ch. Een blok van belmodus met diezelfde naam zou tot
34 tekens breed worden en de halve kaart leeg laten. */
.belstap > * + *{margin-top:14px}
.bellabel{font-size:11.5px;text-transform:uppercase;letter-spacing:1px;color:var(--gedempt);
font-weight:700}
.belbedrijf{font-size:40px;line-height:1.12;font-weight:800;letter-spacing:-1.4px;
color:var(--donker);margin-top:4px!important;word-break:break-word}
.belbedrijf.klein{font-size:25px;letter-spacing:-.8px}
.belwie{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.belcontact{font-size:20px;font-weight:680;color:var(--donker)}
.belfunctie{font-size:14px;color:var(--gedempt)}
.belfunctie:empty{display:none}
.belnummer{display:inline-block;font-size:34px;font-weight:800;letter-spacing:-1px;
color:var(--paars);text-decoration:none;font-variant-numeric:tabular-nums}
.belnummer:hover{text-decoration:underline}
.belnummer[aria-disabled=true]{color:var(--gedempt);font-size:19px;font-weight:650;
pointer-events:none}
.belhoek{background:#FAF7FF;border-left:3px solid var(--paars);border-radius:0 9px 9px 0;
padding:13px 16px}
.belhoek .brieflabel{margin-bottom:4px}
.belhoek p{font-size:14.5px;color:#4C1D95;line-height:1.55}
.belhoek p + p{margin-top:7px}
.belmelding{font-size:13px;color:var(--gedempt);line-height:1.5;max-width:60ch}
.belmelding:empty{display:none}
.belmelding.belbezig{color:var(--paars);font-weight:600}
.belmelding.belfout{color:var(--fout);font-weight:600}
.belgrootknop{padding:12px 24px;font-size:15px}
.belleeguitleg{font-size:15px;color:var(--tekst);line-height:1.6;max-width:56ch}
/* De uitkomsten, met hun cijfer ervoor. Het cijfer is wat de beller indrukt. */
.beluitkomsten{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:8px}
.beluitkomstknop{display:flex;align-items:center;gap:10px;text-align:left;padding:10px 13px;
border:1.5px solid var(--rand);border-radius:10px;background:var(--wit);font-size:13.5px;
font-weight:600;color:var(--tekst);transition:.14s}
.beluitkomstknop:hover{border-color:var(--paars);background:#FAF7FF}
.beluitkomstknop.gekozen{border-color:var(--paars);background:#EDE9FE;color:#4C1D95}
.belcijfer{flex:none;width:24px;height:24px;border-radius:7px;background:#F1F5F9;
color:var(--gedempt);display:flex;align-items:center;justify-content:center;
font-weight:800;font-size:12.5px}
.beluitkomstknop.gekozen .belcijfer{background:var(--paars);color:#fff}
/*
* De voet plakt onderaan het scherm. Dat is geen opsmuk: in de gespreksstand staan de
* bezwaren, de briefing, het notitieveld en zeven uitkomsten onder elkaar, en dan zou de
* regel die zegt wat de spatiebalk doet onder de vouw verdwijnen. Juist die regel moet
* altijd in beeld staan.
*/
.belvoet{position:sticky;bottom:0;z-index:40;background:var(--bg);padding-bottom:10px}
/* De ene regel die zegt wat de spatiebalk nú doet. Dit is het drukste punt van het
scherm en hoort dus het grootste stuk tekst onder het podium te zijn. */
.belhint{margin-top:14px;background:var(--donker);color:#fff;border-radius:12px;
padding:15px 20px;font-size:19px;font-weight:700;letter-spacing:-.3px;text-align:center}
/* Het toetsenoverzicht: klein, onderaan, altijd in beeld. */
.beltoetsen{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:center;margin-top:10px;
font-size:12px;color:var(--gedempt)}
.beltoetsen b{display:inline-block;min-width:20px;text-align:center;padding:1px 6px;
margin-right:3px;border:1px solid var(--rand);border-bottom-width:2px;border-radius:5px;
background:var(--wit);color:var(--donker);font-size:11.5px;font-weight:700;
font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace}
#bel-notitie-fout:empty,#bel-fout:empty{display:none}
@media(max-width:700px){
.belpodium{padding:20px}
.belbedrijf{font-size:29px;letter-spacing:-1px}
.belnummer{font-size:26px}
.belhint{font-size:16px;padding:13px 15px}
}
/* ---------- storingsbalk ---------- */
/* Staat boven de paginakop zodra het portaal Airtable niet kan lezen. */
.storingsbalk{margin-bottom:16px}
.storingsbalk b{color:#78350F}
/* ---------- publieke voorpagina ---------- */
/* De klantreis staat in twee rijen van vier stappen; die twee rijen houden afstand. */
.reis + .reis{margin-top:14px}
/* Afsluitende knop onder een sectie, midden onder de tekst. */
.sectiecta{text-align:center}
/* In de inlogsectie vult de kaart de kolom; .inlogbinnen bepaalt daar de breedte. */
.inlogsectie .inlogkaart{max-width:none}
/* Regel onder de inlogknop: klein, gedempt en gecentreerd. */
.inlognoot{text-align:center;font-size:12.5px;color:var(--gedempt);margin-top:12px}
/* ---------- verbruiksbalk (Airtable-verzoeken deze maand) ---------- */
/* De vulling van .balk gaat via een klasse en niet via een style-attribuut: de CSP zet
style-src 'self', en daarmee negeert de browser elk inline style="...". Stappen van vijf
procent is nauwkeurig genoeg voor een balk die alleen "hoe vol zit het" hoeft te zeggen. */
.balk i.vul0{width:0%}
.balk i.vul5{width:5%}
.balk i.vul10{width:10%}
.balk i.vul15{width:15%}
.balk i.vul20{width:20%}
.balk i.vul25{width:25%}
.balk i.vul30{width:30%}
.balk i.vul35{width:35%}
.balk i.vul40{width:40%}
.balk i.vul45{width:45%}
.balk i.vul50{width:50%}
.balk i.vul55{width:55%}
.balk i.vul60{width:60%}
.balk i.vul65{width:65%}
.balk i.vul70{width:70%}
.balk i.vul75{width:75%}
.balk i.vul80{width:80%}
.balk i.vul85{width:85%}
.balk i.vul90{width:90%}
.balk i.vul95{width:95%}
.balk i.vul100{width:100%}
/* ==================================================================================
MIJN DAG, MIJN CIJFERS EN VOORBEELDEN
----------------------------------------------------------------------------------
De drie schermen van de beller die niet over één gesprek gaan maar over zijn dag.
Ze gebruiken zo veel mogelijk wat er al stond — .kaart, .kpi, .pil, .knop, .raster,
.filterknop — en voegen alleen toe wat er echt niet was: de rij van een
terugbelafspraak, de coachingregels en de voorbeeldkaart.
================================================================================== */
/* De rij bellers waaruit een admin kiest. Een beller ziet deze balk nooit. */
.keuzerij{margin-bottom:16px}
/*
* Eén terugbelafspraak: wanneer, wie, wat er vorige keer gezegd is, en de knop.
* Vier kolommen omdat dat de leesvolgorde is — je scant op tijd, niet op bedrijf.
*/
.terugbelrij{display:grid;grid-template-columns:92px minmax(160px,1.1fr) minmax(0,2fr) auto;
gap:14px;align-items:start;padding:13px 0;border-bottom:1px solid var(--rand)}
.terugbelrij:last-child{border-bottom:none;padding-bottom:0}
.terugbelrij:first-child{padding-top:0}
.tb-wanneer b{display:block;font-size:19px;font-weight:750;color:var(--donker);
letter-spacing:-.5px;font-variant-numeric:tabular-nums;line-height:1.2}
.tb-wanneer .reden{display:block;font-size:11.5px}
.tb-wie b{display:block;font-size:14px;color:var(--donker);font-weight:640;line-height:1.35}
.tb-wie .reden{display:block;font-size:12px;margin-top:2px}
.tb-notitie{font-size:12.8px;color:var(--tekst);line-height:1.5}
/* .brieflabel is hier een en zou zonder dit op dezelfde regel als de notitie
beginnen: "VORIGE KEERWas in de fabriek..." */
.tb-notitie .brieflabel{display:block;margin-bottom:2px}
.tb-actie{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
/*
* Een afspraak waarvan het moment al voorbij is springt eruit: dat is het hele punt van
* dit scherm. Een rode rand links en een lichte achtergrond — geen knipperende tekst,
* want er staan er op maandagochtend zo vijf onder elkaar.
*/
.terugbelrij.achterstallig{border-left:3px solid var(--fout);background:#FEF2F2;
padding-left:12px;margin-left:-12px;border-radius:0 8px 8px 0}
.terugbelrij.achterstallig .tb-wanneer b{color:#991B1B}
/* Wat verderop in de agenda staat: compacter, want daar hoef je nu niets mee. */
.laterrij{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:7px 0;
border-bottom:1px solid var(--rand);font-size:13px}
.laterrij:last-of-type{border-bottom:none}
.laterwanneer{width:120px;flex:none;color:var(--gedempt);font-size:12.5px;
font-variant-numeric:tabular-nums}
.laterbedrijf{color:var(--donker);font-weight:620}
/* De kop boven een coachingpunt: bedrijf, wanneer, en de score als pil. */
.coachkop{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:5px}
.coachkop b{font-size:13.5px;color:var(--donker)}
.coachrij{padding:11px 0;border-bottom:1px solid var(--rand)}
.coachrij:last-child{border-bottom:none;padding-bottom:0}
.coachrij:first-child{padding-top:0}
.coachrij p{font-size:13px;line-height:1.55}
/* De regel boven "Mijn cijfers" die zegt waar deze pagina wél en niet voor is. */
.eerlijknoot{margin-bottom:16px}
/* ---------- Mijn cijfers op "Mijn dag": drie regels, geen dashboard ----------
*
* Getallen in een kolom moeten onder elkaar uitlijnen om te kunnen vergelijken; zonder
* tabular-nums schuift "11" naast "9" een halve cijferbreedte op en lijkt de kolom scheef.
* De regel "Vandaag" krijgt nadruk omdat dat het enige cijfer is waar de beller vandaag nog
* iets aan kan veranderen — de twee regels eronder zijn context, geen doel.
*/
.cijferstabel td.num,.cijferstabel th.num{font-variant-numeric:tabular-nums}
.cijferstabel tr.nadruk td{font-weight:700;color:var(--donker)}
.cijferstabel tr.nadruk td.num{font-size:15px}
/* De 500-pagina staat op zichzelf: geen topbar, geen navigatie, alleen één kaart. Zonder
deze marge plakt hij tegen de bovenrand van het venster. */
.foutpagina{max-width:640px;margin:48px auto}
/* ---------- Wat goed ging ----------
*
* Dezelfde bouwstenen als een coachingpunt (kop met pillen, daaronder de tekst), zodat de
* twee kaarten onder elkaar één ritme houden. Het verschil is het citaat: dat krijgt de
* bestaande .fragment-opmaak en is daarmee zichtbaar andermans woorden.
*/
.goedrij{padding:13px 0;border-bottom:1px solid var(--rand)}
.goedrij:last-child{border-bottom:none;padding-bottom:0}
.goedrij:first-child{padding-top:0}
.goedkop{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:7px}
.goedkop b{font-size:13.5px;color:var(--donker)}
.goedrij .fragment{margin:0}
/* De toelichting van de QA-agent, direct onder het citaat: platter dan het citaat zelf,
zodat duidelijk blijft welke woorden uit het gesprek komen en welke erover gaan. */
.waaromblok{margin-top:8px;font-size:13px;line-height:1.55;color:var(--tekst)}
.waaromblok .brieflabel{display:block;margin-bottom:2px}
/* ---------- trainingsbibliotheek ---------- */
.voorbeeldraster{align-items:start;margin-bottom:16px}
.voorbeeldkaart .kaartkop h2{font-size:14px;line-height:1.4}
.voorbeeldmeta{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
/*
* Het letterlijke fragment uit het gesprek. Dit is een citaat en hoort er ook zo uit te
* zien: iets ingesprongen, cursief, met een streep ervoor — zodat je in één oogopslag
* ziet waar de woorden van de beller beginnen en de toelichting van de agent ophoudt.
*/
.fragment{border-left:3px solid var(--paars-licht);background:#FBFCFE;border-radius:0 8px 8px 0;
padding:11px 14px;font-size:13.5px;line-height:1.6;color:var(--donker);font-style:italic;
white-space:pre-wrap}
/* De twee kaarten onderaan "Mijn dag": naslag, dus twee vaste kolommen en geen rij die
over de hele breedte uitwaaiert zoals op de systemenpagina. */
.syskaarten.smal{margin-bottom:0;grid-template-columns:repeat(2,1fr)}
/*
* De filterknoppen zijn hier links (naar dezelfde pagina met een andere query), geen
* knoppen. Zonder deze regel krijgen ze de standaard linkopmaak en staat elke chip
* onderstreept in beeld.
*/
a.filterknop{text-decoration:none}
@media(max-width:900px){
.terugbelrij{grid-template-columns:80px 1fr;gap:8px 12px}
.tb-notitie,.tb-actie{grid-column:1 / -1}
.tb-actie{justify-content:flex-start}
.laterwanneer{width:auto}
.syskaarten.smal{grid-template-columns:1fr}
}
/* Boven de tachtig procent hoort de balk niet meer paars maar rood te zijn:
dat is de stand waarop iemand moet ingrijpen voordat de flows omvallen. */
.balk i.vul80{background-color:#DC2626;background-image:none}
.balk i.vul85{background-color:#DC2626;background-image:none}
.balk i.vul90{background-color:#DC2626;background-image:none}
.balk i.vul95{background-color:#DC2626;background-image:none}
.balk i.vul100{background-color:#DC2626;background-image:none}
/* ================= verrijken =================
*
* Het werkscherm waarop een beheerder bij een goedgekeurd bedrijf de beslisser vastlegt.
* De indeling komt van het belscherm (.tweeluik.belscherm): links de stapel, rechts het werk.
* Hieronder staat alleen wat daar nog niet in zat. Geen nieuwe kleuren — alles komt uit de
* variabelen bovenaan dit bestand.
*/
/*
* Het cijfer achter een navigatielink: hoeveel bedrijven er op verrijking wachten.
* Grijs als er niets ligt, paars zodra er werk is. Dat verschil is het hele punt van het
* cijfer — je moet in de balk kunnen zien of je die pagina vandaag nog moet openen.
*/
.navtel{display:inline-block;min-width:19px;padding:1px 6px;margin-left:6px;border-radius:9px;
background:var(--rand);color:var(--gedempt);font-size:11px;font-weight:700;
font-variant-numeric:tabular-nums;text-align:center;vertical-align:1px}
.navtel.werk{background:var(--paars);color:var(--wit)}
/* Verborgen invoervelden horen nergens in beeld te komen. Elke browser regelt dat zelf, maar
de renderer waarmee de schermen visueel worden nagekeken (weasyprint) niet — en dan staat er
een record-id in beeld op een afbeelding waar je juist naar kijkt om te zien of dat NIET
gebeurt. Eén regel, en de controle klopt weer. */
input[type="hidden"]{display:none}
/* De rechterkolom van het tweeluik: de contextkaart, het formulier en "Toch afwijzen" onder
elkaar. Zonder deze omhulling zou elke kaart een eigen cel van het tweeluik worden. */
.verrijkwerk > .kaart:last-child{margin-bottom:0}
/*
* Twee kolommen voor het contactformulier. Naam en functie horen naast elkaar, de twee
* telefoonnummers ook — anders staat er een kolom van zes velden onder elkaar en scrolt de
* beheerder bij elk bedrijf door zijn eigen formulier heen.
*/
.verrijkraster{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px}
@media(max-width:760px){.verrijkraster{grid-template-columns:1fr}}
/* De hint onder een veld staat dicht tegen het veld aan: hij hoort bij dat veld en niet
bij het volgende. Dezelfde reden voor de foutregel eronder. */
.verrijkraster .veld{margin-bottom:6px}
.verrijkraster .veld .reden{margin-top:4px;line-height:1.45}
.verrijkraster .veld .veldfout:empty{display:none}
.verrijkformulier .knoprij{margin-top:10px}
/* "Toch afwijzen" is een uitzondering en hoort er ook zo bij te staan: dichtgeklapt, onder
het formulier, niet als tweede knop ernaast. */
.verrijkafwijzen{padding:0}
.verrijkafwijzen > summary{padding:14px 18px;font-size:13.5px;font-weight:600;color:var(--gedempt);
cursor:pointer;list-style:none}
.verrijkafwijzen > summary::-webkit-details-marker{display:none}
.verrijkafwijzen > summary::before{content:'▸ ';color:var(--gedempt)}
.verrijkafwijzen[open] > summary::before{content:'▾ '}
.verrijkafwijzen > summary:hover{color:var(--paars)}
.verrijkafwijzen > summary:focus-visible{outline:2px solid rgba(85,26,230,.28);border-radius:8px}
.verrijkafwijzen .veld{margin-bottom:10px}
/* De lege werklijst: één blok over de volle breedte, met de uitleg gecentreerd onder de kop.
Zonder max-width loopt die uitleg over de hele pagina en leest hij als een foutmelding. */
.verrijkleeg .reden{max-width:560px;margin:0 auto;text-align:center;line-height:1.6}
.verrijkleeg .leeg{padding-bottom:12px}
/* De bevestiging na een opslag. Staat boven het tweeluik, dus over de volle breedte. */
.verrijkmelding{margin-bottom:14px}