refactor: shorten compound class names to single words

- box-model: .margin-box→.outer, .border-box→.sized, .shorthand-box→.spaced,
  .padding-box→.padded, .border-demo→.line
- units-variables: .unit-box→.box, .var-box→.themed, .calc-box→.sized,
  .viewport-box→.view
- responsive: .responsive-box→.panel, .fluid-text→.text, .grid-responsive→.cards
- Move expected toggle below preview area
- Update German translations with same changes

lessons/de/08-responsive.json

@@ -9,9 +9,9 @@
 			"id": "responsive-1",
 			"title": "Einführung in Media Queries",
 			"description": "Verstehe die Syntax und Anwendungsfälle für CSS Media Queries, um Stile bedingt basierend auf Viewport-Eigenschaften anzuwenden.",
-			"task": "Schreibe eine Media Query, die gilt, wenn der Viewport maximal 600px breit ist, und ändere den Hintergrund von <kbd>.responsive-box</kbd> auf <kbd>lightcoral</kbd>.",
-			"previewHTML": "<div class=\"responsive-box\">Ändere die Fenstergröße</div>",
-			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .responsive-box { padding: 1rem; background: lightblue; }",
+			"task": "Schreibe eine Media Query, die gilt, wenn der Viewport maximal 600px breit ist, und ändere den Hintergrund von <kbd>.panel</kbd> auf <kbd>lightcoral</kbd>.",
+			"previewHTML": "<div class=\"panel\">Ändere die Fenstergröße</div>",
+			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .panel { padding: 1rem; background: lightblue; }",
 			"sandboxCSS": "",
 			"codePrefix": "/* Füge deine Media Query unten ein */\n",
 			"initialCode": "",
@@ -26,8 +26,8 @@
 				},
 				{
 					"type": "contains",
-					"value": ".responsive-box",
-					"message": "Adressiere <kbd>.responsive-box</kbd> innerhalb der Media Query",
+					"value": ".panel",
+					"message": "Adressiere <kbd>.panel</kbd> innerhalb der Media Query",
 					"options": { "caseSensitive": false }
 				},
 				{
@@ -48,11 +48,11 @@
 			"id": "responsive-2",
 			"title": "Flüssige Typografie",
 			"description": "Verwende relative Einheiten wie vw, damit Schriftgrößen mit der Viewport-Breite skalieren.",
-			"task": "Setze die font-size von <kbd>.fluid-text</kbd> auf <kbd>5vw</kbd>, damit sie sich mit dem Viewport ändert.",
-			"previewHTML": "<p class=\"fluid-text\">Flüssige Typografie</p>",
+			"task": "Setze die font-size von <kbd>.text</kbd> auf <kbd>5vw</kbd>, damit sie sich mit dem Viewport ändert.",
+			"previewHTML": "<p class=\"text\">Flüssige Typografie</p>",
 			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; }",
 			"sandboxCSS": "",
-			"codePrefix": "/* Wende flüssige Schriftgröße an */\n.fluid-text {",
+			"codePrefix": "/* Wende flüssige Schriftgröße an */\n.text {",
 			"initialCode": "",
 			"codeSuffix": "}",
 			"previewContainer": "preview-area",
@@ -76,11 +76,11 @@
 			"id": "responsive-3",
 			"title": "Flexible Raster",
 			"description": "Kombiniere CSS Grid mit auto-fit oder auto-fill für responsive Spaltenlayouts.",
-			"task": "Definiere <kbd>.grid-responsive</kbd> mit <kbd>grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))</kbd> und einem gap von <kbd>1rem</kbd>.",
-			"previewHTML": "<div class=\"grid-responsive\"><div>1</div><div>2</div><div>3</div><div>4</div></div>",
-			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .grid-responsive > div { background: #d1c4e9; padding: 1rem; }",
+			"task": "Definiere <kbd>.cards</kbd> mit <kbd>grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))</kbd> und einem gap von <kbd>1rem</kbd>.",
+			"previewHTML": "<div class=\"cards\"><div>1</div><div>2</div><div>3</div><div>4</div></div>",
+			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .cards > div { background: #d1c4e9; padding: 1rem; }",
 			"sandboxCSS": "",
-			"codePrefix": "/* Erstelle ein responsives Raster */\n.grid-responsive {",
+			"codePrefix": "/* Erstelle ein responsives Raster */\n.cards {",
 			"initialCode": "",
 			"codeSuffix": "}",
 			"previewContainer": "preview-area",