Zauberwald/.planning/quick/260329-u1d-kindgerechte-erkl-rung-auf-waldscreen-hi/260329-u1d-PLAN.md

phase, plan, type, wave, depends_on, files_modified, autonomous, requirements, must_haves

phase	plan	type	wave	depends_on	files_modified	autonomous	requirements	must_haves
quick	260329-u1d	execute	1		index.html src/styles/main.css	true		truths artifacts key_links Kind sieht auf dem Waldscreen einen einladenden, motivierenden Text Text erklaert kindgerecht dass man Buchstaben ueben kann und neue Bilder im Wald erscheinen path provides contains index.html Erklaerungstext-Element im forest screen forest__intro path provides contains src/styles/main.css Styling fuer den Erklaerungstext forest__intro

Kindgerechte Erklaerung auf dem Waldscreen (Forest-Ansicht) hinzufuegen.

Purpose: Das Kind soll beim Oeffnen des Waldscreens sofort verstehen, was es hier tun kann — Buchstaben ueben und dabei den Wald wachsen lassen. Der Text soll einladend und motivierend sein, passend zum Aquarell-/Pastellstil. Output: Sichtbarer Erklaerungstext zwischen Titel und Waldszene auf dem Forest-Screen.

<execution_context> @$HOME/.claude/get-shit-done/workflows/execute-plan.md @$HOME/.claude/get-shit-done/templates/summary.md </execution_context>

@index.html (forest screen section, lines 30-66) @src/styles/main.css (forest styles) Task 1: Erklaerungstext in HTML und CSS hinzufuegen index.html, src/styles/main.css 1. In index.html: Zwischen dem forest__title h1 (Zeile 32) und dem forest-greeting div (Zeile 33) ein neues p-Element einfuegen:

<p class="forest__intro">
  Willkommen in deinem Zauberwald! Waehle eine Stufe und uebe verschiedene Buchstaben auf der Tastatur. Jedes Mal, wenn du eine Uebung schaffst, waechst dein Wald — und ein neues Bild erscheint! Was wohl als Naechstes kommt?
</p>

Der Text soll:

• Kindgerecht sein (7 Jahre, einfache Saetze)
• Erklaeren dass man Buchstaben ueben kann (Stufenwahl)
• Erklaeren dass mit jeder Uebung neue Bilder im Wald erscheinen
• Neugier wecken ("Was wohl als Naechstes kommt?")
• Keine Umlaute verwenden (Codebase-Konvention: ue/oe/ae Transliteration)

2. In src/styles/main.css: Nach dem .forest__title Block (Zeile 188) einen neuen Block einfuegen:

.forest__intro {
  font-family: "Nunito", sans-serif;
  font-size: 1.1rem;
  color: var(--text-dark);
  text-align: center;
  max-width: 480px;
  line-height: 1.6;
  margin: 0 auto 1.5rem;
  opacity: 0.85;
}

Styling passend zum Pastellstil: Nunito Font (wie andere Body-Texte), sanfte Opacity, zentriert, angenehme Zeilenhoehe fuer Lesbarkeit. grep -q "forest__intro" index.html && grep -q "forest__intro" src/styles/main.css && echo "PASS" || echo "FAIL" Auf dem Waldscreen erscheint zwischen Titel und Waldszene ein kindgerechter, motivierender Erklaerungstext. Der Text erklaert Buchstabenuebungen und das Wachsen des Waldes.

- `grep "forest__intro" index.html` zeigt das p-Element - `grep "forest__intro" src/styles/main.css` zeigt das Styling - `npx vite build` kompiliert ohne Fehler

<success_criteria> Auf dem Waldscreen ist ein kindgerechter Erklaerungstext sichtbar, der dem Kind (7 Jahre) erklaert, dass es Buchstaben ueben kann und mit jeder Uebung neue Bilder im Wald erscheinen. </success_criteria>

After completion, create `.planning/quick/260329-u1d-kindgerechte-erkl-rung-auf-waldscreen-hi/260329-u1d-SUMMARY.md`