/* be-vietnam-pro-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/be-vietnam-pro-v11-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  
/* be-vietnam-pro-500 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/be-vietnam-pro-v11-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
  
/* be-vietnam-pro-600 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/be-vietnam-pro-v11-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
  
/* be-vietnam-pro-700 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/be-vietnam-pro-v11-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
  
:root {
    --clr-grey:     223, 223, 217;
    --clr-orange:   255, 120, 0;
    --clr-dark-blue: 40, 53, 61;
    --clr-black: 0, 0, 0;
    --clr-white: 255, 255, 255;

    --color-accent: rgb(var(--clr-orange));
    --color-hov: rgb(var(--clr-orange));
    --color-linegrey: rgb(172, 172, 160);
    --current-bg: rgb(var(--clr-white));

    --ff-heading: 'Be Vietnam Pro', sans-serif;
    --ff-txt: 'Be Vietnam Pro', sans-serif;

    --fs-heading-1: clamp(2.5rem, 0.7639rem + 5.5556vi, 5.625rem); /* 40px ->90px */
    --fs-heading-2: clamp(1.5rem, 0.25rem + 4vi, 3.75rem); /* 24px -> 60px */
    --fs-heading-3: clamp(1.3125rem, 0.4792rem + 2.6667vi, 2.8125rem); /* 21px -> 45px */
    --fs-heading-4: clamp(1.25rem, 1.0764rem + 0.5556vi, 1.5625rem); /* 20px -> 25px */
    --fs-heading-5: clamp(0.875rem, 0.7708rem + 0.3333vi, 1.0625rem); /* 14px -> 17px */
    --fs-anker-txt: clamp(1.125rem, 0.7083rem + 1.3333vi, 1.875rem); /* 18px -> 30px */
    --fs-txt: clamp(0.9375rem, 0.7639rem + 0.5556vi, 1.25rem); /* 15px -> 20px */
    --fs-txt-big: clamp(1.0625rem, 0.7153rem + 1.1111vi, 1.6875rem); /* 17px-> 27px */
    --txt-padding: clamp(1.875rem, -0.5556rem + 7.7778vi, 6.25rem); /* 30 -> 100px */
    --img-margin-bot: clamp(2.1875rem, 1.6667rem + 1.6667vi, 3.125rem); /* 35 -> 50px */
    --h4-margin-bot: clamp(1.5625rem, 1.0417rem + 1.6667vi, 2.5rem); /* 25 -> 40px */
    --h5-margin-bot: clamp(1.25rem, 0.9028rem + 1.1111vi, 1.875rem); /* 20 -> 30px */
    --three-column-gap: clamp(6.25rem, 2.7778rem + 11.1111vi, 12.5rem); /* 100 -> 200px */
    --header-margin:  clamp(6.875rem, 6.3542rem + 1.6667vi, 7.8125rem); /* 110px -> 125px */
    --mobnav-arrow: clamp(0.9375rem, 0.4167rem + 1.6667vw, 1.875rem); /* 15->30px*/
    --cancelBtn: clamp(8.4375rem, 6.9444rem + 4.7778vw, 11.125rem); /* 135->178px*/
    --three-columns-padding: clamp(5rem, 0.8333rem + 13.3333vw, 12.5rem); /*80->200px */
}

/* Utility */
.bg-orange {
    --color-accent: rgb(var(--clr-white));
    --color: rgb(var(--clr-white));
    --color-hov: rgb(var(--clr-black));
    background: rgb(var(--clr-orange));
    --current-bg: var(--clr-orange);
}
.bg-dark-blue {
    --color-accent: rgb(var(--clr-white));
    --color: rgb(var(--clr-white));
    --color-hov: rgb(var(--clr-orange));
    background: rgb(var(--clr-dark-blue));
    --current-bg: var(--clr-dark-blue);
}
.bg-grey {
    --color-accent: rgb(var(--clr-orange));
    --color-hov: rgb(var(--clr-orange));
    background: rgb(var(--clr-grey));
    --current-bg: var(--clr-grey);
}

.bg-white {
    --color-accent: rgb(var(--clr-orange));
    --color: rgb(var(--clr-black));
    --color-hov: rgb(var(--clr-orange));
    background: rgb(var(--clr-white));
    --current-bg: var(--clr-white);
}
.color-orange {
    --color: rgb(var(--clr-orange));
}
.text-big {
    font-size: var(--fs-txt-big);
}
.to-top-btn {
    position: fixed;
    right: var(--content-padding);
    bottom: 20px;
    max-width: calc(var(--content_width) + var(--content_padding) * 2);
    margin-right: auto;
    transition: all 0.3s ease;
}
.to-top-btn.white.arrow {
    border-color: rgb(var(--clr-white));
}
.to-top-btn.white.arrow::after {
    border-color: rgb(var(--clr-white));
}
.arrow {
    padding: 15px;
    border-radius: 35%;
    border: 2px solid rgb(var(--clr-orange));
    margin-right: 15px;
    transition: all 0.3s ease;
}
.arrow::after {
    content: "";
    display: block;
    border: 1px solid rgb(var(--clr-orange));
    border-width: 0 0 2px 2px;
    width: 8px;
    height: 8px;
    transform: rotate(-225deg) translate(12.5%, -12.5%);
    transition: all 0.3s ease;
}
.to-top-btn.arrow:hover::after {
    transform: scale(1.4) rotate(-225deg) translate(12.5%, -12.5%);
    
}
.to-top-btn.arrow:hover {
    padding: 16px;
}
.to-top-btn.hidden {
    display: none;
}

.btn .icon-cross {
    width: 0.8em;
    height: 0.8em;
}
.cross-hover {
    gap: 0.6em;
    cursor: pointer;
}
.cross-hover .icon-cross {
    width: 0.8em;
    height: 0.8em;
    transition: transform 0.25s ease;
}
.cross-hover:hover .icon-cross, .cross-hover:focus-visible .icon-cross {
    transform: rotate(45deg);
}

button.cancel {
    display: none;
    position: absolute;
    height: 25px;
    width: 25px;
    right: 0;
    bottom: 20% ;
    margin-right: auto;
    --row-start: 4;
    
    --row-start-md: 2;
}
button.cancel.visible {
    display: block;
}

.cross.cancel-btn {
    display: block;
    width: 100%;
    height: 100%;
    right: 0;
    bottom: 20% ;
    margin-right: auto;
}
.cross.cancel-btn::before, .cross.cancel-btn::after {
    content: '';
    position: absolute;
    border-bottom: 4px solid rgb(var(--clr-orange));
    width: 100%;
    bottom: 0.5em;
    height: 0;
}
.cross.cancel-btn::before {
    transform: rotate(45deg);
}
.cross.cancel-btn::after {
    transform: rotate(-45deg);
}

/* General */

html {
    scroll-behavior: smooth;
}
body {
    font-weight: var(--fw-semibold);
    line-height: 1.5;
}
main section:first-child {
    padding-top: calc(107px + (var(--three-column-gap)/2));
}
main section.titelbild-modul.big-picture {
    padding-top: 0;
}
h1, h2, h3, h4 {
    line-height: 1.1;
}
p {
    font-weight: 600;
}
h1 , h2 {
    margin-bottom: clamp(3.125rem, 2.4306rem + 2.2222vi, 4.375rem); /* 50 -> 70 */
}
h3 {
    margin-bottom: var(--h4-margin-bot);
}
h4, h5 {
    margin-bottom: var(--h5-margin-bot);
    line-height: 1.4;
}
a {
    color: var(--color);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.25s ease;
}
a:hover {
    color: var(--color-hov);
}
button {
    color: var(--color);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.25s ease;
}
button:hover {
    color: var(--color-accent);
}
.icon {
    background: currentColor;
    display: block;
    width: 25px;
    height: 10px;
    mask-image: var(--url);
}
.icon-arrow {
    --url: url("/media/icon-arrow.svg");
}
#jump-btn.arrow {
    margin-right: 0;
}
/* weiter-Link */

.continue-link {
    overflow: hidden;

}
.continue-link h5,
.continue-link {
    margin-bottom: 0;
    color: rgb(var(--clr-orange));
    font-size: var(--fs-heading-5);
    font-weight: 700;
    margin-top: 30px;
    display: block;
}
.continue-link h5::after,
.continue-link::after  {
    content: "";
    display: inline-block;
    height: 0.4em;
    width: 30px;
    margin-right: -100%;
    margin-left: 7px;
    border-top: 2px solid rgb(var(--clr-orange));
    transition: 0.333s;
}
.continue-link:hover::after {
    content: "";
    height: 0.4em;
    width: 60px;
    margin-right: -100%;
    margin-left: 7px;
    border-top: 2px solid var(--color-hov);
    transition: 0.333s;
}
.bg-orange.continue-link, .bg-orange.continue-link h5 {
    color: rgb(var(--clr-white));
}
.bg-orange.continue-link::after , .bg-orange.continue-link h5::after {
    border-color: rgb(var(--clr-grey));
}
.bg-orange .continue-link {
    color: rgb(var(--clr-white));
}
.bg-orange .continue-link::after {
    border-color: rgb(var(--clr-white));
}
.bg-orange .continue-link:hover::after {
    border-color: rgb(var(--clr-white));
}

/* Geviertstriche */
.text-with-geviert::after {
    content: "";
    display: inline-block;
    height: 0.4em;
    width: 30px;
    margin-right: -100%;
    margin-left: 7px;
    border-top: 2px solid rgb(var(--clr-black));
}
.bg-orange .text-with-geviert::after {
    border-color: rgb(var(--clr-white));
}
/* Navi */
header {
    min-height: 0.00001vw;
    --header-padding: clamp(3.125rem, -9.0278rem + 38.8889vw, 25rem); /* 50px -> 400px */
    --logo-padding: clamp(0rem, -6.9444rem + 22.2222vw, 12.5rem); /* 0 -> 200px */
    --logo-width: clamp(12.5rem, -8.3333rem + 66.6667vw, 50rem); /* 200 -> 800px */
    padding: 50px 0 50px 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
}
header.bg-grey, header.bg-dark-blue, header.bg-orange, header.bg-white {
    background: rgba(var(--current-bg), 0.8);
}
header.special-header {
    --color-accent: rgb(var(--clr-white));
    --color: rgb(var(--clr-white));
    --color-hov: rgb(var(--clr-orange));
    background: rgba(var(--clr-dark-blue), 0.8);
    --current-bg: var(--clr-dark-blue);
    transition: padding-bottom 1.5s ease;
}

header nav {
    width: 100%;
}
header.dh-top.special-header .logo {
    position: absolute;
    top: 37px;
    width:fit-content;
    /* top: calc(37px + var(--logo-padding)); */

}
header .logo {
    z-index: 5;
    position: absolute;
    min-height: 0.0001vw;
}
header.dh-top.special-header .logo img {
    min-height: 0.001vw;
    /*
    width: var(--logo-width);
    top: calc(var(--logo-padding));
    */
    width: clamp(12.5rem, -8.3333rem + 66.6667vw, 50rem);
    top: clamp(0rem, -6.9444rem + 22.2222vw, 12.5rem);
    transition: top 1.5s ease, width 1.5s ease;
}
header.dh-top.special-header {
    padding-bottom: calc(var(--header-padding));
}

header .logo img {
    position: relative;
    width: 200px;
    height: 100%;
    top: 0;
    transition: top 1.5s ease, width 1.5s ease;
    
}
header.bg-orange .logo img {
    filter: brightness(0) invert(1);
}
header.bg-orange.mobnav-active .logo img {
    filter: unset;
}
header .navi {
    display: none;
    
}
header .navi a {
    font-size: var(--fs-heading-5);
    line-height: 1.1;
}
header button {
    font-size: var(--fs-heading-5);
    font-weight: var(--fw-bold);
}
header .burger {
    width: 25px;
    height: 1em;
    position: relative;
    --col-span: 1;
    --col-start: 1;
}
header .burger::before, header .burger::after {
    content: '';
    position: absolute;
    border: 2px solid var(--color-accent);
    left: 0;
    width: 100%;
    height: 0;
}
header .burger::before {
    top: 9px;
}

header .burger::after {
    bottom: 9px;
}
header .burger span {
    width: 100%;
    /* border: 1px solid rgb(var(--clr-white)); */
}
header nav.mobile {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: -200px;
    padding-bottom: 200px;
    background: rgb(var(--clr-dark-blue));
    transition: opacity 0.5s ease;
}
@media (max-width:1199px) {
    header.mobnav-active.special-header .content-width .logo {
        width: 200px;
    }
    header.mobnav-active.special-header .content-width .logo img {
        top: 0px;
    }
}

nav.mobile .cross {
    position: absolute;
    top: 50px;
    right: var(--content-padding);
    width: 25px;
    height: 25px;
}
nav.mobile .cross::before, nav.mobile .cross::after {
    content: '';
    position: absolute;
    border-bottom: 4px solid rgb(var(--clr-orange));
    width: 100%;
    height: 0;
}
nav.mobile .cross::before {
    transform: rotate(45deg);
}
nav.mobile .cross::after {
    transform: rotate(-45deg);
}
header nav.mobile.active {
    display: flex;
}
header nav.mobile.transition {
    opacity: 0;
}
.mobile-nav-links {
    height: 100%;
    padding: 150px 45px 40px 0px;
    overflow-y: auto;
    overscroll-behavior: contain;
    --color: rgb(var(--clr-white));
}
.mobile-nav-links a:hover, .mobile-nav-links button:hover{
    color: rgb(var(--clr-orange));
}
.mobile-nav-links .level-1 {
    margin-bottom: 30px;
}
.mobile-nav-links .level-1 button.active, .mobile-nav-links .level-1 a {
    margin-bottom: 25px;
}
header .level-1.active a, header .level-1.active button {
    color: rgb(var(--clr-orange));
}
header .level-2.active a {
    color:var(--color);
}
header .level-2.active a.active {
    color:var(--color-accent);
}
header .mobile-nav-links .level-2.active a:hover {
    color: rgb(var(--clr-orange));
}
header .mobile-nav-links .level-2.active a.active {
    color: rgb(var(--clr-orange));
}
.mobile-nav-links .level-2 {
    display: flex;
    flex-direction: column;
}
.mobile-nav-links .level-1 > a, .mobile-nav-links .level-1 button {
    font-weight: var(--fw-semibold);
    font-size: var(--fs-heading-2);
}
.mobile-nav-links button {
    position: relative;
    transition: margin 0.25s ease 0.25s, color 0.25s ease;
}
.mobile-nav-links button.active {
    color: var(--color-accent);
    transition: margin 0.25s ease, color 0.25s ease;
}
.mobile-nav-links button::before {
    --border: 4px solid rgb(var(--clr-orange));
    content: '';
    position: absolute;
    right: -1.6em;
    --sizes: var(--mobnav-arrow);
    width: var(--sizes);
    height: var(--sizes);
    --bottom: var(--h5-margin-bot);
    bottom: var(--bottom);
    border-right: var(--border);
    border-bottom: var(--border);
    transform: rotate(45deg);
    transition: transform 0.25s ease;
}
.mobile-nav-links button.active::before {
    transform: rotate(45deg) scale(-1) translate(-0.4em, -0.4em);
    bottom: calc(var(--bottom)+ var(--sizes));
}
.mobile-nav-links .level-2 {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.5s ease;
}
.mobile-nav-links .level-2.active {
    max-height: 400px;
    padding-left: 20px;

}
.mobile-nav-links .level-2.active a {
    font-size: var(--fs-txt-big);
}

/* Slider & Slider-Modul*/
.slider-modul .splide__slide {
    display: flex;
    align-items: flex-end;
    margin-left: var(--content-padding);
}
.slider-modul .link-txt-container {
    min-height: 200px;
}
.slider-modul .continue-link {
    flex-grow: 1;
}
.slider-modul .txt-container {
    flex-grow: 1;
    padding-left: 0;
}
.slider-modul .img-container {
    align-self: flex-end;
    display: flex;
}
.slider-modul .slider-img {
    margin-bottom: var(--img-margin-bot);
}
.slider-modul .icon-container img{
    margin-bottom: var(--img-margin-bot);
}
.slider-modul .icon-container img {
    object-fit: cover;
    height: 100px;
}
.slider-modul .splide__arrow {
    display:none;
    position: absolute;
    bottom: 30px;
    margin-right: auto;
    transition: all 0.3s ease;
    background: none;
    opacity: 1;
}
.slider-modul .arrow {
    padding: 11px;
    border-color: var(--color-accent);
}
.slider-modul .arrow::after {
    border-color: var(--color-accent);
}
.slider-modul .splide__arrow--prev {
    transform: rotate(-90deg);
}
.slider-modul .splide__arrow--next {
    transform: rotate(90deg);
}

.slider-modul.manual .splide__slide {
    align-items: flex-start;
}


/* Titelbild-Modul */
.titelbild-modul .img-container {
    position: relative;
    height: 100%;
    align-items: center;
}
.titelbild-modul .big-picture {
    min-height: calc(var(--fs-heading-3) * 20);
    height: 120vh;
    z-index: 1;
}
.titelbild-modul .small-picture {
    min-height: calc(var(--fs-heading-3) * 10);
    height: 400px;
    z-index: 1;
}
.titelbild-modul .background {
    position: absolute;
    height: 100%;
}
.titelbild-modul .txt-container {
    align-self: flex-start;
    padding-bottom: calc(var(--fs-heading-3)*9);
    z-index: 5;
    padding-left: var(--content-padding);
}
.titelbild-modul .big-picture .txt-container {
    position: sticky;
    padding-bottom: var(--fs-heading-3);
    bottom: 0;
}
.titelbild-modul .txt-container h1 {
    width: 100%;
    max-width: calc(var(--fs-heading-3)* 14);
}
.titelbild-modul .small-picture .txt-container {
    padding-bottom: calc(var(--fs-heading-4)*0.5);
}
.titelbild-modul .small-picture .txt-container h1 {
    max-width: 100%;
}


/* Text-Modul */
.text-modul .heading-container {
    margin-bottom: 1em;
}
.text-modul .txt-container {
    --col-span: 12;
    --col-start: 1;
    --col-span-md: 7;
    --col-start-md: 2;
    padding-left: 0;
}
.text-modul .text-center {
    --col-span-md: 8;
    --col-start-md: 3;
}

/* Text in Bild Modul */
.text-in-bild-modul .content-container.grid-default {
    --gap-y: 0px;
}
.text-in-bild-modul .content-container {
    --col-span: 12;
    --col-start: 1;
    --col-span-md: 7;
    --row-start-md: 1;
    z-index: 1;
    
    
}

.text-in-bild-modul .img-container {
    --col-span: 12;
    --col-start: 1;
    --col-span-md: 7;
    --col-start-md: 2;
    --row-start: 1;
    --row-start-md: 1;
    display: flex;
    align-items: center;
    padding-bottom: calc(var(--fs-heading-3)*2);
}
.text-in-bild-modul .img-container.img-second-row {
    --row-start: 2;
    padding-top: calc(var(--fs-heading-3)*2);
    padding-bottom: 0;
}
.text-in-bild-modul .heading {
    --col-span: 12;
    --col-span-md: var(--sub-columns);
    --col-start: 1;
}
.text-in-bild-modul .txt-container {
    --col-start: 1;
    --col-start-md: 1;
    --col-span: calc(var(--sub-columns));
    --col-span-xxl: calc(var(--sub-columns) - 1);
}
.text-in-bild-modul .link-container {
    --col-start: 1;
    --col-start-md: 1;
    --col-span: calc(var(--sub-columns));
}
.text-in-bild-modul .content-container.grid__item--r .link-container {
    --col-start-md: 6;
}
.txt-container, .link-container, .continue-link-container {
    padding-left: var(--txt-padding);
}
/* 2 Spalten diagonal modul */
.two-columns-diagonal-modul .content-container {
    --col-span: 12;
    --col-start: 1;
    --col-span-md: 5;
    --row-start-md: 1;
    padding-bottom: var(--section-padding);
}
.two-columns-diagonal-modul .content-container:last-child {
    padding-bottom: 0;
}
.two-columns-diagonal-modul .col-left.left {
    --col-start-md: 1;
    --col-span-md: 6;
    --row-start: 1;
}
.two-columns-diagonal-modul .col-right.right {
    --col-start-md: 1;
    --col-span-md: 6;
    --row-start: 2;
}
.two-columns-diagonal-modul .subgrid {
    --row-start: 2;
}
.two-columns-diagonal-modul .heading {
    --col-span: 12;
    --col-span-md: var(--sub-columns);
    --col-start: 1;
}
.two-columns-diagonal-modul .txt-container {
    --col-start: 1;
    --col-start-md: 1;
    --col-span: calc(var(--sub-columns));
    
}
.two-columns-diagonal-modul .link-container {
    --col-start: 1;
    --col-start-md: 1;
    --col-span: calc(var(--sub-columns));
}
.two-columns-diagonal-modul .img-container {
    width: 100%;
    --row-start: 1;
    padding-bottom: calc(var(--section-padding)/2);
}
/* 3 Spalten Bild/Text Modul */
.three-columns-paragraph-modul .grid-default {
    --columns: 3;
    --gap-x: calc(var(--h4-margin-bot));
    --gap-y: var(--three-columns-padding);
}
.three-columns-paragraph-modul .content-container {
    --col-span: 3;
    --col-span-md: 1;
}
.three-columns-paragraph-modul .content-container p {
    margin-bottom: 0.5em;
}
.three-columns-paragraph-modul .content-container:last-child {
    margin-bottom: 0;
}
.three-columns-paragraph-modul .heading-container h3 {
    margin-bottom: calc(var(--section-padding)/2);
}
/*
.three-columns-paragraph-modul .content-container:last-child {
    margin-bottom: 0;
}
    */
.three-columns-paragraph-modul .img-container {
    padding-bottom: var(--img-margin-bot);
}
.three-columns-paragraph-modul .img-container img {
    aspect-ratio: 3/2;
    width: 100%;
    object-fit: cover;
}
.three-columns-paragraph-modul .icon-container {
    padding-bottom: var(--img-margin-bot);
    padding-top: var(--fs-heading-4);
}
.three-columns-paragraph-modul .icon-container img {
    object-fit: cover;
    height: 100px;    
}
.three-columns-paragraph-modul h5 {
    margin-bottom: var(--h5-margin-bot);
    width: 90%;
}
.three-columns-paragraph-modul .content-container *:last-child {
    margin-bottom: 0;
}
/* 2 Spalten Mit schrägen Texten Modul */
.two-columns-paragraph-modul .grid-default {
    --columns-md: 2;
    --columns: 1;
    --gap-y: 20px;
}
.two-columns-paragraph-modul .content-container {
    --col-span: 1;
    padding-left: calc(var(--fs-heading-3));
}
.two-columns-paragraph-modul h5 {
    margin-bottom: 0;
}
.two-columns-paragraph-modul .continue-link h5,
.two-columns-paragraph-modul .continue-link {
    padding-left: calc(var(--fs-heading-3));
    margin-top: 20px;
}
.two-columns-paragraph-modul .txt-container {
    padding-left: calc(var(--fs-heading-3));
}
.two-columns-paragraph-modul h3 {
    padding-bottom: var(--fs-heading-4);
}

/* Anker-Container-Modul */
.anker-container-modul .anker-container {
    --columns: 1;
    --columns-md: 3;
    border-bottom: 2px solid var(--color-linegrey);
    --color: var(--color-linegrey);
    padding-bottom: var(--h4-margin-bot);
}
.anker-container-modul .anker-container a {
    margin-bottom: var(--fs-heading-4);
}
.anker-container-modul .anker-container a:last-child {
    margin-bottom: 0;
}
.anker-container-modul .anker-container a {
    font-size: var(--fs-anker-txt);

}
/* Kontakt-modul */
.contact-modul .all-columns {
    
    --columns: 1;
    --columns-md: 2;
    --columns-xxl: 3;
    --gap-x-md: calc((var(--fs-heading-2)/4) * 10);
    --gap-x-sm: calc((var(--fs-heading-2)/4) * 5);
    --gap-y: var(--section-padding);
}
.contact-modul .location-grid {
    --columns: 1;
    --columns-sm: 2;
    --columns-md: 1;
    --col-span: 1;
}
.contact-modul .location-container {
    --col-span-sm: 2;
    --col-span-md: 1;
}
.contact-modul .person-grid {
    --col-span: 2;
    --col-span-md: 1;
    --col-span-xxl: 2;
    --columns: 1;
    --columns-xxl: 2;
    --gap-x: calc((var(--fs-heading-2)/4) * 10);
    --gap-y: calc(var(--section-padding));
}
.contact-modul .img-container {
    margin-bottom: var(--img-margin-bot);
}
.contact-modul .img-container img {
    aspect-ratio: 3/2;
    width: 100%;
    object-fit: cover;
    object-position: bottom;
}

/* Zwei Spalten mit Bild und Text Modul*/
.two-columns-bild-text-modul .content-container {
    --columns: 1;
    --columns-md: 2;
    --gap-x-md: calc((var(--fs-heading-2)/4) * 10);
    --gap-x-sm: calc((var(--fs-heading-2)/4) * 5);
    --gap-y: 20px;
}
.two-columns-bild-text-modul .img-container {
    --col-span: 1;
}
.two-columns-bild-text-modul .img-container img {
    aspect-ratio: 19/17;
    width: 100%;
}
.two-columns-bild-text-modul .txt-container {
    padding-top: calc(var(--fs-heading-3) * 2);
    --col-span: 1;
}

/* Abgetrennte Textzeilen Modul */
.separated-textrows-modul .content-container {
    --columns: 1;
    --columns-md: 2;
    --gap-x : 20px;
    --gap-y: 20px;
    border-bottom: 2px solid rgb(172, 172, 160);
    padding-top: 50px;
    padding-bottom: 25px;
}
.bg-orange.separated-textrows-modul .content-container {
    border-color: rgb(var(--clr-grey));
}
.separated-textrows-modul .content-container:first-child {
    padding-top: 0;
}
.separated-textrows-modul .txt-container {
    --col-span: 1;
    padding-left: 0;
    display: flex;
    align-items: flex-end;
}
.separated-textrows-modul .txt-container h4 {
    --color: var(--color-accent);
}
.bg-dark-blue.separated-textrows-modul .txt-container h4 {
    --color: rgb(var(--clr-orange));
}
.bg-orange.separated-textrows-modul .txt-container p {
    --color: rgb(var(--clr-black));
}

/* Text neben großem Bild Modul */

.txt-nextto-bigimg-modul .content-container {
    --columns: 1;
    --columns-md: 12;
    --gap-x-md: 20px;
    --gap-y: 20px;
}
.txt-nextto-bigimg-modul .img-container {
    --col-span: 8;
    --col-start: 1;
}
.txt-nextto-bigimg-modul .txt-container {
    padding-top: calc(var(--fs-heading-3) * 2);
    --col-span: 5;
    --col-start: 2;
    --row-start: 2;
    --row-start-md: 1;
    
    display: flex;
    align-items: flex-end;
}
/* Akkordion Modul */
.accordion-modul {
    position: relative;
}
.accordion-modul .grid-default {
    --columns: 2;
    --gap-x: calc(var(--fs-heading-3)*3);
}
.accordion-modul .content-container {
    --col-start: 1;
    --row-start: 2;
    --row-start-md: 1;
    --col-span: 2;
    --col-span-md: 1;
    padding-bottom: 0;
}
.accordion-modul .txt-container {
    margin-bottom: calc(var(--fs-heading-3));
}
.accordion-modul .img-container {
    --col-start: 1;
    --row-start-md: 1;
    --col-span: 2;
    --col-span-md: 1;
    padding-bottom: var(--img-margin-bot);
}
.accordion-modul .img-container img {
    width:100%;
    /* aspect-ratio: 12/13; */
}
.accordion-modul .accordion {
    width: 100%;
}

.accordion-modul .acc-item {
    border-bottom: 2px solid var(--color-linegrey);
}
.bg-orange.accordion-modul .acc-item {
    border-bottom: 2px solid rgb(var(--clr-grey));
}
.accordion-modul .acc-btn {
    --columns: 1;
    width: 100%;
    padding-top: 50px;
    padding-bottom: 20px;
    
}
.accordion-modul .panel-head {
    width: 100%;
    position: relative;
    justify-content: space-between;
    align-items: center;
}
.accordion-modul .panel-head h4{
    margin-bottom: 0;
}
.accordion-modul .panel-container > * {
    margin-bottom: 0;
}
.accordion-modul .arrow {
    justify-self: end;
    align-self: center;

}
.accordion-modul .arrow, .accordion-modul .arrow::after {
    border-color: rgb(172, 172, 160);
}
.accordion-modul .arrow::after {
    transform: rotate(-45deg) translate(12.5%, -12.5%);
}
.accordion-modul .acc-content {
    /* max-height: 0; */
    overflow: hidden;
/*     background-color: rgb(var(--clr-white)); */
}
.accordion-modul .panel-txt {
    padding: 10px 0px;
}
.bg-orange.accordion-modul .arrow, .bg-orange.accordion-modul .arrow::after {
    border-color: rgb(var(--clr-grey));
}
/* acc variante jonas */
.open.acc-item .arrow {
    transform: rotate(180deg);

}
.acc-item .acc-content {
    overflow: hidden; /* overflow weil safari overflow hidden mit js animate nicht kann .... */
}
.acc-item:not(.open) .acc-content {
    display: none;
}



/* Stellenangebote Übersicht */
.job-modul .item.hide {
    display: none;
}
.job-modul .filter-container {
    gap: 30px;
    margin-bottom: calc(var(--section-padding) * 0.3);
}
.job-modul h1 {
    color: rgb(var(--clr-orange));
    width: 100%;
}
.job-modul select {
    /* for Firefox */
    -moz-appearance: none;
    /* for Chrome */
    -webkit-appearance: none;
    appearance: none;
    color: rgb(var(--clr-black));
}
.job-modul select option {
    color: rgb(var(--clr-black));
}
.job-modul .location-wrapper, .job-modul .category-wrapper {
    position: relative;
}
.job-modul .location-wrapper::after, .job-modul .category-wrapper::after{
    content: "";
    
    position: absolute;
    display: block;
    right: 20px;
    bottom: 40%;
    border: 1px solid var(--color);
    border-width: 0 0 2px 2px;
    width: 10px;
    height: 10px;
    transform: rotate(315deg) translate(12.5%, -12.5%);
    transition: all 0.3s ease;
}
.job-modul select.location-filter, .job-modul select.category-filter {
    background: transparent;
    border: 2px solid var(--color-accent);
    width: fit-content;
    border-radius: 25px;
    padding: 10px 15px;
    padding-right: 40px;
}
.job-modul select.location-filter option *, .job-modul select.category-filter option * {
    width:fit-content;
}
.job-modul select.location-filter {
    --col-span: 2;
}
.job-modul select.category-filter {
    --col-span: 2;
}
.job-modul .item {
    border-bottom: 2px solid var(--color-linegrey);
}
.job-modul .item .acc-btn {
    width: 100%;
    padding-top: 50px;
    padding-bottom: 20px;
    transition: padding-bottom 0.1s ease;
}
.job-modul .item .acc-btn:first-child {
    /* padding-top: 0; */
}
.job-modul .item.open .acc-btn {
    padding-bottom: calc(var(--section-padding)/2);
}
.job-modul .item .acc-btn .arrow {
    margin-right: 0;
    margin-left: auto;
    transform: rotate(180deg);
    border-color: var(--color);
}
.job-modul .item .acc-btn .arrow::after {
    border-color: var(--color);
}

.job-modul .item.open .arrow {
    transform: rotate(0deg);
    border-color: var(--color-accent);
}
.job-modul .item.open .arrow::after {
    border-color: var(--color-accent);
}
.job-modul .item .acc-btn h4 {
    margin-bottom: 0;
}
.job-modul .acc-content {
    margin-bottom: var(--img-margin-bot);
    overflow: unset;
}
.job-modul .acc-content .grid-default {
    --columns-xl: 3;
    --columns: 1;
    --gap-y: var(--img-margin-bot);
    --gap-x: var(--img-margin-bot);
    margin-bottom: calc(var(--section-padding)/2);
}
.job-modul .acc-content p.headline {
    color: var(--color-accent);
    margin-bottom: var(--img-margin-bot);
}
.job-modul .acc-content ul li::marker {
    color: var(--color-accent);
}
.job-modul .acc-content .description {
}
.job-modul .acc-content .description *:last-child {
    margin-bottom: var(--img-margin-bot);
}
.job-modul .acc-content .application-btn {
    padding: 10px 15px;
    border: 2px solid var(--color-accent);
    border-radius: 25px;
    color: var(--color-accent);
    font-size: var(--fs-heading-5);

}
/* Projects Overview Modul */
/*
.projects-overview .filter-container {
    padding-bottom: var(--img-margin-bot);
    border-bottom: 2px solid var(--color-accent);
    transition: opacity 0.3s ease;
}
.bg-dark-blue.projects-overview .filter-container , .bg-grey.projects-overview .filter-container, .bg-orange.projects-overview .filter-container {
    border-color: rgb(var(--clr-white));
}
.projects-overview.loading .filter-container {
    pointer-events: none;
    opacity: 0.75;
}
.projects-overview .content-width {
    position: relative;
}
.projects-overview .filter-container .cat-filter {
    --columns-lg: 3;
    --columns-md: 2;
    --columns: 1;
    --gap-y: var(--fs-heading-4);
}
.projects-overview .filter-container button {
    --col-span: 1;
    font-size: var(--fs-heading-4);
}
.projects-overview .filter-container .filter.active {
    color: var(--color-accent);
}
.projects-overview .item-container {
    --columns: 2;
    --columns-lg: 3;
    --gap-x: var(--fs-heading-2);
    --gap-y: var(--txt-padding);
    overflow: hidden;
}
.projects-overview .load-more-threshold {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    bottom: 100px;
}
.projects-overview .loader-container {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 150%);
}
.projects-overview .item .img-container {
    margin-bottom: var(--img-margin-bot);
}

.projects-overview .vscomp-wrapper {
    font-size: inherit;
    font-family: inherit;
}
.projects-overview .vscomp-dropbox-container {
    top: 100%;
    transform: translateY(-2px) !important;
    padding-top: 10px;
    border: 1px solid rgb(var(--clr-black));
    border-top: none;
    box-shadow: none;
}
.projects-overview .vscomp-toggle-button {
    border: 1px solid rgb(var(--clr-black));
    transition: border-color 0.25s ease, background 0.25s ease;
}
.projects-overview .vscomp-wrapper:focus .vscomp-toggle-button {
    box-shadow: none;
}
.projects-overview .vscomp-toggle-button:hover, .projects-overview .vscomp-wrapper:focus-visible .vscomp-toggle-button {
    background: rgb(var(--clr-grey));
}
.projects-overview .pop-comp-active .vscomp-toggle-button {
    box-shadow: none;
}
.projects-overview .vscomp-option {
    transition: background 0.25s ease;
}
.projects-overview .vscomp-option.selected {
    background: rgb(var(--clr-grey));
}
.projects-overview .vscomp-option.focused {
    background: rgb(var(--clr-grey));
}
.projects-overview .vscomp-arrow {
    display: none;
}
.projects-overview .vscomp-wrapper .select-btn {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 1.6em;
    height: 1.6em;
    padding: 0.3em;
    transition: background 0.25s ease, color 0.25s ease;
    border-radius: 50%;
}
.projects-overview .vscomp-wrapper .select-btn .icon {
    display: block;
    transition: transform 0.25s ease;
}
.projects-overview .vscomp-wrapper:not(.has-value) .select-btn {
    pointer-events: none;
}
.projects-overview .vscomp-value {
    transition: color 0.25s ease;
    height: unset;
    line-height: inherit;
}
.projects-overview .vscomp-wrapper:not(.has-value) .select-btn, .projects-overview .vscomp-wrapper:not(.has-value) .vscomp-value {
    opacity: 1;
    color: rgb(var(--clr-black));
}
.projects-overview .pop-comp-active .vscomp-wrapper .select-btn, .projects-overview .pop-comp-active .vscomp-wrapper .vscomp-value {
    color: rgb(var(--clr-grey));
}
.projects-overview .vscomp-wrapper .select-btn:hover, .projects-overview .vscomp-wrapper .select-btn:focus-visible {
    background: rgb(var(--clr-grey));
    color: rgb(var(--clr-black));
}
.projects-overview .vscomp-wrapper.has-value .select-btn .icon {
    transform: rotate(45deg);
}
*/
/* Referenz Übersicht */
.references-modul {
    --height: 50px;
}
.references-modul .content-width {
    /* margin-top: calc(var(--height) *(-1)); */
}
.references-modul .item {
    display: flex;
    justify-content: flex-end;
}
.references-modul .filter-container {
    position: relative;
    padding-bottom: var(--img-margin-bot);
    border-bottom: 1px solid rgb(var(--clr-white));
    --columns: 1;
    --columns-md: 2;
    --gap: 15px;
    --gap-md: 30px;
}
.references-modul .item-container {
    --columns: 1;
    --columns-md: 3;
    --gap: 15px;
    --gap-md: 30px;
    margin-top: var(--section-padding);
}
.references-modul .item-container.transition {
    overflow: hidden;
    max-height: 0;
}
.references-modul .filter-btn {
    font-size: var(--fs-anker-txt);
    height: fit-content;
}
.references-modul .filter-btn.active {
    color: var(--color-hov);
}
.references-modul .item.hide {
    display: none;
}

.references-modul .item img {
    display:flex;
}
.references-modul .content-container {
    height: 150px;
}
.references-modul .item p {
    
    margin-top: var(--h5-margin-bot);
    margin-bottom: 0;
}
.references-modul .continue-link {
    /* margin-top: auto; */
}
.references-modul .load-more-btn.hide {
    display:none;
}
.references-modul .load-more-btn {
    width: 100%;
    margin-top: var(--img-margin-bot);
    /* font-size: var(--fs-anker-txt); */
    display: flex;
    justify-content: center;
}
.references-modul .filter-btn:last-child {
    width: 90%
}
/*Referenzmodul */
.referenzmodul .referenz-header-modul {
}
.referenzmodul .three-columns-paragraph-modul {
    margin-bottom: var(--section-padding);
}
.referenzmodul {
    padding-bottom: var(--section-padding);
}
/* Referenz-Header-Modul */
.referenz-header-modul .img-container {
    position: relative;
    height: 100%;
    align-items: center;
    min-height: calc(var(--fs-heading-3) * 10);
    height: 400px;
    z-index: 1;
}
.referenz-header-modul .background {
    height: 100%;
}
/*
.referenz-header-modul .txt-container {
    position: absolute;
    align-self: flex-start;
    bottom: 0;
    padding-bottom: 30px;
    padding-top: 30px;
    padding-left: var(--content_padding);
    z-index: 5;
    background: rgba(var(--clr-grey), 0.8);
    --color: rgb(var(--clr-black));
}
    */
.referenz-header-modul .txt-container {
    padding-top: calc(var(--three-column-gap)/2);
    padding-left: 0;
    padding-bottom: calc(var(--three-column-gap)/2);
}
.referenz-header-modul .three-columns-paragraph-modul .grid-default {
    --gap-y: calc(var(--three-column-gap)/2);
}
.referenz-header-modul .txt-container * {
    --col-span: 12;
    --col-start: 2;
}
.referenz-header-modul .reference-back-link {
    transform: scaleX(-1);
}
.referenz-header-modul .reference-forward-link, .referenz-header-modul .reference-back-link {
    display: flex;
    align-items: center;
}
.referenz-header-modul .continue-link, .referenz-header-modul .continue-link::after {
    margin-top: 0;
    color: rgb(var(--clr-black));
    border-color: rgb(var(--clr-black));
}
.referenz-header-modul .reference-link-row {
    margin-bottom: var(--h5-margin-bot);
}
.referenzmodul .three-columns-paragraph-modul .grid-default {
    --columns: 12;
    --gap-x: 30px;
}
.referenzmodul .three-columns-paragraph-modul .content-container {
    --col-span: 12;
    --col-span-md: 4;
    margin-bottom: 0;
}
.referenzmodul .three-columns-paragraph-modul .content-container:last-child {
    margin-bottom: 0;
}
.referenzmodul .three-columns-paragraph-modul .content-container h4 {
    margin-bottom: 0;
}
.referenzmodul .three-columns-paragraph-modul .grid-default {
    --gap-y: calc(var(--three-column-gap)/2);
}
/* Referenzen Bilder Reihen */

.reference-img-rows .row-1, .reference-img-rows .row-2, .reference-img-rows .row-3 {

    margin-bottom: 60px;
    --gap-y: 60px;
}
.reference-img-rows .row-1 .img-alone {
    --col-span: 9;
    --col-span-lg: 7;
    --col-start: 4;
    --col-start-lg: 5;
}
.reference-img-rows .row-2 .img-left {
    --col-span: 11;
    --col-span-lg: 6;
    --col-start: 1;
}
.reference-img-rows .row-2 .img-left img {
    /*
    padding: 30px 0;
    object-fit: cover;
    */
}
.reference-img-rows .row-2 .img-right {
    --col-span: 10;
    --col-span-lg: 6;
    --col-start: 3;
    --col-start-lg: 2;
}
.reference-img-rows .row-3 .img-left {
    --col-span: 10;
    --col-span-lg: 6;
    --col-start-lg: 2;
    --col-start: 5;
}
.reference-img-rows .row-3 .img-right {
    --col-span: 12;
    --col-span-lg: 5;
    --col-start: 3;
    --col-start-lg: 2;
}
.reference-img-rows .back-to-overview {
    display: flex;
    justify-content: center;
}
.reference-img-rows .continue-link, .reference-img-rows .continue-link::after {
    margin-top: 0;
    color: rgb(var(--clr-black));
    border-color: rgb(var(--clr-black));
}

/* Historienmodul */
.history-modul .grid-default {
    --columns: 12;
    /*
    --gap-x: calc(var(--section-padding)/2);
    */
    --gap-y: var(--section-padding);
}
.history-modul .left-container .content-container {
    position: sticky;
    top: 220px;
}
.history-modul .left-container {
    --col-span-xl: 5;
    --col-span: 12;
    margin-right: calc(var(--section-padding)/2);
}
.history-modul .left-container .text-area {
    width: 100%;
    padding-left: var(--txt-padding);
    /* width: 80%; */
}
.history-modul .right-container {
    
    --col-span-xl: 7;
    --col-span: 12;
    display: grid;
    grid-template-columns: 1fr 20px 1fr;
    
}
.history-modul .right-container .text-container {
    min-height: 250px;
}
.history-modul .right-container .left-content {
    margin-top: calc(var(--section-padding) *1.5);
}
.history-modul .right-container .right-content .text-container,.history-modul .right-container .left-content .text-container {
    margin-top: calc(var(--section-padding) *1.5);
}
.history-modul .right-container .right-content .text-container:first-child, .history-modul .right-container .left-content .text-container:first-child {
    margin-top: 0;
}

.history-modul .right-container .text-container {
    width: 100%;
}
    
.history-modul .right-container .text-container h3 {
    color: rgb(var(--clr-orange));
    padding-bottom: 15px;
    margin-bottom: 0;
}
.history-modul .right-container .text-container .text-area {
    padding-top: 35px;
}
.history-modul .right-container .text-container .text-area * {
    margin-bottom: 0px;
}
.history-modul .right-container .right-content .text-container .text-area {
    padding-left: 15px;
}
.history-modul .right-container .left-content .text-container .text-area {
    padding-right: 15px;
}
.history-modul .right-container .right-content .text-container * {
    text-align: end;
}
.history-modul .linear-gradient {
    margin-top: -20px;
    background: repeating-linear-gradient(rgb(var(--clr-grey)), rgb(var(--clr-grey)) 20px, var(--color-linegrey) 20px, var(--color-linegrey)  25px);
    
}

.history-modul .line-arrow-left, .history-modul .line-arrow-right {
    flex-grow: 1;
    height: 5px;
    background: var(--color-linegrey);
    position: relative;
}
.history-modul .line-container {
    display: flex;
    width: 100%;
    align-items: center;
}
.history-modul .line-arrow-left {
    margin-left: 20px;
}
.history-modul .line-arrow-right {
    margin-right: 20px;
}


/* Experimenteller Versuch */
/*
.history-modul .text-container {
    width: 50%;
}
.history-modul .linear-gradient {
    position: relative;
    width: 10px;
    right: 10px;
    background: repeating-linear-gradient(rgb(var(--clr-grey)), rgb(var(--clr-grey)) 20px, var(--color-linegrey) 20px, var(--color-linegrey)  25px);
}
*/
/*Experimenteller Versuch 2 */
/*
.history-modul .text-container {
    width: 50%;
}
    */
    /*
.history-modul .linear-gradient {
    
    position: relative;
    width: 10px;
    right: 10px;
    background: repeating-linear-gradient(rgb(var(--clr-grey)), rgb(var(--clr-grey)) 20px, var(--color-linegrey) 20px, var(--color-linegrey)  25px);
    
}
    .history-modul .line-container::after {
    position: absolute;
    content:"";
    background: repeating-linear-gradient(rgb(var(--clr-grey)), rgb(var(--clr-grey)) 20px, var(--color-linegrey) 20px, var(--color-linegrey)  25px);
}
*/
/* Footer */
footer .locations-container .content-container {
    --col-span: 12;
    --col-span-sm: 12;
    --col-span-md: 6;
    --col-span-lg: 4;
    margin-bottom: calc(var(--section-padding));
}
footer .locations-container {
    padding-bottom: calc(var(--section-padding));
}
footer .locations-container .content-container:last-child {
    margin-bottom: 0px;
}
footer .locations-container .heading {
    --col-start: 1;
    --col-span: calc(var(--sub-columns));
}
footer .locations-container .txt-container {
    --col-start: 1;
    --col-start-md: 1;
    --col-span: 12;
    --col-span-md: 6;
    --col-span-lg: 4;
/*     --col-span: calc(var(--sub-columns) - 1); */
}
footer .locations-container .continue-link-container {
    --col-start: 1;
    --col-start-md: 1;
    --col-span: calc(var(--sub-columns) - 1);
}
footer .links-container {
    padding-bottom: calc(var(--fs-heading-4)*5);
    column-gap: calc(var(--fs-heading-4) * 5);
}
footer .link-block {
    margin-bottom: calc(var(--fs-heading-4));
}
footer .link-block a {
    display: block;
    font-size: var(--fs-heading-4);
}
footer .link-block > a:not(:last-child) {
    margin-bottom: calc(var(--fs-heading-4));
}
footer .link-block button {
    color: var(--color);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.25s ease;
    font-size: var(--fs-heading-4);
}
footer .link-block button:hover {
    color: var(--color-hov);
}
footer .slogan-social-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: space-between;
    align-items: start;
    padding-bottom: calc(var(--h4-margin-bot) * 4);
}
footer .slogan-social-container img {
    filter: invert(1);
    width: 300px;
    height: 18px;
}
footer .slogan-social-container h5 {
    margin-left: 10px;
}
footer .slogan-social-container > h5:not(:last-child):after {
    content: "";
    display: inline-block;
    height: 0.4em;
    width: var(--fs-txt-big);
    margin-right: -100%;
    margin-left: 10px;
    border-top: 2px solid rgb(var(--clr-white));
}
footer .social-container{
    display: flex;
    margin-bottom: 30px;
}
footer .slogan-social-container .social-container img{
    filter: invert(0);
    height: 50px;
    width: 50px;
    margin-right: 20px;
}


@media (min-width: 576px) { /*sm*/
    .slider-modul .splide__slide {
        margin-left: 0;
    }
    footer .slogan-social-container{
        flex-direction: row;
        align-items: center;
    }
    footer .social-container{
        margin-bottom: 0px;
    }
}
@media (min-width: 768px) { /*md*/
    .slider-modul .splide__arrow {
            display:block;
    }
    .slider-modul .arrow {
        padding: 11px;
    }
    h1 , h2 {
        margin-bottom: 70px;
    }
    .continue-link h5,
    .continue-link {
        margin-top: 30px;
    }
    .continue-link::after {
        margin-left: 10px;
        width: 50px;
    }
    .continue-link:hover::after {
        margin-left: 10px;
    }
    .text-with-geviert::after {
        width: 50px;
        margin-left: 10px;
    }
    .to-top-btn {
        bottom: 30px;
        
    }
    .titelbild-modul .small-picture {
        height: 700px;
    }
    .referenz-header-modul .img-container {
        height: 750px;
    }
    .text-in-bild-modul .content-container.grid__item--r .link-container {
        padding-left: 0px;
    }
    .text-in-bild-modul .content-container {
        padding-bottom: 3em;
    }
    .text-in-bild-modul .content-container .heading h1 {
        
        padding-top: 1.5em;
    }
    .text-in-bild-modul .content-container .heading h2 {
        
        padding-top: 1em;
    }
    .text-in-bild-modul .img-container.img-second-row , .text-in-bild-modul .img-container {
        padding-top: 0;
        padding-bottom: 0;
    }
    footer .locations-container .continue-link-container h5 {
        padding-bottom: 0;
        margin-top: calc(var(--fs-heading-1)/3);
    }
    footer .slogan-container {
        padding-bottom: calc(var(--h4-margin-bot) * 3);
    }
    footer .slogan-container img {
        width: 350px;
    }
    .two-columns-diagonal-modul .content-container {
        display: flex;
        flex-direction: column;
    }
    .two-columns-diagonal-modul .subgrid {
        order: 2;
    }
    .two-columns-diagonal-modul .col-left.left {
        padding-top: calc(var(--fs-heading-3) * 3);
    }
    .two-columns-diagonal-modul .col-right.right {
        padding-top: calc(var(--fs-heading-3) * 3);
    }
    .two-columns-diagonal-modul .img-container {
        padding-bottom: calc(var(--fs-heading-3)*2);
        padding-top: 0;
    }
    .two-columns-diagonal-modul .content-container {
        padding-bottom: 0;
    }
    /*
    .three-columns-paragraph-modul .content-container {
        margin-bottom: 0;
    }
    */
    .three-columns-paragraph-modul .img-container, .three-columns-paragraph-modul .icon-container {
        padding-top: 0;
    }
    .three-columns-paragraph-modul .content-container {
        margin-bottom: 0;
    }

    .contact-modul .img-container {
        padding-top: 0;
    }

    .two-columns-bild-text-modul .img-container {
        display: flex;
        align-items: center;
    }
    .two-columns-paragraph-modul .continue-link h5,
    .two-columns-paragraph-modul .continue-link {
        margin-top: 45px;
    }
    .accordion-modul .img-container {
        padding-bottom: 0;
    }
    .accordion-modul .img-container img {
        /* aspect-ratio: 19/26; */
    }
    .accordion-modul .content-container {
        padding-top: calc(var(--fs-heading-3)*2);
        padding-bottom: calc(var(--fs-heading-3)*2);
        margin-top: 0px;
    }
    .titelbild-modul .big-picture {
        height: 150vh;
    }
    .referenzmodul .three-columns-paragraph-modul .content-container {
        margin-bottom: 0;
    }
    .history-modul .right-container .right-content .text-container .text-area {
        padding-left: var(--txt-padding);
    }
    .history-modul .right-container .left-content .text-container .text-area {
        padding-right: var(--txt-padding);
    }
    .history-modul .left-container .text-area {
        width: 65%;
    }
}
@media (min-width: 992px) { /*lg*/
    .accordion-modul .txt-container, .accordion-modul .accordion {
        padding-left: calc(var(--fs-heading-4)*2);
    }
    footer .locations-container .content-container {
        margin-bottom: 0px;
    }
    .reference-img-rows .row-1, .reference-img-rows .row-2, .reference-img-rows .row-3 {
        margin-bottom: var(--section-padding);
        --gap-y: 60px;
    }
    .mobile-nav-links button::before {
        --border: 5px solid rgb(var(--clr-orange));
        bottom: calc(var(--bottom));
        margin-bottom: 5px;
    }
    .mobile-nav-links button.active::before {
        bottom: calc(var(--bottom)+ var(--sizes) + 10px);
    }

    .job-modul h1 {
        color: rgb(var(--clr-orange));
        width: 63%;
    }

}

@media (min-width: 1200px) { /*xl*/
    header > .content-width > nav {
        flex-shrink: 0;
    }
    header .burger {
        display: none;
    }
    header .navi {
        z-index: 6;
        --col-start: 1;
        --col-span: 9;
        display: flex;
        align-items: end;
        justify-content: end;
        font-weight: var(--fw-bold);
    }
    header .close-nav-overlay {
        position: fixed;
        top: 140px;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -10;
        display: none;
    }
    header .close-nav-overlay.active {
        display: block;
    }
    header .navi .level-1 {
        margin-right: 60px;
    }
    header.bg-orange .level-1.active a {
        color: rgb(var(--clr-black));
    }
    header .navi > *:last-child {
        margin-right: 0px;
    }
    header .navi .level-2 {
        display: none;
        background: rgba(var(--current-bg),0.8);
        position: fixed;
        top: 130px;
        left: 0;
        right: 0;
        height: fit-content;
        padding-left: var(--pad-left);
        transition: opacity 0.5s ease;
        flex-direction: column;
    }
    header.dh-top.special-header .navi .level-2 {
        background: none;
    }
    header .navi .level-2.active {
        display: flex;
        opacity: 1;
    }
    header .navi .level-2.transition {
        display: flex;
        opacity: 0;
    }
    header .navi .level-2 a {
        flex-shrink: 0;
        width: max-content;
        margin-bottom: 25px;
    }
    header .navi .level-2 a.active {
        color: var(--color-accent);
    }
    header.bg-dark-blue .navi .level-2 a.active {
        color: rgb(var(--clr-orange));
    }
    header .navi button.active {
        color: var(--color-accent);
    }
    header.bg-dark-blue .navi button.active {
        color: rgb(var(--clr-orange));
    }

    header button {
        position: relative;
        transition: color 0.25s ease, margin 0.25s ease 0.25s;
    }
    header button.active {
        transition: margin 0.25s ease;
    }
    header button::after {
        --border: 2px solid var(--color-hov);
        content: '';
        position: absolute;
        right: -1.5em;
        bottom:0.7em;
        width: 0.6em;
        height: 0.6em;
        border-right: var(--border);
        border-bottom: var(--border);
        transform: rotate(45deg);
        transition: transform 0.25s ease;
    }
    header button.active::after {
        transform: rotate(45deg) scale(-1) translate(-0.4em, -0.4em);
        bottom: 1em;
    }
    header .navi button {
        position: relative;
    }
    header .navi button:hover::before, header .navi button:focus::before, header .navi button.active::before {
        transform: scaleX(1);
    }
    header nav.mobile.active {
        display: none;
    }
    header .navi a:hover, header .navi button:hover {
        color: var(--color-hov);
    }
    .three-columns-paragraph-modul .grid-default {
        --gap-x: calc((var(--three-column-gap)));
    }
    .referenzmodul .three-columns-paragraph-modul .grid-default {
        --gap-x: 0;
    }
    .referenzmodul .referenz-header-modul .txt-container * {
        width: 80%;
    }
    .slider-modul .arrow {
        padding: 13px;
    }
    .history-modul .left-container .text-area {
        padding-left: var(--txt-padding);
        width: 100%;
    }


}
@media (min-width: 1400px) { /*xxl*/
    footer .continue-link-container, footer .txt-container {
        padding-left: calc(var(--fs-heading-4) * 2.7);
    }
}