section.m23_jump_marker_navigation {
position: sticky; top: var(--m23-stick, var(--header-h, 90px));
z-index: 998;
background: var(--strobl-blue);
padding: 100px 0;
margin-bottom: 0;
transition: padding .25s ease, margin-bottom .25s ease;
} section.m23_jump_marker_navigation.is-stuck { padding: 20px 0; margin-bottom: 160px; }
section.m23_jump_marker_navigation .m23_inner {
display: flex;
align-items: center;
gap: 20px 55px;
flex-wrap: wrap;
}
section.m23_jump_marker_navigation .m23_label {
color: #fff;
font-size: 17px;
white-space: nowrap;
}
@media all and (min-width: 992px) and (max-width: 1199px) {
section.m23_jump_marker_navigation .m23_sprungmarke_navigation_main {
width: 100%;
}
section.m23_jump_marker_navigation .m23_label {
display: none;
}
section.m23_jump_marker_navigation .m23_sprungmarke_navigation_items {
justify-content: space-between;
}
}
section.m23_jump_marker_navigation nav { flex: 1 1 auto; }
section.m23_jump_marker_navigation .m23_sprungmarke_navigation_items {
display: flex;
flex-wrap: wrap;
gap: 19px;
list-style: none;
margin: 0;
padding: 0;
}
section.m23_jump_marker_navigation .m23_sprungmarke_navigation_item { cursor: pointer; }
@media all and (max-width: 1599px) {
section.m23_jump_marker_navigation .m23_sprungmarke_navigation_item .button {
padding: 16px 20px;
}
}  section.m23_jump_marker_navigation .m23_sprungmarke_navigation_item .button { white-space: nowrap; vertical-align: middle; } section.m23_jump_marker_navigation .m23_sprungmarke_navigation_item.is-active .button {
background-color: var(--strobl-magenta);
border-color: var(--strobl-magenta);
color: #fff;
}  @media all and (max-width: 991px) {
section.m23_jump_marker_navigation { background: linear-gradient(to bottom, transparent 0%, #faf9fc 100%);
padding: 0; top: var(--header-h, 90px);
margin-top: -27px;
} section.m23_jump_marker_navigation.is-stuck { padding: 0; margin-bottom: 0; } section.m23_jump_marker_navigation .m23_inner {
display: block;
gap: 0;
position: relative;
} section.m23_jump_marker_navigation .m23_label {
position: relative;
z-index: 3;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 14px 28px;
background: var(--strobl-blue);
border: 1px solid rgba(255, 255, 255, .1);
border-radius: 50px;
box-shadow: 0 10px 24px rgba(0, 0, 0, .14);
cursor: pointer;
font-size: 16px;
user-select: none;
}
section.m23_jump_marker_navigation .m23_label::after {
content: "";
flex: 0 0 auto;
width: 11px;
height: 11px;
margin-left: 14px;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(45deg) translateY(-2px);
transition: transform .25s ease;
}
section.m23_jump_marker_navigation.is-open .m23_label::after {
transform: rotate(-135deg) translateY(-2px);
} section.m23_jump_marker_navigation .m23_sprungmarke_navigation_main {
position: absolute;
left: 0;
right: 0;
top: 100%;
z-index: 2; margin-top: -28px; background: var(--strobl-blue);
border: 1px solid rgba(255, 255, 255, .1);
border-top: 0;
border-radius: 0 0 26px 26px;
padding: 40px 22px 22px; max-height: 70vh;
overflow-y: auto;
box-shadow: 0 14px 26px rgba(0, 0, 0, .16); -webkit-clip-path: inset(0 0 100% 0 round 0 0 26px 26px);
clip-path: inset(0 0 100% 0 round 0 0 26px 26px);
visibility: hidden;
transition: clip-path .42s cubic-bezier(.4, 0, .2, 1),
-webkit-clip-path .42s cubic-bezier(.4, 0, .2, 1),
visibility 0s linear .42s;
}
section.m23_jump_marker_navigation.is-open .m23_sprungmarke_navigation_main {
-webkit-clip-path: inset(0 0 0 0 round 0 0 26px 26px);
clip-path: inset(0 0 0 0 round 0 0 26px 26px);
visibility: visible;
transition: clip-path .42s cubic-bezier(.4, 0, .2, 1),
-webkit-clip-path .42s cubic-bezier(.4, 0, .2, 1),
visibility 0s;
}
section.m23_jump_marker_navigation .m23_sprungmarke_navigation_items {
flex-direction: column;
gap: 8px;
}
section.m23_jump_marker_navigation .m23_sprungmarke_navigation_item a {
display: block;
text-align: center;
padding: 13px 20px;
font-size: 15px;
}
}