From 348a71aa593f35c8bbffc2d9ea2c93f70f2479c0 Mon Sep 17 00:00:00 2001
From: Markus Graf <info@markusgraf.ch>
Date: Sun, 29 Mar 2026 22:58:37 +0200
Subject: [PATCH] feat(05-01): add forest navigation DOM elements and CSS
 styling

- Add forest__nav container with prev/next buttons and page indicator in index.html
- Navigation placed between forest scene and level map, hidden by default
- Add .forest__nav, .forest__nav-btn, .forest__nav-text CSS classes
- 44px minimum touch targets on nav buttons, pastel BEM styling
- Buttons use Quicksand font matching app design language
---
 index.html          |  5 +++++
 src/styles/main.css | 43 +++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 48 insertions(+)

diff --git a/index.html b/index.html
index f95fe53..accffc0 100644
--- a/index.html
+++ b/index.html
@@ -61,6 +61,11 @@
 					<div class="forest__grid" id="forest-grid">
 					</div>
 				</div>
+				<div class="forest__nav" id="forest-nav" style="display:none">
+					<button class="forest__nav-btn forest__nav-btn--prev" id="forest-nav-prev" aria-label="Vorheriger Wald">&#x276E;</button>
+					<span class="forest__nav-text" id="forest-nav-text">Wald 1 von 1</span>
+					<button class="forest__nav-btn forest__nav-btn--next" id="forest-nav-next" aria-label="Nächster Wald">&#x276F;</button>
+				</div>
 				<div class="forest__level-map" id="level-map">
 					<!-- Level cards rendered dynamically -->
 				</div>
diff --git a/src/styles/main.css b/src/styles/main.css
index b7d99df..2105d14 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -529,6 +529,49 @@ h3 {
 	}
 }
 
+/* Forest navigation (multi-wald pagination) */
+.forest__nav {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 1.5rem;
+	margin: 1rem 0;
+}
+
+.forest__nav-btn {
+	min-width: 44px;
+	min-height: 44px;
+	border: 2px solid var(--accent-green);
+	border-radius: 50%;
+	background: var(--bg-cream);
+	color: var(--accent-green);
+	font-size: 1.4rem;
+	font-family: "Quicksand", sans-serif;
+	font-weight: 700;
+	cursor: pointer;
+	transition: background 0.2s, transform 0.2s;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.forest__nav-btn:hover:not(:disabled) {
+	background: var(--bg-forest);
+	transform: scale(1.1);
+}
+
+.forest__nav-btn:disabled {
+	opacity: 0.3;
+	cursor: default;
+}
+
+.forest__nav-text {
+	font-family: "Quicksand", sans-serif;
+	font-size: 1.1rem;
+	font-weight: 600;
+	color: var(--text-warm);
+}
+
 /* Reward Screen */
 .reward {
 	display: flex;