/* Hintergrund-Formen für die verschiedenen Sektionen */

/* Gemeinsame Eigenschaften für alle Formen */
.bg-shape {
    position: absolute;
    border-radius: 50%;
    opacity: 0.15;
    filter: blur(60px);
    z-index: 0;
    pointer-events: none;
    transition: all 0.8s ease-in-out;
}

/* Spezifische Formen für verschiedene Sektionen */

/* Hero-Sektion hat keinen Hintergrund-Shape */
.hero .bg-shape,
#home .bg-shape,
section[data-page="home"] .bg-shape,
section#home .bg-shape {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    position: absolute !important;
    left: -9999px !important;
}

/* About-Us-Sektion - Keine Hintergrund-Form */
.about-us .bg-shape,
#about .bg-shape,
section[data-page="about"] .bg-shape {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Services-Sektion - Verschiedene Formen für jeden Slide */
.service-website .bg-shape {
    width: 450px;
    height: 450px;
    left: -120px;
    top: 25%;
    background: linear-gradient(135deg, #00A6FB, #0582CA);
    animation: pulseSlow 8s infinite ease-in-out;
}

.service-app .bg-shape {
    width: 350px;
    height: 550px;
    left: -80px;
    top: 20%;
    background: linear-gradient(135deg, #F03A70, #FF6B98);
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    animation: morphShape 15s infinite ease-in-out;
}

.service-ecommerce .bg-shape {
    width: 500px;
    height: 400px;
    left: -150px;
    top: 30%;
    background: linear-gradient(135deg, #06D6A0, #1B9AAA);
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    animation: morphShape 12s infinite ease-in-out alternate;
}

.service-ai .bg-shape {
    width: 450px;
    height: 450px;
    left: -100px;
    top: 25%;
    background: linear-gradient(135deg, #FFD166, #EF476F);
    border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
    animation: glowPulse 10s infinite ease-in-out;
}

/* Portfolio-Sektion - Wellenförmige Form */
.portfolio .bg-shape {
    width: 600px;
    height: 400px;
    left: -200px;
    top: 20%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    animation: 
        waveShape 18s infinite ease-in-out,
        portfolioColorChange 60s infinite linear;
    opacity: 0.4;
    filter: blur(60px);
    z-index: 1;
}

/* Kontakt-Sektion - Sanfte Form */
.contact .bg-shape {
    width: 500px;
    height: 500px;
    left: -150px;
    top: 25%;
    background: linear-gradient(135deg, #073B4C, #118AB2);
    border-radius: 40% 60% 60% 40% / 40% 30% 70% 60%;
    animation: floatSlow 15s infinite ease-in-out alternate;
}

/* Animationen für die Formen */
@keyframes floatSlow {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-30px) scale(1.05);
    }
}

@keyframes floatRotate {
    0%, 100% {
        transform: translateY(0) rotate(-15deg);
    }
    50% {
        transform: translateY(-20px) rotate(-5deg);
    }
}

@keyframes pulseSlow {
    0%, 100% {
        transform: scale(1);
        opacity: 0.15;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.2;
    }
}

@keyframes morphShape {
    0%, 100% {
        border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    }
    25% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }
    50% {
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
    }
    75% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }
}

@keyframes waveShape {
    0%, 100% {
        border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    }
    25% {
        border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
    }
    50% {
        border-radius: 30% 70% 70% 30% / 70% 30% 30% 70%;
    }
    75% {
        border-radius: 40% 60% 60% 40% / 60% 40% 40% 60%;
    }
}

@keyframes glowPulse {
    0%, 100% {
        filter: blur(60px);
        opacity: 0.15;
    }
    50% {
        filter: blur(70px);
        opacity: 0.25;
    }
}

/* Einheitliche pinkige Farbe für den Portfolio-Bereich */
@keyframes portfolioColorChange {
    0%, 100% {
        background: linear-gradient(135deg, rgba(240, 58, 112, 0.7), rgba(233, 30, 99, 0.7)); /* Pink */
    }
    50% {
        background: linear-gradient(135deg, rgba(233, 30, 99, 0.7), rgba(240, 58, 112, 0.7)); /* Pink umgekehrt */
    }
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
    .bg-shape {
        width: 300px !important;
        height: 300px !important;
        left: -100px !important;
    }
}