.

04_Tablet-Quiz/app/index.html

@@ -116,6 +116,23 @@
   .pfad { border:1px solid var(--line); border-left:4px solid var(--transition); border-radius:8px; padding:10px 12px; }
   .pfad b { display:block; }
 
+  /* ---- Minimal Run-Screens ---- */
+  .sHead{display:flex;align-items:center;gap:10px}
+  .sHead .sId{color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
+  .sTitle{font-size:22px;font-weight:700;line-height:1.25;margin:10px 0 4px}
+  .caseLine{color:var(--muted);font-size:13px;margin:0 0 22px}
+  .lead{font-size:16px;margin:0 0 16px}
+  .todo{margin:0 0 8px;padding-left:22px}
+  .todo li{margin:8px 0}
+  .crit{margin:8px 0 0;padding-left:20px;color:var(--muted)}
+  .crit li{margin:4px 0}
+  details.det{margin:8px 0 4px;border-top:1px solid var(--line);padding-top:12px}
+  details.det>summary{cursor:pointer;color:var(--muted);font-size:14px;font-weight:600;list-style:none}
+  details.det>summary::-webkit-details-marker{display:none}
+  details.det>summary::before{content:"▸ ";color:var(--muted)}
+  details.det[open]>summary::before{content:"▾ "}
+  details.det>div,details.det>p,details.det>ul{margin-top:10px}
+
   .actions { display:flex; gap:10px; align-items:center; margin-top:24px; flex-wrap:wrap; }
   .actions .spacer { flex:1; }
   .unclear { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:14px; }
@@ -1052,13 +1069,9 @@ function renderRun(){
     : ``;
   let body = `
     ${loopBanner}
-    ${chip}
+    <div class="sHead">${chip}<span class="sId">${st.id}</span></div>
-    <div class="stationName">${st.name}</div>
+    <h2 class="sTitle">${st.name}</h2>
-    <div class="stationId">${st.id}</div>
+    <div class="caseLine">Fall: «${acard(S.service,S.change).titel}»</div>`;
-    <div class="token">Action Card: <b>${USE_CASES[S.service].service}</b>
-      <span class="ctChip">${CHANGE_TYPES[S.change]}</span>
-      <div class="ctText"><b>${acard(S.service,S.change).titel}</b> — ${acard(S.service,S.change).text}</div>
-    </div>`;
   if(st.typ==="gate") body += (S.stage==="gateDone") ? renderGateDone(st) : renderGate(st);
   else                 body += (S.stage==="reveal")   ? renderReveal(st)  : renderAct(st);
   $("#panel").innerHTML = body;
@@ -1068,22 +1081,16 @@ function renderRun(){
 /* Aktivitaet — Takt 1: Handeln am Brett (mit "Zeig mir") */
 function renderAct(st){
   return `
-  <div class="step">
+    <p class="lead">Handeln am Brett — besprecht und legt ab:</p>
-    <div class="stepHead"><span class="n">1</span> Handeln am Brett</div>
+    <ol class="todo">
-    <div class="discuss">
+      <li>Beteiligte Rollen → Figuren auf die <b>Mulden des Station-Pucks</b></li>
-      <strong>Besprecht und legt am Brett ab:</strong>
+      <li>RACI klären → dieselben Figuren ins <b>Aktiv-Feld (R·A·C·I)</b></li>
-      <ul>
+      <li>Artefaktkarte → in die <b>Service-Akte</b></li>
-        <li><b>1 · Wer ist beteiligt?</b> Die Figuren der beteiligten Rollen auf die <b>Mulden des Station-Pucks</b> stellen.</li>
+    </ol>
-        <li><b>2 · Wie ist die RACI?</b> Dieselben Figuren ins <b>Aktiv-Feld (R · A · C · I)</b> einsortieren.</li>
+    <details class="det">
-        <li><b>Was passiert?</b> Kurz klären, was hier für euren Change getan wird.</li>
+      <summary>Zeig mir</summary>
-        <li><b>Artefakt?</b> Passende <b>Artefaktkarte in die Service-Akte</b> legen (oder Status weiterschieben).</li>
+      <div>${raciTable(st)}<p class="muted" style="margin:8px 0 0"><b>Artefakt:</b> ${st.artefakt}</p></div>
-      </ul>
-      <details style="margin-top:10px">
-        <summary style="cursor:pointer;color:var(--muted);font-weight:600">Zeig mir (wenn ihr nicht weiterkommt)</summary>
-        <div style="margin-top:8px">${raciTable(st)}<p style="margin:6px 0 0"><b>Artefakt:</b> ${st.artefakt}</p></div>
     </details>
-    </div>
-  </div>
     <div class="actions">
       <div class="spacer"></div>
       <button class="primary" id="toReveal">Auflösen →</button>
@@ -1093,14 +1100,13 @@ function renderAct(st){
 /* Aktivitaet — Takt 2: Aufloesung & Abgleich */
 function renderReveal(st){
   return `
-  <div class="step reveal">
+    <p class="lead">Auflösung — gleicht euer Brett ab:</p>
-    <div class="stepHead"><span class="n">2</span> Auflösung & Abgleich</div>
+    ${raciTable(st)}
-    <p>${st.beschreibung}</p>
+    <p class="muted" style="margin-top:10px"><b>Artefakt:</b> ${st.artefakt}</p>
-    <h4>Umfasst</h4><ul>${st.umfasst.map(u=>`<li>${u}</li>`).join("")}</ul>
+    <details class="det">
-    <h4>Rollen / RACI</h4>${raciTable(st)}
+      <summary>Worum geht's & was umfasst die Station</summary>
-    <h4>Artefakt</h4><p>${st.artefakt}</p>
+      <div><p>${st.beschreibung}</p><ul>${st.umfasst.map(u=>`<li>${u}</li>`).join("")}</ul></div>
-    <p class="muted">Gleicht euer Brett ab — Figuren/Artefakt korrigieren, falls nötig.</p>
+    </details>
-  </div>
     <div class="actions">
       <label class="unclear"><input type="checkbox" id="unclear" ${S.unclear[st.id]?'checked':''}/> War unklar</label>
       <div class="spacer"></div>
@@ -1117,18 +1123,19 @@ function renderGate(st){
   const opts = (st.pfade||[]).map(([n,d],i)=>
     `<button class="choice" data-i="${i}"><b>${n}</b><br><span style="color:var(--muted);font-weight:400">${d}</span></button>`).join("");
   const revisitNote = (S.revisit && S.revisit[st.id])
-    ? `<div class="hint ok">↩ Erneute Vorlage nach Nacharbeit — prüft die Kriterien erneut und entscheidet neu.</div>` : ``;
+    ? `<div class="hint ok">↩ Erneute Vorlage nach Nacharbeit — prüft erneut und entscheidet neu.</div>` : ``;
   return `
-  <div class="step">
-    <div class="stepHead"><span class="n">⛩</span> Gate-Entscheidung</div>
-    <p>${st.beschreibung}</p>
     ${revisitNote}
-    <p><b>Entscheidet:</b> ${roleLabel(keeper)}</p>
+    <p class="lead"><b>Entscheidet:</b> ${roleLabel(keeper)}</p>
-    <h4>Prüft am Brett (Kriterien)</h4>
-    <ul>${pruef}</ul>
-    <p class="muted">Liegen die geforderten <b>Artefaktkarten</b> in der Service-Akte? Stehen die <b>Pflicht-Figuren</b> am Gate-Puck? Dann entscheidet:</p>
     <div class="choiceGrid">${opts}</div>
-  </div>`;
+    <details class="det">
+      <summary>Worum geht's & Prüf-Kriterien</summary>
+      <div>
+        <p>${st.beschreibung}</p>
+        <ul class="crit">${pruef}</ul>
+        <p class="muted">Artefaktkarten in der Akte? Pflicht-Figuren am Gate-Puck?</p>
+      </div>
+    </details>`;
 }
 
 /* Gate — Konsequenz der Entscheidung */