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

src/index.html

@@ -64,16 +64,16 @@
 				<!-- Right Panel: Preview + Navigation -->
 				<div class="right-panel">
 					<div class="preview-section">
-						<div class="preview-header">
-							<span class="preview-label" data-i18n="yourOutput">Your Output</span>
-							<button id="show-expected-btn" class="btn btn-small" data-i18n="showExpected">Show Expected</button>
-						</div>
 						<div class="preview-wrapper">
 							<div class="preview-frame" id="preview-area"></div>
 							<div class="expected-overlay" id="expected-overlay">
 								<div class="expected-frame" id="preview-expected"></div>
 							</div>
 						</div>
+						<div class="preview-header">
+							<span class="preview-label" data-i18n="yourOutput">Your Output</span>
+							<button id="show-expected-btn" class="btn btn-small" data-i18n="showExpected">Show Expected</button>
+						</div>
 					</div>
 					<div class="game-controls">
 						<button id="prev-btn" class="btn" data-i18n="previous">Previous</button>