refactor: add HTML/CSS prefixes to German module titles and improve UI

- Shorten German module titles with consistent HTML/CSS prefixes
- Add .completion-badge styling for the lesson title completion badge
- Make sidebar lessons section fill available height on desktop
- Improve flexbox lesson descriptions with more context

lessons/de/00-basic-selectors.json

@@ -1,7 +1,7 @@
 {
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "css-basic-selectors",
-	"title": "CSS: Grundlegende Selektoren",
+	"title": "CSS Selektoren",
 	"description": "CSS-Selektoren sind die Grundlage für das Stylen von Webseiten und ermöglichen es dir, bestimmte HTML-Elemente für die Gestaltung auszuwählen. Dieses Modul stellt grundlegende Selektortypen vor, einschließlich Element-Typ-Selektoren, Klassen-Selektoren, ID-Selektoren und des universellen Selektors.",
 	"difficulty": "beginner",
 	"lessons": [

lessons/de/01-box-model.json

@@ -1,7 +1,7 @@
 {
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "box-model",
-	"title": "Padding, Borders und Margins",
+	"title": "CSS Box Model",
 	"description": "Beherrsche die Grundprinzipien der Raumverwaltung im Webdesign durch das CSS Box-Modell.",
 	"difficulty": "beginner",
 	"lessons": [

lessons/de/05-units-variables.json

@@ -1,7 +1,7 @@
 {
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "units-variables",
-	"title": "Einheiten, var() und calc()",
+	"title": "CSS Einheiten & Variablen",
 	"description": "Verstehe die Vielfalt der CSS-Maßeinheiten und wie du Custom Properties für wartbare Stile definierst und verwendest.",
 	"difficulty": "beginner",
 	"lessons": [

lessons/de/06-transitions-animations.json

@@ -1,7 +1,7 @@
 {
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "transitions-animations",
-	"title": "Transitions & Animationen",
+	"title": "CSS Animationen",
 	"description": "Bringe Interaktivität in dein UI durch sanfte Eigenschaftsübergänge und Keyframe-gesteuerte Animationen.",
 	"difficulty": "beginner",
 	"lessons": [

lessons/de/08-responsive.json

@@ -1,7 +1,7 @@
 {
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "responsive-design",
-	"title": "Responsive Design & Media Queries",
+	"title": "CSS Responsive Design",
 	"description": "Passe deine Layouts an verschiedene Bildschirmgrößen an mit Media Queries und flüssigen Design-Techniken.",
 	"difficulty": "intermediate",
 	"lessons": [

lessons/de/20-html-elements.json

@@ -1,7 +1,7 @@
 {
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "html-elements",
-	"title": "HTML-Elemente: Block vs Inline",
+	"title": "HTML Block & Inline",
 	"description": "Verstehe den grundlegenden Unterschied zwischen Container- (Block-) und Inline-Elementen",
 	"mode": "html",
 	"difficulty": "beginner",

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

@@ -1,7 +1,7 @@
 {
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "html-forms-basic",
-	"title": "HTML-Formulare: Grundlegende Eingaben",
+	"title": "HTML Formulare",
 	"description": "Lerne, Formulare mit verschiedenen Eingabetypen zu erstellen",
 	"mode": "html",
 	"difficulty": "beginner",

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

@@ -1,7 +1,7 @@
 {
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "html-forms-validation",
-	"title": "HTML-Formulare: Validierung",
+	"title": "HTML Validierung",
 	"description": "Lerne die eingebauten HTML5-Formular-Validierungsattribute kennen",
 	"mode": "html",
 	"difficulty": "intermediate",

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

@@ -1,7 +1,7 @@
 {
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "html-details-summary",
-	"title": "Details & Summary: Aufklapp-Elemente",
+	"title": "HTML Details & Summary",
 	"description": "Erstelle aufklappbare Inhaltsbereiche ohne JavaScript",
 	"mode": "html",
 	"difficulty": "beginner",

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

@@ -1,7 +1,7 @@
 {
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "html-progress-meter",
-	"title": "Progress & Meter Elemente",
+	"title": "HTML Progress & Meter",
 	"description": "Zeige Fortschritt und Messwerte nativ an",
 	"mode": "html",
 	"difficulty": "beginner",

lessons/de/30-html-tables.json

@@ -1,7 +1,7 @@
 {
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "html-tables",
-	"title": "HTML-Tabellen",
+	"title": "HTML Tabellen",
 	"description": "Erstelle strukturierte Datentabellen mit Überschriften und Beschriftungen",
 	"mode": "html",
 	"difficulty": "beginner",

lessons/de/31-html-marquee.json

@@ -1,7 +1,7 @@
 {
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "html-marquee",
-	"title": "Das Marquee-Element",
+	"title": "HTML Marquee",
 	"description": "Erstelle Lauftext mit dem klassischen (veralteten aber lustigen!) Marquee-Element",
 	"mode": "html",
 	"difficulty": "beginner",

lessons/de/32-html-svg.json

@@ -1,7 +1,7 @@
 {
 	"$schema": "../../schemas/code-crispies-module-schema.json",
 	"id": "html-svg",
-	"title": "SVG Grundlagen",
+	"title": "HTML SVG",
 	"description": "Zeichne skalierbare Vektorgrafiken direkt in HTML",
 	"mode": "html",
 	"difficulty": "beginner",

lessons/de/flexbox.json

@@ -7,10 +7,10 @@
 	"lessons": [
 		{
 			"id": "flexbox-1",
-			"title": "Flexbox Container Grundlagen",
-			"description": "Lerne, wie du einen Flex-Container erstellst und die Haupt- und Querachse verstehst.",
-			"task": "Füge <code>display: flex</code> zu <code>.wrap</code> hinzu, um ein Flexbox-Layout zu erstellen.",
-			"previewHTML": "<div class='flex-container'><div class='box'>1</div><div class='box'>2</div><div class='box'>3</div></div>",
+			"title": "Flex Container",
+			"description": "Flexbox ist ein eindimensionales Layout-System. Mit <kbd>display: flex</kbd> wird ein Element zum Flex-Container. Alle direkten Kinder werden automatisch zu Flex-Items und richten sich horizontal (Hauptachse) aus. Die Querachse verläuft senkrecht dazu.",
+			"task": "Füge <kbd>display: flex</kbd> zu <kbd>.wrap</kbd> hinzu.",
+			"previewHTML": "<div class='wrap'><div class='box'>1</div><div class='box'>2</div><div class='box'>3</div></div>",
 			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background: steelblue; color: white; padding: 1rem; margin: 8px; text-align: center; font-weight: bold; }",
 			"sandboxCSS": ".wrap { border: 2px dashed #aaa; padding: 1rem; }",
 			"codePrefix": ".wrap {\n  ",
@@ -27,10 +27,10 @@
 		},
 		{
 			"id": "flexbox-2",
-			"title": "Flex-Richtung und Umbruch",
-			"description": "Steuere die Richtung und den Umbruch von Flex-Elementen innerhalb eines Containers.",
-			"task": "Füge <code>flex-direction: column</code> und <code>flex-wrap: wrap</code> zu <code>.wrap</code> hinzu.",
-			"previewHTML": "<div class='flex-container'><div class='box'>1</div><div class='box'>2</div><div class='box'>3</div><div class='box'>4</div><div class='box'>5</div></div>",
+			"title": "Direction & Wrap",
+			"description": "<kbd>flex-direction</kbd> bestimmt die Hauptachse: <kbd>row</kbd> (horizontal, Standard) oder <kbd>column</kbd> (vertikal). Mit <kbd>flex-wrap: wrap</kbd> brechen Items in die nächste Zeile/Spalte um, wenn der Platz nicht reicht.",
+			"task": "Füge <kbd>flex-direction: column</kbd> und <kbd>flex-wrap: wrap</kbd> zu <kbd>.wrap</kbd> hinzu.",
+			"previewHTML": "<div class='wrap'><div class='box'>1</div><div class='box'>2</div><div class='box'>3</div><div class='box'>4</div><div class='box'>5</div></div>",
 			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background: steelblue; color: white; padding: 1rem; margin: 8px; text-align: center; font-weight: bold; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; }",
 			"sandboxCSS": ".wrap { border: 2px dashed #aaa; padding: 1rem; height: 16rem; display: flex; }",
 			"codePrefix": ".wrap {\n  ",
@@ -53,9 +53,9 @@
 		{
 			"id": "flexbox-3",
 			"title": "Justify Content",
-			"description": "Lerne, wie du Flex-Elemente entlang der Hauptachse des Containers ausrichtest.",
-			"task": "Füge <code>justify-content: space-between</code> zu <code>.wrap</code> hinzu, um die Boxen gleichmäßig zu verteilen.",
-			"previewHTML": "<div class='flex-container'><div class='box'>1</div><div class='box'>2</div><div class='box'>3</div></div>",
+			"description": "<kbd>justify-content</kbd> verteilt Items entlang der Hauptachse. Werte: <kbd>flex-start</kbd> (Anfang), <kbd>flex-end</kbd> (Ende), <kbd>center</kbd> (Mitte), <kbd>space-between</kbd> (gleichmäßig mit Abstand), <kbd>space-around</kbd> (gleichmäßig mit Rand).",
+			"task": "Füge <kbd>justify-content: space-between</kbd> zu <kbd>.wrap</kbd> hinzu.",
+			"previewHTML": "<div class='wrap'><div class='box'>1</div><div class='box'>2</div><div class='box'>3</div></div>",
 			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background: steelblue; color: white; padding: 1rem; text-align: center; font-weight: bold; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; }",
 			"sandboxCSS": ".wrap { border: 2px dashed #aaa; padding: 1rem; display: flex; }",
 			"codePrefix": ".wrap {\n  ",
@@ -73,9 +73,9 @@
 		{
 			"id": "flexbox-4",
 			"title": "Align Items",
-			"description": "Steuere, wie Flex-Elemente entlang der Querachse des Containers ausgerichtet werden.",
-			"task": "Füge <code>align-items: center</code> zu <code>.wrap</code> hinzu, um die Boxen vertikal zu zentrieren.",
-			"previewHTML": "<div class='flex-container'><div class='box tall'>1</div><div class='box'>2</div><div class='box short'>3</div></div>",
+			"description": "<kbd>align-items</kbd> richtet Items entlang der Querachse aus (bei <kbd>row</kbd>: vertikal). Werte: <kbd>stretch</kbd> (Standard, füllt Höhe), <kbd>flex-start</kbd> (oben), <kbd>flex-end</kbd> (unten), <kbd>center</kbd> (Mitte), <kbd>baseline</kbd> (Textlinie).",
+			"task": "Füge <kbd>align-items: center</kbd> zu <kbd>.wrap</kbd> hinzu.",
+			"previewHTML": "<div class='wrap'><div class='box tall'>1</div><div class='box'>2</div><div class='box short'>3</div></div>",
 			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background: steelblue; color: white; padding: 1rem; margin: 8px; text-align: center; font-weight: bold; width: 3rem; display: flex; justify-content: center; } .tall { height: 6rem; } .short { height: 3rem; }",
 			"sandboxCSS": ".wrap { border: 2px dashed #aaa; padding: 1rem; display: flex; height: 10rem; }",
 			"codePrefix": ".wrap {\n  ",
@@ -93,12 +93,12 @@
 		{
 			"id": "flexbox-5",
 			"title": "Flex Grow",
-			"description": "Die <code>flex</code> Eigenschaft steuert, wie stark ein Element im Verhältnis zu anderen wächst.",
-			"task": "Füge <code>flex: 2</code> zu <code>.box2</code> hinzu, um sie doppelt so breit wachsen zu lassen.",
-			"previewHTML": "<div class='flex-container'><div class='box box1'>1</div><div class='box box2'>2</div><div class='box box3'>3</div></div>",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { color: white; padding: 1rem; margin: 8px; text-align: center; font-weight: bold; display: flex; align-items: center; justify-content: center; } .box1 { background: coral; flex: 1; } .box2 { background: mediumseagreen; } .box3 { background: gold; flex: 1; }",
+			"description": "Die <kbd>flex</kbd>-Eigenschaft ist eine Kurzform für <kbd>flex-grow</kbd>, <kbd>flex-shrink</kbd> und <kbd>flex-basis</kbd>. Ein höherer Wert bedeutet, dass das Element mehr vom verfügbaren Platz einnimmt. <kbd>flex: 2</kbd> wächst doppelt so schnell wie <kbd>flex: 1</kbd>.",
+			"task": "Füge <kbd>flex: 2</kbd> zu <kbd>.green</kbd> hinzu.",
+			"previewHTML": "<div class='wrap'><div class='box red'>1</div><div class='box green'>2</div><div class='box yellow'>3</div></div>",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { color: white; padding: 1rem; margin: 8px; text-align: center; font-weight: bold; display: flex; align-items: center; justify-content: center; } .red { background: coral; flex: 1; } .green { background: mediumseagreen; } .yellow { background: gold; flex: 1; }",
 			"sandboxCSS": ".wrap { border: 2px dashed #aaa; padding: 1rem; display: flex; }",
-			"codePrefix": ".box2 {\n  ",
+			"codePrefix": ".green {\n  ",
 			"initialCode": "",
 			"codeSuffix": "\n}",
 			"previewContainer": "preview-area",
@@ -113,9 +113,9 @@
 		{
 			"id": "flexbox-6",
 			"title": "Align Self",
-			"description": "Verwende <code>align-self</code>, um die Ausrichtung für ein einzelnes Flex-Element zu überschreiben.",
-			"task": "Füge <code>align-self: flex-start</code> zu <code>.middle</code> hinzu, um es nach oben zu verschieben.",
-			"previewHTML": "<div class='flex-container'><div class='box'>1</div><div class='box middle'>2</div><div class='box'>3</div></div>",
+			"description": "<kbd>align-self</kbd> überschreibt <kbd>align-items</kbd> für ein einzelnes Element. So kannst du ein Item individuell auf der Querachse positionieren, während alle anderen Items ihrer Standard-Ausrichtung folgen.",
+			"task": "Füge <kbd>align-self: flex-start</kbd> zu <kbd>.middle</kbd> hinzu.",
+			"previewHTML": "<div class='wrap'><div class='box'>1</div><div class='box middle'>2</div><div class='box'>3</div></div>",
 			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background: steelblue; color: white; padding: 1rem; margin: 8px; text-align: center; font-weight: bold; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; } .middle { background: mediumseagreen; }",
 			"sandboxCSS": ".wrap { border: 2px dashed #aaa; padding: 1rem; display: flex; height: 12rem; align-items: center; }",
 			"codePrefix": ".middle {\n  ",