.mp-std {
--mp-petrol: #19485f;
--mp-creme: #fcfaee;
--mp-ink-2: rgba(25, 72, 95, .82);
--mp-line: rgba(25, 72, 95, .26);
--mp-line-stark: rgba(25, 72, 95, .4);
--mp-fill: rgba(25, 72, 95, .06);
--mp-hover: rgba(25, 72, 95, .88);
--mp-ease: cubic-bezier(.32, .72, 0, 1);
--mp-gutter: clamp(1.25rem, 6vw, 3.5rem);
--mp-cols: 3;
--mp-font: 'Nacelle', 'Helvetica Neue', Helvetica, Arial, sans-serif;
position: relative;
width: 100%;
font-family: var(--mp-font);
color: var(--mp-petrol);
}
.mp-std *,
.mp-std *::before,
.mp-std *::after {
box-sizing: border-box;
} .mp-std :where(h1, h2, h3, h4, p, span, b, figure, img, div, section, article, ol, ul, li, dl, dt, dd, button) {
margin: 0;
}
.mp-std :where(ol, ul) {
padding: 0;
list-style: none;
}
.mp-std a {
color: inherit;
text-decoration: none;
}
.mp-std img {
display: block;
max-width: 100%;
height: auto;
}
.mp-std button {
font: inherit;
color: inherit;
background: none;
border: 0;
cursor: pointer;
}
.mp-std .screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
} body :is(.e-con, .e-con-inner, .elementor-widget-container, .elementor-widget-html):has(.mp-std) {
overflow: visible;
background-color: transparent;
background-image: none;
} .mp-std-hero {
background: var(--mp-creme);
overflow: clip;
}
.mp-std-hero-text {
padding: clamp(4rem, 8vw, 7rem) var(--mp-gutter) clamp(3rem, 6vw, 5rem);
text-align: center;
}
.mp-std-hero-col {
width: 100%;
max-width: 1260px;
margin: 0 auto;
}
.mp-std-eyebrow {
display: block;
font-size: .8125rem;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
line-height: 1.4;
color: var(--mp-ink-2);
margin-bottom: 1.125rem;
}
.mp-std .mp-std-h1 {
font-size: clamp(1.625rem, 3.2vw, 2.5rem);
font-weight: 600;
line-height: 1.12;
letter-spacing: -.008em;
color: var(--mp-petrol);
max-width: 24ch;
margin: 0 auto 1.125rem;
} .mp-std .mp-std-h1 em {
font-style: normal;
color: inherit;
}
.mp-std-sub {
font-size: 1.0625rem;
font-weight: 400;
line-height: 1.55;
letter-spacing: -.011em;
color: var(--mp-ink-2);
max-width: 34rem;
margin: 0 auto;
}
.mp-std-band {
position: relative;
width: 100%;
height: var(--mp-band-h, clamp(200px, 32vw, 560px));
background: var(--mp-petrol);
overflow: clip;
}
.mp-std-band .mp-std-band-img {
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: center 45%;
} .mp-std-pause {
background: var(--mp-creme);
padding: clamp(3rem, 7vw, 5.5rem) var(--mp-gutter) clamp(4rem, 8vw, 7rem);
text-align: center;
}
.mp-std-pause-in {
width: 100%;
max-width: 44rem;
margin: 0 auto;
padding: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 4vw, 3rem);
background: #fff;
border: 1px solid var(--mp-line);
border-radius: 28px;
}
.mp-std .mp-std-pause-t {
font-size: 1.25rem;
font-weight: 600;
line-height: 1.3;
letter-spacing: -.008em;
color: var(--mp-petrol);
max-width: 24ch;
margin: 0 auto .75rem;
}
.mp-std-pause-p {
font-size: 1.0625rem;
font-weight: 400;
line-height: 1.6;
letter-spacing: -.011em;
color: var(--mp-ink-2);
max-width: 40ch;
margin: 0 auto;
}
.mp-std-pause-admin {
font-size: .875rem;
line-height: 1.5;
color: var(--mp-ink-2);
max-width: 44rem;
margin: 1.25rem auto 0;
}
.mp-std-pause-admin a {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
} .mp-std-filterbar {
background: var(--mp-creme);
padding: clamp(2.5rem, 5vw, 4rem) var(--mp-gutter) 0;
}
.mp-std-filterbar-in {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: .5rem;
width: 100%;
max-width: 1260px;
margin: 0 auto;
}
.mp-std .mp-std-fb {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 1.125rem;
border: 1px solid var(--mp-line);
border-radius: 999px;
background: transparent;
color: var(--mp-petrol);
font-size: .9375rem;
font-weight: 600;
letter-spacing: -.008em;
white-space: nowrap;
transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.mp-std .mp-std-fb:hover {
border-color: var(--mp-line-stark);
}
.mp-std .mp-std-fb:focus-visible {
outline: 2px solid var(--mp-petrol);
outline-offset: 3px;
}
.mp-std .mp-std-fb[aria-pressed="true"] {
background: var(--mp-petrol);
border-color: var(--mp-petrol);
color: var(--mp-creme);
}
.mp-std .mp-std-fb[aria-pressed="true"]:hover {
background: var(--mp-hover);
border-color: var(--mp-hover);
} .mp-std-grid {
background: var(--mp-creme);
padding: clamp(2.5rem, 5vw, 4rem) var(--mp-gutter) clamp(4rem, 8vw, 7rem);
}
.mp-std-grid-in {
display: grid;
grid-template-columns: repeat(var(--mp-cols), minmax(0, 1fr));
gap: clamp(1.25rem, 2.5vw, 2rem);
width: 100%;
max-width: 1260px;
margin: 0 auto;
}
.mp-std--cols-1 { --mp-cols: 1; }
.mp-std--cols-2 { --mp-cols: 2; }
.mp-std--cols-3 { --mp-cols: 3; }
.mp-std--cols-4 { --mp-cols: 4; }
.mp-std-msg {
grid-column: 1 / -1;
text-align: center;
font-size: 1.0625rem;
line-height: 1.6;
color: var(--mp-ink-2);
padding: clamp(2rem, 5vw, 3rem) 0;
} .mp-std-card {
display: flex;
flex-direction: column;
gap: clamp(1.25rem, 2.5vw, 1.75rem);
min-width: 0;
padding: clamp(1.5rem, 3vw, 2rem);
background: #fff;
border: 1px solid var(--mp-line);
border-radius: 28px;
transition: border-color .2s ease;
}
.mp-std-card:hover {
border-color: var(--mp-line-stark);
}
.mp-std-card-top {
display: flex;
flex-direction: column;
gap: .875rem;
flex: 1;
min-width: 0;
}
.mp-std-card-logo {
display: flex;
align-items: center;
height: 40px;
margin-bottom: .25rem;
overflow: clip;
} .mp-std-card-logo .mp-std-logo-img {
width: auto;
max-width: 100%;
height: 100%;
max-height: 40px;
object-fit: contain;
object-position: left center;
}
.mp-std-logo-fb {
display: inline-flex;
align-items: center;
justify-content: center;
height: 40px;
padding: 0 .875rem;
background: var(--mp-fill);
border-radius: 12px;
font-size: .9375rem;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--mp-ink-2);
}
.mp-std-card-tag {
display: block;
font-size: .8125rem;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
line-height: 1.4;
color: var(--mp-ink-2);
}
.mp-std .mp-std-card-title {
font-size: 1.25rem;
font-weight: 600;
line-height: 1.3;
letter-spacing: -.008em;
color: var(--mp-petrol);
}
.mp-std-card-div {
display: block;
width: 24px;
height: 1px;
background: var(--mp-line);
}
.mp-std-card-text {
font-size: 1.0625rem;
font-weight: 400;
line-height: 1.6;
letter-spacing: -.011em;
color: var(--mp-ink-2);
} .mp-std-card-bottom {
display: grid;
gap: .375rem;
padding-top: clamp(1rem, 2vw, 1.25rem);
border-top: 1px solid var(--mp-line);
}
.mp-std-card-links {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: .25rem 1.25rem;
}
.mp-std .mp-std-card-link,
.mp-std .mp-std-card-route {
display: inline-flex;
align-items: center;
gap: .45rem;
min-height: 44px;
font-size: 1rem;
font-weight: 600;
letter-spacing: -.011em;
color: var(--mp-petrol);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.mp-std .mp-std-card-route {
font-weight: 400;
color: var(--mp-ink-2);
text-decoration-color: transparent;
transition: text-decoration-color .2s ease, color .2s ease;
}
.mp-std .mp-std-card-link:hover {
text-decoration-thickness: 2px;
}
.mp-std .mp-std-card-route:hover {
color: var(--mp-petrol);
text-decoration-color: var(--mp-petrol);
}
.mp-std .mp-std-card-link:focus-visible,
.mp-std .mp-std-card-route:focus-visible {
outline: 2px solid var(--mp-petrol);
outline-offset: 3px;
border-radius: 4px;
}
.mp-std-card-link svg,
.mp-std-card-route svg {
width: 13px;
height: 13px;
flex: 0 0 auto;
fill: none;
stroke: currentColor;
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
transition: transform .2s var(--mp-ease);
}
.mp-std-card-route svg {
fill: none;
stroke-width: 1.6;
}
.mp-std-card-link:hover svg {
transform: translateX(3px);
}
.mp-std-card-plan {
display: inline-flex;
align-items: center;
min-height: 44px;
font-size: .8125rem;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--mp-ink-2);
}
.mp-std-card-loc {
display: inline-flex;
align-items: center;
gap: .375rem;
font-size: .9375rem;
font-weight: 400;
letter-spacing: -.011em;
color: var(--mp-ink-2);
}
.mp-std-card-loc svg {
width: 12px;
height: 12px;
flex: 0 0 auto;
fill: none;
stroke: currentColor;
stroke-width: 1.4;
stroke-linecap: round;
stroke-linejoin: round;
} @media (min-width: 768px) {
.mp-std-sub {
font-size: 1.1875rem;
max-width: 38rem;
}
}
@media (max-width: 1180px) {
.mp-std--cols-3 .mp-std-grid-in,
.mp-std--cols-4 .mp-std-grid-in {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 899px) {
.mp-std-grid-in {
grid-template-columns: 1fr !important;
max-width: 34rem;
}
}
@media (max-width: 679px) {
.mp-std-sub {
max-width: none;
}
.mp-std-grid-in {
max-width: none;
}
.mp-std-band {
height: clamp(180px, 46vw, 280px);
}
.mp-std-pause-in {
border-radius: 20px;
}
} @media (prefers-reduced-motion: reduce) {
.mp-std .mp-std-fb,
.mp-std .mp-std-card,
.mp-std .mp-std-card-link,
.mp-std .mp-std-card-route,
.mp-std-card-link svg,
.mp-std-card-route svg {
transition: none;
}
}
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
.mp-std-hero-col,
.mp-std-pause-in,
.mp-std-card {
animation-name: mpStdRise;
animation-timing-function: cubic-bezier(.32, .72, 0, 1);
animation-fill-mode: both;
animation-timeline: view();
animation-range: entry 8% entry 58%;
}
.mp-std-band .mp-std-band-img {
position: absolute;
top: -9%;
left: 0;
height: 118%;
animation-name: mpStdDrift;
animation-timing-function: linear;
animation-fill-mode: both;
animation-timeline: view();
animation-range: cover 0% cover 100%;
} .mp-std.mp-std--gefiltert .mp-std-card {
animation-name: none;
opacity: 1;
transform: none;
}
@keyframes mpStdRise {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: none; }
}
@keyframes mpStdDrift {
from { transform: translateY(-3.5%); }
to { transform: translateY(3.5%); }
}
}
}