/* Ergänzungen für die eigenständige Shop-Seite */
.lb-logout { background: none; border: 0; padding: 0; cursor: pointer; }
.footer-bottom p { line-height: 1.7; }
.empty-note b { color: var(--primary); }
.legal { max-width: 820px; margin: 0 auto; font-size: 15px; }
.legal h3 { margin: 26px 0 8px; font-size: 19px; }
.legal p { margin: 0 0 10px; color: rgba(255,255,255,.85); }

/* =====================================================================
   DESIGN WIE BEEBLOCKS.NET – Homebar, Farben, Footer
   ===================================================================== */
:root { --bb-deep: #0a1530; --bb-bg-2: #102145; --bb-muted: #a0badf; --bb-muted-2: #7e99c8; --bb-honey: #ffb02e; --bb-top-h: 64px;
        --bb-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
html { background: var(--bb-deep); }
body { background: linear-gradient(180deg, var(--bb-bg-2) 0, var(--bg) 900px); }
.page-bg { background: linear-gradient(180deg, var(--bb-bg-2) 0, var(--bg) 900px); }
.page-bg.combs::before { opacity: .55; }

/* ---------- Homebar ---------- */
.bb-wrap { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 700px) { .bb-wrap { padding: 0 28px; } }
.bb-top { position: sticky; top: 0; z-index: 50; font-family: var(--bb-font); background: rgba(10,21,48,.9); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); }
.bb-top-in { display: flex; align-items: center; gap: 16px; min-height: var(--bb-top-h); }
.bb-nav { display: flex; gap: 4px; }
.bb-nav a { position: relative; text-decoration: none; font-weight: 700; font-size: 15px; color: var(--bb-muted); padding: 8px 12px; border-radius: 8px; transition: color .15s, background .15s; }
.bb-nav a:hover { color: #eef4fc; background: rgba(255,255,255,.05); }
.bb-nav a[aria-current=page] { color: #eef4fc; background: rgba(106,159,208,.16); }
.bb-nav a.shop { background: var(--bb-honey); color: #2b1c00; font-weight: 800; margin-right: 8px; overflow: hidden; isolation: isolate; box-shadow: 0 3px 0 #c27a00; animation: bbBump 5.5s ease-in-out infinite; transform-origin: center; }
.bb-nav a.shop::after { content: ""; position: absolute; z-index: -1; top: -40%; bottom: -40%; left: -80%; width: 55%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.95), transparent); transform: skewX(-22deg); animation: bbShine 5.5s cubic-bezier(.5,0,.2,1) infinite; }
.bb-nav a.shop:hover { background: #ffbd4f; color: #2b1c00; }
@keyframes bbBump { 0%,62%,100% { transform: scale(1) rotate(0); box-shadow: 0 3px 0 #c27a00, 0 0 0 rgba(255,176,46,0); }
    66% { transform: scale(1.12) rotate(-3deg); box-shadow: 0 3px 0 #c27a00, 0 0 22px rgba(255,176,46,.75); }
    70% { transform: scale(.96) rotate(2deg); }
    75% { transform: scale(1.08) rotate(-1.5deg); box-shadow: 0 3px 0 #c27a00, 0 0 16px rgba(255,176,46,.55); }
    80% { transform: scale(1) rotate(0); box-shadow: 0 3px 0 #c27a00, 0 0 6px rgba(255,176,46,.25); } }
@keyframes bbShine { 0%,62% { left: -80%; } 76% { left: 140%; } 100% { left: 140%; } }
.bb-top-pill { margin-left: auto; display: flex; align-items: stretch; background: rgba(255,255,255,.08); border-radius: 9px; overflow: hidden; }
.bb-ip-chip { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; background: none; border: none; padding: 9px 14px; font: 700 14px var(--bb-font); color: #eef4fc; transition: background .15s; }
.bb-ip-chip:hover { background: rgba(255,255,255,.06); }
.bb-ip-chip svg { width: 15px; height: 15px; opacity: .85; }
.bb-top-dc { display: grid; place-items: center; width: 42px; color: #eef4fc; border-left: 1px solid rgba(255,255,255,.14); transition: background .15s; }
.bb-top-dc:hover { background: #5865f2; }
.bb-top-dc svg { width: 18px; height: 18px; }
.bb-menu-btn { display: none; }
.bb-nav a.m-only { display: none; }
@media (max-width: 699px) {
    :root { --bb-top-h: 58px; }
    .bb-top-in { gap: 8px; }
    .bb-ip-chip { padding: 8px 11px; font-size: 13px; }
    .bb-ip-chip svg { width: 13px; height: 13px; }
    .bb-top-dc { width: 38px; } .bb-top-dc svg { width: 17px; height: 17px; }
    .bb-menu-btn { order: -1; display: grid; place-items: center; flex: none; width: 40px; height: 36px; border: none; border-radius: 9px; background: rgba(255,255,255,.08); cursor: pointer; }
    .bb-menu-btn span, .bb-menu-btn span::before, .bb-menu-btn span::after { display: block; width: 18px; height: 2px; border-radius: 2px; background: #eef4fc; transition: transform .2s, background .2s; }
    .bb-menu-btn span { position: relative; }
    .bb-menu-btn span::before, .bb-menu-btn span::after { content: ""; position: absolute; left: 0; }
    .bb-menu-btn span::before { top: -6px; } .bb-menu-btn span::after { top: 6px; }
    .bb-top.open .bb-menu-btn span { background: transparent; }
    .bb-top.open .bb-menu-btn span::before { transform: translateY(6px) rotate(45deg); }
    .bb-top.open .bb-menu-btn span::after { transform: translateY(-6px) rotate(-45deg); }
    .bb-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 4px; padding: 10px 16px 18px; background: #081128; box-shadow: 0 16px 30px rgba(0,0,0,.4); }
    .bb-top.open .bb-nav { display: flex; }
    .bb-nav a, .bb-nav a.m-only { display: flex; align-items: center; padding: 12px 14px; font-size: 16px; border-radius: 10px; }
    .bb-nav a.shop { margin: 0 0 6px; justify-content: center; animation: none; box-shadow: 0 4px 0 #c27a00; }
    .bb-nav a.shop::after { display: none; }
}
@media (prefers-reduced-motion: reduce) { .bb-nav a.shop, .bb-nav a.shop::after { animation: none; } }

/* Logo unter der Homebar, Login-Leiste klebt unter der Homebar */
.site-hero { display: flex; justify-content: center; padding-top: 26px; padding-bottom: 30px; }
.site-hero .brand-img { max-height: var(--logo-h); }
.loginbar-wrap { top: var(--bb-top-h); }
@media (max-width: 900px) { .site-hero { padding-top: 18px; padding-bottom: 20px; } .site-hero .brand-img { max-height: min(var(--logo-h), 96px); } }

/* ---------- Footer ---------- */
.bb-foot { margin-top: 56px; flex-shrink: 0; background: #0b1226; position: relative; padding: 52px 0 120px; font-family: var(--bb-font); }
.bb-foot-row { display: grid; gap: 22px; justify-items: center; align-items: center; }
@media (max-width: 819px) { .bb-foot-row .bb-foot-brand { order: -1; } }
@media (min-width: 820px) { .bb-foot-row { grid-template-columns: 1fr auto 1fr; } .bb-foot-row > :first-child { justify-self: start; } .bb-foot-row > :last-child { justify-self: end; } }
.bb-foot-pill { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 250px; padding: 14px 26px; border-radius: 14px; border: 0; background: rgba(255,255,255,.05); color: #eef4fc; font: 800 15px var(--bb-font); text-decoration: none; cursor: pointer; transition: background .15s; }
.bb-foot-pill:hover { background: rgba(255,255,255,.1); }
.bb-foot-pill svg { width: 17px; height: 17px; }
.bb-foot-brand img { width: 200px; height: auto; }
.bb-foot-bottom { margin-top: 40px; padding-top: 24px; background: linear-gradient(rgba(255,255,255,.07), rgba(255,255,255,.07)) top center / calc(100% - 32px) 1px no-repeat; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; font-size: 13px; color: var(--bb-muted-2); }
@media (min-width: 700px) { .bb-foot-bottom { background-size: calc(100% - 56px) 1px; } }
@media (min-width: 820px) { .bb-foot-bottom { flex-direction: row; justify-content: space-between; text-align: left; } }
.bb-foot-copy { margin: 0; line-height: 1.6; }
.bb-foot-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 0; }
.bb-foot-links div { display: flex; align-items: center; gap: 18px; padding: 0 18px; }
.bb-foot-links div + div { border-left: 1px solid rgba(255,255,255,.12); }
.bb-foot-links a { color: var(--bb-muted); font-weight: 700; text-decoration: none; font-size: 13.5px; }
.bb-foot-links a:hover { color: #eef4fc; }
@media (min-width: 820px) { .bb-foot-links div:last-child { padding-right: 0; } }
@media (max-width: 819px) { .bb-foot-links { flex-direction: column; gap: 10px; } .bb-foot-links div + div { border-left: none; } .bb-foot { padding-bottom: 110px; } }
/* Homebar & Footer bündig mit den Shop-Boxen */
/* Breite wie beeblocks.net (.wrap: max 1140px, 28px Rand, Handy 16px) */
:root { --container: 1140px; }
.container, .bb-wrap { max-width: 1140px; padding: 0 28px; }
@media (max-width: 699px) { .container, .bb-wrap { padding: 0 16px; } }
.pm { max-width: 1032px; }

/* ---------- Stadt-Hintergrund wie auf beeblocks.net (fix, ohne Ausblenden) ---------- */
.page-bg, .page-bg.combs { background: var(--bb-deep); }
.page-bg.combs::before { display: none; }
.page-bg::after {
    content: ""; position: absolute; inset: 0;
    background:
        linear-gradient(90deg, rgba(13,26,54,.72) 0%, rgba(13,26,54,.5) 45%, rgba(13,26,54,.28) 100%),
        linear-gradient(180deg, rgba(13,26,54,.25) 0%, transparent 30%);
}
.page-bg { container-type: size; }
/* Gleiche Bildlage wie der Kopfbereich auf beeblocks.net:
   Bild auf volle Breite, Box beginnt unter der 64px-Leiste, 520px hoch, Ausschnitt "center 30%".
   Ist der Bildschirm höher als das Bild, wird es so weit vergrößert, dass es bis unten reicht. */
.page-bg .bb-city {
    position: absolute; inset: 0;
    --bb-img-h: max(calc(100vw / 1.7757), calc((100vh - 220px) / .7));
    --bb-img-h: max(calc(100cqw / 1.7757), calc((100cqh - 220px) / .7));
    background-image: url('hintergrund.webp');
    background-repeat: no-repeat;
    background-size: auto var(--bb-img-h);
    background-position: center calc(64px + .3 * (520px - var(--bb-img-h)));
    opacity: .9;
}
@supports not (background-image: url('x.webp')) { .page-bg .bb-city { background-image: url('hintergrund.jpg'); } }
body { background: transparent; }
/* Block-Icon als Platzhalter, wenn ein Paket kein Bild hat */
.bb-icon-fallback { width: 62%; height: 62%; max-width: 150px; max-height: 150px; object-fit: contain; margin: auto; filter: drop-shadow(0 10px 18px rgba(0,0,0,.35)); }
.card-media .bb-icon-fallback, .row-media .bb-icon-fallback, .pm-media .bb-icon-fallback { position: static; }
.drawer-item-img .bb-icon-fallback { width: 100%; height: 100%; filter: none; }

/* =====================================================================
   HONIG-GOLD EXAKT WIE BEEBLOCKS.NET
   Fläche #ffb02e, Kante #c27a00, Hover #ffbd4f, Text #2b1c00
   ===================================================================== */
:root { --primary: #ffb02e; --on-primary: #2b1c00; --highlight: #ffb02e; --gold: #ffb02e; --primary-dark: #c27a00; --bb-honey-edge: #c27a00; --bb-honey-hover: #ffbd4f; }
.btn-buy:not(.btn-danger), .btn-cart:not(.is-empty), .btn-gold { background: var(--primary); color: #2b1c00; box-shadow: inset 0 -7px 0 var(--bb-honey-edge); }
.btn-buy:not(.btn-danger):not(.is-disabled):hover, .btn-cart:not(.is-empty):hover, .btn-gold:hover { background: var(--bb-honey-hover); filter: none; }
.btn-buy:not(.btn-danger):active, .btn-cart:not(.is-empty):active { box-shadow: inset 0 -3px 0 var(--bb-honey-edge); }
.featured-gold .card--featured, .featured-gold .row-card.card--featured { background: var(--primary); color: #2b1c00; box-shadow: inset 0 -8px 0 var(--bb-honey-edge), 0 20px 40px rgba(0,0,0,.18); }
.featured-gold .card--featured .card-name, .featured-gold .card--featured .card-name button,
.featured-gold .card--featured .card-price, .featured-gold .card--featured .card-media-fallback { color: #2b1c00; }
.badge-best { background: var(--primary); color: #2b1c00; box-shadow: inset 0 -5px 0 var(--bb-honey-edge), 0 6px 14px rgba(0,0,0,.25); }
.featured-gold .card--featured .badge-best { color: #ffb02e; }
.lb-pill.is-active, .lb-seg-item.is-active, .account-tabs a.is-active { background: var(--primary); color: #2b1c00; }

/* =====================================================================
   v7 – Feinschliff wie beeblocks.net
   ===================================================================== */
/* Gleiche Zeilenhöhe wie die Website → Homebar-Knöpfe exakt gleich hoch/positioniert */
.bb-top, .bb-foot { line-height: 1.55; }
/* Platz statt Logo */
.bb-hero-gap { height: 36px; }
@media (max-width: 699px) { .bb-hero-gap { height: 20px; } }

/* Abrundungen wie auf der Website (Karten 14–16px, Buttons 11px) */
:root { --radius: 14px; --radius-sm: 10px; }
.btn { border-radius: 11px; }
.loginbar { border-radius: 14px; }
.ranks-table, .promo, .cat-banner, .card, .row-card, .rank-card, .pm, .pmodal, .modal { border-radius: 16px; }