Fuenf Punkte aus screen1-5: Babyblau, zweite Nut, Spalten, Wasserzeichen, Jadeknoepfe

screen1 -- "da muss mehr babyblau zu sehen sein. da ist ja fast nichts."

  Gemessen als Blaustich (Mittel Blaukanal minus Rotkanal ueber die
  ganze Zeile): DogFather lag bei 7,4 und damit UNTER der roten
  Spicy-Zeile (17,3). Ursache: --dogi-haupt war #c7dcf4, und das hat
  zwischen Rot und Blau nur 45 Stufen Abstand -- im Hexwert ein Blau,
  auf dem Bildschirm ein Weiss.

  Jetzt #9ed3f4 (86 Stufen), dazu eine Schiene, deren Silber nur noch
  ein Spitzlicht am oberen Ende ist, ein breiter babyblauer Schimmer
  und der Name selbst in einem Verlauf von Silber nach Babyblau.
  Blaustich 24,3 -- der hoechste aller fuenf Zeilen, und mit dem
  hoechsten Gruenanteil, also Babyblau und nicht Lila. Abstand zur
  naechsten Rollenfarbe 0,1295 in OKLab (Hausgrenze 0,0973), Kontrast
  12,4:1.

screen2 -- "mach diesen strich der nach oben geht auch links bitte."

  Die Zentrale hat drei Felder, aber nur EINE Nut. Jetzt zwei, aus
  einem Regelsatz -- "genau gleich" heisst hier wirklich gleich und
  nicht gespiegelt: Eine Fraesung in derselben Platte hat bei Licht von
  oben links ueberall dieselbe Flanke.

  Dabei ein echter Fehler gefunden: Die Nut wurde erst bei 620 px
  abgeschaltet (start.css), die dritte Spalte faellt aber schon bei
  1180 px weg (heim.css). Zwischen 621 und 780 px stand sie deshalb als
  freier senkrechter Strich im Bild -- bei 700 px nachgemessen bei
  x = 391, wo sie nichts mehr trennte. Das Abschalten steht jetzt in
  derselben Regel wie der Spaltenwechsel, je einmal fuer 1180 und 780.

screen3 -- "die sollen schön untereinander sein."

  `.gruppe__zahl` trug ein `margin-left: auto` -- geschrieben fuer die
  Startseite, wo im Kopf nur Name, Zahl und Pfeil stehen. Auf der
  Personenseite steht dazwischen noch der Zusatztext, und der Pfeil hat
  sein eigenes auto. Zwei auto-Raender teilen den freien Platz zu
  gleichen Teilen -- also stand die Gruppe [Zahl + Zusatz] mittig, und
  ihre Lage hing an der Laenge des Rollennamens.

  Jetzt vier Rasterspalten. Die Breite der Namensspalte wird an der
  fertigen Liste GEMESSEN und als `--namen-spalte` gesetzt; eine feste
  Angabe waere bis zur naechsten Rolle mit laengerem Namen richtig.
  Spanne von Zahl und Zusatztext: 0,0 px (vorher 11 px). Gegenprobe:
  ohne die gemessene Spalte laufen sie wieder 36,5 px auseinander.

screen4 -- "das symbol rechts in der kachel soll viel groesser sein."

  Zum dritten Mal gemeldet, und zum dritten Mal hatte er recht. Zweimal
  habe ich den KASTEN vergroessert; beide Male hat sich nichts geaendert,
  und ich habe es auf die Kachelhoehe geschoben, statt nachzusehen. Der
  Kasten war 124 px -- das SVG darin 39:

    .kachel[data-gross="ja"] .kachel__svg { width: 39px }   (0,3,0)
    .kachel__wasserzeichen svg            { width: 100%  }  (0,1,1)

  Die erste Regel meint das Hauptsymbol links. Beide SVG tragen aber
  dieselbe Klasse, weil sie aus derselben Funktion kommen -- und die
  fremde Regel war staerker. Dasselbe galt fuer `.kachel:hover
  .kachel__svg` und die Reduced-Motion-Regel; alle drei sind jetzt auf
  `.kachel__zeichen` eingeschraenkt.

  Und es waren WIEDER zwei Fassungen derselben Sache, 3600 Zeilen
  auseinander: Rahmen 78 gegen 70, Zeichen 36 gegen 39. Der Kommentar
  an der spaeteren Stelle behauptete sogar schon, es gebe "EINE
  Fassung". Behauptet war es, gemessen nicht. Die toten sind entfernt.

  Zweitens fuellt die Zeichnung jetzt ihren Kasten: Im 24er-Raster liegt
  sie bei x 4 bis 20, rund 38 Prozent waren leerer Rand.

  Ergebnis: Zeichnung von 26 auf 124 px, samt der 8-Grad-Drehung
  (140 px) vollstaendig in der 152 px hohen Kachel. Deckkraft
  unveraendert bei 0,14 -- er wollte groesser, nicht lauter.

screen5 -- "der abmelde button und teilen button sollen eine richtig
geile gruen haben ... aber so dass es nicht den augen wehtut."

  Teilen #45d6a6, Abmelden #33b394. Beide sind WENIGER gesaettigt als
  das Rot, das vorher dort stand (63 und 55 gegen 100 Prozent) -- die
  Leiste wird ruhiger, nicht greller. Kontrast der Schrift 15,6:1 und
  15,0:1 gegen vorher 13,6:1 und 12,6:1. Chat und Suchen bleiben rot;
  damit trennt die Farbe "das mache ich mit der Seite" von "das mache
  ich mit meinem Zugang".

  Erster Versuch verworfen: Ein Rahmen aus drei Toenen ueber zwei
  Hintergrundlagen machte beide Knoepfe FLAECHIG gruen, weil ich die
  deckende obere Lage durchsichtig gesetzt hatte -- damit deckte sie den
  Rahmenverlauf nicht mehr ab. Im Bildschirmfoto gesehen, nicht in den
  Zahlen: Die Farbwerte waren die ganze Zeit richtig.

Geprueft: pruef-start-ansicht, pruef-buehne, pruef-css-klassen,
pruef-personen-liste -- alle gruen. Jede eigene Messung mit Gegenprobe.

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

workspace/assets/css/personen.css

@@ -457,6 +457,70 @@ body[data-nur-lesen="ja"] select { display: none; }
   margin-left: -16px;
   padding: 13px 16px 11px;
 }
+
+/* =====================================================================
+   DIE KOEPFE STEHEN IN SPALTEN, NICHT IN DER MITTE (screen3, 09.09.2026)
+
+   Filipe: "die sollen schön untereinander sein und nicht so
+   durcheinander."
+
+   URSACHE, gemessen statt vermutet: `.gruppe__zahl` traegt in start.css
+   ein `margin-left: auto` -- geschrieben fuer die STARTSEITE, wo im Kopf
+   nur Name, Zahl und Pfeil stehen und die Zahl damit ganz nach rechts
+   rutscht ("Sie steht ganz rechts, direkt vor dem Pfeil", so der
+   Kommentar dort). Auf DIESER Seite steht zwischen Zahl und Pfeil aber
+   noch der Zusatztext, und der Pfeil hat sein EIGENES `margin-left:
+   auto`. Zwei auto-Raender in einem Flexkasten teilen den freien Platz
+   zu gleichen Teilen -- also landete die Gruppe [Zahl + Zusatztext]
+   genau in der Mitte, und ihre Lage haing an der Laenge des Rollennamens
+   davor. Nachgemessen im Kopf:
+
+     DOGFATHER  Name x 16, Zahl x 501, Zusatz x 531
+     SCOUT      Name x 16, Zahl x 490, Zusatz x 520
+     CREATOR    Name x 16, Zahl x 494, Zusatz x 525
+
+   Die Regel tat also nicht einmal auf dieser Seite, was ihr eigener
+   Kommentar behauptet. Sie bleibt fuer die Startseite unveraendert und
+   wird hier zurueckgenommen -- nicht dort geaendert, sonst kippt die
+   andere Seite.
+
+   VIER SPALTEN STATT FLEX. Name, Zahl, Zusatztext, Pfeil. Damit die
+   Spalten ueber ALLE Koepfe hinweg fluchten, brauchen sie dieselbe
+   Namensbreite -- die kommt aus `--namen-spalte`, und die wird in
+   personen.js an der fertig gezeichneten Liste GEMESSEN. Eine feste
+   Zahl (`min-width: 11ch`) waere wieder eine Rechnung von gestern: Sie
+   gilt bis zur naechsten Rolle mit einem laengeren Namen, und dann
+   verrutscht alles still. Der Rueckfallwert `max-content` sorgt dafuer,
+   dass es auch ohne JavaScript ordentlich aussieht -- nur eben nicht
+   gefluchtet. */
+.liste-kachel > .gruppe > .gruppe__kopf--klappbar {
+  display: grid;
+  grid-template-columns: var(--namen-spalte, max-content) auto minmax(0, 1fr) auto;
+  align-items: baseline;
+  column-gap: 12px;
+}
+/* `justify-self: start` haelt jedes Feld auf Inhaltsbreite. Ohne das
+   fuellt der Name seine Spalte aus -- und die Messung in personen.js
+   wuerde dann ihre eigene Vorgabe zurueckmessen statt der Textbreite. */
+.liste-kachel .gruppe__name,
+.liste-kachel .gruppe__zahl,
+.liste-kachel .gruppe__unter { justify-self: start; }
+.liste-kachel .gruppe__zahl { margin-left: 0; }
+/* Der Pfeil braucht seinen auto-Rand im Raster nicht mehr -- die letzte
+   Spalte ist ohnehin die letzte. Mittig statt auf der Schriftlinie: ein
+   Zeichen hat keine Grundlinie, an der sich etwas ausrichten liesse. */
+.liste-kachel > .gruppe > .gruppe__kopf--klappbar .klapp-pfeil {
+  margin-left: 0; justify-self: end; align-self: center;
+}
+/* Schmale Fenster: Der Zusatztext rutscht unter den Namen, statt die
+   Spalten zu stauchen. Zwei Zeilen sind lesbar, eine gequetschte
+   nicht. */
+@media (max-width: 620px) {
+  .liste-kachel > .gruppe > .gruppe__kopf--klappbar {
+    grid-template-columns: max-content auto minmax(0, 1fr) auto;
+  }
+  .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"]) {