.mpkg-wrap {
    width: min(100%, var(--mpkg-max-width));
    max-width: var(--mpkg-max-width);
    margin-inline: auto;
    box-sizing: border-box;
}

.mpkg-wrap.mpkg-full-viewport {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-inline: clamp(14px, 2.1vw, 42px);
}

.mpkg-grid {
    display: grid;
    grid-template-columns: repeat(var(--mpkg-cols-desktop), minmax(0, 1fr));
    gap: var(--mpkg-gap-laptop);
    align-items: stretch;
}

.mpkg-card {
    position: relative;
    isolation: isolate;
    min-width: 0;
    min-height: var(--mpkg-height-laptop);
    overflow: hidden;
    border-radius: var(--mpkg-radius);
    background: #17335f;
    transform: translateY(0);
    transition: transform .42s cubic-bezier(.2,.75,.25,1), box-shadow .42s ease;
}

.mpkg-has-shadow .mpkg-card {
    box-shadow: 0 20px 52px rgba(15, 30, 58, .16), 0 2px 8px rgba(15, 30, 58, .08);
}

.mpkg-card__media,
.mpkg-card__overlay {
    position: absolute;
    inset: 0;
}

.mpkg-card__media {
    z-index: 0;
    background-color: #63758d;
    background-image: linear-gradient(135deg, #8290a0, #d9e0e6);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transform: scale(1);
    transition: transform .8s cubic-bezier(.18,.75,.2,1), filter .45s ease;
}

.mpkg-card__overlay {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    background-color: transparent !important;
    background-image:
        linear-gradient(
            var(--mpkg-overlay-angle),
            var(--mpkg-overlay-start) 0%,
            var(--mpkg-overlay-start) var(--mpkg-overlay-focus),
            var(--mpkg-overlay-end) 100%
        ),
        linear-gradient(var(--mpkg-overlay-base), var(--mpkg-overlay-base)) !important;
}

/* Kritische Stapelreihenfolge gegen aggressive Theme-/Builder-Regeln absichern. */
.mpkg-card > .mpkg-card__media {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
}

.mpkg-card > .mpkg-card__content {
    position: relative !important;
    z-index: 2 !important;
}

.mpkg-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: inherit;
    pointer-events: none;
}

.mpkg-card__content {
    position: relative;
    z-index: 2;
    min-height: inherit;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: var(--mpkg-content-max);
    padding: var(--mpkg-padding-laptop);
    color: var(--mpkg-text-color);
    text-align: var(--mpkg-text-align);
}

.mpkg-position-top-left .mpkg-card__content { justify-content: flex-start; align-items: flex-start; }
.mpkg-position-top-center .mpkg-card__content { justify-content: flex-start; align-items: center; margin-inline: auto; }
.mpkg-position-top-right .mpkg-card__content { justify-content: flex-start; align-items: flex-end; margin-left: auto; }
.mpkg-position-center-left .mpkg-card__content { justify-content: center; align-items: flex-start; }
.mpkg-position-center .mpkg-card__content { justify-content: center; align-items: center; margin-inline: auto; }
.mpkg-position-center-right .mpkg-card__content { justify-content: center; align-items: flex-end; margin-left: auto; }
.mpkg-position-bottom-left .mpkg-card__content { justify-content: flex-end; align-items: flex-start; }
.mpkg-position-bottom-center .mpkg-card__content { justify-content: flex-end; align-items: center; margin-inline: auto; }
.mpkg-position-bottom-right .mpkg-card__content { justify-content: flex-end; align-items: flex-end; margin-left: auto; }

.mpkg-card__icon,
.mpkg-card__custom-icon {
    display: inline-flex;
    width: var(--mpkg-icon-size);
    height: var(--mpkg-icon-size);
    margin-bottom: clamp(14px, 1.5vw, 22px);
    flex: 0 0 auto;
}

.mpkg-card__icon {
    color: var(--mpkg-icon-color);
}

.mpkg-card__icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 3.1;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mpkg-card__custom-icon {
    background-color: var(--mpkg-icon-color);
    -webkit-mask-image: var(--mpkg-custom-icon);
    mask-image: var(--mpkg-custom-icon);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.mpkg-card__title {
    margin: 0 0 14px;
    max-width: 100%;
    color: var(--mpkg-title-color);
    font-size: var(--mpkg-title-laptop);
    font-weight: var(--mpkg-title-weight);
    line-height: 1.08;
    letter-spacing: -.025em;
    overflow-wrap: anywhere;
}

.mpkg-card__text {
    margin: 0;
    max-width: 100%;
    color: var(--mpkg-text-color);
    font-size: var(--mpkg-text-laptop);
    line-height: 1.52;
    overflow-wrap: anywhere;
}

.mpkg-card__text > :first-child { margin-top: 0; }
.mpkg-card__text > :last-child { margin-bottom: 0; }

.mpkg-card__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    align-self: var(--mpkg-text-align);
    width: fit-content;
    max-width: 100%;
    margin-top: clamp(22px, 2vw, 34px);
    padding: var(--mpkg-button-py) var(--mpkg-button-px);
    border: 1px solid var(--mpkg-button-border);
    border-radius: var(--mpkg-button-radius);
    background: var(--mpkg-button-bg);
    color: var(--mpkg-button-text);
    box-shadow: 0 8px 24px rgba(6, 17, 36, .14), inset 0 1px 0 rgba(255,255,255,.65);
    font-size: var(--mpkg-button-size);
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    transition: color .28s ease, background-color .28s ease, border-color .28s ease, transform .28s ease, box-shadow .28s ease;
}

.mpkg-card__button svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .28s ease;
}

.mpkg-card__button:hover,
.mpkg-card__button:focus-visible {
    color: var(--mpkg-button-hover-text);
    background: var(--mpkg-button-hover-bg);
    border-color: var(--mpkg-button-hover-bg);
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(6, 17, 36, .2);
}

.mpkg-card__button:hover svg,
.mpkg-card__button:focus-visible svg {
    transform: translateX(3px);
}

.mpkg-card__button:focus-visible {
    outline: 3px solid rgba(255,255,255,.75);
    outline-offset: 3px;
}

@media (hover:hover) and (prefers-reduced-motion:no-preference) {
    .mpkg-card:hover {
        transform: translateY(calc(var(--mpkg-hover-lift) * -1));
    }

    .mpkg-has-shadow .mpkg-card:hover {
        box-shadow: 0 30px 70px rgba(15, 30, 58, .22), 0 4px 14px rgba(15, 30, 58, .1);
    }

    .mpkg-card:hover .mpkg-card__media {
        transform: scale(var(--mpkg-hover-zoom));
    }
}

@media (min-width: 1600px) {
    .mpkg-grid {
        gap: var(--mpkg-gap-wide);
    }
    .mpkg-card {
        min-height: var(--mpkg-height-wide);
    }
    .mpkg-card__content {
        padding: var(--mpkg-padding-wide);
    }
    .mpkg-card__title {
        font-size: var(--mpkg-title-wide);
    }
    .mpkg-card__text {
        font-size: var(--mpkg-text-wide);
    }
}

@media (max-width: 1024px) {
    .mpkg-grid {
        grid-template-columns: repeat(var(--mpkg-cols-tablet), minmax(0, 1fr));
        gap: var(--mpkg-gap-tablet);
    }
    .mpkg-card {
        min-height: var(--mpkg-height-tablet);
    }
    .mpkg-card__content {
        padding: var(--mpkg-padding-tablet);
    }
    .mpkg-card__title {
        font-size: var(--mpkg-title-tablet);
    }
    .mpkg-card__text {
        font-size: var(--mpkg-text-tablet);
    }
}

@media (max-width: 767px) {
    .mpkg-wrap.mpkg-full-viewport {
        padding-inline: 14px;
    }
    .mpkg-grid {
        grid-template-columns: repeat(var(--mpkg-cols-mobile), minmax(0, 1fr));
        gap: var(--mpkg-gap-mobile);
    }
    .mpkg-card {
        min-height: var(--mpkg-height-mobile);
    }
    .mpkg-card__content {
        max-width: min(100%, var(--mpkg-content-max));
        padding: var(--mpkg-padding-mobile);
    }
    .mpkg-card__title {
        margin-bottom: 12px;
        font-size: var(--mpkg-title-mobile);
    }
    .mpkg-card__text {
        font-size: var(--mpkg-text-mobile);
        line-height: 1.48;
    }
    .mpkg-card__button {
        margin-top: 22px;
    }
}

@media (max-width: 480px) {
    .mpkg-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mpkg-card,
    .mpkg-card__media,
    .mpkg-card__button,
    .mpkg-card__button svg {
        transition: none !important;
    }
}