/* ============================================================
   SUPPORT-SEITE (app/info-page.js -> <div class="support">).
   Grundgeruest (Karten, Met-Hero, Mitglieds-Teaser) steht in main-10.css;
   hier die Ueberarbeitung: Suetlac sitzt IM Titel rechts neben dem letzten
   Wort ("US") auf der Grundlinie und bedankt sich aus einer echten
   Sprechblase (mascotLine). Keine Ecken-Begleiterin mehr. Dazu stille
   Nummern auf den Karten, der Link-Kopiert-Moment in der Karte selbst
   (statt Toast) und die Hinweiszeile als ruhige Fussnote.
   ============================================================ */

/* Kopf darf die volle Breite nutzen: die Blase braucht Platz rechts vom Titel. */
.support .duell-head { max-width: none; margin-bottom: 40px; }

/* Titel bricht bewusst vor dem letzten Wort; zweite Zeile = Wort + Katze + Blase. */
.support .support-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: auto;
  max-width: none;
}
.support .support-title-line { display: block; }
.support .support-title-row {
  display: flex;
  align-items: flex-end;
  gap: .2em;
  max-width: 100%;
}
/* Die Katzen-Zeile erbt vom Titel (Riesenschrift, Gold-Verlauf als Text-Fill,
   Laufweite) — alles zuruecksetzen, nur die Groesse haengt am em des Titels. */
.support .support-title-row .mascotLine {
  margin: 0 0 -.04em;
  gap: 14px;
  letter-spacing: 0;
  font-weight: 400;
  line-height: 1.5;
  -webkit-text-fill-color: currentcolor;
  min-width: 0;
}
.support .support-title-row .mascotLine-cat .coachCat { width: .9em; }
/* Blase auf Kopfhoehe (Kopf = 44..94 der 120er-viewBox), Schwaenzchen zeigt aufs Kinn. */
.support .support-title-row .mascotLine-bubble { margin-top: .08em; max-width: 520px; }
.support .support-title-row .mascotLine-text { font-size: 16.5px; }

/* Schmal: Katze + Blase als eigene Zeile unter dem Titel (Akademie-Stil). */
@media (max-width: 820px) {
  .support .support-title-row { flex-wrap: wrap; }
  .support .support-title-row .mascotLine {
    flex-basis: 100%;
    margin: 18px 0 0;
    align-items: flex-start;
  }
  .support .support-title-row .mascotLine-cat .coachCat { width: 72px; }
  .support .support-title-row .mascotLine-bubble { margin-top: 2px; }
}

/* ----- Mithelfen-Karten: stille Nummer, Symbol leuchtet beim Hovern ----- */
.support .help-grid { margin-bottom: 28px; }
.support .help-card { padding: 26px 24px 22px; }
.support .help-card .hc-num {
  position: absolute;
  top: 20px;
  right: 22px;
  font-family: var(--mp-serif);
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--mp-gold-2);
  opacity: .55;
  transition: opacity 220ms ease;
}
.support .help-card:hover .hc-num { opacity: .9; }
.support .help-card .hc-ico {
  transition: border-color 240ms ease, box-shadow 240ms ease, background 240ms ease;
}
.support .help-card:hover .hc-ico {
  border-color: rgba(77, 208, 196, .55);
  background: rgba(77, 208, 196, .06);
  box-shadow: 0 0 18px rgba(77, 208, 196, .16);
}
.support .help-card .hc-action { position: relative; }
.support .help-card .hc-act-main { display: inline-flex; align-items: center; gap: 8px; }
.support .help-card .hc-act-done { display: none; align-items: center; gap: 8px; color: var(--mp-gold-1); }

/* Link kopiert: Karte zieht sich Gold, "Kopiert" loest das Label ab — kein Toast. */
.support .help-card.is-done .hc-act-main { display: none; }
.support .help-card.is-done .hc-act-done { display: inline-flex; animation: supportDoneIn .3s cubic-bezier(.2, .8, .3, 1); }
.support .help-card.is-done,
.support .help-card.is-done:hover {
  border-color: rgba(216, 177, 90, .6);
  animation: supportCardRing 1.3s ease-out;
}
.support .help-card.is-done .hc-ico {
  color: var(--mp-gold-1);
  border-color: rgba(216, 177, 90, .6);
  background: rgba(216, 177, 90, .07);
  box-shadow: 0 0 18px rgba(216, 177, 90, .18);
}
@keyframes supportDoneIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes supportCardRing {
  0% { box-shadow: 0 0 0 0 rgba(216, 177, 90, .45); }
  100% { box-shadow: 0 0 0 16px rgba(216, 177, 90, 0); }
}

/* ----- Hinweiszeile (ohne Spendenknopf): ruhige Fussnote statt Kasten ----- */
.support .support-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 22px 12px 0;
  border-top: 1px solid rgba(216, 177, 90, .14);
  font-family: var(--mp-serif-body);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--mp-ink-dim);
  text-align: center;
}
.support .support-note .sn-ico { color: var(--mp-gold-2); flex-shrink: 0; display: grid; place-items: center; }
.support .support-note b { color: var(--mp-ink); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .support .help-card.is-done,
  .support .help-card.is-done:hover,
  .support .help-card.is-done .hc-act-done { animation: none; }
}