@import url("./fonts.css");


:root {
    --clr-white:        #ffffff;
    --clr-lightgray:    #F5F5F7;
    --clr-gray:         #E6EAED;
    --clr-darkgray:     #B0BABF;
    --clr-darkblue:     #07394C;

    
    --color: var(--clr-darkblue);
    --color-hov: var(--clr-gray);

    --ff-heading: 'Roboto', sans-serif;
    --ff-txt: var(--ff-heading);

    --fw-heading: var(--fw-bold);
    --fw-txt: var(--fw-medium);

    --fs-heading-1: clamp(2.5rem, 0.069rem + 7.778vw, 6.875rem); /* 50 -> 125 */
    --fs-heading-2: clamp(1.563rem, 0.521rem + 3.333vw, 3.438rem); /* 25 -> 55 */
    --fs-heading-3: clamp(1.25rem, 0.556rem + 2.222vw, 2.5rem); /* 20 -> 40 */
    --fs-heading-4: clamp(1.25rem, 0.729rem + 1.667vw, 2.188rem); /* 20 -> 35 */
    --fs-heading-5: clamp(0.938rem, 0.66rem + 0.889vw, 1.438rem); /* 15 -> 23 */

    --fs-txt-big: clamp(1.25rem, 0.729rem + 1.667vw, 2.188rem); /* 20 -> 35 */
    --fs-txt-small: clamp(1rem, 0.861rem + 0.444vw, 1.25rem); /* 16 -> 20 */
    --fs-txt: var(--fs-txt-big);
    --full-width: 2800px;
    --content-width: calc(var(--full-width) - 100px);
    --section-padding: clamp(3.125rem, 1.389rem + 5.556vw, 6.25rem); /* 50px -> 100px */
    --section-padding: clamp(3.125rem, -2.083rem + 16.667vw, 12.5rem); /* 50px -> 200px */

    --clr-cookie: var(--clr-gray);
    --clr-cookie-hov: linear-gradient(90deg, #A67AB2cc, #06a6decc, #72BE96cc);
    font-weight: 500;
}

/* Allgemein */
.h1 {
    text-transform: uppercase;
    font-size: var(--fs-heading-1);
    font-weight: 900;
    line-height: 0.9;
}
h1 {
    text-transform: uppercase;
    font-weight: 900;
    /* white-space: nowrap; */
}
h2, h3 {
    font-weight: 900;
}
h1 {
    line-height: 1;
}
p {
    line-height: 1.3;
    font-weight: 600;
}
li {
    font-weight: 500;
}
.txt-small p, .txt-small li{
    font-size: var(--fs-txt-small);
    line-height: 1.3;
    font-weight: 500;
}
p strong {
    font-weight:900;
}
img {
    font-size: 16px;
}
section {
    position: relative;
}
.txt-container {
    z-index: 2;
}

.hidden {
    display: none;
}
.pill-btn {
    position: relative;
    display: block;
    width: fit-content;
    padding: clamp(0.938rem, 0.764rem + 0.556vw, 1.25rem) clamp(1.25rem, 0.729rem + 1.667vw, 2.188rem); /* 15 -> 20 und 20 -> 35 */
    background-color: var(--clr-gray);
    color: var(--color);
    border-radius: 50px;
    font-size: calc(var(--fs-txt-small) - 2px);
    font-weight: 600;
    text-transform: uppercase;
    bottom: 0px;
    overflow: hidden;
}
.bg-gray .pill-btn {
    background-color: var(--clr-white);
}
.colorChange .pill-btn {
    background-color: var(--prevColor);
}
.btn-hover {
    position: relative;
    overflow: hidden;
    transition: all 0.25s ease;
}
.btn-hover:hover {
    background: #72BE96cc !important;
    color: var(--clr-white);
}
.btn-hover:hover p {
    color: var(--clr-white);
}
.btn-hover:hover .arrow-Icon {
    background-color: var(--clr-white);
}
.btn-hover:hover::after {
    content: "";
}

.btn-hover::after {
    background: radial-gradient(circle closest-side, #A67AB2cc, #06a6decc, transparent);
    display: block;
    position: absolute;
    height: var(--radius);
    width: var(--radius);
    left: calc(-0.5 * var(--radius));
    top: calc(-0.5 * var(--radius));
    z-index: -1;
    transform: translate(var(--offset-X), var(--offset-Y));
}
.btn-hover.circle-btn::after {
    z-index: 0;
}
.btn-hover.circle-btn > * {
    z-index: 1;
}
.btn-hover-txt:hover {
    background: linear-gradient(90deg, #A67AB2cc, #06a6decc);
    background-clip: border-box;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: all 0.25s ease;
}
.txt-effect {
    display: block;
    overflow: hidden;
    position: relative;
    margin: 0px;
}
.txt-effect:hover .char .bot {
    background: linear-gradient(90deg, #5E48A4cc, #2593D0cc);
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
footer .txt-effect:hover .char .bot {
    background: linear-gradient(90deg, #A77BB5cc, #E4449Fcc);
    background-clip: text;
}
.txt-effect .char {
    display: inline-block;
    height: fit-content;
    position: relative;  
}
.txt-effect .char .bot {
    position: absolute;
}
.txt-gradient {
    background: linear-gradient(90deg, #5E48A4cc, #2593D0cc);
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.circle-btn {
    background-color: var(--clr-gray);
    border-radius: 50px;
    width: clamp(3.125rem, 2.604rem + 1.667vw, 4.063rem); /* 50 -> 65 */
    height: clamp(3.125rem, 2.604rem + 1.667vw, 4.063rem); /* 50 -> 65 */
    width: clamp(3.125rem, 2.778rem + 1.111vw, 3.75rem);
    height: clamp(3.125rem, 2.778rem + 1.111vw, 3.75rem);
    font-size: 18px;
}
.gray_header header {
    background-color: var(--clr-gray);
}
.gray_header .circle-btn {
    background-color: var(--clr-white);
}
header.mobnav-active .circle-btn {
    background-color: var(--clr-white);
}
.search-Icon {
    --url: url('/media/suche.svg');
    width: 16px;
    height: 16px;
}
.pill-btn span {
    margin-left: 5px;
}
.arrow-Icon {
    --url: url('/media/pfeil.svg');
    width: 12px;
    height: 12px;
}
.search-Icon, .arrow-Icon {
    display: inline-block;
    background: var(--color);
    mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-image: var(--url);
    -webkit-mask-image: var(--url);
}
.cross-Icon {
    position: relative;
}
.cross-Icon::before, .cross-Icon::after {
    content: "";
    position: absolute;
    top: 0px;
    left: -10px;
    height: 1px;
    width: 20px;
    border-bottom: 2px solid var(--color);
}
.circle-btn:hover .cross-Icon::before, .circle-btn:hover .cross-Icon::after {
    z-index: 2;
    border-color: var(--clr-white);
}
.cross-Icon::before {
    transform: rotate(45deg);
}
.cross-Icon::after {
    transform: rotate(-45deg);
}
.bg-container {
    z-index: 1;
}
.tiltet-container {
    position: absolute;
    transform: rotate(-25deg);
    width: 140vw;
    height: 5vw;
    max-width: calc(var(--full-width) * 1.4);
    max-height: calc(var(--full-width) * 0.05);
    z-index: 1;
    pointer-events: none;
}
.bg-gray {
    background-color: var(--clr-gray);
}
.bg-slope-w {
    width: 100%;
    height: 100%;
    background: linear-gradient(
        -25deg, var(--clr-white) 0%,var(--clr-white) 49.9%, var(--clr-gray) 50%, var(--clr-gray) 100%
    );
}
.bg-slope-g {
    width: 100%;
    height: 100%;
    background: linear-gradient(
        -25deg, var(--clr-gray) 0%,var(--clr-gray) 49.9%, var(--clr-white) 50%, var(--clr-white) 100%
    );
}
.colorChange {
    --nextColor: var(--clr-white);
    --prevColor: var(--clr-white);
    background: linear-gradient(180deg, var(--prevColor), var(--nextColor));
    background-color: var(--prevColor);
}
.background {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    background-color: var(--nextColor);
    opacity: 0;
}
.arrow {
    overflow: hidden;
    position: relative;
    width: 50px;
    height: 50px;
}
.arrow-Icon {
    transition: all 0.25s ease;
}
button:hover .arrow .arrow-Icon {
    background: linear-gradient(90deg, #5E48A4cc, #2593D0cc);
}
.arrow-Icon.arrow_1 {
    position: relative;
    top: 0px;
}
.arrow-Icon.arrow_2 {
    position: absolute;
    top: -25px
}
button:hover .arrow .arrow_1 {
    top: 50px;
}
button:hover .arrow .arrow_2 {
    top: 18px;
}
.flip-button {
    position: relative;
}
.flip-button > * {
    position: absolute;
    z-index: 2;
    backface-visibility: hidden;
    transition: all 0.5s ease;
    transform-style: preserve-3d;
}
.flip-button > :first-child {
    transform: rotateY(0deg);
}
.flip-button > :last-child{
    transform: rotateY(180deg);
}
header.mobnav-active .burger .burger-container {
    transform: rotateY(180deg);
}
header.mobnav-active .burger .close-burger {
    transform: rotateY(0deg);
}
header.search-active .toggle-search .open-search {
    transform: rotateY(180deg);
}
header.search-active .toggle-search .close-search {
    transform: rotateY(0deg);
}

/* Main, Body, etc. */
html {
    overflow-x: hidden;
    scroll-behavior: smooth;
}
@media (min-width: 1600px) {
    html {
        overflow-x: visible;
    }
}
body {
    /* font-weight: 800; */
    max-width: 100%;
    overflow-x: hidden;
    --radius: 300px;
    --header-height: 130px;
}
main {
    margin-top: var(--header-height);
    min-height: 500px;
}

/* z-index */
h1 {
    z-index: 3;
}
a, button {
    z-index: 2;
}
header .logo-container, header .desktop-navi {
    z-index: 90;
}
header .mobile {
    z-index: 10;
}
.img-text-heading-modul .tiltet-container, .img-text-heading-modul .txt-container {
    z-index: 2;
}
footer .links .link-container {
    z-index: 2;
}
.stripe.red-yellow, .stripe.stripe.blue-blue, .stripe.stripe.blue-yellow {
    z-index: 2;
}


/* Header  */
header {
    --height-nav-open: 0px;
    padding-top: 20px;
    padding-bottom: calc(20px + var(--height-nav-open));
    background-color: var(--clr-white);
    position: fixed;
    top: 0px;
    width: 100%;
    z-index: 10;
    max-width: 100vw;
    transition: padding 0.5s ease;
    /* background: linear-gradient(#fffb, #fff0 75% ); */
}
header > .content-width--full {
    padding: 0px var(--content-padding);
    align-items: start;
}
header nav.desktop {
    gap: 50px;
    margin-top: 20px;
}
header .desktop {
    height: fit-content;
    font-size: 16px;
}
header .desktop > a {
    color: var(--clr-darkblue);
    margin-right: 40px;
}
header .desktop-navi {
    height: fit-content;
}
header .level-1 button {
    position: relative;
}
header .level-1 button > p {
    padding-right: 1.25em;
}
header .level-1 button::after {
    --border: 2px solid var(--color);
    content: '';
    position: absolute;
    right: 0.2em;
    bottom: 0.45em;
    width: 0.6em;
    height: 0.6em;
    border-right: var(--border);
    border-bottom: var(--border);
    transform: rotate(45deg);
    pointer-events: none;
    transition: all 0.25s ease;
}
header .level-1 button.active::after {
    transform: rotate(225deg);
    bottom: 0.2em;
}
header .level-1.active button {
    background: linear-gradient(90deg, #5E48A4cc, #2593D0cc);
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
header .level-1.active button::after,
header .level-1 button:hover::after {
    border-color: #2593D0cc;
}

header .level-2 {
    position: absolute;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 0px;
    transition: all 0.5s ease;
}
header .level-2.active, header .level-2.transition {
    display: flex;
}
header .level-2.active {
    height: var(--height);
}
header .level-2.transition {
    height: 0px;
}
header .level-2 .lv2-container {
    padding-top: 10px;
    gap: 5px;
}
header .level-2 .lv2-container a {
    -webkit-text-fill-color: var(--color);
}
header .level-2 .lv2-container a.active  {
    background: linear-gradient(90deg, #5E48A4cc, #2593D0cc);
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
header .mobile .level-2 {
    position: relative;
}
header .logo-textbox {
    overflow: hidden;
}
header .logo {
    width: min(300px, 70vw);
    margin-right: 20px;
}
header .logo.light {
    display: none;
}
header .logo-txt {
    position: relative;
    right: 0px;
    transition: right 0.5s ease;
}
header .circle-btn {
    width: 30px;
    height: 30px;
    background-color: var(--clr-gray);
}
header .buttons {
    z-index: 100;
    gap: 10px;
}

header .burger {
    width: 40px;
    height: 40px;
    z-index: 100;
    margin-left: 10px;
}
header .burger-container > div {
    height: 3px;
    margin: 2px 0px;
    width: 19px;
    background-color: var(--color);
}
header .burger-container:hover > div {
    background-color: var(--clr-white);
}
header .burger .cross-Icon {
    position: relative;
    /* width: 100%;
    height: 100%; */
}
header .burger .burger-container,
header .burger .close-burger {
    height: 40px;
    width: 40px;
    border-radius: 50px;
    top: 0px;
}

/* Header mobile */
header .mobile {
    transition: left 0.5s ease;
    position: fixed;
    height: 100vh;
    width: 100vw;
    top: 0px;
    left: 0px;
    background-color: var(--clr-gray);
    overflow: hidden;
}
header .mobile:not(.active) {
    left: 100%
}
header.mobnav-active .desktop-navi {
    right: var(--content-padding);
}
header .mobile > .content-width {
    height: 100%;
    align-items: center;
    justify-content: end;
}
header .mobile .nav-links{
    margin-right: 50px;
}
header .mobile .level-1 {
    width: fit-content;
}
header .mobile button p {
    line-height: 1;
    font-weight: 500;
}
header .mobile .level-1 > a {
    margin-bottom: 5px;
}
header .mobile .tiltet-container {
    height: max(50vw, 35vh);
    max-height: calc(var(--full-width) * 0.5);
    top: 50%;
    left: 5%;
    transform: translateY(-50%) rotate(-25deg);
}

/* header lang */
header .lang-box {
    transition: all 0.25s ease;
    overflow: hidden;
}
header .lang {
    position: relative;
    height: 100%;
    width: 100%;
    right: 0px;
}
header .lang-box:hover .lang {
    right: 100%;
}
header .lang p {
    color: unset;
    padding: 20px;
    font-size: 16px;
}
header .lang.active {
    order: 1;
    pointer-events:painted;
}
header .lang:not(.active) {
    order: 2;
}
header .buttons .circle-btn::after,
header .burger ::after {
    --radius: 75px;
}
.toggle-search {
    top: 0px;
    width: 30px;
    height: 30px;
}
header .toggle-search:hover .search-Icon {
    background-color: var(--clr-white);
}
header .closeNav {
    position: absolute;
    height: 100vh;
    width: 100vw;
    margin-top: var(--height-nav-open);
}
header .closeNav:not(.open) {
    pointer-events: none;
}

/*search window */
header .search-window {
    /* display: none; */
    position: absolute;
    height: 100vh;
    width: 100vw;
    left: calc(100% + 100px);
    top: 0px;
    z-index: 10;
    background: var(--clr-lightgray);
    transition: left 0.5s ease;
    overflow: scroll;
}
header.search-active .search-window {
    left: 0px;
}
header.search-active .search-window,
header.search-transition .search-window {
    display: flex;
}
header.search-active-fast .search-window {
    transition: left 0s ease;
    left: 0px;
}
header .header-search {
    position: relative;
    border-bottom: 2px solid var(--clr-gray);
    max-width: 1500px;
}
header .header-search .form-group {
    width: 100%;
}

header .search-container {
    position: relative;
    top: 30%;
    width: 80%;
}
header .search-container h2 {
    margin-bottom: 20px;
    position: absolute;
    z-index: 1;
    opacity: 1;
    color: var(--clr-darkgray);
    pointer-events: none;
}
header .search-container h2.active {
    opacity: 0;
}
header .search-container input {
    width: calc(100% - 50px);
    max-width: 1600px;
    margin-bottom: 10px;
    outline: none;
    font-size: var(--fs-heading-2);
    font-weight: 600;
    color: var(--clr-darkblue);
    background: transparent;
}
header .search-container .search-button {
    border-radius: 50px;
    margin-left: 10px;
    height: fit-content;
    position: absolute;
    right: 0px;
}
header .search-container .search-button .search-icon {
    position: relative;
}
header .search-container .suggestions {
    margin-top: 20px;
    margin-bottom: 20px;
    gap: 30px;
}
header .search-container .suggestions > * {
    margin: 5px 0px;
}
header .search-container .suggestions h4{
    margin-bottom: 0px;
}
header .search-container .suggestions input{
    display: none;
}
header .search-container .suggestions p {
    margin: 0;
}
header .search-container .result-teaser {
    max-height: 4em;
    overflow: hidden;
}
header .search-container .search-result-container .padding-bot {
    height: 50px;
}

/* IMG modul */
.img-text-heading-modul.top-section {
    padding-bottom: clamp(0rem, -10.417rem + 33.333vw, 18.75rem); /* 0 -> 300 */
}
.img-text-heading-modul .top-container {
    /* overflow: hidden; */
    position: relative;
}
.img-text-heading-modul .img-container{
    position: relative;
    min-width: 800px;
    opacity: 0;
    min-height: 80vh;
}
.img-text-heading-modul .img-container.lower-height {
    max-height: 850px;
    min-height: unset;
}
.img-text-heading-modul.no-img .img-container {
    /* margin-top: -20vh; */
    margin-top: -110px;
    min-height: 500px;
}
.img-text-heading-modul .img-container img, .img-text-heading-modul .img-container video{
    width: 100%;
    min-height: 80vh;
    object-fit: cover;
}
.img-text-heading-modul.has-img .img-container::after{
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #FF648422, #5EBEE622);
}
.img-text-heading-modul .tiltet-container {
    background-color: var(--clr-white);
    top: calc(70% - 50px + clamp(0rem, -4.167rem + 8.333vw, 3.125rem));
    left: calc(-10% - 150px + clamp(0rem, -4.167rem + 8.333vw, 3.125rem));
    height: 100vw;
    /* height: 20vw; */
    top: 67%;
    left: 0%;
    max-height: calc(5 * clamp(12.5rem, -6.25rem + 20vw, 18.75rem)); /* 200 -> 300 (1500 -> 2000) */
    /* max-height: unset; */
    z-index: 0;
}
.img-text-heading-modul .tiltet-container > .stripe-container {
    height: 10%;
    height: 2%;
}
.img-text-heading-modul.no-img .tiltet-container {
    background-color: transparent;
}
.img-text-heading-modul .background-triangle {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        -25deg, var(--clr-white) 0%,var(--clr-white) 49.9%, transparent 50%, transparent 100%
    );
    bottom: -180px;
    /* transform: translateY(calc(-90% + 110px - clamp(0rem, -31.25rem + 100vh, 6.25rem))); cl: 250 -> 0 (900 -> 1000) */
    /* transform: translateY(-65vh);  */
}
.img-text-heading-modul .tiltet-container h1{
    position: absolute;
    margin: auto;
    width: fit-content;
    bottom: 100%;
    color: var(--clr-white);
    margin-bottom: 0.3em;
    left: 45%;
    max-width: calc(10 * var(--fs-heading-1));
    transform: translateX(-50%);
}
.img-text-heading-modul.no-img .tiltet-container h1{
    color: var(--clr-darkblue);
}
.img-text-heading-modul .tiltet-container > img {
    position: absolute;
    bottom: 100%;
    margin-bottom: 40px;
    max-height: 300px;
    width: 50%;
    position: absolute;
    z-index: 1;
    max-width: 1000px;
}
.img-text-heading-modul.has-img .tiltet-container > img {
    filter: brightness(0) invert(1);
}

.img-text-heading-modul .txt-container {
    position: relative;
    max-width: min(50%, 1000px);
    left: clamp(12.5rem, -17.045rem + 59.091vw, 93.75rem);
    margin-top: calc(-500px + clamp(0rem, -7.143rem + 14.286vw, 12.5rem)); /* -300 -> -500 (800 -> 2200) */
    padding-bottom: 40px;
    padding-top: calc(500px - clamp(0rem, -6.944rem + 22.222vw, 12.5rem)); /* 0 -> 200 */
}
.img-text-heading-modul .txt-container > img {
    max-width: 600px;
    max-height: 150px;
    margin-bottom: 90px;
}
.img-text-heading-modul .txt-container .arrow-Icon {
    margin-left: 5px;
    position: relative;
    top: 2px;
}
/* Team Member variant */
.img-text-heading-modul .teamMember {
    margin-top: 50px;
}
.img-text-heading-modul .teamMember img {
    width: clamp(3.125rem, -2.5rem + 30vw, 12.5rem);
    height: clamp(3.125rem, -2.5rem + 30vw, 12.5rem);
    aspect-ratio: 1;
    border-radius: 200px;
    margin-right: var(--fs-heading-2);
    object-fit: cover;
}
.img-text-heading-modul .teamMember h4 {
    text-transform: uppercase;
    margin-bottom: 15px;
}
.img-text-heading-modul .teamMember a {
    font-size: var(--fs-txt-small);
    margin-bottom: 5px;
}
.img-text-heading-modul.news {
    height: clamp(9.375rem, -2.778rem + 38.889vw, 31.25rem); /* 150 -> 500 */
    padding-top: clamp(6.25rem, -0.694rem + 22.222vw, 18.75rem);
    padding-bottom: clamp(6.25rem, 2.778rem + 11.111vw, 12.5rem);
}

/* numbers-sideways-modul */
.numbers-sideways-modul {
    position: relative;
}
.numbers-sideways-modul .panel .tiltet-container {
    width: 100vw;
    height: 60vw;
    position: relative;
    max-width: unset;
    max-height: unset;
}

.numbers-sideways-modul .bg-container {
    width: 100%;
    height: 100vh;
    position: absolute;
}
.numbers-sideways-modul .bg-container .tiltet-container {
    width: 50vw;
    height: 10vw;
    align-self: center;
    justify-self: center;
}
.numbers-sideways-modul .box1, .numbers-sideways-modul .box2, .numbers-sideways-modul .box3{
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: fit-content;
    font-weight: 900;
}

.numbers-sideways-modul .bigTxt {
    font-size: clamp(70px, min(25vh, 15vw), 300px);
    text-transform: uppercase;
}
.numbers-sideways-modul .h1 {
    width: fit-content;
    display: inline-block;
    font-size: clamp(30px, min(12vh, 8vw), 150px); /* eeetwa h1 */
    margin-top: 10px;
    margin-bottom: clamp(1.875rem, 0.417rem + 4.667vw, 6.25rem); /* 30 -> 100 (500 -> 2000) */
}
.numbers-sideways-modul .txt-container {
    max-width: min(75%, 800px);
    position: relative;
    left: 12%;
    margin: auto;
}
.numbers-sideways-modul .txt-container > p{
    font-size: clamp(18px, min(3vh, 2vw), 35px);
}

.numbers-sideways-modul .panel > .tiltet-container > * {
    /* position: absolute;
    display: block;
    width: 100%; */
}

.numbers-sideways-modul .panel.plain {
  flex-direction: column;
}
.numbers-sideways-modul .flickFakes {
    position: relative;
    width: 100px;
}

.numbers-sideways-modul .panel {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    position: absolute;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}
.snap {
    scroll-snap-type: y mandatory;
}
.numbers-sideways-modul .flickFakes > div {
    scroll-snap-align: center;
    height: 100vh;
}
.numbers-sideways-modul .flick {
    position: absolute;
    z-index: 2;
}

.numbers-sideways-modul .slidesPin {
  position:absolute;
}

.numbers-sideways-modul .slides{
    height: 100vh;
    width: 100%;
}
.numbers-sideways-modul .stripe-container {
    position: relative;
    height: 6%;
    top: -100%;
}
.numbers-sideways-modul .background {
    width: 100%;
    height: 100%;
    background: var(--nextColor);
    opacity: 0;
}

/* Img + SLider Modul */
.img-slider-modul .flex-center {
    width: 100%;
    aspect-ratio: var(--ratio);
    /* transition: all 0.1s ease; */
}
.img-slider-modul .flex-center > img, .img-slider-modul .flex-center > video{
    width: 10%;
}
.img-slider-modul .slide-container {
    max-width: var(--full-width);
    /* overflow: hidden; */
    margin: auto;
}
.img-slider-modul.has_img .slide-container {
    position: absolute;
}
.img-slider-modul .slide-container.svg_white {
    filter: brightness(0) invert(1);
}
.img-slider-modul .splide {
    width: 200%;
}
.img-slider-modul .bg-container {
    height: 50vh;
}
.img-slider-modul .tiltet-container {
    width: 50vw;
    height: 5vw;
    z-index: 1;
}
.img-slider-modul .stripe-container {
    position: relative;
    height: 6%;
}
.img-slider-modul .yt-container {
    width: 10%;
    overflow: hidden;
    position: relative;
    aspect-ratio: 16/9;
    /* transition: all ease; */
}
.img-slider-modul .yt-container iframe{
    position: absolute;
    width: 100vw;
    left: 0px;
    aspect-ratio: 16/9;
}
.img-slider-modul .yt-container img{
    width: 100%;
}

/* Bildergallerie horizontal Modul */
.txt-horizontal-modul {
    position: relative;
    overflow: hidden;
}
.txt-horizontal-modul .txt-container{
    min-width: min(1700px, 80vw);
    /* max-width: min(1500px, 70%); */
    height: fit-content;
    padding-left: calc(var(--content-padding) * 3);
    padding-right: calc(var(--content-padding) * 3);
}
.txt-horizontal-modul .img-container {
    height: 100vh;
    /* min-width: max(500px, 10vh); */
}
.txt-horizontal-modul .img-container > * {
    align-self: flex-start;
    margin-right: calc(-1 * clamp(3.125rem, 1.389rem + 5.556vw, 6.25rem)); /* 50 -> 100 */
    margin-top: var(--offset);
    max-width: unset;
    max-height: 60vh;
}
.txt-horizontal-modul .img-container > .align-end {
    align-self: flex-end;
    margin-bottom: var(--offset);
    margin-top: 0px;
}
.txt-horizontal-modul .gsap-horizontal-scroll {
    position: relative;
    width: fit-content;
}
.txt-horizontal-modul .bg-container {
    height: 50vh;
}
.txt-horizontal-modul .tiltet-container {
    width: 50vw;
    height: 5vw;
}
.txt-horizontal-modul .stripe-container {
    position: relative;
    height: 6%;
}

/* Akkordeon */
.accordion-modul {
    background-color: var(--clr-gray);
}
.accordion-modul .accordion {
    position: relative;
    z-index: 8;
}
.accordion-modul .acc-item:not(.open) .acc-content {
    display: none;
}
.accordion-modul .content-container {
    width: min(1500px, 70%);
    margin-left: auto;
    padding: 0px var(--content-padding);
}
.accordion-modul .acc-btn {
    width: 100%;
    padding: 40px 0px;
    gap: 20px;
}
.accordion-modul.bg-gray .acc-item {
    border-bottom: 2px solid var(--clr-white);
}
.accordion-modul .acc-item {
    border-bottom: 2px solid var(--clr-gray);
}
.accordion-modul .acc-btn > p {
    margin: 0;
}
.accordion-modul.bg-gray .icon-container .circle-btn {
    background-color: var(--clr-white);
}
.accordion-modul.bg-white .icon-container .circle-btn {
    background-color: var(--clr-white);
}
.accordion-modul .btn-hover::after {
    --radius: 100px;
    z-index: 1;
}
.accordion-modul .circle-btn .arrow-Icon {
    width: 14px;
    height: 13px;
    transform: rotate(135deg);
    z-index: 2;
}
.accordion-modul .acc-item.open .arr, .accordion-modul .acc-item:not(.open) .cro {
    display: none;
}
.accordion-modul .acc-content{
    margin-right: calc(20px + clamp(3.125rem, 2.604rem + 1.667vw, 4.063rem));
}
.accordion-modul .acc-content .panel-txt {
    font-weight: 500;
}
.accordion-modul .tiltet-container {
    top: calc( 50px + clamp(9.375rem, 4.861rem + 14.444vw, 17.5rem)); /* 150 -> 200 (+50) */
    height: 10vw;
    left: calc(120px - clamp(0rem, -6.875rem + 11vw, 6.875rem)); /* 120 -> 10 (1000 -> 2000) */
}
.accordion-modul .stripe-container {
    left: -10%;
}
.accordion-modul .stripe-container .heading {
    position: absolute;
    width: 17%;
    height: 800%;
    top: calc(-2222% - clamp(0rem, -6.25rem + 5vw, 3.125rem)); /* 0 -> 50 (2000 -> 3000) */
    left: 27%;
    color: var(--clr-white);
    font-size: calc(5vw);
    z-index: 3;
    transform: rotate(0);
}
.accordion-modul .pill-btn {
    margin-bottom: 20px;
}

/* Slider (Kann aber auch Grid sein)*/
.slider-modul {
    --bg-color: var(--clr-gray);
    --bg-color-inner: var(--clr-white);
}
.slider-modul.bg-gray {
    --bg-color: var(--clr-white);
    --bg-color-inner: var(--clr-gray);
}
.slider-modul .container {
    position: relative;
    padding: 0px var(--content-padding);
    width: 100%;
    max-width: 1800px;
    z-index: 3;
}
.slider-modul.left .container {
    margin-right: auto;
}
.slider-modul.right .container {
    margin-left: auto;
}
.slider-modul .grid-default {
    --gap-x-md: 50px
}
.slider-modul .cols-2 > .content-container {
    --col-span: 12;
    --col-span-md: 6;
}
.slider-modul .cols-3 > .content-container {
    --col-span: 12;
    --col-span-md: 6;
    --col-span-lg: 4;
}
.slider-modul .splide__slide {
    min-width: 350px;
}
.slider-modul .content-container {
    position: relative;
    display: block;
    background: var(--bg-color);
    padding: 40px;
    width: 100%;
    height: 100%;
    /* aspect-ratio: 3 / 2; */
}
.slider-modul .content-container.hasLink {
    margin-bottom: 80px;
}
.slider-modul .content-container p {
    font-size: var(--fs-txt-small);
}
.slider-modul .content-container .circle-btn {
    position: absolute;
    right: 40px;
    bottom: 40px;
    background-color: var(--bg-color-inner);
}
.slider-modul .tiltet-container {
    top: 30%;
    left: -10%;
    height: 10vw;
}
.slider-modul.left .tiltet-container {
    transform: rotate(calc(180deg - 25deg));
    left: -30%;
    top: 30%;
    top: -20%;
}
.slider-modul .splide__slide {
    width: 350px;
}
.slider-modul .splide__arrows {
    position: relative;
    height: 65px;
    margin-bottom: 50px;
}
.slider-modul .slider_arrow {
    position: absolute;
}
.slider-modul .slider_arrow .circle-btn {
    background-color: var(--bg-color);
}
.slider-modul .slider_arrow.splide__arrow--prev {
    right: 75px;
    left: unset;
}
.slider-modul .slider_arrow.splide__arrow--next {
    right: 0px;
}
.slider-modul .slider_arrow.splide__arrow--prev span {
    transform: rotate(225deg);
}
.slider-modul .slider_arrow.splide__arrow--next span {
    transform: rotate(45deg);
}
.slider-modul .content-container > img {
    max-height: 65px;
    min-height: 50px;
    margin-bottom: 50px;
}
.slider-modul .splide {
    max-width: 100%;
    left: 0px;
}

/* Text */
.txt-modul .small {
    --col-span: 12;
    --col-span-sm: 8;
}
.txt-modul .big {
    --col-span: 12;
    --col-span-sm: 10;
}
.txt-modul .middle {
    text-align: center;
}
.txt-modul .middle.small {
    --col-start: 1;
    --col-start-sm: 3;
}
.txt-modul .middle.big {
    --col-start: 1;
    --col-start-sm: 2;
}
.txt-modul .right.small {
    --col-start: 5;
}
.txt-modul .right.big {
    --col-start: 3;
}
.txt-modul a:not(.pill-btn) {
    background: linear-gradient(90deg, #5E48A4cc, #2593D0cc);
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.txt-modul .middle .pill-btn {
    margin: auto;
}
.txt-modul .right .pill-btn {
    /* margin-left: auto; */
}
.txt-modul.jobprevModul {
    width: min(1500px, 70%);
    margin-left: auto;
}
.txt-modul.jobprevModul .txt-container{
    --col-start: 1;
}

/* Imgs - Modul */
.imgs-modul .content-container {
    grid-template-rows: unset !important;
    margin-bottom: 100px;
}
.imgs-modul .img-container{
    /* --row-span: 10; */
    height: fit-content;
}
.imgs-modul .img-container img {
    margin-bottom: calc(-1 * clamp(1.875rem, -0.556rem + 7.778vw, 6.25rem)); /* -30 -> -100 */
}
.imgs-modul .img_1 {
    --col-start: 1;
    --col-span: 4;
}
.imgs-modul .img_2 {
    --col-start: 7;
    --col-span: 4;
}
.imgs-modul .img_3 {
    --col-start: 2;
    --col-span: 6;
}
.imgs-modul .img_4 {
    --col-start: 10;
    --col-span: 3;
}

/* Partner Logos Modul */
.partner-modul h2 {
    text-transform: uppercase;
    position: relative;
    z-index: 2;
}
.partner-modul.bg-white .blocks-element {
    background-color: var(--clr-gray);
}
.partner-modul .grid-default {
    --gap-x-sm: 35px;
    --gap-y: 35px;
    --gap-x-xl: 50px;
    --gap-y-xl: 50px;
}
.partner-modul .container {
    padding-left: clamp(6.25rem, -0.694rem + 22.222vw, 18.75rem); /* 100 -> 300 */
}
.partner-modul.left .container {
    padding-left: 0px;
    padding-right: clamp(6.25rem, -0.694rem + 22.222vw, 18.75rem);
}
.partner-modul .blocks-element {
    display: flex;
    justify-content: center;
    align-content: center;
    aspect-ratio: 1 / 1;
    background-color: var(--clr-white);
    z-index: 2;
    padding: 20px;
    /* --col-span-xxl: 2; */
    --col-span-lg: 3;
    --col-span-md: 4;
    --col-span-sm: 6;
    --col-span: 12;
}
.partner-modul .blocks-element img {
    max-height: -webkit-fill-available;
    max-height: clamp(9.375rem, -2.344rem + 18.75vw, 18.75rem);
}
/* .partner-modul .tiltet-container {
    transform: rotate(calc(180deg - 25deg));
    left: -30%;
    top: -10%;
    height: 10vw;
} */
.partner-modul .tiltet-container {
    top: 100%;
    left: -10%;
    height: 10vw;
}
.partner-modul.left .tiltet-container {
    transform: rotate(calc(180deg - 25deg));
    left: -30%;
    top: -10%;
}
.partner-modul .stripe-container .heading {
    position: absolute;
    width: 17%;
    height: 800%;
    top: calc(-2200% - clamp(0rem, -6.25rem + 5vw, 3.125rem)); /* 0 -> 50 (2000 -> 3000) */
    left: calc(30% - clamp(0rem, -37.5rem + 40vw, 25rem)); /* -0 - -400 */
    filter: brightness(0) invert(1);
    z-index: 3;
    transform: rotate(0);
}
.partner-modul.left .stripe-container .heading {
    transform: rotate(180deg);
    top: calc(-2500%); /* 0 -> 50 (2000 -> 3000) */
}

/* News Modul Übersicht */
.news-all-modul .filter-container {
    gap: 15px;
}
.news-all-modul .filter-container .btn-hover.active {
    background: linear-gradient(90deg, #5E48A4cc, #2593D0cc, #72BE96cc);
    color: var(--clr-white);
}
.news-all-modul .all-news-container {
    --gap-x-sm: clamp(1.25rem, 0.208rem + 3.333vw, 3.125rem); /* 20 -> 50 */
    --gap-y: clamp(1.25rem, 0.208rem + 3.333vw, 3.125rem); /* 20 -> 50 */
}
.news-all-modul .item{
    --col-span: 12;
    --col-span-sm: 6;
    --col-span-lg: 4;
    font-size: var(--fs-txt-small);
}
.news-all-modul .item > img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}
.news-all-modul .item > p {
    margin-top: 20px;
}
.news-all-modul .item .date {
    color: var(--clr-darkgray);
    margin-right: 7px;
}
.news-all-modul .btn-container {
    margin: auto;
    width: fit-content;
}

/* News Teaser */
.news-teaser-modul .splide {
    /* width: 85%; */
    max-width: 1800px;
    width: 100%;
    left: 0px;
    padding: 0px var(--content-padding);
    z-index: 2;
    padding-top: 100px;
}.news-teaser-modul.right .splide {
    margin-left: auto;
}
.news-teaser-modul .item img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}
.news-teaser-modul .item .img-container::after {
    content: "";
    background: linear-gradient(transparent, var(--clr-darkblue));
    position: absolute;
    height: 33%;
    width: 100%;
    bottom: 0px;
    transition: all 0.5s ease;
}
.news-teaser-modul .item:hover .img-container::after {
    height: 100%;
}
.news-teaser-modul .item p {
    margin-top: 30px;
    font-size: var(--fs-txt-small);
}
.news-teaser-modul .item .date {
    color: var(--clr-darkgray);
    margin-right: 10px;
}
.news-teaser-modul .splide__slide {
    min-width: 350px;
}
.news-teaser-modul .splide__arrows {
    margin-top: 30px;
    gap: 20px;
    flex-wrap: wrap;
}
.news-teaser-modul .slider_arrow {
    --radius: 100px;
}
.news-teaser-modul .slider_arrow .btn-hover::after {
    z-index: 0;
}
.news-teaser-modul .splide__arrow--prev .arrow-Icon{
    transform: rotate(-135deg);
    z-index: 1;
}
.news-teaser-modul .splide__arrow--next .arrow-Icon{
    transform: rotate(45deg);
    z-index: 1;
}
.news-teaser-modul .tiltet-container {
    top: 40%;
    width: 100vw;
    height: 7vw;
    max-width: calc(var(--full-width) * 1);
    max-height: calc(var(--full-width) * 0.07);
    min-width: calc(800px * 1);
    min-height: calc(800px * 0.07);

}
.news-teaser-modul.left .tiltet-container {
    transform: rotate(155deg);
    top: calc(-1 * clamp(0rem, -10.417rem + 33.333vw, 18.75rem));
}
.news-teaser-modul .tiltet-container .stripe5, .news-teaser-modul .tiltet-container .stripe6 {
    display: none;
}
.news-teaser-modul .heading {
    top: -2150%;
    left: 22%;
    z-index: 3;
}
.news-teaser-modul.right .heading.stripe {
    transform: translateX(-100%) rotate(0deg);
}
.news-teaser-modul .img-container {
    position: relative;
}
.news-teaser-modul .heading img {
    width: 15vw;
    max-width: calc(0.15 * var(--full-width));
    min-width: calc(0.15 * 800px);
}
.news-teaser-modul .filters {
    position: absolute;
    bottom: 20px;
    left: 20px;
    gap: 15px;
    z-index: 1;
}
.news-teaser-modul .filters p{
    color: var(--clr-white);
    margin: 0;

}

/* News Artikel Modul */
.news-article-modul {
    padding-top: var(--section-padding);
    margin-bottom: -100px;
}
.news-article-modul .top-container .proj-img {
    margin-bottom: 50px;
    max-height: 55vh;
    width: max(1000px, 70%);
    object-fit: cover;
}
.news-article-modul .top-container .flex-space-between > p {
    color: var(--clr-darkgray);
    font-weight: 900;
}
.news-article-modul .filters {
    gap: 7px;
}
.news-article-modul .top-container p {
    font-size: var(--fs-txt-small);
}
.news-article-modul h1 {
    text-transform: unset;
    font-size: var(--fs-heading-2);
    max-width: 60%;
}
.news-article-modul .txt-container {
    margin-bottom: 50px;
    max-width: 66.7%;
}
.news-article-modul .txt-container p {
    font-size: var(--fs-txt-small);
}
.news-article-modul .img-outer-container {
    margin-top: var(--section-padding);
}
.news-article-modul .img-container {
    height: fit-content;
    --row-span: 2;
}
.news-article-modul img {
    width: 100%;
}
.news-article-modul .img_1 {
    --col-start: 1;
    --col-span: 4;
}
.news-article-modul .img_2 {
    --col-start: 7;
    --col-span: 4;
}
.news-article-modul .img_3 {
    --col-start: 2;
    --col-span: 6;
}
.news-article-modul .img_4 {
    --col-start: 10;
    --col-span: 3;
}
.news-article-modul .back-btn {
    margin-left: auto;
    margin-top: var(--section-padding);
}
/* Stellenangebote Modul */
.job-modul .outer-container {
    width: min(1500px, 70%);
    margin-left: auto;
    padding: 0px var(--content-padding);
    position: relative;
    z-index: 3;
}
.job-modul .circle-btn {
    --radius: 100px;
}
.job-modul .filter-container {
    margin-bottom: 50px;
    gap: 30px;
}
.job-modul .filter-container .category-filter.active{
    background: linear-gradient(90deg, #5E48A4cc, #2593D0cc, #72BE96cc);
    color: var(--clr-white);
}
.job-modul .item {
    border-bottom: 2px solid var(--clr-gray);
    overflow: hidden;
}
.job-modul .acc-btn {
    width: 100%;
    padding: 40px 0px;
    gap: 20px;
}
.job-modul .acc-btn p {
    margin: 0px;
}
.job-modul .item:not(.open) > :not(.acc-btn) {
    height: 0px;
}
.job-modul .item .arr .arrow-Icon {
    transform: rotate(135deg);
}
.job-modul .item.open .arr, .job-modul .item:not(.open) .cro {
    display: none;
}
.job-modul .alt-txt p {
    font-size: var(--fs-txt-small);
}

.job-modul .tiltet-container {
    top: clamp(6.25rem, -0.568rem + 13.636vw, 25rem); /*100 -> 400 (800 -> 3000) */
    height: 7vw;
    max-width: calc(var(--full-width) * 1.4);
    max-height: calc(var(--full-width) * 0.07);
    min-width: calc(500px * 1.4);
    min-height: calc(500px * 0.07);
}
.job-modul .tiltet-container .stripe {
    transform: translateX(-100%);
}
.job-modul .tiltet-container .heading {
    width: 22%;
    top: -2300%;
    left: 19%;
}

/* Job Artikel Modul */
.job-article-modul .grid-default {
    --gap-x-sm: 30px;
    --gap-y: 30px;
}
.job-article-modul .grid-default .txt-container {
    --col-span: 12;
    --col-span-sm: 6;
    --col-span-xl: 4;
    margin-bottom: 30px;
}
.job-article-modul > .txt-container {
    margin-top: 50px;
    margin-bottom: 50px;
    max-width: 1200px;
}
.job-article-modul .heading {
    background: linear-gradient(90deg, #5E48A4cc, #2593D0cc);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    width: fit-content;
}
.job-article-modul .txt-container *:not(.heading) {
    font-size: var(--fs-txt-small);
    font-weight: 500;
}
.job-article-modul .txt-container ul li:not(:last-child) {
    margin-bottom: 0.5em;
}
.job-article-modul > .pill-btn {
    margin-bottom: 30px;
}

/* Team Modul */
.team-modul .grid-default {
    --gap-y: 100px;
    position: relative;
    z-index: 1;
}
.team-modul .teamMember {
    --col-span: 12;
    --col-span-sm: 6;
    --col-span-lg: 4;
    font-size: var(--fs-txt-small);
    padding: 0px clamp(1.563rem, -3.125rem + 7.5vw, 6.25rem); /* 25 -> 100 (1000 -> 2000) */
}
.team-modul .teamMember img {
    width: 100%;
    margin-bottom: 30px;
    object-fit: cover;
    /* aspect-ratio: 3 / 2; */
}
.team-modul .teamMember h3 {
    margin-bottom: 10px;
}
.team-modul .teamMember p {
    margin-bottom: 5px;
    font-weight: 700;
}
.team-modul .teamMember a {
    margin-bottom: 5px;
    font-weight: 500;
}
/* Streifen Modul */
.stripes-modul {
    min-height: 30vh;
    min-height: calc(15vh + clamp(0rem, -10.417rem + 33.333vw, 18.75rem));
    --section-padding: clamp(3.125rem, -0.347rem + 11.111vw, 9.375rem) /* 50 -> 150 */
}
.stripes-modul.no-stripes {
    min-height: 0;
}
.stripes-modul .stripe-container {
    position: relative;
    height: 10%;
    top: -100%;
}
.stripes-modul .tiltet-container {
    max-height: calc(var(--full-width) * 0.03);
    width: 50vw;
    top: 20%;
}
.stripes-modul .splide {
    position: absolute;
    transform: translateX(25%);
    z-index: 2;
    min-width: 1400px;
}

.to-top-button, .go-down-button {
    position: fixed;
    bottom: 10px;
    left: 50%;
    z-index: 9;
    transform: translate(-50%);
}
.to-top-button .arrow-Icon, .go-down-button .arrow-Icon {
    transform: rotate(135deg);
    transition: all 0.25s ease;
    height: 12px;
    width: 12px;
}
.to-top-button .arrow {
    transform: rotate(180deg);
}
.mobnav-active .to-top-button, .mobnav-active .go-down-button {
    display: none;
}
/* Footer  */
footer {
    padding-top: 20%;
    overflow: hidden;
}
footer .top-container {
    text-transform: uppercase;
    padding-bottom: 200px;
    position: relative;

}
footer .tiltet-container {
    position: absolute;
    transform: rotate(-25deg);
    width: 140vw;
    height: 5vw;
    top: 30%;
    --col-span: 6;
}
footer .stripe-container .heading {
    position: absolute;
    width: 15%;
    height: 800%;
    top: 300%;
    left: 39%;
    filter: brightness(0) invert(1);
    z-index: 3;
    transform: rotate(25deg);
}
footer .links {
    gap: var(--fs-heading-1);
    padding-left: var(--content-padding);
}
footer .links .link-container {
    --col-span: 4;
    gap: 20px;
    font-weight: 700;
}
footer .links h4 {
    color: var(--clr-darkgray);
}
footer .links a, footer .links button {
    font-size: 18px;
    width: fit-content;
}
footer .link-container button {
    text-transform: uppercase;
}
footer .links .logos .flex {
    gap: 40px;
}
footer .links .logos img {
    max-width: clamp(17.188rem, 16.319rem + 2.778vw, 18.75rem); /* 275 -> 300 */
    width: unset;
    height: clamp(5rem, 4.306rem + 2.222vw, 6.25rem); /* 60 -> 100 */
    height: 100px;
    z-index: 2;
}

footer .footer-slider {
    margin-bottom: 50px;
}
.splide{
    width: 200%;
    position: relative;
    z-index: 1;
    right: 25%
}

footer .bottom-container {
    margin: max(50px, var(--content-padding)) var(--content-padding) 10px var(--content-padding);
    font-size: 13px;
    font-weight: 500;
}
footer .bottom-container > p:first-child {
    align-self: flex-start;
}
footer .bottom-container > p:last-child {
    align-self: flex-end;
}

/* Stripes */
.stripe.violet-blue-green {
    background: linear-gradient(90deg, #A67AB2cc, #06a6decc, #72BE96cc);
}
.stripe.red-yellow {
    background: linear-gradient(90deg, #D82F2Ecc, #F7C716cc);                                                                                                                                                                                                                                        
}
.stripe.green-yellow {
    background: linear-gradient(90deg, #00A03Fcc, #F7C716cc);
}
.stripe.purple-pink-orange {
    background: linear-gradient(90deg, #A67AB2cc, #D93389cc, #ED6C2Acc);
}
.stripe.purple-darkblue-lightblue {
    background: linear-gradient(90deg, #774393cc, #0089C9cc, #0089C944);
}
.stripe.pink-lightblue {
    background: linear-gradient(90deg, #D93389cc, #0089C944);
}

.stripe-container {
    pointer-events: none;
}
.stripe-container-1, .stripe-container-2, .stripe-container-4 {
    position: absolute;
    height: 20%;
    top: 0px;
    width: 70%;
}
.stripe-container-1 {
    right: 0%;
}

.stripe-container .stripe {
    position: absolute;
}

.stripe-container-1 .stripe {
    transform: translateX(100%);
    opacity: 0;
}
.stripe-container-1 .stripe1 {
    width: 38%;
    height: 120%;
    top: -300%;
    right: 18%;
}
.stripe-container-1 .stripe2 {
    /* width: 70%; */
    width: 58%;
    height: 600%;
    top: 0%;
    right: 5%;
}
.stripe-container-1 .stripe3 {
    width: 60%;
    height: 700%;
    top: 500%;
    right: 5%;
    transform: rotate(180deg) translateX(-100%);
}
.stripe-container-1 .stripe4 {
    width: 30%;
    height: 300%;
    top: 1400%;
    right: 21%;
}
.stripe-container-1 .stripe5 {
    width: 28%;
    height: 500%;
    top: 2000%;
    right: 27%;
}



.stripe-container-2 {
    left: 0%;
}
.stripe-container-2 .stripe {
    transform: translateX(-100%);
    opacity: 0;
}

.stripe-container-2 .stripe1 {
    width: 34%;
    height: 200%;
    top: -2800%;
    left: 0%;
}
.stripe-container-2 .stripe2 {
    width: 34%;
    height: 800%;
    left: 10%;
    top: -2300%;
    transform: rotate(180deg) translateX(100%);
}
.stripe-container-2 .stripe3 {
    width: 35%;
    height: 600%; 
    top: -1700%;
    left: 2%;
    transform: rotate(180deg) translateX(100%);
}
.stripe-container-2 .stripe4 {
    width: 20%;
    height: 250%;
    top: -1150%;
    left: 6%;
}
.stripe-container-2 .stripe5 {
    width: 30%;
    height: 250%;
    top: -850%;
    left: 8%;
}
.stripe-container-2 .stripe6 {
    width: 35%;
    height: 700%;
    top: -500%;
    left: 1%;
}
.stripe-container-2 .stripe7 {
    width: 20%;
    height: 500%;
    top: 50%;
    left: 7%;
    transform: rotate(180deg) translateX(100%);
}
.stripe-container-2 .stripe8 {
    width: 25%;
    height: 200%;
    top: 800%;
    left: 4%;
}

.stripe-container-3 .stripe {
    transform: translateX(-100%);
    opacity: 0;
}
.stripe-container-3 .stripeTop{
    transform: translateX(100%);
}

.stripe-container-3 .stripe1 {
    width: 85%;
    height: 3700%;
    top: -5800%;
    left: -12%;
}
.stripe-container-3 .stripe2 {
    width: 129%;
    height: 1800%;
    top: -3000%;
    left: -30%;
}
.stripe-container-3 .stripe3 {
    width: 78%;
    height: 400%;
    top: -500%;
    left: -26%;
}
.stripe-container-3 .stripe4 {
    width: 145%;
    height: 2000%;
    top: -300%;
    left: -35%;
}
.stripe-container-3 .stripe5 {
    width: 60%;
    height: 400%;
    top: -100%;
    left: 65%;
}
.stripe-container-3 .stripe6 {
    width: 170%;
    height: 2000%;
    top: 1200%;
    left: -30%;
}
.stripe-container-3 .stripe7 {
    width: 158%;
    height: 2700%;
    top: 3000%;
    left: -43%;
}
.stripe-container-3 .stripe8 {
    width: 123%;
    height: 1600%;
    top: 5300%;
    left: 1%;
    transform: rotate(180deg) translateX(100%);
}
.stripe-container-3 .stripe9 {
    width: 103%;
    height: 1200%;
    top: 6000%;
    left: 17%;
    z-index: 1;
}

.stripe-container-3 .stripe10 {
    width: 100%;
    height: 2400%;
    top: 7800%;
    left: 5%;
    transform: rotate(180deg) translateX(100%);
}

.stripe-container-3 .stripe11 {
    width: 135%;
    height: 4400%;
    top: 8400%;
    left: 30%;
    transform: rotate(180deg) translateX(100%);
}
.stripe-container-3 .stripe12 {
    width: 158%;
    height: 2800%;
    top: 11000%;
    left: -5%;
    transform: rotate(180deg) translateX(-100%);
}

.stripe-container-4 .stripe {
    transform: translateX(-100%) rotate(180deg);
    opacity: 0;
}

.stripe-container-4 .stripe1 {
    width: 54%;
    height: 200%;
    top: -2800%;
    left: -17%;
}
.stripe-container-4 .stripe2 {
    width: 54%;
    height: 800%;
    left: -4%;
    top: -2400%;
}
.stripe-container-4 .stripe3 {
    width: 55%;
    height: 600%;
    top: -2000%;
    left: -16%;
}
.stripe-container-4 .stripe4 {
    width: 50%;
    height: 200%;
    top: -1250%;
    left: -13%;
}
.stripe-container-4 .stripe5 {
    width: 54%;
    height: 550%;
    top: -1100%;
    left: -11%;
    z-index: 2;
}
.stripe-container-4 .stripe6 {
    width: 54%;
    height: 350%;
    top: -700%;
    left: -19%;
}
.stripe-container-4 .stripe7 {
    width: 51%;
    height: 300%;
    top: -400%;
    left: -20%;
    display: none;
}

.stripe-container-5 .stripe {
    transform: translateX(-100%);
    opacity: 0;
}
.stripe-container-5 .stripeTop{
    transform: translateX(100%);
}

.stripe-container-5 .stripe1 {
    width: 85%;
    height: 3700%;
    top: -5800%;
    left: -82%;
}
.stripe-container-5 .stripe2 {
    width: 129%;
    height: 2200%;
    top: -3000%;
    left: -100%;
}
.stripe-container-5 .stripe3 {
    width: 78%;
    height: 400%;
    top: -500%;
    left: -96%;
}
.stripe-container-5 .stripe4 {
    width: 145%;
    height: 2000%;
    top: -300%;
    left: -105%;
}
.stripe-container-5 .stripe5 {
    width: 96%;
    height: 1000%;
    top: -100%;
    left: 5%;
}
.stripe-container-5 .stripe6 {
    width: 170%;
    height: 2900%;
    top: 1200%;
    left: -30%;
}
.stripe-container-5 .stripe7 {
    width: 158%;
    height: 2700%;
    top: 3000%;
    left: -43%;
}
.stripe-container-5 .stripe8 {
    width: 140%;
    height: 1600%;
    top: 5300%;
    left: 1%;
    transform: rotate(180deg) translateX(100%);
}
.stripe-container-5 .stripe9 {
    width: 115%;
    height: 1200%;
    top: 6000%;
    left: 17%;
    z-index: 1;
}

.stripe-container-5 .stripe10 {
    width: 100%;
    height: 2400%;
    top: 7400%;
    left: 37%;
}

.stripe-container-5 .stripe11 {
    width: 135%;
    height: 4400%;
    top: 8000%;
    left: 68%;
    transform: rotate(180deg) translateX(100%);
}
.stripe-container-header .stripe {
    transition: all 0.5s ease;
    opacity: 0;
}
.stripe-container-header .stripe.visible {
    transform: translateX(0);
    opacity: 1;
}
.stripe-container-header .stripe {
    transform: translateX(100%);
}
.stripe-container-header .stripe2,
.stripe-container-header .stripe3,
.stripe-container-header .stripe6,
.stripe-container-header .stripe8,
.stripe-container-header .stripe10 {
    transform: translateX(-100%);
}
.stripe-container-header .stripe1 {
    width: 59%;
    height: 20%;
    left: 8%;
    top: -10%;
}
.stripe-container-header .stripe2 {
    width: 60%;
    height: 19%;
    left: -28%;
    top: 10%;
}
.stripe-container-header .stripe3 {
    width: 64%;
    height: 8%;
    left: -20%;
    top: -37%;
}
.stripe-container-header .stripe4 {
    width: 55%;
    height: 31%;
    left: 22%;
    top: -27%;
}
.stripe-container-header .stripe5 {
    width: 51%;
    height: 20%;
    left: 10%;
    top: -62%;
}
.stripe-container-header .stripe6 {
    width: 64%;
    height: 35%;
    left: -3%;
    top: 17%;
}
.stripe-container-header .stripe7 {
    width: 78%;
    height: 39%;
    left: -22%;
    top: 105%;
}
.stripe-container-header .stripe8 {
    width: 60%;
    height: 36%;
    left: -28%;
    top: 57%;
}
.stripe-container-header .stripe9 {
    width: 74%;
    height: 8%;
    left: -2%;
    top: 38%;
}
.stripe-container-header .stripe10 {
    width: 67%;
    height: 29%;
    left: 13%;
    top: 48%;
}
.stripe-container-header .stripe11 {
    width: 54%;
    height: 31%;
    left: -5%;
    top: 88%;
}


.stripe.violet-blue-green {
    background: linear-gradient(90deg, #A67AB2cc, #06a6decc, #72BE96cc);
}
.stripe.red-yellow {
    background: linear-gradient(90deg, #D82F2Ecc, #F7C716cc);                                                                                                                                                                                                                                        
}
.stripe.green-yellow {
    background: linear-gradient(90deg, #00A03Fcc, #F7C716cc);
}
.stripe.purple-pink-orange {
    background: linear-gradient(90deg, #A67AB2cc, #D93389cc, #ED6C2Acc);
}
.stripe.purple-darkblue-lightblue {
    background: linear-gradient(90deg, #774393cc, #0089C9cc, #0089C944);
}
.stripe.pink-lightblue {
    background: linear-gradient(90deg, #D93389cc, #0089C944);
}


/* GSAP */
.animation-box > * {
    transform: translateY(clamp(9.375rem, 4.167rem + 16.667vw, 18.75rem)); /* 150 -> 300*/
}
.animation-element {
    transform: translateY(clamp(9.375rem, 4.167rem + 16.667vw, 18.75rem)); /* 150 -> 300*/
}
.animation-element-hor {
    transform: translateX(-300px);
}


/* no animations */

.no-animations .img-slider-modul > .flex-center {
    height: 100vh;
}
.no-animations .img-slider-modul .yt-container,
.no-animations .img-slider-modul .flex-center > * {
    width: 100%;
}


@media (min-width: 768px) {
    .img-text-heading-modul .background-triangle {
        /* transform: translateY(calc(-85% + 90px - clamp(0rem, -4.688rem + 8.333vh, 3.125rem))); cl: 250 -> 0 (900 -> 1000) */
        /* height: 115%; */
    }
    .hide-desktop {
        display: none;
    }
}

@media (min-width:992px){
}

@media (min-width:1200px){
    body {
        --header-height: 114px;
    }
    header .mobile, header .burger {
        display: none;
    }
    /* .img-text-heading-modul .background-triangle {
        transform: translateY(calc(-74% + 90px - clamp(0rem, -4.688rem + 8.333vh, 3.125rem))); cl: 250 -> 0 (900 -> 1000)
    } */

}

@media (min-width:2000px){
    /* .img-text-heading-modul .background-triangle {
        transform: translateY(calc(-70% - clamp(0rem, -4.688rem + 8.333vh, 3.125rem)));  cl: 250 -> 0 (900 -> 1000) 
    } */
    .news-all-modul .item{
        --col-span-lg: 3;
    }
    .team-modul .teamMember {
        /* --col-span-lg: 3; */
    }
}


@media (max-width:1699px) {
    footer .links .logos .flex {
        flex-wrap: wrap;
        width: 500px;
    }
}

@media (max-width:1499px) {
    footer .links .logos .flex {
        flex-direction: column;
        gap: 20px;
    }
    footer .links .logos img {
        /* width: max-content; */
    }
}

@media (max-width:1199px) {
    header {
        padding-bottom: 20px;
    }
    header .desktop {
        display: none;
    }
    header .logo-txt {
        right: 100%;
    }
    .numbers-sideways-modul .txt-container {
        left: 0%;
    }
    header .circle-btn, header .toggle-search {
        width: 40px;
        height: 40px;
    }
}

@media (max-width:991px){
    .accordion-modul .content-container {
        width: min(1500px, 95%);
        margin: auto;
        padding: 0px var(--content-padding);
        margin-top: 150px;
    }
    .img-text-heading-modul .tiltet-container {
        background-color: var(--clr-white);
        top: calc(70% - 50px + clamp(0rem, -4.167rem + 8.333vw, 3.125rem));
        left: calc(0% - 150px + clamp(0rem, -4.167rem + 8.333vw, 3.125rem));
        height: 20vw;
    }
    .img-text-heading-modul .tiltet-container > img {
        width: 60%;
    }
    .img-text-heading-modul .tiltet-container > .stripe-container {
        height: 10%;
    }
    .img-text-heading-modul.no-img .tiltet-container {
        background-color: transparent;
    }
    .img-text-heading-modul .background-triangle {
        display: block;
    }
    .numbers-sideways-modul .bg-container .tiltet-container {
        width: 70vw;
        height: 14vw;
    }
    .accordion-modul .stripe-container {
        left: 5%;
    }
    .accordion-modul .tiltet-container {
        left: clamp(2.5rem, -0.192rem + 12.308vw, 7.5rem); /* 45 -> 120 (350 -> 1000) */
        top: calc(clamp(6.25rem, 0rem + 20vh, 17.5rem) + 50px); /* 20 % hohe */
    }
    .accordion-modul .stripe-container .heading {
        width: 25%;
        left: 20%;
    }
    .imgs-modul .img_1 {
        --col-start: 1;
        --col-span: 8;
    }
    .imgs-modul .img_2 {
        --col-start: 3;
        --col-span: 7;
    }
    .imgs-modul .img_3 {
        --col-start: 2;
        --col-span: 9;
    }
    .imgs-modul .img_4 {
        --col-start: 5;
        --col-span: 7;
    }
    .news-article-modul .img_1 {
        --col-start: 1;
        --col-span: 8;
    }
    .news-article-modul .img_2 {
        --col-start: 3;
        --col-span: 7;
    }
    .news-article-modul .img_3 {
        --col-start: 2;
        --col-span: 9;
    }
    .news-article-modul .img_4 {
        --col-start: 5;
        --col-span: 7;
    }
    footer .links {
        flex-wrap: wrap;
    }
    footer .links .logos .flex{
        flex-direction: row;
    }
    .news-teaser-modul.right .tiltet-container {
        top: 25%;
    }
}

@media (max-width:767px){
    header .logo-textbox {
        display: none;
    }
    .img-text-heading-modul .background-triangle {
        /* transform: translate(0); */
        /* bottom: -150px; */
    }
    .img-text-heading-modul .txt-container {
        margin-top: calc(-500px + clamp(0rem, -7.5rem + 40vw, 12.5rem));
        max-width: 100%;
        left: 0;
        padding: 400px var(--content-padding) 20px var(--content-padding);
    }
    .img-text-heading-modul .tiltet-container {
        width: clamp(37.5rem, 20.063rem + 93vw, 66.563rem); /*850 -> 1065 (300px -> 600px) */
        left: -15%;
    }
    .img-text-heading-modul .stripe-container-1 {
        right: calc(100px - clamp(0rem, -3.75rem + 20vw, 6.25rem));
    }
    .img-text-heading-modul .stripe-container-2 {
        /* left: calc(100px - clamp(0rem, -3.75rem + 20vw, 6.25rem)); */
    }
    .img-text-heading-modul .tiltet-container h1 {
        max-width: 83vw;
        left: 40%;
    }
    .img-text-heading-modul .txt-container > img {
        max-height: 100px;
        margin-top: 40px;
        margin-bottom: 40px;
    }
    .txt-horizontal-modul .txt-container{
        padding-left: var(--content-padding);
        padding-right: var(--content-padding);
        padding-top: 100px;
    }
    .txt-horizontal-modul .img-container > * {
        max-height: 40vh;
    }
    .hide-mobile {
        display: none;
    }
    .hide-mobile {
        width: 100vh;
    }
    .partner-modul .blocks-element {
        padding: 35px;
    }
    .accordion-modul .acc-content {
        margin: 0;
    }
    .news-teaser-modul.left .tiltet-container {
        left: unset;
        right: 10%;
        top: -11%;
    }
    .news-article-modul h1,
    .news-article-modul .txt-container,
    .news-article-modul .flex-wrap {
        max-width: 100%;
    }
    .news-article-modul .top-container .flex-space-between {
        flex-direction: column-reverse;
        gap: 30px;
    }
    .news-article-modul .filters {
        align-self: flex-end;
    }
    .job-modul .outer-container {
        width: 100%;
        padding-top: 100px;
    }
    .job-modul .tiltet-container {
        top: 90px;
    }
    .txt-modul.txt-modul.jobprevModul {
        width: unset;
    }
    footer {
        padding-bottom: 75px;
    }
    footer .links{
        flex-direction: column;
    }
    footer .tiltet-container {
        height: 10vw;
        width: clamp(43.75rem, 21.25rem + 120vw, 81.25rem); /* 700 -> 1500 (300 -> 800) */
        left: -300px;
        top: 15%;
    }
    footer .links .link-container {
        gap: 10px;
        width: fit-content;
    }
    footer .links .logos .flex{
        flex-direction: column;
    }
    footer .bottom-container {
        align-items: start;
        flex-direction: column;
    }
    footer .top-container {
        padding-bottom: 100px;
    }
    footer .stripe-container .heading {
        width: 25%;
        left: 50%;
    }
}
@media (max-width:595px) {
    .img-text-heading-modul .tiltet-container > img {
        width: 50%;
        margin-right: calc(130px - clamp(0rem, -6.25rem + 33.333vw, 6.25rem)); /* 200 -> 100 (300 -> 600) */
    }
    .partner-modul .blocks-element {
        padding: 50px;
    }
    footer .links {
        padding-top: 200px;
    }
    
}
@media (max-width:450px) {
    .numbers-sideways-modul .txt-container {
        left: -10%;
    }
    .numbers-sideways-modul .bigTxt {
        position: relative;
        left: 20%;
    }
}