.master-prozess-block {
    background: var(--mp-bg, #f7f8fb);
    padding: var(--mp-padding-y, 30px) var(--mp-padding-x, 30px);
    overflow: hidden;
    position: relative;
}

.master-prozess-block .mp-inner {
    max-width: var(--mp-max-width, 1280px);
    margin: 0 auto;
}

.master-prozess-block .mp-items {
    position: relative;
    display: grid;
    gap: var(--mp-row-gap, 28px) var(--mp-column-gap, 24px);
}

.master-prozess-block .mp-item {
    position: relative;
    display: grid;
    gap: 14px;
    align-items: start;
}

.master-prozess-block .mp-marker-wrap {
    position: relative;
    min-height: var(--mp-circle-size, 48px);
    z-index: 2;
}

.master-prozess-block .mp-marker {
    width: var(--mp-circle-size, 48px);
    height: var(--mp-circle-size, 48px);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--mp-circle-bg, #000);
    color: var(--mp-circle-text, #fff);
    font-size: clamp(16px, 1vw, 18px);
    line-height: 1;
    font-weight: 700;
    position: relative;
    z-index: 2;
    box-shadow: 0 10px 26px rgba(0,0,0,0.12);
}

.master-prozess-block .mp-marker .dashicons,
.master-prozess-block .mp-marker-icon {
    font-size: calc(var(--mp-circle-size, 48px) * 0.42);
    width: auto;
    height: auto;
}

.master-prozess-block .mp-content {
    background: var(--mp-card-bg, transparent);
    border-radius: var(--mp-card-radius, 18px);
    min-width: 0;
    padding: var(--mp-card-padding, 12px);
    display: flex;
    flex-direction: column;
    transition: transform .28s ease, box-shadow .28s ease, background-color .28s ease;
}

.master-prozess-block .mp-title {
    margin: 0 0 10px;
    color: var(--mp-title-color, #1d2630);
    font-weight: 700;
    font-size: clamp(18px, 1.5vw, 24px);
    line-height: 1.25;
    min-height: var(--mp-title-min-height, 72px);
}

.master-prozess-block .mp-text {
    margin: 0;
    color: var(--mp-text-color, #606a76);
    font-size: clamp(14px, 1vw, 16px);
    line-height: 1.65;
}

.master-prozess-block.is-hover-enabled .mp-item:hover .mp-content {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.10);
}

.master-prozess-block.is-hover-enabled .mp-item:hover .mp-marker {
    transform: translateY(-2px) scale(1.03);
}

.master-prozess-block .mp-item::before {
    content: '';
    position: absolute;
    background: var(--mp-line-color, #f39200);
    opacity: 1;
}

.master-prozess-block .mp-items::before {
    content: '';
    display: none;
    position: absolute;
    background: var(--mp-line-color, #f39200);
    z-index: 1;
}

.master-prozess-block.is-animated .mp-items::before,
.master-prozess-block.is-animated .mp-item::before {
    animation: mpLineGrow 1.1s ease both;
}

/* Generic vertical */
.master-prozess-block[data-layout-mobile="vertical"] .mp-items,
.master-prozess-block[data-layout-tablet="vertical"] .mp-items,
.master-prozess-block[data-layout-desktop="vertical"] .mp-items {
    grid-template-columns: 1fr;
}

.master-prozess-block[data-layout-mobile="vertical"] .mp-item,
.master-prozess-block[data-layout-tablet="vertical"] .mp-item,
.master-prozess-block[data-layout-desktop="vertical"] .mp-item {
    grid-template-columns: var(--mp-circle-size, 48px) 1fr;
}

.master-prozess-block[data-layout-mobile="vertical"] .mp-item::before,
.master-prozess-block[data-layout-tablet="vertical"] .mp-item::before,
.master-prozess-block[data-layout-desktop="vertical"] .mp-item::before {
    left: calc(var(--mp-circle-size, 48px) / 2 - var(--mp-connector-thickness, 4px) / 2);
    top: calc(var(--mp-circle-size, 48px));
    bottom: calc(var(--mp-row-gap, 28px) * -1 + 4px);
    width: var(--mp-connector-thickness, 4px);
}

.master-prozess-block[data-layout-mobile="vertical"] .mp-item:last-child::before,
.master-prozess-block[data-layout-tablet="vertical"] .mp-item:last-child::before,
.master-prozess-block[data-layout-desktop="vertical"] .mp-item:last-child::before {
    display: none;
}

/* Generic horizontal */
.master-prozess-block[data-layout-mobile="horizontal"] .mp-items,
.master-prozess-block[data-layout-tablet="horizontal"] .mp-items,
.master-prozess-block[data-layout-desktop="horizontal"] .mp-items {
    grid-template-columns: repeat(var(--mp-columns, 4), minmax(0, 1fr));
    align-items: start;
}

.master-prozess-block[data-layout-mobile="horizontal"] .mp-items::before,
.master-prozess-block[data-layout-tablet="horizontal"] .mp-items::before,
.master-prozess-block[data-layout-desktop="horizontal"] .mp-items::before {
    display: block;
    left: calc((100% / (var(--mp-columns, 4) * 2)));
    right: calc((100% / (var(--mp-columns, 4) * 2)));
    top: calc(var(--mp-circle-size, 48px) / 2 - var(--mp-connector-thickness, 4px) / 2);
    height: var(--mp-connector-thickness, 4px);
}

.master-prozess-block[data-layout-mobile="horizontal"] .mp-item,
.master-prozess-block[data-layout-tablet="horizontal"] .mp-item,
.master-prozess-block[data-layout-desktop="horizontal"] .mp-item {
    grid-template-columns: 1fr;
}

.master-prozess-block[data-layout-mobile="horizontal"] .mp-item::before,
.master-prozess-block[data-layout-tablet="horizontal"] .mp-item::before,
.master-prozess-block[data-layout-desktop="horizontal"] .mp-item::before {
    display: none;
}

.master-prozess-block[data-layout-mobile="horizontal"] .mp-marker-wrap,
.master-prozess-block[data-layout-tablet="horizontal"] .mp-marker-wrap,
.master-prozess-block[data-layout-desktop="horizontal"] .mp-marker-wrap {
    text-align: center;
}

.master-prozess-block[data-layout-mobile="horizontal"] .mp-content,
.master-prozess-block[data-layout-tablet="horizontal"] .mp-content,
.master-prozess-block[data-layout-desktop="horizontal"] .mp-content {
    text-align: center;
    align-items: center;
}

.master-prozess-block[data-layout-mobile="horizontal"] .mp-text,
.master-prozess-block[data-layout-tablet="horizontal"] .mp-text,
.master-prozess-block[data-layout-desktop="horizontal"] .mp-text {
    max-width: 34ch;
}

@keyframes mpLineGrow {
    from { opacity: .35; transform: scaleX(.35); transform-origin: left center; }
    to { opacity: 1; transform: scaleX(1); transform-origin: left center; }
}

/* Actual breakpoints */
@media (max-width: 781px) {
    .master-prozess-block[data-layout-mobile="horizontal"] .mp-items {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        --mp-columns: 2;
    }

    .master-prozess-block[data-layout-mobile="vertical"] .mp-items {
        grid-template-columns: 1fr;
    }

    .master-prozess-block[data-layout-mobile="vertical"] .mp-item {
        grid-template-columns: var(--mp-circle-size, 48px) 1fr;
    }

    .master-prozess-block[data-layout-mobile="vertical"] .mp-content {
        text-align: left;
        align-items: flex-start;
    }

    .master-prozess-block[data-layout-mobile="vertical"] .mp-title {
        min-height: 0;
    }
}

@media (min-width: 782px) and (max-width: 1023px) {
    .master-prozess-block[data-layout-tablet="horizontal"] .mp-items {
        grid-template-columns: repeat(var(--mp-columns, 4), minmax(0, 1fr));
    }

    .master-prozess-block[data-layout-tablet="vertical"] .mp-items {
        grid-template-columns: 1fr;
    }

    .master-prozess-block[data-layout-tablet="vertical"] .mp-item {
        grid-template-columns: var(--mp-circle-size, 48px) 1fr;
    }

    .master-prozess-block[data-layout-tablet="vertical"] .mp-content {
        text-align: left;
        align-items: flex-start;
    }
}

@media (min-width: 1024px) {
    .master-prozess-block[data-layout-desktop="horizontal"] .mp-items {
        grid-template-columns: repeat(var(--mp-columns, 4), minmax(0, 1fr));
    }

    .master-prozess-block[data-layout-desktop="vertical"] .mp-items {
        grid-template-columns: 1fr;
    }

    .master-prozess-block[data-layout-desktop="vertical"] .mp-item {
        grid-template-columns: var(--mp-circle-size, 48px) 1fr;
    }

    .master-prozess-block[data-layout-desktop="vertical"] .mp-content {
        text-align: left;
        align-items: flex-start;
    }
}


.master-prozess-block.has-viewport-reveal.mp-has-observer .mp-items::before,
.master-prozess-block.has-viewport-reveal.mp-has-observer .mp-item::before {
    animation: none;
}

.master-prozess-block.has-viewport-reveal.mp-has-observer .mp-marker,
.master-prozess-block.has-viewport-reveal.mp-has-observer .mp-content {
    opacity: 0;
    will-change: transform, opacity;
}

.master-prozess-block.has-viewport-reveal.mp-has-observer[data-layout-mobile="horizontal"] .mp-marker,
.master-prozess-block.has-viewport-reveal.mp-has-observer[data-layout-tablet="horizontal"] .mp-marker,
.master-prozess-block.has-viewport-reveal.mp-has-observer[data-layout-desktop="horizontal"] .mp-marker {
    transform: translateY(18px) scale(.88);
}

.master-prozess-block.has-viewport-reveal.mp-has-observer[data-layout-mobile="vertical"] .mp-marker,
.master-prozess-block.has-viewport-reveal.mp-has-observer[data-layout-tablet="vertical"] .mp-marker,
.master-prozess-block.has-viewport-reveal.mp-has-observer[data-layout-desktop="vertical"] .mp-marker {
    transform: translateX(-18px) scale(.88);
}

.master-prozess-block.has-viewport-reveal.mp-has-observer .mp-content {
    transform: translateY(22px);
}

.master-prozess-block.has-viewport-reveal.mp-has-observer.is-inview .mp-items::before,
.master-prozess-block.has-viewport-reveal.mp-has-observer.is-inview .mp-item::before {
    animation: mpLineGrow 1.1s ease both;
}

.master-prozess-block.has-viewport-reveal.mp-has-observer.is-inview .mp-item .mp-marker,
.master-prozess-block.has-viewport-reveal.mp-has-observer.is-inview .mp-item .mp-content {
    transition: opacity .6s ease, transform .7s cubic-bezier(.22,1,.36,1), box-shadow .28s ease, background-color .28s ease;
}

.master-prozess-block.has-viewport-reveal.mp-has-observer.is-inview .mp-item .mp-marker,
.master-prozess-block.has-viewport-reveal.mp-has-observer.is-inview .mp-item .mp-content {
    opacity: 1;
    transform: none;
}

.master-prozess-block.has-viewport-reveal.mp-has-observer.is-inview .mp-item:nth-child(1) .mp-marker,
.master-prozess-block.has-viewport-reveal.mp-has-observer.is-inview .mp-item:nth-child(1) .mp-content { transition-delay: calc(var(--mp-stagger-step, 140ms) * 1); }
.master-prozess-block.has-viewport-reveal.mp-has-observer.is-inview .mp-item:nth-child(2) .mp-marker,
.master-prozess-block.has-viewport-reveal.mp-has-observer.is-inview .mp-item:nth-child(2) .mp-content { transition-delay: calc(var(--mp-stagger-step, 140ms) * 2); }
.master-prozess-block.has-viewport-reveal.mp-has-observer.is-inview .mp-item:nth-child(3) .mp-marker,
.master-prozess-block.has-viewport-reveal.mp-has-observer.is-inview .mp-item:nth-child(3) .mp-content { transition-delay: calc(var(--mp-stagger-step, 140ms) * 3); }
.master-prozess-block.has-viewport-reveal.mp-has-observer.is-inview .mp-item:nth-child(4) .mp-marker,
.master-prozess-block.has-viewport-reveal.mp-has-observer.is-inview .mp-item:nth-child(4) .mp-content { transition-delay: calc(var(--mp-stagger-step, 140ms) * 4); }
.master-prozess-block.has-viewport-reveal.mp-has-observer.is-inview .mp-item:nth-child(5) .mp-marker,
.master-prozess-block.has-viewport-reveal.mp-has-observer.is-inview .mp-item:nth-child(5) .mp-content { transition-delay: calc(var(--mp-stagger-step, 140ms) * 5); }
.master-prozess-block.has-viewport-reveal.mp-has-observer.is-inview .mp-item:nth-child(6) .mp-marker,
.master-prozess-block.has-viewport-reveal.mp-has-observer.is-inview .mp-item:nth-child(6) .mp-content { transition-delay: calc(var(--mp-stagger-step, 140ms) * 6); }
.master-prozess-block.has-viewport-reveal.mp-has-observer.is-inview .mp-item:nth-child(7) .mp-marker,
.master-prozess-block.has-viewport-reveal.mp-has-observer.is-inview .mp-item:nth-child(7) .mp-content { transition-delay: calc(var(--mp-stagger-step, 140ms) * 7); }
.master-prozess-block.has-viewport-reveal.mp-has-observer.is-inview .mp-item:nth-child(8) .mp-marker,
.master-prozess-block.has-viewport-reveal.mp-has-observer.is-inview .mp-item:nth-child(8) .mp-content { transition-delay: calc(var(--mp-stagger-step, 140ms) * 8); }


.master-prozess-block.has-sequential-focus .mp-marker {
    transition: transform .35s ease, box-shadow .35s ease, background-color .35s ease, color .35s ease, filter .35s ease;
}

.master-prozess-block.has-sequential-focus .mp-item.is-complete .mp-marker {
    box-shadow: 0 10px 26px rgba(0,0,0,0.12), 0 0 0 6px color-mix(in srgb, var(--mp-line-color, #f39200) 18%, transparent);
}

.master-prozess-block.has-sequential-focus .mp-item.is-active .mp-marker {
    background: var(--mp-line-color, #f39200);
    color: #ffffff;
    transform: translateY(-2px) scale(1.08);
    box-shadow: 0 18px 40px rgba(0,0,0,0.18), 0 0 0 9px color-mix(in srgb, var(--mp-line-color, #f39200) 26%, transparent), 0 0 28px color-mix(in srgb, var(--mp-line-color, #f39200) 36%, transparent);
    animation: mpMarkerPulse var(--mp-active-hold, 700ms) cubic-bezier(.22,1,.36,1) both;
}

.master-prozess-block.has-sequential-focus .mp-item.is-complete .mp-title {
    color: color-mix(in srgb, var(--mp-title-color, #1d2630) 86%, var(--mp-line-color, #f39200) 14%);
}

.master-prozess-block.has-sequential-focus.mp-has-observer .mp-items::after {
    content: '';
    position: absolute;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg, color-mix(in srgb, var(--mp-line-color, #f39200) 70%, #ffffff 30%) 0%, var(--mp-line-color, #f39200) 100%);
    opacity: 0;
}

.master-prozess-block.has-sequential-focus.mp-has-observer[data-layout-mobile="horizontal"] .mp-items::after,
.master-prozess-block.has-sequential-focus.mp-has-observer[data-layout-tablet="horizontal"] .mp-items::after,
.master-prozess-block.has-sequential-focus.mp-has-observer[data-layout-desktop="horizontal"] .mp-items::after {
    left: calc((100% / (var(--mp-columns, 4) * 2)));
    right: calc((100% / (var(--mp-columns, 4) * 2)));
    top: calc(var(--mp-circle-size, 48px) / 2 - var(--mp-connector-thickness, 4px) / 2);
    height: var(--mp-connector-thickness, 4px);
    transform-origin: left center;
    transform: scaleX(0);
    border-radius: 999px;
}

.master-prozess-block.has-sequential-focus.mp-has-observer[data-layout-mobile="vertical"] .mp-item::after,
.master-prozess-block.has-sequential-focus.mp-has-observer[data-layout-tablet="vertical"] .mp-item::after,
.master-prozess-block.has-sequential-focus.mp-has-observer[data-layout-desktop="vertical"] .mp-item::after {
    content: '';
    position: absolute;
    left: calc(var(--mp-circle-size, 48px) / 2 - var(--mp-connector-thickness, 4px) / 2);
    top: calc(var(--mp-circle-size, 48px));
    bottom: calc(var(--mp-row-gap, 28px) * -1 + 4px);
    width: var(--mp-connector-thickness, 4px);
    background: linear-gradient(180deg, color-mix(in srgb, var(--mp-line-color, #f39200) 70%, #ffffff 30%) 0%, var(--mp-line-color, #f39200) 100%);
    z-index: 1;
    opacity: 0;
    transform-origin: top center;
    transform: scaleY(0);
    border-radius: 999px;
}

.master-prozess-block.has-sequential-focus.mp-has-observer[data-layout-mobile="vertical"] .mp-item:last-child::after,
.master-prozess-block.has-sequential-focus.mp-has-observer[data-layout-tablet="vertical"] .mp-item:last-child::after,
.master-prozess-block.has-sequential-focus.mp-has-observer[data-layout-desktop="vertical"] .mp-item:last-child::after {
    display: none;
}

.master-prozess-block.has-sequential-focus.mp-has-observer.is-inview .mp-items::after {
    opacity: 1;
    animation: mpLineGlowFlow calc(var(--mp-stagger-step, 140ms) * var(--mp-columns, 4) + 450ms) cubic-bezier(.22,1,.36,1) both;
}

.master-prozess-block.has-sequential-focus.mp-has-observer.is-inview[data-layout-mobile="vertical"] .mp-item.is-complete::after,
.master-prozess-block.has-sequential-focus.mp-has-observer.is-inview[data-layout-tablet="vertical"] .mp-item.is-complete::after,
.master-prozess-block.has-sequential-focus.mp-has-observer.is-inview[data-layout-desktop="vertical"] .mp-item.is-complete::after {
    opacity: 1;
    animation: mpLineGlowFlowVertical calc(var(--mp-active-hold, 700ms) * .7) cubic-bezier(.22,1,.36,1) both;
}

@keyframes mpMarkerPulse {
    0% { transform: translateY(0) scale(1); filter: brightness(1); }
    35% { transform: translateY(-3px) scale(1.12); filter: brightness(1.06); }
    100% { transform: translateY(0) scale(1.04); filter: brightness(1); }
}

@keyframes mpLineGlowFlow {
    0% { opacity: .35; transform: scaleX(0); }
    55% { opacity: 1; transform: scaleX(1); }
    100% { opacity: 1; transform: scaleX(1); }
}

@keyframes mpLineGlowFlowVertical {
    0% { opacity: .35; transform: scaleY(0); }
    100% { opacity: 1; transform: scaleY(1); }
}


/* Level 2 animation */
.master-prozess-block.has-sequential-focus .mp-items {
    --mp-progress: 0;
}

.master-prozess-block.has-sequential-focus .mp-items::after {
    opacity: 1;
}

.master-prozess-block.has-sequential-focus[data-layout-mobile="horizontal"] .mp-item::after,
.master-prozess-block.has-sequential-focus[data-layout-tablet="horizontal"] .mp-item::after,
.master-prozess-block.has-sequential-focus[data-layout-desktop="horizontal"] .mp-item::after {
    content: none !important;
    display: none !important;
}

.master-prozess-block.has-sequential-focus.mp-has-observer[data-layout-mobile="horizontal"] .mp-items::after,
.master-prozess-block.has-sequential-focus.mp-has-observer[data-layout-tablet="horizontal"] .mp-items::after,
.master-prozess-block.has-sequential-focus.mp-has-observer[data-layout-desktop="horizontal"] .mp-items::after {
    opacity: 1;
    transform: scaleX(var(--mp-progress, 0));
    animation: none !important;
    transition: transform .48s cubic-bezier(.22,1,.36,1), opacity .28s ease;
}

.master-prozess-block.has-sequential-focus.mp-has-observer[data-layout-mobile="vertical"] .mp-item::after,
.master-prozess-block.has-sequential-focus.mp-has-observer[data-layout-tablet="vertical"] .mp-item::after,
.master-prozess-block.has-sequential-focus.mp-has-observer[data-layout-desktop="vertical"] .mp-item::after {
    animation: none !important;
    transition: transform .48s cubic-bezier(.22,1,.36,1), opacity .28s ease;
}

.master-prozess-block.has-text-sync.mp-has-observer .mp-content {
    opacity: 0;
    transform: translateY(18px);
    filter: blur(4px);
}

.master-prozess-block.has-text-sync.mp-has-observer .mp-item.is-active .mp-content,
.master-prozess-block.has-text-sync.mp-has-observer .mp-item.is-complete .mp-content,
.master-prozess-block.has-text-sync.is-inview:not(.mp-has-observer) .mp-content {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

.master-prozess-block.has-sequential-focus .mp-item.is-active .mp-content {
    transform: translateY(-2px);
}

.master-prozess-block.has-sequential-focus .mp-item.is-complete .mp-content {
    opacity: 1;
}

.master-prozess-block.has-scroll-progress .mp-items::after,
.master-prozess-block.has-scroll-progress .mp-item::after,
.master-prozess-block.has-scroll-progress .mp-marker,
.master-prozess-block.has-scroll-progress .mp-content {
    transition-duration: .18s;
}


/* Level 3 premium refinements */
.master-prozess-block .mp-marker,
.master-prozess-block .mp-content,
.master-prozess-block .mp-items::before,
.master-prozess-block .mp-items::after,
.master-prozess-block .mp-item::after {
    transition-timing-function: var(--mp-motion-ease, cubic-bezier(.22,1,.36,1));
}

.master-prozess-block.has-level3-trace .mp-items::after {
    background:
        linear-gradient(90deg,
            rgba(255,255,255,0) 0%,
            color-mix(in srgb, var(--mp-line-color, #f39200) 74%, #ffffff 26%) 18%,
            color-mix(in srgb, var(--mp-line-color, #f39200) 100%, #ffffff 0%) 48%,
            color-mix(in srgb, var(--mp-line-color, #f39200) 70%, #ffffff 30%) 82%,
            rgba(255,255,255,0) 100%);
    box-shadow:
        0 0 calc(var(--mp-glow-strength, 72px) * .18) color-mix(in srgb, var(--mp-line-color, #f39200) 58%, transparent),
        0 0 calc(var(--mp-glow-strength, 72px) * .42) color-mix(in srgb, var(--mp-line-color, #f39200) 34%, transparent),
        0 0 calc(var(--mp-glow-strength, 72px) * .82) color-mix(in srgb, var(--mp-line-color, #f39200) 18%, transparent);
    filter: saturate(1.08);
}

.master-prozess-block.has-level3-trace.has-sequential-focus .mp-item.is-active .mp-marker {
    box-shadow:
        0 18px 40px rgba(0,0,0,0.18),
        0 0 0 9px color-mix(in srgb, var(--mp-line-color, #f39200) 18%, transparent),
        0 0 calc(var(--mp-glow-strength, 72px) * .24) color-mix(in srgb, var(--mp-line-color, #f39200) 55%, transparent),
        0 0 calc(var(--mp-glow-strength, 72px) * .52) color-mix(in srgb, var(--mp-line-color, #f39200) 28%, transparent);
}

.master-prozess-block.has-level3-trace.has-sequential-focus .mp-item.is-complete .mp-marker {
    box-shadow:
        0 10px 26px rgba(0,0,0,0.12),
        0 0 0 6px color-mix(in srgb, var(--mp-line-color, #f39200) 14%, transparent),
        0 0 calc(var(--mp-glow-strength, 72px) * .18) color-mix(in srgb, var(--mp-line-color, #f39200) 16%, transparent);
}

.master-prozess-block .mp-progress-badge {
    margin-top: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .02em;
    color: color-mix(in srgb, var(--mp-title-color, #1d2630) 88%, #000 12%);
    background: color-mix(in srgb, var(--mp-line-color, #f39200) 10%, #ffffff 90%);
    border: 1px solid color-mix(in srgb, var(--mp-line-color, #f39200) 22%, transparent);
    box-shadow: 0 8px 18px rgba(0,0,0,0.06);
}

.master-prozess-block[data-layout-mobile="horizontal"] .mp-progress-badge,
.master-prozess-block[data-layout-tablet="horizontal"] .mp-progress-badge,
.master-prozess-block[data-layout-desktop="horizontal"] .mp-progress-badge {
    margin-left: auto;
    margin-right: auto;
}

.master-prozess-block.has-progress-badges .mp-content {
    padding-bottom: calc(var(--mp-card-padding, 12px) + 4px);
}

.master-prozess-block.has-level3-trace.has-scroll-progress .mp-items::after,
.master-prozess-block.has-level3-trace.has-sequential-focus.mp-has-observer[data-layout-mobile="horizontal"] .mp-items::after,
.master-prozess-block.has-level3-trace.has-sequential-focus.mp-has-observer[data-layout-tablet="horizontal"] .mp-items::after,
.master-prozess-block.has-level3-trace.has-sequential-focus.mp-has-observer[data-layout-desktop="horizontal"] .mp-items::after {
    opacity: 1;
    transition: transform .64s var(--mp-motion-ease, cubic-bezier(.22,1,.36,1)), opacity .3s ease;
}

.master-prozess-block.has-level3-trace .mp-content {
    transition:
        transform .42s var(--mp-motion-ease, cubic-bezier(.22,1,.36,1)),
        box-shadow .36s var(--mp-motion-ease, cubic-bezier(.22,1,.36,1)),
        background-color .32s ease,
        opacity .42s var(--mp-motion-ease, cubic-bezier(.22,1,.36,1)),
        filter .42s var(--mp-motion-ease, cubic-bezier(.22,1,.36,1));
}

.master-prozess-block.has-level3-trace .mp-marker {
    transition:
        transform .42s var(--mp-motion-ease, cubic-bezier(.22,1,.36,1)),
        box-shadow .38s var(--mp-motion-ease, cubic-bezier(.22,1,.36,1)),
        background-color .32s ease,
        color .32s ease,
        filter .38s var(--mp-motion-ease, cubic-bezier(.22,1,.36,1));
}


/* Level 4 glassmorphism */
.master-prozess-block.has-level4-glass {
    isolation: isolate;
}

.master-prozess-block.has-level4-glass .mp-content {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--mp-card-bg, #ffffff) 78%, rgba(255,255,255,0.82) 22%) 0%,
            color-mix(in srgb, var(--mp-card-bg, #ffffff) 62%, rgba(255,255,255,0.64) 38%) 100%);
    border: 1px solid rgba(255,255,255,0.56);
    backdrop-filter: blur(var(--mp-glass-blur, 18px)) saturate(145%);
    -webkit-backdrop-filter: blur(var(--mp-glass-blur, 18px)) saturate(145%);
    box-shadow:
        0 18px 48px rgba(15, 23, 42, 0.08),
        inset 0 1px 0 rgba(255,255,255,0.52),
        inset 0 -1px 0 rgba(255,255,255,0.18);
}

.master-prozess-block.has-level4-glass .mp-content::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(135deg,
            rgba(255,255,255,0.34) 0%,
            rgba(255,255,255,0.10) 34%,
            rgba(255,255,255,0.04) 60%,
            rgba(255,255,255,0.00) 100%);
    opacity: .9;
}

.master-prozess-block.has-level4-glass .mp-content > * {
    position: relative;
    z-index: 1;
}

.master-prozess-block.has-level4-glass.has-sequential-focus .mp-item.is-active .mp-content {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--mp-line-color, #f39200) 40%, rgba(255,255,255,0.72));
    box-shadow:
        0 24px 56px rgba(15, 23, 42, 0.12),
        0 0 0 1px color-mix(in srgb, var(--mp-line-color, #f39200) 20%, transparent),
        0 0 42px color-mix(in srgb, var(--mp-line-color, #f39200) 14%, transparent),
        inset 0 1px 0 rgba(255,255,255,0.56);
}

.master-prozess-block.has-level4-glass.has-sequential-focus .mp-item.is-complete .mp-content {
    border-color: color-mix(in srgb, var(--mp-line-color, #f39200) 18%, rgba(255,255,255,0.56));
}

.master-prozess-block.has-level4-glass.has-sequential-focus .mp-item.is-active .mp-title,
.master-prozess-block.has-level4-glass.has-sequential-focus .mp-item.is-active .mp-progress-badge {
    color: var(--mp-active-text-color, var(--mp-line-color, #f39200));
}

.master-prozess-block.has-level4-glass.has-sequential-focus .mp-item.is-active .mp-text {
    color: color-mix(in srgb, var(--mp-text-color, #606a76) 76%, var(--mp-active-text-color, #f39200) 24%);
}

.master-prozess-block.has-level4-glass .mp-progress-badge {
    background: color-mix(in srgb, var(--mp-line-color, #f39200) 16%, rgba(255,255,255,0.92));
    border: 1px solid color-mix(in srgb, var(--mp-line-color, #f39200) 22%, rgba(255,255,255,0.72));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.52);
}

@supports not ((backdrop-filter: blur(2px))) {
    .master-prozess-block.has-level4-glass .mp-content {
        background: color-mix(in srgb, var(--mp-card-bg, #ffffff) 86%, rgba(255,255,255,0.90) 14%);
    }
}

/* --------------------------------------------------------------------------
 * Master Prozess – Responsive Line Direction Fix
 * Fix: mobile/tablet/desktop layout selectors are now enforced per breakpoint.
 * This prevents the desktop/tablet horizontal connector from bleeding into the
 * mobile vertical layout.
 * -------------------------------------------------------------------------- */
@keyframes mpLineGrowVertical {
    from { opacity: .35; transform: scaleY(.35); transform-origin: top center; }
    to { opacity: 1; transform: scaleY(1); transform-origin: top center; }
}

@media (max-width: 781px) {
    .master-prozess-block[data-layout-mobile="vertical"] .mp-items {
        grid-template-columns: 1fr !important;
        align-items: stretch !important;
    }

    .master-prozess-block[data-layout-mobile="vertical"] .mp-items::before,
    .master-prozess-block[data-layout-mobile="vertical"] .mp-items::after,
    .master-prozess-block.has-sequential-focus[data-layout-mobile="vertical"] .mp-items::after,
    .master-prozess-block.has-sequential-focus.mp-has-observer[data-layout-mobile="vertical"] .mp-items::after {
        content: none !important;
        display: none !important;
    }

    .master-prozess-block[data-layout-mobile="vertical"] .mp-item {
        grid-template-columns: var(--mp-circle-size, 48px) minmax(0, 1fr) !important;
        align-items: start !important;
    }

    .master-prozess-block[data-layout-mobile="vertical"] .mp-marker-wrap {
        text-align: left !important;
    }

    .master-prozess-block[data-layout-mobile="vertical"] .mp-content {
        text-align: left !important;
        align-items: flex-start !important;
    }

    .master-prozess-block[data-layout-mobile="vertical"] .mp-title {
        min-height: 0 !important;
    }

    .master-prozess-block[data-layout-mobile="vertical"] .mp-text {
        max-width: none !important;
    }

    .master-prozess-block[data-layout-mobile="vertical"] .mp-item::before {
        content: '' !important;
        display: block !important;
        position: absolute !important;
        left: calc(var(--mp-circle-size, 48px) / 2 - var(--mp-connector-thickness, 4px) / 2) !important;
        top: calc(var(--mp-circle-size, 48px)) !important;
        bottom: calc(var(--mp-row-gap, 28px) * -1 + 4px) !important;
        width: var(--mp-connector-thickness, 4px) !important;
        height: auto !important;
        right: auto !important;
        background: var(--mp-line-color, #f39200) !important;
        z-index: 1 !important;
        border-radius: 999px !important;
    }

    .master-prozess-block.is-animated[data-layout-mobile="vertical"] .mp-item::before,
    .master-prozess-block.has-viewport-reveal.mp-has-observer.is-inview[data-layout-mobile="vertical"] .mp-item::before {
        animation: mpLineGrowVertical 1.1s ease both !important;
    }

    .master-prozess-block[data-layout-mobile="vertical"] .mp-item:last-child::before {
        display: none !important;
    }

    .master-prozess-block.has-sequential-focus.mp-has-observer[data-layout-mobile="vertical"] .mp-item::after {
        content: '' !important;
        display: block !important;
        position: absolute !important;
        left: calc(var(--mp-circle-size, 48px) / 2 - var(--mp-connector-thickness, 4px) / 2) !important;
        top: calc(var(--mp-circle-size, 48px)) !important;
        bottom: calc(var(--mp-row-gap, 28px) * -1 + 4px) !important;
        width: var(--mp-connector-thickness, 4px) !important;
        height: auto !important;
        right: auto !important;
        background: linear-gradient(180deg, color-mix(in srgb, var(--mp-line-color, #f39200) 70%, #ffffff 30%) 0%, var(--mp-line-color, #f39200) 100%) !important;
        z-index: 1 !important;
        opacity: 0;
        transform-origin: top center !important;
        transform: scaleY(0);
        border-radius: 999px !important;
    }

    .master-prozess-block.has-sequential-focus.mp-has-observer[data-layout-mobile="vertical"] .mp-item:last-child::after {
        display: none !important;
    }

    .master-prozess-block.has-sequential-focus.mp-has-observer.is-inview[data-layout-mobile="vertical"] .mp-item.is-complete::after {
        opacity: 1 !important;
        transform: scaleY(1) !important;
    }

    .master-prozess-block[data-layout-mobile="horizontal"] .mp-items {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        --mp-columns: 2;
        align-items: start !important;
    }

    .master-prozess-block[data-layout-mobile="horizontal"] .mp-items::before {
        content: '' !important;
        display: block !important;
        left: calc((100% / (var(--mp-columns, 2) * 2))) !important;
        right: calc((100% / (var(--mp-columns, 2) * 2))) !important;
        top: calc(var(--mp-circle-size, 48px) / 2 - var(--mp-connector-thickness, 4px) / 2) !important;
        height: var(--mp-connector-thickness, 4px) !important;
        width: auto !important;
        bottom: auto !important;
    }

    .master-prozess-block[data-layout-mobile="horizontal"] .mp-item {
        grid-template-columns: 1fr !important;
    }

    .master-prozess-block[data-layout-mobile="horizontal"] .mp-item::before,
    .master-prozess-block[data-layout-mobile="horizontal"] .mp-item::after {
        content: none !important;
        display: none !important;
    }
}

@media (min-width: 782px) and (max-width: 1023px) {
    .master-prozess-block[data-layout-tablet="vertical"] .mp-items {
        grid-template-columns: 1fr !important;
        align-items: stretch !important;
    }

    .master-prozess-block[data-layout-tablet="vertical"] .mp-items::before,
    .master-prozess-block[data-layout-tablet="vertical"] .mp-items::after,
    .master-prozess-block.has-sequential-focus[data-layout-tablet="vertical"] .mp-items::after,
    .master-prozess-block.has-sequential-focus.mp-has-observer[data-layout-tablet="vertical"] .mp-items::after {
        content: none !important;
        display: none !important;
    }

    .master-prozess-block[data-layout-tablet="vertical"] .mp-item {
        grid-template-columns: var(--mp-circle-size, 48px) minmax(0, 1fr) !important;
        align-items: start !important;
    }

    .master-prozess-block[data-layout-tablet="vertical"] .mp-marker-wrap {
        text-align: left !important;
    }

    .master-prozess-block[data-layout-tablet="vertical"] .mp-content {
        text-align: left !important;
        align-items: flex-start !important;
    }

    .master-prozess-block[data-layout-tablet="vertical"] .mp-text {
        max-width: none !important;
    }

    .master-prozess-block[data-layout-tablet="vertical"] .mp-item::before {
        content: '' !important;
        display: block !important;
        position: absolute !important;
        left: calc(var(--mp-circle-size, 48px) / 2 - var(--mp-connector-thickness, 4px) / 2) !important;
        top: calc(var(--mp-circle-size, 48px)) !important;
        bottom: calc(var(--mp-row-gap, 28px) * -1 + 4px) !important;
        width: var(--mp-connector-thickness, 4px) !important;
        height: auto !important;
        right: auto !important;
        background: var(--mp-line-color, #f39200) !important;
        z-index: 1 !important;
        border-radius: 999px !important;
    }

    .master-prozess-block.is-animated[data-layout-tablet="vertical"] .mp-item::before,
    .master-prozess-block.has-viewport-reveal.mp-has-observer.is-inview[data-layout-tablet="vertical"] .mp-item::before {
        animation: mpLineGrowVertical 1.1s ease both !important;
    }

    .master-prozess-block[data-layout-tablet="vertical"] .mp-item:last-child::before {
        display: none !important;
    }

    .master-prozess-block.has-sequential-focus.mp-has-observer[data-layout-tablet="vertical"] .mp-item::after {
        content: '' !important;
        display: block !important;
        position: absolute !important;
        left: calc(var(--mp-circle-size, 48px) / 2 - var(--mp-connector-thickness, 4px) / 2) !important;
        top: calc(var(--mp-circle-size, 48px)) !important;
        bottom: calc(var(--mp-row-gap, 28px) * -1 + 4px) !important;
        width: var(--mp-connector-thickness, 4px) !important;
        height: auto !important;
        right: auto !important;
        background: linear-gradient(180deg, color-mix(in srgb, var(--mp-line-color, #f39200) 70%, #ffffff 30%) 0%, var(--mp-line-color, #f39200) 100%) !important;
        z-index: 1 !important;
        opacity: 0;
        transform-origin: top center !important;
        transform: scaleY(0);
        border-radius: 999px !important;
    }

    .master-prozess-block.has-sequential-focus.mp-has-observer[data-layout-tablet="vertical"] .mp-item:last-child::after {
        display: none !important;
    }

    .master-prozess-block.has-sequential-focus.mp-has-observer.is-inview[data-layout-tablet="vertical"] .mp-item.is-complete::after {
        opacity: 1 !important;
        transform: scaleY(1) !important;
    }

    .master-prozess-block[data-layout-tablet="horizontal"] .mp-items {
        grid-template-columns: repeat(var(--mp-columns, 4), minmax(0, 1fr)) !important;
        align-items: start !important;
    }

    .master-prozess-block[data-layout-tablet="horizontal"] .mp-items::before {
        content: '' !important;
        display: block !important;
        left: calc((100% / (var(--mp-columns, 4) * 2))) !important;
        right: calc((100% / (var(--mp-columns, 4) * 2))) !important;
        top: calc(var(--mp-circle-size, 48px) / 2 - var(--mp-connector-thickness, 4px) / 2) !important;
        height: var(--mp-connector-thickness, 4px) !important;
        width: auto !important;
        bottom: auto !important;
    }

    .master-prozess-block[data-layout-tablet="horizontal"] .mp-item {
        grid-template-columns: 1fr !important;
    }

    .master-prozess-block[data-layout-tablet="horizontal"] .mp-item::before,
    .master-prozess-block[data-layout-tablet="horizontal"] .mp-item::after {
        content: none !important;
        display: none !important;
    }
}

@media (min-width: 1024px) {
    .master-prozess-block[data-layout-desktop="vertical"] .mp-items {
        grid-template-columns: 1fr !important;
        align-items: stretch !important;
    }

    .master-prozess-block[data-layout-desktop="vertical"] .mp-items::before,
    .master-prozess-block[data-layout-desktop="vertical"] .mp-items::after,
    .master-prozess-block.has-sequential-focus[data-layout-desktop="vertical"] .mp-items::after,
    .master-prozess-block.has-sequential-focus.mp-has-observer[data-layout-desktop="vertical"] .mp-items::after {
        content: none !important;
        display: none !important;
    }

    .master-prozess-block[data-layout-desktop="vertical"] .mp-item {
        grid-template-columns: var(--mp-circle-size, 48px) minmax(0, 1fr) !important;
        align-items: start !important;
    }

    .master-prozess-block[data-layout-desktop="vertical"] .mp-marker-wrap {
        text-align: left !important;
    }

    .master-prozess-block[data-layout-desktop="vertical"] .mp-content {
        text-align: left !important;
        align-items: flex-start !important;
    }

    .master-prozess-block[data-layout-desktop="vertical"] .mp-text {
        max-width: none !important;
    }

    .master-prozess-block[data-layout-desktop="vertical"] .mp-item::before {
        content: '' !important;
        display: block !important;
        position: absolute !important;
        left: calc(var(--mp-circle-size, 48px) / 2 - var(--mp-connector-thickness, 4px) / 2) !important;
        top: calc(var(--mp-circle-size, 48px)) !important;
        bottom: calc(var(--mp-row-gap, 28px) * -1 + 4px) !important;
        width: var(--mp-connector-thickness, 4px) !important;
        height: auto !important;
        right: auto !important;
        background: var(--mp-line-color, #f39200) !important;
        z-index: 1 !important;
        border-radius: 999px !important;
    }

    .master-prozess-block.is-animated[data-layout-desktop="vertical"] .mp-item::before,
    .master-prozess-block.has-viewport-reveal.mp-has-observer.is-inview[data-layout-desktop="vertical"] .mp-item::before {
        animation: mpLineGrowVertical 1.1s ease both !important;
    }

    .master-prozess-block[data-layout-desktop="vertical"] .mp-item:last-child::before {
        display: none !important;
    }

    .master-prozess-block.has-sequential-focus.mp-has-observer[data-layout-desktop="vertical"] .mp-item::after {
        content: '' !important;
        display: block !important;
        position: absolute !important;
        left: calc(var(--mp-circle-size, 48px) / 2 - var(--mp-connector-thickness, 4px) / 2) !important;
        top: calc(var(--mp-circle-size, 48px)) !important;
        bottom: calc(var(--mp-row-gap, 28px) * -1 + 4px) !important;
        width: var(--mp-connector-thickness, 4px) !important;
        height: auto !important;
        right: auto !important;
        background: linear-gradient(180deg, color-mix(in srgb, var(--mp-line-color, #f39200) 70%, #ffffff 30%) 0%, var(--mp-line-color, #f39200) 100%) !important;
        z-index: 1 !important;
        opacity: 0;
        transform-origin: top center !important;
        transform: scaleY(0);
        border-radius: 999px !important;
    }

    .master-prozess-block.has-sequential-focus.mp-has-observer[data-layout-desktop="vertical"] .mp-item:last-child::after {
        display: none !important;
    }

    .master-prozess-block.has-sequential-focus.mp-has-observer.is-inview[data-layout-desktop="vertical"] .mp-item.is-complete::after {
        opacity: 1 !important;
        transform: scaleY(1) !important;
    }

    .master-prozess-block[data-layout-desktop="horizontal"] .mp-items {
        grid-template-columns: repeat(var(--mp-columns, 4), minmax(0, 1fr)) !important;
        align-items: start !important;
    }

    .master-prozess-block[data-layout-desktop="horizontal"] .mp-items::before {
        content: '' !important;
        display: block !important;
        left: calc((100% / (var(--mp-columns, 4) * 2))) !important;
        right: calc((100% / (var(--mp-columns, 4) * 2))) !important;
        top: calc(var(--mp-circle-size, 48px) / 2 - var(--mp-connector-thickness, 4px) / 2) !important;
        height: var(--mp-connector-thickness, 4px) !important;
        width: auto !important;
        bottom: auto !important;
    }

    .master-prozess-block[data-layout-desktop="horizontal"] .mp-item {
        grid-template-columns: 1fr !important;
    }

    .master-prozess-block[data-layout-desktop="horizontal"] .mp-item::before,
    .master-prozess-block[data-layout-desktop="horizontal"] .mp-item::after {
        content: none !important;
        display: none !important;
    }
}