/* Seite „Meine Gutscheinkarten“ · Black-Copper, mobil zuerst. */
.mg .mg-nav{display:flex;gap:16px;flex-wrap:wrap;justify-content:flex-end}
.mg>header img{width:132px}
.mg-kicker{display:block;font:700 11px/1.3 Inter,system-ui,sans-serif;letter-spacing:.24em;color:var(--x-accent)}
.mg h1,.mg h2{margin:6px 0 8px;line-height:1.12;font-size:clamp(26px,5vw,40px)}
.mg h2{font-size:clamp(22px,4vw,30px)}
.mg-h3{margin:18px 0 8px;font-size:16px}
.mg-panel{padding:20px;border:1px solid var(--x-line);border-radius:18px;background:radial-gradient(120% 120% at 100% 0%,rgba(217,164,119,.08),transparent 55%),var(--x-panel)}

/* Einzelkarte */
.mg-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:34px;align-items:center;padding:8px 0 10px}
.mg-stage{position:relative;display:grid;justify-items:center;padding:28px 10px 14px}
.mg-stage::before{content:"";position:absolute;inset:6% 4% 10%;background:radial-gradient(closest-side,rgba(217,164,119,.28),transparent 75%);filter:blur(16px);z-index:0}
.mg-stage>[data-card]{position:relative;z-index:1;width:100%;display:grid;justify-items:center}
.mg-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0}
.mg-facts>div,.mg-sum>div{padding:12px 14px;border:1px solid var(--x-line);border-radius:14px;background:var(--x-panel)}
.mg-facts small,.mg-sum small,.mg-item-meta small{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--x-muted)}
.mg-facts b{font-size:18px}
.mg-facts .mg-codefact{grid-column:1/-1}
.mg-facts .scx-code{font-size:19px}
.st-active{color:var(--x-ok)}.st-expired,.st-cancelled{color:var(--x-bad)}.st-used{color:var(--x-muted)}
.mg-actions{margin:4px 0 6px}
.mg-chip{display:inline-flex;align-items:center;min-height:46px;padding:8px 14px;border-radius:12px;border:1px solid var(--x-line2);color:var(--x-muted);font-weight:600;font-size:14px}
.mg-chip.ok{color:var(--x-ok);border-color:rgba(127,199,154,.45);background:rgba(127,199,154,.07)}
.mg-history{list-style:none;margin:0;padding:0;border:1px solid var(--x-line);border-radius:14px;overflow:hidden}
.mg-history li{display:flex;justify-content:space-between;gap:12px;padding:10px 14px;border-top:1px solid var(--x-line)}
.mg-history li:first-child{border-top:0}
.mg-history b{color:var(--x-accent2)}

/* Anmeldung */
.mg [data-login]{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
.mg [data-login][hidden],.mg [data-single][hidden],.mg [data-wallet][hidden]{display:none}

/* Wallet */
.mg [data-wallet]{display:grid;gap:18px}
.mg-wallet-head{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap}
.mg-sum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.mg-sum:empty{display:none}
.mg-sum b{font:900 clamp(20px,4vw,28px)/1.1 VCWord,Inter,sans-serif;color:var(--x-accent2)}
.mg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:26px 22px}
.mg-item{display:grid;gap:12px;justify-items:center}
.mg-item [data-c]{width:100%;display:grid;justify-items:center}
.mg-item-meta{width:100%;max-width:440px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.mg-item-meta b{font-size:18px;margin-right:4px}
.mg-add{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:end}
.mg-add h3{margin:6px 0}
.mg-add input{font:700 16px/1.2 ui-monospace,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase}
.mg-empty{grid-column:1/-1;text-align:center;padding:26px 16px;border:1px dashed var(--x-line2);border-radius:18px;display:grid;justify-items:center;gap:6px}
.mg-empty h3{margin:10px 0 0}
.mg-empty-card{width:180px;aspect-ratio:1.586;border-radius:12px;border:1px solid rgba(217,164,119,.5);background:radial-gradient(120% 90% at 100% 0%,rgba(240,180,120,.35),transparent 55%),linear-gradient(135deg,#3a2415,#0c0806);box-shadow:0 14px 30px -14px rgba(0,0,0,.9);position:relative}
.mg-empty-card::after{content:"+";position:absolute;inset:0;display:grid;place-items:center;font:700 44px/1 Inter,sans-serif;color:#f0c79c;opacity:.75}

@media (max-width:820px){
 .mg-hero{grid-template-columns:1fr;gap:14px}
 .mg-stage{padding:14px 0 6px}
 .mg [data-login],.mg-add{grid-template-columns:1fr}
}
@media (max-width:520px){
 .mg>header img{width:108px}
 .mg .mg-nav{gap:10px;font-size:13px}
 .mg-facts{grid-template-columns:1fr 1fr}
 .mg-facts>div:nth-child(3){grid-column:1/-1}
 .mg-sum{grid-template-columns:1fr 1fr}
 .mg-sum>div:first-child{grid-column:1/-1}
 .mg-actions .scx-btn,.mg-actions .mg-chip{flex:1 1 calc(50% - 10px)}
 .mg-panel{padding:16px;border-radius:16px}
}

/* Kaufseite /gutscheine: Live-Vorschau der Karte */
.gs-preview{position:sticky;top:calc(16px + env(safe-area-inset-top));padding-top:8px}
.gs-done{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:center}
@media (max-width:820px){.gs-preview{position:relative;top:0;order:-1;padding:4px 0 0}.gs-done{grid-template-columns:1fr;gap:12px}}
/* Logo ohne dunklen Kasten auf schwarzem Grund */
.scx-page>header img{mix-blend-mode:screen}