@charset "UTF-8";

:root {
    --primary-color: #6366f1;
    --secondary-color: #4f46e5;
    --success-color: #22c55e;
    --danger-color: #ef4444;
    --background-light: #232131;
    --background-white: #ffffff;
    --text-primary: #6254fe;
}

.bg-animated { position: fixed; top:0; left:0; width:100%; height:100%; background: var(--background-light); z-index:-1; overflow:hidden; }

.bg-floating-shapes { position: absolute; width:100%; height:100%; }
.bg-shape {
    position: absolute; border-radius:50%; background: linear-gradient(45deg, var(--primary-color), var(--secondary-color)); opacity:0.1; animation: bg-float 20s infinite linear;
}

.bg-shape:nth-child(1) { width:80px; height:80px; left:5%; animation-delay:0s; animation-duration:25s; }
.bg-shape:nth-child(2) { width:120px; height:120px; left:15%; animation-delay:-5s; animation-duration:30s; }
.bg-shape:nth-child(3) { width:60px; height:60px; left:30%; animation-delay:-10s; animation-duration:20s; }
.bg-shape:nth-child(4) { width:100px; height:100px; left:50%; animation-delay:-15s; animation-duration:35s; }
.bg-shape:nth-child(5) { width:140px; height:140px; left:70%; animation-delay:-20s; animation-duration:28s; }
.bg-shape:nth-child(6) { width:90px; height:90px; left:25%; animation-delay:-8s; animation-duration:22s; }
.bg-shape:nth-child(7) { width:110px; height:110px; left:60%; animation-delay:-12s; animation-duration:30s; }
.bg-shape:nth-child(8) { width:130px; height:130px; left:80%; animation-delay:-18s; animation-duration:27s; }

.bg-gradient-orbs { position:absolute; width:100%; height:100%; }
.bg-orb { position:absolute; border-radius:50%; filter:blur(40px); opacity:0.3; animation: bg-pulse 8s ease-in-out infinite alternate; }
.bg-orb-primary { width:300px; height:300px; background: radial-gradient(circle, var(--primary-color), transparent); top:20%; left:10%; }
.bg-orb-secondary { width:250px; height:250px; background: radial-gradient(circle, var(--secondary-color), transparent); bottom:20%; right:15%; }

.bg-grid-pattern { position:absolute; top:0; left:0; width:100%; height:100%; background-image: linear-gradient(rgba(99,102,241,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(99,102,241,0.03) 1px, transparent 1px); background-size:50px 50px; animation:bg-gridMove 60s linear infinite; }

@keyframes bg-float { 0% {transform: translateY(100vh) rotate(0deg);opacity: 0.1; /* Startopazität */} 80% {opacity: 0.1; /* Halte die ursprüngliche Opazität */} 100% {transform: translateY(-100px) rotate(360deg);opacity: 0; /* Blasser werden am Ende */}}
@keyframes bg-pulse { 0% {transform:scale(1) rotate(0deg); opacity:0.2;} 100% {transform:scale(1.2) rotate(180deg); opacity:0.4;} }
@keyframes bg-gridMove { 0% {transform:translate(0,0);} 100% {transform:translate(50px,50px);} }

@media (max-width:768px){
    .bg-shape { opacity:0.05; }
    .bg-orb { opacity:0.2; filter:blur(30px); }
    .bg-orb-primary { width:200px; height:200px; }
    .bg-orb-secondary { width:150px; height:150px; }
}