/* ===== KPI Header (klassisch, dezent) ===== */
#kpiBar.kpi-bar{
  display:flex; gap:12px; align-items:stretch; flex-wrap:wrap;
  justify-content:flex-end;
}
.kpi{ background:var(--panel, #0f1b22); border:1px solid var(--panel-border, #1f2d36);
  border-radius:12px; padding:10px 12px; min-width:180px; box-shadow:0 0 0 1px rgba(0,0,0,.12) inset;
}
.kpi-head{ display:flex; align-items:center; gap:8px; font-size:.82rem; color:var(--muted, #93a4b0); }
.kpi-ic{ width:16px; height:16px; fill:var(--brand, #18d3c6); opacity:.9; }
.kpi-hide{ margin-left:auto; background:transparent; border:0; cursor:pointer; color:var(--muted, #93a4b0); padding:2px; }
.kpi-hide .eye{ width:16px; height:16px; fill:currentColor; opacity:.75; }
.kpi-value{ margin-top:4px; font-weight:700; font-size:1.3rem; color:var(--text, #e8f0f6); letter-spacing:.2px; }
.kpi-unit{ font-weight:600; font-size:.9rem; opacity:.8; margin-left:4px; }
.kpi-hidden .kpi-num{ filter:blur(6px); }
@media (max-width: 1200px){
  #kpiBar.kpi-bar{ justify-content:flex-start; }
}
/* Optionaler Grid-Wrapper wenn Tabs & KPI in einer Zeile laufen sollen */
.header-controls{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:12px; align-items:center;
}
@media (max-width: 1200px){
  .header-controls{ grid-template-columns: 1fr; }
}

#kpiHost{display:flex; justify-content:flex-end; gap:12px; flex-wrap:wrap;}

.kpi-placeholder{opacity:.6}
#kpiBar{min-height:52px}


/* Strong layout to keep Tabs and KPI in one row */
.header-controls{display:grid !important; grid-template-columns: 1fr auto !important; align-items:center !important; gap:12px;}
#kpiHost{display:flex !important; justify-content:flex-end !important; gap:12px; flex-wrap:wrap;}



/* dezente Unterzeile für KPI-Legenden (bewährter Stil) */
/** dezente Unterzeile im KPI-Header, eigene Zeile **/
.kpi .kpi-head .kpi-sub{
  display:block;
  font-size:11px;
  opacity:.7;
  margin:2px 0 0 0;
  white-space:nowrap;
}


/* Fallback: Zeige den Zusatz auch CSS-seitig an, unabhängig vom Markup */
.kpi[data-key="real"] .kpi-head span:not(:has(.kpi-sub))::after{
  content:"(dieser Kalendermonat)";
  display:block;
  font-size:11px;
  opacity:.7;
  margin-top:2px;
  white-space:nowrap;
}