From cf21710e2fd5d8c7c408d827a33adadc21faf946 Mon Sep 17 00:00:00 2001
From: Markus Graf <info@markusgraf.ch>
Date: Sun, 29 Mar 2026 21:40:07 +0200
Subject: [PATCH] feat(quick-260329-u1d): add kindgerechte Erklaerung on forest
 screen

- Added forest__intro paragraph between title and greeting area in index.html
- Added .forest__intro CSS block with Nunito font, centered, pastel-style styling
---
 index.html          |  3 +++
 src/styles/main.css | 11 +++++++++++
 2 files changed, 14 insertions(+)

diff --git a/index.html b/index.html
index cd76211..e888344 100644
--- a/index.html
+++ b/index.html
@@ -30,6 +30,9 @@
 		<section id="screen-forest" class="screen">
 			<div class="forest">
 				<h1 class="forest__title">Dein Zauberwald</h1>
+				<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>
 				<div id="forest-greeting" class="companion-area" style="display:none">
 					<img id="forest-greeting-avatar" class="companion-area__avatar" src="" alt="">
 					<p id="forest-greeting-text" class="companion-area__text"></p>
diff --git a/src/styles/main.css b/src/styles/main.css
index 63ee062..b7d99df 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -187,6 +187,17 @@ h3 {
 	margin-bottom: 1.5rem;
 }
 
+.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;
+}
+
 .forest__level-map {
 	display: grid;
 	grid-template-columns: repeat(3, 1fr);