From 868cdda276d5735f7a26879d29b93ff34778639c Mon Sep 17 00:00:00 2001
From: Thomas <dornbirn@gmx.at>
Date: Mon, 24 Aug 2026 09:19:10 +0200
Subject: [PATCH] Fluss-Endscreen: zwei Felder (Rueckmeldung -> Aktionen) +
 Badges nebeneinander

Feld 1 = Rueckmeldung (Sterne/Stats/Badges/Reflexion) mit "Weiter"-Button (erst nach
Reflexions-Antwort aktiv); Feld 2 = "Wie geht's weiter?" (Stufen/Erneut versuchen +
Zurueck zur Startseite). end-badges jetzt display:flex (nebeneinander statt gestapelt).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 App/sims/fluss/game.html | 49 +++++++++++++++++++++++++---------------
 1 file changed, 31 insertions(+), 18 deletions(-)

diff --git a/App/sims/fluss/game.html b/App/sims/fluss/game.html
index b9a6235..396b43f 100644
--- a/App/sims/fluss/game.html
+++ b/App/sims/fluss/game.html
@@ -533,29 +533,38 @@
      ============================================================ -->
 <div class="ggs-overlay" id="end-overlay" style="display:none">
   <div class="ggs-overlay-card ggs-results">
-    <div class="ggs-results-icon">🏆</div>
-    <div class="ggs-results-title" id="end-title">Simulation abgeschlossen!</div>
-    <div class="ggs-results-subtitle" id="end-subtitle">Du hast den Fluss 100 Jahre lang gemanagt.</div>
-    <div class="ggs-stars" id="end-stars">
-      <span class="ggs-star">★</span><span class="ggs-star">★</span><span class="ggs-star">★</span><span class="ggs-star">★</span><span class="ggs-star">★</span>
-    </div>
-    <div class="ggs-results-stats" id="end-stats"></div>
+    <!-- ===== FELD 1: Rückmeldung ===== -->
+    <div id="end-step1">
+      <div class="ggs-results-icon">🏆</div>
+      <div class="ggs-results-title" id="end-title">Simulation abgeschlossen!</div>
+      <div class="ggs-results-subtitle" id="end-subtitle">Du hast den Fluss 100 Jahre lang gemanagt.</div>
+      <div class="ggs-stars" id="end-stars">
+        <span class="ggs-star">★</span><span class="ggs-star">★</span><span class="ggs-star">★</span><span class="ggs-star">★</span><span class="ggs-star">★</span>
+      </div>
+      <div class="ggs-results-stats" id="end-stats"></div>
 
-    <!-- Verdiente Erfolgs-Badges (6 Slots, leer = ausgegraut) -->
-    <div class="ggs-badges-earned" id="end-badges" style="justify-content:center;margin:12px 0"></div>
+      <!-- Verdiente Erfolgs-Badges (nebeneinander, leer = ausgegraut) -->
+      <div class="ggs-badges-earned" id="end-badges" style="display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:10px 0"></div>
 
-    <!-- Reflexionsfrage — eine pro Durchgang, Pflicht vor dem Weiter-Button -->
-    <div class="ggs-reflection" id="end-reflection" style="margin:12px 0 18px">
-      <div class="ggs-reflection-q" id="end-reflection-q">Was war in diesem Durchgang deine wirksamste Entscheidung?</div>
-      <div id="end-reflection-options">
-        <!-- dynamisch befuellt -->
+      <!-- Reflexionsfrage — Pflicht vor dem Weiter-Button -->
+      <div class="ggs-reflection" id="end-reflection" style="margin:10px 0 14px">
+        <div class="ggs-reflection-q" id="end-reflection-q">Was war in diesem Durchgang deine wirksamste Entscheidung?</div>
+        <div id="end-reflection-options"><!-- dynamisch befuellt --></div>
+      </div>
+
+      <div style="display:flex;justify-content:center">
+        <button id="end-weiter" class="ggs-btn ggs-btn-primary" disabled
+                onclick="document.getElementById('end-step1').style.display='none';document.getElementById('end-step2').style.display=''">Weiter →</button>
       </div>
     </div>
 
-    <!-- Aktions-Leiste wird in bootFluss() dynamisch befuellt:
-         - Klassen-Session (classId): nur "Neu starten" (Stufe bleibt)
-         - Freie Session: drei Stufen-Buttons zur Auswahl -->
-    <div id="end-actions" style="display:flex;gap:8px;justify-content:center;flex-wrap:wrap"></div>
+    <!-- ===== FELD 2: Wie geht's weiter? ===== -->
+    <div id="end-step2" style="display:none">
+      <div class="ggs-results-icon">🚀</div>
+      <div class="ggs-results-title">Wie geht's weiter?</div>
+      <!-- Aktions-Leiste (Stufen-Auswahl bzw. Erneut versuchen + Zurück zur Startseite) -->
+      <div id="end-actions" style="display:flex;gap:8px;justify-content:center;flex-wrap:wrap"></div>
+    </div>
   </div>
 </div>
 
@@ -1967,6 +1976,9 @@ function submitReflection(levelNum, question, answer) {
     document.getElementById('end-title').textContent = 'Durchgang beendet — 100 Jahre sind um.';
     document.getElementById('end-subtitle').textContent = 'Beste Leistung: ' + summary.score + ' / 100';
     renderEndActions();
+    // Zwei-Felder-Endscreen: immer mit Feld 1 (Rückmeldung) starten.
+    var _s1=document.getElementById('end-step1'), _s2=document.getElementById('end-step2'), _wb=document.getElementById('end-weiter');
+    if(_s1) _s1.style.display=''; if(_s2) _s2.style.display='none'; if(_wb) _wb.disabled=true;
     showOverlay('end-overlay');
     if (window.flAudio) flAudio.play(summary.stars >= 3 ? 'level-won' : 'level-lost');
     submitAssessment({
@@ -2029,6 +2041,7 @@ function submitReflection(levelNum, question, answer) {
         box.querySelectorAll('.ggs-reflection-option').forEach(function(o){ o.classList.remove('selected'); });
         row.classList.add('selected');
         submitReflection(game.level, question, opt);
+        var wb = document.getElementById('end-weiter'); if (wb) wb.disabled = false;  // erst nach Antwort weiter
       });
       box.appendChild(row);
     });