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

<objective>
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.
</objective>

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

<context>
@index.html (forest screen section, lines 30-66)
@src/styles/main.css (forest styles)
</context>

<tasks>

<task type="auto">
  <name>Task 1: Erklaerungstext in HTML und CSS hinzufuegen</name>
  <files>index.html, src/styles/main.css</files>
  <action>
1. In index.html: Zwischen dem forest__title h1 (Zeile 32) und dem forest-greeting div (Zeile 33) ein neues p-Element einfuegen:

```html
<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:

```css
.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.
  </action>
  <verify>
    <automated>grep -q "forest__intro" index.html && grep -q "forest__intro" src/styles/main.css && echo "PASS" || echo "FAIL"</automated>
  </verify>
  <done>Auf dem Waldscreen erscheint zwischen Titel und Waldszene ein kindgerechter, motivierender Erklaerungstext. Der Text erklaert Buchstabenuebungen und das Wachsen des Waldes.</done>
</task>

</tasks>

<verification>
- `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
</verification>

<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>

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