:root {
    --astarr-dunkel: #1F1C30;
    --logo-hell: #7463EA;
    --logo-dunkel: #5F48D9;
    --box-bg: #12101C;
    --highlight: #C0ABFF;
    --white: #ffffff;
}

html {
    scroll-behavior: smooth;
    
}

body {
    margin: 0;
    font-family: "basic-sans", "Sora", sans-serif;
    color: var(--white);
    overflow-x: hidden;
}


.wrapper {
    max-width: 85%;
    margin: 0 auto;
}
.wrapper2 {
    max-width: 85%;
    margin: 0 auto;
}

#language-switch {
    background-color: #007BFF; /* Blue background */
    color: white; /* White text */
    border: 1px; /* No border */
    padding: 10px 20px; /* Padding */
    cursor: pointer; /* Pointer cursor on hover */
    font-family: "basic-sans"; /* Font family */
    font-size: 14px; /* Font size */
    border-radius: 20px; /* Rounded corners */
    position: absolute; /* Position the button absolutely */
    top: 15px; /* Distance from the top */
    right: 10px; /* Distance from the right */
}

@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap);
:root{--cookieBannerLight:#ffffff;--cookieBannerDark:#393d4d}
#cookieBanner *{margin:0;padding:0;text-decoration:none;list-style:none;font-family:Poppins,sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box}
#cookieBanner a,#cookieBanner button{cursor:pointer;color:inherit;font-family:inherit}#cookieBanner button
{outline:0;border:none;-moz-appearance:none;appearance:none;-webkit-appearance:none;appearance:none}
#cookieBanner em,#cookieBanner strong{font-weight:700;font-family:inherit}
#cookieBanner a:hover{text-decoration:none;cursor:pointer}
#cookieBanner a:focus,#cookieBanner input:focus{outline:0;list-style:none}
#cookieBanner.light{background-color:#fff;background-color:var(--cookieBannerLight);color:#393d4d;color:var(--cookieBannerDark)}
#cookieBanner.light p,#cookieBanner.light ul{color:#393d4d;color:var(--cookieBannerDark)}#cookieBanner.light h5{color:var(--cookieBannerDark)}
#cookieBanner.light button#cookieReject{background:#fff;background:var(--cookieBannerLight)}
#cookieBanner.dark{background-color:#393d4d;background-color:var(--cookieBannerDark);color:#fff;color:var(--cookieBannerLight)}
#cookieBanner.dark p,#cookieBanner.dark ul{color:#fff;color:var(--cookieBannerLight)}#cookieBanner.dark h5{color:#fff;color:var(--cookieBannerLight)}
#cookieBanner.dark button#cookieReject{background:0 0;color:#fff;color:var(--cookieBannerLight);border:1px solid #fff;border:1px solid var(--cookieBannerLight)}
#cookieBanner{-webkit-box-sizing:border-box;box-sizing:border-box;position:fixed;padding:20px;border-radius:10px;-webkit-box-shadow:0 6px 6px rgba(0,0,0,.25);box-shadow:0 6px 6px rgba(0,0,0,.25);font-family:inherit;z-index:999997}
#cookieBanner #closeIcon{width:20px;height:20px;cursor:pointer;color:#bfb9b9;overflow:hidden;opacity:.85;z-index:999999;position:absolute;top:4px;right:4px}
#cookieBanner svg{display:block}#cookieBanner.display-left{left:30px;bottom:30px;max-width:395px}#cookieBanner.display-right{right:30px;bottom:30px;max-width:395px}
#cookieBanner.display-top{top:30px;width:800px;left:50%;margin-left:-400px}#cookieBanner.display-bottom{bottom:30px;width:800px;left:50%;margin-left:-400px}
#cookieBanner.display-bottom .content-wrap,#cookieBanner.display-top .content-wrap{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
#cookieBanner.display-bottom .msg-wrap,#cookieBanner.display-top .msg-wrap{max-width:65%;width:100%}
#cookieBanner.display-bottom .msg-wrap,#cookieBanner.display-top .msg-wrap{margin-bottom:0}
#cookieBanner.display-bottom #cookieSettings,#cookieBanner.display-top #cookieSettings{margin-bottom:0}
#cookieBanner.display-bottom #cookieTypes,#cookieBanner.display-top #cookieTypes{margin-top:20px}
#cookieBanner .btn-wrap{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;font-weight:700;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin:0 -5px 0 -5px;-ms-flex-wrap:wrap;flex-wrap:wrap}
#cookieBanner .btn-wrap button{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;padding:0 7px;margin:0 5px 10px 5px;border-radius:20px;cursor:pointer;white-space:nowrap;min-width:130px;line-height:36px;border:none;font-family:inherit;font-size:16px;-webkit-transition:-webkit-box-shadow .3s;transition:-webkit-box-shadow .3s;-o-transition:box-shadow .3s;transition:box-shadow .3s;transition:box-shadow .3s,-webkit-box-shadow .3s}
#cookieBanner .btn-wrap button:hover{-webkit-transition:-webkit-box-shadow .4s cubic-bezier(.25,.8,.25,1),-webkit-transform .4s cubic-bezier(.25,.8,.25,1);transition:-webkit-box-shadow .4s cubic-bezier(.25,.8,.25,1),-webkit-transform .4s cubic-bezier(.25,.8,.25,1);-o-transition:box-shadow .4s cubic-bezier(.25,.8,.25,1),transform .4s cubic-bezier(.25,.8,.25,1);transition:box-shadow .4s cubic-bezier(.25,.8,.25,1),transform .4s cubic-bezier(.25,.8,.25,1);transition:box-shadow .4s cubic-bezier(.25,.8,.25,1),transform .4s cubic-bezier(.25,.8,.25,1),-webkit-box-shadow .4s cubic-bezier(.25,.8,.25,1),-webkit-transform .4s cubic-bezier(.25,.8,.25,1);-webkit-box-shadow:0 2px 5px 0 rgba(0,0,0,.3);box-shadow:0 2px 5px 0 rgba(0,0,0,.3);-webkit-transform:translate3d(0,-1px,0);transform:translate3d(0,-1px,0)}
#cookieBanner #cookieSettings{font-size:12px;font-weight:700;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;text-transform:uppercase;cursor:pointer;font-weight:400;margin-bottom:20px}#cookieBanner #cookieSettings svg{vertical-align:middle;margin-right:8px}
#cookieBanner h4{font-family:inherit;color:white; font-weight:600;font-size:18px}
#cookieBanner .title-wrap{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:10px}
#cookieBanner .title-wrap svg{margin-right:10px}
#cookieBanner h5{font-family:inherit;font-weight:700;font-size:12px;margin-bottom:10px;text-transform:uppercase}
#cookieBanner p,#cookieBanner ul{font-size:14px;margin-bottom:20px}
#cookieBanner p:last-child{margin-bottom:0;text-align:left}
#cookieBanner li{width:49%;display:inline-block}
#cookieBanner a{text-decoration:none;font-size:14px;padding-bottom:2px;border-bottom:1px dotted rgba(255,255,255,.75);-webkit-transition:all .3s ease-in;-o-transition:all .3s ease-in;transition:all .3s ease-in}
#cookieTypes label{text-transform:uppercase;font-size:13px}
#cookieBanner button:disabled{opacity:.3}
#cookieBanner input[type=checkbox]{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto;-webkit-font-smoothing:antialiased;text-rendering:optimizeSpeed;width:14px;height:14px;margin:4px 10px 0 0;display:block;float:left;position:relative;outline:0;border:none}
#cookieBanner input[type=checkbox]:checked:after{background:#d3d3d3;content:"\2714";color:grey}
#cookieBanner input[type=checkbox]:after{content:"";vertical-align:middle;text-align:center;line-height:13px;position:absolute;cursor:pointer;height:14px;width:14px;left:0;top:0;font-size:10px;background:#d3d3d3}
#cookieBanner.display-bottom.full-width-true,#cookieBanner.display-top.full-width-true{width:100%;max-width:100%;left:auto;right:auto;bottom:auto;top:0;border-radius:0;margin:auto}
#cookieBanner.display-bottom.full-width-true{bottom:0;top:auto;-webkit-box-shadow:0 -3px 3px rgb(0 0 0 / 25%);box-shadow:0 -3px 3px rgb(0 0 0 / 25%)}
#cookieBanner.display-bottom.full-width-true .title-wrap,#cookieBanner.display-top.full-width-true .title-wrap{display:none}
#cookieBanner.display-bottom.full-width-true .btn-wrap button,#cookieBanner.display-top.full-width-true .btn-wrap button{margin-bottom:10px}@media only screen and (max-width:800px){
#cookieBanner.display-bottom,#cookieBanner.display-top{width:100%;max-width:100%;left:auto;right:auto;bottom:auto;top:0;border-radius:0;margin:auto}
#cookieBanner.display-bottom{bottom:0;top:auto;-webkit-box-shadow:0 -3px 3px rgb(0 0 0 / 25%);box-shadow:0 -3px 3px rgb(0 0 0 / 25%)}
#cookieBanner.display-bottom .btn-wrap button,#cookieBanner.display-top .btn-wrap button{margin-bottom:10px}
#cookieBanner.display-bottom .msg-wrap,#cookieBanner.display-top .msg-wrap{margin-right:20px}}@media only screen and (max-width:600px){
#cookieBanner.display-left,#cookieBanner.display-right{width:100%;max-width:100%;left:auto;right:auto;bottom:0;border-radius:0;-webkit-box-shadow:0 -3px 3px rgb(0 0 0 / 25%);box-shadow:0 -3px 3px rgb(0 0 0 / 25%)}
#cookieBanner.display-bottom .content-wrap,#cookieBanner.display-top .content-wrap{display:block}#cookieBanner.display-bottom .msg-wrap,#cookieBanner.display-top .msg-wrap{max-width:100%}
#cookieBanner.display-bottom #cookieSettings,#cookieBanner.display-top #cookieSettings{margin-bottom:20px}}

.masterlogo {
    z-index: 1;
}

header {
    display: flex; /* Changed to flex for alignment */
    justify-content: center; /* Center the content */
    align-items: center; /* Center vertically */
    position: relative; /* Keep this for stacking context */
    background: linear-gradient(180deg, #1F1C30 50%, #12101C 100%);
    width: 100%;
    height: 100vh;
    z-index: 2; /* Higher z-index to stay above the background lines */
    padding-bottom: 10vh;
    margin-bottom: -10vh;
}
.linien {
    z-index: -2;
}

.hero-section {
    flex-direction: column;
    text-align: center;
    display: flex;
    align-items: center;
    position: relative;
    justify-content: center;
    height: 100%;
    width: 100%;
    margin-top: -10vh; /* Move the section up by 10vh */
}


h8 {
    color: #FFF;
    text-align: center;
    font-family: "basic-sans";
    font-size: 36px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -1.08px;
    opacity: 0.25;
    margin: -10px auto 13vh; /* Add negative top margin to raise it */
    display: block;
    width: fit-content;
}

.headerbutton {
    border-radius: 70px;
    padding: 16px 64px;
    background: #FFF;
    color: #1F1C30;
    font-family: Sora;
    font-size: 29.073px;
    font-weight: 400;
    letter-spacing: -0.872px;
    text-decoration: none;
    text-align: center;
    position: relative;
    margin-top: -30%;
    transition: 0.35s ease;
    animation: popUp 1.2s ease forwards; /* Add animation */
    opacity: 0; /* Initially hidden */
}

@keyframes popUp {
    0% {
        transform: translateY(30px); /* Start 30px below */
        opacity: 0; /* Start hidden */
    }
    100% {
        transform: translateY(0); /* End at original position */
        opacity: 1; /* Fully visible */
    }
}

.animate {
    opacity: 1; /* Make sure it's visible for animation */
}


.headerbutton:hover {
    letter-spacing: 2.5px;
    background: lightgrey;
}

.center-links li a {
    color: white; /* Use your desired color */
    transition: filter 0.3s; /* Smooth transition effect */
}

.center-links li a:hover {
    filter: brightness(85%); /* Darkens the link by 10% on hover */
}

.outlinebutton {
    border: 1px solid white;
    border-radius: 30px;
    padding: 8px 20px;
    color: white;
    transition: background-color 0.4s, color 0.4s;
}

.outlinebutton:hover {
    background-color: white; /* Change background to white on hover */
    color: var(--astarr-dunkel); /* Change text color to var(--astarr-dunkel) on hover */
}

.navbar {
    align-items: center;
}

.mobile-nav {
    display: none;
}

nav {
    display: flex;
    justify-content: center; /* Zentriert den inneren Container */
    list-style: none;
    align-items: center;
    z-index: 100;
    position: fixed;
    width: 100%;
    height: 70px;
    background: var(--astarr-dunkel);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 1192px; /* Setzt die Breite des Inhalts */
}

nav .logo {
    height: 36px;
    transition: filter 0.3s;
}

nav .logo:hover {
    filter: brightness(85%);
}

nav ul {
    display: flex;
    align-items: center;
    gap: 82px;
    list-style: none;
    margin: 0;
}

nav ul li a {
    color: #FFF;
    font-family: Sora;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: -0.45px;
    text-decoration: none;
}

h1 {
    color: #FFF;
    text-align: center;
    font-family: Sora;
    font-size: 96.909px;
    font-weight: 700;
    line-height: 102.966px;
    letter-spacing: -2.907px;
}

h2 {
    color: #FFF;
    text-align: center;
    font-family: Sora;
    font-size: 72px;
    font-weight: 700;
    line-height: 85px;
    letter-spacing: -2.907px;
}



/* Header animation */



.typewriter {
    opacity: 0; /* Initially hidden */
    filter: blur(5px); /* Start blurred */
    transform: translateX(-30vh); /* Start position */
    animation: slideIn 1.2s ease forwards; /* Ensure the animation name is correct */
}

@keyframes slideIn {
    to { /* Use 'to' for the final state */
        opacity: 1; /* Fully visible */
        filter: blur(0); /* Clear blur */
        transform: translateX(0); /* Move to original position */
    }
}

.masterlogo {
    opacity: 0; /* Initially hidden */
    filter: blur(15px);
    transform: scale(1);
    grid-area: 1/1;
    scale: 90%;
    filter: drop-shadow(20px 20px 175px var(--logo-hell));
    animation: fadeIn 1s ease forwards; /* Call the animation */
}

/* Define the keyframes for the fadeIn effect */
@keyframes fadeIn {
    to {
        opacity: 1; /* Fully visible */
        transform: scale(1);
        filter: blur(0);
        grid-area: 1/1;
        scale: 90%;

        filter: drop-shadow(20px 20px 175px var(--logo-hell));
    }
}



/* Anim ende */


.overlap {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    place-items: center;
    position: relative; 
}

.background-line {
    position: absolute; /* Keep this absolute for full coverage */
    top: 50%; /* Move down to the center */
    left: 50%; /* Move right to the center */
    height: 120%; /* Set height to 120% */
    width: 100%; /* Set width to 100% */
    transform: translate(-50%, -50%); /* Center the element */
    z-index: -2; /* Lower than the header and transition */
    object-fit: cover; /* Cover the entire background area */
}


.logo {
    z-index: 10; /* Ensure logo is above the background */
}

h1 {
    z-index: 10; /* Ensure heading is above the background */
}

.headerbutton {
    z-index: 10; /* Ensure button is above the background */
}

.overlap h1 {
    grid-area: 1/1;
    z-index: 10;
}




.spheres {
    position: absolute; /* Positioning the spheres absolutely */
    top: 0; /* Align to the top of the header */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Adjust the position */
    z-index: 2; /* Ensure spheres are above background lines */
}

.sphere {
    border-radius: 50%; /* Make them circular */
    position: absolute; /* Position them absolutely */
    opacity: 1; /* Adjust opacity for better visibility */
    rotate: -35deg;
    opacity: 1;
}

.sphere.sphere1 {
    left: -100vh;
    top: 60vh;
    scale: 1;
}

.sphere.sphere2 {
    left: -80vh;
    scale: 0.5;
}

.sphere.sphere3 {
    left: 65vh;
    top: 45vh;
    scale: 0.7;
}

/* Logo Slider Anfang */

.Kunden {
    position: absolute; /* Ändere zu absolute */
    bottom: 0; /* Setze den Slider ganz nach unten */
    width: 100%; /* Stelle sicher, dass es die gesamte Breite einnimmt */
    z-index: 10;
}

.logos {
    height: auto;
    margin: 0;
    width: 250px;
    display: grid;
    place-items: center;
    position: relative;
    top: -10vh;
}

.slide-track {
    display: flex;
    width: max-content 	; /* Breite an die Anzahl der Logos anpassen */
    animation: scroll 30s linear infinite; /* Animation hinzufügen */
}

.slide {
    height: 83.474px;
    display: flex;
    align-items: center;
    padding: 0 50px;
    opacity: 0.4;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-250px * 12)); /* Hälfte der Logos für endlosen Effekt */
    }
}

/* Logo Slide ende */

/* Portfolio Slider Anfang */

.pblur {
    width: 638.682px; 
    height: 559.454px; 
    scale: 0.7;
    background-image: radial-gradient(circle, #C0ABFF, transparent); /* Change here */
    filter: blur(200px);
    position: absolute;
    top: 90vh;
    right: 5vh;
    z-index: -1;
}

.pblur2 {
    width: 638.682px; 
    height: 559.454px; 
    scale: 1;
    background-image: radial-gradient(circle, #5F48D9, transparent); /* Change here */
    filter: blur(200px);
    position: absolute;
    opacity: 0.8;
    top: 35vh;
    left: 5vh;
    z-index: -1;
}

.portfolioslider {
    padding-top: 5vh;
    height: auto;
    margin: auto;
    position: relative;
    width: 100%;
    display: grid;
    place-items: center;
    transform: skew(3deg, 3deg);
    transform: perspective(12);
}

.portfolio-slide-track {
    display: flex;
    width: 100%;
    animation: portfolioscroll 40s linear infinite;
}
.portfolio-slide-track:hover {
    animation-play-state: paused;
}

.portfolioslide {
    height: auto;
    width: 650px;
    display: flex;
    align-items: center;
    padding: 15px;
}

.portfolioslider img {
    width: 100%;
    height: auto;
    transition: transform 0.35s ease;
}

.portfolioslider img:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
}

.portfolio {
    background: var(--astarr-Dunkel, #1F1C30);
    padding: 5% 0 10%;
    position: relative;
    z-index: 2;
}

.wrapper h2 {
    z-index: 4;
}

@keyframes portfolioscroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-650px*5));
    }
}

/* Portfolio Slide Ende */

.leistungen {
    background: linear-gradient(180deg, #12101C 65.17%, #1F1C30 100%);
    margin: 0;
    position: relative;
    z-index: 3;
    overflow: visible;
}

.sphere.sphere4 {
    position: absolute; /* Adjust positioning as needed */
    top: 12vh; /* Example vertical position */
    left: 2vh; /* Example horizontal position */
    scale: 0.85;
    z-index: -1;
}

.sphere.sphere5 {
    position: absolute; /* Adjust positioning as needed */
    top: 65vh; /* Example vertical position */
    right: 2vh; /* Example horizontal position */
    z-index: -1;
}


.übergang {
    background: linear-gradient(180deg, transparent 50%, #1F1C30 50%, #12101C 100%); 
    z-index: 10; /* Higher z-index to place it above the background lines */
    width: 100%;
    height: auto;
    position: relative;
}

.übergang img {
    width: 100%;
}

.leistungen {
    background-color: var(--box-bg);
    width: 100%;
    padding: 20px 0;
}

.container-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: stretch; /* Container auf die gleiche Höhe strecken */
    margin: 20px 0;
}

.container {
    opacity: 0; /* Initially hidden */
    filter: blur(5px); /* Start blurred */
    transform: translateY(20px); /* Start a bit below */
    transition: all 0.6s ease; /* Transition for container */
}

/* Staggering effect */
.container-wrapper .container:nth-child(1) {
    transition-delay: 0ms; /* No delay for the first child */
}
.container-wrapper .container:nth-child(2) {
    transition-delay: 200ms; /* Delay for the second child */
}
.container-wrapper .container:nth-child(3) {
    transition-delay: 400ms; /* Delay for the third child */
}

.show {
    filter: blur(0); /* Remove blur */
    transform: translateY(0); /* Move to original position */
    opacity: 1; /* Make visible */
}



.container {
    position: relative;
    width: 460px;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Elemente gleichmäßig verteilen */
    align-items: center;
    background: var(--astarr-dunkel);
    margin: 30px 10px;
    padding: 20px 15px;
    border-radius: 28.65px;
    flex: 1; /* Alle Container gleichmäßig verteilen */
    min-height: 400px; /* Mindeshöhe für Container, um Konsistenz zu gewährleisten */
}

.containericon {
    width: 148.973px; /* Feste Breite */
    height: 148.973px; /* Feste Höhe */
    display: flex;
    justify-content: center; /* Horizontale Zentrierung */
    align-items: center; /* Vertikale Zentrierung */
    background-color: var(--box-bg);
    border-radius: 43px;
    overflow: hidden; /* Überlauf verstecken */
    margin-bottom: 20px; /* Abstand unter dem Icon */
}

.containericon img {
    max-width: 100%;
    height: auto; /* Bild im Verhältnis skalieren */
}

.info {
    display: flex; 
    flex-direction: column; 
    align-items: center; /* Zentriere den Inhalt */
    flex-grow: 1; /* Verteile den Platz gleichmäßig */
    text-align: center; /* Zentriere Text */
    margin-bottom: 20px; /* Abstand nach unten für eine bessere Sichtbarkeit */
}

h5 {
    color: #FFF;
    font-family: Sora;
    font-size: 28.649px;
    font-weight: 600;
    margin: 10px 0; /* Abstand über und unter der Überschrift */
}

.text {
    color: rgba(255, 255, 255, 0.75);
    font-family: "basic-sans",sans-serif;
    font-size: 20px;
    font-weight: 200;
    line-height: 1.5; /* Verbessert die Lesbarkeit */
    margin-bottom: 20px; /* Abstand unter dem Text */
}

.containerbutton {
    width: 410px; /* Feste Breite */
    height: 50px; /* Feste Höhe für alle Buttons */
    border-radius: 35.13px;
    background: var(--Linear, linear-gradient(90deg, #C0ABFF 0%, #5F48D9 100%));
    text-decoration: none;
    color: #FFF;
    text-align: center;
    font-family: "basic-sans",sans-serif;
    font-size: 20px;
    font-weight: 300;
    display: flex; /* Flexbox aktivieren */
    justify-content: center; /* Zentrieren des Textes */
    align-items: center; /* Vertikales Zentrieren */
    margin-top: auto; /* Automatischer Abstand nach oben */
    transition: background 0.3s ease, letter-spacing 0.25s; /* Transition für Hintergrund und Buchstabenabstand */
}

/* Hover-Effekt */
.containerbutton:hover {
    filter: brightness(90%);
    letter-spacing: 0.8px;
}


/* Prozess Animation */
.arrows {
    opacity: 0;           /* Initially hidden */
    transition: opacity 1s ease; /* Fade transition */
}

.arrows.show {
    opacity: 1;           /* Fully visible when class added */
}

.prozess-container {
    opacity: 0; /* Initially hidden */
    filter: blur(5px); /* Start blurred */
    transform: translateY(20px); /* Start a bit below */
    transition: all 0.6s ease; /* Transition for container */
}

/* Staggering effect */
.wrapperprozess .prozess-container:nth-child(1) {
    transition-delay: 0ms; /* No delay for the first child */
}
.wrapperprozess .prozess-container:nth-child(2) {
    transition-delay: 200ms; /* Delay for the second child */
}
.wrapperprozess .prozess-container:nth-child(3) {
    transition-delay: 400ms; /* Delay for the third child */
}
.wrapperprozess .prozess-container:nth-child(4) {
    transition-delay: 600ms; /* Delay for the fourth child */
}

.show {
    filter: blur(0); /* Remove blur */
    transform: translateY(0); /* Move to original position */
    opacity: 1; /* Make visible */
}


/* Prozess animation */
.prozess {
    position: relative;
    padding: 10% 0;
    background: linear-gradient(180deg, #12101C 70.71%, #1F1C30 100%);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-bottom: 10vh;
    z-index: 2; /* Set a higher z-index to ensure it is above the spheres */
    overflow: visible;
    padding-bottom: 10%;
}

.pzblur {
    width: 638.682px; 
    height: 559.454px; 
    scale: 0.7;
    background-image: radial-gradient(1600.27% 105.5% at 42.92% -7.08%, #7463EA 0%, #1F1C30 100%);
    filter: blur(200px);
    position: absolute;
    left: -25vw;
    top: 70vh;
    z-index: -1;
}

.prozess h2 {
    position: relative;
    top: -10vh;
}



.arrows {
    position: absolute;
    width: 1254.66px;
    top: 18rem;
    z-index: -1;
    display: block;
}

.prozess-container {
    width: 20vw; /* Fixed width */
    height: 394px; /* Fixed height */
    background-color: var(--astarr-dunkel); /* Background color for container */
    display: flex;
    flex-direction: column; /* Align content vertically */
    align-items: center; /* Center content horizontally */
    justify-content: center; /* Center content vertically */
    padding: 20px;
    border-radius: 28.65px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Optional shadow for depth */
    margin: 20px; /* Spacing between containers */
    text-align: center; /* Center the text */
    box-sizing: border-box; /* Ensures padding is included in width/height */
    padding-bottom: 50px;
}

/* Icon container with rounded square */
.prozess-icon {
    width: 148px; /* Fixed size for icon box */
    height: 148px; /* Fixed size for icon box */
    background-color: var(--box-bg); /* Background color for icon box */
    border-radius: 43px; /* Rounded corners for the square */
    display: flex;
    justify-content: center; /* Center the icon horizontally */
    align-items: center; /* Center the icon vertically */
    margin-top: 53px;
    flex-shrink: 0; /* Prevent shrinking */}

/* Icon itself */
.prozess-icon img {
    width: 45%; /* Adjust size of the icon */
    height: 45%; /* Adjust size of the icon */
}

/* Heading for each container */
.prozess-info h5 {
    font-size: 24px; /* Heading font size */
    font-weight: 600; /* Make heading bold */
    color: rgba(255, 255, 255, 0.9); /* White with slight transparency */
    margin-top: 30px; /* Space between heading and text */
    line-height: 1.2;
    min-height: 40px; /* Reduced height for more compact layout */
    margin-bottom: -10px;
    flex-shrink: 0; /* Prevent shrinking */
}

.prozess-info p.text {
    font-size: 16px; /* Text font size */
    font-weight: 300; /* Light font weight */
    color: rgba(255, 255, 255, 0.75); /* Slightly transparent white */
    line-height: 1.8; /* Line height for readability */
    padding: 0 15px; /* Optional padding inside the text */
    min-height: 100px; /* Fixed height for explanation text */
    flex-grow: 1; /* Allow text section to grow if needed */
}

.prozess-info {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    flex-grow: 1; 
    text-align: center;
    min-width: 360px;
}


.spheres3 {
    position: absolute;
    top: 0;
    z-index: -1; /* Lower z-index to place spheres behind all other content */
    width: 100%; /* Ensure it stretches to fit the container */
    height: 100%; /* Cover the whole section */
}

.sphere.sphere6 {
    right: 30vh;
    top: 5vh;
    scale: 0.75;
}

.sphere.sphere7 {
    left: 5vh;
    top: 35vh;
    scale: 0.7;
}

.sphere.sphere8 {
    right: 10vh;
    top: 64vh;
    scale: 0.9;
}


.links {
    display: flex;           /* Flexbox aktivieren */
    flex-wrap: wrap;        /* Erlaube Umbrüche auf kleineren Bildschirmen */
    justify-content: center; /* Zentriere die Container */
}

.abo {
    position: relative; /* Added */
    width: 1110px;
    height: 425px;
    border-radius: 28.65px;
    background: linear-gradient(278deg, #C0ABFF 0.17%, #7463EA 99.83%);
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    overflow: visible;
    z-index: 1; /* Ensure this is above the blur */
}

.abocontent {
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    align-items: flex-start; /* Align elements to the left */
    gap: 20px; /* Space between each element */
    margin:100px;
}


.abo p {
    color: #FFF;
    font-family: "basic-sans",sans-serif;
    font-size: 25px;
    font-weight: 300;
    margin: 0; /* Remove default margin */
}

.abo h6 {
    color: #FFF;
    font-family: Sora;
    font-size: 48px;
    font-weight: 600;
    margin: 0; /* Remove default margin */
}

.abobtn {
    border-radius: 40px;
    background: linear-gradient(270deg, #FFF 0%, #C0ABFF 100%);
    color: var(--astarr-dunkel);
    padding: 5px 100px;
    cursor: pointer;
    font-family: "basic-sans",sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 40.108px;
    text-decoration: none;
    transition: letter-spacing 0.4s ease, border 0.4s ease;
}

.abobtn:hover {
    letter-spacing: 1px;
}

.bgabo {
    position: relative;
    background-color: var(--astarr-dunkel);
    padding: 5vh;
    overflow: visible; /* Wichtig für Überlauf */
    z-index: -1; /* Hauptinhalt */
}

/* Abo Animation */

.abo {
    opacity: 0;
    transform: translateX(-100px);
    filter: blur(5px);
    transition: all 1s ease;
}

.abo.show {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
}


/* Abo Animation */


.desktop-text {
    display: block; /* Hide original text on mobile */
}

.mobile-text {
    display: none; /* Show mobile-specific text */
}


.neu {
    position: absolute; /* Positioniert das Element relativ zur .abo-Sektion */
    bottom: -100px; /* Abstand von unten, nach Bedarf anpassen */
    right: -90px; /* Abstand von rechts, nach Bedarf anpassen */
    z-index: 10; /* Sicherstellen, dass das Bild im Vordergrund ist */
    animation: rotation 5s infinite ease;
}

@keyframes rotation {
    0%    {
      transform: rotate(0deg);
    }
    50%  {
      transform: rotate(15deg);
    }
    100% {
        transform: rotate(0deg);
    }
  }

.aboicon {
    position: absolute;
    bottom: 0; /* Abstand vom unteren Rand */
    right: 10px;  /* Abstand vom rechten Rand */
    height: auto; /* Damit das Seitenverhältnis erhalten bleibt */
}

/* Community animation */

    .community-links {
        opacity: 0;
        filter: blur(5px);
        transform: translateX(-100px);
        transition: all 1.5s ease;
    }

    .community-links.show {
        opacity: 1;
        filter: blur(0);
        transform: translateX(0);
    }

    .community-rechts {
        opacity: 0;
        filter: blur(5px);
        transform: translateY(100px);
        transition: all 1.5s ease;
    }

    .community-rechts.show {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0);
    }

/* Ende anim */


.community {
    display: flex;
    align-items: flex-start; 
    gap: 20px;
    background-color: var(--astarr-dunkel);
    padding-right: 60px;
    padding-left: 60px;
    padding-bottom: 500px;
    padding-top: 140px;
    position: relative;
    z-index: 2; /* Sicherstellen, dass der Inhalt sichtbar bleibt */
    height: 110vh;
}

.community-links {
    flex: 1;
    padding-left: 20px; 
    position: relative;
}

.community-rechts {
    flex: 0 0 50%;
    margin-left: auto;
    position: relative; 
    top: 280px; 
    left: -40px; 
    z-index: 2;
    height: auto;
    width: 100%;
    overflow: visible;
}

.slidet {
    width: 100%;
    opacity: 1;
}

.community h2 {
    text-align: left;
    z-index: 2;
}


.community-links p {
    color: #FFF;
    text-align: justify;
    font-family: "basic-sans",sans-serif;
    font-size: 35px;
    font-weight: 300;
    line-height: 40.108px;
    height: auto;
    text-align: justify;
    position: absolute;
    z-index: 2;
    width: 428px;
}

.community-rechts p {
    color: #FFF;
    text-align: justify;
    font-family: "basic-sans",sans-serif;
    font-size: 44px;
    font-weight: 400;
    line-height: 55px;
    letter-spacing: -1.32px;
    width: 100%;
}

.anfzeichen {
    position: absolute;
    scale: 1.3;
    top: 0px;
    left: -20px;
    z-index: -1;
    
}

#chevron-right {
    opacity: 0.7;
    transform: scale(2);           /* Scale the chevron */
    position: absolute;            /* Absolute positioning for better placement */
    z-index: 100;                  /* Ensure it's on top */
    top: 0px;                    /* Adjust this value to lower the chevron further */
    left: 97%;                   /* Adjust the left position as needed */
    cursor: pointer;               /* Change cursor to pointer for interactivity */
}

#chevron-right:hover {
    filter: brightness(80%);
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        transform: translateX(50px);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
    }
}

.fade-out {
    animation: fadeOut 0.5s forwards; /* 0.5 seconds fade out */
}

.fade-in {
    animation: fadeIn 0.5s forwards; /* 0.5 seconds fade in */
}

/* Ensure the container doesn't resize while fading */
.slide p {
    min-height: 150px; /* Adjust based on the content, ensures consistent height */
    transition: opacity 0.5s ease; /* Smooth opacity transition */
}


.slide p {
    word-wrap: break-word; /* Prevent long words from overflowing */
}

.wrapper3 {
    position: relative;
    overflow: visible;
    z-index: 1;
    margin-bottom: -400px;
}
.cblur {
    width: 638.682px; 
    height: 559.454px; 
    background-image: radial-gradient(closest-side, #C0ABFF, #7463EA);
    opacity: 0.5;
    filter: blur(150px);
    position: absolute;
    z-index: 0; /* Niedriger Z-Index, um hinter dem Text zu sein */
    top: 400px;
    left: -150px;
}


.italic {
    font-family: "basic-sans",sans-serif;
    font-style: italic;
}

h6 {
    color: #FFF;
    font-family: "basic-sans",sans-serif;
    font-size: 41.264px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.825px;
}

.contactcontainer {
    padding: 130px; /* Adjust padding as necessary */
    gap: 20px; /* Space between columns */
    display: flex; /* Activate flexbox */
    flex-direction: column; /* Optional: if you want items stacked */
    align-items: center; /* Horizontally center items */
    justify-content: center; /* Vertically center items */
    margin: 0 auto; /* Ensure container itself is centered */
}


.left {
    padding: 0 20px; /* Add padding to the left section if needed */
}

.comright {
    display: flex; /* Use flex for centering the GIF */
    justify-content: center; /* Center the GIF horizontally */
    align-items: center; /* Center the GIF vertically */
    padding: 20px; /* Add padding to the right section */
    position: relative; /* Allow positioning adjustments */
    z-index: 1; /* Ensure it stays above the background */
    height: auto; /* Allow height to adjust based on content */
}

.animated-gif {
    max-width: 100%; /* Ensures it fits within the container */
    height: auto; /* Maintain aspect ratio */
    object-fit: contain; /* Adjust object-fit to contain */
    transform: scale(2); /* Increase size, scale to 2x */
    margin-left: 80px; /* Adjust this value to move the GIF more to the right */
}


.main {
    background-image: url(Images/mainbgshadow.svg);
    background-size: cover;
    position: relative; /* Positioning context for children */
    top: 0; /* Remove or reduce this value */
    z-index: 10; /* Ensure .main content is in front */
    overflow: visible; /* Hide any overflow from child elements */
    padding: 20px 0; /* Adjust padding as needed */
}

.contact {
    width: 100%;
    overflow: visible;
    background: transparent;
    position: relative;
    top: 200px; /* Adjust as necessary */
    padding: 180px 0; /* Adjust padding as needed */
}

.input-wrap {
    position: relative;
}



.contact-heading h6{
    white-space: nowrap;
    text-align: left;
    margin-bottom: -5px;
}

.form-wrapper {
    max-width: 70rem; /* Increase the form size */
}

.contact-form {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two equal columns */
    column-gap: 1.5rem; /* Spacing between the columns */
    row-gap: 1.5rem; /* Increased row spacing */
}
.input-wrap.w-100 {
    grid-column: span 2;
}

.contact-input {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    padding: 1.5rem 1.5rem calc(0.75rem - 2px) 1.35rem; /* Added padding on the left */
    outline: none;
    border: 2px solid transparent;
    box-shadow: 0 0 0 0px var(--highlight);
    transition: 0.3s;
    font-family: "basic-sans",sans-serif;
    font-weight: 200;
    font-size: 18px;
    color: white;
    box-sizing: border-box;
}

.contact-input:hover {
    background-color: rgba(255, 255, 255, 0.10);
}

.input-wrap label {
    position: absolute;
    top: 50%;
    left: calc(1.35rem + 2px);
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.60);
    font-family: "basic-sans",sans-serif;
    font-weight: 200;
    pointer-events: none;
    transition: .25s;
}

.input-wrap .icon {
    position: absolute;
    right: calc(1.35rem + 2px);
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: rgba(255, 255, 255, 0.60);
    font-size: 1.25rem;
    transition: .3s;

}

textarea.contact-input {
    resize: none;
    width: 100%;
    min-height: 150px;
}

textarea.contact-input ~ label{
    top: 1.2rem;
    transform: none;

}

textarea.contact-input ~ .icon{
    top: 1.3rem;
    transform: none;

}

.contact-text {
    font-family: "basic-sans",sans-serif;
    font-size: 22px;
    color: #FFF;
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
    margin: 15px 0;
    opacity: 0.7;
    
}

.input-wrap.focus label {
    color: var(--highlight);
}

.input-wrap.focus .icon {
    color: var(--highlight);
}


.input-wrap.focus .contact-input {
    background-color: rgba(0, 0, 0, 0.05);
    border: 2px solid var(--highlight);
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.05);
}

.input-wrap.not-empty label {
    font-size: .66rem;
    top: 0.75rem;
    transform: translateY(0);
}

.contact-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
    margin-top: 1rem;
    width: 100%;
    grid-column: span 2;
}

.btn {
    display: inline-block;
    padding: 1.1rem 2rem;
    background-color: var(--highlight);
    color: var(--astarr-dunkel);
    border-radius: 40px;
    border: none;
    font-family: "Sora";
    font-weight: 500;
    font-size: 1rem;
    cursor: pointer;
    transition: 0.3s;
}

.btn:hover {
    letter-spacing: 1px;
    background: #AC99E5
}

.btn.upload {
    position: relative;
    background-color: rgba(255, 255, 255, 0.05);
}

.btn.upload:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

.btn.upload span {
    color: rgba(255, 255, 255, 0.60);
}

.btn.upload input {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: red;
        cursor: pointer;
        opacity: 0;
}

footer {
    background: var(--box-bg);
    color: white;
    margin-top: 0; /* Entferne negative Margin */
    z-index: 100;
    padding: 35px 0;
    margin-top: 0px;
    position: relative;
}

footer a {
    text-decoration: none;
    color: #9E9E9E;
    font-family: Sora;
    font-size: 14px;
    font-weight: 400;
    
}

footer p {
    text-decoration: none;
    color: #9E9E9E;
    font-family: Sora;
    font-size: 14px;
    font-weight: 400;
    
}

h7 {
    color: #FFF;
    font-family: Sora;
    font-size: 16px;
    font-weight: 600;
}

footer ul {
    list-style: none;
    padding: 0;
}

footer ul li {
    margin: 20px 0;
}

.links-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 10px;
    position: relative;
    top: 20px;
    column-gap: 200px; /* Adjust this for horizontal spacing */
    row-gap: 10px; /* Adjust this for vertical spacing */
}

.bar {
    background-color: var(--astarr-dunkel);
    padding: 20px 0; /* Reduced padding on the bar for a tighter fit */
}

.bar .wrapper {
    max-width: 80%; /* Same width as .links-container */
    margin: 0 auto;
    padding: 0; /* Align the content with the rest of the layout */
    display: flex;
    justify-content: space-between;
    align-items: center;
}


/* Preise Animation */

.line img {
    opacity: 0; /* Initially hidden */
    transform: translateY(-10px); /* Slightly moved up */
    transition: opacity 1.5s ease, transform 1.5s ease; /* Longer transition for line */
}

.line.show img {
    opacity: 1; /* Fully visible */
    transform: translateY(0); /* Back to original position */
}

.price-container {
    opacity: 0;
    transform: translateY(-100px);
    transition: all 2s ease;
    filter: blur(5px);
}

.price-container.show {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);

}

.sectioninfo {
    opacity: 0; /* Initially hidden */
    filter: blur(5px); /* Start blurred */
    transform: translateY(-40px); /* Start a bit above */
    transition: opacity 1s ease 1.4s, filter 1s ease 1.4s, transform 1s ease 1.4s; /* Increased duration to 1s */
}

.sectioninfo.show {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}

/* Staggering effect for children of sectioninfo */
.sectioninfo small {
    opacity: 0; /* Initially hidden */
    filter: blur(5px); /* Start blurred */
    transform: translateY(20px); /* Start a bit below */
    transition: opacity 0.6s ease, filter 0.6s ease, transform 0.6s ease; /* Keep transition duration for children */
}

/* Show the children with a staggered effect */
.sectioninfo.show small {
    opacity: 1; /* Fully visible */
    filter: blur(0);
    transform: translateY(0);
}




/* Preise Animation */

.preissektion {
    background: linear-gradient(180deg, #7463EA 0%, #1F1C30 100%);

    position: relative; /* Make this the positioning context for absolute elements */
    z-index: 0;
}

.Preise {
    padding: 12vh;
    padding-bottom: 20vh;
    align-items: center;
    justify-content: center;
    
    position: relative; /* Ensure z-index works */
    z-index: 5; /* Adjust this number as needed */
}

.price-container {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 22px;
    border: 1px solid #C6C6C6;
    display: flex;
    justify-content: center;
    position: relative; /* For the divider positioning */
    width: 100%; /* Total width */
    backdrop-filter: blur(15px);
    will-change: backdrop-filter;
    margin-top: 50px;
}



.pricing-list {
    display: flex;
    justify-content: space-around;
    width: 100%;
    list-style-type: none;
    padding: 0;
}

.pricing-list li {
    width: 500px;
    margin: 0 20px;
    text-align: left; /* Text linksbündig */
    position: relative;
}

.pricing-list li p {
    color: white;
    font-size: 23px;
    font-weight: 300;
    margin: 0;
}

.heading {
    margin-top: 30px;
}

.pricing-list li h3 {
    font-size: 52px;
    font-weight: 700;
    margin: 0; /* Weniger Abstand zwischen p und h3 */
}

.sectioninfo {
    margin: 20px 0;
    text-align: left;
    margin-top: 80px;
}

.sectioninfo small {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-size: 20px;
    font-weight: 300;
    letter-spacing: 1.2px;
    line-height: 1.5rem;
    font-family: "basic-sans",sans-serif;
}

.sectioninfo i {
    margin-right: 10px;
}

/* Breiter Button, zentriert */
.preisbutton {
    background-color: #1F1C30;
    color: white;
    border: none;
    border-radius: 30px;
    padding: 20px 30px;
    font-size: 18px;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
    font-family: 'Sora', sans-serif;
    font-weight: 300;
    width: 60%; /* Set initial width to 60% */
    max-width: 500px;
    position: relative;
    transition: background-color 0.3s ease, filter 0.3s ease, letter-spacing 0.3s ease, width 0.3s ease; /* Transition added for width */
    display: block;
    margin-left: auto; /* Center horizontally */
    margin-right: auto; /* Center horizontally */
    text-decoration: none;
}

.preisbutton:hover {
    filter: brightness(80%);
    letter-spacing: 1.5px;
    background-color: #16151e;
    cursor: pointer; /* Change cursor to pointer (hand icon) on hover */
    width: 68%; /* Increase width to 100% on hover */
}



/* Haupt-Horizontaler Divider über den gesamten Container */
.horizontal-divider {
    position: absolute;
    top: 200px;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(198, 198, 198, 0.5);
}

/* Vertikale Linien bei 1/3 und 2/3 des Containers */
.price-container::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 33.33%; /* Erste vertikale Linie bei 1/3 */
    width: 1px;
    background: rgba(198, 198, 198, 0.5);
}

.price-container::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 66.66%; /* Zweite vertikale Linie bei 2/3 */
    width: 1px;
    background: rgba(198, 198, 198, 0.5);
}

/* Horizontale Divider innerhalb der Sektionen */
.horizontal-divider-inside {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(198, 198, 198, 0.5);
    margin: 175px 0;
    width: 100%;
}

.line {
    position: absolute; /* Position it absolutely */
    z-index: 3; /* Keep the line behind other elements */
    height: 100%;
    width: 100%;
}

.preise-text {
    position: relative; /* Ensure it's positioned relatively */
    z-index: 1; /* Higher z-index to place it above .line */
    color: rgba(255, 255, 255, 0.6); /* Optional: Ensure the text color stands out */
    margin-top: 20px; /* Optional: Adjust margin to fit your design */
    text-align: left; /* Optional: Center the text */
    font-family: "basic-sans",sans-serif;
    font-size: 16px;
    font-weight: 200;
    letter-spacing: 1.2;
}

.mobile-menu-container {
    display: none;
}

.mobile-nav {
    display: none; /* Hide desktop nav by default */
}




.mitgliedschaft-section {
    background: var(--astarr-dunkel);
    padding: 50px;
    padding-bottom: 20vh;
}

.mitgliedschaft-wrapper {
    margin-top: 50px;
    display: flex;
    gap: 50px; /* Space between the two cards */
    justify-content: center;
    display: flex;
    justify-content: center;
}

.mitgliedschaft-card {
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: left;
}

.mitgliedschaft-card h5 {
    font-size: 40px;
}

/* Updated card widths */
.mitgliedschaft-card.light {
    background: linear-gradient(-135deg, #F0EAFF, #D8CBFF);
    color: var(--astarr-dunkel); /* Changed text color for light card */
    width: 650px; 
}

.mitgliedschaft-card.light p {
    color: var(--astarr-dunkel);
}

.mitgliedschaft-card.light h5 {
    color: var(--astarr-dunkel);
}

.mitgliedschaft-card.dark h5 {
    color: #F0EAFF;
}

.mitgliedschaft-card.dark {
    background: linear-gradient(135deg, #C0ABFF , #5F48D9  );
    color: #F0EAFF; /* Keep the text in the darker brand color */
    width: 750px;
}





.mitgliedschaft-card.dark hr {
    border-color: #F0EAFF;
}

.mitgliedschaft-card hr {
    border-color: #404047;
    border-width: 1px;
    margin: 15px 0;
}

.mitgliedschaft-card hr {
    border-color: #404047;
    border-width: 1px;
    margin: 15px 0;
}

.mitgliedschaft-card p {
    display: flex;
    align-items: center;
    font-size: 20px;
    margin: 15px 0;
}

.mitgliedschaft-card .checkmark {
    margin-right: 15px;
}

.pricing {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 5px;
}

.pricing-wrapper {
    display: flex;
    justify-content: space-between; /* Ensures price and button are on opposite sides */
    align-items: center; /* Vertically align them */
    margin-top: 10px;
}

.pricing.light {
    color: var(--astarr-dunkel);
}

/* Small text under pricing */
.pricing-small {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.5);
    margin-top: 5px;
}

.pricing-small.light {
    color: rgba(255, 255, 255, 0.4);
}


.badge {
    background-color: transparent; /* Make background transparent */
    color: var(--astarr-dunkel); /* Default text color for the tag */
    border: 2px solid var(--astarr-dunkel); /* Stroke for the "basic" tag */
    font-size: 15px;
    font-weight: 600;
    padding: 10px 15px; /* Increased padding for taller appearance */
    border-radius: 20px;
    display: inline-block;
    margin-bottom: 20px;
    width: 13%;
}

.badge.popular {
    background-color: transparent; /* Make background transparent */
    color: #F0EAFF;
    border: 2px solid #F0EAFF; /* Stroke for the "most popular" tag */
    width: 24%;
}

.start-now-btn {
    font-size: 20px;
    letter-spacing: 0.2px;
    padding: 12px 24px;
    border-radius: 25px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex; /* Ensure arrow aligns next to text */
    align-items: center;
    justify-content: center;
}

/* Light button styling */
.start-now-btn.light-btn {
    background-color: var(--astarr-dunkel);
    color: var(--white);
}

/* Dark button styling */
.start-now-btn.dark-btn {
    background-color: #F0EAFF;
    color: var(--astarr-dunkel);
}

.start-now-btn.light-btn img {
    fill: var(--astarr-dunkel);
}

.start-now-btn img {
    margin-left: 10px; /* Space between text and arrow */
    width: 16px;
    height: 16px; /* Ensure consistent sizing */
}

.start-now-btn:hover {
    letter-spacing: 2px;
}

/* Hover effect for both buttons */
.start-now-btn.dark-btn:hover {
    filter: brightness(0.8);
}

.start-now-btn.light-btn:hover {
    filter: brightness(1.2);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(60px); /* Start from slightly below */
    }
    to {
        opacity: 1;
        transform: translateY(0); /* End at original position */
    }
}

/* Add the fade-out animation */
@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateY(0); /* End at original position */
    }
    to {
        opacity: 0;
        transform: translateY(20px); /* Move down when fading out */
    }
}

.fade-in {
    animation: fadeIn 2s forwards; /* Fade in effect */
}

.fade-out {
    animation: fadeOut 2s forwards; /* Fade out effect */
}

.mitgliedschaft-card {
    opacity: 0; /* Start hidden */
    transition: opacity 0.3s ease; /* Optional: smooth transition */
}





@media (min-width: 1921px) {
    .hero-section {
        transform: scale(1.2); 
    }

    .logos {
        scale: 1;
    }

    .leistungen {
        transform: scale(1.2);
        margin-top: 50px;
    }

    .wrapper2 {
        width: 65%;
    }
    
    .portfolio-slide-track {
        transform: scale(1);
    }

    .prozess {
        scale: 1.1;
    }

    .sphere.sphere6 {
        right: 45vh;
        top: 5vh;
        scale: 0.8;
    }

    .sphere.sphere8 {
        right: 30vh;
        top: 53vh;
        scale: 1;
    }
    
    .sphere.sphere7 {
        left: 20vh;
        top: 33vh;
        scale: 0.8;
    }

    .arrows {
        top: 353px;
    }

    .prozess-info p.text {
        font-size: 18px; /* Erhöhte Schriftgröße für WQHD */
    }

    .abo {
        width: 1200px; /* Breitere Box für WQHD */
        height: 500px; /* Erhöhte Höhe für WQHD */
        z-index: 15;
    }

    .abocontent {
        margin: 50px;
    }


    .price-container {
        width: 90%;
        margin: 0 auto; /* Centers the container horizontally */
        font-size: 110%;
        margin-top: 70px;
    }

    .Preise {
        overflow: visible;
        padding-bottom: 20rem;
    }

    .preise-text {
        width: 80%;
        margin: 0 auto;
        padding-top: 20px; /* Adjust the padding as needed */
    }
    
    .line {
        position: absolute;
        width: 100vw; /* Full viewport width */
        height: 100vh; /* Full viewport height */
        left: 0;
        top: 0;
        z-index: -1;
    }
    
    .sphere.sphere5 {
        top: 45vh;
    }
    

    .bgabo {
        padding-bottom: 13%;
        position: relative; /* This establishes a positioning context */
        z-index: 1; /* Ensure .bgabo is below .line */
    }

    .abo h6 {
        font-size: 60px; /* Größere Schrift für Überschrift */
    }

    .desktop-text {
        display: block; /* Hide original text on mobile */
    }

    .mobile-text {
        display: none; /* Show mobile-specific text */
    }

    
    .community-links p {
        color: #FFF;
        text-align: justify;
        font-family: "basic-sans",sans-serif;
        font-size: 44px;
        font-style: normal;
        font-weight: 400;
        line-height: 50px; /* 129.545% */
        letter-spacing: -1.32px;
        width: 55%;
    }

    .wrapper3 {
        position: relative;
        overflow: visible;
        z-index: 1;
        height: 900px;
        background-color: var(--astarr-dunkel);
    }

    .community {
        display: flex;
        align-items: flex-start; 
        padding: 100px 60px 500px; /* Adjust as needed */
        position: relative;
        z-index: 2; /* Ensure the content remains visible */
        scale: 1.3;
        margin: 0 auto;  /* Centers the flex container */
        max-width: 85%; /* Set a maximum width for the container */
        margin-bottom: 3rem;
        height: 132vh;
    }
    
    .community-links {
        flex: 1; /* Adjust this if necessary */
        margin-left: 10vh; /* Increase this value for more space */
    }
    
    .community-rechts {
        flex: 1; /* Adjust this if necessary */
        margin-left: 0vh;
    }
    
    .community-rechts p {
        width: 100%;
        height: 342px;
        color: #FFF;
        text-align: justify;
        font-family: "basic-sans",sans-serif;
        font-size: 40px;
        font-style: normal;
        font-weight: 400;
        line-height: 57px; /* 129.545% */
        letter-spacing: -1.32px;
    }
    
    .main {
        background-image: url(Images/mainbgshadow.svg);
        background-size: cover;
        position: relative; /* Positioning context for children */
        top: 0; /* Remove or reduce this value */
        z-index: 10; /* Ensure .main content is in front */
        overflow: visible; /* Hide any overflow from child elements */
        padding: 5rem 0; /* Adjust padding as needed */
        padding-bottom: 15rem;
    }
    
    
    
    .contact {
        scale: 1.1;
        position: relative;
        top: 25vh;
    }

    .contact-input {
        font-size: 20px; /* Größere Schrift für Kontaktformular */
    }

    footer {
        padding: 50px 0; /* Größeres Padding für den Footer */
    }

    .mobile-nav {
        display: none;
    }
    
    .slidet {
        width: 90%;
        opacity: 1;
    }

    .testimonial-text {
        width: 40%;
    }

    .mithighlight1 {
        top: 380px;
        left: 437px;
    }

    .mitgliedschaft-wrapper {
        transform: scale(1.2);
        margin-top: 12vh;
    }

}




@media (max-width: 768px) {
    /* Allgemein */
    body {
        padding: 0; /* Remove default padding */
        overflow-x: hidden !important; /* Disable horizontal scrolling */
        margin: 0; /* Remove default margin */
        box-sizing: border-box; /* Include padding and borders in the element's total width and height */
    }

    html, body { overflow-x: hidden;}

    body {position: relative;}

    .wrappermobile {
        overflow-x: hidden;
    }

    nav.mobile-nav {
        display: flex;
        z-index: 100;
        gap: 10rem;
        position: relative;
        overflow-x: hidden;
    }
    
    .mobile-menu-container {
        position: absolute; /* Change to absolute positioning */
        height: 100vh; /* Full height of the viewport */
        width: 100%; /* Full width */
        top: 0; /* Align to the top */
        left: 100%; /* Start off-screen initially */
        background-color: rgba(18, 16, 28, 0.95); /* Semi-transparent background */
        display: flex; /* Flexbox for layout */
        flex-direction: column; /* Stack children vertically */
        align-items: center; /* Center items horizontally */
        justify-content: center; /* Align items to the top */
        z-index: 200; /* Higher than the nav */
        opacity: 0; /* Start as invisible */
        transition: all 400ms ease; /* Transition for smooth appearance */
        overflow-x: hidden;
    }

    /* Remove flex on the li */
    .mobile-menu-container ul li {
        text-align: center; /* Ensure the button is centered */
        list-style: none; /* Remove default list styling */
    }
    

    /* Style the button to behave like a link */
    .mobile-menu-container ul li button {
        background-color: transparent; /* Match the links' style */
        color: white; /* Text color */
        font-size: 22px; /* Same font size as links */
        border: none; /* Remove default border */
        cursor: pointer; /* Pointer cursor */
        padding: 0; /* Remove extra padding */
        display: inline-block; /* Behave like an inline-block element */
        text-align: center; /* Ensure text is centered inside the button */
        margin: 0 auto; /* Center the button horizontally */
        width: auto; /* Ensure the button only takes up needed space */
    }
    #language-switch {
        background-color: #007BFF; /* Blue background */
        color: white; /* White text */
        border: none; /* Remove border */
        padding: 10px 30px; /* Padding */
        cursor: pointer; /* Pointer cursor */
        font-family: "basic-sans"; /* Font family */
        font-size: 14px; /* Font size */
        border-radius: 20px; /* Rounded corners */
        display: inline-block; /* Make it behave like a link */
        text-align: center; /* Center text */
        margin: 0 auto; /* Center button horizontally */
        width: auto; /* Prevent stretching */
        position: relative;
        top: 0;
        right: 0;
    }
    
    

    .mobile-menu-container.active {
        left: 0; /* Bring into view */
        opacity: 1; /* Fade in */
    }

    .no-scroll {
        overflow: hidden; /* Disable scrolling */
        height: 100%; /* Ensure the body takes full height */
    }
    

    @keyframes slide-down {
        0% {
            transform: translateY(-90px); /* Start 20px above its final position */
            opacity: 0; /* Start invisible */
        }
        100% {
            transform: translateY(0); /* End in its final position */
            opacity: 1; /* End visible */
        }
    }
    
    /* Add animation to the mobile menu container when active */
    .mobile-menu-container.active ul {
        animation: slide-down 1s ease  forwards; /* Slide down and fade in */
    }

    @keyframes rotate-in {
        0% {
            transform: rotate(180deg); /* Start rotated */
            opacity: 0; /* Start invisible */
        }
        100% {
            transform: rotate(0deg); /* End unrotated */
            opacity: 1; /* End visible */
        }
    }
    
    .close-icon {
        position: absolute;
        top: 32px;
        right: 32px;
        font-size: 24px;
        cursor: pointer;
        z-index: 201;
        opacity: 1; /* Ensure close icon is visible */
        pointer-events: auto; /* Allow interactions */
        transition: all 400ms ease; /* Smooth transition */
    }
    
    
    /* Add animation for the close icon when the menu is active */
    .mobile-menu-container.active .close-icon {
        opacity: 1; /* Make visible */
        pointer-events: auto; /* Allow interactions */
        animation: rotate-in 1s ease; /* Rotate in animation with delay */
    }
    
    .mobile-menu-container ul {
        display: block; /* Keep it block for the list */
        list-style: none; /* Remove default list styling */
        padding: 0; /* Remove padding */
        margin: 20px 0; /* Space above and below the <ul> */
        text-align: center; /* Center the text */
        width: fit-content; /* Adjust width as needed to contain the items */
    }
    

    .mobile-menu-container ul li {
        margin: 25px 0; /* Space between list items */
    }
    
    .mobile-menu-container ul li a {
        color: white; /* Text color */
        text-decoration: none; /* Remove underline */
        font-size: 22px; /* Font size */
    }
    




    nav {
        display: none;
    }

    /* Anpassungen für Hero Section */

    .wrapper {
        transform: scale(0.5);
        position: relative;
    }

    .Kunden h8{
        font-size: 24px;
        margin: 0 auto 9vh;
    }

    .hero-section {
        width: 100%;
        display: flex; /* Flexbox for centering */
        justify-content: center;
        align-items: center;
        position: relative;
        height: 100vh;
    }
    
    .overlap {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); /* Center within the wrapper */
        width: auto;
        height: auto;
        overflow: visible;
    }

    
    .overlap h1{
        font-size: 70px;
        width: 100vh;
        line-height: 85px;
    }

    .headerbutton {
        border-radius: 70px;
        padding: 16px 64px;
        background: #FFF;
        color: #1F1C30;
        font-family: Sora;
        font-size: 35px;
        font-weight: 400;
        letter-spacing: -0.872px;
        text-decoration: none;
        text-align: center;
        position: relative;
        transition:0.35s ease;
        margin-top: -35%;
    }

    
    .sphere.sphere1 {
        left: 5vh;
        top: 55vh;
        scale: 0.3;
    }

    .sphere.sphere2 {
        left: -36vh;
        top: 70vh;
        scale: 0.5;
    }

    .sphere.sphere3 {
        left: -30vh;
        top: -2vh;
        scale: 0.45;
    }

    .logos {
        scale: 0.55;
        flex-wrap: wrap;
    }

    .leistungen {
        max-height: 350vw;
        overflow: hidden;
    }

    .leistungen h2 {
        font-size: 50px;
        line-height: 55px;
    }

    .sphere.sphere4 {
        scale: 0.7;
        left: -80px;
    }

    .sphere.sphere5 {
        scale: 0.7;
        top: 800px;
        right: -100px;
    }

    h2 {
        font-size: 50px;
        line-height: 55px;
    }

    .portfolio {
        padding: 10% 0 10%;
    }

    .portfolioheight {
        animation: promote-layer 0.1s forwards;
    }

    @keyframes promote-layer {
        0% {
            transform: translateZ(0);
        }
        100% {
            transform: translateZ(0);
        }
    }

    .portfolioslider {
        transform: skew(3deg, 3deg) scale(0.6) perspective(12px); /* Combined transforms */
        height: auto;
        margin: -250px 0 0 0; /* Adjusting margin */
        position: relative;
        width: 100vh; /* Ensure this is the desired width */
        display: grid;
        place-items: center;
    }

    .portfolio-slide-track {
        display: flex;
        width: 100%;
        animation: portfolioscroll 20s linear infinite;
    }

    .portfolioheight {
        margin-top: 18vh;
    }

    .prozess-info h5 {
        margin-bottom: -4px;
    }

    .portfolioslide {
        padding: 15px; /* Reduced padding to minimize space */
    }

    .container-wrapper {
        flex-direction: column; /* Stack containers vertically */
        align-items: center; /* Center them horizontally */
        gap: 20px; /* Keep some space between stacked containers */
        position: relative;
        top: -250px;
        transform: scale(0.7);
    }

    .container {
        width: 29em; /* Ensure containers take full width on mobile */
        max-width: auto; /* Remove max-width constraint for mobile */
        min-height: auto; /* Adjust height to content */
    }

    .containericon {
        width: 120px; /* Reduce icon size for mobile */
        height: 120px;
        border-radius: 35px;
    }

    .containericon img {
        max-width: 50%; /* Adjust image scaling on smaller screens */
    }

    .prozess h2 {
        top: 0px;
    }

    .prozess-container {
        width: 100%;
    }

    .wrapperprozess {
        transform: scale(0.7);
        margin-top: -15em;
    }

    .prozess {
        height: 102em;
    }

    .sphere.sphere6 {
        left: 10vh;
        top: 100vh;
        scale: 1.3;
    }


    .sphere.sphere7 {
        left: -10vh;
        top: 165vh;
    }

    .sphere.sphere8 {
        left: 18vh;
        top: 25vh;
    }

    .portfolio-slide-track {
        scale: 0.9;
    }

    .arrows {
        display: none;
    }

.line {
    opacity: 0;
}

.Preise {
    padding: 8vh 2vh; 
    transform: none;
} 

.horizontal-divider-inside {
    display: none;
}

.heading {
    margin-top: 0px;
    margin-bottom: 5rem;
    text-align: left;
    font-size: 110%;
}

.pricing-list {
    display: flex; /* Use flexbox for alignment */
    flex-direction: column; /* Stack items vertically on mobile */
    align-items: center; /* Center items horizontally */
    width: 100%; /* Full width for mobile */
    padding: 0; /* Remove padding */
}

.pricing-list li::before {
    content: '';
    position: absolute;
    top: 9rem; /* Adjust as needed for spacing */
    left: 0;
    right: 0; /* Stretch line across the width */
    height: 2px; /* Adjust thickness of the line */
    background: rgba(198, 198, 198, 0.5); /* Line color */
    border-radius: 1px; /* Optional: Rounded edges */
    z-index: -1; /* Ensure line stays behind content */
}

/* Individual Pricing List Item Styles */
.pricing-list li {
    width: 95%; /* Increase width for mobile */
    max-width: 600px; /* Set a max-width to prevent stretching too wide */
    margin: 15px 0; /* Add vertical spacing between items */
    text-align: left; /* Keep text aligned to the left */
    background: rgba(255, 255, 255, 0.15); /* Optional: Background for better visibility */
    border-radius: 22px; /* Rounded corners */
    padding: 30px; /* Increase padding inside each container for better spacing */
    position: relative; /* Allow for additional absolute positioning if needed */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Optional: Shadow for depth */
}


.pricing-list li .sectioninfo {
    text-align: left; /* Align section info text to the left */
}

/* Button Styles */
.preisbutton {
    display: block; /* Ensure button takes the full width */
    width: 97%; /* Full width button for mobile */
    font-size: 0.9rem;
    text-align: center; /* Center the text inside the button */
    margin-top: 15px; /* Space above the button */
}


/* Preise animation */

.line img {
    opacity: 1; /* Initially hidden */
    transform: translateY(-0); /* Slightly moved up */
}

.price-container {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

.sectioninfo {
    opacity: 1; /* Initially hidden */
    filter: blur(0); /* Start blurred */
    transform: translateY(0); /* Start a bit above */
}


/* Staggering effect for children of sectioninfo */
.sectioninfo small {
    opacity: 1; /* Initially hidden */
    filter: blur(0); /* Start blurred */
    transform: translateY(0); /* Start a bit below */
}

/* ende */


/* Price Container - Leave as is */
.price-container {
    background: none;
    border: none;
}

.price-container::after,
.price-container::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: none; /* Ensure no lines are visible */
}

.pricing-list li p {
    font-size: 1.2rem; /* Adjust h3 size for prominence */
    font-weight: 300; /* Keep h3 bold */
}

.pricing-list li h3 {
    font-size: 3rem; /* Adjust h3 size for prominence */
    font-weight: 700; /* Keep h3 bold */
}

/* Ensure Text Visibility */
.pricing-list li .sectioninfo small {
    font-size: 16px; /* Smaller size for additional info */
    font-weight: 300; /* Light weight for secondary text */
}

.preise-text {
    margin-top: 0px;
    font-weight: 100;
    text-align: left;
    font-size: 0.8rem;
}

   

        .bgabo {
            display: flex;              /* Enable flexbox */
            justify-content: center;    /* Center horizontally */
            align-items: center;        /* Center vertically (if desired) */
            padding-bottom: 5rem;
        }

        .abo {
            width: 100rem;          /* Set maximum width */
            height: 12rem;         /* Set maximum height */
            margin: auto;              /* Center horizontally */
            padding: 1rem;             /* Optional: Add padding */
            border-radius: 15px;
            position: relative;
        }

        .abocontent {
            width: 100%; /* Full width of the parent .abo */
            height: 100%; /* Full height of the parent .abo */
            display: flex; /* Use flexbox to center content */
            flex-direction: column; /* Stack elements vertically */
            justify-content: center; /* Center vertically */
            align-items: flex-start; /* Align elements to the left */
            gap: 0.5rem; /* Space between each element */
            margin: 0; /* Remove margin */
            padding: 0.5rem;
            position: relative;
        }

        .abobtn {
            display: block; /* Ensures the button behaves like a block element */
            width: 80%; /* Adjust width as needed */
            margin-left: 0; /* Center the button to the left */
            margin-right: auto; /* Center the button to the left */
            text-align: center; /* Center the text within the button */
            padding: 10px 5px; /* Adjust padding to reduce height */
            font-size: 12px; /* Adjust font size */
            line-height: 1; /* Reduce line height for less vertical spacing */
            margin-top: 0.4rem;
        }
        
        

        .aboicon {
            display: none;
        }

        .abo p {
            font-size: 3.5vw; /* Adjust font size */
        }

        .abo h6 {
            font-size: 6vw; /* Adjust font size */
        }

        .neu {
            position: absolute; 
            transform: scale(0.4) !important; 
            z-index: 10;
            bottom: -9rem !important; 
            right: -8rem !important; 
        }

        .desktop-text {
            display: none; /* Hide original text on mobile */
        }
    
        .mobile-text {
            display: block; /* Show mobile-specific text */
        }

    /* Community-Sektion */

    .community {
        padding: 1rem; /* Adjust padding */
        flex-direction: column; /* Stack elements vertically */
        min-height: 100%;
        padding-bottom: 10rem;
        height: 570px;
    }

    #chevron-right {
       top: -20px; 
       left: 95%;
       transform: scale(1.2);
    }

    .community-links {
        position: relative; /* Reset position */
        flex: 1; /* Allow them to grow */
        width:80%; /* Ensure full width */
        padding-left: 0;
        margin-top: 1rem;

    }

    .community-links h2 {
        text-align: left;
        margin: 0;
        margin-bottom: 0;
    }

    .community-links p {
        font-size: 1rem;
        width: 100%;
        letter-spacing: normal;
        margin-top: 0.3rem;
        font-size: 16px;
        line-height: normal;
    }

    .community-rechts {
        top: 0; /* Remove top positioning */
        left: 0; /* Remove left positioning */
        margin-top: 7rem;
    }

    .community-rechts p {
        font-size: 1rem;
        font-weight: 200;
        letter-spacing: normal;
        line-height: 1.6;
    }
    
    .anfzeichen {
        transform: scale(0.5);
        top: -4rem;
    }

    .cbur {
        width: 100%; /* Adjust to a responsive width */
        height: auto; /* Adjust height as needed */
        top: 200px; /* Adjust as necessary */
        left: 0; /* Center or reposition as needed */
    }

    .main {
        background-image: url(Images/mainbgmobile.svg);
        background-size: contain; /* On mobile, contain the image within the section */
        background-position: center top; /* Center the background image at the top */
        background-size: cover;
        padding: 10px 0; /* Reduce padding for mobile */
        overflow: hidden; /* Ensure no overflow */
        height: 100%;
    }
    .contactcontainer {
        transform: scale(0.6); /* Scale the container */
        justify-content: center; /* Center horizontally */
    }
    .contact .left {
        padding: 0;
    }
    .contact {
        overflow: hidden;
        padding-bottom: 0 !important;

    }
    


    /* Footer */
    footer {
        padding: 30px 0;
        text-align: center; /* Zentriere Text */
        height: 40rem;
        padding-bottom: 60px;
    }

.wrapper {
        display: flex; /* Enable flexbox layout */
        align-items: center; /* Center vertically */
        justify-content: center; /* Center horizontally */
        height: 100%; /* Ensure it has a height to center within */
        width: 100%; /* Make sure it occupies the full width */
        
    
    }

    footer h7 {
        font-size: 30px;
    }

    footer a, footer p {
        font-size: 25px; /* Kleinere Schriftgröße */
    }
    .links-container {
        grid-template-columns: 1fr;
        padding-top: 70px;
        row-gap: 30px;
        row-gap: 80px; 
        top: 0px;
    }

    .bar {
        display: flex;
        justify-content: center; /* Center horizontally */
        align-items: center; /* Center vertically */
    }

    .bar .wrapper {
        display: block; /* Ensure the wrapper behaves as a block element */
        margin: 0 auto; /* Horizontally centers the element */
    }
    
    .bar .wrapper p{
        width: 100%;
    }

    .mitgliedschaft-section {
        height: 120vh;
    }

    .mitgliedschaft-wrapper {
        flex-direction: column; /* Keep vertical stacking on larger screens */
        justify-content: flex-start; /* Start stacking from the top */
        align-items: center; /* Center items */
        gap: 30px; /* Space between cards */
        transform: scale(0.5);
        transform-origin: top;
        }

    .mitgliedschaft-card.dark {
        width: 550px;
    }

    .badge.popular {
        width: 32%;
    }
}

@media (max-width: 1024px) and (min-width: 769px) {
    body {
        padding: 0;
        overflow-x: hidden !important;
        margin: 0;
        box-sizing: border-box;
    }

    nav {
        display: none;
    }

    nav.mobile-nav {
        display: flex;
        z-index: 100;
        gap: 36rem;
        position: relative;
        overflow-x: hidden;
    }
    
    .mobile-menu-container {
        position: absolute; /* Change to absolute positioning */
        height: 100vh; /* Full height of the viewport */
        width: 100%; /* Full width */
        top: 0; /* Align to the top */
        left: 100%; /* Start off-screen initially */
        background-color: rgba(18, 16, 28, 0.95); /* Semi-transparent background */
        display: flex; /* Flexbox for layout */
        flex-direction: column; /* Stack children vertically */
        align-items: center; /* Center items horizontally */
        justify-content: center; /* Align items to the top */
        z-index: 200; /* Higher than the nav */
        opacity: 0; /* Start as invisible */
        transition: all 400ms ease; /* Transition for smooth appearance */
        overflow-x: hidden;
    }

    .hero-section {
        height: 90vh; /* Slightly reduce the height for better fit */
        transform: scale(0.6);
        transform-origin: center; 
    }

    .headerbutton {
        padding: 15px 48px;
        font-size: 30px;
        margin-top: -50%;
    
    }

    .overlap h1 {
        font-size: 70px; /* Adjust font size */
        width: 90vw;
        line-height: 70px;
    }

    .sphere.sphere1, .sphere.sphere2, .sphere.sphere3 {
        scale: 0.25; /* Adjust scale to prevent overflow */
    }

    .logos {
        scale: 0.5;
    }

    .leistungen h2 {
        font-size: 45px;
        line-height: 50px;
    }

    h2 {
        font-size: 45px;
        line-height: 50px;
    }

    h8 {
        margin: -10px auto 7vh;
        font-size: 20px;
        letter-spacing: 1px;
        font-weight: 300;
    }

    .portfolio {
        padding: 5% 0;
    }

    .portfolioslider {
        transform: scale(0.5);
        margin: -150px 0 0 0;
    }

    .container-wrapper {
        gap: 15px;
        top: -150px;
        transform: scale(0.6);
    }

    .container {
        width: 25em;
    }

    .pricing-list li h3 {
        font-size: 2.5rem;
    }

    .pricing-list li p {
        font-size: 1rem;
    }

    .community {
        height: 500px;
        padding-bottom: 8rem;
    }

    footer {
        padding: 20px 0;
        height: 35rem;
    }

    footer h7 {
        font-size: 25px;
    }

    footer a, footer p {
        font-size: 22px;
    }
}