/* pv.css — Seite "Solaranlage" */

/* ---------------------------------------------------------------------
   Hero-Bereich: Haus-Illustration + Kennzahlen-Kacheln
   --------------------------------------------------------------------- */
.pv-hero {
  display: grid;
  grid-template-columns: minmax(280px, 380px) 1fr;
  gap: clamp(10px, 1.4vw, 18px);
  margin-bottom: clamp(10px, 1.6vh, 18px);
  align-items: stretch;
}
@media (max-width: 1000px) {
  .pv-hero { grid-template-columns: 1fr; }
}

.house-card {
  background: linear-gradient(180deg, #d9ecfb 0%, #eef8ee 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 220px;
  transition: background 1.6s ease;
  position: relative;
  overflow: hidden;
}
/* Hintergrund der Übersicht folgt dem AKTIVEN Design: bei "Automatisch"
   dunkler Nachthimmel-Verlauf zur echten Nachtzeit, bei manuell gewähltem
   "Hell"/"Dunkel" erzwingt die Wahl Tag- bzw. Nacht-Optik (siehe
   pv.js#update — is-night wird aus theme.js#effectiveTheme() abgeleitet,
   nicht mehr unabhängig von der Design-Wahl). Ein paar dezente "Sterne"
   per box-shadow sorgen nachts für etwas Tiefe. */
.house-card.is-night {
  background: linear-gradient(180deg, #0b1226 0%, #141f38 55%, #1b2740 100%);
}
.house-card.is-night::before {
  content: '';
  position: absolute;
  top: 6px; left: 0; right: 0;
  height: clamp(24px, 4vh, 36px);
  pointer-events: none;
  box-shadow:
    12% 40% 0 0.5px rgba(255,255,255,0.55),
    27% 20% 0 0.5px rgba(255,255,255,0.4),
    48% 55% 0 0.5px rgba(255,255,255,0.5),
    63% 15% 0 0.5px rgba(255,255,255,0.35),
    79% 45% 0 0.5px rgba(255,255,255,0.55),
    91% 25% 0 0.5px rgba(255,255,255,0.4);
  opacity: 0.85;
}
/* Illustration selbst wird nachts leicht gedimmt (Haus wirkt "abgedunkelt"),
   im Hell-/Dunkel-UI-Design ansonsten unverändert. */
.house-illustration-img { transition: filter 1.6s ease; }
.house-card.is-night .house-illustration-img { filter: brightness(0.58) saturate(0.85); }

.house-heading {
  font-size: clamp(13px, 1.15vw, 16px);
  font-weight: 800;
  color: #2a3a4d;
  margin-bottom: 4px;
  flex: 0 0 auto;
}
.house-card.is-night .house-heading { color: #d7e2f2; transition: color 1.6s ease; }

/* Eigener schmaler "Himmel"-Streifen OBERHALB der Haus-Illustration, damit
   Sonne/Mond sichtbar über dem Bild wandern statt mittig darüber zu liegen. */
.house-sky {
  position: relative;
  width: 100%;
  height: clamp(24px, 4vh, 36px);
  flex: 0 0 auto;
}
/* Überschrift bleibt oben in der Kachel fixiert (flex: 0 0 auto oben); der
   Bild-Bereich wächst in den restlichen Platz der (per Grid gestreckten)
   Kachel hinein, statt dass der gesamte Inhaltsblock vertikal zentriert
   wird und die Überschrift dadurch nach unten rutscht. */
.house-illustration-wrap {
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  min-height: clamp(140px, 19vh, 195px);
}
.house-illustration-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
/* Stilisierte Sonne (Tag) bzw. Mond (Nacht), die je nach Tageszeit entlang
   eines flachen Bogens durch den Himmel-Streifen wandern (Position wird in
   pv.js per Inline-Style gesetzt; jeweils nur eine der beiden sichtbar). */
.celestial-body {
  position: absolute;
  left: 4%;
  top: 50%;
  width: clamp(14px, 1.9vw, 22px);
  height: clamp(14px, 1.9vw, 22px);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: left 1.4s linear, top 1.4s linear, opacity 1.4s linear;
  opacity: 0;
  pointer-events: none;
}
.celestial-body.sun {
  background: radial-gradient(circle at 35% 35%, #fff2c4, #f4b944);
  box-shadow: 0 0 14px 3px rgba(244, 185, 68, 0.55);
}
.celestial-body.moon {
  background: radial-gradient(circle at 35% 35%, #ffffff, #dbe6f5);
  box-shadow: 0 0 16px 4px rgba(255, 255, 255, 0.65);
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(70px, auto);
  gap: clamp(8px, 1.1vw, 14px);
}
@media (max-width: 1300px) { .hero-stats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .hero-stats { grid-template-columns: repeat(2, 1fr); } }

.hero-tile {
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 10px clamp(10px, 1.2vw, 14px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  position: relative;
}
/* Kleines Status-Badge oben rechts in der Kachel (z.B. Lädt/Entlädt/Standby
   beim Batteriespeicher) — bewusst absolut positioniert statt im
   hero-tile-head, da dessen Schrift für ein Badge zu klein/eng ist. */
.hero-tile-badge {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 9.5px;
  padding: 2px 7px;
  gap: 4px;
}
.hero-tile-badge .dot { width: 5px; height: 5px; }
.hero-tile-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: clamp(9.5px, 0.82vw, 11px);
  font-weight: 800;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero-tile-icon { font-size: 1.25em; flex: 0 0 auto; }
.hero-tile-value {
  font-size: clamp(17px, 1.7vw, 23px);
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.hero-tile-value .unit { font-size: 0.52em; font-weight: 700; color: var(--text-muted); margin-left: 3px; }
.hero-tile-sub { font-size: clamp(10px, 0.85vw, 12px); color: var(--text-muted); font-weight: 600; }
.hero-tile.accent-blue .hero-tile-value { color: var(--blue); }
.hero-tile.accent-green .hero-tile-value { color: var(--green); }
.hero-tile.accent-orange .hero-tile-value { color: var(--orange); }

.hero-tile-chart {
  grid-column: span 3;
  padding-bottom: 6px;
}
@media (max-width: 1300px) { .hero-tile-chart { grid-column: span 3; } }
@media (max-width: 700px) { .hero-tile-chart { grid-column: span 2; } }

.hero-tile-gauge { align-items: center; }
.hero-gauge-wrap { position: relative; width: 72px; height: 72px; align-self: center; }
.hero-gauge-value {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--text);
}

/* ---------------------------------------------------------------------
   Energiefluss-Diagramm (Knoten-Schema)
   --------------------------------------------------------------------- */
.flow-card { padding-bottom: 6px; margin-bottom: clamp(10px, 1.6vh, 18px); }
.flow-svg { width: 100%; height: clamp(180px, 26vh, 260px); display: block; }

.node-box { fill: var(--surface-alt); stroke: var(--border); stroke-width: 1; }
.node-pv { fill: var(--orange-soft); stroke: #f2c48a; }
.node-house { fill: var(--accent-soft); stroke: #a9cdef; }
.node-batt { fill: var(--green-soft); stroke: #9adcb8; }
.node-grid { fill: var(--surface-alt); stroke: var(--border); }
.node-wb { fill: var(--purple-soft); stroke: #c9baf5; }
.node-hp { fill: var(--red-soft); stroke: #f0b6b0; }

.node-title { fill: var(--text-muted); font-size: 10px; font-weight: 700; font-family: inherit; }
.node-value { fill: var(--text); font-size: 13px; font-weight: 800; font-family: inherit; }

.flow-line, .flow-line-static {
  fill: none;
  stroke: var(--border);
  stroke-width: 3;
  stroke-linecap: round;
}
.flow-line.flow-active {
  stroke: var(--orange);
  stroke-dasharray: 6 8;
  animation: flowdash 1s linear infinite;
}
#linePvBatt.flow-active { stroke: var(--green); }
#linePvGrid.flow-active { stroke: var(--accent); }
#linePvHp.flow-active { stroke: #c85a53; }
#linePvWb.flow-active { stroke: #7c5ce0; }
#lineBattHouse.flow-active { stroke: var(--green); }
.flow-line-static.flow-active {
  stroke: var(--text-muted);
  stroke-dasharray: 6 8;
  animation: flowdash 1s linear infinite;
}

@keyframes flowdash {
  to { stroke-dashoffset: -28; }
}

/* ---------------------------------------------------------------------
   Wechselrichter-/String-Kacheln
   --------------------------------------------------------------------- */
.pv-string-grid { grid-template-columns: repeat(3, 1fr); }
.pv-battery-grid, .pv-wallbox-grid { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1100px) {
  .pv-string-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .pv-string-grid, .pv-battery-grid, .pv-wallbox-grid { grid-template-columns: 1fr; }
}

.string-metrics {
  display: flex;
  gap: 14px;
  margin: 6px 0 8px;
  flex-wrap: wrap;
}
.string-metrics > div { display: flex; flex-direction: column; gap: 2px; }
.mini-label { font-size: 10.5px; color: var(--text-faint); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.mini-value { font-size: 14px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }

.string-subtitle {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 8px 0 4px;
}
.string-chart { margin-top: 2px; }

.battery-top { display: flex; align-items: center; gap: 14px; }
.battery-name { font-weight: 700; font-size: 13px; color: var(--text-muted); }
.battery-soc { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
.battery-info { display: flex; flex-direction: column; gap: 4px; }
/* Runde 18: SoC-Verlauf rechts neben Donut/Info in derselben Kachel. */
.battery-history-chart { flex: 1 1 110px; min-width: 80px; margin-left: auto; }
@media (max-width: 480px) {
  .battery-history-chart { display: none; }
}

.wallbox-card { display: flex; }
.wallbox-row { display: flex; align-items: center; gap: 18px; width: 100%; }
.wallbox-icon {
  width: 64px; height: 64px; border-radius: 16px;
  background: var(--purple-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; flex: 0 0 auto;
}
.wallbox-info { flex: 1; display: flex; flex-direction: column; gap: 8px; }
/* Runde 23: Ladeleistungs-Verlauf rechts in der Kachel, gleiches Muster wie
   .battery-history-chart oben. */
.wallbox-history-chart { flex: 1 1 110px; min-width: 80px; margin-left: auto; }
@media (max-width: 480px) {
  .wallbox-history-chart { display: none; }
}