feat: Divi hints point to the read tools; guides divi-structure/attrs/design-system; test: Divi read end-to-end

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01At3V6SjwbMe6eMzVGW3Hs7

docs/guides/divi-design-system.md

@@ -0,0 +1,20 @@
+# Divi-Designsystem
+
+`lit-divi-design-system` liest das Designsystem der Website live aus Divi:
+
+- **Globale Farben** (`colors`): ID (`gcid-…`), Name, Wert und der Platzhalter für neue Inhalte, z. B.
+  `{{color:primary}}` für die Primärfarbe oder `{{color:Nachtblau}}` für eine eigene globale Farbe. Die fünf
+  Theme-Farben heißen `primary`, `secondary`, `heading`, `body` und `link`.
+- **Globale Variablen** (`variables`): Zahlen, Texte, Bilder, Links (`gvid-…`), Platzhalter `{{var:<Name>}}`.
+- **Theme-Schriften** (`fonts`): Überschrift und Fließtext, Platzhalter `{{font:heading}}` / `{{font:body}}`.
+- **Größen** (`sizes`): Schriftgrößen, Inhaltsbreite und Spaltenabstand aus den Theme-Optionen.
+- **Presets** (`presets`): Modul-Presets je Modul (`kind: module`, z. B. alle Button-Presets) und
+  Gruppen-Presets (`kind: group`); `default: true` markiert das Standard-Preset eines Moduls.
+
+Regeln:
+
+1. Vor dem Gestalten einer Seite das Designsystem lesen.
+2. Globale Farben, Variablen und Presets vor festen Werten verwenden; feste Farben oder Schriften nur, wenn
+   der Nutzer es ausdrücklich möchte.
+3. Gibt es für einen Zweck noch keine Farbe, Variable oder kein Preset, dem Nutzer vorschlagen, es im
+   Divi-Builder anzulegen, statt feste Werte zu verteilen.