Additional event informations can be added

app/Domains/Event/Views/Partials/SignUpForm/steps/StepAddons.vue

@@ -1,6 +1,10 @@
 <script setup>
+import {nextVisibleFrom, STEP_ADDONS} from "../composables/stepFlow.js";
+
 const props = defineProps({ formData: Object, event: Object, selectedAddons: Object })
 const emit = defineEmits(['next', 'back'])
+
+const next = () => emit('next', nextVisibleFrom(props.event, STEP_ADDONS))
 </script>
 
 <template>
@@ -39,7 +43,7 @@ const emit = defineEmits(['next', 'back'])
 
         <div class="btn-row">
             <button type="button" class="btn-secondary" @click="emit('back', 5)">← Zurück</button>
-            <button type="button" class="btn-primary" @click="emit('next', 7)">Weiter →</button>
+            <button type="button" class="btn-primary" @click="next">Weiter →</button>
         </div>
     </div>
 </template>

app/Domains/Event/Views/Partials/SignUpForm/steps/StepAllergies.vue

@@ -43,8 +43,8 @@ const emit = defineEmits(['next', 'back'])
             </tr>
             <tr>
                 <td colspan="2" class="btn-row">
-                    <button type="button" class="btn-secondary" @click="emit('back', 7)">← Zurück</button>
-                    <button type="button" class="btn-primary" @click="emit('next', 9)">Weiter →</button>
+                    <button type="button" class="btn-secondary" @click="emit('back', 8)">← Zurück</button>
+                    <button type="button" class="btn-primary" @click="emit('next', 10)">Weiter →</button>
                 </td>
             </tr>
         </table>

app/Domains/Event/Views/Partials/SignUpForm/steps/StepParticipationOptions.vue

@@ -0,0 +1,48 @@
+<script setup>
+import {computed} from "vue";
+import {nextVisibleFrom, prevVisibleFrom, STEP_PARTICIPATION_OPTIONS} from "../composables/stepFlow.js";
+
+const props = defineProps({formData: Object, event: Object})
+const emit = defineEmits(['next', 'back'])
+
+const questions = computed(() => props.event.participationOptions ?? [])
+
+// Pflichtfeld: "Weiter" erst möglich, wenn jede Frage beantwortet ist.
+const canProceed = computed(() =>
+    questions.value.every(q => {
+        const value = props.formData.participationOptions[q.key]
+        return value !== undefined && value !== null && String(value).trim() !== ''
+    })
+)
+
+const back = () => emit('back', prevVisibleFrom(props.event, STEP_PARTICIPATION_OPTIONS))
+const next = () => emit('next', nextVisibleFrom(props.event, STEP_PARTICIPATION_OPTIONS))
+</script>
+
+<template>
+    <div>
+        <h3>Teilnahmeoptionen</h3>
+        <p style="color: #6b7280; font-size: 0.95rem; margin-bottom: 20px;">
+            Bitte triff für jede Auswahl eine Entscheidung.
+        </p>
+
+        <table class="form-table">
+            <tr v-for="question in questions" :key="question.key">
+                <td>{{ question.label }}:</td>
+                <td>
+                    <select v-model="formData.participationOptions[question.key]">
+                        <option value="">Bitte wählen</option>
+                        <option v-for="option in question.options" :key="option.value" :value="option.value">
+                            {{ option.label }}
+                        </option>
+                    </select>
+                </td>
+            </tr>
+        </table>
+
+        <div class="btn-row">
+            <button type="button" class="btn-secondary" @click="back">← Zurück</button>
+            <button type="button" class="btn-primary" :disabled="!canProceed" @click="next">Weiter →</button>
+        </div>
+    </div>
+</template>

app/Domains/Event/Views/Partials/SignUpForm/steps/StepPaymentMethod.vue

@@ -78,8 +78,8 @@ const canProceed = computed(() => {
         </div>
 
         <div class="btn-row">
-            <button type="button" class="btn-secondary" @click="emit('back', 8)">← Zurück</button>
-            <button type="button" class="btn-primary" :disabled="!canProceed" @click="emit('next', 10)">Weiter →
+            <button type="button" class="btn-secondary" @click="emit('back', 9)">← Zurück</button>
+            <button type="button" class="btn-primary" :disabled="!canProceed" @click="emit('next', 11)">Weiter →
             </button>
         </div>
     </div>

app/Domains/Event/Views/Partials/SignUpForm/steps/StepPhotoPermissions.vue

@@ -1,16 +1,15 @@
 <script setup>
+import {prevVisibleFrom, STEP_ALLERGIES, STEP_PHOTO} from "../composables/stepFlow.js";
+
 const props = defineProps({ formData: Object, event: Object })
 const emit = defineEmits(['next', 'back'])
 
 const acceptAll = () => {
     Object.keys(props.formData.foto).forEach(k => props.formData.foto[k] = true)
-    emit('next', 8)
+    emit('next', STEP_ALLERGIES)
 }
 
-const back = () => {
-    const hasAddons = (props.event.addons?.length > 0) || props.event.solidarityPayment
-    emit('back', hasAddons ? 6 : 5)
-}
+const back = () => emit('back', prevVisibleFrom(props.event, STEP_PHOTO))
 </script>
 
 <template>
@@ -27,7 +26,7 @@ const back = () => {
         <div class="btn-row">
             <button type="button" class="btn-secondary" @click="back">← Zurück</button>
             <button type="button" class="btn-primary" style="background: #059669;" @click="acceptAll">Alle akzeptieren & weiter</button>
-            <button type="button" class="btn-primary" @click="emit('next', 8)">Weiter →</button>
+            <button type="button" class="btn-primary" @click="emit('next', 9)">Weiter →</button>
         </div>
     </div>
 </template>

app/Domains/Event/Views/Partials/SignUpForm/steps/StepRegistrationMode.vue

@@ -1,5 +1,6 @@
 <script setup>
-import { watch } from "vue";
+import {watch} from "vue";
+import {nextVisibleFrom, STEP_REGISTRATION} from "../composables/stepFlow.js";
 
 const props = defineProps({ formData: Object, event: Object })
 const emit = defineEmits(['next', 'back'])
@@ -17,8 +18,7 @@ watch(
 )
 
 const nextStep = () => {
-    const hasAddons = (props.event.addons?.length ?? 0) > 0
-    emit('next', hasAddons ? 6 : 7)
+    emit('next', nextVisibleFrom(props.event, STEP_REGISTRATION))
 }
 </script>
 

app/Domains/Event/Views/Partials/SignUpForm/steps/StepSummary.vue

@@ -32,8 +32,17 @@ const paymentConfirmationText = computed(() => {
     return template.replaceAll('{amount}', props.summaryAmount ?? '')
 })
 
-// Zurück führt zur Zahlungsart (9), sofern dieser Schritt gezeigt wurde; bei 0 € direkt zu Allergien (8).
-const backTarget = computed(() => props.summaryAmountValue > 0 ? 9 : 8)
+// Zurück führt zur Zahlungsart (10), sofern dieser Schritt gezeigt wurde; bei 0 € direkt zu Allergien (9).
+const backTarget = computed(() => props.summaryAmountValue > 0 ? 10 : 9)
+
+// Gewählte Teilnahmeoptionen für die Zusammenfassung (label statt value anzeigen).
+const selectedParticipationOptions = computed(() =>
+    (props.event.participationOptions ?? []).map(question => {
+        const value = props.formData.participationOptions[question.key]
+        const option = (question.options ?? []).find(o => o.value === value)
+        return {label: question.label, value: option?.label ?? ''}
+    }).filter(entry => entry.value !== '')
+)
 
 const canSubmit = computed(() =>
     props.formData.summary_information_correct
@@ -115,6 +124,11 @@ function eatingHabit() {
                     <td>{{ participationGroup() }}</td>
                 </tr>
 
+                <tr v-for="option in selectedParticipationOptions" :key="option.label">
+                    <td>{{ option.label }}:</td>
+                    <td>{{ option.value }}</td>
+                </tr>
+
                 <tr>
                     <td>Foto-Erlaubnis:</td>
                     <td>