@charset "utf-8";
/* CSS Document */

   /* <!-- Style - card) -->*/
   

        .card {
            overflow: visible;
            width: 300px;
            height: 401px;
            -webkit-font-smoothing: antialiased; /* Für Webkit-basierte Browser */
            -moz-osx-font-smoothing: grayscale; /* Für Firefox auf MacOS */
            text-rendering: optimizeLegibility; /* Allgemeine Optimierung */
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .content {
            width: 300px;
            height: 401px;
            transform-style: preserve-3d;
            transition: transform 300ms;
            box-shadow: 0px 0px 10px 1px #000000ee;
            border-radius: 5px;
            will-change: transform;
        }

        .front {
            background-image: url(LKM-7200-1.jpg);
            background-size: 120%;
            background-repeat: no-repeat;
            background-position: 100% 20%;
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            border-radius: 5px;
            overflow: hidden;
        }

        .front2 {
            background-image: url(LKM-42-1.jpg);
            background-size: 120%;
            background-repeat: no-repeat;
            background-position: 50% 100%;
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            border-radius: 5px;
            overflow: hidden;
        }

        .front3 {
            background-image: url(cnc-1024x683.jpg);
            background-size: 200%;
            background-repeat: no-repeat;
            background-position: 100% 5%;
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            border-radius: 5px;
            overflow: hidden;
        }

        .back {
            width: 100%;
            height: 100%;
            background-color: black;
            justify-content: center;
            position: absolute;
            display: flex;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            align-items: center;
            border-radius: 5px;
            overflow: hidden;
        }

            .back::before {
                position: absolute;
                content: ' ';
                display: block;
                width: 300px;
                height: 160%;
                background: linear-gradient(90deg, transparent, #0078b4, #0078b4, #0078b4, #0078b4, transparent);
                animation: rotation_481 5000ms infinite linear;
                will-change: transform;
            }

        .back-content {
            position: absolute;
            width: 99%;
            height: 99%;
            background-color: #151515;
            border-radius: 5px;
            color: white;
            font-size: 1.5em;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 30px;
        }

        .card:hover .content {
            transform: rotateY(180deg);
            will-change: transform;
        }

        @keyframes rotation_481 {
            0% {
                transform: rotateZ(0deg);
            }

            100% {
                transform: rotateZ(360deg);
            }
        }

        .front {
            transform: rotateY(180deg);
            color: white;
        }

        .front2 {
            transform: rotateY(180deg);
            color: white;
        }

        .front3 {
            transform: rotateY(180deg);

            color: white;
        }

        .front .front-content {
            position: absolute;
            width: 100%;
            height: 100%;
            padding: 10px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .front2 .front-content {
            position: absolute;
            width: 100%;
            height: 100%;
            padding: 10px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .front3 .front-content {
            position: absolute;
            width: 100%;
            height: 100%;
            padding: 10px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .front-content .badge {
            background-color: #00000055;
            padding: 2px 10px;
            border-radius: 10px;
            backdrop-filter: blur(2px);
            width: fit-content;
        }

        .description {
            box-shadow: 0px 0px 10px 5px #00000088;
            width: 100%;
            padding: 10px;
            background-color: #00000099;
            backdrop-filter: blur(5px);
            border-radius: 5px;
            font: 1em;
        }

        .title {
            font-size: 1em;
            max-width: 100%;
            display: flex;
            justify-content: space-between;
        }

            .title p {
                font-size: 1em;
                width: 50%;
            }

        .card-footer {
            color: #ffffff88;
            margin-top: 5px;
            font-size: 1em;
        }

        .front .img {
            position: absolute;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }

        .front2 .img2 {
            position: absolute;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }

        .front3 .img3 {
            position: absolute;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }

        .circle {
            width: 90px;
            height: 90px;
            border-radius: 50%;
            background-color: #ffbb66;
            position: relative;
            filter: blur(15px);
            animation: floating 2600ms infinite linear;
            will-change: transform;
        }

        #bottom {
            background-color: #ff8866;
            left: 50px;
            top: 0px;
            width: 150px;
            height: 150px;
            animation-delay: -800ms;
        }

        #right {
            background-color: #ff2233;
            left: 160px;
            top: -80px;
            width: 30px;
            height: 30px;
            animation-delay: -1800ms;
        }

        @keyframes floating {
    0% { transform: translateY(0px); }
    50% { transform: translateY(5px); }
    100% { transform: translateY(0px); }
}