/* ==========================================================================
   certana/demo-cta
   Dunkle Karte. Mobil: Text auf dunklem Grund, Buttons untereinander.
   Ab 992px: Bild rechts, nach links in den dunklen Grund ausgeblendet;
   Checkliste in einer Zeile.
   ========================================================================== */

.demo-cta {
    --demo-bg: #030e17;
    padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

.demo-cta__card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--demo-bg);
    color: #fff;
    box-shadow: 0 30px 60px -30px rgba(3, 14, 23, 0.55);
}

/* Bild ------------------------------------------------------------------- */
.demo-cta__media {
    display: none;
    position: absolute;
    inset: 0 0 0 auto;
    z-index: -1;
    width: 100%;
}
.demo-cta__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 70% 30%;
}

/* Mobil optional: Bild abgedunkelt hinter dem Text */
.demo-cta__card--image-mobile .demo-cta__media { display: block; }
.demo-cta__card--image-mobile .demo-cta__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(3, 14, 23, 0.72) 0%, rgba(3, 14, 23, 0.92) 55%, var(--demo-bg) 100%);
}

/* Inhalt ----------------------------------------------------------------- */
.demo-cta__content {
    padding: clamp(1.75rem, 6vw, 2.25rem) clamp(1.25rem, 5vw, 1.75rem);
}

.demo-cta__eyebrow { color: #a9b8cc; margin-bottom: 0.9rem; }

.demo-cta__title {
    margin: 0 0 1.1rem;
    font-family: var(--font-serif);
    font-size: clamp(1.875rem, 1.15rem + 2.4vw, 3.25rem);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -0.015em;
    color: #fff;
    text-wrap: balance;
}

.demo-cta__lead {
    max-width: 27rem;
    margin: 0 0 1.75rem;
    font-size: clamp(1rem, 0.94rem + 0.3vw, 1.125rem);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.86);
}

.demo-cta__actions {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-bottom: 1.6rem;
}
.demo-cta__btn { width: 100%; }

.demo-cta__checklist li { color: rgba(255, 255, 255, 0.9); }

/* Ab Tablet: Buttons nebeneinander --------------------------------------- */
@media (min-width: 576px) {
    .demo-cta__actions { flex-direction: row; flex-wrap: wrap; gap: 1rem; }
    .demo-cta__btn { width: auto; }
}

/* Desktop: Bild rechts --------------------------------------------------- */
@media (min-width: 992px) {
    .demo-cta__card { border-radius: 22px; }

    .demo-cta__card--image .demo-cta__media {
        display: block;
        width: 62%;
    }
    .demo-cta__card--image .demo-cta__media::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
            linear-gradient(90deg, var(--demo-bg) 0%, rgba(3, 14, 23, 0.85) 14%, rgba(3, 14, 23, 0.35) 34%, rgba(3, 14, 23, 0) 55%),
            linear-gradient(0deg, rgba(3, 14, 23, 0.45) 0%, rgba(3, 14, 23, 0) 30%);
    }

    .demo-cta__content {
        max-width: 54rem;
        padding: clamp(2.5rem, 4.5vw, 4rem) clamp(2.5rem, 6vw, 6rem) clamp(2.5rem, 4vw, 3.5rem);
    }

    .demo-cta__lead { margin-bottom: 2rem; }
    .demo-cta__actions { margin-bottom: 1.75rem; }

    .demo-cta__checklist {
        display: flex;
        flex-wrap: wrap;
        gap: 0.6rem 2.25rem;
    }
}