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]>

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; }
+}