/* Produktgrafik der Anlage (scene.js) */
.scene { display: block; width: 100%; height: auto; overflow: visible; font-family: 'Roboto', system-ui, sans-serif; }
.sc-pos { transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1); }
.sc-part { transform-box: fill-box; transform-origin: 50% 100%; transition: opacity 500ms ease, transform 850ms cubic-bezier(0.16, 1, 0.3, 1); }
.sc-part.off { opacity: 0; transform: translateY(34px) scale(0.92); pointer-events: none; }
.sc-panel.is-new { opacity: 0; transform: translate(40px, -70px) rotate(5deg); }
.sc-mod-in { transition-delay: var(--d, 0ms); }
.sc-mod-in.is-new { opacity: 0; transform: translateY(-56px); }
.sc-chip text { font-size: 13px; font-weight: 700; }
.sc-chip .sc-part { transform-origin: 50% 50%; }
.sc-tick { animation: sc-tick 420ms cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes sc-tick { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.sc-chip text { transform-box: fill-box; }

/* Sonnenreflex wandert über das Glas */
.sc-glint { animation: sc-glint 6s cubic-bezier(0.45, 0, 0.2, 1) infinite; }
.sc-panel-pos:nth-last-child(2) .sc-glint { animation-delay: 0.4s; }
.sc-panel-pos:nth-last-child(3) .sc-glint { animation-delay: 0.8s; }
@keyframes sc-glint { 0%, 55% { transform: translateX(0); } 100% { transform: translateX(420px); } }

/* Energie fließt vom Dach in den Wechselrichter und weiter in den Speicher */
.sc-flow { fill: none; stroke: #f18700; stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 2 12; animation: sc-flow 1.1s linear infinite; transition: opacity 500ms ease; }
.sc-flow.off { opacity: 0; }
@keyframes sc-flow { to { stroke-dashoffset: -28; } }
.sc-leds rect, .sc-led { animation: sc-led 2.4s ease-in-out infinite; animation-delay: var(--d, 0ms); }
@keyframes sc-led { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
.sc-ring { animation: sc-ring 2.8s ease-in-out infinite; }
/* Zählerdisplay flackert leicht wie ein laufender Zähler */
.sc-lcd { animation: sc-lcd 3.2s steps(1) infinite; }
@keyframes sc-lcd { 0%, 100% { opacity: 1; } 48% { opacity: 0.82; } 52% { opacity: 1; } }
@keyframes sc-ring { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .sc-pos, .sc-part { transition: none; }
  .sc-flow, .sc-leds rect, .sc-led, .sc-ring, .sc-tick, .sc-glint, .sc-lcd { animation: none; }
}