/* ABG v11: sauberer oberer Bereich für Rechnerseiten – Stepper, Zurück-Link und Hero */
.calculation-top-frame {
    width: 100%;
    padding: 14px 0 0;
    background: #fff;
    overflow: visible;
}

.calculation-top-frame .steps-widget {
    margin-top: 4px;
    margin-bottom: 18px;
}

.calculation-top-inner {
    width: min(calc(100% - 2rem), 1180px) !important;
    max-width: 1180px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.calculation-top-inner .backlink,
.calculation-top-inner a[href] {
    align-self: flex-start;
}

.calculation-top-inner > a,
.calculation-top-inner .backlink,
.calculation-top-inner .back-link,
.calculation-top-inner .link-back {
    margin: 0;
}

.calculation-top-inner .form-intro {
    width: 100%;
    margin: 0;
    border-radius: 18px;
    padding: clamp(2rem, 4vw, 3rem) clamp(1.25rem, 4vw, 2.25rem);
}

.calculation-top-inner .form-intro h1 {
    margin-top: 0.35rem;
    margin-bottom: 0;
    font-size: clamp(2rem, 3.4vw, 3.2rem);
    line-height: 1.08;
}

.calculation-top-inner .form-intro p {
    max-width: 760px;
    margin-top: 0.85rem;
}

.calculation-page-flow {
    margin-top: 22px !important;
}

/* Ergebnis-Seiten nutzen den gleichen Stepper, bleiben aber ohne HTML-Umbau kompakter. */
.result-page.mt-big {
    margin-top: 1.35rem !important;
}

.steps-widget + .home-content.mt-big,
.steps-widget + .home-content-bigger.mt-big {
    margin-top: 1.35rem !important;
}

/* Sicherheitsnetz gegen abgeschnittene Stepper-Beschriftungen durch alte Utility-Klassen. */
.steps-widget,
.steps-container,
.step-item,
.step-link,
.step-icon,
.step-title {
    overflow: visible !important;
}

.steps-widget .step-item {
    box-sizing: border-box;
}

.steps-widget .step-link.flex-row {
    flex-direction: column !important;
}

/* Alte Abstandsklassen in diesem Bereich entschärfen. */
.calculation-top-frame .gap-small {
    gap: 0.65rem;
}

@media (min-width: 901px) {
    .steps-widget .step-item.p-mid {
        padding: 16px 14px 13px !important;
    }
}

@media (max-width: 900px) {
    .calculation-top-frame {
        padding-top: 0.85rem;
    }

    .calculation-top-inner {
        width: min(calc(100% - 1.25rem), 720px) !important;
        max-width: calc(100vw - 1.25rem) !important;
        gap: 0.85rem;
    }

    .calculation-top-inner .form-intro {
        border-radius: 18px;
        text-align: left;
        padding: 1.35rem 1.1rem;
    }

    .calculation-top-inner .form-intro h1 {
        font-size: clamp(1.65rem, 8vw, 2.15rem);
        line-height: 1.12;
    }

    .calculation-top-inner .form-intro p {
        font-size: 1rem;
        line-height: 1.55;
    }

    .calculation-page-flow {
        margin-top: 1rem !important;
    }

    .mobile-step-summary {
        margin-top: 0.75rem !important;
        margin-bottom: 0.65rem !important;
    }
}