/* club.css — VHS-/Found-Footage-Club-Look (shopKind "club").
   Schwarz + Rot, Typewriter/Mono, Film-Grain + Scanlines + Vignette. */
:root {
  /* Universell: alles kommt aus dem Shop-Theme (config.theme) — Fallbacks = VHS-Preset */
  --club-bg: var(--bg, #0a0908);
  --club-panel: var(--soft, #121010);
  --club-red: var(--accent, #c81e1e);
  --club-ink: var(--ink, #d6d2cc);
  --club-mut: var(--muted, #7d7872);
  --club-line: color-mix(in srgb, var(--muted, #7d7872) 28%, transparent);
}
html { background: var(--club-bg); }
body { margin: 0; background: var(--club-bg); color: var(--club-ink); font-family: var(--font-body, "Space Mono"), "Courier New", monospace; -webkit-font-smoothing: antialiased; }
.club { position: relative; min-height: 100vh; overflow-x: hidden; }
.club a { color: inherit; }

/* ── Effekte: Grain, Scanlines, Vignette ── */
.fx-grain::before {
  content: ""; position: fixed; inset: -50%; z-index: 3; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.9'/%3E%3C/svg%3E");
  animation: clubGrain 1.1s steps(4) infinite;
}
@keyframes clubGrain { 0%{transform:translate(0,0)} 25%{transform:translate(-2%,1%)} 50%{transform:translate(1%,-2%)} 75%{transform:translate(-1%,2%)} 100%{transform:translate(2%,-1%)} }
.fx-scan::after {
  content: ""; position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: .14;
  background: repeating-linear-gradient(to bottom, transparent 0 2px, #000 2px 3px);
}
.fx-vignette { position: fixed; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55) 100%); }
.club > *:not(.fx-vignette) { position: relative; z-index: 4; }

/* ── Topbar + Nav ── */
.club-topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1.1rem; font-size: .74rem; letter-spacing: .12em; }
.club-rec { color: var(--club-mut); display: flex; align-items: center; gap: .45rem; min-width: 170px; }
.club-rec-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--club-red); animation: clubBlink 1.1s steps(1) infinite; }
@keyframes clubBlink { 50% { opacity: .15; } }
.club-brand { font-family: var(--font-heading, "Courier Prime"), monospace; font-weight: 700; font-size: 1.05rem; letter-spacing: .32em; text-transform: uppercase; text-align: center; }
.club-login { min-width: 170px; text-align: right; text-decoration: none; border: 1px solid var(--club-line); padding: .45rem .9rem; text-transform: uppercase; font-size: .68rem; background: #0f0e0d; }
.club-login:hover { border-color: var(--club-red); color: #fff; }
.club-nav { display: flex; justify-content: center; gap: 2.2rem; padding: .55rem 0 .2rem; font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; }
.club-nav a { text-decoration: none; color: var(--club-mut); padding-bottom: .35rem; }
.club-nav a.on, .club-nav a:hover { color: var(--club-ink); border-bottom: 2px solid var(--club-red); }

/* ── Hero + Tiers ── */
.club-hero { text-align: center; padding: 2.6rem 1.2rem 1rem; }
.club-hero h1 { font-family: var(--font-heading, "Courier Prime"), monospace; font-size: clamp(2.3rem, 6vw, 3.9rem); line-height: 1.1; letter-spacing: .035em; margin: 0 0 2rem; font-weight: 700; text-transform: uppercase; }
.club-hero h1 .red { color: var(--club-red); }
.club-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 380px)); justify-content: center; gap: 1.4rem; max-width: 860px; margin: 0 auto; text-align: left; }
.club-tier { position: relative; background: var(--club-panel); border: 1px solid var(--club-line); padding: 1.5rem 1.4rem 1.3rem; }
.club-tier--hi { border-color: var(--club-red); box-shadow: 0 0 34px rgba(200,30,30,.14); }
.club-tier-badge { position: absolute; top: -0.72rem; right: 1rem; background: var(--club-red); color: #fff; font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; padding: .28rem .7rem; }
.club-tier-name { color: var(--club-mut); font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; margin-bottom: .55rem; }
.club-tier--hi .club-tier-name { color: var(--club-red); }
.club-tier-price { font-family: var(--font-heading, "Courier Prime"), monospace; font-size: 2rem; font-weight: 700; color: var(--club-red); }
.club-tier-price small { color: var(--club-mut); font-size: .85rem; font-weight: 400; }
.club-perks { list-style: none; margin: 1.1rem 0 1.3rem; padding: 0; }
.club-perks li { position: relative; padding: .34rem 0 .34rem 1.6rem; font-size: .84rem; line-height: 1.45; }
.club-perks li::before { content: attr(data-m); position: absolute; left: 0; top: .34rem; color: var(--club-red); }

/* ── Buttons ── */
.club-btn { display: block; width: 100%; background: #191515; border: 1px solid var(--club-line); color: var(--club-ink); font-family: inherit; font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; padding: .95rem 1rem; cursor: pointer; transition: .15s; }
.club-btn:hover { border-color: var(--club-red); color: #fff; }
.club-btn--hi { background: var(--club-red); border-color: var(--club-red); color: #fff; font-weight: 700; }
.club-btn--hi:hover { filter: brightness(1.12); }
.club-btn--big { display: inline-block; width: auto; padding: 1.05rem 2.6rem; font-size: .92rem; }

/* ── Notice / CTA-Band / Terminal ── */
.club-notice { display: flex; align-items: center; justify-content: center; gap: .8rem; background: #100e0e; border-block: 1px solid var(--club-line); margin: 2.6rem 0 0; padding: 2rem 1.2rem; color: var(--club-mut); font-size: .86rem; }
.club-notice-ico { font-size: 1.3rem; }
.club-notice p { margin: 0; }
.club-ctaband { text-align: center; padding: 3.2rem 1.2rem 1rem; }
.club-ctasub { color: var(--club-mut); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; margin-top: 1rem; }
.club-terminal { max-width: 760px; margin: 3rem auto 0; padding: 0 1.2rem; }
.club-term-head { color: var(--club-mut); font-size: .76rem; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 1rem; }
.club-term-row { background: #131111; border: 1px solid var(--club-line); padding: .85rem 1rem; margin-bottom: .7rem; font-size: .86rem; line-height: 1.5; }
.club-term-row span { color: var(--club-red); font-weight: 700; margin-right: .35rem; }
.club-term-foot { color: var(--club-mut); font-size: .78rem; font-style: italic; margin-top: 1rem; }

/* ── Footer ── */
.club-footer { text-align: center; padding: 4.5rem 1.2rem 2.2rem; }
.club-foot-brand { font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; }
.club-foot-tag { color: var(--club-mut); text-transform: none; letter-spacing: .1em; }
.club-foot-legal { margin-top: 1rem; }
.club-foot-legal a { color: var(--club-mut); font-size: .72rem; text-decoration: none; margin: 0 .7rem; }
.club-foot-legal a:hover { color: var(--club-ink); }

/* Audio-Upsell/Lightbox aus global.css werden hier nicht gebraucht; Basis-Reset genügt. */
@media (max-width: 720px) {
  .club-topbar { flex-wrap: wrap; }
  .club-rec, .club-login { min-width: 0; }
  .club-brand { order: -1; width: 100%; }
}