fix: polish form UX and step 9 summary translations

- Add spacing below Datenschutzerklaerung text - Fix missing Umzugstermin on step 9 (wrong field names in JS) - Remove number-to-checkmark animation flicker on progress dots - Add cbm unit label to furniture item values and summary - Translate all summary field labels via l10n (Name, Strasse, etc.) - Fix room names showing lowercase keys instead of proper titles - Auto-check checkbox when quantity is entered on step 8 - Remove redundant Sonstiges textarea placeholder Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
feat: add 3 switchable color palettes with Slate Blue & Amber as default
2026-02-12 23:31:25 +09:00 · 2026-02-12 23:02:55 +09:00 · 2026-02-12 22:47:39 +09:00
7 changed files with 461 additions and 117 deletions
--- a/assets/css/form.css
+++ b/assets/css/form.css
@@ -27,6 +27,123 @@
 	--umzug-transition: 0.2s ease;
 }

+/* ===== Color Palettes ===== */
+
+/* Palette A: Deep Teal — Grounded Confidence */
+.palette-a.umzugsliste-wizard {
+	--umzug-primary: #1F7A7A;
+	--umzug-primary-light: rgba(31, 122, 122, 0.2);
+	--umzug-primary-dark: #155858;
+	--umzug-success: #4A7C59;
+	--umzug-success-light: rgba(74, 124, 89, 0.1);
+	--umzug-error: #C14E3A;
+	--umzug-error-light: #FCEAE6;
+	--umzug-bg: #FAF8F5;
+	--umzug-surface: #FFFFFF;
+	--umzug-border: #D4CEC4;
+	--umzug-text: #3E2E28;
+	--umzug-text-secondary: #6B5D56;
+}
+
+.palette-a .room-totals {
+	background: #F5F2ED;
+}
+
+.palette-a .wizard-btn-back:hover {
+	background: #F2EFEA;
+	color: var(--umzug-text);
+}
+
+.palette-a .wizard-btn-submit:hover {
+	background: #3D6A4A;
+}
+
+body.umzugsliste-standalone:has(.palette-a) {
+	background: #FAF8F5;
+}
+
+/* Palette B: Slate Blue & Amber — Modern Logistics */
+.palette-b.umzugsliste-wizard {
+	--umzug-primary: #4A6FA5;
+	--umzug-primary-light: rgba(74, 111, 165, 0.2);
+	--umzug-primary-dark: #2F4668;
+	--umzug-success: #52A07B;
+	--umzug-success-light: rgba(82, 160, 123, 0.1);
+	--umzug-error: #D15847;
+	--umzug-error-light: #FDEAE8;
+	--umzug-bg: #F5F7FA;
+	--umzug-surface: #FFFFFF;
+	--umzug-border: #D8DFE8;
+	--umzug-text: #1A2332;
+	--umzug-text-secondary: #5F6B7A;
+}
+
+.palette-b .room-totals {
+	background: #EDF0F5;
+}
+
+.palette-b .wizard-btn-back:hover {
+	background: #ECEFF4;
+	color: var(--umzug-text);
+}
+
+.palette-b .wizard-btn-submit:hover {
+	background: #448A69;
+}
+
+.palette-b .wizard-btn-next {
+	background: #E8A63C;
+}
+
+.palette-b .wizard-btn-next:hover {
+	background: #D69529;
+}
+
+body.umzugsliste-standalone:has(.palette-b) {
+	background: #F5F7FA;
+}
+
+/* Palette C: Rich Olive & Copper — Heritage & Motion */
+.palette-c.umzugsliste-wizard {
+	--umzug-primary: #5C6E54;
+	--umzug-primary-light: rgba(92, 110, 84, 0.2);
+	--umzug-primary-dark: #3D4738;
+	--umzug-success: #6B9F6F;
+	--umzug-success-light: rgba(107, 159, 111, 0.1);
+	--umzug-error: #B85A3D;
+	--umzug-error-light: #F8EDE8;
+	--umzug-bg: #F8F6F1;
+	--umzug-surface: #FEFDFB;
+	--umzug-border: #D9D3C8;
+	--umzug-text: #2F3126;
+	--umzug-text-secondary: #6B6E64;
+}
+
+.palette-c .room-totals {
+	background: #F0EDE6;
+}
+
+.palette-c .wizard-btn-back:hover {
+	background: #F0EDE6;
+	color: var(--umzug-text);
+}
+
+.palette-c .wizard-btn-submit:hover {
+	background: #5A8A5E;
+}
+
+.palette-c .wizard-btn-next {
+	background: #C17E5D;
+}
+
+.palette-c .wizard-btn-next:hover {
+	background: #A96A4B;
+}
+
+body.umzugsliste-standalone:has(.palette-c) {
+	background: #F8F6F1;
+}
+
 /* ===== Reset & Base ===== */
 .umzugsliste-standalone {
 	margin: 0;
@@ -132,7 +249,7 @@
 	font-size: 0.8rem;
 	font-weight: 600;
 	color: var(--umzug-text-secondary);
-	transition: all var(--umzug-transition);
+	transition: background var(--umzug-transition), border-color var(--umzug-transition), color var(--umzug-transition);
 }

 .dot-label {
@@ -183,19 +300,23 @@
 	right: 0;
 	z-index: 100;
 	background: var(--umzug-surface);
-	border-top: 3px solid var(--umzug-primary);
+	border: 1px solid var(--umzug-border);
+	border-radius: var(--umzug-radius);
 	padding: 12px 20px;
+	margin-bottom: 12px;
 	text-align: center;
 	font-size: 0.95rem;
 	font-weight: 500;
-	box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
+	box-shadow: var(--umzug-shadow-lg);
 	transform: translateY(100%);
-	transition: transform 0.3s;
+	opacity: 0;
+	transition: transform 0.3s, opacity 0.3s;
 	pointer-events: none;
 }

 .running-totals.visible {
 	transform: translateY(0);
+	opacity: 1;
 	pointer-events: auto;
 }

@@ -251,7 +372,9 @@
 .step-title {
 	font-size: 1.5rem;
 	font-weight: 700;
-	margin: 0 0 20px;
+	margin: 0 0 16px;
+	padding-bottom: 12px;
+	border-bottom: 1px solid var(--umzug-border);
 	color: var(--umzug-text);
 }

@@ -274,6 +397,32 @@
 	border-bottom: 1px solid var(--umzug-border);
 }

+/* ===== Step Sections (inner dividers within a step-card) ===== */
+.step-section {
+	padding-top: 16px;
+	margin-top: 16px;
+	border-top: 1px solid var(--umzug-border);
+}
+
+.step-section:first-of-type {
+	border-top: none;
+	padding-top: 0;
+	margin-top: 0;
+}
+
+/* ===== Address Sections (grid items within step-card) ===== */
+.address-section {
+	background: var(--umzug-surface);
+	border: 1px solid var(--umzug-border);
+	border-radius: var(--umzug-radius);
+	padding: 16px 20px;
+}
+
+/* Summary sections inside step-card: lighter treatment */
+.step-card #wizard-summary .summary-section {
+	box-shadow: none;
+}
+
 /* ===== Date Selector ===== */
 .date-selector {
 	display: flex;
@@ -316,7 +465,7 @@
 	font-size: 0.8rem;
 	color: var(--umzug-text-secondary);
 	margin-top: 12px;
-	margin-bottom: 0;
+	margin-bottom: 16px;
 }

 .privacy-note a {
@@ -512,9 +661,9 @@
 }

 .item-cbm {
-	width: 52px;
+	width: 75px;
 	text-align: right;
-	font-size: 0.85rem;
+	font-size: 13px;
 	color: var(--umzug-text-secondary);
 	flex-shrink: 0;
 }
@@ -526,7 +675,14 @@
 }

 .montage-toggle .radio-label {
-	font-size: 0.8rem;
+	font-size: 13px;
+}
+
+.montage-label {
+	font-size: 13px;
+	font-weight: 600;
+	color: var(--umzug-text-secondary);
+	white-space: nowrap;
 }

 /* ===== Room Totals ===== */
@@ -627,6 +783,98 @@
 	box-shadow: 0 0 0 3px var(--umzug-primary-light);
 }

+/* ===== Step 8 Design ===== */
+.additional-field input[type="checkbox"] {
+	accent-color: var(--umzug-primary);
+}
+
+.wizard-step[data-step="8"] .additional-field {
+	padding: 8px 0;
+	background: transparent;
+	border: none;
+	border-bottom: 1px solid #f0f0f0;
+	border-radius: 0;
+	opacity: 0.55;
+	transition: opacity 0.2s;
+}
+
+.wizard-step[data-step="8"] .additional-field:last-child {
+	border-bottom: none;
+}
+
+.wizard-step[data-step="8"] .additional-field:hover,
+.wizard-step[data-step="8"] .additional-field:focus-within,
+.wizard-step[data-step="8"] .additional-field:has(input:checked),
+.wizard-step[data-step="8"] .additional-field:has(.qty-small:not(:placeholder-shown)) {
+	opacity: 1;
+}
+
+.wizard-step[data-step="8"] .additional-field-abbau .radio-group {
+	display: inline-flex;
+	gap: 16px;
+	background: transparent;
+	border: none;
+	border-radius: 0;
+	padding: 0;
+}
+
+.wizard-step[data-step="8"] .additional-field-abbau .radio-label {
+	padding: 0;
+	font-size: 0.9rem;
+}
+
+.wizard-step[data-step="8"] .additional-field-abbau .radio-label input[type="radio"] {
+	position: static;
+	opacity: 1;
+	width: auto;
+	height: auto;
+	margin: 0;
+}
+
+/* ===== Dev Auto-Fill ===== */
+.dev-autofill-btn {
+	position: fixed;
+	bottom: 60px;
+	right: 16px;
+	z-index: 300;
+	background: #ff6b35;
+	color: #fff;
+	border: none;
+	border-radius: 20px;
+	padding: 6px 14px;
+	font-size: 0.75rem;
+	font-weight: 600;
+	cursor: pointer;
+	opacity: 0.6;
+	transition: opacity var(--umzug-transition);
+}
+
+.dev-autofill-btn:hover {
+	opacity: 1;
+}
+
+/* ===== Palette Switcher (WP_DEBUG) ===== */
+.dev-palette-btn {
+	position: fixed;
+	bottom: 90px;
+	right: 16px;
+	z-index: 300;
+	background: #7c3aed;
+	color: #fff;
+	border: none;
+	border-radius: 20px;
+	padding: 6px 14px;
+	font-size: 0.75rem;
+	font-weight: 600;
+	cursor: pointer;
+	opacity: 0.6;
+	transition: opacity var(--umzug-transition);
+}
+
+.dev-palette-btn:hover {
+	opacity: 1;
+}
+
 /* ===== Sonstiges ===== */
 .sonstiges-textarea {
 	width: 100%;
@@ -699,7 +947,7 @@
 }

 #wizard-summary .summary-item-cbm {
-	width: 60px;
+	width: 80px;
 	text-align: right;
 	color: var(--umzug-text-secondary);
 }
@@ -839,6 +1087,15 @@
 		padding-left: 0;
 	}

+	.montage-label {
+		flex-basis: 100%;
+		margin-bottom: -4px;
+	}
+
+	.wizard-step[data-step="8"] .additional-field {
+		padding: 6px 0;
+	}
+
 	.additional-field-abbau {
 		flex-direction: column;
 		align-items: flex-start;
--- a/assets/js/form.js
+++ b/assets/js/form.js
@@ -297,44 +297,44 @@
 		// Customer info
 		html += '<div class="summary-section">';
 		html += summaryHeading(l10n.summaryMovingDate || 'Moving Date', 1);
-		var day = getFieldVal('day');
-		var month = getFieldVal('month');
-		var year = getFieldVal('year');
+		var day = getFieldVal('umzug_day');
+		var month = getFieldVal('umzug_month');
+		var year = getFieldVal('umzug_year');
 		html += summaryRow(l10n.summaryMovingDate || 'Moving Date', day + '.' + month + '.' + year);
 		html += '</div>';

 		// Loading address
 		html += '<div class="summary-section">';
 		html += summaryHeading(l10n.summaryLoading || 'Loading Address', 1);
-		html += summaryRow('Name', getFieldVal('bName'));
-		html += summaryRow('Street', getFieldVal('bStrasse'));
-		html += summaryRow('ZIP/City', getFieldVal('bort'));
+		html += summaryRow(l10n.summaryName || 'Name', getFieldVal('bName'));
+		html += summaryRow(l10n.summaryStreet || 'Street', getFieldVal('bStrasse'));
+		html += summaryRow(l10n.summaryZipCity || 'ZIP/City', getFieldVal('bort'));
 		var bGeschoss = getFieldVal('info[bGeschoss]');
-		if (bGeschoss) html += summaryRow('Floor', bGeschoss);
-		html += summaryRow('Elevator', getRadioVal('info[bLift]'));
-		html += summaryRow('Phone', getFieldVal('bTelefon'));
+		if (bGeschoss) html += summaryRow(l10n.summaryFloor || 'Floor', bGeschoss);
+		html += summaryRow(l10n.summaryElevator || 'Elevator', getRadioVal('info[bLift]'));
+		html += summaryRow(l10n.summaryPhone || 'Phone', getFieldVal('bTelefon'));
 		var bFax = getFieldVal('info[bTelefax]');
-		if (bFax) html += summaryRow('Fax', bFax);
+		if (bFax) html += summaryRow(l10n.summaryFax || 'Fax', bFax);
 		var bMobil = getFieldVal('info[bMobil]');
-		if (bMobil) html += summaryRow('Mobile', bMobil);
-		html += summaryRow('Email', getFieldVal('info[eE-Mail]'));
+		if (bMobil) html += summaryRow(l10n.summaryMobile || 'Mobile', bMobil);
+		html += summaryRow(l10n.summaryEmail || 'Email', getFieldVal('info[eE-Mail]'));
 		html += '</div>';

 		// Unloading address
 		html += '<div class="summary-section">';
 		html += summaryHeading(l10n.summaryUnloading || 'Unloading Address', 1);
-		html += summaryRow('Name', getFieldVal('eName'));
-		html += summaryRow('Street', getFieldVal('eStrasse'));
-		html += summaryRow('ZIP/City', getFieldVal('eort'));
+		html += summaryRow(l10n.summaryName || 'Name', getFieldVal('eName'));
+		html += summaryRow(l10n.summaryStreet || 'Street', getFieldVal('eStrasse'));
+		html += summaryRow(l10n.summaryZipCity || 'ZIP/City', getFieldVal('eort'));
 		var eGeschoss = getFieldVal('info[eGeschoss]');
-		if (eGeschoss) html += summaryRow('Floor', eGeschoss);
-		html += summaryRow('Elevator', getRadioVal('info[eLift]'));
+		if (eGeschoss) html += summaryRow(l10n.summaryFloor || 'Floor', eGeschoss);
+		html += summaryRow(l10n.summaryElevator || 'Elevator', getRadioVal('info[eLift]'));
 		var eTel = getFieldVal('eTelefon');
-		if (eTel) html += summaryRow('Phone', eTel);
+		if (eTel) html += summaryRow(l10n.summaryPhone || 'Phone', eTel);
 		var eFax = getFieldVal('info[eTelefax]');
-		if (eFax) html += summaryRow('Fax', eFax);
+		if (eFax) html += summaryRow(l10n.summaryFax || 'Fax', eFax);
 		var eMobil = getFieldVal('info[eMobil]');
-		if (eMobil) html += summaryRow('Mobile', eMobil);
+		if (eMobil) html += summaryRow(l10n.summaryMobile || 'Mobile', eMobil);
 		html += '</div>';

 		// Room summaries
@@ -359,7 +359,7 @@
 				html += '<div class="summary-item">';
 				html += '<span class="summary-item-name">' + escHtml(item.name) + '</span>';
 				html += '<span class="summary-item-qty">' + item.qty + '</span>';
-				html += '<span class="summary-item-cbm">' + formatGermanDecimal(item.cbm) + '</span>';
+				html += '<span class="summary-item-cbm">' + formatGermanDecimal(item.cbm) + ' ' + escHtml(l10n.summaryCbm || 'cbm') + '</span>';
 				if (item.montage !== null) {
 					html += '<span class="summary-item-montage">' + escHtml(item.montage === 'ja' ? (l10n.summaryYes || 'Yes') : (l10n.summaryNo || 'No')) + '</span>';
 				}
@@ -419,13 +419,19 @@
 	}

 	function getRoomDisplayName(roomKey) {
-		// Read from the step title or the furniture list heading
 		var list = qs('.furniture-list[data-room="' + roomKey + '"]');
 		if (list) {
 			var card = list.closest('.step-card');
 			if (card) {
-				var h3 = qs('h3', card);
-				if (h3) return h3.textContent;
+				// For combined steps (step 5), use the h3 section heading
+				var section = list.closest('.step-section');
+				if (section) {
+					var h3 = qs('h3', section);
+					if (h3) return h3.textContent;
+				}
+				// For single-room steps, use the h2 step title
+				var h2 = qs('h2.step-title', card);
+				if (h2) return h2.textContent;
 			}
 		}
 		return roomKey;
@@ -556,6 +562,15 @@
 			}
 		});

+		// Auto-check checkbox when qty-small gets a value
+		document.addEventListener('input', function(e) {
+			if (!e.target.classList.contains('qty-small')) return;
+			var field = e.target.closest('.additional-field');
+			if (!field) return;
+			var cb = qs('input[type="checkbox"]', field);
+			if (cb) cb.checked = e.target.value.trim() !== '';
+		});
+
 		// Stepper button click handlers
 		document.addEventListener('click', function(e) {
 			var btn = e.target.closest('.qty-btn');
--- a/includes/class-form-renderer.php
+++ b/includes/class-form-renderer.php
@@ -46,7 +46,7 @@ class Umzugsliste_Form_Renderer {

 		ob_start();
 		?>
-		<div class="umzugsliste-wizard">
+		<div class="umzugsliste-wizard palette-b">
 			<?php self::render_validation_errors(); ?>
 			<?php self::render_progress_bar( $steps ); ?>
 			<div class="running-totals" id="running-totals">
@@ -82,6 +82,20 @@ class Umzugsliste_Form_Renderer {
 					<button type="submit" class="wizard-btn wizard-btn-submit" id="wizard-submit" style="display:none;"><?php echo esc_html__( 'Submit Request', 'siegel-umzugsliste' ); ?></button>
 				</div>
 			</form>
+			<?php if ( defined( 'WP_DEBUG' ) && WP_DEBUG ) : ?>
+				<button type="button" id="dev-palette-switch" class="dev-palette-btn">&#127912; B</button>
+				<script>
+				document.getElementById('dev-palette-switch').addEventListener('click', function() {
+					var w = document.querySelector('.umzugsliste-wizard');
+					var p = ['palette-a', 'palette-b', 'palette-c'];
+					var c = p.findIndex(function(x) { return w.classList.contains(x); });
+					var n = (c + 1) % p.length;
+					w.classList.remove(p[c]);
+					w.classList.add(p[n]);
+					this.textContent = '\u{1F3A8} ' + p[n].split('-')[1].toUpperCase();
+				});
+				</script>
+			<?php endif; ?>
 		</div>
 		<?php
 		return ob_get_clean();
@@ -144,9 +158,8 @@ class Umzugsliste_Form_Renderer {
 	private static function render_step_1() {
 		?>
 		<div class="wizard-step active" data-step="1">
-			<h2 class="step-title"><?php echo esc_html__( 'Moving Date & Addresses', 'siegel-umzugsliste' ); ?></h2>
-
 			<div class="step-card">
+				<h2 class="step-title"><?php echo esc_html__( 'Moving Date & Addresses', 'siegel-umzugsliste' ); ?></h2>
 				<h3><?php echo esc_html__( 'Expected Moving Date', 'siegel-umzugsliste' ); ?></h3>
 				<div class="date-selector">
 					<?php
@@ -161,38 +174,55 @@ class Umzugsliste_Form_Renderer {
 						'<a href="http://siegel-umzug.de/datenschutz.html" target="_blank" rel="noopener">' . esc_html__( 'Privacy Policy', 'siegel-umzugsliste' ) . '</a>'
 					);
 				?></p>
-			</div>
-
-			<div class="address-grid">
-				<div class="step-card">
-					<h3><?php echo esc_html__( 'Loading Address', 'siegel-umzugsliste' ); ?></h3>
-					<?php
-					self::render_address_field( __( 'Name', 'siegel-umzugsliste' ), 'bName', true );
-					self::render_address_field( __( 'Street', 'siegel-umzugsliste' ), 'bStrasse', true );
-					self::render_address_field( __( 'ZIP/City', 'siegel-umzugsliste' ), 'bort', true );
-					self::render_address_field( __( 'Floor', 'siegel-umzugsliste' ), 'info[bGeschoss]' );
-					self::render_lift_field( 'info[bLift]' );
-					self::render_address_field( __( 'Phone', 'siegel-umzugsliste' ), 'bTelefon', true );
-					self::render_address_field( __( 'Fax', 'siegel-umzugsliste' ), 'info[bTelefax]' );
-					self::render_address_field( __( 'Mobile', 'siegel-umzugsliste' ), 'info[bMobil]' );
-					self::render_address_field( __( 'Email', 'siegel-umzugsliste' ), 'info[eE-Mail]', true, 'email' );
-					?>
-				</div>
-				<div class="step-card">
-					<h3><?php echo esc_html__( 'Unloading Address', 'siegel-umzugsliste' ); ?></h3>
-					<?php
-					self::render_address_field( __( 'Name', 'siegel-umzugsliste' ), 'eName', true );
-					self::render_address_field( __( 'Street', 'siegel-umzugsliste' ), 'eStrasse', true );
-					self::render_address_field( __( 'ZIP/City', 'siegel-umzugsliste' ), 'eort', true );
-					self::render_address_field( __( 'Floor', 'siegel-umzugsliste' ), 'info[eGeschoss]' );
-					self::render_lift_field( 'info[eLift]' );
-					self::render_address_field( __( 'Phone', 'siegel-umzugsliste' ), 'eTelefon' );
-					self::render_address_field( __( 'Fax', 'siegel-umzugsliste' ), 'info[eTelefax]' );
-					self::render_address_field( __( 'Mobile', 'siegel-umzugsliste' ), 'info[eMobil]' );
-					?>
+				<div class="address-grid">
+					<div class="address-section">
+						<h3><?php echo esc_html__( 'Loading Address', 'siegel-umzugsliste' ); ?></h3>
+						<?php
+						self::render_address_field( __( 'Name', 'siegel-umzugsliste' ), 'bName', true );
+						self::render_address_field( __( 'Street', 'siegel-umzugsliste' ), 'bStrasse', true );
+						self::render_address_field( __( 'ZIP/City', 'siegel-umzugsliste' ), 'bort', true );
+						self::render_address_field( __( 'Floor', 'siegel-umzugsliste' ), 'info[bGeschoss]' );
+						self::render_lift_field( 'info[bLift]' );
+						self::render_address_field( __( 'Phone', 'siegel-umzugsliste' ), 'bTelefon', true );
+						self::render_address_field( __( 'Fax', 'siegel-umzugsliste' ), 'info[bTelefax]' );
+						self::render_address_field( __( 'Mobile', 'siegel-umzugsliste' ), 'info[bMobil]' );
+						self::render_address_field( __( 'Email', 'siegel-umzugsliste' ), 'info[eE-Mail]', true, 'email' );
+						?>
+					</div>
+					<div class="address-section">
+						<h3><?php echo esc_html__( 'Unloading Address', 'siegel-umzugsliste' ); ?></h3>
+						<?php
+						self::render_address_field( __( 'Name', 'siegel-umzugsliste' ), 'eName', true );
+						self::render_address_field( __( 'Street', 'siegel-umzugsliste' ), 'eStrasse', true );
+						self::render_address_field( __( 'ZIP/City', 'siegel-umzugsliste' ), 'eort', true );
+						self::render_address_field( __( 'Floor', 'siegel-umzugsliste' ), 'info[eGeschoss]' );
+						self::render_lift_field( 'info[eLift]' );
+						self::render_address_field( __( 'Phone', 'siegel-umzugsliste' ), 'eTelefon' );
+						self::render_address_field( __( 'Fax', 'siegel-umzugsliste' ), 'info[eTelefax]' );
+						self::render_address_field( __( 'Mobile', 'siegel-umzugsliste' ), 'info[eMobil]' );
+						?>
+					</div>
 				</div>
+				<p class="required-note"><?php echo esc_html__( '* Required fields', 'siegel-umzugsliste' ); ?></p>
 			</div>
-			<p class="required-note"><?php echo esc_html__( '* Required fields', 'siegel-umzugsliste' ); ?></p>
+			<?php if ( defined( 'WP_DEBUG' ) && WP_DEBUG ) : ?>
+				<button type="button" id="dev-autofill" class="dev-autofill-btn">&#9881; Fill</button>
+				<script>
+				document.getElementById('dev-autofill').addEventListener('click', function() {
+					var fields = {
+						'bName':'Max Mustermann','bStrasse':'Musterstr. 12',
+						'bort':'10115 Berlin','bTelefon':'030 12345678',
+						'eName':'Erika Musterfrau','eStrasse':'Zielweg 5',
+						'eort':'80331 München','info[eE-Mail]':'test@example.com'
+					};
+					for (var n in fields) {
+						var el = document.querySelector('[name="'+n+'"]');
+						if (el) { el.value = fields[n]; el.dispatchEvent(new Event('input',{bubbles:true})); }
+					}
+					document.getElementById('wizard-next').click();
+				});
+				</script>
+			<?php endif; ?>
 		</div>
 		<?php
 	}
@@ -214,8 +244,8 @@ class Umzugsliste_Form_Renderer {
 		}
 		?>
 		<div class="wizard-step" data-step="<?php echo esc_attr( $step_num ); ?>">
-			<h2 class="step-title"><?php echo esc_html( $room_label ); ?></h2>
 			<div class="step-card">
+				<h2 class="step-title"><?php echo esc_html( $room_label ); ?></h2>
 				<div class="furniture-list" data-room="<?php echo esc_attr( $room_key ); ?>">
 					<?php
 					foreach ( $items as $item ) {
@@ -241,10 +271,10 @@ class Umzugsliste_Form_Renderer {
 		$rooms = Umzugsliste_Furniture_Data::get_rooms();
 		?>
 		<div class="wizard-step" data-step="5">
-			<h2 class="step-title"><?php echo esc_html( $rooms['bad'] ); ?> &amp; <?php echo esc_html( $rooms['kueche_esszimmer'] ); ?></h2>
-
 			<div class="step-card">
-				<h3><?php echo esc_html( $rooms['bad'] ); ?></h3>
+				<h2 class="step-title"><?php echo esc_html( $rooms['bad'] ); ?> &amp; <?php echo esc_html( $rooms['kueche_esszimmer'] ); ?></h2>
+				<div class="step-section">
+					<h3><?php echo esc_html( $rooms['bad'] ); ?></h3>
 				<div class="furniture-list" data-room="bad">
 					<?php
 					$bad_items = Umzugsliste_Furniture_Data::get_furniture_items( 'bad' );
@@ -258,23 +288,23 @@ class Umzugsliste_Form_Renderer {
 						<span class="room-totals-sep">&middot;</span>
 						<span class="room-total-cbm">0,00</span> <?php echo esc_html__( 'cbm', 'siegel-umzugsliste' ); ?>
 					</div>
+					</div>
 				</div>
-			</div>
-
-			<div class="step-card">
-				<h3><?php echo esc_html( $rooms['kueche_esszimmer'] ); ?></h3>
-				<div class="furniture-list" data-room="kueche_esszimmer">
-					<?php
-					$kueche_items = Umzugsliste_Furniture_Data::get_furniture_items( 'kueche_esszimmer' );
-					foreach ( $kueche_items as $item ) {
-						self::render_furniture_item( 'Kueche_Esszimmer', 'kueche_esszimmer', $item );
-					}
-					?>
-					<div class="room-totals" data-room="kueche_esszimmer">
-						<span class="room-total-label"><?php echo esc_html__( 'Total', 'siegel-umzugsliste' ) . ' ' . esc_html( $rooms['kueche_esszimmer'] ); ?>:</span>
-						<span class="room-total-quantity">0</span> <?php echo esc_html__( 'Items', 'siegel-umzugsliste' ); ?>
-						<span class="room-totals-sep">&middot;</span>
-						<span class="room-total-cbm">0,00</span> <?php echo esc_html__( 'cbm', 'siegel-umzugsliste' ); ?>
+				<div class="step-section">
+					<h3><?php echo esc_html( $rooms['kueche_esszimmer'] ); ?></h3>
+					<div class="furniture-list" data-room="kueche_esszimmer">
+						<?php
+						$kueche_items = Umzugsliste_Furniture_Data::get_furniture_items( 'kueche_esszimmer' );
+						foreach ( $kueche_items as $item ) {
+							self::render_furniture_item( 'Kueche_Esszimmer', 'kueche_esszimmer', $item );
+						}
+						?>
+						<div class="room-totals" data-room="kueche_esszimmer">
+							<span class="room-total-label"><?php echo esc_html__( 'Total', 'siegel-umzugsliste' ) . ' ' . esc_html( $rooms['kueche_esszimmer'] ); ?>:</span>
+							<span class="room-total-quantity">0</span> <?php echo esc_html__( 'Items', 'siegel-umzugsliste' ); ?>
+							<span class="room-totals-sep">&middot;</span>
+							<span class="room-total-cbm">0,00</span> <?php echo esc_html__( 'cbm', 'siegel-umzugsliste' ); ?>
+						</div>
 					</div>
 				</div>
 			</div>
@@ -289,27 +319,29 @@ class Umzugsliste_Form_Renderer {
 		$sections = Umzugsliste_Furniture_Data::get_additional_work();
 		?>
 		<div class="wizard-step" data-step="8">
-			<h2 class="step-title"><?php echo esc_html__( 'Additional Work', 'siegel-umzugsliste' ); ?></h2>
-
-			<?php foreach ( $sections as $section_key => $section_data ) : ?>
-				<div class="step-card">
-					<h3><?php echo esc_html( $section_data['label'] ); ?></h3>
-					<div class="additional-work-section" data-section="<?php echo esc_attr( $section_key ); ?>">
-						<?php
-						foreach ( $section_data['fields'] as $field ) {
-							$field_key  = self::get_field_key( $field );
-							$field_name = 'additional_work[' . $section_key . '][' . $field_key . ']';
-							self::render_additional_field( $field, $field_name, $field_key );
-						}
-						?>
-					</div>
-				</div>
-			<?php endforeach; ?>
-
 			<div class="step-card">
-				<h3><?php echo esc_html__( 'Other', 'siegel-umzugsliste' ); ?></h3>
-				<label for="sonstiges"><?php echo esc_html__( 'Additional notes or requests:', 'siegel-umzugsliste' ); ?></label>
-				<textarea name="sonstiges" id="sonstiges" rows="5" class="sonstiges-textarea" placeholder="<?php echo esc_attr__( 'Additional notes or requests...', 'siegel-umzugsliste' ); ?>"></textarea>
+				<h2 class="step-title"><?php echo esc_html__( 'Additional Work', 'siegel-umzugsliste' ); ?></h2>
+
+				<?php foreach ( $sections as $section_key => $section_data ) : ?>
+					<div class="step-section">
+						<h3><?php echo esc_html( $section_data['label'] ); ?></h3>
+						<div class="additional-work-section" data-section="<?php echo esc_attr( $section_key ); ?>">
+							<?php
+							foreach ( $section_data['fields'] as $field ) {
+								$field_key  = self::get_field_key( $field );
+								$field_name = 'additional_work[' . $section_key . '][' . $field_key . ']';
+								self::render_additional_field( $field, $field_name, $field_key );
+							}
+							?>
+						</div>
+					</div>
+				<?php endforeach; ?>
+
+				<div class="step-section">
+					<h3><?php echo esc_html__( 'Other', 'siegel-umzugsliste' ); ?></h3>
+					<label for="sonstiges"><?php echo esc_html__( 'Additional notes or requests:', 'siegel-umzugsliste' ); ?></label>
+					<textarea name="sonstiges" id="sonstiges" rows="5" class="sonstiges-textarea"></textarea>
+				</div>
 			</div>
 		</div>
 		<?php
@@ -324,15 +356,17 @@ class Umzugsliste_Form_Renderer {
 		$captcha = Umzugsliste_Captcha::get_instance();
 		?>
 		<div class="wizard-step" data-step="9">
-			<h2 class="step-title"><?php echo esc_html__( 'Summary', 'siegel-umzugsliste' ); ?></h2>
-			<div id="wizard-summary"></div>
-			<?php
-			if ( $captcha->is_enabled() ) {
-				echo '<div class="step-card">';
-				echo $captcha->render_widget();
-				echo '</div>';
-			}
-			?>
+			<div class="step-card">
+				<h2 class="step-title"><?php echo esc_html__( 'Summary', 'siegel-umzugsliste' ); ?></h2>
+				<div id="wizard-summary"></div>
+				<?php
+				if ( $captcha->is_enabled() ) {
+					echo '<div class="captcha-section">';
+					echo $captcha->render_widget();
+					echo '</div>';
+				}
+				?>
+			</div>
 			<?php wp_nonce_field( 'umzugsliste_submit', 'umzugsliste_nonce' ); ?>
 			<input type="hidden" name="umzugsliste_submit" value="1">
 			<input type="hidden" name="umzugsliste_form_id" value="<?php echo esc_attr( $form_id ); ?>">
@@ -398,10 +432,11 @@ class Umzugsliste_Form_Renderer {
 				<button type="button" class="qty-btn qty-plus" aria-label="<?php echo esc_attr__( 'Increase', 'siegel-umzugsliste' ); ?>">+</button>
 			</div>
 			<span class="item-name"><?php echo esc_html( $item_name ); ?></span>
-			<span class="item-cbm"><?php echo esc_html( str_replace( '.', ',', (string) $cbm ) ); ?></span>
+			<span class="item-cbm"><?php echo esc_html( str_replace( '.', ',', (string) $cbm ) ); ?> <?php echo esc_html__( 'cbm', 'siegel-umzugsliste' ); ?></span>
 			<input type="hidden" name="<?php echo esc_attr( $cbm_name ); ?>" value="<?php echo esc_attr( $cbm ); ?>">
 			<?php if ( $has_montage ) : ?>
 				<div class="montage-toggle">
+					<span class="montage-label"><?php echo esc_html__( 'Montage?', 'siegel-umzugsliste' ); ?></span>
 					<label class="radio-label"><input type="radio" name="<?php echo esc_attr( $montage_name ); ?>" value="nein" checked> <?php echo esc_html__( 'No', 'siegel-umzugsliste' ); ?></label>
 					<label class="radio-label"><input type="radio" name="<?php echo esc_attr( $montage_name ); ?>" value="ja"> <?php echo esc_html__( 'Yes', 'siegel-umzugsliste' ); ?></label>
 				</div>
--- a/includes/class-shortcode.php
+++ b/includes/class-shortcode.php
@@ -124,6 +124,15 @@ class Umzugsliste_Shortcode {
 			'quantityLabel'      => __( 'Qty', 'siegel-umzugsliste' ),
 			'cbmLabel'           => __( 'cbm', 'siegel-umzugsliste' ),
 		'summaryEdit'        => __( 'Edit', 'siegel-umzugsliste' ),
+		'summaryName'        => __( 'Name', 'siegel-umzugsliste' ),
+		'summaryStreet'      => __( 'Street', 'siegel-umzugsliste' ),
+		'summaryZipCity'     => __( 'ZIP/City', 'siegel-umzugsliste' ),
+		'summaryFloor'       => __( 'Floor', 'siegel-umzugsliste' ),
+		'summaryElevator'    => __( 'Elevator', 'siegel-umzugsliste' ),
+		'summaryPhone'       => __( 'Phone', 'siegel-umzugsliste' ),
+		'summaryFax'         => __( 'Fax', 'siegel-umzugsliste' ),
+		'summaryMobile'      => __( 'Mobile', 'siegel-umzugsliste' ),
+		'summaryEmail'       => __( 'Email', 'siegel-umzugsliste' ),
 		'stepLabel'          => __( 'Step', 'siegel-umzugsliste' ),
 		'stepOf'             => __( 'of', 'siegel-umzugsliste' ),
 		) );
--- a/languages/siegel-umzugsliste-de_DE.mo
+++ b/languages/siegel-umzugsliste-de_DE.mo
--- a/languages/siegel-umzugsliste-de_DE.po
+++ b/languages/siegel-umzugsliste-de_DE.po
@@ -1137,3 +1137,22 @@ msgstr "Mobil (Beladeadresse)"
 #: includes/class-cpt.php
 msgid "Mobile (Unloading)"
 msgstr "Mobil (Entladeadresse)"
+
+#: includes/class-shortcode.php
+#: templates/form-page.php
+msgid "Step"
+msgstr "Schritt"
+
+#: includes/class-shortcode.php
+#: templates/form-page.php
+msgid "of"
+msgstr "von"
+
+#: includes/class-shortcode.php
+#: templates/form-page.php
+msgid "Edit"
+msgstr "Bearbeiten"
+
+#: includes/class-form-renderer.php
+msgid "Montage?"
+msgstr "Montage?"
--- a/templates/form-page.php
+++ b/templates/form-page.php
@@ -41,6 +41,15 @@ $l10n_data = array(
 	'quantityLabel'      => __( 'Qty', 'siegel-umzugsliste' ),
 	'cbmLabel'           => __( 'cbm', 'siegel-umzugsliste' ),
 	'summaryEdit'        => __( 'Edit', 'siegel-umzugsliste' ),
+	'summaryName'        => __( 'Name', 'siegel-umzugsliste' ),
+	'summaryStreet'      => __( 'Street', 'siegel-umzugsliste' ),
+	'summaryZipCity'     => __( 'ZIP/City', 'siegel-umzugsliste' ),
+	'summaryFloor'       => __( 'Floor', 'siegel-umzugsliste' ),
+	'summaryElevator'    => __( 'Elevator', 'siegel-umzugsliste' ),
+	'summaryPhone'       => __( 'Phone', 'siegel-umzugsliste' ),
+	'summaryFax'         => __( 'Fax', 'siegel-umzugsliste' ),
+	'summaryMobile'      => __( 'Mobile', 'siegel-umzugsliste' ),
+	'summaryEmail'       => __( 'Email', 'siegel-umzugsliste' ),
 	'stepLabel'          => __( 'Step', 'siegel-umzugsliste' ),
 	'stepOf'             => __( 'of', 'siegel-umzugsliste' ),
 	'nonce'              => wp_create_nonce( 'umzugsliste_submit' ),