:root {
--base: #e9eef5;
--c-yellow: rgb(244, 255, 151);
--c-blue:   rgb(166, 205, 255);
--c-violet: rgb(232, 190, 255);
--blob-size: 160vmin;
--blur-base: 140px;
--blur-center: 220px;
--opacity: 0.9;
--text: #373f52;
--px: 0;
--py: 0;
--sc: 1;
}
section.m30_header_home.loading {
overflow: hidden;
}
section.m30_header_home {
position: relative;
height: 100dvh;
min-height: 900px;
overflow: hidden;
isolation: isolate;
}
section.m30_header_home .mM_container {
height: 100%;
display: flex;
align-items: center;
position: relative;
z-index: 2;
isolation: isolate;
}
section.m30_header_home .m30_header_home_social_container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 20px;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}
section.m30_header_home .m30_home_header_social_item {
display: flex;
}
section.m30_header_home .m30_home_header_social_icon {
width: auto;
height: 22px;
fill: #374052;
transition: fill .4s;
}
section.m30_header_home .m30_home_header_social_item:hover .m30_home_header_social_icon {
fill: #0f55a1;
}
section.m30_header_home .m30_header_home_main {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
section.m30_header_home .m30_header_home_title {
flex: 0 0 auto;
max-width: 100%;
width: 55%;
position: relative;
}
section.m30_header_home .m30_header_home_title .keyword {
position: relative;
display: inline-flex;
isolation: isolate;
z-index: 10;
}
section.m30_header_home .m30_header_home_title .keyword .k-char {
display: inline-block;
transition: transform 0.05s ease-out;
will-change: transform;
}
section.m30_header_home .keyword-glow-blob {
position: absolute;
width: 200px;
height: 200px;
background: radial-gradient(
circle,
rgba(177, 122, 255, 0.5) 0%,
rgba(177, 122, 255, 0.35) 60%,
rgba(177, 122, 255, 0.1) 100%
);
pointer-events: none;
border-radius: 50%;
filter: blur(45px);
opacity: 0;
transition: opacity 0.2s ease-out;
z-index: 0;
top: 0;
left: 0;
}
section.m30_header_home .m30_header_home_img_outer_container {
flex: 0 0 auto;
max-width: 100%;
width: 25%;
}
section.m30_header_home .m30_header_home_scroll_item_container {
position: absolute;
right: 0;
bottom: 65px;
transform: rotate(90deg) translateY(50%);
transform-origin: right center;
cursor: pointer;
overflow: hidden;
}
section.m30_header_home .m30_header_home_scroll_item {
display: inline-block;
padding-right: 75px;
position: relative;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
transition: transform .4s;
}
section.m30_header_home .m30_header_home_scroll_item:after {
content: '';
width: 65px;
height: 2px;
background: #0056a1;
position: absolute;
right: 0;
top: 9px;
}
section.m30_header_home .m30_header_home_scroll_item_container:hover .m30_header_home_scroll_item {
transform: translateX(15px);
}
section.m30_header_home .m30_untertitel_container {
margin-bottom: 55px;
}
section.m30_header_home .m30_untertitel {
font-size: 1.5625rem;
}
section.m30_header_home .m30_titel_container {
margin-left: -9px;
}
section.m30_header_home .m30_titel {
font-size: 9.1875rem;
text-transform: uppercase;
line-height: .9;
}
section.m30_header_home.loading .m30_header_home_img_container {
opacity: 0;
}
section.m30_header_home .m30_header_home_img_container {
height: calc(100% + 165px);
opacity: 1;
transition: opacity 1s ease;
}
section.m30_header_home .m30_header_home_img {
object-fit: cover;
object-position: top 0 left 35%;
border-radius: 30px;
height: 100%;
}
section.m30_header_home video.m30_header_home_img {
object-position: center;
}
section.m30_header_home .m30_intro_wrapper {
position: absolute;
inset: 0;
z-index: 99999999;
display: flex;
justify-content: center;
align-items: center;
pointer-events: none;
}
section.m30_header_home .m30_intro_wrapper_inner {
position: absolute;
top: 0;
right: 0;
width: 100vw;
height: 100dvh;
transition: transform 1s ease, width 1s ease, height 1s ease, opacity .6s ease, right 1s ease, top 1s ease;
transform-origin: top left;
overflow: hidden;
will-change: transform, bottom, width, height, right, top, left;
}
section.m30_header_home .m30_header_intro_image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top 0 left 35%;
transition: transform 1s ease;
}
section.m30_header_home .m30_intro_wrapper_inner.shrink {
width: 70vw;
height: 70dvh;
border-radius: 30px;
transform: translateY(20%);
right: var(--right);
}
section.m30_header_home .m30_intro_wrapper_inner.to_final {
top: var(--top);
width: var(--width);
height: var(--height);
border-radius: 30px;
transform: translateY(0);
}
section.m30_header_home .m30_intro_wrapper_inner.shrink .m30_header_intro_image {
border-radius: 30px;
}
section.m30_header_home .m30_intro_wrapper_inner.to_final .m30_header_intro_image {
border-radius: 30px;
transform: none;
}
section.m30_header_home .blob {
position: absolute;
top: 50%;
left: 50%;
width: var(--blob-size);
height: var(--blob-size); transform: translate3d(calc(-50% + var(--px, 0px)), calc(-50% + var(--py, 0px)), 0) scale(var(--sc, 1));
pointer-events: none;
opacity: var(--opacity);
filter: blur(var(--blur-base)) contrast(1.2);
background: radial-gradient(circle at 50% 50%, var(--color) 0%, rgba(255,255,255,0) 70%); will-change: transform, filter;
transition: filter 0.5s ease;
backface-visibility: hidden;
isolation: isolate;
}
section.m30_header_home .blob.centered {
filter: blur(var(--blur-center)) contrast(1.2);
} section.m30_header_home .blob--yellow {
--color: var(--c-yellow);
}
section.m30_header_home .blob--blue {
--color: var(--c-blue);
}
section.m30_header_home .blob--violet-left {
--color: var(--c-violet);
}
section.m30_header_home .blob--violet-right {
--color: var(--c-violet);
}
@media all and (max-width: 2199px) {
section.m30_header_home .m30_header_home_title {
width: 74%;
}
}
@media all and (max-width: 1799px) {
section.m30_header_home .m30_titel {
font-size: 7.888rem;
}
}
@media all and (max-width: 1599px) {
section.m30_header_home .m30_titel {
font-size: 6.588rem;
}
section.m30_header_home .m30_header_home_img_outer_container {
width: 32%;
}
section.m30_header_home .m30_header_home_title {
width: 68%;
}
}
@media all and (max-width: 1399px) {
section.m30_header_home .m30_titel {
font-size: 5.488rem;
}
section.m30_header_home .m30_untertitel {
font-size: 1.363rem;
}
}
@media all and (max-width: 1199px) {
section.m30_header_home .m30_titel {
font-size: 4.888rem;
}
section.m30_header_home .m30_untertitel {
font-size: 1.23rem;
}
section.m30_header_home .m30_header_home_title {
width: 63%;
}
section.m30_header_home .m30_header_home_social_container {
left: 5px;
}
section.m30_header_home .m30_header_home_scroll_item_container {
right: 5px;
}
}
@media all and (max-width: 991px) {
section.m30_header_home {
height: auto;
}
section.m30_header_home .mM_container {
height: auto;
}
section.m30_header_home {
padding-top: 120px;
}
section.m30_header_home .m30_header_home_img_outer_container {
width: 100%;
}
section.m30_header_home .m30_header_home_title {
width: 96%;
}
section.m30_header_home .m30_header_home_img_outer_container {
display: flex;
}
section.m30_header_home .m30_header_home_img_container {
height: 100%;
}
section.m30_header_home .m30_intro_wrapper_inner {
top: auto;
bottom: 0;
}
section.m30_header_home .m30_intro_wrapper_inner.shrink {
top: auto;
bottom: 75px;
}
section.m30_header_home .m30_intro_wrapper_inner.to_final {
top: auto;
bottom: 75px;
}
section.m30_header_home .m30_header_home_main {
height: 100%;
}
section.m30_header_home .m30_titel_container {
margin-left: -3px;
max-width: 96%;
}
section.m30_header_home .m30_header_home_img_container {
height: 490px;
margin-top: auto;
}
section.m30_header_home .m30_header_home_social_container {
display: none;
}
section.m30_header_home .m30_header_home_scroll_item_container {
bottom: 530px;
z-index: 5;
right: 17%;
}
section.m30_header_home .m30_header_home_title {
margin-bottom: 30px;
}
section.m30_header_home .m30_titel {
font-size: 5.588rem;
}
}
@media all and (max-width: 767px) {
section.m30_header_home .m30_titel_container {
max-width: 100%;
}
section.m30_header_home .m30_titel {
font-size: 4.888rem;
}
section.m30_header_home .m30_header_home_scroll_item_container {
display: none;
}
section.m30_header_home .m30_intro_wrapper {
display: none;
}
}
@media all and (max-width: 575px) {
section.m30_header_home {
padding-bottom: 40px;
}
section.m30_header_home .m30_header_home_img_container {
height: 690px;
}
section.m30_header_home .m30_header_home_scroll_item_container {
right: 40px;
bottom: 690px
}
section.m30_header_home .m30_intro_wrapper_inner {
right: 0;
}
section.m30_header_home .m30_intro_wrapper_inner {
height: 100%;
}
section.m30_header_home .m30_intro_wrapper_inner.shrink {
right: 20px;
width: calc(100% - 40px);
bottom: 40px;
height: 70%;
}
section.m30_header_home .m30_intro_wrapper_inner.to_final {
bottom: 40px;
}
section.m30_header_home .m30_untertitel {
display: flex;
flex-direction: column;
font-size: 1.125rem;
line-height: 1.3;
}
section.m30_header_home .m30_untertitel_container {
margin-bottom: 27px;
}
section.m30_header_home .m30_titel_container {
max-width: 94%;
}
section.m30_header_home .m30_titel {
font-size: 4.0625rem;
}
section.m30_header_home .m30_header_home_title {
width: 97%;
}
}
@media all and (max-width: 450px) {
section.m30_header_home .m30_titel_container {
max-width: 100%;
}
section.m30_header_home .m30_header_home_title {
width: 100%;
}
section.m30_header_home .m30_titel {
font-size: 3.888rem;
}
}
@media all and (max-width: 400px) {
section.m30_header_home .m30_titel {
font-size: 3.263rem;
}
section.m30_header_home .m30_header_home_img_container {
height: 590px;
}
section.m30_header_home .m30_header_home_scroll_item_container {
bottom: 590px;
}
}
@media all and (max-width: 350px) {
section.m30_header_home .m30_titel {
font-size: 2.463rem;
}
section.m30_header_home .m30_header_home_img_container {
height: 530px;
}
section.m30_header_home .m30_header_home_scroll_item_container {
bottom: 530px;
}
}