/* Block Styles: Schritt-Abschnitte (Process Steps) */

.is-style-step-item {
    display: flex !important;
    gap: 2rem;
    margin-bottom: 3.5rem !important;
    transition: all 0.3s ease;
}

/* Die Schritt-Nummer (erstes Kind-Element) */
.is-style-step-item>*:first-child,
.is-style-step-item>.wp-block-group__inner-container>*:first-child {
    font-size: clamp(2.5rem, 5vw, 3.5rem) !important;
    /* text-5xl */
    font-weight: 700 !important;
    line-height: 1 !important;
    color: var(--wp--preset--color--accent-dark, #e57373) !important;
    opacity: 0.3;
    transition: opacity 0.3s ease, color 0.3s ease;
    flex-shrink: 0;
    margin-top: 0 !important;
    width: 3.5rem;
    /* Fixe Breite für gleichmäßiges Alignment */
}

/* Hover Effekt: Nummer wird kräftiger */
.is-style-step-item:hover>*:first-child,
.is-style-step-item:hover>.wp-block-group__inner-container>*:first-child {
    opacity: 1 !important;
    color: var(--wp--preset--color--accent-dark) !important;
}

/* Content Bereich (letztes Kind-Element) */
.is-style-step-item> :last-child {
    flex: 1;
}

/* Überschrift im Content */
.is-style-step-item h3 {
    margin-bottom: 0.5rem !important;
    margin-top: 0 !important;
}

/* Beschreibungstext-Anpassung im Schritt */
.is-style-step-item p {
    margin-bottom: 1rem !important;
}

/* --- STEP GRID (Für Aufzählungen innerhalb von Schritten) --- */

.is-style-step-grid {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 0.5rem 2rem;
    margin-top: 1.5rem !important;
}

@media (min-width: 640px) {
    .is-style-step-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Styling der Elemente im Gitter */
.is-style-step-grid p,
.is-style-step-grid div {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    margin: 0 !important;
}

.is-style-step-grid span.text-coral,
.is-style-step-grid strong {
    color: var(--wp--preset--color--accent-dark, #e57373) !important;
}

/* Spezifische Farben für Beere-Hintergrund */
.has-primary-background-color .is-style-step-item p {
    color: var(--wp--preset--color--polar-white) !important;
}

.has-primary-background-color .is-style-step-item>*:first-child,
.has-primary-background-color .is-style-step-item>.wp-block-group__inner-container>*:first-child {
    color: var(--wp--preset--color--polar-white) !important;
    /* Weiß statt Coral auf Beere */
    opacity: 0.2;
}

.has-primary-background-color .is-style-step-item:hover>*:first-child,
.has-primary-background-color .is-style-step-item:hover>.wp-block-group__inner-container>*:first-child {
    opacity: 1 !important;
    color: var(--wp--preset--color--accent-dark) !important;
}