fix: remove kbd tags from actual HTML code in lessons

- Remove erroneous kbd tags from solution/initialCode fields
- Keep kbd tags only in messages/descriptions where appropriate

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

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

lessons/21-html-forms-basic.json

@@ -48,24 +48,24 @@
 		{
 			"id": "input-types",
 			"title": "Input Types",
-			"description": "Different input types provide appropriate keyboards and validation:<br><br><kbd>type=\"text\"</kbd> - General text<br><kbd>type=<kbd>\"email\"</kbd></kbd> - Email with @ validation<br><kbd>type=<kbd>\"password\"</kbd></kbd> - Hidden characters<br><kbd>type=\"number\"</kbd> - Numeric keyboard<br><kbd>type=\"tel\"</kbd> - Phone keyboard",
+			"description": "Different input types provide appropriate keyboards and validation:<br><br><kbd>type=\"text\"</kbd> - General text<br><kbd>type=\"email\"</kbd> - Email with @ validation<br><kbd>type=\"password\"</kbd> - Hidden characters<br><kbd>type=\"number\"</kbd> - Numeric keyboard<br><kbd>type=\"tel\"</kbd> - Phone keyboard",
-			"task": "Create a login form with two fields:<br>1. An email field: <kbd>&lt;label for=\"email\"&gt;Email:&lt;/label&gt;</kbd> and <kbd>&lt;input type=<kbd>\"email\"</kbd> id=\"email\"&gt;</kbd><br>2. A password field: <kbd>&lt;label for=\"password\"&gt;Password:&lt;/label&gt;</kbd> and <kbd>&lt;input type=<kbd>\"password\"</kbd> id=\"password\"&gt;</kbd>",
+			"task": "Create a login form with two fields:<br>1. An email field: <kbd>&lt;label for=\"email\"&gt;Email:&lt;/label&gt;</kbd> and <kbd>&lt;input type=\"email\" id=\"email\"&gt;</kbd><br>2. A password field: <kbd>&lt;label for=\"password\"&gt;Password:&lt;/label&gt;</kbd> and <kbd>&lt;input type=\"password\" id=\"password\"&gt;</kbd>",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 300px; } label { display: block; margin-top: 15px; margin-bottom: 5px; } label:first-child { margin-top: 0; } input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }",
 			"sandboxCSS": "",
 			"initialCode": "<form>\n  <!-- Add email and password inputs -->\n</form>",
-			"solution": "<form>\n  <label for=\"email\">Email:</label>\n  <input type=<kbd>\"email\"</kbd> id=\"email\" name=\"email\">\n  \n  <label for=\"password\">Password:</label>\n  <input type=<kbd>\"password\"</kbd> id=\"password\" name=\"password\">\n</form>",
+			"solution": "<form>\n  <label for=\"email\">Email:</label>\n  <input type=\"email\" id=\"email\" name=\"email\">\n  \n  <label for=\"password\">Password:</label>\n  <input type=\"password\" id=\"password\" name=\"password\">\n</form>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "element_exists",
 					"value": "input[type='email']",
-					"message": "Add an input with type=<kbd>\"email\"</kbd>"
+					"message": "Add an input with type=\"email\""
 				},
 				{
 					"type": "element_exists",
 					"value": "input[type='password']",
-					"message": "Add an input with type=<kbd>\"password\"</kbd>"
+					"message": "Add an input with type=\"password\""
 				},
 				{
 					"type": "element_count",
@@ -82,8 +82,8 @@
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 300px; } label { display: block; margin-top: 15px; margin-bottom: 5px; } label:first-child { margin-top: 0; } input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } button { width: 100%; margin-top: 20px; padding: 10px; background: #1976d2; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; } button:hover { background: #1565c0; }",
 			"sandboxCSS": "",
-			"initialCode": "<form>\n  <label for=\"email\">Email:</label>\n  <input type=<kbd>\"email\"</kbd> id=\"email\">\n  \n  <label for=\"password\">Password:</label>\n  <input type=<kbd>\"password\"</kbd> id=\"password\">\n  \n  <!-- Add submit button -->\n</form>",
+			"initialCode": "<form>\n  <label for=\"email\">Email:</label>\n  <input type=\"email\" id=\"email\">\n  \n  <label for=\"password\">Password:</label>\n  <input type=\"password\" id=\"password\">\n  \n  <!-- Add submit button -->\n</form>",
-			"solution": "<form>\n  <label for=\"email\">Email:</label>\n  <input type=<kbd>\"email\"</kbd> id=\"email\">\n  \n  <label for=\"password\">Password:</label>\n  <input type=<kbd>\"password\"</kbd> id=\"password\">\n  \n  <button type=\"submit\">Sign In</button>\n</form>",
+			"solution": "<form>\n  <label for=\"email\">Email:</label>\n  <input type=\"email\" id=\"email\">\n  \n  <label for=\"password\">Password:</label>\n  <input type=\"password\" id=\"password\">\n  \n  <button type=\"submit\">Sign In</button>\n</form>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{

lessons/22-html-forms-validation.json

@@ -14,8 +14,8 @@
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 350px; } label { display: block; margin-top: 15px; margin-bottom: 5px; } label:first-of-type { margin-top: 0; } input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } input:invalid { border-color: #d32f2f; } button { margin-top: 20px; padding: 10px 20px; background: #1976d2; color: white; border: none; border-radius: 4px; cursor: pointer; }",
 			"sandboxCSS": "",
-			"initialCode": "<form>\n  <label for=\"name\">Name: *</label>\n  <input type=\"text\" id=\"name\" name=\"name\">\n  \n  <label for=\"email\">Email: *</label>\n  <input type=<kbd>\"email\"</kbd> id=\"email\" name=\"email\">\n  \n  <button type=\"submit\">Submit</button>\n</form>",
+			"initialCode": "<form>\n  <label for=\"name\">Name: *</label>\n  <input type=\"text\" id=\"name\" name=\"name\">\n  \n  <label for=\"email\">Email: *</label>\n  <input type=\"email\" id=\"email\" name=\"email\">\n  \n  <button type=\"submit\">Submit</button>\n</form>",
-			"solution": "<form>\n  <label for=\"name\">Name: *</label>\n  <input type=\"text\" id=\"name\" name=\"name\" required>\n  \n  <label for=\"email\">Email: *</label>\n  <input type=<kbd>\"email\"</kbd> id=\"email\" name=\"email\" required>\n  \n  <button type=\"submit\">Submit</button>\n</form>",
+			"solution": "<form>\n  <label for=\"name\">Name: *</label>\n  <input type=\"text\" id=\"name\" name=\"name\" required>\n  \n  <label for=\"email\">Email: *</label>\n  <input type=\"email\" id=\"email\" name=\"email\" required>\n  \n  <button type=\"submit\">Submit</button>\n</form>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
@@ -38,8 +38,8 @@
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 350px; } label { display: block; margin-bottom: 5px; } input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } input:invalid:not(:placeholder-shown) { border-color: #d32f2f; } small { display: block; font-size: 12px; color: #666; margin-top: 4px; } button { margin-top: 20px; padding: 10px 20px; background: #1976d2; color: white; border: none; border-radius: 4px; cursor: pointer; }",
 			"sandboxCSS": "",
-			"initialCode": "<form>\n  <label for=\"password\">Password:</label>\n  <input type=<kbd>\"password\"</kbd> id=\"password\" name=\"password\" required aria-describedby=\"password-hint\">\n  <small id=\"password-hint\">Must be 8-20 characters</small>\n  \n  <button type=\"submit\">Create Account</button>\n</form>",
+			"initialCode": "<form>\n  <label for=\"password\">Password:</label>\n  <input type=\"password\" id=\"password\" name=\"password\" required aria-describedby=\"password-hint\">\n  <small id=\"password-hint\">Must be 8-20 characters</small>\n  \n  <button type=\"submit\">Create Account</button>\n</form>",
-			"solution": "<form>\n  <label for=\"password\">Password:</label>\n  <input type=<kbd>\"password\"</kbd> id=\"password\" name=\"password\" required minlength=\"8\" maxlength=\"20\" placeholder=\"Enter password\" aria-describedby=\"password-hint\">\n  <small id=\"password-hint\">Must be 8-20 characters</small>\n  \n  <button type=\"submit\">Create Account</button>\n</form>",
+			"solution": "<form>\n  <label for=\"password\">Password:</label>\n  <input type=\"password\" id=\"password\" name=\"password\" required minlength=\"8\" maxlength=\"20\" placeholder=\"Enter password\" aria-describedby=\"password-hint\">\n  <small id=\"password-hint\">Must be 8-20 characters</small>\n  \n  <button type=\"submit\">Create Account</button>\n</form>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
@@ -62,13 +62,13 @@
 		{
 			"id": "complete-registration",
 			"title": "Complete Registration Form",
-			"description": "Build a complete registration form with all validation concepts:<br><br>- Required fields marked with *<br>- Email validation (use type=<kbd>\"email\"</kbd>)<br>- Password with length constraints<br>- Terms checkbox (required)<br>- Submit button",
+			"description": "Build a complete registration form with all validation concepts:<br><br>- Required fields marked with *<br>- Email validation (use type=\"email\")<br>- Password with length constraints<br>- Terms checkbox (required)<br>- Submit button",
 			"task": "Complete the registration form. Add required attributes, proper input types, and validation constraints.",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 400px; background: #f5f5f5; padding: 25px; border-radius: 8px; } h2 { margin-top: 0; margin-bottom: 20px; } label { display: block; margin-top: 15px; margin-bottom: 5px; font-weight: 500; } input[type='text'], input[type='email'], input[type='password'] { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; font-size: 14px; } input:focus { outline: 2px solid #1976d2; border-color: transparent; } input[type='checkbox'] { width: auto; margin-right: 8px; vertical-align: middle; } label:has(input[type='checkbox']) { display: flex; align-items: center; font-weight: normal; } button { width: 100%; margin-top: 20px; padding: 12px; background: #1976d2; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; font-weight: 500; } button:hover { background: #1565c0; }",
 			"sandboxCSS": "",
 			"initialCode": "<form>\n  <h2>Create Account</h2>\n  \n  <label for=\"fullname\">Full Name *</label>\n  <input type=\"text\" id=\"fullname\" name=\"fullname\">\n  \n  <label for=\"email\">Email *</label>\n  <input id=\"email\" name=\"email\">\n  \n  <label for=\"password\">Password *</label>\n  <input id=\"password\" name=\"password\">\n  \n  <label>\n    <input type=\"checkbox\" id=\"terms\" name=\"terms\">\n    I agree to the Terms of Service *\n  </label>\n  \n  <button type=\"submit\">Register</button>\n</form>",
-			"solution": "<form>\n  <h2>Create Account</h2>\n  \n  <label for=\"fullname\">Full Name *</label>\n  <input type=\"text\" id=\"fullname\" name=\"fullname\" required>\n  \n  <label for=\"email\">Email *</label>\n  <input type=<kbd>\"email\"</kbd> id=\"email\" name=\"email\" required>\n  \n  <label for=\"password\">Password *</label>\n  <input type=<kbd>\"password\"</kbd> id=\"password\" name=\"password\" required minlength=\"8\">\n  \n  <label>\n    <input type=\"checkbox\" id=\"terms\" name=\"terms\" required>\n    I agree to the Terms of Service *\n  </label>\n  \n  <button type=\"submit\">Register</button>\n</form>",
+			"solution": "<form>\n  <h2>Create Account</h2>\n  \n  <label for=\"fullname\">Full Name *</label>\n  <input type=\"text\" id=\"fullname\" name=\"fullname\" required>\n  \n  <label for=\"email\">Email *</label>\n  <input type=\"email\" id=\"email\" name=\"email\" required>\n  \n  <label for=\"password\">Password *</label>\n  <input type=\"password\" id=\"password\" name=\"password\" required minlength=\"8\">\n  \n  <label>\n    <input type=\"checkbox\" id=\"terms\" name=\"terms\" required>\n    I agree to the Terms of Service *\n  </label>\n  \n  <button type=\"submit\">Register</button>\n</form>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{

lessons/28-html-forms-fieldset.json

@@ -15,7 +15,7 @@
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: #f0f4f8; } form { max-width: 400px; } fieldset { border: 2px solid #3498db; border-radius: 10px; padding: 20px; background: white; } legend { color: #3498db; font-weight: 600; padding: 0 10px; font-size: 1.1rem; } label { display: block; margin: 15px 0 5px; color: #333; font-weight: 500; } input { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 16px; box-sizing: border-box; } input:focus { outline: 2px solid #3498db; border-color: transparent; }",
 			"sandboxCSS": "",
 			"initialCode": "<!-- Create a form with a fieldset group -->",
-			"solution": "<form>\n  <fieldset>\n    <legend>Personal Info</legend>\n    <label for=\"name\">Name:</label>\n    <input type=\"text\" id=\"name\" name=\"name\">\n    <label for=\"email\">Email:</label>\n    <input type=<kbd>\"email\"</kbd> id=\"email\" name=\"email\">\n  </fieldset>\n</form>",
+			"solution": "<form>\n  <fieldset>\n    <legend>Personal Info</legend>\n    <label for=\"name\">Name:</label>\n    <input type=\"text\" id=\"name\" name=\"name\">\n    <label for=\"email\">Email:</label>\n    <input type=\"email\" id=\"email\" name=\"email\">\n  </fieldset>\n</form>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
@@ -54,7 +54,7 @@
 			"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; } form { max-width: 450px; margin: 0 auto; } fieldset { border: none; border-radius: 15px; padding: 30px; background: white; box-shadow: 0 10px 40px rgba(0,0,0,0.2); } legend { color: #667eea; font-weight: 700; padding: 0; font-size: 1.5rem; margin-bottom: 10px; } label { display: block; margin: 20px 0 8px; color: #333; font-weight: 500; } input, textarea { width: 100%; padding: 12px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 16px; box-sizing: border-box; font-family: inherit; } input:focus, textarea:focus { outline: none; border-color: #667eea; } textarea { resize: vertical; min-height: 100px; } button { margin-top: 20px; width: 100%; padding: 14px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; } button:hover { opacity: 0.9; }",
 			"sandboxCSS": "",
 			"initialCode": "<!-- Create a contact form with textarea -->",
-			"solution": "<form>\n  <fieldset>\n    <legend>Contact Us</legend>\n    <label for=\"email\">Email:</label>\n    <input type=<kbd>\"email\"</kbd> id=\"email\" name=\"email\">\n    <label for=\"message\">Message:</label>\n    <textarea id=\"message\" name=\"message\" rows=\"4\"></textarea>\n    <button type=\"submit\">Send Message</button>\n  </fieldset>\n</form>",
+			"solution": "<form>\n  <fieldset>\n    <legend>Contact Us</legend>\n    <label for=\"email\">Email:</label>\n    <input type=\"email\" id=\"email\" name=\"email\">\n    <label for=\"message\">Message:</label>\n    <textarea id=\"message\" name=\"message\" rows=\"4\"></textarea>\n    <button type=\"submit\">Send Message</button>\n  </fieldset>\n</form>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
@@ -93,7 +93,7 @@
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: #fafafa; } form { max-width: 500px; } fieldset { border: 1px solid #ddd; border-radius: 10px; padding: 20px; margin-bottom: 20px; background: white; } legend { color: #2c3e50; font-weight: 600; padding: 0 10px; } label { display: block; margin: 15px 0 5px; color: #555; } input, textarea { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 16px; box-sizing: border-box; font-family: inherit; } input:focus, textarea:focus { outline: 2px solid #3498db; border-color: transparent; } textarea { resize: vertical; min-height: 80px; } button { width: 100%; padding: 14px; background: #2c3e50; color: white; border: none; border-radius: 8px; font-size: 16px; cursor: pointer; } button:hover { background: #34495e; }",
 			"sandboxCSS": "",
 			"initialCode": "<!-- Create a form with multiple fieldsets -->",
-			"solution": "<form>\n  <fieldset>\n    <legend>Account Info</legend>\n    <label for=\"username\">Username:</label>\n    <input type=\"text\" id=\"username\" name=\"username\">\n    <label for=\"password\">Password:</label>\n    <input type=<kbd>\"password\"</kbd> id=\"password\" name=\"password\">\n  </fieldset>\n  <fieldset>\n    <legend>Preferences</legend>\n    <label for=\"bio\">Bio:</label>\n    <textarea id=\"bio\" name=\"bio\"></textarea>\n  </fieldset>\n  <button type=\"submit\">Register</button>\n</form>",
+			"solution": "<form>\n  <fieldset>\n    <legend>Account Info</legend>\n    <label for=\"username\">Username:</label>\n    <input type=\"text\" id=\"username\" name=\"username\">\n    <label for=\"password\">Password:</label>\n    <input type=\"password\" id=\"password\" name=\"password\">\n  </fieldset>\n  <fieldset>\n    <legend>Preferences</legend>\n    <label for=\"bio\">Bio:</label>\n    <textarea id=\"bio\" name=\"bio\"></textarea>\n  </fieldset>\n  <button type=\"submit\">Register</button>\n</form>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{

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

@@ -48,24 +48,24 @@
 		{
 			"id": "input-types",
 			"title": "Eingabetypen",
-			"description": "Verschiedene Eingabetypen bieten passende Tastaturen und Validierung:<br><br><kbd>type=\"text\"</kbd> - Allgemeiner Text<br><kbd>type=<kbd>\"email\"</kbd></kbd> - E-Mail mit @-Validierung<br><kbd>type=<kbd>\"password\"</kbd></kbd> - Versteckte Zeichen<br><kbd>type=\"number\"</kbd> - Numerische Tastatur<br><kbd>type=\"tel\"</kbd> - Telefon-Tastatur",
+			"description": "Verschiedene Eingabetypen bieten passende Tastaturen und Validierung:<br><br><kbd>type=\"text\"</kbd> - Allgemeiner Text<br><kbd>type=\"email\"</kbd> - E-Mail mit @-Validierung<br><kbd>type=\"password\"</kbd> - Versteckte Zeichen<br><kbd>type=\"number\"</kbd> - Numerische Tastatur<br><kbd>type=\"tel\"</kbd> - Telefon-Tastatur",
-			"task": "Erstelle ein Anmeldeformular mit zwei Feldern:<br>1. Ein E-Mail-Feld: <kbd>&lt;label for=\"email\"&gt;E-Mail:&lt;/label&gt;</kbd> und <kbd>&lt;input type=<kbd>\"email\"</kbd> id=\"email\"&gt;</kbd><br>2. Ein Passwort-Feld: <kbd>&lt;label for=\"password\"&gt;Passwort:&lt;/label&gt;</kbd> und <kbd>&lt;input type=<kbd>\"password\"</kbd> id=\"password\"&gt;</kbd>",
+			"task": "Erstelle ein Anmeldeformular mit zwei Feldern:<br>1. Ein E-Mail-Feld: <kbd>&lt;label for=\"email\"&gt;E-Mail:&lt;/label&gt;</kbd> und <kbd>&lt;input type=\"email\" id=\"email\"&gt;</kbd><br>2. Ein Passwort-Feld: <kbd>&lt;label for=\"password\"&gt;Passwort:&lt;/label&gt;</kbd> und <kbd>&lt;input type=\"password\" id=\"password\"&gt;</kbd>",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 300px; } label { display: block; margin-top: 15px; margin-bottom: 5px; } label:first-child { margin-top: 0; } input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }",
 			"sandboxCSS": "",
 			"initialCode": "<form>\n  <!-- Füge E-Mail- und Passwort-Eingaben hinzu -->\n</form>",
-			"solution": "<form>\n  <label for=\"email\">E-Mail:</label>\n  <input type=<kbd>\"email\"</kbd> id=\"email\" name=\"email\">\n  \n  <label for=\"password\">Passwort:</label>\n  <input type=<kbd>\"password\"</kbd> id=\"password\" name=\"password\">\n</form>",
+			"solution": "<form>\n  <label for=\"email\">E-Mail:</label>\n  <input type=\"email\" id=\"email\" name=\"email\">\n  \n  <label for=\"password\">Passwort:</label>\n  <input type=\"password\" id=\"password\" name=\"password\">\n</form>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
 					"type": "element_exists",
 					"value": "input[type='email']",
-					"message": "Füge eine Eingabe mit type=<kbd>\"email\"</kbd> hinzu"
+					"message": "Füge eine Eingabe mit type=\"email\" hinzu"
 				},
 				{
 					"type": "element_exists",
 					"value": "input[type='password']",
-					"message": "Füge eine Eingabe mit type=<kbd>\"password\"</kbd> hinzu"
+					"message": "Füge eine Eingabe mit type=\"password\" hinzu"
 				},
 				{
 					"type": "element_count",
@@ -82,8 +82,8 @@
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 300px; } label { display: block; margin-top: 15px; margin-bottom: 5px; } label:first-child { margin-top: 0; } input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } button { width: 100%; margin-top: 20px; padding: 10px; background: #1976d2; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; } button:hover { background: #1565c0; }",
 			"sandboxCSS": "",
-			"initialCode": "<form>\n  <label for=\"email\">E-Mail:</label>\n  <input type=<kbd>\"email\"</kbd> id=\"email\">\n  \n  <label for=\"password\">Passwort:</label>\n  <input type=<kbd>\"password\"</kbd> id=\"password\">\n  \n  <!-- Füge Absende-Button hinzu -->\n</form>",
+			"initialCode": "<form>\n  <label for=\"email\">E-Mail:</label>\n  <input type=\"email\" id=\"email\">\n  \n  <label for=\"password\">Passwort:</label>\n  <input type=\"password\" id=\"password\">\n  \n  <!-- Füge Absende-Button hinzu -->\n</form>",
-			"solution": "<form>\n  <label for=\"email\">E-Mail:</label>\n  <input type=<kbd>\"email\"</kbd> id=\"email\">\n  \n  <label for=\"password\">Passwort:</label>\n  <input type=<kbd>\"password\"</kbd> id=\"password\">\n  \n  <button type=\"submit\">Anmelden</button>\n</form>",
+			"solution": "<form>\n  <label for=\"email\">E-Mail:</label>\n  <input type=\"email\" id=\"email\">\n  \n  <label for=\"password\">Passwort:</label>\n  <input type=\"password\" id=\"password\">\n  \n  <button type=\"submit\">Anmelden</button>\n</form>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{

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

@@ -14,8 +14,8 @@
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 350px; } label { display: block; margin-top: 15px; margin-bottom: 5px; } label:first-of-type { margin-top: 0; } input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } input:invalid { border-color: #d32f2f; } button { margin-top: 20px; padding: 10px 20px; background: #1976d2; color: white; border: none; border-radius: 4px; cursor: pointer; }",
 			"sandboxCSS": "",
-			"initialCode": "<form>\n  <label for=\"name\">Name: *</label>\n  <input type=\"text\" id=\"name\" name=\"name\">\n  \n  <label for=\"email\">E-Mail: *</label>\n  <input type=<kbd>\"email\"</kbd> id=\"email\" name=\"email\">\n  \n  <button type=\"submit\">Absenden</button>\n</form>",
+			"initialCode": "<form>\n  <label for=\"name\">Name: *</label>\n  <input type=\"text\" id=\"name\" name=\"name\">\n  \n  <label for=\"email\">E-Mail: *</label>\n  <input type=\"email\" id=\"email\" name=\"email\">\n  \n  <button type=\"submit\">Absenden</button>\n</form>",
-			"solution": "<form>\n  <label for=\"name\">Name: *</label>\n  <input type=\"text\" id=\"name\" name=\"name\" required>\n  \n  <label for=\"email\">E-Mail: *</label>\n  <input type=<kbd>\"email\"</kbd> id=\"email\" name=\"email\" required>\n  \n  <button type=\"submit\">Absenden</button>\n</form>",
+			"solution": "<form>\n  <label for=\"name\">Name: *</label>\n  <input type=\"text\" id=\"name\" name=\"name\" required>\n  \n  <label for=\"email\">E-Mail: *</label>\n  <input type=\"email\" id=\"email\" name=\"email\" required>\n  \n  <button type=\"submit\">Absenden</button>\n</form>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
@@ -38,8 +38,8 @@
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 350px; } label { display: block; margin-bottom: 5px; } input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } input:invalid:not(:placeholder-shown) { border-color: #d32f2f; } small { display: block; font-size: 12px; color: #666; margin-top: 4px; } button { margin-top: 20px; padding: 10px 20px; background: #1976d2; color: white; border: none; border-radius: 4px; cursor: pointer; }",
 			"sandboxCSS": "",
-			"initialCode": "<form>\n  <label for=\"password\">Passwort:</label>\n  <input type=<kbd>\"password\"</kbd> id=\"password\" name=\"password\" required aria-describedby=\"password-hint\">\n  <small id=\"password-hint\">Muss 8-20 Zeichen lang sein</small>\n  \n  <button type=\"submit\">Konto erstellen</button>\n</form>",
+			"initialCode": "<form>\n  <label for=\"password\">Passwort:</label>\n  <input type=\"password\" id=\"password\" name=\"password\" required aria-describedby=\"password-hint\">\n  <small id=\"password-hint\">Muss 8-20 Zeichen lang sein</small>\n  \n  <button type=\"submit\">Konto erstellen</button>\n</form>",
-			"solution": "<form>\n  <label for=\"password\">Passwort:</label>\n  <input type=<kbd>\"password\"</kbd> id=\"password\" name=\"password\" required minlength=\"8\" maxlength=\"20\" placeholder=\"Passwort eingeben\" aria-describedby=\"password-hint\">\n  <small id=\"password-hint\">Muss 8-20 Zeichen lang sein</small>\n  \n  <button type=\"submit\">Konto erstellen</button>\n</form>",
+			"solution": "<form>\n  <label for=\"password\">Passwort:</label>\n  <input type=\"password\" id=\"password\" name=\"password\" required minlength=\"8\" maxlength=\"20\" placeholder=\"Passwort eingeben\" aria-describedby=\"password-hint\">\n  <small id=\"password-hint\">Muss 8-20 Zeichen lang sein</small>\n  \n  <button type=\"submit\">Konto erstellen</button>\n</form>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
@@ -62,13 +62,13 @@
 		{
 			"id": "complete-registration",
 			"title": "Vollständiges Registrierungsformular",
-			"description": "Erstelle ein vollständiges Registrierungsformular mit allen Validierungskonzepten:<br><br>- Pflichtfelder mit * markiert<br>- E-Mail-Validierung (type=<kbd>\"email\"</kbd> verwenden)<br>- Passwort mit Längenbeschränkungen<br>- AGB-Checkbox (Pflichtfeld)<br>- Absende-Button",
+			"description": "Erstelle ein vollständiges Registrierungsformular mit allen Validierungskonzepten:<br><br>- Pflichtfelder mit * markiert<br>- E-Mail-Validierung (type=\"email\" verwenden)<br>- Passwort mit Längenbeschränkungen<br>- AGB-Checkbox (Pflichtfeld)<br>- Absende-Button",
 			"task": "Vervollständige das Registrierungsformular. Füge <kbd>required</kbd>-Attribute, passende Eingabetypen und Validierungsbeschränkungen hinzu.",
 			"previewHTML": "",
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 400px; background: #f5f5f5; padding: 25px; border-radius: 8px; } h2 { margin-top: 0; margin-bottom: 20px; } label { display: block; margin-top: 15px; margin-bottom: 5px; font-weight: 500; } input[type='text'], input[type='email'], input[type='password'] { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; font-size: 14px; } input:focus { outline: 2px solid #1976d2; border-color: transparent; } input[type='checkbox'] { width: auto; margin-right: 8px; vertical-align: middle; } label:has(input[type='checkbox']) { display: flex; align-items: center; font-weight: normal; } button { width: 100%; margin-top: 20px; padding: 12px; background: #1976d2; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; font-weight: 500; } button:hover { background: #1565c0; }",
 			"sandboxCSS": "",
 			"initialCode": "<form>\n  <h2>Konto erstellen</h2>\n  \n  <label for=\"fullname\">Vollständiger Name *</label>\n  <input type=\"text\" id=\"fullname\" name=\"fullname\">\n  \n  <label for=\"email\">E-Mail *</label>\n  <input id=\"email\" name=\"email\">\n  \n  <label for=\"password\">Passwort *</label>\n  <input id=\"password\" name=\"password\">\n  \n  <label>\n    <input type=\"checkbox\" id=\"terms\" name=\"terms\">\n    Ich stimme den Nutzungsbedingungen zu *\n  </label>\n  \n  <button type=\"submit\">Registrieren</button>\n</form>",
-			"solution": "<form>\n  <h2>Konto erstellen</h2>\n  \n  <label for=\"fullname\">Vollständiger Name *</label>\n  <input type=\"text\" id=\"fullname\" name=\"fullname\" required>\n  \n  <label for=\"email\">E-Mail *</label>\n  <input type=<kbd>\"email\"</kbd> id=\"email\" name=\"email\" required>\n  \n  <label for=\"password\">Passwort *</label>\n  <input type=<kbd>\"password\"</kbd> id=\"password\" name=\"password\" required minlength=\"8\">\n  \n  <label>\n    <input type=\"checkbox\" id=\"terms\" name=\"terms\" required>\n    Ich stimme den Nutzungsbedingungen zu *\n  </label>\n  \n  <button type=\"submit\">Registrieren</button>\n</form>",
+			"solution": "<form>\n  <h2>Konto erstellen</h2>\n  \n  <label for=\"fullname\">Vollständiger Name *</label>\n  <input type=\"text\" id=\"fullname\" name=\"fullname\" required>\n  \n  <label for=\"email\">E-Mail *</label>\n  <input type=\"email\" id=\"email\" name=\"email\" required>\n  \n  <label for=\"password\">Passwort *</label>\n  <input type=\"password\" id=\"password\" name=\"password\" required minlength=\"8\">\n  \n  <label>\n    <input type=\"checkbox\" id=\"terms\" name=\"terms\" required>\n    Ich stimme den Nutzungsbedingungen zu *\n  </label>\n  \n  <button type=\"submit\">Registrieren</button>\n</form>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{

lessons/de/28-html-forms-fieldset.json

@@ -15,7 +15,7 @@
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: #f0f4f8; } form { max-width: 400px; } fieldset { border: 2px solid #3498db; border-radius: 10px; padding: 20px; background: white; } legend { color: #3498db; font-weight: 600; padding: 0 10px; font-size: 1.1rem; } label { display: block; margin: 15px 0 5px; color: #333; font-weight: 500; } input { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 16px; box-sizing: border-box; } input:focus { outline: 2px solid #3498db; border-color: transparent; }",
 			"sandboxCSS": "",
 			"initialCode": "<!-- Erstelle ein Formular mit einer Fieldset-Gruppe -->",
-			"solution": "<form>\n  <fieldset>\n    <legend>Persönliche Daten</legend>\n    <label for=\"name\">Name:</label>\n    <input type=\"text\" id=\"name\" name=\"name\">\n    <label for=\"email\">E-Mail:</label>\n    <input type=<kbd>\"email\"</kbd> id=\"email\" name=\"email\">\n  </fieldset>\n</form>",
+			"solution": "<form>\n  <fieldset>\n    <legend>Persönliche Daten</legend>\n    <label for=\"name\">Name:</label>\n    <input type=\"text\" id=\"name\" name=\"name\">\n    <label for=\"email\">E-Mail:</label>\n    <input type=\"email\" id=\"email\" name=\"email\">\n  </fieldset>\n</form>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
@@ -54,7 +54,7 @@
 			"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; } form { max-width: 450px; margin: 0 auto; } fieldset { border: none; border-radius: 15px; padding: 30px; background: white; box-shadow: 0 10px 40px rgba(0,0,0,0.2); } legend { color: #667eea; font-weight: 700; padding: 0; font-size: 1.5rem; margin-bottom: 10px; } label { display: block; margin: 20px 0 8px; color: #333; font-weight: 500; } input, textarea { width: 100%; padding: 12px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 16px; box-sizing: border-box; font-family: inherit; } input:focus, textarea:focus { outline: none; border-color: #667eea; } textarea { resize: vertical; min-height: 100px; } button { margin-top: 20px; width: 100%; padding: 14px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; } button:hover { opacity: 0.9; }",
 			"sandboxCSS": "",
 			"initialCode": "<!-- Erstelle ein Kontaktformular mit Textarea -->",
-			"solution": "<form>\n  <fieldset>\n    <legend>Kontaktiere uns</legend>\n    <label for=\"email\">E-Mail:</label>\n    <input type=<kbd>\"email\"</kbd> id=\"email\" name=\"email\">\n    <label for=\"message\">Nachricht:</label>\n    <textarea id=\"message\" name=\"message\" rows=\"4\"></textarea>\n    <button type=\"submit\">Nachricht senden</button>\n  </fieldset>\n</form>",
+			"solution": "<form>\n  <fieldset>\n    <legend>Kontaktiere uns</legend>\n    <label for=\"email\">E-Mail:</label>\n    <input type=\"email\" id=\"email\" name=\"email\">\n    <label for=\"message\">Nachricht:</label>\n    <textarea id=\"message\" name=\"message\" rows=\"4\"></textarea>\n    <button type=\"submit\">Nachricht senden</button>\n  </fieldset>\n</form>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{
@@ -93,7 +93,7 @@
 			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; background: #fafafa; } form { max-width: 500px; } fieldset { border: 1px solid #ddd; border-radius: 10px; padding: 20px; margin-bottom: 20px; background: white; } legend { color: #2c3e50; font-weight: 600; padding: 0 10px; } label { display: block; margin: 15px 0 5px; color: #555; } input, textarea { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 16px; box-sizing: border-box; font-family: inherit; } input:focus, textarea:focus { outline: 2px solid #3498db; border-color: transparent; } textarea { resize: vertical; min-height: 80px; } button { width: 100%; padding: 14px; background: #2c3e50; color: white; border: none; border-radius: 8px; font-size: 16px; cursor: pointer; } button:hover { background: #34495e; }",
 			"sandboxCSS": "",
 			"initialCode": "<!-- Erstelle ein Formular mit mehreren Fieldsets -->",
-			"solution": "<form>\n  <fieldset>\n    <legend>Kontodaten</legend>\n    <label for=\"username\">Benutzername:</label>\n    <input type=\"text\" id=\"username\" name=\"username\">\n    <label for=\"password\">Passwort:</label>\n    <input type=<kbd>\"password\"</kbd> id=\"password\" name=\"password\">\n  </fieldset>\n  <fieldset>\n    <legend>Einstellungen</legend>\n    <label for=\"bio\">Bio:</label>\n    <textarea id=\"bio\" name=\"bio\"></textarea>\n  </fieldset>\n  <button type=\"submit\">Registrieren</button>\n</form>",
+			"solution": "<form>\n  <fieldset>\n    <legend>Kontodaten</legend>\n    <label for=\"username\">Benutzername:</label>\n    <input type=\"text\" id=\"username\" name=\"username\">\n    <label for=\"password\">Passwort:</label>\n    <input type=\"password\" id=\"password\" name=\"password\">\n  </fieldset>\n  <fieldset>\n    <legend>Einstellungen</legend>\n    <label for=\"bio\">Bio:</label>\n    <textarea id=\"bio\" name=\"bio\"></textarea>\n  </fieldset>\n  <button type=\"submit\">Registrieren</button>\n</form>",
 			"previewContainer": "preview-area",
 			"validations": [
 				{