/* Lichte modus voor ev-laadplanner.css. Gemaakt door scripts/licht_css.py, niet met de hand aanpassen. */
:root:where([data-thema="licht"]) { --panel: #f1f1f1; --ev-line: rgba(0, 0, 0, 0.067); --red: #d42a2a; --green: #269254; --gold: #997b00; }
:where(html[data-thema="licht"]) :where(.ev-page main) a { color: inherit; text-decoration: none; }
:where(html[data-thema="licht"]) button { color: inherit; }
:where(html[data-thema="licht"]) :where(.ev-page main) :is(button,a,input,select,summary):focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
:where(html[data-thema="licht"]) :where(.ev-page main) svg { fill: none; stroke: currentColor; }
:where(html[data-thema="licht"]) .sr-only { border: 0; }
:where(html[data-thema="licht"]) .skip-link { background: var(--red); }
:where(html[data-thema="licht"]) .ev-hero { background: linear-gradient(145deg,var(--bg-card),var(--bg-card-alt)); border: 2px solid var(--line); box-shadow: 0 25px 45px rgba(0, 0, 0, 0.135),var(--glow); }
:where(html[data-thema="licht"]) .ev-hero-intro { color: var(--text); }
:where(html[data-thema="licht"]) .red-dot { background: var(--red); box-shadow: 0 0 10px rgba(255, 59, 59, 0.117); }
:where(html[data-thema="licht"]) .input-card { border: 1px solid var(--ev-line); background: linear-gradient(145deg,#f0f0f0,#f2f2f2); }
:where(html[data-thema="licht"]) .card-top>span { color: #888888; }
:where(html[data-thema="licht"]) .field-block { border: 0; }
:where(html[data-thema="licht"]) .step-number { border: 1px solid rgba(0, 0, 0, 0.099); color: #6a6a6a; }
:where(html[data-thema="licht"]) .energy-input input { border: 0; background: none; color: var(--text); }
:where(html[data-thema="licht"]) .energy-input>span { color: #4a4a4a; }
:where(html[data-thema="licht"]) .energy-input small { color: #797979; }
:where(html[data-thema="licht"]) .presets button { border: 1px solid rgba(0, 0, 0, 0.067); background: rgba(0, 0, 0, 0.011); color: #767676; }
:where(html[data-thema="licht"]) .presets button[aria-pressed=true] { border-color: rgba(0, 0, 0, 0.233); background: rgba(0, 0, 0, 0.039); color: #141414; }
:where(html[data-thema="licht"]) .presets button:hover { background: rgba(0, 0, 0, 0.056); color: #141414; }
:where(html[data-thema="licht"]) .field-hint { color: #6f6f6f; }
:where(html[data-thema="licht"]) .wide-input, :where(html[data-thema="licht"]) .unit-input { border: 1px solid rgba(0, 0, 0, 0.095); background: #f6f6f6; color: #1d1d1d; }
:where(html[data-thema="licht"]) .input-label { color: #6d6d6d; }
:where(html[data-thema="licht"]) .phase-switch { background: #f6f6f6; border: 1px solid rgba(0, 0, 0, 0.085); }
:where(html[data-thema="licht"]) .phase-switch button { background: transparent; border: 0; color: #797979; }
:where(html[data-thema="licht"]) .phase-switch button[aria-pressed=true] { background: #e1e1e1; color: #141414; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); }
:where(html[data-thema="licht"]) .unit-input input { border: 0; outline-offset: 6px; background: transparent; color: inherit; }
:where(html[data-thema="licht"]) .unit-input>span { color: #797979; }
:where(html[data-thema="licht"]) .power-summary { color: #727272; }
:where(html[data-thema="licht"]) .power-summary svg { color: var(--green); }
:where(html[data-thema="licht"]) .power-summary strong { color: #2e2e2e; }
:where(html[data-thema="licht"]) .extra-settings { border-top: 1px solid var(--ev-line); }
:where(html[data-thema="licht"]) .extra-settings summary { color: #636363; }
:where(html[data-thema="licht"]) .calculate-button { background: var(--red); border: 0; box-shadow: 0 4px 20px rgba(255, 59, 59, 0.025); }
:where(html[data-thema="licht"]) .calculate-button { color: #f7f7f7; }
:where(html[data-thema="licht"]) .calculate-button:hover { background: #d42a2a; }
:where(html[data-thema="licht"]) .form-footnote { color: #767676; }
:where(html[data-thema="licht"]) .form-footnote>span { color: var(--green); }
:where(html[data-thema="licht"]) .result-card { border: 1px solid rgba(188, 207, 174, 0.141); background: radial-gradient(ellipse at 90% 20%,rgba(102, 113, 59, 0.11),transparent 50%),linear-gradient(145deg,#efefef,#f2f2f2 52%,#f3f3f3); }
:where(html[data-thema="licht"]) .result-card:before { 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"); }
:where(html[data-thema="licht"]) .result-top .eyebrow { color: #525252; }
:where(html[data-thema="licht"]) .status-dot { background: #e1f9e1; box-shadow: 0 0 9px rgba(196, 255, 164, 0.119); }
:where(html[data-thema="licht"]) .result-tag { color: #383838; border: 1px solid rgba(200, 229, 181, 0.129); background: rgba(200, 229, 181, 0.031); }
:where(html[data-thema="licht"]) .wait-label { color: #5a5a5a; }
:where(html[data-thema="licht"]) .advice-copy h2>span { color: var(--green); }
:where(html[data-thema="licht"]) .advice-copy>p:last-child { color: #747474; }
:where(html[data-thema="licht"]) .battery-halo { background: radial-gradient(ellipse,rgba(214, 239, 92, 0.137),transparent 62%); filter: blur(20px); }
:where(html[data-thema="licht"]) .battery-cap { border: 1px solid rgba(195, 217, 167, 0.318); background: linear-gradient(110deg,#7c916e,#d1d7a0 40%,#697b54); box-shadow: 4px -2px 0 rgba(181, 190, 132, 0.093); }
:where(html[data-thema="licht"]) .battery-shell { border: 1px solid rgba(220, 231, 169, 0.506); background: linear-gradient(115deg,rgba(233, 245, 191, 0.137),rgba(182, 198, 137, 0.012) 25%,rgba(113, 137, 97, 0.137) 75%,rgba(242, 248, 196, 0.302)); box-shadow: inset 0 0 18px rgba(197, 229, 158, 0.034),9px 3px 0 -1px rgba(94, 115, 73, 0.133),10px 3px 0 rgba(179, 198, 125, 0.151),16px 12px 40px rgba(0, 0, 0, 0.1); }
:where(html[data-thema="licht"]) .battery-reflection { background: linear-gradient(110deg,transparent 10%,rgba(0, 0, 0, 0.208) 11%,rgba(0, 0, 0, 0.018) 23%,transparent 24%,transparent 75%,rgba(255, 255, 204, 0.161) 94%); }
:where(html[data-thema="licht"]) .battery-cells i { border: 1px solid rgba(240, 255, 184, 0.478); background: linear-gradient(95deg,#779d55,#dcea99 48%,#f7fcdf 60%,#92b76c); box-shadow: 0 0 14px rgba(223, 255, 113, 0.088),inset 0 1px 4px rgba(0, 0, 0, 0.42); }
:where(html[data-thema="licht"]) .battery-mark svg { fill: #889900; stroke: #998900; filter: drop-shadow(0 2px 8px rgba(80, 100, 50, 0.35)); }
:where(html[data-thema="licht"]) .energy-token { border: 1px solid rgba(228, 244, 200, 0.18); background: rgba(231, 231, 231, 0.851); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04); }
:where(html[data-thema="licht"]) .energy-token>span { color: #161616; }
:where(html[data-thema="licht"]) .energy-token small { color: #5c6c4c; }
:where(html[data-thema="licht"]) .orbit { border: 1px solid rgba(211, 237, 174, 0.09); }
:where(html[data-thema="licht"]) .orbit-two { border-color: rgba(211, 237, 174, 0.039); }
:where(html[data-thema="licht"]) .schedule { border-top: 1px solid rgba(182, 205, 166, 0.129); }
:where(html[data-thema="licht"]) .schedule-label { color: #6d6d6d; }
:where(html[data-thema="licht"]) .schedule-label i { background: #f2f8e2; }
:where(html[data-thema="licht"]) .finish .schedule-label i { background: transparent; border: 1px solid #afc599; }
:where(html[data-thema="licht"]) .schedule-point>span:last-child { color: #686868; }
:where(html[data-thema="licht"]) .duration-bridge { color: #4c4c4c; }
:where(html[data-thema="licht"]) .duration-bridge i { background: rgba(167, 195, 140, 0.239); }
:where(html[data-thema="licht"]) .duration-bridge i:nth-child(2) { background: #b6d497; }
:where(html[data-thema="licht"]) .duration-bridge small { color: #707070; }
:where(html[data-thema="licht"]) .cost-panel { border: 1px solid rgba(196, 221, 165, 0.161); background: linear-gradient(110deg,rgba(183, 217, 137, 0.051),rgba(219, 239, 183, 0.02)); }
:where(html[data-thema="licht"]) .cost-label { color: #424242; }
:where(html[data-thema="licht"]) .cost-value { color: #141414; }
:where(html[data-thema="licht"]) .tariff-label { color: #707070; }
:where(html[data-thema="licht"]) .comparison>span:first-child { color: #646464; }
:where(html[data-thema="licht"]) .comparison>strong { color: #525252; }
:where(html[data-thema="licht"]) .saving { color: #4c8118; background: rgba(199, 231, 166, 0.071); }
:where(html[data-thema="licht"]) .plan-note { color: #6f6f6f; }
:where(html[data-thema="licht"]) .coverage-note { background: rgba(255, 206, 110, 0.043); border: 1px solid rgba(255, 206, 110, 0.141); color: #886d2f; }
:where(html[data-thema="licht"]) .result-footer { border-top: 1px solid rgba(182, 205, 166, 0.102); color: #727272; }
:where(html[data-thema="licht"]) .result-footer>span:last-child { color: #575757; }
:where(html[data-thema="licht"]) .tiny-bolt { color: #607722; }
:where(html[data-thema="licht"]) .result-error { background: rgba(0, 0, 0, 0.018); border: 1px solid rgba(0, 0, 0, 0.067); color: #404040; }
:where(html[data-thema="licht"]) .result-error button { border: 1px solid rgba(0, 0, 0, 0.141); background: rgba(0, 0, 0, 0.028); }
:where(html[data-thema="licht"]) .result-card.is-error .battery { filter: grayscale(.7); }
:where(html[data-thema="licht"]) .tariff-card { border: 1px solid var(--ev-line); background: #f4f4f4; }
:where(html[data-thema="licht"]) .tariff-card p { color: #767676; }
:where(html[data-thema="licht"]) .tariff-card #price-breakdown { border-top: 1px solid var(--ev-line); color: #6f6f6f; }
:where(html[data-thema="licht"]) .ev-page .ww-price-label { color: #626262; }
:where(html[data-thema="licht"]) .ev-page .ww-price-toggle { border: 1px solid rgba(0, 0, 0, 0.081); background: #f7f7f7; }
:where(html[data-thema="licht"]) .ev-page .ww-price-pill { border: 0; background: transparent; color: #767676; }
:where(html[data-thema="licht"]) .ev-page .ww-price-pill.is-active { background: #e3e3e3; color: #141414; }
:where(html[data-thema="licht"]) .ev-page .ww-price-select { color: #626262; border: 1px solid rgba(0, 0, 0, 0.085); background: #f0f0f0; }
:where(html[data-thema="licht"]) .ev-page .ww-price-custom { border: 1px solid rgba(0, 0, 0, 0.085); background: #f1f1f1; color: #393939; }
:where(html[data-thema="licht"]) .ev-page .ww-price-unit { color: #767676; }
:where(html[data-thema="licht"]) .explanation { border: 1px solid var(--ev-line); }
:where(html[data-thema="licht"]) .explanation summary { color: #5a5a5a; }
:where(html[data-thema="licht"]) .explanation>div { color: #6c6c6c; }
:where(html[data-thema="licht"]) .api-card { background: radial-gradient(ellipse at left,rgba(212, 42, 42, 0.031),transparent),#f4f4f4; border: 1px solid rgba(212, 42, 42, 0.125); }
:where(html[data-thema="licht"]) .api-card:hover { border-color: rgba(212, 42, 42, 0.439); background: #f0f0f0; }
:where(html[data-thema="licht"]) .api-icon { color: var(--red); }
:where(html[data-thema="licht"]) .api-card .eyebrow { color: #744444; }
:where(html[data-thema="licht"]) .api-card>span:nth-child(2)>span:last-child { color: #6c6c6c; }
:where(html[data-thema="licht"]) .api-arrow { color: #774040; }
:where(html[data-thema="licht"]) .noscript { color: var(--gold); }
:root:where([data-thema="licht"]) { --green: #229653; }
:where(html[data-thema="licht"]) .input-card, :where(html[data-thema="licht"]) .result-card { background: linear-gradient(145deg, #f0f0f0, #ededed); border: 1.5px solid rgba(212, 42, 42, 0.439); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1), 0 0 22px rgba(255, 59, 59, 0.019); }
:where(html[data-thema="licht"]) .card-top h2, :where(html[data-thema="licht"]) .result-top .eyebrow, :where(html[data-thema="licht"]) .tariff-card h2 { color: var(--red); }
:where(html[data-thema="licht"]) .field-hint, :where(html[data-thema="licht"]) .form-footnote { color: #626262; }
:where(html[data-thema="licht"]) .calculate-button { background: #ebebeb; color: var(--text); border: 1px solid rgba(212, 42, 42, 0.502); box-shadow: 0 5px 16px rgba(0, 0, 0, 0.06); }
:where(html[data-thema="licht"]) .calculate-button svg { color: var(--red); }
:where(html[data-thema="licht"]) .calculate-button:hover { background: rgba(212, 42, 42, 0.078); border-color: var(--red); }
:where(html[data-thema="licht"]) .result-card::before { background: radial-gradient(ellipse at 85% 12%, rgba(46, 204, 113, 0.161), transparent 58%); }
:where(html[data-thema="licht"]) .result-tag { background: none; border: 0; color: #4e4e4e; }
:where(html[data-thema="licht"]) .wait-label { color: #424242; }
:where(html[data-thema="licht"]) .advice-copy h2 { color: var(--text); }
:where(html[data-thema="licht"]) .advice-copy > p:last-child { color: #505050; }
:where(html[data-thema="licht"]) .schedule { border-color: rgba(0, 0, 0, 0.085); }
:where(html[data-thema="licht"]) .schedule-label { color: #424242; }
:where(html[data-thema="licht"]) .finish > strong { color: var(--green); }
:where(html[data-thema="licht"]) .schedule-point > span:last-child { color: #555555; }
:where(html[data-thema="licht"]) .duration-bridge { color: #424242; }
:where(html[data-thema="licht"]) .duration-bridge small { color: #646464; }
:where(html[data-thema="licht"]) .cost-panel { background: linear-gradient(140deg, rgba(46, 204, 113, 0.161) 0%, rgba(46, 204, 113, 0.051) 55%, rgba(0, 0, 0, 0.018) 100%); border: 1.5px solid rgba(46, 204, 113, 0.322); }
:where(html[data-thema="licht"]) .cost-value { color: #229653; text-shadow: 0 0 24px rgba(46, 204, 113, 0.158), 0 0 60px rgba(46, 204, 113, 0.07); }
:where(html[data-thema="licht"]) .currency-unit { text-shadow: none; }
:where(html[data-thema="licht"]) .comparison > strong { color: var(--text); }
:where(html[data-thema="licht"]) .cost-label { color: var(--text); }
:where(html[data-thema="licht"]) .tariff-label, :where(html[data-thema="licht"]) .comparison > span:first-child { color: #474747; }
:where(html[data-thema="licht"]) .saving { color: var(--green); background: none; }
:where(html[data-thema="licht"]) .plan-note { color: #5c5c5c; }
:where(html[data-thema="licht"]) .result-footer { border-color: rgba(0, 0, 0, 0.071); color: #696969; }
:where(html[data-thema="licht"]) .battery-halo { background: radial-gradient(ellipse, rgba(46, 204, 113, 0.188), transparent 62%); }
:where(html[data-thema="licht"]) .battery-cells i { border-color: rgba(167, 255, 209, 0.541); background: linear-gradient(95deg, #23884e, #53d88e 48%, #dffbeb 60%, #2ecc71); box-shadow: 0 0 14px rgba(46, 204, 113, 0.088), inset 0 1px 4px rgba(0, 0, 0, 0.42); }
:where(html[data-thema="licht"]) .energy-token { background: rgba(232, 232, 232, 0.851); border-color: rgba(46, 204, 113, 0.322); }
:where(html[data-thema="licht"]) .energy-token > span { color: #199e4e; }
:where(html[data-thema="licht"]) .energy-token small { color: #3a3a3a; }
:where(html[data-thema="licht"]) .tariff-card { background: linear-gradient(145deg, #f0f0f0, #ededed); }
:where(html[data-thema="licht"]) .api-card { background: #f0f0f0; border-color: rgba(212, 42, 42, 0.322); }
:where(html[data-thema="licht"]) .api-card .eyebrow { color: var(--red); }
:where(html[data-thema="licht"]) .api-card > span:first-child > span:last-child { color: #525252; }
:where(html[data-thema="licht"]) .api-card strong { color: var(--text); }
:where(html[data-thema="licht"]) .api-arrow { color: var(--red); }
:where(html[data-thema="licht"]) .charge-times strong { color: var(--text); }
:where(html[data-thema="licht"]) .charge-times > span { color: #4c4c4c; }
:where(html[data-thema="licht"]) .charge-dates { color: #424242; }
:where(html[data-thema="licht"]) .charge-duration { color: #5c5c5c; }
:where(html[data-thema="licht"]) .extra-settings { border-bottom: 1px solid var(--ev-line); }
:where(html[data-thema="licht"]) .planner-faq h2 { color: var(--red); }
:where(html[data-thema="licht"]) .planner-faq details { border-bottom: 1px solid var(--ev-line); }
:where(html[data-thema="licht"]) .planner-faq summary::after { color: var(--red); }
:where(html[data-thema="licht"]) .planner-faq p { color: #4b4b4b; }
:where(html[data-thema="licht"]) .planner-faq a { color: var(--red); text-decoration: underline; }
:where(html[data-thema="licht"]) .ev-page .ww-price-pill { box-shadow: none; }
:where(html[data-thema="licht"]) .ev-page .ww-price-pill.is-active { box-shadow: none; }
:where(html[data-thema="licht"]) .planner-disclaimer { color: #6f6f6f; }
:where(html[data-thema="licht"]) .planner-disclaimer svg { color: #747474; }
:where(html[data-thema="licht"]) .ev-page main input:user-invalid { border-color: var(--red); }
:where(html[data-thema="licht"]) .ev-page main .unit-input:has(input:user-invalid) { border-color: var(--red); }
:where(html[data-thema="licht"]) .battery-cells i.is-leeg { background: none; border-color: rgba(240, 255, 184, 0.149); box-shadow: none; }
:where(html[data-thema="licht"]) .procent-hint { color: #626262; }