/* =====================================================================
   SPRIVO 2.9.2 – Design-Überarbeitung
   SPRIVO-Schwarz-Grün, eigene Schriften, Seltenheit als Lichtkante, große Artworks.
   Bewusst ohne Neon-Pillen, Punktraster und Glow auf allem.
   Wird zuletzt geladen; ändert nur die Darstellung, keine Funktionen.
   ===================================================================== */
@font-face{font-family:"SP Display";src:url(fonts/unbounded-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"SP Display";src:url(fonts/unbounded-latin-700-normal.woff2) format("woff2");font-weight:700 800;font-display:swap}
@font-face{font-family:"SP Display";src:url(fonts/unbounded-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"SP Text";src:url(fonts/plus-jakarta-sans-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"SP Text";src:url(fonts/plus-jakarta-sans-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"SP Text";src:url(fonts/plus-jakarta-sans-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"SP Text";src:url(fonts/plus-jakarta-sans-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"SP Text";src:url(fonts/plus-jakarta-sans-latin-800-normal.woff2) format("woff2");font-weight:800 900;font-display:swap}

/* ---------- Farbwelt ---------- */
:root,:root[data-theme=dark]{
 color-scheme:dark;
 --bg:#0a0d0b;--surface:#111713;--surface-2:#161e19;--surface-3:#202b23;--surface2:#161e19;--sidebar:#0c110e;
 --text:#eef3ef;--muted:#a8b5ac;--subtle:#7c8a81;--line:#222d25;
 --primary:#53ec8d;--primary-ink:#052210;--accent:#53ec8d;--accent-ink:#052210;--accent-soft:rgba(83,236,141,.1);--purple-soft:rgba(83,236,141,.08);
 --green:#53ec8d;--green-bg:rgba(94,240,143,.1);--blue:#8fb4ff;--blue-bg:rgba(90,130,255,.14);--gold:#ffd166;--gold-bg:rgba(255,209,102,.12);--gold-soft:rgba(255,209,102,.12);--red:#ff8fa3;--red-bg:rgba(255,100,130,.12);
 --glow-violet:#1d5c3a;--glow-blue:#123b33;
 --shadow:0 24px 60px -24px rgba(0,0,0,.7);--radius:18px;
 --r-rare:#4ea8ff;--r-epic:#b47cff;--r-legendary:#ff9f43;--r-mythic:#ffd23f;--r-unknown:#8a9a90;
 --font-display:"SP Display","Arial Black",system-ui,sans-serif;--font-text:"SP Text",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}
:root[data-theme=light]{
 color-scheme:light;
 --bg:#f2f6f3;--surface:#ffffff;--surface-2:#f1f6f2;--surface-3:#e2ebe4;--surface2:#f1f6f2;--sidebar:#ffffff;
 --text:#0f1f15;--muted:#4b6052;--subtle:#62776a;--line:#d9e4dc;
 --primary:#0f8a43;--primary-ink:#fff;--accent:#0f8a43;--accent-ink:#fff;--accent-soft:#e3f6ea;--purple-soft:#efeaff;
 --green:#0f8a43;--green-bg:#e3f6ea;--blue:#2f5fd0;--blue-bg:#e9efff;--gold:#8a6400;--gold-bg:#fff4d6;--gold-soft:#fff4d6;--red:#c0264a;--red-bg:#ffe9ee;
 --glow-violet:#9fdcb6;--glow-blue:#bfe3d6;
 --shadow:0 24px 50px -28px rgba(20,50,30,.3);
 --r-rare:#1f6fd1;--r-epic:#7d3fd6;--r-legendary:#c25f00;--r-mythic:#946f00;--r-unknown:#5e7066;
}
html{background:var(--bg)!important}
body,button,input,select,textarea{letter-spacing:0}
.intro-grid{gap:16px!important}
body{font-family:var(--font-text);background:var(--bg);color:var(--text)}
::selection{background:color-mix(in srgb,var(--primary) 35%,transparent)}
h1,h2,.stage-copy h1,.catalogue-heading h2,.release-copy h2,.news-intro h1,.page-title,.heading h1{font-family:var(--font-display);letter-spacing:-.02em;font-weight:700}

/* ---------- Seltenheit ---------- */
.sprite-card,.release-card,.ghost-card{--r:var(--r-unknown)}
.rarity-rare{--r:var(--r-rare)}.rarity-epic{--r:var(--r-epic)}.rarity-legendary{--r:var(--r-legendary)}.rarity-mythic{--r:var(--r-mythic)}

/* ---------- Kopfzeile ---------- */
.site-header,.news-header{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:saturate(1.4) blur(18px);-webkit-backdrop-filter:saturate(1.4) blur(18px);border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.top-nav,.news-header nav{height:auto!important;align-self:center;gap:2px;padding:4px;border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--surface) 70%,transparent)}
.top-nav>*,.news-header nav a{border-radius:999px!important;padding:8px 15px!important;font-weight:600;color:var(--muted)}
.top-nav>.active,.top-nav>*:hover,.news-header nav a[aria-current],.news-header nav a:hover{background:var(--surface-3)!important;color:var(--text)!important}
.button{border-radius:12px;font-weight:700}
.button.primary,.news-header .button.primary{background:var(--primary);color:var(--primary-ink);box-shadow:none}
.button.primary:hover{filter:brightness(1.07);transform:translateY(-1px)}
.button.secondary,.icon-button{background:color-mix(in srgb,var(--surface) 80%,transparent);border-color:var(--line)}
.public-account-strip{border-radius:14px;background:color-mix(in srgb,var(--surface) 70%,transparent);border-color:var(--line)}

/* ---------- Bühne (Hero) ---------- */
.feature-stage{position:relative;isolation:isolate;border:1px solid var(--line);border-radius:28px;padding:clamp(24px,4vw,52px)!important;overflow:hidden;
 background:radial-gradient(46% 70% at 76% 58%,color-mix(in srgb,var(--primary) 13%,transparent),transparent 72%),linear-gradient(170deg,var(--surface-2),var(--surface) 70%)}
.feature-stage::after{content:none!important}
.feature-stage::before{content:none!important}
.stage-copy h1{font-size:clamp(32px,4.3vw,58px)!important;line-height:1.04!important}
.stage-copy h1 span,.stage-copy h1 em,.news-intro h1 span,.hero-copy h2 span,.login-story h1 span,.welcome-banner h2 span{color:inherit!important;background:linear-gradient(transparent 64%,color-mix(in srgb,var(--primary) 30%,transparent) 70%,color-mix(in srgb,var(--primary) 30%,transparent) 88%,transparent 88%);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .06em}
.stage-copy .eyebrow,.news-intro .eyebrow,.section-eyebrow,.page-heading .eyebrow,.login-story .eyebrow,#member-app .eyebrow{background:none!important;border:0!important;padding:0!important;border-radius:0!important;color:var(--muted)!important;font-family:var(--font-text)!important;font-size:12px!important;letter-spacing:.04em!important;text-transform:none!important;font-weight:600!important}
.page-heading .eyebrow .signal,#member-app .eyebrow .signal,#member-app .eyebrow::before,.stage-copy .eyebrow .signal,.news-intro .eyebrow .signal,.catalog-meta .signal,.season-chip .signal,.welcome-banner .signal{display:none!important}
.stage-caption{display:none!important}
.stage-intro{color:var(--muted);font-size:16px!important;max-width:46ch}
.stage-art img{filter:drop-shadow(0 26px 30px rgba(0,0,0,.45))}
.stage-caption{color:var(--subtle)}
.progress-panel{border-radius:22px!important;background:color-mix(in srgb,var(--surface) 82%,transparent)!important;border-color:var(--line)!important;backdrop-filter:blur(10px)}
.progress-ring{--ring:var(--primary)}
.creator-strip{border-radius:18px!important;background:var(--surface)!important;border-color:var(--line)!important}
.creator-copy{border-radius:12px!important}

/* ---------- Katalog & Filter ---------- */
.catalogue-heading h2{font-size:clamp(24px,3vw,34px)!important}
.count-pill{background:var(--surface-3)!important;color:var(--text)!important;border-radius:999px!important}
.filter-panel{border-radius:20px!important;background:color-mix(in srgb,var(--surface) 85%,transparent)!important;border-color:var(--line)!important}
.segmented{border-radius:12px!important;background:var(--bg)!important;border-color:var(--line)!important}
.segmented button{border-radius:9px!important;font-weight:600}
.segmented button.selected,.status-filters button.selected{background:var(--surface-3)!important;color:var(--text)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--primary) 35%,transparent)}
.search>input,.select-wrap select,input[type=search],input[type=text],input[type=email],input[type=password],select,textarea{border-radius:12px;background:var(--bg);border-color:var(--line)}
input:focus,select:focus,textarea:focus{border-color:color-mix(in srgb,var(--primary) 60%,var(--line))!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 18%,transparent)}
.status-filters button{border-radius:999px!important}

/* ---------- Geisterkarten: großes Artwork, Lichtkante ---------- */
.sprite-cards{gap:18px!important}
.sprite-card{--raritytone:var(--r);position:relative;isolation:isolate;border-radius:22px!important;border:1px solid color-mix(in srgb,var(--r) 26%,var(--line))!important;overflow:hidden;
 background:radial-gradient(70% 50% at 50% 18%,color-mix(in srgb,var(--r) 16%,transparent),transparent 75%),linear-gradient(180deg,var(--surface-2),var(--surface) 55%)!important;
 transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.sprite-card::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,transparent,var(--r),transparent);opacity:.9}
.sprite-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--r) 60%,var(--line))!important;box-shadow:0 24px 40px -28px rgba(0,0,0,.7)}
.sprite-card .card-topline{position:relative;z-index:2}
.sprite-card .card-rarity{display:inline-flex;align-items:center;gap:6px;color:var(--r)!important;background:color-mix(in srgb,var(--r) 14%,transparent);border:1px solid color-mix(in srgb,var(--r) 32%,transparent);padding:4px 10px 4px 8px;border-radius:999px;font-weight:700;font-size:11px;letter-spacing:.04em;text-transform:uppercase}
.sprite-card .rarity-dot{background:var(--r)!important}
.sprite-card .card-new{color:var(--primary)!important;font-weight:700}
.sprite-card .card-collection-count{font-family:var(--font-display);font-variant-numeric:tabular-nums;font-size:15px}
.sprite-card .card-overview{display:flex!important;flex-direction:column!important;align-items:center!important;text-align:center;gap:4px!important;padding:4px 18px 14px!important}
.sprite-card .card-preview{width:min(176px,62%)!important;height:auto!important;aspect-ratio:1;background:radial-gradient(closest-side,color-mix(in srgb,var(--r) 40%,transparent),transparent)!important;border-radius:50%!important}
.sprite-card .card-preview img{filter:drop-shadow(0 18px 22px rgba(0,0,0,.45))}
.sprite-card .card-preview:hover img{transform:translateY(-4px) scale(1.06) rotate(-2deg)}
.sprite-card .card-heading{display:flex;flex-direction:column;align-items:center!important;text-align:center!important;width:100%}
.sprite-card .card-name{justify-content:center!important;width:100%}
.sprite-card .card-name h3{font-family:var(--font-display);font-size:19px!important;letter-spacing:-.01em}
.sprite-card .card-name svg{display:none}
.sprite-card .card-heading p{color:var(--muted);max-width:36ch;margin-inline:auto}
.sprite-card .card-base-label{justify-content:center}
.sprite-card .card-divider{background:linear-gradient(90deg,transparent,var(--line),transparent)!important}
.sprite-card .card-variants{display:flex!important;flex-wrap:wrap;justify-content:center!important;gap:8px!important}
.sprite-card .card-variants>.sprite-tile{flex:0 1 92px}
.sprite-tile{border-radius:14px!important;background:color-mix(in srgb,var(--tone) 7%,var(--bg))!important;border-color:color-mix(in srgb,var(--tone) 20%,var(--line))!important}
.sprite-tile:hover{background:color-mix(in srgb,var(--tone) 16%,var(--bg))!important;border-color:var(--tone)!important}
.sprite-tile.is-collected{background:color-mix(in srgb,var(--primary) 14%,var(--bg))!important;border-color:var(--primary)!important}
.sprite-tile:not(.is-collected) .tile-check{opacity:0;transition:opacity .15s}
.sprite-tile:hover .tile-check,.sprite-tile:focus-visible .tile-check{opacity:1}
.sprite-tile .tile-new{background:var(--primary)!important;color:var(--primary-ink)!important;border:0!important;border-radius:6px!important;font-weight:800}
.tile-caption{font-weight:600}

/* ---------- Fußzeile & mobile Leiste ---------- */
.site-footer,.news-footer{background:var(--sidebar);border-top:1px solid var(--line)}
.mobile-nav{background:color-mix(in srgb,var(--bg) 80%,transparent)!important;backdrop-filter:blur(18px)!important;-webkit-backdrop-filter:blur(18px)!important;border-top-color:var(--line)!important}
.mobile-nav .active{color:var(--primary)!important}

/* ---------- Neue Geister ---------- */
.news-intro h1{font-size:clamp(34px,5.4vw,66px)!important;line-height:1.02!important}
.news-hero-art img{filter:drop-shadow(0 26px 30px rgba(0,0,0,.45))}
.news-tabs{border-radius:14px!important;background:var(--surface)!important;border-color:var(--line)!important}
.news-tabs button{border-radius:10px!important;font-weight:600}
.news-tabs button.active{background:var(--surface-3)!important;color:var(--text)!important}
.news-note{border-radius:16px;background:color-mix(in srgb,var(--surface) 70%,transparent);border:1px solid var(--line);padding:14px 18px}
.release-card{position:relative;isolation:isolate;border-radius:24px!important;border-color:color-mix(in srgb,var(--r) 28%,var(--line))!important;
 background:radial-gradient(70% 50% at 50% 22%,color-mix(in srgb,var(--r) 16%,transparent),transparent 75%),linear-gradient(180deg,var(--surface-2),var(--surface) 55%)!important;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.release-card::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,transparent,var(--r),transparent);z-index:2}
.release-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--r) 60%,var(--line))!important;box-shadow:0 24px 40px -28px rgba(0,0,0,.7)}
.release-art{height:240px!important;background:radial-gradient(closest-side at 50% 55%,color-mix(in srgb,var(--r) 36%,transparent),transparent)!important}
.release-art img{width:auto!important;height:200px!important;max-width:86%;object-fit:contain;filter:drop-shadow(0 18px 22px rgba(0,0,0,.45));transition:transform .25s ease}
.release-card:hover .release-art img{transform:translateY(-5px) scale(1.04)}
.release-art .news-tag{background:var(--primary)!important;color:var(--primary-ink)!important;border-radius:8px!important}
.release-art .news-rarity{position:absolute;top:16px;right:16px;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--r);background:color-mix(in srgb,var(--r) 14%,var(--bg));border:1px solid color-mix(in srgb,var(--r) 38%,transparent);padding:5px 10px;border-radius:999px}
.release-copy h2{font-size:22px!important}
.release-variants span{border-radius:10px!important;background:color-mix(in srgb,var(--r) 6%,transparent);font-size:11px!important;font-weight:600}
.news-toolbar .search{position:relative}
.news-toolbar .search>.icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--subtle);pointer-events:none}
.news-toolbar .search>input{padding-left:40px}
.news-cta{border-radius:26px!important;background:var(--surface)!important;border:1px solid var(--line)}

/* ---------- Mitgliederpanel ---------- */
#member-app{font-family:var(--font-text)}
#member-app h1,#member-app h2{font-family:var(--font-display);letter-spacing:-.02em}
.sidebar,aside.sidebar,.member-sidebar{background:var(--sidebar)!important;border-color:var(--line)!important}
.ghost-card{position:relative;border-radius:18px!important;border-color:color-mix(in srgb,var(--r) 24%,var(--line))!important;background:radial-gradient(100% 60% at 0% 0%,color-mix(in srgb,var(--r) 14%,transparent),transparent 60%),var(--surface)!important;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.ghost-card::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg,var(--r),transparent 70%)}
.ghost-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--r) 55%,var(--line))!important;box-shadow:0 20px 36px -26px rgba(0,0,0,.7)}
.ghost-card-head h3{font-family:var(--font-display);font-size:13px!important}
.ghost-card-head img{width:52px!important;height:52px!important;filter:drop-shadow(0 8px 10px rgba(0,0,0,.4))}
.variant-cell{border-radius:12px!important;background:color-mix(in srgb,var(--r) 5%,var(--bg))!important}
.variant-cell img{height:62px!important;opacity:.8;filter:saturate(.7)}
.variant-cell.owned{border-color:var(--primary)!important;background:color-mix(in srgb,var(--primary) 12%,var(--bg))!important}
.variant-cell.owned img,.variant-cell:hover img{opacity:1;filter:none}
.variant-cell small{font-size:10px!important;font-weight:600}
.panel,.card,.stat-card{border-radius:18px}

.welcome-banner{border-radius:24px!important;border-color:var(--line)!important;background:radial-gradient(40% 90% at 86% 55%,color-mix(in srgb,var(--primary) 11%,transparent),transparent 72%),linear-gradient(170deg,var(--surface-2),var(--surface) 70%)!important}
.welcome-banner .pill.green{border-radius:999px}
.stat-card,.stats>*{background:linear-gradient(180deg,var(--surface-2),var(--surface))}
:root[data-theme=light] .brand img,:root[data-theme=light] .sprivo-logo img{filter:drop-shadow(0 1px 1px rgba(10,12,40,.55)) drop-shadow(0 0 1px rgba(10,12,40,.6))}

/* ---------- Assistent passend zur Farbwelt ---------- */
#sprivo-help{--sa-bg:#111713;--sa-surface:#161e19;--sa-surface-2:#202b23;--sa-line:#263128;--sa-text:#eef3ef;--sa-muted:#a8b5ac;--sa-accent:#53ec8d;--sa-accent-ink:#052210;--sa-user:#1d3a28;font-family:var(--font-text)}
:root[data-theme=light] #sprivo-help{--sa-bg:#fff;--sa-surface:#f2f6f3;--sa-surface-2:#e2ebe4;--sa-line:#d9e4dc;--sa-text:#0f1f15;--sa-muted:#4b6052;--sa-accent:#0f8a43;--sa-accent-ink:#fff;--sa-user:#dff3e6}

@media (max-width:720px){
 .feature-stage{border-radius:22px}
 .sprite-card .card-preview{width:min(160px,58%)!important}
 .top-nav{border:0;background:none;padding:0}
}
@media (prefers-reduced-motion:reduce){.sprite-card,.release-card,.ghost-card,.release-art img,.button{transition:none!important;transform:none!important}}