fixing style on summary page

assets/css/base.css

@@ -647,10 +647,10 @@ small {
 }
 
 .step-summary {
-  border: 1px solid var(--brand-border);
-  border-radius: 8px;
-  padding: 1rem;
-  background: var(--brand-surface-alt);
+  border: 0;
+  border-radius: 0;
+  padding: 0;
+  background: transparent;
 }
 
 .summary-missing-note {
@@ -671,56 +671,71 @@ small {
 
 .summary-content {
   display: grid;
-  gap: 0.85rem;
+  gap: 1rem;
+  min-width: 0;
 }
 
 .summary-step-card {
-  border: 1px solid var(--brand-border);
-  border-radius: 8px;
-  padding: 0.75rem;
-  background: var(--brand-surface);
+  border: 0;
+  border-radius: 0;
+  padding: 0;
+  background: transparent;
+  min-width: 0;
+}
+
+.summary-step-card + .summary-step-card {
+  margin-top: 0.35rem;
 }
 
 .summary-step-card h4 {
-  margin: 0 0 0.65rem;
+  margin: 0 0 0.75rem;
   font-size: 1rem;
+  overflow-wrap: anywhere;
+  word-break: break-word;
 }
 
 .summary-item {
-  margin-top: 0.55rem;
-  padding: 0.55rem 0.65rem;
-  border: 1px solid var(--brand-border);
-  border-radius: 6px;
-  background: var(--brand-surface-alt);
+  margin-top: 0;
+  min-width: 0;
 }
 
-.summary-item:first-of-type {
+.summary-step-card .summary-item + .summary-item {
   margin-top: 0;
 }
 
 .summary-item-required {
-  border-left: 4px solid rgba(202, 195, 0, 0.65);
+  border-left: 0;
 }
 
 .summary-item-missing {
-  border-color: rgba(193, 18, 31, 0.75);
-  border-left: 4px solid rgba(193, 18, 31, 0.95);
-  background: rgba(193, 18, 31, 0.1);
+  border: 0;
+  background: transparent;
 }
 
 .summary-item-label {
-  font-weight: 700;
-  margin-bottom: 0.25rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+  overflow-wrap: anywhere;
+  word-break: break-word;
 }
 
 .summary-item-value {
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  padding: 0.65rem 0.75rem;
+  border: 1px solid var(--brand-border);
+  border-radius: 4px;
+  background: var(--brand-surface-alt);
   font-size: 0.95rem;
   color: var(--brand-text);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  word-break: break-word;
 }
 
 .summary-item-value-multiline {
-  white-space: pre-wrap;
-  font-family: "Courier New", Courier, monospace;
+  font-family: inherit;
 }
 
 .summary-item-value-empty {
@@ -732,6 +747,15 @@ small {
   font-weight: 700;
 }
 
+.summary-item-missing .summary-item-label {
+  color: #ffd3d7;
+}
+
+.summary-item-missing .summary-item-value {
+  border-color: rgba(193, 18, 31, 0.75);
+  background: rgba(193, 18, 31, 0.1);
+}
+
 .summary-badge {
   display: inline-block;
   margin-left: 0.4rem;
@@ -740,6 +764,10 @@ small {
   border-radius: 999px;
   font-size: 0.75rem;
   font-weight: 700;
+  max-width: 100%;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  word-break: break-word;
 }
 
 .summary-badge-required {

assets/js/form.js

@@ -1067,8 +1067,8 @@
     introCard.appendChild(introTitle);
 
     const emailRow = document.createElement('div');
-    emailRow.className = 'summary-item';
-    const emailLabel = document.createElement('div');
+    emailRow.className = 'field summary-item';
+    const emailLabel = document.createElement('label');
     emailLabel.className = 'summary-item-label';
     emailLabel.textContent = 'E-Mail';
     const emailValue = document.createElement('div');
@@ -1101,7 +1101,7 @@
         }
 
         const row = document.createElement('div');
-        row.className = 'summary-item';
+        row.className = 'field summary-item';
         if (required) {
           row.classList.add('summary-item-required');
         }
@@ -1109,7 +1109,7 @@
           row.classList.add('summary-item-missing');
         }
 
-        const labelEl = document.createElement('div');
+        const labelEl = document.createElement('label');
         labelEl.className = 'summary-item-label';
         labelEl.textContent = String(field.label || field.key || 'Feld');
 

config/form_schema.php

@@ -227,7 +227,7 @@ return [
                     'type' => 'select',
                     'visible_if' => [
                         'field' => 'mitgliedsart',
-                        'equals' => 'aktiv'
+                        'equals' => 'Aktiv'
                     ],
                     'required' => true,
                     'options' => [