Bankkarte: Beschreibung in Vertrags-Ansicht + Select anzeigen

ContractDetail: Bankkarten-Card zeigt jetzt die description
kursiv unter Bankname (whitespace-pre-line für mehrzeilige
Notizen).

ContractForm: Bankkarten-Select hängt die Beschreibung kompakt
an das Label an (Zeilenumbrüche flach, auf 60 Zeichen gecapped)
– hilft beim Unterscheiden mehrerer Karten desselben Kunden.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

frontend/src/pages/contracts/ContractDetail.tsx

@@ -2638,6 +2638,11 @@ export default function ContractDetail() {
               <CopyButton value={c.bankCard.iban} />
             </p>
             {c.bankCard.bankName && <p className="text-gray-500">{c.bankCard.bankName}</p>}
+            {c.bankCard.description && (
+              <p className="text-sm text-gray-600 mt-1 italic whitespace-pre-line">
+                {c.bankCard.description}
+              </p>
+            )}
           </Card>
         )}
         {c.identityDocument && (

frontend/src/pages/contracts/ContractForm.tsx

@@ -959,10 +959,18 @@ export default function ContractForm() {
                   </LabelWithLink>
                 }
                 {...register('bankCardId')}
-                options={bankCards.map((c) => ({
+                options={bankCards.map((c) => {
+                  // Beschreibung kompakt anhängen, damit man Karten am
+                  // Kontext unterscheiden kann (z.B. "Geschäftskonto").
+                  // Newlines flach machen, Länge cappen.
+                  const desc = c.description
+                    ? c.description.replace(/\s+/g, ' ').trim().slice(0, 60)
+                    : '';
+                  return {
                     value: c.id,
-                  label: `${c.iban} (${c.accountHolder})`,
-                }))}
+                    label: `${c.iban} (${c.accountHolder})${desc ? ` – ${desc}` : ''}`,
+                  };
+                })}
               />
 
               <Select