/* ACQUA REAPER — /club/  ·  Dark-Theme über style-12.css
   Wird NUR von der Club-Seite geladen, hängt sich an body.club. */

body.club{
  --ink:#f3edf6;
  --body:#b9adc4;
  --muted:#8a7f95;
  --line:rgba(255,255,255,.13);
  --tint:#130d1c;
  --red:#ff2e88;
  --red-soft:rgba(255,46,136,.13);
  background:#08050d;color:var(--ink);
  padding-bottom:178px;                 /* Platz für die Cocktail-Leiste */
}
body.club::before{                      /* Aurora-Schleier */
  content:"";position:fixed;inset:-20% -10% auto -10%;height:85vh;z-index:0;pointer-events:none;
  background:
    radial-gradient(45% 55% at 18% 22%, rgba(255,46,136,.28) 0%, transparent 70%),
    radial-gradient(42% 50% at 82% 12%, rgba(56,201,238,.22) 0%, transparent 70%),
    radial-gradient(50% 60% at 55% 65%, rgba(139,26,26,.30) 0%, transparent 72%);
  filter:blur(28px);animation:auroraShift 22s ease-in-out infinite alternate;
}
@keyframes auroraShift{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(-3%,3%,0) scale(1.12)}
}
body.club main{position:relative;z-index:1}

/* ── Flächen ─────────────── */
body.club header.nav{background:rgba(8,5,13,.82);border-bottom:1px solid var(--line)}
body.club .nav-links a{color:var(--body)}
body.club .nav-links a:hover{color:#fff}
body.club .hero{background:transparent}
body.club .band{background:transparent}
body.club .band-tint{background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015))}
body.club .band-red{background:linear-gradient(120deg,#2a0a1c 0%,#48102c 55%,#1a0716 100%);
  border-top:1px solid rgba(255,46,136,.28);border-bottom:1px solid rgba(255,46,136,.28)}
body.club .facts{border-color:var(--line)}
body.club .fact{background:transparent;border-left-color:var(--line)}
body.club .fact b{color:#ff5ba3;text-shadow:0 0 18px rgba(255,46,136,.55)}
body.club .fact span{color:var(--muted)}

/* ── Typo ─────────────── */
body.club .hero h1{color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.6)}
body.club .hero h1 em{
  background:linear-gradient(96deg,#ff2e88 0%,#ff8ac4 42%,#5fd8f5 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 20px rgba(255,46,136,.45))}
body.club .sec-head h2,body.club .feat h3,body.club .prod h3,body.club .sorte h3,
body.club .faq summary,body.club .step h3{color:#fff}
body.club .lead,body.club .sec-head p,body.club .feat p,body.club .faq details p,
body.club .step p,body.club .prod p{color:var(--body)}
body.club .eyebrow{color:#ff5ba3;letter-spacing:.2em}
body.club .hero-note,body.club .sorte p{color:var(--muted)}
body.club .hero-link{color:#fff;text-decoration-color:rgba(255,255,255,.3)}
body.club .hero-link:hover{color:#ff5ba3;text-decoration-color:#ff5ba3}

/* ── Karten & Buttons ─────────────── */
body.club .feat{border-top-color:#ff2e88}
body.club .sorte,body.club .prod,body.club .paket,body.club .vs-card,body.club .calc,
body.club .highlight,body.club .channels{
  background:rgba(255,255,255,.045);border-color:var(--line);backdrop-filter:blur(6px)}
body.club .sorte .swatch{filter:saturate(.85) brightness(.92)}
body.club .tags span{color:var(--body);border-color:var(--line)}
body.club .btn-primary{background:linear-gradient(96deg,#ff2e88,#ff5ba3);color:#12060d;font-weight:600;
  box-shadow:0 8px 30px -10px rgba(255,46,136,.75)}
body.club .btn-primary:hover{filter:brightness(1.08)}
body.club .btn-ghost{color:#fff;border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.04)}
body.club .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.1)}
body.club .faq details{border-bottom-color:var(--line)}
body.club .faq summary::after{color:#ff5ba3}
body.club footer.ft{border-top-color:var(--line);color:var(--muted);position:relative;z-index:1}
body.club .ft-links a:hover{color:#ff5ba3}
body.club .badge-soon{background:rgba(255,46,136,.16);color:#ff8ac4}
body.club .snow-layer .fl{color:#7fd7f0;opacity:.35}
body.club .snow-layer .word{color:#9ee4f8;opacity:.28;
  text-shadow:0 0 16px rgba(120,215,245,.75)}

/* Formular bleibt hell — bewusst, damit Eingabefelder lesbar sind */

/* ══════════════════════════════════════════════════
   Cocktail-Leiste: sticky am unteren Rand, volle Breite
   ══════════════════════════════════════════════════ */
.rail{position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:linear-gradient(180deg,rgba(8,5,13,.55),rgba(8,5,13,.94));
  backdrop-filter:blur(16px);border-top:1px solid rgba(255,46,136,.3);
  transition:transform .35s cubic-bezier(.4,0,.2,1)}
.rail.zu{transform:translateY(calc(100% - 40px))}
.rail-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:0 20px;height:40px}
.rail-head b{font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:#ff8ac4;display:flex;align-items:center;gap:9px}
.rail-head b i{font-style:normal;width:7px;height:7px;border-radius:50%;background:#ff2e88;
  box-shadow:0 0 10px #ff2e88;animation:railPulse 1.9s ease-in-out infinite}
@keyframes railPulse{50%{opacity:.25}}
.rail-toggle{background:none;border:1px solid rgba(255,255,255,.24);color:#fff;cursor:pointer;
  font:inherit;font-size:.72rem;font-weight:550;padding:4px 12px;border-radius:100px}
.rail-toggle:hover{background:rgba(255,255,255,.1)}
.rail-view{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.rail-track{display:flex;gap:14px;width:max-content;padding:0 14px 16px;
  animation:railScroll 54s linear infinite}
.rail:hover .rail-track,.rail:focus-within .rail-track{animation-play-state:paused}
@keyframes railScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.drink{flex:0 0 232px;border-radius:14px;padding:14px 16px;
  background:linear-gradient(160deg,rgba(255,255,255,.11),rgba(255,255,255,.035));
  border:1px solid rgba(255,255,255,.14);position:relative;overflow:hidden;
  transition:transform .25s,border-color .25s,box-shadow .25s}
.drink:hover{transform:translateY(-5px);border-color:rgba(255,46,136,.6);
  box-shadow:0 14px 34px -16px rgba(255,46,136,.7)}
.drink::after{content:"";position:absolute;inset:-40% -60% auto auto;width:120px;height:120px;
  border-radius:50%;background:radial-gradient(circle,var(--gl,rgba(255,46,136,.5)),transparent 70%);
  filter:blur(12px);pointer-events:none}
.drink .dk{font-size:.62rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gl-solid,#ff8ac4);margin-bottom:5px}
.drink h4{font-family:"Fraunces",serif;font-size:1.04rem;font-weight:600;color:#fff;
  line-height:1.2;margin-bottom:5px}
.drink p{font-size:.79rem;color:#b9adc4;line-height:1.45}
.drink .frei{display:inline-block;margin-top:8px;font-size:.62rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:#5fd8f5;
  border:1px solid rgba(95,216,245,.4);border-radius:100px;padding:2px 8px}

@media(max-width:700px){
  body.club{padding-bottom:168px}
  .drink{flex-basis:200px}
  .rail-track{animation-duration:40s}
}
@media(prefers-reduced-motion:reduce){
  .rail-track{animation:none}
  .rail-view{overflow-x:auto}
  body.club::before{animation:none}
}

/* ── Die 42 Drinks als Raster ─────────────── */
.mixgroup{margin-top:38px}
.mixhead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:14px;
  padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.12)}
.mixhead .dot{width:9px;height:9px;border-radius:50%;flex:0 0 9px;align-self:center}
.mixhead h3{font-family:"Fraunces",serif;font-size:1.2rem;font-weight:600;color:#fff}
.mixhead p{font-size:.85rem;color:#8a7f95;margin-left:auto;text-align:right}
@media(max-width:640px){.mixhead p{margin-left:0;text-align:left;width:100%}}
.mixgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:900px){.mixgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.mixgrid{grid-template-columns:1fr}}
.mixgrid .drink{flex:none;width:auto}
.mixgrid .drink .dk{font-family:"Fraunces",serif;font-size:.8rem;letter-spacing:.06em;opacity:.75}