:root {
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-alt: #edeff2;
  --border: #dde1e7;
  --text: #1c1f24;
  --text-muted: #656c78;

  /* vivide Akzentfarben - für Flächen (Punkte, Balken, solide Buttons) */
  --strom: #f5b942;
  --gas: #ff7a45;
  --wasser: #3fa9f5;

  /* dunklere Varianten - für Text/Icons auf hellem Grund (Kontrast) */
  --strom-ink: #8a5c07;
  --gas-ink: #b8431a;
  --wasser-ink: #10628f;
}

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
}

.font-display {
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
}

.font-mono-digits {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
}

/* Mechanisches Zählwerk: jede Ziffer als eigenes "Rad" (bewusst dunkel,
   wie das Ziffernblatt eines echten Zählers - Kontrastpunkt auf hellem Grund) */
.meter-display {
  display: inline-flex;
  gap: 2px;
  padding: 6px;
  background: #14161a;
  border-radius: 6px;
  border: 1px solid #2e323a;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.35);
}

.meter-digit {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-weight: 600;
  background: linear-gradient(180deg, #1a1c20, #101214);
  color: #fef3d9;
  min-width: 0.85ch;
  text-align: center;
  padding: 4px 5px;
  border-radius: 3px;
  box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.04), inset 0 2px 3px rgba(0, 0, 0, 0.5);
  letter-spacing: 0;
}

.meter-digit.decimal {
  color: #c9cdd3;
  background: transparent;
  box-shadow: none;
  padding-left: 1px;
  padding-right: 1px;
}

.accent-strom { color: var(--strom); }
.accent-gas { color: var(--gas); }
.accent-wasser { color: var(--wasser); }

.bg-accent-strom { background-color: var(--strom); }
.bg-accent-gas { background-color: var(--gas); }
.bg-accent-wasser { background-color: var(--wasser); }

.border-accent-strom { border-color: var(--strom); }
.border-accent-gas { border-color: var(--gas); }
.border-accent-wasser { border-color: var(--wasser); }

.tab-active {
  border-bottom: 2px solid var(--text);
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  white-space: nowrap;
}

::selection {
  background: var(--strom);
  color: #14161a;
}