.m30_pricing {
    background: #252525;
    color: #d4d4d4;
    padding: 130px 0 130px;
}

.m30_header {
    text-align: center;
    margin: 0 auto 60px;
    max-width: 1200px;
    padding: 0 20px;
}

.m30_topline {
    margin: 0 0 0.6em;
    font-family: 'Nexa-Black-Italic', 'Nexa', system-ui, sans-serif;
    font-style: italic;
    font-weight: 900;
    font-size: clamp(16px, 1.4vw, 22px);
    color: #6b6b6b;
    text-transform: uppercase;
}
.m30_topline--bottom { margin: 0.6em 0 0; }

.m30_title {
    margin: 0;
    font-family: 'Nexa-Black-Italic', 'Nexa', system-ui, sans-serif;
    font-style: italic;
    font-weight: 900;
    font-size: clamp(28px, 5vw, 50px);
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    color: #d4d4d4;
}

.m30_title strong,
.m30_title em,
.m30_title .m30_title_accent {
    color: #ffffff;
    font-weight: inherit;
    font-style: italic;
}

/* Packages — flex row, equal-height, with overlap behavior for the featured card */
.m30_packages {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    position: relative;
}

.m30_package {
    flex: 1 1 0;
    min-width: 0;
    background: #2d2d2d;
    color: #d4d4d4;
    padding: 60px 46px 60px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    isolation: isolate;
}

.m30_package--rounded-left {
    border-radius: 20px 0 0 20px;
}
.m30_package--rounded-right {
    border-radius: 0 20px 20px 0;
}
.m30_package--rounded-all {
    border-radius: 20px;
}
.m30_package--flat {
    border-radius: 0;
}

/* Featured (middle) — same height as adjacent cards (top + bottom flush),
   visually distinct via border, slightly different bg, and a subtle outer
   rainbow halo. The horizontal negative margin pushes it 10px outward on
   each side so it overlaps the side cards. */
.m30_package--featured {
    position: relative;
    z-index: 2;
    margin: 0 -10px;
    padding: 60px 46px;
    background: #373737;
    border: 4px solid rgba(20, 94, 168, 0.5);
    border-radius: 20px;
    box-shadow:
         -90px -90px  90px -30px rgba(20,  94, 168, 0.18),
         -50px  90px  90px -30px rgba(235, 127, 177, 0.18),
           0px -120px 90px -30px rgba(126, 202, 212, 0.10),
           0px  120px 90px -30px rgba(124, 118,  64, 0.08),
          50px -90px  90px -30px rgba(218, 167,   7, 0.18),
          90px  90px  90px -30px rgba(238, 114,  44, 0.18);
}

.m30_package_label {
    margin: 0;
    font-family: 'Nexa-Black-Italic', 'Nexa', system-ui, sans-serif;
    font-style: italic;
    font-weight: 900;
    font-size: 22px;
    line-height: 25px;
    color: #ffffff;
    text-transform: uppercase;
}

.m30_package_tagline {
    margin: 16px 0 24px;
    font-family: 'Nexa-Regular', 'Nexa', system-ui, sans-serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 25px;
    color: #d4d4d4;
}

.m30_package_price {
    margin: 36px 0 8px;
    font-family: 'Nexa-Black-Italic', 'Nexa', system-ui, sans-serif;
    font-style: italic;
    font-weight: 900;
    color: #ffffff;
    text-transform: uppercase;
    /* line-height ≥ 1.1 so italic ascenders aren't clipped at the top of
       the box. Visual height stays consistent because all prices align on
       the baseline. */
    line-height: 1.15;
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}

.m30_package_price_main {
    /* Scales down on narrower cards so long prices like "Auf Anfrage" stay
       on a single line WITHOUT truncating. Min 24px to fit 11 chars in the
       narrowest card. */
    font-size: clamp(24px, 3vw, 50px);
    line-height: 1.15;
    white-space: nowrap;
    min-width: 0;
}

.m30_package_price_unit {
    font-family: 'Nexa-Black-Italic', 'Nexa', system-ui, sans-serif;
    font-style: italic;
    font-weight: 900;
    font-size: 17px;
    color: #d4d4d4;
    text-transform: uppercase;
}

.m30_package_price_sub {
    margin: 0 0 30px;
    font-family: 'Nexa-Regular', 'Nexa', system-ui, sans-serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 25px;
    color: rgba(212, 212, 212, 0.5);
}

.m30_divider {
    border: 0;
    border-top: 1px solid #4c4c4c;
    margin: 0;
}

.m30_package_body {
    margin: 30px 0;
    font-family: 'Nexa-Regular', 'Nexa', system-ui, sans-serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 25px;
    color: rgba(212, 212, 212, 0.5);
}
.m30_package_body p { margin: 0 0 0.8em; }
.m30_package_body p:last-child { margin-bottom: 0; }

.m30_package_features {
    list-style: none;
    margin: 0 0 60px;
    padding: 0;
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
}

.m30_package_feature {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-family: 'Nexa-Regular', 'Nexa', system-ui, sans-serif;
    font-weight: 400;
    font-size: 22px;
    line-height: 43px;
    color: #d4d4d4;
}

.m30_check {
    width: 16px;
    height: 15px;
    flex-shrink: 0;
    color: #d4d4d4;
    /* Anchor checkmark vertically to the first text line (43px line-height),
       so multi-line features keep their check aligned to the top, not
       floating to the middle of the wrapped text block. */
    margin-top: calc((43px - 15px) / 2);
}

.m30_package_optional {
    margin: 30px 0;
    /* Reserve 2 lines worth of height so cards with 1-line and 2-line optional
       text keep the divider above and CTA below at identical y-positions. */
    min-height: 44px;
    font-family: 'Nexa-Regular', 'Nexa', system-ui, sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 22px;
    color: rgba(212, 212, 212, 0.5);
}

/* Bottom block (divider + optional + CTAs) is anchored to the card bottom.
   Anchoring the wrapper instead of the individual elements keeps the upper
   divider on the same y across all three cards regardless of the optional
   text wrapping or the number of features. */
.m30_package_bottom {
    margin-top: auto;
    display: flex;
    flex-direction: column;
}

/* CTA wrapper — fixed height reservation so primary buttons align across all
   cards regardless of whether a secondary button is present. */
.m30_package_ctas {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 122px; /* primary 55px + gap 12px + secondary 55px */
    justify-content: flex-start;
}

.m30_package_ctas .showm_cta {
    width: 100%;
}

@media (max-width: 1100px) {
    .m30_packages { flex-direction: column; }
    .m30_package,
    .m30_package--rounded-left,
    .m30_package--rounded-right,
    .m30_package--flat,
    .m30_package--rounded-all {
        border-radius: 20px;
        margin: 0 0 20px;
        padding: 50px 36px;
    }
    .m30_package--featured {
        margin: 0 0 20px;
        padding: 50px 36px;
    }
}

@media (max-width: 768px) {
    .m30_pricing { padding: 70px 0; }
    .m30_package { padding: 40px 20px; }
    /* Preis-Wrapper darf umbrechen wenn nötig + Wörter dürfen brechen,
       damit lange Strings wie "AUF ANFRAGE" nicht aus der Card ragen. */
    .m30_package_price {
        flex-wrap: wrap;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    .m30_package_price_main {
        font-size: clamp(28px, 8vw, 36px);
        white-space: normal;
        max-width: 100%;
    }
    /* CTA min-width darf nicht erzwingen dass Buttons aus der Card ragen.
       Auf Mobile: volle Breite + min-width zurückgenommen. */
    .m30_package_ctas .showm_cta {
        min-width: 0;
        width: 100%;
        padding: 0 16px;
    }
}

@media (max-width: 380px) {
    .m30_package { padding: 32px 16px; }
    .m30_package_price_main { font-size: clamp(24px, 7vw, 32px); }
}