/* =================================================================
   Energietracker v1.0.0 — Components
   ================================================================= */

/* ── Buttons ────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  background: var(--bg-2);
  color: var(--text-1);
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 500;
  cursor: pointer; transition: var(--transition);
  text-decoration: none; line-height: 1.2;
}
.btn:hover  { background: var(--bg-3); border-color: var(--border-strong); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* v2.11.0 (Review UI-09) — Schrift auf Akzent- und Warnfläche aus den Tokens:
   im Hellmodus weiß (5,2:1), im Dunkelmodus dunkel (5,9:1). Rot mit weißer
   Schrift auf --danger-strong (4,8:1 statt 3,8:1). */
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); font-weight: 600; }
.btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn--danger  { background: var(--danger-strong); border-color: var(--danger-strong); color: #fff; }
/* Entfernen-Kreuz einer Zeile: Umriss statt roter Vollfläche (Review UI-20) —
   neben „Speichern" wirkte es wie die Hauptaktion */
/* v2.12.0 — dasselbe für Löschen-Knöpfe auf Karten (`.btn--quiet`) */
.btn--danger.btn--icon, .btn--danger.btn--quiet { background: transparent; color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.btn--danger.btn--icon:hover, .btn--danger.btn--quiet:hover { background: var(--danger-strong); border-color: var(--danger-strong); color: #fff; filter: none; }
.btn--danger:hover { filter: brightness(1.15); }
.btn--ghost   { background: transparent; border-color: var(--border-2); }
.btn--ghost:hover { background: var(--bg-2); }
.btn--util    { background: var(--util, var(--accent)); border-color: var(--util, var(--accent)); color: var(--util-fg, #0a0d12); font-weight: 600; }
.btn--util:hover { filter: brightness(1.1); }
.btn--sm { padding: 4px 10px; font-size: var(--fs-xs); }
.btn--icon { padding: 6px 8px; }

/* ── Pills (year selectors etc) ─────────────────────────────────── */
.pills { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.pill {
  padding: 6px 14px;
  background: var(--bg-2); border: 1px solid var(--border-1);
  border-radius: 999px;
  font-family: var(--font-mono); font-size: var(--fs-sm);
  color: var(--text-2); cursor: pointer; transition: var(--transition);
}
.pill:hover  { color: var(--text-1); border-color: var(--border-strong); }
.pill.active { background: var(--util, var(--accent)); border-color: var(--util, var(--accent)); color: var(--util-fg, #0a0d12); font-weight: 600; }

/* ── Forms ──────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: var(--sp-1); margin-bottom: var(--sp-3); }
.field label, .label { font-size: var(--fs-xs); color: var(--text-3); text-transform: uppercase; letter-spacing: 0.04em; }

.input, .select, textarea.input {
  background: var(--bg-2);
  color: var(--text-1);
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  padding: 8px 12px;
  font-family: var(--font-mono); font-size: var(--fs-sm);
  width: 100%;
  transition: var(--transition);
}
.input:focus, .select:focus, textarea.input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.input.invalid, .select.invalid { border-color: var(--danger); }
.input.invalid:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 25%, transparent); }

.input--text { font-family: var(--font-sans); }

textarea.input { min-height: 80px; resize: vertical; }
.input[type="checkbox"] { width: auto; }

.field-error { font-size: var(--fs-xs); color: var(--danger); margin-top: 2px; }

.form-row {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.form-actions {
  display: flex; gap: var(--sp-2); justify-content: flex-end;
  margin-top: var(--sp-5); flex-wrap: wrap;
}

/* Group of dated entries (Arbeitspreis/Grundpreis/Abschlag rows) */
.entry-group {
  background: var(--bg-2); border: 1px solid var(--border-1);
  border-radius: var(--r-md); padding: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.entry-group__head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: var(--sp-3);
}
.entry-group__title { font-size: var(--fs-sm); color: var(--text-2); text-transform: uppercase; letter-spacing: 0.05em; }

.entry-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto; gap: var(--sp-2);
  align-items: end; margin-bottom: var(--sp-2);
}
.entry-row .input { font-size: var(--fs-sm); }
.entry-row .btn--icon { align-self: end; height: 36px; }
/* v2.5.3 — Die Zeile hat eigene Abstände; der Feld-Außenabstand ließ die
   Knöpfe (×, ⇧ Start) 12 px unter den Eingaben stehen. */
.entry-row > .field, .special-advance > .field { margin-bottom: 0; }
/* v2.7.0 — Umrechnungshilfe „Preis je m³" unter den Gas-Arbeitspreisen */
.perm3 { margin-top: var(--sp-2); font-size: var(--fs-sm); }
.perm3 > summary { cursor: pointer; color: var(--text-2); }
.perm3__row { margin-top: var(--sp-2); align-items: flex-end; }
.perm3__result { margin: var(--sp-1) 0 0; font-variant-numeric: tabular-nums; }
.entry-group > .field-error { margin: -4px 0 var(--sp-2); }

/* v2.5.3 (UI-11) — Sonderzahlung: eigenes Raster. Im allgemeinen Vier-Spalten-
   Raster schrumpfte das Datum auf rund 25 px, der Betrag war abgeschnitten.
   Zeile 1: Datum, Betrag, Art, ×. Darunter die Notiz und — nur bei Arten
   „mit Auswirkung" — die Abschlagsanpassung. Der Entfernen-Knopf steht oben
   rechts, obwohl er im DOM zuletzt kommt (Tab-Reihenfolge). */
.entry-row.special-row {
  grid-template-columns: minmax(140px, 160px) minmax(90px, 120px) minmax(0, 1fr) auto;
  padding-bottom: var(--sp-3); margin-bottom: var(--sp-3);
  border-bottom: 1px dashed var(--border-1);
}
.special-row > [data-action="remove-special"] { grid-column: 4; grid-row: 1; }
.special-row > .special-row__note { grid-column: 1 / 4; }
.special-row > .special-advance {
  grid-column: 1 / 4;
  display: grid; gap: var(--sp-2);
  grid-template-columns: minmax(140px, 200px) minmax(140px, 200px);
}
.special-row > .special-advance[hidden] { display: none; }

@media (max-width: 600px) {
  .entry-row, .entry-row.special-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* v2.11.0 (Review UI-16) — Knöpfe der Zeile in ihrer Größe statt als
     vollbreiter roter Balken mit winzigem „×" */
  .entry-row > .btn { justify-self: start; }
  .entry-row > .btn--icon { justify-self: end; }
  .special-row > .special-row__kind,
  .special-row > .special-row__note,
  .special-row > .special-advance { grid-column: 1 / -1; }
  .special-row > [data-action="remove-special"] { grid-column: 1 / -1; grid-row: auto; }
  .special-row > .special-advance { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ── Tables ─────────────────────────────────────────────────────── */
.table {
  width: 100%; border-collapse: collapse; font-size: var(--fs-sm);
}
.table th, .table td {
  padding: 10px 12px; text-align: left;
  border-bottom: 1px solid var(--border-1);
}
.table thead th {
  background: var(--bg-2);
  color: var(--text-3); font-weight: 600; font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: 0.04em;
  position: sticky; top: 0;
}
.table tbody tr:hover { background: var(--bg-2); }
/* v2.0.0 (UX) — Zeilen-Hover auch für .data-table (Erinnerungen, Tarif,
   Settings-Export), damit alle Tabellen gleich auf Mausführung reagieren. */
.data-table tbody tr:hover { background: var(--bg-2); }
.table td.num, .table th.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.table .row-actions { display: flex; gap: 4px; justify-content: flex-end; }
/* v2.5.3 (UI-01) — position: relative, damit der Rahmen auch absolut
   positionierte Kinder beschneidet: Das .sr-only-Label „Aktionen" im
   Tabellenkopf entkam sonst dem Scrollbereich und verbreiterte die Seite. */
.table-wrap {
  position: relative;
  overflow-x: auto; border: 1px solid var(--border-1);
  border-radius: var(--r-md); background: var(--bg-1);
}
/* Kopierbare Konfiguration (Home Assistant): scrollt in sich, statt die
   Seite zu verbreitern. */
.code-block {
  position: relative; max-width: 100%; overflow-x: auto;
  margin: 0 0 var(--sp-2); padding: var(--sp-3);
  background: var(--bg-2); border: 1px solid var(--border-1); border-radius: var(--r-md);
  font-family: var(--font-mono); font-size: var(--fs-xs); line-height: 1.5;
}

/* ── Tags / chips ───────────────────────────────────────────────── */
.tag {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: var(--fs-xs); font-family: var(--font-mono);
  background: var(--bg-3); color: var(--text-2);
}
.tag--util { background: var(--util-soft, var(--bg-3)); color: var(--util, var(--text-1)); }
.tag--warning { background: var(--warning-soft); color: var(--warning); }
.tag--danger  { background: var(--danger-soft);  color: var(--danger); }
.tag--success { background: var(--success-soft); color: var(--success); }

/* ── Modals ─────────────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed; inset: 0; background: var(--bg-overlay);
  display: flex; align-items: center; justify-content: center;
  z-index: 100; padding: var(--sp-4); animation: fadeIn 120ms ease-out;
}
/* v2.11.0 (Review UI-16) — Kopf und Fußleiste bleiben stehen, nur der
   Inhalt scrollt: „Speichern" lag bei langen Formularen erst ganz unten. */
.modal {
  background: var(--bg-1); border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  width: min(720px, 100%);
  max-height: 90vh; max-height: 90dvh;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: var(--shadow-3);
  animation: slideUp 160ms ease-out;
}
.modal--sm { width: min(440px, 100%); }
.modal--lg { width: min(960px, 100%); }
.modal__head {
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border-1);
  display: flex; justify-content: space-between; align-items: center;
}
.modal__title { font-size: var(--fs-lg); font-weight: 600; }
.modal__close { background: transparent; border: none; color: var(--text-3); font-size: 24px; cursor: pointer; }
.modal__close:hover { color: var(--text-1); }
.modal__body { padding: var(--sp-5); overflow-y: auto; flex: 1 1 auto; min-height: 0; overscroll-behavior: contain; }
.modal__head, .modal__foot { flex: none; }
.modal__foot {
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--border-1);
  display: flex; justify-content: flex-end; gap: var(--sp-2);
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* ── Toast stack ────────────────────────────────────────────────── */
.toast-stack {
  position: fixed; bottom: 20px; right: 20px;
  display: flex; flex-direction: column; gap: 8px;
  z-index: 200; max-width: 380px;
}
/* v2.6.0 — Bei offenem Dialog oben: Unten rechts lag eine Fehlermeldung
   genau über „Speichern" und fing die Klicks ab, bis sie verschwand. */
body:has(.modal-backdrop) .toast-stack { bottom: auto; top: 20px; }
@media (max-width: 800px) {
  /* über der Tab-Leiste (v2.11.0) */
  .toast-stack { left: 12px; right: 12px; bottom: calc(12px + var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); max-width: none; }
  body:has(.modal-backdrop) .toast-stack { bottom: auto; top: calc(12px + env(safe-area-inset-top, 0px)); }
}
.toast {
  background: var(--bg-1); border: 1px solid var(--border-2);
  border-left: 3px solid var(--info);
  border-radius: var(--r-md); padding: 12px 16px;
  font-size: var(--fs-sm); box-shadow: var(--shadow-2);
  animation: slideIn 160ms ease-out;
}
.toast--success { border-left-color: var(--success); }
.toast--warning { border-left-color: var(--warning); }
.toast--error   { border-left-color: var(--danger); }
/* v2.2.0 — Schließen-Knopf: eine Meldung verschwand nach wenigen Sekunden
   unwiderruflich (WCAG 2.2.1). */
.toast { display: flex; align-items: flex-start; gap: var(--sp-3); }
.toast__msg { flex: 1; min-width: 0; }
.toast__close {
  flex: none; background: transparent; border: none;
  color: var(--text-3); font-size: 18px; line-height: 1;
  padding: 0 2px; cursor: pointer; border-radius: var(--r-sm);
}
.toast__close:hover { color: var(--text-1); }
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ── Chart container ────────────────────────────────────────────── */
.chart-wrap {
  position: relative; height: 360px; width: 100%;
}
.chart-wrap.tall   { height: 480px; }
.chart-wrap.short  { height: 220px; }

/* v2.15.0 (Review FE-20) — die Zahlen hinter einem Diagramm, aufklappbar;
   die Zeile ist am iPhone 44 px hoch antippbar */
.chart-data { margin-top: var(--sp-2); }
.chart-data > summary {
  cursor: pointer; color: var(--text-2); font-size: var(--fs-sm);
  min-height: 44px; display: flex; align-items: center;
}
.chart-data > summary:hover { color: var(--text-1); }
.chart-data .table-wrap { max-height: 360px; overflow: auto; }
/* v2.15.0 (Review FE-08) — Hinweise unter einem Diagramm, Teilmonate */
.chart-note { margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--text-2); }
.table tr.is-partial td { color: var(--text-2); }
.dash-window { margin: calc(-1 * var(--sp-2)) 0 var(--sp-3); font-size: var(--fs-xs); color: var(--text-2); }
/* v2.16.0 (Review FE-17) — Mini-Verlauf je Karte der Übersicht */
.dash-spark { position: relative; height: 64px; margin-top: var(--sp-3); }
/* Umschalter gemessen/bereinigt im Kartentitel: normale Schrift */
.card__title .seg__btn { text-transform: none; letter-spacing: normal; }

/* ── Device chain / meter card ─────────────────────────────────── */
.meter-card {
  background: var(--bg-1); border: 1px solid var(--border-1);
  border-left: 3px solid var(--util, var(--accent));
  border-radius: var(--r-md); padding: var(--sp-4);
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--sp-3); margin-bottom: var(--sp-3);
}
.meter-card__icon { font-size: var(--fs-2xl); }
.meter-card__main { flex: 1; }
.meter-card__name { font-weight: 600; font-size: var(--fs-md); }
.meter-card__meta { color: var(--text-3); font-size: var(--fs-xs); margin-top: 2px; }
.device-list { list-style: none; padding: 0; margin: var(--sp-2) 0 0; }
.device-list li {
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-2);
  padding: 4px 0; border-top: 1px dashed var(--border-1);
}
.device-list li:first-child { border-top: none; }
.device-list .open { color: var(--success); }
.device-list .closed { color: var(--text-3); }

/* ── Drag-drop zone (CSV) ───────────────────────────────────────── */
.drop-zone {
  border: 2px dashed var(--border-2);
  border-radius: var(--r-md);
  padding: var(--sp-8) var(--sp-4);
  text-align: center; color: var(--text-2);
  background: var(--bg-1); transition: var(--transition);
  cursor: pointer;
}
.drop-zone:hover, .drop-zone.dragover {
  border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent);
  color: var(--text-1);
}

/* ── Banner / alert ─────────────────────────────────────────────── */
.banner {
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
  margin-bottom: var(--sp-4); font-size: var(--fs-sm);
  border: 1px solid var(--border-1);
}
.banner--info    { background: color-mix(in srgb, var(--info) 8%, transparent);  border-color: color-mix(in srgb, var(--info) 30%, transparent); color: var(--info); }
.banner--warning { background: var(--warning-soft); border-color: var(--warning); color: var(--warning); }
.banner--error   { background: var(--danger-soft);  border-color: var(--danger);  color: var(--danger); }
.banner--success { background: var(--success-soft); border-color: var(--success); color: var(--success); }

/* ── Compact table variant (for nested analysis summaries) ─────── */
.table--compact th, .table--compact td {
  padding: 6px 10px;
  font-size: var(--fs-xs);
}
.table--compact thead th { background: transparent; border-bottom: 1px solid var(--border-1); }
.table--compact tbody tr.is-best { background: color-mix(in srgb, var(--success) 8%, transparent); }
.table--compact tbody tr.is-best:hover { background: color-mix(in srgb, var(--success) 14%, transparent); }

/* ── Legend swatch (inline color marker for regression models) ── */
.legend-swatch {
  display: inline-block; width: 14px; height: 3px;
  margin-right: 6px; vertical-align: middle;
  border-radius: 2px;
}

/* ── Badges ─────────────────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 2px 8px; margin-left: var(--sp-2);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs); font-family: var(--font-sans); font-weight: 500;
  letter-spacing: 0.02em;
  background: var(--bg-3); color: var(--text-2);
  vertical-align: 1px;
}
.badge--success { background: var(--success-soft); color: var(--success); }
.badge--warning { background: var(--warning-soft); color: var(--warning); }
.badge--danger  { background: var(--danger-soft);  color: var(--danger); }
.badge--info    { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
/* v2.2.0 — Schattenvertrag: hypothetisch, zählt in keiner Kostenrechnung mit.
   Gleiche Tönung wie .status-pill.shadow, damit Tarifvergleich und
   Vertragsliste dieselbe Sprache sprechen. */
.badge--shadow  { background: var(--c-violet-soft); color: var(--c-violet); }

/* ── Regression summary block (analysis view) ─────────────────── */
.regression-summary {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border-1);
}
.regression-summary .table { font-family: var(--font-mono); }
.regression-summary .muted { font-family: var(--font-mono); font-size: var(--fs-xs); }

/* ── Knopf-Tiefe ────────────────────────────────────────────────────
   v2.11.0 (Review UI-09) — Vollfarbe statt Verlauf: Das untere Ende des
   Verlaufs mischte 20 % Seitenhintergrund hinein und drückte den Kontrast
   der Schrift unter 4,5:1 (Gas-Orange 2,2:1). Die Tiefe kommt vom Schatten. */
.btn--primary {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 2px 8px -2px color-mix(in srgb, var(--accent) 40%, transparent);
}
.btn--primary:hover {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 4px 12px -2px color-mix(in srgb, var(--accent) 55%, transparent);
}
.btn--util {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 2px 8px -2px color-mix(in srgb, var(--util, var(--accent)) 40%, transparent);
}

/* ── Soft glow on focused inputs ───────────────────────────────── */
.input:focus, .select:focus, textarea.input:focus {
  outline: none; border-color: var(--accent);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent),
    0 1px 8px -2px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* ── Meter card hover ──────────────────────────────────────────── */
.meter-card { transition: var(--transition); }
.meter-card:hover {
  border-color: var(--border-strong);
  box-shadow: 0 6px 20px -8px color-mix(in srgb, var(--util, var(--accent)) 40%, transparent);
}

/* =================================================================
   v1.0.2 — restored v0.9.0 patterns
   ================================================================= */

/* ── Year pills row ─────────────────────────────────────────────── */
.year-pills {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}
.year-pills .pill { padding: 5px 14px; }
/* Die aktive Jahres-Pille je Verbrauchsart kommt seit v2.2.0 aus der SSOT
   (utility-theme.js) — vorher blieb sie bei Fernwärme, Heizöl, Pellets und PV
   unmarkiert, weil es die Klassen schlicht nicht gab. */

/* ── Balance grid (Saldo-Karte: 4 Spalten) ──────────────────────── */
/* v2.5.3 (UI-01) — minmax(0, …): „Vergütungsanspruch" in Großbuchstaben
   dehnte die Spalte auf dem iPhone SE über den Rand. Beschriftungen brechen
   jetzt um. */
.balance-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 18px;
  align-items: stretch;
}
@media (max-width: 900px) { .balance-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.balance-col__label { overflow-wrap: anywhere; hyphens: auto; }
.balance-col__label {
  font-size: 11px; font-weight: 500; color: var(--text-2);
  text-transform: uppercase; letter-spacing: 0.07em;
  margin-bottom: 6px;
}
.balance-col__value {
  font-family: var(--font-mono); font-size: 18px; font-weight: 500;
  color: var(--text-1);
}
.balance-col__sub {
  font-size: 11px; color: var(--text-2);
  margin-top: 4px;
}
/* v2.8.0 — Abschlagsvorschlag unter der Saldo-Karte (UI-36) */
.balance-suggest {
  margin: var(--sp-3) 0 0; padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md); font-size: var(--fs-sm);
  background: color-mix(in srgb, var(--info) 8%, transparent); color: var(--text-1);
}
/* v2.16.0 (Review FE-31) — Saldo-Verlauf unter den Kennzahlen der Karte */
.balance-path { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--border-1); }
/* v2.9.0 — Vertragshinweise (weiterlaufend, Frist verpasst, Preiserhöhung) */
.balance-note {
  margin: var(--sp-2) 0 0; padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md); font-size: var(--fs-sm);
  background: color-mix(in srgb, var(--warning) 10%, transparent); color: var(--text-1);
}
/* v2.10.0 — Tankbuch: Peilstände kompakt, damit sie am iPhone in die Karte passen */
.tank-levels .table td { padding: 8px 10px; }
.tank-levels .table td.actions { width: 1%; white-space: nowrap; }
.balance-col__breakdown {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-3);   /* v2.11.0: --text-disabled lag unter 3:1 */
  margin-top: 4px;
}
/* v2.13.0 (Review UI-18) — Farbe nach Bedeutung; bis v2.12 war die rote
   Klasse „positive" (positiver Saldo = Nachzahlung) */
.balance-col__value--credit { color: var(--success); }
.balance-col__value--due { color: var(--danger); }

/* Verdict box (rechte Spalte) */
.balance-verdict {
  padding: 14px 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-1);
  display: flex; flex-direction: column; justify-content: center;
}
.balance-verdict.refund   { background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 30%, transparent); }
.balance-verdict.surcharge{ background: var(--danger-soft);  border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.balance-verdict.balanced { background: var(--bg-2); border-color: var(--border-2); }
.balance-verdict__label {
  font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-2);
  margin-bottom: 4px;
}
.balance-verdict__value {
  font-family: var(--font-mono); font-size: 22px; font-weight: 600;
}
.balance-verdict__verdict {
  font-size: 11px; font-weight: 600;
  margin-top: 4px;
}
.balance-verdict.refund   .balance-verdict__value,
.balance-verdict.refund   .balance-verdict__verdict { color: var(--success); }
.balance-verdict.surcharge .balance-verdict__value,
.balance-verdict.surcharge .balance-verdict__verdict { color: var(--c-red); }
.balance-verdict__date {
  font-size: 10px; color: var(--text-2);
  margin-top: 8px;
}

/* ── Contract table specific styling ────────────────────────────── */
.contracts-table .provider-cell { font-weight: 600; color: var(--text-1); }
.contracts-table .provider-cell small {
  display: block; font-weight: 400;
  font-size: 11px; color: var(--text-2);
  margin-top: 2px;
}
.contracts-table .period-cell {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-2);
}

/* Status pill in contract table */
.status-pill {
  display: inline-block;
  padding: 2px 8px; border-radius: 100px;
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.05em;
  background: var(--bg-3); color: var(--text-2);
}
.status-pill.active { background: var(--success-soft); color: var(--success); }
.status-pill.past   { background: var(--bg-3);        color: var(--text-2); }
.status-pill.future { background: var(--c-blue-soft); color: var(--c-blue); }
/* v2.2.0 — Schattenvertrag: hypothetisch, zählt in keiner Kostenrechnung mit.
   Bewusst violett statt grün, damit er nicht mit einem aktiven Vertrag
   verwechselt wird. */
.status-pill.shadow { background: var(--c-violet-soft); color: var(--c-violet); }
/* v2.6.0 — Verdacht (Home Assistant, fallender Stand) und unplausible Stände */
.status-pill.suspect,
.status-pill.implausible { background: var(--warning-soft); color: var(--warning); cursor: help; }
.table tr.row--flagged > td { background: color-mix(in srgb, var(--warning-soft) 60%, transparent); }

/* v2.6.0 — Listen in Hinweisen und Dialogen (Warnungen, Rückfragen,
   Backup-Vorschau und -Fundstellen) */
.warning-list,
.check-list,
.problem-list,
.import-preview { margin: 6px 0 0; padding-left: 1.2em; }
.warning-list li,
.check-list li,
.problem-list li,
.import-preview li { margin: 3px 0; overflow-wrap: anywhere; }
.warning-list { font-size: 12px; }
.check-list li { margin: 6px 0; }
.problem-list { max-height: 16rem; overflow-y: auto; font-size: 12px; }
.import-preview { margin-bottom: var(--sp-3); }

/* v2.6.0 — Snapshot-Liste in den Einstellungen */
.snapshot-list { max-height: 22rem; overflow-y: auto; }
.snapshot-list__actions { text-align: right; white-space: nowrap; }
@media (max-width: 420px) { .snapshot-list__size { display: none; } }
a.icon-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

/* ── Monthly table with full v0.9.0 column set ──────────────────── */
.table .col-violet { color: var(--c-violet); }
.table .col-blue   { color: var(--c-blue); }
.table .col-yellow { color: var(--c-yellow); }
.table tfoot tr { background: var(--bg-2); font-weight: 600; }
.table tfoot td { border-top: 1px solid var(--border-2); }

/* ── Icon buttons (inline edit / delete) ────────────────────────── */
.icon-btn {
  background: transparent; border: none;
  color: var(--text-2);
  padding: 2px 6px; border-radius: var(--r-sm);
  cursor: pointer; font-size: 13px;
  transition: var(--transition);
}
.icon-btn:hover { background: var(--bg-3); color: var(--text-1); }

/* ── Refined buttons for utility-tinted CTAs ────────────────────── */
/* .btn-<key> wird seit v2.2.0 aus der SSOT erzeugt (utility-theme.js). */

/* Toolbar inside cards */
.toolbar {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px;
}
.toolbar .spacer { flex: 1; }

/* Chart wrappers with named heights */
.chart-wrap.h220 { height: 220px; }
.chart-wrap.h300 { height: 300px; }
.chart-wrap.h360 { height: 360px; }

/* =================================================================
   v1.1.0 — Settings rework, CSV export tiles, water spar-index
   ================================================================= */

/* ── section-head (used across views, previously unstyled) ───────── */
.section-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}
.section-head h1 {
  font-size: 20px; font-weight: 700; line-height: 1.2; color: var(--text-1);
}
.section-actions {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}

/* ── Settings: grouped cards in a responsive grid ───────────────── */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-2);
}
.settings-card { margin-bottom: 0; }
.settings-card__hint {
  font-size: var(--fs-xs); color: var(--text-2);
  margin: -6px 0 var(--sp-4); line-height: 1.5;
}
.settings-fields {
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.settings-field { margin-bottom: 0; }
.settings-field > label {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
}
.settings-field__unit {
  font-size: 11px; color: var(--text-3);
  text-transform: none; letter-spacing: 0;
  font-family: var(--font-mono);
}
.settings-field__hint {
  font-size: var(--fs-xs); color: var(--text-3);
  line-height: 1.45; margin-top: 2px;
}
/* v2.9.0 — Zahl mit Einheit nebeneinander (Kündigungsfrist); minmax(0,1fr),
   damit das Paar auf dem iPhone nicht über den Rand wächst */
.input-pair {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-2);
}
.settings-field__check {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-size: var(--fs-sm);
  color: var(--text-1); text-transform: none; letter-spacing: 0;
  padding: 6px 0;
}
.settings-rule {
  border: none; border-top: 1px solid var(--border-1);
  margin: var(--sp-4) 0;
}
.settings-subhead {
  margin: 0 0 8px; font-size: 13px; color: var(--text-1); font-weight: 600;
}

/* ── CSV export tiles (F-07) ────────────────────────────────────── */
.export-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--sp-3);
}
.export-tile {
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  display: flex; flex-direction: column; gap: 6px;
}
.export-tile__label {
  font-size: var(--fs-sm); font-weight: 600; color: var(--text-1);
}
.export-tile__hint {
  font-size: var(--fs-xs); color: var(--text-2); line-height: 1.45;
  flex: 1;
}
.export-tile__actions {
  display: flex; gap: 6px; flex-wrap: wrap; margin-top: var(--sp-2);
}

/* ── Water spar-index (F-10) ────────────────────────────────────── */
.sparindex {
  display: flex; align-items: center; gap: var(--sp-5);
  flex-wrap: wrap;
}
.sparindex__main {
  display: flex; align-items: baseline; gap: var(--sp-3);
}
.sparindex__value {
  font-family: var(--font-mono); font-size: 40px; font-weight: 500;
  line-height: 1;
}
.sparindex__badge { vertical-align: middle; }
.sparindex__detail {
  font-family: var(--font-mono); font-size: var(--fs-sm);
  display: flex; flex-direction: column; gap: 2px;
}
.sparindex__bar { margin-top: var(--sp-4); }
.sparindex__bar-track {
  position: relative; height: 12px;
  border-radius: 999px; overflow: hidden;
  background: var(--bg-3);
}
.sparindex__bar-zone {
  position: absolute; top: 0; bottom: 0;
}
.sparindex__bar-zone--gut     { left: 0; background: var(--success-soft); }
.sparindex__bar-zone--mittel  { background: var(--warning-soft); }
.sparindex__bar-zone--warnung { background: var(--danger-soft); }
.sparindex__bar-marker {
  position: absolute; top: -3px; bottom: -3px; width: 3px;
  background: var(--text-1);
  border-radius: 2px;
  box-shadow: 0 0 0 2px var(--bg-1);
  transform: translateX(-50%);
}
.sparindex__bar-labels {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--text-3);
  font-family: var(--font-mono);
  margin-top: 6px;
}

/* =================================================================
   v1.2.0 — System-Diagnose Layout + Chip-Listen
   ================================================================= */

/* Zweispaltiges Definition-Grid für die Diag-Header-Zeilen. */
.diag-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--sp-2) var(--sp-4);
  margin: 0 0 var(--sp-5);
  padding: 0;
}
.diag-grid dt {
  font-size: var(--fs-xs);
  color: var(--text-2);
  text-transform: uppercase; letter-spacing: 0.06em;
  align-self: center;
}
.diag-grid dd {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-1);
  word-break: break-word;
}
.diag-grid dd.mono { font-family: var(--font-mono); font-size: var(--fs-xs); }
.diag-grid dd.path {
  background: var(--bg-2);
  padding: 4px 8px;
  border-radius: var(--r-sm);
  display: inline-block;
  border: 1px solid var(--border-1);
}

.diag-subhead {
  font-size: var(--fs-xs);
  color: var(--text-2);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin: var(--sp-5) 0 var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border-1);
}
.diag-line { font-size: var(--fs-sm); margin: 0 0 var(--sp-3); }

.diag-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.chip {
  display: inline-block;
  font-family: var(--font-mono); font-size: 11px;
  padding: 3px 8px;
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-radius: var(--r-sm);
  color: var(--text-1);
  white-space: nowrap;
}

@media (max-width: 600px) {
  .diag-grid { grid-template-columns: 1fr; gap: 2px var(--sp-4); }
  .diag-grid dt { padding-top: var(--sp-2); }
}

/* =====================================================================
   v1.3.0 — Neue Komponenten (Empfehlungen, Termine, Tarifvergleich,
   dynamische Sidebar, generische Datentabelle)
   ===================================================================== */

/* Sidebar-Badges (offene Empfehlungen / fällige Termine) */
.sidebar__badge {
  margin-left: auto;
  min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-xs); font-weight: 600;
  border-radius: 9px;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--accent);
}
.sidebar__badge--alert {
  background: color-mix(in srgb, var(--danger) 22%, transparent);
  color: var(--danger);
}

/* v2.12.0 (Review UI-20) — `.view-head` entfernt: Termine, Empfehlungen und
   Tarifvergleich nutzen jetzt `.view-header` wie alle anderen Seiten. Ihr
   <h1> hatte keine eigene Größe und erschien mit 32 px statt 20 px. */

/* Segmentierter Filter-Umschalter */
.seg { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.seg__btn {
  padding: 6px 12px; font-size: var(--fs-sm);
  background: var(--bg-2); color: var(--text-2);
  border: 1px solid var(--border-1); border-radius: var(--r-sm);
  cursor: pointer; transition: background 120ms, color 120ms;
}
.seg__btn:hover { background: var(--bg-3); color: var(--text-1); }
.seg__btn.active {
  background: var(--accent); color: var(--accent-fg);
  border-color: var(--accent); font-weight: 600;
}

/* Empfehlungs-Karten */
.rec-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.rec-card {
  background: var(--bg-1); border: 1px solid var(--border-1);
  border-left: 3px solid var(--text-2);
  border-radius: var(--r-md); padding: var(--sp-4);
}
.rec-card--danger  { border-left-color: var(--danger); }
.rec-card--warning { border-left-color: var(--warning); }
.rec-card--info    { border-left-color: var(--accent); }
.rec-card__head {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}
.rec-card__cat { font-size: var(--fs-xs); color: var(--text-2); }
/* v2.11.0 (Review UI-26) — „30 Tage ausblenden" als Text statt ✕ */
.rec-card__dismiss { margin-left: auto; }
.rec-card__title { font-weight: 600; margin-bottom: 4px; }
.rec-card__detail { font-size: var(--fs-sm); color: var(--text-2); line-height: 1.5; }

/* Generische Datentabelle */
.data-table {
  width: 100%; border-collapse: collapse; font-size: var(--fs-sm);
}
.data-table th {
  text-align: left; padding: var(--sp-2) var(--sp-3);
  color: var(--text-2); font-weight: 600;
  border-bottom: 1px solid var(--border-2);
}
.data-table td {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border-1);
}
.data-table tr:last-child td { border-bottom: none; }
/* v2.2.0 — violett statt Akzentblau, damit die Schattenzeile dieselbe Farbe
   trägt wie ihr Badge und der Vertragsstatus. */
.data-table .row-shadow { background: color-mix(in srgb, var(--c-violet) 6%, transparent); }
/* v2.3.0 — die Referenzzeile (laufender Vertrag) trägt die Utility-Farbe und
   einen Balken links: Sie ist der Maßstab, gegen den alles andere gelesen
   wird, und darf in der Rangliste nicht wie ein weiteres Angebot wirken. */
.data-table .row-reference {
  background: color-mix(in srgb, var(--util, var(--c-blue)) 7%, transparent);
}
.data-table .row-reference td:first-child {
  box-shadow: inset 3px 0 0 0 var(--util, var(--c-blue));
}
.data-table .delta.pos { color: var(--success, #22c55e); }
.data-table .delta.neg { color: var(--danger); }
.cell-actions { white-space: nowrap; text-align: right; }
.btn--xs { padding: 2px 7px; font-size: var(--fs-xs); }
.small { font-size: var(--fs-xs); }

/* Formular-Grid (Modals) */
.form-grid { display: flex; flex-direction: column; gap: var(--sp-3); }
.form-grid label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: var(--fs-sm); color: var(--text-2);
}
.form-grid input, .form-grid select {
  padding: 8px 10px; font-size: var(--fs-base);
  background: var(--bg-2); color: var(--text-1);
  border: 1px solid var(--border-1); border-radius: var(--r-sm);
}
.form-grid input:focus, .form-grid select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.form-grid input.invalid { border-color: var(--danger); }

/* v1.3.0 — Tank-Bestandsbalken (Heizöl/Pellets) */
.tank-bar-wrap { padding: var(--sp-2) 0; }
.tank-bar {
  position: relative; height: 28px;
  background: var(--bg-2); border: 1px solid var(--border-1);
  border-radius: var(--r-sm); overflow: hidden;
}
.tank-bar__fill {
  height: 100%; transition: width 300ms ease;
  background: color-mix(in srgb, var(--success, #22c55e) 65%, transparent);
}
.tank-bar__fill--warn  { background: color-mix(in srgb, var(--warning) 70%, transparent); }
.tank-bar__fill--alert { background: color-mix(in srgb, var(--danger) 70%, transparent); }
.tank-bar__legend {
  display: flex; justify-content: space-between;
  margin-top: var(--sp-2); font-size: var(--fs-sm);
}

/* v1.3.0 — Dashboard-Insight-Karten */
.dash-insight .card__title { display: flex; align-items: center; justify-content: space-between; }
.dash-eff { display: flex; align-items: baseline; gap: var(--sp-3); margin: var(--sp-2) 0; }
.dash-eff__class {
  font-size: 2.2rem; font-weight: 700; color: var(--accent);
  line-height: 1;
}
.dash-eff__val { font-size: var(--fs-lg); color: var(--text-1); }
.dash-tank { margin-bottom: var(--sp-3); }
.dash-tank:last-child { margin-bottom: 0; }
.dash-tank__label {
  display: flex; justify-content: space-between;
  font-size: var(--fs-sm); margin-bottom: 4px;
}
.dash-rec {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--sp-2) 0; border-bottom: 1px solid var(--border-1);
}
.dash-rec:last-child { border-bottom: none; }
.dash-rec span.muted { font-size: var(--fs-xs); }
.dash-rec--urgent strong { color: var(--danger); }
.dash-rec--warning strong { color: var(--warning); }

/* v1.4.0 — Effizienz pro Heizquelle (Dashboard-Karte) */
.dash-eff-list { display: flex; flex-direction: column; gap: var(--sp-2); margin: var(--sp-2) 0; }
.dash-eff-row {
  display: grid; grid-template-columns: 1fr auto auto;
  align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) 0; border-bottom: 1px solid var(--border-1);
}
.dash-eff-row:last-child { border-bottom: none; }
.dash-eff-row__src { font-size: var(--fs-sm); }
.dash-eff-row__val { font-size: var(--fs-sm); color: var(--text-2); font-variant-numeric: tabular-nums; }
/* v2.7.0 — Länder ohne Effizienzskala: Kennzahl ohne Klasse, Hinweis darunter */
.dash-eff__note { font-size: var(--fs-xs); margin: var(--sp-2) 0 0; }

/* F1005 (v1.7.0) — Strom-Saldo-Insight: KPIs (Bezug, PV-Erlös, Netto, Autarkie, EV-Quote) als auto-fit Grid */
.dash-strom-saldo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}
.dash-strom-saldo .kpi--accent { border: 1px solid var(--accent, #10b981); border-radius: var(--radius-2); padding: var(--sp-2); }

/* v2.0.0 (UX) — Trend-Indikator auf Dashboard-KPIs (letzte 12 vs. vorherige 12
   Monate). Als dezent getönter Chip, damit Richtung/Wert auf einen Blick
   erfassbar sind statt nur als farbiger Text. */
.kpi__trend {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: var(--sp-1, 4px);
  padding: 1px 7px;
  border-radius: 100px;
  font-size: var(--fs-xs);
  font-weight: 600;
  vertical-align: middle;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.kpi__trend--danger  { color: var(--danger);  background: var(--danger-soft); }
.kpi__trend--success { color: var(--success); background: var(--success-soft); }

/* v2.0.0 (UX) — Leerwert (z.B. Kosten ohne hinterlegten Tarif): gedämpfter
   Gedankenstrich statt „€0.00", damit „kein Tarif" nicht wie echte 0 € wirkt. */
.kpi__empty { color: var(--text-3); font-weight: 500; }

/* v2.0.1 — F1006-Bugfix (#16): Zähler-Gruppen als aufklappbare Dashboard-Summe
   in der Utility-Karte. */
.dash-groups {
  margin-top: var(--sp-3);
  border-top: 1px solid var(--border-1);
  padding-top: var(--sp-2);
}
.dash-groups__summary {
  cursor: pointer;
  list-style: none;
  padding: var(--sp-1) 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-2);
}
.dash-groups__summary::-webkit-details-marker { display: none; }
.dash-groups__summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 6px;
  transition: transform .15s ease;
}
.dash-groups[open] .dash-groups__summary::before { transform: rotate(90deg); }
.dash-groups__list {
  list-style: none;
  margin: var(--sp-2) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.dash-groups__item {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
}
.dash-groups__name { color: var(--text-1); }
.dash-groups__count { color: var(--text-3); font-weight: 400; }
.dash-groups__val {
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* v2.13.0 (Review UI-32, UI-27) — Einstieg auf der leeren Übersicht: links
   ausgerichtet wie der Rest der Seite (bis v2.12 stand die Überschrift links,
   der Rest zentriert), mit den ersten Schritten */
.dash-welcome { padding: var(--sp-5); }
.dash-welcome__title { font-size: var(--fs-xl); font-weight: 700; margin: 0 0 var(--sp-2); }
.dash-welcome__text { max-width: 62ch; margin: 0 0 var(--sp-4); color: var(--text-2); }
.dash-welcome__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.dash-welcome__steps { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); margin: 0 0 var(--sp-2); }

/* ─────────────────────────────────────────────────────────────────────
   v2.3.0 — Tarifvergleich: Wechselentscheidung
   ───────────────────────────────────────────────────────────────────── */

.section-title {
  font-size: var(--fs-md, 1.05rem);
  margin: 0 0 var(--sp-3);
}

/* Zwei Karten nebeneinander: der erwartete Verbrauch (die Zahl, die zum
   Vergleichsportal mitgenommen wird) und der Wechseltermin. Auf schmalen
   Schirmen untereinander — die Verbrauchszahl zuerst, sie trägt die
   Handlung. */
.switch-head {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.switch-card { padding: var(--sp-4); }
.switch-card--consumption { border-left: 3px solid var(--util, var(--c-blue)); }

.switch-bignum {
  margin: var(--sp-2) 0 var(--sp-1);
  line-height: 1.1;
}
.switch-bignum strong {
  font-size: clamp(1.7rem, 5vw, 2.3rem);
  font-variant-numeric: tabular-nums;
  color: var(--util, var(--text-1));
}
.switch-bignum .unit { font-size: var(--fs-sm); color: var(--text-2); }

.switch-date-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: var(--sp-2);
}
.switch-date-row input[type="date"] { min-width: 9.5rem; }

.switch-empty { display: grid; gap: var(--sp-3); justify-items: start; }

/* Der Rückblick ist eingeklappt: Er belegt, dass die Rechnung auf echten
   Daten aufgeht, ist aber nicht der Grund, warum jemand die Ansicht
   öffnet. */
.retro-block > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.retro-block > summary::-webkit-details-marker { display: none; }
.retro-block > summary::before {
  content: "▸";
  color: var(--text-2);
  transition: transform 120ms ease;
}
.retro-block[open] > summary::before { transform: rotate(90deg); }
.retro-block > summary .section-title { margin: 0; }
.retro-block > summary:focus-visible {
  outline: 2px solid var(--util, var(--c-blue));
  outline-offset: 2px;
  border-radius: var(--radius-sm, 4px);
}

.toolbar--sub {
  margin: var(--sp-3) 0;
  align-items: center;
  gap: var(--sp-3);
}

@media (prefers-reduced-motion: reduce) {
  .retro-block > summary::before { transition: none; }
}

/* =====================================================================
   v2.11.0 — Mobil und aufgeräumt (Review UI-10, UI-16, UI-12)
   ===================================================================== */

/* Erfassen-Blatt (＋): Zählerstände, Lieferung, Peilstand, Termin */
.capture-sheet { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.capture-sheet__item {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: 52px; padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border-2); border-radius: var(--r-md);
  background: var(--bg-2); color: var(--text-1);
}
.capture-sheet__item:hover { background: var(--bg-3); text-decoration: none; color: var(--text-1); }
.capture-sheet__icon { font-size: 22px; width: 28px; text-align: center; flex: none; }
.capture-sheet__label { display: block; font-weight: 600; }
.capture-sheet__hint { display: block; font-size: var(--fs-sm); color: var(--text-2); }

/* Verträge & Abschläge — je Verbrauchsart eine Karte */
.contract-overview__row + .contract-overview__row { border-top: 1px solid var(--border-1); margin-top: var(--sp-3); padding-top: var(--sp-3); }
.contract-overview__meter { font-size: var(--fs-xs); color: var(--text-2); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2px; }
.contract-overview__name { font-weight: 600; font-size: var(--fs-md); }
.contract-overview__facts { margin-top: var(--sp-2); font-size: var(--fs-sm); }
.contract-overview__expected { margin-top: var(--sp-2); font-size: var(--fs-sm); }

/* Verweis-Karte (Rechnungsprüfung auf der Gas-Seite, Jahresbericht in den Einstellungen) */
.card--link p { margin: 0 0 var(--sp-3); }

.report-actions { flex-direction: row; flex-wrap: wrap; gap: var(--sp-2); }
.report-note { margin: var(--sp-3) 0 0; font-size: var(--fs-sm); }

/* ── Touch-Bedienung (Review UI-10) ─────────────────────────────────
   Auf dem iPhone lagen alle Bedienelemente unter 44 pt (Apple HIG), rote
   „Löschen"-Knöpfe mit 28 × 24 px direkt neben „Bearbeiten". Eingaben unter
   16 px lassen Safari bei jedem Fokus in die Seite zoomen. */
@media (pointer: coarse), (max-width: 800px) {
  .btn { min-height: 44px; }
  .btn--sm { min-height: 40px; padding: 6px 12px; font-size: var(--fs-sm); }
  .btn--icon { min-width: 44px; justify-content: center; }
  .pill, .seg__btn { min-height: 44px; display: inline-flex; align-items: center; }
  .topbar__btn { width: 44px; height: 44px; }
  .modal__close { min-width: 44px; min-height: 44px; }
  .input, .select, textarea.input { font-size: 16px; min-height: 44px; }
  .input[type="checkbox"], .input[type="radio"] { min-height: 0; }
  /* Abstand zwischen nebeneinanderliegenden Aktionen einer Tabellenzeile */
  td > .btn + .btn, td > .btn + a.btn, td > a.btn + .btn { margin-left: var(--sp-2); }
  .table td, .data-table td { padding-top: 10px; padding-bottom: 10px; }
}

/* ── Dialoge auf dem iPhone als Blatt von unten (Review UI-16) ─────── */
@keyframes sheetUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 600px) {
  .modal-backdrop { padding: 0; align-items: flex-end; }
  .modal {
    width: 100%;
    max-height: calc(100vh - 8px);
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 8px);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    border-left: none; border-right: none; border-bottom: none;
    animation: sheetUp 200ms ease-out;
  }
  .modal__head { padding: var(--sp-3) var(--sp-4); }
  .modal__body { padding: var(--sp-4); }
  .modal__foot {
    padding: var(--sp-3) var(--sp-4);
    padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
  }
  .modal__foot .btn { flex: 1 1 0; justify-content: center; }
  /* Ohne Fußleiste trägt der Inhalt den Abstand zum Home-Balken */
  .modal__body:last-child { padding-bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px)); }
}

/* =====================================================================
   v2.12.0 — Einstellungen als Unterseiten (Review UI-13)
   ===================================================================== */
/* Karten mit breiter Tabelle (Gas-Faktoren) über die ganze Zeile — die
   „Entfernen"-Knöpfe lagen bisher hinter einem unsichtbaren Querscroll */
.settings-grid > .settings-card--wide { grid-column: 1 / -1; }

/* Speicherleiste: steht nur, solange es ungespeicherte Änderungen gibt */
.settings-savebar {
  position: sticky; bottom: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4);
  background: var(--bg-1); border: 1px solid var(--border-2);
  border-radius: var(--r-md); box-shadow: var(--shadow-2);
}
.settings-savebar[hidden] { display: none; }
.settings-savebar__text { flex: 1; font-weight: 600; color: var(--warning); }
@media (max-width: 800px) {
  /* über der Tab-Leiste */
  .settings-savebar { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + var(--sp-2)); }
}
@media (max-width: 600px) {
  /* eine Zeile: kurzer Hinweis, zwei Knöpfe — die Leiste verdeckt sonst ein
     Drittel des Formulars */
  .settings-savebar { flex-wrap: nowrap; padding: var(--sp-2) var(--sp-3); }
  .settings-savebar__text { font-size: var(--fs-sm); line-height: 1.2; min-width: 0; }
  .settings-savebar .btn { white-space: nowrap; }
}

/* Experte: eingeklappt, mit Warnung */
.settings-expert > summary {
  cursor: pointer; font-weight: 600; padding: var(--sp-3) 0;
  list-style: revert;
}
.settings-expert[open] > summary { margin-bottom: var(--sp-3); }

/* v2.12.0 — Ortssuche auf der Wetterdaten-Seite (Review UI-30) */
.geo-search { display: flex; gap: var(--sp-2); }
.geo-search .input { flex: 1; min-width: 0; }
.geo-results { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.geo-results__item { width: 100%; justify-content: space-between; text-align: left; white-space: normal; }

/* v2.12.0 — „Zu tun" oben auf der Übersicht (Review UI-21) */
.dash-todo { margin-bottom: var(--sp-5); border-left: 3px solid var(--warning); }
.dash-todo__list { list-style: none; margin: 0; padding: 0; }
.dash-todo__item { border-top: 1px solid var(--border-1); }
.dash-todo__item:first-child { border-top: none; }
.dash-todo__link {
  display: flex; align-items: center; gap: var(--sp-3); min-height: 44px;
  padding: var(--sp-2) 0; color: inherit; text-decoration: none;
}
.dash-todo__item:first-child .dash-todo__link { padding-top: 0; }
.dash-todo__link:hover .dash-todo__go { background: var(--bg-2); }
.dash-todo__link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }
.dash-todo__icon { font-size: 18px; width: 24px; text-align: center; flex: none; }
.dash-todo__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.dash-todo__go { flex: none; white-space: nowrap; }
.dash-todo__chev { display: none; flex: none; font-size: 22px; line-height: 1; color: var(--text-2); }
.dash-todo__item--alert .dash-todo__text strong { color: var(--danger); }
@media (max-width: 600px) {
  .dash-todo__go { display: none; }
  .dash-todo__chev { display: block; }
}

/* v2.12.0 (Review UI-20) — Werkzeugleisten: beschriftete Auswahlfelder in
   Inhaltsbreite statt 100 %, Umbruch auf schmalen Bildschirmen */
.toolbar { flex-wrap: wrap; }
.toolbar label { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--text-2); }
.toolbar .select, .toolbar .input, .switch-date-row .input { width: auto; min-width: 10rem; }
/* Formulare in Dialogen: 16 px, sonst zoomt Safari beim Antippen */
@media (pointer: coarse), (max-width: 800px) {
  .form-grid input, .form-grid select { font-size: 16px; min-height: 44px; }
}

/* v2.12.0 — Vorschau des CSV-Imports (Review UI-23) */
.import-preview { display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-sm); }
.import-preview__summary { font-weight: 600; margin: 0; }
.import-preview__errors { margin: 0; padding-left: 1.2em; color: var(--text-2); font-size: var(--fs-xs); }
.import-preview__table td { vertical-align: top; }
.import-preview__table td.num, .import-preview__table td:first-child { white-space: nowrap; }
.import-preview__row--warn td { background: var(--warning-soft); }
.import-preview__row--warn td:last-child { color: var(--text-1); }
.import-preview__actions { display: flex; justify-content: flex-end; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-2); }

/* v2.12.0 — Feldfehler in Dialog-Formularen dicht am Feld */
.form-grid > .field-error { margin-top: calc(-1 * var(--sp-2)); }

/* ─────────────────────────────────────────────────────────────────────
   v2.13.0 — Hilfe (Review DOC-10, UI-17, UI-32)
   ───────────────────────────────────────────────────────────────────── */
/* ⓘ neben einem Label: öffnet die Erklärung aus dem Glossar */
.info-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; margin-left: 4px; padding: 0; vertical-align: middle;
  border: none; border-radius: 50%; background: transparent;
  color: var(--text-2); font-size: 14px; line-height: 1; cursor: pointer;
  text-transform: none; letter-spacing: normal;
}
.info-btn:hover, .info-btn[aria-expanded="true"] { color: var(--accent); background: var(--bg-2); }
.info-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Tippziel 32 px, ohne die Zeile zu verschieben */
@media (pointer: coarse) { .info-btn { width: 32px; height: 32px; margin: -6px -6px -6px -2px; } }
.info-pop {
  position: absolute; z-index: 1200; max-width: 340px;
  padding: 12px 38px 12px 14px;
  background: var(--bg-1); color: var(--text-1);
  border: 1px solid var(--border-2); border-radius: var(--r-md);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
  font-size: var(--fs-sm); line-height: 1.45; text-align: left;
}
.info-pop__term { display: block; margin-bottom: 4px; }
.info-pop__text { margin: 0 0 6px; }
/* v3.1.0 (I18N-27) — Rechnungsbegriff des Landes */
.info-pop__bill { margin: 0 0 6px; font-size: var(--fs-xs, 12px); color: var(--text-2); }
.info-pop__more { font-size: var(--fs-xs); }
.info-pop__close {
  position: absolute; top: 4px; right: 4px; width: 30px; height: 30px;
  border: none; background: transparent; color: var(--text-2); font-size: 18px; cursor: pointer;
}
/* iPhone: als Blatt über der Tab-Leiste statt als schwebende Box */
@media (max-width: 600px) {
  .info-pop {
    position: fixed; left: 8px !important; right: 8px; top: auto !important; max-width: none;
    bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 8px);
  }
}

/* Erste Schritte (Übersicht und Hilfe) */
.setup-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.setup-list__item { display: flex; gap: var(--sp-3); align-items: flex-start; }
.setup-list__mark {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--border-2); color: var(--text-2); font-size: var(--fs-sm); font-weight: 600;
}
.setup-list__item--done .setup-list__mark { background: var(--success); border-color: var(--success); color: var(--bg-1); }
.setup-list__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.setup-list__item--done .setup-list__body a { color: var(--text-2); text-decoration: line-through; }

/* Hilfe-Ansicht */
.help-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-4); }
.help-grid > .card { margin-bottom: 0; }
.help-links { margin: 0 0 var(--sp-2); padding-left: 1.2em; display: flex; flex-direction: column; gap: 4px; }
.help-subtitle { margin-top: var(--sp-4); }
.help-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-2) 0 0; }
.help-glossary .card__head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.help-glossary__search { max-width: 260px; }
.glossary-list { margin: var(--sp-3) 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: var(--sp-3) var(--sp-5); }
.glossary-list__item { scroll-margin-top: 80px; padding: var(--sp-2); border-radius: var(--r-sm); }
.glossary-list__item[hidden] { display: none; }
.glossary-list__item dt { font-weight: 600; margin-bottom: 2px; }
.glossary-list__item dd { margin: 0; color: var(--text-2); font-size: var(--fs-sm); line-height: 1.5; }
.glossary-list__item--focus { background: var(--c-blue-soft); }

/* v2.13.0 — Quellenangabe unter Diagrammen */
.attribution { margin: var(--sp-2) 0 0; }

/* v2.13.0 — Schalter mit ⓘ daneben */
.toggle-wrap { display: inline-flex; align-items: center; }

/* v2.13.0 (Review UI-17) — Einzelposten der Sonderzahlungen zum Aufklappen
   (vorher nur im Tooltip, auf dem iPhone unsichtbar) */
.special-details > summary { cursor: pointer; list-style: none; }
.special-details > summary::-webkit-details-marker { display: none; }
.special-details > summary::after { content: ' ▾'; font-size: 10px; color: var(--text-2); }
.special-details[open] > summary::after { content: ' ▴'; }
.special-details__list { margin: 4px 0 0; padding: 0; list-style: none; text-align: left; min-width: 14rem; font-size: 11px; color: var(--text-2); white-space: normal; }
.special-details__list li + li { margin-top: 4px; }
.contracts-table .tariff-part { white-space: nowrap; }

/* v2.13.0 — Leerzustand der Verbrauchsansicht */
.empty-card p { max-width: 62ch; color: var(--text-2); margin: 0 0 var(--sp-3); }

/* v3.0.0 — Öffentliche Demo (GitHub Pages): Kennzeichen in der Kopfleiste und
   Hinweisleiste unten. Die Leiste liegt außerhalb des Seitenrasters (fest
   positioniert) und auf dem iPhone über der Tab-Leiste. */
.demo-chip {
  margin-left: var(--sp-2); padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--accent); background: transparent; color: var(--accent);
  font: inherit; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; cursor: pointer;
}
.demo-bar {
  position: fixed; z-index: 55; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
  width: min(760px, calc(100vw - 2 * var(--sp-4)));
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
  background: var(--bg-1); color: var(--text-1);
  border: 1px solid var(--accent); box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
}
.demo-bar[hidden] { display: none; }
.demo-bar__text { flex: 1 1 22rem; margin: 0; font-size: var(--fs-sm); }
.demo-bar__lang { font: inherit; font-size: var(--fs-sm); min-height: 32px; }
.demo-bar__close {
  min-width: 32px; min-height: 32px; border: none; background: none;
  color: var(--text-2); font-size: 20px; line-height: 1; cursor: pointer;
}
@media (max-width: 800px) {
  .demo-bar { bottom: calc(var(--tabbar-h) + var(--sp-3) + env(safe-area-inset-bottom, 0px)); }
  .demo-bar__lang, .demo-bar__close { min-height: 44px; }
  .demo-bar__close { min-width: 44px; }
}

/* v3.1.0 (Paket H2) — Belege: Vorschaubild in der Ablesetabelle, Großansicht */
.icon-btn--thumb { padding: 0; width: 36px; height: 36px; overflow: hidden; vertical-align: middle; }
.reading-thumb { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-sm); display: block; }
.photo-lightbox { display: block; max-width: 100%; max-height: 70vh; margin: 0 auto; border-radius: var(--r-sm); }
.settings-card__hint--warn { color: var(--warning); }