Reaction: Material statt Kaesten, Spende in der Mitte, Gaeste werden gefragt

Nach Filipes sieben Bildschirmfotos vom 07.10.2026. Sieben Wuensche,
und einer davon ("alles viel hochwertiger") betrifft alle anderen --
deshalb steht das Fundament zuerst und nicht am Ende.

DAS AUSSEHEN HAT EINEN WERKSTOFF. Jede Flaeche sagt jetzt, ob sie oben
oder unten liegt: Was obenauf liegt, bekommt oben eine helle Kante und
darunter einen Schatten; was vertieft ist, genau umgekehrt. Dazwischen
gibt es nichts mehr. Vorher stand im ganzen Pult zweimal eine
Lichtkante und sonst nirgends -- genau deshalb sahen diese zwei Stellen
gut aus und alles daneben danebengestellt. Dazu: jeder Knopf senkt sich
beim Druecken, jedes Feld ist ein Loch und kein Kasten, und wer mit der
Tastatur bedient, wird zum ersten Mal ueberhaupt gesehen.

UND EIN FUND DABEI: Die drei Kacheln des Regieplatzes hiessen in der
HTML anders als im Stilblatt (kachel--laeuft gegen regiekachel--laeuft,
regieregiekachel__kopf gegen regiekachel__kopf). Die Aufteilung "links
was laeuft, rechts was man eintraegt" hat damit NIE gegriffen -- und
mess-reaktion hat den falschen Zustand gemessen und gruen gemeldet,
weil sie gegen die HTML geschrieben war.

DIE SPENDENKARTE STEHT IN DER MITTE und kommt aus der Tiefe nach vorn.
Das dreht eine Entscheidung vom 28.09. um ("sie deckt nie die Mitte
zu"); die Begruendung war richtig und ist es noch -- sie schuetzt das
Video, und Filipe sieht die Spende als das, was in dem Augenblick
zaehlt. Der alte Platz bleibt einen Knopf weit weg und gilt fuer Saal
UND OBS-Tafel. Die Karte besteht dafuer aus zwei Teilen: `opacity`
unter 1 zwingt ein Element auf `transform-style: flat`, eine Karte mit
Deckkraft-Uebergang waere also genau waehrend des Hereinkommens flach
und spraenge am Ende in einem Bild in die Tiefe.

FERTIGE SAETZE GEHEN SOFORT INS BILD. Der Browser schickt nur die
Kennung, den Text holt der Server -- deshalb darf hier die Bestaetigung
entfallen und beim freien Text nicht. Zwei Schranken bleiben: sofort
nur mit einem der vier Knopfbetraege (Filipes Ansage galt dem SATZ,
nicht der Summe), und GEZEIGT IST NICHT GEBUCHT -- die Dogen gibt es
erst nach dem Tipp der Leitung, sonst stellt sich jeder seine eigene
Waehrung aus.

WER GESPENDET HAT, GLAENZT IM CHAT -- je nach Hoehe. Die Dauer haengt
an der Stufe und nicht an einer zweiten Leiter; 0 heisst "gar nicht".

GAESTE WERDEN GEFRAGT, NICHT GEHOLT. Vorher sprang die Kamera eines
Zuschauers an, sobald jemand "Dazuholen" drueckte -- er hat es daran
gemerkt, dass er sich selbst sah. Jetzt gibt es einen Vorraum: eigenes
Bild, Pegel, Kamera und Mikro vorwaehlen, Geraete waehlen, dann "Dabei
sein" oder "Lieber nicht". Zwei Minuten Frist, und sie verfaellt
SICHTBAR -- eine verschwundene Zeile sieht fuer den Host aus wie ein
Verklicker.

DAS MISCHPULT. Hier stand fest `echoCancellation: true,
noiseSuppression: true`. Fuer ein Laptopmikrofon richtig, ueber einem
RODECaster falsch: Das Pult hat Gate, Kompressor und EQ schon gemacht,
und die Echo-Unterdrueckung legt sich danach als zweite Automatik
darueber und duckt, sobald von der Gegenseite Ton kommt -- genau das
Pumpen vom 14.09. Jetzt: Geraetewahl fuer Mikro, Kamera und Ausgabe
(auch fuer Gaeste), ein Pultmodus, und darunter GEMESSEN, was wirklich
ankommt. Mit und ohne Pult.

DAS ZWEITE VIDEO war nie gesperrt -- es war nur unsichtbar. Jetzt
stehen Vorschaubild, Titel und die gemerkte Stelle da, "Jetzt wechseln"
auch von hier aus, und aus der Warteschlange legt ein Knopf eines
bereit.

UND EIN FUND AUF DEM BILDSCHIRMFOTO: Das Band "Ton einschalten" lag auf
derselben Hoehe wie die Senderleiste. Bei vier Knoepfen reichte die
Leiste bis zur Mitte -- vom Mikro-Knopf war nur noch ein "t" zu sehen.
Das war schon vorher so; der fuenfte Knopf hat es sichtbar gemacht.
Dieselbe Lehre wie am 06.09.: keine neue Zahl suchen, sondern die
Begegnung unmoeglich machen. mess-reaktion misst das jetzt als
UEBERLAPPUNG.

GEPRUEFT: pruef-reaktion 423 -> 478 (0 Fehler), pruef-spenden 172 -> 215
(0), pruef-reaktion-schmal 44 (0), pruef-tippziele 13 (0), dazu gruen:
pruef-css-klassen, pruef-alle-wege, pruef-haus-trennung, pruef-agentur,
pruef-deutsche-texte. Keine Zahl ist gefallen.

Drei Doppelungen hat erst das Pruefen gefunden: `satz_unbekannt` gab es
zweimal (Muenzsatz), `saetze` im Spendenstand war belegt (ebenfalls
Muenzsaetze), und `glanz_minuten` waere in einem frischen Haus immer 0
geblieben -- die Spalte kam per ALTER TABLE, und das laeuft VOR dem
Anlegen der Werksstufen.

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

workspace/assets/css/spendenkarte.css

@@ -1,28 +1,151 @@
 /* =====================================================================
-   DIE SPENDENKARTE (28.09.2026)
+   DIE SPENDENKARTE (28.09.2026, Mitte und Tiefe am 08.10.2026)
 
    Eigenes Stilblatt, weil dieselbe Karte an zwei Orten laeuft: in der
-   Reaction-Seite und -- spaeter -- als eigene Seite fuer OBS und
+   Reaction-Seite und als eigene Seite (`tafel.html`) fuer OBS und
    TikTok Studio. Zweimal gestaltet hiesse: Bei der naechsten
    Aenderung sieht sie an einem der beiden Orte anders aus, und man
    merkt es erst im Livestream.
 
-   SIE IST GROSS, KURZ UND WEG. Wer etwas gibt, soll es sehen; wer
-   zusieht, soll das Video nicht verlieren. Deshalb kommt sie von der
-   Seite, steht ein paar Sekunden am Rand und geht wieder -- sie
-   deckt nie die Mitte zu.
+   ---------------------------------------------------------------------
+   SIE STEHT JETZT IN DER MITTE (08.10.2026)
+
+   Filipe: „die spende soll auch in der mitte vom bild angezeigt
+   werden. es soll richtig geil angezeigt werden so richtig in 3D
+   modus."
+
+   Hier stand bis heute das Gegenteil, woertlich: „sie deckt nie die
+   Mitte zu." Diese Begruendung war richtig und ist es immer noch —
+   nur beantwortet sie eine andere Frage. Sie schuetzt das VIDEO.
+   Filipe sieht die Spende als das, was in diesem Augenblick zaehlt,
+   und das ist seine Entscheidung.
+
+   DER ALTE PLATZ BLEIBT TROTZDEM ERHALTEN und ist einen Knopf weit
+   weg („Gestaltung → Wo die Karte steht"). Bei einem Film, bei dem
+   ein Deckel in der Mitte stoert, ist er der bessere — und eine
+   Festlegung, die man nicht zuruecknehmen kann, ist keine
+   Einstellung.
+
+   ---------------------------------------------------------------------
+   WARUM DIE KARTE AUS ZWEI TEILEN BESTEHT
+
+   Aussen `.spendenkarte-auftritt`, innen `.spendenkarte`. Das ist
+   kein Umweg, sondern die einzige Form, in der echte Tiefe
+   funktioniert:
+
+   `opacity` unter 1, `filter`, `backdrop-filter`, `overflow: hidden`
+   und `mask` zwingen ein Element laut CSS-Transforms-2 auf
+   `transform-style: flat`. Eine Karte, die beim Hereinkommen ihre
+   Deckkraft aendert, ist in genau dieser Zeit also FLACH — und
+   sobald die Deckkraft 1 erreicht, springt sie in einem einzigen
+   Bild in die Tiefe. Dieses Springen sieht man.
+
+   Also: Die Huelle macht das Erscheinen (Deckkraft + Flug aus der
+   Tiefe), die Karte darin macht die Form. Beide haben ihre eigene
+   Umformung, und sie setzen sich durch die Verschachtelung
+   zusammen, statt sich gegenseitig zu ueberschreiben.
+
+   ---------------------------------------------------------------------
+   EINE NACH DER ANDEREN
+
+   Zwei Spenden gleichzeitig sind keine Seltenheit — wenn es im Live
+   gut laeuft, kommen drei in zehn Sekunden. Uebereinander gelegt
+   waere keine mehr lesbar, und ausgerechnet die groesste ginge
+   unter. Die Schlange steht in `spendenkarte.js`.
+   ===================================================================== */
+
+/* =====================================================================
+   DER KASTEN — UND WO DARIN DIE KARTE STEHT
+
+   `perspective` steht HIER und nicht an der Karte: Ein Fluchtpunkt
+   gehoert zum Raum, nicht zum Gegenstand darin. Saesse er an der
+   Karte, haette jede Karte ihren eigenen, und zwei nacheinander
+   kaemen aus verschiedenen Richtungen.
+
+   1200 Pixel sind gemessen und nicht gegriffen: Darunter kippt die
+   Karte beim Hereinkommen so stark, dass die Schrift auf der
+   oberen Haelfte zerlaeuft; darueber ist von der Tiefe nichts mehr
+   zu sehen und man haette sie auch weglassen koennen.
    ===================================================================== */
 .spendentafel {
   position: absolute;
-  left: 0; right: 0; bottom: 84px;
+  inset: 0;
   z-index: 45;
-  display: grid; gap: 10px;
-  justify-items: start;
-  padding: 0 18px;
+  display: grid;
+  gap: 10px;
+  padding: 18px;
   pointer-events: none;
+  perspective: 1200px;
+  perspective-origin: 50% 44%;
 }
 
-/* ==== DIE GROESSE ==================================================
+/* MITTE: die Karte steht im Bild, nicht daneben. */
+.spendentafel[data-platz="mitte"] {
+  align-content: center;
+  justify-items: center;
+}
+/* RAND: der alte Platz — unten links, ueber dem unteren Bildrand.
+   Die 84 Pixel sind der Abstand zur Transportleiste; eine Karte
+   darauf waere halb verdeckt. */
+.spendentafel[data-platz="rand"] {
+  align-content: end;
+  justify-items: start;
+  padding: 0 18px 84px;
+}
+
+/* =====================================================================
+   DIE HUELLE — SIE MACHT DAS ERSCHEINEN
+   ===================================================================== */
+.spendenkarte-auftritt {
+  /* Damit die Tiefe durch die Huelle hindurch bis zur Karte reicht.
+     Ohne das projiziert der Browser die Karte in die Ebene der
+     Huelle, und jede Drehung darin sieht aus wie eine Verzerrung. */
+  transform-style: preserve-3d;
+  max-width: 100%;
+  min-width: 0;
+
+  /* ==== DER FLUG AUS DER TIEFE ====================================
+     Von weit hinten, leicht nach hinten gekippt, nach vorn auf
+     ihren Platz. `translate3d` und `rotateX` rechnet der Browser auf
+     der Grafikkarte — alles andere (Breite, Rand, Abstand) laesst
+     das Bild ruckeln, und ein ruckelnder Dank ist schlimmer als
+     keiner.
+
+     Die Kurve (.16, 1, .3, 1) bremst am Ende sehr weich aus. Eine
+     lineare Bewegung sieht aus wie ein Dia, das eingeschoben wird;
+     diese sieht aus wie etwas, das ankommt. */
+  opacity: 0;
+  transform: translate3d(0, 14px, -360px) rotateX(26deg) scale(.94);
+  transition:
+    opacity .42s ease,
+    transform .62s cubic-bezier(.16, 1, .3, 1);
+}
+.spendenkarte-auftritt[data-da="ja"] {
+  opacity: 1;
+  transform: none;
+}
+/* Beim Gehen faellt sie nach hinten weg statt einfach zu
+   verblassen — dieselbe Richtung, aus der sie kam. */
+.spendenkarte-auftritt[data-da="nein"] {
+  opacity: 0;
+  transform: translate3d(0, -10px, -220px) rotateX(-14deg) scale(.97);
+  transition:
+    opacity .34s ease,
+    transform .42s cubic-bezier(.4, 0, .9, .5);
+}
+
+/* Am Rand kommt sie weiterhin von der Seite. Das ist dort richtig:
+   Eine Karte, die am unteren Bildrand aus der Tiefe geflogen kommt,
+   waere eine grosse Bewegung fuer eine kleine Nebensache. */
+.spendentafel[data-platz="rand"] .spendenkarte-auftritt {
+  transform: translate3d(-28px, 0, 0) scale(.96);
+}
+.spendentafel[data-platz="rand"] .spendenkarte-auftritt[data-da="nein"] {
+  transform: translate3d(-18px, 0, 0) scale(.98);
+}
+
+/* =====================================================================
+   DIE GROESSE
 
    Filipe: „auch so dass ich das anders gestalten kann oder die
    größe verändern kann."
@@ -33,15 +156,17 @@
    Faktor, und die ganze Karte wächst gleichmäßig mit.
 
    Der naheliegende Weg wäre `transform: scale()` gewesen. Der geht
-   hier nicht: Die Karte kommt mit `transform: translateX()` herein,
-   und zwei `transform` an derselben Stelle schließen einander aus —
-   entweder die Größe oder die Bewegung. Außerdem skaliert `scale()`
-   auch die Schriftglättung mit, und Text wird dabei sichtbar
-   matschig. Eine Schriftgröße tut das nicht. */
+   hier nicht: `scale()` skaliert auch die Schriftglättung mit, und
+   Text wird dabei sichtbar matschig. Eine Schriftgröße tut das
+   nicht. (Bis zum 08.10. stand hier zusätzlich, dass `transform`
+   schon für die Bewegung gebraucht wird — das stimmt seit der
+   Huelle nicht mehr, der erste Grund genügt aber allein.)
+   ===================================================================== */
 .spendenkarte {
   --sp-farbe: #8ec9ff;
   --sp-gross: 1;
   font-size: calc(1rem * var(--sp-gross));
+  position: relative;
   display: flex; align-items: center; gap: .875em;
   max-width: min(30em, 78%);
   padding: .8125em 1.25em .8125em .875em;
@@ -57,21 +182,133 @@
     inset 0 1px 0 color-mix(in srgb, var(--sp-farbe) 40%, transparent);
   backdrop-filter: blur(14px) saturate(1.25);
   -webkit-backdrop-filter: blur(14px) saturate(1.25);
-  /* Die Karte kommt von links herein. `translate` und `opacity`
-     rechnet der Browser auf der Grafikkarte -- alles andere
-     (Breite, Rand, Abstand) laesst das Bild ruckeln, und ein
-     ruckelnder Dank ist schlimmer als keiner. */
-  opacity: 0;
-  transform: translateX(-28px) scale(.96);
-  transition: opacity .45s ease, transform .45s cubic-bezier(.22, 1, .3, 1);
 }
-.spendenkarte[data-da="ja"] { opacity: 1; transform: none; }
+
+/* =====================================================================
+   IN DER MITTE WIRD AUS DER ZEILE EIN AUFSTELLER (08.10.2026)
+
+   Eine waagerechte Karte ist am Bildrand richtig: Sie nimmt wenig
+   Höhe und liest sich im Vorbeischauen. In der Mitte des Bildes
+   wirkt dieselbe Form wie ein Hinweisbalken — man schiebt sie
+   gedanklich weg.
+
+   Hier steht sie deshalb als Säule: Münze oben, Betrag groß darunter,
+   dann wer, dann was er geschrieben hat. Das ist die Reihenfolge,
+   in der man es wissen will, und es ist die Form, die jeder von
+   Spenden-Einblendungen kennt.
+   ===================================================================== */
+.spendentafel[data-platz="mitte"] .spendenkarte {
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: .45em;
+  /* Grösser als am Rand — hier IST sie der Augenblick. Der Faktor
+     der Stufe multipliziert weiter mit. */
+  font-size: calc(1.3rem * var(--sp-gross));
+  max-width: min(20em, 88%);
+  padding: 1.45em 1.6em 1.5em;
+  border-radius: 1.4em;
+  background:
+    /* Ein Lichtkegel von oben statt eines Farbverlaufs von links.
+       Er macht aus der Fläche einen Körper, der angestrahlt wird. */
+    radial-gradient(120% 86% at 50% -8%,
+      color-mix(in srgb, var(--sp-farbe) 34%, transparent), transparent 62%),
+    linear-gradient(180deg, rgba(18, 15, 28, .94), rgba(8, 6, 14, .96));
+  box-shadow:
+    /* Der Hof. Er liegt WEIT draußen und sehr schwach — ein harter
+       Schein um eine Karte in der Bildmitte wäre genau das Grelle,
+       das in diesem Haus nirgends vorkommt. */
+    0 0 160px -40px var(--sp-farbe),
+    0 42px 80px -30px #000,
+    inset 0 1px 0 color-mix(in srgb, var(--sp-farbe) 52%, transparent),
+    inset 0 -1px 0 rgba(0, 0, 0, .5);
+}
+
+/* ---- Die Kante, die den Körper macht -------------------------------
+   Ein einzelner Rahmen ist eine Linie. Zwei Linien mit einem
+   Zwischenraum sind eine KANTE — und eine Kante hat eine Dicke, also
+   eine Tiefe. Das ist derselbe Trick wie an einem Möbelstück: Man
+   sieht nicht das Holz, man sieht die Fase. */
+.spendentafel[data-platz="mitte"] .spendenkarte::before {
+  content: "";
+  position: absolute;
+  inset: 1px;
+  border-radius: inherit;
+  border: 1px solid color-mix(in srgb, var(--sp-farbe) 16%, transparent);
+  pointer-events: none;
+}
+
+/* ---- Der Lichtstreifen ----------------------------------------------
+   Er läuft EINMAL über die Karte, von links unten nach rechts oben,
+   und ist danach weg.
+
+   EINMAL UND NICHT IN EINER SCHLEIFE. Ein Glanz, der alle zwei
+   Sekunden wiederkommt, ist ein Blinken — und daneben läuft ein
+   Video. Ein einziger Streifen sagt „das hier ist gerade passiert";
+   ein wiederkehrender sagt gar nichts mehr und belastet die Augen.
+
+   `overflow: hidden` steht am Streifen und NICHT an der Karte: An
+   der Karte würde es sie flachdrücken (siehe der Kopf dieser Datei)
+   und obendrein den Hof abschneiden. */
+.spendentafel[data-platz="mitte"] .spendenkarte::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  overflow: hidden;
+  pointer-events: none;
+  background:
+    linear-gradient(104deg,
+      transparent 38%,
+      rgba(255, 255, 255, .13) 48%,
+      rgba(255, 255, 255, .2) 50%,
+      rgba(255, 255, 255, .13) 52%,
+      transparent 62%);
+  background-size: 260% 100%;
+  background-repeat: no-repeat;
+  background-position: 170% 0;
+  animation: sp-glanz 1.25s .34s cubic-bezier(.3, .1, .2, 1) 1 both;
+}
+@keyframes sp-glanz {
+  from { background-position: 170% 0; }
+  to   { background-position: -70% 0; }
+}
+
+/* ---- Das sanfte Wiegen ----------------------------------------------
+   Zweieinhalb Grad, hin und her, in neun Sekunden. Das ist so
+   langsam, dass man es nicht als Bewegung liest, sondern als Tiefe:
+   Das Licht auf der Kante wandert, und erst daran sieht das Auge,
+   dass die Karte im Raum steht und nicht auf dem Glas klebt.
+
+   Sie sitzt an der KARTE und nicht an der Hülle: Die Hülle macht das
+   Erscheinen, und zwei Bewegungen an derselben Eigenschaft
+   überschreiben einander (die spätere gewinnt vollständig — sie
+   mischen sich nicht).
+
+   Die Verzögerung von 0,8 s ist der Flug: Während die Hülle noch
+   unterwegs ist, ist sie wegen ihrer Deckkraft ohnehin flach, und
+   eine Drehung darin wäre dort eine Verzerrung. */
+.spendentafel[data-platz="mitte"] .spendenkarte {
+  animation: sp-wiegen 9s .8s ease-in-out infinite;
+}
+@keyframes sp-wiegen {
+  0%   { transform: rotateY(-2.5deg) rotateX(1.1deg); }
+  50%  { transform: rotateY(2.5deg)  rotateX(-1.1deg); }
+  100% { transform: rotateY(-2.5deg) rotateX(1.1deg); }
+}
 
 .spendenkarte__bild {
   flex: none;
   width: 3.375em; height: 3.375em;
   display: grid; place-items: center;
 }
+.spendentafel[data-platz="mitte"] .spendenkarte__bild {
+  width: 4.6em; height: 4.6em;
+  /* Die Münze wirft einen eigenen Schatten auf die Karte. Damit
+     liegt sie DARAUF und ist nicht hineingedruckt — das ist die
+     billigste und zugleich deutlichste Tiefe, die es gibt. */
+  filter: drop-shadow(0 .22em .3em rgba(0, 0, 0, .66));
+}
 .spendenkarte__bild svg { width: 100%; height: 100%; }
 .spendenkarte__bild img {
   width: 100%; height: 100%;
@@ -83,11 +320,41 @@
 }
 
 .spendenkarte__text { display: grid; gap: 1px; min-width: 0; }
+.spendentafel[data-platz="mitte"] .spendenkarte__text {
+  gap: .2em;
+  justify-items: center;
+  width: 100%;
+}
+
+/* ==== IN DER MITTE STEHT DER BETRAG OBEN ==========================
+
+   Am Rand liest man die Karte wie eine Zeile: wer, wie viel. In der
+   Mitte ist sie ein Augenblick, und darin ist die ZAHL das Erste —
+   so macht es jede Einblendung, die man kennt, und aus gutem Grund:
+   Sie steht drei Sekunden da, und in drei Sekunden liest niemand
+   zwei Zeilen von oben nach unten.
+
+   DAS DOKUMENT BLEIBT, WIE ES IST. `order` ändert nur die Anzeige;
+   ein Vorleseprogramm hört weiterhin „Lenny, 2,5 Dogen, Starke
+   Runde, …" und damit den Satz, der sich von selbst versteht. Die
+   Reihenfolge im Quelltext umzubauen hätte die Karte am Rand
+   mitgedreht — zwei Fassungen desselben Dinges, und eine davon
+   wäre nach dem nächsten Umbau falsch. */
+.spendentafel[data-platz="mitte"] .spendenkarte__betrag { order: 1; }
+.spendentafel[data-platz="mitte"] .spendenkarte__wer    { order: 2; }
+.spendentafel[data-platz="mitte"] .spendenkarte__stufe  { order: 3; }
+.spendentafel[data-platz="mitte"] .spendenkarte__gruss  { order: 4; }
 .spendenkarte__wer {
   font-size: .8em; font-weight: 700;
   letter-spacing: .03em;
   color: color-mix(in srgb, var(--sp-farbe) 30%, #ffffff);
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  max-width: 100%;
+}
+.spendentafel[data-platz="mitte"] .spendenkarte__wer {
+  font-size: .86em;
+  letter-spacing: .09em; text-transform: uppercase;
+  opacity: .9;
 }
 .spendenkarte__betrag {
   font-size: 1.62em; font-weight: 900;
@@ -97,12 +364,22 @@
      einen eigenen Schein. */
   text-shadow: 0 0 22px color-mix(in srgb, var(--sp-farbe) 60%, transparent);
 }
+.spendentafel[data-platz="mitte"] .spendenkarte__betrag {
+  font-size: 2.15em;
+  /* Zwei Schatten: einer eng und dunkel (er hebt die Ziffern von der
+     Fläche ab), einer weit und farbig (er ist der Schein). Mit nur
+     dem farbigen verschwimmt die Zahl auf hellem Grund. */
+  text-shadow:
+    0 .04em .06em rgba(0, 0, 0, .55),
+    0 0 .7em color-mix(in srgb, var(--sp-farbe) 62%, transparent);
+}
+
 /* ==== ZAHL, ZEICHEN UND WORT GEHOEREN ZUSAMMEN =====================
 
    Filipe: „man soll nie die summe sehen sondern die dogen auch mit
    dem symbol."
 
-   Das Stueck steht auf der Karte, in den Listen im Pult, an den
+   Das Stueck steht auf der Karte, in zwei Listen im Pult, an den
    Knoepfen und beim eigenen Stand -- und ueberall gleich. Es rechnet
    in `em`, damit es die Groesse seiner Umgebung annimmt: auf der
    Karte gross, in einer Liste klein, ohne eine einzige zweite Zahl.
@@ -166,6 +443,18 @@
   letter-spacing: .12em; text-transform: uppercase;
   color: color-mix(in srgb, var(--sp-farbe) 22%, #ffffff);
 }
+/* In der Mitte wird aus dem Wort ein Schild. Es benennt den Rang und
+   trägt dessen Farbe — damit ist es das Einzige auf der Karte, das
+   die Stufe NENNT statt sie nur anzudeuten. */
+.spendentafel[data-platz="mitte"] .spendenkarte__stufe {
+  margin-top: .15em;
+  padding: .28em .85em .32em;
+  border-radius: 999px;
+  color: color-mix(in srgb, var(--sp-farbe) 30%, #ffffff);
+  background: color-mix(in srgb, var(--sp-farbe) 17%, transparent);
+  border: 1px solid color-mix(in srgb, var(--sp-farbe) 42%, transparent);
+  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--sp-farbe) 34%, transparent);
+}
 .spendenkarte__gruss {
   margin: .3125em 0 0;
   font-size: .86em; line-height: 1.4;
@@ -175,19 +464,67 @@
   display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
   overflow: hidden;
 }
+.spendentafel[data-platz="mitte"] .spendenkarte__gruss {
+  margin-top: .45em;
+  font-size: .78em;
+  color: #d9d4e8;
+  /* Anführungszeichen, weil es ein Zitat ist: Das hat jemand
+     geschrieben, das sagt nicht die Sendung. */
+  quotes: "\201E" "\201C";
+}
+.spendentafel[data-platz="mitte"] .spendenkarte__gruss::before { content: open-quote; }
+.spendentafel[data-platz="mitte"] .spendenkarte__gruss::after  { content: close-quote; }
 
-/* Wer weniger Bewegung eingestellt hat, bekommt die Karte trotzdem --
-   sie steht dann einfach da. Die Aussage ist wichtiger als der Weg. */
+/* =====================================================================
+   WER WENIGER BEWEGUNG EINGESTELLT HAT
+
+   Bekommt die Karte trotzdem — sie steht dann einfach da. Die
+   Aussage ist wichtiger als der Weg.
+
+   ALLE DREI BEWEGUNGEN GEHEN WEG, nicht nur die auffälligste: der
+   Flug, das Wiegen und der Lichtstreifen. Eine davon stehen zu
+   lassen, weil sie „ja klein ist", ist genau die Entscheidung, die
+   man nicht für jemand anderen treffen darf.
+   ===================================================================== */
 @media (prefers-reduced-motion: reduce) {
-  .spendenkarte { transition: opacity .2s linear; transform: none; }
+  .spendenkarte-auftritt {
+    transition: opacity .2s linear;
+    transform: none;
+  }
+  .spendenkarte-auftritt[data-da="nein"] {
+    transition: opacity .2s linear;
+    transform: none;
+  }
+  .spendentafel[data-platz="rand"] .spendenkarte-auftritt,
+  .spendentafel[data-platz="rand"] .spendenkarte-auftritt[data-da="nein"] {
+    transform: none;
+  }
+  .spendentafel[data-platz="mitte"] .spendenkarte { animation: none; }
+  .spendentafel[data-platz="mitte"] .spendenkarte::after { animation: none; opacity: 0; }
 }
 
+/* =====================================================================
+   AM HANDY
+
+   Die Mitte bleibt die Mitte — nur kleiner. Ein Aufsteller, der auf
+   einem 390 Pixel breiten Bild in seiner Rechnergröße erschiene,
+   deckte das ganze Video zu.
+   ===================================================================== */
 @media (max-width: 860px) {
-  .spendentafel { bottom: 12px; padding: 0 10px; }
+  .spendentafel { padding: 10px; }
+  .spendentafel[data-platz="rand"] { padding: 0 10px 12px; }
   .spendenkarte {
     max-width: 92%;
     gap: .625em; padding: .625em .875em .625em .625em;
   }
   .spendenkarte__bild { width: 2.625em; height: 2.625em; }
   .spendenkarte__betrag { font-size: 1.3em; }
+
+  .spendentafel[data-platz="mitte"] .spendenkarte {
+    font-size: calc(1rem * var(--sp-gross));
+    max-width: 86%;
+    padding: 1.1em 1.2em 1.2em;
+  }
+  .spendentafel[data-platz="mitte"] .spendenkarte__bild { width: 3.5em; height: 3.5em; }
+  .spendentafel[data-platz="mitte"] .spendenkarte__betrag { font-size: 1.85em; }
 }