From c42965ee318fd4225eae16f00a658e19acaabd7d Mon Sep 17 00:00:00 2001
From: breitenbach76 <patrick@1789innovations.com>
Date: Sun, 7 Jun 2026 13:18:31 +0200
Subject: [PATCH] v8

---
 04_Tablet-Quiz/app/index.html | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/04_Tablet-Quiz/app/index.html b/04_Tablet-Quiz/app/index.html
index 1f6c982..8ee5b60 100644
--- a/04_Tablet-Quiz/app/index.html
+++ b/04_Tablet-Quiz/app/index.html
@@ -151,6 +151,11 @@
   .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}
+  /* RACI-Legende */
+  .raciLegend{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin:10px 0 4px;background:#f7f9fb}
+  .raciLegend .rlHead{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:700;margin-bottom:8px}
+  .raciLegend .rlRow{display:flex;align-items:flex-start;gap:10px;margin:5px 0;font-size:14px;line-height:1.45}
+  .raciLegend .rlRow .raciBadge{flex:none;margin-top:1px}
   /* 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}
@@ -1124,6 +1129,18 @@ 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("");
   return `<table class="raci"><thead><tr><th>Rolle</th><th>RACI</th></tr></thead><tbody>${rows}</tbody></table>`;
 }
+/* RACI-Legende (deutsch) — wird bei der RACI-Frage immer mit angezeigt. */
+function raciLegendHtml(){
+  const items = [
+    ["R","Responsible","verantwortlich für die Durchführung — erledigt die Aufgabe operativ"],
+    ["A","Accountable","rechenschaftspflichtig — trägt die Ergebnisverantwortung (genau eine Rolle)"],
+    ["C","Consulted","konsultiert — wird vorab um Rat/Beitrag gefragt"],
+    ["I","Informed","informiert — wird über das Ergebnis in Kenntnis gesetzt"]
+  ];
+  return `<div class="raciLegend"><div class="rlHead">Wofür RACI steht</div>` +
+    items.map(([l,en,de])=>`<div class="rlRow"><span class="raciBadge raci-${l}">${l}</span><span><b>${en}</b> — ${de}</span></div>`).join("") +
+    `</div>`;
+}
 
 function renderRun(){
   renderList();
@@ -1165,6 +1182,7 @@ function activitySteps(st){
       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:`Klärt die <b>RACI</b>: Wer ist R, A, C, I? Sortiert die Figuren ins <b>Aktiv-Feld (R·A·C·I)</b>.`,
+      legend: raciLegendHtml(),
       auf:`<h4 class="aufH">RACI</h4>${raciTable(st)}` },
     { label:"Artefakt",
       frage:`Welche <b>Artefaktkarte</b> entsteht hier und gehört in die <b>Service-Akte</b>?`,
@@ -1186,6 +1204,7 @@ function renderActivity(st){
       <div class="frageLabel">Aufgabe ${i+1}</div>
       ${step.frage}
     </div>`;
+  if(step.legend) html += step.legend;
   if(S.actReveal) html += `<div class="aufBox">${step.auf}</div>`;
   if(phaseEnd){
     const nextColor = PHASEN[next.phase].color;