'Senden'-Button kam zu früh - ist behoben

Anleitung als HTML extern

src/App.jsx

@@ -235,15 +235,15 @@ function AppContent() {
     // LastButtons IMMER anzeigen, aber Senden-Button nur wenn bereit
     const sendenBereit = () => {
       if (pfad === 'ja') {
-        // JA-Pfad: vollständig wenn Bemerkungen-Schritt erreicht
+        // JA-Pfad: vollständig wenn Bemerkungen-Schritt ABGESCHLOSSEN ist
         const bemerkungsSchritt = (formData.spendenArt === 'bar') ? 4 : 3
-        return schritt >= bemerkungsSchritt
+        return schritt > bemerkungsSchritt  // NACH dem Bemerkungsschritt, nicht beim Erreichen
       } else if (pfad === 'nein') {
         // NEIN-Pfad: vollständig wenn abgesagt ODER verschoben mit Datum
         if (formData.abgesagt === 'abgesagt') {
-          return schritt >= 2
+          return schritt >= 2  // Beim Erreichen von Schritt 2 (nach Auswahl abgesagt)
         } else if (formData.abgesagt === 'verschoben') {
-          return schritt >= 3 && formData.neuesDatum
+          return schritt >= 3 && formData.neuesDatum  // Beim Erreichen von Schritt 3 mit Datum
         }
       }
       return false

src/components/LastButtons.jsx

@@ -10,6 +10,7 @@ export default function LastButtons({ mitSend, mitBack, handleBack}) {
     const [showModal, setShowModal] = useState(false)
     const [modalMessage, setModalMessage] = useState('')
     const [modalType, setModalType] = useState('error') // 'error' oder 'success'
+    const [isModalHtml, setIsModalHtml] = useState(false)
     const [showConfirmModal, setShowConfirmModal] = useState(false)
     const [isSuccessModal, setIsSuccessModal] = useState(false)
 
@@ -122,7 +123,7 @@ export default function LastButtons({ mitSend, mitBack, handleBack}) {
                 // Versuche JSON zu parsen
                 result = JSON.parse(responseText)
                 console.log('Backend Response (parsed):', result)
-            } catch (e) {
+            } catch {
                 // Falls kein JSON, behandle als einfachen Text
                 console.log('Backend Response ist kein JSON, behandle als Text')
                 result = { success: responseText.trim() === 'true', raw: responseText }
@@ -178,8 +179,23 @@ export default function LastButtons({ mitSend, mitBack, handleBack}) {
     }
 
     const handleAnleitung = () => {
-        setModalType('info')
-        setModalMessage(`
+        // Öffne die HTML-Anleitung in einem neuen Fenster/Tab
+        const anleitungUrl = '/anleitung.html'
+        const windowFeatures = 'width=800,height=600,scrollbars=yes,resizable=yes,toolbar=no,menubar=no,location=no'
+        
+        try {
+            // Versuche ein Popup-Fenster zu öffnen
+            const anleitungWindow = window.open(anleitungUrl, 'anleitung', windowFeatures)
+            
+            // Fallback: Wenn Popup blockiert wird, öffne in neuem Tab
+            if (!anleitungWindow) {
+                window.open(anleitungUrl, '_blank')
+            }
+        } catch (error) {
+            // Letzter Fallback: Als Modal anzeigen
+            console.warn('Anleitung konnte nicht in neuem Fenster geöffnet werden:', error)
+            setModalType('info')
+            setModalMessage(`
 📋 Anleitung:
 
 1. **Fand statt?** - Wählen Sie "ja" oder "nein"
@@ -195,8 +211,10 @@ export default function LastButtons({ mitSend, mitBack, handleBack}) {
    - Bei verschoben: neues Datum eingeben
 
 4. **Senden** - Speichert alle Daten im System
-        `)
-        setShowModal(true)
+            `)
+            setIsModalHtml(false)
+            setShowModal(true)
+        }
     }
 
     const closeModal = () => {
@@ -224,6 +242,7 @@ export default function LastButtons({ mitSend, mitBack, handleBack}) {
             // Normales Modal schließen
             setShowModal(false)
             setModalMessage('')
+            setIsModalHtml(false)
             setIsSuccessModal(false)
         }
     }
@@ -262,6 +281,7 @@ export default function LastButtons({ mitSend, mitBack, handleBack}) {
                     message={modalMessage}
                     onClose={closeModal}
                     type={modalType}
+                    isHtml={isModalHtml}
                 />
             )}
 

src/components/Modal.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 // Import des CSS direkt hier
 import './Modal.css'
 
-export default function Modal({ isOpen = true, onClose, title, children, message, type = 'info' }) {
+export default function Modal({ isOpen = true, onClose, title, children, message, type = 'info', isHtml = false }) {
     if (!isOpen) return null
 
     const handleOverlayClick = (e) => {
@@ -37,7 +37,23 @@ export default function Modal({ isOpen = true, onClose, title, children, message
     }
 
     const displayTitle = title || getDefaultTitle()
-    const displayContent = message ? <p style={{whiteSpace: 'pre-line'}}>{message}</p> : children
+    
+    // Content-Behandlung: HTML oder normaler Text
+    const getDisplayContent = () => {
+        if (children) return children
+        
+        if (message) {
+            if (isHtml) {
+                // HTML-Inhalt sicher anzeigen
+                return <div dangerouslySetInnerHTML={{ __html: message }} />
+            } else {
+                // Normaler Text mit Zeilenumbrüchen
+                return <p style={{whiteSpace: 'pre-line'}}>{message}</p>
+            }
+        }
+        
+        return null
+    }
 
     return (
         <div className="modal-overlay" onClick={handleOverlayClick} onKeyDown={handleKeyDown} tabIndex={0}>
@@ -47,7 +63,7 @@ export default function Modal({ isOpen = true, onClose, title, children, message
                     <button className="modal-close" onClick={onClose}>&times;</button>
                 </div>
                 <div className="modal-body">
-                    {displayContent}
+                    {getDisplayContent()}
                 </div>
                 <div className="modal-footer">
                     <button className="modal-button" onClick={onClose} autoFocus>OK</button>