Companion-App: finale Action-Card-Grafiken eingebunden (29/30)

- 29 PNGs als app/cards/s<service>-c<change>.png (PNG-Nr n -> Service floor(n/5),
  Change n%5). Karten-Screen zeigt jetzt die finale Grafik statt Text.
- Helfer cardImg()/cardMedia(); Text-Fallback fuer die noch fehlende Karte
  s0-c0 ("Open Source von oben!").
- Service Worker cacht die Karten-Grafiken vorab (Offline), CACHE -> v2.
- README-Umsetzungsstand ergaenzt.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

04_Tablet-Quiz/app/index.html

@@ -843,6 +843,13 @@ function cardHtml(si, ci){ const c = acard(si, ci);
   return `<div style="font-weight:800;font-size:18px;color:var(--ink);margin-bottom:6px">${c.titel}</div>`
        + `<div>${c.text}</div>`
        + `<div style="color:var(--muted);font-style:italic;margin-top:8px">Was passiert an welchen Stellen?</div>`; }
+// Finale Action-Card-Grafik (cards/s<service>-c<change>.png). Eine fehlt noch
+// (s0-c0 "Open Source von oben!") -> Text-Fallback.
+function cardImg(si, ci){ return (si===0 && ci===0) ? null : `cards/s${si}-c${ci}.png`; }
+function cardMedia(si, ci){ const f = cardImg(si, ci);
+  return f ? `<img class="acImg" src="${f}" alt="Action Card: ${acard(si,ci).titel}"
+                style="display:block;width:100%;max-width:300px;margin:6px auto;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.12)">`
+           : cardHtml(si, ci); }
 
 /* ====================== RENDER: SIDEBAR ====================== */
 function renderList(){
@@ -897,7 +904,7 @@ function renderCardScreen(){
       <label>Service<select id="serviceSel"></select></label>
       <label>Change-Typ<select id="changeSel"></select></label>
     </div>
-    <div class="ctText" id="cardTrigger">${cardHtml(S.service,S.change)}</div>
+    <div class="ctText" id="cardTrigger">${cardMedia(S.service,S.change)}</div>
     <div class="actions">
       <button class="ghost" id="randomCard">🎲 Zufällig ziehen</button>
       <button class="ghost" id="tourBtn">📘 Geführtes Beispiel</button>
@@ -909,7 +916,7 @@ function renderCardScreen(){
   svc.innerHTML = USE_CASES.map((u,i)=>`<option value="${i}">${u.service}</option>`).join("");
   ch.innerHTML = CHANGE_TYPES.map((c,i)=>`<option value="${i}">${c}</option>`).join("");
   svc.value=S.service; ch.value=S.change;
-  const refresh=()=>{ $("#cardTrigger").innerHTML=cardHtml(S.service,S.change); };
+  const refresh=()=>{ $("#cardTrigger").innerHTML=cardMedia(S.service,S.change); };
   svc.onchange=()=>{ S.service=+svc.value; save(); refresh(); };
   ch.onchange=()=>{ S.change=+ch.value; save(); refresh(); };
   $("#randomCard").onclick=()=>{ S.service=Math.floor(Math.random()*USE_CASES.length); S.change=Math.floor(Math.random()*CHANGE_TYPES.length); save(); draw(); };