fix: remove placeholder comments and improve German translations

- Remove placeholder comments from initialCode fields
- Fix typo: "wichtig Wort" -> "wichtigen Wort" in de/20-html-elements.json
- Improve German validation messages for readability
- Use consistent terminology (Eingabefeld instead of Input)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

lessons/20-html-elements.json

@@ -38,7 +38,7 @@
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; margin: 0; } header { background: #1976d2; color: white; padding: 15px; } main { padding: 20px; min-height: 100px; } footer { background: #424242; color: white; padding: 10px; text-align: center; }",
 			"sandboxCSS": "",
-			"initialCode": "<!-- Create your page structure here -->",
+			"initialCode": "",
 			"solution": "<header>\n  <h1>My Website</h1>\n</header>\n<main>\n  <p>Welcome to my site!</p>\n</main>\n<footer>\n  <p>Copyright 2025</p>\n</footer>",
 			"previewContainer": "preview-area",
 			"validations": [

lessons/21-html-forms-basic.json

@@ -14,7 +14,7 @@
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 300px; } label { display: block; margin-bottom: 5px; font-weight: 500; } input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }",
 			"sandboxCSS": "",
-			"initialCode": "<!-- Create your form here -->",
+			"initialCode": "",
 			"solution": "<form>\n  <label for=\"name\">Name:</label>\n  <input type=\"text\" id=\"name\" name=\"name\">\n</form>",
 			"previewContainer": "preview-area",
 			"validations": [

lessons/23-html-details-summary.json

@@ -14,7 +14,7 @@
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } details { border: 1px solid #ddd; border-radius: 8px; padding: 15px; } summary { font-weight: 600; cursor: pointer; } summary:hover { color: #1976d2; } details p { margin-top: 15px; color: #666; }",
 			"sandboxCSS": "",
-			"initialCode": "<!-- Create your disclosure widget here -->",
+			"initialCode": "",
 			"solution": "<details>\n  <summary>Click to reveal</summary>\n  <p>This content was hidden!</p>\n</details>",
 			"previewContainer": "preview-area",
 			"validations": [
@@ -67,7 +67,7 @@
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; min-height: 100vh; background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); display: flex; flex-direction: column; justify-content: center; padding: 40px; margin: 0; box-sizing: border-box; } h1 { font-size: 2.5rem; color: #4a4a4a; text-align: center; margin: 0 0 30px 0; } details { background: white; border-radius: 12px; margin-bottom: 15px; padding: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } summary { font-size: 1.3rem; font-weight: 600; color: #5c5c5c; cursor: pointer; list-style: none; } summary::before { content: '▸ '; color: #fcb69f; } details[open] summary::before { content: '▾ '; } details p { margin: 15px 0 0 0; color: #666; line-height: 1.6; }",
 			"sandboxCSS": "",
-			"initialCode": "<!-- Create your FAQ section here -->",
+			"initialCode": "",
 			"solution": "<h1>Frequently Asked Questions</h1>\n\n<details>\n  <summary>What is HTML5?</summary>\n  <p>HTML5 is the latest version of HTML with new semantic elements and APIs.</p>\n</details>\n\n<details>\n  <summary>Do I need JavaScript?</summary>\n  <p>Many interactive features work with pure HTML5, no JavaScript required!</p>\n</details>\n\n<details>\n  <summary>Is this accessible?</summary>\n  <p>Yes! Native HTML elements have built-in keyboard and screen reader support.</p>\n</details>",
 			"previewContainer": "preview-area",
 			"validations": [

lessons/24-html-progress-meter.json

@@ -14,7 +14,7 @@
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } label { display: block; margin-bottom: 8px; font-weight: 500; } progress { width: 100%; height: 20px; border-radius: 10px; } progress::-webkit-progress-bar { background: #e0e0e0; border-radius: 10px; } progress::-webkit-progress-value { background: linear-gradient(90deg, #4caf50, #8bc34a); border-radius: 10px; } progress::-moz-progress-bar { background: linear-gradient(90deg, #4caf50, #8bc34a); border-radius: 10px; }",
 			"sandboxCSS": "",
-			"initialCode": "<!-- Create a progress bar here -->",
+			"initialCode": "",
 			"solution": "<label for=\"download\">Download:</label>\n<progress id=\"download\" value=\"70\" max=\"100\">70%</progress>",
 			"previewContainer": "preview-area",
 			"validations": [
@@ -48,7 +48,7 @@
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } p { margin-bottom: 10px; color: #666; } progress { width: 100%; height: 8px; border-radius: 4px; } progress::-webkit-progress-bar { background: #e0e0e0; border-radius: 4px; }",
 			"sandboxCSS": "",
-			"initialCode": "<!-- Create an indeterminate loading indicator -->",
+			"initialCode": "",
 			"solution": "<p>Loading...</p>\n<progress></progress>",
 			"previewContainer": "preview-area",
 			"validations": [
@@ -72,7 +72,7 @@
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } label { display: block; margin-bottom: 8px; font-weight: 500; } meter { width: 100%; height: 25px; }",
 			"sandboxCSS": "",
-			"initialCode": "<!-- Create a battery meter here -->",
+			"initialCode": "",
 			"solution": "<label for=\"battery\">Battery:</label>\n<meter id=\"battery\" value=\"0.8\" min=\"0\" max=\"1\" low=\"0.2\" high=\"0.8\" optimum=\"1\">80%</meter>",
 			"previewContainer": "preview-area",
 			"validations": [

lessons/29-html-figure.json

@@ -14,7 +14,7 @@
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: #f5f5f5; } figure { margin: 0; background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.1); max-width: 400px; } figure img { width: 100%; height: 200px; object-fit: cover; display: block; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } figcaption { padding: 15px 20px; color: #555; font-size: 0.95rem; border-top: 1px solid #eee; }",
 			"sandboxCSS": "",
-			"initialCode": "<!-- Create a figure with an image and caption -->",
+			"initialCode": "",
 			"solution": "<figure>\n  <img src=\"https://picsum.photos/400/200\" alt=\"A beautiful landscape\">\n  <figcaption>A beautiful mountain landscape at sunset.</figcaption>\n</figure>",
 			"previewContainer": "preview-area",
 			"validations": [
@@ -43,7 +43,7 @@
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: #1e1e1e; } figure { margin: 0; background: #2d2d2d; border-radius: 10px; overflow: hidden; max-width: 500px; } pre { margin: 0; padding: 20px; overflow-x: auto; } code { color: #9cdcfe; font-family: 'Fira Code', 'Consolas', monospace; font-size: 14px; line-height: 1.5; } figcaption { padding: 12px 20px; color: #888; font-size: 0.85rem; background: #252525; border-top: 1px solid #3d3d3d; }",
 			"sandboxCSS": "",
-			"initialCode": "<!-- Create a figure with a code snippet -->",
+			"initialCode": "",
 			"solution": "<figure>\n  <pre><code>function greet(name) {\n  return `Hello, ${name}!`;\n}</code></pre>\n  <figcaption>A simple greeting function in JavaScript</figcaption>\n</figure>",
 			"previewContainer": "preview-area",
 			"validations": [
@@ -77,7 +77,7 @@
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); min-height: 100vh; margin: 0; box-sizing: border-box; } figure { margin: 0; background: white; border-radius: 15px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.15); max-width: 500px; padding: 15px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } figure img { width: 100%; height: 120px; object-fit: cover; border-radius: 8px; background: linear-gradient(45deg, #ff6b6b, #feca57); } figcaption { grid-column: 1 / -1; padding: 10px 5px 5px; color: #666; font-size: 0.9rem; text-align: center; }",
 			"sandboxCSS": "",
-			"initialCode": "<!-- Create a gallery with multiple images -->",
+			"initialCode": "",
 			"solution": "<figure>\n  <img src=\"https://picsum.photos/200/120?1\" alt=\"Photo 1\">\n  <img src=\"https://picsum.photos/200/120?2\" alt=\"Photo 2\">\n  <img src=\"https://picsum.photos/200/120?3\" alt=\"Photo 3\">\n  <img src=\"https://picsum.photos/200/120?4\" alt=\"Photo 4\">\n  <figcaption>My vacation photo gallery</figcaption>\n</figure>",
 			"previewContainer": "preview-area",
 			"validations": [

lessons/30-html-tables.json

@@ -14,7 +14,7 @@
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: #f5f5f5; } table { border-collapse: collapse; width: 100%; max-width: 400px; background: white; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } caption { padding: 15px; font-weight: 600; font-size: 1.2rem; color: #333; background: #f8f9fa; } th, td { padding: 12px 20px; text-align: left; border-bottom: 1px solid #eee; } th { background: #3498db; color: white; font-weight: 500; } tr:hover { background: #f8f9fa; } tr:last-child td { border-bottom: none; }",
 			"sandboxCSS": "",
-			"initialCode": "<!-- Create a table with caption and headers -->",
+			"initialCode": "",
 			"solution": "<table>\n  <caption>Fruit Prices</caption>\n  <tr>\n    <th>Fruit</th>\n    <th>Price</th>\n  </tr>\n  <tr>\n    <td>Apple</td>\n    <td>$1.50</td>\n  </tr>\n  <tr>\n    <td>Banana</td>\n    <td>$0.75</td>\n  </tr>\n</table>",
 			"previewContainer": "preview-area",
 			"validations": [
@@ -48,7 +48,7 @@
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; margin: 0; box-sizing: border-box; } table { border-collapse: collapse; width: 100%; max-width: 450px; background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.2); } caption { padding: 20px; font-weight: 700; font-size: 1.3rem; color: white; background: transparent; text-shadow: 0 2px 4px rgba(0,0,0,0.2); caption-side: top; } thead { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } th { padding: 15px 20px; text-align: left; color: white; font-weight: 500; } tbody tr { border-bottom: 1px solid #eee; } tbody tr:hover { background: #f8f9fa; } td { padding: 15px 20px; color: #333; } tbody tr:last-child { border-bottom: none; }",
 			"sandboxCSS": "",
-			"initialCode": "<!-- Create a table with thead and tbody -->",
+			"initialCode": "",
 			"solution": "<table>\n  <caption>Monthly Sales</caption>\n  <thead>\n    <tr>\n      <th>Month</th>\n      <th>Revenue</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>January</td>\n      <td>$12,500</td>\n    </tr>\n    <tr>\n      <td>February</td>\n      <td>$14,200</td>\n    </tr>\n  </tbody>\n</table>",
 			"previewContainer": "preview-area",
 			"validations": [
@@ -87,7 +87,7 @@
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: #fafafa; } table { border-collapse: collapse; width: 100%; max-width: 400px; background: white; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } caption { padding: 15px 20px; font-weight: 600; font-size: 1.1rem; color: #333; text-align: left; background: #f8f9fa; border-bottom: 2px solid #eee; } th, td { padding: 12px 20px; text-align: left; } thead th { background: #2c3e50; color: white; } tbody td { border-bottom: 1px solid #eee; } tbody tr:hover { background: #f8f9fa; } tfoot { background: #ecf0f1; font-weight: 600; } tfoot td { border-top: 2px solid #2c3e50; color: #2c3e50; }",
 			"sandboxCSS": "",
-			"initialCode": "<!-- Create a complete table with tfoot -->",
+			"initialCode": "",
 			"solution": "<table>\n  <caption>Order Summary</caption>\n  <thead>\n    <tr>\n      <th>Item</th>\n      <th>Price</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>Widget</td>\n      <td>$25.00</td>\n    </tr>\n    <tr>\n      <td>Gadget</td>\n      <td>$35.00</td>\n    </tr>\n  </tbody>\n  <tfoot>\n    <tr>\n      <td>Total</td>\n      <td>$60.00</td>\n    </tr>\n  </tfoot>\n</table>",
 			"previewContainer": "preview-area",
 			"validations": [

lessons/31-html-marquee.json

@@ -14,7 +14,7 @@
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%); min-height: 150px; display: flex; align-items: center; } marquee { font-size: 2rem; color: #00ff00; text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00; font-family: 'Courier New', monospace; }",
 			"sandboxCSS": "",
-			"initialCode": "<!-- Create a scrolling marquee -->",
+			"initialCode": "",
 			"solution": "<marquee>Welcome to my website!</marquee>",
 			"previewContainer": "preview-area",
 			"validations": [
@@ -33,7 +33,7 @@
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%); min-height: 150px; display: flex; align-items: center; } marquee { font-size: 2.5rem; color: white; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); font-weight: bold; }",
 			"sandboxCSS": "",
-			"initialCode": "<!-- Create a bouncing marquee -->",
+			"initialCode": "",
 			"solution": "<marquee behavior=\"alternate\">Bounce! Bounce! Bounce!</marquee>",
 			"previewContainer": "preview-area",
 			"validations": [
@@ -57,7 +57,7 @@
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 0; margin: 0; background: #1a1a2e; } marquee { background: linear-gradient(90deg, #c0392b 0%, #e74c3c 50%, #c0392b 100%); padding: 15px 0; font-size: 1.3rem; color: white; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; border-top: 3px solid #f1c40f; border-bottom: 3px solid #f1c40f; }",
 			"sandboxCSS": "",
-			"initialCode": "<!-- Create a retro news ticker -->",
+			"initialCode": "",
 			"solution": "<marquee direction=\"left\" scrollamount=\"5\">BREAKING NEWS: Marquee element still works in browsers!</marquee>",
 			"previewContainer": "preview-area",
 			"validations": [

lessons/32-html-svg.json

@@ -14,7 +14,7 @@
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: #f5f5f5; display: flex; justify-content: center; } svg { background: white; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }",
 			"sandboxCSS": "",
-			"initialCode": "<!-- Draw a circle with SVG -->",
+			"initialCode": "",
 			"solution": "<svg width=\"200\" height=\"200\">\n  <circle cx=\"100\" cy=\"100\" r=\"50\" fill=\"#3498db\" />\n</svg>",
 			"previewContainer": "preview-area",
 			"validations": [
@@ -48,7 +48,7 @@
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 200px; display: flex; justify-content: center; align-items: center; } svg { background: white; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }",
 			"sandboxCSS": "",
-			"initialCode": "<!-- Draw a rectangle and a line -->",
+			"initialCode": "",
 			"solution": "<svg width=\"200\" height=\"150\">\n  <rect x=\"20\" y=\"20\" width=\"80\" height=\"60\" fill=\"#e74c3c\" />\n  <line x1=\"120\" y1=\"30\" x2=\"180\" y2=\"90\" stroke=\"#2c3e50\" stroke-width=\"3\" />\n</svg>",
 			"previewContainer": "preview-area",
 			"validations": [
@@ -77,7 +77,7 @@
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); min-height: 250px; display: flex; justify-content: center; align-items: center; } svg { background: white; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); }",
 			"sandboxCSS": "",
-			"initialCode": "<!-- Draw a simple smiley face -->",
+			"initialCode": "",
 			"solution": "<svg width=\"200\" height=\"200\">\n  <circle cx=\"100\" cy=\"100\" r=\"80\" fill=\"#f1c40f\" stroke=\"#e67e22\" stroke-width=\"4\" />\n  <circle cx=\"70\" cy=\"80\" r=\"10\" fill=\"#2c3e50\" />\n  <circle cx=\"130\" cy=\"80\" r=\"10\" fill=\"#2c3e50\" />\n  <line x1=\"60\" y1=\"130\" x2=\"140\" y2=\"130\" stroke=\"#2c3e50\" stroke-width=\"4\" stroke-linecap=\"round\" />\n</svg>",
 			"previewContainer": "preview-area",
 			"validations": [

lessons/de/20-html-elements.json

@@ -10,12 +10,12 @@
 			"id": "block-vs-inline-intro",
 			"title": "Block- vs Inline-Elemente",
 			"description": "HTML-Elemente fallen in zwei Hauptkategorien:<br><br><strong>Block-Elemente</strong> (Container) beginnen in einer neuen Zeile und nehmen die volle Breite ein. Beispiele: <kbd>&lt;div&gt;</kbd>, <kbd>&lt;p&gt;</kbd>, <kbd>&lt;h1&gt;</kbd>, <kbd>&lt;section&gt;</kbd><br><br><strong>Inline-Elemente</strong> fließen innerhalb des Textes und nehmen nur die benötigte Breite ein. Beispiele: <kbd>&lt;span&gt;</kbd>, <kbd>&lt;a&gt;</kbd>, <kbd>&lt;strong&gt;</kbd>, <kbd>&lt;em&gt;</kbd>",
-			"task": "Umschließe das Wort <kbd>wichtig</kbd> mit <kbd>&lt;strong&gt;</kbd>-Tags, um es fett zu machen. Beachte, wie der Absatz (Block) die volle Breite einnimmt, während strong (Inline) mit dem Text fließt.",
+			"task": "Umschließe das Wort <kbd>wichtigen</kbd> mit <kbd>&lt;strong&gt;</kbd>-Tags, um es fett zu machen. Beachte, wie der Absatz (Block) die volle Breite einnimmt, während strong (Inline) mit dem Text fließt.",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; } p { background: #e3f2fd; padding: 10px; } strong { background: #ffecb3; }",
 			"sandboxCSS": "",
-			"initialCode": "<p>Dies ist ein Absatz mit einem wichtig Wort.</p>",
+			"initialCode": "<p>Dies ist ein Absatz mit einem wichtigen Wort.</p>",
-			"solution": "<p>Dies ist ein Absatz mit einem <strong>wichtig</strong> Wort.</p>",
+			"solution": "<p>Dies ist ein Absatz mit einem <strong>wichtigen</strong> Wort.</p>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
@@ -26,7 +26,7 @@
 				{
 					"type": "parent_child",
 					"value": { "parent": "p", "child": "strong" },
-					"message": "Umschließe das Wort 'wichtig' mit <strong>-Tags"
+					"message": "Umschließe das Wort 'wichtigen' mit <strong>-Tags"
 				}
 			]
 		},
@@ -38,7 +38,7 @@
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; margin: 0; } header { background: #1976d2; color: white; padding: 15px; } main { padding: 20px; min-height: 100px; } footer { background: #424242; color: white; padding: 10px; text-align: center; }",
 			"sandboxCSS": "",
-			"initialCode": "<!-- Erstelle hier deine Seitenstruktur -->",
+			"initialCode": "",
 			"solution": "<header>\n  <h1>Meine Webseite</h1>\n</header>\n<main>\n  <p>Willkommen auf meiner Seite!</p>\n</main>\n<footer>\n  <p>Copyright 2025</p>\n</footer>",
 			"previewContainer": "preview-area",
 			"validations": [

lessons/de/21-html-forms-basic.json

@@ -14,7 +14,7 @@
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 300px; } label { display: block; margin-bottom: 5px; font-weight: 500; } input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }",
 			"sandboxCSS": "",
-			"initialCode": "<!-- Erstelle hier dein Formular -->",
+			"initialCode": "",
 			"solution": "<form>\n  <label for=\"name\">Name:</label>\n  <input type=\"text\" id=\"name\" name=\"name\">\n</form>",
 			"previewContainer": "preview-area",
 			"validations": [

lessons/de/22-html-forms-validation.json

@@ -21,12 +21,12 @@
 				{
 					"type": "attribute_value",
 					"value": { "selector": "input[name='name']", "attr": "required", "value": true },
-					"message": "Füge das 'required'-Attribut zur Name-Eingabe hinzu"
+					"message": "Füge required zum Namensfeld hinzu"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "input[name='email']", "attr": "required", "value": true },
-					"message": "Füge das 'required'-Attribut zur E-Mail-Eingabe hinzu"
+					"message": "Füge required zum E-Mail-Feld hinzu"
 				}
 			]
 		},
@@ -45,12 +45,12 @@
 				{
 					"type": "attribute_value",
 					"value": { "selector": "input[type='password']", "attr": "minlength", "value": "8" },
-					"message": "Füge minlength=\"8\" zur Passwort-Eingabe hinzu"
+					"message": "Füge minlength=\"8\" zum Passwort hinzu"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "input[type='password']", "attr": "maxlength", "value": "20" },
-					"message": "Füge maxlength=\"20\" zur Passwort-Eingabe hinzu"
+					"message": "Füge maxlength=\"20\" zum Passwort hinzu"
 				},
 				{
 					"type": "attribute_value",

lessons/de/23-html-details-summary.json

@@ -14,7 +14,7 @@
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } details { border: 1px solid #ddd; border-radius: 8px; padding: 15px; } summary { font-weight: 600; cursor: pointer; } summary:hover { color: #1976d2; } details p { margin-top: 15px; color: #666; }",
 			"sandboxCSS": "",
-			"initialCode": "<!-- Erstelle hier dein Aufklapp-Element -->",
+			"initialCode": "",
 			"solution": "<details>\n  <summary>Klicken zum Aufklappen</summary>\n  <p>Dieser Inhalt war versteckt!</p>\n</details>",
 			"previewContainer": "preview-area",
 			"validations": [
@@ -67,7 +67,7 @@
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; min-height: 100vh; background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); display: flex; flex-direction: column; justify-content: center; padding: 40px; margin: 0; box-sizing: border-box; } h1 { font-size: 2.5rem; color: #4a4a4a; text-align: center; margin: 0 0 30px 0; } details { background: white; border-radius: 12px; margin-bottom: 15px; padding: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } summary { font-size: 1.3rem; font-weight: 600; color: #5c5c5c; cursor: pointer; list-style: none; } summary::before { content: '▸ '; color: #fcb69f; } details[open] summary::before { content: '▾ '; } details p { margin: 15px 0 0 0; color: #666; line-height: 1.6; }",
 			"sandboxCSS": "",
-			"initialCode": "<!-- Erstelle hier deinen FAQ-Bereich -->",
+			"initialCode": "",
 			"solution": "<h1>Häufig gestellte Fragen</h1>\n\n<details>\n  <summary>Was ist HTML5?</summary>\n  <p>HTML5 ist die neueste Version von HTML mit neuen semantischen Elementen und APIs.</p>\n</details>\n\n<details>\n  <summary>Brauche ich JavaScript?</summary>\n  <p>Viele interaktive Funktionen funktionieren mit purem HTML5, kein JavaScript nötig!</p>\n</details>\n\n<details>\n  <summary>Ist das barrierefrei?</summary>\n  <p>Ja! Native HTML-Elemente haben eingebaute Tastatur- und Screenreader-Unterstützung.</p>\n</details>",
 			"previewContainer": "preview-area",
 			"validations": [

lessons/de/24-html-progress-meter.json

@@ -14,7 +14,7 @@
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } label { display: block; margin-bottom: 8px; font-weight: 500; } progress { width: 100%; height: 20px; border-radius: 10px; } progress::-webkit-progress-bar { background: #e0e0e0; border-radius: 10px; } progress::-webkit-progress-value { background: linear-gradient(90deg, #4caf50, #8bc34a); border-radius: 10px; } progress::-moz-progress-bar { background: linear-gradient(90deg, #4caf50, #8bc34a); border-radius: 10px; }",
 			"sandboxCSS": "",
-			"initialCode": "<!-- Erstelle hier einen Fortschrittsbalken -->",
+			"initialCode": "",
 			"solution": "<label for=\"download\">Download:</label>\n<progress id=\"download\" value=\"70\" max=\"100\">70%</progress>",
 			"previewContainer": "preview-area",
 			"validations": [
@@ -48,7 +48,7 @@
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } p { margin-bottom: 10px; color: #666; } progress { width: 100%; height: 8px; border-radius: 4px; } progress::-webkit-progress-bar { background: #e0e0e0; border-radius: 4px; }",
 			"sandboxCSS": "",
-			"initialCode": "<!-- Erstelle eine unbestimmte Ladeanzeige -->",
+			"initialCode": "",
 			"solution": "<p>Lädt...</p>\n<progress></progress>",
 			"previewContainer": "preview-area",
 			"validations": [
@@ -72,7 +72,7 @@
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } label { display: block; margin-bottom: 8px; font-weight: 500; } meter { width: 100%; height: 25px; }",
 			"sandboxCSS": "",
-			"initialCode": "<!-- Erstelle hier eine Akku-Anzeige -->",
+			"initialCode": "",
 			"solution": "<label for=\"battery\">Akku:</label>\n<meter id=\"battery\" value=\"0.8\" min=\"0\" max=\"1\" low=\"0.2\" high=\"0.8\" optimum=\"1\">80%</meter>",
 			"previewContainer": "preview-area",
 			"validations": [

lessons/de/25-html-datalist.json

@@ -26,7 +26,7 @@
 				{
 					"type": "attribute_value",
 					"value": { "selector": "input", "attr": "list", "value": "browsers" },
-					"message": "Verbinde das Input mit der Datalist über list=\"browsers\""
+					"message": "Verbinde das Eingabefeld mit der Datalist über list=\"browsers\""
 				},
 				{
 					"type": "element_count",
@@ -65,7 +65,7 @@
 				{
 					"type": "attribute_value",
 					"value": { "selector": "input", "attr": "list", "value": "countries" },
-					"message": "Verbinde das Input über list=\"countries\""
+					"message": "Verbinde das Eingabefeld über list=\"countries\""
 				},
 				{
 					"type": "element_count",

lessons/de/30-html-tables.json

@@ -14,7 +14,7 @@
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: #f5f5f5; } table { border-collapse: collapse; width: 100%; max-width: 400px; background: white; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } caption { padding: 15px; font-weight: 600; font-size: 1.2rem; color: #333; background: #f8f9fa; } th, td { padding: 12px 20px; text-align: left; border-bottom: 1px solid #eee; } th { background: #3498db; color: white; font-weight: 500; } tr:hover { background: #f8f9fa; } tr:last-child td { border-bottom: none; }",
 			"sandboxCSS": "",
-			"initialCode": "<!-- Erstelle eine Tabelle mit caption und Überschriften -->",
+			"initialCode": "",
 			"solution": "<table>\n  <caption>Obstpreise</caption>\n  <tr>\n    <th>Obst</th>\n    <th>Preis</th>\n  </tr>\n  <tr>\n    <td>Apfel</td>\n    <td>1,50 €</td>\n  </tr>\n  <tr>\n    <td>Banane</td>\n    <td>0,75 €</td>\n  </tr>\n</table>",
 			"previewContainer": "preview-area",
 			"validations": [
@@ -48,7 +48,7 @@
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; margin: 0; box-sizing: border-box; } table { border-collapse: collapse; width: 100%; max-width: 450px; background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.2); } caption { padding: 20px; font-weight: 700; font-size: 1.3rem; color: white; background: transparent; text-shadow: 0 2px 4px rgba(0,0,0,0.2); caption-side: top; } thead { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } th { padding: 15px 20px; text-align: left; color: white; font-weight: 500; } tbody tr { border-bottom: 1px solid #eee; } tbody tr:hover { background: #f8f9fa; } td { padding: 15px 20px; color: #333; } tbody tr:last-child { border-bottom: none; }",
 			"sandboxCSS": "",
-			"initialCode": "<!-- Erstelle eine Tabelle mit thead und tbody -->",
+			"initialCode": "",
 			"solution": "<table>\n  <caption>Monatliche Verkäufe</caption>\n  <thead>\n    <tr>\n      <th>Monat</th>\n      <th>Umsatz</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>Januar</td>\n      <td>12.500 €</td>\n    </tr>\n    <tr>\n      <td>Februar</td>\n      <td>14.200 €</td>\n    </tr>\n  </tbody>\n</table>",
 			"previewContainer": "preview-area",
 			"validations": [
@@ -87,7 +87,7 @@
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: #fafafa; } table { border-collapse: collapse; width: 100%; max-width: 400px; background: white; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } caption { padding: 15px 20px; font-weight: 600; font-size: 1.1rem; color: #333; text-align: left; background: #f8f9fa; border-bottom: 2px solid #eee; } th, td { padding: 12px 20px; text-align: left; } thead th { background: #2c3e50; color: white; } tbody td { border-bottom: 1px solid #eee; } tbody tr:hover { background: #f8f9fa; } tfoot { background: #ecf0f1; font-weight: 600; } tfoot td { border-top: 2px solid #2c3e50; color: #2c3e50; }",
 			"sandboxCSS": "",
-			"initialCode": "<!-- Erstelle eine vollständige Tabelle mit tfoot -->",
+			"initialCode": "",
 			"solution": "<table>\n  <caption>Bestellübersicht</caption>\n  <thead>\n    <tr>\n      <th>Artikel</th>\n      <th>Preis</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>Widget</td>\n      <td>25,00 €</td>\n    </tr>\n    <tr>\n      <td>Gadget</td>\n      <td>35,00 €</td>\n    </tr>\n  </tbody>\n  <tfoot>\n    <tr>\n      <td>Gesamt</td>\n      <td>60,00 €</td>\n    </tr>\n  </tfoot>\n</table>",
 			"previewContainer": "preview-area",
 			"validations": [

lessons/de/31-html-marquee.json

@@ -14,7 +14,7 @@
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%); min-height: 150px; display: flex; align-items: center; } marquee { font-size: 2rem; color: #00ff00; text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00; font-family: 'Courier New', monospace; }",
 			"sandboxCSS": "",
-			"initialCode": "<!-- Erstelle ein scrollendes Marquee -->",
+			"initialCode": "",
 			"solution": "<marquee>Willkommen auf meiner Website!</marquee>",
 			"previewContainer": "preview-area",
 			"validations": [
@@ -33,7 +33,7 @@
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%); min-height: 150px; display: flex; align-items: center; } marquee { font-size: 2.5rem; color: white; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); font-weight: bold; }",
 			"sandboxCSS": "",
-			"initialCode": "<!-- Erstelle ein springendes Marquee -->",
+			"initialCode": "",
 			"solution": "<marquee behavior=\"alternate\">Hüpf! Hüpf! Hüpf!</marquee>",
 			"previewContainer": "preview-area",
 			"validations": [
@@ -57,7 +57,7 @@
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 0; margin: 0; background: #1a1a2e; } marquee { background: linear-gradient(90deg, #c0392b 0%, #e74c3c 50%, #c0392b 100%); padding: 15px 0; font-size: 1.3rem; color: white; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; border-top: 3px solid #f1c40f; border-bottom: 3px solid #f1c40f; }",
 			"sandboxCSS": "",
-			"initialCode": "<!-- Erstelle einen Retro-Nachrichtenticker -->",
+			"initialCode": "",
 			"solution": "<marquee direction=\"left\" scrollamount=\"5\">EILMELDUNG: Das Marquee-Element funktioniert noch in Browsern!</marquee>",
 			"previewContainer": "preview-area",
 			"validations": [

lessons/de/32-html-svg.json

@@ -14,7 +14,7 @@
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: #f5f5f5; display: flex; justify-content: center; } svg { background: white; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }",
 			"sandboxCSS": "",
-			"initialCode": "<!-- Zeichne einen Kreis mit SVG -->",
+			"initialCode": "",
 			"solution": "<svg width=\"200\" height=\"200\">\n  <circle cx=\"100\" cy=\"100\" r=\"50\" fill=\"#3498db\" />\n</svg>",
 			"previewContainer": "preview-area",
 			"validations": [
@@ -48,7 +48,7 @@
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 200px; display: flex; justify-content: center; align-items: center; } svg { background: white; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }",
 			"sandboxCSS": "",
-			"initialCode": "<!-- Zeichne ein Rechteck und eine Linie -->",
+			"initialCode": "",
 			"solution": "<svg width=\"200\" height=\"150\">\n  <rect x=\"20\" y=\"20\" width=\"80\" height=\"60\" fill=\"#e74c3c\" />\n  <line x1=\"120\" y1=\"30\" x2=\"180\" y2=\"90\" stroke=\"#2c3e50\" stroke-width=\"3\" />\n</svg>",
 			"previewContainer": "preview-area",
 			"validations": [
@@ -77,7 +77,7 @@
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); min-height: 250px; display: flex; justify-content: center; align-items: center; } svg { background: white; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); }",
 			"sandboxCSS": "",
-			"initialCode": "<!-- Zeichne ein einfaches Smiley-Gesicht -->",
+			"initialCode": "",
 			"solution": "<svg width=\"200\" height=\"200\">\n  <circle cx=\"100\" cy=\"100\" r=\"80\" fill=\"#f1c40f\" stroke=\"#e67e22\" stroke-width=\"4\" />\n  <circle cx=\"70\" cy=\"80\" r=\"10\" fill=\"#2c3e50\" />\n  <circle cx=\"130\" cy=\"80\" r=\"10\" fill=\"#2c3e50\" />\n  <line x1=\"60\" y1=\"130\" x2=\"140\" y2=\"130\" stroke=\"#2c3e50\" stroke-width=\"4\" stroke-linecap=\"round\" />\n</svg>",
 			"previewContainer": "preview-area",
 			"validations": [