/* Mesh + Grid Hintergrund */
.bg-studio {
    background-color: #0a0f1a;
    background-image: 
        radial-gradient(circle at 50% 50%, rgba(30, 58, 138, 0.15), transparent),
        url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.03' fill-rule='evenodd'%3E%3Ccircle cx='2' cy='2' r='1'/%3E%3C/g%3E%3C/svg%3E");
}

@keyframes mesh-gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.animate-mesh {
    background: linear-gradient(-45deg, #0a0f1a, #0F4C75, #1e3a8a, #0a0f1a);
    background-size: 400% 400%;
    animation: mesh-gradient 15s ease infinite;
}

.glass {
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.3s ease;
}

.glass:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(34, 211, 238, 0.3);
}

/* DEINE FAVORISIERTE HANDY-ANIMATION (Wiederhergestellt) */
.phone-perspective {
    perspective: 1500px;
}
.phone-body {
    transform: rotateY(-20deg) rotateX(7deg) rotateZ(1deg);
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 
        4px 4px 0px #1f2937,
        5px 5px 0px #1f2937,
        8px 8px 0px #111827,
        20px 30px 60px rgba(0,0,0,0.5);
}
.phone-perspective:hover .phone-body {
    transform: rotateY(-5deg) rotateX(2deg) rotateZ(0deg) scale(1.03);
}

/* Bildschirm-Wechsel Animationen */
@keyframes screen-1-loop {
    0%, 40% { opacity: 1; transform: scale(1); visibility: visible; }
    50%, 90% { opacity: 0; transform: scale(0.95); visibility: hidden; }
    100% { opacity: 1; transform: scale(1); visibility: visible; }
}
@keyframes screen-2-loop {
    0%, 40% { opacity: 0; transform: scale(0.95); visibility: hidden; }
    50%, 90% { opacity: 1; transform: scale(1); visibility: visible; }
    100% { opacity: 0; transform: scale(0.95); visibility: hidden; }
}
.animate-screen-1 { animation: screen-1-loop 12s infinite ease-in-out; }
.animate-screen-2 { animation: screen-2-loop 12s infinite ease-in-out; }

.font-bebas { font-family: 'Bebas Neue', sans-serif; }
.font-mono { font-family: 'Space Mono', monospace; }

.fade-in-up {
    animation: fadeInUp 1s ease-out forwards;
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0) translateX(0);
    }

    33% {
        transform: translateY(-10px) translateX(5px);
    }

    66% {
        transform: translateY(5px) translateX(-5px);
    }
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

.animate-float-delay-0 {
    animation: float 6s ease-in-out infinite;
}

.animate-float-delay-2 {
    animation: float 6s ease-in-out infinite;
    animation-delay: -2s;
}

.animate-float-delay-4 {
    animation: float 6s ease-in-out infinite;
    animation-delay: -4s;
}

.shadow-glow {
    filter: drop-shadow(0 0 5px rgba(34, 197, 94, 0.8));
}