diff --git a/src/App.css b/src/App.css
index 622ee60..88ffeb0 100644
--- a/src/App.css
+++ b/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;
diff --git a/src/App.css_claude b/src/App.css_claude
deleted file mode 100644
index 36791d3..0000000
--- a/src/App.css_claude
+++ /dev/null
@@ -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;
-}
\ No newline at end of file
diff --git a/src/App.jsx b/src/App.jsx
index df8193a..c4cf018 100644
--- a/src/App.jsx
+++ b/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'
@@ -10,22 +10,20 @@ import LastButtons from './components/LastButtons.jsx'
 import NeinPfad from './components/NeinPfad.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:
@@ -55,31 +53,52 @@ function App() {
         components.push(<BesucherBar key='besucher' title='Besucher-Anzahl:' eureo='' onNext={handleNext} isComplete={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} isComplete={schritt > 3} />
+        )
+      }
+
+
+      // Schritt 3: Betrag der Spende (nur bei Bar-Spende)
+      if (schritt >= 4) {
+        components.push(<Bemerkungen key='bemerkungen' onNext={handleNext} isComplete={schritt > 4} />
+        )
+      }
+
+
     }
     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)}
+      <LastButtons />
+      <LastLine version={version} vdate={vdate} />
+    </div>
+  )
+}
+
+function App() {
+  return (
+    <FormProvider>
+      <AppContent />
     </FormProvider>
   )
 }
diff --git a/src/App.jsx_claude b/src/App.jsx_claude
deleted file mode 100644
index 342fba3..0000000
--- a/src/App.jsx_claude
+++ /dev/null
@@ -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
diff --git a/src/FormContext.jsx b/src/FormContext.jsx
new file mode 100644
index 0000000..77ce06c
--- /dev/null
+++ b/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-01'
+    // 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-01'
+    })
+  }
+
+  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
+}
diff --git a/src/components/BesucherBar.jsx b/src/components/BesucherBar.jsx
index b76714a..5889456 100644
--- a/src/components/BesucherBar.jsx
+++ b/src/components/BesucherBar.jsx
@@ -1,26 +1,52 @@
-import { useState, useSyncExternalStore } from 'react'
+import { useState, useEffect } from 'react'
+import { useFormData } from '../FormContext'
 
-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'
+
+        // DEBUG: Zeige formData beim Laden
+    console.log('🔍 BesucherBar geladen:', title)
+    console.log('📊 Aktuelles formData:', formData)
+    console.log('🔑 Verwende Feld:', fieldName)
+    console.log('💾 Gespeicherter Wert:', formData[fieldName])
+    
+
+
+    const [wert, setWert] = useState(formData[fieldName] || '')
+
+        // DEBUG: Zeige State-Änderungen
+    useEffect(() => {
+        console.log('✏️ Wert geändert für', fieldName, ':', wert)
+    }, [wert, fieldName])
+
+
+    const handleOK = () => {
+        if (wert) {
+            updateFormData(fieldName, wert)
+
+                        console.log('✅ Gespeichert! Neues formData:', formData)
+
+
+            onNext()
+        } else {
+            alert('Bitte einen Wert eingeben')
+        }
     }
-}
 
-return(
+    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}
-                    />
-                    &nbsp;&nbsp;{euro}
-                    <button className="okbutton" onClick={handleOK} disabled = {!wert}>OK</button>
+                <input type='number' value={wert} onChange={(e) => setWert(e.target.value)}
+                    placeholder={euro ? 'Betrag in Euro' : 'Anzahl'} disabled={isCompleted}
+                />
+                &nbsp;&nbsp;{euro}
+                <button className="okbutton" onClick={handleOK} disabled={!wert}>OK</button>
             </div>
-        </section>        
+        </section>
     )
 }
diff --git a/src/components/FandStattVer.jsx b/src/components/FandStattVer.jsx
index 31aeb7f..b1b21bf 100644
--- a/src/components/FandStattVer.jsx
+++ b/src/components/FandStattVer.jsx
@@ -1,12 +1,12 @@
 import { useState } from 'react'
-import { useFormData } from './FormContext.jsx'
+import { useFormData } from '../FormContext'
 
-export default function FandStattVer({left, right, onNext, isCompleted}) {
+export default function FandStattVer({left, right, onNext}) {
     const { formData, updateFormData } = useFormData()
     const [auswahl, setAuswahl] = useState(formData.stattgefunden || '')
     const handleOK = () => {
         if(!auswahl) {
-            alert('Bitte ja/nein wäölen')
+            alert('Bitte ja/nein wählen')
             return
         }
         updateFormData('stattgefunden', auswahl)
diff --git a/src/components/FandStattVer.jsx_claude b/src/components/FandStattVer.jsx_claude
deleted file mode 100644
index 9914d0c..0000000
--- a/src/components/FandStattVer.jsx_claude
+++ /dev/null
@@ -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
diff --git a/src/components/FormContext.jsx b/src/components/FormContext.jsx
deleted file mode 100644
index f402e29..0000000
--- a/src/components/FormContext.jsx
+++ /dev/null
@@ -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)
-}
diff --git a/src/components/Spende.jsx b/src/components/Spende.jsx
index 1e8ec48..6089b1d 100644
--- a/src/components/Spende.jsx
+++ b/src/components/Spende.jsx
@@ -1,67 +1,50 @@
 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)
-        onNext()
+    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)
+        if (art !== 'bar') {
+            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}
+                    <input type="radio" name="spende" value="bar"
+                        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}
+                    <input type="radio" name="spende" value="ueber"
+                        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}
+                    <input type="radio" name="spende" value="kasse"
+                        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}
+                    <input type="radio" name="spende" value="not"
+                        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>
     )
 }
\ No newline at end of file
diff --git a/src/main.jsx b/src/main.jsx
index b9a1a6d..2ac0028 100644
--- a/src/main.jsx
+++ b/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>,
 )