.tool-besparing{--t-bg: var(--color-canvas, #f4f7fa);--t-surface: #ffffff;--t-surface2: #f4f7fa;--t-border: var(--color-line, #dae2eb);--t-border-strong: #cdd5e0;--t-text: var(--color-navy-900, #082d58);--t-text-muted: var(--color-ink, #4a5a6e);--t-text-soft: var(--color-mute, #8497ab);--t-accent: #c44a2f;--t-accent-soft: #fde8e4;--t-green: var(--color-emerald, #10b982);--t-green-soft: #e4f5ec;--t-orange: #e07c24;--t-orange-soft: #fef3e4;--t-blue: #4a6fa5;--t-blue-soft: #e8eaf4;--t-purple: #7b5ea7;--t-purple-soft: #f0e4f4;--t-tan: #c2855a;--t-tan-soft: #f4ede4;--t-display: "Inter", system-ui, sans-serif;--t-mono: "JetBrains Mono", ui-monospace, monospace}.tool-besparing .t-hero{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:24px;gap:24px;flex-wrap:wrap}.tool-besparing .t-eyebrow{font-size:.7rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--t-green);margin-bottom:12px}.tool-besparing .t-h1{font-family:var(--t-display);font-size:1.85rem;font-weight:700;line-height:1.15;letter-spacing:-.01em;color:var(--t-text);margin-bottom:6px;max-width:760px}.tool-besparing .t-lead{font-size:.95rem;color:var(--t-text-muted);max-width:560px}.tool-besparing .period{display:flex;gap:4px;background:var(--t-surface);border:1px solid var(--t-border);border-radius:100px;padding:4px}.tool-besparing .period button{padding:8px 16px;border:none;border-radius:100px;font-family:inherit;font-size:.82rem;font-weight:500;background:transparent;color:var(--t-text-muted);cursor:pointer;transition:all .15s}.tool-besparing .period button:hover{color:var(--t-text)}.tool-besparing .period button.active{background:var(--t-text);color:#fff}.tool-besparing .privacy{background:var(--t-surface);border:1px solid var(--t-border);border-left:3px solid var(--t-green);border-radius:12px;padding:14px 20px;margin-bottom:24px;font-size:.84rem;color:var(--t-text-muted);display:flex;align-items:center;gap:14px}.tool-besparing .privacy-icon{width:32px;height:32px;border-radius:8px;background:var(--t-green-soft);color:var(--t-green);display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0}.tool-besparing .privacy strong{color:var(--t-text);font-weight:600}.tool-besparing .kpi-hero{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:14px;margin-bottom:24px}@media(max-width:1000px){.tool-besparing .kpi-hero{grid-template-columns:1fr 1fr}}@media(max-width:600px){.tool-besparing .kpi-hero{grid-template-columns:1fr}}.tool-besparing .kpi{background:var(--t-surface);border:1px solid var(--t-border);border-radius:18px;padding:26px 28px;position:relative;overflow:hidden}.tool-besparing .kpi-hero .kpi:first-child{background:var(--t-text);color:#fff;border:none}.tool-besparing .kpi-hero .kpi:first-child:after{content:"";position:absolute;top:-60px;right:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(16,185,130,.35),transparent 70%);pointer-events:none}.tool-besparing .kpi-label{font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;opacity:.55;margin-bottom:14px}.tool-besparing .kpi-value{font-family:var(--t-display);font-size:2.4rem;font-weight:700;line-height:1;letter-spacing:-.02em;margin-bottom:6px;display:flex;align-items:baseline;gap:4px}.tool-besparing .kpi-hero .kpi:first-child .kpi-value{font-size:3rem}.tool-besparing .kpi-unit{font-size:1rem;font-weight:400;opacity:.7}.tool-besparing .kpi-trend{display:flex;align-items:center;gap:6px;font-size:.82rem;margin-top:8px;font-weight:500;position:relative;z-index:1}.tool-besparing .kpi-trend.up{color:var(--t-green)}.tool-besparing .kpi-trend.down{color:var(--t-accent)}.tool-besparing .kpi-hero .kpi:first-child .kpi-trend.up{color:#7fc09a}.tool-besparing .kpi-hero .kpi:first-child .kpi-trend small{color:#ffffff80}.tool-besparing .kpi-trend small{color:var(--t-text-soft);font-weight:400}.tool-besparing .kpi-arrow{font-family:var(--t-mono);font-size:1rem;line-height:1}.tool-besparing .roi-calc{background:var(--t-surface);border:1px solid var(--t-border);border-radius:18px;padding:22px 28px;margin-bottom:24px;display:flex;align-items:center;gap:28px;flex-wrap:wrap}.tool-besparing .roi-input-wrap{display:flex;align-items:center;gap:12px;flex:1;min-width:280px}.tool-besparing .roi-question{font-size:.92rem;color:var(--t-text-muted);flex:1}.tool-besparing .roi-question strong{color:var(--t-text);font-weight:600}.tool-besparing .roi-input{font-family:var(--t-mono);font-size:1.4rem;font-weight:500;width:130px;padding:10px 14px;border:1.5px solid var(--t-border);border-radius:10px;background:var(--t-surface2);text-align:center;color:var(--t-text)}.tool-besparing .roi-input:focus{outline:none;border-color:var(--t-text);background:var(--t-surface)}.tool-besparing .roi-output{display:flex;align-items:baseline;gap:8px}.tool-besparing .roi-output-label{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--t-text-muted)}.tool-besparing .roi-output-value{font-family:var(--t-display);font-weight:700;font-size:2rem;line-height:1;color:var(--t-green)}.tool-besparing .t-grid{display:grid;gap:16px;margin-bottom:16px}.tool-besparing .t-cols-2{grid-template-columns:1.4fr 1fr}@media(max-width:1000px){.tool-besparing .t-cols-2{grid-template-columns:1fr}}.tool-besparing .t-card{background:var(--t-surface);border:1px solid var(--t-border);border-radius:18px;padding:24px 28px}.tool-besparing .t-card.mb-row{margin-bottom:16px}.tool-besparing .card-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px;gap:16px}.tool-besparing .card-head h3{font-family:var(--t-display);font-weight:700;font-size:1.1rem;letter-spacing:-.01em;color:var(--t-text);margin-bottom:2px}.tool-besparing .card-head .desc{font-size:.82rem;color:var(--t-text-muted)}.tool-besparing .t-badge{font-size:.7rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:12px;white-space:nowrap}.tool-besparing .t-badge.green{background:var(--t-green-soft);color:var(--t-green)}.tool-besparing .t-badge.blue{background:var(--t-blue-soft);color:var(--t-blue)}.tool-besparing .t-badge.orange{background:var(--t-orange-soft);color:var(--t-orange)}.tool-besparing .chart-wrap{position:relative;height:280px}.tool-besparing .funnel{display:flex;flex-direction:column;gap:8px}.tool-besparing .funnel-row{display:grid;grid-template-columns:200px 1fr 100px;gap:14px;align-items:center}.tool-besparing .funnel-label{font-size:.88rem;font-weight:500;color:var(--t-text)}.tool-besparing .funnel-bar-wrap{background:var(--t-surface2);height:32px;border-radius:8px;overflow:hidden;position:relative}.tool-besparing .funnel-bar{height:100%;background:var(--t-text);display:flex;align-items:center;padding-left:12px;color:#fff;font-family:var(--t-mono);font-size:.82rem;font-weight:500;border-radius:8px;transition:width .6s ease}.tool-besparing .funnel-bar.b1{background:linear-gradient(90deg,var(--t-blue),var(--t-blue) 70%,rgba(74,111,165,.7))}.tool-besparing .funnel-bar.b2{background:linear-gradient(90deg,var(--t-green),var(--t-green) 70%,rgba(16,185,130,.7))}.tool-besparing .funnel-bar.b3{background:linear-gradient(90deg,var(--t-orange),var(--t-orange) 70%,rgba(224,124,36,.7))}.tool-besparing .funnel-bar.b4{background:linear-gradient(90deg,var(--t-accent),var(--t-accent) 70%,rgba(196,74,47,.7))}.tool-besparing .funnel-bar.b4.muted{background:var(--t-accent)}.tool-besparing .funnel-pct{font-family:var(--t-mono);font-size:.86rem;color:var(--t-text-muted);text-align:right;font-weight:500}@media(max-width:600px){.tool-besparing .funnel-row{grid-template-columns:1fr}.tool-besparing .funnel-bar-wrap{height:28px}}.tool-besparing .tool-usage{display:flex;flex-direction:column;gap:12px}.tool-besparing .tool-row{display:grid;grid-template-columns:32px 1fr auto;gap:12px;align-items:center}.tool-besparing .tool-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:var(--t-display);font-size:.95rem;font-weight:700;color:#fff;flex-shrink:0}.tool-besparing .tool-icon.t1{background:var(--t-blue)}.tool-besparing .tool-icon.t2{background:var(--t-purple)}.tool-besparing .tool-icon.t3{background:var(--t-green)}.tool-besparing .tool-icon.t4{background:var(--t-accent)}.tool-besparing .tool-icon.t5{background:var(--t-tan)}.tool-besparing .tool-icon.t6{background:var(--t-orange)}.tool-besparing .tool-name{font-size:.9rem;font-weight:500;margin-bottom:2px;color:var(--t-text)}.tool-besparing .tool-bar-wrap{height:6px;background:var(--t-surface2);border-radius:3px;overflow:hidden;margin-top:4px}.tool-besparing .tool-bar{height:100%;border-radius:3px;transition:width .6s ease}.tool-besparing .tool-bar.t1{background:var(--t-blue)}.tool-besparing .tool-bar.t2{background:var(--t-purple)}.tool-besparing .tool-bar.t3{background:var(--t-green)}.tool-besparing .tool-bar.t4{background:var(--t-accent)}.tool-besparing .tool-bar.t5{background:var(--t-tan)}.tool-besparing .tool-bar.t6{background:var(--t-orange)}.tool-besparing .tool-count{font-family:var(--t-mono);font-size:.84rem;font-weight:500;color:var(--t-text)}.tool-besparing .heatmap{display:grid;grid-template-columns:200px 1fr 100px 100px;gap:0;border-radius:10px;overflow:hidden;border:1px solid var(--t-border)}.tool-besparing .heat-head{font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--t-text-muted);padding:12px 14px;background:var(--t-surface2);border-bottom:1px solid var(--t-border)}.tool-besparing .heat-cell{padding:14px;border-bottom:1px solid var(--t-border);font-size:.88rem;display:flex;align-items:center;color:var(--t-text)}.tool-besparing .heatmap>.heat-cell:nth-last-child(-n+4){border-bottom:none}.tool-besparing .heat-bar-wrap{width:100%;height:22px;background:var(--t-surface2);border-radius:6px;overflow:hidden;position:relative}.tool-besparing .heat-bar{height:100%;display:flex;align-items:center;padding-left:10px;color:#fff;font-family:var(--t-mono);font-size:.74rem;border-radius:6px;font-weight:500}.tool-besparing .heat-bar.low{background:var(--t-green)}.tool-besparing .heat-bar.mid{background:var(--t-orange)}.tool-besparing .heat-bar.high{background:var(--t-accent)}.tool-besparing .heat-num{font-family:var(--t-mono);font-size:.86rem;font-weight:500;text-align:right;justify-content:flex-end}.tool-besparing .heat-num.warn{color:var(--t-accent)}.tool-besparing .heat-num.good{color:var(--t-green)}.tool-besparing .heat-info{display:flex;flex-direction:column}.tool-besparing .heat-info small{font-size:.74rem;color:var(--t-text-soft);display:block}@media(max-width:800px){.tool-besparing .heatmap{grid-template-columns:1fr 1fr}.tool-besparing .heat-head:nth-child(2),.tool-besparing .heat-head:nth-child(3),.tool-besparing .heat-head:nth-child(4){display:none}.tool-besparing .heat-cell:nth-child(4n+2){display:none}}.tool-besparing .spoor-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}@media(max-width:700px){.tool-besparing .spoor-grid{grid-template-columns:1fr 1fr}}.tool-besparing .spoor{padding:18px 20px;border-radius:12px;background:var(--t-surface2)}.tool-besparing .spoor-label{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--t-text-muted);margin-bottom:10px}.tool-besparing .spoor-num{font-family:var(--t-display);font-weight:700;font-size:2.2rem;line-height:1;letter-spacing:-.02em;margin-bottom:4px}.tool-besparing .spoor-detail{font-size:.74rem;color:var(--t-text-soft)}.tool-besparing .spoor.s1{background:var(--t-blue-soft)}.tool-besparing .spoor.s1 .spoor-num{color:var(--t-blue)}.tool-besparing .spoor.s2{background:var(--t-orange-soft)}.tool-besparing .spoor.s2 .spoor-num{color:var(--t-orange)}.tool-besparing .spoor.s3{background:var(--t-purple-soft)}.tool-besparing .spoor.s3 .spoor-num{color:var(--t-purple)}.tool-besparing .spoor.s4{background:var(--t-green-soft)}.tool-besparing .spoor.s4 .spoor-num{color:var(--t-green)}.tool-besparing .verzoeken{display:flex;flex-direction:column;gap:10px}.tool-besparing .verzoek{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;padding:12px 16px;border:1px solid var(--t-border);border-radius:10px;background:var(--t-surface)}.tool-besparing .verzoek-info{display:flex;flex-direction:column}.tool-besparing .verzoek-type{font-weight:500;font-size:.9rem;color:var(--t-text)}.tool-besparing .verzoek-meta{font-size:.76rem;color:var(--t-text-soft)}.tool-besparing .verzoek-status{font-size:.74rem;letter-spacing:.05em;font-weight:500;padding:4px 10px;border-radius:10px;white-space:nowrap}.tool-besparing .verzoek-status.geregeld{background:var(--t-green-soft);color:var(--t-green)}.tool-besparing .verzoek-status.bezig{background:var(--t-blue-soft);color:var(--t-blue)}.tool-besparing .verzoek-status.nieuw{background:var(--t-orange-soft);color:var(--t-orange)}.tool-besparing .verzoek-tijd{font-family:var(--t-mono);font-size:.78rem;color:var(--t-text-muted)}@keyframes tool-fadeUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.tool-besparing .kpi,.tool-besparing .t-card,.tool-besparing .roi-calc{animation:tool-fadeUp .4s ease backwards}.tool-besparing .kpi-hero .kpi:nth-child(1){animation-delay:.05s}.tool-besparing .kpi-hero .kpi:nth-child(2){animation-delay:.1s}.tool-besparing .kpi-hero .kpi:nth-child(3){animation-delay:.15s}.tool-besparing .kpi-hero .kpi:nth-child(4){animation-delay:.2s}@media(prefers-reduced-motion:reduce){.tool-besparing .kpi,.tool-besparing .t-card,.tool-besparing .roi-calc{animation:none}.tool-besparing .funnel-bar,.tool-besparing .tool-bar{transition:none}}
