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

:root {
    --clr-white:        #ffffff;
    --clr-lightgray:    #F5F5F7;
    --clr-gray:         #E6EAED;
    --clr-darkgray:     #B0BABF;
    --clr-black:        #141414;

    --clr-darkblue:     #0C384C;
    --clr-black: var(--clr-darkblue);
    /* --clr-gray: red; */

    --color: var(--clr-black);
    --color-hov: var(--clr-gray);
    --background-clr: var(--clr-lightgray);

    --ff-heading: "Segoe UI", sans-serif;
    --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.188rem, 0.625rem + 5vw, 4.375rem);      /* 35 -> 70 */
    --fs-heading-2: clamp(1.563rem, 1.116rem + 1.19vw, 2.188rem);    /* 25 -> 35 */
    --fs-heading-3: clamp(1.125rem, 0.882rem + 0.778vw, 1.563rem);  /* 18 -> 25 */
    --fs-heading-4: clamp(1.125rem, 1.056rem + 0.222vw, 1.25rem);  /* 15 -> 17 */
    --fs-txt: clamp(0.938rem, 0.868rem + 0.222vw, 1.063rem); /* 15 -> 17 */
    --fs-txt-small: clamp(0.813rem, 0.743rem + 0.222vw, 0.938rem); /* 13 -> 15 */

    --content-width: 1500px;
    --section-padding: clamp(3.125rem, 1.389rem + 5.556vw, 6.25rem); /* 50px -> 100px */
    --small-padding: clamp(0.938rem, 0.417rem + 1.667vw, 1.875rem); /* 15px -> 30px */
    --header-height: 130px;
}

.content-width {
    transition: all 0.15s ease;
}

body {
    background: var(--clr-black);
    --color: var(--clr-black);
    /* overflow: hidden; */
}
main {
    background: var(--clr-lightgray);
    --anchor-width: 200px;
    min-height: 400px;
}
main section:first-of-type {
    padding-top: var(--header-height);
}
main section:first-of-type.section-padding-top,
main section:first-of-type.section-padding-block {
    padding-top: calc(var(--header-height) + var(--section-padding));
}
main section:last-of-type {
    background: linear-gradient(var(--clr-lightgray), var(--clr-white));
}
section:not(.anchor) {
    --padding: calc(var(--small-padding));
    padding-top: var(--padding);
    padding-bottom: var(--padding);
}
section.section-padding-block {
    padding-top: var(--section-padding);
    padding-bottom: var(--section-padding);
}
section.section-padding-top {
    padding-top: var(--section-padding);
}
section.section-padding-bot {
    padding-bottom: var(--section-padding);
}

p, li {
    line-height: calc(25 / 17);
    font-weight: 500;
}
h1, .txt-container > h1:last-child  {
    margin-bottom: calc(1em * 100 / 70);
}
h1 {
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}
h2, h3{
    font-weight: 900;
    line-height: 1.2;
}
h4 {
    font-weight: 700;
    line-height: 1.3;
}
h2, .txt-container > h2:last-child {
    margin-bottom: 1.5em;
}
h3, .txt-container > h3:last-child {
    /* margin-bottom: 1em */
}

strong {
    font-weight: 900;
}
li:not(:last-child) {
    /* margin-bottom: 0.6em; */
}
.arrow {
    mask-image: url("/resources/imgs/arrow_2.svg");
    mask-size: contain;
    mask-repeat: no-repeat;
    background: var(--color);
    display: block;
    height: 14px;
    width: 14px;
}
.btn-hover, .btn-hover > p{
    position: relative;
    margin-bottom: 0px;
}
.btn-hover::after {
    content: "";
    position: absolute;
    display: block;
    width: 0%;
    border-bottom: 1px solid var(--color);
    height: 0px;
    bottom: 0px;
    transition: all 0.25s ease;
}
.btn-hover:hover::after, .btn-hover:focus::after, .btn-hover.active::after {
    width: 100%;
}
.circle-btn {
    position: relative;
    display: block;
    width: fit-content;
    padding: 15px;
    background-color: var(--clr-gray);
    color: var(--color);
    border-radius: 50px;
    font-size: 16px;
    text-transform: uppercase;
    bottom: 0px;
    overflow: hidden;
    --radius: 80px ;
}
.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: 16px;
    font-weight: 600;
    text-transform: uppercase;
    bottom: 0px;
    overflow: hidden;
    --radius: 300px ;
}
.pill-btn * {
    font-size: 16px;
    font-weight: 600;
}
.pill-btn.flex {
    display: flex;
}
.pill-btn .arrow {
    align-self: center;
    transform: rotate(45deg);
    margin-left: calc(var(--fs-txt-small) - 8px );
    width: calc(var(--fs-txt-small) + 1px );
    height: calc(var(--fs-txt-small) + 1px );
}
.btn-effect {
    position: relative;
    overflow: hidden;
    transition: color 0.25s ease, background 0.25s ease;
}
.btn-effect:hover {
    background: #65CA9Dcc !important;
    color: var(--clr-white);
}
.btn-effect:hover p {
    color: var(--clr-white);
}
.btn-effect:hover .arrow-Icon {
    background-color: var(--clr-white);
}
.btn-effect:hover::after {
    content: "";
}
.btn-effect::after {
    background: radial-gradient(circle closest-side, #A77BB5cc, #08BDE9cc, 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: 0;
    transform: translate(var(--offset-X), var(--offset-Y));
}
.btn-effect > * {
    position: relative;
    z-index: 1;
    margin: 0;
}
.btn-effect:hover .search-icon,
.btn-effect:hover .arrow::before,
.btn-effect:hover .arrow::after{
    background-color: var(--clr-white);
}
section:not(.footer_chapter_bar) .btn-effect:hover span {
    background-color: var(--clr-white);
}

/* .txt-effect {
    display: block;
    overflow: hidden;
    position: relative;
}
.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;
} */
.btn-hover {
    transition: all 0.25s ease;
}
.btn-hover-txt:hover { /* ungenutzzt */
    background: linear-gradient(90deg, #5E48A4cc, #2593D0cc);
    background-clip: border-box;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.txt-effect:hover,
.txt-gradient {
    background: linear-gradient(90deg, #5E48A4cc, #2593D0cc);
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.hidden {
    display: none;
}


/* Header */
header {
    position: fixed;
    transition: top 0.25s ease;
    z-index: 99;
    --color-hov: var(--clr-black);
    width: 100%;
    height: var(--header-height);
}
header .logo {
    z-index: 100;
}
header .logo img {
    width: clamp(12.5rem, 8.036rem + 14.286vw, 18.75rem); /* 200 -> 300 */
}
header .level-1 a {
    font-weight: var(--fw-semibold);
}
header .level-1.active a {
    background: linear-gradient(90deg, #5E48A4cc, #2593D0cc);
    /* background-color: transparent; */
    /* color: #5E48A4cc; */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
header .search-icon {
    mask-image: url("/resources/imgs/search.svg");
    mask-size: contain;
    mask-repeat: no-repeat;
    background-color: var(--color);
    display: block;
    transition: all 0.25s ease;
}
header .search-icon:hover {
    background-color: var(--color-hov);
}

/* Header Desktop */
header .navi-desktop {
    padding-bottom: 20px;
    padding-top: 20px;
    font-size: var(--fs-txt);
    margin: 0;
    max-width: unset;
    position: relative;
    z-index: 99;
    background-color: var(--clr-white);
}
header .navi-desktop nav {
    width: 100%;
    max-width: 1050px;
    margin-left: 50px;
}
header .navi-desktop .navi {
    gap: clamp(1.25rem, -1.563rem + 3.75vw, 3.125rem); /* 20 -> 50 (1200->2000) */
}

header .navi .level-1 a {
    /* margin-right: 50px; */
}

header .navi-desktop .lang-container {
    width: 40px;
    height: 40px;
    margin-right: 10px;
    font-weight: var(--fw-semibold);
    z-index: 10;
    transition: all 0.5s ease;
}
header .lang-container > * {
    border-radius: 50px;
    position: absolute;
    z-index: 2;
    top: 0px;
    backface-visibility: hidden;
    height: 100%;
    width: 100%;
    transition: all 0.5s ease;
    transform-style: preserve-3d;
}
header .lang-container .lang-box {
    transform: rotateY(-180deg);
}
header .lang-container.open .lang-box {
    transform: rotateY(0deg);
}
header .lang-container .open-lang {
    transform: rotateY(0deg);
}
header .lang-container.open .open-lang {
    transform: rotateY(180deg);
}
header .lang-container .lang-box .active {
    display: none;
}







/* header .navi-desktop .lang-container.open .open-lang {
    display: none;
}
header .navi-desktop .lang-box, header .open-lang {
    background-color: var(--clr-white);
    border-radius: 50px;
}
header .navi-desktop .lang-box {
    position: absolute;
    height: 40px;
    transition: width 0.25s ease;
    overflow: hidden;
    width: 40px;
}
header .navi-desktop .open .lang-box {
    position: absolute;
    width: 80px;
} */



/* DAS HIER UNGENUTZT */
/* header .navi-desktop .lang-box a:nth-child(2) {
    position: relative;
    right: 40px;
    transition: all 0.25s ease;
}
header .navi-desktop .open .lang-box a:nth-child(2) {
    right: 0px;
} */


/* header .navi-desktop .open-lang {
    --background-clr: var(--clr-white);
    background-color: var(--background-clr);
    color: var(--color);
    width: 40px;
    height: 40px;
    position: absolute;
    z-index: 2;
}
header .navi-desktop .open-lang p {
    z-index: 1;
    margin-bottom: 0px;
}
header .navi-desktop .lang {
    width: 40px;
    height: 40px;
}
header .lang.active {
    display: none;
}

header .navi-desktop .lang p {
    color: unset;
    padding: 10px;  
} */
header .toggle-search {
    height: 40px;
    width: 40px;
    z-index: 1;
    perspective: 100px;
}
header .toggle-search .container {
    position: relative;

}
/* header .toggle-search, header .toggle-search .open-search, header .toggle-search .close-search {
    height: 100%;
    width: 100%;
} */
header .toggle-search .open-search, header .toggle-search .close-search {
    background-color: var(--clr-gray);
    border-radius: 50px;
    position: absolute;
    z-index: 2;
    top: 0px;
    backface-visibility: hidden;
    height: 100%;
    width: 100%;
    transition: all 0.5s ease;
    transform-style: preserve-3d;
}
header .toggle-search .open-search {
    transform: rotateY(0deg);
}
header.search-active .toggle-search .open-search, header.search-active-fast .toggle-search .open-search {
    transform: rotateY(180deg);
}

header .toggle-search .close-search {
    transform: rotateY(-180deg);
}
header.search-active .toggle-search .close-search, header.search-active-fast .toggle-search .close-search {
    transform: rotateY(0deg);
}
header .cross {
    width: 14px;
}
header .cross::after,
header .cross::before {
    content: "";
    display: block;
    width: 15px;
    border-bottom: 2px solid var(--color);
    position: absolute;
    height: 0px;
}
header .cross::after {
    transform: rotate(45deg);
}
header .cross::before {
    transform: rotate(-45deg);
}
header .btn-effect:hover .cross::after,
header .btn-effect:hover .cross::before {
    border-color: var(--clr-white);
}



/*search window */
header .search-window {
    position: absolute;
    height: 100vh;
    width: 100vw;
    left: 100%;
    top: 0px;
    z-index: 10;
    background: var(--clr-lightgray);
    transition: left 0.5s ease;
}
header.search-active .search-window {
    left: 0px;
}
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 {
    /* background: var(--clr-black); */
    border-radius: 50px;
    /* --color: var(--clr-white);
    --color-hov: var(--clr-white); */
    margin-left: 10px;
    height: fit-content;
    position: absolute;
    right: 0px;
}
header .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 Burger */
header .burger-container, header .burger .close-search {
    height: 40px;
    width: 40px;
    background-color: var(--clr-white);
    border-radius: 50px;
    position: absolute;
    z-index: 2;
    top: 0px;
    backface-visibility: hidden;
    transition: all 0.5s ease;
    transform-style: preserve-3d;
}
header .burger-container {
    gap: 5px;
    padding: 10px;
}
header .burger {
    position: relative;
    width: 40px;
    height: 40px;
    z-index: 100;
    overflow: hidden;
    margin-left: 20px;
}
header .burger .b1, header .burger .b2, header .burger .b3 {
    border-bottom: 2px solid var(--color);
    transition: all 0.4s ease ;
    width: 100%;
}
header .burger .burger-container {
    transform: rotateY(0deg);
}
header.mobnav-active .burger .burger-container {
    transform: rotateY(180deg);
}
header .burger .close-search {
    transform: rotateY(-180deg);
}
header.mobnav-active .burger .close-search {
    transform: rotateY(0deg);
}
/* header.mobnav-active .b1 {
    transform: translateY(7px) rotate(135deg);
}
header.mobnav-active .b2 {
    transform: translateX(200%);
}
header.mobnav-active .b3 {
    transform: translateY(-7px) rotate(-135deg);
} */

/* Header mobile */
header .mobile-container {
    position: absolute;
    height: 100vh;
    width: 100%;
    top: 0;
    left: 0;
    padding-top: 100px;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}
header.mobnav-open .mobile-container {
    z-index: 99;
}
header .mobile {
    position: absolute;
    height: 100vh;
    width: 100%;
    top: 0;
    left: 0;
    background-color: var(--clr-lightgray);
    padding-top: 100px;
    z-index: 99;
    transition: left 0.5s ease;
    pointer-events: all;
}
header .mobile:not(.active) {
    left: 100%;
}

header .mobile .level-1 {
    position: relative;
}
header .mobile .level-1.pill-btn {
    /* right: clamp(1.25rem, 0.729rem + 1.667vw, 2.188rem); */
    margin: 10px 0px;
}
header .mobile .level-1 a{
    font-size: var(--fs-heading-2);
    margin: 10px 0px;
    position: relative;
    font-weight: var(--fw-bold);
}
header .mobile .level-1 a::after {
    content: "";
    display: block;
    width: 0%;
    border-bottom: 1px solid var(--color);
    position: absolute;
    height: 0px;
    bottom: 0px;
    transition: all 0.25s ease;
}
header .mobile .level-1:hover a::after {
    width: 100%;
}
header .mobile .level-1 .arrow {
    height: 10px;
    width: 20px;
    transform: rotate(90deg);
    position: absolute;
    left: -20px;
}
header .mobile .level-1 .arrow {
    display: none;
}
header .mobile .login-buttons {
    position: absolute;
    top: 100px;
    gap: 20px;
    right: 0px;
    margin: 0px;
}

header .mobile .extras {
    margin-top: 10px;
    padding-top: 20px;
    border-top: 2px solid var(--color);
    --color: var(--clr-black);
    --background-clr: var(--clr-white);
    /* --color: var(--clr-white);
    --background-clr: var(--clr-black); */
}
header .mobile .lang-container {
    font-size: var(--fs-heading-3);
    font-weight: var(--fw-semibold);
    margin-right: 20px;
    border-radius: 50px;
    background-color: var(--background-clr);
}
header .mobile .lang-container a{
    width: 50px;
    height: 50px;
}
header .mobile .lang-container a.active{
    width: 40px;
    height: 40px;
    margin: 5px;
    border-radius: 50px;
    background-color: var(--color);
}
header .mobile .lang-container a p{
    color: var(--color);
}
header .mobile .lang-container a.active p{
    color: var(--background-clr);
}
header .mobile .content-width {
    height: 100%;
}
header .mobile .content-width .mobile-nav-links {
    height: 100%;
    position: relative;
    z-index: 2;
}
header .mobile .content-width .mobile-nav-links > div{
    margin-right: 10%;
}

/* header upper bar */
header .top-row {
    padding-top: 5px;
    padding-bottom: 15px;
    z-index: 100;
    /* border-bottom: 1px solid var(--clr-darkblue); */
}
header .extras .lang-container, header .extras .toggle-search {
    display: none;
}
header .navi .level-1:last-of-type a {
    margin: 0;
}
header .toggle-search .open-search,
header .toggle-search .close-search,
header .navi-desktop .open-lang,
header .navi-desktop .lang-box {
    background-color: var(--clr-gray);
}
header .btn-effect:not(.pill-btn) {
    --radius: 100px;
}
header .navi .login {
    padding: 10px 20px;
    background-color: var(--clr-gray);
    border-radius: 50px;
    --radius: 200px;
}
header .navi .login > a{
    display: block;
    overflow: hidden;
    margin: 0;
}
header .navi .login:hover > a{
    color: var(--clr-white);
}
header .navi .login:not(:last-child) {
    margin-right: calc(-1 * clamp(0.625rem, -0.268rem + 2.857vw, 1.875rem));
}
header .login.pill-btn {
    text-transform: unset;
}


header .navi-desktop .open-lang, header .navi-desktop .lang-box,
header .navi-desktop .lang, header .navi-desktop .open .lang-box {
    height: 100%;
    width: 100%;
}
header .toggle-search, header .navi-desktop .lang-container {
    height: 30px;
    width: 30px;
    position: relative;
}
header .navi-desktop .search-icon {
    width: 16px;
    height: 16px;
    margin: 7px;
    overflow: visible;
}

/*anchorNavi (anchors) */
.anchornavi-container {
    --margin-top: 150px;
    position: absolute;
    height: var(--height);
    width: var(--anchor-width);
    left: var(--content-padding);
    margin-top: calc(var(--margin-top) + var(--section-padding));
    font-size: var(--fs-txt-small);
    font-weight: var(--fw-semibold);
}
.anchornavi {
    position: sticky;
    transition: top 0.25s ease;
    top: 140px;
    top: 160px;
    top: calc( 160px + var(--section-padding));
}
.anchornavi a {
    position: relative;
}
.anchor {
    scroll-margin-top: 70px;

}
.anchornavi > a:not(:last-child) {
    margin-bottom: 5px;
}
.anchornavi .arrow {
    transform: rotate(90deg);
    opacity: 0;
    margin-right: 5px;
}
.anchornavi p {
    margin: 0;
    position: relative;
}
.anchornavi a.active .arrow{
    opacity: 1;
}
.anchornavi a.active .txt-effect{
    background: linear-gradient(90deg, #5E48A4cc, #2593D0cc);
    background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* Kacheln Bild + Text Modul */
.tile-modul .grid-default {
    --gap-x-sm: 30px;
    --gap-y: 30px;
}
.tile-modul .tile-container {
    --col-span-lg: 4;
    --col-span-sm: 6;
    --col-span: 12;
    gap: 20px;
    z-index: 3;
}
.tile-modul .col_4 .tile-container,
.tile-modul .col_5 .tile-container  {
    --col-span-lg: 3;
    --col-span-md: 4;
}
.tile-modul img {
    width: 100%;
    object-fit: cover;
}




/*Fullscreen Video/img Modul */
.video-img-modul > img, .video-img-modul > video {
    width: 100%;
    height: clamp(25rem, 18.056rem + 22.222vw, 37.5rem);
    object-fit: cover;
}

/*Contentbreite Gallerie Modul */
.gallery-modul .content-width .img-container{
    overflow: hidden;
}
.gallery-modul .content-width img{
    width: 100%;
    object-fit: cover;
}
.gallery-modul .img-container:not(:last-child) {
    margin-bottom: calc(var(--small-padding) * 2);
}

/* 2 Spalten Modul */
.txt-media-cols-modul .content-width > .grid-default {
    --gap-x-lg: 60px;
}
.txt-media-cols-modul .content-width .center-y {
    align-items: center;
    --gap-y: calc(var(--small-padding) * 2);
}
.txt-media-cols-modul .content-width > h3 {
    max-width: 70%;    
}
.txt-media-cols-modul .left, .txt-media-cols-modul .right {
    --col-span: 12;
    --col-span-lg: 6;
    height: fit-content;
    z-index: 3;
}
.txt-media-cols-modul p strong {
    font-weight: var(--fw-semibold);
}
.txt-media-cols-modul .media-container img {
    width: 100%;
}
.txt-media-cols-modul .content-container > :last-child {
    padding-top: calc(2 * var(--padding));
}
.txt-media-cols-modul .txt-link-container .pill-btn {
    margin-top: 20px;
}
.txt-media-cols-modul .txt-link-container .pill-btn p {
    opacity: 1;
    transform: translate(0);
}

/* Kacheln Modul (Mit Verlinkungen)*/
.tile-link-modul .grid-default {
    --gap-x-sm: 30px;
    --gap-y: 30px;
}
.tile-link-modul .col_2 .tile {
    --col-span-xxl: 6;
}
.tile-link-modul .tile {
    --col-span: 12;
    --col-span-sm: 6;
    --col-span-xxl: 4;
    position: relative;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    z-index: 3;
    overflow: hidden;
}
.tile-link-modul .tile .button{
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: var(--clr-black);
    background: var(--clr-white);
    border-radius: 50px;
    padding: 10px 15px 10px 20px;
    gap: 3px;
}
.tile-link-modul .tile .button p{
    margin: 0px;
}
.tile-link-modul .tile .button .arrow{
    transform: rotate(90deg);
    transition: margin-left 0.25s ease;
}
.tile-link-modul .tile .pill-btn {
    position: absolute;
    margin: clamp(1.25rem, 1.027rem + 0.714vw, 1.563rem); /* 20 -> 25 */
}
.tile-link-modul .tile img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: scale 0.25s ease;
}
.tile-link-modul .tile:hover img{
    scale: 1.05;
}

/* Text Listen Modul */
.text-list-modul .grid-default:not(.top-row) {
    padding: 50px 0px;
    border-bottom: 1px solid var(--clr-darkgray);
    gap: 30px;
}
.text-list-modul .grid-default:last-child {
    border-bottom: none;
}
.text-list-modul .top-row h3, .text-list-modul .top-row p {
    color: var(--clr-darkgray);
    text-transform: uppercase;
    margin: 0;
}
.text-list-modul .heading {
    --col-span: 12;
    --col-span-xxl: 2;
    font-weight: 900;
    margin: 0;
}
.text-list-modul .txt_l {
    --col-span: 12;
    --col-span-md: 8;
    --col-span-xxl: 6;
}
.text-list-modul .txt_r {
    --col-span: 12;
    --col-span-md: 4;
    --col-start-md: 9;
}


/* Linktree Modul (mit Login) */
.linktree-modul .flex-wrap {
    gap: clamp(1.125rem, 0.708rem + 1.333vw, 1.875rem); /* 18 -> 30 */
}
.linktree-modul .txt-container {
    max-width: 1000px;
    margin-bottom: 30px;
}
.linktree-modul * {
    position: relative;
    z-index: 3;
}
.linktree-modul .rex-yform > .content-width {
    padding: 0px !important;
}
.linktree-modul .rex-yform h1 {
    display: none;
}

/* Login-Modul */
.login-window {
    height: fit-content;
    padding-top: 30px;
    min-height: 70vh;
}
.login-window .pill-btn {
    margin-top: 20px;
}
.login-window .datenschutz {
    margin-top: 20px;
    margin-bottom: 20px;
    font-weight: 400;
}
.login-window .formfieldset > * {
    --col-span: 12;
}
.login-window .rex-yform {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    z-index: 3;
}
.login-window .form-group {
    position: relative;
    font-size: var(--fs-txt);
    min-width: clamp(12.5rem, 3.819rem + 27.778vw, 28.125rem);
    max-width: 700px;
    background-color: var(--clr-white);
    border-radius: 50px;
    font-weight: 600;
}
.login-window .form-group .control-label {
    position: absolute;
    color: var(--clr-darkgray);
    left: 22px;
    top: 20px;
    opacity: 1;
    text-transform: uppercase;
    transition: all 0.25s ease;
}
.login-window .form-group > input {
    width: 100%;
    height: 100%;
    padding: 20px;
    border: 1px solid var(--clr-darkgray);
    border-radius: 50px;
    color: var(--color);
    transition: all 0.25s ease;
    position: unset;
}
.login-window .form-group.active > input {
    /* padding-top: 25px; */
}
.login-window .form-group.active .control-label {
    opacity: 0;
}
.login-window #yform-formular-field-4 {
    margin-right: 10px;
}
.login-window p {
    /* margin-bottom: var(--fs-heading-2); */
    max-width: 1000px;
}
.login-window button > p {
    margin: 0;
}
.login-window .checkbox {
    align-self: center;
}
.login-window .checkbox input {
    margin-right: 5px;
}
.login-window .btn-primary { /* alter button */
    display: none;
}
.login-window .txt-container {
    gap: 5px;
}
.login-window .txt-container p {
    margin: 0px;
}
.login-window .rex-yform > .content-width {
    gap: 20px;
}
.login-window .alert {
    padding: 0px var(--content-padding);
}
.login-window .output-window {
    padding-top: 250px;
}
.login-window .output-window p {
    max-width: calc(var(--content-width) + var(--content-padding) * 2);
}

/* Registrierung */
.login-window .register .formfieldset{
    border: 0;
    gap: 20px;
}
.login-window .register .formfieldset .form-group{
    --col-span: 12;
    --col-span-md: 6;
}
.login-window .register .formfieldset h2,
.login-window .register .form-required,
.login-window .register .btn-effect,
.login-window .register .txt-container {
    --col-span: 12;
}

.login-window .register .form-required {
    font-size: 14px;
}

main > .login-window {
    background: linear-gradient(var(--clr-lightgray), var(--clr-white));
}
main > .login-window > .yform,
main > .login-window > p {
    margin: auto;
    padding-top: 250px;
    padding-bottom: 50px;
}

/* Footer */
footer {
    background: var(--clr-white);
    --color: var(--clr-darkblue);
    color: var(--color);
    font-size: var(--fs-txt-small);
    z-index: 2;
    position: relative;
    padding-bottom: 20px;
    padding-top: 20px;
    font-weight: 700;      
     clip-path: inset( -100vw -100vw 0 );
}
footer .bottom-container {
    position: relative;
    z-index: 1;
}
.to-top-btn {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 50px;
    z-index: 3;
}
footer .link {
    margin-left: 30px;
}
footer .link > *:not(:last-child) {
    margin-right: 30px;
}
footer .bottom-container > span {
    display: none;
    flex-grow: 1;
    text-align: end;
}
footer .copyright p{
    margin-bottom: 0px;
}
footer .outer-container {
    width: 100%;
    height: 1000px;
    overflow: hidden;
    position: absolute;
    bottom: 0px;
    pointer-events: none;
}
footer .tiltet-container {
    bottom: calc(150px + 7vw);
    right: -40%;
}

.footer_chapter_bar {
    background-color: white;
    padding: 60px 0px;
    position: relative;
}
.footer_chapter_bar.hidden {
    display: none;
}
.footer_chapter_bar .prev-arrow, .footer_chapter_bar .next-arrow  {
    gap: 10px;
    z-index: 3;
}
.footer_chapter_bar .prev-arrow {
    flex-direction: row-reverse;
}
.footer_chapter_bar .prev-arrow > p, .footer_chapter_bar .next-arrow > p  {
    margin-bottom: 0px;
}
.footer_chapter_bar .next-arrow{
    text-align: end;
}


/* Footer Arrows */
footer .arrow, .footer_chapter_bar .arrow {
    --arrow-size: 14px;
}
footer .arrow::before, .footer_chapter_bar .arrow::before,
footer .arrow::after, .footer_chapter_bar .arrow::after {
    transition: all 0.5s ease;
    position: relative;
    content: "";
    mask-image: url("/resources/imgs/arrow_2.svg");
    mask-size: contain;
    mask-repeat: no-repeat;
    background: var(--color);
    display: block;
    height: var(--arrow-size);
    width: var(--arrow-size);
}

footer .arrow, .footer_chapter_bar .arrow {
    background: none;
    mask: none;
    overflow: hidden;
    height: var(--arrow-size);
    width: var(--arrow-size);
}
footer .arrow::after {
    top: 9px;
}
footer .arrow::before {
    top: 2px;
}
footer button:hover .arrow::before {
    top: -30px;
}
footer button:hover .arrow::after {
    top: calc(var(--arrow-size) * -1)
}

.footer_chapter_bar .arrow {
    position: relative;
    top: 1px;
}
.footer_chapter_bar .prev-arrow .arrow {
    transform: rotate(-90deg);
}
.footer_chapter_bar .next-arrow .arrow {
    transform: rotate(90deg);
}
.footer_chapter_bar .arrow::after {
    top: 14px;
}
.footer_chapter_bar a:hover .arrow::after {
    top: -14px;
}
.footer_chapter_bar .arrow::before {
    top: 0px;
}
.footer_chapter_bar a:hover .arrow::before {
    top: -28px;
}

/* Media */
@media (min-width: 1600px) {
    footer .tiltet-container {
        right: -650px;
    }
}
@media (max-width: 1249px) {
    header .navi {
        display: none;
    }
    .anchornavi-container {
        display: none;
    }
    header.mobnav-active .mobile {
        position: fixed;
    }
    header.mobnav-active .navi-desktop .flex-y-center {
        position: fixed;
        z-index: 100;
    }
}

@media (min-width: 1250px) {
    header .mobile-container, header .mobile, header .burger {
        display: none;
    }
    
    main:not(.no_anchors) .content-width:not(.navi-desktop) {
        padding-left: calc(var(--content_padding) + 230px - clamp(0rem, -38.333rem + 38.333vw, 14.375rem)); /* 230 -> 0 (1600->2200) */
    }
    .tile-modul .col_5 {
        --grid__columns: 5;
    }
    .tile-modul .col_5 .tile-container {
        --col-span-lg: 1;
    }
}
@media (max-width: 991px) {
    .text-list-modul .top-row {
        display: none;
    }
}
@media (max-width: 768px) {
    footer {
        padding-bottom: 70px;
    }
    footer .bottom-container > div {
        width: 100%;
        margin: 0;
        margin-bottom: 15px;
    }
    footer .top-container .link {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    footer .top-container .link > *{
        width: fit-content;
    }
    footer .bottom-container {
        flex-direction: column-reverse;
    }
    footer .bottom-container .flex-end-x {
        justify-content: start;
    }
    header .navi-desktop .lang-container {
        margin-right: 10px;
    }
    header .burger {
        margin-left: 10px;
    }
    .to-top-btn {
        bottom: 20px;
    }
}

@media (max-width: 765px) {

}

header .stripe {
    position: absolute;
    right: -1500px;
    /* right: calc( clamp(0rem, -5.208rem + 16.667vw, 9.375rem) - 75px); */
    transition: all 0.9s ease;
    max-height: 60%;
    bottom: 0px;
    min-width: 900px;
    opacity: 0.8;
}
.stripe1, .stripe4, .stripe5, .stripe7, .stripe8, .stripe9, .stripe11, .stripe12 {
    right: 1500px;
}
header .stripe7, header .stripe1 {
    display: none;
}
header .stripe1 {
    top: 600px;
}
header .stripe2 {
    top: 200px;
}
header .stripe3 {
    top: 300px;
}
header .stripe4 {
    top: 444px;
}
header .stripe5 {
    top: 500px;
}
header .stripe6 {
    top: 150px;
}
header .stripe7 {
    top: 700px;
}
header .stripe8 {
    top: 780px;
}
header .stripe9 {
    top: 850px;
}
header .stripe10 {
    top: 340px;
}
header .stripe11 {
    top: 1000px;
}
header .stripe12 {
    top: 900px;
}
header .stripe1.visible {
    right: 100px;
}
header .stripe2.visible {
    right: 400px;
}
header .stripe3.visible {
    right: 200px;
}
header .stripe4.visible {
    right: 300px;
}
header .stripe5.visible {
    right: 50px;
}
header .stripe6.visible {
    right: 0px;
}
header .stripe7.visible {
    right: -100px;
}
header .stripe8.visible {
    right: 0px;
}
header .stripe9.visible {
    right: 200px;
}
header .stripe10.visible {
    right: 250px;
}
header .stripe11.visible {
    right: -150px;
}
header .stripe12.visible {
    right: 100px;
}





/* Stripes */
.stripe-container {
    position: relative;
    height: 6%;
}
.stripe-container-1 {
    position: absolute;
    height: 100%;
    top: 0px;
    width: 80%;
    right: 5%;
}
.tiltet-container {
    position: absolute;
    transform: rotate(-25deg);
    width: 140vw;
    height: 5vw;
    /* min-width: calc(800px * 1.4); */
    min-height: calc(800px * 0.05);
    max-width: calc(var(--content-width) * 1.4);
    max-height: calc(var(--content-width) * 0.05);
    z-index: 1;
}

.stripe.violet-blue-green {
    background: linear-gradient(90deg, #A77BB5cc, #08BDE9cc, #65CA9Dcc);
}
.stripe-container .stripe {
    position: absolute;
}

.stripe-container-1 .stripe {
    transform: translateX(100%);
    opacity: 0;
}
.stripe-container-1 .stripe1 {
    width: 38%;
    height: 40%;
    top: -60%;
    right: 18%;
}
.stripe-container-1 .stripe2 {
    /* width: 70%; */
    width: 58%;
    height: 200%;
    top: 0%;
    right: 5%;
}
.stripe-container-1 .stripe3 {
    width: 65%;
    height: 150%;
    top: 100%;
    right: -7%;
    transform: rotate(180deg) translateX(-100%);
}
.stripe-container-1 .stripe4 {
    width: 30%;
    height: 100%;
    top: 280%;
    right: 21%;
}
.stripe-container-1 .stripe5 {
    width: 28%;
    height: 200%;
    top: 400%;
    right: 27%;
}



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

.img-container img, .media-container img, .img-container video, .media-container video{
    opacity: 10%;
    transform: translateY(300px);
}

.txt-container h1, .txt-container h2, .txt-container h3,
.content-container h1, .content-container h2, .content-container h3, .content-container p{
    opacity: 10%;
    transform: translateY(300px);
}
.video-img-modul img, .video-img-modul video {
    opacity: 1%;
}
.container {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    top: 0px;
}
.rotated-container {
    position: relative;
    transform: rotate(-25deg);
    width: 1000px;
    height: calc(1500px - clamp(0rem, -20.833rem + 111.111vw, 62.5rem)); /* 1500 -> 500 */
    bottom: calc(100px - clamp(0rem, -2.083rem + 11.111vh, 6.25rem)); /* 100 -> 0 */
}
/*
.curtain {
    position: absolute;
    width: 130%;
    height: 100%;
    background-color: var(--clr-lightgray);
    left: 0%;
    bottom: 0%;
    transition: all 0.75s ease;
    transform: rotate(-24deg);
}
.curtain.open {
    left: 100%;
    bottom: 50%;
} */