/* Heldenalbum „Frag lieber erst!“ im Kundenkonto — live seit 02.11.2026 nachts.
   Nutzt die Shop-Variablen aus style.css (--gold, --white-40, --border, --bg-raised). */
#konto-helden-wrap .held-zaehler {
  font-weight: 700; color: var(--gold, #C8860A); font-size: 15px; white-space: nowrap;
}
#konto-helden-wrap .held-text { font-size: 13px; color: var(--white-40); line-height: 1.55; margin: .2rem 0 1rem; }
#konto-helden-wrap .held-klein { display: block; font-size: 12px; color: var(--white-40); margin-top: .35rem; }
#konto-helden-wrap .held-stapel-titel { font-size: 14px; color: #fff; font-weight: 600; margin: .4rem 0 .6rem; }
#konto-helden-wrap .held-stapel { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: .6rem; }
#konto-helden-wrap .held-meldung { min-height: 1.4em; font-size: 14px; color: #fff; margin-bottom: 1rem; }

/* Karte: Seitenverhältnis wie die Motive (750×1050 = 5:7) */
#konto-helden-wrap .held-karte,
#konto-helden-wrap .held-platz {
  position: relative; aspect-ratio: 5 / 7; border: 0; padding: 0; background: none; cursor: pointer;
  perspective: 900px; border-radius: 10px;
}
#konto-helden-wrap .held-karte { width: 132px; }
#konto-helden-wrap .held-innen {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transition: transform .9s cubic-bezier(.2, .7, .2, 1);
}
#konto-helden-wrap .held-seite {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 10px;
}
/* verdeckt: sichtbar ist .held-rueck (das Päckchen); umgedreht: .held-vorn (der Held) */
#konto-helden-wrap .held-karte .held-vorn { transform: rotateY(180deg); }
#konto-helden-wrap .held-karte.held-gedreht .held-innen { transform: rotateY(180deg); }
#konto-helden-wrap .held-zu:not(.held-gedreht) .held-innen { animation: held-wackeln 2.8s ease-in-out infinite; }
#konto-helden-wrap .held-zu:focus-visible { outline: 2px solid var(--gold, #C8860A); outline-offset: 3px; }
@keyframes held-wackeln {
  0%, 82%, 100% { transform: rotate(0); }
  86% { transform: rotate(-3deg); } 90% { transform: rotate(3deg); } 94% { transform: rotate(-2deg); }
}

/* Album: im Album zeigt die Vorderseite den Helden, Tippen dreht auf die Lehre */
#konto-helden-wrap .held-album {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .6rem; margin-top: .4rem;
}
#konto-helden-wrap .held-platz.held-da .held-rueck { transform: rotateY(180deg); }
#konto-helden-wrap .held-platz.held-da.held-gedreht .held-innen { transform: rotateY(180deg); }
#konto-helden-wrap .held-platz.held-leer {
  cursor: default; border: 2px dashed var(--border, rgba(255,255,255,.12)); background: var(--bg-raised, #222);
  display: flex; align-items: center; justify-content: center; flex-direction: column;
}
#konto-helden-wrap .held-nr { position: absolute; top: 6px; left: 8px; font-size: 11px; color: var(--white-40); }
#konto-helden-wrap .held-frage { font-size: 28px; font-weight: 800; color: rgba(255,255,255,.18); }
#konto-helden-wrap .held-doppelt { margin-top: .6rem; }

#konto-helden-wrap .held-gutschein {
  margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--border); text-align: center;
}
#konto-helden-wrap .held-gutschein-titel { font-size: 15px; color: #fff; font-weight: 700; margin-bottom: .6rem; }
#konto-helden-wrap .held-code {
  display: inline-block; font-family: monospace; font-size: 20px; font-weight: 700; letter-spacing: .08em; color: #fff;
  background: rgba(200,134,10,.12); border: 2px dashed var(--gold, #C8860A); border-radius: 8px; padding: .5rem 1.2rem;
}
#konto-helden-wrap .held-kopieren { margin-top: .6rem; }

@media (max-width: 560px) {
  #konto-helden-wrap .held-album { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #konto-helden-wrap .held-karte { width: 112px; }
}
@media (prefers-reduced-motion: reduce) {
  #konto-helden-wrap .held-innen { transition: none; }
  #konto-helden-wrap .held-zu:not(.held-gedreht) .held-innen { animation: none; }
}