Dialog: Esc nur fuer den obersten Dialog, Schliessen ohne Ereignis, Fokus zurueck auch nach autoFocus

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

src/components/ui/Dialog.jsx

@@ -2,10 +2,14 @@ import { useEffect, useId, useRef } from 'react'
 import { useDialogFocus } from '../../hooks/useDialogFocus'
 import { shouldCloseOnKey } from '../../lib/dialogKeys'
 
+// Alle gerade offenen Dialoge, der zuletzt geöffnete steht hinten: nur er reagiert auf Esc (sonst schlösse ein Esc auch die darunter liegenden)
+const openDialogs = []
+
 /**
  * Dialog: weiße Box auf abgedunkeltem Hintergrund, auf dem Handy als Bottom-Sheet (Regeln in global.css, .overlay/.dialog).
  * Schließen geht nur über × und Esc, ein Klick auf den Hintergrund tut nichts (lange Eingaben sollen nicht verloren gehen).
- * Solange `busy` gilt, wirken × und Esc nicht. Esc greift nur, wenn kein innerer Baustein die Taste schon behandelt hat
+ * Solange `busy` gilt, wirken × und Esc nicht. Liegen mehrere Dialoge übereinander, schließt Esc nur den obersten.
+ * Esc greift nur, wenn kein innerer Baustein die Taste schon behandelt hat
  * (z. B. schließt eine offene Vorschlagsliste zuerst sich selbst): React 18 verteilt seine Ereignisse am Wurzelelement, also vor
  * dem Listener auf `document`, und ein dortiges preventDefault() ist hier als `defaultPrevented` sichtbar.
  * Mit `as="form"` ist die Box ein <form onSubmit>; die native Pflichtfeld-Prüfung bleibt aktiv (kein noValidate).
@@ -23,12 +27,18 @@ export default function Dialog({ title, onClose, busy = false, wide = false, as
     latest.current = { busy, onClose }
   })
   useEffect(() => {
+    openDialogs.push(latest)
     const onKeyDown = (e) => {
+      if (openDialogs[openDialogs.length - 1] !== latest) return
       const { busy: isBusy, onClose: close } = latest.current
       if (shouldCloseOnKey(e, isBusy)) close()
     }
     document.addEventListener('keydown', onKeyDown)
-    return () => document.removeEventListener('keydown', onKeyDown)
+    return () => {
+      document.removeEventListener('keydown', onKeyDown)
+      const index = openDialogs.indexOf(latest)
+      if (index !== -1) openDialogs.splice(index, 1)
+    }
   }, [])
 
   return (
@@ -44,7 +54,7 @@ export default function Dialog({ title, onClose, busy = false, wide = false, as
       >
         <div className="dialog-head">
           <h3 id={titleId}>{title}</h3>
-          <button type="button" className="dialog-close" aria-label="Schließen" disabled={busy} onClick={onClose}>
+          <button type="button" className="dialog-close" aria-label="Schließen" disabled={busy} onClick={() => onClose()}>
             ×
           </button>
         </div>