Initialer Import: HA-Panel, Design-System, Companion-App

Drei zusammengehörige Teile in einem Repository:

- homeassistant/  Das fertige, im Einsatz befindliche Home-Assistant-Panel
  (panel_custom Custom Element + pyscript-Backend). Echte Fahrzeug- und
  Personendaten (fahrzeugprofil.json, fahrten.jsonl, tankvorgaenge.jsonl,
  Tankbelege) bleiben per .gitignore außen vor; die anonymisierte Vorlage
  fahrzeugprofil.example.json ist mit dabei.

- design-system/  Eigenständige React-Komponentenbibliothek (@audi-dash/ui),
  die die visuelle Sprache des Panels nachbildet - ohne Audi-Markenzeichen
  und ohne die lizenzierte Hausschrift. Dient als Grundlage für Claude
  Design. War bis hierher ein eigenes Repository und ist in dieses
  eingeschmolzen worden.

- companion-app/  Datenschicht der neuen App DataMetric360 (iOS/Android via
  Capacitor, zusätzlich als Iframe im HA-Dashboard). Noch ohne Oberfläche:
  REST- und WebSocket-Zugriff auf Home Assistant plus Warteschlange für
  Änderungen ohne Netz. Ersetzt das eingespritzte hass-Objekt, das nur
  innerhalb des HA-Frontends existiert.

Dazu die Projektdokumentation: SPECIFICATION.md (Ist-Stand des Panels),
COMPANION_APP_ARCHITECTURE.md (Architekturentscheidungen der neuen App),
AUDIT_2026-08-10.md, DESIGN_BRIEF_DATAMETRIC360.md und der ursprüngliche
Bauauftrag.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

design-system/src/tokens/tokens.css

@@ -0,0 +1,98 @@
+/*
+ * Design-Tokens, aus dem Audi-Dashboard (audi-dashboard.css) übernommen.
+ * Bewusst OHNE die dort eingebundene "Audi Type"-Schriftfamilie und ohne
+ * Audi-Marken-Assets (Ringe/Typenschild) - laut bauauftrag.md §"Rechtlich"
+ * ausschließlich für die private, nicht veröffentlichte HA-Installation
+ * freigegeben. Hier gilt ein neutraler Fallback-Font-Stack.
+ */
+
+:root {
+  /* Markenunabhängig */
+  --red: #F50537;
+  --r-tile: 20px;
+  --r-pill: 999px;
+  --r-func: 8px;
+  --rahmen-hg: #111;
+
+  /* Abstandsskala (aus den im Original wiederkehrenden Literalwerten abgeleitet) */
+  --sp-1: 4px;
+  --sp-2: 8px;
+  --sp-3: 12px;
+  --sp-4: 16px;
+  --sp-5: 22px;
+
+  /* Nacht (Default-Theme, entspricht dem :root-Block des Originals) */
+  --canvas: #161b23;
+  --tile: #1f2733;
+  --tile-2: #2a3341;
+  --line: rgba(255, 255, 255, .10);
+  --line-strong: rgba(255, 255, 255, .20);
+  --fg: #FFFFFF;
+  --fg2: #9aa1ad;
+  --fg3: #657081;
+  --ok: #15da15;
+  --warn: #ffaa00;
+  --bad: #fd2c4e;
+  --shade: rgba(255, 255, 255, .05);
+
+  --font-stack: Helvetica, Arial, sans-serif;
+}
+
+[data-theme="tag"] {
+  --canvas: #FFFFFF;
+  --tile: #f2f2f2;
+  --tile-2: #e5e5e5;
+  --line: rgba(0, 0, 0, .10);
+  --line-strong: rgba(0, 0, 0, .22);
+  --fg: #000000;
+  --fg2: #4c4c4c;
+  --fg3: #666666;
+  --ok: #0DA20D;
+  --warn: #ffaa00;
+  --bad: #eb0d3f;
+  --shade: rgba(0, 0, 0, .04);
+}
+
+/*
+ * Wurzel-Klasse: von konsumierenden Apps um den Baum zu legen, der die
+ * Bibliothek nutzt (ersetzt das :host-Scoping, das das Original per
+ * Shadow DOM kostenlos bekam). Setzt Schriftstack + Zahlendarstellung.
+ */
+.ads-root {
+  font-family: var(--font-stack);
+  font-variant-numeric: tabular-nums;
+  color: var(--fg);
+  background: var(--canvas);
+}
+
+/* Reine Typografie-Utility-Klassen (siehe README) - keine eigenen Komponenten */
+.ads-eyebrow {
+  font-size: 10px;
+  letter-spacing: .2em;
+  text-transform: uppercase;
+  color: var(--fg3);
+  display: block;
+}
+
+.ads-title {
+  font-size: 23px;
+  letter-spacing: -.015em;
+  line-height: 1.15;
+  color: var(--fg);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ads-label {
+  font-size: 10px;
+  letter-spacing: .2em;
+  text-transform: uppercase;
+  color: var(--fg3);
+  display: block;
+}
+
+.ads-sport {
+  font-style: italic;
+  letter-spacing: .005em;
+}