/* Body & Hintergrund */
html, body { margin:0; padding:0; width:100%; height:100%; font-family: Arial, sans-serif; background:#0d0d0d; color:#fff; overflow-x:hidden; }

/* Trading-Hintergrund-Canvas */
#bgCanvas { position:fixed; top:0; left:0; width:100%; height:100%; z-index:-2; }

/* Header */
header { display:flex; align-items:center; justify-content:center; position:relative; padding:1rem; background:#0d0d0d; border-bottom:1px solid #FFD700; width:100%; box-sizing:border-box; }
header h1 { margin:0; font-size:2rem; color:#FFD700; letter-spacing:1px; }

/* Hamburger */
.hamburger { position:absolute; left:1rem; top:1rem; cursor:pointer; display:flex; flex-direction:column; justify-content:space-between; width:25px; height:18px; z-index:1001; }
.hamburger div { height:3px; background:#FFD700; border-radius:2px; transition:0.3s; }

/* Side Menu */
nav { position:fixed; top:0; left:-250px; width:250px; height:100%; background:#1a1a1a; padding:2rem 1rem; transition:0.3s; display:flex; flex-direction:column; gap:1.5rem; z-index:1000; border-right:1px solid #FFD700; }
nav a { color:#FFD700; text-decoration:none; font-size:1.2rem; }
nav.show { left:0; }

/* Sections */
section { padding:4rem 2rem; max-width:1000px; margin:auto; }
h2 { color:#FFD700; }

/* Hero */
.hero p { font-size:1.2rem; margin-top:1rem; color:#fff; }
.cta a { display:inline-block; margin-top:1rem; background:#FFD700; color:#0d0d0d; padding:0.8rem 2rem; border-radius:10px; text-decoration:none; font-weight:bold; transition:0.3s; }
.cta a:hover { background:#e6c200; }

/* NFT Seltenheiten */
.rarity { display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; margin-top:2rem; }
.rarity div { padding:1.5rem; border-radius:15px; width:140px; text-align:center; font-weight:bold; font-size:1rem; color:#0d0d0d; background: linear-gradient(135deg, #FFD700, #e6c200); box-shadow:0 0 20px rgba(255,215,0,0.6); transition:0.3s; cursor:pointer; }
.rarity div:hover { transform: translateY(-5px) scale(1.05); box-shadow:0 0 30px rgba(255,215,0,0.9); }

/* NFT Variationen */
.common { background: linear-gradient(135deg, #FFD700, #e6c200); }
.rare { background: linear-gradient(135deg, #FFC300, #FFB000); }
.epic { background: linear-gradient(135deg, #FFAA00, #FF9900); }
.mythic { background: linear-gradient(135deg, #FF8C00, #FF7A00); }
.legendary { background: linear-gradient(135deg, #FF6F00, #FF5E00); }
.unknown { background: linear-gradient(135deg, #FF4500, #FF3300); }

/* Footer */
footer { text-align:center; padding:1rem; background:#0d0d0d; font-size:0.8rem; border-top:1px solid #FFD700; }