/* energie.css — Energie-Cockpit + Emissionsüberwachung */

/* ─── KPI-Banner Energie ──────────────────────────────────────────────── */
.energie-kpi-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.energie-kpi-card {
  flex: 1 1 120px;
  min-width: 110px;
  background: var(--bg1);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transition: border-color 0.2s;
}
.energie-kpi-card.kpi-ok    { border-color: var(--success); }
.energie-kpi-card.kpi-warn  { border-color: var(--warn); }
.energie-kpi-card.kpi-alarm { border-color: var(--error); }

.ekc-icon   { font-size: 20px; line-height: 1; }
.ekc-wert   { font-size: 18px; font-weight: 700; font-family: var(--mono); }
.ekc-einheit{ font-size: 10px; color: var(--t3); }
.ekc-label  { font-size: 11px; color: var(--t2); margin-top: 2px; }
.ekc-ziel   { font-size: 10px; border-radius: 6px; padding: 1px 6px; margin-top: 3px; }
.ekc-ziel.kpi-ok    { background: var(--success-bg, #16a34a22); color: var(--success); }
.ekc-ziel.kpi-warn  { background: var(--warn-bg,    #d9770622); color: var(--warn); }
.ekc-ziel.kpi-alarm { background: var(--error-bg,   #dc262622); color: var(--error); }

/* ─── Monatssummen-Zeile ──────────────────────────────────────────────── */
.energie-summen {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--bg2);
  border-radius: 8px 8px 0 0;
  font-size: 12px;
  color: var(--t2);
  border-bottom: 1px solid var(--border);
}
.energie-summen b { color: var(--t1); }

/* ─── Emissionen KPI-Banner ───────────────────────────────────────────── */
.emissionen-kpi-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.em-kpi-card {
  flex: 1 1 200px;
  background: var(--bg1);
  border: 2px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color 0.2s;
}
.em-kpi-card.em-ok    { border-color: var(--success); }
.em-kpi-card.em-warn  { border-color: var(--warn); }
.em-kpi-card.em-alarm { border-color: var(--error); background: var(--error-bg, #dc262608); }

.em-icon  { font-size: 22px; line-height: 1; }
.em-name  { font-size: 14px; font-weight: 700; color: var(--t1); margin-bottom: 4px; }
.em-row   { font-size: 12px; color: var(--t2); display: flex; gap: 12px; flex-wrap: wrap; }
.em-row b { font-weight: 600; }
.em-jahr  { font-size: 10px; color: var(--t3); margin-top: 4px; }

/* ─── Ampelfarben inline ──────────────────────────────────────────────── */
.em-ok    { color: var(--success); }
.em-warn  { color: var(--warn); }
.em-alarm { color: var(--error); font-weight: 600; }

/* ─── Formularbereich ─────────────────────────────────────────────────── */
.form-section-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 0 0;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}