/* Flip-Card Styles (benötigt für 3D-Flip) */
.flip-card {
    perspective: 1000px;
}
.flip-inner {
    transform-style: preserve-3d;
    transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.flipped .flip-inner {
    transform: rotateY(180deg);
}
.flip-face {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.flip-back {
    transform: rotateY(180deg);
}

/* Slider transition (fade) */
.slide {
    opacity: 0;
    transition: opacity 700ms ease;
}
.slide.active {
    opacity: 1;
}

/* Smooth scroll */
html {
    scroll-behavior: smooth;
}
.background{
    background: #B2C2B2;
}
.background-sec{
    background: #9c93bf;
}
.text{
    color: #B2C2B2;
}
.text-prim{
    color: #485448;
}
.text-sec{
    color: #797196;
}

/* Kontakt-Form */

.kontakt-formular{
    .form-inner{
        .twoCol{
            display: flex;
            gap: 10px;
            .input{
                width: calc(50% - 5px);
            }
            @media(max-width: 767px){
                display: block;
                .input{
                    width: 100%;
                }
            }
        }
        .input{
            display: flex;
            flex-direction: column;
            margin-bottom: 10px;
            label{
                margin-bottom: 3px;
            }
            input{
                padding: 10px;
                border-radius: .375rem;
                &:focus{
                    outline: 3px solid #B2C2B2;
                }
            }
            textarea{
                padding: 10px;
                border-radius: .375rem;
                &:focus{
                    outline: 3px solid #B2C2B2;
                }
            }
        }
    }
}




   .shadow-smooth {
       box-shadow: 0 8px 30px rgba(0,0,0,0.08);
   }

.ease-out-smooth {
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}



@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(16px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}



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

.animate-fade-in-up {
    animation: fadeInUp 700ms ease-out both;
}