Erweitert den MatchReportApiDialog um eine neue Funktion zur Verwaltung des Abschlussstatus der Begrüßung. Fügt einen Toggle-Button hinzu, um den Status als abgeschlossen oder nicht abgeschlossen zu kennzeichnen, und aktualisiert die Benutzeroberfläche mit entsprechenden visuellen Hinweisen. Implementiert Logik zum automatischen Wechsel zur Ergebniserfassung nach Abschluss der Begrüßung.

frontend/src/components/MatchReportApiDialog.vue

@@ -41,10 +41,11 @@
                             <span v-if="isGuestLineupCertified" class="certified-badge">✓</span>
                         </button>
 
-                        <button class="section-btn" :class="{ active: activeSection === 'greeting', disabled: !canOpenNextStages }"
+                        <button class="section-btn" :class="{ active: activeSection === 'greeting', completed: isGreetingCompleted, disabled: !canOpenNextStages }"
                             @click="setActiveSection('greeting')" :disabled="!canOpenNextStages">
                             <div class="section-icon">👋</div>
                             <span>Begrüßung</span>
+                            <span v-if="isGreetingCompleted" class="completed-badge">✅</span>
                         </button>
 
                         <button class="section-btn" :class="{ active: activeSection === 'result', disabled: !canOpenNextStages }"
@@ -306,7 +307,16 @@
                     </div>
 
                     <div v-else-if="activeSection === 'greeting'" class="greeting-content">
-                        <h3>Begrüßung</h3>
+                        <div class="greeting-header">
+                            <h3>Begrüßung</h3>
+                            <button 
+                                @click="toggleGreetingCompleted()" 
+                                class="completion-toggle-btn"
+                                :class="{ 'completed': isGreetingCompleted }"
+                            >
+                                {{ isGreetingCompleted ? '✅ Abgeschlossen' : '⚪ Abgeschlossen' }}
+                            </button>
+                        </div>
                         <div class="greeting-box" v-html="greetingRendered"></div>
                     </div>
 
@@ -642,6 +652,7 @@ export default {
             guestPin: '',
             isHomeLineupCertified: false,
             isGuestLineupCertified: false,
+            isGreetingCompleted: false,
             originalHomePin: '',
             originalGuestPin: '',
             showPinModal: false,
@@ -817,6 +828,19 @@ Wir wünschen den Spielen einen schönen, spannenden und fairen Verlauf und begr
             }
         },
 
+        // Toggle Begrüßung abgeschlossen/nicht abgeschlossen
+        toggleGreetingCompleted() {
+            this.isGreetingCompleted = !this.isGreetingCompleted;
+            
+            if (this.isGreetingCompleted) {
+                // Wechsle zu Ergebniserfassung nach dem Absschließen
+                this.setActiveSection('result');
+                console.log('🎯 Begrüßung abgeschlossen - wechsle zu Ergebniserfassung');
+            } else {
+                console.log('🎯 Begrüßung wieder geöffnet');
+            }
+        },
+
         // Auto-Fill für leere Matches
         autoFillEmptyMatches() {
             console.log('🔧 Starte Auto-Fill für leere Matches...');
@@ -3011,13 +3035,24 @@ Wir wünschen den Spielen einen schönen, spannenden und fairen Verlauf und begr
             const guestPinValid = this.pinModalGuestPin === this.originalGuestPin || this.pinModalGuestPin === '1234';
 
             if (homePinValid && guestPinValid) {
+                console.log('✅ PIN erfolgreich - entsperre Aufstellung und wechsle Tab');
+                
                 // Nur den angeforderten Tab entsperren
                 if (this.pinModalTeam === 'homeLineup' || this.pinModalTeam === 'home') {
                     this.isHomeLineupCertified = false;
+                    this.closePinModal();
+                    // Wechsle sofort zu Heim-Aufstellungs-Tab
+                    this.setActiveSection('homeLineup');
+                    console.log('🎯 Wechsle zu Heim-Aufstellungs-Tab');
                 } else if (this.pinModalTeam === 'guestLineup' || this.pinModalTeam === 'guest') {
                     this.isGuestLineupCertified = false;
+                    this.closePinModal();
+                    // Wechsle sofort zu Gast-Aufstellungs-Tab
+                    this.setActiveSection('guestLineup');
+                    console.log('🎯 Wechsle zu Gast-Aufstellungs-Tab');
+                } else {
+                    this.closePinModal();
                 }
-                this.closePinModal();
             } else {
                 this.pinModalError = 'Eine oder beide PINs sind nicht korrekt';
             }
@@ -3689,7 +3724,7 @@ Wir wünschen den Spielen einen schönen, spannenden und fairen Verlauf und begr
 }
 
 .completed {
-    color: #28a745;
+    color: #f59e0b;
     font-weight: bold;
 }
 
@@ -4059,6 +4094,13 @@ Wir wünschen den Spielen einen schönen, spannenden und fairen Verlauf und begr
     margin-left: 8px;
 }
 
+.completed-badge {
+    font-size: 0.8em;
+    padding: 0 6px;
+    border-radius: 10px;
+    margin-left: 8px;
+}
+
 /* PIN-Modal Styles */
 .pin-modal-overlay {
     position: fixed;
@@ -4329,6 +4371,46 @@ Wir wünschen den Spielen einen schönen, spannenden und fairen Verlauf und begr
     opacity: 0.7;
 }
 
+/* Begrüßungs-Header */
+.greeting-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+}
+
+.greeting-header h3 {
+    margin: 0;
+}
+
+.completion-toggle-btn {
+    background: transparent;
+    color: #6b7280;
+    border: 2px solid #d1d5db;
+    padding: 8px 16px;
+    border-radius: 8px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    font-size: 14px;
+}
+
+.completion-toggle-btn:hover:not(.completed) {
+    background: #f3f4f6;
+    border-color: #9ca3af;
+}
+
+.completion-toggle-btn.completed {
+    background: transparent;
+    color: #f59e0b;
+    border-color: #f59e0b;
+}
+
+.completion-toggle-btn.completed:hover {
+    background: #fef3c7;
+    color: #f59e0b;
+}
+
 /* Ergebniserfassungs-Header */
 .result-header {
     display: flex;