feat(crm): UI/UX Redesign – Kontakt Eingabemaske & Detailansicht

- Neue Drawer-Komponente (right-side slide-in, sticky footer, Portal) - ContactFormModal: Modal → Drawer, Tab 1 Allgemein / Tab 2 Details & Adresse - Checkbox "Adresse vom Unternehmen übernehmen" (blendet Adressfelder aus) - Typ-Feld entfernt (Kontakte immer PERSON) - ContactDetailPage: Subtitle "Position @ Unternehmen" im Header - Kontaktdaten-Card: 2 Sub-Spalten, kein Firma-Duplikat, Mobil tel:-Link, LinkedIn-Icon - Neue Card "Notizen & Tags" (Badges + Notizen-Text + Custom Fields) - Aktivitäten-Spalte auf minmax(380px, 40%) verbreitert Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-24 23:56:40 +02:00 · 2026-03-12 20:20:30 +01:00 · 2026-03-12 20:20:30 +01:00 · ec9f3ea364
commit ec9f3ea364
parent fdab2d5bcb
6 changed files with 1073 additions and 651 deletions
--- a/Summarize.md
+++ b/Summarize.md
@ -1,11 +1,41 @@
 # INSIGHT MVP - Aenderungsprotokoll

-## Stand: 2026-03-08
+## Stand: 2026-03-12

 ### Aktueller Sprint: Sprint 1 (Alpha)

 ---

+### Aenderungen 2026-03-12: CRM UI/UX Redesign – Kontakt-Entitaet
+
+#### Drawer-Komponente (neu)
+- `packages/frontend/src/components/Drawer.tsx` – Wiederverwendbares Right-Side-Drawer-Pattern mit Portal, ESC-Key, Backdrop-Click, optionalem Footer
+- `packages/frontend/src/components/Drawer.module.css` – Animiertes Slide-In von rechts, sticky Header + Footer, scrollbarer Body
+
+#### ContactFormModal – Redesign (Modal → Drawer + Tabs)
+- Gewechselt von `<Modal>` (zentriert) zu `<Drawer>` (von rechts, 540px)
+- Zwei-Tab-Struktur:
+  - Tab "Allgemein": Vorname, Nachname, Unternehmen (Autocomplete), Position, Abteilung, E-Mail, Telefon, Mobil, LinkedIn
+  - Tab "Details & Adresse": Geburtsdatum, Quelle, Status, Website, Adresse, Notizen, Tags, Custom Fields
+- "Adresse vom Unternehmen uebernehmen" Checkbox: wird angezeigt wenn Unternehmen verlinkt ist; bei aktivierter Checkbox werden Adressfelder ausgeblendet und die Adresse wird aus dem verlinkten Unternehmen uebernommen
+- "Typ"-Feld entfernt (Kontakte sind immer Personen; ORGANIZATION-Typ bleibt intern erhalten)
+- Sticky Footer (Abbrechen / Anlegen|Speichern) via HTML5 `form` Attribut
+- Adress-Duplikate bereinigt
+
+#### ContactDetailPage – Redesign
+- **Header**: Subtitle "Position @ Unternehmen" unter dem Namen (z.B. "Geschaeftsfuehrerin @ team neusta SE"), Status-Dot inline
+- **Kontaktdaten-Card**: Zwei Sub-Spalten (Kommunikation links, Kontext rechts), Adresse als volle Breite darunter
+  - Entfernt: Vorname/Nachname (im Header), Firma-Duplikat (nur noch "Unternehmen" als Link)
+  - Hinzugefuegt: Mobil als `tel:`-Link, LinkedIn mit Icon, Geburtsdatum, Quelle, Abteilung
+- **Neue Card "Notizen & Tags"**: Tags als Badges, Notizen-Text, Custom Fields
+- **Layout**: Rechte Spalte (Aktivitaeten) auf `minmax(380px, 40%)` verbreitert (min. 1/3 fuer kuenftigen O365-Feed)
+- **CSS**: `.infoColumns` (2-spaltig), `.addressRow`, `.subtitle`, `.nameRow` neu
+
+#### TypeScript
+- `npx tsc --noEmit` in packages/frontend: 0 Fehler
+
+---
+
 ### Aenderungen in dieser Session

 #### 1. Projektinitialisierung & Infrastruktur-Definition
--- a/packages/frontend/src/components/Drawer.module.css
+++ b/packages/frontend/src/components/Drawer.module.css
@ -0,0 +1,97 @@
+/* ============================================================
+   Drawer – Right-side slide-in panel
+   ============================================================ */
+
+.overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  background: rgba(0, 0, 0, 0.4);
+  animation: fadeIn 0.2s ease-out;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+.panel {
+  position: fixed;
+  top: 0;
+  right: 0;
+  height: 100vh;
+  max-width: 100vw;
+  background: var(--color-bg-card, #fff);
+  box-shadow: -4px 0 32px rgba(0, 0, 0, 0.18);
+  display: flex;
+  flex-direction: column;
+  animation: slideIn 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@keyframes slideIn {
+  from { transform: translateX(100%); }
+  to   { transform: translateX(0); }
+}
+
+/* ---- Header ---- */
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1.25rem 1.5rem;
+  border-bottom: 1px solid var(--color-border, #e5e7eb);
+  flex-shrink: 0;
+  background: var(--color-bg-card, #fff);
+}
+
+.title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  margin: 0;
+  color: var(--color-text);
+}
+
+.closeButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  font-size: 1.5rem;
+  line-height: 1;
+  color: var(--color-text-muted, #9ca3af);
+  background: none;
+  border: none;
+  border-radius: var(--radius-sm, 4px);
+  cursor: pointer;
+  transition: all 0.15s;
+  flex-shrink: 0;
+}
+
+.closeButton:hover {
+  background: var(--color-bg, #f3f4f6);
+  color: var(--color-text, #111827);
+}
+
+/* ---- Body (scrollable) ---- */
+.body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1.5rem;
+  overscroll-behavior: contain;
+}
+
+/* ---- Footer (sticky) ---- */
+.footer {
+  padding: 1rem 1.5rem;
+  border-top: 1px solid var(--color-border, #e5e7eb);
+  flex-shrink: 0;
+  background: var(--color-bg-card, #fff);
+}
+
+/* ---- Responsive ---- */
+@media (max-width: 600px) {
+  .panel {
+    width: 100% !important;
+  }
+}
--- a/packages/frontend/src/components/Drawer.tsx
+++ b/packages/frontend/src/components/Drawer.tsx
@ -0,0 +1,69 @@
+import { useEffect, useCallback, type ReactNode } from 'react';
+import { createPortal } from 'react-dom';
+import styles from './Drawer.module.css';
+
+interface DrawerProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title: string;
+  children: ReactNode;
+  footer?: ReactNode;
+  width?: string;
+}
+
+export function Drawer({
+  isOpen,
+  onClose,
+  title,
+  children,
+  footer,
+  width = '520px',
+}: DrawerProps) {
+  const handleEscape = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    },
+    [onClose],
+  );
+
+  useEffect(() => {
+    if (isOpen) {
+      document.addEventListener('keydown', handleEscape);
+      document.body.style.overflow = 'hidden';
+    }
+    return () => {
+      document.removeEventListener('keydown', handleEscape);
+      document.body.style.overflow = '';
+    };
+  }, [isOpen, handleEscape]);
+
+  if (!isOpen) return null;
+
+  return createPortal(
+    <div className={styles.overlay} onClick={onClose}>
+      <div
+        className={styles.panel}
+        style={{ width }}
+        onClick={(e) => e.stopPropagation()}
+        role="dialog"
+        aria-modal="true"
+        aria-label={title}
+      >
+        <div className={styles.header}>
+          <h2 className={styles.title}>{title}</h2>
+          <button
+            type="button"
+            className={styles.closeButton}
+            onClick={onClose}
+            aria-label="Schließen"
+          >
+            ×
+          </button>
+        </div>
+        <div className={styles.body}>{children}</div>
+        {footer && <div className={styles.footer}>{footer}</div>}
+      </div>
+    </div>,
+    document.body,
+  );
+}
--- a/packages/frontend/src/crm/contacts/ContactDetailPage.module.css
+++ b/packages/frontend/src/crm/contacts/ContactDetailPage.module.css
@ -2,6 +2,7 @@
   ContactDetailPage – Layout & Komponenten
   ============================================================ */

+/* ---- Navigation ---- */
 .backLink {
  display: inline-flex;
  align-items: center;
@ -17,9 +18,10 @@
  color: var(--color-primary);
 }

+/* ---- Header ---- */
 .header {
  display: flex;
-  align-items: center;
+  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  gap: 1rem;
@ -28,8 +30,15 @@

 .headerLeft {
  display: flex;
-  align-items: center;
+  align-items: flex-start;
  gap: 0.75rem;
+  min-width: 0;
+}
+
+.nameRow {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
 }

 .name {
@ -39,19 +48,27 @@
  color: var(--color-text);
 }

+.subtitle {
+  font-size: 0.9375rem;
+  color: var(--color-text-muted);
+  margin: 0.2rem 0 0;
+}
+
+/* ---- Main layout ---- */
 .layout {
  display: grid;
-  grid-template-columns: 1fr 360px;
+  grid-template-columns: 1fr minmax(380px, 40%);
  gap: 1.5rem;
  align-items: start;
 }

-@media (max-width: 900px) {
+@media (max-width: 960px) {
  .layout {
    grid-template-columns: 1fr;
  }
 }

+/* ---- Card ---- */
 .card {
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
@ -67,16 +84,34 @@
  color: var(--color-text);
 }

+/* ---- Two-column info layout inside a card ---- */
+.infoColumns {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.25rem 2rem;
+  align-items: start;
+}
+
+@media (max-width: 640px) {
+  .infoColumns {
+    grid-template-columns: 1fr;
+    gap: 0;
+  }
+}
+
+/* ---- Info grid (label | value pairs) ---- */
 .infoGrid {
  display: grid;
-  grid-template-columns: 110px 1fr;
-  gap: 0.5rem 1rem;
+  grid-template-columns: 100px 1fr;
+  gap: 0.5rem 0.75rem;
  font-size: 0.875rem;
+  align-content: start;
 }

 .infoLabel {
  color: var(--color-text-muted);
  font-weight: 500;
+  padding-top: 0.0625rem; /* optical alignment */
 }

 .infoValue {
@ -84,7 +119,14 @@
  word-break: break-word;
 }

-/* Tags */
+/* ---- Address row (full-width below infoColumns) ---- */
+.addressRow {
+  margin-top: 1rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--color-border);
+}
+
+/* ---- Tags ---- */
 .tags {
  display: flex;
  flex-wrap: wrap;
@ -101,7 +143,7 @@
  font-weight: 500;
 }

-/* Timeline */
+/* ---- Timeline ---- */
 .timeline {
  display: flex;
  flex-direction: column;
@ -155,16 +197,11 @@
  white-space: pre-wrap;
 }

-/* Notes */
-.notesSection {
-  margin-top: 1.5rem;
-  padding-top: 1rem;
-  border-top: 1px solid var(--color-border);
-}
-
+/* ---- Notes ---- */
 .notesText {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  white-space: pre-wrap;
  line-height: 1.5;
+  margin: 0;
 }
--- a/packages/frontend/src/crm/contacts/ContactDetailPage.tsx
+++ b/packages/frontend/src/crm/contacts/ContactDetailPage.tsx
@ -6,20 +6,10 @@ import { ActivityFormModal } from '../activities/ActivityFormModal';
 import { Modal } from '../../components/Modal';
 import { LexwareSection } from '../lexware/LexwareSection';
 import { CustomFieldsDisplay } from '../CustomFieldsDisplay';
-import type { Contact, Activity, ActivityType, ContactType } from '../types';
+import type { Contact, Activity, ActivityType } from '../types';
 import { CONTACT_SOURCE_LABELS, ENTITY_STATUS_LABELS } from '../types';
 import styles from './ContactDetailPage.module.css';

-const TYPE_COLORS: Record<ContactType, { bg: string; color: string }> = {
-  PERSON: { bg: '#dbeafe', color: '#1e40af' },
-  ORGANIZATION: { bg: '#d1fae5', color: '#065f46' },
-};
-
-const TYPE_LABELS: Record<ContactType, string> = {
-  PERSON: 'Person',
-  ORGANIZATION: 'Organisation',
-};
-
 const ACTIVITY_TYPE_LABELS: Record<ActivityType, string> = {
  NOTE: 'Notiz',
  CALL: 'Anruf',
@ -73,6 +63,8 @@ function activityIcon(type: ActivityType): React.ReactNode {
          <rect x="1" y="1" width="14" height="14" rx="2" />
        </svg>
      );
+    default:
+      return null;
  }
 }

@ -96,6 +88,21 @@ const currencyFormatter = new Intl.NumberFormat('de-DE', {
  currency: 'EUR',
 });

+// LinkedIn icon SVG
+function LinkedInIcon() {
+  return (
+    <svg
+      width="13"
+      height="13"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      style={{ display: 'inline', verticalAlign: 'middle', marginRight: 4 }}
+    >
+      <path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.175-.431.573-.878 1.242-.878.877 0 1.228.67 1.228 1.652v3.847h2.4V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z" />
+    </svg>
+  );
+}
+
 export function ContactDetailPage() {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
@ -107,7 +114,7 @@ export function ContactDetailPage() {
  const [isActivityOpen, setActivityOpen] = useState(false);
  const [isDeleteOpen, setDeleteOpen] = useState(false);

-  if (isLoading) return <p>Laden...</p>;
+  if (isLoading) return <p>Laden…</p>;
  if (error || !data)
    return (
      <p style={{ color: 'var(--color-error)' }}>
@ -119,9 +126,14 @@ export function ContactDetailPage() {
  const activities: Activity[] = contact.activities ?? [];
  const deals = dealsData?.data ?? [];

+  // Subtitle: "Position @ Unternehmen"
+  const subtitle = [contact.position, contact.company?.name]
+    .filter(Boolean)
+    .join(' @ ');
+
  return (
    <div>
-      {/* Zurück */}
+      {/* Back link */}
      <Link to="/crm/contacts" className={styles.backLink}>
        <svg
          width="14"
@ -136,37 +148,32 @@ export function ContactDetailPage() {
        Zurück zu Kontakte
      </Link>

-      {/* Header */}
+      {/* ── Header ── */}
      <div className={styles.header}>
        <div className={styles.headerLeft}>
-          <h1 className={styles.name}>{contactDisplayName(contact)}</h1>
-          <span
-            style={{
-              display: 'inline-block',
-              padding: '0.125rem 0.5rem',
-              borderRadius: '9999px',
-              fontSize: '0.75rem',
-              fontWeight: 500,
-              background: TYPE_COLORS[contact.type].bg,
-              color: TYPE_COLORS[contact.type].color,
-            }}
-          >
-            {TYPE_LABELS[contact.type]}
-          </span>
-          <span
-            style={{
-              display: 'inline-block',
-              width: 8,
-              height: 8,
-              borderRadius: '50%',
-              background: contact.isActive
-                ? 'var(--color-success)'
-                : 'var(--color-error)',
-            }}
-            title={contact.isActive ? 'Aktiv' : 'Inaktiv'}
-          />
+          <div>
+            <div className={styles.nameRow}>
+              <h1 className={styles.name}>{contactDisplayName(contact)}</h1>
+              <span
+                style={{
+                  display: 'inline-block',
+                  width: 8,
+                  height: 8,
+                  borderRadius: '50%',
+                  background: contact.isActive
+                    ? 'var(--color-success)'
+                    : 'var(--color-error)',
+                  flexShrink: 0,
+                }}
+                title={contact.isActive ? 'Aktiv' : 'Inaktiv'}
+              />
+            </div>
+            {subtitle && (
+              <p className={styles.subtitle}>{subtitle}</p>
+            )}
+          </div>
        </div>
-        <div style={{ display: 'flex', gap: '0.5rem' }}>
+        <div style={{ display: 'flex', gap: '0.5rem', flexShrink: 0 }}>
          <button
            onClick={() => setEditOpen(true)}
            style={{
@ -198,198 +205,226 @@ export function ContactDetailPage() {
        </div>
      </div>

-      {/* 2-Spalten Layout */}
+      {/* ── Two-column layout ── */}
      <div className={styles.layout}>
-        {/* Links: Info + Deals */}
+        {/* ── Left column ── */}
        <div>
-          {/* Info Card */}
+          {/* Contact data card */}
          <div className={styles.card}>
            <h2 className={styles.cardTitle}>Kontaktdaten</h2>
-            <div className={styles.infoGrid}>
-              {contact.type === 'PERSON' && contact.firstName && (
-                <>
-                  <span className={styles.infoLabel}>Vorname</span>
-                  <span className={styles.infoValue}>{contact.firstName}</span>
-                </>
-              )}
-              {contact.type === 'PERSON' && contact.lastName && (
-                <>
-                  <span className={styles.infoLabel}>Nachname</span>
-                  <span className={styles.infoValue}>{contact.lastName}</span>
-                </>
-              )}
-              {contact.companyName && (
-                <>
-                  <span className={styles.infoLabel}>Firma</span>
-                  <span className={styles.infoValue}>
-                    {contact.companyName}
-                  </span>
-                </>
-              )}
-              {contact.company && (
-                <>
-                  <span className={styles.infoLabel}>Unternehmen</span>
-                  <span className={styles.infoValue}>
-                    <Link
-                      to={`/crm/companies/${contact.company.id}`}
-                      style={{ color: 'var(--color-primary)' }}
+
+            {/* Two sub-columns */}
+            <div className={styles.infoColumns}>
+              {/* Left: communication */}
+              <div className={styles.infoGrid}>
+                {contact.email && (
+                  <>
+                    <span className={styles.infoLabel}>E-Mail</span>
+                    <span className={styles.infoValue}>
+                      <a
+                        href={`mailto:${contact.email}`}
+                        style={{ color: 'var(--color-primary)' }}
+                      >
+                        {contact.email}
+                      </a>
+                    </span>
+                  </>
+                )}
+                {contact.phone && (
+                  <>
+                    <span className={styles.infoLabel}>Telefon</span>
+                    <span className={styles.infoValue}>{contact.phone}</span>
+                  </>
+                )}
+                {contact.mobile && (
+                  <>
+                    <span className={styles.infoLabel}>Mobil</span>
+                    <span className={styles.infoValue}>
+                      <a
+                        href={`tel:${contact.mobile}`}
+                        style={{ color: 'var(--color-primary)' }}
+                      >
+                        {contact.mobile}
+                      </a>
+                    </span>
+                  </>
+                )}
+                {contact.linkedinUrl && (
+                  <>
+                    <span className={styles.infoLabel}>LinkedIn</span>
+                    <span className={styles.infoValue}>
+                      <a
+                        href={contact.linkedinUrl}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        style={{ color: 'var(--color-primary)' }}
+                      >
+                        <LinkedInIcon />
+                        {contact.linkedinUrl.replace(
+                          /^https?:\/\/(www\.)?linkedin\.com\/in\//,
+                          '',
+                        )}
+                      </a>
+                    </span>
+                  </>
+                )}
+                {contact.website && (
+                  <>
+                    <span className={styles.infoLabel}>Website</span>
+                    <span className={styles.infoValue}>
+                      <a
+                        href={contact.website}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        style={{ color: 'var(--color-primary)' }}
+                      >
+                        {contact.website}
+                      </a>
+                    </span>
+                  </>
+                )}
+              </div>
+
+              {/* Right: context */}
+              <div className={styles.infoGrid}>
+                {contact.company && (
+                  <>
+                    <span className={styles.infoLabel}>Unternehmen</span>
+                    <span className={styles.infoValue}>
+                      <Link
+                        to={`/crm/companies/${contact.company.id}`}
+                        style={{ color: 'var(--color-primary)' }}
+                      >
+                        {contact.company.name}
+                      </Link>
+                      {contact.company.industry && (
+                        <span
+                          style={{
+                            color: 'var(--color-text-muted)',
+                            marginLeft: '0.5rem',
+                            fontSize: '0.8125rem',
+                          }}
+                        >
+                          ({contact.company.industry})
+                        </span>
+                      )}
+                    </span>
+                  </>
+                )}
+                {contact.position && (
+                  <>
+                    <span className={styles.infoLabel}>Position</span>
+                    <span className={styles.infoValue}>
+                      {contact.position}
+                    </span>
+                  </>
+                )}
+                {contact.department && (
+                  <>
+                    <span className={styles.infoLabel}>Abteilung</span>
+                    <span className={styles.infoValue}>
+                      {contact.department}
+                    </span>
+                  </>
+                )}
+                {contact.birthday && (
+                  <>
+                    <span className={styles.infoLabel}>Geburtsdatum</span>
+                    <span className={styles.infoValue}>
+                      {new Date(contact.birthday).toLocaleDateString('de-DE')}
+                    </span>
+                  </>
+                )}
+                {contact.source && (
+                  <>
+                    <span className={styles.infoLabel}>Quelle</span>
+                    <span className={styles.infoValue}>
+                      {CONTACT_SOURCE_LABELS[contact.source] ?? contact.source}
+                    </span>
+                  </>
+                )}
+                {contact.status && contact.status !== 'ACTIVE' && (
+                  <>
+                    <span className={styles.infoLabel}>Status</span>
+                    <span
+                      className={styles.infoValue}
+                      style={{
+                        color:
+                          contact.status === 'BLOCKED'
+                            ? '#991b1b'
+                            : 'var(--color-text-muted)',
+                      }}
                    >
-                      {contact.company.name}
-                    </Link>
-                    {contact.company.industry && (
-                      <span style={{ color: 'var(--color-text-muted)', marginLeft: '0.5rem', fontSize: '0.8125rem' }}>
-                        ({contact.company.industry})
-                      </span>
-                    )}
-                  </span>
-                </>
-              )}
-              {contact.position && (
-                <>
-                  <span className={styles.infoLabel}>Position</span>
-                  <span className={styles.infoValue}>{contact.position}</span>
-                </>
-              )}
-              {contact.email && (
-                <>
-                  <span className={styles.infoLabel}>E-Mail</span>
-                  <span className={styles.infoValue}>
-                    <a
-                      href={`mailto:${contact.email}`}
-                      style={{ color: 'var(--color-primary)' }}
-                    >
-                      {contact.email}
-                    </a>
-                  </span>
-                </>
-              )}
-              {contact.phone && (
-                <>
-                  <span className={styles.infoLabel}>Telefon</span>
-                  <span className={styles.infoValue}>{contact.phone}</span>
-                </>
-              )}
-              {contact.mobile && (
-                <>
-                  <span className={styles.infoLabel}>Mobil</span>
-                  <span className={styles.infoValue}>{contact.mobile}</span>
-                </>
-              )}
-              {contact.website && (
-                <>
-                  <span className={styles.infoLabel}>Website</span>
-                  <span className={styles.infoValue}>
-                    <a
-                      href={contact.website}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      style={{ color: 'var(--color-primary)' }}
-                    >
-                      {contact.website}
-                    </a>
-                  </span>
-                </>
-              )}
-              {contact.linkedinUrl && (
-                <>
-                  <span className={styles.infoLabel}>LinkedIn</span>
-                  <span className={styles.infoValue}>
-                    <a
-                      href={contact.linkedinUrl}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      style={{ color: 'var(--color-primary)' }}
-                    >
-                      {contact.linkedinUrl.replace(/^https?:\/\/(www\.)?linkedin\.com\/in\//, '')}
-                    </a>
-                  </span>
-                </>
-              )}
-              {contact.department && (
-                <>
-                  <span className={styles.infoLabel}>Abteilung</span>
-                  <span className={styles.infoValue}>{contact.department}</span>
-                </>
-              )}
-              {contact.birthday && (
-                <>
-                  <span className={styles.infoLabel}>Geburtstag</span>
-                  <span className={styles.infoValue}>
-                    {new Date(contact.birthday).toLocaleDateString('de-DE')}
-                  </span>
-                </>
-              )}
-              {contact.source && (
-                <>
-                  <span className={styles.infoLabel}>Quelle</span>
-                  <span className={styles.infoValue}>
-                    {CONTACT_SOURCE_LABELS[contact.source] ?? contact.source}
-                  </span>
-                </>
-              )}
-              {contact.status && contact.status !== 'ACTIVE' && (
-                <>
-                  <span className={styles.infoLabel}>Status</span>
-                  <span className={styles.infoValue} style={{
-                    color: contact.status === 'BLOCKED' ? '#991b1b' : 'var(--color-text-muted)',
-                  }}>
-                    {ENTITY_STATUS_LABELS[contact.status] ?? contact.status}
-                  </span>
-                </>
-              )}
-              {(contact.street || contact.zip || contact.city) && (
-                <>
+                      {ENTITY_STATUS_LABELS[contact.status] ?? contact.status}
+                    </span>
+                  </>
+                )}
+              </div>
+            </div>
+
+            {/* Address — full-width below sub-columns */}
+            {(contact.street || contact.zip || contact.city) && (
+              <div className={styles.addressRow}>
+                <div className={styles.infoGrid}>
                  <span className={styles.infoLabel}>Adresse</span>
                  <span className={styles.infoValue}>
-                    {contact.street && <>{contact.street}<br /></>}
+                    {contact.street && (
+                      <>
+                        {contact.street}
+                        <br />
+                      </>
+                    )}
                    {contact.zip} {contact.city}
                    {contact.country && contact.country !== 'DE' && (
                      <>, {contact.country}</>
                    )}
                  </span>
-                </>
-              )}
-            </div>
-
-            {/* Tags */}
-            {contact.tags && contact.tags.length > 0 && (
-              <div style={{ marginTop: '1rem' }}>
-                <span
-                  className={styles.infoLabel}
-                  style={{ display: 'block', marginBottom: '0.375rem' }}
-                >
-                  Tags
-                </span>
-                <div className={styles.tags}>
-                  {contact.tags.map((tag) => (
-                    <span key={tag} className={styles.tag}>
-                      {tag}
-                    </span>
-                  ))}
                </div>
              </div>
            )}
-
-            {/* Notizen */}
-            {contact.notes && (
-              <div className={styles.notesSection}>
-                <span
-                  className={styles.infoLabel}
-                  style={{ display: 'block', marginBottom: '0.375rem' }}
-                >
-                  Notizen
-                </span>
-                <p className={styles.notesText}>{contact.notes}</p>
-              </div>
-            )}
-
-            {/* Custom Fields */}
-            {contact.customFields && contact.customFields.length > 0 && (
-              <CustomFieldsDisplay fields={contact.customFields} />
-            )}
          </div>

-          {/* Verknüpfte Vorgänge */}
+          {/* Notizen & Tags card */}
+          {((contact.tags && contact.tags.length > 0) ||
+            contact.notes ||
+            (contact.customFields && contact.customFields.length > 0)) && (
+            <div className={styles.card} style={{ marginTop: '1.5rem' }}>
+              <h2 className={styles.cardTitle}>Notizen &amp; Tags</h2>
+
+              {contact.tags && contact.tags.length > 0 && (
+                <div
+                  style={{
+                    marginBottom: contact.notes ? '1rem' : 0,
+                  }}
+                >
+                  <div className={styles.tags}>
+                    {contact.tags.map((tag) => (
+                      <span key={tag} className={styles.tag}>
+                        {tag}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {contact.notes && (
+                <p
+                  className={styles.notesText}
+                  style={{ marginTop: contact.tags?.length ? '0.75rem' : 0 }}
+                >
+                  {contact.notes}
+                </p>
+              )}
+
+              {contact.customFields && contact.customFields.length > 0 && (
+                <div style={{ marginTop: '1rem' }}>
+                  <CustomFieldsDisplay fields={contact.customFields} />
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* Linked deals */}
          {deals.length > 0 && (
            <div className={styles.card} style={{ marginTop: '1.5rem' }}>
              <h2 className={styles.cardTitle}>
@ -397,11 +432,7 @@ export function ContactDetailPage() {
              </h2>
              <table style={{ width: '100%', borderCollapse: 'collapse' }}>
                <thead>
-                  <tr
-                    style={{
-                      borderBottom: '1px solid var(--color-border)',
-                    }}
-                  >
+                  <tr style={{ borderBottom: '1px solid var(--color-border)' }}>
                    <th
                      style={{
                        padding: '0.5rem 0',
@ -448,10 +479,7 @@ export function ContactDetailPage() {
                      onClick={() => navigate(`/crm/deals/${deal.id}`)}
                    >
                      <td
-                        style={{
-                          padding: '0.5rem 0',
-                          fontSize: '0.875rem',
-                        }}
+                        style={{ padding: '0.5rem 0', fontSize: '0.875rem' }}
                      >
                        {deal.title}
                      </td>
@ -508,7 +536,7 @@ export function ContactDetailPage() {
          </div>
        </div>

-        {/* Rechts: Aktivitäten-Timeline */}
+        {/* ── Right column: Activities ── */}
        <div className={styles.card}>
          <div
            style={{
@ -555,7 +583,9 @@ export function ContactDetailPage() {
                    {activityIcon(act.type)}
                  </div>
                  <div className={styles.timelineContent}>
-                    <div className={styles.timelineSubject}>{act.subject}</div>
+                    <div className={styles.timelineSubject}>
+                      {act.subject}
+                    </div>
                    <div className={styles.timelineMeta}>
                      {ACTIVITY_TYPE_LABELS[act.type]} &middot;{' '}
                      {formatDate(act.createdAt)}
@ -573,7 +603,7 @@ export function ContactDetailPage() {
        </div>
      </div>

-      {/* Modals */}
+      {/* ── Modals ── */}
      <ContactFormModal
        isOpen={isEditOpen}
        onClose={() => setEditOpen(false)}
@ -588,7 +618,7 @@ export function ContactDetailPage() {
        onSuccess={() => setActivityOpen(false)}
      />

-      {/* Löschen-Modal */}
+      {/* Delete confirmation */}
      <Modal
        isOpen={isDeleteOpen}
        onClose={() => setDeleteOpen(false)}
@ -656,7 +686,7 @@ export function ContactDetailPage() {
              opacity: deleteMutation.isPending ? 0.7 : 1,
            }}
          >
-            {deleteMutation.isPending ? 'Löschen...' : 'Endgültig löschen'}
+            {deleteMutation.isPending ? 'Löschen…' : 'Endgültig löschen'}
          </button>
        </div>
      </Modal>
--- a/packages/frontend/src/crm/contacts/ContactFormModal.tsx
+++ b/packages/frontend/src/crm/contacts/ContactFormModal.tsx