/* ==========================================================================
   Zähler (js/views/zaehler.js): Liste je Gebäude, Einheit oder Art, Detail als eigene Ebene.
   Nur Bausteine und Tokens der App (Karten, Listen, Chips, Suchleiste).
   ========================================================================== */
.zl-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.zl-item { cursor: pointer; gap: 12px; }
.zl-item.aus { opacity: .6; }
.zl-werte { display: flex; flex-direction: column; align-items: flex-end; text-align: right; flex: none; min-width: 110px; }
.zl-werte b { font-weight: 650; }
/* Detail */
.zl-detail { display: flex; flex-direction: column; gap: 14px; }
.zl-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.zl-kpi { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: var(--r-mittel); background: var(--inset); min-width: 0; }
.zl-kpi b { font-size: 18px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zl-hinweis { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border-radius: var(--r-mittel); background: var(--inset); color: var(--ink-2); font-size: 13px; }
.zl-hinweis.warn { color: var(--warn-text, var(--warn)); }
.zl-chart .h3, .zl-verlauf-kopf .h3 { margin: 0 0 8px; }
.zl-verlauf-kopf { display: flex; align-items: center; gap: 8px; }
.zl-zeile { gap: 12px; }
.zl-datum { width: 88px; flex: none; color: var(--ink-2); }
.zl-stand { width: 130px; flex: none; text-align: right; }
.zl-zeile.auffaellig .zl-stand { color: var(--warn-text, var(--warn)); }
.zl-auff { color: var(--warn-text, var(--warn)); font-weight: 600; }
/* Ablesung erfassen */
.zl-info { font-size: 13px; color: var(--ink-2); display: flex; flex-direction: column; gap: 6px; }
.zl-warn { display: flex; align-items: flex-start; gap: 6px; color: var(--warn-text, var(--warn)); }
.zl-warn svg { flex: none; margin-top: 2px; }
.zl-foto { cursor: pointer; }
@media (max-width: 640px) {
  .zl-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zl-item { flex-wrap: wrap; }
  .zl-item > .grow { flex: 1 1 calc(100% - 60px); }
  .zl-werte { align-items: flex-start; text-align: left; margin-left: 52px; }
  .zl-stand { width: auto; }
  .zl-datum { width: 78px; }
}