Style editor Markdown with .markdown-body and add ::: design blocks

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

docs/redaktion.md

@@ -201,6 +201,105 @@ Eine Frage hat `question`, `answer` (Markdown), `topic`, `order` und `public`.
 
 ---
 
+## Gestaltungsbausteine
+
+Alle Texte (`body` von Seiten und Beiträgen, `intro` und `answer` bei den FAQs)
+sind **Markdown**. Die Website gestaltet sie automatisch: Zwischenüberschriften
+(`## …`) bekommen einen grünen Strich, Listen grüne Punkte, Zitate (`> …`) einen
+farbigen Balken. Darüber hinaus gibt es ein paar **Bausteine**, mit denen du eine
+Seite selbst gestaltest — ohne Code und ohne HTML.
+
+> **Kein HTML.** HTML im Text (`<div>`, `<br>`, `<script>` …) wird nicht
+> ausgeführt, sondern als Text angezeigt. Das ist Absicht: Die Datenschutzerklärung
+> sagt zu, dass kein Programmcode im Browser läuft. Für Gestaltung die Bausteine
+> unten nehmen.
+
+### Bausteine mit `:::`
+
+Ein Baustein beginnt mit `::: name` in einer eigenen Zeile und endet mit `:::`.
+Dazwischen steht normales Markdown. Vor und nach dem Baustein eine Leerzeile
+lassen. Die Namen sind fest; ein **vertippter Name** schadet nicht — der Inhalt
+erscheint dann einfach als normaler Text.
+
+**Kennzahlen** — eine Liste wird zu großen Zahlen-Kacheln. Der **fett**
+geschriebene Anfang ist die Zahl, der Rest die Beschriftung darunter:
+
+```markdown
+::: kennzahlen
+- **seit 1975** im Einsatz für die IGMH
+- **über 500** Mitglieder
+- **ab 10 €** Jahresbeitrag
+:::
+```
+
+**Aufruf** — eine hervorgehobene Box für die wichtigste Aktion der Seite. Links
+darin erscheinen als Button:
+
+```markdown
+::: aufruf
+Die Beitrittserklärung füllen Sie online beim Förderverein aus.
+
+[Zur Beitrittserklärung](https://easyverein.com/public/FDI/applicationform/21612)
+:::
+```
+
+**Kacheln** — eine Liste als Raster aus Karten. Ein **fetter** Anfang wird zur
+Überschrift der Karte:
+
+```markdown
+::: kacheln
+- **Pädagogik** Bessere Rahmenbedingungen für die Arbeit an der Schule
+- **Projekte** Musische, sportliche und kulturelle Vorhaben
+- **Ausstattung** Anschaffungen, die allen zugutekommen
+:::
+```
+
+**Hinweis** — eine dezente Info-Box mit Info-Symbol:
+
+```markdown
+::: hinweis
+Bei dringenden Angelegenheiten wenden Sie sich bitte direkt an das Sekretariat.
+:::
+```
+
+### Links, die sich automatisch verändern
+
+- **Links auf andere Websites** (`https://…`) bekommen ein kleines Pfeil-Symbol.
+  Links auf eigene Seiten schreibst du ohne Domain: `[Kontakt](/contact)`.
+- **PDF-Links** (Adresse endet auf `.pdf`) bekommen ein Datei-Symbol und den
+  Hinweis „PDF“. Steht der Link **allein** in einer Zeile oder einem
+  Listenpunkt, wird er zur Datei-Karte — so wird eine Liste von Dokumenten zum
+  Download-Bereich:
+
+  ```markdown
+  - [Aufnahmeantrag Förderverein](/dokumente/aufnahmeantrag-foerderverein.pdf)
+  - [Einzugsermächtigung](/dokumente/einzugsermaechtigung.pdf)
+  ```
+
+  Die PDF-Dateien selbst liegen nicht in PocketBase, sondern im Code unter
+  `wwwroot/dokumente/` (ein neues PDF braucht also einen Entwickler).
+- **E-Mail-Link allein in einem Absatz** wird zum Button:
+
+  ```markdown
+  [kontakt@elternbeirat-igmh.info](mailto:kontakt@elternbeirat-igmh.info)
+  ```
+
+  Steht der Link mitten im Satz („Schreiben Sie an …“), bleibt er ein normaler
+  Link.
+
+### Tabellen
+
+Tabellen gehen mit senkrechten Strichen; die zweite Zeile trennt die Kopfzeile
+ab. Auf dem Handy lässt sich eine breite Tabelle seitlich schieben.
+
+```markdown
+| Tag      | Uhrzeit   | Ort        |
+|----------|-----------|------------|
+| Dienstag | 19:00 Uhr | Hörsaal 2  |
+```
+
+---
+
 ## Regeln beim Speichern
 
 - **Nach dem Ändern einer Zugriffsregel** immer den Haupt-*Save* der Collection