/* Lichte modus voor styles.css. Gemaakt door scripts/licht_css.py, niet met de hand aanpassen. */ :root:where([data-thema="licht"]) { --bg: #f6f6f6; --bg-hero: #f3f3f3; --bg-card: #f0f0f0; --bg-card-alt: #ededed; --text: #141414; --muted: #424242; --accent: #d42a2a; --line: rgba(212, 42, 42, 0.6); --glow: 0 0 22px rgba(212, 42, 42, 0.32), 0 0 46px rgba(212, 42, 42, 0.18); } :where(html[data-thema="licht"]) body { background: var(--bg); color: var(--text); } :where(html[data-thema="licht"]) a { color: var(--accent); text-decoration: none; } :where(html[data-thema="licht"]) a:visited { color: var(--accent); } :where(html[data-thema="licht"]) img { border: 2px solid var(--line); box-shadow: 0 25px 45px rgba(0, 0, 0, 0.135); } :where(html[data-thema="licht"]) header { background: rgba(247, 247, 247, 0.78); border-bottom: 1px solid rgba(0, 0, 0, 0.063); } :where(html[data-thema="licht"]) body.mobile-header-hidden header { box-shadow: none; } :where(html[data-thema="licht"]) .header-brand { text-decoration: none; color: var(--accent); } :where(html[data-thema="licht"]) .header-brand:hover, :where(html[data-thema="licht"]) .header-brand:focus-visible { color: #d42a2a; } :where(html[data-thema="licht"]) .header-logo { border: 0; box-shadow: none; } :where(html[data-thema="licht"]) .header-nav-link { color: var(--text); text-decoration: none; } :where(html[data-thema="licht"]) .header-nav-link:hover, :where(html[data-thema="licht"]) .header-nav-link:focus-visible { background: rgba(0, 0, 0, 0.054); color: var(--text); } :where(html[data-thema="licht"]) .header-nav-link.is-active { color: var(--accent); background: rgba(212, 42, 42, 0.09); } :where(html[data-thema="licht"]) .header-menu-toggle { border: 0; background: transparent; } :where(html[data-thema="licht"]) .header-menu-toggle:hover, :where(html[data-thema="licht"]) .header-menu-toggle:focus-visible { background: rgba(0, 0, 0, 0.054); } :where(html[data-thema="licht"]) .header-menu-icon, :where(html[data-thema="licht"]) .header-menu-icon::before, :where(html[data-thema="licht"]) .header-menu-icon::after { background: var(--accent); } :where(html[data-thema="licht"]) .header-menu-toggle[aria-expanded="true"] .header-menu-icon { background: transparent; } :where(html[data-thema="licht"]) .header-mobile-nav { border-top: 1px solid rgba(0, 0, 0, 0.054); } :where(html[data-thema="licht"]) .header-mobile-link { color: var(--accent); text-decoration: none; } :where(html[data-thema="licht"]) .header-mobile-link:hover, :where(html[data-thema="licht"]) .header-mobile-link:focus-visible { background: rgba(212, 42, 42, 0.08); color: #d42a2a; } :where(html[data-thema="licht"]) .header-mobile-link.is-active { background: rgba(212, 42, 42, 0.12); } :where(html[data-thema="licht"]) .header-mobile-divider { background: rgba(0, 0, 0, 0.063); } :where(html[data-thema="licht"]) .hero-title { color: var(--accent); text-shadow: 0 0 4px rgba(0, 0, 0, 0.81), 0 0 11px rgba(255, 90, 90, 0.315), 0 0 24px rgba(255, 59, 59, 0.297), 0 0 46px rgba(255, 45, 45, 0.245), 0 0 78px rgba(255, 40, 40, 0.175); filter: drop-shadow(0 0 16px rgba(255, 59, 59, 0.193)); } :where(html[data-thema="licht"]) .hero .hero-tagline { color: var(--text); } :where(html[data-thema="licht"]) .hero .hero-claim { color: var(--muted); } :where(html[data-thema="licht"]) .faq-item { background: rgba(0, 0, 0, 0.023); border: 1px solid rgba(0, 0, 0, 0.054); } :where(html[data-thema="licht"]) .faq-item[open] { border-color: rgba(212, 42, 42, 0.22); } :where(html[data-thema="licht"]) .faq-item summary { color: var(--text); } :where(html[data-thema="licht"]) .faq-item summary::after { color: var(--accent); } :where(html[data-thema="licht"]) .faq-item summary:hover, :where(html[data-thema="licht"]) .faq-item summary:focus-visible { color: var(--accent); } :where(html[data-thema="licht"]) .faq-item p { color: var(--text); } :where(html[data-thema="licht"]) .faq-item p a { color: var(--accent); } :where(html[data-thema="licht"]) .hero .cta { color: var(--accent); } :where(html[data-thema="licht"]) .hero-highlight { color: var(--accent); } :where(html[data-thema="licht"]) .clickable-forecast:hover, :where(html[data-thema="licht"]) .clickable-forecast:focus-visible { box-shadow: 0 30px 55px rgba(0, 0, 0, 0.165); } :where(html[data-thema="licht"]) .hero .disclaimer { border-left: 6px solid var(--accent); } :where(html[data-thema="licht"]) .page-title { color: var(--accent); text-shadow: 0 0 4px rgba(0, 0, 0, 0.81), 0 0 11px rgba(255, 90, 90, 0.315), 0 0 24px rgba(255, 59, 59, 0.297), 0 0 46px rgba(255, 45, 45, 0.245), 0 0 78px rgba(255, 40, 40, 0.175); filter: drop-shadow(0 0 16px rgba(255, 59, 59, 0.193)); } :where(html[data-thema="licht"]) .contact-note { color: var(--muted); } :where(html[data-thema="licht"]) .pill { background: rgba(212, 42, 42, 0.12); border: 1px solid var(--line); color: var(--text); } :where(html[data-thema="licht"]) .code-block { background: #f8f8f8; border: 1px solid rgba(212, 42, 42, 0.3); color: var(--text); box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.105); } :where(html[data-thema="licht"]) .code-copy { color: var(--muted); background: rgba(0, 0, 0, 0.036); border: 1px solid rgba(0, 0, 0, 0.09); } :where(html[data-thema="licht"]) .code-copy:hover { color: var(--text); border-color: rgba(212, 42, 42, 0.45); } :where(html[data-thema="licht"]) .code-copy.is-done { color: #1b9d4b; border-color: rgba(34, 197, 94, 0.5); } :where(html[data-thema="licht"]) .card { 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"]) .card h2 { color: var(--accent); } :where(html[data-thema="licht"]) .card-subtitle { color: var(--muted); } :where(html[data-thema="licht"]) .forecast-section-title { color: var(--accent); } :where(html[data-thema="licht"]) .freshness-badge--overlay { background: rgba(248, 248, 248, 0.72); border-color: rgba(46, 204, 113, 0.28); } :where(html[data-thema="licht"]) .freshness-badge--overlay.is-stale { border-color: rgba(255, 165, 0, 0.35); } :where(html[data-thema="licht"]) .share-strip--overlay { background: transparent; border: 0; } :where(html[data-thema="licht"]) .share-strip--overlay .share-btn { background: transparent; border: 0; color: var(--muted); } :where(html[data-thema="licht"]) .share-strip--overlay .share-btn:hover, :where(html[data-thema="licht"]) .share-strip--overlay .share-btn:focus-visible { background: transparent; border: 0; color: var(--text); } :where(html[data-thema="licht"]) .week-stats-sub { color: var(--muted); } :where(html[data-thema="licht"]) .week-stats-slim strong { color: #229653; } :where(html[data-thema="licht"]) .week-stats-dag--goedkoop { color: #249453; background: rgba(46, 204, 113, 0.12); } :where(html[data-thema="licht"]) .week-stats-dag--duur { color: #d42a2a; background: rgba(212, 42, 42, 0.13); } :where(html[data-thema="licht"]) .forecast-details #average-price { color: var(--text); } :where(html[data-thema="licht"]) .forecast > .graph-disclaimer--note { border-top: 0; } :where(html[data-thema="licht"]) .forecast-chart-wrap { border: 1px solid rgba(0, 0, 0, 0.054); background: rgba(0, 0, 0, 0.066); } :where(html[data-thema="licht"]) .forecast-enlarge-btn { border: 1px solid rgba(212, 42, 42, 0.38); background: rgba(248, 248, 248, 0.72); color: rgba(0, 0, 0, 0.828); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.096); } :where(html[data-thema="licht"]) .forecast-enlarge-btn:hover, :where(html[data-thema="licht"]) .forecast-enlarge-btn:focus-visible { background: rgba(212, 42, 42, 0.2); border-color: rgba(212, 42, 42, 0.6); } :where(html[data-thema="licht"]) .forecast-enlarge-btn:focus-visible { outline: 2px solid rgba(212, 42, 42, 0.72); outline-offset: 2px; } :where(html[data-thema="licht"]) .forecast-chart-bg { fill: rgba(0, 0, 0, 0.024); } :where(html[data-thema="licht"]) .forecast-grid-line { stroke: rgba(212, 42, 42, 0.17); } :where(html[data-thema="licht"]) .forecast-weekend-band { fill: rgba(0, 0, 0, 0.041); } :where(html[data-thema="licht"]) .forecast-day-divider { stroke: rgba(0, 0, 0, 0.162); } :where(html[data-thema="licht"]) .forecast-axis-line, :where(html[data-thema="licht"]) .forecast-axis-tick { stroke: rgba(212, 42, 42, 0.46); } :where(html[data-thema="licht"]) .forecast-axis-label { fill: var(--muted); } :where(html[data-thema="licht"]) .forecast-chart-tooltip { border: 1px solid rgba(212, 42, 42, 0.35); background: rgba(247, 247, 247, 0.88); color: var(--muted); } :where(html[data-thema="licht"]) .forecast-chart-tooltip--active { color: var(--text); border-color: rgba(212, 42, 42, 0.7); } :where(html[data-thema="licht"]) .forecast-chart-tooltip--pinned { border-color: rgba(46, 204, 113, 0.72); box-shadow: 0 0 0 1px rgba(46, 204, 113, 0.098) inset; } :where(html[data-thema="licht"]) .forecast-window-highlight { fill: rgba(34, 150, 83, 0.16); stroke: rgba(34, 150, 83, 0.55); } :where(html[data-thema="licht"]) .forecast-window-highlight--peak { fill: rgba(212, 42, 42, 0.1); stroke: rgba(212, 42, 42, 0.75); } :where(html[data-thema="licht"]) .forecast-zero-line { stroke: rgba(0, 0, 0, 0.288); } :where(html[data-thema="licht"]) .forecast-bar { fill: rgba(212, 42, 42, 0.26); stroke: rgba(212, 42, 42, 0.36); } :where(html[data-thema="licht"]) .forecast-bar--window { fill: rgba(34, 150, 83, 0.34); stroke: rgba(34, 150, 83, 0.62); } :where(html[data-thema="licht"]) .forecast-point-min { fill: #229653; stroke: #143622; } :where(html[data-thema="licht"]) .forecast-point-max { fill: #d42a2a; stroke: #4f1111; } :where(html[data-thema="licht"]) .forecast-focus-line { stroke: rgba(0, 0, 0, 0.522); } :where(html[data-thema="licht"]) .forecast-focus-point { fill: #141414; stroke: var(--accent); } :where(html[data-thema="licht"]) .forecast-hit-area { fill: transparent; } :where(html[data-thema="licht"]) .forecast-chart-empty { fill: var(--muted); } :where(html[data-thema="licht"]) #forecast-modal-caption { color: var(--muted); } :where(html[data-thema="licht"]) .agent-flow { color: var(--text); } :where(html[data-thema="licht"]) .agent-banner { border: 1px solid rgba(212, 42, 42, 0.45); background: rgba(212, 42, 42, 0.14); color: var(--text); } :where(html[data-thema="licht"]) .agent-chart-wrap { border: 1px solid rgba(212, 42, 42, 0.24); background: rgba(0, 0, 0, 0.105); } :where(html[data-thema="licht"]) .agent-chart-bg { fill: rgba(0, 0, 0, 0.024); } :where(html[data-thema="licht"]) .agent-grid-line { stroke: rgba(212, 42, 42, 0.17); } :where(html[data-thema="licht"]) .agent-axis-line, :where(html[data-thema="licht"]) .agent-axis-tick { stroke: rgba(212, 42, 42, 0.46); } :where(html[data-thema="licht"]) .agent-axis-label { fill: var(--muted); } :where(html[data-thema="licht"]) .agent-bar { fill: rgba(212, 42, 42, 0.26); stroke: rgba(212, 42, 42, 0.36); } :where(html[data-thema="licht"]) .agent-bar--window { fill: rgba(34, 150, 83, 0.34); stroke: rgba(34, 150, 83, 0.62); } :where(html[data-thema="licht"]) .agent-chart-tooltip { border: 1px solid rgba(212, 42, 42, 0.35); background: rgba(247, 247, 247, 0.88); color: var(--muted); } :where(html[data-thema="licht"]) .agent-chart-tooltip--active { color: var(--text); border-color: rgba(212, 42, 42, 0.7); } :where(html[data-thema="licht"]) .agent-chart-tooltip--pinned { border-color: rgba(46, 204, 113, 0.72); box-shadow: 0 0 0 1px rgba(46, 204, 113, 0.098) inset; } :where(html[data-thema="licht"]) .agent-window-highlight { fill: rgba(34, 150, 83, 0.16); stroke: rgba(34, 150, 83, 0.55); } :where(html[data-thema="licht"]) .agent-zero-line { stroke: rgba(0, 0, 0, 0.288); } :where(html[data-thema="licht"]) .agent-point-min { fill: #229653; stroke: #143622; } :where(html[data-thema="licht"]) .agent-point-max { fill: #d42a2a; stroke: #4f1111; } :where(html[data-thema="licht"]) .agent-focus-line { stroke: rgba(0, 0, 0, 0.522); } :where(html[data-thema="licht"]) .agent-focus-point { fill: #141414; stroke: var(--accent); } :where(html[data-thema="licht"]) .agent-hit-area { fill: transparent; } :where(html[data-thema="licht"]) .agent-chart-empty { fill: var(--muted); } :where(html[data-thema="licht"]) .card-highlight { background: rgba(212, 42, 42, 0.08); border: 2px solid var(--line); color: var(--text); } :where(html[data-thema="licht"]) .share-strip { color: var(--muted); } :where(html[data-thema="licht"]) .share-btn { border: 1.5px solid rgba(0, 0, 0, 0.108); background: rgba(0, 0, 0, 0.036); color: var(--muted); text-decoration: none; } :where(html[data-thema="licht"]) .share-btn:hover, :where(html[data-thema="licht"]) .share-btn:focus-visible { color: var(--text); border-color: rgba(0, 0, 0, 0.252); background: rgba(0, 0, 0, 0.072); outline: none; } :where(html[data-thema="licht"]) .share-btn--whatsapp:hover, :where(html[data-thema="licht"]) .share-btn--whatsapp:focus-visible { color: #1b9c4c; border-color: rgba(37, 211, 102, 0.5); background: rgba(37, 211, 102, 0.08); } :where(html[data-thema="licht"]) .share-btn--x:hover, :where(html[data-thema="licht"]) .share-btn--x:focus-visible { color: #141414; border-color: rgba(0, 0, 0, 0.495); background: rgba(0, 0, 0, 0.09); } :where(html[data-thema="licht"]) .share-btn--whatsapp svg, :where(html[data-thema="licht"]) .share-btn--x svg { fill: currentColor; } :where(html[data-thema="licht"]) .share-btn .heading-icon { color: currentColor; } :where(html[data-thema="licht"]) .share-btn .heading-icon svg { stroke: currentColor; fill: none; } :where(html[data-thema="licht"]) .share-feedback { color: var(--accent); } :where(html[data-thema="licht"]) .agent-confidence-block { border: 1px solid rgba(212, 42, 42, 0.2); background: rgba(0, 0, 0, 0.105); } :where(html[data-thema="licht"]) .agent-confidence-block h3 { color: var(--text); } :where(html[data-thema="licht"]) .agent-confidence-list li { border: 1px solid rgba(212, 42, 42, 0.16); background: rgba(244, 244, 244, 0.5); } :where(html[data-thema="licht"]) .agent-confidence-day { color: var(--text); } :where(html[data-thema="licht"]) .agent-confidence-badge { border: 1px solid transparent; } :where(html[data-thema="licht"]) .agent-confidence-high { color: #009930; background: rgba(46, 204, 113, 0.22); border-color: rgba(46, 204, 113, 0.55); } :where(html[data-thema="licht"]) .agent-confidence-medium { color: #996200; background: rgba(241, 196, 15, 0.2); border-color: rgba(241, 196, 15, 0.46); } :where(html[data-thema="licht"]) .agent-confidence-low { color: #d42a2a; background: rgba(212, 42, 42, 0.22); border-color: rgba(212, 42, 42, 0.5); } :where(html[data-thema="licht"]) .agent-confidence-range { color: var(--muted); } :where(html[data-thema="licht"]) .agent-confidence-empty { color: var(--muted); } :where(html[data-thema="licht"]) .agent-correction-stat { border: 1px solid rgba(212, 42, 42, 0.18); background: rgba(244, 244, 244, 0.5); } :where(html[data-thema="licht"]) .agent-correction-label { color: var(--muted); } :where(html[data-thema="licht"]) .agent-correction-value { color: var(--text); } :where(html[data-thema="licht"]) .agent-correction-zero-line { stroke: rgba(0, 0, 0, 0.468); } :where(html[data-thema="licht"]) .agent-correction-day-divider { stroke: rgba(0, 0, 0, 0.162); } :where(html[data-thema="licht"]) .agent-correction-bar--up { fill: rgba(34, 150, 83, 0.36); stroke: rgba(34, 150, 83, 0.66); } :where(html[data-thema="licht"]) .agent-correction-bar--down { fill: rgba(212, 42, 42, 0.34); stroke: rgba(212, 42, 42, 0.62); } :where(html[data-thema="licht"]) .agent-correction-bar--flat { fill: rgba(0, 0, 0, 0.162); stroke: rgba(0, 0, 0, 0.36); } :where(html[data-thema="licht"]) .agent-correction-caption { color: var(--muted); } :where(html[data-thema="licht"]) .agent-monitor-stat { border: 1px solid rgba(212, 42, 42, 0.18); background: rgba(244, 244, 244, 0.5); } :where(html[data-thema="licht"]) .agent-monitor-label { color: var(--muted); } :where(html[data-thema="licht"]) .agent-monitor-value { color: var(--text); } :where(html[data-thema="licht"]) .agent-monitor-status { border: 1px solid rgba(212, 42, 42, 0.3); background: rgba(212, 42, 42, 0.08); } :where(html[data-thema="licht"]) .agent-monitor-status--agent { color: #009930; background: rgba(46, 204, 113, 0.2); border-color: rgba(46, 204, 113, 0.56); } :where(html[data-thema="licht"]) .agent-monitor-status--baseline { color: #996200; background: rgba(241, 196, 15, 0.22); border-color: rgba(241, 196, 15, 0.5); } :where(html[data-thema="licht"]) .agent-monitor-status--mixed { color: #d42a2a; background: rgba(212, 42, 42, 0.24); border-color: rgba(212, 42, 42, 0.5); } :where(html[data-thema="licht"]) .agent-monitor-status--warm { color: #323232; background: rgba(0, 0, 0, 0.18); border-color: rgba(0, 0, 0, 0.405); } :where(html[data-thema="licht"]) .agent-monitor-table-wrap { border: 1px solid rgba(212, 42, 42, 0.2); background: rgba(0, 0, 0, 0.12); } :where(html[data-thema="licht"]) .agent-monitor-table th, :where(html[data-thema="licht"]) .agent-monitor-table td { border-bottom: 1px solid rgba(212, 42, 42, 0.14); } :where(html[data-thema="licht"]) .agent-monitor-table th { color: var(--muted); background: rgba(212, 42, 42, 0.06); } :where(html[data-thema="licht"]) .agent-monitor-table tbody tr:last-child td { border-bottom: 0; } :where(html[data-thema="licht"]) .agent-monitor-winner { border: 1px solid transparent; } :where(html[data-thema="licht"]) .agent-monitor-winner--agent { color: #009930; background: rgba(46, 204, 113, 0.2); border-color: rgba(46, 204, 113, 0.52); } :where(html[data-thema="licht"]) .agent-monitor-winner--baseline { color: #996200; background: rgba(241, 196, 15, 0.2); border-color: rgba(241, 196, 15, 0.48); } :where(html[data-thema="licht"]) .agent-monitor-winner--tie { color: #141414; background: rgba(0, 0, 0, 0.108); border-color: rgba(0, 0, 0, 0.27); } :where(html[data-thema="licht"]) .agent-monitor-winner--na { color: #323232; background: rgba(0, 0, 0, 0.18); border-color: rgba(0, 0, 0, 0.405); } :where(html[data-thema="licht"]) .agent-monitor-empty { color: var(--muted); } :where(html[data-thema="licht"]) .agent-health-block { border: 1px solid rgba(212, 42, 42, 0.2); background: rgba(0, 0, 0, 0.105); } :where(html[data-thema="licht"]) .agent-health-head h3 { color: var(--text); } :where(html[data-thema="licht"]) .agent-health-badge { border: 1px solid transparent; } :where(html[data-thema="licht"]) .agent-health-badge--good { color: #009930; background: rgba(46, 204, 113, 0.2); border-color: rgba(46, 204, 113, 0.56); } :where(html[data-thema="licht"]) .agent-health-badge--warm { color: #996200; background: rgba(241, 196, 15, 0.22); border-color: rgba(241, 196, 15, 0.5); } :where(html[data-thema="licht"]) .agent-health-badge--off { color: #323232; background: rgba(0, 0, 0, 0.18); border-color: rgba(0, 0, 0, 0.405); } :where(html[data-thema="licht"]) .agent-health-badge--alert { color: #d42a2a; background: rgba(212, 42, 42, 0.24); border-color: rgba(212, 42, 42, 0.5); } :where(html[data-thema="licht"]) .agent-health-text { color: var(--text); } :where(html[data-thema="licht"]) .agent-health-meta { color: var(--muted); } :where(html[data-thema="licht"]) .agent-health-help { border-top: 1px solid rgba(212, 42, 42, 0.2); } :where(html[data-thema="licht"]) .agent-health-help summary { color: var(--accent); } :where(html[data-thema="licht"]) .agent-health-help ul { color: var(--muted); } :where(html[data-thema="licht"]) .agent-health-help code { color: var(--text); background: rgba(212, 42, 42, 0.16); border: 1px solid rgba(212, 42, 42, 0.3); } :where(html[data-thema="licht"]) .price-list { border: 1px solid rgba(212, 42, 42, 0.2); background: rgba(0, 0, 0, 0.12); } :where(html[data-thema="licht"]) .price-list li { border-bottom: 1px solid rgba(212, 42, 42, 0.15); } :where(html[data-thema="licht"]) .price-list li:last-child { border-bottom: none; } :where(html[data-thema="licht"]) .generated-at { color: var(--muted); } :where(html[data-thema="licht"]) .freshness-badge { background: rgba(46, 204, 113, 0.1); border: 1px solid rgba(46, 204, 113, 0.35); color: #229653; } :where(html[data-thema="licht"]) .freshness-badge.is-stale { background: rgba(255, 165, 0, 0.08); border-color: rgba(255, 165, 0, 0.4); color: #b86c00; } :where(html[data-thema="licht"]) .freshness-dot { background: currentColor; box-shadow: 0 0 0 0 currentColor; } :where(html[data-thema="licht"]) .window-selector-label { color: var(--muted); } :where(html[data-thema="licht"]) .window-pills { background: rgba(0, 0, 0, 0.036); border: 1.5px solid rgba(0, 0, 0, 0.072); } :where(html[data-thema="licht"]) .window-pill { background: transparent; border: 0; color: var(--muted); } :where(html[data-thema="licht"]) .window-pill:hover:not(.is-active), :where(html[data-thema="licht"]) .window-pill:focus-visible:not(.is-active) { color: var(--text); background: rgba(0, 0, 0, 0.054); outline: none; } :where(html[data-thema="licht"]) .window-pill:focus-visible { outline: 2px solid rgba(212, 42, 42, 0.55); outline-offset: 2px; } :where(html[data-thema="licht"]) .window-pill.is-active { background: var(--accent); color: #f7f7f7; box-shadow: 0 0 0 1px rgba(255, 59, 59, 0.122), 0 8px 18px rgba(255, 59, 59, 0.077); } :where(html[data-thema="licht"]) .ww-price-label { color: var(--muted); } :where(html[data-thema="licht"]) .ww-price-toggle { background: rgba(0, 0, 0, 0.036); border: 1.5px solid rgba(0, 0, 0, 0.072); } :where(html[data-thema="licht"]) .ww-price-pill { background: transparent; border: 0; color: var(--muted); } :where(html[data-thema="licht"]) .ww-price-pill:hover:not(.is-active), :where(html[data-thema="licht"]) .ww-price-pill:focus-visible:not(.is-active) { color: var(--text); background: rgba(0, 0, 0, 0.054); } :where(html[data-thema="licht"]) .ww-price-pill.is-active { background: var(--accent); color: #f7f7f7; box-shadow: 0 0 0 1px rgba(255, 59, 59, 0.122), 0 8px 18px rgba(255, 59, 59, 0.077); } :where(html[data-thema="licht"]) .ww-price-select, :where(html[data-thema="licht"]) .ww-price-custom { background: rgba(0, 0, 0, 0.045); border: 1.5px solid rgba(0, 0, 0, 0.108); color: var(--text); } :where(html[data-thema="licht"]) .ww-price-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23c5c5c5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.6rem center; } :where(html[data-thema="licht"]) .ww-price-unit { color: var(--muted); } :where(html[data-thema="licht"]) .ww-price-breakdown { color: var(--muted); } :where(html[data-thema="licht"]) .price-bars-loading { color: var(--muted); } :where(html[data-thema="licht"]) .price-bar-time { color: var(--muted); } :where(html[data-thema="licht"]) .price-bar-track { background: rgba(0, 0, 0, 0.045); } :where(html[data-thema="licht"]) .price-column--cheapest .price-bar-fill { background: linear-gradient(90deg, rgba(46, 204, 113, 0.85), #2ecc71); box-shadow: 0 0 8px rgba(46, 204, 113, 0.122); } :where(html[data-thema="licht"]) .price-column--priciest .price-bar-fill { background: linear-gradient(90deg, rgba(212, 42, 42, 0.9), #d42a2a); box-shadow: 0 0 8px rgba(255, 59, 59, 0.122); } :where(html[data-thema="licht"]) .price-bar-value { color: var(--text); } :where(html[data-thema="licht"]) .price-column--cheapest .price-bar-value { color: #229653; } :where(html[data-thema="licht"]) .price-column--priciest .price-bar-value { color: var(--accent); } :where(html[data-thema="licht"]) .graph-disclaimer { color: var(--muted); } :where(html[data-thema="licht"]) .graph-disclaimer--note { border-top: 1px solid rgba(0, 0, 0, 0.054); } :where(html[data-thema="licht"]) .graph-disclaimer--note .heading-icon { color: var(--muted); } :where(html[data-thema="licht"]) .graph-disclaimer--center { border-top: none; } :where(html[data-thema="licht"]) footer { border-top: 1px solid rgba(0, 0, 0, 0.063); background: rgba(247, 247, 247, 0.85); } :where(html[data-thema="licht"]) .brand-inline { color: var(--accent); text-decoration: none; } :where(html[data-thema="licht"]) .brand-inline:hover, :where(html[data-thema="licht"]) .brand-inline:focus-visible { color: #d42a2a; } :where(html[data-thema="licht"]) .footer-kop { color: var(--muted); } :where(html[data-thema="licht"]) .footer-kolom a { color: var(--accent); text-decoration: none; } :where(html[data-thema="licht"]) .footer-kolom a:hover, :where(html[data-thema="licht"]) .footer-kolom a:focus-visible { color: #d42a2a; } :where(html[data-thema="licht"]) .footer-onder { border-top: 1px solid rgba(0, 0, 0, 0.063); color: var(--muted); } :where(html[data-thema="licht"]) .footer-juridisch a { color: var(--muted); text-decoration: none; } :where(html[data-thema="licht"]) .footer-juridisch a:hover, :where(html[data-thema="licht"]) .footer-juridisch a:focus-visible { color: var(--accent); } :where(html[data-thema="licht"]) .labs-link { border: 1px solid rgba(0, 0, 0, 0.27); color: var(--muted); } :where(html[data-thema="licht"]) .labs-link:hover { color: var(--accent); } :where(html[data-thema="licht"]) .accuracy-card::before { background: radial-gradient(closest-side, rgba(46, 204, 113, 0.18), transparent 70%); } :where(html[data-thema="licht"]) .accuracy-subtitle { color: var(--muted); } :where(html[data-thema="licht"]) .accuracy-hero { background: linear-gradient(140deg, rgba(46, 204, 113, 0.16) 0%, rgba(46, 204, 113, 0.05) 55%, rgba(0, 0, 0, 0.018) 100%); border: 1.5px solid rgba(46, 204, 113, 0.32); } :where(html[data-thema="licht"]) .accuracy-hero:hover { border-color: rgba(46, 204, 113, 0.5); box-shadow: 0 18px 36px rgba(46, 204, 113, 0.042); } :where(html[data-thema="licht"]) .accuracy-hero-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"]) .accuracy-hero-value .unit, :where(html[data-thema="licht"]) .accuracy-side-value .unit { text-shadow: none; } :where(html[data-thema="licht"]) .accuracy-hero-label { color: var(--text); } :where(html[data-thema="licht"]) .accuracy-hero-label strong { color: #229653; } :where(html[data-thema="licht"]) .accuracy-stat-card { background: rgba(0, 0, 0, 0.023); border: 1.5px solid rgba(0, 0, 0, 0.072); } :where(html[data-thema="licht"]) .accuracy-stat-card:hover { border-color: rgba(46, 204, 113, 0.32); background: rgba(46, 204, 113, 0.06); } :where(html[data-thema="licht"]) .accuracy-side-icon { color: #229653; } :where(html[data-thema="licht"]) .accuracy-side-icon svg { stroke: currentColor; } :where(html[data-thema="licht"]) .accuracy-side-value { color: var(--text); } :where(html[data-thema="licht"]) .accuracy-side-value--groen { color: #229653; } :where(html[data-thema="licht"]) .accuracy-side-label { color: var(--muted); } :where(html[data-thema="licht"]) .accuracy-footnote { color: var(--muted); } :where(html[data-thema="licht"]) .btn--ghost { background: transparent; border-color: rgba(0, 0, 0, 0.108); color: var(--muted); } :where(html[data-thema="licht"]) .btn--ghost:hover, :where(html[data-thema="licht"]) .btn--ghost:focus-visible { background: rgba(0, 0, 0, 0.045); border-color: rgba(0, 0, 0, 0.252); color: var(--text); } :where(html[data-thema="licht"]) .promo-banner { background: linear-gradient(145deg, #0a1a4a, #071244); border: 1.5px solid rgba(0, 0, 0, 0.09); text-decoration: none; color: var(--text); } :where(html[data-thema="licht"]) .promo-banner:hover { border-color: rgba(0, 0, 0, 0.225); box-shadow: 0 12px 36px rgba(7, 18, 68, 0.175); } :where(html[data-thema="licht"]) .promo-logo { border: none; box-shadow: none; } :where(html[data-thema="licht"]) .promo-headline { color: #141414; } :where(html[data-thema="licht"]) .promo-cta { color: rgba(0, 0, 0, 0.585); } :where(html[data-thema="licht"]) .promo-cta strong { color: rgba(0, 0, 0, 0.765); } :where(html[data-thema="licht"]) .promo-close { background: none; border: none; color: rgba(0, 0, 0, 0.315); } :where(html[data-thema="licht"]) .promo-close:hover { color: rgba(0, 0, 0, 0.63); } :where(html[data-thema="licht"]) .btn, :where(html[data-thema="licht"]) .btn:visited { border: 1px solid rgba(0, 0, 0, 0.126); color: var(--text); background: rgba(0, 0, 0, 0.032); text-decoration: none; } :where(html[data-thema="licht"]) .btn:hover, :where(html[data-thema="licht"]) .btn:focus-visible { background: rgba(0, 0, 0, 0.063); border-color: rgba(0, 0, 0, 0.252); color: var(--text); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.105); } :where(html[data-thema="licht"]) .btn:active { box-shadow: none; } :where(html[data-thema="licht"]) .btn--primary, :where(html[data-thema="licht"]) .btn--primary:visited { background: var(--accent); border-color: var(--accent); color: #fafafa; } :where(html[data-thema="licht"]) .btn--primary:hover, :where(html[data-thema="licht"]) .btn--primary:focus-visible { background: #d42a2a; border-color: #d42a2a; color: #fafafa; box-shadow: 0 10px 22px rgba(255, 59, 59, 0.098); } :where(html[data-thema="licht"]) .icon-btn { border: 2px solid var(--accent); color: var(--text); } :where(html[data-thema="licht"]) .icon-btn:hover, :where(html[data-thema="licht"]) .icon-btn:focus-visible { background: var(--accent); color: #fcfcfc; } :where(html[data-thema="licht"]) .icon-btn--accent { border-color: var(--accent); color: var(--accent); background: transparent; } :where(html[data-thema="licht"]) .icon-btn--accent:hover, :where(html[data-thema="licht"]) .icon-btn--accent:focus-visible { background: rgba(212, 42, 42, 0.15); color: var(--text); } :where(html[data-thema="licht"]) .daily-hero { background: var(--bg-card); border: 2px solid var(--line); box-shadow: 0 25px 45px rgba(0, 0, 0, 0.135), var(--glow); } :where(html[data-thema="licht"]) .daily-card { background: var(--bg-card-alt); border: 2px solid var(--line); box-shadow: 0 25px 40px rgba(0, 0, 0, 0.135), var(--glow); } :where(html[data-thema="licht"]) .daily-card img { border: 2px solid var(--line); } :where(html[data-thema="licht"]) .daily-card figcaption { color: var(--muted); } :where(html[data-thema="licht"]) .lightbox { background: rgba(255, 255, 255, 0.82); } :where(html[data-thema="licht"]) .lightbox-content { background: var(--bg-card); border: 2px solid var(--line); box-shadow: 0 40px 60px rgba(0, 0, 0, 0.15), var(--glow); } :where(html[data-thema="licht"]) .lightbox-content img { border: 2px solid var(--line); } :where(html[data-thema="licht"]) #lightbox-close { background: transparent; border: none; color: var(--text); } :where(html[data-thema="licht"]) #lightbox-caption { color: var(--muted); } :where(html[data-thema="licht"]) .heading-icon { color: var(--accent); } :where(html[data-thema="licht"]) .hero-chip { border: 1px solid rgba(212, 42, 42, 0.38); background: rgba(212, 42, 42, 0.07); color: var(--text); text-decoration: none; } :where(html[data-thema="licht"]) .hero-chip:hover, :where(html[data-thema="licht"]) .hero-chip:focus-visible { border-color: rgba(212, 42, 42, 0.6); background: rgba(212, 42, 42, 0.13); } :where(html[data-thema="licht"]) .hero-now-dot { background: #2ecc71; box-shadow: 0 0 8px rgba(46, 204, 113, 0.28); } :where(html[data-thema="licht"]) .hero-chip .btn-arrow { color: var(--accent); } :where(html[data-thema="licht"]) .blog-index-item { background: linear-gradient(145deg, var(--bg-card), var(--bg-card-alt)); border: 1.5px solid var(--line); text-decoration: none; color: var(--text); } :where(html[data-thema="licht"]) .blog-index-item:hover, :where(html[data-thema="licht"]) .blog-index-item:focus-visible { border-color: rgba(212, 42, 42, 0.45); box-shadow: 0 18px 32px rgba(0, 0, 0, 0.105); } :where(html[data-thema="licht"]) .blog-icoon { fill: none; background: radial-gradient(circle closest-side, rgba(0, 0, 0, 0.068) 0 55%, transparent 65%) 0 0 / calc(100% / 12) calc(100% / 12); } :where(html[data-thema="licht"]) .blog-rss { color: var(--muted); text-decoration: none; } :where(html[data-thema="licht"]) .blog-rss:hover, :where(html[data-thema="licht"]) .blog-rss:focus-visible { color: var(--accent); } :where(html[data-thema="licht"]) .blog-label--nieuw { color: #249453; border-color: rgba(46, 204, 113, 0.45); background: rgba(46, 204, 113, 0.1); } :where(html[data-thema="licht"]) .blog-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"]) .blog-hero-intro { color: var(--text); } :where(html[data-thema="licht"]) .blog-onderwerp { border: 1.5px solid rgba(0, 0, 0, 0.09); background: rgba(0, 0, 0, 0.036); color: var(--muted); } :where(html[data-thema="licht"]) .blog-onderwerp:hover, :where(html[data-thema="licht"]) .blog-onderwerp:focus-visible { color: var(--text); background: rgba(0, 0, 0, 0.063); } :where(html[data-thema="licht"]) .blog-onderwerp:focus-visible { outline: 2px solid rgba(212, 42, 42, 0.55); outline-offset: 2px; } :where(html[data-thema="licht"]) .blog-onderwerp[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #f7f7f7; box-shadow: 0 0 0 1px rgba(255, 59, 59, 0.122), 0 8px 18px rgba(255, 59, 59, 0.077); } :where(html[data-thema="licht"]) .blog-label { border: 1px solid rgba(0, 0, 0, 0.126); color: var(--muted); } :where(html[data-thema="licht"]) .blog-index-item h2 { color: var(--accent); } :where(html[data-thema="licht"]) .blog-index-meta { color: var(--muted); } :where(html[data-thema="licht"]) .blog-index-snippet { color: var(--text); } :where(html[data-thema="licht"]) .blog-index-more { color: var(--accent); } :where(html[data-thema="licht"]) .blog-post-back a { color: var(--muted); text-decoration: none; } :where(html[data-thema="licht"]) .blog-post-back a:hover, :where(html[data-thema="licht"]) .blog-post-back a:focus-visible { color: var(--text); } :where(html[data-thema="licht"]) .blog-post-title { color: var(--accent); text-shadow: 0 0 4px rgba(0, 0, 0, 0.81), 0 0 11px rgba(255, 90, 90, 0.315), 0 0 24px rgba(255, 59, 59, 0.297), 0 0 46px rgba(255, 45, 45, 0.245), 0 0 78px rgba(255, 40, 40, 0.175); filter: drop-shadow(0 0 16px rgba(255, 59, 59, 0.193)); } :where(html[data-thema="licht"]) .blog-post-meta { color: var(--muted); } :where(html[data-thema="licht"]) .blog-post .share-strip { border-top: 1px solid rgba(0, 0, 0, 0.063); } :where(html[data-thema="licht"]) .read-also-list a { color: var(--text); text-decoration: none; } :where(html[data-thema="licht"]) .read-also-list a:hover, :where(html[data-thema="licht"]) .read-also-list a:focus-visible { color: var(--accent); } :where(html[data-thema="licht"]) .read-also-list .btn-arrow { color: var(--accent); } :where(html[data-thema="licht"]) .stekker-banner { border: 1.5px solid rgba(46, 204, 113, 0.35); background: linear-gradient( 135deg, rgba(46, 204, 113, 0.16), rgba(46, 204, 113, 0.05) 55%, rgba(0, 0, 0, 0.018) ); text-decoration: none; color: var(--text); } :where(html[data-thema="licht"]) .stekker-banner:hover, :where(html[data-thema="licht"]) .stekker-banner:focus-visible { border-color: rgba(46, 204, 113, 0.6); box-shadow: 0 16px 30px rgba(0, 0, 0, 0.105), 0 0 24px rgba(46, 204, 113, 0.042); } :where(html[data-thema="licht"]) .stekker-banner-tag { color: var(--muted); } :where(html[data-thema="licht"]) .stekker-banner-title { color: var(--text); } :where(html[data-thema="licht"]) .stekker-banner-sub { color: var(--muted); } :where(html[data-thema="licht"]) .stekker-banner-sub strong { color: #229653; } :where(html[data-thema="licht"]) .stekker-banner-cta { background: #2ecc71; color: #f8f8f8; } :where(html[data-thema="licht"]) .stekker-banner:hover .stekker-banner-cta, :where(html[data-thema="licht"]) .stekker-banner:focus-visible .stekker-banner-cta { background: #40d985; } :where(html[data-thema="licht"]) .advies-blok { border: 1.5px solid rgba(212, 42, 42, 0.28); background: radial-gradient(circle at 18% 50%, rgba(0, 0, 0, 0.063), transparent 60%), linear-gradient(135deg, rgba(212, 42, 42, 0.1), rgba(0, 0, 0, 0.018) 60%); } :where(html[data-thema="licht"]) .advies-foto { border: 0; box-shadow: none; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.135)); } :where(html[data-thema="licht"]) .advies-kop { color: var(--accent); } :where(html[data-thema="licht"]) .advies-naam { color: var(--text); } :where(html[data-thema="licht"]) .advies-waarom { color: var(--muted); } :where(html[data-thema="licht"]) .advies-redenen { color: var(--text); } :where(html[data-thema="licht"]) .advies-redenen li::before { border: solid #2ecc71; border-width: 0 2.5px 2.5px 0; } :where(html[data-thema="licht"]) .advies-knop { background: var(--accent); color: #141414; text-decoration: none; } :where(html[data-thema="licht"]) .advies-knop:visited, :where(html[data-thema="licht"]) .advies-knop:hover, :where(html[data-thema="licht"]) .advies-knop:focus, :where(html[data-thema="licht"]) .advies-knop:active { color: #141414; } :where(html[data-thema="licht"]) .advies-knop:hover, :where(html[data-thema="licht"]) .advies-knop:focus-visible { box-shadow: 0 10px 24px rgba(255, 59, 59, 0.122); background: #d42a2a; } :where(html[data-thema="licht"]) .advies-knop:active { box-shadow: none; background: #d42a2a; } :where(html[data-thema="licht"]) .advies-label { color: var(--muted); } :where(html[data-thema="licht"]) .advies-blok--compact { background: radial-gradient(circle at 9% 50%, rgba(255, 150, 70, 0.16), transparent 32%), linear-gradient(120deg, rgba(212, 42, 42, 0.12), rgba(0, 0, 0, 0.018) 55%); } :where(html[data-thema="licht"]) .advies-fotovak::before { background: radial-gradient(circle, rgba(255, 190, 120, 0.42), rgba(212, 42, 42, 0.18) 42%, transparent 68%); } :where(html[data-thema="licht"]) .advies-koop { border-left: 1px solid rgba(0, 0, 0, 0.09); } :where(html[data-thema="licht"]) .advies-korting { background: rgba(212, 42, 42, 0.16); border: 1px solid rgba(212, 42, 42, 0.45); color: #d42a2a; } :where(html[data-thema="licht"]) .advies-vanaf { color: var(--muted); } :where(html[data-thema="licht"]) .advies-bedrag { color: var(--text); } @media (max-width: 640px) { :where(html[data-thema="licht"]) .advies-koop { border-left: 0; border-top: 1px solid rgba(0, 0, 0, 0.09); } :where(html[data-thema="licht"]) .advies-vanaf { color: var(--text); } } :where(html[data-thema="licht"]) .ere-calc { border: 1px solid rgba(0, 0, 0, 0.09); background: var(--bg-card-alt); } :where(html[data-thema="licht"]) .ere-calc-velden label { color: var(--muted); } :where(html[data-thema="licht"]) .ere-calc-velden input { border: 1px solid rgba(0, 0, 0, 0.126); background: rgba(0, 0, 0, 0.036); color: var(--text); } :where(html[data-thema="licht"]) .ere-calc-velden input:focus-visible { outline: 2px solid rgba(212, 42, 42, 0.55); outline-offset: 1px; } :where(html[data-thema="licht"]) .ere-calc-uitkomst { border-top: 1px solid rgba(0, 0, 0, 0.072); } :where(html[data-thema="licht"]) .ere-calc-label, :where(html[data-thema="licht"]) .ere-calc-detail { color: var(--muted); } :where(html[data-thema="licht"]) .ere-calc-bedrag { color: #229653; } :where(html[data-thema="licht"]) .ere-calc-per { color: var(--muted); } :where(html[data-thema="licht"]) .ere-calc-cta, :where(html[data-thema="licht"]) .ere-calc-cta:visited { background: #2ecc71; color: #f8f8f8; text-decoration: none; } :where(html[data-thema="licht"]) .ere-calc-cta:hover, :where(html[data-thema="licht"]) .ere-calc-cta:focus-visible { background: #40d985; } :where(html[data-thema="licht"]) .ere-calc-voetnoot { color: var(--muted); } :where(html[data-thema="licht"]) .stekker-ere-note { color: var(--muted); } :where(html[data-thema="licht"]) .stekker-ere-note a { color: var(--accent); } :where(html[data-thema="licht"]) .recent-posts-all { color: var(--accent); text-decoration: none; } :where(html[data-thema="licht"]) .recent-posts-list li { border-top: 1px solid rgba(0, 0, 0, 0.063); } :where(html[data-thema="licht"]) .recent-posts-list li:first-child { border-top: 0; } :where(html[data-thema="licht"]) .recent-posts-list a { text-decoration: none; } :where(html[data-thema="licht"]) .recent-posts-list a:hover, :where(html[data-thema="licht"]) .recent-posts-list a:focus-visible { background: rgba(0, 0, 0, 0.027); } :where(html[data-thema="licht"]) .recent-posts-title { color: var(--text); } :where(html[data-thema="licht"]) .recent-posts-list a:hover .recent-posts-title, :where(html[data-thema="licht"]) .recent-posts-list a:focus-visible .recent-posts-title { color: var(--accent); } :where(html[data-thema="licht"]) .recent-posts-meta { color: var(--muted); } :where(html[data-thema="licht"]) .records-note { color: var(--muted); } :where(html[data-thema="licht"]) .record-item { border: 1px solid transparent; text-decoration: none; } :where(html[data-thema="licht"]) .record-item--high .record-ctx { color: #d42a2a; } :where(html[data-thema="licht"]) .record-item--low .record-ctx { color: #209758; } :where(html[data-thema="licht"]) .record-item--high:hover, :where(html[data-thema="licht"]) .record-item--high:focus-visible { border-color: rgba(212, 42, 42, 0.75); box-shadow: 0 0 22px rgba(255, 59, 59, 0.077); } :where(html[data-thema="licht"]) .record-item--low:hover, :where(html[data-thema="licht"]) .record-item--low:focus-visible { border-color: rgba(46, 204, 113, 0.75); box-shadow: 0 0 22px rgba(46, 204, 113, 0.077); } :where(html[data-thema="licht"]) .record-item--high { background: rgba(212, 42, 42, 0.07); border-color: rgba(212, 42, 42, 0.22); } :where(html[data-thema="licht"]) .record-item--low { background: rgba(46, 204, 113, 0.07); border-color: rgba(46, 204, 113, 0.22); } :where(html[data-thema="licht"]) .record-item--high:hover, :where(html[data-thema="licht"]) .record-item--high:focus-visible { border-color: rgba(212, 42, 42, 0.65); box-shadow: 0 0 24px rgba(255, 59, 59, 0.063); } :where(html[data-thema="licht"]) .record-item--low:hover, :where(html[data-thema="licht"]) .record-item--low:focus-visible { border-color: rgba(46, 204, 113, 0.65); box-shadow: 0 0 24px rgba(46, 204, 113, 0.063); } :where(html[data-thema="licht"]) .record-label { color: var(--muted); } :where(html[data-thema="licht"]) .record-item--high .record-value { color: #d42a2a; text-shadow: 0 0 14px rgba(255, 59, 59, 0.122); } :where(html[data-thema="licht"]) .record-item--low .record-value { color: #229653; text-shadow: 0 0 14px rgba(46, 204, 113, 0.122); } :where(html[data-thema="licht"]) .record-unit { color: var(--muted); } :where(html[data-thema="licht"]) .record-when { color: var(--muted); } :where(html[data-thema="licht"]) .blog-figure figcaption { color: var(--muted); } :where(html[data-thema="licht"]) .chart-tooltip { background: rgba(248, 248, 248, 0.94); border: 1px solid rgba(212, 42, 42, 0.45); color: var(--text); } :where(html[data-thema="licht"]) .blog-data-table summary { color: var(--accent); } :where(html[data-thema="licht"]) .blog-data-table th, :where(html[data-thema="licht"]) .blog-data-table td { border-bottom: 1px solid rgba(0, 0, 0, 0.072); } :where(html[data-thema="licht"]) .blog-data-table th { color: var(--muted); } :where(html[data-thema="licht"]) .field-table th, :where(html[data-thema="licht"]) .field-table td { border-bottom: 1px solid rgba(0, 0, 0, 0.072); } :where(html[data-thema="licht"]) .field-table th { color: var(--muted); } :where(html[data-thema="licht"]) .field-table tbody tr:hover { background: rgba(0, 0, 0, 0.023); } :where(html[data-thema="licht"]) .endpoint-tag { color: var(--muted); border: 1px solid var(--line); } :where(html[data-thema="licht"]) .card-footnote { color: var(--muted); } :where(html[data-thema="licht"]) .api-usp { color: var(--accent); } :where(html[data-thema="licht"]) .api-route { border: 1px solid rgba(212, 42, 42, 0.22); background: rgba(212, 42, 42, 0.07); } :where(html[data-thema="licht"]) .api-route h3 { color: var(--accent); } @media (prefers-reduced-motion: reduce) { :where(html[data-thema="licht"]) .btn[data-spark] svg.spark-lit { stroke: currentColor; filter: none; } } :where(html[data-thema="licht"]) .usecase { border: 1px solid rgba(212, 42, 42, 0.35); background: var(--bg-card-alt); } :where(html[data-thema="licht"]) .usecase[open] { border-color: var(--accent); box-shadow: 0 0 18px rgba(255, 59, 59, 0.049); } :where(html[data-thema="licht"]) .usecase > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } :where(html[data-thema="licht"]) .usecase-nummer { background: rgba(212, 42, 42, 0.16); color: var(--accent); } :where(html[data-thema="licht"]) .usecase-sub { color: var(--muted); } :where(html[data-thema="licht"]) .usecase-pijl { color: var(--accent); } :where(html[data-thema="licht"]) .usecase-body { border-top: 1px solid rgba(0, 0, 0, 0.063); } :where(html[data-thema="licht"]) .usecase-stappen > li::before { border: 1px solid rgba(212, 42, 42, 0.5); color: var(--accent); } :where(html[data-thema="licht"]) .code-fold > summary { border: 1px solid rgba(212, 42, 42, 0.35); color: var(--accent); } :where(html[data-thema="licht"]) .code-fold > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } :root:where([data-thema="licht"]) { --weer-zon: #b88500; --weer-wolk: #3a3a3a; --weer-wind: #0069b8; --weer-groen: #229653; --weer-oranje: #b87700; } :where(html[data-thema="licht"]) .wi > .led { fill: none; --led-uit: rgba(0, 0, 0, 0.068); } :where(html[data-thema="licht"]) .led-weer { background: radial-gradient(circle closest-side, var(--led-uit) 0 55%, transparent 65%) 0 0 / calc(100% / 16) calc(100% / 16); } :where(html[data-thema="licht"]) .led-molen { background: radial-gradient(circle closest-side, var(--led-uit) 0 55%, transparent 65%) 0 0 / calc(100% / 13) calc(100% / 16); } :where(html[data-thema="licht"]) .led-groen { stroke: var(--weer-groen); filter: drop-shadow(0 0 1.4px rgba(46, 204, 113, 0.315)); } :where(html[data-thema="licht"]) .led-wit { stroke: #141414; filter: drop-shadow(0 0 1.1px rgba(0, 0, 0, 0.675)); } :where(html[data-thema="licht"]) .led-rood { stroke: var(--accent); filter: drop-shadow(0 0 1.6px rgba(255, 59, 59, 0.332)); } :where(html[data-thema="licht"]) .led-dim { stroke: #787878; } :where(html[data-thema="licht"]) .led-mast { stroke: #9d9d9d; } :where(html[data-thema="licht"]) .led-molen--stil .led-wiek { stroke: var(--accent); filter: drop-shadow(0 0 1.6px rgba(255, 59, 59, 0.332)); } :where(html[data-thema="licht"]) .led-molen--zacht .led-wiek { stroke: #3a3a3a; } :where(html[data-thema="licht"]) .led-molen--redelijk .led-wiek, :where(html[data-thema="licht"]) .led-molen--volop .led-wiek { stroke: var(--weer-groen); filter: drop-shadow(0 0 1.4px rgba(46, 204, 113, 0.315)); } :where(html[data-thema="licht"]) .wi-risico { fill: none; stroke: currentColor; } :where(html[data-thema="licht"]) .wi-risico .kans-naaf { fill: currentColor; stroke: none; } :where(html[data-thema="licht"]) .risico-pil { border: 1px solid transparent; } :where(html[data-thema="licht"]) .risico-pil--klein { color: #249453; background: rgba(46, 204, 113, 0.1); border-color: rgba(46, 204, 113, 0.28); } :where(html[data-thema="licht"]) .risico-pil--middel { color: #b87700; background: rgba(255, 176, 32, 0.1); border-color: rgba(255, 176, 32, 0.3); } :where(html[data-thema="licht"]) .risico-pil--groot { color: #d42a2a; background: rgba(212, 42, 42, 0.12); border-color: rgba(212, 42, 42, 0.4); } :where(html[data-thema="licht"]) .risico-stip { background: #8b8b8b; } :where(html[data-thema="licht"]) .risico--klein .risico-stip, :where(html[data-thema="licht"]) .risico-stip--klein { background: var(--weer-groen); } :where(html[data-thema="licht"]) .risico--middel .risico-stip, :where(html[data-thema="licht"]) .risico-stip--middel { background: var(--weer-oranje); } :where(html[data-thema="licht"]) .risico--groot .risico-stip, :where(html[data-thema="licht"]) .risico-stip--groot { background: var(--accent); } :where(html[data-thema="licht"]) .spark-blok { fill: rgba(34, 150, 83, 0.13); stroke: rgba(34, 150, 83, 0.45); } :where(html[data-thema="licht"]) .spark-vlak { fill: rgba(0, 0, 0, 0.041); } :where(html[data-thema="licht"]) .spark-lijn { fill: none; stroke: rgba(0, 0, 0, 0.675); } :where(html[data-thema="licht"]) .spark-piek { fill: var(--accent); } :where(html[data-thema="licht"]) .spark-nul { stroke: rgba(0, 0, 0, 0.225); } :where(html[data-thema="licht"]) .spark-as { fill: var(--muted); } :where(html[data-thema="licht"]) .weer-strook, :where(html[data-thema="licht"]) .weer-strook:visited { border: 2px solid var(--line); background: linear-gradient(145deg, var(--bg-card), var(--bg-card-alt)); box-shadow: 0 25px 45px rgba(0, 0, 0, 0.135), var(--glow); color: var(--text); text-decoration: none; } :where(html[data-thema="licht"]) .weer-strook:hover, :where(html[data-thema="licht"]) .weer-strook:focus-visible { box-shadow: 0 25px 45px rgba(0, 0, 0, 0.135), 0 0 26px rgba(255, 59, 59, 0.158), 0 0 52px rgba(255, 59, 59, 0.084); } :where(html[data-thema="licht"]) .weer-strook-label { color: var(--accent); } :where(html[data-thema="licht"]) .weer-strook-dag { background: rgba(0, 0, 0, 0.045); color: var(--muted); } :where(html[data-thema="licht"]) .weer-strook-cta { color: var(--accent); } :where(html[data-thema="licht"]) .model-icoon { background: rgba(212, 42, 42, 0.1); border: 1px solid rgba(212, 42, 42, 0.38); color: var(--accent); box-shadow: 0 0 16px rgba(255, 59, 59, 0.042); } :where(html[data-thema="licht"]) .model-iconen strong { color: var(--text); } :where(html[data-thema="licht"]) .model-iconen small { color: var(--muted); } :where(html[data-thema="licht"]) .agenda-knop { border: 1px solid rgba(0, 0, 0, 0.126); background: rgba(0, 0, 0, 0.036); color: var(--text); } :where(html[data-thema="licht"]) .agenda-knop:hover, :where(html[data-thema="licht"]) .agenda-knop:focus-visible { border-color: rgba(212, 42, 42, 0.7); } :where(html[data-thema="licht"]) .agenda-knop [data-lucide], :where(html[data-thema="licht"]) .agenda-knop svg { color: var(--accent); } :where(html[data-thema="licht"]) .agenda-knop small { color: var(--muted); } :where(html[data-thema="licht"]) .home-agenda { border-color: rgba(212, 42, 42, 0.6); } :where(html[data-thema="licht"]) .home-agenda-klein { color: var(--muted); } :where(html[data-thema="licht"]) .home-agenda-klein a { color: var(--accent); } :where(html[data-thema="licht"]) .agenda-tip a { color: var(--accent); text-decoration: none; } :where(html[data-thema="licht"]) .agenda-tip a:hover { text-decoration: underline; } /* ============================================================ Lichte modus, met de hand (scripts/licht_handwerk.css). Komt onderaan web/licht/styles.css, na de omgerekende regels. Wit met grijs en zwart, en rood als accent (variant A, nov 2026). ============================================================ */ /* ---- Het lampje in de header, in beide modi ---------------------------- Staat hier en niet in styles.css, zodat de donkere stylesheets onaangeroerd blijven. Uit (grijs) in de donkere modus, aan (geel met een rode gloeidraad) in de lichte. Stil, zonder animatie, net als de andere LED-icoontjes. */ .header-brand { margin-right: auto; } .thema-knop { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; margin-right: -0.4rem; padding: 0; border: 0; border-radius: 8px; background: transparent; cursor: pointer; transition: background 0.18s ease; } .thema-knop:hover, .thema-knop:focus-visible { background: rgba(255, 255, 255, 0.06); } .led-lamp { width: 26px; height: 26px; overflow: visible; fill: none; stroke-width: 2.6; stroke-linecap: round; } .led-lamp .lamp-glas { stroke: #8d96a3; } .led-lamp .lamp-draad, .led-lamp .lamp-voet { stroke: #59616c; } .led-lamp .lamp-straal { stroke: transparent; } html[data-thema="licht"] .thema-knop:hover, html[data-thema="licht"] .thema-knop:focus-visible { background: rgba(0, 0, 0, 0.05); } html[data-thema="licht"] .led-lamp .lamp-glas, html[data-thema="licht"] .led-lamp .lamp-straal { stroke: #e2a000; filter: drop-shadow(0 0 1.2px rgba(226, 160, 0, 0.85)); } html[data-thema="licht"] .led-lamp .lamp-draad { stroke: var(--accent); filter: drop-shadow(0 0 1.2px rgba(212, 42, 42, 0.8)); } html[data-thema="licht"] .led-lamp .lamp-voet { stroke: #4a4a4a; } /* Bij een klik gloeit het lampje op: eerst de draad, dan het glas, dan de stralen. Bij uit gaat het in omgekeerde volgorde. Eenmalig, geen herhaling. */ .led-lamp path { transition: stroke 0.35s ease, filter 0.35s ease; } html[data-thema="licht"] .led-lamp .lamp-glas { transition-delay: 0.15s; } html[data-thema="licht"] .led-lamp .lamp-straal { transition-delay: 0.4s; } html:not([data-thema="licht"]) .led-lamp .lamp-draad { transition-delay: 0.3s; } html:not([data-thema="licht"]) .led-lamp .lamp-glas { transition-delay: 0.15s; } /* ---- Het licht spreidt zich vanuit het lampje -------------------------------- mobile-header.js zet --licht-x, --licht-y (midden van het lampje) en --licht-straal (afstand tot de verste hoek), en wisselt binnen document.startViewTransition(). Aan: de lichte pagina verschijnt in een cirkel met een zachte rand die groeit. Uit: de lichte pagina krimpt terug in het lampje. */ @property --licht-r { syntax: ""; inherits: false; initial-value: 0px; } html.licht-gaat-aan::view-transition-old(root), html.licht-gaat-aan::view-transition-new(root), html.licht-gaat-uit::view-transition-old(root), html.licht-gaat-uit::view-transition-new(root) { animation: none; mix-blend-mode: normal; } /* In beide richtingen ligt de OUDE pagina bovenop, met de nieuwe er onbeweeglijk onder. Aan: de donkere pagina krijgt een gat dat vanuit het lampje groeit. Uit: de lichte pagina krimpt terug in het lampje. Safari tekende het eerste beeldje van de overgang zonder masker. Lag de witte pagina bovenop, dan flitste die even. Nu is dat eerste beeldje gewoon de oude pagina. De terugvalwaarde in var(--licht-r, ...) is om dezelfde reden: aan begint dicht (-140px), uit begint vol. */ html.licht-gaat-aan::view-transition-old(root), html.licht-gaat-uit::view-transition-old(root) { z-index: 1; } html.licht-gaat-aan::view-transition-old(root) { -webkit-mask-image: radial-gradient(circle at var(--licht-x) var(--licht-y), transparent var(--licht-r, -140px), #000 calc(var(--licht-r, -140px) + 140px)); mask-image: radial-gradient(circle at var(--licht-x) var(--licht-y), transparent var(--licht-r, -140px), #000 calc(var(--licht-r, -140px) + 140px)); animation: licht-spreidt 1.3s cubic-bezier(0.45, 0, 0.2, 1) both; } html.licht-gaat-uit::view-transition-old(root) { -webkit-mask-image: radial-gradient(circle at var(--licht-x) var(--licht-y), #000 calc(var(--licht-r, calc(var(--licht-straal) + 160px)) - 140px), transparent var(--licht-r, calc(var(--licht-straal) + 160px))); mask-image: radial-gradient(circle at var(--licht-x) var(--licht-y), #000 calc(var(--licht-r, calc(var(--licht-straal) + 160px)) - 140px), transparent var(--licht-r, calc(var(--licht-straal) + 160px))); animation: licht-dooft 0.9s cubic-bezier(0.5, 0, 0.75, 0) both; } @keyframes licht-spreidt { from { --licht-r: -140px; } to { --licht-r: var(--licht-straal); } } @keyframes licht-dooft { from { --licht-r: calc(var(--licht-straal) + 160px); } to { --licht-r: 0px; } } @media (prefers-reduced-motion: reduce) { .led-lamp path { transition: none; } } /* ---- Palet ---------------------------------------------------------------- */ html[data-thema="licht"] { color-scheme: light; --bg: #ffffff; --bg-hero: #ffffff; --bg-card: #f7f7f7; --bg-card-alt: #f2f2f2; --text: #161616; --muted: #5c5c5c; --accent: #d42a2a; --line: rgba(212, 42, 42, 0.22); --glow: none; /* Eigen tokens voor de lichte modus */ --licht-rand: rgba(212, 42, 42, 0.2); --licht-rand-zacht: #e8e8e8; --licht-schaduw: 0 1px 2px rgba(17, 17, 17, 0.04), 0 4px 14px rgba(17, 17, 17, 0.04); --weer-groen: #1f9a55; } html[data-thema="licht"] body { background: var(--bg); } html[data-thema="licht"] ::selection { background: rgba(212, 42, 42, 0.16); } /* ---- Header ---------------------------------------------------------------- */ html[data-thema="licht"] header { background: rgba(255, 255, 255, 0.86); border-bottom: 1px solid var(--licht-rand-zacht); } html[data-thema="licht"] .header-mobile-nav { background: #ffffff; border-bottom: 1px solid var(--licht-rand-zacht); box-shadow: 0 12px 24px rgba(17, 17, 17, 0.06); } /* ---- Footer ---------------------------------------------------------------- */ html[data-thema="licht"] footer { background: #f6f6f6; border-top: 1px solid var(--licht-rand-zacht); -webkit-backdrop-filter: none; backdrop-filter: none; } html[data-thema="licht"] .footer-kop { color: #8a8a8a; } html[data-thema="licht"] .footer-kolom a { color: #262626; } html[data-thema="licht"] .footer-kolom a:hover, html[data-thema="licht"] .footer-kolom a:focus-visible { color: var(--accent); } html[data-thema="licht"] .footer-onder { border-top-color: #e4e4e4; color: #6b6b6b; } html[data-thema="licht"] .footer-juridisch a { color: #6b6b6b; } html[data-thema="licht"] .footer-juridisch a:hover, html[data-thema="licht"] .footer-juridisch a:focus-visible { color: var(--accent); } /* ---- Domora-banner: blijft donkerblauw, tekst wit ------------------------- */ html[data-thema="licht"] .promo-banner { background: linear-gradient(145deg, #0a1a4a, #071244); border-color: transparent; box-shadow: 0 10px 28px rgba(7, 18, 68, 0.18); color: #ffffff; } html[data-thema="licht"] .promo-banner:hover { border-color: rgba(255, 255, 255, 0.25); box-shadow: 0 14px 36px rgba(7, 18, 68, 0.28); } html[data-thema="licht"] .promo-headline { color: #ffffff; } html[data-thema="licht"] .promo-cta { color: rgba(255, 255, 255, 0.72); } html[data-thema="licht"] .promo-cta strong { color: #ffffff; } html[data-thema="licht"] .promo-close { color: rgba(255, 255, 255, 0.45); } html[data-thema="licht"] .promo-close:hover { color: rgba(255, 255, 255, 0.8); } /* ---- Koppen: geen gloed op wit ------------------------------------------- */ html[data-thema="licht"] *, html[data-thema="licht"] *::before, html[data-thema="licht"] *::after { /* Gloed rond letters is op wit vooral een vlek. */ text-shadow: none !important; } html[data-thema="licht"] :is(h1, h2, h3, .hero-title, .page-title, .header-brand), html[data-thema="licht"] :is(h1, h2, .hero-title, .page-title) * { /* !important, omdat de titelanimaties (neon-glitch en de h1-anim-varianten) zelf een gloed zetten, en een animatie wint van een gewone regel. De beweging blijft. */ text-shadow: none !important; filter: none !important; } /* neon-surge laat de titel op desktop kort wit oplichten. Op wit verdwijnt hij dan even. */ html[data-thema="licht"] :is(.hero-title, .page-title) { color: var(--accent) !important; } /* ---- Kaarten: één stijl voor alle hoofdvakken ---------------------------- Lichtgrijs vlak, dunne rode rand, nauwelijks schaduw, ronding 20px. De vakken daarbinnen (grafieken, cijfers, lijsten) zijn wit met een grijze rand, zodat er twee lagen zijn in plaats van tien soorten grijs. */ html[data-thema="licht"] :is(.card, .weer-strook, .advies-blok, .vandaag-now-card, .vandaag-cheap-card, .gas-kaart, .daily-card, .weer-kaart, .api-bewijs-tegel, .stekker-banner, .accuracy-hero) { background: var(--bg-card); border: 1px solid var(--licht-rand); border-radius: 20px; box-shadow: var(--licht-schaduw); } /* De openingskaart en het advies krijgen een zweem rood linksboven. */ html[data-thema="licht"] :is(.card.hero, .advies-blok) { background: radial-gradient(120% 90% at 0% 0%, rgba(212, 42, 42, 0.045), transparent 55%), var(--bg-card); } /* Uitgelicht (agenda op de homepage, agendapagina): rand iets steviger. */ html[data-thema="licht"] :is(.home-agenda, .agenda-kaart, .card-highlight, .daily-card--today) { border-color: rgba(212, 42, 42, 0.45); } /* Goedkoop en duur blijven herkenbaar aan een lichte groene of rode tint. */ html[data-thema="licht"] :is(.vandaag-now-card--cheap, .accuracy-hero, .stekker-banner, .api-krijg-tegel, .api-prijs-kaart) { background: linear-gradient(140deg, rgba(31, 154, 85, 0.1), rgba(31, 154, 85, 0.03)), #ffffff; border-color: rgba(31, 154, 85, 0.32); } html[data-thema="licht"] .vandaag-now-card--peak { background: linear-gradient(140deg, rgba(212, 42, 42, 0.1), rgba(212, 42, 42, 0.03)), #ffffff; border-color: rgba(212, 42, 42, 0.32); } /* Vakken binnen een kaart: wit met een grijze rand. */ html[data-thema="licht"] :is(.forecast-chart-wrap, .vandaag-chart-wrap, .daily-card-chart-wrap, .daily-stat, .share-strip, .price-list, .code-block, .forecast-tip) { background: #ffffff; border: 1px solid var(--licht-rand-zacht); box-shadow: none; } html[data-thema="licht"] .daily-stat--window { background: #f3faf6; border-color: rgba(31, 154, 85, 0.3); } html[data-thema="licht"] :is(.record-item--high, .api-route) { background: #fdf4f4; border-color: rgba(212, 42, 42, 0.2); } html[data-thema="licht"] .record-item--low { background: #f3faf6; border-color: rgba(31, 154, 85, 0.25); } /* Grafieken: het plotvlak wit, de weekendbanden een tikje grijs. */ html[data-thema="licht"] :is(.forecast-chart-bg, .agent-chart-bg) { fill: transparent; } html[data-thema="licht"] .forecast-weekend-band { fill: rgba(0, 0, 0, 0.035); } /* ---- Titelanimaties --------------------------------------------------------- Op desktop krijgt elke titel een neon-animatie (flikkeren, glitch, stroomstoot, opgloeien, letters die aanslaan). Zonder gloed op wit lijkt dat op haperende tekst. In de lichte modus schuift de titel daarom rustig omhoog in beeld. Mobiel blijft hij stil, net als in de donkere modus. */ html[data-thema="licht"] :is(.hero-title, .page-title, .blog-post-title), html[data-thema="licht"] :is(.hero-title, .page-title, .blog-post-title) .neon-ltr { animation: none !important; } @media (min-width: 961px) and (prefers-reduced-motion: no-preference) { html[data-thema="licht"] :is(.h1-anim-b, .h1-anim-c, .h1-anim-d, .h1-anim-e, .h1-anim-f) { animation: licht-titel-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both !important; } } @keyframes licht-titel-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* ---- /vandaag: de goedkope prijs met een gouden glimlijn ------------------- Donker is het witte tekst met een gele band. Op wit wordt het donkere tekst met een okergele band. Alleen background-image, zodat background-clip: text blijft. */ html[data-thema="licht"] .vandaag-now-card--cheap .vandaag-now-price { background-image: linear-gradient(180deg, #161616 0%, #161616 38%, #c98a00 50%, #161616 62%, #161616 100%); } /* ---- EV-laadplanner: de batterij --------------------------------------------- De groene cellen werden bijna wit, waardoor het laden alleen nog vaag knipperde. */ html[data-thema="licht"] .battery-shell { border-color: rgba(47, 120, 70, 0.35); background: linear-gradient(115deg, rgba(255, 255, 255, 0.9), rgba(226, 242, 230, 0.55) 25%, rgba(198, 224, 204, 0.5) 75%, rgba(255, 255, 255, 0.92)); box-shadow: inset 0 0 18px rgba(46, 160, 90, 0.12), 9px 3px 0 -1px rgba(60, 110, 70, 0.22), 10px 3px 0 rgba(80, 140, 90, 0.28), 16px 12px 40px rgba(0, 0, 0, 0.12); } html[data-thema="licht"] .battery-cap { border-color: rgba(60, 100, 70, 0.35); background: linear-gradient(110deg, #8aa38d, #cfdccb 40%, #7d927f); box-shadow: 4px -2px 0 rgba(90, 120, 95, 0.3); } html[data-thema="licht"] .battery-cells i { border-color: rgba(30, 110, 60, 0.4); background: linear-gradient(95deg, #2f8f52, #5cc47f 48%, #7fd69b 60%, #3a9e5f); box-shadow: 0 0 10px rgba(46, 170, 90, 0.25), inset 0 1px 3px rgba(255, 255, 255, 0.5); } html[data-thema="licht"] .battery-mark svg { fill: #f2b600; stroke: #c98f00; filter: drop-shadow(0 2px 6px rgba(120, 90, 0, 0.35)); }