Anleitung: System-Schaubild + Ist-Stand-Kur (Stand Juli 2026)

- Neue Sektion 'So funktioniert dein System' ganz oben: Landkarte
  (Du -> 4 Tueren -> Box-Innenleben -> PC-Executor) + Kreislauf
  (Idee -> Queue -> Werkstatt -> Auftragsbuch -> DEIN Klick -> Live,
  Rueckkanal Chronik/Morgenlage) + Nacht-Fahrplan; reines Inline-SVG
  mit Design-Tokens (frontend/src/views/guide/SystemSchaubild.tsx)
- Veraltete 'Bei dir konkret'-Kaesten repariert:
  * Modell-Line-up auf Klartext-Rollen (Hirn/Gross/Coder/Augen/Spaeher/
    Kritiker/Gedaechtnis/Sortierer) statt fast/heavy/scout
  * Hermes: eigenes Agent-Hirn statt 'Hirn = fast'; Zugaenge Desktop//hermes-ui,
    Konsole, Telegram, Lucy statt totem 'Terminal'-Tab
  * IDE-Kapitel: Hermes Desktop als Haupt-IDE ergaenzt
  * Backup: PBS-Backup-Zentrum + Tarball statt nur restore.sh; Auto-Revert erwaehnt
  * Troubleshooting: Zentrale->Cockpit, Terminal->Konsole, Zeitmaschine ergaenzt
- Datumsstand Juni -> Juli 2026

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

frontend/src/views/GuideView.tsx

@@ -6,15 +6,17 @@ import {
   type LucideIcon,
 } from "lucide-react"
 import { cn } from "@/lib/utils"
+import { SystemSchaubild } from "./guide/SystemSchaubild"
 
 /* ------------------------------------------------------------------ *
- *  Anleitung = Allgemeine AI-Bibel (Stand Juni 2026).
- *  Allgemeines Nachschlagewerk für lokale & agentische AI.
- *  Stack-Spezifika nur als "Bei dir konkret"-Callouts, wo eine echte
- *  Einschränkung sie relevant macht — sonst bewusst allgemein gehalten.
+ *  Anleitung = Allgemeine AI-Bibel (Stand Juli 2026).
+ *  Ganz oben „Dein System": Schaubild + Kreislauf der eigenen Box.
+ *  Danach allgemeines Nachschlagewerk für lokale & agentische AI;
+ *  Stack-Spezifika nur als "Bei dir konkret"-Callouts.
  * ------------------------------------------------------------------ */
 
 const SECTIONS: { id: string; label: string }[] = [
+  { id: "system", label: "Dein System" },
   { id: "grundlagen", label: "Grundlagen" },
   { id: "moe", label: "MoE & Quant" },
   { id: "lokal", label: "Lokal betreiben" },
@@ -118,9 +120,10 @@ export function GuideView() {
             Die AI-Bibel
           </h1>
           <p className="text-sm text-muted-foreground leading-relaxed max-w-2xl">
-            Allgemeines Nachschlagewerk für lokale &amp; agentische AI — Konzepte, Tricks, Kniffe und
-            kuratierte Quellen. <span className="font-semibold text-foreground">Stand Juni 2026.</span>{" "}
-            Das meiste gilt überall; <span className="text-primary font-semibold">„Bei dir konkret"</span>-Kästen
+            Erst <span className="font-semibold text-foreground">dein System auf einen Blick</span>, dann das
+            allgemeine Nachschlagewerk für lokale &amp; agentische AI — Konzepte, Tricks, Kniffe und
+            kuratierte Quellen. <span className="font-semibold text-foreground">Stand Juli 2026.</span>{" "}
+            <span className="text-primary font-semibold">„Bei dir konkret"</span>-Kästen
             zeigen, was dein Stack daraus macht.
           </p>
         </div>
@@ -150,6 +153,28 @@ export function GuideView() {
         </div>
       </div>
 
+      {/* 0 — Dein System (Schaubild) */}
+      <section id="system" className="scroll-mt-20 mc-card p-6 space-y-4">
+        <div className="flex items-center gap-2.5 border-b border-border/20 pb-3">
+          <Network className="h-5 w-5 text-primary" />
+          <div>
+            <h3 className="text-xs font-bold uppercase tracking-wider text-foreground">So funktioniert dein System</h3>
+            <span className="text-[9px] font-mono text-primary">Landkarte &amp; Kreislauf — das große Bild</span>
+          </div>
+        </div>
+        <p className="text-xs text-muted-foreground leading-relaxed max-w-3xl">
+          Vier Türen führen zur selben Box: <strong className="text-foreground">diese Oberfläche</strong> zum Steuern
+          und Abnicken, <strong className="text-foreground">Lucy</strong> für Zurufe per Stimme,
+          <strong className="text-foreground"> Hermes Desktop</strong> für richtige Projekte und
+          <strong className="text-foreground"> Telegram</strong> für unterwegs. In der Box denken die Modelle, das
+          Gedächtnis lernt automatisch mit — und nachts arbeitet sie allein: Sie träumt, inventarisiert sich selbst,
+          entwickelt Ideen zu fertigen Vorschlägen und legt sie dir als Karten ins Auftragsbuch.
+          <strong className="text-primary"> Nichts geht live ohne deinen Klick</strong> — und wenn nach einer Annahme
+          etwas rot wird, baut die Box es selbst zurück.
+        </p>
+        <SystemSchaubild />
+      </section>
+
       <div className="grid gap-5 md:grid-cols-2">
 
         {/* 1 — Grundlagen */}
@@ -241,9 +266,10 @@ export function GuideView() {
             Vorsicht vor „Benchmaxxing".
           </p>
           <Stack>
-            Dein Line-up via llama-swap: <Pill>fast</Pill> (Alltag/Vision/MoE) · <Pill>heavy</Pill> (schwere Logik) ·
-            <Pill>coder</Pill> · <Pill>scout</Pill> · <Pill>vision</Pill> · <Pill>embed</Pill> (fürs Gedächtnis) ·
-            <Pill>hermes</Pill> (Agent-Hirn). Verwalten/tauschen im <strong>Modell-Manager</strong>-Tab.
+            Dein Line-up via llama-swap (Klartext-Rollen): <Pill>Hirn</Pill> (Agent, dauerwarm) · <Pill>Groß</Pill> (schwere
+            Logik) · <Pill>Coder</Pill> · <Pill>Augen</Pill> (Bilder) · <Pill>Späher</Pill> (schnelle Recherche) ·
+            <Pill>Kritiker</Pill> (Fremdblick/Review) · <Pill>Gedächtnis</Pill> + <Pill>Sortierer</Pill> (Embedding &amp;
+            Reranking). Verwalten/tauschen im <strong>Modelle</strong>-Tab.
           </Stack>
         </Card>
 
@@ -321,8 +347,8 @@ description: Treibt Entwicklung mit strikter TDD-Praxis
           <Stack>
             Dein Gedächtnis (Tab <strong>Gedächtnis</strong>) ist <strong>Mem0</strong>-basiert: auto-lernend &amp;
             semantisch, <strong>graph-first</strong> dargestellt, mit 4-Typen-Taxonomie
-            (<Pill>Identität</Pill> · <Pill>Wissen</Pill> · <Pill>Regeln</Pill> · <Pill>Ereignisse</Pill>). Einstieg über
-            ein kurzes <strong>Hermes-Onboarding-Gespräch</strong> im Terminal — der Agent lernt im Hintergrund nach jedem Turn.
+            (<Pill>Identität</Pill> · <Pill>Wissen</Pill> · <Pill>Regeln</Pill> · <Pill>Ereignisse</Pill>). Der Agent
+            lernt im Hintergrund nach jedem Turn — egal ob du per Desktop, Konsole, Telegram oder Lucy mit ihm sprichst.
             <br /><strong>Gotcha:</strong> ein gelöschter Fakt kann wieder auftauchen, solange die Original-Nachricht noch im Verlauf steht (additive Extraktion).
           </Stack>
         </Card>
@@ -347,9 +373,12 @@ description: Treibt Entwicklung mit strikter TDD-Praxis
             </div>
           </div>
           <Stack>
-            <strong>Hermes</strong> ist dein Box-Agent (Hirn = <Pill>fast</Pill>). Reden tust du mit ihm im
-            <strong> Terminal</strong>-Tab (Web-Terminal via ttyd) oder per <strong>Telegram</strong>. Er hat MCP-Server für
-            Gedächtnis, Stack-Steuerung, Web-Fetch und <strong>PC-Steuerung</strong> (Executor auf deinem Windows-PC).
+            <strong>Hermes</strong> ist dein Box-Agent mit eigenem Agent-Hirn (Rolle <Pill>Hirn</Pill>, dauerwarm).
+            Reden tust du mit ihm über <strong>Hermes Desktop</strong> (am PC, remote via <Pill>/hermes-ui</Pill>),
+            die <strong>Konsole</strong> (Box-Shell im Browser), <strong>Telegram</strong> — oder per Stimme über
+            <strong> Lucy</strong>. Er hat MCP-Server für Gedächtnis, Stack-Steuerung, Web-Fetch und
+            <strong> PC-Steuerung</strong> (Executor auf deinem Windows-PC). Nachts betreibt er Werkstatt &amp;
+            Radar-Crons — alles Gebaute landet als Karte im <strong>Auftragsbuch</strong>.
             Status &amp; Verdrahtung im <strong>Hermes</strong>-Tab.
           </Stack>
         </Card>
@@ -366,8 +395,10 @@ description: Treibt Entwicklung mit strikter TDD-Praxis
             <li><strong>Continue</strong>, <strong>aider</strong> (CLI), <strong>OpenCode</strong> (Desktop)</li>
           </ul>
           <Stack>
-            Tipp den Kram nicht ab: der <strong>Verbinden</strong>-Tab generiert die fertige Config (inkl. MCP-Gedächtnis)
-            pro Tool zum Kopieren. Essenz: Base <Pill>…:9001/v1</Pill>, Model <Pill>auto</Pill>, Key beliebig.
+            Deine Haupt-IDE ist inzwischen <strong>Hermes Desktop</strong> — sie ist ab Werk mit Box, Gedächtnis und
+            Skills verdrahtet, da ist nichts zu konfigurieren. Für alles andere gilt: Tipp den Kram nicht ab — der
+            <strong> Verbinden</strong>-Tab generiert die fertige Config (inkl. MCP-Gedächtnis) pro Tool zum Kopieren.
+            Essenz: Base <Pill>…:9001/v1</Pill>, Model <Pill>auto</Pill>, Key beliebig.
           </Stack>
         </Card>
 
@@ -409,8 +440,9 @@ description: Treibt Entwicklung mit strikter TDD-Praxis
             <div className="space-y-2">
               <p className="flex items-center gap-1.5 font-bold text-foreground"><Wrench className="h-3.5 w-3.5 text-emerald-400" /> Bei dir im SystemDrawer</p>
               <ul className="list-disc pl-4 space-y-1">
-                <li><strong>Backup:</strong> tägliches Voll-Zustands-Backup, getesteter <Pill>restore.sh</Pill> (Doku in <Pill>docs/BACKUP.md</Pill>).</li>
-                <li><strong>Updates:</strong> git-basierter Update-Check; <strong>Hermes-Update-Button</strong> mit anschließendem <strong>Gehirn-Check</strong> (rot, falls das Update das Gedächtnis zerschießt) + Engine-Update.</li>
+                <li><strong>Backup:</strong> PBS-Backup-Zentrum (Sicherung auf den Proxmox-Server) + tägliche Tarball-Sicherung; Restore echt durchgespielt (<Pill>restore.sh</Pill>, Doku in <Pill>docs/BACKUP.md</Pill>).</li>
+                <li><strong>Updates:</strong> git-basierter Update-Check; <strong>Update-Buttons</strong> mit anschließendem <strong>Gehirn-Check</strong> (rot, falls ein Update das Gedächtnis zerschießt).</li>
+                <li><strong>Annahme-Sicherheit:</strong> jede Auftragsbuch-Annahme läuft mit Health-Check — wird's rot, baut die Box automatisch zurück (Auto-Revert).</li>
                 <li><strong>Dienste &amp; Gefahrenzone:</strong> Restart/Logs pro Dienst, kritische Eingriffe getrennt.</li>
               </ul>
               <p className="text-[10px] italic">Erreichbar über das System-Icon → Tab „Wartung".</p>
@@ -475,18 +507,18 @@ description: Treibt Entwicklung mit strikter TDD-Praxis
         {/* 14 — Troubleshooting */}
         <Card id="troubleshooting" icon={LifeBuoy} color="text-rose-400" title="14. Troubleshooting" kicker="Wenn's hakt" wide>
           <ul className="space-y-2 list-disc pl-4">
-            <li><strong>Keine Verbindung?</strong> Selbes LAN wie die Box? IP/Port stimmen (<Pill>:9001</Pill>)? Backend-Status in der <strong>Zentrale</strong> prüfen.</li>
-            <li><strong>Modell antwortet nicht / langsam?</strong> In der <strong>Zentrale → Dienste</strong> schauen, ob <Pill>llama-swap</Pill> grün ist; sonst Restart. Erstes Token nach Swap dauert (Modell lädt).</li>
-            <li><strong>Agent dreht durch / halluziniert?</strong> Frische Session im <strong>Terminal</strong> starten — meist ist es vollgemüllter Kontext.</li>
-            <li><strong>Gedächtnis findet nichts?</strong> Embedding-Dienst online? Semantisch suchen (Sinn statt exaktem Wort). Leeres Gedächtnis → Hermes-Onboarding starten.</li>
-            <li><strong>Update hat etwas zerschossen?</strong> Genau dafür gibt es Backup &amp; <Pill>restore.sh</Pill> — den getesteten Restore fahren, dann Ursache suchen.</li>
+            <li><strong>Keine Verbindung?</strong> Selbes LAN wie die Box? IP/Port stimmen (<Pill>:9001</Pill>)? Backend-Status im <strong>Cockpit</strong> prüfen.</li>
+            <li><strong>Modell antwortet nicht / langsam?</strong> Im <strong>Cockpit → Dienste</strong> schauen, ob <Pill>llama-swap</Pill> grün ist; sonst Restart. Erstes Token nach Swap dauert (Modell lädt).</li>
+            <li><strong>Agent dreht durch / halluziniert?</strong> Frische Session starten (Hermes Desktop oder <strong>Konsole</strong>) — meist ist es vollgemüllter Kontext.</li>
+            <li><strong>Gedächtnis findet nichts?</strong> Embedding-Dienst online? Semantisch suchen (Sinn statt exaktem Wort).</li>
+            <li><strong>Angenommene Karte hat etwas zerschossen?</strong> Meist fängt es der Auto-Revert; sonst <strong>Chronik → Zeitmaschine</strong> (Stand von gestern) oder Backup &amp; <Pill>restore.sh</Pill>.</li>
           </ul>
         </Card>
 
       </div>
 
       <p className="text-center text-[10px] text-muted-foreground/50 pt-2">
-        Mission Control 2 · AI-Bibel · Stand Juni 2026 — lebendes Dokument, wächst mit dem Stack.
+        Mission Control 2 · AI-Bibel · Stand Juli 2026 — lebendes Dokument, wächst mit dem Stack.
       </p>
     </div>
   )

frontend/src/views/guide/SystemSchaubild.tsx

@@ -0,0 +1,178 @@
+// Schaubild „So funktioniert dein System" für die Anleitung.
+// Zwei Teile: (1) Landkarte — wer redet mit wem, (2) Kreislauf — wie die Box
+// von allein arbeitet und wo DEIN Klick sitzt. Reines Inline-SVG mit den
+// Design-Tokens (hsl(var(--…))), damit es automatisch zum Theme passt.
+
+const T = {
+  text: "hsl(var(--foreground))",
+  mut: "hsl(var(--muted-foreground))",
+  border: "hsl(var(--border))",
+  card: "hsl(var(--card) / 0.9)",
+  bg: "hsl(var(--background) / 0.4)",
+  primary: "hsl(var(--primary))",
+  teal: "#2dd4bf",
+  sky: "#38bdf8",
+  violet: "#a78bfa",
+  rose: "#fb7185",
+  amber: "#fbbf24",
+  emerald: "#34d399",
+  indigo: "#818cf8",
+}
+
+// Kleine Bausteine ------------------------------------------------------------
+
+function NodeBox({ x, y, w, h, color, title, sub, sub2, strong }: {
+  x: number; y: number; w: number; h: number; color: string
+  title: string; sub?: string; sub2?: string; strong?: boolean
+}) {
+  const cx = x + w / 2
+  return (
+    <g>
+      <rect x={x} y={y} width={w} height={h} rx={12} fill={T.card}
+        stroke={color} strokeOpacity={strong ? 0.9 : 0.45} strokeWidth={strong ? 2 : 1.25} />
+      <rect x={x} y={y} width={w} height={3} rx={1.5} fill={color} opacity={0.8} />
+      <text x={cx} y={y + (sub ? 24 : h / 2 + 4)} textAnchor="middle" fill={T.text}
+        fontSize={12.5} fontWeight={700}>{title}</text>
+      {sub && (
+        <text x={cx} y={y + 40} textAnchor="middle" fill={T.mut} fontSize={10}>{sub}</text>
+      )}
+      {sub2 && (
+        <text x={cx} y={y + 53} textAnchor="middle" fill={T.mut} fontSize={10}>{sub2}</text>
+      )}
+    </g>
+  )
+}
+
+function Arrow({ from, to, color = T.border, dash }: {
+  from: [number, number]; to: [number, number]; color?: string; dash?: boolean
+}) {
+  const [x1, y1] = from, [x2, y2] = to
+  const mx = (x1 + x2) / 2
+  return (
+    <g stroke={color} strokeOpacity={0.7} fill="none" strokeWidth={1.5}
+      strokeDasharray={dash ? "5 4" : undefined}>
+      <path d={`M ${x1} ${y1} C ${mx} ${y1}, ${mx} ${y2}, ${x2} ${y2}`} />
+      <path d={`M ${x2 - 6} ${y2 - 4} L ${x2} ${y2} L ${x2 - 6} ${y2 + 4}`}
+        fill={color} fillOpacity={0.7} stroke="none" />
+    </g>
+  )
+}
+
+// (1) Landkarte ---------------------------------------------------------------
+
+function Landkarte() {
+  // Türen links, Box rechts — Pfeile: Du → Tür → Box; Box → PC-Executor (Lucy-Bau).
+  const tuer = [
+    { y: 34, title: "Diese Oberfläche", sub: "Browser · Cockpit & Klick-Gates", color: T.teal },
+    { y: 128, title: "Lucy", sub: "Stimme & Begleiterin am PC", color: T.rose },
+    { y: 222, title: "Hermes Desktop", sub: "IDE für Projekte (PC + remote)", color: T.violet },
+    { y: 316, title: "Telegram", sub: "unterwegs, gleiche Erinnerung", color: T.sky },
+  ]
+  return (
+    <svg viewBox="0 0 880 432" role="img"
+      aria-label="Landkarte: Du erreichst die Box über vier Türen; in der Box arbeiten Mission Control, der Hermes-Agent, der Modell-Stall, das Gedächtnis und der Wissens-Vault."
+      style={{ width: "100%", height: "auto", fontFamily: "var(--font-sans)" }}>
+
+      {/* Du */}
+      <NodeBox x={16} y={150} w={120} h={92} color={T.primary} strong title="Du" sub="entscheidest —" sub2="die Box arbeitet" />
+
+      {/* PC-Executor */}
+      <NodeBox x={16} y={330} w={150} h={68} color={T.emerald} title="PC-Executor" sub="baut & startet Lucy" sub2="nach deiner Annahme" />
+
+      {/* Türen */}
+      {tuer.map((t) => (
+        <NodeBox key={t.title} x={196} y={t.y} w={186} h={64} color={t.color} title={t.title} sub={t.sub} />
+      ))}
+      {tuer.map((t) => (
+        <Arrow key={t.title} from={[136, 196]} to={[196, t.y + 32]} />
+      ))}
+
+      {/* Die Box */}
+      <rect x={420} y={14} width={444} height={404} rx={16} fill={T.bg} stroke={T.border} strokeOpacity={0.7} />
+      <text x={642} y={38} textAnchor="middle" fill={T.text} fontSize={13} fontWeight={800} letterSpacing={0.5}>
+        DIE BOX · 192.168.178.151
+      </text>
+
+      <NodeBox x={444} y={54} w={396} h={62} color={T.teal} title="Mission Control (:9001)"
+        sub="Cockpit · Auftragsbuch (Klick-Gate) · Chronik · Wissen" />
+      <NodeBox x={444} y={126} w={396} h={62} color={T.rose} title="Hermes-Agent"
+        sub="denkt, nutzt Werkzeuge, betreibt die Werkstatt & Nacht-Crons" />
+      <NodeBox x={444} y={198} w={396} h={78} color={T.sky} title="Modell-Stall (llama-swap)"
+        sub="Hirn · Groß · Coder · Augen · Späher · Kritiker"
+        sub2="+ Embedding & Sortierer fürs Gedächtnis" />
+      <NodeBox x={444} y={286} w={190} h={56} color={T.indigo} title="Mem0-Gedächtnis" sub="lernt automatisch mit" />
+      <NodeBox x={650} y={286} w={190} h={56} color={T.amber} title="Wissens-Vault" sub="Träume & Notizen (git)" />
+      <NodeBox x={444} y={352} w={396} h={52} color={T.emerald} title="Selbstheilung & Backups"
+        sub="Health-Checks · Auto-Revert bei Rot · PBS-Sicherung" />
+
+      {/* Türen → Box */}
+      {tuer.map((t) => (
+        <Arrow key={t.title} from={[382, t.y + 32]} to={[420, t.y + 46]} />
+      ))}
+
+      {/* Box → PC-Executor (Lucy-Annahme) */}
+      <Arrow from={[420, 396]} to={[166, 364]} color={T.emerald} dash />
+      <text x={272} y={412} textAnchor="middle" fill={T.mut} fontSize={9.5} fontStyle="italic">
+        Lucy-Karte angenommen → PC baut neu
+      </text>
+    </svg>
+  )
+}
+
+// (2) Kreislauf ---------------------------------------------------------------
+
+function Kreislauf() {
+  const stationen = [
+    { x: 14, color: T.amber, title: "Idee", sub: "von dir oder vom", sub2: "Nacht-Radar" },
+    { x: 158, color: T.violet, title: "Ideen-Queue", sub: "Kanban sammelt,", sub2: "Specifier plant" },
+    { x: 302, color: T.rose, title: "Werkstatt", sub: "Agent baut den", sub2: "Vorschlag (Branch)" },
+    { x: 446, color: T.sky, title: "Auftragsbuch", sub: "Karte + Stempel", sub2: "vom Gutachter" },
+    { x: 590, color: T.primary, title: "DEIN Klick", sub: "annehmen oder", sub2: "ablehnen (mit Grund)", strong: true },
+    { x: 734, color: T.emerald, title: "Live", sub: "Merge + Deploy,", sub2: "Rot = Auto-Rückbau" },
+  ]
+  return (
+    <svg viewBox="0 0 880 246" role="img"
+      aria-label="Kreislauf: Idee, Ideen-Queue, Werkstatt, Auftragsbuch, dein Klick, live — Chronik und Morgenlage berichten zurück."
+      style={{ width: "100%", height: "auto", fontFamily: "var(--font-sans)" }}>
+
+      {stationen.map((s) => (
+        <NodeBox key={s.title} x={s.x} y={38} w={132} h={66} color={s.color}
+          title={s.title} sub={s.sub} sub2={s.sub2} strong={s.strong} />
+      ))}
+      {stationen.slice(0, -1).map((s, i) => (
+        <Arrow key={s.title} from={[s.x + 132, 71]} to={[stationen[i + 1].x, 71]} />
+      ))}
+
+      {/* Rückweg: Live → Idee (Bericht & Lern-Futter) */}
+      <g stroke={T.border} strokeOpacity={0.7} fill="none" strokeWidth={1.5} strokeDasharray="5 4">
+        <path d="M 800 104 C 800 150, 720 150, 440 150 C 160 150, 80 150, 80 112" />
+        <path d="M 76 118 L 80 108 L 84 118" fill={T.border} fillOpacity={0.7} stroke="none" />
+      </g>
+      <text x={440} y={144} textAnchor="middle" fill={T.mut} fontSize={10} fontStyle="italic">
+        Chronik &amp; Morgenlage berichten · Ablehnungs-Gründe werden Lern-Futter
+      </text>
+
+      {/* Nacht-Fahrplan */}
+      <rect x={14} y={176} width={852} height={54} rx={12} fill={T.bg} stroke={T.border} strokeOpacity={0.5} />
+      <text x={440} y={198} textAnchor="middle" fill={T.text} fontSize={11} fontWeight={700}>
+        Nachts, ganz allein:
+      </text>
+      <text x={440} y={216} textAnchor="middle" fill={T.mut} fontSize={10}>
+        03:15 Traum · 03:35 Selbst-Inventur · 03:45 Idle-Radar · 04:00 Karten-Gutachter · 04:10 Bagatellen · 04:30 Morgenlage · Mo 05:15 Release-Radar
+      </text>
+    </svg>
+  )
+}
+
+export function SystemSchaubild() {
+  return (
+    <div className="space-y-5">
+      <div className="overflow-x-auto">
+        <div className="min-w-[680px]"><Landkarte /></div>
+      </div>
+      <div className="border-t border-border/20 pt-4 overflow-x-auto">
+        <div className="min-w-[680px]"><Kreislauf /></div>
+      </div>
+    </div>
+  )
+}