diff --git a/04_Tablet-Quiz/app/index.html b/04_Tablet-Quiz/app/index.html
index cc49586..1f6c982 100644
--- a/04_Tablet-Quiz/app/index.html
+++ b/04_Tablet-Quiz/app/index.html
@@ -151,6 +151,13 @@
   .aufBox ul li{margin:3px 0}
   .roleChips{display:flex;flex-wrap:wrap;gap:6px}
   .roleChip{background:#eef0f3;border-radius:999px;padding:3px 11px;font-size:13px}
+  /* Aufgaben-Kasten (Anweisung hervorgehoben) */
+  .frageBox{background:#f7f9fc;border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:12px;padding:14px 18px;margin:6px 0;font-size:16px;line-height:1.55}
+  .frageBox .frageLabel{font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);font-weight:700;margin-bottom:5px}
+  /* Phasen-Abschluss-Feedback */
+  .phaseDone{margin:16px 0 4px;padding:16px 18px;border-radius:12px;background:#fffdf5;border:1px solid var(--line);border-left:4px solid var(--accent)}
+  .phaseDone .pdTitle{font-weight:800;font-size:18px;margin-bottom:6px}
+  .phaseDone p{color:var(--ink)}
 
   .actions { display:flex; gap:10px; align-items:center; margin-top:24px; flex-wrap:wrap; }
   .actions .spacer { flex:1; }
@@ -1104,6 +1111,14 @@ function gateGoto(st, i){
   }
   save(); draw();
 }
+/* Zielstation einer Gate-Entscheidung (für Phasenwechsel-Feedback). -1 = Ende/Ablehnung. */
+function gateTargetIndex(st, i){
+  const t = (GATE_FLOW[st.id] || [])[i] || "next";
+  if(t==="end") return -1;
+  if(t==="next") return Math.min(S.index+1, STATIONEN.length-1);
+  const j = STATIONEN.findIndex(s=>s.id===t);
+  return j>=0 ? j : Math.min(S.index+1, STATIONEN.length-1);
+}
 
 function raciTable(st){
   const rows = st.raci.map(([r,c])=>`<tr><td>${roleLabel(r)}</td><td><span class="raciBadge raci-${c}">${c}</span></td></tr>`).join("");
@@ -1143,16 +1158,16 @@ function renderRun(){
 function activitySteps(st){
   return [
     { label:"Diskussion",
-      frage:`<p class="lead">Diskutiert gemeinsam: Was fällt alles unter <b>„${st.name}"</b>? Was stellt ihr euch darunter vor? Nennt Beispiele.</p>`,
+      frage:`Diskutiert gemeinsam: Was fällt alles unter <b>„${st.name}"</b>? Was stellt ihr euch darunter vor? Nennt Beispiele.`,
       auf:`<p style="margin:0 0 8px">${st.beschreibung}</p><h4 class="aufH">Das fällt darunter</h4><ul>${st.umfasst.map(u=>`<li>${u}</li>`).join("")}</ul>` },
     { label:"Beteiligte Rollen",
-      frage:`<p class="lead">Welche Rollen sind an dieser Aktivität beteiligt? Stellt ihre Figuren auf die <b>Mulden des Station-Pucks</b>.</p>`,
+      frage:`Welche Rollen sind an dieser Aktivität beteiligt? Stellt ihre Figuren auf die <b>Mulden des Station-Pucks</b>.`,
       auf:`<h4 class="aufH">Beteiligte Rollen</h4><div class="roleChips">${st.raci.map(([r])=>`<span class="roleChip">${roleLabel(r)}</span>`).join("")}</div>` },
     { label:"RACI",
-      frage:`<p class="lead">Klärt die <b>RACI</b>: Wer ist R, A, C, I? Sortiert die Figuren ins <b>Aktiv-Feld (R·A·C·I)</b>.</p>`,
+      frage:`Klärt die <b>RACI</b>: Wer ist R, A, C, I? Sortiert die Figuren ins <b>Aktiv-Feld (R·A·C·I)</b>.`,
       auf:`<h4 class="aufH">RACI</h4>${raciTable(st)}` },
     { label:"Artefakt",
-      frage:`<p class="lead">Welche <b>Artefaktkarte</b> entsteht hier und gehört in die <b>Service-Akte</b>?</p>`,
+      frage:`Welche <b>Artefaktkarte</b> entsteht hier und gehört in die <b>Service-Akte</b>?`,
       auf:`<h4 class="aufH">Artefakt</h4><p style="margin:0"><b>${st.artefakt}</b></p>` }
   ];
 }
@@ -1161,8 +1176,25 @@ function renderActivity(st){
   const i = Math.min(S.actStep||0, steps.length-1);
   const step = steps[i];
   const isLast = i === steps.length-1;
-  let html = `<div class="tourProg">Schritt ${i+1}/${steps.length} · ${step.label}</div>${step.frage}`;
+  const phaseColor = PHASEN[st.phase].color;
+  const next = STATIONEN[S.index+1];
+  const lastOverall = S.index >= STATIONEN.length-1;
+  const phaseEnd = isLast && S.actReveal && next && next.phase !== st.phase;
+
+  let html = `<div class="tourProg">Schritt ${i+1}/${steps.length} · ${step.label}</div>
+    <div class="frageBox" style="border-left-color:${phaseColor}">
+      <div class="frageLabel">Aufgabe ${i+1}</div>
+      ${step.frage}
+    </div>`;
   if(S.actReveal) html += `<div class="aufBox">${step.auf}</div>`;
+  if(phaseEnd){
+    const nextColor = PHASEN[next.phase].color;
+    html += `<div class="phaseDone" style="border-left-color:${nextColor}">
+      <div class="pdTitle">🎉 Phase abgeschlossen</div>
+      <p style="margin:4px 0">Gratulation — ihr habt die Phase <b style="color:${phaseColor}">${PHASEN[st.phase].label}</b> zu Ende gespielt!</p>
+      <p style="margin:4px 0">Weiter geht's mit der Phase <b style="color:${nextColor}">${PHASEN[next.phase].label}</b>.</p>
+    </div>`;
+  }
 
   let actions = `<div class="actions">`;
   if(S.actReveal || i>0) actions += `<button class="ghost" id="actBack">← zurück</button>`;
@@ -1171,9 +1203,9 @@ function renderActivity(st){
   actions += `<div class="spacer"></div>`;
   if(!S.actReveal)        actions += `<button class="primary" id="actReveal">Auflösen →</button>`;
   else if(!isLast)        actions += `<button class="primary" id="actNext">Weiter →</button>`;
-  else                    actions += S.index < STATIONEN.length-1
-                            ? `<button class="primary" id="nextStation">Nächste Station →</button>`
-                            : `<button class="primary" id="finish">Durchlauf abschließen</button>`;
+  else if(lastOverall)    actions += `<button class="primary" id="finish">Durchlauf abschließen</button>`;
+  else if(phaseEnd)       actions += `<button class="primary" id="nextStation">→ Weiter zur Phase ${PHASEN[next.phase].label}</button>`;
+  else                    actions += `<button class="primary" id="nextStation">Nächste Station →</button>`;
   actions += `</div>`;
   return html + actions;
 }
@@ -1207,17 +1239,31 @@ function renderGateDone(st){
   const keeper = (st.raci.find(([r,c])=>c==="A")||[])[0];
   const sorNote = (keeper==="sor")
     ? `<p class="muted">Reicht die <b>Ressourcen-/Entscheidungshoheit der SOR</b> nicht (zusätzliche Mittel nötig), wird der Change zum <b>Demand</b> → über DPM ans <b>Mission Board</b>.</p>` : ``;
+  const tIdx = gateTargetIndex(st, i);
+  const target = tIdx>=0 ? STATIONEN[tIdx] : null;
+  const phaseEnd = target && target.phase !== st.phase;
+  let feedback = `<p class="muted">Legt den passenden <b>Entscheidungs-Chip</b> ans Gate.</p>`;
+  let nextLabel = `Weiter →`;
+  if(phaseEnd){
+    const curColor = PHASEN[st.phase].color, nextColor = PHASEN[target.phase].color;
+    nextLabel = `→ Weiter zur Phase ${PHASEN[target.phase].label}`;
+    feedback += `<div class="phaseDone" style="border-left-color:${nextColor}">
+      <div class="pdTitle">🎉 Phase abgeschlossen</div>
+      <p style="margin:4px 0">Gratulation — ihr habt die Phase <b style="color:${curColor}">${PHASEN[st.phase].label}</b> zu Ende gespielt!</p>
+      <p style="margin:4px 0">Weiter geht's mit der Phase <b style="color:${nextColor}">${PHASEN[target.phase].label}</b>.</p>
+    </div>`;
+  }
   return `
   <div class="step reveal">
     <div class="stepHead"><span class="n">⛩</span> Entscheidung getroffen</div>
     <div class="recBox"><h4>${pf[0]}</h4><p style="margin:0;color:var(--muted)">${pf[1]}</p></div>
     ${sorNote}
-    <p class="muted">Legt den passenden <b>Entscheidungs-Chip</b> ans Gate.</p>
+    ${feedback}
   </div>
   <div class="actions">
     <button class="ghost" id="gateBack">← andere Entscheidung</button>
     <div class="spacer"></div>
-    <button class="primary" id="gateNext">Weiter →</button>
+    <button class="primary" id="gateNext">${nextLabel}</button>
   </div>`;
 }