Phase 4: Vite-React-Geruest und Workspace-Anbindung

npm-Workspace im Repo-Root verbindet companion-app mit @audi-dash/ui, so
dass die App die Komponentenbibliothek als echte Abhaengigkeit nutzt statt
nur in der Doku. Dazu Vite, React 18, Einstiegsdateien und eine schlanke
Grundlage-CSS, die nur enthaelt was eine App braucht und eine Bibliothek
nicht mitbringt: Vollbild, sichere Bereiche, Scrollverhalten.

Zwei Audit-Befunde des alten Panels sind hier von Anfang an beruecksichtigt:
Formularfelder mit 16px (sonst zoomt iOS Safari beim Fokus) und ein
globaler :focus-visible-Ring.

Nebenbei im design-system den Kontrastwert --fg3 nachgezogen: dort stand
noch #657081 mit 3,0:1 auf --tile, das Panel hatte den Wert laengst auf
#8a94a3 korrigiert. Ohne das haette die neue App den bereits behobenen
WCAG-Verstoss geerbt.

companion-app/src/App.tsx

@@ -0,0 +1,19 @@
+import { Tile } from "@audi-dash/ui"
+
+/**
+ * Vorläufiger Einstieg — wird in Phase 5 durch die App-Shell ersetzt.
+ * Das äußerste Element trägt immer `ads-root` und `data-theme`, sonst greifen
+ * die Design-Tokens nicht (siehe design-system/.design-sync/conventions.md).
+ */
+export function App() {
+  return (
+    <div className="ads-root dm-wurzel" data-theme="nacht">
+      <div className="dm-scroll" style={{ flex: 1, padding: 22 }}>
+        <span className="ads-eyebrow">DataMetric360</span>
+        <Tile>
+          <div style={{ fontWeight: 300, fontSize: 20 }}>Gerüst steht</div>
+        </Tile>
+      </div>
+    </div>
+  )
+}

companion-app/src/main.tsx

@@ -0,0 +1,15 @@
+import { StrictMode } from "react"
+import { createRoot } from "react-dom/client"
+
+import "@audi-dash/ui/styles.css"
+import "./stile/grundlage.css"
+import { App } from "./App"
+
+const wurzel = document.getElementById("wurzel")
+if (!wurzel) throw new Error("Wurzelelement #wurzel fehlt in index.html")
+
+createRoot(wurzel).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

companion-app/src/stile/grundlage.css

@@ -0,0 +1,78 @@
+/*
+ * Grundlayout der App. Alles Gestalterische kommt aus @audi-dash/ui
+ * (Tokens + Komponenten) — hier steht nur, was eine App braucht und eine
+ * Komponentenbibliothek nicht mitbringen kann: Vollbild, sichere Bereiche,
+ * Scrollverhalten, Fokusring.
+ */
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  overscroll-behavior-y: none;
+}
+
+body {
+  background: var(--canvas);
+}
+
+#wurzel {
+  height: 100%;
+}
+
+/* Wurzel der App: setzt Schrift, Farben und Zahlendarstellung (.ads-root aus
+   der Bibliothek) und spannt sich über die volle Höhe. */
+.dm-wurzel {
+  height: 100%;
+  display: flex;
+  overflow: hidden;
+  font-weight: 400;
+}
+
+/* Tastaturbedienung: im alten Panel als Audit-Befund nachgerüstet, hier von
+   Anfang an. :focus-visible statt :focus lässt Maus und Touch unberührt. */
+:focus-visible {
+  outline: 2px solid var(--red);
+  outline-offset: 2px;
+}
+
+.dm-scroll {
+  overflow-y: auto;
+  overflow-x: hidden;
+  -webkit-overflow-scrolling: touch;
+}
+
+.dm-scroll::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.dm-scroll::-webkit-scrollbar-thumb {
+  background: var(--line-strong);
+  border-radius: var(--r-pill);
+}
+
+/* Formularfelder: mindestens 16px, sonst zoomt iOS Safari beim Fokus die
+   ganze Seite (Audit-Befund aus dem alten Panel). */
+input,
+select,
+textarea,
+button {
+  font-family: inherit;
+  font-size: 16px;
+  color: inherit;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+}