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/heim.css

@@ -666,10 +666,27 @@
   .willkommen { --instrument: 224px; }
   .willkommen__reihe { grid-template-columns: minmax(170px, var(--spalte)) minmax(0, 1fr); }
   .willkommen__rechts { grid-column: 1 / -1; justify-content: center; margin-left: 0; }
+  /* EINE NUT TRENNT NUR, SOLANGE SIE ZWISCHEN ETWAS STEHT (09.09.2026).
+
+     Hier faellt die dritte Spalte weg: Die Uhr rutscht in eine eigene
+     Zeile darunter. Ihre Nut haengt aber weiter 18 px links von ihr --
+     und stand damit als senkrechter Strich mitten im Bild. Nachgemessen
+     bei 700 px: Die Nut lag bei x = 391 und trennte dort gar nichts.
+
+     Sie WAR ausgeschaltet, aber erst bei 620 px, und die Regel dafuer
+     stand 3000 Zeilen entfernt in start.css. Zwei Zahlen fuer dieselbe
+     Sache an zwei Orten -- der haeufigste Fehler in diesem Haus. Jetzt
+     steht das Ausschalten dort, wo die Spalte verschwindet, die es
+     begruendet. Wer die Spalten wieder anfasst, sieht es. */
+  .willkommen__rechts::before { display: none; }
 }
 @media (max-width: 780px) {
   .willkommen { --instrument: 196px; }
   .willkommen__reihe { grid-template-columns: minmax(0, 1fr); gap: 20px; }
+  /* Jetzt faellt auch die zweite Spalte weg -- ab hier trennt die linke
+     Nut ebenfalls nichts mehr. Bis hierher blieb sie richtig: Ring und
+     Text standen ja noch nebeneinander. */
+  .willkommen__links::before { display: none; }
   .zgruss { flex-wrap: wrap; justify-content: center; }
   .zgruss__text { text-align: center; align-items: center; }
 }
@@ -758,17 +775,45 @@
    Wand). Beides zusammen macht aus "davor" ein "darin".
    ===================================================================== */
 .willkommen__rechts { position: relative; }
+.willkommen__links  { position: relative; }
 
-/* Die Nut. */
-.willkommen__rechts::before {
+/* Die Nut -- ZWEIMAL, links und rechts vom Text (09.09.2026, screen2).
+
+   Filipe: "mach diesen strich der nach oben geht auch links bitte.
+   genau gleich."
+
+   Die Konsole hat drei Felder: Ring links, Text in der Mitte, Uhr
+   rechts. Eine Nut trennte bisher nur das rechte ab -- damit sass der
+   Text nicht ZWISCHEN zwei Instrumenten, sondern klebte am linken.
+
+   "GENAU GLEICH" HEISST HIER WIRKLICH GLEICH, nicht gespiegelt. Eine
+   Nut ist eine Fraesung in ein und dieselbe Platte, und das Licht faellt
+   im ganzen Haus von links oben. Also hat jede Nut dieselbe Flanke:
+   dunkel auf der Lichtseite, hell auf der Schattenseite. Eine
+   gespiegelte zweite Nut waere ein zweites Licht -- derselbe Fehler,
+   der heute schon an der Uhr steckte, wo die Lichtkante seitlich statt
+   von oben kam.
+
+   Beide teilen sich deshalb einen Regelsatz. Wer die eine aendert,
+   aendert die andere zwangslaeufig mit. */
+.willkommen__rechts::before,
+.willkommen__links::before {
   content: ""; position: absolute;
-  left: -18px; top: -14px; bottom: -14px; width: 2px;
+  top: -14px; bottom: -14px; width: 2px;
   pointer-events: none; z-index: 0;
   background: linear-gradient(90deg,
     rgba(0, 0, 0, .75) 0 1px,
     rgba(255, 255, 255, .13) 1px 2px);
   border-radius: 1px;
 }
+/* Jede sitzt in der Fuge NEBEN ihrem Feld: die rechte links von der
+   Uhr, die linke rechts vom Ring. Die 26 px Fuge kommen aus dem `gap`
+   der Reihe; 18 px Versatz setzen die Nut mittig hinein. */
+.willkommen__rechts::before { left: -18px; }
+.willkommen__links::before  { right: -18px; }
+/* Auch links liegen die Instrumente ueber der Nut -- gleiche
+   Begruendung wie rechts, siehe unten. */
+.willkommen__links > * { position: relative; z-index: 1; }
 
 /* DIE INSTRUMENTE LIEGEN UEBER DER MULDE -- und das muss ausdruecklich
    dastehen. `::after` wird NACH allen Kindern gezeichnet; bei gleichem