/* MunichPrevent CTA-Widget — konsistent mit Astra + Form-Wrapper (Off-White-Card) */

.mpcw-widget {
    background: #f4f4f5;  /* neutrales Hellgrau, ohne Blaustich — konsistent zum Footer */
    border-radius: 8px;
    padding: 32px 28px;
    margin: 48px auto 56px;
    /* Sinnvoller Default für Content-Bereiche. Widget passt in normale
       Astra/Elementor-Sections; für Full-Width-Layouts das width="wide"
       oder width="full" Attribut nutzen, für schmale Content-Bereiche
       (760px Body-Cap) das width="narrow". */
    max-width: 900px;
    width: 100%;
    /* Font-Family + Text-Farbe kommen vom Astra-Body — Widget erbt automatisch */
    font-family: inherit;
    color: inherit;
    box-sizing: border-box;
}

/* Optionale Breite-Constraints, per Shortcode-Attribut width="…" gesetzt */
.mpcw-widget--narrow { max-width: 720px; }
.mpcw-widget--wide   { max-width: 1140px; }
.mpcw-widget--full   { max-width: none; }

/* Variant: nur eine Spalte anzeigen (Grid → 1fr, Trennlinie weg, max-width kleiner) */
.mpcw-widget--variant-b2c .mpcw-grid,
.mpcw-widget--variant-b2b .mpcw-grid {
    grid-template-columns: 1fr;
}
.mpcw-widget--variant-b2c,
.mpcw-widget--variant-b2b {
    max-width: 600px;
}
.mpcw-widget--variant-b2c .mpcw-col + .mpcw-col,
.mpcw-widget--variant-b2b .mpcw-col + .mpcw-col {
    /* nicht relevant — mit variant ist nur eine Spalte da, aber falls doch: */
    padding-left: 0;
    border-left: 0;
}

.mpcw-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

@media (max-width: 640px) {
    .mpcw-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .mpcw-widget {
        padding: 24px 20px;
        margin: 24px auto;
    }
}

.mpcw-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.mpcw-col + .mpcw-col {
    padding-left: 32px;
    border-left: 1px solid var(--mpl-border, #e5e7eb);
}

@media (max-width: 640px) {
    .mpcw-col + .mpcw-col {
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid var(--mpl-border, #e5e7eb);
        padding-top: 28px;
    }
}

.mpcw-icon {
    color: var(--mpl-primary, #21b5ea);
    margin-bottom: 12px;
    line-height: 1;
}

.mpcw-headline {
    /* Astra-Heading-Styles erben (Font, Weight, Line-Height, Letter-Spacing),
       nur Farbe und Größe im Widget-Kontext setzen */
    font-size: 18px;
    color: var(--mpl-primary, #21b5ea);   /* Brand-Cyan aus dem MunichPrevent-Logo */
    margin: 0 0 10px 0;
}

.mpcw-text {
    /* Font, Farbe, Weight kommen vom Astra-Body — Widget passt sich Site an */
    font-size: 15px;
    line-height: 1.55;
    margin: 0 0 20px 0;
}

.mpcw-cta {
    margin: 0 0 12px 0;
}

.mpcw-subline {
    font-size: 13px;
    line-height: 1.4;
    margin: 0 0 14px 0;
    opacity: 0.75;   /* Farbe erbt vom Body, aber dezent */
}

/* Button-Look kommt komplett aus munichprevent-layout (.mpl-btn--primary).
   .mpcw-button* bleibt klassenseitig nur als Tracking-Hook erhalten.
   Guards hier: (1) Astra/Elementor-Content-Link-Farben dürfen den weißen
   Button-Text nicht überschreiben, (2) Background-Fallback, damit der
   Button auch ohne aktives Layout-Plugin sichtbar bleibt. */
.mpcw-widget a.mpl-btn--primary {
    background-color: var(--mpl-primary, #21b5ea);
    color: var(--mpl-primary-contrast, #fff) !important;
    text-decoration: none !important;
}

.mpcw-phone {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 15px;
    margin: 0;
    /* Farbe kommt vom Astra-Body */
}

.mpcw-phone-icon {
    color: var(--mpl-primary, #21b5ea);
    display: inline-flex;
    align-items: center;
}

.mpcw-phone-link,
.mpcw-email-link {
    color: var(--mpl-primary, #21b5ea) !important;
    text-decoration: none !important;
    font-weight: 600;
    white-space: nowrap;
}

.mpcw-phone-link:hover,
.mpcw-email-link:hover {
    text-decoration: underline !important;
}

.mpcw-sep {
    color: #94a3b8;
    padding: 0 4px;
}