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>

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

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;
+  }
+}

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,
+  );
+}

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;
+  grid-template-columns: 100px 1fr;
-  gap: 0.5rem 1rem;
+  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 */
+/* ---- Notes ---- */
-.notesSection {
-  margin-top: 1.5rem;
-  padding-top: 1rem;
-  border-top: 1px solid var(--color-border);
-}
-
 .notesText {
   font-size: 0.875rem;
   color: var(--color-text-secondary);
   white-space: pre-wrap;
   line-height: 1.5;
+  margin: 0;
 }

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>
+          <div>
-          <span
+            <div className={styles.nameRow}>
-            style={{
+              <h1 className={styles.name}>{contactDisplayName(contact)}</h1>
-              display: 'inline-block',
+              <span
-              padding: '0.125rem 0.5rem',
+                style={{
-              borderRadius: '9999px',
+                  display: 'inline-block',
-              fontSize: '0.75rem',
+                  width: 8,
-              fontWeight: 500,
+                  height: 8,
-              background: TYPE_COLORS[contact.type].bg,
+                  borderRadius: '50%',
-              color: TYPE_COLORS[contact.type].color,
+                  background: contact.isActive
-            }}
+                    ? 'var(--color-success)'
-          >
+                    : 'var(--color-error)',
-            {TYPE_LABELS[contact.type]}
+                  flexShrink: 0,
-          </span>
+                }}
-          <span
+                title={contact.isActive ? 'Aktiv' : 'Inaktiv'}
-            style={{
+              />
-              display: 'inline-block',
+            </div>
-              width: 8,
+            {subtitle && (
-              height: 8,
+              <p className={styles.subtitle}>{subtitle}</p>
-              borderRadius: '50%',
+            )}
-              background: contact.isActive
+          </div>
-                ? 'var(--color-success)'
-                : 'var(--color-error)',
-            }}
-            title={contact.isActive ? 'Aktiv' : 'Inaktiv'}
-          />
         </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 && (
+            {/* Two sub-columns */}
-                <>
+            <div className={styles.infoColumns}>
-                  <span className={styles.infoLabel}>Vorname</span>
+              {/* Left: communication */}
-                  <span className={styles.infoValue}>{contact.firstName}</span>
+              <div className={styles.infoGrid}>
-                </>
+                {contact.email && (
-              )}
+                  <>
-              {contact.type === 'PERSON' && contact.lastName && (
+                    <span className={styles.infoLabel}>E-Mail</span>
-                <>
+                    <span className={styles.infoValue}>
-                  <span className={styles.infoLabel}>Nachname</span>
+                      <a
-                  <span className={styles.infoValue}>{contact.lastName}</span>
+                        href={`mailto:${contact.email}`}
-                </>
+                        style={{ color: 'var(--color-primary)' }}
-              )}
+                      >
-              {contact.companyName && (
+                        {contact.email}
-                <>
+                      </a>
-                  <span className={styles.infoLabel}>Firma</span>
+                    </span>
-                  <span className={styles.infoValue}>
+                  </>
-                    {contact.companyName}
+                )}
-                  </span>
+                {contact.phone && (
-                </>
+                  <>
-              )}
+                    <span className={styles.infoLabel}>Telefon</span>
-              {contact.company && (
+                    <span className={styles.infoValue}>{contact.phone}</span>
-                <>
+                  </>
-                  <span className={styles.infoLabel}>Unternehmen</span>
+                )}
-                  <span className={styles.infoValue}>
+                {contact.mobile && (
-                    <Link
+                  <>
-                      to={`/crm/companies/${contact.company.id}`}
+                    <span className={styles.infoLabel}>Mobil</span>
-                      style={{ color: 'var(--color-primary)' }}
+                    <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}
+                      {ENTITY_STATUS_LABELS[contact.status] ?? contact.status}
-                    </Link>
+                    </span>
-                    {contact.company.industry && (
+                  </>
-                      <span style={{ color: 'var(--color-text-muted)', marginLeft: '0.5rem', fontSize: '0.8125rem' }}>
+                )}
-                        ({contact.company.industry})
+              </div>
-                      </span>
+            </div>
-                    )}
+
-                  </span>
+            {/* Address — full-width below sub-columns */}
-                </>
+            {(contact.street || contact.zip || contact.city) && (
-              )}
+              <div className={styles.addressRow}>
-              {contact.position && (
+                <div className={styles.infoGrid}>
-                <>
-                  <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) && (
-                <>
                   <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
+                  <tr style={{ borderBottom: '1px solid var(--color-border)' }}>
-                    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={{
+                        style={{ padding: '0.5rem 0', fontSize: '0.875rem' }}
-                          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>