/* ========================================================================== Kategorie-Themes -------------------------------------------------------------------------- Wird ueber gesteuert (siehe applyCategoryTheme() in app.js). "all" bzw. kein Attribut = normales Standard-Design, hier passiert dann nichts. Jedes Theme setzt nur: --t Akzentfarbe --t-rgb dieselbe Farbe als "r, g, b" (fuer Glows/Transparenzen) --t-font Ueberschriften-/Preis-/Button-Schrift und darunter seine eigene Textur (Seitenhintergrund) + Karten-Look. Alle Texturen sind reines CSS (keine Bilddateien noetig). ========================================================================== */ /* ---------- Gemeinsame Basis fuer alle Themes ---------- */ body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 0.5s ease; } body[data-theme]:not([data-theme="all"])::before { opacity: 1; } /* Der Uebergang alt -> neu laeuft ueber den "Geist" (.backdrop-ghost, siehe switchBackdrop() in app.js). Der neue Hintergrund selbst zoomt nur sanft heran; das Symbol blendet neu ein. */ body.theme-anim::before { animation: themeBackdropIn 0.9s ease both; } body.theme-anim::after { animation: themeIconIn 0.9s ease both; } @keyframes themeBackdropIn { from { transform: scale(1.05); } to { transform: scale(1); } } @keyframes themeIconIn { from { opacity: 0; } } .backdrop-ghost { position: fixed; inset: 0; z-index: -1; pointer-events: none; transition: opacity 0.8s ease; } .backdrop-ghost-icon { position: fixed; font-family: 'Font Awesome 6 Free'; font-weight: 900; line-height: 1; transform-origin: center; } body[data-theme]:not([data-theme="all"]) { --item-theme: var(--t); } /* Header-Bild bekommt einen Farbstich in der Themenfarbe */ :where(body[data-theme]:not([data-theme="all"])) .shop-header { border-color: rgba(var(--t-rgb), 0.45); box-shadow: 0 0 0 1px rgba(var(--t-rgb), 0.12), 0 12px 50px -18px rgba(var(--t-rgb), 0.55); } :where(body[data-theme]:not([data-theme="all"])) .shop-header::after { background: radial-gradient(55% 75% at 50% 48%, rgba(8, 8, 14, 0.68), transparent 78%), linear-gradient(180deg, rgba(var(--t-rgb), 0.28) 0%, rgba(8, 8, 14, 0.62) 100%); } :where(body[data-theme]:not([data-theme="all"])) .shop-header h1 { font-family: var(--t-font), 'Inter', sans-serif; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9), 0 0 28px rgba(var(--t-rgb), 0.65); } :where(body[data-theme]:not([data-theme="all"])) .shop-search, :where(body[data-theme]:not([data-theme="all"])) .shop-filters-select { border-color: rgba(var(--t-rgb), 0.4); } :where(body[data-theme]:not([data-theme="all"])) .shop-search:focus-within, :where(body[data-theme]:not([data-theme="all"])) .shop-filters-select:focus { border-color: var(--t); box-shadow: 0 0 0 3px rgba(var(--t-rgb), 0.18); } :where(body[data-theme]:not([data-theme="all"])) .item-card { border-color: rgba(var(--t-rgb), 0.28); transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease); } :where(body[data-theme]:not([data-theme="all"])) .item-card:hover { border-color: var(--t); box-shadow: 0 14px 40px -14px rgba(var(--t-rgb), 0.6), 0 0 0 1px rgba(var(--t-rgb), 0.35); } :where(body[data-theme]:not([data-theme="all"])) .item-card::after { background: var(--t); opacity: 1; } :where(body[data-theme]:not([data-theme="all"])) .item-name, :where(body[data-theme]:not([data-theme="all"])) .item-price, :where(body[data-theme]:not([data-theme="all"])) .item-price-discounted, :where(body[data-theme]:not([data-theme="all"])) .buy-btn { font-family: var(--t-font), 'Inter', sans-serif; } :where(body[data-theme]:not([data-theme="all"])) .item-price i { color: var(--t); } :where(body[data-theme]:not([data-theme="all"])) .item-footer { border-top-color: rgba(var(--t-rgb), 0.25); } :where(body[data-theme]:not([data-theme="all"])) .buy-btn.available { background: var(--t); color: #0a0d13; box-shadow: 0 6px 20px -8px rgba(var(--t-rgb), 0.9); } :where(body[data-theme]:not([data-theme="all"])) .buy-btn.available:hover { background: var(--t); filter: brightness(1.15); } /* ========================================================================== WAFFEN — gebuerstetes Gunmetal, Kratzer, rotes Muendungsfeuer, Kanten-Ecken ========================================================================== */ body[data-theme="waffe"] { --t: #ef4444; --t-rgb: 239, 68, 68; --t-font: 'Oswald'; } body[data-theme="waffe"]::before { background: radial-gradient(70% 45% at 50% 108%, rgba(239, 68, 68, 0.38), transparent 70%), radial-gradient(120% 80% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.75) 100%), repeating-linear-gradient(115deg, transparent 0 46px, rgba(255, 255, 255, 0.022) 46px 47px, transparent 47px 91px), repeating-linear-gradient(62deg, transparent 0 130px, rgba(255, 255, 255, 0.03) 130px 131px, transparent 131px 260px), repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 3px), linear-gradient(180deg, #14090b 0%, #0b0709 100%); } body[data-theme="waffe"] .item-card { background: linear-gradient(135deg, rgba(239, 68, 68, 0.07), transparent 40%), repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.02) 0 2px, transparent 2px 7px), #140d0f; border-radius: 2px; clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)); } body[data-theme="waffe"] .item-card::after { height: 3px; background: repeating-linear-gradient(-45deg, #ef4444 0 10px, #140d0f 10px 16px); } body[data-theme="waffe"] .item-name, body[data-theme="waffe"] .shop-header h1 { text-transform: uppercase; letter-spacing: 0.06em; } body[data-theme="waffe"] .buy-btn { border-radius: 2px; text-transform: uppercase; letter-spacing: 0.08em; } /* ========================================================================== TOOLS — orange Riffelblech (Diamond Plate) + Warnstreifen ========================================================================== */ body[data-theme="tool"] { --t: #f59e0b; --t-rgb: 245, 158, 11; --t-font: 'Barlow Condensed'; } body[data-theme="tool"]::before { background: radial-gradient(80% 60% at 50% 0%, rgba(245, 158, 11, 0.2), transparent 70%), linear-gradient(45deg, rgba(255, 255, 255, 0.05) 25%, transparent 25% 75%, rgba(255, 255, 255, 0.05) 75%) 0 0 / 26px 26px, linear-gradient(-45deg, rgba(255, 255, 255, 0.04) 25%, transparent 25% 75%, rgba(255, 255, 255, 0.04) 75%) 13px 13px / 26px 26px, linear-gradient(180deg, #17130c 0%, #0d0b07 100%); } body[data-theme="tool"] .item-card { background: linear-gradient(45deg, rgba(255, 255, 255, 0.025) 25%, transparent 25% 75%, rgba(255, 255, 255, 0.025) 75%) 0 0 / 14px 14px, #17130d; border-radius: 6px; border-width: 2px; } body[data-theme="tool"] .item-card::after { height: 8px; background: repeating-linear-gradient(-45deg, #f59e0b 0 12px, #111 12px 24px); } body[data-theme="tool"] .item-name, body[data-theme="tool"] .shop-header h1 { text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; } body[data-theme="tool"] .buy-btn { border-radius: 4px; text-transform: uppercase; font-weight: 700; letter-spacing: 0.07em; } /* ========================================================================== RUESTUNG — Carbonfaser, Cyan-Glow, abgeschraegte HUD-Karten ========================================================================== */ body[data-theme="rüstung"] { --t: #06b6d4; --t-rgb: 6, 182, 212; --t-font: 'Rajdhani'; } body[data-theme="rüstung"]::before { background: radial-gradient(60% 50% at 50% 100%, rgba(6, 182, 212, 0.3), transparent 70%), radial-gradient(black 30%, transparent 31%) 0 0 / 8px 8px, radial-gradient(black 30%, transparent 31%) 4px 4px / 8px 8px, linear-gradient(135deg, #14262d 25%, #0a161b 25% 50%, #14262d 50% 75%, #0a161b 75%) 0 0 / 8px 8px, #070f13; } body[data-theme="rüstung"] .item-card { background: linear-gradient(160deg, rgba(6, 182, 212, 0.1), transparent 45%), #0a161b; border-radius: 4px; clip-path: polygon(0 14px, 14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%); } body[data-theme="rüstung"] .item-card::after { height: 3px; background: linear-gradient(90deg, transparent, #06b6d4 20%, #67e8f9 50%, #06b6d4 80%, transparent); } body[data-theme="rüstung"] .item-name, body[data-theme="rüstung"] .shop-header h1 { text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; } body[data-theme="rüstung"] .buy-btn { border-radius: 3px; text-transform: uppercase; font-weight: 700; letter-spacing: 0.1em; } /* ========================================================================== HAEUSER — Architekten-Blaupause, Zwielicht-Violett, edle Serifenschrift ========================================================================== */ body[data-theme="haus"] { --t: #a78bfa; --t-rgb: 167, 139, 250; --t-font: 'Playfair Display'; } body[data-theme="haus"]::before { background: radial-gradient(70% 55% at 80% 0%, rgba(167, 139, 250, 0.28), transparent 70%), radial-gradient(50% 40% at 10% 100%, rgba(244, 114, 182, 0.14), transparent 70%), linear-gradient(rgba(167, 139, 250, 0.12) 1px, transparent 1px) 0 0 / 100% 22px, linear-gradient(90deg, rgba(167, 139, 250, 0.12) 1px, transparent 1px) 0 0 / 22px 100%, linear-gradient(rgba(167, 139, 250, 0.2) 1px, transparent 1px) 0 0 / 100% 110px, linear-gradient(90deg, rgba(167, 139, 250, 0.2) 1px, transparent 1px) 0 0 / 110px 100%, linear-gradient(180deg, #120e22 0%, #0b0817 100%); } body[data-theme="haus"] .item-card { background: linear-gradient(rgba(167, 139, 250, 0.05) 1px, transparent 1px) 0 0 / 100% 18px, #130f24; border-radius: 14px; outline: 1px solid rgba(var(--t-rgb), 0.22); outline-offset: -8px; } body[data-theme="haus"] .item-card::after { background: linear-gradient(90deg, transparent, #a78bfa, transparent); } body[data-theme="haus"] .item-name, body[data-theme="haus"] .shop-header h1 { font-weight: 700; letter-spacing: 0; } body[data-theme="haus"] .buy-btn { border-radius: 999px; } /* ========================================================================== STELLPLAETZE — Asphalt, gestrichelte Fahrbahnmarkierung, Parkbucht-Karten ========================================================================== */ body[data-theme="stellplatz"] { --t: #38bdf8; --t-rgb: 56, 189, 248; --t-font: 'Russo One'; } body[data-theme="stellplatz"]::before { background: radial-gradient(90% 40% at 50% 0%, rgba(56, 189, 248, 0.18), transparent 70%), linear-gradient(90deg, transparent calc(50% - 3px), rgba(250, 204, 21, 0.28) calc(50% - 3px) calc(50% + 3px), transparent calc(50% + 3px)) 0 0 / 100% 100%, repeating-linear-gradient(0deg, transparent 0 34px, #0b0f14 34px 68px) 0 0 / 100% 100%, radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1.4px) 0 0 / 5px 5px, radial-gradient(rgba(0, 0, 0, 0.5) 1px, transparent 1.4px) 2px 3px / 7px 7px, #171c23; } body[data-theme="stellplatz"] .item-card { background: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1.4px) 0 0 / 5px 5px, #181d24; border: 2px solid rgba(255, 255, 255, 0.75); border-top: 0; border-radius: 0 0 10px 10px; } body[data-theme="stellplatz"] .item-card::after { height: 6px; background: repeating-linear-gradient(90deg, #fff 0 18px, transparent 18px 32px); opacity: 0.85; } body[data-theme="stellplatz"] .item-name, body[data-theme="stellplatz"] .shop-header h1 { text-transform: uppercase; letter-spacing: 0.04em; font-weight: 400; } body[data-theme="stellplatz"] .buy-btn { border-radius: 6px; text-transform: uppercase; font-weight: 400; letter-spacing: 0.06em; } /* ========================================================================== BASTELMATERIAL — Platine mit Leiterbahnen, Loetpunkten, Monospace ========================================================================== */ body[data-theme="bastelmaterial"] { --t: #818cf8; --t-rgb: 129, 140, 248; --t-font: 'Share Tech Mono'; } body[data-theme="bastelmaterial"]::before { background: radial-gradient(60% 50% at 50% 50%, rgba(129, 140, 248, 0.12), transparent 75%), radial-gradient(circle, rgba(129, 140, 248, 0.55) 2.5px, transparent 3.5px) 0 0 / 80px 80px, linear-gradient(90deg, transparent 39px, rgba(129, 140, 248, 0.22) 39px 41px, transparent 41px) 0 0 / 80px 80px, linear-gradient(0deg, transparent 39px, rgba(129, 140, 248, 0.22) 39px 41px, transparent 41px) 20px 20px / 80px 80px, linear-gradient(45deg, transparent 48%, rgba(129, 140, 248, 0.12) 48% 52%, transparent 52%) 0 0 / 40px 40px, linear-gradient(180deg, #0d1020 0%, #080a16 100%); } body[data-theme="bastelmaterial"] .item-card { background: rgba(13, 16, 34, 0.94); border: 2px dashed rgba(129, 140, 248, 0.5); border-radius: 10px; } body[data-theme="bastelmaterial"] .item-card::after { height: 4px; background: repeating-linear-gradient(90deg, #818cf8 0 6px, transparent 6px 12px); } body[data-theme="bastelmaterial"] .item-name, body[data-theme="bastelmaterial"] .shop-header h1 { text-transform: uppercase; letter-spacing: 0.06em; font-weight: 400; } body[data-theme="bastelmaterial"] .buy-btn { border-radius: 4px; text-transform: uppercase; font-weight: 400; letter-spacing: 0.06em; } /* ========================================================================== LIZENZEN & GEBUEHREN — Behoerdenpapier, Linierung, Stempel-Optik ========================================================================== */ body[data-theme="lizenz"] { --t: #eab308; --t-rgb: 234, 179, 8; --t-font: 'Courier Prime'; } body[data-theme="lizenz"]::before { background: radial-gradient(80% 60% at 50% 0%, rgba(234, 179, 8, 0.16), transparent 70%), linear-gradient(90deg, transparent 88px, rgba(239, 68, 68, 0.28) 88px 90px, transparent 90px) 0 0 / 100% 100%, repeating-linear-gradient(180deg, transparent 0 33px, rgba(234, 179, 8, 0.1) 33px 34px) 0 0 / 100% 100%, radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1.2px) 0 0 / 6px 6px, linear-gradient(180deg, #17140a 0%, #0e0c06 100%); } body[data-theme="lizenz"] .item-card { background: repeating-linear-gradient(180deg, transparent 0 27px, rgba(234, 179, 8, 0.07) 27px 28px), #19160c; border: 2px solid rgba(234, 179, 8, 0.4); border-radius: 3px; } body[data-theme="lizenz"] .item-card::after { top: 12px; left: auto; right: 12px; width: 64px; height: 64px; border-radius: 50%; background: transparent; border: 3px double rgba(239, 68, 68, 0.5); transform: rotate(-14deg); opacity: 0.85; } body[data-theme="lizenz"] .item-name, body[data-theme="lizenz"] .shop-header h1 { text-transform: uppercase; letter-spacing: 0.05em; font-weight: 400; } body[data-theme="lizenz"] .buy-btn { border-radius: 2px; text-transform: uppercase; font-weight: 400; letter-spacing: 0.08em; } /* ========================================================================== VERBRAUCHBAR — Labor-Gruen, aufsteigende Blasen, runde Kapsel-Karten ========================================================================== */ body[data-theme="verbrauchbar"] { --t: #34d399; --t-rgb: 52, 211, 153; --t-font: 'Exo 2'; } body[data-theme="verbrauchbar"]::before { background: radial-gradient(circle at 12% 88%, rgba(52, 211, 153, 0.35) 0 14px, transparent 15px), radial-gradient(circle at 18% 72%, rgba(52, 211, 153, 0.22) 0 8px, transparent 9px), radial-gradient(circle at 82% 78%, rgba(52, 211, 153, 0.3) 0 20px, transparent 21px), radial-gradient(circle at 88% 55%, rgba(52, 211, 153, 0.2) 0 10px, transparent 11px), radial-gradient(circle at 50% 92%, rgba(52, 211, 153, 0.28) 0 26px, transparent 27px), radial-gradient(circle at 34% 40%, rgba(52, 211, 153, 0.14) 0 6px, transparent 7px), radial-gradient(circle at 70% 30%, rgba(52, 211, 153, 0.16) 0 9px, transparent 10px), radial-gradient(80% 60% at 50% 110%, rgba(52, 211, 153, 0.32), transparent 70%), linear-gradient(rgba(52, 211, 153, 0.05) 1px, transparent 1px) 0 0 / 100% 40px, linear-gradient(180deg, #06150f 0%, #040d09 100%); } body[data-theme="verbrauchbar"] .item-card { background: radial-gradient(circle at 100% 0%, rgba(52, 211, 153, 0.16), transparent 55%), #08170f; border-radius: 28px; } body[data-theme="verbrauchbar"] .item-card::after { height: 4px; background: linear-gradient(90deg, transparent, #34d399, #a7f3d0, #34d399, transparent); } body[data-theme="verbrauchbar"] .item-name, body[data-theme="verbrauchbar"] .shop-header h1 { font-weight: 700; } body[data-theme="verbrauchbar"] .buy-btn { border-radius: 999px; } /* ========================================================================== SAMMLER — Vitrine, Gold-Strahlen, Cinzel, schimmernde Karten ========================================================================== */ body[data-theme="sammler"] { --t: #f472b6; --t-rgb: 244, 114, 182; --t-font: 'Cinzel'; } body[data-theme="sammler"]::before { background: radial-gradient(50% 40% at 50% 0%, rgba(251, 191, 36, 0.3), transparent 72%), radial-gradient(60% 50% at 50% 110%, rgba(244, 114, 182, 0.28), transparent 70%), repeating-conic-gradient(from 0deg at 50% -8%, rgba(251, 191, 36, 0.09) 0deg 4deg, transparent 4deg 12deg), radial-gradient(rgba(251, 191, 36, 0.35) 1px, transparent 1.6px) 0 0 / 90px 90px, radial-gradient(rgba(244, 114, 182, 0.3) 1px, transparent 1.6px) 45px 45px / 90px 90px, linear-gradient(180deg, #1a0d16 0%, #0e070c 100%); } body[data-theme="sammler"] .item-card { background: linear-gradient(135deg, rgba(251, 191, 36, 0.09), transparent 40%, rgba(244, 114, 182, 0.09)), #1a0f17; border: 1px solid rgba(251, 191, 36, 0.55); border-radius: 14px; outline: 1px solid rgba(251, 191, 36, 0.25); outline-offset: -7px; } body[data-theme="sammler"] .item-card::after { height: 3px; background: linear-gradient(90deg, #b45309, #fbbf24, #fef3c7, #fbbf24, #b45309); background-size: 200% 100%; animation: goldShimmer 3.5s linear infinite; } @keyframes goldShimmer { from { background-position: 0% 0; } to { background-position: 200% 0; } } body[data-theme="sammler"] .item-name, body[data-theme="sammler"] .shop-header h1 { letter-spacing: 0.06em; font-weight: 700; } body[data-theme="sammler"] .item-price i { color: #fbbf24; } body[data-theme="sammler"] .buy-btn.available { background: linear-gradient(135deg, #fbbf24, #f472b6); box-shadow: 0 6px 22px -8px rgba(251, 191, 36, 0.8); } body[data-theme="sammler"] .buy-btn { border-radius: 999px; letter-spacing: 0.06em; } /* ========================================================================== SONSTIGES — Schiefer/Karton, diagonale Streifen, schlicht-modern ========================================================================== */ body[data-theme="sonstiges"] { --t: #94a3b8; --t-rgb: 148, 163, 184; --t-font: 'Space Grotesk'; } body[data-theme="sonstiges"]::before { background: radial-gradient(70% 50% at 50% 0%, rgba(148, 163, 184, 0.2), transparent 70%), repeating-linear-gradient(135deg, transparent 0 22px, rgba(148, 163, 184, 0.06) 22px 24px), radial-gradient(rgba(148, 163, 184, 0.12) 1px, transparent 1.4px) 0 0 / 14px 14px, linear-gradient(180deg, #11151b 0%, #0a0d12 100%); } body[data-theme="sonstiges"] .item-card { background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(148, 163, 184, 0.04) 14px 15px), #12161d; border-radius: 10px; border-style: solid; } body[data-theme="sonstiges"] .item-card::after { background: repeating-linear-gradient(90deg, #94a3b8 0 14px, transparent 14px 20px); height: 3px; } body[data-theme="sonstiges"] .item-name, body[data-theme="sonstiges"] .shop-header h1 { font-weight: 700; } body[data-theme="sonstiges"] .buy-btn { border-radius: 8px; } /* Bewegungsempfindliche Nutzer: keine Dauer-Animationen */ @media (prefers-reduced-motion: reduce) { body[data-theme="sammler"] .item-card::after, body.theme-anim::before, body.theme-anim::after { animation: none; } .backdrop-ghost { transition-duration: 0.01s; } } /* ========================================================================== NACHTRAG: Symbole pro Thema, Button-Umbruch, Lizenz-Stempel ========================================================================== */ /* Jedes Thema hat ein eigenes Symbol (Font-Awesome-Glyph) - erscheint gross im Seitenhintergrund, als Wasserzeichen auf jeder Karte und links/rechts neben der Shop-Ueberschrift. */ body[data-theme="waffe"] { --t-icon: "\e19b"; } /* gun */ body[data-theme="tool"] { --t-icon: "\f7d9"; } /* screwdriver-wrench */ body[data-theme="rüstung"] { --t-icon: "\f3ed"; } /* shield-halved */ body[data-theme="haus"] { --t-icon: "\f015"; } /* house */ body[data-theme="stellplatz"] { --t-icon: "\f5e4"; } /* car-side */ body[data-theme="bastelmaterial"] { --t-icon: "\f2db"; } /* microchip */ body[data-theme="lizenz"] { --t-icon: "\f56c"; } /* file-contract */ body[data-theme="verbrauchbar"] { --t-icon: "\f0c3"; } /* flask */ body[data-theme="sammler"] { --t-icon: "\f3a5"; } /* gem */ body[data-theme="sonstiges"] { --t-icon: "\f49e"; } /* box-open */ body::after { content: var(--t-icon, ''); font-family: 'Font Awesome 6 Free'; font-weight: 900; position: fixed; right: -4vw; bottom: -8vh; font-size: min(62vw, 620px); line-height: 1; color: var(--t, #fff); opacity: 0; transform: rotate(-14deg); pointer-events: none; z-index: -1; transition: opacity 0.5s ease; } body[data-theme]:not([data-theme="all"])::after { opacity: 0.075; } :where(body[data-theme]:not([data-theme="all"])) .item-card::before { content: var(--t-icon, ''); font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; right: -12px; bottom: -18px; font-size: 9.5rem; line-height: 1; color: var(--t); opacity: 0.09; transform: rotate(-12deg); pointer-events: none; z-index: 0; transition: opacity 0.25s var(--ease), transform 0.35s var(--ease); } :where(body[data-theme]:not([data-theme="all"])) .item-card:hover::before { opacity: 0.16; transform: rotate(-6deg) scale(1.06); } :where(body[data-theme]:not([data-theme="all"])) .shop-header h1::before, :where(body[data-theme]:not([data-theme="all"])) .shop-header h1::after { content: var(--t-icon, ''); font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 0.72em; color: var(--t); margin: 0 0.6em; vertical-align: 0.06em; text-shadow: 0 0 18px rgba(var(--t-rgb), 0.9); } /* Lange Button-Texte ("10000 erforderlich") duerfen umbrechen statt aus dem Button zu laufen */ :where(body[data-theme]:not([data-theme="all"])) .buy-btn { min-width: 0; white-space: normal; text-align: center; line-height: 1.2; padding: 0.7rem 0.5rem; font-size: 0.86rem; letter-spacing: 0.02em; } /* Lizenzen: statt gefuelltem Kreis ein echter, leicht schiefer Behoerden-Stempel */ body[data-theme="lizenz"] .item-card::after { content: 'OFFIZIELL'; top: 14px; left: auto; right: 14px; width: auto; height: auto; padding: 0.18rem 0.65rem; border: 2px solid rgba(239, 68, 68, 0.6); border-radius: 4px; background: transparent; color: rgba(239, 68, 68, 0.7); font-family: 'Courier Prime', monospace; font-weight: 700; font-size: 0.7rem; letter-spacing: 0.14em; transform: rotate(-9deg); opacity: 0.9; z-index: 1; } body[data-theme="lizenz"] .item-name, body[data-theme="lizenz"] .shop-header h1 { font-weight: 700; letter-spacing: 0.02em; } body[data-theme="lizenz"] .buy-btn { font-weight: 700; letter-spacing: 0.02em; } /* ========================================================================== PACK-BEREICH — beim Runterscrollen zu den Packs wechselt der Hintergrund (data-zone="packs", gesetzt in app.js per IntersectionObserver). Beim Hochscrollen kommt wieder das Kategorie- Theme bzw. das Standarddesign. Steht bewusst GANZ UNTEN, damit es die Kategorie-Themes (gleiche Spezifitaet) ueberschreibt, solange die Packs im Blick sind. ========================================================================== */ body[data-zone="packs"] { --t: #fb923c; --t-rgb: 251, 146, 60; --t-icon: ""; } /* Episch, aber ohne Muster: der Grund ist fast schwarz-blau, alles Leuchtende kommt aus dem #pack-fx-Layer (Lichtstrahlen, treibende Farbwolken in den Seltenheitsfarben Gold/Violett/Blau, Bodenlicht, aufsteigende Funken im Canvas). Der Layer wird in app.js (initPackFx) erzeugt und nur sichtbar/animiert, solange die Packs im Bild sind. */ body[data-zone="packs"]::before { opacity: 1; background: linear-gradient(180deg, #05050a 0%, #020204 100%); } body[data-zone="packs"]::after { opacity: 0; } #pack-fx { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.9s ease, visibility 0s linear 0.9s; } body[data-zone="packs"] #pack-fx { opacity: 1; visibility: visible; transition: opacity 0.9s ease, visibility 0s; } /* Animationen laufen nur, solange der Layer sichtbar ist (spart Akku/CPU) */ #pack-fx * { animation-play-state: paused; } body[data-zone="packs"] #pack-fx * { animation-play-state: running; } .pfx-blob { position: absolute; border-radius: 50%; filter: blur(110px); mix-blend-mode: screen; will-change: transform; } .pfx-gold { width: 60vw; height: 60vw; left: -12vw; top: -22vw; background: #f59e0b; --max: 0.2; opacity: 0.06; animation: pfxDriftA 24s ease-in-out infinite alternate, pfxFade 13s ease-in-out infinite alternate; } .pfx-violet { width: 56vw; height: 56vw; right: -14vw; top: 8vh; background: #7c3aed; --max: 0.24; opacity: 0.06; animation: pfxDriftB 28s ease-in-out infinite alternate, pfxFade 17s ease-in-out -6s infinite alternate; } .pfx-blue { width: 52vw; height: 52vw; left: 22vw; bottom: -30vw; background: #2563eb; --max: 0.2; opacity: 0.05; animation: pfxDriftC 32s ease-in-out infinite alternate, pfxFade 15s ease-in-out -10s infinite alternate; } /* Volumetrische Lichtstrahlen von oben - breiten sich nach unten aus, weich verwischt */ .pfx-beam { position: absolute; top: -12vh; width: 26vw; height: 135vh; background: linear-gradient(180deg, rgba(255, 226, 160, 0.13) 0%, rgba(255, 226, 160, 0.03) 55%, transparent 90%); clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%); filter: blur(16px); mix-blend-mode: screen; transform-origin: 50% 0; } .pfx-beam-1 { left: 6%; transform: rotate(-16deg); animation: pfxSwayA 11s ease-in-out infinite alternate; } .pfx-beam-2 { left: 37%; transform: rotate(0deg); animation: pfxSwayB 14s ease-in-out infinite alternate; opacity: 0.85; } .pfx-beam-3 { left: 68%; transform: rotate(15deg); animation: pfxSwayC 12s ease-in-out infinite alternate; } .pfx-floor { position: absolute; left: 0; right: 0; bottom: -22vh; height: 62vh; background: radial-gradient(60% 100% at 50% 100%, rgba(251, 146, 60, 0.16), transparent 72%); animation: pfxPulse 6s ease-in-out infinite; } .pfx-vignette { position: absolute; inset: 0; background: radial-gradient(110% 85% at 50% 45%, rgba(2, 2, 6, 0.25) 15%, rgba(2, 2, 6, 0.88) 100%); } #pfx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; } @keyframes pfxDriftA { to { transform: translate(14vw, 10vh) scale(1.15); } } @keyframes pfxDriftB { to { transform: translate(-12vw, 14vh) scale(0.9); } } @keyframes pfxDriftC { to { transform: translate(-14vw, -8vh) scale(1.2); } } @keyframes pfxSwayA { from { transform: rotate(-19deg); opacity: 0.55; } to { transform: rotate(-11deg); opacity: 1; } } @keyframes pfxSwayB { from { transform: rotate(-4deg); opacity: 0.6; } to { transform: rotate(4deg); opacity: 1; } } @keyframes pfxSwayC { from { transform: rotate(11deg); opacity: 1; } to { transform: rotate(19deg); opacity: 0.55; } } @keyframes pfxPulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } } @keyframes pfxFade { from { opacity: 0.03; } to { opacity: var(--max, 0.2); } } @media (max-width: 768px) { .pfx-blob { filter: blur(60px); } /* vw-Breiten waeren auf dem Handy nur schmale, ueberlange Streifen ("gequetscht") - hier breitere, kuerzere und weichere Lichtkegel, damit sie wie Scheinwerferlicht wirken. */ .pfx-beam { width: 78vw; height: 85vh; top: -8vh; filter: blur(26px); } .pfx-beam-1 { display: none; } .pfx-beam-2 { left: -8%; } .pfx-beam-3 { left: 30%; } .pfx-floor { height: 40vh; } } @media (prefers-reduced-motion: reduce) { #pack-fx * { animation: none !important; } }