:root{--panel:#191919;--ev-line:#ffffff13;--red:#ff3b3b;--green:#9ae5ba;--gold:#fff1b8;font-synthesis:none}*{box-sizing:border-box}.ev-page main{font-size:14px;line-height:1.5}:where(.ev-page main) a{color:inherit;text-decoration:none}:where(.ev-page main) button,:where(.ev-page main) input,:where(.ev-page main) select{font:inherit}button,input,select,summary{touch-action:manipulation}button{cursor:pointer;color:inherit}button:disabled{cursor:wait;opacity:.5}button,a,input,select,summary{-webkit-tap-highlight-color:transparent}:where(.ev-page main) :is(button,a,input,select,summary):focus-visible{outline:2px solid var(--gold);outline-offset:4px}:where(.ev-page main) svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;top:-70px;left:20px;background:var(--red);padding:12px;z-index:50}.skip-link:focus{top:10px}main{width:min(1080px,92vw);margin:0 auto;padding:var(--section-gap) 0 0}.ev-hero{padding:1.6rem 2rem 1.5rem;background:linear-gradient(145deg,var(--bg-card),var(--bg-card-alt));border:2px solid var(--line);border-radius:24px;box-shadow:0 25px 45px rgba(0,0,0,.45),var(--glow);margin:0 0 22px}.ev-hero .page-title{margin:0 0 .7rem}.ev-hero-intro{margin:0;color:var(--text);opacity:.92;line-height:1.55;font-size:1rem;max-width:72ch}.eyebrow{font-size:10px;letter-spacing:.14em;font-weight:650;display:flex;align-items:center;gap:8px}.red-dot{width:6px;height:6px;border-radius:50%;background:var(--red);box-shadow:0 0 10px #ff3b3b55}.planner-layout{display:grid;grid-template-columns:minmax(320px,.9fr) minmax(0,1.52fr);gap:22px;align-items:stretch}.input-card{border:1px solid var(--ev-line);border-radius:20px;background:linear-gradient(145deg,#1c1c1c,#171717);padding:25px 28px}.card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.card-top h2{font-size:16px;font-weight:550;letter-spacing:-.025em;margin:0}.card-top>span{font-size:9px;letter-spacing:.1em;color:#777}.field-block{border:0;padding:0;margin:0 0 23px;min-width:0}.field-block legend{padding:0;margin-bottom:12px;font-size:13px;font-weight:550;display:flex;align-items:center;gap:9px}.step-number{display:inline-flex;border:1px solid #ffffff1c;border-radius:50%;width:20px;height:20px;align-items:center;justify-content:center;font-size:10px;color:#939893;font-weight:400}.energy-input{display:flex;align-items:center;gap:12px;padding-left:29px;margin-top:-5px}.energy-input input{border:0;background:none;padding:0;width:115px;max-width:60%;font-size:56px;font-weight:500;letter-spacing:-.06em;line-height:1.2;color:var(--text);appearance:textfield;-moz-appearance:textfield}.energy-input input::-webkit-inner-spin-button{appearance:none}.energy-input>span{font-size:18px;color:#bdc1bc}.energy-input small{display:block;font-size:11px;color:#858885;margin-top:-2px}.presets{display:flex;gap:7px;margin-top:8px}.presets button{flex:1;border:1px solid #ffffff13;border-radius:7px;padding:7px 2px;background:#ffffff03;font-size:11px;color:#999}.presets button[aria-pressed=true]{border-color:#ffffff42;background:#ffffff0b;color:#fff}.presets button:hover{background:#ffffff10;color:#fff}.field-hint{font-size:10px;color:#90938e;line-height:1.55;margin:9px 0 0}.wide-input,.unit-input{border:1px solid #ffffff1b;background:#101210;border-radius:9px;color:#e3e7e1;padding:12px;width:100%;min-width:0}.wide-input{height:46px;font-size:13px}.wide-input::-webkit-calendar-picker-indicator{opacity:.65;cursor:pointer}.charger-inputs{display:grid;grid-template-columns:1fr 1fr;gap:15px}.input-label{display:block;font-size:10px;color:#92958f;margin-bottom:7px}.phase-switch{display:flex;gap:3px;background:#101210;border:1px solid #ffffff18;padding:4px;border-radius:9px;height:44px}.phase-switch button{background:transparent;border:0;border-radius:5px;font-size:12px;flex:1;color:#858984;white-space:nowrap;padding:4px}.phase-switch button[aria-pressed=true]{background:#363934;color:#fff;box-shadow:0 1px 4px #0004}.unit-input{display:flex;align-items:center;height:44px;padding:9px 11px;gap:5px}.unit-input input{border:0;outline-offset:6px;background:transparent;color:inherit;min-width:0;width:100%;font-size:14px;padding:0}.unit-input>span{color:#969b93;font-size:11px;white-space:nowrap}.power-summary{display:flex;align-items:center;gap:6px;font-size:11px;color:#8c9288;margin-top:11px}.power-summary svg{height:14px;width:14px;color:var(--green)}.power-summary strong{color:#d3dece;font-weight:550}.extra-settings{border-top:1px solid var(--ev-line);margin-top:-3px}.extra-settings summary,.explanation summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:15px}.extra-settings summary::-webkit-details-marker,.explanation summary::-webkit-details-marker{display:none}.extra-settings summary{padding:14px 0;font-size:11px;color:#a9ada6}.extra-settings[open] summary>span,.explanation[open] summary>span{transform:rotate(45deg)}.extra-fields{padding-bottom:18px}.extra-fields label{display:block;font-size:12px;margin:8px 0}.extra-fields label>input,.extra-fields label>.unit-input{margin-top:7px}.extra-fields .field-hint{margin-bottom:15px}.calculate-button{display:flex;align-items:center;justify-content:space-between;width:100%;background:var(--red);border:0;border-radius:10px;padding:15px 16px;font-weight:550;font-size:13px;box-shadow:0 4px 20px #ff3b3b12;transition:background .2s,transform .2s}.calculate-button{color:#180909}.calculate-button:hover{background:#ff5353;transform:translateY(-1px)}.calculate-button svg{width:19px;height:19px}.form-footnote{font-size:10px;text-align:center;color:#888e85;margin:12px 0 0}.form-footnote>span{color:var(--green);margin-right:3px}.result-card{border:1px solid #bccfae24;border-radius:20px;padding:28px 34px 0;position:relative;overflow:hidden;background:radial-gradient(ellipse at 90% 20%,#66713b1c,transparent 50%),linear-gradient(145deg,#1b211c,#151a16 52%,#141815);display:flex;flex-direction:column;isolation:isolate}.result-card:before{content:"";position:absolute;inset:0;z-index:-1;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 150 150' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.04' d='M0 0h150v150H0z'/%3E%3C/svg%3E");opacity:.5;pointer-events:none}.result-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.result-top .eyebrow{color:#b4c3ae;font-size:9px}.status-dot{height:5px;width:5px;background:#b8f2b8;border-radius:50%;box-shadow:0 0 9px #c4ffa457}.result-tag{font-size:9px;color:#cbd9c3;border:1px solid #c8e5b521;border-radius:15px;padding:5px 9px;white-space:nowrap;background:#c8e5b508}.advice-hero{display:flex;align-items:center;position:relative;min-height:288px;flex:1}.advice-copy{position:relative;z-index:2;width:62%;padding:20px 0}.wait-label{font-size:11px;color:#afbba8;margin:0 0 10px}.advice-copy h2{font-size:clamp(30px,3.1vw,46px);font-weight:480;letter-spacing:-.045em;line-height:1.13;margin:0 0 14px;max-width:340px}.advice-copy h2>span{color:var(--green)}.advice-copy>p:last-child{font-size:12px;color:#99a493;max-width:260px;line-height:1.7;margin:0}.battery-scene{position:absolute;right:-7px;top:13px;width:235px;height:273px;perspective:900px;pointer-events:none}.battery-halo{position:absolute;inset:30px 0 0;background:radial-gradient(ellipse,#d6ef5c23,transparent 62%);filter:blur(20px)}.battery{position:absolute;top:31px;left:65px;width:107px;height:190px;transform:rotate(-10deg) rotateY(-22deg) rotateX(8deg);animation:float 7s ease-in-out infinite}.battery-cap{position:absolute;width:41px;height:14px;left:33px;top:-11px;border:1px solid #c3d9a751;background:linear-gradient(110deg,#7c916e,#d1d7a0 40%,#697b54);border-radius:6px 6px 0 0;box-shadow:4px -2px 0 #b5be8444}.battery-shell{position:absolute;inset:0;border:1px solid #dce7a981;border-radius:19px;background:linear-gradient(115deg,#e9f5bf23,#b6c68903 25%,#71896123 75%,#f2f8c44d);box-shadow:inset 0 0 18px #c5e59e19,9px 3px 0 -1px #5e734961,10px 3px 0 #b3c67d6e,16px 12px 40px #0005;overflow:hidden}.battery-reflection{position:absolute;inset:0;background:linear-gradient(110deg,transparent 10%,#ffffef3b 11%,#ffffef05 23%,transparent 24%,transparent 75%,#ffffcc29 94%);z-index:3;pointer-events:none}.battery-cells{position:absolute;inset:12px 11px;display:flex;flex-direction:column-reverse;gap:5px}.battery-cells i{display:block;flex:1;border-radius:5px;border:1px solid #f0ffb87a;background:linear-gradient(95deg,#779d55,#dcea99 48%,#ebf6aa 60%,#92b76c);box-shadow:0 0 14px #dfff7140,inset 0 1px 4px #fff7;opacity:.95;animation:charge 2s ease-in-out infinite}.battery-mark{position:absolute;inset:0;display:grid;place-items:center;z-index:4}.battery-mark svg{width:45px;height:45px;fill:#faffd3;stroke:#fffce3;stroke-width:1;filter:drop-shadow(0 2px 8px #506432)}.energy-token{position:absolute;bottom:11px;left:98px;z-index:5;backdrop-filter:blur(12px);border:1px solid #e4f4c82e;background:#293525d9;border-radius:10px;padding:8px 17px;box-shadow:0 8px 24px #0002;transform:rotate(-4deg)}.energy-token>span{font-size:24px;letter-spacing:-.045em;color:#eef4db;line-height:1.1}.energy-token small{display:block;font-size:8px;letter-spacing:.07em;color:#aab99b}.orbit{position:absolute;top:107px;left:8px;width:226px;height:80px;border:1px solid #d3edae17;border-radius:50%;transform:rotate(-30deg)}.orbit-two{transform:rotate(40deg);border-color:#d3edae0a}.schedule{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:20px 0 25px;border-top:1px solid #b6cda621}.schedule-point{display:flex;flex-direction:column}.schedule-label{font-size:8px;letter-spacing:.08em;color:#9faa99;display:flex;align-items:center;gap:5px;white-space:nowrap}.schedule-label i{width:4px;height:4px;border-radius:50%;background:#e5f1c3}.finish .schedule-label i{background:transparent;border:1px solid #afc599;width:5px;height:5px}.schedule-point>strong{font-size:35px;font-weight:450;letter-spacing:-.04em;line-height:1.4;font-variant-numeric:tabular-nums}.schedule-point>span:last-child{font-size:10px;color:#a3af9c}.duration-bridge{text-align:center;min-width:75px;color:#bbc7b2;font-size:11px;margin-top:9px}.duration-bridge>div{display:flex;align-items:center;justify-content:center;gap:5px;margin:6px 0}.duration-bridge i{height:1px;flex:1;background:#a7c38c3d}.duration-bridge i:nth-child(2){width:4px;height:4px;flex:none;border-radius:50%;background:#b6d497}.duration-bridge small{font-size:8px;color:#8e9c84}.cost-panel{display:flex;justify-content:space-between;align-items:center;gap:18px;border:1px solid #c4dda529;background:linear-gradient(110deg,#b7d9890d,#dbefb705);border-radius:14px;padding:23px 23px 21px}.cost-label{font-size:11px;color:#c4d0ba}.cost-value{font-size:51px;letter-spacing:-.055em;line-height:1.2;font-weight:480;margin:5px 0 2px;color:#f2f5e2;font-variant-numeric:tabular-nums}.tariff-label{font-size:9px;color:#9faa92;display:block;max-width:210px}.comparison{display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:3px}.comparison>span:first-child{font-size:10px;color:#a8b29f}.comparison>strong{font-size:23px;font-weight:450;letter-spacing:-.025em;color:#b8c2ad;line-height:1.5}.saving{font-size:9px;color:#cef0ad;background:#c7e7a612;padding:5px 8px;border-radius:5px;white-space:nowrap;margin-top:3px}.plan-note{display:flex;gap:8px;margin:17px 0 20px;color:#8e9e84}.plan-note svg{width:14px;height:14px;flex:none;margin-top:2px}.plan-note p{font-size:10px;margin:0;line-height:1.65}.coverage-note{font-size:11px;background:#ffce6e0b;border:1px solid #ffce6e24;color:#d8c18e;padding:10px;border-radius:7px;margin:-7px 0 18px}.result-footer{border-top:1px solid #b6cda61a;display:flex;justify-content:space-between;gap:12px;padding:15px 0;font-size:8px;color:#8c9784;margin-top:auto;align-items:center}.result-footer>span:last-child{white-space:nowrap;color:#b1bfaa}.tiny-bolt{color:#d5e6a8;margin-left:5px;font-size:14px}.result-error{background:#ffffff05;border:1px solid #ffffff13;padding:20px;border-radius:12px;margin:0 0 25px;font-size:13px;color:#c8cebe}.result-error p{margin:0}.result-error button{border:1px solid #ffffff28;background:#ffffff08;padding:10px 14px;border-radius:7px;margin-top:14px}.result-card.is-error .battery{opacity:.4;filter:grayscale(.7)}.result-card.is-error .battery-cells i{animation:none}.result-card.refresh .cost-value{animation:reveal .35s ease-out}.tariff-card{display:flex;align-items:center;justify-content:space-between;gap:15px 28px;flex-wrap:wrap;padding:24px 28px 20px;border:1px solid var(--ev-line);border-radius:14px;margin-top:22px;background:#141414}.tariff-card h2{font-size:13px;font-weight:550;margin:0 0 4px}.tariff-card p{font-size:10px;color:#999;margin:0}.tariff-card #price-breakdown{flex-basis:100%;font-size:9px;padding-top:14px;border-top:1px solid var(--ev-line);color:#90948c}.ev-page .ww-price-control{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}.ev-page .ww-price-label{font-size:10px;color:#aaa}.ev-page .ww-price-toggle{display:flex;padding:3px;border:1px solid #ffffff17;border-radius:8px;gap:3px;background:#0e0e0e}.ev-page .ww-price-pill{padding:7px 12px;border:0;background:transparent;color:#999;border-radius:5px;font-size:11px}.ev-page .ww-price-pill.is-active{background:#333830;color:#f4f7ef}.ev-page .ww-price-select{max-width:160px;color:#aaa;font-size:11px;padding:9px;border:1px solid #ffffff18;border-radius:6px;background:#1b1b1b}.ev-page .ww-price-supwrap,.ev-page .ww-price-custwrap{align-items:center;gap:5px}.ev-page .ww-price-custom{width:55px;border:1px solid #ffffff18;background:#191919;color:#ccc;border-radius:5px;padding:8px 5px;font-size:11px}.ev-page .ww-price-unit{font-size:10px;color:#999}.below-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:22px 0 35px;align-items:start}.explanation{border:1px solid var(--ev-line);border-radius:14px;padding:0 25px}.explanation summary{font-size:12px;min-height:107px;color:#b1b4ae}.explanation summary>span{font-size:20px;font-weight:300}.explanation>div{font-size:12px;color:#93988e;line-height:1.8;padding-bottom:15px}.api-card{display:flex;align-items:center;gap:18px;background:radial-gradient(ellipse at left,#ff3b3b08,transparent),#161414;border:1px solid #ff3b3b20;border-radius:14px;padding:24px;min-height:107px;transition:border-color .2s,background .2s}.api-card:hover{border-color:#ff3b3b70;background:#211818}.api-icon{color:var(--red);font-family:monospace;font-size:25px;letter-spacing:-3px}.api-card>span:nth-child(2){display:flex;flex-direction:column;gap:3px}.api-card .eyebrow{font-size:7px;letter-spacing:.13em;color:#b07979}.api-card strong{font-size:13px;font-weight:500}.api-card>span:nth-child(2)>span:last-child{font-size:10px;color:#a08c8c}.api-arrow{margin-left:auto;color:#c49292;font-size:20px}.noscript{padding:25px;color:var(--gold)}@keyframes float{0%,100%{transform:translateY(0) rotate(-10deg) rotateY(-22deg) rotateX(8deg)}50%{transform:translateY(-8px) rotate(-7deg) rotateY(-17deg) rotateX(8deg)}}@keyframes charge{0%,34%,100%{opacity:.95;filter:brightness(1)}11%{opacity:.16;filter:brightness(.45)}23%{opacity:1;filter:brightness(1.3)}}@keyframes reveal{from{opacity:.4;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1400px){.advice-hero{min-height:325px}.battery-scene{transform:scale(1.1);transform-origin:right center;top:25px}.advice-copy h2{font-size:49px}}
@media(max-width:1100px){.planner-layout{grid-template-columns:minmax(310px,.9fr) minmax(0,1.3fr);gap:16px}.input-card{padding:23px}.result-card{padding:24px 25px 0}.advice-copy h2{font-size:34px}.battery-scene{right:-25px;transform:scale(.83);transform-origin:right center}.advice-copy{width:66%}.schedule-label{font-size:7px}.cost-panel{padding:18px}.cost-value{font-size:44px}.saving{font-size:8px}.tariff-card{padding:22px}.duration-bridge{min-width:60px}.duration-bridge small{font-size:7px}}
@media(max-width:800px){.ev-hero{padding:1.4rem 1.5rem 1.3rem}.planner-layout{grid-template-columns:1fr;gap:18px}.input-card{padding:23px 25px}.field-block{margin-bottom:22px}.energy-input{margin-top:0}.energy-input input{font-size:54px}.field-hint{font-size:11px}.presets button{font-size:11px;padding-top:8px;padding-bottom:8px}.extra-settings summary{font-size:12px}.wide-input{font-size:14px}.calculate-button{font-size:14px;padding:16px}.result-card{padding:25px 28px 0}.advice-hero{min-height:280px}.advice-copy h2{font-size:42px}.battery-scene{right:0;transform:scale(1);top:5px}.advice-copy{width:60%}.advice-copy>p:last-child{font-size:13px}.schedule-label{font-size:8px}.schedule-point>strong{font-size:37px}.duration-bridge small{font-size:9px}.duration-bridge{font-size:12px;min-width:85px}.cost-value{font-size:53px}.cost-panel{padding:23px}.comparison>strong{font-size:27px}.saving{font-size:10px}.plan-note p{font-size:11px}.below-grid{grid-template-columns:1fr;gap:14px}.explanation summary{min-height:70px}.tariff-card{gap:17px}.ev-page .ww-price-control{justify-content:flex-start}.result-footer{font-size:9px}}
@media(max-width:440px){.ev-hero{padding:1.2rem 1.15rem 1.1rem}.ev-hero-intro{font-size:.95rem}.input-card{padding:23px 21px;border-radius:15px}.card-top>span{font-size:8px}.field-block legend{font-size:13px}.charger-inputs{gap:12px}.result-card{padding:22px 21px 0;border-radius:15px}.result-top .eyebrow{font-size:8px;letter-spacing:.1em}.result-tag{font-size:8px}.advice-hero{min-height:265px;align-items:flex-start}.advice-copy{width:65%;padding-top:36px}.advice-copy h2{font-size:33px;max-width:210px}.advice-copy>p:last-child{font-size:11px;max-width:175px}.wait-label{font-size:9px}.battery-scene{right:-38px;top:3px;transform:scale(.69);transform-origin:right center}.energy-token{left:80px}.schedule{gap:6px;padding:20px 0}.schedule-label{font-size:6px;gap:4px}.schedule-point>strong{font-size:30px}.schedule-point>span:last-child{font-size:9px}.duration-bridge{font-size:9px;min-width:62px}.duration-bridge small{font-size:7px}.cost-panel{padding:17px 15px;gap:10px}.cost-value{font-size:43px}.cost-label{font-size:10px}.tariff-label{font-size:8px;max-width:155px}.comparison>span:first-child{font-size:8px}.comparison>strong{font-size:22px}.saving{font-size:8px;padding:5px 6px}.plan-note p{font-size:10px}.result-footer{font-size:7px;gap:8px}.tariff-card{padding:20px}.tariff-card h2{font-size:13px}.tariff-card p{font-size:11px}.ev-page .ww-price-control{gap:6px}.ev-page .ww-price-select{max-width:140px}.ev-page .ww-price-label{display:none}.ev-page .ww-price-pill{padding:8px 10px}.api-card{padding:20px 18px;gap:13px}.api-card strong{font-size:12px}.api-card>span:nth-child(2)>span:last-child{font-size:9px}.explanation{padding:0 20px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Dezelfde typografie en kaartkleuren als het trefzekerheidsblok op de homepage. */
:root { --green: #2ecc71; }
.input-card, .result-card {
  background: linear-gradient(145deg, #1b1b1b, #202020);
  border: 1.5px solid #ff3b3b70;
  border-radius: 24px;
  box-shadow: 0 20px 40px #0005, 0 0 22px #ff3b3b0e;
}
.card-top h2, .result-top .eyebrow, .tariff-card h2 {
  font-family: "Doto", "Inter", sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: .04em;
  color: var(--red);
}
.card-top { margin-bottom: 25px; }
.field-block legend { font-size: 14px; }
.energy-input { padding-left: 0; }
.energy-input input {
  font-family: "Doto", "Inter", sans-serif;
  font-weight: 700;
  font-size: 56px;
  letter-spacing: .02em;
  width: 150px;
}
.field-hint, .form-footnote { color: #aaa; }
.calculate-button {
  background: #242424;
  color: var(--text);
  border: 1px solid #ff3b3b80;
  border-radius: 12px;
  box-shadow: 0 5px 16px #0003;
}
.calculate-button svg { color: var(--red); }
.calculate-button:hover { background: #ff3b3b14; border-color: var(--red); }
.result-card::before {
  background: radial-gradient(ellipse at 85% 12%, #2ecc7129, transparent 58%);
  opacity: 1;
}
.result-tag { background: none; border: 0; border-radius: 0; color: #b8beb9; padding: 0; }
.wait-label { color: #c5c5c5; font-size: 12px; }
/* Kop en tijden delen één maat, zodat "Dinsdag" en "12:00 tot 15:00" samen als
   één zin lezen. "12:00 tot 15:00" is ruim twee keer zo breed als "Dinsdag" en
   de batterij staat ernaast, dus de maat wordt begrensd door de kolom waar de
   tekst in staat. Die kolom is een percentage van de resultaatkaart en hangt
   dus niet netjes samen met de viewport: op 460px bleef er 221px over en op
   430px 229px, terwijl een staffel op breekpunten daar juist omhoog sprong.
   Vandaar cqw: de maat schaalt mee met de kolom zelf. 13cqw houdt "12:00 tot
   15:00" overal binnen de kolom, met 21px als bodem voor de smalste telefoons. */
.advice-copy { container-type: inline-size; --advies-titel: clamp(21px, 13cqw, 43px); }
.advice-copy h2 {
  font-family: "Doto", "Inter", sans-serif;
  font-weight: 700;
  font-size: var(--advies-titel);
  color: var(--text);
  letter-spacing: .01em;
  line-height: 1.2;
  margin: 0;
}
.advice-copy > p:last-child { color: #b7bdb7; }
.schedule { border-color: #ffffff18; }
.schedule-label { font-size: 11px; letter-spacing: 0; color: #c5c5c5; }
.schedule-point > strong {
  font-family: "Doto", "Inter", sans-serif;
  font-weight: 700;
  font-size: 36px;
  letter-spacing: .02em;
}
.finish > strong { color: var(--green); }
.schedule-point > span:last-child { color: #b3b8b3; font-size: 11px; }
.duration-bridge { color: #c5c5c5; }
.duration-bridge small { display: block; margin-top: 4px; color: #a5afa6; }
.cost-panel {
  background: linear-gradient(140deg, #2ecc7129 0%, #2ecc710d 55%, #ffffff05 100%);
  border: 1.5px solid #2ecc7152;
  border-radius: 20px;
}
.cost-value {
  font-family: "Doto", "Inter", system-ui, sans-serif;
  font-size: clamp(44px, 4.5vw, 62px);
  font-weight: 700;
  letter-spacing: .02em;
  color: #2ecc71;
  text-shadow: 0 0 24px #2ecc7173, 0 0 60px #2ecc7133;
}
.currency-unit {
  font-family: "Inter", system-ui, sans-serif;
  font-size: .6em;
  font-weight: 600;
  letter-spacing: 0;
  text-shadow: none;
}
.comparison > strong {
  font-family: "Doto", "Inter", sans-serif;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--text);
}
.cost-label { color: var(--text); font-size: 12px; }
.tariff-label, .comparison > span:first-child { color: #bdc5bf; }
.saving { color: var(--green); background: none; padding: 3px 0 0; border-radius: 0; }
.plan-note { color: #aab6ad; }
.result-footer { border-color: #ffffff14; color: #a1aaa2; }
.battery-halo { background: radial-gradient(ellipse, #2ecc7130, transparent 62%); }
.battery-cells i {
  border-color: #a7ffd18a;
  background: linear-gradient(95deg, #23884e, #53d88e 48%, #9ef3c1 60%, #2ecc71);
  box-shadow: 0 0 14px #2ecc7140, inset 0 1px 4px #ffffff77;
}
.energy-token { background: #1d382bd9; border-color: #2ecc7152; }
.energy-token > span { font-family: "Doto", "Inter", sans-serif; font-weight: 700; color: #9aefbc; letter-spacing: .02em; }
.energy-token small { color: #c5d5c9; }
.tariff-card { background: linear-gradient(145deg, #1b1b1b, #202020); }
.tariff-card h2 { font-size: 19px; }
.api-card { background: #1b1b1b; border-color: #ff3b3b52; }
.api-card > span:first-child { display: flex; flex-direction: column; gap: 4px; }
.api-card .eyebrow { font-family: "Doto", "Inter", sans-serif; font-size: 19px; font-weight: 700; letter-spacing: .03em; color: var(--red); }
.api-card > span:first-child > span:last-child { color: #b7b7b7; font-size: 11px; }
.api-card strong { font-size: 13px; color: var(--text); }
.api-arrow { color: var(--red); }
@media (max-width: 1100px) {
  .cost-value { font-size: 46px; }
  .schedule-label { font-size: 10px; }
  .cost-panel { padding: 19px; }
}
@media (max-width: 800px) {
  .cost-value { font-size: 54px; }
  .cost-panel { padding: 23px; }
}
@media (max-width: 440px) {
  .input-card, .result-card { border-radius: 20px; }
  .card-top h2, .result-top .eyebrow { font-size: 21px; }
  .result-tag { max-width: 100px; font-size: 9px; text-align: right; }
  .wait-label { font-size: 10px; }
  .schedule-label { font-size: 9px; }
  .schedule-point > strong { font-size: 29px; }
  .schedule-point > span:last-child { font-size: 10px; }
  .cost-panel { padding: 18px 14px; }
  .cost-value { font-size: 40px; }
  .cost-label { font-size: 11px; }
  .comparison > strong { font-size: 23px; }
  .saving { font-size: 9px; }
  .tariff-label { font-size: 9px; }
}

.charge-window { margin-top: 4px; }
.charge-times { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.charge-times strong {
  font-family: "Doto", "Inter", sans-serif;
  font-weight: 700;
  font-size: var(--advies-titel);
  line-height: 1.2;
  letter-spacing: .01em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.charge-times > span { color: #b9c1ba; font-size: 12px; }
.charge-dates { margin-top: 8px; font-size: 12px; color: #c5c5c5; }
.charge-duration { margin: 7px 0 0; font-size: 11px; color: #aab6ad; }
.extra-settings { border-bottom: 1px solid var(--ev-line); }
.form-footnote { margin-top: 16px; }
.advice-hero { min-height: 285px; }
@media (max-width: 1100px) { .charge-times { gap: 7px; } }
@media (max-width: 440px) {
  .charge-times { gap: 6px; }
  .charge-times > span { font-size: 10px; }
  .charge-dates, .charge-duration { font-size: 10px; }
  .advice-hero { min-height: 280px; }
}

.planner-faq { margin: 30px 0 40px; }
.planner-faq h2 { font-family: "Doto", "Inter", sans-serif; font-weight: 700; font-size: clamp(20px, 2.4vw, 26px); color: var(--red); line-height: 1.4; }
.planner-faq details { border-bottom: 1px solid var(--ev-line); padding: 16px 0; }
.planner-faq summary { cursor: pointer; font-size: 14px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.planner-faq summary::-webkit-details-marker { display: none; }
.planner-faq summary::after { content: "+"; color: var(--red); }
.planner-faq details[open] summary::after { content: "−"; }
.planner-faq p { font-size: 13px; line-height: 1.75; color: #bdbdbd; max-width: 85ch; }
.planner-faq a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }

/* Deze pagina laadt sinds de site-shell ook styles.css, en daar staat een eigen
   .ww-price-* set voor de prijsregelaar op /vandaag en /daily. Die brengt
   eigenschappen mee die de planner zelf nooit declareerde (appearance, gewicht,
   letterafstand, gloed), waardoor de select zijn pijltje verloor en de actieve
   pil rood werd. De prijsregelaar hoort bij het ontwerp van deze pagina, dus
   zetten we die eigenschappen expliciet terug op wat ze hier waren. */
.ev-page .ww-price-control { margin: 0; }
.ev-page .ww-price-label { letter-spacing: normal; }
.ev-page .ww-price-pill { font-weight: 400; letter-spacing: normal; box-shadow: none; }
.ev-page .ww-price-pill.is-active { box-shadow: none; }
.ev-page .ww-price-select {
  -webkit-appearance: menulist;
  appearance: menulist;
  line-height: normal;
}

/* main neemt de rol van .container over: alle blokken van de planner zitten er
   rechtstreeks in, dus krijgt main dezelfde breedte-trap als .container in
   styles.css (1080/92vw, dan 1100/94vw, dan 98vw) inclusief de zijpadding die
   daar op de smallere breekpunten bij hoort. Zo lopen header, inhoud en footer
   op elke breedte langs dezelfde lijn. */
@media (max-width: 960px) {
  .ev-page main { width: min(1100px, 94vw); padding: var(--section-gap-mobile) 1rem 0; }
}
@media (max-width: 640px) {
  .ev-page main { width: 98vw; max-width: 100vw; padding: var(--section-gap-mobile) 0.75rem 0; }
}

/* De uitlegkaart en de API-kaart staan naast elkaar en hoorden even hoog te
   zijn. Ze stonden op align-items:start met allebei een eigen min-height, dus
   werd de hoogte bepaald door de inhoud: 109px tegen 123px. Dichtgeklapt rekken
   ze nu allebei tot de hoogste van de twee. Zodra de uitleg openklapt gaat de
   rij terug naar start, anders zou de API-kaart mee uitrekken tot de volle
   hoogte van de opengeklapte tekst. */
.below-grid { align-items: stretch; }
.below-grid:has(.explanation[open]) { align-items: start; }
.explanation { display: flex; flex-direction: column; }
.explanation:not([open]) summary { flex: 1; }

/* Altijd zichtbare kleine lettertjes over de voorspelling. Het laadadvies zegt
   al of het met gepubliceerde of voorspelde prijzen rekent, maar dat leest
   alleen wie de plantoelichting uitleest. Dit staat er los onder, in dezelfde
   toon als de prijsuitleg erboven. */
.planner-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0 4px;
  font-size: 11px;
  line-height: 1.65;
  color: #90948c;
}
.planner-disclaimer svg { width: 13px; height: 13px; flex: none; margin-top: 2px; color: #8a8f88; }
.planner-disclaimer p { margin: 0; }
@media (max-width: 440px) {
  .planner-disclaimer { font-size: 10px; }
}

/* iOS Safari geeft datetime-local-velden een eigen uiterlijk: de waarde komt
   gecentreerd te staan en het veld trekt zich niets aan van de opgegeven
   hoogte, waardoor het kader flink hoger uitvalt dan de andere invoervelden
   eronder. Met appearance:none valt het terug op een gewoon tekstveld en
   pakken text-align, height en het lettertype wel. Geldt voor allebei de
   datumvelden, dus ook voor "Auto aangesloten vanaf". */
.wide-input[type="datetime-local"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  text-align: left;
  font-family: inherit;
  height: 46px;
  line-height: 20px;
}

/* Een getal buiten min/max moet je bij het veld zelf zien, niet pas in het
   laadadvies. :user-invalid slaat pas aan nadat iemand het veld heeft
   aangeraakt, dus een leeg verplicht veld kleurt niet meteen rood bij binnenkomst. */
.ev-page main input:user-invalid { border-color: var(--red); }
.ev-page main .unit-input:has(input:user-invalid) { border-color: var(--red); }

/* De vertrekdagen dragen .presets en hebben dus exact dezelfde knopstijl als de
   kWh-keuzes, alleen twee op een rij in plaats van vier. "Over 3 dagen" is 71px
   breed tegen 39px voor "15 kWh", en het instellingenblok is de smalle kolom van
   de tweekolomsindeling: op een 1400px-scherm is er 334px beschikbaar, terwijl
   vier van deze knoppen naast elkaar er 329 nodig hebben. Op die vijf pixel valt
   niet te bouwen, en smaller wordt het alleen maar. Vandaar 2x2. */
.date-presets { display: grid; grid-template-columns: 1fr 1fr; }

/* Segmenten boven de gekozen hoeveelheid blijven donker en animeren niet mee.
   Twee klassen tegen een van .battery-cells i, dus dit wint van de basisregel. */
.battery-cells i.is-leeg {
  background: none;
  border-color: #f0ffb826;
  box-shadow: none;
  opacity: .3;
  animation: none;
}

/* Invoer in kWh of in procenten. De schakelaar leent .phase-switch, dus hij ziet
   er hetzelfde uit als 1 fase / 3 fasen. Iets smaller, want hij staat boven een
   veld dat de volle breedte gebruikt. */
.invoer-switch { width: max-content; margin-bottom: 14px; }
.procent-velden { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 10px; margin-top: 10px; }
.procent-hint { color: #aaa; }
/* In procentmodus is de kWh het antwoord en niet meer iets wat je zelf typt. */
.energy-input input[readonly] { cursor: default; }
@media (max-width: 440px) {
  .procent-velden { gap: 8px; }
}