Den Notfallkontakt wie die Angehoerigen darstellen

Beide Abschnitte stehen im selben Reiter und zeigen dasselbe: Personen im
Umfeld. Die Angehoerigen standen in einer Tabelle, der Notfallkontakt in
einer Beschreibungsliste -- zwei Baustile untereinander, ohne dass ein
Unterschied in der Sache dahintersteht.

Jetzt dieselbe Tabelle mit denselben Spaltenkoepfen, und Aendern und
Entfernen als Symbole in der Zeile, wie dort das Entfernen. Der Knopf
"+ Hinzufuegen" steht nur, solange kein Kontakt hinterlegt ist: es gibt
genau einen, und ein Knopf daneben verspraeche eine Liste. Die
Telefonnummer bleibt waehlbar.

components/employees/NotfallkontaktSection.tsx

@@ -51,24 +51,63 @@ export function NotfallkontaktSection({ employeeId, kontakt }: { employeeId: str
     <div className="border-t border-border pt-6">
       <div className="mb-3 flex items-center justify-between">
         <h3 className="text-xs font-bold uppercase tracking-wide text-brand-700">Notfallkontakt</h3>
-        <div className="flex items-center gap-4">
+        {/* Nur, solange keiner hinterlegt ist: es gibt genau einen. Ein
+            zweites „Hinzufügen" daneben verspräche eine Liste, die es hier
+            nicht gibt — geändert und entfernt wird in der Zeile selbst. */}
+        {!vorhanden && (
           <Button
             variant="ghost"
             size="sm"
             onClick={() => setModalOpen(true)}
             className="!px-1 text-brand-700 hover:!bg-transparent hover:underline"
           >
-            {vorhanden ? (
-              <>
-                <Pencil className="h-3.5 w-3.5" /> Ändern
-              </>
-            ) : (
-              <>
             <Plus className="h-3.5 w-3.5" /> Hinzufügen
-              </>
-            )}
           </Button>
-          {vorhanden && (
+        )}
+      </div>
+
+      {/* Dieselbe Tabelle wie bei den Angehörigen darüber, Zeile für Zeile
+          derselbe Aufbau. Vorher stand hier eine Beschreibungsliste — fachlich
+          dasselbe, optisch ein zweiter Baustil im selben Reiter. Zwei Listen
+          von Personen im Umfeld sollen gleich aussehen. */}
+      {vorhanden ? (
+        <div className="overflow-x-auto rounded border border-border">
+          <table className="w-full min-w-[600px] text-sm">
+            <thead>
+              <tr className="border-b border-border bg-accent-50 text-left text-xs font-semibold uppercase tracking-wide text-ink-muted">
+                <th className="px-4 py-2.5">Name</th>
+                <th className="px-4 py-2.5">Telefon</th>
+                <th className="px-4 py-2.5">Verhältnis</th>
+                <th className="px-4 py-2.5" />
+              </tr>
+            </thead>
+            <tbody>
+              <tr className="border-b border-border last:border-0">
+                <td className="px-4 py-2.5 font-semibold text-ink">{kontakt.name}</td>
+                <td className="px-4 py-2.5 text-ink-body">
+                  {kontakt.telefon ? (
+                    // Wählbar: im Ernstfall greift jemand in Eile danach.
+                    <a
+                      href={`tel:${kontakt.telefon.replace(/\s/g, "")}`}
+                      className="rounded font-semibold hover:text-brand-700 hover:underline
+                                 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-500"
+                    >
+                      {kontakt.telefon}
+                    </a>
+                  ) : (
+                    "–"
+                  )}
+                </td>
+                <td className="px-4 py-2.5 text-ink-body">{kontakt.verhaeltnis || "–"}</td>
+                <td className="px-4 py-2.5 text-right">
+                  <Button
+                    variant="icon"
+                    onClick={() => setModalOpen(true)}
+                    aria-label="Notfallkontakt ändern"
+                    className="hover:!text-brand-700"
+                  >
+                    <Pencil className="h-3.5 w-3.5" />
+                  </Button>
                   <Button
                     variant="icon"
                     onClick={handleEntfernen}
@@ -78,36 +117,11 @@ export function NotfallkontaktSection({ employeeId, kontakt }: { employeeId: str
                   >
                     <Trash2 className="h-3.5 w-3.5" />
                   </Button>
-          )}
+                </td>
+              </tr>
+            </tbody>
+          </table>
         </div>
-      </div>
-
-      {vorhanden ? (
-        <dl className="grid grid-cols-1 gap-x-8 gap-y-4 sm:grid-cols-2 lg:grid-cols-3">
-          <div>
-            <dt className="text-xs font-semibold uppercase tracking-wide text-ink-muted">Name</dt>
-            <dd className="mt-1 text-sm text-ink">{kontakt.name}</dd>
-          </div>
-          <div>
-            <dt className="text-xs font-semibold uppercase tracking-wide text-ink-muted">Telefon</dt>
-            <dd className="mt-1 text-sm font-semibold text-ink">
-              {kontakt.telefon ? (
-                <a
-                  href={`tel:${kontakt.telefon.replace(/\s/g, "")}`}
-                  className="rounded hover:text-brand-700 hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-500"
-                >
-                  {kontakt.telefon}
-                </a>
-              ) : (
-                "–"
-              )}
-            </dd>
-          </div>
-          <div>
-            <dt className="text-xs font-semibold uppercase tracking-wide text-ink-muted">Verhältnis</dt>
-            <dd className="mt-1 text-sm text-ink">{kontakt.verhaeltnis || "–"}</dd>
-          </div>
-        </dl>
       ) : (
         <p className="text-sm text-ink-muted">Kein Notfallkontakt hinterlegt.</p>
       )}