fix: add kbd tags to validation messages for clarity

- Wrap HTML element names in <kbd> tags in all validation messages
- Apply consistent formatting to both English and German lessons
- Make hints clearer about which elements/attributes to use
- Fix mobile editor layout overflow issue

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

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

lessons/31-html-marquee.json

@@ -21,7 +21,7 @@
 				{
 					"type": "element_exists",
 					"value": "marquee",
-					"message": "Add a <marquee> element"
+					"message": "Add a <kbd>&lt;marquee&gt;</kbd> element"
 				}
 			]
 		},
@@ -40,12 +40,12 @@
 				{
 					"type": "element_exists",
 					"value": "marquee",
-					"message": "Add a <marquee> element"
+					"message": "Add a <kbd>&lt;marquee&gt;</kbd> element"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "marquee", "attr": "behavior", "value": "alternate" },
-					"message": "Add behavior=\"alternate\" to make it bounce"
+					"message": "Add <kbd>behavior=</kbd>\"alternate\" to make it bounce"
 				}
 			]
 		},
@@ -64,17 +64,17 @@
 				{
 					"type": "element_exists",
 					"value": "marquee",
-					"message": "Add a <marquee> element"
+					"message": "Add a <kbd>&lt;marquee&gt;</kbd> element"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "marquee", "attr": "direction", "value": "left" },
-					"message": "Add direction=\"left\" for horizontal scrolling"
+					"message": "Add <kbd>direction=</kbd>\"left\" for horizontal scrolling"
 				},
 				{
 					"type": "attribute_value",
 					"value": { "selector": "marquee", "attr": "scrollamount", "value": "5" },
-					"message": "Add scrollamount=\"5\" for smooth speed"
+					"message": "Add <kbd>scrollamount=</kbd>\"5\" for smooth speed"
 				}
 			]
 		}