dogfather-universe/workspace/assets/css/spendenkarte.css

/* =====================================================================
   DIE SPENDENKARTE (28.09.2026)

   Eigenes Stilblatt, weil dieselbe Karte an zwei Orten laeuft: in der
   Reaction-Seite und -- spaeter -- als eigene Seite 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.
   ===================================================================== */
.spendentafel {
  position: absolute;
  left: 0; right: 0; bottom: 84px;
  z-index: 45;
  display: grid; gap: 10px;
  justify-items: start;
  padding: 0 18px;
  pointer-events: none;
}

/* ==== 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: 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. */
.spendenkarte {
  --sp-farbe: #8ec9ff;
  --sp-gross: 1;
  font-size: calc(1rem * var(--sp-gross));
  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);
  /* 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; }

.spendenkarte__bild {
  flex: none;
  width: 3.375em; height: 3.375em;
  display: grid; place-items: center;
}
.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; }
.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;
}
.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);
}
/* ==== 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
   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 {
  width: .92em; height: .92em;
  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; }

.spendenkarte__stufe {
  font-size: .72em; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: color-mix(in srgb, var(--sp-farbe) 22%, #ffffff);
}
.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;
}

/* Wer weniger Bewegung eingestellt hat, bekommt die Karte trotzdem --
   sie steht dann einfach da. Die Aussage ist wichtiger als der Weg. */
@media (prefers-reduced-motion: reduce) {
  .spendenkarte { transition: opacity .2s linear; transform: none; }
}

@media (max-width: 860px) {
  .spendentafel { bottom: 12px; padding: 0 10px; }
  .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; }
}