Dashboard-Reihenfolge, Drei-Punkte-Menü, Mehrrollen-Kürzel, Login-Rechte

- Meine Aufgaben: Projekte in der Reihenfolge der Projektliste, je Konto
  per Ziehen umsortierbar (users.dashboard_reihenfolge)
- Projektliste: Öffnen/Löschen hinter einem "⋯"-Menü
- Avatare je Person statt je Rolle; mehrere Rollen als senkrechte
  Farbstreifen; Titelleiste zieht Rollenänderungen sofort nach
- Nach dem Anmelden vollständiges Konto über /whoami laden (Seitenleiste
  zeigte sonst erst nach Neuladen alle Einträge)

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

public/js/auth.js

@@ -301,7 +301,16 @@ async function checkAuthAndInit(onAuthenticated){
         document.getElementById('loginPassword').select();
         return;
       }
+      // Das vollständige Konto (Rechte, Rollenname, Gewerk, Rundgang …)
+      // liefert nur /whoami — die Antwort von /login enthält nur das Nötigste.
+      // Ohne diesen Abruf fehlten nach dem Anmelden alle Einträge der
+      // Seitenleiste, die ein Recht brauchen, bis man die Seite neu lud.
       currentUser = d.user;
+      try {
+        const w = await fetch(baseUrl() + '/whoami');
+        const wd = await w.json();
+        if(wd && wd.user) currentUser = wd.user;
+      } catch(e){ /* Rückfall auf d.user */ }
       document.getElementById('loginPassword').value = '';
       afterAuthenticated(onAuthenticated);
     } catch(err){

public/js/board/board.js

@@ -113,6 +113,96 @@ function roleClass(role){
 // hier bearbeitbar (nurAnsicht).
 const BOARD_OPTS = { nurAnsicht: true, nurBeauftragteLph: true };
 
+const PROJEKT_PUNKTE_SVG = '<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><circle cx="3.2" cy="8" r="1.4"/><circle cx="8" cy="8" r="1.4"/><circle cx="12.8" cy="8" r="1.4"/></svg>';
+
+// ---------- Zeilenmenü der Projektliste ("⋯") ----------
+// Öffnen und Löschen. Löschen fragt im Menü selbst nach (wie die
+// Benutzerverwaltung), nicht über confirm(). Das Menü hängt an <body> mit
+// position: fixed und klappt nach oben, wenn unten kein Platz ist.
+let projektMenue = null; // { el, knopf, zeile }
+
+function schliesseProjektMenue(fokusZurueck){
+  if(!projektMenue) return;
+  const { el, knopf, zeile } = projektMenue;
+  projektMenue = null;
+  el.remove();
+  knopf.setAttribute('aria-expanded', 'false');
+  if(zeile) zeile.classList.remove('is-menu-open');
+  if(fokusZurueck && document.contains(knopf)) knopf.focus();
+}
+
+function projektMenuePositionieren(){
+  if(!projektMenue) return;
+  const { el, knopf } = projektMenue;
+  const r = knopf.getBoundingClientRect();
+  const m = el.getBoundingClientRect();
+  const nachOben = (window.innerHeight - r.bottom) < m.height + 12 && r.top > m.height + 12;
+  el.classList.toggle('nach-oben', nachOben);
+  el.style.top = (nachOben ? r.top - m.height - 6 : r.bottom + 6) + 'px';
+  el.style.left = Math.max(8, Math.min(r.right - m.width, window.innerWidth - m.width - 8)) + 'px';
+}
+
+function oeffneProjektMenue(event, pid, locked){
+  event.stopPropagation();
+  const knopf = event.currentTarget;
+  if(projektMenue && projektMenue.knopf === knopf){ schliesseProjektMenue(true); return; }
+  schliesseProjektMenue(false);
+  const w = currentWeek();
+  const p = w && w.projects.find(x => x.id === pid);
+  const bez = p ? ((p.nr ? p.nr + ' ' : '') + (p.name || '')).trim() : '';
+  const darfLoeschen = !locked && darfProjektlisteAendern();
+
+  const el = document.createElement('div');
+  el.className = 'user-menu';
+  el.setAttribute('role', 'menu');
+  document.body.appendChild(el);
+  const zeile = knopf.closest('.board-row');
+  projektMenue = { el, knopf, zeile };
+  knopf.setAttribute('aria-expanded', 'true');
+  if(zeile) zeile.classList.add('is-menu-open');
+
+  const eintraege = () => {
+    el.innerHTML = `<button type="button" role="menuitem" class="user-menu-item" data-aktion="oeffnen">
+        ${icon('folder', 'user-menu-ic')}<span class="user-menu-text"><span>Öffnen</span><span class="user-menu-sub">Projektbereich</span></span></button>`
+      + (darfLoeschen ? `<hr class="user-menu-trenner"><button type="button" role="menuitem" class="user-menu-item is-danger" data-aktion="loeschen">
+        ${icon('trash', 'user-menu-ic')}<span class="user-menu-text"><span>Löschen</span><span class="user-menu-sub">30 Tage im Papierkorb</span></span></button>` : '');
+    projektMenuePositionieren();
+  };
+  eintraege();
+
+  el.addEventListener('click', e => {
+    e.stopPropagation();
+    const b = e.target.closest('button');
+    if(!b) return;
+    if(b.dataset.zurueck){ eintraege(); return; }
+    if(b.dataset.aktion === 'oeffnen'){ schliesseProjektMenue(false); openProjectPlan(pid); return; }
+    if(b.dataset.aktion === 'loeschen'){
+      el.innerHTML = `<div class="user-menu-confirm"><p>Projekt ${bez ? '<b>' + esc(bez) + '</b> ' : ''}löschen? Ein Administrator kann es 30 Tage lang wiederherstellen.</p>
+        <div class="user-menu-confirm-row"><button type="button" class="secondary small" data-zurueck="1">Abbrechen</button>
+        <button type="button" class="danger small" data-aktion="endgueltig">Löschen</button></div></div>`;
+      projektMenuePositionieren();
+      el.querySelector('[data-aktion="endgueltig"]').focus();
+      return;
+    }
+    if(b.dataset.aktion === 'endgueltig'){ schliesseProjektMenue(false); delProjectFromList(pid, true); }
+  });
+
+  if(event.detail === 0){ const erstes = el.querySelector('button'); if(erstes) erstes.focus(); }
+}
+
+document.addEventListener('click', () => schliesseProjektMenue(false));
+document.addEventListener('keydown', e => {
+  if(!projektMenue) return;
+  const ziele = Array.from(projektMenue.el.querySelectorAll('button'));
+  const i = ziele.indexOf(document.activeElement);
+  if(e.key === 'Escape'){ e.preventDefault(); schliesseProjektMenue(true); }
+  else if(e.key === 'ArrowDown'){ e.preventDefault(); if(ziele.length) ziele[(i + 1) % ziele.length].focus(); }
+  else if(e.key === 'ArrowUp'){ e.preventDefault(); if(ziele.length) ziele[(i - 1 + ziele.length) % ziele.length].focus(); }
+  else if(e.key === 'Tab') schliesseProjektMenue(false);
+});
+window.addEventListener('resize', () => schliesseProjektMenue(false));
+window.addEventListener('scroll', () => schliesseProjektMenue(false), true);
+
 function renderBoardRow(p, allPeople, locked, weekLabel, opts){
   const isOpen = !!boardRowOpen[p.id];
   const tags = Array.isArray(p.tags) ? p.tags : [];
@@ -123,11 +213,10 @@ function renderBoardRow(p, allPeople, locked, weekLabel, opts){
   // Avatar-Stapel der eingeklappten Zeile: nur tatsächlich zugeordnete
   // Personen (Zustand 1 = Haupt oder 2 = optional), volle Rollen-Matrix nur
   // im aufgeklappten Detailpanel (siehe renderBoardDrawer).
-  const stackHtml = allPeople.map(entry=>{
-    const state = p.assign[assignKey(entry.person.id, entry.role)] || 0;
-    if(state === 0) return '';
-    return `<span class="board-avatar ${roleClass(entry.role)} state-${state}" title="${esc(entry.person.fullName || entry.person.name)} · ${esc(entry.role)}">${esc(entry.person.name)}</span>`;
-  }).join('');
+  // Eine Person mit mehreren Rollen erscheint nur einmal (beteiligteJePerson()).
+  const stackHtml = beteiligteJePerson(allPeople.map(entry => ({
+    person: entry.person, role: entry.role, state: p.assign[assignKey(entry.person.id, entry.role)] || 0
+  }))).map(b => beteiligtenAvatarHtml(b, roleClass(b.role))).join('');
 
   const aktLp = lpActiveList(p)[0];
   const aktPct = aktLp && p.lph[aktLp] !== undefined && p.lph[aktLp] !== '' ? p.lph[aktLp] : null;
@@ -155,9 +244,12 @@ function renderBoardRow(p, allPeople, locked, weekLabel, opts){
   // Listenoperationen am Zeilenende (aus dem früheren Projekte-Tab). Das
   // Bearbeiten der Projektangaben führt in den Projektbereich, wo sie ihren
   // einen Ort haben — hier steht nur, was die LISTE betrifft.
+  // Öffnen/Löschen hinter einem Drei-Punkte-Menü (Eriks Wunsch), gebaut wie
+  // das Zeilenmenü der Benutzerverwaltung (.user-kebab/.user-menu).
   html += `<div class="board-row-actions" onclick="event.stopPropagation()">
-      <button type="button" class="secondary small" onclick="openProjectPlan('${p.id}')" title="Projektbereich öffnen">Öffnen</button>
-      ${locked || !darfProjektlisteAendern() ? '' : `<button type="button" class="danger small" onclick="delProjectFromList('${p.id}')" title="Projekt löschen (30 Tage durch Administratoren wiederherstellbar)">Löschen</button>`}
+      <button type="button" class="user-kebab" aria-haspopup="menu" aria-expanded="false"
+        aria-label="Aktionen für ${esc(p.name || 'Projekt')}" title="Aktionen"
+        onclick="oeffneProjektMenue(event, '${p.id}', ${locked ? 'true' : 'false'})">${PROJEKT_PUNKTE_SVG}</button>
     </div>`;
   html += `</div>`; // board-row-main
 

public/js/dashboard/dashboard.js

@@ -130,7 +130,9 @@ async function renderDashboard(){
   html += dashAbschnitt('Meine Projekte', daten.projekte.length, null,
     renderDashProjekte(daten),
     daten.projekte.length > 1
-      ? '<button type="button" class="dash-proj-alle" id="dashAlleKnopf" onclick="dashAlleUmschalten()">'
+      ? '<button type="button" class="dash-proj-alle" id="dashReihenfolgeReset" onclick="dashReihenfolgeZuruecksetzen()"'
+        + (dashEigeneReihenfolge().length ? '' : ' hidden') + ' title="Reihenfolge wieder wie in der Projektliste">Wie Projektliste</button>'
+        + '<button type="button" class="dash-proj-alle" id="dashAlleKnopf" onclick="dashAlleUmschalten()">'
         + (alleOffen ? 'Alle einklappen' : 'Alle aufklappen') + '</button>'
       : '');
   html += '</div>';
@@ -214,12 +216,9 @@ function dashDaten(){
     relevant.sort((a, b) => (a.datum || '9999').localeCompare(b.datum || '9999'));
     projekte.push({ p, rollen, termine: relevant, alleTermine: termine });
   });
-  // Projekte mit dem dringendsten Termin zuerst, Projekte ohne Termin am Ende.
-  projekte.sort((a, b) => {
-    const da = (a.termine.find(t => t.datum) || {}).datum || '9999';
-    const db_ = (b.termine.find(t => t.datum) || {}).datum || '9999';
-    return da.localeCompare(db_) || String(a.p.nr || '').localeCompare(String(b.p.nr || ''));
-  });
+  // Reihenfolge wie in der Projektliste (Gruppe, dann Position darin) —
+  // oder die eigene, auf dem Dashboard gezogene (dashSortieren()).
+  dashSortieren(projekte);
 
   // Kalendereinträge: alle datierten Termine dieser Projekte (auch vergangene
   // Meilensteine — beim Zurückblättern sollen sie da sein).
@@ -273,6 +272,109 @@ function dashZuSchreiben(set){
 }
 function dashProjKey(p){ return p.projectUid || p.nr || p.id; }
 
+// ---------- Reihenfolge der Projekte ----------
+// Grundlage ist die Reihenfolge der Projektliste (GROUP_ORDER, dann p.order).
+// Jedes Konto kann sie auf dem Dashboard durch Ziehen am Griff ändern; die
+// eigene Reihenfolge liegt am Server (users.dashboard_reihenfolge, über
+// currentUser.dashboardReihenfolge), gilt also auf jedem Gerät. Projekte,
+// die darin noch fehlen (neu zugeordnet), stehen nach ihrer Stelle in der
+// Projektliste dahinter.
+function dashListenRang(p){
+  const g = GROUP_ORDER.indexOf(p.group);
+  return (g === -1 ? 999 : g) * 1e6 + (Number(p.order) || 0);
+}
+function dashEigeneReihenfolge(){
+  return (currentUser && Array.isArray(currentUser.dashboardReihenfolge)) ? currentUser.dashboardReihenfolge : [];
+}
+function dashSortieren(projekte){
+  const eigen = dashEigeneReihenfolge();
+  const pos = new Map(eigen.map((k, i) => [k, i]));
+  projekte.sort((a, b) => {
+    const ia = pos.has(dashProjKey(a.p)) ? pos.get(dashProjKey(a.p)) : Infinity;
+    const ib = pos.has(dashProjKey(b.p)) ? pos.get(dashProjKey(b.p)) : Infinity;
+    if(ia !== ib) return ia - ib;
+    return dashListenRang(a.p) - dashListenRang(b.p);
+  });
+}
+function dashReihenfolgeSpeichern(liste){
+  if(currentUser) currentUser.dashboardReihenfolge = liste;
+  fetch(baseUrl() + '/dashboard-reihenfolge', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json; charset=utf-8' },
+    body: JSON.stringify({ reihenfolge: liste })
+  }).then(r => { if(!r.ok) throw new Error(r.status); })
+    .catch(() => alert('Die Reihenfolge konnte nicht gespeichert werden.'));
+}
+// dashReihenfolgeZuruecksetzen: wieder wie in der Projektliste.
+function dashReihenfolgeZuruecksetzen(){
+  dashReihenfolgeSpeichern([]);
+  renderDashboard();
+}
+
+// Ziehen: Der Block wird nur ziehbar, solange der Griff gedrückt ist —
+// sonst ließe sich Text in den Terminen nicht mehr markieren.
+let dashGezogen = null;
+function dashGriffDruck(griff){
+  const block = griff.closest('.dash-proj');
+  if(block) block.draggable = true;
+}
+document.addEventListener('mouseup', () => {
+  if(dashGezogen) return;
+  document.querySelectorAll('.dash-proj[draggable="true"]').forEach(b => { b.draggable = false; });
+});
+document.addEventListener('dragstart', e => {
+  const block = e.target && e.target.closest && e.target.closest('.dash-proj[draggable="true"]');
+  if(!block) return;
+  dashGezogen = block;
+  block.classList.add('ist-gezogen');
+  e.dataTransfer.effectAllowed = 'move';
+  try { e.dataTransfer.setData('text/plain', block.dataset.key || ''); } catch(err){ /* egal */ }
+});
+document.addEventListener('dragover', e => {
+  if(!dashGezogen) return;
+  const liste = dashGezogen.parentElement;
+  if(!liste || !liste.contains(e.target)) return;
+  e.preventDefault();
+  const andere = [...liste.querySelectorAll('.dash-proj:not(.ist-gezogen)')];
+  const danach = andere.find(b => { const r = b.getBoundingClientRect(); return e.clientY < r.top + r.height / 2; });
+  if(danach) liste.insertBefore(dashGezogen, danach); else liste.appendChild(dashGezogen);
+});
+document.addEventListener('drop', e => { if(dashGezogen) e.preventDefault(); });
+document.addEventListener('dragend', () => {
+  if(!dashGezogen) return;
+  const block = dashGezogen;
+  dashGezogen = null;
+  block.classList.remove('ist-gezogen');
+  block.draggable = false;
+  const neu = [...block.parentElement.querySelectorAll('.dash-proj')].map(b => b.dataset.key);
+  const alt = dashEigeneReihenfolge();
+  // Schon bekannte, gerade nicht angezeigte Projekte (z. B. vorübergehend
+  // ohne Zuordnung) behalten ihren Platz am Ende.
+  const liste = neu.concat(alt.filter(k => !neu.includes(k)));
+  if(JSON.stringify(liste) !== JSON.stringify(alt)) dashReihenfolgeSpeichern(liste);
+  const reset = document.getElementById('dashReihenfolgeReset');
+  if(reset) reset.hidden = false;
+});
+
+// dashVerschieben: Tastatur-Alternative zum Ziehen (Griff fokussiert,
+// Pfeil hoch/runter).
+function dashGriffTaste(e, griff){
+  if(e.key !== 'ArrowUp' && e.key !== 'ArrowDown') return;
+  e.preventDefault();
+  const block = griff.closest('.dash-proj');
+  const liste = block && block.parentElement;
+  if(!liste) return;
+  if(e.key === 'ArrowUp' && block.previousElementSibling) liste.insertBefore(block, block.previousElementSibling);
+  else if(e.key === 'ArrowDown' && block.nextElementSibling) liste.insertBefore(block.nextElementSibling, block);
+  else return;
+  griff.focus();
+  const neu = [...liste.querySelectorAll('.dash-proj')].map(b => b.dataset.key);
+  const alt = dashEigeneReihenfolge();
+  dashReihenfolgeSpeichern(neu.concat(alt.filter(k => !neu.includes(k))));
+  const reset = document.getElementById('dashReihenfolgeReset');
+  if(reset) reset.hidden = false;
+}
+
 // dashProjUmschalten: klappt einen Projektblock auf oder zu — direkt am DOM,
 // ohne das Dashboard neu zu laden. Parameter: knopf (der Kopf-Button).
 function dashProjUmschalten(knopf){
@@ -316,7 +418,7 @@ function renderDashProjekte(daten){
   if(!daten.projekte.length) return dashLeer('Sie sind in der aktuellen Sitzung keinem Projekt zugeordnet und haben keine offenen Aufgaben.');
   const heute = heuteIso();
   const zu = dashZuLesen();
-  return daten.projekte.map(x => {
+  return '<div class="dash-proj-liste">' + daten.projekte.map(x => {
     const p = x.p;
     const key = dashProjKey(p);
     const istZu = zu.has(key);
@@ -347,6 +449,7 @@ function renderDashProjekte(daten){
       + '<span class="dash-proj-zahl">' + kommend.length + ' offen</span>';
     return '<div class="dash-karte dash-proj' + (istZu ? ' ist-zu' : '') + '" data-key="' + esc(key) + '">'
       + '<div class="dash-proj-kopf">'
+      +   (daten.projekte.length > 1 ? '<span class="dash-proj-griff" tabindex="0" role="button" title="Ziehen, um die Reihenfolge zu ändern (oder Pfeiltasten)" aria-label="Reihenfolge ändern" onmousedown="dashGriffDruck(this)" ontouchstart="dashGriffDruck(this)" onkeydown="dashGriffTaste(event, this)">' + icon('grip') + '</span>' : '')
       +   '<button type="button" class="dash-proj-toggle" aria-expanded="' + (!istZu) + '" onclick="dashProjUmschalten(this)" title="Ein-/ausklappen">'
       +     '<span class="dash-proj-chev" aria-hidden="true">›</span>'
       +     '<span class="dash-proj-nr">' + esc(p.nr || '') + '</span><span class="dash-proj-titel">' + esc(p.name || '') + '</span>'
@@ -360,7 +463,7 @@ function renderDashProjekte(daten){
       +   '<div class="dash-proj-termine">' + zeilen + mehr + '</div>'
       + '</div>'
       + '</div>';
-  }).join('');
+  }).join('') + '</div>';
 }
 
 // renderDashTermin: eine Terminzeile im Projektblock und in der Tagesliste

public/js/plan/plan-settings.js

@@ -329,6 +329,10 @@
   window.renderPlanSettings = function(){
     const p = app.project;
     if(!p) return;
+    // Kürzel in der Titelleiste mitziehen — sonst zeigte sie eine geänderte
+    // Rolle erst nach dem Neuladen (renderPlanPage() baut sie nur beim Öffnen).
+    const kopfTeam = document.getElementById('planPeopleList');
+    if(kopfTeam) kopfTeam.innerHTML = app.renderProjectAssignees();
     const locked = app.stammGesperrt();
     const sandbox = app.isSandboxPlan();
 

public/js/plan/plan-state.js

@@ -313,10 +313,8 @@ window.PlanApp = {
   function renderProjectAssignees(){
     const assignees = projectAssignees(app.project, app.week);
     if(assignees.length === 0) return '';
-    return assignees.map(a => {
-      const title = (a.person.fullName || a.person.name) + (a.role ? ' · ' + a.role : '');
-      return `<span class="board-avatar ${planRoleClass(a.role)} state-${a.state}" title="${esc(title)}">${esc(a.person.name)}</span>`;
-    }).join('');
+    // Eine Person mit mehreren Rollen nur einmal (beteiligteJePerson(), utils.js).
+    return beteiligteJePerson(assignees).map(b => beteiligtenAvatarHtml(b, planRoleClass(b.role))).join('');
   }
 
   // savePlan: merkt die Sitzung des Projektbereichs als geändert vor und

public/js/projects/projects.js

@@ -30,7 +30,7 @@
 // durchgesetzt). Der Server legt das Projekt beim Speichern in den
 // Papierkorb, aus dem es ein Administrator 30 Tage lang zurückholen kann
 // (Admin → Papierkorb, js/admin/admin.js).
-function delProjectFromList(id){
+function delProjectFromList(id, ohneRueckfrage){
   if(guardWeekLocked()) return;
   if(!darfProjektlisteAendern()){
     alert('Projekte löschen dürfen nur Projektleiter und Administratoren.');
@@ -38,7 +38,7 @@ function delProjectFromList(id){
   }
   const p = currentWeek().projects.find(x => x.id === id);
   const bez = p ? ((p.nr ? p.nr + ' ' : '') + (p.name || '')).trim() : '';
-  if(!confirm('Projekt ' + (bez ? '„' + bez + '" ' : '') + 'löschen?\n\nEin Administrator kann es 30 Tage lang wiederherstellen.')) return;
+  if(!ohneRueckfrage && !confirm('Projekt ' + (bez ? '„' + bez + '" ' : '') + 'löschen?\n\nEin Administrator kann es 30 Tage lang wiederherstellen.')) return;
   const w = currentWeek();
   w.projects = w.projects.filter(p=>p.id!==id);
   save(); renderProjects(); renderBoard();

public/js/utils.js

@@ -87,6 +87,54 @@ function weekSortKey(label){
 // Persistente ID fuer eine Person aus dem Kuerzel, damit Anwesenheit und
 // Zuordnungen auch nach einem Neuladen stabil bleiben.
 // Parameter: name (String). Rückgabe: String wie 'p_ab'.
+// beteiligteJePerson: fasst die Zuordnungen eines Projekts ({person, role,
+// state}; state 1 = Haupt, 2 = Unterstützung) zu EINEM Eintrag je Person
+// zusammen — wer Planung und Projektleitung macht, erscheint im
+// Avatar-Stapel nur einmal (Eriks Wunsch). Die Farbe folgt der wichtigsten
+// Rolle (Haupt vor Unterstützung, dann Reihenfolge ROLES), der Tooltip nennt
+// alle. Rückgabe: [{person, role, state, title}] in der Reihenfolge des
+// ersten Auftretens.
+function beteiligteJePerson(eintraege){
+  const jePerson = new Map();
+  (eintraege || []).forEach(e => {
+    if(!e || !e.person || !(e.state > 0)) return;
+    const key = e.person.id;
+    if(!jePerson.has(key)) jePerson.set(key, { person: e.person, rollen: [] });
+    jePerson.get(key).rollen.push({ role: e.role, state: Number(e.state) });
+  });
+  const rang = r => (r.state === 1 ? 0 : 10) + Math.max(0, ROLES.indexOf(r.role));
+  return Array.from(jePerson.values()).map(({ person, rollen }) => {
+    const haupt = rollen.slice().sort((a, b) => rang(a) - rang(b))[0];
+    const liste = rollen.slice().sort((a, b) => ROLES.indexOf(a.role) - ROLES.indexOf(b.role))
+      .map(r => r.role + (r.state === 2 ? ' (Unterstützung)' : '')).join(', ');
+    const sortiert = rollen.slice().sort((a, b) => ROLES.indexOf(a.role) - ROLES.indexOf(b.role));
+    return { person, role: haupt.role, state: haupt.state, rollen: sortiert, title: (person.fullName || person.name) + ' · ' + liste };
+  });
+}
+
+// ROLLEN_FARBE: dieselben Farben wie .board-avatar.role-* in styles.css.
+const ROLLEN_FARBE = { 'Planung': 'var(--green)', 'Projektleitung': 'var(--red)', 'Bauüberwachung': 'var(--accent)' };
+
+// beteiligtenAvatarHtml: Kürzel-Kreis eines Eintrags aus beteiligteJePerson().
+// Bei mehreren Rollen (Eriks Wunsch) ist der Kreis in Segmente geteilt — je
+// Rolle eines in ihrer Farbe. Parameter: b, klasse
+// (Rollen-Klasse, z. B. roleClass(b.role)). Rückgabe: HTML-String.
+function beteiligtenAvatarHtml(b, klasse){
+  const rollen = (b.rollen || []).filter(r => ROLLEN_FARBE[r.role]);
+  if(rollen.length < 2){
+    return `<span class="board-avatar ${klasse} state-${b.state}" title="${esc(b.title)}">${esc(b.person.name)}</span>`;
+  }
+  const teil = 100 / rollen.length;
+  const stopps = rollen.map((r, i) => {
+    // Immer die volle Rollenfarbe — eine blassere Abstufung für
+    // Unterstützung wurde im Dunkelmodus zu einem eigenen, dunklen Ton.
+    // Ob Haupt oder Unterstützung, steht im Tooltip.
+    const farbe = ROLLEN_FARBE[r.role];
+    return `${farbe} ${(i * teil).toFixed(2)}% ${((i + 1) * teil).toFixed(2)}%`;
+  }).join(', ');
+  return `<span class="board-avatar ist-mehrfach" style="background-image: linear-gradient(to right, ${stopps})" title="${esc(b.title)}">${esc(b.person.name)}</span>`;
+}
+
 function personIdForName(name){
   return 'p_' + String(name).trim().toLowerCase().replace(/[^a-z0-9]/g,'_');
 }