:root {

    --clr-white: #ffffff;
    --clr-lightgray: #E6E6E6;
    --clr-black: #141414;
    --clr-red: #e5023a;
    --clr-red-gradient: linear-gradient(90deg, rgba(229, 2, 58, 1) 0%, rgba(189, 11, 35, 1) 50%, rgba(116, 14, 0, 1) 100%);


    --color: var(--clr-black);
    --color-diff: var(--clr-white);
    --color-hov: var(--clr-black);
    --background-clr: var(--clr-red);

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

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

    /* --fs-heading-1: min(clamp(2.5rem, -0.625rem + 10vw, 8.125rem), clamp(2.5rem, -1.518rem + 12.857vh, 8.125rem)); */
    --fs-heading-1: clamp(2.188rem, 0.625rem + 5vw, 5rem);
    /* 35px -> 80px (Höhe 400-1000)*/
    --fs-heading-2: clamp(1.875rem, 1.528rem + 1.111vw, 2.5rem);
    /* 30px -> 40px */
    --fs-heading-3: clamp(1.25rem, 0.903rem + 1.111vw, 1.875rem);
    /* 20px -> 30px */
    --fs-heading-4: clamp(1.125rem, 0.882rem + 0.778vw, 1.563rem)clamp(1.125rem, 0.882rem + 0.778vw, 1.563rem);
    /* 18px -> 25px */
    --fs-txt-big: clamp(1rem, 0.861rem + 0.444vw, 1.25rem);
    /* 16px -> 20px */
    --fs-txt-small: clamp(0.875rem, 0.771rem + 0.333vw, 1.063rem);
    /* 14px -> 17px */
    --fs-txt: var(--fs-txt-big);
    --fs-button: clamp(1rem, 0.904rem + 0.308vw, 1.25rem);



    --content-width: 1920px;
    --section-padding: clamp(4.688rem, 2.083rem + 8.333vw, 9.375rem);
    /* 50px -> 100px */
    --margin-bottom-50px: calc(var(--fs-heading-3) / 4 * 5);
}

/* Background Img */
.background_img {
    position: fixed;
    height: 100vh;
    width: 100%;
    z-index: -1;
    top: 0px;
}

.background_img img,
.background_img video {
    height: 100vh;
    width: 100%;
    object-fit: cover;
}

/* section.bg-dark {
    background-image: url('/media/edit-2-v2.png');
    background-position: fixed;
} */

.bg-lightgray {
    background-color: var(--clr-lightgray);
}

.bg-white {
    background-color: var(--clr-white);
}

.bg-red {
    background: var(--clr-red-gradient);
    color: var(--clr-white);
    --color: var(--clr-white);
    --color-diff: var(--clr-black);
    --color-hov: var(--clr-white);

}

.bg-red h1 {
    color: var(--clr-white);
}

.bg-white-transparent {
    background: var(--clr-white);
    opacity: 0.5;
}


.txt-white {
    color: var(--clr-white);
    --color: var(--clr-white);
    --color-diff: var(--clr-black);
    --color-hov: var(--clr-white);
}

.txt-black {
    color: var(--clr-black);
    --color: var(--clr-black);
    --color-diff: var(--clr-white);
    --color-hov: var(--clr-black);
}

/* genral */
body {
    width: 100%;
    word-break: break-word;
    --color: var(--clr-black);
    --color-diff: var(--clr-white);
    --color-hov: var(--clr-black);
    background: var(--clr-lightgray);
    font-weight: var(--fw-medium);
}

body.fixed-pos {
    position: fixed;
}

main {
    width: 100%;
}

section {
    padding-top: 50px;
    padding-bottom: 50px;
}

section.outerSection {
    padding-top: 0px;
    padding-bottom: 0px;
    margin-bottom: -1px;
}

h1 {
    line-height: 1;
    margin-bottom: var(--margin-bottom-50px);
    font-weight: 500;
}

h2,
.h2 {
    line-height: 1;
    margin-bottom: var(--margin-bottom-50px);
    font-weight: 500;
}

h3,
.h3 {
    line-height: 1.25;
    margin-bottom: var(--margin-bottom-50px);
    font-weight: 500;

}

h4,
.h4 {
    line-height: 1.25;
    font-weight: 500;
    margin-bottom: var(--margin-bottom-50px);
}

p {
    line-height: 1.4;
    margin-bottom: var(--margin-bottom-50px);
    font-weight: 400;
}

li {
    margin-bottom: 10px;
}

/* Arrow-Button */
.arrow_circle {
    /* height: calc(var(--fs-heading-3) + 2px); */
    width: clamp(2rem, 1.722rem + 0.889vw, 2.5rem);
    aspect-ratio: 1 / 1;
    padding: 10px;
}

.cross_circle {
    /* height: calc(var(--fs-heading-3) + 2px); */
    width: clamp(2rem, 1.722rem + 0.889vw, 2.5rem);
    aspect-ratio: 1 / 1;
    padding: 10px;
    transform: rotate(90deg);
}



.btn-hover:hover .arrow_circle,
.btn-hover:focus .arrow_circle,
.btn-hover:hover .cross_circle,
.btn-hover:focus .cross_circle,
.txt-white>.arrow_circle,
.txt-white>.cross_circle {
    filter: brightness(0) invert(1);
}

.txt-white.btn-hover:hover .arrow_circle,
.txt-white.btn-hover:focus .arrow_circle,
.txt-white.btn-hover:hover .cross_circle,
.txt-white.btn-hover:hover .cross_circle {
    filter: brightness(1) invert(0);
}

[class*="txt-btn"] {
    background-color: var(--clr-lightgray);
    color: var(--color);
    border-radius: 50px;
    padding: 5px var(--fs-heading-3);
    height: fit-content;
    width: fit-content;
    font-size: var(--fs-button);
    display: block;
}

.txt-btn-border {
    /* border: 2px solid var(--color); */
    position: relative;
    z-index: 0;
}

.txt-btn-border:hover,
.txt-btn-border:focus,
.txt-btn-border.active {
    color: var(--color-diff);
}

.txt-btn-border::after {
    position: absolute;
    top: -2px;
    left: -2px;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    content: "";
    /* background: var(--color); */
    background: var(--clr-red-gradient);
    border-radius: 50px;
    z-index: -1;
    scale: 0;
    transition: scale 0.4s ease;
}

.btn:hover {
    color: var(--clr-white);
}

.txt-btn-border:hover::after,
.txt-btn-border:focus::after,
.txt-btn-border.active::after {
    transition: scale 0.4s ease;
    scale: 1;
}

a:hover .txt-btn-border,
a:focus .txt-btn-border,
a.active .txt-btn-border {
    color: var(--color-diff);
}

a:hover .btn-hover .arrow_circle,
a:focus .btn-hover .arrow_circle,
a.active .btn-hover .arrow_circle {
    filter: invert(1);
}

a:hover .txt-btn-border::after,
a:focus .txt-btn-border::after,
a.active .txt-btn-border::after {
    transition: scale 0.4s ease;
    scale: 1;
}

.btn-hover {
    position: relative;
    z-index: 0;
    width: fit-content;
    height: fit-content;
    color: var(--color);
    /* border: 2px solid var(--color); */
    border-radius: 50%;
    min-width: 30px;
    background-color: var(--clr-lightgray);
}

.bg-lightgray .btn-hover {
    background-color: var(--clr-white);
}

.bg-lightgray .txt-btn-border {
    background-color: var(--clr-white);
}

.btn-hover::after {
    position: absolute;
    top: -2px;
    left: -2px;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    content: "";
    /* background: var(--color); */
    background: var(--clr-red-gradient);
    border-radius: 50px;
    z-index: -1;
    scale: 0 0;
    transition: scale 0.4s ease;
}

.btn-hover:hover::after,
.btn-hover:focus::after,
.btn-hover.active::after {
    transition: scale 0.4s ease;
    scale: 1 1;
}

a:hover .btn-hover,
a:focus .btn-hover,
a.active .btn-hover {
    color: var(--color-diff);
}

a:hover .btn-hover::after,
a:focus .btn-hover::after,
a.active .btn-hover::after {
    transition: scale 0.4s ease;
    scale: 1;
}

.btn-footer {
    background-color: transparent;
}

.flex-wrap {
    gap: clamp(0.625rem, 0.451rem + 0.556vw, 0.938rem);
}

.small-txt,
.text-small {
    font-size: var(--fs-txt-small);
}

/* Header & Nav */
header {
    z-index: 100;
}

body:not(.fixed-pos) header {
    position: absolute;
    width: 100%;
}

header nav {
    width: 100%;
    margin-top: 10px;
}

header .content-width {
    padding-top: 35px;
    /* war mal 35px */
    max-height: 125px;
}

header .logo {
    background-image: url("/media/logo_kme.svg");
    width: clamp(12.5rem, 10.764rem + 5.556vw, 15.625rem);
    height: 80px;
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 30px;
}

header.txt-black .logo {
    background-image: url("/media/logo_kme_black.svg");
}



header .navi {
    gap: clamp(1.25rem, -4.375rem + 7.5vw, 3.125rem);
    /* 20 -> 50 (1200->1600)*/
    margin: auto;
    padding-bottom: 0px;
    transition: padding-bottom 0.4s ease;
}

header .burger {
    display: none;
    height: 20px;
    width: 24px;
    overflow: hidden;
}

header .burger .b1,
header .burger .b2,
header .burger .b3 {
    content: '';
    position: relative;
    border: 1px solid var(--color);
    width: 100%;
    --animation-dur: 0.5s;
}

header .b1 {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    top: 0px;
    transition: all 0.5s ease;
}

header.mobnav-open .b1 {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    top: 9px;
    transition: all 0.5s ease;
}

header .b2 {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transition: all 0.5s ease;
}

header.mobnav-open .b2 {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transition: all 0.5s ease;
}

header .b3 {
    width: 50%;
    align-self: flex-end;
    overflow: hidden;
    left: 0px;
    transition: all 0.5s ease;
}

header.mobnav-open .b3 {
    left: 100%;
    transition: all 0.5s ease;
}

header .navi .level-1:has(> button) {
    padding-right: 15px;
}

header .navi .level-1::after {
    display: block;
    content: '';
    position: relative;
    top: 15px;
    opacity: 0%;
    width: 70%;
    left: 15%;
    border-bottom: 3px solid var(--color);
    transition: all 0.5s ease;
}

header .navi .level-1.active::after,
header .navi .level-1:hover::after,
header .navi .level-1:focus::after {
    transition: all 0.5s ease;
    top: 5px;
    opacity: 100%;
    width: 100%;
    left: 0%;
}

header .level-1 button {
    position: relative;
}

header .level-1 button::before {
    --border: 2px solid var(--color);
    content: '';
    position: absolute;
    right: -15px;
    bottom: 7px;
    width: 8px;
    height: 8px;
    border-right: var(--border);
    border-bottom: var(--border);
    transform: rotate(45deg);
    transition: transform 0.25s ease;
}



nav.mobile {
    display: none;
}

header.mobnav-open {
    height: 100vh;
    width: 100%;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

header.txt-white.mobnav-open.mobnav-active {
    background: var(--clr-red-gradient);
}

header.txt-black.mobnav-open.mobnav-active {
    background: var(--clr-lightgray);
}

header .mobile .level-1 {
    margin-bottom: 20px;
    width: fit-content;
}

header .mobile .level-1 button::after,
header .mobile .level-1 button::after,
header .mobile .level-1>a::after,
header .mobile .level-1>a::after {
    display: block;
    content: '';
    position: relative;
    top: 15px;
    opacity: 0%;
    width: 70%;
    left: 15%;
    border-bottom: 3px solid var(--color);
    transition: all 0.5s ease;
}

header .mobile .level-1.active button::after,
header .mobile .level-1:hover button::after,
header .mobile .level-1:focus button::after,
header .mobile .level-1.active>a::after,
header .mobile .level-1:hover>a::after,
header .mobile .level-1:focus>a::after {
    transition: all 0.5s ease;
    top: 5px;
    opacity: 100%;
    width: 100%;
    left: 0%;
}

header.txt-white {
    color: var(--clr-black);
}

header.video {
    background-color: var(--clr-black);
    background: linear-gradient(180deg,
            color-mix(in srgb, var(--clr-black) 100%, transparent) 30%,
            color-mix(in srgb, var(--clr-black) 0%, transparent) 100%);
    padding-bottom: 30px;
}

header.video {
    background-color: var(--clr-black);
    background: linear-gradient(180deg,
            color-mix(in srgb, var(--clr-black) 100%, transparent) 30%,
            color-mix(in srgb, var(--clr-black) 0%, transparent) 100%);
    padding-bottom: 30px;
}

/* Text-Modul */
.txt-modul {
    color: var(--color);
    width: 100%;
}

.txt-modul .grid-default {
    --gap-x-lg: 50px;
}

.txt-modul h2 {
    --col-span: 12;
}

.txt-modul h3 {
    --col-span: 12;
}

.txt-modul .content-width :last-child {
    margin-bottom: 0px;
}

.txt-modul .txt {
    --col-span-sm: 8;
    --col-span: 12;
    margin-bottom: var(--margin-bottom-50px);
}

.txt-modul .txt.width-80 {
    --col-span-sm: 10;
    --col-span: 12;
}

.txt-modul img {
    --col-span: 12;
}

.txt-modul .flex-wrap {
    --col-span: 12;
}

.txt-modul div.content-width.grid-default div.txt p a {
    color: var(--clr-red);
}

/* Text-Modul 2 Spalten */
.txt-media-cols-modul {
    --gap-middle: 40%;
}

.txt-media-cols-modul .grid-default {
    --gap-y-md: 100px;
}

.txt-media-cols-modul .content-container :last-child {
    margin-bottom: 0px;
}

.txt-media-cols-modul .left {
    margin-right: calc(var(--gap-middle) * 0.5);
}

.txt-media-cols-modul .right {
    margin-left: calc(var(--gap-middle) * 0.5);
}

.txt-media-cols-modul .left,
.txt-media-cols-modul .right {
    --col-span-md: 6;
    --col-span: 12;
}

.txt-media-cols-modul .width-40-60 .left,
.txt-media-cols-modul .width-60-40 .right {
    --col-span-md: 4;
    --col-span: 12;
}

.txt-media-cols-modul .width-60-40 .left,
.txt-media-cols-modul .width-40-60 .right {
    --col-span-md: 8;
    --col-span: 12;
}

.txt-media-cols-modul h2 {
    --col-span: 12;
}

.txt-media-cols-modul img {
    margin-bottom: var(--margin-bottom-50px);
}

/* Überschrift + Hintergrund Modul */
.header-modul {
    height: calc(100vh - 120px);
    clip-path: inset(0 0 0 0);
    padding: 0px;
}

.header-modul .content-width {
    height: calc(100vh - 120px);
    position: relative;
    z-index: -1;

}

.header-modul .container {
    padding-bottom: calc(200px - clamp(3.125rem, -0.347rem + 11.111vw, 9.375rem));
    align-items: end;
    align-content: end;
    height: 100%;
    justify-content: space-between;
    padding-top: 100px;
    /* padding-bottom: 5px; */
}

.header-modul .fixed-pos {
    position: fixed;
    width: 100%;
}

.header-modul.height50 {
    height: calc(65vh - 120px);
}

.header-modul.height10 {
    height: calc(20vh - 120px);
}

.header-modul.height50 .container {
    padding-bottom: 0px;
}

.header-modul.height50 .content-width {
    height: calc(65vh - 120px);
}

.header-modul.height50 .content-width h1 {
    margin-bottom: 0px;
}

.header-modul .content-width h1 {

    max-width: 2000px;
}

.header-modul.height50 .content-width {
    padding-bottom: 50px;

}

.header-modul.height30 {
    height: calc(45vh - 120px);
}

.header-modul.height30 .container {
    padding-bottom: 20px;
    /* padding-top: 100px; */

}

.header-modul.height30 .content-width {
    height: calc(45vh - 120px);
}

.header-modul.height30 .content-width h1 {
    margin-bottom: 0px;
}

.header-modul .content-width h1 {

    max-width: 2000px;
}

.header-modul.height50 .content-width {
    padding-bottom: 50px;

}

.img.header-modul h1 {
    text-shadow: 3px 2px 2px black;
}

/* .header-modul.height30 .content-width {
    padding-bottom: 50px;
} */

.header-modul img {
    object-fit: cover;
    height: 100%;
    width: 100%;
    position: relative;
    z-index: -5;
}

.background_img.noImg {
    display: none;
}

.img.header-modul h1 {
    color: var(--clr-white);
}

/* Video Header */
.video-header {
    height: 100vh;
    clip-path: inset(0 0 0 0);
    padding: 0px;
    position: relative;
}

.video-header video {
    height: 100vh;
    width: 100%;
    object-fit: cover;
}

.video-header.height30 {
    height: calc(45vh - 120px);
}

.video-header.height50 {
    height: calc(90vh - 120px);
}

.video-header .splide {
    position: absolute;
    bottom: 0px;
    background: var(--clr-black);
    opacity: 50%;
    width: 100vw;
    display: flex;
    padding-bottom: 20px 0px;
}

.video-header .splide__track {
    align-self: center;
    width: 100%;
}

.video-header .splide__slide a {
    max-height: calc(var(--fs-heading-3) * 3);
    max-width: clamp(9.375rem, -13.194rem + 72.222vw, 50rem);
    filter: brightness(0) invert(100%);
    opacity: 100%;
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: center;
}

.video-header .splide__slide {
    display: flex;
    flex-direction: column;
    justify-content: center;

}

/* Versetzte Bilder Modul */
.offset-img-txt-modul .content-width {
    --gap-x-lg: 50px;
    font-size: var(--fs-txt-small);
}

.offset-img-txt-modul .leftCol,
.offset-img-txt-modul .rightCol {
    --col-span-md: 6;
    --col-span: 12;
    --gap-y-md: 100px;
    height: fit-content;
}

.offset-img-txt-modul .rightCol {
    padding-top: 200px;
}

.offset-img-txt-modul .element-container {
    --col-span-xl: 10;
    --col-span: 11;
    width: 100%;
    height: fit-content;
}

.offset-img-txt-modul .element-container.align-end {
    --col-start-xl: 3;
    --col-start: 2;
}

.offset-img-txt-modul .rightCol .element-container:not(.align-end) {
    --col-start-xl: 3;
    --col-start: 2;
    --col-span-xl: 8;
    --col-span: 10;
}

.offset-img-txt-modul .element-container .img-container {
    --col-span: 12;
    margin-bottom: 30px;
    width: 100%;
}

.offset-img-txt-modul .element-container .img-container img {
    width: 100%;
    height: auto;
    max-height: 800px;
    object-fit: cover;
}

.offset-img-txt-modul .element-container h3 {
    margin-bottom: 0px;
    gap: 25px;
    --col-span-xl: 11;
    --col-span: 12;
    margin-bottom: calc(var(--margin-bottom-50px) / 2);
    align-items: center;
}

.offset-img-txt-modul .element-container p {
    --col-span-xl: 11;
    --col-span: 12;
    max-width: 500px;
    margin-bottom: 0px;
}

.offset-img-txt-modul .element-container .btn-hover {
    height: fit-content;
    width: fit-content;
    --row-start: 4;
    --row-start-xl: unset;
    --col-span: 12;
    --col-span-xl: 1;
    /* justify-self: end; */
}

.offset-img-txt-modul .mobileCol {
    --col-span: 12;
    --gap-y: 100px;
}

.offset-img-txt-modul .mobileCol .mobile-align-end {
    --col-start: 2;
}

/* Versetzte Slider Modul */
.offset-slider-modul .content-width {
    --gap-x-lg: 50px;
    --gap-y: 50px;
}

.offset-slider-modul .leftCol,
.offset-slider-modul .rightCol {
    --col-span: 6;
    height: fit-content;
    /* gap: calc(var(--fs-heading-1) + 20px); 150px */
    --gap-y: calc(var(--fs-heading-1) + 20px);
    /* 150px */
}

.offset-slider-modul .mobileCol {
    --col-span: 12;
    --gap-y: calc(var(--fs-heading-1) + 20px);
    /* 150px */
}

.offset-slider-modul .mobileCol .mobile-align-end {
    --col-start: 2;
}

.offset-slider-modul .mobileCol .element-container {
    --col-span: 11;
}

.offset-slider-modul .element-container {
    width: 100%;
}

.offset-slider-modul .leftCol .element-container.upper {
    --col-span: 12;
}

.offset-slider-modul .leftCol .element-container {
    --col-span: 10;
}

.offset-slider-modul .rightCol .element-container.upper {
    --col-span: 8;
    --col-start: 3;
}

.offset-slider-modul .rightCol .element-container {
    --col-span: 12;
}

.offset-slider-modul .element-container .inside_slider {
    margin-bottom: var(--margin-bottom-50px);
}

.offset-slider-modul .element-container .flex-space-between {
    margin-bottom: calc(var(--margin-bottom-50px) / 2);
    gap: 25px;
    align-items: center;
}

.offset-slider-modul .element-container h3 {
    margin-bottom: 0px;
}

.offset-slider-modul .element-container .txt,
.offset-slider-modul .element-container .txt_long {
    max-width: 600px;
}

.offset-slider-modul .element-container .txt_long {
    overflow: hidden;
    transition: all 1s ease;
    height: 0px;
    margin-bottom: 0px;
}

.offset-slider-modul .element-container.open .txt_long {
    height: var(--height);
    margin-bottom: var(--margin-bottom-50px);
}

.offset-slider-modul .open .cross_circle {
    transform: rotate(270deg);
    transition: all 0.5s ease;
}

.offset-slider-modul .cross_circle {
    transform: rotate(90deg);
    transition: all 0.5s ease;
}

.offset-slider-modul .splide__list {
    display: grid;
}

.offset-slider-modul .splide__slide {
    height: 100%;
    grid-row: 1;
    grid-column: 1;
    transform: translateX(0px) !important;
}

.offset-slider-modul .splide .splide__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.offset-slider-modul .splide__arrows {
    position: absolute;
    width: 100%;
    gap: clamp(0.938rem, 0.59rem + 1.111vw, 1.563rem);
    transform: translateY(-100%);
    padding: 25px;
}

.offset-slider-modul .splide__arrows.hidden {
    display: none;
}

.offset-slider-modul .splide__arrow {
    position: relative;
    left: 0px;
    right: 0px;
    height: unset;
    width: unset;
    background-color: transparent;
    transform: translateY(0%);
}

.offset-slider-modul .splide__arrow--prev {
    transform: rotate(180deg);
}

.offset-slider-modul .splide__arrow {
    position: relative;
}

.splide__arrow:not(:disabled) {
    opacity: 1;
}

.offset-slider-modul li {
    height: fit-content;
}


/* Link Liste Modul */
.link-list-modul .content-container {
    border-bottom: 1px solid var(--color);
    align-items: center;
    position: relative;
}

.link-list-modul .content-container h3 {
    --col-span-md: 8;
    --col-span: 12;
    margin-bottom: 0px;
    margin-top: 50px;
    margin-bottom: 50px;
}

.link-list-modul .content-container .txt-btn-border {
    --col-span-md: 4;
    --col-span: 12;
    background-color: var(--clr-white);
    --color: var(--clr-black);
    --color-diff: var(--clr-white);
    border: 0px;
    justify-self: end;
}

.link-list-modul .content-container .txt-btn-border::after {
    top: 0px;
    left: -1px;
    height: 100%;
    width: calc(100% + 2px);
}

/* .link-list-modul .content-container .img-container {
    position: absolute;
    z-index: 2;
    max-width: 400px;
    overflow: hidden;
    justify-self: end;
    align-self: start;
    --col-span-lg: 3;
    --col-span: 6;
    --col-start-lg: 6;
    --col-start: 7;
    --row-start: 2;
    --row-start-lg: auto;
}
.link-list-modul .content-container.offset .img-container {
    --col-start-lg: 7;
}
.link-list-modul .content-container img {
    opacity: 0%;
    max-height: 0%;
    transform: translateY(-100%);
    transition: all 0.4s ease;
}
.link-list-modul .content-container:hover img {
    opacity: 100%;
    max-height: 100%;
    transform: translateY(0%);
    transition: all 0.4s ease;
} */

/* 3 Spalten Kacheln Modul */
.tiles-modul .grid-default {
    --gap-x-lg: 50px;
    --gap-x-md: 25px;
    --gap-y-lg: 150px;
    --gap-y: 75px;
    justify-items: center;
}

.tiles-modul .tile-container {
    --col-span-xl: 4;
    --col-span-md: 6;
    --col-span: 12;
    gap: var(--fs-heading-4);
    max-width: 600px;
    width: 100%;
}

.tiles-modul .tile-container img {
    --col-span: 1;
    height: 40px;
    width: 40px;
}

.tiles-modul .tile-container .img-gap {
    --col-span: 1;
    height: 40px;
    min-width: 40px;
}

.tiles-modul .tile-container h4,
.tiles-modul .tile-container .h4 {
    --col-start: 2;
    --col-span: 11;
    display: inline-block;
}

.tiles-modul .tile-container p {
    --col-start: 2;
    --col-span: 11;
    font-size: var(--fs-txt-small);
    margin-bottom: 0px;
}

/* Sponsoren */
.sponsor-modul .splide__slide {
    display: flex;
    align-items: center;
    justify-items: center;
    justify-content: center;
}

.sponsor-modul .splide__slide img {
    max-height: calc(var(--fs-heading-3) * 3);
    max-width: clamp(9.375rem, -13.194rem + 72.222vw, 50rem);
}



/* Referenzen Modul*/
.reference-modul .header-container {
    margin-bottom: calc(var(--margin-bottom-50px)*3);
}

.reference-modul .header-container h2 {
    margin-bottom: -5px;
}

.reference-modul h4,
.reference-modul .h4 {
    font-size: clamp(1.125rem, 0.909rem + 0.692vw, 1.688rem);
    margin-bottom: 5px;
}

.reference-modul .content-container img:not(.arrow_circle) {
    margin-bottom: 30px;
    width: 100%;
    /* height: auto; */
    object-fit: cover;
    max-height: 350px;
}

.reference-modul .ref-grid {
    display: grid;
    grid-template-columns: 1fr auto;
}

.reference-modul .content-container {
    position: relative;
    left: var(--content-padding);
}

.reference-modul .content-container span {
    --col-span: 10;
    font-size: var(--fs-txt);
}

.reference-modul .content-container .arrow_circle {
    --col-span: 2;
    --col-start: -1;
}

.reference-modul .content-container a {
    height: fit-content;
}

.reference-modul .content-container p {
    --col-span: 10;
    font-size: var(--fs-txt-small);
    margin-bottom: 0px;
}

/* Referenz-Übersicht mit allen Modul */
.references-all-modul .filter-container {
    margin-bottom: calc(var(--margin-bottom-50px)*3);
}

.references-all-modul .ref-grid {
    display: grid;
    grid-template-columns: 1fr auto;
}

.references-all-modul .item-container {
    --gap-x-md: calc(var(--margin-bottom-50px));
    --gap-y: var(--margin-bottom-50px);
}

.references-all-modul h3,
.references-all-modul .h3 {
    font-size: var(--fs-txt-big);
}

.references-all-modul p {
    font-size: var(--fs-txt-small);
}

.references-all-modul .col3-container {
    --gap-x: 50px;
}

.references-all-modul .col2-container {
    --gap-x: 30px;
}

.references-all-modul .col1,
.references-all-modul .col2,
.references-all-modul .col3 {
    gap: 50px;
}

.references-all-modul .item-container .col3 {
    --col-span: 4;
}

.references-all-modul .item-container .col2 {
    --col-span: 6;
}

.references-all-modul .item-container .col1 {
    --col-span: 12;
}

.references-all-modul .item-container .item>img {
    margin-bottom: 30px;
    width: 100%;
}

.references-all-modul .item-container .txt-container p {
    --col-span: 10;
    margin-bottom: 5px;
}

.references-all-modul .item-container .txt-container .btn-hover {
    --col-span: 2;
    --row-span: 2;
    justify-self: end;
}

.references-all-modul .btn-container {
    margin-inline: auto;
    margin-top: calc(var(--margin-bottom-50px)*3);
    width: fit-content;
}

.references-all-modul .btn-container.hide {
    display: none;
}

/* Team Modul */
.team-modul {
    --sidepadding: 25px;
}

.team-modul .grid-default {
    --gap-x-lg: var(--margin-bottom-50px);
    --gap-x-sm: 25px;
    --gap-y: var(--margin-bottom-50px);
}

.team-modul .element-container {
    --col-span-xl: 4;
    --col-span-md: 6;
    --col-span: 12;
}

.team-modul .img-container {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    margin-bottom: 20px;
    overflow: hidden;
}

.team-modul .img-container button {
    position: absolute;
    transform: translateY(calc(-100% - var(--sidepadding)));
    right: var(--sidepadding);
}

.team-modul .img-container .filter {
    position: absolute;
    transform: translateY(0%);
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.3);
    -webkit-backdrop-filter: blur(20px);
    /* ganz ganz buggy bei ios */
    backdrop-filter: blur(20px);
    transition: transform 0.5s ease;
}

.team-modul .img-container p {
    position: absolute;
    transform: translateY(0px);
    left: var(--sidepadding);
    margin-bottom: 10px;
    padding-right: 80px;
    font-size: var(--fs-txt-small);
    transition: all 0.5s ease;
}

html body main section.bg-white.references-all-modul .txt-container p
/* .team-modul .img-container.open p {
    transform: translateY(calc(-100% - var(--sidepadding)));
} */

.team-modul .img-container>img {
    width: 100%;
}

.team-modul .txt-container p {
    margin-bottom: 10px;
    /* color: var(--clr-lightgray); */
}

/* .team-modul .txt-container .name-container {
    margin-bottom: 0px;
    color: var(--clr-red)
}*/
.team-modul .txt-container a.small-txt:hover {
    color: var(--clr-red);
}

.team-modul .filter {
    --col-span: 12;
}

.team-modul .team-filter-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

/* Akkordeon mit Bild */
.accordion-modul {
    overflow: visible;
}

.accordion-modul .acc-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    column-gap: 200px;
}

.accordion-modul .content-width {
    --gap-y: 50px;
}

.accordion-modul .content-container {
    --col-span-md: 7;
    --col-span: 12;
    --row-start: 2;
    --row-start-md: 1;
}

.accordion-modul .img-container {
    --col-span-md: 4;
    --col-span: 12;
    --col-start: 1;
    --col-start-md: 9;
}

.accordion-modul .imgLeft .content-container {
    --col-start: 1;
    --col-start-md: 6;
}

.accordion-modul .imgLeft .img-container {
    --col-start-md: 1;
}

.accordion-modul .img-container img {
    position: sticky;
    top: 50px;
    max-height: 350px;
}

.accordion-modul .flex-center-y {
    display: grid;
    grid-template-columns: auto 1fr auto;
}

.accordion-modul .header {
    display: grid;
    grid-template-rows: auto;
}

.accordion-modul .header .h3 {
    margin: unset;
    font-size: var(--fs-heading-3);
}

.accordion-modul .acc-item {
    border-bottom: 1px solid var(--color);
    padding-bottom: 50px;
    padding-top: 15px;
}

.accordion-modul .acc-text {
    padding-top: 25px;
}

.accordion-modul .acc-item .btn-hover {
    margin-right: 20px;
    /* transform: rotate(0deg); */
    transition: transform 0.5s ease;
}

.accordion-modul .acc-item.open .btn-hover,
.accordion-modul .acc-item:hover .btn-hover {
    margin-right: 20px;
    /* transform: rotate(180deg); */
    transition: transform 0.5s ease;

}

.accordion-modul .cross_circle {
    transition: transform 0.5s ease;
}

.accordion-modul .acc-item.open .cross_circle {
    transform: rotate(-90deg);
    transition: transform 0.5s ease;

}

.accordion-modul .acc-item h4,
.accordion-modul .acc-item .h4 {
    margin-top: 50px;
    margin-bottom: 50px;
}

.accordion-modul .acc-item .acc-btn {
    width: 100%;
}

.accordion-modul .acc-item:not(.open) .acc-content {
    display: none;
}

.accordion-modul-jobs h3 {
    color: var(--clr-red);
}

.accordion-modul-jobs .beam-txt {
    color: var(--clr-red);
}

/* partner-modul */
.partner-modul .blocks-container {
    --gap: 30px;
    padding: 0 var(--content-padding);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(max(calc(145px - var(--gap)), calc(20% - var(--gap))), 350px), 1fr));
    gap: var(--gap);
    max-width: 2000px;
    margin: 0 auto;
}

.partner-modul .blocks-element {
    width: 100%;
    background: var(--clr-white);
    position: relative;
    aspect-ratio: 1/1;

}

.partner-modul .blocks-element img {
    width: 100%;
    height: 100%;
}

.partner-modul .blocks-element>* {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 15%;
    top: 0;
    left: 0;
    display: block;
}

@supports (-webkit-touch-callout: none) {
    .accordion-modul .acc-item.transition .acc-content {
        display: none;
    }
}

/* Akkordeon Jobs*/
.accordion-modul-jobs .acc-item .acc-btn {
    width: 100%;
}

.accordion-modul-jobs .acc-item.open {
    --color: var(--clr-white);
    --color-diff: var(--clr-white);
    --color-hov: var(--clr-white);
    background: var(--clr-red-gradient);
}

.accordion-modul-jobs div.acc-item.content-width.open div.header-container h3 {
    color: var(--clr-white);
}

.accordion-modul-jobs div.acc-item.content-width.open div.beam-txt {
    color: var(--clr-white);
}

.accordion-modul-jobs div.acc-item.content-width.open a.txt-btn-border {
    color: var(--clr-black);
}

.accordion-modul-jobs div.acc-item.content-width.open a.txt-btn-border:hover {
    color: var(--clr-white);
}

.accordion-modul-jobs .header-container {
    --gap-x: 25px;
    margin-top: 50px;
    margin-bottom: 50px;
    flex-grow: 1;
}

.accordion-modul-jobs .acc-item:not(.open) {
    border-bottom: 1px solid var(--color);
}

.accordion-modul-jobs .header-container h4,
.accordion-modul-jobs .header-container .h4 {
    --col-span: 7;
    --col-span-sm: 8;
    margin-bottom: 0px;
}

.accordion-modul-jobs .header-container .beam-txt {
    --col-span: 4;
    --col-span-sm: 3;
}

.accordion-modul-jobs .btn-hover {
    --col-span: 1;
    justify-self: end;
    margin-left: var(--margin-bottom-50px);
    min-width: 36px;
}

.accordion-modul-jobs .acc-item .cross-box {
    transform: rotate(45deg);
    transition: all 0.5s ease;
}


.accordion-modul-jobs .acc-item.open .arrow-box {
    display: none;
}

.accordion-modul-jobs .acc-item:not(.open) .cross-box {
    display: none;
}

.accordion-modul-jobs .acc-item:not(.open) .acc-content {
    display: none;
}

.accordion-modul-jobs .acc-content {
    padding-bottom: var(--margin-bottom-50px);
    --gap-x-sm: var(--margin-bottom-50px);
}

.accordion-modul-jobs .acc-content .panel-txt {
    --col-span-lg: 4;
    --col-span-sm: 6;
    --col-span: 12;
}

html body main section.bg-lightgray.accordion-modul-jobs div.accordion div.acc-item.content-width.open button.acc-btn.panel-head div.flex-center-y div.btn-hover.cross-box img.cross_circle {
    transform: rotate(-135deg);
    transition: all 0.5s ease;
}

.accordion-modul-jobs .acc-content .panel-txt span {
    color: var(--color);
}

.accordion-modul-jobs .acc-content .panel-txt p,
.accordion-modul-jobs .acc-content .panel-txt ul {
    margin-top: 20px;
    font-size: var(--fs-txt-small);
}

.accordion-modul-jobs .acc-content .lower-txt,
.accordion-modul-jobs .acc-content .txt-btn-border {
    --col-span: 12;
}

.accordion-modul-jobs .acc-content .lower-txt span {
    margin-bottom: 20px;
    color: var(--clr-white);
}

.accordion-modul-jobs .acc-content .lower-txt p {
    max-width: 600px;
    font-size: var(--fs-txt-small);
}

/* News-Artikel */
.news-artikel-modul .content-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 50px;
    padding: 50px;

}

.news-artikel-modul .txt-container {
    font-size: (var(--fs-txt-small));
}

.news-artikel-modul .grid-default {
    --gap-y-md: 100px;
}

.news-artikel-modul a {
    color: var(--clr-red);
}

.news-artikel-modul .flex-wrap {
    padding-top: 30px;
}

/* Events */

/* Text + Buttons Modul */
.txt-button-modul .txt-container {
    --col-span: 12;
    --col-span-md: 4;
}

.txt-button-modul .btn-container {
    --col-span: 12;
    --col-span-md: 7;
    --col-start: 1;
    --col-start-md: 6;
    height: fit-content;
}

.txt-button-modul .btn-container .txt-btn-border {
    margin-bottom: 5px;
}

/* Projekt / Referenz Modul */

.project-modul .slider-top .splide__slide img {
    width: 100%;
    height: clamp(18.75rem, 4.861rem + 44.444vw, 43.75rem);
    object-fit: cover;
}

.project-modul .slider-top .splide__arrows.hidden {
    display: none;
}

.project-modul .slider-top .splide__arrows .content-width {
    gap: clamp(0.938rem, 0.59rem + 1.111vw, 1.563rem);
}

.project-modul .slider-top .splide__arrows {
    position: absolute;
    width: 100%;
    transform: translateY(-100%);
    padding: 25px;
}

.project-modul .slider-top .splide__arrow--prev {
    transform: rotate(180deg);
}

.project-modul .content-width {
    --gap-x-sm: 50px;
    margin-top: 25px;
}

.project-modul .txt-icon {
    --col-span: 12;
    height: calc(2* var(--fs-heading-3));
    max-width: clamp(9.375rem, 4.167rem + 16.667vw, 18.75rem);
    margin-top: var(--margin-bottom-50px);
    margin-bottom: var(--margin-bottom-50px);
    filter: brightness(0%) invert(1) brightness(17%);
}

.project-modul.txt-white .txt-icon {
    filter: brightness(0%) invert(1);
}


.project-modul .text {
    --col-span: 12;
    --col-span-md: 9;
    --col-span-xl: 5;
    font-size: var(--fs-txt-small);
}

.project-modul .rechts {
    --col-span: 12;
    --col-span-md: 9;
    --col-span-xl: 6;
    --col-start: 1;
    --col-start-md: 4;
    --col-start-xl: 7;
    padding-top: 15%;
}

.project-modul .table-modul {
    padding-bottom: 30px;
    display: flex;
    justify-content: center;
}

.project-modul .buttonsWithTxt {
    margin-top: 30px;
}

.project-modul .buttonsWithTxt .buttons {
    gap: 25px;
    margin-bottom: var(--margin-bottom-50px);
}


.project-modul .buttonsWithTxt .element-container:not(.open) {
    display: none;
}

.project-modul .img-container {
    --col-span: 12;
    --gap-x-lg: 50px;
    margin-bottom: var(--margin-bottom-50px);
}

.project-modul .img-container img {
    margin-bottom: calc(var(--margin-bottom-50px)*2);
}

.project-modul .img-container .first-img {
    --col-span-md: 7;
    --col-span: 10;
    width: 100%;
}

.project-modul .img-container .second-img {
    --col-span-md: 4;
    --col-span: 10;
    width: 100%;
    --col-start-md: 9;
    --col-start: 3;
    align-self: center;
}

.project-modul .img-container .left-col {
    --col-span-md: 5;
    --col-span: 10;
    align-self: center;
}

.project-modul .img-container .right-col {
    --col-span-md: 6;
    --col-span: 10;
    --col-start-md: 7;
    --col-start: 3;
}

.project-modul .txt-container {
    --col-span: 12;
    --gap-x-sm: var(--margin-bottom-50px);
    --gap-y: var(--margin-bottom-50px);
}

.project-modul h2 {
    --col-span: 12;
}

.project-modul .txt-container .column {
    --col-span-xl: 3;
    --col-span-lg: 4;
    --col-span-sm: 6;
    --col-span: 12;
}

.project-modul .allServices {
    --col-span: 12;
    margin-bottom: var(--margin-bottom-50px);
    --gap-x-md: var(--margin-bottom-50px);
    --gap-y: var(--margin-bottom-50px);
}

.project-modul .servicesContainer {
    --col-span-xl: 3;
    --col-span-md: 6;
    --col-span: 12;
}

.project-modul .servicesContainer .grid-heading {
    text-transform: uppercase;
    margin-bottom: var(--margin-bottom-50px);
}

.project-modul .servicesContainer ul {
    font-size: var(--fs-txt-small);
}

.project-modul .txt-container .reference-link-row .reference-back-link {
    transform: rotate(180deg);
}

.project-modul .flex-column {
    flex-direction: column;
}

.project-modul .reference-link-row .txt-btn-border {
    margin: auto;
}

.project-modul .slider-bot {
    margin-top: var(--margin-bottom-50px);
}

.project-modul .slider-bot .splide__slide {
    padding-top: 20px;
    padding-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    --rotation: 3deg;
}

.project-modul .slider-bot .splide__slide img {
    /* transform: rotate(var(--rotation)); */
    position: relative;
}

.project-modul .slider-bot .splide__slide img.offset {
    /* transform: rotate(calc(var(--rotation)* -1)); */
}

.project-modul .slider-bot .splide__arrows {
    position: absolute;
    top: 0px;
    height: 100%;
    width: 100%;
    display: flex;
}

.project-modul .slider-bot .splide__arrows .content-width {
    position: relative;
}

.project-modul .slider-bot .slider_arrow {
    position: absolute;
    z-index: 1;
    top: 50%;
    transform: translateY(50%);
    width: fit-content;
}

.project-modul .slider-bot .splide__arrow--prev {
    transform: translateY(50%) rotate(180deg);
    left: var(--content-padding);
}

.project-modul .slider-bot .splide__arrow--next {
    right: var(--content-padding);
}

.project-modul .txt-container .reference-link-row {
    --col-span: 12;
    margin-top: calc(var(--margin-bottom-50px)*2);
}

/* Slider-Modul */
.slider-modul .splide__slide {
    padding-top: min(40px, 15%);
    padding-bottom: min(40px, 15%);
    display: flex;
    justify-content: center;
    align-items: center;
    /* transition: scale 0.25s ease; */
    max-height: 700px;
}

.slider-modul .splide__slide.is-active img {
    /* right: calc(-1 * clamp(4.375rem, -0.139rem + 14.444vw, 12.5rem)); */
}

/* .slider-modul .splide__slide img {
    transform: rotate(var(--rotation));
    position: relative;
}

.slider-modul .splide__slide img.offset {
    transform: rotate(calc(var(--rotation)* -1));
} */

.slider-modul .splide__arrows {
    position: absolute;
    top: 0px;
    height: 100%;
    width: 100%;
    display: flex;
}

.slider-modul .content-width {
    position: relative;
}

.slider-modul .slider_arrow {
    position: absolute;
    z-index: 1;
    top: 50%;
    transform: translateY(50%);
}

.slider-modul .btn-hover {
    background-color: var(--clr-white);
    border-color: var(--clr-white);
}

.slider-modul .splide__arrow--prev {
    transform: rotate(180deg);
}

/* Tabelle */
.Daten-Tabelle .headImg {
    position: relative;
    height: 0;
    padding-bottom: 33%;
    overflow: hidden;
    width: 100%;
    margin-top: 50px;
}

.Daten-Tabelle h1 {
    font-family: 'Barlow', sans-serif;
    font-weight: 500;
}

.Daten-Tabelle .profil {
    margin-top: 0;
    margin-bottom: -30px;
}

.Daten-Tabelle .headImg img {
    object-fit: cover;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
}

.Daten-Tabelle .headImg p {
    position: static;
    top: 50%;
    left: 50%;
    transform: none;
    font-size: 40px;
    font-family: 'Barlow', sans-serif;
    font-weight: 500;
    color: #fff;
    line-height: 135%;
    margin: 0;
}

/* Kontaktformular */
.contact-modul {
    font-size: var(--fs-txt-small);
    --padding-contact: 13px 26px 10px 26px;
}

.contact-modul .txt-container {
    max-width: 900px;
}

.contact-modul .txt-container .text {
    --col-span: 12;
}

.contact-modul .txt-container .col-left {
    --col-span: 12;
    --col-span-sm: 6;
    margin-right: 20px;
}

.contact-modul .txt-container .col-right {
    --col-span: 12;
    --col-span-sm: 6;
    margin-left: 20px;
}

.contact-modul .content-width>.flex-wrap {
    margin-bottom: 130px;
}

.contact-modul .contact-container {
    margin-bottom: 0px;
}

.contact-modul iframe {
    min-width: 400px;
}

/* footer */
footer {
    padding-top: var(--margin-bottom-50px);
    padding-bottom: var(--margin-bottom-50px);
    background-color: var(--clr-red);
    background: var(--clr-red-gradient);
    --padding-contact: 13px 26px 10px 26px;
    font-size: var(--fs-txt-small);
    overflow: hidden;
    position: relative;
}

footer .content-width {
    display: grid;
    grid-template-columns: 7fr 1fr;
    overflow: hidden;

}

footer .logo {
    background-image: url("/media/bildmarke.svg");
    width: 450px;
    height: 450px;
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 30px;
    display: inline;
    position: absolute;
    right: -88px;
    margin-top: -25px;
}

footer .footer-container {
    gap: 50px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    position: relative;
    z-index: 10;
    margin-bottom: 80px;
}

footer .social-media-container .btn-hover {
    border-width: 1px;
}

footer .social-media-container {
    align-self: flex-end;
    position: absolute;
    right: 45px;
    bottom: 0;
}

footer a.btn-hover {
    padding: unset;
}

footer .social-media-container img {
    height: 50px;
    width: 50px;
    padding: unset;
    margin: 10px;
}

footer .btn-hover::after {
    background: unset;
    color: var(--clr-black);
}

footer .social-media-container a:not(.last-child) {
    margin-right: 10px;
}

footer .links-container {
    gap: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));

}

footer .links {
    gap: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

footer .datenschutz {
    display: inline-block;
    max-width: fit-content;
}

footer .links a:hover {
    color: var(--clr-black);
}


@media (max-width: 410px) {
    footer .to-top-btn {

        margin-left: 95%;
    }
}

body .to-top-btn {
    /* display: none !important; */
}

.to-top-btn .btn-hover {
    transform: rotate(-90deg);
    background: var(--clr-red-gradient);
    filter: brightness(1);
}
.to-top-btn.button .arrow_circle {
    filter: invert(1);
}

.to-top-btn {
    /* position: fixed;
    bottom: 1%;
    right: 1%; */
    position: fixed;
    left: calc(100% - 60px);
    top: calc(100vh - 80px);
    /* margin-top: 100vh; */
}
.back-to-top.at-footer {
  position: absolute;
  bottom: calc(100% + 20px); 
}

@media (min-width: 1600px) {
    .team-modul .element-container {
        --col-span-xl: 3;
    }
}

footer .footer-container .links button:hover {
    color: var(--clr-black);
}

/* Tabellem Modul */
.table-modul .content-width {
    width: fit-content;
    display: block;
    min-width: 60px;
}

.table-modul th {
    /* background: var(--clr-red-gradient);
    color: var(--clr-white); */
    padding: 0px 4px;
    font-size: var(--fs-txt);
}

.table-modul td {
    font-size: var(--fs-txt-small);
}

.table-modul .rex-table {
    width: 100%;
    border-collapse: collapse;
    width: fit-content;
}

.table-modul .rex-table th,
.table-modul .rex-table td {
    border-bottom: 1px solid var(--clr-lightgray);
    padding: 12px;
    text-align: left;

}

.bg-lightgray .table-modul .rex-table,
.bg-lightgray .table-modul .rex-table th,
.bg-lightgray .table-modul .rex-table td {
    border-color: var(--clr-black);
}

/* Newsletter */
.newsletter {
    margin-top: 10%;
}

.newsletter,
.newsletter input,
.newsletter input:focus,
.newsletter select,
.newsletter select:focus {
    color: rgb(var(--clr-black));
}

.newsletter a {
    font-size: var(--fs-txt);
    color: var(--clr-red);
    transition: color 0.25s ease;
}

.newsletter a:hover,
.newsletter a:focus {
    color: rgb(var(--clr-black));
}

.newsletter input:not([type="checkbox"]) {
    border-radius: 20px !important;
}

.newsletter input[type="checkbox"] {
    vertical-align: top;
}

.newsletter input:not([type="checkbox"]):focus,
.newsletter input:not([type="checkbox"]):focus-visible {
    box-shadow: 0 0 0 .2rem rgba(var(--clr-pink), 0.25);
    outline: none;
}

.newsletter button {
    font-size: var(--fs-btn);
    border-radius: 20px !important;
    background: var(--clr-lightgray) !important;
    color: var(--clr-black) !important;
}

.newsletter form {
    width: 100%;
}

.newsletter button:hover,
.newsletter button:focus {
    background: var(--clr-red-gradient) !important;
    color: var(--clr-white) !important;
}

.newsletter img[alt="captcha"] {
    width: 40px !important;
    height: 40px !important;
    display: inline;
}

.newsletter form>div>div {
    font-size: var(--fs-txt-big);
    margin-top: 1.5em !important;
}

.newsletter form>div>div:nth-child(9) {
    display: none;
}

@media (max-width: 1399px) {
    .header-modul .container {
        flex-direction: column;
        justify-content: end;
    }

    .header-modul .container img {
        align-self: flex-start;
        margin-top: 30px;
    }

    .header-modul .content-width h1 {
        align-self: flex-start;
    }
}

@media (max-height: 600px) {
    .header-modul .container {
        flex-direction: column;
        justify-content: end;
    }

    .header-modul .container img {
        align-self: flex-start;
        margin-top: 30px;
    }

    .header-modul .content-width h1 {
        align-self: flex-start;
    }
}

@media (min-width: 1200px) {
    .team-modul .img-container p {
        font-size: clamp(0.875rem, -0.25rem + 1.5vw, 1.063rem);
    }

    .references-all-modul .col2-container {
        display: none;
    }
}

@media (max-width: 1199px) {
    .offset-img-txt-modul .rightCol {
        padding-top: calc(var(--fs-heading-1) + 20px);
        /* 150px */
    }

    nav.mobile.active {
        display: block;
    }

    header .navi {
        display: none;
    }

    header .burger {
        display: flex;
        display: none;
    }

    header nav {
        width: fit-content;
    }

    .txt-media-cols-modul {
        --gap-middle: 20%;
    }

    .offset-img-txt-modul .element-container p {
        margin-bottom: 20px;
    }

    .accordion-modul-jobs .header-container .beam-txt {
        flex-basis: 100%;
    }

    .references-all-modul .col3-container {
        display: none;
    }
}

@media (max-width: 990px) {
    .link-list-modul .content-container .img-container {
        top: -200px;
    }

    footer .footer-container {
        flex-direction: column;
        align-items: start;
    }

    footer .footer-container .button {
        align-self: flex-end;
    }

    .offset-slider-modul .leftCol,
    .offset-slider-modul .rightCol {
        display: none;
    }


}

@media (max-width: 1020px) {
    footer .contact-container {
        flex-direction: column;
    }

    .contact-modul .contact-container {
        flex-direction: column;
    }
}

@media (min-width: 991px) {

    .offset-slider-modul .mobileCol {
        display: none;
    }

    .contact-modul>.content-width>.flex-wrap {
        flex-wrap: nowrap;
    }

    footer .links-container {
        margin-bottom: unset;
    }
}

@media (min-width: 768px) {
    .references-all-modul .col1-container {
        display: none;
    }

    .offset-img-txt-modul .mobileCol {
        display: none;
    }

    .project-modul .img-container .first-img,
    .project-modul .img-container .second-img {
        margin-bottom: calc(var(--margin-bottom-50px)*4);
    }
}

@media (max-width: 767px) {

    .offset-img-txt-modul .leftCol,
    .offset-img-txt-modul .rightCol {
        display: none;
    }

    .txt-media-cols-modul {
        --gap-middle: 0%;
    }

    .txt-media-cols-modul .left {
        margin-bottom: 50px;
    }

    .link-list-modul .content-container h3 {
        margin-bottom: 20px;
    }

    .link-list-modul .content-container .txt-btn-border {
        margin-bottom: 50px;
    }

    .link-list-modul .content-container .txt-btn-border {
        justify-self: start;
    }

    #yform-formular-message,
    .input-container,
    .input-container input,
    .contact-container textarea {
        min-width: 100%;
    }

    .references-all-modul .col2-container {
        display: none;
    }

    .txtarea-txtinputs-container {
        flex-direction: column;
        min-width: 100%;
    }

    .project-modul .buttonsWithTxt {
        margin-top: 50px;
    }

}

@media (max-width: 575px) {
    .reference-modul .header-container {
        flex-direction: column;
        align-items: start;
    }

    .contact-modul .txt-container .col-right {
        margin-left: 0px;
    }

    .reference-modul .header-container h2 {
        margin-bottom: 20px;
    }

    .reference-modul .header-container {
        gap: 0px;
    }

    .reference-modul .header-container .txt-btn-border {
        width: fit-content;
    }

    .reference-modul .header-container .btn-container {
        flex-basis: 100%;
        display: flex;
    }
}