/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* ------------------------------------------------------------------
   M3DWN COLLECTION – Stylesheet
   Früher stand das CSS direkt in index.html. Jetzt liegt alles hier.
   (Die Neocities-Standardregel "body { background-color: white; ... }"
   wurde entfernt – sie war nie mit index.html verknüpft.)
   ------------------------------------------------------------------ */

/* Schriften lokal (keine Verbindung zu Google). Lizenz: SIL OFL 1.1, siehe fonts/OFL-*.txt */
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/space-mono-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/space-mono-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/space-mono-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/space-mono-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Noto Sans JP';font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/noto-sans-jp-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Noto Sans JP';font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/noto-sans-jp-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ===== Original-Styles (unverändert übernommen) ===== */
:root { --bg:#060606;--card-bg:#0a0a0a;--border:#1a1a1a;--accent-purple:#9b59b6;--accent-pink:#e84393;--accent-cyan:#00cec9;--accent-red:#e74c3c;--accent-orange:#e17055;--accent-yellow:#fdcb6e;--text:#d0d0d0;--text-dim:#444;--text-muted:#2a2a2a; }
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);min-height:100vh;font-family:'Space Mono',monospace;user-select:none;-webkit-user-select:none}

.header{text-align:center;padding:50px 20px 10px}
.header-sub{font-size:9px;letter-spacing:8px;text-transform:uppercase;color:var(--text-dim)}
/* Logo (img/logo.webp bzw. img/logo.png, 640×485 = 2× Anzeigegröße) */
.header-logo{margin:12px auto 0;font-size:0;line-height:0}
.header-logo img{display:block;margin:0 auto;width:280px;max-width:70vw;height:auto}
.header-count{font-size:9px;letter-spacing:4px;color:var(--text-dim);text-transform:uppercase;margin-top:12px}
.header-line{width:60px;height:1px;background:var(--text-muted);margin:20px auto 0}

/* CONTROLS */
.controls{max-width:1400px;margin:20px auto;padding:0 20px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center}
.control-group{display:flex;align-items:center;gap:6px}
/* v5: Filter-/Sortierleiste besser lesbar (Kontrast WCAG AA; Werte siehe Kommentare, gemessen gegen --bg #060606) */
.control-label{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:#9a9aa6} /* 7.3:1 */
.control-btn{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.22);color:#c8c8d0;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:1px;line-height:1.4;padding:5px 12px;border-radius:4px;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s,box-shadow .2s;text-transform:uppercase} /* Text 11.0:1 */
.control-btn:hover{background:rgba(155,89,182,0.18);border-color:#b57edc;color:#fff}
/* Aktiv: kräftige Füllung + weiße Schrift + Glow (Sortierung lila, Filter pink wie bisher) */
.control-btn.active,.control-btn.active:hover{background:#8e44ad;border-color:#c39bd3;color:#fff;font-weight:700;box-shadow:0 0 12px rgba(155,89,182,0.55)} /* 5.9:1 */
.control-btn.active-pink,.control-btn.active-pink:hover{background:#c42a78;border-color:#ff8cc4;color:#fff;font-weight:700;box-shadow:0 0 12px rgba(232,67,147,0.5)} /* 5.3:1 */
.divider{width:1px;height:20px;background:var(--text-muted);margin:0 8px}

/* GRID */
.card-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:28px;padding:30px 20px 80px;max-width:1400px;margin:0 auto}

/* CARD */
.card-container{perspective:1000px;width:280px;height:420px;cursor:pointer;transition:all .4s cubic-bezier(.23,1,.32,1)}
.card-container:hover{transform:translateY(-6px)}
.card-container.zoomed{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:380px;height:570px;z-index:100}
.card-container.zoomed .card-image img{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1!important;visibility:visible!important}
.card-container.zoomed .card-front{overflow-y:auto;-webkit-overflow-scrolling:touch;height:100%}
.card-container.hidden{display:none}
.card-inner{width:100%;height:100%;position:relative;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.23,1,.32,1)}
.card-inner.flipped{transform:rotateY(180deg)}

.card-front,.card-back{position:absolute;width:100%;height:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;border-radius:14px;overflow:hidden;border:1px solid var(--border)}
/* Safari iOS: Front braucht explizites rotateY(0) + leichten Z-Offset, sonst bleibt Text gespiegelt sichtbar */
.card-front{background:var(--card-bg);display:flex;flex-direction:column;box-shadow:0 0 40px rgba(0,0,0,.3);-webkit-transform:rotateY(0deg) translateZ(1px);transform:rotateY(0deg) translateZ(1px)}
.card-front::after,.card-back::after{content:'';position:absolute;inset:0;background-image:url("img/noise.svg");pointer-events:none;z-index:10;border-radius:14px}

.card-front.legendary{border-color:rgba(232,67,147,.3);box-shadow:0 0 30px rgba(232,67,147,.1)}
.card-front.legendary::before{content:'';position:absolute;inset:0;border-radius:14px;background:linear-gradient(135deg,var(--accent-pink),transparent 60%);opacity:.1;animation:legendPulse 3s ease-in-out infinite;z-index:0}
@keyframes legendPulse{0%,100%{opacity:.1}50%{opacity:.2}}

.card-front.ultra{border:2px solid transparent;background-image:linear-gradient(var(--card-bg),var(--card-bg)),linear-gradient(135deg,var(--accent-pink),var(--accent-purple),var(--accent-cyan),var(--accent-pink));background-origin:border-box;background-clip:padding-box,border-box;background-size:100% 100%,300% 300%;animation:holoBorder 4s ease infinite;box-shadow:0 0 40px rgba(155,89,182,.15)}
@keyframes holoBorder{0%{background-position:0 0,0% 50%}50%{background-position:0 0,100% 50%}100%{background-position:0 0,0% 50%}}
.card-front.ultra::before{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.04) 45%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.04) 55%,transparent 60%);background-size:200% 100%;animation:shimmer 3s ease-in-out infinite;z-index:8;pointer-events:none}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

.card-image{flex:1;position:relative;overflow:hidden;min-height:0}
.card-image img{width:100%;height:100%;object-fit:cover;display:block}
.card-image::after{content:'';position:absolute;bottom:0;left:0;right:0;height:60px;background:linear-gradient(to top,var(--card-bg),transparent);pointer-events:none}

.card-number{position:absolute;top:10px;left:12px;font-size:6px;letter-spacing:2px;color:rgba(255,255,255,.85);z-index:5;font-weight:700;text-transform:uppercase;padding:2px 7px;border-radius:3px;backdrop-filter:blur(6px);background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.3)}
.card-front.legendary .card-number{background:rgba(0,0,0,.45);border-color:rgba(232,67,147,.5);color:rgba(232,67,147,.9)}
.card-front.ultra .card-number{background:rgba(0,0,0,.45);border-color:rgba(200,150,255,.5);color:rgba(200,150,255,.9)}
.card-front.rare .card-number{background:rgba(0,0,0,.45);border-color:rgba(155,89,182,.5);color:rgba(200,150,255,.9)}
.rarity-badge{position:absolute;top:10px;right:12px;font-size:6px;letter-spacing:2px;text-transform:uppercase;padding:2px 7px;border-radius:3px;z-index:5;backdrop-filter:blur(6px)}
.rarity-badge.common{background:rgba(0,0,0,.45);color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.25)}
.rarity-badge.rare{background:rgba(0,0,0,.5);color:#c77dff;border:1px solid rgba(155,89,182,.6)}
.rarity-badge.legendary{background:rgba(0,0,0,.5);color:#ff6eb4;border:1px solid rgba(232,67,147,.6);animation:legBadge 2s ease-in-out infinite}
@keyframes legBadge{0%,100%{border-color:rgba(232,67,147,.25)}50%{border-color:rgba(155,89,182,.4)}}
.rarity-badge.ultra{background:rgba(0,0,0,.5);color:#fff;border:1px solid rgba(255,255,255,.15);animation:ultraBadge 2s ease-in-out infinite;text-shadow:0 0 6px rgba(232,67,147,.6)}
@keyframes ultraBadge{0%,100%{border-color:rgba(232,67,147,.3)}33%{border-color:rgba(155,89,182,.4)}66%{border-color:rgba(0,206,201,.4)}}

.album-badge{position:absolute;top:30px;right:12px;font-size:5px;letter-spacing:2px;text-transform:uppercase;padding:2px 5px;border-radius:3px;z-index:5;background:rgba(0,206,201,.12);color:var(--accent-cyan);border:1px solid rgba(0,206,201,.25);backdrop-filter:blur(6px)}

.card-body{padding:10px 12px 12px;z-index:2;display:flex;flex-direction:column;gap:5px}
.card-top-row{display:flex;justify-content:space-between;align-items:baseline}
.card-name{font-family:'Noto Sans JP',sans-serif;font-size:11px;font-weight:700;color:var(--text);letter-spacing:.5px}
.card-date{font-size:7px;color:var(--text-dim);letter-spacing:1px}
.card-title{font-size:9px;color:rgba(255,255,255,.3);letter-spacing:1px;font-style:italic;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stats-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.stat{display:flex;flex-direction:column;gap:1px}
.stat-label{font-size:5px;letter-spacing:2px;text-transform:uppercase;color:var(--text-dim)}
.stat-value{font-size:8px;font-weight:700;color:var(--text)}
.stat-value.purple{color:var(--accent-purple)}.stat-value.pink{color:var(--accent-pink)}.stat-value.cyan{color:var(--accent-cyan)}.stat-value.red{color:var(--accent-red)}.stat-value.orange{color:var(--accent-orange)}.stat-value.yellow{color:var(--accent-yellow)}
.mood-tags{display:flex;gap:4px;flex-wrap:wrap}
.mood-tag{font-size:6px;letter-spacing:1px;text-transform:uppercase;padding:1px 5px;border:1px solid var(--text-muted);border-radius:2px;color:var(--text-dim)}
.card-footer{display:flex;justify-content:space-between;align-items:center;padding-top:5px;border-top:1px solid var(--text-muted)}
.card-type{font-size:6px;letter-spacing:2px;text-transform:uppercase;color:var(--text-dim)}
.trade-value{font-size:7px;color:var(--text-dim)}.trade-value span{color:var(--accent-purple);font-weight:700}

.card-back{background:#080808;-webkit-transform:rotateY(180deg) translateZ(1px);transform:rotateY(180deg) translateZ(1px);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px}
.back-pattern{position:absolute;inset:0;opacity:.04;background-image:repeating-linear-gradient(0deg,transparent,transparent 20px,rgba(155,89,182,.3) 20px,rgba(155,89,182,.3) 21px),repeating-linear-gradient(90deg,transparent,transparent 20px,rgba(155,89,182,.3) 20px,rgba(155,89,182,.3) 21px)}
.back-border{position:absolute;inset:10px;border:1px solid rgba(155,89,182,.1);border-radius:8px}
.back-logo{font-family:'Space Mono',monospace;font-size:22px;font-weight:700;letter-spacing:5px;text-transform:uppercase;z-index:2;text-align:center;line-height:1.4;animation:neonPulse 2s ease-in-out infinite;text-shadow:0 0 10px rgba(155,89,182,.8),0 0 30px rgba(155,89,182,.5),0 0 60px rgba(155,89,182,.3);color:#c77dff}
@keyframes neonPulse{0%,100%{text-shadow:0 0 10px rgba(155,89,182,.8),0 0 30px rgba(155,89,182,.5),0 0 60px rgba(155,89,182,.3);color:#c77dff}50%{text-shadow:0 0 15px rgba(232,67,147,.9),0 0 40px rgba(232,67,147,.6),0 0 80px rgba(155,89,182,.4);color:#e0a0ff}}
.back-sub{font-size:7px;letter-spacing:4px;color:rgba(155,89,182,.25);text-transform:uppercase;z-index:2}

/* OVERLAY + PLAYER */
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:50;backdrop-filter:blur(8px)}
.overlay.active{display:block}

.spotify-player{position:fixed;bottom:0;left:0;right:0;z-index:200;background:#0a0a0a;border-top:1px solid var(--text-muted);padding:12px 20px;display:none;align-items:center;gap:16px;justify-content:center;flex-wrap:wrap}
.spotify-player.active{display:flex}
.spotify-player .player-info{font-size:8px;letter-spacing:2px;color:var(--text-dim);text-transform:uppercase;white-space:nowrap}
.spotify-player .player-title{font-size:10px;color:var(--text);font-weight:700;letter-spacing:1px;white-space:nowrap}
.spotify-player iframe{border-radius:8px;flex-shrink:0}
.player-close{background:none;border:1px solid var(--text-muted);color:var(--text-dim);font-size:10px;padding:4px 10px;border-radius:4px;cursor:pointer;font-family:'Space Mono',monospace;letter-spacing:1px}
.player-close:hover{border-color:var(--accent-purple);color:var(--accent-purple)}


/* NAV ARROWS */
.nav-arrows{display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:110;pointer-events:none}
.magnifier-btn{position:fixed;top:12px;right:80px;z-index:210;background:rgba(10,10,10,.85);border:1px solid rgba(155,89,182,.4);color:rgba(155,89,182,.8);font-family:"Space Mono",monospace;font-size:16px;width:36px;height:36px;border-radius:6px;cursor:pointer;display:none;align-items:center;justify-content:center;transition:all .2s;backdrop-filter:blur(8px)}
.magnifier-btn:hover{border-color:rgba(155,89,182,.7);color:#c77dff;background:rgba(155,89,182,.15)}
.magnifier-btn.active{border-color:#c77dff;color:#c77dff;background:rgba(155,89,182,.2)}
.magnifier-btn.visible{display:flex}
.card-container.zoomed.magnify-mode{cursor:none;overflow:visible}
.card-container.zoomed.magnify-mode .card-inner{transform-origin:var(--mx,50%) var(--my,50%);transform:scale(2.2)!important;transition:transform-origin 0s}
.nav-arrows.active{display:block}
.nav-arrow{position:fixed;top:50%;transform:translateY(-50%);pointer-events:all;background:rgba(10,10,10,.7);border:1px solid var(--text-muted);color:var(--text-dim);font-size:36px;width:50px;height:80px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:8px;transition:all .3s;backdrop-filter:blur(6px);font-family:'Space Mono',monospace;z-index:115}
.nav-arrow:hover{background:rgba(155,89,182,.15);border-color:rgba(155,89,182,.4);color:var(--accent-purple);transform:translateY(-50%) scale(1.05)}
.nav-left{left:20px}
.nav-right{right:20px}
@media(max-width:700px){.nav-left{left:6px}.nav-right{right:6px}.nav-arrow{width:36px;height:60px;font-size:24px}}

/* CARD SWITCH ANIMATION */
.card-container.switch-out{animation:switchOut .35s ease-in forwards}
.card-container.switch-in{animation:switchIn .35s ease-out forwards}
@keyframes switchOut{
  0%{opacity:1;transform:translate(-50%,-50%) rotateY(0deg) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) rotateY(90deg) scale(.85)}
}
@keyframes switchIn{
  0%{opacity:0;transform:translate(-50%,-50%) rotateY(-90deg) scale(.85)}
  100%{opacity:1;transform:translate(-50%,-50%) rotateY(0deg) scale(1)}
}

.page-footer{text-align:center;padding:20px 20px 80px;font-size:8px;letter-spacing:3px;color:var(--text-muted);text-transform:uppercase}

.no-results{text-align:center;padding:60px 20px;font-size:10px;letter-spacing:3px;color:var(--text-dim);text-transform:uppercase;display:none}

@media(max-width:600px){
  .card-container.zoomed{width:min(90vw,320px);height:min(150vw,540px);overflow-y:auto;-webkit-overflow-scrolling:touch}
  .controls{gap:6px}
  .control-btn{font-size:9px;letter-spacing:.5px;padding:4px 8px;white-space:nowrap} /* v5: war 7px; nowrap, damit "DATUM ↑"/"J-POP" nicht umbrechen */
  .control-group{flex-wrap:wrap;justify-content:center;row-gap:5px}
  .control-label{flex-basis:100%;text-align:center;padding-left:2px} /* v5: Label über den Buttons statt daneben */
  .spotify-player{flex-direction:column;padding:8px 12px}.spotify-player iframe{width:100%!important;height:80px!important}
}

.social-links{position:fixed;top:12px;left:12px;z-index:210;display:flex;flex-direction:column;gap:8px;}
.social-btn{width:34px;height:34px;border-radius:6px;background:rgba(10,10,10,.85);border:1px solid rgba(155,89,182,.3);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;backdrop-filter:blur(8px);text-decoration:none;}
.social-btn:hover{border-color:rgba(155,89,182,.7);background:rgba(155,89,182,.15);}
.social-btn svg{width:16px;height:16px;}


.shop-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center;}
.shop-popup{position:absolute;left:42px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:8px;background:rgba(10,10,10,.96);border:1px solid rgba(225,112,85,.55);color:#fff;padding:7px 10px;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.4);backdrop-filter:blur(8px);z-index:230;animation:shopPulse 1.8s ease-in-out infinite;}
.shop-popup::before{content:'';position:absolute;left:-6px;top:50%;transform:translateY(-50%) rotate(45deg);width:12px;height:12px;background:rgba(10,10,10,.96);border-left:1px solid rgba(225,112,85,.55);border-bottom:1px solid rgba(225,112,85,.55);}
.shop-popup-text{font-family:'Space Mono',monospace;font-size:8px;letter-spacing:1.8px;text-transform:uppercase;color:#e17055;white-space:nowrap;}
.shop-popup-close{position:relative;z-index:1;background:none;border:1px solid rgba(225,112,85,.45);color:#e17055;font-family:'Space Mono',monospace;font-size:10px;line-height:1;padding:2px 6px;border-radius:999px;cursor:pointer;}
.shop-popup-close:hover{background:rgba(225,112,85,.12);border-color:rgba(225,112,85,.7);}
.shop-popup.hidden{display:none;}
@keyframes shopPulse{0%,100%{transform:translateY(-50%) scale(1);}50%{transform:translateY(-50%) scale(1.04);}}

.soon-tape{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-25deg);z-index:20;width:130%;background:repeating-linear-gradient(90deg,#f9ca24,#f9ca24 60px,#111 60px,#111 62px);padding:8px 0;display:flex;gap:0;align-items:center;overflow:hidden;pointer-events:none;border-top:2px solid #111;border-bottom:2px solid #111;}
.soon-tape span{font-family:'Space Mono',monospace;font-size:11px;font-weight:700;letter-spacing:3px;color:#111;text-transform:uppercase;padding:0 16px;white-space:nowrap;}
.card-front.soon-card{overflow:hidden;}

/* ===== Ergänzungen 2026: Spotify-Zustimmung, Footer-Links, Rechtstexte, Mobile ===== */

/* Spotify-Player-Leiste: kleiner Hinweis, solange Spotify nicht erlaubt ist */
.player-stage{display:flex;align-items:center;min-height:80px}
.spotify-hint{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 14px;max-width:560px}
.hint-text{font-size:9px;line-height:1.6;letter-spacing:.3px;color:#9a9a9a;user-select:text;-webkit-user-select:text}
.hint-text a{color:var(--accent-purple)}
.consent-btn{background:rgba(0,206,201,.1);border:1px solid rgba(0,206,201,.4);color:var(--accent-cyan);font-family:'Space Mono',monospace;font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;padding:0 14px;min-height:34px;border-radius:4px;cursor:pointer;transition:all .2s}
.consent-btn:hover,.consent-btn:focus-visible{background:rgba(0,206,201,.2);border-color:var(--accent-cyan)}

/* Spotify-Banner beim ersten Besuch (js/consent.js). Beide Buttons absichtlich gleich gestaltet. */
.cbanner{position:fixed;z-index:300;right:20px;bottom:20px;width:min(400px,calc(100vw - 24px));background:rgba(10,10,10,.97);border:1px solid rgba(155,89,182,.45);border-radius:12px;padding:18px 18px 16px;box-shadow:0 12px 40px rgba(0,0,0,.65);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-family:'Space Mono',monospace;user-select:text;-webkit-user-select:text;animation:cbannerIn .35s ease-out}
.cbanner-title{font-size:10px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--accent-purple);margin-bottom:8px}
.cbanner-text{font-size:10px;line-height:1.65;color:#a8a8a8;margin-bottom:14px}
.cbanner-text a{color:var(--accent-cyan)}
.cbanner-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cbanner-btn{background:rgba(255,255,255,.04);border:1px solid #555;color:#e6e6e6;font-family:'Space Mono',monospace;font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;min-height:42px;padding:0 10px;border-radius:6px;cursor:pointer;transition:all .2s}
.cbanner-btn:hover,.cbanner-btn:focus-visible{background:rgba(155,89,182,.15);border-color:var(--accent-purple);color:#fff}
@keyframes cbannerIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.cbanner{animation:none}}
.player-open{font-size:8px;letter-spacing:2px;text-transform:uppercase;color:var(--accent-cyan);text-decoration:none;white-space:nowrap;padding:8px 4px;border-bottom:1px solid rgba(0,206,201,.3)}
.player-open:hover{color:#fff;border-color:#fff}
.player-links{display:flex;gap:12px;align-items:center;flex-wrap:wrap}

/* Footer mit Impressum / Datenschutz */
.footer-nav{margin-top:12px;display:flex;justify-content:center;gap:18px;flex-wrap:wrap}
.footer-nav a,.footer-link{color:#777;text-decoration:none;display:inline-block;padding:8px 2px;border-bottom:1px solid #333}
.footer-link{background:none;border-top:0;border-left:0;border-right:0;border-radius:0;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer}
.footer-nav a:hover,.footer-nav a:focus-visible,.footer-link:hover,.footer-link:focus-visible{color:var(--accent-purple);border-color:var(--accent-purple)}

/* Hinweis ohne JavaScript / Ladefehler */
.no-js-note{display:block;text-align:center;padding:40px 20px;font-size:10px;letter-spacing:2px;line-height:1.8;color:#888;text-transform:uppercase;width:100%}
.no-js-note a{color:var(--accent-purple)}

/* Rechtstexte (impressum.html, datenschutz.html) */
.legal{max-width:760px;margin:30px auto 0;padding:32px 28px;background:var(--card-bg);border:1px solid var(--border);border-radius:14px;color:#bdbdbd;font-size:12px;line-height:1.75;user-select:text;-webkit-user-select:text;position:relative}
.legal h1{font-family:'Noto Sans JP',sans-serif;font-size:20px;font-weight:700;color:var(--text);letter-spacing:1px;margin-bottom:20px}
.legal h2{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--accent-purple);margin:30px 0 10px}
.legal h3{font-size:11px;color:var(--text);margin:18px 0 6px}
.legal p,.legal ul,.legal address{margin-bottom:12px;font-style:normal}
.legal ul{padding-left:20px}
.legal a{color:var(--accent-cyan);word-break:break-word}
.legal strong{color:var(--text)}
.legal .ph{background:rgba(253,203,110,.12);color:var(--accent-yellow);padding:0 4px;border-radius:3px}
.legal .small{font-size:10px;color:#777}
.legal-btn{background:rgba(232,67,147,.1);border:1px solid rgba(232,67,147,.4);color:var(--accent-pink);font-family:'Space Mono',monospace;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:0 16px;min-height:40px;border-radius:4px;cursor:pointer}
.legal-btn:hover,.legal-btn:focus-visible{background:rgba(232,67,147,.2);border-color:var(--accent-pink)}
.consent-status{display:block;margin-top:8px;font-size:10px;color:var(--accent-cyan)}
.back-link{display:inline-block;margin:24px auto 0;font-size:9px;letter-spacing:3px;text-transform:uppercase;color:#777;text-decoration:none;padding:8px 0}
.back-link:hover{color:var(--accent-purple)}
.legal-wrap{padding:0 16px;text-align:center}
.legal-wrap .legal{text-align:left}
.legal-page .page-footer{padding-bottom:40px}

/* Sichtbarer Tastatur-Fokus */
.control-btn:focus-visible,.social-btn:focus-visible,.player-close:focus-visible,.nav-arrow:focus-visible,.magnifier-btn:focus-visible,.player-open:focus-visible,.cbanner-btn:focus-visible,.footer-link:focus-visible,.consent-btn:focus-visible{outline:2px solid var(--accent-purple);outline-offset:2px}

.control-btn:focus-visible{outline:2px solid #d7b6ee;outline-offset:2px}

/* Mobile: größere Tipp-Flächen, Player-Leiste stapeln */
@media (pointer:coarse){
  .control-btn{min-height:32px}
  .social-btn{width:40px;height:40px}
  .player-close{min-height:36px}
}
@media(max-width:600px){
  .divider{display:none}
  .controls{row-gap:10px}
  .spotify-player{gap:8px}
  .player-stage{width:100%;min-height:0;justify-content:center}
  .cbanner{left:12px;right:12px;bottom:12px;width:auto;padding:16px 14px 14px}
  .legal{padding:24px 18px;font-size:12px}
  .header-logo img{width:210px}
  .controls{margin-top:24px}
  .legal-page .header{padding-top:60px}
}

/* Schmale Handys (bis 385px, z. B. 360/375): Logo kleiner und Kartenzähler tiefer, damit der fixierte "NEW ITEMS!"-Hinweis links weder Logo-Schweif noch Zähler verdeckt */
@media(max-width:385px){.header-logo img{width:170px}.header-count{margin-top:40px}}

/* Sprachblöcke (Rechtstexte): Standard Englisch, Deutsch nur bei <html lang="de"> */
html[lang="de"] .i18n-en,html:not([lang="de"]) .i18n-de{display:none!important}
.lang-switch{float:right;font-size:9px;letter-spacing:2px;text-transform:uppercase;color:#777;text-decoration:none;padding:6px 0 6px 12px}
.lang-switch:hover{color:var(--accent-purple)}
.legal .translation-note{font-size:10px;color:#777;border-left:2px solid var(--border);padding-left:10px}

/* ===== Seltenheit "LARP" (Meme-Karte, erstmals 029 "Backrooms") =====
   Witz-Rarität, die so tut, als wäre sie ultra selten: flackernde Neonröhre in Backrooms-Gelb,
   VHS-Glitch am Badge und ein "No-Clip"-Streifen, der übers Cover rutscht.
   Nur CSS; animiert werden fast nur opacity/transform (billig), das Badge ruckelt in harten Schritten. */
/* Rahmen: Gold-Holo-Rand (gleiche Technik wie .ultra, aber Gold + Backrooms-Gelb) und Gold-Glow, der beim Röhrenflackern mit einbricht */
.card-front.larp{border:2px solid transparent;
  background-image:linear-gradient(var(--card-bg),var(--card-bg)),linear-gradient(135deg,#8a6414,#f7d774,#fff4c4,#d9a93a,#e9dc7a,#9b7a1f,#f7d774,#8a6414);
  background-origin:border-box;background-clip:padding-box,border-box;background-size:100% 100%,300% 300%;
  box-shadow:0 0 30px rgba(247,208,96,.2),0 0 8px rgba(233,220,122,.18);
  animation:larpGoldBorder 5s ease infinite,larpGlow 5s steps(1,end) infinite}
@keyframes larpGoldBorder{0%,100%{background-position:0 0,0% 50%}50%{background-position:0 0,100% 50%}}
@keyframes larpGlow{
  0%,100%{box-shadow:0 0 30px rgba(247,208,96,.2),0 0 8px rgba(233,220,122,.18)}
  42%{box-shadow:0 0 14px rgba(247,208,96,.07),0 0 4px rgba(233,220,122,.08)}
  43.5%{box-shadow:0 0 30px rgba(247,208,96,.2),0 0 8px rgba(233,220,122,.18)}
  45.5%{box-shadow:0 0 10px rgba(247,208,96,.05),0 0 3px rgba(233,220,122,.06)}
  46.5%{box-shadow:0 0 30px rgba(247,208,96,.2),0 0 8px rgba(233,220,122,.18)}}
/* Röhrenlicht: Innenglühen an den Kanten + Licht von oben, flackert ab und zu kurz aus */
.card-front.larp::before{content:'';position:absolute;inset:0;border-radius:14px;pointer-events:none;z-index:8;
  box-shadow:inset 0 0 18px rgba(240,222,120,.38),inset 0 0 3px rgba(247,208,96,.55);
  background:linear-gradient(to bottom,rgba(246,238,150,.18),rgba(214,222,110,.05) 38%,transparent 62%);
  animation:larpTube 5s linear infinite}
@keyframes larpTube{
  0%,100%{opacity:1}
  41.9%{opacity:1}42%{opacity:.25}43.4%{opacity:.25}43.5%{opacity:1}
  45.4%{opacity:1}45.5%{opacity:.1}46.4%{opacity:.1}46.5%{opacity:.85}48.4%{opacity:.85}48.5%{opacity:1}
  78%{opacity:1}80%{opacity:.8}82%{opacity:1}}
/* "No-Clip": heller Scan-Streifen läuft von oben nach unten durchs Bild, danach Pause */
.card-front.larp .card-image::before{content:'';position:absolute;left:0;right:0;top:0;height:22%;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,transparent,rgba(246,238,150,.10) 35%,rgba(246,238,150,.30) 49%,rgba(140,255,210,.16) 53%,rgba(246,238,150,.06) 70%,transparent);
  transform:translateY(-110%);animation:larpNoClip 5s cubic-bezier(.45,.05,.55,.95) infinite}
@keyframes larpNoClip{
  0%{transform:translateY(-110%)}
  20%{transform:translateY(150%)}
  21%{transform:translate(3px,168%) skewX(-6deg)}
  22%{transform:translateY(180%)}
  40%,100%{transform:translateY(470%)}}
/* Licht flackert -> Cover wird kurz dunkler und "rutscht" seitlich weg (No-Clip-Moment); harte Schritte.
   Ruhewert translateZ(0) wie bei .zoomed (iOS-Fix für verschwindende Bilder bleibt erhalten) */
.card-front.larp .card-image img{animation:larpSlip 5s steps(1,end) infinite}
@keyframes larpSlip{
  0%,100%{transform:translateZ(0);filter:none}
  42%{transform:translateZ(0);filter:brightness(.78)}
  43.5%{transform:translateZ(0);filter:none}
  45.5%{transform:translate3d(-3px,0,0) scale(1.02);filter:brightness(.68)}
  46%{transform:translate3d(2px,0,0) scale(1.02);filter:brightness(.68)}
  46.5%{transform:translateZ(0);filter:brightness(.9)}
  48.5%{transform:translateZ(0);filter:none}}
/* Gold-Folie: breiter Glanzstreifen läuft schräg über die ganze Karte (nur transform = billig).
   Ohne Animation (reduzierte Bewegung / Standbild) bleibt ein ruhiger Goldschimmer mittig stehen. */
.card-foil{display:none}
.card-front.larp .card-foil{display:block;position:absolute;inset:0;z-index:8;pointer-events:none;overflow:hidden;border-radius:12px;mix-blend-mode:screen}
.card-front.larp .card-foil::before{content:'';position:absolute;top:-10%;bottom:-10%;left:0;width:70%;
  background:linear-gradient(105deg,transparent 12%,rgba(255,214,110,.06) 30%,rgba(255,226,140,.2) 44%,rgba(255,248,214,.36) 50%,rgba(255,200,84,.2) 56%,rgba(214,160,40,.06) 70%,transparent 88%);
  transform:translateX(35%) skewX(-8deg);animation:larpFoil 5s cubic-bezier(.4,0,.2,1) infinite}
@keyframes larpFoil{0%{transform:translateX(-120%) skewX(-8deg)}55%,100%{transform:translateX(170%) skewX(-8deg)}}
.card-front.larp .card-number,.card-front.larp .rarity-badge{z-index:9} /* über Röhrenlicht und Gold-Folie */
.card-front.larp .card-number{background:rgba(0,0,0,.45);border-color:rgba(247,208,96,.6);color:#f7d774}
.card-front.larp .card-type{color:rgba(233,220,122,.62)}
.card-front.larp .trade-value span{color:#f7d774;text-shadow:0 0 6px rgba(247,208,96,.45)}
.card-front.larp .mood-tag{border-color:rgba(233,220,122,.22);color:rgba(233,220,122,.55)}
/* Badge: Goldplakette mit eigenem Glanz (läuft mit der Folie), RGB-Versatz, zuckt in harten Schritten (VHS-Tracking) */
.rarity-badge.larp{color:#241800;font-weight:700;border:1px solid #fff0b0;
  background:linear-gradient(115deg,#9a6e18 0%,#e8bd4a 30%,#fff6cc 48%,#f2cf62 56%,#b8891f 80%,#8a6414 100%);background-size:250% 100%;background-position:30% 0;
  box-shadow:0 0 6px rgba(247,208,96,.55);
  text-shadow:0 0 1px rgba(255,248,214,.6),-.6px 0 rgba(255,40,120,.55),.6px 0 rgba(40,255,230,.5);
  animation:larpGlitch 2.6s steps(1,end) infinite,larpBadgeShine 5s cubic-bezier(.4,0,.2,1) infinite}
@keyframes larpBadgeShine{0%{background-position:100% 0}45%,100%{background-position:0% 0}}
@keyframes larpGlitch{
  0%,100%{transform:none;opacity:1;text-shadow:0 0 1px rgba(255,248,214,.6),-.6px 0 rgba(255,40,120,.55),.6px 0 rgba(40,255,230,.5)}
  62%{transform:translate(1.5px,0) skewX(-14deg);opacity:1;text-shadow:0 0 1px rgba(255,248,214,.6),-1.6px 0 rgba(255,40,120,.8),1.6px 0 rgba(40,255,230,.75)}
  64%{transform:translate(-1px,.5px) skewX(6deg);opacity:.55;text-shadow:0 0 1px rgba(255,248,214,.6),-1.6px 0 rgba(255,40,120,.8),1.6px 0 rgba(40,255,230,.75)}
  66%{transform:none;opacity:1;text-shadow:0 0 1px rgba(255,248,214,.6),-.6px 0 rgba(255,40,120,.55),.6px 0 rgba(40,255,230,.5)}
  86%{transform:translateX(-1px);opacity:1;text-shadow:0 0 1px rgba(255,248,214,.6),1.2px 0 rgba(255,40,120,.7),-1.2px 0 rgba(40,255,230,.7)}
  87.5%{transform:none;opacity:1;text-shadow:0 0 1px rgba(255,248,214,.6),-.6px 0 rgba(255,40,120,.55),.6px 0 rgba(40,255,230,.5)}}
/* Weniger Bewegung gewünscht: statischer Goldrand + ruhiger Goldschimmer, kein Flackern/Glitch/Sweep */
@media (prefers-reduced-motion:reduce){
  .card-front.larp,.card-front.larp::before,.card-front.larp .card-image img,.rarity-badge.larp,.card-front.larp .card-foil::before{animation:none}
  .card-front.larp .card-image::before{animation:none;display:none}
}

/* ===== Spezialeffekt fx: "fx": "guts" (nur Karte 032 "GUTS", Seltenheit bleibt "ultra") =====
   Mechanismus: "fx": "guts" in releases.json -> js/releases.js setzt .fx-guts an .card-front, data-fx="guts" am Container
   und legt drei leere Ebenen (.card-fx > i.fx-a / .fx-b / .fx-c) übers Cover. Andere Karten bekommen davon nichts.
   Idee: Friedhofsnebel zieht langsam durchs Bild, leichtes Filmkorn, und der Rahmen schlägt wie ein Herz
   (doppelter Schlag, dann Pause, alle 2,5 s) in gedämpftem Violett. Nebel/Korn = SVG-Rauschen direkt im CSS (keine Bilddateien).
   Animiert werden Nebel/Korn nur per transform/opacity (billig); nur der äußere Glow nutzt box-shadow (wie .larp/.legendary). */
.card-front.fx-guts{border:2px solid rgba(155,89,182,.38);background:var(--card-bg);
  box-shadow:0 0 18px rgba(155,89,182,.1),0 0 3px rgba(199,125,255,.08);
  animation:gutsBeat 2.5s infinite}
/* Herzschlag: schneller Anstieg, langsameres Abklingen; zweiter Schlag etwas schwächer, dann Ruhe bis 100 % */
@keyframes gutsBeat{
  0%{border-color:rgba(155,89,182,.38);box-shadow:0 0 18px rgba(155,89,182,.1),0 0 3px rgba(199,125,255,.08);animation-timing-function:cubic-bezier(.2,.7,.3,1)}
  6%{border-color:rgba(199,125,255,.85);box-shadow:0 0 34px rgba(155,89,182,.36),0 0 9px rgba(199,125,255,.32);animation-timing-function:cubic-bezier(.5,0,.6,1)}
  15%{border-color:rgba(155,89,182,.5);box-shadow:0 0 22px rgba(155,89,182,.16),0 0 4px rgba(199,125,255,.12);animation-timing-function:cubic-bezier(.2,.7,.3,1)}
  20%{border-color:rgba(199,125,255,.68);box-shadow:0 0 30px rgba(155,89,182,.27),0 0 7px rgba(199,125,255,.24);animation-timing-function:cubic-bezier(.4,0,.6,1)}
  40%,100%{border-color:rgba(155,89,182,.38);box-shadow:0 0 18px rgba(155,89,182,.1),0 0 3px rgba(199,125,255,.08)}}
/* Innerer Glow am Rand schlägt mit (ersetzt den Holo-Schimmer von .ultra; nur opacity) */
.card-front.fx-guts::before{content:'';position:absolute;inset:0;border-radius:12px;pointer-events:none;z-index:8;
  background:none;box-shadow:inset 0 0 22px rgba(155,89,182,.42),inset 0 0 2px rgba(199,125,255,.55);
  opacity:.15;animation:gutsBeatIn 2.5s infinite}
@keyframes gutsBeatIn{
  0%{opacity:.15;animation-timing-function:cubic-bezier(.2,.7,.3,1)}
  6%{opacity:1;animation-timing-function:cubic-bezier(.5,0,.6,1)}
  15%{opacity:.35;animation-timing-function:cubic-bezier(.2,.7,.3,1)}
  20%{opacity:.75;animation-timing-function:cubic-bezier(.4,0,.6,1)}
  40%,100%{opacity:.15}}
/* Effekt-Ebenen übers Cover (unter dem dunklen Verlauf unten und unter Nummer/Badge) */
.card-fx{display:none}
.card-front.fx-guts .card-fx{display:block;position:absolute;inset:0;overflow:hidden;pointer-events:none}
.card-front.fx-guts .card-fx i{position:absolute;display:block;pointer-events:none;will-change:transform}
/* Nebel 1: weiche Schwaden übers ganze Bild, 200 % breit, nahtlos kachelnd (stitchTiles) -> Endlosschleife ohne Sprung */
.card-front.fx-guts .fx-a{top:-6%;left:0;width:200%;height:112%;opacity:.34;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='256'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0078 .0156' numOctaves='4' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .86 0 0 0 0 .86 0 0 0 0 .9 2.6 0 0 0 -1.05'/%3E%3C/filter%3E%3Crect width='512' height='256' filter='url(%23n)'/%3E%3C/svg%3E") repeat-x 0 0/50% 100%;
  animation:gutsFogA 38s linear infinite}
@keyframes gutsFogA{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
/* Nebel 2: Bodennebel, flacher und streifiger, nur unten, etwas schneller und hebt/senkt sich leicht (Parallaxe) */
.card-front.fx-guts .fx-b{top:30%;left:0;width:200%;height:76%;opacity:.44;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='256'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.00586 .0234' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .8 0 0 0 0 .8 0 0 0 0 .84 2.8 0 0 0 -1.05'/%3E%3C/filter%3E%3Crect width='512' height='256' filter='url(%23n)'/%3E%3C/svg%3E") repeat-x 0 0/50% 100%;
  -webkit-mask-image:linear-gradient(to top,transparent 0,#000 22%,#000 45%,transparent 92%);mask-image:linear-gradient(to top,transparent 0,#000 22%,#000 45%,transparent 92%);
  animation:gutsFogB 26s linear infinite}
@keyframes gutsFogB{0%{transform:translate3d(0,0,0)}25%{transform:translate3d(-12.5%,-2%,0)}50%{transform:translate3d(-25%,0,0)}75%{transform:translate3d(-37.5%,1.5%,0)}100%{transform:translate3d(-50%,0,0)}}
/* Filmkorn: graues Rauschen, springt in harten Schritten (~7 Bilder/s) und flackert minimal in der Stärke */
.card-front.fx-guts .fx-c{inset:-50%;opacity:.1;mix-blend-mode:overlay;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E") repeat 0 0/110px 110px;
  animation:gutsGrain 1.1s steps(1,end) infinite}
@keyframes gutsGrain{
  0%{transform:translate3d(0,0,0);opacity:.1}
  14%{transform:translate3d(-7%,4%,0);opacity:.13}
  28%{transform:translate3d(5%,-9%,0);opacity:.09}
  42%{transform:translate3d(-11%,-3%,0);opacity:.12}
  57%{transform:translate3d(9%,7%,0);opacity:.1}
  71%{transform:translate3d(-2%,11%,0);opacity:.14}
  85%{transform:translate3d(12%,-5%,0);opacity:.09}}
/* Badge "Ultra Rare" in Violett statt Regenbogen, Rand schlägt im selben Takt */
.card-front.fx-guts .card-number,.card-front.fx-guts .rarity-badge{z-index:9}
.card-front.fx-guts .rarity-badge{color:#eadcf7;border:1px solid rgba(155,89,182,.4);text-shadow:0 0 6px rgba(199,125,255,.55);animation:gutsBadge 2.5s infinite}
@keyframes gutsBadge{0%,40%,100%{border-color:rgba(155,89,182,.4)}6%{border-color:rgba(199,125,255,.95)}15%{border-color:rgba(155,89,182,.55)}20%{border-color:rgba(199,125,255,.8)}}
.card-front.fx-guts .mood-tag{border-color:rgba(155,89,182,.24);color:rgba(196,176,214,.6)}
/* Weniger Bewegung gewünscht: stehender Nebel + Korn, ruhiger violetter Rand, kein Herzschlag */
@media (prefers-reduced-motion:reduce){
  .card-front.fx-guts{animation:none;border-color:rgba(155,89,182,.55);box-shadow:0 0 24px rgba(155,89,182,.2),0 0 5px rgba(199,125,255,.16)}
  .card-front.fx-guts::before{animation:none;opacity:.45}
  .card-front.fx-guts .card-fx i,.card-front.fx-guts .rarity-badge{animation:none}
}

/* ===== Booster-Pack um die neueste Karte (js/pack.js) ===== */
.card-container[data-pack]:not(.zoomed){position:relative}
.card-container.is-packed .card-inner{visibility:hidden}
.card-container.is-packed:hover{transform:translateY(-6px) rotate(-.6deg)}
.m3pack{position:absolute;inset:-14px -12px;z-index:5;cursor:pointer;outline:none;filter:drop-shadow(0 14px 28px rgba(0,0,0,.55)) drop-shadow(0 0 18px rgba(190,170,255,.18));-webkit-tap-highlight-color:transparent}
.m3pack:focus-visible{filter:drop-shadow(0 0 0 #fff) drop-shadow(0 0 10px #a29bfe)}
.pk-top,.pk-body{position:absolute;left:0;right:0;overflow:hidden}
.pk-top{top:0;height:40px;transform-origin:8% 100%}
.pk-body{top:40px;bottom:0}
.pk-foil{position:absolute;inset:0;background:
  linear-gradient(115deg,#8d929c 0%,#eef1f6 18%,#a8adb7 33%,#fbfcff 48%,#9aa0aa 62%,#e7eaf0 78%,#8b9099 100%)}
.pk-top .pk-foil{background-size:100% 450px}
.pk-holo{position:absolute;inset:0;background-image:linear-gradient(125deg,rgba(255,110,200,0) 0%,rgba(255,110,200,.45) 16%,rgba(255,225,120,.4) 30%,rgba(120,255,200,.4) 44%,rgba(110,180,255,.45) 58%,rgba(190,130,255,.45) 72%,rgba(255,110,200,.4) 86%,rgba(255,110,200,0) 100%);background-repeat:no-repeat;background-size:300% 300%;background-position:0% 0%;mix-blend-mode:overlay;opacity:.8;-webkit-animation:pkHolo 7s ease-in-out infinite alternate;animation:pkHolo 7s ease-in-out infinite alternate}
.pk-sheen{position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.75) 47%,transparent 58%);background-size:300% 100%;background-repeat:no-repeat;mix-blend-mode:soft-light;animation:pkSheen 3.6s ease-in-out infinite}
.pk-crimp{position:absolute;left:0;right:0;top:0;height:40px;background:repeating-linear-gradient(90deg,rgba(0,0,0,.16) 0 1px,rgba(255,255,255,.35) 1px 3px,transparent 3px 5px);border-bottom:1px solid rgba(0,0,0,.18)}
.pk-crimp-b{top:auto;bottom:0;border-bottom:0;border-top:1px solid rgba(0,0,0,.18)}
.pk-tear{position:absolute;top:3px;left:6px;right:6px;border-top:1px dashed rgba(40,40,60,.35)}
.pk-content{position:relative;height:100%;display:flex;flex-direction:column;align-items:center;padding:16px 14px 50px;box-sizing:border-box;text-align:center}
.pk-kicker{font:700 9px/1 'Space Mono',monospace;letter-spacing:.28em;color:#2b2d36;opacity:.75}
.pk-word{margin-top:12px;font:900 64px/0.9 Impact,'Arial Black','Helvetica Neue',sans-serif;letter-spacing:.02em;color:#fff;
  -webkit-text-stroke:1.5px rgba(30,30,45,.55);text-shadow:0 2px 0 rgba(40,40,60,.35),0 6px 16px rgba(0,0,0,.35)}
.pk-logo{width:96%;height:auto;margin-top:34px;filter:drop-shadow(0 0 1px rgba(20,20,35,.9)) drop-shadow(0 2px 3px rgba(20,20,35,.55)) drop-shadow(0 0 10px rgba(120,90,200,.35))}
.pk-release{margin-top:auto;align-self:flex-start;margin-bottom:6px;padding:6px 10px;border-radius:3px;background:rgba(12,12,20,.86);color:#fff;font:700 13px/1 'Space Mono',monospace;letter-spacing:.14em;box-shadow:0 0 0 1px rgba(255,255,255,.5)}
.pk-cta{margin-top:8px;font:700 10px/1 'Space Mono',monospace;letter-spacing:.22em;color:#1d1f28;align-self:flex-start;padding-left:4px}
.is-unlocked .pk-cta{animation:pkPulse 1.6s ease-in-out infinite}
.pk-qr{position:absolute;right:14px;bottom:44px;width:72px;height:72px;padding:5px;background:#fff;border-radius:4px;box-shadow:0 1px 4px rgba(0,0,0,.35)}
.pk-qr img{display:block;width:100%;height:100%;image-rendering:auto}
.pk-toast{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%) scale(.9);opacity:0;pointer-events:none;white-space:nowrap;padding:9px 14px;border-radius:6px;background:rgba(10,10,16,.92);color:#fff;font:700 12px/1 'Space Mono',monospace;letter-spacing:.06em;transition:opacity .2s,transform .2s;box-shadow:0 0 0 1px rgba(162,155,254,.6)}
.pk-toast-on .pk-toast{opacity:1;transform:translate(-50%,-50%) scale(1)}
.m3pack.pk-shake{animation:pkShake .45s ease}
/* Öffnen: Zackenstreifen reißt ab, Pack rutscht weg, Karte kommt mit Glanz raus */
.pk-opening .pk-top{animation:pkTear .55s cubic-bezier(.5,0,.75,0) forwards}
.pk-opening .pk-sheen{animation:pkFlash .5s ease-out forwards}
.m3pack.pk-drop{pointer-events:none}
.pk-drop .pk-body{animation:pkDrop .9s cubic-bezier(.55,0,.85,.35) forwards}
.card-container.pk-reveal .card-inner{animation:pkRise .9s cubic-bezier(.2,.9,.25,1.15) both}
.card-container.pk-reveal .card-front::after{content:'';position:absolute;inset:0;z-index:20;pointer-events:none;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.85) 48%,rgba(162,155,254,.5) 54%,transparent 68%);background-size:300% 100%;mix-blend-mode:screen;animation:pkShine 1s .25s ease-out both}
.pk-reopen{position:absolute;left:50%;bottom:-24px;transform:translateX(-50%);z-index:4;background:none;border:0;color:#a29bfe;font:11px/1 'Space Mono',monospace;letter-spacing:.06em;cursor:pointer;opacity:.75;white-space:nowrap;padding:4px 6px}
.pk-reopen:hover{opacity:1}
.card-container.zoomed .pk-reopen{display:none}
@-webkit-keyframes pkHolo{from{background-position:0% 0%}to{background-position:100% 100%}}@keyframes pkHolo{from{background-position:0% 0%}to{background-position:100% 100%}}
@keyframes pkSheen{0%,100%{background-position:100% 0}50%{background-position:0 0}}
@keyframes pkPulse{50%{opacity:.35}}
@keyframes pkShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px) rotate(-1.5deg)}40%{transform:translateX(6px) rotate(1.2deg)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
@keyframes pkTear{0%{transform:none}35%{transform:translate(4px,-3px) rotate(-4deg)}100%{transform:translate(120px,-90px) rotate(-28deg);opacity:0}}
@keyframes pkFlash{0%{opacity:1}40%{opacity:1;background-position:0 0}100%{opacity:.6;background-position:0 0}}
@keyframes pkDrop{0%{transform:none;opacity:1}100%{transform:translateY(105%);opacity:.0}}
@keyframes pkRise{0%{transform:translateY(-34px) scale(.92);opacity:0}55%{opacity:1}100%{transform:none;opacity:1}}
@keyframes pkShine{0%{background-position:100% 0;opacity:1}100%{background-position:0 0;opacity:0}}
@media (max-width:600px){.pk-word{font-size:60px}}
@media (prefers-reduced-motion:reduce){
  .pk-holo,.pk-sheen,.is-unlocked .pk-cta{animation:none}
  .m3pack.pk-shake{animation:none}
  .pk-opening .pk-top,.pk-drop .pk-body{animation:pkFade .25s linear forwards}
  .card-container.pk-reveal .card-inner,.card-container.pk-reveal .card-front::after{animation:none}
  .card-container.is-packed:hover{transform:none}
}
@keyframes pkFade{to{opacity:0}}

/* Crimp-Zacken sichtbar machen: dunkle Kontur über den Zackenkanten */
.m3pack{-webkit-filter:drop-shadow(0 0 1px rgba(0,0,0,.9)) drop-shadow(0 14px 28px rgba(0,0,0,.55)) drop-shadow(0 0 18px rgba(190,170,255,.25));filter:drop-shadow(0 0 1px rgba(0,0,0,.9)) drop-shadow(0 14px 28px rgba(0,0,0,.55)) drop-shadow(0 0 18px rgba(190,170,255,.25))}