refactor(i18n): remove duplicate German files

German content now handled via i18n.js translations module.
Removes index.de.html and app.de.js in favor of single
language-agnostic codebase.

src/app.de.js

@@ -1,594 +0,0 @@
-import { LessonEngine } from "./impl/LessonEngine.js";
-import { CodeEditor } from "./impl/CodeEditor.js";
-import { renderLesson, renderModuleList, renderLevelIndicator, updateActiveLessonInSidebar } from "./helpers/renderer.js";
-import { loadModules } from "./config/lessons.de.js";
-
-// Simplified state - LessonEngine now manages lesson state and progress
-const state = {
-	userSettings: {
-		disableFeedbackErrors: false
-	},
-	showExpected: false
-};
-
-// DOM elements - updated for new layout
-const elements = {
-	// Header
-	menuBtn: document.getElementById("menu-btn"),
-	helpBtn: document.getElementById("help-btn"),
-
-	// Left panel
-	lessonTitle: document.getElementById("lesson-title"),
-	lessonDescription: document.getElementById("lesson-description"),
-	taskInstruction: document.getElementById("task-instruction"),
-	codeInput: document.getElementById("code-input"),
-	runBtn: document.getElementById("run-btn"),
-	undoBtn: document.getElementById("undo-btn"),
-	redoBtn: document.getElementById("redo-btn"),
-	resetCodeBtn: document.getElementById("reset-code-btn"),
-	hintArea: document.getElementById("hint-area"),
-	editorContent: document.querySelector(".editor-content"),
-	codeEditor: document.querySelector(".code-editor"),
-
-	// Right panel
-	previewArea: document.getElementById("preview-area"),
-	showExpectedBtn: document.getElementById("show-expected-btn"),
-	expectedOverlay: document.getElementById("expected-overlay"),
-	previewWrapper: document.querySelector(".preview-wrapper"),
-	prevBtn: document.getElementById("prev-btn"),
-	nextBtn: document.getElementById("next-btn"),
-	levelIndicator: document.getElementById("level-indicator"),
-
-	// Sidebar
-	sidebarDrawer: document.getElementById("sidebar-drawer"),
-	sidebarBackdrop: document.getElementById("sidebar-backdrop"),
-	closeSidebar: document.getElementById("close-sidebar"),
-	moduleList: document.getElementById("module-list"),
-	progressFill: document.getElementById("progress-fill"),
-	progressText: document.getElementById("progress-text"),
-	resetBtn: document.getElementById("reset-btn"),
-	disableFeedbackToggle: document.getElementById("disable-feedback-toggle"),
-
-	// Dialogs
-	helpDialog: document.getElementById("help-dialog"),
-	helpDialogClose: document.getElementById("help-dialog-close"),
-	resetDialog: document.getElementById("reset-dialog"),
-	resetDialogClose: document.getElementById("reset-dialog-close"),
-	cancelReset: document.getElementById("cancel-reset"),
-	confirmReset: document.getElementById("confirm-reset")
-};
-
-// Initialize the lesson engine - now the single source of truth
-const lessonEngine = new LessonEngine();
-
-// Code editor instance (initialized later)
-let codeEditor = null;
-let currentMode = "css";
-
-// ================= SIDEBAR FUNCTIONS =================
-
-// Track element that opened sidebar for focus return
-let sidebarTrigger = null;
-
-function openSidebar() {
-	// Store trigger element for focus return
-	sidebarTrigger = document.activeElement;
-
-	elements.sidebarDrawer.classList.add("open");
-	elements.sidebarBackdrop.classList.add("visible");
-
-	// Move focus to close button for keyboard users
-	elements.closeSidebar.focus();
-}
-
-function closeSidebar() {
-	elements.sidebarDrawer.classList.remove("open");
-	elements.sidebarBackdrop.classList.remove("visible");
-
-	// Return focus to trigger element
-	if (sidebarTrigger && typeof sidebarTrigger.focus === "function") {
-		sidebarTrigger.focus();
-		sidebarTrigger = null;
-	}
-}
-
-// ================= EXPECTED RESULT TOGGLE =================
-
-function toggleExpectedResult() {
-	state.showExpected = !state.showExpected;
-
-	if (state.showExpected) {
-		elements.expectedOverlay.classList.add("visible");
-		elements.showExpectedBtn.textContent = "Lösung ausblenden";
-		elements.showExpectedBtn.classList.add("btn-primary");
-	} else {
-		elements.expectedOverlay.classList.remove("visible");
-		elements.showExpectedBtn.textContent = "Lösung zeigen";
-		elements.showExpectedBtn.classList.remove("btn-primary");
-	}
-}
-
-// ================= HINT SYSTEM =================
-
-function showHint(message, step, total, isSuccess = false) {
-	const hintClass = isSuccess ? "hint hint-success" : "hint";
-	elements.hintArea.innerHTML = `
-		<div class="${hintClass}">
-			<span class="hint-progress">${step}/${total}</span>
-			<span class="hint-message">${message}</span>
-		</div>
-	`;
-}
-
-function clearHint() {
-	elements.hintArea.innerHTML = "";
-}
-
-function showSuccessHint(message) {
-	elements.hintArea.innerHTML = `
-		<div class="hint hint-success">
-			<span class="hint-progress">✓</span>
-			<span class="hint-message">${message}</span>
-		</div>
-	`;
-}
-
-// ================= PROGRESS DISPLAY =================
-
-function updateProgressDisplay() {
-	const stats = lessonEngine.getProgressStats();
-	elements.progressFill.style.width = `${stats.percentComplete}%`;
-	elements.progressText.textContent = `${stats.percentComplete}% abgeschlossen (${stats.totalCompleted}/${stats.totalLessons})`;
-}
-
-// ================= USER SETTINGS =================
-
-function loadUserSettings() {
-	const savedSettings = localStorage.getItem("codeCrispies.settings");
-	if (savedSettings) {
-		try {
-			const settings = JSON.parse(savedSettings);
-			state.userSettings = { ...state.userSettings, ...settings };
-			elements.disableFeedbackToggle.checked = !state.userSettings.disableFeedbackErrors;
-		} catch (e) {
-			console.error("Fehler beim Laden der Einstellungen:", e);
-		}
-	}
-}
-
-function saveUserSettings() {
-	localStorage.setItem("codeCrispies.settings", JSON.stringify(state.userSettings));
-}
-
-// ================= MODULE INITIALIZATION =================
-
-async function initializeModules() {
-	try {
-		const modules = await loadModules();
-		lessonEngine.setModules(modules);
-
-		// Use the new renderModuleList function with both callbacks
-		renderModuleList(elements.moduleList, modules, selectModule, selectLesson);
-
-		// Load saved progress and select appropriate module
-		const progressData = lessonEngine.loadUserProgress();
-		const lastModuleId = progressData?.lastModuleId;
-
-		if (lastModuleId && modules.find((m) => m.id === lastModuleId)) {
-			selectModule(lastModuleId);
-		} else if (modules.length > 0) {
-			selectModule(modules[0].id);
-		}
-
-		updateProgressDisplay();
-	} catch (error) {
-		console.error("Module konnten nicht geladen werden:", error);
-		elements.lessonDescription.textContent = "Module konnten nicht geladen werden. Bitte Seite neu laden.";
-	}
-}
-
-// ================= MODULE/LESSON SELECTION =================
-
-function selectModule(moduleId) {
-	const success = lessonEngine.setModuleById(moduleId);
-	if (!success) return;
-
-	// Update module list UI to highlight the active module
-	const moduleItems = elements.moduleList.querySelectorAll(".module-header");
-	moduleItems.forEach((item) => {
-		item.classList.remove("active");
-		if (item.dataset.moduleId === moduleId) {
-			item.classList.add("active");
-		}
-	});
-
-	loadCurrentLesson();
-	resetSuccessIndicators();
-
-	// Close sidebar after selection on mobile
-	if (window.innerWidth <= 768) {
-		closeSidebar();
-	}
-}
-
-function selectLesson(moduleId, lessonIndex) {
-	const currentState = lessonEngine.getCurrentState();
-	if (!currentState.module || currentState.module.id !== moduleId) {
-		lessonEngine.setModuleById(moduleId);
-	}
-
-	lessonEngine.setLessonByIndex(lessonIndex);
-	loadCurrentLesson();
-
-	// Close sidebar after selection on mobile
-	if (window.innerWidth <= 768) {
-		closeSidebar();
-	}
-}
-
-// ================= LESSON LOADING =================
-
-function resetSuccessIndicators() {
-	elements.codeEditor.classList.remove("success-highlight");
-	elements.lessonTitle.classList.remove("success-text");
-	elements.nextBtn.classList.remove("success");
-	elements.taskInstruction.classList.remove("success-instruction");
-	elements.runBtn.classList.remove("success");
-	elements.previewWrapper?.classList.remove("matched");
-}
-
-function updateEditorForMode(mode) {
-	const editorLabel = document.querySelector(".editor-label");
-
-	const modeConfig = {
-		html: {
-			placeholder: "HTML hier eingeben... Probiere: nav>ul>li*3 dann Tab drücken",
-			label: "HTML-Editor",
-			cmMode: "html"
-		},
-		tailwind: {
-			placeholder: "Tailwind-Klassen eingeben (z.B. bg-blue-500 text-white p-4)",
-			label: "Tailwind-Klassen",
-			cmMode: "css"
-		},
-		css: {
-			placeholder: "CSS-Code hier eingeben...",
-			label: "CSS-Editor",
-			cmMode: "css"
-		}
-	};
-
-	const config = modeConfig[mode] || modeConfig.css;
-	if (editorLabel) editorLabel.textContent = config.label;
-
-	// Update CodeMirror mode if needed
-	if (codeEditor && currentMode !== config.cmMode) {
-		currentMode = config.cmMode;
-		codeEditor.setMode(config.cmMode);
-	}
-}
-
-function loadCurrentLesson() {
-	const engineState = lessonEngine.getCurrentState();
-
-	if (!engineState.module || !engineState.lesson) {
-		return;
-	}
-
-	const lesson = engineState.lesson;
-	const mode = lesson.mode || engineState.module?.mode || "css";
-
-	// Update UI based on mode
-	updateEditorForMode(mode);
-
-	// Reset any success indicators
-	resetSuccessIndicators();
-
-	// Clear hints
-	clearHint();
-
-	// Hide expected overlay
-	state.showExpected = false;
-	elements.expectedOverlay.classList.remove("visible");
-	elements.showExpectedBtn.textContent = "Lösung zeigen";
-	elements.showExpectedBtn.classList.remove("btn-primary");
-
-	// Update UI
-	renderLesson(
-		elements.lessonTitle,
-		elements.lessonDescription,
-		elements.taskInstruction,
-		elements.previewArea,
-		null, // editorPrefix no longer used
-		null, // codeInput no longer used (using CodeMirror)
-		null, // editorSuffix no longer used
-		lesson
-	);
-
-	// Set user code in CodeMirror
-	if (codeEditor) {
-		codeEditor.setValue(engineState.userCode);
-	}
-
-	// Update Run button text based on completion status
-	if (engineState.isCompleted) {
-		elements.runBtn.innerHTML = '<img src="./gear.svg" alt="" />Erneut anwenden';
-
-		// Add completion badge if not present
-		if (!document.querySelector(".completion-badge")) {
-			const badge = document.createElement("span");
-			badge.className = "completion-badge";
-			badge.textContent = "Erledigt";
-			elements.lessonTitle.appendChild(badge);
-		}
-	} else {
-		elements.runBtn.innerHTML = '<img src="./gear.svg" alt="" />Ausführen';
-
-		// Remove completion badge if exists
-		const badge = document.querySelector(".completion-badge");
-		if (badge) badge.remove();
-	}
-
-	// Update level indicator
-	renderLevelIndicator(elements.levelIndicator, engineState.lessonIndex + 1, engineState.totalLessons);
-
-	// Update active lesson in sidebar
-	updateActiveLessonInSidebar(engineState.module.id, engineState.lessonIndex);
-
-	// Update navigation buttons
-	updateNavigationButtons();
-
-	// Update progress display
-	updateProgressDisplay();
-
-	// Focus on the code editor
-	if (codeEditor) {
-		codeEditor.focus();
-	}
-
-	// Render the expected/solution preview
-	lessonEngine.renderExpectedPreview();
-}
-
-// ================= LIVE PREVIEW =================
-
-let previewTimer = null;
-
-function handleEditorChange(code) {
-	if (previewTimer) {
-		clearTimeout(previewTimer);
-	}
-
-	previewTimer = setTimeout(() => {
-		runCode();
-	}, 800);
-}
-
-// ================= NAVIGATION =================
-
-function updateNavigationButtons() {
-	const engineState = lessonEngine.getCurrentState();
-
-	elements.prevBtn.disabled = !engineState.canGoPrev;
-	elements.nextBtn.disabled = !engineState.canGoNext;
-
-	elements.prevBtn.classList.toggle("btn-disabled", !engineState.canGoPrev);
-	elements.nextBtn.classList.toggle("btn-disabled", !engineState.canGoNext);
-}
-
-function nextLesson() {
-	const success = lessonEngine.nextLesson();
-	if (success) {
-		loadCurrentLesson();
-	}
-}
-
-function prevLesson() {
-	const success = lessonEngine.previousLesson();
-	if (success) {
-		loadCurrentLesson();
-	}
-}
-
-// ================= CODE EXECUTION =================
-
-function resetCode() {
-	// Reset editor to initial code for current lesson
-	lessonEngine.reset();
-	const engineState = lessonEngine.getCurrentState();
-	if (codeEditor && engineState.lesson) {
-		codeEditor.setValue(engineState.lesson.initialCode || "");
-	}
-	// Clear hints and success indicators
-	clearHint();
-	resetSuccessIndicators();
-}
-
-function runCode() {
-	const userCode = codeEditor ? codeEditor.getValue() : "";
-
-	// Rotate the Run button icon
-	const runButtonImg = document.querySelector("#run-btn img");
-	if (runButtonImg) {
-		const currentRotation = parseInt(runButtonImg.style.transform?.match(/\d+/)?.[0] || "0");
-		runButtonImg.style.transform = `rotate(${currentRotation + 180}deg)`;
-	}
-
-	// Apply the code to the preview via LessonEngine
-	lessonEngine.applyUserCode(userCode, true);
-
-	// Validate code using LessonEngine
-	const validationResult = lessonEngine.validateCode();
-
-	if (validationResult.isValid) {
-		// Show success hint
-		showSuccessHint(validationResult.message || "CRISPY! ٩(◕‿◕)۶ Dein Code funktioniert.");
-
-		// Update Run button
-		elements.runBtn.innerHTML = '<img src="./gear.svg" alt="" />Erneut anwenden';
-		elements.runBtn.classList.add("success");
-
-		// Add completion badge
-		if (!document.querySelector(".completion-badge")) {
-			const badge = document.createElement("span");
-			badge.className = "completion-badge";
-			badge.textContent = "Erledigt";
-			elements.lessonTitle.appendChild(badge);
-		}
-
-		// Add success visual indicators
-		elements.codeEditor.classList.add("success-highlight");
-		elements.lessonTitle.classList.add("success-text");
-		elements.nextBtn.classList.add("success");
-		elements.taskInstruction.classList.add("success-instruction");
-
-		// Show match animation
-		elements.previewWrapper?.classList.add("matched");
-		setTimeout(() => {
-			elements.previewWrapper?.classList.remove("matched");
-		}, 2500);
-
-		updateNavigationButtons();
-		updateProgressDisplay();
-	} else {
-		// Reset success indicators
-		resetSuccessIndicators();
-
-		// Show hint with step progress
-		const step = validationResult.validCases + 1;
-		const total = validationResult.totalCases;
-
-		// Only show hints if enabled
-		if (!state.userSettings.disableFeedbackErrors) {
-			showHint(validationResult.message || "Weiter versuchen!", step, total);
-		}
-	}
-}
-
-// ================= DIALOGS =================
-
-function showHelp() {
-	elements.helpDialog.showModal();
-}
-
-function closeHelpDialog() {
-	elements.helpDialog.close();
-}
-
-function showResetConfirmation() {
-	elements.resetDialog.showModal();
-}
-
-function closeResetDialog() {
-	elements.resetDialog.close();
-}
-
-function handleResetConfirm() {
-	lessonEngine.clearProgress();
-	closeResetDialog();
-	closeSidebar();
-
-	// Reload first module
-	const modules = lessonEngine.modules;
-	if (modules.length > 0) {
-		selectModule(modules[0].id);
-	}
-
-	updateProgressDisplay();
-}
-
-// ================= INITIALIZATION =================
-
-function initCodeEditor() {
-	const container = elements.editorContent;
-	if (!container) return;
-
-	// Remove the textarea - CodeMirror will replace it
-	const textarea = container.querySelector("textarea");
-	if (textarea) {
-		textarea.remove();
-	}
-
-	// Initialize CodeMirror
-	codeEditor = new CodeEditor(container, {
-		mode: currentMode,
-		placeholder: "Code hier eingeben...",
-		onChange: handleEditorChange
-	});
-
-	codeEditor.init("");
-}
-
-function init() {
-	loadUserSettings();
-
-	// Initialize CodeMirror editor
-	initCodeEditor();
-
-	// Load modules after editor is ready
-	initializeModules().catch(console.error);
-
-	// Sidebar controls
-	elements.menuBtn.addEventListener("click", openSidebar);
-	elements.closeSidebar.addEventListener("click", closeSidebar);
-	elements.sidebarBackdrop.addEventListener("click", closeSidebar);
-
-	// Expected result toggle
-	elements.showExpectedBtn.addEventListener("click", toggleExpectedResult);
-
-	// Navigation
-	elements.prevBtn.addEventListener("click", prevLesson);
-	elements.nextBtn.addEventListener("click", nextLesson);
-	elements.runBtn.addEventListener("click", runCode);
-
-	// Editor tools
-	elements.undoBtn.addEventListener("click", () => {
-		if (codeEditor) codeEditor.undo();
-	});
-	elements.redoBtn.addEventListener("click", () => {
-		if (codeEditor) codeEditor.redo();
-	});
-	elements.resetCodeBtn.addEventListener("click", resetCode);
-
-	// Dialogs
-	elements.helpBtn.addEventListener("click", showHelp);
-	elements.helpDialogClose.addEventListener("click", closeHelpDialog);
-	elements.helpDialog.addEventListener("click", (e) => {
-		if (e.target === elements.helpDialog) closeHelpDialog();
-	});
-	elements.resetBtn.addEventListener("click", showResetConfirmation);
-	elements.resetDialogClose.addEventListener("click", closeResetDialog);
-	elements.resetDialog.addEventListener("click", (e) => {
-		if (e.target === elements.resetDialog) closeResetDialog();
-	});
-	elements.cancelReset.addEventListener("click", closeResetDialog);
-	elements.confirmReset.addEventListener("click", handleResetConfirm);
-
-	// Settings
-	elements.disableFeedbackToggle.addEventListener("change", (e) => {
-		state.userSettings.disableFeedbackErrors = !e.target.checked;
-		saveUserSettings();
-	});
-
-	// Click on editor content to focus CodeMirror
-	elements.editorContent?.addEventListener("click", () => {
-		if (codeEditor) codeEditor.focus();
-	});
-
-	// Keyboard shortcuts
-	document.addEventListener("keydown", (e) => {
-		// Ctrl+Enter to run code
-		if (e.ctrlKey && e.key === "Enter") {
-			runCode();
-			e.preventDefault();
-		}
-
-		// Escape to close sidebar (dialogs handle Escape natively)
-		if (e.key === "Escape") {
-			closeSidebar();
-		}
-	});
-}
-
-// Start the application
-init();

src/index.de.html

@@ -1,213 +0,0 @@
-<!doctype html>
-<html lang="de">
-	<head>
-		<meta charset="UTF-8" />
-		<link rel="icon" href="./favicon.ico" type="image/x-icon" />
-		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<title>CODE CRISPIES - CSS interaktiv lernen</title>
-		<link rel="stylesheet" href="main.css" />
-	</head>
-	<body>
-		<a href="#main-content" class="skip-link">Zum Hauptinhalt springen</a>
-		<div class="app-container">
-			<!-- Minimaler Header -->
-			<header class="header">
-				<button id="menu-btn" class="menu-toggle" aria-label="Menü öffnen">
-					<span class="hamburger-line"></span>
-					<span class="hamburger-line"></span>
-					<span class="hamburger-line"></span>
-				</button>
-				<div class="logo">
-					<img src="./bowl.png" width="40" alt="CODE CRISPIES Logo" />
-					<h1>CODE<span>CRISPIES</span></h1>
-				</div>
-				<div class="header-actions">
-					<a href="./index.html" class="lang-switch" aria-label="Switch language: English">EN</a>
-					<button id="help-btn" class="help-toggle" aria-label="Hilfe">?</button>
-				</div>
-			</header>
-
-			<!-- Hauptlayout -->
-			<main class="game-layout" id="main-content">
-				<!-- Linke Spalte: Anleitung + Editor -->
-				<div class="left-panel">
-					<section class="instructions">
-						<span class="module-pill" id="module-pill">Laden...</span>
-						<h2 id="lesson-title">Laden...</h2>
-						<div class="lesson-description" id="lesson-description">
-							Bitte wähle eine Lektion aus, um zu beginnen.
-						</div>
-						<div class="task-instruction" id="task-instruction">
-							<!-- Aufgabenanweisungen werden hier angezeigt -->
-						</div>
-					</section>
-
-					<section class="editor-section">
-						<div class="code-editor">
-							<div class="editor-header">
-								<label for="code-input" class="editor-label">CSS-Editor</label>
-								<div class="editor-actions">
-									<div class="editor-tools">
-										<button id="undo-btn" class="btn btn-icon" title="Rückgängig (Strg+Z)">↶</button>
-										<button id="redo-btn" class="btn btn-icon" title="Wiederholen (Strg+Umschalt+Z)">↷</button>
-										<button id="reset-code-btn" class="btn btn-icon" title="Auf Anfangscode zurücksetzen">⟲</button>
-									</div>
-									<button id="run-btn" class="btn btn-run">
-										<img src="./gear.svg" alt="" />Ausführen
-									</button>
-								</div>
-							</div>
-							<div class="editor-content">
-								<!-- Textarea wird durch CodeMirror ersetzt -->
-								<textarea id="code-input" class="code-input" spellcheck="false" autocomplete="off" style="display: none;"></textarea>
-							</div>
-						</div>
-						<div class="hint-area" id="hint-area">
-							<!-- Hinweise werden hier angezeigt -->
-						</div>
-					</section>
-				</div>
-
-				<!-- Rechte Spalte: Vorschau + Navigation -->
-				<div class="right-panel">
-					<div class="preview-section">
-						<div class="preview-header">
-							<span class="preview-label">Deine Ausgabe</span>
-							<button id="show-expected-btn" class="btn btn-small">Lösung zeigen</button>
-						</div>
-						<div class="preview-wrapper">
-							<div class="preview-frame" id="preview-area">
-								<!-- Vorschau-Iframe wird hier angezeigt -->
-							</div>
-							<div class="expected-overlay" id="expected-overlay">
-								<div class="expected-frame" id="preview-expected">
-									<!-- Erwartetes Ergebnis (umschaltbar) -->
-								</div>
-							</div>
-						</div>
-					</div>
-					<div class="game-controls">
-						<button id="prev-btn" class="btn">Zurück</button>
-						<div class="level-indicator" id="level-indicator">Lektion 0/0</div>
-						<button id="next-btn" class="btn btn-primary">Weiter</button>
-					</div>
-				</div>
-			</main>
-
-			<!-- Seitenleisten-Hintergrund -->
-			<div class="sidebar-backdrop" id="sidebar-backdrop"></div>
-
-			<!-- Ausklappbare Seitenleiste -->
-			<aside class="sidebar-drawer" id="sidebar-drawer" aria-label="Navigationsmenü">
-				<div class="sidebar-header">
-					<h3>Menü</h3>
-					<button id="close-sidebar" class="close-btn" aria-label="Menü schließen">&times;</button>
-				</div>
-
-				<div class="sidebar-section">
-					<h4>Fortschritt</h4>
-					<div class="progress-display" id="progress-display">
-						<div class="progress-bar">
-							<div class="progress-fill" id="progress-fill"></div>
-						</div>
-						<span class="progress-text" id="progress-text">0% abgeschlossen</span>
-					</div>
-				</div>
-
-				<nav class="sidebar-section" aria-label="Lektionsnavigation">
-					<h4 id="lessons-heading">Lektionen</h4>
-					<div class="module-list" id="module-list" role="tree" aria-labelledby="lessons-heading">
-						<!-- Modulliste wird hier eingefügt -->
-					</div>
-				</nav>
-
-				<div class="sidebar-section">
-					<h4>Einstellungen</h4>
-					<label class="toggle-switch">
-						<input type="checkbox" id="disable-feedback-toggle" checked />
-						<span class="toggle-slider"></span>
-						<span class="toggle-label">Hinweise anzeigen</span>
-					</label>
-					<button id="reset-btn" class="btn btn-text">Fortschritt zurücksetzen</button>
-				</div>
-
-				<footer class="app-footer">
-					Open Source:
-					<a href="https://github.com/nextlevelshit/code-crispies" target="_blank">GitHub</a>
-					von <a href="https://dailysh.it" title="Michael W. Czechowski">mwc</a>
-				</footer>
-			</aside>
-
-			<!-- Hilfe-Dialog -->
-			<dialog id="help-dialog" class="dialog">
-				<div class="dialog-header">
-					<h3>Hilfe</h3>
-					<button id="help-dialog-close" class="dialog-close" aria-label="Schließen">&times;</button>
-				</div>
-				<div class="dialog-content">
-					<h4>Über Code Crispies</h4>
-					<p>Code Crispies ist eine kostenlose Open-Source-Plattform zum Erlernen von Webentwicklung durch praktische Übungen. Kein Konto erforderlich - einfach loslegen!</p>
-
-					<h4>Lernmodi</h4>
-					<ul>
-						<li><strong>CSS</strong> - Schreibe CSS-Regeln zum Stylen von Elementen</li>
-						<li><strong>Tailwind</strong> - Wende Utility-Klassen direkt im HTML an</li>
-						<li><strong>HTML</strong> - Übe semantisches Markup und native Elemente</li>
-					</ul>
-
-					<h4>Erste Schritte</h4>
-					<p>Öffne das Menü (☰), um Lektionsmodule zu durchsuchen. Jedes Modul behandelt ein Thema mit aufeinander aufbauenden Übungen.</p>
-
-					<h4>Lektionen abschließen</h4>
-					<ol>
-						<li>Lies die Aufgabenstellung auf der linken Seite</li>
-						<li>Schreibe deinen Code im Editor</li>
-						<li>Klicke auf <strong>Ausführen</strong> oder drücke <kbd>Strg+Enter</kbd></li>
-						<li>Folge den Hinweisen, um Fehler zu beheben</li>
-						<li>Klicke auf <strong>Weiter</strong>, wenn du fertig bist</li>
-					</ol>
-
-					<h4>Editor-Werkzeuge</h4>
-					<ul>
-						<li><strong>↶ Rückgängig</strong> / <strong>↷ Wiederholen</strong> - Bearbeitungsverlauf navigieren</li>
-						<li><strong>⟲ Zurücksetzen</strong> - Ursprünglichen Code wiederherstellen</li>
-						<li><strong>Lösung zeigen</strong> - Zielergebnis ein-/ausblenden</li>
-					</ul>
-
-					<h4>Tastenkürzel</h4>
-					<ul>
-						<li><kbd>Strg+Enter</kbd> - Code ausführen</li>
-						<li><kbd>Strg+Z</kbd> - Rückgängig</li>
-						<li><kbd>Strg+Umschalt+Z</kbd> - Wiederholen</li>
-					</ul>
-
-					<h4>Emmet-Kürzel (HTML-Modus)</h4>
-					<p>Tippe Abkürzungen und drücke <kbd>Tab</kbd> zum Erweitern:</p>
-					<ul>
-						<li><kbd>div.box</kbd> → div mit Klasse</li>
-						<li><kbd>ul>li*3</kbd> → ul mit 3 li-Kindern</li>
-						<li><kbd>form>input+button</kbd> → verschachtelte Struktur</li>
-						<li><kbd>p{Hallo}</kbd> → p mit Textinhalt</li>
-					</ul>
-				</div>
-			</dialog>
-
-			<!-- Zurücksetzen-Bestätigungsdialog -->
-			<dialog id="reset-dialog" class="dialog">
-				<div class="dialog-header">
-					<h3>Fortschritt zurücksetzen</h3>
-					<button id="reset-dialog-close" class="dialog-close" aria-label="Schließen">&times;</button>
-				</div>
-				<div class="dialog-content">
-					<p>Bist du sicher, dass du deinen gesamten Fortschritt zurücksetzen möchtest? Dies kann nicht rückgängig gemacht werden.</p>
-					<div class="dialog-actions">
-						<button id="cancel-reset" class="btn">Abbrechen</button>
-						<button id="confirm-reset" class="btn btn-ghost">Alles zurücksetzen</button>
-					</div>
-				</div>
-			</dialog>
-		</div>
-
-		<script type="module" src="app.de.js"></script>
-	</body>
-</html>