fix(quick-260921-jt4): calendar-settings-panel Loeschdialog-Hintergrund wird echte Schaltflaeche

- Zentrierbehaelter verliert den e.target===e.currentTarget-Handler,
  die Hintergrundfarbe wandert auf eine eigene benannte <button> (D-01)
- Muss abbrechen, darf niemals loeschen (T-JT4-04): Beschriftung nennt
  ausdruecklich das Abbrechen (widgets.calendar.deleteDialogCancel)
- Dialogkarte bekommt relative, aria-label des alertdialog aus dem
  Katalog statt fest verdrahtetem Englisch (deleteDialogLabel)
- Neue Testdatei belegt per Klick UND echter Tastaturbetaetigung, dass
  der Hintergrundweg abbricht und deleteSource nie aufgerufen wird;
  eigener Test fuer den tatsaechlichen Loeschweg ueber die CTA

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TPPB4ApQxzSU1rwV2Ffj9J

apps/web/src/components/settings/calendar-settings-panel.tsx

@@ -370,17 +370,21 @@ export function CalendarSettingsPanel() {
 
       {/* Delete confirmation dialog (UI-SPEC destructive pattern) */}
       {deletingId && (
-        <div
-          className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
-          onClick={(e) => {
-            if (e.target === e.currentTarget) setDeletingId(null);
-          }}
-        >
+        <div className="fixed inset-0 z-50 flex items-center justify-center">
+          {/* Hintergrund — jetzt eine echte, benannte Schaltflaeche. Sie MUSS
+              abbrechen und darf unter keinen Umstaenden loeschen (T-JT4-04). */}
+          <button
+            type="button"
+            onClick={() => setDeletingId(null)}
+            aria-label={t('calendar.deleteDialogCancel')}
+            className="fixed inset-0 bg-black/50"
+          />
+
           <div
-            className="mx-4 max-w-md rounded-lg border border-border bg-card p-6 shadow-xl"
+            className="relative mx-4 max-w-md rounded-lg border border-border bg-card p-6 shadow-xl"
             role="alertdialog"
             aria-modal="true"
-            aria-label="Confirm deletion"
+            aria-label={t('calendar.deleteDialogLabel')}
           >
             <h3 className="mb-2 text-lg font-semibold text-foreground">
               {ts('sourceDeleteCta')}