Regel: Oberflaechen immer aus den Produkt-Komponenten

rules.md §0 macht es zur Pflicht, komponenten.md ist das Nachschlagewerk
mit Tokens, Komponenten, Bausteinen und Vorgehen, CLAUDE.md weist jeden
Agenten darauf hin.

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

rules.md

@@ -1,13 +1,41 @@
 # Post-Generator — Regeln & Konventionen
 
 Arbeitsgrundlage für alles, was in diesem Repo an Social-Grafiken entsteht.
-**Stand:** 15.08.2026
+**Stand:** 20.10.2026
 
 Der Generator läuft lokal: `./serve.sh` → <http://127.0.0.1:4321/post1.html>
 (Post 1, Carousel).
 
 ---
 
+## 0. PFLICHT: Oberflächen aus den Produkt-Komponenten, nie eigene Grafik
+
+> **Diese Regel gilt für jeden Post und hat Vorrang vor allem anderen in dieser Datei.**
+>
+> Jede Zeichnung, die die Software zeigt, wird aus den echten Komponenten von
+> `hivegrid-cloud` nachgebaut: mit deren Maßen, Farben, Schrift (Instrument Sans),
+> Icons (Feather/Lucide) und Beschriftungen aus `translations.json`. Jede Zeichnung
+> bildet einen Screen nach, den es im Produkt wirklich gibt.
+>
+> **Verboten:** ausgedachte Oberflächen, eigene Marken-Pillen, Häkchen-Chips,
+> Reiter, Kacheln oder Effekte, die es im Produkt nicht gibt. Kurz: keine
+> „vibecoded“ Grafiken.
+>
+> - Nachschlagewerk mit allen Tokens, Komponenten, Bausteinen und dem Vorgehen:
+>   **`komponenten.md`**. Vor jedem neuen Post lesen.
+> - Referenz-Umsetzung: `post8.html` (seit 20.10.2026). Die Bausteine `pText`,
+>   `pBadge`, `pKnopf`, `pFeld`, `pTabs`, `pTabelle`, `pRahmen` und so weiter von
+>   dort übernehmen.
+> - Code immer von `origin/main` lesen (`git show origin/main:<pfad>`), nicht aus
+>   der veralteten Arbeitskopie.
+> - Was nicht auf die Slide passt, weglassen und im Kommentar vermerken. Nicht
+>   umbauen, nicht erfinden. Erfunden werden darf nur Demo-Inhalt.
+>
+> **Warum:** Post 8 sah mit eigenem Design „total vibecoded“ aus. Nachgebaut aus
+> den Komponenten „sieht jetzt genau so aus wie die Software“ (Dejan, 20.10.2026).
+
+---
+
 ## 1. Wo die Wahrheit steht
 
 > **Neue Basis ab 12.10.2026: `hivegrid-cloud`.** Das ist die aktuelle Version
@@ -27,7 +55,7 @@ Der Generator läuft lokal: `./serve.sh` → <http://127.0.0.1:4321/post1.html>
 >
 > | Was | Wert |
 > |---|---|
-> | Schrift | Instrument Sans (heute hier: Manrope) |
+> | Schrift | Instrument Sans: in allen Oberflächen-Zeichnungen (§0), die Slide-Überschriften bleiben Manrope |
 > | Text, Knöpfe | `#24242B` (grey-900), Knöpfe sind fast schwarz |
 > | Text zweitrangig | `#505057`, drittrangig `#6D6D71` |
 > | Markengelb | `#F1B729` (brand-600), unverändert |
@@ -36,12 +64,12 @@ Der Generator läuft lokal: `./serve.sh` → <http://127.0.0.1:4321/post1.html>
 > | Rahmen | `#E5E5E5` (neutral-200) |
 > | Radien | 4, 8, 12 px |
 > | Größen | Hero 72/72, Seite 48/56, Untertitel 32/40, alle 600 |
-> | Symbole | Feather über `@subframe/core` (heute hier: Phosphor) |
+> | Symbole | Feather über `@subframe/core`: in Oberflächen als Lucide-Formen (§0), Phosphor nur noch in älteren Posts |
 >
-> Drei Punkte widersprechen den bisherigen Regeln und sind noch nicht
-> entschieden: die Schatten (`--shadow-md`, `--shadow-lg`) gegen §5 „Keine
-> Schatten“, der Rahmen `#E5E5E5` gegen `#D5DBE1` aus §1a, Feather gegen
-> Phosphor. Die Werte sind hier noch nicht gespiegelt.
+> Entschieden am 20.10.2026: Oberflächen nehmen Rahmen `#E5E5E5` und
+> Feather/Lucide aus dem Produkt (§0). Offen bleiben die Schatten
+> (`--shadow-md`, `--shadow-lg`) gegen §5 „Keine Schatten“: In den Zeichnungen
+> lassen wir sie weg, siehe `komponenten.md`.
 
 Alle Marken-Werte stammen aus der Website, nicht aus diesem Repo. Bei Zweifel
 **dort nachschauen, nicht hier raten**: