/*
 * Master Prozess 1.9.0
 * Konsolidierte Frontend-Styles für Timeline- und Angebotsvorlagen.
 */

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

.master-prozess-block {
    --mp-progress: 1;
    --mp-line-color: #f39200;
    --mp-circle-bg: #000;
    --mp-circle-text: #fff;
    --mp-title-color: #1d2630;
    --mp-text-color: #606a76;
    --mp-bg: #f7f8fb;
    --mp-card-bg: transparent;
    --mp-max-width: 1280px;
    --mp-circle-size: 48px;
    --mp-connector-thickness: 4px;
    --mp-card-radius: 18px;
    --mp-column-gap: 24px;
    --mp-row-gap: 28px;
    --mp-padding-y: 30px;
    --mp-padding-x: 30px;
    --mp-title-min-height: 72px;
    --mp-card-padding: 12px;
    --mp-stagger-step: 140ms;
    --mp-active-hold: 700ms;
    --mp-columns: 4;
    --mp-glow-strength: 72px;
    --mp-glass-blur: 18px;
    --mp-active-text-color: var(--mp-line-color);
    --mp-motion-ease: cubic-bezier(.22, 1, .36, 1);

    position: relative;
    z-index: 0;
    width: 100%;
    padding: var(--mp-padding-y) var(--mp-padding-x);
    background: var(--mp-bg);
    color: var(--mp-text-color);
    isolation: isolate;
}

.master-prozess-block .mp-inner {
    position: relative;
    width: min(100%, var(--mp-max-width));
    margin-inline: auto;
}

.master-prozess-block .mp-items {
    position: relative;
    margin: 0;
    padding: 0;
}

.master-prozess-block .mp-item {
    position: relative;
    min-width: 0;
}

.master-prozess-block .mp-marker-wrap {
    position: relative;
    z-index: 2;
    display: flex;
}

.master-prozess-block .mp-marker {
    position: relative;
    z-index: 3;
    display: inline-flex;
    flex: 0 0 var(--mp-circle-size);
    align-items: center;
    justify-content: center;
    width: var(--mp-circle-size);
    height: var(--mp-circle-size);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    background: var(--mp-circle-bg);
    color: var(--mp-circle-text);
    box-shadow: 0 10px 25px rgba(18, 31, 48, .16);
    font-size: clamp(14px, calc(var(--mp-circle-size) * .34), 22px);
    font-weight: 750;
    line-height: 1;
    text-align: center;
    transition:
        transform 320ms var(--mp-motion-ease),
        background-color 320ms ease,
        color 320ms ease,
        box-shadow 320ms ease;
}

.master-prozess-block .mp-marker-icon,
.master-prozess-block .mp-offer-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    font-size: clamp(18px, calc(var(--mp-circle-size) * .46), 30px);
    line-height: 1;
}

.master-prozess-block .mp-content {
    position: relative;
    min-width: 0;
    padding: var(--mp-card-padding);
    border: 1px solid rgba(23, 39, 60, .09);
    border-radius: var(--mp-card-radius);
    background: var(--mp-card-bg);
    box-shadow: 0 12px 34px rgba(20, 34, 52, .04);
    transition:
        transform 360ms var(--mp-motion-ease),
        border-color 280ms ease,
        box-shadow 360ms var(--mp-motion-ease),
        background-color 280ms ease,
        opacity 300ms ease;
}

.master-prozess-block .mp-title {
    min-height: var(--mp-title-min-height);
    margin: 0;
    color: var(--mp-title-color);
    font-size: var(--mp-title-size, clamp(18px, 1.35vw, 23px));
    font-weight: 740;
    line-height: 1.25;
    letter-spacing: -.015em;
    overflow-wrap: anywhere;
    transition: color 260ms ease;
}

.master-prozess-block .mp-text {
    margin: 10px 0 0;
    color: var(--mp-text-color);
    font-size: var(--mp-text-size, clamp(14px, .95vw, 16px));
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.master-prozess-block .mp-text a {
    color: inherit;
    text-decoration-thickness: .08em;
    text-underline-offset: .18em;
}

.master-prozess-block .mp-progress-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    margin-top: 18px;
    padding: 7px 12px;
    border: 1px solid color-mix(in srgb, var(--mp-line-color) 24%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--mp-line-color) 10%, transparent);
    color: var(--mp-title-color);
    font-size: 12px;
    font-weight: 750;
    line-height: 1;
    letter-spacing: .035em;
}

/* Verbindungslinien werden pro Schritt gezeichnet. Dadurch bleiben sie auch
   bei vielen Schritten und horizontalem Scrollen korrekt ausgerichtet. */
.master-prozess-block:not(.is-template-offer) .mp-item:not(:last-child) .mp-marker-wrap::after,
.master-prozess-block:not(.is-template-offer) .mp-item:not(:last-child) .mp-marker-wrap::before {
    content: "";
    position: absolute;
    z-index: 1;
    display: block;
    border-radius: 999px;
    pointer-events: none;
}

.master-prozess-block:not(.is-template-offer) .mp-item:not(:last-child) .mp-marker-wrap::after {
    background: rgba(22, 39, 61, .14);
    background: color-mix(in srgb, var(--mp-line-color) 20%, transparent);
}

.master-prozess-block:not(.is-template-offer) .mp-item:not(:last-child) .mp-marker-wrap::before {
    z-index: 2;
    background: var(--mp-line-color);
    box-shadow: 0 0 16px color-mix(in srgb, var(--mp-line-color) 30%, transparent);
    transform-origin: left center;
    transition: transform 520ms var(--mp-motion-ease);
}

.master-prozess-block:not(.is-template-offer) .mp-item:not(:last-child).is-active .mp-marker-wrap::before {
    transform: scaleX(.52);
}

.master-prozess-block:not(.is-template-offer) .mp-item:not(:last-child).is-complete .mp-marker-wrap::before {
    transform: scaleX(1);
}

.master-prozess-block .mp-item.is-active .mp-marker {
    background: var(--mp-line-color);
    color: var(--mp-circle-text);
    box-shadow:
        0 0 0 7px color-mix(in srgb, var(--mp-line-color) 13%, transparent),
        0 14px 30px color-mix(in srgb, var(--mp-line-color) 30%, transparent);
    transform: translateY(-2px) scale(1.08);
}

.master-prozess-block .mp-item.is-complete .mp-marker {
    border-color: color-mix(in srgb, var(--mp-line-color) 45%, transparent);
    box-shadow: 0 9px 24px rgba(18, 31, 48, .12);
}

.master-prozess-block .mp-item.is-active .mp-title {
    color: var(--mp-active-text-color);
}

.master-prozess-block.has-level3-trace .mp-item.is-active .mp-marker::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: calc(var(--mp-glow-strength) * -.42);
    border-radius: inherit;
    background: radial-gradient(circle, color-mix(in srgb, var(--mp-line-color) 28%, transparent), transparent 68%);
    pointer-events: none;
}

.master-prozess-block.has-level4-glass:not(.is-template-offer) .mp-content {
    border-color: rgba(255, 255, 255, .52);
    background: rgba(255, 255, 255, .44);
    background: color-mix(in srgb, var(--mp-bg) 64%, rgba(255, 255, 255, .5));
    box-shadow:
        0 18px 42px rgba(24, 38, 55, .08),
        inset 0 1px 0 rgba(255, 255, 255, .62);
    -webkit-backdrop-filter: blur(var(--mp-glass-blur));
    backdrop-filter: blur(var(--mp-glass-blur));
}

.master-prozess-block.is-hover-enabled .mp-item:hover .mp-content {
    border-color: color-mix(in srgb, var(--mp-line-color) 28%, transparent);
    box-shadow: 0 22px 48px rgba(20, 34, 52, .12);
    transform: translateY(-6px);
}

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

/* Angebotsvorlage */
.master-prozess-block.is-template-offer {
    --mp-offer-arrow-color: #193764;
    --mp-offer-icon-color: #3979c4;
    --mp-offer-line-color: #e5e9f0;
    --mp-offer-surface-color: #fff;
}

.master-prozess-block.is-template-offer .mp-section-title {
    max-width: 980px;
    margin: 0 auto clamp(34px, 5vw, 66px);
    color: var(--mp-title-color);
    font-size: var(--mp-section-title-size, clamp(28px, 3.1vw, 52px));
    font-weight: 760;
    line-height: 1.12;
    letter-spacing: -.035em;
    text-align: center;
    text-wrap: balance;
}

.master-prozess-block.is-template-offer .mp-offer-item {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    padding: clamp(24px, 2.6vw, 38px);
    border: 1px solid var(--mp-offer-line-color);
    border-radius: var(--mp-card-radius);
    background: var(--mp-card-bg, #fff);
    box-shadow: 0 18px 48px rgba(24, 42, 66, .07);
    text-align: center;
    transition:
        transform 380ms var(--mp-motion-ease),
        border-color 280ms ease,
        box-shadow 380ms var(--mp-motion-ease);
}

.master-prozess-block.is-template-offer .mp-offer-visuals {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: calc(var(--mp-circle-size) + 38px);
    margin-bottom: 22px;
}

.master-prozess-block.is-template-offer .mp-offer-number {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--mp-circle-size) + 38px);
    height: calc(var(--mp-circle-size) + 38px);
    border: 1px solid var(--mp-offer-line-color);
    background: var(--mp-offer-surface-color);
    color: var(--mp-circle-bg);
    box-shadow: 0 12px 30px rgba(25, 55, 100, .08);
    font-size: clamp(13px, calc(var(--mp-circle-size) * .32), 18px);
    transform: translate(-50%, -50%);
}

.master-prozess-block.is-template-offer .mp-offer-icon {
    position: relative;
    z-index: 4;
    color: var(--mp-offer-icon-color);
    font-size: clamp(22px, calc(var(--mp-circle-size) * .55), 34px);
}

.master-prozess-block.is-template-offer[data-offer-show-icons="false"] .mp-offer-number {
    position: relative;
    top: auto;
    left: auto;
    width: calc(var(--mp-circle-size) + 18px);
    height: calc(var(--mp-circle-size) + 18px);
    transform: none;
}

.master-prozess-block.is-template-offer .mp-content {
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.master-prozess-block.is-template-offer .mp-title {
    min-height: 0;
    color: var(--mp-title-color);
    text-align: center;
}

.master-prozess-block.is-template-offer .mp-text {
    max-width: 42ch;
    margin: 12px auto 0;
    text-align: center;
}

.master-prozess-block.is-template-offer .mp-offer-arrow {
    position: absolute;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--mp-offer-line-color);
    border-radius: 999px;
    background: var(--mp-offer-surface-color);
    color: var(--mp-offer-arrow-color);
    box-shadow: 0 10px 24px rgba(24, 42, 66, .08);
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
}

.master-prozess-block.is-template-offer.is-hover-enabled .mp-offer-item:hover {
    border-color: color-mix(in srgb, var(--mp-offer-icon-color) 36%, var(--mp-offer-line-color));
    box-shadow: 0 24px 58px rgba(24, 42, 66, .13);
    transform: translateY(-7px);
}

.master-prozess-block.is-template-offer .mp-item.is-active {
    border-color: color-mix(in srgb, var(--mp-offer-icon-color) 48%, var(--mp-offer-line-color));
    box-shadow: 0 24px 58px rgba(24, 42, 66, .13);
}

.master-prozess-block.is-template-offer .mp-item.is-active .mp-offer-number {
    background: var(--mp-circle-bg);
    color: var(--mp-circle-text);
}

/* JavaScript-gestützte Animationen: Ohne JS bleiben alle Inhalte sichtbar. */
.master-prozess-block.mp-js-ready.is-animated.has-viewport-reveal:not(.is-inview) .mp-item {
    opacity: 0;
    transform: translateY(26px);
}

.master-prozess-block.mp-js-ready.is-animated.is-inview .mp-item {
    animation: mp-item-reveal 720ms var(--mp-motion-ease) both;
    animation-delay: calc(var(--mp-index, 0) * var(--mp-stagger-step));
}

.master-prozess-block.mp-text-sync-active .mp-content {
    visibility: hidden;
    opacity: 0;
    transform: translateY(10px);
}

.master-prozess-block.mp-text-sync-active .mp-item.is-active .mp-content,
.master-prozess-block.mp-text-sync-active .mp-item.is-complete .mp-content {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

@keyframes mp-item-reveal {
    from {
        opacity: 0;
        transform: translateY(26px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Desktop */
@media (min-width: 1200px) {
    .master-prozess-block:not(.is-template-offer)[data-layout-desktop="horizontal"] .mp-inner {
        overflow-x: auto;
        overflow-y: visible;
        padding-bottom: 10px;
        scrollbar-width: thin;
        scrollbar-color: color-mix(in srgb, var(--mp-line-color) 34%, transparent) transparent;
    }

    .master-prozess-block:not(.is-template-offer)[data-layout-desktop="horizontal"] .mp-items {
        display: grid;
        grid-template-columns: repeat(var(--mp-columns), minmax(180px, 1fr));
        gap: var(--mp-column-gap);
        min-width: 100%;
    }

    .master-prozess-block:not(.is-template-offer)[data-layout-desktop="horizontal"] .mp-marker-wrap {
        align-items: center;
        justify-content: center;
        height: var(--mp-circle-size);
    }

    .master-prozess-block:not(.is-template-offer)[data-layout-desktop="horizontal"] .mp-content {
        margin-top: 22px;
        text-align: center;
    }

    .master-prozess-block:not(.is-template-offer)[data-layout-desktop="horizontal"] .mp-item:not(:last-child) .mp-marker-wrap::after,
    .master-prozess-block:not(.is-template-offer)[data-layout-desktop="horizontal"] .mp-item:not(:last-child) .mp-marker-wrap::before {
        top: 50%;
        left: 50%;
        width: calc(100% + var(--mp-column-gap));
        height: var(--mp-connector-thickness);
        transform: translateY(-50%) scaleX(0);
    }

    .master-prozess-block:not(.is-template-offer)[data-layout-desktop="horizontal"] .mp-item:not(:last-child) .mp-marker-wrap::after {
        transform: translateY(-50%) scaleX(1);
    }

    .master-prozess-block:not(.is-template-offer)[data-layout-desktop="horizontal"] .mp-item:not(:last-child).is-active .mp-marker-wrap::before {
        transform: translateY(-50%) scaleX(.52);
    }

    .master-prozess-block:not(.is-template-offer)[data-layout-desktop="horizontal"] .mp-item:not(:last-child).is-complete .mp-marker-wrap::before {
        transform: translateY(-50%) scaleX(1);
    }

    .master-prozess-block:not(.is-template-offer)[data-layout-desktop="vertical"] .mp-items {
        display: flex;
        flex-direction: column;
        gap: var(--mp-row-gap);
    }

    .master-prozess-block:not(.is-template-offer)[data-layout-desktop="vertical"] .mp-item {
        display: grid;
        grid-template-columns: var(--mp-circle-size) minmax(0, 1fr);
        gap: clamp(18px, 2.5vw, 34px);
        align-items: stretch;
    }

    .master-prozess-block:not(.is-template-offer)[data-layout-desktop="vertical"] .mp-marker-wrap {
        align-items: flex-start;
        justify-content: center;
        min-height: 100%;
    }

    .master-prozess-block:not(.is-template-offer)[data-layout-desktop="vertical"] .mp-content {
        text-align: left;
    }

    .master-prozess-block:not(.is-template-offer)[data-layout-desktop="vertical"] .mp-title {
        min-height: 0;
    }

    .master-prozess-block:not(.is-template-offer)[data-layout-desktop="vertical"] .mp-item:not(:last-child) .mp-marker-wrap::after,
    .master-prozess-block:not(.is-template-offer)[data-layout-desktop="vertical"] .mp-item:not(:last-child) .mp-marker-wrap::before {
        top: calc(var(--mp-circle-size) / 2);
        left: 50%;
        width: var(--mp-connector-thickness);
        height: calc(100% + var(--mp-row-gap));
        transform: translateX(-50%) scaleY(0);
        transform-origin: center top;
    }

    .master-prozess-block:not(.is-template-offer)[data-layout-desktop="vertical"] .mp-item:not(:last-child) .mp-marker-wrap::after {
        transform: translateX(-50%) scaleY(1);
    }

    .master-prozess-block:not(.is-template-offer)[data-layout-desktop="vertical"] .mp-item:not(:last-child).is-active .mp-marker-wrap::before {
        transform: translateX(-50%) scaleY(.52);
    }

    .master-prozess-block:not(.is-template-offer)[data-layout-desktop="vertical"] .mp-item:not(:last-child).is-complete .mp-marker-wrap::before {
        transform: translateX(-50%) scaleY(1);
    }

    .master-prozess-block.is-template-offer[data-layout-desktop="horizontal"] .mp-offer-items {
        display: grid;
        grid-template-columns: repeat(var(--mp-desktop-columns, var(--mp-columns)), minmax(0, 1fr));
        gap: clamp(34px, 4vw, 72px);
    }

    .master-prozess-block.is-template-offer[data-layout-desktop="horizontal"] .mp-offer-arrow {
        top: 50%;
        right: clamp(-57px, -2.8vw, -28px);
        transform: translateY(-50%);
    }

    .master-prozess-block.is-template-offer[data-layout-desktop="vertical"] .mp-offer-items {
        display: flex;
        flex-direction: column;
        gap: var(--mp-row-gap);
    }

    .master-prozess-block.is-template-offer[data-layout-desktop="vertical"] .mp-offer-item {
        display: grid;
        grid-template-columns: 130px minmax(0, 1fr);
        align-items: center;
        text-align: left;
    }

    .master-prozess-block.is-template-offer[data-layout-desktop="vertical"] .mp-offer-visuals {
        margin: 0;
    }

    .master-prozess-block.is-template-offer[data-layout-desktop="vertical"] .mp-title,
    .master-prozess-block.is-template-offer[data-layout-desktop="vertical"] .mp-text {
        max-width: none;
        text-align: left;
    }

    .master-prozess-block.is-template-offer[data-layout-desktop="vertical"] .mp-offer-arrow {
        bottom: calc(var(--mp-row-gap) * -.5 - 21px);
        left: 50%;
        transform: translateX(-50%) rotate(90deg);
    }
}

/* Tablet und typische 14-Zoll-Ansichten */
@media (min-width: 768px) and (max-width: 1199px) {
    .master-prozess-block {
        padding-inline: min(var(--mp-padding-x), 28px);
    }

    .master-prozess-block:not(.is-template-offer)[data-layout-tablet="horizontal"] .mp-inner {
        overflow-x: auto;
        padding-bottom: 10px;
        scrollbar-width: thin;
    }

    .master-prozess-block:not(.is-template-offer)[data-layout-tablet="horizontal"] .mp-items {
        display: grid;
        grid-template-columns: repeat(var(--mp-columns), minmax(210px, 1fr));
        gap: var(--mp-column-gap);
    }

    .master-prozess-block:not(.is-template-offer)[data-layout-tablet="horizontal"] .mp-marker-wrap {
        align-items: center;
        justify-content: center;
        height: var(--mp-circle-size);
    }

    .master-prozess-block:not(.is-template-offer)[data-layout-tablet="horizontal"] .mp-content {
        margin-top: 20px;
        text-align: center;
    }

    .master-prozess-block:not(.is-template-offer)[data-layout-tablet="horizontal"] .mp-item:not(:last-child) .mp-marker-wrap::after,
    .master-prozess-block:not(.is-template-offer)[data-layout-tablet="horizontal"] .mp-item:not(:last-child) .mp-marker-wrap::before {
        top: 50%;
        left: 50%;
        width: calc(100% + var(--mp-column-gap));
        height: var(--mp-connector-thickness);
        transform: translateY(-50%) scaleX(0);
    }

    .master-prozess-block:not(.is-template-offer)[data-layout-tablet="horizontal"] .mp-item:not(:last-child) .mp-marker-wrap::after {
        transform: translateY(-50%) scaleX(1);
    }

    .master-prozess-block:not(.is-template-offer)[data-layout-tablet="horizontal"] .mp-item:not(:last-child).is-active .mp-marker-wrap::before {
        transform: translateY(-50%) scaleX(.52);
    }

    .master-prozess-block:not(.is-template-offer)[data-layout-tablet="horizontal"] .mp-item:not(:last-child).is-complete .mp-marker-wrap::before {
        transform: translateY(-50%) scaleX(1);
    }

    .master-prozess-block:not(.is-template-offer)[data-layout-tablet="vertical"] .mp-items {
        display: flex;
        flex-direction: column;
        gap: var(--mp-row-gap);
    }

    .master-prozess-block:not(.is-template-offer)[data-layout-tablet="vertical"] .mp-item {
        display: grid;
        grid-template-columns: var(--mp-circle-size) minmax(0, 1fr);
        gap: 22px;
        align-items: stretch;
    }

    .master-prozess-block:not(.is-template-offer)[data-layout-tablet="vertical"] .mp-marker-wrap {
        align-items: flex-start;
        justify-content: center;
        min-height: 100%;
    }

    .master-prozess-block:not(.is-template-offer)[data-layout-tablet="vertical"] .mp-title {
        min-height: 0;
    }

    .master-prozess-block:not(.is-template-offer)[data-layout-tablet="vertical"] .mp-item:not(:last-child) .mp-marker-wrap::after,
    .master-prozess-block:not(.is-template-offer)[data-layout-tablet="vertical"] .mp-item:not(:last-child) .mp-marker-wrap::before {
        top: calc(var(--mp-circle-size) / 2);
        left: 50%;
        width: var(--mp-connector-thickness);
        height: calc(100% + var(--mp-row-gap));
        transform: translateX(-50%) scaleY(0);
        transform-origin: center top;
    }

    .master-prozess-block:not(.is-template-offer)[data-layout-tablet="vertical"] .mp-item:not(:last-child) .mp-marker-wrap::after {
        transform: translateX(-50%) scaleY(1);
    }

    .master-prozess-block:not(.is-template-offer)[data-layout-tablet="vertical"] .mp-item:not(:last-child).is-active .mp-marker-wrap::before {
        transform: translateX(-50%) scaleY(.52);
    }

    .master-prozess-block:not(.is-template-offer)[data-layout-tablet="vertical"] .mp-item:not(:last-child).is-complete .mp-marker-wrap::before {
        transform: translateX(-50%) scaleY(1);
    }

    .master-prozess-block.is-template-offer[data-layout-tablet="horizontal"] .mp-inner {
        overflow-x: auto;
        padding-bottom: 12px;
    }

    .master-prozess-block.is-template-offer[data-layout-tablet="horizontal"] .mp-offer-items {
        display: grid;
        grid-template-columns: repeat(var(--mp-columns), minmax(250px, 1fr));
        gap: 48px;
    }

    .master-prozess-block.is-template-offer[data-layout-tablet="horizontal"] .mp-offer-arrow {
        top: 50%;
        right: -45px;
        transform: translateY(-50%);
    }

    .master-prozess-block.is-template-offer[data-layout-tablet="vertical"] .mp-offer-items {
        display: flex;
        flex-direction: column;
        gap: var(--mp-row-gap);
    }

    .master-prozess-block.is-template-offer[data-layout-tablet="vertical"] .mp-offer-item {
        display: grid;
        grid-template-columns: 118px minmax(0, 1fr);
        align-items: center;
        text-align: left;
    }

    .master-prozess-block.is-template-offer[data-layout-tablet="vertical"] .mp-offer-visuals {
        margin: 0;
    }

    .master-prozess-block.is-template-offer[data-layout-tablet="vertical"] .mp-title,
    .master-prozess-block.is-template-offer[data-layout-tablet="vertical"] .mp-text {
        max-width: none;
        text-align: left;
    }

    .master-prozess-block.is-template-offer[data-layout-tablet="vertical"] .mp-offer-arrow {
        bottom: calc(var(--mp-row-gap) * -.5 - 21px);
        left: 50%;
        transform: translateX(-50%) rotate(90deg);
    }
}

/* Smartphone */
@media (max-width: 767px) {
    .master-prozess-block {
        padding: min(var(--mp-padding-y), 34px) min(var(--mp-padding-x), 18px);
    }

    .master-prozess-block .mp-title {
        font-size: min(var(--mp-title-size, 20px), 24px);
    }

    .master-prozess-block .mp-text {
        font-size: min(var(--mp-text-size, 15px), 18px);
    }

    .master-prozess-block:not(.is-template-offer)[data-layout-mobile="vertical"] .mp-items,
    .master-prozess-block:not(.is-template-offer):not([data-layout-mobile="horizontal"]) .mp-items {
        display: flex;
        flex-direction: column;
        gap: var(--mp-row-gap);
    }

    .master-prozess-block:not(.is-template-offer)[data-layout-mobile="vertical"] .mp-item,
    .master-prozess-block:not(.is-template-offer):not([data-layout-mobile="horizontal"]) .mp-item {
        display: grid;
        grid-template-columns: var(--mp-circle-size) minmax(0, 1fr);
        gap: 16px;
        align-items: stretch;
    }

    .master-prozess-block:not(.is-template-offer)[data-layout-mobile="vertical"] .mp-marker-wrap,
    .master-prozess-block:not(.is-template-offer):not([data-layout-mobile="horizontal"]) .mp-marker-wrap {
        align-items: flex-start;
        justify-content: center;
        min-height: 100%;
    }

    .master-prozess-block:not(.is-template-offer)[data-layout-mobile="vertical"] .mp-title,
    .master-prozess-block:not(.is-template-offer):not([data-layout-mobile="horizontal"]) .mp-title {
        min-height: 0;
    }

    .master-prozess-block:not(.is-template-offer)[data-layout-mobile="vertical"] .mp-content,
    .master-prozess-block:not(.is-template-offer):not([data-layout-mobile="horizontal"]) .mp-content {
        padding: min(var(--mp-card-padding), 18px);
        text-align: left;
    }

    .master-prozess-block:not(.is-template-offer)[data-layout-mobile="vertical"] .mp-item:not(:last-child) .mp-marker-wrap::after,
    .master-prozess-block:not(.is-template-offer)[data-layout-mobile="vertical"] .mp-item:not(:last-child) .mp-marker-wrap::before,
    .master-prozess-block:not(.is-template-offer):not([data-layout-mobile="horizontal"]) .mp-item:not(:last-child) .mp-marker-wrap::after,
    .master-prozess-block:not(.is-template-offer):not([data-layout-mobile="horizontal"]) .mp-item:not(:last-child) .mp-marker-wrap::before {
        top: calc(var(--mp-circle-size) / 2);
        left: 50%;
        width: var(--mp-connector-thickness);
        height: calc(100% + var(--mp-row-gap));
        transform: translateX(-50%) scaleY(0);
        transform-origin: center top;
    }

    .master-prozess-block:not(.is-template-offer)[data-layout-mobile="vertical"] .mp-item:not(:last-child) .mp-marker-wrap::after,
    .master-prozess-block:not(.is-template-offer):not([data-layout-mobile="horizontal"]) .mp-item:not(:last-child) .mp-marker-wrap::after {
        transform: translateX(-50%) scaleY(1);
    }

    .master-prozess-block:not(.is-template-offer)[data-layout-mobile="vertical"] .mp-item:not(:last-child).is-active .mp-marker-wrap::before,
    .master-prozess-block:not(.is-template-offer):not([data-layout-mobile="horizontal"]) .mp-item:not(:last-child).is-active .mp-marker-wrap::before {
        transform: translateX(-50%) scaleY(.52);
    }

    .master-prozess-block:not(.is-template-offer)[data-layout-mobile="vertical"] .mp-item:not(:last-child).is-complete .mp-marker-wrap::before,
    .master-prozess-block:not(.is-template-offer):not([data-layout-mobile="horizontal"]) .mp-item:not(:last-child).is-complete .mp-marker-wrap::before {
        transform: translateX(-50%) scaleY(1);
    }

    .master-prozess-block:not(.is-template-offer)[data-layout-mobile="horizontal"] .mp-inner,
    .master-prozess-block:not(.is-template-offer).has-mobile-slider .mp-inner {
        overflow-x: auto;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
    }

    .master-prozess-block:not(.is-template-offer)[data-layout-mobile="horizontal"] .mp-inner::-webkit-scrollbar,
    .master-prozess-block:not(.is-template-offer).has-mobile-slider .mp-inner::-webkit-scrollbar {
        display: none;
    }

    .master-prozess-block:not(.is-template-offer)[data-layout-mobile="horizontal"] .mp-items,
    .master-prozess-block:not(.is-template-offer).has-mobile-slider .mp-items {
        display: flex;
        flex-direction: row;
        width: max-content;
        gap: 18px;
        padding: 3px 2px 10px;
    }

    .master-prozess-block:not(.is-template-offer)[data-layout-mobile="horizontal"] .mp-item,
    .master-prozess-block:not(.is-template-offer).has-mobile-slider .mp-item {
        display: block;
        width: min(82vw, 330px);
        flex: 0 0 min(82vw, 330px);
        scroll-snap-align: start;
    }

    .master-prozess-block:not(.is-template-offer)[data-layout-mobile="horizontal"] .mp-marker-wrap,
    .master-prozess-block:not(.is-template-offer).has-mobile-slider .mp-marker-wrap {
        align-items: center;
        justify-content: center;
        height: var(--mp-circle-size);
    }

    .master-prozess-block:not(.is-template-offer)[data-layout-mobile="horizontal"] .mp-content,
    .master-prozess-block:not(.is-template-offer).has-mobile-slider .mp-content {
        margin-top: 18px;
        text-align: center;
    }

    .master-prozess-block:not(.is-template-offer)[data-layout-mobile="horizontal"] .mp-item:not(:last-child) .mp-marker-wrap::after,
    .master-prozess-block:not(.is-template-offer)[data-layout-mobile="horizontal"] .mp-item:not(:last-child) .mp-marker-wrap::before,
    .master-prozess-block:not(.is-template-offer).has-mobile-slider .mp-item:not(:last-child) .mp-marker-wrap::after,
    .master-prozess-block:not(.is-template-offer).has-mobile-slider .mp-item:not(:last-child) .mp-marker-wrap::before {
        top: 50%;
        left: 50%;
        width: calc(100% + 18px);
        height: var(--mp-connector-thickness);
        transform: translateY(-50%) scaleX(0);
    }

    .master-prozess-block:not(.is-template-offer)[data-layout-mobile="horizontal"] .mp-item:not(:last-child) .mp-marker-wrap::after,
    .master-prozess-block:not(.is-template-offer).has-mobile-slider .mp-item:not(:last-child) .mp-marker-wrap::after {
        transform: translateY(-50%) scaleX(1);
    }

    .master-prozess-block:not(.is-template-offer)[data-layout-mobile="horizontal"] .mp-item:not(:last-child).is-active .mp-marker-wrap::before,
    .master-prozess-block:not(.is-template-offer).has-mobile-slider .mp-item:not(:last-child).is-active .mp-marker-wrap::before {
        transform: translateY(-50%) scaleX(.52);
    }

    .master-prozess-block:not(.is-template-offer)[data-layout-mobile="horizontal"] .mp-item:not(:last-child).is-complete .mp-marker-wrap::before,
    .master-prozess-block:not(.is-template-offer).has-mobile-slider .mp-item:not(:last-child).is-complete .mp-marker-wrap::before {
        transform: translateY(-50%) scaleX(1);
    }

    .master-prozess-block.is-template-offer .mp-section-title {
        margin-bottom: 30px;
        font-size: min(var(--mp-section-title-size, 34px), 42px);
    }

    .master-prozess-block.is-template-offer[data-layout-mobile="vertical"] .mp-offer-items,
    .master-prozess-block.is-template-offer:not([data-layout-mobile="horizontal"]):not(.has-mobile-slider) .mp-offer-items {
        display: flex;
        flex-direction: column;
        gap: var(--mp-row-gap);
    }

    .master-prozess-block.is-template-offer[data-layout-mobile="vertical"] .mp-offer-item,
    .master-prozess-block.is-template-offer:not([data-layout-mobile="horizontal"]):not(.has-mobile-slider) .mp-offer-item {
        display: grid;
        grid-template-columns: 84px minmax(0, 1fr);
        align-items: center;
        padding: 22px 18px;
        text-align: left;
    }

    .master-prozess-block.is-template-offer[data-layout-mobile="vertical"] .mp-offer-visuals,
    .master-prozess-block.is-template-offer:not([data-layout-mobile="horizontal"]):not(.has-mobile-slider) .mp-offer-visuals {
        min-height: 74px;
        margin: 0;
    }

    .master-prozess-block.is-template-offer[data-layout-mobile="vertical"] .mp-title,
    .master-prozess-block.is-template-offer[data-layout-mobile="vertical"] .mp-text,
    .master-prozess-block.is-template-offer:not([data-layout-mobile="horizontal"]):not(.has-mobile-slider) .mp-title,
    .master-prozess-block.is-template-offer:not([data-layout-mobile="horizontal"]):not(.has-mobile-slider) .mp-text {
        max-width: none;
        text-align: left;
    }

    .master-prozess-block.is-template-offer[data-layout-mobile="vertical"] .mp-offer-arrow,
    .master-prozess-block.is-template-offer:not([data-layout-mobile="horizontal"]):not(.has-mobile-slider) .mp-offer-arrow {
        bottom: calc(var(--mp-row-gap) * -.5 - 18px);
        left: 50%;
        width: 36px;
        height: 36px;
        transform: translateX(-50%) rotate(90deg);
    }

    .master-prozess-block.is-template-offer[data-layout-mobile="horizontal"] .mp-inner,
    .master-prozess-block.is-template-offer.has-mobile-slider .mp-inner {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
    }

    .master-prozess-block.is-template-offer[data-layout-mobile="horizontal"] .mp-inner::-webkit-scrollbar,
    .master-prozess-block.is-template-offer.has-mobile-slider .mp-inner::-webkit-scrollbar {
        display: none;
    }

    .master-prozess-block.is-template-offer[data-layout-mobile="horizontal"] .mp-offer-items,
    .master-prozess-block.is-template-offer.has-mobile-slider .mp-offer-items {
        display: flex;
        flex-direction: row;
        width: max-content;
        gap: 44px;
        padding: 3px 2px 12px;
    }

    .master-prozess-block.is-template-offer[data-layout-mobile="horizontal"] .mp-offer-item,
    .master-prozess-block.is-template-offer.has-mobile-slider .mp-offer-item {
        display: flex;
        width: min(84vw, 350px);
        flex-direction: column;
        align-items: center;
        flex: 0 0 min(84vw, 350px);
        scroll-snap-align: start;
    }

    .master-prozess-block.is-template-offer[data-layout-mobile="horizontal"] .mp-offer-visuals,
    .master-prozess-block.is-template-offer.has-mobile-slider .mp-offer-visuals {
        margin-bottom: 22px;
    }

    .master-prozess-block.is-template-offer[data-layout-mobile="horizontal"] .mp-title,
    .master-prozess-block.is-template-offer[data-layout-mobile="horizontal"] .mp-text,
    .master-prozess-block.is-template-offer.has-mobile-slider .mp-title,
    .master-prozess-block.is-template-offer.has-mobile-slider .mp-text {
        max-width: 42ch;
        text-align: center;
    }

    .master-prozess-block.is-template-offer[data-layout-mobile="horizontal"] .mp-offer-arrow,
    .master-prozess-block.is-template-offer.has-mobile-slider .mp-offer-arrow {
        top: 50%;
        right: -42px;
        width: 36px;
        height: 36px;
        transform: translateY(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .master-prozess-block,
    .master-prozess-block *,
    .master-prozess-block *::before,
    .master-prozess-block *::after {
        scroll-behavior: auto;
        animation-duration: .01ms;
        animation-delay: 0ms;
        animation-iteration-count: 1;
        transition-duration: .01ms;
    }

    .master-prozess-block .mp-item,
    .master-prozess-block .mp-content {
        visibility: visible;
        opacity: 1;
        transform: none;
    }
}