Chat: Sprachnachrichten -- und ein stiller Fehler, der jedes Foto betraf

Filipe: "dan will ich auch dass man im chat auch sprachnachrichten und
gifts reinschicken kann. also nur die modis rechte linke hand und
dogfather."

Dieser Commit macht die Sprachnachrichten. Die GIFs kommen als
naechstes -- ich lese "gifts" als GIFs und sage das ausdruecklich,
statt es stillschweigend anzunehmen.

AUFNEHMEN: TIPPEN, NICHT HALTEN
-------------------------------
Gedruecktbleiben ist der bekanntere Weg und der schlechtere: Wer beim
Sprechen verrutscht, verliert die ganze Aufnahme, und mit einer Hand am
Kaffee haelt niemand neunzig Sekunden still. Einmal tippen startet, das
Haekchen schickt, das Kreuz verwirft.

Drei Minuten Hoechstdauer, danach stoppt sie von selbst -- und schickt
NICHT von selbst ab. Wer die Grenze erreicht, hat gerade mitten im Satz
aufgehoert; das ungefragt zu verschicken waere die schlechteste Sekunde
dafuer.

Unter einer Sekunde wird gar nichts geschickt: Das ist ein Versehen,
kein Inhalt.

Die Aufnahmespur wird beim Beenden UND beim Verlassen der Seite
geschlossen. Ein Mikrofon, das offen bleibt, ist ein Vertrauensbruch,
auch wenn niemand zuhoert.

DREI BEHAELTER, WEIL DIE GERAETE DREI LIEFERN
---------------------------------------------
WebM/Opus (Chrome, Android), MP4/AAC (Safari, iPhone), Ogg/Opus
(Firefox). Wer nur einen nimmt, baut eine Funktion, die bei der Haelfte
des Teams stumm bleibt -- und zwar ohne Fehlermeldung.

DER BEHAELTER ALLEIN GENUEGT NICHT: WebM und MP4 tragen genauso gut
Video. Ein Video, das als "Ton" durchginge, landete in einem
Abspielgeraet ohne Bild -- es liefe, man hoerte etwas, und niemand
wuesste, dass die Haelfte fehlt. Die Erkennung sieht deshalb auf die
KENNUNG DER SPUR: Videospur -> abgelehnt, keine Tonspur -> abgelehnt.

Kein MP3: Kein Aufnahmegeraet im Browser erzeugt MP3. Es zuzulassen
hiesse, eine Tuer fuer Musikdateien aufzumachen, nach der niemand
gefragt hat.

"ALSO NUR" IST DER PUNKT
------------------------
Fotos und PDF darf jeder schicken, auch Creator -- das war eine
Entscheidung vom 09.09. und bleibt. Ton nicht. Geprueft wird in der
Route (istTeamDogi), nicht nur im Browser: Ein ausgeblendeter Knopf ist
eine Bitte, abgelehnt wird erst am Server.

Eigene Byte-Grenze fuer Ton (4 MB statt 12). Zwoelf Megabyte sind fuer
ein Foto richtig und fuer eine Sprachnachricht sinnlos -- das waeren
rund fuenfzig Minuten am Stueck.

Die Laenge kommt vom Absender und ist damit eine BEHAUPTUNG, keine
Messung; das steht so an der Spalte. Sie dient nur der Vorschau, bis
das Abspielgeraet die wahre Laenge kennt. Was schuetzt, sind die Bytes.

"FOTO"/"PDF" STAND AN VIER STELLEN
----------------------------------
Dieselbe Aufzaehlung in Gespraechsliste, Zitat, angehefteter Nachricht
und Benachrichtigung -- jede mit ihrem eigenen Fragezeichen-Doppelpunkt.
Mit der Sprachnachricht waeren es vier Aenderungen gewesen, und die
vierte ist die, die man vergisst. Jetzt anhangWort() an einer Stelle.

DER FUND: JEDES FOTO MELDETE "KEINE VERBINDUNG"
-----------------------------------------------
Beim Anfassen derselben Funktion aufgefallen: In `anhangSchicken` stand
seit dem 19.09. `const { nachricht } = e.daten;` -- ein `e`, das es
dort nicht gibt (gemeint war `ergebnis`). Die Zeile wirft, der `catch`
daneben faengt, und der Absender liest:

    "Keine Verbindung -- der Anhang wurde nicht geschickt."

Das Foto war aber da. Es kam Sekunden spaeter ueber den Ereignisstrom
in den Verlauf, mit einer roten Meldung darueber, die das Gegenteil
behauptet -- und der getippte Begleitsatz blieb im Feld stehen, also
schickt man es noch einmal.

WARUM DAS VIER TAGE UNBEMERKT BLIEB, und das ist der lehrreiche Teil:
pruef-chat-anhaenge war die ganze Zeit gruen. Sie schickt mit `fetch`
an die Route -- der bequeme Weg, und er prueft den Server gruendlich.
Sie prueft aber nicht den Weg, den ein Mensch geht. Der Fehler lag
hinter der Bueroklammer, und dort hat nie jemand hingesehen. Dazu
fuehlt er sich wie ein Netzproblem an -- und Netzprobleme sucht niemand
im Programm.

Jetzt geht ein Block durch das Dateifeld selbst und sieht auf das, was
der Mensch danach sieht: steht dort eine Meldung, und ist das Feld
leer? Gegenprobe gefahren -- mit dem alten Fehler wieder eingesetzt
werden genau diese zwei Zeilen rot, mit dem Wortlaut von oben.

Uebernommen wird eine frisch geschickte Nachricht jetzt an EINER
Stelle (nachrichtUebernehmen), fuer Anhang und Sprachnachricht. Zwei
Fassungen waeren zwei Gelegenheiten fuer denselben Fehler.

AUGENSCHONEND
-------------
Kein Blinkpunkt waehrend der Aufnahme -- der ist genau das, was die
Hausregel ausschliesst. Der Punkt atmet langsam (1,8 s, 45 bis 100 %)
und steht bei prefers-reduced-motion ganz still; die laufende Zeit
daneben traegt die Auskunft ohnehin.

Die Farben der Sprachnachricht-Blase kommen aus `--blase-leise`, der
fuer DIESE Blase ausgerechneten leisen Schrift. Eine feste Farbe waere
dieselbe Wette, die am 22.09. beim Loeschknopf 1,91:1 auf Babyblau
ergeben hat.

GEPRUEFT
--------
pruef-chat-anhaenge: 86 Pruefungen, 0 Fehler (vorher 60).
Aufgenommen wird mit MediaRecorder im echten Browser ueber den echten
Knopf, mit Chromiums erfundenem Mikrofon. Damit prueft der Abschnitt
nebenbei das, was keine gebastelte Datei pruefen koennte: ob die
Erkennung im Server versteht, was ein Browser wirklich erzeugt
(gemessen: 35 829 Bytes audio/webm, 2743 ms).

  * DogFather sieht den Mikrofonknopf, der Scout nicht
  * der Scout schickt dieselbe Aufnahme an der Oberflaeche vorbei:
    403, und nichts davon ist gespeichert
  * ein Video im Ton-Behaelter: 415
  * Laenge, Vorlesewort, Bedienbarkeit, preload=metadata, Breite
  * "Sprachnachricht" steht in der Gespraechsliste statt einer leeren
    Zeile

pruef-chat, pruef-chat-optik: unveraendert gruen.

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

workspace/assets/css/chat.css

@@ -2703,3 +2703,138 @@
       0  Klammer, Feld, Emoji, Senden -- die eigentliche Zeile */
 .chat__eingabe .antwort-leiste { order: -2; }
 .chat__eingabe .textform { order: -1; flex: 1 0 100%; margin-bottom: 2px; }
+
+/* =====================================================================
+   SPRACHNACHRICHTEN (23.09.2026)
+
+   Filipe: „dan will ich auch dass man im chat auch sprachnachrichten
+   und gifts reinschicken kann. also nur die modis rechte linke hand
+   und dogfather."
+
+   AUGENSCHONEND HEISST HIER: KEIN BLINKEN. Der naheliegende rote
+   Blinkpunkt während der Aufnahme ist genau das, was die Hausregel
+   ausschließt („keine aggressiven Flacker-/Strobe-Effekte"). Der Punkt
+   atmet stattdessen langsam (1,8 s, zwischen 45 % und 100 %
+   Deckkraft) -- man sieht, dass etwas läuft, ohne dass es zieht. Und
+   bei `prefers-reduced-motion` steht er ganz still; dann trägt die
+   laufende Zeit daneben die Auskunft allein, die sie ohnehin trägt.
+   ===================================================================== */
+
+/* ---- Der Mikrofonknopf in der Schreibzeile ------------------------- */
+.chat__ton {
+  flex: none;
+  display: inline-flex; align-items: center; justify-content: center;
+  /* 40 px wie die Büroklammer daneben -- zwei Knöpfe nebeneinander in
+     zwei Größen sehen aus, als hätte einer Vorrang. */
+  width: 40px; height: 40px;
+  border: 0; border-radius: 50%;
+  background: transparent;
+  color: var(--text-leise);
+  cursor: pointer;
+  transition: background var(--tempo, .18s) ease, color var(--tempo, .18s) ease;
+}
+.chat__ton svg {
+  width: 21px; height: 21px;
+  fill: none; stroke: currentColor; stroke-width: 1.7;
+  stroke-linecap: round; stroke-linejoin: round;
+}
+.chat__ton:hover { background: rgba(255, 255, 255, .07); color: var(--text); }
+.chat__ton:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
+.chat__ton:disabled { opacity: .45; cursor: default; }
+/* Läuft die Aufnahme, ist derselbe Knopf der Abschick-Knopf. Dass er
+   seine Bedeutung wechselt, muss man SEHEN. */
+.chat__ton[data-laeuft="ja"] {
+  background: color-mix(in srgb, var(--akzent) 22%, transparent);
+  color: color-mix(in srgb, var(--akzent) 60%, #ffffff);
+}
+
+/* ---- Die Leiste während der Aufnahme ------------------------------- */
+.tonleiste {
+  display: flex; align-items: center; gap: 10px;
+  margin: 0 0 8px;
+  padding: 9px 12px;
+  border: 1px solid color-mix(in srgb, var(--akzent) 30%, transparent);
+  border-radius: var(--radius-klein, 12px);
+  background: color-mix(in srgb, var(--akzent) 10%, rgba(12, 18, 28, .92));
+}
+.tonleiste__punkt {
+  flex: none; width: 10px; height: 10px; border-radius: 50%;
+  background: #e0736d;
+  animation: ton-atmen 1.8s ease-in-out infinite;
+}
+@keyframes ton-atmen {
+  0%, 100% { opacity: 1; }
+  50%      { opacity: .45; }
+}
+.tonleiste__zeit {
+  flex: none;
+  font-variant-numeric: tabular-nums;
+  font-size: 1.02rem; font-weight: 700;
+  color: var(--text);
+  /* Feste Breite: Ohne sie springt alles rechts davon bei jedem
+     Zehnerwechsel der Sekunden. */
+  min-width: 3.1ch;
+}
+.tonleiste__wort {
+  flex: 1 1 auto;
+  font-size: .84rem; color: var(--text-leise);
+}
+.tonleiste__weg,
+.tonleiste__senden {
+  flex: none;
+  display: inline-flex; align-items: center; justify-content: center;
+  /* 40 px, damit ein Daumen beides trifft, ohne das Falsche zu
+     erwischen -- hier kostet ein Fehlgriff die ganze Aufnahme. */
+  width: 40px; height: 40px;
+  border: 1px solid var(--rand);
+  border-radius: 50%;
+  background: transparent;
+  font-size: 1rem; line-height: 1;
+  cursor: pointer;
+}
+.tonleiste__weg { color: var(--text-leise); }
+.tonleiste__weg:hover { color: var(--text); border-color: var(--text-leise); }
+.tonleiste__senden {
+  color: color-mix(in srgb, var(--akzent) 55%, #ffffff);
+  border-color: color-mix(in srgb, var(--akzent) 45%, transparent);
+  background: color-mix(in srgb, var(--akzent) 16%, transparent);
+}
+.tonleiste__senden:hover { background: color-mix(in srgb, var(--akzent) 26%, transparent); }
+.tonleiste__weg:focus-visible,
+.tonleiste__senden:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
+
+@media (prefers-reduced-motion: reduce) {
+  .tonleiste__punkt { animation: none; }
+}
+
+/* ---- Die Sprachnachricht in der Blase ------------------------------ */
+.chat-ton {
+  display: grid; gap: 6px;
+  /* So breit, dass der Schieber des Abspielgeräts bedienbar ist, und
+     nicht breiter als eine Blase am Handy. */
+  width: min(260px, 100%);
+}
+.chat-ton__zeile {
+  display: flex; align-items: baseline; gap: 8px;
+  font-size: .78rem;
+  /* DIE FARBE DER BLASE, NICHT EINE FESTE. Jede Blase trägt die Farbe,
+     die ihr Absender ausgesucht hat -- `--blase-leise` ist die dafür
+     ausgerechnete leise Schrift. Dieselbe Überlegung wie bei der
+     Rudel-Marke weiter oben, und derselbe Fehler, der am 22.09. beim
+     Löschknopf 1,91:1 auf Babyblau ergeben hat. */
+  color: var(--blase-leise, var(--text-leise));
+}
+.chat-ton__marke { font-weight: 600; letter-spacing: .02em; }
+.chat-ton__dauer { font-variant-numeric: tabular-nums; }
+.chat-ton__geraet {
+  width: 100%; height: 36px;
+  display: block;
+  border-radius: 999px;
+}
+.chat-ton[data-kaputt="ja"] .chat-ton__geraet { display: none; }
+
+@media (forced-colors: active) {
+  .tonleiste { border: 1px solid CanvasText; }
+  .tonleiste__punkt { background: CanvasText; }
+  .chat__ton[data-laeuft="ja"] { border: 2px solid Highlight; }
+}