/* ─── Block: Steps ───
 * Designvorlage: IMPORT/styles.css → .steps / .step
 * Schriftgrösse + Familie kommen aus dem Theme.
 */

.block-steps {
    --st-purple: #4B1FB8;
    --st-purple-100: #EDE7FB;
    --st-ink: #18171C;
    --st-ink-3: #4A4756;
    --st-line: #E7E2D7;
    --st-shadow-md: 0 2px 6px rgba(24,23,28,.05), 0 12px 32px rgba(24,23,28,.08);
    --st-rad-md: 14px;
    --st-ease: cubic-bezier(.2, .7, .2, 1);

    list-style: none;
    margin: clamp(32px, 6vw, 64px) auto;
    padding: 0 clamp(20px, 4vw, 40px);
    max-width: 1200px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 24px;
    counter-reset: bm-steps;
}

.block-steps *,
.block-steps *::before,
.block-steps *::after {
    box-sizing: border-box;
}

.block-steps__item {
    position: relative;
    display: grid;
    grid-template-columns: 60px 1fr 1fr;
    gap: 32px;
    align-items: start;
    padding: 28px 0;
    counter-increment: bm-steps;
    min-width: 0;
}

.block-steps__item > * {
    min-width: 0;
}

/* Rail (vertikale Linie) */
.block-steps__rail {
    grid-column: 1;
    position: relative;
    align-self: stretch;
    display: flex;
    justify-content: center;
}
.block-steps__rail::before {
    content: "";
    position: absolute;
    top: 24px;
    bottom: -24px;
    width: 2px;
    background: linear-gradient(180deg, var(--st-purple-100), var(--st-purple-100) 50%, transparent);
}
.block-steps__item--last .block-steps__rail::before { display: none; }

.block-steps__dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--st-purple);
    margin-top: 6px;
    box-shadow: 0 0 0 6px rgba(75, 31, 184, .14);
    position: relative;
    z-index: 1;
}

/* Label "Schritt 1" */
.block-steps__num {
    grid-column: 2;
    color: var(--st-purple);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.8em;
    padding-top: 4px;
}

/* Body */
.block-steps__body {
    grid-column: 2;
    padding-top: 8px;
    align-self: start;
}
.block-steps__title {
    margin: 0 0 8px;
    color: var(--st-ink);
    line-height: 1.25;
    letter-spacing: -0.015em;
}
.block-steps__text {
    margin: 0;
    color: var(--st-ink-3);
    line-height: 1.55;
    max-width: 32ch;
}

/* Media (rechts) */
.block-steps__media {
    grid-column: 3;
    align-self: start;
    background: #fff;
    border: 1px solid var(--st-line);
    border-radius: var(--st-rad-md);
    box-shadow: var(--st-shadow-md);
    overflow: hidden;
    width: 100%;
    transition: transform .3s var(--st-ease);
}
.block-steps__item:hover .block-steps__media { transform: translateY(-3px); }

.block-steps__image {
    display: block;
    width: 100%;
    height: auto;
}



/* Mobile */
@media (max-width: 880px) {
    .block-steps {
        padding: 0 28px;
    }
    .block-steps__item {
        grid-template-columns: 32px 1fr;
        gap: 16px 20px;
        padding: 20px 0;
    }
    .block-steps__num,
    .block-steps__body,
    .block-steps__media {
        grid-column: 2;
    }
    .block-steps__media { margin-top: 16px; }
}