.ff-conversion-success-flow {
    width: min(100%, 720px);
    margin: 26px auto 0;
    padding: 22px;
    color: #10293d;
    text-align: left;
    border: 1px solid #d9e7e2;
    border-radius: 16px;
    background: linear-gradient(145deg, #f4fbf8 0%, #ffffff 72%);
}

.ff-conversion-success-flow__heading > span {
    display: inline-block;
    margin-bottom: 5px;
    color: #08775a;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ff-conversion-success-flow__heading h3 {
    margin: 0;
    color: #0b2239;
    font-size: clamp(18px, 2.2vw, 23px);
    line-height: 1.2;
}

.ff-conversion-success-flow__heading p {
    margin: 7px 0 0;
    color: #526574;
    font-size: 14px;
}

.ff-conversion-success-flow ol {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.ff-conversion-success-flow li {
    position: relative;
    display: flex;
    gap: 10px;
    min-width: 0;
    padding: 14px;
    border: 1px solid #e0e8e5;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 5px 16px rgba(11, 34, 57, .05);
}

.ff-conversion-success-flow li > i {
    display: inline-flex;
    flex: 0 0 28px;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: #fff;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
    border-radius: 50%;
    background: #0b7a5a;
}

.ff-conversion-success-flow li > span {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.ff-conversion-success-flow li strong {
    color: #0b2239;
    font-size: 13px;
    line-height: 1.25;
}

.ff-conversion-success-flow li small {
    color: #5f707d;
    font-size: 12px;
    line-height: 1.4;
}

@media (max-width: 680px) {
    .ff-conversion-success-flow {
        padding: 17px;
    }

    .ff-conversion-success-flow ol {
        grid-template-columns: 1fr;
    }
}

/* Conversion-Effekte: zentral für Formulare, Rechner und künftige Entwürfe. */
.ff-pkv-shell,
.ff-qb-shell {
    --ff-fx-accent: var(--ff-accent, #0b7a5a);
    --ff-fx-cta: var(--ff-cta, #c94f00);
}

.ff-calc-shell {
    --ff-fx-accent: var(--ff-calc-accent, #0b7a5a);
    --ff-fx-cta: var(--ff-calc-cta, #c94f00);
}

.ff-tool-shell {
    --ff-fx-accent: var(--ff-tool-accent, #0b7a5a);
    --ff-fx-cta: var(--ff-tool-cta, #c94f00);
}

/* 1: Button-Pulse */
:where(.ff-pkv-shell, .ff-qb-shell, .ff-calc-shell, .ff-tool-shell).ff-fx-cta-pulse
:is(.ff-pkv-next, .ff-pkv-submit, .ff-calc-primary, .ff-tool-primary):not(:disabled) {
    animation: ff-fx-cta-pulse 4.4s ease-in-out infinite;
}

@keyframes ff-fx-cta-pulse {
    0%, 68%, 100% { box-shadow: 0 9px 22px color-mix(in srgb, var(--ff-fx-cta), transparent 72%); }
    76% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ff-fx-cta), transparent 52%), 0 11px 26px color-mix(in srgb, var(--ff-fx-cta), transparent 62%); }
    88% { box-shadow: 0 0 0 11px transparent, 0 11px 26px color-mix(in srgb, var(--ff-fx-cta), transparent 68%); }
}

/* 2: Radar-Verstärkung */
:where(.ff-pkv-shell, .ff-calc-shell, .ff-tool-shell).ff-fx-radar
:is(.ff-pkv-processing-radar, .ff-calc-radar, .ff-tool-loader-ring) {
    animation: ff-fx-radar-breathe 2.35s ease-in-out infinite;
}

@keyframes ff-fx-radar-breathe {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ff-fx-accent), transparent 82%); filter: saturate(1); }
    50% { box-shadow: 0 0 0 13px transparent, 0 12px 35px color-mix(in srgb, var(--ff-fx-accent), transparent 72%); filter: saturate(1.18); }
}

/* 3: Button-Lichtlauf */
:where(.ff-pkv-shell, .ff-qb-shell, .ff-calc-shell, .ff-tool-shell).ff-fx-cta-shimmer
:is(.ff-pkv-next, .ff-pkv-submit, .ff-calc-primary, .ff-tool-primary) {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

:where(.ff-pkv-shell, .ff-qb-shell, .ff-calc-shell, .ff-tool-shell).ff-fx-cta-shimmer
:is(.ff-pkv-next, .ff-pkv-submit, .ff-calc-primary, .ff-tool-primary)::after {
    position: absolute;
    z-index: 2;
    top: -70%;
    bottom: -70%;
    left: -48%;
    width: 32%;
    content: '';
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .48), transparent);
    transform: skewX(-18deg);
    animation: ff-fx-shimmer 4.8s ease-in-out infinite;
}

@keyframes ff-fx-shimmer {
    0%, 62% { left: -48%; opacity: 0; }
    68% { opacity: 1; }
    88%, 100% { left: 118%; opacity: 0; }
}

/* 4: Pfeil-Bewegung */
:where(.ff-pkv-shell, .ff-qb-shell, .ff-calc-shell, .ff-tool-shell).ff-fx-cta-arrow
:is(.ff-pkv-next, .ff-pkv-submit, .ff-calc-primary, .ff-tool-primary)
:is(b[aria-hidden="true"], span[aria-hidden="true"]) {
    display: inline-block;
    animation: ff-fx-arrow 1.45s ease-in-out infinite;
}

@keyframes ff-fx-arrow {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(5px); }
}

/* 5: Auswahl anheben */
:where(.ff-pkv-shell, .ff-calc-shell, .ff-tool-shell).ff-fx-choice-lift
:is(.ff-pkv-choice, .ff-calc-package, .ff-calc-segment label, .ff-ref-topic):hover {
    transform: translateY(-4px);
}

/* 6: Auswahl-Leuchtrand */
:where(.ff-pkv-shell, .ff-calc-shell, .ff-tool-shell).ff-fx-choice-glow
:is(.ff-pkv-choice, .ff-calc-package, .ff-calc-segment label, .ff-ref-topic):is(:hover, :focus-visible, .is-selected) {
    border-color: var(--ff-fx-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ff-fx-accent), transparent 83%), 0 12px 28px color-mix(in srgb, var(--ff-fx-accent), transparent 82%);
}

/* 7: Klick-Welle */
:where(.ff-pkv-shell, .ff-qb-shell, .ff-calc-shell, .ff-tool-shell).ff-fx-choice-ripple
:is(.ff-pkv-choice, .ff-calc-package, .ff-calc-segment label, .ff-ref-topic, .ff-pkv-next, .ff-pkv-submit, .ff-calc-primary, .ff-tool-primary) {
    position: relative;
    overflow: hidden;
}

.ff-effect-ripple {
    position: absolute !important;
    z-index: 4;
    display: block !important;
    border-radius: 50%;
    pointer-events: none;
    background: color-mix(in srgb, var(--ff-fx-accent), #ffffff 34%);
    opacity: .34;
    transform: scale(0);
    animation: ff-fx-ripple 680ms ease-out forwards;
}

@keyframes ff-fx-ripple {
    to { opacity: 0; transform: scale(1); }
}

/* 8: Fortschritts-Lichtlauf */
:where(.ff-pkv-shell, .ff-calc-shell, .ff-tool-shell).ff-fx-progress-shine
:is(.ff-pkv-progress span, .ff-pkv-processing-meter span, .ff-calc-progress span.is-active, .ff-tool-loader-bar i) {
    background-image: linear-gradient(90deg, var(--ff-fx-accent) 0 38%, color-mix(in srgb, var(--ff-fx-accent), #ffffff 48%) 50%, var(--ff-fx-accent) 62% 100%);
    background-size: 220% 100%;
    animation: ff-fx-progress-shine 2.2s linear infinite;
}

@keyframes ff-fx-progress-shine {
    to { background-position: -220% 0; }
}

/* 9: Fortschritt-Pulse */
:where(.ff-pkv-shell, .ff-calc-shell, .ff-tool-shell).ff-fx-progress-pulse
:is(.ff-tool-progress li.is-current > span, .ff-ref-progress li.is-current > span, .ff-calc-progress span.is-active:last-child) {
    animation: ff-fx-progress-pulse 1.8s ease-in-out infinite;
}

@keyframes ff-fx-progress-pulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ff-fx-accent), transparent 58%); }
    50% { box-shadow: 0 0 0 7px transparent; }
}

/* 10: Schritt einblenden */
:where(.ff-pkv-shell, .ff-calc-shell, .ff-tool-shell).ff-fx-step-fade
:is(.ff-pkv-step, .ff-calc-entry, .ff-calc-results, .ff-calc-contact, .ff-tool-body, .ff-ref-body) {
    animation: ff-fx-step-enter 420ms cubic-bezier(.2, .75, .25, 1) both;
}

@keyframes ff-fx-step-enter {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 11: Karten nacheinander */
:where(.ff-pkv-shell, .ff-calc-shell, .ff-tool-shell).ff-fx-choice-stagger
:is(.ff-pkv-choices, .ff-calc-packages, .ff-ref-topics) > :nth-child(1) { animation-delay: 30ms; }
:where(.ff-pkv-shell, .ff-calc-shell, .ff-tool-shell).ff-fx-choice-stagger
:is(.ff-pkv-choices, .ff-calc-packages, .ff-ref-topics) > :nth-child(2) { animation-delay: 90ms; }
:where(.ff-pkv-shell, .ff-calc-shell, .ff-tool-shell).ff-fx-choice-stagger
:is(.ff-pkv-choices, .ff-calc-packages, .ff-ref-topics) > :nth-child(3) { animation-delay: 150ms; }
:where(.ff-pkv-shell, .ff-calc-shell, .ff-tool-shell).ff-fx-choice-stagger
:is(.ff-pkv-choices, .ff-calc-packages, .ff-ref-topics) > :nth-child(4) { animation-delay: 210ms; }
:where(.ff-pkv-shell, .ff-calc-shell, .ff-tool-shell).ff-fx-choice-stagger
:is(.ff-pkv-choices, .ff-calc-packages, .ff-ref-topics) > :nth-child(5) { animation-delay: 270ms; }
:where(.ff-pkv-shell, .ff-calc-shell, .ff-tool-shell).ff-fx-choice-stagger
:is(.ff-pkv-choices, .ff-calc-packages, .ff-ref-topics) > :nth-child(6) { animation-delay: 330ms; }

:where(.ff-pkv-shell, .ff-calc-shell, .ff-tool-shell).ff-fx-choice-stagger
:is(.ff-pkv-choices, .ff-calc-packages, .ff-ref-topics) > * {
    animation-name: ff-fx-choice-enter;
    animation-duration: 420ms;
    animation-timing-function: cubic-bezier(.2, .75, .25, 1);
    animation-fill-mode: both;
}

@keyframes ff-fx-choice-enter {
    from { opacity: 0; transform: translateY(9px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* 12: Kopf-Farbfluss */
:where(.ff-pkv-shell, .ff-calc-shell, .ff-tool-shell).ff-fx-header-gradient
:is(.ff-pkv-hero, .ff-calc-header, .ff-tool-header, .ff-ref-header) {
    background-size: 185% 185%;
    animation: ff-fx-header-gradient 9s ease-in-out infinite alternate;
}

@keyframes ff-fx-header-gradient {
    from { background-position: 0% 50%; }
    to { background-position: 100% 50%; }
}

/* 13: Kopf-Lichtschein */
:where(.ff-pkv-shell, .ff-calc-shell, .ff-tool-shell).ff-fx-header-glow
:is(.ff-pkv-hero, .ff-calc-header, .ff-tool-header, .ff-ref-header) {
    animation: ff-fx-header-glow 4.8s ease-in-out infinite;
}

@keyframes ff-fx-header-glow {
    0%, 100% { box-shadow: inset 0 0 0 rgba(255, 255, 255, 0); }
    50% { box-shadow: inset 0 0 58px rgba(255, 255, 255, .12); }
}

/* 14: Badge-Schweben */
:where(.ff-pkv-shell, .ff-calc-shell, .ff-tool-shell).ff-fx-badge-float
:is(.ff-pkv-eyebrow, .ff-pkv-duration, .ff-pkv-result-badge, .ff-calc-eyebrow, .ff-calc-recommended, .ff-calc-provider-badge, .ff-tool-kicker, .ff-tool-badges span, .ff-ref-kicker) {
    animation: ff-fx-badge-float 3.4s ease-in-out infinite;
}

@keyframes ff-fx-badge-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

/* 15: Badge-Leuchten */
:where(.ff-pkv-shell, .ff-calc-shell, .ff-tool-shell).ff-fx-badge-glow
:is(.ff-pkv-eyebrow, .ff-pkv-result-badge, .ff-calc-recommended, .ff-calc-provider-badge, .ff-tool-badges span) {
    animation: ff-fx-badge-glow 3.8s ease-in-out infinite;
}

@keyframes ff-fx-badge-glow {
    0%, 100% { box-shadow: 0 0 0 0 transparent; }
    50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--ff-fx-accent), transparent 86%); }
}

/* 16: Trust-Signale einblenden */
:where(.ff-pkv-shell, .ff-qb-shell, .ff-calc-shell, .ff-tool-shell).ff-fx-trust-pop
:is(.ff-pkv-trust, .ff-qb-trust, .ff-calc-trust, .ff-tool-trust, .ff-ref-trust) > :nth-child(1) { animation-delay: 120ms; }
:where(.ff-pkv-shell, .ff-qb-shell, .ff-calc-shell, .ff-tool-shell).ff-fx-trust-pop
:is(.ff-pkv-trust, .ff-qb-trust, .ff-calc-trust, .ff-tool-trust, .ff-ref-trust) > :nth-child(2) { animation-delay: 220ms; }
:where(.ff-pkv-shell, .ff-qb-shell, .ff-calc-shell, .ff-tool-shell).ff-fx-trust-pop
:is(.ff-pkv-trust, .ff-qb-trust, .ff-calc-trust, .ff-tool-trust, .ff-ref-trust) > :nth-child(3) { animation-delay: 320ms; }

:where(.ff-pkv-shell, .ff-qb-shell, .ff-calc-shell, .ff-tool-shell).ff-fx-trust-pop
:is(.ff-pkv-trust, .ff-qb-trust, .ff-calc-trust, .ff-tool-trust, .ff-ref-trust) > * {
    animation: ff-fx-trust-pop 440ms ease-out both;
}

@keyframes ff-fx-trust-pop {
    from { opacity: 0; transform: translateY(5px) scale(.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* 17: Feld-Fokus */
:where(.ff-pkv-shell, .ff-qb-shell, .ff-calc-shell, .ff-tool-shell).ff-fx-input-focus
:is(input, select, textarea):focus {
    border-color: var(--ff-fx-accent) !important;
    outline: 0 !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--ff-fx-accent), transparent 84%) !important;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

/* 18: Formular-Karten anheben */
:where(.ff-pkv-shell, .ff-calc-shell, .ff-tool-shell).ff-fx-card-lift
:is(.ff-pkv-card, .ff-calc-panel, .ff-calc-provider, .ff-tool-subcard, .ff-tool-opportunity-card, .ff-ref-body) {
    transition: transform 220ms ease, box-shadow 220ms ease;
}

:where(.ff-pkv-shell, .ff-calc-shell, .ff-tool-shell).ff-fx-card-lift
:is(.ff-pkv-card, .ff-calc-panel, .ff-calc-provider, .ff-tool-subcard, .ff-tool-opportunity-card, .ff-ref-body):hover {
    box-shadow: 0 16px 38px rgba(9, 32, 55, .12);
    transform: translateY(-3px);
}

/* 19: Icon-Atmung */
:where(.ff-pkv-shell, .ff-calc-shell, .ff-tool-shell).ff-fx-icon-breathe
:is(.ff-pkv-choice-icon, .ff-tool-opportunity-icon, .ff-tool-info > span, .ff-ref-topic i) {
    animation: ff-fx-icon-breathe 2.8s ease-in-out infinite;
}

@keyframes ff-fx-icon-breathe {
    0%, 100% { filter: brightness(1); box-shadow: 0 0 0 0 transparent; }
    50% { filter: brightness(1.08); box-shadow: 0 0 0 6px color-mix(in srgb, var(--ff-fx-accent), transparent 90%); }
}

/* 20: Auswahl-Bestätigung */
:where(.ff-pkv-shell, .ff-calc-shell, .ff-tool-shell).ff-fx-selected-pop
:is(.ff-pkv-choice, .ff-calc-package, .ff-calc-segment label, .ff-ref-topic).is-selected {
    animation: ff-fx-selected-pop 320ms cubic-bezier(.2, .8, .25, 1.25) both;
}

@keyframes ff-fx-selected-pop {
    0% { transform: scale(.985); }
    58% { transform: scale(1.018); }
    100% { transform: scale(1); }
}

/* 21: Erfolgs-Ring */
:where(.ff-pkv-shell, .ff-calc-shell, .ff-tool-shell).ff-fx-success-burst
:is(.ff-pkv-success-icon, .ff-calc-success > span, .ff-tool-success > span, .ff-ref-success-icon) {
    position: relative;
}

:where(.ff-pkv-shell, .ff-calc-shell, .ff-tool-shell).ff-fx-success-burst
:is(.ff-pkv-success-icon, .ff-calc-success > span, .ff-tool-success > span, .ff-ref-success-icon)::after {
    position: absolute;
    inset: -1px;
    content: '';
    border: 2px solid var(--ff-fx-accent);
    border-radius: inherit;
    pointer-events: none;
    animation: ff-fx-success-burst 1.2s ease-out 2;
}

@keyframes ff-fx-success-burst {
    from { opacity: .7; transform: scale(.8); }
    to { opacity: 0; transform: scale(1.65); }
}

/* 22: Headline-Linie */
:where(.ff-pkv-shell, .ff-calc-shell, .ff-tool-shell).ff-fx-heading-underline
:is(.ff-pkv-question h3, .ff-calc-section-head h3, .ff-tool-section-heading h2, .ff-tool-section-heading h3) {
    display: table;
    margin-right: auto;
    margin-left: auto;
    padding-bottom: 5px;
    background-image: linear-gradient(90deg, var(--ff-fx-accent), var(--ff-fx-cta));
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 0 3px;
    animation: ff-fx-heading-line 720ms ease-out 180ms forwards;
}

@keyframes ff-fx-heading-line {
    to { background-size: 100% 3px; }
}

@media (max-width: 680px) {
    :where(.ff-pkv-shell, .ff-calc-shell, .ff-tool-shell).ff-fx-card-lift
    :is(.ff-pkv-card, .ff-calc-panel, .ff-calc-provider, .ff-tool-subcard, .ff-tool-opportunity-card, .ff-ref-body):hover {
        transform: none;
    }

    :where(.ff-pkv-shell, .ff-calc-shell, .ff-tool-shell).ff-fx-header-gradient
    :is(.ff-pkv-hero, .ff-calc-header, .ff-tool-header, .ff-ref-header),
    :where(.ff-pkv-shell, .ff-calc-shell, .ff-tool-shell).ff-fx-header-glow
    :is(.ff-pkv-hero, .ff-calc-header, .ff-tool-header, .ff-ref-header) {
        animation-duration: 14s;
    }
}

@media (prefers-reduced-motion: reduce) {
    :where(.ff-pkv-shell, .ff-qb-shell, .ff-calc-shell, .ff-tool-shell)[class*="ff-fx-"]
    :is(.ff-pkv-next, .ff-pkv-submit, .ff-calc-primary, .ff-tool-primary, .ff-pkv-processing-radar, .ff-calc-radar, .ff-tool-loader-ring, .ff-pkv-progress span, .ff-pkv-processing-meter span, .ff-calc-progress span, .ff-tool-loader-bar i, .ff-tool-progress li > span, .ff-ref-progress li > span, .ff-pkv-step, .ff-calc-entry, .ff-calc-results, .ff-calc-contact, .ff-tool-body, .ff-ref-body, .ff-pkv-choice, .ff-calc-package, .ff-ref-topic, .ff-pkv-hero, .ff-calc-header, .ff-tool-header, .ff-ref-header, .ff-pkv-eyebrow, .ff-pkv-duration, .ff-pkv-result-badge, .ff-calc-eyebrow, .ff-calc-recommended, .ff-calc-provider-badge, .ff-tool-kicker, .ff-tool-badges span, .ff-ref-kicker, .ff-pkv-trust > *, .ff-qb-trust > *, .ff-calc-trust > *, .ff-tool-trust > *, .ff-ref-trust > *, .ff-pkv-choice-icon, .ff-tool-opportunity-icon, .ff-tool-info > span, .ff-ref-topic i, .ff-pkv-success-icon, .ff-calc-success > span, .ff-tool-success > span, .ff-ref-success-icon) {
        animation: none !important;
        transition-duration: .01ms !important;
    }

    .ff-effect-ripple {
        display: none !important;
    }

    :where(.ff-pkv-shell, .ff-qb-shell, .ff-calc-shell, .ff-tool-shell)[class*="ff-fx-"]
    :is(.ff-pkv-next, .ff-pkv-submit, .ff-calc-primary, .ff-tool-primary)::after,
    :where(.ff-pkv-shell, .ff-calc-shell, .ff-tool-shell)[class*="ff-fx-"]
    :is(.ff-pkv-success-icon, .ff-calc-success > span, .ff-tool-success > span, .ff-ref-success-icon)::after,
    :where(.ff-pkv-shell, .ff-qb-shell, .ff-calc-shell, .ff-tool-shell)[class*="ff-fx-"]
    :is(.ff-pkv-next, .ff-pkv-submit, .ff-calc-primary, .ff-tool-primary)
    :is(b[aria-hidden="true"], span[aria-hidden="true"]) {
        animation: none !important;
    }

    :where(.ff-pkv-shell, .ff-calc-shell, .ff-tool-shell).ff-fx-heading-underline
    :is(.ff-pkv-question h3, .ff-calc-section-head h3, .ff-tool-section-heading h2, .ff-tool-section-heading h3) {
        animation: none !important;
        background-size: 100% 3px;
    }
}