/*==========Hero Section==========*/
.hero-section{
    width: 100%;
    height: 900px;
    position: relative;
    overflow: hidden;
}
.hero-section::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: radial-gradient(ellipse 1200px 600px at center 40%, #47CCF53A, transparent 80%);
    z-index: 2;
    pointer-events: none;
}
#heroStars{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}
.hero-section-stars-off::after{ display: none; }
.hero-section::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 55%;
    z-index: 0;
    pointer-events: none;
    display: none;
    background-image:
        radial-gradient(1.5px 1.5px at 2% 5%, rgba(255,255,255,0.6) 50%, transparent 100%),
        radial-gradient(1px 1px at 6% 38%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(2px 2px at 10% 12%, rgba(255,255,255,0.55) 50%, transparent 100%),
        radial-gradient(1px 1px at 14% 65%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 17% 28%, rgba(255,255,255,0.7) 50%, transparent 100%),
        radial-gradient(2px 2px at 21% 8%, rgba(255,255,255,0.6) 50%, transparent 100%),
        radial-gradient(1px 1px at 24% 52%, rgba(255,255,255,0.35) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 28% 75%, rgba(255,255,255,0.5) 50%, transparent 100%),
        radial-gradient(1px 1px at 31% 18%, rgba(255,255,255,0.25) 50%, transparent 100%),
        radial-gradient(2px 2px at 35% 42%, rgba(255,255,255,0.55) 50%, transparent 100%),
        radial-gradient(1px 1px at 38% 3%, rgba(255,255,255,0.45) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 41% 60%, rgba(255,255,255,0.6) 50%, transparent 100%),
        radial-gradient(2px 2px at 44% 30%, rgba(255,255,255,0.6) 50%, transparent 100%),
        radial-gradient(1px 1px at 47% 80%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 50% 15%, rgba(255,255,255,0.7) 50%, transparent 100%),
        radial-gradient(1px 1px at 53% 48%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(2px 2px at 56% 7%, rgba(255,255,255,0.6) 50%, transparent 100%),
        radial-gradient(1px 1px at 59% 70%, rgba(255,255,255,0.25) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 62% 35%, rgba(255,255,255,0.55) 50%, transparent 100%),
        radial-gradient(2px 2px at 65% 55%, rgba(255,255,255,0.55) 50%, transparent 100%),
        radial-gradient(1px 1px at 68% 20%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1px 1px at 71% 85%, rgba(255,255,255,0.2) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 74% 10%, rgba(255,255,255,0.65) 50%, transparent 100%),
        radial-gradient(2px 2px at 77% 45%, rgba(255,255,255,0.55) 50%, transparent 100%),
        radial-gradient(1px 1px at 80% 68%, rgba(255,255,255,0.35) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 83% 25%, rgba(255,255,255,0.7) 50%, transparent 100%),
        radial-gradient(1px 1px at 86% 58%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(2px 2px at 89% 4%, rgba(255,255,255,0.6) 50%, transparent 100%),
        radial-gradient(1px 1px at 92% 40%, rgba(255,255,255,0.45) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 95% 72%, rgba(255,255,255,0.5) 50%, transparent 100%),
        radial-gradient(1px 1px at 98% 22%, rgba(255,255,255,0.25) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 4% 90%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(1px 1px at 12% 47%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(2px 2px at 19% 82%, rgba(255,255,255,0.5) 50%, transparent 100%),
        radial-gradient(1px 1px at 26% 33%, rgba(255,255,255,0.2) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 33% 88%, rgba(255,255,255,0.6) 50%, transparent 100%),
        radial-gradient(1px 1px at 40% 22%, rgba(255,255,255,0.35) 50%, transparent 100%),
        radial-gradient(2px 2px at 48% 62%, rgba(255,255,255,0.55) 50%, transparent 100%),
        radial-gradient(1px 1px at 55% 92%, rgba(255,255,255,0.25) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 63% 14%, rgba(255,255,255,0.7) 50%, transparent 100%),
        radial-gradient(1px 1px at 70% 50%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(2px 2px at 78% 78%, rgba(255,255,255,0.5) 50%, transparent 100%),
        radial-gradient(1px 1px at 85% 36%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 93% 56%, rgba(255,255,255,0.55) 50%, transparent 100%),
        radial-gradient(1px 1px at 8% 76%, rgba(255,255,255,0.35) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 16% 58%, rgba(255,255,255,0.6) 50%, transparent 100%),
        radial-gradient(1px 1px at 23% 15%, rgba(255,255,255,0.2) 50%, transparent 100%),
        radial-gradient(2px 2px at 30% 95%, rgba(255,255,255,0.45) 50%, transparent 100%),
        radial-gradient(1px 1px at 37% 50%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 46% 84%, rgba(255,255,255,0.5) 50%, transparent 100%),
        radial-gradient(1px 1px at 1% 43%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 3% 72%, rgba(255,255,255,0.45) 50%, transparent 100%),
        radial-gradient(1px 1px at 7% 16%, rgba(255,255,255,0.25) 50%, transparent 100%),
        radial-gradient(1px 1px at 9% 57%, rgba(255,255,255,0.35) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 11% 88%, rgba(255,255,255,0.5) 50%, transparent 100%),
        radial-gradient(1px 1px at 13% 31%, rgba(255,255,255,0.2) 50%, transparent 100%),
        radial-gradient(1px 1px at 16% 2%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 18% 46%, rgba(255,255,255,0.55) 50%, transparent 100%),
        radial-gradient(1px 1px at 20% 71%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(1px 1px at 22% 19%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 25% 63%, rgba(255,255,255,0.5) 50%, transparent 100%),
        radial-gradient(1px 1px at 27% 9%, rgba(255,255,255,0.25) 50%, transparent 100%),
        radial-gradient(1px 1px at 29% 84%, rgba(255,255,255,0.35) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 32% 51%, rgba(255,255,255,0.45) 50%, transparent 100%),
        radial-gradient(1px 1px at 34% 27%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(1px 1px at 36% 73%, rgba(255,255,255,0.2) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 39% 41%, rgba(255,255,255,0.5) 50%, transparent 100%),
        radial-gradient(1px 1px at 42% 11%, rgba(255,255,255,0.35) 50%, transparent 100%),
        radial-gradient(1px 1px at 43% 91%, rgba(255,255,255,0.25) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 45% 54%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1px 1px at 49% 37%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(1px 1px at 51% 69%, rgba(255,255,255,0.45) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 54% 6%, rgba(255,255,255,0.5) 50%, transparent 100%),
        radial-gradient(1px 1px at 57% 83%, rgba(255,255,255,0.2) 50%, transparent 100%),
        radial-gradient(1px 1px at 58% 44%, rgba(255,255,255,0.35) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 61% 77%, rgba(255,255,255,0.55) 50%, transparent 100%),
        radial-gradient(1px 1px at 64% 23%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(1px 1px at 66% 66%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 69% 93%, rgba(255,255,255,0.25) 50%, transparent 100%),
        radial-gradient(1px 1px at 72% 32%, rgba(255,255,255,0.5) 50%, transparent 100%),
        radial-gradient(1px 1px at 73% 59%, rgba(255,255,255,0.35) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 76% 14%, rgba(255,255,255,0.45) 50%, transparent 100%),
        radial-gradient(1px 1px at 79% 81%, rgba(255,255,255,0.2) 50%, transparent 100%),
        radial-gradient(1px 1px at 81% 47%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 84% 7%, rgba(255,255,255,0.5) 50%, transparent 100%),
        radial-gradient(1px 1px at 87% 74%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(1px 1px at 88% 29%, rgba(255,255,255,0.25) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 91% 61%, rgba(255,255,255,0.45) 50%, transparent 100%),
        radial-gradient(1px 1px at 94% 17%, rgba(255,255,255,0.35) 50%, transparent 100%),
        radial-gradient(1px 1px at 96% 86%, rgba(255,255,255,0.2) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 99% 53%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1px 1px at 5% 97%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(1px 1px at 15% 34%, rgba(255,255,255,0.45) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 43% 78%, rgba(255,255,255,0.35) 50%, transparent 100%),
        radial-gradient(1px 1px at 57% 26%, rgba(255,255,255,0.5) 50%, transparent 100%),
        radial-gradient(1px 1px at 75% 89%, rgba(255,255,255,0.25) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 90% 42%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1px 1px at 34% 96%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(1px 1px at 67% 11%, rgba(255,255,255,0.55) 50%, transparent 100%),
        radial-gradient(1px 1px at 0.5% 24%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 3.5% 56%, rgba(255,255,255,0.45) 50%, transparent 100%),
        radial-gradient(1px 1px at 5.5% 82%, rgba(255,255,255,0.25) 50%, transparent 100%),
        radial-gradient(1px 1px at 8.5% 33%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 11.5% 69%, rgba(255,255,255,0.35) 50%, transparent 100%),
        radial-gradient(1px 1px at 15.5% 7%, rgba(255,255,255,0.5) 50%, transparent 100%),
        radial-gradient(1px 1px at 19.5% 54%, rgba(255,255,255,0.2) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 23.5% 41%, rgba(255,255,255,0.45) 50%, transparent 100%),
        radial-gradient(1px 1px at 26.5% 87%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(1px 1px at 30.5% 17%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 33.5% 62%, rgba(255,255,255,0.5) 50%, transparent 100%),
        radial-gradient(1px 1px at 36.5% 39%, rgba(255,255,255,0.25) 50%, transparent 100%),
        radial-gradient(1px 1px at 40.5% 79%, rgba(255,255,255,0.35) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 44.5% 13%, rgba(255,255,255,0.55) 50%, transparent 100%),
        radial-gradient(1px 1px at 47.5% 58%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(1px 1px at 51.5% 36%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 54.5% 91%, rgba(255,255,255,0.2) 50%, transparent 100%),
        radial-gradient(1px 1px at 58.5% 21%, rgba(255,255,255,0.5) 50%, transparent 100%),
        radial-gradient(1px 1px at 61.5% 49%, rgba(255,255,255,0.35) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 65.5% 76%, rgba(255,255,255,0.45) 50%, transparent 100%),
        radial-gradient(1px 1px at 69.5% 4%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(1px 1px at 73.5% 67%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 77.5% 29%, rgba(255,255,255,0.25) 50%, transparent 100%),
        radial-gradient(1px 1px at 81.5% 53%, rgba(255,255,255,0.5) 50%, transparent 100%),
        radial-gradient(1px 1px at 85.5% 15%, rgba(255,255,255,0.35) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 89.5% 83%, rgba(255,255,255,0.2) 50%, transparent 100%),
        radial-gradient(1px 1px at 93.5% 46%, rgba(255,255,255,0.45) 50%, transparent 100%),
        radial-gradient(1px 1px at 97.5% 70%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 2.5% 95%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1px 1px at 0.3% 11%, rgba(255,255,255,0.35) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 1.2% 37%, rgba(255,255,255,0.5) 50%, transparent 100%),
        radial-gradient(1px 1px at 2.1% 61%, rgba(255,255,255,0.25) 50%, transparent 100%),
        radial-gradient(1px 1px at 3.3% 19%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 4.2% 48%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(1px 1px at 5.1% 74%, rgba(255,255,255,0.45) 50%, transparent 100%),
        radial-gradient(1px 1px at 6.4% 8%, rgba(255,255,255,0.2) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 7.3% 53%, rgba(255,255,255,0.5) 50%, transparent 100%),
        radial-gradient(1px 1px at 8.2% 89%, rgba(255,255,255,0.35) 50%, transparent 100%),
        radial-gradient(1px 1px at 9.6% 26%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 10.4% 64%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(1px 1px at 11.8% 4%, rgba(255,255,255,0.55) 50%, transparent 100%),
        radial-gradient(1px 1px at 12.7% 79%, rgba(255,255,255,0.25) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 13.9% 42%, rgba(255,255,255,0.45) 50%, transparent 100%),
        radial-gradient(1px 1px at 14.8% 13%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(1px 1px at 16.3% 71%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 17.5% 93%, rgba(255,255,255,0.2) 50%, transparent 100%),
        radial-gradient(1px 1px at 18.4% 30%, rgba(255,255,255,0.5) 50%, transparent 100%),
        radial-gradient(1px 1px at 19.8% 58%, rgba(255,255,255,0.35) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 21.2% 85%, rgba(255,255,255,0.25) 50%, transparent 100%),
        radial-gradient(1px 1px at 22.6% 47%, rgba(255,255,255,0.45) 50%, transparent 100%),
        radial-gradient(1px 1px at 23.8% 7%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 24.7% 68%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1px 1px at 25.9% 22%, rgba(255,255,255,0.5) 50%, transparent 100%),
        radial-gradient(1px 1px at 27.3% 91%, rgba(255,255,255,0.2) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 28.5% 36%, rgba(255,255,255,0.45) 50%, transparent 100%),
        radial-gradient(1px 1px at 29.4% 59%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(1px 1px at 31.1% 76%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 32.3% 10%, rgba(255,255,255,0.55) 50%, transparent 100%),
        radial-gradient(1px 1px at 33.7% 44%, rgba(255,255,255,0.25) 50%, transparent 100%),
        radial-gradient(1px 1px at 35.2% 81%, rgba(255,255,255,0.35) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 36.1% 16%, rgba(255,255,255,0.5) 50%, transparent 100%),
        radial-gradient(1px 1px at 37.6% 57%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(1px 1px at 38.8% 87%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 39.7% 25%, rgba(255,255,255,0.2) 50%, transparent 100%),
        radial-gradient(1px 1px at 41.3% 70%, rgba(255,255,255,0.45) 50%, transparent 100%),
        radial-gradient(1px 1px at 42.5% 3%, rgba(255,255,255,0.35) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 43.4% 49%, rgba(255,255,255,0.5) 50%, transparent 100%),
        radial-gradient(1px 1px at 44.8% 86%, rgba(255,255,255,0.25) 50%, transparent 100%),
        radial-gradient(1px 1px at 46.2% 32%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 47.1% 64%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(1px 1px at 48.6% 9%, rgba(255,255,255,0.55) 50%, transparent 100%),
        radial-gradient(1px 1px at 49.4% 73%, rgba(255,255,255,0.35) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 50.8% 41%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1px 1px at 52.3% 88%, rgba(255,255,255,0.2) 50%, transparent 100%),
        radial-gradient(1px 1px at 53.5% 18%, rgba(255,255,255,0.5) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 54.9% 55%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(1px 1px at 55.7% 78%, rgba(255,255,255,0.45) 50%, transparent 100%),
        radial-gradient(1px 1px at 56.8% 29%, rgba(255,255,255,0.25) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 57.9% 62%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1px 1px at 59.3% 94%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(1px 1px at 60.2% 6%, rgba(255,255,255,0.5) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 61.8% 39%, rgba(255,255,255,0.35) 50%, transparent 100%),
        radial-gradient(1px 1px at 62.7% 82%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1px 1px at 63.9% 52%, rgba(255,255,255,0.2) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 64.6% 15%, rgba(255,255,255,0.55) 50%, transparent 100%),
        radial-gradient(1px 1px at 66.1% 43%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(1px 1px at 67.4% 75%, rgba(255,255,255,0.45) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 68.3% 8%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1px 1px at 69.8% 56%, rgba(255,255,255,0.25) 50%, transparent 100%),
        radial-gradient(1px 1px at 70.7% 90%, rgba(255,255,255,0.35) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 71.9% 27%, rgba(255,255,255,0.5) 50%, transparent 100%),
        radial-gradient(1px 1px at 72.6% 63%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(1px 1px at 74.1% 38%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 75.3% 84%, rgba(255,255,255,0.2) 50%, transparent 100%),
        radial-gradient(1px 1px at 76.5% 12%, rgba(255,255,255,0.5) 50%, transparent 100%),
        radial-gradient(1px 1px at 77.8% 51%, rgba(255,255,255,0.35) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 78.4% 72%, rgba(255,255,255,0.45) 50%, transparent 100%),
        radial-gradient(1px 1px at 79.9% 20%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(1px 1px at 80.6% 92%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 82.1% 34%, rgba(255,255,255,0.25) 50%, transparent 100%),
        radial-gradient(1px 1px at 83.4% 66%, rgba(255,255,255,0.5) 50%, transparent 100%),
        radial-gradient(1px 1px at 84.7% 45%, rgba(255,255,255,0.35) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 85.8% 80%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(1px 1px at 86.6% 2%, rgba(255,255,255,0.55) 50%, transparent 100%),
        radial-gradient(1px 1px at 87.9% 50%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 89.1% 71%, rgba(255,255,255,0.25) 50%, transparent 100%),
        radial-gradient(1px 1px at 90.3% 19%, rgba(255,255,255,0.45) 50%, transparent 100%),
        radial-gradient(1px 1px at 91.7% 87%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 92.4% 31%, rgba(255,255,255,0.5) 50%, transparent 100%),
        radial-gradient(1px 1px at 93.8% 65%, rgba(255,255,255,0.2) 50%, transparent 100%),
        radial-gradient(1px 1px at 94.6% 77%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 95.9% 14%, rgba(255,255,255,0.35) 50%, transparent 100%),
        radial-gradient(1px 1px at 96.7% 48%, rgba(255,255,255,0.5) 50%, transparent 100%),
        radial-gradient(1px 1px at 97.8% 33%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 98.6% 85%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1px 1px at 99.4% 40%, rgba(255,255,255,0.25) 50%, transparent 100%),
        radial-gradient(1px 1px at 0.8% 67%, rgba(255,255,255,0.45) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 1.7% 83%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(1px 1px at 4.6% 29%, rgba(255,255,255,0.5) 50%, transparent 100%),
        radial-gradient(1px 1px at 6.9% 45%, rgba(255,255,255,0.35) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 10.1% 96%, rgba(255,255,255,0.2) 50%, transparent 100%),
        radial-gradient(1px 1px at 14.3% 52%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1px 1px at 17.8% 6%, rgba(255,255,255,0.55) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 20.6% 35%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(1px 1px at 24.2% 78%, rgba(255,255,255,0.45) 50%, transparent 100%),
        radial-gradient(1px 1px at 28.1% 14%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 31.6% 60%, rgba(255,255,255,0.25) 50%, transparent 100%),
        radial-gradient(1px 1px at 35.8% 23%, rgba(255,255,255,0.5) 50%, transparent 100%),
        radial-gradient(1px 1px at 39.2% 68%, rgba(255,255,255,0.35) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 42.9% 40%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1px 1px at 46.7% 17%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(1px 1px at 50.4% 82%, rgba(255,255,255,0.5) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 53.1% 31%, rgba(255,255,255,0.25) 50%, transparent 100%),
        radial-gradient(1px 1px at 56.3% 57%, rgba(255,255,255,0.45) 50%, transparent 100%),
        radial-gradient(1px 1px at 60.8% 74%, rgba(255,255,255,0.35) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 63.4% 97%, rgba(255,255,255,0.2) 50%, transparent 100%),
        radial-gradient(1px 1px at 66.8% 34%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1px 1px at 70.2% 61%, rgba(255,255,255,0.55) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 74.6% 46%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(1px 1px at 78.9% 9%, rgba(255,255,255,0.5) 50%, transparent 100%),
        radial-gradient(1px 1px at 82.7% 55%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 86.2% 22%, rgba(255,255,255,0.25) 50%, transparent 100%),
        radial-gradient(1px 1px at 90.8% 76%, rgba(255,255,255,0.45) 50%, transparent 100%),
        radial-gradient(1px 1px at 95.3% 38%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 98.1% 62%, rgba(255,255,255,0.5) 50%, transparent 100%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
}
.hero-fadebox{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 700px;
    background: linear-gradient(to bottom, transparent, #000506);
    pointer-events: none;
    z-index: 11;
}
.hero-box-ali{
    position: absolute;
    width: 900px;
    left: max(-200px, calc(50% - 1050px));
    bottom: -505px;
    z-index: 10;
}
@media (max-width: 1640px){
    .hero-box-ali{ transform: translateX(-2vw); }
}
@media (max-width: 1300px){
    .hero-box-ali{ transform: translateX(-3vw); }
}
@media (max-width: 1200px){
    .hero-section{ height: 1000px; }
    .hero-fadebox{ height: 400px; }
    .hero-box-ali{
        transform: scale(0.8) translateX(4vw);
        transform-origin: bottom left;
        bottom: -460px;
    }
}
@media (max-width: 1000px){
    .hero-box-ali{ transform: scale(0.8) translateX(0); }
}
@media (max-width: 750px){
    .hero-box-ali{
        transform: scale(0.65) translateX(6vw) translateY(-250px);
        bottom: -385px;
    }
    .hero-section{
        height: 1000px;
    }
}
@media (max-width: 650px){
    .hero-box-ali{
        transform: scale(0.65) translateX(6vw) translateY(-200px);
    }
}
@media (max-width: 600px){
    .hero-box-ali{
        transform: scale(0.65) translateX(6vw) translateY(-250px);
    }
}
@media (max-width: 550px){
    .hero-box-ali{
        transform: scale(0.5) translateX(26vw) translateY(-300px);
        bottom: -240px;
    }
}
.hero-box-ali-text{
    position: absolute;
    bottom: 220px;
    left: max(120px, calc(50% - 820px));
    color: white;
    font-weight: 200;
    font-size: 32px;
    z-index: 20;
}
.hero-box-img-ali{
    width: 100%;
}
.hero-box-ali::after,
.hero-box-klara::after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    background: linear-gradient(to bottom, transparent var(--fade-start, 50%), #000506 var(--fade-end, 85%));
    pointer-events: none;
}
.hero-box-klara{
    width: 700px;
    position: absolute;
    right: max(-200px, calc(50% - 1000px));
    bottom: -230px;
    z-index: 10;
}
@media (max-width: 1200px){
    .hero-box-klara{
        transform: scale(0.8) translateX(-10vw);
        transform-origin: bottom right;
        bottom: -240px;
    }
}
@media (max-width: 750px){
    .hero-box-klara{
        transform: scale(0.65) translateX(-22vw)  translateY(-250px);
        bottom: -210px;
    }
}
@media (max-width: 650px){
    .hero-box-klara{
        transform: scale(0.65) translateX(-22vw)  translateY(-200px);
        bottom: -210px;
    }
}
@media (max-width: 600px){
    .hero-index-button{
        top: 470px;
    }
    .hero-scroller-wrapper{
        transform: translateY(-80px);
    }
    .hero-box-klara{
        transform: scale(0.65) translateX(-22vw)  translateY(-250px);
    }
}
@media (max-width: 550px){
    .hero-box-klara{
        transform: scale(0.5) translateX(-52vw) translateY(-300px);
        bottom: -110px;
    }
}
@media (max-width: 472px){
    .hero-index-button{
        top: 450px;
    }
}
@media (max-width: 450px){
    .hero-index-button{
        top: 440px;
    }
}

.hero-box-bold{
    font-weight: 700 !important;
}
.hero-box-klara-text{
    position: absolute;
    bottom: 220px;
    right: max(150px, calc(50% - 820px));
    color: white;
    font-weight: 200;
    font-size: 32px;
    z-index: 20;
}
@media (max-width: 1300px){
    .hero-box-ali-text{ left: 90px; }
}
@media (max-width: 1200px){
    .hero-box-ali-text{ bottom: 110px; }
    .hero-box-klara-text{ bottom: 110px; right: 80px; }
}
@media (max-width: 750px){
    .hero-box-ali-text,
    .hero-box-klara-text{ font-size: 28px; }
}
@media (max-width: 600px){
    .hero-box-ali-text,
    .hero-box-klara-text{ font-size: 16px; }
    .hero-box-ali-text{ left: 40px; }
}
@media (max-width: 550px){
    .hero-box-klara-text{ right: 30px; }
}
.hero-box-img-klara{
    width: 100%;
}
.hero-sec{
    position: relative;
    z-index: 100;
    animation: hero-text-in 0.8s ease both;
}
@media (max-width: 1200px){
    .hero-sec{ margin-top: -250px; }
}
@keyframes hero-text-in{
    from { opacity: 0; transform: translateY(-30px); }
    to   { opacity: 1; transform: translateY(0); }
}
.hero-pille{
    position: relative;
    border-radius: 900999px;
    padding: 8px 20px;
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 7px;
    color: #47CCF5;
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    text-align: center;
}
@media (max-width: 1400px){
    .hero-pille{ font-size: var(--mobile-pille); }
}
.hero-pille::after{
    content: '';
    order: -1;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(92.38deg, rgba(71,204,245,0.128) 0.12%, rgba(71,204,245,0.64) 51.37%, rgba(71,204,245,0.128) 101.32%), #47CCF5;
    flex-shrink: 0;
}
.hero-pille::before{
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 900999px;
    padding: 0.61px;
    background: linear-gradient(90deg, #23627B 0%, #47CCF5 36%, #47CCF5 63%, #23627B 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
.hero-header{
    margin-top: 24px;
    margin-bottom: 24px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 55px;
    line-height: 120%;
    letter-spacing: -0.03em;
    text-align: center;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.4) 0%, #FFFFFF 34%, #FFFFFF 67%, rgba(255, 255, 255, 0.4) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
@media (max-width: 1400px){
    .hero-header{ font-size: 40px; }
}
@media (max-width: 600px){
    .hero-header{ font-size: 32px; }
}

/* Mobile-spezifische Zeilenumbrüche */
.hero-header .br-m,
.hero-text .br-m,
.hero-text .br-540{ display: none; }
@media (max-width: 650px){
    .hero-header br:not(.br-m),
    .hero-text br:not(.br-m):not(.br-540){ display: none; }
}
@media (max-width: 540px){
    .hero-text .br-540{ display: inline; }
}
@media (max-width: 515px){
    .hero-text .br-540{ display: none; }
}
@media (max-width: 450px){
    .hero-text .br-540{ display: inline; }
}
@media (max-width: 360px){
    .hero-text .br-540{ display: none; }
}
@media (max-width: 450px){
    .hero-header .br-m,
    .hero-text .br-m{ display: inline; }
    .hero-text .br-fuerein{ display: none; }
}
@media (max-width: 400px){
    .hero-pille{ font-size: 12px; }
    .hero-text br{ display: none; }
}
.hero-text{
    width: 694px;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 160%;
    letter-spacing: -0.01em;
    text-align: center;
    color: #FFFFFFCC;
    margin-bottom: 32px;
}
@media (max-width: 1400px){
    .hero-text{ font-size: 16px; }
}
@media (max-width: 750px){
    .hero-text{ width: 100%; }
}
.hero-scroller-wrapper{
    margin-top: 32px;
    width: 57px;
    display: flex;
    justify-content: center;
    justify-items: center;
    align-items: center;
    flex-direction: column;
}
.hero-scroller-box{
    width: 31px;
    height: 56px;
    border-radius: 28.5px;
    background-color: transparent;
    position: relative;
    overflow: hidden;
}
.hero-scroller-box::before{
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 28.5px;
    padding: 2px;
    background: linear-gradient(92.38deg, rgba(71, 204, 245, 0.048) 0.12%, rgba(71, 204, 245, 0.24) 51.37%, rgba(71, 204, 245, 0.048) 101.32%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    pointer-events: none;
}
.hero-scroller-inner{
    position: absolute;
    z-index: 1;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    left: 50%;
    top: 8px;
    transform: translateX(-50%);
    background: linear-gradient(92.38deg, rgba(71, 204, 245, 0.128) 0.12%, rgba(71, 204, 245, 0.64) 51.37%, rgba(71, 204, 245, 0.128) 101.32%);
    animation: scroller-dot 3s ease infinite;
}
/* top→transform: compositet, läuft off-main-thread (vorher non-composited Layout/Frame) */
@keyframes scroller-dot{
    0%   { transform: translateX(-50%) translateY(0); }
    20%  { transform: translateX(-50%) translateY(34px); }
    26%  { transform: translateX(-50%) translateY(24px); }
    32%  { transform: translateX(-50%) translateY(34px); }
    38%  { transform: translateX(-50%) translateY(24px); }
    44%  { transform: translateX(-50%) translateY(34px); }
    50%  { transform: translateX(-50%) translateY(24px); }
    56%  { transform: translateX(-50%) translateY(34px); }
    75%  { transform: translateX(-50%) translateY(0); }
    100% { transform: translateX(-50%) translateY(0); }
}
.hero-arrow-down{
    width: 17px;
    height: 9px;
    margin-top: 8px;
    background: linear-gradient(92.38deg, rgba(71, 204, 245, 0.2) 0.12%, #47CCF5 51.37%, rgba(71, 204, 245, 0.2) 101.32%);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='9' fill='none'%3E%3Cpath d='M1 1l7.5 7L16 1' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='9' fill='none'%3E%3Cpath d='M1 1l7.5 7L16 1' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
}
.section-fall{
    padding-top: 114px;
    padding-bottom: 114px;
    box-sizing: border-box;
}
.sec-fall{
    flex-direction: row-reverse;
    justify-content: space-between;
}
.fall-left{
    width: 600px;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    gap: 24px;
    overflow: hidden;
}
.fall-left .hero-pille,
.fall-header,
.fall-text{
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
.fall-left .hero-pille.visible,
.fall-header.visible,
.fall-text.visible{
    opacity: 1;
    transform: translateY(0);
}
.fall-header{ transition-delay: 0.12s; }
.fall-text{ transition-delay: 0.24s; }

.fall-header-first{
    font-weight: 700;
    font-style: italic;
}
.fall-header{
    text-align: left;
    font-weight: 400;
}

.fall-text{
    text-align: left;
}
.fall-subheader{
    background: #47CCF5;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}
.fall-right{
    width: 635px;
    justify-content: flex-start;
    justify-items: center;
    align-items: flex-start;
    flex-direction: column;
    padding: 12px;
    background: linear-gradient(180deg, rgba(71, 204, 245, 0.1) 0%, rgba(71, 204, 245, 0) 100%);
    border-radius: 24px;
    position: relative;
}
.fall-right::before{
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 24px;
    padding: 1px;
    background: linear-gradient(180deg, rgba(71, 204, 245, 0.22) 0%, rgba(71, 204, 245, 0) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
/*==========Partner Section==========*/
.section-partner{
    background-color: #F0F5F7;
    padding-top: 114px;
    padding-bottom: 114px;
    box-sizing: border-box;
}
@media (max-width: 600px){
    .section-partner{
        padding-top: 50px;
        padding-bottom: 50px;
    }
}
.sec-partner{
    flex-direction: column;
    align-items: center;
}
.partner-subheader{
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 140%;
    letter-spacing: -0.03em;
    text-align: center;
    padding: 9px 20px;
    border-radius: 900999px;
    width: fit-content;
    margin: 0 auto;
    position: relative;
    background: linear-gradient(88.22deg, #1C343F -40.56%, #47CCF5 50.82%, #1C343F 146.4%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.partner-subheader::before{
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 900999px;
    padding: 0.61px;
    background: #47CCF5;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
.partner-header{
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 44px;
    line-height: 120%;
    letter-spacing: -0.03em;
    text-align: center;
    background: linear-gradient(88.73deg, #1C343F 27.03%, #47CCF5 50.62%, #1C343F 74.14%, #1C343F 108%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-top: 24px;
    margin-bottom: 60px;
}
.partner-bold{
    font-weight: 700;
}
.partner-header-sec{
}
.partner-logo-wrapper{
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}
.partner-logo-row{
    display: flex;
    justify-content: center;
    gap: 12px;
}
.partner-logo-row .partner-logo-box{
    flex: 1 1 0;
}
.partner-logo-box{
    width: 100%;
    height: 100px;
    border-radius: 16px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(180deg, rgba(71, 204, 245, 0.1) 0%, rgba(71, 204, 245, 0) 100%);
    border: 1px solid white;
}
.partner-logo-box::before{
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    padding: 1px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 46.88%, rgba(255, 255, 255, 0) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
.partner-logo-img{
    max-width: 60%;
    max-height: 60%;
    object-fit: contain;
    position: relative;
    z-index: 3;
    transition: opacity 0.6s ease;
}
@media (max-width: 1400px){
    .partner-header{
        font-size: var(--header-tablet);
    }
    .partner-subheader{
        font-size: var(--mobile-pille);
    }
}
@media (max-width: 750px){
    .partner-header br{
        display: none;
    }
}
@media (max-width: 600px){
    .partner-header{
        font-size: var(--header-handy);
    }
    .partner-logo-box{
        height: 60px;
    }
}
@media (max-width: 1000px){
    .partner-logo-row .partner-logo-box:nth-child(n+4){
        display: none;
    }
}
.partner-logo-img.fade-out{
    opacity: 0;
}
/*==========Service Section==========*/
.section-service{
    background: #000506;
    padding-top: 100px;
    padding-bottom: 100px;
    box-sizing: border-box;
}
@media (max-width: 600px){
    .section-service{ padding-top: 50px; }
}
.sec-service{
    flex-direction: column;
    align-items: center;
    gap: 64px;
}
.service-top{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}
.service-header{
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 44px;
    line-height: 120%;
    letter-spacing: -0.03em;
    text-align: center;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.4) 5.71%, #FFFFFF 34%, #FFFFFF 67%, rgba(255, 255, 255, 0.4) 93.88%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.service-fontweight{
    font-weight: 700;
}
@media (max-width: 1400px){
    .service-header{
        font-size: var(--header-tablet);
    }
}
@media (max-width: 600px){
    .service-header{
        font-size: var(--header-handy);
    }
}
.service-scroll{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}
.service-scroll-arrow{
    flex-shrink: 0;
}
.service-scroll-text{
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 160%;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: #527E8D;
}
@media (max-width: 1400px){
    .service-scroll-text{
        font-size: 16px;
    }
    .service-scroll-arrow{
        width: 20px;
        height: 20px;
    }
}
.service-cards{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    width: 100%;
}
.service-card{
    flex: 1;
    height: 564px;
    background: linear-gradient(180deg, rgba(71, 204, 245, 0.1) 0%, rgba(71, 204, 245, 0) 100%);
    border-radius: 24px;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    position: relative;
    overflow: hidden;
}
.service-card-cut{
    border-radius: 24px 24px 0px 24px;
}
.service-card::before{
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(180deg, rgba(71, 204, 245, 0.22) 0%, rgba(71, 204, 245, 0) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
.service-card-glow{
    position: absolute;
    width: 1392px;
    height: 1227px;
    left: calc(50% - 1392px/2);
    top: -470px;
    background-image: url('../img/service/glow-card.png');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.14;
    pointer-events: none;
    z-index: 0;
}
.service-card-visual{
    width: 100%;
    height: 240px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.service-card-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}
.service-card-content{
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    margin-top: 24px;
    padding: 0 40px;
}
.service-card-title{
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 28px;
    line-height: 130%;
    letter-spacing: -0.03em;
    color: #FFFFFF;
}
@media (max-width: 1400px){
    .service-card-title{
        font-size: 23px;
    }
}
.service-card-text{
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 160%;
    letter-spacing: -0.01em;
    color: #CFCFCD;
}
@media (max-width: 1400px){
    .service-card-text{
        font-size: 16px;
    }
    .service-card br:not(.br-keep){
        display: none;
    }
}
@media (max-width: 1300px){
    .service-cards{
        flex-wrap: wrap;
        justify-content: center;
    }
    .service-card{
        flex: 0 1 400px;
        height: 520px;
    }
}
@media (max-width: 450px){
    .service-cards > .service-card:first-child .service-card-img{
        object-fit: contain;
        object-position: center;
    }
}
/*==========DACH Section==========*/
.section-dach{
    background: #000506;
    padding-top: 100px;
    padding-bottom: 100px;
    box-sizing: border-box;
    position: relative;
    overflow-x: clip;
    overflow-y: visible;
    z-index: 10;
}
@media (max-width: 600px){
    .section-dach{ padding-top: 50px; padding-bottom: 50px; }
}
.dach-glow{
    position: absolute;
    width: 300%;
    height: 2930px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-image: url('../img/dach/glow-dach.png');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}
.dach-glow.visible{
    opacity: .5;
    height: 1800px;
    overflow-y: visible;
}
@media (min-width: 1000px){
    .dach-glow{ width: 250%; }
}
.sec-dach{
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1;
}
.dach-content{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    width: 581px;
    flex-shrink: 0;
}
.dach-header{
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 55px;
    line-height: 120%;
    letter-spacing: -0.03em;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.4) 5.71%, #FFFFFF 34%, #FFFFFF 67%, rgba(255, 255, 255, 0.4) 93.88%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.dach-text{
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 160%;
    letter-spacing: -0.02em;
    color: rgba(255, 255, 255, 0.7);
}
@media (max-width: 1400px){
    .dach-header{ font-size: 40px; }
    .dach-text{ font-size: 16px; }
}
@media (max-width: 1250px){
    .dach-text br:not(.dach-br-keep){ display: none; }
}
@media (max-width: 600px){
    .dach-header{ font-size: 32px; }
}
.dach-button{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 17px 34px;
    background: rgba(71, 204, 245, 0.2);
    box-shadow: 2px 6px 52px rgba(71, 204, 245, 0.32);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 100px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 140%;
    letter-spacing: -0.03em;
    color: #FFFFFF;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}
.dach-button::before{
    content: '';
    position: absolute;
    width: 76px;
    height: 135px;
    left: calc(50% - 76px/2 - 72px);
    top: calc(50% - 135px/2);
    background: linear-gradient(90deg, rgba(71, 204, 245, 0) 0%, rgba(71, 204, 245, 0.45) 39.91%, rgba(71, 204, 245, 0.45) 50.47%, rgba(71, 204, 245, 0) 100%);
    filter: blur(6px);
    transform: rotate(-40deg);
    pointer-events: none;
}
.dach-visual{
    width: 585px;
    height: 688px;
    flex-shrink: 0;
    border-radius: 30.64px;
    position: relative;
    overflow: hidden;
}
.dach-map{
    width: 585px;
    height: 688px;
    object-fit: contain;
    border-radius: 30.64px;
}
@media (max-width: 1300px){
    .sec-dach{ gap: 32px; justify-content: center; }
    .dach-content{ flex-shrink: 1; min-width: 0; }
    .dach-visual{ flex-shrink: 1; min-width: 0; width: auto; height: auto; max-width: 585px; aspect-ratio: 585 / 688; }
    .dach-map{ width: 100%; height: 100%; }
}
@media (max-width: 1250px){
    .dach-visual{ max-width: 500px; }
}
.dach-cta--mobile{ display: none; }
@media (max-width: 1000px){
    .sec-dach{ flex-direction: column; gap: 60px; }
    .dach-content{ align-items: center; text-align: center; width: 100%; max-width: 581px; }
    .dach-visual{ width: 100%; max-width: 500px; }
    .dach-cta--desktop{ display: none; }
    .dach-cta--mobile{ display: inline-flex; }
}
.dach-pin{
    position: absolute;
    width: 16px;
    height: 21px;
    opacity: 1;
    transform: translateY(0);
}
.dach-pin-static{
    opacity: 0;
    transform: translateY(-40px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.dach-pin-static.landed{
    opacity: 1;
    transform: translateY(0);
}
/* Statische Pins - Deutschland (Norden -> Süden) */
.dach-pin-1{ left: 38%; top: 14.3%; }  /* Hamburg */
.dach-pin-2{ left: 30%; top: 17.2%; }  /* Bremen */
.dach-pin-3{ left: 62%; top: 17.2%; }  /* Berlin */
.dach-pin-4{ left: 55%; top: 21.5%; }  /* Potsdam */
.dach-pin-5{ left: 35%; top: 25.7%; }  /* Hannover */
.dach-pin-6{ left: 22%; top: 31.5%; }  /* Düsseldorf */
.dach-pin-7{ left: 18%; top: 35.8%; }  /* Köln */
.dach-pin-8{ left: 60%; top: 31.5%; }  /* Dresden */
.dach-pin-9{ left: 52%; top: 28.6%; }  /* Leipzig */
.dach-pin-10{ left: 42%; top: 34.3%; } /* Kassel */
.dach-pin-11{ left: 28%; top: 42.9%; } /* Frankfurt */
.dach-pin-12{ left: 35%; top: 45.8%; } /* Würzburg */
.dach-pin-13{ left: 48%; top: 40.0%; } /* Erfurt */
.dach-pin-14{ left: 20%; top: 50.1%; } /* Mainz */
.dach-pin-15{ left: 30%; top: 54.3%; } /* Mannheim */
.dach-pin-16{ left: 25%; top: 60.1%; } /* Stuttgart */
.dach-pin-17{ left: 45%; top: 50.1%; } /* Nürnberg */
.dach-pin-18{ left: 55%; top: 45.8%; } /* Chemnitz */
.dach-pin-19{ left: 40%; top: 57.2%; } /* Augsburg */
.dach-pin-20{ left: 48%; top: 62.9%; } /* München */
.dach-pin-21{ left: 38%; top: 65.8%; } /* Ulm */
.dach-pin-22{ left: 15%; top: 42.9%; } /* Saarbrücken */
.dach-pin-23{ left: 44%; top: 22.9%; } /* Magdeburg */
.dach-pin-24{ left: 26%; top: 22.9%; } /* Osnabrück */
/* Schweiz */
.dach-pin-25{ left: 18%; top: 88%; } /* Basel */
.dach-pin-26{ left: 22%; top: 85.8%; } /* Bern */
.dach-pin-27{ left: 28%; top: 90.9%; } /* Zürich */
.dach-pin-28{ left: 12%; top: 94.7%; } /* Genf */
.dach-pin-29{ left: 32%; top: 80.1%; } /* St. Gallen */
/* Österreich */
.dach-pin-30{ left: 55%; top: 84.4%; } /* Innsbruck */
.dach-pin-31{ left: 48%; top: 71.5%; } /* Bregenz */
.dach-pin-32{ left: 62%; top: 88.5%; } /* Salzburg */
.dach-pin-33{ left: 72%; top: 80.4%; } /* Linz */
.dach-pin-34{ left: 90%; top: 71.5%; } /* Wien */
.dach-pin-35{ left: 85%; top: 80.1%; } /* Graz */
/* Animierte Pins - fliegen rein, bleiben, gehen weg, kommen woanders */
.dach-pin-36{ left: 32%; top: 37.2%; animation: pin-cycle 20s ease 0s infinite; }
.dach-pin-37{ left: 50%; top: 54.3%; animation: pin-cycle 20s ease 1.3s infinite; }
.dach-pin-38{ left: 24%; top: 68.6%; animation: pin-cycle 20s ease 2.6s infinite; }
.dach-pin-39{ left: 68%; top: 68.6%; animation: pin-cycle 20s ease 3.9s infinite; }
.dach-pin-40{ left: 42%; top: 60.1%; animation: pin-cycle 20s ease 5.2s infinite; }
.dach-pin-41{ left: 58%; top: 25.7%; animation: pin-cycle 20s ease 6.5s infinite; }
.dach-pin-42{ left: 25%; top: 80.1%; animation: pin-cycle 20s ease 7.8s infinite; }
.dach-pin-43{ left: 65%; top: 77.2%; animation: pin-cycle 20s ease 9.1s infinite; }
.dach-pin-44{ left: 36%; top: 20.0%; animation: pin-cycle 20s ease 10.4s infinite; }
.dach-pin-45{ left: 16%; top: 82.9%; animation: pin-cycle 20s ease 11.7s infinite; }
.dach-pin-46{ left: 52%; top: 65.8%; animation: pin-cycle 20s ease 13s infinite; }
.dach-pin-47{ left: 30%; top: 62.9%; animation: pin-cycle 20s ease 14.3s infinite; }
.dach-pin-48{ left: 76%; top: 77.2%; animation: pin-cycle 20s ease 15.6s infinite; }
.dach-pin-49{ left: 46%; top: 42.9%; animation: pin-cycle 20s ease 16.9s infinite; }
.dach-pin-50{ left: 40%; top: 31.5%; animation: pin-cycle 20s ease 18.2s infinite; }
@keyframes pin-cycle{
    0%   { opacity: 0; transform: translateY(-30px) scale(0.5); }
    4%   { opacity: 1; transform: translateY(0) scale(1); }
    6%   { transform: translateY(-4px) scale(1); }
    8%   { opacity: 1; transform: translateY(0) scale(1); }
    45%  { opacity: 1; transform: translateY(0) scale(1); }
    55%  { opacity: 0; transform: translateY(0) scale(0.8); }
    100% { opacity: 0; }
}
.fall-videocon{
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
}

/* ===== KONTAKT SECTION ===== */
.section-kontakt{
    background: #F0F5F7;
    position: relative;
    overflow: hidden;
}
.kontakt-glow{
    position: absolute;
    width: 2424px;
    height: 2088px;
    right: -920px;
    top: -920px;
    background-image: url('../img/kontakt/glow-section.png');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
}
.sec-kontakt{
    display: flex;
    flex-direction: column;
    gap: 140px;
    padding: 100px 0;
}

/* Team Banner */
.kontakt-team{
    position: relative;
    padding: 60px;
    border-radius: 20px;
    background: #1D3540;
    overflow: hidden;
    width: 100%;
}
.kontakt-team::after{
    content: '';
    position: absolute;
    inset: 0;
    background: url('../img/kontakt/team-bg.webp') no-repeat;
    background-size: 120%;
    background-position: right -450px bottom -430px;
    z-index: 0;
}
.kontakt-team::before{
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #1D3540 41.77%, rgba(29, 53, 64, 0.2) 100%);
    z-index: 1;
    pointer-events: none;
}
.kontakt-team-glow{
    position: absolute;
    width: 1443px;
    height: 1443px;
    left: -641px;
    top: -607px;
    z-index: 2;
    background-image: url('../img/kontakt/glow-team.png');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
}
.kontakt-team-content{
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 32px;
    max-width: 656px;
}
.kontakt-team-text{
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.kontakt-team-header{
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 44px;
    line-height: 120%;
    letter-spacing: -0.03em;
    color: #FFFFFF;
    margin: 0;
}
.kontakt-team-desc{
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 160%;
    letter-spacing: -0.0125em;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}
@media (max-width: 1400px){
    .kontakt-team-header{ font-size: 40px; }
    .kontakt-team-desc{ font-size: 16px; }
}
.kontakt-team-header .br-700{ display: none; }
@media (max-width: 700px){
    .kontakt-team-header .br-700{ display: inline; }
}
@media (max-width: 1165px){
    .kontakt-team::after{ background-size: 1260px; }
}
@media (max-width: 900px){
    .kontakt-team-desc br{ display: none; }
}
@media (max-width: 800px){
    .kontakt-team{ padding: 40px; }
    .kontakt-team-content{ align-items: center; text-align: center; }
}
@media (max-width: 700px){
    .kontakt-team::after{ background-size: auto 180%; background-position: 35% 10%; }
}
@media (max-width: 500px){
    .kontakt-team{ padding: 30px 16px; }
}
@media (max-width: 600px){
    .kontakt-team-header{ font-size: 32px; }
}
.kontakt-team-button{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 17px 34px;
    position: relative;
    background: rgba(71, 204, 245, 0.2);
    box-shadow: 2px 6px 52px rgba(71, 204, 245, 0.32);
    backdrop-filter: blur(20px);
    border-radius: 100px;
    text-decoration: none;
    width: fit-content;
    overflow: hidden;
    isolation: isolate;
}
.kontakt-team-button-shine{
    position: absolute;
    width: 76px;
    height: 135px;
    left: calc(50% - 76px/2 - 72px);
    top: calc(50% - 135px/2);
    background: linear-gradient(90deg, rgba(71,204,245,0) 0%, rgba(71,204,245,0.45) 40%, rgba(71,204,245,0.45) 50%, rgba(71,204,245,0) 100%);
    filter: blur(6px);
    transform: rotate(-40deg);
    z-index: 0;
}
.kontakt-team-button-label{
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 140%;
    letter-spacing: -0.03em;
    color: #FFFFFF;
    position: relative;
    z-index: 1;
}

/* Bottom / Two Columns */
.kontakt-bottom{
    display: flex;
    align-items: flex-start;
    gap: 80px;
}
.kontakt-left{
    display: flex;
    flex-direction: column;
    gap: 40px;
    flex: 1;
}
.kontakt-info{
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.kontakt-pille{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 9px 20px;
    border-radius: 900999px;
    width: fit-content;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 140%;
    letter-spacing: -0.03em;
    background: linear-gradient(88.22deg, #1C343F -40.56%, #47CCF5 50.82%, #1C343F 146.4%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    text-transform: uppercase;
}
.kontakt-pille::before{
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 900999px;
    padding: 1px;
    background: linear-gradient(88.22deg, #1C343F -40.56%, #47CCF5 50.82%, #1C343F 146.4%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
.kontakt-header{
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 55px;
    line-height: 125%;
    letter-spacing: -0.03em;
    margin: 0;
    background: linear-gradient(0deg, rgba(0,0,0,0.32), rgba(0,0,0,0.32)), linear-gradient(88.56deg, #1C343F -21.28%, #47CCF5 53.83%, #1C343F 130.4%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.kontakt-text{
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 160%;
    letter-spacing: -0.0125em;
    color: rgba(7, 12, 12, 0.7);
    margin: 0;
}
@media (max-width: 1400px){
    .kontakt-pille{ font-size: 14px; }
    .kontakt-header{ font-size: 40px; }
    .kontakt-text{ font-size: 16px; }
}
@media (max-width: 600px){
    .kontakt-header{ font-size: 32px; }
}

/* Contact Details */
.kontakt-details{
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.kontakt-details-header{
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 23px;
    line-height: 140%;
    letter-spacing: -0.03em;
    color: #070C0C;
    margin: 0;
}
.kontakt-cards{
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.kontakt-card{
    display: flex;
    align-items: center;
    padding: 16px 24px;
    gap: 16px;
    background: rgba(71, 204, 245, 0.08);
    border: 1px solid rgba(129, 173, 187, 0.16);
    backdrop-filter: blur(4px);
    border-radius: 16px;
    text-decoration: none;
    color: inherit;
    transition: background 0.2s ease, border-color 0.2s ease;
}
a.kontakt-card:hover{
    background: rgba(71, 204, 245, 0.14);
    border-color: rgba(129, 173, 187, 0.32);
}
.kontakt-card-icon{
    width: 48px;
    height: 48px;
    background: #47CCF5;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}
.kontakt-card-text{
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.kontakt-card-label{
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 160%;
    letter-spacing: -0.0125em;
    color: #070C0C;
}
.kontakt-card-value{
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 160%;
    letter-spacing: -0.0125em;
    color: rgba(7, 12, 12, 0.7);
}
@media (max-width: 1400px){
    .kontakt-details-header{ font-size: 18px; }
    .kontakt-card-label{ font-size: 16px; }
    .kontakt-card-value{ font-size: 16px; }
}
@media (max-width: 1000px){
    .kontakt-bottom{ flex-direction: column-reverse; }
    .kontakt-left,
    .kontakt-right{ width: 100%; flex: none; }
}

/* Right Column - Map */
.kontakt-right{
    flex: 1;
    position: relative;
}
.kontakt-bg-img{
    width: 100%;
    border-radius: 20px;
    display: block;
}
.kontakt-overlay-img{
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
}

/* ===== FLOWTEXT SECTION ===== */
.section-flowtext{
    position: relative;
    background: #F0F5F7;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 100px 24px;
}
@media (max-width: 600px){
    .section-flowtext{ padding-top: 50px; padding-bottom: 50px; }
}
.sec-flowtext{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 48px;
    max-width: 1156px;
}
.flowtext{
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 44px;
    line-height: 130%;
    text-align: center;
    letter-spacing: -0.03em;
    margin: 0;
}
.flowtext .word{
    color: rgba(0, 0, 0, 0.45);
}
@media (max-width: 1400px){
    .flowtext{ font-size: 40px; }
}
@media (max-width: 600px){
    .flowtext{ font-size: 23px; }
}

/* ===== BALLS SECTION ===== */
.section-balls{
    background: #F0F5F7;
    padding-bottom: 38px;
    margin-top: -180px;
}
.sec-balls{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 0;
}
.balls-canvas-wrapper{
    width: 100%;
    height: 530px;
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    background: rgba(71, 204, 245, 0.1);
    backdrop-filter: blur(9px);
    max-width: 1415px;
    margin: 0 auto;
}
#ballsCanvas{
    width: 100%;
    height: 100%;
    display: block;
}
.balls-button{
    margin-top: 38px;
    z-index: 2;
    position: relative;
}
.balls-infobox{
    width: 100%;
    max-width: 1038px;
    margin-top: 100px;
    background: #FFFFFF;
    border: 1px solid rgba(129, 173, 187, 0.12);
    border-radius: 24px;
    padding: 40px;
    transform: translateY(75%);
    position: relative;
    z-index: 10;
}
.balls-infobox-inner{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    max-width: 958px;
    margin: 0 auto;
}
.balls-infobox-title{
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 55px;
    line-height: 120%;
    letter-spacing: -0.03em;
    text-align: center;
    margin: 0;
    background: linear-gradient(0deg, rgba(0,0,0,0.32), rgba(0,0,0,0.32)), linear-gradient(88.49deg, #1C343F -15.28%, #47CCF5 43.55%, #1C343F 103.51%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.balls-infobox-text{
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 160%;
    letter-spacing: -0.0125em;
    text-align: center;
    color: rgba(7, 12, 12, 0.7);
    margin: 0;
}
@media (max-width: 1400px){
    .balls-infobox-title{ font-size: 40px; }
    .balls-infobox-text{ font-size: 16px; }
}
@media (max-width: 600px){
    .balls-infobox-title{ font-size: 32px; }
    .balls-infobox{ margin-top: 30px; }
}
.balls-infobox-title .br-850{ display: none; }
@media (max-width: 850px){
    .balls-infobox-title .br-850{ display: inline; }
}

/* ===== FOOTER SECTION ===== */
.section-footer{
    background: #000506;
    position: relative;
    overflow: hidden;
}
.sec-footer{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 80px 0 40px;
    gap: 100px;
}
.footer-glow{
    position: absolute;
    width: 2491px;
    height: 1720px;
    left: 50%;
    top: -310px;
    transform: translateX(-50%);
    background-image: url('../img/footer/glow-footer.png');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 0;
}
.footer-cta{
    display: flex;
    align-items: center;
    gap: 0;
    position: relative;
    width: 100%;
    z-index: 1;
}
.footer-clock{
    position: relative;
    width: 420px;
    height: 420px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 200px;
    margin-top: 120px;
}
.footer-clock-light{
    position: absolute;
    inset: -150%;
    width: 400%;
    height: 400%;
    object-fit: contain;
    pointer-events: none;
    z-index: 0;
}
.footer-clock-video{
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    z-index: 1;
}
.footer-cta-content{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    margin-left: auto;
    max-width: 656px;
}
.footer-cta-text{
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.footer-cta-header{
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 44px;
    line-height: 120%;
    letter-spacing: -0.03em;
    margin: 0;
    background: linear-gradient(90deg, rgba(255,255,255,0.4) 0%, #FFFFFF 34%, #FFFFFF 67%, rgba(255,255,255,0.4) 87.12%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.footer-cta-desc{
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 160%;
    letter-spacing: -0.02em;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}
@media (max-width: 1400px){
    .footer-cta-header{ font-size: 40px; }
    .footer-cta-desc{ font-size: 16px; }
    .footer-cta-desc br{ display: none; }
    .footer-clock{ margin-left: 80px; }
}
@media (max-width: 1350px){
    .footer-cta{ gap: 48px; }
}
@media (max-width: 1200px){
    .footer-clock{ margin-left: 0; }
}
@media (max-width: 1000px){
    .footer-cta{ flex-direction: column; align-items: center; }
    .footer-cta-content{ margin-left: 0; align-items: center; text-align: center; }
}
@media (max-width: 650px){
    .footer-clock{ width: 280px; height: 280px; margin-top: 80px; }
}
@media (max-width: 1100px){
    .footer-row{ flex-direction: column; gap: 24px; align-items: center; text-align: center; }
}
@media (max-width: 900px){
    .sec-footer{ gap: 0; }
    .footer-wordmark-img{ padding-top: 100px; padding-bottom: 40px; }
}
@media (max-width: 550px){
    .footer-legal{ flex-direction: column; gap: 12px; }
}
.footer-cta-header .show-510{ display: none; }
/* Konditionale <br>: standardmäßig hidden, nur per Breakpoint einblenden */
.footer-cta-header .br-1000,
.footer-cta-header .br-800{ display: none; }
@media (max-width: 1000px){
    .footer-cta-header .br-1000{ display: inline; }
}
@media (max-width: 800px){
    .footer-cta-header .br-800{ display: inline; }
}
@media (max-width: 600px){
    .footer-cta-header{ font-size: 32px; }
}
@media (max-width: 510px){
    .footer-cta-header .show-510{ display: inline; }
}
.footer-wordmark{
    width: 100%;
    z-index: 1;
}
.footer-wordmark-img{
    width: 100%;
    height: auto;
    display: block;
}
.footer-bottom{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 32px;
    z-index: 1;
}
.footer-line{
    width: 100%;
    height: 1px;
    background: rgba(39, 58, 62, 0.5);
}
.footer-row{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.footer-copyright{
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 160%;
    letter-spacing: -0.01em;
    color: rgba(255, 255, 255, 0.7);
    opacity: 0.7;
}
.footer-social{
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0.5;
}
.footer-social-link{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    border-radius: 6px;
}
.footer-legal{
    display: flex;
    align-items: center;
    gap: 32px;
}
.footer-legal-link{
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 160%;
    letter-spacing: -0.01em;
    color: rgba(255, 255, 255, 0.7);
    opacity: 0.7;
    text-decoration: none;
}

/*==========Showcase Section==========*/
.section-showcase{
    position: relative;
    /* 2026-06-02 (viewport-fix): Outer-Höhe an --locked-vh — siehe .timeline-section */
    height: 400vh;                                  /* Fallback ohne JS */
    height: calc(var(--locked-vh, 100vh) * 4.0);   /* JS-locked. Fallback 100vh = identisch zu Original (400vh) */
    background: #000506;
    z-index: 1;
    display: block;
}
.showcase-sticky{
    position: sticky;
    top: 0;
    height: 100vh;          /* Fallback */
    height: 100dvh;         /* Dynamic Viewport — Instagram-In-App-Browser */
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.showcase-sticky::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 25%;
    background: linear-gradient(to bottom, #000506, transparent);
    z-index: 3;
    pointer-events: none;
}
.sec-showcase{
    position: relative;
    width: 100%;
    height: 100%;
}
.showcase-video-wrap{
    position: absolute;
    inset: 0;
    opacity: 1;
    will-change: opacity;
}
.showcase-video{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.showcase-text-fly{
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
    text-align: left;
    will-change: transform, opacity;
    z-index: 2;
    pointer-events: none;
}
.showcase-headline{
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: clamp(32px, 5vw, 72px);
    line-height: 1.1;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    margin: 0;
}
.showcase-headline-white{
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.4) 0%, #FFFFFF 50%, rgba(255, 255, 255, 0.4) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
}
.showcase-headline-cyan{
    background: #47CCF5;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
}
.showcase-subline{
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: clamp(16px, 2vw, 24px);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    margin: 16px 0 0;
}
.showcase-text-reveal{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) perspective(800px) translateZ(-300px);
    text-align: center;
    opacity: 0;
    will-change: transform, opacity;
    z-index: 2;
    pointer-events: none;
}
.showcase-text-reveal.active{
    pointer-events: auto;
}
.showcase-text-reveal .hero-pille{
    margin: 0 auto 24px;
}
.showcase-reveal-headline{
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 55px;
    line-height: 1.15;
    letter-spacing: -0.03em;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.4) 0%, #FFFFFF 34%, #FFFFFF 67%, rgba(255, 255, 255, 0.4) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 32px;
    white-space: nowrap;
}
@media (max-width: 1400px){
    .showcase-text-reveal .hero-pille{ font-size: 14px; }
    .showcase-reveal-headline{ font-size: 40px; }
}
@media (max-width: 700px){
    .showcase-reveal-headline{ white-space: normal; width: 500px; }
    .showcase-reveal-headline br{ display: none; }
}
@media (max-width: 600px){
    .showcase-reveal-headline{ font-size: 32px; }
}
@media (max-width: 500px){
    .showcase-reveal-headline{ width: 350px; }
    .hide-500{ display: none; }
}
.primary-button-flex{
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 32px;
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #fff;
    text-decoration: none;
    overflow: hidden;
    background: rgba(71, 204, 245, 0.08);
    border: 1px solid rgba(71, 204, 245, 0.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
    cursor: pointer;
}
.primary-button-flex:hover{
    background: rgba(71, 204, 245, 0.15);
    border-color: rgba(71, 204, 245, 0.5);
    box-shadow: 0 0 24px rgba(71, 204, 245, 0.15);
}

/* About Us / Gründer */
.section-aboutus{
    background: #000506;
    padding: 100px 72px;
    position: relative;
    overflow: hidden;
}
@media (max-width: 1000px){
    .section-aboutus{ padding-top: 0; padding-bottom: 0; }
}
@media (max-width: 600px){
    .section-aboutus{ padding-top: 50px; padding-bottom: 50px; }
}
.aboutus-layout{
    position: relative;
}
.aboutus-layout > picture:has(.aboutus-glow-img){
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
.aboutus-glow-img{
    position: absolute;
    width: 1200px;
    right: -200px;
    top: 50%;
    transform: translateY(-45%);
    z-index: 0;
    pointer-events: none;
}
.aboutus-layout-reverse .aboutus-glow-img{
    right: auto;
    left: -350px;
    height: 1400px;
    transform: translateY(-55%);
}
.sec-aboutus{
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
    position: relative;
    z-index: 1;
}
.aboutus-header{
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 55px;
    line-height: 120%;
    letter-spacing: -0.03em;
    text-align: center;
    margin-bottom: 100px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.4) 0%, #FFFFFF 34%, #FFFFFF 67%, rgba(255, 255, 255, 0.4) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.aboutus-layout{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}
.aboutus-img{
    width: 587px;
    border-radius: 16px;
    object-fit: cover;
}
.aboutus-text{
    display: flex;
    justify-content: center;
    justify-items: center;
    flex-direction: column;
    gap: 16px;
    width: 620px;
    flex-shrink: 0;
}
.aboutus-name{
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 44px;
    line-height: 120%;
    letter-spacing: -0.03em;
    color: #47CCF5;
}
.aboutus-role{
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    color: #FFFFFF;
}
.aboutus-body{
    font-family: 'Inter', sans-serif;
    font-size: 23px;
    line-height: 160%;
    color: rgba(255, 255, 255, 0.2);
}
.aboutus-header .br-750{ display: none; }
@media (max-width: 750px){
    .aboutus-header .br-750{ display: inline; }
}
@media (max-width: 1400px){
    .aboutus-header{ font-size: 40px; margin-bottom: 30px; }
    .aboutus-name{ font-size: 40px; }
    .aboutus-role{ font-size: 14px; }
    .aboutus-layout{ gap: 40px; }
    .aboutus-layout > picture:has(.aboutus-img){ flex: 1 1 0; min-width: 0; max-width: 587px; display: block; }
    .aboutus-img{ width: 100%; height: auto; }
    .aboutus-text{ width: 100%; max-width: 620px; flex: 1 1 0; min-width: 0; }
    .aboutus-body{ font-size: 18px; }
    .aboutus-icon{ height: 25px; }
    .aboutus-icon.visible{ width: 25px; }
    .aboutus-icon img{ width: 14px; height: 14px; }
}
@media (max-width: 1200px){
    .aboutus-body br{ display: none; }
}
.aboutus-body .br-600{ display: none; }
@media (max-width: 600px){
    .aboutus-body .br-600{ display: inline; }
}
@media (max-width: 1050px){
    .aboutus-layout{ flex-direction: column; align-items: center; gap: 40px; }
    .aboutus-layout.aboutus-layout-reverse{ flex-direction: column-reverse; margin-top: 30px; }
    .aboutus-layout > picture:has(.aboutus-img){ max-width: 587px; width: 100%; }
    .aboutus-text{ max-width: 620px; }
    .aboutus-glow-img{ top: auto; bottom: 0; left: 50%; right: auto; transform: translate(-50%, 40%); }
    .aboutus-layout-reverse .aboutus-glow-img{ top: auto; bottom: 0; left: 50%; right: auto; transform: translate(-50%, 15%); height: 1000px; width: auto; }
}
@media (max-width: 700px){
    .section-aboutus{ padding-left: 0; padding-right: 0; }
    .aboutus-layout > picture:has(.aboutus-img){ max-width: none; }
    .aboutus-text{ max-width: none; }
}
@media (max-width: 550px){
    .aboutus-body{ line-height: 190%; }
    .aboutus-layout:not(.aboutus-layout-reverse) .aboutus-body br{ display: none; }
}
@media (max-width: 600px){
    .aboutus-header{ font-size: 32px; margin-bottom: 0; }
    .aboutus-name{ font-size: 32px; }
}
.aboutus-word{
    transition: color 0.4s ease;
}
.aboutus-word.lit{
    color: rgba(255, 255, 255, 0.7);
}
.aboutus-layout-reverse{
    margin-top: 156px;
    flex-direction: row;
}
.aboutus-body{
    contain: layout style;
}
.aboutus-icon{
    display: inline-flex;
    width: 0;
    height: 32px;
    border-radius: 8px;
    background: rgba(71, 204, 245, 0.2);
    vertical-align: middle;
    overflow: hidden;
    transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.aboutus-measuring .aboutus-icon{
    transition: none !important;
}
.aboutus-icon:has(img[src*="eva_flash-fill"]),
.aboutus-icon:has(img[src*="stash_trophy-solid"]),
.aboutus-icon:has(img[src$="si_book-fill.png"]){
    transition: width 0.5s ease-out;
}
.aboutus-icon.visible{
    width: 32px;
}
.aboutus-icon img{
    width: 18px;
    height: 18px;
    margin: auto;
    object-fit: contain;
}

/* ── sec-strat ── */
.section-strat{
    background: #F0F5F7;
    padding: 100px 72px;
    position: relative;
    overflow: hidden;
}
@media (max-width: 1000px){
    .section-strat{ padding-top: 20px; }
}
@media (max-width: 700px){
    .section-strat{ padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 600px){
    .section-strat{ padding-bottom: 50px; }
}
.strat-glow{
    position: absolute;
    width: 2200px;
    height: 1300px;
    left: calc(50% - 2200px/2 - 10px);
    top: calc(50% - 1300px/2 - 9px);
    background: radial-gradient(50% 50% at 50% 50%, rgba(71, 204, 245, 0.28) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.sec-strat{
    max-width: 1296px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 64px;
    contain: layout style paint;
}
.strat-header{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}
.strat-pille{
    display: inline-flex;
    padding: 9px 20px;
    border-radius: 900px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 140%;
    letter-spacing: -0.03em;
    text-align: center;
    background: linear-gradient(88.22deg, #1C343F -40.56%, #47CCF5 50.82%, #1C343F 146.4%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    border: 1px solid rgba(71, 204, 245, 0.25);
}
.strat-title{
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 55px;
    line-height: 120%;
    letter-spacing: -0.03em;
    text-align: center;
    background: linear-gradient(0deg, rgba(0,0,0,0.32), rgba(0,0,0,0.32)),
                linear-gradient(88.49deg, #1C343F -15.28%, #47CCF5 43.55%, #1C343F 103.51%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
@media (max-width: 1400px){
    .strat-title{ font-size: 40px; }
}
@media (max-width: 600px){
    .strat-title{ font-size: 32px; }
}
.strat-title .br-752,
.content-title .br-752{ display: none; }
@media (max-width: 752px){
    .strat-title .br-752,
    .content-title .br-752{ display: inline; }
}
.strat-desc{
    max-width: 864px;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 160%;
    letter-spacing: -0.0125em;
    text-align: center;
    color: rgba(7, 12, 12, 0.7);
}
@media (max-width: 1400px){
    .strat-desc{ font-size: 16px; }
}
.strat-quote{
    max-width: 1128px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 44px;
    line-height: 120%;
    letter-spacing: -0.03em;
    text-align: center;
    background: linear-gradient(0deg, rgba(0,0,0,0.32), rgba(0,0,0,0.32)),
                linear-gradient(88.49deg, #1C343F -15.28%, #47CCF5 43.55%, #1C343F 103.51%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.strat-cards{
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}
.strat-row{
    display: flex;
    gap: 24px;
    justify-content: center;
}
.strat-card{
    height: 260px;
    background: linear-gradient(314.84deg, rgba(255,255,255,0.04) -10.08%, rgba(255,255,255,0.0096) 126.86%), #000506;
    border-radius: 12px;
    padding: 20px 24px 24px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    contain: layout style paint;
}
.strat-card::before{
    content: '';
    position: absolute;
    width: 750px;
    height: 750px;
    left: -280px;
    bottom: -280px;
    background: radial-gradient(50% 50% at 50% 50%, rgba(87, 215, 255, 0.4) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.strat-card::after{
    content: '';
    position: absolute;
    width: 280px;
    height: 280px;
    left: -40px;
    bottom: -40px;
    background-image: radial-gradient(circle, rgba(255,255,255,0.2) 1px, transparent 1px);
    background-size: 7px 7px;
    pointer-events: none;
    z-index: 0;
    -webkit-mask-image: radial-gradient(ellipse at 35% 80%, black 0%, transparent 50%);
    mask-image: radial-gradient(ellipse at 35% 80%, black 0%, transparent 50%);
}
.strat-card-3::before{
    left: auto;
    bottom: auto;
    right: -280px;
    top: -280px;
}
.strat-card-3::after{
    left: auto;
    bottom: auto;
    right: -40px;
    top: -40px;
    -webkit-mask-image: radial-gradient(ellipse at 65% 20%, black 0%, transparent 50%);
    mask-image: radial-gradient(ellipse at 65% 20%, black 0%, transparent 50%);
}
.strat-card-stars{
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        radial-gradient(1px 1px at 8% 82%, rgba(255,255,255,0.9) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 3% 68%, rgba(255,255,255,0.7) 50%, transparent 100%),
        radial-gradient(1px 1px at 15% 91%, rgba(255,255,255,0.8) 50%, transparent 100%),
        radial-gradient(2px 2px at 6% 55%, rgba(255,255,255,0.5) 50%, transparent 100%),
        radial-gradient(1px 1px at 22% 78%, rgba(255,255,255,0.6) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 12% 45%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1px 1px at 28% 88%, rgba(255,255,255,0.7) 50%, transparent 100%),
        radial-gradient(1px 1px at 18% 35%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(2px 2px at 10% 72%, rgba(255,255,255,0.6) 50%, transparent 100%),
        radial-gradient(1px 1px at 35% 65%, rgba(255,255,255,0.5) 50%, transparent 100%),
        radial-gradient(1px 1px at 5% 92%, rgba(255,255,255,0.8) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 25% 50%, rgba(255,255,255,0.35) 50%, transparent 100%),
        radial-gradient(1px 1px at 40% 85%, rgba(255,255,255,0.5) 50%, transparent 100%),
        radial-gradient(1px 1px at 32% 42%, rgba(255,255,255,0.25) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 20% 60%, rgba(255,255,255,0.55) 50%, transparent 100%),
        radial-gradient(1px 1px at 45% 75%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1px 1px at 14% 28%, rgba(255,255,255,0.2) 50%, transparent 100%),
        radial-gradient(2px 2px at 2% 78%, rgba(255,255,255,0.7) 50%, transparent 100%),
        radial-gradient(1px 1px at 50% 60%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(1px 1px at 38% 30%, rgba(255,255,255,0.2) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 55% 80%, rgba(255,255,255,0.35) 50%, transparent 100%),
        radial-gradient(1px 1px at 60% 55%, rgba(255,255,255,0.2) 50%, transparent 100%),
        radial-gradient(1px 1px at 48% 92%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1px 1px at 65% 70%, rgba(255,255,255,0.15) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 70% 45%, rgba(255,255,255,0.15) 50%, transparent 100%),
        radial-gradient(1px 1px at 58% 38%, rgba(255,255,255,0.12) 50%, transparent 100%),
        radial-gradient(1px 1px at 75% 85%, rgba(255,255,255,0.2) 50%, transparent 100%),
        radial-gradient(1px 1px at 80% 65%, rgba(255,255,255,0.1) 50%, transparent 100%),
        radial-gradient(1px 1px at 85% 50%, rgba(255,255,255,0.1) 50%, transparent 100%),
        radial-gradient(1px 1px at 90% 75%, rgba(255,255,255,0.08) 50%, transparent 100%);
    opacity: 0.42;
}
.strat-card-4::before{
    bottom: auto;
    top: -280px;
}
.strat-card-4::after{
    bottom: auto;
    top: -40px;
    -webkit-mask-image: radial-gradient(ellipse at 35% 20%, black 0%, transparent 50%);
    mask-image: radial-gradient(ellipse at 35% 20%, black 0%, transparent 50%);
}
.strat-card-title{
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 160%;
    letter-spacing: -0.03em;
    color: #FFFFFF;
    position: relative;
    z-index: 1;
}
@media (max-width: 1400px){
    .strat-card-title{ font-size: 16px; }
}
.strat-card-body{
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 160%;
    letter-spacing: -0.03em;
    color: rgba(255, 255, 255, 0.7);
    position: relative;
    z-index: 1;
    margin-right: 30px;
}
.strat-card-video{
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: auto;
    pointer-events: none;
    z-index: 1;
}
.strat-card-placeholder{
    flex: 1;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    margin-top: auto;
}
.strat-card-1 .strat-card-video,
.strat-card-3 .strat-card-video{
    bottom: -15px;
}
.strat-card-4{
    flex-direction: row;
    padding: 18px;
}
.strat-card-4-text{
    width: 35%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    padding: 0;
    position: relative;
    z-index: 1;
}
.strat-card-4 .strat-card-video{
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 65%;
    height: auto;
    object-fit: contain;
}
@media (max-width: 1300px){
    .strat-card-4-text{ width: 50%; }
    .strat-card-4 .strat-card-video{ width: 50%; }
}
@media (max-width: 1100px){
    .strat-cards{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }
    .strat-row{ display: contents; }
    .strat-card{
        width: auto !important;
        flex: none !important;
    }
    .strat-card-1     { grid-column: 1; grid-row: 1; height: 350px !important; }
    .strat-card-circle{ grid-column: 2; grid-row: 1; aspect-ratio: 1 / 1; height: auto !important; max-width: 350px; justify-self: center; }
    .strat-card-4     { grid-column: 1 / -1; grid-row: 2; height: 250px !important; }
    .strat-card-4 .strat-card-video{ width: 35%; }
    .strat-card-4 .strat-card-title-break{ display: none; }
    .strat-card-5     { grid-column: 1 / -1; grid-row: 3; height: 400px !important; }
    .strat-card-5 .strat-card-video{ width: 100%; }
    .strat-card-3     { grid-column: 1; grid-row: 4; height: 350px !important; }
    .strat-card-6     { grid-column: 2; grid-row: 4; height: 350px !important; }
}
@media (max-width: 850px){
    .strat-card-1     { height: 280px !important; }
    .strat-card-circle{ height: 280px !important; max-width: 280px; }
    .strat-card-3     { height: 280px !important; }
    .strat-card-6     { height: 280px !important; }
    .strat-card-5     { height: 320px !important; }
    .strat-card-4 .strat-card-video{ width: 45%; }
}
@media (max-width: 600px){
    .strat-card-4{
        flex-direction: column;
        height: auto !important;
        gap: 16px;
    }
    .strat-card-4-text{ width: 100%; padding-left: 8px; }
    .strat-card-4 .strat-card-video{
        position: relative;
        right: auto;
        top: auto;
        transform: none;
        width: 100%;
    }
    .strat-card-3 .strat-card-body{ margin-right: 0; }
}
@media (max-width: 560px){
    .strat-card-circle{ display: none; }
    .strat-card-1     { grid-column: 1 / -1; grid-row: 1; height: 340px !important; }
    .strat-card-1 .strat-card-video{ width: 100%; transform: translateY(30px); }
    .strat-card-4     { grid-row: 2; }
    .strat-card-5     { grid-row: 3; }
    .strat-card-3     { grid-column: 1 / -1; grid-row: 4; }
    .strat-card-3 .strat-card-video{ transform: translateY(60px); }
    .strat-card-6     { grid-column: 1 / -1; grid-row: 5; }
    .strat-card-6 .strat-card-video{ width: 70%; }
}
@media (max-width: 500px){
    .strat-card-5     { height: 260px !important; }
}
@media (max-width: 450px){
    .strat-card-1     { height: 280px !important; }
    .strat-card-3     { height: 240px !important; }
    .strat-card-6     { height: 240px !important; }
    .strat-card-4 .strat-card-title-break{ display: none; }
    .strat-card-4 .strat-card-body{ margin-right: 10px; }
}
.strat-card-5::after{
    display: none;
}
.strat-card-5::before{
    width: 750px;
    height: 750px;
    left: -400px;
    bottom: auto;
    top: -400px;
}
.strat-card-5-glow-br{
    position: absolute;
    width: 750px;
    height: 750px;
    right: -400px;
    bottom: -400px;
    background: radial-gradient(50% 50% at 50% 50%, rgba(87, 215, 255, 0.4) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.strat-card-5-stars.strat-card-5-stars{
    opacity: 1;
    z-index: 1;
}
.strat-card-5-stars{
    background-image:
        radial-gradient(1px 1px at 3% 95%, rgba(255,255,255,0.25) 50%, transparent 100%),
        radial-gradient(1px 1px at 7% 88%, rgba(255,255,255,0.2) 50%, transparent 100%),
        radial-gradient(1px 1px at 5% 82%, rgba(255,255,255,0.18) 50%, transparent 100%),
        radial-gradient(1px 1px at 10% 92%, rgba(255,255,255,0.15) 50%, transparent 100%),
        radial-gradient(1px 1px at 2% 75%, rgba(255,255,255,0.15) 50%, transparent 100%),
        radial-gradient(1px 1px at 8% 70%, rgba(255,255,255,0.12) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 15% 80%, rgba(255,255,255,0.7) 50%, transparent 100%),
        radial-gradient(1px 1px at 20% 75%, rgba(255,255,255,0.6) 50%, transparent 100%),
        radial-gradient(1px 1px at 12% 68%, rgba(255,255,255,0.5) 50%, transparent 100%),
        radial-gradient(2px 2px at 22% 70%, rgba(255,255,255,0.55) 50%, transparent 100%),
        radial-gradient(1px 1px at 18% 62%, rgba(255,255,255,0.45) 50%, transparent 100%),
        radial-gradient(1px 1px at 25% 65%, rgba(255,255,255,0.5) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 28% 58%, rgba(255,255,255,0.45) 50%, transparent 100%),
        radial-gradient(1px 1px at 30% 72%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1px 1px at 32% 52%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1px 1px at 35% 60%, rgba(255,255,255,0.38) 50%, transparent 100%),
        radial-gradient(2px 2px at 38% 55%, rgba(255,255,255,0.35) 50%, transparent 100%),
        radial-gradient(1px 1px at 40% 48%, rgba(255,255,255,0.35) 50%, transparent 100%),
        radial-gradient(1px 1px at 42% 62%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 45% 45%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(1px 1px at 48% 52%, rgba(255,255,255,0.28) 50%, transparent 100%),
        radial-gradient(1px 1px at 50% 40%, rgba(255,255,255,0.28) 50%, transparent 100%),
        radial-gradient(1px 1px at 52% 55%, rgba(255,255,255,0.25) 50%, transparent 100%),
        radial-gradient(2px 2px at 55% 42%, rgba(255,255,255,0.25) 50%, transparent 100%),
        radial-gradient(1px 1px at 58% 48%, rgba(255,255,255,0.22) 50%, transparent 100%),
        radial-gradient(1px 1px at 60% 35%, rgba(255,255,255,0.22) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 62% 50%, rgba(255,255,255,0.2) 50%, transparent 100%),
        radial-gradient(1px 1px at 65% 38%, rgba(255,255,255,0.2) 50%, transparent 100%),
        radial-gradient(1px 1px at 68% 45%, rgba(255,255,255,0.18) 50%, transparent 100%),
        radial-gradient(1px 1px at 70% 32%, rgba(255,255,255,0.18) 50%, transparent 100%),
        radial-gradient(1px 1px at 72% 42%, rgba(255,255,255,0.15) 50%, transparent 100%),
        radial-gradient(2px 2px at 75% 35%, rgba(255,255,255,0.15) 50%, transparent 100%),
        radial-gradient(1px 1px at 78% 28%, rgba(255,255,255,0.12) 50%, transparent 100%),
        radial-gradient(1px 1px at 80% 38%, rgba(255,255,255,0.12) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 82% 25%, rgba(255,255,255,0.1) 50%, transparent 100%),
        radial-gradient(1px 1px at 85% 30%, rgba(255,255,255,0.1) 50%, transparent 100%),
        radial-gradient(1px 1px at 88% 22%, rgba(255,255,255,0.12) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 90% 15%, rgba(255,255,255,0.15) 50%, transparent 100%),
        radial-gradient(1px 1px at 85% 12%, rgba(255,255,255,0.12) 50%, transparent 100%),
        radial-gradient(2px 2px at 92% 10%, rgba(255,255,255,0.18) 50%, transparent 100%),
        radial-gradient(1px 1px at 95% 18%, rgba(255,255,255,0.15) 50%, transparent 100%),
        radial-gradient(1px 1px at 93% 5%, rgba(255,255,255,0.2) 50%, transparent 100%),
        radial-gradient(1px 1px at 97% 12%, rgba(255,255,255,0.15) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 88% 8%, rgba(255,255,255,0.18) 50%, transparent 100%),
        radial-gradient(1px 1px at 96% 3%, rgba(255,255,255,0.2) 50%, transparent 100%),
        radial-gradient(1px 1px at 90% 25%, rgba(255,255,255,0.1) 50%, transparent 100%);
}
.strat-card-6::before{
    width: 550px;
    height: 550px;
    left: -300px;
    bottom: auto;
    top: -300px;
}
.strat-card-6::after{
    left: auto;
    right: 50%;
    bottom: auto;
    top: 50%;
    transform: translate(50%, -50%);
    background-size: 5px 5px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 0%, transparent 50%);
    mask-image: radial-gradient(ellipse at 50% 50%, black 0%, transparent 50%);
}
.strat-card-6-glow-center{
    position: absolute;
    width: 550px;
    height: 550px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(50% 50% at 50% 50%, rgba(87, 215, 255, 0.4) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.strat-card-6-stars.strat-card-6-stars{
    opacity: 1;
    z-index: 1;
}
.strat-card-6-stars{
    background-image:
        radial-gradient(1px 1px at 92% 5%, rgba(255,255,255,0.22) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 88% 10%, rgba(255,255,255,0.2) 50%, transparent 100%),
        radial-gradient(1px 1px at 95% 15%, rgba(255,255,255,0.18) 50%, transparent 100%),
        radial-gradient(1px 1px at 85% 18%, rgba(255,255,255,0.15) 50%, transparent 100%),
        radial-gradient(2px 2px at 90% 22%, rgba(255,255,255,0.18) 50%, transparent 100%),
        radial-gradient(1px 1px at 97% 8%, rgba(255,255,255,0.2) 50%, transparent 100%),
        radial-gradient(1px 1px at 82% 12%, rgba(255,255,255,0.12) 50%, transparent 100%),
        radial-gradient(1px 1px at 78% 8%, rgba(255,255,255,0.1) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 93% 28%, rgba(255,255,255,0.15) 50%, transparent 100%),
        radial-gradient(1px 1px at 75% 15%, rgba(255,255,255,0.1) 50%, transparent 100%),
        radial-gradient(1px 1px at 65% 5%, rgba(255,255,255,0.12) 50%, transparent 100%),
        radial-gradient(1px 1px at 55% 8%, rgba(255,255,255,0.1) 50%, transparent 100%),
        radial-gradient(1px 1px at 45% 3%, rgba(255,255,255,0.08) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 70% 10%, rgba(255,255,255,0.12) 50%, transparent 100%),
        radial-gradient(1px 1px at 60% 12%, rgba(255,255,255,0.1) 50%, transparent 100%),
        radial-gradient(1px 1px at 95% 35%, rgba(255,255,255,0.12) 50%, transparent 100%),
        radial-gradient(1px 1px at 88% 32%, rgba(255,255,255,0.1) 50%, transparent 100%),
        radial-gradient(1px 1px at 50% 5%, rgba(255,255,255,0.08) 50%, transparent 100%),
        radial-gradient(2px 2px at 85% 5%, rgba(255,255,255,0.2) 50%, transparent 100%),
        radial-gradient(1px 1px at 92% 18%, rgba(255,255,255,0.15) 50%, transparent 100%);
}
.strat-card-circle{
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    padding: 0;
    overflow: visible;
    contain: layout style;
}
.strat-card-circle::before,
.strat-card-circle::after{ display: none; }

.circle-text{
    position: absolute;
    inset: 0;
    padding: 20px;
    font-size: 8px;
    font-weight: 500;
    line-height: 160%;
    letter-spacing: -0.01em;
    text-align: center;
    color: rgba(255,255,255,0.3);
    overflow: hidden;
    border-radius: 50%;
    display: flex;
    align-items: center;
    -webkit-mask-image: radial-gradient(circle at 50% 50%, black 15%, transparent 48%);
    mask-image: radial-gradient(circle at 50% 50%, black 15%, transparent 48%);
    pointer-events: none;
    z-index: 0;
}
/* dot pattern */
.circle-pattern{
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-image: radial-gradient(circle, rgba(255,255,255,0.18) 0.6px, transparent 0.6px);
    background-size: 3px 3px;
    -webkit-mask-image:
        radial-gradient(circle at 15% 15%, black 0%, transparent 35%),
        radial-gradient(circle at 85% 85%, black 0%, transparent 35%);
    -webkit-mask-composite: source-over;
    mask-image:
        radial-gradient(circle at 15% 15%, black 0%, transparent 35%),
        radial-gradient(circle at 85% 85%, black 0%, transparent 35%);
    mask-composite: add;
    pointer-events: none;
    z-index: 0;
}
/* cyan glow top-left */
.circle-glow{
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 15% 15%, rgba(87, 215, 255, 0.5) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}
.circle-number{
    position: relative;
    z-index: 1;
    font-size: 140px;
    font-weight: 800;
    line-height: 0.75;
    letter-spacing: -0.06em;
    color: #fff;
    animation: float 3s ease-in-out infinite;
}
@keyframes float{
    0%, 100%{ transform: translateY(0); }
    50%{ transform: translateY(-8px); }
}
.circle-month{
    position: relative;
    z-index: 1;
    font-size: 24px;
    font-weight: 400;
    letter-spacing: -0.03em;
    color: rgba(255,255,255,0.6);
    margin-top: 8px;
}
.circle-small{
    position: absolute;
    width: 68px;
    height: 68px;
    right: 2px;
    bottom: 16px;
    border-radius: 50%;
    border: 4px solid #F0F5F7;
    object-fit: cover;
    z-index: 2;
}

/* ── sec-content ── */
.section-content{
    background: #F0F5F7;
    padding: 100px 72px;
    position: relative;
    overflow: hidden;
}
.content-glow{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 2400px;
    height: 1400px;
    pointer-events: none;
    z-index: 0;
}
.content-glow img{
    width: 100%;
    height: 100%;
    object-fit: fill;
}
.sec-content{
    max-width: 1296px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 64px;
    position: relative;
    z-index: 1;
}
.content-header{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}
.content-title{
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 55px;
    line-height: 120%;
    letter-spacing: -0.03em;
    text-align: center;
    background: linear-gradient(0deg, rgba(0,0,0,0.32), rgba(0,0,0,0.32)),
                linear-gradient(88.49deg, #1C343F -15.28%, #47CCF5 43.55%, #1C343F 103.51%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.content-desc{
    max-width: 864px;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 160%;
    letter-spacing: -0.0125em;
    text-align: center;
    color: rgba(7, 12, 12, 0.7);
}
.content-akten{
    display: flex;
    flex-direction: column;
    width: 100%;
    background: #F0F5F7;
    border-radius: 24px;
    padding: 32px;
}
.content-akte{
    background: #F0F5F7;
    border: none;
    border-radius: 20px;
    padding: 24px 24px 48px;
    position: relative;
    cursor: pointer;
    contain: style paint;
}
.content-akte::before{
    content: '';
    position: absolute;
    left: 0; right: 0;
    bottom: 0;
    height: 40%;
    background: #F0F5F7;
    border-radius: 0 0 20px 20px;
    z-index: 1;
    pointer-events: none;
    transform-origin: bottom;
    transform: scaleY(1);
    transition: transform 0.35s ease;
    will-change: transform;
}
.content-akte.active::before,
.content-akten:not(.has-active) .content-akte:first-child::before{
    transform: scaleY(0.55);
}
.content-akte:nth-child(7){
    padding-bottom: 0;
}
.content-akte:nth-child(7) .content-akte-inner{
    padding-bottom: 0;
}
.content-akte:nth-child(7)::before{
    display: none;
}
.content-akte::after{
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 1.5px;
    background: linear-gradient(98.52deg, #1C343F -22.47%, #47CCF5 55.51%, #1C343F 135.01%);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    will-change: transform;
}
.content-akte:nth-child(7)::after{
    /* voller border, kein clipping nötig */
}
.content-akte + .content-akte{
    margin-top: -38px;
}
.content-akte:nth-child(1){ z-index: 1; }
.content-akte:nth-child(2){ z-index: 2; }
.content-akte:nth-child(3){ z-index: 3; }
.content-akte:nth-child(4){ z-index: 4; }
.content-akte:nth-child(5){ z-index: 5; }
.content-akte:nth-child(6){ z-index: 6; }
.content-akte:nth-child(7){ z-index: 7; }
.content-akte-inner{
    display: flex;
    align-items: center;
    gap: 64px;
    transition: opacity 0.3s ease;
    will-change: opacity;
    position: relative;
    z-index: 2;
    padding-bottom: 15px;
}
.content-akten.has-active .content-akte:not(.active) .content-akte-inner,
.content-akten:not(.has-active) .content-akte:not(:first-child) .content-akte-inner{
    opacity: 0.35;
}
.content-akte.active .content-akte-inner,
.content-akten:not(.has-active) .content-akte:first-child .content-akte-inner{
    align-items: flex-start;
}
.content-akte-info{
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
    min-width: 0;
}
.content-badge{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 24px;
    margin-top: 3px;
    padding: 3px 0;
    border-radius: 100px;
    background: #47CCF5;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 130%;
    letter-spacing: -0.03em;
    color: #FFFFFF;
    flex-shrink: 0;
}
.content-akte-text{
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.content-akte-title{
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 23px;
    line-height: 130%;
    letter-spacing: -0.03em;
    color: #070C0C;
}
.content-akte-desc{
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 160%;
    letter-spacing: -0.0125em;
    color: rgba(7, 12, 12, 0.7);
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.35s ease, opacity 0.25s ease;
}
.content-akte-desc > span{
    overflow: hidden;
}
.content-akte.active .content-akte-desc,
.content-akten:not(.has-active) .content-akte:first-child .content-akte-desc{
    grid-template-rows: minmax(0, 1fr);
    opacity: 1;
}
.content-preview-wrap{
    width: 252px;
    flex-shrink: 0;
    display: grid;
    grid-template-rows: 80px;
    transition: grid-template-rows 0.35s ease;
}
.content-akte.active .content-preview-wrap,
.content-akten:not(.has-active) .content-akte:first-child .content-preview-wrap{
    grid-template-rows: 224px;
}
.content-preview{
    border-radius: 8px;
    background: #000506;
    position: relative;
    overflow: hidden;
    min-height: 0;
}
.content-preview-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}
.content-preview-stars{
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,0.6) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 25% 72%, rgba(255,255,255,0.5) 50%, transparent 100%),
        radial-gradient(1px 1px at 40% 35%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1px 1px at 55% 82%, rgba(255,255,255,0.55) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 70% 15%, rgba(255,255,255,0.45) 50%, transparent 100%),
        radial-gradient(1px 1px at 85% 55%, rgba(255,255,255,0.35) 50%, transparent 100%),
        radial-gradient(1px 1px at 18% 88%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(1px 1px at 62% 48%, rgba(255,255,255,0.25) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 35% 60%, rgba(255,255,255,0.4) 50%, transparent 100%),
        radial-gradient(1px 1px at 78% 30%, rgba(255,255,255,0.3) 50%, transparent 100%),
        radial-gradient(1px 1px at 48% 12%, rgba(255,255,255,0.5) 50%, transparent 100%),
        radial-gradient(1px 1px at 92% 75%, rgba(255,255,255,0.2) 50%, transparent 100%);
    opacity: 0.5;
}
.content-preview-glow{
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 80%, rgba(87, 215, 255, 0.35) 0%, transparent 50%);
    pointer-events: none;
}
.content-preview-pattern{
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,0.15) 0.6px, transparent 0.6px);
    background-size: 4px 4px;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(circle at 20% 80%, black 0%, transparent 30%);
    mask-image: radial-gradient(circle at 20% 80%, black 0%, transparent 30%);
}

/* ── sec-zusammen ── */
.section-zusammen{
    background: #000506;
    padding: 100px 72px;
    padding-top: 180px;
    position: relative;
    overflow: hidden;
}
@media (max-width: 900px){
    .section-zusammen{ padding-top: 80px; }
}
@media (max-width: 600px){
    .section-zusammen{ padding-top: 50px; padding-bottom: 50px; }
}
.zusammen-glow{
    position: absolute;
    width: 1200px;
    height: 600px;
    left: calc(50% - 600px);
    bottom: -200px;
    background: radial-gradient(50% 50% at 50% 50%, rgba(71, 204, 245, 0.28) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
    filter: blur(80px);
}
.sec-zusammen{
    max-width: 1296px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 64px;
    position: relative;
    z-index: 1;
}
.zusammen-pille{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border-radius: 100px;
    border: 1px solid rgba(71, 204, 245, 0.25);
    background: rgba(71, 204, 245, 0.06);
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 130%;
    letter-spacing: 0.04em;
    color: #47CCF5;
}
.zusammen-pille-dot{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #47CCF5;
    box-shadow: 0 0 8px rgba(71, 204, 245, 0.6);
}
.zusammen-cards{
    display: flex;
    gap: 52px;
    width: 100%;
    justify-content: center;
}
.zusammen-card{
    width: 416px;
    background: #FFFFFF;
    border-radius: 12px;
    position: relative;
    transform: scale(1);
    transition: transform 0.5s cubic-bezier(0.16,1,0.3,1);
    will-change: transform;
    z-index: 2;
    cursor: pointer;
}
.zusammen-card::before,
.zusammen-card::after{
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    pointer-events: none;
    z-index: 0;
}
.zusammen-card::before{
    background: radial-gradient(circle at 0% 0%, rgba(71, 204, 245, 0.25) 0%, transparent 65%);
}
.zusammen-card::after{
    background: radial-gradient(circle at 100% 100%, rgba(71, 204, 245, 0.2) 0%, transparent 50%);
}
.zusammen-card-inner{
    padding: 40px 36px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: relative;
    z-index: 1;
    border-radius: 12px;
}
.zusammen-card-title{
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 35px;
    line-height: 120%;
    letter-spacing: -0.03em;
    background: linear-gradient(90deg, #1C343F 0%, #4988A5 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
@media (max-width: 1400px){
    .zusammen-card-title{ font-size: 23px; }
}
.zusammen-card-text{
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 160%;
    letter-spacing: -0.0125em;
    color: rgba(7, 12, 12, 0.7);
}
.zusammen-divider{
    width: 100%;
    height: 1px;
    background: rgba(7, 12, 12, 0.12);
}
.zusammen-checks{
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.zusammen-check{
    display: flex;
    align-items: center;
    gap: 12px;
}
.zusammen-check-icon{
    flex-shrink: 0;
}
.zusammen-check p{
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    letter-spacing: -0.0125em;
    color: rgba(7, 12, 12, 0.7);
}
.zusammen-cta{
    width: 100%;
    margin-top: 8px;
}
.zusammen-card-popular{
    position: relative;
    transform: scale(1.04);
    z-index: 1;
}
.zusammen-popular-badge{
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
    width: 150px;
    padding: 10px;
    border-radius: 8px;
    background:
        linear-gradient(0deg, rgba(28, 52, 63, 0.25), rgba(28, 52, 63, 0.25)),
        linear-gradient(314.84deg, rgba(255, 255, 255, 0.04) -10.08%, rgba(255, 255, 255, 0.0096) 126.86%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 17px;
    line-height: 120%;
    letter-spacing: -0.01em;
    color: #FFFFFF;
    text-align: center;
    white-space: nowrap;
    z-index: 1;
}
.zusammen-card-video{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 225%;
    height: 160%;
    transform: translate(-50%, -50%);
    object-fit: fill;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.16,1,0.3,1);
    will-change: opacity;
}
.zusammen-card-popular .zusammen-card-video{
    opacity: 1;
}
.zusammen-popular-icon{
    position: absolute;
    top: -18px;
    right: -18px;
    width: 30px;
    height: 30px;
}
.zusammen-popular-badge::before{
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 8px;
    padding: 1px;
    background: linear-gradient(148.05deg, rgba(71, 204, 245, 0.05) -2.36%, #47CCF5 49.5%, rgba(71, 204, 245, 0.05) 103.43%);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
@media (max-width: 1200px){
    .zusammen-card{ width: 340px; }
    .zusammen-cards{ gap: 56px; }
    .zusammen-card-inner{ padding: 32px 28px; gap: 20px; }
    .zusammen-card-video{ width: 225%; height: 160%; }
    .zusammen-card-text br{ display: none; }
    .zusammen-popular-badge{ width: 130px; font-size: 15px; padding: 8px; }
    .zusammen-popular-icon{ width: 24px; height: 24px; top: -14px; right: -14px; }
}
@media (max-width: 1000px){
    .zusammen-card{ width: 340px; }
    .zusammen-cards{ gap: 32px; }
    .zusammen-card-inner{ padding: 24px 20px; gap: 16px; }
    .zusammen-card-text{ font-size: 14px; }
    .zusammen-check p{ font-size: 14px; }
    .zusammen-popular-badge{ width: 110px; font-size: 13px; padding: 6px; }
    .zusammen-popular-icon{ width: 22px; height: 22px; top: -12px; right: -12px; }
}
@media (max-width: 900px){
    .zusammen-cards{ flex-direction: column; align-items: center; gap: 80px; }
    .zusammen-card-title{ padding-top: 10px; }
}
@media (max-width: 600px){
    .zusammen-card{ width: 310px; }
    .zusammen-card-inner{ padding: 22px 18px; }
}
@media (max-width: 500px){
    .zusammen-card{ width: 295px; }
    .zusammen-card-inner{ padding: 20px 16px; gap: 15px; }
    .zusammen-cta{ font-size: 14px; }
    .zusammen-popular-badge{ width: 120px; font-size: 14px; padding: 7px; right: 40px; }
}
@media (max-width: 400px){
    .zusammen-card{ width: 280px; }
    .zusammen-card-inner{ padding: 18px 14px; gap: 14px; }
    .zusammen-card-title{ font-size: 20px; }
    .zusammen-card-text{ font-size: 13px; }
    .zusammen-check p{ font-size: 13px; }
    .zusammen-popular-badge{ width: 100px; font-size: 12px; padding: 5px; }
    .zusammen-popular-icon{ width: 20px; height: 20px; top: -10px; right: -10px; }
}

/* ── sec-content (Stack 02) ── */
.section-content{
    background: #F0F5F7;
    padding: 100px 84px;
    position: relative;
    overflow: hidden;
}
.content-glow{
    position: absolute;
    width: 1300px;
    height: 500px;
    left: 50%;
    top: 50px;
    transform: translateX(-50%);
    opacity: 0.55;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}
.sec-content{
    max-width: 1272px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 64px;
    position: relative;
    z-index: 1;
}
.content-header{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}
.content-title{
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 44px;
    line-height: 120%;
    letter-spacing: -0.03em;
    text-align: center;
    background: linear-gradient(0deg, rgba(0,0,0,0.32), rgba(0,0,0,0.32)),
                linear-gradient(88.49deg, #1C343F -15.28%, #47CCF5 43.55%, #1C343F 103.51%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}
.content-tabs-wrapper{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
}
.content-tabs{
    display: inline-flex;
    justify-content: center;
    gap: 8px;
}
.content-tab{
    position: relative;
    min-width: 200px;
    height: 54px;
    padding: 16px 32px;
    background: transparent;
    border: 1.5px solid #275A6D;
    border-radius: 0;
    color: #246174;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 140%;
    letter-spacing: -0.03em;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.3s ease, box-shadow 0.3s ease;
}
.content-tabs > .content-tab:first-child{
    border-radius: 999px 0 0 999px;
}
.content-tabs > .content-tab:last-child{
    border-radius: 0 999px 999px 0;
}
.content-tab[data-tab="branding"]:not(.active),
.content-tab[data-tab="leadmagneten"]:not(.active),
.content-tab[data-tab="broschueren"]:not(.active),
.content-tab[data-tab="videoproduktionen"]:not(.active){
    border-color: transparent;
    background: transparent;
}
.content-tab[data-tab="branding"]::before,
.content-tab[data-tab="leadmagneten"]::before,
.content-tab[data-tab="broschueren"]::before,
.content-tab[data-tab="videoproduktionen"]::before{
    content: '';
    position: absolute;
    inset: -1.5px;
    border-radius: inherit;
    padding: 1.5px;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.content-tab[data-tab="branding"]::before,
.content-tab[data-tab="leadmagneten"]::before{
    background: linear-gradient(90deg, #32809A 0%, #275A6D 100%);
}
.content-tab[data-tab="broschueren"]::before,
.content-tab[data-tab="videoproduktionen"]::before{
    background: linear-gradient(90deg, #275A6D 0%, #32809A 100%);
}
.content-tab.active::before{
    opacity: 0;
}
.content-tab[data-tab="emails"],
.content-tab[data-tab="fotoshootings"]{
    color: #235C6E;
}
.content-tab:hover{
    color: #1A3A45;
}
.content-tab.active{
    background: #47CCF5;
    color: #FFFFFF;
    box-shadow: 2px 6px 52px 0px #47CCF552;
    border-color: #47CCF5;
}
.content-panels{
    width: 100%;
    position: relative;
}
.content-panel{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 80px;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.28s ease, transform 0.28s ease;
}
.content-panel.content-panel-fading{
    opacity: 0;
    transform: translateY(10px);
}
.content-panel-image{
    transition: opacity 0.28s ease;
}
.content-panel.content-panel-fading .content-panel-image{
    opacity: 0;
}
.content-panel-left{
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 668px;
}
.content-panel-title{
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 44px;
    line-height: 130%;
    letter-spacing: -0.03em;
    color: #151A28;
    margin: 0;
}
.content-panel-desc{
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 160%;
    letter-spacing: -0.0125em;
    color: #363F59;
    margin: 0;
}
.content-panel-image{
    width: 524px;
    height: 466px;
    object-fit: cover;
    border-radius: 12px;
    flex-shrink: 0;
}

@media (max-width: 1400px){
    .content-title{ font-size: 40px; }
    .content-panel-title{ font-size: 40px; }
    .content-panel-desc{ font-size: 16px; }
}
@media (max-width: 1300px){
    .content-tabs{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        width: 100%;
        max-width: 720px;
    }
    .content-tab{
        flex: 0 1 calc(33.333% - 6px);
        min-width: 0;
        border-radius: 0;
    }
    /* Row 1 (6 tabs → 3+3): outer positions are 1, 3, 4, 6 */
    .content-tabs:nth-child(1) > .content-tab:nth-child(1),
    .content-tabs:nth-child(1) > .content-tab:nth-child(4){ border-radius: 999px 0 0 999px; }
    .content-tabs:nth-child(1) > .content-tab:nth-child(3),
    .content-tabs:nth-child(1) > .content-tab:nth-child(6){ border-radius: 0 999px 999px 0; }
    /* Row 2 (5 tabs → 3+2): outer positions are 1, 3, 4, 5 */
    .content-tabs:nth-child(2) > .content-tab:nth-child(1),
    .content-tabs:nth-child(2) > .content-tab:nth-child(4){ border-radius: 999px 0 0 999px; }
    .content-tabs:nth-child(2) > .content-tab:nth-child(3),
    .content-tabs:nth-child(2) > .content-tab:nth-child(5){ border-radius: 0 999px 999px 0; }
    /* Zusätzliche Gradient-Border-Tabs an den neuen äußeren Positionen */
    .content-tab[data-tab="funnels"]:not(.active),
    .content-tab[data-tab="werbeanzeigen"]:not(.active),
    .content-tab[data-tab="skripte"]:not(.active),
    .content-tab[data-tab="fotoshootings"]:not(.active){
        border-color: transparent;
        background: transparent;
    }
    .content-tab[data-tab="funnels"]::before,
    .content-tab[data-tab="werbeanzeigen"]::before,
    .content-tab[data-tab="skripte"]::before,
    .content-tab[data-tab="fotoshootings"]::before{
        content: '';
        position: absolute;
        inset: -1.5px;
        border-radius: inherit;
        padding: 1.5px;
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
                mask-composite: exclude;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }
    .content-tab[data-tab="funnels"]::before,
    .content-tab[data-tab="skripte"]::before{
        background: linear-gradient(90deg, #275A6D 0%, #32809A 100%);
    }
    .content-tab[data-tab="werbeanzeigen"]::before,
    .content-tab[data-tab="fotoshootings"]::before{
        background: linear-gradient(90deg, #32809A 0%, #275A6D 100%);
    }
}
@media (max-width: 850px){
    .content-tab{ font-size: 14px; }
}
@media (max-width: 700px){
    .content-tab{ height: 44px; padding: 10px 14px; font-size: 14px; }
}
@media (max-width: 600px){
    .content-tab{ flex: 0 1 calc(50% - 4px); }
    .content-tab:not(.active){ border-color: transparent; background: transparent; }
    /* Reset rounding from 1300px block */
    .content-tabs > .content-tab{ border-radius: 0; }
    /* Row 1 (6 tabs → 3 pairs): odd = round-L, even = round-R */
    .content-tabs:nth-child(1) > .content-tab:nth-child(odd){ border-radius: 999px 0 0 999px; }
    .content-tabs:nth-child(1) > .content-tab:nth-child(even){ border-radius: 0 999px 999px 0; }
    /* Row 2 (5 tabs → 2 pairs + 1 alone) */
    .content-tabs:nth-child(2) > .content-tab:nth-child(1),
    .content-tabs:nth-child(2) > .content-tab:nth-child(3){ border-radius: 999px 0 0 999px; }
    .content-tabs:nth-child(2) > .content-tab:nth-child(2),
    .content-tabs:nth-child(2) > .content-tab:nth-child(4){ border-radius: 0 999px 999px 0; }
    .content-tabs:nth-child(2) > .content-tab:nth-child(5){ border-radius: 999px; }
    /* Gradient ::before für alle Tabs */
    .content-tab::before{
        content: '';
        position: absolute;
        inset: -1.5px;
        border-radius: inherit;
        padding: 1.5px;
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
                mask-composite: exclude;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }
    /* Gradientrichtung pro Position */
    .content-tabs:nth-child(1) > .content-tab:nth-child(odd)::before,
    .content-tabs:nth-child(2) > .content-tab:nth-child(odd)::before{
        background: linear-gradient(90deg, #32809A 0%, #275A6D 100%);
    }
    .content-tabs:nth-child(1) > .content-tab:nth-child(even)::before,
    .content-tabs:nth-child(2) > .content-tab:nth-child(even)::before{
        background: linear-gradient(90deg, #275A6D 0%, #32809A 100%);
    }
}
@media (max-width: 450px){
    .content-tab{ height: 40px; padding: 8px 10px; }
}
@media (max-width: 1000px){
    .section-content{ padding-top: 20px; padding-bottom: 60px; }
    .sec-content{ gap: 40px; }
    .content-panel{ flex-direction: column; gap: 32px; }
    .content-panel-image{ width: 100%; height: auto; max-width: 524px; aspect-ratio: 524 / 466; }
    .content-panel-left{ max-width: 100%; }
}
@media (max-width: 800px){
    .section-content{ padding-bottom: 0; }
}
@media (max-width: 500px){
    .section-balls{ margin-top: -220px; }
}
@media (max-width: 450px){
    .section-balls{ margin-top: -250px; }
}
@media (max-width: 375px){
    .section-balls{ margin-top: -280px; }
}
@media (max-width: 700px){
    .section-content{ padding-left: 24px; padding-right: 24px; }
    .content-panel-image{ width: 100%; max-width: none; }
}
@media (max-width: 600px){
    .content-title{ font-size: 32px; }
    .content-panel-title{ font-size: 32px; }
    .content-panel{ flex-direction: column-reverse; }
}


/* Hero-Boxen: aspect-ratio auf Container reserviert Platz für CLS */
.hero-box-ali{ aspect-ratio: 1200 / 1753; }
.hero-box-klara{ aspect-ratio: 1200 / 1821; }