{
	"$schema": "../../schemas/code-crispies-module-schema.json",
	"id": "flexbox",
	"title": "CSS Flexbox",
	"description": "Beherrsche das flexible Box-Layout-Modell für moderne responsive Designs",
	"difficulty": "intermediate",
	"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>.flex-container</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>",
			"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": ".flex-container { border: 2px dashed #aaa; padding: 1rem; }",
			"codePrefix": ".flex-container {\n  ",
			"initialCode": "",
			"codeSuffix": "\n}",
			"previewContainer": "preview-area",
			"validations": [
				{
					"type": "property_value",
					"value": { "property": "display", "expected": "flex" },
					"message": "Setze display auf <kbd>flex</kbd>"
				}
			]
		},
		{
			"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>.flex-container</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>",
			"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": ".flex-container { border: 2px dashed #aaa; padding: 1rem; height: 16rem; display: flex; }",
			"codePrefix": ".flex-container {\n  ",
			"initialCode": "",
			"codeSuffix": "\n}",
			"previewContainer": "preview-area",
			"validations": [
				{
					"type": "property_value",
					"value": { "property": "flex-direction", "expected": "column" },
					"message": "Setze flex-direction auf <kbd>column</kbd>"
				},
				{
					"type": "property_value",
					"value": { "property": "flex-wrap", "expected": "wrap" },
					"message": "Setze flex-wrap auf <kbd>wrap</kbd>"
				}
			]
		},
		{
			"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>.flex-container</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>",
			"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": ".flex-container { border: 2px dashed #aaa; padding: 1rem; display: flex; }",
			"codePrefix": ".flex-container {\n  ",
			"initialCode": "",
			"codeSuffix": "\n}",
			"previewContainer": "preview-area",
			"validations": [
				{
					"type": "property_value",
					"value": { "property": "justify-content", "expected": "space-between" },
					"message": "Setze justify-content auf <kbd>space-between</kbd>"
				}
			]
		},
		{
			"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>.flex-container</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>",
			"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": ".flex-container { border: 2px dashed #aaa; padding: 1rem; display: flex; height: 10rem; }",
			"codePrefix": ".flex-container {\n  ",
			"initialCode": "",
			"codeSuffix": "\n}",
			"previewContainer": "preview-area",
			"validations": [
				{
					"type": "property_value",
					"value": { "property": "align-items", "expected": "center" },
					"message": "Setze align-items auf <kbd>center</kbd>"
				}
			]
		},
		{
			"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; }",
			"sandboxCSS": ".flex-container { border: 2px dashed #aaa; padding: 1rem; display: flex; }",
			"codePrefix": ".box2 {\n  ",
			"initialCode": "",
			"codeSuffix": "\n}",
			"previewContainer": "preview-area",
			"validations": [
				{
					"type": "property_value",
					"value": { "property": "flex", "expected": "2" },
					"message": "Setze flex auf <kbd>2</kbd>"
				}
			]
		},
		{
			"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>",
			"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": ".flex-container { border: 2px dashed #aaa; padding: 1rem; display: flex; height: 12rem; align-items: center; }",
			"codePrefix": ".middle {\n  ",
			"initialCode": "",
			"codeSuffix": "\n}",
			"previewContainer": "preview-area",
			"validations": [
				{
					"type": "property_value",
					"value": { "property": "align-self", "expected": "flex-start" },
					"message": "Setze align-self auf <kbd>flex-start</kbd>"
				}
			]
		}
	]
}