Aufgabenbrett: eine Karte ist ein Stueck Arbeit, keine Tabellenzeile

Filipe: "so wie alles gerade ist ist es zu wenig und zu viel zu
gleich". Die Zahl dahinter, an der echten Datenbank gemessen: 115
offene Aufgaben -- aber nur 17 verschiedene. Jede stand acht Mal da.

URSACHE, nicht Symptom: Am 22.09.2026 wurde dieselbe Vorlage zweimal
verteilt, nachgemessen zwischen 16:05:24 und 16:05:53. Zweimal
gedrueckt, weil beim ersten Mal scheinbar nichts passierte. 56 der
115 Karten sind exakte Doppelte.

WAS SICH AENDERT

Aufgaben mit gleichem Titel, gleicher Frist und gleicher Kategorie
stehen jetzt als EINE Karte da: "0 von 8", ein Balken, und die Leute
als Pillen in ihrer Statusfarbe. Wer sie doppelt hat, traegt x2.

Der Hinweis auf die Doppelten steht EINMAL ueber dem Brett, mit Zahl
-- nicht siebzehnmal an den Karten. Eine Warnung, die auf jeder Karte
steht, ist Tapete (Lehre vom 03.09.2026).

Die Spalten wachsen nach dem, was sie tragen: "Offen" mit 17 Karten
bekam vorher genauso viel Platz wie "Erledigt" mit einer -- beide
369 px, gemessen. Innerhalb der Spalte legen sich die Karten
nebeneinander, sobald Platz da ist (auto-fill, keine feste Spaltenzahl).

Das Vorlagenbrett steht oben, solange das Brett leer ist, und wandert
darunter, sobald etwas daliegt. Die urspruengliche Begruendung ("wer
ein leeres Brett hat, soll nicht daran vorbeiscrollen") gilt nur fuer
den leeren Fall.

Am Handy wird aus "Wer hat gerade was" eine wischbare Reihe statt
gestapelter Pillen, mit Randschattierung als Hinweis, dass es
weitergeht.

GEMESSEN (echte Datenlage: 17 Vorlagen, vier Leute, doppelt verteilt)

  Computer  46 077 px -> 2 445 px   (18,8-fach kuerzer)
  Handy     44 216 px -> 5 763 px   ( 7,7-fach kuerzer)
  Brett beginnt am Handy bei 798 statt 901 px -- die erste Aufgabe
  ist damit ohne Scrollen sichtbar.

DREI BEFUNDE NEBENBEI, ALLE VON MIR

1. team.css: Der Schreiben-Knopf auf der Team-Lage stand bei 42 px.
   Am 22.09. habe ich beim Kartenumbau das Polster von 10 auf 9 px
   gesenkt und ihn damit unter die Hausregel gedrueckt. Jetzt
   min-height statt Polsterrechnung -- die Hoehe haengt nicht mehr
   daran, ob jemand spaeter an der Schriftgroesse dreht.

2. chat.css: Die Knoepfe der Aufnahmeleiste standen bei 40 px, der
   Weg-Knopf der GIF-Kiste bei 28. Beide in der Nacht zum 23.09.
   gebaut. Die Leiste bekommt volle 44 px; der GIF-Knopf bleibt klein
   sichtbar und waechst nur in der TREFFERFLAECHE (28 + 2x8 = 44),
   und das nur am Finger -- mit der Maus zielt man genau, eine
   unsichtbar vergroesserte Flaeche waere dort eine Falle.

3. pruef-chat-anhaenge meldete "aus der Kiste genommen (1 uebrig)".
   Kein Codefehler: Die Pruefung setzte `window.confirm = () => true`,
   und heute frueh ist dort der Hausdialog an die Stelle getreten. Sie
   klickte, die Seite fragte, niemand antwortete. Genau der Fall, vor
   dem der Kopf von helfer-nachfrage.mjs seit dem 19.09. warnt -- zum
   zweiten Mal, an einer neuen Stelle. Jetzt ueber `bestaetige`, und
   damit prueft die Zeile ab sofort mit, DASS gefragt wird.

PRUEFUNGEN

pruef-modi-katalog zaehlte Karten und erwartete +1. Seit der
Gruppierung ist das die alte Anordnung, nicht die Sache: Sie zaehlt
jetzt AUFGABEN ueber data-id/data-ids und meldet "2 -> 3 Aufgaben in
2 Karten" -- damit ist beides belegt, das Anlegen und das
Zusammenfassen.

Alles gruen: aufgabenbrett 49, zuteilung 75, bewerbung-aufgaben 101,
modi-katalog 125, chat-anhaenge 109, chat-optik 56, tippziele 11,
teamlage-karten 39, sprung 43, textform 50, formulare 23,
css-klassen 33, zeichen 7, ueberlappung (20 Paare).
Handy-Rundgang: 220 Seitenaufrufe, 112 776 Elemente, 0 Befunde.

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

workspace/assets/css/aufgaben.css

@@ -226,9 +226,46 @@
 
 /* ---------- Brett ----------------------------------------------------- */
 
+/* LEERE SPALTEN NEHMEN SICH ZURUECK (23.09.2026)
+
+   Vorher: vier gleich breite Spalten. Am 23.09. standen darin 136, 0,
+   0 und 1 Karte -- drei Viertel des Bildschirms waren damit belegt,
+   um dreimal "nichts" zu sagen, waehrend die volle Spalte 46 000 px
+   nach unten lief.
+
+   GRID KANN DAS NICHT, FLEX SCHON. Ein Raster teilt nach Vorschrift,
+   ein Flussverbund nach Inhalt. Damit schrumpft eine leere Spalte auf
+   ihre Breite und der Rest bekommt den Platz -- ohne dass irgendwo
+   eine Zahl steht, die jemand pflegen muesste.
+
+   SIE VERSCHWINDEN NICHT. Eine Spalte, die fehlt, kann man auch nicht
+   fuellen -- und "Zur Freigabe" muss man sehen koennen, um zu
+   verstehen, dass es den Schritt gibt. */
 .brett {
-  display: grid; gap: 14px;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
+  display: flex; flex-wrap: wrap; gap: 14px;
+  align-items: flex-start;
+}
+/* Eine volle Spalte waechst, eine leere nicht. `flex: 0 0` statt
+   `0 1`: Die leere soll auch dann nicht mitwachsen, wenn Platz
+   uebrig ist -- der gehoert der Arbeit, nicht dem Hinweis, dass
+   gerade keine da ist. */
+.brett > .spalte { flex: var(--wuchs, 1) 1 190px; min-width: 0; }
+/* 170 statt 190: Gemessen passten bei 190 nur zwei Kartenreihen in
+   die volle Spalte (745 px, noetig fuer drei sind 756). Die zwanzig
+   Pixel je leerer Spalte sind genau der Unterschied -- und sie fehlen
+   dort niemandem, weil dort nichts steht. */
+.brett > .spalte[data-leer="ja"] { flex: 0 0 170px; }
+
+/* DIE KARTEN LEGEN SICH NEBENEINANDER, WENN PLATZ IST.
+
+   auto-fill mit einer Mindestbreite statt einer festen Spaltenzahl:
+   Bei 1600 px passen drei nebeneinander, bei 900 px zwei, am Handy
+   eine -- und niemand muss dafuer eine Schwelle pflegen. Genau daran
+   ist am 06.09.2026 die Kopfleiste gescheitert: eine feste Zahl, die
+   beim sechsten Element nicht mehr stimmte. */
+.spalte__karten {
+  display: grid; gap: 12px;
+  grid-template-columns: repeat(auto-fill, minmax(244px, 1fr));
   align-items: start;
 }
 
@@ -329,7 +366,16 @@
   background: color-mix(in srgb, var(--sfarbe) 5%, transparent);
 }
 
-@media (max-width: 1080px) { .brett { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+/* Auf schmalen Schirmen bekommt die volle Spalte die ganze Breite und
+   die leeren stellen sich nebeneinander darunter -- statt vier
+   Streifen, die alle zu schmal sind. */
+@media (max-width: 1080px) {
+  .brett > .spalte { flex: 1 1 100%; }
+  .brett > .spalte[data-leer="ja"] { flex: 1 1 calc(50% - 7px); }
+  /* Am Handy bleibt eine Karte je Zeile -- zwei nebeneinander waeren
+     auf 390 px je 180 px breit, und darauf passt kein Titel. */
+  .spalte__karten { grid-template-columns: 1fr; }
+}
 @media (max-width: 620px)  { .brett { grid-template-columns: 1fr; } }
 
 /* ---------- Bearbeiten-Dialog ------------------------------------------ */
@@ -1278,9 +1324,16 @@
   border-radius: var(--radius);
   background: color-mix(in srgb, var(--flaeche) 92%, transparent);
 }
-.z-band__kopf { margin-bottom: 12px; }
+/* Ueberschrift und Erklaerung stehen nebeneinander, nicht
+   uebereinander. Der Satz ist eine Fussnote zur Ueberschrift, keine
+   zweite Ueberschrift -- und zwei Zeilen fuer eine Auskunft sind auf
+   einer Seite, die ohnehin zu lang ist, eine zu viel. */
+.z-band__kopf {
+  margin-bottom: 10px;
+  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
+}
 .z-band__titel { margin: 0; font-size: 1.05rem; }
-.z-band__satz { margin: 4px 0 0; color: var(--text-leise); font-size: .9rem; }
+.z-band__satz { margin: 0; color: var(--text-leise); font-size: .84rem; }
 
 /* Die Zahlen. Groß genug, um sie von oben zu erfassen, ohne zu lesen. */
 .z-band__zahlen { display: flex; flex-wrap: wrap; gap: 10px; }
@@ -1297,7 +1350,23 @@
 .zk--warn { border-color: color-mix(in srgb, #ffb4a2 55%, var(--rand)); }
 
 /* ---- Die Übersicht über alle ---------------------------------------- */
-.z-leute { display: flex; flex-direction: column; gap: 6px; }
+/* AUS GESTAPELTEN ZEILEN WIRD EINE REIHE (23.09.2026)
+
+   Gemessen: Dieser Block nahm bei vier Leuten 330 px ein -- ein
+   Drittel des Bildschirms, bevor die erste Aufgabe zu sehen war. Das
+   Brett begann dadurch erst bei 802 px.
+
+   Eine Zeile je Person war richtig gedacht, solange es um LESEN ging:
+   Name links, Marken rechts, ordentlich untereinander. Aber man liest
+   hier nicht, man SUCHT -- "wer hat zu viel?" -- und dafuer ist
+   nebeneinander besser als untereinander. Vier Namen in einer Reihe
+   vergleicht man mit einem Blick; vier Zeilen muss man abfahren.
+
+   flex-wrap statt einer festen Spaltenzahl: Bei zwanzig Leuten
+   bricht es von selbst um, ohne dass irgendwo eine Zahl steht, die
+   jemand beim naechsten Zugang nachziehen muesste. */
+.z-leute { display: flex; flex-wrap: wrap; gap: 6px; }
+.z-leute > .z-person { flex: 0 1 auto; }
 .z-person {
   display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
   /* 44 px am Finger -- Hausregel. Hier über die Polsterung, nicht über
@@ -1317,7 +1386,10 @@
   border-color: var(--akzent);
   box-shadow: inset 3px 0 0 var(--akzent);
 }
-.z-person__name { font-weight: 600; min-width: 7rem; }
+/* Die feste Mindestbreite war fuer die Zeilenform da -- sie hat die
+   Namen untereinander ausgerichtet. In der Reihe macht sie aus einem
+   kurzen Namen eine breite Luecke. */
+.z-person__name { font-weight: 600; }
 .z-person__marken { display: flex; flex-wrap: wrap; gap: 6px; }
 
 .z-marke {
@@ -1467,3 +1539,236 @@
 @media (prefers-reduced-motion: reduce) {
   .z-person { transition: none; }
 }
+
+
+/* =====================================================================
+   DIE SAMMELKARTE (23.09.2026)
+
+   Filipe: "so wie alles gerade ist ist es zu wenig und zu viel zu
+   gleich ... ich will das beste vom besten."
+
+   Eine Karte ist seither ein STUECK ARBEIT und nicht eine Zeile aus
+   der Datenbank. Sitzen vier Leute an derselben Sache, steht sie
+   einmal da -- mit den vieren darauf.
+
+   Die Begruendung und die gemessenen Zahlen stehen in aufgaben.js bei
+   gruppieren(). Hier steht nur, wie es aussieht.
+   ===================================================================== */
+
+.karte--sammel { --sammelton: var(--sfarbe, #6f89a8); }
+
+/* Wie weit die Gruppe ist -- als Zahl. Rechts oben, wo sonst der
+   Stift steht: Es ist die Auskunft, die man auf einer Sammelkarte
+   zuerst sucht. */
+.sammel__stand {
+  flex: 0 0 auto;
+  font-size: .78rem; font-variant-numeric: tabular-nums;
+  padding: 3px 9px; border-radius: 999px;
+  color: var(--text-leise);
+  border: 1px solid var(--rand);
+  background: color-mix(in srgb, var(--flaeche) 70%, transparent);
+}
+.sammel__stand[data-fertig="ja"] {
+  color: #8fd9b4;
+  border-color: color-mix(in srgb, #4dab77 45%, transparent);
+  background: color-mix(in srgb, #4dab77 14%, transparent);
+}
+
+/* Derselbe Stand noch einmal fuers Auge. ZUSAETZLICH zur Zahl, nicht
+   statt ihrer -- ein Balken allein laesst sich nicht vorlesen und
+   nicht ablesen, wenn man Farben schlecht unterscheidet. */
+.sammel__balken {
+  height: 4px; border-radius: 999px; overflow: hidden;
+  background: color-mix(in srgb, var(--rand) 70%, transparent);
+  margin: 2px 0 9px;
+}
+.sammel__balken > span {
+  display: block; height: 100%;
+  width: calc(var(--anteil, 0) * 1%);
+  border-radius: 999px;
+  background: linear-gradient(90deg,
+    color-mix(in srgb, #4dab77 70%, transparent), #4dab77);
+}
+
+/* Der Text wird gekuerzt, nicht weggenommen. Auf der Sammelkarte
+   stand er vorher VIERMAL untereinander -- einmal je Person, und
+   jedes Mal derselbe Satz. */
+/* ZWEI ZEILEN, NICHT DREI. Auf der Sammelkarte ist der Text bei
+   allen Beteiligten derselbe -- er steht also ohnehin nur noch
+   einmal statt achtmal. Zwei Zeilen reichen, um zu erkennen, worum
+   es geht; wer mehr braucht, klappt auf. */
+.karte__text--kurz { font-size: .86rem; margin: 6px 0 0; }
+.sammel__mehr {
+  align-self: flex-start;
+  border: 0; background: none; padding: 4px 0; margin: 0 0 4px;
+  font: inherit; font-size: .78rem; color: var(--text-leise);
+  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
+}
+.sammel__mehr:hover { color: var(--text); }
+.sammel__mehr:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
+
+/* ---- Die Leute ----------------------------------------------------
+   Jeder Name traegt seinen eigenen Stand. Das ist der Punkt, an dem
+   die Sammelkarte MEHR zeigt als die vier Einzelkarten vorher: Dort
+   musste man vier Karten suchen, die dreissig Karten auseinanderlagen,
+   um dieselbe Frage zu beantworten. */
+.sammel__leute { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
+.sammel__person {
+  display: inline-flex; align-items: center; gap: 6px;
+  min-height: 34px; padding: 4px 10px 4px 8px;
+  border-radius: 999px; cursor: pointer;
+  font: inherit; font-size: .8rem; color: var(--text);
+  border: 1px solid var(--rand);
+  background: color-mix(in srgb, var(--flaeche) 62%, transparent);
+}
+.sammel__person:hover { border-color: var(--rand-hell); }
+.sammel__person:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
+.sammel__punkt {
+  width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
+  background: var(--pton, #6f89a8);
+}
+.sammel__person[data-status="offen"]    { --pton: #6f89a8; }
+.sammel__person[data-status="arbeit"]   { --pton: #3fbdf5; }
+.sammel__person[data-status="review"]   { --pton: #e0a33c; }
+.sammel__person[data-status="erledigt"] { --pton: #4dab77; }
+/* Wer fertig ist, tritt zurueck. Nicht durchgestrichen -- das liest
+   sich wie "faellt weg", und die Arbeit ist ja getan, nicht
+   abgesagt. */
+.sammel__person[data-status="erledigt"] { color: var(--text-leise); }
+.sammel__person[data-status="erledigt"] .sammel__punkt { box-shadow: none; }
+/* Und der Rand nimmt die Farbe auf, damit man die Gruppe auch ohne
+   die Punkte lesen kann. */
+.sammel__person { border-color: color-mix(in srgb, var(--pton, #6f89a8) 30%, var(--rand)); }
+
+/* Steht jemand doppelt drin, steht es AN der Person. */
+.sammel__mal {
+  font-size: .72rem; font-variant-numeric: tabular-nums;
+  padding: 1px 5px; border-radius: 999px;
+  color: #f2c94c;
+  background: color-mix(in srgb, #e0a33c 18%, transparent);
+  border: 1px solid color-mix(in srgb, #e0a33c 40%, transparent);
+}
+.sammel__person[data-doppelt="ja"] { border-color: color-mix(in srgb, #e0a33c 45%, var(--rand)); }
+
+.sammel__doppelt {
+  margin: 8px 0 0; font-size: .78rem; line-height: 1.5;
+  color: #e6c169;
+}
+
+/* Die kleine Zeile im Spaltenkopf: wie viele Aufgaben aus den
+   Stuecken Arbeit geworden sind. */
+.spalte__summe {
+  margin: -2px 0 10px; font-size: .76rem; color: var(--text-leise);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .sammel__balken > span { transition: width .2s ease; }
+}
+
+@media (forced-colors: active) {
+  .sammel__person { border: 1px solid CanvasText; }
+  .sammel__person[data-doppelt="ja"] { border: 2px solid Highlight; }
+  .sammel__balken { border: 1px solid CanvasText; }
+}
+
+/* Die Sammelkarte darf enger sitzen als eine Einzelkarte: Auf ihr
+   steht weniger Text und mehr Struktur. Gemessen waren es 330 px je
+   Karte -- bei siebzehn Karten ist jede eingesparte Zeile ein halber
+   Bildschirm. */
+.karte--sammel { padding: 13px 14px 14px; gap: 0; }
+.karte--sammel .karte__titel { font-size: .97rem; line-height: 1.35; }
+.karte--sammel .karte__zeile { margin-top: 8px; }
+
+.inhalt--brett { max-width: 1560px; }
+/* Der Kopfbereich bleibt lesbar schmal -- er ist Text, kein Brett.
+   Ohne das stuende der Satz "136 Aufgaben stehen an" auf einem
+   breiten Schirm ueber anderthalb Meter. */
+.inhalt--brett > .kopf-zeile,
+.inhalt--brett > .lage,
+.inhalt--brett > #vorlagenbrett,
+.inhalt--brett > .neu { max-width: 1240px; }
+
+/* ---- Das Doppelt-Band ---------------------------------------------
+   Steht ueber dem Brett und nur dann, wenn wirklich etwas doppelt
+   ist. Gelb und nicht rot: Es ist eine Unsauberkeit, kein Ausfall --
+   niemand muss deshalb etwas stehen und liegen lassen. */
+.doppelband {
+  display: flex; align-items: center; gap: 13px;
+  margin: 0 0 14px; padding: 12px 16px;
+  border-radius: var(--radius);
+  border: 1px solid color-mix(in srgb, #e0a33c 38%, var(--rand));
+  background: linear-gradient(180deg,
+    color-mix(in srgb, #e0a33c 11%, transparent), transparent 70%), var(--flaeche);
+}
+.doppelband__zahl {
+  flex: 0 0 auto;
+  min-width: 2.6rem; height: 2.6rem;
+  display: flex; align-items: center; justify-content: center;
+  border-radius: 999px;
+  font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums;
+  color: #f2c94c;
+  background: color-mix(in srgb, #e0a33c 16%, transparent);
+  border: 1px solid color-mix(in srgb, #e0a33c 42%, transparent);
+}
+.doppelband__text { display: grid; gap: 2px; min-width: 0; }
+.doppelband__text > span { color: var(--text-leise); font-size: .86rem; line-height: 1.5; }
+
+@media (forced-colors: active) { .doppelband { border: 1px solid CanvasText; } }
+
+/* Voller Name oder Anfangsbuchstabe -- nie beides. */
+.sammel__kurz { display: none; }
+@media (max-width: 620px) {
+  .sammel__voll { display: none; }
+  .sammel__kurz {
+    display: inline-block; min-width: 1.05rem; text-align: center;
+    font-weight: 600; font-variant-numeric: tabular-nums;
+  }
+  /* Ohne den Namen braucht die Pille weniger Polster -- sonst waeren
+     es vier gleich grosse Kaesten mit viel Luft. */
+  .sammel__person { padding: 4px 8px; gap: 5px; }
+}
+
+/* ---- Am Handy wird aus der Reihe eine ROLLE ------------------------
+   Gemessen am 23.09.2026 auf 390 px: Die vier Leute brauchten dort
+   260 px, weil je Zeile nur zwei Pillen nebeneinander passen. Zusammen
+   mit dem Doppelt-Band begann das Brett erst bei 901 px -- also nach
+   einem vollen Bildschirm.
+
+   Nebeneinander in EINER Zeile, zum Wischen: Das ist dieselbe
+   Anordnung wie am grossen Schirm, nur laenger als das Fenster. Wer
+   jemand Bestimmten sucht, wischt; wer nur wissen will, ob jemand zu
+   viel hat, sieht die ersten drei und die Randschattierung sagt ihm,
+   dass es weitergeht.
+
+   KEIN Umbruch mehr auf schmalen Geraeten -- `nowrap` statt einer
+   Schwelle, ab der eine bestimmte Zahl Pillen passt. Eine solche Zahl
+   waere beim naechsten Namen falsch. */
+@media (max-width: 620px) {
+  .z-leute {
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    /* Der Finger soll waagerecht wischen, ohne dass die Seite
+       darunter mitwandert. */
+    overscroll-behavior-x: contain;
+    scroll-snap-type: x proximity;
+    /* Platz fuer den Rollbalken, damit er nichts verdeckt. */
+    padding-bottom: 6px;
+    /* Der Rand darf nicht abschneiden: Die letzte Pille soll bis an
+       die Kante rollen koennen. */
+    margin-inline: -2px; padding-inline: 2px;
+  }
+  .z-leute > .z-person { flex: 0 0 auto; scroll-snap-align: start; }
+  /* Eine schmale Schattierung am rechten Rand sagt: hier geht es
+     weiter. Ohne sie sieht eine abgeschnittene Pille aus wie ein
+     Darstellungsfehler. */
+  .z-band--team .z-leute {
+    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
+    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
+  }
+  /* Das Doppelt-Band: die Kugel kleiner, der Satz enger. Der Inhalt
+     bleibt vollstaendig -- er ist der Grund, warum das Brett ueberhaupt
+     so voll ist. */
+  .doppelband { gap: 10px; padding: 10px 13px; }
+  .doppelband__zahl { min-width: 2.2rem; height: 2.2rem; font-size: .95rem; }
+  .doppelband__text > span { font-size: .82rem; line-height: 1.45; }
+}

workspace/assets/css/chat.css

@@ -2678,6 +2678,29 @@
    klein; gewachsen ist die Flaeche, die den Finger annimmt. */
 @media (pointer: coarse) {
   .chat__kachelknopf { min-width: 44px; min-height: 44px; }
+  /* Die zwei Knoepfe der Aufnahmeleiste standen bei 40 px -- vier zu
+     wenig. Gebaut wurden sie in der Nacht zum 23.09.2026; gefunden hat
+     es der Rundgang am Morgen. In der Aufnahmeleiste ist Platz, also
+     braucht es hier keine Abwaegung: volle Hausgroesse. */
+  .tonleiste__weg,
+  .tonleiste__senden { min-width: 44px; min-height: 44px; }
+
+  /* UNSICHTBAR GROESSER, SICHTBAR KLEIN.
+     Die Abwaegung beim Knopf selbst stimmt: 44 px sichtbar wuerden die
+     halbe Kachel verdecken. Sie war aber nur halb zu Ende gedacht --
+     ein Ziel, das man nicht trifft, hilft auch niemandem.
+
+     Deshalb waechst nicht der Knopf, sondern seine TREFFERFLAECHE:
+     28 + 2x8 = 44 px. Man sieht weiter einen kleinen Kreis in der Ecke
+     und trifft ihn trotzdem mit dem Daumen.
+
+     NUR AM FINGER. Mit einer Maus zielt man genau; eine unsichtbare
+     Flaeche, die acht Pixel ueber den Knopf hinausragt, waere dort
+     keine Hilfe, sondern eine Falle -- man traefe ihn, ohne ihn
+     anvisiert zu haben. */
+  .gif-kachel__weg::after {
+    content: ""; position: absolute; inset: -8px;
+  }
 }
 .chat__kachelknopf:hover { border-color: var(--akzent); }
 .chat__kachelknopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

workspace/assets/css/team.css

@@ -933,8 +933,21 @@
 }
 
 /* ---- Der Weg in den Chat --------------------------------------------- */
+/* 44 px HOCH, UND ZWAR GERECHNET STATT ZUSAMMENGEZAEHLT.
+   Am 22.09.2026 habe ich beim Kartenumbau das Polster von 10 auf
+   9 px gesenkt, um die Karte kompakter zu machen -- und damit den
+   Knopf auf 42 px gedrueckt. Zwei Pixel unter der Hausregel fuer
+   etwas, das man mit dem Finger trifft; gefunden hat es erst der
+   Handy-Rundgang einen Tag spaeter.
+
+   min-height statt einer Polsterzahl: Die Hoehe haengt damit nicht
+   mehr daran, ob jemand spaeter am Polster oder an der Schriftgroesse
+   dreht. flex + center, damit der Text dabei mittig bleibt -- ein
+   Block mit min-height wuerde ihn nach oben kleben. */
 .tschreiben {
-  display: block; margin: 2px 0 14px;
+  display: flex; align-items: center; justify-content: center;
+  min-height: 44px;
+  margin: 2px 0 14px;
   padding: 10px 14px;
   border: 1px solid color-mix(in srgb, var(--r) 34%, transparent);
   border-radius: var(--radius-klein);