Personenkachel: Rollenfarben, kein Leerband, dunklerer Grund

Filipe, mit Bildschirmfoto: "mach die ganze kachel perfekter
detailliert schoenes. der hintergrund soll auch bissl dunkler sein von
der kachel."

--- 29 PIXEL NICHTS, FUENFMAL UNTEREINANDER ---

Auf dem Bild stand unter jeder zugeklappten Rolle ein leerer Streifen.
Nachgemessen: Abschnitt 74 px, Zeile darin 45 -- 29 px Leerraum.

Sie kamen aus ZWEI Quellen, und nur eine stand in personen.css:
padding-bottom: 14px am Abschnitt, plus margin-bottom: 14px an
.gruppe__kopf aus start.css Zeile 765. Letzteres ist fuer die
freistehenden Abschnitte der STARTSEITE geschrieben, wo unter der
Ueberschrift wirklich gleich Karten kommen. Zugeklappt kommt hier aber
nichts, und dann ist der Abstand Abstand zu nichts.

Beide haengen jetzt am Zustand: offen -> Luft, zu -> keine. Die Kachel
ist damit 383 px hoch statt 293 -- pardon, 293 statt 383.

--- DIE ROLLEN HABEN FARBEN, NUR HIER NICHT ---

Fuenf Zeilen sahen fuenfmal gleich aus. Das Haus fuehrt fuer jede Rolle
eine Farbe (Anmeldeseite, Marken, Bereiche); ausgerechnet in der Liste,
in der es NUR um Rollen geht, hoerten sie auf.

Jeder Abschnitt traegt jetzt `data-rolle`, setzt daraus EIN --r, und
alles Weitere liest davon: der Streifen links, die Anzahl, die
Namenszeichen, der Pfeil, das Licht beim Aufklappen. Und `--ton`, die
Variable, aus der module.css das Kantenlicht jeder Kachel zieht -- die
Personenkarten in einem Manager-Abschnitt sind damit lila statt orange.
Eine Zeile, und der Abschnitt wird ein Stueck.

NEU: WER DRINSTEHT, OHNE AUFZUKLAPPEN. Vier Namenszeichen, ab dem
fuenften "+n". Zugeklappt sagte die Zeile bisher nur, WIE VIELE es
sind; wer wissen wollte, ob Patrick dabei ist, musste aufklappen.

--- DER STREIFEN, DEN getComputedStyle NICHT SIEHT ---

Erster Anlauf: 3 px breit, left: 0, volle Hoehe. Im Bild war nichts.
getComputedStyle meldete trotzdem "3 px, sichtbar, Deckkraft 0,55".

Der Grund steht in module.css: Jede Kachel traegt auf ::before ein
Kantenlicht mit inset: 0 und z-index: 2 -- eine 1,6 px breite Linie
UEBER allen Kindern. Vom Streifen blieben 1,4 px, und die lagen genau
in der Kante. Er sitzt jetzt bei 3 px, gerundet, mit Luft oben und
unten.

Die Pruefung misst ihn deshalb an echten BILDPUNKTEN, und zwar
dieselbe Stelle zweimal: einmal wie sie ist, einmal mit
ausgeschaltetem Streifen. Was sich aendert, IST der Streifen -- und was
sich nicht aendert, ist die Gegenprobe, ohne dass man sie erfinden
muss.

--- UND EINE PRUEFUNG, DIE GRUEN GELOGEN HAT ---

Die Kontrastmessung las die Textfarbe mit
`getComputedStyle(e).color.match(/\d+/g)`. Das geht, solange dort
"rgb(148, 165, 187)" steht. Alle neuen Stellen kommen aus color-mix(),
und Chromium antwortet darauf mit "color(srgb 0.36 0.51 0.42)". Aus
dem Muster fielen "0", "510588", "0" -- die Pruefung meldete
775929299:1 und war gruen.

Die Farbe wird jetzt in ein Canvas GEMALT und als Punkt zurueckgelesen;
das versteht jede Schreibweise, die der Browser versteht. Davor steht
eine Gegenprobe mit zwei bekannten Farben: Stimmt das Messgeraet nicht,
ist alles darunter wertlos. Echte Werte jetzt: 7,95 bis 15,71:1.

--- AM HANDY STAND DER PFEIL IN EINER DRITTEN ZEILE ---

Der Zusatztext bekommt dort eine eigene Rasterzeile -- richtig, er
passt sonst nicht. Der Pfeil bekam dadurch eine dritte und stand mittig
unter dem Text wie ein vergessenes Zeichen: 106 px je Rolle. Er hat
jetzt eine eigene Spalte und ueberspannt beide Zeilen: 75 px, und er
steht da, wo die Hand ihn sucht.

--- Pruefung ---

server/pruef-personen-kachel.mjs, neu, 43 Pruefungen, alle gruen.
Ausserdem gruen: pruef-personen-liste, pruef-css-klassen (die hat die
Namenszeichen bei 10,56 px erwischt, bevor sie jemand lesen musste).
Angesehen bei 1440 px und 390 px, zu und offen.

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

workspace/assets/css/personen.css

@@ -434,29 +434,56 @@ body[data-nur-lesen="ja"] select { display: none; }
    Kalender. Eine Vitrine ist dunkler als das, was darin steht; sonst
    sieht man die Vitrine statt des Inhalts.
    ===================================================================== */
+/* DUNKLER, 09.09.2026. Filipe: "der hintergrund soll auch bissl
+   dunkler sein von der kachel."
+
+   Von rgba(9,13,20,.96) auf rgba(5,8,13,.985). Der Hintergrund schien
+   vorher merklich durch -- bei einem Motiv mit hellen Stellen sass
+   hinter der Liste mal ein dunkler, mal ein heller Fleck, und die
+   Kachel wirkte dadurch fleckig statt ruhig. Die Schrift wird davon
+   nur besser lesbar: Der Grund wird dunkler, die Farben bleiben. */
 .liste-kachel {
   padding: 4px 0 0;
   margin-bottom: 24px;
   background:
     var(--raster),
-    linear-gradient(178deg, rgba(9, 13, 20, .96), rgba(4, 7, 12, .98));
+    linear-gradient(178deg, rgba(5, 8, 13, .985), rgba(2, 4, 8, .995));
 }
 /* Die Abschnitte werden Felder in einem Körper: keine eigenen Ränder,
    keine Luft dazwischen, sondern eine Fuge. */
 .liste-kachel > .gruppe {
   margin: 0;
-  padding: 0 16px 14px;
-  border-bottom: 1px solid #05070c;
-  box-shadow: 0 1px 0 rgba(255, 255, 255, .035);
+  padding: 0 16px;
+  border-bottom: 1px solid #04060a;
+  box-shadow: 0 1px 0 rgba(255, 255, 255, .04);
 }
 .liste-kachel > .gruppe:last-child { border-bottom: 0; box-shadow: none; }
-/* Der Kopf jeder Gruppe füllt die Breite der Kachel -- so ist die
-   ganze Zeile das Ziel, nicht nur der Text. */
+
+/* ---------------------------------------------------------------------
+   DAS LEERE BAND UNTER JEDER ZEILE (gemessen, 09.09.2026)
+
+   Filipe: "mach die ganze kachel perfekter detailliert schoenes."
+
+   Auf seinem Bild stand unter jeder zugeklappten Rolle ein leerer
+   Streifen. Nachgemessen: Der Abschnitt war 74 px hoch, die Zeile
+   darin 45 -- 29 px Nichts, fuenfmal untereinander.
+
+   Sie kamen aus ZWEI Quellen, und nur eine davon stand hier:
+     * padding-bottom: 14px an .liste-kachel > .gruppe
+     * margin-bottom: 14px an .gruppe__kopf -- aus start.css, Zeile 765,
+       geschrieben fuer die freistehenden Abschnitte der Startseite, wo
+       unter der Ueberschrift wirklich gleich Karten kommen.
+
+   Zugeklappt kommt hier aber gar nichts, und dann ist der Abstand
+   Abstand zu nichts. Beide werden deshalb an den ZUSTAND gebunden:
+   offen -> Luft, zugeklappt -> keine. */
 .liste-kachel > .gruppe > .gruppe__kopf {
   width: calc(100% + 32px);
-  margin-left: -16px;
-  padding: 13px 16px 11px;
+  margin: 0 0 0 -16px;
+  padding: 15px 16px;
 }
+.liste-kachel > .gruppe[data-auf="ja"] > .gruppe__kopf { margin-bottom: 13px; }
+.liste-kachel > .gruppe[data-auf="ja"] { padding-bottom: 15px; }
 
 /* =====================================================================
    DIE KOEPFE STEHEN IN SPALTEN, NICHT IN DER MITTE (screen3, 09.09.2026)
@@ -522,7 +549,201 @@ body[data-nur-lesen="ja"] select { display: none; }
   .liste-kachel .gruppe__unter { grid-column: 1 / -1; }
 }
 /* Ein Abschnitt, der offen ist, hebt sich leicht ab -- so sieht man,
-   welcher gerade Platz einnimmt, ohne eine zweite Farbe. */
-.liste-kachel > .gruppe:has(> .gruppe__kopf[aria-expanded="true"]) {
-  background: linear-gradient(180deg, rgba(255, 255, 255, .028), transparent 60%);
+   welcher gerade Platz einnimmt, ohne eine zweite Farbe. Der Ton kommt
+   aus der Rollenfarbe, ist aber so leise, dass er nicht als Farbe
+   auffaellt, sondern als Licht. */
+.liste-kachel > .gruppe[data-auf="ja"] {
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--r) 7%, transparent), transparent 62%);
+}
+
+/* =====================================================================
+   DIE KACHEL IM DETAIL (09.09.2026)
+
+   Filipe, mit Bildschirmfoto: "mach die ganze kachel perfekter
+   detailliert schönes. der hintergrund soll auch bissl dunkler sein
+   von der kachel."
+
+   Vorher waren die fünf Zeilen fünfmal dasselbe: Name, Zahl, Satz,
+   Pfeil, in Grau. Die Rollen haben im ganzen Haus eigene Farben --
+   auf der Anmeldeseite, an den Marken, in den Bereichen. Ausgerechnet
+   in der Liste, in der es NUR um Rollen geht, hörten sie auf.
+
+   Der Ton kommt deshalb aus derselben Quelle wie überall (--*-haupt in
+   gate.css) und wird an EINER Stelle je Rolle gesetzt. Alles Weitere
+   liest --r: Streifen, Zahl, Namenszeichen, Pfeil, das Licht beim
+   Aufklappen. Fünf Farbangaben je Rolle wären fünf Gelegenheiten,
+   dass eine nachgezogen wird und vier nicht.
+
+   AUGENSCHONEND HEISST HIER: die Farbe trägt, sie leuchtet nicht. Der
+   Streifen hat 3 px, die Fläche darunter höchstens 8 % Farbe. Fünf
+   kräftig eingefärbte Zeilen untereinander wären ein Regenbogen --
+   und einer, den man jeden Tag ansieht.
+   ===================================================================== */
+.liste-kachel > .gruppe                     { --r: var(--text-still); }
+/* UND DIE KARTEN DARIN ERBEN SIE.
+
+   `--ton` ist die Variable, aus der die Modulliste (module.css) das
+   Kantenlicht und die Eckwinkel jeder Kachel zieht. Sie hier zu setzen
+   heisst: Die Personenkarten in einem Abschnitt tragen die Farbe ihrer
+   Rolle, nicht die allgemeine Hausfarbe. Vorher standen in einem
+   lila Manager-Abschnitt orange gerahmte Karten -- zwei Farben fuer
+   dieselbe Sache, und die aeussere hatte recht.
+
+   Eine Zeile, und der ganze Abschnitt wird ein Stueck. */
+.liste-kachel > .gruppe { --ton: var(--r); }
+.liste-kachel > .gruppe[data-rolle="spicy"]   { --r: var(--spicy-haupt); }
+.liste-kachel > .gruppe[data-rolle="admin"]   { --r: var(--dogi-haupt); }
+.liste-kachel > .gruppe[data-rolle="manager"] { --r: var(--manager-haupt); }
+.liste-kachel > .gruppe[data-rolle="scout"]   { --r: var(--scout-haupt); }
+.liste-kachel > .gruppe[data-rolle="creator"] { --r: var(--creator-haupt); }
+
+/* Der Streifen sitzt NEBEN dem Kantenlicht, nicht darunter.
+
+   Erster Anlauf: `left: 0`, volle Höhe. Im Bild war nichts zu sehen --
+   und die berechneten Werte sagten trotzdem "3 px breit, sichtbar,
+   Deckkraft 0,55". Der Grund steht in module.css: Jede Kachel trägt auf
+   ::before ein Kantenlicht mit `inset: 0` und `z-index: 2`, also eine
+   1,6 px breite Linie ÜBER allen Kindern. Vom Streifen blieben 1,4 px,
+   und die lagen genau in der Kante.
+
+   Er beginnt deshalb bei 3 px, ist gerundet und lässt oben und unten
+   Luft: So liest er sich als Marke der Zeile und nicht als zweiter
+   Rahmen neben dem ersten. Zugeklappt reicht er über die Zeile, offen
+   über den ganzen Abschnitt -- man sieht am Rand, wie weit ein
+   geöffneter Bereich reicht. */
+.liste-kachel > .gruppe { position: relative; }
+.liste-kachel > .gruppe::after {
+  content: ""; position: absolute; left: 3px; top: 9px; bottom: 9px;
+  width: 3px; border-radius: 999px;
+  background: linear-gradient(180deg,
+    color-mix(in srgb, var(--r) 85%, transparent),
+    color-mix(in srgb, var(--r) 30%, transparent));
+  opacity: .7;
+  transition: opacity var(--tempo);
+  pointer-events: none;
+}
+.liste-kachel > .gruppe[data-auf="ja"]::after { opacity: 1; }
+
+/* Die Zeile reagiert als GANZE, nicht durch Verblassen. `opacity: .82`
+   auf dem Kopf (start.css) macht beim Überfahren den Text blasser --
+   das ist das Gegenteil von "hier bist du". Ein leiser Farbzug von
+   links sagt dasselbe, ohne etwas wegzunehmen. */
+.liste-kachel > .gruppe > .gruppe__kopf--klappbar { opacity: 1; }
+.liste-kachel > .gruppe > .gruppe__kopf--klappbar:hover {
+  opacity: 1;
+  background: linear-gradient(90deg,
+    color-mix(in srgb, var(--r) 11%, transparent), transparent 58%);
+}
+
+/* Die Anzahl trägt die Rollenfarbe. Sie ist der einzige Punkt in der
+   Zeile, der ohnehin schon ein Feld ist -- eine zweite eingefärbte
+   Fläche daneben wäre eine zu viel. */
+.liste-kachel .gruppe__zahl {
+  color: color-mix(in srgb, var(--r) 78%, #ffffff);
+  background: color-mix(in srgb, var(--r) 15%, transparent);
+  border: 1px solid color-mix(in srgb, var(--r) 32%, transparent);
+  padding: 1px 8px;
+}
+/* Und der Rollenname bekommt eine Spur mehr Gewicht als vorher -- er
+   ist die Überschrift der Zeile, nicht ihre Beschriftung. */
+.liste-kachel .gruppe__name { color: var(--text); letter-spacing: .11em; }
+.liste-kachel > .gruppe[data-auf="ja"] .gruppe__name {
+  color: color-mix(in srgb, var(--r) 55%, var(--text));
+}
+
+/* ---- Wer drinsteht ---------------------------------------------------
+   Vier Namenszeichen, leicht überlappend wie ein Stapel Karten -- so
+   liest man sie als EINE Gruppe und nicht als vier Einzelteile. Sie
+   stehen rechts, kurz vor dem Pfeil: Der Blick geht von links (wer ist
+   das) nach rechts (wer ist drin, kann ich aufklappen). */
+.gruppe__leute { display: flex; align-items: center; justify-self: end; }
+.gruppe__kopf-zeichen {
+  width: 26px; height: 26px; border-radius: 50%;
+  display: grid; place-items: center;
+  margin-left: -7px;
+  /* 0,72 rem und nicht 0,66: Darunter faellt die Hausgrenze von
+     11,5 px, und zwei Grossbuchstaben in einem 26-px-Kreis haben den
+     Platz. Gemeldet von pruef-css-klassen, bevor es jemand lesen
+     musste. */
+  font-size: .72rem; font-weight: 700; letter-spacing: .01em;
+  color: color-mix(in srgb, var(--r) 72%, #ffffff);
+  background: color-mix(in srgb, var(--r) 17%, #070a11);
+  /* Der Ring in der Farbe der Kachel schneidet die Zeichen voneinander
+     frei -- ohne ihn verschwimmt der Stapel zu einem Fleck. */
+  border: 1.5px solid #05080d;
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--r) 26%, transparent);
+}
+.gruppe__kopf-zeichen:first-child { margin-left: 0; }
+/* Gesperrt ist keine Farbe, sondern eine Abwesenheit von Farbe. Rot
+   wäre hier eine Warnung je Person; die Warnung steht schon einmal im
+   Zusatztext, und zweimal dasselbe zu rufen macht beides leiser. */
+.gruppe__kopf-zeichen[data-gesperrt="ja"] {
+  color: var(--text-still);
+  background: rgba(255, 255, 255, .05);
+  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1);
+}
+.gruppe__kopf-zeichen[data-mehr="ja"] {
+  color: var(--text-leise);
+  background: rgba(255, 255, 255, .06);
+  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12);
+  font-weight: 600;
+}
+
+/* Der Pfeil bekommt die Rollenfarbe erst beim Überfahren -- fünf
+   farbige Pfeile untereinander wären fünfmal dieselbe Aussage. */
+.liste-kachel > .gruppe > .gruppe__kopf--klappbar:hover .klapp-pfeil {
+  color: color-mix(in srgb, var(--r) 70%, var(--text));
+}
+.liste-kachel > .gruppe[data-auf="ja"] .klapp-pfeil {
+  color: color-mix(in srgb, var(--r) 60%, var(--text-leise));
+}
+
+/* Die Namenszeichen bekommen eine eigene Spalte im Raster (Name, Zahl,
+   Zusatztext, Leute, Pfeil). */
+.liste-kachel > .gruppe > .gruppe__kopf--klappbar {
+  grid-template-columns: var(--namen-spalte, max-content) auto minmax(0, 1fr) auto auto;
+  align-items: center;
+}
+/* Der Zusatztext steht auf der Schriftlinie des Namens -- er ist Text,
+   die anderen drei sind Formen. */
+.liste-kachel .gruppe__name, .liste-kachel .gruppe__unter { align-self: baseline; }
+
+@media (max-width: 900px) {
+  /* Eng wird zuerst das Entbehrliche weggelassen: Die Zahl daneben sagt
+     schon, wie viele es sind. */
+  .gruppe__leute { display: none; }
+  .liste-kachel > .gruppe > .gruppe__kopf--klappbar {
+    grid-template-columns: var(--namen-spalte, max-content) auto minmax(0, 1fr) auto;
+  }
+}
+/* ---- Am Handy: zwei Zeilen, und der Pfeil bleibt rechts -------------
+   Hier stand nur `.gruppe__unter { grid-column: 1 / -1 }` (weiter oben
+   in dieser Datei). Der Zusatztext bekam damit eine eigene Rasterzeile
+   -- und schob den Pfeil in eine DRITTE, wo er mittig unter dem Text
+   stand wie ein vergessenes Zeichen. Gemessen: 106 px je Zeile, fuenfmal
+   untereinander, auf einem 390 px breiten Bildschirm.
+
+   Richtig ist: Der Pfeil bekommt seine eigene Spalte ganz rechts und
+   ueberspannt BEIDE Zeilen. Dann steht er dort, wo die Hand ihn sucht,
+   und die Zeile ist zwei Zeilen hoch statt drei. */
+@media (max-width: 620px) {
+  .liste-kachel > .gruppe > .gruppe__kopf--klappbar {
+    grid-template-columns: max-content auto minmax(0, 1fr) auto;
+    row-gap: 3px;
+  }
+  .liste-kachel .gruppe__name { grid-column: 1; grid-row: 1; }
+  .liste-kachel .gruppe__zahl { grid-column: 2; grid-row: 1; }
+  .liste-kachel .gruppe__unter { grid-column: 1 / 4; grid-row: 2; }
+  .liste-kachel > .gruppe > .gruppe__kopf--klappbar .klapp-pfeil {
+    grid-column: 4; grid-row: 1 / span 2; align-self: center;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .liste-kachel > .gruppe::after { transition: none; }
+}
+@media (forced-colors: active) {
+  .liste-kachel > .gruppe::after { background: CanvasText; }
+  .gruppe__kopf-zeichen { border: 1px solid CanvasText; }
 }