/* ============================================================================
   4Blocks Store — schwarz, elegant, animiert (eigene Identität, DonutSMP-Niveau).
   Marken-Akzent (Blau/Himmelblau/Sonnengelb) kommt aus den injizierten Vars
   (--brand / --brand-2 / --gold, siehe storeRootVars). Alles andere = schwarze Canvas.
   Fonts self-hosted (CSP-safe). Mobile-first sauber. prefers-reduced-motion respektiert.
   ============================================================================ */

@font-face { font-family:"Oswald"; font-weight:500; font-display:swap; src:url("/assets/site/fonts/oswald-500.woff2") format("woff2"); }
@font-face { font-family:"Oswald"; font-weight:700; font-display:swap; src:url("/assets/site/fonts/oswald-700.woff2") format("woff2"); }

:root{
  /* Schwarze Canvas (leicht blaustichige Neutrale — bewusst gewählt, nicht reines Grau) */
  --ink:      #06070a;
  --ink-2:    #0a0c12;
  --surface:  #0e111a;
  --surface-2:#141926;
  --line:     rgba(255,255,255,.08);
  --line-2:   rgba(255,255,255,.14);
  --fg:       #f4f6fb;
  --muted:    #8a93a6;
  --muted-2:  #626b7d;
  /* Akzente (Fallback; storeRootVars überschreibt mit brand.yml) — auf neue Marke gesetzt */
  --brand:    #066ffe;
  --brand-2:  #4d94ff;
  --gold:     #ecfe06;
  --success:  #3fb950;
  --grad:     linear-gradient(135deg, var(--brand-2), var(--brand));
  --radius:   18px;
  --radius-sm:12px;
  --shadow:   0 1px 0 rgba(255,255,255,.04) inset, 0 18px 40px -24px rgba(0,0,0,.9);
  --glow:     0 0 0 1px var(--line), 0 24px 60px -30px color-mix(in srgb, var(--brand) 60%, transparent);
  --font:     system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display:  "Oswald", var(--font);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body.store{
  font-family:var(--font);
  color:var(--fg);
  background:var(--ink);
  line-height:1.5;
  min-height:100dvh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font:inherit; color:inherit; cursor:pointer; border:0; background:none; }

/* Ambient-Aura — langsam driftender Blau-Glow hinter allem (schwarz bleibt dominant) */
.st-aura{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60vw 60vw at 18% 8%,  color-mix(in srgb, var(--brand) 26%, transparent), transparent 60%),
    radial-gradient(55vw 55vw at 88% 92%, color-mix(in srgb, var(--brand-2) 20%, transparent), transparent 62%),
    radial-gradient(40vw 40vw at 92% 6%,  color-mix(in srgb, var(--gold) 8%, transparent), transparent 60%);
  opacity:.55;
  animation:auraDrift 26s ease-in-out infinite alternate;
}
@keyframes auraDrift{ from{ transform:translate3d(-2%,-1%,0) scale(1); } to{ transform:translate3d(2%,2%,0) scale(1.08); } }

/* ── Nav ──────────────────────────────────────────────────────────────────── */
.st-nav{
  position:relative; z-index:5;
  display:flex; align-items:center; gap:18px;
  padding:18px clamp(16px,4vw,40px);
  flex-wrap:wrap;
}
.st-brand{ display:flex; align-items:center; gap:11px; margin-right:auto; }
.st-logo{
  display:grid; place-items:center; width:38px; height:38px; border-radius:11px;
  font-family:var(--display); font-weight:700; font-size:16px; letter-spacing:.5px; color:#fff;
  background:var(--grad); box-shadow:0 8px 20px -8px color-mix(in srgb, var(--brand) 80%, transparent);
}
.st-brand-name{ font-family:var(--display); font-weight:700; font-size:20px; letter-spacing:.5px; }
.st-links{ display:flex; align-items:center; gap:6px; }
.st-links a{
  padding:8px 14px; border-radius:10px; font-weight:600; font-size:14.5px; color:var(--muted);
  transition:color .18s, background .18s;
}
.st-links a:hover{ color:var(--fg); background:var(--surface); }
.st-links a.active{ color:var(--fg); background:color-mix(in srgb, var(--brand) 22%, transparent); }
.st-lang{ display:flex; gap:2px; padding:3px; border-radius:10px; background:var(--surface); border:1px solid var(--line); }
.st-lang a{ padding:5px 10px; border-radius:8px; font-size:12.5px; font-weight:700; letter-spacing:.5px; color:var(--muted-2); transition:.16s; }
.st-lang a:hover{ color:var(--fg); }
.st-lang a.active{ color:#fff; background:var(--grad); }

/* ── Landing: Hero füllt die erste Ansicht, Footer kommt erst danach ────────── */
.store-landing .st-hero{
  position:relative; z-index:1;
  min-height:100svh;
  display:flex; flex-direction:column;
}
.st-bento{
  flex:1; align-content:center;
  width:min(1280px, 94vw); margin:0 auto; padding:clamp(12px,3vh,36px) 0;
  display:grid; gap:16px;
  grid-template-columns:1fr 1.3fr 1.3fr 1fr;
  grid-template-rows:repeat(2, minmax(150px, 22vh));
  grid-template-areas:
    "brand mcstore gtastore discord"
    "panel mcstore gtastore join";
}
.bento-brand{ grid-area:brand; }
.bento-store-mc{ grid-area:mcstore; } .bento-store-gta{ grid-area:gtastore; }
.bento-discord{ grid-area:discord; } .bento-panel{ grid-area:panel; } .bento-join{ grid-area:join; }
/* GTA-Store-Kachel bekommt den Crimson-Akzent (klare Trennung von der blauen MC-Kachel) */
.bento-store-gta{ --brand-2:#ff5a63; }
.bento-store-gta .bento-go{ color:#ff6b73; }

.bento-tile{
  position:relative; overflow:hidden;
  border-radius:var(--radius); border:1px solid var(--line);
  background:var(--surface); box-shadow:var(--shadow);
  transition:transform .28s cubic-bezier(.2,.7,.2,1), border-color .28s, box-shadow .28s;
}
.bento-tile:not(.bento-brand):not(.bento-join):hover{ transform:translateY(-4px); border-color:var(--line-2); box-shadow:var(--glow); }

/* Marke */
.bento-brand{ display:flex; flex-direction:column; gap:8px; padding:22px; justify-content:center;
  background:linear-gradient(160deg, var(--surface-2), var(--ink-2)); }
.bento-logo{ width:52px; height:52px; border-radius:14px; display:grid; place-items:center;
  font-family:var(--display); font-weight:700; font-size:22px; color:#fff; background:var(--grad);
  box-shadow:0 10px 26px -10px color-mix(in srgb, var(--brand) 80%, transparent); }
.bento-brand-name{ font-family:var(--display); font-weight:700; font-size:26px; letter-spacing:.5px; line-height:1; }
.bento-brand-tag{ color:var(--muted); font-size:13px; margin-bottom:4px; }
.bento-ip{
  margin-top:auto; display:flex; align-items:center; gap:10px; width:100%;
  padding:11px 13px; border-radius:12px; border:1px solid var(--line-2);
  background:var(--ink); transition:border-color .2s, background .2s;
}
.bento-ip:hover{ border-color:var(--brand); }
.bento-ip-val{ font-family:var(--display); font-weight:700; letter-spacing:.4px; font-size:15px; }
.st-ip-copy{ margin-left:auto; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.6px;
  color:var(--brand-2); padding:4px 9px; border-radius:999px; background:color-mix(in srgb, var(--brand) 18%, transparent); }
.copied .st-ip-copy{ color:#04120a; background:var(--success); }

/* Bild-Kacheln (Store, Panel) */
.bento-img{ display:flex; flex-direction:column; justify-content:flex-end; padding:20px; min-height:150px; }
.bento-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.bento-img:hover .bento-bg{ transform:scale(1.06); }
.bento-shade{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(4,6,10,.15) 0%, rgba(4,6,10,.5) 55%, rgba(4,6,10,.92) 100%); }
.bento-label{ position:relative; z-index:2; font-family:var(--display); font-weight:700;
  font-size:clamp(22px,3.2vw,34px); letter-spacing:.5px; text-shadow:0 2px 16px rgba(0,0,0,.6); }
.bento-store .bento-label{ font-size:clamp(24px,3.4vw,40px); }
.bento-go{ position:relative; z-index:2; margin-top:4px; font-weight:700; font-size:14px;
  color:var(--brand-2); display:inline-flex; align-items:center; gap:6px;
  transition:gap .25s, color .2s; }
.bento-img:hover .bento-go{ gap:12px; color:#fff; }

/* Discord */
.bento-discord{ display:flex; flex-direction:column; justify-content:center; gap:6px; padding:20px;
  background:linear-gradient(160deg, color-mix(in srgb,#5865F2 26%, var(--surface)), var(--surface)); }
.bento-dc-ico{ width:40px; height:40px; color:#fff; opacity:.95; }
.bento-dc-ico svg{ width:100%; height:100%; }
.bento-dc-title{ font-family:var(--display); font-weight:700; font-size:22px; letter-spacing:.5px; }
.bento-dc-sub{ color:var(--muted); font-size:13px; }
.bento-discord:hover .bento-dc-ico{ animation:wiggle .5s ease; }
@keyframes wiggle{ 25%{transform:rotate(-8deg)} 75%{transform:rotate(8deg)} }

/* So spielst du */
.bento-join{ display:flex; flex-direction:column; gap:6px; padding:20px; justify-content:center; }
.bento-join-title{ font-family:var(--display); font-weight:700; font-size:20px; letter-spacing:.5px; margin-bottom:4px; }
.bento-field-lbl{ font-size:11px; text-transform:uppercase; letter-spacing:.7px; color:var(--muted-2); }
.bento-field{ display:flex; align-items:center; padding:9px 12px; border-radius:10px;
  background:var(--ink); border:1px solid var(--line); font-family:var(--display); font-weight:700; font-size:14.5px; }
.bento-copy{ width:100%; transition:border-color .2s; }
.bento-copy:hover{ border-color:var(--brand); }
.bento-copy-val{ overflow:hidden; text-overflow:ellipsis; }

/* Scroll-Hinweis */
.st-scroll-hint{ display:grid; place-items:center; padding:14px 0 22px; }
.st-scroll-hint span{ width:24px; height:38px; border:2px solid var(--line-2); border-radius:14px; position:relative; }
.st-scroll-hint span::after{ content:""; position:absolute; left:50%; top:7px; width:4px; height:8px; border-radius:2px;
  background:var(--brand-2); transform:translateX(-50%); animation:scrollDot 1.6s ease-in-out infinite; }
@keyframes scrollDot{ 0%,100%{opacity:0; transform:translate(-50%,0)} 40%{opacity:1} 70%{opacity:0; transform:translate(-50%,12px)} }

/* Entrance-Animation (gestaffelt) */
.fx{ opacity:0; transform:translateY(14px); animation:riseIn .6s cubic-bezier(.2,.7,.2,1) forwards; }
.st-bento .fx:nth-child(1){ animation-delay:.04s } .st-bento .fx:nth-child(2){ animation-delay:.12s }
.st-bento .fx:nth-child(3){ animation-delay:.2s }  .st-bento .fx:nth-child(4){ animation-delay:.28s }
.st-bento .fx:nth-child(5){ animation-delay:.36s }
@keyframes riseIn{ to{ opacity:1; transform:none; } }

/* Floatender Sprach-Umschalter (Landing hat keinen Topbar) */
.st-lang-float{ position:fixed; top:16px; right:16px; z-index:20;
  backdrop-filter:blur(8px); background:color-mix(in srgb, var(--ink) 72%, transparent); }
/* Zurück-zur-Hauptseite-Button (oben links) */
.st-back-float{ position:fixed; top:16px; left:16px; z-index:20; padding:9px 15px; border-radius:12px;
  backdrop-filter:blur(8px); background:color-mix(in srgb, var(--ink) 72%, transparent);
  border:1px solid color-mix(in srgb, var(--fg) 14%, transparent); }
.st-back-float:hover{ border-color:color-mix(in srgb, var(--fg) 30%, transparent); }
.st-back-float .st-back{ font-size:15px; font-weight:800; color:var(--fg); margin:0; }

/* ── Server-Features (Landing, unter dem Hero) ─────────────────────────────── */
.st-feats{ position:relative; z-index:1; padding:40px 0 10px; }
.st-feats-inner{ width:min(1180px,94vw); margin:0 auto; }
.st-feats-head{ text-align:center; margin-bottom:26px; }
.st-feats-head .st-h2{ justify-content:center; }
.st-feats-head .st-h2::before{ display:none; }
.st-feat-cat{ margin:26px 0 14px; }
.st-feat-cat-name{ font-family:var(--display); font-weight:700; font-size:20px; letter-spacing:.5px;
  display:flex; align-items:center; gap:10px; }
.st-feat-cat-name::before{ content:""; width:5px; height:20px; border-radius:3px; background:var(--grad); }
.st-feat-cat-blurb{ color:var(--muted); font-size:14px; margin-top:4px; }
.st-feat-grid{ display:grid; gap:14px; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); }
.st-feat{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:16px; transition:transform .22s cubic-bezier(.2,.7,.2,1), border-color .22s, box-shadow .22s; }
.st-feat:hover{ transform:translateY(-3px); border-color:var(--line-2); box-shadow:var(--glow); }
.st-feat.is-featured{ background:linear-gradient(160deg, var(--surface-2), var(--ink-2));
  border-color:color-mix(in srgb, var(--brand) 30%, var(--line)); }
.st-feat-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.st-feat-ico{ font-size:26px; line-height:1; }
.st-feat-badge{ font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.5px;
  padding:3px 9px; border-radius:999px; white-space:nowrap; }
.st-feat-badge.s-live{ color:#04120a; background:var(--success); }
.st-feat-badge.s-wip{ color:#12100a; background:var(--warning); }
.st-feat-badge.s-plan{ color:var(--muted); background:var(--surface-2); border:1px solid var(--line-2); }
.st-feat-title{ font-family:var(--display); font-weight:700; font-size:17px; letter-spacing:.3px; margin-bottom:6px; }
.st-feat-desc{ color:var(--muted); font-size:13.5px; line-height:1.55; }

/* ── Browse / Shop ─────────────────────────────────────────────────────────── */
.st-main{ position:relative; z-index:1; }
/* Shop-Inhalt füllt mind. eine Bildschirmhöhe → Footer liegt darunter, erst beim Scrollen sichtbar. */
.st-main-shop{ min-height:100svh; padding-top:64px; }
.st-shop-flat{ width:min(1180px,94vw); margin:0 auto 44px; }
.st-shop-flat .st-grid{ grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); }

/* Klickbare Karte (ganze Karte = Kauf) */
.st-tier-link{ cursor:pointer; }
.st-tier-go{ margin-left:auto; align-self:center; color:var(--brand-2); font-weight:700; font-size:19px;
  opacity:.55; transition:transform .2s, opacity .2s; }
.st-tier-link:hover .st-tier-go{ opacity:1; transform:translateX(4px); }
.st-soon{ margin-top:auto; font-size:13px; font-weight:700; color:var(--muted); }

/* Premium-Paket: steht einzeln oben, aber GLEICHE Kartengröße wie alle anderen (nur „Premium"-Badge). */
.st-premium-top{ margin-bottom:2px; }
.st-shop-sep{ height:1px; background:var(--line); margin:24px 0; }
.st-badge-prem{ color:#fff; background:var(--grad); box-shadow:0 6px 16px -6px color-mix(in srgb, var(--brand) 70%, transparent); }
@media (max-width:560px){ .st-main-shop{ padding-top:58px; } }

/* ── Loading-Overlay beim Seitenwechsel (DonutSMP-artig) ───────────────────── */
.st-loader{ position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  background:var(--ink); opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s; }
.st-loader.is-active{ opacity:1; visibility:visible; transition:opacity .15s ease; }
.st-loader-in{ display:flex; flex-direction:column; align-items:center; gap:20px; }
.st-loader-logo{ width:64px; height:64px; border-radius:18px; display:grid; place-items:center;
  font-family:var(--display); font-weight:700; font-size:26px; letter-spacing:.5px; color:#fff; background:var(--grad);
  box-shadow:0 14px 34px -12px color-mix(in srgb, var(--brand) 85%, transparent); animation:stPulse 1s ease-in-out infinite; }
.st-loader-ring{ width:34px; height:34px; border-radius:50%;
  border:3px solid var(--line-2); border-top-color:var(--brand-2); animation:stSpin .7s linear infinite; }
@keyframes stSpin{ to{ transform:rotate(360deg); } }
@keyframes stPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.09); } }
.st-shop{ display:grid; grid-template-columns:230px 1fr; gap:26px;
  width:min(1180px,94vw); margin:8px auto 40px; padding:0 4px; }
.st-side{ position:sticky; top:16px; align-self:start;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px; }
.st-side-title{ font-family:var(--display); font-weight:700; font-size:13px; letter-spacing:1px;
  text-transform:uppercase; color:var(--muted-2); margin:2px 4px 10px; }
.st-side-link{ display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 12px; border-radius:10px; font-weight:600; color:var(--muted); transition:.16s; }
.st-side-link:hover{ color:var(--fg); background:var(--ink); }
.st-side-n{ font-size:12px; font-weight:700; color:var(--brand-2);
  background:color-mix(in srgb, var(--brand) 18%, transparent); padding:2px 8px; border-radius:999px; }
.st-side-back{ display:block; margin-top:10px; padding:10px 12px; font-size:13px; color:var(--muted-2); }
.st-side-back:hover{ color:var(--fg); }

.st-section{ margin-bottom:34px; scroll-margin-top:16px; }
.st-h2{ font-family:var(--display); font-weight:700; font-size:26px; letter-spacing:.5px; margin-bottom:16px;
  display:flex; align-items:center; gap:12px; }
.st-h2::before{ content:""; width:5px; height:26px; border-radius:3px; background:var(--grad); }

.st-grid{ display:grid; gap:16px; grid-template-columns:repeat(auto-fill, minmax(210px,1fr)); }
.st-tier{ position:relative; display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px; overflow:hidden;
  transition:transform .26s cubic-bezier(.2,.7,.2,1), border-color .26s, box-shadow .26s; }
.st-tier:hover{ transform:translateY(-5px); border-color:var(--line-2); box-shadow:var(--glow); }
.st-badge{ position:absolute; top:12px; left:12px; z-index:2; font-size:11px; font-weight:800;
  text-transform:uppercase; letter-spacing:.6px; padding:4px 10px; border-radius:999px; color:#04120a;
  background:var(--gold); box-shadow:0 6px 16px -6px color-mix(in srgb, var(--gold) 70%, transparent); }
.st-tier-art{ position:relative; aspect-ratio:1/1; margin:-4px -4px 12px; border-radius:var(--radius-sm); overflow:hidden;
  background:radial-gradient(60% 60% at 50% 35%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 70%); }
.st-tier-img{ width:100%; height:100%; object-fit:contain; padding:10px; transition:transform .4s; }
.st-tier:hover .st-tier-img{ transform:scale(1.07); }
.st-tier-name{ font-family:var(--display); font-weight:700; font-size:19px; letter-spacing:.4px; }
.st-price{ margin:6px 0 14px; display:flex; align-items:baseline; gap:8px; }
.st-price-now{ font-family:var(--display); font-weight:700; font-size:22px; color:#fff; }
.st-price-period{ font-size:13px; color:var(--muted); }
.st-buy{ margin-top:auto; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 16px; border-radius:12px; font-weight:800; font-size:14.5px; letter-spacing:.3px;
  color:#fff; background:var(--grad); position:relative; overflow:hidden;
  box-shadow:0 12px 28px -14px color-mix(in srgb, var(--brand) 90%, transparent); transition:transform .18s, filter .18s; }
.st-buy::after{ content:""; position:absolute; inset:0; transform:translateX(-120%);
  background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transition:transform .6s; }
.st-buy:hover{ transform:translateY(-2px); filter:brightness(1.06); }
.st-buy:hover::after{ transform:translateX(120%); }
.st-buy-plus{ font-size:17px; line-height:1; }
.st-buy.disabled{ background:var(--surface-2); color:var(--muted); box-shadow:none; cursor:not-allowed; }
.st-buy.disabled::after{ display:none; }

/* Premium-Block */
.st-premium{ position:relative; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  background:linear-gradient(150deg, var(--surface-2), var(--ink-2)); padding:24px; }
.st-premium-glow{ position:absolute; inset:0; z-index:0;
  background:radial-gradient(50% 120% at 100% 0%, color-mix(in srgb, var(--gold) 20%, transparent), transparent 60%); }
.st-premium-body{ position:relative; z-index:1; }
.st-premium-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.st-premium-name{ font-family:var(--display); font-weight:700; font-size:26px; letter-spacing:.5px; }
.st-premium-tag{ color:var(--muted); font-size:14px; margin-top:2px; }
.st-perks{ list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; margin:18px 0; }
.st-perks li{ display:flex; align-items:center; gap:10px; padding:11px 13px; border-radius:12px;
  background:var(--ink); border:1px solid var(--line); font-size:14px; }
.st-perk-ico{ font-size:18px; }
.st-premium .st-buy{ display:inline-flex; }

/* FAQ */
.st-faq{ display:grid; gap:10px; }
.st-faq-item{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; }
.st-faq-item summary{ padding:15px 18px; font-weight:700; cursor:pointer; list-style:none;
  display:flex; align-items:center; justify-content:space-between; }
.st-faq-item summary::-webkit-details-marker{ display:none; }
.st-faq-item summary::after{ content:"+"; font-family:var(--display); font-size:22px; color:var(--brand-2); transition:transform .25s; }
.st-faq-item[open] summary::after{ transform:rotate(45deg); }
.st-faq-item p{ padding:0 18px 16px; color:var(--muted); font-size:14.5px; }

.st-hero-slim{ width:min(1180px,94vw); margin:20px auto; text-align:center; }
.st-hero-slim h1{ font-family:var(--display); font-weight:700; font-size:clamp(30px,6vw,52px); letter-spacing:.5px; }
.st-sub{ color:var(--muted); margin-top:6px; }

/* ── Footer (erst nach dem Hero sichtbar) ──────────────────────────────────── */
.st-foot{ position:relative; z-index:1; border-top:1px solid var(--line);
  background:var(--ink-2); padding:34px clamp(16px,4vw,40px); margin-top:20px; }
.st-foot-inner{ width:min(1180px,94vw); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.st-foot-brand{ display:flex; align-items:center; gap:10px; font-family:var(--display); font-weight:700; font-size:18px; }
.st-foot-logo{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; font-size:13px; color:#fff; background:var(--grad); }
.st-foot-links{ display:flex; flex-wrap:wrap; gap:8px 20px; }
.st-foot-links a{ color:var(--muted); font-size:14px; transition:color .16s; }
.st-foot-links a:hover{ color:var(--fg); }
.st-foot-note{ width:min(1180px,94vw); margin:16px auto 0; color:var(--muted-2); font-size:12.5px; line-height:1.6; }

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .st-shop{ grid-template-columns:1fr; }
  .st-side{ position:static; display:flex; flex-wrap:wrap; gap:8px; }
  .st-side-title{ width:100%; margin-bottom:2px; }
  .st-side-link{ background:var(--ink); }
  .st-side-back{ margin-top:0; }
}
@media (max-width:820px){
  .st-bento{ grid-template-columns:1fr 1fr; grid-template-rows:none;
    grid-template-areas:"brand brand" "mcstore gtastore" "discord panel" "join join"; }
  .bento-store{ min-height:220px; }
}
@media (max-width:560px){
  .st-nav{ gap:12px; padding:14px; }
  .st-brand-name{ font-size:18px; }
  .st-links{ order:3; width:100%; }
  .st-links a{ padding:7px 11px; font-size:14px; }
  .st-bento{ grid-template-columns:1fr;
    grid-template-areas:"brand" "mcstore" "gtastore" "discord" "panel" "join"; gap:13px; }
  .bento-store{ min-height:180px; }
  .st-grid{ grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); }
  .st-h2{ font-size:22px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001s !important; transition-duration:.001s !important; }
  .fx{ opacity:1; transform:none; }
  .st-aura{ animation:none; }
  .st-scroll-hint{ display:none; }
}

/* Zurück-zur-Store-Wahl-Link in der Float-Leiste (Browse-Seiten → zurück zum Bento-Hub). */
.st-back{ color:var(--muted); font-size:13px; margin-right:6px; transition:color .16s; }
.st-back:hover{ color:var(--fg); }

/* ── GTA-Store (/store/gta/browse): globaler Crimson-Akzent statt Marken-Blau ─────────────── */
body.store-gta{ --brand:#e0132a; --brand-2:#ff3b47; --gold:#c9a35b;
  --grad:linear-gradient(135deg,#ff3b47,#c8102e);
  --glow:0 0 0 1px var(--line), 0 24px 60px -30px rgba(200,16,46,.55); }

/* ============================================================================
   Warenkorb (öffentlicher Store) — Add-to-Cart-Button, floatender Cart-FAB,
   Drawer rechts mit Mengen-Steppern. Marken-Akzent aus den Vars, dark & elegant.
   ============================================================================ */

/* Add-to-Cart-Button auf der Produktkarte (ersetzt den früheren Ganz-Karte-Link). */
.st-add{ margin-top:auto; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 16px; border-radius:12px; font-weight:800; font-size:14.5px; letter-spacing:.3px;
  color:#fff; background:var(--grad); position:relative; overflow:hidden; cursor:pointer;
  box-shadow:0 12px 28px -14px color-mix(in srgb, var(--brand) 90%, transparent);
  transition:transform .18s, filter .18s; text-decoration:none; }
.st-add::after{ content:""; position:absolute; inset:0; transform:translateX(-120%);
  background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transition:transform .6s; }
.st-add:hover{ transform:translateY(-2px); filter:brightness(1.06); }
.st-add:hover::after{ transform:translateX(120%); }
.st-add-plus{ font-size:18px; line-height:1; font-weight:700; }
.st-add.added{ background:var(--success); box-shadow:0 12px 28px -14px color-mix(in srgb, var(--success) 90%, transparent); }
.st-add.added .st-add-label::after{ content:" ✓"; }

/* Floatender Cart-Button (immer erreichbar). */
.st-cart-fab{ position:fixed; right:18px; bottom:18px; z-index:150; width:60px; height:60px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer; border:1px solid var(--line-2);
  background:linear-gradient(160deg, var(--surface-2), var(--ink-2)); color:var(--fg);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.9), var(--glow); transition:transform .2s, border-color .2s; }
.st-cart-fab:hover{ transform:translateY(-3px); border-color:var(--brand-2); }
.st-cart-fab.has-items{ background:var(--grad); color:#fff; border-color:transparent; }
.st-cart-fab-ico{ font-size:24px; line-height:1; }
.st-cart-badge{ position:absolute; top:-4px; right:-4px; min-width:22px; height:22px; padding:0 6px;
  display:grid; place-items:center; border-radius:999px; font-size:12px; font-weight:800;
  color:#04120a; background:var(--gold); border:2px solid var(--ink);
  transform:scale(0); transition:transform .2s cubic-bezier(.2,1.4,.4,1); }
.st-cart-fab.has-items .st-cart-badge{ transform:scale(1); }
@keyframes stBump{ 0%{transform:scale(1);} 40%{transform:scale(1.18);} 100%{transform:scale(1);} }
.st-cart-fab.bump{ animation:stBump .4s ease; }

/* Drawer-Overlay + Panel. */
.st-cart-overlay{ position:fixed; inset:0; z-index:180; display:flex; justify-content:flex-end;
  background:color-mix(in srgb, var(--ink) 72%, transparent); backdrop-filter:blur(6px);
  opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s; }
.st-cart-overlay.open{ opacity:1; visibility:visible; }
body.st-cart-lock{ overflow:hidden; }
.st-cart-panel{ width:min(420px, 100%); height:100%; display:flex; flex-direction:column;
  background:var(--surface); border-left:1px solid var(--line);
  box-shadow:-30px 0 60px -30px rgba(0,0,0,.9);
  transform:translateX(24px); transition:transform .28s cubic-bezier(.2,.7,.2,1); }
.st-cart-overlay.open .st-cart-panel{ transform:translateX(0); }
.st-cart-head{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:18px 20px; border-bottom:1px solid var(--line); }
.st-cart-title{ font-family:var(--display); font-weight:700; font-size:22px; letter-spacing:.4px; }
.st-cart-close{ width:34px; height:34px; border-radius:10px; border:1px solid var(--line); background:var(--ink);
  color:var(--fg); font-size:22px; line-height:1; cursor:pointer; transition:border-color .2s, background .2s; }
.st-cart-close:hover{ border-color:var(--line-2); background:var(--surface-2); }
.st-cart-empty{ padding:40px 20px; text-align:center; color:var(--muted); font-size:15px; }
.st-cart-items{ flex:1; overflow-y:auto; padding:14px 16px; display:flex; flex-direction:column; gap:10px; }
.st-cart-row{ display:flex; align-items:center; gap:12px; padding:10px; border-radius:12px;
  background:var(--ink); border:1px solid var(--line); }
.st-cart-row-img{ width:46px; height:46px; border-radius:10px; object-fit:contain; background:var(--surface-2); padding:4px; flex:none; }
.st-cart-row-mid{ flex:1; min-width:0; }
.st-cart-row-name{ font-weight:700; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.st-cart-row-price{ font-size:12.5px; color:var(--muted); margin-top:2px; }
.st-cart-qty{ display:flex; align-items:center; gap:6px; flex:none; }
.st-qbtn{ width:26px; height:26px; border-radius:8px; border:1px solid var(--line-2); background:var(--surface-2);
  color:var(--fg); font-size:16px; line-height:1; cursor:pointer; display:grid; place-items:center;
  transition:border-color .15s, background .15s; }
.st-qbtn:hover{ border-color:var(--brand-2); background:var(--ink); }
.st-qnum{ min-width:20px; text-align:center; font-weight:800; font-size:14px; }
.st-cart-rm{ width:26px; height:26px; border-radius:8px; border:1px solid transparent; background:transparent;
  color:var(--muted-2); font-size:18px; line-height:1; cursor:pointer; flex:none; transition:color .15s; }
.st-cart-rm:hover{ color:var(--error, #f85149); }
.st-cart-foot{ border-top:1px solid var(--line); padding:16px 20px 20px; display:flex; flex-direction:column; gap:10px; }
.st-cart-total-row{ display:flex; align-items:baseline; justify-content:space-between; }
.st-cart-total-lbl{ color:var(--muted); font-size:14px; }
.st-cart-total{ font-family:var(--display); font-weight:700; font-size:24px; color:#fff; }
.st-cart-est{ font-size:12px; color:var(--muted-2); margin-top:-4px; }
.st-cart-checkout{ display:flex; align-items:center; justify-content:center; gap:8px; padding:14px 16px;
  border:none; border-radius:12px; font-weight:800; font-size:15px; letter-spacing:.3px; color:#fff;
  background:var(--grad); cursor:pointer; position:relative; overflow:hidden;
  box-shadow:0 14px 30px -14px color-mix(in srgb, var(--brand) 90%, transparent); transition:transform .18s, filter .18s; }
.st-cart-checkout:hover{ transform:translateY(-2px); filter:brightness(1.06); }
.st-cart-checkout.loading{ pointer-events:none; opacity:.7; }
.st-cart-checkout.loading::after{ content:""; width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(255,255,255,.5); border-top-color:#fff; animation:stSpin .7s linear infinite; }
.st-cart-continue{ text-align:center; font-size:13px; font-weight:700; color:var(--muted);
  text-decoration:none; padding:4px; transition:color .15s; }
.st-cart-continue:hover{ color:var(--fg); }
.st-cart-note{ text-align:center; font-size:12px; color:var(--muted-2); }
.st-cart-note.is-error{ color:var(--error, #f85149); font-weight:700; }

@media (max-width:520px){
  .st-cart-fab{ right:14px; bottom:14px; width:54px; height:54px; }
  .st-cart-panel{ width:100%; border-left:none; }
}

/* Minecraft-Name-Feld im Warenkorb (Pflicht fuer die Basket-Zuordnung). */
.st-cart-namefield{ display:flex; flex-direction:column; gap:5px; }
.st-cart-name-lbl{ font-size:13px; font-weight:700; color:var(--fg); }
.st-cart-name{ width:100%; padding:11px 13px; border-radius:10px; border:1px solid var(--line-2);
  background:var(--ink); color:var(--fg); font-family:var(--font); font-size:15px; outline:none;
  transition:border-color .15s, box-shadow .15s; }
.st-cart-name::placeholder{ color:var(--muted-2); }
.st-cart-name:focus{ border-color:var(--brand-2); box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent); }
.st-cart-name.is-invalid{ border-color:var(--error, #f85149); box-shadow:0 0 0 3px color-mix(in srgb, #f85149 22%, transparent); }
.st-cart-name-hint{ font-size:11.5px; color:var(--muted-2); }

/* Discord-Identität im Warenkorb (Login → verknüpftes MC-Konto, „Bist das du?"). */
.st-cart-identity{ display:flex; flex-direction:column; gap:8px; }
.st-cart-identity:empty{ display:none; }
.st-cart-login{ display:flex; align-items:center; justify-content:center; gap:8px; padding:12px 16px;
  border-radius:10px; font-weight:800; font-size:14.5px; text-decoration:none; color:#fff;
  background:#5865F2; box-shadow:0 12px 28px -14px rgba(88,101,242,.9); transition:transform .18s, filter .18s; }
.st-cart-login:hover{ transform:translateY(-2px); filter:brightness(1.08); }
.st-cart-or{ text-align:center; font-size:12px; color:var(--muted-2); }
.st-cart-nolink{ font-size:13px; color:var(--muted); background:var(--ink); border:1px solid var(--line);
  border-radius:10px; padding:10px 12px; line-height:1.5; }
.st-cart-switch{ text-align:center; font-size:12.5px; font-weight:700; color:var(--muted);
  text-decoration:none; transition:color .15s; }
.st-cart-switch:hover{ color:var(--fg); }
.st-cart-ident-head{ font-size:12.5px; color:var(--muted); }
.st-cart-ident-q{ font-family:var(--display); font-weight:700; font-size:17px; letter-spacing:.3px; }
.st-cart-accts{ display:flex; flex-direction:column; gap:8px; }
.st-acct{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 13px;
  border-radius:10px; border:1px solid var(--line-2); background:var(--ink); color:var(--fg);
  font-size:15px; font-weight:700; cursor:pointer; text-align:left; transition:border-color .15s, background .15s; }
.st-acct:hover{ border-color:var(--brand-2); }
.st-acct.sel{ border-color:var(--brand); background:color-mix(in srgb, var(--brand) 14%, var(--ink));
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent); }
.st-acct-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.st-acct-badge{ flex:none; font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.5px;
  padding:3px 8px; border-radius:999px; }
.st-acct-badge.is-java{ color:#0b3; background:color-mix(in srgb, #22c55e 22%, transparent); }
.st-acct-badge.is-bedrock{ color:#fb2; background:color-mix(in srgb, #f59e0b 22%, transparent); }

/* Eingebettet im Panel-<iframe> (?embed=1): das Panel ist der Rahmen → schlanker, kein Zurück-Link/Footer.
   WICHTIG: dunklen Store-Hintergrund BEHALTEN (nicht transparent) — sonst schimmert ein heller Rahmen durch. */
body.store-embed{ background:var(--ink); }
body.store-embed .st-main{ padding-top:14px; }
body.store-embed .st-back-float{ display:none; }

/* ============================================================================
   Pflicht-Login-Gate (standalone): Discord-Anmeldung + Charakter-Bestätigung
   („Bist das du?" mit MC- + RP-Name). Liegt über dem Store, bis bestätigt.
   ============================================================================ */
.st-gate{ position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; padding:20px;
  background:radial-gradient(120% 120% at 50% 0%, color-mix(in srgb, var(--brand) 12%, var(--ink)) 0%, var(--ink) 60%);
  backdrop-filter:blur(4px); animation:stFade .3s ease; }
.st-gate.done{ display:none; }
body.st-gate-open{ overflow:hidden; }
@keyframes stFade{ from{opacity:0;} to{opacity:1;} }
.st-gate-card{ width:min(440px, 100%); background:var(--surface); border:1px solid var(--line-2); border-radius:22px;
  padding:30px 26px; text-align:center; box-shadow:0 40px 90px -40px rgba(0,0,0,.9), var(--glow); position:relative; }
.st-gate-logo{ width:56px; height:56px; margin:0 auto 16px; border-radius:16px; display:grid; place-items:center;
  font-family:var(--display); font-weight:700; font-size:24px; color:#fff; background:var(--grad);
  box-shadow:0 14px 30px -14px color-mix(in srgb, var(--brand) 90%, transparent); }
.st-gate-content{ display:flex; flex-direction:column; gap:12px; align-items:stretch; }
.st-gate-spin{ width:30px; height:30px; margin:12px auto; border-radius:50%;
  border:3px solid var(--line-2); border-top-color:var(--brand-2); animation:stSpin .7s linear infinite; }
.st-gate-title{ font-family:var(--display); font-weight:700; font-size:24px; letter-spacing:.4px; text-transform:uppercase; }
.st-gate-sub{ color:var(--muted); font-size:14px; line-height:1.55; margin-top:-4px; }
.st-gate-login{ display:flex; align-items:center; justify-content:center; gap:8px; padding:14px 16px; margin-top:6px;
  border-radius:12px; font-weight:800; font-size:15px; text-decoration:none; color:#fff; background:#5865F2;
  box-shadow:0 14px 30px -14px rgba(88,101,242,.9); transition:transform .18s, filter .18s; }
.st-gate-login:hover{ transform:translateY(-2px); filter:brightness(1.08); }
.st-gate-accts{ display:flex; flex-direction:column; gap:10px; margin:4px 0; }
.st-gate-acct{ display:flex; align-items:center; gap:12px; padding:14px; border-radius:14px; cursor:pointer; text-align:left;
  border:1.5px solid var(--line-2); background:var(--ink); color:var(--fg); transition:border-color .15s, background .15s; }
.st-gate-acct:hover{ border-color:var(--brand-2); }
.st-gate-acct.sel{ border-color:var(--brand); background:color-mix(in srgb, var(--brand) 12%, var(--ink)); }
.st-gate-acct-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }
.st-gate-acct-mc, .st-gate-acct-rp{ display:flex; align-items:center; gap:8px; font-size:15px; }
.st-gate-acct-mc b, .st-gate-acct-rp b{ font-weight:800; }
.st-gate-tag{ font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.6px; color:var(--muted-2);
  min-width:64px; }
.st-gate-acct-tick{ flex:none; width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  font-size:14px; font-weight:800; color:transparent; border:2px solid var(--line-2); transition:.15s; }
.st-gate-acct.sel .st-gate-acct-tick{ color:#fff; background:var(--brand); border-color:var(--brand); }
.st-gate-yes{ display:flex; align-items:center; justify-content:center; padding:14px 16px; margin-top:4px; border:none;
  border-radius:12px; font-weight:800; font-size:15px; color:#fff; background:var(--grad); cursor:pointer;
  box-shadow:0 14px 30px -14px color-mix(in srgb, var(--brand) 90%, transparent); transition:transform .18s, filter .18s; }
.st-gate-yes:hover{ transform:translateY(-2px); filter:brightness(1.06); }
.st-gate-switch{ font-size:13px; font-weight:700; color:var(--muted); text-decoration:none; padding:6px; transition:color .15s; }
.st-gate-switch:hover{ color:var(--fg); }

/* „Kauf für: MC · RP" im Warenkorb (nach Bestätigung). */
.st-cart-buying{ display:flex; flex-direction:column; gap:4px; padding:11px 13px; border-radius:12px;
  background:var(--ink); border:1px solid var(--line); }
.st-cart-buying-lbl{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.6px; color:var(--muted-2); }
.st-cart-buying-who{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:15px; }
.st-cart-buying-mc{ font-weight:800; }
.st-cart-buying-rp{ color:var(--muted); font-size:13px; }
.st-cart-buying-rp::before{ content:"· "; }