/* ============================================================
   Kumpel — der kleine Sprecher, der auf der Buehne steht
   ============================================================
   KEIN KASTEN. Die erste Fassung sass in einem gerahmten Feld mit Schatten und
   hing am FENSTER statt an der Buehne - und genau so sah sie aus: ein Aufkleber
   auf dem Bild. Jetzt haengt er IN der Buehne und bringt seinen ganzen Umriss
   selbst mit: kein Rahmen, kein Grund, kein Schatten. Was hier steht, ist nur
   die Huelle; gezeichnet wird alles in kumpel.js.
   Nur wenn eine Antwort gar keine Bilder hat, faellt die Buehne auf Breite 0
   zusammen; dann zieht er in den Kasten um. */

.kumpel {
  position: absolute;
  z-index: 40;
  width: 150px; height: 150px;
  /* Kein Rand, kein Grund, kein Schatten: die Kugel steckt im SVG, und ihre
     Kante zeichnet der Browser als Kreis - das ist die saubere Kante, die eine
     WebGL-Silhouette gegen einen durchsichtigen Grund nie bekommt. */
  border: 0; box-shadow: none; background: none;
  opacity: 0;
  pointer-events: none;
  /* NUR die Blende wird ueberblendet. Ort, Groesse und Verformung liegen alle
     im transform und werden je Bild gerechnet - ein CSS-Uebergang daneben waere
     ein zweiter Antrieb am selben Ding, und genau das hat geruckelt. */
  left: 0; top: 0; transform-origin: 0 0;
  transition: opacity .28s ease;
}
.kumpel.da { opacity: 1; }

/* ---- Der Anstrich: die Figur statt der Scheibe ----
   Ein Scherz-Schalter in derselben Reihe wie Butterhund und Subway Surfers,
   aber mit einem Unterschied, den man kennen muss: die beiden sind Hintergrund
   und koennen nichts kaputtmachen (`pointer-events: none`), dieser hier
   ersetzt den Knopf, der den Verlauf oeffnet. Der Griff bleibt deshalb genau
   dort, wo er war - getauscht wird nur, was im Feld gezeichnet ist. */
.kumpel .k-anime { display: none; }
.kumpel.anime .k-anime { display: block; }
.kumpel.anime .k-ball,
.kumpel.anime .k-koerper path { display: none; }
/* Muss er einmal auf einem Bild stehen, tritt er zurueck - aber nur mit seiner
   MASSE. Die ganze Figur auf halbe Deckkraft zu setzen hat sie gegen die Buehne
   auf 1,9:1 gedrueckt, und dann ist er kaum noch da. Jetzt wird nur die Fuellung
   durchsichtig, das Bild darunter liest sich also durch, und das Gesicht bleibt
   voll stehen: das ist ohnehin der Teil, der etwas sagt. */
.kumpel.da.knapp .k-ball { fill-opacity: .42; }
/* NIE durchlaessig fuer Zeiger: die Buehne wird gezogen und gezoomt, und ein
   undurchlaessiges Feld von 150 px darauf ist ein totes Stueck Flaeche. Wer das
   Vorlesen anhalten will, hat den Schalter am Beitrag. */
.kumpel svg { display: block; width: 100%; height: 100%; overflow: visible; }

@media (prefers-reduced-motion: reduce) {
  .kumpel { transition: opacity .01s linear; }
}

@media (max-width: 860px) {
  .kumpel { width: 112px; height: 112px; }
}

/* Im Kino ist er nicht mehr die Randfigur neben einem Text, sondern der
   Sprecher auf einer ganzen Buehne. Steht ein Bild da, weicht er weiter aus wie
   immer - nur eine Nummer groesser. */
.pane-dialog.lima-kino .kumpel { width: 210px; height: 210px; }
@media (max-width: 860px) {
  .pane-dialog.lima-kino .kumpel { width: 132px; height: 132px; }
}

/* Steht er auf einem Bild, wird seine MASSE durchsichtig - die Wolke gehoert
   dazu. Gedimmt wird die Fuellung, nicht die Deckkraft der Gruppe: die fuehrt
   den Auftritt und darf hier keinen zweiten Schreiber bekommen. */
.kumpel.da.knapp .k-wolke circle { fill-opacity: .42; }

/* ---- Verdichten: HIER gehoert das Druecken hin, nicht an den Knopf ----
   Getragen wird es vom <svg>, NICHT von .kumpel selbst: Ort, Groesse und
   HIER STAND EINE ZWEITE VERDICHTUNGS-BEWEGUNG, und sie ist der Fehler, den
   Karl am 07.09.2026 gemeldet hat: eine endlose CSS-Kennlinie auf dem svg,
   `scaleX(0.82) scaleY(1.15)` im Wechsel, also schmal und hoch.
   Drei Dinge stimmten daran nicht.
   Erstens lief sie NEBEN der Bewegung, die kumpel.js je Bild rechnet - zwei
   Antriebe an derselben Figur, genau das, wovor der Absatz darueber warnt.
   Zweitens zog sie in die Gegenrichtung: schmal und hoch ist Verkrampfen, und
   deswegen war die Figur wieder in derselben Not, aus der sie am 02.09.2026
   herausgeholt wurde.
   Drittens - und das war das Sichtbare - haengt sie an einer KLASSE und laeuft
   `infinite`. Bleibt die Klasse stehen, hoert die Bewegung nie wieder auf.
   Und sie blieb stehen: das Abschalten in der Anwendung galt nur, wenn der
   Chat, der sich gerade geaendert hat, auch der offene war.
   Das Verdichten zeichnet jetzt allein kumpel.js. */