/* Energiefluss-Animation (Startseite und entwuerfe/tagesablauf) – nutzt die Farb-Variablen aus :root */
/* Box um Animation, Zeitregler und Schalter (Startseite) */
.energy-box {
  padding: 22px 22px 18px;
  border-radius: var(--radius, 18px);
  background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .025));
  border: 1px solid var(--glass-border);
  box-shadow: 0 30px 80px -40px rgba(0, 0, 0, .8), 0 0 60px -35px var(--gold-glow);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
}
.energy-box svg { overflow: hidden; }
@media (max-width: 560px) { .energy-box { padding: 14px 12px 12px; } }

/* Energiefluss-Animation */
.flow { stroke-dasharray: 6 14; animation: flow 1.6s linear infinite; }
.flow--slow { animation-duration: 2.4s; }
@keyframes flow { to { stroke-dashoffset: -40; } }
.sun-core { animation: pulse 4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes pulse { 50% { opacity: .82; transform: scale(1.05); } }
.cell-shine { animation: shine 5s ease-in-out infinite; }
@keyframes shine { 0%, 100% { opacity: 0; } 45%, 55% { opacity: .55; } }
.window-glow { animation: glow 3s ease-in-out infinite; }
@keyframes glow { 50% { opacity: .6; } }
.led { animation: led 1.2s steps(2) infinite; }
@keyframes led { 50% { opacity: .25; } }

/* Energiefluss im Tagesablauf: Uhrzeit, Sonne, Mond, Wolke und aktive Flüsse steuert js/main.js.
   data-flows: …-in = Pfadrichtung, …-out = umgekehrt */
.energy .flow[data-f] { display: none; }
.energy[data-flows~="pv"] .flow[data-f="pv"],
.energy[data-flows~="haus"] .flow[data-f="haus"],
.energy[data-flows~="netz-in"] .flow[data-f="netz"], .energy[data-flows~="netz-in"] .flow[data-f="netzwr"],
.energy[data-flows~="netz-out"] .flow[data-f="netz"], .energy[data-flows~="netz-out"] .flow[data-f="netzwr"],
.energy[data-flows~="bat-in"] .flow[data-f="bat"], .energy[data-flows~="bat-out"] .flow[data-f="bat"],
.energy[data-flows~="auto"] .flow[data-f="auto"] { display: inline; }
/* Fliessender Übergang Speicher → Netz in der Nacht */
.energy .flow[data-f="bat"] { opacity: var(--bat-op, 1); }
.energy .flow[data-f="pv"] { opacity: var(--pv-op, 1); }
.energy .flow[data-f="netz"], .energy .flow[data-f="netzwr"] { opacity: var(--netz-op, 1); }
.energy[data-flows~="netz-out"] .flow[data-f="netz"], .energy[data-flows~="netz-out"] .flow[data-f="netzwr"],
.energy[data-flows~="bat-out"] .flow[data-f="bat"] { animation-direction: reverse; }
/* Weniger Sonne = weniger Solarstrom */
.energy[data-sky="light"] .flow[data-f="pv"] { animation-duration: 2.8s; }
.energy[data-sky="full"] .flow[data-f="pv"] { animation-duration: 5s; }
.energy.no-bat .bat-part { display: none; }
.energy:not(.has-car) .auto-part { display: none; }
.energy .car-cable { opacity: 0; transition: opacity .4s ease; }
.energy.car-plugged .car-cable { opacity: 1; }
.energy .car-bolt { opacity: .15; }
.energy.car-charging .car-bolt { animation: glow 1.4s ease-in-out infinite; opacity: 1; filter: drop-shadow(0 0 3px rgba(245, 182, 66, .8)); }
.energy.car-full .car-bolt { opacity: 1; }
.energy .wallbox-led { opacity: .3; }
.energy.car-charging .wallbox-led { opacity: 1; }
.energy .bar { opacity: .15; }
.energy.is-full .bat-bars { filter: drop-shadow(0 0 3px rgba(245, 182, 66, .7)); }
.energy.is-night .cell-shine { display: none; }

.energy__controls { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 22px; margin-top: 18px; }
/* Tageszeit-Regler mit Start/Stopp */
.energy__time { display: flex; align-items: flex-start; gap: 14px; margin-top: 10px; }
.energy__play { flex: none; width: 40px; height: 40px; margin-top: -11px; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer; color: var(--gold-2); background: var(--glass); box-shadow: inset 0 0 0 1px var(--glass-border); transition: box-shadow .2s, color .2s; }
.energy__play:hover { box-shadow: inset 0 0 0 1px rgba(245, 182, 66, .6), 0 0 18px -6px var(--gold-glow); }
.energy__play svg { width: 18px; height: 18px; fill: currentColor; }
.energy__play .i-play, .energy__play[aria-pressed="false"] .i-pause { display: none; }
.energy__play[aria-pressed="false"] .i-play { display: block; }
.energy__slider { flex: 1; min-width: 0; }
.energy__range { --pct: 37.5%; -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 6px; margin: 6px 0 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(90deg, var(--gold) 0 var(--pct), rgba(255, 255, 255, .12) var(--pct) 100%); }
.energy__range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--gold-2);
  box-shadow: 0 0 0 2px #1a1204, 0 0 0 3.5px var(--gold), 0 0 12px var(--gold-glow); }
.energy__range::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: var(--gold-2);
  box-shadow: 0 0 0 2px #1a1204, 0 0 0 3.5px var(--gold), 0 0 12px var(--gold-glow); }
.energy__range:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; }
.energy__ticks { display: flex; justify-content: space-between; margin-top: 8px; font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.energy__season { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--glass); box-shadow: inset 0 0 0 1px var(--glass-border); }
.energy__season button { font: inherit; font-size: .88rem; font-weight: 600; color: var(--muted); background: none; border: 0; padding: 6px 14px; border-radius: 999px; cursor: pointer; transition: color .2s, background .2s; }
.energy__season button:hover { color: var(--text); }
.energy__season button[aria-pressed="true"] { background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: #1a1204; }
.energy__chk { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-weight: 600; font-size: .95rem; }
.energy__chk input { width: 18px; height: 18px; accent-color: var(--gold); cursor: pointer; }