Workspace: Aufgaben bearbeiten, Personenverwaltung im Browser

Aufgaben:
- Bearbeiten-Dialog (Titel, Beschreibung, Prioritaet, Frist, Zuordnung).
  Als natives <dialog>: Fokusfang, Esc zum Schliessen und Abdunklung
  ohne eigenen Code.
- Loeschen nur fuer Management, mit Rueckfrage und Protokolleintrag.
  Das Konzept will, dass Erledigtes stehen bleibt -- Loeschen ist der
  Ausnahmefall fuer Fehleintraege, nicht der normale Abschluss.

Personen (/workspace/personen.html, nur Management):
- Anlegen, Code erneuern, sperren/entsperren, Protokollansicht
- Der Code wird genau einmal in der Antwort zurueckgegeben, nie
  gespeichert; beim Schliessen auch aus dem Dokument entfernt
- Selbstschutz: niemand kann sich selbst sperren, und das letzte aktive
  Management laesst sich nicht sperren -- sonst kaeme niemand mehr hinein
- Code fuer sich selbst tauschen nur mit ausdruecklicher Bestaetigung,
  weil es die eigene Sitzung sofort beendet

Zwei Fehler, die beim Testen aufgefallen sind:

1. Rollenpruefung fehlte beim Ausliefern der Seiten. Ein Creator bekam
   personen.html mit HTTP 200 -- die Schnittstellen wiesen ihn zwar ab,
   das Geruest der Seite war aber sichtbar. GESCHUETZT ist jetzt eine
   Zuordnung Pfad -> erlaubte Rollen statt einer blossen Liste.

2. Das Protokoll nannte den falschen Verursacher. personAnlegen trug die
   NEU ANGELEGTE Person als person_id ein, der Eintrag las sich also so,
   als haette sie sich selbst angelegt. Akteur und Betroffener sind jetzt
   getrennt: Akteur in person_id, Betroffener im Text. Ueber die
   Kommandozeile angelegte Personen zeigen korrekt keinen Akteur.

workspace/assets/css/aufgaben.css

@@ -129,3 +129,34 @@
 
 @media (max-width: 1080px) { .brett { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
 @media (max-width: 620px)  { .brett { grid-template-columns: 1fr; } }
+
+/* ---------- Bearbeiten-Dialog ------------------------------------------ */
+
+.dialog {
+  width: min(560px, calc(100vw - 32px));
+  padding: 0; border: 1px solid var(--rand-hell);
+  border-radius: var(--radius);
+  background: #0b1018;
+  color: var(--text);
+  box-shadow: var(--schatten);
+}
+.dialog::backdrop { background: rgba(2, 4, 8, .68); backdrop-filter: blur(3px); }
+
+.neu--blank { margin: 0; border: 0; background: none; padding: 22px; }
+
+.dialog__titel { margin: 0 0 18px; font-size: 1.12rem; font-weight: 700; }
+
+.dialog__knoepfe { display: flex; gap: 10px; align-items: center; margin-top: 16px; flex-wrap: wrap; }
+.dialog__knoepfe #b-loeschen { margin-left: auto; }
+
+.abmelden--warnung { color: var(--warn); border-color: rgba(255, 154, 162, .35); }
+.abmelden--warnung:hover { background: rgba(255, 154, 162, .1); border-color: rgba(255, 154, 162, .6); }
+
+.karte__stift {
+  margin-left: auto; padding: 3px 8px;
+  background: none; border: 0; border-radius: 7px;
+  color: var(--text-still); font: inherit; font-size: .75rem; cursor: pointer;
+}
+.karte__stift:hover { background: rgba(255, 255, 255, .07); color: var(--text-leise); }
+.karte__kopf { display: flex; align-items: flex-start; gap: 8px; }
+.karte__kopf .karte__titel { flex: 1 1 auto; }

workspace/assets/css/personen.css

@@ -0,0 +1,73 @@
+/* ===================================================================
+   Personenverwaltung.
+   =================================================================== */
+
+.person {
+  display: grid; gap: 4px 16px; align-items: center;
+  grid-template-columns: 1fr auto;
+  padding: 14px 16px; margin-bottom: 9px;
+  background: rgba(255, 255, 255, .03);
+  border: 1px solid var(--rand);
+  border-radius: var(--radius-klein);
+}
+.person[data-aktiv="nein"] { opacity: .58; }
+
+.person__name { font-weight: 600; font-size: .98rem; }
+
+.person__zeile {
+  display: flex; flex-wrap: wrap; gap: 8px;
+  margin-top: 2px; font-size: .79rem; color: var(--text-still);
+}
+
+.marke-rolle {
+  padding: 1px 9px; border-radius: 999px;
+  font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
+}
+.marke-rolle[data-rolle="admin"]   { background: rgba(63, 189, 245, .16); color: #7fd2fb; }
+.marke-rolle[data-rolle="creator"] { background: rgba(138, 118, 255, .16); color: #b3a6ff; }
+.marke-rolle[data-rolle="scout"]   { background: rgba(77, 171, 119, .16); color: #79d1a2; }
+
+.person__knoepfe { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
+
+/* ---------- Code-Anzeige ---------------------------------------------- */
+
+.code-kasten {
+  margin: 0 0 26px; padding: 20px 22px;
+  background: linear-gradient(100deg, rgba(63, 189, 245, .12), rgba(138, 118, 255, .09));
+  border: 1px solid rgba(63, 189, 245, .5);
+  border-radius: var(--radius);
+}
+.code-kasten__schild {
+  margin: 0 0 8px; font-size: .78rem; font-weight: 600;
+  letter-spacing: .06em; text-transform: uppercase; color: var(--text-leise);
+}
+.code-kasten__code {
+  margin: 0 0 12px;
+  font-family: "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
+  font-size: clamp(1.3rem, 3.4vw, 1.9rem); font-weight: 700;
+  letter-spacing: .12em; color: #eaf4fd;
+  user-select: all;                 /* ein Klick markiert den ganzen Code */
+  word-break: break-all;
+}
+.code-kasten__hinweis { margin: 0 0 14px; font-size: .85rem; color: var(--text-leise); }
+
+/* ---------- Protokoll --------------------------------------------------- */
+
+.protokoll-block { margin-top: 44px; }
+
+.protokoll-zeile {
+  display: grid; gap: 10px;
+  grid-template-columns: 128px 190px 1fr auto;
+  padding: 7px 10px;
+  font-size: .8rem; color: var(--text-leise);
+  border-bottom: 1px solid rgba(150, 186, 220, .08);
+}
+.protokoll-zeile:first-child { border-top: 1px solid rgba(150, 186, 220, .08); }
+.protokoll-zeit { color: var(--text-still); font-variant-numeric: tabular-nums; }
+.protokoll-ip { color: var(--text-still); font-variant-numeric: tabular-nums; }
+
+@media (max-width: 760px) {
+  .person { grid-template-columns: 1fr; }
+  .person__knoepfe { justify-content: flex-start; margin-top: 10px; }
+  .protokoll-zeile { grid-template-columns: 1fr; gap: 2px; padding: 10px; }
+}