/**
 * Register wizard — desktop vertical centering + navigation buttons.
 * Loaded last on register.php so it wins over register-page.css / style.css.
 */

/* Draft-Restore: kurz ausblenden bis Schritt/Buttons gesetzt (Erstbesuch = sofort sichtbar) */
body.page-register.kinma-register-wizard-restoring .register-wizard-form-layer .wizard-content,
body.page-register.kinma-register-wizard-restoring .register-wizard-head__progress {
    visibility: hidden;
    pointer-events: none;
}

body.page-register.kinma-register-wizard-restoring .register-wizard-head__progress {
    opacity: 0;
}

body.page-register.kinma-register-wizard-restoring .register-wizard-buttons-island,
body.page-register.kinma-register-wizard-restoring .settings-logo-group,
body.page-register.kinma-register-wizard-restoring .left-nav-cluster--auth,
body.page-register.kinma-register-wizard-restoring #chatPopup.chat-popup,
body.page-register.kinma-register-wizard-restoring #kinma-hw-accel-nav-island {
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* ─── Zurück / Weiter / Registrieren: Icons, ausblenden, ausgrauen wenn ungültig ─── */
body.page-register .register-wizard-buttons .wizard-nav-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-direction: row;
    min-width: 120px;
    padding: 12px 20px !important;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    border-radius: 9999px !important;
    transition:
        background 0.22s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.22s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.22s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.22s ease,
        transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

body.page-register .register-wizard-buttons .wizard-nav-btn__icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

body.page-register .register-wizard-buttons .wizard-nav-btn__label {
    line-height: 1.2;
}

body.page-register .register-wizard-buttons .wizard-nav-btn--prev {
    flex-direction: row;
}

body.page-register .register-wizard-buttons .wizard-nav-btn--next {
    flex-direction: row-reverse;
}

body.page-register .register-wizard-buttons .wizard-nav-btn--submit {
    flex-direction: row;
}

body.page-register .register-wizard-buttons .btn.is-wizard-nav-hidden,
body.page-register .register-wizard-buttons .btn.hidden,
body.page-register .register-wizard-buttons .btn.hidden.is-wizard-nav-hidden,
body.page-register .register-wizard-buttons .wizard-nav-btn.hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}


body.page-register .register-wizard-buttons .wizard-nav-btn.btn-primary:not(:disabled):not(.is-wizard-nav-disabled),
body.page-register .register-wizard-buttons .wizard-nav-btn.btn-secondary:not(:disabled):not(.is-wizard-nav-disabled) {
    background: #1a1a1a !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow:
        0 2px 10px rgba(15, 23, 42, 0.16),
        0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

body.page-register .register-wizard-buttons .wizard-nav-btn.btn-primary:not(:disabled):not(.is-wizard-nav-disabled):hover,
body.page-register .register-wizard-buttons .wizard-nav-btn.btn-secondary:not(:disabled):not(.is-wizard-nav-disabled):hover {
    background: #1a1a1a !important;
    color: #ffffff !important;
    box-shadow:
        0 2px 10px rgba(15, 23, 42, 0.16),
        0 1px 0 rgba(255, 255, 255, 0.06) inset;
    transform: translateY(-50%) scale(0.96) !important;
}

body.page-register .register-wizard-buttons .wizard-nav-btn.btn-primary:not(:disabled):not(.is-wizard-nav-disabled):active,
body.page-register .register-wizard-buttons .wizard-nav-btn.btn-secondary:not(:disabled):not(.is-wizard-nav-disabled):active {
    background: #1a1a1a !important;
    color: #ffffff !important;
    box-shadow:
        0 2px 10px rgba(15, 23, 42, 0.16),
        0 1px 0 rgba(255, 255, 255, 0.06) inset;
    transform: translateY(-50%) scale(0.94) !important;
    transition-duration: 0.12s !important;
}

body.page-register .register-wizard-buttons .wizard-nav-btn.btn-primary:not(:disabled):not(.is-wizard-nav-disabled):focus-visible,
body.page-register .register-wizard-buttons .wizard-nav-btn.btn-secondary:not(:disabled):not(.is-wizard-nav-disabled):focus-visible {
    outline: 2px solid rgba(99, 102, 241, 0.55) !important;
    outline-offset: 3px !important;
}

/* Registrieren / Bestätigen: weiß + grüne Outline + grünes Häkchen; Hover: grün gefüllt + weißes Häkchen */
body.page-register {
    --register-wizard-submit-green: #22c55e;
}

body.page-register .register-wizard-buttons .wizard-nav-btn--submit.btn-primary:not(:disabled):not(.is-wizard-nav-disabled) {
    background: #ffffff !important;
    color: var(--register-wizard-submit-green) !important;
    border: 5px solid var(--register-wizard-submit-green) !important;
    box-shadow:
        0 2px 10px rgba(15, 23, 42, 0.16),
        0 1px 0 rgba(255, 255, 255, 0.06) inset !important;
    box-sizing: border-box !important;
}

body.page-register .register-wizard-buttons .wizard-nav-btn--submit.btn-primary:not(:disabled):not(.is-wizard-nav-disabled):hover {
    background: var(--register-wizard-submit-green) !important;
    color: #ffffff !important;
    border: 5px solid transparent !important;
    box-shadow: 0 2px 12px rgba(34, 197, 94, 0.38) !important;
    transform: translateY(-50%) scale(0.96) !important;
}

body.page-register .register-wizard-buttons .wizard-nav-btn--submit.btn-primary:not(:disabled):not(.is-wizard-nav-disabled):active {
    background: var(--register-wizard-submit-green) !important;
    color: #ffffff !important;
    border: 5px solid transparent !important;
    transform: translateY(-50%) scale(0.94) !important;
    box-shadow: 0 2px 12px rgba(34, 197, 94, 0.38) !important;
    transition-duration: 0.12s !important;
}

body.page-register .register-wizard-buttons .wizard-nav-btn--submit.btn-primary:not(:disabled):not(.is-wizard-nav-disabled) .wizard-nav-btn__icon,
body.page-register .register-wizard-buttons .wizard-nav-btn--submit.btn-primary:not(:disabled):not(.is-wizard-nav-disabled) .wizard-nav-btn__icon--check {
    color: var(--register-wizard-submit-green) !important;
}

body.page-register .register-wizard-buttons .wizard-nav-btn--submit.btn-primary:not(:disabled):not(.is-wizard-nav-disabled) .wizard-nav-btn__icon polyline {
    stroke: currentColor !important;
    stroke-width: 3.5 !important;
}

body.page-register .register-wizard-buttons .wizard-nav-btn--submit.btn-primary:not(:disabled):not(.is-wizard-nav-disabled):hover .wizard-nav-btn__icon,
body.page-register .register-wizard-buttons .wizard-nav-btn--submit.btn-primary:not(:disabled):not(.is-wizard-nav-disabled):hover .wizard-nav-btn__icon--check,
body.page-register .register-wizard-buttons .wizard-nav-btn--submit.btn-primary:not(:disabled):not(.is-wizard-nav-disabled):active .wizard-nav-btn__icon,
body.page-register .register-wizard-buttons .wizard-nav-btn--submit.btn-primary:not(:disabled):not(.is-wizard-nav-disabled):active .wizard-nav-btn__icon--check {
    color: #ffffff !important;
}

body.page-register .register-wizard-buttons .wizard-nav-btn--submit.btn-primary:not(:disabled):not(.is-wizard-nav-disabled):hover .wizard-nav-btn__icon polyline,
body.page-register .register-wizard-buttons .wizard-nav-btn--submit.btn-primary:not(:disabled):not(.is-wizard-nav-disabled):active .wizard-nav-btn__icon polyline {
    stroke: currentColor !important;
}

body.page-register .register-wizard-buttons .wizard-nav-btn:disabled,
body.page-register .register-wizard-buttons .wizard-nav-btn.is-wizard-nav-disabled {
    opacity: 1 !important;
    visibility: visible !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.12) !important;
}

body.page-register .register-wizard-buttons .wizard-nav-btn.btn-secondary:disabled,
body.page-register .register-wizard-buttons .wizard-nav-btn.btn-secondary.is-wizard-nav-disabled,
body.page-register .register-wizard-buttons .wizard-nav-btn.btn-primary:disabled,
body.page-register .register-wizard-buttons .wizard-nav-btn.btn-primary.is-wizard-nav-disabled {
    background: #1a1a1a !important;
    color: rgba(255, 255, 255, 0.42) !important;
    border: none !important;
}

/* Weiter (disabled): weiß + gestrichelt (kein „schwarz ausgegraut“) */
body.page-register .register-wizard-buttons .wizard-nav-btn--next.btn-primary:disabled,
body.page-register .register-wizard-buttons .wizard-nav-btn--next.btn-primary.is-wizard-nav-disabled {
    background: #ffffff !important;
    color: rgba(17, 24, 39, 0.55) !important;
    border: 2px dashed rgba(17, 24, 39, 0.28) !important;
    box-shadow: none !important;
}

body.dark-mode.page-register .register-wizard-buttons .wizard-nav-btn--next.btn-primary:disabled,
body.dark-mode.page-register .register-wizard-buttons .wizard-nav-btn--next.btn-primary.is-wizard-nav-disabled {
    background: #0b1220 !important;
    color: rgba(243, 244, 246, 0.55) !important;
    border: 2px dashed rgba(243, 244, 246, 0.28) !important;
    box-shadow: none !important;
}

body.page-register .register-wizard-buttons .wizard-nav-btn.btn-secondary:disabled::before,
body.page-register .register-wizard-buttons .wizard-nav-btn.btn-secondary.is-wizard-nav-disabled::before,
body.page-register .register-wizard-buttons .wizard-nav-btn.btn-primary:disabled::before,
body.page-register .register-wizard-buttons .wizard-nav-btn.btn-primary.is-wizard-nav-disabled::before {
    display: none !important;
}

body.page-register .register-wizard-buttons .wizard-nav-btn--submit.btn-primary.is-wizard-nav-disabled {
    background: #ffffff !important;
    color: rgba(34, 197, 94, 0.45) !important;
    border: 5px solid rgba(34, 197, 94, 0.35) !important;
    box-shadow: none !important;
}

body.page-register .register-wizard-buttons .wizard-nav-btn--submit.btn-primary.is-wizard-nav-disabled .wizard-nav-btn__icon,
body.page-register .register-wizard-buttons .wizard-nav-btn--submit.btn-primary.is-wizard-nav-disabled .wizard-nav-btn__icon polyline {
    color: rgba(34, 197, 94, 0.45) !important;
    stroke: currentColor !important;
}

body.page-register .register-wizard-buttons .wizard-nav-btn.btn-primary:disabled .wizard-nav-btn__icon,
body.page-register .register-wizard-buttons .wizard-nav-btn.btn-primary.is-wizard-nav-disabled .wizard-nav-btn__icon,
body.page-register .register-wizard-buttons .wizard-nav-btn.btn-secondary:disabled .wizard-nav-btn__icon,
body.page-register .register-wizard-buttons .wizard-nav-btn.btn-secondary.is-wizard-nav-disabled .wizard-nav-btn__icon {
    position: relative;
    z-index: 1;
    opacity: 0.55;
}

body.dark-mode.page-register .register-wizard-buttons .wizard-nav-btn.btn-primary:not(:disabled):not(.is-wizard-nav-disabled),
body.dark-mode.page-register .register-wizard-buttons .wizard-nav-btn.btn-secondary:not(:disabled):not(.is-wizard-nav-disabled) {
    background: #f3f4f6 !important;
    color: #1a1a1a !important;
    box-shadow:
        0 2px 12px rgba(0, 0, 0, 0.35),
        0 1px 0 rgba(255, 255, 255, 0.35) inset;
}

body.dark-mode.page-register .register-wizard-buttons .wizard-nav-btn.btn-primary:not(:disabled):not(.is-wizard-nav-disabled):hover,
body.dark-mode.page-register .register-wizard-buttons .wizard-nav-btn.btn-secondary:not(:disabled):not(.is-wizard-nav-disabled):hover {
    background: #f3f4f6 !important;
    color: #1a1a1a !important;
    box-shadow:
        0 2px 12px rgba(0, 0, 0, 0.35),
        0 1px 0 rgba(255, 255, 255, 0.35) inset;
    transform: translateY(-50%) scale(0.96) !important;
}

body.dark-mode.page-register .register-wizard-buttons .wizard-nav-btn.btn-primary:not(:disabled):not(.is-wizard-nav-disabled):active,
body.dark-mode.page-register .register-wizard-buttons .wizard-nav-btn.btn-secondary:not(:disabled):not(.is-wizard-nav-disabled):active {
    background: #f3f4f6 !important;
    color: #1a1a1a !important;
    box-shadow:
        0 2px 12px rgba(0, 0, 0, 0.35),
        0 1px 0 rgba(255, 255, 255, 0.35) inset;
    transform: translateY(-50%) scale(0.94) !important;
}

body.dark-mode.page-register .register-wizard-buttons .wizard-nav-btn.btn-primary:not(:disabled):not(.is-wizard-nav-disabled):focus-visible,
body.dark-mode.page-register .register-wizard-buttons .wizard-nav-btn.btn-secondary:not(:disabled):not(.is-wizard-nav-disabled):focus-visible {
    outline: 2px solid rgba(129, 140, 248, 0.75) !important;
    outline-offset: 3px !important;
}

body.dark-mode.page-register .register-wizard-buttons .wizard-nav-btn--submit.btn-primary:not(:disabled):not(.is-wizard-nav-disabled) {
    background: #ffffff !important;
    color: var(--register-wizard-submit-green) !important;
    border: 5px solid var(--register-wizard-submit-green) !important;
    box-shadow:
        0 2px 10px rgba(15, 23, 42, 0.16),
        0 1px 0 rgba(255, 255, 255, 0.06) inset !important;
}

body.dark-mode.page-register .register-wizard-buttons .wizard-nav-btn--submit.btn-primary:not(:disabled):not(.is-wizard-nav-disabled):hover,
body.dark-mode.page-register .register-wizard-buttons .wizard-nav-btn--submit.btn-primary:not(:disabled):not(.is-wizard-nav-disabled):active {
    background: var(--register-wizard-submit-green) !important;
    color: #ffffff !important;
    border: 5px solid transparent !important;
    box-shadow: 0 2px 12px rgba(34, 197, 94, 0.38) !important;
}

body.dark-mode.page-register .register-wizard-buttons .wizard-nav-btn--submit.btn-primary:not(:disabled):not(.is-wizard-nav-disabled) .wizard-nav-btn__icon,
body.dark-mode.page-register .register-wizard-buttons .wizard-nav-btn--submit.btn-primary:not(:disabled):not(.is-wizard-nav-disabled) .wizard-nav-btn__icon polyline {
    color: var(--register-wizard-submit-green) !important;
    stroke: currentColor !important;
}

body.dark-mode.page-register .register-wizard-buttons .wizard-nav-btn--submit.btn-primary:not(:disabled):not(.is-wizard-nav-disabled):hover .wizard-nav-btn__icon,
body.dark-mode.page-register .register-wizard-buttons .wizard-nav-btn--submit.btn-primary:not(:disabled):not(.is-wizard-nav-disabled):hover .wizard-nav-btn__icon polyline,
body.dark-mode.page-register .register-wizard-buttons .wizard-nav-btn--submit.btn-primary:not(:disabled):not(.is-wizard-nav-disabled):active .wizard-nav-btn__icon,
body.dark-mode.page-register .register-wizard-buttons .wizard-nav-btn--submit.btn-primary:not(:disabled):not(.is-wizard-nav-disabled):active .wizard-nav-btn__icon polyline {
    color: #ffffff !important;
    stroke: currentColor !important;
}

body.dark-mode.page-register .register-wizard-buttons .wizard-nav-btn.btn-secondary:disabled,
body.dark-mode.page-register .register-wizard-buttons .wizard-nav-btn.btn-secondary.is-wizard-nav-disabled,
body.dark-mode.page-register .register-wizard-buttons .wizard-nav-btn.btn-primary:disabled,
body.dark-mode.page-register .register-wizard-buttons .wizard-nav-btn.btn-primary.is-wizard-nav-disabled {
    background: #f3f4f6 !important;
    color: rgba(26, 26, 26, 0.42) !important;
    border: none !important;
}

body.dark-mode.page-register .register-wizard-buttons .wizard-nav-btn.btn-secondary:disabled::before,
body.dark-mode.page-register .register-wizard-buttons .wizard-nav-btn.btn-secondary.is-wizard-nav-disabled::before,
body.dark-mode.page-register .register-wizard-buttons .wizard-nav-btn.btn-primary:disabled::before,
body.dark-mode.page-register .register-wizard-buttons .wizard-nav-btn.btn-primary.is-wizard-nav-disabled::before {
    display: none !important;
}

/**
 * Register wizard — desktop: seitliche Nav-Pills.
 */
@media (min-width: 1025px) {

/* Zurück / Weiter / Registrieren: 40 % Viewport-Höhe, schmal, nur Pfeil-Icon (alle Schritte inkl. Vorschau) */
    body.page-register .register-wizard-buttons .btn {
        min-width: 0 !important;
        width: var(--register-wizard-nav-btn-width, 68px) !important;
        height: var(--register-wizard-nav-btn-height, 40dvh) !important;
        min-height: var(--register-wizard-nav-btn-height, 40dvh) !important;
        max-height: var(--register-wizard-nav-btn-height, 40dvh) !important;
        padding: 0 !important;
        font-size: 0 !important;
    }

    body.page-register .register-wizard-buttons .wizard-nav-btn {
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 0 !important;
        min-width: 0 !important;
        width: var(--register-wizard-nav-btn-width, 68px) !important;
        height: var(--register-wizard-nav-btn-height, 40dvh) !important;
        min-height: var(--register-wizard-nav-btn-height, 40dvh) !important;
        max-height: var(--register-wizard-nav-btn-height, 40dvh) !important;
        padding: 0 !important;
        border-radius: var(--register-wizard-nav-btn-radius, 34px) !important;
    }

    body.page-register .register-wizard-buttons .wizard-nav-btn__label {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        clip-path: inset(50%) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }

    body.page-register .register-wizard-buttons .wizard-nav-btn__icon {
        width: var(--register-wizard-nav-btn-icon, 34px) !important;
        height: var(--register-wizard-nav-btn-icon, 34px) !important;
        flex-shrink: 0;
    }

    body.page-register {
        --register-wizard-nav-btn-height: 40dvh;
        --register-wizard-nav-btn-width: 68px;
        --register-wizard-nav-btn-radius: 34px;
        --register-wizard-nav-btn-icon: 34px;
        /* Fallback; JS setzt --register-wizard-head-zone aus gemessener Head-Höhe */
        --register-wizard-head-zone: calc(
            var(--register-wizard-rail-inset-top) + var(--register-wizard-step-size) + 8px +
                var(--register-wizard-step-label-size) + var(--register-wizard-step-label-size) + 12px + 8px
        );
        /* Desktop: Buttons seitlich mittig — kein extra Boden-Reserve */
        --register-wizard-nav-zone: max(16px, env(safe-area-inset-bottom, 0px));
        min-height: 100dvh !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        display: block !important;
        box-sizing: border-box;
    }

    body.page-register .wizard-layout {
        min-height: 100dvh !important;
        height: 100dvh !important;
        padding-top: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        position: relative !important;
        box-sizing: border-box;
    }

    body.page-register .register-wizard-form-layer {
        position: fixed !important;
        z-index: 1;
        top: var(--register-wizard-head-zone) !important;
        bottom: var(--register-wizard-nav-zone) !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        flex: none !important;
        margin: 0 !important;
        padding: 0
            calc(
                max(24px, env(safe-area-inset-right, 0px)) + var(--register-wizard-nav-btn-width, 52px) +
                    var(--register-wizard-preview-nav-gap, 12px)
            )
            0
            calc(
                max(24px, env(safe-area-inset-left, 0px)) + var(--register-wizard-nav-btn-width, 52px) +
                    var(--register-wizard-preview-nav-gap, 12px)
            ) !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
        scroll-padding-top: 8px;
        scroll-padding-bottom: 12px;
        touch-action: pan-y;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    body.page-register .register-wizard-form-layer > .container {
        flex: 0 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        min-height: 0 !important;
        align-self: stretch !important;
        width: 100% !important;
        max-width: var(--register-form-max-width, min(420px, 100%)) !important;
        min-height: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 12px 20px max(16px, env(safe-area-inset-bottom, 0px)) !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        max-height: none !important;
    }

    body.page-register.kinma-wizard-kinma-step .register-wizard-form-layer > .container {
        max-width: 100% !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: max(20px, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(20px, env(safe-area-inset-right, 0px)) !important;
    }

    body.page-register .register-wizard-form-layer .register-account-step__form.login-form {
        margin-top: 0 !important;
    }

    /* Wizard boot: hide nav/content until saved step + button state are applied (no flash). */
    body.page-register.kinma-register-wizard-restoring .register-wizard-buttons-island,
    body.page-register.kinma-register-wizard-restoring .register-wizard-form-layer .wizard-content {
        visibility: hidden;
        pointer-events: none;
    }

    /* Zurück / Weiter / Registrieren: Desktop — am Viewport-Rand */
    body.page-register .register-wizard-buttons-island {
        top: 0 !important;
        bottom: 0 !important;
    }

    body.page-register .register-wizard-buttons .btn {
        top: 50% !important;
        bottom: auto !important;
        transform: translateY(-50%) !important;
    }

    body.page-register .register-wizard-buttons .btn-prev {
        left: max(24px, env(safe-area-inset-left, 0px)) !important;
        right: auto !important;
    }

    body.page-register .register-wizard-buttons .btn-next,
    body.page-register .register-wizard-buttons .btn-submit {
        right: max(24px, env(safe-area-inset-right, 0px)) !important;
        left: auto !important;
    }

    body.page-register .register-wizard-buttons .wizard-nav-btn:disabled,
    body.page-register .register-wizard-buttons .wizard-nav-btn.is-wizard-nav-disabled {
        transform: translateY(-50%) !important;
    }

} /* min-width: 1025px — desktop side nav */

/* ─── Vorschau: dunkler Body, Profil-Insel zwischen Zurück/Accept, Abstand unten ─── */
body.page-register.kinma-wizard-profile-preview-step {
    --register-wizard-preview-nav-gap: 12px;
    --register-wizard-preview-bottom-gap: 24px;
    --register-wizard-preview-inset-left: calc(
        max(24px, env(safe-area-inset-left, 0px)) + var(--register-wizard-nav-btn-width, 52px) +
            var(--register-wizard-preview-nav-gap, 12px)
    );
    --register-wizard-preview-inset-right: calc(
        max(24px, env(safe-area-inset-right, 0px)) + var(--register-wizard-nav-btn-width, 52px) +
            var(--register-wizard-preview-nav-gap, 12px)
    );
    background: #1a1a1a !important;
}

body.page-register.kinma-wizard-profile-preview-step .wizard-layout,
body.page-register.kinma-wizard-profile-preview-step .register-wizard-form-layer {
    background: #1a1a1a !important;
}

body.page-register.kinma-wizard-profile-preview-step .register-wizard-form-layer {
    padding-left: var(--register-wizard-preview-inset-left) !important;
    padding-right: var(--register-wizard-preview-inset-right) !important;
    padding-bottom: calc(
        var(--register-wizard-preview-bottom-gap, 24px) + var(--register-wizard-nav-zone, 16px)
    ) !important;
    align-items: stretch !important;
    justify-content: center !important;
}

/* Vorschau: kein generisches .wizard-content-Minheight (280px) — nur Profil-Inhalt */
body.page-register.kinma-wizard-profile-preview-step #registerForm {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.page-register.kinma-wizard-profile-preview-step #registerForm .wizard-content {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
}

body.page-register.kinma-wizard-profile-preview-step #registerForm .wizard-content > .wizard-content__slide-spacer {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.page-register.kinma-wizard-profile-preview-step #registerForm .wizard-content__stage {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

body.page-register.kinma-wizard-profile-preview-step #registerForm .wizard-content__stage > div:has(#profile-preview-wrapper) {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    flex: 0 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
}

body.page-register.kinma-wizard-profile-preview-step .register-wizard-form-layer > .container {
    flex: 1 1 auto !important;
    align-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 12px 0 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

body.page-register.kinma-wizard-profile-preview-step #profile-preview-wrapper {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: 100% !important;
    margin: 0 auto !important;
    padding: 0 0 var(--register-wizard-preview-bottom-gap, 24px) !important;
    background: transparent !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    flex: 1 1 auto !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    z-index: 0 !important;
    box-sizing: border-box !important;
}

body.page-register.kinma-wizard-profile-preview-step #profile-preview-wrapper .profile-background,
body.page-register.kinma-wizard-profile-preview-step #profile-preview-wrapper .profile-content-new {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

body.page-register.kinma-wizard-profile-preview-step #profile-preview-wrapper .profile-background {
    position: relative !important;
    min-height: 0 !important;
    height: auto !important;
    flex: 1 1 auto !important;
}

body.page-register.kinma-wizard-profile-preview-step #profile-preview-wrapper .profile-content-new {
    border-radius: 16px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.06) !important;
}

/* ─── Register progress: Kinma-Größe, gepunktete Zukunft, größere Labels ─── */
body.page-register {
    --register-wizard-nav-ink: #1a1a1a;
    --register-wizard-progress-green: #22c55e;
    --register-wizard-future-border: #d1d5db;
    --register-wizard-future-ink: #94a3b8;
    --register-wizard-rail-grey-end: #eef1f4;
    --register-wizard-rail-grey-tip: var(--register-wizard-future-border);
    --register-wizard-kinma-size: 52px;
    --register-wizard-step-size: var(--register-wizard-kinma-size);
    /* Erledigt: kleinerer Kreis + dickerer weißer Ring; aktiv: volle Rail-Größe */
    --register-wizard-step-circle-size: calc(var(--register-wizard-kinma-size) * 0.74);
    --register-wizard-step-completed-ring-width: 4px;
    --register-wizard-step-active-ring-width: 5px;
    --register-wizard-step-active-size: var(--register-wizard-step-size);
    --register-wizard-step-font: calc(var(--register-wizard-step-size) * 0.4);
    --register-wizard-step-active-font: calc(var(--register-wizard-step-active-size) * 0.4);
    --register-wizard-step-check-scale: 0.54;
    --register-wizard-step-label-size: 12px;
    --register-wizard-step-label-active-size: 15px;
    --register-wizard-step-label-pill-radius: 9999px;
    /* Abgeschlossen: oben bündig (0), unten dezente Tab-Ecke — kein voller Pill-Bogen */
    --register-wizard-step-label-completed-bottom-radius: 10px;
    --register-wizard-step-label-completed-radius: 0 0 var(--register-wizard-step-label-completed-bottom-radius)
        var(--register-wizard-step-label-completed-bottom-radius);
    --register-wizard-step-label-gap: 8px;
    --register-wizard-motion: 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    /* Karussell-Slide (Mobile): etwas langsamer als Panel-Slide, damit der Wechsel sichtbar bleibt */
    --register-wizard-progress-carousel-motion: var(--register-wizard-motion);
    /* Kreis + Label: Geometrie (inkl. Unrounding) animiert mit Panel-Slide (0,32s) */
    --register-wizard-circle-motion: 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    --register-wizard-rail-weight: 3px;
    /* Taper am rechten Rail-Ende (50% × rail-weight/step-size); feste % für clip-path in Firefox */
    --register-wizard-rail-taper-pct: 2.8846153846153847%;
    /* Gemeinsame Rail-Zeile: Kinma + Schritt-Kreise + Linie auf einer Höhe */
    --register-wizard-rail-inset-top: max(20px, env(safe-area-inset-top, 0px));
}

body.page-register .register-wizard-head,
body.page-register .wizard-layout .register-wizard-head,
body.page-register header.register-wizard-head {
    background: transparent !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

body.page-register .register-wizard-head__progress,
body.page-register .register-wizard-head__kinma {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

body.page-register .register-wizard-head {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1005;
    align-items: flex-start !important;
    padding-top: var(--register-wizard-rail-inset-top) !important;
    padding-bottom: calc(var(--register-wizard-step-label-active-size) + 12px) !important;
    min-height: calc(
        var(--register-wizard-rail-inset-top) + var(--register-wizard-step-size) +
            var(--register-wizard-step-label-active-size) + 12px
    ) !important;
    overflow: visible;
}

/* Grüner Fortschritts-Verlauf: hinter Kinma + Kreise (z-index 0 im Head) */
body.page-register .register-wizard-progress-glow {
    position: fixed;
    z-index: 1;
    margin: 0;
    padding: 0;
    border: none;
    /* Links flach (ab Kinma-Mitte), rechts vollständig rund (Pill-Kappe) */
    border-radius: 0 9999px 9999px 0;
    pointer-events: none;
    box-sizing: border-box;
    background: var(--register-wizard-progress-green, #22c55e);
    box-shadow: none;
    opacity: 1;
    transform: translateZ(0);
    backface-visibility: hidden;
    /* left/top folgen Kinma sofort — nur Breite animieren (sonst grüner Balken links vom Logo) */
    transition:
        width var(--register-wizard-motion),
        height var(--register-wizard-motion),
        opacity 0.2s ease;
}

body.page-register .register-wizard-progress-glow.is-hidden {
    opacity: 0;
    pointer-events: none;
}

body.page-register .register-wizard-progress-glow.is-instant {
    transition: none !important;
}

/* Registrieren: grüner Balken bis zum rechten Bildschirmrand */
body.page-register .register-wizard-progress-glow.register-wizard-progress-glow--complete {
    transition-duration: 0.48s;
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

body.dark-mode.page-register .register-wizard-progress-glow {
    background: var(--register-wizard-progress-green, #22c55e);
    box-shadow: 0 0 32px rgba(74, 222, 128, 0.18);
}

body.page-register .register-wizard-progress-rail {
    position: absolute;
    z-index: 0;
    left: 0;
    right: 0;
    height: var(--register-wizard-step-size);
    pointer-events: none;
    box-sizing: border-box;
}

/* Rail-Linie hinter Kinma-Logo (links), nicht darüber */
body.page-register .settings-controls-container,
body.page-register .settings-top-left {
    z-index: 1010;
}

body.page-register .register-wizard-progress-segment {
    z-index: 0;
}

/* Ein Segment pro Lücke zwischen zwei Kreisen (Kinma → Schritt 1 → …) */
body.page-register .register-wizard-progress-segment {
    position: absolute;
    top: 0;
    height: 100%;
    min-width: 0;
    box-sizing: border-box;
}

body.page-register .register-wizard-progress-segment__track,
body.page-register .register-wizard-progress-segment__fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    border-radius: 999px;
}

/* Grauer Verlauf zwischen jedem Kreis; grüner Fortschritt darüber (.register-wizard-progress-glow) */
body.page-register .register-wizard-progress-segment__track {
    display: block !important;
    width: 100% !important;
    opacity: 1 !important;
    overflow: hidden;
    background: transparent !important;
}

body.page-register .register-wizard-progress-segment__track::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(
        to left,
        var(--register-wizard-rail-grey-tip, #d1d5db) 0%,
        transparent 100%
    );
}

body.page-register .register-wizard-progress-segment--past-current .register-wizard-progress-segment__track,
body.page-register .register-wizard-progress-segment--ahead .register-wizard-progress-segment__track {
    opacity: 0 !important;
}

/* Grauer Rest: Trapez aktueller Schritt (links hoch) → letzter Schritt (rechts dünn) */
body.page-register .register-wizard-progress-rail__remainder {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    transform: none;
    border-radius: 0;
    z-index: 0;
    pointer-events: none;
    box-sizing: border-box;
    overflow: hidden;
    background: transparent;
    clip-path: polygon(
        0 0,
        100% calc(50% - var(--register-wizard-rail-taper-pct)),
        100% calc(50% + var(--register-wizard-rail-taper-pct)),
        0 100%
    );
    will-change: left, width;
    transition:
        left var(--register-wizard-motion),
        width var(--register-wizard-motion),
        opacity 0.2s ease;
}

/* Gradient auf Kind-Layer: Firefox clip-path + background auf einem Element wirkt oft bandig */
body.page-register .register-wizard-progress-rail__remainder::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        to left,
        var(--register-wizard-rail-grey-tip, #d1d5db) 0%,
        transparent 100%
    );
}

body.page-register .register-wizard-progress-rail__remainder.is-hidden {
    opacity: 0;
    pointer-events: none;
}

body.page-register .register-wizard-progress-rail__remainder.is-instant {
    transition: none !important;
}

body.page-register .register-wizard-progress-segment__fill {
    display: none !important;
}

body.page-register .register-wizard-head__kinma,
body.page-register .register-wizard-head__progress {
    position: relative;
    z-index: 2;
}

body.page-register .register-wizard-head__kinma .kinma-logo-btn,
body.page-register .register-wizard-head__kinma .kinma-logo-island,
body.page-register .register-wizard-head__kinma .settings-logo-btn {
    position: relative;
    z-index: 2;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px #ffffff;
}

body.page-register .left-nav-cluster--auth .kinma-logo-island.kinma-logo-btn,
body.page-register .left-nav-cluster--auth .kinma-nav-island {
    position: relative;
    z-index: 2;
}

body.page-register .register-wizard-steps .wizard-step .step-number {
    position: relative;
    z-index: 2;
    isolation: isolate;
}

body.page-register .register-wizard-head__progress {
    flex: 0 0 auto;
    width: 100%;
    height: auto !important;
    min-height: var(--register-wizard-step-size) !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 0 0 10px !important;
    box-sizing: border-box;
    overflow: visible;
    display: flex !important;
    align-items: flex-start !important;
}

body.page-register .register-wizard-steps {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    /* Nur Kreiszeile in der Rail-Höhe; Labels hängen darunter (absolut) */
    min-height: var(--register-wizard-step-size) !important;
    gap: 0 !important;
}

body.page-register .register-wizard-steps::before {
    display: none !important;
}

body.page-register .register-wizard-steps .wizard-step {
    flex: 1 1 0 !important;
    min-width: 0;
    margin: 0 !important;
    width: auto !important;
    padding: 0 !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    box-sizing: border-box;
}

body.page-register .register-wizard-steps .wizard-step.register-wizard-step-nav.is-step-nav-clickable {
    cursor: pointer;
}

body.page-register .register-wizard-steps .wizard-step.register-wizard-step-nav.is-step-nav-clickable .step-number {
    cursor: pointer;
}

/* Hover: nur Zukunft-Kreise skalieren; erledigt nur Check-Kreis (::before) */
body.page-register
    .register-wizard-steps
    .wizard-step.register-wizard-step-nav.is-step-nav-clickable:not(.active):not(.completed):hover
    .step-number {
    transform: scale(1.04);
}

body.page-register
    .register-wizard-steps
    .wizard-step.completed.register-wizard-step-nav.is-step-nav-clickable:hover
    .step-number {
    transform: none !important;
}

body.page-register .register-wizard-steps .wizard-step.register-wizard-step-nav.is-step-nav-clickable:focus-visible {
    outline: none;
}

body.page-register .register-wizard-steps .wizard-step.register-wizard-step-nav.is-step-nav-clickable:focus-visible .step-number {
    outline: 2px solid #4285f4;
    outline-offset: 3px;
}

body.page-register .register-wizard-steps .wizard-step.register-wizard-step-nav.is-step-nav-current {
    cursor: default;
}

body.page-register .register-wizard-kinma-pin-layer .step-number--kinma.is-step-nav-clickable {
    cursor: pointer;
}

body.page-register .register-wizard-kinma-pin-layer .step-number--kinma.is-step-nav-clickable:hover {
    transform: scale(1.04);
}

body.page-register .register-wizard-kinma-pin-layer .step-number--kinma.is-step-nav-clickable:focus-visible {
    outline: 2px solid #4285f4;
    outline-offset: 3px;
}

body.page-register .register-wizard-steps .wizard-step--kinma.register-wizard-step-nav.is-step-nav-clickable .step-number--kinma {
    cursor: pointer;
}

body.page-register
    .register-wizard-steps
    .wizard-step--kinma.register-wizard-step-nav.is-step-nav-clickable:hover
    .step-number--kinma {
    transform: scale(1.04);
}

body.page-register .register-wizard-steps .wizard-step:not(:last-child) .step-number {
    margin-right: 0 !important;
}

body.page-register .register-wizard-steps .wizard-step:not(.active):not(.completed) {
    --register-wizard-step-ahead-scale: 1;
}

body.page-register .register-wizard-steps .wizard-step:not(.active):not(.completed) .step-number {
    width: calc(var(--register-wizard-step-size) * var(--register-wizard-step-ahead-scale, 1)) !important;
    height: calc(var(--register-wizard-step-size) * var(--register-wizard-step-ahead-scale, 1)) !important;
    min-width: calc(var(--register-wizard-step-size) * var(--register-wizard-step-ahead-scale, 1)) !important;
    max-width: calc(var(--register-wizard-step-size) * var(--register-wizard-step-ahead-scale, 1)) !important;
    min-height: calc(var(--register-wizard-step-size) * var(--register-wizard-step-ahead-scale, 1)) !important;
    margin-top: calc(
        (var(--register-wizard-step-size) - var(--register-wizard-step-size) * var(--register-wizard-step-ahead-scale, 1)) /
            2
    ) !important;
    font-size: calc(var(--register-wizard-step-font) * var(--register-wizard-step-ahead-scale, 1)) !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    border: 2px dashed var(--register-wizard-future-border, #d1d5db) !important;
    color: var(--register-wizard-future-ink, #94a3b8) !important;
}

body.page-register .register-wizard-steps .step-number {
    width: var(--register-wizard-step-size) !important;
    height: var(--register-wizard-step-size) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    color: var(--register-wizard-future-ink, #94a3b8) !important;
    font-size: var(--register-wizard-step-font) !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    flex-shrink: 0 !important;
    transition:
        width var(--register-wizard-circle-motion),
        height var(--register-wizard-circle-motion),
        min-width var(--register-wizard-circle-motion),
        max-width var(--register-wizard-circle-motion),
        min-height var(--register-wizard-circle-motion),
        margin-top var(--register-wizard-circle-motion),
        padding var(--register-wizard-circle-motion),
        background-color var(--register-wizard-circle-motion),
        border-color var(--register-wizard-circle-motion),
        font-size var(--register-wizard-circle-motion),
        transform var(--register-wizard-circle-motion) !important;
}

body.page-register .register-wizard-steps .wizard-step:not(.active):not(.completed) .step-label {
    top: calc(
        var(--register-wizard-step-size) * var(--register-wizard-step-ahead-scale, 1) +
            var(--register-wizard-step-label-gap)
    ) !important;
    font-size: calc(
        var(--register-wizard-step-label-size) * var(--register-wizard-step-ahead-scale, 1)
    ) !important;
    padding: calc(5px * var(--register-wizard-step-ahead-scale, 1))
        calc(12px * var(--register-wizard-step-ahead-scale, 1))
        calc(6px * var(--register-wizard-step-ahead-scale, 1)) !important;
}

/* Aktiver Schritt: volle Rail-Größe, weißer Kreis, 5px Rand */
body.page-register .register-wizard-steps .wizard-step.active .step-number {
    width: var(--register-wizard-step-active-size) !important;
    height: var(--register-wizard-step-active-size) !important;
    min-width: var(--register-wizard-step-active-size) !important;
    max-width: var(--register-wizard-step-active-size) !important;
    min-height: var(--register-wizard-step-active-size) !important;
    margin-top: 0 !important;
    font-size: var(--register-wizard-step-active-font) !important;
    background: #ffffff !important;
    border: var(--register-wizard-step-active-ring-width, 5px) solid var(--register-wizard-nav-ink, #1a1a1a) !important;
    outline: none !important;
    color: var(--register-wizard-nav-ink, #1a1a1a) !important;
    font-weight: 700 !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    transform: none !important;
    transition:
        width var(--register-wizard-circle-motion),
        height var(--register-wizard-circle-motion),
        min-width var(--register-wizard-circle-motion),
        max-width var(--register-wizard-circle-motion),
        min-height var(--register-wizard-circle-motion),
        margin-top var(--register-wizard-circle-motion),
        background-color var(--register-wizard-circle-motion),
        border-color var(--register-wizard-circle-motion),
        border-width var(--register-wizard-circle-motion),
        color var(--register-wizard-circle-motion) !important;
}

body.page-register .register-wizard-steps .wizard-step.completed .step-number {
    position: relative !important;
    z-index: 4 !important;
    display: block !important;
    width: var(--register-wizard-step-circle-size) !important;
    min-width: var(--register-wizard-step-circle-size) !important;
    max-width: var(--register-wizard-step-circle-size) !important;
    height: var(--register-wizard-step-circle-size) !important;
    min-height: var(--register-wizard-step-circle-size) !important;
    margin-top: calc(
        (var(--register-wizard-step-size) - var(--register-wizard-step-circle-size)) / 2
    ) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    color: transparent !important;
    font-size: 0 !important;
    box-shadow: none !important;
    isolation: isolate;
}

@keyframes kinma-register-step-check-icon-in {
    from {
        transform: translate(-50%, -50%) scale(0.55);
    }
    to {
        transform: translate(-50%, -50%) scale(1);
    }
}

/* Grüner Kreis skaliert mit dem Schrumpfen des Wrappers (100 %, zentriert) */
body.page-register .register-wizard-steps .wizard-step.completed .step-number::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-sizing: border-box;
    background: var(--register-wizard-progress-green, #22c55e);
    border: var(--register-wizard-step-completed-ring-width, 5px) solid #ffffff;
    box-shadow: none;
    z-index: 2;
    transform: translate(-50%, -50%);
    opacity: 1;
    transition:
        opacity calc(var(--register-wizard-circle-motion) * 0.45) ease,
        border-color var(--register-wizard-circle-motion);
}

body.page-register .register-wizard-steps .wizard-step.completed .step-number::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 3;
    width: 100%;
    height: 100%;
    margin: 0;
    transform: translate(-50%, -50%);
    opacity: 1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' stroke='white' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 52%;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    animation: kinma-register-step-check-icon-in calc(var(--register-wizard-circle-motion) * 0.75)
        cubic-bezier(0.22, 1, 0.36, 1) calc(var(--register-wizard-circle-motion) * 0.38) both;
}

body.page-register
    .register-wizard-steps
    .wizard-step.completed.register-wizard-step-nav.is-step-nav-clickable:hover
    .step-number::before {
    transform: translate(-50%, -50%) scale(1.04);
    transition: transform var(--register-wizard-circle-motion);
}

body.page-register
    .register-wizard-steps
    .wizard-step.completed.register-wizard-step-nav.is-step-nav-clickable:hover
    .step-number::after {
    transform: translate(-50%, -50%) scale(1.04);
    transition: transform var(--register-wizard-circle-motion);
}

body.page-register .register-wizard-steps .step-label {
    position: absolute !important;
    top: calc(var(--register-wizard-step-size) + var(--register-wizard-step-label-gap)) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: inline-block !important;
    font-size: var(--register-wizard-step-label-size) !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    line-height: 1.2 !important;
    color: var(--register-wizard-future-ink, #94a3b8) !important;
    border-top-left-radius: var(--register-wizard-step-label-pill-radius, 9999px) !important;
    border-top-right-radius: var(--register-wizard-step-label-pill-radius, 9999px) !important;
    border-bottom-left-radius: var(--register-wizard-step-label-pill-radius, 9999px) !important;
    border-bottom-right-radius: var(--register-wizard-step-label-pill-radius, 9999px) !important;
    background: #ffffff !important;
    border: 2px dashed var(--register-wizard-future-border, #d1d5db) !important;
    padding: 5px 12px 6px !important;
    margin-top: 0;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    transition:
        top var(--register-wizard-circle-motion),
        margin-top var(--register-wizard-circle-motion),
        padding var(--register-wizard-circle-motion),
        background-color var(--register-wizard-circle-motion),
        color var(--register-wizard-circle-motion),
        border-color var(--register-wizard-circle-motion),
        border-top-left-radius var(--register-wizard-circle-motion),
        border-top-right-radius var(--register-wizard-circle-motion),
        border-bottom-left-radius var(--register-wizard-circle-motion),
        border-bottom-right-radius var(--register-wizard-circle-motion),
        font-size var(--register-wizard-circle-motion),
        transform var(--register-wizard-circle-motion);
}

body.page-register .register-wizard-steps .wizard-step.active .step-label {
    top: calc(var(--register-wizard-step-active-size) + var(--register-wizard-step-label-gap)) !important;
    margin-top: 0 !important;
    padding: 6px 14px 7px !important;
    border-top-left-radius: var(--register-wizard-step-label-pill-radius, 9999px) !important;
    border-top-right-radius: var(--register-wizard-step-label-pill-radius, 9999px) !important;
    border-bottom-left-radius: var(--register-wizard-step-label-pill-radius, 9999px) !important;
    border-bottom-right-radius: var(--register-wizard-step-label-pill-radius, 9999px) !important;
    background: #ffffff !important;
    border: 2px solid #ffffff !important;
    color: var(--register-wizard-nav-ink, #1a1a1a) !important;
    font-size: var(--register-wizard-step-label-active-size, 15px) !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    transform: translateX(-50%) translateY(0) !important;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
    transition:
        top var(--register-wizard-circle-motion),
        margin-top var(--register-wizard-circle-motion),
        padding var(--register-wizard-circle-motion),
        background-color var(--register-wizard-circle-motion),
        color var(--register-wizard-circle-motion),
        border-color var(--register-wizard-circle-motion),
        border-top-left-radius var(--register-wizard-circle-motion),
        border-top-right-radius var(--register-wizard-circle-motion),
        border-bottom-left-radius var(--register-wizard-circle-motion),
        border-bottom-right-radius var(--register-wizard-circle-motion),
        font-size var(--register-wizard-circle-motion),
        transform var(--register-wizard-circle-motion);
}

/* Erledigt: grüne Pill — oben flach (Balken-Anschluss), unten gerundet; Radius animiert */
body.page-register .register-wizard-steps .wizard-step.completed .step-label {
    position: absolute !important;
    top: calc(var(--register-wizard-step-active-size, var(--register-wizard-step-size)) + var(--register-wizard-step-label-gap)) !important;
    left: 50% !important;
    transform: translateX(-50%)
        translateY(
            calc(
                -1 *
                    (
                        var(--register-wizard-step-label-gap) +
                        (var(--register-wizard-step-size) - var(--register-wizard-step-circle-size)) / 2
                    )
            )
        ) !important;
    margin-top: -1px !important;
    display: inline-block !important;
    padding: 6px 12px 7px !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: var(--register-wizard-step-label-completed-bottom-radius, 10px) !important;
    border-bottom-right-radius: var(--register-wizard-step-label-completed-bottom-radius, 10px) !important;
    background: var(--register-wizard-progress-green, #22c55e) !important;
    border: 2px solid var(--register-wizard-progress-green, #22c55e) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    z-index: 0 !important;
    transition:
        top var(--register-wizard-circle-motion),
        margin-top var(--register-wizard-circle-motion),
        padding var(--register-wizard-circle-motion),
        background-color var(--register-wizard-circle-motion),
        color var(--register-wizard-circle-motion),
        border-color var(--register-wizard-circle-motion),
        border-top-left-radius var(--register-wizard-circle-motion),
        border-top-right-radius var(--register-wizard-circle-motion),
        border-bottom-left-radius var(--register-wizard-circle-motion),
        border-bottom-right-radius var(--register-wizard-circle-motion),
        transform var(--register-wizard-circle-motion);
}

@media (prefers-reduced-motion: reduce) {
    body.page-register {
        --register-wizard-motion: 0.01ms;
        --register-wizard-circle-motion: 0.01ms;
    }

    body.page-register .register-wizard-steps .wizard-step.completed .step-number::after {
        animation: none;
        opacity: 1;
        transform: translate(-50%, -50%);
    }

    body.page-register .register-wizard-steps .wizard-step.completed .step-label,
    body.page-register .register-wizard-steps .wizard-step.active .step-label {
        transform: translateX(-50%) !important;
    }

    /* seitliche Nav: kein Scale/Lift nur optisch (Hintergrund bleibt aktiv) */
    body.page-register .register-wizard-buttons .wizard-nav-btn.btn-primary:not(:disabled):not(.is-wizard-nav-disabled):hover,
    body.page-register .register-wizard-buttons .wizard-nav-btn.btn-secondary:not(:disabled):not(.is-wizard-nav-disabled):hover,
    body.page-register .register-wizard-buttons .wizard-nav-btn--submit.btn-primary:not(:disabled):hover,
    body.dark-mode.page-register .register-wizard-buttons .wizard-nav-btn.btn-primary:not(:disabled):not(.is-wizard-nav-disabled):hover,
    body.dark-mode.page-register .register-wizard-buttons .wizard-nav-btn.btn-secondary:not(:disabled):not(.is-wizard-nav-disabled):hover,
    body.dark-mode.page-register .register-wizard-buttons .wizard-nav-btn--submit.btn-primary:not(:disabled):hover {
        transform: translateY(-50%) !important;
    }

    body.page-register .register-wizard-buttons .wizard-nav-btn.btn-primary:not(:disabled):not(.is-wizard-nav-disabled):active,
    body.page-register .register-wizard-buttons .wizard-nav-btn.btn-secondary:not(:disabled):not(.is-wizard-nav-disabled):active,
    body.page-register .register-wizard-buttons .wizard-nav-btn--submit.btn-primary:not(:disabled):active,
    body.dark-mode.page-register .register-wizard-buttons .wizard-nav-btn.btn-primary:not(:disabled):not(.is-wizard-nav-disabled):active,
    body.dark-mode.page-register .register-wizard-buttons .wizard-nav-btn.btn-secondary:not(:disabled):not(.is-wizard-nav-disabled):active,
    body.dark-mode.page-register .register-wizard-buttons .wizard-nav-btn--submit.btn-primary:not(:disabled):active {
        transform: translateY(-50%) !important;
    }
}

/* Kinma links (settings) — gleiche Rail-Höhe wie Schritte, auch auf Mobile */
body.page-register .left-nav-cluster--auth {
    display: flex !important;
    top: var(--register-wizard-rail-inset-top) !important;
}

body.page-register .left-nav-cluster--auth .kinma-nav-island,
body.page-register .left-nav-cluster--auth .kinma-logo-island.kinma-logo-btn {
    width: var(--register-wizard-step-size) !important;
    height: var(--register-wizard-step-size) !important;
    min-width: var(--register-wizard-step-size) !important;
    min-height: var(--register-wizard-step-size) !important;
    max-width: var(--register-wizard-step-size) !important;
}

/* auth-mobile: generische Wizard-Button-Leiste unten — Register nutzt seitliche Nav */
body.page-register .wizard-layout .register-wizard-buttons-island,
body.page-register .register-wizard-buttons-island {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    transform: none !important;
    box-shadow: none !important;
    flex: none !important;
    height: auto !important;
    min-height: 0 !important;
}

body.dark-mode.page-register .register-wizard-progress-segment__track::before {
    background: linear-gradient(
        to left,
        var(--register-wizard-rail-grey-tip, #6b7280) 0%,
        transparent 100%
    );
}

body.dark-mode.page-register {
    --register-wizard-future-border: #6b7280;
    --register-wizard-future-ink: #9ca3af;
    --register-wizard-rail-grey-end: #4b5563;
    --register-wizard-rail-grey-tip: var(--register-wizard-future-border);
}

body.dark-mode.page-register .register-wizard-progress-rail__remainder::before {
    background: linear-gradient(
        to left,
        var(--register-wizard-rail-grey-tip, #6b7280) 0%,
        transparent 100%
    );
}

body.dark-mode.page-register .register-wizard-steps .wizard-step:not(.active):not(.completed) .step-number {
    background: #1f2937 !important;
    border-style: dashed !important;
    border-color: var(--register-wizard-future-border, #6b7280) !important;
    color: var(--register-wizard-future-ink, #9ca3af) !important;
}

body.dark-mode.page-register .register-wizard-steps .wizard-step.active .step-number {
    background: #ffffff !important;
    border: var(--register-wizard-step-active-ring-width, 5px) solid var(--register-wizard-nav-ink, #1a1a1a) !important;
    outline: none !important;
    color: var(--register-wizard-nav-ink, #1a1a1a) !important;
    font-weight: 700 !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
}

body.dark-mode.page-register .register-wizard-steps .step-label {
    background: #1f2937 !important;
    border: 2px dashed var(--register-wizard-future-border, #6b7280) !important;
    color: var(--register-wizard-future-ink, #9ca3af) !important;
}

body.dark-mode.page-register .register-wizard-steps .wizard-step.active .step-label {
    color: var(--register-wizard-nav-ink, #1a1a1a) !important;
    background: #ffffff !important;
    border: 2px solid #ffffff !important;
    font-size: var(--register-wizard-step-label-active-size, 15px) !important;
    font-weight: 700 !important;
}

body.dark-mode.page-register .register-wizard-steps .wizard-step.completed .step-number {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

body.dark-mode.page-register .register-wizard-steps .wizard-step.completed .step-number::before {
    background: var(--register-wizard-progress-green, #22c55e) !important;
    border: var(--register-wizard-step-completed-ring-width, 4px) solid #ffffff !important;
    box-shadow: none !important;
}

body.dark-mode.page-register .register-wizard-steps .wizard-step.completed .step-label {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: var(--register-wizard-step-label-completed-bottom-radius, 10px) !important;
    border-bottom-right-radius: var(--register-wizard-step-label-completed-bottom-radius, 10px) !important;
    border: 2px solid var(--register-wizard-progress-green, #22c55e) !important;
    background: var(--register-wizard-progress-green, #22c55e) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* ─── Schrittwechsel: fester Viewport-Slot, Inhalt vertikal zentriert ─── */
body.page-register:not(.kinma-wizard-profile-preview-step):not(.kinma-wizard-register-success-step) {
    --register-wizard-content-slot-height: calc(
        100dvh - var(--register-wizard-head-zone, 120px) - var(--register-wizard-nav-zone, 96px)
    );
}

body.page-register:not(.kinma-wizard-profile-preview-step):not(.kinma-wizard-register-success-step)
    #registerForm
    .wizard-content {
    position: relative;
    overflow: visible;
    box-sizing: border-box;
    min-height: 0;
    max-height: 100%;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: stretch;
}

/* Desktop: volle Viewport-Breite für Slide-Bühne */
@media (min-width: 1025px) {
    body.page-register:not(.kinma-wizard-profile-preview-step):not(.kinma-wizard-register-success-step)
        #registerForm
        .wizard-content {
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }
}

body.page-register:not(.kinma-wizard-profile-preview-step):not(.kinma-wizard-register-success-step)
    #registerForm
    .wizard-content__stage {
    position: relative;
    flex: 0 0 auto;
    width: 100%;
    min-height: 0;
    max-height: none;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    box-sizing: border-box;
}

body.page-register:not(.kinma-wizard-profile-preview-step):not(.kinma-wizard-register-success-step):not(.kinma-register-wizard-sliding)
    #registerForm
    .wizard-content {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 0 0 auto !important;
}

body.page-register:not(.kinma-wizard-profile-preview-step):not(.kinma-wizard-register-success-step)
    #registerForm
    .wizard-content__stage
    > div.wizard-step-slide-current:not(.hidden) {
    flex: 0 0 auto;
    width: 100%;
    min-height: 0;
    max-height: none;
    overflow: visible;
    align-self: stretch;
}

body.page-register:not(.kinma-wizard-profile-preview-step):not(.kinma-wizard-register-success-step) #registerForm {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 0;
    width: 100%;
}

body.page-register:not(.kinma-wizard-profile-preview-step)
    #registerForm
    .wizard-content:has(.wizard-step-slide-animating) {
    overflow: hidden;
}

/* Slide: nur gemessene Höhe — kein Slot-Fallback (würde Bühne auf volle Viewport-Höhe aufblasen) */
body.page-register.kinma-register-wizard-sliding:not(.kinma-wizard-profile-preview-step):not(.kinma-wizard-register-success-step)
    #registerForm
    .wizard-content {
    height: var(--register-wizard-slide-lock-height) !important;
    min-height: var(--register-wizard-slide-lock-height) !important;
    max-height: var(--register-wizard-slide-lock-height) !important;
    flex: 0 0 auto !important;
    overflow: hidden !important;
}

body.page-register.kinma-register-wizard-sliding:not(.kinma-wizard-profile-preview-step):not(.kinma-wizard-register-success-step)
    #registerForm
    .wizard-content__stage {
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    flex: 1 1 auto !important;
    position: relative !important;
    overflow: hidden !important;
    align-items: stretch !important;
}

body.page-register.kinma-register-wizard-sliding .register-wizard-form-layer {
    overflow: hidden !important;
}

/* Formularblock immer vertikal zentriert — auch während Slide (kein flex-start-Sprung) */
body.page-register:not(.kinma-wizard-profile-preview-step):not(.kinma-wizard-register-success-step)
    .wizard-layout
    .wizard-form-layer.register-wizard-form-layer {
    justify-content: center !important;
}

/* Account / Grunddaten: gleiche Slide-Bühne wie Dateien (flex-Zentrierung darf nicht durch display:block kippen) */
body.page-register.kinma-register-wizard-sliding:not(.kinma-wizard-profile-preview-step):not(.kinma-wizard-register-success-step)
    #registerForm
    .wizard-content__stage
    > div.wizard-step-slide-animating.register-wizard-step-account,
body.page-register.kinma-register-wizard-sliding:not(.kinma-wizard-profile-preview-step):not(.kinma-wizard-register-success-step)
    #registerForm
    .wizard-content__stage
    > div.wizard-step-slide-animating.wizard-step-grunddaten,
body.page-register.kinma-register-wizard-sliding:not(.kinma-wizard-profile-preview-step):not(.kinma-wizard-register-success-step)
    #registerForm
    .wizard-content__stage
    > div.wizard-step-slide-animating.register-wizard-step-kinma {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

body.page-register.kinma-register-wizard-sliding:not(.kinma-wizard-profile-preview-step)
    #registerForm
    .wizard-content__stage
    > div.wizard-step-slide-animating.register-wizard-step-account
    > .wizard-step-slide-motion {
    max-width: none !important;
}

body.page-register.kinma-register-wizard-sliding:not(.kinma-wizard-profile-preview-step)
    #registerForm
    .wizard-content__stage
    > div.wizard-step-slide-animating.wizard-step-grunddaten
    > .wizard-step-slide-motion {
    max-width: 100% !important;
    width: 100% !important;
}

body.page-register.kinma-wizard-profile-preview-step #registerForm .wizard-content {
    position: relative;
    overflow: hidden;
    width: 100%;
}

body.page-register #registerForm .wizard-content > .wizard-content__slide-spacer {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    visibility: hidden;
    pointer-events: none;
    flex-shrink: 0;
}

body.page-register:not(.kinma-wizard-profile-preview-step):not(.kinma-wizard-register-success-step)
    #registerForm
    .wizard-content__stage
    > div.wizard-step-slide-animating {
    position: absolute !important;
    inset: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
    transform: none !important;
    will-change: auto;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

body.page-register:not(.kinma-wizard-profile-preview-step)
    #registerForm
    .wizard-content__stage
    > div.wizard-step-slide-animating
    > .wizard-step-slide-motion {
    width: 100%;
    max-width: var(--register-form-max-width, min(420px, 100%));
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    will-change: transform, opacity;
}

body.page-register:not(.kinma-wizard-profile-preview-step)
    #registerForm
    .wizard-content__stage
    > div.wizard-step-grunddaten.wizard-step-slide-animating
    > .wizard-step-slide-motion,
body.page-register:not(.kinma-wizard-profile-preview-step)
    #registerForm
    .wizard-content__stage
    > div.wizard-step-grunddaten:not(.hidden)
    > .wizard-step-slide-motion {
    max-width: 100% !important;
}

body.page-register:not(.kinma-wizard-profile-preview-step)
    #registerForm
    .wizard-content__stage
    > div.wizard-step-slide-animating:has(#profile-preview-wrapper) {
    max-width: 100% !important;
}

body.page-register #registerForm .wizard-content__stage > div.register-wizard-step-success.wizard-step-slide-animating,
body.page-register.kinma-wizard-register-success-step
    #registerForm
    .wizard-content__stage
    > div.register-wizard-step-success.wizard-step-slide-animating {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    left: 0 !important;
    right: 0 !important;
}

body.page-register.kinma-wizard-profile-preview-step #registerForm .wizard-content__stage > div.wizard-step-slide-animating {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    pointer-events: none;
    will-change: transform, opacity;
}

body.page-register.kinma-register-wizard-sliding:not(.kinma-wizard-profile-preview-step):not(.kinma-wizard-register-success-step)
    #registerForm
    .wizard-content__stage {
    justify-content: center !important;
}

body.page-register.kinma-wizard-grunddaten-step:not(.kinma-wizard-profile-preview-step):not(.kinma-wizard-register-success-step):not(.kinma-register-wizard-sliding)
    #registerForm
    .wizard-content__stage {
    justify-content: flex-start !important;
}

body.page-register #registerForm .wizard-content__stage > div.wizard-step-slide-current {
    position: relative;
    z-index: 2;
    pointer-events: auto;
}

@keyframes kinma-register-slide-in-forward {
    from {
        transform: translate3d(100vw, 0, 0);
        opacity: 0.4;
    }
    to {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes kinma-register-slide-out-forward {
    from {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
    to {
        transform: translate3d(-100vw, 0, 0);
        opacity: 0.4;
    }
}

@keyframes kinma-register-slide-in-back {
    from {
        transform: translate3d(-100vw, 0, 0);
        opacity: 0.4;
    }
    to {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes kinma-register-slide-out-back {
    from {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
    to {
        transform: translate3d(100vw, 0, 0);
        opacity: 0.4;
    }
}

body.page-register #registerForm .wizard-content__stage > div.wizard-step-slide-animating.wizard-step-slide-current {
    z-index: 2;
}

body.page-register #registerForm .wizard-content__stage > div.wizard-step-slide-animating:not(.wizard-step-slide-current) {
    z-index: 1;
}

body.page-register #registerForm .wizard-content .wizard-step-slide-motion.wizard-step-slide-in-forward {
    animation: kinma-register-slide-in-forward 0.32s cubic-bezier(0.33, 1, 0.68, 1) both;
}

body.page-register #registerForm .wizard-content .wizard-step-slide-motion.wizard-step-slide-out-forward {
    animation: kinma-register-slide-out-forward 0.32s cubic-bezier(0.33, 1, 0.68, 1) both;
}

body.page-register #registerForm .wizard-content .wizard-step-slide-motion.wizard-step-slide-in-back {
    animation: kinma-register-slide-in-back 0.32s cubic-bezier(0.33, 1, 0.68, 1) both;
}

body.page-register #registerForm .wizard-content .wizard-step-slide-motion.wizard-step-slide-out-back {
    animation: kinma-register-slide-out-back 0.32s cubic-bezier(0.33, 1, 0.68, 1) both;
}

/* ─── Erfolgs-Section nach Registrieren (Fullscreen, grün) ─── */
body.page-register.kinma-wizard-register-success-step {
    --register-success-gap-top: 0;
    --register-success-gap-x: 0;
    --register-success-gap-bottom: 0;
    --register-wizard-nav-zone: 0;
    background: var(--register-wizard-progress-green, #22c55e) !important;
}

body.page-register.kinma-wizard-register-success-step .wizard-layout,
body.page-register.kinma-wizard-register-success-step .register-wizard-form-layer {
    background: var(--register-wizard-progress-green, #22c55e) !important;
}

body.page-register.kinma-wizard-register-success-step .register-wizard-form-layer {
    align-items: stretch !important;
    justify-content: stretch !important;
    padding: 0 !important;
    bottom: 0 !important;
}

body.page-register.kinma-wizard-register-success-step.kinma-register-wizard-sliding
    .wizard-layout
    .wizard-form-layer.register-wizard-form-layer {
    justify-content: stretch !important;
    overflow: hidden !important;
}

body.page-register.kinma-wizard-register-success-step .register-wizard-buttons-island {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

body.page-register.kinma-wizard-register-success-step .register-wizard-head__progress {
    opacity: 1 !important;
    pointer-events: none;
}

body.page-register.kinma-wizard-register-success-step #registerForm {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: 100% !important;
}

body.page-register.kinma-wizard-register-success-step #registerForm .wizard-content {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    background: transparent !important;
    align-items: stretch !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

body.page-register.kinma-wizard-register-success-step #registerForm .wizard-content > .wizard-content__slide-spacer {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.page-register.kinma-wizard-register-success-step #registerForm .wizard-content__stage {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-height: 0 !important;
    height: 100% !important;
}

body.page-register.kinma-wizard-register-success-step #registerForm,
body.page-register.kinma-wizard-register-success-step .register-wizard-form-layer > .container {
    background: transparent !important;
}

body.page-register.kinma-wizard-register-success-step .register-wizard-form-layer > .container {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

body.page-register.kinma-wizard-register-success-step #registerForm .wizard-content__stage > div.register-wizard-step-success,
body.page-register.kinma-wizard-register-success-step
    #registerForm
    .wizard-content__stage
    > div.register-wizard-step-success.wizard-step-slide-animating,
body.page-register.kinma-wizard-register-success-step
    #registerForm
    .wizard-content__stage
    > div.register-wizard-step-success.wizard-step-slide-current {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    align-self: stretch !important;
}

.register-wizard-success-screen {
    box-sizing: border-box;
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-height: 100%;
    padding: clamp(32px, 6vh, 56px) clamp(20px, 5vw, 40px);
    padding-bottom: max(clamp(32px, 6vh, 56px), env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(16px, 3vh, 28px);
    text-align: center;
    color: #ffffff;
    background: var(--register-wizard-progress-green, #22c55e);
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
}

.register-wizard-success-screen__check {
    position: relative;
    width: clamp(96px, 22vw, 148px);
    height: clamp(96px, 22vw, 148px);
    flex-shrink: 0;
}

.register-wizard-success-screen__check-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: transparent;
    border: clamp(5px, 1.15vw, 7px) solid #ffffff;
    box-shadow: none;
    box-sizing: border-box;
}

.register-wizard-success-screen__check-icon {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' stroke='white' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center;
}

body.page-register.kinma-wizard-register-success-step .register-wizard-success-screen__check {
    animation: kinma-register-success-check-pop 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
}

@keyframes kinma-register-success-check-pop {
    from {
        opacity: 0;
        transform: scale(0.72);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.register-wizard-success-screen__title {
    margin: 0;
    font-size: clamp(1.5rem, 4.5vw, 2.25rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #ffffff;
}

.register-wizard-success-screen__subtitle {
    margin: 0;
    font-size: clamp(1.05rem, 2.8vw, 1.35rem);
    font-weight: 600;
    line-height: 1.35;
    color: #ffffff;
}

body.page-register.kinma-wizard-register-success-step .register-wizard-success-screen__title,
body.page-register.kinma-wizard-register-success-step .register-wizard-success-screen__subtitle {
    animation: kinma-register-success-text-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.28s both;
}

@keyframes kinma-register-success-text-in {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

body.page-register.kinma-wizard-register-success-step .register-wizard-steps .wizard-step {
    pointer-events: none;
    opacity: 1 !important;
}

body.page-register.kinma-wizard-register-success-step .register-wizard-steps .wizard-step.active .step-number {
    width: var(--register-wizard-step-size) !important;
    height: var(--register-wizard-step-size) !important;
    min-width: var(--register-wizard-step-size) !important;
    max-width: var(--register-wizard-step-size) !important;
    min-height: var(--register-wizard-step-size) !important;
    margin-top: 0 !important;
    font-size: 0 !important;
    color: transparent !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

body.page-register.kinma-wizard-register-success-step .register-wizard-steps .wizard-step.active .step-number::before,
body.page-register.kinma-wizard-register-success-step .register-wizard-steps .wizard-step:not(.wizard-step--kinma) .step-number::before {
    display: block !important;
    opacity: 1 !important;
    background: var(--register-wizard-progress-green, #22c55e) !important;
    border: 2px solid #ffffff !important;
}

body.page-register.kinma-wizard-register-success-step .register-wizard-steps .wizard-step.active .step-number::after,
body.page-register.kinma-wizard-register-success-step .register-wizard-steps .wizard-step:not(.wizard-step--kinma) .step-number::after {
    display: block !important;
    opacity: 1 !important;
}

body.page-register.kinma-wizard-register-success-step .register-wizard-steps .wizard-step .step-label {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

body.page-register.kinma-wizard-register-success-step .register-wizard-steps .wizard-step .step-number {
    opacity: 1 !important;
}

body.page-register.kinma-wizard-register-success-step .register-wizard-steps .wizard-step.completed .step-number::before {
    background: var(--register-wizard-progress-green, #22c55e) !important;
    border-color: #ffffff !important;
    opacity: 1 !important;
}

body.page-register.kinma-wizard-register-success-step .register-wizard-steps .wizard-step.completed .step-number::after {
    opacity: 1 !important;
}

body.page-register.kinma-wizard-register-success-step .register-wizard-progress-glow {
    opacity: 1 !important;
}

@media (min-width: 1025px) {
    body.page-register.kinma-wizard-register-success-step .wizard-layout .wizard-form-layer.register-wizard-form-layer {
        justify-content: stretch !important;
        align-items: stretch !important;
        bottom: 0 !important;
        overflow: hidden !important;
    }

    body.page-register.kinma-wizard-register-success-step #registerForm .wizard-content {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.page-register.kinma-wizard-register-success-step .register-wizard-success-screen__check,
    body.page-register.kinma-wizard-register-success-step .register-wizard-success-screen__title,
    body.page-register.kinma-wizard-register-success-step .register-wizard-success-screen__subtitle {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.page-register #registerForm .wizard-content__stage > div.wizard-step-slide-animating {
        inset: 0 !important;
        transform: none !important;
    }

    body.page-register #registerForm .wizard-content .wizard-step-slide-motion.wizard-step-slide-in-forward,
    body.page-register #registerForm .wizard-content .wizard-step-slide-motion.wizard-step-slide-out-forward,
    body.page-register #registerForm .wizard-content .wizard-step-slide-motion.wizard-step-slide-in-back,
    body.page-register #registerForm .wizard-content .wizard-step-slide-motion.wizard-step-slide-out-back {
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

/* auth-mobile: generisches Wizard-Scroll-/Form-Layout nicht auf Register anwenden */
@media (max-width: 1024px) {
    body.page-register .wizard-layout {
        flex: none !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
        display: block !important;
    }

    body.page-register .wizard-layout .wizard-form-layer:not(.register-wizard-form-layer) {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        overflow-x: hidden !important;
        overflow-y: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    /* Register: eigener Scroll-Slot zwischen Progress und Nav — höhere Spezifität als auth-mobile */
    body.page-register .wizard-layout .wizard-form-layer.register-wizard-form-layer {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
        touch-action: pan-y;
        align-items: stretch !important;
    }

    body.page-register.kinma-register-wizard-sliding
        .wizard-layout
        .wizard-form-layer.register-wizard-form-layer {
        overflow-y: hidden !important;
    }

    body.page-register.kinma-wizard-profile-preview-step .register-wizard-form-layer > .container {
        max-width: 100% !important;
    }

    body.page-register.kinma-wizard-register-success-step .register-wizard-form-layer {
        padding-left: 0 !important;
        padding-right: 0 !important;
        bottom: 0 !important;
        justify-content: stretch !important;
    }

    body.page-register.kinma-wizard-register-success-step .register-wizard-form-layer > .container,
    body.page-register.kinma-wizard-register-success-step
        .wizard-layout
        .wizard-form-layer.register-wizard-form-layer
        .container {
        padding: 0 !important;
        flex: 1 1 auto !important;
        height: 100% !important;
        max-height: 100% !important;
    }

    body.page-register.kinma-wizard-register-success-step .register-wizard-form-layer #registerForm {
        flex: 1 1 auto !important;
        height: 100% !important;
        max-height: 100% !important;
    }

    /* Progress: aktueller Schritt mittig, Nachbar links/rechts (gleiche Kreise wie Desktop) */
    body.page-register {
        --register-mobile-progress-gap: clamp(20px, 8vw, 40px);
        --register-mobile-progress-side: calc(
            max(24px, env(safe-area-inset-left, 0px)) + var(--register-wizard-nav-btn-width, 68px) +
                var(--register-wizard-preview-nav-gap, 12px)
        );
        --register-mobile-progress-side-right: max(12px, env(safe-area-inset-right, 0px));
    }

    body.page-register.register-wizard-progress-mobile-sliding .register-wizard-steps .step-label {
        transition: none !important;
    }

    body.page-register.register-wizard-progress-mobile .register-wizard-progress-glow:not(.register-wizard-progress-glow--traveling) {
        transition: none !important;
    }

    body.page-register.register-wizard-progress-mobile
        .register-wizard-progress-rail__remainder:not(.register-wizard-progress-rail__remainder--traveling) {
        transition: none !important;
    }

    body.page-register.register-wizard-progress-mobile
        .register-wizard-progress-rail__remainder.register-wizard-progress-rail__remainder--traveling {
        will-change: left, width;
    }

    /* Mobile: nur der aktive Kreis hat Text — enger unter dem Kreis */
    body.page-register.register-wizard-progress-mobile {
        --register-wizard-step-label-gap: 2px;
        --register-wizard-step-label-active-size: 13px;
        /* Graue Zukunfts-Kreise: stärker kleiner je weiter vom aktiven Schritt */
        --register-wizard-ahead-scale-step: 0.16;
        --register-wizard-ahead-scale-min: 0.48;
        --register-wizard-ahead-scale-min-px: 4;
    }

    /* Mobile: erledigte Kreise ebenfalls nach Abstand skalieren (keine gleichen Größen) */
    body.page-register.register-wizard-progress-mobile
        .register-wizard-steps
        .wizard-step.completed:not(.wizard-step--kinma)
        .step-number {
        width: calc(var(--register-wizard-step-size) * var(--register-wizard-step-ahead-scale, 1)) !important;
        height: calc(var(--register-wizard-step-size) * var(--register-wizard-step-ahead-scale, 1)) !important;
        min-width: calc(var(--register-wizard-step-size) * var(--register-wizard-step-ahead-scale, 1)) !important;
        max-width: calc(var(--register-wizard-step-size) * var(--register-wizard-step-ahead-scale, 1)) !important;
        min-height: calc(var(--register-wizard-step-size) * var(--register-wizard-step-ahead-scale, 1)) !important;
        margin-top: calc(
            (var(--register-wizard-step-size) - var(--register-wizard-step-size) * var(--register-wizard-step-ahead-scale, 1)) /
                2
        ) !important;
    }

    body.page-register.register-wizard-progress-mobile .register-wizard-steps .wizard-step:not(.active) .step-label {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        clip-path: inset(50%) !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }

    body.page-register.register-wizard-progress-mobile .register-wizard-steps .wizard-step.active .step-label {
        top: calc(var(--register-wizard-step-active-size) + var(--register-wizard-step-label-gap)) !important;
        margin-top: 0 !important;
        padding: 2px 8px 3px !important;
        line-height: 1.1 !important;
        font-size: var(--register-wizard-step-label-active-size, 13px) !important;
        transform: translateX(-50%) !important;
    }

    body.page-register.register-wizard-progress-mobile .register-wizard-head {
        padding-bottom: calc(
            var(--register-wizard-step-label-gap) + var(--register-wizard-step-label-active-size, 13px) + 4px
        ) !important;
        min-height: calc(
            var(--register-wizard-rail-inset-top) + var(--register-wizard-step-active-size) +
                var(--register-wizard-step-label-gap) + var(--register-wizard-step-label-active-size, 13px) + 4px
        ) !important;
    }

    body.page-register .register-wizard-head {
        padding-left: var(--register-mobile-progress-side) !important;
        padding-right: var(--register-mobile-progress-side-right) !important;
        overflow: visible;
    }

    body.page-register .register-wizard-head__progress {
        overflow: visible;
        padding: 0 !important;
    }

    /* Progress-Zeile bis zum Bildschirmrand (Head-Padding ausgleichen) */
    body.page-register.register-wizard-progress-mobile .register-wizard-head__progress {
        margin-left: calc(-1 * var(--register-mobile-progress-side));
        margin-right: calc(-1 * var(--register-mobile-progress-side-right));
        width: calc(
            100% + var(--register-mobile-progress-side) + var(--register-mobile-progress-side-right)
        );
    }

    body.page-register .register-wizard-progress-carousel {
        overflow: visible;
        width: 100%;
        touch-action: pan-y;
    }

    /* Mobile: nur ein grauer Verlauf (.register-wizard-progress-rail__remainder), keine Segment-Tracks */
    body.page-register.register-wizard-progress-mobile .register-wizard-progress-segment__track {
        opacity: 0 !important;
    }

    body.page-register .register-wizard-progress-carousel__track {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: flex-start;
        gap: var(--register-mobile-progress-gap);
        width: max-content;
        min-width: 0;
        will-change: transform;
        transition: transform var(--register-wizard-progress-carousel-motion);
    }

    body.page-register .register-wizard-progress-carousel__track.is-instant {
        transition: none !important;
    }

    body.page-register .register-wizard-progress-carousel__track > .register-wizard-steps {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
        justify-content: flex-start !important;
        gap: var(--register-mobile-progress-gap) !important;
    }

    body.page-register .register-wizard-steps .wizard-step {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
    }

    body.page-register.register-wizard-kinma-pinned .register-wizard-head {
        overflow-x: clip;
        overflow-y: visible;
    }

    body.page-register.register-wizard-kinma-pinned .register-wizard-head__progress {
        overflow: visible;
    }

    body.page-register.register-wizard-kinma-pinned .register-wizard-progress-carousel {
        position: relative;
        overflow-x: clip;
        overflow-y: visible;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        clip-path: inset(-300% 0 -500% var(--register-mobile-progress-clip-left, 0px));
        -webkit-clip-path: inset(-300% 0 -500% var(--register-mobile-progress-clip-left, 0px));
    }

    /* Kinma aus dem transformierten Karussell-Track in den Head (echtes viewport-fixed) */
    body.page-register.register-wizard-kinma-pinned .register-wizard-kinma-pin-layer {
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 6;
        overflow: visible;
    }

    body.page-register.register-wizard-kinma-pinned .register-wizard-kinma-pin-layer .step-number--kinma {
        pointer-events: auto;
    }

    body.page-register.register-wizard-kinma-pinned .register-wizard-steps .wizard-step--kinma {
        position: relative;
        z-index: 0;
        margin: 0 !important;
        pointer-events: none;
        visibility: hidden;
    }

    body.page-register.register-wizard-kinma-pinned
        .register-wizard-steps
        .wizard-step--kinma
        .register-wizard-kinma-step-placeholder {
        flex: 0 0 auto !important;
        width: var(--register-wizard-step-size) !important;
        height: var(--register-wizard-step-size) !important;
        min-width: var(--register-wizard-step-size) !important;
        min-height: var(--register-wizard-step-size) !important;
        visibility: hidden;
        pointer-events: none;
    }

    body.page-register.register-wizard-kinma-pinned .register-wizard-steps .wizard-step--kinma .step-number--kinma {
        visibility: hidden;
        pointer-events: none;
    }

    body.page-register.register-wizard-kinma-pinned .register-wizard-steps .wizard-step:not(.wizard-step--kinma) {
        position: relative;
        z-index: 1;
    }

    body.page-register.register-wizard-kinma-pinned .register-wizard-kinma-pin-layer .step-number--kinma.register-wizard-kinma-pin-flip,
    body.page-register.register-wizard-kinma-pinned .register-wizard-steps .wizard-step--kinma .step-number--kinma.register-wizard-kinma-pin-flip,
    body.page-register.register-wizard-kinma-pinned .register-wizard-steps .wizard-step--kinma .register-wizard-kinma-pin-flip,
    body.page-register.register-wizard-progress-mobile .register-wizard-kinma-pin-layer .step-number--kinma.register-wizard-kinma-pin-flip,
    body.page-register.register-wizard-progress-mobile .register-wizard-steps .wizard-step--kinma .step-number--kinma.register-wizard-kinma-pin-flip,
    body.page-register.register-wizard-progress-mobile .register-wizard-steps .wizard-step--kinma .register-wizard-kinma-pin-flip {
        will-change: transform;
        backface-visibility: hidden;
    }

    /* ─── Mobile: Zurück / Weiter über Cloudflare-Badge ─── */
    body.page-register {
        --register-cf-dock-height: 44px;
        --register-wizard-nav-bar-height: 48px;
        --register-wizard-nav-gap-above-cf: 4px;
        --register-wizard-mobile-gutter: 20px;
        --register-wizard-progress-carousel-motion: 0.52s cubic-bezier(0.33, 1, 0.68, 1);
        --register-wizard-motion: var(--register-wizard-progress-carousel-motion);
        --register-wizard-circle-motion: 0.52s cubic-bezier(0.33, 1, 0.68, 1);
        --register-wizard-nav-zone: calc(
            var(--register-cf-dock-height) + var(--register-wizard-nav-gap-above-cf) +
                var(--register-wizard-nav-bar-height) + env(safe-area-inset-bottom, 0px)
        );
        --register-wizard-head-zone: calc(
            var(--register-wizard-rail-inset-top) + var(--register-wizard-step-active-size) +
                var(--register-wizard-step-label-gap, 2px) + var(--register-wizard-step-label-active-size, 13px) + 6px
        );
        --register-mobile-progress-side: calc(
            var(--register-wizard-mobile-gutter) + env(safe-area-inset-left, 0px)
        );
        --register-mobile-progress-side-right: max(12px, env(safe-area-inset-right, 0px));
        --register-mobile-kinma-pin-offset-x: 0px;
        min-height: 100dvh !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        display: block !important;
        box-sizing: border-box;
    }

    body.page-register .wizard-layout {
        min-height: 100dvh !important;
        height: 100dvh !important;
        padding-top: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        position: relative !important;
        box-sizing: border-box;
    }

    body.page-register .wizard-layout .wizard-form-layer.register-wizard-form-layer {
        position: fixed !important;
        z-index: 1;
        top: var(--register-wizard-head-zone) !important;
        bottom: var(--register-wizard-nav-zone) !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        flex: none !important;
        margin: 0 !important;
        /* Kein seitliches Padding hier — Clip-Kante = Viewport; Gutter am Container / Slide-Motion */
        padding: 0 !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
        scroll-padding-top: 8px;
        scroll-padding-bottom: 12px;
        touch-action: pan-y;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: center !important;
    }

    body.page-register .register-wizard-form-layer > .container {
        flex: 0 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        min-height: 0 !important;
        align-self: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 12px
            calc(var(--register-wizard-mobile-gutter) + env(safe-area-inset-right, 0px))
            8px
            calc(var(--register-wizard-mobile-gutter) + env(safe-area-inset-left, 0px)) !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        max-height: none !important;
    }

    body.page-register.kinma-register-wizard-sliding
        .wizard-layout
        .wizard-form-layer.register-wizard-form-layer {
        justify-content: center !important;
    }

    /* Slide: volle Viewport-Breite für Overflow-Clip, Gutter im Motion-Wrapper */
    body.page-register.kinma-register-wizard-sliding:not(.kinma-wizard-profile-preview-step):not(.kinma-wizard-register-success-step)
        .register-wizard-form-layer
        > .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.page-register.kinma-register-wizard-sliding:not(.kinma-wizard-profile-preview-step):not(.kinma-wizard-register-success-step)
        .register-wizard-form-layer
        #registerForm
        .wizard-content {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow: hidden !important;
    }

    body.page-register.kinma-register-wizard-sliding:not(.kinma-wizard-profile-preview-step):not(.kinma-wizard-register-success-step)
        #registerForm
        .wizard-content__stage
        > div.wizard-step-slide-animating
        > .wizard-step-slide-motion {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: calc(var(--register-wizard-mobile-gutter) + env(safe-area-inset-left, 0px)) !important;
        padding-right: calc(var(--register-wizard-mobile-gutter) + env(safe-area-inset-right, 0px)) !important;
        box-sizing: border-box !important;
    }

    /* auth-mobile setzt 16px am .container — auf Register nur Gutter am Container (ruhend) */
    body.page-register .wizard-layout .wizard-form-layer.register-wizard-form-layer .container {
        padding-left: calc(var(--register-wizard-mobile-gutter) + env(safe-area-inset-left, 0px)) !important;
        padding-right: calc(var(--register-wizard-mobile-gutter) + env(safe-area-inset-right, 0px)) !important;
    }

    body.page-register.kinma-register-wizard-sliding .wizard-layout .wizard-form-layer.register-wizard-form-layer .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.page-register .register-wizard-form-layer #registerForm {
        flex: 0 0 auto !important;
        height: auto !important;
        overflow: visible !important;
        max-height: none !important;
        align-items: stretch !important;
        width: 100% !important;
    }

    body.page-register:not(.kinma-wizard-profile-preview-step):not(.kinma-wizard-register-success-step):not(.kinma-register-wizard-sliding)
        .register-wizard-form-layer
        #registerForm
        .wizard-content,
    body.page-register:not(.kinma-wizard-profile-preview-step):not(.kinma-wizard-register-success-step):not(.kinma-register-wizard-sliding)
        .register-wizard-form-layer
        #registerForm
        .wizard-content__stage,
    body.page-register:not(.kinma-wizard-profile-preview-step):not(.kinma-wizard-register-success-step):not(.kinma-register-wizard-sliding)
        .register-wizard-form-layer
        #registerForm
        .wizard-content__stage
        > div.wizard-step-slide-current:not(.hidden) {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        flex: 0 0 auto !important;
    }

    body.page-register:not(.kinma-wizard-profile-preview-step):not(.kinma-wizard-register-success-step):not(.kinma-register-wizard-sliding)
        #registerForm
        .wizard-content {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }

    body.page-register .register-wizard-form-layer #registerForm .wizard-content,
    body.page-register .register-wizard-form-layer #registerForm .wizard-content__stage {
        max-height: none !important;
        width: 100% !important;
    }

    body.page-register:not(.kinma-register-wizard-sliding) .register-wizard-form-layer #registerForm .wizard-content,
    body.page-register:not(.kinma-register-wizard-sliding) .register-wizard-form-layer #registerForm .wizard-content__stage {
        overflow: visible !important;
    }

    body.page-register:not(.kinma-wizard-profile-preview-step):not(.kinma-wizard-register-success-step)
        #registerForm
        .wizard-content__stage
        > div.register-wizard-step-account,
    body.page-register:not(.kinma-wizard-profile-preview-step):not(.kinma-wizard-register-success-step)
        #registerForm
        .wizard-content__stage
        > div.wizard-step-slide-current.register-wizard-step-account {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    body.page-register .register-wizard-buttons-island.wizard-buttons-island,
    body.page-register .register-wizard-buttons-island {
        position: fixed !important;
        inset: 0 !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        pointer-events: none !important;
        z-index: 10100 !important;
        overflow: visible !important;
    }

    body.page-register .register-wizard-buttons.wizard-buttons,
    body.page-register .register-wizard-buttons {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: calc(
            var(--register-cf-dock-height, 44px) + var(--register-wizard-nav-gap-above-cf, 4px) +
                env(safe-area-inset-bottom, 0px)
        ) !important;
        top: auto !important;
        transform: none !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        width: 100% !important;
        height: auto !important;
        min-height: var(--register-wizard-nav-bar-height) !important;
        margin: 0 !important;
        padding: 6px
            calc(var(--register-wizard-mobile-gutter) + env(safe-area-inset-right, 0px)) 4px
            calc(var(--register-wizard-mobile-gutter) + env(safe-area-inset-left, 0px)) !important;
        box-sizing: border-box !important;
        pointer-events: auto !important;
        z-index: 10101 !important;
        background: linear-gradient(
            to top,
            rgba(255, 255, 255, 0.98) 0%,
            rgba(255, 255, 255, 0.92) 55%,
            rgba(255, 255, 255, 0) 100%
        ) !important;
        background-clip: padding-box !important;
    }

    body.page-register .register-wizard-buttons .btn,
    body.page-register .register-wizard-buttons .wizard-nav-btn {
        position: static !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: min(200px, 46vw) !important;
        height: auto !important;
        min-height: 44px !important;
        max-height: none !important;
        flex: 1 1 0 !important;
        padding: 12px 18px !important;
        font-size: 15px !important;
        margin: 0 !important;
        z-index: auto !important;
    }

    body.page-register .register-wizard-buttons .wizard-nav-btn {
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
        border-radius: 9999px !important;
    }

    body.page-register .register-wizard-buttons .wizard-nav-btn--next {
        flex-direction: row-reverse !important;
    }

    body.page-register .register-wizard-buttons .wizard-nav-btn__label {
        position: static !important;
        width: auto !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
        clip: auto !important;
        clip-path: none !important;
        white-space: nowrap !important;
        border: 0 !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
    }

    body.page-register .register-wizard-buttons .wizard-nav-btn__icon {
        width: 18px !important;
        height: 18px !important;
    }

    body.page-register .register-wizard-form-layer {
        bottom: var(--register-wizard-nav-zone) !important;
    }

    body.page-register.kinma-wizard-profile-preview-step {
        --register-wizard-preview-inset-left: max(16px, env(safe-area-inset-left, 0px));
        --register-wizard-preview-inset-right: max(16px, env(safe-area-inset-right, 0px));
        --register-wizard-preview-bottom-gap: calc(var(--register-wizard-nav-zone) + 8px);
    }

    body.page-register .register-wizard-buttons .wizard-nav-btn.btn-primary:not(:disabled):not(.is-wizard-nav-disabled):hover,
    body.page-register .register-wizard-buttons .wizard-nav-btn.btn-secondary:not(:disabled):not(.is-wizard-nav-disabled):hover,
    body.page-register .register-wizard-buttons .wizard-nav-btn--submit.btn-primary:not(:disabled):hover {
        transform: scale(0.96) !important;
    }

    body.page-register .register-wizard-buttons .wizard-nav-btn.btn-primary:not(:disabled):not(.is-wizard-nav-disabled):active,
    body.page-register .register-wizard-buttons .wizard-nav-btn.btn-secondary:not(:disabled):not(.is-wizard-nav-disabled):active,
    body.page-register .register-wizard-buttons .wizard-nav-btn--submit.btn-primary:not(:disabled):active {
        transform: scale(0.94) !important;
    }

    body.page-register .register-wizard-buttons .wizard-nav-btn:disabled,
    body.page-register .register-wizard-buttons .wizard-nav-btn.is-wizard-nav-disabled {
        transform: none !important;
    }

    /* Step 1 (no Zurück): Weiter fills the nav row (same width as Zurück + Weiter) */
    body.page-register
        .register-wizard-buttons:not(:has(.btn-prev:not(.hidden):not(.is-wizard-nav-hidden)))
        .btn-next,
    body.page-register
        .register-wizard-buttons:not(:has(.btn-prev:not(.hidden):not(.is-wizard-nav-hidden)))
        .btn-submit {
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: none !important;
    }

    @keyframes kinma-register-nav-prev-enter-mobile {
        from {
            opacity: 0;
            transform: translate3d(-8px, 0, 0) scale(0.96);
        }
        to {
            opacity: 1;
            transform: none;
        }
    }

    @keyframes kinma-register-nav-next-enter-mobile {
        from {
            opacity: 0;
            transform: translate3d(8px, 0, 0) scale(0.96);
        }
        to {
            opacity: 1;
            transform: none;
        }
    }

    body.page-register.kinma-register-wizard-enter:not(.kinma-register-wizard-restoring):not(.kinma-google-oauth-busy)
        .register-wizard-buttons
        .wizard-nav-btn--prev:not(.is-wizard-nav-hidden):not(.hidden) {
        animation: kinma-register-nav-prev-enter-mobile 0.5s cubic-bezier(0.22, 1.12, 0.36, 1) both !important;
    }

    body.page-register.kinma-register-wizard-enter:not(.kinma-register-wizard-restoring):not(.kinma-google-oauth-busy)
        .register-wizard-buttons
        .wizard-nav-btn--next:not(.is-wizard-nav-hidden):not(.hidden),
    body.page-register.kinma-register-wizard-enter:not(.kinma-register-wizard-restoring):not(.kinma-google-oauth-busy)
        .register-wizard-buttons
        .wizard-nav-btn--submit:not(.is-wizard-nav-hidden):not(.hidden) {
        animation: kinma-register-nav-next-enter-mobile 0.5s cubic-bezier(0.22, 1.12, 0.36, 1) both !important;
    }
}

/* Register: Kinma als erster Wizard-Schritt (nicht nummeriert) — kein separates Nav-Logo */
body.page-register .left-nav-cluster--auth .kinma-logo-island.kinma-logo-btn,
body.page-register .settings-top-left .settings-logo-group {
    display: none !important;
}

body.page-register .register-wizard-steps .wizard-step--kinma {
    flex: 0 0 auto !important;
    width: var(--register-wizard-step-size) !important;
    min-width: var(--register-wizard-step-size) !important;
    max-width: var(--register-wizard-step-size) !important;
}

body.page-register .register-wizard-steps .wizard-step--kinma .step-number--kinma,
body.page-register .register-wizard-kinma-pin-layer .step-number--kinma {
    position: relative;
    width: var(--register-wizard-step-size) !important;
    height: var(--register-wizard-step-size) !important;
    min-width: var(--register-wizard-step-size) !important;
    min-height: var(--register-wizard-step-size) !important;
    padding: 0 !important;
    border-radius: 50% !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

body.page-register .register-wizard-steps .wizard-step--kinma.active .step-number--kinma {
    width: var(--register-wizard-step-active-size) !important;
    height: var(--register-wizard-step-active-size) !important;
    min-width: var(--register-wizard-step-active-size) !important;
    min-height: var(--register-wizard-step-active-size) !important;
    border: var(--register-wizard-step-active-ring-width, 5px) solid var(--register-wizard-nav-ink, #1a1a1a) !important;
}

body.page-register .register-wizard-steps .wizard-step--kinma .step-number--kinma .kinma-lang-outline,
body.page-register .register-wizard-kinma-pin-layer .step-number--kinma .kinma-lang-outline {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: none;
    box-sizing: border-box;
    z-index: 0;
    pointer-events: none;
}

body.page-register .register-wizard-steps .wizard-step--kinma .step-number--kinma .kinma-lang-inner,
body.page-register .register-wizard-kinma-pin-layer .step-number--kinma .kinma-lang-inner {
    position: absolute;
    inset: 12%;
    border-radius: 50%;
    background: #ffffff;
    z-index: 1;
    pointer-events: none;
}

body.page-register .register-wizard-steps .wizard-step--kinma .step-number--kinma .settings-logo-img,
body.page-register .register-wizard-kinma-pin-layer .step-number--kinma .settings-logo-img {
    position: relative;
    z-index: 2;
    width: 46%;
    height: 46%;
    object-fit: contain;
    display: block;
}

/* Kinma: kein grünes Häkchen nach Schrittwechsel — Logo bleibt */
body.page-register .register-wizard-steps .wizard-step--kinma.completed .step-number--kinma,
body.page-register .register-wizard-steps .wizard-step--kinma:not(.active):not(.completed) .step-number--kinma {
    display: flex !important;
    color: inherit !important;
    font-size: inherit !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

body.page-register .register-wizard-steps .wizard-step--kinma.completed .step-number--kinma::before,
body.page-register .register-wizard-steps .wizard-step--kinma.completed .step-number--kinma::after {
    display: none !important;
    content: none !important;
    animation: none !important;
}

body.page-register.kinma-wizard-register-success-step
    .register-wizard-steps
    .wizard-step--kinma.completed
    .step-number--kinma::before,
body.page-register.kinma-wizard-register-success-step
    .register-wizard-steps
    .wizard-step--kinma.completed
    .step-number--kinma::after {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
}

body.page-register .register-wizard-kinma-section .legal-info-content-root--inline {
    text-align: left;
}

body.page-register .register-wizard-step-kinma:not(.wizard-step-slide-current):not(.hidden) {
    display: none;
}

/* ─── Erfolg: Fullscreen-Grün unter Progress (Mobile + Desktop, finale Overrides) ─── */
body.page-register.kinma-wizard-register-success-step,
html:has(body.page-register.kinma-wizard-register-success-step) {
    background: var(--register-wizard-progress-green, #22c55e) !important;
}

body.page-register.kinma-wizard-register-success-step .wizard-layout {
    background: var(--register-wizard-progress-green, #22c55e) !important;
    min-height: 100dvh !important;
    height: 100dvh !important;
}

body.page-register.kinma-wizard-register-success-step .register-wizard-form-layer,
body.page-register.kinma-wizard-register-success-step
    .wizard-layout
    .wizard-form-layer.register-wizard-form-layer {
    position: fixed !important;
    top: var(--register-wizard-head-zone) !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    background: var(--register-wizard-progress-green, #22c55e) !important;
}

body.page-register.kinma-wizard-register-success-step .register-wizard-form-layer > .container,
body.page-register.kinma-wizard-register-success-step
    .wizard-layout
    .wizard-form-layer.register-wizard-form-layer
    .container {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    overflow: hidden !important;
    background: transparent !important;
}

body.page-register.kinma-wizard-register-success-step #registerForm {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

body.page-register.kinma-wizard-register-success-step #registerForm .wizard-content,
body.page-register.kinma-wizard-register-success-step #registerForm .wizard-content__stage {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    background: transparent !important;
}

body.page-register.kinma-wizard-register-success-step.kinma-register-wizard-sliding #registerForm .wizard-content,
body.page-register.kinma-wizard-register-success-step.kinma-register-wizard-sliding
    #registerForm
    .wizard-content__stage {
    height: 100% !important;
    min-height: 100% !important;
    max-height: none !important;
    flex: 1 1 auto !important;
}

body.page-register.kinma-wizard-register-success-step
    #registerForm
    .wizard-content__stage
    > div.register-wizard-step-success,
body.page-register.kinma-wizard-register-success-step
    #registerForm
    .wizard-content__stage
    > div.register-wizard-step-success.wizard-step-slide-current,
body.page-register.kinma-wizard-register-success-step
    #registerForm
    .wizard-content__stage
    > div.register-wizard-step-success.wizard-step-slide-animating {
    position: relative !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    align-self: stretch !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    background: var(--register-wizard-progress-green, #22c55e) !important;
}

body.page-register.kinma-wizard-register-success-step .register-wizard-success-screen {
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: var(--register-wizard-progress-green, #22c55e) !important;
}