/* Fanshop – öffentliche Seiten (Werbeseite /shop und Landingpages). Nur Tokens, keine eigenen Farben. */

.lp-club { font-family: var(--ms-font-head); font-weight: 500; font-size: 20px; }
.lp-hero { padding: 48px 0 96px; }
.lp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 48px; align-items: start; }
.lp-image { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--ms-radius-xl); border: 1px solid var(--ms-border); background: var(--ms-surface); display: block; }
.lp-image--symbol { display: flex; align-items: center; justify-content: center; }
.lp-symbol { width: 45%; height: 45%; color: var(--ms-accent); stroke-width: 1; }
.lp-copy { display: flex; flex-direction: column; gap: 20px; }
.lp-title { font-size: clamp(2.2rem, 4.5vw, 3.6rem); }
.lp-price { font-family: var(--ms-font-mono); font-size: 2rem; color: var(--ms-text); }
.lp-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.lp-body { white-space: normal; }
.lp-form { margin-top: 8px; }
.lp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.lp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Werbeseite */
.sp-shot { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.sp-tile { background: var(--ms-surface); border: 1px solid var(--ms-border); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.sp-tile svg { width: 32px; height: 32px; color: var(--ms-accent); }
.sp-tile__name { font-weight: 600; font-size: var(--ms-text-sm); }
.sp-tile__price { font-family: var(--ms-font-mono); font-size: var(--ms-text-xs); color: var(--ms-text-subtle); }
.sp-bars { display: flex; gap: 4px; align-items: flex-end; height: 52px; }
.sp-bar { flex: 1; height: 100%; justify-content: flex-end; display: flex; flex-direction: column; align-items: center; gap: 3px; font-family: var(--ms-font-mono); font-size: 10px; color: var(--ms-text-subtle); }
.sp-bar i { flex: none; max-height: calc(100% - 16px); display: block; width: 100%; background: var(--ms-accent); border-radius: 3px; }
.sp-bar.low i { background: var(--ms-secondary); }
.sp-list { margin: 0; padding-left: 20px; color: var(--ms-text-muted); }
.sp-list li { margin: 6px 0; }

@media (max-width: 520px) {
  .lp-row { grid-template-columns: 1fr; }
  .lp-hero { padding-top: 16px; }
}