/* heatpump.css — Seite "Wärmepumpe" */

.hp-stat-row { grid-template-columns: repeat(4, 1fr); margin-bottom: clamp(10px, 1.6vh, 18px); }
@media (max-width: 900px) { .hp-stat-row { grid-template-columns: repeat(2, 1fr); } }

.hp-flow-card { margin-bottom: clamp(10px, 1.6vh, 18px); }
.hp-svg { width: 100%; height: clamp(200px, 30vh, 300px); display: block; margin-top: 6px; }

.hp-box { fill: var(--surface-alt); stroke: var(--border); stroke-width: 1; }
.hp-label { fill: var(--text); font-size: 12px; font-weight: 800; font-family: inherit; }
.hp-sublabel { fill: var(--text-faint); font-size: 10px; font-weight: 600; font-family: inherit; }
.node-value { fill: var(--text); font-size: 15px; font-weight: 800; font-family: inherit; }
.hp-mini-label { fill: var(--text-muted); font-size: 10px; font-weight: 700; font-family: inherit; }
.hp-mini-value { fill: var(--text); font-weight: 800; }

.fan-ring { fill: var(--surface); stroke: var(--border); stroke-width: 2; }
.fan-blade { fill: var(--accent); opacity: 0.75; }
.fan-blades.spinning { animation: spin 1.6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.air-arrows .air-arrow { stroke: var(--text-faint); stroke-width: 2; opacity: 0.4; }
.air-arrows.flow-active .air-arrow { stroke: var(--accent); opacity: 0.9; animation: airmove 1.2s ease-in-out infinite; }
.air-arrows .air-arrow:nth-child(2) { animation-delay: 0.15s; }
.air-arrows .air-arrow:nth-child(3) { animation-delay: 0.3s; }
@keyframes airmove {
  0%, 100% { transform: translateX(0); opacity: 0.3; }
  50% { transform: translateX(-6px); opacity: 1; }
}

.pipe { fill: none; stroke: var(--border); stroke-width: 6; stroke-linecap: round; }
.pipe.flow-active.pipe-supply { stroke: var(--red); stroke-dasharray: 8 8; animation: flowdash 0.9s linear infinite; }
.pipe.flow-active.pipe-return { stroke: var(--accent); stroke-dasharray: 8 8; animation: flowdash-rev 0.9s linear infinite; }
@keyframes flowdash { to { stroke-dashoffset: -32; } }
@keyframes flowdash-rev { to { stroke-dashoffset: 32; } }

.pipe-label { font-size: 11px; font-weight: 700; font-family: inherit; }
.supply-label { fill: var(--red); }
.return-label { fill: var(--accent); }
/* Zweite, kleinere Zeile unter "Vorlauf" für die Soll-/berechnete
   Vorlauftemperatur (Runde 13) — dieselbe Farbe, aber gedämpfter/kleiner,
   damit der gemessene Ist-Wert optisch führend bleibt. */
.pipe-label-sub { font-size: 9px; font-weight: 600; opacity: 0.75; }

/* Umwälzpumpen auf den Rohrleitungen (Rücklauf Außeneinheit + Vorlauf zum
   Haus): drehendes "Flügelrad" bei laufender Pumpe, sonst still/grau. */
.pump-body { fill: var(--surface); stroke: var(--border); stroke-width: 1.5; transition: stroke 0.3s; }
.pump-blade { fill: var(--text-faint); opacity: 0.55; transition: fill 0.3s, opacity 0.3s; }
.pump-blades.spinning { animation: spin 0.85s linear infinite; }
.pump.active .pump-body { stroke: var(--accent); }
.pump.active .pump-blade { fill: var(--accent); opacity: 0.95; }
/* Pumpe im Vorlauf zum Haus läuft mit warmem Heizwasser — rot statt blau,
   passend zur "Vorlauf"-Farbe (.supply-label / .pipe-supply). */
.pump-supply.active .pump-body { stroke: var(--red); }
.pump-supply.active .pump-blade { fill: var(--red); }

.hp-tank { stroke: none; opacity: 0.96 !important; }
.hp-tank-outline { fill: none; stroke: var(--border); stroke-width: 2; transition: stroke 0.3s; }
.hp-tank-outline.circulating {
  stroke: #ffd479;
  stroke-width: 3.5;
  stroke-dasharray: 14 10;
  animation: tankcirculate 1.3s linear infinite;
}
@keyframes tankcirculate { to { stroke-dashoffset: -48; } }
.tank-temp-label { fill: #fff; font-size: 13px; font-weight: 800; font-family: inherit; text-shadow: 0 1px 2px rgba(0,0,0,0.25); }

.flame-icon { opacity: 0; transition: opacity 0.3s; }
.flame-icon.visible { opacity: 1; animation: flicker 1.4s ease-in-out infinite; }
@keyframes flicker { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }

/* Heizkörper im Haus-Knoten: grau/neutral im Ruhezustand, warm/orange
   glühend animiert während des Heizbetriebs */
.radiator-bar, .radiator-fin { fill: var(--text-faint); opacity: 0.45; transition: fill 0.4s, opacity 0.4s; }
.radiator.warm .radiator-bar, .radiator.warm .radiator-fin {
  fill: #e8912a;
  opacity: 0.95;
  animation: radiatorglow 1.6s ease-in-out infinite;
}
@keyframes radiatorglow {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

.hp-detail-row { grid-template-columns: repeat(2, 1fr); margin: clamp(10px,1.6vh,18px) 0; }
@media (max-width: 800px) { .hp-detail-row { grid-template-columns: 1fr; } }

.kv-list { display: flex; flex-direction: column; gap: 8px; }
.kv-list > div { display: flex; justify-content: space-between; font-size: clamp(12px, 1vw, 14px); padding: 6px 0; border-bottom: 1px solid var(--border); }
.kv-list > div:last-child { border-bottom: none; }
.kv-list > div > span:first-child { color: var(--text-muted); font-weight: 600; }
.kv-list > div > span:last-child { font-weight: 700; color: var(--text); }

/* Statistik-Liste (Runde 13): Gesamtwert + kleines "+X heute"-Badge je
   Zeile, statt nur einem Wert wie bei den übrigen kv-list-Karten. */
.stats-list > div > span:last-child { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.stat-badge { font-size: 10px; padding: 2px 8px; white-space: nowrap; }