:root {
  --bg-color: #020617;
  --card-bg: #0f172a;
  --text-main: #f8fafc;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: var(--bg-color);
  color: var(--text-main);
}

/* ========================================== */
/* RESPONSIVE DISPLAY LOGIK (Mobil vs Desktop)*/
/* ========================================== */
#grid-view {
  display: grid;
}

#orbit-stage {
  display: none;
  min-height: 580px;
}

@media (min-width: 1024px) {
  #grid-view {
    display: none !important;
  }
  
  #orbit-stage {
    display: flex !important;
  }
}

/* ========================================== */
/* ORBIT KACHELN STYLES                       */
/* ========================================== */
.orbit-card {
  position: absolute;
  transform-origin: center center;
  will-change: transform, left, top, opacity;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.5);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.orbit-card.active-card {
  border-width: 2px;
}

#card-pv.active-card { border-color: #f59e0b; box-shadow: 0 0 25px rgba(245, 158, 11, 0.4); }
#card-battery.active-card { border-color: #10b981; box-shadow: 0 0 25px rgba(16, 185, 129, 0.4); }
#card-wallbox.active-card { border-color: #a855f7; box-shadow: 0 0 25px rgba(168, 85, 247, 0.4); }
#card-grid.active-card { border-color: #06b6d4; box-shadow: 0 0 25px rgba(6, 182, 212, 0.4); }

/* SVG FLUSSPFADE */
.flow-line {
  fill: none;
  stroke-width: 3.5;
  stroke-linecap: round;
  transition: opacity 0.5s ease;
}

.hidden {
  display: none !important;
}