Handling of event addons

app/Domains/Event/Views/Details.vue

@@ -1,9 +1,11 @@
 <script setup>
-import {reactive, inject, onMounted} from 'vue';
+import {onMounted} from 'vue';
 import AppLayout from "../../../../resources/js/layouts/AppLayout.vue";
 import ShadowedBox from "../../../Views/Components/ShadowedBox.vue";
 import TabbedPage from "../../../Views/Components/TabbedPage.vue";
 import ParticipantsList from "./Partials/ParticipantsList.vue";
+import ParticipantsByOption from "./Partials/ParticipantsByOption.vue";
+import ParticipantsByAddon from "./Partials/ParticipantsByAddon.vue";
 import Overview from "./Partials/Overview.vue";
 
 const props = defineProps({
@@ -31,16 +33,21 @@ const tabs = [
         component: ParticipantsList,
         endpoint: "/api/v1/event/details/" + props.event.identifier + '/participants/by-participation-group',
     },
+    {
+        title: 'Teilis nach Teilnahmeoption',
+        component: ParticipantsByOption,
+        endpoint: "/api/v1/event/details/" + props.event.identifier + '/participants/by-participation-option',
+    },
+    {
+        title: 'Teilis mit Zusatzoptionen',
+        component: ParticipantsByAddon,
+        endpoint: "/api/v1/event/details/" + props.event.identifier + '/participants/by-addon',
+    },
     {
         title: 'Abgemeldete Teilis',
         component: ParticipantsList,
         endpoint: "/api/v1/event/details/" + props.event.identifier + '/participants/signed-off',
     },
-    {
-        title: 'Zusätze',
-        component: ParticipantsList,
-        endpoint: "/api/v1/cost-unit/open/archived-cost-units",
-    },
 ]
 
 onMounted(() => {

app/Domains/Event/Views/Partials/EventAddons.vue

@@ -0,0 +1,166 @@
+<script setup>
+import {ref} from "vue";
+import {toast} from "vue3-toastify";
+import {request} from "../../../../../resources/js/components/HttpClient.js";
+import AmountInput from "../../../../Views/Components/AmountInput.vue";
+
+const emit = defineEmits(['close'])
+
+const props = defineProps({
+    event: Object,
+})
+
+// Addon-Definition dieses Events: [ { key, title, description, price, flat } ].
+// key bleibt für bestehende Einträge erhalten (Bestandsschutz für bereits gebuchte Zusätze).
+const addons = ref((props.event.addons ?? []).map(a => ({
+    key: a.key ?? '',
+    title: a.title ?? '',
+    description: a.description ?? '',
+    price: a.price != null ? String(a.price).replace('.', ',') : '0',
+    flat: a.flat ?? false,
+})))
+
+function addAddon() {
+    addons.value.push({key: '', title: '', description: '', price: '0', flat: true})
+}
+
+function removeAddon(index) {
+    addons.value.splice(index, 1)
+}
+
+function validate() {
+    for (const addon of addons.value) {
+        if (addon.title.trim() === '') {
+            toast.error('Bitte für jeden Zusatz einen Titel angeben.')
+            return false
+        }
+    }
+
+    return true
+}
+
+async function save() {
+    if (!validate()) {
+        return
+    }
+
+    const response = await request('/api/v1/event/details/' + props.event.id + '/event-addons', {
+        method: 'POST',
+        body: {
+            addons: addons.value,
+        }
+    })
+
+    if (response.status !== 'success') {
+        toast.error(response.message ?? 'Die Zusatzoptionen konnten nicht gespeichert werden.')
+        return
+    }
+
+    toast.success('Die Zusatzoptionen wurden gespeichert')
+    emit('close')
+}
+</script>
+
+<template>
+    <div class="event-addons">
+        <h3>Zusatzoptionen</h3>
+        <p style="color: #6b7280; font-size: 0.9rem;">
+            Buchbare Zusätze zur Veranstaltung (z. B. Parkticket, Aufnäher). Jede Position ist eine Ja/Nein-Auswahl.
+            Preis 0 wird dem Teilnehmenden als „Kostenfrei" angezeigt. Ist „Pauschale" nicht gesetzt, wird der Preis
+            mit der Anzahl der Teilnahmetage multipliziert. Ohne Zusätze wird dieser Schritt in der Anmeldung
+            übersprungen.
+        </p>
+
+        <div v-for="(addon, index) in addons" :key="index" class="addon-card">
+            <div class="addon-head">
+                <div class="addon-fields">
+                    <label class="field-label">Titel</label>
+                    <input type="text" v-model="addon.title" class="width-full" placeholder="z. B. „Parkticket“"/>
+
+                    <label class="field-label">Beschreibung (optional)</label>
+                    <input type="text" v-model="addon.description" class="width-full" placeholder="Kurze Erläuterung"/>
+
+                    <div class="addon-price-row">
+                        <span>
+                            <label class="field-label">Preis</label>
+                            <AmountInput v-model="addon.price" class="width-small"/> Euro
+                        </span>
+                        <label class="flat-label">
+                            <input type="checkbox" v-model="addon.flat"/>
+                            Pauschale (nicht pro Tag)
+                        </label>
+                    </div>
+                </div>
+                <label class="link remove-link" @click="removeAddon(index)">Entfernen</label>
+            </div>
+        </div>
+
+        <div style="margin-top: 16px;">
+            <label class="link" @click="addAddon">+ Zusatz hinzufügen</label>
+        </div>
+
+        <div style="margin-top: 24px;">
+            <input type="button" value="Speichern" @click="save"/>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.addon-card {
+    margin-top: 16px;
+    padding: 14px;
+    background: #f8fafc;
+    border: 1px solid #e5e7eb;
+    border-radius: 10px;
+}
+
+.addon-head {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+}
+
+.addon-fields {
+    flex: 1;
+}
+
+.field-label {
+    display: block;
+    font-size: 0.78rem;
+    color: #6b7280;
+    margin: 6px 0 2px;
+}
+
+.addon-fields .field-label:first-child {
+    margin-top: 0;
+}
+
+.addon-price-row {
+    display: flex;
+    align-items: flex-end;
+    gap: 24px;
+    margin-top: 6px;
+}
+
+.flat-label {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 0.9rem;
+    color: #374151;
+}
+
+.width-full {
+    width: 100%;
+}
+
+.width-small {
+    width: 90px;
+}
+
+.remove-link {
+    white-space: nowrap;
+    color: #ef4444;
+    font-size: 0.85rem;
+}
+</style>

app/Domains/Event/Views/Partials/Overview.vue

@@ -1,15 +1,17 @@
 <script setup>
-    import {onMounted, reactive, ref} from "vue";
-    import ParticipationFees from "./ParticipationFees.vue";
-    import ParticipationSummary from "./ParticipationSummary.vue";
-    import CommonSettings from "./CommonSettings.vue";
-    import EventManagement from "./EventManagement.vue";
-    import Modal from "../../../../Views/Components/Modal.vue";
-    import MailCompose from "./MailCompose.vue";
-    import FullScreenModal from "../../../../Views/Components/FullScreenModal.vue";
-    import {toast} from "vue3-toastify";
+import {onMounted, reactive, ref} from "vue";
+import ParticipationFees from "./ParticipationFees.vue";
+import ParticipationOptions from "./ParticipationOptions.vue";
+import EventAddons from "./EventAddons.vue";
+import ParticipationSummary from "./ParticipationSummary.vue";
+import CommonSettings from "./CommonSettings.vue";
+import EventManagement from "./EventManagement.vue";
+import Modal from "../../../../Views/Components/Modal.vue";
+import MailCompose from "./MailCompose.vue";
+import FullScreenModal from "../../../../Views/Components/FullScreenModal.vue";
+import {toast} from "vue3-toastify";
 
-    const props = defineProps({
+const props = defineProps({
         data: Object,
     })
 
@@ -36,6 +38,14 @@
         displayData.value = 'participationFees';
     }
 
+    async function showParticipationOptions() {
+        displayData.value = 'participationOptions';
+    }
+
+async function showEventAddons() {
+    displayData.value = 'eventAddons';
+}
+
     async function showEventManagement() {
         displayData.value = 'eventManagement';
     }
@@ -107,6 +117,9 @@
 
 
     <ParticipationFees v-if="displayData === 'participationFees'" :event="dynamicProps.event"  @close="showMain" />
+    <ParticipationOptions v-else-if="displayData === 'participationOptions'" :event="dynamicProps.event"
+                          @close="showMain"/>
+    <EventAddons v-else-if="displayData === 'eventAddons'" :event="dynamicProps.event" @close="showMain"/>
     <CommonSettings v-else-if="displayData === 'commonSettings'" :event="dynamicProps.event"  @close="showMain" />
     <EventManagement v-else-if="displayData === 'eventManagement'" :event="dynamicProps.event"  @close="showMain" />
 
@@ -185,7 +198,10 @@
         <div class="event-flexbox-row bottom">
             <label style="font-size: 9pt;" class="link" @click="showCommonSettings">Allgemeine Einstellungen</label> &nbsp;
             <label style="font-size: 9pt;" class="link" @click="showEventManagement">Veranstaltungsleitung</label> &nbsp;
-            <label style="font-size: 9pt;" class="link" @click="showParticipationFees">Teilnahmegebühren</label>
+            <label style="font-size: 9pt;" class="link" @click="showParticipationFees">Teilnahmegebühren</label> &nbsp;
+            <label style="font-size: 9pt;" class="link" @click="showParticipationOptions">Teilnahmeoptionen</label>
+            &nbsp;
+            <label style="font-size: 9pt;" class="link" @click="showEventAddons">Zusatzoptionen</label>
             <a style="font-size: 9pt;" class="link" :href="'/budget/' + props.data.event.costUnit.id">Budget bearbeiten</a>
             <a style="font-size: 9pt;" class="link" :href="'/cost-unit/' + props.data.event.costUnit.id">Ausgabenübersicht</a>
             <a v-if="!dynamicProps.event.registrationAllowed && !dynamicProps.event.archived" style="color: #ff0000; font-size: 9pt;" class="link" @click="archiveEvent">Archivieren</a>

app/Domains/Event/Views/Partials/ParticipantData.vue

@@ -1,5 +1,5 @@
 <script setup>
-import {onMounted, reactive, watch} from "vue";
+import {computed, onMounted, reactive, watch} from "vue";
 import AmountInput from "../../../../Views/Components/AmountInput.vue";
 import DialableTelephoneNumber from "../../../../Views/Components/DialableTelephoneNumber.vue";
 
@@ -60,8 +60,27 @@ const form = reactive({
     amountPaid: '',
     amountExpected: '',
     cocStatus: '',
+    participationOptions: {},
+    selectedAddons: {},
 });
 
+// Teilnahmeoptionen des Events (Definition mit Titel/Frage/Optionen).
+const participationQuestions = computed(() => staticProps.event?.participationOptions ?? []);
+
+// Zusatzoptionen (Event-Addons) des Events.
+const eventAddons = computed(() => staticProps.event?.addons ?? []);
+
+// Gewählte Antwort (Options-Label) eines Teilnehmers zu einer Frage – für die Ansicht „Titel: Antwort".
+function answerLabelFor(questionKey) {
+    const answer = (props.participant?.participationOptions ?? []).find(o => o.questionKey === questionKey);
+    return answer?.valueLabel ?? '—';
+}
+
+// Hat der Teilnehmer diesen Zusatz gebucht? – für die Ansicht.
+function isAddonSelected(addonKey) {
+    return (props.participant?.selectedAddons ?? []).some(a => a.addonKey === addonKey);
+}
+
 watch(
     () => props.participant,
     (participant) => {
@@ -94,6 +113,12 @@ watch(
         form.amountPaid = participant?.amountPaid.short ?? '';
         form.amountExpected = participant?.amountExpected.short ?? '';
         form.cocStatus = participant?.efz_status ?? '';
+        form.participationOptions = Object.fromEntries(
+            (participant?.participationOptions ?? []).map(o => [o.questionKey, o.value])
+        );
+        form.selectedAddons = Object.fromEntries(
+            (participant?.selectedAddons ?? []).map(a => [a.addonKey, true])
+        );
     },
     { immediate: true }
 );
@@ -388,6 +413,43 @@ function saveParticipant() {
                 </table>
             </div>
         </div>
+
+        <div class="participationData" v-if="participationQuestions.length > 0 || eventAddons.length > 0">
+            <div>
+                <template v-if="participationQuestions.length > 0">
+                    <h3>Teilnahmeoptionen</h3>
+                    <table>
+                        <tr v-for="question in participationQuestions" :key="question.key">
+                            <th>{{ question.title || question.label }}</th>
+                            <td>
+                                <span v-if="!staticProps.editMode">{{ answerLabelFor(question.key) }}</span>
+                                <select v-else v-model="form.participationOptions[question.key]">
+                                    <option value="">— keine —</option>
+                                    <option v-for="option in question.options" :key="option.value"
+                                            :value="option.value">
+                                        {{ option.label }}
+                                    </option>
+                                </select>
+                            </td>
+                        </tr>
+                    </table>
+                </template>
+            </div>
+            <div>
+                <template v-if="eventAddons.length > 0">
+                    <h3>Zusatzoptionen</h3>
+                    <table>
+                        <tr v-for="addon in eventAddons" :key="addon.key">
+                            <th>{{ addon.title }}</th>
+                            <td>
+                                <span v-if="!staticProps.editMode">{{ isAddonSelected(addon.key) ? 'Ja' : '—' }}</span>
+                                <input v-else type="checkbox" v-model="form.selectedAddons[addon.key]"/>
+                            </td>
+                        </tr>
+                    </table>
+                </template>
+            </div>
+        </div>
     </div>
 
     <button v-if="!staticProps.editMode" class="button" @click="enableEditMode">Bearbeiten</button>
@@ -407,6 +469,10 @@ function saveParticipant() {
     gap: 20px;
 }
 
+.participationData table tr th {
+    width: 200px;
+}
+
 .participationData div {
     flex: 1;
     vertical-align: top;

app/Domains/Event/Views/Partials/ParticipantsByAddon.vue

@@ -0,0 +1,67 @@
+<script setup>
+import {computed, inject} from "vue";
+import ParticipantsList from "./ParticipantsList.vue";
+
+const props = defineProps({
+    data: {
+        type: Object,
+        default: () => ({participants: {}, event: {}, listType: ''}),
+    },
+});
+
+// Von TabbedPage bereitgestellt: erlaubt den Sprung zum Übersicht-Tab (Index 0), wo die
+// Zusatzoptionen konfiguriert werden.
+const selectTab = inject('selectTab', null);
+
+const hasAddons = computed(() => (props.data?.event?.addons?.length ?? 0) > 0);
+
+function goToOverview() {
+    if (selectTab) {
+        selectTab(0);
+    }
+}
+</script>
+
+<template>
+    <ParticipantsList v-if="hasAddons" :data="data" :show-group-mail="false"/>
+
+    <div v-else class="no-addons">
+        <h3>Keine Zusatzoptionen angelegt</h3>
+        <p>
+            Für diese Veranstaltung sind noch keine Zusatzoptionen angelegt. Sobald du unter
+            <strong>Übersicht → Zusatzoptionen</strong> Zusätze definierst, werden die Teilnehmenden hier nach
+            ihren gebuchten Zusätzen gruppiert.
+        </p>
+        <button v-if="selectTab" type="button" class="button" @click="goToOverview">
+            Zu den Zusatzoptionen
+        </button>
+    </div>
+</template>
+
+<style scoped>
+.no-addons {
+    max-width: 640px;
+    margin: 20px auto;
+    padding: 24px;
+    background: #f8fafc;
+    border: 1px solid #e5e7eb;
+    border-radius: 10px;
+    text-align: center;
+}
+
+.no-addons p {
+    color: #4b5563;
+    line-height: 1.6;
+}
+
+.button {
+    margin-top: 12px;
+    padding: 8px 18px;
+    background: #2563eb;
+    color: #fff;
+    border: none;
+    border-radius: 8px;
+    font-weight: 600;
+    cursor: pointer;
+}
+</style>

app/Domains/Event/Views/Partials/ParticipantsByOption.vue

@@ -0,0 +1,67 @@
+<script setup>
+import {computed, inject} from "vue";
+import ParticipantsList from "./ParticipantsList.vue";
+
+const props = defineProps({
+    data: {
+        type: Object,
+        default: () => ({participants: {}, event: {}, listType: ''}),
+    },
+});
+
+// Von TabbedPage bereitgestellt: erlaubt den Sprung zum Übersicht-Tab (Index 0), wo die
+// Teilnahmeoptionen konfiguriert werden.
+const selectTab = inject('selectTab', null);
+
+const hasOptions = computed(() => (props.data?.event?.participationOptions?.length ?? 0) > 0);
+
+function goToOverview() {
+    if (selectTab) {
+        selectTab(0);
+    }
+}
+</script>
+
+<template>
+    <ParticipantsList v-if="hasOptions" :data="data" :show-group-mail="false"/>
+
+    <div v-else class="no-options">
+        <h3>Keine Teilnahmeoptionen angelegt</h3>
+        <p>
+            Für diese Veranstaltung sind noch keine Teilnahmeoptionen angelegt. Sobald du unter
+            <strong>Übersicht → Teilnahmeoptionen</strong> Fragen definierst, werden die Teilnehmenden hier nach
+            ihrer Auswahl gruppiert.
+        </p>
+        <button v-if="selectTab" type="button" class="button" @click="goToOverview">
+            Zu den Teilnahmeoptionen
+        </button>
+    </div>
+</template>
+
+<style scoped>
+.no-options {
+    max-width: 640px;
+    margin: 20px auto;
+    padding: 24px;
+    background: #f8fafc;
+    border: 1px solid #e5e7eb;
+    border-radius: 10px;
+    text-align: center;
+}
+
+.no-options p {
+    color: #4b5563;
+    line-height: 1.6;
+}
+
+.button {
+    margin-top: 12px;
+    padding: 8px 18px;
+    background: #2563eb;
+    color: #fff;
+    border: none;
+    border-radius: 8px;
+    font-weight: 600;
+    cursor: pointer;
+}
+</style>

app/Domains/Event/Views/Partials/ParticipantsList.vue

@@ -20,6 +20,11 @@ const props = defineProps({
             listType: '',
         }),
     },
+    // Steuert, ob je Gruppe der „E-Mail an Gruppe senden"-Button angezeigt wird.
+    showGroupMail: {
+        type: Boolean,
+        default: true,
+    },
 });
 
 const today = format(new Date(), "yyyy-MM-dd");
@@ -404,7 +409,8 @@ function mailToGroup(groupKey) {
                         27 Jahre und älter: <strong>{{ getAgeCounts(participants)['27+'] ?? 0 }}</strong>
                     </td>
                     <td class="pl-summary-action">
-                        <input type="button" class="button" @click="mailToGroup(groupKey)" value="E-Mail an Gruppe senden" />
+                        <input v-if="showGroupMail" type="button" class="button" @click="mailToGroup(groupKey)"
+                               value="E-Mail an Gruppe senden"/>
                     </td>
                 </tr>
                 </tbody>

app/Domains/Event/Views/Partials/ParticipationOptions.vue

@@ -0,0 +1,182 @@
+<script setup>
+import {ref} from "vue";
+import {toast} from "vue3-toastify";
+import {request} from "../../../../../resources/js/components/HttpClient.js";
+
+const emit = defineEmits(['close'])
+
+const props = defineProps({
+    event: Object,
+})
+
+// Fragen-Definition dieses Events: [ { key, label, options: [ { value, label } ] } ].
+// key/value bleiben für bestehende Einträge erhalten (Bestandsschutz für bereits gespeicherte Antworten);
+// neue Einträge bekommen serverseitig beim Speichern einen stabilen Slug.
+const questions = ref((props.event.participationOptions ?? []).map(q => ({
+    key: q.key ?? '',
+    title: q.title ?? '',
+    label: q.label ?? '',
+    options: (q.options ?? []).map(o => ({value: o.value ?? '', label: o.label ?? ''})),
+})))
+
+function addQuestion() {
+    questions.value.push({key: '', title: '', label: '', options: [{value: '', label: ''}, {value: '', label: ''}]})
+}
+
+function removeQuestion(index) {
+    questions.value.splice(index, 1)
+}
+
+function addOption(question) {
+    question.options.push({value: '', label: ''})
+}
+
+function removeOption(question, index) {
+    question.options.splice(index, 1)
+}
+
+function validate() {
+    for (const question of questions.value) {
+        if (question.title.trim() === '') {
+            toast.error('Bitte für jede Frage einen Titel angeben.')
+            return false
+        }
+
+        const validOptions = question.options.filter(o => o.label.trim() !== '')
+        if (validOptions.length < 1) {
+            toast.error('Jede Frage braucht mindestens eine Auswahlmöglichkeit.')
+            return false
+        }
+    }
+
+    return true
+}
+
+async function save() {
+    if (!validate()) {
+        return
+    }
+
+    const response = await request('/api/v1/event/details/' + props.event.id + '/participation-options', {
+        method: 'POST',
+        body: {
+            questions: questions.value,
+        }
+    })
+
+    if (response.status !== 'success') {
+        toast.error(response.message ?? 'Die Teilnahmeoptionen konnten nicht gespeichert werden.')
+        return
+    }
+
+    toast.success('Die Teilnahmeoptionen wurden gespeichert')
+    emit('close')
+}
+</script>
+
+<template>
+    <div class="participation-options">
+        <h3>Teilnahmeoptionen</h3>
+        <p style="color: #6b7280; font-size: 0.9rem;">
+            Pflicht-Auswahlfragen für die Anmeldung (z. B. Kurs oder Stufe). Je Frage ist genau eine Option wählbar.
+            Ohne Fragen wird dieser Schritt in der Anmeldung übersprungen.
+        </p>
+
+        <div v-for="(question, qIndex) in questions" :key="qIndex" class="question-card">
+            <div class="question-head">
+                <div class="question-fields">
+                    <label class="field-label">Titel (Überschrift / Feldbeschriftung)</label>
+                    <input
+                        type="text"
+                        v-model="question.title"
+                        class="width-full"
+                        placeholder="Titel, z. B. „Kurs“"
+                    />
+
+                    <label class="field-label">Frage / Erklärtext (optional)</label>
+                    <input
+                        type="text"
+                        v-model="question.label"
+                        class="width-full"
+                        placeholder="z. B. „Welchen Kurs möchtest du belegen?“"
+                    />
+                </div>
+                <label class="link remove-link" @click="removeQuestion(qIndex)">Frage entfernen</label>
+            </div>
+
+            <div class="options">
+                <div v-for="(option, oIndex) in question.options" :key="oIndex" class="option-row">
+                    <input
+                        type="text"
+                        v-model="option.label"
+                        class="width-full"
+                        placeholder="Auswahlmöglichkeit"
+                    />
+                    <label class="link remove-link" @click="removeOption(question, oIndex)">✕</label>
+                </div>
+                <label class="link" @click="addOption(question)">+ Option hinzufügen</label>
+            </div>
+        </div>
+
+        <div style="margin-top: 16px;">
+            <label class="link" @click="addQuestion">+ Frage hinzufügen</label>
+        </div>
+
+        <div style="margin-top: 24px;">
+            <input type="button" value="Speichern" @click="save"/>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.question-card {
+    margin-top: 16px;
+    padding: 14px;
+    background: #f8fafc;
+    border: 1px solid #e5e7eb;
+    border-radius: 10px;
+}
+
+.question-head {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+}
+
+.question-fields {
+    flex: 1;
+}
+
+.field-label {
+    display: block;
+    font-size: 0.78rem;
+    color: #6b7280;
+    margin: 6px 0 2px;
+}
+
+.question-fields .field-label:first-child {
+    margin-top: 0;
+}
+
+.options {
+    margin-top: 12px;
+    padding-left: 12px;
+}
+
+.option-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 8px;
+}
+
+.width-full {
+    width: 100%;
+}
+
+.remove-link {
+    white-space: nowrap;
+    color: #ef4444;
+    font-size: 0.85rem;
+}
+</style>

app/Domains/Event/Views/Partials/SignUpForm/SignupForm.vue

@@ -6,6 +6,7 @@ import StepPersonalData from './steps/StepPersonalData.vue'
 import StepRegistrationMode from './steps/StepRegistrationMode.vue'
 import StepArrival from './steps/StepArrival.vue'
 import StepAddons from './steps/StepAddons.vue'
+import StepParticipationOptions from './steps/StepParticipationOptions.vue'
 import StepPhotoPermissions from './steps/StepPhotoPermissions.vue'
 import StepAllergies from './steps/StepAllergies.vue'
 import StepPaymentMethod from './steps/StepPaymentMethod.vue'
@@ -23,7 +24,8 @@ const emit = defineEmits(['registrationDone'])
 
 const {
     currentStep, goToStep, formData, selectedAddons,
-    submit, submitting, submitResult, summaryLoading, summaryAmount, summaryAmountValue
+    submit, submitting, submitResult, summaryLoading, summaryAmount, summaryAmountValue,
+    summaryBaseAmount, summaryAddonLines
 } = useSignupForm(props.event, props.participantData)
 
 const steps = [
@@ -33,10 +35,11 @@ const steps = [
     { step: 4, label: 'An-/Abreise' },
     { step: 5, label: 'Teilnahmegruppe' },
     { step: 6, label: 'Zusatzoptionen' },
-    { step: 7, label: 'Fotoerlaubnis' },
-    { step: 8, label: 'Allergien' },
-    {step: 9, label: 'Zahlungsart'},
-    {step: 10, label: 'Zusammenfassung'},
+    {step: 7, label: 'Teilnahmeoptionen'},
+    {step: 8, label: 'Fotoerlaubnis'},
+    {step: 9, label: 'Allergien'},
+    {step: 10, label: 'Zahlungsart'},
+    {step: 11, label: 'Zusammenfassung'},
 ]
 </script>
 
@@ -93,14 +96,20 @@ const steps = [
                 <StepArrival        v-if="currentStep === 4" :formData="formData" :event="event" @next="goToStep" @back="goToStep" />
                 <StepRegistrationMode v-if="currentStep === 5" :formData="formData" :event="event" @next="goToStep" @back="goToStep" />
                 <StepAddons         v-if="currentStep === 6" :formData="formData" :event="event" :selectedAddons="selectedAddons" @next="goToStep" @back="goToStep" />
-                <StepPhotoPermissions v-if="currentStep === 7" :formData="formData" :event="event" @next="goToStep" @back="goToStep" />
-                <StepAllergies      v-if="currentStep === 8" :formData="formData" :event="event" @next="goToStep" @back="goToStep" />
-                <StepPaymentMethod v-if="currentStep === 9" :formData="formData" :event="event" @next="goToStep"
+                <StepParticipationOptions v-if="currentStep === 7" :formData="formData" :event="event" @next="goToStep"
+                                          @back="goToStep"/>
+                <StepPhotoPermissions v-if="currentStep === 8" :formData="formData" :event="event" @next="goToStep"
+                                      @back="goToStep"/>
+                <StepAllergies v-if="currentStep === 9" :formData="formData" :event="event" @next="goToStep"
+                               @back="goToStep"/>
+                <StepPaymentMethod v-if="currentStep === 10" :formData="formData" :event="event" @next="goToStep"
                                    @back="goToStep"/>
                 <StepSummary
-                    v-if="currentStep === 10"
+                    v-if="currentStep === 11"
                     :formData="formData"
                     :event="event"
+                    :summaryBaseAmount="summaryBaseAmount"
+                    :summaryAddonLines="summaryAddonLines"
                     :summaryAmount="summaryAmount"
                     :summaryAmountValue="summaryAmountValue"
                     :summaryLoading="summaryLoading"

app/Domains/Event/Views/Partials/SignUpForm/composables/stepFlow.js

@@ -0,0 +1,45 @@
+// Zentrale Schrittreihenfolge des Anmelde-Wizards. Einige Schritte sind optional und werden
+// übersprungen, wenn sie für das Event nicht zutreffen (Zusatzoptionen, Teilnahmeoptionen).
+// Der Zahlungsschritt wird separat in useSignupForm anhand des berechneten Betrags übersprungen.
+export const STEP_AGE = 1
+export const STEP_CONTACT = 2
+export const STEP_PERSONAL = 3
+export const STEP_ARRIVAL = 4
+export const STEP_REGISTRATION = 5
+export const STEP_ADDONS = 6
+export const STEP_PARTICIPATION_OPTIONS = 7
+export const STEP_PHOTO = 8
+export const STEP_ALLERGIES = 9
+export const STEP_PAYMENT = 10
+export const STEP_SUMMARY = 11
+
+// Ob ein (optionaler) Schritt für dieses Event angezeigt wird.
+export function stepVisible(event, step) {
+    if (step === STEP_ADDONS) {
+        return (event.addons?.length ?? 0) > 0
+    }
+
+    if (step === STEP_PARTICIPATION_OPTIONS) {
+        return (event.participationOptions?.length ?? 0) > 0
+    }
+
+    return true
+}
+
+// Nächster sichtbarer Schritt nach `step` (überspringt ausgeblendete optionale Schritte).
+export function nextVisibleFrom(event, step) {
+    let candidate = step + 1
+    while (candidate < STEP_SUMMARY && !stepVisible(event, candidate)) {
+        candidate++
+    }
+    return candidate
+}
+
+// Vorheriger sichtbarer Schritt vor `step`.
+export function prevVisibleFrom(event, step) {
+    let candidate = step - 1
+    while (candidate > STEP_AGE && !stepVisible(event, candidate)) {
+        candidate--
+    }
+    return candidate
+}

app/Domains/Event/Views/Partials/SignUpForm/composables/useSignupForm.js

@@ -1,5 +1,6 @@
 import {reactive, ref} from 'vue'
 import axios from 'axios'
+import {STEP_PAYMENT, STEP_SUMMARY} from './stepFlow.js'
 
 export function useSignupForm(event, participantData) {
     const currentStep = ref(1)
@@ -16,6 +17,8 @@ export function useSignupForm(event, participantData) {
         eatingHabit: 'EATING_HABIT_VEGAN',
         paymentMethod: activeMethods.length === 1 ? activeMethods[0].slug : null,
         paymentOptions: {},
+        // Antworten auf die event-spezifischen Teilnahmeoptionen: { [question.key]: option.value }
+        participationOptions: {},
         userId: participantData.id,
         eventId: event.id,
         vorname: participantData.firstname ?? '',
@@ -57,6 +60,8 @@ export function useSignupForm(event, participantData) {
 
     const summaryAmount = ref('')
     const summaryAmountValue = ref(0)
+    const summaryBaseAmount = ref('')
+    const summaryAddonLines = ref([])
 
     const fetchAmount = async () => {
         summaryLoading.value = true
@@ -74,15 +79,13 @@ export function useSignupForm(event, participantData) {
             })
             summaryAmount.value = res.data.amount
             summaryAmountValue.value = Number(res.data.amountValue ?? 0)
+            summaryBaseAmount.value = res.data.baseAmount ?? ''
+            summaryAddonLines.value = res.data.addons ?? []
         } finally {
             summaryLoading.value = false
         }
     }
 
-    // Steps: ... 8 Allergien, 9 Zahlungsart, 10 Zusammenfassung.
-    const STEP_PAYMENT = 9
-    const STEP_SUMMARY = 10
-
     const goToStep = async (step) => {
         if (step === STEP_PAYMENT) {
             // Betrag ermitteln: Bei 0 € wird die Zahlungsart-Auswahl übersprungen.
@@ -129,6 +132,8 @@ export function useSignupForm(event, participantData) {
         submitResult,
         summaryLoading,
         summaryAmount,
-        summaryAmountValue
+        summaryAmountValue,
+        summaryBaseAmount,
+        summaryAddonLines
     }
 }

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>
@@ -25,13 +29,21 @@ const emit = defineEmits(['next', 'back'])
         <!-- Addons -->
         <div v-if="event.addons?.length > 0">
             <h3>Zusatzoptionen</h3>
-            <div v-for="addon in event.addons" :key="addon.id" style="margin-bottom: 16px; padding: 12px; background: #f8fafc; border-radius: 8px;">
+            <div v-for="addon in event.addons" :key="addon.key"
+                 style="margin-bottom: 16px; padding: 12px; background: #f8fafc; border-radius: 8px;">
                 <label style="display: flex; gap: 12px; cursor: pointer;">
-                    <input type="checkbox" v-model="selectedAddons[addon.id]" style="margin-top: 4px;" />
+                    <input type="checkbox" v-model="selectedAddons[addon.key]" style="margin-top: 4px;"/>
                     <span>
-                        <strong>{{ addon.name }}</strong>
-                        <span style="display: block; color: #6b7280; font-size: 0.875rem;">Betrag: {{ addon.amount }}</span>
-                        <span style="display: block; color: #374151; font-size: 0.875rem; margin-top: 4px;">{{ addon.description }}</span>
+                        <strong>{{ addon.title }}</strong>
+                        <span style="display: block; color: #6b7280; font-size: 0.875rem;">
+                            <template v-if="addon.free">Kostenfrei</template>
+                            <template v-else>{{ addon.priceReadable }}<template
+                                v-if="!addon.flat"> / Tag</template></template>
+                        </span>
+                        <span v-if="addon.description"
+                              style="display: block; color: #374151; font-size: 0.875rem; margin-top: 4px;">{{
+                                addon.description
+                            }}</span>
                     </span>
                 </label>
             </div>
@@ -39,7 +51,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,62 @@
+<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.title || question.label }}:
+                    <span v-if="question.title && question.label" class="option-hint">{{ question.label }}</span>
+                </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>
+
+<style scoped>
+.option-hint {
+    display: block;
+    margin-top: 2px;
+    font-size: 0.8rem;
+    font-style: italic;
+    font-weight: 400;
+    color: #6b7280;
+}
+</style>

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

@@ -7,6 +7,8 @@ const PAYMENT_ACCOUNT_TRANSACTION = 'PAYMENT_ACCOUNT_TRANSACTION'
 const props = defineProps({
     formData: Object,
     event: Object,
+    summaryBaseAmount: {type: String, default: ''},
+    summaryAddonLines: {type: Array, default: () => []},
     summaryAmount: String,
     summaryAmountValue: {type: Number, default: 0},
     summaryLoading: Boolean,
@@ -32,8 +34,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.title || question.label, value: option?.label ?? ''}
+    }).filter(entry => entry.value !== '')
+)
 
 const canSubmit = computed(() =>
     props.formData.summary_information_correct
@@ -115,6 +126,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>
@@ -149,6 +165,22 @@ function eatingHabit() {
                 <tr><td>Abreise:</td><td>{{ formatDate(formData.departure) }}</td></tr>
             </table>
 
+            <h4 style="margin: 0 0 8px 0;">Kostenübersicht</h4>
+            <table class="form-table cost-table" style="margin-bottom: 20px;">
+                <tr>
+                    <td>Teilnahmebeitrag:</td>
+                    <td>{{ summaryBaseAmount }}</td>
+                </tr>
+                <tr v-for="addon in summaryAddonLines" :key="addon.key">
+                    <td>{{ addon.title }}:</td>
+                    <td>{{ addon.free ? 'Kostenfrei' : addon.amount }}</td>
+                </tr>
+                <tr class="cost-total">
+                    <td><strong>Gesamtbetrag:</strong></td>
+                    <td><strong>{{ summaryAmount }}</strong></td>
+                </tr>
+            </table>
+
             <div style="display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px;">
                 <label style="display: flex; gap: 10px; cursor: pointer;">
                     <input type="checkbox" v-model="formData.summary_information_correct" />
@@ -182,3 +214,10 @@ function eatingHabit() {
         </div>
     </div>
 </template>
+
+<style scoped>
+.cost-table .cost-total td {
+    border-top: 1px solid #d1d5db;
+    padding-top: 8px;
+}
+</style>