Rollen: optionale aufklappbare Kurzbeschreibung (Texte folgen)

- Neue Tabelle ROLLEN_DESC (1 Satz je Rolle) zum Befuellen durch Frank/Patrick.
  Leer = Rolle bleibt schlichte Zeile; sobald Text drin ist, wird die Rolle in der
  Uebersicht UND im linken Rollen-Panel aufklappbar (touch-tauglich, <details>).
- Gemeinsamer Helfer rolleItemHtml(r,color) fuer beide Render-Stellen.
- CSS fuer aufklappbare Rollenzeile + Beschreibung.
- sw.js Cache hochgezaehlt.

Verifiziert: leer -> 16 schlichte Zeilen (keine Regression); mit Text -> aufklappbar.
Service-Artefakte (Akte) bewusst NICHT angefasst (nur Rollen gewuenscht).

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

04_Tablet-Quiz/app/index.html

@@ -115,6 +115,11 @@
   #rollenList h3 { font-size:11px; text-transform:uppercase; letter-spacing:.8px; color:var(--muted); margin:14px 0 4px; }
   .rolleItem { display:flex; align-items:center; gap:10px; padding:6px 4px; font-size:13px; }
   .rolleItem .rDot { width:12px; height:12px; border-radius:50%; flex:none; border:1px solid rgba(0,0,0,.18); }
+  .rolleDetails > summary.rolleItem { cursor:pointer; list-style:none; }
+  .rolleDetails > summary.rolleItem::-webkit-details-marker { display:none; }
+  .rolleDetails > summary.rolleItem::after { content:"▸"; margin-left:auto; font-size:11px; color:var(--muted); transition:transform .15s; }
+  .rolleDetails[open] > summary.rolleItem::after { transform:rotate(90deg); }
+  .rolleDesc { margin:0 0 8px 22px; font-size:12.5px; line-height:1.45; color:var(--muted); }
   .navTop { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
   .navTop b { font-size:13px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); }
   .navTop button { border:none; background:none; font-size:20px; line-height:1; color:var(--muted); cursor:pointer; padding:4px 8px; }
@@ -488,6 +493,15 @@ const ROLLEN = {
   testmanagement:"Testmanagement", architektur:"IT-Architekt",
   lieferant:"Lieferant", operations_manager:"Operation Manager (AL B&C/App)", dpm:"Demand Portfolio Manager"
 };
+/* Rollen-Kurzbeschreibungen (1 Satz je Rolle) — von Frank/Patrick zu liefern.
+   Leerer String = keine Beschreibung -> Rolle bleibt eine normale Zeile. Sobald Text
+   eingetragen ist, wird die Rolle in der Übersicht aufklappbar (Übersicht + linkes Panel). */
+const ROLLEN_DESC = {
+  spm:"", sor:"", service_owner:"", support_manager:"", problem_manager:"",
+  projektleitung:"", betriebsteam:"", service_support_team:"", projektteam:"",
+  queue_koordinator:"", first_level_agent:"", second_level_agent:"",
+  testmanagement:"", architektur:"", lieferant:"", operations_manager:"", dpm:""
+};
 // Rollen-Glossar fuer das Overlay: gruppiert/eingefaerbt nach den 6 Figuren-Kategorien
 // (Farbe = Filamentfarbe der Figuren). Deckt alle ROLLEN-Eintraege ab.
 const ROLLEN_GRUPPEN = [
@@ -498,6 +512,15 @@ const ROLLEN_GRUPPEN = [
   { label:"Externe",                       color:"#cfd6df", roles:["lieferant"] },
   { label:"Teams (Sonderfiguren)",         color:"#2f9e57", roles:["betriebsteam","service_support_team","projektteam"] }
 ];
+/* Eine Rollen-Zeile: mit Beschreibung -> aufklappbar (<details>), sonst schlichte Zeile. */
+function rolleItemHtml(r, color){
+  if(!ROLLEN[r]) return "";
+  const dot  = `<span class="rDot" style="background:${color}"></span>`;
+  const desc = (ROLLEN_DESC && ROLLEN_DESC[r]) ? ROLLEN_DESC[r].trim() : "";
+  return desc
+    ? `<details class="rolleDetails"><summary class="rolleItem">${dot}<span>${ROLLEN[r]}</span></summary><div class="rolleDesc">${desc}</div></details>`
+    : `<div class="rolleItem">${dot}<span>${ROLLEN[r]}</span></div>`;
+}
 const PHASEN = {
   design:{label:"Design", color:"var(--design)"},
   transition:{label:"Transition", color:"var(--transition)"},
@@ -1414,10 +1437,7 @@ function renderRollen(){
   html += `<div class="akteCount">RACI-Rollen im Lebenszyklus · Farbe = Figuren-Kategorie</div>`;
   for(const g of ROLLEN_GRUPPEN){
     html += `<h3>${g.label}</h3>`;
-    g.roles.forEach(r=>{
-      if(!ROLLEN[r]) return;
-      html += `<div class="rolleItem"><span class="rDot" style="background:${g.color}"></span><span>${ROLLEN[r]}</span></div>`;
-    });
+    g.roles.forEach(r=>{ html += rolleItemHtml(r, g.color); });
   }
   $("#rollenList").innerHTML = html;
   const c = $("#rollenClose"); if(c) c.onclick = ()=> document.body.classList.remove("rollenOpen");
@@ -1879,8 +1899,7 @@ function raciLegendHtml(){
 function rollenLegendHtml(){
   let body = "";
   for(const g of ROLLEN_GRUPPEN){
-    const items = g.roles.filter(r=>ROLLEN[r])
-      .map(r=>`<div class="rolleItem"><span class="rDot" style="background:${g.color}"></span><span>${ROLLEN[r]}</span></div>`).join("");
+    const items = g.roles.filter(r=>ROLLEN[r]).map(r=>rolleItemHtml(r, g.color)).join("");
     if(!items) continue;
     body += `<div class="rlGroup"><div class="rlGroupHead">${g.label}</div>${items}</div>`;
   }