/* =====================================================================
   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;
}

.spendenkarte {
  --sp-farbe: #8ec9ff;
  display: flex; align-items: center; gap: 14px;
  max-width: min(30rem, 78%);
  padding: 13px 20px 13px 14px;
  border-radius: 18px;
  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: 54px; height: 54px;
  display: grid; place-items: center;
}
.spendenkarte__bild svg { width: 100%; height: 100%; }
.spendenkarte__bild img {
  width: 100%; height: 100%;
  object-fit: contain;
  border-radius: 10px;
}

.spendenkarte__text { display: grid; gap: 1px; min-width: 0; }
.spendenkarte__wer {
  font-size: .8rem; 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.62rem; 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);
}
.spendenkarte__stufe {
  font-size: .72rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: color-mix(in srgb, var(--sp-farbe) 22%, #ffffff);
}
.spendenkarte__gruss {
  margin: 5px 0 0;
  font-size: .86rem; 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: 10px; padding: 10px 14px 10px 10px;
  }
  .spendenkarte__bild { width: 42px; height: 42px; }
  .spendenkarte__betrag { font-size: 1.3rem; }
}