fix(lessons): use code tags for quoted text, add syntax examples

- Fixed validation in welcome lesson (Hello World instead of Hello)
- Replaced 'quoted text' with <code>quoted text</code> in all task descriptions
- Added syntax examples to Transitions and Keyframes lessons
- Updated all language versions (en, de, pl, es, ar, uk)

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

@@ -10,7 +10,7 @@
 			"id": "details-summary-basic",
 			"title": "Dein erstes Aufklapp-Element",
 			"description": "Das <kbd>&lt;details&gt;</kbd>-Element erstellt einen aufklappbaren Bereich. Das <kbd>&lt;summary&gt;</kbd> bietet die anklickbare Beschriftung.<br><br>Klicke auf die Zusammenfassung, um den versteckten Inhalt anzuzeigen - kein JavaScript nötig!",
-			"task": "Erstelle ein <kbd>&lt;details&gt;</kbd>-Element mit:<br>1. Einem <kbd>&lt;summary&gt;</kbd> mit dem Text 'Klicken zum Aufklappen'<br>2. Einem <kbd>&lt;p&gt;</kbd> mit dem Text 'Dieser Inhalt war versteckt!'",
+			"task": "Erstelle ein <kbd>&lt;details&gt;</kbd>-Element mit:<br>1. Einem <kbd>&lt;summary&gt;</kbd> mit dem Text <code>Klicken zum Aufklappen</code><br>2. Einem <kbd>&lt;p&gt;</kbd> mit dem Text <code>Dieser Inhalt war versteckt!</code>",
 			"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": "",
@@ -63,7 +63,7 @@
 			"id": "faq-accordion",
 			"title": "FAQ-Akkordeon",
 			"description": "Mehrere <kbd>&lt;details&gt;</kbd>-Elemente erstellen ein Akkordeon-artiges FAQ. Jede Frage kann unabhängig aufgeklappt werden.<br><br><b>Pro-Tipp:</b> Tippe <kbd>details*3&gt;summary+p</kbd> und drücke Tab für Emmet-Expansion. Das <kbd>*3</kbd> erstellt 3 Elemente, <kbd>&gt;</kbd> geht eine Ebene tiefer, <kbd>+</kbd> fügt Geschwister hinzu.",
-			"task": "Erstelle einen FAQ-Bereich mit:<br>1. Einer <kbd>&lt;h1&gt;</kbd> mit dem Text 'Häufig gestellte Fragen'<br>2. Drei <kbd>&lt;details&gt;</kbd>-Elementen, jeweils mit einer Frage im <kbd>&lt;summary&gt;</kbd> und einer Antwort im <kbd>&lt;p&gt;</kbd>",
+			"task": "Erstelle einen FAQ-Bereich mit:<br>1. Einer <kbd>&lt;h1&gt;</kbd> mit dem Text <code>Häufig gestellte Fragen</code><br>2. Drei <kbd>&lt;details&gt;</kbd>-Elementen, jeweils mit einer Frage im <kbd>&lt;summary&gt;</kbd> und einer Antwort im <kbd>&lt;p&gt;</kbd>",
 			"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": "",