fix(crm): Kontaktdaten-Card zeigt alle Allgemein-Felder konstant

E-Mail, Telefon, Mobil, LinkedIn, Unternehmen, Position, Abteilung
werden immer angezeigt — leere Felder mit '—' Platzhalter

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

packages/frontend/src/crm/contacts/ContactDetailPage.module.css

@@ -176,6 +176,11 @@
   word-break: break-word;
 }
 
+.empty {
+  color: var(--color-text-muted);
+  opacity: 0.5;
+}
+
 /* ---- Address row (full-width below infoColumns) ---- */
 .addressRow {
   margin-top: 1rem;

packages/frontend/src/crm/contacts/ContactDetailPage.tsx

@@ -206,46 +206,36 @@ export function ContactDetailPage() {
           <div className={styles.card}>
             <h2 className={styles.cardTitle}>Kontaktdaten</h2>
 
-            {/* Two sub-columns */}
+            {/* Two sub-columns — always show all Allgemein fields */}
             <div className={styles.infoColumns}>
-              {/* Left: communication */}
+              {/* Left: Kommunikation */}
               <div className={styles.infoGrid}>
-                {contact.email && (
-                  <>
                 <span className={styles.infoLabel}>E-Mail</span>
                 <span className={styles.infoValue}>
-                      <a
+                  {contact.email ? (
-                        href={`mailto:${contact.email}`}
+                    <a href={`mailto:${contact.email}`} style={{ color: 'var(--color-primary)' }}>
-                        style={{ color: 'var(--color-primary)' }}
-                      >
                       {contact.email}
                     </a>
+                  ) : <span className={styles.empty}>—</span>}
                 </span>
-                  </>
+
-                )}
-                {contact.phone && (
-                  <>
                 <span className={styles.infoLabel}>Telefon</span>
-                    <span className={styles.infoValue}>{contact.phone}</span>
+                <span className={styles.infoValue}>
-                  </>
+                  {contact.phone ?? <span className={styles.empty}>—</span>}
-                )}
+                </span>
-                {contact.mobile && (
+
-                  <>
                 <span className={styles.infoLabel}>Mobil</span>
                 <span className={styles.infoValue}>
-                      <a
+                  {contact.mobile ? (
-                        href={`tel:${contact.mobile}`}
+                    <a href={`tel:${contact.mobile}`} style={{ color: 'var(--color-primary)' }}>
-                        style={{ color: 'var(--color-primary)' }}
-                      >
                       {contact.mobile}
                     </a>
+                  ) : <span className={styles.empty}>—</span>}
                 </span>
-                  </>
+
-                )}
-                {contact.linkedinUrl && (
-                  <>
                 <span className={styles.infoLabel}>LinkedIn</span>
                 <span className={styles.infoValue}>
+                  {contact.linkedinUrl ? (
                     <a
                       href={contact.linkedinUrl}
                       target="_blank"
@@ -258,9 +248,9 @@ export function ContactDetailPage() {
                         '',
                       )}
                     </a>
+                  ) : <span className={styles.empty}>—</span>}
                 </span>
-                  </>
+
-                )}
                 {contact.website && (
                   <>
                     <span className={styles.infoLabel}>Website</span>
@@ -278,12 +268,12 @@ export function ContactDetailPage() {
                 )}
               </div>
 
-              {/* Right: context */}
+              {/* Right: Kontext */}
               <div className={styles.infoGrid}>
-                {contact.company && (
-                  <>
                 <span className={styles.infoLabel}>Unternehmen</span>
                 <span className={styles.infoValue}>
+                  {contact.company ? (
+                    <>
                       <Link
                         to={`/crm/companies/${contact.company.id}`}
                         style={{ color: 'var(--color-primary)' }}
@@ -291,35 +281,24 @@ export function ContactDetailPage() {
                         {contact.company.name}
                       </Link>
                       {contact.company.industry && (
-                        <span
+                        <span style={{ color: 'var(--color-text-muted)', marginLeft: '0.5rem', fontSize: '0.8125rem' }}>
-                          style={{
-                            color: 'var(--color-text-muted)',
-                            marginLeft: '0.5rem',
-                            fontSize: '0.8125rem',
-                          }}
-                        >
                           ({contact.company.industry})
                         </span>
                       )}
-                    </span>
                     </>
-                )}
+                  ) : <span className={styles.empty}>—</span>}
-                {contact.position && (
+                </span>
-                  <>
+
                 <span className={styles.infoLabel}>Position</span>
                 <span className={styles.infoValue}>
-                      {contact.position}
+                  {contact.position ?? <span className={styles.empty}>—</span>}
                 </span>
-                  </>
+
-                )}
-                {contact.department && (
-                  <>
                 <span className={styles.infoLabel}>Abteilung</span>
                 <span className={styles.infoValue}>
-                      {contact.department}
+                  {contact.department ?? <span className={styles.empty}>—</span>}
                 </span>
-                  </>
+
-                )}
                 {contact.birthday && (
                   <>
                     <span className={styles.infoLabel}>Geburtsdatum</span>
@@ -341,12 +320,7 @@ export function ContactDetailPage() {
                     <span className={styles.infoLabel}>Status</span>
                     <span
                       className={styles.infoValue}
-                      style={{
+                      style={{ color: contact.status === 'BLOCKED' ? '#991b1b' : 'var(--color-text-muted)' }}
-                        color:
-                          contact.status === 'BLOCKED'
-                            ? '#991b1b'
-                            : 'var(--color-text-muted)',
-                      }}
                     >
                       {ENTITY_STATUS_LABELS[contact.status] ?? contact.status}
                     </span>
@@ -361,16 +335,9 @@ export function ContactDetailPage() {
                 <div className={styles.infoGrid}>
                   <span className={styles.infoLabel}>Adresse</span>
                   <span className={styles.infoValue}>
-                    {contact.street && (
+                    {contact.street && <>{contact.street}<br /></>}
-                      <>
-                        {contact.street}
-                        <br />
-                      </>
-                    )}
                     {contact.zip} {contact.city}
-                    {contact.country && contact.country !== 'DE' && (
+                    {contact.country && contact.country !== 'DE' && <>, {contact.country}</>}
-                      <>, {contact.country}</>
-                    )}
                   </span>
                 </div>
               </div>