/* =====================================================================
 *  RauschPass: die Teaser-Sektion GANZ OBEN, vor den Kristallen.
 *  Bewusst dieselbe Karten-Grammatik wie .brb-* (Visual · Inhalt · Preis),
 *  damit der Teaser nicht wie angeklebt wirkt. Weil er als erstes Angebot
 *  der Seite steht, ist die 3D-Buehne aber groesser als bei einem Bundle. Eigener Praefix, damit eine
 *  Aenderung an den Bundles ihn nicht mitzieht.
 *  Leitfarbe ist das Gold der Karte, nicht das Blau der Bundles: der Pass
 *  ist eine eigene Sache, kein viertes Bundle.
 * ===================================================================== */

.rp-section{
  max-width:1160px; margin:44px auto 0; position:relative;
  font-family:Inter,Poppins,"Segoe UI",system-ui,sans-serif; color:#fff;
  scroll-margin-top:88px;
}

/* ----- Kopf ----- */
.rp-head{text-align:center; margin-bottom:22px}
.rp-eyebrow{display:inline-flex; align-items:center; gap:7px; padding:6px 16px; border-radius:999px;
  font-size:12px; font-weight:900; letter-spacing:.07em; text-transform:uppercase; color:#3a2400;
  background:linear-gradient(135deg,#ffd76e,#e9a833); box-shadow:0 6px 18px rgba(233,168,51,.42); margin-bottom:14px}
.rp-title{margin:0 0 8px; font-size:clamp(30px,5vw,46px); font-weight:900; letter-spacing:.4px; line-height:1.02;
  background:linear-gradient(92deg,#fff 0%,#ffe6a8 52%,#e9a833 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent}
.rp-sub{margin:0 auto; max-width:64ch; color:#aeb8c9; font-size:15px; line-height:1.55}
.rp-sub b{color:#ffd257}

/* ----- Karte ----- */
.rp-card{position:relative; display:grid; grid-template-columns:248px minmax(0,1fr) auto; align-items:center; gap:22px;
  background:linear-gradient(150deg,rgba(233,168,51,.13),rgba(255,255,255,.028) 46%,rgba(255,255,255,.02));
  border:1px solid rgba(255,215,110,.34); border-radius:20px; padding:18px 24px 18px 18px; overflow:hidden;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  box-shadow:0 0 0 1px rgba(255,215,110,.12),0 28px 62px -40px rgba(0,0,0,.92)}
.rp-card::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:.75;
  background:radial-gradient(520px 170px at 12% -30%,rgba(255,215,110,.2),transparent 70%)}
.rp-card::after{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; z-index:2;
  background:linear-gradient(180deg,#ffe6a8,#e9a833,#b8722a)}

/* ----- Visual (das 3D) ----- */
.rp-visual{position:relative; width:248px; height:236px; border-radius:14px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(closest-side,rgba(233,168,51,.26),transparent 74%),
             repeating-linear-gradient(45deg,#16110a 0 11px,#1b1409 11px 22px);
  border:1px solid rgba(255,215,110,.26)}
.rp-media{width:100%; height:100%; position:relative; display:flex; align-items:center; justify-content:center}
.rp-poster{width:140px; height:140px; image-rendering:pixelated; object-fit:contain;
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.55))}
.rp-canvas{position:absolute; inset:0; width:100%; height:100%; cursor:grab; touch-action:none;
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.5))}
.rp-canvas.greift{cursor:grabbing}
.rp-hint3d{position:absolute; bottom:7px; left:50%; transform:translateX(-50%); z-index:3; white-space:nowrap;
  font-size:10.5px; font-weight:800; color:#ffe6a8; padding:3px 11px; border-radius:999px;
  background:rgba(12,9,4,.72); border:1px solid rgba(255,215,110,.35);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .3s; pointer-events:none}
.rp-hint3d.an{opacity:.85}

/* ----- Inhalt ----- */
.rp-body{min-width:0}
.rp-badge{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:900; letter-spacing:.04em;
  padding:4px 11px; border-radius:999px; margin-bottom:8px;
  color:#ffd257; background:rgba(233,168,51,.16); border:1px solid rgba(255,215,110,.42)}
.rp-badge.frei{color:#7ce68a; background:rgba(51,152,75,.16); border-color:rgba(126,217,87,.42)}
.rp-name{margin:0 0 5px; font-size:clamp(18px,2.2vw,23px); font-weight:900; line-height:1.12; letter-spacing:.2px}
.rp-name-sub{font-weight:700; color:#9fb0c6; font-size:.62em; letter-spacing:.02em}
.rp-desc{margin:0 0 11px; font-size:13px; color:#9fb0c6; line-height:1.45; max-width:58ch}
.rp-chips{display:flex; flex-wrap:wrap; gap:9px}
.rp-chip{display:flex; align-items:center; gap:9px; padding:7px 12px 7px 9px; border-radius:12px;
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid rgba(255,215,110,.26)}
.rp-chip-ic{font-size:19px; line-height:1; filter:drop-shadow(0 0 6px rgba(0,0,0,.5))}
.rp-chip-tx{display:flex; flex-direction:column; line-height:1.15}
.rp-chip-tx b{font-size:13px; font-weight:800; color:#ffd257}
.rp-chip-tx span{font-size:11px; color:#93a3ba}
.rp-note{margin:11px 0 0; font-size:11.5px; color:#7f8da0; line-height:1.45; max-width:58ch}

/* ----- Preis + Sperre ----- */
.rp-buy{display:flex; flex-direction:column; align-items:flex-end; text-align:right; gap:2px; flex:0 0 auto; min-width:210px}
.rp-price{font-size:38px; font-weight:900; color:#fff; line-height:1}
.rp-price sup{font-size:16px; font-weight:800; top:-.7em; margin-left:1px}
.rp-price-note{font-size:11.5px; color:#ffd257; font-weight:800; margin-bottom:11px}
.rp-btn{display:inline-flex; align-items:center; justify-content:center; gap:0; border:0; cursor:pointer;
  padding:12px 22px; border-radius:13px; font:inherit; font-size:14px; font-weight:900; letter-spacing:.04em;
  color:#3a2400; background:linear-gradient(135deg,#ffd76e,#e9a833); box-shadow:0 8px 20px rgba(233,168,51,.32)}
.rp-btn:hover{filter:brightness(1.06)}
/* Gesperrt: sieht aus wie ein Knopf, ist keiner. Kein Zeiger, kein Hover. */
.rp-btn.aus{cursor:default; color:#c9b48a; background:rgba(255,255,255,.06);
  border:1px dashed rgba(255,215,110,.4); box-shadow:none}
.rp-btn.aus:hover{filter:none}
.rp-btn:disabled{opacity:.6; cursor:default}
.rp-buybox{display:flex; gap:8px; align-items:stretch; margin-top:11px; width:100%; max-width:320px}
.rp-buybox input{flex:1; min-width:0; background:rgba(0,0,0,.3); border:1px solid rgba(255,255,255,.14); color:#fff;
  border-radius:11px; padding:11px 13px; font-size:14px; outline:none}
.rp-buybox input:focus{border-color:#e9a833; box-shadow:0 0 0 3px rgba(233,168,51,.22)}
.rp-buybox .rp-btn{padding:11px 16px; font-size:13px}
.rp-count{margin-top:9px; font-size:12.5px; min-height:16px; text-align:right; color:#c9b48a; max-width:320px}
.rp-count.err{color:#ff9d9d}

/* ----- Schmal ----- */
@media (max-width:900px){
  .rp-card{grid-template-columns:1fr; gap:16px; padding:16px}
  .rp-visual{width:100%; height:250px}
  .rp-buy{align-items:stretch; text-align:left; min-width:0}
  .rp-price{font-size:34px}
  .rp-count{text-align:left; max-width:none}
  .rp-buybox{max-width:none}
  .rp-btn{width:100%}
}