Es geht jetzt mal grob

src/App.css

@@ -49,12 +49,20 @@ section {
   margin-left: 2em;
 }
 
-.selspende {
+.radiogroup {
   display: flex;
   flex-direction: column;
   gap: 10px;
 }
 
+.selspende {
+  display: flex;
+  align-items: center;
+}
+
+.spendeok {
+  margin-left: 2em;
+}
 .bemerkdiv {
   display: flex;
   align-items: center;

src/App.css_claude

@@ -1,103 +0,0 @@
-.App {
-  max-width: 600px;
-  margin: 50px auto;
-  padding: 20px;
-  font-family: Arial, sans-serif;
-}
-
-h1 {
-  text-align: center;
-  color: #333;
-}
-
-.progress {
-  text-align: center;
-  margin-bottom: 20px;
-  padding: 10px;
-  background-color: #e9ecef;
-  border-radius: 5px;
-  font-weight: bold;
-  color: #495057;
-}
-
-.component-box {
-  background-color: #f8f9fa;
-  border: 2px solid #dee2e6;
-  border-radius: 10px;
-  padding: 30px;
-  margin-bottom: 20px;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-  transition: all 0.3s ease;
-}
-
-.component-box.completed {
-  background-color: #e8f5e9;
-  border-color: #4caf50;
-  opacity: 0.85;
-}
-
-.completed-marker {
-  color: #4caf50;
-  font-weight: bold;
-  margin-top: 15px;
-  padding: 10px;
-  background-color: rgba(76, 175, 80, 0.1);
-  border-radius: 5px;
-  text-align: center;
-}
-
-.component-box h2 {
-  margin-top: 0;
-  color: #0056b3;
-}
-
-.radio-group {
-  margin: 20px 0;
-  display: flex;
-  gap: 20px;
-}
-
-.radio-group label {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  cursor: pointer;
-  font-size: 16px;
-}
-
-.radio-group input[type="radio"] {
-  width: 18px;
-  height: 18px;
-  cursor: pointer;
-}
-
-button {
-  background-color: #0056b3;
-  color: white;
-  border: none;
-  padding: 12px 30px;
-  font-size: 16px;
-  border-radius: 5px;
-  cursor: pointer;
-  transition: background-color 0.3s;
-  margin-top: 15px;
-}
-
-button:hover:not(:disabled) {
-  background-color: #004494;
-}
-
-button:disabled {
-  background-color: #6c757d;
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-
-.back-button {
-  background-color: #6c757d;
-  margin-top: 10px;
-}
-
-.back-button:hover {
-  background-color: #5a6268;
-}

src/App.jsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { FormProvider } from './components/FormContext.jsx'
+import { FormProvider, useFormData } from './FormContext'
 import './App.css'
 import FandStattVer from './components/FandStattVer.jsx'
 import BesucherBar from './components/BesucherBar.jsx'
@@ -7,25 +7,23 @@ import Spende from './components/Spende.jsx'
 import LastLine from './components/LastLine.jsx'
 import Bemerkungen from './components/Bemerkungen.jsx'
 import LastButtons from './components/LastButtons.jsx'
-import NeinPfad from './components/NeinPfad.jsx'
+import Verschoben from './components/Verschoben.jsx'
 
 
-function App() {
+function AppContent() {
   const datum = "2025-10-23"
   const name = "Meiehofer"
   const version = "1.0.0"
   const vdate = "2025-11-23"
   //const isBar = true
 
-  // let withBar = null
-  // if (isBar) {
-  //   withBar = <BesucherBar title="Höhe der Barspende" euro="€" />
-  // }
-
   // States
   const [schritt, setSchritt] = useState(0)
   const [pfad, setPfad] = useState('')
 
+  // Hole formData aus dem Context
+  const { formData } = useFormData()
+
 
   // Callbacks:
   const handleFandStattVerNext = (auswahl) => {
@@ -34,7 +32,7 @@ function App() {
   }
 
   const handleNext = () => {
-    setSchritt(schritt + 1)
+    setSchritt((schritt) => schritt + 1)
   }
 
   // Welche Komponeneten werden angezeigt:
@@ -43,7 +41,7 @@ function App() {
 
     // Schritt 0: ja/nein - Auswahl
     components.push(
-      <FandStattVer key="fandstatt" left='ja' right='nein' onNext={handleFandStattVerNext} iscompleted={schritt > 1} />
+      <FandStattVer key="fandstatt" left='ja' right='nein' title='Fand die Führung statt?' onNext={handleFandStattVerNext} iscompleted={schritt > 1} />
     )
     if (schritt === 0)
       return components
@@ -52,34 +50,83 @@ function App() {
     if (pfad === 'ja') {
       // Schritt 1: Besucher-Anzahl
       if (schritt >= 1) {
-        components.push(<BesucherBar key='besucher' title='Besucher-Anzahl:' eureo='' onNext={handleNext} isComplete={schritt > 1} />
+        components.push(<BesucherBar key='besucher' title='Besucher-Anzahl' euro='' onNext={handleNext} isCompleted={schritt > 1} />
         )
       }
+
       // Schritt 2: Spende
       if (schritt >= 2) {
         components.push(<Spende key='spende' onNext={handleNext} isComplete={schritt > 2} />
         )
       }
 
+      // Schritt 3: Betrag der Spende (nur bei Bar-Spende)
+      if ((schritt >= 3) && (formData.spendenArt === 'bar')) {
+        components.push(<BesucherBar key='betrag' title='Höhe der Barspende' euro='€' onNext={handleNext} isCompleted={schritt > 3} />
+        )
+      }
+
+      // Schritt 4 (bei Bar-Spende) oder Schritt 3 (bei anderen Spenden): Bemerkungen
+      const bemerkungsSchritt = (formData.spendenArt === 'bar') ? 4 : 3
+      if (schritt >= bemerkungsSchritt) {
+        components.push(<Bemerkungen key='bemerkungen' onNext={handleNext} isCompleted={schritt > bemerkungsSchritt} />
+        )
+      }
+
+      // Schritt 5 (bei Bar-Spende) oder Schritt 4 (bei anderen Spenden): unterste Buttons
+      const endeSchritt = (formData.spendenArt === 'bar') ? 5 : 4
+      if (schritt >= endeSchritt) {
+        components.push(<LastButtons key='lastbutt' />
+        )
+      }
+
+    }
+    // NEIN - Pfad
+    if (pfad === 'nein')  {
+
+      // Schritt 1: abgesagt / verschoben
+      if (schritt >= 1) {
+        components.push(
+          <FandStattVer key="abgesagt" left='abgesagt' right='verschoben' title='Die Führung wurde' radioName='abgesagt' onNext={handleNext} iscompleted={schritt > 1} />
+        )
+      }
+
+      // Schritt 2:  Ende wenn abgesagt bzw. neues Datum bei verschoben
+      if (schritt >= 2  && formData.stattgefunden === 'verschoben') {
+        components.push(<Verschoben key='verschoben' onNext={handleNext} isCompleted={schritt > 2} />
+        )
+      }
+
+      // Schritt 4 (bei verschoben) oder Schritt 3 (bei absage): unterste Buttons
+      const endeNeinSchritt = (formData.stattgefunden === 'verschoben') ? 3 : 2
+      if (schritt >= endeNeinSchritt) {
+        components.push(<LastButtons key='lastbutt' />
+        )
+      }
+
     }
     return components
   }
 
   return (
-    <FormProvider>
-      <div className="wrapper">
-        <div>
-          <h2 className="topline">
-            Sonderführung vom <br className="umbruch" />{datum}
-          </h2>
-          <h4>für {name}</h4>
-          <h2 className="nachbearbeitung">Nachbearbeitung</h2>
-        </div>
-        // Alle Komponenten der Reihe nach anzeigen
-        {renderCoponents().map(component => component)}
-        <LastButtons />
-        <LastLine version={version} vdate={vdate} />
+    <div className="wrapper">
+      <div>
+        <h2 className="topline">
+          Sonderführung vom <br className="umbruch" />{datum}
+        </h2>
+        <h4>für {name}</h4>
+        <h2 className="nachbearbeitung">Nachbearbeitung</h2>
       </div>
+      {renderCoponents().map(component => component)}
+      <LastLine version={version} vdate={vdate} />
+    </div>
+  )
+}
+
+function App() {
+  return (
+    <FormProvider>
+      <AppContent />
     </FormProvider>
   )
 }

src/App.jsx_claude

@@ -1,202 +0,0 @@
-import { useState } from 'react'
-import './App.css'
-import FandStattVer from './components/FandStattVer.jsx'
-import BesucherBar from './components/BesucherBar.jsx'
-import Spende from './components/Spende.jsx'
-import LastLine from './components/LastLine.jsx'
-import Bemerkungen from './components/Bemerkungen.jsx'
-import Fertig from './components/Fertig.jsx'
-import LastButtons from './components/LastButtons.jsx'
-import Verschoben from "./components/Verschoben.jsx"
-import NeinPfad from './components/NeinPfad.jsx'
-
-function App() {
-  const datum = "2025-10-23"
-  const name = "Meiehofer"
-  const version = "1.0.0"
-  const vdate = "2025-11-23"
-  const isBar = true
-
-  // State für die Navigation
-  const [schritt, setSchritt] = useState(0)
-  const [pfad, setPfad] = useState('') // 'ja' oder 'nein'
-
-  // Callback für FandStattVer, wenn OK geklickt wird
-  const handleFandStattVerNext = (auswahl) => {
-    setPfad(auswahl)
-    setSchritt(1)
-  }
-
-  // Callback für alle anderen Komponenten
-  const handleNext = () => {
-    setSchritt(schritt + 1)
-  }
-
-  // Bestimme, welche Komponenten angezeigt werden sollen
-  const renderComponents = () => {
-    const components = []
-
-    // Schritt 0: FandStattVer (immer zuerst)
-    components.push(
-      <FandStattVer 
-        key="fandstatt" 
-        left='ja' 
-        right='nein' 
-        onNext={handleFandStattVerNext} 
-        isCompleted={schritt > 0}
-      />
-    )
-
-    // Wenn noch bei Schritt 0, zeige nur FandStattVer
-    if (schritt === 0) {
-      return components
-    }
-
-    // Pfad "JA"
-    if (pfad === 'ja') {
-      // Schritt 1: BesucherBar (Anzahl)
-      if (schritt >= 1) {
-        components.push(
-          <BesucherBar 
-            key="besucher" 
-            title="Besucher-Anzahl" 
-            euro="" 
-            onNext={handleNext} 
-            isCompleted={schritt > 1}
-          />
-        )
-      }
-      
-      // Schritt 2: Spende
-      if (schritt >= 2) {
-        components.push(
-          <Spende 
-            key="spende" 
-            onNext={handleNext} 
-            isCompleted={schritt > 2}
-          />
-        )
-      }
-      
-      // Schritt 3: BesucherBar (Barspende) - nur wenn isBar true
-      if (schritt >= 3 && isBar) {
-        components.push(
-          <BesucherBar 
-            key="barspende" 
-            title="Höhe der Barspende" 
-            euro="€" 
-            onNext={handleNext} 
-            isCompleted={schritt > 3}
-          />
-        )
-      }
-      
-      // Schritt 4: Bemerkungen
-      if (schritt >= 4) {
-        components.push(
-          <Bemerkungen 
-            key="bemerkungen" 
-            onNext={handleNext} 
-            isCompleted={schritt > 4}
-          />
-        )
-      }
-      
-      // Schritt 5: LastButtons
-      if (schritt >= 5) {
-        components.push(
-          <LastButtons 
-            key="lastbuttons" 
-            onNext={handleNext} 
-            isCompleted={schritt > 5}
-          />
-        )
-      }
-      
-      // Schritt 6: Fertig
-      if (schritt >= 6) {
-        components.push(
-          <Fertig key="fertig" />
-        )
-      }
-    }
-
-    // Pfad "NEIN"
-    if (pfad === 'nein') {
-      // Schritt 1: Verschoben
-      if (schritt >= 1) {
-        components.push(
-          <Verschoben 
-            key="verschoben" 
-            onNext={handleNext} 
-            isCompleted={schritt > 1}
-          />
-        )
-      }
-      
-      // Schritt 2: NeinPfad
-      if (schritt >= 2) {
-        components.push(
-          <NeinPfad 
-            key="neinpfad" 
-            isNein={true} 
-            onNext={handleNext} 
-            isCompleted={schritt > 2}
-          />
-        )
-      }
-      
-      // Schritt 3: Bemerkungen
-      if (schritt >= 3) {
-        components.push(
-          <Bemerkungen 
-            key="bemerkungen" 
-            onNext={handleNext} 
-            isCompleted={schritt > 3}
-          />
-        )
-      }
-      
-      // Schritt 4: LastButtons
-      if (schritt >= 4) {
-        components.push(
-          <LastButtons 
-            key="lastbuttons" 
-            onNext={handleNext} 
-            isCompleted={schritt > 4}
-          />
-        )
-      }
-      
-      // Schritt 5: Fertig
-      if (schritt >= 5) {
-        components.push(
-          <Fertig key="fertig" />
-        )
-      }
-    }
-
-    return components
-  }
-
-  return (
-    <>
-      <div className="wrapper">
-        <div>
-          <h2 className="topline">
-            Sonderführung vom <br className="umbruch" />{datum}
-          </h2>
-          <h4>für {name}</h4>
-          <h2 className="nachbearbeitung">Nachbearbeitung</h2>
-        </div>
-
-        {/* Zeige alle Komponenten bis zum aktuellen Schritt */}
-        {renderComponents().map(component => component)}
-
-        <LastLine version={version} vdate={vdate} />
-      </div>
-    </>
-  )
-}
-
-export default App

src/FormContext.jsx

@@ -0,0 +1,59 @@
+// ========================================
+// FormContext.jsx - Globaler State für alle Formulardaten
+// ========================================
+import { createContext, useContext, useState } from 'react'
+
+const FormContext = createContext()
+
+export function FormProvider({ children }) {
+//    console.log('🚀 FormProvider initialisiert')
+
+  const [formData, setFormData] = useState({
+    stattgefunden: '',
+    besucherAnzahl: '',
+    spendenArt: '',
+    barspende: '',
+    bemerkungen: '',
+    neuertermin: '1900-01-01T00:00',
+    // Weitere Felder können hier hinzugefügt werden
+  })
+
+   const updateFormData = (field, value) => {
+    //console.log('📝 FormContext UPDATE:', field, '=', value)
+    setFormData(prev => {
+      const newData = {
+        ...prev,
+        [field]: value
+      }
+      //console.log('📊 FormContext NEU:', newData)
+      return newData
+    })
+  }
+
+  const resetFormData = () => {
+        //console.log('🔄 FormContext RESET')
+
+    setFormData({
+      stattgefunden: '',
+      besucherAnzahl: '',
+      spendenArt: '',
+      barspende: '',
+      bemerkungen: '',
+      neuertermin: '1900-01-01T00:00'
+    })
+  }
+
+  return (
+    <FormContext.Provider value={{ formData, updateFormData, resetFormData }}>
+      {children}
+    </FormContext.Provider>
+  )
+}
+
+export function useFormData() {
+  const context = useContext(FormContext)
+  if (!context) {
+    throw new Error('useFormData muss innerhalb von FormProvider verwendet werden. Stelle sicher, dass deine Komponente von <FormProvider> umschlossen ist.')
+  }
+  return context
+}

src/components/Bemerkungen.jsx

@@ -1,11 +1,24 @@
-export default function Bemerkungen() {
+import { useState } from 'react'
+import { useFormData } from '../FormContext'
 
-    return(
+export default function Bemerkungen({ onNext, isCompleted }) {
+
+    const { formData, updateFormData } = useFormData()
+    const [wert, setWert] = useState(formData.bemerkungen || '')
+
+
+    const handleOK = () => {
+        updateFormData('bemerkungen', wert)
+        onNext()
+    }
+
+
+    return (
         <section id="bemerkungen">
             <h3>Bemerkungen (optional):</h3>
             <div className="bemerkdiv">
-                    <textarea className="beminfeld"  />
-                    <button className="okbutton">OK</button>
+                <textarea className="beminfeld" />
+                <button className="okbutton" onClick={handleOK}>OK</button>
             </div>
         </section>
     )

src/components/BesucherBar.jsx

@@ -1,26 +1,57 @@
-import { useState, useSyncExternalStore } from 'react'
+import { useState } from 'react'
+import { useFormData } from '../FormContext'
+import Modal from './Modal'
 
-export default function BesucherBar({title, euro, onNext, isCompleted}) {
+export default function BesucherBar({ title, euro, onNext, isCompleted }) {
 
-const [wert, setWert] = useState('')
-const handleOK = () => {
-    if (wert) {
-        onNext()
-    } else {
-        alert('Bitte einen Wert eingeben')
+    const { formData, updateFormData } = useFormData()
+
+    // Bestimme das Feld basierend auf dem Titel
+    const fieldName = title.includes('Barspende') ? 'barspende' : 'besucherAnzahl'
+
+    const [wert, setWert] = useState(formData[fieldName] || '')
+    const [showModal, setShowModal] = useState(false)
+
+    const handleOK = () => {
+        if (wert) {
+            updateFormData(fieldName, wert)
+            onNext()
+        } else {
+            setShowModal(true)
+        }
     }
-}
 
-return(
-        <section id="besucherbar">
-            <h3>{title}:</h3>
-            <div className="besadiv">
-                    <input type='number' value={wert} onChange = {(e) => setWert(e.target.value)}
-                        placeholder={euro ? 'Betrag in Euro' : 'Anzahl'} disabled ={isCompleted}
+    const handleKeyDown = (e) => {
+        if (e.key === 'Enter') {
+            handleOK()
+        }
+    }
+
+    const closeModal = () => {
+        setShowModal(false)
+    }
+
+    return (
+        <>
+            <section id="besucherbar">
+                <h3>{title}:</h3>
+                <div className="besadiv">
+                    <input type='number' value={wert} onChange={(e) => setWert(e.target.value)}
+                        onKeyDown={handleKeyDown}
+                        placeholder={euro ? 'Betrag in Euro' : 'Anzahl'} disabled={isCompleted}
                     />
                     &nbsp;&nbsp;{euro}
-                    <button className="okbutton" onClick={handleOK} disabled = {!wert}>OK</button>
-            </div>
-        </section>        
+                    <button className="okbutton" onClick={handleOK}>OK</button>
+                </div>
+            </section>
+            
+            <Modal 
+                isOpen={showModal} 
+                onClose={closeModal}
+                title="Eingabe erforderlich"
+            >
+                <p>Bitte einen Wert eingeben</p>
+            </Modal>
+        </>
     )
 }

src/components/FandStattVer.jsx

@@ -1,34 +1,51 @@
 import { useState } from 'react'
-import { useFormData } from './FormContext.jsx'
+import { useFormData } from '../FormContext'
+import Modal from './Modal'
 
-export default function FandStattVer({left, right, onNext, isCompleted}) {
+export default function FandStattVer({left, right, title, onNext, radioName = "fst"}) {
     const { formData, updateFormData } = useFormData()
     const [auswahl, setAuswahl] = useState(formData.stattgefunden || '')
+    const [showModal, setShowModal] = useState(false)
+    
     const handleOK = () => {
         if(!auswahl) {
-            alert('Bitte ja/nein wäölen')
+            setShowModal(true)
             return
         }
         updateFormData('stattgefunden', auswahl)
         onNext(auswahl)
     }
 
+    const closeModal = () => {
+        setShowModal(false)
+    }
+
     return (
-        <section>
-            <h3>Fand die Führung statt?</h3>
-            <div className="fstdiv">
-                <label className="fsLabel">
-                    <input type="radio" name="fst" value={left} checked={auswahl === left}
-                        onChange = {(e) => setAuswahl(e.target.value)} />
-                    {left}
-                </label>
-                <label className="fsLabel">
-                    <input type="radio" name="fst" value={right} checked={auswahl === right}
-                        onChange = {(e) => setAuswahl(e.target.value)} />
-                    {right}
-                </label>
-                <button className="okbutton"  onClick={handleOK} disabled = {!auswahl}>OK</button>
-            </div>
-        </section>
+        <>
+            <section>
+                <h3>{title}</h3>
+                <div className="fstdiv">
+                    <label className="fsLabel">
+                        <input type="radio" name={radioName} value={left} checked={auswahl === left}
+                            onChange = {(e) => setAuswahl(e.target.value)} />
+                        {left}
+                    </label>
+                    <label className="fsLabel">
+                        <input type="radio" name={radioName} value={right} checked={auswahl === right}
+                            onChange = {(e) => setAuswahl(e.target.value)} />
+                        {right}
+                    </label>
+                    <button className="okbutton"  onClick={handleOK}>OK</button>
+                </div>
+            </section>
+            
+            <Modal 
+                isOpen={showModal} 
+                onClose={closeModal}
+                title="Auswahl erforderlich"
+            >
+                <p>Bitte eine Option wählen</p>
+            </Modal>
+        </>
     )
 }

src/components/FandStattVer.jsx_claude

@@ -1,55 +0,0 @@
-import { useState } from 'react'
-
-function FandStattVer({ left, right, onNext, isCompleted }) {
-  const [auswahl, setAuswahl] = useState('')
-
-  const handleOK = () => {
-    if (auswahl) {
-      // Rufe onNext mit der Auswahl ('ja' oder 'nein') auf
-      onNext(auswahl)
-    } else {
-      alert('Bitte eine Option auswählen')
-    }
-  }
-
-  return (
-    <div className={`component-box ${isCompleted ? 'completed' : ''}`}>
-      <h3>Fand die Veranstaltung statt?</h3>
-      
-      <div className="radio-group">
-        <label>
-          <input
-            type="radio"
-            name="fandstatt"
-            value={left}
-            checked={auswahl === left}
-            onChange={(e) => setAuswahl(e.target.value)}
-            disabled={isCompleted}
-          />
-          {left}
-        </label>
-        
-        <label>
-          <input
-            type="radio"
-            name="fandstatt"
-            value={right}
-            checked={auswahl === right}
-            onChange={(e) => setAuswahl(e.target.value)}
-            disabled={isCompleted}
-          />
-          {right}
-        </label>
-      </div>
-
-      {!isCompleted && (
-        <button onClick={handleOK} disabled={!auswahl}>
-          OK
-        </button>
-      )}
-      
-    </div>
-  )
-}
-
-export default FandStattVer

src/components/FormContext.jsx

@@ -1,34 +0,0 @@
-// ========================================
-// FormContext.jsx - Globaler State für alle Formulardaten
-// ========================================
-import { createContext, useContext, useState } from 'react'
-
-const FormContext = createContext()
-
-export function FormProvider({ children }) {
-  const [formData, setFormData] = useState({
-    stattgefunden: '',
-    anzahl: '',
-    spende: '',
-    betrag: '',
-    bemerkungen: '',
-    neuertermin: ''
-  })
-
-  const updateFormData = (field, value) => {
-    setFormData(prev => ({
-      ...prev,
-      [field]: value
-    }))
-  }
-
-  return (
-    <FormContext.Provider value={{ formData, updateFormData }}>
-      {children}
-    </FormContext.Provider>
-  )
-}
-
-export function useFormData() {
-  return useContext(FormContext)
-}

src/components/LastButtons.jsx

@@ -1,9 +1,26 @@
+import { useFormData } from '../FormContext'
+
 export default function LastButtons() {
+    
+    const { formData } = useFormData()
+    
+    const handleSenden = () => {
+        console.log("Alle Formulardaten: ", formData)
+    }
+
+    const handleAbbruch = () => {
+        console.log("Abbruch")
+    }
+
+    const handleAnleitung = () => {
+        console.log("Zeige Anleitung")
+    }
+
     return (
         <div className="lastbuttons">
-            <button className="btnabbruch">Abbruch</button>
-            <button className="btnanleit">Anleitung</button>
-            <button className="btnsend">Senden</button>
+            <button className="btnabbruch" onClick = {handleAbbruch}>Abbruch</button>
+            <button className="btnanleit" onClick = {handleAnleitung}>Anleitung</button>
+            <button className="btnsend" onClick = {handleSenden}>Senden</button>
         </div>
 
     )

src/components/Modal.css

@@ -0,0 +1,127 @@
+/* Modal Overlay - covers the entire screen */
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.6);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+    backdrop-filter: blur(2px);
+}
+
+/* Modal Content Box */
+.modal-content {
+    background: white;
+    border-radius: 12px;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
+    max-width: 400px;
+    width: 90%;
+    max-height: 90vh;
+    overflow: hidden;
+    animation: modalSlideIn 0.2s ease-out;
+}
+
+@keyframes modalSlideIn {
+    from {
+        transform: scale(0.9) translateY(-10px);
+        opacity: 0;
+    }
+    to {
+        transform: scale(1) translateY(0);
+        opacity: 1;
+    }
+}
+
+/* Modal Header */
+.modal-header {
+    background: #f8f9fa;
+    padding: 16px 20px;
+    border-bottom: 1px solid #e9ecef;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.modal-title {
+    margin: 0;
+    color: #333;
+    font-size: 1.2rem;
+    font-weight: 600;
+}
+
+.modal-close {
+    background: none;
+    border: none;
+    font-size: 24px;
+    cursor: pointer;
+    color: #666;
+    width: 30px;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    transition: all 0.2s ease;
+}
+
+.modal-close:hover {
+    background: #e9ecef;
+    color: #333;
+}
+
+/* Modal Body */
+.modal-body {
+    padding: 20px;
+    color: #333;
+    line-height: 1.5;
+    text-align: center;
+}
+
+/* Modal Footer */
+.modal-footer {
+    background: #f8f9fa;
+    padding: 16px 20px;
+    border-top: 1px solid #e9ecef;
+    display: flex;
+    justify-content: center;
+}
+
+.modal-button {
+    background: #007bff;
+    color: white;
+    border: none;
+    padding: 8px 24px;
+    border-radius: 6px;
+    cursor: pointer;
+    font-weight: 500;
+    transition: all 0.2s ease;
+    min-width: 80px;
+}
+
+.modal-button:hover {
+    background: #0056b3;
+    transform: translateY(-1px);
+}
+
+.modal-button:focus {
+    outline: 2px solid #80bdff;
+    outline-offset: 2px;
+}
+
+/* Responsive Design */
+@media (max-width: 480px) {
+    .modal-content {
+        margin: 20px;
+        width: calc(100% - 40px);
+    }
+    
+    .modal-header,
+    .modal-body,
+    .modal-footer {
+        padding: 12px 16px;
+    }
+}

src/components/Modal.jsx

@@ -0,0 +1,39 @@
+import React from 'react'
+// Import des CSS direkt hier
+import './Modal.css'
+
+export default function Modal({ isOpen, onClose, title, children }) {
+    if (!isOpen) return null
+
+    const handleOverlayClick = (e) => {
+        if (e.target === e.currentTarget) {
+            onClose()
+        }
+    }
+
+    const handleKeyDown = (e) => {
+        if (e.key === 'Escape') {
+            onClose()
+        }
+        if (e.key === 'Enter') {
+            onClose()
+        }
+    }
+
+    return (
+        <div className="modal-overlay" onClick={handleOverlayClick} onKeyDown={handleKeyDown} tabIndex={0}>
+            <div className="modal-content">
+                <div className="modal-header">
+                    <h3 className="modal-title">{title}</h3>
+                    <button className="modal-close" onClick={onClose}>&times;</button>
+                </div>
+                <div className="modal-body">
+                    {children}
+                </div>
+                <div className="modal-footer">
+                    <button className="modal-button" onClick={onClose} autoFocus>OK</button>
+                </div>
+            </div>
+        </div>
+    )
+}

src/components/NeinPfad.jsx

@@ -1,21 +0,0 @@
-import FandStattVer from "./FandStattVer.jsx";
-import Verschoben from "./Verschoben.jsx";
-
-export default function NeinPfad({ isNein }) {
-    let verschoben = true
-
-    let dt = null
-    if (verschoben) {
-        dt = <Verschoben />
-    }
-    if (isNein) {
-        return (
-            <>
-                <FandStattVer left='abgesagt' right='verschoben' />
-                {dt}
-            </>
-        )
-    } else {
-        return null
-    }
-}

src/components/Spende.jsx

@@ -1,67 +1,48 @@
 import { useState } from 'react'
-import { useFormData } from './FormContext'
+import { useFormData } from '../FormContext'
 
 export default function Spende({ onNext, isCompleted }) {
-  const { formData, updateFormData } = useFormData()
-  const [spende, setSpende] = useState(formData.spendenArt || '')
-  const [betrag, setBetrag] = useState(formData.spendenBetrag || '')
 
-  const handleOK = () => {
-    if (!spende) {
-      alert('Bitte wähle eine Spendenart aus')
-      return
-    }
-        updateFormData('spende', spende)
-        updateFormData('betrag', betrag)
+    const { formData, updateFormData } = useFormData()
+    // Initialisiere State mit dem Wert aus formData (falls vorhanden)
+    const [spendenArt, setSpendenArt] = useState(formData.spendenArt || '')
+
+    const handleRadioChange = (e) => {
+        const art = e.target.value
+        setSpendenArt(art)
+        updateFormData('spendenArt', art)
         onNext()
     }
 
     return (
         <section>
             <h3>Eine Spende</h3>
-            <div className="selspende">
+            <div className="radiogroup">
                 <label>
                     <input type="radio" name="spende" value="bar"
-                    checked={spende==='bar'} onChange= {(e) => {setSpende(e.target.value)}} disabled={isCompleted}
+                        checked={spendenArt === 'bar'} onChange={handleRadioChange} disabled={isCompleted}
                     />
                     ist in bar eingegangen
                 </label>
                 <label>
                     <input type="radio" name="spende" value="ueber"
-                    checked={spende==='ueber'} onChange= {(e) => {setSpende(e.target.value)}} disabled={isCompleted}
+                        checked={spendenArt === 'ueber'} onChange={handleRadioChange} disabled={isCompleted}
                     />
                     wird überwiesen
                 </label>
                 <label>
                     <input type="radio" name="spende" value="kasse"
-                    checked={spende==='kasse'} onChange= {(e) => {setSpende(e.target.value)}} disabled={isCompleted}
+                        checked={spendenArt === 'kasse'} onChange={handleRadioChange} disabled={isCompleted}
                     />
                     ist in der Spendenkasse
                 </label>
                 <label>
                     <input type="radio" name="spende" value="not"
-                    checked={spende==='not'} onChange= {(e) => {setSpende(e.target.value)}} disabled={isCompleted}
+                        checked={spendenArt === 'not'} onChange={handleRadioChange} disabled={isCompleted}
                     />
                     ist nicht vorgesehen
                 </label>
             </div>
-
-            {(spende === 'bar') && !isCompleted && (
-                <div style={{ marginTop: '20px' }}>
-                    <label>Betrag (€):</label>
-                    <input
-                    type='number'
-                    value={betrag}
-                    onChange={(e) => setBetrag(e.target.value)}
-                    placeholder='0'
-                    step='1'
-                    disabled={isCompleted}
-                    />
-                    </div>
-                )}
-                {!isCompleted && (
-                    <button onClick={handleOK} disabled={!spende}>OK</button>
-                )}
         </section>
     )
 }

src/components/Verschoben.jsx

@@ -1,16 +1,62 @@
+import { useState } from 'react'
+import { useFormData } from '../FormContext/'
+import Modal from './Modal'
+
+export default function Verschoben({onNext, isCompleted}) {
+    const { formData, updateFormData } = useFormData()
+    
+    // State für das selektierte Datum
+    const [selectedDate, setSelectedDate] = useState(formData.neuertermin || '')
+    const [showModal, setShowModal] = useState(false)
+
+    const handleOK = () => {
+        if (selectedDate) {
+            updateFormData('neuertermin', selectedDate)
+            onNext()
+        } else {
+            setShowModal(true)
+        }
+    }
+
+    const handleKeyDown = (e) => {
+        if (e.key === 'Enter') {
+            handleOK()
+        }
+    }
+
+    const closeModal = () => {
+        setShowModal(false)
+    }
     
-export default function Verschoben() {
     let now = new Date()
     now.setMinutes(now.getMinutes() - now.getTimezoneOffset());
 
     return (
-        <section>
-            <h3>Verschoben auf:</h3>
-            <div className="verschoben">
-                    <input type="datetime-local" id="datetime" min={now.toISOString().slice(0,16)} />        
-                    <button className="okbutton">OK</button>
+        <>
+            <section>
+                <h3>Verschoben auf:</h3>
+                <div className="verschoben">
+                        <input 
+                            type="datetime-local" 
+                            id="datetime" 
+                            value={selectedDate}
+                            onChange={(e) => setSelectedDate(e.target.value)}
+                            onKeyDown={handleKeyDown}
+                            min={now.toISOString().slice(0,16)} 
+                            disabled={isCompleted}
+                        />        
+                        <button className="okbutton" onClick={handleOK}>OK</button>
         
-            </div>
-        </section>
+                </div>
+            </section>
+            
+            <Modal 
+                isOpen={showModal} 
+                onClose={closeModal}
+                title="Datum erforderlich"
+            >
+                <p>Bitte ein Datum auswählen</p>
+            </Modal>
+        </>
     )
 }

src/main.jsx

@@ -4,7 +4,7 @@ import './index.css'
 import App from './App.jsx'
 
 createRoot(document.getElementById('root')).render(
-  <StrictMode>
+//  <StrictMode>
     <App />
-  </StrictMode>,
+//  </StrictMode>,
 )