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


:root {
    --clr-white:        #ffffff;
    --clr-lightgray:    #F5F5F7;
    --clr-gray:         #E6EAED;
    --clr-darkgray:     #D5DDE3;
    --clr-darkblue:     #0C384C;

    
    --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.382rem + 2.778vw, 2.813rem); /* 20 -> 45 */
    --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.375rem, 0.924rem + 1.444vw, 2.188rem); /* 25 -> 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: var(--full-width);
    --section-padding: clamp(3.125rem, 1.389rem + 5.556vw, 6.25rem); /* 50px -> 100px */

    /* --clr-cookie: linear-gradient(90deg, #EB2C4Ccc, #FFEBA3cc); */
    --clr-cookie: var(--clr-gray);
    --clr-cookie-hov: linear-gradient(90deg, #5EBEE6cc, #FF6484cc);
    /* --clr-cookie-hov: pink; */
}

/* 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: 0.9;
}
p {
    line-height: 1.2;
}
.txt-small p, .txt-small li{
    font-size: var(--fs-txt-small);
    line-height: 1.5;
    font-weight: 600;
}
img {
    font-size: 16px;
}
section {
    position: relative;
}
.txt-container {
    z-index: 2;
}


.pill-btn {
    position: relative;
    display: block;
    width: fit-content;
    padding: 20px 45px;
    background-color: var(--clr-gray);
    color: var(--color);
    border-radius: 50px;
    font-size: 16px;
    text-transform: uppercase;
    transition: all 0.25s ease;
    bottom: 0px;
    border: 1px solid transparent;
    overflow: hidden;
}
.pill-btn:hover {
    /* bottom: 3px;
    border: 1px solid var(--color); */
    background: #65CA9Dcc;
    color: var(--clr-white);
}
.pill-btn:hover .arrow-Icon {
    background-color: var(--clr-white);
}
.pill-btn:hover::after {
    content: "";
}
.pill-btn::after {
    background: radial-gradient(circle closest-side, #A77BB5cc, #08BDE9cc, transparent);
    display: block;
    position: absolute;
    --radius: 300px ;
    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));
}


.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 */
    font-size: 18px;
}
.search-Icon {
    --url: url('/media/suche.svg');
    width: 20px;
    height: 20px;
}
.pill-btn .arrow-Icon {
    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);
}
.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;
}
.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;
}
.txt-gradient {
    background: linear-gradient(90deg, #5E48A4cc, #2593D0cc);
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
/*Main, Body, etc. */
body {
    font-weight: 800;
    max-width: 100%;
    overflow-x: hidden;
}
html {
    overflow-x: hidden;
}

@media (min-width: 1200px) {
    html {
        overflow-x: visible;
    }
}

main {
    /* margin-top: -205px; */
    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-container-1, .stripe-container-2 {
    /* z-index: 10; */
}
.stripe.red-yellow, .stripe.stripe.blue-blue, .stripe.stripe.blue-yellow {
    z-index: 2;
}


/* Header  */
header {
    padding: 40px 0px;
    position: fixed;
    width: 100%;
    z-index: 10;
    max-width: 100vw;
}
header > .content-width--full {
    padding: 0px var(--content-padding);
}
header .desktop {
    height: fit-content;
    font-size: 16px;
}
header .desktop > a {
    color: var(--clr-darkblue);
    margin-right: 40px;
}
header.white_header .desktop > a {
    color: var(--clr-white);
}
header .desktop-navi {
    height: fit-content;
}
header .buttons > button:not(:last-child) {
    margin-right: 10px;
}
header .burger > div {
    height: 3px;
    margin: 2px 0px;
    width: 20px;
    background-color: var(--color);
}
header .logo-textbox {
    overflow: hidden;
}
header .logo {
    width: min(400px, 70vw);
}
header.white_header .logo.dark {
    display: none;
}
header:not(.white_header) .logo.light {
    display: none;
}
header .logo-txt {
    position: relative;
    right: 0px;
    transition: right 0.5s ease;
}
header .circle-btn {
    width: 45px;
    height: 45px;
}
/* Header mobile */
header .mobile:not(.active) {
    display: none;
}
header.mobnav-active .logo-container,
header.mobnav-active .desktop-navi,
header.mobnav-active .mobile {
    position: fixed;
}
header.mobnav-active .desktop-navi {
    right: var(--content-padding);
}
header .mobile {
    height: 100vh;
    width: 100vw;
    top: 0px;
    left: 0px;
    background-color: var(--clr-gray);
}
header .mobile > .content-width {
    margin-top: 200px;
}

/* IMG modul */

.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.no-img .img-container {
    margin-top: -35vh;
}
.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(60% - 50px + clamp(0rem, -4.167rem + 8.333vw, 3.125rem));
    left: calc(-10% - 150px + clamp(0rem, -4.167rem + 8.333vw, 3.125rem));
    height: 10vw;
}
.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 {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        -25deg, var(--clr-white) 0%,var(--clr-white) 49.9%, transparent 50%, transparent 100%
    );
    transform: translateY(calc(-90% + 110px - clamp(0rem, -31.25rem + 100vh, 6.25rem))); /* cl: 250 -> 0 (900 -> 1000) */
    transform: translateY(-70vh);
    
}
.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: 28%;
    max-width: calc(10 * var(--fs-heading-1));
}
.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.no-img .tiltet-container > img {
    /* filter: invert(15%) sepia(71%) saturate(820%) hue-rotate(160deg) brightness(91%) contrast(93%); */
}

.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: 500px;
}
.img-text-heading-modul .txt-container > img {
    max-width: 600px;
    max-height: 150px;
}
.img-text-heading-modul .txt-container .arrow-Icon {
    margin-left: 5px;
    position: relative;
    top: 2px;
}
.img-text-heading-modul .txt-container > :not(:last-child) {
    margin-bottom: 90px;
}


/* 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;
}

.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(60%, 800px);
    position: relative;
    left: 12%;
    margin: auto;
}
.numbers-sideways-modul .txt-container > p{
    font-size: clamp(20px, 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: 1px solid var(--clr-white);
}
.accordion-modul .acc-item {
    border-bottom: 1px solid var(--clr-gray);
}
.accordion-modul .acc-btn > p {
    margin: 0;
}
.accordion-modul .icon-container .circle-btn {
    background-color: var(--clr-white);
}
.accordion-modul .circle-btn.arr {
    transform: rotate(135deg);
}
.accordion-modul .circle-btn .arrow-Icon {
    /* width: 14px;
    height: 14px; */
}
.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: clamp(6.25rem, 0rem + 20vh, 17.5rem); /* 20 % hohe */
    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);
    font-weight: 400;
    z-index: 3;
}
.accordion-modul .pill-btn {
    margin-bottom: 20px;
}

/* Slider */
.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: 85%;
    max-width: 1500px;
    z-index: 3;
}
.slider-modul.left .container {
    margin-right: auto;
}
.slider-modul.right .container {
    margin-left: auto;
}
.slider-modul .grid-default {
    gap: 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 .content-container {
    position: relative;
    display: block;
    background: var(--bg-color);
    padding: 40px;
    min-height: 300px;
}
.slider-modul .content-container p {
    margin-bottom: 80px;
}
.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%;
}
.slider-modul.left .tiltet-container {
    transform: rotate(calc(180deg - 25deg));
    left: -30%;
    top: 55%;
}
.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;
    transform: rotate(225deg);
}
.slider-modul .slider_arrow.splide__arrow--next {
    right: 0px;
    transform: rotate(45deg);
}
.slider-modul .content-container > img {
    max-width: 65px;
    max-height: 65px;
}
.slider-modul .splide {
    max-width: 100%;
    left: 0px;
}

/* Text */
.txt-modul .small {
    --col-span: 8;
}
.txt-modul .big {
    --col-span: 12;
    --col-span-sm: 10;
}
.txt-modul .middle {
    text-align: center;
}
.txt-modul .middle.small {
    --col-start: 3;
}
.txt-modul .middle.big {
    --col-start: 2;
}
.txt-modul .right.small {
    --col-start: 5;
}
.txt-modul .right.big {
    --col-start: 3;
}
.txt-modul a {
    background: linear-gradient(90deg, #5E48A4cc, #2593D0cc);
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 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;
}

/* Streifen Modul */
.stripes-modul {
    min-height: 30vh;
}
.stripes-modul .bg-container {
    min-height: 30vh;
    width: 100%;
}
.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%);
    bottom: 220px;
    z-index: 2;
}

.to-top-bot-button {
    position: fixed;
    bottom: 10px;
    left: 50%;
    z-index: 100;
}
.to-top-bot-button .arrow-Icon {
    height: 15px;
    width: 15px;
    transform: rotate(135deg);
    transition: all 0.25s ease;
}
.to-top-bot-button.bottom .arrow-Icon {
    transform: rotate(-45deg);
}
.to-top-bot-button:not(.bottom){
    pointer-events: 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 .links {
    gap: var(--fs-heading-1);
    padding-left: var(--content-padding);
}
footer .links .link-container {
    --col-span: 4;
    gap: 20px;
}
footer .links h4 {
    color: var(--clr-darkgray);
}
footer .links .btn-hover, footer .links button {
    font-size: 18px;
    width: fit-content;
}
footer .link-container button {
    text-transform: uppercase;
}

footer .footer-slider {
    margin-bottom: 50px;
}
.splide{
    width: 200%;
    position: relative;
    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.red-yellow {
    background: linear-gradient(90deg, #EB2C4Ccc, #FFEBA3cc);
}
.stripe.red-orange {
    background: linear-gradient(90deg, #EB2C4Ccc, #FFDA4Bcc);
}
.stripe.red-blue {
    background: linear-gradient(90deg, #5EBEE6cc, #FF6484cc);
}
.stripe.blue-yellow {
    background: linear-gradient(90deg, #5EBEE6cc, #FFEBA3cc);
}
.stripe.blue-blue {
    background: linear-gradient(90deg, #32A8C8cc, #96CFE1cc);
} */


.stripe.violet-blue-green {
    background: linear-gradient(90deg, #A77BB5cc, #08BDE9cc, #65CA9Dcc);
}
.stripe.red-yellow {
    background: linear-gradient(90deg, #F03C31bb, #FFDB4Bbb);                                                                                                                                                                                                                                        
}
.stripe.green-yellow {
    background: linear-gradient(90deg, #33B050cc, #FFDB4Bcc);
}
.stripe.purple-pink-orange {
    background: linear-gradient(90deg, #A77BB5cc, #E4449Fcc, #FF8D36cc);
}
.stripe.purple-darkblue-lightblue {
    background: linear-gradient(90deg, #5E48A4cc, #2593D0cc, #8DC3E6cc);
}
.stripe.pink-lightblue {
    background: linear-gradient(90deg, #E4449Fcc, #8DC3E6cc);
}


.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%;
    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: -7%;
    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%);
}

/* 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);
}



@media (min-width: 768px) {
    .img-text-heading-modul .background-triangle {
        transform: translateY(calc(-93% + 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){
    header .mobile, header .burger {
        display: none;
    }
    .img-text-heading-modul .background-triangle {
        transform: translateY(calc(-84% + 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(-75% - clamp(0rem, -4.688rem + 8.333vh, 3.125rem))); /* cl: 250 -> 0 (900 -> 1000) */
    }
}




@media (max-width:1199px){
    header .desktop {
        display: none;
    }
    header .logo-txt {
        right: 100%;
    }
    .numbers-sideways-modul .txt-container {
        left: 0%;
    }
}

@media (max-width:991px){
    .accordion-modul .content-container {
        width: min(1500px, 95%);
        margin-left: auto;
        padding: 0px var(--content-padding);
        margin-top: 150px;
    }
    .img-text-heading-modul .tiltet-container {
        background-color: var(--clr-white);
        top: calc(60% - 50px + clamp(0rem, -4.167rem + 8.333vw, 3.125rem));
        left: calc(0% - 150px + clamp(0rem, -4.167rem + 8.333vw, 3.125rem));
    }
    .img-text-heading-modul .tiltet-container > img {
        width: 60%;
    }
    .numbers-sideways-modul .bg-container .tiltet-container {
        width: 60vw;
    }
    .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;
    }
}

@media (max-width:767px){
    header .logo-textbox {
        display: none;
    }
    .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)); */
    }
    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;
    }
    footer .bottom-container {
        align-items: start;
        flex-direction: column;
    }
    footer .top-container {
        padding-bottom: 100px;
    }
    .img-text-heading-modul .tiltet-container h1 {
        max-width: 80vw;
        left: 23%;
    }
    .img-text-heading-modul .txt-container > img {
        max-height: 100px;
    }
    .txt-horizontal-modul .txt-container{
        padding-left: var(--content-padding);
        padding-right: var(--content-padding);
    }
    .txt-horizontal-modul .img-container > * {
        max-height: 40vh;
    }
    .hide-mobile {
        display: none;
    }
    .hide-mobile {
        width: 100vh;
    }
}
@media (max-width:595px) {

    .img-text-heading-modul .tiltet-container h1 {
        left: 18%;
    }
    .img-text-heading-modul .tiltet-container > img {
        width: 50%;
        margin-right: calc(200px - clamp(0rem, -6.25rem + 33.333vw, 6.25rem)); /* 200 -> 100 (300 -> 600) */
    }
}
@media (max-width:450px) {
    .numbers-sideways-modul .txt-container {
        left: -10%;
    }
    .numbers-sideways-modul .bigTxt {
        position: relative;
        left: 20%;
    }
}

@media (max-width: 991px) and (max-height: 600px) {
    .img-text-heading-modul .background-triangle {
        transform: translateY(-490px);
        height: 110%;
    }
}