:root {
    --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --accent-gradient: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%);
    --green-gradient: linear-gradient(135deg, #66ff66 0%, #4ecdc4 100%);
    --dark-bg: #0f0f23;
    --card-bg: rgba(255, 255, 255, 0.05);
    --card-hover: rgba(255, 255, 255, 0.08);
    --text-primary: #ffffff;
    --text-secondary: #b8b8ff;
    --accent: #ff6b6b;
    --success: #4ecdc4;
    --green-accent: #66ff66;
    --green-secondary: #99ff99;
    --border-color: rgba(255, 255, 255, 0.1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: var(--dark-bg);
    background-image: 
        radial-gradient(circle at 20% 50%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(102, 255, 102, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 40% 80%, rgba(78, 205, 196, 0.3) 0%, transparent 50%);
    color: var(--text-primary);
    font-family: 'Inter', 'Segoe UI', sans-serif;
    min-height: 100vh;
    overflow-x: hidden;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}

.floating-elements {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: -1;
}

.floating-note {
    position: absolute;
    color: rgba(102, 255, 102, 0.1);
    font-size: 2rem;
    animation: float 8s ease-in-out infinite;
}

.floating-note:nth-child(1) { top: 10%; left: 5%; animation-delay: 0s; }
.floating-note:nth-child(2) { top: 30%; right: 10%; animation-delay: 2s; }
.floating-note:nth-child(3) { bottom: 20%; left: 15%; animation-delay: 4s; }
.floating-note:nth-child(4) { top: 60%; right: 20%; animation-delay: 6s; }

@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0.3; }
    50% { transform: translateY(-30px) rotate(15deg); opacity: 0.1; }
}


/* Genre-Tag Basis-Styling */
.genre-tag {
    color: var(--dark-bg);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: pointer;
    user-select: none;
    /* Fallback-Gradient wird durch JavaScript überschrieben */
    background: var(--green-gradient);
}

.genre-tag:hover {
    transform: scale(1.05);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

/* Vordefinierte Genre-Farben als Fallback (falls JavaScript deaktiviert) */
.genre-tag[data-genre="pop"] { background: linear-gradient(135deg, #ff6b9d, #ffa500); }
.genre-tag[data-genre="rock"] { background: linear-gradient(135deg, #ff4757, #8b0000); }
.genre-tag[data-genre="electronic"] { background: linear-gradient(135deg, #00d2ff, #3a47d5); }
.genre-tag[data-genre="hip-hop"], .genre-tag[data-genre="hiphop"] { background: linear-gradient(135deg, #ffa726, #fb8c00); }
.genre-tag[data-genre="rap"] { background: linear-gradient(135deg, #424242, #212121); color: #ffffff; }
.genre-tag[data-genre="jazz"] { background: linear-gradient(135deg, #8e24aa, #3f51b5); }
.genre-tag[data-genre="blues"] { background: linear-gradient(135deg, #1976d2, #0d47a1); }
.genre-tag[data-genre="classical"] { background: linear-gradient(135deg, #7b1fa2, #4527a0); }
.genre-tag[data-genre="country"] { background: linear-gradient(135deg, #8bc34a, #689f38); }
.genre-tag[data-genre="reggae"] { background: linear-gradient(135deg, #4caf50, #388e3c); }
.genre-tag[data-genre="folk"] { background: linear-gradient(135deg, #795548, #5d4037); color: #ffffff; }
.genre-tag[data-genre="metal"] { background: linear-gradient(135deg, #37474f, #263238); color: #ffffff; }
.genre-tag[data-genre="punk"] { background: linear-gradient(135deg, #e91e63, #ad1457); }
.genre-tag[data-genre="indie"] { background: linear-gradient(135deg, #ff7043, #d84315); }
.genre-tag[data-genre="alternative"] { background: linear-gradient(135deg, #673ab7, #512da8); }
.genre-tag[data-genre="funk"] { background: linear-gradient(135deg, #ff9800, #f57c00); }
.genre-tag[data-genre="soul"] { background: linear-gradient(135deg, #9c27b0, #7b1fa2); }
.genre-tag[data-genre="r&b"], .genre-tag[data-genre="rnb"] { background: linear-gradient(135deg, #e91e63, #c2185b); }
.genre-tag[data-genre="house"] { background: linear-gradient(135deg, #00bcd4, #0097a7); }
.genre-tag[data-genre="techno"] { background: linear-gradient(135deg, #607d8b, #455a64); color: #ffffff; }
.genre-tag[data-genre="dubstep"] { background: linear-gradient(135deg, #9c27b0, #6a1b9a); }
.genre-tag[data-genre="ambient"] { background: linear-gradient(135deg, #26a69a, #00695c); }
.genre-tag[data-genre="world"] { background: linear-gradient(135deg, #ff5722, #d84315); }
.genre-tag[data-genre="experimental"] { background: linear-gradient(135deg, #795548, #4e342e); color: #ffffff; }

/* Musiknoten-Cursor mit Schatten für bessere Sichtbarkeit */
.platform-item:hover,
.platform-item:hover *,
.platform-item:hover a,
.platform-link:hover {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='28' width='28'><defs><filter id='shadow'><feDropShadow dx='1' dy='1' stdDeviation='1' flood-color='%23000000' flood-opacity='0.5'/></filter></defs><text x='14' y='22' font-size='24' fill='%2366ff66' text-anchor='middle' filter='url(%23shadow)'>♫</text></svg>"), auto !important;
}

/* Streaming-spezifische Cursor mit Schatten */
.spotify:hover,
.spotify:hover *,
.spotify:hover a {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='28' width='28'><defs><filter id='shadow'><feDropShadow dx='1' dy='1' stdDeviation='1' flood-color='%23000000' flood-opacity='0.6'/></filter></defs><text x='14' y='22' font-size='24' fill='%231db954' text-anchor='middle' filter='url(%23shadow)'>♫</text></svg>"), auto !important;
}

.apple:hover,
.apple:hover *,
.apple:hover a {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='28' width='28'><defs><filter id='shadow'><feDropShadow dx='1' dy='1' stdDeviation='1' flood-color='%23000000' flood-opacity='0.6'/></filter></defs><text x='14' y='22' font-size='24' fill='%23fc3c44' text-anchor='middle' filter='url(%23shadow)'>♫</text></svg>"), auto !important;
}

.deezer:hover,
.deezer:hover *,
.deezer:hover a {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='28' width='28'><defs><filter id='shadow'><feDropShadow dx='1' dy='1' stdDeviation='1' flood-color='%23000000' flood-opacity='0.6'/></filter></defs><text x='14' y='22' font-size='24' fill='%23a238ff' text-anchor='middle' filter='url(%23shadow)'>♫</text></svg>"), auto !important;
}

.youtube:hover,
.youtube:hover *,
.youtube:hover a {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='28' width='28'><defs><filter id='shadow'><feDropShadow dx='1' dy='1' stdDeviation='1' flood-color='%23000000' flood-opacity='0.6'/></filter></defs><text x='14' y='22' font-size='24' fill='%23ff0000' text-anchor='middle' filter='url(%23shadow)'>♫</text></svg>"), auto !important;
}

.amazon:hover,
.amazon:hover *,
.amazon:hover a {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='28' width='28'><defs><filter id='shadow'><feDropShadow dx='1' dy='1' stdDeviation='1' flood-color='%23000000' flood-opacity='0.6'/></filter></defs><text x='14' y='22' font-size='24' fill='%23ff9900' text-anchor='middle' filter='url(%23shadow)'>♫</text></svg>"), auto !important;
}

.boomplay:hover,
.boomplay:hover *,
.boomplay:hover a {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='28' width='28'><defs><filter id='shadow'><feDropShadow dx='1' dy='1' stdDeviation='1' flood-color='%23000000' flood-opacity='0.6'/></filter></defs><text x='14' y='22' font-size='24' fill='%2300FFFF' text-anchor='middle' filter='url(%23shadow)'>♫</text></svg>"), auto !important;
}

/* Andere musikalische Elemente mit Schatten */
.genre-tag:hover {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='24' width='24'><defs><filter id='shadow'><feDropShadow dx='1' dy='1' stdDeviation='1' flood-color='%23000000' flood-opacity='0.5'/></filter></defs><text x='12' y='18' font-size='18' fill='%2366ff66' text-anchor='middle' filter='url(%23shadow)'>♫</text></svg>"), auto !important;
}

.cover-image:hover,
.cover-thumbnail:hover,
.card-cover:hover {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='28' width='28'><defs><filter id='shadow'><feDropShadow dx='1' dy='1' stdDeviation='1' flood-color='%23000000' flood-opacity='0.5'/></filter></defs><text x='14' y='22' font-size='24' fill='%2366ff66' text-anchor='middle' filter='url(%23shadow)'>♫</text></svg>"), auto !important;
}

.share-button:hover {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='28' width='28'><defs><filter id='shadow'><feDropShadow dx='1' dy='1' stdDeviation='1' flood-color='%23ffffff' flood-opacity='0.7'/></filter></defs><text x='14' y='22' font-size='24' fill='%230f0f23' text-anchor='middle' filter='url(%23shadow)'>♫</text></svg>"), auto !important;
}

.related-song-card:hover {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='28' width='28'><defs><filter id='shadow'><feDropShadow dx='1' dy='1' stdDeviation='1' flood-color='%23000000' flood-opacity='0.5'/></filter></defs><text x='14' y='22' font-size='24' fill='%2366ff66' text-anchor='middle' filter='url(%23shadow)'>♫</text></svg>"), auto !important;
}

.back-button:hover {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='28' width='28'><defs><filter id='shadow'><feDropShadow dx='1' dy='1' stdDeviation='1' flood-color='%23000000' flood-opacity='0.5'/></filter></defs><text x='14' y='22' font-size='24' fill='%2366ff66' text-anchor='middle' filter='url(%23shadow)'>♫</text></svg>"), auto !important;
}

/* Platform-specific Icon Colors */
.spotify .platform-icon { color: #1db954; }
.apple .platform-icon { color: #fc3c44; }
.deezer .platform-icon { color: #a238ff; }
.youtube .platform-icon { color: #ff0000; }
.amazon .platform-icon { color: #ff9900; }
.boomplay .platform-icon { color: #00FFFF; }

/* Platform-specific Hover Effects */
.spotify:hover {
    transform: translateY(-5px);
    border-color: rgba(29, 185, 84, 0.4);
    box-shadow: 
        0 10px 30px rgba(29, 185, 84, 0.3),
        0 0 0 1px rgba(29, 185, 84, 0.2);
}

.spotify:hover .platform-icon {
    color: #1ed760;
    text-shadow: 0 0 10px rgba(29, 185, 84, 0.5);
    transform: scale(1.1);
}

.apple:hover {
    transform: translateY(-5px);
    border-color: rgba(252, 60, 68, 0.4);
    box-shadow: 
        0 10px 30px rgba(252, 60, 68, 0.3),
        0 0 0 1px rgba(252, 60, 68, 0.2);
}

.apple:hover .platform-icon {
    color: #ff5a5a;
    text-shadow: 0 0 10px rgba(252, 60, 68, 0.5);
    transform: scale(1.1);
}

.deezer:hover {
    transform: translateY(-5px);
    border-color: rgba(162, 56, 255, 0.4);
    box-shadow: 
        0 10px 30px rgba(162, 56, 255, 0.3),
        0 0 0 1px rgba(162, 56, 255, 0.2);
}

.deezer:hover .platform-icon {
    color: #a238ff;
    text-shadow: 0 0 10px rgba(162, 56, 255, 0.5);
    transform: scale(1.1);
}

.youtube:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 0, 0, 0.4);
    box-shadow: 
        0 10px 30px rgba(255, 0, 0, 0.3),
        0 0 0 1px rgba(255, 0, 0, 0.2);
}

.youtube:hover .platform-icon {
    color: #ff3333;
    text-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
    transform: scale(1.1);
}

.amazon:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 153, 0, 0.4);
    box-shadow: 
        0 10px 30px rgba(255, 153, 0, 0.3),
        0 0 0 1px rgba(255, 153, 0, 0.2);
}

.amazon:hover .platform-icon {
    color: #ffad33;
    text-shadow: 0 0 10px rgba(255, 153, 0, 0.5);
    transform: scale(1.1);
}

.boomplay:hover {
    transform: translateY(-5px);
    border-color: rgba(0, 255, 255, 0.4);
    box-shadow: 
        0 10px 30px rgba(0, 255, 255, 0.3),
        0 0 0 1px rgba(0, 255, 255, 0.2);
}

.boomplay:hover .platform-icon {
    color: #00FFFF;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
    transform: scale(1.1);
}

/* Generic Button Styles */
.btn-small {
    padding: 8px 16px;
    border: none;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    position: relative;
    overflow: hidden;
}

.btn-primary-small {
    background: var(--green-gradient);
    color: var(--dark-bg);
}

.btn-secondary-small {
    background: transparent;
    color: var(--green-accent);
    border: 1px solid var(--green-accent);
}

.btn-small:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.btn-primary-small:hover {
    box-shadow: 0 5px 15px rgba(102, 255, 102, 0.4);
}

/* Genre Tags */
.genre-tag {
    background: var(--green-gradient);
    color: var(--dark-bg);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: pointer;
    user-select: none;
}

.genre-tag:hover {
    transform: scale(1.05);
    box-shadow: 0 3px 10px rgba(102, 255, 102, 0.4);
}

/* Platform Links */
.platform-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 1.2rem;
    position: relative;
    overflow: hidden;
}

.platform-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.platform-link:hover::before {
    left: 100%;
}

.platform-link:hover {
    transform: translateY(-3px) scale(1.1);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* Platform-specific backgrounds for small links */
.platform-link.spotify { background: #1db954; color: white; }
.platform-link.apple { background: #fc3c44; color: white; }
.platform-link.deezer { background: #a238ff; color: rgb(255, 255, 255); }
.platform-link.youtube { background: #ff0000; color: white; }
.platform-link.amazon { background: #ff9900; color: white; }
.platform-link.boomplay { background: #00FFFF; color: #000000; }

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
}

.modal-content {
    background: var(--card-bg);
    backdrop-filter: blur(20px);
    margin: 2% auto;
    padding: 40px;
    border-radius: 25px;
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    border: 1px solid var(--border-color);
    position: relative;
    animation: modalSlideIn 0.3s ease;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
    overflow-y: auto;
}

@keyframes modalSlideIn {
    from { transform: translateY(-50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.close {
    position: absolute;
    right: 20px;
    top: 20px;
    font-size: 2rem;
    font-weight: bold;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.3s ease;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.close:hover {
    color: var(--green-accent);
    background: rgba(102, 255, 102, 0.1);
    transform: scale(1.1);
}

/* Accessibility */
.platform-item:focus-within {
    outline: 2px solid var(--green-accent);
    outline-offset: 2px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .container {
        padding: 15px;
    }
    
    .modal-content {
        margin: 5% auto;
        padding: 25px;
        width: 95%;
        max-height: 85vh;
    }
}

@media (max-width: 480px) {
    .modal-content {
        padding: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}