Implemented additional event information

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

@@ -14,12 +14,13 @@ const props = defineProps({
 // 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: '', label: '', options: [{value: '', label: ''}, {value: '', label: ''}]})
+    questions.value.push({key: '', title: '', label: '', options: [{value: '', label: ''}, {value: '', label: ''}]})
 }
 
 function removeQuestion(index) {
@@ -36,8 +37,8 @@ function removeOption(question, index) {
 
 function validate() {
     for (const question of questions.value) {
-        if (question.label.trim() === '') {
-            toast.error('Bitte für jede Frage eine Beschriftung angeben.')
+        if (question.title.trim() === '') {
+            toast.error('Bitte für jede Frage einen Titel angeben.')
             return false
         }
 
@@ -83,12 +84,23 @@ async function save() {
 
         <div v-for="(question, qIndex) in questions" :key="qIndex" class="question-card">
             <div class="question-head">
-                <input
-                    type="text"
-                    v-model="question.label"
-                    class="width-full"
-                    placeholder="Frage, z. B. „Welchen Kurs möchtest du belegen?“"
-                />
+                <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>
 
@@ -127,10 +139,25 @@ async function save() {
 
 .question-head {
     display: flex;
-    align-items: center;
+    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;