Pluvo Kursgestaltung

Diese Skill beschreibt, wie du konsistente, professionell wirkende Inhalte in der Kursumgebung von Pluvo erstellst. Sie deckt zwei Dinge ab:

1. Technische Gestaltungsregeln, die immer gelten (Pluvo-HTML-Eigenheiten, Abstände, Typografie, Bilder, Callouts, Struktur).
2. Ästhetische Richtung — ein gewählter Stil, der den gesamten Kurs visuell zusammenhält (warm minimalistisch, redaktionell, typografisches Raster usw.).

Halte dich an diese Richtlinien, wenn du HTML für edit_content_text- oder edit_content_embed-Blöcke schreibst oder wenn ein Nutzer um ein Redesign bittet.

1. Vorgehen — Wie diese Skill angewendet wird

Schritt 1: Lege den Umfang fest

Bevor auch nur eine Zeile HTML geschrieben wird, muss klar sein:
Wie viel gestaltest du?

• Einen einzelnen Inhaltsblock? → frage nach der content_id oder einer Beschreibung, wo er sich befindet
• Ein ganzes Kapitel? → gehe alle Inhaltsblöcke in diesem Kapitel durch
• Einen ganzen Kurs? → erfasse zuerst die Kursstruktur, arbeite dann Kapitel für Kapitel

Was steht dort aktuell?

• Lies den bestehenden Inhalt mit get_content oder get_course_contents_summary
• Nimm auf, was vorhanden ist: Tabellen, Callouts, Accordions, Bilder, reiner Text
• Erkenne, was funktioniert und was die meiste Aufmerksamkeit braucht

Schritt 2: Lege die Farbquelle fest

Frage ausdrücklich, welcher Weg für die Farben gewählt wird. Drei Optionen:
Option A — Corporate Design der Academy Hole die Themenfarben des Pluvo-Kurses über get_course_theme_colors ab. Nutze sie als Basis (primär, sekundär, Akzent). Frage, ob weitere Farben aus dem Corporate Design der Organisation bekannt sind (Logofarben, Brandbook).
Option B — Eigene Farben im Kopf Der Nutzer hat eine bestimmte Palette vor Augen oder möchte vom Corporate Design der Academy abweichen. Frage nach konkreten Farben (Hex-Codes, eine Marke, die ihm gefällt, oder eine Stimmungsbeschreibung wie „warm und erdig" oder „frisch und blau").
Option C — Standardpalette wählen Keine Präferenz oder kein Corporate Design bekannt. Biete dann eine Auswahl aus vordefinierten Paletten an (siehe references/aesthetiek-stijlen.md, Abschnitt Standard-Farbpaletten).

Schritt 3: Wähle eine ästhetische Richtung

Lies die Details: references/aesthetiek-stijlen.md
Lege dem Nutzer eine Auswahl an Stilen vor. Nicht nur Namen — beschreibe, wie sich der Stil in einer Lernumgebung anfühlt:

Schritt 4: Definiere die Design-Tokens

Bevor du HTML schreibst, übersetze den gewählten Stil in konkrete Werte. Diese Tokens sorgen für Konsistenz über alle Blöcke hinweg:

RADIUS         border-radius (aus dem Stil)
SHADOW         box-shadow (aus dem Stil)
PRIMARY        primäre Akzentfarbe (aus Corporate Design oder Palette)
SECONDARY      sekundäre Farbe (falls verwendet)
BG_SUBTLE      heller Hintergrundton
BG_CARD        Hintergrund für Cards/Callouts
TEXT_COLOR     primäre Textfarbe
TEXT_MUTED     sekundäre Textfarbe
BORDER_COLOR   Linien und Trenner
HEADING_STYLE  font-family, letter-spacing, text-transform für Überschriften
BODY_STYLE     font-family, line-height für den Fließtext
HR_STYLE       Dicke, Farbe, Abstand horizontaler Linien
TRANSITION     Standard-Transition-Timing (aus dem Stil)

Teile diese Tokens mit dem Nutzer, bevor du weitermachst: „Das ist die Richtung, die ich einschlage — fühlt sich das gut an?" Das verhindert Nacharbeit.

Schritt 5: Baue den Inhalt auf

Arbeite jeden Inhaltsblock systematisch durch:

1. Lies den aktuellen Inhalt mit get_content
2. Erhalte Text und Bedeutung — du änderst die visuelle Gestaltung, nicht den Inhalt (es sei denn, der Nutzer bittet auch darum)
3. Wende die Design-Tokens konsistent auf jedes Element an
4. Verbessere Komponenten dort, wo der Stil es verlangt:

• Reiner Text → strukturiert mit Überschriften, Callouts, Zitaten
• Einfache Listen → nach dem Stil gestaltet
• Basis-Tabellen → vollständig gestaltete Tabellen mit deutlichem Kopf
• Flache Abschnitte → interaktive Elemente (Accordions, Flip Cards), wo es passt

5. Schreibe das HTML nach allen Pluvo-Regeln (siehe unten)
6. Wende es mit edit_content_text an

Schritt 6: Review und Wiederholung

Nach der Anwendung: lade den Nutzer zum Review ein.

• „Schau dir [Kapitelname] an — fühlt sich die visuelle Richtung gut an?"
• „Ich kann die Intensität anpassen (mehr/weniger Weißraum, kräftigere/sanftere Farben usw.)"
• „Soll ich denselben Stil im nächsten Kapitel fortsetzen?"

2. Pluvo-HTML-Regeln (nicht verhandelbar)

Diese Regeln gelten unabhängig vom gewählten Stil. Sie ergeben sich aus den Plattformgrenzen von Pluvo:

1. Das gesamte HTML muss in einer Zeile stehen. Pluvo wandelt jedes \n in ein <br> um. Keine Zeilenumbrüche, nicht in <style>, nicht in <script>, nirgends.
2. Bilder müssen gewrappt sein. Immer: <section><figure class="figure-image"><img src="URL" style="..."></figure></section>
3. Inline-Styles werden vom WYSIWYG-Editor gelöscht. Weise den Nutzer darauf hin: „Öffne diesen Block nicht im visuellen Editor von Pluvo — der entfernt das eigene Styling."
4. Scope das gesamte CSS mit einer eindeutigen ID. Verwende #redesign-{block-id} .class-name, um Style-Leaks zwischen Inhaltsblöcken zu verhindern. Jeder Block bekommt seinen eigenen Namespace.
5. Keine eigenen Web Fonts. Pluvo unterstützt kein @import und kein <link> zum Laden von Schriften. Nutze System-Font-Stacks:

• Serifenlos: 'Segoe UI',system-ui,-apple-system,sans-serif
• Serif: Georgia,'Times New Roman',serif
• Monospace: 'Courier New',Consolas,monospace

6. Standardmäßig mobil-responsiv. max-width:100% bei Bildern, flex-wrap:wrap mit min-width:280px bei Flex-Kindern, overflow-x:auto bei Tabellen.
7. Touch-freundlich. Klickbare Elemente mindestens 44px hoch.
8. Fix für die Accordion-Animation. Bei Accordions: verwende ein Wrapper-Div-Muster — das äußere Div übernimmt die max-height- und overflow:hidden-Transition, das innere Div hat ein konstantes Padding. Das verhindert, dass Text während der Animation springt. Im geöffneten Zustand bekommt der Header eckige untere Ecken (border-radius:8px 8px 0 0), damit er nahtlos in den Inhaltsbereich übergeht.
9. nth-child funktioniert in Pluvo NICHT. Das DOM von Pluvo fügt <style>, <h2>, <p> und andere Elemente als Geschwister hinzu, sodass nth-child diese mitzählt und deine Selektoren nicht das treffen, was du meinst. Verwende statt nth-child immer explizite Klassen (z. B. .ac-1, .ac-2, .fc-1, .fc-2) für Verlaufs- oder Wechselstile.
10. Akzentfarben für Betonung. Eine einzige Primärpalette wirkt über einen ganzen Kurs hinweg monoton. Definiere neben der Primärfarbe 2–3 Akzentfarben (z. B. Rosé, Bernstein) für Warnungen, rechtliche Callouts, Schrittabfolgen und Abwechslung bei wiederkehrenden Komponenten (Flip Cards, Cards). Setze Akzente bewusst ein — nur dort, wo Betonung nötig ist.

3. Abstände und Weißraum

Gute Pluvo-Inhalte wirken luftig. Faustregeln:

HR-Trenner

Verwende HR-Trenner konsequent als visuelle Trennlinie. Standardformat:

Bei ruhigeren Stilen darf der Abstand größer sein (40px 0 oder mehr); bei roheren Stilen darf die Linie dicker und härter sein. Der Stil bestimmt die Ausgestaltung — die Anwesenheit ist die Regel.
Wann setzt du eine HR:

• Am Anfang und am Ende jedes Blocks, der Bilder enthält
• Zwischen zwei Bild-Text-Paaren
• Zwischen einem Textabschnitt und einer Frage
• Zwischen zwei inhaltlich verschiedenen Abschnitten
• Vor einer Überschrift, die einen neuen Teil einleitet (wenn die Überschrift nicht das allererste Element ist)

Abstände bei einzelnen Elementen

4. Typografie und Überschriften

Hierarchie

Pluvo unterstützt <h2> bis <h4> in HTML-Blöcken. Setze sie konsequent und nicht zu schwer ein:

Überschrift über einer Frage

Setze immer eine deutliche Überschrift über einen Frage- oder Quizblock. Das gibt den Lernenden Kontext und macht die Struktur scanbar. Die Überschrift enthält zwei Dinge:

1. Das Thema der Frage — worum geht es?
2. Die Art der Frage — Wissenscheck, Selbsttest, Sortierfrage, Reflexionsfrage

Verwende <h3> oder <h4>, je nach Gewicht im Kurs. Die Überschrift steht in einem eigenen content_text-Block direkt über dem Frageblock:

Wissenscheck — Wann ist eine Gefährdungsbeurteilung Pflicht?

Reflexionsfrage: Wie gehst du mit Widerstand um?

Stelle nie eine Frage ohne Einleitung oder Überschrift. Ein einzelner Einleitungssatz reicht auch:

Lies die Situation unten und beantworte die Frage.

Bei einer Bündelung von Fragen (mehrere Fragen zum selben Thema): setze eine übergreifende Überschrift über die gesamte Reihe.

5. Bilder und Größen

Wrapper (Pflicht)

Größen je Inhaltstyp

Alt-Text als Bildunterschrift (bei einzelnen Bildern)

Füge unter einem eigenständigen Bild immer eine beschreibende Bildunterschrift hinzu:

Alt: Beschreibung dessen, was auf dem Bild zu sehen ist.

Layoutmuster für Bilder

Bild links, Text rechts:

TitelBeschreibender Text hier.

Text links, Bild rechts:

TitelBeschreibender Text hier.

Bild in voller Breite (Diagramm/Infografik):

TitelBeschreibung dessen, was das Bild zeigt.

Wechsle bei mehreren Paaren die Richtung ab (links/rechts/links), für visuellen Rhythmus.

6. Callouts und Highlights

Verwende Callouts, um wichtige Informationen hervorzuheben, ohne ein großes Bild einzusetzen. Immer Inline-Styles, einzeilig.
Info / Tipp:

💡 TippText des Tipps hier.

Warnung / Achtung:

⚠️ AchtungText der Warnung hier.

Wichtig / kritisch:

🔴 WichtigText hier.

Diese Muster sind der Standard — Farbe, Radius und Schatten werden an den gewählten Stil angepasst. Siehe references/aesthetiek-stijlen.md für stilspezifische Varianten.
Keine seitenbreiten Zitatblöcke in Kursinhalten. Verwende stattdessen Callouts (wie oben) oder stilspezifische Zitat-Komponenten aus der Ästhetik-Referenz.

7. Aufbau eines vollständigen Inhaltsblocks

Ein gut aufgebauter Pluvo-Inhaltsblock folgt dieser Reihenfolge:

1. HR (am Anfang, wenn Bilder oder Callouts folgen)
2. H3- oder H4-Überschrift (gibt Kontext für das, was folgt)
3. Einleitungstext (1–2 Sätze, optional)
4. Inhalt (Bild-Text-Paare, Callouts oder normale Absätze)
5. HR zwischen Abschnitten oder Paaren
6. HR am Ende (wenn der Block Bilder oder Callouts enthielt)

Beispielgerüst (konzeptionell):

[HR] [H3: Abschnittstitel] [Einleitungstext] [Bild-Text-Paar] [HR] [zweites Paar] [HR]

8. Anti-Muster

Kein Stil, der mit dem Lernziel kollidiert. Roh strukturell für Compliance-Schulungen lenkt ab. Verspielt grafisch für medizinische Schulungen untergräbt die Glaubwürdigkeit. Steuere in Richtung passender Entscheidungen.
Nicht über-designen. Selbst der üppigste Stil muss die Lesbarkeit unterstützen. Macht eine Entscheidung den Inhalt schwerer lesbar oder navigierbar? Dann ist sie falsch — wie ästhetisch „korrekt" auch immer.
Kein generischer AI-Look. Keine lila Verläufe auf Weiß, keine vorhersehbaren Card-Grids, keine Cookie-Cutter-Komponentenlayouts. Jedes Ergebnis soll sich anfühlen, als wäre es für genau diesen Kontext gestaltet worden.
Vergiss Mobil nicht. Jede Designentscheidung muss auf einem 375px-Bildschirm funktionieren. Bricht dein dreispaltiges Layout auf Mobilgeräten zusammen? Dann ist es kein gutes Design.

9. Checkliste vor dem Speichern

• Das vollständige HTML ist eine einzige durchgehende Zeile (kein \n)
• Jedes <img> steht in <section><figure class="figure-image">...</figure></section>
• Bilder haben die richtige max-height oder max-width
• Flexbox-Paare haben min-width:280px für Mobil
• HR-Trenner verwenden den richtigen Abstand (Standard 30px 0)
• Blöcke mit Bildern beginnen und enden mit einer HR
• Fragen haben eine Überschrift oder einen Einleitungssatz
• Einzelne Bilder haben eine Alt-Text-Bildunterschrift
• CSS mit eindeutiger Block-ID gescoped (keine Leaks)
• Keine nth-child-Selektoren verwendet
• Nichts wirkt gedrängt — genug Weißraum
• Touch-Ziele mindestens 44px hoch
• Nutzer darauf hingewiesen, dass der WYSIWYG-Editor das eigene HTML zerstört

10. Weitere Referenzen

Changelog

1.0.0 — Erste öffentliche Version. Zusammenführung der technischen Gestaltungsregeln und der ästhetischen Richtung in einer Skill. Acht Stile (warm minimalistisch, funktional, typografisches Raster, stiller Raum, redaktionell, dekorativ geometrisch, verspielt grafisch, roh strukturell) inklusive Tokens und visueller Beispiele. Standardpaletten für den Fall, dass kein Corporate Design verfügbar ist.

Aktualisiert am: 02/09/2026