From 5396dc0e629e9ee486bd6821c3180c969a01f792 Mon Sep 17 00:00:00 2001
From: Markus Graf <info@markusgraf.ch>
Date: Sun, 29 Mar 2026 18:15:44 +0200
Subject: [PATCH] feat(04-03): add Daten section with Export/Import/Reset
 buttons in parent area

- HTML section with export-btn, import-btn, reset-btn, hidden file input
- CSS styles for action buttons including danger variant for reset

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 index.html          | 13 +++++++++++++
 src/styles/main.css | 38 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 51 insertions(+)

diff --git a/index.html b/index.html
index 00ec60e..19d0006 100644
--- a/index.html
+++ b/index.html
@@ -166,6 +166,19 @@
 						</div>
 					</section>
 
+					<section class="parent__section">
+						<h2>Daten</h2>
+						<div class="parent__data-actions">
+							<button class="parent__action-btn" id="export-btn">Fortschritt exportieren</button>
+							<div class="parent__import-row">
+								<button class="parent__action-btn" id="import-btn">Fortschritt importieren</button>
+								<input type="file" id="import-file" accept=".json" style="display:none">
+							</div>
+							<button class="parent__action-btn parent__action-btn--danger" id="reset-btn">Alles zuruecksetzen</button>
+						</div>
+						<p class="parent__data-info" id="data-feedback" style="display:none"></p>
+					</section>
+
 				</div>
 			</div>
 		</section>
diff --git a/src/styles/main.css b/src/styles/main.css
index f98f735..bd7967b 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -803,6 +803,44 @@ h3 {
 	transition: opacity 0.3s ease;
 }
 
+.parent__data-actions {
+	display: flex;
+	flex-direction: column;
+	gap: 0.75rem;
+	max-width: 300px;
+}
+
+.parent__action-btn {
+	font-family: "Quicksand", sans-serif;
+	font-size: 1rem;
+	padding: 0.6rem 1.2rem;
+	border: 2px solid var(--accent-green);
+	background: var(--bg-cream);
+	color: var(--text-dark);
+	border-radius: 8px;
+	cursor: pointer;
+	transition: background 0.2s;
+}
+
+.parent__action-btn:hover {
+	background: var(--bg-forest);
+}
+
+.parent__action-btn--danger {
+	border-color: #d46a6a;
+	color: #d46a6a;
+}
+
+.parent__action-btn--danger:hover {
+	background: #fde8e8;
+}
+
+.parent__data-info {
+	font-size: 0.9rem;
+	color: var(--accent-green);
+	margin-top: 0.5rem;
+}
+
 /* Keyboard */
 .keyboard {
 	display: flex;