cms: headless CMS vor Hugo (Supabase + Node-API + React-Admin)

All-in-One docker-compose-Stack (Muster von RAPPORT-SERVER gespiegelt):
db/auth/rest/kong + cms-Service (Node-API + Hugo-Binary 0.161.1 + Admin-SPA).

- DB-backed: posts-Tabelle kanonisch, MD ist generiertes Artefakt
- echte Hugo-Vorschau via draft:true + --buildDrafts → /_preview
- Publish: DB → content/library/<section>/<slug>.md → hugo build → live
- Bild-Upload nach static/images/, Supabase-Auth schützt /api/*
- Proxmox-LXC-Script: legt Container an, generiert Secrets, startet Stack

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

cms/admin/src/styles.css

@@ -0,0 +1,70 @@
+:root {
+  --bg: #14110e;
+  --panel: #1d1a16;
+  --line: #322c25;
+  --text: #ece6dd;
+  --muted: #8a8078;
+  --accent: #c8543a;
+  --ok: #5a8a4a;
+}
+* { box-sizing: border-box; }
+body {
+  margin: 0;
+  font: 15px/1.5 -apple-system, system-ui, sans-serif;
+  background: var(--bg);
+  color: var(--text);
+}
+.center { display: grid; place-items: center; min-height: 100vh; }
+.card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 28px; }
+.login { display: flex; flex-direction: column; gap: 12px; width: 300px; }
+.login h1 { font-size: 18px; margin: 0 0 8px; letter-spacing: .08em; }
+
+input, select, textarea, button {
+  font: inherit; color: var(--text);
+  background: #110e0b; border: 1px solid var(--line);
+  border-radius: 6px; padding: 8px 10px;
+}
+input:focus, select:focus, textarea:focus { outline: 1px solid var(--accent); }
+button { background: #2a241e; cursor: pointer; }
+button:hover { border-color: var(--accent); }
+button:disabled { opacity: .5; cursor: default; }
+button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
+.err { color: var(--accent); margin: 0; }
+
+.app { display: flex; flex-direction: column; height: 100vh; }
+header { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
+.spacer { flex: 1; }
+.muted { color: var(--muted); }
+.pad { padding: 24px; }
+
+.body { display: flex; flex: 1; min-height: 0; }
+aside { width: 260px; border-right: 1px solid var(--line); padding: 12px; overflow: auto; }
+.new { width: 100%; margin-bottom: 12px; }
+.list { list-style: none; margin: 0; padding: 0; }
+.list li { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 6px; cursor: pointer; }
+.list li:hover { background: #221d18; }
+.list li.active { background: #2a241e; }
+.list .t { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.list .s { color: var(--muted); font-size: 12px; }
+.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; }
+.dot.published { background: var(--ok); }
+.dot.draft { background: #b89030; }
+
+main { flex: 1; min-width: 0; }
+.editor { display: flex; height: 100%; }
+.fields { width: 50%; padding: 16px; overflow: auto; display: flex; flex-direction: column; gap: 12px; }
+.row { display: flex; gap: 10px; }
+label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); flex: 1; }
+label.sm { flex: 0 0 140px; }
+label.xs { flex: 0 0 90px; }
+label.grow { flex: 1; }
+label input, label select, label textarea { color: var(--text); }
+textarea { flex: 1; min-height: 240px; resize: vertical; font-family: ui-monospace, monospace; }
+.actions { display: flex; gap: 8px; }
+
+.preview { width: 50%; border-left: 1px solid var(--line); }
+.preview iframe { width: 100%; height: 100%; border: 0; background: #fff; }
+
+.toast { position: fixed; bottom: 18px; right: 18px; padding: 10px 16px; border-radius: 8px; cursor: pointer; }
+.toast.ok { background: var(--ok); }
+.toast.err { background: var(--accent); }