/* =====================================================================
 *  Bundles — Kategorie unter der Rang-Tabelle.
 *  Lange, flache Kacheln (horizontal), damit 4–5 Bundles gestapelt passen.
 *  Reihenfolge je Karte:  [Visual]  ·  [Inhalt/Chips]  ·  [Preis + KAUFEN]
 * ===================================================================== */

.brb-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;
}

/* ----- Kategorie-Kopf ----- */
.brb-head{text-align:center; margin-bottom:22px}
.brb-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:#fff;
  background:linear-gradient(135deg,#ff6377,#e8304a); box-shadow:0 6px 18px #e8304a70; margin-bottom:14px;
  animation:brb-pulse 2.2s ease-in-out infinite}
@keyframes brb-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.brb-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%,#9fc3f5 55%,#4b9bf5 100%); -webkit-background-clip:text; background-clip:text; color:transparent}
.brb-sub{margin:0 auto; max-width:62ch; color:#aeb8c9; font-size:15px; line-height:1.55}
.brb-sub b{color:#ffd257}

/* ----- Liste (gestapelte lange Kacheln) ----- */
.brb-list{display:flex; flex-direction:column; gap:16px; margin-top:6px}

/* ----- Eine Bundle-Karte (horizontal, flach) ----- */
.brb-card{position:relative; display:grid; grid-template-columns:172px minmax(0,1fr) auto; align-items:center; gap:20px;
  background:linear-gradient(150deg,var(--br-panel,rgba(255,255,255,.09)),rgba(255,255,255,.028));
  border:1px solid var(--br-line,rgba(255,255,255,.14)); border-radius:20px; padding:16px 22px 16px 16px; overflow:hidden;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  box-shadow:0 26px 60px -40px rgba(0,0,0,.9); transition:transform .18s, border-color .18s, box-shadow .18s}
.brb-card:hover{transform:translateY(-3px); border-color:rgba(255,255,255,.28); box-shadow:0 34px 70px -38px rgba(0,0,0,.95)}
.brb-card::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:.6;
  background:radial-gradient(520px 160px at 12% -30%,rgba(59,142,240,.18),transparent 70%)}
/* Featured (das große Krokodil-Königspaket) — grün-goldene Star-Aura + Regenbogen-Kante */
.brb-card.feat{border-color:rgba(126,217,87,.42);
  background:linear-gradient(150deg,rgba(51,152,75,.14),rgba(255,255,255,.03) 42%,rgba(232,48,74,.08));
  box-shadow:0 0 0 1px rgba(126,217,87,.18),0 30px 66px -36px rgba(51,152,75,.5)}
.brb-card.feat:hover{box-shadow:0 0 0 1px rgba(126,217,87,.34),0 36px 76px -34px rgba(51,152,75,.62)}
.brb-card.feat::after{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; z-index:2;
  background:linear-gradient(180deg,#ffd257,#7ce68a,#3b8ef0,#e8304a); background-size:100% 300%; animation:brb-slide 6s linear infinite}
@keyframes brb-slide{to{background-position:0 300%}}

/* ----- Visual (links) — flach gehalten ----- */
.brb-visual{position:relative; width:172px; height:150px; border-radius:14px; cursor:default;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  background:radial-gradient(closest-side,rgba(51,152,75,.28),transparent 74%),repeating-linear-gradient(45deg,#0b1610 0 11px,#0d1b13 11px 22px);
  border:1px solid rgba(126,217,87,.28)}
.brb-card.feat .brb-visual{height:176px}   /* mehr Platz für das drehbare 3D */
.brb-visual:hover{border-color:rgba(126,217,87,.55)}
.brb-media{width:100%; height:100%; display:flex; align-items:center; justify-content:center; position:relative}
.brb-media .chero-tt,.brb-media img{max-width:96%; max-height:142px; object-fit:contain; filter:drop-shadow(0 10px 16px rgba(0,0,0,.55)); position:relative; z-index:1}
.brb-media canvas{max-width:100%; height:auto; position:relative; z-index:1; cursor:grab; touch-action:none; filter:drop-shadow(0 10px 16px rgba(0,0,0,.55))}
.brb-media canvas:active{cursor:grabbing}
.brb-flame{position:absolute; top:0; left:0; z-index:3; display:inline-flex; align-items:center; gap:5px;
  padding:5px 12px 5px 10px; font-size:11px; font-weight:900; letter-spacing:.03em; color:#3a2400;
  background:linear-gradient(135deg,#ffd257,#ff8a3d); border-radius:14px 0 12px 0; box-shadow:0 6px 14px rgba(255,138,61,.45)}
.brb-more{position:absolute; bottom:7px; left:50%; transform:translateX(-50%); z-index:3; cursor:pointer; white-space:nowrap;
  font-size:10.5px; font-weight:800; color:#dbe8ff; padding:3px 11px; border-radius:999px;
  background:rgba(6,12,20,.72); border:1px solid rgba(159,195,245,.35); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  opacity:.9; transition:.15s}
.brb-more:hover{opacity:1; background:rgba(59,142,240,.35); border-color:rgba(159,195,245,.6)}

/* ----- Inhalt (Mitte) ----- */
.brb-body{min-width:0}
.brb-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; color:#7ce68a; background:rgba(51,152,75,.16); border:1px solid rgba(126,217,87,.4); margin-bottom:8px}
.brb-name{margin:0 0 5px; font-size:clamp(18px,2.2vw,23px); font-weight:900; line-height:1.12; letter-spacing:.2px}
.brb-desc{margin:0 0 11px; font-size:13px; color:#9fb0c6; line-height:1.4; max-width:56ch}
.brb-items{display:flex; flex-wrap:wrap; gap:9px}
.brb-it{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 var(--br-line,rgba(255,255,255,.13))}
.brb-it-ic{font-size:19px; line-height:1; filter:drop-shadow(0 0 6px rgba(0,0,0,.5))}
.brb-it-tx{display:flex; flex-direction:column; line-height:1.15}
.brb-it-tx b{font-size:13px; font-weight:800}
.brb-it-tx span{font-size:11px; color:#93a3ba}
.brb-it.prestige{border-color:rgba(245,179,1,.42)} .brb-it.prestige b{color:#ffd257}
.brb-it.crystal{border-color:rgba(59,142,240,.42)}  .brb-it.crystal b{color:#6bb0ff}
.brb-it.armor{border-color:rgba(126,217,87,.42)}    .brb-it.armor b{color:#7ce68a}

/* ----- Preis + KAUFEN (rechts) ----- */
.brb-buy{display:flex; flex-direction:column; align-items:flex-end; text-align:right; gap:2px; flex:0 0 auto; min-width:210px}
.brb-was{font-size:12px; color:#8f9bb0; text-decoration:line-through; text-decoration-color:rgba(255,120,137,.6)}
.brb-price{font-size:38px; font-weight:900; color:#fff; line-height:1}
.brb-price sup{font-size:16px; font-weight:800; top:-.7em; margin-left:1px}
.brb-price-note{font-size:11.5px; color:#7ce68a; font-weight:800; margin-bottom:9px}
.brb-buy .chero-btn{margin-top:2px}
.brb-buybox{display:flex; gap:8px; align-items:stretch; margin-top:11px; width:100%; max-width:320px}
.brb-buybox input{flex:1; min-width:0; background:rgba(0,0,0,.3); border:1px solid var(--br-line,rgba(255,255,255,.14)); color:#fff;
  border-radius:11px; padding:11px 13px; font-size:14px; outline:none}
.brb-buybox input:focus{border-color:#e8304a; box-shadow:0 0 0 3px rgba(232,48,74,.22)}
.brb-buyhint{margin-top:8px; font-size:12.5px; min-height:16px; text-align:right; color:#ffbfc8; max-width:320px}
.brb-buyhint.err{color:#ff9d9d}
/* Spar-Badge + Emoji-Visual + weitere Chip-/Badge-Farben (Nicht-Featured-Karten) */
.brb-save{align-self:flex-end; font-size:11.5px; font-weight:900; letter-spacing:.03em; color:#06110a;
  background:linear-gradient(135deg,#ffd257,#7ed957); padding:3px 11px; border-radius:999px; margin-bottom:4px; box-shadow:0 4px 12px rgba(126,217,87,.35)}
.brb-visual.novel{border-color:rgba(59,142,240,.3);
  background:radial-gradient(closest-side,rgba(59,142,240,.24),transparent 74%),repeating-linear-gradient(45deg,#0b1220 0 11px,#0d1526 11px 22px)}
.brb-visual.novel:hover{border-color:rgba(59,142,240,.55)}
.brb-emoji{font-size:60px; line-height:1; filter:drop-shadow(0 8px 14px rgba(0,0,0,.5)); animation:brb-float 3.6s ease-in-out infinite}
@keyframes brb-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.brb-badge.alt{color:#9fc3f5; background:rgba(59,142,240,.15); border-color:rgba(59,142,240,.4)}
.brb-it.deluxe{border-color:rgba(180,130,255,.45)} .brb-it.deluxe b{color:#c9a6ff}
.brb-it.premium{border-color:rgba(126,217,87,.4)}  .brb-it.premium b{color:#9be0a6}
.brb-buyhint.ok{color:#7ce68a}
/* KAUFEN mittig im Button (der zero-width Sparkle-Span + gap schob den Text nach links) */
.brb-buy .chero-btn-face,.brb-buybox .chero-btn-face{justify-content:center; gap:0}
/* Hinweis auf die Rang-Vergleichstabelle oben */
.brb-ranknote{display:inline-block; margin-top:10px; font-size:11.5px; font-weight:700; color:#9fc3f5; text-decoration:none; transition:.15s}
.brb-ranknote:hover{color:#cfe2ff; text-decoration:underline}

/* ----- Teaser für kommende Bundles ----- */
.brb-soon{display:flex; align-items:center; justify-content:center; gap:9px; padding:16px; border-radius:16px;
  border:1px dashed var(--br-line,rgba(255,255,255,.18)); color:#8f9bb0; font-size:13.5px; font-weight:700;
  background:rgba(255,255,255,.02)}

/* ----- Responsive: unter 760px stapeln ----- */
@media(max-width:760px){
  .brb-card{grid-template-columns:1fr; justify-items:center; text-align:center; padding:18px}
  .brb-visual{width:100%; max-width:280px; height:150px}
  .brb-body{width:100%}
  .brb-name{text-align:center}
  .brb-desc{margin-left:auto; margin-right:auto}
  .brb-items{justify-content:center}
  .brb-it-tx{text-align:left}
  .brb-buy{align-items:center; text-align:center; width:100%}
  .brb-buyhint{text-align:center; margin-left:auto; margin-right:auto}
  .brb-buybox{margin-left:auto; margin-right:auto}
  .brb-card.feat::after{left:0; right:0; top:0; bottom:auto; width:auto; height:4px; background-size:300% 100%; animation:brb-slideh 6s linear infinite}
}
@keyframes brb-slideh{to{background-position:300% 0}}

/* =====================================================================
 *  Wiederverwendete Bausteine (KAUFEN-Button, Modal, Fähigkeiten) —
 *  aus dem alten Krokodil-Bundle übernommen.
 * ===================================================================== */
.chero-btn{position:relative; display:inline-block; border:0; background:none; padding:0; cursor:pointer; font-family:inherit;
  transition:transform .12s cubic-bezier(.3,.7,.4,1)}
.chero-btn:hover{transform:translateY(-2px)}
.chero-btn:disabled{opacity:.55; cursor:default; transform:none}
.chero-btn-base{position:absolute; left:0; right:0; top:8px; bottom:-8px; background:#8e1526; z-index:0;
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
.chero-btn-face{position:relative; z-index:1; display:inline-flex; align-items:center; gap:10px; padding:16px 44px;
  font-size:18px; font-weight:900; letter-spacing:1.2px; color:#fff; overflow:hidden;
  background:linear-gradient(180deg,#ff6377,#e8304a); box-shadow:inset 0 2px #fff6;
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  transition:background .15s, transform .12s cubic-bezier(.3,.7,.4,1)}
.chero-btn:hover .chero-btn-face{background:linear-gradient(180deg,#ff7789,#f5455f)}
.chero-btn:active .chero-btn-face{transform:translateY(7px)}
.chero-btn-face::after{content:""; position:absolute; top:0; left:-70%; width:48%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent); transform:skewX(-18deg);
  animation:chero-shine 3.4s ease-in-out infinite}
@keyframes chero-shine{0%,58%{left:-70%}100%{left:135%}}
.chero-btn.sm .chero-btn-face{padding:11px 20px; font-size:14px; letter-spacing:.5px}
.chero-btn.sm .chero-btn-base{top:6px; bottom:-6px}
.chero-btn-face .br-spark{position:relative; display:inline-block; width:0}
.chero-btn-face .br-spark i{position:absolute; width:3px; height:3px; border-radius:50%; background:#fff; opacity:0;
  animation:chero-sp 2.6s ease-in-out infinite}
.chero-btn-face .br-spark i:nth-child(1){left:-30px; top:-8px; animation-delay:.0s}
.chero-btn-face .br-spark i:nth-child(2){left:-18px; top:6px; animation-delay:.3s}
.chero-btn-face .br-spark i:nth-child(3){left:8px; top:-10px; animation-delay:.6s}
.chero-btn-face .br-spark i:nth-child(4){left:20px; top:5px; animation-delay:.9s}
.chero-btn-face .br-spark i:nth-child(5){left:-8px; top:9px; animation-delay:1.2s}
.chero-btn-face .br-spark i:nth-child(6){left:2px; top:-6px; animation-delay:1.5s}
@keyframes chero-sp{0%,100%{opacity:0; transform:scale(.5)}50%{opacity:1; transform:scale(1.3)}}

/* Detail-Modal (Rüstungs-Fähigkeiten + 3D) */
.chero-modal{position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; padding:20px}
.chero-modal-bg{position:absolute; inset:0; background:rgba(4,8,14,.74); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.chero-modal-card{position:relative; z-index:1; display:grid; grid-template-columns:.85fr 1.15fr; gap:0; max-width:820px; width:100%; max-height:92vh; overflow:auto;
  background:linear-gradient(160deg,#121a29,#0c1220); border:1px solid var(--br-line,rgba(255,255,255,.16)); border-radius:22px;
  box-shadow:0 40px 100px -30px rgba(0,0,0,.9); color:#fff; font-family:Inter,Poppins,"Segoe UI",system-ui,sans-serif;
  animation:chero-modalin .25s cubic-bezier(.2,.9,.3,1.2)}
@keyframes chero-modalin{from{opacity:0; transform:translateY(14px) scale(.97)}to{opacity:1; transform:none}}
@media(max-width:680px){.chero-modal-card{grid-template-columns:1fr}}
.chero-modal-x{position:absolute; top:12px; right:14px; z-index:3; width:34px; height:34px; border-radius:10px;
  border:1px solid var(--br-line,rgba(255,255,255,.18)); background:rgba(255,255,255,.06); color:#fff; font-size:15px; cursor:pointer; transition:.15s}
.chero-modal-x:hover{background:rgba(255,255,255,.15)}
.chero-modal-view{position:relative; min-height:400px; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(320px 340px at 50% 40%,rgba(51,152,75,.22),transparent 72%),repeating-linear-gradient(45deg,#0a1610 0 12px,#0c1b13 12px 24px);
  border-radius:22px 0 0 22px}
@media(max-width:680px){.chero-modal-view{border-radius:22px 22px 0 0; min-height:300px}}
.chero-modal-view canvas{max-width:100%; height:auto; cursor:grab; touch-action:none; filter:drop-shadow(0 14px 22px rgba(0,0,0,.6))}
.chero-modal-view canvas:active{cursor:grabbing}
.chero-modal-view .chero-tt{max-width:100%; max-height:380px; object-fit:contain; margin:auto; filter:drop-shadow(0 12px 20px rgba(0,0,0,.55))}
.chero-modal-info{padding:30px 30px 28px}
.chero-modal-title{margin:12px 0 6px; font-size:27px; font-weight:900}
.chero-modal-sub{margin:0 0 18px; color:#aeb8c9; font-size:14px}
.chero-modal-sub b{color:#7ce68a}
.chero-limited{display:inline-flex; align-items:center; gap:7px; padding:6px 14px; border-radius:999px;
  font-size:12px; font-weight:900; letter-spacing:.04em; color:#3a2400; background:linear-gradient(135deg,#ffd257,#ff8a3d)}
.chero-abilities{display:grid; gap:11px; margin-bottom:14px}
.ab{display:flex; gap:12px; align-items:flex-start}
.ab-i{font-size:20px; width:30px; text-align:center; flex:0 0 auto; filter:drop-shadow(0 0 6px rgba(126,217,87,.45))}
.ab-t{display:flex; flex-direction:column}
.ab-t b{font-size:14.5px; font-weight:800}
.ab-t span{font-size:12.8px; color:#9fb0c6; line-height:1.35}
.chero-abnote{font-size:12.5px; color:#8f9bb0; margin:0 0 18px}
.chero-modal-info .chero-btn-face{padding:16px 46px; font-size:18px; letter-spacing:1px}
.chero-modal-info .chero-btn-base{top:8px; bottom:-8px}
.chero-modal-info .br-spark i{background:#fff}