/* =====================================================================
   ESZI – Energiemanagement Demo
   ===================================================================== */
:root{
  --em-pv: #fbbf24;
  --em-bhkw: #fb923c;
  --em-bat: #22d3ee;
  --em-grid: #ff4b57;
  --em-ev: #a78bfa;
  --em-feed: #34d399;
  --em-price: #c084fc;
  --em-card: rgba(var(--ink),0.03);
}

.em-hero{ min-height: min(72vh, 680px); display:flex; align-items:center; }
.em-hero .headline{ font-size: clamp(2.4rem, 6vw, 4.6rem); }
.em-stats .stat-value{ font-size: clamp(1.4rem, 2.6vw, 2rem); }

/* ---------- App-Rahmen ---------- */
.em-app{
  position: relative;
  border-radius: 26px;
  border: 1px solid var(--border-strong);
  background:
    radial-gradient(900px 400px at 50% 0%, rgba(255,31,45,0.07), transparent 60%),
    var(--surface-deep);
  box-shadow: 0 50px 100px -40px rgba(0,0,0,0.95), 0 0 0 1px rgba(255,31,45,0.05);
  padding: 18px;
  overflow: hidden;
}
.em-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: rgba(var(--ink),0.025);
}
.em-brand{ display:flex; align-items:center; gap: 12px; }
.em-brand .eszi-brand{ font-size: 1.6rem; letter-spacing: 1px; }
.em-brand-title{ font-weight: 700; color: var(--red2); line-height: 1.1; }
.em-brand-sub{ font-size: .8rem; color: var(--muted); }
.em-tabs{
  display:flex;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--border);
}
.em-tab{
  border: 0;
  background: transparent;
  color: var(--muted);
  font-weight: 600;
  font-size: .9rem;
  padding: 7px 16px;
  border-radius: 9px;
  transition: .18s var(--ease);
}
.em-tab:hover{ color: var(--heading); }
.em-tab.active{
  background: linear-gradient(135deg, #ff2b38, #d90f1c);
  color: var(--heading);
  box-shadow: 0 6px 18px -6px rgba(255,31,45,0.8);
}
.em-top-right{ display:flex; align-items:center; gap: 12px; }
.em-chip{
  display:inline-flex; align-items:center; gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  font-size: .85rem;
  color: var(--muted);
}
.em-chip b{ color: var(--heading); }
.em-led{ width: 8px; height: 8px; border-radius: 50%; background: var(--em-feed); box-shadow: 0 0 8px var(--em-feed); }
.em-clock{ font-size: 1.5rem; font-weight: 800; color: var(--heading); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

/* ---------- Zeitleiste ---------- */
.em-timebar{
  display:flex;
  align-items:center;
  gap: 14px;
  margin: 14px 0;
  padding: 10px 14px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(var(--ink),0.02);
}
.em-play{
  flex: 0 0 46px;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 0;
  background: linear-gradient(135deg, #ff2b38, #c50d18);
  color: var(--heading);
  font-size: 1.35rem;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow: 0 8px 22px -6px rgba(255,31,45,0.85);
  transition: transform .15s var(--ease);
}
.em-play:hover{ transform: scale(1.06); }
.em-range-wrap{ flex: 1; min-width: 0; }
.em-range-wrap input[type=range]{
  -webkit-appearance: none; appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--red) var(--p, 0%), rgba(var(--ink),0.12) var(--p, 0%));
  outline: none;
}
.em-range-wrap input[type=range]::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 3px solid var(--red);
  box-shadow: 0 0 0 4px rgba(255,31,45,0.2);
  cursor: pointer;
}
.em-range-wrap input[type=range]::-moz-range-thumb{
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 3px solid var(--red);
  cursor: pointer;
}
.em-range-ticks{ display:flex; justify-content:space-between; font-size: .72rem; color: var(--faint); margin-top: 6px; }
.em-speed{ display:flex; gap: 4px; }
.em-speed button{
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--muted);
  border-radius: 8px;
  padding: 5px 9px;
  font-size: .8rem;
  font-weight: 600;
}
.em-speed button.active{ color: var(--heading); border-color: rgba(255,31,45,0.7); background: var(--red-soft); }

/* ---------- Panes ---------- */
.em-pane{ display:none; }
.em-pane.active{ display:block; animation: emFade .35s var(--ease); }
@keyframes emFade{ from{ opacity:0; transform: translateY(6px);} to{ opacity:1; transform:none; } }

.em-live-grid{
  display:grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 14px;
}
.em-flow-card, .em-side-card, .em-chart-card, .em-tile{
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--em-card);
}
.em-flow-card{ padding: 14px; display:flex; flex-direction: column; }
.em-card-head{
  display:flex; align-items:center; justify-content:space-between; gap: 10px; flex-wrap: wrap;
  font-weight: 600; color: var(--heading); font-size: .95rem;
  margin-bottom: 6px;
}
.em-card-head .bi{ color: var(--red2); margin-right: 6px; }
.em-badge{
  padding: 4px 12px;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 700;
  border: 1px solid rgba(255,75,87,0.6);
  color: var(--em-grid);
  background: rgba(255,75,87,0.1);
  transition: .3s;
}
.em-badge.feed{ border-color: rgba(52,211,153,0.6); color: var(--em-feed); background: rgba(52,211,153,0.1); }
.em-flow{ flex: 1; min-height: 360px; }
.em-flow svg{ width: 100%; height: auto; display:block; overflow: visible; }

/* SVG-Knoten */
.em-node-bg{ fill: var(--surface-solid); stroke: rgba(var(--ink),0.08); stroke-width: 2; }
.em-node-ring-bg{ fill: none; stroke: rgba(var(--ink),0.07); }
.em-node-ring{ fill: none; stroke-linecap: round; transition: stroke-dashoffset .4s linear; }
.em-node-val{ fill: #fff; font-weight: 800; font-family: var(--font); }
.em-node-unit{ fill: rgba(var(--ink),0.6); font-weight: 600; }
.em-node-sub{ font-weight: 700; font-family: var(--font); }
.em-node-name{ fill: rgba(var(--ink),0.55); font-family: var(--font); }
.em-node-icon{ font-family: "bootstrap-icons"; }
.em-node.off .em-node-val{ fill: rgba(var(--ink),0.35); }
.em-node.off .em-node-bg{ stroke: rgba(var(--ink),0.05); }
.em-glow{ transition: opacity .5s; }
.em-link-base{ fill:none; stroke: rgba(var(--ink),0.06); }
.em-link{ fill:none; stroke-linecap: round; }

.em-kpi-row{ display:flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.em-kpi{
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  font-size: .82rem;
  color: var(--muted);
}
.em-kpi b{ color: var(--heading); margin-left: 4px; font-variant-numeric: tabular-nums; }
.em-kpi-good{ border-color: rgba(52,211,153,0.5); color: var(--em-feed); }
.em-kpi-good b{ color: var(--em-feed); }

/* Seitenleiste */
.em-side{ display:flex; flex-direction: column; gap: 12px; }
.em-side-card{ padding: 14px 16px; }
.em-side-title{ font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--faint); font-weight: 600; margin-bottom: 8px; }
.em-side-title .bi{ color: var(--red2); margin-right: 4px; }
.em-big{ font-size: 1.9rem; font-weight: 800; color: var(--heading); line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.em-big small{ font-size: .85rem; color: var(--muted); font-weight: 600; }
.em-muted{ color: var(--muted); font-size: .86rem; margin-top: 4px; }
.em-mini-stats{ display:grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.em-mini-stats div{ padding: 8px 10px; border-radius: 10px; background: rgba(var(--ink),0.03); }
.em-mini-stats span{ display:block; font-size: .72rem; color: var(--faint); }
.em-mini-stats b{ color: var(--heading); font-size: .86rem; }
.em-progress{ height: 6px; border-radius: 999px; background: rgba(var(--ink),0.08); margin-top: 10px; overflow: hidden; }
.em-progress span{ display:block; height: 100%; width: 0; background: linear-gradient(90deg, #f59e0b, var(--em-pv)); border-radius: 999px; transition: width .4s; }
.em-decision{
  border-color: rgba(255,31,45,0.35);
  background: linear-gradient(180deg, rgba(255,31,45,0.08), rgba(var(--ink),0.02));
}
.em-decision-mode{
  display:inline-flex; align-items:center; gap: 8px;
  font-weight: 800; color: var(--heading); font-size: 1.05rem;
  margin-bottom: 6px;
}
.em-decision-mode .sw{ width: 10px; height: 10px; border-radius: 3px; background: var(--c, #fff); box-shadow: 0 0 10px var(--c, #fff); }
.em-decision p{ margin: 0; color: rgba(var(--ink-text),0.82); font-size: .88rem; line-height: 1.5; min-height: 4.5em; }

/* Charts */
.em-chart-card{ padding: 14px 16px; margin-top: 14px; }
.em-chart{ width: 100%; }
.em-chart svg{ width: 100%; height: auto; display:block; }

.em-legend{ display:flex; flex-wrap: wrap; gap: 6px 14px; font-size: .78rem; color: var(--muted); font-weight: 500; }
.em-legend span{ display:inline-flex; align-items:center; gap: 6px; }
.em-legend span::before{ content:""; width: 14px; height: 3px; border-radius: 2px; background: var(--c); }
.em-legend span.dashed::before{ background: repeating-linear-gradient(90deg, var(--c) 0 4px, transparent 4px 7px); }
.em-axis{ fill: rgba(var(--ink),0.45); font-size: 14px; font-family: var(--font); }
.em-gridline{ stroke: rgba(var(--ink),0.06); }
.em-cursor{ stroke: #fff; stroke-width: 1.5; stroke-dasharray: 3 3; opacity: .7; }
.em-limit{ stroke: var(--em-grid); stroke-dasharray: 6 5; opacity: .6; }

/* Kacheln */
.em-tiles{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.em-tile{ padding: 16px; }
.em-tile .t{ font-size: .76rem; color: var(--faint); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.em-tile .v{ font-size: 1.7rem; font-weight: 800; color: var(--heading); margin-top: 4px; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.em-tile .v small{ font-size: .85rem; color: var(--muted); font-weight: 600; }
.em-tile .s{ font-size: .82rem; color: var(--muted); }
.em-tile.good .v{ color: var(--em-feed); }
.em-tile.hl{ border-color: rgba(255,31,45,0.4); background: linear-gradient(180deg, rgba(255,31,45,0.1), rgba(var(--ink),0.02)); }

.em-two{ display:grid; grid-template-columns: 1fr 1.3fr; gap: 14px; }
.em-two .em-chart-card{ margin-top: 14px; }
.em-balance{ display:grid; gap: 14px; margin-top: 8px; }
.em-bal-group-title{ font-size: .76rem; color: var(--faint); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; margin-bottom: 6px; }
.em-bal-row{ display:grid; grid-template-columns: 110px 1fr 92px; gap: 10px; align-items:center; font-size: .86rem; margin-bottom: 7px; }
.em-bal-row .lbl{ color: rgba(var(--ink-text),0.85); }
.em-bal-row .bar{ height: 10px; border-radius: 999px; background: rgba(var(--ink),0.06); overflow: hidden; }
.em-bal-row .bar span{ display:block; height: 100%; border-radius: 999px; background: var(--c); width: 0; transition: width .9s var(--ease); }
.em-bal-row .num{ text-align: right; color: var(--heading); font-variant-numeric: tabular-nums; font-weight: 600; }
.em-note{ color: var(--faint); font-size: .82rem; margin: 12px 4px 0; }

/* Tabelle */
.em-table-wrap{ max-height: 420px; overflow: auto; border-radius: 12px; }
.em-table{ width: 100%; border-collapse: collapse; font-size: .84rem; }
.em-table th{
  position: sticky; top: 0;
  background: var(--surface-solid);
  color: var(--faint);
  font-weight: 600;
  text-align: left;
  padding: 9px 10px;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  z-index: 1;
}
.em-table td{ padding: 9px 10px; border-top: 1px solid var(--border); color: rgba(var(--ink-text),0.88); vertical-align: top; font-variant-numeric: tabular-nums; }
.em-table td:last-child{ color: var(--muted); min-width: 220px; }
.em-table td:nth-child(-n+6){ white-space: nowrap; }
.em-table-wrap{ scrollbar-width: thin; scrollbar-color: rgba(var(--ink),0.2) transparent; }
.em-table-wrap::-webkit-scrollbar{ width: 8px; height: 8px; }
.em-table-wrap::-webkit-scrollbar-thumb{ background: rgba(var(--ink),0.18); border-radius: 8px; }
.em-table tr.now td{ background: rgba(255,31,45,0.08); }
.em-tag{ display:inline-block; padding: 2px 8px; border-radius: 6px; font-weight: 700; font-size: .76rem; white-space: nowrap; color: var(--surface-deep); background: var(--c); }

.em-foot{
  display:flex; justify-content:space-between; gap: 10px; flex-wrap: wrap;
  margin-top: 14px; padding: 4px 6px 0;
  font-size: .78rem; color: var(--faint);
}

/* Fähigkeiten */
.em-cap-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.em-cap{
  padding: 22px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(var(--ink),0.04), rgba(var(--ink),0.01));
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.em-cap:hover{ transform: translateY(-3px); border-color: rgba(255,31,45,0.4); }
.em-cap h3{ font-size: 1.02rem; margin-bottom: 6px; }
.em-cap p{ color: var(--muted); font-size: .9rem; margin: 0; }

/* Ergebnis-Karte */
.em-result-card{
  padding: 36px;
  border-radius: 24px;
  border: 1px solid rgba(255,31,45,0.35);
  background:
    radial-gradient(500px 260px at 100% 0%, rgba(255,31,45,0.28), transparent 60%),
    var(--surface-solid);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,0.9);
}
.em-result-label{ color: var(--muted); font-size: .9rem; }
.em-result-value{ font-size: clamp(3rem, 7vw, 4.8rem); font-weight: 800; color: var(--heading); letter-spacing: -0.04em; line-height: 1.05; margin: 8px 0 2px; font-variant-numeric: tabular-nums; }
.em-result-sub{ color: var(--em-feed); font-weight: 600; }
.em-result-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 24px; }
.em-result-grid div{ padding: 12px; border-radius: 12px; background: rgba(var(--ink),0.04); border: 1px solid var(--border); }
.em-result-grid b{ display:block; color: var(--heading); font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.em-result-grid span{ color: var(--faint); font-size: .78rem; }

/* Responsive */
@media (max-width: 1100px){
  .em-live-grid{ grid-template-columns: 1fr; }
  .em-tiles{ grid-template-columns: repeat(2, 1fr); }
  .em-side{ display:grid; grid-template-columns: repeat(2, 1fr); }
  .em-cap-grid{ grid-template-columns: repeat(2, 1fr); }
  .em-two{ grid-template-columns: 1fr; }
}
@media (max-width: 768px){
  .em-app{ padding: 10px; border-radius: 18px; margin-left: -4px; margin-right: -4px; }
  .em-top{ padding: 10px; }
  .em-top-right{ width: 100%; justify-content: space-between; }
  .em-tabs{ width: 100%; }
  .em-tab{ flex: 1; padding: 8px 6px; }
  .em-side{ grid-template-columns: 1fr; }
  .em-flow{ min-height: 0; }
  .em-hide-sm{ display: none; }
  .em-timebar{ flex-wrap: wrap; gap: 10px; }
  .em-range-wrap{ order: 3; flex-basis: 100%; }
  .em-speed{ margin-left: auto; }
  .em-bal-row{ grid-template-columns: 90px 1fr 80px; }
  .em-result-card{ padding: 24px; }
  .em-result-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 576px){
  .em-cap-grid{ grid-template-columns: 1fr; }
  .em-tile .v{ font-size: 1.35rem; }
}

/* ---------- Hero (Orbit-Visual) ---------- */
.em-hero2{
  position: relative;
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 40px;
  align-items:center;
  margin-top: 8px;
  padding: 64px 56px;
  border-radius: 28px;
  border: 1px solid var(--border);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(700px 480px at 78% 50%, rgba(255,31,45,0.20), transparent 62%),
    radial-gradient(500px 400px at 0% 0%, rgba(34,211,238,0.07), transparent 60%),
    linear-gradient(180deg, var(--surface-solid), var(--bg));
}
.em-hero2-grid{
  position:absolute; inset:0; z-index:-1;
  background-image:
    linear-gradient(rgba(var(--ink),0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--ink),0.035) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at 70% 50%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 70% 50%, #000 20%, transparent 75%);
}
.em-hero2 h1{
  font-size: clamp(2.6rem, 5.4vw, 4.6rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.02;
  margin: 18px 0 10px;
}
.em-grad{
  background: linear-gradient(90deg, #ff4b57, #fbbf24 55%, #f472b6);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.em-hero2-lead{ font-size: clamp(1.2rem, 2vw, 1.55rem); font-weight: 600; color: var(--heading); margin-bottom: 14px; }
.em-hero2-lead .eszi-brand{ font-size: 1.15em; }
.em-hero2-sub{ color: var(--muted); font-size: 1.04rem; line-height: 1.65; max-width: 56ch; }
.em-hero2-cta{ justify-content: flex-start; }

.em-orbit{
  position: relative;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 1;
  margin-left: auto;
}
.em-orbit svg{ position:absolute; inset:0; width:100%; height:100%; overflow: visible; }
.em-orbit-ring{
  fill:none; stroke: rgba(var(--ink),0.08); stroke-width: 1; stroke-dasharray: 2 6;
  transform-origin: 200px 200px;
  animation: emSpin 60s linear infinite;
}
.em-orbit-ring-2{ stroke: rgba(255,31,45,0.18); animation-duration: 40s; animation-direction: reverse; }
@keyframes emSpin{ to{ transform: rotate(360deg); } }
.em-beam{
  fill:none;
  stroke: var(--c);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 0.1 14;
  filter: drop-shadow(0 0 6px var(--c));
  animation: emBeam 1.1s linear infinite;
}
.em-beam.slow{ animation-duration: 2.2s; }
@keyframes emBeam{ to{ stroke-dashoffset: -14.1; } }

.em-orb{
  position:absolute;
  left: var(--x); top: var(--y);
  transform: translate(-50%, -50%);
  width: 23%;
  aspect-ratio: 1;
  border-radius: 50%;
  display:flex; flex-direction: column; align-items:center; justify-content:center;
  text-align:center;
  background: radial-gradient(circle at 50% 30%, rgba(var(--ink),0.08), rgba(var(--surface-rgb),0.96) 70%);
  border: 2px solid var(--c);
  box-shadow: 0 0 0 6px rgba(var(--ink),0.02), 0 0 34px -6px var(--c);
  animation: emFloat 6s ease-in-out infinite;
}
.em-orb:nth-child(odd){ animation-delay: -3s; }
.em-orb i{ color: var(--c); font-size: clamp(1rem, 2.2vw, 1.45rem); line-height: 1; }
.em-orb b{ color: var(--heading); font-size: clamp(.7rem, 1.3vw, .92rem); margin-top: 4px; line-height: 1.1; }
.em-orb span{ color: var(--muted); font-size: clamp(.56rem, .95vw, .68rem); line-height: 1.15; }
.em-orb-core{
  --c: #ff1f2d;
  left: 50%; top: 50%;
  width: 30%;
  background: radial-gradient(circle at 50% 30%, rgba(255,31,45,0.35), rgba(var(--surface-rgb),0.98) 70%);
  box-shadow: 0 0 0 10px rgba(255,31,45,0.06), 0 0 80px -6px rgba(255,31,45,0.8);
  animation: emPulse 3s ease-in-out infinite;
}
.em-orb-core i{ color: var(--heading); font-size: clamp(1.3rem, 2.8vw, 1.9rem); }
.em-orb-core b{ font-size: clamp(.9rem, 1.6vw, 1.15rem); }
@keyframes emFloat{ 0%,100%{ transform: translate(-50%, -50%); } 50%{ transform: translate(-50%, calc(-50% - 6px)); } }
@keyframes emPulse{
  0%,100%{ box-shadow: 0 0 0 10px rgba(255,31,45,0.06), 0 0 60px -6px rgba(255,31,45,0.6); }
  50%{ box-shadow: 0 0 0 18px rgba(255,31,45,0.04), 0 0 100px -6px rgba(255,31,45,0.95); }
}
.em-hero2 + .em-stats{ margin-top: -36px; }

@media (max-width: 992px){
  .em-hero2{ grid-template-columns: 1fr; padding: 40px 24px 48px; gap: 28px; text-align: center; }
  .em-hero2-sub{ margin-left:auto; margin-right:auto; }
  .em-hero2-cta{ justify-content: center; }
  .em-orbit{ margin: 0 auto; max-width: 400px; }
  .em-hero2 + .em-stats{ margin-top: 16px; }
}
@media (max-width: 576px){
  .em-hero2{ padding: 32px 14px 40px; border-radius: 20px; }
  .em-hero2 + .em-stats{ margin-top: 16px; }
}

/* Negativpreis-Zustand */
.em-side-card.em-neg{
  border-color: rgba(244,114,182,0.55);
  background: linear-gradient(180deg, rgba(244,114,182,0.14), rgba(var(--ink),0.02));
}
.em-side-card.em-neg .em-big{ color: #f472b6; }
.em-side-card.em-neg .em-muted{ color: #f9a8d4; font-weight: 600; }

.em-tab.active, .em-play{ color: #fff; }
:root[data-theme="light"] .em-result-card{ background: radial-gradient(500px 260px at 100% 0%, rgba(255,31,45,0.14), transparent 60%), #fff; box-shadow: var(--shadow); }