/* PV-Verlauf, Ladestatistik und Übersicht-Layout */
.history-card{margin-top:16px;margin-bottom:24px}
.history-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}
.history-head h2{font-size:17px}
.history-head .sub{margin:3px 0 0}
.history-controls{display:flex;gap:10px;flex-wrap:wrap}
.history-controls label{display:grid;gap:5px;font-size:12px;color:var(--muted);font-weight:520}
.history-controls select,.history-controls input{min-height:38px!important;padding-top:7px!important;padding-bottom:7px!important;font-size:14px}
.chart-legend{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 14px}
.chart-legend label{position:relative;display:inline-flex;gap:7px;align-items:center;padding:6px 12px 6px 10px;border-radius:999px;border:1px solid var(--line-strong);background:var(--surface-2);font-size:12.5px;font-weight:540;color:var(--text);cursor:pointer;user-select:none;transition:opacity .15s,background-color .15s}
.chart-legend input{position:absolute;opacity:0;pointer-events:none;margin:0}
.chart-legend label:has(input:not(:checked)){opacity:.48;background:transparent;border-style:dashed}
.chart-legend label:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.history-plot{width:100%;display:block;touch-action:none;user-select:none;-webkit-user-select:none}
.history-plot text{font-size:14px;fill:var(--muted);font-variant-numeric:tabular-nums}
.chart-grid{stroke:var(--line);stroke-width:1;opacity:.75}
.chart-base{stroke:var(--line-strong);stroke-width:1.2}
.chart-line{filter:none}
.chart-soc{filter:none}
.chart-bar{transition:opacity .2s}
.chart-cursor{stroke:var(--text-2);stroke-width:1.2;stroke-dasharray:4 4}
.chart-readout{min-height:60px;display:flex;align-items:center;flex-wrap:wrap;gap:8px 18px;padding:12px 16px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md,14px);font-size:13px;font-variant-numeric:tabular-nums}
.chart-readout span{display:flex;gap:7px;align-items:center}
.chart-position{width:100%;accent-color:var(--btn-on);margin:12px 0}
.history-totals{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;margin-top:16px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-md,14px);overflow:hidden}
.history-totals div{display:grid;gap:4px;padding:14px 16px;background:var(--surface)}
.history-totals span,.history-totals small{color:var(--muted);font-size:12px}
.history-totals strong{font-family:var(--font-display);font-size:20px;font-weight:620;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.chart-zoom-controls{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:10px 0}
.chart-zoom-controls button{padding:6px 12px;min-height:34px;font-size:13px}
.chart-view-label{font-size:12px;color:var(--muted);margin-left:auto}
.chart-reveal{animation:pv-reveal 2s cubic-bezier(.45,.05,.2,1) both}
@keyframes pv-reveal{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.history-head,.history-controls,.history-controls label{min-width:0;max-width:100%}
.history-controls input,.history-controls select{box-sizing:border-box;min-width:0;width:100%;max-width:100%}
.history-controls input[type=date],.history-controls input[type=month]{appearance:none;-webkit-appearance:none;min-inline-size:0;max-inline-size:100%;font-size:16px}
.history-controls input::-webkit-date-and-time-value{text-align:left;min-width:0}
@media(max-width:760px){.history-head{flex-direction:column}.history-controls{width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}.history-controls label{width:100%}.history-controls input,.history-controls select{padding:8px 8px!important;font-size:16px!important}.chart-legend{gap:6px}.chart-readout{font-size:12px}.history-totals{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Übersicht: auf iPad quer und 16:9 ohne Scrollen */
@media(min-width:900px) and (orientation:landscape){
 .overview-page{max-width:none;padding:14px 24px 12px}
 .overview-page .title-row{margin-bottom:10px}
 .overview-page h1{font-size:22px}
 .overview-page .page-sub{display:none}
 .overview-page .energy-flow{height:calc(100dvh - 148px);min-height:390px;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:30px minmax(0,1fr) auto auto;padding:14px 18px;gap:4px 18px}
 .overview-page .flow-heading{grid-column:1}
 .overview-page .flow-diagram{grid-column:1;grid-row:2;height:100%;width:100%;max-width:none;margin:0}
 .overview-page .flow-capacity{grid-column:1;grid-row:3;justify-self:center;padding:6px 14px;margin:0;font-size:12px}
 .overview-page .flow-note{display:none}
 .overview-page .month-demand{grid-row:4;margin-top:6px}
}
@media(min-width:900px) and (max-height:700px) and (orientation:landscape){.overview-page .energy-flow{min-height:280px;height:calc(100dvh - 128px)}.overview-page .title-row{margin-bottom:6px}.topbar{padding-top:8px;padding-bottom:8px}}

/* Ladestatistik */
.charging-history{display:grid;gap:16px;margin-top:16px;min-width:0}
.charging-history>.card,.charge-chart-pair>.card{margin:0;min-width:0}
.charging-history .history-controls{margin:0 0 14px}
.charging-bars{display:block;width:100%;height:auto;min-height:180px}
.charging-bars text,.charge-ring text{fill:var(--muted);font-size:14px;font-variant-numeric:tabular-nums}
.charge-day-hit{cursor:pointer}
.charge-day-hit:hover,.charge-day-hit:focus{fill:var(--muted);fill-opacity:.12;outline:none}
.charge-chart-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.charge-ring{display:block;width:min(100%,320px);margin:8px auto 0}
.charge-ring .charge-ring-total{font-size:30px;font-weight:620;fill:var(--text,currentColor);letter-spacing:-.5px}
.charge-empty-ring{stroke:var(--line)}
.charge-chart-legend{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.charge-chart-legend li{display:flex;align-items:center;gap:10px;min-width:0;font-size:14px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.charge-chart-legend li:last-child{border-bottom:0;padding-bottom:0}
.charge-chart-legend li span{flex:1;overflow-wrap:anywhere}
.charge-chart-legend li svg{flex-shrink:0}
.charge-chart-legend strong{font-size:.9rem;text-align:right;font-variant-numeric:tabular-nums}
@media(max-width:650px){.charge-chart-pair{grid-template-columns:1fr}.charging-bars text{font-size:23px}.charge-chart-legend li{font-size:.85rem}.charge-chart-legend strong{font-size:.8rem}.charge-energy-chart{padding:16px}.charge-ring{width:min(100%,280px)}.charging-bars .charge-minor-day{display:none}}
.chart-bar-enter,.charts-enter .charging-bars rect:not(.charge-day-hit){transform-box:fill-box;transform-origin:center bottom;animation:chart-grow 1.4s cubic-bezier(.2,.75,.25,1) both}
.charts-enter .charge-ring{animation:chart-circle-enter 1.5s cubic-bezier(.2,.75,.25,1) both}
.charts-enter .charge-donut-part{animation:donut-draw 1.8s cubic-bezier(.45,.05,.2,1) both}
@keyframes chart-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes chart-circle-enter{from{opacity:0;transform:scale(.86) rotate(-14deg)}to{opacity:1;transform:scale(1) rotate(0deg)}}
@keyframes donut-draw{from{stroke-dashoffset:100;opacity:.2}to{opacity:1}}
.is-charging .charger-battery-fill{transform-box:fill-box;transform-origin:left center;animation:charger-fill 2s ease-in-out infinite}
@keyframes charger-fill{0%{transform:scaleX(.05);opacity:.6}80%,100%{transform:scaleX(1);opacity:1}}
@media(prefers-reduced-motion:reduce){.chart-reveal,.chart-bar-enter,.charts-enter .charging-bars rect,.charts-enter .charge-ring,.charts-enter .charge-donut-part,.is-charging .charger-battery-fill{animation:none}}