From cb710c13dec271a6e274a05ab50c8a257a180729 Mon Sep 17 00:00:00 2001
From: breitenbach76 <patrick@1789innovations.com>
Date: Sun, 7 Jun 2026 16:01:31 +0200
Subject: [PATCH] v14

---
 04_Tablet-Quiz/app/index.html | 16 ++++++----------
 04_Tablet-Quiz/app/sw.js      |  2 +-
 2 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/04_Tablet-Quiz/app/index.html b/04_Tablet-Quiz/app/index.html
index 1b4ad68..db4990b 100644
--- a/04_Tablet-Quiz/app/index.html
+++ b/04_Tablet-Quiz/app/index.html
@@ -273,8 +273,8 @@
   .lgItem:first-of-type{border-top:0;padding-top:2px}
   .lgName{font-weight:700;font-size:13px;color:var(--ink)}
   .lgIdee{margin:2px 0 4px;font-size:13px;color:var(--ink)}
-  .lgBed{margin:2px 0 4px;padding-left:18px;color:var(--muted);font-size:12px}
-  .lgBed li{margin:1px 0}
+  .lgBed{margin:4px 0;color:var(--muted);font-size:13px}
+  .lgBed div{margin:2px 0}
   .lgBsp{font-size:12px;color:var(--muted)}
   .hint{font-weight:600;margin:8px 0}
   .hint.bad{color:var(--bad)} .hint.ok{color:var(--ok)}
@@ -1200,12 +1200,7 @@ function renderClassify(){
     const choices = CT_ORDER.map(i=>
       `<button class="choice ${S.classifyWrong===i?'bad':''}" data-i="${i}">${CHANGE_TYPES[i]}</button>`).join("");
     const legend = `<div class="legend"><h4>Legende: Change-Arten im DIGITOM</h4>` +
-      CT_ORDER.map(i=>{ const L = CHANGE_LEGEND[i];
-        return `<div class="lgItem"><div class="lgName">${CHANGE_TYPES[i]}</div>`
-          + `<div class="lgIdee">${L.idee}</div>`
-          + `<ul class="lgBed">${L.bed.map(b=>`<li>${b}</li>`).join("")}</ul>`
-          + `<div class="lgBsp"><b>Beispiel:</b> ${L.bsp}</div></div>`;
-      }).join("") + `</div>`;
+      CT_ORDER.map(i=>`<div class="lgItem"><div class="lgName">${CHANGE_TYPES[i]}</div><div class="lgIdee">${CHANGE_LEGEND[i].idee}</div></div>`).join("") + `</div>`;
     const hint = S.classifyWrong!=null
       ? `<div class="hint bad">Nicht ganz — überlegt nochmal und probiert es erneut.</div>` : ``;
     $("#panel").innerHTML = `
@@ -1235,8 +1230,9 @@ function renderClassify(){
         <div class="classifyMain">
           <div class="hint ok">✓ Richtig: ${CHANGE_TYPES[correct]}</div>
           <div class="recBox"><h4>Warum?</h4>
-            <p style="margin:0 0 6px;color:var(--muted)">${CHANGE_LEGEND[correct].idee}</p>
-            <p style="margin:0;color:var(--muted)"><b>Beispiel:</b> ${CHANGE_LEGEND[correct].bsp}</p></div>
+            <p style="margin:0 0 8px;color:var(--ink)">${CHANGE_LEGEND[correct].idee}</p>
+            <div class="lgBed">${CHANGE_LEGEND[correct].bed.map(b=>`<div>${b}</div>`).join("")}</div>
+            <p style="margin:8px 0 0;color:var(--muted)"><b>Beispiel:</b> ${CHANGE_LEGEND[correct].bsp}</p></div>
         </div>
       </div>
       <div class="actions">
diff --git a/04_Tablet-Quiz/app/sw.js b/04_Tablet-Quiz/app/sw.js
index 618f0fa..3f6b328 100644
--- a/04_Tablet-Quiz/app/sw.js
+++ b/04_Tablet-Quiz/app/sw.js
@@ -1,5 +1,5 @@
 /* Service Worker — SLC-Workshop Companion (App-Shell, offline-first) */
-const CACHE = "slc-companion-v16";
+const CACHE = "slc-companion-v17";
 const SHELL = ["./", "index.html", "manifest.webmanifest", "icon.svg"];
 // Action-Card-Grafiken (cards/s<service>-c<change>.png) fuer Offline vorab cachen (alle 30).
 const CARDS = [];