:root{
  --bg-top:#1b2230;
  --bg-bot:#0f141c;
  --ink:#e8eef8;
  --muted:#a7b0c0;
  --accent:#0096fa;
  --sep:rgba(255,255,255,.08);
  --good:#31c48d;
  --warn:#f59e0b;
  --bad:#ef4444;
  --bad_neg: #df0101;

  --ov-cols: 1.2fr 0.9fr 0.9fr 1.1fr;
  --ov-gap: 8px;
  --ov-pad: 6px;
}

/* ================= BASIS ================= */
.ov{
  background: linear-gradient(to bottom, var(--bg-top), var(--bg-bot));
  color: var(--ink);
  border-bottom: 0px solid var(--accent);
  box-shadow: 0 0 8px #fff;
}

.ov__inner{
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  gap: var(--ov-gap);
  grid-template-columns: var(--ov-cols);
  padding: var(--ov-pad);
}

.ov__slot{
  position: relative;
  padding: 8px 12px;
  background: linear-gradient(180deg, rgba(100, 100, 100, 0.124), rgba(49,196,141,0)),
    rgba(255,255,255,.035);
  border: 1px solid var(--sep);
  border-top: 3px solid #555;
  min-height: 46px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* ================= FIRMA ================= */
.ov__company h3{ margin:0; font-size:.82rem; }
.ov__company small{ color:var(--muted); }

/* ================= STROM / DIESEL ================= */
.ov__pill h4{
  margin:0;
  font-size:.62rem;
  color:var(--muted);
  font-weight:600;
}
.ov__value{
  font-weight:800;
  font-size:0.8rem;
}

/* Farben + Hintergründe */
.ov__pill--power{
  border-top: 2px solid rgba(49,196,141,.7);
  background:
    linear-gradient(180deg, rgba(49,196,141,.08), rgba(49,196,141,0)),
    rgba(255,255,255,.035);
}

.ov__pill--diesel{
  border-top: 2px solid rgba(245,158,11,.7);
  background:
    linear-gradient(180deg, rgba(245,158,11,.08), rgba(245,158,11,0)),
    rgba(255,255,255,.035);
}

/* Icons */
.ov__pill::before{
  content:"";
  position:absolute;
  top:8px;
  right:8px;
  width:16px;
  height:16px;
  opacity:.8;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}

.ov__pill--power::before{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2331c48d' stroke-width='2'><path d='M13 2L4 14h6l-1 8 9-12h-6l1-8z'/></svg>");
}

.ov__pill--diesel::before{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f59e0b' stroke-width='2'><path d='M3 6h10v14H3z'/><path d='M15 8h2l2 2v6'/></svg>");
}

.ov__pill .ov__value,
.ov__pill h4{
  padding-right: 22px;
}

/* ================= KONTOBLOCK (NEU) ================= */
.ov__money{
  position: relative;
  background:
    linear-gradient(180deg, rgba(0,150,250,.10), rgba(0,150,250,0)),
    rgba(255,255,255,.035);
  border-top: 2px solid rgba(0,150,250,.7);
  padding-left: 26px;
  text-align: right;
}

/* kleines Icon */
.ov__money::before{
  content:"";
  position:absolute;
  top:8px;
  left:8px;
  width:16px;
  height:16px;
  opacity:.6;
  background-size:contain;
  background-repeat:no-repeat;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230096fa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M17 7a5 5 0 0 0-10 0'/><path d='M17 17a5 5 0 0 1-10 0'/><path d='M3 10h10'/><path d='M3 14h10'/></svg>");
}

/* Woche */
.ov__week{
  font-size:.65rem;
  opacity:.8;
  margin-bottom:4px;
  border-bottom:1px solid rgba(255,255,255,.05);
  padding-bottom:3px;
  text-align: right;
}

/* Konto Wert */
.ov__money .ov__value{
  font-size:0.8rem;
  font-weight:900;
  letter-spacing:.3px;
  text-align: right;
}

.ov__money .pos{
  color: var(--good);
  text-shadow: 0 0 6px rgba(49,196,141,.35);
}

.ov__money .neg{
  color: var(--bad_neg);
  text-shadow: 0 0 6px rgba(239,68,68,.35);
}

/* Negativer Kontostand – dezente Warnoptik */
.ov__money.is-negative{
  background:
    linear-gradient(180deg, rgba(239,68,68,.10), rgba(239,68,68,0)),
    rgba(255,255,255,.035);

  border: 1px solid rgba(239,68,68,.35);
}

/* optional: etwas stärkerer Glow bei negativ */
.ov__money.is-negative .ov__value{
  text-shadow: 0 0 6px rgba(239,68,68,.4);
}

/* ================= KPI ================= */
.ov__stats{
  max-width:1200px;
  margin:0 auto;
  padding: var(--ov-pad);
  display:grid;
  gap: var(--ov-gap);
  grid-template-columns: var(--ov-cols);
  border-top:1px solid var(--sep);
}

.ovstat{
  background: rgba(255,255,255,.035);
  border:1px solid var(--sep);
  min-height:40px;
  padding:6px 10px;
  display:flex;
  justify-content:space-between;
}

.ovstat__label{ color:var(--muted); font-size:.78rem; }
.ovstat__value{ font-weight:800; }
.ovstat--delay .ovstat__value{ color: var(--warn); }

/* ================= TABLET ================= */
@media (max-width: 980px){
  .ov{ --ov-cols: 1fr 1fr; }

  .ov__inner{ grid-template-columns: var(--ov-cols); }
  .ov__stats{ grid-template-columns: var(--ov-cols); }
}

/* ================= MOBILE ================= */
@media (max-width: 540px){

  .ov{ --ov-cols: 1fr 1fr; }

  .ov__inner{
    grid-template-columns: 1fr 1fr;
  }

  /* Layout */
  .ov__company{ grid-column: 1 / -1; }
  .ov__money{ grid-column: 1 / -1; text-align: right; }

  /* KPI 2x2 */
  .ov__stats{
    grid-template-columns: 1fr 1fr;
  }

  .ovstat{
    flex-direction: column;
    min-height:54px;
  }

  .ovstat__value{
    text-align:right;
    font-size:1rem;
  }
}