.m30_hero_sub { position: relative; overflow: hidden; }
.m30_inner { position: relative; z-index: 2; width: 100%; padding: 56px 0 64px; } .m30_content { max-width: 746px; } .m30_hero_sub .m30_titel {
font-size: 55px;
line-height: 60px;
font-weight: 600;
white-space: pre-line;
margin: 0 0 22px;
}
.m30_text { font-size: 1.0625rem; margin: 0; max-width: 640px; } .m30_hero_sub--image {
height: 75dvh;
min-height: 795px; display: flex;
align-items: flex-start; background: linear-gradient(180deg, var(--strobl-blue-deep) 0, var(--strobl-blue-deep) 50%, transparent 50%);
}
.m30_hero_sub--image .m30_card {
position: absolute;
inset: 0;
overflow: hidden;
z-index: 0;
} .m30_hero_sub--image .m30_card {
top: var(--strobl-topline-h, 44px);
border-radius: var(--strobl-radius);
} @media all and (min-width: 992px) { .m30_hero_sub--image:has(+ section.m23_jump_marker_navigation) {
background: linear-gradient(180deg, var(--strobl-blue-deep) 0, var(--strobl-blue-deep) 50%, var(--strobl-blue) 50%, var(--strobl-blue) 100%);
}
}
.m30_hero_sub--image .m30_slides,
.m30_hero_sub--image .m30_slide { position: absolute; inset: 0; }
.m30_hero_sub--image .m30_slide img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 75% top;
}
@media all and (max-width: 1199px) {
.m30_hero_sub--image .m30_slide img {
object-position: 85% top;
}
}
@media all and (max-width: 991px) {
.m30_hero_sub--image .m30_slide img {
object-position: 85% top;
}
}
.m30_hero_sub--image .m30_slides .slick-list,
.m30_hero_sub--image .m30_slides .slick-track { height: 100%; } .m30_hero_sub--image .m30_overlay {
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 45%),
linear-gradient(90deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.92) 22%, rgba(255,255,255,.72) 55%, rgba(255,255,255,.6) 80%, rgba(255,255,255,.56) 100%);
pointer-events: none;
}
@media all and (max-width: 991px) {
.m30_hero_sub--image .m30_overlay {
background:
linear-gradient(0deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 45%),
linear-gradient(0deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.92) 22%, rgba(255,255,255,.72) 55%, rgba(255,255,255,.6) 80%, rgba(255,255,255,.56) 100%);
}
} .m30_hero_sub--image .m30_inner { padding: calc(var(--strobl-topline-h, 44px) + 272px) 0 60px; }
.m30_hero_sub .slick-dots {
position: absolute;
left: 0;
bottom: 34px;
display: flex;
gap: 10px;
z-index: 3;
padding: 0;
margin: 0;
list-style: none;
}
.m30_hero_sub .slick-dots li button {
font-size: 0;
width: 12px;
height: 12px;
border-radius: 50%;
border: 0;
background: rgba(18, 38, 91, .3);
cursor: pointer;
padding: 0;
}
.m30_hero_sub .slick-dots li.slick-active button { background: var(--strobl-blue); }
@media all and (max-width: 991px) {  .m30_hero_sub--image { height: auto; min-height: 695px; }
.m30_hero_sub--image .m30_inner { padding: calc(var(--strobl-header-h, 213px) + 28px) 0 48px; padding-top: 400px; }
body[data-title="Leistungen"] .m30_hero_sub--image .m30_inner { padding: calc(var(--strobl-header-h, 213px) + 28px) 0 75px; padding-top: 400px; }
.m30_hero_sub .m30_titel { font-size: 40px; line-height: 46px; }
}
@media all and (max-width: 575px) { .m30_hero_sub--image .m30_inner { padding-top: 350px;padding-left: 20px; padding-right: 20px; }
body[data-title="Leistungen"] .m30_hero_sub--image .m30_inner { padding-top: 350px;padding-left: 20px; padding-right: 20px; padding-bottom: 75px; }
}
body[data-title="Kontakt & Service"] .m30_hero_sub--image .m30_slide img {
object-position: 75% 30%;
}
@media (max-width: 1199px) {
body[data-title="Kontakt & Service"] .m30_hero_sub--image .m30_slide img {
object-position: 0% 30%;
}
}
@media (max-width: 991px) {
body[data-title="Kontakt & Service"] .m30_hero_sub--image .m30_slide img {
object-position: 50% top;
}
}
@media all and (max-width: 991px) {
body[data-title="Über uns"] .m30_hero_sub--image { display: block; height: auto; min-height: 0; background: none; padding-top: var(--strobl-header-h, 101px); }
body[data-title="Über uns"] .m30_hero_sub--image .m30_card { position: relative; inset: auto; top: 0; width: 100%; border-radius: 0; }
body[data-title="Über uns"] .m30_hero_sub--image .m30_slides,
body[data-title="Über uns"] .m30_hero_sub--image .m30_slide { position: static; }
body[data-title="Über uns"] .m30_hero_sub--image .m30_slide img { width: 100%; height: auto; object-fit: initial; display: block; }
body[data-title="Über uns"] .m30_hero_sub--image .m30_inner { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 40px 32px; }
body[data-title="Über uns"] .m30_hero_sub--image .m30_card { margin-bottom: -48px; }
body[data-title="Über uns"] .m30_hero_sub--image .m30_inner { position: relative; padding: 0 20px 48px; }
}
@media all and (max-width: 767px) {
body[data-title="Über uns"] .m30_hero_sub--image .m30_card { margin-bottom: -48px; }
body[data-title="Über uns"] .m30_hero_sub--image .m30_inner { position: relative; padding: 0 20px 48px; }
} @media all and (max-width: 991px) {
body[data-title="Über uns"] .m30_hero_sub--image .m30_overlay { background: linear-gradient(0deg, rgba(255,255,255,1.0) 0%, rgba(255,255,255,.7) 25%, rgba(255,255,255,.25) 41%, rgba(255,255,255,.1) 100%); }
body[data-title="Wasser"] .m30_hero_sub--image .m30_slide img { object-position: 65% top; }
body[data-title="Virtuelles Büro"] .m30_hero_sub--image .m30_slide img { object-position: 55% top; }
}
@media all and (max-width: 767px) {
body[data-title="Über uns"] .m30_hero_sub--image .m30_overlay { background: linear-gradient(0deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 45%); }
} @media all and (min-width: 1200px) {
body[data-title="Über uns"] .m30_hero_sub--image { height: auto; min-height: 0; display: block; }
body[data-title="Über uns"] .m30_hero_sub--image .m30_card { position: relative; inset: auto; top: auto; margin-top: var(--strobl-topline-h, 44px); padding: calc(var(--strobl-header-h, 194px) - var(--strobl-topline-h, 44px)) 0 0 20%; background: #fff; }
body[data-title="Über uns"] .m30_hero_sub--image .m30_slides,
body[data-title="Über uns"] .m30_hero_sub--image .m30_slide { position: static; }
body[data-title="Über uns"] .m30_hero_sub--image .m30_slide img { width: 100%; height: auto; object-fit: initial; display: block; }
body[data-title="Über uns"] .m30_hero_sub--image .m30_overlay { background: linear-gradient(90deg, #fff 0%, #fff 20%, rgba(255,255,255,.85) 25%, rgba(255,255,255,.4) 37%, rgba(255,255,255,0) 55%); }
body[data-title="Über uns"] .m30_hero_sub--image .m30_inner { position: absolute; top: var(--strobl-header-h, 194px); bottom: 0; left: 0; right: 0; display: flex; align-items: center; padding-top: 0; padding-bottom: 0; }
}
@media all and (min-width: 992px) and (max-width: 1199px) {
body[data-title="Über uns"] .m30_hero_sub--image { height: auto; min-height: 0; display: block; }
body[data-title="Über uns"] .m30_hero_sub--image .m30_card { position: relative; inset: auto; top: auto; margin-top: var(--strobl-topline-h, 44px); padding-top: calc(var(--strobl-header-h, 150px) - var(--strobl-topline-h, 44px)); background: #fff; }
body[data-title="Über uns"] .m30_hero_sub--image .m30_slides,
body[data-title="Über uns"] .m30_hero_sub--image .m30_slide { position: static; }
body[data-title="Über uns"] .m30_hero_sub--image .m30_slide img { width: 100%; height: auto; object-fit: initial; display: block; }
body[data-title="Über uns"] .m30_hero_sub--image .m30_overlay { background: linear-gradient(0deg, #fff 0%, rgba(255,255,255,0) 30%); }
body[data-title="Über uns"] .m30_hero_sub--image .m30_inner { position: relative; padding: 24px 0 48px; }
}
@media screen and (min-width: 1200px) {
body[data-title="Über uns"] .m30_content {
max-width: 506px;
}
}
@media screen and (min-width: 1200px) and (max-width: 1399px) {
body[data-title="Über uns"] .m30_hero_sub .m30_titel {
font-size: 50px;
line-height: 55px;
}
body[data-title="Über uns"] .m30_hero_sub .m30_text {
max-width: 370px;
}
}