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

:root {
/*     --clr-bg: #CDC300;
    
    --clr-base: #0B252A;
    --clr-accent: #AFAFAF; */

    --clr-white: #fff;
    --clr-yellow: #F5F9ED;
    --clr-accent: #66C1BF;
    --clr-green: #66C1BF;
    --clr-dark-blue: #1C3B4D;
    --clr-grey: #EAEDEF;
    --clr-black: #1C3B4D;

    /* --clr-line: #AFAFAF; */
    --clr-light-blue: #EAEDEF;
    --clr-hov: var(--clr-grey);
    --clr-hov2: var(--clr-dark-blue);

    --ff-heading: 'Outfit', sans-serif;
    --ff-txt: 'Kumbh Sans', sans-serif;

    /* 500px -> 1400px */
    --fs-heading-1: clamp(1.875rem, 0.66rem + 3.889vw, 4.063rem); /* 30px → 65px */
    --fs-heading-2: clamp(1.875rem, 1.1806rem + 2.2222vi, 3.125rem); /* 30px → 50px */
    --fs-heading-3: clamp(1.563rem, 1.042rem + 1.667vw, 2.5rem); /* 25px → 40px */
    --fs-heading-4: clamp(1.25rem, 1.0417rem + 0.6667vi, 1.625rem); /* 20px → 26px */
    --fs-txt-lg: clamp(1.125rem, 1.056rem + 0.222vw, 1.25rem); /* 18px → 20px */
    --fs-txt-sm: clamp(1rem, 0.931rem + 0.222vw, 1.125rem); /* 16px → 18px */
    --fs-txt: var(--fs-txt-lg);
    --fs-button: 15px;

    --margin-h3: clamp(1.875rem, 1.1806rem + 2.2222vi, 3.125rem); /*30px -> 50px */
    --margin-title: clamp(2.5rem, 0.4167rem + 6.6667vi, 6.25rem); /* 40px -> 100px */
    --margin-main: clamp(5.625rem, -31.875rem + 50vw, 8.75rem); /* 90 -> 140 */
    --img-margin-bot: clamp(3.125rem, 1.3889rem + 5.5556vi, 6.25rem); /* 50 -> 100px */
    --margin-grid-content: clamp(2.5rem, -1.3194rem + 12.2222vi, 9.375rem); /* 40 -> 150px */
    --margin-accordion: clamp(3.125rem, 0.6944rem + 7.7778vi, 7.5rem); /* 50 - 120 */
    --margin-anchor: clamp(9.375rem, 7.6389rem + 5.5556vi, 12.5rem); /* 175 -> 200px */

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --padding-section-top: 200px;
    --padding-section-bottom: 200px;
}
::selection {
    color: var(--clr-yellow);
    background: var(--clr-dark-blue);
}
.bg-dark-blue ::selection {
    color: var(--clr-black);
    background: var(--clr-yellow);
}

/* General */
body {
    --color: rgb(var(--clr-black));
    --color-hov: var(--color);
    background-color: var(--clr-yellow);
    color: var(--color);
    margin: 0;
    min-height: 100vh;
    position: relative;
    font-weight: var(--fw-regular);
    font-family: var(--ff-heading);
}
.no-scroll {
    overflow: hidden;
}
main {
    min-height: 200px;
    margin-top: var(--margin-main);
}
p {
    font-size: var(--fs-txt);
    font-family: var(--ff-txt);
    font-weight: var(--fw-medium);
    line-height: 1.6;

}
strong {
    font-weight: var(--fw-semibold);
}
h1, h2, h3, h4, h5, h6, p {
    color: var(--color);
}
p:last-child {
    margin-bottom: 0;
}
h1, h2, h3, h4, h5 {
    font-family: var(--ff-heading);
    margin-bottom: 30px;
    line-height: 1.2;
    font-weight: var(--fw-regular);
}
h1 {
    line-height: 1.1;
    font-size: var(--fs-heading-1);
    font-weight: var(--fw-bold);
}
h2 {
    font-size: var(--fs-heading-2);
    font-weight: var(--fw-bold);
}
h3 {
    font-size: var(--fs-heading-3);
    font-weight: var(--fw-bold);
}
h4 {
    font-size: var(--fs-heading-4);
    font-weight: var(--fw-semibold);
    margin-bottom: 1.4em;
}
h5 {
    font-size: var(--fs-heading-5);
}
img {
    user-select: none;
}
a,
.curr-lang span {
    text-decoration: none;
    font-size: var(--fs-txt);
    font-family: var(--ff-txt);
    color: var(--color);    
    display: block;
    cursor: pointer;
}
button.cookie-open-options {
    text-decoration: none;
    font-size: var(--fs-txt);
    font-family: var(--ff-txt);
    color: var(--color);
    display: block;
    cursor: pointer;
}
a:hover, a:focus,
span:hover, span:focus {
    color: var(--clr-accent);
    text-decoration: none;
}
ul {
    list-style-type: square;
    margin: 0;
    padding: 0;
    margin-bottom: 1rem;
    /* color: var(--clr-accent); */
}
ul li {
    padding-left: 40px;
    padding-bottom: 10px;
    font-size: var(--fs-txt);
    font-family: var(--ff-txt);
    line-height: 1.5;
    list-style: none;
    position: relative;
}
ul li::before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    position: absolute;
    left: 0;
    top: 0.4em;
    padding-right: 10px;

    background: var(--clr-accent);
    border-radius: 50%;
    mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
}
/*
ul li::before {
    --url: url('/media/list-symbol.svg');
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    position: absolute;
    left: 0;
    top: 0.4em;

    background: currentColor;
    mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-image: var(--url);
    -webkit-mask-image: var(--url);
} */
.anchor {
    position: absolute;
    transform: translateY(-75px);
}
.normal-width {
    max-width: 1230px;
    padding: 0 15px;
    margin: 0 auto;
}
.special-width {
    max-width: 1630px;
    padding: 0 15px;
    margin: 0 auto;
}
.max-width {
    max-width: 3000px;
    margin: 0 auto;
}
.white {
    background: white;
}
.bg-white {
    background: var(--clr-yellow);
    --color: var(--clr-dark-blue);
    --clr-accent: var(--clr-green);
    --clr-hov: var(--clr-green);
    --clr-button-txt:var(--clr-dark-blue);
    --clr-button-icon:var(--clr-white);
}
.bg-green {
    background: var(--clr-green);
    --color: var(--clr-dark-blue);
    --clr-accent: var(--clr-white);
    --clr-hov: var(--clr-white);
    --clr-button-txt:var(--clr-dark-blue);
    --clr-button-icon:var(--clr-green);
}
.bg-dark-blue {
    background: var(--clr-dark-blue);
    --color: var(--clr-white);
    --clr-accent: var(--clr-green);
    --clr-hov: var(--clr-dark-blue);
    --clr-button-txt:var(--clr-dark-blue);
    --clr-button-icon:var(--clr-white);
}
.green {
    color: var(--clr-green);
}
.bg-green .green {
    color: var(--clr-black);
}
.txt-container h1, .txt-container h2 {
    max-width: 1100px;
}
.txt-container img {
    max-width: 100%;
    margin: 3em 0;
}
.txt-container a {
    display: inline-block;
}
.txt-container > *:last-child {
    margin-bottom: 0;
}
.txt-container table tr td {
    padding-right: 35px;
}
.txt-container h3 {
    margin-bottom: 0;
}
section:first-child {
    --padding-section-top: 200px;
}
.pad-top {
    padding-top: var(--padding-section-top);
}
.pad-bottom {
    padding-bottom: var(--padding-section-bottom);
}
.pad-block {
    padding-top: var(--padding-section-top);
    padding-bottom: var(--padding-section-bottom);
}
.no-margin {
    margin: 0 !important;
}
.no-margin-top {
    margin-top: 0 !important;
}

.hide {
    display: none !important;
}
/* Links allgemein START */
.anker-btn {
    background: var(--clr-accent);
    padding: 5px;
    width: fit-content;
    --color: var(--clr-black);
}
.anker-btn:hover {
    color: var(--clr-grey);
}
.special-link, .link-btn {
    /* margin-top: var(--margin-h3); */
}
.special-link span {
    width: 50px;
    height: 50px;
    display: block;
    padding: 18px;
    background: var(--clr-accent);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background 0.25s ease, transform 0.25s ease, width 0.25s ease, height 0.25s ease;
}
.special-link:hover span, .special-link:hover span {
    background: var(--clr-white);
    transform: scale(1.2);
}
.special-link:hover span::before {
    transform: rotate(45deg);
}
.special-link span::before {
    --url: url('/media/arrow-diagonal.svg');
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    background: var(--clr-dark-blue);
    display: inline-block;
    mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-image: var(--url);
    -webkit-mask-image: var(--url);
    transition: transform 0.25s ease;
}
.special-link.horizontal-right span, .special-link.horizontal-left span, .special-link.vertical-up span, .special-link.vertical-down span {
    padding: 15px;
}
.special-link.horizontal-right span::before {
    --url: url('/media/arrow.svg');
    transform: none;
}
.special-link.horizontal-left span::before {
    --url: url('/media/arrow.svg');
    transform: scaleX(-1);
}
.special-link.vertical-up span::before {
    --url: url('/media/arrow.svg');
    transform: rotate(-90deg);
}
.special-link.vertical-down span::before {
    --url: url('/media/arrow.svg');
    transform: rotate(90deg);
}
.special-link.mail span::before, .special-link.phone span::before, .special-link.print span::before {
    width: 20px;
    height: 20px;
    margin-bottom: 1px;
}
.special-link.mail span::before {
    --url: url('/media/mail.svg');
    
}
.special-link.phone span::before {
    --url: url('/media/phone.svg');
}
.special-link.print span::before {
    --url: url('/media/print.svg');
}

.link-btn {
    position: relative;
    z-index: 1;
    overflow: hidden;
    color: var(--clr-button-txt);
    padding: 20px 35px;
    font-size: 15px;
    font-weight: var(--fw-bold);

    font-size: var(--fs-txt);
    background: var(--clr-accent);
    border-radius: 50px;
    width: fit-content;
    transition: all 0.25s ease;
}
.link-btn:hover, .link-btn:focus {
    color: var(--clr-hov);
    /* background: var(--clr-hov); */
}
.link-btn:hover img, .link-btn:focus img {
    transform: rotate(15deg);
}
.link-btn:hover::after, .link-btn:focus::after {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    transition: all 0.5s;
}
.link-btn::after {
    top: 0;
    bottom: 0;
    left: -100%;
    right: 100%;
    content: "";
    background: var(--color);
    
    position: absolute;
    z-index: -1;
    transition: all 0.5s;
}


.link-btn span {
    width: 18px;
    height: 18px;
    display: inline-block;
    justify-content: center;
    align-items: center;
    transition: all 0.25s ease;
}
.link-btn span::before {
    --url: url('/media/arrow-diagonal.svg');
    content: "";
    z-index: 1;
    width: 100%;
    height: 100%;
    /* margin-top: 5px; */
    display: block;
    background: var(--clr-button-icon);
    mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-image: var(--url);
    -webkit-mask-image: var(--url);
    transition: all 0.25s ease;
}
.link-btn:hover span::before, .link-btn:focus span::before  {
    transform: rotate(45deg);
    background: var(--clr-accent);
}
.link-btn .btn-txt {
    position: relative;
    bottom: 2px;
    display: inline-block;
    margin-left: 10px;
    /* padding: 20px 35px; */
    padding-left: 0;
    font-size: 15px;
    font-weight: var(--fw-bold);
}
/* Links allgemein ENDE */

.slider-txt a.splide__slide .special-link:hover span, .slider-txt a.splide__slide .link-btn:hover span {
    background: var(--clr-white);
}
.slider-txt a.splide__slide .special-link:hover span::before, .slider-txt a.splide__slide .link-btn:hover span::before {
    color: var(--clr-black);
    background: var(--clr-black);
}
.slider-txt a.splide__slide .link-btn:hover  {
    color: var(--clr-black);
}
.slider-txt a.splide__slide , .blocks-txt a.item {
    transition: background 0.25s ease;
}
.slider-txt a.splide__slide:hover, .blocks-txt a.item:hover {
    background: var(--clr-light-blue);
}
/* Alle Blöcke gleichzeitig mit Pfeilen animieren */
.slider-txt a.splide__slide:hover .special-link span, .slider-txt a.splide__slide:hover .link-btn span, .blocks-txt a.item:hover .special-link span, .blocks-txt a.item:hover .link-btn span {
    background: var(--clr-white);
}
.slider-txt a.splide__slide:hover .special-link span, .blocks-txt a.item:hover .special-link span {
    transform: scale(1.2);
}
.slider-txt a.splide__slide:hover .special-link span::before, .slider-txt a.splide__slide:hover .link-btn span::before, .blocks-txt a.item:hover .special-link span::before, .blocks-txt a.item:hover .link-btn span::before {
    color: var(--clr-black);
    background: var(--clr-black);
    transform: rotate(45deg);
}
.slider-txt a.splide__slide:hover .link-btn, .blocks-txt a.item:hover .link-btn {
    padding: 4px;
}
.splide__arrow--next {
    right: var(--content-padding);
}

.splide__arrow--prev {
    left: var(--content-padding);
}
/* Ende */
.bg-green .link-btn:hover, .bg-green.link-btn:focus, .bg-green.link-btn:hover, .bg-green.link-btn:focus {
    /* background: var(--clr-white); */
}


.icon {
    width: 80px;
    height: 80px;
    object-fit: contain;
    object-position: top left;
    background: transparent;
}

.underline-hov a {
    font-size: var(--fs-txt);
    background: transparent;
    transition: all 0.25s ease;
    border-radius: 50px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding: 5px 10px;
    font-size: var(--fs-txt-sm);
    font-weight: var(--fw-semibold);
    width: fit-content;
}
.underline-hov a:hover, .underline-hov a:focus {
    color: var(--clr-hov);
}
.underline-hov a:hover img, .underline-hov a:focus img {
    transform: rotate(20deg);
}
.underline-hov a:hover::after, .underline-hov a:focus::after {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    transition: all 0.5s;
}
.underline-hov a::after {
    top: 0;
    bottom: 0;
    left: -100%;
    right: 100%;
    content: "";
    background: var(--color);
    
    position: absolute;
    z-index: -1;
    transition: all 0.5s;
}


.reveal {
    transition: opacity 0.75s ease-out;
}
.reveal.show {
    opacity: 1;
}
.reveal.hidden {
    opacity: 0;
}
.no-link {
    cursor: default;
}
.title-container {
    flex-wrap: wrap;
    justify-content: start;
    margin-bottom: 100px;
}
.title-container .heading-container {
    flex: 100%;
}
.title-container .txt-container {
    flex: 100%;
    
}
/*General END*/

/* Header & Nav */
/*HEADER*/
.header {
    padding: 30px 0;
    position: fixed;
    top: 0;
    width: 100%;
    transition: background 0.25s ease;
    z-index: 10;
    background: var(--clr-yellow);
}
.bg-white .header, .bg-white nav{
    background: var(--clr-yellow);
    --color: var(--clr-dark-blue);
    --clr-accent: var(--clr-green);
    --clr-hov: var(--clr-white);
    --clr-button-txt:var(--clr-dark-blue);
    --clr-button-icon:var(--clr-white);
    --background: var(--clr-yellow);
}
.bg-green .header, .bg-green nav {
    background: var(--clr-green);
    --color: var(--clr-dark-blue);
    --clr-accent: var(--clr-white);
    --clr-hov: var(--clr-white);
    --clr-button-txt:var(--clr-dark-blue);
    --clr-button-icon:var(--clr-green);
    --background: var(--clr-green);
}
.bg-dark-blue .header, .bg-dark-blue nav {
    background: var(--clr-dark-blue);
    --color: var(--clr-white);
    --clr-accent: var(--clr-green);
    --clr-hov: var(--clr-dark-blue);
    --clr-button-txt:var(--clr-dark-blue);
    --clr-button-icon:var(--clr-white);
    --background: var(--clr-dark-blue);
}
.header.white-header {
    background: var(--clr-yellow);
}
.header .normal-width {
    height: 100%;
    display: flex;
    align-items: center;
}
.header .content-width {
    height: 100%;
    display: flex;
    align-items: center;
}
.header .linked-in {
    width: 35px;
    height: 35px;
}
.header .logo-white, .header.white-header .logo-blue {
    display: none;
}
.header.white-header .logo-white, .header .logo-blue {
    display: block;
    animation: fadeIn 0.5s ease 0s;
}
.header .burger {
    display: none;
}
.header .nav-link {
    font-size: 18px;
    font-weight: var(--fw-semibold);
    margin-left: 10px;
    padding: 0;
    transition: color 0.25s ease;
    color: var(--color);
    padding: 10px 20px;
}
.header .nav-link:hover, .header .nav-link:focus  {
    color: var(--clr-hov);
}


.nav-link.link-btn {
    background: transparent;
    min-width: fit-content;
    /* --clr-hov: var(--clr-accent); */
}
/* , header .nav-link:hover, header .nav-link:focus */
.header .nav-link.active{
    border: 4px solid var(--clr-accent);
    border-radius: 50px;
    padding: 6px 16px;
}
/*BEIDES*/
.header, nav {
    font-weight: var(--fw-medium);
    white-space: nowrap;
}
.header .logo, nav .logo {
    margin-right: auto;
}
.header .logo img, nav .logo img {
    width: 180px;
    height: auto;
}
.header.bg-white .logo .whiteimg {
    display: block;
}
header.bg-white .logo .cyanimg, header.bg-white .logo .darkblueimg {
    display: none;
}
header.bg-green .logo .cyanimg {
    display: block;
}
header.bg-green .logo .whiteimg, header.bg-green .logo .darkblueimg {
    display: none;
}
header.bg-dark-blue .logo .darkblueimg {
    display: block;
}
header.bg-dark-blue .logo .cyanimg, header.bg-dark-blue .logo .whiteimg {
    display: none;
}

nav a.active, nav span.active {
    border: 4px solid var(--clr-accent);
    border-radius: 50px;
    padding: 6px 16px;
}
nav .normal-width {
    height: 100%;
}
nav .content-width--small {
    height: 100%;
}
nav .links {
    height: calc(100% - 75px);
    display: flex;
    align-items: center;
    margin-top: 70px;
}
nav .links .row {
    width: 100%;
}
nav .links a {
    font-size: var(--fs-heading-3);
    font-family: var(--ff-heading);
    margin-bottom: 15px;
}
nav .links .nav-link{
    font-size: var(--fs-heading-3);
    margin-bottom: 40px;
    padding-inline: 15px;
    color: var(--color);
}
nav .socialMedia-container {
    display: flex;
    padding-left: 5px;
}
nav .social-media {
    padding: 12px;
    border-radius: 50px;
    height: fit-content;
    width: fit-content;
    /* --color: var(--clr-white); */
    border: 3px solid transparent;
    min-width: 51px;
}
nav .social-media:hover, nav .social-media:focus {
    border: 3px solid var(--clr-dark-blue);
}
nav .social-media::after {
    background-color: var(--clr-white);
}
.bg-green nav .social-media::after {
    background-color: var(--clr-green);
}
nav .social-media img{
    max-height: 21px;
    max-width: 21px;
    transition: all 0.25s ease;
}
nav .social-media:not(:first-child) {
    margin-left: 20px;
}
.logo img {
    height: 25px;
}
.burger {
    z-index: 3;
    font-family: var(--ff-heading);
    font-size: var(--fs-txt);
    position: relative;
    cursor: pointer;
    height: 25px;
    width: 30px;
    /* color: transparent; */
    line-height: 1.3;
    display: flex;
    justify-content: center;
    transition: color 0.25s ease;
    user-select: none;
    align-items: center;
}
.burger::before, .burger::after {
    content: ''; 
    position: absolute;
    width: 30px;
    height: 0;
    border: 2px solid var(--color);
    transition: transform 0.25s ease;
}
/* .burger:hover::before, .burger:focus::before {
    transform: rotate(-45deg) translateY(0px);
}
.burger:hover::after, .burger:focus::after {
    transform: rotate(45deg) translateY(0px);
} */

.burger.open::before{
    transform: rotate(-45deg) translateY(0px);
}
.burger.open::after{
    transform: rotate(45deg) translateY(0px);
}

.burger::before{
    transform: rotate(0deg) translateY(5px);
}
.burger::after{
    transform: rotate(0deg) translateY(-5px);
}

.burger:hover, .burger:focus {
    color: var(--color);
}
/*NAV*/
nav {
    padding-top: 15px;
    /* display: none; */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: -50px;
    /* background: var(--clr-background); */
    overflow-y: scroll;
    padding-bottom: 150px;
    z-index: 100;
    margin-top: var(--margin-main);
    overflow: hidden;
}
nav {
    transition: right 1.25s ease;
    right: 100%;
}

nav.visible {
    /* display: block; */
    right:0%;
    transition: right 1.25s ease;
}
nav .nav-link {
    color: var(--color);
}
nav .nav-link:hover, nav .nav-link:focus {
    color: var(--background);
}
nav .header {
    display: flex;
    align-items: center;
}
nav .burger {
    --color: var(--clr-black);
    color: var(--color);
}
nav .burger:hover, nav .burger:focus {
    color: transparent;
}
.language-switch .curr-lang {
    position: relative;
    padding-right: 20px;
    cursor: pointer;
}
.language-switch .curr-lang a {
    color: var(--clr-black);
}
.white-header .language-switch .curr-lang a, nav .language-switch .curr-lang a {
    color: var(--clr-black);
}

.language-switch .curr-lang::after {
    content: '';
    width: 10px;
    height: 10px;
    border: 2px solid var(--clr-accent);
    border-top: transparent;
    border-left: transparent;
    transform: rotate(45deg);
    position: absolute;
    right: 0;
    top: 30%;
    transition: transform 0.25s ease,
                top 0.25s ease;
}
.language-switch:hover .curr-lang::after, .language-switch:focus .curr-lang::after, .language-switch.open .curr-lang::after {
    transform: rotate(-135deg);
    top: 50%;
}
.language-switch .lang-dropdown a {
    transition: color 0.25s ease;
}
.language-switch .lang-dropdown a:hover, .language-switch .lang-dropdown a:focus {
    color: var(--clr-dark-blue);
}
.white-header .language-switch .lang-dropdown a:hover, .white-header .language-switch .lang-dropdown a:focus,
nav .language-switch .lang-dropdown a:hover, nav .language-switch .lang-dropdown a:focus {
    color: white;
}
.language-switch {
    position: relative;
	margin-right: 20px;
    /* margin-right: 50px;
    margin-left: auto; */
    z-index: 10;
}
.language-switch a,
.language-switch span {
    font-size: 18px;
	font-weight: var(--fw-medium);
    font-family: var(--ff-heading);
    color: var(--clr-accent);
	padding: 3px 1px;
	margin-left: 20px;
}
.language-switch a.active,
.language-switch span.active  {
   /* color: var(--clr-white); */
    cursor: pointer;
}
.language-switch .lang-dropdown {
    position: absolute;
    height: 0;
    opacity: 0;
    overflow: hidden;
    transition: opacity 0.25s ease;
}
.language-switch.open .lang-dropdown, .language-switch:hover .lang-dropdown, .language-switch:focus .lang-dropdown {
    height: fit-content;
    opacity: 1;
}
nav .links .row > div {
    margin-bottom: 15px;
    padding-left: 0px;
}
/* Header & Nav END */

/* Footer */
footer {
    width: 100%;
    padding-bottom: var(--padding-section-bottom);
    padding-top: var(--padding-section-top);
    overflow: hidden;
    isolation: isolate;
    --footer-left-padding: clamp(0.938rem, -8.625rem + 17vw, 6.25rem);
}
footer .socialMedia-container {
    display: flex;
}
footer .social-media {
    padding: 15px;
    height: fit-content;
    width: fit-content;
}
footer .social-media img{
    max-height: 21px;
    max-width: 21px;
    transition: all 0.25s ease;
}
footer .social-media:not(:first-child) {
    margin-left: 20px;
}
footer a, footer button {
    font-size: var(--fs-heading-5);
    font-weight: var(--fw-regular);
    font-family: var(--ff-heading);
    margin-bottom: 15px;
}
footer .normal-width {
    position: relative;
}
footer .row .col-md-6 {
    padding-left: 0;
}
footer .footer-img {
    position: absolute;
    left: 0;
    bottom: 0;
    transform: translate(50%, 50%);
    z-index: -1;
}
footer .connect-link {
    font-size: 30px;
    font-weight: var(--fw-semibold);
    position: relative;
    max-width: 380px;
    transition: color 0.25s ease;
    display: flex;
    justify-content: space-between;
}
footer .special-link {
    margin-top: 0;
}
footer .connect-link::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 0;
    bottom: -30px;
    left: 0;
    border: 1px solid currentColor;
}
footer .underline-hov {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: -15px;
    margin-top: -5px;
    padding-left: 15px;
}
footer .underline-hov .grid-default {
    --columns: 2;
}
footer .img-container {
    padding-left: var(--footer-left-padding);
}
footer .bottom-container {
    margin-top: 150px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: var(--footer-left-padding);
}
footer .bottom-container p {
    color: var(--clr-green);
}
footer .bottom-container .linked-in:hover, footer .bottom-container .linked-in:focus {
    opacity: 0.8;
}
footer .bottom-container .linked-in img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    object-position: center;
}
footer p {
    margin: 0;
}
footer .connect-link h4 {
    margin-top: 10px;
}
.nav-link.link-btn {
    padding: 5px 10px;
}
/* Footer END */

/* Kontakt */
.contact {
    position: fixed;
    border-radius: 50px;
    width: 120px;
    height: 36px;
    background: white;
    bottom: 20px;
    right: 20px;
    transition: height 0.5s ease,
                width 0.5s ease,
                border-radius 0.5s ease,
                bottom 0.5s ease,
                right 0.5s ease,
                background 0.5s ease;
    cursor: pointer;
    z-index: 20;
}
.contact.visible {
    height: 100%;
    width: 100%;
    border-radius: 0;
    bottom: 0;
    right: 0;
    background: #008f8ae6;
}
.contact .contact-txt {
    width: 120px;
    height: 36px;
    font-family: var(--ff-heading);
    font-size: 23px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--clr-accent);
    transition: opacity 0.5s ease;
    position: absolute;
    bottom: 0;
    right: 0;
}
.contact.visible .contact-txt {
    opacity: 0;
}
.contact .contact-cross {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--clr-accent);
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 20px;
    right: 20px;
    opacity: 0;
    transition: opacity 0.5s ease,
                transform 0.25s ease;
}
.contact.visible .contact-cross {
    opacity: 1;
}
.contact a {
    display: block;
}
.contact .contact-cross::before, .contact .contact-cross::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 0;
    border: 1px solid white;
}
.contact .contact-cross::before {
    transform: rotate(45deg);
}
.contact .contact-cross::after {
    transform: rotate(-45deg);
}
.contact .contact-cross:hover, .contact .contact-cross:focus {
    transform: scale(1.2);
}
.contact .txt-container {
    cursor: default;
    z-index: 21;
    position: absolute;
    right: 15%;
    bottom: 50%;
    transform: translateY(50%);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.contact.visible .txt-container {
   visibility: unset;
   opacity: 1;
}
.contact .txt-container, .contact .txt-container p, .contact .txt-container a {
    color: white;
}
.contact .txt-container a:hover, .contact .txt-container a:focus {
    color: var(--clr-accent);
}
.contact .txt-container .social-icons a {
    background: white;
}
.contact .txt-container .social-icons a:hover, .contact .txt-container .social-icons a:focus {
    background: var(--clr-green);
}
/* Kontakt END */


/* Text Modul */
.txt-module .link-arrow {
    margin-top: 40px;
}
.txt-module .txt-container p:last-child {
    margin-bottom: 0;
}
.txt-module .icon {
    margin-bottom: 15px;
}

.txt-module .special-link {
    margin-top: 30px;
}

.txt-module .txt-container {
    max-width: 1100px;
}
/* Text Modul END */
/* Bild neben Text */
.right {
    order: 1;
}
.img-txt img {
    width: 100%;
    object-fit: contain;
    object-position: center;
    /* margin-top: -80px; */
}
.img-txt .row > div > div.simpleParallax {
    margin-top: -80px;
}
.img-txt .icon {
    width: 80px;
    height: 80px;
    object-fit: contain;
    object-position: top left;
    margin-top: 0;
    margin-bottom: 25px;
}

.img-txt .txt-container {
    padding-top: 50px;
}
.img-txt .special-link {
    margin-top: 30px;
}

/* Bild neben Text END */
/* 2 Bild + Text Block */
.img-txt-2 .imgs, .img-txt-2 .txts {
    width: 100%;
    display: flex;
}
.img-txt-2 .imgs {
    align-items: flex-end;
}
.img-txt-2 .txts {
    align-items: flex-start;
    margin-top: 35px;
}
.img-txt-2 .imgs > div, .img-txt-2 .txts > div {
    width: 50%;
}
.img-txt-2 .imgs .img-l, .img-txt-2 .txts > div:first-child {
    padding-right: 5%;
    margin-right: auto;
}
.img-txt-2 .imgs .img-r, .img-txt-2 .txts > div:last-child {
    padding-left: 5%;
    margin-left: auto;
}
.img-txt-2 .imgs img {
    margin-top: auto;
    width: 100%;
    object-fit: cover;
}
.img-txt-2 .txts .img-l, .img-txt-2 .txts .img-r {
    display: none;
}
.img-txt-2 .txts .txt-container .img-l img, .img-txt-2 .txts .txt-container .img-r img {
    margin-top: 0;
}
.img-txt-2 .special-link {
    margin-top: 30px;
}
/* 2 Bild + Text Block ENDE */
/* volle Breite Bild overlay Text */
.img-txt-overlay, .img-txt-overlay img, .img-txt-overlay video {
    height: 980px;
}
.img-txt-overlay img, .img-txt-overlay video {
    width: 100%;
    object-fit: cover;
    object-position: center;
    position: absolute;
}
.img-txt-overlay .normal-width {
    height: 100%;
    position: relative;
}
.img-txt-overlay .txt-container {
    position: absolute;
    width: 700px;
    bottom: 100px;
    right: 0;
    max-width: 600px;
}
.img-txt-overlay .link-arrow {
    margin-top: 60px;
}
.img-txt-overlay .img-center {
    object-position: center;
}
.img-txt-overlay .img-left {
    object-position: left;
}
.img-txt-overlay .img-right {
    object-position: right;
}
.img-txt-overlay .max-width {
    max-width: 2000px;
    position: relative;
}
/* volle Breite Bild overlay Text ENDE */

/* Video neben Text */
.row {
    margin: 0;
}
.vid-txt-modul .col-md-6, .vid-txt-modul .col-sm-12 {
    padding: 0;
}
.vid-txt-modul .txt-container {
    padding-top: 100px;
    order: 2;
}
/* .vid-txt-modul .txt-container h1{
    font-weight: var(--fw-bold);
} */
.vid-txt-modul .vid-container {
    padding: 0;
}
.vid-txt-modul .vid-container.right {
    margin-left: 25%;
}
.vid-txt-modul .special-link {
    margin-top: 30px;
}
.vid-txt-modul .txt-container .icon {
    margin-top: 0;
    margin-bottom: 25px;
}
.vid-txt-modul .vid-container video, .vid-txt-modul .vid-container img {
    width: 100%;
}
.vid-txt-modul .txt-container .link-btn {
    height: fit-content;
    width: fit-content;
    margin-top: var(--fs-heading-2);
}
/* Video neben Text ENDE */

/* Video Fullscreen */
.vid-fullscreen {
    max-height: 90vh;
    min-height: 500px;
    position: relative;
}
.vid-fullscreen video, .vid-fullscreen img {
    height: 100%;
    min-height: 500px;
    max-height: 90vh;
    width: 100%;
    object-fit: cover;
    object-position: center;
}
.vid-fullscreen .txt-container {
    width: 100%;
}
.vid-fullscreen .txt-container {
    text-transform: uppercase;
    color: var(--clr-white);
}
.vid-fullscreen .txt-container h1 {
    margin-bottom: 0;
}
/* .vid-fullscreen .link-btn {
    background: var(--clr-base);
    color: white;
    font-weight: var(--fw-semibold);
}
.vid-fullscreen .link-btn:hover, .vid-fullscreen .link-btn:focus {
    color: var(--clr-base);
} */
/* Video Fullscreen ENDE */
.vid-fullscreen .content-width--small, .img-fullscreen .content-width--small {
    position: absolute;
    bottom: 10%;
    width: 100%;
    z-index: 5;
    left: 0;
    right: 0;
}
.bg-white .vid-fullscreen, .bg-white .img-fullscreen {
    --color: var(--clr-white);
}
/* Bild Fullscreen */
.img-fullscreen {
    max-height: 100vh;
    min-height: 400px;
    position: relative;
}
.img-fullscreen video, .img-fullscreen img {
    height: 100%;
    min-height: 400px;
    max-height: 100vh;
    width: 100%;
    object-fit: cover;
    object-position: center;
}
.img-fullscreen .txt-container {
    width: 100%;
    max-width: 1100px;
}
.img-fullscreen .txt-container h3 {
    margin-bottom: 0;
}
.img-fullscreen .txt-container {
    color: var(--clr-white);
}
.img-fullscreen .txt-container h1 {
    margin-bottom: 0;
}
/* Filter Text */
/* txt-filter = text, filter-txt = filter */
.filter-txt.visible {
    cursor: default;
}
.filter-txt {
    margin-bottom: 25px;
}
.filter-txt:last-child {
    margin-bottom: 50px;
}

.txt-filter-container .txt-container h2 {
    margin-bottom: 2em;
}
.txt-filter-container > .txt-container {
    margin-bottom: var(--fs-heading-2);
}
.filter-txt {
    display: flex;
    align-items: center;
    font-weight: var(--fw-medium);
    transition: color 0.25s ease;
}
.filter-txt span {
    margin-right: 25px;
    background: transparent;
}
.filter-txt span::before {
    background: var(--clr-base);
}
.bg-black .filter-txt:not(.visible) span::before {
    background: white;
}
.filter-txt:hover span::before, .filter-txt:focus span::before {
    background: var(--clr-base) !important;
}
.filter-txt.visible span {
    background: white;
}
.bg-black .filter-txt.visible {
    color: white;
}
.filter-txt.visible {
    color: var(--clr-base);
}
.txt-filter h5 {
    font-weight: var(--fw-semibold);
}

/* Filter Text ENDE */

/* Scroll-X Module  */
.no-scroll-x {
    display: flex;
    justify-content: center;
    gap: 30px;
}
.scroll-x {
    overflow-x: scroll;
    overflow-y: clip;
    display: flex;
    scrollbar-color: var(--clr-accent) white;
    scrollbar-width: thin;
    scroll-behavior: smooth;
}
.scroll-x::-webkit-scrollbar, .no-scroll-x::-webkit-scrollbar {
    height: 5px;
}
.scroll-x::-webkit-scrollbar-track, .no-scroll-x::-webkit-scrollbar-track {
    background: white;
    cursor: pointer;
}
.scroll-x::-webkit-scrollbar-thumb, .no-scroll-x::-webkit-scrollbar-thumb {
    background: var(--clr-accent);
}
.scroll-x::-webkit-scrollbar-thumb:hover, .no-scroll-x::-webkit-scrollbar-thumb:hover {
    background: #1c6ea1;
}
.scroll-x > * {
    flex-shrink: 0;
    height: 100%;
    margin: 0 15px;
    cursor: pointer;
}
.scroll-x > *:first-child {
    margin-left: 0;
}
.scroll-x > *:last-child {
    margin-right: 0;
}
.scroll-4 > * {
    width: calc(23% - 22.5px);
    min-width: 300px;
}
.scroll-3 > * {
    width: calc(33% - 15px);
}
/* Scroll-X Module ENDE */
/* Bild Link Scroll */
.img-link-scroll {
    margin-bottom: 40px;
}
.img-link-scroll img {
    width: 100%;
    height: 185px;
    object-fit: cover;
    object-position: center;
    margin-bottom: 20px;
}
/* Bild Link Scroll ENDE */
/* Text Scroll */
.txt-scroll {
    height: auto;
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Text Scroll ENDE */

/* Fade Text + Bild */
/* .fade-txt-img {
    position: relative;
    width: 100%;
    min-height: 780px;
}
.fade-txt {
    width: 700px;
    background: white;
    padding: 30px;
    position: relative;
    z-index: 1;
}
.fade-txt p, .fade-txt a, .fade-txt .link-arrow {
    color: var(--clr-accent-dark);
    --clr-arrow: var(--clr-accent-dark);
}
.fade-txt span.link-arrow:hover::before, .fade-txt span.link-arrow:focus::before {
    background: var(--clr-accent-dark);
}
.fade-txt .link-arrow {
    padding-top: 10px;
}
.fade-txt .txt-container {
    min-height: 100px;
    
}
.fade-img-txt {
    height: 700px;
    width: 1010px;
    position: absolute;
    bottom: 0;
    right: 0;
}
.fade-img-txt img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.fade-img-txt .txt-container {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 50px;
    width: 600px;
}
.fade-img-txt .txt-container h3 {
    color: white;
    margin: 0;
}
.buttons {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    width: 100px;
}
.buttons .next-button, .buttons .prev-button {
    background: transparent;
    border: none;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    position: relative;
}
.buttons .next-button::before, .buttons .prev-button::before, .buttons .next-button::after, .buttons .prev-button::after {
    content: '';
    position: absolute;    
}
.buttons .next-button::before, .buttons .prev-button::before {
    width: 12px;
    height: 12px;
    border-top: 2px solid var(--clr-accent-dark);
}
.buttons .next-button::before {
    border-left: 2px solid var(--clr-accent-dark);
    transform: rotate(-45deg);
}
.buttons .prev-button::before {
    border-right: 2px solid var(--clr-accent-dark);
    transform: rotate(45deg);
    right: 0;
}
.buttons .next-button::after, .buttons .prev-button::after {
    width: 100%;
    height: 0;
    border: 1px solid var(--clr-accent-dark);
}
.buttons .prev-button::after {
    left: 0;
}
.buttons .next-button:hover::before, .buttons .prev-button:hover::before, .buttons .next-button:hover::after, .buttons .prev-button:hover::after,
.buttons .next-button:focus::before, .buttons .prev-button:focus::before, .buttons .next-button:focus::after, .buttons .prev-button:focus::after {
    border-color: var(--clr-accent-medium);
} */

/* Fade Text + Bild ENDE */

/* Blöcke Bild Link */
.blocks-img {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    column-gap: 30px;
    row-gap: 50px;
}
.blocks-element {
    max-width: 400px;
    width: 100%;
    height: 250px;
    position: relative;
}
.blocks-element img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.blocks-element a {
    position: absolute;
    bottom: 0;
    width: 100%;
    color: var(--clr-white);
    z-index: 1;
    padding: 20px 60px 15px 20px;
    font-size: var(--fs-txt);
    font-family: var(--ff-txt);
    font-family: var(--ff-heading);
}
.blocks-element a:hover, .blocks-element a:focus {
    color: var(--clr-white);
}
.blocks-element a h3 {
    margin: 0;
    font-size: var(--fs-heading-3);
}

/* Blöcke Bild Link ENDE */

/* Akkordion Modul */
.accordion-modul {
    position: relative;
}
.accordion-modul .grid-default {
    --columns: 12;
    --gap-x: 
}
.accordion-modul .content-container {
    
    --col-span: 12;
    --col-span-md: 7;
    --col-start: 1;
    --row-start: 2;
    --row-start-md: 1;
    padding-bottom: 0;
}
.accordion-modul .txt-container {
    margin-bottom: calc(var(--fs-heading-3));
}
.accordion-modul .img-container {
    --col-span: 12;
    --col-span-md: 5;
    --col-start: 1;
    --row-start-md: 1;
    padding-bottom: var(--img-margin-bot);

}
.accordion-modul .img-container img {
    position: sticky;
    top: 135px;
    width:100%;
    aspect-ratio: 68/75;
}
.accordion-modul .accordion {
    width: 100%;
}
.accordion-modul .acc-item:first-child button {
    padding-top: 0;
}
.accordion-modul .acc-item {
    border-bottom: 2px solid var(--clr-accent);
}
.accordion-modul .special-link {
    margin-right: 15px;
    margin-top: 0;
}
.accordion-modul .special-link span {
    background: transparent;
    border-radius: 50px;
}
.accordion-modul .acc-item .acc-btn h4 {
    transition: color 0.25s ease;
}
.accordion-modul .acc-item:hover .acc-btn h4 {
    color: var(--clr-accent);
}
.accordion-modul .special-link span::before {
    transition: background 0.25s ease;
}
.accordion-modul.bg-dark-blue .acc-item:hover .acc-btn .special-link span::before {
    background: var(--clr-accent);
}
.accordion-modul .acc-item:hover.open .acc-btn .special-link span::before {
    background: var(--color);
}
.accordion-modul .acc-item.open .special-link span {
    background: var(--clr-accent);
}
.accordion-modul:not(.bg-dark-blue) .special-link span {
    background: var(--clr-accent);
}
.accordion-modul .acc-item.open .acc-btn h4 {
    color: var(--clr-accent);
}
.accordion-modul .acc-item.open .special-link span::before {
    transform: rotate(-90deg);
    background: var(--clr-black);
}
.bg-dark-blue.accordion-modul .special-link span::before {
    background: var(--clr-white);  
}
.accordion-modul .acc-btn {
    --columns: 1;
    width: 100%;
    padding-top: 50px;
    padding-bottom: 20px;
    
}
.accordion-modul .panel-head {
    width: 100%;
    position: relative;
    justify-content: start;
    align-items: center;
}
.accordion-modul .panel-head h4{
    margin-bottom: 0;
}
.accordion-modul .panel-container > * {
    margin-bottom: 0;
}
.accordion-modul .acc-content {
    padding-left: 53px;
}
.accordion-modul .arrow::after {
    transform: rotate(-45deg) translate(12.5%, -12.5%);
}
.accordion-modul .panel-txt {
    padding: 10px 0px 50px 0px;

}
.accordion-modul .anker-container {
    padding-top: 25px;
    gap: 10px;
}
.accordion-modul .anker-content {
    padding-top: calc(var(--fs-heading-3)*2);
}

.open.acc-item .special-link span::before {
    transform: rotate(180deg);

}
.acc-item:not(.open) .acc-content {
    display: none;
}
/* Accordion ENDE */
/* Stellenangebote accordion */
.accordion-modul.jobs .grid-default {
    --columns: 1;
    --columns-xl: 2;
    --gap-x: 15px;
}
.accordion-modul.jobs .heading-container {
    margin-bottom: 100px;
}

.accordion-modul.jobs .acc-item {
    border-bottom: 1px solid var(--clr-dark-blue);
}
.bg-dark-blue.accordion-modul.jobs .acc-item {
    border-color: var(--clr-white);
}
.accordion-modul.jobs .special-link.mail span::before, .accordion-modul.jobs .special-link.phone span::before {
    background: var(--color);
    transform: rotate(0deg); 
}
.accordion-modul.jobs .special-link.print span::before {
    background: var(--clr-accent);
    transform: rotate(0deg); 
}
.bg-dark-blue.accordion-modul.jobs .special-link.mail span::before, .bg-dark-blue.accordion-modul.jobs .special-link.phone span::before {
    background: var(--clr-dark-blue);
    transform: rotate(0deg); 
}
.accordion-modul.jobs .panel-txt:first-child {
    margin-left: 0px;
}
.accordion-modul.jobs .special-link.mail, .accordion-modul.jobs .special-link.phone, .accordion-modul.jobs .special-link.print {
    padding-bottom: var(--fs-heading-4);
}
.accordion-modul.jobs .special-link.mail span, .accordion-modul.jobs .special-link.phone span, .accordion-modul.jobs .special-link.print span {
    padding: 13px;
}
.accordion-modul.jobs .special-link.mail span, .accordion-modul.jobs .special-link.phone span {
    background: var(--clr-accent);
}
.accordion-modul.jobs .special-link.print span {
    background: transparent;
}
.accordion-modul.jobs .contactheading {
    margin-left: 50px;
    margin-bottom: 30px;
    font-size: var(--fs-txt-sm);
    font-weight: var(--fw-bold);
    color: var(--color);
}
.accordion-modul.jobs .flex {
    padding: 50px;
}

/* Stellenangebote ENDE */
/* Blöcke mit Anker Modul */
.three-columns-anchor-modul .grid-default {
    --columns: 1;
    --columns-md: 2;
    --columns-xl: 2;
    --gap-x: 100px;
    --gap-y: 45px;
}
.three-columns-anchor-modul .column-container:has(> :nth-child(3)) { /* min 3 elements */
    --columns-xl: 3;
    --gap-x: 45px;
  }

.three-columns-anchor-modul .content-container {
    background-color: var(--clr-white);
    padding: 30px;
    display: flex;
    flex-direction: column;
}
.three-columns-anchor-modul .anker {
    position: relative;
    top: calc(var(--margin-anchor) * (-1));
}
.three-columns-anchor-modul .content-container:last-child {
    margin-bottom: 0;
}
.three-columns-anchor-modul .icon-container {
    padding-bottom: calc(var(--img-margin-bot)/2);
    padding-top: var(--fs-heading-4);
    max-width: 150px;
}
.three-columns-anchor-modul .icon-container img {
    object-fit: cover;
    max-height: calc(var(--fs-heading-4) *8);
}
.three-columns-anchor-modul p {
    flex-grow: 1;
}

.three-columns-anchor-modul .link-btn {
    aspect-ratio: 1/1;
    padding: 20px;
}
.three-columns-anchor-modul .link-btn span{
    position: relative;
    bottom: 5px;
}
/* Blöcke mit Anker ENDE */

/* Blöcke ohne Hintergrund Modul */
.three-columns-txt-modul .grid-default {
    --columns: 1;
    --columns-md: 2;
    --columns-xl: 3;
    --gap-x: calc(var(--fs-heading-2)/2);
    --gap-y: 100px;
}
/* Blöcke ohne Hintergrund ENDE */
/* News */
.news-container img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    object-position: center;
}
.news-container .txt-container h1, .news-container .txt-container h2 {
    margin-top: 1em;
}
.news-container .txt-container h2 {
    margin-bottom: 0.7em;
}
.news-container .txt-container a {
    color: var(--clr-accent-medium);
}
.news-container .txt-container a:hover, .news-container .txt-container a:focus {
    color: var(--clr-accent-dark);
}
.news-container .txt-container p:last-child {
    margin-bottom: 0;
}
/* News ENDE */

/* Back Button */
.back-button {
    display: table;
}
.back-button.right {
    margin-left: auto;
}
.back-button.left {
    margin-right: auto;
}
.back-button.link-arrow {
    color: var(--clr-accent-orange);
    display: block;
    width: fit-content;
    padding-top: 50px;
    padding-bottom: 50px;
}
.back-button.link-arrow::before {
    background: var(--clr-accent-orange);
    transform: rotate(-90deg);
}
.back-button.link-arrow:hover, .back-button.link-arrow:focus {
    color: var(--clr-accent-dark);
}
.back-button.link-arrow:hover::before, .back-button.link-arrow:focus::before {
    background: var(--clr-accent-dark);
}

/* Back Button ENDE */

/* Insights */
.masonry {
    margin: 0 -15px;
    transition: height 0.25s ease;
}
.masonry-item {
    width: 33.33%;
    padding: 0 15px;
    margin-bottom: 65px;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.masonry-item.visible {
    opacity: 1;
    animation: fadeIn 0.5s ease 0s;
}
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
.masonry-item img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    object-position: center;
}
.masonry-item .txt-container {
    font-size: var(--fs-txt);
    font-family: var(--ff-txt);
}
.masonry-item .link-container{
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
}
.masonry-item .link-container span {
    font-size: var(--fs-txt);
    font-family: var(--ff-txt);
    margin-left: auto;
}
.masonry .txt-container h3 {
    margin-top: 1em;
}
.masonry .no-link {
    display: none;
}

.masonry-filter {
    text-align: right;
    margin-bottom: 50px;
}
.masonry-filter.visible {
    display: block;
}
.bg-black .masonry-filter button {
    --color: var(--clr-white);
}
.masonry-filter button {
    --color: var(--clr-base);
    margin-left: 30px;
    border: none;
    background: transparent;
    color: var(--color);
    font-family: var(--ff-txt);
    font-size: var(--fs-txt);
}
.masonry-filter button.active {
    cursor: default;
    color: var(--clr-accent);
}
.masonry-filter button:hover, .masonry-filter button:focus {
    color: var(--clr-accent);
}
.toggle-filter-button {
    --color: var(--clr-base);
    width: 25px;
    height: 25px;
    display: none;
    border: none;
    background: transparent;
    margin-bottom: 20px;
    margin-left: auto;
    padding: 0;
}
.bg-black .toggle-filter-button {
    --color: var(--clr-white);
}
.toggle-filter-button .filter-icon {
    width: 100%;
    height: 100%;
}
.toggle-filter-button .filter-icon > * {
    stroke: var(--color);
    stroke-width: 2px;
}

.filter-icon circle {
    fill: var(--color);
    transition: transform 0.25s ease;
}
.filter-icon:hover .c1, .filter-icon:hover .c3, .filter-icon:focus .c1, .filter-icon:focus .c3 {
    transform: translateX(9px);
}
.filter-icon:hover .c2, .filter-icon:focus .c2 {
    transform: translateX(-9px);
}
.toggle-filter-button.clicked .filter-icon .c1, .toggle-filter-button.clicked .filter-icon .c3 {
    transform: translateX(13px);
}
.toggle-filter-button.clicked .filter-icon .c2 {
    transform: translateX(-13px);
}
button.load-more {
    width: 20px;
    height: 20px;
    display: flex;
    padding: 0;
    margin: 0 auto;
    margin-top: 50px;
    border: none;
    background: transparent;
    position: relative;
    justify-content: center;
    align-items: center;
    transition: transform 0.25s ease;
    font-size: 23px;
    font-family: var(--ff-txt);
    --color: var(--clr-base);
}
.bg-black button.load-more {
    --color: var(--clr-white);
}
button.load-more p {
    transform: translateY(-23px);
}
button.load-more:hover, button.load-more:focus {
    transform: translateY(10px);
}
button.load-more::before, button.load-more::after {
    content: '';
    position: absolute;
}
button.load-more::before {
    width: 12px;
    height: 12px;
    border-bottom: 2px solid var(--color);
    border-right: 2px solid var(--color);
    bottom: 0;
    transform: rotate(45deg);
}
button.load-more::after {
    width: 0;
    height: 100%;
    border-left: 1px solid var(--color);
    border-right: 1px solid var(--color);
}
button.not-loaded {
    display: none;
}
/* Insights ENDE */

/* Audio Wave */
.wave-controls {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
}
.wave-controls button {
    --clr-border: var(--clr-accent-dark);
    padding: 0;
    background: none;
    width: 0;
    height: 0;
    border-right: none;
    border-top: 10px solid transparent;
    border-left: 15px solid var(--clr-border);
    border-bottom: 10px solid transparent;

}
.orange .wave-controls button {
    --clr-border: white;
}
.wave-controls button.playing {
    width: 15px;
    height: 20px;
    border-right: 5px solid var(--clr-border);
    border-left: 5px solid var(--clr-border);
    border-top: none;
    border-bottom: none;
}
.time-container > * {
    display: inline-block;
    font-family: var(--ff-txt);
    font-size: var(--fs-txt);
}
.loading {
    position: relative;
}
.loading .loading-icon {
    position: absolute;
    top: 33.5%;
    left: 50%;
    transform: translate(-50%, -33.5%);
}
.orange .loading .loading-icon > span {
    background: white;
}
.loading .loading-icon > span {
    display: inline-block;
    background: var(--clr-accent-dark);
    width: 8px;
    height: 50px;
    margin: 0 2px;
    transform: scaleY(0.08);
    animation: loading 1s ease-in-out infinite;
}
.loading .loading-icon .bar2 {
    animation-delay: 0.1s;
}
.loading .loading-icon .bar3 {
    animation-delay: 0.2s;
}
.loading .loading-icon .bar4 {
    animation-delay: 0.3s;
}
.loading .loading-icon .bar5 {
    animation-delay: 0.4s;
}
.loading .loading-icon .bar6 {
    animation-delay: 0.5s;
}
@keyframes loading {
    0%, 40%, 100% {
        transform: scaleY(0.08);
    }
    20% {
        transform: scaleY(1);
    }
}
.default-audio audio {
    width: 100%;
}

/* Audio Wave ENDE */

/* YT-Embed */
.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0;
    height: 0;
    overflow: hidden;
}
.embed-container iframe, .embed-container object, .embed-container embed, .yt-accept {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.yt-accept {
    background: var(--clr-accent-dark);
    display: flex;
    justify-content: center;
    align-items: center;
}
.yt-accept::before {
    content: '';
    position: absolute;
    width: 0; 
    height: 0; 
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-left: 40px solid white;
    z-index: 1;
}
.yt-accept img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: brightness(0.5);
}
.yt-accept .txt-container {
    z-index: 1;
    color: white;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000000cc;
    opacity: 0;
    cursor: pointer;
    transition: opacity 0.5s ease;
    padding: 20px;
}
.yt-accept .txt-container:hover, .yt-accept .txt-container:focus {
    opacity: 1;
}
/* YT-Embed ENDE */

/* Blöcke Text */
.blocks-txt .grid-default {
    --columns: 1;
    --columns-md: 2;
    --columns-xxl: 4;
    --gap-x: 30px;
    --gap-y: 30px;
}
.blocks-txt .item h4 {
    font-weight: var(--fw-semibold);
}
.blocks-txt .item {
    padding: 45px;
    display: flex;
    flex-direction: column;
    height: 100%;
    
}

.blocks-txt .item .special-link {
    width: fit-content;
    margin-top: auto;
}
.blocks-txt .item .txt-container {
    margin-bottom: var(--fs-heading-4);
}

/* Text 2 Spalten */
.txt-2-cols .row {
    padding-bottom: var(--fs-heading-2);
    margin-bottom: var(--fs-heading-2);
    position: relative;
}
.txt-2-cols .row::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 15px;
    right: 15px;
    border-bottom: 1px solid #707070;
}
.txt-2-cols .row:last-of-type {
    margin-bottom: 0;
}


/* Slider txt */
.slider-txt img {
    max-height: 630px;
    max-width: 100%;
}
.bg-black .slider-txt .txt-container * {
    color: var(--clr-base);
}
.slider-txt .splide__arrow {
    background: none;
    border: none;
    padding: 0;
    height: auto;
    width: auto;
}
.slider-txt .splide__arrows {
    /* width: fit-content;
    margin-left: auto; */
    height: 100%;
    position: relative;
    bottom: 50%;
    /* bottom: 315px; */
}
.slider-txt .outer_arrows {
    position: absolute;
    height: 100%;
    width: 100%;
    bottom: -50%;
}

.slider-txt .link-btn {
    width: fit-content;
}
.slider-txt .special-link span::before {
    padding: 10px;
}
.slider-txt .splide__arrows .special-link span {
    background: var(--clr-accent);
    border-radius: 50px;
}
.slider-txt .splide__arrows .special-link span:hover {
    background-color: var(--clr-green);
}
.slider-txt .splide__arrow:disabled span {
    background: transparent;
}

/* Bild */
.img-module img {
    width: 100%;
}


/* Team */
.team-modul img {
    width: 100%;
    aspect-ratio: 1/1;
}
.team-modul h4 {
    font-weight: var(--fw-semibold);
    margin-bottom: 5px;
}
.team-modul h3 {
    margin-bottom: 15px;
}
.team-modul .team-element {
    margin-bottom: var(--section-padding);
}
.team-modul .team-element:last-child {
    margin-bottom: 0;
}
.team-modul .position {
    margin: 0;
}
.team-modul h2 {
    margin-bottom: var(--margin-title);
}
.team-modul .heading-container {
    margin-bottom: var(--fs-heading-4);
}
.team-modul .txt-container p {
    margin-bottom: 0;
}
.team-modul .txt-container {
    display: none;
    margin-bottom: 0;
}
.team-modul .jobtitle-container {
    margin-bottom: var(--margin-h3);
}
.team-modul .txt-container.show {
    margin-bottom: 30px;
    display: block;
}
.team-modul .description-container {
    margin-bottom: var(--margin-h3);
}
.team-modul .toggle-txt {
    border: none;
    background: none;
    transition: transform 0.25s ease;
}
.team-modul .toggle-txt.active {
    transform: rotate(180deg);
}
.team-modul .special-link {
    margin-top: 0;
}
/* Video neben Text*/
.vid-txt-grid .txt-container {
    padding-top: 50px;

}
.vid-txt-grid .special-link {
    margin-top: 30px;
}
.vid-txt-grid .txt-container .icon {
    margin-top: 0;
    margin-bottom: 25px;
}
.vid-txt-grid .txt-container.grid-l {
    padding-right: 50px;
}
.vid-txt-grid .vid-container {
    margin-top: -80px;
}
.vid-txt-grid .link-btn {
    width: fit-content;
    height: fit-content;
}
.vid-txt-grid {
    display: grid;
    grid-template-columns: minmax(15px, 1fr) repeat(6, minmax(15px, 200px)) minmax(15px, 1fr);
    grid-auto-flow: column;

}
.vid-txt-grid .vid-container video, .vid-txt-grid .vid-container img {
    width: 100%;
}
.grid-l {
    grid-column: var(--grid-start) / var(--grid-span);
}
.grid-r {
    grid-column: var(--grid-span) / var(--grid-start);
}
.col-st-1 {
    --grid-start: 1;
}
.col-st-2 {
    --grid-start: 2;
}
.col-st-8 {
    --grid-start: 8;
}
.col-st-9 {
    --grid-start: 9;
}
.col-sp-2 {
    --grid-span: span 2;
}
.col-sp-3 {
    --grid-span: span 3;
}
.col-sp-4 {
    --grid-span: span 4;
}
.col-sp-5 {
    --grid-span: span 5;
}
/* Video neben Text ENDE */

/* Kontaktformular */
.yform {
    margin-bottom: var(--margin-grid-content);
    font-size: 20px;
    font-weight: 500;
}
#contact_form .form > .flex {
    color: var(--color);
}
#contact_form .grid-default{
    --gap-x: 20px;
    --gap-y: 5px;
}
#contact_form .form-group{
    --col-span: 12;
    --col-span-sm: 6;
}
#contact_form .form-group label {
    position: absolute;
    /* font-size: 16px; */
    padding: 9px;
    padding-left: 25px;
    color: var(--clr-green);
    opacity: 0.8;
    transition: all 0.5s ease;
}
#contact_form .form-group label.active {
    opacity: 0;
    padding-left: 50px;
}
#contact_form .form-group input, #contact_form textarea{
    border-radius: 25px;
    padding: 8px;
    padding-left: 20px;
    resize: none;
    min-height: 50px;
    color: var(--color);
    font-size: 20px;
}
#contact_form .send-container .link-btn {
    margin-top: 0px;
}

#contact_form .grid-default > #yform-formular-message {
    --col-span: 12;
    --col-span-sm: 12;
}
#contact_form .send-container {
    --col-span: 12;
    margin-top: 20px;
    gap: 20px;
}
#contact_form .send-container button {
    max-height: fit-content;
    flex-shrink: 0;
}
#contact_form .send-container span {
    font-size: 14px;
}
#contact_form .send-container span:hover {
    color: var(--color);
}
#contact_form .send-container span a{
    width: fit-content;
    font-size: 14px;
}
#contact_form .btn-primary {
    display: none;
}
#contact_form h3 {
    margin-bottom: 30px;
}
.contact-modul .txt-container > .flex-wrap {
    gap: 20px;
}
.contact-modul .txt-container > .flex-wrap p{
    min-width: 200px;
}
.contact-modul .txt-container {
    padding: 0px var(--content-padding) !important;
    order: 0;
}
.contact-modul .txt-container > .link-btn {
    margin-top: var(--fs-heading-2);
}
.contact-modul img {
    padding-left: clamp(0rem, -5.208rem + 8.333vw, 3.125rem);
    object-position: top;
}


@media (min-width: 992px) { 
    .yform {
        padding-top: calc(var(--margin-grid-content));
    }
}

/*MEDIA QUERIES*/

@media (max-width: 1399px) { 

}
@media (max-width: 1199px) {
    /* Header wird kleiner */
    .header {
        padding: 15px 0;
    }
    .header .nav-links {
        display: none;
    }

    .header .logo img, nav .logo img {
        /* height: fit-content; */
        width: 130px;
    }
    .header .linked-in {
        display: none;
    }
    .header .nav-link {
        display: none;
    }
    .header .burger {
        display: flex;
    }
}

@media (max-width: 991px) {
    footer .footer-img {
        transform: translate(25%, 50%);
    }

    main {
        margin-top: 90px;
    }
    footer .social-icons {
        margin-top: 60px;
        flex-direction: column;
    }
    .social-icons p {
        margin-left: 0;
    }
    .scroll-3 > * {
        min-width: 300px;
    }
    .no-scroll-x {
        overflow-x: scroll;
        overflow-y: clip;
        scrollbar-color: var(--clr-accent) var(--clr-yellow);
        scrollbar-width: thin;
        justify-content: start;
        scroll-behavior: smooth;
    }
    .no-scroll-x > * {
        flex-shrink: 0;
        flex-grow: 1;
    }
/*     .fade-img-txt {
        width: 700px;
    } */
    .txt-container h1 {
        max-width: 700px;
    }

    .img-txt-overlay, .img-txt-overlay img, .img-txt-overlay video {
        height: 680px;
    }

    .txt-filter-container .row > :nth-child(2) .txt-filter {
        display: none !important;
    }
    .filter-txt + .txt-filter {
        margin-bottom: 30px;
    }
    .vid-txt-grid .vid-container.grid-r {
        grid-column: 4 / -1;
    }
    .vid-txt-grid .vid-container.grid-l {
        grid-column: 1 / -4;
    }
    .vid-txt-grid .txt-container {
        grid-column: 2 / -2;
    }
    .vid-txt-grid .txt-container {
        --content_padding: clamp(0.9375rem, -5.4861rem + 20.5556vi, 12.5rem);;
        --content_width: 1200px;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
        max-width: calc(var(--content_width) + var(--content_padding) * 2);
        padding-left: var(--content_padding);
        padding-right: var(--content_padding); 
    }
    /*
    .vid-txt-grid .txt-container.grid-l {
        padding-right: 0;
    }
    .vid-txt-grid .txt-container.grid-r {
        padding-left: 0;
    }
    */
    .vid-txt-modul .txt-container {
        --content_padding: var(--content-padding-small);
        --content_width: var(--small-width);
        width: 100%;
        margin-right: auto;
        margin-left: auto;
        max-width: calc(var(--content_width) + var(--content_padding) * 2);
        padding-left: var(--content_padding);
        padding-right: var(--content_padding);
    }
    footer .footer-img {
        transform: translate(0, 50%);
        width: 200%;
    }
    footer .underline-hov {
        display: block;
    }
    footer .connect-link::after {
        bottom: -15px;
    }
    footer .underline-hov .grid-default {
        width: 70%;
    }
    footer .underline-hov {
        margin-top: 20px;
    }
    footer .row > div {
        margin-bottom: 15px;
    }
    footer a, footer h2 a {
        margin-bottom: 20px;
    }
    footer .bottom-container {
        margin-top: 20px;
    }
    footer .socialMedia-container {
        margin-top: var(--fs-heading-3);
    }
}

@media (min-width: 992px) { /* lg */
    .filter-txt + .txt-filter {
        display: none !important;
    }
    /*
    .accordion-modul .txt-container, .accordion-modul .accordion {
        padding-left: calc(var(--fs-heading-4)*2);
    }
    */
    .accordion-modul .img-container {
        margin-bottom: 0;
    }
    .vid-txt-modul .txt-container {
        padding-top: calc(var(--margin-grid-content));
    }
    .vid-txt-modul .txt-container.right {
        --content_padding: var(--content-padding-small);
        --content_width: var(--small-width);
        width: 100%;
        margin-right: auto;
        margin-left: 0;
        max-width: 800px;
        padding-left: calc(var(--fs-heading-1));
        padding-right: var(--content-padding);


    }
    .vid-txt-modul .txt-container {
        --content_padding: var(--content-padding);
        --content_width: var(--small-width);
        width: 100%;
        margin-left: auto;
        margin-right: 0;
        max-width: 800px;
        padding-right: clamp(1.563rem, -5.313rem + 11vw, 5rem); /*25 -> 80 (1000->1500) */
        padding-left: var(--content-padding);
    }
    .vid-txt-modul {
        padding: 0;
    }
    .vid-txt-modul .content-width--small {
        --content_padding: 0px;
        --content_width: 3000px;
    }
    .vid-txt-modul .vid-container.right {
        order: 3;
        margin-left: 0;
    }
    .vid-txt-modul .vid-container.left {
        order: 1;
    }


    /*
    .accordion-modul.jobs .txt-container, .accordion-modul.jobs .accordion {
        padding-left: 0;
    }
    */
}

@media (min-width: 1200px) { /* xl */
    .title-container .heading-container {
        flex: 70%;
        
    }
    .title-container .txt-container {
        flex: 30%;
        padding-left: 20px;
        margin-left: auto;
        
    }
    .vid-fullscreen .content-width--small, .img-fullscreen .content-width--small {
        
        bottom: 15%; 
    }
    .accordion-modul.jobs .panel-txt:first-child {
        margin-left: 65px;
    }
    nav.visible {
        transition: right 1.25s ease;
        right: 100%;
    }
}
@media (min-width: 768px) { /* md */
    .img-txt.content-width--small {
        padding: 0;
    }
    .img-txt .col-md-6 {
        padding-right: 0;
        padding-left: 0;
    }
    .img-txt .right .txt-container {
        padding-right: var(--content-padding-small);
        padding-left: calc(var(--fs-heading-2) * 2);
    }
    .img-txt .left .txt-container {
        padding-left: var(--content-padding-small);
        padding-right: calc(var(--fs-heading-2) * 2);
    }
    .img-txt .txt-container {
        padding-top: calc(var(--margin-title) * 2);
    }

    .accordion-modul .img-container {
        padding-bottom: 0;
    }
    .accordion-modul .content-container {
        margin-top: 0px;
        margin-right: calc(var(--margin-accordion));

    }
    .accordion-modul.jobs .content-container {
        margin-top: 0px;
        margin-right: 0px;

    }
    .three-columns-anchor-modul .content-container {
        margin-bottom: 0;
    }
    .three-columns-anchor-modul .icon-container {
        padding-top: 0;
    }
    .three-columns-anchor-modul .content-container {
        padding: 45px;
    }

}
@media (max-width: 767px) { /* md */
    :root {
        --padding-section-top: 100px;
        --padding-section-bottom: 100px;
    }
    .team-modul img {
        margin-bottom: 30px;
    }
    nav .links {
        align-items: flex-start;
    }
    nav .links .nav-link{
        margin-bottom: 20px;
    }
    section:first-child {
        --padding-section-top: 150px;
    }
    .img-txt-overlay .txt-container {
        width: calc(100% - 30px);
    }
    .fade-img-txt {
        margin: 0 -15px;
        width: 100vw;
    }
    .fade-txt {
        width: 100%;
    }
    .news-container img {
        height: 350px;
    }
    /* .img-txt, .vid-txt-modul {
        margin-top: 50px;
    } */
    .vid-txt-modul .vid-container {
        margin-top: 0;
    }
    .right {
        order: 0;
    }
    .masonry-item {
        width: 50%;
    }
    .buttons {
        margin-left: auto;
        margin-right: auto;
    }
    .txt-scroll {
        padding: 5px;
    }
    .scroll-3 > * {
        min-width: 215px;
    }
    .bg-black .img-txt-overlay .normal-width {
        --color: 0, 0, 61;
    }

    .img-txt-overlay .normal-width {
        --color: 255, 255, 255;
        background: linear-gradient(to top, rgba(var(--color), 0.7), rgba(var(--color), 0.1));
    }
    .img-txt-2 .imgs {
        display: none;
    }
    .img-txt-2 .txts .img-l, .img-txt-2 .txts .img-r {
        display: block;
    }
    .img-txt-2 .txts .txt-container img {
        margin: 0;
    }
    .img-txt-2 .txts {
        flex-wrap: wrap;
        margin-top: 0;
    }
    .img-txt-2 .txts h2 {
        margin-top: 40px;
    }
    .img-txt-2 .txts .txt-container:first-child {
        margin-bottom: 100px;
    }
    .img-txt-2 .txts > div:first-child, .img-txt-2 .txts > div:last-child {
        width: 100%;
        padding: 0;
    }
    .blocks-txt .item {
        padding: 30px;
    }
}
@media (max-width: 576px) { /* sm */
    footer .bottom-container {
        display: block;
    }
    footer .bottom-container .linked-in {
        margin-bottom: 15px;
    }
    .vid-fullscreen .txt-container {
        max-width: 400px;
    }

    .img-txt-overlay .txt-container {
        padding: 20px;
    }
    .img-link-scroll {
        margin-bottom: 20px;
    }
    .fade-img-txt .txt-container {
        display: none;
    }
    .masonry-item {
        width: 100%;
    }
    .toggle-filter-button {
        display: block;
    }
    .masonry-filter button {
        display: block;
        margin: 0;
        margin-bottom: 10px;
        padding: 0;
        margin-left: auto;
    }
    .masonry-filter {
        margin: 0;
        padding-bottom: 20px;
        display: none;
    }
    .contact .txt-container {
        width: 100%;
        right: 0;
        padding: 0 15px;
    }
}




/* Test Modul */
    
.row {
    margin: 0;
}
.vid-txt-test .col-md-6, .vid-txt-test .col-sm-12 {
    padding: 0;
}
.vid-txt-test .txt-container {
    padding-top: 100px;
    order: 2;
}
.vid-txt-test .vid-container {
    padding: 0;
}
.vid-txt-test .vid-container.right {
    margin-left: 25%;
}
.vid-txt-test .special-link {
    margin-top: 30px;
}
.vid-txt-test .txt-container .icon {
    margin-top: 0;
    margin-bottom: 25px;
}
.vid-txt-test .vid-container video, .vid-txt-test .vid-container img {
    width: 100%;
}
.vid-txt-test .vid-container img {
    aspect-ratio: 9/8;
}
.vid-txt-test .txt-container .link-btn {
    height: fit-content;
    width: fit-content;
}
@media (min-width: 992px) { /* lg */
    .vid-txt-test .txt-container {
        padding-top: calc(var(--margin-grid-content));
    }
    .vid-txt-test .txt-container.right {
        --content_padding: var(--content-padding-small);
        --content_width: var(--small-width);
        width: 100%;
        margin-right: auto;
        margin-left: 0;
        max-width: 800px;
        padding-left: calc(var(--fs-heading-1));
        padding-right: 20px;


    }
    .vid-txt-test .txt-container {
        --content_padding: var(--content-padding);
        --content_width: var(--small-width);
        width: 100%;
        margin-left: auto;
        margin-right: 0;
        max-width: 800px;
        padding-right: calc(var(--fs-heading-1));
        padding-left: var(--content-padding);
    }
    .vid-txt-test {
        padding: 0;
    }
    .vid-txt-test .content-width--small {
        --content_padding: 0px;
        --content_width: 3000px;
    }
    .vid-txt-test .vid-container.right {
        order: 3;
        margin-left: 0;
    }
    .vid-txt-test .vid-container.left {
        order: 1;
    }
}
@media (max-width: 991px) {
    .vid-txt-test .txt-container {
        --content_padding: var(--content-padding-small);
        --content_width: var(--small-width);
        width: 100%;
        margin-right: auto;
        margin-left: auto;
        max-width: calc(var(--content_width) + var(--content_padding) * 2);
        padding-left: var(--content_padding);
        padding-right: var(--content_padding);
    }

}