feat: redesign Step 8 with flat list layout matching room steps

Replace bordered card sections with flat rows using hairline dividers,
opacity dimming, and native radio controls to match the room step visual
pattern. Also includes structural refactors (step-sections, address-sections)
and running totals bar polish from the modernization branch.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

assets/css/form.css

@@ -183,19 +183,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 +255,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 +280,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;
@@ -514,7 +546,7 @@
 .item-cbm {
 	width: 52px;
 	text-align: right;
-	font-size: 0.85rem;
+	font-size: 13px;
 	color: var(--umzug-text-secondary);
 	flex-shrink: 0;
 }
@@ -526,7 +558,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 +666,76 @@
 	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;
+}
+
 /* ===== Sonstiges ===== */
 .sonstiges-textarea {
 	width: 100%;
@@ -839,6 +948,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;