.tm-slider{
position: relative;
overflow: visible;
isolation: isolate; --center: 70%;
--side: calc((100% - var(--center)) / 2);
--nav-gap: 44px;
--divider-h: 70px;
--content-gutter: 40px;
--mask-bg: #ffffff; --dot-size: 6px;
--dot-gap: 16px;
--dot-color: rgba(0,0,0,.2);
--dot-color-active: #333045;
} .tm-slider:before,
.tm-slider:after{
content:"";
position:absolute;
top: 0;
bottom: 0;
width: calc(var(--side) + var(--content-gutter));
background: var(--mask-bg);
z-index: 10;
pointer-events: none;
}
.tm-slider:before{ left: 0; }
.tm-slider:after{ right: 0; } .tm-slider .tm-clip{
position: relative;
z-index: 5;
overflow: visible !important;
} .tm-slider .swiper-slide{
padding-left: var(--content-gutter) !important;
padding-right: var(--content-gutter) !important;
box-sizing: border-box !important;
}
.tm-slider .swiper-slide > *{
padding-left: var(--content-gutter) !important;
padding-right: var(--content-gutter) !important;
box-sizing: border-box !important;
}
.tm-slider .e-loop-item,
.tm-slider .e-loop-item > .e-con,
.tm-slider .e-loop-item > .elementor{
padding-left: var(--content-gutter) !important;
padding-right: var(--content-gutter) !important;
box-sizing: border-box !important;
} .tm-slider .elementor-swiper-button-prev,
.tm-slider .elementor-swiper-button-next{
position: absolute !important;
top: 50% !important;
transform: translateY(-50%) !important;
height: 80px;
width: calc(var(--side) + var(--content-gutter)) !important;
display: flex !important;
align-items: center !important;
z-index: 50 !important;
background: none !important;
padding: 0 !important;
border: 0 !important;
font-size: 0 !important;
line-height: 0 !important;
background-image: none !important;
-webkit-mask-image: none !important;
mask-image: none !important;
}
.tm-slider .elementor-swiper-button-prev > *,
.tm-slider .elementor-swiper-button-next > *{
display: none !important;
}
.tm-slider .elementor-swiper-button-prev{
left: 0 !important;
justify-content: flex-end !important;
padding-right: calc(var(--nav-gap) + var(--content-gutter)) !important;
}
.tm-slider .elementor-swiper-button-next{
right: 0 !important;
justify-content: flex-start !important;
padding-left: calc(var(--nav-gap) + var(--content-gutter)) !important;
} .tm-slider .elementor-swiper-button-prev:after{
content: "ZURÜCK";
letter-spacing: 0.08em;
font-weight: 500;
font-size: 13px;
line-height: 1;
font-family: Roboto;
color: #333045;
}
.tm-slider .elementor-swiper-button-next:after{
content: "WEITER";
letter-spacing: 0.08em;
font-weight: 500;
font-size: 13px;
line-height: 1;
font-family: Roboto;
color: #333045;
} .tm-slider .elementor-swiper-button-prev:before{
content:"";
position:absolute;
right: var(--content-gutter);
top: 50%;
transform: translateY(-50%);
width: 1px;
height: var(--divider-h);
background: rgba(0,0,0,.12);
}
.tm-slider .elementor-swiper-button-next:before{
content:"";
position:absolute;
left: var(--content-gutter);
top: 50%;
transform: translateY(-50%);
width: 1px;
height: var(--divider-h);
background: rgba(0,0,0,.12);
}
.tm-slider .elementor-swiper-button-prev:hover:after,
.tm-slider .elementor-swiper-button-next:hover:after{
opacity: .75;
} .tm-slider .swiper-pagination{
display: none !important;
} @media (max-width: 1024px){
.tm-slider{
--center: 100%;
--side: 0%;
--content-gutter: 0px;
} .tm-slider:before,
.tm-slider:after{
display: none !important;
} .tm-slider .elementor-swiper-button-prev,
.tm-slider .elementor-swiper-button-next{
display: none !important;
} .tm-slider .swiper-slide,
.tm-slider .swiper-slide > *,
.tm-slider .e-loop-item,
.tm-slider .e-loop-item > .e-con,
.tm-slider .e-loop-item > .elementor{
padding-left: 0 !important;
padding-right: 0 !important;
} .tm-slider .swiper-pagination{
display: flex !important;
justify-content: center;
align-items: center;
gap: var(--dot-gap);
position: relative !important;
bottom: auto !important;
margin-top: 24px;
width: 100% !important;
} .tm-slider .swiper-pagination-bullet{
width: var(--dot-size) !important;
height: var(--dot-size) !important;
background: var(--dot-color) !important;
opacity: 1 !important;
margin: 0 !important;
border-radius: 50% !important;
transition: background 0.3s ease;
} .tm-slider .swiper-pagination-bullet-active{
background: var(--dot-color-active) !important;
}
} .dotted-circle{
position: relative !important;
display: inline-block !important;
}
.dotted-circle img{
border-radius: 50% !important;
display: block !important;
}
.dotted-circle:before{
content: "" !important;
position: absolute !important;
top: -12px !important;
left: -12px !important;
right: -12px !important;
bottom: -12px !important;
border: 2px dotted rgba(0,0,0,.12) !important;
border-radius: 50% !important;
pointer-events: none !important;
} .breakout-right {
width: 50vw;
max-width: 50vw;
margin-right: calc(50% - 50vw);
} @media (min-width: 1025px) {
.breakout-right {
width: 50vw;
max-width: 50vw;
margin-right: calc(50% - 50vw);
}
} @media (max-width: 1024px) {
.breakout-right {
width: 100% !important;
max-width: 100% !important;
margin-right: 0 !important;
margin-left: 0 !important;
} .breakout-right img {
width: 100%;
height: auto;
display: block;
}
} .breakout-left{
width: 50vw;
max-width: 50vw;
margin-left: calc(50% - 50vw);
} @media (min-width: 1025px){
.breakout-left{
width: 50vw;
max-width: 50vw;
margin-left: calc(50% - 50vw);
margin-right: 0;
}
} @media (max-width: 1024px){
.breakout-left{
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
} .breakout-left img{
width: 100%;
height: auto;
display: block;
}
} .elementor-flip-box__front:after{
content: "" !important;
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
height: 60% !important;
background: linear-gradient(to top, rgba(0,0,0,.7) 0%, rgba(0,0,0,0) 100%) !important;
pointer-events: none !important;
z-index: 1 !important;
} .elementor-flip-box__front .elementor-flip-box__layer__overlay{
position: relative !important;
z-index: 2 !important;
}