/* css/style.css */
body {
    /* Kein direkter Hintergrund hier, das macht das Pseudo-Element */
    color: #ffffff;
    /* Verhindert Scrollbalken durch das Pseudo-Element */
    overflow-x: hidden; 
    position: relative;
    min-height: 100vh;
}

/* NEU: Pseudo-Element für das verschwommene Hintergrundbild */
body::before {
    content: '';
    position: fixed; /* Fixiert das Bild im Hintergrund */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Das Bild aus deinem Ordner laden */
    background-image: url('../background.png'); 
    background-size: cover; /* Bild deckt den ganzen Bereich ab */
    background-position: center; /* Bild wird zentriert */
    background-repeat: no-repeat;
    
    /* DER BLUR-EFFEKT */
    /* 10px kannst du nach Belieben anpassen */
    filter: blur(14px); 
    /* Damit die unscharfen Ränder nicht überstehen */
    transform: scale(1.1); 
    
    z-index: -1; /* Ganz nach hinten schieben */
}

/* Rest des CSS bleibt unverändert */
/* Neon Effects */
.neon-text-pink { text-shadow: 0 0 5px #ff00ff, 0 0 15px #ff00ff; }
.neon-text-cyan { text-shadow: 0 0 5px #00ffff, 0 0 15px #00ffff; }

.neon-border-pink:focus-within, .neon-border-pink.active {
    box-shadow: 0 0 10px #ff00ff, inset 0 0 5px #ff00ff; border-color: #ff00ff;
}
.neon-box-shadow { box-shadow: 0 4px 20px rgba(0, 255, 255, 0.15); }

/* Gold Glow */
.gold-glow { box-shadow: 0 0 10px #ffd700, inset 0 0 5px rgba(255, 215, 0, 0.5); border-color: #ffd700; }
.gold-glow:hover { box-shadow: 0 0 20px #ffd700, inset 0 0 10px #ffd700; }

/* Tabs */
.tab-active { border-bottom: 2px solid #ff00ff; color: #ff00ff; text-shadow: 0 0 8px rgba(255, 0, 255, 0.5); }
.tab-inactive { color: #9ca3af; border-bottom: 2px solid transparent; }
.tab-inactive:hover { color: #00ffff; }

/* Scrollbar */
.custom-scrollbar::-webkit-scrollbar { width: 8px; }
.custom-scrollbar::-webkit-scrollbar-track { background: #0f0f1a; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #ff00ff; border-radius: 4px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #d900d9; }

/* Modal */
.modal { transition: opacity 0.3s ease-in-out, visibility 0.3s; opacity: 0; visibility: hidden; }
.modal.open { opacity: 1; visibility: visible; }
.fade-in { animation: fadeIn 0.3s ease-in-out; }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}