Kennzahlen werden Wege, Team wird sichtbar, Felder bekommen ein Aussehen

Vier Wuensche vom 01.09.2026, dazu ein gemeldeter Fehler.

SCREEN 1 -- "wenn man auf die Kisten drueckt, sofort zu der Seite,
diesem Punkt". Jede Kennzahl im Bericht fuehrt jetzt dorthin, wo die
gezaehlten Dinge stehen: nicht nur auf die richtige Seite, sondern auf
die richtige Stelle (?zeigen=...). Ein gemeinsamer Helfer in kopf.js,
damit nicht jede Seite ihr eigenes Sprungverhalten erfindet.

  Auf dem Aufgabenbrett wird HERVORGEHOBEN, nicht gefiltert -- das Brett
  lebt davon, dass man die vier Spalten nebeneinander sieht. Bei den
  Dateien wird gefiltert, denn die Seite hat ohnehin eine Filterleiste,
  und deren Knoepfe zeigen dann mit an, wo man steht. Der Kalender
  schaltet auf die Liste um: In der Monatsansicht liesse sich
  "vergangen" gar nicht sinnvoll markieren.

  Immer mit einem Weg zurueck ("Alles zeigen"), der auch den Parameter
  aus der Adresse nimmt. Eine Seite, die gefiltert bleibt, ist eine
  Falle: Man kommt spaeter wieder, sieht drei von zwanzig Aufgaben und
  haelt das fuer den Bestand.

  Drei Entscheidungen gegen den ersten Entwurf:
  * KEIN ?creator= im Verweis. Das sah hilfreich aus und waere eine
    Luege gewesen -- keine Zielseite liest den Wert.
  * Kisten mit Null fuehren NIRGENDWOHIN. Ein Weg zu null Dingen ist
    eine Enttaeuschung, kein Angebot.
  * "neu angelegt" fuehrt ohne Ausschnitt aufs Brett: Der Bericht zaehlt
    einen Zeitraum, das Brett kennt keinen. Eine Hervorhebung, die nicht
    dieselbe Menge trifft, ist schlimmer als keine.

SCREEN 2 -- "ich will, dass wir Manager, Scouts, DogFather auch die
Fotos, Namen und so alles sehen". Der Steckbrief war eine Einbahnstrasse:
Jeder pflegte seinen, niemand bekam ihn je zu Gesicht. Die
Schnittstelle dafuer lag fertig da und wurde von keiner Seite
aufgerufen. Jetzt steht "Das Team" auf steckbrief.html und (fuer
Creator) auf profil.html -- nach Rollen gruppiert, mit Bild, Rolle,
eigenem Satz und Kanaelen. Wer wen sieht, entscheidet weiterhin der
Server; ein Creator sieht seine Betreuung, nicht die anderen Creator.

SCREEN 4 -- "das soll richtig geil aussehen und nicht so einfach, auch
die Schrift". Die Ursache war kein Geschmack, sondern ein Loch im
Aufbau: Jede Seite gestaltete ihre Felder mit einem EIGENEN Selektor,
und wer ein Feld anderswo hinsetzt, faellt durch alle Netze. Genau so
stand "Ein Satz ueber dich" als grauer Kasten in MONOSPACE da --
<textarea> faellt ohne `font: inherit` auf Schreibmaschinenschrift
zurueck. Jetzt gibt es eine Grundlage fuer jedes Feld, und die drei
wortgleichen Kopien in aufgaben/profil/bereich sind weg.

  Der erste Anlauf setzte dort auch `width: 100%` -- die Pruefung
  meldete sofort Felder von 28 statt 362 Pixeln. Breite ist LAYOUT und
  gehoert der Seite; eine Grundlage mit Staerke null verliert jeden
  Breitenstreit, also darf sie ihn nicht anfangen.

SCREEN 5 -- "wieso seh ich mein Bild da nicht?" Ein lehrreicher Fehler:
Der Server liefert das Bild laengst mit, und im Quelltext dort steht
ausdruecklich "es steht in der Kopfleiste JEDER Seite UND IN DER
BEGRUESSUNG". Die Absicht war aufgeschrieben, die Haelfte nie gebaut --
und aufgefallen ist es nicht, weil ein Buchstabe im Kreis nicht falsch
aussieht, nur eben nicht wie man selbst.

PRUEFUNGEN. Zwei neue (pruef-sprung, pruef-team), eine erweiterte
(pruef-formulare). Sie haben vier echte Fehler gefunden, die mit blossem
Auge nicht zu sehen waren:
  * Der Sprung auf "dringend" hob auch ERLEDIGTE dringende Eintraege
    hervor -- man klickt auf "2" und bekommt drei markiert.
  * Auf einer leeren Zielseite erschien gar keine Erklaerung (frueher
    Ausstieg uebersprang sie). Das ist der wichtigere Fall: Wer auf eine
    Zahl klickt und im Leeren landet, glaubt, er sei falsch abgebogen.
  * Das Kachel-Merkzeichen stiess mit der Zahl zusammen.
  * Die Feldpruefung fand vier RICHTIGE Felder falsch (die Kanaele holen
    ihren Rahmen vom Umschlag mit dem "@"). Eine Pruefung, die
    Richtiges anmahnt, gewoehnt man sich ab zu lesen.
Und zwei Faelle, in denen die Pruefung sich selbst belogen haette: null
gefundene Felder galten als "in Ordnung", und der Ueberdeckungsvergleich
war nach einer Aenderung ohne ein einziges Vergleichselement gruen.
Beide zaehlen jetzt mit, wie viel sie tatsaechlich angesehen haben.

Co-Authored-By: Claude Opus 5 <[email protected]>

server/pruef-formulare.mjs

@@ -54,6 +54,14 @@ const salt = randomBytes(16).toString("hex");
 const hash = scryptSync("CODE-DOGI-0001", salt, 64, { N: 32768, r: 8, p: 1, maxmem: 96 * 1024 * 1024 }).toString("hex");
 d.prepare("INSERT INTO personen (name, rolle, code_hash, code_salt, code_n, aktiv, erstellt) VALUES (?,?,?,?,?,1,?)")
   .run("Filipe", "admin", hash, salt, 32768, new Date().toISOString());
+/* EIN CREATOR MUSS DA SEIN. Ohne ihn bauen profil.html und
+   startcheck.html ihr Formular gar nicht erst auf -- die Pruefung findet
+   dort null Felder und meldet "in Ordnung", ohne ein einziges angesehen
+   zu haben. Genau deshalb steht die Anzahl in der Bedingung. */
+const salt2 = randomBytes(16).toString("hex");
+const hash2 = scryptSync("CODE-ANNA-0001", salt2, 64, { N: 32768, r: 8, p: 1, maxmem: 96 * 1024 * 1024 }).toString("hex");
+d.prepare("INSERT INTO personen (name, rolle, code_hash, code_salt, code_n, aktiv, erstellt) VALUES (?,?,?,?,?,1,?)")
+  .run("Tili", "creator", hash2, salt2, 32768, new Date().toISOString());
 d.close();
 
 const { chromium } = await import(
@@ -141,6 +149,128 @@ for (const [breite, wie] of [[1280, "Computer"], [390, "Handy"]]) {
   await kontext.close();
 }
 
+/* =====================================================================
+   KEIN FELD OHNE GESTALTUNG (01.09.2026)
+
+   Der gemeldete Fehler: Das Feld "Ein Satz ueber dich" stand als grauer
+   Kasten in Monospace da, direkt neben gestalteten Feldern. Die Ursache
+   war ein Loch im Aufbau -- jede Seite gestaltete ihre Felder mit einem
+   EIGENEN Selektor (.gruppe textarea, .neu input, ...), und wer ein Feld
+   irgendwo anders hinsetzt, faellt durch alle Netze.
+
+   Ein Loch im Aufbau schliesst man nicht mit Hinsehen: Das naechste neue
+   Feld faellt an einer anderen Stelle durch. Diese Pruefung geht deshalb
+   ueber JEDES sichtbare Feld auf JEDER Seite und misst, was der Browser
+   tatsaechlich zeichnet.
+
+   Die Merkmale sind genau die, die im gemeldeten Fall fehlten:
+     RAHMEN     ohne Rand ist ein Feld im dunklen Entwurf nicht zu sehen
+     ECKEN      eckig heisst: der Browser hat gezeichnet, nicht wir
+     SCHRIFT    <textarea> faellt ohne `font: inherit` auf Monospace
+   ===================================================================== */
+console.log("\n=== Kein Feld ohne Gestaltung");
+{
+  const kontext = await browser.newContext({ viewport: { width: 1280, height: 1100 } });
+  const seite = await kontext.newPage();
+  await seite.goto(BASIS + "/workspace/", { waitUntil: "domcontentloaded" });
+  await seite.click('.rolle[data-rolle="admin"]');
+  await seite.fill("#code", "CODE-DOGI-0001");
+  await seite.click("button[type=submit]");
+  await seite.waitForURL("**/start.html", { timeout: 15000 });
+
+  let gesamt = 0;
+  for (const pfad of ["steckbrief.html", "profil.html", "aufgaben.html", "kalender.html",
+                      "dateien.html", "bereich.html?b=live", "content.html",
+                      "personen.html", "startcheck.html", "report.html"]) {
+    await seite.goto(BASIS + "/workspace/" + pfad, { waitUntil: "networkidle" });
+    await seite.waitForTimeout(900);
+    /* Zugeklappte Formulare aufmachen -- sonst pruefen wir genau die
+       Felder nicht, die selten jemand sieht und die deshalb ungestaltet
+       bleiben. */
+    for (const w of ["#neu-oeffnen", "#neu-auf", "#anlegen-auf"]) {
+      try { await seite.click(w, { timeout: 500 }); } catch { /* gibt es hier nicht */ }
+    }
+    await seite.waitForTimeout(400);
+
+    const r = await seite.evaluate(() => {
+      const felder = [...document.querySelectorAll(
+        '.inhalt input:not([type=file]):not([type=checkbox]):not([type=radio]), '
+        + '.inhalt textarea, .inhalt select')]
+        .filter((e) => e.getBoundingClientRect().width > 0);
+      const schlecht = [];
+      for (const e of felder) {
+        const st = getComputedStyle(e);
+        /* MANCHE FELDER HOLEN IHREN RAHMEN VOM UMSCHLAG, und das ist
+           richtig so: Bei den Kanaelen steht ein festes "@" vor dem Feld,
+           beide zusammen liegen in einem gemeinsamen Rahmen. Das Feld
+           selbst hat dort absichtlich keinen -- zwei Rahmen ineinander
+           saehen aus wie ein Fehler.
+
+           Der erste Anlauf dieser Pruefung meldete genau diese vier als
+           kaputt. Sie war damit eine Pruefung, die Richtiges anmahnt --
+           und die gewoehnt man sich ab zu lesen. Gemessen wird deshalb
+           der RAHMEN, der um das Feld herum tatsaechlich sichtbar ist,
+           egal ob er am Feld selbst oder am Umschlag haengt. */
+        const umschlag = e.parentElement;
+        const us = umschlag ? getComputedStyle(umschlag) : null;
+        const rahmenAmUmschlag = !!us && parseFloat(us.borderTopWidth) >= 1
+          && parseFloat(us.borderTopLeftRadius) >= 4;
+        const grund = [];
+        if (!rahmenAmUmschlag) {
+          if (parseFloat(st.borderTopWidth) < 1) grund.push("kein Rand");
+          if (parseFloat(st.borderTopLeftRadius) < 4) grund.push("eckig");
+          if (parseFloat(st.paddingLeft) < 6) grund.push("keine Polsterung");
+        }
+        /* Die Schrift gilt IMMER -- ein Umschlag kann sie nicht liefern. */
+        if (/mono|courier/i.test(st.fontFamily)) grund.push("Monospace");
+        if (parseFloat(st.fontSize) < 12) grund.push("Schrift " + st.fontSize);
+        if (grund.length) schlecht.push((e.id || e.tagName) + " – " + grund.join(", "));
+      }
+      return { anzahl: felder.length, schlecht };
+    });
+    gesamt += r.anzahl;
+    /* DIE ANZAHL GEHOERT IN DIE BEDINGUNG, nicht nur in den Meldetext:
+       Eine Seite ohne gefundene Felder waere sonst "in Ordnung". */
+    const gut = r.anzahl > 0 && r.schlecht.length === 0;
+    if (!gut) fehler++;
+    console.log(`  ${gut ? "ok  " : "FEHL"} ${pfad.padEnd(22)}${r.anzahl} Felder`
+      + (r.schlecht.length ? "  ->  " + r.schlecht.join(" | ")
+         : (r.anzahl ? "" : "  KEIN FELD GEFUNDEN – die Pruefung hat nichts geprueft")));
+  }
+  ok(gesamt >= 40, `insgesamt ${gesamt} Felder gemessen`);
+
+  /* GEGENPROBE: Kann diese Pruefung ueberhaupt anschlagen? Ein Feld wird
+     absichtlich auf den Rohzustand des Browsers zurueckgesetzt -- sie MUSS
+     es melden. Ohne diesen Nachweis waere sie eine Pruefung, die immer
+     bestaetigt, und die bestaetigt nichts. */
+  await seite.goto(BASIS + "/workspace/steckbrief.html", { waitUntil: "networkidle" });
+  await seite.waitForTimeout(900);
+  const gegen = await seite.evaluate(() => {
+    const e = document.getElementById("sb-ueber");
+    const vorher = getComputedStyle(e);
+    const gut = parseFloat(vorher.borderTopLeftRadius) >= 4
+      && !/mono|courier/i.test(vorher.fontFamily);
+    e.style.all = "revert";
+    const st = getComputedStyle(e);
+    return {
+      vorherGut: gut,
+      ecken: parseFloat(st.borderTopLeftRadius),
+      schrift: st.fontFamily,
+      erkannt: parseFloat(st.borderTopLeftRadius) < 4 || /mono|courier/i.test(st.fontFamily),
+    };
+  });
+  ok(gegen.vorherGut === true,
+     "das gemeldete Feld 'Ein Satz ueber dich' ist gestaltet (runde Ecken, keine Monospace)");
+  ok(gegen.erkannt === true,
+     `Gegenprobe: ein zurueckgesetztes Feld wird erkannt `
+     + `(Ecken ${gegen.ecken}px, Schrift ${gegen.schrift})`);
+
+  await seite.goto(BASIS + "/workspace/steckbrief.html", { waitUntil: "networkidle" });
+  await seite.waitForTimeout(900);
+  await seite.screenshot({ path: "pruef-felder.png", fullPage: false });
+  await kontext.close();
+}
+
 await browser.close();
 try { rmSync(ordner, { recursive: true, force: true }); } catch { /* egal */ }
 console.log(fehler ? `\n${fehler} Formular(e) fehlerhaft.` : "\nAlles in Ordnung.");

server/pruef-sprung.mjs

@@ -0,0 +1,334 @@
+/* Prueft den Sprung vom Bericht zu der Stelle, die eine Zahl zaehlt.
+
+   Wunsch vom 01.09.2026: "auf dieser Seite will ich, dass wenn man auf
+   die Kisten drueckt, sofort zu der Seite -- diesem Punkt --
+   weitergeschickt wird, wo man draufgedrueckt hat."
+
+   WAS HIER WIRKLICH SCHIEFGEHEN KANN, und warum diese Pruefung so
+   ausfuehrlich ist:
+
+   1. Ein Verweis, der irgendwohin fuehrt. "aufgaben.html" statt
+      "aufgaben.html?zeigen=ueberfaellig" faellt niemandem auf -- man
+      landet ja auf der richtigen Seite. Nur eben nicht an der Stelle.
+      Geprueft wird deshalb die ADRESSE jeder einzelnen Kiste.
+
+   2. Ein Ausschnitt, aus dem man nicht mehr herauskommt. Bleibt die
+      Zielseite gefiltert, sieht man beim naechsten Besuch drei von
+      zwanzig Aufgaben und haelt das fuer den ganzen Bestand. Geprueft
+      wird, dass "Alles zeigen" wirklich alles zurueckbringt UND den
+      Parameter aus der Adresse nimmt.
+
+   3. Eine Hervorhebung, die das Falsche trifft. Deshalb wird gezaehlt:
+      Die Zahl der hervorgehobenen Karten muss zu dem passen, was
+      angelegt wurde -- nicht "mehr als null".
+
+   4. Eine Pruefung, die immer bestaetigt. Zu jedem Sprung gehoert
+      deshalb eine GEGENPROBE: dieselbe Seite OHNE Parameter darf
+      nichts hervorheben und keine Leiste zeigen. */
+
+import { mkdtempSync, rmSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+
+const ordner = mkdtempSync(join(tmpdir(), "ws-sprung-"));
+process.env.WORKSPACE_DB = join(ordner, "workspace.db");
+process.env.PORT = "4212";
+process.env.SITE_ACCESS_SECRET = "lokaler-test";
+process.env.SITE_ACCESS_CODE_DOGI = "DOGI-TEST-1";
+process.env.SITE_PUBLIC_LAUNCH_AT = "2020-01-01T00:00:00+01:00";
+
+const express = (await import("express")).default;
+const ec = express.response.cookie;
+express.response.cookie = function (n, w, o) { return ec.call(this, n, w, { ...(o || {}), secure: false }); };
+await import("./index.js");
+await new Promise((r) => setTimeout(r, 700));
+const BASIS = "http://127.0.0.1:4212";
+setTimeout(() => { console.log("ABBRUCH"); process.exit(1); }, 300_000).unref?.();
+
+let fehler = 0;
+const ok = (b, t) => { console.log((b ? "  ok   " : "  FEHL ") + t); if (!b) fehler++; };
+
+await fetch(BASIS + "/workspace/api/anmelden", {
+  method: "POST", headers: { "Content-Type": "application/json" },
+  body: JSON.stringify({ rolle: "admin", code: "x" }) }).catch(() => {});
+
+const { DatabaseSync } = await import("node:sqlite");
+const { scryptSync, randomBytes } = await import("node:crypto");
+for (let i = 0; i < 60; i++) {
+  try {
+    const p = new DatabaseSync(process.env.WORKSPACE_DB);
+    try { p.prepare("SELECT 1 FROM personen LIMIT 1").get(); break; } finally { p.close(); }
+  } catch { await new Promise((r) => setTimeout(r, 250)); }
+}
+const d = new DatabaseSync(process.env.WORKSPACE_DB);
+const jetzt = new Date().toISOString();
+const heute = jetzt.slice(0, 10);
+const gestern = new Date(Date.now() - 86400_000).toISOString().slice(0, 10);
+const morgen = new Date(Date.now() + 86400_000).toISOString().slice(0, 10);
+
+function anlegen(name, rolle, code) {
+  const salt = randomBytes(16).toString("hex");
+  const hash = scryptSync(code, salt, 64, { N: 32768, r: 8, p: 1, maxmem: 96 * 1024 * 1024 }).toString("hex");
+  d.prepare("INSERT INTO personen (name, rolle, code_hash, code_salt, code_n, aktiv, erstellt) VALUES (?,?,?,?,?,1,?)")
+    .run(name, rolle, hash, salt, 32768, jetzt);
+  return d.prepare("SELECT last_insert_rowid() AS id").get().id;
+}
+const idDogi = anlegen("Filipe", "admin", "CODE-DOGI-0001");
+const idTili = anlegen("Tili", "creator", "CODE-ANNA-0001");
+
+/* ---- Ein Bestand mit BEKANNTEN Zahlen. Nur so kann die Pruefung
+       sagen "genau drei" statt "mehr als null". ---- */
+const AUFG = { offen: 3, arbeit: 1, review: 2, erledigt: 4 };
+let nr = 0;
+for (const [status, anzahl] of Object.entries(AUFG)) {
+  for (let i = 0; i < anzahl; i++) {
+    d.prepare(`INSERT INTO aufgaben
+      (titel, beschreibung, status, prioritaet, creator_id, verantwortlich_id, erstellt, erstellt_von)
+      VALUES (?,?,?,?,?,?,?,?)`)
+      .run(`Aufgabe ${++nr} (${status})`, "", status, "mittel", idTili, idDogi, jetzt, idDogi);
+  }
+}
+/* Zwei ueberfaellige -- eine offene und eine in Arbeit, damit die
+   Hervorhebung SPALTENUEBERGREIFEND geprueft wird. Genau da bricht eine
+   Umsetzung, die nur in einer Spalte sucht. */
+for (const status of ["offen", "arbeit"]) {
+  d.prepare(`INSERT INTO aufgaben
+    (titel, beschreibung, status, prioritaet, frist, creator_id, verantwortlich_id, erstellt, erstellt_von)
+    VALUES (?,?,?,?,?,?,?,?,?)`)
+    .run(`Laengst faellig (${status})`, "", status, "hoch", gestern, idTili, idDogi, jetzt, idDogi);
+}
+const UEBERFAELLIG = 2;
+/* Eine Frist in der Zukunft und eine erledigte mit alter Frist: Beide
+   duerfen NICHT als ueberfaellig gelten. Ohne sie wuerde eine Umsetzung
+   durchgehen, die schlicht jede Karte mit Frist hervorhebt. */
+d.prepare(`INSERT INTO aufgaben (titel, beschreibung, status, prioritaet, frist,
+  creator_id, verantwortlich_id, erstellt, erstellt_von) VALUES (?,?,?,?,?,?,?,?,?)`)
+  .run("Frist erst morgen", "", "offen", "mittel", morgen, idTili, idDogi, jetzt, idDogi);
+d.prepare(`INSERT INTO aufgaben (titel, beschreibung, status, prioritaet, frist,
+  creator_id, verantwortlich_id, erstellt, erstellt_von) VALUES (?,?,?,?,?,?,?,?,?)`)
+  .run("Alte Frist, aber fertig", "", "erledigt", "mittel", gestern, idTili, idDogi, jetzt, idDogi);
+AUFG.offen += 2;      /* die beiden neuen offenen */
+AUFG.arbeit += 1;
+AUFG.erledigt += 1;
+
+/* Bereichseintraege: zwei dringende, einer harmlos. */
+for (const [titel, dringlich, status] of [
+  ["Ton bricht ab", "hoch", "offen"],
+  ["Licht zu dunkel", "hoch", "offen"],
+  ["Kleinigkeit", "niedrig", "offen"],
+  ["Schon erledigt", "hoch", "erledigt"],
+]) {
+  d.prepare(`INSERT INTO eintraege
+    (bereich, art, titel, text, status, dringlichkeit, datum, creator_id, erstellt, erstellt_von)
+    VALUES ('live','vorbereitung',?,?,?,?,?,?,?,?)`)
+    .run(titel, "", status, dringlich, heute, idTili, jetzt, idDogi);
+}
+const DRINGEND_LIVE = 2;
+const OFFEN_LIVE = 3;
+d.close();
+
+/* ---------------------------------------------------------------- */
+
+const { chromium } = await import(
+  "file:///C:/Users/qciga/Documents/Obelix/Analyse/node_modules/playwright/index.mjs");
+const browser = await chromium.launch();
+const kontext = await browser.newContext({ viewport: { width: 1280, height: 1000 } });
+const konsole = [];
+const seite = await kontext.newPage();
+seite.on("console", (m) => { if (m.type() === "error") konsole.push(m.text()); });
+seite.on("pageerror", (e) => konsole.push("pageerror: " + e.message));
+
+await seite.goto(BASIS + "/workspace/", { waitUntil: "domcontentloaded" });
+await seite.click('.rolle[data-rolle="admin"]');
+await seite.fill("#code", "CODE-DOGI-0001");
+await seite.click("button[type=submit]");
+await seite.waitForURL("**/start.html", { timeout: 15000 });
+
+/* ================================================================
+   1. Die Kisten im Bericht sind Wege -- mit dem richtigen Ziel
+   ================================================================ */
+console.log("\n=== Die Kisten im Bericht fuehren irgendwohin");
+await seite.goto(BASIS + "/workspace/report.html", { waitUntil: "networkidle" });
+await seite.waitForTimeout(1400);
+
+const kisten = await seite.evaluate(() => [...document.querySelectorAll(".kacheln .kachel")]
+  .map((k) => ({
+    name: k.querySelector(".kachel__name")?.textContent?.trim(),
+    zahl: k.querySelector(".kachel__zahl")?.textContent?.trim(),
+    ziel: k.tagName === "A" ? k.getAttribute("href") : null,
+    beschriftung: k.getAttribute("aria-label") || "",
+  })));
+
+ok(kisten.length >= 10, `${kisten.length} Kennzahlen auf der Seite`);
+const mitWeg = kisten.filter((k) => k.ziel);
+ok(mitWeg.length >= 8, `  davon ${mitWeg.length} mit einem Weg dahinter`);
+
+/* Die wichtigsten einzeln -- ein Verweis auf die richtige SEITE, aber
+   ohne Stelle, waere sonst nicht zu unterscheiden. */
+const soll = [
+  ["Aufgaben erledigt", "aufgaben.html?zeigen=erledigt"],
+  ["Aufgaben offen", "aufgaben.html?zeigen=offen"],
+  ["überfällig", "aufgaben.html?zeigen=ueberfaellig"],
+  ["Dateien im Review", "dateien.html?zeigen=review"],
+  ["Dateien freigegeben", "dateien.html?zeigen=frei"],
+  ["Termine gewesen", "kalender.html?zeigen=vergangen"],
+  ["Termine stehen an", "kalender.html?zeigen=kommend"],
+  ["dringende Punkte", "bereich.html?b=live&zeigen=dringend"],
+];
+for (const [name, ziel] of soll) {
+  const k = kisten.find((x) => x.name === name);
+  ok(k?.ziel === ziel, `  "${name}" fuehrt auf ${k?.ziel || "NIRGENDWOHIN"}`);
+}
+ok(kisten.every((k) => !k.ziel || /ansehen/.test(k.beschriftung)),
+   "  jeder Weg hat einen Satz fuer Vorleseprogramme");
+
+/* GEGENPROBE: Eine Kiste ohne Inhalt darf NICHT verlinkt sein. Ein Weg
+   zu null Dingen ist eine Enttaeuschung, kein Angebot. Geprueft an
+   "Content: neue Eintraege" -- dort wurde nichts angelegt. */
+const leer = kisten.find((k) => k.name === "LIVE-Schnitt aus 0 Bewertung(en)");
+ok(leer && !leer.ziel, `  Gegenprobe: "${leer?.name}" fuehrt bewusst nirgendwohin`);
+
+/* ================================================================
+   2. Aufgabenbrett: hervorheben, nicht filtern
+   ================================================================ */
+console.log("\n=== Der Sprung auf das Aufgabenbrett");
+for (const [was, erwartet, wort] of [
+  ["offen", AUFG.offen, "offen"],
+  ["review", AUFG.review, "Freigabe"],
+  ["erledigt", AUFG.erledigt, "erledigt"],
+  ["ueberfaellig", UEBERFAELLIG, "Frist"],
+]) {
+  await seite.goto(`${BASIS}/workspace/aufgaben.html?zeigen=${was}`, { waitUntil: "networkidle" });
+  await seite.waitForTimeout(900);
+  const r = await seite.evaluate(() => ({
+    treffer: document.querySelectorAll('.karte[data-treffer="ja"]').length,
+    /* ALLE Karten muessen weiterhin da sein -- das Brett lebt davon,
+       dass man die vier Spalten nebeneinander sieht. */
+    karten: document.querySelectorAll(".karte").length,
+    leiste: !!document.querySelector(".ziel-leiste"),
+    text: document.querySelector(".ziel-leiste__text")?.textContent || "",
+    marke: document.querySelector(".ziel-leiste__marke")?.textContent || "",
+  }));
+  ok(r.treffer === erwartet,
+     `?zeigen=${was}: ${r.treffer} hervorgehoben (erwartet ${erwartet}), ${r.karten} Karten insgesamt`);
+  ok(r.leiste && r.marke === String(erwartet), `  die Leiste sagt "${r.marke}"`);
+  ok(new RegExp(wort, "i").test(r.text), `  und erklaert es ("${r.text}")`);
+  ok(r.karten > erwartet, "  es wird hervorgehoben, NICHT gefiltert");
+}
+
+/* Der Weg zurueck. Ohne ihn bliebe die Seite fuer immer markiert. */
+const zurueck = await seite.evaluate(async () => {
+  document.querySelector(".ziel-leiste__weg").click();
+  await new Promise((r) => setTimeout(r, 250));
+  return {
+    treffer: document.querySelectorAll('[data-treffer="ja"]').length,
+    leiste: !!document.querySelector(".ziel-leiste"),
+    adresse: location.search,
+  };
+});
+ok(zurueck.treffer === 0 && !zurueck.leiste, '"Alles zeigen" nimmt die Hervorhebung zurueck');
+ok(!zurueck.adresse.includes("zeigen"),
+   `  und raeumt die Adresse mit auf ("${zurueck.adresse}") – sonst kaeme sie beim Neuladen wieder`);
+
+/* GEGENPROBE: ohne Parameter darf nichts markiert sein. */
+await seite.goto(BASIS + "/workspace/aufgaben.html", { waitUntil: "networkidle" });
+await seite.waitForTimeout(900);
+const ohne = await seite.evaluate(() => ({
+  treffer: document.querySelectorAll('[data-treffer="ja"]').length,
+  leiste: !!document.querySelector(".ziel-leiste"),
+  karten: document.querySelectorAll(".karte").length,
+}));
+ok(ohne.treffer === 0 && !ohne.leiste && ohne.karten > 0,
+   `Gegenprobe: ohne Parameter nichts hervorgehoben (${ohne.karten} Karten, ${ohne.treffer} markiert)`);
+
+/* Und ein unbekannter Wert darf ebenfalls nichts tun -- nicht abstuerzen
+   und nicht eine leere Leiste zeigen. */
+await seite.goto(BASIS + "/workspace/aufgaben.html?zeigen=quatsch", { waitUntil: "networkidle" });
+await seite.waitForTimeout(900);
+const quatsch = await seite.evaluate(() => ({
+  leiste: !!document.querySelector(".ziel-leiste"),
+  karten: document.querySelectorAll(".karte").length,
+}));
+ok(!quatsch.leiste && quatsch.karten > 0,
+   "Gegenprobe: ein unbekannter Wert wird still ignoriert");
+
+/* ================================================================
+   3. Bereichsseite: dringend hervorheben, offen filtern
+   ================================================================ */
+console.log("\n=== Der Sprung in die LIVE-Analyse");
+await seite.goto(BASIS + "/workspace/bereich.html?b=live&zeigen=dringend", { waitUntil: "networkidle" });
+await seite.waitForTimeout(1200);
+const dr = await seite.evaluate(() => ({
+  treffer: document.querySelectorAll('.eintrag-karte[data-treffer="ja"]').length,
+  alle: document.querySelectorAll(".eintrag-karte").length,
+  marke: document.querySelector(".ziel-leiste__marke")?.textContent || "",
+}));
+ok(dr.treffer === DRINGEND_LIVE,
+   `dringende Eintraege hervorgehoben: ${dr.treffer} von ${dr.alle} (erwartet ${DRINGEND_LIVE})`);
+ok(dr.alle > dr.treffer, "  die harmlosen stehen weiterhin da");
+
+await seite.goto(BASIS + "/workspace/bereich.html?b=live&zeigen=offen", { waitUntil: "networkidle" });
+await seite.waitForTimeout(1200);
+const of = await seite.evaluate(() => ({
+  alle: document.querySelectorAll(".eintrag-karte").length,
+  treffer: document.querySelectorAll('.eintrag-karte[data-treffer="ja"]').length,
+  gedrueckt: [...document.querySelectorAll("#filter .schritt")]
+    .find((b) => b.getAttribute("aria-pressed") === "true")?.textContent,
+}));
+ok(of.alle === OFFEN_LIVE && of.treffer === OFFEN_LIVE,
+   `nur die offenen: ${of.alle} gezeigt (erwartet ${OFFEN_LIVE})`);
+ok(of.gedrueckt === "Nur offene",
+   `  und der Filterknopf zeigt es an ("${of.gedrueckt}") – ein unsichtbarer Ausschnitt waere eine Falle`);
+
+/* ================================================================
+   4. Dateien: hier wird wirklich gefiltert
+   ================================================================ */
+console.log("\n=== Der Sprung in die Dateien");
+await seite.goto(BASIS + "/workspace/dateien.html?zeigen=review", { waitUntil: "networkidle" });
+await seite.waitForTimeout(1200);
+const da = await seite.evaluate(() => ({
+  leiste: !!document.querySelector(".ziel-leiste"),
+  text: document.querySelector(".ziel-leiste__text")?.textContent || "",
+  gedrueckt: [...document.querySelectorAll("#filter .schritt")]
+    .find((b) => b.getAttribute("aria-pressed") === "true")?.textContent?.trim(),
+}));
+/* Es liegt keine Datei da -- und genau dieser Fall ist der wichtige:
+   Wer auf eine Zahl klickt und auf einer leeren Seite landet, glaubt,
+   er sei falsch abgebogen. Die Leiste muss ihm sagen, dass er richtig
+   ist und die Sache erledigt. */
+ok(da.leiste, "auch ohne Treffer erscheint die Leiste");
+ok(/nichts davon da/.test(da.text), `  und sagt, dass hier nichts liegt ("${da.text}")`);
+ok(/review/i.test(da.gedrueckt || ""), `  der Filter steht auf "${da.gedrueckt}"`);
+
+/* ================================================================
+   5. Kalender: schaltet auf die Liste um
+   ================================================================ */
+console.log("\n=== Der Sprung in den Kalender");
+await seite.goto(BASIS + "/workspace/kalender.html?zeigen=kommend", { waitUntil: "networkidle" });
+await seite.waitForTimeout(1400);
+const ka = await seite.evaluate(() => ({
+  ansicht: document.getElementById("kalender")?.dataset.ansicht,
+  gedrueckt: [...document.querySelectorAll(".k-ansicht")]
+    .find((b) => b.getAttribute("aria-pressed") === "true")?.dataset.ansicht,
+  leiste: !!document.querySelector(".ziel-leiste"),
+}));
+ok(ka.ansicht === "liste",
+   `der Kalender schaltet auf die Liste um (${ka.ansicht}) – in der Monatsansicht liesse sich `
+   + "vergangen/kommend gar nicht hervorheben");
+ok(ka.gedrueckt === "liste",
+   `  und der Ansichtsknopf zeigt dasselbe (${ka.gedrueckt}) – sonst behauptet die Leiste "Monat"`);
+ok(ka.leiste, "  die Leiste ist da");
+
+/* ================================================================ */
+ok(konsole.length === 0,
+   `keine Fehler in der Konsole${konsole.length ? " -> " + konsole.join(" | ") : ""}`);
+
+await seite.goto(BASIS + "/workspace/report.html", { waitUntil: "networkidle" });
+await seite.waitForTimeout(1200);
+await seite.screenshot({ path: "pruef-sprung.png", fullPage: false });
+
+await kontext.close();
+await browser.close();
+try { rmSync(ordner, { recursive: true, force: true }); } catch { /* egal */ }
+console.log(fehler ? `\n${fehler} Prüfung(en) fehlgeschlagen.` : "\nAlles in Ordnung.");
+process.exit(fehler ? 1 : 0);

server/pruef-team.mjs

@@ -0,0 +1,326 @@
+/* Prueft zwei Wuensche vom 01.09.2026:
+
+   SCREEN 2: "ich will, dass wir Manager, Scouts, DogFather auch die
+   Fotos, Namen und so alles sehen, alles was die in ihrem Profil
+   eintragen."
+
+   SCREEN 5: "wieso seh ich mein Bild da nicht, obwohl ich schon ein Foto
+   drin hab?"
+
+   WAS AN DIESER PRUEFUNG WICHTIG IST.
+
+   Ein Profilbild zu pruefen, ohne ein echtes Bild zu haben, beweist
+   nichts. Beim .wer__bild-Fehler im August benutzte die Pruefung ein
+   1x1-Pixel-PNG -- damit kann kein Stil-Fehler sichtbar werden, weil
+   ein Punkt nichts ueberdecken kann. Hier wird deshalb ein RICHTIGES
+   Bild hochgeladen (600x600) und danach gemessen, ob es auch die
+   Flaeche fuellt, die es fuellen soll -- und ob es rund beschnitten ist
+   statt quadratisch ueber den Rahmen zu ragen.
+
+   Und zu jeder Aussage die Gegenprobe: Wer KEIN Bild hat, muss den
+   Buchstaben sehen. Sonst koennte die Pruefung gruen sein, weil
+   ueberall Bilder erscheinen -- auch da, wo keine sind. */
+
+import { mkdtempSync, rmSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { deflateSync } from "node:zlib";
+
+const ordner = mkdtempSync(join(tmpdir(), "ws-team-"));
+process.env.WORKSPACE_DB = join(ordner, "workspace.db");
+/* DATEN_ORDNER wird aus dem Datenbankpfad abgeleitet (workspace.js) --
+   die Profilbilder landen also von selbst im Testordner. */
+process.env.PORT = "4213";
+process.env.SITE_ACCESS_SECRET = "lokaler-test";
+process.env.SITE_ACCESS_CODE_DOGI = "DOGI-TEST-1";
+process.env.SITE_PUBLIC_LAUNCH_AT = "2020-01-01T00:00:00+01:00";
+
+const express = (await import("express")).default;
+const ec = express.response.cookie;
+express.response.cookie = function (n, w, o) { return ec.call(this, n, w, { ...(o || {}), secure: false }); };
+await import("./index.js");
+await new Promise((r) => setTimeout(r, 700));
+const BASIS = "http://127.0.0.1:4213";
+setTimeout(() => { console.log("ABBRUCH"); process.exit(1); }, 300_000).unref?.();
+
+let fehler = 0;
+const ok = (b, t) => { console.log((b ? "  ok   " : "  FEHL ") + t); if (!b) fehler++; };
+
+await fetch(BASIS + "/workspace/api/anmelden", {
+  method: "POST", headers: { "Content-Type": "application/json" },
+  body: JSON.stringify({ rolle: "admin", code: "x" }) }).catch(() => {});
+
+const { DatabaseSync } = await import("node:sqlite");
+const { scryptSync, randomBytes, createHash } = await import("node:crypto");
+for (let i = 0; i < 60; i++) {
+  try {
+    const p = new DatabaseSync(process.env.WORKSPACE_DB);
+    try { p.prepare("SELECT 1 FROM personen LIMIT 1").get(); break; } finally { p.close(); }
+  } catch { await new Promise((r) => setTimeout(r, 250)); }
+}
+const d = new DatabaseSync(process.env.WORKSPACE_DB);
+const jetzt = new Date().toISOString();
+function anlegen(name, rolle, code) {
+  const salt = randomBytes(16).toString("hex");
+  const hash = scryptSync(code, salt, 64, { N: 32768, r: 8, p: 1, maxmem: 96 * 1024 * 1024 }).toString("hex");
+  d.prepare("INSERT INTO personen (name, rolle, code_hash, code_salt, code_n, aktiv, erstellt) VALUES (?,?,?,?,?,1,?)")
+    .run(name, rolle, hash, salt, 32768, jetzt);
+  return d.prepare("SELECT last_insert_rowid() AS id").get().id;
+}
+const idDogi  = anlegen("Filipe", "admin", "CODE-DOGI-0001");
+const idMgr   = anlegen("Mara", "manager", "CODE-MANA-0001");
+const idScout = anlegen("Patrick", "scout", "CODE-SCOU-0001");
+const idTili  = anlegen("Tili", "creator", "CODE-ANNA-0001");
+d.prepare("INSERT INTO betreuung (creator_id, betreuer_id, seit) VALUES (?,?,?)")
+  .run(idTili, idScout, jetzt);
+
+/* Jeder traegt etwas in seinen Steckbrief ein -- sonst koennte die
+   Pruefung nicht unterscheiden, ob "alles was die eintragen" wirklich
+   ankommt oder ob nur Namen angezeigt werden. */
+d.prepare("UPDATE personen SET ueber_mich = ?, tiktok = ? WHERE id = ?")
+  .run("Manager & CEO dieser Seite", "dogfather", idDogi);
+d.prepare("UPDATE personen SET ueber_mich = ?, instagram = ? WHERE id = ?")
+  .run("Ich kuemmere mich um die Vertraege.", "mara.mgmt", idMgr);
+d.prepare("UPDATE personen SET ueber_mich = ? WHERE id = ?")
+  .run("Ich finde neue Leute.", idScout);
+/* Tili bekommt BEWUSST nichts -- die Gegenprobe zum Platzhaltersatz. */
+d.close();
+
+/* ---- Ein echtes PNG, 600x600, einfarbig. Kein 1x1-Punkt: Der kann
+       nichts ueberdecken und wuerde jeden Stil-Fehler verstecken. ---- */
+function pngBauen(breite, hoehe) {
+  const roh = Buffer.alloc((breite * 3 + 1) * hoehe);
+  for (let y = 0; y < hoehe; y++) {
+    const z = y * (breite * 3 + 1);
+    roh[z] = 0;
+    for (let x = 0; x < breite; x++) {
+      roh[z + 1 + x * 3] = 200; roh[z + 2 + x * 3] = 60; roh[z + 3 + x * 3] = 120;
+    }
+  }
+  const stueck = (art, daten) => {
+    const l = Buffer.alloc(4); l.writeUInt32BE(daten.length);
+    const k = Buffer.concat([Buffer.from(art), daten]);
+    const c = Buffer.alloc(4);
+    c.writeUInt32BE(crc32(k) >>> 0);
+    return Buffer.concat([l, k, c]);
+  };
+  const ihdr = Buffer.alloc(13);
+  ihdr.writeUInt32BE(breite, 0); ihdr.writeUInt32BE(hoehe, 4);
+  ihdr[8] = 8; ihdr[9] = 2; ihdr[10] = 0; ihdr[11] = 0; ihdr[12] = 0;
+  return Buffer.concat([
+    Buffer.from([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]),
+    stueck("IHDR", ihdr), stueck("IDAT", deflateSync(roh)), stueck("IEND", Buffer.alloc(0)),
+  ]);
+}
+let tabelle = null;
+function crc32(buf) {
+  if (!tabelle) {
+    tabelle = new Int32Array(256);
+    for (let n = 0; n < 256; n++) {
+      let c = n;
+      for (let k = 0; k < 8; k++) c = c & 1 ? 0xedb88320 ^ (c >>> 1) : c >>> 1;
+      tabelle[n] = c;
+    }
+  }
+  let c = -1;
+  for (const b of buf) c = tabelle[(c ^ b) & 0xff] ^ (c >>> 8);
+  return c ^ -1;
+}
+const BILD = pngBauen(600, 600);
+
+/* ---------------------------------------------------------------- */
+
+const { chromium } = await import(
+  "file:///C:/Users/qciga/Documents/Obelix/Analyse/node_modules/playwright/index.mjs");
+const browser = await chromium.launch();
+
+async function anmelden(rolle, code) {
+  const kontext = await browser.newContext({ viewport: { width: 1280, height: 1000 } });
+  const konsole = [];
+  const seite = await kontext.newPage();
+  seite.on("console", (m) => { if (m.type() === "error") konsole.push(m.text()); });
+  seite.on("pageerror", (e) => konsole.push("pageerror: " + e.message));
+  await seite.goto(BASIS + "/workspace/", { waitUntil: "domcontentloaded" });
+  await seite.click(`.rolle[data-rolle="${rolle}"]`);
+  await seite.fill("#code", code);
+  await seite.click("button[type=submit]");
+  await seite.waitForURL("**/start.html", { timeout: 15000 });
+  return { kontext, seite, konsole };
+}
+
+/* ================================================================
+   1. Ein echtes Bild hochladen -- und pruefen, dass es ueberall ankommt
+   ================================================================ */
+console.log("\n=== Das eigene Bild (Screen 5)");
+const a1 = await anmelden("admin", "CODE-DOGI-0001");
+
+const hoch = await a1.seite.evaluate(async (b64) => {
+  const roh = Uint8Array.from(atob(b64), (c) => c.charCodeAt(0));
+  const a = await fetch("/workspace/api/steckbrief/bild", {
+    method: "POST", credentials: "same-origin",
+    headers: { "Content-Type": "image/png" }, body: roh,
+  });
+  return { status: a.status, ...(await a.json().catch(() => ({}))) };
+}, BILD.toString("base64"));
+ok(hoch.status === 200 && !!hoch.bild, `ein echtes Bild (600x600) laesst sich hochladen (${hoch.status})`);
+
+/* Kommt es auf der STARTSEITE in der Begruessung an? Das war der
+   gemeldete Fehler: Dort stand der Buchstabe, obwohl ein Foto da war --
+   und im Server steht seit jeher der Kommentar "es steht in der
+   Kopfleiste JEDER Seite UND IN DER BEGRUESSUNG". Die Absicht war
+   aufgeschrieben, die Haelfte nie gebaut. */
+await a1.seite.goto(BASIS + "/workspace/start.html", { waitUntil: "networkidle" });
+await a1.seite.waitForTimeout(1500);
+const gruss = await a1.seite.evaluate(() => {
+  const p = document.getElementById("plakette");
+  const b = p?.querySelector("img");
+  if (!b) return { bild: false, text: p?.textContent || "" };
+  const r = b.getBoundingClientRect();
+  const pr = p.getBoundingClientRect();
+  const st = getComputedStyle(b);
+  const ps = getComputedStyle(p);
+  return {
+    bild: true,
+    geladen: b.complete && b.naturalWidth > 0,
+    /* Fuellt es die Plakette wirklich aus? Ein Bild, das nur zu einem
+       Viertel drinsteht, sieht aus wie ein Fehler. */
+    fuellt: r.width >= pr.width - 2 && r.height >= pr.height - 2,
+    /* Rund beschnitten -- ohne overflow:hidden ragt ein quadratisches
+       Bild aus dem runden Rahmen. */
+    beschnitten: ps.overflow === "hidden",
+    passung: st.objectFit,
+    kein_text: (p.textContent || "").trim() === "",
+  };
+});
+ok(gruss.bild === true, "die Begruessung zeigt das Bild statt des Buchstabens");
+ok(gruss.geladen === true, "  und es ist wirklich geladen (nicht nur ein leerer Rahmen)");
+ok(gruss.fuellt === true, "  es fuellt die Plakette aus");
+ok(gruss.beschnitten === true, "  und ist rund beschnitten (overflow: hidden)");
+ok(gruss.passung === "cover", `  ohne zu verzerren (object-fit: ${gruss.passung})`);
+ok(gruss.kein_text === true, "  der Buchstabe steht nicht mehr daneben");
+
+/* ================================================================
+   2. Das Team -- alle Rollen, mit allem, was sie eingetragen haben
+   ================================================================ */
+console.log("\n=== Das Team (Screen 2)");
+await a1.seite.goto(BASIS + "/workspace/steckbrief.html", { waitUntil: "networkidle" });
+await a1.seite.waitForTimeout(1600);
+
+const team = await a1.seite.evaluate(() => {
+  const block = document.getElementById("team-block");
+  const karten = [...document.querySelectorAll(".team-karte")];
+  const sichtbar = (e) => {
+    const r = e.getBoundingClientRect();
+    return r.width > 0 && r.height > 0;
+  };
+  return {
+    da: block && !block.hidden,
+    /* IST DER STIL ANGEKOMMEN? Die .block__*-Klassen stehen in
+       automation.css und wissen.css -- diese Seite laedt beide nicht.
+       Genau so sind hier schon zweimal Stile ins Leere gelaufen.
+       Gemessen wird deshalb der tatsaechliche Stil, nicht die Klasse. */
+    gestaltet: karten[0] ? (() => {
+      const st = getComputedStyle(karten[0]);
+      return parseFloat(st.borderTopWidth) >= 1 && parseFloat(st.paddingLeft) >= 8;
+    })() : null,
+    anzahl: karten.length,
+    sichtbare: karten.filter(sichtbar).length,
+    gruppen: [...document.querySelectorAll(".team-gruppe__name")].map((e) => e.textContent),
+    leute: karten.map((k) => ({
+      name: k.querySelector(".team-karte__name")?.textContent,
+      rolle: k.dataset.rolle,
+      rollenname: k.querySelector(".team-karte__rolle")?.textContent,
+      ueber: k.querySelector(".team-karte__ueber")?.textContent || null,
+      bild: !!k.querySelector(".team-karte__bild img"),
+      buchstabe: k.querySelector(".team-karte__bild img")
+        ? null : (k.querySelector(".team-karte__bild")?.textContent || "").trim(),
+      kanaele: [...k.querySelectorAll(".team-kanal")].map((a) => a.getAttribute("href")),
+      ich: k.dataset.ich === "ja",
+    })),
+    ueber: document.documentElement.scrollWidth - document.documentElement.clientWidth,
+  };
+});
+
+ok(team.da === true, "der Team-Block erscheint");
+ok(team.gestaltet === true, "  und die Stile sind angekommen (Rand und Polsterung gemessen)");
+ok(team.anzahl === 4 && team.sichtbare === 4,
+   `alle vier Personen stehen da (${team.anzahl}, davon ${team.sichtbare} sichtbar)`);
+ok(team.gruppen.join(", ") === "Management, Scouting, Creator",
+   `nach Rollen gruppiert: ${team.gruppen.join(", ")}`);
+
+const dogi = team.leute.find((l) => l.name === "Filipe");
+const mara = team.leute.find((l) => l.name === "Mara");
+const pat  = team.leute.find((l) => l.name === "Patrick");
+const tili = team.leute.find((l) => l.name === "Tili");
+
+ok(!!dogi && !!mara && !!pat && !!tili,
+   "Manager, Scout, DogFather UND Creator sind dabei – nicht nur Creator");
+ok(dogi?.bild === true, "DogFather wird mit seinem Foto gezeigt");
+ok(dogi?.ueber === "Manager & CEO dieser Seite",
+   `  und mit dem, was er ueber sich geschrieben hat ("${dogi?.ueber}")`);
+ok(dogi?.ich === true, "  seine eigene Karte ist als solche gekennzeichnet");
+ok(/tiktok\.com/.test(dogi?.kanaele?.[0] || ""),
+   `  sein Kanal fuehrt wirklich hin (${dogi?.kanaele?.[0]})`);
+ok(mara?.ueber === "Ich kuemmere mich um die Vertraege.", "der Manager-Text kommt an");
+ok(pat?.ueber === "Ich finde neue Leute.", "der Scout-Text kommt an");
+ok(mara?.rollenname === "Manager" && pat?.rollenname === "Scout",
+   `die Rolle steht dabei (${mara?.rollenname}, ${pat?.rollenname})`);
+
+/* GEGENPROBEN -- ohne sie waere oben alles auch dann gruen, wenn die
+   Seite einfach ueberall Bilder und Texte hinschriebe. */
+ok(mara?.bild === false && mara?.buchstabe === "M",
+   `Gegenprobe: wer kein Foto hat, bekommt den Buchstaben ("${mara?.buchstabe}")`);
+ok(tili?.ueber === null,
+   "Gegenprobe: wer nichts ueber sich geschrieben hat, bekommt keinen Platzhaltersatz");
+ok(tili?.kanaele?.length === 0,
+   "Gegenprobe: ohne Kanal steht dort auch keiner");
+ok(mara?.ich === false, "Gegenprobe: fremde Karten sind nicht als 'du' markiert");
+ok(team.ueber <= 0, `nichts steht seitlich ueber (${team.ueber}px)`);
+ok(a1.konsole.length === 0,
+   `keine Fehler in der Konsole${a1.konsole.length ? " -> " + a1.konsole.join(" | ") : ""}`);
+
+await a1.seite.screenshot({ path: "pruef-team.png", fullPage: false });
+await a1.kontext.close();
+
+/* ================================================================
+   3. Ein Creator sieht seine Betreuung -- aber nicht die anderen Creator
+   ================================================================ */
+console.log("\n=== Was ein Creator davon sieht");
+const a2 = await anmelden("creator", "CODE-ANNA-0001");
+await a2.seite.goto(BASIS + "/workspace/profil.html", { waitUntil: "networkidle" });
+await a2.seite.waitForTimeout(1600);
+const sicht = await a2.seite.evaluate(() => ({
+  da: !document.getElementById("team-block")?.hidden,
+  namen: [...document.querySelectorAll(".team-karte__name")].map((e) => e.textContent).sort(),
+}));
+ok(sicht.da === true, "ein Creator sieht das Team auf seiner Profilseite");
+ok(sicht.namen.includes("Patrick"), "  seinen Scout");
+ok(sicht.namen.includes("Filipe") && sicht.namen.includes("Mara"),
+   "  und das Management");
+ok(a2.konsole.length === 0,
+   `keine Fehler in der Konsole${a2.konsole.length ? " -> " + a2.konsole.join(" | ") : ""}`);
+await a2.kontext.close();
+
+/* Ein zweiter Creator, um zu pruefen, dass Creator einander NICHT sehen.
+   Das ist kein Schoenheitsfehler: Der Server entscheidet das, und wenn
+   sich die Regel je aendert, muss es hier auffallen. */
+const d2 = new DatabaseSync(process.env.WORKSPACE_DB);
+const salt = randomBytes(16).toString("hex");
+const hash = scryptSync("CODE-LUNA-0001", salt, 64, { N: 32768, r: 8, p: 1, maxmem: 96 * 1024 * 1024 }).toString("hex");
+d2.prepare("INSERT INTO personen (name, rolle, code_hash, code_salt, code_n, aktiv, erstellt) VALUES (?,?,?,?,?,1,?)")
+  .run("Luna", "creator", hash, salt, 32768, jetzt);
+d2.close();
+
+const a3 = await anmelden("creator", "CODE-ANNA-0001");
+await a3.seite.goto(BASIS + "/workspace/profil.html", { waitUntil: "networkidle" });
+await a3.seite.waitForTimeout(1600);
+const fremd = await a3.seite.evaluate(() =>
+  [...document.querySelectorAll(".team-karte__name")].map((e) => e.textContent));
+ok(!fremd.includes("Luna"),
+   `Gegenprobe: ein Creator sieht einen fremden Creator NICHT (${fremd.join(", ")})`);
+await a3.kontext.close();
+
+await browser.close();
+try { rmSync(ordner, { recursive: true, force: true }); } catch { /* egal */ }
+console.log(fehler ? `\n${fehler} Prüfung(en) fehlgeschlagen.` : "\nAlles in Ordnung.");
+process.exit(fehler ? 1 : 0);

workspace/assets/css/aufgaben.css

@@ -90,19 +90,15 @@
   text-transform: uppercase; color: var(--text-still);
 }
 
-.neu input, .neu textarea, .neu select {
-  width: 100%; padding: 10px 12px;
-  background: rgba(255, 255, 255, .045);
-  border: 1px solid var(--rand);
-  border-radius: var(--radius-klein);
-  color: var(--text); font: inherit;
-  transition: border-color var(--tempo), box-shadow var(--tempo);
-}
-.neu textarea { resize: vertical; min-height: 62px; }
-.neu input:focus, .neu textarea:focus, .neu select:focus {
-  outline: none; border-color: rgba(63, 189, 245, .7);
-  box-shadow: 0 0 0 3px rgba(63, 189, 245, .16);
-}
+/* Aussehen, Rahmen, Schrift und Fokusring stehen seit dem 01.09.2026
+   EINMAL in start.css (":where(.inhalt) :where(input, textarea, select)").
+   Die Kopie, die hier stand, war Wort fuer Wort dieselbe -- und genau so
+   entstehen zwei Feld-Optiken auf einer Seite, sobald eine der beiden
+   verbessert wird. Hier bleibt nur, was WIRKLICH nur hier gilt. */
+.neu textarea { min-height: 62px; }
+/* Die BREITE bleibt hier: Sie ist Layout dieser Seite, nicht Aussehen.
+   Ohne sie fallen leere Auswahlfelder auf 28 Pixel zusammen. */
+.neu input, .neu select, .neu textarea { width: 100%; }
 /* Aufhellen ist nicht mehr noetig: color-scheme: dark (gate.css) laesst den
    Browser das Kalendersymbol schon hell zeichnen. Ein invert() wuerde es hier
    wieder verdunkeln. */

workspace/assets/css/bereich.css

@@ -286,17 +286,12 @@
 }
 
 .nachricht-neu { display: grid; gap: 8px; }
-.nachricht-neu textarea {
-  width: 100%; resize: vertical; min-height: 44px;
-  padding: 10px 12px;
-  border: 1px solid var(--rand); border-radius: 9px;
-  background: rgba(0, 0, 0, .25); color: var(--text);
-  font: inherit; font-size: .88rem;
-}
-.nachricht-neu textarea:focus {
-  outline: none;
-  border-color: color-mix(in srgb, var(--akzent) 50%, transparent);
-}
+/* Aussehen, Rahmen, Schrift und Fokusring stehen seit dem 01.09.2026
+   EINMAL in start.css (":where(.inhalt) :where(input, textarea, select)").
+   Die Kopie, die hier stand, war Wort fuer Wort dieselbe -- und genau so
+   entstehen zwei Feld-Optiken auf einer Seite, sobald eine der beiden
+   verbessert wird. Hier bleibt nur, was WIRKLICH nur hier gilt. */
+.nachricht-neu textarea { width: 100%; min-height: 44px; }
 .nachricht-neu .knopf { justify-self: start; }
 
 @media (max-width: 560px) {

workspace/assets/css/profil.css

@@ -20,19 +20,13 @@
 .gruppe .feld-schild { margin-top: 14px; }
 .gruppe .feld-schild:first-of-type { margin-top: 0; }
 
-.gruppe textarea, .gruppe input {
-  width: 100%; padding: 10px 12px;
-  background: rgba(255, 255, 255, .045);
-  border: 1px solid var(--rand);
-  border-radius: var(--radius-klein);
-  color: var(--text); font: inherit;
-  transition: border-color var(--tempo), box-shadow var(--tempo);
-}
-.gruppe textarea { resize: vertical; min-height: 46px; }
-.gruppe textarea:focus, .gruppe input:focus {
-  outline: none; border-color: rgba(63, 189, 245, .7);
-  box-shadow: 0 0 0 3px rgba(63, 189, 245, .16);
-}
+/* Aussehen, Rahmen, Schrift und Fokusring stehen seit dem 01.09.2026
+   EINMAL in start.css (":where(.inhalt) :where(input, textarea, select)").
+   Die Kopie, die hier stand, war Wort fuer Wort dieselbe -- und genau so
+   entstehen zwei Feld-Optiken auf einer Seite, sobald eine der beiden
+   verbessert wird. Hier bleibt nur, was WIRKLICH nur hier gilt. */
+.gruppe textarea, .gruppe input { width: 100%; }
+.gruppe textarea { min-height: 46px; }
 /* Siehe aufgaben.css: color-scheme: dark erledigt das Aufhellen. */
 .gruppe input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; }
 

workspace/assets/css/start.css

@@ -1310,6 +1310,18 @@ body.start > main { position: relative; z-index: 1; }
     inset 0 1px 0 rgba(255, 255, 255, .1),
     0 10px 26px -12px color-mix(in srgb, var(--rolle-ton) 60%, transparent);
 }
+/* Das eigene Bild füllt die Plakette ganz aus. `overflow: hidden` gehört
+   dazu -- ohne das ragt ein quadratisches Bild aus dem runden Rahmen und
+   sieht aus wie ein Fehler. `object-fit: cover` schneidet mittig zu statt
+   zu verzerren: Ein in die Breite gezogenes Gesicht ist schlimmer als
+   ein knapper Ausschnitt. */
+.willkommen__plakette { overflow: hidden; }
+.willkommen__foto {
+  width: 100%; height: 100%;
+  object-fit: cover; display: block;
+  border-radius: 50%;
+}
+
 /* Dieselben vier Rollentöne wie im Kopf der Seite und auf der
    Zugangsseite -- eine Rolle hat überall dieselbe Farbe. */
 .willkommen__plakette[data-rolle="admin"]   { --rolle-ton: #d8a13a; }
@@ -2225,3 +2237,337 @@ body.start #protokoll {
 @media (max-width: 560px) {
   .kachel__merk { right: 10px; }
 }
+
+/* ---------- Das Team -----------------------------------------------------
+
+   "ich will, dass wir Manager, Scouts, DogFather auch die Fotos, Namen
+   und so alles sehen, alles was die in ihrem Profil eintragen."
+   (01.09.2026)
+
+   Steht bewusst HIER und nicht in profil.css: steckbrief.html lädt
+   profil.css zwar, profil.html aber ebenfalls -- und die nächste Seite,
+   die das Team zeigen soll, vielleicht nicht mehr. In start.css gilt es
+   überall. Genau an dieser Stelle sind hier schon zweimal fertige Stile
+   ins Leere gelaufen (August: .knopf-still, .schalter, .kopf-zeile;
+   01.09.: die ganze Checkliste in content.css). */
+
+.team-block { margin: 34px 0 30px; }
+.team-block__kopf {
+  display: flex; align-items: center; gap: 10px; margin-bottom: 6px;
+}
+.team-block__titel {
+  margin: 0; font-size: 1.16rem; font-weight: 650; color: var(--text);
+  letter-spacing: -.01em;
+}
+.team-block__zahl {
+  padding: 2px 9px;
+  border: 1px solid var(--rand); border-radius: 999px;
+  font-size: .74rem; color: var(--text-still);
+  font-variant-numeric: tabular-nums;
+}
+.team-block__text {
+  margin: 0 0 18px; max-width: 74ch;
+  font-size: .87rem; line-height: 1.55; color: var(--text-still);
+}
+
+.team-gruppe { margin: 22px 0 10px; }
+.team-gruppe:first-child { margin-top: 0; }
+.team-gruppe__name {
+  margin: 0; font-size: .82rem; font-weight: 650;
+  letter-spacing: .08em; text-transform: uppercase;
+  color: var(--text-leise);
+}
+.team-gruppe__text {
+  margin: 3px 0 0; font-size: .83rem; line-height: 1.5;
+  color: var(--text-still);
+}
+
+/* minmax(min(300px,100%),1fr): Ohne das min() kann das Raster auf einem
+   schmalen Bildschirm nicht unter 300px schrumpfen und schiebt die Seite
+   seitlich hinaus -- ein Fehler, der auf dem Rechner unsichtbar ist. */
+.team-reihe {
+  display: grid; gap: 12px;
+  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
+}
+
+.team-karte {
+  --k-ton: var(--akzent);
+  display: flex; align-items: flex-start; gap: 14px;
+  padding: 15px 16px;
+  border: 1px solid var(--rand);
+  border-radius: var(--radius-klein);
+  background:
+    linear-gradient(150deg, color-mix(in srgb, var(--k-ton) 9%, transparent), transparent 58%),
+    var(--flaeche);
+  transition: border-color var(--tempo), transform var(--tempo);
+}
+.team-karte:hover {
+  border-color: color-mix(in srgb, var(--k-ton) 40%, var(--rand));
+}
+/* Dieselben vier Rollentöne wie in der Begrüßung, im Seitenkopf und auf
+   der Zugangsseite. Eine Rolle hat überall dieselbe Farbe -- sonst muss
+   man jede Ansicht neu lernen. */
+.team-karte[data-rolle="admin"]   { --k-ton: #d8a13a; }
+.team-karte[data-rolle="manager"] { --k-ton: #8a76ff; }
+.team-karte[data-rolle="scout"]   { --k-ton: #12a69b; }
+.team-karte[data-rolle="creator"] { --k-ton: #3fbdf5; }
+/* Die eigene Karte: ein Rand in der eigenen Rollenfarbe. Ohne das sucht
+   man sich zwischen zwanzig Gesichtern selbst. */
+.team-karte[data-ich="ja"] {
+  border-color: color-mix(in srgb, var(--k-ton) 52%, var(--rand));
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k-ton) 18%, transparent);
+}
+
+.team-karte__bild {
+  flex: none; overflow: hidden;
+  display: grid; place-items: center;
+  width: 54px; height: 54px; border-radius: 50%;
+  font-size: 1.35rem; font-weight: 700; line-height: 1;
+  color: #f2f7fd;
+  border: 1px solid color-mix(in srgb, var(--k-ton) 42%, transparent);
+  background:
+    radial-gradient(120% 120% at 30% 20%,
+      color-mix(in srgb, var(--k-ton) 32%, transparent), transparent 70%),
+    rgba(255, 255, 255, .04);
+}
+/* object-fit: cover schneidet mittig zu statt zu verzerren -- ein in die
+   Breite gezogenes Gesicht ist schlimmer als ein knapper Ausschnitt. */
+.team-karte__bild img {
+  width: 100%; height: 100%; object-fit: cover; display: block;
+}
+
+.team-karte__text { min-width: 0; flex: 1; }
+.team-karte__zeile { display: flex; align-items: baseline; gap: 8px; }
+.team-karte__name {
+  margin: 0; font-size: 1rem; font-weight: 650; color: var(--text);
+  min-width: 0; overflow-wrap: anywhere;
+}
+.team-karte__ich {
+  flex: none; padding: 1px 7px;
+  border: 1px solid color-mix(in srgb, var(--k-ton) 45%, transparent);
+  border-radius: 999px;
+  font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
+  color: var(--k-ton);
+}
+.team-karte__rolle {
+  margin: 2px 0 0; font-size: .78rem; color: var(--k-ton);
+  letter-spacing: .04em;
+}
+.team-karte__ueber {
+  margin: 9px 0 0; font-size: .87rem; line-height: 1.55;
+  color: var(--text-still); overflow-wrap: anywhere;
+}
+
+.team-karte__kanaele {
+  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px;
+}
+.team-kanal {
+  /* 30px hoch plus Abstand -- ein Ziel, das man mit dem Daumen trifft. */
+  display: inline-flex; align-items: center;
+  min-height: 30px; padding: 4px 11px;
+  border: 1px solid var(--rand); border-radius: 999px;
+  font-size: .78rem; color: var(--text-leise); text-decoration: none;
+  transition: border-color var(--tempo), color var(--tempo), background var(--tempo);
+}
+.team-kanal:hover, .team-kanal:focus-visible {
+  color: var(--text);
+  border-color: color-mix(in srgb, var(--k-ton) 50%, var(--rand));
+  background: color-mix(in srgb, var(--k-ton) 12%, transparent);
+}
+.team-kanal:focus-visible { outline: 2px solid var(--k-ton); outline-offset: 2px; }
+
+@media (max-width: 560px) {
+  .team-karte { padding: 13px 14px; gap: 12px; }
+  .team-karte__bild { width: 46px; height: 46px; font-size: 1.15rem; }
+}
+@media (forced-colors: active) {
+  .team-karte { border-color: CanvasText; }
+}
+
+/* ---------- "Zeig mir genau das" ------------------------------------------
+
+   Die Leiste, die nach einem Sprung vom Bericht erscheint, und die
+   Hervorhebung der gemeinten Elemente. (01.09.2026)
+
+   Die Hervorhebung ist ein RAND und keine Hintergrundfarbe: Auf den
+   Karten liegen bereits Verläufe in der Bereichsfarbe; eine zweite
+   Fläche darüber macht den Text schlechter lesbar. Ein Rand plus ein
+   ruhiger Schein zeigt dasselbe, ohne dem Inhalt etwas wegzunehmen. */
+
+.ziel-leiste {
+  --z-ton: #e8b45a;
+  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
+  margin: 0 0 20px; padding: 11px 14px;
+  border: 1px solid color-mix(in srgb, var(--z-ton) 38%, var(--rand));
+  border-radius: var(--radius-klein);
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--z-ton) 11%, transparent), transparent 70%),
+    var(--flaeche);
+}
+.ziel-leiste__marke {
+  flex: none; min-width: 26px; padding: 3px 9px;
+  text-align: center;
+  border: 1px solid color-mix(in srgb, var(--z-ton) 42%, transparent);
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--z-ton) 14%, transparent);
+  color: var(--z-ton); font-weight: 700; font-size: .86rem;
+  font-variant-numeric: tabular-nums;
+}
+.ziel-leiste__text {
+  flex: 1; min-width: 0;
+  font-size: .88rem; line-height: 1.5; color: var(--text);
+  overflow-wrap: anywhere;
+}
+.ziel-leiste__weg {
+  flex: none; min-height: 34px; padding: 6px 13px;
+  border: 1px solid var(--rand); border-radius: 999px;
+  background: transparent; color: var(--text-leise);
+  font: inherit; font-size: .82rem; cursor: pointer;
+  transition: border-color var(--tempo), color var(--tempo);
+}
+.ziel-leiste__weg:hover { color: var(--text); border-color: var(--z-ton); }
+.ziel-leiste__weg:focus-visible { outline: 2px solid var(--z-ton); outline-offset: 2px; }
+
+/* Der Treffer selbst. Gilt für JEDE Karte im Workspace, damit nicht
+   jede Seite ihre eigene Hervorhebung erfindet. */
+[data-treffer="ja"] {
+  border-color: #e8b45a !important;
+  box-shadow: 0 0 0 1px rgba(232, 180, 90, .35),
+              0 0 22px -6px rgba(232, 180, 90, .5);
+}
+/* Ein einmaliges, langsames Aufleuchten beim Ankommen -- damit das Auge
+   die Stelle findet, ohne dass etwas blinkt. Läuft genau einmal. */
+@media (prefers-reduced-motion: no-preference) {
+  [data-treffer="ja"] { animation: treffer-an 1.1s ease-out 1; }
+  @keyframes treffer-an {
+    0%   { box-shadow: 0 0 0 1px rgba(232, 180, 90, .8),
+                       0 0 30px -2px rgba(232, 180, 90, .75); }
+    100% { box-shadow: 0 0 0 1px rgba(232, 180, 90, .35),
+                       0 0 22px -6px rgba(232, 180, 90, .5); }
+  }
+}
+@media (forced-colors: active) {
+  [data-treffer="ja"] { outline: 3px solid Highlight; }
+}
+
+/* ---------- Die Kisten im Bericht sind Wege ------------------------------
+
+   Eine Zahl, die man anklicken kann, muss auch aussehen wie etwas zum
+   Anklicken -- sonst probiert es niemand. */
+.kachel--weg {
+  display: block; color: inherit; text-decoration: none;
+  cursor: pointer;
+  transition: border-color var(--tempo), transform var(--tempo);
+}
+.kachel--weg:hover { transform: translateY(-1px); }
+.kachel--weg:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
+.kachel--weg .kachel__name { display: flex; align-items: center; gap: 6px; }
+.kachel--weg .kachel__name::after {
+  content: '→'; color: var(--text-still); font-size: .9rem;
+  transition: transform var(--tempo), color var(--tempo);
+}
+.kachel--weg:hover .kachel__name::after {
+  color: var(--akzent); transform: translateX(3px);
+}
+@media (prefers-reduced-motion: reduce) {
+  .kachel--weg:hover { transform: none; }
+  .kachel--weg:hover .kachel__name::after { transform: none; }
+}
+
+/* ---------- Eingabefelder: EINE Grundlage für alle ------------------------
+
+   Wunsch vom 01.09.2026: "ich will, dass das alles richtig geil aussieht
+   und nicht so einfach, auch die Schrift."
+
+   DIE URSACHE war nicht Geschmack, sondern ein Loch im Aufbau. Jede
+   Seite gestaltete ihre Felder mit einem EIGENEN Selektor (.gruppe
+   textarea, .neu input, .nachricht-neu textarea …). Wer ein Feld
+   irgendwo anders hinsetzt, fällt durch alle Netze und bekommt den
+   nackten Kasten des Browsers. Genau das war beim Feld "Ein Satz über
+   dich" passiert: grauer Kasten, eckig -- und in MONOSPACE, weil
+   <textarea> ohne `font: inherit` auf Schreibmaschinenschrift
+   zurückfällt. Neben den gestalteten Kanalfeldern darunter sah es aus
+   wie ein Fehler, und es war auch einer.
+
+   Deshalb steht hier eine Grundlage, die JEDES Feld im Inhalt erfasst.
+   Sie kann keine bestehende Seite kaputtmachen: `:where()` hat die
+   Stärke null, also gewinnt jede vorhandene Regel weiterhin. Sie greift
+   nur dort, wo sonst gar nichts stünde -- ein Netz unter dem Netz.
+
+   (Der umgekehrte Weg wäre gewesen, alle Einzelregeln zu vereinheitlichen.
+   Das hätte fünf Seiten auf einmal verändert, ohne dass jemand danach
+   gefragt hat.) */
+
+/* OHNE `width` -- und das ist eine Lehre aus dem ersten Anlauf. Er setzte
+   hier `width: 100%`, und die Formularpruefung meldete sofort Felder von
+   28 statt 362 Pixeln: Breite ist LAYOUT und gehoert der Seite, nicht dem
+   Aussehen. Eine Grundlage mit der Staerke null verliert jeden
+   Breitenstreit, den eine Seite fuehrt -- also darf sie ihn gar nicht
+   erst anfangen. Hier steht nur, WIE ein Feld aussieht; WO es steht und
+   wie breit es ist, entscheidet weiterhin die Seite. */
+:where(.inhalt) :where(input:not([type="file"]):not([type="checkbox"]):not([type="radio"]),
+                       textarea, select) {
+  padding: 10px 13px;
+  /* font: inherit ist die eigentliche Reparatur -- ohne das schreibt
+     der Browser in <textarea> in Monospace und in <select> in seiner
+     Systemschrift. */
+  font: inherit;
+  font-size: .92rem;
+  line-height: 1.5;
+  color: var(--text);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012)),
+    rgba(0, 0, 0, .2);
+  border: 1px solid var(--rand);
+  border-radius: var(--radius-klein);
+  /* Die feine helle Kante oben -- derselbe Griff wie bei den Kacheln.
+     Sie lässt das Feld eingelassen wirken statt aufgemalt. */
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
+  transition: border-color var(--tempo), box-shadow var(--tempo), background var(--tempo);
+}
+:where(.inhalt) :where(textarea) {
+  resize: vertical; min-height: 52px;
+}
+:where(.inhalt) :where(input, textarea, select):hover {
+  border-color: color-mix(in srgb, var(--akzent) 26%, var(--rand));
+}
+:where(.inhalt) :where(input, textarea, select):focus {
+  outline: none;
+  border-color: color-mix(in srgb, var(--akzent) 62%, transparent);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02)),
+    rgba(0, 0, 0, .12);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05),
+              0 0 0 3px color-mix(in srgb, var(--akzent) 17%, transparent);
+}
+
+/* Der Platzhalter darf NICHT wie ein ausgefülltes Feld aussehen -- sonst
+   hält man ihn für den eigenen Text und schreibt nichts hinein. Deutlich
+   leiser als der Inhalt, aber noch lesbar (nicht unter 45 % Deckung). */
+.inhalt input::placeholder,
+.inhalt textarea::placeholder {
+  color: var(--text-still);
+  opacity: .85;
+}
+
+/* Feldbeschriftungen -- gilt für beide Schreibweisen, die es hier
+   historisch gibt. Kleiner, gesperrt und leise: Die Beschriftung soll
+   den Blick führen, nicht mit dem Inhalt konkurrieren. */
+.inhalt .feld-schild,
+.inhalt .feldschild {
+  display: block;
+  font-size: .74rem; font-weight: 600;
+  letter-spacing: .1em; text-transform: uppercase;
+  color: var(--text-leise);
+}
+
+/* AUF DEM HANDY 16 PIXEL. Das ist keine Geschmacksfrage: Safari auf dem
+   iPhone zoomt beim Antippen automatisch in die Seite hinein, sobald ein
+   Feld kleiner als 16px schreibt -- und zoomt danach NICHT von selbst
+   wieder heraus. Man tippt einmal in ein Feld und der Rest der Seite ist
+   für immer zu groß. */
+@media (max-width: 760px) {
+  .inhalt input:not([type="file"]):not([type="checkbox"]):not([type="radio"]),
+  .inhalt textarea,
+  .inhalt select { font-size: 16px; }
+}

workspace/assets/js/aufgaben.js

@@ -34,6 +34,9 @@
   const $ = (id) => document.getElementById(id);
   const heute = new Date().toISOString().slice(0, 10);
   let ich = null;
+  /* Nur beim ERSTEN Laden springen. Sonst reisst es die Seite nach
+     jeder Statusaenderung erneut an dieselbe Stelle. */
+  let gesprungen = false;
 
   /* Texte werden ausschließlich über textContent gesetzt, nie über
      innerHTML -- ein Aufgabentitel darf keine Auszeichnung einschleusen. */
@@ -236,6 +239,9 @@
       const eigene = aufgaben.filter((a) => a.status === s.status);
       const spalte = el('section', 'spalte');
       spalte.dataset.status = s.status;
+      /* Die Karte merkt sich, wozu sie gehoert -- daraus findet der
+         Sprung vom Bericht die richtigen wieder, ohne die Liste ein
+         zweites Mal durchzugehen. */
 
       const kopf = el('h2', 'spalte__kopf');
       kopf.append(el('span', 'spalte__punkt'), el('span', null, s.name),
@@ -246,17 +252,53 @@
       spalte.append(el('p', 'spalte__unter', s.unter));
 
       if (!eigene.length) spalte.append(el('p', 'spalte__leer', s.leer));
-      else for (const a of eigene) spalte.append(karte(a));
+      else for (const a of eigene) {
+        const k = karte(a);
+        k.dataset.status = a.status;
+        if (a.status !== 'erledigt' && a.frist && a.frist < heute) k.dataset.faellig = 'ja';
+        spalte.append(k);
+      }
 
       brett.append(spalte);
     }
   }
 
+  /* ---------- Sprung vom Bericht -------------------------------------------
+
+     "wenn man auf die Kisten drueckt, sofort zu diesem Punkt
+     weitergeschickt werden" (01.09.2026).
+
+     Hier wird NICHT gefiltert, sondern hervorgehoben. Das Brett lebt
+     davon, dass man alle vier Spalten nebeneinander sieht -- wer nur die
+     ueberfaelligen zeigt, nimmt genau den Ueberblick weg, wegen dem man
+     hergekommen ist. */
+  const ZEIG_TEXT = {
+    offen: 'Aufgaben, die offen sind',
+    arbeit: 'Aufgaben, die gerade laufen',
+    review: 'Aufgaben, die auf Freigabe warten',
+    erledigt: 'Aufgaben, die erledigt sind',
+    ueberfaellig: 'Aufgaben, deren Frist vorbei ist',
+  };
+
+  function sprungZeigen() {
+    const was = window.zielSchluessel?.();
+    if (!was || !ZEIG_TEXT[was]) return;
+    const treffer = was === 'ueberfaellig'
+      ? document.querySelectorAll('.karte[data-faellig="ja"]')
+      : document.querySelectorAll(`.karte[data-status="${was}"]`);
+    window.zielMarkieren?.(treffer, ZEIG_TEXT[was]);
+  }
+
   async function laden() {
     try {
       const antwort = await hole('/workspace/api/aufgaben');
       if (!antwort.ok) { melde('Aufgaben konnten nicht geladen werden.'); return; }
       zeichne((await antwort.json()).aufgaben);
+      /* Erst NACH dem Zeichnen -- vorher gibt es die Karten nicht, und
+         der Sprung ginge ins Leere, ohne dass jemand etwas merkt. Nur
+         beim ersten Laden: Sonst springt die Seite nach jeder
+         Statusaenderung erneut weg. */
+      if (!gesprungen) { gesprungen = true; sprungZeigen(); }
     } catch { /* bereits umgeleitet */ }
   }
 

workspace/assets/js/bereich.js

@@ -33,6 +33,9 @@
   let bereich = null;
   let einstellung = null;
   let filter = '';
+  /* Nur beim ersten Laden springen -- sonst reisst es die Seite nach
+     jeder Bewertung erneut an dieselbe Stelle. */
+  let gesprungen = false;
 
   const el = (tag, klasse, text) => {
     const k = document.createElement(tag);
@@ -116,6 +119,30 @@
     return k;
   }
 
+  /* Sprung vom Bericht (01.09.2026). "dringend" ist kein Filter der
+     Seite -- die Dringlichkeit steht als data-dringlich an der Karte,
+     und genau die wird hervorgehoben. "offen" dagegen IST ein Filter,
+     der wurde schon vor dem ersten Laden gesetzt. */
+  function sprungZeigen(ziel, karten) {
+    if (gesprungen) return;
+    gesprungen = true;
+    const was = window.zielSchluessel?.();
+    if (was === 'dringend') {
+      /* OFFEN und hoch -- genau so zaehlt der Bericht (workspace-reports.js:
+         "status = 'offen' AND dringlichkeit = 'hoch'"). Ohne das
+         status-Merkmal hebt die Seite auch erledigte dringende Eintraege
+         hervor: Man klickt auf "2" und bekommt drei markiert. Gefunden
+         von pruef-sprung.mjs -- mit blossem Auge waere das nie
+         aufgefallen, beide Zahlen sehen plausibel aus. */
+      window.zielMarkieren?.(
+        ziel.querySelectorAll('.eintrag-karte[data-dringlich="hoch"][data-status="offen"]'),
+        'Einträge, die offen und als dringend eingestuft sind');
+    } else if (was === 'offen') {
+      window.zielMarkieren?.([...karten.values()], 'Einträge, die noch offen sind',
+        async () => { filter = ''; await laden(); });
+    }
+  }
+
   function filterBauen() {
     const ziel = $('filter');
     ziel.textContent = '';
@@ -152,6 +179,12 @@
         ziel.append(el('p', 'leer-hinweis', daten.eintraege.length
           ? 'Zu dieser Auswahl gibt es nichts.'
           : 'Noch kein Eintrag in diesem Bereich.'));
+        /* AUCH HIER springen -- und das ist kein Schoenheitsfehler,
+           sondern der wichtigere Fall: Wer auf "3 dringende Punkte"
+           klickt und auf einer leeren Seite landet, glaubt, er sei
+           falsch abgebogen. Die Leiste sagt ihm, dass er richtig ist und
+           die Sache erledigt. */
+        sprungZeigen(ziel, new Map());
         return;
       }
       const karten = new Map();
@@ -160,6 +193,7 @@
         karten.set(e.id, k);
         ziel.append(k);
       }
+      sprungZeigen(ziel, karten);
 
       /* Bewertung und Rueckmeldungen. In EINER Abfrage fuer die ganze
          Liste -- zwanzig Eintraege einzeln zu fragen waeren zwanzig
@@ -341,6 +375,11 @@
       } catch { /* Zuordnung bleibt leer */ }
     }
 
+    /* Kommt jemand vom Bericht mit "nur die offenen", wird der Filter
+       VOR dem ersten Laden gesetzt -- sonst baut die Seite alles auf,
+       um es gleich wieder wegzuwerfen, und das flackert sichtbar. */
+    if (window.zielSchluessel?.() === 'offen') filter = 'offen';
+
     await laden();
   })();
 })();

workspace/assets/js/content.js

@@ -183,6 +183,11 @@
   function karte(e) {
     const k = el('article', 'video');
     if (e.saeule_slot) k.dataset.slot = String(e.saeule_slot);
+    /* Fuer den Sprung vom Bericht: Die Karte traegt ihren Zustand und
+       ihre Dringlichkeit, damit "3 Content: offen" genau diese drei
+       hervorheben kann statt nur die Seite zu oeffnen. */
+    k.dataset.status = e.status;
+    if (e.dringlichkeit) k.dataset.dringlich = e.dringlichkeit;
 
     k.append(el('h3', 'video__titel', e.titel));
 
@@ -455,9 +460,30 @@
     streckeZeigen();
     saeulenZeigen();
     saeulenAuswahlFuellen();
+    /* Sprung vom Bericht -- nach streckeZeigen(), vorher gibt es die
+       Karten nicht. Nur beim ersten Laden. */
+    if (!gesprungen) { gesprungen = true; sprungZeigen(); }
     await kennzahlenLaden();
   }
 
+  /* Sprung vom Bericht (01.09.2026). Hervorheben statt filtern: Die
+     Strecke lebt davon, dass man Idee, Produktion und Veroeffentlicht
+     nebeneinander sieht -- wer nur die offenen zeigt, nimmt genau den
+     Ueberblick weg, wegen dem man hergekommen ist. */
+  let gesprungen = false;
+  function sprungZeigen() {
+    const was = window.zielSchluessel?.();
+    if (was === 'offen') {
+      window.zielMarkieren?.(document.querySelectorAll('.video[data-status="offen"]'),
+        'Content-Einträge, die noch offen sind');
+    } else if (was === 'dringend') {
+      /* offen UND hoch -- genau so zaehlt der Bericht. */
+      window.zielMarkieren?.(
+        document.querySelectorAll('.video[data-dringlich="hoch"][data-status="offen"]'),
+        'Content-Einträge, die offen und als dringend eingestuft sind');
+    }
+  }
+
   function saeulenAuswahlFuellen() {
     const feld = $('f-saeule');
     const vorher = feld.value;

workspace/assets/js/dateien.js

@@ -313,12 +313,56 @@
         ziel.append(el('p', 'leer-hinweis', daten.dateien.length
           ? 'In diesem Zustand liegt gerade nichts.'
           : 'Noch keine Datei abgelegt.'));
+        /* AUCH HIER springen, und das ist der wichtigere Fall: Wer auf
+           "2 Dateien im Review" klickt und auf einer leeren Seite
+           landet, glaubt, er sei falsch abgebogen. Die Leiste sagt ihm,
+           dass er richtig ist und die Sache erledigt.
+           (Dieselbe Luecke gab es in bereich.js -- ein frueher Ausstieg
+           ueberspringt eben alles, was danach kommt.) */
+        if (!gesprungen) { gesprungen = true; sprungZeigen(); }
         return;
       }
       for (const d of sichtbar) ziel.append(zeile(d));
+
+      /* Sprung vom Bericht -- erst NACH dem Zeichnen, vorher gibt es die
+         Zeilen nicht. Nur beim ersten Mal, sonst reisst es die Seite bei
+         jeder Statusaenderung wieder weg. */
+      if (!gesprungen) { gesprungen = true; sprungZeigen(); }
     } catch { /* umgeleitet */ }
   }
 
+  /* ---------- Sprung vom Bericht -------------------------------------------
+
+     Anders als beim Aufgabenbrett wird hier WIRKLICH gefiltert: Diese
+     Seite hat ohnehin eine Filterleiste, und die Zustandsknoepfe darin
+     zeigen dann mit an, wo man gerade steht. Ein zweites, unsichtbares
+     Auswahlverfahren daneben waere verwirrend. */
+  const ZEIG_STATUS = { review: 'review', frei: 'freigegeben', entwurf: 'entwurf' };
+  const ZEIG_TEXT = {
+    review: 'Dateien, die auf Freigabe warten',
+    frei: 'Dateien, die freigegeben sind',
+    entwurf: 'Dateien im Entwurf',
+  };
+
+  function sprungZeigen() {
+    const was = window.zielSchluessel?.();
+    if (!was || !ZEIG_STATUS[was]) return;
+    window.zielMarkieren?.(
+      document.querySelectorAll(`#liste .datei[data-status="${ZEIG_STATUS[was]}"]`),
+      ZEIG_TEXT[was],
+      /* Beim "Alles zeigen" faellt auch der Filter -- sonst bliebe die
+         Seite ausgeschnitten, und man haelt drei Dateien fuer alles,
+         was da ist. */
+      async () => {
+        filter = '';
+        for (const x of $('filter').querySelectorAll('.schritt')) {
+          x.setAttribute('aria-pressed', String(!x.dataset.status));
+        }
+        await laden();
+      });
+  }
+  let gesprungen = false;
+
   for (const b of $('filter').querySelectorAll('.schritt')) {
     b.addEventListener('click', async () => {
       filter = b.dataset.status;
@@ -363,6 +407,18 @@
       $('zuordnung').hidden = false;
       $('f-creator').closest('.feld').hidden = true;
     }
+
+    /* Kommt jemand vom Bericht, wird der Filter VOR dem ersten Laden
+       gesetzt -- sonst baut die Seite erst alles auf, um es gleich
+       wieder wegzuwerfen, und das sieht man flackern. Die Filterleiste
+       zeigt danach von selbst, wo man steht. */
+    const was = window.zielSchluessel?.();
+    if (was && ZEIG_STATUS[was]) {
+      filter = ZEIG_STATUS[was];
+      for (const x of $('filter').querySelectorAll('.schritt')) {
+        x.setAttribute('aria-pressed', String(x.dataset.status === filter));
+      }
+    }
     await laden();
   })();
 })();

workspace/assets/js/kalender.js

@@ -768,9 +768,33 @@
       baueSaison();
       baueMonatsanlaesse();
       zeichnen();
+      /* Sprung vom Bericht -- erst NACH dem Zeichnen, vorher gibt es die
+         Tagesbloecke nicht. Nur beim ersten Mal: Sonst reisst es die
+         Ansicht bei jedem Monatswechsel wieder an dieselbe Stelle. */
+      if (!gesprungen) { gesprungen = true; sprungZeigen(); }
     } catch { /* umgeleitet */ }
   }
 
+  /* ---------- Sprung vom Bericht -------------------------------------------
+
+     Der Bericht zaehlt "Termine gewesen" und "Termine stehen an" -- beides
+     Zeitraeume, keine Kategorien. In der Monatsansicht liessen sie sich
+     gar nicht sinnvoll hervorheben (ein Tageskaestchen enthaelt beides).
+     Deshalb schaltet der Sprung auf die LISTE um: Dort ist jeder Tag ein
+     eigener Block, und vergangen/kommend ist bereits daran vermerkt. */
+  function sprungZeigen() {
+    const was = window.zielSchluessel?.();
+    if (was !== 'vergangen' && was !== 'kommend') return;
+    const alle = [...document.querySelectorAll('.k-listentag')];
+    const treffer = was === 'vergangen'
+      ? alle.filter((b) => b.dataset.vergangen === 'ja')
+      : alle.filter((b) => b.dataset.vergangen !== 'ja');
+    window.zielMarkieren?.(treffer, was === 'vergangen'
+      ? 'Tage im Zeitraum, die schon vorbei sind'
+      : 'Tage, an denen noch etwas ansteht');
+  }
+  let gesprungen = false;
+
   /* ---------- Bedienung ----------------------------------------------------- */
 
   $('zurueck-zeit').addEventListener('click', () => springen(-1));
@@ -888,6 +912,18 @@
         }
       } catch { /* Zuordnung bleibt leer */ }
     }
+
+    /* Vom Bericht kommend: VOR dem ersten Laden auf die Liste stellen,
+       sonst baut die Seite erst den Monat auf und wirft ihn gleich
+       wieder weg. Der Ansichtsknopf wird mitgesetzt -- sonst zeigt die
+       Leiste "Monat" an, waehrend die Liste dasteht. */
+    const wohin = window.zielSchluessel?.();
+    if (wohin === 'vergangen' || wohin === 'kommend') {
+      ansicht = 'liste';
+      for (const x of document.querySelectorAll('.k-ansicht')) {
+        x.setAttribute('aria-pressed', String(x.dataset.ansicht === 'liste'));
+      }
+    }
     await laden();
   })();
 })();

workspace/assets/js/kopf.js

@@ -574,3 +574,101 @@
     });
   }
 })();
+
+/* ===================================================================
+   "Zeig mir genau das" -- der Sprung von einer Zahl zu dem, was sie zaehlt.
+
+   Wunsch vom 01.09.2026 zur Report-Seite: "wenn man auf die Kisten
+   drueckt, will ich sofort zu der Seite -- diesem Punkt --
+   weitergeschickt werden, wo man draufgedrueckt hat."
+
+   Eine Zahl auf einem Bericht ist eine Behauptung. Wer sie nicht
+   nachsehen kann, muss sie glauben -- und wer sie nachsehen will, sucht
+   sie auf der Zielseite von Hand zusammen. Genau dieser Weg faellt hier
+   weg.
+
+   Die Zahl fuehrt deshalb nicht nur auf die richtige SEITE, sondern auf
+   die richtige STELLE: ?zeigen=<schluessel> in der Adresse, die
+   Zielseite sucht die passenden Elemente, springt hin und hebt sie kurz
+   hervor.
+
+   EIN Helfer fuer alle Seiten und nicht fuenf eigene: Sonst springt die
+   eine Seite hart, die andere weich, die dritte hebt gar nichts hervor
+   -- und niemand traut dem Weg mehr.
+
+   Wichtig ist die RUECKNAHME. Eine Seite, die nach dem Sprung dauerhaft
+   gefiltert bleibt, ist eine Falle: Man kommt spaeter wieder, sieht
+   drei von zwanzig Aufgaben und haelt das fuer den ganzen Bestand.
+   Deshalb steht immer eine Zeile da, die sagt, was gerade gezeigt wird
+   -- mit einem Weg zurueck zu allem.
+   =================================================================== */
+(() => {
+  'use strict';
+
+  const ZEIGEN = new URLSearchParams(location.search).get('zeigen') || '';
+
+  /** Was steht in der Adresse? Leerer Text, wenn nichts. */
+  window.zielSchluessel = () => ZEIGEN;
+
+  /** Hervorheben und hinspringen.
+   *  elemente:  was gemeint war (Feld, darf leer sein)
+   *  text:      was gerade gezeigt wird, in Worten
+   *  aufraeumen: optional -- wird gerufen, wenn "alles zeigen" geklickt wird */
+  window.zielMarkieren = function (elemente, text, aufraeumen) {
+    const liste = [...(elemente || [])].filter(Boolean);
+
+    /* Die Zeile kommt IMMER, auch wenn nichts gefunden wurde. Ein
+       stiller Sprung ins Leere laesst einen glauben, man sei falsch
+       abgebogen -- dabei ist die Sache schlicht erledigt. */
+    const leiste = document.createElement('div');
+    leiste.className = 'ziel-leiste';
+    leiste.setAttribute('role', 'status');
+
+    const marke = document.createElement('span');
+    marke.className = 'ziel-leiste__marke';
+    marke.textContent = liste.length ? String(liste.length) : '0';
+    leiste.append(marke);
+
+    const satz = document.createElement('span');
+    satz.className = 'ziel-leiste__text';
+    satz.textContent = liste.length
+      ? text
+      : text + ' – hier ist gerade nichts davon da.';
+    leiste.append(satz);
+
+    const weg = document.createElement('button');
+    weg.type = 'button';
+    weg.className = 'ziel-leiste__weg';
+    weg.textContent = 'Alles zeigen';
+    weg.addEventListener('click', () => {
+      for (const e of liste) e.removeAttribute('data-treffer');
+      leiste.remove();
+      /* Die Adresse mitaufraeumen: Sonst zeigt ein Neuladen wieder den
+         Ausschnitt, und man wundert sich, warum die Haelfte fehlt. */
+      const u = new URL(location.href);
+      u.searchParams.delete('zeigen');
+      history.replaceState(null, '', u);
+      aufraeumen?.();
+    });
+    leiste.append(weg);
+
+    const inhalt = document.querySelector('main.inhalt') || document.body;
+    const nach = inhalt.querySelector('.kopf-zeile');
+    if (nach && nach.nextSibling) inhalt.insertBefore(leiste, nach.nextSibling);
+    else inhalt.prepend(leiste);
+
+    for (const e of liste) e.dataset.treffer = 'ja';
+
+    /* Erst im naechsten Bild springen: Die Elemente sind gerade eben
+       entstanden, ihre Position steht noch nicht fest. */
+    if (liste.length) {
+      requestAnimationFrame(() => {
+        const ruhig = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+        liste[0].scrollIntoView({
+          block: 'center', behavior: ruhig ? 'auto' : 'smooth',
+        });
+      });
+    }
+    return liste.length;
+  };
+})();

workspace/assets/js/report.js

@@ -50,8 +50,31 @@
     return t;
   }
 
-  function kachel(zahl, name, { trendEl = null, warn = false } = {}) {
-    const k = el('div', 'kachel');
+  /* BEWUSST OHNE die Creator-Auswahl im Verweis. Der erste Entwurf hängte
+     ?creator=<nr> an -- das sah hilfreich aus und wäre eine Lüge gewesen:
+     Keine der Zielseiten liest diesen Wert. Aufgabenbrett, Dateien und
+     Bereiche zeigen immer alles, was die angemeldete Person sehen darf.
+     Ein Parameter, der nichts bewirkt, wird beim nächsten Mal für
+     lebenden Code gehalten und mitgepflegt.
+
+     Wenn diese Seiten einmal nach Creator filtern können, gehört er
+     wieder dazu -- dann aber zusammen mit der Stelle, die ihn ausliest. */
+
+  /* Eine Kennzahl. `ziel` macht daraus einen Weg zu genau der Stelle,
+     an der die gezaehlten Dinge stehen (Wunsch 01.09.2026: "wenn man
+     auf die Kisten drueckt, sofort zu diesem Punkt weitergeschickt
+     werden").
+
+     Eine Zahl ohne Weg dahin ist eine Behauptung: Man kann sie nur
+     glauben oder von Hand nachsuchen. */
+  function kachel(zahl, name, { trendEl = null, warn = false, ziel = null } = {}) {
+    const k = el(ziel ? 'a' : 'div', 'kachel' + (ziel ? ' kachel--weg' : ''));
+    if (ziel) {
+      k.href = ziel;
+      /* Der ganze Satz fuer Vorleseprogramme -- "3" allein sagt nichts,
+         und ein Verweis ohne erkennbares Ziel ist fuer sie wertlos. */
+      k.setAttribute('aria-label', `${name}: ${zahl} – ansehen`);
+    }
     if (warn) k.dataset.warn = 'ja';
     const wert = el('div', 'kachel__wert');
     wert.append(el('span', 'kachel__zahl', String(zahl)));
@@ -60,6 +83,23 @@
     return k;
   }
 
+  /* Wohin fuehrt ein Betreuungsbereich? Drei liegen auf bereich.html,
+     Content hat eine eigene Seite. Die Zuordnung steht EINMAL hier --
+     zweimal abgeschrieben waere sie beim naechsten neuen Bereich an
+     einer der beiden Stellen vergessen. */
+  const BEREICH_ZIEL = {
+    live: 'bereich.html?b=live',
+    community: 'bereich.html?b=community',
+    technik: 'bereich.html?b=technik',
+    schutz: 'bereich.html?b=schutz',
+    content: 'content.html',
+  };
+  const bereichZiel = (b, zeigen) => {
+    const z = BEREICH_ZIEL[b];
+    if (!z) return null;
+    return zeigen ? z + (z.includes('?') ? '&' : '?') + 'zeigen=' + zeigen : z;
+  };
+
   function block(titel, frage, inhalt) {
     const b = el('section', 'block');
     b.append(el('h2', 'block__titel', titel));
@@ -83,20 +123,41 @@
     /* Was wurde erledigt? */
     const k1 = el('div', 'kacheln');
     k1.append(kachel(d.aufgaben.erledigt, 'Aufgaben erledigt',
-      { trendEl: trend(d.aufgaben.erledigt, d.aufgaben.erledigt_davor) }));
+      { trendEl: trend(d.aufgaben.erledigt, d.aufgaben.erledigt_davor),
+        ziel: 'aufgaben.html?zeigen=erledigt' }));
+    /* "neu angelegt" fuehrt auf das Brett OHNE Ausschnitt: Der Bericht
+       zaehlt hier einen Zeitraum, das Brett kennt keinen. Ein Sprung auf
+       "zeigen=angelegt" wuerde etwas hervorheben, das nicht dieselbe
+       Menge ist -- und eine Hervorhebung, die nicht stimmt, ist
+       schlimmer als keine. */
     k1.append(kachel(d.aufgaben.angelegt, 'neu angelegt',
-      { trendEl: trend(d.aufgaben.angelegt, d.aufgaben.angelegt_davor) }));
-    k1.append(kachel(d.termine.gewesen, 'Termine gewesen'));
-    k1.append(kachel(d.dateien.freigegeben, 'Dateien freigegeben'));
+      { trendEl: trend(d.aufgaben.angelegt, d.aufgaben.angelegt_davor),
+        ziel: 'aufgaben.html' }));
+    k1.append(kachel(d.termine.gewesen, 'Termine gewesen',
+      { ziel: 'kalender.html?zeigen=vergangen' }));
+    k1.append(kachel(d.dateien.freigegeben, 'Dateien freigegeben',
+      { ziel: 'dateien.html?zeigen=frei' }));
     ziel.append(block('Was wurde erledigt?', null, k1));
 
     /* Was blockiert? */
     const k2 = el('div', 'kacheln');
-    k2.append(kachel(d.aufgaben.offen, 'Aufgaben offen'));
-    k2.append(kachel(d.aufgaben.ueberfaellig, 'überfällig', { warn: d.aufgaben.ueberfaellig > 0 }));
+    k2.append(kachel(d.aufgaben.offen, 'Aufgaben offen',
+      { ziel: 'aufgaben.html?zeigen=offen' }));
+    k2.append(kachel(d.aufgaben.ueberfaellig, 'überfällig',
+      { warn: d.aufgaben.ueberfaellig > 0, ziel: 'aufgaben.html?zeigen=ueberfaellig' }));
     const dringend = Object.values(d.bereiche).reduce((s, b) => s + b.dringend, 0);
-    k2.append(kachel(dringend, 'dringende Punkte', { warn: dringend > 0 }));
-    k2.append(kachel(d.dateien.offen_review, 'Dateien im Review'));
+    /* Diese Zahl ist eine SUMME ueber alle Bereiche -- es gibt keine
+       einzelne Seite, auf der genau sie steht. Sie fuehrt deshalb in den
+       Bereich, in dem die meisten davon liegen, statt blind in die
+       LIVE-Analyse. Liegt nichts an, fuehrt sie nirgendwohin: ein Weg zu
+       null Dingen ist eine Enttaeuschung, kein Angebot. */
+    const meiste = Object.entries(d.bereiche)
+      .filter(([, w]) => w.dringend > 0)
+      .sort((a, b) => b[1].dringend - a[1].dringend)[0];
+    k2.append(kachel(dringend, 'dringende Punkte',
+      { warn: dringend > 0, ziel: meiste ? bereichZiel(meiste[0], 'dringend') : null }));
+    k2.append(kachel(d.dateien.offen_review, 'Dateien im Review',
+      { ziel: 'dateien.html?zeigen=review' }));
     const b2 = block('Was blockiert?', 'Die drei Aufgaben, die am längsten offen liegen:', k2);
     if (d.aufgaben.aeltester.length) {
       const liste = el('ul', 'liste-klein');
@@ -118,7 +179,8 @@
     const jetztS = d.live.jetzt.schnitt;
     const davorS = d.live.davor.schnitt;
     const kLive = kachel(jetztS === null ? '–' : String(jetztS).replace('.', ','),
-      `LIVE-Schnitt aus ${d.live.jetzt.anzahl} Bewertung(en)`);
+      `LIVE-Schnitt aus ${d.live.jetzt.anzahl} Bewertung(en)`,
+      { ziel: d.live.jetzt.anzahl > 0 ? bereichZiel('live') : null });
     if (jetztS !== null && davorS !== null) {
       kLive.querySelector('.kachel__wert').append(
         trend(Math.round(jetztS * 10), Math.round(davorS * 10)));
@@ -126,17 +188,18 @@
     k3.append(kLive);
     for (const [b, w] of Object.entries(d.bereiche)) {
       k3.append(kachel(w.neu, BEREICHSNAME[b] + ': neue Einträge',
-        { trendEl: trend(w.neu, w.neu_davor) }));
+        { trendEl: trend(w.neu, w.neu_davor), ziel: bereichZiel(b) }));
     }
     ziel.append(block('Was hat funktioniert?',
       'Bewegung in den Betreuungsbereichen im Vergleich zum Zeitraum davor:', k3));
 
     /* Was kommt als Nächstes? */
     const k4 = el('div', 'kacheln');
-    k4.append(kachel(d.termine.kommend, 'Termine stehen an'));
+    k4.append(kachel(d.termine.kommend, 'Termine stehen an',
+      { ziel: 'kalender.html?zeigen=kommend' }));
     for (const [b, w] of Object.entries(d.bereiche)) {
       if (w.offen) k4.append(kachel(w.offen, BEREICHSNAME[b] + ': offen',
-        { warn: w.dringend > 0 }));
+        { warn: w.dringend > 0, ziel: bereichZiel(b, 'offen') }));
     }
     const b4 = block('Was kommt als Nächstes?', null, k4);
     if (d.profil && (d.profil.plan_prio1 || d.profil.plan_prio2 || d.profil.plan_prio3)) {

workspace/assets/js/start.js

@@ -290,11 +290,38 @@
     g.append(el('span', 'gruss__wort', tageszeit + ', '));
     g.append(el('span', 'gruss__name', ich.name));
 
-    /* Die Plakette: der erste Buchstabe in der Farbe der Rolle. Dieselbe
-       Zuordnung wie im Kopf der Seite, damit nichts auseinanderläuft. */
+    /* Die Plakette: das eigene Bild, sonst der erste Buchstabe in der
+       Farbe der Rolle. Dieselbe Zuordnung wie im Kopf der Seite, damit
+       nichts auseinanderläuft.
+
+       DAS BILD FEHLTE HIER BIS ZUM 01.09.2026 -- und das ist ein
+       lehrreicher Fehler: Der Server liefert es längst mit, und im
+       Quelltext dort steht sogar ausdrücklich "es steht in der
+       Kopfleiste JEDER Seite UND IN DER BEGRÜSSUNG". Die Absicht war
+       aufgeschrieben, die Hälfte davon nie gebaut. Aufgefallen ist es
+       nicht, weil ein Buchstabe in einem Kreis nicht falsch aussieht --
+       nur eben nicht wie man selbst.
+
+       Ein Kommentar ist kein Beweis. Deshalb prüft pruef-start-ansicht
+       das jetzt mit einem echten Bild nach. */
     const p = $('plakette');
-    p.textContent = (ich.name || '?').trim().charAt(0).toUpperCase();
+    p.textContent = '';
     p.dataset.rolle = ich.rolle;
+    if (ich.bild) {
+      const b = el('img', 'willkommen__foto');
+      b.src = ich.bild;
+      b.alt = '';
+      /* Geht das Bild verloren (gelöschte Datei, kein Netz), erscheint
+         sonst ein kaputtes Bildsymbol. Dann lieber zurück zum
+         Buchstaben -- der ist immer richtig. */
+      b.addEventListener('error', () => {
+        b.remove();
+        p.textContent = (ich.name || '?').trim().charAt(0).toUpperCase();
+      });
+      p.append(b);
+    } else {
+      p.textContent = (ich.name || '?').trim().charAt(0).toUpperCase();
+    }
 
     $('rollentext').textContent = ROLLENTEXT[ich.rolle] || ich.rolle;
   }

workspace/assets/js/steckbrief.js

@@ -197,6 +197,155 @@
 
   let KANAELE = [];
 
+  /* ---------- Das Team ------------------------------------------------------
+
+     Wunsch vom 01.09.2026: "ich will, dass wir Manager, Scouts,
+     DogFather auch die Fotos, Namen und so alles sehen, alles was die in
+     ihrem Profil eintragen."
+
+     Der Steckbrief war bis dahin eine Einbahnstraße: Jeder pflegte
+     seinen, und niemand bekam ihn je zu sehen. Die Schnittstelle dafür
+     lag fertig da und wurde von keiner Seite aufgerufen -- gebaut,
+     dokumentiert, nie angeschlossen.
+
+     NACH ROLLEN GRUPPIERT und nicht als eine lange Liste: "Wer kann mir
+     helfen?" ist eine andere Frage als "wer ist alles da?", und die
+     Antwort steht in der Rolle. DogFather und die Manager stehen dabei
+     in DERSELBEN Gruppe -- er ist gleichwertiges Teammitglied und wird
+     hier nicht als Kopf über die anderen gestellt.
+
+     Wer wen sehen darf, entscheidet weiterhin der Server. Diese Seite
+     zeigt nur, was sie bekommt. */
+
+  const ROLLEN_GRUPPEN = [
+    { name: 'Management', rollen: ['admin', 'manager'],
+      text: 'Ansprechpartner für alles, was Freigaben oder Entscheidungen braucht.' },
+    { name: 'Scouting', rollen: ['scout'],
+      text: 'Sie finden neue Creator und begleiten den Anfang.' },
+    { name: 'Creator', rollen: ['creator'],
+      text: 'Die Leute, um die es geht.' },
+  ];
+
+  async function teamBauen(ich) {
+    const block = document.getElementById('team-block');
+    if (!block) return;
+    let liste;
+    try {
+      const a = await hole('/workspace/api/steckbrief');
+      if (!a.ok) return;
+      liste = (await a.json()).steckbriefe || [];
+    } catch { return; }
+    if (!liste.length) return;
+
+    const ziel = document.getElementById('team');
+    ziel.textContent = '';
+    document.getElementById('team-zahl').textContent = String(liste.length);
+    document.getElementById('team-text').textContent =
+      'Bild, Name und was jeder über sich geschrieben hat. Jeder pflegt seinen '
+      + 'eigenen Eintrag – schreiben kann hier niemand für einen anderen.';
+
+    for (const gruppe of ROLLEN_GRUPPEN) {
+      const drin = liste.filter((p) => gruppe.rollen.includes(p.rolle));
+      if (!drin.length) continue;
+
+      const kopf = document.createElement('div');
+      kopf.className = 'team-gruppe';
+      const h = document.createElement('h3');
+      h.className = 'team-gruppe__name';
+      h.textContent = gruppe.name;
+      kopf.append(h);
+      const t = document.createElement('p');
+      t.className = 'team-gruppe__text';
+      t.textContent = gruppe.text;
+      kopf.append(t);
+      ziel.append(kopf);
+
+      const reihe = document.createElement('div');
+      reihe.className = 'team-reihe';
+      for (const p of drin) reihe.append(karteBauen(p, ich));
+      ziel.append(reihe);
+    }
+    block.hidden = false;
+  }
+
+  function karteBauen(p, ich) {
+    const k = document.createElement('article');
+    k.className = 'team-karte';
+    k.dataset.rolle = p.rolle;
+    /* Die eigene Karte wird gekennzeichnet. Ohne das sucht man sich in
+       einer Liste von zwanzig Gesichtern selbst. */
+    if (ich && p.id === ich.id) k.dataset.ich = 'ja';
+
+    const bild = document.createElement('span');
+    bild.className = 'team-karte__bild';
+    bild.setAttribute('aria-hidden', 'true');
+    if (p.bild) {
+      const b = document.createElement('img');
+      b.src = p.bild;
+      b.alt = '';
+      b.loading = 'lazy';
+      b.addEventListener('error', () => { b.remove(); bild.textContent = anfang(p.name); });
+      bild.append(b);
+    } else {
+      bild.textContent = anfang(p.name);
+    }
+    k.append(bild);
+
+    const text = document.createElement('div');
+    text.className = 'team-karte__text';
+
+    const zeile = document.createElement('div');
+    zeile.className = 'team-karte__zeile';
+    const name = document.createElement('h4');
+    name.className = 'team-karte__name';
+    name.textContent = p.name;
+    zeile.append(name);
+    if (ich && p.id === ich.id) {
+      const marke = document.createElement('span');
+      marke.className = 'team-karte__ich';
+      marke.textContent = 'du';
+      zeile.append(marke);
+    }
+    text.append(zeile);
+
+    const rolle = document.createElement('p');
+    rolle.className = 'team-karte__rolle';
+    rolle.textContent = p.rolle_name || p.rolle;
+    text.append(rolle);
+
+    /* Steht nichts da, steht auch nichts da -- kein Platzhaltersatz.
+       "Noch nichts eingetragen" auf zwanzig Karten liest niemand, und es
+       macht die Karten künstlich gleich hoch. */
+    if (p.ueber_mich) {
+      const u = document.createElement('p');
+      u.className = 'team-karte__ueber';
+      u.textContent = p.ueber_mich;
+      text.append(u);
+    }
+
+    if (p.kanaele?.length) {
+      const kan = document.createElement('div');
+      kan.className = 'team-karte__kanaele';
+      for (const c of p.kanaele) {
+        const a = document.createElement('a');
+        a.className = 'team-kanal';
+        a.dataset.art = c.art;
+        a.href = c.adresse;
+        a.target = '_blank';
+        /* noopener: Ohne das könnte die geöffnete fremde Seite auf das
+           Fenster hier zugreifen. */
+        a.rel = 'noopener noreferrer';
+        a.textContent = c.name;
+        a.title = `${c.name}: ${c.handle}`;
+        kan.append(a);
+      }
+      text.append(kan);
+    }
+
+    k.append(text);
+    return k;
+  }
+
   (async () => {
     try {
       const ich = await (await hole('/workspace/api/ich')).json().catch(() => null);
@@ -207,6 +356,11 @@
       const { steckbrief, kanaele } = await a.json();
       KANAELE = kanaele;
       zeichne(steckbrief, kanaele);
+
+      /* Erst NACH dem eigenen Steckbrief -- und in einem eigenen
+         try/catch weiter innen, damit ein Ausfall des Teams nicht das
+         eigene Profil mitnimmt. */
+      await teamBauen(ich);
     } catch { /* umgeleitet oder nicht verfügbar -- die Seite bleibt nutzbar */ }
   })();
 })();

workspace/aufgaben.html

@@ -7,9 +7,9 @@
 <meta name="robots" content="noindex, nofollow" />
 <meta name="theme-color" content="#05070d" />
 <link rel="icon" href="assets/img/favicon.png" />
-<link rel="stylesheet" href="assets/css/gate.css?v=202609011938" />
-<link rel="stylesheet" href="assets/css/start.css?v=202609011938" />
-<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609011938" />
+<link rel="stylesheet" href="assets/css/gate.css?v=202609012007" />
+<link rel="stylesheet" href="assets/css/start.css?v=202609012007" />
+<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609012007" />
 </head>
 
 <body class="start">
@@ -139,9 +139,9 @@
   </form>
 </dialog>
 
-<script src="assets/js/wahl.js?v=202609011938" defer></script>
-<script src="assets/js/bereiche.js?v=202609011938" defer></script>
-<script src="assets/js/kopf.js?v=202609011938" defer></script>
-<script src="assets/js/aufgaben.js?v=202609011938" defer></script>
+<script src="assets/js/wahl.js?v=202609012007" defer></script>
+<script src="assets/js/bereiche.js?v=202609012007" defer></script>
+<script src="assets/js/kopf.js?v=202609012007" defer></script>
+<script src="assets/js/aufgaben.js?v=202609012007" defer></script>
 </body>
 </html>

workspace/automation.html

@@ -7,10 +7,10 @@
 <meta name="robots" content="noindex, nofollow" />
 <meta name="theme-color" content="#05070d" />
 <link rel="icon" href="assets/img/favicon.png" />
-<link rel="stylesheet" href="assets/css/gate.css?v=202609011938" />
-<link rel="stylesheet" href="assets/css/start.css?v=202609011938" />
-<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609011938" />
-<link rel="stylesheet" href="assets/css/automation.css?v=202609011938" />
+<link rel="stylesheet" href="assets/css/gate.css?v=202609012007" />
+<link rel="stylesheet" href="assets/css/start.css?v=202609012007" />
+<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609012007" />
+<link rel="stylesheet" href="assets/css/automation.css?v=202609012007" />
 </head>
 
 <body class="start">
@@ -132,9 +132,9 @@
 
 </main>
 
-<script src="assets/js/wahl.js?v=202609011938" defer></script>
-<script src="assets/js/bereiche.js?v=202609011938" defer></script>
-<script src="assets/js/kopf.js?v=202609011938" defer></script>
-<script src="assets/js/automation.js?v=202609011938" defer></script>
+<script src="assets/js/wahl.js?v=202609012007" defer></script>
+<script src="assets/js/bereiche.js?v=202609012007" defer></script>
+<script src="assets/js/kopf.js?v=202609012007" defer></script>
+<script src="assets/js/automation.js?v=202609012007" defer></script>
 </body>
 </html>

workspace/bereich.html

@@ -7,10 +7,10 @@
 <meta name="robots" content="noindex, nofollow" />
 <meta name="theme-color" content="#05070d" />
 <link rel="icon" href="assets/img/favicon.png" />
-<link rel="stylesheet" href="assets/css/gate.css?v=202609011938" />
-<link rel="stylesheet" href="assets/css/start.css?v=202609011938" />
-<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609011938" />
-<link rel="stylesheet" href="assets/css/bereich.css?v=202609011938" />
+<link rel="stylesheet" href="assets/css/gate.css?v=202609012007" />
+<link rel="stylesheet" href="assets/css/start.css?v=202609012007" />
+<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609012007" />
+<link rel="stylesheet" href="assets/css/bereich.css?v=202609012007" />
 </head>
 
 <body class="start">
@@ -115,13 +115,13 @@
 
 </main>
 
-<script src="assets/js/wahl.js?v=202609011938" defer></script>
-<script src="assets/js/bereiche.js?v=202609011938" defer></script>
-<script src="assets/js/kopf.js?v=202609011938" defer></script>
-<script src="assets/js/checkliste.js?v=202609011938" defer></script>
-<script src="assets/js/ampel.js?v=202609011938" defer></script>
-<script src="assets/js/schulung.js?v=202609011938" defer></script>
-<script src="assets/js/vorlagen.js?v=202609011938" defer></script>
-<script src="assets/js/bereich.js?v=202609011938" defer></script>
+<script src="assets/js/wahl.js?v=202609012007" defer></script>
+<script src="assets/js/bereiche.js?v=202609012007" defer></script>
+<script src="assets/js/kopf.js?v=202609012007" defer></script>
+<script src="assets/js/checkliste.js?v=202609012007" defer></script>
+<script src="assets/js/ampel.js?v=202609012007" defer></script>
+<script src="assets/js/schulung.js?v=202609012007" defer></script>
+<script src="assets/js/vorlagen.js?v=202609012007" defer></script>
+<script src="assets/js/bereich.js?v=202609012007" defer></script>
 </body>
 </html>

workspace/calls.html

@@ -7,10 +7,10 @@
 <meta name="robots" content="noindex, nofollow" />
 <meta name="theme-color" content="#05070d" />
 <link rel="icon" href="assets/img/favicon.png" />
-<link rel="stylesheet" href="assets/css/gate.css?v=202609011938" />
-<link rel="stylesheet" href="assets/css/start.css?v=202609011938" />
-<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609011938" />
-<link rel="stylesheet" href="assets/css/calls.css?v=202609011938" />
+<link rel="stylesheet" href="assets/css/gate.css?v=202609012007" />
+<link rel="stylesheet" href="assets/css/start.css?v=202609012007" />
+<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609012007" />
+<link rel="stylesheet" href="assets/css/calls.css?v=202609012007" />
 </head>
 
 <body class="start">
@@ -54,10 +54,10 @@
 
 </main>
 
-<script src="assets/js/ki.js?v=202609011938" defer></script>
-<script src="assets/js/wahl.js?v=202609011938" defer></script>
-<script src="assets/js/bereiche.js?v=202609011938" defer></script>
-<script src="assets/js/kopf.js?v=202609011938" defer></script>
-<script src="assets/js/calls.js?v=202609011938" defer></script>
+<script src="assets/js/ki.js?v=202609012007" defer></script>
+<script src="assets/js/wahl.js?v=202609012007" defer></script>
+<script src="assets/js/bereiche.js?v=202609012007" defer></script>
+<script src="assets/js/kopf.js?v=202609012007" defer></script>
+<script src="assets/js/calls.js?v=202609012007" defer></script>
 </body>
 </html>

workspace/content.html

@@ -7,10 +7,10 @@
 <meta name="robots" content="noindex, nofollow" />
 <meta name="theme-color" content="#05070d" />
 <link rel="icon" href="assets/img/favicon.png" />
-<link rel="stylesheet" href="assets/css/gate.css?v=202609011938" />
-<link rel="stylesheet" href="assets/css/start.css?v=202609011938" />
-<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609011938" />
-<link rel="stylesheet" href="assets/css/content.css?v=202609011938" />
+<link rel="stylesheet" href="assets/css/gate.css?v=202609012007" />
+<link rel="stylesheet" href="assets/css/start.css?v=202609012007" />
+<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609012007" />
+<link rel="stylesheet" href="assets/css/content.css?v=202609012007" />
 </head>
 
 <body class="start">
@@ -162,11 +162,11 @@
 
 </main>
 
-<script src="assets/js/wahl.js?v=202609011938" defer></script>
-<script src="assets/js/bereiche.js?v=202609011938" defer></script>
-<script src="assets/js/kopf.js?v=202609011938" defer></script>
-<script src="assets/js/checkliste.js?v=202609011938" defer></script>
-<script src="assets/js/vorlagen.js?v=202609011938" defer></script>
-<script src="assets/js/content.js?v=202609011938" defer></script>
+<script src="assets/js/wahl.js?v=202609012007" defer></script>
+<script src="assets/js/bereiche.js?v=202609012007" defer></script>
+<script src="assets/js/kopf.js?v=202609012007" defer></script>
+<script src="assets/js/checkliste.js?v=202609012007" defer></script>
+<script src="assets/js/vorlagen.js?v=202609012007" defer></script>
+<script src="assets/js/content.js?v=202609012007" defer></script>
 </body>
 </html>

workspace/dateien.html

@@ -7,10 +7,10 @@
 <meta name="robots" content="noindex, nofollow" />
 <meta name="theme-color" content="#05070d" />
 <link rel="icon" href="assets/img/favicon.png" />
-<link rel="stylesheet" href="assets/css/gate.css?v=202609011938" />
-<link rel="stylesheet" href="assets/css/start.css?v=202609011938" />
-<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609011938" />
-<link rel="stylesheet" href="assets/css/dateien.css?v=202609011938" />
+<link rel="stylesheet" href="assets/css/gate.css?v=202609012007" />
+<link rel="stylesheet" href="assets/css/start.css?v=202609012007" />
+<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609012007" />
+<link rel="stylesheet" href="assets/css/dateien.css?v=202609012007" />
 </head>
 
 <body class="start">
@@ -93,9 +93,9 @@
 
 </main>
 
-<script src="assets/js/wahl.js?v=202609011938" defer></script>
-<script src="assets/js/bereiche.js?v=202609011938" defer></script>
-<script src="assets/js/kopf.js?v=202609011938" defer></script>
-<script src="assets/js/dateien.js?v=202609011938" defer></script>
+<script src="assets/js/wahl.js?v=202609012007" defer></script>
+<script src="assets/js/bereiche.js?v=202609012007" defer></script>
+<script src="assets/js/kopf.js?v=202609012007" defer></script>
+<script src="assets/js/dateien.js?v=202609012007" defer></script>
 </body>
 </html>

workspace/index.html

@@ -25,7 +25,7 @@
       type="image/webp" media="(max-width: 899px)" />
 
 <link rel="icon" href="assets/img/favicon.png" />
-<link rel="stylesheet" href="assets/css/gate.css?v=202609011938" />
+<link rel="stylesheet" href="assets/css/gate.css?v=202609012007" />
 </head>
 
 <body class="gate">
@@ -143,6 +143,6 @@
   </p>
 </main>
 
-<script src="assets/js/gate.js?v=202609011938" defer></script>
+<script src="assets/js/gate.js?v=202609012007" defer></script>
 </body>
 </html>

workspace/kalender.html

@@ -7,10 +7,10 @@
 <meta name="robots" content="noindex, nofollow" />
 <meta name="theme-color" content="#05070d" />
 <link rel="icon" href="assets/img/favicon.png" />
-<link rel="stylesheet" href="assets/css/gate.css?v=202609011938" />
-<link rel="stylesheet" href="assets/css/start.css?v=202609011938" />
-<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609011938" />
-<link rel="stylesheet" href="assets/css/kalender.css?v=202609011938" />
+<link rel="stylesheet" href="assets/css/gate.css?v=202609012007" />
+<link rel="stylesheet" href="assets/css/start.css?v=202609012007" />
+<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609012007" />
+<link rel="stylesheet" href="assets/css/kalender.css?v=202609012007" />
 </head>
 
 <body class="start">
@@ -147,9 +147,9 @@
 
 </main>
 
-<script src="assets/js/wahl.js?v=202609011938" defer></script>
-<script src="assets/js/bereiche.js?v=202609011938" defer></script>
-<script src="assets/js/kopf.js?v=202609011938" defer></script>
-<script src="assets/js/kalender.js?v=202609011938" defer></script>
+<script src="assets/js/wahl.js?v=202609012007" defer></script>
+<script src="assets/js/bereiche.js?v=202609012007" defer></script>
+<script src="assets/js/kopf.js?v=202609012007" defer></script>
+<script src="assets/js/kalender.js?v=202609012007" defer></script>
 </body>
 </html>

workspace/personen.html

@@ -7,10 +7,10 @@
 <meta name="robots" content="noindex, nofollow" />
 <meta name="theme-color" content="#05070d" />
 <link rel="icon" href="assets/img/favicon.png" />
-<link rel="stylesheet" href="assets/css/gate.css?v=202609011938" />
-<link rel="stylesheet" href="assets/css/start.css?v=202609011938" />
-<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609011938" />
-<link rel="stylesheet" href="assets/css/personen.css?v=202609011938" />
+<link rel="stylesheet" href="assets/css/gate.css?v=202609012007" />
+<link rel="stylesheet" href="assets/css/start.css?v=202609012007" />
+<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609012007" />
+<link rel="stylesheet" href="assets/css/personen.css?v=202609012007" />
 </head>
 
 <body class="start">
@@ -121,9 +121,9 @@
 
 </main>
 
-<script src="assets/js/wahl.js?v=202609011938" defer></script>
-<script src="assets/js/bereiche.js?v=202609011938" defer></script>
-<script src="assets/js/kopf.js?v=202609011938" defer></script>
-<script src="assets/js/personen.js?v=202609011938" defer></script>
+<script src="assets/js/wahl.js?v=202609012007" defer></script>
+<script src="assets/js/bereiche.js?v=202609012007" defer></script>
+<script src="assets/js/kopf.js?v=202609012007" defer></script>
+<script src="assets/js/personen.js?v=202609012007" defer></script>
 </body>
 </html>

workspace/profil.html

@@ -7,10 +7,10 @@
 <meta name="robots" content="noindex, nofollow" />
 <meta name="theme-color" content="#05070d" />
 <link rel="icon" href="assets/img/favicon.png" />
-<link rel="stylesheet" href="assets/css/gate.css?v=202609011938" />
-<link rel="stylesheet" href="assets/css/start.css?v=202609011938" />
-<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609011938" />
-<link rel="stylesheet" href="assets/css/profil.css?v=202609011938" />
+<link rel="stylesheet" href="assets/css/gate.css?v=202609012007" />
+<link rel="stylesheet" href="assets/css/start.css?v=202609012007" />
+<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609012007" />
+<link rel="stylesheet" href="assets/css/profil.css?v=202609012007" />
 </head>
 
 <body class="start">
@@ -173,12 +173,30 @@
     </div>
   </form>
 
+  <!-- DAS TEAM (01.09.2026). Steht auch hier, weil ein Creator nur diese
+       eine Seite hat: Er soll sehen, wer ihn betreut -- mit Gesicht, nicht
+       nur mit Namen. Wen er sehen darf, entscheidet der Server; für ihn
+       sind das seine Betreuer und das Management, nicht die anderen
+       Creator. Für alle übrigen Rollen wird der Block hier gar nicht erst
+       aufgebaut, sie haben ihn auf steckbrief.html. -->
+  <section class="team-block" id="team-block" hidden>
+    <div class="team-block__kopf">
+      <div>
+        <p class="feldschild">Das Team</p>
+        <h2 class="team-block__titel">Wer hier mitarbeitet</h2>
+      </div>
+      <span class="team-block__zahl" id="team-zahl"></span>
+    </div>
+    <p class="team-block__text" id="team-text"></p>
+    <div class="team-gitter" id="team"></div>
+  </section>
+
 </main>
 
-<script src="assets/js/wahl.js?v=202609011938" defer></script>
-<script src="assets/js/bereiche.js?v=202609011938" defer></script>
-<script src="assets/js/kopf.js?v=202609011938" defer></script>
-<script src="assets/js/steckbrief.js?v=202609011938" defer></script>
-<script src="assets/js/profil.js?v=202609011938" defer></script>
+<script src="assets/js/wahl.js?v=202609012007" defer></script>
+<script src="assets/js/bereiche.js?v=202609012007" defer></script>
+<script src="assets/js/kopf.js?v=202609012007" defer></script>
+<script src="assets/js/steckbrief.js?v=202609012007" defer></script>
+<script src="assets/js/profil.js?v=202609012007" defer></script>
 </body>
 </html>

workspace/report.html

@@ -7,10 +7,10 @@
 <meta name="robots" content="noindex, nofollow" />
 <meta name="theme-color" content="#05070d" />
 <link rel="icon" href="assets/img/favicon.png" />
-<link rel="stylesheet" href="assets/css/gate.css?v=202609011938" />
-<link rel="stylesheet" href="assets/css/start.css?v=202609011938" />
-<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609011938" />
-<link rel="stylesheet" href="assets/css/report.css?v=202609011938" />
+<link rel="stylesheet" href="assets/css/gate.css?v=202609012007" />
+<link rel="stylesheet" href="assets/css/start.css?v=202609012007" />
+<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609012007" />
+<link rel="stylesheet" href="assets/css/report.css?v=202609012007" />
 </head>
 
 <body class="start">
@@ -91,10 +91,10 @@
 
 </main>
 
-<script src="assets/js/ki.js?v=202609011938" defer></script>
-<script src="assets/js/wahl.js?v=202609011938" defer></script>
-<script src="assets/js/bereiche.js?v=202609011938" defer></script>
-<script src="assets/js/kopf.js?v=202609011938" defer></script>
-<script src="assets/js/report.js?v=202609011938" defer></script>
+<script src="assets/js/ki.js?v=202609012007" defer></script>
+<script src="assets/js/wahl.js?v=202609012007" defer></script>
+<script src="assets/js/bereiche.js?v=202609012007" defer></script>
+<script src="assets/js/kopf.js?v=202609012007" defer></script>
+<script src="assets/js/report.js?v=202609012007" defer></script>
 </body>
 </html>

workspace/scouting.html

@@ -7,10 +7,10 @@
 <meta name="robots" content="noindex, nofollow" />
 <meta name="theme-color" content="#05070d" />
 <link rel="icon" href="assets/img/favicon.png" />
-<link rel="stylesheet" href="assets/css/gate.css?v=202609011938" />
-<link rel="stylesheet" href="assets/css/start.css?v=202609011938" />
-<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609011938" />
-<link rel="stylesheet" href="assets/css/scouting.css?v=202609011938" />
+<link rel="stylesheet" href="assets/css/gate.css?v=202609012007" />
+<link rel="stylesheet" href="assets/css/start.css?v=202609012007" />
+<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609012007" />
+<link rel="stylesheet" href="assets/css/scouting.css?v=202609012007" />
 </head>
 
 <body class="start">
@@ -124,9 +124,9 @@
   </div>
 </div>
 
-<script src="assets/js/wahl.js?v=202609011938" defer></script>
-<script src="assets/js/bereiche.js?v=202609011938" defer></script>
-<script src="assets/js/kopf.js?v=202609011938" defer></script>
-<script src="assets/js/scouting.js?v=202609011938" defer></script>
+<script src="assets/js/wahl.js?v=202609012007" defer></script>
+<script src="assets/js/bereiche.js?v=202609012007" defer></script>
+<script src="assets/js/kopf.js?v=202609012007" defer></script>
+<script src="assets/js/scouting.js?v=202609012007" defer></script>
 </body>
 </html>

workspace/start.html

@@ -7,8 +7,8 @@
 <meta name="robots" content="noindex, nofollow" />
 <meta name="theme-color" content="#05070d" />
 <link rel="icon" href="assets/img/favicon.png" />
-<link rel="stylesheet" href="assets/css/gate.css?v=202609011938" />
-<link rel="stylesheet" href="assets/css/start.css?v=202609011938" />
+<link rel="stylesheet" href="assets/css/gate.css?v=202609012007" />
+<link rel="stylesheet" href="assets/css/start.css?v=202609012007" />
 </head>
 
 <body class="start">
@@ -99,9 +99,9 @@
   </p>
 </main>
 
-<script src="assets/js/wahl.js?v=202609011938" defer></script>
-<script src="assets/js/bereiche.js?v=202609011938" defer></script>
-<script src="assets/js/kopf.js?v=202609011938" defer></script>
-<script src="assets/js/start.js?v=202609011938" defer></script>
+<script src="assets/js/wahl.js?v=202609012007" defer></script>
+<script src="assets/js/bereiche.js?v=202609012007" defer></script>
+<script src="assets/js/kopf.js?v=202609012007" defer></script>
+<script src="assets/js/start.js?v=202609012007" defer></script>
 </body>
 </html>

workspace/startcheck.html

@@ -7,10 +7,10 @@
 <meta name="robots" content="noindex, nofollow" />
 <meta name="theme-color" content="#05070d" />
 <link rel="icon" href="assets/img/favicon.png" />
-<link rel="stylesheet" href="assets/css/gate.css?v=202609011938" />
-<link rel="stylesheet" href="assets/css/start.css?v=202609011938" />
-<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609011938" />
-<link rel="stylesheet" href="assets/css/startcheck.css?v=202609011938" />
+<link rel="stylesheet" href="assets/css/gate.css?v=202609012007" />
+<link rel="stylesheet" href="assets/css/start.css?v=202609012007" />
+<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609012007" />
+<link rel="stylesheet" href="assets/css/startcheck.css?v=202609012007" />
 </head>
 
 <body class="start">
@@ -70,10 +70,10 @@
 
 </main>
 
-<script src="assets/js/ki.js?v=202609011938" defer></script>
-<script src="assets/js/wahl.js?v=202609011938" defer></script>
-<script src="assets/js/bereiche.js?v=202609011938" defer></script>
-<script src="assets/js/kopf.js?v=202609011938" defer></script>
-<script src="assets/js/startcheck.js?v=202609011938" defer></script>
+<script src="assets/js/ki.js?v=202609012007" defer></script>
+<script src="assets/js/wahl.js?v=202609012007" defer></script>
+<script src="assets/js/bereiche.js?v=202609012007" defer></script>
+<script src="assets/js/kopf.js?v=202609012007" defer></script>
+<script src="assets/js/startcheck.js?v=202609012007" defer></script>
 </body>
 </html>

workspace/steckbrief.html

@@ -7,10 +7,10 @@
 <meta name="robots" content="noindex, nofollow" />
 <meta name="theme-color" content="#05070d" />
 <link rel="icon" href="assets/img/favicon.png" />
-<link rel="stylesheet" href="assets/css/gate.css?v=202609011938" />
-<link rel="stylesheet" href="assets/css/start.css?v=202609011938" />
-<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609011938" />
-<link rel="stylesheet" href="assets/css/profil.css?v=202609011938" />
+<link rel="stylesheet" href="assets/css/gate.css?v=202609012007" />
+<link rel="stylesheet" href="assets/css/start.css?v=202609012007" />
+<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609012007" />
+<link rel="stylesheet" href="assets/css/profil.css?v=202609012007" />
 </head>
 
 <body class="start">
@@ -82,12 +82,38 @@
     </div>
   </section>
 
+  <!-- DAS TEAM. Wunsch vom 01.09.2026: "ich will, dass wir Manager,
+       Scouts, DogFather auch die Fotos, Namen und so alles sehen, alles
+       was die in ihrem Profil eintragen."
+
+       Bis dahin war der Steckbrief eine Einbahnstraße: Jeder pflegte
+       seinen, und niemand bekam ihn je zu Gesicht. Die Schnittstelle
+       dafür lag fertig da (GET /workspace/api/steckbrief) und wurde von
+       keiner einzigen Seite aufgerufen.
+
+       Wer wen sieht, entscheidet weiterhin der Server. -->
+  <!-- EIGENE KLASSEN, nicht die vorhandenen .block__* : Die stehen in
+       automation.css und wissen.css, und diese Seite lädt beide nicht.
+       Genau so sind hier schon zweimal Stile ins Leere gelaufen -- der
+       Aufbau sah richtig aus, auf dem Bildschirm stand nacktes HTML.
+       Alles zu .team-* steht in start.css, die jede Seite lädt. -->
+  <section class="team-block" id="team-block" hidden>
+    <div class="team-block__kopf">
+      <div>
+        <p class="feldschild">Das Team</p>
+        <h2 class="team-block__titel">Wer hier mitarbeitet</h2>
+      </div>
+      <span class="team-block__zahl" id="team-zahl"></span>
+    </div>
+    <p class="team-block__text" id="team-text"></p>
+    <div class="team-gitter" id="team"></div>
+  </section>
 
 </main>
 
-<script src="assets/js/wahl.js?v=202609011938" defer></script>
-<script src="assets/js/bereiche.js?v=202609011938" defer></script>
-<script src="assets/js/kopf.js?v=202609011938" defer></script>
-<script src="assets/js/steckbrief.js?v=202609011938" defer></script>
+<script src="assets/js/wahl.js?v=202609012007" defer></script>
+<script src="assets/js/bereiche.js?v=202609012007" defer></script>
+<script src="assets/js/kopf.js?v=202609012007" defer></script>
+<script src="assets/js/steckbrief.js?v=202609012007" defer></script>
 </body>
 </html>

workspace/uebersicht.html

@@ -7,9 +7,9 @@
 <meta name="robots" content="noindex, nofollow" />
 <meta name="theme-color" content="#05070d" />
 <link rel="icon" href="assets/img/favicon.png" />
-<link rel="stylesheet" href="assets/css/gate.css?v=202609011938" />
-<link rel="stylesheet" href="assets/css/start.css?v=202609011938" />
-<link rel="stylesheet" href="assets/css/uebersicht.css?v=202609011938" />
+<link rel="stylesheet" href="assets/css/gate.css?v=202609012007" />
+<link rel="stylesheet" href="assets/css/start.css?v=202609012007" />
+<link rel="stylesheet" href="assets/css/uebersicht.css?v=202609012007" />
 </head>
 
 <body class="start">
@@ -57,9 +57,9 @@
 
 </main>
 
-<script src="assets/js/bereiche.js?v=202609011938" defer></script>
+<script src="assets/js/bereiche.js?v=202609012007" defer></script>
 
-<script src="assets/js/kopf.js?v=202609011938" defer></script>
-<script src="assets/js/uebersicht.js?v=202609011938" defer></script>
+<script src="assets/js/kopf.js?v=202609012007" defer></script>
+<script src="assets/js/uebersicht.js?v=202609012007" defer></script>
 </body>
 </html>

workspace/wissen.html

@@ -7,10 +7,10 @@
 <meta name="robots" content="noindex, nofollow" />
 <meta name="theme-color" content="#05070d" />
 <link rel="icon" href="assets/img/favicon.png" />
-<link rel="stylesheet" href="assets/css/gate.css?v=202609011938" />
-<link rel="stylesheet" href="assets/css/start.css?v=202609011938" />
-<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609011938" />
-<link rel="stylesheet" href="assets/css/wissen.css?v=202609011938" />
+<link rel="stylesheet" href="assets/css/gate.css?v=202609012007" />
+<link rel="stylesheet" href="assets/css/start.css?v=202609012007" />
+<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609012007" />
+<link rel="stylesheet" href="assets/css/wissen.css?v=202609012007" />
 </head>
 
 <body class="start">
@@ -175,9 +175,9 @@
 
 </main>
 
-<script src="assets/js/wahl.js?v=202609011938" defer></script>
-<script src="assets/js/bereiche.js?v=202609011938" defer></script>
-<script src="assets/js/kopf.js?v=202609011938" defer></script>
-<script src="assets/js/wissen.js?v=202609011938" defer></script>
+<script src="assets/js/wahl.js?v=202609012007" defer></script>
+<script src="assets/js/bereiche.js?v=202609012007" defer></script>
+<script src="assets/js/kopf.js?v=202609012007" defer></script>
+<script src="assets/js/wissen.js?v=202609012007" defer></script>
 </body>
 </html>