body {
                            background-image: url("image/Background.webp");
                            background-attachment: fixed;
                            overflow-x: hidden; /* Hide horizontal scrollbar */
                            margin: 0;
                            padding: 0; 
                        }
                        
                        .logo {
                            width: 30%;
                            display: block;
                            margin-left: auto;
                            margin-right: auto;
                            margin-top: -18%;
                            margin-bottom: -18%;
                            width: 50%;
                            }
                        
                        .link-tree {
                            display: block;
                            margin-left: auto;
                            margin-right: auto;
                        }
                        
                        .fa {
                            padding: 20px;
                            font-size: 30px;
                            width: 55px;
                            text-align: center;
                            text-decoration: none;
                            margin: 5px 2px;
                            border-radius: 50%;
                            background: #ffffffb2;
                            color: rgb(0, 0, 0);
                          }
                          
                          .fa:hover {
                              opacity: 0.7;
                          }
                        
                        header h1 {
                            font-size: 70px;
                            font-weight: 600;
                            background-image: linear-gradient(to bottom left, #664daa, #b393d3);
                            color: transparent;
                            background-clip: text;
                            -webkit-background-clip: text;
                        }
                        .image-insta{
                            padding: 16px;
                        }
                        #header{
                            width: 100%;
                            height: 53vh;
                            background-size: cover;
                            background-image: url(website/BannerWebsite.webp);
                            background-position: center;
                        /*    background-size: 100% 120%; */
                        }

                        .top-image{
                            border-radius: 0%;
                            z-index: -10000;
                            position: center;
                            width: max-content;
                            height: max-content;

                        }

                        #header-cards{
                            width: 100%;
                            height: 30vh;
                            background-size: cover;
                            background-position: center;
                        }
                        
                        .comingsoon{
                            color: white;
                            text-align: center;
                            margin-top: -20%;
                            margin-bottom: -20%;
                            font-family: Courier New, Courier, monospace;
                            font-size: 105px;
                        }

                        /*Ab hier Karten*/


                        :root{
                        --background-dark: #2d3548;
                        --text-light: rgba(255,255,255,0.6);
                        --text-lighter: rgba(255,255,255,0.9);
                        --spacing-s: 8px;
                        --spacing-m: 16px;
                        --spacing-l: 24px;
                        --spacing-xl: 32px;
                        --spacing-xxl: 64px;
                        /*width-container größe der Karten*/
                        --width-container: 1300px;
                        }

                        *{
                        border: 0;
                        margin: 0;
                        padding: 0;
                        box-sizing: border-box;
                        }

                        html{
                        height: 100%;
                        font-size: 14px;
                        }

                        .hero-section{
                        align-items: flex-start;
                        margin-top: -10%;
                        display: flex;
                        min-height: 10%;
                        justify-content: center;
                        padding: var(--spacing-xxl) var(--spacing-l);
                        }
                        .cards-section{
                            margin-top: 40px;
                            font-size: 50px;
                            font-family: "Courier New", monospace;
                            color: white;
                            z-index: 10000000;

                        }

                        .card-grid{
                        display: grid;
                        grid-template-columns: repeat(1, 1fr);
                        grid-column-gap: var(--spacing-l);
                        grid-row-gap: var(--spacing-l);
                        max-width: var(--width-container);
                        width: 100%;
                        }

                        @media(min-width: 540px){
                        .card-grid{
                            grid-template-columns: repeat(2, 1fr); 
                        }
                        }

                        @media(min-width: 960px){
                        .card-grid{
                            grid-template-columns: repeat(3, 1fr);
                        /**Menge der karten = 3**/
                        }
                        }

                        .card{
                        list-style: none;
                        position: relative;
                        }

                        .card:before{
                        content: '';
                        display: block;
                        padding-bottom: 150%;
                        width: 100%;
                        }

                        .card__background{
                        background-size: cover;
                        background-position: center;
                        border-radius: var(--spacing-l);
                        bottom: 0;
                        filter: brightness(0.75) saturate(1.2) contrast(0.85);
                        left: 0;
                        position: absolute;
                        right: 0;
                        top: 0;
                        transform-origin: center;
                        transform: scale(1) translateZ(0);
                        transition: 
                            filter 200ms linear,
                            transform 200ms linear;
                        }

                        .card:hover .card__background{
                        transform: scale(1.05) translateZ(0);
                        }

                        .card-grid:hover > .card:not(:hover) .card__background{
                        filter: brightness(0.5) saturate(0) contrast(1.2) blur(20px);
                        }

                        .card__content{
                        left: 0;
                        padding: var(--spacing-l);
                        position: absolute;
                        top: 0;
                        }

                        .card__category{
                        color: var(--text-light);
                        font-size: 0.9rem;
                        margin-bottom: var(--spacing-s);
                        text-transform: uppercase;
                        }

                        .card__heading{
                        color: var(--text-lighter);
                        font-size: 1.9rem;
                        text-shadow: 2px 2px 20px rgba(0,0,0,0.2);
                        line-height: 1.4;
                        word-spacing: 100vw;
                        }

                        .wrapper {
                            height: 100vh;
                            /*This part is important for centering*/
                            display: grid;
                            place-items: center;
                          }
                          
                          .type {
                            width: 55ch;
                            animation: typing 5s steps(55), blink .3s step-end infinite alternate;
                            white-space: nowrap;
                            overflow: hidden;
                            border-right: 3px solid;
                            font-family: monospace;
                            font-size: 2em;
                          }

                          .type2 {
                            width: 25ch;
                            animation: typing 5s steps(25), blink .3s step-end infinite alternate;
                            white-space: nowrap;
                            overflow: hidden;
                            border-right: 3px solid;
                            font-family: monospace;
                            font-size: 2em;
                          }

                          @keyframes typing {
                            from {
                              width: 0
                            }
                          }
                              
                          @keyframes blink {
                            50% {
                              border-color: transparent
                            }
                          }
                        /*Ab hier hidden*/
                        section{
                            display: grid;
                            position: center;
                            align-content: center;
                            min-height: 100vh;
                        }
                        .hidden{
                            opacity: 0;
                            filter: blur(5px);
                            transform: translate(-100%);
                            transition: all 1s;
                        }
                        .show{
                            opacity: 1;
                            filter: blur(0);
                            transform: translateX(0);
                        }
                        /*Ab hier wieder Portfolio head*/

                        nav{
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            flex-wrap: wrap;
                        }

                        .move{
                            position: center;
                            display: block;
                            margin-left: auto;
                            margin-right: auto;
                        }

                        nav ul li{
                            display: inline-block;
                            list-style: none;
                            margin-right: 0px;
                        }
                        nav ul li a{
                            color: #ffffff;
                            text-decoration: none;
                            margin: 100px 20px;
                            font-size: 35px;
                            position: relative;
                        }
                        nav ul li a::after{
                            content:'';
                            width: 0%;
                            height: 3px;
                            background: #ffffff;
                            position: absolute;
                            left: 0;
                            bottom: -6px;
                            transition: 0.5s;
                        }
                        nav ul li a:hover::after{
                            width: 100%;
                        }
                        .header-text{
                            padding-top: 40%;
                            margin-left: 25%;
                            font-size: 30px;

                        }
                        .header-text h1{
                            font-size: 60px;
                            margin-top: 20px;
                        }
                        .header-text span{
                            color:  rgb(158, 158, 158);
                        }
                        /*about*/
                        #about{
                            padding: 80px 0;
                            color: rgb(0, 0, 0);
                        }
                        .row{
                           display: flex;
                           justify-content: space-between;
                            flex-wrap: wrap;
                        }
                        .about-col-1{
                            flex-basis: 35%;
                        }
                        .about-col-1 img{
                            width: 100%;
                            border-radius: 15px;
                        }
                        .about-col-2{
                            flex-basis: 60%;
                        }
                        .sub-title{
                            font-family: 'Arial';
                            font-size: 100px;
                            font-weight: 600;
                            color: #fff;
                        }
                        .text{
                            font-family: 'Open Sans';
                            font-size: 40px;
                            color: white;
                        }
                        
                        .text2{
                            font-family: 'Open Sans';
                            font-size: 40px;
                            color: white;
                        }
                        
                        #language1{
                            font-family: 'Open Sans';
                            font-size: 40px;
                            color: white;    
                        }

                        #language1:hover{
                            font-family: 'Open Sans';
                            font-size: 50px;
                            color: white;
                        }

                        #wrapper {
                            width: 960px;
                            margin: 0 auto;
                        }
                        
                        #wrapper {
                          perspective: 2500;
                            -webkit-perspective: 2500;
                            width: 800px;
                            margin: 200px auto 0 auto;
                          perspective-origin: 50% 150px;
                            -webkit-perspective-origin: 50% 150px;
                          transition: perspective, 1s;
                          -o-transition: -o-perspective, 1s;
                          -moz-transition: -moz-perspective, 1s;
                            -webkit-transition: -webkit-perspective, 1s;
                        }
                        
                        #image:hover {
                          animation-play-state:paused;
                          -o-animation-play-state:paused;
                          -moz-animation-play-state:paused;
                            -webkit-animation-play-state:paused;
                        }
                        
                        
                        @-webkit-keyframes spin {
                            from {
                            transform: rotateY(0);
                            -o-transform: rotateY(0);
                            -ms-transform: rotateY(0);
                            -moz-transform: rotateY(0);
                                -webkit-transform: rotateY(0);
                            }
                            to {
                            transform: rotateY(-360deg);
                            -o-transform: rotateY(-360deg);
                            -ms-transform: rotateY(-360deg);
                            -moz-transform: rotateY(-360deg);
                                -webkit-transform: rotateY(-360deg);
                            }
                        }
                        
                        #image {
                            margin: 0 auto;
                            height: 300px;
                            width: 400px;
                          transform-style: preserve-3d;
                            -webkit-transform-style: preserve-3d;
                          animation: spin 24s infinite linear;
                          -moz-animation: spin 24s infinite linear;
                          -o-animation: spin 24s infinite linear;
                            -webkit-animation: spin 24s infinite linear;
                        }
                        
                        .image {
                            position: absolute;
                            height: 300px;
                            width: 400px;
                            border-radius: 25px;
                            background-color: rgba(0,0,0,0.6);
                            text-align: center;
                            font-size: 20em;
                            color: #fff;
                        }
                        
                        #image > .i1 {
                          transform: translateZ(485px);
                          -moz-transform: translateZ(485px);
                          -o-transform: translateZ(485px);
                          -ms-transform: translateZ(485px);
                          -webkit-transform: translateZ(485px);

                        }
                        #image > .i2 {
                          transform: rotateY(45deg) translateZ(485px);
                          -moz-transform: rotateY(45deg) translateZ(485px);
                          -o-transform: rotateY(45deg) translateZ(485px);
                          -ms-transform: rotateY(45deg) translateZ(485px);
                          -webkit-transform: rotateY(45deg) translateZ(485px);
                        }
                        #image > .i3 {
                          transform: rotateY(90deg) translateZ(485px);
                          -moz-transform: rotateY(90deg) translateZ(485px);
                          -o-transform: rotateY(90deg) translateZ(485px);
                          -ms-transform: rotateY(90deg) translateZ(485px);
                          -webkit-transform: rotateY(90deg) translateZ(485px);
                        }
                        #image > .i4 {
                          transform: rotateY(135deg) translateZ(485px);
                          -moz-transform: rotateY(135deg) translateZ(485px);
                          -o-transform: rotateY(135deg) translateZ(485px);
                          -ms-transform: rotateY(135deg) translateZ(485px);
                          -webkit-transform: rotateY(135deg) translateZ(485px);
                        }
                        #image > .i5 {
                          transform: rotateY(180deg) translateZ(485px);
                          -moz-transform: rotateY(180deg) translateZ(485px);
                          -o-transform: rotateY(180deg) translateZ(485px);
                          -ms-transform: rotateY(180deg) translateZ(485px);
                          -webkit-transform: rotateY(180deg) translateZ(485px);
                        }
                        #image > .i6 {
                          transform: rotateY(225deg) translateZ(485px);
                          -moz-transform: rotateY(225deg) translateZ(485px);
                          -o-transform: rotateY(225deg) translateZ(485px);
                          -ms-transform: rotateY(225deg) translateZ(485px);
                          -webkit-transform: rotateY(225deg) translateZ(485px);
                        }
                        #image > .i7 {
                          transform: rotateY(270deg) translateZ(485px);
                          -moz-transform: rotateY(270deg) translateZ(485px);
                          -o-transform: rotateY(270deg) translateZ(485px);
                          -ms-transform: rotateY(270deg) translateZ(485px);
                          -webkit-transform: rotateY(270deg) translateZ(485px);
                        }
                        #image > .i8 {
                          transform: rotateY(315deg) translateZ(485px);
                          -moz-transform: rotateY(315deg) translateZ(485px);
                          -o-transform: rotateY(315deg) translateZ(485px);
                          -ms-transform: rotateY(315deg) translateZ(485px);
                          -webkit-transform: rotateY(315deg) translateZ(485px);
                        }
                        
                        img {
                          border-radius: 25px;
                        }

                        .ciri {
                            font-family: monospace;
                            font-size: 4em;
                            font-family: 'Gloock', serif;
                            margin-top: -100px;
                            color: white;
                          }

                        #footer {
                            position: fixed;
                            left: 0;
                            bottom: 0;
                            width: 100%;
                            background-color:#0f4667;
                            color: white;
                            /*text-align -- für anpassen mitte links rechts*/
                            text-align: center;
                        }

                        .footer-section{
                            align-items: flex-start;
                            background-image: linear-gradient(15deg, #0f4667 0%, #2a6973 150%);
                            display: flex;
                            min-height: 1%;
                            justify-content: center;
                            padding: var(--spacing-xxl) var(--spacing-l);
    
                        }
                        .cards {
                            font-family: monospace;
                            font-size: 4em;
                            font-family: 'Gloock', serif;
                            margin-top: -100px;
                            background-color: #1e596d;
                            }                            
                        
                        .about-section{
                            margin-bottom: 50px;
                        }

                        .center{
                            display: block;
                            margin-left: auto;
                            margin-right: auto;
                            width: 10%;
                            padding-top: 30px;
                        }
                        .links-section{
                            margin-top: -15%;
                        }

                        /*Button*/
                        *{
                            padding:0;
                            margin:0;
                        }
                        
                        html {
                            scroll-behavior: smooth;
                        }
                        
                        .container4 {
                            left: 5%;
                            right: 5%;
                            margin-top: -30%;
                            padding: 20px 150px;
                            /*Nutzen für mobile anpassung*/
                        }
                        
                        .container2 {
                            padding: 20px 150px;
                            /*Nutzen für mobile anpassung*/
                        }
                        h1{
                            font-size: 32px;
                            margin: 20px 0;
                        }
                        
                        h2{
                            font-size: 26px;
                        }
                        
                        hr {
                            margin: 40px 0;
                        }
                        
                        p{
                            margin-bottom: 30px;
                            line-height: 1.4em;
                            text-align: justify;
                        }
                        
                        #back-to-top-btn {
                            display: none;
                            position: fixed;
                            bottom: 20px;
                            right: 20px;
                            font-size: 26px;
                            width: 50px;
                            height: 50px;
                            background-color: #fff;
                            color: #333;
                            cursor: pointer;
                            outline: none;
                            border: 3px solid #333;
                            border-radius: 50%;
                            transition: color .2s ease-in-out;
                            z-index: 10000000;
                        }

                        #back-to-top-btn:hover {
                            background-color: #333;
                            color: #fff;
                        }
                        
                        @media (max-width :992px){
                            .container {
                                padding: 20px 100px;
                            }
                        
                        
                            #back-to-top-btn {
                                font-size: 22px;
                                width: 40px;
                                height: 40px;
                            }
                        }
                        
                        @media (max-width: 768px){
                            .container {
                                padding: 10px 50px;
                            }
                            #back-to-top-btn {
                                font-size: 18px;
                                width: 32px;
                                height: 32px;
                            }
                            h1 {
                                font-size: 26px;
                            }
                        
                            h2 {
                                font-size: 22px;
                            }
                            hr {
                                margin: 30px 0;
                            }
                        }
                        
                        /* Button Animations */
                        
                        .btnEntrance {
                            animation-duration: 1s;
                            animation-fill-mode :both;
                            animation-name :btnEntrance;
                        }
                        
                        /*Zoom In*/
                         @keyframes btnEntrance {
                            from{
                                opacity: 0;
                                transform: scale3d(.3, .3, .3);
                            }
                            to {
                                opacity: 1;
                            }
                        } 
                        
                        /*FadeInUp*/
                        
                        /* @keyframes btnEntrance {
                            from{
                                opacity: 0;
                                transform: translate3d(0, 100%, 0);
                            }
                            to {
                                opacity: 1;
                                transform: translate3d(0,0,0);
                            }
                        } */
                        
                        .btnExit {
                            animation-duration: 1s;
                            animation-fill-mode :both;
                            animation-name :btnExit;
                        }

                        
                        @keyframes btnExit {
                            from{
                                opacity: 1;
                            }
                        
                            to{
                                opacity: 0;
                                transform: scale3d(.3, .3, .3);
                            }
                        }  
                        
                        /*Fade Out Down*/
                        /* @keyframes btnExit {
                            from{
                                opacity: 1;
                            }
                        
                            to{
                                opacity: 0;
                                transform: translate3d(0,100%,0);
                            }
                        }  */
                        
                        /* Style all font awesome icons */
                        



                        /* smooth image zoomer
                                                .container-box{

                        }

                        .tilt-box-wrap{
                            width: 500px;
                            height: 600px;
                            position: relative;
                            transition: all 0.6s ease-out;
                            perspective: 1000px;
                        }
                        .tilt-box-wrap:hover{
                            transition: all 0.3s linear;
                            transform: scale(1.1);
                        }

                        .tilt-box{
                            width: 100%;
                            height: 100%;
                            justify-content:  space-around;
                            transition: all 0.6s ease-out;
                            transform: rotateX(0deg) rotateY(0deg);
                            perspective: 1000px;
                            transform-style: preserve-3d;
                        }

                        .tilt-box img{
                        }
                        */

                        /*Image tilter*/
                        .tilt-box-wrap{
                            width: 500px;
                            height: 800px;
                            position: relative;
                            transition: all 0.6s ease-out;
                            perspective: 1000px;
                        }
                        .tilt-box-wrap:hover{
                            transition: all 0.3s linear;
                            transform: scale(1.1);
                        }

                        .tilt-box{
                            width: 100%;
                            height: 100%;
                            justify-content:  space-around;
                            transition: all 0.6s ease-out;
                            transform: rotateX(0deg) rotateY(0deg);
                            perspective: 1000px;
                            transform-style: preserve-3d;
                        }

                        .tilt-box img{
                            transform: translateZ(40px);
                        }

                        .t_over{
                            width: 33.333%;
                            height: 33.333%;
                            position: absolute;
                            z-index: 1;
                        }

                        .t_over:nth-child(1){ left: 0; top: 0;}
                        .t_over:nth-child(2){ left: 33.333%; top: 0;}
                        .t_over:nth-child(3){ left: 66.666%; top: 0;}
                        .t_over:nth-child(4){ left: 0; top: 33.333%;}
                        .t_over:nth-child(5){ left: 33.333%; top: 33.333%;}
                        .t_over:nth-child(6){ left: 66.666%; top: 33.333%;}
                        .t_over:nth-child(7){ left: 0; top: 66.666%;}
                        .t_over:nth-child(8){ left: 33.333%; top: 66.666%;}
                        .t_over:nth-child(9){ left: 66.666%; top: 66.666%;}

                        .t_over:nth-child(1):hover ~ .tilt-box{ transform: rotateX(-10deg) rotateY(10deg)}
                        .t_over:nth-child(2):hover ~ .tilt-box{ transform: rotateX(-10deg) rotateY(0deg)}
                        .t_over:nth-child(3):hover ~ .tilt-box{ transform: rotateX(-10deg) rotateY(-10deg)}
                        .t_over:nth-child(4):hover ~ .tilt-box{ transform: rotateX(0deg) rotateY(10deg)}
                        .t_over:nth-child(5):hover ~ .tilt-box{ transform: rotateX(0deg) rotateY(0deg)}
                        .t_over:nth-child(6):hover ~ .tilt-box{ transform: rotateX(0deg) rotateY(-10deg)}
                        .t_over:nth-child(7):hover ~ .tilt-box{ transform: rotateX(10deg) rotateY(10deg)}
                        .t_over:nth-child(8):hover ~ .tilt-box{ transform: rotateX(10deg) rotateY(0deg)}
                        .t_over:nth-child(9):hover ~ .tilt-box{ transform: rotateX(10deg) rotateY(-10deg)}

                        .tilt-box-wrap2{
                            display: block;
                            margin-left: auto;
                            margin-right: auto;
                            width: 100%;
                            padding-top: 30px;
                        }
                        .tilt-box-wrap2:hover{
                            transition: all 0.3s linear;
                            transform: scale(1.1);
                        }
                        
                        .links {
                            font-family: monospace;
                            font-size: 4em;
                            font-family: 'Gloock', serif;
                            margin-top: 200px;
                            color:white;
                          }

                        /*Contact*/
                        .sub-title2{
                            margin-top: 80%;
                            font-size: 100px;
                            font-weight: 600;
                            color: #fff;
                        }

                        .contact-right{
                            flex-basis: 60%;
                        }
                        .btn{
                            display: block;
                            margin: 50px auto;
                            width: fit-content;
                            border: 1px solid #ff004f;
                            padding: 20px 80px;
                            border-radius: 6px;
                            text-decoration: none;
                            color: #fff;
                            font-size: 20px;
                            transition: background 0.5s;
                        }

                        .btn.btn2{
                            display: inline-block;
                            background: black;
                        }

                        .btn:hover{
                            background: #ff004f;
                        }


                        .contact-right form{
                            width: 100%;
                        }
                        
                        form input, form textarea{
                            width: 100%;
                            border: 0;
                            outline: none;
                            background: #262626;
                            padding: 15px;
                            margin: 15px 0;
                            color: #fff;
                            font-size: 18px;
                            border-radius: 6px;
                        }

                        /*SHOP*/
                        .shop-img1{
                            margin-left: 10%;
                            height: 80%;
                            border-radius: 10px;
                        }

                        .text-shop1{
                            font-size: 40px;
                            margin-left: 30%;
                            margin-bottom: -250px;
                            z-index: 10;
                        }

                        .filler{
                            margin-bottom: -40%;
                        }

                        .knopf{
                            display: block;
                            margin: 50px auto;
                            width: fit-content;
                            border: 1px solid #ff004f;
                            padding: 20px 80px;
                            border-radius: 6px;
                            text-decoration: none;
                            color: #fff;
                            font-size: 20px;
                            transition: background 0.5s;
                            margin-left: 230px;
                            margin-top: -200px;
                            z-index: 1000;
                        }

                        .knopf.btn2{
                            display: inline-block;
                            background: black;
                        }

                        .btn2:hover{
                            background: #ff004f;
                        }

                        /*TTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTEST*/




























                            /*css for mobile*/
                            @media only screen and (max-width: 600px){
                            body {
                            font-family: 'Gloock', serif;
                            background-image: url("bild/background.webp");
                            overflow-x: hidden; /* Hide horizontal scrollbar */
                            width: 600px;                
                            }

                            nav ul li{
                            display: inline-block;
                            list-style: none;
                            margin-right: 0px;
                            margin-left: 0px;
                            }
                            nav ul li a{
                            color: #ffffff;
                            text-decoration: none;
                            font-size: 45px;
                            position: relative;
                            }
                            nav ul li a::after{
                            content:'';
                            width: 0%;
                            height: 3px;
                            background: #ffffff;
                            position: absolute;
                            left: 0;
                            bottom: -6px;
                            transition: 0.5s;
                            }
                            nav ul li a:hover::after{
                            width: 100%;
                            }
                            .header-text{
                            margin-top: -30%;
                            margin-left: 20%;

                            }
                            .header-text h1{
                            font-size: 52px;
                            margin-top: 20px;
                            }
                            .header-text span{
                            color: #ffffff;
                            }

                            .type2 {
                            width: 25ch;
                            animation: typing 5s steps(25), blink .3s step-end infinite alternate;
                            white-space: nowrap;
                            overflow: hidden;
                            border-right: 3px solid;
                            font-family: monospace;
                            font-size: 1em;
                            }

                            .about-section{
                            margin-left: 50%;
                            margin-top: 20%;
                            }

                            .sub-title2{
                                margin-top: 100%;
                                font-size: 80px;
                                font-weight: 600;
                                color: #fff;
                            }

                            .links{
                                font-size: 6em;
                                margin-bottom: 5%;
                            }

                            .center{
                                display: block;
                                margin-left: auto;
                                margin-right: auto;
                                width: 25%;
                                padding-top: 30px;
                                border-radius: 0%;
                            }

                            .cards {
                            font-family: monospace;
                            font-size: 4em;
                            font-family: 'Gloock', serif;
                            margin-top: -100px;
                            background: linear-gradient(to left, rgb(76, 193, 197), rgb(98, 66, 163));
                            margin-left: 350px;
                            }
                            :root{
                            --background-dark: #2d3548;
                            --text-light: rgba(255,255,255,0.6);
                            --text-lighter: rgba(255,255,255,0.9);
                            --spacing-s: 8px;
                            --spacing-m: 16px;
                            --spacing-l: 24px;
                            --spacing-xl: 32px;
                            --spacing-xxl: 64px;
                            /*width-container größe der Karten*/
                            --width-container: 2500px;
                            }
                        }


                        .container3 {
                            margin: auto;
                            margin-top: 5%;
                            margin-bottom: 10%;
                            position: relative;
                            display: grid;
                            grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
                            gap: 1em;
                            width: 1700px;
                            height: 600px;
                            transition: all 400ms;
                        }
                        
                        .container3:hover .box {
                            filter: grayscale(50%) opacity(24%);
                        }
                        
                        .box {
                            position: relative;
                            background: var(--img) center center;
                            background-size: cover;
                            transition: all 400ms;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                        }
                        
                        .container3 .box:hover {
                            filter: grayscale(0%) opacity(100%);
                        }
                        
                        .container3:has(.box-1:hover) {
                            grid-template-columns: 3fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
                        }
                        
                        .container3:has(.box-2:hover) {
                            grid-template-columns: 1fr 3fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
                        }
                        
                        .container3:has(.box-3:hover) {
                            grid-template-columns: 1fr 1fr 3fr 1fr 1fr 1fr 1fr 1fr 1fr;
                        }
                        
                        .container3:has(.box-4:hover) {
                            grid-template-columns: 1fr 1fr 1fr 3fr 1fr 1fr 1fr 1fr 1fr;
                        }
                        
                        .container3:has(.box-5:hover) {
                            grid-template-columns: 1fr 1fr 1fr 1fr 3fr 1fr 1fr 1fr 1fr;
                        }
                        
                        .container3:has(.box-6:hover) {
                            grid-template-columns: 1fr 1fr 1fr 1fr 1fr 3fr 1fr 1fr 1fr;
                        }
                        
                        .container3:has(.box-7:hover) {
                            grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 3fr 1fr 1fr;
                        }
                        
                        .container3:has(.box-8:hover) {
                            grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 3fr 1fr;
                        }
                        
                        .container3:has(.box-9:hover) {
                            grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 3fr;
                        }
                        
                        .box:nth-child(odd) {
                            transform: translateY(-16px);
                        }
                        
                        .box:nth-child(even) {
                            transform: translateY(16px);
                        }
                        
                        .box::after {
                            content: attr(data-text);
                            position: absolute;
                            bottom: 20px;
                            background: #000;
                            color: #fff;
                            padding: 10px 10px 10px 14px;
                            letter-spacing: 4px;
                            font-size: 1.6em;
                            text-transform: uppercase;
                            transform: translateY(60px);
                            opacity: 0;
                            transition: all 400ms;
                        }
                        
                        .box:hover::after {
                            transform: translateY(0);
                            opacity: 1;
                            transition-delay: 400ms;
                        }
                        




                        .wrapper2 {
                            z-index: 10000000000;
                            position: fixed;
                            top: 2%;
                            right: -35%;
                            max-width: 345px;
                            width: 100%;
                            background: #fff;
                            border-radius: 8px;
                            padding: 15px 25px 22px;
                            transition: right 0.3s ease;
                            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
                          }
                          .wrapper2.show {
                            right: 20px;
                          }
                          .wrapper2 header {
                            display: flex;
                            align-items: center;
                            column-gap: 15px;
                          }
                          header i {
                            color: #090e1d;
                            font-size: 32px;
                          }
                          header h2 {
                            color: #090e1d;
                            font-weight: 500;
                          }
                          .wrapper2 .data {
                            margin-top: 16px;
                          }
                          .wrapper2 .data p {
                            color: #333;
                            font-size: 16px;
                          }
                          .data p a {
                            color: #0c2b7e;
                            text-decoration: none;
                          }
                          .data p a:hover {
                            text-decoration: underline;
                          }
                          .wrapper2 .buttons {
                            margin-top: 16px;
                            width: 100%;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                          }
                          .buttons .button {
                            border: none;
                            color: #fff;
                            padding: 8px 0;
                            border-radius: 4px;
                            background: #0c2b7e;
                            cursor: pointer;
                            width: calc(100% / 2 - 10px);
                            transition: all 0.2s ease;
                          }
                          .buttons #acceptBtn:hover {
                            background-color: #0637be;
                          }
                          #declineBtn {
                            border: 2px solid #0637be;
                            background-color: #fff;
                            color: #0637be;
                          }
                          #declineBtn:hover {
                            background-color: #0c2b7e;
                            color: #fff;
                          }
                          
                        .head2{
                            position: absolute;
                            margin-top: 30vh;
                            text-align: center;
                            right:46.5%;
                        }
                        
                        .comingsoon0{
                            margin-left:10%;
                            margin-right:10%;
                            margin-top: -30%;
                            color: white;
                            font-family: Arial, sans-serif;
                            font-size: 20px;
                        }
                        
                        .comingsoon2{
                            margin-left:10%;
                            margin-right:10%;
                            color: white;
                            font-family: Arial, sans-serif;
                            font-size: 20px;
                        }
                        
                        .vid{
                            width: 60vh;
                            float: left;
                            margin-top: -5%;
                        }

                        .text3{
                            margin-top: 3%;
                            margin-right: -5%;
                            text-align: center;
                            color: white;
                            font-family: Courier New, Courier, monospace;
                            font-size: 30px;
                        }

                        .boxed{
                            background-color: rgba(71, 71, 71, 0.719);
                            border-radius: 15px;
                            width: 80%;
                            height: 40vh;
                            padding: 5%;
                            z-index: 0;
                            margin-left: 10%;
                            margin-right: 10%;
                        }
                        
                        .hr01{
                            color: white;
                        }