update

templates/Format/Baustein.md

@@ -30,7 +30,7 @@ TYPOGRAFIE
 - Beschreibung: 14px, line-height 1.55
 - Zweck: 14px, italic, color #5a6470
 - Code: "SF Mono", Consolas, monospace, 12px, line-height 1.5
-- Code-Label: 10px, uppercase, letter-spacing 1px
+- Code-Label: 10px, letter-spacing 1px
 
 FARBEN
 - Card-Hintergrund: #ffffff
@@ -49,13 +49,24 @@ FARBEN
 - Label-Farbe in Code: #8be9fd (cyan)
 
 INHALTLICHE PRINZIPIEN
-- Titel: nur der Baustein-Name, kein Präfix, keine Variante
-- Beschreibung: 1 Satz, was es macht (mechanisch, neutral)
-- Zweck: 1 Satz, wofür man es nutzt (Anwendungsfall)
-- Beide Sätze knapp wie möglich, jedes überflüssige Wort raus
+- Titel: GELÄUFIGSTER Kurzbegriff, max 1-2 Wörter, kein Präfix, keine Variante
+  - Gut: "Header", "Variable", "Klasse", "for-Schleife"
+  - Schlecht: "Überschriften h1–h6", "Variablen-Deklaration mit Typ"
+- Beschreibung: WAS macht es mechanisch? 1 Satz, max 5 Wörter, abstrakt/technisch
+  - Gut: "Definiert eine Überschrift.", "Wiederholt einen Code-Block."
+  - Schlecht: "Sechs Ebenen von der wichtigsten bis zur untergeordneten Überschrift."
+- Zweck: WANN brauche ich das? 1 Satz, max 5 Wörter, situativ/Problem-Trigger
+  - Gut: "Strukturiert die Seiteninhalte.", "Liste oder Bereich durchgehen."
+  - Schlecht: "Gliedert Inhalt in Hierarchie für Leser, SEO und Screenreader-Navigation."
+- WICHTIG: Beschreibung und Zweck dürfen sich NICHT inhaltlich überschneiden
+  - Schlecht (tautologisch): Beschreibung "Wiederholt Code." / Zweck "Etwas mehrfach tun."
+  - Gut (distinkt): Beschreibung "Wiederholt einen Code-Block." / Zweck "Liste oder Bereich durchgehen."
+- Beide Sätze: jedes überflüssige Wort raus, keine Aufzählungen, keine Komma-Listen
 - Genau EIN Code-Beispiel: das relevanteste / häufigste / typischste
 - Beispiel zeigt den Standard-Use-Case, nicht Edge-Cases
-- Knappes Label über dem Beispiel (2-4 Wörter, uppercase)
+- Label über Beispiel: max 2-3 Wörter, einfach, beschreibend
+  - Gut: "Alle Header", "Zuweisung", "Grund-Regel"
+  - Schlecht: "Alle Ebenen h1–h6", "Variable mit Typ-Hint deklarieren"
 
 LAYOUT-DETAILS
 - Header und Body keine separaten Sektionen, alles in einer Card
@@ -93,7 +104,9 @@ GENERIERUNG MIT FEEDBACK-LOOP
 2. In Browser anzeigen (Playwright-Screenshot oder direkt)
 3. Prüfen:
    - Wirklich nur 4 Elemente (Titel, Beschreibung, Zweck, Beispiel)?
-   - Beschreibung und Zweck unter 15 Wörtern?
+   - Beschreibung und Zweck je max 5 Wörter?
+   - Titel max 1-2 Wörter, geläufiger Kurzbegriff?
+   - Label max 2-3 Wörter, simpel?
    - Code-Beispiel unter 8 Zeilen?
    - Label über Code-Block kurz und prägnant?
    - Card kompakt, kein leerer Raum?

templates/Referenz/Baustein.md

@@ -70,7 +70,6 @@ h1 {
   font-family: -apple-system, sans-serif;
   font-size: 10px;
   font-weight: 700;
-  text-transform: uppercase;
   letter-spacing: 1px;
   color: #8be9fd;
   margin-bottom: 6px;
@@ -88,9 +87,9 @@ h1 {
 
   <h1>for-Schleife</h1>
 
-  <p class="beschreibung">Führt einen Code-Block wiederholt aus.</p>
+  <p class="beschreibung">Wiederholt einen Code-Block.</p>
 
-  <p class="zweck">Wiederholung wenn Anzahl Durchläufe bekannt ist oder Index gebraucht wird.</p>
+  <p class="zweck">Liste oder Bereich durchgehen.</p>
 
   <div class="examples">