/* ===================================================================== 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 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 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; inset: 0; z-index: 45; display: grid; gap: 10px; padding: 18px; pointer-events: none; perspective: 1200px; perspective-origin: 50% 44%; } /* 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." EINE SCHRIFTGRÖSSE UND NICHT ZEHN EINZELWERTE. Die Karte setzt ihre eigene Grundgröße aus `--sp-gross`, und alles darin rechnet in `em` — Abstände, Rundungen, das Zeichen, jede Schrift. Ein Faktor, und die ganze Karte wächst gleichmäßig mit. Der naheliegende Weg wäre `transform: scale()` gewesen. Der geht 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; border-radius: 1.125em; background: linear-gradient(90deg, color-mix(in srgb, var(--sp-farbe) 26%, rgba(10, 8, 16, .92)), rgba(10, 8, 16, .92) 58%); border: 1px solid color-mix(in srgb, var(--sp-farbe) 55%, transparent); box-shadow: 0 0 40px -14px var(--sp-farbe), 0 24px 50px -22px #000, 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); } /* ===================================================================== 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%; /* `contain` und nicht `cover`: Ein hochgeladenes Zeichen soll ganz zu sehen sein. Wer sein Logo hochlädt, will es nicht beschnitten wiederfinden. */ object-fit: contain; border-radius: .625em; } .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; letter-spacing: -.02em; line-height: 1.05; color: #ffffff; /* Der Betrag ist das, worum es geht -- er bekommt als Einziges 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 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. `baseline` UND NICHT `center`: Das Zeichen sitzt sonst optisch zu hoch neben einer Ziffer mit Oberlaenge. */ .dogen { display: inline-flex; align-items: baseline; gap: .28em; white-space: nowrap; } .dogen__zeichen { /* 1,05em und nicht 0,92: Seit dem 28.09. ist das Zeichen eine GEZEICHNETE MUENZE mit Pfote, Schriftzug und Steinen -- kein flaches Symbol mehr. Bei 0,92em neben einer kleinen Zahl war davon ein Fleck uebrig. Gemessen am Bildschirmfoto: 13,5 px an den Spendenknoepfen. Ein Zeichen, das man nicht erkennt, ist keins. */ width: 1.05em; height: 1.05em; flex: none; /* Selbst ausrichten, weil `baseline` ein Bild an seine Unterkante setzt und es damit zu tief haengt. */ align-self: center; object-fit: contain; } .dogen__zahl { font-variant-numeric: tabular-nums; } /* Das Wort steht kleiner und ruhiger daneben -- die ZAHL ist die Aussage, „Dogen" ist nur die Einheit. Ein gleich grosses Wort nimmt der Zahl die Haelfte ihrer Wirkung. */ .dogen__wort { /* ==== `max()` UND NICHT NUR `em` ============================== 0,52em ist neben der grossen Zahl auf der Karte genau richtig (rund 13 px) -- in einer Liste im Pult waeren daraus 8 px geworden. Das Haus hat eine Untergrenze von 11,5 px, und sie ist kein Geschmack: Darunter liest es niemand mehr, und `pruef-css-klassen` misst es. `max()` loest beides mit einer Regel statt mit zwei: Auf der Karte gewinnt das `em` und waechst mit, in einer Liste gewinnt der feste Wert. Zwei Regeln fuer dieselbe Frage waeren wieder die Gelegenheit, dass eine davon irgendwo falsch gewinnt. */ font-size: max(.72rem, .52em); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .72; } /* An den Spendenknoepfen steht das Wort viermal untereinander -- einmal je Knopf. Das ist kein Zusatz mehr, sondern Rauschen. */ .dogen--nurzahl .dogen__wort { display: none; } /* ==== DIESELBE MUENZE NICHT ZWEIMAL AUF EINER KARTE ================ Traegt die Karte die Muenze schon gross (das ist ab dem 28.09. die Vorgabe der drei Stufen), dann steht neben der Zahl keine zweite in klein. Dieselbe Muenze in zwei Groessen nebeneinander sieht aus wie ein Versehen -- und die grosse gewinnt ohnehin. Laedt das Bild nicht, nimmt das Programm die Markierung zurueck, und die kleine ist wieder da. */ .spendenkarte[data-muenze="ja"] .dogen__zeichen { display: none; } .spendenkarte__stufe { font-size: .72em; font-weight: 800; 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; color: #e9e6f2; /* Hoechstens drei Zeilen. Ein langer Gruss darf das Bild nicht zuwachsen -- und wer mehr schreiben will, schreibt in den Chat. */ 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. 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-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 { 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; } }